From 99bdff4a45726735c7d79f69ee31f183c360c4a5 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 27 Jan 2025 03:45:04 +0000 Subject: [PATCH 001/268] color+position of Admin SAVE buttons --- bookface_dark.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/bookface_dark.css b/bookface_dark.css index 1b58a4b..8e5526c 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -281,6 +281,7 @@ box-sizing: border-box; /* Make Submit Buttons Pretty */ .settings-submit, button[type="submit"], + input[type="submit"], #photos-upload-submit { background-color: var(--link-color) !important; color: white !important; @@ -297,6 +298,8 @@ box-sizing: border-box; .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; @@ -316,7 +319,8 @@ box-sizing: border-box; .panel-footer { background-color: var(--nav-bg) !important; } - .panel-footer button[type="submit"]{ + .panel-footer button[type="submit"], + .panel-footer input[type="submit"] { float: right !important; margin-left: 5px; } From 3a9c1f9ee5914859523977be9742e5ded8d7f89a Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 27 Jan 2025 03:46:32 +0000 Subject: [PATCH 002/268] color+position of Admin SAVE buttons --- bookface_light.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index f9c6f56..cb76ede 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -240,6 +240,7 @@ /* Make Submit Buttons Pretty */ .settings-submit, button[type="submit"], + input[type="submit"], #photos-upload-submit { background-color: var(--link-color) !important; color: white !important; @@ -254,6 +255,8 @@ .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; @@ -273,7 +276,8 @@ .panel-footer { background-color: var(--nav-bg) !important; } - .panel-footer button[type="submit"]{ + .panel-footer button[type="submit"], + .panel-footer input[type="submit"] { float: right !important; margin-left: 5px; } From 6053ac432130c335223afa6bbf2f51c947e8cbbd Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 27 Jan 2025 03:59:08 +0000 Subject: [PATCH 003/268] TOS "SAVE" button normalized --- bookface_dark.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/bookface_dark.css b/bookface_dark.css index 8e5526c..1dace83 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -334,6 +334,15 @@ box-sizing: border-box; margin-left: 5px !important; margin-bottom: 20px !important; } + input[name="page_tos"]{ + float: right; + padding: 8px; + } + .submit::after{ + content: ''; + display: block; + clear: both; + } /* Compose Window */ #upload-photo { background-color: var(--link-color) !important; From 09410d6b6201a451f27316745083cc819dd5a67e Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 27 Jan 2025 03:59:40 +0000 Subject: [PATCH 004/268] TOS "SAVE" button normalized --- bookface_light.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/bookface_light.css b/bookface_light.css index cb76ede..07ed5dd 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -291,6 +291,15 @@ margin-left: 5px !important; margin-bottom: 20px !important; } + input[name="page_tos"]{ + float: right; + padding: 8px; + } + .submit::after{ + content: ''; + display: block; + clear: both; + } /* Other people profiles */ #mention-link { background-color: var(--link-color) !important; From e2714a52ff7f8ebf956b6effa6479bda17b6ca56 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 27 Jan 2025 04:14:03 +0000 Subject: [PATCH 005/268] Admin Reload Addons button --- bookface_dark.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/bookface_dark.css b/bookface_dark.css index 1dace83..c71c94a 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -279,6 +279,7 @@ box-sizing: border-box; margin-top: 10px; } /* Make Submit Buttons Pretty */ + #adminpage a.btn, .settings-submit, button[type="submit"], input[type="submit"], @@ -294,6 +295,8 @@ box-sizing: border-box; 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, @@ -329,6 +332,9 @@ box-sizing: border-box; display: block; clear: both; } + #addonslist { + margin-top: 20px; + } #settings-server button[type="submit"] { float: right !important; margin-left: 5px !important; From f797bb34d14ce0dc0685dc0f9e13063d29c4c96a Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 27 Jan 2025 04:15:01 +0000 Subject: [PATCH 006/268] Admin Reload Addons button --- bookface_light.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/bookface_light.css b/bookface_light.css index 07ed5dd..d15b842 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -238,6 +238,7 @@ margin-top: 10px; } /* Make Submit Buttons Pretty */ + #adminpage a.btn, .settings-submit, button[type="submit"], input[type="submit"], @@ -251,6 +252,8 @@ 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, @@ -286,6 +289,9 @@ display: block; clear: both; } + #addonslist{ + margin-top: 20px; + } #settings-server button[type="submit"] { float: right !important; margin-left: 5px !important; From 1cf5df7fee4b6b2bc014c1eb8c19d148eacc9c42 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 27 Jan 2025 04:22:18 +0000 Subject: [PATCH 007/268] Admin "Save" buttons Page Logs Republish Directory --- bookface_dark.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/bookface_dark.css b/bookface_dark.css index c71c94a..106eeaa 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -340,9 +340,11 @@ box-sizing: border-box; margin-left: 5px !important; margin-bottom: 20px !important; } + input[name="page_logs"], + input[name="republish_directory"], input[name="page_tos"]{ float: right; - padding: 8px; + padding: 8px; } .submit::after{ content: ''; From 029003dc76ee134f3212641ff4f244709a542a81 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 27 Jan 2025 04:23:27 +0000 Subject: [PATCH 008/268] Admin "Save" buttons Page Logs Republish Directory --- bookface_light.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/bookface_light.css b/bookface_light.css index d15b842..33c5493 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -297,6 +297,8 @@ margin-left: 5px !important; margin-bottom: 20px !important; } + input[name="page_logs"], + input[name="republish_directory"], input[name="page_tos"]{ float: right; padding: 8px; From 1ec27fca5f7a36be246bb09d6c42d703384c8121 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 27 Jan 2025 04:26:37 +0000 Subject: [PATCH 009/268] Admin probe button --- bookface_light.css | 1 + 1 file changed, 1 insertion(+) diff --git a/bookface_light.css b/bookface_light.css index 33c5493..82009c6 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -297,6 +297,7 @@ margin-left: 5px !important; margin-bottom: 20px !important; } + #probe button[type="submit"], input[name="page_logs"], input[name="republish_directory"], input[name="page_tos"]{ From 522f3963f91a0d4d42ae9f407eabc768b7ab0285 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 27 Jan 2025 04:27:16 +0000 Subject: [PATCH 010/268] Admin Probe button --- bookface_dark.css | 1 + 1 file changed, 1 insertion(+) diff --git a/bookface_dark.css b/bookface_dark.css index 106eeaa..2835b53 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -340,6 +340,7 @@ box-sizing: border-box; margin-left: 5px !important; margin-bottom: 20px !important; } + #probe button[type="submit"], input[name="page_logs"], input[name="republish_directory"], input[name="page_tos"]{ From 55d397923daaeeb85b07226b6d3aa9f856b425aa Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 27 Jan 2025 04:40:48 +0000 Subject: [PATCH 011/268] streamlined admin submit alignment --- bookface_dark.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 2835b53..5487c5b 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -340,12 +340,13 @@ box-sizing: border-box; margin-left: 5px !important; margin-bottom: 20px !important; } - #probe button[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; } .submit::after{ content: ''; From ccad0b8d566f4bf21d0966baa2e785ed2528b05f Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 27 Jan 2025 04:41:40 +0000 Subject: [PATCH 012/268] Streamlined admin submit alignment --- bookface_light.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index 82009c6..6519b65 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -297,7 +297,8 @@ margin-left: 5px !important; margin-bottom: 20px !important; } - #probe button[type="submit"], + #adminpage button[type="sbumit"], + input[type="submit"], input[name="page_logs"], input[name="republish_directory"], input[name="page_tos"]{ From 3177bf41d3244117bca5411f873ba17241022e65 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 27 Jan 2025 23:09:03 +0000 Subject: [PATCH 013/268] Minor tweaks * Brand text styled and positioned * Advanced Content Filter add-on help table spill fixed. * Added "Sign-In" label to button * Menu overflow-x now hidden. --- bookface_light.css | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index 6519b65..a28114e 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -117,6 +117,14 @@ height: 40px !important; width: 40px !important; } + #navbar-brand-text { + line-height: 40px; + font-weight: 700; + color: var(--link-color) !important; + } + #nav-login::before{ + content: 'Sign-In'; + } .topbar ul.nav { left: 50% !important; margin-left: -25% !important; @@ -173,6 +181,7 @@ #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; @@ -936,7 +945,13 @@ #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; +} @media screen and (max-width: 1280px) { #search-box { From 722db8597223e5621d38a2d132c279c59f0d3049 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 27 Jan 2025 23:11:12 +0000 Subject: [PATCH 014/268] Minor tweaks * Brand text styled and positioned * Advanced Content Filter add-on help table spill fixed. * Added "Sign-In" label to button * Menu overflow-x now hidden. --- bookface_dark.css | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/bookface_dark.css b/bookface_dark.css index 5487c5b..1383e32 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -123,6 +123,14 @@ header #banner { height: 40px !important; width: 40px !important; } + #navbar-brand-text { + line-height: 40px; + font-weight: 700; + color: var(--link-color) !important; + } + #nav-login::before{ + content: 'Sign-In'; + } .topbar ul.nav { left: 50% !important; margin-left: -25% !important; @@ -183,6 +191,7 @@ header #banner { } #nav-user-menu { min-width: 250px !important; + overflow-x: hidden; } .nav-pills .dropdown-menu li a, .nav-pills .dropdown-menu li .btn-link, @@ -1004,7 +1013,13 @@ aside .widget li:hover { #photos-upload-perms button[data-toggle="modal"]:focus { background-color: rgba(255,255,255,.1) !important; } - +/* ADD-ONS */ +.advancedcontentfilter-content-wrapper table td:nth-of-type(2) { + word-wrap: anywhere; +} +.advancedcontentfilter-content-wrapper pre { + margin-top: 20px; +} @media screen and (max-width: 1280px) { #search-box { width: 18% !important; From d5b2eef546053fe07a25baba3d4217ee63b1ba32 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Tue, 11 Feb 2025 21:30:32 +0000 Subject: [PATCH 015/268] Replaced file with v1.3 --- bookface_dark.css | 1290 +++++++++++++++++++++++++++++++++++++++------ 1 file changed, 1143 insertions(+), 147 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 1383e32..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; - + 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 #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: 'Compose'; + 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, @@ -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'; + 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'; + 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; } @@ -796,7 +950,29 @@ aside .widget, 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; } @@ -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,6 +1234,11 @@ 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, @@ -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; } } +/* 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,35 +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; - } +/* 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 From f34d7774dcf90a65c29e42751bc462651e9b0fc4 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Tue, 11 Feb 2025 21:31:07 +0000 Subject: [PATCH 016/268] Replace bookface_dark.php with v1.3 --- bookface_dark.php | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/bookface_dark.php b/bookface_dark.php index cac1262..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.2 + * 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'; From 458ba7dda4df39c99df0052651d3c4b4d78161ac Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Tue, 11 Feb 2025 21:31:29 +0000 Subject: [PATCH 017/268] Replace bookface_light.css with v1.3 --- bookface_light.css | 1262 ++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 1160 insertions(+), 102 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index a28114e..f4fd6c3 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: '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: #65686C !important; - + 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 { 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: 'Compose'; + 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 { @@ -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; @@ -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'; + 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'; + 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; } @@ -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; } @@ -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,6 +1233,11 @@ } .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, @@ -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,56 +1286,779 @@ } .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%; } - - @media screen and (max-width: 1280px) { - #search-box { - width: 18% !important; - } - #search-save { - width: 140px !important; - } +#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; + #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; } - } - @media screen and (max-width: 768px){ - #topbar-first .navbar-toggle[data-target="#search-mobile"]{ - position: fixed !important; - left: 15%; + #topbar-first .topbar-nav .nav-segment { + margin: 0px; } #search-mobile { - top: 110px !important; + top: 60px !important; } - .wall-item-container iframe{ - aspect-ratio: 5/4; + /* 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; } - @media screen and (max-width: 480px){ - #topbar-first .navbar-toggle[data-target="#search-mobile"]{ - left: 10%; + #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; } - .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'; + #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 From 15b587cdf4e433e20539fccbea1c8813d300df7c Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Tue, 11 Feb 2025 21:32:01 +0000 Subject: [PATCH 018/268] Replace bookface_light.php v1.3 --- bookface_light.php | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/bookface_light.php b/bookface_light.php index a77e1e5..18af06d 100644 --- a/bookface_light.php +++ b/bookface_light.php @@ -7,27 +7,30 @@ * * 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.2 + * 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 336ee1c3595cb749f416684ea15b1e26eadcba97 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Tue, 11 Feb 2025 21:33:32 +0000 Subject: [PATCH 019/268] Edit README.txt for v1.3 --- README.txt | 306 ++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 291 insertions(+), 15 deletions(-) diff --git a/README.txt b/README.txt index e89d1c2..dda4eca 100644 --- a/README.txt +++ b/README.txt @@ -1,24 +1,153 @@ BOOKFACE FOR FRIENDICA -=============================== +====================== +Version 1.3 -Description: -A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. +**Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. -Disclaimer: This is a Work-In-Progress, use in production at your own risk! +**Disclaimer:** _This is a Work-In-Progress, use in production at your own risk!_ -1. Drop these four files +## INSTALLATION + +1. Drop these four files: + * bookface_auto.css + * bookface_auto.php * bookface_dark.css * bookface_dark.php * bookface_light.css * bookface_light.php -into /friendica/view/theme/frio/scheme/ -2. Go to Settings > Display > Theme Customization > Appearance - a. Select either "Bookface Light" or "Bookface Dark" - b. (optional) Select Accent Color - c. click "Submit" button. +into _/friendica/view/theme/frio/scheme/_ -NOTES: +2. Go to _Settings > Display > Theme Customization > Appearance_ + 1. Select either "Bookface Light", "Bookface Dark", or "Bookface Auto" + 2. (optional) Select Accent Color + 3. click "Submit" button. + +## CUSTOMIZATION/LOCALIZATION + +Starting with Version 1.3 it is much easier for server admins to customize and localize Bookface. Everything you can safely change is now defined in the CSS variables at the top of the stylsheets. You could also override these with another stylesheet loaded after Bookface the redefines the variables. + +### LOCALIZATION + +Bookface uses a number of pseudo-elements to label buttons in the Frio theme. You can easily change these to say something else or to display them in another language: + + /* LOCALIZE pseudo-element text below */ + --sign-in-text: 'Sign-In'; + --compose-text: 'Compose'; + --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'; + +### CUSTOMIZATION + +Some people have found the accent color engagement counts on action buttons distracting or busy. You can easily change it be redefining the variables. You could either set it to another already defined variable or set it to a specific color: + + --count-color: black; /* make number black */ + --count-bg: var(--nav-icon-color); /* makes it same color as button */ + + --count-bg: black; /* makes the background of counts black, font is white */ + + --count-color: purple; /* number is purple */ + --count-color: rgba(0,0,0,.5); /* semi-transparent gray */ + +You get the idea. + +You should _avoid_ redefining the default Frio color variables because if a user on your server changes the "Theme Customization" settings you'd be overriding the user's color scheme. The default variables you should *NOT* override globally are: + + --nav-bg + --link-color + --nav-icon-color + --background-color + --contentbg-transp + --font-color + --font-color-darker + --background-image + --menu-background-hover-color + +You _can_ safely globally override: + + --border-color + +Depending on the font(s) you define, you _might_ be able to safely override: + + --global-font-family + +But make sure the font is available to users of your site. Don't assume they have it installed on their system! Either load them remotely using the `` tag or locally using `@font-face`. + +You should *NOT* use the `@import` method to remote load fonts if you can help it because it loads them sequentially and will hurt server performance. So if you're going to load a remote font use the `` method. However you'll need to edit the "Frio" theme _/friendica/view/theme/frio/templates/head.tpl_ file to add something like this: + + + +If the font you want to use is local you'd just need to add something like this to the top of the Bookface stylesheets: + + @font-face{ + font-family: Roboto; + src: url('../font/Roboto-Regular.ttf'); /* or where ever you put it */ + } + +Then set the CSS variable to use it: + + -global-font-family: 'Roboto', sans-serif; + +Some fonts may cause misalignment problems in various places, make sure you test the font before deploying it for everyone. + +### COVER PHOTOS + +From Bookface 1.3 it supports adding a "Cover Photo" to profiles. There are two places you can add the Cover Photo, depending on whether you want it used on all of your profile section pages or if you want it to appear on ONLY your actual profile page. + +Note that this feature ONLY works is recent, modern browsers! Every *current* and *supported* desktop and mobile version should be able to show it, but nothing *unsupoorted* nor released before 2022 will (see caniuse.com entry for "has()" for specific verssions). + +#### ON ALL PROFILE PAGES + +1. Go to _Settings > Profile > Personal_ + +2. In the "Description" box add something like: + +`[class=coverphoto][img=https://friendica.server/photo/1649cc674810612350.png]Cover photo description alt-text here[/img][/class]` + +3. Submit your changes. + +For people who are not using the Bookface scheme they will simply see a thumbnail of your Cover Photo in the sidebar with your Profile Description. For people who ARE using the Bookface scheme they will see your Cover Photo on your Profile, Conversations, etc. pages that have a sidebar. + +#### ON JUST YOUR PROFILE PAGE + +1. Go to _Settings > Profile > Custom Profile Fields_ + +2. Enter nothing in the "Label" field. + +3. Enter something like this in the "Value" field: + +`[class=coverphoto][img=https://friendica.server/photo/1649cc674810612350.png]Cover photo description alt-text here[/img][/class]` + +4. Check the Permissions for the field. If for some reason you only want people in certain Circles to see your Cover Photo you can set that here. + +5. Submit your changes. + +People who are not using the Bookface scheme will see a thumbnail of your Cover Photo in your Profile details. The Cover Photo will only appear on your Profile page. + +#### Multiple Cover Photos + +Technically you can have one Cover Photo for our actual Profile page by putting it in a Custom Field and another one in the Profile Description that will be shown on the other profile pages. But if you want to get really creative you can also have multiple images per Cover Photo. + +While not really recommended you can place up to four images in the Cover Photo container and Bookface will show them as a collage of stripes. For example: + +`[class=coverphoto][img=https://friendica.server/photo/1649cc674810612350.png]Cover photo 1 description alt-text here[/img][img=https://friendica.server/photo/1649cc677034958382350.png]Cover photo 2 description alt-text here[/img][img=https://friendica.server/photo/1649c038920505603674810612350.png]Cover photo 3 description alt-text here[/img][img=https://friendica.server/photo/3464771649cc674810612350.png]Cover photo 4 description alt-text here[/img][/class]` + +Extras spaces are okay, but just make sure there are no carriage returns or other elements inside `[class]..[/class]` or it will mis-count the images and size them wrong. Also keep in mind people not using Bookface will see three thumbnail images on your profile, only Bookface users will see the striped collage. + + +## GENERAL NOTES: * This theme HIDES the attachment upload button in the file browser since there is no way to manage/delete uploaded files, and this is confusing to users. * Overrides nav_bg, nav_icon_color, background_color, background_image, and contentbg_transp @@ -26,8 +155,151 @@ NOTES: * This scheme is still being revised as new things to style are discovered. * This scheme was adapted from a user stylesheet for use in browsers on the client-side. -CHANGELOG: -1.2 +## KNOWN ISSUES + +1. Safari and SVG Masks + +SVG masks appear to be terribly broken in Safari (well WebKit in general). maskContentUnits won't work properly on Mobile Safari and that causes the mask to be in the wrong position to...mask. If there is a element in the HTML it can mess up references to SVG images that exist within the DOM. You have to make sure your server is actually serving up .svg files with the mimetype `"image/svg+xml"` or it won't work. Your clipPath element has to be inside a element. Safari apparently wants `"xlink:href"` instead of just "href" which means you also need to namespace for `"xmlns:xlink="http://www.w3.org/1999/xlink"` + +If the logo was just an inline SVG set to use the fill color that would be fine. But all the logo SVGs are for masking. There are two PNG images for masks, which DO work in Safari, but they look too blurry. So I switched it to the icon font logo. Which at least is crisp, though it is a bit heavier/thicker/bolder than the SVG version. + +2. Old iOS Devices + +There are numerous places in the stylesheets that use `":has()"` and older versions of Safari bundled with outdated versions of iOS do not understand it and will not display things correctly. If you have, for example, and old iPad Mini stuck on an earlier version of iOS, say 9.2.x, you may encounter random un-clickable and un-scrollable elements with any "frio" scheme. Older devices cannot display the new Cover Photo feature correctly. + +4. Phones with Narrow Screens + +You may notice on many (if not most) phones in portrait mode the Action Buttons do not have text labels on them. If you turn your phone to landscape mode the labels will become visible. This is on purpose! There simply is not enough room to display the labels in a viewport narrower than 400 pixels wide, especially if ALL possible buttons are enabled and being shown. Initially I tried styling that only removed the labels if there were too many buttons. But the inconsistency made it look like the CSS was broken or something. Also some mobile browsers couldn't understand `":has()"` or `":nth-of-type/:last-of-type"` etc. The best solution across devices was to simply *not* show the labels for any of them. + +## CONTRIBUTING + +To make updates and maintenance easier the line numbers between the "Light" and "Dark" stylesheets have been synchronized, and the first half of the "Auto" version matches the "Light" stylesheet. This way if you change one you can more easily find the same line in the corresponding files to make the same change there, or if it is not needed for that one, add comment lines to keep the line numbers in sync. + +In some places fallbacks are included to accommodate older browsers or mobile devices that do not understand more modern code. In general the target for this scheme are browsers released within the last couple of years. + +Just because it looks right or works in your preferred browser or device doesn't mean it will work for everyone. Try to thoroughly *test* your edits in desktop and mobile Chromium-based, Mozilla-based, and Webkit-based browsers before submitting a pull-request. + +## HOW SCHEMES WORK IN FRIO + +Each "Frio" theme "scheme" consists of two files with the same name but a different extension, one is `.php` and the other is `.css` but the latter is not loaded directly as a stylesheet. These two files must be inside the `/frio/shemes/` folder, but will not be discovered by the theme unless they have a properly formatted header: + +**Example .php file header:** + + /* + * Copyright (C) 2010-2025, the Friendica project + * SPDX-FileCopyrightText: 2010-2025 the Friendica project + * + * SPDX-License-Identifier: AGPL-3.0-or-later + * + * Name: Theme Name + * Licence: AGPL + * Author: Names and @handles of main contributors + * Overwrites: nav_bg, nav_icon_color, background_color, background_image, contentbg_transp + * Accented: yes + * Version: X.x + */ + +**Example .css file header:** + + /* + Name : Theme Name + Version : 1.3 + Licence : AGPL + Created on : 09.02.2025 + Author : Names and @handles of main contributors + */ + +These into the _/frio/style.php_ file, first the PHP file to get any color variables that have been set. **You cannot add new variables to your PHP file!** The `style.php` defines these variables in an array (to which your scheme cannot add new entries). These are the ones you can set in your PHP file: + + $nav_bg + $nav_icon_color + $nav_icon_hover_color + $link_color + $link_hover_color + $menu_background_hover_color + $nav_icon_color + $menu_background_hover_color + $background_color + $contentbg_transp + $background_image + $background_size_img + $background_repeat + $login_bg_image + $login_bg_color + $font_color_darker + $font_color_lighter + $font_color + +Next, the `style.php` reads in the *contents* of your CSS file and concatenates it to the end of the Frio theme _/frio/css/style.css_. Then it does a simple string replace operation on the merged stylesheet contents to replace the variable names with the values set in your PHP scheme file. This is essentially variable validation and why you can't add new variables, the will neither get read in nor replaced. Finally the `style.php` generates the merged stylesheet. + +If you want users to be able to pick one of the predefined "Accent Color" options your PHP file needs to include: + + require_once 'view/theme/frio/php/PHPColors/Color.php'; + $accentColor = new Color($scheme_accent); + +If you want users to be able to aslo select a completely custom "Link Color" your PHP file needs to include: + + use Friendica\DI; + $customColor = DI::pConfig()->get($uid, 'frio', 'link_color') ?: ''; + if ($customColor){ $customColor = new Color(''.$customColor.''); } + +I could *only* get "Link Color" to work by explicitly casting the type to string when creating a new Color object. Then you need to conditionally check for a "Link Color" and if one is found use it, but if it is not found then fallback to using some other color (ideally the "Accent Color"): + + $link_color = ($customColor) ? '#'.$customColor->getHex() : '#'.$accentColor->getHex(); + +### Custom CSS Variables + +While you cannot simply define new PHP variables for setting colors, etc., you *can* do that in your scheme stylesheet. At the beginning simply define them in a `:root{..}` entry like so: + + --my-custom-variable-name: #hexcolor; + +And then use it in your stylesheet like so: + + .classname { + color: var(--my-custom-variable-name); + } + +I figured out how the "Frio" theme worked by looking at the code. I may not be 100% correct about it since I did not create the theme. If someone knows more and I'm wrong about any of this please correct this document at https://gitlab.com/randompenguin/bookface + +## CHANGELOG: +1.3 (11 Feb 2025) +* Added "Auto" version that automatically detects OS light/dark color mode and applies it. +* Color and position of Admin "Save" buttons normalized to rest of settings. +* Normalized Admin "Save/Submit" buttons style and position (including all Add-Ons settings). +* Brand Text positioned and styled to match color scheme +* Advanced Content Filter add-on help table overflow fixed. +* Added "Sign-In" text to button when not signed in because a friend specifically said he couldn't figure out WHERE to sign-in/register. +* User Menu overflow-x is now hidden (who likes horizontal scrollbars?) +* Selected nav on :focus styling fixed. +* Edit Photo image no longer spills out of container on mobile. +* "Submit" photo edits button moved right. +* Fixed photo album thumbnails spilling out of page container. +* Made spacing of photo album thumbnails even. +* Profile photo in second toolbar mini-vcard rounded +* Landscape on small screen phones hides toolbars and displays limited buttons +* Mobile mode completely revamped for modern app-like behavior +* Support for profile "Cover Photo" +* Added CSS variables to easily localize pseudo-element text labels +* Added CSS variable to separately set engagement count background color (default is still link color) +* CSS line numbers synchronized between light and dark stylesheets for easier maintenance +* Profile photos in Messages are now circular +* Event Card now has roundy buttons +* popover/hovercards borders and arrows restyled +* Tags, Mentions, and Categories buttons restyled larger but less distracting. +* Shared post now has background color of a top-level post. +* New Message button styled for Mobile +* Brand Icon switched from SVG to icon font because SVG masks are broken in Webkit browsers. +* Light and Dark versions now support custom Link Color, with error catching to prevent setting it to the same color as nav or page background. +* Event Response button positions fixed for old Safari Mobile. +* Login screen layout fixed [GitLab issue #2] +* Info screen fixed. +* Fixed overflow dropdown menu hover effect +* Fixed overflow dropdown menu active styling +* "Compose" button on Personal Notes page changed to "New Note" +* Added lock icon to "Personal Notes" header to make it clear they are not public. + + +1.2 (25 Jan 2025) * "Save" buttons for "Remote Servers" settings normalized to right. * "Close" button and open "Compose" button restyled, "Close" enlarged for better touch target. * Open Compose Page button styled to match roundy buttons. @@ -41,11 +313,11 @@ CHANGELOG: * Fixed "Like/Dislike" on photos showing label twice. * TopBar Second vcard short photo made round. -1.1 +1.1 (21 Jan 2025) * Fixes long lists of tags/mentions spilling out of post or profile container, forces them to wrap to multiple rows as necessary. * Adds spacing to left of multiple settings buttons floated to right. -1.0 +1.0 (20 Jan 2025) * Initial release of server-side version * Accent colors now work (server-side version only) * Compose Title border radius normalized to rest of inputs. @@ -74,9 +346,13 @@ CHANGELOG: 0.1 (12 Jan 2025) * Based on original bookface.css user stylesheet (light mode only) +--- + Contributors: Kristi H. @kmh@friendica.world feb @feb@loma.ml +Phil phil@loma.ml License: AGPL 3.0 or Later + From f6e53cbace031fcfa699e56951aba4efad346425 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Tue, 11 Feb 2025 21:34:21 +0000 Subject: [PATCH 020/268] Upload New Auto version --- bookface_auto.css | 4181 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 4181 insertions(+) create mode 100644 bookface_auto.css 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 From aeac2ab12b79a52ca6cbab053e247c913a432737 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Tue, 11 Feb 2025 21:34:44 +0000 Subject: [PATCH 021/268] Upload New Auto version --- bookface_auto.php | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 bookface_auto.php 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'; From 3a375de22498b395403dbc64a44ec431cb4ec80e Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Tue, 11 Feb 2025 21:35:48 +0000 Subject: [PATCH 022/268] Switched README to markdown --- README.txt => README.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename README.txt => README.md (100%) diff --git a/README.txt b/README.md similarity index 100% rename from README.txt rename to README.md From adc215cdc4d98247ba9378f91b8fac28b44394d8 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 12 Feb 2025 02:12:22 +0000 Subject: [PATCH 023/268] Minor edits for clarity. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index dda4eca..519d10c 100644 --- a/README.md +++ b/README.md @@ -209,7 +209,7 @@ Each "Frio" theme "scheme" consists of two files with the same name but a differ Author : Names and @handles of main contributors */ -These into the _/frio/style.php_ file, first the PHP file to get any color variables that have been set. **You cannot add new variables to your PHP file!** The `style.php` defines these variables in an array (to which your scheme cannot add new entries). These are the ones you can set in your PHP file: +These PHP file gets read into the _/frio/style.php_ file, to get any color variables that have been set. **You cannot add new variables to your PHP file!** The `style.php` defines these variables in an array (to which your scheme cannot add new entries). These are the ones you can set in your PHP file: $nav_bg $nav_icon_color @@ -230,7 +230,7 @@ These into the _/frio/style.php_ file, first the PHP file to get any color vari $font_color_lighter $font_color -Next, the `style.php` reads in the *contents* of your CSS file and concatenates it to the end of the Frio theme _/frio/css/style.css_. Then it does a simple string replace operation on the merged stylesheet contents to replace the variable names with the values set in your PHP scheme file. This is essentially variable validation and why you can't add new variables, the will neither get read in nor replaced. Finally the `style.php` generates the merged stylesheet. +Next, the `style.php` reads in the *contents* of your CSS file and concatenates it to the end of the Frio theme _/frio/css/style.css_. Then it does a simple string replace operation on the merged stylesheet contents to replace the variable names with the values set in your PHP scheme file. This is essentially variable validation and why you can't add new variables, they will neither get read in nor replaced. Finally the `style.php` generates the merged stylesheet. If you want users to be able to pick one of the predefined "Accent Color" options your PHP file needs to include: From c45b9c93a50bb73d1b936b64404a166480260131 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 12 Feb 2025 16:44:27 +0000 Subject: [PATCH 024/268] Edit README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 519d10c..fb701bc 100644 --- a/README.md +++ b/README.md @@ -349,9 +349,9 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 --- Contributors: -Kristi H. @kmh@friendica.world +Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml -Phil phil@loma.ml +Phil @phil@loma.ml License: AGPL 3.0 or Later From 692118f5ceb408d148c194faebc66dad3253d541 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 12 Feb 2025 16:45:22 +0000 Subject: [PATCH 025/268] Edited contributors --- bookface_auto.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_auto.css b/bookface_auto.css index 1908b2e..d8c47ba 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -3,7 +3,7 @@ Version : 1.3 Licence : AGPL Created on : 11 Feb 2025 - Author : Kristi H. @kmh@friendica.world feb @feb@loma.ml Phil phil@loma.ml + Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ :root { From 36d7208a4584b5712c8d2bd2a3306bd1de567760 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 12 Feb 2025 16:46:03 +0000 Subject: [PATCH 026/268] Edited authors --- bookface_auto.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_auto.php b/bookface_auto.php index 0e3dbce..f2b4035 100644 --- a/bookface_auto.php +++ b/bookface_auto.php @@ -7,7 +7,7 @@ * * Name: Bookface Auto Color Mode * Licence: AGPL - * Author: Kristi H. @kmh@friendica.world feb @feb@loma.ml Phil phil@loma.ml + * Author: Pygoscelis Papua @randompenguin@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.3 From 7e3c99b221746874b4dc3d90be6ecf966f505a04 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 12 Feb 2025 16:47:13 +0000 Subject: [PATCH 027/268] Edited authors --- bookface_dark.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_dark.css b/bookface_dark.css index 9721916..591a304 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -3,7 +3,7 @@ Version : 1.3 Licence : AGPL Created on : 11 Feb 2025 - Author : Kristi H. @kmh@friendica.world feb @feb@loma.ml Phil phil@loma.ml + Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ :root { From 3d2300507b7119f7b7c8b25c8a45a0a8106b5a74 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 12 Feb 2025 16:47:53 +0000 Subject: [PATCH 028/268] Edited authors --- bookface_dark.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_dark.php b/bookface_dark.php index 145d494..c541ce0 100644 --- a/bookface_dark.php +++ b/bookface_dark.php @@ -7,7 +7,7 @@ * * Name: Bookface Dark * Licence: AGPL - * Author: Kristi H. @kmh@friendica.world feb @feb@loma.ml Phil phil@loma.ml + * Author: Pygoscelis Papua @randompenguin@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.3 From 3a0a242aeeba5df4e8f249ccb05ddfed14e6243d Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 12 Feb 2025 16:48:41 +0000 Subject: [PATCH 029/268] Edited authors --- bookface_light.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index f4fd6c3..73a3433 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -3,7 +3,7 @@ Version : 1.3 Licence : AGPL Created on : 11 Feb 2025 - Author : Kristi H. @kmh@friendica.world feb @feb@loma.ml Phil phil@loma.ml + Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ :root { From f69b3c99016087e2e7993f14b785710138df6f54 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 12 Feb 2025 16:49:16 +0000 Subject: [PATCH 030/268] Edited authors --- bookface_light.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_light.php b/bookface_light.php index 18af06d..abcd86b 100644 --- a/bookface_light.php +++ b/bookface_light.php @@ -7,7 +7,7 @@ * * Name: Bookface Light * Licence: AGPL - * Author: Kristi H. @kmh@friendica.world feb @feb@loma.ml Phil phil@loma.ml + * Author: Pygoscelis Papua @randompenguin@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.3 From f8303b61849253576c24b614ee39ee32ad67a12e Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 12 Feb 2025 22:34:27 +0000 Subject: [PATCH 031/268] textarea resize fix focused to settings --- bookface_auto.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/bookface_auto.css b/bookface_auto.css index d8c47ba..68518ec 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -502,7 +502,7 @@ clear: both; } /* make textareas resize in the correct direction */ - textarea { + body.mod-settings textarea { resize: vertical !important; } /* Other people profiles */ @@ -2555,6 +2555,9 @@ header #banner { #photo-edit-end { clear: both; } + body.mod-settings textarea { + resize: vertical !important; + } /* Other people profiles */ #mention-link { border-radius: 8px !important; From ef667e81e10050a9ff7db90da0945a2bb3392169 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 12 Feb 2025 22:35:08 +0000 Subject: [PATCH 032/268] textarea resize fix focused to settings --- bookface_dark.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_dark.css b/bookface_dark.css index 591a304..5968ecd 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -503,7 +503,7 @@ header #banner { clear: both; } /* make textareas resize in the correct direction */ - textarea { + body.mod-settings textarea { resize: vertical !important; } /* Other people profiles */ From 7dd68c4eafa836c0e8e7f5104c4adb1ee3f1be22 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 12 Feb 2025 22:35:49 +0000 Subject: [PATCH 033/268] textarea resize fix focused to settings --- bookface_light.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index 73a3433..a8455c4 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -502,7 +502,7 @@ clear: both; } /* make textareas resize in the correct direction */ - textarea { + body.mod-settings textarea { resize: vertical !important; } /* Other people profiles */ From 8ee034079472d84ee4c5df2fae1096de637f7c2b Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 12 Feb 2025 23:56:53 +0000 Subject: [PATCH 034/268] * fixed file browser scroll height issue * fixed too much padding to body on login page * incremented version number --- bookface_auto.css | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 68518ec..942521a 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,8 +1,8 @@ /* Name : Bookface Auto Color Mode - Version : 1.3 + Version : 1.4 Licence : AGPL - Created on : 11 Feb 2025 + Created on : 12 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -113,11 +113,12 @@ 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 { background-color: rgba(128,128,128,.1) !important; + background-image: none !important; border-radius: 8px !important; color: var(--font-color); } @@ -891,7 +892,9 @@ border-color: transparent !important; background-color: transparent !important; } - + .fbrowser-content-container.justified-gallery { + max-height: 100% !important; + } #jot-title, #jot-category { background-color: #fff !important; @@ -2555,6 +2558,7 @@ header #banner { #photo-edit-end { clear: both; } + /* make textareas resize in the correct direction */ body.mod-settings textarea { resize: vertical !important; } @@ -2980,11 +2984,14 @@ p.wall-item-announce, .fbrowser .folders button:focus { background-color: rgba(255,255,255,.75) !important; } - .fbrowser .folders li:hover, - .fbrowser .folders li:focus { + .fbrowser .folders li:hover, + .fbrowser .folders li:focus { border-color: transparent !important; background-color: transparent !important; -} + } + .fbrowser-content-container.justified-gallery { + max-height: 100% !important; + } #jot-modal .modal-header a, #jot-modal .modal-header .btn-link, #profile-jot-submit-wrapper a, @@ -4155,6 +4162,9 @@ a.tag.label, } } /* LOGIN AND INFO SCREENS */ +body.mod-home { + padding-top: 10px !important; +} .mod-home .navbar, .mod-home #topbar-second{ background-color: transparent !important; From e2c1140aa59b110e9c5df9c2fbab21eadfdada3b Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 12 Feb 2025 23:57:51 +0000 Subject: [PATCH 035/268] incremented version number --- bookface_auto.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_auto.php b/bookface_auto.php index f2b4035..44f47e7 100644 --- a/bookface_auto.php +++ b/bookface_auto.php @@ -10,7 +10,7 @@ * Author: Pygoscelis Papua @randompenguin@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.3 + * Version: 1.4 */ // if there is no cookie create one use Friendica\DI; From 16058db36aeaae7a7f6cf097d826a2cd4f149879 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 13 Feb 2025 00:00:56 +0000 Subject: [PATCH 036/268] * fixed file browser scroll height issue * fixed too much padding to body on login page * incremented version number --- bookface_dark.css | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 5968ecd..cec11af 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,8 +1,8 @@ /* Name : Bookface Dark - Version : 1.3 + Version : 1.4 Licence : AGPL - Created on : 11 Feb 2025 + Created on : 12 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -892,7 +892,9 @@ aside .widget, border-color: transparent !important; background-color: transparent !important; } - + .fbrowser-content-container.justified-gallery { + max-height: 100% !important; + } #jot-title, #jot-category { background-color: rgb(51,51,52) !important; @@ -2040,6 +2042,9 @@ a.tag.label, } } /* LOGIN AND INFO SCREENS */ +body.mod-home { + padding-top: 10px !important; +} .mod-home .navbar, .mod-home #topbar-second{ background-color: transparent !important; From a5768d056a06bebe0eca2efee9852892ddadc97f Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 13 Feb 2025 00:01:49 +0000 Subject: [PATCH 037/268] incremented version number --- bookface_dark.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_dark.php b/bookface_dark.php index c541ce0..66c3917 100644 --- a/bookface_dark.php +++ b/bookface_dark.php @@ -10,7 +10,7 @@ * Author: Pygoscelis Papua @randompenguin@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.3 + * Version: 1.4 */ use Friendica\DI; require_once 'view/theme/frio/php/PHPColors/Color.php'; From 625e4090c254f28b719884b251cb22473213e6cd Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 13 Feb 2025 00:04:05 +0000 Subject: [PATCH 038/268] * fixed file browser scroll height issue * fixed too much padding to body on login page * incremented version number --- bookface_light.css | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index a8455c4..37f50e0 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,8 +1,8 @@ /* Name : Bookface Light - Version : 1.3 + Version : 1.4 Licence : AGPL - Created on : 11 Feb 2025 + Created on : 12 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -152,6 +152,7 @@ .dropdown-menu > li.active:focus > a { color: var(--link-color); background-color: transparent; + background-image: none; } .form-control { background: var(--nav-bg); @@ -891,7 +892,9 @@ border-color: transparent !important; background-color: transparent !important; } - + .fbrowser-content-container.justified-gallery { + max-height: 100% !important; + } #jot-title, #jot-category { background-color: #fff !important; @@ -2035,6 +2038,9 @@ a.tag.label, } } /* LOGIN AND INFO SCREENS */ +body.mod-home { + padding-top: 10px !important; +} .mod-home .navbar, .mod-home #topbar-second{ background-color: transparent !important; From 377ea005746da70b874b9f537ffae053895141c2 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 13 Feb 2025 00:04:44 +0000 Subject: [PATCH 039/268] incremented version number --- bookface_light.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_light.php b/bookface_light.php index abcd86b..758bae6 100644 --- a/bookface_light.php +++ b/bookface_light.php @@ -10,7 +10,7 @@ * Author: Pygoscelis Papua @randompenguin@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.3 + * Version: 1.4 */ use Friendica\DI; require_once 'view/theme/frio/php/PHPColors/Color.php'; From e96ee35da018be8382e585dfb99855b0747b8dde Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 13 Feb 2025 00:11:07 +0000 Subject: [PATCH 040/268] Minor edits, changelog and version updated --- README.md | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index fb701bc..0666beb 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.3 +Version 1.4 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -209,7 +209,7 @@ Each "Frio" theme "scheme" consists of two files with the same name but a differ Author : Names and @handles of main contributors */ -These PHP file gets read into the _/frio/style.php_ file, to get any color variables that have been set. **You cannot add new variables to your PHP file!** The `style.php` defines these variables in an array (to which your scheme cannot add new entries). These are the ones you can set in your PHP file: +TThe PHP file get read into the _/frio/style.php_ file, to get any color variables that have been set. **You cannot add new variables to your PHP file!** The `style.php` defines these variables in an array (to which your scheme cannot add new entries). These are the ones you can set in your PHP file: $nav_bg $nav_icon_color @@ -262,6 +262,15 @@ And then use it in your stylesheet like so: I figured out how the "Frio" theme worked by looking at the code. I may not be 100% correct about it since I did not create the theme. If someone knows more and I'm wrong about any of this please correct this document at https://gitlab.com/randompenguin/bookface ## CHANGELOG: +1.4 (12 Feb 2025) +* Limited textarea resize fix to settings pages +* Edited authors/contributors +* Edited README for clarity +* Switched README from plaintext to markdown +* fixed file browser scroll height issue +* fixed too much padding at top of login page +* Added changelog to user styles README + 1.3 (11 Feb 2025) * Added "Auto" version that automatically detects OS light/dark color mode and applies it. * Color and position of Admin "Save" buttons normalized to rest of settings. From 53f6d920b48da42e16915c654bd4c651776a3703 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 13 Feb 2025 02:36:15 +0000 Subject: [PATCH 041/268] styled content filter buttons --- bookface_light.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/bookface_light.css b/bookface_light.css index 37f50e0..b386173 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1444,6 +1444,12 @@ a.tag.label, border-color: goldenrod !important; color: white !important; } + /* Content Filter Buttons */ + button.content-filter-button { + color: var(--link-color); + background-color: transparent; + border: 1px solid var(--link-color); + } /* Greater than Full-HD Width =========================== */ From a6c163758658e5b2d89b1ddfb59eff075382e5f0 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 13 Feb 2025 02:36:51 +0000 Subject: [PATCH 042/268] styled content filter buttons --- bookface_dark.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/bookface_dark.css b/bookface_dark.css index cec11af..68c3cd5 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1444,6 +1444,12 @@ a.tag.label, border-color: gold !important; color: black !important; } + /* Content Filter Buttons */ + button.content-filter-button { + color: var(--link-color); + background-color: transparent; + border: 1px solid var(--link-color); + } /* Greater than Full-HD Width =========================== */ From 59c46b16d9c3b430a3f24c655361b953c1ad2a51 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 13 Feb 2025 02:51:24 +0000 Subject: [PATCH 043/268] styled content filter buttons added missing mobile compose button styling --- bookface_auto.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/bookface_auto.css b/bookface_auto.css index 942521a..fcd1084 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1447,6 +1447,12 @@ a.tag.label, border-color: goldenrod !important; color: white !important; } + /* Content Filter Buttons */ + button.content-filter-button { + color: var(--link-color); + background-color: transparent; + border: 1px solid var(--link-color); + } /* Greater than Full-HD Width =========================== */ @@ -1831,6 +1837,8 @@ a.tag.label, height: 50px; width: 50px !important; line-height: 50px; + border: none !important; + box-shadow: none !important; } #mention-link span:last-of-type { display: none; From a3b4585097e8da348942be1024c4993170ab10ae Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 13 Feb 2025 20:03:11 +0000 Subject: [PATCH 044/268] * fixed wrong sized items on action drop menus * fixed browser share button display and sizing --- bookface_auto.css | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index fcd1084..ba8c2c2 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -693,7 +693,7 @@ display: inline-block !important; } /* ACTION BUTTON LABELS */ - .wall-item-actions-row button, + .wall-item-actions-row button:not(.button-browser-share), .wall-item-actions-right button { position: relative; display: block; @@ -1078,6 +1078,13 @@ position: relative; top: 1px; } + .wall-item-actions ul button, + .wall-item-actions ul a { + font-size: 14px !important; + color: inherit !important; + line-height: 14px !important; + margin: 0 !important; + } /* little vcard when you scroll down on profiles */ #vcard-short-photo-wrapper img, #nav-short-info .contact-wrapper img { @@ -1921,6 +1928,9 @@ a.tag.label, color: transparent; } /* NOTE: cannot simply empty or display none or button alignment gets messed up! */ + .wall-item-actions-row .button-browser-share::after { + display: none !important; + } } /* Narrow Screen Phones in Landscape Orientation ============================================== @@ -2798,7 +2808,7 @@ p.wall-item-announce, display: inline-block !important; } /* ACTION BUTTON LABELS */ - .wall-item-actions-row button, + .wall-item-actions-row button:not(.button-browser-share), .wall-item-actions-right button { position: relative; display: block; @@ -3207,6 +3217,13 @@ aside .widget li:hover { position: relative; top: 1px; } + .wall-item-actions ul button, + .wall-item-actions ul a { + font-size: 14px !important; + color: inherit !important; + line-height: 14px !important; + margin: 0 !important; + } /* little vcard when you scroll down on profiles */ #vcard-short-photo-wrapper img, #nav-short-info .contact-wrapper img { @@ -4045,6 +4062,9 @@ a.tag.label, color: transparent; } /* NOTE: cannot simply empty or display none or button alignment gets messed up! */ + .wall-item-actions-row .button-browser-share::after { + display: none !important; + } } /* Narrow Screen Phones in Landscape Orientation ============================================== From 37ef2877304d6fd027f9e8911d9fcbb58af101fa Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 13 Feb 2025 20:05:41 +0000 Subject: [PATCH 045/268] * fixed wrong sized items on action drop menus * fixed browser share button display and sizing --- bookface_dark.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/bookface_dark.css b/bookface_dark.css index 68c3cd5..fb44a41 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -693,7 +693,7 @@ aside .widget, display: inline-block !important; } /* ACTION BUTTON LABELS */ - .wall-item-actions-row button, + .wall-item-actions-row button:not(.button-browser-share), .wall-item-actions-right button { position: relative; display: block; @@ -1075,6 +1075,13 @@ aside .widget li:hover { position: relative; top: 1px; } + .wall-item-actions ul button, + .wall-item-actions ul a { + font-size: 14px !important; + color: inherit !important; + line-height: 14px !important; + margin: 0 !important; + } /* little vcard when you scroll down on profiles */ #vcard-short-photo-wrapper img, #nav-short-info .contact-wrapper img { @@ -1922,6 +1929,9 @@ a.tag.label, color: transparent; } /* NOTE: cannot simply empty or display none or button alignment gets messed up! */ + .wall-item-actions-row .button-browser-share::after { + display: none !important; + } } /* Narrow Screen Phones in Landscape Orientation ============================================== From 429228c18f6664de57f84cfb050f9d7d507da2b7 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 13 Feb 2025 20:07:49 +0000 Subject: [PATCH 046/268] * fixed wrong sized items on action drop menus * fixed browser share button display and sizing --- bookface_light.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index b386173..6bb76a2 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -693,7 +693,7 @@ display: inline-block !important; } /* ACTION BUTTON LABELS */ - .wall-item-actions-row button, + .wall-item-actions-row button:not(button-browser-share), .wall-item-actions-right button { position: relative; display: block; @@ -1075,6 +1075,13 @@ position: relative; top: 1px; } + .wall-item-actions ul button, + .wall-item-actions ul a { + font-size: 14px !important; + color: inherit !important; + line-height: 14px !important; + margin: 0 !important; + } /* little vcard when you scroll down on profiles */ #vcard-short-photo-wrapper img, #nav-short-info .contact-wrapper img { @@ -1918,6 +1925,9 @@ a.tag.label, color: transparent; } /* NOTE: cannot simply empty or display none or button alignment gets messed up! */ + .wall-item-actions-row .button-browser-share::after { + display: none !important; + } } /* Narrow Screen Phones in Landscape Orientation ============================================== From 7656da9eef4866856a9cd4c3822302e0152a1cfd Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 13 Feb 2025 20:19:00 +0000 Subject: [PATCH 047/268] Added to Changelog --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 0666beb..aa3f5a3 100644 --- a/README.md +++ b/README.md @@ -262,6 +262,10 @@ And then use it in your stylesheet like so: I figured out how the "Frio" theme worked by looking at the code. I may not be 100% correct about it since I did not create the theme. If someone knows more and I'm wrong about any of this please correct this document at https://gitlab.com/randompenguin/bookface ## CHANGELOG: +* fixed browser "Share to.." button display and sizing [Issue #3] +* fixed wrong sized menu items in action button drop-downs on mobile [related to Issue #3] +* Styled content filter buttons coming from other platforms. + 1.4 (12 Feb 2025) * Limited textarea resize fix to settings pages * Edited authors/contributors From 88dd01effc4416ab857326a5e9c17189b638bdd2 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 15 Feb 2025 04:48:52 +0000 Subject: [PATCH 048/268] * Attach file button CSS variable * Profile contacts size adjust for Frio breakpoints --- bookface_auto.css | 39 +++++++++++++++++++-------------------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index ba8c2c2..451deb3 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -20,6 +20,7 @@ --border-color: #eeeeee; --count-color: #ffffff; --count-bg: var(--link-color); + --attach-file-button: none; /* none or block */ /* LOCALIZE pseudo-element text below */ --sign-in-text: 'Sign-In'; @@ -962,17 +963,9 @@ #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" - */ + /* HIDE ATTACHMENT BUTTON */ .fbswitcher [data-mode="attachment"] { - display: none !important; + display: var(--attach-file-button) !important; } /* PROFILE */ #profile-photo-wrapper { @@ -1484,6 +1477,13 @@ a.tag.label, width: 140px !important; } } +/* Frio breakpoints for smaller profile pic */ + @media screen and (min-width:991px) and (max-width:1199px){ + .contact-block-img { + height: 75px !important; + width: 75px !important; + } + } /* Large Tablets in Portrait Orientation ===================================== */ @@ -3083,17 +3083,9 @@ p.wall-item-announce, #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" - */ + /* HIDE ATTACHMENT BUTTON */ .fbswitcher [data-mode="attachment"] { - display: none !important; + display: var(--attach-file-button) !important; } .panel, .panel-body { @@ -3618,6 +3610,13 @@ a.tag.label, width: 140px !important; } } +/* Frio breakpoints for smaller profile pic */ + @media screen and (min-width:991px) and (max-width:1199px){ + .contact-block-img { + height: 75px !important; + width: 75px !important; + } + } /* Large Tablets in Portrait Orientation ===================================== */ From 119d3d52dcd9721668576d878a1706505eed344c Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 15 Feb 2025 04:50:06 +0000 Subject: [PATCH 049/268] * Attach file button CSS variable * Profile contacts size adjust for Frio breakpoints --- bookface_dark.css | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index fb44a41..6cb01fd 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -20,6 +20,7 @@ --border-color: #333333; --count-color: #ffffff; --count-bg: var(--link-color); + --attach-file-button: none; /* none or block */ /* LOCALIZE pseudo-element text below */ --sign-in-text: 'Sign-In'; @@ -962,17 +963,9 @@ aside .widget, #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" - */ + /* HIDE ATTACHMENT BUTTON */ .fbswitcher [data-mode="attachment"] { - display: none !important; + display: var(--attach-file-button) !important; } /* PROFILE */ #profile-photo-wrapper { @@ -1481,6 +1474,13 @@ a.tag.label, width: 140px !important; } } +/* Frio breakpoints for smaller profile pic */ + @media screen and (min-width:991px) and (max-width:1199px){ + .contact-block-img { + height: 75px !important; + width: 75px !important; + } + } /* Large Tablets in Portrait Orientation ===================================== */ From 9d2a60d0a739972f2794d224359a452eac448173 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 15 Feb 2025 04:51:30 +0000 Subject: [PATCH 050/268] * Attach file button CSS variable * Profile contacts size adjust for Frio breakpoints --- bookface_light.css | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index 6bb76a2..a5cba85 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -20,6 +20,7 @@ --border-color: #eeeeee; --count-color: #ffffff; --count-bg: var(--link-color); + --attach-file-button: none; /* none or block */ /* LOCALIZE pseudo-element text below */ --sign-in-text: 'Sign-In'; @@ -962,17 +963,9 @@ #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" - */ + /* HIDE ATTACHMENT BUTTON */ .fbswitcher [data-mode="attachment"] { - display: none !important; + display: var(--attach-file-button) !important; } /* PROFILE */ #profile-photo-wrapper { @@ -1481,6 +1474,13 @@ a.tag.label, width: 140px !important; } } +/* Frio breakpoints for smaller profile pic */ + @media screen and (min-width:991px) and (max-width:1199px){ + .contact-block-img { + height: 75px !important; + width: 75px !important; + } + } /* Large Tablets in Portrait Orientation ===================================== */ From 8e54a7fbcf076650cd199d3838637c74b057a2f9 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 15 Feb 2025 04:54:33 +0000 Subject: [PATCH 051/268] Updated Changelog --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index aa3f5a3..854765a 100644 --- a/README.md +++ b/README.md @@ -149,7 +149,7 @@ Extras spaces are okay, but just make sure there are no carriage returns or othe ## GENERAL NOTES: -* This theme HIDES the attachment upload button in the file browser since there is no way to manage/delete uploaded files, and this is confusing to users. +* This theme HIDES the attachment upload button in the file browser since there is no way to manage/delete uploaded files, and this is confusing to users. If you want to show this button anyway change the CSS variable `--attach-file-button` from "none" to "block" at the top of the stylesheets. * Overrides nav_bg, nav_icon_color, background_color, background_image, and contentbg_transp * Overrides "Frio" blue accent color with one that looks nicer with these schemes. * This scheme is still being revised as new things to style are discovered. @@ -265,6 +265,8 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * fixed browser "Share to.." button display and sizing [Issue #3] * fixed wrong sized menu items in action button drop-downs on mobile [related to Issue #3] * Styled content filter buttons coming from other platforms. +* Attach file button visibilty moved to CSS variable +* Profile contacts size adjust for Frio breakpoints 1.4 (12 Feb 2025) * Limited textarea resize fix to settings pages From d08128d4cf67cb29a2d15ccc5a65cdaadedec9d4 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 16 Feb 2025 00:33:53 +0000 Subject: [PATCH 052/268] Fixed Category & Folder Tag-Buttons [Issue #4] --- bookface_light.css | 88 +++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 79 insertions(+), 9 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index a5cba85..95be3ba 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1396,41 +1396,111 @@ a.tag.label, } /* 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 */ + border-color: limegreen !important; + color: limegreen !important; + font-size: 12px; } /* replace (x) remove with icon button */ .wall-item-bottom .wall-item-tags .category.label.btn-success a:first-of-type { - font-size: 12px; + margin-right: 4px; + } + .wall-item-bottom .wall-item-tags .category.label.btn-success a:last-of-type { + font-size: 0px; } .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; + 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; + margin-right: 4px; + } + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type { + font-size: 0px; } .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type::after { - content: ''; + content: '\f00d'; + font-family: ForkAwesome; + font-size: 12px; + text-decoration: line-through; } .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):hover, .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):focus { background-color: red !important; + color: #ccc !important; + } + /* overrides for Saved File page where buttons structure is different */ + body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success { + font-size: 12px !important; + } + body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success a { + font-size: 0px !important; + margin: 0px; + } + body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success a::after { + margin-left: 0px; + } + body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success){ + font-size: 12px !important; + text-decoration: line-through !important; + } + body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a { + font-size: 0px !important; + } + body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a::after { + content: '\f00d'; + font-family: ForkAwesome; + font-size: 12px; + text-decoration: line-through; + } + /* Folder Buttons */ + .wall-item-bottom .wall-item-tags .folder.label.btn-danger { + border-color: red !important; + color: red !important; + } + /* replace (x) remove with icon button */ + .wall-item-bottom .wall-item-tags .folder.label.btn-danger a:first-of-type{ + font-size: 0px; + } + .wall-item-bottom .wall-item-tags .folder.label.btn-danger a:last-of-type::after { + content: '\f00d'; + font-family: ForkAwesome; + font-size: 12px; + } + .wall-item-bottom .wall-item-tags .folder.label.btn-danger:hover, + .wall-item-bottom .wall-item-tags .folder.label.btn-danger:focus { + background-color: red !important; + color: white !important; + } + /* when a category is removed need to visually indicate it */ + .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger){ + border-color: #ccc !important; + color: #ccc !important; + text-decoration: line-through !important; + } + .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger) a:first-of-type{ + font-size: 0px; + } + .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger) a:last-of-type::after { + content: '\f00d'; + font-family: ForkAwesome; + font-size: 12px; + } + .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger):hover, + .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger):focus{ + background-color: black !important; color: white !important; } /* @ Mention Buttons */ From 2e24ce34fe9a2abeb61f32a1cb24594321290f1c Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 16 Feb 2025 00:35:10 +0000 Subject: [PATCH 053/268] Fixed Category & Folder tag-buttons [Issue #4] --- bookface_dark.css | 80 ++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 75 insertions(+), 5 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 6cb01fd..f1e33ea 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1398,17 +1398,19 @@ a.tag.label, .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 */ + font-size: 12px; } /* replace (x) remove with icon button */ .wall-item-bottom .wall-item-tags .category.label.btn-success a:first-of-type { - font-size: 12px; + margin-right: 4px; + } + .wall-item-bottom .wall-item-tags .category.label.btn-success a:last-of-type { + font-size: 0px; } .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 { @@ -1419,20 +1421,88 @@ a.tag.label, .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; + margin-right: 4px; + } + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type { + font-size: 0px; } .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type::after { - content: ''; + content: '\f00d'; + font-family: ForkAwesome; + font-size: 12px; + text-decoration: line-through; } .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):hover, .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):focus { background-color: red !important; color: #ccc !important; } + /* overrides for Saved File page where buttons structure is different */ + body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success { + font-size: 12px !important; + } + body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success a { + font-size: 0px !important; + margin: 0px; + } + body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success a::after { + margin-left: 0px; + } + body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success){ + font-size: 12px !important; + text-decoration: line-through !important; + } + body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a { + font-size: 0px !important; + } + body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a::after { + content: '\f00d'; + font-family: ForkAwesome; + font-size: 12px; + text-decoration: line-through; + } + /* Folder Buttons */ + .wall-item-bottom .wall-item-tags .folder.label.btn-danger { + border-color: hotpink !important; + color: hotpink !important; + } + /* replace (x) remove with icon button */ + .wall-item-bottom .wall-item-tags .folder.label.btn-danger a:first-of-type{ + font-size: 0px; + } + .wall-item-bottom .wall-item-tags .folder.label.btn-danger a:last-of-type::after { + content: '\f00d'; + font-family: ForkAwesome; + font-size: 12px; + } + .wall-item-bottom .wall-item-tags .folder.label.btn-danger:hover, + .wall-item-bottom .wall-item-tags .folder.label.btn-danger:focus { + background-color: hotpink !important; + color: black !important; + } + /* when a category is removed need to visually indicate it */ + .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger){ + border-color: #ccc !important; + color: #ccc !important; + text-decoration: line-through !important; + } + .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger) a:first-of-type{ + font-size: 0px; + } + .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger) a:last-of-type::after { + content: '\f00d'; + font-family: ForkAwesome; + font-size: 12px; + } + .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger):hover, + .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger):focus{ + background-color: black !important; + color: white !important; + } /* @ Mention Buttons */ .wall-item-bottom .wall-item-tags .mention.label.btn-warning { border-color: gold !important; From 3e586f307ccd1c03d6adae75e08b396d1ed812a9 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 16 Feb 2025 00:37:09 +0000 Subject: [PATCH 054/268] Fixed Category & Folder tag-buttons [Issue #4] --- bookface_auto.css | 168 ++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 154 insertions(+), 14 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 451deb3..b4ed0f7 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1399,41 +1399,111 @@ a.tag.label, } /* 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 */ + border-color: limegreen !important; + color: limegreen !important; + font-size: 12px; } /* replace (x) remove with icon button */ .wall-item-bottom .wall-item-tags .category.label.btn-success a:first-of-type { - font-size: 12px; + margin-right: 4px; + } + .wall-item-bottom .wall-item-tags .category.label.btn-success a:last-of-type { + font-size: 0px; } .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; + 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; + margin-right: 4px; + } + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type { + font-size: 0px; } .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type::after { - content: ''; + content: '\f00d'; + font-family: ForkAwesome; + font-size: 12px; + text-decoration: line-through; } .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):hover, .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):focus { background-color: red !important; + color: #ccc !important; + } + /* overrides for Saved File page where buttons structure is different */ + body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success { + font-size: 12px !important; + } + body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success a { + font-size: 0px !important; + margin: 0px; + } + body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success a::after { + margin-left: 0px; + } + body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success){ + font-size: 12px !important; + text-decoration: line-through !important; + } + body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a { + font-size: 0px !important; + } + body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a::after { + content: '\f00d'; + font-family: ForkAwesome; + font-size: 12px; + text-decoration: line-through; + } + /* Folder Buttons */ + .wall-item-bottom .wall-item-tags .folder.label.btn-danger { + border-color: red !important; + color: red !important; + } + /* replace (x) remove with icon button */ + .wall-item-bottom .wall-item-tags .folder.label.btn-danger a:first-of-type{ + font-size: 0px; + } + .wall-item-bottom .wall-item-tags .folder.label.btn-danger a:last-of-type::after { + content: '\f00d'; + font-family: ForkAwesome; + font-size: 12px; + } + .wall-item-bottom .wall-item-tags .folder.label.btn-danger:hover, + .wall-item-bottom .wall-item-tags .folder.label.btn-danger:focus { + background-color: red !important; + color: white !important; + } + /* when a category is removed need to visually indicate it */ + .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger){ + border-color: #ccc !important; + color: #ccc !important; + text-decoration: line-through !important; + } + .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger) a:first-of-type{ + font-size: 0px; + } + .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger) a:last-of-type::after { + content: '\f00d'; + font-family: ForkAwesome; + font-size: 12px; + } + .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger):hover, + .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger):focus{ + background-color: black !important; color: white !important; } /* @ Mention Buttons */ @@ -3540,17 +3610,19 @@ a.tag.label, .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 */ + font-size: 12px; } /* replace (x) remove with icon button */ .wall-item-bottom .wall-item-tags .category.label.btn-success a:first-of-type { - font-size: 12px; + margin-right: 4px; + } + .wall-item-bottom .wall-item-tags .category.label.btn-success a:last-of-type { + font-size: 0px; } .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 { @@ -3561,20 +3633,88 @@ a.tag.label, .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; + margin-right: 4px; + } + .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type { + font-size: 0px; } .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type::after { - content: ''; + content: '\f00d'; + font-family: ForkAwesome; + font-size: 12px; + text-decoration: line-through; } .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):hover, .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):focus { background-color: red !important; color: #ccc !important; } + /* overrides for Saved File page where buttons structure is different */ + body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success { + font-size: 12px !important; + } + body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success a { + font-size: 0px !important; + margin: 0px; + } + body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success a::after { + margin-left: 0px; + } + body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success){ + font-size: 12px !important; + text-decoration: line-through !important; + } + body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a { + font-size: 0px !important; + } + body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a::after { + content: '\f00d'; + font-family: ForkAwesome; + font-size: 12px; + text-decoration: line-through; + } + /* Folder Buttons */ + .wall-item-bottom .wall-item-tags .folder.label.btn-danger { + border-color: hotpink !important; + color: hotpink !important; + } + /* replace (x) remove with icon button */ + .wall-item-bottom .wall-item-tags .folder.label.btn-danger a:first-of-type{ + font-size: 0px; + } + .wall-item-bottom .wall-item-tags .folder.label.btn-danger a:last-of-type::after { + content: '\f00d'; + font-family: ForkAwesome; + font-size: 12px; + } + .wall-item-bottom .wall-item-tags .folder.label.btn-danger:hover, + .wall-item-bottom .wall-item-tags .folder.label.btn-danger:focus { + background-color: hotpink !important; + color: black !important; + } + /* when a category is removed need to visually indicate it */ + .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger){ + border-color: #ccc !important; + color: #ccc !important; + text-decoration: line-through !important; + } + .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger) a:first-of-type{ + font-size: 0px; + } + .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger) a:last-of-type::after { + content: '\f00d'; + font-family: ForkAwesome; + font-size: 12px; + } + .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger):hover, + .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger):focus{ + background-color: black !important; + color: white !important; + } /* @ Mention Buttons */ .wall-item-bottom .wall-item-tags .mention.label.btn-warning { border-color: gold !important; From 56d883b85d60913db395435f7de10b525a33c01f Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 16 Feb 2025 00:45:21 +0000 Subject: [PATCH 055/268] Updated Changelog --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 854765a..ccb1169 100644 --- a/README.md +++ b/README.md @@ -267,6 +267,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Styled content filter buttons coming from other platforms. * Attach file button visibilty moved to CSS variable * Profile contacts size adjust for Frio breakpoints +* Fixed Category & Folder tag-buttons [Issue #4] 1.4 (12 Feb 2025) * Limited textarea resize fix to settings pages From cc8f252f59cfb565b6887fccf806eed49bc52e89 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 16 Feb 2025 18:57:17 +0000 Subject: [PATCH 056/268] Removed text shadow from tags (Issue #5) --- bookface_auto.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/bookface_auto.css b/bookface_auto.css index b4ed0f7..aeaf9a1 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1348,6 +1348,7 @@ a.tag.label, box-shadow: none !important; color: #0066FF !important; border: 1px solid #0066FF; + text-shadow: none !important; } .wall-item-bottom .label { color: inherit; @@ -3557,6 +3558,7 @@ a.tag.label, box-shadow: none !important; color: #05d8fb !important; border: 1px solid #05d8fb; + text-shadow: none !important; } .wall-item-bottom .label { color: inherit; From 2abafeb8c2827c26421f9f2319cba0fb2390874e Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 16 Feb 2025 18:58:22 +0000 Subject: [PATCH 057/268] Removed text shadow from tags (Issue #5) --- bookface_dark.css | 1 + 1 file changed, 1 insertion(+) diff --git a/bookface_dark.css b/bookface_dark.css index f1e33ea..835e8b0 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1345,6 +1345,7 @@ a.tag.label, box-shadow: none !important; color: #05d8fb !important; border: 1px solid #05d8fb; + text-shadow: none !important; } .wall-item-bottom .label { color: inherit; From 0a3a513872d8c2d27003e048413a51ee4859784a Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 16 Feb 2025 18:59:05 +0000 Subject: [PATCH 058/268] Removed text shadow from tags (Issue #5) --- bookface_light.css | 1 + 1 file changed, 1 insertion(+) diff --git a/bookface_light.css b/bookface_light.css index 95be3ba..fc049d5 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1345,6 +1345,7 @@ a.tag.label, box-shadow: none !important; color: #0066FF !important; border: 1px solid #0066FF; + text-shadow: none !important; } .wall-item-bottom .label { color: inherit; From cdfb33246b0cdac0539642ceed7dafcebac2abbe Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 16 Feb 2025 19:02:11 +0000 Subject: [PATCH 059/268] Updated Changelog --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index ccb1169..1a33a2c 100644 --- a/README.md +++ b/README.md @@ -268,6 +268,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Attach file button visibilty moved to CSS variable * Profile contacts size adjust for Frio breakpoints * Fixed Category & Folder tag-buttons [Issue #4] +* Removed text shadow from tags [Issue #5] 1.4 (12 Feb 2025) * Limited textarea resize fix to settings pages From 9f9f59d9485aebe2d54f80e71c544f23f50b988c Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 16 Feb 2025 21:43:22 +0000 Subject: [PATCH 060/268] Removed unused css vars [Issue #6] --- bookface_auto.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index aeaf9a1..27f4992 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -12,10 +12,8 @@ --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; @@ -2142,10 +2140,8 @@ a.tag.label, --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; From c04542d3269c60f691419c8f6398b6adda49a4fc Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 16 Feb 2025 21:43:59 +0000 Subject: [PATCH 061/268] Removed unused css vars (Issue #6) --- bookface_auto.php | 2 -- 1 file changed, 2 deletions(-) diff --git a/bookface_auto.php b/bookface_auto.php index 44f47e7..30a24de 100644 --- a/bookface_auto.php +++ b/bookface_auto.php @@ -30,7 +30,5 @@ $link_color = ($customColor) ? '#'.$customColor->getHex() : '#'.$accentColor->ge $link_color = "#0066ff"; } $nav_icon_color = '#65686C'; -$background_image = ''; -$contentbg_transp = 100; $font_color = '#313131'; $font_color_darker = '#333'; From 26c7efef90639579d695db19adbafe4647252923 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 16 Feb 2025 21:44:40 +0000 Subject: [PATCH 062/268] Removed unused css vars (Issue #6) --- bookface_dark.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 835e8b0..4eb88e3 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -12,10 +12,8 @@ --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: $menu_background_hover_color; --border-color: #333333; --count-color: #ffffff; From 6a816db6fc12935f129613a76febbdffa9ae91e5 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 16 Feb 2025 21:45:21 +0000 Subject: [PATCH 063/268] Removed unused css vars (Issue #6) --- bookface_dark.php | 2 -- 1 file changed, 2 deletions(-) diff --git a/bookface_dark.php b/bookface_dark.php index 66c3917..f3e5a4a 100644 --- a/bookface_dark.php +++ b/bookface_dark.php @@ -31,8 +31,6 @@ $link_color = ($customColor) ? '#'.$customColor->getHex() : '#'.$accentColor->li $link_color = "#0066ff"; } $nav_icon_color = '#B0B3B8'; -$contentbg_transp = '0'; $font_color = '#cccccc'; $font_color_darker = '#acacac'; $font_color_lighter = '#444444'; -$background_image = ''; From 433a40f527a0bccbf7866c1641269c0607c18195 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 16 Feb 2025 21:45:56 +0000 Subject: [PATCH 064/268] Removed unused css vars (Issue #6) --- bookface_light.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index fc049d5..76814a4 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -12,10 +12,8 @@ --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: $menu_background_hover_color; --border-color: #eeeeee; --count-color: #ffffff; From e042a5314aef2b6785347f1730184b6224c10606 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 16 Feb 2025 21:46:29 +0000 Subject: [PATCH 065/268] Removed unused css vars (Issue #6) --- bookface_light.php | 2 -- 1 file changed, 2 deletions(-) diff --git a/bookface_light.php b/bookface_light.php index 758bae6..8f03fe1 100644 --- a/bookface_light.php +++ b/bookface_light.php @@ -29,8 +29,6 @@ $link_color = ($customColor) ? '#'.$customColor->getHex() : '#'.$accentColor->li $link_color = "#0066ff"; } $nav_icon_color = '#65686C'; -$background_image = ''; -$contentbg_transp = 100; $font_color = '#313131'; $font_color_darker = '#333'; From 3219384eb3d687811cd9fd2507ebb3b8828627bd Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 16 Feb 2025 21:48:17 +0000 Subject: [PATCH 066/268] Updated Changelog --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 1a33a2c..e33fd90 100644 --- a/README.md +++ b/README.md @@ -69,10 +69,8 @@ You should _avoid_ redefining the default Frio color variables because if a user --link-color --nav-icon-color --background-color - --contentbg-transp --font-color --font-color-darker - --background-image --menu-background-hover-color You _can_ safely globally override: @@ -269,6 +267,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Profile contacts size adjust for Frio breakpoints * Fixed Category & Folder tag-buttons [Issue #4] * Removed text shadow from tags [Issue #5] +* Removed unused CSS variables [Issue #6] 1.4 (12 Feb 2025) * Limited textarea resize fix to settings pages From d05a6be101c9a775cd4591541eff109167201856 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 17 Feb 2025 23:28:12 +0000 Subject: [PATCH 067/268] Fix for Issue #7 --- bookface_auto.css | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/bookface_auto.css b/bookface_auto.css index 27f4992..939b4d0 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1522,6 +1522,31 @@ a.tag.label, background-color: transparent; border: 1px solid var(--link-color); } + /* Comment buttons on other peple's profile Conversations */ + a.btn-link.button-comments { + width: fit-content; + text-align:center !important; + display: block; + margin-top:10px; + color: var(--nav-icon-color) !important; + } + a.btn-link.button-comments:hover { + text-decoration: none; + color: var(--link-color) !important; + } + a.btn-link.button-comments .fa { + width: 50px; + display: block; + margin: 0 auto; + } + a.btn-link.button-comments .fa::before { + font-size: 24px; + } + a.btn-link.button-comments::after { + font-size: 14px !important; + position: relative; + top: 5px; + } /* Greater than Full-HD Width =========================== */ From 3752a6a4220420e38c3f6e687d17c93042ce3d81 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 17 Feb 2025 23:29:00 +0000 Subject: [PATCH 068/268] Fix for Issue #7 --- bookface_auto.css | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/bookface_auto.css b/bookface_auto.css index 939b4d0..81dfbf7 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -3749,6 +3749,31 @@ a.tag.label, border-color: gold !important; color: black !important; } + /* Comment buttons on other peple's profile Conversations */ + a.btn-link.button-comments { + width: fit-content; + text-align:center !important; + display: block; + margin-top:10px; + color: var(--nav-icon-color) !important; + } + a.btn-link.button-comments:hover { + text-decoration: none; + color: var(--link-color) !important; + } + a.btn-link.button-comments .fa { + width: 50px; + display: block; + margin: 0 auto; + } + a.btn-link.button-comments .fa::before { + font-size: 24px; + } + a.btn-link.button-comments::after { + font-size: 14px !important; + position: relative; + top: 5px; + } /* Greater than Full-HD Width =========================== */ From cd517797612d13f2e4761486b1314e5d545803ea Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 17 Feb 2025 23:29:50 +0000 Subject: [PATCH 069/268] Fix for Issue #7 --- bookface_dark.css | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/bookface_dark.css b/bookface_dark.css index 4eb88e3..cd8e580 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1519,6 +1519,31 @@ a.tag.label, background-color: transparent; border: 1px solid var(--link-color); } + /* Comment buttons on other peple's profile Conversations */ + a.btn-link.button-comments { + width: fit-content; + text-align:center !important; + display: block; + margin-top:10px; + color: var(--nav-icon-color) !important; + } + a.btn-link.button-comments:hover { + text-decoration: none; + color: var(--link-color) !important; + } + a.btn-link.button-comments .fa { + width: 50px; + display: block; + margin: 0 auto; + } + a.btn-link.button-comments .fa::before { + font-size: 24px; + } + a.btn-link.button-comments::after { + font-size: 14px !important; + position: relative; + top: 5px; + } /* Greater than Full-HD Width =========================== */ From 2fb13c07fc391b92b17681836395d2b1d5a1968e Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 17 Feb 2025 23:30:29 +0000 Subject: [PATCH 070/268] Fix for Issue #7 --- bookface_light.css | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/bookface_light.css b/bookface_light.css index 76814a4..de006a4 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1519,6 +1519,31 @@ a.tag.label, background-color: transparent; border: 1px solid var(--link-color); } + /* Comment buttons on other peple's profile Conversations */ + a.btn-link.button-comments { + width: fit-content; + text-align:center !important; + display: block; + margin-top:10px; + color: var(--nav-icon-color) !important; + } + a.btn-link.button-comments:hover { + text-decoration: none; + color: var(--link-color) !important; + } + a.btn-link.button-comments .fa { + width: 50px; + display: block; + margin: 0 auto; + } + a.btn-link.button-comments .fa::before { + font-size: 24px; + } + a.btn-link.button-comments::after { + font-size: 14px !important; + position: relative; + top: 5px; + } /* Greater than Full-HD Width =========================== */ From 97815a46c3e533e4fc98f95fb8f8ec66bf5e9522 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 17 Feb 2025 23:34:24 +0000 Subject: [PATCH 071/268] Updated Changelog --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index e33fd90..877abc3 100644 --- a/README.md +++ b/README.md @@ -268,6 +268,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Fixed Category & Folder tag-buttons [Issue #4] * Removed text shadow from tags [Issue #5] * Removed unused CSS variables [Issue #6] +* Comment button not styled on other people's profiles [Issue #7] 1.4 (12 Feb 2025) * Limited textarea resize fix to settings pages From 49e2ffc6e464089bd3d37abbd762dd2e18c3b086 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Feb 2025 21:29:08 +0000 Subject: [PATCH 072/268] hide horizontal rules for cleaner look --- bookface_auto.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 81dfbf7..cdff01c 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -684,6 +684,9 @@ 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, @@ -2887,11 +2890,9 @@ p.wall-item-announce, padding-left: 10px !important; padding-right: 10px !important; } - .media hr, - aside hr, - section hr { - border-color: var(--nav-bg); - } + .media hr, aside hr, section hr { + border-color: var(--nav-bg); + } /* keep mentions and tags from spilling out */ #profile-page .label, #profile-page .label a, From 216969e1be4929e02cd8c2421897aa9679a6619d Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Feb 2025 21:30:00 +0000 Subject: [PATCH 073/268] Hide horizontal rules for cleaner look --- bookface_dark.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/bookface_dark.css b/bookface_dark.css index cd8e580..422d88c 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -684,6 +684,9 @@ aside .widget, padding-left: 10px !important; padding-right: 10px !important; } + .media hr, aside hr, section hr { + border-color: var(--nav-bg); + } /* keep mentions and tags from spilling out */ #profile-page .label, #profile-page .label a, From 4803436a1b87489a9f34e4b3d7625e9c224fd852 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Feb 2025 21:30:41 +0000 Subject: [PATCH 074/268] Hide horizontal rules for cleaner look --- bookface_light.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/bookface_light.css b/bookface_light.css index de006a4..153409a 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -684,6 +684,9 @@ 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, From 9dd84ada9b6de017657cd59598ea099b9058679c Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Feb 2025 21:33:31 +0000 Subject: [PATCH 075/268] Updated Changelog --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 877abc3..2d2c39f 100644 --- a/README.md +++ b/README.md @@ -269,6 +269,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Removed text shadow from tags [Issue #5] * Removed unused CSS variables [Issue #6] * Comment button not styled on other people's profiles [Issue #7] +* Hide horizontal rules for a cleaner look 1.4 (12 Feb 2025) * Limited textarea resize fix to settings pages From 43b9fb01caf304f540c11672514a9fea115ccce0 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Feb 2025 21:36:24 +0000 Subject: [PATCH 076/268] Fixes for panel-body & help-block --- bookface_auto.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/bookface_auto.css b/bookface_auto.css index cdff01c..a7c3f41 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -964,6 +964,14 @@ #upload-photo:focus { background-color: darkblue !important; } + .panel-body { + background-color: var(--nav-bg); + border-radius: 10px; + border-top: none !important; + } + .help-block { + color: var(--font-color-darker); + } /* HIDE ATTACHMENT BUTTON */ .fbswitcher [data-mode="attachment"] { display: var(--attach-file-button) !important; @@ -3176,6 +3184,14 @@ p.wall-item-announce, #upload-photo:focus { background-color: darkblue !important; } + .panel-body { + background-color: var(--nav-bg); + border-radius: 10px; + border-top: none !important; + } + .help-block { + color: var(--font-color-darker); + } /* HIDE ATTACHMENT BUTTON */ .fbswitcher [data-mode="attachment"] { display: var(--attach-file-button) !important; From 756aa1dde9abe1b4fcf03ac7a42096ccc0d23ca4 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Feb 2025 21:36:57 +0000 Subject: [PATCH 077/268] Fixes for panel-body and help-block --- bookface_dark.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/bookface_dark.css b/bookface_dark.css index 422d88c..2a7cc45 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -964,6 +964,14 @@ aside .widget, #upload-photo:focus { background-color: darkblue !important; } + .panel-body { + background-color: var(--nav-bg); + border-radius: 10px; + border-top: none !important; + } + .help-block { + color: var(--font-color-darker); + } /* HIDE ATTACHMENT BUTTON */ .fbswitcher [data-mode="attachment"] { display: var(--attach-file-button) !important; From 77c99ad647bc59ffde7e2f2d699684bda4d24e4a Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Feb 2025 21:37:33 +0000 Subject: [PATCH 078/268] Fixes for panel-body & help-block --- bookface_light.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/bookface_light.css b/bookface_light.css index 153409a..e498fab 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -964,6 +964,14 @@ #upload-photo:focus { background-color: darkblue !important; } + .panel-body { + background-color: var(--nav-bg); + border-radius: 10px; + border-top: none !important; + } + .help-block { + color: var(--font-color-darker); + } /* HIDE ATTACHMENT BUTTON */ .fbswitcher [data-mode="attachment"] { display: var(--attach-file-button) !important; From b74e128595f405c3af8f8b45e196e9b3e9d367ad Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Feb 2025 21:40:57 +0000 Subject: [PATCH 079/268] Updated Changelog --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 2d2c39f..4fab64e 100644 --- a/README.md +++ b/README.md @@ -270,6 +270,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Removed unused CSS variables [Issue #6] * Comment button not styled on other people's profiles [Issue #7] * Hide horizontal rules for a cleaner look +* Minor style fixes for .panel-body and .help-block 1.4 (12 Feb 2025) * Limited textarea resize fix to settings pages From 2fe1419b62aeb36adc80651eabdf7e768ed66887 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Feb 2025 21:43:01 +0000 Subject: [PATCH 080/268] Removed box-shadow from wall-item-comment-wrapper --- bookface_auto.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/bookface_auto.css b/bookface_auto.css index a7c3f41..4281cf0 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -850,6 +850,7 @@ } .wall-item-comment-wrapper { border: none; + box-shadow: none; } .photo-comment-wrapper .btn-sm, #profile-jot-wrapper .btn-sm, @@ -3064,6 +3065,7 @@ p.wall-item-announce, } .wall-item-comment-wrapper { border: none; + box-shadow: none; } .photo-comment-wrapper .btn-sm, #profile-jot-wrapper .btn-sm, From e889aa015c77878caff94f846c4c0fc216022b54 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Feb 2025 21:43:36 +0000 Subject: [PATCH 081/268] Remove box-shadow from wall-item-comment-wrapper --- bookface_dark.css | 1 + 1 file changed, 1 insertion(+) diff --git a/bookface_dark.css b/bookface_dark.css index 2a7cc45..a321046 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -850,6 +850,7 @@ aside .widget, } .wall-item-comment-wrapper { border: none; + box-shadow: none; } .photo-comment-wrapper .btn-sm, #profile-jot-wrapper .btn-sm, From 2750702951088be8899c110ce964b5cdff8a84d5 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Feb 2025 21:44:14 +0000 Subject: [PATCH 082/268] Removed box-shadow from wall-item-comment-wrapper --- bookface_light.css | 1 + 1 file changed, 1 insertion(+) diff --git a/bookface_light.css b/bookface_light.css index e498fab..6677160 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -850,6 +850,7 @@ } .wall-item-comment-wrapper { border: none; + box-shadow: none; } .photo-comment-wrapper .btn-sm, #profile-jot-wrapper .btn-sm, From 5e472cdccbeac26228be8365fb2d68c90a709448 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Feb 2025 21:46:49 +0000 Subject: [PATCH 083/268] Updated Changelog --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 4fab64e..6b0ec7c 100644 --- a/README.md +++ b/README.md @@ -271,6 +271,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Comment button not styled on other people's profiles [Issue #7] * Hide horizontal rules for a cleaner look * Minor style fixes for .panel-body and .help-block +* Removed box-shadow from .wall-item-comment-wrapper 1.4 (12 Feb 2025) * Limited textarea resize fix to settings pages From 3b39bce5e61571f70a5e95768c306341758cf901 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Feb 2025 21:48:47 +0000 Subject: [PATCH 084/268] Added contentbg_transp back Frio default stylesheet slipstream needs it. --- bookface_auto.php | 1 + 1 file changed, 1 insertion(+) diff --git a/bookface_auto.php b/bookface_auto.php index 30a24de..403a023 100644 --- a/bookface_auto.php +++ b/bookface_auto.php @@ -32,3 +32,4 @@ $link_color = ($customColor) ? '#'.$customColor->getHex() : '#'.$accentColor->ge $nav_icon_color = '#65686C'; $font_color = '#313131'; $font_color_darker = '#333'; +$contentbg_transp = '0'; From 25e5cbe88edd6d962d56f97331ea919def21e98c Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Feb 2025 21:50:19 +0000 Subject: [PATCH 085/268] Added back contentbg_transp Frio default stylesheet slipstream needs it --- bookface_dark.php | 1 + 1 file changed, 1 insertion(+) diff --git a/bookface_dark.php b/bookface_dark.php index f3e5a4a..4f7f632 100644 --- a/bookface_dark.php +++ b/bookface_dark.php @@ -34,3 +34,4 @@ $nav_icon_color = '#B0B3B8'; $font_color = '#cccccc'; $font_color_darker = '#acacac'; $font_color_lighter = '#444444'; +$contentbg_transp = '0'; \ No newline at end of file From cc192e86aac0ec074fa0963881b2bb45ebf3bd5b Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Feb 2025 21:51:40 +0000 Subject: [PATCH 086/268] Added back contentbg_transp Frio default stylesheet slipstream needs it --- bookface_light.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_light.php b/bookface_light.php index 8f03fe1..64109e0 100644 --- a/bookface_light.php +++ b/bookface_light.php @@ -31,5 +31,5 @@ $link_color = ($customColor) ? '#'.$customColor->getHex() : '#'.$accentColor->li $nav_icon_color = '#65686C'; $font_color = '#313131'; $font_color_darker = '#333'; - +$contentbg_transp = 100; From 2c8be141a14f95fa5c7a4a1ef4404f12997ff0ce Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Feb 2025 21:53:22 +0000 Subject: [PATCH 087/268] Updated Changelog --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 6b0ec7c..d97cb35 100644 --- a/README.md +++ b/README.md @@ -272,6 +272,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Hide horizontal rules for a cleaner look * Minor style fixes for .panel-body and .help-block * Removed box-shadow from .wall-item-comment-wrapper +* Added `$contentbg_transp` back as "Frio" default stylesheet slipstream needs it. 1.4 (12 Feb 2025) * Limited textarea resize fix to settings pages From a3da147fb8f8acd9eafe8fbb60b3acd06730945e Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 01:16:43 +0000 Subject: [PATCH 088/268] Fixes for Settings Channels panel --- bookface_auto.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/bookface_auto.css b/bookface_auto.css index 4281cf0..ddd1191 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -484,6 +484,12 @@ margin-left: 5px !important; margin-bottom: 20px !important; } + #settings-channels .panel { + padding: 0 10px 10px 10px; + } + #settings-channels button { + float: right; + } #adminpage button[type="sbumit"], input[type="submit"], input[name="page_logs"], @@ -2663,6 +2669,12 @@ header #banner { margin-left: 5px !important; margin-bottom: 20px !important; } + #settings-channels .panel { + padding: 0 10px 10px 10px; + } + #settings-channels button { + float: right; + } #adminpage button[type="submit"], input[type="submit"], input[name="page_logs"], From 3472b9470191f1ae10e71f30afb4ffab0a75ee53 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 01:17:15 +0000 Subject: [PATCH 089/268] Fixes for Settings Channels panel --- bookface_dark.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/bookface_dark.css b/bookface_dark.css index a321046..7477002 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -484,6 +484,12 @@ header #banner { margin-left: 5px !important; margin-bottom: 20px !important; } + #settings-channels .panel { + padding: 0 10px 10px 10px; + } + #settings-channels button { + float: right; + } #adminpage button[type="submit"], input[type="submit"], input[name="page_logs"], From 9d92ef7cbae9c40ddaa999470c5a5151b67da451 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 01:17:53 +0000 Subject: [PATCH 090/268] Fixes for Settings Channels panel --- bookface_light.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/bookface_light.css b/bookface_light.css index 6677160..40aaabd 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -484,6 +484,12 @@ margin-left: 5px !important; margin-bottom: 20px !important; } + #settings-channels .panel { + padding: 0 10px 10px 10px; + } + #settings-channels button { + float: right; + } #adminpage button[type="sbumit"], input[type="submit"], input[name="page_logs"], From 20adbc6e92405165a09e2395c37b0c7c8cca0095 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 01:18:38 +0000 Subject: [PATCH 091/268] Updated Changelog --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index d97cb35..20a2c34 100644 --- a/README.md +++ b/README.md @@ -273,6 +273,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Minor style fixes for .panel-body and .help-block * Removed box-shadow from .wall-item-comment-wrapper * Added `$contentbg_transp` back as "Frio" default stylesheet slipstream needs it. +* Fixed Settings > Channels panel padding and Submit button alignment 1.4 (12 Feb 2025) * Limited textarea resize fix to settings pages From c52af012035ea3e9215abe91807b66a5c8537734 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 01:20:06 +0000 Subject: [PATCH 092/268] "four files" updated to "six files" now that there's an auto version --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 20a2c34..2e0e573 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Version 1.4 ## INSTALLATION -1. Drop these four files: +1. Drop these six files: * bookface_auto.css * bookface_auto.php * bookface_dark.css From 070009850d63e8b9a6a9dd789e9efaa187e7e740 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 03:00:42 +0000 Subject: [PATCH 093/268] Redesigned Calc Add-on [Issue #8] --- bookface_auto.css | 116 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) diff --git a/bookface_auto.css b/bookface_auto.css index ddd1191..f60ab4a 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1309,6 +1309,64 @@ .advancedcontentfilter-content-wrapper pre { margin-top: 20px; } +/* calculator addon */ +.calc-content-wrapper table { + margin: 0 auto; + color: #333; +} +.calc-content-wrapper td[colspan='5']::after { + content: ' '; + height: 50px; + width: 260px; + background-color: black; + display: block; +} + .calc-content-wrapper input[type='button']{ + appearance: none; + height: 50px; + width: 100%; + border: 1px solid #666; + color: white; + font-size: 18px; + font-weight: bold; + background-color: #999; + text-align: center; + } +.calc-content-wrapper input[name='plus'], +.calc-content-wrapper input[name='minus'], +.calc-content-wrapper input[name='multiplication'], +.calc-content-wrapper input[name='division'], +.calc-content-wrapper input[name='enter']{ + background-color: orange; +} +.calc-content-wrapper input[name='plus']{ + padding-left: 10px; +} +.calc-content-wrapper input[name='multiplication']{ + padding-left: 14px; +} +.calc-content-wrapper input[name='clear'], +.calc-content-wrapper input[name='sqareroot'], +.calc-content-wrapper input[name='squarex'], +.calc-content-wrapper input[name='deg-rad'], +.calc-content-wrapper input[name='rad-deg'], +.calc-content-wrapper input[name='sine'], +.calc-content-wrapper input[name='arcsine'], +.calc-content-wrapper input[name='cosine'], +.calc-content-wrapper input[name='arccosine']{ + background-color: #666; +} +.calc-content-wrapper #display { + font-size: 36px; + font-weight: lighter; + text-align: right; + color: #eee; + background-color: #666; + border: none; + display: block; + width: 260px; + position: absolute; +} /* MISCELLANEOUS STUFF */ div#back-to-top { bottom: 65px; @@ -3555,6 +3613,64 @@ aside .widget li:hover { .advancedcontentfilter-content-wrapper pre { margin-top: 20px; } +/* calculator addon */ +.calc-content-wrapper table { + margin: 0 auto; + color: #333; +} +.calc-content-wrapper td[colspan='5']::after { + content: ' '; + height: 50px; + width: 260px; + background-color: black; + display: block; +} + .calc-content-wrapper input[type='button']{ + appearance: none; + height: 50px; + width: 100%; + border: 1px solid #666; + color: white; + font-size: 18px; + font-weight: bold; + background-color: #999; + text-align: center; + } +.calc-content-wrapper input[name='plus'], +.calc-content-wrapper input[name='minus'], +.calc-content-wrapper input[name='multiplication'], +.calc-content-wrapper input[name='division'], +.calc-content-wrapper input[name='enter']{ + background-color: orange; +} +.calc-content-wrapper input[name='plus']{ + padding-left: 10px; +} +.calc-content-wrapper input[name='multiplication']{ + padding-left: 14px; +} +.calc-content-wrapper input[name='clear'], +.calc-content-wrapper input[name='sqareroot'], +.calc-content-wrapper input[name='squarex'], +.calc-content-wrapper input[name='deg-rad'], +.calc-content-wrapper input[name='rad-deg'], +.calc-content-wrapper input[name='sine'], +.calc-content-wrapper input[name='arcsine'], +.calc-content-wrapper input[name='cosine'], +.calc-content-wrapper input[name='arccosine']{ + background-color: #666; +} +.calc-content-wrapper #display { + font-size: 36px; + font-weight: lighter; + text-align: right; + color: #eee; + background-color: #666; + border: none; + display: block; + width: 260px; + position: absolute; +} /* MISCELLANEOUS STUFF */ div#back-to-top { bottom: 65px; From 069bf5df9a74fa1dc27bda7111dd3b92e1cc0595 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 03:01:18 +0000 Subject: [PATCH 094/268] Redesigned Calc Add-On [Issue #8] --- bookface_dark.css | 58 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/bookface_dark.css b/bookface_dark.css index 7477002..ca59aef 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1306,6 +1306,64 @@ aside .widget li:hover { .advancedcontentfilter-content-wrapper pre { margin-top: 20px; } +/* calculator addon */ +.calc-content-wrapper table { + margin: 0 auto; + color: #333; +} +.calc-content-wrapper td[colspan='5']::after { + content: ' '; + height: 50px; + width: 260px; + background-color: black; + display: block; +} + .calc-content-wrapper input[type='button']{ + appearance: none; + height: 50px; + width: 100%; + border: 1px solid #666; + color: white; + font-size: 18px; + font-weight: bold; + background-color: #999; + text-align: center; + } +.calc-content-wrapper input[name='plus'], +.calc-content-wrapper input[name='minus'], +.calc-content-wrapper input[name='multiplication'], +.calc-content-wrapper input[name='division'], +.calc-content-wrapper input[name='enter']{ + background-color: orange; +} +.calc-content-wrapper input[name='plus']{ + padding-left: 10px; +} +.calc-content-wrapper input[name='multiplication']{ + padding-left: 14px; +} +.calc-content-wrapper input[name='clear'], +.calc-content-wrapper input[name='sqareroot'], +.calc-content-wrapper input[name='squarex'], +.calc-content-wrapper input[name='deg-rad'], +.calc-content-wrapper input[name='rad-deg'], +.calc-content-wrapper input[name='sine'], +.calc-content-wrapper input[name='arcsine'], +.calc-content-wrapper input[name='cosine'], +.calc-content-wrapper input[name='arccosine']{ + background-color: #666; +} +.calc-content-wrapper #display { + font-size: 36px; + font-weight: lighter; + text-align: right; + color: #eee; + background-color: #666; + border: none; + display: block; + width: 260px; + position: absolute; +} /* MISCELLANEOUS STUFF */ div#back-to-top { bottom: 65px; From 48605cbc5f5d41c490276aee2f059af1bd5ca0fd Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 03:02:05 +0000 Subject: [PATCH 095/268] Redesigned Calc Add-On [Issue #8] --- bookface_light.css | 58 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/bookface_light.css b/bookface_light.css index 40aaabd..7d14dd6 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1306,6 +1306,64 @@ .advancedcontentfilter-content-wrapper pre { margin-top: 20px; } +/* calculator addon */ +.calc-content-wrapper table { + margin: 0 auto; + color: #333; +} +.calc-content-wrapper td[colspan='5']::after { + content: ' '; + height: 50px; + width: 260px; + background-color: black; + display: block; +} + .calc-content-wrapper input[type='button']{ + appearance: none; + height: 50px; + width: 100%; + border: 1px solid #666; + color: white; + font-size: 18px; + font-weight: bold; + background-color: #999; + text-align: center; + } +.calc-content-wrapper input[name='plus'], +.calc-content-wrapper input[name='minus'], +.calc-content-wrapper input[name='multiplication'], +.calc-content-wrapper input[name='division'], +.calc-content-wrapper input[name='enter']{ + background-color: orange; +} +.calc-content-wrapper input[name='plus']{ + padding-left: 10px; +} +.calc-content-wrapper input[name='multiplication']{ + padding-left: 14px; +} +.calc-content-wrapper input[name='clear'], +.calc-content-wrapper input[name='sqareroot'], +.calc-content-wrapper input[name='squarex'], +.calc-content-wrapper input[name='deg-rad'], +.calc-content-wrapper input[name='rad-deg'], +.calc-content-wrapper input[name='sine'], +.calc-content-wrapper input[name='arcsine'], +.calc-content-wrapper input[name='cosine'], +.calc-content-wrapper input[name='arccosine']{ + background-color: #666; +} +.calc-content-wrapper #display { + font-size: 36px; + font-weight: lighter; + text-align: right; + color: #eee; + background-color: #666; + border: none; + display: block; + width: 260px; + position: absolute; +} /* MISCELLANEOUS STUFF */ div#back-to-top { bottom: 65px; From 6d1263d0f67065787830ab304c8e2d74e867dd73 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 03:05:14 +0000 Subject: [PATCH 096/268] Updated Changelog --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 2e0e573..efb3bfd 100644 --- a/README.md +++ b/README.md @@ -274,6 +274,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Removed box-shadow from .wall-item-comment-wrapper * Added `$contentbg_transp` back as "Frio" default stylesheet slipstream needs it. * Fixed Settings > Channels panel padding and Submit button alignment +* Redesigned Calculator Add-On [Issue #8] 1.4 (12 Feb 2025) * Limited textarea resize fix to settings pages From 42c6615c2e13fd3898a707a9e5c2c4ae017e24f2 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 03:27:55 +0000 Subject: [PATCH 097/268] fix for calculator add-on display --- bookface_auto.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/bookface_auto.css b/bookface_auto.css index f60ab4a..ba623b8 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1357,7 +1357,8 @@ background-color: #666; } .calc-content-wrapper #display { - font-size: 36px; + appearance: none !important; + font-size: 36px; font-weight: lighter; text-align: right; color: #eee; From c13064789cd5516e2031607f39e76593591c9527 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 03:28:34 +0000 Subject: [PATCH 098/268] fix for calculator add-on display --- bookface_dark.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/bookface_dark.css b/bookface_dark.css index ca59aef..fd25848 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1354,7 +1354,8 @@ aside .widget li:hover { background-color: #666; } .calc-content-wrapper #display { - font-size: 36px; + appearance: none; + font-size: 36px; font-weight: lighter; text-align: right; color: #eee; From 81943db75fc86d72743345726791017c6247f658 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 03:29:12 +0000 Subject: [PATCH 099/268] fix for calculator app display --- bookface_light.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index 7d14dd6..6b5dc5d 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1354,7 +1354,8 @@ background-color: #666; } .calc-content-wrapper #display { - font-size: 36px; + appearance: none; + font-size: 36px; font-weight: lighter; text-align: right; color: #eee; From 446888905cfded7aeb4daa651b02ba0ba41cd7c0 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 04:08:41 +0000 Subject: [PATCH 100/268] Fix for Issue #9 --- bookface_auto.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_auto.css b/bookface_auto.css index ba623b8..52c2a6d 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -304,7 +304,7 @@ #content .nav > li > .btn-link:hover, #content .nav > li > .btn-link:focus { background-color: var(--link-color); - color: white; + color: white !important; } #topbar-first #nav-notifications-menu { border: 1px solid var(--background-color) !important; From 247b13bd846304e5a6b411c00812a6ef1a75b569 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 04:09:16 +0000 Subject: [PATCH 101/268] Fix for Issue #9 --- bookface_auto.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_auto.css b/bookface_auto.css index 52c2a6d..31cce7b 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -2541,7 +2541,7 @@ header #banner { #content .nav > li > .btn-link:hover, #content .nav > li > .btn-link:focus { background-color: var(--link-color); - color: white; + color: white !important; } #topbar-first #nav-notifications-menu { border: 1px solid var(--background-color) !important; From 2b40b192c723773f7d72fe41454289000cf0c347 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 04:09:48 +0000 Subject: [PATCH 102/268] Fix for Issue #9 --- bookface_dark.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_dark.css b/bookface_dark.css index fd25848..77a460a 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -304,7 +304,7 @@ header #banner { #content .nav > li > .btn-link:hover, #content .nav > li > .btn-link:focus { background-color: var(--link-color); - color: white; + color: white !important; } #topbar-first #nav-notifications-menu { border: 1px solid var(--background-color) !important; From 18a011161e78cec47139a717938b63370fdbd668 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 04:10:16 +0000 Subject: [PATCH 103/268] Fix for Issue #9 --- bookface_light.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index 6b5dc5d..cd4acb5 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -304,7 +304,7 @@ #content .nav > li > .btn-link:hover, #content .nav > li > .btn-link:focus { background-color: var(--link-color); - color: white; + color: white !important; } #topbar-first #nav-notifications-menu { border: 1px solid var(--background-color) !important; From cac0570ee282e8b5bd5b2a771e31d73f423c9736 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 04:11:57 +0000 Subject: [PATCH 104/268] Updated Changelog --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index efb3bfd..ec566b2 100644 --- a/README.md +++ b/README.md @@ -275,6 +275,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Added `$contentbg_transp` back as "Frio" default stylesheet slipstream needs it. * Fixed Settings > Channels panel padding and Submit button alignment * Redesigned Calculator Add-On [Issue #8] +* Fixed Compose text formatting rollover effect [Issue #9] 1.4 (12 Feb 2025) * Limited textarea resize fix to settings pages From 206a80194b5bbedce771b96e76306246b2ff602f Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 17:26:58 +0000 Subject: [PATCH 105/268] Calculator add-on visual indicator of active button --- bookface_auto.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/bookface_auto.css b/bookface_auto.css index 31cce7b..2f999d2 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1332,6 +1332,9 @@ background-color: #999; text-align: center; } + .calc-content-wrapper input[type='button']:active { + box-shadow: inset 0 0 100px rgba(255,255,255,.2); + } .calc-content-wrapper input[name='plus'], .calc-content-wrapper input[name='minus'], .calc-content-wrapper input[name='multiplication'], @@ -1339,6 +1342,13 @@ .calc-content-wrapper input[name='enter']{ background-color: orange; } + .calc-content-wrapper input[name='plus']:active, + .calc-content-wrapper input[name='minus']:active, + .calc-content-wrapper input[name='multiplication']:active, + .calc-content-wrapper input[name='division']:active, + .calc-content-wrapper input[name='enter']:active{ + box-shadow: inset 0 0 100px rgba(0,0,0,.2); + } .calc-content-wrapper input[name='plus']{ padding-left: 10px; } From eae0aae6c92e569485134db8259426d995dab95f Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 17:27:34 +0000 Subject: [PATCH 106/268] Calculator add-on visual indicator of active button --- bookface_auto.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/bookface_auto.css b/bookface_auto.css index 2f999d2..cb0bc0d 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -3647,6 +3647,9 @@ aside .widget li:hover { background-color: #999; text-align: center; } + .calc-content-wrapper input[type='button']:active { + box-shadow: inset 0 0 100px rgba(255,255,255,.2); + } .calc-content-wrapper input[name='plus'], .calc-content-wrapper input[name='minus'], .calc-content-wrapper input[name='multiplication'], @@ -3654,6 +3657,13 @@ aside .widget li:hover { .calc-content-wrapper input[name='enter']{ background-color: orange; } + .calc-content-wrapper input[name='plus']:active, + .calc-content-wrapper input[name='minus']:active, + .calc-content-wrapper input[name='multiplication']:active, + .calc-content-wrapper input[name='division']:active, + .calc-content-wrapper input[name='enter']:active{ + box-shadow: inset 0 0 100px rgba(0,0,0,.2); + } .calc-content-wrapper input[name='plus']{ padding-left: 10px; } From 89c9337f253e76a2a6c73c9536bfe30ec249c3aa Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 17:28:19 +0000 Subject: [PATCH 107/268] Calculator add-on visual indicator of active button --- bookface_dark.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/bookface_dark.css b/bookface_dark.css index 77a460a..c4d5033 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1329,6 +1329,9 @@ aside .widget li:hover { background-color: #999; text-align: center; } + .calc-content-wrapper input[type='button']:active { + box-shadow: inset 0 0 100px rgba(255,255,255,.2); + } .calc-content-wrapper input[name='plus'], .calc-content-wrapper input[name='minus'], .calc-content-wrapper input[name='multiplication'], @@ -1336,6 +1339,13 @@ aside .widget li:hover { .calc-content-wrapper input[name='enter']{ background-color: orange; } + .calc-content-wrapper input[name='plus']:active, + .calc-content-wrapper input[name='minus']:active, + .calc-content-wrapper input[name='multiplication']:active, + .calc-content-wrapper input[name='division']:active, + .calc-content-wrapper input[name='enter']:active{ + box-shadow: inset 0 0 100px rgba(0,0,0,.2); + } .calc-content-wrapper input[name='plus']{ padding-left: 10px; } From 0facb1ebd1db2a7df029217210d6679002c92c5a Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Feb 2025 17:28:53 +0000 Subject: [PATCH 108/268] Calculator add-on visual indicator of active button --- bookface_light.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/bookface_light.css b/bookface_light.css index cd4acb5..d521571 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1329,6 +1329,9 @@ background-color: #999; text-align: center; } + .calc-content-wrapper input[type='button']:active { + box-shadow: inset 0 0 100px rgba(255,255,255,.2); + } .calc-content-wrapper input[name='plus'], .calc-content-wrapper input[name='minus'], .calc-content-wrapper input[name='multiplication'], @@ -1336,6 +1339,13 @@ .calc-content-wrapper input[name='enter']{ background-color: orange; } + .calc-content-wrapper input[name='plus']:active, + .calc-content-wrapper input[name='minus']:active, + .calc-content-wrapper input[name='multiplication']:active, + .calc-content-wrapper input[name='division']:active, + .calc-content-wrapper input[name='enter']:active{ + box-shadow: inset 0 0 100px rgba(0,0,0,.2); + } .calc-content-wrapper input[name='plus']{ padding-left: 10px; } From dbd2f949cca37a1802f2e11c5e37059df87b982a Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 22 Feb 2025 20:53:00 +0000 Subject: [PATCH 109/268] Fixed dark mode aside bg color --- bookface_auto.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/bookface_auto.css b/bookface_auto.css index cb0bc0d..21b97b2 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -4033,6 +4033,9 @@ a.tag.label, #mention-link span:last-of-type { margin-right: 42px; } + aside { + background-color: var(--background-color); + } .offcanvas-right-overlay, aside::before { background-color: rgba(0, 0, 0, 0.4); From dd73100ee81bc287bc46ce479417916aad2ef5b6 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 22 Feb 2025 21:00:27 +0000 Subject: [PATCH 110/268] Fixed photo album thumbnails [Issue #10] --- bookface_auto.css | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 21b97b2..fe0dde4 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -2097,7 +2097,13 @@ a.tag.label, #message-new:hover, #message-new:focus { box-shadow: 0 0 100px rgba(0,0,0,.2); - } + } + .justified-gallery > a, + .justified-gallery > div, + .justified-gallery > figure{ + height: 25vw !important; + width: 25vw !important; + } } /* Narrow Screen Phones in Portrait Orientation ============================================ @@ -4408,7 +4414,13 @@ a.tag.label, #message-new:hover, #message-new:focus { box-shadow: 0 0 100px rgba(0,0,0,.2); - } + } + .justified-gallery > a, + .justified-gallery > div, + .justified-gallery > figure{ + height: 25vw !important; + width: 25vw !important; + } } /* Narrow Screen Phones in Portrait Orientation ============================================ From 62a5f905a6a17c0e24057c3155493044a6a56dda Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 22 Feb 2025 21:01:23 +0000 Subject: [PATCH 111/268] Fixed photo album thumbnails [Issue #10] --- bookface_dark.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/bookface_dark.css b/bookface_dark.css index c4d5033..6499ab3 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -2098,7 +2098,13 @@ a.tag.label, #message-new:hover, #message-new:focus { box-shadow: 0 0 100px rgba(0,0,0,.2); - } + } + .justified-gallery > a, + .justified-gallery > div, + .justified-gallery > figure{ + height: 25vw !important; + width: 25vw !important; + } } /* Narrow Screen Phones in Portrait Orientation ============================================ From c3cbcfba6204d01c5248861fce1e802412966f30 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 22 Feb 2025 21:02:00 +0000 Subject: [PATCH 112/268] Fixed photo album thumbnails [Issue #10] --- bookface_light.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index d521571..3432eee 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -2094,7 +2094,13 @@ a.tag.label, #message-new:hover, #message-new:focus { box-shadow: 0 0 100px rgba(0,0,0,.2); - } + } + .justified-gallery > a, + .justified-gallery > div, + .justified-gallery > figure{ + height: 25vw !important; + width: 25vw !important; + } } /* Narrow Screen Phones in Portrait Orientation ============================================ From 90ebb7fb0daae0772b45794e9a3497ad18594951 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 22 Feb 2025 21:04:59 +0000 Subject: [PATCH 113/268] Updated changelog --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index ec566b2..c4b3eba 100644 --- a/README.md +++ b/README.md @@ -276,6 +276,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Fixed Settings > Channels panel padding and Submit button alignment * Redesigned Calculator Add-On [Issue #8] * Fixed Compose text formatting rollover effect [Issue #9] +* Fixed photo album thumbnail size on mobile [Issue #10] 1.4 (12 Feb 2025) * Limited textarea resize fix to settings pages From d44e45f0be0aaae4ad110784d620e22c7595be99 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Fri, 28 Feb 2025 01:22:39 +0000 Subject: [PATCH 114/268] New Mobile Profiles + other fixes --- bookface_auto.css | 814 +++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 733 insertions(+), 81 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index fe0dde4..bd339eb 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,8 +1,8 @@ /* Name : Bookface Auto Color Mode - Version : 1.4 + Version : 1.5 Licence : AGPL - Created on : 12 Feb 2025 + Created on : 27 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -104,23 +104,49 @@ content: '\f0f3'; color: var(--link-color); } + ul.nav-tabs { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + padding-bottom: 20px; + border-color:rgba(0,0,0,.2); + } 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:not(.active):hover { - border-bottom-width: 0px !important; - } - ul.tabs li:hover:not(.active) > a { - background-color: rgba(128,128,128,.1) !important; - background-image: none !important; - border-radius: 8px !important; - color: var(--font-color); + + ul.nav-tabs li a, + ul.tabs li a { + margin-top: 8px; + color: var(--link-color); + border: none; + } + ul.nav-tabs li:not(.active):hover, + ul.tabs li:not(.active):hover { + border-bottom-width: 0px !important; } + ul.nav-tabs li:not(.active):hover > 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); + } + ul.nav-tabs li:not(.active) > a:hover, + ul.nav-tabs li:not(.active) > a:focus { + border: none; + } + ul.nav-tabs li.active { + border-bottom: 4px solid var(--link-color); + } + ul.nav-tabs > li.active > a, + ul.nav-tabs > li.active a:hover, + ul.nav-tabs > li.active a:focus { + border: none; + color: var(--link-color); + background-color: transparent; + } .dropdown-menu { padding-bottom: 15px !important; background-color: var(--nav-bg) !important; @@ -862,6 +888,8 @@ #profile-jot-wrapper .btn-sm, .wall-item-comment-wrapper .btn-sm { background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; color: var(--nav-icon-color); height: 45px; width: 45px; @@ -971,7 +999,7 @@ #upload-photo:focus { background-color: darkblue !important; } - .panel-body { + body.mod-settings .panel-body { background-color: var(--nav-bg); border-radius: 10px; border-top: none !important; @@ -1002,7 +1030,7 @@ 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); + text-shadow: 1px 1px 2px var(--background-color), -1px -1px 2px var(--background-color), 1px -1px 2px var(--background-color), -1px 1px 2px var(--background-color); } aside .vcard .p-addr { font-weight: 600; @@ -1729,28 +1757,126 @@ a.tag.label, 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; - } + /* Profile Aside Mobile */ + body.mod-contact #content, + body.mod-profile #content, + body.mod-photos #content { + margin-top: 350px; + } + /* only seen on your own Recent Photos page */ + body.mod-profile #sidebar-photos-albums::before { + content: '\f083'; + font-family: ForkAwesome; + font-size: 150px; + position: fixed; + top: 175px; + left: 0; + right: 0; + text-align: center; + color: var(--nav-icon-color); + opacity: .5; + z-index: -1; + transition-duration: .5s; + transition-property: left; + } + body.mod-profile aside.canvas-sliding #sidebar-photos-albums::before, + body.mod-profile aside.canvas-slid #sidebar-photos-albums::before { + left: 50%; + } + /* hide camera icon on other profile Recent Photos pages */ + body.mod-profile .vcard + #sidebar-photos-albums::before { + content: ''; + } + body.mod-contact aside, + body.mod-photos aside, + body.mod-profile aside { + margin-top: 0px !important; + left: -300px !important; + right: auto !important; + display: block !important; + padding-top: 120px; + transition-duration: .5s !important; + z-index: auto; + } + body.mod-contact aside.canvas-slid, + body.mod-photos aside.canvas-slid, + body.mod-profile aside.canvas-slid { + left: 0px !important; + right: auto !important; + z-index: 20; + } + body.mod-contact aside #profile-photo-wrapper, + body.mod-photos aside #profile-photo-wrapper, + body.mod-profile aside #profile-photo-wrapper { + position: fixed; + top: 150px; + left: 50%; + height: 150px; + width: 150px; + margin-left: -75px; + transition-timing-function: ease-in-out; + transition-duration: .3s; + transition-property: all; + } + body.mod-contact .profile-header h3.p-name, + body.mod-photos .profile-header h3.p-name, + body.mod-profile .profile-header h3.p-name { + position: fixed; + width: 100%; + top: 300px; + left: 50%; + margin-left: -50%; + transition-timing-function: ease-in-out; + transition-duration: .3s; + transition-property: all; + + } + body.mod-contact .profile-header .p-addr, + body.mod-photos .profile-header .p-addr, + body.mod-profile .profile-header .p-addr { + position: fixed; + width: 50%; + top: 400px; + left: 50%; + margin-left: -25%; + transition-timing-function: ease-in-out; + transition-duration: .3s; + transition-property: all; + } + /* bounce effect */ + body.mod-contact aside.canvas-sliding #profile-photo-wrapper, + body.mod-photos aside.canvas-sliding #profile-photo-wrapper, + body.mod-profile aside.canvas-sliding #profile-photo-wrapper { + margin-left: -150px; + } + body.mod-contact aside.canvas-sliding .profile-header h3.p-name, + body.mod-photos aside.canvas-sliding .profile-header h3.p-name, + body.mod-profile aside.canvas-sliding .profile-header h3.p-name { + margin-left: calc(-50% - 75px); + } + body.mod-contact aside.canvas-sliding .profile-header .p-addr, + body.mod-photos aside.canvas-sliding .profile-header .p-addr, + body.mod-profile aside.canvas-sliding .profile-header .p-addr { + margin-left: -300px; + } + /* centered in right-hand side */ + body.mod-contact aside.canvas-slid #profile-photo-wrapper, + body.mod-photos aside.canvas-slid #profile-photo-wrapper, + body.mod-profile aside.canvas-slid #profile-photo-wrapper { + margin-left: -225px; + } + body.mod-contact aside.canvas-slid .profile-header h3.p-name, + body.mod-photos aside.canvas-slid .profile-header h3.p-name, + body.mod-profile aside.canvas-slid .profile-header h3.p-name { + margin-left: calc(-50% - 150px); + } + body.mod-contact aside.canvas-slid .profile-header .p-addr, + body.mod-photos aside.canvas-slid .profile-header .p-addr, + body.mod-profile aside.canvas-slid .profile-header .p-addr { + margin-left: calc(-25% - 150px); + } + /* Cover Photo Mobile */ + .coverphoto.canvas-sliding, .coverphoto.canvas-slid{ left: 0px !important; right: 0px !important; @@ -1764,7 +1890,7 @@ a.tag.label, top: 500px; left: 0px; width: 100%; - height: 100%; + height: 500%; display: block; background-color: var(--background-color); } @@ -1946,7 +2072,7 @@ a.tag.label, display: none !important; } #offcanvasUsermenu li.list-group-item, - #offcanvasUsermenu li.list-group-item a { + #offcanvasUsermenu li.list-group-item a { border: transparent !important; background-color: transparent !important; color: var(--nav-icon-color) !important; @@ -1999,18 +2125,28 @@ a.tag.label, #topbar-second ul.tabbar > li:first-of-type { max-width: 75%; overflow: hidden; + margin-right: 50px; } #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%; + height: 100%; } #topbar-second ul.tabbar li:first-of-type ul.tabs li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + /* prevent dropdown being pushed off toolbar */ + #topbar-second ul.tabbar > li:last-of-type { + margin-left: -50px; + border-bottom: 4px solid var(--link-color); + } + #topbar-second ul.tabbar > li:last-of-type li.dropdown { + margin-left: 0px !important; + } #dropdownMenuTools-xs { height: 60px; } @@ -2078,7 +2214,27 @@ a.tag.label, padding-top: 60px; padding-bottom: 60px; } - .coverphoto { + body.mod-profile #sidebar-photos-albums::before { + top: 125px; + } + body.mod-contact aside #profile-photo-wrapper, + body.mod-photos aside #profile-photo-wrapper, + body.mod-profile aside #profile-photo-wrapper { + top: 100px; + } + body.mod-contact .profile-header h3.p-name, + body.mod-photos .profile-header h3.p-name, + body.mod-profile .profile-header h3.p-name { + top: 255px; + } + body.mod-contact .profile-header .p-addr, + body.mod-photos .profile-header .p-addr, + body.mod-profile .profile-header .p-addr { + top: 345px; + } + .coverphoto, + .coverphoto.canvas-sliding, + .coverphoto.canvas-slid { top: 55px; } #message-new { @@ -2105,6 +2261,109 @@ a.tag.label, width: 25vw !important; } } +/* Frio Theme Cut-Off (double sidebar width) + ========================================= +*/ +@media screen and (max-width: 600px) and (orientation: portrait) { + body.mod-contact aside, + body.mod-photos aside, + body.mod-profile aside { + left: -100% !important; + right: 0% !important; + max-width: 100% !important; + width: 100% !important; + padding-top: 60px; + background-color: var(--background-color) !important; + } + /* only seen on your own Recent Photos page */ + body.mod-profile #sidebar-photos-albums::before { + transition-property: top; + } + body.mod-profile aside.canvas-sliding #sidebar-photos-albums::before, + body.mod-profile aside.canvas-slid #sidebar-photos-albums::before { + left: 0px; + top: 150%; + } + body.mod-contact aside.canvas-slid, + body.mod-photos aside.canvas-slid, + body.mod-profile aside.canvas-slid { + left: 0px !important; + } + body.mod-contact aside.canvas-slid::before, + body.mod-photos aside.canvas-slid::before, + body.mod-profile aside.canvas-slid::before { + opacity: 0; + } + body.mod-contact aside #profile-photo-wrapper, + body.mod-photos aside #profile-photo-wrapper, + body.mod-profile aside #profile-photo-wrapper { + top: 100px; + } + body.mod-contact .profile-header h3.p-name, + body.mod-photos .profile-header h3.p-name, + body.mod-profile .profile-header h3.p-name { + top: 255px; + } + body.mod-contact .profile-header .p-addr, + body.mod-photos .profile-header .p-addr, + body.mod-profile .profile-header .p-addr { + top: 345px; + width: 80%; + margin-left: -40%; + } + /* bounce effect */ + body.mod-contact aside.canvas-sliding #profile-photo-wrapper, + body.mod-photos aside.canvas-sliding #profile-photo-wrapper, + body.mod-profile aside.canvas-sliding #profile-photo-wrapper { + margin-left: -75px; + top: 150% !important; + } + body.mod-contact aside.canvas-sliding .profile-header h3.p-name, + body.mod-photos aside.canvas-sliding .profile-header h3.p-name, + body.mod-profile aside.canvas-sliding .profile-header h3.p-name { + margin-left: -50%; + top: 150% !important; + } + body.mod-contact aside.canvas-sliding .profile-header .p-addr, + body.mod-photos aside.canvas-sliding .profile-header .p-addr, + body.mod-profile aside.canvas-sliding .profile-header .p-addr { + margin-left: -25%; + top: 150% !important; + } + + body.mod-contact aside.canvas-slid #profile-photo-wrapper, + body.mod-photo aside.canvas-slid #profile-photo-wrapper, + body.mod-profile aside.canvas-slid #profile-photo-wrapper { + margin-left: -75px; + top: 150% !important; + } + body.mod-contact aside.canvas-slid .profile-header h3.p-name, + body.mod-photo aside.canvas-slid .profile-header h3.p-name, + body.mod-profile aside.canvas-slid .profile-header h3.p-name { + margin-left: -50%; + top: 150% !important; + } + body.mod-contact aside.canvas-slid .profile-header .p-addr, + body.mod-photo aside.canvas-slid .profile-header .p-addr, + body.mod-profile aside.canvas-slid .profile-header .p-addr { + margin-left: -25%; + top: 150% !important; + } + .coverphoto { + transition-duration: .5s; + transition-property: top; + } + body.mod-contact.aside-out .coverphoto, + body.mod-photo.aside-out .coverphoto, + body.mod-profile.aside-out .coverphoto, + body.mod-contact aside.canvas-slid .coverphoto, + body.mod-photo aside.canvas-slid .coverphoto, + body.mod-profile aside.canvas-slid .coverphoto { + top: 150% !important; + left: 0px; + right: 0px; + } +} /* Narrow Screen Phones in Portrait Orientation ============================================ */ @@ -2118,6 +2377,28 @@ a.tag.label, .wall-item-actions-row .button-browser-share::after { display: none !important; } + ul.nav-tabs { + display: block; + } + ul.nav-tabs li { + width: 98%; + text-align: center; + } + ul.nav-tabs li a { + border: 1px solid var(--link-color) !important; + border-radius: 8px !important; + } + ul.nav-tabs li:not(.active) a:hover, + ul.nav-tabs li:not(.active) a:focus { + background-color: rgba(0,0,0,.2); + } + ul.nav-tabs li.active { + border: none !important; + } + ul.nav-tabs li.active a { + background-color: var(--link-color) !important; + color: #fff !important; + } } /* Narrow Screen Phones in Landscape Orientation ============================================== @@ -2172,7 +2453,7 @@ a.tag.label, padding: 0 !important; } #topbar-first .nav > .account { - top: -5px; + top: 0px; right: 5px; } #main-menu img { @@ -2236,9 +2517,54 @@ a.tag.label, .offcanvas-right-overlay { top: 0px; } - .row:has(.coverphoto) #content { - margin-top: 200px; + /* Profile Pages */ + body.mod-contact #content, + body.mod-profile #content, + body.mod-photos #content { + margin-top: 200px !important; } + body.mod-profile #sidebar-photos-albums::before { + top: 25px; + } + body.mod-contact aside, + body.mod-photos aside, + body.mod-profile aside { + padding-top: 50px; + padding-bottom: 50px; + } + body.mod-contact aside.canvas-slid, + body.mod-photos aside.canvas-slid, + body.mod-profile aside.canvas-slid { + left: 0px !important; + right: auto !important; + max-width: 300px !important; + background-color: transparent !important; + z-index: 20; + } + body.mod-contact aside.canvas-slid::before, + body.mod-photos aside.canvas-slid::before, + body.mod-profile aside.canvas-slid::before { + opacity: 1; + } + body.mod-contact aside #profile-photo-wrapper, + body.mod-photos aside #profile-photo-wrapper, + body.mod-profile aside #profile-photo-wrapper { + top: 10px; + } + body.mod-contact .profile-header h3.p-name, + body.mod-photos .profile-header h3.p-name, + body.mod-profile .profile-header h3.p-name { + top: 155px; + } + body.mod-contact .profile-header .p-addr, + body.mod-photos .profile-header .p-addr, + body.mod-profile .profile-header .p-addr { + top: 205px; + width: 50%; + margin-left: -25%; + } + .coverphoto.canvas-sliding, + .coverphoto.canvas-slid, .coverphoto { top: 0px; } @@ -2353,23 +2679,48 @@ nav.navbar .nav > li > button:focus { content: '\f0f3'; color: var(--link-color); } +ul.nav-tabs { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + padding-bottom: 20px; + border-color:rgba(255,255,255,.2); +} ul.tabs li { font-size: 15px !important; margin-left: 10px !important; } + ul.nav-tabs li a, ul.tabs li a { margin-top: 8px; color: var(--link-color); + border: none; } - ul.tabs li:hover:not(.active) { - border-bottom-width: 0px !important; - } + ul.nav-tabs li:not(.active):hover, + ul.tabs li:not(.active):hover { + border-bottom-width: 0px !important; + } + ul.nav-tabs li:not(.active):hover > 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); } + ul.nav-tabs li:not(.active) > a:hover, + ul.nav-tabs li:not(.active) > a:focus { + border: none; + } + ul.nav-tabs li.active { + border-bottom: 4px solid var(--link-color); + } + ul.nav-tabs > li.active > a, + ul.nav-tabs > li.active a:hover, + ul.nav-tabs > li.active a:focus { + border: none; + color: var(--link-color); + background-color: transparent; + } .dropdown-menu { padding-bottom: 15px !important; background-color: var(--nav-bg) !important; @@ -3158,6 +3509,8 @@ p.wall-item-announce, #profile-jot-wrapper .btn-sm, .wall-item-comment-wrapper .btn-sm { background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; color: var(--nav-icon-color); height: 45px; width: 45px; @@ -3273,7 +3626,7 @@ p.wall-item-announce, #upload-photo:focus { background-color: darkblue !important; } - .panel-body { + body.mod-setting .panel-body { background-color: var(--nav-bg); border-radius: 10px; border-top: none !important; @@ -3285,8 +3638,7 @@ p.wall-item-announce, .fbswitcher [data-mode="attachment"] { display: var(--attach-file-button) !important; } - .panel, - .panel-body { + body.mod-settings .panel-body { background-color: var(--nav-bg); border-radius: 10px; } @@ -3322,7 +3674,7 @@ 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); + text-shadow: 1px 1px 2px var(--background-color), -1px -1px 2px var(--background-color), 1px -1px 2px var(--background-color), -1px 1px 2px var(--background-color); } aside .vcard .p-addr { font-weight: 600; @@ -4046,28 +4398,126 @@ a.tag.label, 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; - } + /* Profile Aside Mobile */ + body.mod-contact #content, + body.mod-profile #content, + body.mod-photos #content { + margin-top: 350px; + } + /* only seen on your own Recent Photos page */ + body.mod-profile #sidebar-photos-albums::before { + content: '\f083'; + font-family: ForkAwesome; + font-size: 150px; + position: fixed; + top: 175px; + left: 0; + right: 0; + text-align: center; + color: var(--nav-icon-color); + opacity: .5; + z-index: -1; + transition-duration: .5s; + transition-property: left; + } + body.mod-profile aside.canvas-sliding #sidebar-photos-albums::before, + body.mod-profile aside.canvas-slid #sidebar-photos-albums::before { + left: 50%; + } + /* hide camera icon on other profile Recent Photos pages */ + body.mod-profile .vcard + #sidebar-photos-albums::before { + content: ''; + } + body.mod-contact aside, + body.mod-photos aside, + body.mod-profile aside { + margin-top: 0px !important; + left: -300px !important; + right: auto !important; + display: block !important; + padding-top: 120px; + transition-duration: .5s !important; + z-index: auto; + } + body.mod-contact aside.canvas-slid, + body.mod-photos aside.canvas-slid, + body.mod-profile aside.canvas-slid { + left: 0px !important; + right: auto !important; + z-index: 20; + } + body.mod-contact aside #profile-photo-wrapper, + body.mod-photos aside #profile-photo-wrapper, + body.mod-profile aside #profile-photo-wrapper { + position: fixed; + top: 150px; + left: 50%; + height: 150px; + width: 150px; + margin-left: -75px; + transition-timing-function: ease-in-out; + transition-duration: .3s; + transition-property: all; + } + body.mod-contact .profile-header h3.p-name, + body.mod-photos .profile-header h3.p-name, + body.mod-profile .profile-header h3.p-name { + position: fixed; + width: 100%; + top: 300px; + left: 50%; + margin-left: -50%; + transition-timing-function: ease-in-out; + transition-duration: .3s; + transition-property: all; + + } + body.mod-contact .profile-header .p-addr, + body.mod-photos .profile-header .p-addr, + body.mod-profile .profile-header .p-addr { + position: fixed; + width: 50%; + top: 400px; + left: 50%; + margin-left: -25%; + transition-timing-function: ease-in-out; + transition-duration: .3s; + transition-property: all; + } + /* bounce effect */ + body.mod-contact aside.canvas-sliding #profile-photo-wrapper, + body.mod-photos aside.canvas-sliding #profile-photo-wrapper, + body.mod-profile aside.canvas-sliding #profile-photo-wrapper { + margin-left: -150px; + } + body.mod-contact aside.canvas-sliding .profile-header h3.p-name, + body.mod-photos aside.canvas-sliding .profile-header h3.p-name, + body.mod-profile aside.canvas-sliding .profile-header h3.p-name { + margin-left: calc(-50% - 75px); + } + body.mod-contact aside.canvas-sliding .profile-header .p-addr, + body.mod-photos aside.canvas-sliding .profile-header .p-addr, + body.mod-profile aside.canvas-sliding .profile-header .p-addr { + margin-left: -300px; + } + /* centered in right-hand side */ + body.mod-contact aside.canvas-slid #profile-photo-wrapper, + body.mod-photos aside.canvas-slid #profile-photo-wrapper, + body.mod-profile aside.canvas-slid #profile-photo-wrapper { + margin-left: -225px; + } + body.mod-contact aside.canvas-slid .profile-header h3.p-name, + body.mod-photos aside.canvas-slid .profile-header h3.p-name, + body.mod-profile aside.canvas-slid .profile-header h3.p-name { + margin-left: calc(-50% - 150px); + } + body.mod-contact aside.canvas-slid .profile-header .p-addr, + body.mod-photos aside.canvas-slid .profile-header .p-addr, + body.mod-profile aside.canvas-slid .profile-header .p-addr { + margin-left: calc(-25% - 150px); + } + /* Cover Photo Mobile */ + .coverphoto.canvas-sliding, .coverphoto.canvas-slid{ left: 0px !important; right: 0px !important; @@ -4081,7 +4531,7 @@ a.tag.label, top: 500px; left: 0px; width: 100%; - height: 100%; + height: 500%; display: block; background-color: var(--background-color); } @@ -4316,18 +4766,28 @@ a.tag.label, #topbar-second ul.tabbar > li:first-of-type { max-width: 75%; overflow: hidden; + margin-right: 50px; } #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%; + height: 100%; } #topbar-second ul.tabbar li:first-of-type ul.tabs li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + /* prevent dropdown being pushed off toolbar */ + #topbar-second ul.tabbar > li:last-of-type { + margin-left: -50px; + border-bottom: 4px solid var(--link-color); + } + #topbar-second ul.tabbar > li:last-of-type li.dropdown { + margin-left: 0px !important; + } #dropdownMenuTools-xs { height: 60px; } @@ -4395,9 +4855,29 @@ a.tag.label, padding-top: 60px; padding-bottom: 60px; } - .coverphoto { + body.mod-profile #sidebar-photos-albums::before { + top: 125px; + } + body.mod-contact aside #profile-photo-wrapper, + body.mod-photos aside #profile-photo-wrapper, + body.mod-profile aside #profile-photo-wrapper { + top: 100px; + } + body.mod-contact .profile-header h3.p-name, + body.mod-photos .profile-header h3.p-name, + body.mod-profile .profile-header h3.p-name { + top: 255px; + } + body.mod-contact .profile-header .p-addr, + body.mod-photos .profile-header .p-addr, + body.mod-profile .profile-header .p-addr { + top: 345px; + } + .coverphoto, + .coverphoto.canvas-sliding, + .coverphoto.canvas-slid { top: 55px; - } + } #message-new { height: 50px; width: 50px; @@ -4422,6 +4902,109 @@ a.tag.label, width: 25vw !important; } } +/* Frio Theme Cut-Off (double sidebar width) + ========================================= +*/ +@media screen and (max-width: 600px) and (orientation: portrait) { + body.mod-contact aside, + body.mod-photos aside, + body.mod-profile aside { + left: -100% !important; + right: 0% !important; + max-width: 100% !important; + width: 100% !important; + padding-top: 60px; + background-color: var(--background-color) !important; + } + /* only seen on your own Recent Photos page */ + body.mod-profile #sidebar-photos-albums::before { + transition-property: top; + } + body.mod-profile aside.canvas-sliding #sidebar-photos-albums::before, + body.mod-profile aside.canvas-slid #sidebar-photos-albums::before { + left: 0px; + top: 150%; + } + body.mod-contact aside.canvas-slid, + body.mod-photos aside.canvas-slid, + body.mod-profile aside.canvas-slid { + left: 0px !important; + } + body.mod-contact aside.canvas-slid::before, + body.mod-photos aside.canvas-slid::before, + body.mod-profile aside.canvas-slid::before { + opacity: 0; + } + body.mod-contact aside #profile-photo-wrapper, + body.mod-photos aside #profile-photo-wrapper, + body.mod-profile aside #profile-photo-wrapper { + top: 100px; + } + body.mod-contact .profile-header h3.p-name, + body.mod-photos .profile-header h3.p-name, + body.mod-profile .profile-header h3.p-name { + top: 255px; + } + body.mod-contact .profile-header .p-addr, + body.mod-photos .profile-header .p-addr, + body.mod-profile .profile-header .p-addr { + top: 345px; + width: 80%; + margin-left: -40%; + } + /* bounce effect */ + body.mod-contact aside.canvas-sliding #profile-photo-wrapper, + body.mod-photos aside.canvas-sliding #profile-photo-wrapper, + body.mod-profile aside.canvas-sliding #profile-photo-wrapper { + margin-left: -75px; + top: 150% !important; + } + body.mod-contact aside.canvas-sliding .profile-header h3.p-name, + body.mod-photos aside.canvas-sliding .profile-header h3.p-name, + body.mod-profile aside.canvas-sliding .profile-header h3.p-name { + margin-left: -50%; + top: 150% !important; + } + body.mod-contact aside.canvas-sliding .profile-header .p-addr, + body.mod-photos aside.canvas-sliding .profile-header .p-addr, + body.mod-profile aside.canvas-sliding .profile-header .p-addr { + margin-left: -25%; + top: 150% !important; + } + + body.mod-contact aside.canvas-slid #profile-photo-wrapper, + body.mod-photo aside.canvas-slid #profile-photo-wrapper, + body.mod-profile aside.canvas-slid #profile-photo-wrapper { + margin-left: -75px; + top: 150% !important; + } + body.mod-contact aside.canvas-slid .profile-header h3.p-name, + body.mod-photo aside.canvas-slid .profile-header h3.p-name, + body.mod-profile aside.canvas-slid .profile-header h3.p-name { + margin-left: -50%; + top: 150% !important; + } + body.mod-contact aside.canvas-slid .profile-header .p-addr, + body.mod-photo aside.canvas-slid .profile-header .p-addr, + body.mod-profile aside.canvas-slid .profile-header .p-addr { + margin-left: -25%; + top: 150% !important; + } + .coverphoto { + transition-duration: .5s; + transition-property: top; + } + body.mod-contact.aside-out .coverphoto, + body.mod-photo.aside-out .coverphoto, + body.mod-profile.aside-out .coverphoto, + body.mod-contact aside.canvas-slid .coverphoto, + body.mod-photo aside.canvas-slid .coverphoto, + body.mod-profile aside.canvas-slid .coverphoto { + top: 150% !important; + left: 0px; + right: 0px; + } +} /* Narrow Screen Phones in Portrait Orientation ============================================ */ @@ -4435,6 +5018,28 @@ a.tag.label, .wall-item-actions-row .button-browser-share::after { display: none !important; } + ul.nav-tabs { + display: block; + } + ul.nav-tabs li { + width: 98%; + text-align: center; + } + ul.nav-tabs li a { + border: 1px solid var(--link-color) !important; + border-radius: 8px !important; + } + ul.nav-tabs li:not(.active) a:hover, + ul.nav-tabs li:not(.active) a:focus { + background-color: rgba(255,255,255,.2); + } + ul.nav-tabs li.active { + border: none !important; + } + ul.nav-tabs li.active a { + background-color: var(--link-color) !important; + color: #000 !important; + } } /* Narrow Screen Phones in Landscape Orientation ============================================== @@ -4486,6 +5091,11 @@ a.tag.label, #topbar-first .offcanvas-right-toggle { top: 3px; right: 13px; + padding: 0 !important; + } + #topbar-first .nav > .account { + top: 0px; + right: 5px; } #main-menu img { border: 5px solid var(--link-color); @@ -4548,14 +5158,56 @@ a.tag.label, .offcanvas-right-overlay { top: 0px; } - .row:has(.coverphoto) #content { - margin-top: 200px; + /* Profile Pages */ + body.mod-contact #content, + body.mod-profile #content, + body.mod-photos #content { + margin-top: 200px !important; } + body.mod-profile #sidebar-photos-albums::before { + top: 25px; + } + body.mod-contact aside, + body.mod-photos aside, + body.mod-profile aside { + padding-top: 50px; + padding-bottom: 50px; + } + body.mod-contact aside.canvas-slid, + body.mod-photos aside.canvas-slid, + body.mod-profile aside.canvas-slid { + left: 0px !important; + right: auto !important; + max-width: 300px !important; + background-color: transparent !important; + z-index: 20; + } + body.mod-contact aside.canvas-slid::before, + body.mod-photos aside.canvas-slid::before, + body.mod-profile aside.canvas-slid::before { + opacity: 1; + } + body.mod-contact aside #profile-photo-wrapper, + body.mod-photos aside #profile-photo-wrapper, + body.mod-profile aside #profile-photo-wrapper { + top: 10px; + } + body.mod-contact .profile-header h3.p-name, + body.mod-photos .profile-header h3.p-name, + body.mod-profile .profile-header h3.p-name { + top: 155px; + } + body.mod-contact .profile-header .p-addr, + body.mod-photos .profile-header .p-addr, + body.mod-profile .profile-header .p-addr { + top: 205px; + width: 50%; + margin-left: -25%; + } + .coverphoto.canvas-sliding, + .coverphoto.canvas-slid, .coverphoto { top: 0px; - left: 0px; - right: 0px; - height: 500px; } } } From 20e3b592b8cb0d27c7c772d645fc96a91d95a839 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Fri, 28 Feb 2025 01:23:09 +0000 Subject: [PATCH 115/268] New Mobile Profiles + other fixes --- bookface_dark.css | 401 +++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 361 insertions(+), 40 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 6499ab3..9cfad02 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,8 +1,8 @@ /* Name : Bookface Dark - Version : 1.4 + Version : 1.5 Licence : AGPL - Created on : 12 Feb 2025 + Created on : 27 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -104,23 +104,48 @@ nav.navbar .nav > li > button:focus { content: '\f0f3'; color: var(--link-color); } +ul.nav-tabs { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + padding-bottom: 20px; + border-color:rgba(255,255,255,.2); +} ul.tabs li { font-size: 15px !important; margin-left: 10px !important; } + ul.nav-tabs li a, ul.tabs li a { margin-top: 8px; color: var(--link-color); + border: none; } + ul.nav-tabs li:not(.active):hover, ul.tabs li:not(.active):hover { border-bottom-width: 0px !important; } + ul.nav-tabs li:not(.active):hover > 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); } + ul.nav-tabs li:not(.active) > a:hover, + ul.nav-tabs li:not(.active) > a:focus { + border: none; + } + ul.nav-tabs li.active { + border-bottom: 4px solid var(--link-color); + } + ul.nav-tabs > li.active > a, + ul.nav-tabs > li.active a:hover, + ul.nav-tabs > li.active a:focus { + border: none; + color: var(--link-color); + background-color: transparent; + } .dropdown-menu { padding-bottom: 15px !important; background-color: var(--nav-bg) !important; @@ -862,6 +887,8 @@ aside .widget, #profile-jot-wrapper .btn-sm, .wall-item-comment-wrapper .btn-sm { background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; color: var(--nav-icon-color); height: 45px; width: 45px; @@ -971,7 +998,7 @@ aside .widget, #upload-photo:focus { background-color: darkblue !important; } - .panel-body { + body.mod-settings .panel-body { background-color: var(--nav-bg); border-radius: 10px; border-top: none !important; @@ -1002,7 +1029,7 @@ 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); + text-shadow: 1px 1px 2px var(--background-color), -1px -1px 2px var(--background-color), 1px -1px 2px var(--background-color), -1px 1px 2px var(--background-color); } aside .vcard .p-addr { font-weight: 600; @@ -1726,34 +1753,130 @@ a.tag.label, aside::before { background-color: rgba(0, 0, 0, 0.4); } + /* Profile Aside Mobile */ + body.mod-contact #content, + body.mod-profile #content, + body.mod-photos #content { + margin-top: 350px; + } + /* only seen on your own Recent Photos page */ + body.mod-profile #sidebar-photos-albums::before { + content: '\f083'; + font-family: ForkAwesome; + font-size: 150px; + position: fixed; + top: 175px; + left: 0; + right: 0; + text-align: center; + color: var(--nav-icon-color); + opacity: .5; + z-index: -1; + transition-duration: .5s; + transition-property: left; + } + body.mod-profile aside.canvas-sliding #sidebar-photos-albums::before, + body.mod-profile aside.canvas-slid #sidebar-photos-albums::before { + left: 50%; + } + /* hide camera icon on other profile Recent Photos pages */ + body.mod-profile .vcard + #sidebar-photos-albums::before { + content: ''; + } + body.mod-contact aside, + body.mod-photos aside, + body.mod-profile aside { + margin-top: 0px !important; + left: -300px !important; + right: auto !important; + display: block !important; + padding-top: 120px; + transition-duration: .5s !important; + z-index: auto; + } + body.mod-contact aside.canvas-slid, + body.mod-photos aside.canvas-slid, + body.mod-profile aside.canvas-slid { + left: 0px !important; + right: auto !important; + z-index: 20; + } + body.mod-contact aside #profile-photo-wrapper, + body.mod-photos aside #profile-photo-wrapper, + body.mod-profile aside #profile-photo-wrapper { + position: fixed; + top: 150px; + left: 50%; + height: 150px; + width: 150px; + margin-left: -75px; + transition-timing-function: ease-in-out; + transition-duration: .3s; + transition-property: all; + } + body.mod-contact .profile-header h3.p-name, + body.mod-photos .profile-header h3.p-name, + body.mod-profile .profile-header h3.p-name { + position: fixed; + width: 100%; + top: 300px; + left: 50%; + margin-left: -50%; + transition-timing-function: ease-in-out; + transition-duration: .3s; + transition-property: all; + + } + body.mod-contact .profile-header .p-addr, + body.mod-photos .profile-header .p-addr, + body.mod-profile .profile-header .p-addr { + position: fixed; + width: 50%; + top: 400px; + left: 50%; + margin-left: -25%; + transition-timing-function: ease-in-out; + transition-duration: .3s; + transition-property: all; + } + /* bounce effect */ + body.mod-contact aside.canvas-sliding #profile-photo-wrapper, + body.mod-photos aside.canvas-sliding #profile-photo-wrapper, + body.mod-profile aside.canvas-sliding #profile-photo-wrapper { + margin-left: -150px; + } + body.mod-contact aside.canvas-sliding .profile-header h3.p-name, + body.mod-photos aside.canvas-sliding .profile-header h3.p-name, + body.mod-profile aside.canvas-sliding .profile-header h3.p-name { + margin-left: calc(-50% - 75px); + } + body.mod-contact aside.canvas-sliding .profile-header .p-addr, + body.mod-photos aside.canvas-sliding .profile-header .p-addr, + body.mod-profile aside.canvas-sliding .profile-header .p-addr { + margin-left: -300px; + } + /* centered in right-hand side */ + body.mod-contact aside.canvas-slid #profile-photo-wrapper, + body.mod-photos aside.canvas-slid #profile-photo-wrapper, + body.mod-profile aside.canvas-slid #profile-photo-wrapper { + margin-left: -225px; + } + body.mod-contact aside.canvas-slid .profile-header h3.p-name, + body.mod-photos aside.canvas-slid .profile-header h3.p-name, + body.mod-profile aside.canvas-slid .profile-header h3.p-name { + margin-left: calc(-50% - 150px); + } + body.mod-contact aside.canvas-slid .profile-header .p-addr, + body.mod-photos aside.canvas-slid .profile-header .p-addr, + body.mod-profile aside.canvas-slid .profile-header .p-addr { + margin-left: calc(-25% - 150px); + } /* 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-sliding, .coverphoto.canvas-slid{ - top: 115px !important; left: 0px !important; right: 0px !important; - bottom: 0px !important; + bottom: 0px; background-color: var(--background-color); overflow: visible; } @@ -1763,7 +1886,7 @@ a.tag.label, top: 500px; left: 0px; width: 100%; - height: 100%; + height: 500%; display: block; background-color: var(--background-color); } @@ -1998,18 +2121,28 @@ a.tag.label, #topbar-second ul.tabbar > li:first-of-type { max-width: 75%; overflow: hidden; + margin-right: 50px; } #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%; + height: 100%; } #topbar-second ul.tabbar li:first-of-type ul.tabs li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + /* prevent dropdown being pushed off toolbar */ + #topbar-second ul.tabbar > li:last-of-type { + margin-left: -50px; + border-bottom: 4px solid var(--link-color); + } + #topbar-second ul.tabbar > li:last-of-type li.dropdown { + margin-left: 0px !important; + } #dropdownMenuTools-xs { height: 60px; } @@ -2077,11 +2210,29 @@ a.tag.label, padding-top: 60px; padding-bottom: 60px; } + body.mod-profile #sidebar-photos-albums::before { + top: 125px; + } + body.mod-contact aside #profile-photo-wrapper, + body.mod-photos aside #profile-photo-wrapper, + body.mod-profile aside #profile-photo-wrapper { + top: 100px; + } + body.mod-contact .profile-header h3.p-name, + body.mod-photos .profile-header h3.p-name, + body.mod-profile .profile-header h3.p-name { + top: 255px; + } + body.mod-contact .profile-header .p-addr, + body.mod-photos .profile-header .p-addr, + body.mod-profile .profile-header .p-addr { + top: 345px; + } .coverphoto, .coverphoto.canvas-sliding, - .coverphoto.canvas-slid{ - top: 55px !important; - } + .coverphoto.canvas-slid { + top: 55px; + } #message-new { height: 50px; width: 50px; @@ -2106,6 +2257,109 @@ a.tag.label, width: 25vw !important; } } +/* Frio Theme Cut-Off (double sidebar width) + ========================================= +*/ +@media screen and (max-width: 600px) and (orientation: portrait) { + body.mod-contact aside, + body.mod-photos aside, + body.mod-profile aside { + left: -100% !important; + right: 0% !important; + max-width: 100% !important; + width: 100% !important; + padding-top: 60px; + background-color: var(--background-color) !important; + } + /* only seen on your own Recent Photos page */ + body.mod-profile #sidebar-photos-albums::before { + transition-property: top; + } + body.mod-profile aside.canvas-sliding #sidebar-photos-albums::before, + body.mod-profile aside.canvas-slid #sidebar-photos-albums::before { + left: 0px; + top: 150%; + } + body.mod-contact aside.canvas-slid, + body.mod-photos aside.canvas-slid, + body.mod-profile aside.canvas-slid { + left: 0px !important; + } + body.mod-contact aside.canvas-slid::before, + body.mod-photos aside.canvas-slid::before, + body.mod-profile aside.canvas-slid::before { + opacity: 0; + } + body.mod-contact aside #profile-photo-wrapper, + body.mod-photos aside #profile-photo-wrapper, + body.mod-profile aside #profile-photo-wrapper { + top: 100px; + } + body.mod-contact .profile-header h3.p-name, + body.mod-photos .profile-header h3.p-name, + body.mod-profile .profile-header h3.p-name { + top: 255px; + } + body.mod-contact .profile-header .p-addr, + body.mod-photos .profile-header .p-addr, + body.mod-profile .profile-header .p-addr { + top: 345px; + width: 80%; + margin-left: -40%; + } + /* bounce effect */ + body.mod-contact aside.canvas-sliding #profile-photo-wrapper, + body.mod-photos aside.canvas-sliding #profile-photo-wrapper, + body.mod-profile aside.canvas-sliding #profile-photo-wrapper { + margin-left: -75px; + top: 150% !important; + } + body.mod-contact aside.canvas-sliding .profile-header h3.p-name, + body.mod-photos aside.canvas-sliding .profile-header h3.p-name, + body.mod-profile aside.canvas-sliding .profile-header h3.p-name { + margin-left: -50%; + top: 150% !important; + } + body.mod-contact aside.canvas-sliding .profile-header .p-addr, + body.mod-photos aside.canvas-sliding .profile-header .p-addr, + body.mod-profile aside.canvas-sliding .profile-header .p-addr { + margin-left: -25%; + top: 150% !important; + } + + body.mod-contact aside.canvas-slid #profile-photo-wrapper, + body.mod-photo aside.canvas-slid #profile-photo-wrapper, + body.mod-profile aside.canvas-slid #profile-photo-wrapper { + margin-left: -75px; + top: 150% !important; + } + body.mod-contact aside.canvas-slid .profile-header h3.p-name, + body.mod-photo aside.canvas-slid .profile-header h3.p-name, + body.mod-profile aside.canvas-slid .profile-header h3.p-name { + margin-left: -50%; + top: 150% !important; + } + body.mod-contact aside.canvas-slid .profile-header .p-addr, + body.mod-photo aside.canvas-slid .profile-header .p-addr, + body.mod-profile aside.canvas-slid .profile-header .p-addr { + margin-left: -25%; + top: 150% !important; + } + .coverphoto { + transition-duration: .5s; + transition-property: top; + } + body.mod-contact.aside-out .coverphoto, + body.mod-photo.aside-out .coverphoto, + body.mod-profile.aside-out .coverphoto, + body.mod-contact aside.canvas-slid .coverphoto, + body.mod-photo aside.canvas-slid .coverphoto, + body.mod-profile aside.canvas-slid .coverphoto { + top: 150% !important; + left: 0px; + right: 0px; + } +} /* Narrow Screen Phones in Portrait Orientation ============================================ */ @@ -2119,6 +2373,28 @@ a.tag.label, .wall-item-actions-row .button-browser-share::after { display: none !important; } + ul.nav-tabs { + display: block; + } + ul.nav-tabs li { + width: 98%; + text-align: center; + } + ul.nav-tabs li a { + border: 1px solid var(--link-color) !important; + border-radius: 8px !important; + } + ul.nav-tabs li:not(.active) a:hover, + ul.nav-tabs li:not(.active) a:focus { + background-color: rgba(255,255,255,.2); + } + ul.nav-tabs li.active { + border: none !important; + } + ul.nav-tabs li.active a { + background-color: var(--link-color) !important; + color: #000 !important; + } } /* Narrow Screen Phones in Landscape Orientation ============================================== @@ -2170,6 +2446,11 @@ a.tag.label, #topbar-first .offcanvas-right-toggle { top: 3px; right: 13px; + padding: 0 !important; + } + #topbar-first .nav > .account { + top: 0px; + right: 5px; } #main-menu img { border: 5px solid var(--link-color); @@ -2232,17 +2513,57 @@ a.tag.label, .offcanvas-right-overlay { top: 0px; } - .row:has(.coverphoto) #content { - margin-top: 200px; + /* Profile Pages */ + body.mod-contact #content, + body.mod-profile #content, + body.mod-photos #content { + margin-top: 200px !important; + } + body.mod-profile #sidebar-photos-albums::before { + top: 25px; + } + body.mod-contact aside, + body.mod-photos aside, + body.mod-profile aside { + padding-top: 50px; + padding-bottom: 50px; + } + body.mod-contact aside.canvas-slid, + body.mod-photos aside.canvas-slid, + body.mod-profile aside.canvas-slid { + left: 0px !important; + right: auto !important; + max-width: 300px !important; + background-color: transparent !important; + z-index: 20; + } + body.mod-contact aside.canvas-slid::before, + body.mod-photos aside.canvas-slid::before, + body.mod-profile aside.canvas-slid::before { + opacity: 1; + } + body.mod-contact aside #profile-photo-wrapper, + body.mod-photos aside #profile-photo-wrapper, + body.mod-profile aside #profile-photo-wrapper { + top: 10px; + } + body.mod-contact .profile-header h3.p-name, + body.mod-photos .profile-header h3.p-name, + body.mod-profile .profile-header h3.p-name { + top: 155px; + } + body.mod-contact .profile-header .p-addr, + body.mod-photos .profile-header .p-addr, + body.mod-profile .profile-header .p-addr { + top: 205px; + width: 50%; + margin-left: -25%; } .coverphoto.canvas-sliding, - .coverphoto.canvas-slid, + .coverphoto.canvas-slid, .coverphoto { - top: 0px !important; - left: 0px; - right: 0px; - height: 500px; - } + top: 0px; + } } /* LOGIN AND INFO SCREENS */ body.mod-home { From a653256afff33d46abd4a0c776865ed60d676532 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Fri, 28 Feb 2025 01:23:41 +0000 Subject: [PATCH 116/268] New Mobile Profiles + other fixes --- bookface_light.css | 395 +++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 360 insertions(+), 35 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index 3432eee..2798a58 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,8 +1,8 @@ /* Name : Bookface Light - Version : 1.4 + Version : 1.5 Licence : AGPL - Created on : 12 Feb 2025 + Created on : 27 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -104,23 +104,48 @@ content: '\f0f3'; color: var(--link-color); } +ul.nav-tabs { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + padding-bottom: 20px; + border-color:rgba(0,0,0,.2); +} ul.tabs li { font-size: 15px !important; margin-left: 10px !important; } - ul.tabs li a { - margin-top: 8px; - color: var(--link-color); - } + ul.nav-tabs li a, + ul.tabs li a { + margin-top: 8px; + color: var(--link-color); + border: none; + } + ul.nav-tabs li:not(.active):hover, ul.tabs li:not(.active):hover { border-bottom-width: 0px !important; } + ul.nav-tabs li:not(.active):hover > 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); } + ul.nav-tabs li:not(.active) > a:hover, + ul.nav-tabs li:not(.active) > a:focus { + border: none; + } + ul.nav-tabs li.active { + border-bottom: 4px solid var(--link-color); + } + ul.nav-tabs > li.active > a, + ul.nav-tabs > li.active a:hover, + ul.nav-tabs > li.active a:focus { + border: none; + color: var(--link-color); + background-color: transparent; + } .dropdown-menu { padding-bottom: 15px !important; background-color: var(--nav-bg) !important; @@ -862,6 +887,8 @@ #profile-jot-wrapper .btn-sm, .wall-item-comment-wrapper .btn-sm { background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; color: var(--nav-icon-color); height: 45px; width: 45px; @@ -971,7 +998,7 @@ #upload-photo:focus { background-color: darkblue !important; } - .panel-body { + body.mod-settings .panel-body { background-color: var(--nav-bg); border-radius: 10px; border-top: none !important; @@ -1002,7 +1029,7 @@ 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); + text-shadow: 1px 1px 2px var(--background-color), -1px -1px 2px var(--background-color), 1px -1px 2px var(--background-color), -1px 1px 2px var(--background-color); } aside .vcard .p-addr { font-weight: 600; @@ -1726,28 +1753,126 @@ a.tag.label, 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; - } + /* Profile Aside Mobile */ + body.mod-contact #content, + body.mod-profile #content, + body.mod-photos #content { + margin-top: 350px; + } + /* only seen on your own Recent Photos page */ + body.mod-profile #sidebar-photos-albums::before { + content: '\f083'; + font-family: ForkAwesome; + font-size: 150px; + position: fixed; + top: 175px; + left: 0; + right: 0; + text-align: center; + color: var(--nav-icon-color); + opacity: .5; + z-index: -1; + transition-duration: .5s; + transition-property: left; + } + body.mod-profile aside.canvas-sliding #sidebar-photos-albums::before, + body.mod-profile aside.canvas-slid #sidebar-photos-albums::before { + left: 50%; + } + /* hide camera icon on other profile Recent Photos pages */ + body.mod-profile .vcard + #sidebar-photos-albums::before { + content: ''; + } + body.mod-contact aside, + body.mod-photos aside, + body.mod-profile aside { + margin-top: 0px !important; + left: -300px !important; + right: auto !important; + display: block !important; + padding-top: 120px; + transition-duration: .5s !important; + z-index: auto; + } + body.mod-contact aside.canvas-slid, + body.mod-photos aside.canvas-slid, + body.mod-profile aside.canvas-slid { + left: 0px !important; + right: auto !important; + z-index: 20; + } + body.mod-contact aside #profile-photo-wrapper, + body.mod-photos aside #profile-photo-wrapper, + body.mod-profile aside #profile-photo-wrapper { + position: fixed; + top: 150px; + left: 50%; + height: 150px; + width: 150px; + margin-left: -75px; + transition-timing-function: ease-in-out; + transition-duration: .3s; + transition-property: all; + } + body.mod-contact .profile-header h3.p-name, + body.mod-photos .profile-header h3.p-name, + body.mod-profile .profile-header h3.p-name { + position: fixed; + width: 100%; + top: 300px; + left: 50%; + margin-left: -50%; + transition-timing-function: ease-in-out; + transition-duration: .3s; + transition-property: all; + + } + body.mod-contact .profile-header .p-addr, + body.mod-photos .profile-header .p-addr, + body.mod-profile .profile-header .p-addr { + position: fixed; + width: 50%; + top: 400px; + left: 50%; + margin-left: -25%; + transition-timing-function: ease-in-out; + transition-duration: .3s; + transition-property: all; + } + /* bounce effect */ + body.mod-contact aside.canvas-sliding #profile-photo-wrapper, + body.mod-photos aside.canvas-sliding #profile-photo-wrapper, + body.mod-profile aside.canvas-sliding #profile-photo-wrapper { + margin-left: -150px; + } + body.mod-contact aside.canvas-sliding .profile-header h3.p-name, + body.mod-photos aside.canvas-sliding .profile-header h3.p-name, + body.mod-profile aside.canvas-sliding .profile-header h3.p-name { + margin-left: calc(-50% - 75px); + } + body.mod-contact aside.canvas-sliding .profile-header .p-addr, + body.mod-photos aside.canvas-sliding .profile-header .p-addr, + body.mod-profile aside.canvas-sliding .profile-header .p-addr { + margin-left: -300px; + } + /* centered in right-hand side */ + body.mod-contact aside.canvas-slid #profile-photo-wrapper, + body.mod-photos aside.canvas-slid #profile-photo-wrapper, + body.mod-profile aside.canvas-slid #profile-photo-wrapper { + margin-left: -225px; + } + body.mod-contact aside.canvas-slid .profile-header h3.p-name, + body.mod-photos aside.canvas-slid .profile-header h3.p-name, + body.mod-profile aside.canvas-slid .profile-header h3.p-name { + margin-left: calc(-50% - 150px); + } + body.mod-contact aside.canvas-slid .profile-header .p-addr, + body.mod-photos aside.canvas-slid .profile-header .p-addr, + body.mod-profile aside.canvas-slid .profile-header .p-addr { + margin-left: calc(-25% - 150px); + } + /* Cover Photo Mobile */ + .coverphoto.canvas-sliding, .coverphoto.canvas-slid{ left: 0px !important; right: 0px !important; @@ -1761,7 +1886,7 @@ a.tag.label, top: 500px; left: 0px; width: 100%; - height: 100%; + height: 500%; display: block; background-color: var(--background-color); } @@ -1996,18 +2121,28 @@ a.tag.label, #topbar-second ul.tabbar > li:first-of-type { max-width: 75%; overflow: hidden; + margin-right: 50px; } #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%; + height: 100%; } #topbar-second ul.tabbar li:first-of-type ul.tabs li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + /* prevent dropdown being pushed off toolbar */ + #topbar-second ul.tabbar > li:last-of-type { + margin-left: -50px; + border-bottom: 4px solid var(--link-color); + } + #topbar-second ul.tabbar > li:last-of-type li.dropdown { + margin-left: 0px !important; + } #dropdownMenuTools-xs { height: 60px; } @@ -2075,7 +2210,27 @@ a.tag.label, padding-top: 60px; padding-bottom: 60px; } - .coverphoto { + body.mod-profile #sidebar-photos-albums::before { + top: 125px; + } + body.mod-contact aside #profile-photo-wrapper, + body.mod-photos aside #profile-photo-wrapper, + body.mod-profile aside #profile-photo-wrapper { + top: 100px; + } + body.mod-contact .profile-header h3.p-name, + body.mod-photos .profile-header h3.p-name, + body.mod-profile .profile-header h3.p-name { + top: 255px; + } + body.mod-contact .profile-header .p-addr, + body.mod-photos .profile-header .p-addr, + body.mod-profile .profile-header .p-addr { + top: 345px; + } + .coverphoto, + .coverphoto.canvas-sliding, + .coverphoto.canvas-slid { top: 55px; } #message-new { @@ -2102,6 +2257,109 @@ a.tag.label, width: 25vw !important; } } +/* Frio Theme Cut-Off (double sidebar width) + ========================================= +*/ +@media screen and (max-width: 600px) and (orientation: portrait) { + body.mod-contact aside, + body.mod-photos aside, + body.mod-profile aside { + left: -100% !important; + right: 0% !important; + max-width: 100% !important; + width: 100% !important; + padding-top: 60px; + background-color: var(--background-color) !important; + } + /* only seen on your own Recent Photos page */ + body.mod-profile #sidebar-photos-albums::before { + transition-property: top; + } + body.mod-profile aside.canvas-sliding #sidebar-photos-albums::before, + body.mod-profile aside.canvas-slid #sidebar-photos-albums::before { + left: 0px; + top: 150%; + } + body.mod-contact aside.canvas-slid, + body.mod-photos aside.canvas-slid, + body.mod-profile aside.canvas-slid { + left: 0px !important; + } + body.mod-contact aside.canvas-slid::before, + body.mod-photos aside.canvas-slid::before, + body.mod-profile aside.canvas-slid::before { + opacity: 0; + } + body.mod-contact aside #profile-photo-wrapper, + body.mod-photos aside #profile-photo-wrapper, + body.mod-profile aside #profile-photo-wrapper { + top: 100px; + } + body.mod-contact .profile-header h3.p-name, + body.mod-photos .profile-header h3.p-name, + body.mod-profile .profile-header h3.p-name { + top: 255px; + } + body.mod-contact .profile-header .p-addr, + body.mod-photos .profile-header .p-addr, + body.mod-profile .profile-header .p-addr { + top: 345px; + width: 80%; + margin-left: -40%; + } + /* bounce effect */ + body.mod-contact aside.canvas-sliding #profile-photo-wrapper, + body.mod-photos aside.canvas-sliding #profile-photo-wrapper, + body.mod-profile aside.canvas-sliding #profile-photo-wrapper { + margin-left: -75px; + top: 150% !important; + } + body.mod-contact aside.canvas-sliding .profile-header h3.p-name, + body.mod-photos aside.canvas-sliding .profile-header h3.p-name, + body.mod-profile aside.canvas-sliding .profile-header h3.p-name { + margin-left: -50%; + top: 150% !important; + } + body.mod-contact aside.canvas-sliding .profile-header .p-addr, + body.mod-photos aside.canvas-sliding .profile-header .p-addr, + body.mod-profile aside.canvas-sliding .profile-header .p-addr { + margin-left: -25%; + top: 150% !important; + } + + body.mod-contact aside.canvas-slid #profile-photo-wrapper, + body.mod-photo aside.canvas-slid #profile-photo-wrapper, + body.mod-profile aside.canvas-slid #profile-photo-wrapper { + margin-left: -75px; + top: 150% !important; + } + body.mod-contact aside.canvas-slid .profile-header h3.p-name, + body.mod-photo aside.canvas-slid .profile-header h3.p-name, + body.mod-profile aside.canvas-slid .profile-header h3.p-name { + margin-left: -50%; + top: 150% !important; + } + body.mod-contact aside.canvas-slid .profile-header .p-addr, + body.mod-photo aside.canvas-slid .profile-header .p-addr, + body.mod-profile aside.canvas-slid .profile-header .p-addr { + margin-left: -25%; + top: 150% !important; + } + .coverphoto { + transition-duration: .5s; + transition-property: top; + } + body.mod-contact.aside-out .coverphoto, + body.mod-photo.aside-out .coverphoto, + body.mod-profile.aside-out .coverphoto, + body.mod-contact aside.canvas-slid .coverphoto, + body.mod-photo aside.canvas-slid .coverphoto, + body.mod-profile aside.canvas-slid .coverphoto { + top: 150% !important; + left: 0px; + right: 0px; + } +} /* Narrow Screen Phones in Portrait Orientation ============================================ */ @@ -2115,6 +2373,28 @@ a.tag.label, .wall-item-actions-row .button-browser-share::after { display: none !important; } + ul.nav-tabs { + display: block; + } + ul.nav-tabs li { + width: 98%; + text-align: center; + } + ul.nav-tabs li a { + border: 1px solid var(--link-color) !important; + border-radius: 8px !important; + } + ul.nav-tabs li:not(.active) a:hover, + ul.nav-tabs li:not(.active) a:focus { + background-color: rgba(0,0,0,.2); + } + ul.nav-tabs li.active { + border: none !important; + } + ul.nav-tabs li.active a { + background-color: var(--link-color) !important; + color: #fff !important; + } } /* Narrow Screen Phones in Landscape Orientation ============================================== @@ -2169,7 +2449,7 @@ a.tag.label, padding: 0 !important; } #topbar-first .nav > .account { - top: -5px; + top: 0px; right: 5px; } #main-menu img { @@ -2233,9 +2513,54 @@ a.tag.label, .offcanvas-right-overlay { top: 0px; } - .row:has(.coverphoto) #content { - margin-top: 200px; + /* Profile Pages */ + body.mod-contact #content, + body.mod-profile #content, + body.mod-photos #content { + margin-top: 200px !important; } + body.mod-profile #sidebar-photos-albums::before { + top: 25px; + } + body.mod-contact aside, + body.mod-photos aside, + body.mod-profile aside { + padding-top: 50px; + padding-bottom: 50px; + } + body.mod-contact aside.canvas-slid, + body.mod-photos aside.canvas-slid, + body.mod-profile aside.canvas-slid { + left: 0px !important; + right: auto !important; + max-width: 300px !important; + background-color: transparent !important; + z-index: 20; + } + body.mod-contact aside.canvas-slid::before, + body.mod-photos aside.canvas-slid::before, + body.mod-profile aside.canvas-slid::before { + opacity: 1; + } + body.mod-contact aside #profile-photo-wrapper, + body.mod-photos aside #profile-photo-wrapper, + body.mod-profile aside #profile-photo-wrapper { + top: 10px; + } + body.mod-contact .profile-header h3.p-name, + body.mod-photos .profile-header h3.p-name, + body.mod-profile .profile-header h3.p-name { + top: 155px; + } + body.mod-contact .profile-header .p-addr, + body.mod-photos .profile-header .p-addr, + body.mod-profile .profile-header .p-addr { + top: 205px; + width: 50%; + margin-left: -25%; + } + .coverphoto.canvas-sliding, + .coverphoto.canvas-slid, .coverphoto { top: 0px; } From 819eb83cfacdae23d6bdb60482f4dbf2cdb3e904 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Fri, 28 Feb 2025 01:30:57 +0000 Subject: [PATCH 117/268] Updated Changelog --- README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README.md b/README.md index c4b3eba..32f2664 100644 --- a/README.md +++ b/README.md @@ -260,6 +260,7 @@ And then use it in your stylesheet like so: I figured out how the "Frio" theme worked by looking at the code. I may not be 100% correct about it since I did not create the theme. If someone knows more and I'm wrong about any of this please correct this document at https://gitlab.com/randompenguin/bookface ## CHANGELOG: +1.5 (27 Feb 2025) * fixed browser "Share to.." button display and sizing [Issue #3] * fixed wrong sized menu items in action button drop-downs on mobile [related to Issue #3] * Styled content filter buttons coming from other platforms. @@ -277,6 +278,13 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Redesigned Calculator Add-On [Issue #8] * Fixed Compose text formatting rollover effect [Issue #9] * Fixed photo album thumbnail size on mobile [Issue #10] +* Fixed context of .panel-body, was only intended only for Settings page +* New Mobile Profiles [Issue #11] +* Added camera icon to user's Recent Photos because no profile photo is shown on it. +* Adjusted mobile drop-down button appearance and position +* Made ul.nav-tabs appearance consistent with secondary toolbar tabs +* Made ul.nav-tabs turn into buttons on narrow mobile screens +* Box shadow on Compose formatting buttons removed from dark version 1.4 (12 Feb 2025) * Limited textarea resize fix to settings pages From a166d15795b4dd64fc8e539027d2c16c4df9cea3 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Fri, 28 Feb 2025 02:02:29 +0000 Subject: [PATCH 118/268] Incremented version number --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 32f2664..368a67a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.4 +Version 1.5 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. From 02d6e85d568521527aa22767f7c0051c96638021 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 1 Mar 2025 21:50:24 +0000 Subject: [PATCH 119/268] Fixed HR rule [Issue #13] --- bookface_auto.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index bd339eb..636fda9 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -716,7 +716,7 @@ padding-left: 10px !important; padding-right: 10px !important; } - .media hr, aside hr, section hr { + .media hr:first-of-type, aside hr, section hr { border-color: var(--nav-bg); } /* keep mentions and tags from spilling out */ @@ -3337,7 +3337,7 @@ p.wall-item-announce, padding-left: 10px !important; padding-right: 10px !important; } - .media hr, aside hr, section hr { + .media hr:first-of-type, aside hr, section hr { border-color: var(--nav-bg); } /* keep mentions and tags from spilling out */ From 7d970ea16ed3f12b7b0d938651de1d301aa9865d Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 1 Mar 2025 21:51:22 +0000 Subject: [PATCH 120/268] Fixed HR rule [Issue #13] --- bookface_dark.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_dark.css b/bookface_dark.css index 9cfad02..3587447 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -715,7 +715,7 @@ aside .widget, padding-left: 10px !important; padding-right: 10px !important; } - .media hr, aside hr, section hr { + .media hr:first-of-type, aside hr, section hr { border-color: var(--nav-bg); } /* keep mentions and tags from spilling out */ From b7acd24c7d4a242359cbf073e1dd2d94a95fb3af Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 1 Mar 2025 21:52:05 +0000 Subject: [PATCH 121/268] Fixed HR rule [Issue #13] --- bookface_light.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index 2798a58..ec9803f 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -715,7 +715,7 @@ ul.nav-tabs { padding-left: 10px !important; padding-right: 10px !important; } - .media hr, aside hr, section hr { + .media hr:first-of-type, aside hr, section hr { border-color: var(--nav-bg); } /* keep mentions and tags from spilling out */ From dd2d5ddb71e74abb6d30bb30eaaf860e80e322ce Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 1 Mar 2025 21:55:20 +0000 Subject: [PATCH 122/268] Updated Changelog --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 368a67a..710ccc1 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5 +Version 1.5.1 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -260,6 +260,8 @@ And then use it in your stylesheet like so: I figured out how the "Frio" theme worked by looking at the code. I may not be 100% correct about it since I did not create the theme. If someone knows more and I'm wrong about any of this please correct this document at https://gitlab.com/randompenguin/bookface ## CHANGELOG: +* Fixed HR rule on posts [Issue #13] + 1.5 (27 Feb 2025) * fixed browser "Share to.." button display and sizing [Issue #3] * fixed wrong sized menu items in action button drop-downs on mobile [related to Issue #3] From 3a8d6f89efe4a713bebdd7144dd5982818ef9b9d Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 1 Mar 2025 22:15:16 +0000 Subject: [PATCH 123/268] Fixed Mention/Post-to-Group Button [Issue #16] --- bookface_auto.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 636fda9..fe49f30 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1750,8 +1750,11 @@ a.tag.label, content: ''; margin: 0; } + #mention-link { + padding: 0 8px !important; + } #mention-link span:last-of-type { - margin-right: 42px; + display: none; } .offcanvas-right-overlay, aside::before { @@ -2170,7 +2173,6 @@ a.tag.label, #mention-link span:first-of-type { float: none; position: relative; - left: -5px; top: 2px; } #search-save .fa-plus::after, @@ -4388,8 +4390,11 @@ a.tag.label, content: ''; margin: 0; } + #mention-link { + padding: 0 8px !important; + } #mention-link span:last-of-type { - margin-right: 42px; + display: none; } aside { background-color: var(--background-color); @@ -4811,7 +4816,6 @@ a.tag.label, #mention-link span:first-of-type { float: none; position: relative; - left: -5px; top: 2px; } #search-save .fa-plus::after, From 07d6022a429c6f5597ac8198d11d6117052b6c45 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 1 Mar 2025 22:16:39 +0000 Subject: [PATCH 124/268] Fixed Mention/Post-In-Group Button [Issue #16] --- bookface_dark.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 3587447..6589d72 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1746,8 +1746,11 @@ a.tag.label, content: ''; margin: 0; } + #mention-link { + padding: 0 8px !important; + } #mention-link span:last-of-type { - margin-right: 42px; + display: none; } .offcanvas-right-overlay, aside::before { @@ -2166,7 +2169,6 @@ a.tag.label, #mention-link span:first-of-type { float: none; position: relative; - left: -5px; top: 2px; } #search-save .fa-plus::after, From 5c7b0534e8d59027d904248438441e3b43d9515b Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 1 Mar 2025 22:17:31 +0000 Subject: [PATCH 125/268] Fixed Mention/Post-in-Group Button [Issue #16] --- bookface_light.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index ec9803f..ecae308 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1746,8 +1746,11 @@ a.tag.label, content: ''; margin: 0; } + #mention-link { + padding: 0 8px !important; + } #mention-link span:last-of-type { - margin-right: 42px; + display: none; } .offcanvas-right-overlay, aside::before { @@ -2166,7 +2169,6 @@ a.tag.label, #mention-link span:first-of-type { float: none; position: relative; - left: -5px; top: 2px; } #search-save .fa-plus::after, From 1a78703986af2a9c17cade0a8827be24017291af Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 1 Mar 2025 22:21:29 +0000 Subject: [PATCH 126/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 710ccc1..981f2e3 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.1 +Version 1.5.2 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -261,6 +261,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 ## CHANGELOG: * Fixed HR rule on posts [Issue #13] +* Fixed Post-in-Groups/Mention button alignment [Issue #16] 1.5 (27 Feb 2025) * fixed browser "Share to.." button display and sizing [Issue #3] From e966febbbaa23c07d3ea6d9ecd5775268bf1db73 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 1 Mar 2025 22:26:21 +0000 Subject: [PATCH 127/268] Fixed notification profile pics [Issue #14] --- bookface_auto.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/bookface_auto.css b/bookface_auto.css index fe49f30..2084812 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -104,6 +104,10 @@ content: '\f0f3'; color: var(--link-color); } + .notif-item img.notif-image, + .intro-photo-wrapper img.intro-photo { + border-radius: 100%; + } ul.nav-tabs { display: flex; flex-wrap: wrap; @@ -2681,6 +2685,10 @@ nav.navbar .nav > li > button:focus { content: '\f0f3'; color: var(--link-color); } + .notif-item img.notif-image, + .intro-photo-wrapper img.intro-photo { + border-radius: 100%; + } ul.nav-tabs { display: flex; flex-wrap: wrap; From 4215ebd43ff87d18f7e9d818b2b42d7b527aa013 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 1 Mar 2025 22:26:56 +0000 Subject: [PATCH 128/268] Fixed notification profile pics [Issue #14] --- bookface_dark.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/bookface_dark.css b/bookface_dark.css index 6589d72..056dd60 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -104,6 +104,10 @@ nav.navbar .nav > li > button:focus { content: '\f0f3'; color: var(--link-color); } + .notif-item img.notif-image, + .intro-photo-wrapper img.intro-photo { + border-radius: 100%; + } ul.nav-tabs { display: flex; flex-wrap: wrap; From 1a6e06c50cda7f61f1bc796bd88723e82885d326 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 1 Mar 2025 22:27:29 +0000 Subject: [PATCH 129/268] Fixed notification profile pics [Issue #14] --- bookface_light.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/bookface_light.css b/bookface_light.css index ecae308..ba946a5 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -104,6 +104,10 @@ content: '\f0f3'; color: var(--link-color); } + .notif-item img.notif-image, + .intro-photo-wrapper img.intro-photo { + border-radius: 100%; + } ul.nav-tabs { display: flex; flex-wrap: wrap; From 389a6ca7b6bd18e2ac0965ea972e0d2014831941 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 1 Mar 2025 22:30:03 +0000 Subject: [PATCH 130/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 981f2e3..8f18447 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.2 +Version 1.5.3 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -261,6 +261,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 ## CHANGELOG: * Fixed HR rule on posts [Issue #13] +* Fixed notifcation profile pics so they are round [Issue #14] * Fixed Post-in-Groups/Mention button alignment [Issue #16] 1.5 (27 Feb 2025) From 13ec0a4a5775be3ab3c03e7a06fc69e0d08d5a7f Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 1 Mar 2025 23:22:31 +0000 Subject: [PATCH 131/268] Fixed post and comment bg colors [Issue #15] --- bookface_light.css | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index ba946a5..f8ac813 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,6 +1,6 @@ /* Name : Bookface Light - Version : 1.5 + Version : 1.5.4 Licence : AGPL Created on : 27 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -12,6 +12,8 @@ --link-color: $link_color; --nav-icon-color: $nav_icon_color; --background-color: $background_color; + --content-bg: var(--nav-bg); + --comment-bg: var(--background-color); --font-color: $font_color; --font-color-darker: $font_color_darker; --menu-background-hover-color: $menu_background_hover_color; @@ -447,7 +449,7 @@ ul.nav-tabs { .tos-content-wrapper, .fsuggest-content-wrapper, .shared-wrapper { - background-color: var(--nav-bg) !important; + background-color: var(--content-bg) !important; background-image: none; /* frio light border-color */ } @@ -658,7 +660,7 @@ ul.nav-tabs { } /* POSTS */ .tread-wrapper { - /* frio background-color */ + background-color: var(--content-bg); box-shadow: 0 0px 1px rgba(0,0,0,.5) !important; border-radius: 10px !important; } @@ -666,7 +668,7 @@ ul.nav-tabs { border-top: none; } .wall-item-container .media { - background-color: #ffffff !important; + background-color: var(--content-bg) !important; border-radius: 10px !important; } .wall-item-container iframe { @@ -879,7 +881,7 @@ ul.nav-tabs { .modal-content, #jot-modal-content, .wall-item-comment-wrapper { - background-color: #fff !important; + background-color: var(--content-bg) !important; border-radius: 15px !important; background-image: none; } @@ -1087,7 +1089,7 @@ ul.nav-tabs { } .comment-fake-form textarea { border-radius: 50px !important; - /* frio background-color */ + background-color: var(--comment-bg) !important; /* frio -webkit-box-shadow */ /* frio box-shadow */ } @@ -1103,7 +1105,7 @@ ul.nav-tabs { } .comment .media-body { padding: 10px; - background-color: var(--background-color); + background-color: var(--comment-bg); border-radius: 20px; } .wall-item-actions-row .wall-item-emoji { From 31b018a3b255740e48e04f3169133cd43d4c318d Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 1 Mar 2025 23:26:18 +0000 Subject: [PATCH 132/268] fix for post and comment bg color [Issue #15] --- bookface_dark.css | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 056dd60..c4c2c0b 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,6 +1,6 @@ /* Name : Bookface Dark - Version : 1.5 + Version : 1.5.4 Licence : AGPL Created on : 27 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -12,6 +12,8 @@ --link-color: $link_color; --nav-icon-color: $nav_icon_color; --background-color: $background_color; + --content-bg: var(--nav-bg); + --comment-bg: var(--background-color); --font-color: $font_color; --font-color-darker: $font_color_darker; --menu-background-hover-color: $menu_background_hover_color; @@ -447,7 +449,7 @@ header #banner { .tos-content-wrapper, .fsuggest-content-wrapper, .shared-wrapper { - background-color: var(--nav-bg) !important; + background-color: var(--content-bg) !important; background-image: none; border-color: #333; } @@ -658,7 +660,7 @@ aside .widget, } /* POSTS */ .tread-wrapper { - background-color: rgb(37, 39, 40) !important; + background-color: var(--content-bg) !important; box-shadow: 0 0px 1px rgba(0,0,0,.5) !important; border-radius: 10px !important; } @@ -666,7 +668,7 @@ aside .widget, border-top: none; } .wall-item-container .media { - background-color: rgb(37, 39, 40) !important; + background-color: var(--content-bg) !important; border-radius: 10px !important; } .wall-item-container iframe { @@ -1087,7 +1089,7 @@ aside .widget li:hover { } .comment-fake-form textarea { border-radius: 50px !important; - background-color: rgb(51, 51, 52) !important; + background-color: var(--comment-bg) !important; -webkit-box-shadow: none !important; box-shadow: none !important; } @@ -1103,7 +1105,7 @@ aside .widget li:hover { } .comment .media-body { padding: 10px; - background-color: var(--background-color); + background-color: var(--comment-bg); border-radius: 20px; } .wall-item-actions-row .wall-item-emoji { From b022445376414a491182120c7315d4e5f3c03d4c Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 1 Mar 2025 23:31:00 +0000 Subject: [PATCH 133/268] Fix for post and comment bg color [Issue #15] --- bookface_auto.css | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 2084812..0d76355 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,6 +1,6 @@ /* Name : Bookface Auto Color Mode - Version : 1.5 + Version : 1.5.4 Licence : AGPL Created on : 27 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -12,6 +12,8 @@ --link-color: $link_color; --nav-icon-color: $nav_icon_color; --background-color: $background_color; + --content-bg: var(--nav-bg); + --comment-bg: var(--background-color); --font-color: $font_color; --font-color-darker: $font_color_darker; --menu-background-hover-color: color-mix(in oklab, var(--link-color) 15%, white); @@ -448,7 +450,7 @@ .tos-content-wrapper, .fsuggest-content-wrapper, .shared-wrapper { - background-color: var(--nav-bg) !important; + background-color: var(--content-bg) !important; background-image: none; /* frio light border-color */ } @@ -659,7 +661,7 @@ } /* POSTS */ .tread-wrapper { - /* frio background-color */ + background-color: var(--content-bg) !important; box-shadow: 0 0px 1px rgba(0,0,0,.5) !important; border-radius: 10px !important; } @@ -667,7 +669,7 @@ border-top: none; } .wall-item-container .media { - background-color: #ffffff !important; + background-color: var(--content-bg) !important; border-radius: 10px !important; } .wall-item-container iframe { @@ -1091,7 +1093,7 @@ } .comment-fake-form textarea { border-radius: 50px !important; - /* frio background-color */ + background-color: var(--comment-bg) !important; /* frio -webkit-box-shadow */ /* frio box-shadow */ } @@ -1107,7 +1109,7 @@ } .comment .media-body { padding: 10px; - background-color: var(--background-color); + background-color: var(--comment-bg); border-radius: 20px; } .wall-item-actions-row .wall-item-emoji { @@ -3039,7 +3041,7 @@ header #banner { .tos-content-wrapper, .fsuggest-content-wrapper, .shared-wrapper { - background-color: var(--nav-bg) !important; + background-color: var(--content-bg) !important; background-image: none; border-color: #333; } @@ -3250,7 +3252,7 @@ aside .widget, } /* POSTS */ .tread-wrapper { - background-color: rgb(37, 39, 40) !important; + background-color: var(--content-bg) !important; box-shadow: 0 0px 1px rgba(0,0,0,.5) !important; border-radius: 10px !important; } @@ -3258,7 +3260,7 @@ aside .widget, border-top: none; } .wall-item-container .media { - background-color: rgb(37, 39, 40) !important; + background-color: var(--content-bg) !important; border-radius: 10px !important; } .wall-item-container iframe { @@ -3741,7 +3743,7 @@ aside .widget li:hover { } .comment-fake-form textarea { border-radius: 50px !important; - background-color: rgb(51, 51, 52) !important; + background-color: var(--comment-bg) !important; -webkit-box-shadow: none !important; box-shadow: none !important; } @@ -3757,7 +3759,7 @@ aside .widget li:hover { } .comment .media-body { padding: 10px; - background-color: var(--background-color); + background-color: var(--comment-bg); border-radius: 20px; } .wall-item-actions-row .wall-item-emoji { From 546088c463b47daa1b5a8e6eef6e52dcd2063dbe Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 1 Mar 2025 23:40:09 +0000 Subject: [PATCH 134/268] Updated Changelog --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8f18447..e2c3a34 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.3 +Version 1.5.4 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -262,6 +262,8 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 ## CHANGELOG: * Fixed HR rule on posts [Issue #13] * Fixed notifcation profile pics so they are round [Issue #14] +* Fixed Post and Comment background colors [Issue #15] +* Made Post and Comment background colors configurable with CSS variables. * Fixed Post-in-Groups/Mention button alignment [Issue #16] 1.5 (27 Feb 2025) From c35be464453580086a070b306e493851dbd192f8 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 1 Mar 2025 23:55:59 +0000 Subject: [PATCH 135/268] Fixed double underline on active tab [Issue #17] --- bookface_auto.css | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 0d76355..316973a 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,6 +1,6 @@ /* Name : Bookface Auto Color Mode - Version : 1.5.4 + Version : 1.5.5 Licence : AGPL Created on : 27 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -972,7 +972,6 @@ .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; @@ -3605,7 +3604,6 @@ p.wall-item-announce, .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; From ae51fdc341c3ecda2e53d640403e9383663f9c2b Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 1 Mar 2025 23:56:40 +0000 Subject: [PATCH 136/268] Fixed double underline on active tab [Issue #17] --- bookface_dark.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index c4c2c0b..5ce21b7 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,6 +1,6 @@ /* Name : Bookface Dark - Version : 1.5.4 + Version : 1.5.5 Licence : AGPL Created on : 27 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -971,7 +971,6 @@ aside .widget, .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; From 519500c760b100fd2c6780a2cae4bbe8fa4e96df Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 1 Mar 2025 23:57:31 +0000 Subject: [PATCH 137/268] Fixed double underline on active tab [Issue #17] --- bookface_light.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index f8ac813..8bd4007 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,6 +1,6 @@ /* Name : Bookface Light - Version : 1.5.4 + Version : 1.5.5 Licence : AGPL Created on : 27 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -971,7 +971,6 @@ ul.nav-tabs { .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; From 330bec368b4453b306fb8078b2765512747d7916 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 2 Mar 2025 00:01:29 +0000 Subject: [PATCH 138/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e2c3a34..5f0a082 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.4 +Version 1.5.5 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -265,6 +265,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Fixed Post and Comment background colors [Issue #15] * Made Post and Comment background colors configurable with CSS variables. * Fixed Post-in-Groups/Mention button alignment [Issue #16] +* Fixed double underline on Compose active tab [Issue #17] 1.5 (27 Feb 2025) * fixed browser "Share to.." button display and sizing [Issue #3] From 04c61cc92be284faf2fb2d862bd9bc24f9081f46 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 5 Mar 2025 14:33:50 -0600 Subject: [PATCH 139/268] Fixed Issue #19 --- bookface_light.css | 46 ++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 40 insertions(+), 6 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index 8bd4007..5062b81 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,6 +1,6 @@ /* Name : Bookface Light - Version : 1.5.5 + Version : 1.5.6 Licence : AGPL Created on : 27 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -1663,6 +1663,30 @@ a.tag.label, position: relative; top: 5px; } + /* Contact Notification Action Buttons */ + .intro-wrapper button.intro-action-link { + height: 50px; + width: 50px; + color: limegreen; + border: 2px solid limegreen; + border-radius: 100% !important; + } + .intro-wrapper button.intro-action-link:hover { + background-color: limegreen; + color: white; + } + .intro-form { + margin-left: 8px; + } + .intro-form button.intro-submit-ignore, + .intro-form button.intro-submit-ignore:hover, + .intro-form button.intgro-submi-ignore:focus, + .intro-form button.intro-submit-discard, + .intro-form button.intro-submit-discard:hover, + .intro-form button.intro-submit-discard:focus { + color: white; + border: none; + } /* Greater than Full-HD Width =========================== */ @@ -1688,12 +1712,17 @@ a.tag.label, } } /* Frio breakpoints for smaller profile pic */ - @media screen and (min-width:991px) and (max-width:1199px){ - .contact-block-img { - height: 75px !important; - width: 75px !important; - } +@media screen and (min-width:991px) and (max-width:1199px){ + .contact-block-img { + height: 75px !important; + width: 75px !important; } + /* Contact Notification Action Buttons */ + .intro-actions { + position: relative; + float: none !important; + } +} /* Large Tablets in Portrait Orientation ===================================== */ @@ -2263,6 +2292,11 @@ a.tag.label, height: 25vw !important; width: 25vw !important; } + /* Contact Notification Action Buttons */ + .intro-actions { + position: relative; + float: none !important; + } } /* Frio Theme Cut-Off (double sidebar width) ========================================= From d5f20f7e9f295c13b8cebf38397c91ec57dc720c Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 5 Mar 2025 14:35:29 -0600 Subject: [PATCH 140/268] Fixed Issue #19 --- bookface_dark.css | 48 ++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 41 insertions(+), 7 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 5ce21b7..9be099b 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,6 +1,6 @@ /* Name : Bookface Dark - Version : 1.5.5 + Version : 1.5.6 Licence : AGPL Created on : 27 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -1663,6 +1663,30 @@ a.tag.label, position: relative; top: 5px; } + /* Contact Notification Action Buttons */ + .intro-wrapper button.intro-action-link { + height: 50px; + width: 50px; + color: limegreen; + border: 2px solid limegreen; + border-radius: 100% !important; + } + .intro-wrapper button.intro-action-link:hover { + background-color: limegreen; + color: white; + } + .intro-form { + margin-left: 8px; + } + .intro-form button.intro-submit-ignore, + .intro-form button.intro-submit-ignore:hover, + .intro-form button.intgro-submi-ignore:focus, + .intro-form button.intro-submit-discard, + .intro-form button.intro-submit-discard:hover, + .intro-form button.intro-submit-discard:focus { + color: white; + border: none; + } /* Greater than Full-HD Width =========================== */ @@ -1688,12 +1712,17 @@ a.tag.label, } } /* Frio breakpoints for smaller profile pic */ - @media screen and (min-width:991px) and (max-width:1199px){ - .contact-block-img { - height: 75px !important; - width: 75px !important; - } +@media screen and (min-width:991px) and (max-width:1199px){ + .contact-block-img { + height: 75px !important; + width: 75px !important; } + /* Contact Notification Action Buttons */ + .intro-actions { + position: relative; + float: none !important; + } +} /* Large Tablets in Portrait Orientation ===================================== */ @@ -2262,7 +2291,12 @@ a.tag.label, .justified-gallery > figure{ height: 25vw !important; width: 25vw !important; - } + } + /* Contact Notification Action Buttons */ + .intro-actions { + position: relative; + float: none !important; + } } /* Frio Theme Cut-Off (double sidebar width) ========================================= From 5bf5ce3548ac6562493702aa2f7224c54016f412 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 5 Mar 2025 14:38:52 -0600 Subject: [PATCH 141/268] Fixed Issue #19 --- bookface_auto.css | 90 +++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 79 insertions(+), 11 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 316973a..fd4eb88 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,6 +1,6 @@ /* Name : Bookface Auto Color Mode - Version : 1.5.5 + Version : 1.5.6 Licence : AGPL Created on : 27 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -1667,6 +1667,30 @@ a.tag.label, position: relative; top: 5px; } + /* Contact Notification Action Buttons */ + .intro-wrapper button.intro-action-link { + height: 50px; + width: 50px; + color: limegreen; + border: 2px solid limegreen; + border-radius: 100% !important; + } + .intro-wrapper button.intro-action-link:hover { + background-color: limegreen; + color: white; + } + .intro-form { + margin-left: 8px; + } + .intro-form button.intro-submit-ignore, + .intro-form button.intro-submit-ignore:hover, + .intro-form button.intgro-submi-ignore:focus, + .intro-form button.intro-submit-discard, + .intro-form button.intro-submit-discard:hover, + .intro-form button.intro-submit-discard:focus { + color: white; + border: none; + } /* Greater than Full-HD Width =========================== */ @@ -1692,12 +1716,17 @@ a.tag.label, } } /* Frio breakpoints for smaller profile pic */ - @media screen and (min-width:991px) and (max-width:1199px){ - .contact-block-img { - height: 75px !important; - width: 75px !important; - } +@media screen and (min-width:991px) and (max-width:1199px){ + .contact-block-img { + height: 75px !important; + width: 75px !important; } + /* Contact Notification Action Buttons */ + .intro-actions { + position: relative; + float: none !important; + } +} /* Large Tablets in Portrait Orientation ===================================== */ @@ -2266,6 +2295,11 @@ a.tag.label, .justified-gallery > figure{ height: 25vw !important; width: 25vw !important; + } + /* Contact Notification Action Buttons */ + .intro-actions { + position: relative; + float: none !important; } } /* Frio Theme Cut-Off (double sidebar width) @@ -4310,6 +4344,30 @@ a.tag.label, position: relative; top: 5px; } + /* Contact Notification Action Buttons */ + .intro-wrapper button.intro-action-link { + height: 50px; + width: 50px; + color: limegreen; + border: 2px solid limegreen; + border-radius: 100% !important; + } + .intro-wrapper button.intro-action-link:hover { + background-color: limegreen; + color: white; + } + .intro-form { + margin-left: 8px; + } + .intro-form button.intro-submit-ignore, + .intro-form button.intro-submit-ignore:hover, + .intro-form button.intgro-submi-ignore:focus, + .intro-form button.intro-submit-discard, + .intro-form button.intro-submit-discard:hover, + .intro-form button.intro-submit-discard:focus { + color: white; + border: none; + } /* Greater than Full-HD Width =========================== */ @@ -4335,12 +4393,17 @@ a.tag.label, } } /* Frio breakpoints for smaller profile pic */ - @media screen and (min-width:991px) and (max-width:1199px){ - .contact-block-img { - height: 75px !important; - width: 75px !important; - } +@media screen and (min-width:991px) and (max-width:1199px){ + .contact-block-img { + height: 75px !important; + width: 75px !important; } + /* Contact Notification Action Buttons */ + .intro-actions { + position: relative; + float: none !important; + } +} /* Large Tablets in Portrait Orientation ===================================== */ @@ -4912,6 +4975,11 @@ a.tag.label, .justified-gallery > figure{ height: 25vw !important; width: 25vw !important; + } + /* Contact Notification Action Buttons */ + .intro-actions { + position: relative; + float: none !important; } } /* Frio Theme Cut-Off (double sidebar width) From ec7b92437b80415e79e8652b0e76c9abcb91ec17 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 5 Mar 2025 14:44:43 -0600 Subject: [PATCH 142/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5f0a082..1e019dd 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.5 +Version 1.5.6 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -266,6 +266,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Made Post and Comment background colors configurable with CSS variables. * Fixed Post-in-Groups/Mention button alignment [Issue #16] * Fixed double underline on Compose active tab [Issue #17] +* Fixed Accept Contact button [Issue #19] 1.5 (27 Feb 2025) * fixed browser "Share to.." button display and sizing [Issue #3] From 4b36e2cdf1a582329aead10fcee8db1ca38b1680 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 5 Mar 2025 14:52:12 -0600 Subject: [PATCH 143/268] Fixed Issue #20 --- bookface_light.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index 5062b81..c7a9ca2 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,6 +1,6 @@ /* Name : Bookface Light - Version : 1.5.6 + Version : 1.5.7 Licence : AGPL Created on : 27 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -878,6 +878,10 @@ ul.nav-tabs { .close:focus { box-shadow: inset rgba(0,0,0,.2) !important; } + #profile-photo-upload-close { + text-align: center; + padding-top: 10px; + } .modal-content, #jot-modal-content, .wall-item-comment-wrapper { From 737acf3949f4ec0990a15fbc4c8cf37c25f77268 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 5 Mar 2025 14:53:13 -0600 Subject: [PATCH 144/268] Fixed Issue #20 --- bookface_dark.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/bookface_dark.css b/bookface_dark.css index 9be099b..9ae6bee 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,6 +1,6 @@ /* Name : Bookface Dark - Version : 1.5.6 + Version : 1.5.7 Licence : AGPL Created on : 27 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -878,6 +878,10 @@ aside .widget, .close:focus { box-shadow: inset rgba(255,255,255,.2) !important; } + #profile-photo-upload-close { + text-align: center; + padding-top: 10px; + } .modal-content, #jot-modal-content, .wall-item-comment-wrapper { From 4196d06b15f7807525acfce13c3a0fbbd3a00765 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 5 Mar 2025 14:54:05 -0600 Subject: [PATCH 145/268] Fixed Issue #20 --- bookface_auto.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/bookface_auto.css b/bookface_auto.css index fd4eb88..7fa076b 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,6 +1,6 @@ /* Name : Bookface Auto Color Mode - Version : 1.5.6 + Version : 1.5.7 Licence : AGPL Created on : 27 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -879,6 +879,10 @@ .close:focus { box-shadow: inset rgba(0,0,0,.2) !important; } + #profile-photo-upload-close { + text-align: center; + padding-top: 10px; + } .modal-content, #jot-modal-content, .wall-item-comment-wrapper { @@ -3539,6 +3543,10 @@ p.wall-item-announce, .close:focus { box-shadow: inset rgba(255,255,255,.2) !important; } + #profile-photo-upload-close { + text-align: center; + padding-top: 10px; + } .modal-content, #jot-modal-content, .wall-item-comment-wrapper { From 56cfada385937118a8ec4e552881d3adf28f3012 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 5 Mar 2025 14:56:57 -0600 Subject: [PATCH 146/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 1e019dd..e218b84 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.6 +Version 1.5.7 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -267,6 +267,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Fixed Post-in-Groups/Mention button alignment [Issue #16] * Fixed double underline on Compose active tab [Issue #17] * Fixed Accept Contact button [Issue #19] +* Fixed misaligned close button [Issue #20] 1.5 (27 Feb 2025) * fixed browser "Share to.." button display and sizing [Issue #3] From 84762a6d604064b7e76badecae05059635eee9b0 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 5 Mar 2025 15:42:16 -0600 Subject: [PATCH 147/268] Compose mobile drop-down tab menu cleanup --- bookface_auto.css | 42 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/bookface_auto.css b/bookface_auto.css index 7fa076b..8ef0963 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,6 +1,6 @@ /* Name : Bookface Auto Color Mode - Version : 1.5.7 + Version : 1.5.8 Licence : AGPL Created on : 27 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -2225,6 +2225,26 @@ a.tag.label, .fa-pencil-square-o::before { content: "\f040"; } + .dropdown-mobile-jot > .dropdown-toggle.btn-primary { + background-color: transparent; + color: var(--link-color); + border-radius: 8px; + } + .dropdown-mobile-jot > .dropdown-toggle.btn-primary:hover, + .dropdown-mobile-jot > .dropdown-toggle.btn-primary:focus { + background-color: rgba(0,0,0,.1); + } + .dropdown-mobile-jot.open > .dropdown-toggle.btn-primary { + background-color: var(--link-color); + color: white; + border-radius: 8px; + } + .dropdown-mobile-jot .dropdown-menu li { + margin: 3px auto; + } + .dropdown-mobile-jot .dropdown-menu .btn-link { + min-width: 90%; + } /* drop-down mobile style*/ #topbar-second .dropdown-menu { position: fixed; @@ -4909,6 +4929,26 @@ a.tag.label, .fa-pencil-square-o::before { content: "\f040"; } + .dropdown-mobile-jot > .dropdown-toggle.btn-primary { + background-color: transparent; + color: var(--link-color); + border-radius: 8px; + } + .dropdown-mobile-jot > .dropdown-toggle.btn-primary:hover, + .dropdown-mobile-jot > .dropdown-toggle.btn-primary:focus { + background-color: rgba(255,255,255,.1); + } + .dropdown-mobile-jot.open > .dropdown-toggle.btn-primary { + background-color: var(--link-color); + color: white; + border-radius: 8px; + } + .dropdown-mobile-jot .dropdown-menu li { + margin: 3px auto; + } + .dropdown-mobile-jot .dropdown-menu .btn-link { + min-width: 90%; + } /* drop-down mobile style*/ #topbar-second .dropdown-menu { position: fixed; From ddf3161b59c30fcdbcac163e2fde180fbc4f2d64 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 5 Mar 2025 15:43:35 -0600 Subject: [PATCH 148/268] Compose mobile drop-down menu cleanup --- bookface_dark.css | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/bookface_dark.css b/bookface_dark.css index 9ae6bee..7ff675b 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,6 +1,6 @@ /* Name : Bookface Dark - Version : 1.5.7 + Version : 1.5.8 Licence : AGPL Created on : 27 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -2221,6 +2221,26 @@ a.tag.label, .fa-pencil-square-o::before { content: "\f040"; } + .dropdown-mobile-jot > .dropdown-toggle.btn-primary { + background-color: transparent; + color: var(--link-color); + border-radius: 8px; + } + .dropdown-mobile-jot > .dropdown-toggle.btn-primary:hover, + .dropdown-mobile-jot > .dropdown-toggle.btn-primary:focus { + background-color: rgba(255,255,255,.1); + } + .dropdown-mobile-jot.open > .dropdown-toggle.btn-primary { + background-color: var(--link-color); + color: white; + border-radius: 8px; + } + .dropdown-mobile-jot .dropdown-menu li { + margin: 3px auto; + } + .dropdown-mobile-jot .dropdown-menu .btn-link { + min-width: 90%; + } /* drop-down mobile style*/ #topbar-second .dropdown-menu { position: fixed; From 034e10c21cec09193a421864775813961edb857a Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 5 Mar 2025 15:44:27 -0600 Subject: [PATCH 149/268] Compose mobile drop-down menu cleanup --- bookface_light.css | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index c7a9ca2..5e0d34f 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,6 +1,6 @@ /* Name : Bookface Light - Version : 1.5.7 + Version : 1.5.8 Licence : AGPL Created on : 27 Feb 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -2221,6 +2221,26 @@ a.tag.label, .fa-pencil-square-o::before { content: "\f040"; } + .dropdown-mobile-jot > .dropdown-toggle.btn-primary { + background-color: transparent; + color: var(--link-color); + border-radius: 8px; + } + .dropdown-mobile-jot > .dropdown-toggle.btn-primary:hover, + .dropdown-mobile-jot > .dropdown-toggle.btn-primary:focus { + background-color: rgba(0,0,0,.1); + } + .dropdown-mobile-jot.open > .dropdown-toggle.btn-primary { + background-color: var(--link-color); + color: white; + border-radius: 8px; + } + .dropdown-mobile-jot .dropdown-menu li { + margin: 3px auto; + } + .dropdown-mobile-jot .dropdown-menu .btn-link { + min-width: 90%; + } /* drop-down mobile style*/ #topbar-second .dropdown-menu { position: fixed; From fd9738dbaa5a15ed085a50ce188f2a157857f4f8 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 5 Mar 2025 15:45:06 -0600 Subject: [PATCH 150/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e218b84..fc8c71b 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.7 +Version 1.5.8 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -268,6 +268,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Fixed double underline on Compose active tab [Issue #17] * Fixed Accept Contact button [Issue #19] * Fixed misaligned close button [Issue #20] +* Cleanup of Compose mobile drop-down menu and button. 1.5 (27 Feb 2025) * fixed browser "Share to.." button display and sizing [Issue #3] From 18a97400c218ccf26c0a1c5df7ba8256c4043cc4 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 9 Mar 2025 15:09:46 -0500 Subject: [PATCH 151/268] Fix for Issue #22 --- bookface_auto.css | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 8ef0963..96b3487 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,8 +1,8 @@ /* Name : Bookface Auto Color Mode - Version : 1.5.8 + Version : 1.5.9 Licence : AGPL - Created on : 27 Feb 2025 + Created on : 09 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -539,6 +539,15 @@ #photo-edit-end { clear: both; } + /* Group Request Cancel/Confirm */ + #dfrn-request-submit-wrapper input { + margin: 5px; + } + #dfrn-request-submit-wrapper::after { + content: ''; + display: block; + clear: both; + } /* make textareas resize in the correct direction */ body.mod-settings textarea { resize: vertical !important; @@ -3187,6 +3196,15 @@ header #banner { #photo-edit-end { clear: both; } + /* Group Request Cancel/Confirm */ + #dfrn-request-submit-wrapper input { + margin: 5px; + } + #dfrn-request-submit-wrapper::after { + content: ''; + display: block; + clear: both; + } /* make textareas resize in the correct direction */ body.mod-settings textarea { resize: vertical !important; From b7245b2f28dc8f717c0b21e4e2a6336b9a502955 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 9 Mar 2025 15:10:29 -0500 Subject: [PATCH 152/268] Fixed Issue #22 --- bookface_dark.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 7ff675b..d7e5231 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,8 +1,8 @@ /* Name : Bookface Dark - Version : 1.5.8 + Version : 1.5.9 Licence : AGPL - Created on : 27 Feb 2025 + Created on : 09 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -538,6 +538,15 @@ header #banner { #photo-edit-end { clear: both; } + /* Group Request Cancel/Confirm */ + #dfrn-request-submit-wrapper input { + margin: 5px; + } + #dfrn-request-submit-wrapper::after { + content: ''; + display: block; + clear: both; + } /* make textareas resize in the correct direction */ body.mod-settings textarea { resize: vertical !important; From 53a54258a4e39e4fabe80791839dc01088a15eee Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 9 Mar 2025 15:12:09 -0500 Subject: [PATCH 153/268] Fixed Issue #22 --- bookface_light.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index 5e0d34f..09a732f 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,8 +1,8 @@ /* Name : Bookface Light - Version : 1.5.8 + Version : 1.5.9 Licence : AGPL - Created on : 27 Feb 2025 + Created on : 09 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -538,6 +538,15 @@ ul.nav-tabs { #photo-edit-end { clear: both; } + /* Group Request Cancel/Confirm */ + #dfrn-request-submit-wrapper input { + margin: 5px; + } + #dfrn-request-submit-wrapper::after { + content: ''; + display: block; + clear: both; + } /* make textareas resize in the correct direction */ body.mod-settings textarea { resize: vertical !important; From ece45d8b9f1ae7a3d153576ca3569c859507f34a Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 9 Mar 2025 15:15:29 -0500 Subject: [PATCH 154/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index fc8c71b..28d00f1 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.8 +Version 1.5.9 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -269,6 +269,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Fixed Accept Contact button [Issue #19] * Fixed misaligned close button [Issue #20] * Cleanup of Compose mobile drop-down menu and button. +* Fixed misalignment of Cancel/Submit buttons on contact request [Issue #22] 1.5 (27 Feb 2025) * fixed browser "Share to.." button display and sizing [Issue #3] From c82c80e8d6933562e4e6d6632dd791d5a3adc4de Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 9 Mar 2025 15:40:35 -0500 Subject: [PATCH 155/268] Fixed spacing of "Post to Group" label [Issue #16] --- bookface_auto.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/bookface_auto.css b/bookface_auto.css index 96b3487..def71b9 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,6 +1,6 @@ /* Name : Bookface Auto Color Mode - Version : 1.5.9 + Version : 1.5.10 Licence : AGPL Created on : 09 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -580,6 +580,8 @@ line-height: 32px; top: 6px; position:relative; + display: block; + padding-right: 30px; } #contact-edit-status-wrapper { margin: 15px 0px !important; @@ -3237,6 +3239,8 @@ header #banner { line-height: 32px; top: 6px; position:relative; + display: block; + padding-right: 30px; } #contact-edit-status-wrapper { margin: 15px 0px !important; From 2cb56a6ab495fdfb7acf7468421b853361721998 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 9 Mar 2025 15:41:30 -0500 Subject: [PATCH 156/268] Fixed "Post to Group" label spacing [Issue #16] --- bookface_dark.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/bookface_dark.css b/bookface_dark.css index d7e5231..007be9d 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,6 +1,6 @@ /* Name : Bookface Dark - Version : 1.5.9 + Version : 1.5.10 Licence : AGPL Created on : 09 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -579,6 +579,8 @@ header #banner { line-height: 32px; top: 6px; position:relative; + display: block; + padding-right: 30px; } #contact-edit-status-wrapper { margin: 15px 0px !important; From 67fc396e31cf1de18e6bc76f526aa1b8ab24c303 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 9 Mar 2025 15:42:17 -0500 Subject: [PATCH 157/268] Fixed "Post to Group" label spacing [Issue #16] --- bookface_light.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index 09a732f..da8d822 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,6 +1,6 @@ /* Name : Bookface Light - Version : 1.5.9 + Version : 1.5.10 Licence : AGPL Created on : 09 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -579,6 +579,8 @@ ul.nav-tabs { line-height: 32px; top: 6px; position:relative; + display: block; + padding-right: 30px; } #contact-edit-status-wrapper { margin: 15px 0px !important; From de0e91cdd0115a8f1c1f5d33fe513ce0cce2d8ea Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 9 Mar 2025 15:45:59 -0500 Subject: [PATCH 158/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 28d00f1..e1d154b 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.9 +Version 1.5.10 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -270,6 +270,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Fixed misaligned close button [Issue #20] * Cleanup of Compose mobile drop-down menu and button. * Fixed misalignment of Cancel/Submit buttons on contact request [Issue #22] +* Additional fix for "Post in Group" button label spacing [Issue #16] 1.5 (27 Feb 2025) * fixed browser "Share to.." button display and sizing [Issue #3] From a8b8778153449c72d2d189d4e2ccdafb45b60e10 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 9 Mar 2025 16:22:20 -0500 Subject: [PATCH 159/268] Fixed version number --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e1d154b..c96ab71 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.10 +Version 1.5.11 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. From 245142cdce5f8ec7601e0201466b49a21d823de3 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 9 Mar 2025 16:22:43 -0500 Subject: [PATCH 160/268] updated version --- bookface_auto.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_auto.css b/bookface_auto.css index def71b9..9ed3230 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,6 +1,6 @@ /* Name : Bookface Auto Color Mode - Version : 1.5.10 + Version : 1.5.11 Licence : AGPL Created on : 09 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml From e8ac120d0e1f3be165ac3486d126ff15d0f4f584 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 9 Mar 2025 16:23:03 -0500 Subject: [PATCH 161/268] Updated version --- bookface_dark.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_dark.css b/bookface_dark.css index 007be9d..d8bd967 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,6 +1,6 @@ /* Name : Bookface Dark - Version : 1.5.10 + Version : 1.5.11 Licence : AGPL Created on : 09 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml From 0ba90a325195e3ffa6b0f9836ce373e2b0613462 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 9 Mar 2025 16:23:22 -0500 Subject: [PATCH 162/268] Updated version --- bookface_light.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index da8d822..c5622aa 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,6 +1,6 @@ /* Name : Bookface Light - Version : 1.5.10 + Version : 1.5.11 Licence : AGPL Created on : 09 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml From feb7f6f65ca28d0f02dc599ae2e188a30751c616 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 10 Mar 2025 16:43:15 -0500 Subject: [PATCH 163/268] Made Delegation Profile Photos round --- bookface_light.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index c5622aa..b88d01c 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,8 +1,8 @@ /* Name : Bookface Light - Version : 1.5.11 + Version : 1.5.12 Licence : AGPL - Created on : 09 Mar 2025 + Created on : 10 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -1702,6 +1702,15 @@ a.tag.label, color: white; border: none; } +/* Delegation Buttons and Profile Photos */ +body.mod-delegation .identity-match-photo > button { + background-color: transparent !important; + margin-bottom: 10px; +} +body.mod-delegation .identity-match-photo img, +body.mod-settings #delegation .contact-block-img { + border-radius: 100% !important; +} /* Greater than Full-HD Width =========================== */ From 7c4ff095946e19d0d158c4ee1fa45ce06412d8b4 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 10 Mar 2025 16:43:50 -0500 Subject: [PATCH 164/268] Made Delegation Profile Photos round --- bookface_dark.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index d8bd967..d1a521b 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,8 +1,8 @@ /* Name : Bookface Dark - Version : 1.5.11 + Version : 1.5.12 Licence : AGPL - Created on : 09 Mar 2025 + Created on : 10 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -1702,6 +1702,15 @@ a.tag.label, color: white; border: none; } +/* Delegation Buttons and Profile Photos */ +body.mod-delegation .identity-match-photo > button { + background-color: transparent !important; + margin-bottom: 10px; +} +body.mod-delegation .identity-match-photo img, +body.mod-settings #delegation .contact-block-img { + border-radius: 100% !important; +} /* Greater than Full-HD Width =========================== */ From 6c17b5d227a76e07ed88d0dc16ec83a72beced19 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 10 Mar 2025 16:44:26 -0500 Subject: [PATCH 165/268] Made Delegation Profile Photos round --- bookface_auto.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 9ed3230..9f0e8fd 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,8 +1,8 @@ /* Name : Bookface Auto Color Mode - Version : 1.5.11 + Version : 1.5.12 Licence : AGPL - Created on : 09 Mar 2025 + Created on : 10 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -1706,6 +1706,15 @@ a.tag.label, color: white; border: none; } +/* Delegation Buttons and Profile Photos */ +body.mod-delegation .identity-match-photo > button { + background-color: transparent !important; + margin-bottom: 10px; +} +body.mod-delegation .identity-match-photo img, +body.mod-settings #delegation .contact-block-img { + border-radius: 100% !important; +} /* Greater than Full-HD Width =========================== */ From 7a4aa337bab754b3cd317925ae3bd102b1cb14c7 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 10 Mar 2025 16:45:06 -0500 Subject: [PATCH 166/268] Made Delegation Profile Photos round --- bookface_auto.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/bookface_auto.css b/bookface_auto.css index 9f0e8fd..b30ff63 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1715,6 +1715,15 @@ body.mod-delegation .identity-match-photo img, body.mod-settings #delegation .contact-block-img { border-radius: 100% !important; } +/* Delegation Buttons and Profile Photos */ +body.mod-delegation .identity-match-photo > button { + background-color: transparent !important; + margin-bottom: 10px; +} +body.mod-delegation .identity-match-photo img, +body.mod-settings #delegation .contact-block-img { + border-radius: 100% !important; +} /* Greater than Full-HD Width =========================== */ From 7978b87a13fd28962fa16d43dd4119b7faa10d88 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 10 Mar 2025 16:45:46 -0500 Subject: [PATCH 167/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c96ab71..675065d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.11 +Version 1.5.12 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -271,6 +271,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Cleanup of Compose mobile drop-down menu and button. * Fixed misalignment of Cancel/Submit buttons on contact request [Issue #22] * Additional fix for "Post in Group" button label spacing [Issue #16] +* Made Delegation/Account-Switch Profile Photos round. 1.5 (27 Feb 2025) * fixed browser "Share to.." button display and sizing [Issue #3] From 19457de03f8699b15c4b3a8764085627314fa03d Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 15 Mar 2025 14:22:12 -0500 Subject: [PATCH 168/268] Styled profile account type --- bookface_light.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index b88d01c..d565c6f 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1064,7 +1064,8 @@ ul.nav-tabs { aside .vcard .about, aside .vcard .xmpp, aside .vcard .matrix, - aside .vcard .homepage { + aside .vcard .homepage, + aside .vcard .account-type { background-color: var(--background-color); padding: 5px; border-radius: 8px; From 8e594eed9ad74811f2bca9e86d72b013d91d6422 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 15 Mar 2025 14:22:33 -0500 Subject: [PATCH 169/268] updated version --- bookface_light.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index d565c6f..4d8cd10 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,6 +1,6 @@ /* Name : Bookface Light - Version : 1.5.12 + Version : 1.5.13 Licence : AGPL Created on : 10 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml From 6b82b7a90bb8915781dd6d56f1cfb714653824c4 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 15 Mar 2025 14:23:10 -0500 Subject: [PATCH 170/268] Styled profile account type --- bookface_dark.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index d1a521b..0036ff4 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,6 +1,6 @@ /* Name : Bookface Dark - Version : 1.5.12 + Version : 1.5.13 Licence : AGPL Created on : 10 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -1064,7 +1064,8 @@ aside .vcard .p-addr { aside .vcard .about, aside .vcard .xmpp, aside .vcard .matrix, - aside .vcard .homepage { + aside .vcard .homepage, + aside .vcard .account-type { background-color: var(--background-color); padding: 5px; border-radius: 8px; From d40575aecf1a713272a5a28c59d1278f41cf816d Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 15 Mar 2025 14:24:05 -0500 Subject: [PATCH 171/268] Styled profile account type --- bookface_auto.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index b30ff63..ac5e049 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,6 +1,6 @@ /* Name : Bookface Auto Color Mode - Version : 1.5.12 + Version : 1.5.13 Licence : AGPL Created on : 10 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -1065,7 +1065,8 @@ aside .vcard .about, aside .vcard .xmpp, aside .vcard .matrix, - aside .vcard .homepage { + aside .vcard .homepage, + aside .vcard .account-type { background-color: var(--background-color); padding: 5px; border-radius: 8px; @@ -3801,7 +3802,8 @@ aside .vcard .p-addr { aside .vcard .about, aside .vcard .xmpp, aside .vcard .matrix, - aside .vcard .homepage { + aside .vcard .homepage, + aside .vcard .account-type { background-color: var(--background-color); padding: 5px; border-radius: 8px; From 9e1b7c6675a75cdfb02eef443aa4bc6022509d2c Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 15 Mar 2025 14:26:58 -0500 Subject: [PATCH 172/268] Updated changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 675065d..e993db7 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.12 +Version 1.5.13 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -272,6 +272,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Fixed misalignment of Cancel/Submit buttons on contact request [Issue #22] * Additional fix for "Post in Group" button label spacing [Issue #16] * Made Delegation/Account-Switch Profile Photos round. +* Styled profile account type box. 1.5 (27 Feb 2025) * fixed browser "Share to.." button display and sizing [Issue #3] From ae25df43aaf8eb4aac931a52d6c4c8cbcd80731b Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Mar 2025 15:39:01 -0500 Subject: [PATCH 173/268] fixed mobile spacing sheduled + contacts --- bookface_auto.css | 70 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) diff --git a/bookface_auto.css b/bookface_auto.css index ac5e049..b8db192 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1858,6 +1858,41 @@ body.mod-settings #delegation .contact-block-img { body.mod-profile .vcard + #sidebar-photos-albums::before { content: ''; } + /* only seen on your own Contacts Page */ + @supports not selector(:has(*)){ + body.mod-contact #peoplefind-sidebar::before { + content: '\f0c0'; + font-family: ForkAwesome; + font-size: 150px; + position: fixed; + top: 175px; + left: 0; + right: 0; + text-align: center; + color: var(--nav-icon-color); + opacity: .5; + z-index: -1; + transition-duration: .5s; + transition-property: left; + } + body.mod-contact aside.canvas-sliding #peoplefind-sidebar::before, + body.mod-contact aside.canvas-slid #peoplefind-sidebar::before { + left: 50%; + } + } + @supports selector(:has(*)){ + body.mod-contact aside:has(#peoplefind-sidebar) + #content { + margin-top: 0; + } + /* Fix Scheduled Posts Page spacing + Note: aside not :empty because of whitespace, + :blank works but is poorly supported, + :not(has(*)) works but not in old browsers + */ + body.mod-profile aside:not(:has(*)) + #content { + margin-top: 0; + } + } body.mod-contact aside, body.mod-photos aside, body.mod-profile aside { @@ -4574,6 +4609,41 @@ a.tag.label, body.mod-profile .vcard + #sidebar-photos-albums::before { content: ''; } + /* only seen on your own Contacts Page */ + @supports not selector(:has(*)){ + body.mod-contact #peoplefind-sidebar::before { + content: '\f0c0'; + font-family: ForkAwesome; + font-size: 150px; + position: fixed; + top: 175px; + left: 0; + right: 0; + text-align: center; + color: var(--nav-icon-color); + opacity: .5; + z-index: -1; + transition-duration: .5s; + transition-property: left; + } + body.mod-contact aside.canvas-sliding #peoplefind-sidebar::before, + body.mod-contact aside.canvas-slid #peoplefind-sidebar::before { + left: 50%; + } + } + @supports selector(:has(*)){ + body.mod-contact aside:has(#peoplefind-sidebar) + #content { + margin-top: 0; + } + /* Fix Scheduled Posts Page spacing + Note: aside not :empty because of whitespace, + :blank works but is poorly supported, + :not(has(*)) works but not in old browsers + */ + body.mod-profile aside:not(:has(*)) + #content { + margin-top: 0; + } + } body.mod-contact aside, body.mod-photos aside, body.mod-profile aside { From 55d973921e55944293bff5ddbf1702b4fcd26853 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Mar 2025 15:39:24 -0500 Subject: [PATCH 174/268] Edit bookface_auto.css --- bookface_auto.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index b8db192..72ff7bd 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,8 +1,8 @@ /* Name : Bookface Auto Color Mode - Version : 1.5.13 + Version : 1.5.14 Licence : AGPL - Created on : 10 Mar 2025 + Created on : 19 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ From 536b926619a20314b89f13b5e53b50d9165ed444 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Mar 2025 15:40:25 -0500 Subject: [PATCH 175/268] fix mobile spacing schedules + contacts --- bookface_dark.css | 39 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 2 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 0036ff4..c98f50c 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,8 +1,8 @@ /* Name : Bookface Dark - Version : 1.5.13 + Version : 1.5.14 Licence : AGPL - Created on : 10 Mar 2025 + Created on : 19 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -1845,6 +1845,41 @@ body.mod-settings #delegation .contact-block-img { body.mod-profile .vcard + #sidebar-photos-albums::before { content: ''; } + /* only seen on your own Contacts Page */ + @supports not selector(:has(*)){ + body.mod-contact #peoplefind-sidebar::before { + content: '\f0c0'; + font-family: ForkAwesome; + font-size: 150px; + position: fixed; + top: 175px; + left: 0; + right: 0; + text-align: center; + color: var(--nav-icon-color); + opacity: .5; + z-index: -1; + transition-duration: .5s; + transition-property: left; + } + body.mod-contact aside.canvas-sliding #peoplefind-sidebar::before, + body.mod-contact aside.canvas-slid #peoplefind-sidebar::before { + left: 50%; + } + } + @supports selector(:has(*)){ + body.mod-contact aside:has(#peoplefind-sidebar) + #content { + margin-top: 0; + } + /* Fix Scheduled Posts Page spacing + Note: aside not :empty because of whitespace, + :blank works but is poorly supported, + :not(has(*)) works but not in old browsers + */ + body.mod-profile aside:not(:has(*)) + #content { + margin-top: 0; + } + } body.mod-contact aside, body.mod-photos aside, body.mod-profile aside { From 3e7d92515f6b231bc9c44b050ea29fa283fc20e9 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Mar 2025 15:41:12 -0500 Subject: [PATCH 176/268] fix mobile spacing schedules + contacts --- bookface_light.css | 39 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 2 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index 4d8cd10..7a19aa3 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,8 +1,8 @@ /* Name : Bookface Light - Version : 1.5.13 + Version : 1.5.14 Licence : AGPL - Created on : 10 Mar 2025 + Created on : 19 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -1845,6 +1845,41 @@ body.mod-settings #delegation .contact-block-img { body.mod-profile .vcard + #sidebar-photos-albums::before { content: ''; } + /* only seen on your own Contacts Page */ + @supports not selector(:has(*)){ + body.mod-contact #peoplefind-sidebar::before { + content: '\f0c0'; + font-family: ForkAwesome; + font-size: 150px; + position: fixed; + top: 175px; + left: 0; + right: 0; + text-align: center; + color: var(--nav-icon-color); + opacity: .5; + z-index: -1; + transition-duration: .5s; + transition-property: left; + } + body.mod-contact aside.canvas-sliding #peoplefind-sidebar::before, + body.mod-contact aside.canvas-slid #peoplefind-sidebar::before { + left: 50%; + } + } + @supports selector(:has(*)){ + body.mod-contact aside:has(#peoplefind-sidebar) + #content { + margin-top: 0; + } + /* Fix Scheduled Posts Page spacing + Note: aside not :empty because of whitespace, + :blank works but is poorly supported, + :not(has(*)) works but not in old browsers + */ + body.mod-profile aside:not(:has(*)) + #content { + margin-top: 0; + } + } body.mod-contact aside, body.mod-photos aside, body.mod-profile aside { From 5bd499671e6f48e115d7ba865fc7066d7ae44e4a Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 19 Mar 2025 15:42:12 -0500 Subject: [PATCH 177/268] Updated changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e993db7..9b93cc8 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.13 +Version 1.5.14 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -273,6 +273,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Additional fix for "Post in Group" button label spacing [Issue #16] * Made Delegation/Account-Switch Profile Photos round. * Styled profile account type box. +* Fixed mobile spacing issue on Contacts and Scheduled Posts pages 1.5 (27 Feb 2025) * fixed browser "Share to.." button display and sizing [Issue #3] From 559b2b656d598e68c9e9c2878166ad7557496715 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Mar 2025 19:36:35 -0500 Subject: [PATCH 178/268] Fix for More... menu rollovers --- bookface_auto.css | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 72ff7bd..fd312e2 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,8 +1,8 @@ /* Name : Bookface Auto Color Mode - Version : 1.5.14 + Version : 1.5.15 Licence : AGPL - Created on : 19 Mar 2025 + Created on : 20 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -171,6 +171,14 @@ background-image: none !important; border-radius: 8px ; } + /* + Dark Mode has some + additional drop-down + button styling here + that the light mode + version does not + need. + */ .dropdown-menu > li.active, .dropdown-menu > li.active:hover, .dropdown-menu > li.active:focus { @@ -2877,6 +2885,10 @@ ul.tabs li { .dropdown-menu li .btn-link { color: var(--font-color); } + .dropdown-menu > li > a.btn-link:hover, + .dropdown-menu > li > a.btn-link:focus { + color: #333 !important; + } .dropdown-menu > li.active, .dropdown-menu > li.active:hover, .dropdown-menu > li.active:focus { From 9d0ba2ad10c7c647b115183926218390ddad73a6 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Mar 2025 19:37:33 -0500 Subject: [PATCH 179/268] Fix for More... drop menu rollovers --- bookface_dark.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index c98f50c..5e06b65 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,8 +1,8 @@ /* Name : Bookface Dark - Version : 1.5.14 + Version : 1.5.15 Licence : AGPL - Created on : 19 Mar 2025 + Created on : 20 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -170,6 +170,14 @@ ul.tabs li { background-image: none !important; border-radius: 8px ; } + .dropdown-menu li a, + .dropdown-menu li .btn-link { + color: var(--font-color); + } + .dropdown-menu > li > a.btn-link:hover, + .dropdown-menu > li > a.btn-link:focus { + color: #333 !important; + } .dropdown-menu > li.active, .dropdown-menu > li.active:hover, .dropdown-menu > li.active:focus { From afd1e424c50a646e922e23a0fd6334a7d82d25cc Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Mar 2025 19:38:35 -0500 Subject: [PATCH 180/268] Line number reconciliation --- bookface_light.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index 7a19aa3..1404ee9 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,8 +1,8 @@ /* Name : Bookface Light - Version : 1.5.14 + Version : 1.5.15 Licence : AGPL - Created on : 19 Mar 2025 + Created on : 20 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -170,6 +170,14 @@ ul.nav-tabs { background-image: none !important; border-radius: 8px ; } + /* + Dark Mode has some + additional drop-down + button styling here + that the light mode + version does not + need. + */ .dropdown-menu > li.active, .dropdown-menu > li.active:hover, .dropdown-menu > li.active:focus { From 62521e9d335c0502982c37b3ff1dd69d3125e050 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Mar 2025 19:39:24 -0500 Subject: [PATCH 181/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 9b93cc8..3ed9776 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.14 +Version 1.5.15 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -274,6 +274,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Made Delegation/Account-Switch Profile Photos round. * Styled profile account type box. * Fixed mobile spacing issue on Contacts and Scheduled Posts pages +* Fixed "More..." drop menu rollover text color for Dark Mode 1.5 (27 Feb 2025) * fixed browser "Share to.." button display and sizing [Issue #3] From 12f69c93e0ddf929659ed8161fbc64bde2a62b08 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Mar 2025 20:13:33 -0500 Subject: [PATCH 182/268] Fix for Dark Mode little vcard text color --- bookface_auto.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/bookface_auto.css b/bookface_auto.css index fd312e2..43a552a 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,6 +1,6 @@ /* Name : Bookface Auto Color Mode - Version : 1.5.15 + Version : 1.5.16 Licence : AGPL Created on : 20 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -3928,6 +3928,9 @@ aside .widget li:hover { margin: 0 !important; } /* little vcard when you scroll down on profiles */ + #vcard-short-desc * { + color: var(--font-color) !important; + } #vcard-short-photo-wrapper img, #nav-short-info .contact-wrapper img { border-radius: 100% !important; From 7572346d5d0e6712497b6b532e143ffdd11cc52a Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Mar 2025 20:14:19 -0500 Subject: [PATCH 183/268] Fix for little vcard text color --- bookface_dark.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/bookface_dark.css b/bookface_dark.css index 5e06b65..a49a8f5 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,6 +1,6 @@ /* Name : Bookface Dark - Version : 1.5.15 + Version : 1.5.16 Licence : AGPL Created on : 20 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -1148,6 +1148,9 @@ aside .widget li:hover { margin: 0 !important; } /* little vcard when you scroll down on profiles */ + #vcard-short-desc * { + color: var(--font-color) !important; + } #vcard-short-photo-wrapper img, #nav-short-info .contact-wrapper img { border-radius: 100% !important; From 1a188f6cbdd8213fee2b6e28d759c7989c5eef5b Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Mar 2025 20:15:00 -0500 Subject: [PATCH 184/268] Fix for little vcard text color --- bookface_light.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index 1404ee9..5210ffa 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,6 +1,6 @@ /* Name : Bookface Light - Version : 1.5.15 + Version : 1.5.16 Licence : AGPL Created on : 20 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -1148,6 +1148,9 @@ ul.nav-tabs { margin: 0 !important; } /* little vcard when you scroll down on profiles */ + #vcard-short-desc * { + color: var(--font-color) !important; + } #vcard-short-photo-wrapper img, #nav-short-info .contact-wrapper img { border-radius: 100% !important; From 581b2a9f2c1bc0339c8a417e9f04c311dddedcc4 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 20 Mar 2025 20:15:36 -0500 Subject: [PATCH 185/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3ed9776..1f864c0 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.15 +Version 1.5.16 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -275,6 +275,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Styled profile account type box. * Fixed mobile spacing issue on Contacts and Scheduled Posts pages * Fixed "More..." drop menu rollover text color for Dark Mode +* Fixed little vcard text color 1.5 (27 Feb 2025) * fixed browser "Share to.." button display and sizing [Issue #3] From d18fc22c077e9a0af2c2378e968d2681207093ec Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 22 Mar 2025 16:19:30 -0500 Subject: [PATCH 186/268] Fixed hovercard width for narrow screens --- bookface_auto.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 43a552a..4c034ab 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,8 +1,8 @@ /* Name : Bookface Auto Color Mode - Version : 1.5.16 + Version : 1.5.17 Licence : AGPL - Created on : 20 Mar 2025 + Created on : 22 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -2537,6 +2537,9 @@ body.mod-settings #delegation .contact-block-img { background-color: var(--link-color) !important; color: #fff !important; } + .hovercard { + max-width: 100%; + } } /* Narrow Screen Phones in Landscape Orientation ============================================== @@ -5295,6 +5298,9 @@ a.tag.label, background-color: var(--link-color) !important; color: #000 !important; } + .hovercard { + max-width: 100%; + } } /* Narrow Screen Phones in Landscape Orientation ============================================== From 82902d7cfa49f4f9e3f7ba4e8dc0ab4d06bd247e Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 22 Mar 2025 16:20:08 -0500 Subject: [PATCH 187/268] Fixed hovercard width for narrow screens --- bookface_dark.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index a49a8f5..06e51ae 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,8 +1,8 @@ /* Name : Bookface Dark - Version : 1.5.16 + Version : 1.5.17 Licence : AGPL - Created on : 20 Mar 2025 + Created on : 22 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -2527,6 +2527,9 @@ body.mod-settings #delegation .contact-block-img { background-color: var(--link-color) !important; color: #000 !important; } + .hovercard { + max-width: 100%; + } } /* Narrow Screen Phones in Landscape Orientation ============================================== From 85c440c1d046725b170b3de49bc46598b85bac20 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 22 Mar 2025 16:20:53 -0500 Subject: [PATCH 188/268] Fixed hovercard width for narrow screens --- bookface_light.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index 5210ffa..52fdeb3 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,8 +1,8 @@ /* Name : Bookface Light - Version : 1.5.16 + Version : 1.5.17 Licence : AGPL - Created on : 20 Mar 2025 + Created on : 22 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -2527,6 +2527,9 @@ body.mod-settings #delegation .contact-block-img { background-color: var(--link-color) !important; color: #fff !important; } + .hovercard { + max-width: 100%; + } } /* Narrow Screen Phones in Landscape Orientation ============================================== From 66dede1c170fefd596d7bca530cf9591cec00a02 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 22 Mar 2025 16:21:37 -0500 Subject: [PATCH 189/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 1f864c0..39597b1 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.16 +Version 1.5.17 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -276,6 +276,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Fixed mobile spacing issue on Contacts and Scheduled Posts pages * Fixed "More..." drop menu rollover text color for Dark Mode * Fixed little vcard text color +* Fixed hovercard width wider than narrow screen. 1.5 (27 Feb 2025) * fixed browser "Share to.." button display and sizing [Issue #3] From 0bfce6fefa8cb5c138f81dc0d1bbda7da4e5552d Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 22 Mar 2025 16:35:15 -0500 Subject: [PATCH 190/268] Added Postbox feature support --- bookface_auto.css | 228 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 227 insertions(+), 1 deletion(-) diff --git a/bookface_auto.css b/bookface_auto.css index 4c034ab..a6b89e9 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,6 +1,6 @@ /* Name : Bookface Auto Color Mode - Version : 1.5.17 + Version : 1.5.18 Licence : AGPL Created on : 22 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -1733,6 +1733,119 @@ body.mod-delegation .identity-match-photo img, body.mod-settings #delegation .contact-block-img { border-radius: 100% !important; } + /* Post Backgrounds + ================ + Solid and Gradient backgrounds with larger text + to grab reader attention + */ + [class^="postbox-"]{ + display: table-cell; + height: 350px; + width: 1000px; + max-width: 100%; + vertical-align: middle; + font-family: Arial, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 35px; + text-align: center; + padding: 50px 30px; + box-sizing: border-box; + } + /* Solid Color Backgrounds */ + .postbox-black { + background-color: black; + color: white; + } + .postbox-red { + background-color: rgb(226, 1, 59); + color: white; + } + .postbox-green { + background-color: rgb(38, 146, 127); + color: white; + } + .postbox-blue { + background-color: rgb(32, 136, 175); + color: black; + } + .postbox-orange { + background-color: rgb(255, 99, 35); + color: black; + } + .postbox-purple { + background-color: rgb(115, 33, 173); + color: white; + } + .postbox-forest { + background-color: rgb(22, 83, 72); + color: white; + } + .postbox-ocean { + background-color: rgb(36, 55, 98); + color: white; + } + .postbox-pink { + background-color: rgb(243, 83, 105); + color: black; + } + .postbox-salmon { + background-color: rgb(250, 128, 114); + color: black; + } + /* Gradient Backgrounds */ + .postbox-darkgray { + background-image: linear-gradient(135deg, rgb(119, 125, 136), rgb(79, 87, 102)); + color: white; + } + .postbox-minty { + background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); + color: black; + } + .postbox-mintgray { + background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); + color: black; + } + .postbox-redblue { + background-image: linear-gradient(45deg, rgb(255, 0, 71), rgb(44, 52, 199)); + color: white; + } + .postbox-violets { + background-image: linear-gradient(45deg, rgb(93, 63, 218), rgb(252, 54, 253)); + color: white; + } + .postbox-grayblack { + background-image: linear-gradient(45deg, rgb(93, 99, 116), rgb(22, 24, 29)); + color: white; + } + .postbox-tealblue { + background-image: linear-gradient(to bottom, #4bdfdf 0%,#207cca 50%,#19094a 100%); + color: white; + } + .postbox-greengray { + background-image: linear-gradient(to right, #c8dbbd 0%,#dedede 100%); + color: black; + } + .postbox-tealgray { + background-image: linear-gradient(to right, #8dcad0 0%,#dedede 100%); + color: black; + } + .postbox-bluegray { + background-image: linear-gradient(to right, #94bbeb 0%,#dedede 100%); + color: black; + } + .postbox-lavendergray { + background-image: linear-gradient(to right, #cfbfda 0%,#dedede 100%); + color: black; + } + .postbox-sunset { + background-image: linear-gradient(to bottom, #fecf41 0%,#fd7440 50%,#b623b1 100%); + color: white; + } + .postbox-sherbert { + background-image: linear-gradient(45deg, #fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%); + color: black; + } /* Greater than Full-HD Width =========================== */ @@ -4491,6 +4604,119 @@ a.tag.label, color: white; border: none; } + /* Post Backgrounds + ================ + Solid and Gradient backgrounds with larger text + to grab reader attention + */ + [class^="postbox-"]{ + display: table-cell; + height: 350px; + width: 1000px; + max-width: 100%; + vertical-align: middle; + font-family: Arial, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 35px; + text-align: center; + padding: 50px 30px; + box-sizing: border-box; + } + /* Solid Color Backgrounds */ + .postbox-black { + background-color: black; + color: white; + } + .postbox-red { + background-color: rgb(226, 1, 59); + color: white; + } + .postbox-green { + background-color: rgb(38, 146, 127); + color: white; + } + .postbox-blue { + background-color: rgb(32, 136, 175); + color: black; + } + .postbox-orange { + background-color: rgb(255, 99, 35); + color: black; + } + .postbox-purple { + background-color: rgb(115, 33, 173); + color: white; + } + .postbox-forest { + background-color: rgb(22, 83, 72); + color: white; + } + .postbox-ocean { + background-color: rgb(36, 55, 98); + color: white; + } + .postbox-pink { + background-color: rgb(243, 83, 105); + color: black; + } + .postbox-salmon { + background-color: rgb(250, 128, 114); + color: black; + } + /* Gradient Backgrounds */ + .postbox-darkgray { + background-image: linear-gradient(135deg, rgb(119, 125, 136), rgb(79, 87, 102)); + color: white; + } + .postbox-minty { + background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); + color: black; + } + .postbox-mintgray { + background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); + color: black; + } + .postbox-redblue { + background-image: linear-gradient(45deg, rgb(255, 0, 71), rgb(44, 52, 199)); + color: white; + } + .postbox-violets { + background-image: linear-gradient(45deg, rgb(93, 63, 218), rgb(252, 54, 253)); + color: white; + } + .postbox-grayblack { + background-image: linear-gradient(45deg, rgb(93, 99, 116), rgb(22, 24, 29)); + color: white; + } + .postbox-tealblue { + background-image: linear-gradient(to bottom, #4bdfdf 0%,#207cca 50%,#19094a 100%); + color: white; + } + .postbox-greengray { + background-image: linear-gradient(to right, #c8dbbd 0%,#dedede 100%); + color: black; + } + .postbox-tealgray { + background-image: linear-gradient(to right, #8dcad0 0%,#dedede 100%); + color: black; + } + .postbox-bluegray { + background-image: linear-gradient(to right, #94bbeb 0%,#dedede 100%); + color: black; + } + .postbox-lavendergray { + background-image: linear-gradient(to right, #cfbfda 0%,#dedede 100%); + color: black; + } + .postbox-sunset { + background-image: linear-gradient(to bottom, #fecf41 0%,#fd7440 50%,#b623b1 100%); + color: white; + } + .postbox-sherbert { + background-image: linear-gradient(45deg, #fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%); + color: black; + } /* Greater than Full-HD Width =========================== */ From 763b386b3fecd6d0f02c4ba3e2d4964738f07341 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 22 Mar 2025 16:35:50 -0500 Subject: [PATCH 191/268] Added Postbox feature support --- bookface_dark.css | 115 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 114 insertions(+), 1 deletion(-) diff --git a/bookface_dark.css b/bookface_dark.css index 06e51ae..c0b5df8 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,6 +1,6 @@ /* Name : Bookface Dark - Version : 1.5.17 + Version : 1.5.18 Licence : AGPL Created on : 22 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -1723,6 +1723,119 @@ body.mod-delegation .identity-match-photo img, body.mod-settings #delegation .contact-block-img { border-radius: 100% !important; } + /* Post Backgrounds + ================ + Solid and Gradient backgrounds with larger text + to grab reader attention + */ + [class^="postbox-"]{ + display: table-cell; + height: 350px; + width: 1000px; + max-width: 100%; + vertical-align: middle; + font-family: Arial, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 35px; + text-align: center; + padding: 50px 30px; + box-sizing: border-box; + } + /* Solid Color Backgrounds */ + .postbox-black { + background-color: black; + color: white; + } + .postbox-red { + background-color: rgb(226, 1, 59); + color: white; + } + .postbox-green { + background-color: rgb(38, 146, 127); + color: white; + } + .postbox-blue { + background-color: rgb(32, 136, 175); + color: black; + } + .postbox-orange { + background-color: rgb(255, 99, 35); + color: black; + } + .postbox-purple { + background-color: rgb(115, 33, 173); + color: white; + } + .postbox-forest { + background-color: rgb(22, 83, 72); + color: white; + } + .postbox-ocean { + background-color: rgb(36, 55, 98); + color: white; + } + .postbox-pink { + background-color: rgb(243, 83, 105); + color: black; + } + .postbox-salmon { + background-color: rgb(250, 128, 114); + color: black; + } + /* Gradient Backgrounds */ + .postbox-darkgray { + background-image: linear-gradient(135deg, rgb(119, 125, 136), rgb(79, 87, 102)); + color: white; + } + .postbox-minty { + background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); + color: black; + } + .postbox-mintgray { + background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); + color: black; + } + .postbox-redblue { + background-image: linear-gradient(45deg, rgb(255, 0, 71), rgb(44, 52, 199)); + color: white; + } + .postbox-violets { + background-image: linear-gradient(45deg, rgb(93, 63, 218), rgb(252, 54, 253)); + color: white; + } + .postbox-grayblack { + background-image: linear-gradient(45deg, rgb(93, 99, 116), rgb(22, 24, 29)); + color: white; + } + .postbox-tealblue { + background-image: linear-gradient(to bottom, #4bdfdf 0%,#207cca 50%,#19094a 100%); + color: white; + } + .postbox-greengray { + background-image: linear-gradient(to right, #c8dbbd 0%,#dedede 100%); + color: black; + } + .postbox-tealgray { + background-image: linear-gradient(to right, #8dcad0 0%,#dedede 100%); + color: black; + } + .postbox-bluegray { + background-image: linear-gradient(to right, #94bbeb 0%,#dedede 100%); + color: black; + } + .postbox-lavendergray { + background-image: linear-gradient(to right, #cfbfda 0%,#dedede 100%); + color: black; + } + .postbox-sunset { + background-image: linear-gradient(to bottom, #fecf41 0%,#fd7440 50%,#b623b1 100%); + color: white; + } + .postbox-sherbert { + background-image: linear-gradient(45deg, #fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%); + color: black; + } /* Greater than Full-HD Width =========================== */ From f48b6170ec4701ffdc1c77824e47083f9a3767ee Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 22 Mar 2025 16:36:23 -0500 Subject: [PATCH 192/268] Added Postbox feature support --- bookface_light.css | 115 ++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 114 insertions(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index 52fdeb3..5768c88 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,6 +1,6 @@ /* Name : Bookface Light - Version : 1.5.17 + Version : 1.5.18 Licence : AGPL Created on : 22 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -1723,6 +1723,119 @@ body.mod-delegation .identity-match-photo img, body.mod-settings #delegation .contact-block-img { border-radius: 100% !important; } + /* Post Backgrounds + ================ + Solid and Gradient backgrounds with larger text + to grab reader attention + */ + [class^="postbox-"]{ + display: table-cell; + height: 350px; + width: 1000px; + max-width: 100%; + vertical-align: middle; + font-family: Arial, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 35px; + text-align: center; + padding: 50px 30px; + box-sizing: border-box; + } + /* Solid Color Backgrounds */ + .postbox-black { + background-color: black; + color: white; + } + .postbox-red { + background-color: rgb(226, 1, 59); + color: white; + } + .postbox-green { + background-color: rgb(38, 146, 127); + color: white; + } + .postbox-blue { + background-color: rgb(32, 136, 175); + color: black; + } + .postbox-orange { + background-color: rgb(255, 99, 35); + color: black; + } + .postbox-purple { + background-color: rgb(115, 33, 173); + color: white; + } + .postbox-forest { + background-color: rgb(22, 83, 72); + color: white; + } + .postbox-ocean { + background-color: rgb(36, 55, 98); + color: white; + } + .postbox-pink { + background-color: rgb(243, 83, 105); + color: black; + } + .postbox-salmon { + background-color: rgb(250, 128, 114); + color: black; + } + /* Gradient Backgrounds */ + .postbox-darkgray { + background-image: linear-gradient(135deg, rgb(119, 125, 136), rgb(79, 87, 102)); + color: white; + } + .postbox-minty { + background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); + color: black; + } + .postbox-mintgray { + background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); + color: black; + } + .postbox-redblue { + background-image: linear-gradient(45deg, rgb(255, 0, 71), rgb(44, 52, 199)); + color: white; + } + .postbox-violets { + background-image: linear-gradient(45deg, rgb(93, 63, 218), rgb(252, 54, 253)); + color: white; + } + .postbox-grayblack { + background-image: linear-gradient(45deg, rgb(93, 99, 116), rgb(22, 24, 29)); + color: white; + } + .postbox-tealblue { + background-image: linear-gradient(to bottom, #4bdfdf 0%,#207cca 50%,#19094a 100%); + color: white; + } + .postbox-greengray { + background-image: linear-gradient(to right, #c8dbbd 0%,#dedede 100%); + color: black; + } + .postbox-tealgray { + background-image: linear-gradient(to right, #8dcad0 0%,#dedede 100%); + color: black; + } + .postbox-bluegray { + background-image: linear-gradient(to right, #94bbeb 0%,#dedede 100%); + color: black; + } + .postbox-lavendergray { + background-image: linear-gradient(to right, #cfbfda 0%,#dedede 100%); + color: black; + } + .postbox-sunset { + background-image: linear-gradient(to bottom, #fecf41 0%,#fd7440 50%,#b623b1 100%); + color: white; + } + .postbox-sherbert { + background-image: linear-gradient(45deg, #fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%); + color: black; + } /* Greater than Full-HD Width =========================== */ From e680bacf4c8c635b29c19454445cb48356c2213d Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 22 Mar 2025 16:37:00 -0500 Subject: [PATCH 193/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 39597b1..52c4775 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.17 +Version 1.5.18 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -277,6 +277,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Fixed "More..." drop menu rollover text color for Dark Mode * Fixed little vcard text color * Fixed hovercard width wider than narrow screen. +* Added support for new Postbox feature. 1.5 (27 Feb 2025) * fixed browser "Share to.." button display and sizing [Issue #3] From ebc90092d1aecac8987c3b29b3b7fc2a6a00a4c2 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 22 Mar 2025 18:35:48 -0500 Subject: [PATCH 194/268] Jot Plugins toolbar fix --- bookface_light.css | 59 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 58 insertions(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index 5768c88..cbe6139 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,6 +1,6 @@ /* Name : Bookface Light - Version : 1.5.18 + Version : 1.5.19 Licence : AGPL Created on : 22 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -1434,6 +1434,59 @@ ul.nav-tabs { width: 260px; position: absolute; } + /* Jot Plugin Buttons */ + #profile-jot-plugin-wrapper { + width: 85%; + margin: 0; + } + #profile-jot-plugin-wrapper > div > button { + width: 45px; + height: 45px; + margin: 5px; + } + #profile-jot-plugin-wrapper > div > button:hover, + #profile-jot-plugin-wrapper > div > button:focus { + background-color: var(--link-color); + color: white !important; + } + /* Smileys Add-on */ + .smiley_button { + -webkit-box-shadow: none !important; + box-shadow: none !important; + } + /* image icon is not color mode aware + so swap it with an icon font + */ + .smiley_button > img { + display: none; + } + .smiley_button::before { + content: '\f055'; + font-family: ForkAwesome; + font-size: inherit; + color: inherit; + } + #smileybutton { + position: fixed; + background-color: #fff; + width: auto; + border-radius: 8px; + padding: 10px; + -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); + box-shadow: 0 6px 12px rgba(0,0,0,.175); + } + table.smiley-preview { + border: none; + } + .jotplugins #postboxbutton, + .jotplugins #smileybutton { + position: absolute; + } + /* Zen Postbox Add-on */ + .postbox_button > img { + width: 32px; + height: 32px; + } /* MISCELLANEOUS STUFF */ div#back-to-top { bottom: 65px; @@ -2501,6 +2554,10 @@ body.mod-settings #delegation .contact-block-img { position: relative; float: none !important; } + /* Jot Plugin Buttons */ + #profile-jot-plugin-wrapper { + width: 100%; + } } /* Frio Theme Cut-Off (double sidebar width) ========================================= From c64af6ec0371f2426c5363fb94e4451f6aba7b34 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 22 Mar 2025 18:36:51 -0500 Subject: [PATCH 195/268] Jot Plugins toolbar fix --- bookface_dark.css | 59 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 58 insertions(+), 1 deletion(-) diff --git a/bookface_dark.css b/bookface_dark.css index c0b5df8..2d5f347 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,6 +1,6 @@ /* Name : Bookface Dark - Version : 1.5.18 + Version : 1.5.19 Licence : AGPL Created on : 22 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -1434,6 +1434,59 @@ aside .widget li:hover { width: 260px; position: absolute; } + /* Jot Plugin Buttons */ + #profile-jot-plugin-wrapper { + width: 85% !important; + margin: 0 !important; + } + #profile-jot-plugin-wrapper > div > button { + width: 45px !important; + height: 45px !important; + margin: 5px !important; + } + #profile-jot-plugin-wrapper > div > button:hover, + #profile-jot-plugin-wrapper > div > button:focus { + background-color: var(--link-color) !important; + color: white !important; + } + /* Smileys Add-on */ + .smiley_button { + -webkit-box-shadow: none !important; + box-shadow: none !important; + } + /* image icon is not color mode aware + so swap it with an icon font + */ + .smiley_button > img { + display: none !important; + } + .smiley_button::before { + content: '\f055'; + font-family: ForkAwesome; + font-size: inherit; + color: inherit; + } + #smileybutton { + position: fixed !important; + background-color: #fff !important; + width: auto !imporrtant; + border-radius: 8px !important; + padding: 10px !important; + -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175) !important; + box-shadow: 0 6px 12px rgba(0,0,0,.175) !important; + } + table.smiley-preview { + border: none !important; + } + .jotplugins #postboxbutton, + .jotplugins #smileybutton { + position: absolute !important; + } + /* Zen Postbox Add-on */ + .postbox_button > img { + width: 32px !important; + height: 32px !important; + } /* MISCELLANEOUS STUFF */ div#back-to-top { bottom: 65px; @@ -2500,6 +2553,10 @@ body.mod-settings #delegation .contact-block-img { .intro-actions { position: relative; float: none !important; + } + /* Jot Plugin Buttons */ + #profile-jot-plugin-wrapper { + width: 100%; } } /* Frio Theme Cut-Off (double sidebar width) From 8c1769975857fc798ab169aed63bea9fb3c082e8 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 22 Mar 2025 18:38:11 -0500 Subject: [PATCH 196/268] Jot Plugins toolbar fix --- bookface_auto.css | 118 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 116 insertions(+), 2 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index a6b89e9..b425e6e 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,6 +1,6 @@ /* Name : Bookface Auto Color Mode - Version : 1.5.18 + Version : 1.5.19 Licence : AGPL Created on : 22 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -1435,6 +1435,59 @@ width: 260px; position: absolute; } + /* Jot Plugin Buttons */ + #profile-jot-plugin-wrapper { + width: 85% !important; + margin: 0 !important; + } + #profile-jot-plugin-wrapper > div > button { + width: 45px !important; + height: 45px !important; + margin: 5px !important; + } + #profile-jot-plugin-wrapper > div > button:hover, + #profile-jot-plugin-wrapper > div > button:focus { + background-color: var(--link-color) !important; + color: white !important; + } + /* Smileys Add-on */ + .smiley_button { + -webkit-box-shadow: none !important; + box-shadow: none !important; + } + /* image icon is not color mode aware + so swap it with an icon font + */ + .smiley_button > img { + display: none !important; + } + .smiley_button::before { + content: '\f055'; + font-family: ForkAwesome; + font-size: inherit; + color: inherit; + } + #smileybutton { + position: fixed !important; + background-color: #fff !important; + width: auto !imporrtant; + border-radius: 8px !important; + padding: 10px !important; + -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175) !important; + box-shadow: 0 6px 12px rgba(0,0,0,.175) !important; + } + table.smiley-preview { + border: none !important; + } + .jotplugins #postboxbutton, + .jotplugins #smileybutton { + position: absolute !important; + } + /* Zen Postbox Add-on */ + .postbox_button > img { + width: 32px !important; + height: 32px !important; + } /* MISCELLANEOUS STUFF */ div#back-to-top { bottom: 65px; @@ -2511,6 +2564,10 @@ body.mod-settings #delegation .contact-block-img { position: relative; float: none !important; } + /* Jot Plugin Buttons */ + #profile-jot-plugin-wrapper { + width: 100%; + } } /* Frio Theme Cut-Off (double sidebar width) ========================================= @@ -4330,6 +4387,59 @@ aside .widget li:hover { width: 260px; position: absolute; } + /* Jot Plugin Buttons */ + #profile-jot-plugin-wrapper { + width: 85% !important; + margin: 0 !important; + } + #profile-jot-plugin-wrapper > div > button { + width: 45px !important; + height: 45px !important; + margin: 5px !important; + } + #profile-jot-plugin-wrapper > div > button:hover, + #profile-jot-plugin-wrapper > div > button:focus { + background-color: var(--link-color) !important; + color: white !important; + } + /* Smileys Add-on */ + .smiley_button { + -webkit-box-shadow: none !important; + box-shadow: none !important; + } + /* image icon is not color mode aware + so swap it with an icon font + */ + .smiley_button > img { + display: none !important; + } + .smiley_button::before { + content: '\f055'; + font-family: ForkAwesome; + font-size: inherit; + color: inherit; + } + #smileybutton { + position: fixed !important; + background-color: #fff !important; + width: auto !imporrtant; + border-radius: 8px !important; + padding: 10px !important; + -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175) !important; + box-shadow: 0 6px 12px rgba(0,0,0,.175) !important; + } + table.smiley-preview { + border: none !important; + } + .jotplugins #postboxbutton, + .jotplugins #smileybutton { + position: absolute !important; + } + /* Zen Postbox Add-on */ + .postbox_button > img { + width: 32px !important; + height: 32px !important; + } /* MISCELLANEOUS STUFF */ div#back-to-top { bottom: 65px; @@ -5384,7 +5494,11 @@ a.tag.label, .intro-actions { position: relative; float: none !important; - } + } + /* Jot Plugin Buttons */ + #profile-jot-plugin-wrapper { + width: 100%; + } } /* Frio Theme Cut-Off (double sidebar width) ========================================= From d4a0a5a14d8e773b3ca313fb2d8c97bb4db65e20 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 22 Mar 2025 18:38:55 -0500 Subject: [PATCH 197/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 52c4775..fbb0dcd 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.18 +Version 1.5.19 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -278,6 +278,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Fixed little vcard text color * Fixed hovercard width wider than narrow screen. * Added support for new Postbox feature. +* Jot Plugins tollbar alignment fixes. 1.5 (27 Feb 2025) * fixed browser "Share to.." button display and sizing [Issue #3] From c01241a6a8902967c5dd0107f378fbba27af7f84 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 23 Mar 2025 13:43:53 -0500 Subject: [PATCH 198/268] Fix for Issue #23 --- bookface_auto.css | 36 ++++++++++++++++++++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index b425e6e..2ca83df 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,8 +1,8 @@ /* Name : Bookface Auto Color Mode - Version : 1.5.19 + Version : 1.5.20 Licence : AGPL - Created on : 22 Mar 2025 + Created on : 23 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -1188,6 +1188,22 @@ .coverphoto:has(> :last-child:nth-child(n+4)) img { height: 25%; } + /* Contact Info Blocks */ + .contact-info { + padding-bottom: 10px; + } + .contact-info .media-heading, + .contact-info small { + margin-right: 40px !important; + display: inline-block; + } + .contact-info .media-heading small { + margin-right: 0px !important; + } + .contact-info .navicon, + .contact-info .fa { + font-size: 16px; + } /* not obviously clickable or intuitive what it does */ .plink.u-url { /* uncomment to outline as a button @@ -4141,6 +4157,22 @@ aside .widget li:hover { .coverphoto:has(> :last-child:nth-child(n+4)) img { height: 25%; } + /* Contact Info Blocks */ + .contact-info { + padding-bottom: 10px; + } + .contact-info .media-heading, + .contact-info small { + margin-right: 40px !important; + display: inline-block; + } + .contact-info .media-heading small { + margin-right: 0px !important; + } + .contact-info .navicon, + .contact-info .fa { + font-size: 16px; + } /* not obviously clickable or intuitive what it does */ .plink.u-url { /* uncomment to outline as a button From 26e4e26873d95b24a766439c8611b309034070ed Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 23 Mar 2025 13:44:37 -0500 Subject: [PATCH 199/268] Fix for Issue #23 --- bookface_dark.css | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 2d5f347..0fdbbae 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,8 +1,8 @@ /* Name : Bookface Dark - Version : 1.5.19 + Version : 1.5.20 Licence : AGPL - Created on : 22 Mar 2025 + Created on : 23 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -1187,6 +1187,22 @@ aside .widget li:hover { .coverphoto:has(> :last-child:nth-child(n+4)) img { height: 25%; } + /* Contact Info Blocks */ + .contact-info { + padding-bottom: 10px; + } + .contact-info .media-heading, + .contact-info small { + margin-right: 40px !important; + display: inline-block; + } + .contact-info .media-heading small { + margin-right: 0px !important; + } + .contact-info .navicon, + .contact-info .fa { + font-size: 16px; + } /* not obviously clickable or intuitive what it does */ .plink.u-url { /* uncomment to outline as a button From 7d925f5d93a8d99ae89edf41bed8219cd9b76680 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 23 Mar 2025 13:45:17 -0500 Subject: [PATCH 200/268] Fix for Issue #23 --- bookface_light.css | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index cbe6139..f5e5702 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,8 +1,8 @@ /* Name : Bookface Light - Version : 1.5.19 + Version : 1.5.20 Licence : AGPL - Created on : 22 Mar 2025 + Created on : 23 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -1187,6 +1187,22 @@ ul.nav-tabs { .coverphoto:has(> :last-child:nth-child(n+4)) img { height: 25%; } + /* Contact Info Blocks */ + .contact-info { + padding-bottom: 10px; + } + .contact-info .media-heading, + .contact-info small { + margin-right: 40px !important; + display: inline-block; + } + .contact-info .media-heading small { + margin-right: 0px !important; + } + .contact-info .navicon, + .contact-info .fa { + font-size: 16px; + } /* not obviously clickable or intuitive what it does */ .plink.u-url { /* uncomment to outline as a button From c63967eb81479ca40915469a1300f2f58d4d7e55 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sun, 23 Mar 2025 13:46:10 -0500 Subject: [PATCH 201/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index fbb0dcd..2944143 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.19 +Version 1.5.20 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -279,6 +279,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Fixed hovercard width wider than narrow screen. * Added support for new Postbox feature. * Jot Plugins tollbar alignment fixes. +* Fix for post status overlapping network link/icon [Issue #23] 1.5 (27 Feb 2025) * fixed browser "Share to.." button display and sizing [Issue #3] From 6602c01bc5970405935a2bcb1c85181813820958 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 24 Mar 2025 13:27:09 -0500 Subject: [PATCH 202/268] Fixed appearance of links inside Postboxes --- bookface_auto.css | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 2ca83df..921eb5a 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,8 +1,8 @@ /* Name : Bookface Auto Color Mode - Version : 1.5.20 + Version : 1.5.21 Licence : AGPL - Created on : 23 Mar 2025 + Created on : 24 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -1821,6 +1821,13 @@ body.mod-settings #delegation .contact-block-img { padding: 50px 30px; box-sizing: border-box; } + [class^="postbox-"] a { + color: inherit !important; + } + [class^="postbox-"]:hover a, + [class^="postbox-"]:focus a { + text-decoration: underline; + } /* Solid Color Backgrounds */ .postbox-black { background-color: black; @@ -4765,6 +4772,13 @@ a.tag.label, padding: 50px 30px; box-sizing: border-box; } + [class^="postbox-"] a { + color: inherit !important; + } + [class^="postbox-"]:hover a, + [class^="postbox-"]:focus a { + text-decoration: underline; + } /* Solid Color Backgrounds */ .postbox-black { background-color: black; From ab93a441b897d72878e92fb0105d9f39291da62b Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 24 Mar 2025 13:27:59 -0500 Subject: [PATCH 203/268] Fixed appearance of links inside Postboxes --- bookface_dark.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 0fdbbae..21b8242 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,8 +1,8 @@ /* Name : Bookface Dark - Version : 1.5.20 + Version : 1.5.21 Licence : AGPL - Created on : 23 Mar 2025 + Created on : 24 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -1811,6 +1811,13 @@ body.mod-settings #delegation .contact-block-img { padding: 50px 30px; box-sizing: border-box; } + [class^="postbox-"] a { + color: inherit !important; + } + [class^="postbox-"]:hover a, + [class^="postbox-"]:focus a { + text-decoration: underline; + } /* Solid Color Backgrounds */ .postbox-black { background-color: black; From 0874861e9f71536151208aadb30ec8e20ba49b62 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 24 Mar 2025 13:28:37 -0500 Subject: [PATCH 204/268] Fixed appearance of links inside Postboxes --- bookface_light.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index f5e5702..0f34b5b 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,8 +1,8 @@ /* Name : Bookface Light - Version : 1.5.20 + Version : 1.5.21 Licence : AGPL - Created on : 23 Mar 2025 + Created on : 24 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -1811,6 +1811,13 @@ body.mod-settings #delegation .contact-block-img { padding: 50px 30px; box-sizing: border-box; } + [class^="postbox-"] a { + color: inherit !important; + } + [class^="postbox-"]:hover a, + [class^="postbox-"]:focus a { + text-decoration: underline; + } /* Solid Color Backgrounds */ .postbox-black { background-color: black; From e11dd7ec2e4c9caf864dec6e7f04cd33909b8269 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 24 Mar 2025 13:29:02 -0500 Subject: [PATCH 205/268] Updated version number --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2944143..bc368e2 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.20 +Version 1.5.21 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. From 64b661fbcbccb5ed9572e6b623444bfa3088d98d Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Tue, 25 Mar 2025 13:53:28 -0500 Subject: [PATCH 206/268] Replace bookface_auto.css --- bookface_auto.css | 94 +++++++++++++++++++++++++++-------------------- 1 file changed, 55 insertions(+), 39 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 921eb5a..cb52a0b 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,8 +1,8 @@ /* Name : Bookface Auto Color Mode - Version : 1.5.21 + Version : 1.6 Licence : AGPL - Created on : 24 Mar 2025 + Created on : 25 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -121,7 +121,6 @@ font-size: 15px !important; margin-left: 10px !important; } - ul.nav-tabs li a, ul.tabs li a { margin-top: 8px; @@ -1152,6 +1151,9 @@ margin: 0 !important; } /* little vcard when you scroll down on profiles */ + #vcard-short-desc * { + color: var(--font-color) !important; + } #vcard-short-photo-wrapper img, #nav-short-info .contact-wrapper img { border-radius: 100% !important; @@ -1453,17 +1455,17 @@ } /* Jot Plugin Buttons */ #profile-jot-plugin-wrapper { - width: 85% !important; - margin: 0 !important; + width: 85%; + margin: 0; } #profile-jot-plugin-wrapper > div > button { - width: 45px !important; - height: 45px !important; - margin: 5px !important; + width: 45px; + height: 45px; + margin: 5px; } #profile-jot-plugin-wrapper > div > button:hover, #profile-jot-plugin-wrapper > div > button:focus { - background-color: var(--link-color) !important; + background-color: var(--link-color); color: white !important; } /* Smileys Add-on */ @@ -1475,7 +1477,7 @@ so swap it with an icon font */ .smiley_button > img { - display: none !important; + display: none; } .smiley_button::before { content: '\f055'; @@ -1484,26 +1486,33 @@ color: inherit; } #smileybutton { - position: fixed !important; - background-color: #fff !important; - width: auto !imporrtant; - border-radius: 8px !important; - padding: 10px !important; - -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175) !important; - box-shadow: 0 6px 12px rgba(0,0,0,.175) !important; + position: fixed; + background-color: #fff; + width: auto; + border-radius: 8px; + padding: 10px; + -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); + box-shadow: 0 6px 12px rgba(0,0,0,.175); } table.smiley-preview { - border: none !important; + border: none; } .jotplugins #postboxbutton, .jotplugins #smileybutton { - position: absolute !important; + position: absolute; } /* Zen Postbox Add-on */ .postbox_button > img { - width: 32px !important; - height: 32px !important; + width: 32px; + height: 32px; } + /* + BOOKFACE + DARK MODE + HAS ADDITIONAL + STYLING + HERE + */ /* MISCELLANEOUS STUFF */ div#back-to-top { bottom: 65px; @@ -4428,17 +4437,17 @@ aside .widget li:hover { } /* Jot Plugin Buttons */ #profile-jot-plugin-wrapper { - width: 85% !important; - margin: 0 !important; + width: 85%; + margin: 0; } #profile-jot-plugin-wrapper > div > button { - width: 45px !important; - height: 45px !important; - margin: 5px !important; + width: 45px; + height: 45px; + margin: 5px; } #profile-jot-plugin-wrapper > div > button:hover, #profile-jot-plugin-wrapper > div > button:focus { - background-color: var(--link-color) !important; + background-color: var(--link-color); color: white !important; } /* Smileys Add-on */ @@ -4450,7 +4459,7 @@ aside .widget li:hover { so swap it with an icon font */ .smiley_button > img { - display: none !important; + display: none; } .smiley_button::before { content: '\f055'; @@ -4459,26 +4468,33 @@ aside .widget li:hover { color: inherit; } #smileybutton { - position: fixed !important; - background-color: #fff !important; - width: auto !imporrtant; - border-radius: 8px !important; - padding: 10px !important; - -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175) !important; - box-shadow: 0 6px 12px rgba(0,0,0,.175) !important; + position: fixed; + background-color: var(--background-color); + width: auto; + border-radius: 8px; + padding: 10px; + -webkit-box-shadow: 0 6px 12px rgba(255,255,255,.175); + box-shadow: 0 6px 12px rgba(255,255,255,.175); } table.smiley-preview { - border: none !important; + border: none; } .jotplugins #postboxbutton, .jotplugins #smileybutton { - position: absolute !important; + position: absolute; } /* Zen Postbox Add-on */ .postbox_button > img { - width: 32px !important; - height: 32px !important; + width: 32px; + height: 32px; } + #postboxbutton { + background-color: var(--background-color); + box-shadow: 0 6px 12px rgba(255,255,255,.175); + } + div.preview-postbox > button { + border: 1px solid #444; + } /* MISCELLANEOUS STUFF */ div#back-to-top { bottom: 65px; From e1b0ab872bc9792cd66faa025385085cca924f68 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Tue, 25 Mar 2025 13:53:48 -0500 Subject: [PATCH 207/268] Replace bookface_dark.css --- bookface_dark.css | 50 ++++++++++++++++++++++++++++------------------- 1 file changed, 30 insertions(+), 20 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 21b8242..dd4770f 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,8 +1,8 @@ /* Name : Bookface Dark - Version : 1.5.21 + Version : 1.6 Licence : AGPL - Created on : 24 Mar 2025 + Created on : 25 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -1089,6 +1089,9 @@ aside .widget li.selected { aside .widget li.selected a { font-weight: bold; } + aside .widget li.selected a:hover { + color: #333; + } aside .widget li:hover { background-color:rgba(128,128,128,.2) !important; border-color: transparent !important; @@ -1452,17 +1455,17 @@ aside .widget li:hover { } /* Jot Plugin Buttons */ #profile-jot-plugin-wrapper { - width: 85% !important; - margin: 0 !important; + width: 85%; + margin: 0; } #profile-jot-plugin-wrapper > div > button { - width: 45px !important; - height: 45px !important; - margin: 5px !important; + width: 45px; + height: 45px; + margin: 5px; } #profile-jot-plugin-wrapper > div > button:hover, #profile-jot-plugin-wrapper > div > button:focus { - background-color: var(--link-color) !important; + background-color: var(--link-color); color: white !important; } /* Smileys Add-on */ @@ -1474,7 +1477,7 @@ aside .widget li:hover { so swap it with an icon font */ .smiley_button > img { - display: none !important; + display: none; } .smiley_button::before { content: '\f055'; @@ -1483,26 +1486,33 @@ aside .widget li:hover { color: inherit; } #smileybutton { - position: fixed !important; - background-color: #fff !important; - width: auto !imporrtant; - border-radius: 8px !important; - padding: 10px !important; - -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175) !important; - box-shadow: 0 6px 12px rgba(0,0,0,.175) !important; + position: fixed; + background-color: var(--background-color); + width: auto; + border-radius: 8px; + padding: 10px; + -webkit-box-shadow: 0 6px 12px rgba(255,255,255,.175); + box-shadow: 0 6px 12px rgba(255,255,255,.175); } table.smiley-preview { - border: none !important; + border: none; } .jotplugins #postboxbutton, .jotplugins #smileybutton { - position: absolute !important; + position: absolute; } /* Zen Postbox Add-on */ .postbox_button > img { - width: 32px !important; - height: 32px !important; + width: 32px; + height: 32px; } + #postboxbutton { + background-color: var(--background-color); + box-shadow: 0 6px 12px rgba(255,255,255,.175); + } + div.preview-postbox > button { + border: 1px solid #444; + } /* MISCELLANEOUS STUFF */ div#back-to-top { bottom: 65px; From bd8c34cb7554e1cdd192fba756df0e1c23d9240b Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Tue, 25 Mar 2025 13:54:10 -0500 Subject: [PATCH 208/268] Replace bookface_light.css --- bookface_light.css | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index 0f34b5b..80e6d04 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,8 +1,8 @@ /* Name : Bookface Light - Version : 1.5.21 + Version : 1.6 Licence : AGPL - Created on : 24 Mar 2025 + Created on : 25 Mar 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -1089,6 +1089,9 @@ ul.nav-tabs { 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; @@ -1503,6 +1506,13 @@ ul.nav-tabs { width: 32px; height: 32px; } + /* + BOOKFACE + DARK MODE + HAS ADDITIONAL + STYLING + HERE + */ /* MISCELLANEOUS STUFF */ div#back-to-top { bottom: 65px; From 93274a817eb732d9dd122659a11e3a27cb24021e Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Tue, 25 Mar 2025 13:54:41 -0500 Subject: [PATCH 209/268] updated version number --- bookface_auto.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_auto.php b/bookface_auto.php index 403a023..71d9866 100644 --- a/bookface_auto.php +++ b/bookface_auto.php @@ -10,7 +10,7 @@ * Author: Pygoscelis Papua @randompenguin@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.4 + * Version: 1.6 */ // if there is no cookie create one use Friendica\DI; From b23c318c8afba05c32d673ac1c96f3daf9f7b438 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Tue, 25 Mar 2025 13:55:08 -0500 Subject: [PATCH 210/268] updated version number --- bookface_dark.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_dark.php b/bookface_dark.php index 4f7f632..f68a4be 100644 --- a/bookface_dark.php +++ b/bookface_dark.php @@ -10,7 +10,7 @@ * Author: Pygoscelis Papua @randompenguin@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.4 + * Version: 1.6 */ use Friendica\DI; require_once 'view/theme/frio/php/PHPColors/Color.php'; From 7ea1550a83366a3ca05a7081658cf161dd7b5af6 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Tue, 25 Mar 2025 13:55:28 -0500 Subject: [PATCH 211/268] updated version number --- bookface_light.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_light.php b/bookface_light.php index 64109e0..a09834d 100644 --- a/bookface_light.php +++ b/bookface_light.php @@ -10,7 +10,7 @@ * Author: Pygoscelis Papua @randompenguin@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.4 + * Version: 1.6 */ use Friendica\DI; require_once 'view/theme/frio/php/PHPColors/Color.php'; From 074f00373dfa42f25ad41c7aba5a54dcd282265c Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Tue, 25 Mar 2025 14:05:34 -0500 Subject: [PATCH 212/268] Added info about Postbox feature --- README.md | 89 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 88 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index bc368e2..715d686 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5.21 +Version 1.6 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -144,6 +144,92 @@ While not really recommended you can place up to four images in the Cover Photo Extras spaces are okay, but just make sure there are no carriage returns or other elements inside `[class]..[/class]` or it will mis-count the images and size them wrong. Also keep in mind people not using Bookface will see three thumbnail images on your profile, only Bookface users will see the striped collage. +### POSTBOXES + +Starting with Bookface version 1.6 now Friendica will have Postboxes too! Styling similar to the Facebook solid color and gradient backgrounds have been added to the Bookface stylesheets. + +**Right now Postbox is exclusively available for people using the Bookface scheme in the Friendica webapp, either on desktop or mobile.** + +When a Postbox post is shared to another platform like Mastodon, Sharkey, Disapora, Hubzilla, etc., the Postbox styling does not go with it. The same is true for anyone viewing the post in a third-party app, because none of them support Postbox styling, at least not yet. + +There are two Friendica add-ons server administrators can install to add global support for Postbox styling. The "[Postbox](https://gitlab.com/randompenguin/postbox)" add-on simply adds a stylesheet to the `` element. It provides no interface for creating Postboxes, but users can still create them manually with BBcode. The other is the "[Zen Postbox](https://gitlab.com/randompenguin/zen_postbox)" add-on which not only adds the stylesheet to the `` it also adds a Jot Plugin button to the message composer with a menu of all the available Postbox styles. + +#### How to Use Postboxes + +To make use of a Friendica Postbox simply wrap the text inside a Postbox Class BBcode like this: + +`[class=postbox-red]This is the wrapped text[/class]` + +#### Available Color Options + +In the `[class]` opener add `postbox-` plus any one of the color names after the "=" sign. + +**Solid Color Backgrounds:** + +- postbox-black +- postbox-red +- postbox-green +- postbox-blue +- postbox-orange +- postbox-purple +- postbox-forest +- postbox-ocean +- postbox-pink +- postbox-salmon + + +**Gradient Backgrounds:** + +- postbox-darkgray +- postbox-minty +- postbox-mintgray +- postbox-redblue +- postbox-violets +- postbox-grayblack +- postbox-tealblue +- postbox-greengray +- postbox-tealgray +- postbox-bluegray +- postbox-lavendergray +- postbox-sunset +- postbox-sherbert + +#### Content Restrictions + +Friendica's Postbox is a bit more forgiving as it allows for more than text-only content. However it does not work with most of the Friendica formatting due to the way BBcode is parsed. + +**BBcodes you CANNOT put inside a Postbox:** + +- [class], which means you can’t nest Postboxes +- [hr] +- [h1],[h2],[h3], etc… +- [table],[tr],[th],[td] +- [list],[ul],[ol] +- [quote] +- [abstract] +- [spoiler] +- [map] +- [code] + +**BBcodes that do not work as intended inside a Postbox:** + +- [pre] +- [noparse] +- [nobb] + +The text will show but will be styled and centered. + +**BBcodes that DO WORK inside a Postbox:** + +- [b], [i], [u], [o], [s] _(bold has no visible effect)_ +- [url] +- [img] +- [audio] +- [video] + +Plus any plain text, including emoji + +If you are using Markdown formatting what you can and can’t put in a Postbox is similar, with the exception that (because of how Markdown is parsed into BBcode) you can’t have both a URL and an image in the same Postbox. You can however put inline code in a Postbox with Markdown where BBcode cannot. ## GENERAL NOTES: @@ -260,6 +346,7 @@ And then use it in your stylesheet like so: I figured out how the "Frio" theme worked by looking at the code. I may not be 100% correct about it since I did not create the theme. If someone knows more and I'm wrong about any of this please correct this document at https://gitlab.com/randompenguin/bookface ## CHANGELOG: +1.6 (25 Mar 2025) * Fixed HR rule on posts [Issue #13] * Fixed notifcation profile pics so they are round [Issue #14] * Fixed Post and Comment background colors [Issue #15] From 63c4dbb8c8b55b8cea91dd77a67535996d58ddef Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 2 Apr 2025 13:27:19 -0500 Subject: [PATCH 213/268] Fix for Issue #24 --- bookface_light.css | 38 ++++++++++++++++++++++++++++---------- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index 80e6d04..3365af7 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,8 +1,8 @@ /* Name : Bookface Light - Version : 1.6 + Version : 1.6.1 Licence : AGPL - Created on : 25 Mar 2025 + Created on : 2 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -1545,6 +1545,21 @@ div#back-to-top { .mail-list-outside-wrapper .contact-photo-wrapper img { border-radius: 100%; } + #message-new a::after { + content: var(--new-message-text); + } + #message-new a { + color: var(--link-color); + opacity: 1 !important; + padding: 10px; + border-radius: 8px; + } + #message-new:hover a, + #message-new:focus a { + color: white; + background-color: var(--link-color); + border-radius: 8px; + } .modal-backdrop { background-color: #fff; } @@ -2559,7 +2574,7 @@ body.mod-settings #delegation .contact-block-img { .coverphoto.canvas-slid { top: 55px; } - #message-new { + #message-new a { height: 50px; width: 50px; background-color: var(--link-color); @@ -2567,14 +2582,17 @@ body.mod-settings #delegation .contact-block-img { font-size: 24px; text-align: center; border-radius: 100%; + display: block; + color: white; + padding: 0; } - #message-new a { - color: white !important; - opacity: 1; - } - #message-new:hover, - #message-new:focus { - box-shadow: 0 0 100px rgba(0,0,0,.2); + #message-new a::after { + content: ''; + } + #message-new:hover a, + #message-new:focus a { + box-shadow: inset 0 0 100px rgba(0,0,0,.2); + border-radius: 100%; } .justified-gallery > a, .justified-gallery > div, From 6344c570638e45a1da386e67a6e89c96a913d732 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 2 Apr 2025 13:28:33 -0500 Subject: [PATCH 214/268] Fix for Issue #24 --- bookface_dark.css | 38 ++++++++++++++++++++++++++++---------- 1 file changed, 28 insertions(+), 10 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index dd4770f..3f00f61 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,8 +1,8 @@ /* Name : Bookface Dark - Version : 1.6 + Version : 1.6.1 Licence : AGPL - Created on : 25 Mar 2025 + Created on : 2 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -1545,6 +1545,21 @@ div#back-to-top { .mail-list-outside-wrapper .contact-photo-wrapper img { border-radius: 100%; } + #message-new a::after { + content: var(--new-message-text); + } + #message-new a { + color: var(--link-color); + opacity: 1 !important; + padding: 10px; + border-radius: 8px; + } + #message-new:hover a, + #message-new:focus a { + color: white; + background-color: var(--link-color); + border-radius: 8px; + } .modal-backdrop { background-color: #000; } @@ -2559,7 +2574,7 @@ body.mod-settings #delegation .contact-block-img { .coverphoto.canvas-slid { top: 55px; } - #message-new { + #message-new a { height: 50px; width: 50px; background-color: var(--link-color); @@ -2567,14 +2582,17 @@ body.mod-settings #delegation .contact-block-img { font-size: 24px; text-align: center; border-radius: 100%; + display: block; + color: white; + padding: 0; } - #message-new a { - color: white !important; - opacity: 1; - } - #message-new:hover, - #message-new:focus { - box-shadow: 0 0 100px rgba(0,0,0,.2); + #message-new a::after { + content: ''; + } + #message-new:hover a, + #message-new:focus a { + box-shadow: inset 0 0 100px rgba(255,255,255,.2); + border-radius: 100%; } .justified-gallery > a, .justified-gallery > div, From 04c5f25f9020e0b1f39c262158f1989cae4c29a7 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 2 Apr 2025 13:30:34 -0500 Subject: [PATCH 215/268] Fix for Issue #24 --- bookface_auto.css | 74 +++++++++++++++++++++++++++++++++++------------ 1 file changed, 55 insertions(+), 19 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index cb52a0b..8423052 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,8 +1,8 @@ /* Name : Bookface Auto Color Mode - Version : 1.6 + Version : 1.6.1 Licence : AGPL - Created on : 25 Mar 2025 + Created on : 2 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -1545,6 +1545,21 @@ div#back-to-top { .mail-list-outside-wrapper .contact-photo-wrapper img { border-radius: 100%; } + #message-new a::after { + content: var(--new-message-text); + } + #message-new a { + color: var(--link-color); + opacity: 1 !important; + padding: 10px; + border-radius: 8px; + } + #message-new:hover a, + #message-new:focus a { + color: white; + background-color: var(--link-color); + border-radius: 8px; + } .modal-backdrop { background-color: #fff; } @@ -2568,7 +2583,7 @@ body.mod-settings #delegation .contact-block-img { .coverphoto.canvas-slid { top: 55px; } - #message-new { + #message-new a { height: 50px; width: 50px; background-color: var(--link-color); @@ -2576,14 +2591,17 @@ body.mod-settings #delegation .contact-block-img { font-size: 24px; text-align: center; border-radius: 100%; + display: block; + color: white; + padding: 0; } - #message-new a { - color: white !important; - opacity: 1; - } - #message-new:hover, - #message-new:focus { - box-shadow: 0 0 100px rgba(0,0,0,.2); + #message-new a::after { + content: ''; + } + #message-new:hover a, + #message-new:focus a { + box-shadow: inset 0 0 100px rgba(0,0,0,.2); + border-radius: 100%; } .justified-gallery > a, .justified-gallery > div, @@ -4527,6 +4545,21 @@ div#back-to-top { .mail-list-outside-wrapper .contact-photo-wrapper img { border-radius: 100%; } + #message-new a::after { + content: var(--new-message-text); + } + #message-new a { + color: var(--link-color); + opacity: 1 !important; + padding: 10px; + border-radius: 8px; + } + #message-new:hover a, + #message-new:focus a { + color: white; + background-color: var(--link-color); + border-radius: 8px; + } .modal-backdrop { background-color: #000; } @@ -5529,7 +5562,7 @@ a.tag.label, .coverphoto.canvas-slid { top: 55px; } - #message-new { + #message-new a { height: 50px; width: 50px; background-color: var(--link-color); @@ -5537,15 +5570,18 @@ a.tag.label, font-size: 24px; text-align: center; border-radius: 100%; + display: block; + color: white; + padding: 0; } - #message-new a { - color: white !important; - opacity: 1; - } - #message-new:hover, - #message-new:focus { - box-shadow: 0 0 100px rgba(0,0,0,.2); - } + #message-new a::after { + content: ''; + } + #message-new:hover a, + #message-new:focus a { + box-shadow: inset 0 0 100px rgba(255,255,255,.2); + border-radius: 100%; + } .justified-gallery > a, .justified-gallery > div, .justified-gallery > figure{ From 9c7505a2e6c5d7da186a1f54c48b8c5193296ae3 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 2 Apr 2025 13:31:26 -0500 Subject: [PATCH 216/268] Updated Changelog --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 715d686..d1956a6 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.6 +Version 1.6.1 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -346,6 +346,8 @@ And then use it in your stylesheet like so: I figured out how the "Frio" theme worked by looking at the code. I may not be 100% correct about it since I did not create the theme. If someone knows more and I'm wrong about any of this please correct this document at https://gitlab.com/randompenguin/bookface ## CHANGELOG: +* Fixed "New Message" button not being obvious [Issue #24] + 1.6 (25 Mar 2025) * Fixed HR rule on posts [Issue #13] * Fixed notifcation profile pics so they are round [Issue #14] From b4ab1d85bb4716db9880ac15adb3aa7c351e52d2 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 2 Apr 2025 18:12:51 -0500 Subject: [PATCH 217/268] Added new message css var --- bookface_auto.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/bookface_auto.css b/bookface_auto.css index 8423052..98aa4e1 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -39,7 +39,8 @@ --attendmaybe-button-text: 'Maybe'; --add-photo-button-text: 'Add Photos'; --follow-button-text: 'Follow'; - --save-button-text: 'Save'; + --save-button-text: 'Save'; + --new-message-text: 'New Message'; } body { From b2e57ed9257ad3484e908c8eec47342f0f862645 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 2 Apr 2025 18:13:27 -0500 Subject: [PATCH 218/268] Added new message css var --- bookface_dark.css | 1 + 1 file changed, 1 insertion(+) diff --git a/bookface_dark.css b/bookface_dark.css index 3f00f61..3f67733 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -40,6 +40,7 @@ --add-photo-button-text: 'Add Photos'; --follow-button-text: 'Follow'; --save-button-text: 'Save'; + --new-message-text: 'New Message'; } body { From 9818d4938a6ed2c24bfe8008243ec99ceaefcac5 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 2 Apr 2025 18:14:01 -0500 Subject: [PATCH 219/268] Added new message css var --- bookface_light.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index 3365af7..64bfbfd 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -39,7 +39,8 @@ --attendmaybe-button-text: 'Maybe'; --add-photo-button-text: 'Add Photos'; --follow-button-text: 'Follow'; - --save-button-text: 'Save'; + --save-button-text: 'Save'; + --new-message-text: 'New Message'; } body { From 6845d5d3da8cd8c08d25ddea20a981ac9b365737 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 2 Apr 2025 18:19:05 -0500 Subject: [PATCH 221/268] Updated customization instructions --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index d1956a6..a51bcd3 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,7 @@ Bookface uses a number of pseudo-elements to label buttons in the Frio theme. Yo --add-photo-button-text: 'Add Photos'; --follow-button-text: 'Follow'; --save-button-text: 'Save'; + --new-message-text: 'New Message'; ### CUSTOMIZATION From 6413ddd91b513e7773461fb93c7843f475393481 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Fri, 4 Apr 2025 16:09:28 -0500 Subject: [PATCH 222/268] Fix for Issue #26 --- bookface_light.css | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index 64bfbfd..db0c07b 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,8 +1,8 @@ /* Name : Bookface Light - Version : 1.6.1 + Version : 1.6.2 Licence : AGPL - Created on : 2 APR 2025 + Created on : 4 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -2071,6 +2071,13 @@ body.mod-settings #delegation .contact-block-img { body.mod-profile .vcard + #sidebar-photos-albums::before { content: ''; } + + /* This is for old browsers that do not understand either @supports or :has() */ + body.mod-contact aside, + body.mod-photos aside, + body.mod-profile aside { + position: absolute !important; + } /* only seen on your own Contacts Page */ @supports not selector(:has(*)){ body.mod-contact #peoplefind-sidebar::before { @@ -2094,6 +2101,12 @@ body.mod-settings #delegation .contact-block-img { } } @supports selector(:has(*)){ + /* for browsers that DO understand both @supports and :has() */ + body.mod-contact aside, + body.mod-photos aside, + body.mod-profile aside { + position: fixed !important; + } body.mod-contact aside:has(#peoplefind-sidebar) + #content { margin-top: 0; } From b82887ea9981e445bcb36b93089e1eaf884ac358 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Fri, 4 Apr 2025 16:11:17 -0500 Subject: [PATCH 223/268] Fix for Issue #26 --- bookface_dark.css | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 3f67733..d5ba019 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,8 +1,8 @@ /* Name : Bookface Dark - Version : 1.6.1 + Version : 1.6.2 Licence : AGPL - Created on : 2 APR 2025 + Created on : 4 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -2071,6 +2071,13 @@ body.mod-settings #delegation .contact-block-img { body.mod-profile .vcard + #sidebar-photos-albums::before { content: ''; } + + /* This is for old browsers that do not understand either @supports or :has() */ + body.mod-contact aside, + body.mod-photos aside, + body.mod-profile aside { + position: absolute !important; + } /* only seen on your own Contacts Page */ @supports not selector(:has(*)){ body.mod-contact #peoplefind-sidebar::before { @@ -2094,6 +2101,12 @@ body.mod-settings #delegation .contact-block-img { } } @supports selector(:has(*)){ + /* for browsers that DO understand both @supports and :has() */ + body.mod-contact aside, + body.mod-photos aside, + body.mod-profile aside { + position: fixed !important; + } body.mod-contact aside:has(#peoplefind-sidebar) + #content { margin-top: 0; } From 82054decb846fb93fc1f41c59243b31f1d82854c Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Fri, 4 Apr 2025 16:12:40 -0500 Subject: [PATCH 224/268] Fix for Issue #26 --- bookface_auto.css | 30 ++++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 98aa4e1..480cc6a 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,8 +1,8 @@ /* Name : Bookface Auto Color Mode - Version : 1.6.1 + Version : 1.6.2 Licence : AGPL - Created on : 2 APR 2025 + Created on : 4 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -2080,6 +2080,13 @@ body.mod-settings #delegation .contact-block-img { body.mod-profile .vcard + #sidebar-photos-albums::before { content: ''; } + + /* This is for old browsers that do not understand either @supports or :has() */ + body.mod-contact aside, + body.mod-photos aside, + body.mod-profile aside { + position: absolute !important; + } /* only seen on your own Contacts Page */ @supports not selector(:has(*)){ body.mod-contact #peoplefind-sidebar::before { @@ -2103,6 +2110,12 @@ body.mod-settings #delegation .contact-block-img { } } @supports selector(:has(*)){ + /* for browsers that DO understand both @supports and :has() */ + body.mod-contact aside, + body.mod-photos aside, + body.mod-profile aside { + position: fixed !important; + } body.mod-contact aside:has(#peoplefind-sidebar) + #content { margin-top: 0; } @@ -5059,6 +5072,13 @@ a.tag.label, body.mod-profile .vcard + #sidebar-photos-albums::before { content: ''; } + + /* This is for old browsers that do not understand either @supports or :has() */ + body.mod-contact aside, + body.mod-photos aside, + body.mod-profile aside { + position: absolute !important; + } /* only seen on your own Contacts Page */ @supports not selector(:has(*)){ body.mod-contact #peoplefind-sidebar::before { @@ -5082,6 +5102,12 @@ a.tag.label, } } @supports selector(:has(*)){ + /* for browsers that DO understand both @supports and :has() */ + body.mod-contact aside, + body.mod-photos aside, + body.mod-profile aside { + position: fixed !important; + } body.mod-contact aside:has(#peoplefind-sidebar) + #content { margin-top: 0; } From b71f3228401f06c276bea351286cfe2c972a4e33 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Fri, 4 Apr 2025 16:17:07 -0500 Subject: [PATCH 225/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index a51bcd3..9cfc993 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.6.1 +Version 1.6.2 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -348,6 +348,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 ## CHANGELOG: * Fixed "New Message" button not being obvious [Issue #24] +* Fixed Profile Pics and Cover Photos not working in old iOS browsers [Issue #26] 1.6 (25 Mar 2025) * Fixed HR rule on posts [Issue #13] From 560db120b1e4a4e5431a13fe7b6d6f5579b3d224 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 26 Apr 2025 13:43:26 -0500 Subject: [PATCH 226/268] Moved Postbox styles to end of stylesheet --- bookface_auto.css | 364 ++++++++++++++++------------------------------ 1 file changed, 122 insertions(+), 242 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 480cc6a..4836c47 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,6 +1,6 @@ /* Name : Bookface Auto Color Mode - Version : 1.6.2 + Version : 1.6.3 Licence : AGPL Created on : 4 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -1827,126 +1827,6 @@ body.mod-delegation .identity-match-photo img, body.mod-settings #delegation .contact-block-img { border-radius: 100% !important; } - /* Post Backgrounds - ================ - Solid and Gradient backgrounds with larger text - to grab reader attention - */ - [class^="postbox-"]{ - display: table-cell; - height: 350px; - width: 1000px; - max-width: 100%; - vertical-align: middle; - font-family: Arial, sans-serif; - font-size: 30px; - font-weight: 700; - line-height: 35px; - text-align: center; - padding: 50px 30px; - box-sizing: border-box; - } - [class^="postbox-"] a { - color: inherit !important; - } - [class^="postbox-"]:hover a, - [class^="postbox-"]:focus a { - text-decoration: underline; - } - /* Solid Color Backgrounds */ - .postbox-black { - background-color: black; - color: white; - } - .postbox-red { - background-color: rgb(226, 1, 59); - color: white; - } - .postbox-green { - background-color: rgb(38, 146, 127); - color: white; - } - .postbox-blue { - background-color: rgb(32, 136, 175); - color: black; - } - .postbox-orange { - background-color: rgb(255, 99, 35); - color: black; - } - .postbox-purple { - background-color: rgb(115, 33, 173); - color: white; - } - .postbox-forest { - background-color: rgb(22, 83, 72); - color: white; - } - .postbox-ocean { - background-color: rgb(36, 55, 98); - color: white; - } - .postbox-pink { - background-color: rgb(243, 83, 105); - color: black; - } - .postbox-salmon { - background-color: rgb(250, 128, 114); - color: black; - } - /* Gradient Backgrounds */ - .postbox-darkgray { - background-image: linear-gradient(135deg, rgb(119, 125, 136), rgb(79, 87, 102)); - color: white; - } - .postbox-minty { - background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); - color: black; - } - .postbox-mintgray { - background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); - color: black; - } - .postbox-redblue { - background-image: linear-gradient(45deg, rgb(255, 0, 71), rgb(44, 52, 199)); - color: white; - } - .postbox-violets { - background-image: linear-gradient(45deg, rgb(93, 63, 218), rgb(252, 54, 253)); - color: white; - } - .postbox-grayblack { - background-image: linear-gradient(45deg, rgb(93, 99, 116), rgb(22, 24, 29)); - color: white; - } - .postbox-tealblue { - background-image: linear-gradient(to bottom, #4bdfdf 0%,#207cca 50%,#19094a 100%); - color: white; - } - .postbox-greengray { - background-image: linear-gradient(to right, #c8dbbd 0%,#dedede 100%); - color: black; - } - .postbox-tealgray { - background-image: linear-gradient(to right, #8dcad0 0%,#dedede 100%); - color: black; - } - .postbox-bluegray { - background-image: linear-gradient(to right, #94bbeb 0%,#dedede 100%); - color: black; - } - .postbox-lavendergray { - background-image: linear-gradient(to right, #cfbfda 0%,#dedede 100%); - color: black; - } - .postbox-sunset { - background-image: linear-gradient(to bottom, #fecf41 0%,#fd7440 50%,#b623b1 100%); - color: white; - } - .postbox-sherbert { - background-image: linear-gradient(45deg, #fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%); - color: black; - } /* Greater than Full-HD Width =========================== */ @@ -4816,126 +4696,6 @@ a.tag.label, color: white; border: none; } - /* Post Backgrounds - ================ - Solid and Gradient backgrounds with larger text - to grab reader attention - */ - [class^="postbox-"]{ - display: table-cell; - height: 350px; - width: 1000px; - max-width: 100%; - vertical-align: middle; - font-family: Arial, sans-serif; - font-size: 30px; - font-weight: 700; - line-height: 35px; - text-align: center; - padding: 50px 30px; - box-sizing: border-box; - } - [class^="postbox-"] a { - color: inherit !important; - } - [class^="postbox-"]:hover a, - [class^="postbox-"]:focus a { - text-decoration: underline; - } - /* Solid Color Backgrounds */ - .postbox-black { - background-color: black; - color: white; - } - .postbox-red { - background-color: rgb(226, 1, 59); - color: white; - } - .postbox-green { - background-color: rgb(38, 146, 127); - color: white; - } - .postbox-blue { - background-color: rgb(32, 136, 175); - color: black; - } - .postbox-orange { - background-color: rgb(255, 99, 35); - color: black; - } - .postbox-purple { - background-color: rgb(115, 33, 173); - color: white; - } - .postbox-forest { - background-color: rgb(22, 83, 72); - color: white; - } - .postbox-ocean { - background-color: rgb(36, 55, 98); - color: white; - } - .postbox-pink { - background-color: rgb(243, 83, 105); - color: black; - } - .postbox-salmon { - background-color: rgb(250, 128, 114); - color: black; - } - /* Gradient Backgrounds */ - .postbox-darkgray { - background-image: linear-gradient(135deg, rgb(119, 125, 136), rgb(79, 87, 102)); - color: white; - } - .postbox-minty { - background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); - color: black; - } - .postbox-mintgray { - background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); - color: black; - } - .postbox-redblue { - background-image: linear-gradient(45deg, rgb(255, 0, 71), rgb(44, 52, 199)); - color: white; - } - .postbox-violets { - background-image: linear-gradient(45deg, rgb(93, 63, 218), rgb(252, 54, 253)); - color: white; - } - .postbox-grayblack { - background-image: linear-gradient(45deg, rgb(93, 99, 116), rgb(22, 24, 29)); - color: white; - } - .postbox-tealblue { - background-image: linear-gradient(to bottom, #4bdfdf 0%,#207cca 50%,#19094a 100%); - color: white; - } - .postbox-greengray { - background-image: linear-gradient(to right, #c8dbbd 0%,#dedede 100%); - color: black; - } - .postbox-tealgray { - background-image: linear-gradient(to right, #8dcad0 0%,#dedede 100%); - color: black; - } - .postbox-bluegray { - background-image: linear-gradient(to right, #94bbeb 0%,#dedede 100%); - color: black; - } - .postbox-lavendergray { - background-image: linear-gradient(to right, #cfbfda 0%,#dedede 100%); - color: black; - } - .postbox-sunset { - background-image: linear-gradient(to bottom, #fecf41 0%,#fd7440 50%,#b623b1 100%); - color: white; - } - .postbox-sherbert { - background-image: linear-gradient(45deg, #fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%); - color: black; - } /* Greater than Full-HD Width =========================== */ @@ -5967,4 +5727,124 @@ body.mod-home { .mod-home #nav-about .fa-info { line-height: 32px; } - } \ No newline at end of file + } + /* Post Backgrounds + ================ + Solid and Gradient backgrounds with larger text + to grab reader attention + */ + [class^="postbox-"]{ + display: table-cell; + height: 350px; + width: 1000px; + max-width: 100%; + vertical-align: middle; + font-family: Arial, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 35px; + text-align: center; + padding: 50px 30px; + box-sizing: border-box; + } + [class^="postbox-"] a { + color: inherit !important; + } + [class^="postbox-"]:hover a, + [class^="postbox-"]:focus a { + text-decoration: underline; + } + /* Solid Color Backgrounds */ + .postbox-black { + background-color: black; + color: white; + } + .postbox-red { + background-color: rgb(226, 1, 59); + color: white; + } + .postbox-green { + background-color: rgb(38, 146, 127); + color: white; + } + .postbox-blue { + background-color: rgb(32, 136, 175); + color: black; + } + .postbox-orange { + background-color: rgb(255, 99, 35); + color: black; + } + .postbox-purple { + background-color: rgb(115, 33, 173); + color: white; + } + .postbox-forest { + background-color: rgb(22, 83, 72); + color: white; + } + .postbox-ocean { + background-color: rgb(36, 55, 98); + color: white; + } + .postbox-pink { + background-color: rgb(243, 83, 105); + color: black; + } + .postbox-salmon { + background-color: rgb(250, 128, 114); + color: black; + } + /* Gradient Backgrounds */ + .postbox-darkgray { + background-image: linear-gradient(135deg, rgb(119, 125, 136), rgb(79, 87, 102)); + color: white; + } + .postbox-minty { + background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); + color: black; + } + .postbox-mintgray { + background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); + color: black; + } + .postbox-redblue { + background-image: linear-gradient(45deg, rgb(255, 0, 71), rgb(44, 52, 199)); + color: white; + } + .postbox-violets { + background-image: linear-gradient(45deg, rgb(93, 63, 218), rgb(252, 54, 253)); + color: white; + } + .postbox-grayblack { + background-image: linear-gradient(45deg, rgb(93, 99, 116), rgb(22, 24, 29)); + color: white; + } + .postbox-tealblue { + background-image: linear-gradient(to bottom, #4bdfdf 0%,#207cca 50%,#19094a 100%); + color: white; + } + .postbox-greengray { + background-image: linear-gradient(to right, #c8dbbd 0%,#dedede 100%); + color: black; + } + .postbox-tealgray { + background-image: linear-gradient(to right, #8dcad0 0%,#dedede 100%); + color: black; + } + .postbox-bluegray { + background-image: linear-gradient(to right, #94bbeb 0%,#dedede 100%); + color: black; + } + .postbox-lavendergray { + background-image: linear-gradient(to right, #cfbfda 0%,#dedede 100%); + color: black; + } + .postbox-sunset { + background-image: linear-gradient(to bottom, #fecf41 0%,#fd7440 50%,#b623b1 100%); + color: white; + } + .postbox-sherbert { + background-image: linear-gradient(45deg, #fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%); + color: black; + } \ No newline at end of file From 8f27f736a51cafb487966252fbff9143f077c723 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 26 Apr 2025 13:44:39 -0500 Subject: [PATCH 227/268] Moved Postbox styles to end of stylesheet --- bookface_dark.css | 244 +++++++++++++++++++++++----------------------- 1 file changed, 122 insertions(+), 122 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index d5ba019..4abc10e 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,6 +1,6 @@ /* Name : Bookface Dark - Version : 1.6.2 + Version : 1.6.3 Licence : AGPL Created on : 4 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -1818,126 +1818,6 @@ body.mod-delegation .identity-match-photo img, body.mod-settings #delegation .contact-block-img { border-radius: 100% !important; } - /* Post Backgrounds - ================ - Solid and Gradient backgrounds with larger text - to grab reader attention - */ - [class^="postbox-"]{ - display: table-cell; - height: 350px; - width: 1000px; - max-width: 100%; - vertical-align: middle; - font-family: Arial, sans-serif; - font-size: 30px; - font-weight: 700; - line-height: 35px; - text-align: center; - padding: 50px 30px; - box-sizing: border-box; - } - [class^="postbox-"] a { - color: inherit !important; - } - [class^="postbox-"]:hover a, - [class^="postbox-"]:focus a { - text-decoration: underline; - } - /* Solid Color Backgrounds */ - .postbox-black { - background-color: black; - color: white; - } - .postbox-red { - background-color: rgb(226, 1, 59); - color: white; - } - .postbox-green { - background-color: rgb(38, 146, 127); - color: white; - } - .postbox-blue { - background-color: rgb(32, 136, 175); - color: black; - } - .postbox-orange { - background-color: rgb(255, 99, 35); - color: black; - } - .postbox-purple { - background-color: rgb(115, 33, 173); - color: white; - } - .postbox-forest { - background-color: rgb(22, 83, 72); - color: white; - } - .postbox-ocean { - background-color: rgb(36, 55, 98); - color: white; - } - .postbox-pink { - background-color: rgb(243, 83, 105); - color: black; - } - .postbox-salmon { - background-color: rgb(250, 128, 114); - color: black; - } - /* Gradient Backgrounds */ - .postbox-darkgray { - background-image: linear-gradient(135deg, rgb(119, 125, 136), rgb(79, 87, 102)); - color: white; - } - .postbox-minty { - background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); - color: black; - } - .postbox-mintgray { - background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); - color: black; - } - .postbox-redblue { - background-image: linear-gradient(45deg, rgb(255, 0, 71), rgb(44, 52, 199)); - color: white; - } - .postbox-violets { - background-image: linear-gradient(45deg, rgb(93, 63, 218), rgb(252, 54, 253)); - color: white; - } - .postbox-grayblack { - background-image: linear-gradient(45deg, rgb(93, 99, 116), rgb(22, 24, 29)); - color: white; - } - .postbox-tealblue { - background-image: linear-gradient(to bottom, #4bdfdf 0%,#207cca 50%,#19094a 100%); - color: white; - } - .postbox-greengray { - background-image: linear-gradient(to right, #c8dbbd 0%,#dedede 100%); - color: black; - } - .postbox-tealgray { - background-image: linear-gradient(to right, #8dcad0 0%,#dedede 100%); - color: black; - } - .postbox-bluegray { - background-image: linear-gradient(to right, #94bbeb 0%,#dedede 100%); - color: black; - } - .postbox-lavendergray { - background-image: linear-gradient(to right, #cfbfda 0%,#dedede 100%); - color: black; - } - .postbox-sunset { - background-image: linear-gradient(to bottom, #fecf41 0%,#fd7440 50%,#b623b1 100%); - color: white; - } - .postbox-sherbert { - background-image: linear-gradient(45deg, #fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%); - color: black; - } /* Greater than Full-HD Width =========================== */ @@ -2965,4 +2845,124 @@ body.mod-home { .mod-home #nav-about .fa-info { line-height: 32px; } - } \ No newline at end of file + } + /* Post Backgrounds + ================ + Solid and Gradient backgrounds with larger text + to grab reader attention + */ + [class^="postbox-"]{ + display: table-cell; + height: 350px; + width: 1000px; + max-width: 100%; + vertical-align: middle; + font-family: Arial, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 35px; + text-align: center; + padding: 50px 30px; + box-sizing: border-box; + } + [class^="postbox-"] a { + color: inherit !important; + } + [class^="postbox-"]:hover a, + [class^="postbox-"]:focus a { + text-decoration: underline; + } + /* Solid Color Backgrounds */ + .postbox-black { + background-color: black; + color: white; + } + .postbox-red { + background-color: rgb(226, 1, 59); + color: white; + } + .postbox-green { + background-color: rgb(38, 146, 127); + color: white; + } + .postbox-blue { + background-color: rgb(32, 136, 175); + color: black; + } + .postbox-orange { + background-color: rgb(255, 99, 35); + color: black; + } + .postbox-purple { + background-color: rgb(115, 33, 173); + color: white; + } + .postbox-forest { + background-color: rgb(22, 83, 72); + color: white; + } + .postbox-ocean { + background-color: rgb(36, 55, 98); + color: white; + } + .postbox-pink { + background-color: rgb(243, 83, 105); + color: black; + } + .postbox-salmon { + background-color: rgb(250, 128, 114); + color: black; + } + /* Gradient Backgrounds */ + .postbox-darkgray { + background-image: linear-gradient(135deg, rgb(119, 125, 136), rgb(79, 87, 102)); + color: white; + } + .postbox-minty { + background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); + color: black; + } + .postbox-mintgray { + background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); + color: black; + } + .postbox-redblue { + background-image: linear-gradient(45deg, rgb(255, 0, 71), rgb(44, 52, 199)); + color: white; + } + .postbox-violets { + background-image: linear-gradient(45deg, rgb(93, 63, 218), rgb(252, 54, 253)); + color: white; + } + .postbox-grayblack { + background-image: linear-gradient(45deg, rgb(93, 99, 116), rgb(22, 24, 29)); + color: white; + } + .postbox-tealblue { + background-image: linear-gradient(to bottom, #4bdfdf 0%,#207cca 50%,#19094a 100%); + color: white; + } + .postbox-greengray { + background-image: linear-gradient(to right, #c8dbbd 0%,#dedede 100%); + color: black; + } + .postbox-tealgray { + background-image: linear-gradient(to right, #8dcad0 0%,#dedede 100%); + color: black; + } + .postbox-bluegray { + background-image: linear-gradient(to right, #94bbeb 0%,#dedede 100%); + color: black; + } + .postbox-lavendergray { + background-image: linear-gradient(to right, #cfbfda 0%,#dedede 100%); + color: black; + } + .postbox-sunset { + background-image: linear-gradient(to bottom, #fecf41 0%,#fd7440 50%,#b623b1 100%); + color: white; + } + .postbox-sherbert { + background-image: linear-gradient(45deg, #fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%); + color: black; + } \ No newline at end of file From 443ba25847e48bcacc82dcf178c54c90b2c3852a Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 26 Apr 2025 13:45:57 -0500 Subject: [PATCH 228/268] Moved Postbox styles to end of stylesheet --- bookface_light.css | 246 ++++++++++++++++++++++----------------------- 1 file changed, 123 insertions(+), 123 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index db0c07b..0780a14 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,8 +1,8 @@ /* Name : Bookface Light - Version : 1.6.2 + Version : 1.6.3 Licence : AGPL - Created on : 4 APR 2025 + Created on : 26 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -1818,126 +1818,6 @@ body.mod-delegation .identity-match-photo img, body.mod-settings #delegation .contact-block-img { border-radius: 100% !important; } - /* Post Backgrounds - ================ - Solid and Gradient backgrounds with larger text - to grab reader attention - */ - [class^="postbox-"]{ - display: table-cell; - height: 350px; - width: 1000px; - max-width: 100%; - vertical-align: middle; - font-family: Arial, sans-serif; - font-size: 30px; - font-weight: 700; - line-height: 35px; - text-align: center; - padding: 50px 30px; - box-sizing: border-box; - } - [class^="postbox-"] a { - color: inherit !important; - } - [class^="postbox-"]:hover a, - [class^="postbox-"]:focus a { - text-decoration: underline; - } - /* Solid Color Backgrounds */ - .postbox-black { - background-color: black; - color: white; - } - .postbox-red { - background-color: rgb(226, 1, 59); - color: white; - } - .postbox-green { - background-color: rgb(38, 146, 127); - color: white; - } - .postbox-blue { - background-color: rgb(32, 136, 175); - color: black; - } - .postbox-orange { - background-color: rgb(255, 99, 35); - color: black; - } - .postbox-purple { - background-color: rgb(115, 33, 173); - color: white; - } - .postbox-forest { - background-color: rgb(22, 83, 72); - color: white; - } - .postbox-ocean { - background-color: rgb(36, 55, 98); - color: white; - } - .postbox-pink { - background-color: rgb(243, 83, 105); - color: black; - } - .postbox-salmon { - background-color: rgb(250, 128, 114); - color: black; - } - /* Gradient Backgrounds */ - .postbox-darkgray { - background-image: linear-gradient(135deg, rgb(119, 125, 136), rgb(79, 87, 102)); - color: white; - } - .postbox-minty { - background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); - color: black; - } - .postbox-mintgray { - background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); - color: black; - } - .postbox-redblue { - background-image: linear-gradient(45deg, rgb(255, 0, 71), rgb(44, 52, 199)); - color: white; - } - .postbox-violets { - background-image: linear-gradient(45deg, rgb(93, 63, 218), rgb(252, 54, 253)); - color: white; - } - .postbox-grayblack { - background-image: linear-gradient(45deg, rgb(93, 99, 116), rgb(22, 24, 29)); - color: white; - } - .postbox-tealblue { - background-image: linear-gradient(to bottom, #4bdfdf 0%,#207cca 50%,#19094a 100%); - color: white; - } - .postbox-greengray { - background-image: linear-gradient(to right, #c8dbbd 0%,#dedede 100%); - color: black; - } - .postbox-tealgray { - background-image: linear-gradient(to right, #8dcad0 0%,#dedede 100%); - color: black; - } - .postbox-bluegray { - background-image: linear-gradient(to right, #94bbeb 0%,#dedede 100%); - color: black; - } - .postbox-lavendergray { - background-image: linear-gradient(to right, #cfbfda 0%,#dedede 100%); - color: black; - } - .postbox-sunset { - background-image: linear-gradient(to bottom, #fecf41 0%,#fd7440 50%,#b623b1 100%); - color: white; - } - .postbox-sherbert { - background-image: linear-gradient(45deg, #fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%); - color: black; - } /* Greater than Full-HD Width =========================== */ @@ -2965,4 +2845,124 @@ body.mod-home { .mod-home #nav-about .fa-info { line-height: 32px; } - } \ No newline at end of file + } + /* Post Backgrounds + ================ + Solid and Gradient backgrounds with larger text + to grab reader attention + */ + [class^="postbox-"]{ + display: table-cell; + height: 350px; + width: 1000px; + max-width: 100%; + vertical-align: middle; + font-family: Arial, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 35px; + text-align: center; + padding: 50px 30px; + box-sizing: border-box; + } + [class^="postbox-"] a { + color: inherit !important; + } + [class^="postbox-"]:hover a, + [class^="postbox-"]:focus a { + text-decoration: underline; + } + /* Solid Color Backgrounds */ + .postbox-black { + background-color: black; + color: white; + } + .postbox-red { + background-color: rgb(226, 1, 59); + color: white; + } + .postbox-green { + background-color: rgb(38, 146, 127); + color: white; + } + .postbox-blue { + background-color: rgb(32, 136, 175); + color: black; + } + .postbox-orange { + background-color: rgb(255, 99, 35); + color: black; + } + .postbox-purple { + background-color: rgb(115, 33, 173); + color: white; + } + .postbox-forest { + background-color: rgb(22, 83, 72); + color: white; + } + .postbox-ocean { + background-color: rgb(36, 55, 98); + color: white; + } + .postbox-pink { + background-color: rgb(243, 83, 105); + color: black; + } + .postbox-salmon { + background-color: rgb(250, 128, 114); + color: black; + } + /* Gradient Backgrounds */ + .postbox-darkgray { + background-image: linear-gradient(135deg, rgb(119, 125, 136), rgb(79, 87, 102)); + color: white; + } + .postbox-minty { + background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); + color: black; + } + .postbox-mintgray { + background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); + color: black; + } + .postbox-redblue { + background-image: linear-gradient(45deg, rgb(255, 0, 71), rgb(44, 52, 199)); + color: white; + } + .postbox-violets { + background-image: linear-gradient(45deg, rgb(93, 63, 218), rgb(252, 54, 253)); + color: white; + } + .postbox-grayblack { + background-image: linear-gradient(45deg, rgb(93, 99, 116), rgb(22, 24, 29)); + color: white; + } + .postbox-tealblue { + background-image: linear-gradient(to bottom, #4bdfdf 0%,#207cca 50%,#19094a 100%); + color: white; + } + .postbox-greengray { + background-image: linear-gradient(to right, #c8dbbd 0%,#dedede 100%); + color: black; + } + .postbox-tealgray { + background-image: linear-gradient(to right, #8dcad0 0%,#dedede 100%); + color: black; + } + .postbox-bluegray { + background-image: linear-gradient(to right, #94bbeb 0%,#dedede 100%); + color: black; + } + .postbox-lavendergray { + background-image: linear-gradient(to right, #cfbfda 0%,#dedede 100%); + color: black; + } + .postbox-sunset { + background-image: linear-gradient(to bottom, #fecf41 0%,#fd7440 50%,#b623b1 100%); + color: white; + } + .postbox-sherbert { + background-image: linear-gradient(45deg, #fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%); + color: black; + } \ No newline at end of file From 97d00a1a6663dc6c16d8caea611f73b57e3dcfc9 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 26 Apr 2025 13:47:24 -0500 Subject: [PATCH 229/268] updated change date --- bookface_auto.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_auto.css b/bookface_auto.css index 4836c47..ad941ca 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -2,7 +2,7 @@ Name : Bookface Auto Color Mode Version : 1.6.3 Licence : AGPL - Created on : 4 APR 2025 + Created on : 26 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ From 44211a53a4d144010da3f6b2d90596f92aea0afa Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 26 Apr 2025 13:47:47 -0500 Subject: [PATCH 230/268] updated change date --- bookface_dark.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_dark.css b/bookface_dark.css index 4abc10e..9ab41aa 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -2,7 +2,7 @@ Name : Bookface Dark Version : 1.6.3 Licence : AGPL - Created on : 4 APR 2025 + Created on : 26 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ From 1e80b613f0311beb157e86483f1b1b24443b0e50 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 26 Apr 2025 13:49:58 -0500 Subject: [PATCH 231/268] Minified Postbox CSS --- bookface_auto.css | 124 ++-------------------------------------------- 1 file changed, 3 insertions(+), 121 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index ad941ca..1b1fc45 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,6 +1,6 @@ /* Name : Bookface Auto Color Mode - Version : 1.6.3 + Version : 1.6.4 Licence : AGPL Created on : 26 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -5728,123 +5728,5 @@ body.mod-home { line-height: 32px; } } - /* Post Backgrounds - ================ - Solid and Gradient backgrounds with larger text - to grab reader attention - */ - [class^="postbox-"]{ - display: table-cell; - height: 350px; - width: 1000px; - max-width: 100%; - vertical-align: middle; - font-family: Arial, sans-serif; - font-size: 30px; - font-weight: 700; - line-height: 35px; - text-align: center; - padding: 50px 30px; - box-sizing: border-box; - } - [class^="postbox-"] a { - color: inherit !important; - } - [class^="postbox-"]:hover a, - [class^="postbox-"]:focus a { - text-decoration: underline; - } - /* Solid Color Backgrounds */ - .postbox-black { - background-color: black; - color: white; - } - .postbox-red { - background-color: rgb(226, 1, 59); - color: white; - } - .postbox-green { - background-color: rgb(38, 146, 127); - color: white; - } - .postbox-blue { - background-color: rgb(32, 136, 175); - color: black; - } - .postbox-orange { - background-color: rgb(255, 99, 35); - color: black; - } - .postbox-purple { - background-color: rgb(115, 33, 173); - color: white; - } - .postbox-forest { - background-color: rgb(22, 83, 72); - color: white; - } - .postbox-ocean { - background-color: rgb(36, 55, 98); - color: white; - } - .postbox-pink { - background-color: rgb(243, 83, 105); - color: black; - } - .postbox-salmon { - background-color: rgb(250, 128, 114); - color: black; - } - /* Gradient Backgrounds */ - .postbox-darkgray { - background-image: linear-gradient(135deg, rgb(119, 125, 136), rgb(79, 87, 102)); - color: white; - } - .postbox-minty { - background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); - color: black; - } - .postbox-mintgray { - background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); - color: black; - } - .postbox-redblue { - background-image: linear-gradient(45deg, rgb(255, 0, 71), rgb(44, 52, 199)); - color: white; - } - .postbox-violets { - background-image: linear-gradient(45deg, rgb(93, 63, 218), rgb(252, 54, 253)); - color: white; - } - .postbox-grayblack { - background-image: linear-gradient(45deg, rgb(93, 99, 116), rgb(22, 24, 29)); - color: white; - } - .postbox-tealblue { - background-image: linear-gradient(to bottom, #4bdfdf 0%,#207cca 50%,#19094a 100%); - color: white; - } - .postbox-greengray { - background-image: linear-gradient(to right, #c8dbbd 0%,#dedede 100%); - color: black; - } - .postbox-tealgray { - background-image: linear-gradient(to right, #8dcad0 0%,#dedede 100%); - color: black; - } - .postbox-bluegray { - background-image: linear-gradient(to right, #94bbeb 0%,#dedede 100%); - color: black; - } - .postbox-lavendergray { - background-image: linear-gradient(to right, #cfbfda 0%,#dedede 100%); - color: black; - } - .postbox-sunset { - background-image: linear-gradient(to bottom, #fecf41 0%,#fd7440 50%,#b623b1 100%); - color: white; - } - .postbox-sherbert { - background-image: linear-gradient(45deg, #fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%); - color: black; - } \ No newline at end of file +/* Post Backgrounds */ +[class^="postbox-"]{display:table-cell;height:350px;width:1000px;max-width:100%;vertical-align:middle;font-family:Arial,sans-serif;font-size:30px;font-weight:700;line-height:35px;text-align:center;padding:50px 30px;box-sizing:border-box}[class^="postbox-"] a{color:inherit!important}[class^="postbox-"]:hover a,[class^="postbox-"]:focus a{text-decoration:underline}.postbox-black{background-color:#000;color:#fff}.postbox-red{background-color:#e2013b;color:#fff}.postbox-green{background-color:#26927f;color:#fff}.postbox-blue{background-color:#2088af;color:#000}.postbox-orange{background-color:#ff6323;color:#000}.postbox-purple{background-color:#7321ad;color:#fff}.postbox-forest{background-color:#165348;color:#fff}.postbox-ocean{background-color:#243762;color:#fff}.postbox-pink{background-color:#f35369;color:#000}.postbox-salmon{background-color:salmon;color:#000}.postbox-darkgray{background-image:linear-gradient(135deg,#777d88,#4f5766);color:#fff}.postbox-minty{background-image:linear-gradient(135deg,#8fc7ad,#48e5a9);color:#000}.postbox-mintgray{background-image:linear-gradient(135deg,#8fc7ad,#48e5a9);color:#000}.postbox-redblue{background-image:linear-gradient(45deg,#ff0047,#2c34c7);color:#fff}.postbox-violets{background-image:linear-gradient(45deg,#5d3fda,#fc36fd);color:#fff}.postbox-grayblack{background-image:linear-gradient(45deg,#5d6374,#16181d);color:#fff}.postbox-tealblue{background-image:linear-gradient(to bottom,#4bdfdf 0%,#207cca 50%,#19094a 100%);color:#fff}.postbox-greengray{background-image:linear-gradient(to right,#c8dbbd 0%,#dedede 100%);color:#000}.postbox-tealgray{background-image:linear-gradient(to right,#8dcad0 0%,#dedede 100%);color:#000}.postbox-bluegray{background-image:linear-gradient(to right,#94bbeb 0%,#dedede 100%);color:#000}.postbox-lavendergray{background-image:linear-gradient(to right,#cfbfda 0%,#dedede 100%);color:#000}.postbox-sunset{background-image:linear-gradient(to bottom,#fecf41 0%,#fd7440 50%,#b623b1 100%);color:#fff}.postbox-sherbert{background-image:linear-gradient(45deg,#fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%);color:#000} \ No newline at end of file From cdae9e75d047834f2e3fa94e86643474b4647715 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 26 Apr 2025 13:50:55 -0500 Subject: [PATCH 232/268] Minified Postbox CSS --- bookface_dark.css | 124 ++-------------------------------------------- 1 file changed, 3 insertions(+), 121 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 9ab41aa..23e9938 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,6 +1,6 @@ /* Name : Bookface Dark - Version : 1.6.3 + Version : 1.6.4 Licence : AGPL Created on : 26 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -2846,123 +2846,5 @@ body.mod-home { line-height: 32px; } } - /* Post Backgrounds - ================ - Solid and Gradient backgrounds with larger text - to grab reader attention - */ - [class^="postbox-"]{ - display: table-cell; - height: 350px; - width: 1000px; - max-width: 100%; - vertical-align: middle; - font-family: Arial, sans-serif; - font-size: 30px; - font-weight: 700; - line-height: 35px; - text-align: center; - padding: 50px 30px; - box-sizing: border-box; - } - [class^="postbox-"] a { - color: inherit !important; - } - [class^="postbox-"]:hover a, - [class^="postbox-"]:focus a { - text-decoration: underline; - } - /* Solid Color Backgrounds */ - .postbox-black { - background-color: black; - color: white; - } - .postbox-red { - background-color: rgb(226, 1, 59); - color: white; - } - .postbox-green { - background-color: rgb(38, 146, 127); - color: white; - } - .postbox-blue { - background-color: rgb(32, 136, 175); - color: black; - } - .postbox-orange { - background-color: rgb(255, 99, 35); - color: black; - } - .postbox-purple { - background-color: rgb(115, 33, 173); - color: white; - } - .postbox-forest { - background-color: rgb(22, 83, 72); - color: white; - } - .postbox-ocean { - background-color: rgb(36, 55, 98); - color: white; - } - .postbox-pink { - background-color: rgb(243, 83, 105); - color: black; - } - .postbox-salmon { - background-color: rgb(250, 128, 114); - color: black; - } - /* Gradient Backgrounds */ - .postbox-darkgray { - background-image: linear-gradient(135deg, rgb(119, 125, 136), rgb(79, 87, 102)); - color: white; - } - .postbox-minty { - background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); - color: black; - } - .postbox-mintgray { - background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); - color: black; - } - .postbox-redblue { - background-image: linear-gradient(45deg, rgb(255, 0, 71), rgb(44, 52, 199)); - color: white; - } - .postbox-violets { - background-image: linear-gradient(45deg, rgb(93, 63, 218), rgb(252, 54, 253)); - color: white; - } - .postbox-grayblack { - background-image: linear-gradient(45deg, rgb(93, 99, 116), rgb(22, 24, 29)); - color: white; - } - .postbox-tealblue { - background-image: linear-gradient(to bottom, #4bdfdf 0%,#207cca 50%,#19094a 100%); - color: white; - } - .postbox-greengray { - background-image: linear-gradient(to right, #c8dbbd 0%,#dedede 100%); - color: black; - } - .postbox-tealgray { - background-image: linear-gradient(to right, #8dcad0 0%,#dedede 100%); - color: black; - } - .postbox-bluegray { - background-image: linear-gradient(to right, #94bbeb 0%,#dedede 100%); - color: black; - } - .postbox-lavendergray { - background-image: linear-gradient(to right, #cfbfda 0%,#dedede 100%); - color: black; - } - .postbox-sunset { - background-image: linear-gradient(to bottom, #fecf41 0%,#fd7440 50%,#b623b1 100%); - color: white; - } - .postbox-sherbert { - background-image: linear-gradient(45deg, #fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%); - color: black; - } \ No newline at end of file +/* Post Backgrounds */ +[class^="postbox-"]{display:table-cell;height:350px;width:1000px;max-width:100%;vertical-align:middle;font-family:Arial,sans-serif;font-size:30px;font-weight:700;line-height:35px;text-align:center;padding:50px 30px;box-sizing:border-box}[class^="postbox-"] a{color:inherit!important}[class^="postbox-"]:hover a,[class^="postbox-"]:focus a{text-decoration:underline}.postbox-black{background-color:#000;color:#fff}.postbox-red{background-color:#e2013b;color:#fff}.postbox-green{background-color:#26927f;color:#fff}.postbox-blue{background-color:#2088af;color:#000}.postbox-orange{background-color:#ff6323;color:#000}.postbox-purple{background-color:#7321ad;color:#fff}.postbox-forest{background-color:#165348;color:#fff}.postbox-ocean{background-color:#243762;color:#fff}.postbox-pink{background-color:#f35369;color:#000}.postbox-salmon{background-color:salmon;color:#000}.postbox-darkgray{background-image:linear-gradient(135deg,#777d88,#4f5766);color:#fff}.postbox-minty{background-image:linear-gradient(135deg,#8fc7ad,#48e5a9);color:#000}.postbox-mintgray{background-image:linear-gradient(135deg,#8fc7ad,#48e5a9);color:#000}.postbox-redblue{background-image:linear-gradient(45deg,#ff0047,#2c34c7);color:#fff}.postbox-violets{background-image:linear-gradient(45deg,#5d3fda,#fc36fd);color:#fff}.postbox-grayblack{background-image:linear-gradient(45deg,#5d6374,#16181d);color:#fff}.postbox-tealblue{background-image:linear-gradient(to bottom,#4bdfdf 0%,#207cca 50%,#19094a 100%);color:#fff}.postbox-greengray{background-image:linear-gradient(to right,#c8dbbd 0%,#dedede 100%);color:#000}.postbox-tealgray{background-image:linear-gradient(to right,#8dcad0 0%,#dedede 100%);color:#000}.postbox-bluegray{background-image:linear-gradient(to right,#94bbeb 0%,#dedede 100%);color:#000}.postbox-lavendergray{background-image:linear-gradient(to right,#cfbfda 0%,#dedede 100%);color:#000}.postbox-sunset{background-image:linear-gradient(to bottom,#fecf41 0%,#fd7440 50%,#b623b1 100%);color:#fff}.postbox-sherbert{background-image:linear-gradient(45deg,#fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%);color:#000} \ No newline at end of file From 41a29c38eaa6eedb60fe909f63e66b5609253a0e Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 26 Apr 2025 13:51:54 -0500 Subject: [PATCH 233/268] Minified Postbox CSS --- bookface_light.css | 124 ++------------------------------------------- 1 file changed, 3 insertions(+), 121 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index 0780a14..7e49bd8 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,6 +1,6 @@ /* Name : Bookface Light - Version : 1.6.3 + Version : 1.6.4 Licence : AGPL Created on : 26 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -2846,123 +2846,5 @@ body.mod-home { line-height: 32px; } } - /* Post Backgrounds - ================ - Solid and Gradient backgrounds with larger text - to grab reader attention - */ - [class^="postbox-"]{ - display: table-cell; - height: 350px; - width: 1000px; - max-width: 100%; - vertical-align: middle; - font-family: Arial, sans-serif; - font-size: 30px; - font-weight: 700; - line-height: 35px; - text-align: center; - padding: 50px 30px; - box-sizing: border-box; - } - [class^="postbox-"] a { - color: inherit !important; - } - [class^="postbox-"]:hover a, - [class^="postbox-"]:focus a { - text-decoration: underline; - } - /* Solid Color Backgrounds */ - .postbox-black { - background-color: black; - color: white; - } - .postbox-red { - background-color: rgb(226, 1, 59); - color: white; - } - .postbox-green { - background-color: rgb(38, 146, 127); - color: white; - } - .postbox-blue { - background-color: rgb(32, 136, 175); - color: black; - } - .postbox-orange { - background-color: rgb(255, 99, 35); - color: black; - } - .postbox-purple { - background-color: rgb(115, 33, 173); - color: white; - } - .postbox-forest { - background-color: rgb(22, 83, 72); - color: white; - } - .postbox-ocean { - background-color: rgb(36, 55, 98); - color: white; - } - .postbox-pink { - background-color: rgb(243, 83, 105); - color: black; - } - .postbox-salmon { - background-color: rgb(250, 128, 114); - color: black; - } - /* Gradient Backgrounds */ - .postbox-darkgray { - background-image: linear-gradient(135deg, rgb(119, 125, 136), rgb(79, 87, 102)); - color: white; - } - .postbox-minty { - background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); - color: black; - } - .postbox-mintgray { - background-image: linear-gradient(135deg, rgb(143, 199, 173), rgb(72, 229, 169)); - color: black; - } - .postbox-redblue { - background-image: linear-gradient(45deg, rgb(255, 0, 71), rgb(44, 52, 199)); - color: white; - } - .postbox-violets { - background-image: linear-gradient(45deg, rgb(93, 63, 218), rgb(252, 54, 253)); - color: white; - } - .postbox-grayblack { - background-image: linear-gradient(45deg, rgb(93, 99, 116), rgb(22, 24, 29)); - color: white; - } - .postbox-tealblue { - background-image: linear-gradient(to bottom, #4bdfdf 0%,#207cca 50%,#19094a 100%); - color: white; - } - .postbox-greengray { - background-image: linear-gradient(to right, #c8dbbd 0%,#dedede 100%); - color: black; - } - .postbox-tealgray { - background-image: linear-gradient(to right, #8dcad0 0%,#dedede 100%); - color: black; - } - .postbox-bluegray { - background-image: linear-gradient(to right, #94bbeb 0%,#dedede 100%); - color: black; - } - .postbox-lavendergray { - background-image: linear-gradient(to right, #cfbfda 0%,#dedede 100%); - color: black; - } - .postbox-sunset { - background-image: linear-gradient(to bottom, #fecf41 0%,#fd7440 50%,#b623b1 100%); - color: white; - } - .postbox-sherbert { - background-image: linear-gradient(45deg, #fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%); - color: black; - } \ No newline at end of file +/* Post Backgrounds */ +[class^="postbox-"]{display:table-cell;height:350px;width:1000px;max-width:100%;vertical-align:middle;font-family:Arial,sans-serif;font-size:30px;font-weight:700;line-height:35px;text-align:center;padding:50px 30px;box-sizing:border-box}[class^="postbox-"] a{color:inherit!important}[class^="postbox-"]:hover a,[class^="postbox-"]:focus a{text-decoration:underline}.postbox-black{background-color:#000;color:#fff}.postbox-red{background-color:#e2013b;color:#fff}.postbox-green{background-color:#26927f;color:#fff}.postbox-blue{background-color:#2088af;color:#000}.postbox-orange{background-color:#ff6323;color:#000}.postbox-purple{background-color:#7321ad;color:#fff}.postbox-forest{background-color:#165348;color:#fff}.postbox-ocean{background-color:#243762;color:#fff}.postbox-pink{background-color:#f35369;color:#000}.postbox-salmon{background-color:salmon;color:#000}.postbox-darkgray{background-image:linear-gradient(135deg,#777d88,#4f5766);color:#fff}.postbox-minty{background-image:linear-gradient(135deg,#8fc7ad,#48e5a9);color:#000}.postbox-mintgray{background-image:linear-gradient(135deg,#8fc7ad,#48e5a9);color:#000}.postbox-redblue{background-image:linear-gradient(45deg,#ff0047,#2c34c7);color:#fff}.postbox-violets{background-image:linear-gradient(45deg,#5d3fda,#fc36fd);color:#fff}.postbox-grayblack{background-image:linear-gradient(45deg,#5d6374,#16181d);color:#fff}.postbox-tealblue{background-image:linear-gradient(to bottom,#4bdfdf 0%,#207cca 50%,#19094a 100%);color:#fff}.postbox-greengray{background-image:linear-gradient(to right,#c8dbbd 0%,#dedede 100%);color:#000}.postbox-tealgray{background-image:linear-gradient(to right,#8dcad0 0%,#dedede 100%);color:#000}.postbox-bluegray{background-image:linear-gradient(to right,#94bbeb 0%,#dedede 100%);color:#000}.postbox-lavendergray{background-image:linear-gradient(to right,#cfbfda 0%,#dedede 100%);color:#000}.postbox-sunset{background-image:linear-gradient(to bottom,#fecf41 0%,#fd7440 50%,#b623b1 100%);color:#fff}.postbox-sherbert{background-image:linear-gradient(45deg,#fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%);color:#000} \ No newline at end of file From 6199397586bfc39a7edd8a3d5ce8f552677d6d6a Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 26 Apr 2025 13:59:01 -0500 Subject: [PATCH 234/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 9cfc993..8378772 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.6.2 +Version 1.6.3 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -349,6 +349,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 ## CHANGELOG: * Fixed "New Message" button not being obvious [Issue #24] * Fixed Profile Pics and Cover Photos not working in old iOS browsers [Issue #26] +* Moved Postbox styles to end of stylesheet 1.6 (25 Mar 2025) * Fixed HR rule on posts [Issue #13] From 2d644b351b95011fb19dc9afe4a8b11dd76e5177 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 26 Apr 2025 13:59:35 -0500 Subject: [PATCH 235/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8378772..16503df 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.6.3 +Version 1.6.4 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -350,6 +350,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Fixed "New Message" button not being obvious [Issue #24] * Fixed Profile Pics and Cover Photos not working in old iOS browsers [Issue #26] * Moved Postbox styles to end of stylesheet +* Minified Postbox CSS 1.6 (25 Mar 2025) * Fixed HR rule on posts [Issue #13] From 2a9588c574a1b721596d1f7d4922f04bea197515 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 28 Apr 2025 11:50:35 -0500 Subject: [PATCH 236/268] Updated with Postbox v1.1 styles --- bookface_auto.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 1b1fc45..7b67205 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,8 +1,8 @@ /* Name : Bookface Auto Color Mode - Version : 1.6.4 + Version : 1.6.5 Licence : AGPL - Created on : 26 APR 2025 + Created on : 28 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -5729,4 +5729,4 @@ body.mod-home { } } /* Post Backgrounds */ -[class^="postbox-"]{display:table-cell;height:350px;width:1000px;max-width:100%;vertical-align:middle;font-family:Arial,sans-serif;font-size:30px;font-weight:700;line-height:35px;text-align:center;padding:50px 30px;box-sizing:border-box}[class^="postbox-"] a{color:inherit!important}[class^="postbox-"]:hover a,[class^="postbox-"]:focus a{text-decoration:underline}.postbox-black{background-color:#000;color:#fff}.postbox-red{background-color:#e2013b;color:#fff}.postbox-green{background-color:#26927f;color:#fff}.postbox-blue{background-color:#2088af;color:#000}.postbox-orange{background-color:#ff6323;color:#000}.postbox-purple{background-color:#7321ad;color:#fff}.postbox-forest{background-color:#165348;color:#fff}.postbox-ocean{background-color:#243762;color:#fff}.postbox-pink{background-color:#f35369;color:#000}.postbox-salmon{background-color:salmon;color:#000}.postbox-darkgray{background-image:linear-gradient(135deg,#777d88,#4f5766);color:#fff}.postbox-minty{background-image:linear-gradient(135deg,#8fc7ad,#48e5a9);color:#000}.postbox-mintgray{background-image:linear-gradient(135deg,#8fc7ad,#48e5a9);color:#000}.postbox-redblue{background-image:linear-gradient(45deg,#ff0047,#2c34c7);color:#fff}.postbox-violets{background-image:linear-gradient(45deg,#5d3fda,#fc36fd);color:#fff}.postbox-grayblack{background-image:linear-gradient(45deg,#5d6374,#16181d);color:#fff}.postbox-tealblue{background-image:linear-gradient(to bottom,#4bdfdf 0%,#207cca 50%,#19094a 100%);color:#fff}.postbox-greengray{background-image:linear-gradient(to right,#c8dbbd 0%,#dedede 100%);color:#000}.postbox-tealgray{background-image:linear-gradient(to right,#8dcad0 0%,#dedede 100%);color:#000}.postbox-bluegray{background-image:linear-gradient(to right,#94bbeb 0%,#dedede 100%);color:#000}.postbox-lavendergray{background-image:linear-gradient(to right,#cfbfda 0%,#dedede 100%);color:#000}.postbox-sunset{background-image:linear-gradient(to bottom,#fecf41 0%,#fd7440 50%,#b623b1 100%);color:#fff}.postbox-sherbert{background-image:linear-gradient(45deg,#fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%);color:#000} \ No newline at end of file +[class^="postbox-"]{display:table-cell;height:350px;width:1000px;max-width:100%;vertical-align:middle;font-family:Arial,sans-serif;font-size:30px;font-weight:700;line-height:35px;text-align:center;padding:50px 30px;box-sizing:border-box}[class^="postbox-"] a{color:inherit!important}[class^="postbox-"]:hover a,[class^="postbox-"]:focus a{text-decoration:underline}[class^="postbox-"]:hover,[class^="postbox-"]:hover::before,[class^="postbox-"]:hover::after,[class^="postbox-"]:active,[class^="postbox-"]:active::before,[class^="postbox-"]:active::after{animation:none}.postbox-black{background-color:#000;color:#fff}.postbox-cornflowerblue,.postbox-blue{background-color:#6495ed;color:#fff}.postbox-darkblue,.postbox-ocean{background-color:#00008b;color:#fff}.postbox-darkgrey{background-color:#a9a9a9;color:#eee}.postbox-darkorange,.postbox-orange{background-color:#ff8c00;color:#000}.postbox-darkred{background-color:darkred;color:#fff}.postbox-darkslateblue{background-color:#483d8b;color:#fff}.postbox-forestgreen,.postbox-forest{background-color:#228b22;color:#fff}.postbox-gold{background-color:gold;color:#000}.postbox-goldenrod{background-color:#daa520;color:#fff}.postbox-honeydew{background-color:#f0fff0;color:#000}.postbox-hotpink{background-color:hotpink;color:#fff}.postbox-lavender{background-color:#e6e6fa;color:purple}.postbox-lightpink{background-color:#ffb6c1;color:#000}.postbox-lightyellow{background-color:#ffffe0;color:#000}.postbox-limegreen,.postbox-green{background-color:#32cd32;color:#fff}.postbox-lightsalmon,.postbox-salmon{background-color:#ffa07a;color:#000}.postbox-mediumaquamarine{background-color:#66CDAA;color:#fff}.postbox-mediumslateblue{background-color:#7b68ee;color:#fff}.postbox-mediumvioletred{background-color:#c71585;color:#fff}.postbox-mintcream{background-color:#f5fffa;color:#000}.postbox-olivedrab{background-color:#6b8e23;color:#fff}.postbox-palegreen{background-color:#98fb98;color:#000}.postbox-peachpuff{background-color:#ffdab9;color:#000}.postbox-pink{background-color:pink;color:#000}.postbox-purple{background-color:purple;color:#fff}.postbox-red{background-color:red;color:#fff}.postbox-seagreen{background-color:#2e8b57;color:#fff}.postbox-sienna{background-color:sienna;color:#fff}.postbox-skyblue{background-color:skyblue;color:#000}.postbox-thistle{background-color:thistle;color:#000}.postbox-violet{background-color:violet;color:lavender}.postbox-whitesmoke{background-color:#f5f5f5;color:#000}.postbox-yellowgreen{background-color:#9acd32;color:#fff}.postbox-aurora{background-size:100% 100%;background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0;background-image:radial-gradient(18% 28% at 24% 50%,#CEFAFFFF 7%,#073AFF00 100%),radial-gradient(18% 28% at 18% 71%,#FFFFFF59 6%,#073AFF00 100%),radial-gradient(70% 53% at 36% 76%,#73F2FFFF 0%,#073AFF00 100%),radial-gradient(42% 53% at 15% 94%,#FFFFFFFF 7%,#073AFF00 100%),radial-gradient(42% 53% at 34% 72%,#FFFFFFFF 7%,#073AFF00 100%),radial-gradient(18% 28% at 35% 87%,#FFFFFFFF 7%,#073AFF00 100%),radial-gradient(31% 43% at 7% 98%,#FFFFFFFF 24%,#073AFF00 100%),radial-gradient(21% 37% at 72% 23%,#D3FF6D9C 24%,#073AFF00 100%),radial-gradient(35% 56% at 91% 74%,#8A4FFFF5 9%,#073AFF00 100%),radial-gradient(74% 86% at 67% 38%,#6DFFAEF5 24%,#073AFF00 100%),linear-gradient(125deg,#4EB5FFFF 1%,#4C00FCFF 100%)}.postbox-bluegray{background-image:linear-gradient(to right,#94bbeb 0%,#dedede 100%);color:#000}.postbox-graygrey,.postbox-darkgray{background-image:linear-gradient(135deg,#777d88,#4f5766);color:#fff}.postbox-grayblack{background-image:linear-gradient(45deg,#5d6374,#16181d);color:#fff}.postbox-greengray{background-image:linear-gradient(to right,#c8dbbd 0%,#dedede 100%);color:#000}.postbox-lavendergray{background-image:linear-gradient(to right,#cfbfda 0%,#dedede 100%);color:#000}.postbox-minty{background-image:linear-gradient(135deg,#8fc7ad,#48e5a9);color:#000}.postbox-mintgray{background-image:linear-gradient(135deg,#8fc7ad,#48e5a9);color:#000}.postbox-rainbow{background:linear-gradient(135deg,#ff0000 0%,#f2af00 17%,#fff200 33%,#00e400 50%,#009cfe 69%,#935cf9 86%,#e40df2 100%);color:#fff;text-shadow:0 0 3px black,3px 3px 3px #000}.postbox-redblue{background-image:linear-gradient(45deg,#ff0047,#2c34c7);color:#fff}.postbox-sherbert,.postbox-sherbet{background-image:linear-gradient(45deg,#fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%);color:#000}.postbox-spectrum{background:linear-gradient(to right,darkred 0%,#ff0000 5%,#f2af00 17%,#fff200 33%,#00e400 50%,#009cfe 69%,#935cf9 86%,#e40df2 95%,darkmagenta 100%);color:#fff;text-shadow:0 0 3px black,3px 3px 3px #000}.postbox-strawberrycream{background:linear-gradient(to bottom,#fff2cd 0%,#ffa0ac 20%,#fea1ac 20%,#ff84a3 28%,#fd4f8c 40%,#d91b65 79%,#d61a64 79%,#c11a5f 100%);color:#fff}.postbox-sunset{background-image:linear-gradient(to bottom,#fecf41 0%,#fd7440 50%,#b623b1 100%);color:#fff}.postbox-tealblue{background-image:linear-gradient(to bottom,#4bdfdf 0%,#207cca 50%,#19094a 100%);color:#fff}.postbox-tealgray{background-image:linear-gradient(to right,#8dcad0 0%,#dedede 100%);color:#000}.postbox-violets{background-image:linear-gradient(45deg,#5d3fda,#fc36fd);color:#fff}.postbox-violetblue{background:linear-gradient(to bottom,#cc258f 0%,#9643b5 25%,#626cdd 48%,#629aed 71%,#80ebff 100%);color:#fff}.postbox-blueprint{background-color:blue;background-image:linear-gradient(lightblue 2px,transparent 2px),linear-gradient(90deg,lightblue 2px,transparent 2px),linear-gradient(lightblue 1px,transparent 1px),linear-gradient(90deg,lightblue 1px,transparent 1px);background-size:100px 100px,100px 100px,20px 20px,20px 20px;background-position:-2px -2px,-2px -2px,-1px -1px,-1px -1px;color:#fff;position:relative;z-index:0;font-family:'Bradley Hand','Comic-Sans MS',sans-serif!important;text-shadow:-2px 2px 2px midnightblue,2px 2px 2px blue,0 0 20px blue;box-shadow:inset 0 50px 100px #000}.postbox-birds{background:radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% bottom calc(-.8*50px),#BCE4FE calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) calc(2*50px) calc(-1*calc(1.5*50px + 18.75px)),radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% bottom calc(-.8*50px),#FEE993 calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) calc(-1*50px) calc(calc(1.5*50px + 18.75px)/-2),radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% top calc(-.8*50px),#FEE993 calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) 0 calc(1.5*50px + 18.75px),radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% top calc(-.8*50px),#BCE4FE calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) 50px calc(calc(1.5*50px + 18.75px)/ 2),linear-gradient(#BCE4FE 50%,#FEE993 0);background-size:calc(4*50px) calc(1.5*50px + 18.75px)}.postbox-checkered{background-image:repeating-conic-gradient(#000000 0% 25%,#AD0505 0% 50%);background-position:0 0,32px 32px;background-size:64px 64px;background-color:#AD0505;color:#fff}.postbox-cubes{background-image:linear-gradient(30deg,#B6AEE5 12%,transparent 12.5%,transparent 87%,#B6AEE5 87.5%,#B6AEE5),linear-gradient(150deg,#B6AEE5 12%,transparent 12.5%,transparent 87%,#B6AEE5 87.5%,#B6AEE5),linear-gradient(30deg,#B6AEE5 12%,transparent 12.5%,transparent 87%,#B6AEE5 87.5%,#B6AEE5),linear-gradient(150deg,#B6AEE5 12%,transparent 12.5%,transparent 87%,#B6AEE5 87.5%,#B6AEE5),linear-gradient(60deg,#B6AEE580 25%,transparent 25.5%,transparent 75%,#B6AEE580 75%,#B6AEE580),linear-gradient(60deg,#B6AEE580 25%,transparent 25.5%,transparent 75%,#B6AEE580 75%,#B6AEE580);background-size:100px 175px;background-position:0 0,0 0,50px 87.5px,50px 87.5px,0 0,50px 87.5px;background-color:#E4E4ED;text-shadow:-1px -1px 2px white,1px 1px 2px #fff}.postbox-lemonlime{background:radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% right calc(-.8*42px),#E5E500 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(-1*calc(1.8 * 42px + 10.5px)) 42px,radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% left calc(-.8*42px),#04E164 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(1.8 * 42px + 10.5px) calc(-1*42px),radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% right calc(-.8*42px),#04E164 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(calc(1.8 * 42px + 10.5px)/-2) calc(-1*42px),radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% left calc(-.8*42px),#E5E500 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(calc(1.8 * 42px + 10.5px)/ 2) 42px,linear-gradient(90deg,#E5E500 50%,#04E164 0);background-size:calc(1.8 * 42px + 10.5px) 168px;text-shadow:1px 1px 5px white,-1px -1px 5px #fff;font-size:52px!important;font-size:42px!important}.postbox-gingham{background-image:linear-gradient(0deg,rgb(226 9 4 / .6) 0% 25%,rgb(251 248 239 / .6) 25% 75%,rgb(226 9 4 / .6) 75% 100%),linear-gradient(90deg,rgb(226 9 4 / .6) 0% 25%,rgb(251 248 239 / .6) 25% 75%,rgb(226 9 4 / .6) 75% 100%);background-size:64px 64px,64px 64px;color:#fff;text-shadow:0 0 2px black,3px 3px 5px #000}.postbox-grid{background-image:linear-gradient(#027816 2px,transparent 2px),linear-gradient(to right,#027816 2px,transparent 2px);background-size:24px 24px;background-color:#000;color:lime;text-shadow:0 0 3px black,3px 3px 5px black,-3px -3px 5px #000}.postbox-hearts{background:radial-gradient(at 80% 80%,#FF6969 25.4%,#0000 26%),radial-gradient(at 20% 80%,#FF6969 25.4%,#0000 26%),conic-gradient(from -45deg at 50% 41%,#FF6969 90deg,#FFACAC 0) 21px 0;background-size:42px 42px;color:#fff;font-size:42px!important;text-shadow:2px 2px 3px darkred}.postbox-honeycomb{background:radial-gradient(circle farthest-side at 0% 50%,#FBEB00 23.5%,#0000 0)33.6px 48px,radial-gradient(circle farthest-side at 0% 50%,#EDBE03 24%,#0000 0)30.4px 48px,linear-gradient(#FBEB00 14%,#0000 0,#0000 85%,#FBEB00 0)0 0,linear-gradient(150deg,#FBEB00 24%,#EDBE03 0,#EDBE03 26%,#0000 0,#0000 74%,#EDBE03 0,#EDBE03 76%,#FBEB00 0)0 0,linear-gradient(30deg,#FBEB00 24%,#EDBE03 0,#EDBE03 26%,#0000 0,#0000 74%,#EDBE03 0,#EDBE03 76%,#FBEB00 0)0 0,linear-gradient(90deg,#EDBE03 2%,#FBEB00 0,#FBEB00 98%,#EDBE03 0%)0 0 #FBEB00;background-size:64px 96px;background-color:#FBEB00}.postbox-notebook{background:linear-gradient(to right,transparent 10%,#f7c1c1 10% 10.2%,transparent 10.5%),repeating-linear-gradient(#ebf8e1a2 10%,#b5def0 10%,#b5def0 10.2%,#ebf8e1a2 11%,#ebf8e1a2 18.5%);background-color:#ebf8e1;background-size:100% 25px,100% 100%;background-repeat:repeat-y,repeat;font-family:'Bradley Hand','Comic-Sans MS',sans-serif!important;color:#333}.postbox-plaid{background:repeating-linear-gradient(transparent,transparent 8px,#A19100 8px,#A19100 12px,transparent 12px,transparent 16px,#A19100 12px,#A19100 32px,transparent 32px,transparent 36px,#A19100 36px,#A19100 40px,transparent 40px,transparent 64px),repeating-linear-gradient(90deg,transparent,transparent 8px,#A19100 8px,#A19100 12px,transparent 12px,transparent 16px,#A19100 12px,#A19100 32px,transparent 32px,transparent 36px,#A19100 36px,#A19100 40px,transparent 40px,transparent 64px),#A50000;background-blend-mode:multiply;background-color:#A50000;color:#fff;text-shadow:0 0 2px black,3px 3px 5px #000}.postbox-polkadots{background-image:radial-gradient(#87D9E5 2px,transparent 2px),radial-gradient(#87D9E5 2px,transparent 2px);background-size:32px 32px;background-position:0 0,16px 16px;background-color:#1A8FE5;color:#fff;text-shadow:3px 3px 5px darkblue}.postbox-shadedots{background:conic-gradient(#0CBEFE 25%,#0000 0) 0 0/calc(2*50px) calc(50px/9.5),conic-gradient(#0CBEFE 25%,#0000 0) 0 0/calc(50px/9.5) calc(2*50px),repeating-conic-gradient(#0000 0 25%,#0CBEFE 0 50%) 50px 0 /calc(2*50px) calc(2*50px),radial-gradient(50% 50%,#1872A2 98%,#0CBEFE) 0 0/50px 50px;color:#fff;text-shadow:3px 3px 3px darkblue}.postbox-shadowbox{background-image:radial-gradient(rgb(0 0 0 / .2) 5px,transparent 2px),radial-gradient(ellipse at center,#969faa 0%,#6d7782 35%,#6c7680 35%,#28343b 99%);background-size:40px 40px,100% 100%;font-family:Impact,sans-serif!important;text-transform:uppercase;font-size:42px!important;line-height:52px!important;color:#ddd;text-shadow:0 5px 2px rgb(0 0 0 / .5),0 -1px 0 #fff}.postbox-stars{background:conic-gradient(from 162deg at calc(42px * .5) calc(42px * .68),#0D4975 36deg,#0000 0),conic-gradient(from 18deg at calc(42px * .19) calc(42px * .59),#0D4975 36deg,#0000 0),conic-gradient(from 306deg at calc(42px * .81) calc(42px * .59),#0D4975 36deg,#0000 0),#000000;background-position:0 calc(42px * 0.35);background-size:calc(42px + 1.7px) calc(42px + 1.7px);color:#fff}.postbox-warpgrid{background:radial-gradient(farthest-side at -33.33% 50%,#0000 52%,#027816 54% 57%,#0000 59%) 0 calc(128px/2),radial-gradient(farthest-side at 50% 133.33%,#0000 52%,#027816 54% 57%,#0000 59%) calc(128px/2) 0,radial-gradient(farthest-side at 133.33% 50%,#0000 52%,#027816 54% 57%,#0000 59%),radial-gradient(farthest-side at 50% -33.33%,#0000 52%,#027816 54% 57%,#0000 59%),#000000;background-size:calc(128px/4.667) 128px,128px calc(128px/4.667);color:lime;text-shadow:0 0 3px black,3px 3px 5px black,-3px -3px 5px #000}.postbox-wavy{background:radial-gradient(at bottom right,#57D2FF 0,#57D2FF 12.5px,#57D2FF33 12.5px,#57D2FF33 25px,#57D2FFBF 25px,#57D2FFBF 37.5px,#57D2FF40 37.5px,#57D2FF40 50px,#57D2FF4D 50px,#57D2FF4D 62.5px,#57D2FFBF 62.5px,#57D2FFBF 75px,#57D2FF33 75px,#57D2FF33 87.5px,transparent 87.5px,transparent 100px),radial-gradient(at top left,transparent 0,transparent 12.5px,#57D2FF33 12.5px,#57D2FF33 25px,#57D2FFBF 25px,#57D2FFBF 37.5px,#57D2FF4D 37.5px,#57D2FF4D 50px,#57D2FF40 50px,#57D2FF40 62.5px,#57D2FFBF 62.5px,#57D2FFBF 75px,#57D2FF33 75px,#57D2FF33 87.5px,#57D2FF 87.5px,#57D2FF 100px,transparent 100px,transparent 250px);background-blend-mode:multiply;background-size:100px 100px,100px 100px;background-color:#E4E4ED;color:darkblue} \ No newline at end of file From 7be49b83599ce1faa5a8db88eaf358796f65db73 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 28 Apr 2025 11:51:13 -0500 Subject: [PATCH 237/268] Updated with Postbox v1.1 styles --- bookface_dark.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 23e9938..dc1bf80 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,8 +1,8 @@ /* Name : Bookface Dark - Version : 1.6.4 + Version : 1.6.5 Licence : AGPL - Created on : 26 APR 2025 + Created on : 28 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -2847,4 +2847,4 @@ body.mod-home { } } /* Post Backgrounds */ -[class^="postbox-"]{display:table-cell;height:350px;width:1000px;max-width:100%;vertical-align:middle;font-family:Arial,sans-serif;font-size:30px;font-weight:700;line-height:35px;text-align:center;padding:50px 30px;box-sizing:border-box}[class^="postbox-"] a{color:inherit!important}[class^="postbox-"]:hover a,[class^="postbox-"]:focus a{text-decoration:underline}.postbox-black{background-color:#000;color:#fff}.postbox-red{background-color:#e2013b;color:#fff}.postbox-green{background-color:#26927f;color:#fff}.postbox-blue{background-color:#2088af;color:#000}.postbox-orange{background-color:#ff6323;color:#000}.postbox-purple{background-color:#7321ad;color:#fff}.postbox-forest{background-color:#165348;color:#fff}.postbox-ocean{background-color:#243762;color:#fff}.postbox-pink{background-color:#f35369;color:#000}.postbox-salmon{background-color:salmon;color:#000}.postbox-darkgray{background-image:linear-gradient(135deg,#777d88,#4f5766);color:#fff}.postbox-minty{background-image:linear-gradient(135deg,#8fc7ad,#48e5a9);color:#000}.postbox-mintgray{background-image:linear-gradient(135deg,#8fc7ad,#48e5a9);color:#000}.postbox-redblue{background-image:linear-gradient(45deg,#ff0047,#2c34c7);color:#fff}.postbox-violets{background-image:linear-gradient(45deg,#5d3fda,#fc36fd);color:#fff}.postbox-grayblack{background-image:linear-gradient(45deg,#5d6374,#16181d);color:#fff}.postbox-tealblue{background-image:linear-gradient(to bottom,#4bdfdf 0%,#207cca 50%,#19094a 100%);color:#fff}.postbox-greengray{background-image:linear-gradient(to right,#c8dbbd 0%,#dedede 100%);color:#000}.postbox-tealgray{background-image:linear-gradient(to right,#8dcad0 0%,#dedede 100%);color:#000}.postbox-bluegray{background-image:linear-gradient(to right,#94bbeb 0%,#dedede 100%);color:#000}.postbox-lavendergray{background-image:linear-gradient(to right,#cfbfda 0%,#dedede 100%);color:#000}.postbox-sunset{background-image:linear-gradient(to bottom,#fecf41 0%,#fd7440 50%,#b623b1 100%);color:#fff}.postbox-sherbert{background-image:linear-gradient(45deg,#fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%);color:#000} \ No newline at end of file +[class^="postbox-"]{display:table-cell;height:350px;width:1000px;max-width:100%;vertical-align:middle;font-family:Arial,sans-serif;font-size:30px;font-weight:700;line-height:35px;text-align:center;padding:50px 30px;box-sizing:border-box}[class^="postbox-"] a{color:inherit!important}[class^="postbox-"]:hover a,[class^="postbox-"]:focus a{text-decoration:underline}[class^="postbox-"]:hover,[class^="postbox-"]:hover::before,[class^="postbox-"]:hover::after,[class^="postbox-"]:active,[class^="postbox-"]:active::before,[class^="postbox-"]:active::after{animation:none}.postbox-black{background-color:#000;color:#fff}.postbox-cornflowerblue,.postbox-blue{background-color:#6495ed;color:#fff}.postbox-darkblue,.postbox-ocean{background-color:#00008b;color:#fff}.postbox-darkgrey{background-color:#a9a9a9;color:#eee}.postbox-darkorange,.postbox-orange{background-color:#ff8c00;color:#000}.postbox-darkred{background-color:darkred;color:#fff}.postbox-darkslateblue{background-color:#483d8b;color:#fff}.postbox-forestgreen,.postbox-forest{background-color:#228b22;color:#fff}.postbox-gold{background-color:gold;color:#000}.postbox-goldenrod{background-color:#daa520;color:#fff}.postbox-honeydew{background-color:#f0fff0;color:#000}.postbox-hotpink{background-color:hotpink;color:#fff}.postbox-lavender{background-color:#e6e6fa;color:purple}.postbox-lightpink{background-color:#ffb6c1;color:#000}.postbox-lightyellow{background-color:#ffffe0;color:#000}.postbox-limegreen,.postbox-green{background-color:#32cd32;color:#fff}.postbox-lightsalmon,.postbox-salmon{background-color:#ffa07a;color:#000}.postbox-mediumaquamarine{background-color:#66CDAA;color:#fff}.postbox-mediumslateblue{background-color:#7b68ee;color:#fff}.postbox-mediumvioletred{background-color:#c71585;color:#fff}.postbox-mintcream{background-color:#f5fffa;color:#000}.postbox-olivedrab{background-color:#6b8e23;color:#fff}.postbox-palegreen{background-color:#98fb98;color:#000}.postbox-peachpuff{background-color:#ffdab9;color:#000}.postbox-pink{background-color:pink;color:#000}.postbox-purple{background-color:purple;color:#fff}.postbox-red{background-color:red;color:#fff}.postbox-seagreen{background-color:#2e8b57;color:#fff}.postbox-sienna{background-color:sienna;color:#fff}.postbox-skyblue{background-color:skyblue;color:#000}.postbox-thistle{background-color:thistle;color:#000}.postbox-violet{background-color:violet;color:lavender}.postbox-whitesmoke{background-color:#f5f5f5;color:#000}.postbox-yellowgreen{background-color:#9acd32;color:#fff}.postbox-aurora{background-size:100% 100%;background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0;background-image:radial-gradient(18% 28% at 24% 50%,#CEFAFFFF 7%,#073AFF00 100%),radial-gradient(18% 28% at 18% 71%,#FFFFFF59 6%,#073AFF00 100%),radial-gradient(70% 53% at 36% 76%,#73F2FFFF 0%,#073AFF00 100%),radial-gradient(42% 53% at 15% 94%,#FFFFFFFF 7%,#073AFF00 100%),radial-gradient(42% 53% at 34% 72%,#FFFFFFFF 7%,#073AFF00 100%),radial-gradient(18% 28% at 35% 87%,#FFFFFFFF 7%,#073AFF00 100%),radial-gradient(31% 43% at 7% 98%,#FFFFFFFF 24%,#073AFF00 100%),radial-gradient(21% 37% at 72% 23%,#D3FF6D9C 24%,#073AFF00 100%),radial-gradient(35% 56% at 91% 74%,#8A4FFFF5 9%,#073AFF00 100%),radial-gradient(74% 86% at 67% 38%,#6DFFAEF5 24%,#073AFF00 100%),linear-gradient(125deg,#4EB5FFFF 1%,#4C00FCFF 100%)}.postbox-bluegray{background-image:linear-gradient(to right,#94bbeb 0%,#dedede 100%);color:#000}.postbox-graygrey,.postbox-darkgray{background-image:linear-gradient(135deg,#777d88,#4f5766);color:#fff}.postbox-grayblack{background-image:linear-gradient(45deg,#5d6374,#16181d);color:#fff}.postbox-greengray{background-image:linear-gradient(to right,#c8dbbd 0%,#dedede 100%);color:#000}.postbox-lavendergray{background-image:linear-gradient(to right,#cfbfda 0%,#dedede 100%);color:#000}.postbox-minty{background-image:linear-gradient(135deg,#8fc7ad,#48e5a9);color:#000}.postbox-mintgray{background-image:linear-gradient(135deg,#8fc7ad,#48e5a9);color:#000}.postbox-rainbow{background:linear-gradient(135deg,#ff0000 0%,#f2af00 17%,#fff200 33%,#00e400 50%,#009cfe 69%,#935cf9 86%,#e40df2 100%);color:#fff;text-shadow:0 0 3px black,3px 3px 3px #000}.postbox-redblue{background-image:linear-gradient(45deg,#ff0047,#2c34c7);color:#fff}.postbox-sherbert,.postbox-sherbet{background-image:linear-gradient(45deg,#fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%);color:#000}.postbox-spectrum{background:linear-gradient(to right,darkred 0%,#ff0000 5%,#f2af00 17%,#fff200 33%,#00e400 50%,#009cfe 69%,#935cf9 86%,#e40df2 95%,darkmagenta 100%);color:#fff;text-shadow:0 0 3px black,3px 3px 3px #000}.postbox-strawberrycream{background:linear-gradient(to bottom,#fff2cd 0%,#ffa0ac 20%,#fea1ac 20%,#ff84a3 28%,#fd4f8c 40%,#d91b65 79%,#d61a64 79%,#c11a5f 100%);color:#fff}.postbox-sunset{background-image:linear-gradient(to bottom,#fecf41 0%,#fd7440 50%,#b623b1 100%);color:#fff}.postbox-tealblue{background-image:linear-gradient(to bottom,#4bdfdf 0%,#207cca 50%,#19094a 100%);color:#fff}.postbox-tealgray{background-image:linear-gradient(to right,#8dcad0 0%,#dedede 100%);color:#000}.postbox-violets{background-image:linear-gradient(45deg,#5d3fda,#fc36fd);color:#fff}.postbox-violetblue{background:linear-gradient(to bottom,#cc258f 0%,#9643b5 25%,#626cdd 48%,#629aed 71%,#80ebff 100%);color:#fff}.postbox-blueprint{background-color:blue;background-image:linear-gradient(lightblue 2px,transparent 2px),linear-gradient(90deg,lightblue 2px,transparent 2px),linear-gradient(lightblue 1px,transparent 1px),linear-gradient(90deg,lightblue 1px,transparent 1px);background-size:100px 100px,100px 100px,20px 20px,20px 20px;background-position:-2px -2px,-2px -2px,-1px -1px,-1px -1px;color:#fff;position:relative;z-index:0;font-family:'Bradley Hand','Comic-Sans MS',sans-serif!important;text-shadow:-2px 2px 2px midnightblue,2px 2px 2px blue,0 0 20px blue;box-shadow:inset 0 50px 100px #000}.postbox-birds{background:radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% bottom calc(-.8*50px),#BCE4FE calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) calc(2*50px) calc(-1*calc(1.5*50px + 18.75px)),radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% bottom calc(-.8*50px),#FEE993 calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) calc(-1*50px) calc(calc(1.5*50px + 18.75px)/-2),radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% top calc(-.8*50px),#FEE993 calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) 0 calc(1.5*50px + 18.75px),radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% top calc(-.8*50px),#BCE4FE calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) 50px calc(calc(1.5*50px + 18.75px)/ 2),linear-gradient(#BCE4FE 50%,#FEE993 0);background-size:calc(4*50px) calc(1.5*50px + 18.75px)}.postbox-checkered{background-image:repeating-conic-gradient(#000000 0% 25%,#AD0505 0% 50%);background-position:0 0,32px 32px;background-size:64px 64px;background-color:#AD0505;color:#fff}.postbox-cubes{background-image:linear-gradient(30deg,#B6AEE5 12%,transparent 12.5%,transparent 87%,#B6AEE5 87.5%,#B6AEE5),linear-gradient(150deg,#B6AEE5 12%,transparent 12.5%,transparent 87%,#B6AEE5 87.5%,#B6AEE5),linear-gradient(30deg,#B6AEE5 12%,transparent 12.5%,transparent 87%,#B6AEE5 87.5%,#B6AEE5),linear-gradient(150deg,#B6AEE5 12%,transparent 12.5%,transparent 87%,#B6AEE5 87.5%,#B6AEE5),linear-gradient(60deg,#B6AEE580 25%,transparent 25.5%,transparent 75%,#B6AEE580 75%,#B6AEE580),linear-gradient(60deg,#B6AEE580 25%,transparent 25.5%,transparent 75%,#B6AEE580 75%,#B6AEE580);background-size:100px 175px;background-position:0 0,0 0,50px 87.5px,50px 87.5px,0 0,50px 87.5px;background-color:#E4E4ED;text-shadow:-1px -1px 2px white,1px 1px 2px #fff}.postbox-lemonlime{background:radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% right calc(-.8*42px),#E5E500 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(-1*calc(1.8 * 42px + 10.5px)) 42px,radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% left calc(-.8*42px),#04E164 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(1.8 * 42px + 10.5px) calc(-1*42px),radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% right calc(-.8*42px),#04E164 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(calc(1.8 * 42px + 10.5px)/-2) calc(-1*42px),radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% left calc(-.8*42px),#E5E500 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(calc(1.8 * 42px + 10.5px)/ 2) 42px,linear-gradient(90deg,#E5E500 50%,#04E164 0);background-size:calc(1.8 * 42px + 10.5px) 168px;text-shadow:1px 1px 5px white,-1px -1px 5px #fff;font-size:52px!important;font-size:42px!important}.postbox-gingham{background-image:linear-gradient(0deg,rgb(226 9 4 / .6) 0% 25%,rgb(251 248 239 / .6) 25% 75%,rgb(226 9 4 / .6) 75% 100%),linear-gradient(90deg,rgb(226 9 4 / .6) 0% 25%,rgb(251 248 239 / .6) 25% 75%,rgb(226 9 4 / .6) 75% 100%);background-size:64px 64px,64px 64px;color:#fff;text-shadow:0 0 2px black,3px 3px 5px #000}.postbox-grid{background-image:linear-gradient(#027816 2px,transparent 2px),linear-gradient(to right,#027816 2px,transparent 2px);background-size:24px 24px;background-color:#000;color:lime;text-shadow:0 0 3px black,3px 3px 5px black,-3px -3px 5px #000}.postbox-hearts{background:radial-gradient(at 80% 80%,#FF6969 25.4%,#0000 26%),radial-gradient(at 20% 80%,#FF6969 25.4%,#0000 26%),conic-gradient(from -45deg at 50% 41%,#FF6969 90deg,#FFACAC 0) 21px 0;background-size:42px 42px;color:#fff;font-size:42px!important;text-shadow:2px 2px 3px darkred}.postbox-honeycomb{background:radial-gradient(circle farthest-side at 0% 50%,#FBEB00 23.5%,#0000 0)33.6px 48px,radial-gradient(circle farthest-side at 0% 50%,#EDBE03 24%,#0000 0)30.4px 48px,linear-gradient(#FBEB00 14%,#0000 0,#0000 85%,#FBEB00 0)0 0,linear-gradient(150deg,#FBEB00 24%,#EDBE03 0,#EDBE03 26%,#0000 0,#0000 74%,#EDBE03 0,#EDBE03 76%,#FBEB00 0)0 0,linear-gradient(30deg,#FBEB00 24%,#EDBE03 0,#EDBE03 26%,#0000 0,#0000 74%,#EDBE03 0,#EDBE03 76%,#FBEB00 0)0 0,linear-gradient(90deg,#EDBE03 2%,#FBEB00 0,#FBEB00 98%,#EDBE03 0%)0 0 #FBEB00;background-size:64px 96px;background-color:#FBEB00}.postbox-notebook{background:linear-gradient(to right,transparent 10%,#f7c1c1 10% 10.2%,transparent 10.5%),repeating-linear-gradient(#ebf8e1a2 10%,#b5def0 10%,#b5def0 10.2%,#ebf8e1a2 11%,#ebf8e1a2 18.5%);background-color:#ebf8e1;background-size:100% 25px,100% 100%;background-repeat:repeat-y,repeat;font-family:'Bradley Hand','Comic-Sans MS',sans-serif!important;color:#333}.postbox-plaid{background:repeating-linear-gradient(transparent,transparent 8px,#A19100 8px,#A19100 12px,transparent 12px,transparent 16px,#A19100 12px,#A19100 32px,transparent 32px,transparent 36px,#A19100 36px,#A19100 40px,transparent 40px,transparent 64px),repeating-linear-gradient(90deg,transparent,transparent 8px,#A19100 8px,#A19100 12px,transparent 12px,transparent 16px,#A19100 12px,#A19100 32px,transparent 32px,transparent 36px,#A19100 36px,#A19100 40px,transparent 40px,transparent 64px),#A50000;background-blend-mode:multiply;background-color:#A50000;color:#fff;text-shadow:0 0 2px black,3px 3px 5px #000}.postbox-polkadots{background-image:radial-gradient(#87D9E5 2px,transparent 2px),radial-gradient(#87D9E5 2px,transparent 2px);background-size:32px 32px;background-position:0 0,16px 16px;background-color:#1A8FE5;color:#fff;text-shadow:3px 3px 5px darkblue}.postbox-shadedots{background:conic-gradient(#0CBEFE 25%,#0000 0) 0 0/calc(2*50px) calc(50px/9.5),conic-gradient(#0CBEFE 25%,#0000 0) 0 0/calc(50px/9.5) calc(2*50px),repeating-conic-gradient(#0000 0 25%,#0CBEFE 0 50%) 50px 0 /calc(2*50px) calc(2*50px),radial-gradient(50% 50%,#1872A2 98%,#0CBEFE) 0 0/50px 50px;color:#fff;text-shadow:3px 3px 3px darkblue}.postbox-shadowbox{background-image:radial-gradient(rgb(0 0 0 / .2) 5px,transparent 2px),radial-gradient(ellipse at center,#969faa 0%,#6d7782 35%,#6c7680 35%,#28343b 99%);background-size:40px 40px,100% 100%;font-family:Impact,sans-serif!important;text-transform:uppercase;font-size:42px!important;line-height:52px!important;color:#ddd;text-shadow:0 5px 2px rgb(0 0 0 / .5),0 -1px 0 #fff}.postbox-stars{background:conic-gradient(from 162deg at calc(42px * .5) calc(42px * .68),#0D4975 36deg,#0000 0),conic-gradient(from 18deg at calc(42px * .19) calc(42px * .59),#0D4975 36deg,#0000 0),conic-gradient(from 306deg at calc(42px * .81) calc(42px * .59),#0D4975 36deg,#0000 0),#000000;background-position:0 calc(42px * 0.35);background-size:calc(42px + 1.7px) calc(42px + 1.7px);color:#fff}.postbox-warpgrid{background:radial-gradient(farthest-side at -33.33% 50%,#0000 52%,#027816 54% 57%,#0000 59%) 0 calc(128px/2),radial-gradient(farthest-side at 50% 133.33%,#0000 52%,#027816 54% 57%,#0000 59%) calc(128px/2) 0,radial-gradient(farthest-side at 133.33% 50%,#0000 52%,#027816 54% 57%,#0000 59%),radial-gradient(farthest-side at 50% -33.33%,#0000 52%,#027816 54% 57%,#0000 59%),#000000;background-size:calc(128px/4.667) 128px,128px calc(128px/4.667);color:lime;text-shadow:0 0 3px black,3px 3px 5px black,-3px -3px 5px #000}.postbox-wavy{background:radial-gradient(at bottom right,#57D2FF 0,#57D2FF 12.5px,#57D2FF33 12.5px,#57D2FF33 25px,#57D2FFBF 25px,#57D2FFBF 37.5px,#57D2FF40 37.5px,#57D2FF40 50px,#57D2FF4D 50px,#57D2FF4D 62.5px,#57D2FFBF 62.5px,#57D2FFBF 75px,#57D2FF33 75px,#57D2FF33 87.5px,transparent 87.5px,transparent 100px),radial-gradient(at top left,transparent 0,transparent 12.5px,#57D2FF33 12.5px,#57D2FF33 25px,#57D2FFBF 25px,#57D2FFBF 37.5px,#57D2FF4D 37.5px,#57D2FF4D 50px,#57D2FF40 50px,#57D2FF40 62.5px,#57D2FFBF 62.5px,#57D2FFBF 75px,#57D2FF33 75px,#57D2FF33 87.5px,#57D2FF 87.5px,#57D2FF 100px,transparent 100px,transparent 250px);background-blend-mode:multiply;background-size:100px 100px,100px 100px;background-color:#E4E4ED;color:darkblue} \ No newline at end of file From dc1bc32a6182772f8bb1fdaa474d8a081b5347a5 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 28 Apr 2025 11:51:56 -0500 Subject: [PATCH 238/268] Updated with Postbox v1.1 styles --- bookface_light.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index 7e49bd8..7adedb8 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,8 +1,8 @@ /* Name : Bookface Light - Version : 1.6.4 + Version : 1.6.5 Licence : AGPL - Created on : 26 APR 2025 + Created on : 28 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -2847,4 +2847,4 @@ body.mod-home { } } /* Post Backgrounds */ -[class^="postbox-"]{display:table-cell;height:350px;width:1000px;max-width:100%;vertical-align:middle;font-family:Arial,sans-serif;font-size:30px;font-weight:700;line-height:35px;text-align:center;padding:50px 30px;box-sizing:border-box}[class^="postbox-"] a{color:inherit!important}[class^="postbox-"]:hover a,[class^="postbox-"]:focus a{text-decoration:underline}.postbox-black{background-color:#000;color:#fff}.postbox-red{background-color:#e2013b;color:#fff}.postbox-green{background-color:#26927f;color:#fff}.postbox-blue{background-color:#2088af;color:#000}.postbox-orange{background-color:#ff6323;color:#000}.postbox-purple{background-color:#7321ad;color:#fff}.postbox-forest{background-color:#165348;color:#fff}.postbox-ocean{background-color:#243762;color:#fff}.postbox-pink{background-color:#f35369;color:#000}.postbox-salmon{background-color:salmon;color:#000}.postbox-darkgray{background-image:linear-gradient(135deg,#777d88,#4f5766);color:#fff}.postbox-minty{background-image:linear-gradient(135deg,#8fc7ad,#48e5a9);color:#000}.postbox-mintgray{background-image:linear-gradient(135deg,#8fc7ad,#48e5a9);color:#000}.postbox-redblue{background-image:linear-gradient(45deg,#ff0047,#2c34c7);color:#fff}.postbox-violets{background-image:linear-gradient(45deg,#5d3fda,#fc36fd);color:#fff}.postbox-grayblack{background-image:linear-gradient(45deg,#5d6374,#16181d);color:#fff}.postbox-tealblue{background-image:linear-gradient(to bottom,#4bdfdf 0%,#207cca 50%,#19094a 100%);color:#fff}.postbox-greengray{background-image:linear-gradient(to right,#c8dbbd 0%,#dedede 100%);color:#000}.postbox-tealgray{background-image:linear-gradient(to right,#8dcad0 0%,#dedede 100%);color:#000}.postbox-bluegray{background-image:linear-gradient(to right,#94bbeb 0%,#dedede 100%);color:#000}.postbox-lavendergray{background-image:linear-gradient(to right,#cfbfda 0%,#dedede 100%);color:#000}.postbox-sunset{background-image:linear-gradient(to bottom,#fecf41 0%,#fd7440 50%,#b623b1 100%);color:#fff}.postbox-sherbert{background-image:linear-gradient(45deg,#fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%);color:#000} \ No newline at end of file +[class^="postbox-"]{display:table-cell;height:350px;width:1000px;max-width:100%;vertical-align:middle;font-family:Arial,sans-serif;font-size:30px;font-weight:700;line-height:35px;text-align:center;padding:50px 30px;box-sizing:border-box}[class^="postbox-"] a{color:inherit!important}[class^="postbox-"]:hover a,[class^="postbox-"]:focus a{text-decoration:underline}[class^="postbox-"]:hover,[class^="postbox-"]:hover::before,[class^="postbox-"]:hover::after,[class^="postbox-"]:active,[class^="postbox-"]:active::before,[class^="postbox-"]:active::after{animation:none}.postbox-black{background-color:#000;color:#fff}.postbox-cornflowerblue,.postbox-blue{background-color:#6495ed;color:#fff}.postbox-darkblue,.postbox-ocean{background-color:#00008b;color:#fff}.postbox-darkgrey{background-color:#a9a9a9;color:#eee}.postbox-darkorange,.postbox-orange{background-color:#ff8c00;color:#000}.postbox-darkred{background-color:darkred;color:#fff}.postbox-darkslateblue{background-color:#483d8b;color:#fff}.postbox-forestgreen,.postbox-forest{background-color:#228b22;color:#fff}.postbox-gold{background-color:gold;color:#000}.postbox-goldenrod{background-color:#daa520;color:#fff}.postbox-honeydew{background-color:#f0fff0;color:#000}.postbox-hotpink{background-color:hotpink;color:#fff}.postbox-lavender{background-color:#e6e6fa;color:purple}.postbox-lightpink{background-color:#ffb6c1;color:#000}.postbox-lightyellow{background-color:#ffffe0;color:#000}.postbox-limegreen,.postbox-green{background-color:#32cd32;color:#fff}.postbox-lightsalmon,.postbox-salmon{background-color:#ffa07a;color:#000}.postbox-mediumaquamarine{background-color:#66CDAA;color:#fff}.postbox-mediumslateblue{background-color:#7b68ee;color:#fff}.postbox-mediumvioletred{background-color:#c71585;color:#fff}.postbox-mintcream{background-color:#f5fffa;color:#000}.postbox-olivedrab{background-color:#6b8e23;color:#fff}.postbox-palegreen{background-color:#98fb98;color:#000}.postbox-peachpuff{background-color:#ffdab9;color:#000}.postbox-pink{background-color:pink;color:#000}.postbox-purple{background-color:purple;color:#fff}.postbox-red{background-color:red;color:#fff}.postbox-seagreen{background-color:#2e8b57;color:#fff}.postbox-sienna{background-color:sienna;color:#fff}.postbox-skyblue{background-color:skyblue;color:#000}.postbox-thistle{background-color:thistle;color:#000}.postbox-violet{background-color:violet;color:lavender}.postbox-whitesmoke{background-color:#f5f5f5;color:#000}.postbox-yellowgreen{background-color:#9acd32;color:#fff}.postbox-aurora{background-size:100% 100%;background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0;background-image:radial-gradient(18% 28% at 24% 50%,#CEFAFFFF 7%,#073AFF00 100%),radial-gradient(18% 28% at 18% 71%,#FFFFFF59 6%,#073AFF00 100%),radial-gradient(70% 53% at 36% 76%,#73F2FFFF 0%,#073AFF00 100%),radial-gradient(42% 53% at 15% 94%,#FFFFFFFF 7%,#073AFF00 100%),radial-gradient(42% 53% at 34% 72%,#FFFFFFFF 7%,#073AFF00 100%),radial-gradient(18% 28% at 35% 87%,#FFFFFFFF 7%,#073AFF00 100%),radial-gradient(31% 43% at 7% 98%,#FFFFFFFF 24%,#073AFF00 100%),radial-gradient(21% 37% at 72% 23%,#D3FF6D9C 24%,#073AFF00 100%),radial-gradient(35% 56% at 91% 74%,#8A4FFFF5 9%,#073AFF00 100%),radial-gradient(74% 86% at 67% 38%,#6DFFAEF5 24%,#073AFF00 100%),linear-gradient(125deg,#4EB5FFFF 1%,#4C00FCFF 100%)}.postbox-bluegray{background-image:linear-gradient(to right,#94bbeb 0%,#dedede 100%);color:#000}.postbox-graygrey,.postbox-darkgray{background-image:linear-gradient(135deg,#777d88,#4f5766);color:#fff}.postbox-grayblack{background-image:linear-gradient(45deg,#5d6374,#16181d);color:#fff}.postbox-greengray{background-image:linear-gradient(to right,#c8dbbd 0%,#dedede 100%);color:#000}.postbox-lavendergray{background-image:linear-gradient(to right,#cfbfda 0%,#dedede 100%);color:#000}.postbox-minty{background-image:linear-gradient(135deg,#8fc7ad,#48e5a9);color:#000}.postbox-mintgray{background-image:linear-gradient(135deg,#8fc7ad,#48e5a9);color:#000}.postbox-rainbow{background:linear-gradient(135deg,#ff0000 0%,#f2af00 17%,#fff200 33%,#00e400 50%,#009cfe 69%,#935cf9 86%,#e40df2 100%);color:#fff;text-shadow:0 0 3px black,3px 3px 3px #000}.postbox-redblue{background-image:linear-gradient(45deg,#ff0047,#2c34c7);color:#fff}.postbox-sherbert,.postbox-sherbet{background-image:linear-gradient(45deg,#fcd6cd 6%,#f8bc44 25%,#fb7d88 44%,#fb7d88 64%,#fb7d88 64%,#fed640 100%);color:#000}.postbox-spectrum{background:linear-gradient(to right,darkred 0%,#ff0000 5%,#f2af00 17%,#fff200 33%,#00e400 50%,#009cfe 69%,#935cf9 86%,#e40df2 95%,darkmagenta 100%);color:#fff;text-shadow:0 0 3px black,3px 3px 3px #000}.postbox-strawberrycream{background:linear-gradient(to bottom,#fff2cd 0%,#ffa0ac 20%,#fea1ac 20%,#ff84a3 28%,#fd4f8c 40%,#d91b65 79%,#d61a64 79%,#c11a5f 100%);color:#fff}.postbox-sunset{background-image:linear-gradient(to bottom,#fecf41 0%,#fd7440 50%,#b623b1 100%);color:#fff}.postbox-tealblue{background-image:linear-gradient(to bottom,#4bdfdf 0%,#207cca 50%,#19094a 100%);color:#fff}.postbox-tealgray{background-image:linear-gradient(to right,#8dcad0 0%,#dedede 100%);color:#000}.postbox-violets{background-image:linear-gradient(45deg,#5d3fda,#fc36fd);color:#fff}.postbox-violetblue{background:linear-gradient(to bottom,#cc258f 0%,#9643b5 25%,#626cdd 48%,#629aed 71%,#80ebff 100%);color:#fff}.postbox-blueprint{background-color:blue;background-image:linear-gradient(lightblue 2px,transparent 2px),linear-gradient(90deg,lightblue 2px,transparent 2px),linear-gradient(lightblue 1px,transparent 1px),linear-gradient(90deg,lightblue 1px,transparent 1px);background-size:100px 100px,100px 100px,20px 20px,20px 20px;background-position:-2px -2px,-2px -2px,-1px -1px,-1px -1px;color:#fff;position:relative;z-index:0;font-family:'Bradley Hand','Comic-Sans MS',sans-serif!important;text-shadow:-2px 2px 2px midnightblue,2px 2px 2px blue,0 0 20px blue;box-shadow:inset 0 50px 100px #000}.postbox-birds{background:radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% bottom calc(-.8*50px),#BCE4FE calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) calc(2*50px) calc(-1*calc(1.5*50px + 18.75px)),radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% bottom calc(-.8*50px),#FEE993 calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) calc(-1*50px) calc(calc(1.5*50px + 18.75px)/-2),radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% top calc(-.8*50px),#FEE993 calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) 0 calc(1.5*50px + 18.75px),radial-gradient(calc(1.28*50px + 18.75px/2) at left 50% top calc(-.8*50px),#BCE4FE calc(100% - 18.75px),#FFFFFF calc(101% - 18.75px) 100%,#0000 101%) 50px calc(calc(1.5*50px + 18.75px)/ 2),linear-gradient(#BCE4FE 50%,#FEE993 0);background-size:calc(4*50px) calc(1.5*50px + 18.75px)}.postbox-checkered{background-image:repeating-conic-gradient(#000000 0% 25%,#AD0505 0% 50%);background-position:0 0,32px 32px;background-size:64px 64px;background-color:#AD0505;color:#fff}.postbox-cubes{background-image:linear-gradient(30deg,#B6AEE5 12%,transparent 12.5%,transparent 87%,#B6AEE5 87.5%,#B6AEE5),linear-gradient(150deg,#B6AEE5 12%,transparent 12.5%,transparent 87%,#B6AEE5 87.5%,#B6AEE5),linear-gradient(30deg,#B6AEE5 12%,transparent 12.5%,transparent 87%,#B6AEE5 87.5%,#B6AEE5),linear-gradient(150deg,#B6AEE5 12%,transparent 12.5%,transparent 87%,#B6AEE5 87.5%,#B6AEE5),linear-gradient(60deg,#B6AEE580 25%,transparent 25.5%,transparent 75%,#B6AEE580 75%,#B6AEE580),linear-gradient(60deg,#B6AEE580 25%,transparent 25.5%,transparent 75%,#B6AEE580 75%,#B6AEE580);background-size:100px 175px;background-position:0 0,0 0,50px 87.5px,50px 87.5px,0 0,50px 87.5px;background-color:#E4E4ED;text-shadow:-1px -1px 2px white,1px 1px 2px #fff}.postbox-lemonlime{background:radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% right calc(-.8*42px),#E5E500 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(-1*calc(1.8 * 42px + 10.5px)) 42px,radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% left calc(-.8*42px),#04E164 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(1.8 * 42px + 10.5px) calc(-1*42px),radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% right calc(-.8*42px),#04E164 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(calc(1.8 * 42px + 10.5px)/-2) calc(-1*42px),radial-gradient(calc(1.28 * 42px + 10.5px/2) at top 50% left calc(-.8*42px),#E5E500 calc(99.5% - 10.5px),#FFFFFF calc(101% - 10.5px) 99.5%,#0000 101%) calc(calc(1.8 * 42px + 10.5px)/ 2) 42px,linear-gradient(90deg,#E5E500 50%,#04E164 0);background-size:calc(1.8 * 42px + 10.5px) 168px;text-shadow:1px 1px 5px white,-1px -1px 5px #fff;font-size:52px!important;font-size:42px!important}.postbox-gingham{background-image:linear-gradient(0deg,rgb(226 9 4 / .6) 0% 25%,rgb(251 248 239 / .6) 25% 75%,rgb(226 9 4 / .6) 75% 100%),linear-gradient(90deg,rgb(226 9 4 / .6) 0% 25%,rgb(251 248 239 / .6) 25% 75%,rgb(226 9 4 / .6) 75% 100%);background-size:64px 64px,64px 64px;color:#fff;text-shadow:0 0 2px black,3px 3px 5px #000}.postbox-grid{background-image:linear-gradient(#027816 2px,transparent 2px),linear-gradient(to right,#027816 2px,transparent 2px);background-size:24px 24px;background-color:#000;color:lime;text-shadow:0 0 3px black,3px 3px 5px black,-3px -3px 5px #000}.postbox-hearts{background:radial-gradient(at 80% 80%,#FF6969 25.4%,#0000 26%),radial-gradient(at 20% 80%,#FF6969 25.4%,#0000 26%),conic-gradient(from -45deg at 50% 41%,#FF6969 90deg,#FFACAC 0) 21px 0;background-size:42px 42px;color:#fff;font-size:42px!important;text-shadow:2px 2px 3px darkred}.postbox-honeycomb{background:radial-gradient(circle farthest-side at 0% 50%,#FBEB00 23.5%,#0000 0)33.6px 48px,radial-gradient(circle farthest-side at 0% 50%,#EDBE03 24%,#0000 0)30.4px 48px,linear-gradient(#FBEB00 14%,#0000 0,#0000 85%,#FBEB00 0)0 0,linear-gradient(150deg,#FBEB00 24%,#EDBE03 0,#EDBE03 26%,#0000 0,#0000 74%,#EDBE03 0,#EDBE03 76%,#FBEB00 0)0 0,linear-gradient(30deg,#FBEB00 24%,#EDBE03 0,#EDBE03 26%,#0000 0,#0000 74%,#EDBE03 0,#EDBE03 76%,#FBEB00 0)0 0,linear-gradient(90deg,#EDBE03 2%,#FBEB00 0,#FBEB00 98%,#EDBE03 0%)0 0 #FBEB00;background-size:64px 96px;background-color:#FBEB00}.postbox-notebook{background:linear-gradient(to right,transparent 10%,#f7c1c1 10% 10.2%,transparent 10.5%),repeating-linear-gradient(#ebf8e1a2 10%,#b5def0 10%,#b5def0 10.2%,#ebf8e1a2 11%,#ebf8e1a2 18.5%);background-color:#ebf8e1;background-size:100% 25px,100% 100%;background-repeat:repeat-y,repeat;font-family:'Bradley Hand','Comic-Sans MS',sans-serif!important;color:#333}.postbox-plaid{background:repeating-linear-gradient(transparent,transparent 8px,#A19100 8px,#A19100 12px,transparent 12px,transparent 16px,#A19100 12px,#A19100 32px,transparent 32px,transparent 36px,#A19100 36px,#A19100 40px,transparent 40px,transparent 64px),repeating-linear-gradient(90deg,transparent,transparent 8px,#A19100 8px,#A19100 12px,transparent 12px,transparent 16px,#A19100 12px,#A19100 32px,transparent 32px,transparent 36px,#A19100 36px,#A19100 40px,transparent 40px,transparent 64px),#A50000;background-blend-mode:multiply;background-color:#A50000;color:#fff;text-shadow:0 0 2px black,3px 3px 5px #000}.postbox-polkadots{background-image:radial-gradient(#87D9E5 2px,transparent 2px),radial-gradient(#87D9E5 2px,transparent 2px);background-size:32px 32px;background-position:0 0,16px 16px;background-color:#1A8FE5;color:#fff;text-shadow:3px 3px 5px darkblue}.postbox-shadedots{background:conic-gradient(#0CBEFE 25%,#0000 0) 0 0/calc(2*50px) calc(50px/9.5),conic-gradient(#0CBEFE 25%,#0000 0) 0 0/calc(50px/9.5) calc(2*50px),repeating-conic-gradient(#0000 0 25%,#0CBEFE 0 50%) 50px 0 /calc(2*50px) calc(2*50px),radial-gradient(50% 50%,#1872A2 98%,#0CBEFE) 0 0/50px 50px;color:#fff;text-shadow:3px 3px 3px darkblue}.postbox-shadowbox{background-image:radial-gradient(rgb(0 0 0 / .2) 5px,transparent 2px),radial-gradient(ellipse at center,#969faa 0%,#6d7782 35%,#6c7680 35%,#28343b 99%);background-size:40px 40px,100% 100%;font-family:Impact,sans-serif!important;text-transform:uppercase;font-size:42px!important;line-height:52px!important;color:#ddd;text-shadow:0 5px 2px rgb(0 0 0 / .5),0 -1px 0 #fff}.postbox-stars{background:conic-gradient(from 162deg at calc(42px * .5) calc(42px * .68),#0D4975 36deg,#0000 0),conic-gradient(from 18deg at calc(42px * .19) calc(42px * .59),#0D4975 36deg,#0000 0),conic-gradient(from 306deg at calc(42px * .81) calc(42px * .59),#0D4975 36deg,#0000 0),#000000;background-position:0 calc(42px * 0.35);background-size:calc(42px + 1.7px) calc(42px + 1.7px);color:#fff}.postbox-warpgrid{background:radial-gradient(farthest-side at -33.33% 50%,#0000 52%,#027816 54% 57%,#0000 59%) 0 calc(128px/2),radial-gradient(farthest-side at 50% 133.33%,#0000 52%,#027816 54% 57%,#0000 59%) calc(128px/2) 0,radial-gradient(farthest-side at 133.33% 50%,#0000 52%,#027816 54% 57%,#0000 59%),radial-gradient(farthest-side at 50% -33.33%,#0000 52%,#027816 54% 57%,#0000 59%),#000000;background-size:calc(128px/4.667) 128px,128px calc(128px/4.667);color:lime;text-shadow:0 0 3px black,3px 3px 5px black,-3px -3px 5px #000}.postbox-wavy{background:radial-gradient(at bottom right,#57D2FF 0,#57D2FF 12.5px,#57D2FF33 12.5px,#57D2FF33 25px,#57D2FFBF 25px,#57D2FFBF 37.5px,#57D2FF40 37.5px,#57D2FF40 50px,#57D2FF4D 50px,#57D2FF4D 62.5px,#57D2FFBF 62.5px,#57D2FFBF 75px,#57D2FF33 75px,#57D2FF33 87.5px,transparent 87.5px,transparent 100px),radial-gradient(at top left,transparent 0,transparent 12.5px,#57D2FF33 12.5px,#57D2FF33 25px,#57D2FFBF 25px,#57D2FFBF 37.5px,#57D2FF4D 37.5px,#57D2FF4D 50px,#57D2FF40 50px,#57D2FF40 62.5px,#57D2FFBF 62.5px,#57D2FFBF 75px,#57D2FF33 75px,#57D2FF33 87.5px,#57D2FF 87.5px,#57D2FF 100px,transparent 100px,transparent 250px);background-blend-mode:multiply;background-size:100px 100px,100px 100px;background-color:#E4E4ED;color:darkblue} \ No newline at end of file From af0a0b3e787047fa3f7afdfa95768df716dba7c9 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 28 Apr 2025 11:55:28 -0500 Subject: [PATCH 239/268] Updated Changelog and Postbox usage info --- README.md | 104 ++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 78 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 16503df..6b9a31c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.6.4 +Version 1.6.5 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -161,39 +161,90 @@ To make use of a Friendica Postbox simply wrap the text inside a Postbox Class B `[class=postbox-red]This is the wrapped text[/class]` -#### Available Color Options +### Available Postbox styles -In the `[class]` opener add `postbox-` plus any one of the color names after the "=" sign. +Old names are in parenthesis next to the new names to which they've been mapped. **Solid Color Backgrounds:** -- postbox-black -- postbox-red -- postbox-green -- postbox-blue -- postbox-orange -- postbox-purple -- postbox-forest -- postbox-ocean -- postbox-pink -- postbox-salmon +- .postbox-black +- .postbox-cornflowerblue (.postbox-blue) +- .postbox-darkblue (.postbox-ocean) +- .postbox-darkgray +- .postbox-darkorange (.postbox-orange) +- .postbox-darkred +- .postbox-darkslateblue +- .postbox-forestgreen (.postbox-forest) +- .postbox-gold +- .postbox-goldenrod +- .postbox-honeydew +- .postbox-hotpink +- .postbox-lavender +- .postbox-lightpink +- .postbox-lightyellow +- .postbox-limegreen (.postbox-green) +- .postbox-lightsalmon (.postbox-salmon) +- .postbox-mediumaquamarine +- .postbox-mediumslateblue +- .postbox-mediumvioletred +- .postbox-mintcream +- .postbox-olivedrab +- .postbox-palegreen +- .postbox-peachpuff +- .postbox-pink +- .postbox-purple +- .postbox-red +- .postbox-seagreen +- .postbox-sienna +- .postbox-skyblue +- .postbox-thistle +- .postbox-violet +- .postbox-whitesmoke +- .postbox-yellowgreen **Gradient Backgrounds:** -- postbox-darkgray -- postbox-minty -- postbox-mintgray -- postbox-redblue -- postbox-violets -- postbox-grayblack -- postbox-tealblue -- postbox-greengray -- postbox-tealgray -- postbox-bluegray -- postbox-lavendergray -- postbox-sunset -- postbox-sherbert +- .postbox-aurora +- .postbox-bluegray +- .postbox-graygrey (.postbox-darkgray) +- .postbox-grayblack +- .postbox-greengray +- .postbox-lavendergray +- .postbox-minty +- .postbox-mintgray +- .postbox-rainbow +- .postbox-redblue +- .postbox-sherbet (.postbox-sherbert) +- .postbox-spectrum +- .postbox-strawberrycream +- .postbox-sunset +- .postbox-tealblue +- .postbox-tealgray +- .postbox-violets +- .postbox-violetblue + +**Pattern Backgrounds:** + +- .postbox-blueprint +- .postbox-birds +- .postbox-checkered +- .postbox-cubes +- .postbox-lemonlime +- .postbox-gingham +- .postbox-grid +- .postbox-hearts +- .postbox-honeycomb +- .postbox-notebook +- .postbox-plaid +- .postbox-polkadots +- .postbox-shadedots +- .postbox-shadowbox +- .postbox-stars +- .postbox-warpgrid +- .postbox-wavy + +(There are also _Animated Backgrounds_ but they are only available if either the "Postbox" or "Zen Postbox" add-on are installed and activated on the server) #### Content Restrictions @@ -351,6 +402,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Fixed Profile Pics and Cover Photos not working in old iOS browsers [Issue #26] * Moved Postbox styles to end of stylesheet * Minified Postbox CSS +* Updated with Postbox v1.1 styles 1.6 (25 Mar 2025) * Fixed HR rule on posts [Issue #13] From a2730bf7d2965df99ab989cb6fd9e4575e414b93 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 28 Apr 2025 13:07:33 -0500 Subject: [PATCH 240/268] Restyled Item Responses (part of Issue #25) --- bookface_light.css | 91 ++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 88 insertions(+), 3 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index 7adedb8..d92672c 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -828,14 +828,14 @@ ul.nav-tabs { left: 15px; } .vote-event .wall-item-response:nth-of-type(1) .button-event::after, - [id^="attendyes"]::after{ + .wall-item-actions-row [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{ + .wall-item-actions-row [id^="attendno"]::after{ content: var(--attendno-button-text); position: relative; height: 20px; @@ -845,7 +845,7 @@ ul.nav-tabs { left: 204px; } .vote-event .wall-item-response:nth-of-type(3) .button-event::after, - [id^="attendmaybe"]::after{ + .wall-item-actions-row [id^="attendmaybe"]::after{ content: var(--attendmaybe-button-text); } /* prevent "Like Like" and "Dislike Dislike" on photos */ @@ -1130,6 +1130,88 @@ ul.nav-tabs { .wall-item-actions .checkbox { padding-top: 6px !important; } + /* WALL ITEM RESPONSES */ + .wall-item-responses > div { + position: relative; + } + .wall-item-responses > div > p:first-of-type::before, + .hide-comments::before, .hide-comments-total::before { + display: inline-block; + margin-right: 3px; + font-family: ForkAwesome; + font-weight: lighter; + font-size: 12px; + text-align: center; + color: white; + width: 20px; + height:20px; + padding: 2px; + line-height: 16px; + border-radius: 100%; + } + .wall-item-responses .wall-item-like > p:first-of-type::before { + content: '\f164'; + background-color: #0066FF; + } + .wall-item-responses .wall-item-dislike > p:first-of-type::before { + content: '\f165'; + background-color: red; + } + .wall-item-responses .wall-item-announce > p:first-of-type::before{ + content: '\f079'; + background-color: #00c100; + } + .wall-item-responses .wall-item-attendyes > p:first-of-type::before{ + content: '\f00c'; + background-color: #00c100; + } + .wall-item-responses .wall-item-attendno > p:first-of-type::before{ + content: '\f00d'; + background-color: red; + } + .wall-item-responses .wall-item-attendmaybe > p:first-of-type::before{ + content: '\f128'; + background-color: orange; + } + .wall-item-responses div p[class*="-expanded"] { + background-color: rgba(0,0,0,.8); + position: absolute; + bottom: 100%; + padding: 10px; + margin-left: 23px; + border-radius: 8px; + width: 200px; + max-height: 415px; + font-size: 0px; + color: transparent; + overflow: hidden; + box-shadow: 0px 5px 5px rgba(0,0,0,.3); + z-index: 10; + } + .wall-item-responses div p[class*="-expanded"]:hover, + .wall-item-responses div p[class*="-expanded"]:focus { + overflow-y: auto; + } + .wall-item-responses div p[class*="-expanded"] a { + color: white !important; + display: block; + max-width: 100%; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 14px; + overflow: hidden; + } + .wall-item-responses div p[class*="-expanded"] a:nth-of-type(74){ + overflow: visible; + } + .wall-item-responses div p[class*="-expanded"] a:nth-of-type(74)::after { + content: 'and others...'; + display: block; + } + .hide-comments::before, .hide-comments-total::before { + content: '\f27a'; + background-color: #0066FF; + } .comment .media-body { padding: 10px; background-color: var(--comment-bg); @@ -2106,6 +2188,9 @@ body.mod-settings #delegation .contact-block-img { display: block; background-color: var(--background-color); } + .wall-item-responses div p[class*="-expanded"] { + overflow-y: auto; + } } /* Most Phones in Portrait Orientation Large Screen Phones in Landscape Orientation From 9f87ae86d7fe2e2231c95775913711461865e7fd Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 28 Apr 2025 13:08:01 -0500 Subject: [PATCH 241/268] Restyled Item Responses (part of Issue #25) --- bookface_dark.css | 93 +++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 89 insertions(+), 4 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index dc1bf80..2424838 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,6 +1,6 @@ /* Name : Bookface Dark - Version : 1.6.5 + Version : 1.6.6 Licence : AGPL Created on : 28 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -828,14 +828,14 @@ aside .widget, left: 15px; } .vote-event .wall-item-response:nth-of-type(1) .button-event::after, - [id^="attendyes"]::after{ + .wall-item-actions-row [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{ + .wall-item-actions-row [id^="attendno"]::after{ content: var(--attendno-button-text); position: relative; height: 20px; @@ -845,7 +845,7 @@ aside .widget, left: 204px; } .vote-event .wall-item-response:nth-of-type(3) .button-event::after, - [id^="attendmaybe"]::after{ + .wall-item-actions-row [id^="attendmaybe"]::after{ content: var(--attendmaybe-button-text); } /* prevent "Like Like" and "Dislike Dislike" on photos */ @@ -1130,6 +1130,88 @@ aside .widget li:hover { .wall-item-actions .checkbox { padding-top: 6px !important; } + /* WALL ITEM RESPONSES */ + .wall-item-responses > div { + position: relative; + } + .wall-item-responses > div > p:first-of-type::before, + .hide-comments::before, .hide-comments-total::before { + display: inline-block; + margin-right: 3px; + font-family: ForkAwesome; + font-weight: lighter; + font-size: 12px; + text-align: center; + color: white; + width: 20px; + height:20px; + padding: 2px; + line-height: 16px; + border-radius: 100%; + } + .wall-item-responses .wall-item-like > p:first-of-type::before { + content: '\f164'; + background-color: #0066FF; + } + .wall-item-responses .wall-item-dislike > p:first-of-type::before { + content: '\f165'; + background-color: red; + } + .wall-item-responses .wall-item-announce > p:first-of-type::before{ + content: '\f079'; + background-color: #00c100; + } + .wall-item-responses .wall-item-attendyes > p:first-of-type::before{ + content: '\f00c'; + background-color: #00c100; + } + .wall-item-responses .wall-item-attendno > p:first-of-type::before{ + content: '\f00d'; + background-color: red; + } + .wall-item-responses .wall-item-attendmaybe > p:first-of-type::before{ + content: '\f128'; + background-color: orange; + } + .wall-item-responses div p[class*="-expanded"] { + background-color: rgba(0,0,0,.8); + position: absolute; + bottom: 100%; + padding: 10px; + margin-left: 23px; + border-radius: 8px; + width: 200px; + max-height: 415px; + font-size: 0px; + color: transparent; + overflow: hidden; + box-shadow: 0px 5px 5px rgba(0,0,0,.3); + z-index: 10; + } + .wall-item-responses div p[class*="-expanded"]:hover, + .wall-item-responses div p[class*="-expanded"]:focus { + overflow-y: auto; + } + .wall-item-responses div p[class*="-expanded"] a { + color: white !important; + display: block; + max-width: 100%; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 14px; + overflow: hidden; + } + .wall-item-responses div p[class*="-expanded"] a:nth-of-type(74){ + overflow: visible; + } + .wall-item-responses div p[class*="-expanded"] a:nth-of-type(74)::after { + content: 'and others...'; + display: block; + } + .hide-comments::before, .hide-comments-total::before { + content: '\f27a'; + background-color: #0066FF; + } .comment .media-body { padding: 10px; background-color: var(--comment-bg); @@ -2106,6 +2188,9 @@ body.mod-settings #delegation .contact-block-img { display: block; background-color: var(--background-color); } + .wall-item-responses div p[class*="-expanded"] { + overflow-y: auto; + } } /* Most Phones in Portrait Orientation Large Screen Phones in Landscape Orientation From a7a2f6665aaec9ea51c1c13b0a7234a8908ef9b6 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 28 Apr 2025 13:13:10 -0500 Subject: [PATCH 242/268] Styled Item Responses (part of Issue #25) --- bookface_auto.css | 184 ++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 177 insertions(+), 7 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 7b67205..1e3195a 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,6 +1,6 @@ /* Name : Bookface Auto Color Mode - Version : 1.6.5 + Version : 1.6.6 Licence : AGPL Created on : 28 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -828,14 +828,14 @@ left: 15px; } .vote-event .wall-item-response:nth-of-type(1) .button-event::after, - [id^="attendyes"]::after{ + .wall-item-actions-row [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{ + .wall-item-actions-row [id^="attendno"]::after{ content: var(--attendno-button-text); position: relative; height: 20px; @@ -845,7 +845,7 @@ left: 204px; } .vote-event .wall-item-response:nth-of-type(3) .button-event::after, - [id^="attendmaybe"]::after{ + .wall-item-actions-row [id^="attendmaybe"]::after{ content: var(--attendmaybe-button-text); } /* prevent "Like Like" and "Dislike Dislike" on photos */ @@ -1130,6 +1130,88 @@ .wall-item-actions .checkbox { padding-top: 6px !important; } + /* WALL ITEM RESPONSES */ + .wall-item-responses > div { + position: relative; + } + .wall-item-responses > div > p:first-of-type::before, + .hide-comments::before, .hide-comments-total::before { + display: inline-block; + margin-right: 3px; + font-family: ForkAwesome; + font-weight: lighter; + font-size: 12px; + text-align: center; + color: white; + width: 20px; + height:20px; + padding: 2px; + line-height: 16px; + border-radius: 100%; + } + .wall-item-responses .wall-item-like > p:first-of-type::before { + content: '\f164'; + background-color: #0066FF; + } + .wall-item-responses .wall-item-dislike > p:first-of-type::before { + content: '\f165'; + background-color: red; + } + .wall-item-responses .wall-item-announce > p:first-of-type::before{ + content: '\f079'; + background-color: #00c100; + } + .wall-item-responses .wall-item-attendyes > p:first-of-type::before{ + content: '\f00c'; + background-color: #00c100; + } + .wall-item-responses .wall-item-attendno > p:first-of-type::before{ + content: '\f00d'; + background-color: red; + } + .wall-item-responses .wall-item-attendmaybe > p:first-of-type::before{ + content: '\f128'; + background-color: orange; + } + .wall-item-responses div p[class*="-expanded"] { + background-color: rgba(0,0,0,.8); + position: absolute; + bottom: 100%; + padding: 10px; + margin-left: 23px; + border-radius: 8px; + width: 200px; + max-height: 415px; + font-size: 0px; + color: transparent; + overflow: hidden; + box-shadow: 0px 5px 5px rgba(0,0,0,.3); + z-index: 10; + } + .wall-item-responses div p[class*="-expanded"]:hover, + .wall-item-responses div p[class*="-expanded"]:focus { + overflow-y: auto; + } + .wall-item-responses div p[class*="-expanded"] a { + color: white !important; + display: block; + max-width: 100%; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 14px; + overflow: hidden; + } + .wall-item-responses div p[class*="-expanded"] a:nth-of-type(74){ + overflow: visible; + } + .wall-item-responses div p[class*="-expanded"] a:nth-of-type(74)::after { + content: 'and others...'; + display: block; + } + .hide-comments::before, .hide-comments-total::before { + content: '\f27a'; + background-color: #0066FF; + } .comment .media-body { padding: 10px; background-color: var(--comment-bg); @@ -2115,6 +2197,9 @@ body.mod-settings #delegation .contact-block-img { display: block; background-color: var(--background-color); } + .wall-item-responses div p[class*="-expanded"] { + overflow-y: auto; + } } /* Most Phones in Portrait Orientation Large Screen Phones in Landscape Orientation @@ -3698,14 +3783,14 @@ p.wall-item-announce, left: 15px; } .vote-event .wall-item-response:nth-of-type(1) .button-event::after, - [id^="attendyes"]::after{ + .wall-item-actions-row [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{ + .wall-item-actions-row [id^="attendno"]::after{ content: var(--attendno-button-text); position: relative; height: 20px; @@ -3715,7 +3800,7 @@ p.wall-item-announce, left: 204px; } .vote-event .wall-item-response:nth-of-type(3) .button-event::after, - [id^="attendmaybe"]::after{ + .wall-item-actions-row [id^="attendmaybe"]::after{ content: var(--attendmaybe-button-text); } /* prevent "Like Like" and "Dislike Dislike" on photos */ @@ -4023,6 +4108,88 @@ aside .widget li:hover { .wall-item-actions .checkbox { padding-top: 6px !important; } + /* WALL ITEM RESPONSES */ + .wall-item-responses > div { + position: relative; + } + .wall-item-responses > div > p:first-of-type::before, + .hide-comments::before, .hide-comments-total::before { + display: inline-block; + margin-right: 3px; + font-family: ForkAwesome; + font-weight: lighter; + font-size: 12px; + text-align: center; + color: white; + width: 20px; + height:20px; + padding: 2px; + line-height: 16px; + border-radius: 100%; + } + .wall-item-responses .wall-item-like > p:first-of-type::before { + content: '\f164'; + background-color: #0066FF; + } + .wall-item-responses .wall-item-dislike > p:first-of-type::before { + content: '\f165'; + background-color: red; + } + .wall-item-responses .wall-item-announce > p:first-of-type::before{ + content: '\f079'; + background-color: #00c100; + } + .wall-item-responses .wall-item-attendyes > p:first-of-type::before{ + content: '\f00c'; + background-color: #00c100; + } + .wall-item-responses .wall-item-attendno > p:first-of-type::before{ + content: '\f00d'; + background-color: red; + } + .wall-item-responses .wall-item-attendmaybe > p:first-of-type::before{ + content: '\f128'; + background-color: orange; + } + .wall-item-responses div p[class*="-expanded"] { + background-color: rgba(0,0,0,.8); + position: absolute; + bottom: 100%; + padding: 10px; + margin-left: 23px; + border-radius: 8px; + width: 200px; + max-height: 415px; + font-size: 0px; + color: transparent; + overflow: hidden; + box-shadow: 0px 5px 5px rgba(0,0,0,.3); + z-index: 10; + } + .wall-item-responses div p[class*="-expanded"]:hover, + .wall-item-responses div p[class*="-expanded"]:focus { + overflow-y: auto; + } + .wall-item-responses div p[class*="-expanded"] a { + color: white !important; + display: block; + max-width: 100%; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 14px; + overflow: hidden; + } + .wall-item-responses div p[class*="-expanded"] a:nth-of-type(74){ + overflow: visible; + } + .wall-item-responses div p[class*="-expanded"] a:nth-of-type(74)::after { + content: 'and others...'; + display: block; + } + .hide-comments::before, .hide-comments-total::before { + content: '\f27a'; + background-color: #0066FF; + } .comment .media-body { padding: 10px; background-color: var(--comment-bg); @@ -4987,6 +5154,9 @@ a.tag.label, display: block; background-color: var(--background-color); } + .wall-item-responses div p[class*="-expanded"] { + overflow-y: auto; + } } /* Most Phones in Portrait Orientation Large Screen Phones in Landscape Orientation From ad2aaadf2a3f294464fa78aea94df312920ce026 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 28 Apr 2025 13:23:29 -0500 Subject: [PATCH 243/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 6b9a31c..02ba1e9 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.6.5 +Version 1.6.6 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -403,6 +403,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Moved Postbox styles to end of stylesheet * Minified Postbox CSS * Updated with Postbox v1.1 styles +* Styled Item Responses (part of Issue #25) 1.6 (25 Mar 2025) * Fixed HR rule on posts [Issue #13] From a84d063497eff7752cad713c2ca1637570f9b5bf Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 28 Apr 2025 13:41:58 -0500 Subject: [PATCH 244/268] Fix for Issue #25 --- bookface_light.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/bookface_light.css b/bookface_light.css index d92672c..c8248a0 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,6 +1,6 @@ /* Name : Bookface Light - Version : 1.6.5 + Version : 1.6.7 Licence : AGPL Created on : 28 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -1125,6 +1125,9 @@ ul.nav-tabs { color: var(--nav-icon-color) !important; } .wall-item-actions button:hover { + filter: brightness(.75); + } + .wall-item-actions button.active { color: var(--link-color) !important; } .wall-item-actions .checkbox { From 4e7d5e8be7022f39c0d531f7ddd30ab0b4a8845c Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 28 Apr 2025 13:44:01 -0500 Subject: [PATCH 245/268] Fix for Issue #25 --- bookface_dark.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 2424838..71cd47f 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,6 +1,6 @@ /* Name : Bookface Dark - Version : 1.6.6 + Version : 1.6.7 Licence : AGPL Created on : 28 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -1124,9 +1124,12 @@ aside .widget li:hover { font-size: 24px !important; color: var(--nav-icon-color) !important; } - .wall-item-actions button:hover { - color: var(--link-color) !important; - } + .wall-item-actions button:hover { + filter: brightness(1.25); + } + .wall-item-actions button.active { + color: var(--link-color) !important; + } .wall-item-actions .checkbox { padding-top: 6px !important; } From 8c69446e1179da425ec66195dfa7e1757bfa2449 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 28 Apr 2025 13:45:19 -0500 Subject: [PATCH 246/268] Fix for Issue #25 --- bookface_auto.css | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 1e3195a..0f1de66 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,6 +1,6 @@ /* Name : Bookface Auto Color Mode - Version : 1.6.6 + Version : 1.6.7 Licence : AGPL Created on : 28 APR 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -1125,6 +1125,9 @@ color: var(--nav-icon-color) !important; } .wall-item-actions button:hover { + filter: brightness(.75); + } + .wall-item-actions button.active { color: var(--link-color) !important; } .wall-item-actions .checkbox { @@ -4102,9 +4105,12 @@ aside .widget li:hover { font-size: 24px !important; color: var(--nav-icon-color) !important; } - .wall-item-actions button:hover { - color: var(--link-color) !important; - } + .wall-item-actions button:hover { + filter: brightness(1.25); + } + .wall-item-actions button.active { + color: var(--link-color) !important; + } .wall-item-actions .checkbox { padding-top: 6px !important; } From bbf9e59732c8b933431adf2ce7fa3aa1ee64516a Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 28 Apr 2025 13:48:09 -0500 Subject: [PATCH 247/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 02ba1e9..56d93be 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.6.6 +Version 1.6.7 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -404,6 +404,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Minified Postbox CSS * Updated with Postbox v1.1 styles * Styled Item Responses (part of Issue #25) +* Action buttons (except Comment and Quote) you've interacted with before now adopt accent color (Issue #25) 1.6 (25 Mar 2025) * Fixed HR rule on posts [Issue #13] From 2636056012a49f982902f82fe4e60e002c5217d7 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Mon, 28 Apr 2025 13:53:15 -0500 Subject: [PATCH 248/268] Updated Changelog --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 56d93be..d46053a 100644 --- a/README.md +++ b/README.md @@ -404,7 +404,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Minified Postbox CSS * Updated with Postbox v1.1 styles * Styled Item Responses (part of Issue #25) -* Action buttons (except Comment and Quote) you've interacted with before now adopt accent color (Issue #25) +* Action buttons (except Comment and Quote) you've interacted with before now adopt accent color [Issue #25] 1.6 (25 Mar 2025) * Fixed HR rule on posts [Issue #13] From 62f4f0ecd5717dbe2cbcd7a1b22bb5cbd78061e9 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 1 May 2025 18:45:46 -0500 Subject: [PATCH 249/268] Fix for disabled Action Buttons --- bookface_auto.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 0f1de66..dddc348 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,8 +1,8 @@ /* Name : Bookface Auto Color Mode - Version : 1.6.7 + Version : 1.6.8 Licence : AGPL - Created on : 28 APR 2025 + Created on : 01 MAY 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -795,6 +795,10 @@ .more-links .dropdown-toggle::after { content: var(--more-button-text); } + .wall-item-actions-row button[disabled, + .wall-item-actions-right button[disabled] { + opacity: .5; + } /* engagement counts */ .wall-item-actions-row > button span, .wall-item-response span { @@ -3753,6 +3757,10 @@ p.wall-item-announce, .more-links .dropdown-toggle::after { content: var(--more-button-text); } + .wall-item-actions-row button[disabled, + .wall-item-actions-right button[disabled] { + opacity: .5; + } /* engagement counts */ .wall-item-actions-row > button span, .wall-item-response span { From 1b171dfd0900efe3fbdcac7746df46f55903e18c Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 1 May 2025 18:46:22 -0500 Subject: [PATCH 250/268] Fix for disabled Action Buttons --- bookface_dark.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 71cd47f..501ac81 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,8 +1,8 @@ /* Name : Bookface Dark - Version : 1.6.7 + Version : 1.6.8 Licence : AGPL - Created on : 28 APR 2025 + Created on : 01 MAY 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -795,6 +795,10 @@ aside .widget, .more-links .dropdown-toggle::after { content: var(--more-button-text); } + .wall-item-actions-row button[disabled, + .wall-item-actions-right button[disabled] { + opacity: .5; + } /* engagement counts */ .wall-item-actions-row > button span, .wall-item-response span { From d87a5fa77601ea484b52998ea554a3f8e3c3f2a8 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 1 May 2025 18:47:02 -0500 Subject: [PATCH 251/268] Fix for disabled Action Buttons --- bookface_light.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index c8248a0..464efbd 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,8 +1,8 @@ /* Name : Bookface Light - Version : 1.6.7 + Version : 1.6.8 Licence : AGPL - Created on : 28 APR 2025 + Created on : 01 MAY 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -795,6 +795,10 @@ ul.nav-tabs { .more-links .dropdown-toggle::after { content: var(--more-button-text); } + .wall-item-actions-row button[disabled, + .wall-item-actions-right button[disabled] { + opacity: .5; + } /* engagement counts */ .wall-item-actions-row > button span, .wall-item-response span { From 5a3247293382eb26e2045913eb9ed40b49b79734 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 1 May 2025 18:47:41 -0500 Subject: [PATCH 252/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d46053a..8d34446 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.6.7 +Version 1.6.8 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -405,6 +405,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Updated with Postbox v1.1 styles * Styled Item Responses (part of Issue #25) * Action buttons (except Comment and Quote) you've interacted with before now adopt accent color [Issue #25] +* Fix for disabled Action Buttons 1.6 (25 Mar 2025) * Fixed HR rule on posts [Issue #13] From 386e5823e138710555379ba8efde7ec10f927dd8 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 1 May 2025 18:55:00 -0500 Subject: [PATCH 253/268] Fixed breaking typos --- bookface_auto.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index dddc348..a385df6 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -795,7 +795,7 @@ .more-links .dropdown-toggle::after { content: var(--more-button-text); } - .wall-item-actions-row button[disabled, + .wall-item-actions-row button[disabled], .wall-item-actions-right button[disabled] { opacity: .5; } @@ -3757,7 +3757,7 @@ p.wall-item-announce, .more-links .dropdown-toggle::after { content: var(--more-button-text); } - .wall-item-actions-row button[disabled, + .wall-item-actions-row button[disabled], .wall-item-actions-right button[disabled] { opacity: .5; } From 9bbeefa43a7ee568aa5a8e1195432f1004b5a793 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 1 May 2025 18:55:30 -0500 Subject: [PATCH 254/268] Fixed breaking typo --- bookface_dark.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 501ac81..3e1b1eb 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,6 +1,6 @@ /* Name : Bookface Dark - Version : 1.6.8 + Version : 1.6.9 Licence : AGPL Created on : 01 MAY 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -795,7 +795,7 @@ aside .widget, .more-links .dropdown-toggle::after { content: var(--more-button-text); } - .wall-item-actions-row button[disabled, + .wall-item-actions-row button[disabled], .wall-item-actions-right button[disabled] { opacity: .5; } From 1aefeb96cbeac21b6344a75b8ea36f2e653c08ee Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 1 May 2025 18:55:57 -0500 Subject: [PATCH 255/268] Fixed breaking typo --- bookface_light.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index 464efbd..adc24ee 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,6 +1,6 @@ /* Name : Bookface Light - Version : 1.6.8 + Version : 1.6.9 Licence : AGPL Created on : 01 MAY 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml @@ -795,7 +795,7 @@ ul.nav-tabs { .more-links .dropdown-toggle::after { content: var(--more-button-text); } - .wall-item-actions-row button[disabled, + .wall-item-actions-row button[disabled], .wall-item-actions-right button[disabled] { opacity: .5; } From 4cc4f4c6d25fb633c89a1354b388c808055fbaac Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 1 May 2025 18:56:38 -0500 Subject: [PATCH 256/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8d34446..572f2f4 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.6.8 +Version 1.6.9 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -406,6 +406,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Styled Item Responses (part of Issue #25) * Action buttons (except Comment and Quote) you've interacted with before now adopt accent color [Issue #25] * Fix for disabled Action Buttons +* Fixed breaking typo 1.6 (25 Mar 2025) * Fixed HR rule on posts [Issue #13] From 81f75faf0ac67f5c930ac740731bf6f1412f1a4d Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 3 May 2025 14:52:59 -0500 Subject: [PATCH 257/268] Fix(?) for slow-loading second toolbar in Safari --- bookface_light.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index adc24ee..1a8c6db 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,8 +1,8 @@ /* Name : Bookface Light - Version : 1.6.9 + Version : 1.7.0 Licence : AGPL - Created on : 01 MAY 2025 + Created on : 03 MAY 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -2084,8 +2084,10 @@ body.mod-settings #delegation .contact-block-img { :blank works but is poorly supported, :not(has(*)) works but not in old browsers */ - body.mod-profile aside:not(:has(*)) + #content { - margin-top: 0; + @supports not (background: -webkit-named-image(i)) { + body.mod-profile aside:not(:has(*)) + #content { + margin-top: 0; + } } } body.mod-contact aside, From c738654f984e91c15d6b04235b166765cc6785a8 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 3 May 2025 14:53:51 -0500 Subject: [PATCH 258/268] Fix(?) for slow-loading second toolbar in Safari --- bookface_dark.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 3e1b1eb..5d29e61 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,8 +1,8 @@ /* Name : Bookface Dark - Version : 1.6.9 + Version : 1.7.0 Licence : AGPL - Created on : 01 MAY 2025 + Created on : 03 MAY 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -2084,8 +2084,10 @@ body.mod-settings #delegation .contact-block-img { :blank works but is poorly supported, :not(has(*)) works but not in old browsers */ - body.mod-profile aside:not(:has(*)) + #content { - margin-top: 0; + @supports not (background: -webkit-named-image(i)) { + body.mod-profile aside:not(:has(*)) + #content { + margin-top: 0; + } } } body.mod-contact aside, From 0fcadbfa793adb90aa5ce802ee84358d8e53569e Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 3 May 2025 14:55:04 -0500 Subject: [PATCH 259/268] Fix(?) for slow-loading second toolbar in Safari --- bookface_auto.css | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index a385df6..2283ab7 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,8 +1,8 @@ /* Name : Bookface Auto Color Mode - Version : 1.6.8 + Version : 1.7.0 Licence : AGPL - Created on : 01 MAY 2025 + Created on : 03 MAY 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -2093,8 +2093,10 @@ body.mod-settings #delegation .contact-block-img { :blank works but is poorly supported, :not(has(*)) works but not in old browsers */ - body.mod-profile aside:not(:has(*)) + #content { - margin-top: 0; + @supports not (background: -webkit-named-image(i)) { + body.mod-profile aside:not(:has(*)) + #content { + margin-top: 0; + } } } body.mod-contact aside, @@ -5057,8 +5059,10 @@ a.tag.label, :blank works but is poorly supported, :not(has(*)) works but not in old browsers */ - body.mod-profile aside:not(:has(*)) + #content { - margin-top: 0; + @supports not (background: -webkit-named-image(i)) { + body.mod-profile aside:not(:has(*)) + #content { + margin-top: 0; + } } } body.mod-contact aside, From b00842389505bd77497391f098c0a0a841e85042 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Sat, 3 May 2025 14:55:53 -0500 Subject: [PATCH 260/268] Updated Changelog --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 572f2f4..1a897bc 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.6.9 +Version 1.7.0 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -407,6 +407,7 @@ I figured out how the "Frio" theme worked by looking at the code. I may not be 1 * Action buttons (except Comment and Quote) you've interacted with before now adopt accent color [Issue #25] * Fix for disabled Action Buttons * Fixed breaking typo +* Fix(?) for slow-loading secondary toolbar in Safari 1.6 (25 Mar 2025) * Fixed HR rule on posts [Issue #13] From e129dd4d7edd99043bd4215f3b1a6c44c287e8a0 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Tue, 6 May 2025 12:51:18 -0500 Subject: [PATCH 261/268] Updated Changelog --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 1a897bc..e371bd1 100644 --- a/README.md +++ b/README.md @@ -398,6 +398,7 @@ And then use it in your stylesheet like so: I figured out how the "Frio" theme worked by looking at the code. I may not be 100% correct about it since I did not create the theme. If someone knows more and I'm wrong about any of this please correct this document at https://gitlab.com/randompenguin/bookface ## CHANGELOG: +1.7 (06 May 2025) * Fixed "New Message" button not being obvious [Issue #24] * Fixed Profile Pics and Cover Photos not working in old iOS browsers [Issue #26] * Moved Postbox styles to end of stylesheet From f74a279231d27ba53fd128dab872bfe62a3e81bf Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 7 May 2025 14:30:10 -0500 Subject: [PATCH 262/268] Updated version number --- bookface_auto.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_auto.php b/bookface_auto.php index 71d9866..65ba5f9 100644 --- a/bookface_auto.php +++ b/bookface_auto.php @@ -10,7 +10,7 @@ * Author: Pygoscelis Papua @randompenguin@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.6 + * Version: 1.7 */ // if there is no cookie create one use Friendica\DI; From bf37887600fc3dab1671bf16f8c023a3fc8a168c Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 7 May 2025 14:30:33 -0500 Subject: [PATCH 263/268] Updated version number --- bookface_dark.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_dark.php b/bookface_dark.php index f68a4be..ff30541 100644 --- a/bookface_dark.php +++ b/bookface_dark.php @@ -10,7 +10,7 @@ * Author: Pygoscelis Papua @randompenguin@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.6 + * Version: 1.7 */ use Friendica\DI; require_once 'view/theme/frio/php/PHPColors/Color.php'; From 1d3b333cc43fe73fa2bafad701bd2ffbd45e9123 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Wed, 7 May 2025 14:30:54 -0500 Subject: [PATCH 264/268] Updated version number --- bookface_light.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bookface_light.php b/bookface_light.php index a09834d..47f71ae 100644 --- a/bookface_light.php +++ b/bookface_light.php @@ -10,7 +10,7 @@ * Author: Pygoscelis Papua @randompenguin@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.6 + * Version: 1.7 */ use Friendica\DI; require_once 'view/theme/frio/php/PHPColors/Color.php'; From b4a4c71081c2937d6575df912c79dbc67f7e3768 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 15 May 2025 14:06:19 -0500 Subject: [PATCH 265/268] Fixed transparent friends in common list --- bookface_light.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/bookface_light.css b/bookface_light.css index 1a8c6db..aef7f4a 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,8 +1,8 @@ /* Name : Bookface Light - Version : 1.7.0 + Version : 1.7.1 Licence : AGPL - Created on : 03 MAY 2025 + Created on : 15 MAY 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -591,6 +591,9 @@ ul.nav-tabs { display: block; padding-right: 30px; } + #rfic-desc, #remote-friends-in-common { + background-color: var(--content-bg); + } #contact-edit-status-wrapper { margin: 15px 0px !important; border-radius: 10px; From f393644de7932aa8d7db0c2fe3039ca22b199412 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 15 May 2025 14:06:59 -0500 Subject: [PATCH 266/268] Fixed transparent friends in common list --- bookface_dark.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/bookface_dark.css b/bookface_dark.css index 5d29e61..fb1dcdc 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,8 +1,8 @@ /* Name : Bookface Dark - Version : 1.7.0 + Version : 1.7.1 Licence : AGPL - Created on : 03 MAY 2025 + Created on : 15 MAY 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -591,6 +591,9 @@ header #banner { display: block; padding-right: 30px; } + #rfic-desc, #remote-friends-in-common { + background-color: var(--content-bg); + } #contact-edit-status-wrapper { margin: 15px 0px !important; border-radius: 10px; From d905c7898748522680d7e6d67c686ffee4654121 Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 15 May 2025 14:07:48 -0500 Subject: [PATCH 267/268] Fixed transparent friends in common list --- bookface_auto.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/bookface_auto.css b/bookface_auto.css index 2283ab7..566a0e9 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,8 +1,8 @@ /* Name : Bookface Auto Color Mode - Version : 1.7.0 + Version : 1.7.1 Licence : AGPL - Created on : 03 MAY 2025 + Created on : 15 MAY 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -591,6 +591,9 @@ display: block; padding-right: 30px; } + #rfic-desc, #remote-friends-in-common { + background-color: var(--content-bg); + } #contact-edit-status-wrapper { margin: 15px 0px !important; border-radius: 10px; @@ -3519,6 +3522,9 @@ header #banner { display: block; padding-right: 30px; } + #rfic-desc, #remote-friends-in-common { + background-color: var(--content-bg); + } #contact-edit-status-wrapper { margin: 15px 0px !important; border-radius: 10px; From 85ac7849840ef41f8327bc8ae0a82f3b9c574c7b Mon Sep 17 00:00:00 2001 From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com> Date: Thu, 15 May 2025 14:08:33 -0500 Subject: [PATCH 268/268] Updated Changelog --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e371bd1..6cc96cc 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.7.0 +Version 1.7.1 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -398,6 +398,8 @@ And then use it in your stylesheet like so: I figured out how the "Frio" theme worked by looking at the code. I may not be 100% correct about it since I did not create the theme. If someone knows more and I'm wrong about any of this please correct this document at https://gitlab.com/randompenguin/bookface ## CHANGELOG: +* Fixed transparent background on friends-in-common list on other people's profiles. + 1.7 (06 May 2025) * Fixed "New Message" button not being obvious [Issue #24] * Fixed Profile Pics and Cover Photos not working in old iOS browsers [Issue #26]