All updates for v1.2

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 {
@@ -239,7 +239,8 @@
 		}
 	/* Make Submit Buttons Pretty */
 	.settings-submit,
-	button[type="submit"]{
+	button[type="submit"],
+	#photos-upload-submit {
 		background-color: var(--link-color) !important;
 		color: white !important;
 		border-radius: 8px !important;
@@ -252,7 +253,9 @@
 	.settings-submit:hover,
 	.settings-submit:focus,
 	button[type="submit"]:hover,
-	button[type="submit"]:focus{
+	button[type="submit"]:focus,
+	#photos-upload-submit:hover,
+	#photos-upload-submit:focus{
 		box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
 	}
 	 #delegate-parent .submit button {
@@ -279,7 +282,7 @@
 			display: block;
 			clear: both;
 		}
-    #settings-server button[type="submit"] {
+	#settings-server button[type="submit"] {
 	  float: right !important;
 	  margin-left: 5px !important;
 	  margin-bottom: 20px !important;
@@ -381,6 +384,16 @@
 	.wall-item-container .media {
 		background-color: #ffffff !important;
 		border-radius: 10px !important;
+	}
+	.wall-item-container iframe {
+		width: 100% !important;
+		height: auto !important;
+		display: block;
+		margin: 0 auto;
+		aspect-ratio: 16/9;
+		border: 1px solid #ccc;
+		border-radius: 8px;
+		background-color: #000;
 	}
 		.contact-photo,
 		.contact-photo-xs {
@@ -407,7 +420,7 @@
 				padding-left: 10px !important;
 				padding-right: 10px !important;
 			}
-		/* keep mentions and tags from spilling out */
+       /* keep mentions and tags from spilling out */
        #profile-page .label,
        #profile-page .label a,
        .wall-item-bottom .label, 
@@ -508,9 +521,31 @@
 		[id^="attendmaybe"]::after{
 			content: 'Maybe';
 		}
+		/* prevent "Like Like" and "Dislike Dislike" on photos */
+		#photo-view-wrapper .wall-item-actions .button-likes {
+			font-color: transparent !important;
+			font-size: 0px !important;
+		}
+			#photo-view-wrapper .wall-item-actions .button-likes::after {
+				font-size: 18px !important;
+				color: var(--nav-icon-color) !important;
+			}
+			#photo-view-wrapper .wall-item-actions .button-likes .fa-thumbs-up,
+			#photo-view-wrapper .wall-item-actions .button-likes .fa-thumbs-down {
+				font-size: 24px !important;
+				color: var(--nav-icon-color) !important;
+			}
+				#photo-view-wrapper .wall-item-actions .button-likes:hover::after,
+				#photo-view-wrapper .wall-item-actions .button-likes:focus::after,
+				#photo-view-wrapper .wall-item-actions .button-likes:hover .fa-thumbs-up,
+				#photo-view-wrapper .wall-item-actions .button-likes:focus .fa-thumbs-up,
+				#photo-view-wrapper .wall-item-actions .button-likes:hover .fa-thumbs-down,
+				#photo-view-wrapper .wall-item-actions .button-likes:focus .fa-thumbs-down {
+					color: var(--link-color) !important;
+				}
 		/* 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;
@@ -539,13 +574,35 @@
 	#jot-modal-content,
 	.wall-item-comment-wrapper {
 		background-color: #fff !important;
-		   border-radius: 15px !important;
+		border-radius: 15px !important;
+		background-image: none;   
 	}
+		.wall-item-comment-wrapper {
+			border: none;
+		}
+		.photo-comment-wrapper .btn-sm,
+		#profile-jot-wrapper .btn-sm,
+		.wall-item-comment-wrapper .btn-sm {
+			background-color: transparent;
+			color: var(--nav-icon-color);
+			height: 45px;
+			width:  45px;
+			font-size: 18px;
+		}
+			.photo-comment-wrapper .btn-sm:hover,
+			.photo-comment-wrapper .btn-sm:focus,
+			#profile-jot-wrapper .btn-sm:hover,
+			#profile-job-wrapper .btn-sm:focus,
+			.wall-item-comment-wrapper .btn-sm:hover,
+			.wall-item-comment-wrapper .btn-sm:focus {
+				background-color: transparent;
+				color: var(--link-color);
+			} 
 	#jot-modal-content input,
 	#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;
@@ -554,12 +611,12 @@
        width: 100%;
        margin-bottom: 5px;
 	}
-	#jot-modal-content .fbrowser .folders button:hover,
+	.fbrowser .folders button:hover,
-	#jot-modal-content .fbrowser .folders button:focus {
+	.fbrowser .folders button:focus {
 		background-color: rgba(0,0,0,.2) !important;
 	}
-		   #jot-modal-content .fbrowser .folders li:hover,
+		   .fbrowser .folders li:hover,
-	#jot-modal-content .fbrowser .folders li:focus {
+		   .fbrowser .folders li:focus {
 		   border-color: transparent !important;
 		   background-color: transparent !important;
 	}
@@ -576,6 +633,13 @@
 	.wall-item-comment-wrapper .dropzone.dz-clickable {
 		   background-color: var(--background-color) !important;
 	}
+.jothidden.nav.nav-pills .btn-link {
+	font-size: 18px;
+}
+	.jothidden.nav.nav-pills .btn-link:hover,
+	.jothidden.nav.nav-pills .btn-link:focus {
+		color: var(--link-color) !important;
+	}
 	.jot-nav {
 		   border: none !important;
 	}
@@ -608,9 +672,10 @@
 		   background-color: rgba(0,0,0,.2) !important;
 	}
 	#profile-jot-wrapper .wall-item-container.panel-body.preview {
-		   border: 1px solid #666 !important;
+		   border: none!important;
 		   margin-top:20px !important;
-		   border-radius: 8px !important;
+		   border-radius: none !important;
+		   background-color: transparent;
 	}
 		/* file browser */
 		#upload-photo {
@@ -622,9 +687,18 @@
 		#upload-photo:focus {
 			background-color: darkblue !important;
 		}
-		.fbswitcher [data-mode="attachment"] {
+    /* 	HIDE ATTACHMENT BUTTON
-			display: none !important;
+    	=======================
-		}	
+    	This hides the file attachment button in the Compose "Browser" tab
+    	because there is no way to manage/delete uploaded attachments it
+    	was a design choice of this theme mod to hide this button from users.
+    	
+    	If you WANT users to be able to see uploaded files and attach them
+    	to posts either comment out this rule or change "none" to "block"
+    */ 
+    .fbswitcher [data-mode="attachment"] {
+           display: none !important;
+    }
 /* Profiles */
 	#profile-photo-wrapper {
 		overflow: visible !important;
@@ -651,7 +725,7 @@
 		white-space: break-spaces !important;
 	}
 	aside .widget li.selected {
-		background-color:rgba(128,128,128,.1) !important;
+		background-color: var(--menu-background-hover-color) !important;
 		border-color: transparent !important;
 		border-radius: 8px;
 	}
@@ -729,7 +803,14 @@
 	.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 {
@@ -819,7 +900,19 @@
 #photo-photo {
     margin: 0 auto !important;
 }	
-		
+#photos-upload-perms button[data-toggle="modal"] {
+	background-color: rgba(0,0,0,.1) !important;
+	padding: 0 !important;
+	height: 36px;
+	width:  36px;
+	margin-right: 5px;
+	border-radius: 100%;
+	color: var(--link-color);	
+}
+	#photos-upload-perms button[data-toggle="modal"]:hover,
+	#photos-upload-perms button[data-toggle="modal"]:focus {
+		background-color: rgba(0,0,0,.2) !important;
+	}		
 	
 		
 	@media screen and (max-width: 1280px) {
@@ -850,6 +943,9 @@
 		#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"]{