From 01963eacc36c66ceb4364b91e15befea28fbd3b0 Mon Sep 17 00:00:00 2001 From: ludwiczakpawel Date: Tue, 5 May 2020 21:54:01 +0200 Subject: [PATCH] alpha (#7681) --- .../stylesheets/components/navigation.scss | 2 +- .../stylesheets/components/notices.scss | 8 +++--- app/assets/stylesheets/config/_colors.scss | 25 +++++++++++++++---- app/assets/stylesheets/themes/hacker.scss | 21 ++++++++++++++-- app/assets/stylesheets/themes/minimal.scss | 21 ++++++++++++++-- app/assets/stylesheets/themes/night.scss | 21 ++++++++++++++-- app/assets/stylesheets/themes/pink.scss | 23 ++++++++++++++--- 7 files changed, 102 insertions(+), 19 deletions(-) diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss index ba976e369..ce3d85725 100644 --- a/app/assets/stylesheets/components/navigation.scss +++ b/app/assets/stylesheets/components/navigation.scss @@ -60,7 +60,7 @@ padding: $su-3; border-radius: $br-default; - &:hover { + &:hover:not(.crayons-link--current) { background: var(--link-bg-hover); } diff --git a/app/assets/stylesheets/components/notices.scss b/app/assets/stylesheets/components/notices.scss index ee8325f33..3fe32ec91 100644 --- a/app/assets/stylesheets/components/notices.scss +++ b/app/assets/stylesheets/components/notices.scss @@ -12,7 +12,7 @@ &--danger { @include generate-box( $level: 1, - $bg: var(--card-bg), + $bg: var(--accent-danger-a10), $border: var(--accent-danger), $color: var(--card-color) ); @@ -21,7 +21,7 @@ &--warning { @include generate-box( $level: 1, - $bg: var(--card-bg), + $bg: var(--accent-warning-a10), $border: var(--accent-warning), $color: var(--card-color) ); @@ -30,7 +30,7 @@ &--success { @include generate-box( $level: 1, - $bg: var(--card-bg), + $bg: var(--accent-success-a10), $border: var(--accent-success), $color: var(--card-color) ); @@ -39,7 +39,7 @@ &--info { @include generate-box( $level: 1, - $bg: var(--card-bg), + $bg: var(--accent-brand-a10), $border: var(--accent-brand), $color: var(--card-color) ); diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.scss index f31261b61..eca79d9bd 100644 --- a/app/assets/stylesheets/config/_colors.scss +++ b/app/assets/stylesheets/config/_colors.scss @@ -13,7 +13,20 @@ //////////////////////////////////////////////////////////////////////////////////// // Base - --base-100: #08090a; + --base: #08090a; + + --base-a90: #{rgba(#08090a, 0.9)}; + --base-a80: #{rgba(#08090a, 0.8)}; + --base-a70: #{rgba(#08090a, 0.7)}; + --base-a60: #{rgba(#08090a, 0.6)}; + --base-a50: #{rgba(#08090a, 0.5)}; + --base-a40: #{rgba(#08090a, 0.4)}; + --base-a30: #{rgba(#08090a, 0.3)}; + --base-a20: #{rgba(#08090a, 0.2)}; + --base-a10: #{rgba(#08090a, 0.1)}; + --base-a5: #{rgba(#08090a, 0.05)}; + + --base-100: var(--base); --base-90: #202428; --base-80: #363d44; --base-70: #4d5760; @@ -30,21 +43,25 @@ --accent-brand: #3b49df; --accent-brand-darker: #1827ce; --accent-brand-lighter: #8d95f2; + --accent-brand-a10: #{rgba(#3b49df, 0.1)}; // Success --accent-success: #26d9ca; --accent-success-darker: #1ab3a6; --accent-success-lighter: #79ece2; + --accent-success-a10: #{rgba(#26d9ca, 0.1)}; // Warning --accent-warning: #ffcf4c; --accent-warning-darker: #f5b400; --accent-warning-lighter: #ffe499; + --accent-warning-a10: #{rgba(#ffcf4c, 0.1)}; // Danger --accent-danger: #dc1818; --accent-danger-darker: #c20a0a; --accent-danger-lighter: #ec5050; + --accent-danger-a10: #{rgba(#dc1818, 0.1)}; //////////////////////////////////////////////////////////////////////////////////// // Functional color variables. ///////////////////////////////////////////////////// @@ -52,9 +69,7 @@ // Main colors --body-bg: #f9fafa; // todo: replace with `var(--base-10);` when ready. - --body-color: var( - --base-100 - ); // todo: replace with `var(--base-100);` when ready. + --body-color: var(--base-100); --body-color-inverted: var(--base-inverted); // Main content containers @@ -88,7 +103,7 @@ // Links --link-color: var(--base-90); --link-color-hover: var(--accent-brand-darker); - --link-bg-hover: var(--base-0); + --link-bg-hover: var(--base-a5); --link-bg-hover-alt: var(--base-inverted); --link-brand-color: var(--accent-brand); --link-color-current: var(--base-100); diff --git a/app/assets/stylesheets/themes/hacker.scss b/app/assets/stylesheets/themes/hacker.scss index c6f2675e1..0a549175b 100644 --- a/app/assets/stylesheets/themes/hacker.scss +++ b/app/assets/stylesheets/themes/hacker.scss @@ -9,7 +9,20 @@ --theme-color: #ffffff; // Base - --base-100: #ffffff; + --base: #ffffff; + + --base-a90: #{rgba(#ffffff, 0.9)}; + --base-a80: #{rgba(#ffffff, 0.8)}; + --base-a70: #{rgba(#ffffff, 0.7)}; + --base-a60: #{rgba(#ffffff, 0.6)}; + --base-a50: #{rgba(#ffffff, 0.5)}; + --base-a40: #{rgba(#ffffff, 0.4)}; + --base-a30: #{rgba(#ffffff, 0.3)}; + --base-a20: #{rgba(#ffffff, 0.2)}; + --base-a10: #{rgba(#ffffff, 0.1)}; + --base-a5: #{rgba(#ffffff, 0.05)}; + + --base-100: var(--base); --base-90: #e3e3e3; --base-80: #c8c8c8; --base-70: #adadad; @@ -26,21 +39,25 @@ --accent-brand: #2eff7b; --accent-brand-darker: #00c548; --accent-brand-lighter: #8effb7; + --accent-brand-a10: #{rgba(#2eff7b, 0.1)}; // Success --accent-success: var(--accent-brand); --accent-success-darker: var(--accent-brand-darker); --accent-success-lighter: var(--accent-brand-lighter); + --accent-success-a10: #{rgba(#2eff7b, 0.1)}; // Warning --accent-warning: #ffcf4c; --accent-warning-darker: #f5b400; --accent-warning-lighter: #ffe499; + --accent-warning-a10: #{rgba(#ffcf4c, 0.1)}; // Danger --accent-danger: #dc1818; --accent-danger-darker: #c20a0a; --accent-danger-lighter: #ec5050; + --accent-danger-a10: #{rgba(#dc1818, 0.1)}; // Main colors --body-bg: var(--base-0); @@ -82,7 +99,7 @@ --link-color-secondary: var(--accent-brand-darker); --link-color-secondary-hover: var(--accent-brand-darker); --link-brand-color: #e24ec1; - --link-bg-hover: var(--base-0); + --link-bg-hover: var(--base-a10); --link-bg-hover-alt: var(--base-0); --link-bg-current: var(--base-inverted); diff --git a/app/assets/stylesheets/themes/minimal.scss b/app/assets/stylesheets/themes/minimal.scss index cf03ebc0a..1466efc4f 100644 --- a/app/assets/stylesheets/themes/minimal.scss +++ b/app/assets/stylesheets/themes/minimal.scss @@ -7,7 +7,20 @@ --theme-container-border: 1px solid #e3e3e5; // Base - --base-100: #0a0a0a; + --base: #0a0a0a; + + --base-a90: #{rgba(#0a0a0a, 0.9)}; + --base-a80: #{rgba(#0a0a0a, 0.8)}; + --base-a70: #{rgba(#0a0a0a, 0.7)}; + --base-a60: #{rgba(#0a0a0a, 0.6)}; + --base-a50: #{rgba(#0a0a0a, 0.5)}; + --base-a40: #{rgba(#0a0a0a, 0.4)}; + --base-a30: #{rgba(#0a0a0a, 0.3)}; + --base-a20: #{rgba(#0a0a0a, 0.2)}; + --base-a10: #{rgba(#0a0a0a, 0.1)}; + --base-a5: #{rgba(#0a0a0a, 0.05)}; + + --base-100: var(--base); --base-90: #202020; --base-80: #353535; --base-70: #4b4b4b; @@ -24,21 +37,25 @@ --accent-brand: #3b49df; --accent-brand-darker: #1827ce; --accent-brand-lighter: #8d95f2; + --accent-brand-a10: #{rgba(#3b49df, 0.1)}; // Success --accent-success: #26d9ca; --accent-success-darker: #1ab3a6; --accent-success-lighter: #79ece2; + --accent-success-a10: #{rgba(#26d9ca, 0.1)}; // Warning --accent-warning: #ffcf4c; --accent-warning-darker: #f5b400; --accent-warning-lighter: #ffe499; + --accent-warning-a10: #{rgba(#ffcf4c, 0.1)}; // Danger --accent-danger: #dc1818; --accent-danger-darker: #c20a0a; --accent-danger-lighter: #ec5050; + --accent-danger-a10: #{rgba(#dc1818, 0.1)}; // Main colors --body-bg: #fcfcfc; @@ -80,7 +97,7 @@ --link-color-secondary: var(--base-70); --link-color-secondary-hover: var(--base-80); --link-brand-color: var(--accent-brand); - --link-bg-hover: var(--base-0); + --link-bg-hover: var(--base-a5); --link-bg-hover-alt: var(--base-10); --link-bg-current: var(--base-inverted); diff --git a/app/assets/stylesheets/themes/night.scss b/app/assets/stylesheets/themes/night.scss index ece8b1f04..0f8e0ec58 100644 --- a/app/assets/stylesheets/themes/night.scss +++ b/app/assets/stylesheets/themes/night.scss @@ -9,7 +9,20 @@ --theme-color: #ffffff; // Base - --base-100: #f9fafa; + --base: #f9fafa; + + --base-a90: #{rgba(#f9fafa, 0.9)}; + --base-a80: #{rgba(#f9fafa, 0.8)}; + --base-a70: #{rgba(#f9fafa, 0.7)}; + --base-a60: #{rgba(#f9fafa, 0.6)}; + --base-a50: #{rgba(#f9fafa, 0.5)}; + --base-a40: #{rgba(#f9fafa, 0.4)}; + --base-a30: #{rgba(#f9fafa, 0.3)}; + --base-a20: #{rgba(#f9fafa, 0.2)}; + --base-a10: #{rgba(#f9fafa, 0.1)}; + --base-a5: #{rgba(#f9fafa, 0.05)}; + + --base-100: var(--base); --base-90: #dde0e2; --base-80: #c2c6ca; --base-70: #a7adb2; @@ -26,21 +39,25 @@ --accent-brand: #3b49df; --accent-brand-darker: #1827ce; --accent-brand-lighter: #8d95f2; + --accent-brand-a10: #{rgba(#3b49df, 0.1)}; // Success --accent-success: #26d9ca; --accent-success-darker: #1ab3a6; --accent-success-lighter: #79ece2; + --accent-success-a10: #{rgba(#26d9ca, 0.1)}; // Warning --accent-warning: #ffcf4c; --accent-warning-darker: #f5b400; --accent-warning-lighter: #ffe499; + --accent-warning-a10: #{rgba(#ffcf4c, 0.1)}; // Danger --accent-danger: #dc1818; --accent-danger-darker: #c20a0a; --accent-danger-lighter: #ec5050; + --accent-danger-a10: #{rgba(#dc1818, 0.1)}; // Main colors --body-bg: var(--base-0); @@ -78,7 +95,7 @@ // Links --link-color: var(--base-90); --link-color-hover: var(--accent-brand-lighter); - --link-bg-hover: var(--base-0); + --link-bg-hover: var(--base-a5); --link-bg-hover-alt: var(--base-inverted); --link-brand-color: #17a1f6; --link-color-current: var(--base-100); diff --git a/app/assets/stylesheets/themes/pink.scss b/app/assets/stylesheets/themes/pink.scss index f2845c4cc..544a516e2 100644 --- a/app/assets/stylesheets/themes/pink.scss +++ b/app/assets/stylesheets/themes/pink.scss @@ -7,7 +7,20 @@ --theme-container-border: 1px solid #ff4983; // Base - --base-100: #000000; + --base: #1c060d; + + --base-a90: #{rgba(#1c060d, 0.9)}; + --base-a80: #{rgba(#1c060d, 0.8)}; + --base-a70: #{rgba(#1c060d, 0.7)}; + --base-a60: #{rgba(#1c060d, 0.6)}; + --base-a50: #{rgba(#1c060d, 0.5)}; + --base-a40: #{rgba(#1c060d, 0.4)}; + --base-a30: #{rgba(#1c060d, 0.3)}; + --base-a20: #{rgba(#1c060d, 0.2)}; + --base-a10: #{rgba(#1c060d, 0.1)}; + --base-a5: #{rgba(#1c060d, 0.05)}; + + --base-100: var(--base); --base-90: #330f1a; --base-80: #57192d; --base-70: #7d2440; @@ -24,25 +37,29 @@ --accent-brand: #ff6c9b; --accent-brand-darker: #f03e76; --accent-brand-lighter: #ff99b9; + --accent-brand-a10: #{rgba(#ff6c9b, 0.1)}; // Success --accent-success: #71db92; --accent-success-darker: #5abf79; --accent-success-lighter: #93edaf; + --accent-success-a10: #{rgba(#71db92, 0.1)}; // Warning --accent-warning: #ffcf4c; --accent-warning-darker: #f5b400; --accent-warning-lighter: #ffe499; + --accent-warning-a10: #{rgba(#ffcf4c, 0.1)}; // Danger --accent-danger: #dc1818; --accent-danger-darker: #c20a0a; --accent-danger-lighter: #ec5050; + --accent-danger-a10: #{rgba(#dc1818, 0.1)}; // Main colors --body-bg: var(--base-0); - --body-color: #0a0a0a; + --body-color: var(--base-100); --body-color-inverted: var(--base-inverted); // Main content containers @@ -80,7 +97,7 @@ --link-color-secondary: var(--base-70); --link-color-secondary-hover: var(--base-80); --link-brand-color: #4e57ef; - --link-bg-hover: var(--base-0); + --link-bg-hover: var(--base-a5); --link-bg-hover-alt: var(--base-inverted); --link-bg-current: var(--base-inverted);