*:root { // Main body body, body.app-body { background: #160011 url(/system/custom-images/monsterpit-bg.png) no-repeat center center fixed !important; background-size: cover !important; font-size: 14px !important; } // Abouts: - dotted HRs // - HR fills width of content area // - HR adds line of blank space before/after hr { border: 1px dotted #600; } // Small-caps links a[href], h1, h2, h3, h4, .column-header, .column-back-button { text-decoration: none !important; font-variant: small-caps !important; } .mascot-container, .floats { display: none !important; } .mascot-container, .floats { display: none !important; } .about-short { background: transparent !important; } .closed-registrations-message, .simple-form { min-height: inherit !important; } .landing-page .heading { padding-bottom: 0 !important; } .landing-page h1 { font-size: 32px !important; } .landing-page p, .landing-page li, .features-list__row .text { color: #fff !important; } .landing-page h1, .landing-page h2, .landing-page h3, .landing-page h6 { color: #906 !important; } .about-body h2 { font-size: 28px !important; } .name { font-size: 24px !important; } // Public user TL: action icons aligned with left edge of status .activity-stream .pre-header .pre-header__icon { position: inherit !important; float: left; margin-right: 0.5em !important; left: 0 !important; } // Public user TL: remove intentation from action text; move down .activity-stream .pre-header { padding-left: 0 !important; margin-bottom: 4px !important; } // User list: expand card size; one per row .account-grid-card { width: 100% !important; } // TL status, user card: - black semi-trans bg with rounded border // - space between right edge and scrollbar .status, .detailed-status, .detailed-status__action-bar, .account-grid-card { background: #302 url(/system/custom-images/status-bg.png) repeat-x top center !important; border: 1px solid #604 !important; border-radius: 4px; margin: 0em 0.5em 1em 0em; } .status.collapsed .status__content:after { background: linear-gradient(transparentize(#302, 1), #302) !important; } // TL status prefix: move origin user text closer to icon .notification__message, .status__prepend { margin-left: 30px !important; padding: 0 !important; } // TL status prefix: hide boost/fav action text .notification__message span, .status__prepend span, .activity-stream .pre-header { font-size: 12px !important; } // TL status: font size of user's friendly name .notification__message span a, .status__prepend span a, .activity-stream .pre-header__icon, .account__display-name strong, .status__display-name strong, .detailed-status__display-name strong, .account-grid-card .username, .name .username { font-size: 16px !important; font-weight: bold !important; } // TL status prefix: move icon closer to left edge .notification__favourite-icon-wrapper, .status__prepend-icon-wrapper { left: -25px !important; } // Spoilers .media-spoiler { background: #000 !important; } .media-gallery.full-width { margin-left: 0; margin-right: 0 } // UI: remove borders and solid bg colors .ui, .drawer, .scrollable, .drawer__inner, .column-link, .sidebar ul ul, .column-header, .column-header__button, .column-back-button, .column-header__wrapper, .drawer__header, .activity-stream .entry, .accounts-grid, .account-grid-card__header, #mastodon-timeline, .header-wrapper, .about-mastodon, .container, .content, .empty-column-indicator, .learn-more-cta, .sidebar-wrapper, .closed-registrations-message, .simple_form, .information-board, .about-short { background: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; border: none !important; } // Column/Drawer headings: solid red bg and border; blank line after .column-back-button, .column-header, .drawer__header, .search, .search-results, .autosuggest-textarea__suggestions { background: #604 !important; margin-bottom: 1em !important; border: 1px solid #c08 !important } .search-results, .autosuggest-textarea__suggestions { color: #fff !important; } // Fix column back buttons. .column-header__back-button { color: #fff !important; background: none !important; } .column-back-button { top: calc(-1.5em - 42px) !important; color: #fff !important; } // Search box: darken .search__input { background: #302 !important; border: 1px solid #201 !important; } // Tootbox .autosuggest-textarea__textarea, .compose-form__modifiers, .compose-form__buttons, .spoiler-input__input { background: #302 !important; color: #fff !important; } // Reply indicator: theme like status .reply-indicator { background: #302 !important; border: 1px solid #604 !important; border-radius: 4px; margin-bottom: 1em; } // TL status: move timestamp to bottom-right .status__relative-time { color: #906 !important; border-bottom: none !important; font-size: 10px !important; position: absolute; right: 4px; bottom: 0; } // TL status: color of user address; push down post content .account__header__username, .accounts-grid .account-grid-card .username, .activity-stream .status.light .display-name span, .detailed-status__display-name, .name .username, .name small, .status__display-name, .display-name__account { color: #a39 !important; margin-bottom: 1em; font-size: 12px !important; font-weight: bold !important; } // TL status: color of users' friendly names; on own line .account-grid-card .name a, .account__display-name strong, .detailed-status__display-name strong, .reply-indicator__display-name, .status__display-name strong, .account__header__display-name, .card__bio .name { color: #c06 !important; display: block; font-weight: bold !important; } .status__display-name strong { display: inherit !important; } .status__prepend span { color: white } // TL status prefix: color of users' friendly names .status__prepend .status__display-name, .notification__display-name, .status__display-name.muted, .status__display-name.muted strong, { color: #906 !important; font-size: 14px !important; } // Opened status: add link icon on posts .detailed-status__datetime:before { content: "\1F517" } // All status: message text .reply-indicator__content, .status__content, .account-grid-card .note { color: #dcd !important; font-size: 14px !important; line-height: inherit !important; } // All status: use left space; add padding to top .status { padding-left: 10px !important; } .status__info { padding-left: 0 !important; } .status__content { padding-top: 10px !important; } // All status: move icon to right side .status__avatar { left: inherit !important; top: 8px !important; right: 8px !important; } /// Expanded status: make header and padding match TL status .detailed-status { padding: 8px !important; } .detailed-status__display-name { margin: 0 !important; } .detailed-status__display-avatar { float: right !important; margin: 0 !important; } // TL status prefix: text shouldn't clip icon //.display-name { max-width: calc(100% - 32px) !important; } // TL status: muted text .muted .status__content p { color: #a9a !important; } // TL status: links in post .reply-indicator__content a, .status__content a { color: #e6c !important; } // Expanded status: action bars .account__disclaimer, .account__action-bar { background: #160011 !important; } // Default icon button color .icon-button { color: #604; } .account__header__display-name, .account__header__username { font-variant: small-caps !important; } .account__header__username, .name small { font-size: 12px !important; font-weight: bold !important; margin-bottom: 1em !important; } .account__header__content { color: #fff !important; } // Make status Emojos bigger .reply-indicator__content .emojione, .status__content .emojione { width: 32px !important; height: 32px !important; padding: 2px; } // Locked posts animation @-webkit-keyframes blink-off { 0% { opacity: .75 } 50% { opacity: 0 } 100% { opacity: .75 } } @keyframes blink-off { 0% { opacity: .75 } 50% { opacity: 0 } 100% { opacity: .75 } } .icon-button.disabled { opacity: .75; -moz-transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -moz-animation: blink-off normal 4s 5 ease-in-out; -webkit-animation: blink-off normal 4s 5 ease-in-out; -ms-animation: blink-off normal 4s 5 ease-in-out; animation: blink-off normal 4s 5 ease-in-out; } // Active item banimation @-webkit-keyframes blink-on { from { transform: scale(1.5) } 50% { transform: scale(2) } to { transform: scale(1.5) } } @keyframes blink-on { from { transform: scale(1.5) } 50% { transform: scale(2) } to { transform: scale(1.5) } } .column-header.active>.column-header__icon, .icon-button.active { color: #c08 !important; transform: scale(1.5); -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -moz-animation: blink-on normal 2s 5 ease-in-out; -webkit-animation: blink-on normal 2s 5 ease-in-out; -ms-animation: blink-on normal 2s 5 ease-in-out; animation: blink-on normal 2s 5 ease-in-out; } // Scrollbar in Chrome/Webkit browsers ::-webkit-scrollbar-thumb { background: #906 !important; border: 1px solid #c09 !important; } }