From 6a69c2b2dfa66492aa805851ad44c7469156686c Mon Sep 17 00:00:00 2001 From: oldkid Date: Sun, 9 Feb 2025 11:48:40 +0100 Subject: [PATCH 1/3] fix typo --- bookface_dark.css | 25 ++++++++++++++----------- bookface_light.css | 27 +++++++++++++++------------ 2 files changed, 29 insertions(+), 23 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index bc49ad4..4c322e2 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -28,7 +28,7 @@ body { #topbar-first .nav > li > a, #topbar-first .nav > li > button, nav.navbar .nav > li > a, -nav.navbar .nav > li > button{ +nav.navbar .nav > li > button { color: #B0B3B8 !important; } @@ -336,7 +336,7 @@ box-sizing: border-box; float: right !important; margin-left: 5px; } - .panel-footer::after{ + .panel-footer::after { content: ''; display: block; clear: both; @@ -622,7 +622,7 @@ aside .widget, left: 105px; } .vote-event .wall-item-response:nth-of-type(2) .button-event::after, - [id^="attendno"]::after{ + [id^="attendno"]::after { content: 'Can\'t Go'; position: relative; height: 20px; @@ -632,7 +632,7 @@ aside .widget, left: 204px; } .vote-event .wall-item-response:nth-of-type(3) .button-event::after, - [id^="attendmaybe"]::after{ + [id^="attendmaybe"]::after { content: 'Maybe'; } /* prevent "Like Like" and "Dislike Dislike" on photos */ @@ -792,7 +792,7 @@ aside .widget, } #profile-jot-wrapper .wall-item-container.panel-body.preview { border: none !important; - margin-top:20px !important; + margin-top: 20px !important; border-radius: none !important; background-color: transparent; } @@ -830,7 +830,7 @@ aside .widget li.selected a { font-weight: bold; } aside .widget li:hover { - background-color:rgba(128,128,128,.2) !important; + background-color: rgba(128,128,128,.2) !important; border-color: transparent !important; border-radius: 8px; } @@ -1028,7 +1028,7 @@ aside .widget li:hover { width: 140px !important; } } -@media screen and (max-width: 991px){ +@media screen and (max-width: 991px) { #search-box { left: 15%; } @@ -1040,8 +1040,8 @@ aside .widget li:hover { margin-right: 42px; } } -@media screen and (max-width: 768px){ - #topbar-first .navbar-toggle[data-target="#search-mobile"]{ +@media screen and (max-width: 768px) { + #topbar-first .navbar-toggle[data-target="#search-mobile"] { position: fixed !important; left: 15%; } @@ -1052,14 +1052,17 @@ aside .widget li:hover { aspect-ratio: 5/4; } } -@media screen and (max-width: 480px){ - #topbar-first .navbar-toggle[data-target="#search-mobile"]{ +@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; + } + #topbar-first .topbar-nav .nav-segment { + margin-right: 0px; } #search-save { width: 100px !important; diff --git a/bookface_light.css b/bookface_light.css index dd116fb..b054593 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -30,7 +30,7 @@ #topbar-first .nav > li > a, #topbar-first .nav > li > button, nav.navbar .nav > li > a, - nav.navbar .nav > li > button{ + nav.navbar .nav > li > button { color: #65686C !important; } @@ -293,7 +293,7 @@ float: right !important; margin-left: 5px; } - .panel-footer::after{ + .panel-footer::after { content: ''; display: block; clear: both; @@ -345,7 +345,7 @@ margin-right: 10px; line-height: 32px; top: 6px; - position:relative; + position: relative; } #contact-edit-status-wrapper { margin: 15px 0px !important; @@ -540,7 +540,7 @@ left: 105px; } .vote-event .wall-item-response:nth-of-type(2) .button-event::after, - [id^="attendno"]::after{ + [id^="attendno"]::after { content: 'Can\'t Go'; position: relative; height: 20px; @@ -550,7 +550,7 @@ left: 204px; } .vote-event .wall-item-response:nth-of-type(3) .button-event::after, - [id^="attendmaybe"]::after{ + [id^="attendmaybe"]::after { content: 'Maybe'; } /* prevent "Like Like" and "Dislike Dislike" on photos */ @@ -705,7 +705,7 @@ } #profile-jot-wrapper .wall-item-container.panel-body.preview { border: none!important; - margin-top:20px !important; + margin-top: 20px !important; border-radius: none !important; background-color: transparent; } @@ -765,7 +765,7 @@ font-weight: bold; } aside .widget li:hover { - background-color:rgba(255,255,255,1) !important; + background-color: rgba(255,255,255,1) !important; border-color: transparent !important; border-radius: 8px; } @@ -961,7 +961,7 @@ width: 140px !important; } } - @media screen and (max-width: 991px){ + @media screen and (max-width: 991px) { #search-box { left: 15%; } @@ -973,8 +973,8 @@ margin-right: 42px; } } - @media screen and (max-width: 768px){ - #topbar-first .navbar-toggle[data-target="#search-mobile"]{ + @media screen and (max-width: 768px) { + #topbar-first .navbar-toggle[data-target="#search-mobile"] { position: fixed !important; left: 15%; } @@ -985,8 +985,8 @@ aspect-ratio: 5/4; } } - @media screen and (max-width: 480px){ - #topbar-first .navbar-toggle[data-target="#search-mobile"]{ + @media screen and (max-width: 480px) { + #topbar-first .navbar-toggle[data-target="#search-mobile"] { left: 10%; } .topbar ul.nav { @@ -994,6 +994,9 @@ left: 10% !important; margin-left: 0!important; } + #topbar-first .topbar-nav .nav-segment { + margin-right: 0px; + } #search-save { width: 100px !important; } From b452b20a29400a2c5bd14046747a6380b936ab65 Mon Sep 17 00:00:00 2001 From: oldkid Date: Wed, 12 Feb 2025 04:21:50 +0100 Subject: [PATCH 2/3] upgrade to V 1.3 --- bookface_auto.css | 4181 ++++++++++++++++++++++++++++++++++++++++++++ bookface_auto.php | 36 + bookface_dark.css | 1315 ++++++++++++-- bookface_dark.php | 23 +- bookface_light.css | 1293 ++++++++++++-- bookface_light.php | 27 +- 6 files changed, 6575 insertions(+), 300 deletions(-) create mode 100644 bookface_auto.css create mode 100644 bookface_auto.php diff --git a/bookface_auto.css b/bookface_auto.css new file mode 100644 index 0000000..1908b2e --- /dev/null +++ b/bookface_auto.css @@ -0,0 +1,4181 @@ +/* + Name : Bookface Auto Color Mode + Version : 1.3 + Licence : AGPL + Created on : 11 Feb 2025 + Author : Kristi H. @kmh@friendica.world feb @feb@loma.ml Phil phil@loma.ml +*/ + +:root { + --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; + --background-color: $background_color; + --contentbg-transp: $contentbg_transp; + --font-color: $font_color; + --font-color-darker: $font_color_darker; + --background-image: $background_image; + --menu-background-hover-color: color-mix(in oklab, var(--link-color) 15%, white); + --border-color: #eeeeee; + --count-color: #ffffff; + --count-bg: var(--link-color); + + /* LOCALIZE pseudo-element text below */ + --sign-in-text: 'Sign-In'; + --compose-text: 'Compose'; + --new-note-text: 'New Note'; + --save-search-text: 'Save Search'; + --follow-tag-text: 'Follow Tag'; + --comment-button-text: 'Comment'; + --share-button-text: 'Share'; + --quote-button-text: 'Quote'; + --like-button-text: 'Like'; + --dislike-button-text: 'Dislike'; + --more-button-text: 'More'; + --attendyes-button-text: 'Going'; + --attendno-button-text: 'Can\'t Go'; + --attendmaybe-button-text: 'Maybe'; + --add-photo-button-text: 'Add Photos'; + --follow-button-text: 'Follow'; + --save-button-text: 'Save'; +} + + body { + background-color: var(--background-color) !important; + font-size: 15px !important; + 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, + nav.navbar .nav > li > button{ + color: var(--nav-icon-color) !important; + } + #topbar-first, nav.navbar { + background-color: var(--nav-bg) !important; + color: var(--nav-icon-color) !important; + height: 55px; + } + #topbar-first .topbar-nav .nav-segment { + margin-right: 10px; + } + #topbar-first .nav > li > a:hover:not(.selected) { + background-color: rgba(128,128,128,.1) !important; + border-radius: 8px !important; + } + .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 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, + nav.navbar .nav > li > button:focus { + background-color: rgba(128,128,128,.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; + color: var(--link-color) !important; + } + #topbar-first .nav > li > a.selected:hover, + #topbar-first .nav > li > a.selected:focus, + #topbar-first .nav > li > #main-menu:hover, + #topbar-first .nav > li > #main-menu:focus, + #nav-notification.dropdown.open #nav-notifications-menu-btn:hover, + #nav-notification.dropdown.open #nav-notifications-menu-btn:focus { + background-color: transparent !important; + border-radius: 0 !important; + } + #nav-notification.dropdown.open #nav-notifications-menu-btn .fa-bell::before { + content: '\f0f3'; + color: var(--link-color); + } + ul.tabs li { + font-size: 15px !important; + margin-left: 10px !important; + } + ul.tabs li a { + margin-top: 8px; + color: var(--link-color); + } + ul.tabs li:hover:not(.active) { + border-bottom-width: 0px !important; + } + ul.tabs li:hover:not(.active) > a { + background-color: rgba(128,128,128,.1) !important; + border-radius: 8px !important; + color: var(--font-color); + } + .dropdown-menu { + padding-bottom: 15px !important; + background-color: var(--nav-bg) !important; + border: 1px solid var(--background-color) !important; + } + .dropdown-menu li { + margin: 3px 10px; + width: 92% !important; + border-radius: 8px; + } + .dropdown-menu li:hover { + border-color: transparent !important; + } + .dropdown-menu > li > a:hover, + .dropdown-menu > li > a:focus { + background-image: none !important; + border-radius: 8px ; + } + .dropdown-menu > li.active, + .dropdown-menu > li.active:hover, + .dropdown-menu > li.active:focus { + border-radius: 0; + background-color: transparent; + border-bottom: 4px solid var(--link-color) !important; + } + .dropdown-menu > li.active > a, + .dropdown-menu > li.active:hover > a, + .dropdown-menu > li.active:focus > a { + color: var(--link-color); + background-color: transparent; + background-image: none; + } + .form-control { + background: var(--nav-bg); + color: #000; + } + .form-control[readonly], + .form-control[disabled], + .fieldset[disabled] .form-control { + /* background color */ + /* color */ + opacity: .5; + } + .table-striped > tbody > tr:nth-of-type(2n+1){ + /* not necessary for light mode */ + } + header #banner { + left: 0 !important; + right: auto !important; + margin-top: 10px; + } + .navbar-brand #logo-img { + margin-top: 20px; + } + .navbar-brand #logo-img, + header #banner #logo-img { + /* SVG Mask is broken in WebKit use Icon Font instead */ + -webkit-mask-image: unset !important; + mask: none !important; + mask-size: unset !important; + mask-composite: unset !important; + mask-mode: unset !important; + background-color: transparent !important; + height: 40px; + width: 40px; + } + .navbar-brand #logo-img::before, + header #banner #logo-img::before { + content: '\f2e6'; + font-family: ForkAwesome; + font-size: 45px; + position: relative; + top: -12px; + left: 0px; + text-shadow: none; + color: var(--link-color); + } + + #navbar-brand-text { + line-height: 40px; + font-weight: 700; + color: var(--link-color) !important; + } + #nav-login::before{ + content: var(--sign-in-text); + } + .topbar ul.nav { + left: 50% !important; + margin-left: -25% !important; + position: relative; + } + #topbar-first .nav > .account img { + border-radius: 100% !important; + box-shadow: 0 0 1px rgba(255,255,255,.1) !important; + height: 40px !important; + width: 40px !important; + } + #search-box { + position: fixed !important; + left: 100px; + } + #topbar-first #search-box .form-search { + height: 40px !important; + font-size: 15px; + background-position: unset; + /* box shadow okay for light mode */ + } + #search-box form > div { + background-color: var(--background-color); + border-radius: 50px; + } + #search-box form > div::before { + content: '\f002'; + font-family: ForkAwesome; + position: absolute; + left: 10px; + top: 8px; + } + #search-box .form-control.form-search { + border-radius: 50px !important; + background: transparent !important; + width: 100% !important; + } + #search-box .form-control::placeholder { + color: #666 !important; + } + #topbar-first #search-box .btn { + font-size: 0px !important; + height: 32px; + width: 32px; + top: 2px !important; + background-color: white !important; + margin-top: 2px !important; + } + #topbar-first #search-box .btn::before { + content: '\f061'; + font-family: ForkAwesome; + font-size: 15px; + color: #666; + } + #nav-user-menu, #nav-notifications-menu { + background-color: var(--nav-bg) !important; + border: 1px solid var(--background-color) !important; + } + #nav-user-menu { + 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, + .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, + .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, + .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; +} + #topbar-first #nav-notifications-menu { + border: 1px solid var(--background-color) !important; + } + #topbar-first #nav-notifications-menu li { + border-color: transparent !important; + box-sizing: border-box; + margin: 10px; + border-radius: 10px !important; + width: 94% !important; + } + #topbar-first .notification-unseen { + 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; + border-color: transparent !important; + } + .topbar .dropdown-header { + color: var(--nav-icon-color); + } + #topbar-first .topbar-nav .arrow { + display: none !important; + } + .topbar .dropdown-header .dropdown-header-link .btn-link { + border: 1px solid var(--link-color); + border-radius: 8px; + padding: 5px; + margin-top: -6px; + } + .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; + background-color: var(--nav-bg) !important; + border-color: #ccc; + } + .btn.btn-primary:hover, + .btn.btn-primary:focus { + border-radius: 8px !important; + } + #dropdownMenuTools { + height: 40px; + width: 40px; + background-color: rgba(128,128,128,.1) !important; + border-radius: 100% !important; + margin-top: 5px !important; + margin-right: 10px !important; + } + #dropdownMenuTools:hover, + #dropdownMenuTools:focus { + background-color: rgba(0,0,0,.1) !important; + } + #jotOpen { + border-radius: 8px !important; + background-color: var(--link-color) !important; + color: #ffffff !important; + /* frio border-color */ + /* frio box-shadow */ + } + #jotOpen:hover, #jotOpen:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important; + } + #jotOpen::before { + content: var(--compose-text); + font-size: 15px; + margin-right: 10px; + line-height: 32px; + position: relative; + display: inline; + top: -4px; + } + body.mod-notes #jotOpen::before { + content: var(--new-note-text); + } + body.mod-notes .sectiontop h3::before { + content: '\f023'; + font-family: ForkAwesome; + margin-right: 5px; + } + #jotOpen .fa-pencil-square-o { + font-size: 32px !important; + position: relative; + top: 4px; + } + #topbar-second #nav-short-info { + 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, + .fsuggest-content-wrapper, + .shared-wrapper { + background-color: var(--nav-bg) !important; + background-image: none; + /* frio light border-color */ + } + /* Make Submit Buttons Pretty */ + #adminpage a.btn, + .settings-submit, + button[type="submit"], + input[type="submit"], + #photos-upload-submit { + background-color: var(--link-color) !important; + color: white !important; + border-radius: 8px !important; + border: none !important; + box-shadow: none !important; + } + .settings-submit.form-button-search, + button[type="submit"].form-button-search { + border-radius:50px !important; + margin-top:-.5px !important; + } + #adminpage a.btn:hover, + #adminpage a.btn:focus, + .settings-submit:hover, + .settings-submit:focus, + button[type="submit"]:hover, + button[type="submit"]:focus, + input[type="submit"]:hover, + input[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 { + float: right; + padding: 8px; + appearance: none; + border: none; + } + #delegate-parent .submit::after { + content: ''; + display: block; + clear: both; + } + /* make position of submit buttons in settings consistent */ + .panel-footer { + background-color: var(--nav-bg) !important; + } + .panel-footer button[type="submit"], + .panel-footer input[type="submit"] { + float: right !important; + margin-left: 5px; + } + .panel-footer::after{ + content: ''; + display: block; + clear: both; + } + #addonslist{ + margin-top: 20px; + } + #settings-server button[type="submit"] { + float: right !important; + margin-left: 5px !important; + margin-bottom: 20px !important; + } + #adminpage button[type="sbumit"], + input[type="submit"], + input[name="page_logs"], + input[name="republish_directory"], + input[name="page_tos"]{ + float: right; + padding: 8px; + border: none; + } + .submit::after{ + content: ''; + display: block; + clear: both; + } + #photo-edit-end { + clear: both; + } + /* make textareas resize in the correct direction */ + textarea { + resize: vertical !important; + } + /* Other people profiles */ + #mention-link { + border-radius: 8px !important; + background-color: var(--link-color) !important; + color: #ffffff !important; + /* frio border-color */ + /* frio box-shadow */ + padding: 0 16px !important; + } + #mention-link:hover, + #mention-link:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important; + } + #mention-link span:first-of-type { + float: right; + font-size: 32px; + line-height: 45px; + top: 4px; + } + #mention-link span:first-of-type .fa-2x { + font-size: inherit !important; + } + #mention-link span:last-of-type { + font-size: 15px; + margin-right: 10px; + line-height: 32px; + top: 6px; + position:relative; + } + #contact-edit-status-wrapper { + margin: 15px 0px !important; + border-radius: 10px; + } + #profile-extra-links .btn { + border-radius: 8px !important; + margin-bottom: 10px !important; + } + /* SEARCH RESULTS */ + #search-save { + background-color: var(--link-color) !important; + color: white !important; + border-radius: 8px !important; + padding: 6px 8px !important; + } + #search-save:hover, + #search-save:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important; + } + #search-save .fa-plus::before{ + content: '\f292' !important; + } + #search-save .fa-floppy-o::before { + content: '\f00e' !important; + } + #search-save .fa-floppy-o::before, + #search-save .fa-plus::before { + display: inline-block; + margin-top: 2px; + } + #search-save .fa-floppy-o::after, + #search-save .fa-plus::after{ + content: var(--save-search-text); + font-family: 'Open Sans', Arial, sans-serif; + font-size: 15px; + float: left; + margin-right: 10px; + line-height: 32px; + position: relative; + display: block; + top: -2px; + font-weight: 700; + } + #search-save .fa-floppy-o::after { + content: var(--save-search-text); + } + #search-save .fa-plus::before { + display: inline-block; + margin-top: 2px; + } + #search-save .fa-plus::after { + content: var(--follow-tag-text); + } + /* popovers */ + .popover.hovercard { + border: 1px solid var(--nav-bg) !important; + /* + dark version needs box shadow as outer glow + */ + } + .hover-card-footer { + border-color: #ccc; + background-color: var(--nav-bg); + } + .hovercard.top > .arrow::after { + border-top-color: var(--nav-bg); + } + .hovercard.right > .arrow::after { + border-right-color: var(--nav-bg); + } + .hovercard.bottom > .arrow::after { + border-bottom-color: var(--nav-bg); + } + .hovercard.left > .arrow::after { + border-left-color: var(--nav-bg); + } + /* sidebar widgets */ + aside .widget, + .nav-container .widget { + background-color: var(--background-color) !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + } + aside .badge { + background-color: var(--link-color); + } + /* POSTS */ + .tread-wrapper { + /* frio background-color */ + box-shadow: 0 0px 1px rgba(0,0,0,.5) !important; + border-radius: 10px !important; + } + .wall-item-container { + border-top: none; + } + .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; + } + /* + Dark mode has some extra styling + here light mode does not need + */ + .contact-photo, + .contact-photo-xs { + border-radius: 100% !important; + border: 1px solid #eee !important; + } + /* + Dark mode has some extra styling + here light mode does not need + to the .media-list > li elements + */ +/* + Dark mode has some extra styling + here for the .hovercard element +*/ + .hover-card-pic img.thumbnail { + border-radius: 100% !important; + /* frio background-color */ + /* frio border-color */ + } + p.wall-item-announce, + .media .time, .media .shared-time, + .media .delivery, .media .location, + .media .location a { + font-size: 13px !important; + } + .type-link, .type-video { + padding: 0 !important; + margin: 0 !important; + background-color: rgb(240, 242, 245) !important; + border: 1px solid rgb(208,211,215) !important; + } + .type-link h4, .type-link blockquote, .type-link sup, + .type-video h4, .type-video blockquote, .type-video sup { + padding-left: 10px !important; + padding-right: 10px !important; + } + /* keep mentions and tags from spilling out */ + #profile-page .label, + #profile-page .label a, + .wall-item-bottom .label, + .wall-item-bottom .label a { + display: inline-block !important; + } + /* ACTION BUTTON LABELS */ + .wall-item-actions-row button, + .wall-item-actions-right button { + position: relative; + display: block; + white-space: normal !important; + margin: 0 auto !important; + /* frio -webkit-box-shadow */ + /* frio box-shadow */ + } + .wall-item-actions-row button::after, + .wall-item-actions-right button::after { + font-size: 14px; + font-family: sans-serif; + display: block; + margin-top: 2px; + } + .wall-item-response { + position: relative; + overflow: visible !important; + display: block; + } + .button-comments::after { + content: var(--comment-button-text); + } + .button-announces::after { + content: var(--share-button-text); + } + .share-links .dropdown-toggle::after { + content: var(--share-button-text); + } + .button-votes::after { + content: var(--quote-button-text); + } + .button-likes::after { + content: var(--like-button-text); + } + [id^="dislike-"]::after{ + content: var(--dislike-button-text); + } + .wall-item-actions-right .dropdown-toggle::after, + .more-links .dropdown-toggle::after { + content: var(--more-button-text); + } + /* engagement counts */ + .wall-item-actions-row > button span, + .wall-item-response span { + position: absolute; + text-align: center; + display: block; + background-color: var(--count-bg); + box-shadow: -1px 1px 1px #fff; + border-radius: 4px; + color: var(--count-color); + font-size: 12px; + font-weight: 700; + width: fit-content; + padding: 0px 7px; + left: 55%; + top: 0px; + z-index: 1; + } + /* event response buttons */ + .vote-event:has(button) { + padding-bottom: 135px; + } + .vote-event:has(button) .wall-item-response { + position: absolute; + top: 63px; + } + .vote-event .wall-item-response:empty{ + display: none; + } + .vote-event:has(button) .wall-item-response:nth-of-type(1){ + left: 15px; + } + .vote-event .wall-item-response:nth-of-type(1) .button-event::after, + [id^="attendyes"]::after{ + content: var(--attendyes-button-text); + } + .vote-event:has(button) .wall-item-response:nth-of-type(2){ + left: 105px; + } + .vote-event .wall-item-response:nth-of-type(2) .button-event::after, + [id^="attendno"]::after{ + content: var(--attendno-button-text); + position: relative; + height: 20px; + overflow: hidden; /* or skews mobile button layout */ + } + .vote-event:has(button) .wall-item-response:nth-of-type(3){ + left: 204px; + } + .vote-event .wall-item-response:nth-of-type(3) .button-event::after, + [id^="attendmaybe"]::after{ + content: var(--attendmaybe-button-text); + } + /* 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 { + border-radius: 100% !important; + height: 36px; + width: 36px; + font-size: 27px !important; + padding: 0 6px !important; + background-color: rgba(0,0,0,.1); + } + #jot-modal .modal-header .compose-link:hover, + #jot-modal .modal-header .compose-link:focus { + background-color: rgba(0,0,0,.2); + } + .close { + height: 36px; + width: 36px; + background-color: var(--link-color) !important; + opacity: 1 !important; + color: #fff !important; + border-radius: 100%; + margin-top: 5px; + margin-top: 2px !important; + } + .close:hover, + .close:focus { + box-shadow: inset rgba(0,0,0,.2) !important; + } + .modal-content, + #jot-modal-content, + .wall-item-comment-wrapper { + background-color: #fff !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; + } + #filebrowser .breadcrumb{ + background-color: var(--background-color); + } + .fbrowser .folders button { + background-color: rgba(0,0,0,.1) !important; + color: black !important; + appearance: none; + border: none; + border-radius: 8px; + width: 100%; + margin-bottom: 5px; + } + .fbrowser .folders button:hover, + .fbrowser .folders button:focus { + background-color: rgba(0,0,0,.2) !important; + } + .fbrowser .folders li:hover, + .fbrowser .folders li:focus { + border-color: transparent !important; + background-color: transparent !important; + } + + #jot-title, + #jot-category { + background-color: #fff !important; + } + #profile-jot-text, #profile-jot-wrapper textarea, + #jot-location, + .wall-item-comment-wrapper textarea { + background-color: #fff !important; + } + #jot-text-wrap, #profile-jot-wrapper .dropzone.dz-clickable, + .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; + } + .jot-nav a { + border: none !important; + border-radius: 8px !important; + margin-right: 5px; + } + .jot-nav a:hover, .jot-nav a:focus { + background-color: rgba(128,128,128,.2) !important; + } + .jot-nav .active a { + background-color: transparent !important; + border-radius: 0 !important; + border-bottom: 3px solid var(--link-color) !important; + } + .jot-nav .active a:hover, .jot-nav .active a:focus { + background-color: transparent !important; + } + [id^="comment-edit-preview"], + .comment-edit-preview { + border-radius: 8px !important; + box-shadow: none !important; + background-color: rgba(0,0,0,.1); + } + [id^="comment-edit-preview"]:hover, + [id^="comment-edit-preview"]:focus, + .comment-edit-preview:hover, + .comment-edit-preview:focus { + background-color: rgba(0,0,0,.2) !important; + } + #profile-jot-wrapper .wall-item-container.panel-body.preview { + border: none!important; + margin-top:20px !important; + border-radius: none !important; + background-color: transparent; + } + /* file browser */ + #upload-photo { + background-color: var(--link-color) !important; + color: white !important; + border-radius: 8px !important; + } + #upload-photo:hover, + #upload-photo:focus { + background-color: darkblue !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; + } +/* PROFILE */ + #profile-photo-wrapper { + overflow: visible !important; + padding: 5px; + background-color: #ffffff; + border-radius: 100% + } + aside .widget li { + margin-bottom: 8px; + } + 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 white; + } + aside .widget h3.p-name { + font-size: 32px !important; + text-align: center; + word-break: break-word; + text-shadow: 1px 1px 2px var(--background-color), -1px -1px 2px var(--background-color); + } + aside .vcard .p-addr { + font-weight: 600; + text-align: center; + white-space: break-spaces !important; + background-color: var(--background-color); + border-radius: 8px; + } + aside .vcard .title, + aside .vcard .location, + aside .vcard .key, + aside .vcard .about, + aside .vcard .xmpp, + aside .vcard .matrix, + aside .vcard .homepage { + background-color: var(--background-color); + padding: 5px; + border-radius: 8px; + min-width: 100%; + margin: 10px 0; + } + aside .widget li.selected { + background-color: rgba(128,128,128,.1) !important; + background-image: linear-gradient(var(--menu-background-hover-color),var(--menu-background-hover-color)) !important; + border-color: transparent !important; + border-radius: 8px; + } + aside .widget li.selected a { + font-weight: bold; + } + aside .widget li.selected a:hover { + color: #333; + } + aside .widget li:hover { + background-color:rgba(255,255,255,1) !important; + border-color: transparent !important; + border-radius: 8px; + } + #widget-contacts { + background-color: #ffffff !important; + border-radius: 8px !important; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2) !important; + } + .contact-block-img { + height: 100px !important; + width: 100px !important; + border-radius: 8px !important; + box-shadow: 0 0 1px rgba(0, 0, 0, .2); + margin: 5px; + } + .comment-fake-form { + border: none !important; + background-color: transparent !important; + } + .comment-fake-form textarea { + border-radius: 50px !important; + /* frio background-color */ + /* frio -webkit-box-shadow */ + /* frio box-shadow */ + } + .wall-item-actions button { + font-size: 24px !important; + color: var(--nav-icon-color) !important; + } + .wall-item-actions button:hover { + color: var(--link-color) !important; + } + .wall-item-actions .checkbox { + padding-top: 6px !important; + } + .comment .media-body { + padding: 10px; + background-color: var(--background-color); + border-radius: 20px; + } + .wall-item-actions-row .wall-item-emoji { + font-size: 18px; + line-height: 40px; + } + .navicon { + font-size: 20px; + position: relative; + top: 1px; + } + /* little vcard when you scroll down on profiles */ + #vcard-short-photo-wrapper img, + #nav-short-info .contact-wrapper img { + border-radius: 100% !important; + } + /* Profile Cover Photo */ + .row:has(.coverphoto) aside, + .row:has(.coverphoto) #content { + margin-top: 350px; + } + .row:has(.coverphoto) aside .widget.vcard { + background-color: transparent !important; + } + .coverphoto { + position: fixed; + top: 115px; + left: 0 !important; + right: 0 !important; + z-index: -1; + height: 500px; + overflow: hidden; + } + .coverphoto img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + } + .coverphoto:has(> :last-child:nth-child(2)) img { + height: 50%; + } + .coverphoto:has(> :last-child:nth-child(3)) img { + height: 33.3333%; + } + .coverphoto:has(> :last-child:nth-child(n+4)) img { + height: 25%; + } + /* not obviously clickable or intuitive what it does */ + .plink.u-url { + /* uncomment to outline as a button + -webkit-box-shadow: 0 0 1px rgba(0,0,0,.5); + box-shadow: 0 0 1px rgba(0,0,0,.5); + */ + border-radius: 100%; + position: relative; + padding: 6px 4px; + height: 35px; + width: 35px; + display: block; + } + .plink.u-url:hover { + background-color: rgba(0,0,0,.1) !important; + text-decoration: none !important; + } + .plink.u-url::after { + content: '\f101'; + font-family: ForkAwesome; + color: #666; + } + .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: rgba(128,128,128,.1); + background-image: linear-gradient(var(--menu-background-hover-color),var(--menu-background-hover-color)); +} +.event-buttons .btn { + background-color: var(--link-color); + color: #fff; + border-radius: 100%; + height: 40px; + width: 40px; + line-height: 40px; + font-size: 18px; + padding: 0; + margin-right: 5px; +} + .event-buttons .btn:hover, + .event-buttons .btn:focus { + color: #fff; + box-shadow: inset 0 0 100px rgba(0,0,0,.1); + } + .fc .fc-event { + background-color: var(--link-color); + border: none; + color: white; + } + .fc .fc-month-view .fc-content .fc-title .item-desc:hover, + .fc .fc-month-view .fc-content .fc-title .item-desc:focus { + color: white; + } + .fc .fc-event:hover, + .fc .fc-event:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.2); + } +/* Photo Albums */ +.photo-album-actions .icon-padding, +.photo-edit-link-wrap .icon-padding { + margin-left: 10px !important; +} +.photos-upload-link { + font-size: 28px; + color: var(--link-color) !important; + opacity: 1 !important; + border-radius: 8px; + padding: 0px 8px; +} +#photo-album-link { + opacity: 1 !important; +} +.photos-upload-link i, +#photo-album-link i, +#photo-edit-link i, +#photo-toprofile-link i, +#album-edit-link i, +#album-drop-link i, +.photos-order-link i { + font-size: 24px !important; + color: var(--link-color) !important; + opacity: 1 !important; + border-radius: 100% !important; + padding: 8px 11px !important; + height: 40px; + width: 40px; +} + #photo-edit-link i.fa-image { + padding: 6px 7px !important; + } +.photos-order-link { + margin-top: 5px !important; +} + .photos-upload-link:hover i, + .photos-upload-link:focus i, + #photo-album-link:hover i, + #photo-album-link:focus i, + #photo-edit-link:hover i, + #photo-toprofile-link:hover i, + #photo-toprofile-link:focus i, + #album-edit-link:hover i, + #album-edit-link:focus i, + #album-drop-link:hover i, + #album-drop-link:focus i, + .photos-order-link:hover i, + .photos-upload-link:hover i, + .photos-upload-link:focus i { + background-color: rgba(128,128,128,.1) !important; + } +.photos-content-wrapper .photos-upload-link::before { + content: var(--add-photo-button-text); + font-size: 15px; + vertical-align: middle; + margin-top: -10px; + display: inline-block; +} +.justified-gallery { + overflow: visible !important; + height: auto !important; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: start; +} +.justified-gallery > a, +.justified-gallery > div, +.justified-gallery > figure{ + height: 180px !important; + width: 180px !important; + border: 1px solid #ccc; + position: relative !important; + top: auto !important; + left: auto !important; + border-radius: 8px; + margin: 4px !important; +} +.justified-gallery > .jg-entry-visible > img, +.justified-gallery > .jg-entry-visible > a > img, +.justified-gallery > .jg-entry-visible > svg, +.justified-gallery > .jg-entry-visible > a > svg{ + width: 100% !important; + height: 100% !important; + margin: 0 !important; + top: 0 !important; + left: 0 !important; + object-fit:cover; + object-position: center; +} +#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; + 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; + } +/* ADD-ONS */ +.advancedcontentfilter-content-wrapper table td:nth-of-type(2) { + word-wrap: anywhere; +} +.advancedcontentfilter-content-wrapper pre { + margin-top: 20px; +} +/* MISCELLANEOUS STUFF */ +div#back-to-top { + bottom: 65px; + left: 10px; + background-color: var(--link-color); + color: #ffffff; + width: 50px; + height: 50px; + line-height: 50px; + text-align: center; + font-size: 24px; + border-radius: 100%; +} +#item-delete-selected { + height: 50px; + width: 50px; + line-height: 50px; + font-size: 24px; + background-color: var(--link-color); + border-radius: 100%; + top: 120px; +} + #item-delete-selected:hover, + #item-delete-selected:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.2); + } + /* Profile pics in Messages */ + .event-wrapper .event-owner img, + .mail-conv-wrapper .media .contact-photo-wrapper img, + .mail-list-outside-wrapper .contact-photo-wrapper img { + border-radius: 100%; + } +.modal-backdrop { + background-color: #fff; +} +/* TAGS, CATEGORIES, MENTIONS BUTTONS + ================================== + Restyled to be less obnoxious and tiny + now sized and spaced like they are on Mastodon +*/ +a.tag.label, +.wall-item-container .wall-item-bottom .wall-item-tags span.label { + border-radius: 4px !important; + display: inline-flex !important; + font-size: 12px !important; + font-weight: 500 !important; + padding: 6px 12px !important; + -webkit-text-decoration: none !important; + text-decoration: none !important; + margin: 2px !important; + background-image: none !important; + background-color: transparent !important; + box-shadow: none !important; + color: #0066FF !important; + border: 1px solid #0066FF; +} + .wall-item-bottom .label { + color: inherit; + } + .wall-item-bottom .label a { + color: inherit; + } + /* hide lightning bolt and person icons + pretty sure people know what "#" and "@" mean now + */ + a.tag.label .fa-bolt::before, + .wall-item-bottom .label .fa-bolt::before { + content: ''; + } + .wall-item-bottom .label .fa-user::before{ + content: ''; + } + /* undo hover for entire container*/ + .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label { + filter: grayscale(0.5); + opacity: 0.8; + -webkit-transition: 0s; + -moz-transition: 0s; + -ms-transition: 0s; + transition: 0s; + } + /* replace with hover for individual tag */ + .wall-item-container .wall-item-bottom .wall-item-tags span.label:hover, + .wall-item-container .wall-item-bottom .wall-item-tags span.label:focus, + .wall-item-container .wall-item-bottom .wall-item-tags span.label:focus-within { + filter: grayscale(0) !important; + opacity: 1 !important; + /* probably don't need vendor prefixed anymore but whatever...*/ + -webkit-transition: all 0.25s ease-in-out !important; + -moz-transtion: all 0.25s ease-in-out !important; + -ms-transition: all 0.25s ease-in-out !important; + transition: all 0.25s ease-in-out !important; + } + /* Hashtag Buttons */ + a.tag.label.btn-info, + .wall-item-bottom .wall-item-tags .tag.label.btn-info { + /* inherits everything from above */ + } + a.tag.label.btn-info:hover, a.tag.label.btn-info:focus, + .wall-item-bottom .wall-item-tags .tag.label.btn-info:hover, + .wall-item-bottom .wall-item-tags .tag.label.btn-info:focus { + background-color: #0066FF !important; + color: white !important; + } + /* Category Buttons */ + .wall-item-bottom .wall-item-tags .category.label.btn-success { + border-color: green !important; + color: green !important; + font-size: 0px !important; /* to get rid of parentheses */ + } + /* replace (x) remove with icon button */ + .wall-item-bottom .wall-item-tags .category.label.btn-success a:first-of-type { + font-size: 12px; + } + .wall-item-bottom .wall-item-tags .category.label.btn-success a:last-of-type::after { + content: '\f00d'; + font-family: ForkAwesome; + font-size: 12px; + margin-left: 4px; + } + .wall-item-bottom .wall-item-tags .category.label.btn-success:hover, + .wall-item-bottom .wall-item-tags .category.label.btn-success:focus { + background-color: green !important; + color: white !important; + } + /* when a category is removed need to visually indicate it */ + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success){ + border-color: #ccc !important; + color: #ccc !important; + font-size: 0px !important; + } + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:first-of-type{ + font-size: 12px; + text-decoration: line-through; + } + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type::after { + content: ''; + } + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):hover, + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):focus { + background-color: red !important; + color: white !important; + } + /* @ Mention Buttons */ + .wall-item-bottom .wall-item-tags .mention.label.btn-warning { + border-color: darkgoldenrod !important; + color: darkgoldenrod !important; + } + .wall-item-bottom .wall-item-tags .mention.label.btn-warning:hover, + .wall-item-bottom .wall-item-tags .mention.label.btn-warning:focus { + background-color: goldenrod !important; + border-color: goldenrod !important; + color: white !important; + } +/* Greater than Full-HD Width + =========================== +*/ +@media screen and (min-width: 1921px){ + .coverphoto { + max-width: 1920px; + left: 50% !important; + margin-left: -960px; + border-bottom-right-radius: 10px; + border-bottom-left-radius: 10px; + } +} +/* Small Laptop Screens + Some tablets in Landscape Orientation + ===================================== +*/ +@media screen and (max-width: 1280px) { + #search-box { + width: 18% !important; + } + #search-save { + width: 140px !important; + } +} +/* Large Tablets in Portrait Orientation + ===================================== +*/ +@media screen and (max-width: 990px){ + /* Friendica icon upper left */ + #banner { + display: block !important; + padding: 0 !important; + margin: 8px 10px; + } + #friendica-logo-mask { + display: block !important; + } + /* hide search box - no room */ + #search-box { + display: none; + } + /* show mobile search toggle */ + #topbar-first .navbar-toggle[data-target="#search-mobile"]{ + display: block !important; + position: fixed !important; + left: 100px; + top: 6px; + } + /* force display of mobile search box */ + #search-mobile { + top: 115px !important; + /* frio border-color */ + } + #search-mobile .col-xs-12 { + background-color: var(--nav-bg); + } + #search-mobile.collapse.in, + #search-mobile.collapse.in * { + display: block !important; + } + #topbar-first .navbar-toggle[data-target="aside"] { + position: fixed; + top: 6px; + left: 50px; + } + /* change aside toggle icon */ + .navbar-toggle .fa-ellipsis-v::before, + #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before { + content: "\f152"; + } + body.aside-out .navbar-toggle .fa-ellipsis-v::before, + body.aside-out #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before { + content: "\f191"; + } + #topbar-first .nav > .account { + right: 24px; + } + #jotOpen::before { + content: ''; + margin: 0; + } + #mention-link span:last-of-type { + margin-right: 42px; + } + .offcanvas-right-overlay, + aside::before { + background-color: rgba(255, 255, 255, 0.4); + } + /* Cover Photo Mobile */ + .row:has(.coverphoto) aside { + margin-top: 0px; + } + aside:has(.coverphoto){ + left: -300px !important; + right: auto !important; + display: block !important; + padding-top: 120px; + background-color: transparent !important; + transition-duration: .5s; + z-index: auto; + } + aside.canvas-sliding:has(.coverphoto) { + -webkit-transition: none; + transition: none; + } + aside.canvas-slid:has(.coverphoto) { + left: 0px !important; + right: auto !important; + z-index: 20; + } + .coverphoto.canvas-slid{ + left: 0px !important; + right: 0px !important; + bottom: 0px; + background-color: var(--background-color); + overflow: visible; + } + .coverphoto.canvas-slid::after { + content: ''; + position: absolute; + top: 500px; + left: 0px; + width: 100%; + height: 100%; + display: block; + background-color: var(--background-color); + } +} +/* Most Phones in Portrait Orientation + Large Screen Phones in Landscape Orientation + Some Small tablets in Portrait Orientation + ====================================== +*/ +@media screen and (max-width: 768px), (max-height: 480px) and (max-width: 960px) and (orientation: landscape) { + #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; + } + #search-save .fa-plus::after { + content: var(--follow-button-text); + } + #search-save .fa-floppy-o::after { + content: var(--save-button-text); + } + a.wall-item-name-link, span.fakelink { + font-weight: bold; + } + .wall-item-container iframe { + aspect-ratio: 5/4; + } + /* new mobile layout */ + body { + padding-top: 65px !important; + padding-bottom: 55px !important; + } + + /* Friendica icon upper left */ + #banner { + display: block !important; + padding: 0 !important; + margin: 8px 10px !important; + } + #friendica-logo-mask { + display: block !important; + } + #topbar-first { + top: auto; + bottom: 0; + box-shadow: 2px 0px 5px rgba(0,0,0,.5); + } + #topbar-first .topbar-nav .arrow { + display: none; + } + /* re-reveal the user profile toggle */ + #topbar-first .nav > .account { + position: fixed; + display: block !important; + top: 0; + right: 8px; + } + #topbar-first .nav > .account img { + margin: 0; + } + #topbar-first .nav > .account span.caret { + display: none; + } + /* overlay mobile nav toggle invisibly */ + #topbar-first .offcanvas-right-toggle { + position: fixed; + top: -3px; + right: 7px; + color: transparent; + z-index: 10000; + } + /* move sidebar toggle to bottom bar */ + #topbar-first .navbar-toggle[data-target="aside"]{ + position: fixed; + top: auto; + left: auto; + bottom: 5px; + } + /* change icon */ + .navbar-toggle .fa-ellipsis-v::before, + #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before { + content: "\f152"; + } + body.aside-out .navbar-toggle .fa-ellipsis-v::before, + body.aside-out #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before { + content: "\f191"; + } + /* move search button right */ + #topbar-first .navbar-toggle[data-target="#search-mobile"] { + position: relative !important; + display: block !important; /* show in landscape on phones */ + top: 0; + left: auto; + right: auto; + margin: 0; + } + #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed){ + color: var(--link-color); + border-bottom: 3px solid var(--link-color); + background-color: transparent !important; + border-radius: 0 !important; + margin-top: 0px; + } + #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed) .fa-search::before { + content: '\f00e'; + } + /* fix spacing of icons */ + .topbar ul.nav { + position: absolute !important; + left: 50px !important; + right: 50px !important; + display: flex; + justify-content: space-between; + } + #topbar-first .topbar-nav .nav-segment { + margin: 0px; + } + #search-mobile { + top: 60px !important; + } + /* always show on phones in landscape */ + #search-mobile.collapse.in, + #search-mobile.collapse.in * { + display: block !important; + } + /* app-style notification menu */ + #nav-notifications-menu { + position: fixed; + top: 60px; + bottom: 51px; + left: 0; + right: 0; + width: 100% !important; + min-width: unset; + max-width: unset; + min-height: unset; + max-height: unset !important; + margin: 0 !important; + box-shadow: none; + } + #nav-notifications-menu::before { + content: '\f00d'; + font-family: ForkAwesome; + position: absolute; + top: 8px; + right: 12px; + height: 40px; + width: 40px; + background-color: var(--link-color); + color: white; + font-size: 24px; + border-radius: 100%; + line-height: 40px; + text-align: center; + display: block; + } + #offcanvasUsermenu { + background-color: var(--nav-bg) !important; + } + #offcanvasUsermenu ul.list-group { + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + } + #offcanvasUsermenu ul.list-group li:first-of-type img { + max-width: unset !important; + max-height: unset !important; + height: 40px !important; + width: 40px !important; + border-radius: 100% !important; + } + #offcanvasUsermenu li.divider { + display: none !important; + } + #offcanvasUsermenu li.list-group-item, + #offcanvasUsermenu li.list-group-item a { + border: transparent !important; + background-color: transparent !important; + color: var(--nav-icon-color) !important; + width: 90% !important; + margin: 0 auto; + } + #offcanvasUsermenu li.list-group-item:hover { + background-color: #333 !important; + border-radius: 8px !important; + } + #offcanvasUsermenu li.list-group-item:hover a { + color: #fff !important; + } + #offcanvasUsermenu li.list-group-item:first-of-type:hover { + background-color: revert !important; + } + /* force mobile search in landscape on phones */ + #search-box { + display: none !important; + } + /* position delete button */ + #item-delete-selected { + top: 60px; + right: 10px; + } + /* move top bars around */ + #topbar-second { + top: 0px; + padding: 0; + } + #topbar-second div.container{ + position: absolute; + left: 55px; + right: 55px; + } + #topbar-second #tabmenu { + width: 100%; + } + /* override and show mobile tabs in landscape */ + #topbar-second #tabmenu ul.tabbar.hidden-xs { + display: none !important; + } + #topbar-second #tabmenu ul.tabbar.visible-xs { + display: block !important; + } + #topbar-second ul.tabbar { + text-align: center; + max-width: 100%; + } + #topbar-second ul.tabbar > li:first-of-type { + max-width: 75%; + overflow: hidden; + } + #topbar-second ul.tabbar li:first-of-type ul.tabs { + max-width: 100%; + } + #topbar-second ul.tabbar li:first-of-type ul.tabs li { + width: 100%; + } + #topbar-second ul.tabbar li:first-of-type ul.tabs li a { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + #dropdownMenuTools-xs { + height: 60px; + } + ul.tabs-extended .dropdown.open .fa-chevron-down::before{ + content: '\f077'; + } + #jotOpen, #search-save, #mention-link { + position: fixed; + bottom: 65px; + right: 10px; + border-radius: 100% !important; + height: 50px; + width: 50px !important; + line-height: 50px; + } + #mention-link span:last-of-type { + display: none; + } + #mention-link span:first-of-type { + float: none; + position: relative; + left: -5px; + top: 2px; + } + #search-save .fa-plus::after, + #search-save .fa-floppy-o::after { + display: none; + } + #search-save .fa-plus::before, + #search-save .fa-floppy-o::before { + content: '\f0c7' !important; + } + .fa-edit::before, + .fa-pencil-square-o::before { + content: "\f040"; + } + /* drop-down mobile style*/ + #topbar-second .dropdown-menu { + position: fixed; + top: 58px; + left: 0px; + right: 0px; + bottom: 50px; + width: 100% !important; + overflow: auto !important; + overflow-x: hidden !important; + } + #topbar-second .dropdown-menu li { + height: auto !important; + } + #topbar-second .dropdown-menu li a, + .tabs .dropdown-menu li a { + font-size: 18px !important; + } + .topbar .dropdown-header { + font-size: 18px !important; + } + .topbar .dropdown-header .dropdown-header-link .btn-link { + font-size: 18px !important; + margin-right: 40px; + } + aside.offcanvas-xs { + padding-top: 60px; + padding-bottom: 60px; + } + .coverphoto { + top: 55px; + } + #message-new { + height: 50px; + width: 50px; + background-color: var(--link-color); + line-height: 50px; + font-size: 24px; + text-align: center; + border-radius: 100%; + } + #message-new a { + color: white !important; + opacity: 1; + } + #message-new:hover, + #message-new:focus { + box-shadow: 0 0 100px rgba(0,0,0,.2); + } +} +/* Narrow Screen Phones in Portrait Orientation + ============================================ +*/ +@media screen and (max-width: 400px) and (orientation: portrait) { + /* remove action button labels if screen is too narrow */ + .wall-item-actions-row button::after { + content: '.'; + color: transparent; + } + /* NOTE: cannot simply empty or display none or button alignment gets messed up! */ +} +/* Narrow Screen Phones in Landscape Orientation + ============================================== +*/ +@media screen and (max-height: 400px) and (orientation: landscape) { + #topbar-first { + transition-duration: .5s; + transition-property: bottom; + bottom: -55px; + } + header #banner { + background-color: var(--nav-bg); + border-radius: 8px; + z-index: 1030; + } + #topbar-first .navbar-toggle[data-target="aside"] { + position: fixed !important; + left: 10px; + bottom: 10px; + transition-duration: .5s; + background-color: var(--link-color); + color: white; + height: 50px; + width: 50px; + border-radius: 100%; + line-height: 32px; + } + #topbar-first .navbar-toggle[data-target="#search-mobile"], + #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed) { + position: fixed !important; + top: auto; + bottom: 10px; + right: 10px; + transition-duration: .5s; + background-color: var(--link-color) !important; + color: white; + height: 50px; + width: 50px; + border-radius: 100% !important; + line-height: 32px; + } + #topbar-first .navbar-toggle[data-target="#search-mobile"]:hover, + #topbar-first .navbar-toggle[data-target="#search-mobile"]:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.2); + } + .fa-fw { + width: auto; + } + #topbar-first .offcanvas-right-toggle { + top: -2px; + right: 10px; + padding: 0 !important; + } + #topbar-first .nav > .account { + top: -5px; + right: 5px; + } + #main-menu img { + border: 5px solid var(--link-color); + border-radius: 100%; + box-sizing: unset; + } + #search-mobile { + top: 40% !important; + border: 10px solid var(--link-color); + border-radius: 8px; + left: 50%; + width: 80%; + margin-left: -40%; + box-shadow: 0 0 50px rgba(0,0,0,.75); + } + #search-mobile .col-xs-12 { + background-color: var(--nav-bg); + } + #topbar-second { + transition-duration: .5s; + 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, + 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:focus { + border-radius: 100% !important; + } + #topbar-first .topbar-actions { + z-index: 1070; + } + /* if notifications is left open when phone is rotated */ + #nav-notifications-menu { + top: 0; + bottom: 0; + z-index: 10000; + } + #offcanvasUsermenu { + top: 0px; + } + #offcanvasUsermenu li:first-of-type img { + display: none; + } + #offcanvasUsermenu li:first-of-type { + font-weight: 700; + } + .offcanvas-right-overlay { + top: 0px; + } + .row:has(.coverphoto) #content { + margin-top: 200px; + } + .coverphoto { + top: 0px; + } + } + +/* ===================================================================== + + + USER PREFERS DARK MODE + + + ===================================================================== +*/ +@media (prefers-color-scheme: dark){ + :root{ + --nav-bg: #252728; + --link-color: $link_color; + --nav-icon-color: #B0B3B8; + --background-color: #1C1C1D; + --contentbg-transp: $contentbg_transp; + --font-color: #cccccc; + --font-color-darker: #acacac; + --background-image: $background_image; + --menu-background-hover-color: color-mix(in oklab, var(--link-color) 50%, black); + --border-color: #333333; + --count-color: #ffffff; + --count-bg: var(--link-color); + } +body { + background-color: var(--background-color) !important; + font-size: 15px !important; + padding-top: 130px !important; + font-family: var(--global-font-family); + 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, +.fsuggest-content-wrapper { + color: var(--nav-icon-color); +} +#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; + } +#topbar-first, nav.navbar { + background-color: var(--nav-bg) !important; + color: var(--nav-icon-color) !important; + height: 55px; +} + #topbar-first .topbar-nav .nav-segment { + margin-right: 10px; + } + #topbar-first .nav > li > a:hover:not(.selected) { + background-color: rgba(255,255,255,.1) !important; + border-radius: 8px !important; + } + .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 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, +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; + color: var(--link-color) !important; + } +#topbar-first .nav > li > a.selected:hover, +#topbar-first .nav > li > a.selected:focus, +#topbar-first .nav > li > #main-menu:hover, +#topbar-first .nav > li > #main-menu:focus, +#nav-notification.dropdown.open #nav-notifications-menu-btn:hover, +#nav-notification.dropdown.open #nav-notifications-menu-btn:focus { + background-color: transparent !important; + border-radius: 0 !important; +} + #nav-notification.dropdown.open #nav-notifications-menu-btn .fa-bell::before { + content: '\f0f3'; + color: var(--link-color); + } +ul.tabs li { + font-size: 15px !important; + margin-left: 10px !important; +} + ul.tabs li a { + margin-top: 8px; + color: var(--link-color); + } + ul.tabs li:hover:not(.active) { + border-bottom-width: 0px !important; + } + ul.tabs li:not(.active):hover > a { + background-color: rgba(128,128,128,.1) !important; + background-image: none !important; + border-radius: 8px !important; + color: var(--font-color); + } + .dropdown-menu { + padding-bottom: 15px !important; + background-color: var(--nav-bg) !important; + border: 1px solid var(--background-color) !important; + } + .dropdown-menu li { + margin: 3px 10px; + width: 92% !important; + border-radius: 8px; + } + .dropdown-menu li:hover { + border-color: transparent !important; + } + .dropdown-menu > li > a:hover, + .dropdown-menu > li > a:focus { + background-image: none !important; + border-radius: 8px ; + } + .dropdown-menu li a, + .dropdown-menu li .btn-link { + color: var(--font-color); + } + .dropdown-menu > li.active, + .dropdown-menu > li.active:hover, + .dropdown-menu > li.active:focus { + border-radius: 0; + background-color: transparent; + border-bottom: 4px solid var(--link-color) !important; + } + .dropdown-menu > li.active > a, + .dropdown-menu > li.active:hover > a, + .dropdown-menu > li.active:focus > a { + color: var(--link-color); + background-color: transparent; + background-image: none; + } + .form-control { + background: var(--nav-bg); + color: #fff; + } + .form-control[readonly], + .form-control[disabled], + .fieldset[disabled] .form-control { + background-color: #666; + color: #fff; + opacity: .5; + } + .table-striped > tbody > tr:nth-of-type(2n+1) { + background-color: var(--nav-bg); + } +header #banner { + left: 0 !important; + right: auto !important; + margin-top: 10px; +} + .navbar-brand #logo-img { + margin-top: 20px; + } + .navbar-brand #logo-img, + header #banner #logo-img { + /* SVG Mask is broken in WebKit use Icon Font instead */ + -webkit-mask-image: unset !important; + mask: none !important; + mask-size: unset !important; + mask-composite: unset !important; + mask-mode: unset !important; + background-color: transparent !important; + height: 40px; + width: 40px; + } + .navbar-brand #logo-img::before, + header #banner #logo-img::before { + content: '\f2e6'; + font-family: ForkAwesome; + font-size: 45px; + position: relative; + top: -12px; + left: 0px; + text-shadow: none; + color: var(--link-color); + } + + #navbar-brand-text { + line-height: 40px; + font-weight: 700; + color: var(--link-color) !important; + } + #nav-login::before{ + content: var(--sign-in-text); + } +.topbar ul.nav { + left: 50% !important; + margin-left: -25% !important; + position: relative; +} +#topbar-first .nav > .account img { + border-radius: 100% !important; + box-shadow: 0 0 1px rgba(255,255,255,.1) !important; + height: 40px !important; + width: 40px !important; +} +#search-box { + position: fixed !important; + left: 100px; +} +#topbar-first #search-box .form-search { + height: 40px !important; + font-size: 15px; + background-position: unset; + box-shadow: none !important; +} +#search-box form > div { + background-color: var(--background-color); + border-radius: 50px; +} +#search-box form > div::before { + content: '\f002'; + font-family: ForkAwesome; + position: absolute; + left: 10px; + top: 8px; +} +#search-box .form-control.form-search { + border-radius: 50px !important; + background: transparent !important; + width: 100% !important; +} +#search-box .form-control::placeholder { + color: var(--nav-icon-color) !important; +} +#topbar-first #search-box .btn { + font-size: 0px !important; + height: 32px; + width: 32px; + top: 2px !important; + background-color: black !important; + margin-top: 2px !important; +} +#topbar-first #search-box .btn::before { + content: '\f061'; + font-family: ForkAwesome; + font-size: 15px; + color: var(--nav-icon-color); +} +#nav-user-menu, #nav-notifications-menu { + background-color: var(--nav-bg) !important; + border: 1px solid var(--background-color) !important; +} +#nav-user-menu { + 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, +.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, + .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, +.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; +} +#topbar-first #nav-notifications-menu { + border: 1px solid var(--background-color) !important; +} +#topbar-first #nav-notifications-menu li { + border-color: transparent !important; + box-sizing: border-box; + margin: 10px; + border-radius: 10px !important; + width: 94% !important; +} +#topbar-first #nav-notifications-menu a { + color: var(--font-color); +} +#topbar-first .notification-unseen { + 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; + border-color: transparent !important; +} +#topbar-first .nav > .open > a, +#topbar-first .nav > .open > button { + background-color: transparent; +} + .topbar .dropdown-header { + color: var(--nav-icon-color); + } + #topbar-first .topbar-nav .arrow { + display: none !important; + } + .topbar .dropdown-header .dropdown-header-link .btn-link { + border: 1px solid var(--link-color); + border-radius: 8px; + padding: 5px; + margin-top: -6px; + } + .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; + background-color: var(--nav-bg) !important; + border-color: #333 !important; +} + .btn.btn-primary:hover, + .btn.btn-primary:focus { + border-radius: 8px !important; + } + #dropdownMenuTools { + height: 40px; + width: 40px; + background-color: rgba(255,255,255,.1) !important; + border-radius: 100% !important; + margin-top: 5px !important; + margin-right: 10px !important; + } + #dropdownMenuTools:hover, + #dropdownMenuTools:focus { + background-color: rgba(0,0,0,.1) !important; + } + #jotOpen { + border-radius: 8px !important; + background-color: var(--link-color) !important; + color: #ffffff !important; + border-color: #000 !important; + box-shadow: none !important; + } + #jotOpen:hover, #jotOpen:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important; + } + #jotOpen::before { + content: var(--compose-text); + font-size: 15px; + margin-right: 10px; + line-height: 32px; + position: relative; + display: inline; + top: -4px; + } + body.mod-notes #jotOpen::before { + content: var(--new-note-text); + } + body.mod-notes .sectiontop h3::before { + content: '\f023'; + font-family: ForkAwesome; + margin-right: 5px; + } + #jotOpen .fa-pencil-square-o { + font-size: 32px !important; + position: relative; + top: 4px; + } + #topbar-second #nav-short-info { + 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, + .fsuggest-content-wrapper, + .shared-wrapper { + background-color: var(--nav-bg) !important; + background-image: none; + border-color: #333; + } + /* Make Submit Buttons Pretty */ + #adminpage a.btn, + .settings-submit, + button[type="submit"], + input[type="submit"], + #photos-upload-submit { + background-color: var(--link-color) !important; + color: white !important; + border-radius: 8px !important; + border: none !important; + box-shadow: none !important; + } + .settings-submit.form-button-search, + button[type="submit"].form-button-search { + border-radius:50px !important; + margin-top:-.5px !important; + } + #adminpage a.btn:hover, + #adminpage a.btn:focus, + .settings-submit:hover, + .settings-submit:focus, + button[type="submit"]:hover, + button[type="submit"]:focus, + input[type="submit"]:hover, + input[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 { + float: right; + padding: 8px; + appearance: none; + border: none; + } + #delegate-parent .submit::after { + content: ''; + display: block; + clear: both; + } + /* make position of submit buttons in settings consistent */ + .panel-footer { + background-color: var(--nav-bg) !important; + } + .panel-footer button[type="submit"], + .panel-footer input[type="submit"] { + float: right !important; + margin-left: 5px; + } + .panel-footer::after{ + content: ''; + display: block; + clear: both; + } + #addonslist { + margin-top: 20px; + } + #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"]{ + float: right; + padding: 8px; + border: none; + } + .submit::after{ + content: ''; + display: block; + clear: both; + } + #photo-edit-end { + clear: both; + } +/* Other people profiles */ +#mention-link { + border-radius: 8px !important; + background-color: var(--link-color) !important; + color: #ffffff !important; + border-color: #000 !important; + box-shadow: none !important; + padding: 0 16px !important; +} + #mention-link:hover, + #mention-link:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important; + } + #mention-link span:first-of-type { + float: right; + font-size: 32px; + line-height: 45px; + top: 4px; + } + #mention-link span:first-of-type .fa-2x { + font-size: inherit !important; + } + #mention-link span:last-of-type { + font-size: 15px; + margin-right: 10px; + line-height: 32px; + top: 6px; + position:relative; + } +#contact-edit-status-wrapper { + margin: 15px 0px !important; + border-radius: 10px; +} +#profile-extra-links .btn { + border-radius: 8px !important; + margin-bottom: 10px !important; +} + /* SEARCH RESULTS */ + #search-save { + background-color: var(--link-color) !important; + color: white !important; + border-radius: 8px !important; + padding: 6px 8px !important; + } + #search-save:hover, + #search-save:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important; + } + #search-save .fa-plus::before{ + content: '\f292' !important; + } + #search-save .fa-floppy-o::before { + content: '\f00e' !important; + } + #search-save .fa-floppy-o::before, + #search-save .fa-plus::before { + display: inline-block; + margin-top: 2px; + } + #search-save .fa-floppy-o::after, + #search-save .fa-plus::after{ + content: var(--save-search-text); + font-family: 'Open Sans', Arial, sans-serif; + font-size: 15px; + float: left; + margin-right: 10px; + line-height: 32px; + position: relative; + display: block; + top: -2px; + font-weight: 700; + } + #search-save .fa-floppy-o::after { + content: var(--save-search-text); + } + #search-save .fa-plus::before { + display: inline-block; + margin-top: 2px; + } + #search-save .fa-plus::after { + content: var(--follow-tag-text); + } + /* popovers */ + .popover.hovercard { + border: 1px solid var(--nav-bg) !important; + -webkit-box-shadow: 0 10px 100px rgba(255, 255, 255, 0.25); + -moz-box-shadow: 0 10px 100px rgba(255, 255, 255, 0.25); + box-shadow: 0 10px 100px rgba(255, 255, 255, 0.25); + } + .hover-card-footer { + border-color: #333; + background-color: var(--nav-bg); + } + .hovercard.top > .arrow::after { + border-top-color: var(--nav-bg); + } + .hovercard.right > .arrow::after { + border-right-color: var(--nav-bg); + } + .hovercard.bottom > .arrow::after { + border-bottom-color: var(--nav-bg); + } + .hovercard.left > .arrow::after { + border-left-color: var(--nav-bg); + } +/* sidebar widgets */ +aside .widget, +.nav-container .widget { + background-color: var(--background-color) !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; +} + aside .badge { + background-color: var(--link-color); + } +/* POSTS */ +.tread-wrapper { + background-color: rgb(37, 39, 40) !important; + box-shadow: 0 0px 1px rgba(0,0,0,.5) !important; + border-radius: 10px !important; +} +.wall-item-container { + border-top: none; +} +.wall-item-container .media { + background-color: rgb(37, 39, 40) !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 #333; + border-radius: 8px; + background-color: #000; + } +.well { + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + .contact-photo, + .contact-photo-xs { + 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 .toplevel_item .wall-item-container .wall-item-responses a, +.text-muted, +p.wall-item-announce, +.media .time, +.media .shared-time, +.media .delivery, +.media .location, +.media .location a, +.event-card .event-card-content, +.contact-entry-desc { + color: var(--font-color); +} +.vevent { + box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.1) inset, 0 1px 1px rgba(255, 255, 255, 0.05); +} +.event-card .event-card-title { + color: var(--font-color-lighter); +} +.event-card .event-card-content { + box-shadow: 1.5px 0 0 0 rgba(255, 255, 255, 0.1) inset; +} +.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, +.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.active { + background-color: var(--background-color); +} +.hovercard { + background-color: var(--nav-bg) !important; + border: 1px solid var(--background-color) !important; +} + .hover-card-pic img.thumbnail { + border-radius: 100% !important; + background-color: var(--background-color) !important; + border-color: black !important; + } + p.wall-item-announce, + .media .time, .media .shared-time, + .media .delivery, .media .location, + .media .location a { + font-size: 13px !important; + } + .type-link, .type-video { + padding: 0 !important; + margin: 0 !important; + background-color: rgb(51, 51, 52) !important; + border: 1px solid rgb(101, 104, 108) !important; + } + .type-link h4, .type-link blockquote, .type-link sup, + .type-video h4, .type-video blockquote, .type-video sup { + 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 a { + display: inline-block !important; + } + /* ACTION BUTTON LABELS */ + .wall-item-actions-row button, + .wall-item-actions-right button { + position: relative; + display: block; + white-space: normal !important; + margin: 0 auto !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + } + .wall-item-actions-row button::after, + .wall-item-actions-right button::after { + font-size: 14px; + font-family: sans-serif; + display: block; + margin-top: 2px; + } + .wall-item-response { + position: relative; + padding-top: 4px; + display: block; + } + .button-comments::after { + content: var(--comment-button-text); + } + .button-announces::after { + content: var(--share-button-text); + } + .share-links .dropdown-toggle::after { + content: var(--share-button-text); + } + .button-votes::after { + content: var(--quote-button-text); + } + .button-likes::after { + content: var(--like-button-text); + } + [id^="dislike-"]::after{ + content: var(--dislike-button-text); + } + .wall-item-actions-right .dropdown-toggle::after, + .more-links .dropdown-toggle::after { + content: var(--more-button-text); + } + /* engagement counts */ + .wall-item-actions-row > button span, + .wall-item-response span { + position: absolute; + text-align: center; + display: block; + background-color: var(--count-bg); + box-shadow: -1px 1px 1px #000; + border-radius: 4px; + color: var(--count-color); + font-size: 12px; + font-weight: 700; + width: fit-content; + padding: 0px 7px; + left: 55%; + top: 0px; + z-index: 1; + } +/* .vote-event:not(:has(.wall-item-response:empty)) { */ + .vote-event:has(button) { + padding-bottom: 135px; + } + .vote-event:has(button) .wall-item-response { + position: absolute; + top: 63px; + } + .vote-event .wall-item-response:empty{ + display: none; + } + .vote-event:has(button) .wall-item-response:nth-of-type(1){ + left: 15px; + } + .vote-event .wall-item-response:nth-of-type(1) .button-event::after, + [id^="attendyes"]::after{ + content: var(--attendyes-button-text); + } + .vote-event:has(button) .wall-item-response:nth-of-type(2){ + left: 105px; + } + .vote-event .wall-item-response:nth-of-type(2) .button-event::after, + [id^="attendno"]::after{ + content: var(--attendno-button-text); + position: relative; + height: 20px; + overflow: hidden; /* or skews mobile button layout */ + } + .vote-event:has(button) .wall-item-response:nth-of-type(3){ + left: 204px; + } + .vote-event .wall-item-response:nth-of-type(3) .button-event::after, + [id^="attendmaybe"]::after{ + content: var(--attendmaybe-button-text); + } + /* 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 { + border-radius: 100% !important; + height: 36px; + width: 36px; + font-size: 27px !important; + padding: 0 6px !important; + background-color: rgba(255,255,255,.2); + } + #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; + background-color: var(--link-color) !important; + opacity: 1 !important; + color: #fff !important; + border-radius: 100%; + margin-top: 5px; + margin-top: 2px !important; + } + .close:hover, + .close:focus { + box-shadow: inset rgba(255,255,255,.2) !important; + } +.modal-content, +#jot-modal-content, +.wall-item-comment-wrapper { + background-color: rgb(37,39,40) !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-jot-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: var(--background-color) !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; + border-radius: 8px; + width: 100%; + margin-bottom: 5px; +} + .fbrowser .folders button:hover, + .fbrowser .folders button:focus { + background-color: rgba(255,255,255,.75) !important; + } + .fbrowser .folders li:hover, + .fbrowser .folders li:focus { + border-color: transparent !important; + background-color: transparent !important; +} +#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; +} + #profile-jot-text, #profile-jot-wrapper textarea, + #jot-location, + .wall-item-comment-wrapper textarea { + background-color: rgb(51, 51, 52) !important; + } +#jot-text-wrap, #profile-jot-wrapper .dropzone.dz-clickable, +.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; +} +.jot-nav a { + border: none !important; + border-radius: 8px !important; + margin-right: 5px; +} +.jot-nav a:hover, .jot-nav a:focus { + background-color: rgba(255,255,255,.2) !important; +} +.jot-nav .active a { + background-color: transparent !important; + border-radius: 0 !important; + border-bottom: 3px solid var(--link-color) !important; +} +.jot-nav .active a:hover, .jot-nav .active a:focus { + background-color: transparent !important; +} +[id^="comment-edit-preview"], +.comment-edit-preview { + border-radius: 8px !important; + box-shadow: none !important; + background-color: rgba(255,255,255,.1); +} +[id^="comment-edit-preview"]:hover, +[id^="comment-edit-preview"]:focus, +.comment-edit-preview:hover, +.comment-edit-preview:focus { + background-color: rgba(255,255,255,.2) !important; +} +#profile-jot-wrapper .wall-item-container.panel-body.preview { + border: none !important; + margin-top:20px !important; + border-radius: none !important; + background-color: transparent; +} + /* file browser */ + #upload-photo { + background-color: var(--link-color) !important; + color: white !important; + border-radius: 8px !important; + } + #upload-photo:hover, + #upload-photo:focus { + background-color: darkblue !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; + } + .panel, + .panel-body { + background-color: var(--nav-bg); + border-radius: 10px; + } + .help-block { + color: var(--font-color-darker); + } +/* PROFILE */ +#profile-photo-wrapper { + overflow: visible !important; + padding: 5px; + background-color: var(--background-color); + border-radius: 100% +} +aside .widget, .nav-container .widget { + color: var(--font-color); +} +aside .widget li { + margin-bottom: 8px; +} + aside .widget li a { + color: var(--font-color); + } + aside .widget li a:hover, + aside .widget li a:focus { + color: var(--font-color); + } +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; + word-break: break-word; + text-shadow: 1px 1px 2px var(--background-color), -1px -1px 2px var(--background-color); + } +aside .vcard .p-addr { + font-weight: 600; + text-align: center; + white-space: break-spaces !important; + background-color: var(--background-color); + border-radius: 8px; +} + aside .vcard .title, + aside .vcard .location, + aside .vcard .key, + aside .vcard .about, + aside .vcard .xmpp, + aside .vcard .matrix, + aside .vcard .homepage { + background-color: var(--background-color); + padding: 5px; + border-radius: 8px; + min-width: 100%; + margin: 10px 0; + } +aside .widget li.selected { + background-color: rgba(128,128,128,.1) !important; + background-image: linear-gradient(var(--menu-background-hover-color),var(--menu-background-hover-color)) !important; + border-color: transparent !important; + border-radius: 8px; +} +aside .widget li.selected a { + font-weight: bold; +} + aside .widget li.selected a:hover { + color: #eeeeee; + } +aside .widget li:hover { + background-color:rgba(128,128,128,.2) !important; + border-color: transparent !important; + border-radius: 8px; +} +#widget-contacts { + background-color: rgb(37, 39, 40) !important; + border-radius: 8px !important; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2) !important; +} + .contact-block-img { + height: 100px !important; + width: 100px !important; + border-radius: 8px !important; + box-shadow: 0 0 1px rgba(0, 0, 0, .2); + margin: 5px; + } +.comment-fake-form { + border: none !important; + background-color: transparent !important; +} +.comment-fake-form textarea { + border-radius: 50px !important; + 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; +} + .wall-item-actions button:hover { + color: var(--link-color) !important; + } + .wall-item-actions .checkbox { + padding-top: 6px !important; + } + .comment .media-body { + padding: 10px; + background-color: var(--background-color); + border-radius: 20px; + } + .wall-item-actions-row .wall-item-emoji { + font-size: 18px; + line-height: 40px; + } + .navicon { + font-size: 20px; + position: relative; + top: 1px; + } + /* little vcard when you scroll down on profiles */ + #vcard-short-photo-wrapper img, + #nav-short-info .contact-wrapper img { + border-radius: 100% !important; + } + /* Profile Cover Photo */ + .row:has(.coverphoto) aside, + .row:has(.coverphoto) #content { + margin-top: 350px; + } + .row:has(.coverphoto) aside .widget.vcard, + .row:has(.coverphoto) aside .panel-body { + background-color: transparent !important; + } + .coverphoto { + position: fixed; + top: 115px; + left: 0 !important; + right: 0 !important; + z-index: -1; + height: 500px; + overflow: hidden; + } + .coverphoto img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + } + .coverphoto:has(> :last-child:nth-child(2)) img { + height: 50%; + } + .coverphoto:has(> :last-child:nth-child(3)) img { + height: 33.3333%; + } + .coverphoto:has(> :last-child:nth-child(n+4)) img { + height: 25%; + } + /* not obviously clickable or intuitive what it does */ + .plink.u-url { + /* uncomment to outline as a button + -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); + box-shadow: 0 0 1px rgba(255,255,255,.5); + */ + border-radius: 100%; + position: relative; + padding: 6px 4px; + height: 35px; + width: 35px; + display: block; + } + .plink.u-url:hover { + background-color: rgba(255,255,255,.1) !important; + text-decoration: none !important; + } + .plink.u-url::after { + content: '\f101'; + font-family: ForkAwesome; + color: #666; + } + .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: rgba(128,128,128,.1); + background-image: linear-gradient(var(--menu-background-hover-color),var(--menu-background-hover-color)); +} +.event-buttons .btn { + background-color: var(--link-color); + color: #fff; + border-radius: 100%; + height: 40px; + width: 40px; + line-height: 40px; + font-size: 18px; + padding: 0; + margin-right: 5px; +} + .event-buttons .btn:hover, + .event-buttons .btn:focus { + color: #fff; + box-shadow: inset 0 0 100px rgba(0,0,0,.1); + } + .fc .fc-event { + background-color: var(--link-color); + border: none; + color: white; + } + .fc .fc-month-view .fc-content .fc-title .item-desc:hover, + .fc .fc-month-view .fc-content .fc-title .item-desc:focus { + color: white; + } + .fc .fc-event:hover, + .fc .fc-event:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.2); + } +/* Photo Albums */ +.photo-album-actions .icon-padding, +.photo-edit-link-wrap .icon-padding { + margin-left: 10px !important; +} +.photos-upload-link { + font-size: 28px; + color: var(--link-color) !important; + opacity: 1 !important; + border-radius: 8px; + padding: 0px 8px; +} +#photo-album-link { + opacity: 1 !important; +} +.photos-upload-link i, +#photo-album-link i, +#photo-edit-link i, +#photo-toprofile-link i, +#album-edit-link i, +#album-drop-link i, +.photos-order-link i { + font-size: 24px !important; + color: var(--link-color) !important; + opacity: 1 !important; + border-radius: 100% !important; + padding: 8px 11px !important; + height: 40px; + width: 40px; +} +#photo-edit-link i.fa-image { + padding: 6px 7px !important; +} +.photos-order-link { + margin-top: 5px !important; +} + .photos-upload-link:hover i, + .photos-upload-link:focus i, + #photo-album-link:hover i, + #photo-album-link:focus i, + #photo-edit-link:hover i, + #photo-toprofile-link:hover i, + #photo-toprofile-link:focus i, + #album-edit-link:hover i, + #album-edit-link:focus i, + #album-drop-link:hover i, + #album-drop-link:focus i, + .photos-order-link:hover i, + .photos-upload-link:hover i, + .photos-upload-link:focus i { + background-color: rgba(255,255,255,.1) !important; + } +.photos-content-wrapper .photos-upload-link::before { + content: var(--add-photo-button-text); + font-size: 15px; + vertical-align: middle; + margin-top: -10px; + display: inline-block; +} +.justified-gallery { + overflow: visible !important; + height: auto !important; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: start; +} +.justified-gallery > a, +.justified-gallery > div, +.justified-gallery > figure{ + height: 180px !important; + width: 180px !important; + border: 1px solid #ccc; + position: relative !important; + top: auto !important; + left: auto !important; + border-radius: 8px; + margin: 4px !important; +} +.justified-gallery > .jg-entry-visible > img, +.justified-gallery > .jg-entry-visible > a > img, +.justified-gallery > .jg-entry-visible > svg, +.justified-gallery > .jg-entry-visible > a > svg{ + width: 100% !important; + height: 100% !important; + margin: 0 !important; + top: 0 !important; + left: 0 !important; + object-fit:cover; + object-position: center; +} +#photo-photo { + margin: 0 auto !important; + max-width: 100%; +} +#photos-upload-perms button[data-toggle="modal"] { + background-color: rgba(255,255,255,.2) !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(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; +} +/* MISCELLANEOUS STUFF */ +div#back-to-top { + bottom: 65px; + left: 10px; + background-color: var(--link-color); + color: #ffffff; + width: 50px; + height: 50px; + line-height: 50px; + text-align: center; + font-size: 24px; + border-radius: 100%; +} +#item-delete-selected { + height: 50px; + width: 50px; + line-height: 50px; + font-size: 24px; + background-color: var(--link-color); + border-radius: 100%; + top: 120px; +} + #item-delete-selected:hover, + #item-delete-selected:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.2); + } + /* Profile pics in Messages and Events */ + .event-wrapper .event-owner img, + .mail-conv-wrapper .media .contact-photo-wrapper img, + .mail-list-outside-wrapper .contact-photo-wrapper img { + border-radius: 100%; + } +.modal-backdrop { + background-color: #000; +} +/* TAGS, CATEGORIES, MENTIONS BUTTONS + ================================== + Restyled to be less obnoxious and tiny + now sized and spaced like they are on Mastodon +*/ +a.tag.label, +.wall-item-container .wall-item-bottom .wall-item-tags span.label { + border-radius: 4px !important; + display: inline-flex !important; + font-size: 12px !important; + font-weight: 500 !important; + padding: 6px 12px !important; + -webkit-text-decoration: none !important; + text-decoration: none !important; + margin: 2px !important; + background-image: none !important; + background-color: transparent !important; + box-shadow: none !important; + color: #05d8fb !important; + border: 1px solid #05d8fb; +} + .wall-item-bottom .label { + color: inherit; + } + .wall-item-bottom .label a { + color: inherit; + } + /* hide lightning bolt and person icons + pretty sure people know what "#" and "@" mean now + */ + a.tag.label .fa-bolt::before, + .wall-item-bottom .label .fa-bolt::before { + content: ''; + } + .wall-item-bottom .label .fa-user::before{ + content: ''; + } + /* undo hover for entire container*/ + .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label { + filter: grayscale(0.5); + opacity: 0.8; + -webkit-transition: 0s; + -moz-transition: 0s; + -ms-transition: 0s; + transition: 0s; + } + /* replace with hover for individual tag */ + .wall-item-container .wall-item-bottom .wall-item-tags span.label:hover, + .wall-item-container .wall-item-bottom .wall-item-tags span.label:focus, + .wall-item-container .wall-item-bottom .wall-item-tags span.label:focus-within { + filter: grayscale(0) !important; + opacity: 1 !important; + /* probably don't need vendor prefixed anymore but whatever...*/ + -webkit-transition: all 0.25s ease-in-out !important; + -moz-transtion: all 0.25s ease-in-out !important; + -ms-transition: all 0.25s ease-in-out !important; + transition: all 0.25s ease-in-out !important; + } + /* Hashtag Buttons */ + a.tag.label.btn-info, + .wall-item-bottom .wall-item-tags .tag.label.btn-info { + /* inherits everything from above */ + } + a.tag.label.btn-info:hover, a.tag.label.btn-info:focus, + .wall-item-bottom .wall-item-tags .tag.label.btn-info:hover, + .wall-item-bottom .wall-item-tags .tag.label.btn-info:focus { + background-color: #05d8fb !important; + color: black !important; + } + /* Category Buttons */ + .wall-item-bottom .wall-item-tags .category.label.btn-success { + border-color: limegreen !important; + color: limegreen !important; + font-size: 0px !important; /* to get rid of parentheses */ + } + /* replace (x) remove with icon button */ + .wall-item-bottom .wall-item-tags .category.label.btn-success a:first-of-type { + font-size: 12px; + } + .wall-item-bottom .wall-item-tags .category.label.btn-success a:last-of-type::after { + content: '\f00d'; + font-family: ForkAwesome; + font-size: 12px; + margin-left: 4px; + } + .wall-item-bottom .wall-item-tags .category.label.btn-success:hover, + .wall-item-bottom .wall-item-tags .category.label.btn-success:focus { + background-color: limegreen !important; + color: black !important; + } + /* when a category is removed need to visually indicate it */ + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success){ + border-color: #ccc !important; + color: #ccc !important; + font-size: 0px !important; + } + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:first-of-type{ + font-size: 12px; + text-decoration: line-through; + } + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type::after { + content: ''; + } + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):hover, + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):focus { + background-color: red !important; + color: #ccc !important; + } + /* @ Mention Buttons */ + .wall-item-bottom .wall-item-tags .mention.label.btn-warning { + border-color: gold !important; + color: gold !important; + } + .wall-item-bottom .wall-item-tags .mention.label.btn-warning:hover, + .wall-item-bottom .wall-item-tags .mention.label.btn-warning:focus { + background-color: gold !important; + border-color: gold !important; + color: black !important; + } +/* Greater than Full-HD Width + =========================== +*/ +@media screen and (min-width: 1921px){ + .coverphoto { + max-width: 1920px; + left: 50% !important; + margin-left: -960px; + border-bottom-right-radius: 10px; + border-bottom-left-radius: 10px; + } +} +/* Small Laptop Screens + Some tablets in Landscape Orientation + ===================================== +*/ +@media screen and (max-width: 1280px) { + #search-box { + width: 18% !important; + } + #search-save { + width: 140px !important; + } +} +/* Large Tablets in Portrait Orientation + ===================================== +*/ +@media screen and (max-width: 991px){ + /* Friendica icon upper left */ + #banner { + display: block !important; + padding: 0 !important; + margin: 8px 10px; + } + #friendica-logo-mask { + display: block !important; + } + /* hide search box - no room */ + #search-box { + display: none; + } + /* show mobile search toggle */ + #topbar-first .navbar-toggle[data-target="#search-mobile"]{ + display: block !important; + position: fixed !important; + left: 100px; + top: 6px; + } + /* force display of mobile search box */ + #search-mobile { + top: 110px !important; + border-color: black; + } + #search-mobile .col-xs-12 { + background-color: var(--nav-bg); + } + #search-mobile.collapse.in, + #search-mobile.collapse.in * { + display: block !important; + } + #topbar-first .navbar-toggle[data-target="aside"] { + position: fixed; + top: 6px; + left: 50px; + } + /* change aside toggle icon */ + .navbar-toggle .fa-ellipsis-v::before, + #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before { + content: "\f152"; + } + body.aside-out .navbar-toggle .fa-ellipsis-v::before, + body.aside-out #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before { + content: "\f191"; + } + #topbar-first .nav > .account { + right: 24px; + } + #jotOpen::before { + content: ''; + margin: 0; + } + #mention-link span:last-of-type { + margin-right: 42px; + } + .offcanvas-right-overlay, + aside::before { + background-color: rgba(0, 0, 0, 0.4); + } + /* Cover Photo Mobile */ + .row:has(.coverphoto) aside { + margin-top: 0px; + } + aside:has(.coverphoto){ + left: -300px !important; + right: auto !important; + display: block !important; + padding-top: 120px; + background-color: transparent !important; + transition-duration: .5s; + z-index: auto; + } + aside.canvas-sliding:has(.coverphoto) { + -webkit-transition: none; + transition: none; + } + aside.canvas-slid:has(.coverphoto) { + left: 0px !important; + right: auto !important; + z-index: 20; + } + .coverphoto.canvas-slid{ + left: 0px !important; + right: 0px !important; + bottom: 0px; + background-color: var(--background-color); + overflow: visible; + } + .coverphoto.canvas-slid::after { + content: ''; + position: absolute; + top: 500px; + left: 0px; + width: 100%; + height: 100%; + display: block; + background-color: var(--background-color); + } +} +/* Most Phones in Portrait Orientation + Large Screen Phones in Landscape Orientation + Some Small tablets in Portrait Orientation + ====================================== +*/ +@media screen and (max-width: 768px), (max-height: 480px) and (max-width: 960px) and (orientation: landscape) { + #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; + } + #search-save .fa-plus::after { + content: var(--follow-button-text); + } + #search-save .fa-floppy-o::after { + content: var(--save-button-text); + } + a.wall-item-name-link, span.fakelink { + font-weight: bold; + } + .wall-item-container iframe { + aspect-ratio: 5/4; + } + /* new mobile layout */ + body { + padding-top: 65px !important; + padding-bottom: 55px !important; + } + + /* Friendica icon upper left */ + #banner { + display: block !important; + padding: 0 !important; + margin: 8px 10px !important; + } + #friendica-logo-mask { + display: block !important; + } + #topbar-first { + top: auto; + bottom: 0; + box-shadow: 2px 0px 5px rgba(0,0,0,.5); + } + #topbar-first .topbar-nav .arrow { + display: none; + } + /* re-reveal the user profile toggle */ + #topbar-first .nav > .account { + position: fixed; + display: block !important; + top: 0; + right: 8px; + } + #topbar-first .nav > .account img { + margin: 0; + } + #topbar-first .nav > .account span.caret { + display: none; + } + /* overlay mobile nav toggle invisibly */ + #topbar-first .offcanvas-right-toggle { + position: fixed; + top: -3px; + right: 7px; + color: transparent; + z-index: 10000; + } + /* move sidebar toggle to bottom bar */ + #topbar-first .navbar-toggle[data-target="aside"]{ + position: fixed; + top: auto; + left: auto; + bottom: 5px; + } + /* change icon */ + .navbar-toggle .fa-ellipsis-v::before, + #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before { + content: "\f152"; + } + body.aside-out .navbar-toggle .fa-ellipsis-v::before, + body.aside-out #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before { + content: "\f191"; + } + /* move search button right */ + #topbar-first .navbar-toggle[data-target="#search-mobile"] { + position: relative !important; + display: block !important; /* show in landscape on phones */ + top: 0; + left: auto; + right: auto; + margin: 0; + } + #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed){ + color: var(--link-color); + border-bottom: 3px solid var(--link-color); + background-color: transparent !important; + border-radius: 0 !important; + margin-top: 0px; + } + #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed) .fa-search::before { + content: '\f00e'; + } + /* fix spacing of icons */ + .topbar ul.nav { + position: absolute !important; + left: 50px !important; + right: 50px !important; + display: flex; + justify-content: space-between; + } + #topbar-first .topbar-nav .nav-segment { + margin: 0px; + } + #search-mobile { + top: 60px !important; + } + /* always show on phones in landscape */ + #search-mobile.collapse.in, + #search-mobile.collapse.in * { + display: block !important; + } + /* app-style notification menu */ + #nav-notifications-menu { + position: fixed; + top: 60px; + bottom: 51px; + left: 0; + right: 0; + width: 100% !important; + min-width: unset; + max-width: unset; + min-height: unset; + max-height: unset !important; + margin: 0 !important; + box-shadow: none; + } + #nav-notifications-menu::before { + content: '\f00d'; + font-family: ForkAwesome; + position: absolute; + top: 8px; + right: 12px; + height: 40px; + width: 40px; + background-color: var(--link-color); + color: white; + font-size: 24px; + border-radius: 100%; + line-height: 40px; + text-align: center; + display: block; + } + #offcanvasUsermenu { + background-color: var(--nav-bg) !important; + } + #offcanvasUsermenu ul.list-group { + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + } + #offcanvasUsermenu ul.list-group li:first-of-type img { + max-width: unset !important; + max-height: unset !important; + height: 40px !important; + width: 40px !important; + border-radius: 100% !important; + } + #offcanvasUsermenu li.divider { + display: none !important; + } + #offcanvasUsermenu li.list-group-item, + #offcanvasUsermenu li.list-group-item a { + border: transparent !important; + background-color: transparent !important; + color: var(--nav-icon-color) !important; + width: 90% !important; + margin: 0 auto; + } + #offcanvasUsermenu li.list-group-item:hover { + background-color: #333 !important; + border-radius: 8px !important; + } + #offcanvasUsermenu li.list-group-item:hover a { + color: #fff !important; + } + #offcanvasUsermenu li.list-group-item:first-of-type:hover { + background-color: revert !important; + } + /* force mobile search in landscape on phones */ + #search-box { + display: none !important; + } + /* position delete button */ + #item-delete-selected { + top: 60px; + right: 10px; + } + /* move top bars around */ + #topbar-second { + top: 0px; + padding: 0; + } + #topbar-second div.container{ + position: absolute; + left: 55px; + right: 55px; + } + #topbar-second #tabmenu { + width: 100%; + } + /* override and show mobile tabs in landscape */ + #topbar-second #tabmenu ul.tabbar.hidden-xs { + display: none !important; + } + #topbar-second #tabmenu ul.tabbar.visible-xs { + display: block !important; + } + #topbar-second ul.tabbar { + text-align: center; + max-width: 100%; + } + #topbar-second ul.tabbar > li:first-of-type { + max-width: 75%; + overflow: hidden; + } + #topbar-second ul.tabbar li:first-of-type ul.tabs { + max-width: 100%; + } + #topbar-second ul.tabbar li:first-of-type ul.tabs li { + width: 100%; + } + #topbar-second ul.tabbar li:first-of-type ul.tabs li a { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + #dropdownMenuTools-xs { + height: 60px; + } + ul.tabs-extended .dropdown.open .fa-chevron-down::before{ + content: '\f077'; + } + #jotOpen, #search-save, #mention-link { + position: fixed; + bottom: 65px; + right: 10px; + border-radius: 100% !important; + height: 50px; + width: 50px !important; + line-height: 50px; + border: none !important; + box-shadow: none !important; + } + #mention-link span:last-of-type { + display: none; + } + #mention-link span:first-of-type { + float: none; + position: relative; + left: -5px; + top: 2px; + } + #search-save .fa-plus::after, + #search-save .fa-floppy-o::after { + display: none; + } + #search-save .fa-plus::before, + #search-save .fa-floppy-o::before { + content: '\f0c7' !important; + } + .fa-edit::before, + .fa-pencil-square-o::before { + content: "\f040"; + } + /* drop-down mobile style*/ + #topbar-second .dropdown-menu { + position: fixed; + top: 58px; + left: 0px; + right: 0px; + bottom: 50px; + width: 100% !important; + overflow: auto !important; + overflow-x: hidden !important; + } + #topbar-second .dropdown-menu li { + height: auto !important; + } + #topbar-second .dropdown-menu li a, + .tabs .dropdown-menu li a { + font-size: 18px !important; + } + .topbar .dropdown-header { + font-size: 18px !important; + } + .topbar .dropdown-header .dropdown-header-link .btn-link { + font-size: 18px !important; + margin-right: 40px; + } + aside.offcanvas-xs { + padding-top: 60px; + padding-bottom: 60px; + } + .coverphoto { + top: 55px; + } + #message-new { + height: 50px; + width: 50px; + background-color: var(--link-color); + line-height: 50px; + font-size: 24px; + text-align: center; + border-radius: 100%; + } + #message-new a { + color: white !important; + opacity: 1; + } + #message-new:hover, + #message-new:focus { + box-shadow: 0 0 100px rgba(0,0,0,.2); + } +} +/* Narrow Screen Phones in Portrait Orientation + ============================================ +*/ +@media screen and (max-width: 400px) and (orientation: portrait) { + /* remove action button labels if screen is too narrow */ + .wall-item-actions-row button::after { + content: '.'; + color: transparent; + } + /* NOTE: cannot simply empty or display none or button alignment gets messed up! */ +} +/* Narrow Screen Phones in Landscape Orientation + ============================================== +*/ +@media screen and (max-height: 400px) and (orientation: landscape) { + #topbar-first { + transition-duration: .5s; + transition-property: bottom; + bottom: -55px; + } + header #banner { + background-color: var(--nav-bg); + border-radius: 8px; + z-index: 1030; + } + #topbar-first .navbar-toggle[data-target="aside"] { + position: fixed !important; + left: 10px; + bottom: 10px; + transition-duration: .5s; + background-color: var(--link-color); + color: white; + height: 50px; + width: 50px; + border-radius: 100%; + line-height: 32px; + } + #topbar-first .navbar-toggle[data-target="#search-mobile"], + #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed) { + position: fixed !important; + top: auto; + bottom: 10px; + right: 10px; + transition-duration: .5s; + background-color: var(--link-color); + color: white; + height: 50px; + width: 50px; + border-radius: 100%; + line-height: 32px; + } + #topbar-first .navbar-toggle[data-target="#search-mobile"]:hover, + #topbar-first .navbar-toggle[data-target="#search-mobile"]:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.2); + } + .fa-fw { + width: auto; + } + #topbar-first .offcanvas-right-toggle { + top: 3px; + right: 13px; + } + #main-menu img { + border: 5px solid var(--link-color); + border-radius: 100%; + box-sizing: unset; + } + #search-mobile { + top: 40% !important; + border: 10px solid var(--link-color); + border-radius: 8px; + left: 50%; + width: 80%; + margin-left: -40%; + box-shadow: 0 0 50px rgba(0,0,0,.75); + } + #search-mobile .col-xs-12 { + background-color: var(--nav-bg); + } + #topbar-second { + transition-duration: .5s; + 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, + 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:focus { + border-radius: 100% !important; + } + #topbar-first .topbar-actions { + z-index: 1070; + } + /* if notifications is left open when phone is rotated */ + #nav-notifications-menu { + top: 0; + bottom: 0; + z-index: 10000; + } + #offcanvasUsermenu { + top: 0px; + } + #offcanvasUsermenu li:first-of-type img { + display: none; + } + #offcanvasUsermenu li:first-of-type { + font-weight: 700; + } + .offcanvas-right-overlay { + top: 0px; + } + .row:has(.coverphoto) #content { + margin-top: 200px; + } + .coverphoto { + top: 0px; + left: 0px; + right: 0px; + height: 500px; + } +} +} +/* LOGIN AND INFO SCREENS */ +.mod-home .navbar, +.mod-home #topbar-second{ + background-color: transparent !important; +} +.mod-home #nav-about { + background-color: var(--link-color); + height: 50px; + width: 50px; + color: white !important; + border-radius: 100% !important; + right: 15px; +} + .mod-home #nav-about:hover, +.mod-home #nav-about:focus { + background-color: var(--link-color) !important; + box-shadow: inset 0 0 100px rgba(0,0,0,.1); +} +.mod-home #nav-about .fa-info { + line-height: 24px; + width: auto; + display: block; +} + @media screen and (max-width: 768px){ + .mod-home #nav-about .fa-info { + line-height: 32px; + } + } \ No newline at end of file diff --git a/bookface_auto.php b/bookface_auto.php new file mode 100644 index 0000000..0e3dbce --- /dev/null +++ b/bookface_auto.php @@ -0,0 +1,36 @@ + get($uid, 'frio', 'link_color') ?: ''; +if ($customColor){ + $customColor = new Color(''.$customColor.''); +} +$menu_background_hover_color = 'rgba(128,128,128,.1)'; +$nav_bg = '#ffffff'; +$background_color = '#f2f4f7'; +$link_color = ($customColor) ? '#'.$customColor->getHex() : '#'.$accentColor->getHex(); + // override ugly blue accent color and prevent setting accent to nav or bg color + if ( $link_color == "#1e87c2" || $link_color == $nav_bg || $link_color == $background_color ){ + $link_color = "#0066ff"; + } +$nav_icon_color = '#65686C'; +$background_image = ''; +$contentbg_transp = 100; +$font_color = '#313131'; +$font_color_darker = '#333'; diff --git a/bookface_dark.css b/bookface_dark.css index 4c322e2..9721916 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,9 +1,9 @@ /* Name : Bookface Dark - Version : 1.2 + Version : 1.3 Licence : AGPL - Created on : 26.01.2025 - Author : Kristi H. @kmh@friendica.world feb @feb@loma.ml + Created on : 11 Feb 2025 + Author : Kristi H. @kmh@friendica.world feb @feb@loma.ml Phil phil@loma.ml */ :root { @@ -18,23 +18,45 @@ --background-image: $background_image; --menu-background-hover-color: $menu_background_hover_color; --border-color: #333333; + --count-color: #ffffff; + --count-bg: var(--link-color); + + /* LOCALIZE pseudo-element text below */ + --sign-in-text: 'Sign-In'; + --compose-text: 'Compose'; + --new-note-text: 'New Note'; + --save-search-text: 'Save Search'; + --follow-tag-text: 'Follow Tag'; + --comment-button-text: 'Comment'; + --share-button-text: 'Share'; + --quote-button-text: 'Quote'; + --like-button-text: 'Like'; + --dislike-button-text: 'Dislike'; + --more-button-text: 'More'; + --attendyes-button-text: 'Going'; + --attendno-button-text: 'Can\'t Go'; + --attendmaybe-button-text: 'Maybe'; + --add-photo-button-text: 'Add Photos'; + --follow-button-text: 'Follow'; + --save-button-text: 'Save'; } body { background-color: var(--background-color) !important; font-size: 15px !important; - padding-top: 125px !important; + 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, -nav.navbar .nav > li > button { - color: #B0B3B8 !important; - +nav.navbar .nav > li > button{ + color: var(--nav-icon-color) !important; } #topbar-first, nav.navbar { background-color: var(--nav-bg) !important; - color: #B0B3B8 !important; + color: var(--nav-icon-color) !important; + height: 55px; } #topbar-first .topbar-nav .nav-segment { margin-right: 10px; @@ -50,55 +72,88 @@ nav.navbar .nav > li > button { #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, nav.navbar .nav > li > button:focus { - background-color: rgba(255,255,255,.1) !important; - border-radius: 8px !important; + background-color: rgba(255,255,255,.1) !important; + border-radius: 8px !important; } -#topbar-first .nav > li > a.selected { - border-bottom: 3px solid var(--link-color) !important; - color: var(--link-color) !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; + color: var(--link-color) !important; + } #topbar-first .nav > li > a.selected:hover, +#topbar-first .nav > li > a.selected:focus, #topbar-first .nav > li > #main-menu:hover, -#topbar-first .nav > li > #main-menu:focus { +#topbar-first .nav > li > #main-menu:focus, +#nav-notification.dropdown.open #nav-notifications-menu-btn:hover, +#nav-notification.dropdown.open #nav-notifications-menu-btn:focus { background-color: transparent !important; border-radius: 0 !important; } + #nav-notification.dropdown.open #nav-notifications-menu-btn .fa-bell::before { + content: '\f0f3'; + color: var(--link-color); + } ul.tabs li { font-size: 15px !important; margin-left: 10px !important; -} -ul.tabs li.active { - border-color: var(--link-color) !important; } ul.tabs li a { margin-top: 8px; - color: var(--link-color) !important; + color: var(--link-color); } - ul.tabs li:hover:not(.active) { - border-bottom-width: 0px !important; - } - ul.tabs li:hover:not(.active) a { - background-color: rgba(255,255,255,.1) !important; - border-radius: 8px !important; - } + ul.tabs li:not(.active):hover { + border-bottom-width: 0px !important; + } + ul.tabs li:not(.active):hover > a { + background-color: rgba(128,128,128,.1) !important; + background-image: none !important; + border-radius: 8px !important; + color: var(--font-color); + } .dropdown-menu { padding-bottom: 15px !important; background-color: var(--nav-bg) !important; border: 1px solid var(--background-color) !important; } - .dropdown-menu li { - margin: 10px; - width: 92% !important; - border-radius: 8px; - } - .dropdown-menu li:hover { - border-color: transparent !important; - } + .dropdown-menu li { + margin: 3px 10px; + width: 92% !important; + border-radius: 8px; + } + .dropdown-menu li:hover { + border-color: transparent !important; + } + .dropdown-menu > li > a:hover, + .dropdown-menu > li > a:focus { + background-image: none !important; + border-radius: 8px ; + } + .dropdown-menu > li.active, + .dropdown-menu > li.active:hover, + .dropdown-menu > li.active:focus { + border-radius: 0; + background-color: transparent; + border-bottom: 4px solid var(--link-color) !important; + } + .dropdown-menu > li.active > a, + .dropdown-menu > li.active:hover > a, + .dropdown-menu > li.active:focus > a { + color: var(--link-color); + background-color: transparent; + background-image: none; + } .form-control { background: var(--nav-bg); color: #fff; @@ -116,20 +171,42 @@ ul.tabs li.active { header #banner { left: 0 !important; right: auto !important; + margin-top: 10px; } - header #banner #logo-img, - .navbar-brand #logo-img { - background-color: var(--link-color) !important; - height: 40px !important; - width: 40px !important; - } - #navbar-brand-text { + .navbar-brand #logo-img { + margin-top: 20px; + } + .navbar-brand #logo-img, + header #banner #logo-img { + /* SVG Mask is broken in WebKit use Icon Font instead */ + -webkit-mask-image: unset !important; + mask: none !important; + mask-size: unset !important; + mask-composite: unset !important; + mask-mode: unset !important; + background-color: transparent !important; + height: 40px; + width: 40px; + } + .navbar-brand #logo-img::before, + header #banner #logo-img::before { + content: '\f2e6'; + font-family: ForkAwesome; + font-size: 45px; + position: relative; + top: -12px; + left: 0px; + text-shadow: none; + color: var(--link-color); + } + + #navbar-brand-text { line-height: 40px; font-weight: 700; color: var(--link-color) !important; } #nav-login::before{ - content: 'Sign-In'; + content: var(--sign-in-text); } .topbar ul.nav { left: 50% !important; @@ -153,7 +230,7 @@ header #banner { box-shadow: none !important; } #search-box form > div { - background-color: #333334; + background-color: var(--background-color); border-radius: 50px; } #search-box form > div::before { @@ -169,7 +246,7 @@ header #banner { width: 100% !important; } #search-box .form-control::placeholder { - color: #B0B3B8 !important; + color: var(--nav-icon-color) !important; } #topbar-first #search-box .btn { font-size: 0px !important; @@ -183,7 +260,7 @@ header #banner { content: '\f061'; font-family: ForkAwesome; font-size: 15px; - color: #B0B3B8; + color: var(--nav-icon-color); } #nav-user-menu, #nav-notifications-menu { background-color: var(--nav-bg) !important; @@ -201,7 +278,7 @@ header #banner { .account .dropdown-menu li .btn-link, .contact-photo-wrapper .dropdown-menu li a, .contact-photo-wrapper .dropdown-menu li .btn-link { - color: #B0B3B8 !important; + color: var(--nav-icon-color) !important; border-color: var(--nav-bg) !important; } .nav-pills .dropdown-menu li > a:hover, @@ -221,16 +298,24 @@ header #banner { .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; +} #topbar-first #nav-notifications-menu { border: 1px solid var(--background-color) !important; } #topbar-first #nav-notifications-menu li { - border-color: transparent !important; -box-sizing: border-box; - margin: 10px; - border-radius: 10px !important; - width: 94% !important; + border-color: transparent !important; + box-sizing: border-box; + margin: 10px; + border-radius: 10px !important; + width: 94% !important; } #topbar-first .notification-unseen { background-color: rgba(255,255,255,.2) !important @@ -239,9 +324,26 @@ box-sizing: border-box; background-color:rgba(128,128,128,.2) !important; border-color: transparent !important; } + .topbar .dropdown-header { + color: var(--nav-icon-color); + } + #topbar-first .topbar-nav .arrow { + display: none !important; + } + .topbar .dropdown-header .dropdown-header-link .btn-link { + border: 1px solid var(--link-color); + border-radius: 8px; + padding: 5px; + margin-top: -6px; + } + .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 { - height: 60px !important; - background-color: var(--nav-bg) !important; + top: 55px; + height: 60px !important; + background-color: var(--nav-bg) !important; border-color: #333 !important; } .btn.btn-primary:hover, @@ -271,7 +373,7 @@ box-sizing: border-box; box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important; } #jotOpen::before { - content: 'New Post'; + content: var(--compose-text); font-size: 15px; margin-right: 10px; line-height: 32px; @@ -279,6 +381,14 @@ box-sizing: border-box; display: inline; top: -4px; } + body.mod-notes #jotOpen::before { + content: var(--new-note-text); + } + body.mod-notes .sectiontop h3::before { + content: '\f023'; + font-family: ForkAwesome; + margin-right: 5px; + } #jotOpen .fa-pencil-square-o { font-size: 32px !important; position: relative; @@ -287,6 +397,32 @@ box-sizing: border-box; #topbar-second #nav-short-info { 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, + .fsuggest-content-wrapper, + .shared-wrapper { + background-color: var(--nav-bg) !important; + background-image: none; + border-color: #333; + } /* Make Submit Buttons Pretty */ #adminpage a.btn, .settings-submit, @@ -336,7 +472,7 @@ box-sizing: border-box; float: right !important; margin-left: 5px; } - .panel-footer::after { + .panel-footer::after{ content: ''; display: block; clear: both; @@ -349,55 +485,39 @@ box-sizing: border-box; margin-left: 5px !important; margin-bottom: 20px !important; } - #adminpage button[type="submit"], - input[type="submit"], + #adminpage button[type="submit"], + input[type="submit"], input[name="page_logs"], input[name="republish_directory"], input[name="page_tos"]{ float: right; - padding: 8px; + padding: 8px; + border: none; } .submit::after{ content: ''; display: block; clear: both; } - /* Compose Window */ - #upload-photo { - background-color: var(--link-color) !important; - color: white !important; - border-radius: 8px !important; - } - #upload-photo:hover, - #upload-photo:focus { - background-color: darkblue !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; - } + #photo-edit-end { + clear: both; + } + /* make textareas resize in the correct direction */ + textarea { + resize: vertical !important; + } /* Other people profiles */ #mention-link { -border-radius: 8px !important; - background-color: var(--link-color) !important; - color: #ffffff !important; - border-color: #000 !important; - box-shadow: none !important; - padding: 0 16px !important; + border-radius: 8px !important; + background-color: var(--link-color) !important; + color: #ffffff !important; + border-color: #000 !important; + box-shadow: none !important; + padding: 0 16px !important; } #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; @@ -447,7 +567,7 @@ border-radius: 8px !important; } #search-save .fa-floppy-o::after, #search-save .fa-plus::after{ - content: 'Save Search'; + content: var(--save-search-text); font-family: 'Open Sans', Arial, sans-serif; font-size: 15px; float: left; @@ -458,17 +578,39 @@ border-radius: 8px !important; top: -2px; font-weight: 700; } - #search-save .fa-floppy-o::after { - content: 'Save Search'; + content: var(--save-search-text); } #search-save .fa-plus::before { display: inline-block; margin-top: 2px; } #search-save .fa-plus::after { - content: 'Follow Tag'; + content: var(--follow-tag-text); } + /* popovers */ + .popover.hovercard { + border: 1px solid var(--nav-bg) !important; + -webkit-box-shadow: 0 10px 100px rgba(255, 255, 255, 0.25); + -moz-box-shadow: 0 10px 100px rgba(255, 255, 255, 0.25); + box-shadow: 0 10px 100px rgba(255, 255, 255, 0.25); + } + .hover-card-footer { + border-color: #333; + background-color: var(--nav-bg); + } + .hovercard.top > .arrow::after { + border-top-color: var(--nav-bg); + } + .hovercard.right > .arrow::after { + border-right-color: var(--nav-bg); + } + .hovercard.bottom > .arrow::after { + border-bottom-color: var(--nav-bg); + } + .hovercard.left > .arrow::after { + border-left-color: var(--nav-bg); + } /* sidebar widgets */ aside .widget, .nav-container .widget { @@ -477,11 +619,17 @@ aside .widget, -moz-box-shadow: none !important; box-shadow: none !important; } -/* Posts */ + aside .badge { + background-color: var(--link-color); + } +/* POSTS */ .tread-wrapper { - background-color: rgb(37, 39, 40) !important; - box-shadow: 0 0px 1px rgba(0,0,0,.5) !important; - border-radius: 10px !important; + background-color: rgb(37, 39, 40) !important; + box-shadow: 0 0px 1px rgba(0,0,0,.5) !important; + border-radius: 10px !important; +} +.wall-item-container { + border-top: none; } .wall-item-container .media { background-color: rgb(37, 39, 40) !important; @@ -506,6 +654,11 @@ aside .widget, border-radius: 100% !important; border: 1px solid var(--nav-bg) !important; } +.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; @@ -559,28 +712,29 @@ aside .widget, .wall-item-response { position: relative; padding-top: 4px; + display: block; } .button-comments::after { - content: 'Comment'; + content: var(--comment-button-text); } .button-announces::after { - content: 'Share'; + content: var(--share-button-text); } .share-links .dropdown-toggle::after { - content: 'Share'; + content: var(--share-button-text); } .button-votes::after { - content: 'Quote'; + content: var(--quote-button-text); } .button-likes::after { - content: 'Like'; + content: var(--like-button-text); } [id^="dislike-"]::after{ - content: 'Dislike'; + content: var(--dislike-button-text); } .wall-item-actions-right .dropdown-toggle::after, .more-links .dropdown-toggle::after { - content: 'More'; + content: var(--more-button-text); } /* engagement counts */ .wall-item-actions-row > button span, @@ -588,10 +742,10 @@ aside .widget, position: absolute; text-align: center; display: block; - background-color: var(--link-color); + background-color: var(--count-bg); box-shadow: -1px 1px 1px #000; border-radius: 4px; - color: #fff; + color: var(--count-color); font-size: 12px; font-weight: 700; width: fit-content; @@ -600,40 +754,40 @@ aside .widget, top: 0px; z-index: 1; } - /* this is some freaking ALCHEMY! */ - .vote-event:not(:has(.wall-item-response:empty)) { + /* Event Response Buttons */ + .vote-event:has(button) { padding-bottom: 135px; } - .vote-event .wall-item-response { + .vote-event:has(button) .wall-item-response { position: absolute; top: 63px; } .vote-event .wall-item-response:empty{ display: none; } - .vote-event .wall-item-response:nth-of-type(1){ + .vote-event:has(button) .wall-item-response:nth-of-type(1){ left: 15px; } .vote-event .wall-item-response:nth-of-type(1) .button-event::after, [id^="attendyes"]::after{ - content: 'Going'; + content: var(--attendyes-button-text); } - .vote-event .wall-item-response:nth-of-type(2){ + .vote-event:has(button) .wall-item-response:nth-of-type(2){ left: 105px; } .vote-event .wall-item-response:nth-of-type(2) .button-event::after, - [id^="attendno"]::after { - content: 'Can\'t Go'; + [id^="attendno"]::after{ + content: var(--attendno-button-text); position: relative; height: 20px; overflow: hidden; /* or skews mobile button layout */ } - .vote-event .wall-item-response:nth-of-type(3){ + .vote-event:has(button) .wall-item-response:nth-of-type(3){ left: 204px; } .vote-event .wall-item-response:nth-of-type(3) .button-event::after, - [id^="attendmaybe"]::after { - content: 'Maybe'; + [id^="attendmaybe"]::after{ + content: var(--attendmaybe-button-text); } /* prevent "Like Like" and "Dislike Dislike" on photos */ #photo-view-wrapper .wall-item-actions .button-likes { @@ -743,8 +897,8 @@ aside .widget, #jot-category { background-color: rgb(51,51,52) !important; } - #profile-jot-text, #profile-jot-wrapper textarea, - #jot-location, + #profile-jot-text, #profile-jot-wrapper textarea, + #jot-location, .wall-item-comment-wrapper textarea { background-color: rgb(51, 51, 52) !important; } @@ -792,11 +946,33 @@ aside .widget, } #profile-jot-wrapper .wall-item-container.panel-body.preview { border: none !important; - margin-top: 20px !important; + margin-top:20px !important; border-radius: none !important; background-color: transparent; } -/* Profile */ + /* file browser */ + #upload-photo { + background-color: var(--link-color) !important; + color: white !important; + border-radius: 8px !important; + } + #upload-photo:hover, + #upload-photo:focus { + background-color: darkblue !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; + } +/* PROFILE */ #profile-photo-wrapper { overflow: visible !important; padding: 5px; @@ -815,14 +991,31 @@ aside .widget h3.p-name { font-size: 32px !important; text-align: center; word-break: break-word; -} + text-shadow: 1px 1px 2px var(--background-color), -1px -1px 2px var(--background-color); + } aside .vcard .p-addr { font-weight: 600; text-align: center; white-space: break-spaces !important; + background-color: var(--background-color); + border-radius: 8px; } + aside .vcard .title, + aside .vcard .location, + aside .vcard .key, + aside .vcard .about, + aside .vcard .xmpp, + aside .vcard .matrix, + aside .vcard .homepage { + background-color: var(--background-color); + padding: 5px; + border-radius: 8px; + min-width: 100%; + margin: 10px 0; + } aside .widget li.selected { background-color: var(--menu-background-hover-color) !important; + /* auto has background-image here */ border-color: transparent !important; border-radius: 8px; } @@ -830,7 +1023,7 @@ aside .widget li.selected a { font-weight: bold; } aside .widget li:hover { - background-color: rgba(128,128,128,.2) !important; + background-color:rgba(128,128,128,.2) !important; border-color: transparent !important; border-radius: 8px; } @@ -853,12 +1046,12 @@ aside .widget li:hover { .comment-fake-form textarea { border-radius: 50px !important; background-color: rgb(51, 51, 52) !important; - box-shadow: none !important; -webkit-box-shadow: none !important; + box-shadow: none !important; } .wall-item-actions button { font-size: 24px !important; - color: #B0B3B8 !important; + color: var(--nav-icon-color) !important; } .wall-item-actions button:hover { color: var(--link-color) !important; @@ -868,7 +1061,7 @@ aside .widget li:hover { } .comment .media-body { padding: 10px; - background-color: rgb(51, 51, 52); + background-color: var(--background-color); border-radius: 20px; } .wall-item-actions-row .wall-item-emoji { @@ -880,10 +1073,49 @@ aside .widget li:hover { position: relative; top: 1px; } + /* little vcard when you scroll down on profiles */ + #vcard-short-photo-wrapper img, + #nav-short-info .contact-wrapper img { + border-radius: 100% !important; + } + /* Profile Cover Photo */ + .row:has(.coverphoto) aside, + .row:has(.coverphoto) #content { + margin-top: 350px; + } + .row:has(.coverphoto) aside .widget.vcard { + background-color: transparent !important; + } + .coverphoto { + position: fixed; + top: 115px; + left: 0 !important; + right: 0 !important; + z-index: -1; + height: 500px; + overflow: hidden; + } + .coverphoto img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + } + .coverphoto:has(> :last-child:nth-child(2)) img { + height: 50%; + } + .coverphoto:has(> :last-child:nth-child(3)) img { + height: 33.3333%; + } + .coverphoto:has(> :last-child:nth-child(n+4)) img { + height: 25%; + } /* not obviously clickable or intuitive what it does */ .plink.u-url { + /* uncomment to outline as a button -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); box-shadow: 0 0 1px rgba(255,255,255,.5); + */ border-radius: 100%; position: relative; padding: 6px 4px; @@ -891,7 +1123,7 @@ aside .widget li:hover { width: 35px; display: block; } - .plink.ul-url:hover { + .plink.u-url:hover { background-color: rgba(255,255,255,.1) !important; text-decoration: none !important; } @@ -910,7 +1142,37 @@ aside .widget li:hover { /* Calendar */ .fc-unthemed td.fc-today { background-color: var(--menu-background-hover-color); + /* auto has background-image here */ } +.event-buttons .btn { + background-color: var(--link-color); + color: #fff; + border-radius: 100%; + height: 40px; + width: 40px; + line-height: 40px; + font-size: 18px; + padding: 0; + margin-right: 5px; +} + .event-buttons .btn:hover, + .event-buttons .btn:focus { + color: #fff; + box-shadow: inset 0 0 100px rgba(0,0,0,.1); + } + .fc .fc-event { + background-color: var(--link-color); + border: none; + color: white; + } + .fc .fc-month-view .fc-content .fc-title .item-desc:hover, + .fc .fc-month-view .fc-content .fc-title .item-desc:focus { + color: white; + } + .fc .fc-event:hover, + .fc .fc-event:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.2); + } /* Photo Albums */ .photo-album-actions .icon-padding, .photo-edit-link-wrap .icon-padding { @@ -964,7 +1226,7 @@ aside .widget li:hover { background-color: rgba(255,255,255,.1) !important; } .photos-content-wrapper .photos-upload-link::before { - content: 'Add Photos'; + content: var(--add-photo-button-text); font-size: 15px; vertical-align: middle; margin-top: -10px; @@ -972,18 +1234,23 @@ aside .widget li:hover { } .justified-gallery { overflow: visible !important; + height: auto !important; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: start; } .justified-gallery > a, .justified-gallery > div, .justified-gallery > figure{ - height: 115px !important; - width: 115px !important; + height: 180px !important; + width: 180px !important; border: 1px solid #ccc; position: relative !important; top: auto !important; left: auto !important; border-radius: 8px; - margin: 1px !important; + margin: 4px !important; } .justified-gallery > .jg-entry-visible > img, .justified-gallery > .jg-entry-visible > a > img, @@ -999,6 +1266,7 @@ aside .widget li:hover { } #photo-photo { margin: 0 auto !important; + max-width: 100%; } #photos-upload-perms button[data-toggle="modal"] { background-color: rgba(255,255,255,.2) !important; @@ -1020,6 +1288,176 @@ aside .widget li:hover { .advancedcontentfilter-content-wrapper pre { margin-top: 20px; } +/* MISCELLANEOUS STUFF */ +div#back-to-top { + bottom: 65px; + left: 10px; + background-color: var(--link-color); + color: #ffffff; + width: 50px; + height: 50px; + line-height: 50px; + text-align: center; + font-size: 24px; + border-radius: 100%; +} +#item-delete-selected { + height: 50px; + width: 50px; + line-height: 50px; + font-size: 24px; + background-color: var(--link-color); + border-radius: 100%; + top: 120px; +} + #item-delete-selected:hover, + #item-delete-selected:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.2); + } + /* Profile pics in Messages and Events */ + .event-wrapper .event-owner img, + .mail-conv-wrapper .media .contact-photo-wrapper img, + .mail-list-outside-wrapper .contact-photo-wrapper img { + border-radius: 100%; + } +.modal-backdrop { + background-color: #000; +} +/* TAGS, CATEGORIES, MENTIONS BUTTONS + ================================== + Restyled to be less obnoxious and tiny + now sized and spaced like they are on Mastodon +*/ +a.tag.label, +.wall-item-container .wall-item-bottom .wall-item-tags span.label { + border-radius: 4px !important; + display: inline-flex !important; + font-size: 12px !important; + font-weight: 500 !important; + padding: 6px 12px !important; + -webkit-text-decoration: none !important; + text-decoration: none !important; + margin: 2px !important; + background-image: none !important; + background-color: transparent !important; + box-shadow: none !important; + color: #05d8fb !important; + border: 1px solid #05d8fb; +} + .wall-item-bottom .label { + color: inherit; + } + .wall-item-bottom .label a { + color: inherit; + } + /* hide lightning bolt and person icons + pretty sure people know what "#" and "@" mean now + */ + a.tag.label .fa-bolt::before, + .wall-item-bottom .label .fa-bolt::before { + content: ''; + } + .wall-item-bottom .label .fa-user::before{ + content: ''; + } + /* undo hover for entire container*/ + .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label { + filter: grayscale(0.5); + opacity: 0.8; + -webkit-transition: 0s; + -moz-transition: 0s; + -ms-transition: 0s; + transition: 0s; + } + /* replace with hover for individual tag */ + .wall-item-container .wall-item-bottom .wall-item-tags span.label:hover, + .wall-item-container .wall-item-bottom .wall-item-tags span.label:focus, + .wall-item-container .wall-item-bottom .wall-item-tags span.label:focus-within { + filter: grayscale(0) !important; + opacity: 1 !important; + /* probably don't need vendor prefixed anymore but whatever...*/ + -webkit-transition: all 0.25s ease-in-out !important; + -moz-transtion: all 0.25s ease-in-out !important; + -ms-transition: all 0.25s ease-in-out !important; + transition: all 0.25s ease-in-out !important; + } + /* Hashtag Buttons */ + a.tag.label.btn-info, + .wall-item-bottom .wall-item-tags .tag.label.btn-info { + /* inherits everything from above */ + } + a.tag.label.btn-info:hover, a.tag.label.btn-info:focus, + .wall-item-bottom .wall-item-tags .tag.label.btn-info:hover, + .wall-item-bottom .wall-item-tags .tag.label.btn-info:focus { + background-color: #05d8fb !important; + color: black !important; + } + /* Category Buttons */ + .wall-item-bottom .wall-item-tags .category.label.btn-success { + border-color: limegreen !important; + color: limegreen !important; + font-size: 0px !important; /* to get rid of parentheses */ + } + /* replace (x) remove with icon button */ + .wall-item-bottom .wall-item-tags .category.label.btn-success a:first-of-type { + font-size: 12px; + } + .wall-item-bottom .wall-item-tags .category.label.btn-success a:last-of-type::after { + content: '\f00d'; + font-family: ForkAwesome; + font-size: 12px; + margin-left: 4px; + } + .wall-item-bottom .wall-item-tags .category.label.btn-success:hover, + .wall-item-bottom .wall-item-tags .category.label.btn-success:focus { + background-color: limegreen !important; + color: black !important; + } + /* when a category is removed need to visually indicate it */ + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success){ + border-color: #ccc !important; + color: #ccc !important; + font-size: 0px !important; + } + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:first-of-type{ + font-size: 12px; + text-decoration: line-through; + } + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type::after { + content: ''; + } + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):hover, + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):focus { + background-color: red !important; + color: #ccc !important; + } + /* @ Mention Buttons */ + .wall-item-bottom .wall-item-tags .mention.label.btn-warning { + border-color: gold !important; + color: gold !important; + } + .wall-item-bottom .wall-item-tags .mention.label.btn-warning:hover, + .wall-item-bottom .wall-item-tags .mention.label.btn-warning:focus { + background-color: gold !important; + border-color: gold !important; + color: black !important; + } +/* Greater than Full-HD Width + =========================== +*/ +@media screen and (min-width: 1921px){ + .coverphoto { + max-width: 1920px; + left: 50% !important; + margin-left: -960px; + border-bottom-right-radius: 10px; + border-bottom-left-radius: 10px; + } +} +/* Small Laptop Screens + Some tablets in Landscape Orientation + ===================================== +*/ @media screen and (max-width: 1280px) { #search-box { width: 18% !important; @@ -1028,10 +1466,59 @@ aside .widget li:hover { width: 140px !important; } } -@media screen and (max-width: 991px) { +/* Large Tablets in Portrait Orientation + ===================================== +*/ +@media screen and (max-width: 991px){ + /* Friendica icon upper left */ + #banner { + display: block !important; + padding: 0 !important; + margin: 8px 10px; + } + #friendica-logo-mask { + display: block !important; + } + /* hide search box - no room */ #search-box { - left: 15%; + display: none; } + /* show mobile search toggle */ + #topbar-first .navbar-toggle[data-target="#search-mobile"]{ + display: block !important; + position: fixed !important; + left: 100px; + top: 6px; + } + /* force display of mobile search box */ + #search-mobile { + top: 110px !important; + border-color: black; + } + #search-mobile .col-xs-12 { + background-color: var(--nav-bg); + } + #search-mobile.collapse.in, + #search-mobile.collapse.in * { + display: block !important; + } + #topbar-first .navbar-toggle[data-target="aside"] { + position: fixed; + top: 6px; + left: 50px; + } + /* change aside toggle icon */ + .navbar-toggle .fa-ellipsis-v::before, + #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before { + content: "\f152"; + } + body.aside-out .navbar-toggle .fa-ellipsis-v::before, + body.aside-out #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before { + content: "\f191"; + } + #topbar-first .nav > .account { + right: 24px; + } #jotOpen::before { content: ''; margin: 0; @@ -1039,38 +1526,544 @@ aside .widget li:hover { #mention-link span:last-of-type { margin-right: 42px; } + .offcanvas-right-overlay, + aside::before { + background-color: rgba(0, 0, 0, 0.4); + } + /* Cover Photo Mobile */ + .row:has(.coverphoto) aside { + margin-top: 0px; + } + aside:has(.coverphoto){ + left: -300px !important; + right: auto !important; + display: block !important; + padding-top: 120px; + background-color: transparent !important; + transition-duration: .5s; + z-index: auto; + } + aside.canvas-sliding:has(.coverphoto) { + -webkit-transition: none; + transition: none; + } + aside.canvas-slid:has(.coverphoto) { + left: 0px !important; + right: auto !important; + z-index: 20; + } + .coverphoto.canvas-sliding, + .coverphoto.canvas-slid{ + top: 115px !important; + left: 0px !important; + right: 0px !important; + bottom: 0px !important; + background-color: var(--background-color); + overflow: visible; + } + .coverphoto.canvas-slid::after { + content: ''; + position: absolute; + top: 500px; + left: 0px; + width: 100%; + height: 100%; + display: block; + background-color: var(--background-color); + } } -@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; - } - #topbar-first .topbar-nav .nav-segment { - margin-right: 0px; - } +/* Most Phones in Portrait Orientation + Large Screen Phones in Landscape Orientation + Some Small tablets in Portrait Orientation + ====================================== +*/ +@media screen and (max-width: 768px), (max-height: 480px) and (max-width: 960px) and (orientation: landscape) { + #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; } #search-save .fa-plus::after { - content: 'Follow'; + content: var(--follow-button-text); } #search-save .fa-floppy-o::after { - content: 'Save'; + content: var(--save-button-text); } -} \ No newline at end of file + a.wall-item-name-link, span.fakelink { + font-weight: bold; + } + .wall-item-container iframe { + aspect-ratio: 5/4; + } + /* new mobile layout */ + body { + padding-top: 65px !important; + padding-bottom: 55px !important; + } + + /* Friendica icon upper left */ + #banner { + display: block !important; + padding: 0 !important; + margin: 8px 10px !important; + } + #friendica-logo-mask { + display: block !important; + } + #topbar-first { + top: auto; + bottom: 0; + box-shadow: 2px 0px 5px rgba(0,0,0,.5); + } + #topbar-first .topbar-nav .arrow { + display: none; + } + /* re-reveal the user profile toggle */ + #topbar-first .nav > .account { + position: fixed; + display: block !important; + top: 0; + right: 8px; + } + #topbar-first .nav > .account img { + margin: 0; + } + #topbar-first .nav > .account span.caret { + display: none; + } + /* overlay mobile nav toggle invisibly */ + #topbar-first .offcanvas-right-toggle { + position: fixed; + top: -3px; + right: 7px; + color: transparent; + z-index: 10000; + } + /* move sidebar toggle to bottom bar */ + #topbar-first .navbar-toggle[data-target="aside"]{ + position: fixed; + top: auto; + left: auto; + bottom: 5px; + } + /* change icon */ + .navbar-toggle .fa-ellipsis-v::before, + #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before { + content: "\f152"; + } + body.aside-out .navbar-toggle .fa-ellipsis-v::before, + body.aside-out #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before { + content: "\f191"; + } + /* move search button right */ + #topbar-first .navbar-toggle[data-target="#search-mobile"] { + position: relative !important; + display: block !important; /* show in landscape on phones */ + top: 0; + left: auto; + right: auto; + margin: 0; + } + #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed){ + color: var(--link-color); + border-bottom: 3px solid var(--link-color); + background-color: transparent !important; + border-radius: 0 !important; + margin-top: 0px; + } + #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed) .fa-search::before { + content: '\f00e'; + } + /* fix spacing of icons */ + .topbar ul.nav { + position: absolute !important; + left: 50px !important; + right: 50px !important; + display: flex; + justify-content: space-between; + } + #topbar-first .topbar-nav .nav-segment { + margin: 0px; + } + #search-mobile { + top: 60px !important; + } + /* always show on phones in landscape */ + #search-mobile.collapse.in, + #search-mobile.collapse.in * { + display: block !important; + } + /* app-style notification menu */ + #nav-notifications-menu { + position: fixed; + top: 60px; + bottom: 51px; + left: 0; + right: 0; + width: 100% !important; + min-width: unset; + max-width: unset; + min-height: unset; + max-height: unset !important; + margin: 0 !important; + box-shadow: none; + } + #nav-notifications-menu::before { + content: '\f00d'; + font-family: ForkAwesome; + position: absolute; + top: 8px; + right: 12px; + height: 40px; + width: 40px; + background-color: var(--link-color); + color: white; + font-size: 24px; + border-radius: 100%; + line-height: 40px; + text-align: center; + display: block; + } + #offcanvasUsermenu { + background-color: var(--nav-bg) !important; + } + #offcanvasUsermenu ul.list-group { + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + } + #offcanvasUsermenu ul.list-group li:first-of-type img { + max-width: unset !important; + max-height: unset !important; + height: 40px !important; + width: 40px !important; + border-radius: 100% !important; + } + #offcanvasUsermenu li.divider { + display: none !important; + } + #offcanvasUsermenu li.list-group-item, + #offcanvasUsermenu li.list-group-item a { + border: transparent !important; + background-color: transparent !important; + color: var(--nav-icon-color) !important; + width: 90% !important; + margin: 0 auto; + } + #offcanvasUsermenu li.list-group-item:hover { + background-color: #333 !important; + border-radius: 8px !important; + } + #offcanvasUsermenu li.list-group-item:hover a { + color: #fff !important; + } + #offcanvasUsermenu li.list-group-item:first-of-type:hover { + background-color: revert !important; + } + /* force mobile search in landscape on phones */ + #search-box { + display: none !important; + } + /* position delete button */ + #item-delete-selected { + top: 60px; + right: 10px; + } + /* move top bars around */ + #topbar-second { + top: 0px; + padding: 0; + } + #topbar-second div.container{ + position: absolute; + left: 55px; + right: 55px; + } + #topbar-second #tabmenu { + width: 100%; + } + /* override and show mobile tabs in landscape */ + #topbar-second #tabmenu ul.tabbar.hidden-xs { + display: none !important; + } + #topbar-second #tabmenu ul.tabbar.visible-xs { + display: block !important; + } + #topbar-second ul.tabbar { + text-align: center; + max-width: 100%; + } + #topbar-second ul.tabbar > li:first-of-type { + max-width: 75%; + overflow: hidden; + } + #topbar-second ul.tabbar li:first-of-type ul.tabs { + max-width: 100%; + } + #topbar-second ul.tabbar li:first-of-type ul.tabs li { + width: 100%; + } + #topbar-second ul.tabbar li:first-of-type ul.tabs li a { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + #dropdownMenuTools-xs { + height: 60px; + } + ul.tabs-extended .dropdown.open .fa-chevron-down::before{ + content: '\f077'; + } + #jotOpen, #search-save, #mention-link { + position: fixed; + bottom: 65px; + right: 10px; + border-radius: 100% !important; + height: 50px; + width: 50px !important; + line-height: 50px; + border: none !important; + box-shadow: none !important; + } + #mention-link span:last-of-type { + display: none; + } + #mention-link span:first-of-type { + float: none; + position: relative; + left: -5px; + top: 2px; + } + #search-save .fa-plus::after, + #search-save .fa-floppy-o::after { + display: none; + } + #search-save .fa-plus::before, + #search-save .fa-floppy-o::before { + content: '\f0c7' !important; + } + .fa-edit::before, + .fa-pencil-square-o::before { + content: "\f040"; + } + /* drop-down mobile style*/ + #topbar-second .dropdown-menu { + position: fixed; + top: 58px; + left: 0px; + right: 0px; + bottom: 50px; + width: 100% !important; + overflow: auto !important; + overflow-x: hidden !important; + } + #topbar-second .dropdown-menu li { + height: auto !important; + } + #topbar-second .dropdown-menu li a, + .tabs .dropdown-menu li a { + font-size: 18px !important; + } + .topbar .dropdown-header { + font-size: 18px !important; + } + .topbar .dropdown-header .dropdown-header-link .btn-link { + font-size: 18px !important; + margin-right: 40px; + } + aside.offcanvas-xs { + padding-top: 60px; + padding-bottom: 60px; + } + .coverphoto, + .coverphoto.canvas-sliding, + .coverphoto.canvas-slid{ + top: 55px !important; + } + #message-new { + height: 50px; + width: 50px; + background-color: var(--link-color); + line-height: 50px; + font-size: 24px; + text-align: center; + border-radius: 100%; + } + #message-new a { + color: white !important; + opacity: 1; + } + #message-new:hover, + #message-new:focus { + box-shadow: 0 0 100px rgba(0,0,0,.2); + } +} +/* Narrow Screen Phones in Portrait Orientation + ============================================ +*/ +@media screen and (max-width: 400px) and (orientation: portrait) { + /* remove action button labels if screen is too narrow */ + .wall-item-actions-row button::after { + content: '.'; + color: transparent; + } + /* NOTE: cannot simply empty or display none or button alignment gets messed up! */ +} +/* Narrow Screen Phones in Landscape Orientation + ============================================== +*/ +@media screen and (max-height: 400px) and (orientation: landscape) { + #topbar-first { + transition-duration: .5s; + transition-property: bottom; + bottom: -55px; + } + header #banner { + background-color: var(--nav-bg); + border-radius: 8px; + z-index: 1030; + } + #topbar-first .navbar-toggle[data-target="aside"] { + position: fixed !important; + left: 10px; + bottom: 10px; + transition-duration: .5s; + background-color: var(--link-color); + color: white; + height: 50px; + width: 50px; + border-radius: 100%; + line-height: 32px; + } + #topbar-first .navbar-toggle[data-target="#search-mobile"], + #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed) { + position: fixed !important; + top: auto; + bottom: 10px; + right: 10px; + transition-duration: .5s; + background-color: var(--link-color); + color: white; + height: 50px; + width: 50px; + border-radius: 100%; + line-height: 32px; + } + #topbar-first .navbar-toggle[data-target="#search-mobile"]:hover, + #topbar-first .navbar-toggle[data-target="#search-mobile"]:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.2); + } + .fa-fw { + width: auto; + } + #topbar-first .offcanvas-right-toggle { + top: 3px; + right: 13px; + } + #main-menu img { + border: 5px solid var(--link-color); + border-radius: 100%; + box-sizing: unset; + } + #search-mobile { + top: 40% !important; + border: 10px solid var(--link-color); + border-radius: 8px; + left: 50%; + width: 80%; + margin-left: -40%; + box-shadow: 0 0 50px rgba(0,0,0,.75); + } + #search-mobile .col-xs-12 { + background-color: var(--nav-bg); + } + #topbar-second { + transition-duration: .5s; + 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, + 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:focus { + border-radius: 100% !important; + } + #topbar-first .topbar-actions { + z-index: 1070; + } + /* if notifications is left open when phone is rotated */ + #nav-notifications-menu { + top: 0; + bottom: 0; + z-index: 10000; + } + #offcanvasUsermenu { + top: 0px; + } + #offcanvasUsermenu li:first-of-type img { + display: none; + } + #offcanvasUsermenu li:first-of-type { + font-weight: 700; + } + .offcanvas-right-overlay { + top: 0px; + } + .row:has(.coverphoto) #content { + margin-top: 200px; + } + .coverphoto.canvas-sliding, + .coverphoto.canvas-slid, + .coverphoto { + top: 0px !important; + left: 0px; + right: 0px; + height: 500px; + } +} +/* LOGIN AND INFO SCREENS */ +.mod-home .navbar, +.mod-home #topbar-second{ + background-color: transparent !important; +} +.mod-home #nav-about { + background-color: var(--link-color); + height: 50px; + width: 50px; + color: white !important; + border-radius: 100% !important; + right: 15px; +} + .mod-home #nav-about:hover, +.mod-home #nav-about:focus { + background-color: var(--link-color) !important; + box-shadow: inset 0 0 100px rgba(0,0,0,.1); +} +.mod-home #nav-about .fa-info { + line-height: 24px; + width: auto; + display: block; +} + @media screen and (max-width: 768px){ + .mod-home #nav-about .fa-info { + line-height: 32px; + } + } \ No newline at end of file diff --git a/bookface_dark.php b/bookface_dark.php index 88d1cda..145d494 100644 --- a/bookface_dark.php +++ b/bookface_dark.php @@ -7,25 +7,30 @@ * * Name: Bookface Dark * Licence: AGPL - * Author: Kristi H. @kmh@friendica.world feb @feb@loma.ml + * Author: Kristi H. @kmh@friendica.world feb @feb@loma.ml Phil phil@loma.ml * Overwrites: nav_bg, nav_icon_color, background_color, background_image, contentbg_transp - * Accented: Yes - * Version: 1.0 + * Accented: yes + * Version: 1.3 */ - +use Friendica\DI; require_once 'view/theme/frio/php/PHPColors/Color.php'; $accentColor = new Color($scheme_accent); +$customColor = DI::pConfig()->get($uid, 'frio', 'link_color') ?: ''; +if ($customColor){ + $customColor = new Color(''.$customColor.''); +} +//$customColor = ($customColor) ?: new Color(''.$customColor.''); -$menu_background_hover_color = '#' . $accentColor->darken(20); +$menu_background_hover_color = ($customColor) ? '#'.$customColor->darken(20) : '#'.$accentColor->darken(20); $nav_bg = '#252728'; -$link_color = '#' . $accentColor->lighten(10); - // override ugly blue accent color - if ( $link_color == "#33a2e0" ){ +$background_color = '#1C1C1D'; +$link_color = ($customColor) ? '#'.$customColor->getHex() : '#'.$accentColor->lighten(10); + // override ugly blue accent color and prevent setting accent to nav or bg color + if ( $link_color == "#33a2e0" || $link_color == $nav_bg || $link_color == $background_color ){ $link_color = "#0066ff"; } $nav_icon_color = '#B0B3B8'; -$background_color = '#1C1C1D'; $contentbg_transp = '0'; $font_color = '#cccccc'; $font_color_darker = '#acacac'; diff --git a/bookface_light.css b/bookface_light.css index b054593..181ec75 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,12 +1,11 @@ /* Name : Bookface Light - Version : 1.2 + Version : 1.3 Licence : AGPL - Created on : 26.01.2025 - Author : Kristi H. @kmh@friendica.world feb @feb@loma.ml + Created on : 11 Feb 2025 + Author : Kristi H. @kmh@friendica.world feb @feb@loma.ml Phil phil@loma.ml */ - :root { --global-font-family: "Open Sans", Arial, sans-serif, Noto Color Emoji; --nav-bg: $nav_bg; @@ -19,24 +18,45 @@ --background-image: $background_image; --menu-background-hover-color: $menu_background_hover_color; --border-color: #eeeeee; + --count-color: #ffffff; + --count-bg: var(--link-color); + + /* LOCALIZE pseudo-element text below */ + --sign-in-text: 'Sign-In'; + --compose-text: 'New Post'; + --new-note-text: 'New Note'; + --save-search-text: 'Save Search'; + --follow-tag-text: 'Follow Tag'; + --comment-button-text: 'Comment'; + --share-button-text: 'Share'; + --quote-button-text: 'Quote'; + --like-button-text: 'Like'; + --dislike-button-text: 'Dislike'; + --more-button-text: 'More'; + --attendyes-button-text: 'Going'; + --attendno-button-text: 'Can\'t Go'; + --attendmaybe-button-text: 'Maybe'; + --add-photo-button-text: 'Add Photos'; + --follow-button-text: 'Follow'; + --save-button-text: 'Save'; } body { background-color: var(--background-color) !important; font-size: 15px !important; - padding-top: 125px !important; + 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, - nav.navbar .nav > li > button { - color: #65686C !important; - + nav.navbar .nav > li > button{ + color: var(--nav-icon-color) !important; } #topbar-first, nav.navbar { background-color: var(--nav-bg) !important; - color: #65686C !important; + color: var(--nav-icon-color) !important; + height: 55px; } #topbar-first .topbar-nav .nav-segment { margin-right: 10px; @@ -51,7 +71,9 @@ #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 > 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, @@ -59,30 +81,46 @@ background-color: rgba(128,128,128,.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 { + #topbar-first .nav > li > a.selected, + #nav-notification.dropdown.open { border-bottom: 3px solid var(--link-color) !important; color: var(--link-color) !important; } #topbar-first .nav > li > a.selected:hover, + #topbar-first .nav > li > a.selected:focus, #topbar-first .nav > li > #main-menu:hover, - #topbar-first .nav > li > #main-menu:focus { + #topbar-first .nav > li > #main-menu:focus, + #nav-notification.dropdown.open #nav-notifications-menu-btn:hover, + #nav-notification.dropdown.open #nav-notifications-menu-btn:focus { background-color: transparent !important; border-radius: 0 !important; } + #nav-notification.dropdown.open #nav-notifications-menu-btn .fa-bell::before { + content: '\f0f3'; + color: var(--link-color); + } ul.tabs li { font-size: 15px !important; margin-left: 10px !important; } ul.tabs li a { margin-top: 8px; + color: var(--link-color); } - ul.tabs li:hover:not(.active) { + ul.tabs li:not(.active):hover { border-bottom-width: 0px !important; } - ul.tabs li:hover:not(.active) a { + ul.tabs li:not(.active):hover > a { background-color: rgba(128,128,128,.1) !important; + background-image: none !important; border-radius: 8px !important; + color: var(--font-color); } .dropdown-menu { padding-bottom: 15px !important; @@ -90,40 +128,84 @@ border: 1px solid var(--background-color) !important; } .dropdown-menu li { - margin: 10px; - width: 92% !important; + margin: 3px 10px; + width: 92% !important; border-radius: 8px; } .dropdown-menu li:hover { - border-color: transparent !important; + border-color: transparent !important; + } + .dropdown-menu > li > a:hover, + .dropdown-menu > li > a:focus { + background-image: none !important; + border-radius: 8px ; + } + .dropdown-menu > li.active, + .dropdown-menu > li.active:hover, + .dropdown-menu > li.active:focus { + border-radius: 0; + background-color: transparent; + border-bottom: 4px solid var(--link-color) !important; + } + .dropdown-menu > li.active > a, + .dropdown-menu > li.active:hover > a, + .dropdown-menu > li.active:focus > a { + color: var(--link-color); + background-color: transparent; } .form-control { - background: #fff; + background: var(--nav-bg); color: #000; } .form-control[readonly], .form-control[disabled], .fieldset[disabled] .form-control { + /* background color */ + /* color */ opacity: .5; } - + .table-striped > tbody > tr:nth-of-type(2n+1){ + /* not necessary for light mode */ + } header #banner { left: 0 !important; right: auto !important; + margin-top: 10px; } - header #banner #logo-img, - .navbar-brand #logo-img { - background-color: var(--link-color) !important; - height: 40px !important; - width: 40px !important; + .navbar-brand #logo-img { + margin-top: 20px; + } + .navbar-brand #logo-img, + header #banner #logo-img { + /* SVG Mask is broken in WebKit use Icon Font instead */ + -webkit-mask-image: unset !important; + mask: none !important; + mask-size: unset !important; + mask-composite: unset !important; + mask-mode: unset !important; + background-color: transparent !important; + height: 40px; + width: 40px; + } + .navbar-brand #logo-img::before, + header #banner #logo-img::before { + content: '\f2e6'; + font-family: ForkAwesome; + font-size: 45px; + position: relative; + top: -12px; + left: 0px; + text-shadow: none; + color: var(--link-color); } - #navbar-brand-text { + + #navbar-brand-text { line-height: 40px; font-weight: 700; color: var(--link-color) !important; } #nav-login::before{ - content: 'Sign-In'; + content: var(--sign-in-text); } .topbar ul.nav { left: 50% !important; @@ -144,6 +226,7 @@ height: 40px !important; font-size: 15px; background-position: unset; + /* box shadow okay for light mode */ } #search-box form > div { background-color: var(--background-color); @@ -178,14 +261,24 @@ font-size: 15px; color: #666; } + #nav-user-menu, #nav-notifications-menu { + background-color: var(--nav-bg) !important; + border: 1px solid var(--background-color) !important; + } #nav-user-menu { - background-color: #ffffff !important; 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, .contact-photo-wrapper .dropdown-menu li .btn-link { - color: #65686C !important; - border-color: white !important; + .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, @@ -199,11 +292,58 @@ background: #f2f2f2 !important; border-radius: 8px; } - .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: #ffffff !important; - } + .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; +} + #topbar-first #nav-notifications-menu { + border: 1px solid var(--background-color) !important; + } + #topbar-first #nav-notifications-menu li { + border-color: transparent !important; + box-sizing: border-box; + margin: 10px; + border-radius: 10px !important; + width: 94% !important; + } + #topbar-first .notification-unseen { + 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; + border-color: transparent !important; + } + .topbar .dropdown-header { + color: var(--nav-icon-color); + } + #topbar-first .topbar-nav .arrow { + display: none !important; + } + .topbar .dropdown-header .dropdown-header-link .btn-link { + border: 1px solid var(--link-color); + border-radius: 8px; + padding: 5px; + margin-top: -6px; + } + .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; + background-color: var(--nav-bg) !important; + border-color: #ccc; } .btn.btn-primary:hover, .btn.btn-primary:focus { @@ -225,12 +365,14 @@ border-radius: 8px !important; background-color: var(--link-color) !important; color: #ffffff !important; + /* frio border-color */ + /* frio box-shadow */ } #jotOpen:hover, #jotOpen:focus { box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important; } #jotOpen::before { - content: 'New Post'; + content: var(--compose-text); font-size: 15px; margin-right: 10px; line-height: 32px; @@ -238,6 +380,14 @@ display: inline; top: -4px; } + body.mod-notes #jotOpen::before { + content: var(--new-note-text); + } + body.mod-notes .sectiontop h3::before { + content: '\f023'; + font-family: ForkAwesome; + margin-right: 5px; + } #jotOpen .fa-pencil-square-o { font-size: 32px !important; position: relative; @@ -246,6 +396,32 @@ #topbar-second #nav-short-info { 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, + .fsuggest-content-wrapper, + .shared-wrapper { + background-color: var(--nav-bg) !important; + background-image: none; + /* frio light border-color */ + } /* Make Submit Buttons Pretty */ #adminpage a.btn, .settings-submit, @@ -255,6 +431,8 @@ background-color: var(--link-color) !important; color: white !important; border-radius: 8px !important; + border: none !important; + box-shadow: none !important; } .settings-submit.form-button-search, button[type="submit"].form-button-search { @@ -293,7 +471,7 @@ float: right !important; margin-left: 5px; } - .panel-footer::after { + .panel-footer::after{ content: ''; display: block; clear: both; @@ -312,24 +490,33 @@ input[name="republish_directory"], input[name="page_tos"]{ float: right; - padding: 8px; + padding: 8px; + border: none; } .submit::after{ content: ''; display: block; clear: both; } + #photo-edit-end { + clear: both; + } + /* make textareas resize in the correct direction */ + textarea { + resize: vertical !important; + } /* Other people profiles */ #mention-link { + border-radius: 8px !important; background-color: var(--link-color) !important; - color: white !important;; - border-radius: 8px !important;; + color: #ffffff !important; + /* frio border-color */ + /* frio box-shadow */ padding: 0 16px !important; } #mention-link:hover, #mention-link:focus { box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important; - } #mention-link span:first-of-type { float: right; @@ -345,7 +532,7 @@ margin-right: 10px; line-height: 32px; top: 6px; - position: relative; + position:relative; } #contact-edit-status-wrapper { margin: 15px 0px !important; @@ -379,7 +566,7 @@ } #search-save .fa-floppy-o::after, #search-save .fa-plus::after{ - content: 'Save Search'; + content: var(--save-search-text); font-family: 'Open Sans', Arial, sans-serif; font-size: 15px; float: left; @@ -390,17 +577,39 @@ top: -2px; font-weight: 700; } - #search-save .fa-floppy-o::after { - content: 'Save Search'; + content: var(--save-search-text); } #search-save .fa-plus::before { display: inline-block; margin-top: 2px; } #search-save .fa-plus::after { - content: 'Follow Tag'; + content: var(--follow-tag-text); } + /* popovers */ + .popover.hovercard { + border: 1px solid var(--nav-bg) !important; + /* + dark version needs box shadow as outer glow + */ + } + .hover-card-footer { + border-color: #ccc; + background-color: var(--nav-bg); + } + .hovercard.top > .arrow::after { + border-top-color: var(--nav-bg); + } + .hovercard.right > .arrow::after { + border-right-color: var(--nav-bg); + } + .hovercard.bottom > .arrow::after { + border-bottom-color: var(--nav-bg); + } + .hovercard.left > .arrow::after { + border-left-color: var(--nav-bg); + } /* sidebar widgets */ aside .widget, .nav-container .widget { @@ -409,10 +618,18 @@ -moz-box-shadow: none !important; box-shadow: none !important; } + aside .badge { + background-color: var(--link-color); + } + /* POSTS */ .tread-wrapper { + /* frio background-color */ box-shadow: 0 0px 1px rgba(0,0,0,.5) !important; border-radius: 10px !important; } + .wall-item-container { + border-top: none; + } .wall-item-container .media { background-color: #ffffff !important; border-radius: 10px !important; @@ -427,13 +644,28 @@ border-radius: 8px; background-color: #000; } + /* + Dark mode has some extra styling + here light mode does not need + */ .contact-photo, .contact-photo-xs { border-radius: 100% !important; border: 1px solid #eee !important; } + /* + Dark mode has some extra styling + here light mode does not need + to the .media-list > li elements + */ +/* + Dark mode has some extra styling + here for the .hovercard element +*/ .hover-card-pic img.thumbnail { border-radius: 100% !important; + /* frio background-color */ + /* frio border-color */ } p.wall-item-announce, .media .time, .media .shared-time, @@ -466,6 +698,8 @@ display: block; white-space: normal !important; margin: 0 auto !important; + /* frio -webkit-box-shadow */ + /* frio box-shadow */ } .wall-item-actions-row button::after, .wall-item-actions-right button::after { @@ -477,28 +711,29 @@ .wall-item-response { position: relative; overflow: visible !important; + display: block; } .button-comments::after { - content: 'Comment'; + content: var(--comment-button-text); } .button-announces::after { - content: 'Share'; + content: var(--share-button-text); } .share-links .dropdown-toggle::after { - content: 'Share'; + content: var(--share-button-text); } .button-votes::after { - content: 'Quote'; + content: var(--quote-button-text); } .button-likes::after { - content: 'Like'; + content: var(--like-button-text); } [id^="dislike-"]::after{ - content: 'Dislike'; + content: var(--dislike-button-text); } .wall-item-actions-right .dropdown-toggle::after, .more-links .dropdown-toggle::after { - content: 'More'; + content: var(--more-button-text); } /* engagement counts */ .wall-item-actions-row > button span, @@ -506,10 +741,10 @@ position: absolute; text-align: center; display: block; - background-color: var(--link-color); + background-color: var(--count-bg); box-shadow: -1px 1px 1px #fff; border-radius: 4px; - color: #fff; + color: var(--count-color); font-size: 12px; font-weight: 700; width: fit-content; @@ -518,40 +753,40 @@ top: 0px; z-index: 1; } - /* this is some freaking ALCHEMY! */ - .vote-event:not(:has(.wall-item-response:empty)) { + /* Event Response Buttons */ + .vote-event:has(button) { padding-bottom: 135px; } - .vote-event .wall-item-response { + .vote-event:has(button) .wall-item-response { position: absolute; top: 63px; } .vote-event .wall-item-response:empty{ display: none; } - .vote-event .wall-item-response:nth-of-type(1){ + .vote-event:has(button) .wall-item-response:nth-of-type(1){ left: 15px; } .vote-event .wall-item-response:nth-of-type(1) .button-event::after, [id^="attendyes"]::after{ - content: 'Going'; + content: var(--attendyes-button-text); } - .vote-event .wall-item-response:nth-of-type(2){ + .vote-event:has(button) .wall-item-response:nth-of-type(2){ left: 105px; } .vote-event .wall-item-response:nth-of-type(2) .button-event::after, - [id^="attendno"]::after { - content: 'Can\'t Go'; + [id^="attendno"]::after{ + content: var(--attendno-button-text); position: relative; height: 20px; overflow: hidden; /* or skews mobile button layout */ } - .vote-event .wall-item-response:nth-of-type(3){ + .vote-event:has(button) .wall-item-response:nth-of-type(3){ left: 204px; } .vote-event .wall-item-response:nth-of-type(3) .button-event::after, - [id^="attendmaybe"]::after { - content: 'Maybe'; + [id^="attendmaybe"]::after{ + content: var(--attendmaybe-button-text); } /* prevent "Like Like" and "Dislike Dislike" on photos */ #photo-view-wrapper .wall-item-actions .button-likes { @@ -603,6 +838,7 @@ .close:focus { box-shadow: inset rgba(0,0,0,.2) !important; } + .modal-content, #jot-modal-content, .wall-item-comment-wrapper { background-color: #fff !important; @@ -634,6 +870,9 @@ #jot-modal-content .friendica-tagsinput { background-color: #fff !important; } + #filebrowser .breadcrumb{ + background-color: var(--background-color); + } .fbrowser .folders button { background-color: rgba(0,0,0,.1) !important; color: black !important; @@ -653,11 +892,12 @@ background-color: transparent !important; } - #jot-title { + #jot-title, + #jot-category { background-color: #fff !important; } - #profile-jot-text, #profile-jot-wrapper textarea, - #jot-location, + #profile-jot-text, #profile-jot-wrapper textarea, + #jot-location, .wall-item-comment-wrapper textarea { background-color: #fff !important; } @@ -705,7 +945,7 @@ } #profile-jot-wrapper .wall-item-container.panel-body.preview { border: none!important; - margin-top: 20px !important; + margin-top:20px !important; border-radius: none !important; background-color: transparent; } @@ -731,7 +971,7 @@ .fbswitcher [data-mode="attachment"] { display: none !important; } -/* Profiles */ +/* PROFILE */ #profile-photo-wrapper { overflow: visible !important; padding: 5px; @@ -750,14 +990,31 @@ font-size: 32px !important; text-align: center; word-break: break-word; + text-shadow: 1px 1px 2px var(--background-color), -1px -1px 2px var(--background-color); } aside .vcard .p-addr { font-weight: 600; text-align: center; white-space: break-spaces !important; + background-color: var(--background-color); + border-radius: 8px; + } + aside .vcard .title, + aside .vcard .location, + aside .vcard .key, + aside .vcard .about, + aside .vcard .xmpp, + aside .vcard .matrix, + aside .vcard .homepage { + background-color: var(--background-color); + padding: 5px; + border-radius: 8px; + min-width: 100%; + margin: 10px 0; } aside .widget li.selected { background-color: var(--menu-background-hover-color) !important; + /* auto has background-image here */ border-color: transparent !important; border-radius: 8px; } @@ -765,7 +1022,7 @@ font-weight: bold; } aside .widget li:hover { - background-color: rgba(255,255,255,1) !important; + background-color:rgba(255,255,255,1) !important; border-color: transparent !important; border-radius: 8px; } @@ -787,10 +1044,13 @@ } .comment-fake-form textarea { border-radius: 50px !important; + /* frio background-color */ + /* frio -webkit-box-shadow */ + /* frio box-shadow */ } .wall-item-actions button { font-size: 24px !important; - color: #65686C !important; + color: var(--nav-icon-color) !important; } .wall-item-actions button:hover { color: var(--link-color) !important; @@ -812,10 +1072,49 @@ position: relative; top: 1px; } + /* little vcard when you scroll down on profiles */ + #vcard-short-photo-wrapper img, + #nav-short-info .contact-wrapper img { + border-radius: 100% !important; + } + /* Profile Cover Photo */ + .row:has(.coverphoto) aside, + .row:has(.coverphoto) #content { + margin-top: 350px; + } + .row:has(.coverphoto) aside .widget.vcard { + background-color: transparent !important; + } + .coverphoto { + position: fixed; + top: 115px; + left: 0 !important; + right: 0 !important; + z-index: -1; + height: 500px; + overflow: hidden; + } + .coverphoto img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + } + .coverphoto:has(> :last-child:nth-child(2)) img { + height: 50%; + } + .coverphoto:has(> :last-child:nth-child(3)) img { + height: 33.3333%; + } + .coverphoto:has(> :last-child:nth-child(n+4)) img { + height: 25%; + } /* not obviously clickable or intuitive what it does */ .plink.u-url { + /* uncomment to outline as a button -webkit-box-shadow: 0 0 1px rgba(0,0,0,.5); box-shadow: 0 0 1px rgba(0,0,0,.5); + */ border-radius: 100%; position: relative; padding: 6px 4px; @@ -842,7 +1141,37 @@ /* Calendar */ .fc-unthemed td.fc-today { background-color: var(--menu-background-hover-color); + /* auto has background-image here */ } +.event-buttons .btn { + background-color: var(--link-color); + color: #fff; + border-radius: 100%; + height: 40px; + width: 40px; + line-height: 40px; + font-size: 18px; + padding: 0; + margin-right: 5px; +} + .event-buttons .btn:hover, + .event-buttons .btn:focus { + color: #fff; + box-shadow: inset 0 0 100px rgba(0,0,0,.1); + } + .fc .fc-event { + background-color: var(--link-color); + border: none; + color: white; + } + .fc .fc-month-view .fc-content .fc-title .item-desc:hover, + .fc .fc-month-view .fc-content .fc-title .item-desc:focus { + color: white; + } + .fc .fc-event:hover, + .fc .fc-event:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.2); + } /* Photo Albums */ .photo-album-actions .icon-padding, .photo-edit-link-wrap .icon-padding { @@ -896,7 +1225,7 @@ background-color: rgba(128,128,128,.1) !important; } .photos-content-wrapper .photos-upload-link::before { - content: 'Add Photos'; + content: var(--add-photo-button-text); font-size: 15px; vertical-align: middle; margin-top: -10px; @@ -904,18 +1233,23 @@ } .justified-gallery { overflow: visible !important; + height: auto !important; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: start; } .justified-gallery > a, .justified-gallery > div, .justified-gallery > figure{ - height: 115px !important; - width: 115px !important; + height: 180px !important; + width: 180px !important; border: 1px solid #ccc; position: relative !important; top: auto !important; left: auto !important; border-radius: 8px; - margin: 1px !important; + margin: 4px !important; } .justified-gallery > .jg-entry-visible > img, .justified-gallery > .jg-entry-visible > a > img, @@ -931,6 +1265,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; @@ -951,59 +1286,779 @@ } .advancedcontentfilter-content-wrapper pre { margin-top: 20px; -} - - @media screen and (max-width: 1280px) { - #search-box { - width: 18% !important; - } - #search-save { - width: 140px !important; - } +} +/* MISCELLANEOUS STUFF */ +div#back-to-top { + bottom: 65px; + left: 10px; + background-color: var(--link-color); + color: #ffffff; + width: 50px; + height: 50px; + line-height: 50px; + text-align: center; + font-size: 24px; + border-radius: 100%; +} +#item-delete-selected { + height: 50px; + width: 50px; + line-height: 50px; + font-size: 24px; + background-color: var(--link-color); + border-radius: 100%; + top: 120px; +} + #item-delete-selected:hover, + #item-delete-selected:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.2); } - @media screen and (max-width: 991px) { - #search-box { - left: 15%; - } - #jotOpen::before { + /* Profile pics in Messages */ + .event-wrapper .event-owner img, + .mail-conv-wrapper .media .contact-photo-wrapper img, + .mail-list-outside-wrapper .contact-photo-wrapper img { + border-radius: 100%; + } +.modal-backdrop { + background-color: #fff; +} +/* TAGS, CATEGORIES, MENTIONS BUTTONS + ================================== + Restyled to be less obnoxious and tiny + now sized and spaced like they are on Mastodon +*/ +a.tag.label, +.wall-item-container .wall-item-bottom .wall-item-tags span.label { + border-radius: 4px !important; + display: inline-flex !important; + font-size: 12px !important; + font-weight: 500 !important; + padding: 6px 12px !important; + -webkit-text-decoration: none !important; + text-decoration: none !important; + margin: 2px !important; + background-image: none !important; + background-color: transparent !important; + box-shadow: none !important; + color: #0066FF !important; + border: 1px solid #0066FF; +} + .wall-item-bottom .label { + color: inherit; + } + .wall-item-bottom .label a { + color: inherit; + } + /* hide lightning bolt and person icons + pretty sure people know what "#" and "@" mean now + */ + a.tag.label .fa-bolt::before, + .wall-item-bottom .label .fa-bolt::before { content: ''; + } + .wall-item-bottom .label .fa-user::before{ + content: ''; + } + /* undo hover for entire container*/ + .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label { + filter: grayscale(0.5); + opacity: 0.8; + -webkit-transition: 0s; + -moz-transition: 0s; + -ms-transition: 0s; + transition: 0s; + } + /* replace with hover for individual tag */ + .wall-item-container .wall-item-bottom .wall-item-tags span.label:hover, + .wall-item-container .wall-item-bottom .wall-item-tags span.label:focus, + .wall-item-container .wall-item-bottom .wall-item-tags span.label:focus-within { + filter: grayscale(0) !important; + opacity: 1 !important; + /* probably don't need vendor prefixed anymore but whatever...*/ + -webkit-transition: all 0.25s ease-in-out !important; + -moz-transtion: all 0.25s ease-in-out !important; + -ms-transition: all 0.25s ease-in-out !important; + transition: all 0.25s ease-in-out !important; + } + /* Hashtag Buttons */ + a.tag.label.btn-info, + .wall-item-bottom .wall-item-tags .tag.label.btn-info { + /* inherits everything from above */ + } + a.tag.label.btn-info:hover, a.tag.label.btn-info:focus, + .wall-item-bottom .wall-item-tags .tag.label.btn-info:hover, + .wall-item-bottom .wall-item-tags .tag.label.btn-info:focus { + background-color: #0066FF !important; + color: white !important; + } + /* Category Buttons */ + .wall-item-bottom .wall-item-tags .category.label.btn-success { + border-color: green !important; + color: green !important; + font-size: 0px !important; /* to get rid of parentheses */ + } + /* replace (x) remove with icon button */ + .wall-item-bottom .wall-item-tags .category.label.btn-success a:first-of-type { + font-size: 12px; + } + .wall-item-bottom .wall-item-tags .category.label.btn-success a:last-of-type::after { + content: '\f00d'; + font-family: ForkAwesome; + font-size: 12px; + margin-left: 4px; + } + .wall-item-bottom .wall-item-tags .category.label.btn-success:hover, + .wall-item-bottom .wall-item-tags .category.label.btn-success:focus { + background-color: green !important; + color: white !important; + } + /* when a category is removed need to visually indicate it */ + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success){ + border-color: #ccc !important; + color: #ccc !important; + font-size: 0px !important; + } + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:first-of-type{ + font-size: 12px; + text-decoration: line-through; + } + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type::after { + content: ''; + } + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):hover, + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):focus { + background-color: red !important; + color: white !important; + } + /* @ Mention Buttons */ + .wall-item-bottom .wall-item-tags .mention.label.btn-warning { + border-color: darkgoldenrod !important; + color: darkgoldenrod !important; + } + .wall-item-bottom .wall-item-tags .mention.label.btn-warning:hover, + .wall-item-bottom .wall-item-tags .mention.label.btn-warning:focus { + background-color: goldenrod !important; + border-color: goldenrod !important; + color: white !important; + } +/* Greater than Full-HD Width + =========================== +*/ +@media screen and (min-width: 1921px){ + .coverphoto { + max-width: 1920px; + left: 50% !important; + margin-left: -960px; + border-bottom-right-radius: 10px; + border-bottom-left-radius: 10px; + } +} +/* Small Laptop Screens + Some tablets in Landscape Orientation + ===================================== +*/ +@media screen and (max-width: 1280px) { + #search-box { + width: 18% !important; + } + #search-save { + width: 140px !important; + } +} +/* Large Tablets in Portrait Orientation + ===================================== +*/ +@media screen and (max-width: 990px){ + /* Friendica icon upper left */ + #banner { + display: block !important; + padding: 0 !important; + margin: 8px 10px; + } + #friendica-logo-mask { + display: block !important; + } + /* hide search box - no room */ + #search-box { + display: none; + } + /* show mobile search toggle */ + #topbar-first .navbar-toggle[data-target="#search-mobile"]{ + display: block !important; + position: fixed !important; + left: 100px; + top: 6px; + } + /* force display of mobile search box */ + #search-mobile { + top: 115px !important; + /* frio border-color */ + } + #search-mobile .col-xs-12 { + background-color: var(--nav-bg); + } + #search-mobile.collapse.in, + #search-mobile.collapse.in * { + display: block !important; + } + #topbar-first .navbar-toggle[data-target="aside"] { + position: fixed; + top: 6px; + left: 50px; + } + /* change aside toggle icon */ + .navbar-toggle .fa-ellipsis-v::before, + #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before { + content: "\f152"; + } + body.aside-out .navbar-toggle .fa-ellipsis-v::before, + body.aside-out #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before { + content: "\f191"; + } + #topbar-first .nav > .account { + right: 24px; + } + #jotOpen::before { + content: ''; + margin: 0; + } + #mention-link span:last-of-type { + margin-right: 42px; + } + .offcanvas-right-overlay, + aside::before { + background-color: rgba(255, 255, 255, 0.4); + } + /* Cover Photo Mobile */ + .row:has(.coverphoto) aside { + margin-top: 0px; + } + aside:has(.coverphoto){ + left: -300px !important; + right: auto !important; + display: block !important; + padding-top: 120px; + background-color: transparent !important; + transition-duration: .5s; + z-index: auto; + } + aside.canvas-sliding:has(.coverphoto) { + -webkit-transition: none; + transition: none; + } + aside.canvas-slid:has(.coverphoto) { + left: 0px !important; + right: auto !important; + z-index: 20; + } + .coverphoto.canvas-slid{ + left: 0px !important; + right: 0px !important; + bottom: 0px; + background-color: var(--background-color); + overflow: visible; + } + .coverphoto.canvas-slid::after { + content: ''; + position: absolute; + top: 500px; + left: 0px; + width: 100%; + height: 100%; + display: block; + background-color: var(--background-color); + } +} +/* Most Phones in Portrait Orientation + Large Screen Phones in Landscape Orientation + Some Small tablets in Portrait Orientation + ====================================== +*/ +@media screen and (max-width: 768px), (max-height: 480px) and (max-width: 960px) and (orientation: landscape) { + #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; + } + #search-save .fa-plus::after { + content: var(--follow-button-text); + } + #search-save .fa-floppy-o::after { + content: var(--save-button-text); + } + a.wall-item-name-link, span.fakelink { + font-weight: bold; + } + .wall-item-container iframe { + aspect-ratio: 5/4; + } + /* new mobile layout */ + body { + padding-top: 65px !important; + padding-bottom: 55px !important; + } + + /* Friendica icon upper left */ + #banner { + display: block !important; + padding: 0 !important; + margin: 8px 10px !important; + } + #friendica-logo-mask { + display: block !important; + } + #topbar-first { + top: auto; + bottom: 0; + box-shadow: 2px 0px 5px rgba(0,0,0,.5); + } + #topbar-first .topbar-nav .arrow { + display: none; + } + /* re-reveal the user profile toggle */ + #topbar-first .nav > .account { + position: fixed; + display: block !important; + top: 0; + right: 8px; + } + #topbar-first .nav > .account img { + margin: 0; + } + #topbar-first .nav > .account span.caret { + display: none; + } + /* overlay mobile nav toggle invisibly */ + #topbar-first .offcanvas-right-toggle { + position: fixed; + top: -3px; + right: 7px; + color: transparent; + z-index: 10000; + } + /* move sidebar toggle to bottom bar */ + #topbar-first .navbar-toggle[data-target="aside"]{ + position: fixed; + top: auto; + left: auto; + bottom: 5px; + } + /* change icon */ + .navbar-toggle .fa-ellipsis-v::before, + #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before { + content: "\f152"; + } + body.aside-out .navbar-toggle .fa-ellipsis-v::before, + body.aside-out #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before { + content: "\f191"; + } + /* move search button right */ + #topbar-first .navbar-toggle[data-target="#search-mobile"] { + position: relative !important; + display: block !important; /* show in landscape on phones */ + top: 0; + left: auto; + right: auto; 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-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed){ + color: var(--link-color); + border-bottom: 3px solid var(--link-color); + background-color: transparent !important; + border-radius: 0 !important; + margin-top: 0px; + } + #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed) .fa-search::before { + content: '\f00e'; + } + /* fix spacing of icons */ .topbar ul.nav { - position: relative !important; - left: 10% !important; - margin-left: 0!important; + position: absolute !important; + left: 50px !important; + right: 50px !important; + display: flex; + justify-content: space-between; } #topbar-first .topbar-nav .nav-segment { - margin-right: 0px; + margin: 0px; } - #search-save { - width: 100px !important; + #search-mobile { + top: 60px !important; } - #search-save .fa-plus::after { - content: 'Follow'; + /* always show on phones in landscape */ + #search-mobile.collapse.in, + #search-mobile.collapse.in * { + display: block !important; } + /* app-style notification menu */ + #nav-notifications-menu { + position: fixed; + top: 60px; + bottom: 51px; + left: 0; + right: 0; + width: 100% !important; + min-width: unset; + max-width: unset; + min-height: unset; + max-height: unset !important; + margin: 0 !important; + box-shadow: none; + } + #nav-notifications-menu::before { + content: '\f00d'; + font-family: ForkAwesome; + position: absolute; + top: 8px; + right: 12px; + height: 40px; + width: 40px; + background-color: var(--link-color); + color: white; + font-size: 24px; + border-radius: 100%; + line-height: 40px; + text-align: center; + display: block; + } + #offcanvasUsermenu { + background-color: var(--nav-bg) !important; + } + #offcanvasUsermenu ul.list-group { + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + } + #offcanvasUsermenu ul.list-group li:first-of-type img { + max-width: unset !important; + max-height: unset !important; + height: 40px !important; + width: 40px !important; + border-radius: 100% !important; + } + #offcanvasUsermenu li.divider { + display: none !important; + } + #offcanvasUsermenu li.list-group-item, + #offcanvasUsermenu li.list-group-item a { + border: transparent !important; + background-color: transparent !important; + color: var(--nav-icon-color) !important; + width: 90% !important; + margin: 0 auto; + } + #offcanvasUsermenu li.list-group-item:hover { + background-color: #333 !important; + border-radius: 8px !important; + } + #offcanvasUsermenu li.list-group-item:hover a { + color: #fff !important; + } + #offcanvasUsermenu li.list-group-item:first-of-type:hover { + background-color: revert !important; + } + /* force mobile search in landscape on phones */ + #search-box { + display: none !important; + } + /* position delete button */ + #item-delete-selected { + top: 60px; + right: 10px; + } + /* move top bars around */ + #topbar-second { + top: 0px; + padding: 0; + } + #topbar-second div.container{ + position: absolute; + left: 55px; + right: 55px; + } + #topbar-second #tabmenu { + width: 100%; + } + /* override and show mobile tabs in landscape */ + #topbar-second #tabmenu ul.tabbar.hidden-xs { + display: none !important; + } + #topbar-second #tabmenu ul.tabbar.visible-xs { + display: block !important; + } + #topbar-second ul.tabbar { + text-align: center; + max-width: 100%; + } + #topbar-second ul.tabbar > li:first-of-type { + max-width: 75%; + overflow: hidden; + } + #topbar-second ul.tabbar li:first-of-type ul.tabs { + max-width: 100%; + } + #topbar-second ul.tabbar li:first-of-type ul.tabs li { + width: 100%; + } + #topbar-second ul.tabbar li:first-of-type ul.tabs li a { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + #dropdownMenuTools-xs { + height: 60px; + } + ul.tabs-extended .dropdown.open .fa-chevron-down::before{ + content: '\f077'; + } + #jotOpen, #search-save, #mention-link { + position: fixed; + bottom: 65px; + right: 10px; + border-radius: 100% !important; + height: 50px; + width: 50px !important; + line-height: 50px; + border: none !important; + box-shadow: none !important; + } + #mention-link span:last-of-type { + display: none; + } + #mention-link span:first-of-type { + float: none; + position: relative; + left: -5px; + top: 2px; + } + #search-save .fa-plus::after, #search-save .fa-floppy-o::after { - content: 'Save'; + display: none; } - } \ No newline at end of file + #search-save .fa-plus::before, + #search-save .fa-floppy-o::before { + content: '\f0c7' !important; + } + .fa-edit::before, + .fa-pencil-square-o::before { + content: "\f040"; + } + /* drop-down mobile style*/ + #topbar-second .dropdown-menu { + position: fixed; + top: 58px; + left: 0px; + right: 0px; + bottom: 50px; + width: 100% !important; + overflow: auto !important; + overflow-x: hidden !important; + } + #topbar-second .dropdown-menu li { + height: auto !important; + } + #topbar-second .dropdown-menu li a, + .tabs .dropdown-menu li a { + font-size: 18px !important; + } + .topbar .dropdown-header { + font-size: 18px !important; + } + .topbar .dropdown-header .dropdown-header-link .btn-link { + font-size: 18px !important; + margin-right: 40px; + } + aside.offcanvas-xs { + padding-top: 60px; + padding-bottom: 60px; + } + .coverphoto { + top: 55px; + } + #message-new { + height: 50px; + width: 50px; + background-color: var(--link-color); + line-height: 50px; + font-size: 24px; + text-align: center; + border-radius: 100%; + } + #message-new a { + color: white !important; + opacity: 1; + } + #message-new:hover, + #message-new:focus { + box-shadow: 0 0 100px rgba(0,0,0,.2); + } +} +/* Narrow Screen Phones in Portrait Orientation + ============================================ +*/ +@media screen and (max-width: 400px) and (orientation: portrait) { + /* remove action button labels if screen is too narrow */ + .wall-item-actions-row button::after { + content: '.'; + color: transparent; + } + /* NOTE: cannot simply empty or display none or button alignment gets messed up! */ +} +/* Narrow Screen Phones in Landscape Orientation + ============================================== +*/ +@media screen and (max-height: 400px) and (orientation: landscape) { + #topbar-first { + transition-duration: .5s; + transition-property: bottom; + bottom: -55px; + } + header #banner { + background-color: var(--nav-bg); + border-radius: 8px; + z-index: 1030; + } + #topbar-first .navbar-toggle[data-target="aside"] { + position: fixed !important; + left: 10px; + bottom: 10px; + transition-duration: .5s; + background-color: var(--link-color); + color: white; + height: 50px; + width: 50px; + border-radius: 100%; + line-height: 32px; + } + #topbar-first .navbar-toggle[data-target="#search-mobile"], + #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed) { + position: fixed !important; + top: auto; + bottom: 10px; + right: 10px; + transition-duration: .5s; + background-color: var(--link-color) !important; + color: white; + height: 50px; + width: 50px; + border-radius: 100% !important; + line-height: 32px; + } + #topbar-first .navbar-toggle[data-target="#search-mobile"]:hover, + #topbar-first .navbar-toggle[data-target="#search-mobile"]:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.2); + } + .fa-fw { + width: auto; + } + #topbar-first .offcanvas-right-toggle { + top: -2px; + right: 10px; + padding: 0 !important; + } + #topbar-first .nav > .account { + top: -5px; + right: 5px; + } + #main-menu img { + border: 5px solid var(--link-color); + border-radius: 100%; + box-sizing: unset; + } + #search-mobile { + top: 40% !important; + border: 10px solid var(--link-color); + border-radius: 8px; + left: 50%; + width: 80%; + margin-left: -40%; + box-shadow: 0 0 50px rgba(0,0,0,.75); + } + #search-mobile .col-xs-12 { + background-color: var(--nav-bg); + } + #topbar-second { + transition-duration: .5s; + 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, + 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:focus { + border-radius: 100% !important; + } + #topbar-first .topbar-actions { + z-index: 1070; + } + /* if notifications is left open when phone is rotated */ + #nav-notifications-menu { + top: 0; + bottom: 0; + z-index: 10000; + } + #offcanvasUsermenu { + top: 0px; + } + #offcanvasUsermenu li:first-of-type img { + display: none; + } + #offcanvasUsermenu li:first-of-type { + font-weight: 700; + } + .offcanvas-right-overlay { + top: 0px; + } + .row:has(.coverphoto) #content { + margin-top: 200px; + } + .coverphoto { + top: 0px; + } + } +/* LOGIN AND INFO SCREENS */ +.mod-home .navbar, +.mod-home #topbar-second{ + background-color: transparent !important; +} +.mod-home #nav-about { + background-color: var(--link-color); + height: 50px; + width: 50px; + color: white !important; + border-radius: 100% !important; + right: 15px; +} + .mod-home #nav-about:hover, +.mod-home #nav-about:focus { + background-color: var(--link-color) !important; + box-shadow: inset 0 0 100px rgba(0,0,0,.1); +} +.mod-home #nav-about .fa-info { + line-height: 24px; + width: auto; + display: block; +} + @media screen and (max-width: 768px){ + .mod-home #nav-about .fa-info { + line-height: 32px; + } + } \ No newline at end of file diff --git a/bookface_light.php b/bookface_light.php index 74a30ac..18af06d 100644 --- a/bookface_light.php +++ b/bookface_light.php @@ -7,26 +7,31 @@ * * Name: Bookface Light * Licence: AGPL - * Author: Kristi H. @kmh@friendica.world feb @feb@loma.ml + * Author: Kristi H. @kmh@friendica.world feb @feb@loma.ml Phil phil@loma.ml * Overwrites: nav_bg, nav_icon_color, background_color, background_image, contentbg_transp - * Accented: Yes - * Version: 1.0 + * Accented: yes + * Version: 1.3 */ - +use Friendica\DI; require_once 'view/theme/frio/php/PHPColors/Color.php'; $accentColor = new Color($scheme_accent); - +$customColor = DI::pConfig()->get($uid, 'frio', 'link_color') ?: ''; +if ($customColor){ + $customColor = new Color(''.$customColor.''); +} +$menu_background_hover_color = ($customColor) ? '#'.$customColor->lighten(45) : '#'.$accentColor->lighten(45); $nav_bg = '#ffffff'; -$nav_icon_color = '#606637'; -$link_color = '#' . $accentColor->lighten(10); - // override ugly blue accent color - if ( $link_color == "#33a2e0" ){ +$background_color = '#f2f4f7'; +$link_color = ($customColor) ? '#'.$customColor->getHex() : '#'.$accentColor->lighten(10); + // override ugly blue accent color and prevent setting accent to nav or bg color + if ( $link_color == "#33a2e0" || $link_color == $nav_bg || $link_color == $background_color ){ $link_color = "#0066ff"; } -$background_color = '#f2f4f7'; +$nav_icon_color = '#65686C'; $background_image = ''; $contentbg_transp = 100; -$menu_background_hover_color = '#' . $accentColor->lighten(45); $font_color = '#313131'; $font_color_darker = '#333'; + + From e964a6aece5ebdbe5853dd59d5c79582688297da Mon Sep 17 00:00:00 2001 From: oldkid Date: Wed, 12 Feb 2025 04:25:07 +0100 Subject: [PATCH 3/3] new Post --- bookface_auto.css | 2 +- bookface_dark.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 1908b2e..598a79f 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -23,7 +23,7 @@ /* LOCALIZE pseudo-element text below */ --sign-in-text: 'Sign-In'; - --compose-text: 'Compose'; + --compose-text: 'New Post'; --new-note-text: 'New Note'; --save-search-text: 'Save Search'; --follow-tag-text: 'Follow Tag'; diff --git a/bookface_dark.css b/bookface_dark.css index 9721916..47ab5f4 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -23,7 +23,7 @@ /* LOCALIZE pseudo-element text below */ --sign-in-text: 'Sign-In'; - --compose-text: 'Compose'; + --compose-text: 'New Post'; --new-note-text: 'New Note'; --save-search-text: 'Save Search'; --follow-tag-text: 'Follow Tag';