From 8ebbee4c0c5408a4ee4dd37d34c6dc7bb80a67b6 Mon Sep 17 00:00:00 2001 From: Izalia Mae Date: Tue, 12 Mar 2019 16:09:58 -0400 Subject: [PATCH] add Pink Moonlight and Nuzzle Plum --- .../skins/glitch/nuzzle-plum/common.scss | 3 + .../skins/glitch/nuzzle-plum/names.yml | 4 + nuzzle-plum/styles/nuzzle-plum/diff.scss | 572 ++++++++++++++++++ nuzzle-plum/styles/nuzzle-plum/variables.scss | 49 ++ .../glitch/pink-moonlight-big/common.scss | 4 + .../skins/glitch/pink-moonlight-big/names.yml | 4 + .../skins/glitch/pink-moonlight/common.scss | 3 + .../skins/glitch/pink-moonlight/names.yml | 4 + .../styles/pink-moonlight/big-scroll.scss | 6 + .../styles/pink-moonlight/diff.scss | 428 +++++++++++++ .../styles/pink-moonlight/variables.scss | 40 ++ 11 files changed, 1117 insertions(+) create mode 100644 nuzzle-plum/skins/glitch/nuzzle-plum/common.scss create mode 100644 nuzzle-plum/skins/glitch/nuzzle-plum/names.yml create mode 100644 nuzzle-plum/styles/nuzzle-plum/diff.scss create mode 100644 nuzzle-plum/styles/nuzzle-plum/variables.scss create mode 100644 pink-moonlight/skins/glitch/pink-moonlight-big/common.scss create mode 100644 pink-moonlight/skins/glitch/pink-moonlight-big/names.yml create mode 100644 pink-moonlight/skins/glitch/pink-moonlight/common.scss create mode 100644 pink-moonlight/skins/glitch/pink-moonlight/names.yml create mode 100644 pink-moonlight/styles/pink-moonlight/big-scroll.scss create mode 100644 pink-moonlight/styles/pink-moonlight/diff.scss create mode 100644 pink-moonlight/styles/pink-moonlight/variables.scss diff --git a/nuzzle-plum/skins/glitch/nuzzle-plum/common.scss b/nuzzle-plum/skins/glitch/nuzzle-plum/common.scss new file mode 100644 index 0000000..dd4546a --- /dev/null +++ b/nuzzle-plum/skins/glitch/nuzzle-plum/common.scss @@ -0,0 +1,3 @@ +@import 'styles/nuzzle-plum/variables'; +@import 'flavours/glitch/styles/index'; +@import 'styles/nuzzle-plum/diff'; diff --git a/nuzzle-plum/skins/glitch/nuzzle-plum/names.yml b/nuzzle-plum/skins/glitch/nuzzle-plum/names.yml new file mode 100644 index 0000000..5a63ec0 --- /dev/null +++ b/nuzzle-plum/skins/glitch/nuzzle-plum/names.yml @@ -0,0 +1,4 @@ +en: + skins: + glitch: + nuzzle-plum: Nuzzle Plum diff --git a/nuzzle-plum/styles/nuzzle-plum/diff.scss b/nuzzle-plum/styles/nuzzle-plum/diff.scss new file mode 100644 index 0000000..aaeded6 --- /dev/null +++ b/nuzzle-plum/styles/nuzzle-plum/diff.scss @@ -0,0 +1,572 @@ +// Notes! +// Sass color functions, "darken" and "lighten" are automatically replaced. + +.glitch.local-settings { + background: $ui-base-color; + color: $primary-text-color; + + &__navigation { + background: darken($ui-base-color, 8%); + } + + &__navigation__item { + background: darken($ui-base-color, 8%); + + &:hover { + background: $ui-base-color; + } + } +} + +.notification__dismiss-overlay { + .wrappy { + box-shadow: unset; + } + + .ckbox { + text-shadow: unset; + } +} + +.status.status-direct { + background: darken($ui-base-color, 8%); + + &.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 { + 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 > .contents { + 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: lighten($ui-base-color, 30%); + + &:hover { + background: lighten($ui-base-color, 35%); + text-decoration: none; + } + + } + +} + +// Change the background colors of media and video spoilers +.media-spoiler, +.video-player__spoiler { + 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, .composer--textarea textarea { + color: #ff0000; //lighten($ui-base-color, 80%); + + &:disabled { + background: #7F6FB0; //lighten($simple-background-color, 10%) } + } + + // "what's on your mind" text + &::placeholder { + color: $primary-text-color; //lighten($ui-base-color, 70%); + } + } + + // attachment, visibility, cw, etc + .composer--options { + background: #2D214A; //lighten($ui-base-color, 10%); + box-shadow: unset; + + & > hr { + display: none; + } + } + + // this is broken and won't work lmao + //.composer--options--dropdown--content--item { + // color: #00ff00; //$ui-primary-color; + // + // strong { + // color: $ui-primary-color; + // } + // + //} + +} + +.composer--upload_form .content .composer--upload_form--item div { + label > input { + background: linear-gradient(0deg, rgba(40, 30, 68, 0.9) 0%, rgba(40, 30, 68, 0) 100%, transparent); + //background: linear-gradient(0deg, rgba(0, 0, 0) 0%, rgba(40, 30, 68) 0%, transparent); + } + .composer--upload_form--actions { + background: linear-gradient(180deg, rgba(40, 30, 68, 0.9) 0%, rgba(40, 30, 68, 0) 100%, transparent) + + } +} +// the crop/delete buttons when you upload something +.composer--upload_form--actions .icon-button { + color: #8F70E5; //#2F1F30; //lighten($white, 7%); + + // when your cursor hovers over one of the buttons + &:active, + &:focus, + &:hover { + color: #A17FFF; //$white; + } +} + +// colour of your text on the uploaded image for image descriptions after you unfocus +.composer--upload_form--item > div input { + color: #928DCB; //lighten($white, 7%); + + // the colour of the placeholder text itself + &::placeholder { + color: #6A619D; //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; +} + +.composer--textarea--suggestions { + background: lighten($ui-base-color, 10%) +} + +.composer--textarea--suggestions--item { + &:hover, + &:focus, + &:active, + &.selected { + background: darken($ui-base-color, 4%); + } +} + +.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, +.confirmation-modal, +.mute-modal, +.report-modal, +.embed-modal, +.error-modal, +.onboarding-modal { + background: $ui-base-color; +} + +.boost-modal__action-bar, +.confirmation-modal__action-bar, +.mute-modal__action-bar, +.onboarding-modal__paginator, +.error-modal__footer { + background: darken($ui-base-color, 6%); + + .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: $primary-text-color; +} + +// 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; + } + + } +} + +/* Custom overrides */ + +//.composer--options--dropdown--content--item > .content { +//} + +// this rule is for Pleroma specifically +.composer--reply > .content, +.composer--reply > header > .account.small, +.composer--textarea--suggestions, +.confirmation-modal__container, +.confirmation-modal__do_not_ask_again label > span { + color: #B7A3FF; +} + +// Colour for the notifications in columns +.column .column-header__wrapper.active { + h1.column-header.active { + & > button, + .column-header__icon { + text-shadow: 0 0 6px rgba(255, 100, 255, 0.5); + color: #F6F; + } + } + // That glowy halo thing + &::before { + background: radial-gradient(ellipse, rgba(235, 161, 252, 0.23) 0%, rgba(255, 161, 222, 0) 60%); + } +} + +// Glowing menus +.dropdown-menu, .composer--options--dropdown--content { + box-shadow: 0 0 10px 2px #6F47FF; + // Dropdown menu color override. Default from theme is too dark. + .dropdown-menu__item > a { + color: #B7A3FF; + } +} + +// lighten text inside composer warnings +a span bdi strong.display-name__html, .composer--reply .content > p { + color: #B7A3FF; +} + +// lighten up hashtags in the reply preview +.composer--reply .content p > a.mention.hashtag { + color: #8C79D4; +} + +// and composer reply previews +.composer--warning > span { + color: #B7A3FF; + a { + font-weight: 750; + text-decoration-color: #FF55FF; + } + a > span { + color: #FF55FF; + } +} +// Give menus a darker background +.composer--options--dropdown--content--item { + background: #322452; + // lighten up text inside of pop-up menus/the composer options + .content, .content > strong, span + { + color: #B7A3FF; + } +} + +.column > .scrollable { + background: $ui-base-color; +} + +.composer .composer--upload_form, .composer--textarea>label .textarea, .composer--spoiler input, .composer.composer--textarea textarea { + color: $primary-text-color !important; + background: #281E44; //lighten($ui-base-color, 10); +} + +.drawer--header>*, .column-header__button, .column-header__notif-cleaning-buttons button { + color: $primary-text-color !important; +} + +.display-name__account, .drawer--account>.acct, .getting-started p { + color: $action-button-color; +} + +.button { + background: darken($ui-base-color, 8); +} + +.button:disabled { + background: darken($ui-base-color, 5); +} + +.activity-stream .entry { + background: darken($ui-base-color, 1); +} + +// Brighten up the search bar icon just a little bit +.drawer--search > div.icon, drawer--search > label > input { + color: #9B85FF; +} + +// Change colour of CW button to match theme. +.status__content .status__content__spoiler-link { + color: lighten($primary-text-color, 60); + background: #876FDE; +} +// Glow the CW button and make it a little lighter to show focus. +// TODO: brightness transition. + .status__content .status__content__spoiler-link:hover { + background: #9983EB; + box-shadow: 0 0 6px 2px #6F47FF; + } + +.glitch.local-settings__navigation__item.close { + background: darken($custom-error-red, 5); +} + +.glitch.local-settings__navigation__item.close:hover { + background: darken($custom-error-red, 10); +} + +/* + * Using the classic highlight variable results in a blue background idky ._. + * So we'll just hardcode it yay + */ +.glitch.local-settings__navigation__item.active { + color: #2C1836; + background: #876FDE; //lighten($classic-highlight-color, 10); +} + +.glitch.local-settings__navigation__item.active:hover { + background: #9F85FF; //lighten($classic-highlight-color, 5); +} + +.status:hover, .notification-follow:hover { + background: darken($ui-base-color, 2); +} + +.status.status-direct { + background: lighten($ui-base-color, 3); +} + +.status.status-direct:hover { + background: darken($ui-base-color, 1); +} + +.account__header.account__header__fields dd a { + color: lighten($primary-text-color, 5); +} + +// web page buttons (learn more, back to mastodon, sign in, etc) +.nav-right a.nav-link.nav-button.webapp-btn { + background: #322452; +} +.nav-right a.nav-link.nav-button.webapp-btn:hover{ + background: #40335C; +} +.button.button-alternative-2.webapp-btn { + background: #504285; +} +.button.button-alternative { + color: $primary-text-color; +} +////////////////////// + +// the "nothing here" message in the profile directory +div.nothing-here { + color: #A38ADF; +} +.rich-formatting { + h1, h2, h3, h4, em { + color: #A38ADF; + } +} + +// footer details +.container .footer .grid { + .column-0, .column-1, .column-3, .column-4 { + ul li a { + color: $primary-text-color; + } + } + .column-2 { + h4 a { + color: $primary-text-color; + } + } + .column-3 ul li { + color: $primary-text-color; + } +} +/////////////////// + +// the masto logo in the middle +.public-layout .footer .brand:hover svg path { + fill: $primary-text-color; +} +.public-layout .footer .brand svg path { + fill: $primary-text-color; +} +//////////////////// + +/* Polls */ +.compose-form__poll-wrapper { + background: $ui-base-color; + border: 0px; +} + +.compose-form__poll-wrapper .poll__footer { + border: 0px; +} + +.compose-form__poll-wrapper .button.button-secondary { + border-color: darken($ui-base-color, 10%) !important; + color: $primary-text-color !important; +} + +.button.button-secondary { + color: $white !important; +} + +.compose-form__poll-wrapper select { + background: $ui-base-color !important; + color: $primary-text-color !important; + border-color: darken($ui-base-color, 10%) !important; +} + +.poll__text input[type="text"] { + background-color: $ui-base-color !important; + color: $primary-text-color !important; + border-color: darken($ui-base-color, 10%) !important; +} diff --git a/nuzzle-plum/styles/nuzzle-plum/variables.scss b/nuzzle-plum/styles/nuzzle-plum/variables.scss new file mode 100644 index 0000000..86807e7 --- /dev/null +++ b/nuzzle-plum/styles/nuzzle-plum/variables.scss @@ -0,0 +1,49 @@ +// Dependent colors +$black: #000000; +$white: #FFFFFF; +$gold-star: #F56CFF; +$red-bookmark: #FF52F4; + +// shit like the fav/reply/boost buttons. +$classic-base-color: #6A57BF; +// at least the warning section (when hashtagging while unlisted/DMs) +$classic-primary-color: #504285; //#876FDF; //#8F35EF; +// classic-secondary is the one you want to edit for the whole damn thing. +// Don't ask. Gargamel is an asshole. +$classic-secondary-color: #322452; //#311F4D; + +// that line in the regex box, at least. idk where else. +$classic-highlight-color: #876FDE; + +$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; + +// all the text stuff +$primary-text-color: #B7A3FF; //#AF78FF; //$white !default; +$darker-text-color: darken($primary-text-color,10) !default; +$dark-text-color: darken($primary-text-color, 10); +$action-button-color: lighten($classic-base-color, 5); + +$base-overlay-background: #27233F; //$white !default; + +$inverted-text-color: $black; +$lighter-text-color: $classic-base-color !default; +$light-text-color: #444b5d; + +$account-background-color: #4F00FF; //$white !default; + +$custom-error-red: #912A61; + +//Invert darkened and lightened colors +@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-outlines: 'alien' 'baseball' 'chains' 'chicken' 'cloud' 'crescent_moon' 'dash' 'dove_of_peace' 'eyes' 'first_quarter_moon' 'first_quarter_moon_with_face' 'fish_cake' 'full_moon' 'full_moon_with_face' 'ghost' 'goat' 'grey_exclamation' 'grey_question' 'ice_skate' 'last_quarter_moon' 'last_quarter_moon_with_face' 'lightning' 'loud_sound' 'moon' 'mute' 'page_with_curl' 'rain_cloud' 'ram' 'rice' 'rice_ball' 'rooster' 'sheep' 'skull' 'skull_and_crossbones' 'snow_cloud' 'sound' 'speaker' 'speech_balloon' 'thought_balloon' 'volleyball' 'waning_crescent_moon' 'waning_gibbous_moon' 'waving_white_flag' 'waxing_crescent_moon' 'white_circle' 'white_large_square' 'white_medium_small_square' 'white_medium_square' 'white_small_square' 'wind_blowing_face'; diff --git a/pink-moonlight/skins/glitch/pink-moonlight-big/common.scss b/pink-moonlight/skins/glitch/pink-moonlight-big/common.scss new file mode 100644 index 0000000..78d8af7 --- /dev/null +++ b/pink-moonlight/skins/glitch/pink-moonlight-big/common.scss @@ -0,0 +1,4 @@ +@import 'styles/pink-moonlight/variables'; +@import 'flavours/glitch/styles/index'; +@import 'styles/pink-moonlight/diff'; +@import 'styles/pink-moonlight/big-scroll'; diff --git a/pink-moonlight/skins/glitch/pink-moonlight-big/names.yml b/pink-moonlight/skins/glitch/pink-moonlight-big/names.yml new file mode 100644 index 0000000..95011f8 --- /dev/null +++ b/pink-moonlight/skins/glitch/pink-moonlight-big/names.yml @@ -0,0 +1,4 @@ +en: + skins: + glitch: + pink-moonlight-big: Pink Moonlight (Big Scrollbars) diff --git a/pink-moonlight/skins/glitch/pink-moonlight/common.scss b/pink-moonlight/skins/glitch/pink-moonlight/common.scss new file mode 100644 index 0000000..a02eba4 --- /dev/null +++ b/pink-moonlight/skins/glitch/pink-moonlight/common.scss @@ -0,0 +1,3 @@ +@import 'styles/pink-moonlight/variables'; +@import 'flavours/glitch/styles/index'; +@import 'styles/pink-moonlight/diff'; diff --git a/pink-moonlight/skins/glitch/pink-moonlight/names.yml b/pink-moonlight/skins/glitch/pink-moonlight/names.yml new file mode 100644 index 0000000..9a2568f --- /dev/null +++ b/pink-moonlight/skins/glitch/pink-moonlight/names.yml @@ -0,0 +1,4 @@ +en: + skins: + glitch: + pink-moonlight: Pink Moonlight diff --git a/pink-moonlight/styles/pink-moonlight/big-scroll.scss b/pink-moonlight/styles/pink-moonlight/big-scroll.scss new file mode 100644 index 0000000..dd9a74e --- /dev/null +++ b/pink-moonlight/styles/pink-moonlight/big-scroll.scss @@ -0,0 +1,6 @@ +/* Bigger fucking scrollbars */ + +::-webkit-scrollbar { + height: 25px !important; + width: 10px !important; +} diff --git a/pink-moonlight/styles/pink-moonlight/diff.scss b/pink-moonlight/styles/pink-moonlight/diff.scss new file mode 100644 index 0000000..93fb376 --- /dev/null +++ b/pink-moonlight/styles/pink-moonlight/diff.scss @@ -0,0 +1,428 @@ +// Notes! +// Sass color functions, "darken" and "lighten" are automatically replaced. + +.glitch.local-settings { + background: $ui-base-color; + color: $primary-text-color; + + &__navigation { + background: darken($ui-base-color, 8%); + } + + &__navigation__item { + background: darken($ui-base-color, 8%); + + &:hover { + background: $ui-base-color; + } + } +} + +.notification__dismiss-overlay { + .wrappy { + box-shadow: unset; + } + + .ckbox { + text-shadow: unset; + } +} + +.status.status-direct { + background: darken($ui-base-color, 8%); + + &.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 { + 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 > .contents { + 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: lighten($ui-base-color, 30%); + + &:hover { + background: lighten($ui-base-color, 35%); + text-decoration: none; + } + + } + +} + +// Change the background colors of media and video spoilers +.media-spoiler, +.video-player__spoiler { + 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, .composer--textarea textarea { + color: lighten($ui-base-color, 80%); + + &:disabled { background: lighten($simple-background-color, 10%) } + + &::placeholder { + color: lighten($ui-base-color, 70%); + } + } + + .composer--options { + background: lighten($ui-base-color, 10%); + box-shadow: unset; + + & > hr { + display: none; + } + } + + .composer--options--dropdown--content--item { + color: $ui-primary-color; + + strong { + color: $ui-primary-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; +} + +.composer--textarea--suggestions { + background: lighten($ui-base-color, 10%) +} + +.composer--textarea--suggestions--item { + &:hover, + &:focus, + &:active, + &.selected { + background: darken($ui-base-color, 4%); + } +} + +.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, +.confirmation-modal, +.mute-modal, +.report-modal, +.embed-modal, +.error-modal, +.onboarding-modal { + background: $ui-base-color; +} + +.boost-modal__action-bar, +.confirmation-modal__action-bar, +.mute-modal__action-bar, +.onboarding-modal__paginator, +.error-modal__footer { + background: darken($ui-base-color, 6%); + + .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: $primary-text-color; +} + +// 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; + } + + } +} + +/* Custom overrides */ + +.column > .scrollable { + background: $ui-base-color; +} + +.composer--textarea>label .textarea, .composer--spoiler input, .composer.composer--textarea textarea { + color: $primary-text-color !important; + background: lighten($ui-base-color, 10); +} + +.drawer--header>*, .column-header__button, .column-header__notif-cleaning-buttons button { + color: $primary-text-color !important; +} + +.display-name__account, .drawer--account>.acct, .getting-started p { + color: $action-button-color; +} + +.button { + background: darken($ui-base-color, 8); +} + +.button:disabled { + background: darken($ui-base-color, 5); +} + +.activity-stream .entry { + background: darken($ui-base-color, 1); +} + +.status__content__spoiler-link, .status.light .status__content, .status.light .display-name strong { + color: $primary-text-color !important; +} + +.glitch.local-settings__navigation__item.close { + background: darken($custom-error-red, 5); +} + +.glitch.local-settings__navigation__item.close:hover { + background: darken($custom-error-red, 10); +} + +.glitch.local-settings__navigation__item.active { + background: lighten($classic-highlight-color, 10); +} + +.glitch.local-settings__navigation__item.active:hover { + background: lighten($classic-highlight-color, 5); +} + +.status:hover, .notification-follow:hover { + background: darken($ui-base-color, 2); +} + +.status.status-direct { + background: lighten($ui-base-color, 3); +} + +.status.status-direct:hover { + background: darken($ui-base-color, 1); +} + +.account__header.account__header__fields dd a { + color: lighten($primary-text-color, 5); +} + +.public-layout .public-account-header__bar .avatar img { + background: #521a50 !important; +} + +.actions-modal ul li:not(:empty) a { + color: $classic-primary-color !important; +} + +.actions-modal .status { + background: #270c26 !important; +} + +/* Polls */ +.compose-form__poll-wrapper { + background: #0c040c; + border: 0px; +} + +.compose-form__poll-wrapper .poll__footer { + border: 0px; +} + +.compose-form__poll-wrapper .button.button-secondary { + border-color: darken($ui-base-color, 10%) !important; + color: $primary-text-color !important; +} + +.button.button-secondary { + color: $white !important; +} + +.compose-form__poll-wrapper select { + background: $ui-base-color !important; + color: $primary-text-color !important; + border-color: darken($ui-base-color, 10%) !important; +} + +.poll__text input[type="text"] { + background-color: $ui-base-color !important; + color: $primary-text-color !important; + border-color: darken($ui-base-color, 10%) !important; +} \ No newline at end of file diff --git a/pink-moonlight/styles/pink-moonlight/variables.scss b/pink-moonlight/styles/pink-moonlight/variables.scss new file mode 100644 index 0000000..f9f7c83 --- /dev/null +++ b/pink-moonlight/styles/pink-moonlight/variables.scss @@ -0,0 +1,40 @@ +// Dependent colors +$black: #000000; +$white: #CC99CA; + +$classic-base-color: #889FD1; +$classic-primary-color: #9baec8; +$classic-secondary-color: #331032; +$classic-highlight-color: #6B3469; + +$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: $white !default; +$darker-text-color: darken($primary-text-color,10) !default; +$dark-text-color: darken($primary-text-color, 10); +$action-button-color: lighten($classic-base-color, 5); + +$base-overlay-background: $white !default; + +$inverted-text-color: $black !default; +$lighter-text-color: $classic-base-color !default; +$light-text-color: #444b5d; + +$account-background-color: $white !default; + +$custom-error-red: #912A61; + +//Invert darkened and lightened colors +@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-outlines: 'alien' 'baseball' 'chains' 'chicken' 'cloud' 'crescent_moon' 'dash' 'dove_of_peace' 'eyes' 'first_quarter_moon' 'first_quarter_moon_with_face' 'fish_cake' 'full_moon' 'full_moon_with_face' 'ghost' 'goat' 'grey_exclamation' 'grey_question' 'ice_skate' 'last_quarter_moon' 'last_quarter_moon_with_face' 'lightning' 'loud_sound' 'moon' 'mute' 'page_with_curl' 'rain_cloud' 'ram' 'rice' 'rice_ball' 'rooster' 'sheep' 'skull' 'skull_and_crossbones' 'snow_cloud' 'sound' 'speaker' 'speech_balloon' 'thought_balloon' 'volleyball' 'waning_crescent_moon' 'waning_gibbous_moon' 'waving_white_flag' 'waxing_crescent_moon' 'white_circle' 'white_large_square' 'white_medium_small_square' 'white_medium_square' 'white_small_square' 'wind_blowing_face';