diff --git a/README.md b/README.md
new file mode 100644
index 0000000..6cc96cc
--- /dev/null
+++ b/README.md
@@ -0,0 +1,565 @@
+BOOKFACE FOR FRIENDICA
+======================
+Version 1.7.1
+
+**Description:** A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover.
+
+**Disclaimer:** _This is a Work-In-Progress, use in production at your own risk!_
+
+## INSTALLATION
+
+1. Drop these six files:
+ * bookface_auto.css
+ * bookface_auto.php
+ * bookface_dark.css
+ * bookface_dark.php
+ * bookface_light.css
+ * bookface_light.php
+
+into _/friendica/view/theme/frio/scheme/_
+
+2. Go to _Settings > Display > Theme Customization > Appearance_
+ 1. Select either "Bookface Light", "Bookface Dark", or "Bookface Auto"
+ 2. (optional) Select Accent Color
+ 3. click "Submit" button.
+
+## CUSTOMIZATION/LOCALIZATION
+
+Starting with Version 1.3 it is much easier for server admins to customize and localize Bookface. Everything you can safely change is now defined in the CSS variables at the top of the stylsheets. You could also override these with another stylesheet loaded after Bookface the redefines the variables.
+
+### LOCALIZATION
+
+Bookface uses a number of pseudo-elements to label buttons in the Frio theme. You can easily change these to say something else or to display them in another language:
+
+ /* LOCALIZE pseudo-element text below */
+ --sign-in-text: 'Sign-In';
+ --compose-text: 'Compose';
+ --save-search-text: 'Save Search';
+ --follow-tag-text: 'Follow Tag';
+ --comment-button-text: 'Comment';
+ --share-button-text: 'Share';
+ --quote-button-text: 'Quote';
+ --like-button-text: 'Like';
+ --dislike-button-text: 'Dislike';
+ --more-button-text: 'More';
+ --attendyes-button-text: 'Going';
+ --attendno-button-text: 'Can\'t Go';
+ --attendmaybe-button-text: 'Maybe';
+ --add-photo-button-text: 'Add Photos';
+ --follow-button-text: 'Follow';
+ --save-button-text: 'Save';
+ --new-message-text: 'New Message';
+
+### CUSTOMIZATION
+
+Some people have found the accent color engagement counts on action buttons distracting or busy. You can easily change it be redefining the variables. You could either set it to another already defined variable or set it to a specific color:
+
+ --count-color: black; /* make number black */
+ --count-bg: var(--nav-icon-color); /* makes it same color as button */
+
+ --count-bg: black; /* makes the background of counts black, font is white */
+
+ --count-color: purple; /* number is purple */
+ --count-color: rgba(0,0,0,.5); /* semi-transparent gray */
+
+You get the idea.
+
+You should _avoid_ redefining the default Frio color variables because if a user on your server changes the "Theme Customization" settings you'd be overriding the user's color scheme. The default variables you should *NOT* override globally are:
+
+ --nav-bg
+ --link-color
+ --nav-icon-color
+ --background-color
+ --font-color
+ --font-color-darker
+ --menu-background-hover-color
+
+You _can_ safely globally override:
+
+ --border-color
+
+Depending on the font(s) you define, you _might_ be able to safely override:
+
+ --global-font-family
+
+But make sure the font is available to users of your site. Don't assume they have it installed on their system! Either load them remotely using the `` tag or locally using `@font-face`.
+
+You should *NOT* use the `@import` method to remote load fonts if you can help it because it loads them sequentially and will hurt server performance. So if you're going to load a remote font use the `` method. However you'll need to edit the "Frio" theme _/friendica/view/theme/frio/templates/head.tpl_ file to add something like this:
+
+
+
+If the font you want to use is local you'd just need to add something like this to the top of the Bookface stylesheets:
+
+ @font-face{
+ font-family: Roboto;
+ src: url('../font/Roboto-Regular.ttf'); /* or where ever you put it */
+ }
+
+Then set the CSS variable to use it:
+
+ -global-font-family: 'Roboto', sans-serif;
+
+Some fonts may cause misalignment problems in various places, make sure you test the font before deploying it for everyone.
+
+### COVER PHOTOS
+
+From Bookface 1.3 it supports adding a "Cover Photo" to profiles. There are two places you can add the Cover Photo, depending on whether you want it used on all of your profile section pages or if you want it to appear on ONLY your actual profile page.
+
+Note that this feature ONLY works is recent, modern browsers! Every *current* and *supported* desktop and mobile version should be able to show it, but nothing *unsupoorted* nor released before 2022 will (see caniuse.com entry for "has()" for specific verssions).
+
+#### ON ALL PROFILE PAGES
+
+1. Go to _Settings > Profile > Personal_
+
+2. In the "Description" box add something like:
+
+`[class=coverphoto][img=https://friendica.server/photo/1649cc674810612350.png]Cover photo description alt-text here[/img][/class]`
+
+3. Submit your changes.
+
+For people who are not using the Bookface scheme they will simply see a thumbnail of your Cover Photo in the sidebar with your Profile Description. For people who ARE using the Bookface scheme they will see your Cover Photo on your Profile, Conversations, etc. pages that have a sidebar.
+
+#### ON JUST YOUR PROFILE PAGE
+
+1. Go to _Settings > Profile > Custom Profile Fields_
+
+2. Enter nothing in the "Label" field.
+
+3. Enter something like this in the "Value" field:
+
+`[class=coverphoto][img=https://friendica.server/photo/1649cc674810612350.png]Cover photo description alt-text here[/img][/class]`
+
+4. Check the Permissions for the field. If for some reason you only want people in certain Circles to see your Cover Photo you can set that here.
+
+5. Submit your changes.
+
+People who are not using the Bookface scheme will see a thumbnail of your Cover Photo in your Profile details. The Cover Photo will only appear on your Profile page.
+
+#### Multiple Cover Photos
+
+Technically you can have one Cover Photo for our actual Profile page by putting it in a Custom Field and another one in the Profile Description that will be shown on the other profile pages. But if you want to get really creative you can also have multiple images per Cover Photo.
+
+While not really recommended you can place up to four images in the Cover Photo container and Bookface will show them as a collage of stripes. For example:
+
+`[class=coverphoto][img=https://friendica.server/photo/1649cc674810612350.png]Cover photo 1 description alt-text here[/img][img=https://friendica.server/photo/1649cc677034958382350.png]Cover photo 2 description alt-text here[/img][img=https://friendica.server/photo/1649c038920505603674810612350.png]Cover photo 3 description alt-text here[/img][img=https://friendica.server/photo/3464771649cc674810612350.png]Cover photo 4 description alt-text here[/img][/class]`
+
+Extras spaces are okay, but just make sure there are no carriage returns or other elements inside `[class]..[/class]` or it will mis-count the images and size them wrong. Also keep in mind people not using Bookface will see three thumbnail images on your profile, only Bookface users will see the striped collage.
+
+### 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:
+
+* This theme HIDES the attachment upload button in the file browser since there is no way to manage/delete uploaded files, and this is confusing to users. If you want to show this button anyway change the CSS variable `--attach-file-button` from "none" to "block" at the top of the stylesheets.
+* Overrides nav_bg, nav_icon_color, background_color, background_image, and contentbg_transp
+* Overrides "Frio" blue accent color with one that looks nicer with these schemes.
+* This scheme is still being revised as new things to style are discovered.
+* This scheme was adapted from a user stylesheet for use in browsers on the client-side.
+
+## KNOWN ISSUES
+
+1. Safari and SVG Masks
+
+SVG masks appear to be terribly broken in Safari (well WebKit in general). maskContentUnits won't work properly on Mobile Safari and that causes the mask to be in the wrong position to...mask. If there is a element in the HTML it can mess up references to SVG images that exist within the DOM. You have to make sure your server is actually serving up .svg files with the mimetype `"image/svg+xml"` or it won't work. Your clipPath element has to be inside a element. Safari apparently wants `"xlink:href"` instead of just "href" which means you also need to namespace for `"xmlns:xlink="http://www.w3.org/1999/xlink"`
+
+If the logo was just an inline SVG set to use the fill color that would be fine. But all the logo SVGs are for masking. There are two PNG images for masks, which DO work in Safari, but they look too blurry. So I switched it to the icon font logo. Which at least is crisp, though it is a bit heavier/thicker/bolder than the SVG version.
+
+2. Old iOS Devices
+
+There are numerous places in the stylesheets that use `":has()"` and older versions of Safari bundled with outdated versions of iOS do not understand it and will not display things correctly. If you have, for example, and old iPad Mini stuck on an earlier version of iOS, say 9.2.x, you may encounter random un-clickable and un-scrollable elements with any "frio" scheme. Older devices cannot display the new Cover Photo feature correctly.
+
+4. Phones with Narrow Screens
+
+You may notice on many (if not most) phones in portrait mode the Action Buttons do not have text labels on them. If you turn your phone to landscape mode the labels will become visible. This is on purpose! There simply is not enough room to display the labels in a viewport narrower than 400 pixels wide, especially if ALL possible buttons are enabled and being shown. Initially I tried styling that only removed the labels if there were too many buttons. But the inconsistency made it look like the CSS was broken or something. Also some mobile browsers couldn't understand `":has()"` or `":nth-of-type/:last-of-type"` etc. The best solution across devices was to simply *not* show the labels for any of them.
+
+## CONTRIBUTING
+
+To make updates and maintenance easier the line numbers between the "Light" and "Dark" stylesheets have been synchronized, and the first half of the "Auto" version matches the "Light" stylesheet. This way if you change one you can more easily find the same line in the corresponding files to make the same change there, or if it is not needed for that one, add comment lines to keep the line numbers in sync.
+
+In some places fallbacks are included to accommodate older browsers or mobile devices that do not understand more modern code. In general the target for this scheme are browsers released within the last couple of years.
+
+Just because it looks right or works in your preferred browser or device doesn't mean it will work for everyone. Try to thoroughly *test* your edits in desktop and mobile Chromium-based, Mozilla-based, and Webkit-based browsers before submitting a pull-request.
+
+## HOW SCHEMES WORK IN FRIO
+
+Each "Frio" theme "scheme" consists of two files with the same name but a different extension, one is `.php` and the other is `.css` but the latter is not loaded directly as a stylesheet. These two files must be inside the `/frio/shemes/` folder, but will not be discovered by the theme unless they have a properly formatted header:
+
+**Example .php file header:**
+
+ /*
+ * Copyright (C) 2010-2025, the Friendica project
+ * SPDX-FileCopyrightText: 2010-2025 the Friendica project
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * Name: Theme Name
+ * Licence: AGPL
+ * Author: Names and @handles of main contributors
+ * Overwrites: nav_bg, nav_icon_color, background_color, background_image, contentbg_transp
+ * Accented: yes
+ * Version: X.x
+ */
+
+**Example .css file header:**
+
+ /*
+ Name : Theme Name
+ Version : 1.3
+ Licence : AGPL
+ Created on : 09.02.2025
+ Author : Names and @handles of main contributors
+ */
+
+TThe PHP file get read into the _/frio/style.php_ file, to get any color variables that have been set. **You cannot add new variables to your PHP file!** The `style.php` defines these variables in an array (to which your scheme cannot add new entries). These are the ones you can set in your PHP file:
+
+ $nav_bg
+ $nav_icon_color
+ $nav_icon_hover_color
+ $link_color
+ $link_hover_color
+ $menu_background_hover_color
+ $nav_icon_color
+ $menu_background_hover_color
+ $background_color
+ $contentbg_transp
+ $background_image
+ $background_size_img
+ $background_repeat
+ $login_bg_image
+ $login_bg_color
+ $font_color_darker
+ $font_color_lighter
+ $font_color
+
+Next, the `style.php` reads in the *contents* of your CSS file and concatenates it to the end of the Frio theme _/frio/css/style.css_. Then it does a simple string replace operation on the merged stylesheet contents to replace the variable names with the values set in your PHP scheme file. This is essentially variable validation and why you can't add new variables, they will neither get read in nor replaced. Finally the `style.php` generates the merged stylesheet.
+
+If you want users to be able to pick one of the predefined "Accent Color" options your PHP file needs to include:
+
+ require_once 'view/theme/frio/php/PHPColors/Color.php';
+ $accentColor = new Color($scheme_accent);
+
+If you want users to be able to aslo select a completely custom "Link Color" your PHP file needs to include:
+
+ use Friendica\DI;
+ $customColor = DI::pConfig()->get($uid, 'frio', 'link_color') ?: '';
+ if ($customColor){ $customColor = new Color(''.$customColor.''); }
+
+I could *only* get "Link Color" to work by explicitly casting the type to string when creating a new Color object. Then you need to conditionally check for a "Link Color" and if one is found use it, but if it is not found then fallback to using some other color (ideally the "Accent Color"):
+
+ $link_color = ($customColor) ? '#'.$customColor->getHex() : '#'.$accentColor->getHex();
+
+### Custom CSS Variables
+
+While you cannot simply define new PHP variables for setting colors, etc., you *can* do that in your scheme stylesheet. At the beginning simply define them in a `:root{..}` entry like so:
+
+ --my-custom-variable-name: #hexcolor;
+
+And then use it in your stylesheet like so:
+
+ .classname {
+ color: var(--my-custom-variable-name);
+ }
+
+I figured out how the "Frio" theme worked by looking at the code. I may not be 100% correct about it since I did not create the theme. If someone knows more and I'm wrong about any of this please correct this document at https://gitlab.com/randompenguin/bookface
+
+## CHANGELOG:
+* 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]
+* Styled content filter buttons coming from other platforms.
+* Attach file button visibilty moved to CSS variable
+* Profile contacts size adjust for Frio breakpoints
+* Fixed Category & Folder tag-buttons [Issue #4]
+* Removed text shadow from tags [Issue #5]
+* Removed unused CSS variables [Issue #6]
+* Comment button not styled on other people's profiles [Issue #7]
+* Hide horizontal rules for a cleaner look
+* Minor style fixes for .panel-body and .help-block
+* Removed box-shadow from .wall-item-comment-wrapper
+* Added `$contentbg_transp` back as "Frio" default stylesheet slipstream needs it.
+* Fixed Settings > Channels panel padding and Submit button alignment
+* Redesigned Calculator Add-On [Issue #8]
+* Fixed Compose text formatting rollover effect [Issue #9]
+* Fixed photo album thumbnail size on mobile [Issue #10]
+* Fixed context of .panel-body, was only intended only for Settings page
+* New Mobile Profiles [Issue #11]
+* Added camera icon to user's Recent Photos because no profile photo is shown on it.
+* Adjusted mobile drop-down button appearance and position
+* Made ul.nav-tabs appearance consistent with secondary toolbar tabs
+* Made ul.nav-tabs turn into buttons on narrow mobile screens
+* Box shadow on Compose formatting buttons removed from dark version
+
+1.4 (12 Feb 2025)
+* Limited textarea resize fix to settings pages
+* Edited authors/contributors
+* Edited README for clarity
+* Switched README from plaintext to markdown
+* fixed file browser scroll height issue
+* fixed too much padding at top of login page
+* Added changelog to user styles README
+
+1.3 (11 Feb 2025)
+* Added "Auto" version that automatically detects OS light/dark color mode and applies it.
+* Color and position of Admin "Save" buttons normalized to rest of settings.
+* Normalized Admin "Save/Submit" buttons style and position (including all Add-Ons settings).
+* Brand Text positioned and styled to match color scheme
+* Advanced Content Filter add-on help table overflow fixed.
+* Added "Sign-In" text to button when not signed in because a friend specifically said he couldn't figure out WHERE to sign-in/register.
+* User Menu overflow-x is now hidden (who likes horizontal scrollbars?)
+* Selected nav on :focus styling fixed.
+* Edit Photo image no longer spills out of container on mobile.
+* "Submit" photo edits button moved right.
+* Fixed photo album thumbnails spilling out of page container.
+* Made spacing of photo album thumbnails even.
+* Profile photo in second toolbar mini-vcard rounded
+* Landscape on small screen phones hides toolbars and displays limited buttons
+* Mobile mode completely revamped for modern app-like behavior
+* Support for profile "Cover Photo"
+* Added CSS variables to easily localize pseudo-element text labels
+* Added CSS variable to separately set engagement count background color (default is still link color)
+* CSS line numbers synchronized between light and dark stylesheets for easier maintenance
+* Profile photos in Messages are now circular
+* Event Card now has roundy buttons
+* popover/hovercards borders and arrows restyled
+* Tags, Mentions, and Categories buttons restyled larger but less distracting.
+* Shared post now has background color of a top-level post.
+* New Message button styled for Mobile
+* Brand Icon switched from SVG to icon font because SVG masks are broken in Webkit browsers.
+* Light and Dark versions now support custom Link Color, with error catching to prevent setting it to the same color as nav or page background.
+* Event Response button positions fixed for old Safari Mobile.
+* Login screen layout fixed [GitLab issue #2]
+* Info screen fixed.
+* Fixed overflow dropdown menu hover effect
+* Fixed overflow dropdown menu active styling
+* "Compose" button on Personal Notes page changed to "New Note"
+* Added lock icon to "Personal Notes" header to make it clear they are not public.
+
+
+1.2 (25 Jan 2025)
+* "Save" buttons for "Remote Servers" settings normalized to right.
+* "Close" button and open "Compose" button restyled, "Close" enlarged for better touch target.
+* Open Compose Page button styled to match roundy buttons.
+* "Save Search" buttons styles to match "Compose" and "Mention" buttons.
+* Dark version Settings container background color fixed.
+* Comment Box background fixed.
+* Compose/Comment text style buttons enlarged for better touch targets, styled to match on Compose Modal, Compose Page, and Comment below post.
+* Aside Selected Menu item now adopts color scheme.
+* All Modal File browsers now styled the same.
+* IFRAME container positioned and styled (usually used for embedded video)
+* Fixed "Like/Dislike" on photos showing label twice.
+* TopBar Second vcard short photo made round.
+
+1.1 (21 Jan 2025)
+* Fixes long lists of tags/mentions spilling out of post or profile container, forces them to wrap to multiple rows as necessary.
+* Adds spacing to left of multiple settings buttons floated to right.
+
+1.0 (20 Jan 2025)
+* Initial release of server-side version
+* Accent colors now work (server-side version only)
+* Compose Title border radius normalized to rest of inputs.
+* Top Bar buttons fixed for small mobile screens.
+* Delegate "Save" settings button normalized to right side.
+* Form input background colors normalized.
+
+0.4 (18 Jan 2025)
+* Adds "superscript" engagement numbers to mobile Action Buttons.
+* Settings "Submit" buttons normalized to right-hand placement.
+* "Mention" button and "Compose" buttons sizing normalized.
+* Compose Modal/Page and Reply now styled.
+* File Attachment Button hidden in Compose File Browser.
+* Adjustment to Event RSVP buttons for both desktop and mobile.
+* Styling and adjustment to Profile Extra links.
+* Changed Network Links from "Link:" text to buttons style with chevron.
+
+0.3 (16 Jan 2025)
+* Light and Dark mode user stylesheets.
+* Light version first adapted to theme template/scheme for server-side.
+* Added "superscript" engagement numbers to desktop Action Buttons
+
+0.2 (13 Jan 2025)
+* Added labels to Action Buttons.
+
+0.1 (12 Jan 2025)
+* Based on original bookface.css user stylesheet (light mode only)
+
+---
+
+Contributors:
+Pygoscelis Papua @randompenguin@friendica.world
+feb @feb@loma.ml
+Phil @phil@loma.ml
+
+License: AGPL 3.0 or Later
+
+
diff --git a/README.txt b/README.txt
deleted file mode 100644
index e89d1c2..0000000
--- a/README.txt
+++ /dev/null
@@ -1,82 +0,0 @@
-BOOKFACE FOR FRIENDICA
-===============================
-
-Description:
-A Friendica Theme Template/Scheme for the "Frio" theme that gives it a modern makeover.
-
-Disclaimer: This is a Work-In-Progress, use in production at your own risk!
-
-1. Drop these four files
- * bookface_dark.css
- * bookface_dark.php
- * bookface_light.css
- * bookface_light.php
-into /friendica/view/theme/frio/scheme/
-
-2. Go to Settings > Display > Theme Customization > Appearance
- a. Select either "Bookface Light" or "Bookface Dark"
- b. (optional) Select Accent Color
- c. click "Submit" button.
-
-NOTES:
-
-* This theme HIDES the attachment upload button in the file browser since there is no way to manage/delete uploaded files, and this is confusing to users.
-* Overrides nav_bg, nav_icon_color, background_color, background_image, and contentbg_transp
-* Overrides "Frio" blue accent color with one that looks nicer with these schemes.
-* This scheme is still being revised as new things to style are discovered.
-* This scheme was adapted from a user stylesheet for use in browsers on the client-side.
-
-CHANGELOG:
-1.2
-* "Save" buttons for "Remote Servers" settings normalized to right.
-* "Close" button and open "Compose" button restyled, "Close" enlarged for better touch target.
-* Open Compose Page button styled to match roundy buttons.
-* "Save Search" buttons styles to match "Compose" and "Mention" buttons.
-* Dark version Settings container background color fixed.
-* Comment Box background fixed.
-* Compose/Comment text style buttons enlarged for better touch targets, styled to match on Compose Modal, Compose Page, and Comment below post.
-* Aside Selected Menu item now adopts color scheme.
-* All Modal File browsers now styled the same.
-* IFRAME container positioned and styled (usually used for embedded video)
-* Fixed "Like/Dislike" on photos showing label twice.
-* TopBar Second vcard short photo made round.
-
-1.1
-* Fixes long lists of tags/mentions spilling out of post or profile container, forces them to wrap to multiple rows as necessary.
-* Adds spacing to left of multiple settings buttons floated to right.
-
-1.0
-* Initial release of server-side version
-* Accent colors now work (server-side version only)
-* Compose Title border radius normalized to rest of inputs.
-* Top Bar buttons fixed for small mobile screens.
-* Delegate "Save" settings button normalized to right side.
-* Form input background colors normalized.
-
-0.4 (18 Jan 2025)
-* Adds "superscript" engagement numbers to mobile Action Buttons.
-* Settings "Submit" buttons normalized to right-hand placement.
-* "Mention" button and "Compose" buttons sizing normalized.
-* Compose Modal/Page and Reply now styled.
-* File Attachment Button hidden in Compose File Browser.
-* Adjustment to Event RSVP buttons for both desktop and mobile.
-* Styling and adjustment to Profile Extra links.
-* Changed Network Links from "Link:" text to buttons style with chevron.
-
-0.3 (16 Jan 2025)
-* Light and Dark mode user stylesheets.
-* Light version first adapted to theme template/scheme for server-side.
-* Added "superscript" engagement numbers to desktop Action Buttons
-
-0.2 (13 Jan 2025)
-* Added labels to Action Buttons.
-
-0.1 (12 Jan 2025)
-* Based on original bookface.css user stylesheet (light mode only)
-
-Contributors:
-Kristi H. @kmh@friendica.world
-feb @feb@loma.ml
-
-License: AGPL 3.0 or Later
-
diff --git a/bookface_auto.css b/bookface_auto.css
new file mode 100644
index 0000000..566a0e9
--- /dev/null
+++ b/bookface_auto.css
@@ -0,0 +1,5926 @@
+/*
+ Name : Bookface Auto Color Mode
+ Version : 1.7.1
+ Licence : AGPL
+ Created on : 15 MAY 2025
+ Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml
+*/
+
+:root {
+ --global-font-family: "Open Sans", Arial, sans-serif, Noto Color Emoji;
+ --nav-bg: $nav_bg;
+ --link-color: $link_color;
+ --nav-icon-color: $nav_icon_color;
+ --background-color: $background_color;
+ --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);
+ --border-color: #eeeeee;
+ --count-color: #ffffff;
+ --count-bg: var(--link-color);
+ --attach-file-button: none; /* none or block */
+
+ /* LOCALIZE pseudo-element text below */
+ --sign-in-text: 'Sign-In';
+ --compose-text: 'Compose';
+ --new-note-text: 'New Note';
+ --save-search-text: 'Save Search';
+ --follow-tag-text: 'Follow Tag';
+ --comment-button-text: 'Comment';
+ --share-button-text: 'Share';
+ --quote-button-text: 'Quote';
+ --like-button-text: 'Like';
+ --dislike-button-text: 'Dislike';
+ --more-button-text: 'More';
+ --attendyes-button-text: 'Going';
+ --attendno-button-text: 'Can\'t Go';
+ --attendmaybe-button-text: 'Maybe';
+ --add-photo-button-text: 'Add Photos';
+ --follow-button-text: 'Follow';
+ --save-button-text: 'Save';
+ --new-message-text: 'New Message';
+}
+
+ body {
+ background-color: var(--background-color) !important;
+ font-size: 15px !important;
+ padding-top: 130px !important;
+ font-family: var(--global-font-family);
+ }
+ #topbar-first .nav > li > a,
+ #topbar-first .nav > li > button,
+ nav.navbar .nav > li > a,
+ nav.navbar .nav > li > button{
+ color: var(--nav-icon-color) !important;
+ }
+ #topbar-first, nav.navbar {
+ background-color: var(--nav-bg) !important;
+ color: var(--nav-icon-color) !important;
+ height: 55px;
+ }
+ #topbar-first .topbar-nav .nav-segment {
+ margin-right: 10px;
+ }
+ #topbar-first .nav > li > a:hover:not(.selected) {
+ background-color: rgba(128,128,128,.1) !important;
+ border-radius: 8px !important;
+ }
+ .fa-lg {
+ font-size: 24px !important;
+ }
+ #topbar-first .nav > li > a:hover,
+ #topbar-first .nav > li > a:focus,
+ #topbar-first .nav > li > button:not(#main-menu):hover,
+ #topbar-first .nav > li > button:not(#main-menu):focus,
+ #topbar-first button.navbar-toggle:hover,
+ #topbar-first button.navbar-toggle:focus,
+ nav.navbar .nav > li > a:hover,
+ nav.navbar .nav > li > a:focus,
+ nav.navbar .nav > li > button:hover,
+ nav.navbar .nav > li > button:focus {
+ background-color: rgba(128,128,128,.1) !important;
+ border-radius: 8px !important;
+
+ }
+ #topbar-first button.navbar-toggle,
+ #nav-notifications-menu-btn {
+ width: 50px;
+ height: 50px;
+ }
+ #topbar-first .nav > li > a.selected,
+ #nav-notification.dropdown.open {
+ border-bottom: 3px solid var(--link-color) !important;
+ color: var(--link-color) !important;
+ }
+ #topbar-first .nav > li > a.selected:hover,
+ #topbar-first .nav > li > a.selected:focus,
+ #topbar-first .nav > li > #main-menu:hover,
+ #topbar-first .nav > li > #main-menu:focus,
+ #nav-notification.dropdown.open #nav-notifications-menu-btn:hover,
+ #nav-notification.dropdown.open #nav-notifications-menu-btn:focus {
+ background-color: transparent !important;
+ border-radius: 0 !important;
+ }
+ #nav-notification.dropdown.open #nav-notifications-menu-btn .fa-bell::before {
+ content: '\f0f3';
+ color: var(--link-color);
+ }
+ .notif-item img.notif-image,
+ .intro-photo-wrapper img.intro-photo {
+ border-radius: 100%;
+ }
+ ul.nav-tabs {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ padding-bottom: 20px;
+ border-color:rgba(0,0,0,.2);
+ }
+ ul.tabs li {
+ font-size: 15px !important;
+ margin-left: 10px !important;
+ }
+ ul.nav-tabs li a,
+ ul.tabs li a {
+ margin-top: 8px;
+ color: var(--link-color);
+ border: none;
+ }
+ ul.nav-tabs li:not(.active):hover,
+ ul.tabs li:not(.active):hover {
+ border-bottom-width: 0px !important;
+ }
+ ul.nav-tabs li:not(.active):hover > a,
+ ul.tabs li:not(.active):hover > a {
+ background-color: rgba(128,128,128,.1) !important;
+ background-image: none !important;
+ border-radius: 8px !important;
+ color: var(--font-color);
+ }
+ ul.nav-tabs li:not(.active) > a:hover,
+ ul.nav-tabs li:not(.active) > a:focus {
+ border: none;
+ }
+ ul.nav-tabs li.active {
+ border-bottom: 4px solid var(--link-color);
+ }
+ ul.nav-tabs > li.active > a,
+ ul.nav-tabs > li.active a:hover,
+ ul.nav-tabs > li.active a:focus {
+ border: none;
+ color: var(--link-color);
+ background-color: transparent;
+ }
+ .dropdown-menu {
+ padding-bottom: 15px !important;
+ background-color: var(--nav-bg) !important;
+ border: 1px solid var(--background-color) !important;
+ }
+ .dropdown-menu li {
+ margin: 3px 10px;
+ width: 92% !important;
+ border-radius: 8px;
+ }
+ .dropdown-menu li:hover {
+ border-color: transparent !important;
+ }
+ .dropdown-menu > li > a:hover,
+ .dropdown-menu > li > a:focus {
+ background-image: none !important;
+ border-radius: 8px ;
+ }
+ /*
+ 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 {
+ border-radius: 0;
+ background-color: transparent;
+ border-bottom: 4px solid var(--link-color) !important;
+ }
+ .dropdown-menu > li.active > a,
+ .dropdown-menu > li.active:hover > a,
+ .dropdown-menu > li.active:focus > a {
+ color: var(--link-color);
+ background-color: transparent;
+ background-image: none;
+ }
+ .form-control {
+ background: var(--nav-bg);
+ color: #000;
+ }
+ .form-control[readonly],
+ .form-control[disabled],
+ .fieldset[disabled] .form-control {
+ /* background color */
+ /* color */
+ opacity: .5;
+ }
+ .table-striped > tbody > tr:nth-of-type(2n+1){
+ /* not necessary for light mode */
+ }
+ header #banner {
+ left: 0 !important;
+ right: auto !important;
+ margin-top: 10px;
+ }
+ .navbar-brand #logo-img {
+ margin-top: 20px;
+ }
+ .navbar-brand #logo-img,
+ header #banner #logo-img {
+ /* SVG Mask is broken in WebKit use Icon Font instead */
+ -webkit-mask-image: unset !important;
+ mask: none !important;
+ mask-size: unset !important;
+ mask-composite: unset !important;
+ mask-mode: unset !important;
+ background-color: transparent !important;
+ height: 40px;
+ width: 40px;
+ }
+ .navbar-brand #logo-img::before,
+ header #banner #logo-img::before {
+ content: '\f2e6';
+ font-family: ForkAwesome;
+ font-size: 45px;
+ position: relative;
+ top: -12px;
+ left: 0px;
+ text-shadow: none;
+ color: var(--link-color);
+ }
+
+ #navbar-brand-text {
+ line-height: 40px;
+ font-weight: 700;
+ color: var(--link-color) !important;
+ }
+ #nav-login::before{
+ content: var(--sign-in-text);
+ }
+ .topbar ul.nav {
+ left: 50% !important;
+ margin-left: -25% !important;
+ position: relative;
+ }
+ #topbar-first .nav > .account img {
+ border-radius: 100% !important;
+ box-shadow: 0 0 1px rgba(255,255,255,.1) !important;
+ height: 40px !important;
+ width: 40px !important;
+ }
+ #search-box {
+ position: fixed !important;
+ left: 100px;
+ }
+ #topbar-first #search-box .form-search {
+ height: 40px !important;
+ font-size: 15px;
+ background-position: unset;
+ /* box shadow okay for light mode */
+ }
+ #search-box form > div {
+ background-color: var(--background-color);
+ border-radius: 50px;
+ }
+ #search-box form > div::before {
+ content: '\f002';
+ font-family: ForkAwesome;
+ position: absolute;
+ left: 10px;
+ top: 8px;
+ }
+ #search-box .form-control.form-search {
+ border-radius: 50px !important;
+ background: transparent !important;
+ width: 100% !important;
+ }
+ #search-box .form-control::placeholder {
+ color: #666 !important;
+ }
+ #topbar-first #search-box .btn {
+ font-size: 0px !important;
+ height: 32px;
+ width: 32px;
+ top: 2px !important;
+ background-color: white !important;
+ margin-top: 2px !important;
+ }
+ #topbar-first #search-box .btn::before {
+ content: '\f061';
+ font-family: ForkAwesome;
+ font-size: 15px;
+ color: #666;
+ }
+ #nav-user-menu, #nav-notifications-menu {
+ background-color: var(--nav-bg) !important;
+ border: 1px solid var(--background-color) !important;
+ }
+ #nav-user-menu {
+ min-width: 250px !important;
+ overflow-x: hidden;
+ }
+ .nav-pills .dropdown-menu li a,
+ .nav-pills .dropdown-menu li .btn-link,
+ .nav-tabs .dropdown-menu li a,
+ .nav-tabs .dropdown-menu li .btn-link,
+ .account .dropdown-menu li a,
+ .account .dropdown-menu li .btn-link,
+ .contact-photo-wrapper .dropdown-menu li a,
+ .contact-photo-wrapper .dropdown-menu li .btn-link {
+ color: var(--nav-icon-color) !important;
+ border-color: var(--nav-bg) !important;
+ }
+ .nav-pills .dropdown-menu li > a:hover,
+ .nav-tabs .dropdown-menu li > a:hover,
+ .account .dropdown-menu li > a:hover,
+ .contact-photo-wrapper .dropdown-menu li > a:hover,
+ .nav-pills .dropdown-menu li.selected a,
+ .nav-tabs .dropdown-menu li.selected a,
+ .account .dropdown-menu li.selected a,
+ .contact-photo-wrapper .dropdown-menu li.selected a {
+ color: #333 !important;
+ background: #f2f2f2 !important;
+ border-radius: 8px;
+ }
+ .nav-pills .dropdown-menu li.divider,
+ .nav-tabs .dropdown-menu li.divider,
+ .account .dropdown-menu li.divider,
+ .contact-photo-wrapper .dropdown-menu li.divider {
+ background-color: var(--nav-bg) !important;
+ }
+#content .nav > li > .btn-link {
+ margin: 5px;
+}
+#content .nav > li > .btn-link:hover,
+#content .nav > li > .btn-link:focus {
+ background-color: var(--link-color);
+ color: white !important;
+}
+ #topbar-first #nav-notifications-menu {
+ border: 1px solid var(--background-color) !important;
+ }
+ #topbar-first #nav-notifications-menu li {
+ border-color: transparent !important;
+ box-sizing: border-box;
+ margin: 10px;
+ border-radius: 10px !important;
+ width: 94% !important;
+ }
+ #topbar-first .notification-unseen {
+ background-color: rgba(0,0,0,.1) !important;
+ }
+ #topbar-first #nav-notifications-menu li.notif-entry:hover{
+ background-color:rgba(128,128,128,.2) !important;
+ border-color: transparent !important;
+ }
+ .topbar .dropdown-header {
+ color: var(--nav-icon-color);
+ }
+ #topbar-first .topbar-nav .arrow {
+ display: none !important;
+ }
+ .topbar .dropdown-header .dropdown-header-link .btn-link {
+ border: 1px solid var(--link-color);
+ border-radius: 8px;
+ padding: 5px;
+ margin-top: -6px;
+ }
+ .topbar .dropdown-header .dropdown-header-link .btn-link:hover,
+ .topbar .dropdown-header .dropdown-header-link .btn-link:focus {
+ background-color: rgba(0,0,0,.1);
+ }
+ #topbar-second {
+ top: 55px;
+ height: 60px !important;
+ background-color: var(--nav-bg) !important;
+ border-color: #ccc;
+ }
+ .btn.btn-primary:hover,
+ .btn.btn-primary:focus {
+ border-radius: 8px !important;
+ }
+ #dropdownMenuTools {
+ height: 40px;
+ width: 40px;
+ background-color: rgba(128,128,128,.1) !important;
+ border-radius: 100% !important;
+ margin-top: 5px !important;
+ margin-right: 10px !important;
+ }
+ #dropdownMenuTools:hover,
+ #dropdownMenuTools:focus {
+ background-color: rgba(0,0,0,.1) !important;
+ }
+ #jotOpen {
+ border-radius: 8px !important;
+ background-color: var(--link-color) !important;
+ color: #ffffff !important;
+ /* frio border-color */
+ /* frio box-shadow */
+ }
+ #jotOpen:hover, #jotOpen:focus {
+ box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
+ }
+ #jotOpen::before {
+ content: var(--compose-text);
+ font-size: 15px;
+ margin-right: 10px;
+ line-height: 32px;
+ position: relative;
+ display: inline;
+ top: -4px;
+ }
+ body.mod-notes #jotOpen::before {
+ content: var(--new-note-text);
+ }
+ body.mod-notes .sectiontop h3::before {
+ content: '\f023';
+ font-family: ForkAwesome;
+ margin-right: 5px;
+ }
+ #jotOpen .fa-pencil-square-o {
+ font-size: 32px !important;
+ position: relative;
+ top: 4px;
+ }
+ #topbar-second #nav-short-info {
+ margin-top: 10px;
+ }
+ /* General Content Wrappers */
+ section > .generic-page-wrapper,
+ .videos-content-wrapper,
+ .suggest-content-wrapper,
+ .help-content-wrapper,
+ .match-content-wrapper,
+ .dirfind-content-wrapper,
+ .delegation-content-wrapper,
+ .notes-content-wrapper,
+ .message-content-wrapper,
+ .apps-content-wrapper, #adminpage,
+ .delegate-content-wrapper,
+ .uexport-content-wrapper,
+ .dfrn_request-content-wrapper,
+ .friendica-content-wrapper,
+ .credits-content-wrapper,
+ .nocircle-content-wrapper,
+ .profperm-content-wrapper,
+ .invite-content-wrapper,
+ .tos-content-wrapper,
+ .fsuggest-content-wrapper,
+ .shared-wrapper {
+ background-color: var(--content-bg) !important;
+ background-image: none;
+ /* frio light border-color */
+ }
+ /* Make Submit Buttons Pretty */
+ #adminpage a.btn,
+ .settings-submit,
+ button[type="submit"],
+ input[type="submit"],
+ #photos-upload-submit {
+ background-color: var(--link-color) !important;
+ color: white !important;
+ border-radius: 8px !important;
+ border: none !important;
+ box-shadow: none !important;
+ }
+ .settings-submit.form-button-search,
+ button[type="submit"].form-button-search {
+ border-radius:50px !important;
+ margin-top:-.5px !important;
+ }
+ #adminpage a.btn:hover,
+ #adminpage a.btn:focus,
+ .settings-submit:hover,
+ .settings-submit:focus,
+ button[type="submit"]:hover,
+ button[type="submit"]:focus,
+ input[type="submit"]:hover,
+ input[type="submit"]:focus,
+ #photos-upload-submit:hover,
+ #photos-upload-submit:focus{
+ box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
+ }
+ #delegate-parent .submit button {
+ float: right;
+ padding: 8px;
+ appearance: none;
+ border: none;
+ }
+ #delegate-parent .submit::after {
+ content: '';
+ display: block;
+ clear: both;
+ }
+ /* make position of submit buttons in settings consistent */
+ .panel-footer {
+ background-color: var(--nav-bg) !important;
+ }
+ .panel-footer button[type="submit"],
+ .panel-footer input[type="submit"] {
+ float: right !important;
+ margin-left: 5px;
+ }
+ .panel-footer::after{
+ content: '';
+ display: block;
+ clear: both;
+ }
+ #addonslist{
+ margin-top: 20px;
+ }
+ #settings-server button[type="submit"] {
+ float: right !important;
+ margin-left: 5px !important;
+ margin-bottom: 20px !important;
+ }
+ #settings-channels .panel {
+ padding: 0 10px 10px 10px;
+ }
+ #settings-channels button {
+ float: right;
+ }
+ #adminpage button[type="sbumit"],
+ input[type="submit"],
+ input[name="page_logs"],
+ input[name="republish_directory"],
+ input[name="page_tos"]{
+ float: right;
+ padding: 8px;
+ border: none;
+ }
+ .submit::after{
+ content: '';
+ display: block;
+ clear: both;
+ }
+ #photo-edit-end {
+ clear: both;
+ }
+ /* 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;
+ }
+ /* Other people profiles */
+ #mention-link {
+ border-radius: 8px !important;
+ background-color: var(--link-color) !important;
+ color: #ffffff !important;
+ /* frio border-color */
+ /* frio box-shadow */
+ padding: 0 16px !important;
+ }
+ #mention-link:hover,
+ #mention-link:focus {
+ box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
+ }
+ #mention-link span:first-of-type {
+ float: right;
+ font-size: 32px;
+ line-height: 45px;
+ top: 4px;
+ }
+ #mention-link span:first-of-type .fa-2x {
+ font-size: inherit !important;
+ }
+ #mention-link span:last-of-type {
+ font-size: 15px;
+ margin-right: 10px;
+ line-height: 32px;
+ top: 6px;
+ position:relative;
+ 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;
+ }
+ #profile-extra-links .btn {
+ border-radius: 8px !important;
+ margin-bottom: 10px !important;
+ }
+ /* SEARCH RESULTS */
+ #search-save {
+ background-color: var(--link-color) !important;
+ color: white !important;
+ border-radius: 8px !important;
+ padding: 6px 8px !important;
+ }
+ #search-save:hover,
+ #search-save:focus {
+ box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
+ }
+ #search-save .fa-plus::before{
+ content: '\f292' !important;
+ }
+ #search-save .fa-floppy-o::before {
+ content: '\f00e' !important;
+ }
+ #search-save .fa-floppy-o::before,
+ #search-save .fa-plus::before {
+ display: inline-block;
+ margin-top: 2px;
+ }
+ #search-save .fa-floppy-o::after,
+ #search-save .fa-plus::after{
+ content: var(--save-search-text);
+ font-family: 'Open Sans', Arial, sans-serif;
+ font-size: 15px;
+ float: left;
+ margin-right: 10px;
+ line-height: 32px;
+ position: relative;
+ display: block;
+ top: -2px;
+ font-weight: 700;
+ }
+ #search-save .fa-floppy-o::after {
+ content: var(--save-search-text);
+ }
+ #search-save .fa-plus::before {
+ display: inline-block;
+ margin-top: 2px;
+ }
+ #search-save .fa-plus::after {
+ content: var(--follow-tag-text);
+ }
+ /* popovers */
+ .popover.hovercard {
+ border: 1px solid var(--nav-bg) !important;
+ /*
+ dark version needs box shadow as outer glow
+ */
+ }
+ .hover-card-footer {
+ border-color: #ccc;
+ background-color: var(--nav-bg);
+ }
+ .hovercard.top > .arrow::after {
+ border-top-color: var(--nav-bg);
+ }
+ .hovercard.right > .arrow::after {
+ border-right-color: var(--nav-bg);
+ }
+ .hovercard.bottom > .arrow::after {
+ border-bottom-color: var(--nav-bg);
+ }
+ .hovercard.left > .arrow::after {
+ border-left-color: var(--nav-bg);
+ }
+ /* sidebar widgets */
+ aside .widget,
+ .nav-container .widget {
+ background-color: var(--background-color) !important;
+ -webkit-box-shadow: none !important;
+ -moz-box-shadow: none !important;
+ box-shadow: none !important;
+ }
+ aside .badge {
+ background-color: var(--link-color);
+ }
+ /* POSTS */
+ .tread-wrapper {
+ background-color: var(--content-bg) !important;
+ box-shadow: 0 0px 1px rgba(0,0,0,.5) !important;
+ border-radius: 10px !important;
+ }
+ .wall-item-container {
+ border-top: none;
+ }
+ .wall-item-container .media {
+ background-color: var(--content-bg) !important;
+ border-radius: 10px !important;
+ }
+ .wall-item-container iframe {
+ width: 100% !important;
+ height: auto !important;
+ display: block;
+ margin: 0 auto;
+ aspect-ratio: 16/9;
+ border: 1px solid #ccc;
+ border-radius: 8px;
+ background-color: #000;
+ }
+ /*
+ Dark mode has some extra styling
+ here light mode does not need
+ */
+ .contact-photo,
+ .contact-photo-xs {
+ border-radius: 100% !important;
+ border: 1px solid #eee !important;
+ }
+ /*
+ Dark mode has some extra styling
+ here light mode does not need
+ to the .media-list > li elements
+ */
+/*
+ Dark mode has some extra styling
+ here for the .hovercard element
+*/
+ .hover-card-pic img.thumbnail {
+ border-radius: 100% !important;
+ /* frio background-color */
+ /* frio border-color */
+ }
+ p.wall-item-announce,
+ .media .time, .media .shared-time,
+ .media .delivery, .media .location,
+ .media .location a {
+ font-size: 13px !important;
+ }
+ .type-link, .type-video {
+ padding: 0 !important;
+ margin: 0 !important;
+ background-color: rgb(240, 242, 245) !important;
+ border: 1px solid rgb(208,211,215) !important;
+ }
+ .type-link h4, .type-link blockquote, .type-link sup,
+ .type-video h4, .type-video blockquote, .type-video sup {
+ padding-left: 10px !important;
+ padding-right: 10px !important;
+ }
+ .media hr:first-of-type, aside hr, section hr {
+ border-color: var(--nav-bg);
+ }
+ /* keep mentions and tags from spilling out */
+ #profile-page .label,
+ #profile-page .label a,
+ .wall-item-bottom .label,
+ .wall-item-bottom .label a {
+ display: inline-block !important;
+ }
+ /* ACTION BUTTON LABELS */
+ .wall-item-actions-row button:not(.button-browser-share),
+ .wall-item-actions-right button {
+ position: relative;
+ display: block;
+ white-space: normal !important;
+ margin: 0 auto !important;
+ /* frio -webkit-box-shadow */
+ /* frio box-shadow */
+ }
+ .wall-item-actions-row button::after,
+ .wall-item-actions-right button::after {
+ font-size: 14px;
+ font-family: sans-serif;
+ display: block;
+ margin-top: 2px;
+ }
+ .wall-item-response {
+ position: relative;
+ overflow: visible !important;
+ display: block;
+ }
+ .button-comments::after {
+ content: var(--comment-button-text);
+ }
+ .button-announces::after {
+ content: var(--share-button-text);
+ }
+ .share-links .dropdown-toggle::after {
+ content: var(--share-button-text);
+ }
+ .button-votes::after {
+ content: var(--quote-button-text);
+ }
+ .button-likes::after {
+ content: var(--like-button-text);
+ }
+ [id^="dislike-"]::after{
+ content: var(--dislike-button-text);
+ }
+ .wall-item-actions-right .dropdown-toggle::after,
+ .more-links .dropdown-toggle::after {
+ content: var(--more-button-text);
+ }
+ .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 {
+ position: absolute;
+ text-align: center;
+ display: block;
+ background-color: var(--count-bg);
+ box-shadow: -1px 1px 1px #fff;
+ border-radius: 4px;
+ color: var(--count-color);
+ font-size: 12px;
+ font-weight: 700;
+ width: fit-content;
+ padding: 0px 7px;
+ left: 55%;
+ top: 0px;
+ z-index: 1;
+ }
+ /* event response buttons */
+ .vote-event:has(button) {
+ padding-bottom: 135px;
+ }
+ .vote-event:has(button) .wall-item-response {
+ position: absolute;
+ top: 63px;
+ }
+ .vote-event .wall-item-response:empty{
+ display: none;
+ }
+ .vote-event:has(button) .wall-item-response:nth-of-type(1){
+ left: 15px;
+ }
+ .vote-event .wall-item-response:nth-of-type(1) .button-event::after,
+ .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,
+ .wall-item-actions-row [id^="attendno"]::after{
+ content: var(--attendno-button-text);
+ position: relative;
+ height: 20px;
+ overflow: hidden; /* or skews mobile button layout */
+ }
+ .vote-event:has(button) .wall-item-response:nth-of-type(3){
+ left: 204px;
+ }
+ .vote-event .wall-item-response:nth-of-type(3) .button-event::after,
+ .wall-item-actions-row [id^="attendmaybe"]::after{
+ content: var(--attendmaybe-button-text);
+ }
+ /* prevent "Like Like" and "Dislike Dislike" on photos */
+ #photo-view-wrapper .wall-item-actions .button-likes {
+ font-color: transparent !important;
+ font-size: 0px !important;
+ }
+ #photo-view-wrapper .wall-item-actions .button-likes::after {
+ font-size: 18px !important;
+ color: var(--nav-icon-color) !important;
+ }
+ #photo-view-wrapper .wall-item-actions .button-likes .fa-thumbs-up,
+ #photo-view-wrapper .wall-item-actions .button-likes .fa-thumbs-down {
+ font-size: 24px !important;
+ color: var(--nav-icon-color) !important;
+ }
+ #photo-view-wrapper .wall-item-actions .button-likes:hover::after,
+ #photo-view-wrapper .wall-item-actions .button-likes:focus::after,
+ #photo-view-wrapper .wall-item-actions .button-likes:hover .fa-thumbs-up,
+ #photo-view-wrapper .wall-item-actions .button-likes:focus .fa-thumbs-up,
+ #photo-view-wrapper .wall-item-actions .button-likes:hover .fa-thumbs-down,
+ #photo-view-wrapper .wall-item-actions .button-likes:focus .fa-thumbs-down {
+ color: var(--link-color) !important;
+ }
+ /* END OF ACTION BUTTON LABELS */
+ /* Compose and Reply */
+ #jot-modal .modal-header .compose-link {
+ border-radius: 100% !important;
+ height: 36px;
+ width: 36px;
+ font-size: 27px !important;
+ padding: 0 6px !important;
+ background-color: rgba(0,0,0,.1);
+ }
+ #jot-modal .modal-header .compose-link:hover,
+ #jot-modal .modal-header .compose-link:focus {
+ background-color: rgba(0,0,0,.2);
+ }
+ .close {
+ height: 36px;
+ width: 36px;
+ background-color: var(--link-color) !important;
+ opacity: 1 !important;
+ color: #fff !important;
+ border-radius: 100%;
+ margin-top: 5px;
+ margin-top: 2px !important;
+ }
+ .close:hover,
+ .close:focus {
+ box-shadow: inset rgba(0,0,0,.2) !important;
+ }
+ #profile-photo-upload-close {
+ text-align: center;
+ padding-top: 10px;
+ }
+ .modal-content,
+ #jot-modal-content,
+ .wall-item-comment-wrapper {
+ background-color: #fff !important;
+ border-radius: 15px !important;
+ background-image: none;
+ }
+ .wall-item-comment-wrapper {
+ border: none;
+ box-shadow: none;
+ }
+ .photo-comment-wrapper .btn-sm,
+ #profile-jot-wrapper .btn-sm,
+ .wall-item-comment-wrapper .btn-sm {
+ background-color: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: var(--nav-icon-color);
+ height: 45px;
+ width: 45px;
+ font-size: 18px;
+ }
+ .photo-comment-wrapper .btn-sm:hover,
+ .photo-comment-wrapper .btn-sm:focus,
+ #profile-jot-wrapper .btn-sm:hover,
+ #profile-job-wrapper .btn-sm:focus,
+ .wall-item-comment-wrapper .btn-sm:hover,
+ .wall-item-comment-wrapper .btn-sm:focus {
+ background-color: transparent;
+ color: var(--link-color);
+ }
+ #jot-modal-content input,
+ #jot-modal-content .friendica-tagsinput {
+ background-color: #fff !important;
+ }
+ #filebrowser .breadcrumb{
+ background-color: var(--background-color);
+ }
+ .fbrowser .folders button {
+ background-color: rgba(0,0,0,.1) !important;
+ color: black !important;
+ appearance: none;
+ border: none;
+ border-radius: 8px;
+ width: 100%;
+ margin-bottom: 5px;
+ }
+ .fbrowser .folders button:hover,
+ .fbrowser .folders button:focus {
+ background-color: rgba(0,0,0,.2) !important;
+ }
+ .fbrowser .folders li:hover,
+ .fbrowser .folders li:focus {
+ border-color: transparent !important;
+ background-color: transparent !important;
+ }
+ .fbrowser-content-container.justified-gallery {
+ max-height: 100% !important;
+ }
+ #jot-title,
+ #jot-category {
+ background-color: #fff !important;
+ }
+ #profile-jot-text, #profile-jot-wrapper textarea,
+ #jot-location,
+ .wall-item-comment-wrapper textarea {
+ background-color: #fff !important;
+ }
+ #jot-text-wrap, #profile-jot-wrapper .dropzone.dz-clickable,
+ .wall-item-comment-wrapper .dropzone.dz-clickable {
+ background-color: var(--background-color) !important;
+ }
+.jothidden.nav.nav-pills .btn-link {
+ font-size: 18px;
+}
+ .jothidden.nav.nav-pills .btn-link:hover,
+ .jothidden.nav.nav-pills .btn-link:focus {
+ color: var(--link-color) !important;
+ }
+ .jot-nav {
+ border: none !important;
+ }
+ .jot-nav a {
+ border: none !important;
+ border-radius: 8px !important;
+ margin-right: 5px;
+ }
+ .jot-nav a:hover, .jot-nav a:focus {
+ background-color: rgba(128,128,128,.2) !important;
+ }
+ .jot-nav .active a {
+ background-color: transparent !important;
+ border-radius: 0 !important;
+ }
+ .jot-nav .active a:hover, .jot-nav .active a:focus {
+ background-color: transparent !important;
+ }
+ [id^="comment-edit-preview"],
+ .comment-edit-preview {
+ border-radius: 8px !important;
+ box-shadow: none !important;
+ background-color: rgba(0,0,0,.1);
+ }
+ [id^="comment-edit-preview"]:hover,
+ [id^="comment-edit-preview"]:focus,
+ .comment-edit-preview:hover,
+ .comment-edit-preview:focus {
+ background-color: rgba(0,0,0,.2) !important;
+ }
+ #profile-jot-wrapper .wall-item-container.panel-body.preview {
+ border: none!important;
+ margin-top:20px !important;
+ border-radius: none !important;
+ background-color: transparent;
+ }
+ /* file browser */
+ #upload-photo {
+ background-color: var(--link-color) !important;
+ color: white !important;
+ border-radius: 8px !important;
+ }
+ #upload-photo:hover,
+ #upload-photo:focus {
+ background-color: darkblue !important;
+ }
+ body.mod-settings .panel-body {
+ background-color: var(--nav-bg);
+ border-radius: 10px;
+ border-top: none !important;
+ }
+ .help-block {
+ color: var(--font-color-darker);
+ }
+ /* HIDE ATTACHMENT BUTTON */
+ .fbswitcher [data-mode="attachment"] {
+ display: var(--attach-file-button) !important;
+ }
+/* PROFILE */
+ #profile-photo-wrapper {
+ overflow: visible !important;
+ padding: 5px;
+ background-color: #ffffff;
+ border-radius: 100%
+ }
+ aside .widget li {
+ margin-bottom: 8px;
+ }
+ aside .vcard img.u-photo, aside img.vcard-photo {
+ border-radius: 100% !important;
+ box-shadow: 0 0 1px rgba(0,0,0,.3);
+ border: 3px solid white;
+ }
+ aside .widget h3.p-name {
+ font-size: 32px !important;
+ text-align: center;
+ word-break: break-word;
+ text-shadow: 1px 1px 2px var(--background-color), -1px -1px 2px var(--background-color), 1px -1px 2px var(--background-color), -1px 1px 2px var(--background-color);
+ }
+ aside .vcard .p-addr {
+ font-weight: 600;
+ text-align: center;
+ white-space: break-spaces !important;
+ background-color: var(--background-color);
+ border-radius: 8px;
+ }
+ aside .vcard .title,
+ aside .vcard .location,
+ aside .vcard .key,
+ aside .vcard .about,
+ aside .vcard .xmpp,
+ aside .vcard .matrix,
+ aside .vcard .homepage,
+ aside .vcard .account-type {
+ background-color: var(--background-color);
+ padding: 5px;
+ border-radius: 8px;
+ min-width: 100%;
+ margin: 10px 0;
+ }
+ aside .widget li.selected {
+ background-color: rgba(128,128,128,.1) !important;
+ background-image: linear-gradient(var(--menu-background-hover-color),var(--menu-background-hover-color)) !important;
+ border-color: transparent !important;
+ border-radius: 8px;
+ }
+ aside .widget li.selected a {
+ font-weight: bold;
+ }
+ aside .widget li.selected a:hover {
+ color: #333;
+ }
+ aside .widget li:hover {
+ background-color:rgba(255,255,255,1) !important;
+ border-color: transparent !important;
+ border-radius: 8px;
+ }
+ #widget-contacts {
+ background-color: #ffffff !important;
+ border-radius: 8px !important;
+ box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2) !important;
+ }
+ .contact-block-img {
+ height: 100px !important;
+ width: 100px !important;
+ border-radius: 8px !important;
+ box-shadow: 0 0 1px rgba(0, 0, 0, .2);
+ margin: 5px;
+ }
+ .comment-fake-form {
+ border: none !important;
+ background-color: transparent !important;
+ }
+ .comment-fake-form textarea {
+ border-radius: 50px !important;
+ background-color: var(--comment-bg) !important;
+ /* frio -webkit-box-shadow */
+ /* frio box-shadow */
+ }
+ .wall-item-actions button {
+ font-size: 24px !important;
+ color: var(--nav-icon-color) !important;
+ }
+ .wall-item-actions button:hover {
+ filter: brightness(.75);
+ }
+ .wall-item-actions button.active {
+ color: var(--link-color) !important;
+ }
+ .wall-item-actions .checkbox {
+ padding-top: 6px !important;
+ }
+ /* WALL ITEM RESPONSES */
+ .wall-item-responses > div {
+ position: relative;
+ }
+ .wall-item-responses > div > p:first-of-type::before,
+ .hide-comments::before, .hide-comments-total::before {
+ display: inline-block;
+ margin-right: 3px;
+ font-family: ForkAwesome;
+ font-weight: lighter;
+ font-size: 12px;
+ text-align: center;
+ color: white;
+ width: 20px;
+ height:20px;
+ padding: 2px;
+ line-height: 16px;
+ border-radius: 100%;
+ }
+ .wall-item-responses .wall-item-like > p:first-of-type::before {
+ content: '\f164';
+ background-color: #0066FF;
+ }
+ .wall-item-responses .wall-item-dislike > p:first-of-type::before {
+ content: '\f165';
+ background-color: red;
+ }
+ .wall-item-responses .wall-item-announce > p:first-of-type::before{
+ content: '\f079';
+ background-color: #00c100;
+ }
+ .wall-item-responses .wall-item-attendyes > p:first-of-type::before{
+ content: '\f00c';
+ background-color: #00c100;
+ }
+ .wall-item-responses .wall-item-attendno > p:first-of-type::before{
+ content: '\f00d';
+ background-color: red;
+ }
+ .wall-item-responses .wall-item-attendmaybe > p:first-of-type::before{
+ content: '\f128';
+ background-color: orange;
+ }
+ .wall-item-responses div p[class*="-expanded"] {
+ background-color: rgba(0,0,0,.8);
+ position: absolute;
+ bottom: 100%;
+ padding: 10px;
+ margin-left: 23px;
+ border-radius: 8px;
+ width: 200px;
+ max-height: 415px;
+ font-size: 0px;
+ color: transparent;
+ overflow: hidden;
+ box-shadow: 0px 5px 5px rgba(0,0,0,.3);
+ z-index: 10;
+ }
+ .wall-item-responses div p[class*="-expanded"]:hover,
+ .wall-item-responses div p[class*="-expanded"]:focus {
+ overflow-y: auto;
+ }
+ .wall-item-responses div p[class*="-expanded"] a {
+ color: white !important;
+ display: block;
+ max-width: 100%;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ font-size: 14px;
+ overflow: hidden;
+ }
+ .wall-item-responses div p[class*="-expanded"] a:nth-of-type(74){
+ overflow: visible;
+ }
+ .wall-item-responses div p[class*="-expanded"] a:nth-of-type(74)::after {
+ content: 'and others...';
+ display: block;
+ }
+ .hide-comments::before, .hide-comments-total::before {
+ content: '\f27a';
+ background-color: #0066FF;
+ }
+ .comment .media-body {
+ padding: 10px;
+ background-color: var(--comment-bg);
+ border-radius: 20px;
+ }
+ .wall-item-actions-row .wall-item-emoji {
+ font-size: 18px;
+ line-height: 40px;
+ }
+ .navicon {
+ font-size: 20px;
+ position: relative;
+ top: 1px;
+ }
+ .wall-item-actions ul button,
+ .wall-item-actions ul a {
+ font-size: 14px !important;
+ color: inherit !important;
+ line-height: 14px !important;
+ margin: 0 !important;
+ }
+ /* little vcard when you scroll down on profiles */
+ #vcard-short-desc * {
+ color: var(--font-color) !important;
+ }
+ #vcard-short-photo-wrapper img,
+ #nav-short-info .contact-wrapper img {
+ border-radius: 100% !important;
+ }
+ /* Profile Cover Photo */
+ .row:has(.coverphoto) aside,
+ .row:has(.coverphoto) #content {
+ margin-top: 350px;
+ }
+ .row:has(.coverphoto) aside .widget.vcard {
+ background-color: transparent !important;
+ }
+ .coverphoto {
+ position: fixed;
+ top: 115px;
+ left: 0 !important;
+ right: 0 !important;
+ z-index: -1;
+ height: 500px;
+ overflow: hidden;
+ }
+ .coverphoto img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+ }
+ .coverphoto:has(> :last-child:nth-child(2)) img {
+ height: 50%;
+ }
+ .coverphoto:has(> :last-child:nth-child(3)) img {
+ height: 33.3333%;
+ }
+ .coverphoto:has(> :last-child:nth-child(n+4)) img {
+ height: 25%;
+ }
+ /* 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
+ -webkit-box-shadow: 0 0 1px rgba(0,0,0,.5);
+ box-shadow: 0 0 1px rgba(0,0,0,.5);
+ */
+ border-radius: 100%;
+ position: relative;
+ padding: 6px 4px;
+ height: 35px;
+ width: 35px;
+ display: block;
+ }
+ .plink.u-url:hover {
+ background-color: rgba(0,0,0,.1) !important;
+ text-decoration: none !important;
+ }
+ .plink.u-url::after {
+ content: '\f101';
+ font-family: ForkAwesome;
+ color: #666;
+ }
+ .img-allocated-max-width {
+ margin: 20px auto;
+ }
+ #vcard-short-photo-wrapper img,
+ #nav-short-info .contact-wrapper img {
+ border-radius: 100%;
+ }
+/* Calendar */
+.fc-unthemed td.fc-today {
+ background-color: rgba(128,128,128,.1);
+ background-image: linear-gradient(var(--menu-background-hover-color),var(--menu-background-hover-color));
+}
+.event-buttons .btn {
+ background-color: var(--link-color);
+ color: #fff;
+ border-radius: 100%;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ font-size: 18px;
+ padding: 0;
+ margin-right: 5px;
+}
+ .event-buttons .btn:hover,
+ .event-buttons .btn:focus {
+ color: #fff;
+ box-shadow: inset 0 0 100px rgba(0,0,0,.1);
+ }
+ .fc .fc-event {
+ background-color: var(--link-color);
+ border: none;
+ color: white;
+ }
+ .fc .fc-month-view .fc-content .fc-title .item-desc:hover,
+ .fc .fc-month-view .fc-content .fc-title .item-desc:focus {
+ color: white;
+ }
+ .fc .fc-event:hover,
+ .fc .fc-event:focus {
+ box-shadow: inset 0 0 100px rgba(0,0,0,.2);
+ }
+/* Photo Albums */
+.photo-album-actions .icon-padding,
+.photo-edit-link-wrap .icon-padding {
+ margin-left: 10px !important;
+}
+.photos-upload-link {
+ font-size: 28px;
+ color: var(--link-color) !important;
+ opacity: 1 !important;
+ border-radius: 8px;
+ padding: 0px 8px;
+}
+#photo-album-link {
+ opacity: 1 !important;
+}
+.photos-upload-link i,
+#photo-album-link i,
+#photo-edit-link i,
+#photo-toprofile-link i,
+#album-edit-link i,
+#album-drop-link i,
+.photos-order-link i {
+ font-size: 24px !important;
+ color: var(--link-color) !important;
+ opacity: 1 !important;
+ border-radius: 100% !important;
+ padding: 8px 11px !important;
+ height: 40px;
+ width: 40px;
+}
+ #photo-edit-link i.fa-image {
+ padding: 6px 7px !important;
+ }
+.photos-order-link {
+ margin-top: 5px !important;
+}
+ .photos-upload-link:hover i,
+ .photos-upload-link:focus i,
+ #photo-album-link:hover i,
+ #photo-album-link:focus i,
+ #photo-edit-link:hover i,
+ #photo-toprofile-link:hover i,
+ #photo-toprofile-link:focus i,
+ #album-edit-link:hover i,
+ #album-edit-link:focus i,
+ #album-drop-link:hover i,
+ #album-drop-link:focus i,
+ .photos-order-link:hover i,
+ .photos-upload-link:hover i,
+ .photos-upload-link:focus i {
+ background-color: rgba(128,128,128,.1) !important;
+ }
+.photos-content-wrapper .photos-upload-link::before {
+ content: var(--add-photo-button-text);
+ font-size: 15px;
+ vertical-align: middle;
+ margin-top: -10px;
+ display: inline-block;
+}
+.justified-gallery {
+ overflow: visible !important;
+ height: auto !important;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: start;
+}
+.justified-gallery > a,
+.justified-gallery > div,
+.justified-gallery > figure{
+ height: 180px !important;
+ width: 180px !important;
+ border: 1px solid #ccc;
+ position: relative !important;
+ top: auto !important;
+ left: auto !important;
+ border-radius: 8px;
+ margin: 4px !important;
+}
+.justified-gallery > .jg-entry-visible > img,
+.justified-gallery > .jg-entry-visible > a > img,
+.justified-gallery > .jg-entry-visible > svg,
+.justified-gallery > .jg-entry-visible > a > svg{
+ width: 100% !important;
+ height: 100% !important;
+ margin: 0 !important;
+ top: 0 !important;
+ left: 0 !important;
+ object-fit:cover;
+ object-position: center;
+}
+#photo-photo {
+ margin: 0 auto !important;
+ max-width: 100%;
+}
+#photos-upload-perms button[data-toggle="modal"] {
+ background-color: rgba(0,0,0,.1) !important;
+ padding: 0 !important;
+ height: 36px;
+ width: 36px;
+ margin-right: 5px;
+ border-radius: 100%;
+ color: var(--link-color);
+}
+ #photos-upload-perms button[data-toggle="modal"]:hover,
+ #photos-upload-perms button[data-toggle="modal"]:focus {
+ background-color: rgba(0,0,0,.2) !important;
+ }
+/* ADD-ONS */
+.advancedcontentfilter-content-wrapper table td:nth-of-type(2) {
+ word-wrap: anywhere;
+}
+.advancedcontentfilter-content-wrapper pre {
+ margin-top: 20px;
+}
+/* calculator addon */
+.calc-content-wrapper table {
+ margin: 0 auto;
+ color: #333;
+}
+.calc-content-wrapper td[colspan='5']::after {
+ content: ' ';
+ height: 50px;
+ width: 260px;
+ background-color: black;
+ display: block;
+}
+ .calc-content-wrapper input[type='button']{
+ appearance: none;
+ height: 50px;
+ width: 100%;
+ border: 1px solid #666;
+ color: white;
+ font-size: 18px;
+ font-weight: bold;
+ background-color: #999;
+ text-align: center;
+ }
+ .calc-content-wrapper input[type='button']:active {
+ box-shadow: inset 0 0 100px rgba(255,255,255,.2);
+ }
+.calc-content-wrapper input[name='plus'],
+.calc-content-wrapper input[name='minus'],
+.calc-content-wrapper input[name='multiplication'],
+.calc-content-wrapper input[name='division'],
+.calc-content-wrapper input[name='enter']{
+ background-color: orange;
+}
+ .calc-content-wrapper input[name='plus']:active,
+ .calc-content-wrapper input[name='minus']:active,
+ .calc-content-wrapper input[name='multiplication']:active,
+ .calc-content-wrapper input[name='division']:active,
+ .calc-content-wrapper input[name='enter']:active{
+ box-shadow: inset 0 0 100px rgba(0,0,0,.2);
+ }
+.calc-content-wrapper input[name='plus']{
+ padding-left: 10px;
+}
+.calc-content-wrapper input[name='multiplication']{
+ padding-left: 14px;
+}
+.calc-content-wrapper input[name='clear'],
+.calc-content-wrapper input[name='sqareroot'],
+.calc-content-wrapper input[name='squarex'],
+.calc-content-wrapper input[name='deg-rad'],
+.calc-content-wrapper input[name='rad-deg'],
+.calc-content-wrapper input[name='sine'],
+.calc-content-wrapper input[name='arcsine'],
+.calc-content-wrapper input[name='cosine'],
+.calc-content-wrapper input[name='arccosine']{
+ background-color: #666;
+}
+.calc-content-wrapper #display {
+ appearance: none !important;
+ font-size: 36px;
+ font-weight: lighter;
+ text-align: right;
+ color: #eee;
+ background-color: #666;
+ border: none;
+ display: block;
+ width: 260px;
+ position: absolute;
+}
+ /* 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;
+ left: 10px;
+ background-color: var(--link-color);
+ color: #ffffff;
+ width: 50px;
+ height: 50px;
+ line-height: 50px;
+ text-align: center;
+ font-size: 24px;
+ border-radius: 100%;
+}
+#item-delete-selected {
+ height: 50px;
+ width: 50px;
+ line-height: 50px;
+ font-size: 24px;
+ background-color: var(--link-color);
+ border-radius: 100%;
+ top: 120px;
+}
+ #item-delete-selected:hover,
+ #item-delete-selected:focus {
+ box-shadow: inset 0 0 100px rgba(0,0,0,.2);
+ }
+ /* Profile pics in Messages */
+ .event-wrapper .event-owner img,
+ .mail-conv-wrapper .media .contact-photo-wrapper img,
+ .mail-list-outside-wrapper .contact-photo-wrapper img {
+ border-radius: 100%;
+ }
+ #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;
+}
+/* TAGS, CATEGORIES, MENTIONS BUTTONS
+ ==================================
+ Restyled to be less obnoxious and tiny
+ now sized and spaced like they are on Mastodon
+*/
+a.tag.label,
+.wall-item-container .wall-item-bottom .wall-item-tags span.label {
+ border-radius: 4px !important;
+ display: inline-flex !important;
+ font-size: 12px !important;
+ font-weight: 500 !important;
+ padding: 6px 12px !important;
+ -webkit-text-decoration: none !important;
+ text-decoration: none !important;
+ margin: 2px !important;
+ background-image: none !important;
+ background-color: transparent !important;
+ box-shadow: none !important;
+ color: #0066FF !important;
+ border: 1px solid #0066FF;
+ text-shadow: none !important;
+}
+ .wall-item-bottom .label {
+ color: inherit;
+ }
+ .wall-item-bottom .label a {
+ color: inherit;
+ }
+ /* hide lightning bolt and person icons
+ pretty sure people know what "#" and "@" mean now
+ */
+ a.tag.label .fa-bolt::before,
+ .wall-item-bottom .label .fa-bolt::before {
+ content: '';
+ }
+ .wall-item-bottom .label .fa-user::before{
+ content: '';
+ }
+ /* undo hover for entire container*/
+ .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
+ filter: grayscale(0.5);
+ opacity: 0.8;
+ -webkit-transition: 0s;
+ -moz-transition: 0s;
+ -ms-transition: 0s;
+ transition: 0s;
+ }
+ /* replace with hover for individual tag */
+ .wall-item-container .wall-item-bottom .wall-item-tags span.label:hover,
+ .wall-item-container .wall-item-bottom .wall-item-tags span.label:focus,
+ .wall-item-container .wall-item-bottom .wall-item-tags span.label:focus-within {
+ filter: grayscale(0) !important;
+ opacity: 1 !important;
+ /* probably don't need vendor prefixed anymore but whatever...*/
+ -webkit-transition: all 0.25s ease-in-out !important;
+ -moz-transtion: all 0.25s ease-in-out !important;
+ -ms-transition: all 0.25s ease-in-out !important;
+ transition: all 0.25s ease-in-out !important;
+ }
+ /* Hashtag Buttons */
+ a.tag.label.btn-info,
+ .wall-item-bottom .wall-item-tags .tag.label.btn-info {
+ /* inherits everything from above */
+ }
+ a.tag.label.btn-info:hover, a.tag.label.btn-info:focus,
+ .wall-item-bottom .wall-item-tags .tag.label.btn-info:hover,
+ .wall-item-bottom .wall-item-tags .tag.label.btn-info:focus {
+ background-color: #0066FF !important;
+ color: white !important;
+ }
+ /* Category Buttons */
+ .wall-item-bottom .wall-item-tags .category.label.btn-success {
+ border-color: limegreen !important;
+ color: limegreen !important;
+ font-size: 12px;
+ }
+ /* replace (x) remove with icon button */
+ .wall-item-bottom .wall-item-tags .category.label.btn-success a:first-of-type {
+ margin-right: 4px;
+ }
+ .wall-item-bottom .wall-item-tags .category.label.btn-success a:last-of-type {
+ font-size: 0px;
+ }
+ .wall-item-bottom .wall-item-tags .category.label.btn-success a:last-of-type::after {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ font-size: 12px;
+ }
+ .wall-item-bottom .wall-item-tags .category.label.btn-success:hover,
+ .wall-item-bottom .wall-item-tags .category.label.btn-success:focus {
+ background-color: limegreen !important;
+ color: black !important;
+ }
+ /* when a category is removed need to visually indicate it */
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success){
+ border-color: #ccc !important;
+ color: #ccc !important;
+ }
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:first-of-type{
+ font-size: 12px;
+ text-decoration: line-through;
+ margin-right: 4px;
+ }
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type {
+ font-size: 0px;
+ }
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type::after {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ font-size: 12px;
+ text-decoration: line-through;
+ }
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):hover,
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):focus {
+ background-color: red !important;
+ color: #ccc !important;
+ }
+ /* overrides for Saved File page where buttons structure is different */
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success {
+ font-size: 12px !important;
+ }
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success a {
+ font-size: 0px !important;
+ margin: 0px;
+ }
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success a::after {
+ margin-left: 0px;
+ }
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success){
+ font-size: 12px !important;
+ text-decoration: line-through !important;
+ }
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a {
+ font-size: 0px !important;
+ }
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a::after {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ font-size: 12px;
+ text-decoration: line-through;
+ }
+ /* Folder Buttons */
+ .wall-item-bottom .wall-item-tags .folder.label.btn-danger {
+ border-color: red !important;
+ color: red !important;
+ }
+ /* replace (x) remove with icon button */
+ .wall-item-bottom .wall-item-tags .folder.label.btn-danger a:first-of-type{
+ font-size: 0px;
+ }
+ .wall-item-bottom .wall-item-tags .folder.label.btn-danger a:last-of-type::after {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ font-size: 12px;
+ }
+ .wall-item-bottom .wall-item-tags .folder.label.btn-danger:hover,
+ .wall-item-bottom .wall-item-tags .folder.label.btn-danger:focus {
+ background-color: red !important;
+ color: white !important;
+ }
+ /* when a category is removed need to visually indicate it */
+ .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger){
+ border-color: #ccc !important;
+ color: #ccc !important;
+ text-decoration: line-through !important;
+ }
+ .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger) a:first-of-type{
+ font-size: 0px;
+ }
+ .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger) a:last-of-type::after {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ font-size: 12px;
+ }
+ .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger):hover,
+ .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger):focus{
+ background-color: black !important;
+ color: white !important;
+ }
+ /* @ Mention Buttons */
+ .wall-item-bottom .wall-item-tags .mention.label.btn-warning {
+ border-color: darkgoldenrod !important;
+ color: darkgoldenrod !important;
+ }
+ .wall-item-bottom .wall-item-tags .mention.label.btn-warning:hover,
+ .wall-item-bottom .wall-item-tags .mention.label.btn-warning:focus {
+ background-color: goldenrod !important;
+ border-color: goldenrod !important;
+ color: white !important;
+ }
+ /* Content Filter Buttons */
+ button.content-filter-button {
+ color: var(--link-color);
+ background-color: transparent;
+ border: 1px solid var(--link-color);
+ }
+ /* Comment buttons on other peple's profile Conversations */
+ a.btn-link.button-comments {
+ width: fit-content;
+ text-align:center !important;
+ display: block;
+ margin-top:10px;
+ color: var(--nav-icon-color) !important;
+ }
+ a.btn-link.button-comments:hover {
+ text-decoration: none;
+ color: var(--link-color) !important;
+ }
+ a.btn-link.button-comments .fa {
+ width: 50px;
+ display: block;
+ margin: 0 auto;
+ }
+ a.btn-link.button-comments .fa::before {
+ font-size: 24px;
+ }
+ a.btn-link.button-comments::after {
+ font-size: 14px !important;
+ position: relative;
+ top: 5px;
+ }
+ /* 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
+ ===========================
+*/
+@media screen and (min-width: 1921px){
+ .coverphoto {
+ max-width: 1920px;
+ left: 50% !important;
+ margin-left: -960px;
+ border-bottom-right-radius: 10px;
+ border-bottom-left-radius: 10px;
+ }
+}
+/* Small Laptop Screens
+ Some tablets in Landscape Orientation
+ =====================================
+*/
+@media screen and (max-width: 1280px) {
+ #search-box {
+ width: 18% !important;
+ }
+ #search-save {
+ width: 140px !important;
+ }
+}
+/* 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;
+ }
+ /* Contact Notification Action Buttons */
+ .intro-actions {
+ position: relative;
+ float: none !important;
+ }
+}
+/* Large Tablets in Portrait Orientation
+ =====================================
+*/
+@media screen and (max-width: 990px){
+ /* Friendica icon upper left */
+ #banner {
+ display: block !important;
+ padding: 0 !important;
+ margin: 8px 10px;
+ }
+ #friendica-logo-mask {
+ display: block !important;
+ }
+ /* hide search box - no room */
+ #search-box {
+ display: none;
+ }
+ /* show mobile search toggle */
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]{
+ display: block !important;
+ position: fixed !important;
+ left: 100px;
+ top: 6px;
+ }
+ /* force display of mobile search box */
+ #search-mobile {
+ top: 115px !important;
+ /* frio border-color */
+ }
+ #search-mobile .col-xs-12 {
+ background-color: var(--nav-bg);
+ }
+ #search-mobile.collapse.in,
+ #search-mobile.collapse.in * {
+ display: block !important;
+ }
+ #topbar-first .navbar-toggle[data-target="aside"] {
+ position: fixed;
+ top: 6px;
+ left: 50px;
+ }
+ /* change aside toggle icon */
+ .navbar-toggle .fa-ellipsis-v::before,
+ #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before {
+ content: "\f152";
+ }
+ body.aside-out .navbar-toggle .fa-ellipsis-v::before,
+ body.aside-out #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before {
+ content: "\f191";
+ }
+ #topbar-first .nav > .account {
+ right: 24px;
+ }
+ #jotOpen::before {
+ content: '';
+ margin: 0;
+ }
+ #mention-link {
+ padding: 0 8px !important;
+ }
+ #mention-link span:last-of-type {
+ display: none;
+ }
+ .offcanvas-right-overlay,
+ aside::before {
+ background-color: rgba(255, 255, 255, 0.4);
+ }
+ /* Profile Aside Mobile */
+ body.mod-contact #content,
+ body.mod-profile #content,
+ body.mod-photos #content {
+ margin-top: 350px;
+ }
+ /* only seen on your own Recent Photos page */
+ body.mod-profile #sidebar-photos-albums::before {
+ content: '\f083';
+ font-family: ForkAwesome;
+ font-size: 150px;
+ position: fixed;
+ top: 175px;
+ left: 0;
+ right: 0;
+ text-align: center;
+ color: var(--nav-icon-color);
+ opacity: .5;
+ z-index: -1;
+ transition-duration: .5s;
+ transition-property: left;
+ }
+ body.mod-profile aside.canvas-sliding #sidebar-photos-albums::before,
+ body.mod-profile aside.canvas-slid #sidebar-photos-albums::before {
+ left: 50%;
+ }
+ /* hide camera icon on other profile Recent Photos pages */
+ body.mod-profile .vcard + #sidebar-photos-albums::before {
+ content: '';
+ }
+
+ /* 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 {
+ margin-top: 0px !important;
+ left: -300px !important;
+ right: auto !important;
+ display: block !important;
+ padding-top: 120px;
+ transition-duration: .5s !important;
+ z-index: auto;
+ }
+ body.mod-contact aside.canvas-slid,
+ body.mod-photos aside.canvas-slid,
+ body.mod-profile aside.canvas-slid {
+ left: 0px !important;
+ right: auto !important;
+ z-index: 20;
+ }
+ body.mod-contact aside #profile-photo-wrapper,
+ body.mod-photos aside #profile-photo-wrapper,
+ body.mod-profile aside #profile-photo-wrapper {
+ position: fixed;
+ top: 150px;
+ left: 50%;
+ height: 150px;
+ width: 150px;
+ margin-left: -75px;
+ transition-timing-function: ease-in-out;
+ transition-duration: .3s;
+ transition-property: all;
+ }
+ body.mod-contact .profile-header h3.p-name,
+ body.mod-photos .profile-header h3.p-name,
+ body.mod-profile .profile-header h3.p-name {
+ position: fixed;
+ width: 100%;
+ top: 300px;
+ left: 50%;
+ margin-left: -50%;
+ transition-timing-function: ease-in-out;
+ transition-duration: .3s;
+ transition-property: all;
+
+ }
+ body.mod-contact .profile-header .p-addr,
+ body.mod-photos .profile-header .p-addr,
+ body.mod-profile .profile-header .p-addr {
+ position: fixed;
+ width: 50%;
+ top: 400px;
+ left: 50%;
+ margin-left: -25%;
+ transition-timing-function: ease-in-out;
+ transition-duration: .3s;
+ transition-property: all;
+ }
+ /* bounce effect */
+ body.mod-contact aside.canvas-sliding #profile-photo-wrapper,
+ body.mod-photos aside.canvas-sliding #profile-photo-wrapper,
+ body.mod-profile aside.canvas-sliding #profile-photo-wrapper {
+ margin-left: -150px;
+ }
+ body.mod-contact aside.canvas-sliding .profile-header h3.p-name,
+ body.mod-photos aside.canvas-sliding .profile-header h3.p-name,
+ body.mod-profile aside.canvas-sliding .profile-header h3.p-name {
+ margin-left: calc(-50% - 75px);
+ }
+ body.mod-contact aside.canvas-sliding .profile-header .p-addr,
+ body.mod-photos aside.canvas-sliding .profile-header .p-addr,
+ body.mod-profile aside.canvas-sliding .profile-header .p-addr {
+ margin-left: -300px;
+ }
+ /* centered in right-hand side */
+ body.mod-contact aside.canvas-slid #profile-photo-wrapper,
+ body.mod-photos aside.canvas-slid #profile-photo-wrapper,
+ body.mod-profile aside.canvas-slid #profile-photo-wrapper {
+ margin-left: -225px;
+ }
+ body.mod-contact aside.canvas-slid .profile-header h3.p-name,
+ body.mod-photos aside.canvas-slid .profile-header h3.p-name,
+ body.mod-profile aside.canvas-slid .profile-header h3.p-name {
+ margin-left: calc(-50% - 150px);
+ }
+ body.mod-contact aside.canvas-slid .profile-header .p-addr,
+ body.mod-photos aside.canvas-slid .profile-header .p-addr,
+ body.mod-profile aside.canvas-slid .profile-header .p-addr {
+ margin-left: calc(-25% - 150px);
+ }
+ /* Cover Photo Mobile */
+ .coverphoto.canvas-sliding,
+ .coverphoto.canvas-slid{
+ left: 0px !important;
+ right: 0px !important;
+ bottom: 0px;
+ background-color: var(--background-color);
+ overflow: visible;
+ }
+ .coverphoto.canvas-slid::after {
+ content: '';
+ position: absolute;
+ top: 500px;
+ left: 0px;
+ width: 100%;
+ height: 500%;
+ 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
+ Some Small tablets in Portrait Orientation
+ ======================================
+*/
+@media screen and (max-width: 768px), (max-height: 480px) and (max-width: 960px) and (orientation: landscape) {
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]{
+ left: 10%;
+ }
+ .topbar ul.nav {
+ position: relative !important;
+ left: 10% !important;
+ margin-left: 0!important;
+ }
+ #search-save {
+ width: 100px !important;
+ }
+ #search-save .fa-plus::after {
+ content: var(--follow-button-text);
+ }
+ #search-save .fa-floppy-o::after {
+ content: var(--save-button-text);
+ }
+ a.wall-item-name-link, span.fakelink {
+ font-weight: bold;
+ }
+ .wall-item-container iframe {
+ aspect-ratio: 5/4;
+ }
+ /* new mobile layout */
+ body {
+ padding-top: 65px !important;
+ padding-bottom: 55px !important;
+ }
+
+ /* Friendica icon upper left */
+ #banner {
+ display: block !important;
+ padding: 0 !important;
+ margin: 8px 10px !important;
+ }
+ #friendica-logo-mask {
+ display: block !important;
+ }
+ #topbar-first {
+ top: auto;
+ bottom: 0;
+ box-shadow: 2px 0px 5px rgba(0,0,0,.5);
+ }
+ #topbar-first .topbar-nav .arrow {
+ display: none;
+ }
+ /* re-reveal the user profile toggle */
+ #topbar-first .nav > .account {
+ position: fixed;
+ display: block !important;
+ top: 0;
+ right: 8px;
+ }
+ #topbar-first .nav > .account img {
+ margin: 0;
+ }
+ #topbar-first .nav > .account span.caret {
+ display: none;
+ }
+ /* overlay mobile nav toggle invisibly */
+ #topbar-first .offcanvas-right-toggle {
+ position: fixed;
+ top: -3px;
+ right: 7px;
+ color: transparent;
+ z-index: 10000;
+ }
+ /* move sidebar toggle to bottom bar */
+ #topbar-first .navbar-toggle[data-target="aside"]{
+ position: fixed;
+ top: auto;
+ left: auto;
+ bottom: 5px;
+ }
+ /* change icon */
+ .navbar-toggle .fa-ellipsis-v::before,
+ #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before {
+ content: "\f152";
+ }
+ body.aside-out .navbar-toggle .fa-ellipsis-v::before,
+ body.aside-out #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before {
+ content: "\f191";
+ }
+ /* move search button right */
+ #topbar-first .navbar-toggle[data-target="#search-mobile"] {
+ position: relative !important;
+ display: block !important; /* show in landscape on phones */
+ top: 0;
+ left: auto;
+ right: auto;
+ margin: 0;
+ }
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed){
+ color: var(--link-color);
+ border-bottom: 3px solid var(--link-color);
+ background-color: transparent !important;
+ border-radius: 0 !important;
+ margin-top: 0px;
+ }
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed) .fa-search::before {
+ content: '\f00e';
+ }
+ /* fix spacing of icons */
+ .topbar ul.nav {
+ position: absolute !important;
+ left: 50px !important;
+ right: 50px !important;
+ display: flex;
+ justify-content: space-between;
+ }
+ #topbar-first .topbar-nav .nav-segment {
+ margin: 0px;
+ }
+ #search-mobile {
+ top: 60px !important;
+ }
+ /* always show on phones in landscape */
+ #search-mobile.collapse.in,
+ #search-mobile.collapse.in * {
+ display: block !important;
+ }
+ /* app-style notification menu */
+ #nav-notifications-menu {
+ position: fixed;
+ top: 60px;
+ bottom: 51px;
+ left: 0;
+ right: 0;
+ width: 100% !important;
+ min-width: unset;
+ max-width: unset;
+ min-height: unset;
+ max-height: unset !important;
+ margin: 0 !important;
+ box-shadow: none;
+ }
+ #nav-notifications-menu::before {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ position: absolute;
+ top: 8px;
+ right: 12px;
+ height: 40px;
+ width: 40px;
+ background-color: var(--link-color);
+ color: white;
+ font-size: 24px;
+ border-radius: 100%;
+ line-height: 40px;
+ text-align: center;
+ display: block;
+ }
+ #offcanvasUsermenu {
+ background-color: var(--nav-bg) !important;
+ }
+ #offcanvasUsermenu ul.list-group {
+ -webkit-box-shadow: none !important;
+ -moz-box-shadow: none !important;
+ box-shadow: none !important;
+ }
+ #offcanvasUsermenu ul.list-group li:first-of-type img {
+ max-width: unset !important;
+ max-height: unset !important;
+ height: 40px !important;
+ width: 40px !important;
+ border-radius: 100% !important;
+ }
+ #offcanvasUsermenu li.divider {
+ display: none !important;
+ }
+ #offcanvasUsermenu li.list-group-item,
+ #offcanvasUsermenu li.list-group-item a {
+ border: transparent !important;
+ background-color: transparent !important;
+ color: var(--nav-icon-color) !important;
+ width: 90% !important;
+ margin: 0 auto;
+ }
+ #offcanvasUsermenu li.list-group-item:hover {
+ background-color: #333 !important;
+ border-radius: 8px !important;
+ }
+ #offcanvasUsermenu li.list-group-item:hover a {
+ color: #fff !important;
+ }
+ #offcanvasUsermenu li.list-group-item:first-of-type:hover {
+ background-color: revert !important;
+ }
+ /* force mobile search in landscape on phones */
+ #search-box {
+ display: none !important;
+ }
+ /* position delete button */
+ #item-delete-selected {
+ top: 60px;
+ right: 10px;
+ }
+ /* move top bars around */
+ #topbar-second {
+ top: 0px;
+ padding: 0;
+ }
+ #topbar-second div.container{
+ position: absolute;
+ left: 55px;
+ right: 55px;
+ }
+ #topbar-second #tabmenu {
+ width: 100%;
+ }
+ /* override and show mobile tabs in landscape */
+ #topbar-second #tabmenu ul.tabbar.hidden-xs {
+ display: none !important;
+ }
+ #topbar-second #tabmenu ul.tabbar.visible-xs {
+ display: block !important;
+ }
+ #topbar-second ul.tabbar {
+ text-align: center;
+ max-width: 100%;
+ }
+ #topbar-second ul.tabbar > li:first-of-type {
+ max-width: 75%;
+ overflow: hidden;
+ margin-right: 50px;
+ }
+ #topbar-second ul.tabbar li:first-of-type ul.tabs {
+ max-width: 100%;
+ }
+ #topbar-second ul.tabbar li:first-of-type ul.tabs li {
+ width: 100%;
+ height: 100%;
+ }
+ #topbar-second ul.tabbar li:first-of-type ul.tabs li a {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ /* prevent dropdown being pushed off toolbar */
+ #topbar-second ul.tabbar > li:last-of-type {
+ margin-left: -50px;
+ border-bottom: 4px solid var(--link-color);
+ }
+ #topbar-second ul.tabbar > li:last-of-type li.dropdown {
+ margin-left: 0px !important;
+ }
+ #dropdownMenuTools-xs {
+ height: 60px;
+ }
+ ul.tabs-extended .dropdown.open .fa-chevron-down::before{
+ content: '\f077';
+ }
+ #jotOpen, #search-save, #mention-link {
+ position: fixed;
+ bottom: 65px;
+ right: 10px;
+ border-radius: 100% !important;
+ height: 50px;
+ width: 50px !important;
+ line-height: 50px;
+ border: none !important;
+ box-shadow: none !important;
+ }
+ #mention-link span:last-of-type {
+ display: none;
+ }
+ #mention-link span:first-of-type {
+ float: none;
+ position: relative;
+ top: 2px;
+ }
+ #search-save .fa-plus::after,
+ #search-save .fa-floppy-o::after {
+ display: none;
+ }
+ #search-save .fa-plus::before,
+ #search-save .fa-floppy-o::before {
+ content: '\f0c7' !important;
+ }
+ .fa-edit::before,
+ .fa-pencil-square-o::before {
+ content: "\f040";
+ }
+ .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;
+ top: 58px;
+ left: 0px;
+ right: 0px;
+ bottom: 50px;
+ width: 100% !important;
+ overflow: auto !important;
+ overflow-x: hidden !important;
+ }
+ #topbar-second .dropdown-menu li {
+ height: auto !important;
+ }
+ #topbar-second .dropdown-menu li a,
+ .tabs .dropdown-menu li a {
+ font-size: 18px !important;
+ }
+ .topbar .dropdown-header {
+ font-size: 18px !important;
+ }
+ .topbar .dropdown-header .dropdown-header-link .btn-link {
+ font-size: 18px !important;
+ margin-right: 40px;
+ }
+ aside.offcanvas-xs {
+ padding-top: 60px;
+ padding-bottom: 60px;
+ }
+ body.mod-profile #sidebar-photos-albums::before {
+ top: 125px;
+ }
+ body.mod-contact aside #profile-photo-wrapper,
+ body.mod-photos aside #profile-photo-wrapper,
+ body.mod-profile aside #profile-photo-wrapper {
+ top: 100px;
+ }
+ body.mod-contact .profile-header h3.p-name,
+ body.mod-photos .profile-header h3.p-name,
+ body.mod-profile .profile-header h3.p-name {
+ top: 255px;
+ }
+ body.mod-contact .profile-header .p-addr,
+ body.mod-photos .profile-header .p-addr,
+ body.mod-profile .profile-header .p-addr {
+ top: 345px;
+ }
+ .coverphoto,
+ .coverphoto.canvas-sliding,
+ .coverphoto.canvas-slid {
+ top: 55px;
+ }
+ #message-new a {
+ height: 50px;
+ width: 50px;
+ background-color: var(--link-color);
+ line-height: 50px;
+ font-size: 24px;
+ text-align: center;
+ border-radius: 100%;
+ display: block;
+ color: white;
+ padding: 0;
+ }
+ #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)
+ =========================================
+*/
+@media screen and (max-width: 600px) and (orientation: portrait) {
+ body.mod-contact aside,
+ body.mod-photos aside,
+ body.mod-profile aside {
+ left: -100% !important;
+ right: 0% !important;
+ max-width: 100% !important;
+ width: 100% !important;
+ padding-top: 60px;
+ background-color: var(--background-color) !important;
+ }
+ /* only seen on your own Recent Photos page */
+ body.mod-profile #sidebar-photos-albums::before {
+ transition-property: top;
+ }
+ body.mod-profile aside.canvas-sliding #sidebar-photos-albums::before,
+ body.mod-profile aside.canvas-slid #sidebar-photos-albums::before {
+ left: 0px;
+ top: 150%;
+ }
+ body.mod-contact aside.canvas-slid,
+ body.mod-photos aside.canvas-slid,
+ body.mod-profile aside.canvas-slid {
+ left: 0px !important;
+ }
+ body.mod-contact aside.canvas-slid::before,
+ body.mod-photos aside.canvas-slid::before,
+ body.mod-profile aside.canvas-slid::before {
+ opacity: 0;
+ }
+ body.mod-contact aside #profile-photo-wrapper,
+ body.mod-photos aside #profile-photo-wrapper,
+ body.mod-profile aside #profile-photo-wrapper {
+ top: 100px;
+ }
+ body.mod-contact .profile-header h3.p-name,
+ body.mod-photos .profile-header h3.p-name,
+ body.mod-profile .profile-header h3.p-name {
+ top: 255px;
+ }
+ body.mod-contact .profile-header .p-addr,
+ body.mod-photos .profile-header .p-addr,
+ body.mod-profile .profile-header .p-addr {
+ top: 345px;
+ width: 80%;
+ margin-left: -40%;
+ }
+ /* bounce effect */
+ body.mod-contact aside.canvas-sliding #profile-photo-wrapper,
+ body.mod-photos aside.canvas-sliding #profile-photo-wrapper,
+ body.mod-profile aside.canvas-sliding #profile-photo-wrapper {
+ margin-left: -75px;
+ top: 150% !important;
+ }
+ body.mod-contact aside.canvas-sliding .profile-header h3.p-name,
+ body.mod-photos aside.canvas-sliding .profile-header h3.p-name,
+ body.mod-profile aside.canvas-sliding .profile-header h3.p-name {
+ margin-left: -50%;
+ top: 150% !important;
+ }
+ body.mod-contact aside.canvas-sliding .profile-header .p-addr,
+ body.mod-photos aside.canvas-sliding .profile-header .p-addr,
+ body.mod-profile aside.canvas-sliding .profile-header .p-addr {
+ margin-left: -25%;
+ top: 150% !important;
+ }
+
+ body.mod-contact aside.canvas-slid #profile-photo-wrapper,
+ body.mod-photo aside.canvas-slid #profile-photo-wrapper,
+ body.mod-profile aside.canvas-slid #profile-photo-wrapper {
+ margin-left: -75px;
+ top: 150% !important;
+ }
+ body.mod-contact aside.canvas-slid .profile-header h3.p-name,
+ body.mod-photo aside.canvas-slid .profile-header h3.p-name,
+ body.mod-profile aside.canvas-slid .profile-header h3.p-name {
+ margin-left: -50%;
+ top: 150% !important;
+ }
+ body.mod-contact aside.canvas-slid .profile-header .p-addr,
+ body.mod-photo aside.canvas-slid .profile-header .p-addr,
+ body.mod-profile aside.canvas-slid .profile-header .p-addr {
+ margin-left: -25%;
+ top: 150% !important;
+ }
+ .coverphoto {
+ transition-duration: .5s;
+ transition-property: top;
+ }
+ body.mod-contact.aside-out .coverphoto,
+ body.mod-photo.aside-out .coverphoto,
+ body.mod-profile.aside-out .coverphoto,
+ body.mod-contact aside.canvas-slid .coverphoto,
+ body.mod-photo aside.canvas-slid .coverphoto,
+ body.mod-profile aside.canvas-slid .coverphoto {
+ top: 150% !important;
+ left: 0px;
+ right: 0px;
+ }
+}
+/* Narrow Screen Phones in Portrait Orientation
+ ============================================
+*/
+@media screen and (max-width: 400px) and (orientation: portrait) {
+ /* remove action button labels if screen is too narrow */
+ .wall-item-actions-row button::after {
+ content: '.';
+ color: transparent;
+ }
+ /* NOTE: cannot simply empty or display none or button alignment gets messed up! */
+ .wall-item-actions-row .button-browser-share::after {
+ display: none !important;
+ }
+ ul.nav-tabs {
+ display: block;
+ }
+ ul.nav-tabs li {
+ width: 98%;
+ text-align: center;
+ }
+ ul.nav-tabs li a {
+ border: 1px solid var(--link-color) !important;
+ border-radius: 8px !important;
+ }
+ ul.nav-tabs li:not(.active) a:hover,
+ ul.nav-tabs li:not(.active) a:focus {
+ background-color: rgba(0,0,0,.2);
+ }
+ ul.nav-tabs li.active {
+ border: none !important;
+ }
+ ul.nav-tabs li.active a {
+ background-color: var(--link-color) !important;
+ color: #fff !important;
+ }
+ .hovercard {
+ max-width: 100%;
+ }
+}
+/* Narrow Screen Phones in Landscape Orientation
+ ==============================================
+*/
+@media screen and (max-height: 400px) and (orientation: landscape) {
+ #topbar-first {
+ transition-duration: .5s;
+ transition-property: bottom;
+ bottom: -55px;
+ }
+ header #banner {
+ background-color: var(--nav-bg);
+ border-radius: 8px;
+ z-index: 1030;
+ }
+ #topbar-first .navbar-toggle[data-target="aside"] {
+ position: fixed !important;
+ left: 10px;
+ bottom: 10px;
+ transition-duration: .5s;
+ background-color: var(--link-color);
+ color: white;
+ height: 50px;
+ width: 50px;
+ border-radius: 100%;
+ line-height: 32px;
+ }
+ #topbar-first .navbar-toggle[data-target="#search-mobile"],
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed) {
+ position: fixed !important;
+ top: auto;
+ bottom: 10px;
+ right: 10px;
+ transition-duration: .5s;
+ background-color: var(--link-color) !important;
+ color: white;
+ height: 50px;
+ width: 50px;
+ border-radius: 100% !important;
+ line-height: 32px;
+ }
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]:hover,
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]:focus {
+ box-shadow: inset 0 0 100px rgba(0,0,0,.2);
+ }
+ .fa-fw {
+ width: auto;
+ }
+ #topbar-first .offcanvas-right-toggle {
+ top: -2px;
+ right: 10px;
+ padding: 0 !important;
+ }
+ #topbar-first .nav > .account {
+ top: 0px;
+ right: 5px;
+ }
+ #main-menu img {
+ border: 5px solid var(--link-color);
+ border-radius: 100%;
+ box-sizing: unset;
+ }
+ #search-mobile {
+ top: 40% !important;
+ border: 10px solid var(--link-color);
+ border-radius: 8px;
+ left: 50%;
+ width: 80%;
+ margin-left: -40%;
+ box-shadow: 0 0 50px rgba(0,0,0,.75);
+ }
+ #search-mobile .col-xs-12 {
+ background-color: var(--nav-bg);
+ }
+ #topbar-second {
+ transition-duration: .5s;
+ transition-property: top;
+ top: -60px;
+ }
+ #topbar-first .nav > li > a:hover,
+ #topbar-first .nav > li > a:focus,
+ #topbar-first .nav > li > button:not(#main-menu):hover,
+ #topbar-first .nav > li > button:not(#main-menu):focus,
+ #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):hover,
+ #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):focus,
+ nav.navbar .nav > li > a:hover,
+ nav.navbar .nav > li > a:focus,
+ nav.navbar .nav > li > button:hover,
+ nav.navbar .nav > li > button:focus {
+ background-color: var(--link-color) !important;
+ border-radius: 100% !important;
+ box-shadow: inset 0 0 100px rgba(0,0,0,.2);
+ }
+ #topbar-first button.navbar-toggle.offcanvas-right-toggle:hover,
+ #topbar-first button.navbar-toggle.offcanvas-right-toggle:focus {
+ border-radius: 100% !important;
+ }
+ #topbar-first .topbar-actions {
+ z-index: 1070;
+ }
+ /* if notifications is left open when phone is rotated */
+ #nav-notifications-menu {
+ top: 0;
+ bottom: 0;
+ z-index: 10000;
+ }
+ #offcanvasUsermenu {
+ top: 0px;
+ }
+ #offcanvasUsermenu li:first-of-type img {
+ display: none;
+ }
+ #offcanvasUsermenu li:first-of-type {
+ font-weight: 700;
+ }
+ .offcanvas-right-overlay {
+ top: 0px;
+ }
+ /* Profile Pages */
+ body.mod-contact #content,
+ body.mod-profile #content,
+ body.mod-photos #content {
+ margin-top: 200px !important;
+ }
+ body.mod-profile #sidebar-photos-albums::before {
+ top: 25px;
+ }
+ body.mod-contact aside,
+ body.mod-photos aside,
+ body.mod-profile aside {
+ padding-top: 50px;
+ padding-bottom: 50px;
+ }
+ body.mod-contact aside.canvas-slid,
+ body.mod-photos aside.canvas-slid,
+ body.mod-profile aside.canvas-slid {
+ left: 0px !important;
+ right: auto !important;
+ max-width: 300px !important;
+ background-color: transparent !important;
+ z-index: 20;
+ }
+ body.mod-contact aside.canvas-slid::before,
+ body.mod-photos aside.canvas-slid::before,
+ body.mod-profile aside.canvas-slid::before {
+ opacity: 1;
+ }
+ body.mod-contact aside #profile-photo-wrapper,
+ body.mod-photos aside #profile-photo-wrapper,
+ body.mod-profile aside #profile-photo-wrapper {
+ top: 10px;
+ }
+ body.mod-contact .profile-header h3.p-name,
+ body.mod-photos .profile-header h3.p-name,
+ body.mod-profile .profile-header h3.p-name {
+ top: 155px;
+ }
+ body.mod-contact .profile-header .p-addr,
+ body.mod-photos .profile-header .p-addr,
+ body.mod-profile .profile-header .p-addr {
+ top: 205px;
+ width: 50%;
+ margin-left: -25%;
+ }
+ .coverphoto.canvas-sliding,
+ .coverphoto.canvas-slid,
+ .coverphoto {
+ top: 0px;
+ }
+ }
+
+/* =====================================================================
+
+
+ USER PREFERS DARK MODE
+
+
+ =====================================================================
+*/
+@media (prefers-color-scheme: dark){
+ :root{
+ --nav-bg: #252728;
+ --link-color: $link_color;
+ --nav-icon-color: #B0B3B8;
+ --background-color: #1C1C1D;
+ --font-color: #cccccc;
+ --font-color-darker: #acacac;
+ --menu-background-hover-color: color-mix(in oklab, var(--link-color) 50%, black);
+ --border-color: #333333;
+ --count-color: #ffffff;
+ --count-bg: var(--link-color);
+ }
+body {
+ background-color: var(--background-color) !important;
+ font-size: 15px !important;
+ padding-top: 130px !important;
+ font-family: var(--global-font-family);
+ color: var(--font-color);
+}
+/* headers pretty much everywhere */
+section > .generic-page-wrapper,
+.videos-content-wrapper,
+.suggest-content-wrapper,
+.help-content-wrapper,
+.match-content-wrapper,
+.dirfind-content-wrapper,
+.delegation-content-wrapper,
+.notes-content-wrapper,
+.message-content-wrapper,
+.apps-content-wrapper, #adminpage,
+.delegate-content-wrapper,
+.uexport-content-wrapper,
+.dfrn_request-content-wrapper,
+.friendica-content-wrapper,
+.credits-content-wrapper,
+.nocircle-content-wrapper,
+.profperm-content-wrapper,
+.invite-content-wrapper,
+.tos-content-wrapper,
+.fsuggest-content-wrapper {
+ color: var(--nav-icon-color);
+}
+#topbar-first .nav > li > a,
+#topbar-first .nav > li > button,
+nav.navbar .nav > li > a,
+nav.navbar .nav > li > button{
+ color: var(--nav-icon-color) !important;
+ }
+#topbar-first, nav.navbar {
+ background-color: var(--nav-bg) !important;
+ color: var(--nav-icon-color) !important;
+ height: 55px;
+}
+ #topbar-first .topbar-nav .nav-segment {
+ margin-right: 10px;
+ }
+ #topbar-first .nav > li > a:hover:not(.selected) {
+ background-color: rgba(255,255,255,.1) !important;
+ border-radius: 8px !important;
+ }
+ .fa-lg {
+ font-size: 24px !important;
+ }
+#topbar-first .nav > li > a:hover,
+#topbar-first .nav > li > a:focus,
+#topbar-first .nav > li > button:not(#main-menu):hover,
+#topbar-first .nav > li > button:not(#main-menu):focus,
+#topbar-first button.navbar-toggle:hover,
+#topbar-first button.navbar-toggle:focus,
+nav.navbar .nav > li > a:hover,
+nav.navbar .nav > li > a:focus,
+nav.navbar .nav > li > button:hover,
+nav.navbar .nav > li > button:focus {
+ background-color: rgba(255,255,255,.1) !important;
+ border-radius: 8px !important;
+
+}
+ #topbar-first button.navbar-toggle,
+ #nav-notifications-menu-btn {
+ width: 50px;
+ height: 50px;
+ }
+ #topbar-first .nav > li > a.selected,
+ #nav-notification.dropdown.open {
+ border-bottom: 3px solid var(--link-color) !important;
+ color: var(--link-color) !important;
+ }
+#topbar-first .nav > li > a.selected:hover,
+#topbar-first .nav > li > a.selected:focus,
+#topbar-first .nav > li > #main-menu:hover,
+#topbar-first .nav > li > #main-menu:focus,
+#nav-notification.dropdown.open #nav-notifications-menu-btn:hover,
+#nav-notification.dropdown.open #nav-notifications-menu-btn:focus {
+ background-color: transparent !important;
+ border-radius: 0 !important;
+}
+ #nav-notification.dropdown.open #nav-notifications-menu-btn .fa-bell::before {
+ content: '\f0f3';
+ color: var(--link-color);
+ }
+ .notif-item img.notif-image,
+ .intro-photo-wrapper img.intro-photo {
+ border-radius: 100%;
+ }
+ul.nav-tabs {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ padding-bottom: 20px;
+ border-color:rgba(255,255,255,.2);
+}
+ul.tabs li {
+ font-size: 15px !important;
+ margin-left: 10px !important;
+}
+ ul.nav-tabs li a,
+ ul.tabs li a {
+ margin-top: 8px;
+ color: var(--link-color);
+ border: none;
+ }
+ ul.nav-tabs li:not(.active):hover,
+ ul.tabs li:not(.active):hover {
+ border-bottom-width: 0px !important;
+ }
+ ul.nav-tabs li:not(.active):hover > a,
+ ul.tabs li:not(.active):hover > a {
+ background-color: rgba(128,128,128,.1) !important;
+ background-image: none !important;
+ border-radius: 8px !important;
+ color: var(--font-color);
+ }
+ ul.nav-tabs li:not(.active) > a:hover,
+ ul.nav-tabs li:not(.active) > a:focus {
+ border: none;
+ }
+ ul.nav-tabs li.active {
+ border-bottom: 4px solid var(--link-color);
+ }
+ ul.nav-tabs > li.active > a,
+ ul.nav-tabs > li.active a:hover,
+ ul.nav-tabs > li.active a:focus {
+ border: none;
+ color: var(--link-color);
+ background-color: transparent;
+ }
+ .dropdown-menu {
+ padding-bottom: 15px !important;
+ background-color: var(--nav-bg) !important;
+ border: 1px solid var(--background-color) !important;
+ }
+ .dropdown-menu li {
+ margin: 3px 10px;
+ width: 92% !important;
+ border-radius: 8px;
+ }
+ .dropdown-menu li:hover {
+ border-color: transparent !important;
+ }
+ .dropdown-menu > li > a:hover,
+ .dropdown-menu > li > a:focus {
+ background-image: none !important;
+ border-radius: 8px ;
+ }
+ .dropdown-menu li a,
+ .dropdown-menu li .btn-link {
+ color: var(--font-color);
+ }
+ .dropdown-menu > li > 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 {
+ border-radius: 0;
+ background-color: transparent;
+ border-bottom: 4px solid var(--link-color) !important;
+ }
+ .dropdown-menu > li.active > a,
+ .dropdown-menu > li.active:hover > a,
+ .dropdown-menu > li.active:focus > a {
+ color: var(--link-color);
+ background-color: transparent;
+ background-image: none;
+ }
+ .form-control {
+ background: var(--nav-bg);
+ color: #fff;
+ }
+ .form-control[readonly],
+ .form-control[disabled],
+ .fieldset[disabled] .form-control {
+ background-color: #666;
+ color: #fff;
+ opacity: .5;
+ }
+ .table-striped > tbody > tr:nth-of-type(2n+1) {
+ background-color: var(--nav-bg);
+ }
+header #banner {
+ left: 0 !important;
+ right: auto !important;
+ margin-top: 10px;
+}
+ .navbar-brand #logo-img {
+ margin-top: 20px;
+ }
+ .navbar-brand #logo-img,
+ header #banner #logo-img {
+ /* SVG Mask is broken in WebKit use Icon Font instead */
+ -webkit-mask-image: unset !important;
+ mask: none !important;
+ mask-size: unset !important;
+ mask-composite: unset !important;
+ mask-mode: unset !important;
+ background-color: transparent !important;
+ height: 40px;
+ width: 40px;
+ }
+ .navbar-brand #logo-img::before,
+ header #banner #logo-img::before {
+ content: '\f2e6';
+ font-family: ForkAwesome;
+ font-size: 45px;
+ position: relative;
+ top: -12px;
+ left: 0px;
+ text-shadow: none;
+ color: var(--link-color);
+ }
+
+ #navbar-brand-text {
+ line-height: 40px;
+ font-weight: 700;
+ color: var(--link-color) !important;
+ }
+ #nav-login::before{
+ content: var(--sign-in-text);
+ }
+.topbar ul.nav {
+ left: 50% !important;
+ margin-left: -25% !important;
+ position: relative;
+}
+#topbar-first .nav > .account img {
+ border-radius: 100% !important;
+ box-shadow: 0 0 1px rgba(255,255,255,.1) !important;
+ height: 40px !important;
+ width: 40px !important;
+}
+#search-box {
+ position: fixed !important;
+ left: 100px;
+}
+#topbar-first #search-box .form-search {
+ height: 40px !important;
+ font-size: 15px;
+ background-position: unset;
+ box-shadow: none !important;
+}
+#search-box form > div {
+ background-color: var(--background-color);
+ border-radius: 50px;
+}
+#search-box form > div::before {
+ content: '\f002';
+ font-family: ForkAwesome;
+ position: absolute;
+ left: 10px;
+ top: 8px;
+}
+#search-box .form-control.form-search {
+ border-radius: 50px !important;
+ background: transparent !important;
+ width: 100% !important;
+}
+#search-box .form-control::placeholder {
+ color: var(--nav-icon-color) !important;
+}
+#topbar-first #search-box .btn {
+ font-size: 0px !important;
+ height: 32px;
+ width: 32px;
+ top: 2px !important;
+ background-color: black !important;
+ margin-top: 2px !important;
+}
+#topbar-first #search-box .btn::before {
+ content: '\f061';
+ font-family: ForkAwesome;
+ font-size: 15px;
+ color: var(--nav-icon-color);
+}
+#nav-user-menu, #nav-notifications-menu {
+ background-color: var(--nav-bg) !important;
+ border: 1px solid var(--background-color) !important;
+}
+#nav-user-menu {
+ min-width: 250px !important;
+ overflow-x: hidden;
+}
+.nav-pills .dropdown-menu li a,
+.nav-pills .dropdown-menu li .btn-link,
+.nav-tabs .dropdown-menu li a,
+.nav-tabs .dropdown-menu li .btn-link,
+.account .dropdown-menu li a,
+.account .dropdown-menu li .btn-link,
+.contact-photo-wrapper .dropdown-menu li a,
+.contact-photo-wrapper .dropdown-menu li .btn-link {
+ color: var(--nav-icon-color) !important;
+ border-color: var(--nav-bg) !important;
+}
+ .nav-pills .dropdown-menu li > a:hover,
+ .nav-tabs .dropdown-menu li > a:hover,
+ .account .dropdown-menu li > a:hover,
+ .contact-photo-wrapper .dropdown-menu li > a:hover,
+ .nav-pills .dropdown-menu li.selected a,
+ .nav-tabs .dropdown-menu li.selected a,
+ .account .dropdown-menu li.selected a,
+ .contact-photo-wrapper .dropdown-menu li.selected a {
+ color: #333 !important;
+ background: #f2f2f2 !important;
+ border-radius: 8px;
+ }
+.nav-pills .dropdown-menu li.divider,
+.nav-tabs .dropdown-menu li.divider,
+.account .dropdown-menu li.divider,
+.contact-photo-wrapper .dropdown-menu li.divider {
+ background-color: var(--nav-bg) !important;
+}
+#content .nav > li > .btn-link {
+ margin: 5px;
+}
+#content .nav > li > .btn-link:hover,
+#content .nav > li > .btn-link:focus {
+ background-color: var(--link-color);
+ color: white !important;
+}
+#topbar-first #nav-notifications-menu {
+ border: 1px solid var(--background-color) !important;
+}
+#topbar-first #nav-notifications-menu li {
+ border-color: transparent !important;
+ box-sizing: border-box;
+ margin: 10px;
+ border-radius: 10px !important;
+ width: 94% !important;
+}
+#topbar-first #nav-notifications-menu a {
+ color: var(--font-color);
+}
+#topbar-first .notification-unseen {
+ background-color: rgba(255,255,255,.2) !important
+}
+#topbar-first #nav-notifications-menu li.notif-entry:hover{
+ background-color:rgba(128,128,128,.2) !important;
+ border-color: transparent !important;
+}
+#topbar-first .nav > .open > a,
+#topbar-first .nav > .open > button {
+ background-color: transparent;
+}
+ .topbar .dropdown-header {
+ color: var(--nav-icon-color);
+ }
+ #topbar-first .topbar-nav .arrow {
+ display: none !important;
+ }
+ .topbar .dropdown-header .dropdown-header-link .btn-link {
+ border: 1px solid var(--link-color);
+ border-radius: 8px;
+ padding: 5px;
+ margin-top: -6px;
+ }
+ .topbar .dropdown-header .dropdown-header-link .btn-link:hover,
+ .topbar .dropdown-header .dropdown-header-link .btn-link:focus {
+ background-color: rgba(0,0,0,.1);
+ }
+#topbar-second {
+ top: 55px;
+ height: 60px !important;
+ background-color: var(--nav-bg) !important;
+ border-color: #333 !important;
+}
+ .btn.btn-primary:hover,
+ .btn.btn-primary:focus {
+ border-radius: 8px !important;
+ }
+ #dropdownMenuTools {
+ height: 40px;
+ width: 40px;
+ background-color: rgba(255,255,255,.1) !important;
+ border-radius: 100% !important;
+ margin-top: 5px !important;
+ margin-right: 10px !important;
+ }
+ #dropdownMenuTools:hover,
+ #dropdownMenuTools:focus {
+ background-color: rgba(0,0,0,.1) !important;
+ }
+ #jotOpen {
+ border-radius: 8px !important;
+ background-color: var(--link-color) !important;
+ color: #ffffff !important;
+ border-color: #000 !important;
+ box-shadow: none !important;
+ }
+ #jotOpen:hover, #jotOpen:focus {
+ box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
+ }
+ #jotOpen::before {
+ content: var(--compose-text);
+ font-size: 15px;
+ margin-right: 10px;
+ line-height: 32px;
+ position: relative;
+ display: inline;
+ top: -4px;
+ }
+ body.mod-notes #jotOpen::before {
+ content: var(--new-note-text);
+ }
+ body.mod-notes .sectiontop h3::before {
+ content: '\f023';
+ font-family: ForkAwesome;
+ margin-right: 5px;
+ }
+ #jotOpen .fa-pencil-square-o {
+ font-size: 32px !important;
+ position: relative;
+ top: 4px;
+ }
+ #topbar-second #nav-short-info {
+ margin-top: 10px;
+ }
+ /* General Content Wrappers */
+ section > .generic-page-wrapper,
+ .videos-content-wrapper,
+ .suggest-content-wrapper,
+ .help-content-wrapper,
+ .match-content-wrapper,
+ .dirfind-content-wrapper,
+ .delegation-content-wrapper,
+ .notes-content-wrapper,
+ .message-content-wrapper,
+ .apps-content-wrapper, #adminpage,
+ .delegate-content-wrapper,
+ .uexport-content-wrapper,
+ .dfrn_request-content-wrapper,
+ .friendica-content-wrapper,
+ .credits-content-wrapper,
+ .nocircle-content-wrapper,
+ .profperm-content-wrapper,
+ .invite-content-wrapper,
+ .tos-content-wrapper,
+ .fsuggest-content-wrapper,
+ .shared-wrapper {
+ background-color: var(--content-bg) !important;
+ background-image: none;
+ border-color: #333;
+ }
+ /* Make Submit Buttons Pretty */
+ #adminpage a.btn,
+ .settings-submit,
+ button[type="submit"],
+ input[type="submit"],
+ #photos-upload-submit {
+ background-color: var(--link-color) !important;
+ color: white !important;
+ border-radius: 8px !important;
+ border: none !important;
+ box-shadow: none !important;
+ }
+ .settings-submit.form-button-search,
+ button[type="submit"].form-button-search {
+ border-radius:50px !important;
+ margin-top:-.5px !important;
+ }
+ #adminpage a.btn:hover,
+ #adminpage a.btn:focus,
+ .settings-submit:hover,
+ .settings-submit:focus,
+ button[type="submit"]:hover,
+ button[type="submit"]:focus,
+ input[type="submit"]:hover,
+ input[type="submit"]:focus,
+ #photos-upload-submit:hover,
+ #photos-upload-submit:focus{
+ box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
+ }
+ #delegate-parent .submit button {
+ float: right;
+ padding: 8px;
+ appearance: none;
+ border: none;
+ }
+ #delegate-parent .submit::after {
+ content: '';
+ display: block;
+ clear: both;
+ }
+ /* make position of submit buttons in settings consistent */
+ .panel-footer {
+ background-color: var(--nav-bg) !important;
+ }
+ .panel-footer button[type="submit"],
+ .panel-footer input[type="submit"] {
+ float: right !important;
+ margin-left: 5px;
+ }
+ .panel-footer::after{
+ content: '';
+ display: block;
+ clear: both;
+ }
+ #addonslist {
+ margin-top: 20px;
+ }
+ #settings-server button[type="submit"] {
+ float: right !important;
+ margin-left: 5px !important;
+ margin-bottom: 20px !important;
+ }
+ #settings-channels .panel {
+ padding: 0 10px 10px 10px;
+ }
+ #settings-channels button {
+ float: right;
+ }
+ #adminpage button[type="submit"],
+ input[type="submit"],
+ input[name="page_logs"],
+ input[name="republish_directory"],
+ input[name="page_tos"]{
+ float: right;
+ padding: 8px;
+ border: none;
+ }
+ .submit::after{
+ content: '';
+ display: block;
+ clear: both;
+ }
+ #photo-edit-end {
+ clear: both;
+ }
+ /* 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;
+ }
+/* Other people profiles */
+#mention-link {
+ border-radius: 8px !important;
+ background-color: var(--link-color) !important;
+ color: #ffffff !important;
+ border-color: #000 !important;
+ box-shadow: none !important;
+ padding: 0 16px !important;
+}
+ #mention-link:hover,
+ #mention-link:focus {
+ box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
+ }
+ #mention-link span:first-of-type {
+ float: right;
+ font-size: 32px;
+ line-height: 45px;
+ top: 4px;
+ }
+ #mention-link span:first-of-type .fa-2x {
+ font-size: inherit !important;
+ }
+ #mention-link span:last-of-type {
+ font-size: 15px;
+ margin-right: 10px;
+ line-height: 32px;
+ top: 6px;
+ position:relative;
+ 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;
+}
+#profile-extra-links .btn {
+ border-radius: 8px !important;
+ margin-bottom: 10px !important;
+}
+ /* SEARCH RESULTS */
+ #search-save {
+ background-color: var(--link-color) !important;
+ color: white !important;
+ border-radius: 8px !important;
+ padding: 6px 8px !important;
+ }
+ #search-save:hover,
+ #search-save:focus {
+ box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
+ }
+ #search-save .fa-plus::before{
+ content: '\f292' !important;
+ }
+ #search-save .fa-floppy-o::before {
+ content: '\f00e' !important;
+ }
+ #search-save .fa-floppy-o::before,
+ #search-save .fa-plus::before {
+ display: inline-block;
+ margin-top: 2px;
+ }
+ #search-save .fa-floppy-o::after,
+ #search-save .fa-plus::after{
+ content: var(--save-search-text);
+ font-family: 'Open Sans', Arial, sans-serif;
+ font-size: 15px;
+ float: left;
+ margin-right: 10px;
+ line-height: 32px;
+ position: relative;
+ display: block;
+ top: -2px;
+ font-weight: 700;
+ }
+ #search-save .fa-floppy-o::after {
+ content: var(--save-search-text);
+ }
+ #search-save .fa-plus::before {
+ display: inline-block;
+ margin-top: 2px;
+ }
+ #search-save .fa-plus::after {
+ content: var(--follow-tag-text);
+ }
+ /* popovers */
+ .popover.hovercard {
+ border: 1px solid var(--nav-bg) !important;
+ -webkit-box-shadow: 0 10px 100px rgba(255, 255, 255, 0.25);
+ -moz-box-shadow: 0 10px 100px rgba(255, 255, 255, 0.25);
+ box-shadow: 0 10px 100px rgba(255, 255, 255, 0.25);
+ }
+ .hover-card-footer {
+ border-color: #333;
+ background-color: var(--nav-bg);
+ }
+ .hovercard.top > .arrow::after {
+ border-top-color: var(--nav-bg);
+ }
+ .hovercard.right > .arrow::after {
+ border-right-color: var(--nav-bg);
+ }
+ .hovercard.bottom > .arrow::after {
+ border-bottom-color: var(--nav-bg);
+ }
+ .hovercard.left > .arrow::after {
+ border-left-color: var(--nav-bg);
+ }
+/* sidebar widgets */
+aside .widget,
+.nav-container .widget {
+ background-color: var(--background-color) !important;
+ -webkit-box-shadow: none !important;
+ -moz-box-shadow: none !important;
+ box-shadow: none !important;
+}
+ aside .badge {
+ background-color: var(--link-color);
+ }
+/* POSTS */
+.tread-wrapper {
+ background-color: var(--content-bg) !important;
+ box-shadow: 0 0px 1px rgba(0,0,0,.5) !important;
+ border-radius: 10px !important;
+}
+.wall-item-container {
+ border-top: none;
+}
+.wall-item-container .media {
+ background-color: var(--content-bg) !important;
+ border-radius: 10px !important;
+}
+ .wall-item-container iframe {
+ width: 100% !important;
+ height: auto !important;
+ display: block;
+ margin: 0 auto;
+ aspect-ratio: 16/9;
+ border: 1px solid #333;
+ border-radius: 8px;
+ background-color: #000;
+ }
+.well {
+ -webkit-box-shadow: none !important;
+ box-shadow: none !important;
+}
+ .contact-photo,
+ .contact-photo-xs {
+ border-radius: 100% !important;
+ border: 1px solid var(--nav-bg) !important;
+ }
+.desktop-view .wall-item-container .wall-item-content a,
+.desktop-view .wall-item-name,
+.desktop-view .wall-item-container .fakelink,
+.desktop-view .toplevel_item .fakelink,
+.desktop-view .toplevel_item .wall-item-container .wall-item-responses a,
+.text-muted,
+p.wall-item-announce,
+.media .time,
+.media .shared-time,
+.media .delivery,
+.media .location,
+.media .location a,
+.event-card .event-card-content,
+.contact-entry-desc {
+ color: var(--font-color);
+}
+.vevent {
+ box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.1) inset, 0 1px 1px rgba(255, 255, 255, 0.05);
+}
+.event-card .event-card-title {
+ color: var(--font-color-lighter);
+}
+.event-card .event-card-content {
+ box-shadow: 1.5px 0 0 0 rgba(255, 255, 255, 0.1) inset;
+}
+.event-card .description {
+ box-shadow: 0 1.5px 0 0 rgba(255, 255, 255, 0.1) inset;
+}
+.contact-wrapper .contact-action-link,
+.contact-wrapper .contact-action-link:hover,
+.textcomplete-item .contact-wrapper .contact-action-link {
+ color: var(--nav-icon-color);
+}
+.media-list > li {
+ border-color: var(--nav-bg);
+}
+.media-list > li:hover,
+.media-list > li.selected,
+.media-list > li.active {
+ background-color: var(--background-color);
+}
+.hovercard {
+ background-color: var(--nav-bg) !important;
+ border: 1px solid var(--background-color) !important;
+}
+ .hover-card-pic img.thumbnail {
+ border-radius: 100% !important;
+ background-color: var(--background-color) !important;
+ border-color: black !important;
+ }
+ p.wall-item-announce,
+ .media .time, .media .shared-time,
+ .media .delivery, .media .location,
+ .media .location a {
+ font-size: 13px !important;
+ }
+ .type-link, .type-video {
+ padding: 0 !important;
+ margin: 0 !important;
+ background-color: rgb(51, 51, 52) !important;
+ border: 1px solid rgb(101, 104, 108) !important;
+ }
+ .type-link h4, .type-link blockquote, .type-link sup,
+ .type-video h4, .type-video blockquote, .type-video sup {
+ padding-left: 10px !important;
+ padding-right: 10px !important;
+ }
+ .media hr:first-of-type, aside hr, section hr {
+ border-color: var(--nav-bg);
+ }
+ /* keep mentions and tags from spilling out */
+ #profile-page .label,
+ #profile-page .label a,
+ .wall-item-bottom .label,
+ .wall-item-bottom .label a {
+ display: inline-block !important;
+ }
+ /* ACTION BUTTON LABELS */
+ .wall-item-actions-row button:not(.button-browser-share),
+ .wall-item-actions-right button {
+ position: relative;
+ display: block;
+ white-space: normal !important;
+ margin: 0 auto !important;
+ -webkit-box-shadow: none !important;
+ box-shadow: none !important;
+ }
+ .wall-item-actions-row button::after,
+ .wall-item-actions-right button::after {
+ font-size: 14px;
+ font-family: sans-serif;
+ display: block;
+ margin-top: 2px;
+ }
+ .wall-item-response {
+ position: relative;
+ padding-top: 4px;
+ display: block;
+ }
+ .button-comments::after {
+ content: var(--comment-button-text);
+ }
+ .button-announces::after {
+ content: var(--share-button-text);
+ }
+ .share-links .dropdown-toggle::after {
+ content: var(--share-button-text);
+ }
+ .button-votes::after {
+ content: var(--quote-button-text);
+ }
+ .button-likes::after {
+ content: var(--like-button-text);
+ }
+ [id^="dislike-"]::after{
+ content: var(--dislike-button-text);
+ }
+ .wall-item-actions-right .dropdown-toggle::after,
+ .more-links .dropdown-toggle::after {
+ content: var(--more-button-text);
+ }
+ .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 {
+ position: absolute;
+ text-align: center;
+ display: block;
+ background-color: var(--count-bg);
+ box-shadow: -1px 1px 1px #000;
+ border-radius: 4px;
+ color: var(--count-color);
+ font-size: 12px;
+ font-weight: 700;
+ width: fit-content;
+ padding: 0px 7px;
+ left: 55%;
+ top: 0px;
+ z-index: 1;
+ }
+/* .vote-event:not(:has(.wall-item-response:empty)) { */
+ .vote-event:has(button) {
+ padding-bottom: 135px;
+ }
+ .vote-event:has(button) .wall-item-response {
+ position: absolute;
+ top: 63px;
+ }
+ .vote-event .wall-item-response:empty{
+ display: none;
+ }
+ .vote-event:has(button) .wall-item-response:nth-of-type(1){
+ left: 15px;
+ }
+ .vote-event .wall-item-response:nth-of-type(1) .button-event::after,
+ .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,
+ .wall-item-actions-row [id^="attendno"]::after{
+ content: var(--attendno-button-text);
+ position: relative;
+ height: 20px;
+ overflow: hidden; /* or skews mobile button layout */
+ }
+ .vote-event:has(button) .wall-item-response:nth-of-type(3){
+ left: 204px;
+ }
+ .vote-event .wall-item-response:nth-of-type(3) .button-event::after,
+ .wall-item-actions-row [id^="attendmaybe"]::after{
+ content: var(--attendmaybe-button-text);
+ }
+ /* prevent "Like Like" and "Dislike Dislike" on photos */
+ #photo-view-wrapper .wall-item-actions .button-likes {
+ font-color: transparent !important;
+ font-size: 0px !important;
+ }
+ #photo-view-wrapper .wall-item-actions .button-likes::after {
+ font-size: 18px !important;
+ color: var(--nav-icon-color) !important;
+ }
+ #photo-view-wrapper .wall-item-actions .button-likes .fa-thumbs-up,
+ #photo-view-wrapper .wall-item-actions .button-likes .fa-thumbs-down {
+ font-size: 24px !important;
+ color: var(--nav-icon-color) !important;
+ }
+ #photo-view-wrapper .wall-item-actions .button-likes:hover::after,
+ #photo-view-wrapper .wall-item-actions .button-likes:focus::after,
+ #photo-view-wrapper .wall-item-actions .button-likes:hover .fa-thumbs-up,
+ #photo-view-wrapper .wall-item-actions .button-likes:focus .fa-thumbs-up,
+ #photo-view-wrapper .wall-item-actions .button-likes:hover .fa-thumbs-down,
+ #photo-view-wrapper .wall-item-actions .button-likes:focus .fa-thumbs-down {
+ color: var(--link-color) !important;
+ }
+ /* END OF ACTION BUTTON LABELS */
+/* Compose and Reply */
+ #jot-modal .modal-header .compose-link {
+ border-radius: 100% !important;
+ height: 36px;
+ width: 36px;
+ font-size: 27px !important;
+ padding: 0 6px !important;
+ background-color: rgba(255,255,255,.2);
+ }
+ #jot-modal .modal-header .compose-link:hover,
+ #jot-modal .modal-header .compose-link:focus {
+ background-color: rgba(255,255,255,.1);
+ }
+ .close {
+ height: 36px;
+ width: 36px;
+ background-color: var(--link-color) !important;
+ opacity: 1 !important;
+ color: #fff !important;
+ border-radius: 100%;
+ margin-top: 5px;
+ margin-top: 2px !important;
+ }
+ .close:hover,
+ .close:focus {
+ box-shadow: inset rgba(255,255,255,.2) !important;
+ }
+ #profile-photo-upload-close {
+ text-align: center;
+ padding-top: 10px;
+ }
+.modal-content,
+#jot-modal-content,
+.wall-item-comment-wrapper {
+ background-color: rgb(37,39,40) !important;
+ border-radius: 15px !important;
+ background-image: none;
+}
+ .wall-item-comment-wrapper {
+ border: none;
+ box-shadow: none;
+ }
+ .photo-comment-wrapper .btn-sm,
+ #profile-jot-wrapper .btn-sm,
+ .wall-item-comment-wrapper .btn-sm {
+ background-color: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: var(--nav-icon-color);
+ height: 45px;
+ width: 45px;
+ font-size: 18px;
+ }
+ .photo-comment-wrapper .btn-sm:hover,
+ .photo-comment-wrapper .btn-sm:focus,
+ #profile-jot-wrapper .btn-sm:hover,
+ #profile-jot-wrapper .btn-sm:focus,
+ .wall-item-comment-wrapper .btn-sm:hover,
+ .wall-item-comment-wrapper .btn-sm:focus {
+ background-color: transparent;
+ color: var(--link-color);
+ }
+#jot-modal-content input,
+#jot-modal-content .friendica-tagsinput {
+ background-color: var(--background-color) !important;
+}
+#filebrowser .breadcrumb {
+ background-color: var(--background-color);
+}
+.fbrowser .folders button {
+ background-color: rgba(255,255,255,.5) !important;
+ color: black !important;
+ appearance: none;
+ border: none;
+ border-radius: 8px;
+ width: 100%;
+ margin-bottom: 5px;
+}
+ .fbrowser .folders button:hover,
+ .fbrowser .folders button:focus {
+ background-color: rgba(255,255,255,.75) !important;
+ }
+ .fbrowser .folders li:hover,
+ .fbrowser .folders li:focus {
+ border-color: transparent !important;
+ background-color: transparent !important;
+ }
+ .fbrowser-content-container.justified-gallery {
+ max-height: 100% !important;
+ }
+#jot-modal .modal-header a,
+#jot-modal .modal-header .btn-link,
+#profile-jot-submit-wrapper a,
+#profile-jot-submit-wrapper .btn-link {
+ color: var(--nav-icon-color);
+}
+#jot-title,
+#jot-category {
+ background-color: rgb(51,51,52) !important;
+}
+ #profile-jot-text, #profile-jot-wrapper textarea,
+ #jot-location,
+ .wall-item-comment-wrapper textarea {
+ background-color: rgb(51, 51, 52) !important;
+ }
+#jot-text-wrap, #profile-jot-wrapper .dropzone.dz-clickable,
+.wall-item-comment-wrapper .dropzone.dz-clickable {
+ background-color: var(--background-color) !important;
+}
+.jothidden.nav.nav-pills .btn-link {
+ font-size: 18px;
+}
+ .jothidden.nav.nav-pills .btn-link:hover,
+ .jothidden.nav.nav-pills .btn-link:focus {
+ color: var(--link-color) !important;
+ }
+.jot-nav {
+ border: none !important;
+}
+.jot-nav a {
+ border: none !important;
+ border-radius: 8px !important;
+ margin-right: 5px;
+}
+.jot-nav a:hover, .jot-nav a:focus {
+ background-color: rgba(255,255,255,.2) !important;
+}
+.jot-nav .active a {
+ background-color: transparent !important;
+ border-radius: 0 !important;
+}
+.jot-nav .active a:hover, .jot-nav .active a:focus {
+ background-color: transparent !important;
+}
+[id^="comment-edit-preview"],
+.comment-edit-preview {
+ border-radius: 8px !important;
+ box-shadow: none !important;
+ background-color: rgba(255,255,255,.1);
+}
+[id^="comment-edit-preview"]:hover,
+[id^="comment-edit-preview"]:focus,
+.comment-edit-preview:hover,
+.comment-edit-preview:focus {
+ background-color: rgba(255,255,255,.2) !important;
+}
+#profile-jot-wrapper .wall-item-container.panel-body.preview {
+ border: none !important;
+ margin-top:20px !important;
+ border-radius: none !important;
+ background-color: transparent;
+}
+ /* file browser */
+ #upload-photo {
+ background-color: var(--link-color) !important;
+ color: white !important;
+ border-radius: 8px !important;
+ }
+ #upload-photo:hover,
+ #upload-photo:focus {
+ background-color: darkblue !important;
+ }
+ body.mod-setting .panel-body {
+ background-color: var(--nav-bg);
+ border-radius: 10px;
+ border-top: none !important;
+ }
+ .help-block {
+ color: var(--font-color-darker);
+ }
+ /* HIDE ATTACHMENT BUTTON */
+ .fbswitcher [data-mode="attachment"] {
+ display: var(--attach-file-button) !important;
+ }
+ body.mod-settings .panel-body {
+ background-color: var(--nav-bg);
+ border-radius: 10px;
+ }
+ .help-block {
+ color: var(--font-color-darker);
+ }
+/* PROFILE */
+#profile-photo-wrapper {
+ overflow: visible !important;
+ padding: 5px;
+ background-color: var(--background-color);
+ border-radius: 100%
+}
+aside .widget, .nav-container .widget {
+ color: var(--font-color);
+}
+aside .widget li {
+ margin-bottom: 8px;
+}
+ aside .widget li a {
+ color: var(--font-color);
+ }
+ aside .widget li a:hover,
+ aside .widget li a:focus {
+ color: var(--font-color);
+ }
+aside .vcard img.u-photo, aside img.vcard-photo {
+ border-radius: 100% !important;
+ box-shadow: 0 0 1px rgba(0,0,0,.3);
+ border: 3px solid var(--background-color);
+}
+aside .widget h3.p-name {
+ font-size: 32px !important;
+ text-align: center;
+ word-break: break-word;
+ text-shadow: 1px 1px 2px var(--background-color), -1px -1px 2px var(--background-color), 1px -1px 2px var(--background-color), -1px 1px 2px var(--background-color);
+ }
+aside .vcard .p-addr {
+ font-weight: 600;
+ text-align: center;
+ white-space: break-spaces !important;
+ background-color: var(--background-color);
+ border-radius: 8px;
+}
+ aside .vcard .title,
+ aside .vcard .location,
+ aside .vcard .key,
+ aside .vcard .about,
+ aside .vcard .xmpp,
+ aside .vcard .matrix,
+ aside .vcard .homepage,
+ aside .vcard .account-type {
+ background-color: var(--background-color);
+ padding: 5px;
+ border-radius: 8px;
+ min-width: 100%;
+ margin: 10px 0;
+ }
+aside .widget li.selected {
+ background-color: rgba(128,128,128,.1) !important;
+ background-image: linear-gradient(var(--menu-background-hover-color),var(--menu-background-hover-color)) !important;
+ border-color: transparent !important;
+ border-radius: 8px;
+}
+aside .widget li.selected a {
+ font-weight: bold;
+}
+ aside .widget li.selected a:hover {
+ color: #eeeeee;
+ }
+aside .widget li:hover {
+ background-color:rgba(128,128,128,.2) !important;
+ border-color: transparent !important;
+ border-radius: 8px;
+}
+#widget-contacts {
+ background-color: rgb(37, 39, 40) !important;
+ border-radius: 8px !important;
+ box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2) !important;
+}
+ .contact-block-img {
+ height: 100px !important;
+ width: 100px !important;
+ border-radius: 8px !important;
+ box-shadow: 0 0 1px rgba(0, 0, 0, .2);
+ margin: 5px;
+ }
+.comment-fake-form {
+ border: none !important;
+ background-color: transparent !important;
+}
+.comment-fake-form textarea {
+ border-radius: 50px !important;
+ background-color: var(--comment-bg) !important;
+ -webkit-box-shadow: none !important;
+ box-shadow: none !important;
+}
+.wall-item-actions button {
+ font-size: 24px !important;
+ color: var(--nav-icon-color) !important;
+}
+ .wall-item-actions button:hover {
+ filter: brightness(1.25);
+ }
+ .wall-item-actions button.active {
+ color: var(--link-color) !important;
+ }
+ .wall-item-actions .checkbox {
+ padding-top: 6px !important;
+ }
+ /* WALL ITEM RESPONSES */
+ .wall-item-responses > div {
+ position: relative;
+ }
+ .wall-item-responses > div > p:first-of-type::before,
+ .hide-comments::before, .hide-comments-total::before {
+ display: inline-block;
+ margin-right: 3px;
+ font-family: ForkAwesome;
+ font-weight: lighter;
+ font-size: 12px;
+ text-align: center;
+ color: white;
+ width: 20px;
+ height:20px;
+ padding: 2px;
+ line-height: 16px;
+ border-radius: 100%;
+ }
+ .wall-item-responses .wall-item-like > p:first-of-type::before {
+ content: '\f164';
+ background-color: #0066FF;
+ }
+ .wall-item-responses .wall-item-dislike > p:first-of-type::before {
+ content: '\f165';
+ background-color: red;
+ }
+ .wall-item-responses .wall-item-announce > p:first-of-type::before{
+ content: '\f079';
+ background-color: #00c100;
+ }
+ .wall-item-responses .wall-item-attendyes > p:first-of-type::before{
+ content: '\f00c';
+ background-color: #00c100;
+ }
+ .wall-item-responses .wall-item-attendno > p:first-of-type::before{
+ content: '\f00d';
+ background-color: red;
+ }
+ .wall-item-responses .wall-item-attendmaybe > p:first-of-type::before{
+ content: '\f128';
+ background-color: orange;
+ }
+ .wall-item-responses div p[class*="-expanded"] {
+ background-color: rgba(0,0,0,.8);
+ position: absolute;
+ bottom: 100%;
+ padding: 10px;
+ margin-left: 23px;
+ border-radius: 8px;
+ width: 200px;
+ max-height: 415px;
+ font-size: 0px;
+ color: transparent;
+ overflow: hidden;
+ box-shadow: 0px 5px 5px rgba(0,0,0,.3);
+ z-index: 10;
+ }
+ .wall-item-responses div p[class*="-expanded"]:hover,
+ .wall-item-responses div p[class*="-expanded"]:focus {
+ overflow-y: auto;
+ }
+ .wall-item-responses div p[class*="-expanded"] a {
+ color: white !important;
+ display: block;
+ max-width: 100%;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ font-size: 14px;
+ overflow: hidden;
+ }
+ .wall-item-responses div p[class*="-expanded"] a:nth-of-type(74){
+ overflow: visible;
+ }
+ .wall-item-responses div p[class*="-expanded"] a:nth-of-type(74)::after {
+ content: 'and others...';
+ display: block;
+ }
+ .hide-comments::before, .hide-comments-total::before {
+ content: '\f27a';
+ background-color: #0066FF;
+ }
+ .comment .media-body {
+ padding: 10px;
+ background-color: var(--comment-bg);
+ border-radius: 20px;
+ }
+ .wall-item-actions-row .wall-item-emoji {
+ font-size: 18px;
+ line-height: 40px;
+ }
+ .navicon {
+ font-size: 20px;
+ position: relative;
+ top: 1px;
+ }
+ .wall-item-actions ul button,
+ .wall-item-actions ul a {
+ font-size: 14px !important;
+ color: inherit !important;
+ line-height: 14px !important;
+ margin: 0 !important;
+ }
+ /* little vcard when you scroll down on profiles */
+ #vcard-short-desc * {
+ color: var(--font-color) !important;
+ }
+ #vcard-short-photo-wrapper img,
+ #nav-short-info .contact-wrapper img {
+ border-radius: 100% !important;
+ }
+ /* Profile Cover Photo */
+ .row:has(.coverphoto) aside,
+ .row:has(.coverphoto) #content {
+ margin-top: 350px;
+ }
+ .row:has(.coverphoto) aside .widget.vcard,
+ .row:has(.coverphoto) aside .panel-body {
+ background-color: transparent !important;
+ }
+ .coverphoto {
+ position: fixed;
+ top: 115px;
+ left: 0 !important;
+ right: 0 !important;
+ z-index: -1;
+ height: 500px;
+ overflow: hidden;
+ }
+ .coverphoto img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+ }
+ .coverphoto:has(> :last-child:nth-child(2)) img {
+ height: 50%;
+ }
+ .coverphoto:has(> :last-child:nth-child(3)) img {
+ height: 33.3333%;
+ }
+ .coverphoto:has(> :last-child:nth-child(n+4)) img {
+ height: 25%;
+ }
+ /* 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
+ -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+ box-shadow: 0 0 1px rgba(255,255,255,.5);
+ */
+ border-radius: 100%;
+ position: relative;
+ padding: 6px 4px;
+ height: 35px;
+ width: 35px;
+ display: block;
+ }
+ .plink.u-url:hover {
+ background-color: rgba(255,255,255,.1) !important;
+ text-decoration: none !important;
+ }
+ .plink.u-url::after {
+ content: '\f101';
+ font-family: ForkAwesome;
+ color: #666;
+ }
+ .img-allocated-max-width {
+ margin: 20px auto;
+ }
+ #vcard-short-photo-wrapper img,
+ #nav-short-info .contact-wrapper img {
+ border-radius: 100%;
+ }
+/* Calendar */
+.fc-unthemed td.fc-today {
+ background-color: rgba(128,128,128,.1);
+ background-image: linear-gradient(var(--menu-background-hover-color),var(--menu-background-hover-color));
+}
+.event-buttons .btn {
+ background-color: var(--link-color);
+ color: #fff;
+ border-radius: 100%;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ font-size: 18px;
+ padding: 0;
+ margin-right: 5px;
+}
+ .event-buttons .btn:hover,
+ .event-buttons .btn:focus {
+ color: #fff;
+ box-shadow: inset 0 0 100px rgba(0,0,0,.1);
+ }
+ .fc .fc-event {
+ background-color: var(--link-color);
+ border: none;
+ color: white;
+ }
+ .fc .fc-month-view .fc-content .fc-title .item-desc:hover,
+ .fc .fc-month-view .fc-content .fc-title .item-desc:focus {
+ color: white;
+ }
+ .fc .fc-event:hover,
+ .fc .fc-event:focus {
+ box-shadow: inset 0 0 100px rgba(0,0,0,.2);
+ }
+/* Photo Albums */
+.photo-album-actions .icon-padding,
+.photo-edit-link-wrap .icon-padding {
+ margin-left: 10px !important;
+}
+.photos-upload-link {
+ font-size: 28px;
+ color: var(--link-color) !important;
+ opacity: 1 !important;
+ border-radius: 8px;
+ padding: 0px 8px;
+}
+#photo-album-link {
+ opacity: 1 !important;
+}
+.photos-upload-link i,
+#photo-album-link i,
+#photo-edit-link i,
+#photo-toprofile-link i,
+#album-edit-link i,
+#album-drop-link i,
+.photos-order-link i {
+ font-size: 24px !important;
+ color: var(--link-color) !important;
+ opacity: 1 !important;
+ border-radius: 100% !important;
+ padding: 8px 11px !important;
+ height: 40px;
+ width: 40px;
+}
+#photo-edit-link i.fa-image {
+ padding: 6px 7px !important;
+}
+.photos-order-link {
+ margin-top: 5px !important;
+}
+ .photos-upload-link:hover i,
+ .photos-upload-link:focus i,
+ #photo-album-link:hover i,
+ #photo-album-link:focus i,
+ #photo-edit-link:hover i,
+ #photo-toprofile-link:hover i,
+ #photo-toprofile-link:focus i,
+ #album-edit-link:hover i,
+ #album-edit-link:focus i,
+ #album-drop-link:hover i,
+ #album-drop-link:focus i,
+ .photos-order-link:hover i,
+ .photos-upload-link:hover i,
+ .photos-upload-link:focus i {
+ background-color: rgba(255,255,255,.1) !important;
+ }
+.photos-content-wrapper .photos-upload-link::before {
+ content: var(--add-photo-button-text);
+ font-size: 15px;
+ vertical-align: middle;
+ margin-top: -10px;
+ display: inline-block;
+}
+.justified-gallery {
+ overflow: visible !important;
+ height: auto !important;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: start;
+}
+.justified-gallery > a,
+.justified-gallery > div,
+.justified-gallery > figure{
+ height: 180px !important;
+ width: 180px !important;
+ border: 1px solid #ccc;
+ position: relative !important;
+ top: auto !important;
+ left: auto !important;
+ border-radius: 8px;
+ margin: 4px !important;
+}
+.justified-gallery > .jg-entry-visible > img,
+.justified-gallery > .jg-entry-visible > a > img,
+.justified-gallery > .jg-entry-visible > svg,
+.justified-gallery > .jg-entry-visible > a > svg{
+ width: 100% !important;
+ height: 100% !important;
+ margin: 0 !important;
+ top: 0 !important;
+ left: 0 !important;
+ object-fit:cover;
+ object-position: center;
+}
+#photo-photo {
+ margin: 0 auto !important;
+ max-width: 100%;
+}
+#photos-upload-perms button[data-toggle="modal"] {
+ background-color: rgba(255,255,255,.2) !important;
+ padding: 0 !important;
+ height: 36px;
+ width: 36px;
+ margin-right: 5px;
+ border-radius: 100%;
+ color: var(--link-color);
+}
+ #photos-upload-perms button[data-toggle="modal"]:hover,
+ #photos-upload-perms button[data-toggle="modal"]:focus {
+ background-color: rgba(255,255,255,.1) !important;
+ }
+/* ADD-ONS */
+.advancedcontentfilter-content-wrapper table td:nth-of-type(2) {
+ word-wrap: anywhere;
+}
+.advancedcontentfilter-content-wrapper pre {
+ margin-top: 20px;
+}
+/* calculator addon */
+.calc-content-wrapper table {
+ margin: 0 auto;
+ color: #333;
+}
+.calc-content-wrapper td[colspan='5']::after {
+ content: ' ';
+ height: 50px;
+ width: 260px;
+ background-color: black;
+ display: block;
+}
+ .calc-content-wrapper input[type='button']{
+ appearance: none;
+ height: 50px;
+ width: 100%;
+ border: 1px solid #666;
+ color: white;
+ font-size: 18px;
+ font-weight: bold;
+ background-color: #999;
+ text-align: center;
+ }
+ .calc-content-wrapper input[type='button']:active {
+ box-shadow: inset 0 0 100px rgba(255,255,255,.2);
+ }
+.calc-content-wrapper input[name='plus'],
+.calc-content-wrapper input[name='minus'],
+.calc-content-wrapper input[name='multiplication'],
+.calc-content-wrapper input[name='division'],
+.calc-content-wrapper input[name='enter']{
+ background-color: orange;
+}
+ .calc-content-wrapper input[name='plus']:active,
+ .calc-content-wrapper input[name='minus']:active,
+ .calc-content-wrapper input[name='multiplication']:active,
+ .calc-content-wrapper input[name='division']:active,
+ .calc-content-wrapper input[name='enter']:active{
+ box-shadow: inset 0 0 100px rgba(0,0,0,.2);
+ }
+.calc-content-wrapper input[name='plus']{
+ padding-left: 10px;
+}
+.calc-content-wrapper input[name='multiplication']{
+ padding-left: 14px;
+}
+.calc-content-wrapper input[name='clear'],
+.calc-content-wrapper input[name='sqareroot'],
+.calc-content-wrapper input[name='squarex'],
+.calc-content-wrapper input[name='deg-rad'],
+.calc-content-wrapper input[name='rad-deg'],
+.calc-content-wrapper input[name='sine'],
+.calc-content-wrapper input[name='arcsine'],
+.calc-content-wrapper input[name='cosine'],
+.calc-content-wrapper input[name='arccosine']{
+ background-color: #666;
+}
+.calc-content-wrapper #display {
+ font-size: 36px;
+ font-weight: lighter;
+ text-align: right;
+ color: #eee;
+ background-color: #666;
+ border: none;
+ display: block;
+ width: 260px;
+ position: absolute;
+}
+ /* 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;
+ left: 10px;
+ background-color: var(--link-color);
+ color: #ffffff;
+ width: 50px;
+ height: 50px;
+ line-height: 50px;
+ text-align: center;
+ font-size: 24px;
+ border-radius: 100%;
+}
+#item-delete-selected {
+ height: 50px;
+ width: 50px;
+ line-height: 50px;
+ font-size: 24px;
+ background-color: var(--link-color);
+ border-radius: 100%;
+ top: 120px;
+}
+ #item-delete-selected:hover,
+ #item-delete-selected:focus {
+ box-shadow: inset 0 0 100px rgba(0,0,0,.2);
+ }
+ /* Profile pics in Messages and Events */
+ .event-wrapper .event-owner img,
+ .mail-conv-wrapper .media .contact-photo-wrapper img,
+ .mail-list-outside-wrapper .contact-photo-wrapper img {
+ border-radius: 100%;
+ }
+ #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;
+}
+/* TAGS, CATEGORIES, MENTIONS BUTTONS
+ ==================================
+ Restyled to be less obnoxious and tiny
+ now sized and spaced like they are on Mastodon
+*/
+a.tag.label,
+.wall-item-container .wall-item-bottom .wall-item-tags span.label {
+ border-radius: 4px !important;
+ display: inline-flex !important;
+ font-size: 12px !important;
+ font-weight: 500 !important;
+ padding: 6px 12px !important;
+ -webkit-text-decoration: none !important;
+ text-decoration: none !important;
+ margin: 2px !important;
+ background-image: none !important;
+ background-color: transparent !important;
+ box-shadow: none !important;
+ color: #05d8fb !important;
+ border: 1px solid #05d8fb;
+ text-shadow: none !important;
+}
+ .wall-item-bottom .label {
+ color: inherit;
+ }
+ .wall-item-bottom .label a {
+ color: inherit;
+ }
+ /* hide lightning bolt and person icons
+ pretty sure people know what "#" and "@" mean now
+ */
+ a.tag.label .fa-bolt::before,
+ .wall-item-bottom .label .fa-bolt::before {
+ content: '';
+ }
+ .wall-item-bottom .label .fa-user::before{
+ content: '';
+ }
+ /* undo hover for entire container*/
+ .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
+ filter: grayscale(0.5);
+ opacity: 0.8;
+ -webkit-transition: 0s;
+ -moz-transition: 0s;
+ -ms-transition: 0s;
+ transition: 0s;
+ }
+ /* replace with hover for individual tag */
+ .wall-item-container .wall-item-bottom .wall-item-tags span.label:hover,
+ .wall-item-container .wall-item-bottom .wall-item-tags span.label:focus,
+ .wall-item-container .wall-item-bottom .wall-item-tags span.label:focus-within {
+ filter: grayscale(0) !important;
+ opacity: 1 !important;
+ /* probably don't need vendor prefixed anymore but whatever...*/
+ -webkit-transition: all 0.25s ease-in-out !important;
+ -moz-transtion: all 0.25s ease-in-out !important;
+ -ms-transition: all 0.25s ease-in-out !important;
+ transition: all 0.25s ease-in-out !important;
+ }
+ /* Hashtag Buttons */
+ a.tag.label.btn-info,
+ .wall-item-bottom .wall-item-tags .tag.label.btn-info {
+ /* inherits everything from above */
+ }
+ a.tag.label.btn-info:hover, a.tag.label.btn-info:focus,
+ .wall-item-bottom .wall-item-tags .tag.label.btn-info:hover,
+ .wall-item-bottom .wall-item-tags .tag.label.btn-info:focus {
+ background-color: #05d8fb !important;
+ color: black !important;
+ }
+ /* Category Buttons */
+ .wall-item-bottom .wall-item-tags .category.label.btn-success {
+ border-color: limegreen !important;
+ color: limegreen !important;
+ font-size: 12px;
+ }
+ /* replace (x) remove with icon button */
+ .wall-item-bottom .wall-item-tags .category.label.btn-success a:first-of-type {
+ margin-right: 4px;
+ }
+ .wall-item-bottom .wall-item-tags .category.label.btn-success a:last-of-type {
+ font-size: 0px;
+ }
+ .wall-item-bottom .wall-item-tags .category.label.btn-success a:last-of-type::after {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ font-size: 12px;
+ }
+ .wall-item-bottom .wall-item-tags .category.label.btn-success:hover,
+ .wall-item-bottom .wall-item-tags .category.label.btn-success:focus {
+ background-color: limegreen !important;
+ color: black !important;
+ }
+ /* when a category is removed need to visually indicate it */
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success){
+ border-color: #ccc !important;
+ color: #ccc !important;
+ }
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:first-of-type{
+ font-size: 12px;
+ text-decoration: line-through;
+ margin-right: 4px;
+ }
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type {
+ font-size: 0px;
+ }
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type::after {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ font-size: 12px;
+ text-decoration: line-through;
+ }
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):hover,
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):focus {
+ background-color: red !important;
+ color: #ccc !important;
+ }
+ /* overrides for Saved File page where buttons structure is different */
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success {
+ font-size: 12px !important;
+ }
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success a {
+ font-size: 0px !important;
+ margin: 0px;
+ }
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success a::after {
+ margin-left: 0px;
+ }
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success){
+ font-size: 12px !important;
+ text-decoration: line-through !important;
+ }
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a {
+ font-size: 0px !important;
+ }
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a::after {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ font-size: 12px;
+ text-decoration: line-through;
+ }
+ /* Folder Buttons */
+ .wall-item-bottom .wall-item-tags .folder.label.btn-danger {
+ border-color: hotpink !important;
+ color: hotpink !important;
+ }
+ /* replace (x) remove with icon button */
+ .wall-item-bottom .wall-item-tags .folder.label.btn-danger a:first-of-type{
+ font-size: 0px;
+ }
+ .wall-item-bottom .wall-item-tags .folder.label.btn-danger a:last-of-type::after {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ font-size: 12px;
+ }
+ .wall-item-bottom .wall-item-tags .folder.label.btn-danger:hover,
+ .wall-item-bottom .wall-item-tags .folder.label.btn-danger:focus {
+ background-color: hotpink !important;
+ color: black !important;
+ }
+ /* when a category is removed need to visually indicate it */
+ .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger){
+ border-color: #ccc !important;
+ color: #ccc !important;
+ text-decoration: line-through !important;
+ }
+ .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger) a:first-of-type{
+ font-size: 0px;
+ }
+ .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger) a:last-of-type::after {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ font-size: 12px;
+ }
+ .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger):hover,
+ .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger):focus{
+ background-color: black !important;
+ color: white !important;
+ }
+ /* @ Mention Buttons */
+ .wall-item-bottom .wall-item-tags .mention.label.btn-warning {
+ border-color: gold !important;
+ color: gold !important;
+ }
+ .wall-item-bottom .wall-item-tags .mention.label.btn-warning:hover,
+ .wall-item-bottom .wall-item-tags .mention.label.btn-warning:focus {
+ background-color: gold !important;
+ border-color: gold !important;
+ color: black !important;
+ }
+ /* Comment buttons on other peple's profile Conversations */
+ a.btn-link.button-comments {
+ width: fit-content;
+ text-align:center !important;
+ display: block;
+ margin-top:10px;
+ color: var(--nav-icon-color) !important;
+ }
+ a.btn-link.button-comments:hover {
+ text-decoration: none;
+ color: var(--link-color) !important;
+ }
+ a.btn-link.button-comments .fa {
+ width: 50px;
+ display: block;
+ margin: 0 auto;
+ }
+ a.btn-link.button-comments .fa::before {
+ font-size: 24px;
+ }
+ a.btn-link.button-comments::after {
+ font-size: 14px !important;
+ position: relative;
+ top: 5px;
+ }
+ /* 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
+ ===========================
+*/
+@media screen and (min-width: 1921px){
+ .coverphoto {
+ max-width: 1920px;
+ left: 50% !important;
+ margin-left: -960px;
+ border-bottom-right-radius: 10px;
+ border-bottom-left-radius: 10px;
+ }
+}
+/* Small Laptop Screens
+ Some tablets in Landscape Orientation
+ =====================================
+*/
+@media screen and (max-width: 1280px) {
+ #search-box {
+ width: 18% !important;
+ }
+ #search-save {
+ width: 140px !important;
+ }
+}
+/* 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;
+ }
+ /* Contact Notification Action Buttons */
+ .intro-actions {
+ position: relative;
+ float: none !important;
+ }
+}
+/* Large Tablets in Portrait Orientation
+ =====================================
+*/
+@media screen and (max-width: 991px){
+ /* Friendica icon upper left */
+ #banner {
+ display: block !important;
+ padding: 0 !important;
+ margin: 8px 10px;
+ }
+ #friendica-logo-mask {
+ display: block !important;
+ }
+ /* hide search box - no room */
+ #search-box {
+ display: none;
+ }
+ /* show mobile search toggle */
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]{
+ display: block !important;
+ position: fixed !important;
+ left: 100px;
+ top: 6px;
+ }
+ /* force display of mobile search box */
+ #search-mobile {
+ top: 110px !important;
+ border-color: black;
+ }
+ #search-mobile .col-xs-12 {
+ background-color: var(--nav-bg);
+ }
+ #search-mobile.collapse.in,
+ #search-mobile.collapse.in * {
+ display: block !important;
+ }
+ #topbar-first .navbar-toggle[data-target="aside"] {
+ position: fixed;
+ top: 6px;
+ left: 50px;
+ }
+ /* change aside toggle icon */
+ .navbar-toggle .fa-ellipsis-v::before,
+ #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before {
+ content: "\f152";
+ }
+ body.aside-out .navbar-toggle .fa-ellipsis-v::before,
+ body.aside-out #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before {
+ content: "\f191";
+ }
+ #topbar-first .nav > .account {
+ right: 24px;
+ }
+ #jotOpen::before {
+ content: '';
+ margin: 0;
+ }
+ #mention-link {
+ padding: 0 8px !important;
+ }
+ #mention-link span:last-of-type {
+ display: none;
+ }
+ aside {
+ background-color: var(--background-color);
+ }
+ .offcanvas-right-overlay,
+ aside::before {
+ background-color: rgba(0, 0, 0, 0.4);
+ }
+ /* Profile Aside Mobile */
+ body.mod-contact #content,
+ body.mod-profile #content,
+ body.mod-photos #content {
+ margin-top: 350px;
+ }
+ /* only seen on your own Recent Photos page */
+ body.mod-profile #sidebar-photos-albums::before {
+ content: '\f083';
+ font-family: ForkAwesome;
+ font-size: 150px;
+ position: fixed;
+ top: 175px;
+ left: 0;
+ right: 0;
+ text-align: center;
+ color: var(--nav-icon-color);
+ opacity: .5;
+ z-index: -1;
+ transition-duration: .5s;
+ transition-property: left;
+ }
+ body.mod-profile aside.canvas-sliding #sidebar-photos-albums::before,
+ body.mod-profile aside.canvas-slid #sidebar-photos-albums::before {
+ left: 50%;
+ }
+ /* hide camera icon on other profile Recent Photos pages */
+ body.mod-profile .vcard + #sidebar-photos-albums::before {
+ content: '';
+ }
+
+ /* 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 {
+ margin-top: 0px !important;
+ left: -300px !important;
+ right: auto !important;
+ display: block !important;
+ padding-top: 120px;
+ transition-duration: .5s !important;
+ z-index: auto;
+ }
+ body.mod-contact aside.canvas-slid,
+ body.mod-photos aside.canvas-slid,
+ body.mod-profile aside.canvas-slid {
+ left: 0px !important;
+ right: auto !important;
+ z-index: 20;
+ }
+ body.mod-contact aside #profile-photo-wrapper,
+ body.mod-photos aside #profile-photo-wrapper,
+ body.mod-profile aside #profile-photo-wrapper {
+ position: fixed;
+ top: 150px;
+ left: 50%;
+ height: 150px;
+ width: 150px;
+ margin-left: -75px;
+ transition-timing-function: ease-in-out;
+ transition-duration: .3s;
+ transition-property: all;
+ }
+ body.mod-contact .profile-header h3.p-name,
+ body.mod-photos .profile-header h3.p-name,
+ body.mod-profile .profile-header h3.p-name {
+ position: fixed;
+ width: 100%;
+ top: 300px;
+ left: 50%;
+ margin-left: -50%;
+ transition-timing-function: ease-in-out;
+ transition-duration: .3s;
+ transition-property: all;
+
+ }
+ body.mod-contact .profile-header .p-addr,
+ body.mod-photos .profile-header .p-addr,
+ body.mod-profile .profile-header .p-addr {
+ position: fixed;
+ width: 50%;
+ top: 400px;
+ left: 50%;
+ margin-left: -25%;
+ transition-timing-function: ease-in-out;
+ transition-duration: .3s;
+ transition-property: all;
+ }
+ /* bounce effect */
+ body.mod-contact aside.canvas-sliding #profile-photo-wrapper,
+ body.mod-photos aside.canvas-sliding #profile-photo-wrapper,
+ body.mod-profile aside.canvas-sliding #profile-photo-wrapper {
+ margin-left: -150px;
+ }
+ body.mod-contact aside.canvas-sliding .profile-header h3.p-name,
+ body.mod-photos aside.canvas-sliding .profile-header h3.p-name,
+ body.mod-profile aside.canvas-sliding .profile-header h3.p-name {
+ margin-left: calc(-50% - 75px);
+ }
+ body.mod-contact aside.canvas-sliding .profile-header .p-addr,
+ body.mod-photos aside.canvas-sliding .profile-header .p-addr,
+ body.mod-profile aside.canvas-sliding .profile-header .p-addr {
+ margin-left: -300px;
+ }
+ /* centered in right-hand side */
+ body.mod-contact aside.canvas-slid #profile-photo-wrapper,
+ body.mod-photos aside.canvas-slid #profile-photo-wrapper,
+ body.mod-profile aside.canvas-slid #profile-photo-wrapper {
+ margin-left: -225px;
+ }
+ body.mod-contact aside.canvas-slid .profile-header h3.p-name,
+ body.mod-photos aside.canvas-slid .profile-header h3.p-name,
+ body.mod-profile aside.canvas-slid .profile-header h3.p-name {
+ margin-left: calc(-50% - 150px);
+ }
+ body.mod-contact aside.canvas-slid .profile-header .p-addr,
+ body.mod-photos aside.canvas-slid .profile-header .p-addr,
+ body.mod-profile aside.canvas-slid .profile-header .p-addr {
+ margin-left: calc(-25% - 150px);
+ }
+ /* Cover Photo Mobile */
+ .coverphoto.canvas-sliding,
+ .coverphoto.canvas-slid{
+ left: 0px !important;
+ right: 0px !important;
+ bottom: 0px;
+ background-color: var(--background-color);
+ overflow: visible;
+ }
+ .coverphoto.canvas-slid::after {
+ content: '';
+ position: absolute;
+ top: 500px;
+ left: 0px;
+ width: 100%;
+ height: 500%;
+ 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
+ Some Small tablets in Portrait Orientation
+ ======================================
+*/
+@media screen and (max-width: 768px), (max-height: 480px) and (max-width: 960px) and (orientation: landscape) {
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]{
+ left: 10%;
+ }
+ .topbar ul.nav {
+ position: relative !important;
+ left: 10% !important;
+ margin-left: 0!important;
+ }
+ #search-save {
+ width: 100px !important;
+ }
+ #search-save .fa-plus::after {
+ content: var(--follow-button-text);
+ }
+ #search-save .fa-floppy-o::after {
+ content: var(--save-button-text);
+ }
+ a.wall-item-name-link, span.fakelink {
+ font-weight: bold;
+ }
+ .wall-item-container iframe {
+ aspect-ratio: 5/4;
+ }
+ /* new mobile layout */
+ body {
+ padding-top: 65px !important;
+ padding-bottom: 55px !important;
+ }
+
+ /* Friendica icon upper left */
+ #banner {
+ display: block !important;
+ padding: 0 !important;
+ margin: 8px 10px !important;
+ }
+ #friendica-logo-mask {
+ display: block !important;
+ }
+ #topbar-first {
+ top: auto;
+ bottom: 0;
+ box-shadow: 2px 0px 5px rgba(0,0,0,.5);
+ }
+ #topbar-first .topbar-nav .arrow {
+ display: none;
+ }
+ /* re-reveal the user profile toggle */
+ #topbar-first .nav > .account {
+ position: fixed;
+ display: block !important;
+ top: 0;
+ right: 8px;
+ }
+ #topbar-first .nav > .account img {
+ margin: 0;
+ }
+ #topbar-first .nav > .account span.caret {
+ display: none;
+ }
+ /* overlay mobile nav toggle invisibly */
+ #topbar-first .offcanvas-right-toggle {
+ position: fixed;
+ top: -3px;
+ right: 7px;
+ color: transparent;
+ z-index: 10000;
+ }
+ /* move sidebar toggle to bottom bar */
+ #topbar-first .navbar-toggle[data-target="aside"]{
+ position: fixed;
+ top: auto;
+ left: auto;
+ bottom: 5px;
+ }
+ /* change icon */
+ .navbar-toggle .fa-ellipsis-v::before,
+ #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before {
+ content: "\f152";
+ }
+ body.aside-out .navbar-toggle .fa-ellipsis-v::before,
+ body.aside-out #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before {
+ content: "\f191";
+ }
+ /* move search button right */
+ #topbar-first .navbar-toggle[data-target="#search-mobile"] {
+ position: relative !important;
+ display: block !important; /* show in landscape on phones */
+ top: 0;
+ left: auto;
+ right: auto;
+ margin: 0;
+ }
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed){
+ color: var(--link-color);
+ border-bottom: 3px solid var(--link-color);
+ background-color: transparent !important;
+ border-radius: 0 !important;
+ margin-top: 0px;
+ }
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed) .fa-search::before {
+ content: '\f00e';
+ }
+ /* fix spacing of icons */
+ .topbar ul.nav {
+ position: absolute !important;
+ left: 50px !important;
+ right: 50px !important;
+ display: flex;
+ justify-content: space-between;
+ }
+ #topbar-first .topbar-nav .nav-segment {
+ margin: 0px;
+ }
+ #search-mobile {
+ top: 60px !important;
+ }
+ /* always show on phones in landscape */
+ #search-mobile.collapse.in,
+ #search-mobile.collapse.in * {
+ display: block !important;
+ }
+ /* app-style notification menu */
+ #nav-notifications-menu {
+ position: fixed;
+ top: 60px;
+ bottom: 51px;
+ left: 0;
+ right: 0;
+ width: 100% !important;
+ min-width: unset;
+ max-width: unset;
+ min-height: unset;
+ max-height: unset !important;
+ margin: 0 !important;
+ box-shadow: none;
+ }
+ #nav-notifications-menu::before {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ position: absolute;
+ top: 8px;
+ right: 12px;
+ height: 40px;
+ width: 40px;
+ background-color: var(--link-color);
+ color: white;
+ font-size: 24px;
+ border-radius: 100%;
+ line-height: 40px;
+ text-align: center;
+ display: block;
+ }
+ #offcanvasUsermenu {
+ background-color: var(--nav-bg) !important;
+ }
+ #offcanvasUsermenu ul.list-group {
+ -webkit-box-shadow: none !important;
+ -moz-box-shadow: none !important;
+ box-shadow: none !important;
+ }
+ #offcanvasUsermenu ul.list-group li:first-of-type img {
+ max-width: unset !important;
+ max-height: unset !important;
+ height: 40px !important;
+ width: 40px !important;
+ border-radius: 100% !important;
+ }
+ #offcanvasUsermenu li.divider {
+ display: none !important;
+ }
+ #offcanvasUsermenu li.list-group-item,
+ #offcanvasUsermenu li.list-group-item a {
+ border: transparent !important;
+ background-color: transparent !important;
+ color: var(--nav-icon-color) !important;
+ width: 90% !important;
+ margin: 0 auto;
+ }
+ #offcanvasUsermenu li.list-group-item:hover {
+ background-color: #333 !important;
+ border-radius: 8px !important;
+ }
+ #offcanvasUsermenu li.list-group-item:hover a {
+ color: #fff !important;
+ }
+ #offcanvasUsermenu li.list-group-item:first-of-type:hover {
+ background-color: revert !important;
+ }
+ /* force mobile search in landscape on phones */
+ #search-box {
+ display: none !important;
+ }
+ /* position delete button */
+ #item-delete-selected {
+ top: 60px;
+ right: 10px;
+ }
+ /* move top bars around */
+ #topbar-second {
+ top: 0px;
+ padding: 0;
+ }
+ #topbar-second div.container{
+ position: absolute;
+ left: 55px;
+ right: 55px;
+ }
+ #topbar-second #tabmenu {
+ width: 100%;
+ }
+ /* override and show mobile tabs in landscape */
+ #topbar-second #tabmenu ul.tabbar.hidden-xs {
+ display: none !important;
+ }
+ #topbar-second #tabmenu ul.tabbar.visible-xs {
+ display: block !important;
+ }
+ #topbar-second ul.tabbar {
+ text-align: center;
+ max-width: 100%;
+ }
+ #topbar-second ul.tabbar > li:first-of-type {
+ max-width: 75%;
+ overflow: hidden;
+ margin-right: 50px;
+ }
+ #topbar-second ul.tabbar li:first-of-type ul.tabs {
+ max-width: 100%;
+ }
+ #topbar-second ul.tabbar li:first-of-type ul.tabs li {
+ width: 100%;
+ height: 100%;
+ }
+ #topbar-second ul.tabbar li:first-of-type ul.tabs li a {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ /* prevent dropdown being pushed off toolbar */
+ #topbar-second ul.tabbar > li:last-of-type {
+ margin-left: -50px;
+ border-bottom: 4px solid var(--link-color);
+ }
+ #topbar-second ul.tabbar > li:last-of-type li.dropdown {
+ margin-left: 0px !important;
+ }
+ #dropdownMenuTools-xs {
+ height: 60px;
+ }
+ ul.tabs-extended .dropdown.open .fa-chevron-down::before{
+ content: '\f077';
+ }
+ #jotOpen, #search-save, #mention-link {
+ position: fixed;
+ bottom: 65px;
+ right: 10px;
+ border-radius: 100% !important;
+ height: 50px;
+ width: 50px !important;
+ line-height: 50px;
+ border: none !important;
+ box-shadow: none !important;
+ }
+ #mention-link span:last-of-type {
+ display: none;
+ }
+ #mention-link span:first-of-type {
+ float: none;
+ position: relative;
+ top: 2px;
+ }
+ #search-save .fa-plus::after,
+ #search-save .fa-floppy-o::after {
+ display: none;
+ }
+ #search-save .fa-plus::before,
+ #search-save .fa-floppy-o::before {
+ content: '\f0c7' !important;
+ }
+ .fa-edit::before,
+ .fa-pencil-square-o::before {
+ content: "\f040";
+ }
+ .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;
+ top: 58px;
+ left: 0px;
+ right: 0px;
+ bottom: 50px;
+ width: 100% !important;
+ overflow: auto !important;
+ overflow-x: hidden !important;
+ }
+ #topbar-second .dropdown-menu li {
+ height: auto !important;
+ }
+ #topbar-second .dropdown-menu li a,
+ .tabs .dropdown-menu li a {
+ font-size: 18px !important;
+ }
+ .topbar .dropdown-header {
+ font-size: 18px !important;
+ }
+ .topbar .dropdown-header .dropdown-header-link .btn-link {
+ font-size: 18px !important;
+ margin-right: 40px;
+ }
+ aside.offcanvas-xs {
+ padding-top: 60px;
+ padding-bottom: 60px;
+ }
+ body.mod-profile #sidebar-photos-albums::before {
+ top: 125px;
+ }
+ body.mod-contact aside #profile-photo-wrapper,
+ body.mod-photos aside #profile-photo-wrapper,
+ body.mod-profile aside #profile-photo-wrapper {
+ top: 100px;
+ }
+ body.mod-contact .profile-header h3.p-name,
+ body.mod-photos .profile-header h3.p-name,
+ body.mod-profile .profile-header h3.p-name {
+ top: 255px;
+ }
+ body.mod-contact .profile-header .p-addr,
+ body.mod-photos .profile-header .p-addr,
+ body.mod-profile .profile-header .p-addr {
+ top: 345px;
+ }
+ .coverphoto,
+ .coverphoto.canvas-sliding,
+ .coverphoto.canvas-slid {
+ top: 55px;
+ }
+ #message-new a {
+ height: 50px;
+ width: 50px;
+ background-color: var(--link-color);
+ line-height: 50px;
+ font-size: 24px;
+ text-align: center;
+ border-radius: 100%;
+ display: block;
+ color: white;
+ padding: 0;
+ }
+ #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)
+ =========================================
+*/
+@media screen and (max-width: 600px) and (orientation: portrait) {
+ body.mod-contact aside,
+ body.mod-photos aside,
+ body.mod-profile aside {
+ left: -100% !important;
+ right: 0% !important;
+ max-width: 100% !important;
+ width: 100% !important;
+ padding-top: 60px;
+ background-color: var(--background-color) !important;
+ }
+ /* only seen on your own Recent Photos page */
+ body.mod-profile #sidebar-photos-albums::before {
+ transition-property: top;
+ }
+ body.mod-profile aside.canvas-sliding #sidebar-photos-albums::before,
+ body.mod-profile aside.canvas-slid #sidebar-photos-albums::before {
+ left: 0px;
+ top: 150%;
+ }
+ body.mod-contact aside.canvas-slid,
+ body.mod-photos aside.canvas-slid,
+ body.mod-profile aside.canvas-slid {
+ left: 0px !important;
+ }
+ body.mod-contact aside.canvas-slid::before,
+ body.mod-photos aside.canvas-slid::before,
+ body.mod-profile aside.canvas-slid::before {
+ opacity: 0;
+ }
+ body.mod-contact aside #profile-photo-wrapper,
+ body.mod-photos aside #profile-photo-wrapper,
+ body.mod-profile aside #profile-photo-wrapper {
+ top: 100px;
+ }
+ body.mod-contact .profile-header h3.p-name,
+ body.mod-photos .profile-header h3.p-name,
+ body.mod-profile .profile-header h3.p-name {
+ top: 255px;
+ }
+ body.mod-contact .profile-header .p-addr,
+ body.mod-photos .profile-header .p-addr,
+ body.mod-profile .profile-header .p-addr {
+ top: 345px;
+ width: 80%;
+ margin-left: -40%;
+ }
+ /* bounce effect */
+ body.mod-contact aside.canvas-sliding #profile-photo-wrapper,
+ body.mod-photos aside.canvas-sliding #profile-photo-wrapper,
+ body.mod-profile aside.canvas-sliding #profile-photo-wrapper {
+ margin-left: -75px;
+ top: 150% !important;
+ }
+ body.mod-contact aside.canvas-sliding .profile-header h3.p-name,
+ body.mod-photos aside.canvas-sliding .profile-header h3.p-name,
+ body.mod-profile aside.canvas-sliding .profile-header h3.p-name {
+ margin-left: -50%;
+ top: 150% !important;
+ }
+ body.mod-contact aside.canvas-sliding .profile-header .p-addr,
+ body.mod-photos aside.canvas-sliding .profile-header .p-addr,
+ body.mod-profile aside.canvas-sliding .profile-header .p-addr {
+ margin-left: -25%;
+ top: 150% !important;
+ }
+
+ body.mod-contact aside.canvas-slid #profile-photo-wrapper,
+ body.mod-photo aside.canvas-slid #profile-photo-wrapper,
+ body.mod-profile aside.canvas-slid #profile-photo-wrapper {
+ margin-left: -75px;
+ top: 150% !important;
+ }
+ body.mod-contact aside.canvas-slid .profile-header h3.p-name,
+ body.mod-photo aside.canvas-slid .profile-header h3.p-name,
+ body.mod-profile aside.canvas-slid .profile-header h3.p-name {
+ margin-left: -50%;
+ top: 150% !important;
+ }
+ body.mod-contact aside.canvas-slid .profile-header .p-addr,
+ body.mod-photo aside.canvas-slid .profile-header .p-addr,
+ body.mod-profile aside.canvas-slid .profile-header .p-addr {
+ margin-left: -25%;
+ top: 150% !important;
+ }
+ .coverphoto {
+ transition-duration: .5s;
+ transition-property: top;
+ }
+ body.mod-contact.aside-out .coverphoto,
+ body.mod-photo.aside-out .coverphoto,
+ body.mod-profile.aside-out .coverphoto,
+ body.mod-contact aside.canvas-slid .coverphoto,
+ body.mod-photo aside.canvas-slid .coverphoto,
+ body.mod-profile aside.canvas-slid .coverphoto {
+ top: 150% !important;
+ left: 0px;
+ right: 0px;
+ }
+}
+/* Narrow Screen Phones in Portrait Orientation
+ ============================================
+*/
+@media screen and (max-width: 400px) and (orientation: portrait) {
+ /* remove action button labels if screen is too narrow */
+ .wall-item-actions-row button::after {
+ content: '.';
+ color: transparent;
+ }
+ /* NOTE: cannot simply empty or display none or button alignment gets messed up! */
+ .wall-item-actions-row .button-browser-share::after {
+ display: none !important;
+ }
+ ul.nav-tabs {
+ display: block;
+ }
+ ul.nav-tabs li {
+ width: 98%;
+ text-align: center;
+ }
+ ul.nav-tabs li a {
+ border: 1px solid var(--link-color) !important;
+ border-radius: 8px !important;
+ }
+ ul.nav-tabs li:not(.active) a:hover,
+ ul.nav-tabs li:not(.active) a:focus {
+ background-color: rgba(255,255,255,.2);
+ }
+ ul.nav-tabs li.active {
+ border: none !important;
+ }
+ ul.nav-tabs li.active a {
+ background-color: var(--link-color) !important;
+ color: #000 !important;
+ }
+ .hovercard {
+ max-width: 100%;
+ }
+}
+/* Narrow Screen Phones in Landscape Orientation
+ ==============================================
+*/
+@media screen and (max-height: 400px) and (orientation: landscape) {
+ #topbar-first {
+ transition-duration: .5s;
+ transition-property: bottom;
+ bottom: -55px;
+ }
+ header #banner {
+ background-color: var(--nav-bg);
+ border-radius: 8px;
+ z-index: 1030;
+ }
+ #topbar-first .navbar-toggle[data-target="aside"] {
+ position: fixed !important;
+ left: 10px;
+ bottom: 10px;
+ transition-duration: .5s;
+ background-color: var(--link-color);
+ color: white;
+ height: 50px;
+ width: 50px;
+ border-radius: 100%;
+ line-height: 32px;
+ }
+ #topbar-first .navbar-toggle[data-target="#search-mobile"],
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed) {
+ position: fixed !important;
+ top: auto;
+ bottom: 10px;
+ right: 10px;
+ transition-duration: .5s;
+ background-color: var(--link-color);
+ color: white;
+ height: 50px;
+ width: 50px;
+ border-radius: 100%;
+ line-height: 32px;
+ }
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]:hover,
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]:focus {
+ box-shadow: inset 0 0 100px rgba(0,0,0,.2);
+ }
+ .fa-fw {
+ width: auto;
+ }
+ #topbar-first .offcanvas-right-toggle {
+ top: 3px;
+ right: 13px;
+ padding: 0 !important;
+ }
+ #topbar-first .nav > .account {
+ top: 0px;
+ right: 5px;
+ }
+ #main-menu img {
+ border: 5px solid var(--link-color);
+ border-radius: 100%;
+ box-sizing: unset;
+ }
+ #search-mobile {
+ top: 40% !important;
+ border: 10px solid var(--link-color);
+ border-radius: 8px;
+ left: 50%;
+ width: 80%;
+ margin-left: -40%;
+ box-shadow: 0 0 50px rgba(0,0,0,.75);
+ }
+ #search-mobile .col-xs-12 {
+ background-color: var(--nav-bg);
+ }
+ #topbar-second {
+ transition-duration: .5s;
+ transition-property: top;
+ top: -60px;
+ }
+ #topbar-first .nav > li > a:hover,
+ #topbar-first .nav > li > a:focus,
+ #topbar-first .nav > li > button:not(#main-menu):hover,
+ #topbar-first .nav > li > button:not(#main-menu):focus,
+ #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):hover,
+ #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):focus,
+ nav.navbar .nav > li > a:hover,
+ nav.navbar .nav > li > a:focus,
+ nav.navbar .nav > li > button:hover,
+ nav.navbar .nav > li > button:focus {
+ background-color: var(--link-color) !important;
+ border-radius: 100% !important;
+ box-shadow: inset 0 0 100px rgba(0,0,0,.2);
+ }
+ #topbar-first button.navbar-toggle.offcanvas-right-toggle:hover,
+ #topbar-first button.navbar-toggle.offcanvas-right-toggle:focus {
+ border-radius: 100% !important;
+ }
+ #topbar-first .topbar-actions {
+ z-index: 1070;
+ }
+ /* if notifications is left open when phone is rotated */
+ #nav-notifications-menu {
+ top: 0;
+ bottom: 0;
+ z-index: 10000;
+ }
+ #offcanvasUsermenu {
+ top: 0px;
+ }
+ #offcanvasUsermenu li:first-of-type img {
+ display: none;
+ }
+ #offcanvasUsermenu li:first-of-type {
+ font-weight: 700;
+ }
+ .offcanvas-right-overlay {
+ top: 0px;
+ }
+ /* Profile Pages */
+ body.mod-contact #content,
+ body.mod-profile #content,
+ body.mod-photos #content {
+ margin-top: 200px !important;
+ }
+ body.mod-profile #sidebar-photos-albums::before {
+ top: 25px;
+ }
+ body.mod-contact aside,
+ body.mod-photos aside,
+ body.mod-profile aside {
+ padding-top: 50px;
+ padding-bottom: 50px;
+ }
+ body.mod-contact aside.canvas-slid,
+ body.mod-photos aside.canvas-slid,
+ body.mod-profile aside.canvas-slid {
+ left: 0px !important;
+ right: auto !important;
+ max-width: 300px !important;
+ background-color: transparent !important;
+ z-index: 20;
+ }
+ body.mod-contact aside.canvas-slid::before,
+ body.mod-photos aside.canvas-slid::before,
+ body.mod-profile aside.canvas-slid::before {
+ opacity: 1;
+ }
+ body.mod-contact aside #profile-photo-wrapper,
+ body.mod-photos aside #profile-photo-wrapper,
+ body.mod-profile aside #profile-photo-wrapper {
+ top: 10px;
+ }
+ body.mod-contact .profile-header h3.p-name,
+ body.mod-photos .profile-header h3.p-name,
+ body.mod-profile .profile-header h3.p-name {
+ top: 155px;
+ }
+ body.mod-contact .profile-header .p-addr,
+ body.mod-photos .profile-header .p-addr,
+ body.mod-profile .profile-header .p-addr {
+ top: 205px;
+ width: 50%;
+ margin-left: -25%;
+ }
+ .coverphoto.canvas-sliding,
+ .coverphoto.canvas-slid,
+ .coverphoto {
+ top: 0px;
+ }
+}
+}
+/* LOGIN AND INFO SCREENS */
+body.mod-home {
+ padding-top: 10px !important;
+}
+.mod-home .navbar,
+.mod-home #topbar-second{
+ background-color: transparent !important;
+}
+.mod-home #nav-about {
+ background-color: var(--link-color);
+ height: 50px;
+ width: 50px;
+ color: white !important;
+ border-radius: 100% !important;
+ right: 15px;
+}
+ .mod-home #nav-about:hover,
+.mod-home #nav-about:focus {
+ background-color: var(--link-color) !important;
+ box-shadow: inset 0 0 100px rgba(0,0,0,.1);
+}
+.mod-home #nav-about .fa-info {
+ line-height: 24px;
+ width: auto;
+ display: block;
+}
+ @media screen and (max-width: 768px){
+ .mod-home #nav-about .fa-info {
+ line-height: 32px;
+ }
+ }
+/* 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
new file mode 100644
index 0000000..65ba5f9
--- /dev/null
+++ b/bookface_auto.php
@@ -0,0 +1,35 @@
+ get($uid, 'frio', 'link_color') ?: '';
+if ($customColor){
+ $customColor = new Color(''.$customColor.'');
+}
+$menu_background_hover_color = 'rgba(128,128,128,.1)';
+$nav_bg = '#ffffff';
+$background_color = '#f2f4f7';
+$link_color = ($customColor) ? '#'.$customColor->getHex() : '#'.$accentColor->getHex();
+ // override ugly blue accent color and prevent setting accent to nav or bg color
+ if ( $link_color == "#1e87c2" || $link_color == $nav_bg || $link_color == $background_color ){
+ $link_color = "#0066ff";
+ }
+$nav_icon_color = '#65686C';
+$font_color = '#313131';
+$font_color_darker = '#333';
+$contentbg_transp = '0';
diff --git a/bookface_dark.css b/bookface_dark.css
index 1b58a4b..fb1dcdc 100644
--- a/bookface_dark.css
+++ b/bookface_dark.css
@@ -1,9 +1,9 @@
/*
Name : Bookface Dark
- Version : 1.2
+ Version : 1.7.1
Licence : AGPL
- Created on : 26.01.2025
- Author : Kristi H. @kmh@friendica.world feb @feb@loma.ml
+ Created on : 15 MAY 2025
+ Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml
*/
:root {
@@ -12,29 +12,53 @@
--link-color: $link_color;
--nav-icon-color: $nav_icon_color;
--background-color: $background_color;
- --contentbg-transp: $contentbg_transp;
+ --content-bg: var(--nav-bg);
+ --comment-bg: var(--background-color);
--font-color: $font_color;
--font-color-darker: $font_color_darker;
- --background-image: $background_image;
--menu-background-hover-color: $menu_background_hover_color;
--border-color: #333333;
+ --count-color: #ffffff;
+ --count-bg: var(--link-color);
+ --attach-file-button: none; /* none or block */
+
+ /* LOCALIZE pseudo-element text below */
+ --sign-in-text: 'Sign-In';
+ --compose-text: 'Compose';
+ --new-note-text: 'New Note';
+ --save-search-text: 'Save Search';
+ --follow-tag-text: 'Follow Tag';
+ --comment-button-text: 'Comment';
+ --share-button-text: 'Share';
+ --quote-button-text: 'Quote';
+ --like-button-text: 'Like';
+ --dislike-button-text: 'Dislike';
+ --more-button-text: 'More';
+ --attendyes-button-text: 'Going';
+ --attendno-button-text: 'Can\'t Go';
+ --attendmaybe-button-text: 'Maybe';
+ --add-photo-button-text: 'Add Photos';
+ --follow-button-text: 'Follow';
+ --save-button-text: 'Save';
+ --new-message-text: 'New Message';
}
body {
background-color: var(--background-color) !important;
font-size: 15px !important;
- padding-top: 125px !important;
+ padding-top: 130px !important;
+ font-family: var(--global-font-family);
}
#topbar-first .nav > li > a,
#topbar-first .nav > li > button,
nav.navbar .nav > li > a,
nav.navbar .nav > li > button{
- color: #B0B3B8 !important;
-
+ color: var(--nav-icon-color) !important;
}
#topbar-first, nav.navbar {
background-color: var(--nav-bg) !important;
- color: #B0B3B8 !important;
+ color: var(--nav-icon-color) !important;
+ height: 55px;
}
#topbar-first .topbar-nav .nav-segment {
margin-right: 10px;
@@ -50,55 +74,125 @@ nav.navbar .nav > li > button{
#topbar-first .nav > li > a:focus,
#topbar-first .nav > li > button:not(#main-menu):hover,
#topbar-first .nav > li > button:not(#main-menu):focus,
+#topbar-first button.navbar-toggle:hover,
+#topbar-first button.navbar-toggle:focus,
nav.navbar .nav > li > a:hover,
nav.navbar .nav > li > a:focus,
nav.navbar .nav > li > button:hover,
nav.navbar .nav > li > button:focus {
- background-color: rgba(255,255,255,.1) !important;
- border-radius: 8px !important;
+ background-color: rgba(255,255,255,.1) !important;
+ border-radius: 8px !important;
}
-#topbar-first .nav > li > a.selected {
- border-bottom: 3px solid var(--link-color) !important;
- color: var(--link-color) !important;
-}
+ #topbar-first button.navbar-toggle,
+ #nav-notifications-menu-btn {
+ width: 50px;
+ height: 50px;
+ }
+ #topbar-first .nav > li > a.selected,
+ #nav-notification.dropdown.open {
+ border-bottom: 3px solid var(--link-color) !important;
+ color: var(--link-color) !important;
+ }
#topbar-first .nav > li > a.selected:hover,
+#topbar-first .nav > li > a.selected:focus,
#topbar-first .nav > li > #main-menu:hover,
-#topbar-first .nav > li > #main-menu:focus {
+#topbar-first .nav > li > #main-menu:focus,
+#nav-notification.dropdown.open #nav-notifications-menu-btn:hover,
+#nav-notification.dropdown.open #nav-notifications-menu-btn:focus {
background-color: transparent !important;
border-radius: 0 !important;
+}
+ #nav-notification.dropdown.open #nav-notifications-menu-btn .fa-bell::before {
+ content: '\f0f3';
+ color: var(--link-color);
+ }
+ .notif-item img.notif-image,
+ .intro-photo-wrapper img.intro-photo {
+ border-radius: 100%;
+ }
+ul.nav-tabs {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ padding-bottom: 20px;
+ border-color:rgba(255,255,255,.2);
}
ul.tabs li {
font-size: 15px !important;
margin-left: 10px !important;
}
-ul.tabs li.active {
- border-color: var(--link-color) !important;
-}
+ ul.nav-tabs li a,
ul.tabs li a {
margin-top: 8px;
- color: var(--link-color) !important;
+ color: var(--link-color);
+ border: none;
}
- ul.tabs li:hover:not(.active) {
- border-bottom-width: 0px !important;
- }
- ul.tabs li:hover:not(.active) a {
- background-color: rgba(255,255,255,.1) !important;
- border-radius: 8px !important;
- }
+ ul.nav-tabs li:not(.active):hover,
+ ul.tabs li:not(.active):hover {
+ border-bottom-width: 0px !important;
+ }
+ ul.nav-tabs li:not(.active):hover > a,
+ ul.tabs li:not(.active):hover > a {
+ background-color: rgba(128,128,128,.1) !important;
+ background-image: none !important;
+ border-radius: 8px !important;
+ color: var(--font-color);
+ }
+ ul.nav-tabs li:not(.active) > a:hover,
+ ul.nav-tabs li:not(.active) > a:focus {
+ border: none;
+ }
+ ul.nav-tabs li.active {
+ border-bottom: 4px solid var(--link-color);
+ }
+ ul.nav-tabs > li.active > a,
+ ul.nav-tabs > li.active a:hover,
+ ul.nav-tabs > li.active a:focus {
+ border: none;
+ color: var(--link-color);
+ background-color: transparent;
+ }
.dropdown-menu {
padding-bottom: 15px !important;
background-color: var(--nav-bg) !important;
border: 1px solid var(--background-color) !important;
}
- .dropdown-menu li {
- margin: 10px;
- width: 92% !important;
- border-radius: 8px;
- }
- .dropdown-menu li:hover {
- border-color: transparent !important;
+ .dropdown-menu li {
+ margin: 3px 10px;
+ width: 92% !important;
+ border-radius: 8px;
+ }
+ .dropdown-menu li:hover {
+ border-color: transparent !important;
+ }
+ .dropdown-menu > li > a:hover,
+ .dropdown-menu > li > a:focus {
+ background-image: none !important;
+ border-radius: 8px ;
+ }
+ .dropdown-menu li 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 {
+ border-radius: 0;
+ background-color: transparent;
+ border-bottom: 4px solid var(--link-color) !important;
+ }
+ .dropdown-menu > li.active > a,
+ .dropdown-menu > li.active:hover > a,
+ .dropdown-menu > li.active:focus > a {
+ color: var(--link-color);
+ background-color: transparent;
+ background-image: none;
+ }
.form-control {
background: var(--nav-bg);
color: #fff;
@@ -116,12 +210,42 @@ ul.tabs li.active {
header #banner {
left: 0 !important;
right: auto !important;
+ margin-top: 10px;
}
- header #banner #logo-img,
- .navbar-brand #logo-img {
- background-color: var(--link-color) !important;
- height: 40px !important;
- width: 40px !important;
+ .navbar-brand #logo-img {
+ margin-top: 20px;
+ }
+ .navbar-brand #logo-img,
+ header #banner #logo-img {
+ /* SVG Mask is broken in WebKit use Icon Font instead */
+ -webkit-mask-image: unset !important;
+ mask: none !important;
+ mask-size: unset !important;
+ mask-composite: unset !important;
+ mask-mode: unset !important;
+ background-color: transparent !important;
+ height: 40px;
+ width: 40px;
+ }
+ .navbar-brand #logo-img::before,
+ header #banner #logo-img::before {
+ content: '\f2e6';
+ font-family: ForkAwesome;
+ font-size: 45px;
+ position: relative;
+ top: -12px;
+ left: 0px;
+ text-shadow: none;
+ color: var(--link-color);
+ }
+
+ #navbar-brand-text {
+ line-height: 40px;
+ font-weight: 700;
+ color: var(--link-color) !important;
+ }
+ #nav-login::before{
+ content: var(--sign-in-text);
}
.topbar ul.nav {
left: 50% !important;
@@ -145,7 +269,7 @@ header #banner {
box-shadow: none !important;
}
#search-box form > div {
- background-color: #333334;
+ background-color: var(--background-color);
border-radius: 50px;
}
#search-box form > div::before {
@@ -161,7 +285,7 @@ header #banner {
width: 100% !important;
}
#search-box .form-control::placeholder {
- color: #B0B3B8 !important;
+ color: var(--nav-icon-color) !important;
}
#topbar-first #search-box .btn {
font-size: 0px !important;
@@ -175,7 +299,7 @@ header #banner {
content: '\f061';
font-family: ForkAwesome;
font-size: 15px;
- color: #B0B3B8;
+ color: var(--nav-icon-color);
}
#nav-user-menu, #nav-notifications-menu {
background-color: var(--nav-bg) !important;
@@ -183,6 +307,7 @@ header #banner {
}
#nav-user-menu {
min-width: 250px !important;
+ overflow-x: hidden;
}
.nav-pills .dropdown-menu li a,
.nav-pills .dropdown-menu li .btn-link,
@@ -192,7 +317,7 @@ header #banner {
.account .dropdown-menu li .btn-link,
.contact-photo-wrapper .dropdown-menu li a,
.contact-photo-wrapper .dropdown-menu li .btn-link {
- color: #B0B3B8 !important;
+ color: var(--nav-icon-color) !important;
border-color: var(--nav-bg) !important;
}
.nav-pills .dropdown-menu li > a:hover,
@@ -212,16 +337,24 @@ header #banner {
.account .dropdown-menu li.divider,
.contact-photo-wrapper .dropdown-menu li.divider {
background-color: var(--nav-bg) !important;
-}
+}
+#content .nav > li > .btn-link {
+ margin: 5px;
+}
+#content .nav > li > .btn-link:hover,
+#content .nav > li > .btn-link:focus {
+ background-color: var(--link-color);
+ color: white !important;
+}
#topbar-first #nav-notifications-menu {
border: 1px solid var(--background-color) !important;
}
#topbar-first #nav-notifications-menu li {
- border-color: transparent !important;
-box-sizing: border-box;
- margin: 10px;
- border-radius: 10px !important;
- width: 94% !important;
+ border-color: transparent !important;
+ box-sizing: border-box;
+ margin: 10px;
+ border-radius: 10px !important;
+ width: 94% !important;
}
#topbar-first .notification-unseen {
background-color: rgba(255,255,255,.2) !important
@@ -230,9 +363,26 @@ box-sizing: border-box;
background-color:rgba(128,128,128,.2) !important;
border-color: transparent !important;
}
+ .topbar .dropdown-header {
+ color: var(--nav-icon-color);
+ }
+ #topbar-first .topbar-nav .arrow {
+ display: none !important;
+ }
+ .topbar .dropdown-header .dropdown-header-link .btn-link {
+ border: 1px solid var(--link-color);
+ border-radius: 8px;
+ padding: 5px;
+ margin-top: -6px;
+ }
+ .topbar .dropdown-header .dropdown-header-link .btn-link:hover,
+ .topbar .dropdown-header .dropdown-header-link .btn-link:focus {
+ background-color: rgba(0,0,0,.1);
+ }
#topbar-second {
- height: 60px !important;
- background-color: var(--nav-bg) !important;
+ top: 55px;
+ height: 60px !important;
+ background-color: var(--nav-bg) !important;
border-color: #333 !important;
}
.btn.btn-primary:hover,
@@ -262,7 +412,7 @@ box-sizing: border-box;
box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
}
#jotOpen::before {
- content: 'Compose';
+ content: var(--compose-text);
font-size: 15px;
margin-right: 10px;
line-height: 32px;
@@ -270,6 +420,14 @@ box-sizing: border-box;
display: inline;
top: -4px;
}
+ body.mod-notes #jotOpen::before {
+ content: var(--new-note-text);
+ }
+ body.mod-notes .sectiontop h3::before {
+ content: '\f023';
+ font-family: ForkAwesome;
+ margin-right: 5px;
+ }
#jotOpen .fa-pencil-square-o {
font-size: 32px !important;
position: relative;
@@ -278,9 +436,37 @@ box-sizing: border-box;
#topbar-second #nav-short-info {
margin-top: 10px;
}
+ /* General Content Wrappers */
+ section > .generic-page-wrapper,
+ .videos-content-wrapper,
+ .suggest-content-wrapper,
+ .help-content-wrapper,
+ .match-content-wrapper,
+ .dirfind-content-wrapper,
+ .delegation-content-wrapper,
+ .notes-content-wrapper,
+ .message-content-wrapper,
+ .apps-content-wrapper, #adminpage,
+ .delegate-content-wrapper,
+ .uexport-content-wrapper,
+ .dfrn_request-content-wrapper,
+ .friendica-content-wrapper,
+ .credits-content-wrapper,
+ .nocircle-content-wrapper,
+ .profperm-content-wrapper,
+ .invite-content-wrapper,
+ .tos-content-wrapper,
+ .fsuggest-content-wrapper,
+ .shared-wrapper {
+ background-color: var(--content-bg) !important;
+ background-image: none;
+ border-color: #333;
+ }
/* Make Submit Buttons Pretty */
+ #adminpage a.btn,
.settings-submit,
button[type="submit"],
+ input[type="submit"],
#photos-upload-submit {
background-color: var(--link-color) !important;
color: white !important;
@@ -293,10 +479,14 @@ box-sizing: border-box;
border-radius:50px !important;
margin-top:-.5px !important;
}
+ #adminpage a.btn:hover,
+ #adminpage a.btn:focus,
.settings-submit:hover,
.settings-submit:focus,
button[type="submit"]:hover,
button[type="submit"]:focus,
+ input[type="submit"]:hover,
+ input[type="submit"]:focus,
#photos-upload-submit:hover,
#photos-upload-submit:focus{
box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
@@ -316,7 +506,8 @@ box-sizing: border-box;
.panel-footer {
background-color: var(--nav-bg) !important;
}
- .panel-footer button[type="submit"]{
+ .panel-footer button[type="submit"],
+ .panel-footer input[type="submit"] {
float: right !important;
margin-left: 5px;
}
@@ -325,47 +516,62 @@ box-sizing: border-box;
display: block;
clear: both;
}
+ #addonslist {
+ margin-top: 20px;
+ }
#settings-server button[type="submit"] {
float: right !important;
margin-left: 5px !important;
margin-bottom: 20px !important;
}
- /* Compose Window */
- #upload-photo {
- background-color: var(--link-color) !important;
- color: white !important;
- border-radius: 8px !important;
- }
- #upload-photo:hover,
- #upload-photo:focus {
- background-color: darkblue !important;
- }
-
- /* HIDE ATTACHMENT BUTTON
- =======================
- This hides the file attachment button in the Compose "Browser" tab
- because there is no way to manage/delete uploaded attachments it
- was a design choice of this theme mod to hide this button from users.
-
- If you WANT users to be able to see uploaded files and attach them
- to posts either comment out this rule or change "none" to "block"
- */
- .fbswitcher [data-mode="attachment"] {
- display: none !important;
- }
+ #settings-channels .panel {
+ padding: 0 10px 10px 10px;
+ }
+ #settings-channels button {
+ float: right;
+ }
+ #adminpage button[type="submit"],
+ input[type="submit"],
+ input[name="page_logs"],
+ input[name="republish_directory"],
+ input[name="page_tos"]{
+ float: right;
+ padding: 8px;
+ border: none;
+ }
+ .submit::after{
+ content: '';
+ display: block;
+ clear: both;
+ }
+ #photo-edit-end {
+ clear: both;
+ }
+ /* 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;
+ }
/* Other people profiles */
#mention-link {
-border-radius: 8px !important;
- background-color: var(--link-color) !important;
- color: #ffffff !important;
- border-color: #000 !important;
- box-shadow: none !important;
- padding: 0 16px !important;
+ border-radius: 8px !important;
+ background-color: var(--link-color) !important;
+ color: #ffffff !important;
+ border-color: #000 !important;
+ box-shadow: none !important;
+ padding: 0 16px !important;
}
#mention-link:hover,
#mention-link:focus {
- box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
-
+ box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
}
#mention-link span:first-of-type {
float: right;
@@ -382,7 +588,12 @@ border-radius: 8px !important;
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;
@@ -415,7 +626,7 @@ border-radius: 8px !important;
}
#search-save .fa-floppy-o::after,
#search-save .fa-plus::after{
- content: 'Save Search';
+ content: var(--save-search-text);
font-family: 'Open Sans', Arial, sans-serif;
font-size: 15px;
float: left;
@@ -426,17 +637,39 @@ border-radius: 8px !important;
top: -2px;
font-weight: 700;
}
-
#search-save .fa-floppy-o::after {
- content: 'Save Search';
+ content: var(--save-search-text);
}
#search-save .fa-plus::before {
display: inline-block;
margin-top: 2px;
}
#search-save .fa-plus::after {
- content: 'Follow Tag';
+ content: var(--follow-tag-text);
}
+ /* popovers */
+ .popover.hovercard {
+ border: 1px solid var(--nav-bg) !important;
+ -webkit-box-shadow: 0 10px 100px rgba(255, 255, 255, 0.25);
+ -moz-box-shadow: 0 10px 100px rgba(255, 255, 255, 0.25);
+ box-shadow: 0 10px 100px rgba(255, 255, 255, 0.25);
+ }
+ .hover-card-footer {
+ border-color: #333;
+ background-color: var(--nav-bg);
+ }
+ .hovercard.top > .arrow::after {
+ border-top-color: var(--nav-bg);
+ }
+ .hovercard.right > .arrow::after {
+ border-right-color: var(--nav-bg);
+ }
+ .hovercard.bottom > .arrow::after {
+ border-bottom-color: var(--nav-bg);
+ }
+ .hovercard.left > .arrow::after {
+ border-left-color: var(--nav-bg);
+ }
/* sidebar widgets */
aside .widget,
.nav-container .widget {
@@ -445,14 +678,20 @@ aside .widget,
-moz-box-shadow: none !important;
box-shadow: none !important;
}
-/* Posts */
+ aside .badge {
+ background-color: var(--link-color);
+ }
+/* POSTS */
.tread-wrapper {
- background-color: rgb(37, 39, 40) !important;
- box-shadow: 0 0px 1px rgba(0,0,0,.5) !important;
- border-radius: 10px !important;
+ background-color: var(--content-bg) !important;
+ box-shadow: 0 0px 1px rgba(0,0,0,.5) !important;
+ border-radius: 10px !important;
+}
+.wall-item-container {
+ border-top: none;
}
.wall-item-container .media {
- background-color: rgb(37, 39, 40) !important;
+ background-color: var(--content-bg) !important;
border-radius: 10px !important;
}
.wall-item-container iframe {
@@ -474,6 +713,11 @@ aside .widget,
border-radius: 100% !important;
border: 1px solid var(--nav-bg) !important;
}
+.media-list > li:hover,
+.media-list > li.selected,
+.media-list > li.active {
+ background-color: var(--background-color);
+}
.hovercard {
background-color: var(--nav-bg) !important;
border: 1px solid var(--background-color) !important;
@@ -500,6 +744,9 @@ aside .widget,
padding-left: 10px !important;
padding-right: 10px !important;
}
+ .media hr:first-of-type, aside hr, section hr {
+ border-color: var(--nav-bg);
+ }
/* keep mentions and tags from spilling out */
#profile-page .label,
#profile-page .label a,
@@ -508,7 +755,7 @@ aside .widget,
display: inline-block !important;
}
/* ACTION BUTTON LABELS */
- .wall-item-actions-row button,
+ .wall-item-actions-row button:not(.button-browser-share),
.wall-item-actions-right button {
position: relative;
display: block;
@@ -527,39 +774,44 @@ aside .widget,
.wall-item-response {
position: relative;
padding-top: 4px;
+ display: block;
}
.button-comments::after {
- content: 'Comment';
+ content: var(--comment-button-text);
}
.button-announces::after {
- content: 'Share';
+ content: var(--share-button-text);
}
.share-links .dropdown-toggle::after {
- content: 'Share';
+ content: var(--share-button-text);
}
.button-votes::after {
- content: 'Quote';
+ content: var(--quote-button-text);
}
.button-likes::after {
- content: 'Like';
+ content: var(--like-button-text);
}
[id^="dislike-"]::after{
- content: 'Dislike';
+ content: var(--dislike-button-text);
}
.wall-item-actions-right .dropdown-toggle::after,
.more-links .dropdown-toggle::after {
- content: 'More';
+ content: var(--more-button-text);
}
+ .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 {
position: absolute;
text-align: center;
display: block;
- background-color: var(--link-color);
+ background-color: var(--count-bg);
box-shadow: -1px 1px 1px #000;
border-radius: 4px;
- color: #fff;
+ color: var(--count-color);
font-size: 12px;
font-weight: 700;
width: fit-content;
@@ -568,40 +820,40 @@ aside .widget,
top: 0px;
z-index: 1;
}
- /* this is some freaking ALCHEMY! */
- .vote-event:not(:has(.wall-item-response:empty)) {
+ /* Event Response Buttons */
+ .vote-event:has(button) {
padding-bottom: 135px;
}
- .vote-event .wall-item-response {
+ .vote-event:has(button) .wall-item-response {
position: absolute;
top: 63px;
}
.vote-event .wall-item-response:empty{
display: none;
}
- .vote-event .wall-item-response:nth-of-type(1){
+ .vote-event:has(button) .wall-item-response:nth-of-type(1){
left: 15px;
}
.vote-event .wall-item-response:nth-of-type(1) .button-event::after,
- [id^="attendyes"]::after{
- content: 'Going';
+ .wall-item-actions-row [id^="attendyes"]::after{
+ content: var(--attendyes-button-text);
}
- .vote-event .wall-item-response:nth-of-type(2){
+ .vote-event:has(button) .wall-item-response:nth-of-type(2){
left: 105px;
}
.vote-event .wall-item-response:nth-of-type(2) .button-event::after,
- [id^="attendno"]::after{
- content: 'Can\'t Go';
+ .wall-item-actions-row [id^="attendno"]::after{
+ content: var(--attendno-button-text);
position: relative;
height: 20px;
overflow: hidden; /* or skews mobile button layout */
}
- .vote-event .wall-item-response:nth-of-type(3){
+ .vote-event:has(button) .wall-item-response:nth-of-type(3){
left: 204px;
}
.vote-event .wall-item-response:nth-of-type(3) .button-event::after,
- [id^="attendmaybe"]::after{
- content: 'Maybe';
+ .wall-item-actions-row [id^="attendmaybe"]::after{
+ content: var(--attendmaybe-button-text);
}
/* prevent "Like Like" and "Dislike Dislike" on photos */
#photo-view-wrapper .wall-item-actions .button-likes {
@@ -653,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 {
@@ -662,11 +918,14 @@ aside .widget,
}
.wall-item-comment-wrapper {
border: none;
+ box-shadow: none;
}
.photo-comment-wrapper .btn-sm,
#profile-jot-wrapper .btn-sm,
.wall-item-comment-wrapper .btn-sm {
background-color: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
color: var(--nav-icon-color);
height: 45px;
width: 45px;
@@ -706,13 +965,15 @@ aside .widget,
border-color: transparent !important;
background-color: transparent !important;
}
-
+ .fbrowser-content-container.justified-gallery {
+ max-height: 100% !important;
+ }
#jot-title,
#jot-category {
background-color: rgb(51,51,52) !important;
}
- #profile-jot-text, #profile-jot-wrapper textarea,
- #jot-location,
+ #profile-jot-text, #profile-jot-wrapper textarea,
+ #jot-location,
.wall-item-comment-wrapper textarea {
background-color: rgb(51, 51, 52) !important;
}
@@ -741,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;
@@ -764,7 +1024,29 @@ aside .widget,
border-radius: none !important;
background-color: transparent;
}
-/* Profile */
+ /* file browser */
+ #upload-photo {
+ background-color: var(--link-color) !important;
+ color: white !important;
+ border-radius: 8px !important;
+ }
+ #upload-photo:hover,
+ #upload-photo:focus {
+ background-color: darkblue !important;
+ }
+ body.mod-settings .panel-body {
+ background-color: var(--nav-bg);
+ border-radius: 10px;
+ border-top: none !important;
+ }
+ .help-block {
+ color: var(--font-color-darker);
+ }
+ /* HIDE ATTACHMENT BUTTON */
+ .fbswitcher [data-mode="attachment"] {
+ display: var(--attach-file-button) !important;
+ }
+/* PROFILE */
#profile-photo-wrapper {
overflow: visible !important;
padding: 5px;
@@ -783,20 +1065,41 @@ aside .widget h3.p-name {
font-size: 32px !important;
text-align: center;
word-break: break-word;
-}
+ text-shadow: 1px 1px 2px var(--background-color), -1px -1px 2px var(--background-color), 1px -1px 2px var(--background-color), -1px 1px 2px var(--background-color);
+ }
aside .vcard .p-addr {
font-weight: 600;
text-align: center;
white-space: break-spaces !important;
+ background-color: var(--background-color);
+ border-radius: 8px;
}
+ aside .vcard .title,
+ aside .vcard .location,
+ aside .vcard .key,
+ aside .vcard .about,
+ aside .vcard .xmpp,
+ aside .vcard .matrix,
+ aside .vcard .homepage,
+ aside .vcard .account-type {
+ background-color: var(--background-color);
+ padding: 5px;
+ border-radius: 8px;
+ min-width: 100%;
+ margin: 10px 0;
+ }
aside .widget li.selected {
background-color: var(--menu-background-hover-color) !important;
+ /* auto has background-image here */
border-color: transparent !important;
border-radius: 8px;
}
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;
@@ -820,23 +1123,108 @@ aside .widget li:hover {
}
.comment-fake-form textarea {
border-radius: 50px !important;
- background-color: rgb(51, 51, 52) !important;
- box-shadow: none !important;
+ background-color: var(--comment-bg) !important;
-webkit-box-shadow: none !important;
+ box-shadow: none !important;
}
.wall-item-actions button {
font-size: 24px !important;
- color: #B0B3B8 !important;
+ color: var(--nav-icon-color) !important;
}
- .wall-item-actions button:hover {
- color: var(--link-color) !important;
- }
+ .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: rgb(51, 51, 52);
+ background-color: var(--comment-bg);
border-radius: 20px;
}
.wall-item-actions-row .wall-item-emoji {
@@ -848,10 +1236,75 @@ aside .widget li:hover {
position: relative;
top: 1px;
}
+ .wall-item-actions ul button,
+ .wall-item-actions ul a {
+ font-size: 14px !important;
+ color: inherit !important;
+ line-height: 14px !important;
+ margin: 0 !important;
+ }
+ /* little vcard when you scroll down on profiles */
+ #vcard-short-desc * {
+ color: var(--font-color) !important;
+ }
+ #vcard-short-photo-wrapper img,
+ #nav-short-info .contact-wrapper img {
+ border-radius: 100% !important;
+ }
+ /* Profile Cover Photo */
+ .row:has(.coverphoto) aside,
+ .row:has(.coverphoto) #content {
+ margin-top: 350px;
+ }
+ .row:has(.coverphoto) aside .widget.vcard {
+ background-color: transparent !important;
+ }
+ .coverphoto {
+ position: fixed;
+ top: 115px;
+ left: 0 !important;
+ right: 0 !important;
+ z-index: -1;
+ height: 500px;
+ overflow: hidden;
+ }
+ .coverphoto img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+ }
+ .coverphoto:has(> :last-child:nth-child(2)) img {
+ height: 50%;
+ }
+ .coverphoto:has(> :last-child:nth-child(3)) img {
+ height: 33.3333%;
+ }
+ .coverphoto:has(> :last-child:nth-child(n+4)) img {
+ height: 25%;
+ }
+ /* 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
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
box-shadow: 0 0 1px rgba(255,255,255,.5);
+ */
border-radius: 100%;
position: relative;
padding: 6px 4px;
@@ -859,7 +1312,7 @@ aside .widget li:hover {
width: 35px;
display: block;
}
- .plink.ul-url:hover {
+ .plink.u-url:hover {
background-color: rgba(255,255,255,.1) !important;
text-decoration: none !important;
}
@@ -878,7 +1331,37 @@ aside .widget li:hover {
/* Calendar */
.fc-unthemed td.fc-today {
background-color: var(--menu-background-hover-color);
+ /* auto has background-image here */
}
+.event-buttons .btn {
+ background-color: var(--link-color);
+ color: #fff;
+ border-radius: 100%;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ font-size: 18px;
+ padding: 0;
+ margin-right: 5px;
+}
+ .event-buttons .btn:hover,
+ .event-buttons .btn:focus {
+ color: #fff;
+ box-shadow: inset 0 0 100px rgba(0,0,0,.1);
+ }
+ .fc .fc-event {
+ background-color: var(--link-color);
+ border: none;
+ color: white;
+ }
+ .fc .fc-month-view .fc-content .fc-title .item-desc:hover,
+ .fc .fc-month-view .fc-content .fc-title .item-desc:focus {
+ color: white;
+ }
+ .fc .fc-event:hover,
+ .fc .fc-event:focus {
+ box-shadow: inset 0 0 100px rgba(0,0,0,.2);
+ }
/* Photo Albums */
.photo-album-actions .icon-padding,
.photo-edit-link-wrap .icon-padding {
@@ -932,7 +1415,7 @@ aside .widget li:hover {
background-color: rgba(255,255,255,.1) !important;
}
.photos-content-wrapper .photos-upload-link::before {
- content: 'Add Photos';
+ content: var(--add-photo-button-text);
font-size: 15px;
vertical-align: middle;
margin-top: -10px;
@@ -940,6 +1423,11 @@ aside .widget li:hover {
}
.justified-gallery {
overflow: visible !important;
+ height: auto !important;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: start;
}
.justified-gallery > a,
.justified-gallery > div,
@@ -967,6 +1455,7 @@ aside .widget li:hover {
}
#photo-photo {
margin: 0 auto !important;
+ max-width: 100%;
}
#photos-upload-perms button[data-toggle="modal"] {
background-color: rgba(255,255,255,.2) !important;
@@ -981,7 +1470,462 @@ aside .widget li:hover {
#photos-upload-perms button[data-toggle="modal"]:focus {
background-color: rgba(255,255,255,.1) !important;
}
-
+/* ADD-ONS */
+.advancedcontentfilter-content-wrapper table td:nth-of-type(2) {
+ word-wrap: anywhere;
+}
+.advancedcontentfilter-content-wrapper pre {
+ margin-top: 20px;
+}
+/* calculator addon */
+.calc-content-wrapper table {
+ margin: 0 auto;
+ color: #333;
+}
+.calc-content-wrapper td[colspan='5']::after {
+ content: ' ';
+ height: 50px;
+ width: 260px;
+ background-color: black;
+ display: block;
+}
+ .calc-content-wrapper input[type='button']{
+ appearance: none;
+ height: 50px;
+ width: 100%;
+ border: 1px solid #666;
+ color: white;
+ font-size: 18px;
+ font-weight: bold;
+ background-color: #999;
+ text-align: center;
+ }
+ .calc-content-wrapper input[type='button']:active {
+ box-shadow: inset 0 0 100px rgba(255,255,255,.2);
+ }
+.calc-content-wrapper input[name='plus'],
+.calc-content-wrapper input[name='minus'],
+.calc-content-wrapper input[name='multiplication'],
+.calc-content-wrapper input[name='division'],
+.calc-content-wrapper input[name='enter']{
+ background-color: orange;
+}
+ .calc-content-wrapper input[name='plus']:active,
+ .calc-content-wrapper input[name='minus']:active,
+ .calc-content-wrapper input[name='multiplication']:active,
+ .calc-content-wrapper input[name='division']:active,
+ .calc-content-wrapper input[name='enter']:active{
+ box-shadow: inset 0 0 100px rgba(0,0,0,.2);
+ }
+.calc-content-wrapper input[name='plus']{
+ padding-left: 10px;
+}
+.calc-content-wrapper input[name='multiplication']{
+ padding-left: 14px;
+}
+.calc-content-wrapper input[name='clear'],
+.calc-content-wrapper input[name='sqareroot'],
+.calc-content-wrapper input[name='squarex'],
+.calc-content-wrapper input[name='deg-rad'],
+.calc-content-wrapper input[name='rad-deg'],
+.calc-content-wrapper input[name='sine'],
+.calc-content-wrapper input[name='arcsine'],
+.calc-content-wrapper input[name='cosine'],
+.calc-content-wrapper input[name='arccosine']{
+ background-color: #666;
+}
+.calc-content-wrapper #display {
+ appearance: none;
+ font-size: 36px;
+ font-weight: lighter;
+ text-align: right;
+ color: #eee;
+ background-color: #666;
+ border: none;
+ display: block;
+ width: 260px;
+ position: absolute;
+}
+ /* 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;
+ left: 10px;
+ background-color: var(--link-color);
+ color: #ffffff;
+ width: 50px;
+ height: 50px;
+ line-height: 50px;
+ text-align: center;
+ font-size: 24px;
+ border-radius: 100%;
+}
+#item-delete-selected {
+ height: 50px;
+ width: 50px;
+ line-height: 50px;
+ font-size: 24px;
+ background-color: var(--link-color);
+ border-radius: 100%;
+ top: 120px;
+}
+ #item-delete-selected:hover,
+ #item-delete-selected:focus {
+ box-shadow: inset 0 0 100px rgba(0,0,0,.2);
+ }
+ /* Profile pics in Messages and Events */
+ .event-wrapper .event-owner img,
+ .mail-conv-wrapper .media .contact-photo-wrapper img,
+ .mail-list-outside-wrapper .contact-photo-wrapper img {
+ border-radius: 100%;
+ }
+ #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;
+}
+/* TAGS, CATEGORIES, MENTIONS BUTTONS
+ ==================================
+ Restyled to be less obnoxious and tiny
+ now sized and spaced like they are on Mastodon
+*/
+a.tag.label,
+.wall-item-container .wall-item-bottom .wall-item-tags span.label {
+ border-radius: 4px !important;
+ display: inline-flex !important;
+ font-size: 12px !important;
+ font-weight: 500 !important;
+ padding: 6px 12px !important;
+ -webkit-text-decoration: none !important;
+ text-decoration: none !important;
+ margin: 2px !important;
+ background-image: none !important;
+ background-color: transparent !important;
+ box-shadow: none !important;
+ color: #05d8fb !important;
+ border: 1px solid #05d8fb;
+ text-shadow: none !important;
+}
+ .wall-item-bottom .label {
+ color: inherit;
+ }
+ .wall-item-bottom .label a {
+ color: inherit;
+ }
+ /* hide lightning bolt and person icons
+ pretty sure people know what "#" and "@" mean now
+ */
+ a.tag.label .fa-bolt::before,
+ .wall-item-bottom .label .fa-bolt::before {
+ content: '';
+ }
+ .wall-item-bottom .label .fa-user::before{
+ content: '';
+ }
+ /* undo hover for entire container*/
+ .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
+ filter: grayscale(0.5);
+ opacity: 0.8;
+ -webkit-transition: 0s;
+ -moz-transition: 0s;
+ -ms-transition: 0s;
+ transition: 0s;
+ }
+ /* replace with hover for individual tag */
+ .wall-item-container .wall-item-bottom .wall-item-tags span.label:hover,
+ .wall-item-container .wall-item-bottom .wall-item-tags span.label:focus,
+ .wall-item-container .wall-item-bottom .wall-item-tags span.label:focus-within {
+ filter: grayscale(0) !important;
+ opacity: 1 !important;
+ /* probably don't need vendor prefixed anymore but whatever...*/
+ -webkit-transition: all 0.25s ease-in-out !important;
+ -moz-transtion: all 0.25s ease-in-out !important;
+ -ms-transition: all 0.25s ease-in-out !important;
+ transition: all 0.25s ease-in-out !important;
+ }
+ /* Hashtag Buttons */
+ a.tag.label.btn-info,
+ .wall-item-bottom .wall-item-tags .tag.label.btn-info {
+ /* inherits everything from above */
+ }
+ a.tag.label.btn-info:hover, a.tag.label.btn-info:focus,
+ .wall-item-bottom .wall-item-tags .tag.label.btn-info:hover,
+ .wall-item-bottom .wall-item-tags .tag.label.btn-info:focus {
+ background-color: #05d8fb !important;
+ color: black !important;
+ }
+ /* Category Buttons */
+ .wall-item-bottom .wall-item-tags .category.label.btn-success {
+ border-color: limegreen !important;
+ color: limegreen !important;
+ font-size: 12px;
+ }
+ /* replace (x) remove with icon button */
+ .wall-item-bottom .wall-item-tags .category.label.btn-success a:first-of-type {
+ margin-right: 4px;
+ }
+ .wall-item-bottom .wall-item-tags .category.label.btn-success a:last-of-type {
+ font-size: 0px;
+ }
+ .wall-item-bottom .wall-item-tags .category.label.btn-success a:last-of-type::after {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ font-size: 12px;
+ }
+ .wall-item-bottom .wall-item-tags .category.label.btn-success:hover,
+ .wall-item-bottom .wall-item-tags .category.label.btn-success:focus {
+ background-color: limegreen !important;
+ color: black !important;
+ }
+ /* when a category is removed need to visually indicate it */
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success){
+ border-color: #ccc !important;
+ color: #ccc !important;
+ }
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:first-of-type{
+ font-size: 12px;
+ text-decoration: line-through;
+ margin-right: 4px;
+ }
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type {
+ font-size: 0px;
+ }
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type::after {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ font-size: 12px;
+ text-decoration: line-through;
+ }
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):hover,
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):focus {
+ background-color: red !important;
+ color: #ccc !important;
+ }
+ /* overrides for Saved File page where buttons structure is different */
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success {
+ font-size: 12px !important;
+ }
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success a {
+ font-size: 0px !important;
+ margin: 0px;
+ }
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success a::after {
+ margin-left: 0px;
+ }
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success){
+ font-size: 12px !important;
+ text-decoration: line-through !important;
+ }
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a {
+ font-size: 0px !important;
+ }
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a::after {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ font-size: 12px;
+ text-decoration: line-through;
+ }
+ /* Folder Buttons */
+ .wall-item-bottom .wall-item-tags .folder.label.btn-danger {
+ border-color: hotpink !important;
+ color: hotpink !important;
+ }
+ /* replace (x) remove with icon button */
+ .wall-item-bottom .wall-item-tags .folder.label.btn-danger a:first-of-type{
+ font-size: 0px;
+ }
+ .wall-item-bottom .wall-item-tags .folder.label.btn-danger a:last-of-type::after {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ font-size: 12px;
+ }
+ .wall-item-bottom .wall-item-tags .folder.label.btn-danger:hover,
+ .wall-item-bottom .wall-item-tags .folder.label.btn-danger:focus {
+ background-color: hotpink !important;
+ color: black !important;
+ }
+ /* when a category is removed need to visually indicate it */
+ .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger){
+ border-color: #ccc !important;
+ color: #ccc !important;
+ text-decoration: line-through !important;
+ }
+ .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger) a:first-of-type{
+ font-size: 0px;
+ }
+ .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger) a:last-of-type::after {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ font-size: 12px;
+ }
+ .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger):hover,
+ .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger):focus{
+ background-color: black !important;
+ color: white !important;
+ }
+ /* @ Mention Buttons */
+ .wall-item-bottom .wall-item-tags .mention.label.btn-warning {
+ border-color: gold !important;
+ color: gold !important;
+ }
+ .wall-item-bottom .wall-item-tags .mention.label.btn-warning:hover,
+ .wall-item-bottom .wall-item-tags .mention.label.btn-warning:focus {
+ background-color: gold !important;
+ border-color: gold !important;
+ color: black !important;
+ }
+ /* Content Filter Buttons */
+ button.content-filter-button {
+ color: var(--link-color);
+ background-color: transparent;
+ border: 1px solid var(--link-color);
+ }
+ /* Comment buttons on other peple's profile Conversations */
+ a.btn-link.button-comments {
+ width: fit-content;
+ text-align:center !important;
+ display: block;
+ margin-top:10px;
+ color: var(--nav-icon-color) !important;
+ }
+ a.btn-link.button-comments:hover {
+ text-decoration: none;
+ color: var(--link-color) !important;
+ }
+ a.btn-link.button-comments .fa {
+ width: 50px;
+ display: block;
+ margin: 0 auto;
+ }
+ a.btn-link.button-comments .fa::before {
+ font-size: 24px;
+ }
+ a.btn-link.button-comments::after {
+ font-size: 14px !important;
+ position: relative;
+ top: 5px;
+ }
+ /* 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
+ ===========================
+*/
+@media screen and (min-width: 1921px){
+ .coverphoto {
+ max-width: 1920px;
+ left: 50% !important;
+ margin-left: -960px;
+ border-bottom-right-radius: 10px;
+ border-bottom-left-radius: 10px;
+ }
+}
+/* Small Laptop Screens
+ Some tablets in Landscape Orientation
+ =====================================
+*/
@media screen and (max-width: 1280px) {
#search-box {
width: 18% !important;
@@ -990,46 +1934,1014 @@ aside .widget li:hover {
width: 140px !important;
}
}
+/* Frio breakpoints for smaller profile pic */
+@media screen and (min-width:991px) and (max-width:1199px){
+ .contact-block-img {
+ height: 75px !important;
+ width: 75px !important;
+ }
+ /* Contact Notification Action Buttons */
+ .intro-actions {
+ position: relative;
+ float: none !important;
+ }
+}
+/* Large Tablets in Portrait Orientation
+ =====================================
+*/
@media screen and (max-width: 991px){
+ /* Friendica icon upper left */
+ #banner {
+ display: block !important;
+ padding: 0 !important;
+ margin: 8px 10px;
+ }
+ #friendica-logo-mask {
+ display: block !important;
+ }
+ /* hide search box - no room */
#search-box {
- left: 15%;
+ display: none;
}
+ /* show mobile search toggle */
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]{
+ display: block !important;
+ position: fixed !important;
+ left: 100px;
+ top: 6px;
+ }
+ /* force display of mobile search box */
+ #search-mobile {
+ top: 110px !important;
+ border-color: black;
+ }
+ #search-mobile .col-xs-12 {
+ background-color: var(--nav-bg);
+ }
+ #search-mobile.collapse.in,
+ #search-mobile.collapse.in * {
+ display: block !important;
+ }
+ #topbar-first .navbar-toggle[data-target="aside"] {
+ position: fixed;
+ top: 6px;
+ left: 50px;
+ }
+ /* change aside toggle icon */
+ .navbar-toggle .fa-ellipsis-v::before,
+ #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before {
+ content: "\f152";
+ }
+ body.aside-out .navbar-toggle .fa-ellipsis-v::before,
+ body.aside-out #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before {
+ content: "\f191";
+ }
+ #topbar-first .nav > .account {
+ right: 24px;
+ }
#jotOpen::before {
content: '';
margin: 0;
}
+ #mention-link {
+ padding: 0 8px !important;
+ }
#mention-link span:last-of-type {
- margin-right: 42px;
+ display: none;
}
-}
-@media screen and (max-width: 768px){
- #topbar-first .navbar-toggle[data-target="#search-mobile"]{
- position: fixed !important;
- left: 15%;
+ .offcanvas-right-overlay,
+ aside::before {
+ background-color: rgba(0, 0, 0, 0.4);
}
- #search-mobile {
- top: 110px !important;
- }
- .wall-item-container iframe {
- aspect-ratio: 5/4;
- }
-}
-@media screen and (max-width: 480px){
- #topbar-first .navbar-toggle[data-target="#search-mobile"]{
- left: 10%;
+ /* Profile Aside Mobile */
+ body.mod-contact #content,
+ body.mod-profile #content,
+ body.mod-photos #content {
+ margin-top: 350px;
}
- .topbar ul.nav {
- position: relative !important;
- left: 10% !important;
- margin-left: 0!important;
+ /* only seen on your own Recent Photos page */
+ body.mod-profile #sidebar-photos-albums::before {
+ content: '\f083';
+ font-family: ForkAwesome;
+ font-size: 150px;
+ position: fixed;
+ top: 175px;
+ left: 0;
+ right: 0;
+ text-align: center;
+ color: var(--nav-icon-color);
+ opacity: .5;
+ z-index: -1;
+ transition-duration: .5s;
+ transition-property: left;
+ }
+ body.mod-profile aside.canvas-sliding #sidebar-photos-albums::before,
+ body.mod-profile aside.canvas-slid #sidebar-photos-albums::before {
+ left: 50%;
+ }
+ /* hide camera icon on other profile Recent Photos pages */
+ body.mod-profile .vcard + #sidebar-photos-albums::before {
+ content: '';
+ }
+
+ /* 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 {
+ margin-top: 0px !important;
+ left: -300px !important;
+ right: auto !important;
+ display: block !important;
+ padding-top: 120px;
+ transition-duration: .5s !important;
+ z-index: auto;
}
+ body.mod-contact aside.canvas-slid,
+ body.mod-photos aside.canvas-slid,
+ body.mod-profile aside.canvas-slid {
+ left: 0px !important;
+ right: auto !important;
+ z-index: 20;
+ }
+ body.mod-contact aside #profile-photo-wrapper,
+ body.mod-photos aside #profile-photo-wrapper,
+ body.mod-profile aside #profile-photo-wrapper {
+ position: fixed;
+ top: 150px;
+ left: 50%;
+ height: 150px;
+ width: 150px;
+ margin-left: -75px;
+ transition-timing-function: ease-in-out;
+ transition-duration: .3s;
+ transition-property: all;
+ }
+ body.mod-contact .profile-header h3.p-name,
+ body.mod-photos .profile-header h3.p-name,
+ body.mod-profile .profile-header h3.p-name {
+ position: fixed;
+ width: 100%;
+ top: 300px;
+ left: 50%;
+ margin-left: -50%;
+ transition-timing-function: ease-in-out;
+ transition-duration: .3s;
+ transition-property: all;
+
+ }
+ body.mod-contact .profile-header .p-addr,
+ body.mod-photos .profile-header .p-addr,
+ body.mod-profile .profile-header .p-addr {
+ position: fixed;
+ width: 50%;
+ top: 400px;
+ left: 50%;
+ margin-left: -25%;
+ transition-timing-function: ease-in-out;
+ transition-duration: .3s;
+ transition-property: all;
+ }
+ /* bounce effect */
+ body.mod-contact aside.canvas-sliding #profile-photo-wrapper,
+ body.mod-photos aside.canvas-sliding #profile-photo-wrapper,
+ body.mod-profile aside.canvas-sliding #profile-photo-wrapper {
+ margin-left: -150px;
+ }
+ body.mod-contact aside.canvas-sliding .profile-header h3.p-name,
+ body.mod-photos aside.canvas-sliding .profile-header h3.p-name,
+ body.mod-profile aside.canvas-sliding .profile-header h3.p-name {
+ margin-left: calc(-50% - 75px);
+ }
+ body.mod-contact aside.canvas-sliding .profile-header .p-addr,
+ body.mod-photos aside.canvas-sliding .profile-header .p-addr,
+ body.mod-profile aside.canvas-sliding .profile-header .p-addr {
+ margin-left: -300px;
+ }
+ /* centered in right-hand side */
+ body.mod-contact aside.canvas-slid #profile-photo-wrapper,
+ body.mod-photos aside.canvas-slid #profile-photo-wrapper,
+ body.mod-profile aside.canvas-slid #profile-photo-wrapper {
+ margin-left: -225px;
+ }
+ body.mod-contact aside.canvas-slid .profile-header h3.p-name,
+ body.mod-photos aside.canvas-slid .profile-header h3.p-name,
+ body.mod-profile aside.canvas-slid .profile-header h3.p-name {
+ margin-left: calc(-50% - 150px);
+ }
+ body.mod-contact aside.canvas-slid .profile-header .p-addr,
+ body.mod-photos aside.canvas-slid .profile-header .p-addr,
+ body.mod-profile aside.canvas-slid .profile-header .p-addr {
+ margin-left: calc(-25% - 150px);
+ }
+ /* Cover Photo Mobile */
+ .coverphoto.canvas-sliding,
+ .coverphoto.canvas-slid{
+ left: 0px !important;
+ right: 0px !important;
+ bottom: 0px;
+ background-color: var(--background-color);
+ overflow: visible;
+ }
+ .coverphoto.canvas-slid::after {
+ content: '';
+ position: absolute;
+ top: 500px;
+ left: 0px;
+ width: 100%;
+ height: 500%;
+ 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
+ Some Small tablets in Portrait Orientation
+ ======================================
+*/
+@media screen and (max-width: 768px), (max-height: 480px) and (max-width: 960px) and (orientation: landscape) {
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]{
+ left: 10%;
+ }
+ .topbar ul.nav {
+ position: relative !important;
+ left: 10% !important;
+ margin-left: 0!important;
+ }
#search-save {
width: 100px !important;
}
#search-save .fa-plus::after {
- content: 'Follow';
+ content: var(--follow-button-text);
}
#search-save .fa-floppy-o::after {
- content: 'Save';
+ content: var(--save-button-text);
}
-}
\ No newline at end of file
+ a.wall-item-name-link, span.fakelink {
+ font-weight: bold;
+ }
+ .wall-item-container iframe {
+ aspect-ratio: 5/4;
+ }
+ /* new mobile layout */
+ body {
+ padding-top: 65px !important;
+ padding-bottom: 55px !important;
+ }
+
+ /* Friendica icon upper left */
+ #banner {
+ display: block !important;
+ padding: 0 !important;
+ margin: 8px 10px !important;
+ }
+ #friendica-logo-mask {
+ display: block !important;
+ }
+ #topbar-first {
+ top: auto;
+ bottom: 0;
+ box-shadow: 2px 0px 5px rgba(0,0,0,.5);
+ }
+ #topbar-first .topbar-nav .arrow {
+ display: none;
+ }
+ /* re-reveal the user profile toggle */
+ #topbar-first .nav > .account {
+ position: fixed;
+ display: block !important;
+ top: 0;
+ right: 8px;
+ }
+ #topbar-first .nav > .account img {
+ margin: 0;
+ }
+ #topbar-first .nav > .account span.caret {
+ display: none;
+ }
+ /* overlay mobile nav toggle invisibly */
+ #topbar-first .offcanvas-right-toggle {
+ position: fixed;
+ top: -3px;
+ right: 7px;
+ color: transparent;
+ z-index: 10000;
+ }
+ /* move sidebar toggle to bottom bar */
+ #topbar-first .navbar-toggle[data-target="aside"]{
+ position: fixed;
+ top: auto;
+ left: auto;
+ bottom: 5px;
+ }
+ /* change icon */
+ .navbar-toggle .fa-ellipsis-v::before,
+ #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before {
+ content: "\f152";
+ }
+ body.aside-out .navbar-toggle .fa-ellipsis-v::before,
+ body.aside-out #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before {
+ content: "\f191";
+ }
+ /* move search button right */
+ #topbar-first .navbar-toggle[data-target="#search-mobile"] {
+ position: relative !important;
+ display: block !important; /* show in landscape on phones */
+ top: 0;
+ left: auto;
+ right: auto;
+ margin: 0;
+ }
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed){
+ color: var(--link-color);
+ border-bottom: 3px solid var(--link-color);
+ background-color: transparent !important;
+ border-radius: 0 !important;
+ margin-top: 0px;
+ }
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed) .fa-search::before {
+ content: '\f00e';
+ }
+ /* fix spacing of icons */
+ .topbar ul.nav {
+ position: absolute !important;
+ left: 50px !important;
+ right: 50px !important;
+ display: flex;
+ justify-content: space-between;
+ }
+ #topbar-first .topbar-nav .nav-segment {
+ margin: 0px;
+ }
+ #search-mobile {
+ top: 60px !important;
+ }
+ /* always show on phones in landscape */
+ #search-mobile.collapse.in,
+ #search-mobile.collapse.in * {
+ display: block !important;
+ }
+ /* app-style notification menu */
+ #nav-notifications-menu {
+ position: fixed;
+ top: 60px;
+ bottom: 51px;
+ left: 0;
+ right: 0;
+ width: 100% !important;
+ min-width: unset;
+ max-width: unset;
+ min-height: unset;
+ max-height: unset !important;
+ margin: 0 !important;
+ box-shadow: none;
+ }
+ #nav-notifications-menu::before {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ position: absolute;
+ top: 8px;
+ right: 12px;
+ height: 40px;
+ width: 40px;
+ background-color: var(--link-color);
+ color: white;
+ font-size: 24px;
+ border-radius: 100%;
+ line-height: 40px;
+ text-align: center;
+ display: block;
+ }
+ #offcanvasUsermenu {
+ background-color: var(--nav-bg) !important;
+ }
+ #offcanvasUsermenu ul.list-group {
+ -webkit-box-shadow: none !important;
+ -moz-box-shadow: none !important;
+ box-shadow: none !important;
+ }
+ #offcanvasUsermenu ul.list-group li:first-of-type img {
+ max-width: unset !important;
+ max-height: unset !important;
+ height: 40px !important;
+ width: 40px !important;
+ border-radius: 100% !important;
+ }
+ #offcanvasUsermenu li.divider {
+ display: none !important;
+ }
+ #offcanvasUsermenu li.list-group-item,
+ #offcanvasUsermenu li.list-group-item a {
+ border: transparent !important;
+ background-color: transparent !important;
+ color: var(--nav-icon-color) !important;
+ width: 90% !important;
+ margin: 0 auto;
+ }
+ #offcanvasUsermenu li.list-group-item:hover {
+ background-color: #333 !important;
+ border-radius: 8px !important;
+ }
+ #offcanvasUsermenu li.list-group-item:hover a {
+ color: #fff !important;
+ }
+ #offcanvasUsermenu li.list-group-item:first-of-type:hover {
+ background-color: revert !important;
+ }
+ /* force mobile search in landscape on phones */
+ #search-box {
+ display: none !important;
+ }
+ /* position delete button */
+ #item-delete-selected {
+ top: 60px;
+ right: 10px;
+ }
+ /* move top bars around */
+ #topbar-second {
+ top: 0px;
+ padding: 0;
+ }
+ #topbar-second div.container{
+ position: absolute;
+ left: 55px;
+ right: 55px;
+ }
+ #topbar-second #tabmenu {
+ width: 100%;
+ }
+ /* override and show mobile tabs in landscape */
+ #topbar-second #tabmenu ul.tabbar.hidden-xs {
+ display: none !important;
+ }
+ #topbar-second #tabmenu ul.tabbar.visible-xs {
+ display: block !important;
+ }
+ #topbar-second ul.tabbar {
+ text-align: center;
+ max-width: 100%;
+ }
+ #topbar-second ul.tabbar > li:first-of-type {
+ max-width: 75%;
+ overflow: hidden;
+ margin-right: 50px;
+ }
+ #topbar-second ul.tabbar li:first-of-type ul.tabs {
+ max-width: 100%;
+ }
+ #topbar-second ul.tabbar li:first-of-type ul.tabs li {
+ width: 100%;
+ height: 100%;
+ }
+ #topbar-second ul.tabbar li:first-of-type ul.tabs li a {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ /* prevent dropdown being pushed off toolbar */
+ #topbar-second ul.tabbar > li:last-of-type {
+ margin-left: -50px;
+ border-bottom: 4px solid var(--link-color);
+ }
+ #topbar-second ul.tabbar > li:last-of-type li.dropdown {
+ margin-left: 0px !important;
+ }
+ #dropdownMenuTools-xs {
+ height: 60px;
+ }
+ ul.tabs-extended .dropdown.open .fa-chevron-down::before{
+ content: '\f077';
+ }
+ #jotOpen, #search-save, #mention-link {
+ position: fixed;
+ bottom: 65px;
+ right: 10px;
+ border-radius: 100% !important;
+ height: 50px;
+ width: 50px !important;
+ line-height: 50px;
+ border: none !important;
+ box-shadow: none !important;
+ }
+ #mention-link span:last-of-type {
+ display: none;
+ }
+ #mention-link span:first-of-type {
+ float: none;
+ position: relative;
+ top: 2px;
+ }
+ #search-save .fa-plus::after,
+ #search-save .fa-floppy-o::after {
+ display: none;
+ }
+ #search-save .fa-plus::before,
+ #search-save .fa-floppy-o::before {
+ content: '\f0c7' !important;
+ }
+ .fa-edit::before,
+ .fa-pencil-square-o::before {
+ content: "\f040";
+ }
+ .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;
+ top: 58px;
+ left: 0px;
+ right: 0px;
+ bottom: 50px;
+ width: 100% !important;
+ overflow: auto !important;
+ overflow-x: hidden !important;
+ }
+ #topbar-second .dropdown-menu li {
+ height: auto !important;
+ }
+ #topbar-second .dropdown-menu li a,
+ .tabs .dropdown-menu li a {
+ font-size: 18px !important;
+ }
+ .topbar .dropdown-header {
+ font-size: 18px !important;
+ }
+ .topbar .dropdown-header .dropdown-header-link .btn-link {
+ font-size: 18px !important;
+ margin-right: 40px;
+ }
+ aside.offcanvas-xs {
+ padding-top: 60px;
+ padding-bottom: 60px;
+ }
+ body.mod-profile #sidebar-photos-albums::before {
+ top: 125px;
+ }
+ body.mod-contact aside #profile-photo-wrapper,
+ body.mod-photos aside #profile-photo-wrapper,
+ body.mod-profile aside #profile-photo-wrapper {
+ top: 100px;
+ }
+ body.mod-contact .profile-header h3.p-name,
+ body.mod-photos .profile-header h3.p-name,
+ body.mod-profile .profile-header h3.p-name {
+ top: 255px;
+ }
+ body.mod-contact .profile-header .p-addr,
+ body.mod-photos .profile-header .p-addr,
+ body.mod-profile .profile-header .p-addr {
+ top: 345px;
+ }
+ .coverphoto,
+ .coverphoto.canvas-sliding,
+ .coverphoto.canvas-slid {
+ top: 55px;
+ }
+ #message-new a {
+ height: 50px;
+ width: 50px;
+ background-color: var(--link-color);
+ line-height: 50px;
+ font-size: 24px;
+ text-align: center;
+ border-radius: 100%;
+ display: block;
+ color: white;
+ padding: 0;
+ }
+ #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)
+ =========================================
+*/
+@media screen and (max-width: 600px) and (orientation: portrait) {
+ body.mod-contact aside,
+ body.mod-photos aside,
+ body.mod-profile aside {
+ left: -100% !important;
+ right: 0% !important;
+ max-width: 100% !important;
+ width: 100% !important;
+ padding-top: 60px;
+ background-color: var(--background-color) !important;
+ }
+ /* only seen on your own Recent Photos page */
+ body.mod-profile #sidebar-photos-albums::before {
+ transition-property: top;
+ }
+ body.mod-profile aside.canvas-sliding #sidebar-photos-albums::before,
+ body.mod-profile aside.canvas-slid #sidebar-photos-albums::before {
+ left: 0px;
+ top: 150%;
+ }
+ body.mod-contact aside.canvas-slid,
+ body.mod-photos aside.canvas-slid,
+ body.mod-profile aside.canvas-slid {
+ left: 0px !important;
+ }
+ body.mod-contact aside.canvas-slid::before,
+ body.mod-photos aside.canvas-slid::before,
+ body.mod-profile aside.canvas-slid::before {
+ opacity: 0;
+ }
+ body.mod-contact aside #profile-photo-wrapper,
+ body.mod-photos aside #profile-photo-wrapper,
+ body.mod-profile aside #profile-photo-wrapper {
+ top: 100px;
+ }
+ body.mod-contact .profile-header h3.p-name,
+ body.mod-photos .profile-header h3.p-name,
+ body.mod-profile .profile-header h3.p-name {
+ top: 255px;
+ }
+ body.mod-contact .profile-header .p-addr,
+ body.mod-photos .profile-header .p-addr,
+ body.mod-profile .profile-header .p-addr {
+ top: 345px;
+ width: 80%;
+ margin-left: -40%;
+ }
+ /* bounce effect */
+ body.mod-contact aside.canvas-sliding #profile-photo-wrapper,
+ body.mod-photos aside.canvas-sliding #profile-photo-wrapper,
+ body.mod-profile aside.canvas-sliding #profile-photo-wrapper {
+ margin-left: -75px;
+ top: 150% !important;
+ }
+ body.mod-contact aside.canvas-sliding .profile-header h3.p-name,
+ body.mod-photos aside.canvas-sliding .profile-header h3.p-name,
+ body.mod-profile aside.canvas-sliding .profile-header h3.p-name {
+ margin-left: -50%;
+ top: 150% !important;
+ }
+ body.mod-contact aside.canvas-sliding .profile-header .p-addr,
+ body.mod-photos aside.canvas-sliding .profile-header .p-addr,
+ body.mod-profile aside.canvas-sliding .profile-header .p-addr {
+ margin-left: -25%;
+ top: 150% !important;
+ }
+
+ body.mod-contact aside.canvas-slid #profile-photo-wrapper,
+ body.mod-photo aside.canvas-slid #profile-photo-wrapper,
+ body.mod-profile aside.canvas-slid #profile-photo-wrapper {
+ margin-left: -75px;
+ top: 150% !important;
+ }
+ body.mod-contact aside.canvas-slid .profile-header h3.p-name,
+ body.mod-photo aside.canvas-slid .profile-header h3.p-name,
+ body.mod-profile aside.canvas-slid .profile-header h3.p-name {
+ margin-left: -50%;
+ top: 150% !important;
+ }
+ body.mod-contact aside.canvas-slid .profile-header .p-addr,
+ body.mod-photo aside.canvas-slid .profile-header .p-addr,
+ body.mod-profile aside.canvas-slid .profile-header .p-addr {
+ margin-left: -25%;
+ top: 150% !important;
+ }
+ .coverphoto {
+ transition-duration: .5s;
+ transition-property: top;
+ }
+ body.mod-contact.aside-out .coverphoto,
+ body.mod-photo.aside-out .coverphoto,
+ body.mod-profile.aside-out .coverphoto,
+ body.mod-contact aside.canvas-slid .coverphoto,
+ body.mod-photo aside.canvas-slid .coverphoto,
+ body.mod-profile aside.canvas-slid .coverphoto {
+ top: 150% !important;
+ left: 0px;
+ right: 0px;
+ }
+}
+/* Narrow Screen Phones in Portrait Orientation
+ ============================================
+*/
+@media screen and (max-width: 400px) and (orientation: portrait) {
+ /* remove action button labels if screen is too narrow */
+ .wall-item-actions-row button::after {
+ content: '.';
+ color: transparent;
+ }
+ /* NOTE: cannot simply empty or display none or button alignment gets messed up! */
+ .wall-item-actions-row .button-browser-share::after {
+ display: none !important;
+ }
+ ul.nav-tabs {
+ display: block;
+ }
+ ul.nav-tabs li {
+ width: 98%;
+ text-align: center;
+ }
+ ul.nav-tabs li a {
+ border: 1px solid var(--link-color) !important;
+ border-radius: 8px !important;
+ }
+ ul.nav-tabs li:not(.active) a:hover,
+ ul.nav-tabs li:not(.active) a:focus {
+ background-color: rgba(255,255,255,.2);
+ }
+ ul.nav-tabs li.active {
+ border: none !important;
+ }
+ ul.nav-tabs li.active a {
+ background-color: var(--link-color) !important;
+ color: #000 !important;
+ }
+ .hovercard {
+ max-width: 100%;
+ }
+}
+/* Narrow Screen Phones in Landscape Orientation
+ ==============================================
+*/
+@media screen and (max-height: 400px) and (orientation: landscape) {
+ #topbar-first {
+ transition-duration: .5s;
+ transition-property: bottom;
+ bottom: -55px;
+ }
+ header #banner {
+ background-color: var(--nav-bg);
+ border-radius: 8px;
+ z-index: 1030;
+ }
+ #topbar-first .navbar-toggle[data-target="aside"] {
+ position: fixed !important;
+ left: 10px;
+ bottom: 10px;
+ transition-duration: .5s;
+ background-color: var(--link-color);
+ color: white;
+ height: 50px;
+ width: 50px;
+ border-radius: 100%;
+ line-height: 32px;
+ }
+ #topbar-first .navbar-toggle[data-target="#search-mobile"],
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed) {
+ position: fixed !important;
+ top: auto;
+ bottom: 10px;
+ right: 10px;
+ transition-duration: .5s;
+ background-color: var(--link-color);
+ color: white;
+ height: 50px;
+ width: 50px;
+ border-radius: 100%;
+ line-height: 32px;
+ }
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]:hover,
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]:focus {
+ box-shadow: inset 0 0 100px rgba(0,0,0,.2);
+ }
+ .fa-fw {
+ width: auto;
+ }
+ #topbar-first .offcanvas-right-toggle {
+ top: 3px;
+ right: 13px;
+ padding: 0 !important;
+ }
+ #topbar-first .nav > .account {
+ top: 0px;
+ right: 5px;
+ }
+ #main-menu img {
+ border: 5px solid var(--link-color);
+ border-radius: 100%;
+ box-sizing: unset;
+ }
+ #search-mobile {
+ top: 40% !important;
+ border: 10px solid var(--link-color);
+ border-radius: 8px;
+ left: 50%;
+ width: 80%;
+ margin-left: -40%;
+ box-shadow: 0 0 50px rgba(0,0,0,.75);
+ }
+ #search-mobile .col-xs-12 {
+ background-color: var(--nav-bg);
+ }
+ #topbar-second {
+ transition-duration: .5s;
+ transition-property: top;
+ top: -60px;
+ }
+ #topbar-first .nav > li > a:hover,
+ #topbar-first .nav > li > a:focus,
+ #topbar-first .nav > li > button:not(#main-menu):hover,
+ #topbar-first .nav > li > button:not(#main-menu):focus,
+ #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):hover,
+ #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):focus,
+ nav.navbar .nav > li > a:hover,
+ nav.navbar .nav > li > a:focus,
+ nav.navbar .nav > li > button:hover,
+ nav.navbar .nav > li > button:focus {
+ background-color: var(--link-color) !important;
+ border-radius: 100% !important;
+ box-shadow: inset 0 0 100px rgba(0,0,0,.2);
+ }
+ #topbar-first button.navbar-toggle.offcanvas-right-toggle:hover,
+ #topbar-first button.navbar-toggle.offcanvas-right-toggle:focus {
+ border-radius: 100% !important;
+ }
+ #topbar-first .topbar-actions {
+ z-index: 1070;
+ }
+ /* if notifications is left open when phone is rotated */
+ #nav-notifications-menu {
+ top: 0;
+ bottom: 0;
+ z-index: 10000;
+ }
+ #offcanvasUsermenu {
+ top: 0px;
+ }
+ #offcanvasUsermenu li:first-of-type img {
+ display: none;
+ }
+ #offcanvasUsermenu li:first-of-type {
+ font-weight: 700;
+ }
+ .offcanvas-right-overlay {
+ top: 0px;
+ }
+ /* Profile Pages */
+ body.mod-contact #content,
+ body.mod-profile #content,
+ body.mod-photos #content {
+ margin-top: 200px !important;
+ }
+ body.mod-profile #sidebar-photos-albums::before {
+ top: 25px;
+ }
+ body.mod-contact aside,
+ body.mod-photos aside,
+ body.mod-profile aside {
+ padding-top: 50px;
+ padding-bottom: 50px;
+ }
+ body.mod-contact aside.canvas-slid,
+ body.mod-photos aside.canvas-slid,
+ body.mod-profile aside.canvas-slid {
+ left: 0px !important;
+ right: auto !important;
+ max-width: 300px !important;
+ background-color: transparent !important;
+ z-index: 20;
+ }
+ body.mod-contact aside.canvas-slid::before,
+ body.mod-photos aside.canvas-slid::before,
+ body.mod-profile aside.canvas-slid::before {
+ opacity: 1;
+ }
+ body.mod-contact aside #profile-photo-wrapper,
+ body.mod-photos aside #profile-photo-wrapper,
+ body.mod-profile aside #profile-photo-wrapper {
+ top: 10px;
+ }
+ body.mod-contact .profile-header h3.p-name,
+ body.mod-photos .profile-header h3.p-name,
+ body.mod-profile .profile-header h3.p-name {
+ top: 155px;
+ }
+ body.mod-contact .profile-header .p-addr,
+ body.mod-photos .profile-header .p-addr,
+ body.mod-profile .profile-header .p-addr {
+ top: 205px;
+ width: 50%;
+ margin-left: -25%;
+ }
+ .coverphoto.canvas-sliding,
+ .coverphoto.canvas-slid,
+ .coverphoto {
+ top: 0px;
+ }
+}
+/* LOGIN AND INFO SCREENS */
+body.mod-home {
+ padding-top: 10px !important;
+}
+.mod-home .navbar,
+.mod-home #topbar-second{
+ background-color: transparent !important;
+}
+.mod-home #nav-about {
+ background-color: var(--link-color);
+ height: 50px;
+ width: 50px;
+ color: white !important;
+ border-radius: 100% !important;
+ right: 15px;
+}
+ .mod-home #nav-about:hover,
+.mod-home #nav-about:focus {
+ background-color: var(--link-color) !important;
+ box-shadow: inset 0 0 100px rgba(0,0,0,.1);
+}
+.mod-home #nav-about .fa-info {
+ line-height: 24px;
+ width: auto;
+ display: block;
+}
+ @media screen and (max-width: 768px){
+ .mod-home #nav-about .fa-info {
+ line-height: 32px;
+ }
+ }
+/* 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 cac1262..ff30541 100644
--- a/bookface_dark.php
+++ b/bookface_dark.php
@@ -7,27 +7,31 @@
*
* Name: Bookface Dark
* Licence: AGPL
- * Author: Kristi H. @kmh@friendica.world feb @feb@loma.ml
+ * Author: Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml
* Overwrites: nav_bg, nav_icon_color, background_color, background_image, contentbg_transp
- * Accented: Yes
- * Version: 1.2
+ * Accented: yes
+ * Version: 1.7
*/
-
+use Friendica\DI;
require_once 'view/theme/frio/php/PHPColors/Color.php';
$accentColor = new Color($scheme_accent);
+$customColor = DI::pConfig()->get($uid, 'frio', 'link_color') ?: '';
+if ($customColor){
+ $customColor = new Color(''.$customColor.'');
+}
+//$customColor = ($customColor) ?: new Color(''.$customColor.'');
-$menu_background_hover_color = '#' . $accentColor->darken(20);
+$menu_background_hover_color = ($customColor) ? '#'.$customColor->darken(20) : '#'.$accentColor->darken(20);
$nav_bg = '#252728';
-$link_color = '#' . $accentColor->lighten(10);
- // override ugly blue accent color
- if ( $link_color == "#33a2e0" ){
+$background_color = '#1C1C1D';
+$link_color = ($customColor) ? '#'.$customColor->getHex() : '#'.$accentColor->lighten(10);
+ // override ugly blue accent color and prevent setting accent to nav or bg color
+ if ( $link_color == "#33a2e0" || $link_color == $nav_bg || $link_color == $background_color ){
$link_color = "#0066ff";
}
$nav_icon_color = '#B0B3B8';
-$background_color = '#1C1C1D';
-$contentbg_transp = '0';
$font_color = '#cccccc';
$font_color_darker = '#acacac';
$font_color_lighter = '#444444';
-$background_image = '';
+$contentbg_transp = '0';
\ No newline at end of file
diff --git a/bookface_light.css b/bookface_light.css
index f9c6f56..aef7f4a 100644
--- a/bookface_light.css
+++ b/bookface_light.css
@@ -1,42 +1,64 @@
/*
Name : Bookface Light
- Version : 1.2
+ Version : 1.7.1
Licence : AGPL
- Created on : 26.01.2025
- Author : Kristi H. @kmh@friendica.world feb @feb@loma.ml
+ Created on : 15 MAY 2025
+ Author : Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml
*/
-
:root {
--global-font-family: "Open Sans", Arial, sans-serif, Noto Color Emoji;
--nav-bg: $nav_bg;
--link-color: $link_color;
--nav-icon-color: $nav_icon_color;
--background-color: $background_color;
- --contentbg-transp: $contentbg_transp;
+ --content-bg: var(--nav-bg);
+ --comment-bg: var(--background-color);
--font-color: $font_color;
--font-color-darker: $font_color_darker;
- --background-image: $background_image;
--menu-background-hover-color: $menu_background_hover_color;
--border-color: #eeeeee;
+ --count-color: #ffffff;
+ --count-bg: var(--link-color);
+ --attach-file-button: none; /* none or block */
+
+ /* LOCALIZE pseudo-element text below */
+ --sign-in-text: 'Sign-In';
+ --compose-text: 'Compose';
+ --new-note-text: 'New Note';
+ --save-search-text: 'Save Search';
+ --follow-tag-text: 'Follow Tag';
+ --comment-button-text: 'Comment';
+ --share-button-text: 'Share';
+ --quote-button-text: 'Quote';
+ --like-button-text: 'Like';
+ --dislike-button-text: 'Dislike';
+ --more-button-text: 'More';
+ --attendyes-button-text: 'Going';
+ --attendno-button-text: 'Can\'t Go';
+ --attendmaybe-button-text: 'Maybe';
+ --add-photo-button-text: 'Add Photos';
+ --follow-button-text: 'Follow';
+ --save-button-text: 'Save';
+ --new-message-text: 'New Message';
}
body {
background-color: var(--background-color) !important;
font-size: 15px !important;
- padding-top: 125px !important;
+ padding-top: 130px !important;
font-family: var(--global-font-family);
}
#topbar-first .nav > li > a,
#topbar-first .nav > li > button,
nav.navbar .nav > li > a,
nav.navbar .nav > li > button{
- color: #65686C !important;
-
+ color: var(--nav-icon-color) !important;
}
#topbar-first, nav.navbar {
background-color: var(--nav-bg) !important;
- color: #65686C !important;
+ color: var(--nav-icon-color) !important;
+ height: 55px;
}
#topbar-first .topbar-nav .nav-segment {
margin-right: 10px;
@@ -51,7 +73,9 @@
#topbar-first .nav > li > a:hover,
#topbar-first .nav > li > a:focus,
#topbar-first .nav > li > button:not(#main-menu):hover,
- #topbar-first .nav > li > button:not(#main-menu):focus,
+ #topbar-first .nav > li > button:not(#main-menu):focus,
+ #topbar-first button.navbar-toggle:hover,
+ #topbar-first button.navbar-toggle:focus,
nav.navbar .nav > li > a:hover,
nav.navbar .nav > li > a:focus,
nav.navbar .nav > li > button:hover,
@@ -59,64 +83,170 @@
background-color: rgba(128,128,128,.1) !important;
border-radius: 8px !important;
+ }
+ #topbar-first button.navbar-toggle,
+ #nav-notifications-menu-btn {
+ width: 50px;
+ height: 50px;
}
- #topbar-first .nav > li > a.selected {
+ #topbar-first .nav > li > a.selected,
+ #nav-notification.dropdown.open {
border-bottom: 3px solid var(--link-color) !important;
color: var(--link-color) !important;
}
#topbar-first .nav > li > a.selected:hover,
+ #topbar-first .nav > li > a.selected:focus,
#topbar-first .nav > li > #main-menu:hover,
- #topbar-first .nav > li > #main-menu:focus {
+ #topbar-first .nav > li > #main-menu:focus,
+ #nav-notification.dropdown.open #nav-notifications-menu-btn:hover,
+ #nav-notification.dropdown.open #nav-notifications-menu-btn:focus {
background-color: transparent !important;
border-radius: 0 !important;
}
+ #nav-notification.dropdown.open #nav-notifications-menu-btn .fa-bell::before {
+ content: '\f0f3';
+ color: var(--link-color);
+ }
+ .notif-item img.notif-image,
+ .intro-photo-wrapper img.intro-photo {
+ border-radius: 100%;
+ }
+ul.nav-tabs {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ padding-bottom: 20px;
+ border-color:rgba(0,0,0,.2);
+}
ul.tabs li {
font-size: 15px !important;
margin-left: 10px !important;
}
- ul.tabs li a {
- margin-top: 8px;
- }
- ul.tabs li:hover:not(.active) {
+ ul.nav-tabs li a,
+ ul.tabs li a {
+ margin-top: 8px;
+ color: var(--link-color);
+ border: none;
+ }
+ ul.nav-tabs li:not(.active):hover,
+ ul.tabs li:not(.active):hover {
border-bottom-width: 0px !important;
}
- ul.tabs li:hover:not(.active) a {
+ ul.nav-tabs li:not(.active):hover > a,
+ ul.tabs li:not(.active):hover > a {
background-color: rgba(128,128,128,.1) !important;
+ background-image: none !important;
border-radius: 8px !important;
+ color: var(--font-color);
}
+ ul.nav-tabs li:not(.active) > a:hover,
+ ul.nav-tabs li:not(.active) > a:focus {
+ border: none;
+ }
+ ul.nav-tabs li.active {
+ border-bottom: 4px solid var(--link-color);
+ }
+ ul.nav-tabs > li.active > a,
+ ul.nav-tabs > li.active a:hover,
+ ul.nav-tabs > li.active a:focus {
+ border: none;
+ color: var(--link-color);
+ background-color: transparent;
+ }
.dropdown-menu {
padding-bottom: 15px !important;
background-color: var(--nav-bg) !important;
border: 1px solid var(--background-color) !important;
}
.dropdown-menu li {
- margin: 10px;
- width: 92% !important;
+ margin: 3px 10px;
+ width: 92% !important;
border-radius: 8px;
}
.dropdown-menu li:hover {
- border-color: transparent !important;
+ border-color: transparent !important;
+ }
+ .dropdown-menu > li > a:hover,
+ .dropdown-menu > li > a:focus {
+ background-image: none !important;
+ border-radius: 8px ;
+ }
+ /*
+ 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 {
+ border-radius: 0;
+ background-color: transparent;
+ border-bottom: 4px solid var(--link-color) !important;
+ }
+ .dropdown-menu > li.active > a,
+ .dropdown-menu > li.active:hover > a,
+ .dropdown-menu > li.active:focus > a {
+ color: var(--link-color);
+ background-color: transparent;
+ background-image: none;
}
.form-control {
- background: #fff;
+ background: var(--nav-bg);
color: #000;
}
.form-control[readonly],
.form-control[disabled],
.fieldset[disabled] .form-control {
+ /* background color */
+ /* color */
opacity: .5;
}
-
+ .table-striped > tbody > tr:nth-of-type(2n+1){
+ /* not necessary for light mode */
+ }
header #banner {
left: 0 !important;
right: auto !important;
+ margin-top: 10px;
}
- header #banner #logo-img,
- .navbar-brand #logo-img {
- background-color: var(--link-color) !important;
- height: 40px !important;
- width: 40px !important;
+ .navbar-brand #logo-img {
+ margin-top: 20px;
+ }
+ .navbar-brand #logo-img,
+ header #banner #logo-img {
+ /* SVG Mask is broken in WebKit use Icon Font instead */
+ -webkit-mask-image: unset !important;
+ mask: none !important;
+ mask-size: unset !important;
+ mask-composite: unset !important;
+ mask-mode: unset !important;
+ background-color: transparent !important;
+ height: 40px;
+ width: 40px;
+ }
+ .navbar-brand #logo-img::before,
+ header #banner #logo-img::before {
+ content: '\f2e6';
+ font-family: ForkAwesome;
+ font-size: 45px;
+ position: relative;
+ top: -12px;
+ left: 0px;
+ text-shadow: none;
+ color: var(--link-color);
}
+
+ #navbar-brand-text {
+ line-height: 40px;
+ font-weight: 700;
+ color: var(--link-color) !important;
+ }
+ #nav-login::before{
+ content: var(--sign-in-text);
+ }
.topbar ul.nav {
left: 50% !important;
margin-left: -25% !important;
@@ -136,6 +266,7 @@
height: 40px !important;
font-size: 15px;
background-position: unset;
+ /* box shadow okay for light mode */
}
#search-box form > div {
background-color: var(--background-color);
@@ -170,13 +301,24 @@
font-size: 15px;
color: #666;
}
- #nav-user-menu {
- background-color: #ffffff !important;
- min-width: 250px !important;
+ #nav-user-menu, #nav-notifications-menu {
+ background-color: var(--nav-bg) !important;
+ border: 1px solid var(--background-color) !important;
}
- .nav-pills .dropdown-menu li a, .nav-pills .dropdown-menu li .btn-link, .nav-tabs .dropdown-menu li a, .nav-tabs .dropdown-menu li .btn-link, .account .dropdown-menu li a, .account .dropdown-menu li .btn-link, .contact-photo-wrapper .dropdown-menu li a, .contact-photo-wrapper .dropdown-menu li .btn-link {
- color: #65686C !important;
- border-color: white !important;
+ #nav-user-menu {
+ min-width: 250px !important;
+ overflow-x: hidden;
+ }
+ .nav-pills .dropdown-menu li a,
+ .nav-pills .dropdown-menu li .btn-link,
+ .nav-tabs .dropdown-menu li a,
+ .nav-tabs .dropdown-menu li .btn-link,
+ .account .dropdown-menu li a,
+ .account .dropdown-menu li .btn-link,
+ .contact-photo-wrapper .dropdown-menu li a,
+ .contact-photo-wrapper .dropdown-menu li .btn-link {
+ color: var(--nav-icon-color) !important;
+ border-color: var(--nav-bg) !important;
}
.nav-pills .dropdown-menu li > a:hover,
.nav-tabs .dropdown-menu li > a:hover,
@@ -190,11 +332,58 @@
background: #f2f2f2 !important;
border-radius: 8px;
}
- .nav-pills .dropdown-menu li.divider, .nav-tabs .dropdown-menu li.divider, .account .dropdown-menu li.divider, .contact-photo-wrapper .dropdown-menu li.divider {
- background-color: #ffffff !important;
- }
+ .nav-pills .dropdown-menu li.divider,
+ .nav-tabs .dropdown-menu li.divider,
+ .account .dropdown-menu li.divider,
+ .contact-photo-wrapper .dropdown-menu li.divider {
+ background-color: var(--nav-bg) !important;
+ }
+#content .nav > li > .btn-link {
+ margin: 5px;
+}
+#content .nav > li > .btn-link:hover,
+#content .nav > li > .btn-link:focus {
+ background-color: var(--link-color);
+ color: white !important;
+}
+ #topbar-first #nav-notifications-menu {
+ border: 1px solid var(--background-color) !important;
+ }
+ #topbar-first #nav-notifications-menu li {
+ border-color: transparent !important;
+ box-sizing: border-box;
+ margin: 10px;
+ border-radius: 10px !important;
+ width: 94% !important;
+ }
+ #topbar-first .notification-unseen {
+ background-color: rgba(0,0,0,.1) !important
+ }
+ #topbar-first #nav-notifications-menu li.notif-entry:hover{
+ background-color:rgba(128,128,128,.2) !important;
+ border-color: transparent !important;
+ }
+ .topbar .dropdown-header {
+ color: var(--nav-icon-color);
+ }
+ #topbar-first .topbar-nav .arrow {
+ display: none !important;
+ }
+ .topbar .dropdown-header .dropdown-header-link .btn-link {
+ border: 1px solid var(--link-color);
+ border-radius: 8px;
+ padding: 5px;
+ margin-top: -6px;
+ }
+ .topbar .dropdown-header .dropdown-header-link .btn-link:hover,
+ .topbar .dropdown-header .dropdown-header-link .btn-link:focus {
+ background-color: rgba(0,0,0,.1);
+ }
#topbar-second {
+ top: 55px;
height: 60px !important;
+ background-color: var(--nav-bg) !important;
+ border-color: #ccc;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus {
@@ -216,12 +405,14 @@
border-radius: 8px !important;
background-color: var(--link-color) !important;
color: #ffffff !important;
+ /* frio border-color */
+ /* frio box-shadow */
}
#jotOpen:hover, #jotOpen:focus {
box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
}
#jotOpen::before {
- content: 'Compose';
+ content: var(--compose-text);
font-size: 15px;
margin-right: 10px;
line-height: 32px;
@@ -229,6 +420,14 @@
display: inline;
top: -4px;
}
+ body.mod-notes #jotOpen::before {
+ content: var(--new-note-text);
+ }
+ body.mod-notes .sectiontop h3::before {
+ content: '\f023';
+ font-family: ForkAwesome;
+ margin-right: 5px;
+ }
#jotOpen .fa-pencil-square-o {
font-size: 32px !important;
position: relative;
@@ -237,23 +436,57 @@
#topbar-second #nav-short-info {
margin-top: 10px;
}
+ /* General Content Wrappers */
+ section > .generic-page-wrapper,
+ .videos-content-wrapper,
+ .suggest-content-wrapper,
+ .help-content-wrapper,
+ .match-content-wrapper,
+ .dirfind-content-wrapper,
+ .delegation-content-wrapper,
+ .notes-content-wrapper,
+ .message-content-wrapper,
+ .apps-content-wrapper, #adminpage,
+ .delegate-content-wrapper,
+ .uexport-content-wrapper,
+ .dfrn_request-content-wrapper,
+ .friendica-content-wrapper,
+ .credits-content-wrapper,
+ .nocircle-content-wrapper,
+ .profperm-content-wrapper,
+ .invite-content-wrapper,
+ .tos-content-wrapper,
+ .fsuggest-content-wrapper,
+ .shared-wrapper {
+ background-color: var(--content-bg) !important;
+ background-image: none;
+ /* frio light border-color */
+ }
/* Make Submit Buttons Pretty */
+ #adminpage a.btn,
.settings-submit,
button[type="submit"],
+ input[type="submit"],
#photos-upload-submit {
background-color: var(--link-color) !important;
color: white !important;
border-radius: 8px !important;
+ border: none !important;
+ box-shadow: none !important;
}
.settings-submit.form-button-search,
button[type="submit"].form-button-search {
border-radius:50px !important;
margin-top:-.5px !important;
}
+ #adminpage a.btn:hover,
+ #adminpage a.btn:focus,
.settings-submit:hover,
.settings-submit:focus,
button[type="submit"]:hover,
button[type="submit"]:focus,
+ input[type="submit"]:hover,
+ input[type="submit"]:focus,
#photos-upload-submit:hover,
#photos-upload-submit:focus{
box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
@@ -273,7 +506,8 @@
.panel-footer {
background-color: var(--nav-bg) !important;
}
- .panel-footer button[type="submit"]{
+ .panel-footer button[type="submit"],
+ .panel-footer input[type="submit"] {
float: right !important;
margin-left: 5px;
}
@@ -282,22 +516,62 @@
display: block;
clear: both;
}
+ #addonslist{
+ margin-top: 20px;
+ }
#settings-server button[type="submit"] {
float: right !important;
margin-left: 5px !important;
margin-bottom: 20px !important;
}
+ #settings-channels .panel {
+ padding: 0 10px 10px 10px;
+ }
+ #settings-channels button {
+ float: right;
+ }
+ #adminpage button[type="sbumit"],
+ input[type="submit"],
+ input[name="page_logs"],
+ input[name="republish_directory"],
+ input[name="page_tos"]{
+ float: right;
+ padding: 8px;
+ border: none;
+ }
+ .submit::after{
+ content: '';
+ display: block;
+ clear: both;
+ }
+ #photo-edit-end {
+ clear: both;
+ }
+ /* 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;
+ }
/* Other people profiles */
#mention-link {
+ border-radius: 8px !important;
background-color: var(--link-color) !important;
- color: white !important;;
- border-radius: 8px !important;;
+ color: #ffffff !important;
+ /* frio border-color */
+ /* frio box-shadow */
padding: 0 16px !important;
}
#mention-link:hover,
#mention-link:focus {
box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important;
-
}
#mention-link span:first-of-type {
float: right;
@@ -314,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;
@@ -347,7 +626,7 @@
}
#search-save .fa-floppy-o::after,
#search-save .fa-plus::after{
- content: 'Save Search';
+ content: var(--save-search-text);
font-family: 'Open Sans', Arial, sans-serif;
font-size: 15px;
float: left;
@@ -358,17 +637,39 @@
top: -2px;
font-weight: 700;
}
-
#search-save .fa-floppy-o::after {
- content: 'Save Search';
+ content: var(--save-search-text);
}
#search-save .fa-plus::before {
display: inline-block;
margin-top: 2px;
}
#search-save .fa-plus::after {
- content: 'Follow Tag';
+ content: var(--follow-tag-text);
}
+ /* popovers */
+ .popover.hovercard {
+ border: 1px solid var(--nav-bg) !important;
+ /*
+ dark version needs box shadow as outer glow
+ */
+ }
+ .hover-card-footer {
+ border-color: #ccc;
+ background-color: var(--nav-bg);
+ }
+ .hovercard.top > .arrow::after {
+ border-top-color: var(--nav-bg);
+ }
+ .hovercard.right > .arrow::after {
+ border-right-color: var(--nav-bg);
+ }
+ .hovercard.bottom > .arrow::after {
+ border-bottom-color: var(--nav-bg);
+ }
+ .hovercard.left > .arrow::after {
+ border-left-color: var(--nav-bg);
+ }
/* sidebar widgets */
aside .widget,
.nav-container .widget {
@@ -377,12 +678,20 @@
-moz-box-shadow: none !important;
box-shadow: none !important;
}
+ aside .badge {
+ background-color: var(--link-color);
+ }
+ /* POSTS */
.tread-wrapper {
+ background-color: var(--content-bg);
box-shadow: 0 0px 1px rgba(0,0,0,.5) !important;
border-radius: 10px !important;
}
+ .wall-item-container {
+ border-top: none;
+ }
.wall-item-container .media {
- background-color: #ffffff !important;
+ background-color: var(--content-bg) !important;
border-radius: 10px !important;
}
.wall-item-container iframe {
@@ -395,13 +704,28 @@
border-radius: 8px;
background-color: #000;
}
+ /*
+ Dark mode has some extra styling
+ here light mode does not need
+ */
.contact-photo,
.contact-photo-xs {
border-radius: 100% !important;
border: 1px solid #eee !important;
}
+ /*
+ Dark mode has some extra styling
+ here light mode does not need
+ to the .media-list > li elements
+ */
+/*
+ Dark mode has some extra styling
+ here for the .hovercard element
+*/
.hover-card-pic img.thumbnail {
border-radius: 100% !important;
+ /* frio background-color */
+ /* frio border-color */
}
p.wall-item-announce,
.media .time, .media .shared-time,
@@ -420,6 +744,9 @@
padding-left: 10px !important;
padding-right: 10px !important;
}
+ .media hr:first-of-type, aside hr, section hr {
+ border-color: var(--nav-bg);
+ }
/* keep mentions and tags from spilling out */
#profile-page .label,
#profile-page .label a,
@@ -428,12 +755,14 @@
display: inline-block !important;
}
/* ACTION BUTTON LABELS */
- .wall-item-actions-row button,
+ .wall-item-actions-row button:not(button-browser-share),
.wall-item-actions-right button {
position: relative;
display: block;
white-space: normal !important;
margin: 0 auto !important;
+ /* frio -webkit-box-shadow */
+ /* frio box-shadow */
}
.wall-item-actions-row button::after,
.wall-item-actions-right button::after {
@@ -445,28 +774,33 @@
.wall-item-response {
position: relative;
overflow: visible !important;
+ display: block;
}
.button-comments::after {
- content: 'Comment';
+ content: var(--comment-button-text);
}
.button-announces::after {
- content: 'Share';
+ content: var(--share-button-text);
}
.share-links .dropdown-toggle::after {
- content: 'Share';
+ content: var(--share-button-text);
}
.button-votes::after {
- content: 'Quote';
+ content: var(--quote-button-text);
}
.button-likes::after {
- content: 'Like';
+ content: var(--like-button-text);
}
[id^="dislike-"]::after{
- content: 'Dislike';
+ content: var(--dislike-button-text);
}
.wall-item-actions-right .dropdown-toggle::after,
.more-links .dropdown-toggle::after {
- content: 'More';
+ content: var(--more-button-text);
+ }
+ .wall-item-actions-row button[disabled],
+ .wall-item-actions-right button[disabled] {
+ opacity: .5;
}
/* engagement counts */
.wall-item-actions-row > button span,
@@ -474,10 +808,10 @@
position: absolute;
text-align: center;
display: block;
- background-color: var(--link-color);
+ background-color: var(--count-bg);
box-shadow: -1px 1px 1px #fff;
border-radius: 4px;
- color: #fff;
+ color: var(--count-color);
font-size: 12px;
font-weight: 700;
width: fit-content;
@@ -486,40 +820,40 @@
top: 0px;
z-index: 1;
}
- /* this is some freaking ALCHEMY! */
- .vote-event:not(:has(.wall-item-response:empty)) {
+ /* Event Response Buttons */
+ .vote-event:has(button) {
padding-bottom: 135px;
}
- .vote-event .wall-item-response {
+ .vote-event:has(button) .wall-item-response {
position: absolute;
top: 63px;
}
.vote-event .wall-item-response:empty{
display: none;
}
- .vote-event .wall-item-response:nth-of-type(1){
+ .vote-event:has(button) .wall-item-response:nth-of-type(1){
left: 15px;
}
.vote-event .wall-item-response:nth-of-type(1) .button-event::after,
- [id^="attendyes"]::after{
- content: 'Going';
+ .wall-item-actions-row [id^="attendyes"]::after{
+ content: var(--attendyes-button-text);
}
- .vote-event .wall-item-response:nth-of-type(2){
+ .vote-event:has(button) .wall-item-response:nth-of-type(2){
left: 105px;
}
.vote-event .wall-item-response:nth-of-type(2) .button-event::after,
- [id^="attendno"]::after{
- content: 'Can\'t Go';
+ .wall-item-actions-row [id^="attendno"]::after{
+ content: var(--attendno-button-text);
position: relative;
height: 20px;
overflow: hidden; /* or skews mobile button layout */
}
- .vote-event .wall-item-response:nth-of-type(3){
+ .vote-event:has(button) .wall-item-response:nth-of-type(3){
left: 204px;
}
.vote-event .wall-item-response:nth-of-type(3) .button-event::after,
- [id^="attendmaybe"]::after{
- content: 'Maybe';
+ .wall-item-actions-row [id^="attendmaybe"]::after{
+ content: var(--attendmaybe-button-text);
}
/* prevent "Like Like" and "Dislike Dislike" on photos */
#photo-view-wrapper .wall-item-actions .button-likes {
@@ -571,19 +905,27 @@
.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;
}
.wall-item-comment-wrapper {
border: none;
+ box-shadow: none;
}
.photo-comment-wrapper .btn-sm,
#profile-jot-wrapper .btn-sm,
.wall-item-comment-wrapper .btn-sm {
background-color: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
color: var(--nav-icon-color);
height: 45px;
width: 45px;
@@ -602,6 +944,9 @@
#jot-modal-content .friendica-tagsinput {
background-color: #fff !important;
}
+ #filebrowser .breadcrumb{
+ background-color: var(--background-color);
+ }
.fbrowser .folders button {
background-color: rgba(0,0,0,.1) !important;
color: black !important;
@@ -620,12 +965,15 @@
border-color: transparent !important;
background-color: transparent !important;
}
-
- #jot-title {
+ .fbrowser-content-container.justified-gallery {
+ max-height: 100% !important;
+ }
+ #jot-title,
+ #jot-category {
background-color: #fff !important;
}
- #profile-jot-text, #profile-jot-wrapper textarea,
- #jot-location,
+ #profile-jot-text, #profile-jot-wrapper textarea,
+ #jot-location,
.wall-item-comment-wrapper textarea {
background-color: #fff !important;
}
@@ -654,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;
@@ -687,19 +1034,19 @@
#upload-photo:focus {
background-color: darkblue !important;
}
- /* HIDE ATTACHMENT BUTTON
- =======================
- This hides the file attachment button in the Compose "Browser" tab
- because there is no way to manage/delete uploaded attachments it
- was a design choice of this theme mod to hide this button from users.
-
- If you WANT users to be able to see uploaded files and attach them
- to posts either comment out this rule or change "none" to "block"
- */
- .fbswitcher [data-mode="attachment"] {
- display: none !important;
+ body.mod-settings .panel-body {
+ background-color: var(--nav-bg);
+ border-radius: 10px;
+ border-top: none !important;
}
-/* Profiles */
+ .help-block {
+ color: var(--font-color-darker);
+ }
+ /* HIDE ATTACHMENT BUTTON */
+ .fbswitcher [data-mode="attachment"] {
+ display: var(--attach-file-button) !important;
+ }
+/* PROFILE */
#profile-photo-wrapper {
overflow: visible !important;
padding: 5px;
@@ -718,20 +1065,41 @@
font-size: 32px !important;
text-align: center;
word-break: break-word;
+ text-shadow: 1px 1px 2px var(--background-color), -1px -1px 2px var(--background-color), 1px -1px 2px var(--background-color), -1px 1px 2px var(--background-color);
}
aside .vcard .p-addr {
font-weight: 600;
text-align: center;
white-space: break-spaces !important;
+ background-color: var(--background-color);
+ border-radius: 8px;
+ }
+ aside .vcard .title,
+ aside .vcard .location,
+ aside .vcard .key,
+ aside .vcard .about,
+ aside .vcard .xmpp,
+ aside .vcard .matrix,
+ aside .vcard .homepage,
+ aside .vcard .account-type {
+ background-color: var(--background-color);
+ padding: 5px;
+ border-radius: 8px;
+ min-width: 100%;
+ margin: 10px 0;
}
aside .widget li.selected {
background-color: var(--menu-background-hover-color) !important;
+ /* auto has background-image here */
border-color: transparent !important;
border-radius: 8px;
}
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;
@@ -755,20 +1123,108 @@
}
.comment-fake-form textarea {
border-radius: 50px !important;
+ background-color: var(--comment-bg) !important;
+ /* frio -webkit-box-shadow */
+ /* frio box-shadow */
}
.wall-item-actions button {
font-size: 24px !important;
- color: #65686C !important;
+ color: var(--nav-icon-color) !important;
}
.wall-item-actions button:hover {
+ 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 {
@@ -780,10 +1236,75 @@
position: relative;
top: 1px;
}
+ .wall-item-actions ul button,
+ .wall-item-actions ul a {
+ font-size: 14px !important;
+ color: inherit !important;
+ line-height: 14px !important;
+ margin: 0 !important;
+ }
+ /* little vcard when you scroll down on profiles */
+ #vcard-short-desc * {
+ color: var(--font-color) !important;
+ }
+ #vcard-short-photo-wrapper img,
+ #nav-short-info .contact-wrapper img {
+ border-radius: 100% !important;
+ }
+ /* Profile Cover Photo */
+ .row:has(.coverphoto) aside,
+ .row:has(.coverphoto) #content {
+ margin-top: 350px;
+ }
+ .row:has(.coverphoto) aside .widget.vcard {
+ background-color: transparent !important;
+ }
+ .coverphoto {
+ position: fixed;
+ top: 115px;
+ left: 0 !important;
+ right: 0 !important;
+ z-index: -1;
+ height: 500px;
+ overflow: hidden;
+ }
+ .coverphoto img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+ }
+ .coverphoto:has(> :last-child:nth-child(2)) img {
+ height: 50%;
+ }
+ .coverphoto:has(> :last-child:nth-child(3)) img {
+ height: 33.3333%;
+ }
+ .coverphoto:has(> :last-child:nth-child(n+4)) img {
+ height: 25%;
+ }
+ /* 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
-webkit-box-shadow: 0 0 1px rgba(0,0,0,.5);
box-shadow: 0 0 1px rgba(0,0,0,.5);
+ */
border-radius: 100%;
position: relative;
padding: 6px 4px;
@@ -810,7 +1331,37 @@
/* Calendar */
.fc-unthemed td.fc-today {
background-color: var(--menu-background-hover-color);
+ /* auto has background-image here */
}
+.event-buttons .btn {
+ background-color: var(--link-color);
+ color: #fff;
+ border-radius: 100%;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ font-size: 18px;
+ padding: 0;
+ margin-right: 5px;
+}
+ .event-buttons .btn:hover,
+ .event-buttons .btn:focus {
+ color: #fff;
+ box-shadow: inset 0 0 100px rgba(0,0,0,.1);
+ }
+ .fc .fc-event {
+ background-color: var(--link-color);
+ border: none;
+ color: white;
+ }
+ .fc .fc-month-view .fc-content .fc-title .item-desc:hover,
+ .fc .fc-month-view .fc-content .fc-title .item-desc:focus {
+ color: white;
+ }
+ .fc .fc-event:hover,
+ .fc .fc-event:focus {
+ box-shadow: inset 0 0 100px rgba(0,0,0,.2);
+ }
/* Photo Albums */
.photo-album-actions .icon-padding,
.photo-edit-link-wrap .icon-padding {
@@ -864,7 +1415,7 @@
background-color: rgba(128,128,128,.1) !important;
}
.photos-content-wrapper .photos-upload-link::before {
- content: 'Add Photos';
+ content: var(--add-photo-button-text);
font-size: 15px;
vertical-align: middle;
margin-top: -10px;
@@ -872,6 +1423,11 @@
}
.justified-gallery {
overflow: visible !important;
+ height: auto !important;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: start;
}
.justified-gallery > a,
.justified-gallery > div,
@@ -899,6 +1455,7 @@
}
#photo-photo {
margin: 0 auto !important;
+ max-width: 100%;
}
#photos-upload-perms button[data-toggle="modal"] {
background-color: rgba(0,0,0,.1) !important;
@@ -913,56 +1470,1478 @@
#photos-upload-perms button[data-toggle="modal"]:focus {
background-color: rgba(0,0,0,.2) !important;
}
-
-
- @media screen and (max-width: 1280px) {
- #search-box {
- width: 18% !important;
- }
- #search-save {
- width: 140px !important;
- }
+/* ADD-ONS */
+.advancedcontentfilter-content-wrapper table td:nth-of-type(2) {
+ word-wrap: anywhere;
+}
+.advancedcontentfilter-content-wrapper pre {
+ margin-top: 20px;
+}
+/* calculator addon */
+.calc-content-wrapper table {
+ margin: 0 auto;
+ color: #333;
+}
+.calc-content-wrapper td[colspan='5']::after {
+ content: ' ';
+ height: 50px;
+ width: 260px;
+ background-color: black;
+ display: block;
+}
+ .calc-content-wrapper input[type='button']{
+ appearance: none;
+ height: 50px;
+ width: 100%;
+ border: 1px solid #666;
+ color: white;
+ font-size: 18px;
+ font-weight: bold;
+ background-color: #999;
+ text-align: center;
}
- @media screen and (max-width: 991px){
- #search-box {
- left: 15%;
+ .calc-content-wrapper input[type='button']:active {
+ box-shadow: inset 0 0 100px rgba(255,255,255,.2);
+ }
+.calc-content-wrapper input[name='plus'],
+.calc-content-wrapper input[name='minus'],
+.calc-content-wrapper input[name='multiplication'],
+.calc-content-wrapper input[name='division'],
+.calc-content-wrapper input[name='enter']{
+ background-color: orange;
+}
+ .calc-content-wrapper input[name='plus']:active,
+ .calc-content-wrapper input[name='minus']:active,
+ .calc-content-wrapper input[name='multiplication']:active,
+ .calc-content-wrapper input[name='division']:active,
+ .calc-content-wrapper input[name='enter']:active{
+ box-shadow: inset 0 0 100px rgba(0,0,0,.2);
+ }
+.calc-content-wrapper input[name='plus']{
+ padding-left: 10px;
+}
+.calc-content-wrapper input[name='multiplication']{
+ padding-left: 14px;
+}
+.calc-content-wrapper input[name='clear'],
+.calc-content-wrapper input[name='sqareroot'],
+.calc-content-wrapper input[name='squarex'],
+.calc-content-wrapper input[name='deg-rad'],
+.calc-content-wrapper input[name='rad-deg'],
+.calc-content-wrapper input[name='sine'],
+.calc-content-wrapper input[name='arcsine'],
+.calc-content-wrapper input[name='cosine'],
+.calc-content-wrapper input[name='arccosine']{
+ background-color: #666;
+}
+.calc-content-wrapper #display {
+ appearance: none;
+ font-size: 36px;
+ font-weight: lighter;
+ text-align: right;
+ color: #eee;
+ background-color: #666;
+ border: none;
+ display: block;
+ width: 260px;
+ position: absolute;
+}
+ /* 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;
}
- #jotOpen::before {
+ /* 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;
+ left: 10px;
+ background-color: var(--link-color);
+ color: #ffffff;
+ width: 50px;
+ height: 50px;
+ line-height: 50px;
+ text-align: center;
+ font-size: 24px;
+ border-radius: 100%;
+}
+#item-delete-selected {
+ height: 50px;
+ width: 50px;
+ line-height: 50px;
+ font-size: 24px;
+ background-color: var(--link-color);
+ border-radius: 100%;
+ top: 120px;
+}
+ #item-delete-selected:hover,
+ #item-delete-selected:focus {
+ box-shadow: inset 0 0 100px rgba(0,0,0,.2);
+ }
+ /* Profile pics in Messages */
+ .event-wrapper .event-owner img,
+ .mail-conv-wrapper .media .contact-photo-wrapper img,
+ .mail-list-outside-wrapper .contact-photo-wrapper img {
+ border-radius: 100%;
+ }
+ #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;
+}
+/* TAGS, CATEGORIES, MENTIONS BUTTONS
+ ==================================
+ Restyled to be less obnoxious and tiny
+ now sized and spaced like they are on Mastodon
+*/
+a.tag.label,
+.wall-item-container .wall-item-bottom .wall-item-tags span.label {
+ border-radius: 4px !important;
+ display: inline-flex !important;
+ font-size: 12px !important;
+ font-weight: 500 !important;
+ padding: 6px 12px !important;
+ -webkit-text-decoration: none !important;
+ text-decoration: none !important;
+ margin: 2px !important;
+ background-image: none !important;
+ background-color: transparent !important;
+ box-shadow: none !important;
+ color: #0066FF !important;
+ border: 1px solid #0066FF;
+ text-shadow: none !important;
+}
+ .wall-item-bottom .label {
+ color: inherit;
+ }
+ .wall-item-bottom .label a {
+ color: inherit;
+ }
+ /* hide lightning bolt and person icons
+ pretty sure people know what "#" and "@" mean now
+ */
+ a.tag.label .fa-bolt::before,
+ .wall-item-bottom .label .fa-bolt::before {
content: '';
+ }
+ .wall-item-bottom .label .fa-user::before{
+ content: '';
+ }
+ /* undo hover for entire container*/
+ .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label {
+ filter: grayscale(0.5);
+ opacity: 0.8;
+ -webkit-transition: 0s;
+ -moz-transition: 0s;
+ -ms-transition: 0s;
+ transition: 0s;
+ }
+ /* replace with hover for individual tag */
+ .wall-item-container .wall-item-bottom .wall-item-tags span.label:hover,
+ .wall-item-container .wall-item-bottom .wall-item-tags span.label:focus,
+ .wall-item-container .wall-item-bottom .wall-item-tags span.label:focus-within {
+ filter: grayscale(0) !important;
+ opacity: 1 !important;
+ /* probably don't need vendor prefixed anymore but whatever...*/
+ -webkit-transition: all 0.25s ease-in-out !important;
+ -moz-transtion: all 0.25s ease-in-out !important;
+ -ms-transition: all 0.25s ease-in-out !important;
+ transition: all 0.25s ease-in-out !important;
+ }
+ /* Hashtag Buttons */
+ a.tag.label.btn-info,
+ .wall-item-bottom .wall-item-tags .tag.label.btn-info {
+ /* inherits everything from above */
+ }
+ a.tag.label.btn-info:hover, a.tag.label.btn-info:focus,
+ .wall-item-bottom .wall-item-tags .tag.label.btn-info:hover,
+ .wall-item-bottom .wall-item-tags .tag.label.btn-info:focus {
+ background-color: #0066FF !important;
+ color: white !important;
+ }
+ /* Category Buttons */
+ .wall-item-bottom .wall-item-tags .category.label.btn-success {
+ border-color: limegreen !important;
+ color: limegreen !important;
+ font-size: 12px;
+ }
+ /* replace (x) remove with icon button */
+ .wall-item-bottom .wall-item-tags .category.label.btn-success a:first-of-type {
+ margin-right: 4px;
+ }
+ .wall-item-bottom .wall-item-tags .category.label.btn-success a:last-of-type {
+ font-size: 0px;
+ }
+ .wall-item-bottom .wall-item-tags .category.label.btn-success a:last-of-type::after {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ font-size: 12px;
+ }
+ .wall-item-bottom .wall-item-tags .category.label.btn-success:hover,
+ .wall-item-bottom .wall-item-tags .category.label.btn-success:focus {
+ background-color: limegreen !important;
+ color: black !important;
+ }
+ /* when a category is removed need to visually indicate it */
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success){
+ border-color: #ccc !important;
+ color: #ccc !important;
+ }
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:first-of-type{
+ font-size: 12px;
+ text-decoration: line-through;
+ margin-right: 4px;
+ }
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type {
+ font-size: 0px;
+ }
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a:last-of-type::after {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ font-size: 12px;
+ text-decoration: line-through;
+ }
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):hover,
+ .wall-item-bottom .wall-item-tags .category.label:not(.btn-success):focus {
+ background-color: red !important;
+ color: #ccc !important;
+ }
+ /* overrides for Saved File page where buttons structure is different */
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success {
+ font-size: 12px !important;
+ }
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success a {
+ font-size: 0px !important;
+ margin: 0px;
+ }
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label.btn-success a::after {
+ margin-left: 0px;
+ }
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success){
+ font-size: 12px !important;
+ text-decoration: line-through !important;
+ }
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a {
+ font-size: 0px !important;
+ }
+ body.mod-filed .wall-item-bottom .wall-item-tags .category.label:not(.btn-success) a::after {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ font-size: 12px;
+ text-decoration: line-through;
+ }
+ /* Folder Buttons */
+ .wall-item-bottom .wall-item-tags .folder.label.btn-danger {
+ border-color: red !important;
+ color: red !important;
+ }
+ /* replace (x) remove with icon button */
+ .wall-item-bottom .wall-item-tags .folder.label.btn-danger a:first-of-type{
+ font-size: 0px;
+ }
+ .wall-item-bottom .wall-item-tags .folder.label.btn-danger a:last-of-type::after {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ font-size: 12px;
+ }
+ .wall-item-bottom .wall-item-tags .folder.label.btn-danger:hover,
+ .wall-item-bottom .wall-item-tags .folder.label.btn-danger:focus {
+ background-color: red !important;
+ color: white !important;
+ }
+ /* when a category is removed need to visually indicate it */
+ .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger){
+ border-color: #ccc !important;
+ color: #ccc !important;
+ text-decoration: line-through !important;
+ }
+ .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger) a:first-of-type{
+ font-size: 0px;
+ }
+ .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger) a:last-of-type::after {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ font-size: 12px;
+ }
+ .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger):hover,
+ .wall-item-bottom .wall-item-tags .folder.label:not(.btn-danger):focus{
+ background-color: black !important;
+ color: white !important;
+ }
+ /* @ Mention Buttons */
+ .wall-item-bottom .wall-item-tags .mention.label.btn-warning {
+ border-color: darkgoldenrod !important;
+ color: darkgoldenrod !important;
+ }
+ .wall-item-bottom .wall-item-tags .mention.label.btn-warning:hover,
+ .wall-item-bottom .wall-item-tags .mention.label.btn-warning:focus {
+ background-color: goldenrod !important;
+ border-color: goldenrod !important;
+ color: white !important;
+ }
+ /* Content Filter Buttons */
+ button.content-filter-button {
+ color: var(--link-color);
+ background-color: transparent;
+ border: 1px solid var(--link-color);
+ }
+ /* Comment buttons on other peple's profile Conversations */
+ a.btn-link.button-comments {
+ width: fit-content;
+ text-align:center !important;
+ display: block;
+ margin-top:10px;
+ color: var(--nav-icon-color) !important;
+ }
+ a.btn-link.button-comments:hover {
+ text-decoration: none;
+ color: var(--link-color) !important;
+ }
+ a.btn-link.button-comments .fa {
+ width: 50px;
+ display: block;
+ margin: 0 auto;
+ }
+ a.btn-link.button-comments .fa::before {
+ font-size: 24px;
+ }
+ a.btn-link.button-comments::after {
+ font-size: 14px !important;
+ position: relative;
+ top: 5px;
+ }
+ /* 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
+ ===========================
+*/
+@media screen and (min-width: 1921px){
+ .coverphoto {
+ max-width: 1920px;
+ left: 50% !important;
+ margin-left: -960px;
+ border-bottom-right-radius: 10px;
+ border-bottom-left-radius: 10px;
+ }
+}
+/* Small Laptop Screens
+ Some tablets in Landscape Orientation
+ =====================================
+*/
+@media screen and (max-width: 1280px) {
+ #search-box {
+ width: 18% !important;
+ }
+ #search-save {
+ width: 140px !important;
+ }
+}
+/* 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;
+ }
+ /* Contact Notification Action Buttons */
+ .intro-actions {
+ position: relative;
+ float: none !important;
+ }
+}
+/* Large Tablets in Portrait Orientation
+ =====================================
+*/
+@media screen and (max-width: 990px){
+ /* Friendica icon upper left */
+ #banner {
+ display: block !important;
+ padding: 0 !important;
+ margin: 8px 10px;
+ }
+ #friendica-logo-mask {
+ display: block !important;
+ }
+ /* hide search box - no room */
+ #search-box {
+ display: none;
+ }
+ /* show mobile search toggle */
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]{
+ display: block !important;
+ position: fixed !important;
+ left: 100px;
+ top: 6px;
+ }
+ /* force display of mobile search box */
+ #search-mobile {
+ top: 115px !important;
+ /* frio border-color */
+ }
+ #search-mobile .col-xs-12 {
+ background-color: var(--nav-bg);
+ }
+ #search-mobile.collapse.in,
+ #search-mobile.collapse.in * {
+ display: block !important;
+ }
+ #topbar-first .navbar-toggle[data-target="aside"] {
+ position: fixed;
+ top: 6px;
+ left: 50px;
+ }
+ /* change aside toggle icon */
+ .navbar-toggle .fa-ellipsis-v::before,
+ #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before {
+ content: "\f152";
+ }
+ body.aside-out .navbar-toggle .fa-ellipsis-v::before,
+ body.aside-out #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before {
+ content: "\f191";
+ }
+ #topbar-first .nav > .account {
+ right: 24px;
+ }
+ #jotOpen::before {
+ content: '';
+ margin: 0;
+ }
+ #mention-link {
+ padding: 0 8px !important;
+ }
+ #mention-link span:last-of-type {
+ display: none;
+ }
+ .offcanvas-right-overlay,
+ aside::before {
+ background-color: rgba(255, 255, 255, 0.4);
+ }
+ /* Profile Aside Mobile */
+ body.mod-contact #content,
+ body.mod-profile #content,
+ body.mod-photos #content {
+ margin-top: 350px;
+ }
+ /* only seen on your own Recent Photos page */
+ body.mod-profile #sidebar-photos-albums::before {
+ content: '\f083';
+ font-family: ForkAwesome;
+ font-size: 150px;
+ position: fixed;
+ top: 175px;
+ left: 0;
+ right: 0;
+ text-align: center;
+ color: var(--nav-icon-color);
+ opacity: .5;
+ z-index: -1;
+ transition-duration: .5s;
+ transition-property: left;
+ }
+ body.mod-profile aside.canvas-sliding #sidebar-photos-albums::before,
+ body.mod-profile aside.canvas-slid #sidebar-photos-albums::before {
+ left: 50%;
+ }
+ /* hide camera icon on other profile Recent Photos pages */
+ body.mod-profile .vcard + #sidebar-photos-albums::before {
+ content: '';
+ }
+
+ /* 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 {
+ margin-top: 0px !important;
+ left: -300px !important;
+ right: auto !important;
+ display: block !important;
+ padding-top: 120px;
+ transition-duration: .5s !important;
+ z-index: auto;
+ }
+ body.mod-contact aside.canvas-slid,
+ body.mod-photos aside.canvas-slid,
+ body.mod-profile aside.canvas-slid {
+ left: 0px !important;
+ right: auto !important;
+ z-index: 20;
+ }
+ body.mod-contact aside #profile-photo-wrapper,
+ body.mod-photos aside #profile-photo-wrapper,
+ body.mod-profile aside #profile-photo-wrapper {
+ position: fixed;
+ top: 150px;
+ left: 50%;
+ height: 150px;
+ width: 150px;
+ margin-left: -75px;
+ transition-timing-function: ease-in-out;
+ transition-duration: .3s;
+ transition-property: all;
+ }
+ body.mod-contact .profile-header h3.p-name,
+ body.mod-photos .profile-header h3.p-name,
+ body.mod-profile .profile-header h3.p-name {
+ position: fixed;
+ width: 100%;
+ top: 300px;
+ left: 50%;
+ margin-left: -50%;
+ transition-timing-function: ease-in-out;
+ transition-duration: .3s;
+ transition-property: all;
+
+ }
+ body.mod-contact .profile-header .p-addr,
+ body.mod-photos .profile-header .p-addr,
+ body.mod-profile .profile-header .p-addr {
+ position: fixed;
+ width: 50%;
+ top: 400px;
+ left: 50%;
+ margin-left: -25%;
+ transition-timing-function: ease-in-out;
+ transition-duration: .3s;
+ transition-property: all;
+ }
+ /* bounce effect */
+ body.mod-contact aside.canvas-sliding #profile-photo-wrapper,
+ body.mod-photos aside.canvas-sliding #profile-photo-wrapper,
+ body.mod-profile aside.canvas-sliding #profile-photo-wrapper {
+ margin-left: -150px;
+ }
+ body.mod-contact aside.canvas-sliding .profile-header h3.p-name,
+ body.mod-photos aside.canvas-sliding .profile-header h3.p-name,
+ body.mod-profile aside.canvas-sliding .profile-header h3.p-name {
+ margin-left: calc(-50% - 75px);
+ }
+ body.mod-contact aside.canvas-sliding .profile-header .p-addr,
+ body.mod-photos aside.canvas-sliding .profile-header .p-addr,
+ body.mod-profile aside.canvas-sliding .profile-header .p-addr {
+ margin-left: -300px;
+ }
+ /* centered in right-hand side */
+ body.mod-contact aside.canvas-slid #profile-photo-wrapper,
+ body.mod-photos aside.canvas-slid #profile-photo-wrapper,
+ body.mod-profile aside.canvas-slid #profile-photo-wrapper {
+ margin-left: -225px;
+ }
+ body.mod-contact aside.canvas-slid .profile-header h3.p-name,
+ body.mod-photos aside.canvas-slid .profile-header h3.p-name,
+ body.mod-profile aside.canvas-slid .profile-header h3.p-name {
+ margin-left: calc(-50% - 150px);
+ }
+ body.mod-contact aside.canvas-slid .profile-header .p-addr,
+ body.mod-photos aside.canvas-slid .profile-header .p-addr,
+ body.mod-profile aside.canvas-slid .profile-header .p-addr {
+ margin-left: calc(-25% - 150px);
+ }
+ /* Cover Photo Mobile */
+ .coverphoto.canvas-sliding,
+ .coverphoto.canvas-slid{
+ left: 0px !important;
+ right: 0px !important;
+ bottom: 0px;
+ background-color: var(--background-color);
+ overflow: visible;
+ }
+ .coverphoto.canvas-slid::after {
+ content: '';
+ position: absolute;
+ top: 500px;
+ left: 0px;
+ width: 100%;
+ height: 500%;
+ 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
+ Some Small tablets in Portrait Orientation
+ ======================================
+*/
+@media screen and (max-width: 768px), (max-height: 480px) and (max-width: 960px) and (orientation: landscape) {
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]{
+ left: 10%;
+ }
+ .topbar ul.nav {
+ position: relative !important;
+ left: 10% !important;
+ margin-left: 0!important;
+ }
+ #search-save {
+ width: 100px !important;
+ }
+ #search-save .fa-plus::after {
+ content: var(--follow-button-text);
+ }
+ #search-save .fa-floppy-o::after {
+ content: var(--save-button-text);
+ }
+ a.wall-item-name-link, span.fakelink {
+ font-weight: bold;
+ }
+ .wall-item-container iframe {
+ aspect-ratio: 5/4;
+ }
+ /* new mobile layout */
+ body {
+ padding-top: 65px !important;
+ padding-bottom: 55px !important;
+ }
+
+ /* Friendica icon upper left */
+ #banner {
+ display: block !important;
+ padding: 0 !important;
+ margin: 8px 10px !important;
+ }
+ #friendica-logo-mask {
+ display: block !important;
+ }
+ #topbar-first {
+ top: auto;
+ bottom: 0;
+ box-shadow: 2px 0px 5px rgba(0,0,0,.5);
+ }
+ #topbar-first .topbar-nav .arrow {
+ display: none;
+ }
+ /* re-reveal the user profile toggle */
+ #topbar-first .nav > .account {
+ position: fixed;
+ display: block !important;
+ top: 0;
+ right: 8px;
+ }
+ #topbar-first .nav > .account img {
+ margin: 0;
+ }
+ #topbar-first .nav > .account span.caret {
+ display: none;
+ }
+ /* overlay mobile nav toggle invisibly */
+ #topbar-first .offcanvas-right-toggle {
+ position: fixed;
+ top: -3px;
+ right: 7px;
+ color: transparent;
+ z-index: 10000;
+ }
+ /* move sidebar toggle to bottom bar */
+ #topbar-first .navbar-toggle[data-target="aside"]{
+ position: fixed;
+ top: auto;
+ left: auto;
+ bottom: 5px;
+ }
+ /* change icon */
+ .navbar-toggle .fa-ellipsis-v::before,
+ #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before {
+ content: "\f152";
+ }
+ body.aside-out .navbar-toggle .fa-ellipsis-v::before,
+ body.aside-out #topbar-first .navbar-toggle[data-target="aside"] .fa-angle-double-right::before {
+ content: "\f191";
+ }
+ /* move search button right */
+ #topbar-first .navbar-toggle[data-target="#search-mobile"] {
+ position: relative !important;
+ display: block !important; /* show in landscape on phones */
+ top: 0;
+ left: auto;
+ right: auto;
margin: 0;
}
- #mention-link span:last-of-type {
- margin-right: 42px;
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed){
+ color: var(--link-color);
+ border-bottom: 3px solid var(--link-color);
+ background-color: transparent !important;
+ border-radius: 0 !important;
+ margin-top: 0px;
+ }
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed) .fa-search::before {
+ content: '\f00e';
+ }
+ /* fix spacing of icons */
+ .topbar ul.nav {
+ position: absolute !important;
+ left: 50px !important;
+ right: 50px !important;
+ display: flex;
+ justify-content: space-between;
}
- }
- @media screen and (max-width: 768px){
- #topbar-first .navbar-toggle[data-target="#search-mobile"]{
- position: fixed !important;
- left: 15%;
+ #topbar-first .topbar-nav .nav-segment {
+ margin: 0px;
}
#search-mobile {
- top: 110px !important;
+ top: 60px !important;
}
- .wall-item-container iframe{
- aspect-ratio: 5/4;
+ /* always show on phones in landscape */
+ #search-mobile.collapse.in,
+ #search-mobile.collapse.in * {
+ display: block !important;
+ }
+ /* app-style notification menu */
+ #nav-notifications-menu {
+ position: fixed;
+ top: 60px;
+ bottom: 51px;
+ left: 0;
+ right: 0;
+ width: 100% !important;
+ min-width: unset;
+ max-width: unset;
+ min-height: unset;
+ max-height: unset !important;
+ margin: 0 !important;
+ box-shadow: none;
+ }
+ #nav-notifications-menu::before {
+ content: '\f00d';
+ font-family: ForkAwesome;
+ position: absolute;
+ top: 8px;
+ right: 12px;
+ height: 40px;
+ width: 40px;
+ background-color: var(--link-color);
+ color: white;
+ font-size: 24px;
+ border-radius: 100%;
+ line-height: 40px;
+ text-align: center;
+ display: block;
+ }
+ #offcanvasUsermenu {
+ background-color: var(--nav-bg) !important;
+ }
+ #offcanvasUsermenu ul.list-group {
+ -webkit-box-shadow: none !important;
+ -moz-box-shadow: none !important;
+ box-shadow: none !important;
+ }
+ #offcanvasUsermenu ul.list-group li:first-of-type img {
+ max-width: unset !important;
+ max-height: unset !important;
+ height: 40px !important;
+ width: 40px !important;
+ border-radius: 100% !important;
+ }
+ #offcanvasUsermenu li.divider {
+ display: none !important;
+ }
+ #offcanvasUsermenu li.list-group-item,
+ #offcanvasUsermenu li.list-group-item a {
+ border: transparent !important;
+ background-color: transparent !important;
+ color: var(--nav-icon-color) !important;
+ width: 90% !important;
+ margin: 0 auto;
+ }
+ #offcanvasUsermenu li.list-group-item:hover {
+ background-color: #333 !important;
+ border-radius: 8px !important;
+ }
+ #offcanvasUsermenu li.list-group-item:hover a {
+ color: #fff !important;
+ }
+ #offcanvasUsermenu li.list-group-item:first-of-type:hover {
+ background-color: revert !important;
+ }
+ /* force mobile search in landscape on phones */
+ #search-box {
+ display: none !important;
+ }
+ /* position delete button */
+ #item-delete-selected {
+ top: 60px;
+ right: 10px;
+ }
+ /* move top bars around */
+ #topbar-second {
+ top: 0px;
+ padding: 0;
+ }
+ #topbar-second div.container{
+ position: absolute;
+ left: 55px;
+ right: 55px;
+ }
+ #topbar-second #tabmenu {
+ width: 100%;
+ }
+ /* override and show mobile tabs in landscape */
+ #topbar-second #tabmenu ul.tabbar.hidden-xs {
+ display: none !important;
+ }
+ #topbar-second #tabmenu ul.tabbar.visible-xs {
+ display: block !important;
+ }
+ #topbar-second ul.tabbar {
+ text-align: center;
+ max-width: 100%;
+ }
+ #topbar-second ul.tabbar > li:first-of-type {
+ max-width: 75%;
+ overflow: hidden;
+ margin-right: 50px;
+ }
+ #topbar-second ul.tabbar li:first-of-type ul.tabs {
+ max-width: 100%;
+ }
+ #topbar-second ul.tabbar li:first-of-type ul.tabs li {
+ width: 100%;
+ height: 100%;
+ }
+ #topbar-second ul.tabbar li:first-of-type ul.tabs li a {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ /* prevent dropdown being pushed off toolbar */
+ #topbar-second ul.tabbar > li:last-of-type {
+ margin-left: -50px;
+ border-bottom: 4px solid var(--link-color);
+ }
+ #topbar-second ul.tabbar > li:last-of-type li.dropdown {
+ margin-left: 0px !important;
+ }
+ #dropdownMenuTools-xs {
+ height: 60px;
+ }
+ ul.tabs-extended .dropdown.open .fa-chevron-down::before{
+ content: '\f077';
+ }
+ #jotOpen, #search-save, #mention-link {
+ position: fixed;
+ bottom: 65px;
+ right: 10px;
+ border-radius: 100% !important;
+ height: 50px;
+ width: 50px !important;
+ line-height: 50px;
+ border: none !important;
+ box-shadow: none !important;
+ }
+ #mention-link span:last-of-type {
+ display: none;
+ }
+ #mention-link span:first-of-type {
+ float: none;
+ position: relative;
+ top: 2px;
+ }
+ #search-save .fa-plus::after,
+ #search-save .fa-floppy-o::after {
+ display: none;
+ }
+ #search-save .fa-plus::before,
+ #search-save .fa-floppy-o::before {
+ content: '\f0c7' !important;
+ }
+ .fa-edit::before,
+ .fa-pencil-square-o::before {
+ content: "\f040";
+ }
+ .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;
+ top: 58px;
+ left: 0px;
+ right: 0px;
+ bottom: 50px;
+ width: 100% !important;
+ overflow: auto !important;
+ overflow-x: hidden !important;
+ }
+ #topbar-second .dropdown-menu li {
+ height: auto !important;
+ }
+ #topbar-second .dropdown-menu li a,
+ .tabs .dropdown-menu li a {
+ font-size: 18px !important;
+ }
+ .topbar .dropdown-header {
+ font-size: 18px !important;
+ }
+ .topbar .dropdown-header .dropdown-header-link .btn-link {
+ font-size: 18px !important;
+ margin-right: 40px;
+ }
+ aside.offcanvas-xs {
+ padding-top: 60px;
+ padding-bottom: 60px;
+ }
+ body.mod-profile #sidebar-photos-albums::before {
+ top: 125px;
+ }
+ body.mod-contact aside #profile-photo-wrapper,
+ body.mod-photos aside #profile-photo-wrapper,
+ body.mod-profile aside #profile-photo-wrapper {
+ top: 100px;
+ }
+ body.mod-contact .profile-header h3.p-name,
+ body.mod-photos .profile-header h3.p-name,
+ body.mod-profile .profile-header h3.p-name {
+ top: 255px;
+ }
+ body.mod-contact .profile-header .p-addr,
+ body.mod-photos .profile-header .p-addr,
+ body.mod-profile .profile-header .p-addr {
+ top: 345px;
+ }
+ .coverphoto,
+ .coverphoto.canvas-sliding,
+ .coverphoto.canvas-slid {
+ top: 55px;
+ }
+ #message-new a {
+ height: 50px;
+ width: 50px;
+ background-color: var(--link-color);
+ line-height: 50px;
+ font-size: 24px;
+ text-align: center;
+ border-radius: 100%;
+ display: block;
+ color: white;
+ padding: 0;
+ }
+ #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)
+ =========================================
+*/
+@media screen and (max-width: 600px) and (orientation: portrait) {
+ body.mod-contact aside,
+ body.mod-photos aside,
+ body.mod-profile aside {
+ left: -100% !important;
+ right: 0% !important;
+ max-width: 100% !important;
+ width: 100% !important;
+ padding-top: 60px;
+ background-color: var(--background-color) !important;
+ }
+ /* only seen on your own Recent Photos page */
+ body.mod-profile #sidebar-photos-albums::before {
+ transition-property: top;
+ }
+ body.mod-profile aside.canvas-sliding #sidebar-photos-albums::before,
+ body.mod-profile aside.canvas-slid #sidebar-photos-albums::before {
+ left: 0px;
+ top: 150%;
+ }
+ body.mod-contact aside.canvas-slid,
+ body.mod-photos aside.canvas-slid,
+ body.mod-profile aside.canvas-slid {
+ left: 0px !important;
+ }
+ body.mod-contact aside.canvas-slid::before,
+ body.mod-photos aside.canvas-slid::before,
+ body.mod-profile aside.canvas-slid::before {
+ opacity: 0;
+ }
+ body.mod-contact aside #profile-photo-wrapper,
+ body.mod-photos aside #profile-photo-wrapper,
+ body.mod-profile aside #profile-photo-wrapper {
+ top: 100px;
+ }
+ body.mod-contact .profile-header h3.p-name,
+ body.mod-photos .profile-header h3.p-name,
+ body.mod-profile .profile-header h3.p-name {
+ top: 255px;
+ }
+ body.mod-contact .profile-header .p-addr,
+ body.mod-photos .profile-header .p-addr,
+ body.mod-profile .profile-header .p-addr {
+ top: 345px;
+ width: 80%;
+ margin-left: -40%;
+ }
+ /* bounce effect */
+ body.mod-contact aside.canvas-sliding #profile-photo-wrapper,
+ body.mod-photos aside.canvas-sliding #profile-photo-wrapper,
+ body.mod-profile aside.canvas-sliding #profile-photo-wrapper {
+ margin-left: -75px;
+ top: 150% !important;
+ }
+ body.mod-contact aside.canvas-sliding .profile-header h3.p-name,
+ body.mod-photos aside.canvas-sliding .profile-header h3.p-name,
+ body.mod-profile aside.canvas-sliding .profile-header h3.p-name {
+ margin-left: -50%;
+ top: 150% !important;
+ }
+ body.mod-contact aside.canvas-sliding .profile-header .p-addr,
+ body.mod-photos aside.canvas-sliding .profile-header .p-addr,
+ body.mod-profile aside.canvas-sliding .profile-header .p-addr {
+ margin-left: -25%;
+ top: 150% !important;
+ }
+
+ body.mod-contact aside.canvas-slid #profile-photo-wrapper,
+ body.mod-photo aside.canvas-slid #profile-photo-wrapper,
+ body.mod-profile aside.canvas-slid #profile-photo-wrapper {
+ margin-left: -75px;
+ top: 150% !important;
+ }
+ body.mod-contact aside.canvas-slid .profile-header h3.p-name,
+ body.mod-photo aside.canvas-slid .profile-header h3.p-name,
+ body.mod-profile aside.canvas-slid .profile-header h3.p-name {
+ margin-left: -50%;
+ top: 150% !important;
+ }
+ body.mod-contact aside.canvas-slid .profile-header .p-addr,
+ body.mod-photo aside.canvas-slid .profile-header .p-addr,
+ body.mod-profile aside.canvas-slid .profile-header .p-addr {
+ margin-left: -25%;
+ top: 150% !important;
+ }
+ .coverphoto {
+ transition-duration: .5s;
+ transition-property: top;
+ }
+ body.mod-contact.aside-out .coverphoto,
+ body.mod-photo.aside-out .coverphoto,
+ body.mod-profile.aside-out .coverphoto,
+ body.mod-contact aside.canvas-slid .coverphoto,
+ body.mod-photo aside.canvas-slid .coverphoto,
+ body.mod-profile aside.canvas-slid .coverphoto {
+ top: 150% !important;
+ left: 0px;
+ right: 0px;
+ }
+}
+/* Narrow Screen Phones in Portrait Orientation
+ ============================================
+*/
+@media screen and (max-width: 400px) and (orientation: portrait) {
+ /* remove action button labels if screen is too narrow */
+ .wall-item-actions-row button::after {
+ content: '.';
+ color: transparent;
+ }
+ /* NOTE: cannot simply empty or display none or button alignment gets messed up! */
+ .wall-item-actions-row .button-browser-share::after {
+ display: none !important;
+ }
+ ul.nav-tabs {
+ display: block;
+ }
+ ul.nav-tabs li {
+ width: 98%;
+ text-align: center;
+ }
+ ul.nav-tabs li a {
+ border: 1px solid var(--link-color) !important;
+ border-radius: 8px !important;
+ }
+ ul.nav-tabs li:not(.active) a:hover,
+ ul.nav-tabs li:not(.active) a:focus {
+ background-color: rgba(0,0,0,.2);
+ }
+ ul.nav-tabs li.active {
+ border: none !important;
+ }
+ ul.nav-tabs li.active a {
+ background-color: var(--link-color) !important;
+ color: #fff !important;
+ }
+ .hovercard {
+ max-width: 100%;
+ }
+}
+/* Narrow Screen Phones in Landscape Orientation
+ ==============================================
+*/
+@media screen and (max-height: 400px) and (orientation: landscape) {
+ #topbar-first {
+ transition-duration: .5s;
+ transition-property: bottom;
+ bottom: -55px;
+ }
+ header #banner {
+ background-color: var(--nav-bg);
+ border-radius: 8px;
+ z-index: 1030;
+ }
+ #topbar-first .navbar-toggle[data-target="aside"] {
+ position: fixed !important;
+ left: 10px;
+ bottom: 10px;
+ transition-duration: .5s;
+ background-color: var(--link-color);
+ color: white;
+ height: 50px;
+ width: 50px;
+ border-radius: 100%;
+ line-height: 32px;
+ }
+ #topbar-first .navbar-toggle[data-target="#search-mobile"],
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]:not(.collapsed) {
+ position: fixed !important;
+ top: auto;
+ bottom: 10px;
+ right: 10px;
+ transition-duration: .5s;
+ background-color: var(--link-color) !important;
+ color: white;
+ height: 50px;
+ width: 50px;
+ border-radius: 100% !important;
+ line-height: 32px;
+ }
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]:hover,
+ #topbar-first .navbar-toggle[data-target="#search-mobile"]:focus {
+ box-shadow: inset 0 0 100px rgba(0,0,0,.2);
+ }
+ .fa-fw {
+ width: auto;
+ }
+ #topbar-first .offcanvas-right-toggle {
+ top: -2px;
+ right: 10px;
+ padding: 0 !important;
+ }
+ #topbar-first .nav > .account {
+ top: 0px;
+ right: 5px;
+ }
+ #main-menu img {
+ border: 5px solid var(--link-color);
+ border-radius: 100%;
+ box-sizing: unset;
+ }
+ #search-mobile {
+ top: 40% !important;
+ border: 10px solid var(--link-color);
+ border-radius: 8px;
+ left: 50%;
+ width: 80%;
+ margin-left: -40%;
+ box-shadow: 0 0 50px rgba(0,0,0,.75);
+ }
+ #search-mobile .col-xs-12 {
+ background-color: var(--nav-bg);
+ }
+ #topbar-second {
+ transition-duration: .5s;
+ transition-property: top;
+ top: -60px;
+ }
+ #topbar-first .nav > li > a:hover,
+ #topbar-first .nav > li > a:focus,
+ #topbar-first .nav > li > button:not(#main-menu):hover,
+ #topbar-first .nav > li > button:not(#main-menu):focus,
+ #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):hover,
+ #topbar-first button.navbar-toggle:not(.offcanvas-right-toggle):focus,
+ nav.navbar .nav > li > a:hover,
+ nav.navbar .nav > li > a:focus,
+ nav.navbar .nav > li > button:hover,
+ nav.navbar .nav > li > button:focus {
+ background-color: var(--link-color) !important;
+ border-radius: 100% !important;
+ box-shadow: inset 0 0 100px rgba(0,0,0,.2);
+ }
+ #topbar-first button.navbar-toggle.offcanvas-right-toggle:hover,
+ #topbar-first button.navbar-toggle.offcanvas-right-toggle:focus {
+ border-radius: 100% !important;
+ }
+ #topbar-first .topbar-actions {
+ z-index: 1070;
+ }
+ /* if notifications is left open when phone is rotated */
+ #nav-notifications-menu {
+ top: 0;
+ bottom: 0;
+ z-index: 10000;
+ }
+ #offcanvasUsermenu {
+ top: 0px;
+ }
+ #offcanvasUsermenu li:first-of-type img {
+ display: none;
+ }
+ #offcanvasUsermenu li:first-of-type {
+ font-weight: 700;
+ }
+ .offcanvas-right-overlay {
+ top: 0px;
+ }
+ /* Profile Pages */
+ body.mod-contact #content,
+ body.mod-profile #content,
+ body.mod-photos #content {
+ margin-top: 200px !important;
+ }
+ body.mod-profile #sidebar-photos-albums::before {
+ top: 25px;
+ }
+ body.mod-contact aside,
+ body.mod-photos aside,
+ body.mod-profile aside {
+ padding-top: 50px;
+ padding-bottom: 50px;
+ }
+ body.mod-contact aside.canvas-slid,
+ body.mod-photos aside.canvas-slid,
+ body.mod-profile aside.canvas-slid {
+ left: 0px !important;
+ right: auto !important;
+ max-width: 300px !important;
+ background-color: transparent !important;
+ z-index: 20;
+ }
+ body.mod-contact aside.canvas-slid::before,
+ body.mod-photos aside.canvas-slid::before,
+ body.mod-profile aside.canvas-slid::before {
+ opacity: 1;
+ }
+ body.mod-contact aside #profile-photo-wrapper,
+ body.mod-photos aside #profile-photo-wrapper,
+ body.mod-profile aside #profile-photo-wrapper {
+ top: 10px;
+ }
+ body.mod-contact .profile-header h3.p-name,
+ body.mod-photos .profile-header h3.p-name,
+ body.mod-profile .profile-header h3.p-name {
+ top: 155px;
+ }
+ body.mod-contact .profile-header .p-addr,
+ body.mod-photos .profile-header .p-addr,
+ body.mod-profile .profile-header .p-addr {
+ top: 205px;
+ width: 50%;
+ margin-left: -25%;
+ }
+ .coverphoto.canvas-sliding,
+ .coverphoto.canvas-slid,
+ .coverphoto {
+ top: 0px;
+ }
+ }
+/* LOGIN AND INFO SCREENS */
+body.mod-home {
+ padding-top: 10px !important;
+}
+.mod-home .navbar,
+.mod-home #topbar-second{
+ background-color: transparent !important;
+}
+.mod-home #nav-about {
+ background-color: var(--link-color);
+ height: 50px;
+ width: 50px;
+ color: white !important;
+ border-radius: 100% !important;
+ right: 15px;
+}
+ .mod-home #nav-about:hover,
+.mod-home #nav-about:focus {
+ background-color: var(--link-color) !important;
+ box-shadow: inset 0 0 100px rgba(0,0,0,.1);
+}
+.mod-home #nav-about .fa-info {
+ line-height: 24px;
+ width: auto;
+ display: block;
+}
+ @media screen and (max-width: 768px){
+ .mod-home #nav-about .fa-info {
+ line-height: 32px;
}
}
- @media screen and (max-width: 480px){
- #topbar-first .navbar-toggle[data-target="#search-mobile"]{
- left: 10%;
- }
- .topbar ul.nav {
- position: relative !important;
- left: 10% !important;
- margin-left: 0!important;
- }
- #search-save {
- width: 100px !important;
- }
- #search-save .fa-plus::after {
- content: 'Follow';
- }
- #search-save .fa-floppy-o::after {
- content: 'Save';
- }
- }
\ 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 a77e1e5..47f71ae 100644
--- a/bookface_light.php
+++ b/bookface_light.php
@@ -7,28 +7,29 @@
*
* Name: Bookface Light
* Licence: AGPL
- * Author: Kristi H. @kmh@friendica.world feb @feb@loma.ml
+ * Author: Pygoscelis Papua @randompenguin@friendica.world feb @feb@loma.ml Phil @phil@loma.ml
* Overwrites: nav_bg, nav_icon_color, background_color, background_image, contentbg_transp
- * Accented: Yes
- * Version: 1.2
+ * Accented: yes
+ * Version: 1.7
*/
-
+use Friendica\DI;
require_once 'view/theme/frio/php/PHPColors/Color.php';
$accentColor = new Color($scheme_accent);
-
+$customColor = DI::pConfig()->get($uid, 'frio', 'link_color') ?: '';
+if ($customColor){
+ $customColor = new Color(''.$customColor.'');
+}
+$menu_background_hover_color = ($customColor) ? '#'.$customColor->lighten(45) : '#'.$accentColor->lighten(45);
$nav_bg = '#ffffff';
-$nav_icon_color = '#606637';
-$link_color = '#' . $accentColor->lighten(10);
- // override ugly blue accent color
- if ( $link_color == "#33a2e0" ){
+$background_color = '#f2f4f7';
+$link_color = ($customColor) ? '#'.$customColor->getHex() : '#'.$accentColor->lighten(10);
+ // override ugly blue accent color and prevent setting accent to nav or bg color
+ if ( $link_color == "#33a2e0" || $link_color == $nav_bg || $link_color == $background_color ){
$link_color = "#0066ff";
}
-$background_color = '#f2f4f7';
-$background_image = '';
-$contentbg_transp = 100;
-$menu_background_hover_color = '#' . $accentColor->lighten(45);
+$nav_icon_color = '#65686C';
$font_color = '#313131';
$font_color_darker = '#333';
-
+$contentbg_transp = 100;