diff --git a/app/javascript/flavours/glitch/features/getting_started/index.js b/app/javascript/flavours/glitch/features/getting_started/index.js index b283274e3..100ffd16a 100644 --- a/app/javascript/flavours/glitch/features/getting_started/index.js +++ b/app/javascript/flavours/glitch/features/getting_started/index.js @@ -38,6 +38,7 @@ const messages = defineMessages({ lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' }, lists_subheading: { id: 'column_subheading.lists', defaultMessage: 'Lists' }, misc: { id: 'navigation_bar.misc', defaultMessage: 'Misc' }, + recommendations: { id: 'navigation_bar.recommendations', defaultMessage: 'Recommendations' }, menu: { id: 'getting_started.heading', defaultMessage: 'Getting started' }, profile_directory: { id: 'getting_started.directory', defaultMessage: 'Profile directory' }, radyoodtu: { id: 'navigation_bar.radio1', defaultMessage: 'Radyo ODTU' }, @@ -158,6 +159,8 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2); navItems.push(); } + navItems.push(); + navItems.push(); listItems = listItems.concat([ @@ -187,10 +190,9 @@ const NAVIGATION_PANEL_BREAKPOINT = 600 + (285 * 2) + (10 * 2);

- - + diff --git a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js index fc29ccf5c..373e0fbce 100644 --- a/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js +++ b/app/javascript/flavours/glitch/features/ui/components/navigation_panel.js @@ -21,6 +21,8 @@ const NavigationPanel = ({ onOpenSettings }) => ( {profile_directory && } + + @@ -42,7 +44,6 @@ const NavigationPanel = ({ onOpenSettings }) => (

: FG

- diff --git a/app/javascript/skins/glitch/flat-clean/common.scss b/app/javascript/skins/glitch/flat-clean/common.scss index 0c81303ff..8b0f727d2 100644 --- a/app/javascript/skins/glitch/flat-clean/common.scss +++ b/app/javascript/skins/glitch/flat-clean/common.scss @@ -1 +1,2 @@ @import 'flavours/glitch/styles/flatClean'; +@import 'fix'; diff --git a/app/javascript/skins/glitch/flat-clean/fix.scss b/app/javascript/skins/glitch/flat-clean/fix.scss new file mode 100644 index 000000000..e91c18506 --- /dev/null +++ b/app/javascript/skins/glitch/flat-clean/fix.scss @@ -0,0 +1,37 @@ +#premotd { + box-shadow: 0 0 2px #000 !important; + margin-top: 30px !important; + padding: 7px !important; + color: #666 !important; + border-radius: 6px !important; +} + +.drawer--account .acct { + display: block !important; + color: #000000 !important; +} + +.column-link--transparent .icon-with-badge__badge { + border-width: 0px !important; +} + +.status.status-direct { + box-shadow: 0 0 2px #a81717 !important; +} + +.navigation-panel hr { + border-top: 1px solid #9baec8 !important; +} + +hr { + border-radius: 0px !important; + border-color: transparent !important !important; + height: 1px !important; +} + +.column-link { + display: block !important; + font-size: 16px !important; + padding: 15px !important; + text-decoration: none !important; +} diff --git a/app/javascript/skins/glitch/metulayf/common.scss b/app/javascript/skins/glitch/metulayf/common.scss index 8ed17e883..bc0c25d36 100644 --- a/app/javascript/skins/glitch/metulayf/common.scss +++ b/app/javascript/skins/glitch/metulayf/common.scss @@ -1,2 +1,3 @@ @import 'variables'; +@import 'fix'; @import 'flavours/glitch/styles/index'; diff --git a/app/javascript/skins/glitch/metulayf/fix.scss b/app/javascript/skins/glitch/metulayf/fix.scss new file mode 100644 index 000000000..e8af215af --- /dev/null +++ b/app/javascript/skins/glitch/metulayf/fix.scss @@ -0,0 +1,525 @@ +.status { + /*box-shadow: 0 0 2px #a81717 !important;*/ + background: #0c0c0caa !important; + margin: 8px !important; + border-bottom: 0px !important; + padding: 10px 14px !important; + position: relative !important; + height: auto !important; + cursor: auto !important; + opacity: 1 !important; + -webkit-animation: fade .15s linear !important; + animation: fade .15s linear !important; +} + +.autosuggest-input label .autosuggest-textarea__textarea, .compose-form__autosuggest-wrapper label .autosuggest-textarea__textarea { + display: block !important; + box-sizing: border-box !important; + margin: 0 !important; + border: 0 !important; + border-radius: 4px 4px 0 0 !important; + padding: 10px 32px 0 10px !important; + width: 100% !important; + min-height: 100px !important; + outline: 0 !important; + color: #edfcf5 !important; + background: #080808 !important; + } + +.composer--options-wrapper { + background-color: #0c0c0c !important; +} + +#premotd { + background-color: #080808 !important; + box-shadow: 0 0 2px #a81717 !important; +} + +.column-header>button { + margin: 0 !important; + border: 0 !important; + padding: 15px !important; + color: inherit !important; + background: #0c0c0c !important; +} + + +column-header__button { +background-color: #0c0c0c !important; +} +.column-link--transparent { + transition: all .1s ease-in !important; + transition-property: background-color !important; + background: transparent !important; + color: #edfcf5 !important; + border-radius: 10px !important; +} + +.column-link--transparent.active { + color: #edfcf5 !important; + background: #a8171799 !important; +} + +.column-link:hover { + color: #edfcf5 !important; + background: #a81717 !important; + transition: all .1s ease-in !important; +} +.column-link:hover { + background: #a81717 !important; + transition: all .1s ease-in !important; +} + +a.column-link.column-link--transparent:hover { + /* border-radius: 15px !important; */ + background-color: #a81717 !important; +} + +a.column-link.column-link--transparent:hover { + /* border-radius: 15px !important; */ + background-color: #a81717 !important; + color: #edfcf5 !important; + transition: all .1s ease-in !important; +} +.status.status-direct { + box-shadow: 0 0 2px #a81717 !important; + background: #080808 !important; +} + +.search__input:focus { + transition: 0.11s !important; + background: #0c0c0c !important; +} + +.search__input { + outline: 0 !important; + box-sizing: border-box !important; + width: 100% !important; + border: 0 !important; + box-shadow: none !important; + font-family: inherit !important; + background: #080808cc !important; + color: #a81717 !important; + font-size: 14px !important; + margin: 0 !important; + display: block !important; + padding: 15px 30px 15px 15px !important; + line-height: 18px !important; + font-size: 16px !important; +} +getting-started__footer a { + text-decoration: none !important; + color: #a81717 !important; +} + +button.column-header__button { + background: #0c0c0c !important; +} + +.trends__item__name a { + color: #e6464b +} + +.getting-started__trends .trends__item__current { + color: #a81717 !important; +} + +.getting-started__trends h4 { + font-size: 12px !important; + text-transform: uppercase !important; + color: #a81717 + } + + +.column-header__back-button { + background: #0c0c0c !important; +} + +.columns-area--mobile .scrollable { + background-color: #000 !important; +} + +.button:disabled { + background-color: #000 !important; +} + + +.getting-started__footer a { + color: #a81717 !important; +} + +.composer--options>hr { + border-left: 1px solid #161616 !important; +} + +.account__header__bar { + position: relative !important; + background: #080808 !important; + padding: 5px !important; + border-bottom: 1px solid #2b2b2b !important; +} + +.focusable:focus { + box-shadow: 0 0 2px #a81717 !important; + background: #0c0c0c !important; +} + +.drawer--header>* { + display: block !important; + box-sizing: border-box !important; + border-bottom: 2px solid transparent !important; + padding: 15px 5px 13px !important; + height: 48px !important; + flex: 1 1 auto !important; + color: #a81717 !important; +} + +.drawer--header a:focus, .drawer--header a:hover { + outline: none !important; + background: #080808 !important; + transition: background .2s ease-out !important; +} +.glitch { + background: #0c0c0c !important; + color: #edfcf5 !important; +} +.glitch.local-settings span.hint { + color: #a81717 !important; +} +.glitch.local-settings__navigation__item { + color: #edfcf5 !important; + background: #0c0c0c !important; + border-bottom: 1px solid #111 !important; + transition: background .1s !important; +} +.glitch.local-settings__navigation { + background: #0c0c0c !important; +} +.glitch.local-settings__navigation__item:hover { + background: #161616 !important; +} +.glitch.local-settings__navigation__item.active { + background: #a81717 !important; + color: #fff !important; + transition: all .1s ease-in !important; +} +.column-link { + background: #000000 !important; +} + +.column>.scrollable { + background: #000000 !important; +} +.getting-started__wrapper audio, .getting-started__wrapper p { + background: black !important; + padding-left: 10px !important; + padding-bottom: 3px !important; +} +.conversation--unread { + background: #0c0c0c !important; +} +.composer--options--dropdown--content--item { + background: #080808 !important; + color: #edfcf5 !important; +} +.react-toggle-track { + background-color: #202020 !important; +} +.composer--options--dropdown--content--item span:first-child { + color: #a81717 !important; +} +.composer--options--dropdown--content--item:hover span:first-child { + color: #edfcf5 !important; +} +.composer--spoiler input { + color: #edfcf5 !important; + background: #080808 !important; +} +.confirmation-modal__container, .report-modal__target { + color: #edfcf5 !important; + background: #0c0c0c !important; +} +confirmation-modal__do_not_ask_again { + background: #0c0c0c !important; + color: #edfcf5 !important; +} +.block-modal__action-bar, .boost-modal__action-bar, .confirmation-modal__action-bar, .doodle-modal__action-bar, .favourite-modal__action-bar, .mute-modal__action-bar { + background: #111 !important; +} +.composer--reply>.content blockquote, .composer--reply>.content p, .composer--reply>.content pre { + color: #edfcf5 !important; +} +.composer--reply>.content a { + color: #e8585c!important; +} +.composer--reply { + margin: 0 0 10px !important; + border-radius: 4px !important; + padding: 10px !important; + background: #a8171799 !important; +} +.display-name__account { + color: #edfcf5bb !important; +} +.attachment-list__list a { + color: #edfcf58f !important; +} +.compose-form__poll-wrapper ul { + background: #080808 !important; + box-shadow: inset 0px 1px #a8171799 !important; +} +.poll__option input[type=text] { + color: #edfcf5 !important; + background: #060606 !important; + border: 1px solid #3a3a3a !important; +} +.compose-form__poll-wrapper .poll__footer { + background: #080808 !important; + border-top: 1px solid #a8171799 !important; +} +.compose-form__poll-wrapper select { + color: #edfcf5 !important; + background-color: #060606 !important; + border: 1px solid #3a3a3a !important; +} +.compose-form__poll-wrapper .button.button-secondary { + background: #060606 !important; + color: #a81717 !important; + border-color: #3a3a3a !important; + margin-right: 5px !important; +} +.compose-form__poll-wrapper .icon-button.disabled { + color: #a8171799 !important; +} +.compose-form__poll-wrapper { + border-top: 0px solid #a8171799 !important; +} +.poll__input { + display: inline-block !important; + position: relative !important; + border: 1px solid #a8171799 !important; +} +.confirmation-modal__do_not_ask_again { + color: #edfcf5 !important; + background: #0c0c0c !important; +} +.dropdown-menu { + background: #0c0c0c !important; +} +.dropdown-menu__item a { + background: #0c0c0c !important; + color: #edfcf5 !important; +} +.dropdown-menu__separator { + border-bottom: 1px solid #a8171799 !important; +} +.doodle-modal__container { + background: #111 !important; +} +.doodle-modal__container canvas { + border: 5px solid #111 !important; +} +.actions-modal, .block-modal, .boost-modal, .confirmation-modal, .doodle-modal, .favourite-modal, .giphy-modal, .mute-modal, .report-modal { + background: #0c0c0c !important; + color: #edfcf5 !important; +} +.block-modal__container select, .confirmation-modal__container select, .mute-modal__container select, .report-modal__target select { + color: #edfcf5 !important; + background: #080808 !important; + border: 1px solid #3a3a3a !important; +} +.report-modal__container { + border-top: 1px solid #a8171799 !important; +} +.report-modal__comment { + border-right: 1px solid #a8171799 !important; +} +.status-check-box { + border-bottom: 1px solid #a8171799 !important; +} +.report-modal__comment .setting-text { + color: #edfcf5 !important; + background: #0c0c0c !important; + border: 1px solid #202020 !important; +} +.account { + border-bottom: 1px solid #a8171799 !important; +} +.list-adder__lists { + background: #161616 !important; +} +.composer--options--dropdown--content--item span:first-child:active { + color: #edfcf5 !important; +} +.icon-button { + display: inline-block !important; + padding: 0 !important; +} +.setting-text { + color: #edfcf5 !important; + background: transparent !important; + border: 0 !important; + border-bottom: 2px solid #a8171799 !important; +} +.column-header__collapsible-inner { + background: #080808 !important; + padding: 15px !important; +} +.setting-text { + color: #a8171799 !important; + background: transparent !important; + border: 0 !important; + border-bottom: 2px solid #a8171799 !important; +} +.column-settings__section { + color: #a81717 !important; +} +.column-header__button, .column-header__notif-cleaning-buttons button { + background: #161616 !important; + border: 0 !important; + color: #a81717 !important; +} +.column-header__button.active, .column-header__button.active:hover, .column-header__notif-cleaning-buttons button.active, .column-header__notif-cleaning-buttons button.active:hover { + color: #fff !important; + background: #a8171799 !important; +} +button.column-header__button.active:hover { + background: #a81717 !important; +} +.column-header__button:hover, .column-header__notif-cleaning-buttons button:hover { + color: #edfcf5 !important; + background: #a81717 !important; +} +.empty-column-indicator, .error-column, .follow_requests-unlocked_explanation { + color: #3a3a3a !important; + background: #080808 !important; +} +.focusable:focus.status.status-direct { + box-shadow: 0 0 6px #a81717 !important; + animation: fade .21s linear !important; + background: #050505 !important; +} +.detailed-status { + background: #080808 !important; +} +.detailed-status__action-bar { + background-color: #08080899 !important; + border-top: 1px solid #a8171799 !important; + border-bottom: none !important; +} +.announcements { + background: #6e1616 !important; +} +.account__section-headline a, .account__section-headline button, .notification__filter-bar a, .notification__filter-bar button { + color: #a81717 !important; +} +.announcements__item__content a.unhandled-link { + color: #e87487 !important; +} +.reactions-bar__item { + flex-shrink: 0 !important; + background: #02020250 !important; +} +.reactions-bar__item:active, .reactions-bar__item:focus, .reactions-bar__item:hover { + background: #a8171799 !important; + transition: all .2s ease-out !important; + transition-property: background-color,color !important; +} +.reactions-bar__item.active { + color: white !important; + transition: all .1s ease-in !important; + transition-property: background-color,color !important; + background-color: #a8171760 !important; +} +.announcements button.icon-button { + color: #edfcf582 !important; +} + +.conversation--unread { + background: #080808 !important; +} +.conversation__content__relative-time { + font-size: 15px !important; + color: #a81717 !important; + padding-left: 15px !important; +} +.conversation__content__names { + color: #a81717 !important; +} +.box-widget { + padding: 20px !important; + border-radius: 4px !important; + background: #080808 !important; + box-shadow: 0 0 2px #a8171799 !important; +} +.announcements { + /* border-color: red !important; */ + box-shadow: inset 0 0 2px #a81717 !important; +} +.button.logo-button { + background: #a8171799 !important; +} +.button { + background-color: #a8171799 !important; +} +.button.logo-button.button--destructive:active { + background-color: #a8171799 !important; +} +.icon-button:active, .icon-button:focus, .icon-button:hover { + color: #a81717 !important; + background-color: rgba(58,58,58,.15) !important; +} +.account__header__tabs__buttons .icon-button:hover { + transition: all .1s ease-in !important; + border: 1px solid #a81717 !important; +} +.button.logo-button.button--destructive:hover { + background-color: #a81717 !important; +} +.tabs-bar__link { + background: #020202 !important; +} +.tabs-bar__link:hover { + background: #a81717 !important; + color: #edfcf5 !important; +} +.tabs-bar__link.active { + border-bottom: 2px solid #a81717 !important; + color: #a81717 !important; + background: #020202 !important; +} +.composer--upload_form>.content { + background: #080808 !important; +} +.composer--upload_form { + background: #080808 !important; +} +.composer--options--dropdown--content--item span:first-child { + color: #edfcf5 !important; +} +.column-back-button { + background: #0c0c0c !important; +} +.column-inline-form { + background: #080808 !important; +} +.column-subheading { + background: #000000 !important; +} +.column-header__collapsible { + color: #a81717 !important; +} +.autosuggest-textarea__suggestions__item.selected { + background: #a8171799 !important; +} +.autosuggest-textarea__suggestions__item:active, .autosuggest-textarea__suggestions__item:focus, .autosuggest-textarea__suggestions__item:hover { + background: #cc1c1c !important; +} +.autosuggest-textarea__suggestions { + color: #edfcf5 !important; + background: #080808 !important; + box-shadow: 4px 4px 6px rgb(0 0 0 / 40%) !important; +} +.autosuggest-textarea__suggestions__item>.account.small .display-name>span { + color: #909090 !important; +} diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index c985555a6..29574c80d 100755 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -46,6 +46,8 @@ = stylesheet_link_tag custom_css_path, host: request.host, media: 'all' %body{ class: body_classes } + + = content_for?(:content) ? yield(:content) : yield .logo-resources diff --git a/glitch-themes.patch b/glitch-themes.patch deleted file mode 100644 index f8ae91168..000000000 --- a/glitch-themes.patch +++ /dev/null @@ -1,1598 +0,0 @@ -From 145fce993b4019c81d3da78b2f9158a4ce60ea2e Mon Sep 17 00:00:00 2001 -From: "@stux" -Date: Sat, 14 Aug 2021 23:05:12 +0200 -Subject: [PATCH] Added some Glitch-soc themes - ---- - .../flavours/glitch/styles/dark.scss | 3 + - .../flavours/glitch/styles/dark/diff.scss | 440 ++++++++++++++++++ - .../glitch/styles/dark/variables.scss | 41 ++ - .../flavours/glitch/styles/hacker.scss | 3 + - .../flavours/glitch/styles/hacker/diff.scss | 440 ++++++++++++++++++ - .../glitch/styles/hacker/variables.scss | 41 ++ - .../flavours/glitch/styles/night.scss | 3 + - .../flavours/glitch/styles/night/diff.scss | 440 ++++++++++++++++++ - .../glitch/styles/night/variables.scss | 41 ++ - app/javascript/skins/glitch/dark/common.scss | 1 + - app/javascript/skins/glitch/dark/names.yml | 4 + - .../skins/glitch/hacker/common.scss | 1 + - app/javascript/skins/glitch/hacker/names.yml | 4 + - app/javascript/skins/glitch/night/common.scss | 1 + - app/javascript/skins/glitch/night/names.yml | 4 + - 15 files changed, 1467 insertions(+) - create mode 100644 app/javascript/flavours/glitch/styles/dark.scss - create mode 100644 app/javascript/flavours/glitch/styles/dark/diff.scss - create mode 100644 app/javascript/flavours/glitch/styles/dark/variables.scss - create mode 100644 app/javascript/flavours/glitch/styles/hacker.scss - create mode 100644 app/javascript/flavours/glitch/styles/hacker/diff.scss - create mode 100644 app/javascript/flavours/glitch/styles/hacker/variables.scss - create mode 100644 app/javascript/flavours/glitch/styles/night.scss - create mode 100644 app/javascript/flavours/glitch/styles/night/diff.scss - create mode 100644 app/javascript/flavours/glitch/styles/night/variables.scss - create mode 100644 app/javascript/skins/glitch/dark/common.scss - create mode 100644 app/javascript/skins/glitch/dark/names.yml - create mode 100644 app/javascript/skins/glitch/hacker/common.scss - create mode 100644 app/javascript/skins/glitch/hacker/names.yml - create mode 100644 app/javascript/skins/glitch/night/common.scss - create mode 100644 app/javascript/skins/glitch/night/names.yml - -diff --git a/app/javascript/flavours/glitch/styles/dark.scss b/app/javascript/flavours/glitch/styles/dark.scss -new file mode 100644 -index 000000000..db522e63b ---- /dev/null -+++ b/app/javascript/flavours/glitch/styles/dark.scss -@@ -0,0 +1,3 @@ -+@import 'dark/variables'; -+@import 'index'; -+@import 'dark/diff'; -diff --git a/app/javascript/flavours/glitch/styles/dark/diff.scss b/app/javascript/flavours/glitch/styles/dark/diff.scss -new file mode 100644 -index 000000000..de1278114 ---- /dev/null -+++ b/app/javascript/flavours/glitch/styles/dark/diff.scss -@@ -0,0 +1,440 @@ -+// Notes! -+// Sass color functions, "darken" and "lighten" are automatically replaced. -+ -+.glitch.local-settings { -+ background: darken($ui-base-color, 80%); -+ -+ &__navigation { -+ background: darken($ui-base-color, 30%); -+ } -+ -+ &__navigation__item { -+ background: darken($ui-base-color, 50%); -+ -+ &:hover { -+ background: $ui-base-color; -+ color: $primary-text-color; -+ } -+ } -+} -+ -+.notification__dismiss-overlay { -+ .wrappy { -+ box-shadow: unset; -+ } -+ -+ .ckbox { -+ text-shadow: unset; -+ } -+} -+ -+.status.status-direct:not(.read) { -+ background: darken($ui-base-color, 8%); -+ border-bottom-color: darken($ui-base-color, 12%); -+ -+ &.collapsed> .status__content:after { -+ background: linear-gradient(rgba(darken($ui-base-color, 8%), 0), rgba(darken($ui-base-color, 8%), 1)); -+ } -+} -+ -+.focusable:focus.status.status-direct:not(.read) { -+ background: darken($ui-base-color, 4%); -+ -+ &.collapsed> .status__content:after { -+ background: linear-gradient(rgba(darken($ui-base-color, 4%), 0), rgba(darken($ui-base-color, 4%), 1)); -+ } -+} -+ -+// Change columns' default background colors -+.column { -+ > .scrollable { -+ background: darken($ui-base-color, 13%); -+ } -+} -+ -+.status.collapsed .status__content:after { -+ background: linear-gradient(rgba(darken($ui-base-color, 13%), 0), rgba(darken($ui-base-color, 13%), 1)); -+} -+ -+.drawer__inner { -+ background: $ui-base-color; -+} -+ -+.drawer__inner__mastodon { -+ background: $ui-base-color url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto !important; -+ -+ .mastodon { -+ filter: contrast(75%) brightness(75%) !important; -+ } -+} -+ -+// Change the default appearance of the content warning button -+.status__content { -+ -+ .status__content__spoiler-link { -+ -+ background: darken($ui-base-color, 30%); -+ -+ &:hover { -+ background: lighten($ui-base-color, 35%); -+ color: $primary-text-color; -+ text-decoration: none; -+ } -+ -+ } -+ -+} -+ -+// Change the background colors of media and video spoilers -+.media-spoiler, -+.video-player__spoiler, -+.account-gallery__item a { -+ background: $ui-base-color; -+} -+ -+// Change the colors used in the dropdown menu -+.dropdown-menu { -+ background: $ui-base-color; -+} -+ -+.dropdown-menu__arrow { -+ -+ &.left { -+ border-left-color: $ui-base-color; -+ } -+ -+ &.top { -+ border-top-color: $ui-base-color; -+ } -+ -+ &.bottom { -+ border-bottom-color: $ui-base-color; -+ } -+ -+ &.right { -+ border-right-color: $ui-base-color; -+ } -+ -+} -+ -+.dropdown-menu__item { -+ a { -+ background: $ui-base-color; -+ color: $ui-secondary-color; -+ } -+} -+ -+// Change the default color of several parts of the compose form -+.composer { -+ -+ .composer--spoiler input, .compose-form__autosuggest-wrapper textarea { -+ color: lighten($ui-base-color, 80%); -+ -+ &:disabled { background: lighten($simple-background-color, 10%) } -+ -+ &::placeholder { -+ color: lighten($ui-base-color, 70%); -+ } -+ } -+ -+ .compose-form__modifiers { -+ background: darken($ui-base-color, 60%); -+ -+ .autosuggest-input input, select { -+ background: darken($ui-base-color, 70%); -+ } -+ } -+ -+ .composer--options-wrapper { -+ background: lighten($ui-base-color, 10%); -+ } -+ -+ .composer--options > hr { -+ display: none; -+ } -+ -+ .composer--options--dropdown--content--item { -+ color: $ui-primary-color; -+ -+ strong { -+ color: $ui-primary-color; -+ } -+ -+ } -+ -+ header > .account.small { -+ color: $primary-text-color; -+ } -+ -+ .composer--reply > .content { -+ color: $primary-text-color; -+ } -+} -+ -+.composer--upload_form--actions .icon-button { -+ color: lighten($white, 7%); -+ -+ &:active, -+ &:focus, -+ &:hover { -+ color: $white; -+ } -+} -+ -+.composer--upload_form--item > div input { -+ color: lighten($white, 7%); -+ -+ &::placeholder { -+ color: lighten($white, 10%); -+ } -+} -+ -+.dropdown-menu__separator { -+ border-bottom-color: lighten($ui-base-color, 12%); -+} -+ -+.status__content, -+.reply-indicator__content { -+ a { -+ color: $highlight-text-color; -+ } -+} -+ -+.emoji-mart-bar { -+ border-color: darken($ui-base-color, 4%); -+ -+ &:first-child { -+ background: lighten($ui-base-color, 10%); -+ } -+} -+ -+.emoji-mart-search input { -+ background: rgba($ui-base-color, 0.3); -+ border-color: $ui-base-color; -+} -+ -+.autosuggest-textarea__suggestions { -+ background: darken($ui-base-color, 40%) -+} -+ -+.autosuggest-textarea__suggestions__item { -+ &:hover, -+ &:focus, -+ &:active, -+ &.selected { -+ background: darken($ui-base-color, 4%); -+ color: $primary-text-color; -+ } -+} -+ -+.react-toggle-track { -+ background: $ui-secondary-color; -+} -+ -+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { -+ background: lighten($ui-secondary-color, 10%); -+} -+ -+.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { -+ background: darken($ui-highlight-color, 10%); -+} -+ -+// Change the background colors of modals -+.actions-modal, -+.boost-modal, -+.favourite-modal, -+.confirmation-modal, -+.mute-modal, -+.block-modal, -+.report-modal, -+.embed-modal, -+.error-modal, -+.onboarding-modal, -+.report-modal__comment .setting-text__wrapper, -+.report-modal__comment .setting-text { -+ background: $primary-text-color; -+ border: 1px solid lighten($ui-base-color, 8%); -+} -+ -+.report-modal__comment { -+ border-right-color: lighten($ui-base-color, 8%); -+} -+ -+.report-modal__container { -+ border-top-color: lighten($ui-base-color, 8%); -+} -+ -+.boost-modal__action-bar, -+.confirmation-modal__action-bar, -+.mute-modal__action-bar, -+.block-modal__action-bar, -+.onboarding-modal__paginator, -+.error-modal__footer { -+ background: darken($ui-base-color, 20%); -+ -+ .onboarding-modal__nav, -+ .error-modal__nav { -+ &:hover, -+ &:focus, -+ &:active { -+ background-color: darken($ui-base-color, 12%); -+ } -+ } -+} -+ -+// Change the default color used for the text in an empty column or on the error column -+.empty-column-indicator, -+.error-column { -+ color: darken($ui-base-color, 60%); -+} -+ -+// Change the default colors used on some parts of the profile pages -+.activity-stream-tabs { -+ -+ background: $account-background-color; -+ -+ a { -+ &.active { -+ color: $ui-primary-color; -+ } -+ } -+ -+} -+ -+.activity-stream { -+ -+ .entry { -+ background: $account-background-color; -+ } -+ -+ .status.light { -+ -+ .status__content { -+ color: $primary-text-color; -+ } -+ -+ .display-name { -+ strong { -+ color: $primary-text-color; -+ } -+ } -+ -+ } -+ -+} -+ -+.accounts-grid { -+ .account-grid-card { -+ -+ .controls { -+ .icon-button { -+ color: $ui-secondary-color; -+ } -+ } -+ -+ .name { -+ a { -+ color: $primary-text-color; -+ } -+ } -+ -+ .username { -+ color: $ui-secondary-color; -+ } -+ -+ .account__header__content { -+ color: $primary-text-color; -+ } -+ -+ } -+} -+ -+.button.logo-button { -+ color: $white; -+ -+ svg { -+ fill: $white; -+ } -+} -+ -+.public-layout { -+ .header, -+ .public-account-header, -+ .public-account-bio { -+ box-shadow: none; -+ } -+ -+ .header { -+ background: lighten($ui-base-color, 12%); -+ } -+ -+ .public-account-header { -+ &__image { -+ background: lighten($ui-base-color, 12%); -+ -+ &::after { -+ box-shadow: none; -+ } -+ } -+ -+ &__tabs { -+ &__name { -+ h1, -+ h1 small { -+ color: $white; -+ } -+ } -+ } -+ } -+} -+ -+.account__section-headline a.active::after { -+ border-color: transparent transparent $white; -+} -+ -+.hero-widget, -+.box-widget, -+.contact-widget, -+.landing-page__information.contact-widget, -+.moved-account-widget, -+.memoriam-widget, -+.activity-stream, -+.nothing-here, -+.directory__tag > a, -+.directory__tag > div { -+ box-shadow: none; -+} -+ -+.admin-wrapper { -+ .sidebar ul .simple-navigation-active-leaf a { -+ color: $black; -+ } -+} -+ -+.simple_form button, .button { -+ color: $black; -+} -+ -+.poll__input { -+ border: 1px solid pink; -+} -+ -+.poll .button.button-secondary { -+ background: $primary-text-color; -+ color: $black; -+} -+ -+button.icon-button { -+ color: $ui-secondary-color; -+} -+ -+button.icon-button i.fa-retweet { -+ background-image: url('data:image/svg+xml;utf8,'); -+} -+ -+button.icon-button.active i.fa-retweet { -+ background-image: url('data:image/svg+xml;utf8,'); -+ box-shadow: 0px 0px 5px pink, inset 0px 0px 5px pink; -+ border-radius: 20px; -+} -+ -diff --git a/app/javascript/flavours/glitch/styles/dark/variables.scss b/app/javascript/flavours/glitch/styles/dark/variables.scss -new file mode 100644 -index 000000000..12e51ee3b ---- /dev/null -+++ b/app/javascript/flavours/glitch/styles/dark/variables.scss -@@ -0,0 +1,41 @@ -+// Dependent colors -+$black: #000000; -+$white: #ffffff; -+ -+$classic-base-color: #c7c7c7; -+$classic-primary-color: #454545; -+$classic-secondary-color: #2a2a2a; -+$classic-highlight-color: #bcbcbc; -+ -+$ui-base-color: $classic-secondary-color !default; -+$ui-base-lighter-color: darken($ui-base-color, 57%); -+$ui-highlight-color: $classic-highlight-color !default; -+$ui-primary-color: $classic-primary-color !default; -+$ui-secondary-color: $classic-base-color !default; -+ -+$primary-text-color: #e8e8e8 !default; -+$darker-text-color: $classic-base-color !default; -+$dark-text-color: #a7a7a7; -+$action-button-color: #828282; -+ -+$success-green: #80b38b; -+$error-red: #b38080; -+$warning-red: #b38c80; -+ -+$base-overlay-background: $black !default; -+ -+$inverted-text-color: #222222 !default; -+$lighter-text-color: $classic-base-color !default; -+$light-text-color: #6b6b6b; -+ -+$account-background-color: #494949 !default; -+ -+@function darken($color, $amount) { -+ @return hsl(hue($color), saturation($color), lightness($color) + $amount); -+} -+ -+@function lighten($color, $amount) { -+ @return hsl(hue($color), saturation($color), lightness($color) - $amount); -+} -+ -+//$emojis-requiring-inversion: 'chains'; -diff --git a/app/javascript/flavours/glitch/styles/hacker.scss b/app/javascript/flavours/glitch/styles/hacker.scss -new file mode 100644 -index 000000000..c8b1c3c1b ---- /dev/null -+++ b/app/javascript/flavours/glitch/styles/hacker.scss -@@ -0,0 +1,3 @@ -+@import 'hacker/variables'; -+@import 'index'; -+@import 'hacker/diff'; -diff --git a/app/javascript/flavours/glitch/styles/hacker/diff.scss b/app/javascript/flavours/glitch/styles/hacker/diff.scss -new file mode 100644 -index 000000000..de1278114 ---- /dev/null -+++ b/app/javascript/flavours/glitch/styles/hacker/diff.scss -@@ -0,0 +1,440 @@ -+// Notes! -+// Sass color functions, "darken" and "lighten" are automatically replaced. -+ -+.glitch.local-settings { -+ background: darken($ui-base-color, 80%); -+ -+ &__navigation { -+ background: darken($ui-base-color, 30%); -+ } -+ -+ &__navigation__item { -+ background: darken($ui-base-color, 50%); -+ -+ &:hover { -+ background: $ui-base-color; -+ color: $primary-text-color; -+ } -+ } -+} -+ -+.notification__dismiss-overlay { -+ .wrappy { -+ box-shadow: unset; -+ } -+ -+ .ckbox { -+ text-shadow: unset; -+ } -+} -+ -+.status.status-direct:not(.read) { -+ background: darken($ui-base-color, 8%); -+ border-bottom-color: darken($ui-base-color, 12%); -+ -+ &.collapsed> .status__content:after { -+ background: linear-gradient(rgba(darken($ui-base-color, 8%), 0), rgba(darken($ui-base-color, 8%), 1)); -+ } -+} -+ -+.focusable:focus.status.status-direct:not(.read) { -+ background: darken($ui-base-color, 4%); -+ -+ &.collapsed> .status__content:after { -+ background: linear-gradient(rgba(darken($ui-base-color, 4%), 0), rgba(darken($ui-base-color, 4%), 1)); -+ } -+} -+ -+// Change columns' default background colors -+.column { -+ > .scrollable { -+ background: darken($ui-base-color, 13%); -+ } -+} -+ -+.status.collapsed .status__content:after { -+ background: linear-gradient(rgba(darken($ui-base-color, 13%), 0), rgba(darken($ui-base-color, 13%), 1)); -+} -+ -+.drawer__inner { -+ background: $ui-base-color; -+} -+ -+.drawer__inner__mastodon { -+ background: $ui-base-color url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto !important; -+ -+ .mastodon { -+ filter: contrast(75%) brightness(75%) !important; -+ } -+} -+ -+// Change the default appearance of the content warning button -+.status__content { -+ -+ .status__content__spoiler-link { -+ -+ background: darken($ui-base-color, 30%); -+ -+ &:hover { -+ background: lighten($ui-base-color, 35%); -+ color: $primary-text-color; -+ text-decoration: none; -+ } -+ -+ } -+ -+} -+ -+// Change the background colors of media and video spoilers -+.media-spoiler, -+.video-player__spoiler, -+.account-gallery__item a { -+ background: $ui-base-color; -+} -+ -+// Change the colors used in the dropdown menu -+.dropdown-menu { -+ background: $ui-base-color; -+} -+ -+.dropdown-menu__arrow { -+ -+ &.left { -+ border-left-color: $ui-base-color; -+ } -+ -+ &.top { -+ border-top-color: $ui-base-color; -+ } -+ -+ &.bottom { -+ border-bottom-color: $ui-base-color; -+ } -+ -+ &.right { -+ border-right-color: $ui-base-color; -+ } -+ -+} -+ -+.dropdown-menu__item { -+ a { -+ background: $ui-base-color; -+ color: $ui-secondary-color; -+ } -+} -+ -+// Change the default color of several parts of the compose form -+.composer { -+ -+ .composer--spoiler input, .compose-form__autosuggest-wrapper textarea { -+ color: lighten($ui-base-color, 80%); -+ -+ &:disabled { background: lighten($simple-background-color, 10%) } -+ -+ &::placeholder { -+ color: lighten($ui-base-color, 70%); -+ } -+ } -+ -+ .compose-form__modifiers { -+ background: darken($ui-base-color, 60%); -+ -+ .autosuggest-input input, select { -+ background: darken($ui-base-color, 70%); -+ } -+ } -+ -+ .composer--options-wrapper { -+ background: lighten($ui-base-color, 10%); -+ } -+ -+ .composer--options > hr { -+ display: none; -+ } -+ -+ .composer--options--dropdown--content--item { -+ color: $ui-primary-color; -+ -+ strong { -+ color: $ui-primary-color; -+ } -+ -+ } -+ -+ header > .account.small { -+ color: $primary-text-color; -+ } -+ -+ .composer--reply > .content { -+ color: $primary-text-color; -+ } -+} -+ -+.composer--upload_form--actions .icon-button { -+ color: lighten($white, 7%); -+ -+ &:active, -+ &:focus, -+ &:hover { -+ color: $white; -+ } -+} -+ -+.composer--upload_form--item > div input { -+ color: lighten($white, 7%); -+ -+ &::placeholder { -+ color: lighten($white, 10%); -+ } -+} -+ -+.dropdown-menu__separator { -+ border-bottom-color: lighten($ui-base-color, 12%); -+} -+ -+.status__content, -+.reply-indicator__content { -+ a { -+ color: $highlight-text-color; -+ } -+} -+ -+.emoji-mart-bar { -+ border-color: darken($ui-base-color, 4%); -+ -+ &:first-child { -+ background: lighten($ui-base-color, 10%); -+ } -+} -+ -+.emoji-mart-search input { -+ background: rgba($ui-base-color, 0.3); -+ border-color: $ui-base-color; -+} -+ -+.autosuggest-textarea__suggestions { -+ background: darken($ui-base-color, 40%) -+} -+ -+.autosuggest-textarea__suggestions__item { -+ &:hover, -+ &:focus, -+ &:active, -+ &.selected { -+ background: darken($ui-base-color, 4%); -+ color: $primary-text-color; -+ } -+} -+ -+.react-toggle-track { -+ background: $ui-secondary-color; -+} -+ -+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { -+ background: lighten($ui-secondary-color, 10%); -+} -+ -+.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { -+ background: darken($ui-highlight-color, 10%); -+} -+ -+// Change the background colors of modals -+.actions-modal, -+.boost-modal, -+.favourite-modal, -+.confirmation-modal, -+.mute-modal, -+.block-modal, -+.report-modal, -+.embed-modal, -+.error-modal, -+.onboarding-modal, -+.report-modal__comment .setting-text__wrapper, -+.report-modal__comment .setting-text { -+ background: $primary-text-color; -+ border: 1px solid lighten($ui-base-color, 8%); -+} -+ -+.report-modal__comment { -+ border-right-color: lighten($ui-base-color, 8%); -+} -+ -+.report-modal__container { -+ border-top-color: lighten($ui-base-color, 8%); -+} -+ -+.boost-modal__action-bar, -+.confirmation-modal__action-bar, -+.mute-modal__action-bar, -+.block-modal__action-bar, -+.onboarding-modal__paginator, -+.error-modal__footer { -+ background: darken($ui-base-color, 20%); -+ -+ .onboarding-modal__nav, -+ .error-modal__nav { -+ &:hover, -+ &:focus, -+ &:active { -+ background-color: darken($ui-base-color, 12%); -+ } -+ } -+} -+ -+// Change the default color used for the text in an empty column or on the error column -+.empty-column-indicator, -+.error-column { -+ color: darken($ui-base-color, 60%); -+} -+ -+// Change the default colors used on some parts of the profile pages -+.activity-stream-tabs { -+ -+ background: $account-background-color; -+ -+ a { -+ &.active { -+ color: $ui-primary-color; -+ } -+ } -+ -+} -+ -+.activity-stream { -+ -+ .entry { -+ background: $account-background-color; -+ } -+ -+ .status.light { -+ -+ .status__content { -+ color: $primary-text-color; -+ } -+ -+ .display-name { -+ strong { -+ color: $primary-text-color; -+ } -+ } -+ -+ } -+ -+} -+ -+.accounts-grid { -+ .account-grid-card { -+ -+ .controls { -+ .icon-button { -+ color: $ui-secondary-color; -+ } -+ } -+ -+ .name { -+ a { -+ color: $primary-text-color; -+ } -+ } -+ -+ .username { -+ color: $ui-secondary-color; -+ } -+ -+ .account__header__content { -+ color: $primary-text-color; -+ } -+ -+ } -+} -+ -+.button.logo-button { -+ color: $white; -+ -+ svg { -+ fill: $white; -+ } -+} -+ -+.public-layout { -+ .header, -+ .public-account-header, -+ .public-account-bio { -+ box-shadow: none; -+ } -+ -+ .header { -+ background: lighten($ui-base-color, 12%); -+ } -+ -+ .public-account-header { -+ &__image { -+ background: lighten($ui-base-color, 12%); -+ -+ &::after { -+ box-shadow: none; -+ } -+ } -+ -+ &__tabs { -+ &__name { -+ h1, -+ h1 small { -+ color: $white; -+ } -+ } -+ } -+ } -+} -+ -+.account__section-headline a.active::after { -+ border-color: transparent transparent $white; -+} -+ -+.hero-widget, -+.box-widget, -+.contact-widget, -+.landing-page__information.contact-widget, -+.moved-account-widget, -+.memoriam-widget, -+.activity-stream, -+.nothing-here, -+.directory__tag > a, -+.directory__tag > div { -+ box-shadow: none; -+} -+ -+.admin-wrapper { -+ .sidebar ul .simple-navigation-active-leaf a { -+ color: $black; -+ } -+} -+ -+.simple_form button, .button { -+ color: $black; -+} -+ -+.poll__input { -+ border: 1px solid pink; -+} -+ -+.poll .button.button-secondary { -+ background: $primary-text-color; -+ color: $black; -+} -+ -+button.icon-button { -+ color: $ui-secondary-color; -+} -+ -+button.icon-button i.fa-retweet { -+ background-image: url('data:image/svg+xml;utf8,'); -+} -+ -+button.icon-button.active i.fa-retweet { -+ background-image: url('data:image/svg+xml;utf8,'); -+ box-shadow: 0px 0px 5px pink, inset 0px 0px 5px pink; -+ border-radius: 20px; -+} -+ -diff --git a/app/javascript/flavours/glitch/styles/hacker/variables.scss b/app/javascript/flavours/glitch/styles/hacker/variables.scss -new file mode 100644 -index 000000000..46f055a8f ---- /dev/null -+++ b/app/javascript/flavours/glitch/styles/hacker/variables.scss -@@ -0,0 +1,41 @@ -+// Dependent colors -+$black: #000000; -+$white: #ffffff; -+ -+$classic-base-color: #c8b7c1; -+$classic-primary-color: #4C3A45; -+$classic-secondary-color: #2C2028; -+$classic-highlight-color: #bca9b4; -+ -+$ui-base-color: $classic-secondary-color !default; -+$ui-base-lighter-color: darken($ui-base-color, 57%); -+$ui-highlight-color: $classic-highlight-color !default; -+$ui-primary-color: $classic-primary-color !default; -+$ui-secondary-color: $classic-base-color !default; -+ -+$primary-text-color: #e9e2e6 !default; -+$darker-text-color: $classic-base-color !default; -+$dark-text-color: #a68c9c; -+$action-button-color: #606984; -+ -+$success-green: #80b38b; -+$error-red: #b38080; -+$warning-red: #b38c80; -+ -+$base-overlay-background: $black !default; -+ -+$inverted-text-color: #291822 !default; -+$lighter-text-color: $classic-base-color !default; -+$light-text-color: #6A5160; -+ -+$account-background-color: #4C3A45 !default; -+ -+@function darken($color, $amount) { -+ @return hsl(hue($color), saturation($color), lightness($color) + $amount); -+} -+ -+@function lighten($color, $amount) { -+ @return hsl(hue($color), saturation($color), lightness($color) - $amount); -+} -+ -+//$emojis-requiring-inversion: 'chains'; -diff --git a/app/javascript/flavours/glitch/styles/night.scss b/app/javascript/flavours/glitch/styles/night.scss -new file mode 100644 -index 000000000..a09a79329 ---- /dev/null -+++ b/app/javascript/flavours/glitch/styles/night.scss -@@ -0,0 +1,3 @@ -+@import 'night/variables'; -+@import 'index'; -+@import 'night/diff'; -diff --git a/app/javascript/flavours/glitch/styles/night/diff.scss b/app/javascript/flavours/glitch/styles/night/diff.scss -new file mode 100644 -index 000000000..de1278114 ---- /dev/null -+++ b/app/javascript/flavours/glitch/styles/night/diff.scss -@@ -0,0 +1,440 @@ -+// Notes! -+// Sass color functions, "darken" and "lighten" are automatically replaced. -+ -+.glitch.local-settings { -+ background: darken($ui-base-color, 80%); -+ -+ &__navigation { -+ background: darken($ui-base-color, 30%); -+ } -+ -+ &__navigation__item { -+ background: darken($ui-base-color, 50%); -+ -+ &:hover { -+ background: $ui-base-color; -+ color: $primary-text-color; -+ } -+ } -+} -+ -+.notification__dismiss-overlay { -+ .wrappy { -+ box-shadow: unset; -+ } -+ -+ .ckbox { -+ text-shadow: unset; -+ } -+} -+ -+.status.status-direct:not(.read) { -+ background: darken($ui-base-color, 8%); -+ border-bottom-color: darken($ui-base-color, 12%); -+ -+ &.collapsed> .status__content:after { -+ background: linear-gradient(rgba(darken($ui-base-color, 8%), 0), rgba(darken($ui-base-color, 8%), 1)); -+ } -+} -+ -+.focusable:focus.status.status-direct:not(.read) { -+ background: darken($ui-base-color, 4%); -+ -+ &.collapsed> .status__content:after { -+ background: linear-gradient(rgba(darken($ui-base-color, 4%), 0), rgba(darken($ui-base-color, 4%), 1)); -+ } -+} -+ -+// Change columns' default background colors -+.column { -+ > .scrollable { -+ background: darken($ui-base-color, 13%); -+ } -+} -+ -+.status.collapsed .status__content:after { -+ background: linear-gradient(rgba(darken($ui-base-color, 13%), 0), rgba(darken($ui-base-color, 13%), 1)); -+} -+ -+.drawer__inner { -+ background: $ui-base-color; -+} -+ -+.drawer__inner__mastodon { -+ background: $ui-base-color url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto !important; -+ -+ .mastodon { -+ filter: contrast(75%) brightness(75%) !important; -+ } -+} -+ -+// Change the default appearance of the content warning button -+.status__content { -+ -+ .status__content__spoiler-link { -+ -+ background: darken($ui-base-color, 30%); -+ -+ &:hover { -+ background: lighten($ui-base-color, 35%); -+ color: $primary-text-color; -+ text-decoration: none; -+ } -+ -+ } -+ -+} -+ -+// Change the background colors of media and video spoilers -+.media-spoiler, -+.video-player__spoiler, -+.account-gallery__item a { -+ background: $ui-base-color; -+} -+ -+// Change the colors used in the dropdown menu -+.dropdown-menu { -+ background: $ui-base-color; -+} -+ -+.dropdown-menu__arrow { -+ -+ &.left { -+ border-left-color: $ui-base-color; -+ } -+ -+ &.top { -+ border-top-color: $ui-base-color; -+ } -+ -+ &.bottom { -+ border-bottom-color: $ui-base-color; -+ } -+ -+ &.right { -+ border-right-color: $ui-base-color; -+ } -+ -+} -+ -+.dropdown-menu__item { -+ a { -+ background: $ui-base-color; -+ color: $ui-secondary-color; -+ } -+} -+ -+// Change the default color of several parts of the compose form -+.composer { -+ -+ .composer--spoiler input, .compose-form__autosuggest-wrapper textarea { -+ color: lighten($ui-base-color, 80%); -+ -+ &:disabled { background: lighten($simple-background-color, 10%) } -+ -+ &::placeholder { -+ color: lighten($ui-base-color, 70%); -+ } -+ } -+ -+ .compose-form__modifiers { -+ background: darken($ui-base-color, 60%); -+ -+ .autosuggest-input input, select { -+ background: darken($ui-base-color, 70%); -+ } -+ } -+ -+ .composer--options-wrapper { -+ background: lighten($ui-base-color, 10%); -+ } -+ -+ .composer--options > hr { -+ display: none; -+ } -+ -+ .composer--options--dropdown--content--item { -+ color: $ui-primary-color; -+ -+ strong { -+ color: $ui-primary-color; -+ } -+ -+ } -+ -+ header > .account.small { -+ color: $primary-text-color; -+ } -+ -+ .composer--reply > .content { -+ color: $primary-text-color; -+ } -+} -+ -+.composer--upload_form--actions .icon-button { -+ color: lighten($white, 7%); -+ -+ &:active, -+ &:focus, -+ &:hover { -+ color: $white; -+ } -+} -+ -+.composer--upload_form--item > div input { -+ color: lighten($white, 7%); -+ -+ &::placeholder { -+ color: lighten($white, 10%); -+ } -+} -+ -+.dropdown-menu__separator { -+ border-bottom-color: lighten($ui-base-color, 12%); -+} -+ -+.status__content, -+.reply-indicator__content { -+ a { -+ color: $highlight-text-color; -+ } -+} -+ -+.emoji-mart-bar { -+ border-color: darken($ui-base-color, 4%); -+ -+ &:first-child { -+ background: lighten($ui-base-color, 10%); -+ } -+} -+ -+.emoji-mart-search input { -+ background: rgba($ui-base-color, 0.3); -+ border-color: $ui-base-color; -+} -+ -+.autosuggest-textarea__suggestions { -+ background: darken($ui-base-color, 40%) -+} -+ -+.autosuggest-textarea__suggestions__item { -+ &:hover, -+ &:focus, -+ &:active, -+ &.selected { -+ background: darken($ui-base-color, 4%); -+ color: $primary-text-color; -+ } -+} -+ -+.react-toggle-track { -+ background: $ui-secondary-color; -+} -+ -+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { -+ background: lighten($ui-secondary-color, 10%); -+} -+ -+.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { -+ background: darken($ui-highlight-color, 10%); -+} -+ -+// Change the background colors of modals -+.actions-modal, -+.boost-modal, -+.favourite-modal, -+.confirmation-modal, -+.mute-modal, -+.block-modal, -+.report-modal, -+.embed-modal, -+.error-modal, -+.onboarding-modal, -+.report-modal__comment .setting-text__wrapper, -+.report-modal__comment .setting-text { -+ background: $primary-text-color; -+ border: 1px solid lighten($ui-base-color, 8%); -+} -+ -+.report-modal__comment { -+ border-right-color: lighten($ui-base-color, 8%); -+} -+ -+.report-modal__container { -+ border-top-color: lighten($ui-base-color, 8%); -+} -+ -+.boost-modal__action-bar, -+.confirmation-modal__action-bar, -+.mute-modal__action-bar, -+.block-modal__action-bar, -+.onboarding-modal__paginator, -+.error-modal__footer { -+ background: darken($ui-base-color, 20%); -+ -+ .onboarding-modal__nav, -+ .error-modal__nav { -+ &:hover, -+ &:focus, -+ &:active { -+ background-color: darken($ui-base-color, 12%); -+ } -+ } -+} -+ -+// Change the default color used for the text in an empty column or on the error column -+.empty-column-indicator, -+.error-column { -+ color: darken($ui-base-color, 60%); -+} -+ -+// Change the default colors used on some parts of the profile pages -+.activity-stream-tabs { -+ -+ background: $account-background-color; -+ -+ a { -+ &.active { -+ color: $ui-primary-color; -+ } -+ } -+ -+} -+ -+.activity-stream { -+ -+ .entry { -+ background: $account-background-color; -+ } -+ -+ .status.light { -+ -+ .status__content { -+ color: $primary-text-color; -+ } -+ -+ .display-name { -+ strong { -+ color: $primary-text-color; -+ } -+ } -+ -+ } -+ -+} -+ -+.accounts-grid { -+ .account-grid-card { -+ -+ .controls { -+ .icon-button { -+ color: $ui-secondary-color; -+ } -+ } -+ -+ .name { -+ a { -+ color: $primary-text-color; -+ } -+ } -+ -+ .username { -+ color: $ui-secondary-color; -+ } -+ -+ .account__header__content { -+ color: $primary-text-color; -+ } -+ -+ } -+} -+ -+.button.logo-button { -+ color: $white; -+ -+ svg { -+ fill: $white; -+ } -+} -+ -+.public-layout { -+ .header, -+ .public-account-header, -+ .public-account-bio { -+ box-shadow: none; -+ } -+ -+ .header { -+ background: lighten($ui-base-color, 12%); -+ } -+ -+ .public-account-header { -+ &__image { -+ background: lighten($ui-base-color, 12%); -+ -+ &::after { -+ box-shadow: none; -+ } -+ } -+ -+ &__tabs { -+ &__name { -+ h1, -+ h1 small { -+ color: $white; -+ } -+ } -+ } -+ } -+} -+ -+.account__section-headline a.active::after { -+ border-color: transparent transparent $white; -+} -+ -+.hero-widget, -+.box-widget, -+.contact-widget, -+.landing-page__information.contact-widget, -+.moved-account-widget, -+.memoriam-widget, -+.activity-stream, -+.nothing-here, -+.directory__tag > a, -+.directory__tag > div { -+ box-shadow: none; -+} -+ -+.admin-wrapper { -+ .sidebar ul .simple-navigation-active-leaf a { -+ color: $black; -+ } -+} -+ -+.simple_form button, .button { -+ color: $black; -+} -+ -+.poll__input { -+ border: 1px solid pink; -+} -+ -+.poll .button.button-secondary { -+ background: $primary-text-color; -+ color: $black; -+} -+ -+button.icon-button { -+ color: $ui-secondary-color; -+} -+ -+button.icon-button i.fa-retweet { -+ background-image: url('data:image/svg+xml;utf8,'); -+} -+ -+button.icon-button.active i.fa-retweet { -+ background-image: url('data:image/svg+xml;utf8,'); -+ box-shadow: 0px 0px 5px pink, inset 0px 0px 5px pink; -+ border-radius: 20px; -+} -+ -diff --git a/app/javascript/flavours/glitch/styles/night/variables.scss b/app/javascript/flavours/glitch/styles/night/variables.scss -new file mode 100644 -index 000000000..46f055a8f ---- /dev/null -+++ b/app/javascript/flavours/glitch/styles/night/variables.scss -@@ -0,0 +1,41 @@ -+// Dependent colors -+$black: #000000; -+$white: #ffffff; -+ -+$classic-base-color: #c8b7c1; -+$classic-primary-color: #4C3A45; -+$classic-secondary-color: #2C2028; -+$classic-highlight-color: #bca9b4; -+ -+$ui-base-color: $classic-secondary-color !default; -+$ui-base-lighter-color: darken($ui-base-color, 57%); -+$ui-highlight-color: $classic-highlight-color !default; -+$ui-primary-color: $classic-primary-color !default; -+$ui-secondary-color: $classic-base-color !default; -+ -+$primary-text-color: #e9e2e6 !default; -+$darker-text-color: $classic-base-color !default; -+$dark-text-color: #a68c9c; -+$action-button-color: #606984; -+ -+$success-green: #80b38b; -+$error-red: #b38080; -+$warning-red: #b38c80; -+ -+$base-overlay-background: $black !default; -+ -+$inverted-text-color: #291822 !default; -+$lighter-text-color: $classic-base-color !default; -+$light-text-color: #6A5160; -+ -+$account-background-color: #4C3A45 !default; -+ -+@function darken($color, $amount) { -+ @return hsl(hue($color), saturation($color), lightness($color) + $amount); -+} -+ -+@function lighten($color, $amount) { -+ @return hsl(hue($color), saturation($color), lightness($color) - $amount); -+} -+ -+//$emojis-requiring-inversion: 'chains'; -diff --git a/app/javascript/skins/glitch/dark/common.scss b/app/javascript/skins/glitch/dark/common.scss -new file mode 100644 -index 000000000..8713d0b02 ---- /dev/null -+++ b/app/javascript/skins/glitch/dark/common.scss -@@ -0,0 +1 @@ -+@import 'flavours/glitch/styles/dark'; -diff --git a/app/javascript/skins/glitch/dark/names.yml b/app/javascript/skins/glitch/dark/names.yml -new file mode 100644 -index 000000000..c35d5b526 ---- /dev/null -+++ b/app/javascript/skins/glitch/dark/names.yml -@@ -0,0 +1,4 @@ -+en: -+ skins: -+ glitch: -+ dark: Dark -diff --git a/app/javascript/skins/glitch/hacker/common.scss b/app/javascript/skins/glitch/hacker/common.scss -new file mode 100644 -index 000000000..90fdc86b1 ---- /dev/null -+++ b/app/javascript/skins/glitch/hacker/common.scss -@@ -0,0 +1 @@ -+@import 'flavours/glitch/styles/hacker'; -diff --git a/app/javascript/skins/glitch/hacker/names.yml b/app/javascript/skins/glitch/hacker/names.yml -new file mode 100644 -index 000000000..9fa2158ab ---- /dev/null -+++ b/app/javascript/skins/glitch/hacker/names.yml -@@ -0,0 +1,4 @@ -+en: -+ skins: -+ glitch: -+ hacker: Hacker -diff --git a/app/javascript/skins/glitch/night/common.scss b/app/javascript/skins/glitch/night/common.scss -new file mode 100644 -index 000000000..58de50727 ---- /dev/null -+++ b/app/javascript/skins/glitch/night/common.scss -@@ -0,0 +1 @@ -+@import 'flavours/glitch/styles/night'; -diff --git a/app/javascript/skins/glitch/night/names.yml b/app/javascript/skins/glitch/night/names.yml -new file mode 100644 -index 000000000..b0e968ec9 ---- /dev/null -+++ b/app/javascript/skins/glitch/night/names.yml -@@ -0,0 +1,4 @@ -+en: -+ skins: -+ glitch: -+ night: Night --- -GitLab - diff --git a/public/snow.js b/public/snow.js new file mode 100644 index 000000000..ab1d2d4f3 --- /dev/null +++ b/public/snow.js @@ -0,0 +1,56 @@ +(function(){ + var canvas = document.getElementById("snow"); + var ctx = canvas.getContext("2d"); + var flakeArray = []; + + canvas.style.pointerEvents = "none"; + canvas.style.position = "fixed"; + canvas.style.top = 0; + canvas.style.left = 0; + canvas.style.width = "100vw"; + canvas.style.height = "100vh"; + canvas.style.zIndex = 1; + canvas.style.userSelect = "none"; + + function canvasResize(){ + canvas.height = canvas.offsetHeight; + canvas.width = canvas.offsetWidth; + } + canvasResize(); + + window.onresize = function() { + canvasResize(); + }; + + var MyMath = Math; + + setInterval(function() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.beginPath(); + + var random = MyMath.random(); + var distance = .05 + .95 * random; + + flake = {}; + flake.x = 1.5 * canvas.width * MyMath.random() - .5 * canvas.width; + flake.y = -9; + flake.velX = 2 * distance * (MyMath.random() / 2 + .5); + flake.velY = (4 + 2 * MyMath.random()) * distance; + flake.radius = MyMath.pow(5 * random, 2) / 5; + flake.update = function() { + var t = this; + t.x += t.velX; + t.y += t.velY; + ctx.beginPath(); + ctx.arc(t.x, t.y, t.radius, 0, 2 * MyMath.PI, !1); + ctx.fillStyle = "#FFF"; + ctx.fill() + }; + + flakeArray.push(flake); + + for (b = 0; b < flakeArray.length; b++) { + flakeArray[b].y > canvas.height ? flakeArray.splice(b, 1) : flakeArray[b].update() + } + }, 16); +})();