/******************************************************************************\
* Site Wide Styles *
\******************************************************************************/
/* Background Tiled Image */
html {
background-image: url('https://cdn.masto.host/plush/site_uploads/files/000/000/001/original/2021-plush-city-pattern.png');
background-repeat: repeat;
background-attachment: scroll;
background-position: 20% 21%;
}
/* Resetting defaults to make our scheme work */
body {
background-image: none;
background-color: transparent;
}
/* Container for content pages */
body div.public-layout {
margin-top: -10px;
padding-top: 10px;
background: linear-gradient( #a8c8e1cc 0%,
#a8c8e1cc 50%,
#b77ef1cc 100%);
}
@media (prefers-color-scheme: dark) {
body div.public-layout {
background: linear-gradient( #01092ecc 0%,
#01092ecc 50%,
#310554df 100%);
}
}
/* Background of Web App */
body.app-body {
background-color: #100300cc;
}
.public-layout .footer h4,
/* Footer column header */
.public-layout .hero-widget__counter strong {
/* Landing page about box counters */
color: #fff;
text-shadow: 2px 2px 2px #000;
}
/* Footer Links */
.public-layout .footer ul a {
color: #f7f9fc;
text-shadow: 2px 2px 2px #000;
}
/* Footer Mastodon logo */
.public-layout .footer .brand svg path {
fill: #f7f9fc;
;
}
/* Landing page and about/more content boxes */
@media (prefers-color-scheme: dark) {
.box-widget,
.contact-widget,
.landing-page__information.contact-widget {
background-color: #282b39;
}
}
@media (prefers-color-scheme: light) {
/* Profile Page: Endorsements Widget */
.public-layout .endorsements-widget,
.public-layout .endorsements-widget h4,
.public-layout .endorsements-widget .account a,
.public-layout .endorsements-widget .account span,
.public-layout .endorsements-widget .account span strong,
/* Landing Page: Administered By widget */
.contact-widget,
.contact-widget h4,
.contact-widget a,
.contact-widget .account a,
.contact-widget .account span strong {
color: #000;
}
}
/* Profile Page: Stats Background - Fixing light mode */
@media (prefers-color-scheme: light) {
.public-layout .public-account-header__bar::before {
background-color: #fff;
}
.public-layout .public-account-header__tabs__tabs .counter .counter-number,
.public-layout .public-account-header__tabs__tabs .counter .counter-label {
color: #000;
}
}
.landing-page__call-to-action,
/* Landing page and about/more content boxes */
.directory__tag > a,
/* Directory tags */
.directory__tag > div,
/* Directory tags */
.landing .hero-widget__footer,
/* Landing page about box */
.hero-widget__text,
/* Landing page about box */
.directory {
/* Directory user list */
background-color: #282b39;
}
/* Profile page header */
.public-layout .header {
background: #282b39;
}
/* Profile page header nav button */
.public-layout .header .nav-button {
background: #99bfce;
color: #282b39 !important;
}
.page-header,
/* Directory call to action */
.directory__tag > a:hover {
/* Directory tag list hover */
background-color: #43394f;
}
/* Directory user list borders */
.accounts-table tbody td {
border-bottom: 1px solid #43394f;
}
/* Landing page buttons */
.public-layout .simple_form .block-button,
.public-layout .simple_form .button,
.public-layout .simple_form button,
.public-layout .button.button-alternative {
background-color: #99bfce;
font-size: 150%;
}
/* Profile Page: CoC Container CTA button */
.public-layout .column-1 .button.button-alternative {
font-size: 120%;
padding: 15px 10px;
line-height: 100%;
margin-left: -5px;
white-space: normal;
}
.rich-formatting em,
.rich-formatting strong,
.rich-formatting,
.rich-formatting li,
.rich-formatting p,
.landing .hero-widget__footer,
/* Landing page about box */
.landing .hero-widget__counter span,
/* Landing page about box counter labels */
.directory__tag h4 .fa,
/* Directory tag hashtag */
.page-header p,
/* Directory call to action text */
.simple_form .input.boolean label a,
/* Landing page links */
.landing .simple_form .user_agreement .label_input > label,
/* Invite Request Top Text */
.landing .simple_form p.lead,
/* Invite Request Top Text */
.simple_form .hint,
/* Invite request hint text */
.hero-widget__text p,
/* Landing page about box text */
.public-layout .header .nav-link {
/* Profile page header links */
color: #bed6e3;
}
.rich-formatting a,
.rich-formatting li a,
.simple_form .hint a,
/* Password reset link */
.landing .hero-widget__text a,
/* Landing page, links in CoC nutshell */
.rich-formatting p a {
color: #99bfce;
}
.rich-formatting h1,
.rich-formatting h2,
.rich-formatting h3,
.rich-formatting h4,
.rich-formatting h5,
.account .account__display-name,
/* Directory username */
.directory__tag h4 small,
/* Directory tag counts */
.accounts-table__count small/* Directory count labels */
{
color: #c7d8ef;
}
.landing #coc-container h2,
/* Landing page CoC nutshell title */
.landing .hero-widget h4,
/* Landing page about box headers */
.public-layout .column-1 .hero-widget #coc-container h2,
/* Profile Page: CoC Container Title */
.hero-widget__text h4 {
/* Landing page about box */
color: #FFF;
}
.public-layout .simple_form .button,
/* Landing page buttons */
.public-layout .simple_form button,
/* Landing page buttons */
.public-layout .button.button-alternative {
/* Landing page CoC nutshell button */
color: #241f2b;
width: 100%;
white-space: normal;
line-height: 120%;
padding: 2%;
}
/* Setting line height back to 20px from 22px in v4 */
.reply-indicator__content,
.status__content {
line-height: 20px;
}
/* Enhancing contrast of boost icon (v4.0.2) */
.theme-default button.icon-button i.fa-retweet {
/* color: #cbc9ff; /* Brightened Active */
/* color: #8c8dff; /* Stock Active */
/* color: #606984; /* Stock Grey */
background-image: url("data:image/svg+xml;utf8,");
}
/* Enhancing contrast of boost icon on hover (v4.0.2) */
.theme-default button.icon-button:hover i.fa-retweet {
background-image: url("data:image/svg+xml;utf8,");
}
element {
}
.theme-default button.icon-button i.fa-retweet {
background-image: url("data:image/svg+xml;utf8,");
}
.theme-default button.icon-button.disabled:hover i.fa-retweet, button.icon-button.disabled i.fa-retweet {
background-image: url("data:image/svg+xml;utf8,");
}
/******************************************************************************\
* End Site-wide Styles *
\******************************************************************************/
/******************************************************************************\
* Website: Hide Mastodon-Specific Components *
\******************************************************************************/
/* Hide Masto Footer Components (Mastodon v4.0.2 - ) */
.compose-panel .link-footer p,
.getting-started .link-footer p {
display: none;
}
/* (but show the instance ones)(Mastodon v4.0.2 - ) */
.compose-panel .link-footer p:first-child,
.getting-started .link-footer p:first-child {
display: block;
}
/* Hide "Publish!" text on toot button */
.compose-form__publish-button-wrapper button,
.ui__header__links a.button {
color: #595aff;
color: #595aff00;
font-size: 1px;
line-height: 1px;
text-align: right;
}
/* Replace Text on Toot Button */
.compose-form__publish-button-wrapper button:before,
.ui__header__links a.button:before {
display: block;
text-align: center;
font-size: 15px;
line-height: 22px;
margin-top: 2px;
color: #FFF;
content: "Plush!";
}
/* "Fix" Sign-up Buttons */
.ui__header__links a.button[href="/auth/sign_up"]:before {
content: "Get Soff!"
}
/* Remove the superfluous search button */
.ui__header__links a.button[aria-label="Search"] {
display: none;
}
/* Hide post notifications */
.notification-list .notification-bar-active {
display: none !important;
}
/* Remove the superfluous "Search" menu on the right-hand column */
@media screen and (min-width: 1024px) {
.column-link[title=Search] {
display: none;
}
}
/******************************************************************************\
* End Website: Hide Mastodon-Specific Components *
\******************************************************************************/
/******************************************************************************\
* Web Client: Condense Favs and Boosts in Notifications *
\******************************************************************************/
/* de-emphisize active highlight on top tabs */
.account__section-headline a.active::before,
.account__section-headline button.active::before,
.notification__filter-bar a.active::before,
.notification__filter-bar button.active::before {
opacity: 0.3;
}
/* Set the containers to contain elements set with position:absolute */
.notification-favourite,
.notification-reblog,
.notification-poll,
.notification-update{
position: relative !important;
}
/* Condense and de-emphasize notifications for favourites, reblogs, and polls */
.notification-favourite .notification__message,
.notification-reblog .notification__message,
.notification-poll .notification__message,
.notification-status .notification__message,
.notification-update .notification__message {
line-height: 100%;
font-size: 100%;
opacity: 0.5;
margin-left: 15px;
z-index: 100;
}
/* Adjust opacity of condensed notification images */
.notification-favourite .media-gallery__item-thumbnail,
.notification-reblog .media-gallery__item-thumbnail,
.notification-poll .media-gallery__item-thumbnail,
.notification-status .media-gallery__item-thumbnail,
.notification-update .media-gallery__item-thumbnail{
opacity: 0.3;
z-index: 100;
filter: saturate(0.2);
}
/* Desaturate emoji in condense notifications */
.notification .status__content .emojione {
filter: saturate(0.2);
}
/* Adjust position of favorite icon to make more efficient use of space */
.notification-favourite .notification__favourite-icon-wrapper,
.notification-reblog .notification__favourite-icon-wrapper,
.notification-poll .notification__favourite-icon-wrapper,
.notification-update .notification__favourite-icon-wrapper {
position: absolute;
left: 4px;
top: 15px;
padding-right: 0px;
}
/* Shifts user icon up to match smaller username text */
.notification-favourite .account__avatar-overlay-overlay,
.notification-reblog .account__avatar-overlay-overlay,
.notification-poll .account__avatar-overlay-overlay,
.notification-update .account__avatar-overlay-overlay {
bottom: 5px;
}
/* Notification Name Container */
.notification__message > span {
display: block;
}
/* Forces shortening of display names, forcing to two lines */
.notification-favourite .notification__message .notification__display-name,
.notification-reblog .notification__message .notification__display-name,
.notification-poll .notification__message .notification__display-name,
.notification-update .notification__message .notification__display-name {
display: block;
position: relative;
margin-right: 0px;
padding-right: 27px;
left: 0px;
overflow: hidden;
width: auto;
white-space: nowrap;
font-weight: bold;
font-size: 115%;
text-overflow: ellipsis;
}
/* No spacing for single column*/
.layout-single-column .notification-favourite .notification__message .notification__display-name,
.layout-single-column .notification-reblog .notification__message .notification__display-name,
.layout-single-column .notification-poll .notification__message .notification__display-name ,
.layout-single-column .notification-update .notification__message .notification__display-name {
margin-right: 0px;
min-width: 20px;
width: auto;
}
/* Smaller favorite text */
.notification-favourite .notification__message span span,
.notification-reblog .notification__message span span,
.notification-poll .notification__message span span,
.notification-update .notification__message span span {
font-weight: normal;
font-size: 90%;
display: block;
margin-left: 19px;
}
/* Hide the @user mention text on closed cws */
.muted .status__content.status__content--with-action.status__content--with-spoiler div a.status-link.mention {
position: absolute;
display: none;
top: -10px;
width: 80px;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 10px;
}
/* @user mention preview: first mention */
.muted .status__content.status__content--with-action.status__content--with-spoiler div a.status-link.mention:first-child {
right: 0px;
display: block;
}
/* @user mention preview: second mention */
.muted .status__content.status__content--with-action.status__content--with-spoiler div a.status-link.mention:nth-child(2) {
right: 82px;
display: block;
}
/* Change container overflow setting to allow the @user mention text to shift up higher */
.muted .status__content.status__content--with-action.status__content--with-spoiler {
overflow: visible;
}
/* Wrap @user mention text with parenthesis */
.muted .status__content.status__content--with-action.status__content--with-spoiler div a.status-link.mention:before {
content: "(";
display: inline;
}
/* Wrap @user mention text with parenthesis */
.muted .status__content.status__content--with-action.status__content--with-spoiler div a.status-link.mention:after {
content: ")";
display: inline;
}
/* Reset @user mention text when open */
.muted .status__content.status__content--with-action.status__content--with-spoiler div.status__content__text--visible a.status-link.mention {
position: static;
display: inline;
font-size: inherit;
}
/* Wrap @user mention text with parenthesis */
.muted .status__content.status__content--with-action.status__content--with-spoiler div.status__content__text--visible a.status-link.mention:before {
content: "";
}
/* Wrap @user mention text with parenthesis */
.muted .status__content.status__content--with-action.status__content--with-spoiler div.status__content__text--visible a.status-link.mention:after {
content: "";
}
/* But show it on open cws */
.muted .status__content.status__content--with-action.status__content--with-spoiler div span a.status-link.mention {
display: inline;
}
/* Overrides larger min-height to make things extra smol */
.notification div.status {
min-height: 20px;
max-height: 50px;
overflow: hidden;
padding: 10px 10px;
margin-left: 5px;
padding-top: 5px;
}
/* Make the "Show More" button extra smol to fit in-line with text */
.notification div.status.muted .status__content__spoiler-link {
transform: scale(0.7);
}
/* Hides the action bar since it's mostly useless on these notifications */
.notification div.status.muted .display-name,
.notification div.status.muted .account__avatar-overlay-base,
.notification div.status.muted .attachment-list.compact,
.notification div.status.muted .status__action-bar,
.notification div.status.muted .status-card,
.notification div.status.muted .status__expand {
display: none !important;
}
/* Disables click on own profile of muted messages */
.notification div.status.muted .status__display-name {
pointer-events: none;
cursor: default;
text-decoration: none;
}
/* Forces the account avatar container to be extra smol */
.notification div.status.muted .account__avatar-overlay,
.notification div.status.muted .status__avatar {
position: absolute;
top: 0px;
left: 0px;
width: 24px !important;
height: 24px !important;
background-size: 24px 24px !important;
}
/* Put the mini avatar where it belongs - top left */
.notification div.status.muted .status__avatar {
top: 10px;
left: 10px;
}
/* Force toot content to a couple of much smaller lines */
.notification div.status.muted .status__content p {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: none !important;
max-width: 95%;
font-size: 12px;
margin-bottom: 0px;
}
/* Show only the first paragraph of a status */
.notification div.status.muted .status__content p:first-child {
display: block !important;
max-height: 40px;
}
/* Emojos in notifications (non-replies) */
.notification .status__content .emojione {
width: 15px;
/* Stock is 20px */
height: 15px;
/* Stock is 20px */
}
/* Section displaying time and privacy, moved to upper-right (includes avatar somehow) */
.notification.notification-reblog .status__info,
.notification.notification-favourite .status__info,
.notification.notification-poll .status__info,
.notification.notification-status .muted .status__info,
.notification.notification-update .muted .status__info {
position: absolute;
top: -30px;
right: 10px;
width: calc(100% - 20px);
pointer-events: none;
}
/* Post Time display */
.notification .muted .status__relative-time {
font-size: 12px;
}
/******************************************************************************\
* End Web Client: Condense Favs and Boosts in Notifications *
\******************************************************************************/
/******************************************************************************\
* Web Client: Embiggen Emojos *
\******************************************************************************/
/*
* Emojos in the "reply" box that appears above the status update text box when
* you click the "reply" button on a toot
*/
.reply-indicator__content .emojione,
/* Emojos in Display Names */
.display-name .emojione,
/* Emojos in toots across the rest of the entire web client */
.status__content .emojione {
width: 25px;
/* Stock is 20px */
height: 25px;
/* Stock is 20px */
transition: all 0.2s 0s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Emojo Zoomers on hover */
.status__content .emojione:hover {
transition: all 0.5s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
transform: scale(2);
cursor: zoom-in;
}
/* Fix overflow for the above emojo zoomers */
.reply-indicator__content, .status__content:hover,
.notification div.status.muted .status__content p:hover,
.notification div.status.muted .status__content p img:hover{
overflow: visible !important;
opacity: 1 !important;
}
/* Skip above fix for toots with additional content hidden behind a read more */
.reply-indicator__content, .status__content.status__content--collapsed:hover {
overflow: hidden !important;
}
/* Emojos in the "Emoji Mart" (pop-out from emoji button) in compose window */
.emoji-mart-category .emoji-mart-emoji img {
width: 30px !important;
/* stock: 20px; defined inline */
height: 30px !important;
/* stock: 20px; defined inline */
}
/******************************************************************************\
* Website: Profile Page *
\******************************************************************************/
/* Mastodon Logo in header */
.public-layout .header .brand:before,
.ui .ui__header .ui__header__logo:before {
content: "✨Plush✨ City 🏙";
font-size: 25px;
color: #FFF;
white-space: nowrap;
}
/* Removing underline from link text modification above */
.ui .ui__header .ui__header__logo {
text-decoration: none !important;
}
/* Smaller logo text on mobile UI*/
.ui .ui__header .ui__header__logo:before {
font-size: 18px;
}
/* Hide Mastodon logo in header of sub-pages (like profile) */
.public-layout .header .brand img,
.public-layout .header .brand svg,
.ui .ui__header .ui__header__logo svg,
.ui .ui__header .ui__header__logo img {
display: none;
}
/* Mobile apps header link */
.public-layout .header a.nav-link:nth-child(4) {
display: none;
}
/* Account Header Fields: left */
.public-layout .account__header__fields dt {
font-size: 20px;
text-align: right;
text-overflow: clip;
white-space: normal;
line-height: 100%;
padding: 5px;
}
/* Account Header Fields: right */
.public-layout .account__header__fields dd {
text-align: left;
padding: 5px;
min-height: 40px;
line-height: 100%;
text-overflow: clip;
white-space: normal;
}
/* Profile Page: CoC Container Title */
.public-layout .column-1 .hero-widget #coc-container h2 {
font-size: 140%;
line-height: 100%;
}
/* Profile Page: CoC Container Nutshell Titles */
.public-layout .column-1 .hero-widget #coc-container h4 {
line-height: 110%;
text-transform: uppercase;
}
/* Profile Page: CoC Container Nutshell Detail */
.public-layout .column-1 .hero-widget #coc-container p {
line-height: 110%;
}
/* Profile Page: Embiggen Emojos in Title */
.public-layout .public-account-header__tabs img.emojione {
width: auto;
height: 34px;
}
/**
* Updates for Mastodon v4.0.2
*/
.navigation-panel__logo a.column-link--logo:before {
content: "✨Plush✨ City 🏙";
font-size: 25px;
color: #FFF;
white-space: nowrap;
}
.navigation-panel__logo a.column-link--logo img,
.navigation-panel__logo a.column-link--logo svg {
display: none;
}
/******************************************************************************\
* Website: Landing Page *
\******************************************************************************/
/**
* Updates for Mastodon v4.0.2
*/
@media screen and (min-width: 640px) {
.columns-area__panels__main .about__header {
display: block;
margin-left: -20px;
margin-top: -20px;
width: 580px;
overflow: visible;
padding: 0px !important;
min-height: 490px;
background-image: url('https://cdn.masto.host/plush/site_uploads/files/000/000/001/original/2021-plush-city-night-v2.png');
background-size: 100% auto;
background-repeat: no-repeat;
background-position: top left;
}
/* Hide Hero Image */
.columns-area__panels__main .about__header .about__header__hero canvas,
.columns-area__panels__main .about__header .about__header__hero img {
display: none;
}
}
/* Replace lowercase instance title with better text */
.columns-area__panels__main .about__header h1 {
font-size: 1px;
text-align: right;
color: #282c37;
}
/* Adding instance text in place of H1 lowercase url */
.columns-area__panels__main .about__header h1:before {
display: block;
text-align: center;
content: "✨Plush✨ City 🏙";
font-size: 25px;
color: #FFF;
white-space: nowrap;
}
/* Hide Mastodon brag text */
.columns-area__panels__main .about__header p {
display: none;
}
/* Manually specify height of hero image container for custom background image */
@media screen and (min-width: 640px) {
.columns-area__panels__main .about__header .about__header__hero {
background: none;
min-height: 470px;
}
}
.user-role-3 {
--user-role-accent: #ff0204;
}
.user-role-1 {
--user-role-accent: #df00c7;
}