diff options
20 files changed, 1568 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/styles/arachnia.scss b/app/javascript/flavours/glitch/styles/arachnia.scss new file mode 100644 index 000000000..aafe0b548 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/arachnia.scss @@ -0,0 +1,4 @@ +@import 'variables'; +@import 'arachnia/variables'; +@import 'index'; +@import 'arachnia/diff'; diff --git a/app/javascript/flavours/glitch/styles/arachnia/diff.scss b/app/javascript/flavours/glitch/styles/arachnia/diff.scss new file mode 100644 index 000000000..4953c28ae --- /dev/null +++ b/app/javascript/flavours/glitch/styles/arachnia/diff.scss @@ -0,0 +1,373 @@ +*: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; + } + + // 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; } + + // 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; + } +} diff --git a/app/javascript/flavours/glitch/styles/arachnia/variables.scss b/app/javascript/flavours/glitch/styles/arachnia/variables.scss new file mode 100644 index 000000000..870d68110 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/arachnia/variables.scss @@ -0,0 +1,10 @@ +$classic-base-color: #160011; +$classic-primary-color: #fff; +$classic-secondary-color: #906; +$classic-highlight-color: #c08; + +$ui-base-color: $classic-base-color; +$ui-primary-color: $classic-primary-color; +$ui-secondary-color: $classic-secondary-color; +$ui-highlight-color: $classic-highlight-color; +$primary-text-color: #FFF; diff --git a/app/javascript/flavours/glitch/styles/orctober.scss b/app/javascript/flavours/glitch/styles/orctober.scss new file mode 100644 index 000000000..4fcbae9d7 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/orctober.scss @@ -0,0 +1,4 @@ +@import 'variables'; +@import 'orctober/variables'; +@import 'index'; +@import 'orctober/diff'; diff --git a/app/javascript/flavours/glitch/styles/orctober/diff.scss b/app/javascript/flavours/glitch/styles/orctober/diff.scss new file mode 100644 index 000000000..9960a9cb1 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/orctober/diff.scss @@ -0,0 +1,366 @@ +*:root { + body, body.app-body { + background: #341 !important; + background-size: cover !important; + font-size: 14px !important; + } + + hr { border: 1px dotted #060 } + + .column-back-button, .column-header, + a[href], h1, h2, h3, h4 { + text-decoration: none !important; + font-variant: small-caps !important; + } + + .floats, .mascot-container { 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 } + + .features-list__row .text, + .landing-page li, + .landing-page p { color: #cda !important } + + .landing-page h1, + .landing-page h2, + .landing-page h3, + .landing-page h6 { color: #694 !important } + + .about-body h2 { font-size: 28px !important } + + .name { font-size: 24px !important } + + .activity-stream .pre-header .pre-header__icon { + position: inherit !important; + float: left; + margin-right: .5em !important; + left: 0 !important; + } + + .activity-stream .pre-header { + padding-left: 0 !important; + margin-bottom: 4px !important; + } + + .account-grid-card { width: 100% !important } + + .account-grid-card, + .detailed-status, + .detailed-status__action-bar, + .status { + background: #563 !important; + border: 1px solid black !important; + box-shadow: 5px 5px 10px #000 !important; + margin: 1em 1.5em 2em 1em; + } + + .detailed-status__action-bar { + background: #674 !important; + margin: -2.5em 3.5em 2em 3em; + padding: 4px !important; + } + + .notification__message, + .status__prepend { + margin-left: 30px !important; + padding: 0 !important; + } + + .activity-stream .pre-header, + .notification__message span, + .status__prepend span { font-size: 12px !important } + + .account-grid-card .username, + .account__display-name strong, + .activity-stream .pre-header__icon, + .detailed-status__display-name strong, + .name .username, + .notification__message span a, + .status__display-name strong, + .status__prepend span a { + font-size: 16px !important; + font-weight: 700 !important; + } + + .notification__favourite-icon-wrapper, + .status__prepend-icon-wrapper { left: -25px !important } + + .media-spoiler { background: #000 !important } + + #mastodon-timeline, + .about-mastodon, + .about-short, + .account-grid-card__header, + .accounts-grid, + .activity-stream .entry, + .closed-registrations-message, + .column-back-button, + .column-header, + .column-header__button, + .column-header__wrapper, + .column-link, + .container, + .content, + .drawer, + .drawer__header, + .drawer__inner, + .empty-column-indicator, + .header-wrapper, + .information-board, + .learn-more-cta, + .scrollable, + .sidebar-wrapper, + .sidebar ul ul, + .simple_form, + .ui { + background: none !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + border: none !important; + } + + .drawer { + background: #220 !important; + box-shadow: 5px 0 10px #000 !important; + } + + .autosuggest-textarea__suggestions, + .column-back-button, + .column-header, + .search-results { background: #220 !important } + + .autosuggest-textarea__suggestions, + .column-back-button, + .column-header, + .search-results { + border: none !important; + margin: 0 5px 1em 5px !important; + box-shadow: 0 5px 10px #000 !important; + } + + .search { margin-right: 5px } + + .autosuggest-textarea__suggestions, + .search-results { + background: #331 !important; + color: #fff !important; + } + + .column-header__back-button { + color: #fff !important; + background: none !important; + } + + .column-back-button { + top: calc(-1.5em - 42px) !important; + color: #fff !important; + } + + .search__input { background: #332 !important } + + .autosuggest-textarea__textarea, + .compose-form__buttons, + .compose-form__modifiers, + .spoiler-input__input { + background: #332 !important; + color: #fff !important; + } + + .reply-indicator { + background: #032 !important; + border: 1px solid #064 !important; + margin-bottom: 1em; + } + + .status__relative-time { + color: #221 !important; + border-bottom: none !important; + font-size: 12px !important; + position: absolute; + right: 4px; + bottom: 0; + } + + .account__header__username, + .accounts-grid .account-grid-card .username, + .activity-stream .status.light .display-name span, + .detailed-status__display-name, + .display-name__account, + .name .username, + .name small, + .status__display-name { + color: #593 !important; + margin-bottom: 1em; + font-size: 12px !important; + font-weight: 700 !important; + } + + .detailed-status__display-name, + .display-name__account { margin-bottom: 0 } + + .account-grid-card .name a, + .account__display-name strong, + .account__header__display-name, + .card__bio .name, + .detailed-status__display-name strong, + .reply-indicator__display-name, + .status__display-name strong { + color: #996 !important; + display: block; + font-weight: 700 !important; + } + + .status__display-name strong { display: inherit !important } + .status__prepend span { color: #fff } + + .notification__display-name, + .status__display-name.muted, + .status__display-name.muted strong, + .status__prepend .status__display-name { + color: #774 !important; + font-size: 14px !important; + } + + .detailed-status__datetime:before { content: "\1F517" } + + .account-grid-card .note, + .reply-indicator__content, + .status__content { + color: #cda !important; + font-size: 14px !important; + line-height: inherit !important; + } + + .status { padding-left: 10px !important } + + .status__info, + .activity-stream .display-name, + .boost-modal__status-header { + //padding-left: 55px !important; + background: #332 !important; + box-shadow: 0 0 5px #332 !important; + border-radius: 5px !important; + margin-top: 4px; + } + + .activity-stream .display-name { + margin-left: 40px !important; + padding-left: 20px!important; + width: calc(100% - 30px); + } + + .status__content { padding-top: 10px !important } + + .status__avatar { + left: 10px !important; + top: 10px !important; + border-radius: 5px; + } + + .account__avatar, + .account__avatar-overlay-base, + .account__avatar-overlay-overlay { + background: black; + border-radius: 5px; + box-shadow: 2px 2px 5px black !important; + } + + .detailed-status { padding: 10px !important } + + .detailed-status__display-name { + margin: 0 !important; + background: #332 !important; + box-shadow: 0 0 5px #442 !important; + border-radius: 5px !important; + line-height: inherit !important; + } + + .display-name__account { margin: 0px !important } + + .detailed-status__display-avatar { margin: 0 8px 0 0 !important } + + .muted .status__content p { color: #796 !important } + + .reply-indicator__content a, + .status__content a { color: #ac3 !important } + + .account__action-bar, + .account__disclaimer { background: #001611 !important } + + .icon-button { color: #664 } + + .account__header__display-name, + .account__header__username { font-variant: small-caps !important } + + .account__header__username, + .name small { + font-size: 12px !important; + font-weight: 700 !important; + margin-bottom: 1em !important; + } + + .account__header__content { color: #fff !important } + + .reply-indicator__content .emojione, + .status__content .emojione { + width: 32px !important; + height: 32px !important; + padding: 2px; + } + + .emoji-mart-search input { color: black !important; } + + .onboarding-modal__page p { color: white !important; } + + @-webkit-keyframes blink-off { + 0% { opacity: .75 } + 50% { opacity: 0 } + to { opacity: .75 } + } + + @keyframes blink-off { + 0% { opacity: .75 } + 50% { opacity: 0 } + to { opacity: .75 } + } + + .icon-button.disabled { + opacity: .75; + transition: all 2s ease-in-out; + animation: blink-off normal 4s 5 ease-in-out; + } + + @-webkit-keyframes blink-on { + 0% { transform: scale(1.5) } + 50% { transform: scale(2) } + to { transform: scale(1.5) } + } + + @keyframes blink-on { + 0% { transform: scale(1.5) } + 50% { transform: scale(2) } + to { transform: scale(1.5) } + } + + .column-header.active>.column-header__icon, + .icon-button.active { + color: #9a3 !important; + -webkit-transform: scale(1.5); + transform: scale(1.5); + -webkit-transition: all 1s ease-in-out; + transition: all 1s ease-in-out; + -webkit-animation: blink-on normal 2s 5 ease-in-out; + animation: blink-on normal 2s 5 ease-in-out; + } + + ::-webkit-scrollbar-thumb { + background: #694 !important; + border: 1px solid #583 !important; + } +} diff --git a/app/javascript/flavours/glitch/styles/orctober/variables.scss b/app/javascript/flavours/glitch/styles/orctober/variables.scss new file mode 100644 index 000000000..8c17c237a --- /dev/null +++ b/app/javascript/flavours/glitch/styles/orctober/variables.scss @@ -0,0 +1,10 @@ +$classic-base-color: #341; +$classic-primary-color: #cda; +$classic-secondary-color: #563; +$classic-highlight-color: #694; + +$ui-base-color: $classic-base-color; +$ui-primary-color: $classic-primary-color; +$ui-secondary-color: $classic-secondary-color; +$ui-highlight-color: $classic-highlight-color; +$primary-text-color: #cda; diff --git a/app/javascript/flavours/glitch/styles/seadrake.scss b/app/javascript/flavours/glitch/styles/seadrake.scss new file mode 100644 index 000000000..00bd8cf89 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/seadrake.scss @@ -0,0 +1,4 @@ +@import 'variables'; +@import 'seadrake/variables'; +@import 'index'; +@import 'seadrake/diff'; diff --git a/app/javascript/flavours/glitch/styles/seadrake/diff.scss b/app/javascript/flavours/glitch/styles/seadrake/diff.scss new file mode 100644 index 000000000..085440d6e --- /dev/null +++ b/app/javascript/flavours/glitch/styles/seadrake/diff.scss @@ -0,0 +1,374 @@ +*:root { + // Main body + body, + body.app-body { + //background: #001611 url(/system/custom-images/monsterpit-bg.png) no-repeat center center fixed !important; + background: #001611 !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 #060; } + + // 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: #096 !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: #032 url(/system/custom-images/status-bg.png) repeat-x top center !important; + border: 1px solid #064 !important; + border-radius: 4px; + margin: 0em 0.5em 1em 0em; + } + + // 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; } + + // 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: #064 !important; + margin-bottom: 1em !important; + border: 1px solid #0c8 !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: #032 !important; + border: 1px solid #021 !important; + } + + // Tootbox + .autosuggest-textarea__textarea, + .compose-form__modifiers, + .compose-form__buttons, + .spoiler-input__input { + background: #032 !important; + color: #fff !important; + } + + // Reply indicator: theme like status + .reply-indicator { + background: #032 !important; + border: 1px solid #064 !important; + border-radius: 4px; + margin-bottom: 1em; + } + + // TL status: move timestamp to bottom-right + .status__relative-time { + color: #096 !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: #3a9 !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: #0c6 !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: #096 !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: #cdd !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: #9aa !important; } + + // TL status: links in post + .reply-indicator__content a, + .status__content a { color: #6ec !important; } + + // Expanded status: action bars + .account__disclaimer, .account__action-bar { background: #001611 !important; } + + // Default icon button color + .icon-button { color: #064; } + + .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: #0c8 !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: #096 !important; + border: 1px solid #c09 !important; + } +} diff --git a/app/javascript/flavours/glitch/styles/seadrake/variables.scss b/app/javascript/flavours/glitch/styles/seadrake/variables.scss new file mode 100644 index 000000000..88459ed59 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/seadrake/variables.scss @@ -0,0 +1,10 @@ +$classic-base-color: #001611; +$classic-primary-color: #fff; +$classic-secondary-color: #096; +$classic-highlight-color: #0c8; + +$ui-base-color: $classic-base-color; +$ui-primary-color: $classic-primary-color; +$ui-secondary-color: $classic-secondary-color; +$ui-highlight-color: $classic-highlight-color; +$primary-text-color: #fff; diff --git a/app/javascript/flavours/glitch/styles/tentacle.scss b/app/javascript/flavours/glitch/styles/tentacle.scss new file mode 100644 index 000000000..ca85a7ca2 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/tentacle.scss @@ -0,0 +1,4 @@ +@import 'variables'; +@import 'tentacle/variables'; +@import 'index'; +@import 'tentacle/diff'; diff --git a/app/javascript/flavours/glitch/styles/tentacle/diff.scss b/app/javascript/flavours/glitch/styles/tentacle/diff.scss new file mode 100644 index 000000000..d9e849755 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/tentacle/diff.scss @@ -0,0 +1,354 @@ +*:root { + .account__action-bar__tab > span { color: $profile_header_text } + + body, body.app-body { + background: $body_bg; + background-size: cover; + font-size: 14px; + } + + hr { border: 1px dotted $horiz_rule } + + .column-back-button, .column-header, + a[href], h1, h2, h3, h4 { + text-decoration: none; + font-variant: small-caps; + } + + .floats, .mascot-container { display: none } + + .about-short { background: transparent } + + .closed-registrations-message, .simple-form { min-height: inherit } + + .landing-page .heading { padding-bottom: 0 } + + .landing-page h1 { font-size: 32px } + + .features-list__row .text, + .landing-page li, + .landing-page p { color: $instance_info_text } + + .landing-page h1, + .landing-page h2, + .landing-page h3, + .landing-page h6 { color: $instance_info_header_text } + + .about-body h2 { font-size: 28px } + + .name { font-size: 24px } + + .activity-stream .pre-header .pre-header__icon { + position: inherit; + float: left; + margin-right: .5em; + left: 0; + } + + .activity-stream .pre-header { + padding-left: 0; + margin-bottom: 4px; + } + + .account-grid-card { width: 100% } + + .account-grid-card, + .detailed-status, + .detailed-status__action-bar, + .status { + background: $status_bg; + border: 1px solid black; + box-shadow: 5px 5px 10px black; + margin: 1em 1.5em 2em 1em; + } + + .account__header > div { background: rgba(0,0,0,.9) } + + .detailed-status__action-bar { + background: $status_actions_bg; + margin: -2.5em 3.5em 2em 3em; + padding: 4px; + } + + .notification__message, + .status__prepend { + margin-left: 30px; + padding: 0; + } + + .activity-stream .pre-header, + .notification__message span, + .status__prepend span { font-size: 12px } + + .account-grid-card .username, + .account__display-name strong, + .activity-stream .pre-header__icon, + .detailed-status__display-name strong, + .name .username, + .notification__message span a, + .status__display-name strong, + .status__prepend span a { + font-size: 16px; + font-weight: 700; + } + + .notification__favourite-icon-wrapper, + .status__prepend-icon-wrapper { left: -25px } + + #mastodon-timeline, + .about-mastodon, + .about-short, + .account-grid-card__header, + .accounts-grid, + .activity-stream .entry, + .closed-registrations-message, + .column-back-button, + .column-header, + .column-header__button, + .column-header__wrapper, + .column-link, + .container, + .content, + .drawer, + .drawer__header, + .drawer__inner, + .empty-column-indicator, + .header-wrapper, + .information-board, + .learn-more-cta, + .scrollable, + .sidebar-wrapper, + .sidebar ul ul, + .simple_form, + .ui { + background: none; + -webkit-box-shadow: none; + box-shadow: none; + border: none; + } + + .drawer { + background: $sidebar_bg; + box-shadow: 5px 0 10px black; + } + + .column-back-button, + .column-header, + { background: $sidebar_bg } + + .autosuggest-textarea__suggestions, + .column-back-button, + .column-header, + .search-results { + border: none; + margin: 0 5px 1em 5px; + box-shadow: 0 5px 10px black; + } + + .search { margin-right: 5px } + + .autosuggest-textarea__suggestions, + .search-results { + background: $sidebar_popup_bg; + color: $sidebar_popup_text; + } + + .search__input { + background: $search_bg; + color: $search_text; + } + + .media-spoiler + { + background: $cw_bg; + color: $cw_text; + } + + .column-header__back-button { + color: white; + background: none; + } + + .column-back-button { + top: calc(-1.5em - 42px); + color: white; + } + + + .autosuggest-textarea__textarea, + .compose-form__buttons, + .compose-form__modifiers, + .spoiler-input__input { + background: #412; + color: white; + } + + .status__prepend { + margin-top: 0; + margin-bottom: 0; + } + .status__prepend span { + font-size: 0 !important; + color: transparent !important; + } + .status__prepend span a * { + color:#fff + } + + .status__relative-time { + color: #412; + border-bottom: none; + font-size: 12px; + position: absolute; + right: 4px; + bottom: 0; + } + + .account__header__username, + .accounts-grid .account-grid-card .username, + .activity-stream .status.light .display-name span, + .detailed-status__display-name, + .display-name__account, + .name .username, + .name small, + .status__display-name { + color: #c69; + font-size: 12px; + font-weight: 700; + } + + .detailed-status__display-name, + .display-name__account { margin-bottom: 0 } + + .account-grid-card .name a, + .account__display-name strong, + .account__header__display-name, + .card__bio .name, + .detailed-status__display-name strong, + .status__display-name strong { + color: white; + display: block; + font-weight: 700; + } + + .status__display-name strong { display: inherit } + .status__prepend span { color: white } + + .notification__display-name, + .status__display-name.muted, + .status__display-name.muted strong, + .status__prepend .status__display-name { + color: #c6a; + font-size: 14px; + } + + .detailed-status__datetime:before { content: "\1F517" } + + .account-grid-card .note, + .status__content { + color: white; + font-size: 14px; + line-height: inherit; + } + + .status { padding-left: 10px } + + .status__info, + .activity-stream .display-name, + .boost-modal__status-header { + background: #323; + box-shadow: 0 0 5px #323; + border-radius: 5px; + } + + .activity-stream .display-name { + margin-left: 40px; + padding-left: 20px!important; + width: calc(100% - 30px); + } + + .status__content { padding-top: 10px } + + .detailed-status { padding: 10px } + + .detailed-status__display-name { + background: #423; + box-shadow: 0 0 5px #423; + border-radius: 5px; + } + + .muted .status__content p { color: #c9a } + + .status__content a { color: #fac } + + .account__action-bar, + .account__disclaimer { background: #160011 } + + .icon-button { color: #946 } + + .account__header__display-name, + .account__header__username { font-variant: small-caps } + + .account__header__username, + .name small { + font-size: 12px; + font-weight: 700; + margin-bottom: 1em; + } + + .account__header__content { color: white } + + .status__content .emojione { + width: 32px; + height: 32px; + padding: 2px; + } + + .emoji-mart-search input { color: black; } + + .onboarding-modal__page p { color: white; } + + @-webkit-keyframes blink-off { + 0% { opacity: .75 } + 50% { opacity: 0 } + to { opacity: .75 } + } + + @keyframes blink-off { + 0% { opacity: .75 } + 50% { opacity: 0 } + to { opacity: .75 } + } + + .icon-button.disabled { + opacity: .75; + transition: all 2s ease-in-out; + animation: blink-off normal 4s 5 ease-in-out; + } + + @-webkit-keyframes blink-on { + 0% { transform: scale(1.5) } + 50% { transform: scale(2) } + to { transform: scale(1.5) } + } + + @keyframes blink-on { + 0% { transform: scale(1.5) } + 50% { transform: scale(2) } + to { transform: scale(1.5) } + } + + .column-header.active>.column-header__icon, + .icon-button.active { + color: #946; + transform: scale(1.5); + transition: all 1s ease-in-out; + animation: blink-on normal 2s 5 ease-in-out; + } + + ::-webkit-scrollbar-thumb { + background: #623; + border: 1px solid #946; + } +} + diff --git a/app/javascript/flavours/glitch/styles/tentacle/variables.scss b/app/javascript/flavours/glitch/styles/tentacle/variables.scss new file mode 100644 index 000000000..d4a7ad691 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/tentacle/variables.scss @@ -0,0 +1,35 @@ +$classic-base-color: #956; +$classic-primary-color: #302; +$classic-secondary-color: #624; +$classic-highlight-color: #845; + +$primary-text-color: #fac; + +$ui-base-color: $classic-base-color; +$ui-primary-color: $classic-primary-color; +$ui-secondary-color: $classic-secondary-color; +$ui-highlight-color: $classic-highlight-color; + +$simple-background-color: #000; + +$error-column: #fac; + +$profile_header_text: #956; +$instance_info_text: #dac; +$instance_info_header_text: #946; +$horiz_rule: #623; + +$body_bg: #312; +$sidebar_bg: #623; +$sidebar_popup_bg: #301; +$sidebar_popup_text: white; + +$search_bg: #412; +$search_text: white; + +/* #956 */ +$status_bg: #634; +$status_actions_bg: #967; + +$cw_bg: #623; +$cw_text: #956; diff --git a/app/javascript/skins/glitch/arachnia/common.scss b/app/javascript/skins/glitch/arachnia/common.scss new file mode 100644 index 000000000..2b912ccf2 --- /dev/null +++ b/app/javascript/skins/glitch/arachnia/common.scss @@ -0,0 +1 @@ +@import 'flavours/glitch/styles/arachnia'; diff --git a/app/javascript/skins/glitch/arachnia/names.yml b/app/javascript/skins/glitch/arachnia/names.yml new file mode 100644 index 000000000..b714cc52d --- /dev/null +++ b/app/javascript/skins/glitch/arachnia/names.yml @@ -0,0 +1,4 @@ +en: + skins: + glitch: + arachnia: Arachnia diff --git a/app/javascript/skins/glitch/orctober/common.scss b/app/javascript/skins/glitch/orctober/common.scss new file mode 100644 index 000000000..4ce7355c9 --- /dev/null +++ b/app/javascript/skins/glitch/orctober/common.scss @@ -0,0 +1 @@ +@import 'flavours/glitch/styles/orctober'; diff --git a/app/javascript/skins/glitch/orctober/names.yml b/app/javascript/skins/glitch/orctober/names.yml new file mode 100644 index 000000000..a9b6256e1 --- /dev/null +++ b/app/javascript/skins/glitch/orctober/names.yml @@ -0,0 +1,4 @@ +en: + skins: + glitch: + orctober: Orctober diff --git a/app/javascript/skins/glitch/seadrake/common.scss b/app/javascript/skins/glitch/seadrake/common.scss new file mode 100644 index 000000000..0a06dc10f --- /dev/null +++ b/app/javascript/skins/glitch/seadrake/common.scss @@ -0,0 +1 @@ +@import 'flavours/glitch/styles/seadrake'; diff --git a/app/javascript/skins/glitch/seadrake/names.yml b/app/javascript/skins/glitch/seadrake/names.yml new file mode 100644 index 000000000..276a8f831 --- /dev/null +++ b/app/javascript/skins/glitch/seadrake/names.yml @@ -0,0 +1,4 @@ +en: + skins: + glitch: + seadrake: Seadrake diff --git a/app/javascript/skins/glitch/tentacle/common.scss b/app/javascript/skins/glitch/tentacle/common.scss new file mode 100644 index 000000000..3bb32992e --- /dev/null +++ b/app/javascript/skins/glitch/tentacle/common.scss @@ -0,0 +1 @@ +@import 'flavours/glitch/styles/tentacle'; diff --git a/app/javascript/skins/glitch/tentacle/names.yml b/app/javascript/skins/glitch/tentacle/names.yml new file mode 100644 index 000000000..9dde63430 --- /dev/null +++ b/app/javascript/skins/glitch/tentacle/names.yml @@ -0,0 +1,4 @@ +en: + skins: + glitch: + tentacle: Tentacle |