From a3c406a018cdd06a4006864f246716b176ac4306 Mon Sep 17 00:00:00 2001
From: oldkid <oldkid@sekretaerbaer.net>
Date: Wed, 29 Jan 2025 14:04:24 +0100
Subject: [PATCH] Fix Photo Album und Nav Mobile

---
 bookface_dark.css  | 155 ++++++++++-----------------------
 bookface_light.css | 212 ++++++++++++++++-----------------------------
 2 files changed, 121 insertions(+), 246 deletions(-)

diff --git a/bookface_dark.css b/bookface_dark.css
index be5b6c1..b5d112b 100644
--- a/bookface_dark.css
+++ b/bookface_dark.css
@@ -1,8 +1,8 @@
 /*
-	Name	   : Bookface Dark
-	Version    : 1.2
+    Name	 : Bookface Dark
+    Version    : 1.2
     Licence    : AGPL
-    Created on : 19.01.2025
+    Created on : 26.01.2025
     Author     : Kristi H. @kmh@friendica.world feb @feb@loma.ml
 */
 
@@ -17,7 +17,7 @@
     --font-color-darker: $font_color_darker;
     --background-image: $background_image;
     --menu-background-hover-color: $menu_background_hover_color;
-    --border-color: $border_color;
+    --border-color: #333333;
 }
 
 body {
@@ -42,15 +42,7 @@ nav.navbar .nav > li > button{
        #topbar-first .nav > li > a:hover:not(.selected) {
               background-color: rgba(255,255,255,.1) !important;
               border-radius: 8px !important;
-       }		
-		#topbar-first #nav-notifications-menu li.notif-entry .media-object a img {
-			border-radius: 50%;
-		}
-		.notif-item img.notif-image {
-			border-radius: 50%;
-		}
-
-		
+       }
        .fa-lg {
               font-size: 24px !important;
        }
@@ -131,14 +123,6 @@ header #banner {
        height: 40px !important;
        width: 40px !important;
        }
-      	#navbar-brand-text {
-       	line-height: 40px;
-       	font-weight: 700;
-       	color: var(--link-color) !important;
-       }
-       #nav-login::before{
-       	content: 'Sign-In';
-       }
 .topbar ul.nav {
        left: 50% !important;
        margin-left: -25% !important;
@@ -199,12 +183,7 @@ header #banner {
 }
 #nav-user-menu {
     min-width: 250px !important;
-    overflow-x: hidden;
-}	
-	.btn {
-  		border-radius: 10px;
-	}
-
+}
 .nav-pills .dropdown-menu li a, 
 .nav-pills .dropdown-menu li .btn-link, 
 .nav-tabs .dropdown-menu li a, 
@@ -233,12 +212,7 @@ header #banner {
 .account .dropdown-menu li.divider, 
 .contact-photo-wrapper .dropdown-menu li.divider {
        background-color: var(--nav-bg) !important;
-} 
-
-.btn-group-xs > .btn, .btn-xs {
-	font-size: 17px;
-}
-   
+}    
 #topbar-first #nav-notifications-menu {
        border: 1px solid var(--background-color) !important;
 }
@@ -288,7 +262,7 @@ box-sizing: border-box;
               box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
        }
        #jotOpen::before {
-              content: '';
+              content: 'Compose';
               font-size: 15px;
               margin-right: 10px;
               line-height: 32px;
@@ -361,16 +335,16 @@ box-sizing: border-box;
         #addonslist {
             margin-top: 20px;
         }
-       		#settings-server button[type="submit"] {
-	  		float: right !important;
-	  		margin-left: 5px !important;
-	  		margin-bottom: 20px !important;
-			}
+	#settings-server button[type="submit"] {
+	  float: right !important;
+	  margin-left: 5px !important;
+	  margin-bottom: 20px !important;
+	}
        #adminpage button[type="submit"],
-       	input[type="submit"],
-		input[name="page_logs"],
-		input[name="republish_directory"],
-		input[name="page_tos"]{
+       input[type="submit"],
+	input[name="page_logs"],
+	input[name="republish_directory"],
+	input[name="page_tos"]{
 	    float: right;
 	    padding: 8px;		
 	}
@@ -389,7 +363,6 @@ box-sizing: border-box;
      #upload-photo:focus {
         background-color: darkblue !important;
     }
-
     
     /* 	HIDE ATTACHMENT BUTTON
     	=======================
@@ -677,7 +650,7 @@ aside .widget,
 				}
        /* END OF ACTION BUTTON LABELS */        
 /* Compose and Reply */
-#jot-modal .modal-header .compose-link {
+	#jot-modal .modal-header .compose-link {
 		border-radius: 100% !important;
 		height: 36px;
 		width: 36px;
@@ -707,7 +680,7 @@ aside .widget,
 #jot-modal-content,
 .wall-item-comment-wrapper {
 	background-color: rgb(37,39,40) !important;
-       border-radius: 15px !important;
+    border-radius: 15px !important;
     background-image: none;
 }
 	.wall-item-comment-wrapper {
@@ -735,8 +708,11 @@ aside .widget,
 #jot-modal-content .friendica-tagsinput {
        background-color: var(--background-color) !important;
 }
-#jot-modal-content .fbrowser .folders button {
-       background-color: rgba(255,255,255,.1) !important;
+#filebrowser .breadcrumb {
+	background-color: var(--background-color);
+}
+.fbrowser .folders button {
+       background-color: rgba(255,255,255,.5) !important;
        color: black !important;
        appearance: none;
        border: none;
@@ -744,12 +720,12 @@ aside .widget,
        width: 100%;
        margin-bottom: 5px;
 }
-	#jot-modal-content .fbrowser .folders button:hover,
-	#jot-modal-content .fbrowser .folders button:focus {
-		background-color: rgba(255,255,255,.2) !important;
+	.fbrowser .folders button:hover,
+	.fbrowser .folders button:focus {
+		background-color: rgba(255,255,255,.75) !important;
 	}
-       #jot-modal-content .fbrowser .folders li:hover,
-#jot-modal-content .fbrowser .folders li:focus {
+		.fbrowser .folders li:hover,
+		.fbrowser .folders li:focus {
        border-color: transparent !important;
        background-color: transparent !important;
 }
@@ -837,7 +813,7 @@ aside .vcard .p-addr {
     white-space: break-spaces !important;
 }
 aside .widget li.selected {
-    background-color: var(--menu-background-hover-color) !important;
+	background-color: var(--menu-background-hover-color) !important;
     border-color: transparent !important;
     border-radius: 8px;
 }
@@ -891,7 +867,7 @@ aside .widget li:hover {
               line-height: 40px;
        }
        .navicon {
-              font-size: 16px;
+              font-size: 20px;
               position: relative;
               top: 1px;
        }
@@ -915,9 +891,9 @@ aside .widget li:hover {
               font-family: ForkAwesome;
               color: #666;
         }        
-.img-allocated-max-width {
-       margin: 20px auto;
-}
+	.img-allocated-max-width {
+		   margin: 20px auto;
+	}
 	#vcard-short-photo-wrapper img, 
 	#nav-short-info .contact-wrapper img {
 		border-radius: 100%;
@@ -926,9 +902,7 @@ aside .widget li:hover {
 .fc-unthemed td.fc-today {
 	background-color: var(--menu-background-hover-color);
 }
-
 /* Photo Albums */
-
 .photo-album-actions .icon-padding,
 .photo-edit-link-wrap .icon-padding {
     margin-left: 10px !important;
@@ -987,7 +961,6 @@ aside .widget li:hover {
     margin-top: -10px;
     display: inline-block;
 }
-
 .justified-gallery {
     overflow: visible !important;
 }
@@ -1009,7 +982,7 @@ aside .widget li:hover {
 .justified-gallery > .jg-entry-visible > a > svg{
     width: 100% !important;
     height:  100% !important;
-    margin: 1px !important;
+    margin: 0 !important;
     top: 0 !important;
     left: 0 !important;
     object-fit:cover;
@@ -1026,51 +999,19 @@ aside .widget li:hover {
 	margin-right: 5px;
 	border-radius: 100%;
 	color: var(--link-color);	
-
-audio, progress, video {
-	display: block;
-	width: 100%;
-	aspect-ratio: 16/9;
-	margin: 0 auto;
-}
-
-iframe, img, video {
-	border-radius: 2px;
-}
-
-.custom-iframe {
-	width: 100% !important;
-	height: auto !important;
-	aspect-ratio: 625 / 350 !important;
-}
-
-@media (max-width: 768px) {
-	.custom-iframe {
-		width: 100% !important;
-		height: auto !important;
-		aspect-ratio: 425 / 350 !important;
-    }
 }
 	#photos-upload-perms button[data-toggle="modal"]:hover,
 	#photos-upload-perms button[data-toggle="modal"]:focus {
 		background-color: rgba(255,255,255,.1) !important;
 	}
 
-/* ADD-ONS */
-.advancedcontentfilter-content-wrapper table td:nth-of-type(2) {
-  word-wrap: anywhere;
-}
-.advancedcontentfilter-content-wrapper pre {
-	margin-top: 20px;
-}
-
 @media screen and (max-width: 1280px) {
     #search-box { 
         width: 18% !important;
     }
-   	#search-save {
-	 width: 140px !important;
-    }
+	#search-save {
+		width: 140px !important;
+	}
 }
 @media screen and (max-width: 991px){
     #search-box {
@@ -1092,7 +1033,7 @@ iframe, img, video {
     #search-mobile {
         top: 110px !important;
     }
-       .wall-item-container iframe {
+    .wall-item-container iframe {
     	aspect-ratio: 5/4;
     }
 }
@@ -1105,13 +1046,13 @@ iframe, img, video {
 		left: 10% !important;
 		margin-left: 0!important;
 	}
-	#search-save {
-		width: 100px !important;
-	}
-		#search-save .fa-plus::after {
-			content: 'Follow';
+		#search-save {
+			width: 100px !important;
 		}
-		#search-save .fa-floppy-o::after {
-			content: 'Save';
-		}
-}	
+			#search-save .fa-plus::after {
+				content: 'Follow';
+			}
+			#search-save .fa-floppy-o::after {
+				content: 'Save';
+			}
+}	
\ No newline at end of file
diff --git a/bookface_light.css b/bookface_light.css
index c38d449..e3706fa 100644
--- a/bookface_light.css
+++ b/bookface_light.css
@@ -2,13 +2,13 @@
 	Name	   : Bookface Light
 	Version    : 1.2
     Licence    : AGPL
-    Created on : 19.01.2025
+    Created on : 26.01.2025
     Author     : Kristi H. @kmh@friendica.world feb @feb@loma.ml
 */
 
 
 :root {
-    --global-font-family: 'Open Sans', Arial, sans-serif, Noto Color Emoji;
+    --global-font-family: "Open Sans", Arial, sans-serif, Noto Color Emoji;
     --nav-bg: $nav_bg;
     --link-color: $link_color;
     --nav-icon-color: $nav_icon_color;
@@ -18,7 +18,7 @@
     --font-color-darker: $font_color_darker;
     --background-image: $background_image;
     --menu-background-hover-color: $menu_background_hover_color;
-    --border-color: $border_color;
+    --border-color: #eeeeee;
 }
 
 	body {
@@ -45,15 +45,6 @@
 			background-color: rgba(128,128,128,.1) !important;
 			border-radius: 8px !important;
 		}
-		
-		#topbar-first #nav-notifications-menu li.notif-entry .media-object a img {
-			border-radius: 50%;
-		}
-		.notif-item img.notif-image {
-			border-radius: 50%;
-		}
-
-		
 		.fa-lg {
 			font-size: 24px !important;
 		}
@@ -126,14 +117,6 @@
 		height: 40px !important;
 		width: 40px !important;
 		}
-	    #navbar-brand-text {
-       		line-height: 40px;
-       		font-weight: 700;
-       		color: var(--link-color) !important;
-       }
-       #nav-login::before{
-       	content: 'Sign-In';
-       }
 	.topbar ul.nav {
 		left: 50% !important;
 		margin-left: -25% !important;
@@ -190,25 +173,8 @@
 	#nav-user-menu {
 		background-color: #ffffff !important;
 		min-width: 250px !important;
-		overflow-x: hidden;
 	}
-	
-	.btn {
-  		border-radius: 10px;
-	}
-	
-	.btn-group-xs > .btn, .btn-xs {
-	font-size: 17px;
-	}
-
-	.nav-pills .dropdown-menu li a, 
-	.nav-pills .dropdown-menu li .btn-link, 
-	.nav-tabs .dropdown-menu li a, 
-	.nav-tabs .dropdown-menu li .btn-link, 
-	.account .dropdown-menu li a, 
-	.account .dropdown-menu li .btn-link, 
-	.contact-photo-wrapper .dropdown-menu li a, 
-	.contact-photo-wrapper .dropdown-menu li .btn-link {
+	.nav-pills .dropdown-menu li a, .nav-pills .dropdown-menu li .btn-link, .nav-tabs .dropdown-menu li a, .nav-tabs .dropdown-menu li .btn-link, .account .dropdown-menu li a, .account .dropdown-menu li .btn-link, .contact-photo-wrapper .dropdown-menu li a, .contact-photo-wrapper .dropdown-menu li .btn-link {
 		color: #65686C !important;
 		border-color: white !important;
 	}
@@ -255,7 +221,7 @@
 			box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
 		}
 		#jotOpen::before {
-			content: '';
+			content: 'Compose';
 			font-size: 15px;
 			margin-right: 10px;
 			line-height: 32px;
@@ -315,15 +281,18 @@
     }
 	.panel-footer button[type="submit"],
 	.panel-footer input[type="submit"] {
-        float: right !important;
-        margin-left: 5px;
-    }
+		float: right !important;
+		margin-left: 5px;
+	}
 		.panel-footer::after{
 			content: '';
 			display: block;
 			clear: both;
 		}
-    #settings-server button[type="submit"] {
+		#addonslist{
+			margin-top: 20px;
+		}
+	#settings-server button[type="submit"] {
 	  float: right !important;
 	  margin-left: 5px !important;
 	  margin-bottom: 20px !important;
@@ -599,14 +568,13 @@
 				}
 		/* END OF ACTION BUTTON LABELS */	
 	/* Compose and Reply */
-		#jot-modal .modal-header .compose-link {
-		border-radius: 100% !important;
+	#jot-modal .modal-header .compose-link {
 		border-radius: 100% !important;
 		height: 36px;
 		width: 36px;
 		font-size: 27px !important;
 		padding: 0 6px !important;
-			background-color: rgba(0,0,0,.1);
+		background-color: rgba(0,0,0,.1);
 	}
 		#jot-modal .modal-header .compose-link:hover,
 		#jot-modal .modal-header .compose-link:focus {
@@ -628,10 +596,10 @@
 	}
 	#jot-modal-content,
 	.wall-item-comment-wrapper {
-			background-color: #fff !important;
-		   	border-radius: 15px !important;
+		background-color: #fff !important;
+		border-radius: 15px !important;
 		background-image: none;   
-		}
+	}
 		.wall-item-comment-wrapper {
 			border: none;
 		}
@@ -657,7 +625,7 @@
 	#jot-modal-content .friendica-tagsinput {
 		   background-color: #fff !important;
 	}
-	#jot-modal-content .fbrowser .folders button {
+	.fbrowser .folders button {
 	   background-color: rgba(0,0,0,.1) !important;
 	   color: black !important;
        appearance: none;
@@ -666,12 +634,12 @@
        width: 100%;
        margin-bottom: 5px;
 	}
-	#jot-modal-content .fbrowser .folders button:hover,
-	#jot-modal-content .fbrowser .folders button:focus {
+	.fbrowser .folders button:hover,
+	.fbrowser .folders button:focus {
 		background-color: rgba(0,0,0,.2) !important;
 	}
-		   #jot-modal-content .fbrowser .folders li:hover,
-	#jot-modal-content .fbrowser .folders li:focus {
+		   .fbrowser .folders li:hover,
+		   .fbrowser .folders li:focus {
 		   border-color: transparent !important;
 		   background-color: transparent !important;
 	}
@@ -688,7 +656,7 @@
 	.wall-item-comment-wrapper .dropzone.dz-clickable {
 		   background-color: var(--background-color) !important;
 	}
-	.jothidden.nav.nav-pills .btn-link {
+.jothidden.nav.nav-pills .btn-link {
 	font-size: 18px;
 }
 	.jothidden.nav.nav-pills .btn-link:hover,
@@ -731,7 +699,7 @@
 		   margin-top:20px !important;
 		   border-radius: none !important;
 		   background-color: transparent;
-		   	}
+	}
 		/* file browser */
 		#upload-photo {
 			background-color: var(--link-color) !important;
@@ -753,7 +721,7 @@
     */ 
     .fbswitcher [data-mode="attachment"] {
            display: none !important;
-    }		
+    }
 /* Profiles */
 	#profile-photo-wrapper {
 		overflow: visible !important;
@@ -831,7 +799,7 @@
 			line-height: 40px;
 		}
 		.navicon {
-			font-size: 16px;
+			font-size: 20px;
 			position: relative;
 			top: 1px;
 		}
@@ -858,9 +826,15 @@
 	.img-allocated-max-width {
 		margin: 20px auto;
 	}
-
+	#vcard-short-photo-wrapper img, 
+	#nav-short-info .contact-wrapper img {
+		border-radius: 100%;
+	}
+/* Calendar */
+.fc-unthemed td.fc-today {
+	background-color: var(--menu-background-hover-color);
+}
 /* Photo Albums */
-
 .photo-album-actions .icon-padding,
 .photo-edit-link-wrap .icon-padding {
     margin-left: 10px !important;
@@ -871,14 +845,6 @@
     opacity: 1 !important;
     border-radius: 8px;
     padding: 0px 8px;
-}
-	#vcard-short-photo-wrapper img, 
-	#nav-short-info .contact-wrapper img {
-		border-radius: 100%;
-	}
-/* Calendar */
-.fc-unthemed td.fc-today {
-	background-color: var(--menu-background-hover-color);
 }
 #photo-album-link {
     opacity: 1 !important;
@@ -948,13 +914,13 @@
 .justified-gallery > .jg-entry-visible > a > svg{
     width: 100% !important;
     height:  100% !important;
-    margin: 1px !important;
+    margin: 0 !important;
     top: 0 !important;
     left: 0 !important;
     object-fit:cover;
     object-position: center;
 }
- #photo-photo {
+#photo-photo {
     margin: 0 auto !important;
 }	
 #photos-upload-perms button[data-toggle="modal"] {
@@ -969,82 +935,50 @@
 	#photos-upload-perms button[data-toggle="modal"]:hover,
 	#photos-upload-perms button[data-toggle="modal"]:focus {
 		background-color: rgba(0,0,0,.2) !important;
-		}
-
-/* ADD-ONS */
-.advancedcontentfilter-content-wrapper table td:nth-of-type(2) {
-  word-wrap: anywhere;
-}
-.advancedcontentfilter-content-wrapper pre {
-	margin-top: 20px;
-}	
-
-audio, progress, video {
-	display: block;
-	width: 100%;
-	aspect-ratio: 16/9;
-	margin: 0 auto;
-}
+	}		
 	
-	iframe, img, video {
-	border-radius: 2px;
-	}
-
-	.custom-iframe {
-	width: 100% !important;
-	height: auto !important;
-	aspect-ratio: 625 / 350 !important;
-	}
-
-@media (max-width: 768px) {
-	.custom-iframe {
-		width: 100% !important;
-		height: auto !important;
-		aspect-ratio: 425 / 350 !important;
-    }
-}
 		
-@media screen and (max-width: 1280px) {
-    #search-box { 
-        width: 18% !important;
-    }
+	@media screen and (max-width: 1280px) {
+		#search-box { 
+		    width: 18% !important;
+		}
 		#search-save {
 			width: 140px !important;
 		}
-}
-@media screen and (max-width: 991px){
-    #search-box {
-        left: 15%;
-    }
-    #jotOpen::before {
-        content: '';
-        margin: 0;
-    }
-    #mention-link span:last-of-type {
-        margin-right: 42px;
-    }
-}
-@media screen and (max-width: 768px){
-	    #topbar-first .navbar-toggle[data-target="#search-mobile"]{
-	        position: fixed !important;
-	        left: 15%;
-    }
-	    #search-mobile {
-	        top: 110px !important;
-    }
-    		.wall-item-container iframe{
+	}
+	@media screen and (max-width: 991px){
+		#search-box {
+			left: 15%;
+		}
+		#jotOpen::before {
+			content: '';
+			margin: 0;
+		}
+		#mention-link span:last-of-type {
+		  margin-right: 42px;
+		}
+	}
+	@media screen and (max-width: 768px){
+		#topbar-first .navbar-toggle[data-target="#search-mobile"]{
+			position: fixed !important;
+			left: 15%;
+		}
+		#search-mobile {
+			top: 110px !important;
+		}
+		.wall-item-container iframe{
 			aspect-ratio: 5/4;
 		}
-}
-@media screen and (max-width: 480px){
-	#topbar-first .navbar-toggle[data-target="#search-mobile"]{
-		left: 10%;
-	}
-	.topbar ul.nav {
-		position: relative !important;
-		left: 10% !important;
-		margin-left: 0!important;
 	}
+	@media screen and (max-width: 480px){
+		#topbar-first .navbar-toggle[data-target="#search-mobile"]{
+			left: 10%;
+		}
+		.topbar ul.nav {
+			position: relative !important;
+			left: 10% !important;
+			margin-left: 0!important;
+		}
 		#search-save {
 			width: 100px !important;
 		}
@@ -1054,4 +988,4 @@ audio, progress, video {
 			#search-save .fa-floppy-o::after {
 				content: 'Save';
 			}
-}	
+	}		
\ No newline at end of file