From 6a2df624291d9df93f05213c9fb912bae1e8aea6 Mon Sep 17 00:00:00 2001 From: oldkid Date: Thu, 20 Feb 2025 07:44:03 +0100 Subject: [PATCH] * Hide horizontal rules for a cleaner look * Minor style fixes for .panel-body and .help-block * Removed box-shadow from .wall-item-comment-wrapper * Added `$contentbg_transp` back as "Frio" default stylesheet slipstream needs it. * Fixed Settings > Channels panel padding and Submit button alignment * Redesigned Calculator Add-On [Issue #8] * Fixed Compose text formatting rollover effect [Issue #9] --- bookface_auto.css | 638 ++++++++++++++++++++++++++++----------------- bookface_auto.php | 1 + bookface_dark.css | 283 ++++++++++++-------- bookface_dark.php | 1 + bookface_light.css | 277 +++++++++++++------- bookface_light.php | 2 +- 6 files changed, 753 insertions(+), 449 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 01923a1..fe24bf2 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -37,7 +37,7 @@ --attendmaybe-button-text: 'Maybe'; --add-photo-button-text: 'Add Photos'; --follow-button-text: 'Follow'; - --save-button-text: 'Save'; + --save-button-text: 'Save'; } body { @@ -46,9 +46,9 @@ padding-top: 130px !important; font-family: var(--global-font-family); } - #topbar-first .nav > li > a, - #topbar-first .nav > li > button, - nav.navbar .nav > li > a, + #topbar-first .nav > li > a, + #topbar-first .nav > li > button, + nav.navbar .nav > li > a, nav.navbar .nav > li > button{ color: var(--nav-icon-color) !important; } @@ -67,15 +67,15 @@ .fa-lg { font-size: 24px !important; } - #topbar-first .nav > li > a:hover, - #topbar-first .nav > li > a:focus, - #topbar-first .nav > li > button:not(#main-menu):hover, + #topbar-first .nav > li > a:hover, + #topbar-first .nav > li > a:focus, + #topbar-first .nav > li > button:not(#main-menu):hover, #topbar-first .nav > li > button:not(#main-menu):focus, #topbar-first button.navbar-toggle:hover, - #topbar-first button.navbar-toggle:focus, - nav.navbar .nav > li > a:hover, - nav.navbar .nav > li > a:focus, - nav.navbar .nav > li > button:hover, + #topbar-first button.navbar-toggle:focus, + nav.navbar .nav > li > a:hover, + nav.navbar .nav > li > a:focus, + nav.navbar .nav > li > button:hover, nav.navbar .nav > li > button:focus { background-color: rgba(128,128,128,.1) !important; border-radius: 8px !important; @@ -85,7 +85,7 @@ #nav-notifications-menu-btn { width: 50px; height: 50px; - } + } #topbar-first .nav > li > a.selected, #nav-notification.dropdown.open { border-bottom: 3px solid var(--link-color) !important; @@ -101,8 +101,8 @@ border-radius: 0 !important; } #nav-notification.dropdown.open #nav-notifications-menu-btn .fa-bell::before { - content: '\f0f3'; - color: var(--link-color); + content: '\f0f3'; + color: var(--link-color); } ul.tabs li { font-size: 15px !important; @@ -166,7 +166,7 @@ } .table-striped > tbody > tr:nth-of-type(2n+1){ /* not necessary for light mode */ - } + } header #banner { left: 0 !important; right: auto !important; @@ -269,32 +269,32 @@ min-width: 250px !important; overflow-x: hidden; } - .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, + .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: var(--nav-icon-color) !important; border-color: var(--nav-bg) !important; } - .nav-pills .dropdown-menu li > a:hover, - .nav-tabs .dropdown-menu li > a:hover, - .account .dropdown-menu li > a:hover, - .contact-photo-wrapper .dropdown-menu li > a:hover, - .nav-pills .dropdown-menu li.selected a, - .nav-tabs .dropdown-menu li.selected a, - .account .dropdown-menu li.selected a, + .nav-pills .dropdown-menu li > a:hover, + .nav-tabs .dropdown-menu li > a:hover, + .account .dropdown-menu li > a:hover, + .contact-photo-wrapper .dropdown-menu li > a:hover, + .nav-pills .dropdown-menu li.selected a, + .nav-tabs .dropdown-menu li.selected a, + .account .dropdown-menu li.selected a, .contact-photo-wrapper .dropdown-menu li.selected a { color: #333 !important; background: #f2f2f2 !important; border-radius: 8px; - } - .nav-pills .dropdown-menu li.divider, + } + .nav-pills .dropdown-menu li.divider, .nav-tabs .dropdown-menu li.divider, - .account .dropdown-menu li.divider, + .account .dropdown-menu li.divider, .contact-photo-wrapper .dropdown-menu li.divider { background-color: var(--nav-bg) !important; } @@ -304,8 +304,8 @@ #content .nav > li > .btn-link:hover, #content .nav > li > .btn-link:focus { background-color: var(--link-color); - color: white; -} + color: white !important; +} #topbar-first #nav-notifications-menu { border: 1px solid var(--background-color) !important; } @@ -320,7 +320,7 @@ background-color: rgba(0,0,0,.1) !important; } #topbar-first #nav-notifications-menu li.notif-entry:hover{ - background-color:rgba(128,128,128,.2) !important; + background-color:rgba(128,128,128,.2) !important; border-color: transparent !important; } .topbar .dropdown-header { @@ -338,7 +338,7 @@ .topbar .dropdown-header .dropdown-header-link .btn-link:hover, .topbar .dropdown-header .dropdown-header-link .btn-link:focus { background-color: rgba(0,0,0,.1); - } + } #topbar-second { top: 55px; height: 60px !important; @@ -397,25 +397,25 @@ margin-top: 10px; } /* General Content Wrappers */ - section > .generic-page-wrapper, - .videos-content-wrapper, - .suggest-content-wrapper, - .help-content-wrapper, - .match-content-wrapper, - .dirfind-content-wrapper, - .delegation-content-wrapper, - .notes-content-wrapper, - .message-content-wrapper, - .apps-content-wrapper, #adminpage, - .delegate-content-wrapper, - .uexport-content-wrapper, - .dfrn_request-content-wrapper, - .friendica-content-wrapper, - .credits-content-wrapper, - .nocircle-content-wrapper, - .profperm-content-wrapper, - .invite-content-wrapper, - .tos-content-wrapper, + section > .generic-page-wrapper, + .videos-content-wrapper, + .suggest-content-wrapper, + .help-content-wrapper, + .match-content-wrapper, + .dirfind-content-wrapper, + .delegation-content-wrapper, + .notes-content-wrapper, + .message-content-wrapper, + .apps-content-wrapper, #adminpage, + .delegate-content-wrapper, + .uexport-content-wrapper, + .dfrn_request-content-wrapper, + .friendica-content-wrapper, + .credits-content-wrapper, + .nocircle-content-wrapper, + .profperm-content-wrapper, + .invite-content-wrapper, + .tos-content-wrapper, .fsuggest-content-wrapper, .shared-wrapper { background-color: var(--nav-bg) !important; @@ -484,6 +484,12 @@ margin-left: 5px !important; margin-bottom: 20px !important; } + #settings-channels .panel { + padding: 0 10px 10px 10px; + } + #settings-channels button { + float: right; + } #adminpage button[type="sbumit"], input[type="submit"], input[name="page_logs"], @@ -491,7 +497,7 @@ input[name="page_tos"]{ float: right; padding: 8px; - border: none; + border: none; } .submit::after{ content: ''; @@ -590,7 +596,7 @@ /* popovers */ .popover.hovercard { border: 1px solid var(--nav-bg) !important; - /* + /* dark version needs box shadow as outer glow */ } @@ -658,7 +664,7 @@ here light mode does not need to the .media-list > li elements */ -/* +/* Dark mode has some extra styling here for the .hovercard element */ @@ -684,10 +690,13 @@ padding-left: 10px !important; padding-right: 10px !important; } + .media hr, aside hr, section hr { + border-color: var(--nav-bg); + } /* keep mentions and tags from spilling out */ #profile-page .label, #profile-page .label a, - .wall-item-bottom .label, + .wall-item-bottom .label, .wall-item-bottom .label a { display: inline-block !important; } @@ -810,7 +819,7 @@ #photo-view-wrapper .wall-item-actions .button-likes:focus .fa-thumbs-down { color: var(--link-color) !important; } - /* END OF ACTION BUTTON LABELS */ + /* END OF ACTION BUTTON LABELS */ /* Compose and Reply */ #jot-modal .modal-header .compose-link { border-radius: 100% !important; @@ -843,10 +852,11 @@ .wall-item-comment-wrapper { background-color: #fff !important; border-radius: 15px !important; - background-image: none; + background-image: none; } .wall-item-comment-wrapper { border: none; + box-shadow: none; } .photo-comment-wrapper .btn-sm, #profile-jot-wrapper .btn-sm, @@ -865,7 +875,7 @@ .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; @@ -893,7 +903,7 @@ } .fbrowser-content-container.justified-gallery { max-height: 100% !important; - } + } #jot-title, #jot-category { background-color: #fff !important; @@ -961,7 +971,15 @@ #upload-photo:focus { background-color: darkblue !important; } - /* HIDE ATTACHMENT BUTTON */ + .panel-body { + background-color: var(--nav-bg); + border-radius: 10px; + border-top: none !important; + } + .help-block { + color: var(--font-color-darker); + } + /* HIDE ATTACHMENT BUTTON */ .fbswitcher [data-mode="attachment"] { display: var(--attach-file-button) !important; } @@ -979,7 +997,7 @@ border-radius: 100% !important; box-shadow: 0 0 1px rgba(0,0,0,.3); border: 3px solid white; - } + } aside .widget h3.p-name { font-size: 32px !important; text-align: center; @@ -1044,7 +1062,7 @@ /* frio background-color */ /* frio -webkit-box-shadow */ /* frio box-shadow */ - } + } .wall-item-actions button { font-size: 24px !important; color: var(--nav-icon-color) !important; @@ -1077,7 +1095,7 @@ margin: 0 !important; } /* little vcard when you scroll down on profiles */ - #vcard-short-photo-wrapper img, + #vcard-short-photo-wrapper img, #nav-short-info .contact-wrapper img { border-radius: 100% !important; } @@ -1134,11 +1152,11 @@ content: '\f101'; font-family: ForkAwesome; color: #666; - } + } .img-allocated-max-width { margin: 20px auto; } - #vcard-short-photo-wrapper img, + #vcard-short-photo-wrapper img, #nav-short-info .contact-wrapper img { border-radius: 100%; } @@ -1230,8 +1248,8 @@ } .photos-content-wrapper .photos-upload-link::before { content: var(--add-photo-button-text); - font-size: 15px; - vertical-align: middle; + font-size: 15px; + vertical-align: middle; margin-top: -10px; display: inline-block; } @@ -1243,8 +1261,8 @@ flex-wrap: wrap; justify-content: start; } -.justified-gallery > a, -.justified-gallery > div, +.justified-gallery > a, +.justified-gallery > div, .justified-gallery > figure{ height: 180px !important; width: 180px !important; @@ -1270,7 +1288,7 @@ #photo-photo { margin: 0 auto !important; max-width: 100%; -} +} #photos-upload-perms button[data-toggle="modal"] { background-color: rgba(0,0,0,.1) !important; padding: 0 !important; @@ -1278,12 +1296,12 @@ width: 36px; margin-right: 5px; border-radius: 100%; - color: var(--link-color); + 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; - } + } /* ADD-ONS */ .advancedcontentfilter-content-wrapper table td:nth-of-type(2) { word-wrap: anywhere; @@ -1291,6 +1309,65 @@ .advancedcontentfilter-content-wrapper pre { margin-top: 20px; } +/* calculator addon */ +.calc-content-wrapper table { + margin: 0 auto; + color: #333; +} +.calc-content-wrapper td[colspan='5']::after { + content: ' '; + height: 50px; + width: 260px; + background-color: black; + display: block; +} + .calc-content-wrapper input[type='button']{ + appearance: none; + height: 50px; + width: 100%; + border: 1px solid #666; + color: white; + font-size: 18px; + font-weight: bold; + background-color: #999; + text-align: center; + } +.calc-content-wrapper input[name='plus'], +.calc-content-wrapper input[name='minus'], +.calc-content-wrapper input[name='multiplication'], +.calc-content-wrapper input[name='division'], +.calc-content-wrapper input[name='enter']{ + background-color: orange; +} +.calc-content-wrapper input[name='plus']{ + padding-left: 10px; +} +.calc-content-wrapper input[name='multiplication']{ + padding-left: 14px; +} +.calc-content-wrapper input[name='clear'], +.calc-content-wrapper input[name='sqareroot'], +.calc-content-wrapper input[name='squarex'], +.calc-content-wrapper input[name='deg-rad'], +.calc-content-wrapper input[name='rad-deg'], +.calc-content-wrapper input[name='sine'], +.calc-content-wrapper input[name='arcsine'], +.calc-content-wrapper input[name='cosine'], +.calc-content-wrapper input[name='arccosine']{ + background-color: #666; +} +.calc-content-wrapper #display { + appearance: none !important; + font-size: 36px; + font-weight: lighter; + text-align: right; + color: #eee; + background-color: #666; + border: none; + display: block; + width: 260px; + position: absolute; +} /* MISCELLANEOUS STUFF */ div#back-to-top { bottom: 65px; @@ -1303,7 +1380,7 @@ div#back-to-top { text-align: center; font-size: 24px; border-radius: 100%; -} +} #item-delete-selected { height: 50px; width: 50px; @@ -1340,12 +1417,12 @@ a.tag.label, padding: 6px 12px !important; -webkit-text-decoration: none !important; text-decoration: none !important; - margin: 2px !important; + margin: 2px !important; background-image: none !important; background-color: transparent !important; box-shadow: none !important; color: #0066FF !important; - border: 1px solid #0066FF; + border: 1px solid #0066FF; text-shadow: none !important; } .wall-item-bottom .label { @@ -1436,7 +1513,7 @@ a.tag.label, content: '\f00d'; font-family: ForkAwesome; font-size: 12px; - text-decoration: line-through; + text-decoration: line-through; } .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):hover, .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):focus { @@ -1562,9 +1639,9 @@ a.tag.label, /* Small Laptop Screens Some tablets in Landscape Orientation ===================================== -*/ +*/ @media screen and (max-width: 1280px) { - #search-box { + #search-box { width: 18% !important; } #search-save { @@ -1645,7 +1722,7 @@ a.tag.label, /* Cover Photo Mobile */ .row:has(.coverphoto) aside { margin-top: 0px; - } + } aside:has(.coverphoto){ left: -300px !important; right: auto !important; @@ -1884,7 +1961,7 @@ a.tag.label, #item-delete-selected { top: 60px; right: 10px; - } + } /* move top bars around */ #topbar-second { top: 0px; @@ -1972,7 +2049,7 @@ a.tag.label, width: 100% !important; overflow: auto !important; overflow-x: hidden !important; - } + } #topbar-second .dropdown-menu li { height: auto !important; } @@ -2010,7 +2087,7 @@ a.tag.label, #message-new:hover, #message-new:focus { box-shadow: 0 0 100px rgba(0,0,0,.2); - } + } } /* Narrow Screen Phones in Portrait Orientation ============================================ @@ -2029,7 +2106,7 @@ a.tag.label, /* Narrow Screen Phones in Landscape Orientation ============================================== */ -@media screen and (max-height: 400px) and (orientation: landscape) { +@media screen and (max-height: 400px) and (orientation: landscape) { #topbar-first { transition-duration: .5s; transition-property: bottom; @@ -2064,7 +2141,7 @@ a.tag.label, height: 50px; width: 50px; border-radius: 100% !important; - line-height: 32px; + line-height: 32px; } #topbar-first .navbar-toggle[data-target="#search-mobile"]:hover, #topbar-first .navbar-toggle[data-target="#search-mobile"]:focus { @@ -2104,21 +2181,21 @@ a.tag.label, transition-property: top; top: -60px; } - #topbar-first .nav > li > a:hover, - #topbar-first .nav > li > a:focus, - #topbar-first .nav > li > button:not(#main-menu):hover, - #topbar-first .nav > li > button:not(#main-menu):focus, - #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):hover, - #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):focus, - nav.navbar .nav > li > a:hover, - nav.navbar .nav > li > a:focus, - nav.navbar .nav > li > button:hover, + #topbar-first .nav > li > a:hover, + #topbar-first .nav > li > a:focus, + #topbar-first .nav > li > button:not(#main-menu):hover, + #topbar-first .nav > li > button:not(#main-menu):focus, + #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):hover, + #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):focus, + nav.navbar .nav > li > a:hover, + nav.navbar .nav > li > a:focus, + nav.navbar .nav > li > button:hover, nav.navbar .nav > li > button:focus { background-color: var(--link-color) !important; border-radius: 100% !important; box-shadow: inset 0 0 100px rgba(0,0,0,.2); } - #topbar-first button.navbar-toggle.offcanvas-right-toggle:hover, + #topbar-first button.navbar-toggle.offcanvas-right-toggle:hover, #topbar-first button.navbar-toggle.offcanvas-right-toggle:focus { border-radius: 100% !important; } @@ -2139,7 +2216,7 @@ a.tag.label, } #offcanvasUsermenu li:first-of-type { font-weight: 700; - } + } .offcanvas-right-overlay { top: 0px; } @@ -2148,7 +2225,7 @@ a.tag.label, } .coverphoto { top: 0px; - } + } } /* ===================================================================== @@ -2180,31 +2257,31 @@ body { color: var(--font-color); } /* headers pretty much everywhere */ -section > .generic-page-wrapper, -.videos-content-wrapper, -.suggest-content-wrapper, -.help-content-wrapper, -.match-content-wrapper, -.dirfind-content-wrapper, -.delegation-content-wrapper, -.notes-content-wrapper, -.message-content-wrapper, -.apps-content-wrapper, #adminpage, -.delegate-content-wrapper, -.uexport-content-wrapper, -.dfrn_request-content-wrapper, -.friendica-content-wrapper, -.credits-content-wrapper, -.nocircle-content-wrapper, -.profperm-content-wrapper, -.invite-content-wrapper, -.tos-content-wrapper, +section > .generic-page-wrapper, +.videos-content-wrapper, +.suggest-content-wrapper, +.help-content-wrapper, +.match-content-wrapper, +.dirfind-content-wrapper, +.delegation-content-wrapper, +.notes-content-wrapper, +.message-content-wrapper, +.apps-content-wrapper, #adminpage, +.delegate-content-wrapper, +.uexport-content-wrapper, +.dfrn_request-content-wrapper, +.friendica-content-wrapper, +.credits-content-wrapper, +.nocircle-content-wrapper, +.profperm-content-wrapper, +.invite-content-wrapper, +.tos-content-wrapper, .fsuggest-content-wrapper { color: var(--nav-icon-color); } -#topbar-first .nav > li > a, -#topbar-first .nav > li > button, -nav.navbar .nav > li > a, +#topbar-first .nav > li > a, +#topbar-first .nav > li > button, +nav.navbar .nav > li > a, nav.navbar .nav > li > button{ color: var(--nav-icon-color) !important; } @@ -2223,25 +2300,25 @@ nav.navbar .nav > li > button{ .fa-lg { font-size: 24px !important; } -#topbar-first .nav > li > a:hover, -#topbar-first .nav > li > a:focus, -#topbar-first .nav > li > button:not(#main-menu):hover, -#topbar-first .nav > li > button:not(#main-menu):focus, +#topbar-first .nav > li > a:hover, +#topbar-first .nav > li > a:focus, +#topbar-first .nav > li > button:not(#main-menu):hover, +#topbar-first .nav > li > button:not(#main-menu):focus, #topbar-first button.navbar-toggle:hover, -#topbar-first button.navbar-toggle:focus, -nav.navbar .nav > li > a:hover, -nav.navbar .nav > li > a:focus, -nav.navbar .nav > li > button:hover, +#topbar-first button.navbar-toggle:focus, +nav.navbar .nav > li > a:hover, +nav.navbar .nav > li > a:focus, +nav.navbar .nav > li > button:hover, nav.navbar .nav > li > button:focus { background-color: rgba(255,255,255,.1) !important; border-radius: 8px !important; -} +} #topbar-first button.navbar-toggle, #nav-notifications-menu-btn { width: 50px; height: 50px; - } + } #topbar-first .nav > li > a.selected, #nav-notification.dropdown.open { border-bottom: 3px solid var(--link-color) !important; @@ -2258,7 +2335,7 @@ nav.navbar .nav > li > button:focus { } #nav-notification.dropdown.open #nav-notifications-menu-btn .fa-bell::before { content: '\f0f3'; - color: var(--link-color); + color: var(--link-color); } ul.tabs li { font-size: 15px !important; @@ -2295,7 +2372,7 @@ ul.tabs li { background-image: none !important; border-radius: 8px ; } - .dropdown-menu li a, + .dropdown-menu li a, .dropdown-menu li .btn-link { color: var(--font-color); } @@ -2429,43 +2506,43 @@ header #banner { min-width: 250px !important; overflow-x: hidden; } -.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, +.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: var(--nav-icon-color) !important; border-color: var(--nav-bg) !important; } - .nav-pills .dropdown-menu li > a:hover, - .nav-tabs .dropdown-menu li > a:hover, - .account .dropdown-menu li > a:hover, - .contact-photo-wrapper .dropdown-menu li > a:hover, - .nav-pills .dropdown-menu li.selected a, - .nav-tabs .dropdown-menu li.selected a, - .account .dropdown-menu li.selected a, + .nav-pills .dropdown-menu li > a:hover, + .nav-tabs .dropdown-menu li > a:hover, + .account .dropdown-menu li > a:hover, + .contact-photo-wrapper .dropdown-menu li > a:hover, + .nav-pills .dropdown-menu li.selected a, + .nav-tabs .dropdown-menu li.selected a, + .account .dropdown-menu li.selected a, .contact-photo-wrapper .dropdown-menu li.selected a { color: #333 !important; background: #f2f2f2 !important; border-radius: 8px; - } -.nav-pills .dropdown-menu li.divider, -.nav-tabs .dropdown-menu li.divider, -.account .dropdown-menu li.divider, + } +.nav-pills .dropdown-menu li.divider, +.nav-tabs .dropdown-menu li.divider, +.account .dropdown-menu li.divider, .contact-photo-wrapper .dropdown-menu li.divider { background-color: var(--nav-bg) !important; -} +} #content .nav > li > .btn-link { margin: 5px; } #content .nav > li > .btn-link:hover, #content .nav > li > .btn-link:focus { background-color: var(--link-color); - color: white; -} + color: white !important; +} #topbar-first #nav-notifications-menu { border: 1px solid var(--background-color) !important; } @@ -2483,10 +2560,10 @@ header #banner { background-color: rgba(255,255,255,.2) !important } #topbar-first #nav-notifications-menu li.notif-entry:hover{ - background-color:rgba(128,128,128,.2) !important; + background-color:rgba(128,128,128,.2) !important; border-color: transparent !important; } -#topbar-first .nav > .open > a, +#topbar-first .nav > .open > a, #topbar-first .nav > .open > button { background-color: transparent; } @@ -2564,25 +2641,25 @@ header #banner { margin-top: 10px; } /* General Content Wrappers */ - section > .generic-page-wrapper, - .videos-content-wrapper, - .suggest-content-wrapper, - .help-content-wrapper, - .match-content-wrapper, - .dirfind-content-wrapper, - .delegation-content-wrapper, - .notes-content-wrapper, - .message-content-wrapper, - .apps-content-wrapper, #adminpage, - .delegate-content-wrapper, - .uexport-content-wrapper, - .dfrn_request-content-wrapper, - .friendica-content-wrapper, - .credits-content-wrapper, - .nocircle-content-wrapper, - .profperm-content-wrapper, - .invite-content-wrapper, - .tos-content-wrapper, + section > .generic-page-wrapper, + .videos-content-wrapper, + .suggest-content-wrapper, + .help-content-wrapper, + .match-content-wrapper, + .dirfind-content-wrapper, + .delegation-content-wrapper, + .notes-content-wrapper, + .message-content-wrapper, + .apps-content-wrapper, #adminpage, + .delegate-content-wrapper, + .uexport-content-wrapper, + .dfrn_request-content-wrapper, + .friendica-content-wrapper, + .credits-content-wrapper, + .nocircle-content-wrapper, + .profperm-content-wrapper, + .invite-content-wrapper, + .tos-content-wrapper, .fsuggest-content-wrapper, .shared-wrapper { background-color: var(--nav-bg) !important; @@ -2651,6 +2728,12 @@ header #banner { margin-left: 5px !important; margin-bottom: 20px !important; } + #settings-channels .panel { + padding: 0 10px 10px 10px; + } + #settings-channels button { + float: right; + } #adminpage button[type="submit"], input[type="submit"], input[name="page_logs"], @@ -2658,7 +2741,7 @@ header #banner { input[name="page_tos"]{ float: right; padding: 8px; - border: none; + border: none; } .submit::after{ content: ''; @@ -2683,7 +2766,7 @@ header #banner { } #mention-link:hover, #mention-link:focus { - box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important; + box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important; } #mention-link span:first-of-type { float: right; @@ -2820,17 +2903,17 @@ aside .widget, border-radius: 100% !important; border: 1px solid var(--nav-bg) !important; } -.desktop-view .wall-item-container .wall-item-content a, -.desktop-view .wall-item-name, -.desktop-view .wall-item-container .fakelink, -.desktop-view .toplevel_item .fakelink, +.desktop-view .wall-item-container .wall-item-content a, +.desktop-view .wall-item-name, +.desktop-view .wall-item-container .fakelink, +.desktop-view .toplevel_item .fakelink, .desktop-view .toplevel_item .wall-item-container .wall-item-responses a, .text-muted, -p.wall-item-announce, -.media .time, -.media .shared-time, -.media .delivery, -.media .location, +p.wall-item-announce, +.media .time, +.media .shared-time, +.media .delivery, +.media .location, .media .location a, .event-card .event-card-content, .contact-entry-desc { @@ -2848,22 +2931,22 @@ p.wall-item-announce, .event-card .description { box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.1) inset; } -.contact-wrapper .contact-action-link, -.contact-wrapper .contact-action-link:hover, +.contact-wrapper .contact-action-link, +.contact-wrapper .contact-action-link:hover, .textcomplete-item .contact-wrapper .contact-action-link { color: var(--nav-icon-color); } .media-list > li { border-color: var(--nav-bg); } -.media-list > li:hover, -.media-list > li.selected, +.media-list > li:hover, +.media-list > li.selected, .media-list > li.active { background-color: var(--background-color); } .hovercard { background-color: var(--nav-bg) !important; - border: 1px solid var(--background-color) !important; + border: 1px solid var(--background-color) !important; } .hover-card-pic img.thumbnail { border-radius: 100% !important; @@ -2887,15 +2970,13 @@ p.wall-item-announce, padding-left: 10px !important; padding-right: 10px !important; } - .media hr, - aside hr, - section hr { - border-color: var(--nav-bg); - } + .media hr, aside hr, section hr { + border-color: var(--nav-bg); + } /* keep mentions and tags from spilling out */ #profile-page .label, #profile-page .label a, - .wall-item-bottom .label, + .wall-item-bottom .label, .wall-item-bottom .label a { display: inline-block !important; } @@ -3018,7 +3099,7 @@ p.wall-item-announce, #photo-view-wrapper .wall-item-actions .button-likes:focus .fa-thumbs-down { color: var(--link-color) !important; } - /* END OF ACTION BUTTON LABELS */ + /* END OF ACTION BUTTON LABELS */ /* Compose and Reply */ #jot-modal .modal-header .compose-link { border-radius: 100% !important; @@ -3031,7 +3112,7 @@ p.wall-item-announce, #jot-modal .modal-header .compose-link:hover, #jot-modal .modal-header .compose-link:focus { background-color: rgba(255,255,255,.1); - } + } .close { height: 36px; width: 36px; @@ -3055,6 +3136,7 @@ p.wall-item-announce, } .wall-item-comment-wrapper { border: none; + box-shadow: none; } .photo-comment-wrapper .btn-sm, #profile-jot-wrapper .btn-sm, @@ -3101,13 +3183,13 @@ p.wall-item-announce, } .fbrowser-content-container.justified-gallery { max-height: 100% !important; - } -#jot-modal .modal-header a, -#jot-modal .modal-header .btn-link, -#profile-jot-submit-wrapper a, + } +#jot-modal .modal-header a, +#jot-modal .modal-header .btn-link, +#profile-jot-submit-wrapper a, #profile-jot-submit-wrapper .btn-link { color: var(--nav-icon-color); -} +} #jot-title, #jot-category { background-color: rgb(51,51,52) !important; @@ -3175,7 +3257,15 @@ p.wall-item-announce, #upload-photo:focus { background-color: darkblue !important; } - /* HIDE ATTACHMENT BUTTON */ + .panel-body { + background-color: var(--nav-bg); + border-radius: 10px; + border-top: none !important; + } + .help-block { + color: var(--font-color-darker); + } + /* HIDE ATTACHMENT BUTTON */ .fbswitcher [data-mode="attachment"] { display: var(--attach-file-button) !important; } @@ -3211,7 +3301,7 @@ aside .vcard img.u-photo, aside img.vcard-photo { border-radius: 100% !important; box-shadow: 0 0 1px rgba(0,0,0,.3); border: 3px solid var(--background-color); -} +} aside .widget h3.p-name { font-size: 32px !important; text-align: center; @@ -3276,7 +3366,7 @@ aside .widget li:hover { background-color: rgb(51, 51, 52) !important; -webkit-box-shadow: none !important; box-shadow: none !important; -} +} .wall-item-actions button { font-size: 24px !important; color: var(--nav-icon-color) !important; @@ -3309,7 +3399,7 @@ aside .widget li:hover { margin: 0 !important; } /* little vcard when you scroll down on profiles */ - #vcard-short-photo-wrapper img, + #vcard-short-photo-wrapper img, #nav-short-info .contact-wrapper img { border-radius: 100% !important; } @@ -3367,11 +3457,11 @@ aside .widget li:hover { content: '\f101'; font-family: ForkAwesome; color: #666; - } + } .img-allocated-max-width { margin: 20px auto; } - #vcard-short-photo-wrapper img, + #vcard-short-photo-wrapper img, #nav-short-info .contact-wrapper img { border-radius: 100%; } @@ -3463,8 +3553,8 @@ aside .widget li:hover { } .photos-content-wrapper .photos-upload-link::before { content: var(--add-photo-button-text); - font-size: 15px; - vertical-align: middle; + font-size: 15px; + vertical-align: middle; margin-top: -10px; display: inline-block; } @@ -3476,8 +3566,8 @@ aside .widget li:hover { flex-wrap: wrap; justify-content: start; } -.justified-gallery > a, -.justified-gallery > div, +.justified-gallery > a, +.justified-gallery > div, .justified-gallery > figure{ height: 180px !important; width: 180px !important; @@ -3511,7 +3601,7 @@ aside .widget li:hover { width: 36px; margin-right: 5px; border-radius: 100%; - color: var(--link-color); + color: var(--link-color); } #photos-upload-perms button[data-toggle="modal"]:hover, #photos-upload-perms button[data-toggle="modal"]:focus { @@ -3524,6 +3614,64 @@ aside .widget li:hover { .advancedcontentfilter-content-wrapper pre { margin-top: 20px; } +/* calculator addon */ +.calc-content-wrapper table { + margin: 0 auto; + color: #333; +} +.calc-content-wrapper td[colspan='5']::after { + content: ' '; + height: 50px; + width: 260px; + background-color: black; + display: block; +} + .calc-content-wrapper input[type='button']{ + appearance: none; + height: 50px; + width: 100%; + border: 1px solid #666; + color: white; + font-size: 18px; + font-weight: bold; + background-color: #999; + text-align: center; + } +.calc-content-wrapper input[name='plus'], +.calc-content-wrapper input[name='minus'], +.calc-content-wrapper input[name='multiplication'], +.calc-content-wrapper input[name='division'], +.calc-content-wrapper input[name='enter']{ + background-color: orange; +} +.calc-content-wrapper input[name='plus']{ + padding-left: 10px; +} +.calc-content-wrapper input[name='multiplication']{ + padding-left: 14px; +} +.calc-content-wrapper input[name='clear'], +.calc-content-wrapper input[name='sqareroot'], +.calc-content-wrapper input[name='squarex'], +.calc-content-wrapper input[name='deg-rad'], +.calc-content-wrapper input[name='rad-deg'], +.calc-content-wrapper input[name='sine'], +.calc-content-wrapper input[name='arcsine'], +.calc-content-wrapper input[name='cosine'], +.calc-content-wrapper input[name='arccosine']{ + background-color: #666; +} +.calc-content-wrapper #display { + font-size: 36px; + font-weight: lighter; + text-align: right; + color: #eee; + background-color: #666; + border: none; + display: block; + width: 260px; + position: absolute; +} /* MISCELLANEOUS STUFF */ div#back-to-top { bottom: 65px; @@ -3536,7 +3684,7 @@ div#back-to-top { text-align: center; font-size: 24px; border-radius: 100%; -} +} #item-delete-selected { height: 50px; width: 50px; @@ -3573,12 +3721,12 @@ a.tag.label, padding: 6px 12px !important; -webkit-text-decoration: none !important; text-decoration: none !important; - margin: 2px !important; + margin: 2px !important; background-image: none !important; background-color: transparent !important; box-shadow: none !important; color: #05d8fb !important; - border: 1px solid #05d8fb; + border: 1px solid #05d8fb; text-shadow: none !important; } .wall-item-bottom .label { @@ -3669,7 +3817,7 @@ a.tag.label, content: '\f00d'; font-family: ForkAwesome; font-size: 12px; - text-decoration: line-through; + text-decoration: line-through; } .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):hover, .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):focus { @@ -3789,9 +3937,9 @@ a.tag.label, /* Small Laptop Screens Some tablets in Landscape Orientation ===================================== -*/ +*/ @media screen and (max-width: 1280px) { - #search-box { + #search-box { width: 18% !important; } #search-save { @@ -3872,7 +4020,7 @@ a.tag.label, /* Cover Photo Mobile */ .row:has(.coverphoto) aside { margin-top: 0px; - } + } aside:has(.coverphoto){ left: -300px !important; right: auto !important; @@ -4036,7 +4184,7 @@ a.tag.label, #search-mobile.collapse.in * { display: block !important; } - /* app-style notification menu */ + /* app-style notification menu */ #nav-notifications-menu { position: fixed; top: 60px; @@ -4111,8 +4259,8 @@ a.tag.label, #item-delete-selected { top: 60px; right: 10px; - } - /* move top bars around */ + } + /* move top bars around */ #topbar-second { top: 0px; padding: 0; @@ -4199,7 +4347,7 @@ a.tag.label, width: 100% !important; overflow: auto !important; overflow-x: hidden !important; - } + } #topbar-second .dropdown-menu li { height: auto !important; } @@ -4220,7 +4368,7 @@ a.tag.label, } .coverphoto { top: 55px; - } + } #message-new { height: 50px; width: 50px; @@ -4237,7 +4385,7 @@ a.tag.label, #message-new:hover, #message-new:focus { box-shadow: 0 0 100px rgba(0,0,0,.2); - } + } } /* Narrow Screen Phones in Portrait Orientation ============================================ @@ -4252,11 +4400,11 @@ a.tag.label, .wall-item-actions-row .button-browser-share::after { display: none !important; } -} +} /* Narrow Screen Phones in Landscape Orientation ============================================== */ -@media screen and (max-height: 400px) and (orientation: landscape) { +@media screen and (max-height: 400px) and (orientation: landscape) { #topbar-first { transition-duration: .5s; transition-property: bottom; @@ -4291,7 +4439,7 @@ a.tag.label, height: 50px; width: 50px; border-radius: 100%; - line-height: 32px; + line-height: 32px; } #topbar-first .navbar-toggle[data-target="#search-mobile"]:hover, #topbar-first .navbar-toggle[data-target="#search-mobile"]:focus { @@ -4326,21 +4474,21 @@ a.tag.label, transition-property: top; top: -60px; } - #topbar-first .nav > li > a:hover, - #topbar-first .nav > li > a:focus, - #topbar-first .nav > li > button:not(#main-menu):hover, - #topbar-first .nav > li > button:not(#main-menu):focus, - #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):hover, - #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):focus, - nav.navbar .nav > li > a:hover, - nav.navbar .nav > li > a:focus, - nav.navbar .nav > li > button:hover, + #topbar-first .nav > li > a:hover, + #topbar-first .nav > li > a:focus, + #topbar-first .nav > li > button:not(#main-menu):hover, + #topbar-first .nav > li > button:not(#main-menu):focus, + #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):hover, + #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):focus, + nav.navbar .nav > li > a:hover, + nav.navbar .nav > li > a:focus, + nav.navbar .nav > li > button:hover, nav.navbar .nav > li > button:focus { background-color: var(--link-color) !important; border-radius: 100% !important; box-shadow: inset 0 0 100px rgba(0,0,0,.2); } - #topbar-first button.navbar-toggle.offcanvas-right-toggle:hover, + #topbar-first button.navbar-toggle.offcanvas-right-toggle:hover, #topbar-first button.navbar-toggle.offcanvas-right-toggle:focus { border-radius: 100% !important; } @@ -4361,7 +4509,7 @@ a.tag.label, } #offcanvasUsermenu li:first-of-type { font-weight: 700; - } + } .offcanvas-right-overlay { top: 0px; } @@ -4373,9 +4521,9 @@ a.tag.label, left: 0px; right: 0px; height: 500px; - } + } +} } -} /* LOGIN AND INFO SCREENS */ body.mod-home { padding-top: 10px !important; diff --git a/bookface_auto.php b/bookface_auto.php index 30a24de..403a023 100644 --- a/bookface_auto.php +++ b/bookface_auto.php @@ -32,3 +32,4 @@ $link_color = ($customColor) ? '#'.$customColor->getHex() : '#'.$accentColor->ge $nav_icon_color = '#65686C'; $font_color = '#313131'; $font_color_darker = '#333'; +$contentbg_transp = '0'; diff --git a/bookface_dark.css b/bookface_dark.css index 32fc588..f95a23e 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -46,9 +46,9 @@ body { padding-top: 130px !important; font-family: var(--global-font-family); } -#topbar-first .nav > li > a, -#topbar-first .nav > li > button, -nav.navbar .nav > li > a, +#topbar-first .nav > li > a, +#topbar-first .nav > li > button, +nav.navbar .nav > li > a, nav.navbar .nav > li > button{ color: var(--nav-icon-color) !important; } @@ -67,25 +67,25 @@ nav.navbar .nav > li > button{ .fa-lg { font-size: 24px !important; } -#topbar-first .nav > li > a:hover, -#topbar-first .nav > li > a:focus, -#topbar-first .nav > li > button:not(#main-menu):hover, -#topbar-first .nav > li > button:not(#main-menu):focus, +#topbar-first .nav > li > a:hover, +#topbar-first .nav > li > a:focus, +#topbar-first .nav > li > button:not(#main-menu):hover, +#topbar-first .nav > li > button:not(#main-menu):focus, #topbar-first button.navbar-toggle:hover, -#topbar-first button.navbar-toggle:focus, -nav.navbar .nav > li > a:hover, -nav.navbar .nav > li > a:focus, -nav.navbar .nav > li > button:hover, +#topbar-first button.navbar-toggle:focus, +nav.navbar .nav > li > a:hover, +nav.navbar .nav > li > a:focus, +nav.navbar .nav > li > button:hover, nav.navbar .nav > li > button:focus { background-color: rgba(255,255,255,.1) !important; border-radius: 8px !important; -} +} #topbar-first button.navbar-toggle, #nav-notifications-menu-btn { width: 50px; height: 50px; - } + } #topbar-first .nav > li > a.selected, #nav-notification.dropdown.open { border-bottom: 3px solid var(--link-color) !important; @@ -102,7 +102,7 @@ nav.navbar .nav > li > button:focus { } #nav-notification.dropdown.open #nav-notifications-menu-btn .fa-bell::before { content: '\f0f3'; - color: var(--link-color); + color: var(--link-color); } ul.tabs li { font-size: 15px !important; @@ -269,43 +269,43 @@ header #banner { min-width: 250px !important; overflow-x: hidden; } -.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, +.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: var(--nav-icon-color) !important; border-color: var(--nav-bg) !important; } - .nav-pills .dropdown-menu li > a:hover, - .nav-tabs .dropdown-menu li > a:hover, - .account .dropdown-menu li > a:hover, - .contact-photo-wrapper .dropdown-menu li > a:hover, - .nav-pills .dropdown-menu li.selected a, - .nav-tabs .dropdown-menu li.selected a, - .account .dropdown-menu li.selected a, + .nav-pills .dropdown-menu li > a:hover, + .nav-tabs .dropdown-menu li > a:hover, + .account .dropdown-menu li > a:hover, + .contact-photo-wrapper .dropdown-menu li > a:hover, + .nav-pills .dropdown-menu li.selected a, + .nav-tabs .dropdown-menu li.selected a, + .account .dropdown-menu li.selected a, .contact-photo-wrapper .dropdown-menu li.selected a { color: #333 !important; background: #f2f2f2 !important; border-radius: 8px; - } -.nav-pills .dropdown-menu li.divider, -.nav-tabs .dropdown-menu li.divider, -.account .dropdown-menu li.divider, + } +.nav-pills .dropdown-menu li.divider, +.nav-tabs .dropdown-menu li.divider, +.account .dropdown-menu li.divider, .contact-photo-wrapper .dropdown-menu li.divider { background-color: var(--nav-bg) !important; -} +} #content .nav > li > .btn-link { margin: 5px; } #content .nav > li > .btn-link:hover, #content .nav > li > .btn-link:focus { background-color: var(--link-color); - color: white; -} + color: white !important; +} #topbar-first #nav-notifications-menu { border: 1px solid var(--background-color) !important; } @@ -320,7 +320,7 @@ header #banner { background-color: rgba(255,255,255,.2) !important } #topbar-first #nav-notifications-menu li.notif-entry:hover{ - background-color:rgba(128,128,128,.2) !important; + background-color:rgba(128,128,128,.2) !important; border-color: transparent !important; } .topbar .dropdown-header { @@ -397,25 +397,25 @@ header #banner { margin-top: 10px; } /* General Content Wrappers */ - section > .generic-page-wrapper, - .videos-content-wrapper, - .suggest-content-wrapper, - .help-content-wrapper, - .match-content-wrapper, - .dirfind-content-wrapper, - .delegation-content-wrapper, - .notes-content-wrapper, - .message-content-wrapper, - .apps-content-wrapper, #adminpage, - .delegate-content-wrapper, - .uexport-content-wrapper, - .dfrn_request-content-wrapper, - .friendica-content-wrapper, - .credits-content-wrapper, - .nocircle-content-wrapper, - .profperm-content-wrapper, - .invite-content-wrapper, - .tos-content-wrapper, + section > .generic-page-wrapper, + .videos-content-wrapper, + .suggest-content-wrapper, + .help-content-wrapper, + .match-content-wrapper, + .dirfind-content-wrapper, + .delegation-content-wrapper, + .notes-content-wrapper, + .message-content-wrapper, + .apps-content-wrapper, #adminpage, + .delegate-content-wrapper, + .uexport-content-wrapper, + .dfrn_request-content-wrapper, + .friendica-content-wrapper, + .credits-content-wrapper, + .nocircle-content-wrapper, + .profperm-content-wrapper, + .invite-content-wrapper, + .tos-content-wrapper, .fsuggest-content-wrapper, .shared-wrapper { background-color: var(--nav-bg) !important; @@ -484,6 +484,12 @@ header #banner { margin-left: 5px !important; margin-bottom: 20px !important; } + #settings-channels .panel { + padding: 0 10px 10px 10px; + } + #settings-channels button { + float: right; + } #adminpage button[type="submit"], input[type="submit"], input[name="page_logs"], @@ -491,7 +497,7 @@ header #banner { input[name="page_tos"]{ float: right; padding: 8px; - border: none; + border: none; } .submit::after{ content: ''; @@ -516,7 +522,7 @@ header #banner { } #mention-link:hover, #mention-link:focus { - box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important; + box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important; } #mention-link span:first-of-type { float: right; @@ -653,14 +659,14 @@ aside .widget, border-radius: 100% !important; border: 1px solid var(--nav-bg) !important; } -.media-list > li:hover, -.media-list > li.selected, +.media-list > li:hover, +.media-list > li.selected, .media-list > li.active { background-color: var(--background-color); } .hovercard { background-color: var(--nav-bg) !important; - border: 1px solid var(--background-color) !important; + border: 1px solid var(--background-color) !important; } .hover-card-pic img.thumbnail { border-radius: 100% !important; @@ -684,10 +690,13 @@ aside .widget, padding-left: 10px !important; padding-right: 10px !important; } + .media hr, aside hr, section hr { + border-color: var(--nav-bg); + } /* keep mentions and tags from spilling out */ #profile-page .label, #profile-page .label a, - .wall-item-bottom .label, + .wall-item-bottom .label, .wall-item-bottom .label a { display: inline-block !important; } @@ -810,7 +819,7 @@ aside .widget, #photo-view-wrapper .wall-item-actions .button-likes:focus .fa-thumbs-down { color: var(--link-color) !important; } - /* END OF ACTION BUTTON LABELS */ + /* END OF ACTION BUTTON LABELS */ /* Compose and Reply */ #jot-modal .modal-header .compose-link { border-radius: 100% !important; @@ -823,7 +832,7 @@ aside .widget, #jot-modal .modal-header .compose-link:hover, #jot-modal .modal-header .compose-link:focus { background-color: rgba(255,255,255,.1); - } + } .close { height: 36px; width: 36px; @@ -847,6 +856,7 @@ aside .widget, } .wall-item-comment-wrapper { border: none; + box-shadow: none; } .photo-comment-wrapper .btn-sm, #profile-jot-wrapper .btn-sm, @@ -893,7 +903,7 @@ aside .widget, } .fbrowser-content-container.justified-gallery { max-height: 100% !important; - } + } #jot-title, #jot-category { background-color: rgb(51,51,52) !important; @@ -961,7 +971,15 @@ aside .widget, #upload-photo:focus { background-color: darkblue !important; } - /* HIDE ATTACHMENT BUTTON */ + .panel-body { + background-color: var(--nav-bg); + border-radius: 10px; + border-top: none !important; + } + .help-block { + color: var(--font-color-darker); + } + /* HIDE ATTACHMENT BUTTON */ .fbswitcher [data-mode="attachment"] { display: var(--attach-file-button) !important; } @@ -979,7 +997,7 @@ aside .vcard img.u-photo, aside img.vcard-photo { border-radius: 100% !important; box-shadow: 0 0 1px rgba(0,0,0,.3); border: 3px solid var(--background-color); -} +} aside .widget h3.p-name { font-size: 32px !important; text-align: center; @@ -1041,7 +1059,7 @@ aside .widget li:hover { background-color: rgb(51, 51, 52) !important; -webkit-box-shadow: none !important; box-shadow: none !important; -} +} .wall-item-actions button { font-size: 24px !important; color: var(--nav-icon-color) !important; @@ -1074,7 +1092,7 @@ aside .widget li:hover { margin: 0 !important; } /* little vcard when you scroll down on profiles */ - #vcard-short-photo-wrapper img, + #vcard-short-photo-wrapper img, #nav-short-info .contact-wrapper img { border-radius: 100% !important; } @@ -1131,11 +1149,11 @@ aside .widget li:hover { content: '\f101'; font-family: ForkAwesome; color: #666; - } + } .img-allocated-max-width { margin: 20px auto; } - #vcard-short-photo-wrapper img, + #vcard-short-photo-wrapper img, #nav-short-info .contact-wrapper img { border-radius: 100%; } @@ -1227,8 +1245,8 @@ aside .widget li:hover { } .photos-content-wrapper .photos-upload-link::before { content: var(--add-photo-button-text); - font-size: 15px; - vertical-align: middle; + font-size: 15px; + vertical-align: middle; margin-top: -10px; display: inline-block; } @@ -1240,8 +1258,8 @@ aside .widget li:hover { flex-wrap: wrap; justify-content: start; } -.justified-gallery > a, -.justified-gallery > div, +.justified-gallery > a, +.justified-gallery > div, .justified-gallery > figure{ height: 180px !important; width: 180px !important; @@ -1275,7 +1293,7 @@ aside .widget li:hover { width: 36px; margin-right: 5px; border-radius: 100%; - color: var(--link-color); + color: var(--link-color); } #photos-upload-perms button[data-toggle="modal"]:hover, #photos-upload-perms button[data-toggle="modal"]:focus { @@ -1288,6 +1306,65 @@ aside .widget li:hover { .advancedcontentfilter-content-wrapper pre { margin-top: 20px; } +/* calculator addon */ +.calc-content-wrapper table { + margin: 0 auto; + color: #333; +} +.calc-content-wrapper td[colspan='5']::after { + content: ' '; + height: 50px; + width: 260px; + background-color: black; + display: block; +} + .calc-content-wrapper input[type='button']{ + appearance: none; + height: 50px; + width: 100%; + border: 1px solid #666; + color: white; + font-size: 18px; + font-weight: bold; + background-color: #999; + text-align: center; + } +.calc-content-wrapper input[name='plus'], +.calc-content-wrapper input[name='minus'], +.calc-content-wrapper input[name='multiplication'], +.calc-content-wrapper input[name='division'], +.calc-content-wrapper input[name='enter']{ + background-color: orange; +} +.calc-content-wrapper input[name='plus']{ + padding-left: 10px; +} +.calc-content-wrapper input[name='multiplication']{ + padding-left: 14px; +} +.calc-content-wrapper input[name='clear'], +.calc-content-wrapper input[name='sqareroot'], +.calc-content-wrapper input[name='squarex'], +.calc-content-wrapper input[name='deg-rad'], +.calc-content-wrapper input[name='rad-deg'], +.calc-content-wrapper input[name='sine'], +.calc-content-wrapper input[name='arcsine'], +.calc-content-wrapper input[name='cosine'], +.calc-content-wrapper input[name='arccosine']{ + background-color: #666; +} +.calc-content-wrapper #display { + appearance: none; + font-size: 36px; + font-weight: lighter; + text-align: right; + color: #eee; + background-color: #666; + border: none; + display: block; + width: 260px; + position: absolute; +} /* MISCELLANEOUS STUFF */ div#back-to-top { bottom: 65px; @@ -1300,7 +1377,7 @@ div#back-to-top { text-align: center; font-size: 24px; border-radius: 100%; -} +} #item-delete-selected { height: 50px; width: 50px; @@ -1337,12 +1414,12 @@ a.tag.label, padding: 6px 12px !important; -webkit-text-decoration: none !important; text-decoration: none !important; - margin: 2px !important; + margin: 2px !important; background-image: none !important; background-color: transparent !important; box-shadow: none !important; color: #05d8fb !important; - border: 1px solid #05d8fb; + border: 1px solid #05d8fb; text-shadow: none !important; } .wall-item-bottom .label { @@ -1433,7 +1510,7 @@ a.tag.label, content: '\f00d'; font-family: ForkAwesome; font-size: 12px; - text-decoration: line-through; + text-decoration: line-through; } .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):hover, .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):focus { @@ -1559,9 +1636,9 @@ a.tag.label, /* Small Laptop Screens Some tablets in Landscape Orientation ===================================== -*/ +*/ @media screen and (max-width: 1280px) { - #search-box { + #search-box { width: 18% !important; } #search-save { @@ -1642,7 +1719,7 @@ a.tag.label, /* Cover Photo Mobile */ .row:has(.coverphoto) aside { margin-top: 0px; - } + } aside:has(.coverphoto){ left: -300px !important; right: auto !important; @@ -1808,7 +1885,7 @@ a.tag.label, #search-mobile.collapse.in * { display: block !important; } - /* app-style notification menu */ + /* app-style notification menu */ #nav-notifications-menu { position: fixed; top: 60px; @@ -1883,8 +1960,8 @@ a.tag.label, #item-delete-selected { top: 60px; right: 10px; - } - /* move top bars around */ + } + /* move top bars around */ #topbar-second { top: 0px; padding: 0; @@ -1971,7 +2048,7 @@ a.tag.label, width: 100% !important; overflow: auto !important; overflow-x: hidden !important; - } + } #topbar-second .dropdown-menu li { height: auto !important; } @@ -1994,7 +2071,7 @@ a.tag.label, .coverphoto.canvas-sliding, .coverphoto.canvas-slid{ top: 55px !important; - } + } #message-new { height: 50px; width: 50px; @@ -2011,7 +2088,7 @@ a.tag.label, #message-new:hover, #message-new:focus { box-shadow: 0 0 100px rgba(0,0,0,.2); - } + } } /* Narrow Screen Phones in Portrait Orientation ============================================ @@ -2026,11 +2103,11 @@ a.tag.label, .wall-item-actions-row .button-browser-share::after { display: none !important; } -} +} /* Narrow Screen Phones in Landscape Orientation ============================================== */ -@media screen and (max-height: 400px) and (orientation: landscape) { +@media screen and (max-height: 400px) and (orientation: landscape) { #topbar-first { transition-duration: .5s; transition-property: bottom; @@ -2065,7 +2142,7 @@ a.tag.label, height: 50px; width: 50px; border-radius: 100%; - line-height: 32px; + line-height: 32px; } #topbar-first .navbar-toggle[data-target="#search-mobile"]:hover, #topbar-first .navbar-toggle[data-target="#search-mobile"]:focus { @@ -2100,21 +2177,21 @@ a.tag.label, transition-property: top; top: -60px; } - #topbar-first .nav > li > a:hover, - #topbar-first .nav > li > a:focus, - #topbar-first .nav > li > button:not(#main-menu):hover, - #topbar-first .nav > li > button:not(#main-menu):focus, - #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):hover, - #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):focus, - nav.navbar .nav > li > a:hover, - nav.navbar .nav > li > a:focus, - nav.navbar .nav > li > button:hover, + #topbar-first .nav > li > a:hover, + #topbar-first .nav > li > a:focus, + #topbar-first .nav > li > button:not(#main-menu):hover, + #topbar-first .nav > li > button:not(#main-menu):focus, + #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):hover, + #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):focus, + nav.navbar .nav > li > a:hover, + nav.navbar .nav > li > a:focus, + nav.navbar .nav > li > button:hover, nav.navbar .nav > li > button:focus { background-color: var(--link-color) !important; border-radius: 100% !important; box-shadow: inset 0 0 100px rgba(0,0,0,.2); } - #topbar-first button.navbar-toggle.offcanvas-right-toggle:hover, + #topbar-first button.navbar-toggle.offcanvas-right-toggle:hover, #topbar-first button.navbar-toggle.offcanvas-right-toggle:focus { border-radius: 100% !important; } @@ -2135,7 +2212,7 @@ a.tag.label, } #offcanvasUsermenu li:first-of-type { font-weight: 700; - } + } .offcanvas-right-overlay { top: 0px; } @@ -2149,7 +2226,7 @@ a.tag.label, left: 0px; right: 0px; height: 500px; - } + } } /* LOGIN AND INFO SCREENS */ body.mod-home { diff --git a/bookface_dark.php b/bookface_dark.php index f3e5a4a..4f7f632 100644 --- a/bookface_dark.php +++ b/bookface_dark.php @@ -34,3 +34,4 @@ $nav_icon_color = '#B0B3B8'; $font_color = '#cccccc'; $font_color_darker = '#acacac'; $font_color_lighter = '#444444'; +$contentbg_transp = '0'; \ No newline at end of file diff --git a/bookface_light.css b/bookface_light.css index c370a88..a976730 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -37,7 +37,7 @@ --attendmaybe-button-text: 'Maybe'; --add-photo-button-text: 'Add Photos'; --follow-button-text: 'Follow'; - --save-button-text: 'Save'; + --save-button-text: 'Save'; } body { @@ -46,9 +46,9 @@ padding-top: 130px !important; font-family: var(--global-font-family); } - #topbar-first .nav > li > a, - #topbar-first .nav > li > button, - nav.navbar .nav > li > a, + #topbar-first .nav > li > a, + #topbar-first .nav > li > button, + nav.navbar .nav > li > a, nav.navbar .nav > li > button{ color: var(--nav-icon-color) !important; } @@ -67,15 +67,15 @@ .fa-lg { font-size: 24px !important; } - #topbar-first .nav > li > a:hover, - #topbar-first .nav > li > a:focus, - #topbar-first .nav > li > button:not(#main-menu):hover, + #topbar-first .nav > li > a:hover, + #topbar-first .nav > li > a:focus, + #topbar-first .nav > li > button:not(#main-menu):hover, #topbar-first .nav > li > button:not(#main-menu):focus, #topbar-first button.navbar-toggle:hover, - #topbar-first button.navbar-toggle:focus, - nav.navbar .nav > li > a:hover, - nav.navbar .nav > li > a:focus, - nav.navbar .nav > li > button:hover, + #topbar-first button.navbar-toggle:focus, + nav.navbar .nav > li > a:hover, + nav.navbar .nav > li > a:focus, + nav.navbar .nav > li > button:hover, nav.navbar .nav > li > button:focus { background-color: rgba(128,128,128,.1) !important; border-radius: 8px !important; @@ -85,7 +85,7 @@ #nav-notifications-menu-btn { width: 50px; height: 50px; - } + } #topbar-first .nav > li > a.selected, #nav-notification.dropdown.open { border-bottom: 3px solid var(--link-color) !important; @@ -101,8 +101,8 @@ border-radius: 0 !important; } #nav-notification.dropdown.open #nav-notifications-menu-btn .fa-bell::before { - content: '\f0f3'; - color: var(--link-color); + content: '\f0f3'; + color: var(--link-color); } ul.tabs li { font-size: 15px !important; @@ -166,7 +166,7 @@ } .table-striped > tbody > tr:nth-of-type(2n+1){ /* not necessary for light mode */ - } + } header #banner { left: 0 !important; right: auto !important; @@ -269,32 +269,32 @@ min-width: 250px !important; overflow-x: hidden; } - .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, + .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: var(--nav-icon-color) !important; border-color: var(--nav-bg) !important; } - .nav-pills .dropdown-menu li > a:hover, - .nav-tabs .dropdown-menu li > a:hover, - .account .dropdown-menu li > a:hover, - .contact-photo-wrapper .dropdown-menu li > a:hover, - .nav-pills .dropdown-menu li.selected a, - .nav-tabs .dropdown-menu li.selected a, - .account .dropdown-menu li.selected a, + .nav-pills .dropdown-menu li > a:hover, + .nav-tabs .dropdown-menu li > a:hover, + .account .dropdown-menu li > a:hover, + .contact-photo-wrapper .dropdown-menu li > a:hover, + .nav-pills .dropdown-menu li.selected a, + .nav-tabs .dropdown-menu li.selected a, + .account .dropdown-menu li.selected a, .contact-photo-wrapper .dropdown-menu li.selected a { color: #333 !important; background: #f2f2f2 !important; border-radius: 8px; - } - .nav-pills .dropdown-menu li.divider, + } + .nav-pills .dropdown-menu li.divider, .nav-tabs .dropdown-menu li.divider, - .account .dropdown-menu li.divider, + .account .dropdown-menu li.divider, .contact-photo-wrapper .dropdown-menu li.divider { background-color: var(--nav-bg) !important; } @@ -304,8 +304,8 @@ #content .nav > li > .btn-link:hover, #content .nav > li > .btn-link:focus { background-color: var(--link-color); - color: white; -} + color: white !important; +} #topbar-first #nav-notifications-menu { border: 1px solid var(--background-color) !important; } @@ -320,7 +320,7 @@ background-color: rgba(0,0,0,.1) !important } #topbar-first #nav-notifications-menu li.notif-entry:hover{ - background-color:rgba(128,128,128,.2) !important; + background-color:rgba(128,128,128,.2) !important; border-color: transparent !important; } .topbar .dropdown-header { @@ -338,7 +338,7 @@ .topbar .dropdown-header .dropdown-header-link .btn-link:hover, .topbar .dropdown-header .dropdown-header-link .btn-link:focus { background-color: rgba(0,0,0,.1); - } + } #topbar-second { top: 55px; height: 60px !important; @@ -397,25 +397,25 @@ margin-top: 10px; } /* General Content Wrappers */ - section > .generic-page-wrapper, - .videos-content-wrapper, - .suggest-content-wrapper, - .help-content-wrapper, - .match-content-wrapper, - .dirfind-content-wrapper, - .delegation-content-wrapper, - .notes-content-wrapper, - .message-content-wrapper, - .apps-content-wrapper, #adminpage, - .delegate-content-wrapper, - .uexport-content-wrapper, - .dfrn_request-content-wrapper, - .friendica-content-wrapper, - .credits-content-wrapper, - .nocircle-content-wrapper, - .profperm-content-wrapper, - .invite-content-wrapper, - .tos-content-wrapper, + section > .generic-page-wrapper, + .videos-content-wrapper, + .suggest-content-wrapper, + .help-content-wrapper, + .match-content-wrapper, + .dirfind-content-wrapper, + .delegation-content-wrapper, + .notes-content-wrapper, + .message-content-wrapper, + .apps-content-wrapper, #adminpage, + .delegate-content-wrapper, + .uexport-content-wrapper, + .dfrn_request-content-wrapper, + .friendica-content-wrapper, + .credits-content-wrapper, + .nocircle-content-wrapper, + .profperm-content-wrapper, + .invite-content-wrapper, + .tos-content-wrapper, .fsuggest-content-wrapper, .shared-wrapper { background-color: var(--nav-bg) !important; @@ -484,6 +484,12 @@ margin-left: 5px !important; margin-bottom: 20px !important; } + #settings-channels .panel { + padding: 0 10px 10px 10px; + } + #settings-channels button { + float: right; + } #adminpage button[type="sbumit"], input[type="submit"], input[name="page_logs"], @@ -491,7 +497,7 @@ input[name="page_tos"]{ float: right; padding: 8px; - border: none; + border: none; } .submit::after{ content: ''; @@ -590,7 +596,7 @@ /* popovers */ .popover.hovercard { border: 1px solid var(--nav-bg) !important; - /* + /* dark version needs box shadow as outer glow */ } @@ -658,7 +664,7 @@ here light mode does not need to the .media-list > li elements */ -/* +/* Dark mode has some extra styling here for the .hovercard element */ @@ -684,10 +690,13 @@ padding-left: 10px !important; padding-right: 10px !important; } + .media hr, aside hr, section hr { + border-color: var(--nav-bg); + } /* keep mentions and tags from spilling out */ #profile-page .label, #profile-page .label a, - .wall-item-bottom .label, + .wall-item-bottom .label, .wall-item-bottom .label a { display: inline-block !important; } @@ -810,7 +819,7 @@ #photo-view-wrapper .wall-item-actions .button-likes:focus .fa-thumbs-down { color: var(--link-color) !important; } - /* END OF ACTION BUTTON LABELS */ + /* END OF ACTION BUTTON LABELS */ /* Compose and Reply */ #jot-modal .modal-header .compose-link { border-radius: 100% !important; @@ -843,10 +852,11 @@ .wall-item-comment-wrapper { background-color: #fff !important; border-radius: 15px !important; - background-image: none; + background-image: none; } .wall-item-comment-wrapper { border: none; + box-shadow: none; } .photo-comment-wrapper .btn-sm, #profile-jot-wrapper .btn-sm, @@ -865,7 +875,7 @@ .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; @@ -893,7 +903,7 @@ } .fbrowser-content-container.justified-gallery { max-height: 100% !important; - } + } #jot-title, #jot-category { background-color: #fff !important; @@ -961,7 +971,15 @@ #upload-photo:focus { background-color: darkblue !important; } - /* HIDE ATTACHMENT BUTTON */ + .panel-body { + background-color: var(--nav-bg); + border-radius: 10px; + border-top: none !important; + } + .help-block { + color: var(--font-color-darker); + } + /* HIDE ATTACHMENT BUTTON */ .fbswitcher [data-mode="attachment"] { display: var(--attach-file-button) !important; } @@ -979,7 +997,7 @@ border-radius: 100% !important; box-shadow: 0 0 1px rgba(0,0,0,.3); border: 3px solid white; - } + } aside .widget h3.p-name { font-size: 32px !important; text-align: center; @@ -1041,7 +1059,7 @@ /* frio background-color */ /* frio -webkit-box-shadow */ /* frio box-shadow */ - } + } .wall-item-actions button { font-size: 24px !important; color: var(--nav-icon-color) !important; @@ -1074,7 +1092,7 @@ margin: 0 !important; } /* little vcard when you scroll down on profiles */ - #vcard-short-photo-wrapper img, + #vcard-short-photo-wrapper img, #nav-short-info .contact-wrapper img { border-radius: 100% !important; } @@ -1131,11 +1149,11 @@ content: '\f101'; font-family: ForkAwesome; color: #666; - } + } .img-allocated-max-width { margin: 20px auto; } - #vcard-short-photo-wrapper img, + #vcard-short-photo-wrapper img, #nav-short-info .contact-wrapper img { border-radius: 100%; } @@ -1227,8 +1245,8 @@ } .photos-content-wrapper .photos-upload-link::before { content: var(--add-photo-button-text); - font-size: 15px; - vertical-align: middle; + font-size: 15px; + vertical-align: middle; margin-top: -10px; display: inline-block; } @@ -1240,8 +1258,8 @@ flex-wrap: wrap; justify-content: start; } -.justified-gallery > a, -.justified-gallery > div, +.justified-gallery > a, +.justified-gallery > div, .justified-gallery > figure{ height: 180px !important; width: 180px !important; @@ -1267,7 +1285,7 @@ #photo-photo { margin: 0 auto !important; max-width: 100%; -} +} #photos-upload-perms button[data-toggle="modal"] { background-color: rgba(0,0,0,.1) !important; padding: 0 !important; @@ -1275,12 +1293,12 @@ width: 36px; margin-right: 5px; border-radius: 100%; - color: var(--link-color); + 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; - } + } /* ADD-ONS */ .advancedcontentfilter-content-wrapper table td:nth-of-type(2) { word-wrap: anywhere; @@ -1288,6 +1306,65 @@ .advancedcontentfilter-content-wrapper pre { margin-top: 20px; } +/* calculator addon */ +.calc-content-wrapper table { + margin: 0 auto; + color: #333; +} +.calc-content-wrapper td[colspan='5']::after { + content: ' '; + height: 50px; + width: 260px; + background-color: black; + display: block; +} + .calc-content-wrapper input[type='button']{ + appearance: none; + height: 50px; + width: 100%; + border: 1px solid #666; + color: white; + font-size: 18px; + font-weight: bold; + background-color: #999; + text-align: center; + } +.calc-content-wrapper input[name='plus'], +.calc-content-wrapper input[name='minus'], +.calc-content-wrapper input[name='multiplication'], +.calc-content-wrapper input[name='division'], +.calc-content-wrapper input[name='enter']{ + background-color: orange; +} +.calc-content-wrapper input[name='plus']{ + padding-left: 10px; +} +.calc-content-wrapper input[name='multiplication']{ + padding-left: 14px; +} +.calc-content-wrapper input[name='clear'], +.calc-content-wrapper input[name='sqareroot'], +.calc-content-wrapper input[name='squarex'], +.calc-content-wrapper input[name='deg-rad'], +.calc-content-wrapper input[name='rad-deg'], +.calc-content-wrapper input[name='sine'], +.calc-content-wrapper input[name='arcsine'], +.calc-content-wrapper input[name='cosine'], +.calc-content-wrapper input[name='arccosine']{ + background-color: #666; +} +.calc-content-wrapper #display { + appearance: none; + font-size: 36px; + font-weight: lighter; + text-align: right; + color: #eee; + background-color: #666; + border: none; + display: block; + width: 260px; + position: absolute; +} /* MISCELLANEOUS STUFF */ div#back-to-top { bottom: 65px; @@ -1300,7 +1377,7 @@ div#back-to-top { text-align: center; font-size: 24px; border-radius: 100%; -} +} #item-delete-selected { height: 50px; width: 50px; @@ -1337,12 +1414,12 @@ a.tag.label, padding: 6px 12px !important; -webkit-text-decoration: none !important; text-decoration: none !important; - margin: 2px !important; + margin: 2px !important; background-image: none !important; background-color: transparent !important; box-shadow: none !important; color: #0066FF !important; - border: 1px solid #0066FF; + border: 1px solid #0066FF; text-shadow: none !important; } .wall-item-bottom .label { @@ -1433,7 +1510,7 @@ a.tag.label, content: '\f00d'; font-family: ForkAwesome; font-size: 12px; - text-decoration: line-through; + text-decoration: line-through; } .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):hover, .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):focus { @@ -1559,9 +1636,9 @@ a.tag.label, /* Small Laptop Screens Some tablets in Landscape Orientation ===================================== -*/ +*/ @media screen and (max-width: 1280px) { - #search-box { + #search-box { width: 18% !important; } #search-save { @@ -1642,7 +1719,7 @@ a.tag.label, /* Cover Photo Mobile */ .row:has(.coverphoto) aside { margin-top: 0px; - } + } aside:has(.coverphoto){ left: -300px !important; right: auto !important; @@ -1881,7 +1958,7 @@ a.tag.label, #item-delete-selected { top: 60px; right: 10px; - } + } /* move top bars around */ #topbar-second { top: 0px; @@ -1969,7 +2046,7 @@ a.tag.label, width: 100% !important; overflow: auto !important; overflow-x: hidden !important; - } + } #topbar-second .dropdown-menu li { height: auto !important; } @@ -2007,7 +2084,7 @@ a.tag.label, #message-new:hover, #message-new:focus { box-shadow: 0 0 100px rgba(0,0,0,.2); - } + } } /* Narrow Screen Phones in Portrait Orientation ============================================ @@ -2026,7 +2103,7 @@ a.tag.label, /* Narrow Screen Phones in Landscape Orientation ============================================== */ -@media screen and (max-height: 400px) and (orientation: landscape) { +@media screen and (max-height: 400px) and (orientation: landscape) { #topbar-first { transition-duration: .5s; transition-property: bottom; @@ -2061,7 +2138,7 @@ a.tag.label, height: 50px; width: 50px; border-radius: 100% !important; - line-height: 32px; + line-height: 32px; } #topbar-first .navbar-toggle[data-target="#search-mobile"]:hover, #topbar-first .navbar-toggle[data-target="#search-mobile"]:focus { @@ -2101,21 +2178,21 @@ a.tag.label, transition-property: top; top: -60px; } - #topbar-first .nav > li > a:hover, - #topbar-first .nav > li > a:focus, - #topbar-first .nav > li > button:not(#main-menu):hover, - #topbar-first .nav > li > button:not(#main-menu):focus, - #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):hover, - #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):focus, - nav.navbar .nav > li > a:hover, - nav.navbar .nav > li > a:focus, - nav.navbar .nav > li > button:hover, + #topbar-first .nav > li > a:hover, + #topbar-first .nav > li > a:focus, + #topbar-first .nav > li > button:not(#main-menu):hover, + #topbar-first .nav > li > button:not(#main-menu):focus, + #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):hover, + #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):focus, + nav.navbar .nav > li > a:hover, + nav.navbar .nav > li > a:focus, + nav.navbar .nav > li > button:hover, nav.navbar .nav > li > button:focus { background-color: var(--link-color) !important; border-radius: 100% !important; box-shadow: inset 0 0 100px rgba(0,0,0,.2); } - #topbar-first button.navbar-toggle.offcanvas-right-toggle:hover, + #topbar-first button.navbar-toggle.offcanvas-right-toggle:hover, #topbar-first button.navbar-toggle.offcanvas-right-toggle:focus { border-radius: 100% !important; } @@ -2136,7 +2213,7 @@ a.tag.label, } #offcanvasUsermenu li:first-of-type { font-weight: 700; - } + } .offcanvas-right-overlay { top: 0px; } @@ -2145,7 +2222,7 @@ a.tag.label, } .coverphoto { top: 0px; - } + } } /* LOGIN AND INFO SCREENS */ body.mod-home { diff --git a/bookface_light.php b/bookface_light.php index 8f03fe1..64109e0 100644 --- a/bookface_light.php +++ b/bookface_light.php @@ -31,5 +31,5 @@ $link_color = ($customColor) ? '#'.$customColor->getHex() : '#'.$accentColor->li $nav_icon_color = '#65686C'; $font_color = '#313131'; $font_color_darker = '#333'; - +$contentbg_transp = 100;