diff --git a/bookface_light.css b/bookface_light.css index 748a948..f9c6f56 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 { @@ -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, - #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; } @@ -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"] { - display: none !important; - } + /* HIDE ATTACHMENT BUTTON + ======================= + 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"]{