diff --git a/app/styles/soapbox-light/diff.scss b/app/styles/soapbox-light/diff.scss index 23a696b98..64aba8f99 100644 --- a/app/styles/soapbox-light/diff.scss +++ b/app/styles/soapbox-light/diff.scss @@ -8,7 +8,7 @@ body { // Change the colors of button texts .button { - color: $white; + color: #ffffff; &.button-alternative-2 { color: #000; @@ -18,7 +18,7 @@ body { // Change default background colors of columns .column { article { - background: $white; + background: #ffffff; } } @@ -27,15 +27,15 @@ body { } .drawer__inner__soapbox { - background: var(--brand-color-med) url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; + background: var(--brand-color-med) url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto; } // Change the colors used in compose-form .compose-form { .compose-form__modifiers { .compose-form__upload-description input { - color: lighten($white, 7%); - &::placeholder {color: lighten($white, 7%);} + color: lighten(#ffffff, 7%); + &::placeholder {color: lighten(#ffffff, 7%);} } } @@ -120,7 +120,7 @@ body { .simple_form .block-button, .simple_form .button, .simple_form button { - color: $white; + color: #ffffff; } .dropdown-menu__separator { @@ -161,11 +161,11 @@ body { } .display-case__case { - background: $white; + background: #ffffff; } .embed-modal .embed-modal__container .embed-modal__html { - background: $white; + background: #ffffff; &:focus { background: darken($ui-base-color, 6%); @@ -188,7 +188,7 @@ body { .empty-column-indicator, .error-column { color: var(--primary-text-color); - background: $white; + background: #ffffff; } // Change the default colors used on some parts of the profile pages @@ -267,10 +267,10 @@ body { } .button.logo-button { - color: $white; + color: #ffffff; svg { - fill: $white; + fill: #ffffff; } } @@ -294,7 +294,7 @@ body { &__name { h1, h1 small { - color: $white; + color: #ffffff; } } } @@ -302,7 +302,7 @@ body { } .account__section-headline a.active::after { - border-color: transparent transparent $white; + border-color: transparent transparent #ffffff; } .hero-widget, diff --git a/app/styles/soapbox-light/variables.scss b/app/styles/soapbox-light/variables.scss index 9d9866ac6..79173d7bd 100644 --- a/app/styles/soapbox-light/variables.scss +++ b/app/styles/soapbox-light/variables.scss @@ -1,10 +1,6 @@ $light-theme: true; $gab-background: #f6f2f6; -// Dependent colors -$black: #000000; -$white: #ffffff; - $classic-base-color: #282c37; $classic-primary-color: #9baec8; $classic-secondary-color: lighten(#be9bc8, 30%); @@ -13,7 +9,7 @@ $classic-highlight-color: #2b90d9; // Differences $success-green: #3c754d; -$base-overlay-background: $white !default; +$base-overlay-background: #ffffff !default; $valid-value-color: $success-green !default; $ui-base-color: $classic-secondary-color !default; @@ -26,12 +22,12 @@ $darker-text-color: $classic-base-color !default; $dark-text-color: #444b5d; $action-button-color: #606984; -$inverted-text-color: $black !default; +$inverted-text-color: #000000 !default; $lighter-text-color: $classic-base-color !default; $light-text-color: #444b5d; //Newly added colors -$account-background-color: $white !default; +$account-background-color: #ffffff !default; //Invert darkened and lightened colors @function darken($color, $amount) { diff --git a/app/styles/soapbox/about.scss b/app/styles/soapbox/about.scss index 4fbeebff4..e931ff00e 100644 --- a/app/styles/soapbox/about.scss +++ b/app/styles/soapbox/about.scss @@ -551,7 +551,7 @@ $small-breakpoint: 960px; box-sizing: border-box; background: var(--brand-color-med); border-radius: 4px; - box-shadow: 0 0 6px rgba($black, 0.1); + box-shadow: 0 0 6px rgba(#000000, 0.1); } &__mascot { diff --git a/app/styles/soapbox/accessibility.scss b/app/styles/soapbox/accessibility.scss index d33806c84..378669e09 100644 --- a/app/styles/soapbox/accessibility.scss +++ b/app/styles/soapbox/accessibility.scss @@ -1,7 +1,7 @@ $black-emojis: '8ball' 'ant' 'back' 'black_circle' 'black_heart' 'black_large_square' 'black_medium_small_square' 'black_medium_square' 'black_nib' 'black_small_square' 'bomb' 'bowling' 'bust_in_silhouette' 'busts_in_silhouette' 'camera' 'camera_with_flash' 'clubs' 'copyright' 'curly_loop' 'currency_exchange' 'dark_sunglasses' 'eight_pointed_black_star' 'electric_plug' 'end' 'female-guard' 'film_projector' 'fried_egg' 'gorilla' 'guardsman' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'hocho' 'hole' 'joystick' 'kaaba' 'lower_left_ballpoint_pen' 'lower_left_fountain_pen' 'male-guard' 'microphone' 'mortar_board' 'movie_camera' 'musical_score' 'on' 'registered' 'soon' 'spades' 'speaking_head_in_silhouette' 'spider' 'telephone_receiver' 'tm' 'top' 'tophat' 'turkey' 'vhs' 'video_camera' 'video_game' 'water_buffalo' 'waving_black_flag' 'wavy_dash'; %white-emoji-outline { - filter: drop-shadow(1px 1px 0 $white) drop-shadow(-1px 1px 0 $white) drop-shadow(1px -1px 0 $white) drop-shadow(-1px -1px 0 $white); + filter: drop-shadow(1px 1px 0 #ffffff) drop-shadow(-1px 1px 0 #ffffff) drop-shadow(1px -1px 0 #ffffff) drop-shadow(-1px -1px 0 #ffffff); transform: scale(.71); } diff --git a/app/styles/soapbox/basics.scss b/app/styles/soapbox/basics.scss index 4a2e1e190..83731fe6c 100644 --- a/app/styles/soapbox/basics.scss +++ b/app/styles/soapbox/basics.scss @@ -161,7 +161,7 @@ button { ::selection { background: var(--brand-color); - color: $white; + color: #ffffff; } .explanation-box { diff --git a/app/styles/soapbox/components.scss b/app/styles/soapbox/components.scss index 80b1384f2..ffd098048 100644 --- a/app/styles/soapbox/components.scss +++ b/app/styles/soapbox/components.scss @@ -3837,12 +3837,12 @@ a.status-card.compact:hover { padding: 2px 10px; font-size: 16px; border: 0; - color: rgba($white, 0.75); + color: rgba(#ffffff, 0.75); &:active, &:hover, &:focus { - color: $white; + color: #ffffff; } } } @@ -3855,7 +3855,7 @@ a.status-card.compact:hover { } &__time-current { - color: $white; + color: #ffffff; margin-left: 60px; } @@ -3866,7 +3866,7 @@ a.status-card.compact:hover { &__time-sep, &__time-total { - color: $white; + color: #ffffff; } &__volume { @@ -3877,7 +3877,7 @@ a.status-card.compact:hover { &::before { content: ""; width: 50px; - background: rgba($white, 0.35); + background: rgba(#ffffff, 0.35); border-radius: 4px; display: block; position: absolute; @@ -3918,7 +3918,7 @@ a.status-card.compact:hover { text-decoration: none; font-size: 14px; font-weight: 500; - color: $white; + color: #ffffff; &:hover, &:active, @@ -3936,7 +3936,7 @@ a.status-card.compact:hover { &::before { content: ""; width: 100%; - background: rgba($white, 0.35); + background: rgba(#ffffff, 0.35); border-radius: 4px; display: block; position: absolute; @@ -3955,7 +3955,7 @@ a.status-card.compact:hover { } &__buffer { - background: rgba($white, 0.2); + background: rgba(#ffffff, 0.2); } &__handle { diff --git a/app/styles/soapbox/components/modal.scss b/app/styles/soapbox/components/modal.scss index f855983e4..3c9587fa6 100644 --- a/app/styles/soapbox/components/modal.scss +++ b/app/styles/soapbox/components/modal.scss @@ -340,7 +340,7 @@ .actions-modal { .status { - background: $white; + background: #ffffff; border-bottom-color: $ui-secondary-color; padding-top: 10px; padding-bottom: 10px; @@ -465,7 +465,7 @@ width: 100%; margin: 0; color: $inverted-text-color; - background: $white; + background: #ffffff; padding: 10px; font-family: inherit; font-size: 14px; diff --git a/app/styles/soapbox/variables.scss b/app/styles/soapbox/variables.scss index 0b82dcbcc..e8f32439c 100644 --- a/app/styles/soapbox/variables.scss +++ b/app/styles/soapbox/variables.scss @@ -51,12 +51,6 @@ $nav-breakpoint-4: 375px; // Commonly used web colors -// We certainly don't need variables for white and black. -// you can declare color: white; color: black; or #fff; #000; -$black: #000000; // Black -$white: #ffffff; // White - - $success-green: #79bd9a !default; // Padua $error-red: #df405a !default; // Cerise $warning-red: #ff5050 !default; // Sunset Orange @@ -69,9 +63,9 @@ $classic-secondary-color: $gab-placeholder-accent; $classic-highlight-color: $gab-text-highlight; // Variables for defaults in UI -$base-shadow-color: $black !default; -$base-overlay-background: $black !default; -$simple-background-color: $white !default; +$base-shadow-color: #000000 !default; +$base-overlay-background: #000000 !default; +$simple-background-color: #ffffff !default; $valid-value-color: $success-green !default; $error-value-color: $error-red !default;