Prevent comments CSS from overriding custom colours

Fixes #7294. CommentApp/main.scss mistakenly redefined the SCSS colour variables to their Wagtail defaults, overriding the ability to customise them as pe https://docs.wagtail.io/en/stable/advanced_topics/customisation/admin_templates.html#custom-user-interface-colors
pull/7310/head
Matt Westcott 2021-06-29 17:46:38 +01:00 zatwierdzone przez Matt Westcott
rodzic 26b0ecf724
commit aff898ad8d
3 zmienionych plików z 7 dodań i 49 usunięć

Wyświetl plik

@ -41,7 +41,7 @@
bottom: 3px;
width: 52px;
height: 52px;
color: #004345;
color: $color-teal-dark;
transition: color 100ms cubic-bezier(0.4, 0, 0.2, 1);
}
@ -54,8 +54,8 @@
box-sizing: border-box;
border-radius: 50%;
background-color: $color-salmon;
border: 1px solid #007d7e;
color: #fff;
border: 1px solid $color-teal;
color: $color-white;
font-size: 9px;
font-weight: 700;
text-align: center;

Wyświetl plik

@ -6,7 +6,6 @@
align-items: center;
border: 0;
background-color: transparent;
color: #004345;
&--active,
&:hover {
@ -24,7 +23,7 @@
&__icon {
width: 15px;
height: 18px;
color: #004345;
color: $color-teal-dark;
transition: color 100ms cubic-bezier(0.4, 0, 0.2, 1);
}
}
@ -34,7 +33,7 @@
display: none;
bottom: -92px;
z-index: 51;
background-color: #262626;
background-color: $color-text-base;
padding: 20px;
border-radius: 6px;
width: 260px;
@ -61,6 +60,6 @@
right: 18px;
border-style: solid;
border-width: 0 8px 8px 8px;
border-color: transparent transparent #262626 transparent;
border-color: transparent transparent $color-text-base transparent;
}
}

Wyświetl plik

@ -1,56 +1,15 @@
$color-teal: #007d7e;
$color-teal-darker: darken(adjust-hue($color-teal, 1), 4);
$color-teal-dark: darken(adjust-hue($color-teal, 1), 7);
@import '../../../scss/settings/variables';
$color-blue: #71b2d4;
$color-red: #cd3238;
$color-red-dark: #b4191f;
$color-red-very-dark: #901419;
$color-orange: #e9b04d;
$color-orange-dark: #bb5b03;
$color-green: #189370;
$color-green-dark: #157b57;
$color-salmon: #f37e77;
$color-salmon-light: #fcf2f2;
$color-white: #fff;
$color-black: #000;
$color-amber-0: #e9b04d;
$color-amber-1: #faecd5;
// darker to lighter
$color-grey-1: darken($color-white, 80);
$color-grey-2: darken($color-white, 70);
$color-grey-25: #626262;
$color-grey-3: darken($color-white, 15);
$color-grey-4: darken($color-white, 10);
$color-grey-5: darken($color-white, 2);
$color-grey-7: #f2f2f2;
$color-grey-8: #fbfbfb;
$color-fieldset-hover: $color-grey-5;
$color-input-border: $color-grey-4;
$color-input-focus: lighten(desaturate($color-teal, 40), 72);
$color-input-focus-border: lighten(saturate($color-teal, 12), 10);
$color-input-error-bg: lighten(saturate($color-red, 28), 45);
$color-link: $color-teal-darker;
$color-link-hover: $color-teal-dark;
// The focus outline color is defined without reusing a named color variable
// because it shouldnt be reused for anything else in the UI.
$color-focus-outline: #ffbf47;
$color-text-base: darken($color-white, 85);
$color-text-input: darken($color-white, 90);
$color-comment-separator: #e6e6e6;
// Color states
$color-state-live: #59b524;
$color-state-draft: #808080;
$color-state-absent: #ff8f11;
$color-state-live-draft: #43b1b0;
$color-box-background: $color-white;
$color-box-border: $color-grey-3;
$color-box-border-focused: $color-grey-2;