diff --git a/README.md b/README.md index 368a67a..6cc96cc 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ BOOKFACE FOR FRIENDICA ====================== -Version 1.5 +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 @@ -144,6 +145,143 @@ 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 Postbox styles + +Old names are in parenthesis next to the new names to which they've been mapped. + +**Solid Color Backgrounds:** + +- .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-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 + +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 +398,42 @@ 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] +* 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] +* 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] +* 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 +* 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. +* 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] * fixed wrong sized menu items in action button drop-downs on mobile [related to Issue #3] diff --git a/bookface_auto.css b/bookface_auto.css index bd339eb..566a0e9 100644 --- a/bookface_auto.css +++ b/bookface_auto.css @@ -1,8 +1,8 @@ /* Name : Bookface Auto Color Mode - Version : 1.5 + Version : 1.7.1 Licence : AGPL - Created on : 27 Feb 2025 + Created on : 15 MAY 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); @@ -37,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 { @@ -104,6 +107,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; @@ -115,7 +122,6 @@ font-size: 15px !important; margin-left: 10px !important; } - ul.nav-tabs li a, ul.tabs li a { margin-top: 8px; @@ -165,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 { @@ -444,7 +458,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 */ } @@ -533,6 +547,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; @@ -565,7 +588,12 @@ line-height: 32px; top: 6px; position:relative; + 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; @@ -655,7 +683,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; } @@ -663,7 +691,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 { @@ -716,7 +744,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 */ @@ -770,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 { @@ -803,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; @@ -820,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 */ @@ -873,6 +905,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 { @@ -966,7 +1002,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; @@ -1045,7 +1080,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; @@ -1087,7 +1123,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 */ } @@ -1096,14 +1132,99 @@ 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(--background-color); + background-color: var(--comment-bg); border-radius: 20px; } .wall-item-actions-row .wall-item-emoji { @@ -1123,6 +1244,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; @@ -1159,6 +1283,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 @@ -1406,6 +1546,66 @@ 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; + } + /* + BOOKFACE + DARK MODE + HAS ADDITIONAL + STYLING + HERE + */ /* MISCELLANEOUS STUFF */ div#back-to-top { bottom: 65px; @@ -1438,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; } @@ -1662,6 +1877,48 @@ 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; + } +/* 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; +} +/* 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 =========================== */ @@ -1687,12 +1944,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 ===================================== */ @@ -1750,8 +2012,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 { @@ -1787,6 +2052,56 @@ 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 { + 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(*)){ + /* 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; + } + /* 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 + */ + @supports not (background: -webkit-named-image(i)) { + body.mod-profile aside:not(:has(*)) + #content { + margin-top: 0; + } + } + } body.mod-contact aside, body.mod-photos aside, body.mod-profile aside { @@ -1894,6 +2209,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 @@ -2170,7 +2488,6 @@ a.tag.label, #mention-link span:first-of-type { float: none; position: relative; - left: -5px; top: 2px; } #search-save .fa-plus::after, @@ -2185,6 +2502,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; @@ -2237,7 +2574,7 @@ a.tag.label, .coverphoto.canvas-slid { top: 55px; } - #message-new { + #message-new a { height: 50px; width: 50px; background-color: var(--link-color); @@ -2245,21 +2582,33 @@ 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(0,0,0,.2); + border-radius: 100%; } .justified-gallery > a, .justified-gallery > div, .justified-gallery > figure{ height: 25vw !important; width: 25vw !important; + } + /* Contact Notification Action Buttons */ + .intro-actions { + position: relative; + float: none !important; } + /* Jot Plugin Buttons */ + #profile-jot-plugin-wrapper { + width: 100%; + } } /* Frio Theme Cut-Off (double sidebar width) ========================================= @@ -2399,6 +2748,9 @@ a.tag.label, background-color: var(--link-color) !important; color: #fff !important; } + .hovercard { + max-width: 100%; + } } /* Narrow Screen Phones in Landscape Orientation ============================================== @@ -2679,6 +3031,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; @@ -2743,6 +3099,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 { @@ -3029,7 +3389,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; } @@ -3118,6 +3478,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; @@ -3150,7 +3519,12 @@ header #banner { line-height: 32px; top: 6px; position:relative; + 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; @@ -3240,7 +3614,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; } @@ -3248,7 +3622,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 { @@ -3337,7 +3711,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 */ @@ -3391,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 { @@ -3424,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; @@ -3441,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 */ @@ -3494,6 +3872,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 { @@ -3593,7 +3975,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; @@ -3689,7 +4070,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; @@ -3731,7 +4113,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; } @@ -3739,15 +4121,100 @@ 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(--background-color); + background-color: var(--comment-bg); border-radius: 20px; } .wall-item-actions-row .wall-item-emoji { @@ -3767,6 +4234,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; @@ -3804,6 +4274,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 @@ -4050,6 +4536,66 @@ aside .widget li:hover { 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: 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; + } + .jotplugins #postboxbutton, + .jotplugins #smileybutton { + position: absolute; + } + /* Zen Postbox Add-on */ + .postbox_button > img { + 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; @@ -4082,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; } @@ -4300,6 +4861,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 =========================== */ @@ -4325,12 +4910,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 ===================================== */ @@ -4388,8 +4978,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); @@ -4428,6 +5021,56 @@ 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 { + 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(*)){ + /* 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; + } + /* 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 + */ + @supports not (background: -webkit-named-image(i)) { + body.mod-profile aside:not(:has(*)) + #content { + margin-top: 0; + } + } + } body.mod-contact aside, body.mod-photos aside, body.mod-profile aside { @@ -4535,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 @@ -4811,7 +5457,6 @@ a.tag.label, #mention-link span:first-of-type { float: none; position: relative; - left: -5px; top: 2px; } #search-save .fa-plus::after, @@ -4826,6 +5471,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; @@ -4878,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); @@ -4886,21 +5551,33 @@ 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{ height: 25vw !important; width: 25vw !important; - } + } + /* Contact Notification Action Buttons */ + .intro-actions { + position: relative; + float: none !important; + } + /* Jot Plugin Buttons */ + #profile-jot-plugin-wrapper { + width: 100%; + } } /* Frio Theme Cut-Off (double sidebar width) ========================================= @@ -5040,6 +5717,9 @@ a.tag.label, background-color: var(--link-color) !important; color: #000 !important; } + .hovercard { + max-width: 100%; + } } /* Narrow Screen Phones in Landscape Orientation ============================================== @@ -5241,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 403a023..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.4 + * Version: 1.7 */ // if there is no cookie create one use Friendica\DI; diff --git a/bookface_dark.css b/bookface_dark.css index 9cfad02..fb1dcdc 100644 --- a/bookface_dark.css +++ b/bookface_dark.css @@ -1,8 +1,8 @@ /* Name : Bookface Dark - Version : 1.5 + Version : 1.7.1 Licence : AGPL - Created on : 27 Feb 2025 + Created on : 15 MAY 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; @@ -38,6 +40,7 @@ --add-photo-button-text: 'Add Photos'; --follow-button-text: 'Follow'; --save-button-text: 'Save'; + --new-message-text: 'New Message'; } body { @@ -104,6 +107,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; @@ -164,6 +171,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 { @@ -443,7 +458,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; } @@ -532,6 +547,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; @@ -564,7 +588,12 @@ header #banner { line-height: 32px; top: 6px; position:relative; + 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; @@ -654,7 +683,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; } @@ -662,7 +691,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 { @@ -715,7 +744,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 */ @@ -769,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 { @@ -802,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; @@ -819,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 */ @@ -872,6 +905,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 { @@ -965,7 +1002,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; @@ -1044,7 +1080,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; @@ -1060,6 +1097,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; @@ -1083,7 +1123,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; } @@ -1091,15 +1131,100 @@ 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(--background-color); + background-color: var(--comment-bg); border-radius: 20px; } .wall-item-actions-row .wall-item-emoji { @@ -1119,6 +1244,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; @@ -1155,6 +1283,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 @@ -1402,6 +1546,66 @@ aside .widget li:hover { 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: 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; + } + .jotplugins #postboxbutton, + .jotplugins #smileybutton { + position: absolute; + } + /* Zen Postbox Add-on */ + .postbox_button > img { + 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; @@ -1434,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; } @@ -1658,6 +1877,39 @@ 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; + } +/* 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 =========================== */ @@ -1683,12 +1935,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 ===================================== */ @@ -1746,8 +2003,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 { @@ -1783,6 +2043,56 @@ 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 { + 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(*)){ + /* 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; + } + /* 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 + */ + @supports not (background: -webkit-named-image(i)) { + body.mod-profile aside:not(:has(*)) + #content { + margin-top: 0; + } + } + } body.mod-contact aside, body.mod-photos aside, body.mod-profile aside { @@ -1890,6 +2200,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 @@ -2166,7 +2479,6 @@ a.tag.label, #mention-link span:first-of-type { float: none; position: relative; - left: -5px; top: 2px; } #search-save .fa-plus::after, @@ -2181,6 +2493,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; @@ -2233,7 +2565,7 @@ a.tag.label, .coverphoto.canvas-slid { top: 55px; } - #message-new { + #message-new a { height: 50px; width: 50px; background-color: var(--link-color); @@ -2241,21 +2573,33 @@ 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{ height: 25vw !important; width: 25vw !important; - } + } + /* Contact Notification Action Buttons */ + .intro-actions { + position: relative; + float: none !important; + } + /* Jot Plugin Buttons */ + #profile-jot-plugin-wrapper { + width: 100%; + } } /* Frio Theme Cut-Off (double sidebar width) ========================================= @@ -2395,6 +2739,9 @@ a.tag.label, background-color: var(--link-color) !important; color: #000 !important; } + .hovercard { + max-width: 100%; + } } /* Narrow Screen Phones in Landscape Orientation ============================================== @@ -2595,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 4f7f632..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.4 + * 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 2798a58..aef7f4a 100644 --- a/bookface_light.css +++ b/bookface_light.css @@ -1,8 +1,8 @@ /* Name : Bookface Light - Version : 1.5 + Version : 1.7.1 Licence : AGPL - Created on : 27 Feb 2025 + Created on : 15 MAY 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; @@ -37,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 { @@ -104,6 +107,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; @@ -164,6 +171,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 { @@ -443,7 +458,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 */ } @@ -532,6 +547,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; @@ -564,7 +588,12 @@ ul.nav-tabs { line-height: 32px; top: 6px; position:relative; + 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; @@ -654,7 +683,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; } @@ -662,7 +691,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 { @@ -715,7 +744,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 */ @@ -769,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 { @@ -802,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; @@ -819,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 */ @@ -872,10 +905,14 @@ 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 { - background-color: #fff !important; + background-color: var(--content-bg) !important; border-radius: 15px !important; background-image: none; } @@ -965,7 +1002,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; @@ -1044,7 +1080,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; @@ -1060,6 +1097,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; @@ -1083,7 +1123,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 */ } @@ -1092,14 +1132,99 @@ 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(--background-color); + background-color: var(--comment-bg); border-radius: 20px; } .wall-item-actions-row .wall-item-emoji { @@ -1119,6 +1244,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; @@ -1155,6 +1283,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 @@ -1402,6 +1546,66 @@ 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; + } + /* + BOOKFACE + DARK MODE + HAS ADDITIONAL + STYLING + HERE + */ /* MISCELLANEOUS STUFF */ div#back-to-top { bottom: 65px; @@ -1434,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; } @@ -1658,6 +1877,39 @@ 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; + } +/* 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 =========================== */ @@ -1683,12 +1935,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 ===================================== */ @@ -1746,8 +2003,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 { @@ -1783,6 +2043,56 @@ 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 { + 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(*)){ + /* 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; + } + /* 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 + */ + @supports not (background: -webkit-named-image(i)) { + body.mod-profile aside:not(:has(*)) + #content { + margin-top: 0; + } + } + } body.mod-contact aside, body.mod-photos aside, body.mod-profile aside { @@ -1890,6 +2200,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 @@ -2166,7 +2479,6 @@ a.tag.label, #mention-link span:first-of-type { float: none; position: relative; - left: -5px; top: 2px; } #search-save .fa-plus::after, @@ -2181,6 +2493,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; @@ -2233,7 +2565,7 @@ a.tag.label, .coverphoto.canvas-slid { top: 55px; } - #message-new { + #message-new a { height: 50px; width: 50px; background-color: var(--link-color); @@ -2241,14 +2573,17 @@ 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(0,0,0,.2); + border-radius: 100%; } .justified-gallery > a, .justified-gallery > div, @@ -2256,6 +2591,15 @@ a.tag.label, height: 25vw !important; width: 25vw !important; } + /* Contact Notification Action Buttons */ + .intro-actions { + position: relative; + float: none !important; + } + /* Jot Plugin Buttons */ + #profile-jot-plugin-wrapper { + width: 100%; + } } /* Frio Theme Cut-Off (double sidebar width) ========================================= @@ -2395,6 +2739,9 @@ a.tag.label, background-color: var(--link-color) !important; color: #fff !important; } + .hovercard { + max-width: 100%; + } } /* Narrow Screen Phones in Landscape Orientation ============================================== @@ -2595,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 64109e0..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.4 + * Version: 1.7 */ use Friendica\DI; require_once 'view/theme/frio/php/PHPColors/Color.php';