diff options
| -rw-r--r-- | app/javascript/flavours/glitch/styles/arachnia/diff.scss | 359 | ||||
| -rw-r--r-- | app/javascript/flavours/glitch/styles/arachnia/variables.scss | 22 |
2 files changed, 32 insertions, 349 deletions
diff --git a/app/javascript/flavours/glitch/styles/arachnia/diff.scss b/app/javascript/flavours/glitch/styles/arachnia/diff.scss index 33225cf27..be6d92d5a 100644 --- a/app/javascript/flavours/glitch/styles/arachnia/diff.scss +++ b/app/javascript/flavours/glitch/styles/arachnia/diff.scss @@ -3,95 +3,22 @@ body, body.app-body { background: black url(https://monsterpit.net/extras/pit.png) no-repeat center center fixed !important; - background-size: cover !important; - font-size: 14px !important; + background-size: cover; + font-size: 14px; } - // 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; } - - .landing-page__call-to-action { background: $ui-base-color } - - .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; + text-decoration: none; + font-variant: small-caps; } // TL status prefix: hide boost/fav action text .notification__message span, .status__prepend span, - .activity-stream .pre-header { font-size: 12px !important; } + .activity-stream .pre-header { font-size: 12px; } // TL status: font size of user's friendly name .notification__message span a, @@ -102,123 +29,13 @@ .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 - .status__content__spoiler-link { - background: #000 !important; - border: 1px solid $ui-highlight-color; - } - .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 - } - - .drawer--header > * { color: $ui-highlight-color; } - - .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; - } - - .poll__text input[type="text"], .compose-form__poll-wrapper select { - color: $ui-base-color; - } - - // Search box: darken - .search__input { - background: #302 !important; - border: 1px solid #201 !important; - } - - .drawer--search--popout { - background: #160011; - h4, em { color: $lighter-text-color; } - } - - // 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; + font-size: 16px; + font-weight: bold; } // 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; - z-index: -666; + font-size: 10px; } // TL status: color of user address; push down post content @@ -230,12 +47,16 @@ .name small, .status__display-name, .display-name__account { - color: #a39 !important; - margin-bottom: 1em; - font-size: 12px !important; - font-weight: bold !important; + font-size: 12px; + font-weight: bold; } + .signature { + font-size: 12px; + font-weight: bold; + font-variant: small-caps; + } + // TL status: color of users' friendly names; on own line .account-grid-card .name a, .account__display-name strong, @@ -244,163 +65,25 @@ .status__display-name strong, .account__header__display-name, .card__bio .name { - color: #c06 !important; - display: block; - font-weight: bold !important; + font-weight: bold; + color: lighten($ui-primary-color, 15%); } - .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" } + .status__display-name.muted strong, { font-size: 14px; } // 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; } - - .boost-modal__action-bar, - .doodle-modal__action-bar, - .favourite-modal__action-bar, - .confirmation-modal__action-bar, - .mute-modal__action-bar { - background: #201; - div { color: $light-text-color; } - } - - // 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; + font-size: 14px; + line-height: inherit; } - .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; } - // staff tools div.drawer__inner__admin ul li a { color: $lighter-text-color } div.drawer__inner__admin ul li a:hover { color: $white } - - // 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 1 ease-in-out; - -webkit-animation: blink-off normal 4s 1 ease-in-out; - -ms-animation: blink-off normal 4s 1 ease-in-out; - animation: blink-off normal 4s 1 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: $inverted-text-color !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 1 ease-in-out; - -webkit-animation: blink-on normal 2s 1 ease-in-out; - -ms-animation: blink-on normal 2s 1 ease-in-out; - animation: blink-on normal 2s 1 ease-in-out; - } - - // Scrollbar in Chrome/Webkit browsers - ::-webkit-scrollbar-thumb { - background: #906 !important; - border: 1px solid #c09 !important; - } } diff --git a/app/javascript/flavours/glitch/styles/arachnia/variables.scss b/app/javascript/flavours/glitch/styles/arachnia/variables.scss index ad2a75e4a..11c51e657 100644 --- a/app/javascript/flavours/glitch/styles/arachnia/variables.scss +++ b/app/javascript/flavours/glitch/styles/arachnia/variables.scss @@ -1,29 +1,29 @@ -$classic-base-color: #201; -$classic-primary-color: #503; -$classic-secondary-color: #906; -$classic-highlight-color: #c08; +$classic-base-color: #250515; +$classic-primary-color: #624; +$classic-secondary-color: #a68; +$classic-highlight-color: #e69; $base-shadow-color: $black; $base-overlay-background: $black; $base-border-color: $white; -$simple-background-color: #c69; +$simple-background-color: #c58; $valid-value-color: $success-green; $error-value-color: $error-red; $ui-base-color: $classic-base-color; // Darkest -$ui-base-lighter-color: lighten($ui-base-color, 26%); // Lighter darkest +$ui-base-lighter-color: lighten($ui-base-color, 15%); // Lighter darkest $ui-primary-color: $classic-primary-color; // Lighter $ui-secondary-color: $classic-secondary-color; // Lightest $ui-highlight-color: $classic-highlight-color; -$primary-text-color: $white; +$primary-text-color: #c9a; $darker-text-color: lighten($ui-primary-color, 20%); -$dark-text-color: $ui-base-lighter-color; +$dark-text-color: darken($ui-highlight-color, 40%); $secondary-text-color: $ui-secondary-color; $highlight-text-color: $ui-highlight-color; $action-button-color: $ui-base-lighter-color; -$inverted-text-color: #e9a; -$lighter-text-color: $ui-base-lighter-color; -$light-text-color: $ui-primary-color; +$inverted-text-color: #523; +$lighter-text-color: #fff; +$light-text-color: #fff; |