diff --git a/README.md b/README.md index 715d686..6cc96cc 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.6 +Version 1.7.1 **Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover. @@ -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 @@ -160,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 @@ -346,6 +398,20 @@ 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] +* Moved Postbox styles to end of stylesheet +* 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] +* 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] * Fixed notifcation profile pics so they are round [Issue #14] diff --git a/bookface_auto.css b/bookface_auto.css index cb52a0b..566a0e9 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,8 +1,8 @@ /* Name : Bookface Auto Color Mode - Version : 1.6 + Version : 1.7.1 Licence : AGPL - Created on : 25 Mar 2025 + Created on : 15 MAY 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -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 { @@ -590,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; @@ -794,6 +798,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 { @@ -827,14 +835,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; @@ -844,7 +852,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 */ @@ -1124,11 +1132,96 @@ 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 { 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); @@ -1545,6 +1638,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; } @@ -1811,126 +1919,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 =========================== */ @@ -2064,6 +2052,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 { @@ -2087,6 +2082,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; } @@ -2095,8 +2096,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, @@ -2206,6 +2209,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 @@ -2568,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); @@ -2576,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, @@ -3513,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; @@ -3753,6 +3765,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 { @@ -3786,14 +3802,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; @@ -3803,7 +3819,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 */ @@ -4105,12 +4121,97 @@ 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; } + /* 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); @@ -4527,6 +4628,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; } @@ -4769,126 +4885,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 =========================== */ @@ -5025,6 +5021,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 { @@ -5048,6 +5051,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; } @@ -5056,8 +5065,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, @@ -5167,6 +5178,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 @@ -5529,7 +5543,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 +5551,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{ @@ -5904,4 +5921,6 @@ body.mod-home { .mod-home #nav-about .fa-info { line-height: 32px; } - } \ 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}[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 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; diff --git a/bookface_dark.css b/bookface_dark.css index dd4770f..fb1dcdc 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,8 +1,8 @@ /* Name : Bookface Dark - Version : 1.6 + Version : 1.7.1 Licence : AGPL - Created on : 25 Mar 2025 + Created on : 15 MAY 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -40,6 +40,7 @@ --add-photo-button-text: 'Add Photos'; --follow-button-text: 'Follow'; --save-button-text: 'Save'; + --new-message-text: 'New Message'; } body { @@ -590,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; @@ -794,6 +798,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 { @@ -827,14 +835,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; @@ -844,7 +852,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 */ @@ -1123,12 +1131,97 @@ 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; } + /* 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); @@ -1545,6 +1638,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; } @@ -1802,126 +1910,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 =========================== */ @@ -2055,6 +2043,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 { @@ -2078,6 +2073,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; } @@ -2086,8 +2087,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, @@ -2197,6 +2200,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 @@ -2559,7 +2565,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 +2573,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, @@ -2933,4 +2942,6 @@ body.mod-home { .mod-home #nav-about .fa-info { line-height: 32px; } - } \ 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}[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 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'; diff --git a/bookface_light.css b/bookface_light.css index 80e6d04..aef7f4a 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,8 +1,8 @@ /* Name : Bookface Light - Version : 1.6 + Version : 1.7.1 Licence : AGPL - Created on : 25 Mar 2025 + Created on : 15 MAY 2025 Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml */ @@ -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 { @@ -590,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; @@ -794,6 +798,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 { @@ -827,14 +835,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; @@ -844,7 +852,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 */ @@ -1124,11 +1132,96 @@ 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 { 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); @@ -1545,6 +1638,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; } @@ -1802,126 +1910,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 =========================== */ @@ -2055,6 +2043,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 { @@ -2078,6 +2073,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; } @@ -2086,8 +2087,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, @@ -2197,6 +2200,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 @@ -2559,7 +2565,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 +2573,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, @@ -2933,4 +2942,6 @@ body.mod-home { .mod-home #nav-about .fa-info { line-height: 32px; } - } \ 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}[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 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';