From: SleeplessOne1917 <abias1122@gmail.com> Date: Fri, 7 Jul 2023 18:27:25 +0000 (+0000) Subject: Darkly tweak (#1811) X-Git-Url: http://these/git/%7B%60%24%7BarchiveTodayUrl%7D/%24%7B%60data:application/static/git-favicon.png?a=commitdiff_plain;h=45333d8c10f335aad432ecf13a46ee38bbd9ac07;p=lemmy-ui.git Darkly tweak (#1811) * Make outline buttons have better contrast in dark themes * Change secondary color for darkly themes * Put compact styles back to how they were before * Forgot to build themes --- diff --git a/src/assets/css/themes/_variables.darkly-pureblack.scss b/src/assets/css/themes/_variables.darkly-pureblack.scss index 816118e..9106b69 100644 --- a/src/assets/css/themes/_variables.darkly-pureblack.scss +++ b/src/assets/css/themes/_variables.darkly-pureblack.scss @@ -18,7 +18,7 @@ $green: #00bc8c; $cyan: #3498db; $primary: $green; -$secondary: $gray-700; +$secondary: $gray-600; $success: $green; $dark: $gray-300; diff --git a/src/assets/css/themes/_variables.darkly-red.scss b/src/assets/css/themes/_variables.darkly-red.scss index 691678a..29c959f 100644 --- a/src/assets/css/themes/_variables.darkly-red.scss +++ b/src/assets/css/themes/_variables.darkly-red.scss @@ -1,7 +1,6 @@ @import "variables.darkly"; $primary: $blue; -$secondary: #444; $light: $gray-800; $link-color: $red; diff --git a/src/assets/css/themes/_variables.darkly.scss b/src/assets/css/themes/_variables.darkly.scss index e0762a9..5e38439 100644 --- a/src/assets/css/themes/_variables.darkly.scss +++ b/src/assets/css/themes/_variables.darkly.scss @@ -17,7 +17,7 @@ $green: #00bc8c; $cyan: #3498db; $primary: $green; -$secondary: $gray-700; +$secondary: $gray-500; $success: $green; $dark: $gray-300; diff --git a/src/assets/css/themes/darkly-compact.css b/src/assets/css/themes/darkly-compact.css index 5061c10..02f7ee7 100644 --- a/src/assets/css/themes/darkly-compact.css +++ b/src/assets/css/themes/darkly-compact.css @@ -70,7 +70,7 @@ hr.my-3 { --bs-gray-800: #303030; --bs-gray-900: #222; --bs-primary: #00bc8c; - --bs-secondary: #444; + --bs-secondary: #adb5bd; --bs-success: #00bc8c; --bs-info: #3498db; --bs-warning: #f39c12; @@ -78,7 +78,7 @@ hr.my-3 { --bs-light: #303030; --bs-dark: #dee2e6; --bs-primary-rgb: 0, 188, 140; - --bs-secondary-rgb: 68, 68, 68; + --bs-secondary-rgb: 173, 181, 189; --bs-success-rgb: 0, 188, 140; --bs-info-rgb: 52, 152, 219; --bs-warning-rgb: 243, 156, 18; @@ -86,7 +86,7 @@ hr.my-3 { --bs-light-rgb: 48, 48, 48; --bs-dark-rgb: 222, 226, 230; --bs-primary-text-emphasis: #004b38; - --bs-secondary-text-emphasis: #1b1b1b; + --bs-secondary-text-emphasis: #45484c; --bs-success-text-emphasis: #004b38; --bs-info-text-emphasis: #153d58; --bs-warning-text-emphasis: #613e07; @@ -94,7 +94,7 @@ hr.my-3 { --bs-light-text-emphasis: #444; --bs-dark-text-emphasis: #444; --bs-primary-bg-subtle: #ccf2e8; - --bs-secondary-bg-subtle: #dadada; + --bs-secondary-bg-subtle: #eff0f2; --bs-success-bg-subtle: #ccf2e8; --bs-info-bg-subtle: #d6eaf8; --bs-warning-bg-subtle: #fdebd0; @@ -102,7 +102,7 @@ hr.my-3 { --bs-light-bg-subtle: #fcfcfd; --bs-dark-bg-subtle: #ced4da; --bs-primary-border-subtle: #99e4d1; - --bs-secondary-border-subtle: #b4b4b4; + --bs-secondary-border-subtle: #dee1e5; --bs-success-border-subtle: #99e4d1; --bs-info-border-subtle: #aed6f1; --bs-warning-border-subtle: #fad7a0; @@ -182,7 +182,7 @@ hr.my-3 { --bs-tertiary-bg: #292929; --bs-tertiary-bg-rgb: 41, 41, 41; --bs-primary-text-emphasis: #66d7ba; - --bs-secondary-text-emphasis: #8f8f8f; + --bs-secondary-text-emphasis: #ced3d7; --bs-success-text-emphasis: #66d7ba; --bs-info-text-emphasis: #85c1e9; --bs-warning-text-emphasis: #f8c471; @@ -190,7 +190,7 @@ hr.my-3 { --bs-light-text-emphasis: #f8f9fa; --bs-dark-text-emphasis: #dee2e6; --bs-primary-bg-subtle: #00261c; - --bs-secondary-bg-subtle: #0e0e0e; + --bs-secondary-bg-subtle: #232426; --bs-success-bg-subtle: #00261c; --bs-info-bg-subtle: #0a1e2c; --bs-warning-bg-subtle: #311f04; @@ -198,7 +198,7 @@ hr.my-3 { --bs-light-bg-subtle: #303030; --bs-dark-bg-subtle: #181818; --bs-primary-border-subtle: #007154; - --bs-secondary-border-subtle: #292929; + --bs-secondary-border-subtle: #686d71; --bs-success-border-subtle: #007154; --bs-info-border-subtle: #1f5b83; --bs-warning-border-subtle: #925e0b; @@ -1961,13 +1961,13 @@ progress { .table-secondary { --bs-table-color: #000; - --bs-table-bg: #dadada; - --bs-table-border-color: #c4c4c4; - --bs-table-striped-bg: #cfcfcf; + --bs-table-bg: #eff0f2; + --bs-table-border-color: #d7d8da; + --bs-table-striped-bg: #e3e4e6; --bs-table-striped-color: #000; - --bs-table-active-bg: #c4c4c4; + --bs-table-active-bg: #d7d8da; --bs-table-active-color: #000; - --bs-table-hover-bg: #cacaca; + --bs-table-hover-bg: #dddee0; --bs-table-hover-color: #000; color: var(--bs-table-color); border-color: var(--bs-table-border-color); @@ -2994,20 +2994,20 @@ textarea.form-control-lg { } .btn-secondary { - --bs-btn-color: #fff; - --bs-btn-bg: #444; - --bs-btn-border-color: #444; - --bs-btn-hover-color: #fff; - --bs-btn-hover-bg: #3a3a3a; - --bs-btn-hover-border-color: #363636; - --bs-btn-focus-shadow-rgb: 96, 96, 96; - --bs-btn-active-color: #fff; - --bs-btn-active-bg: #363636; - --bs-btn-active-border-color: #333333; + --bs-btn-color: #000; + --bs-btn-bg: #adb5bd; + --bs-btn-border-color: #adb5bd; + --bs-btn-hover-color: #000; + --bs-btn-hover-bg: #b9c0c7; + --bs-btn-hover-border-color: #b5bcc4; + --bs-btn-focus-shadow-rgb: 147, 154, 161; + --bs-btn-active-color: #000; + --bs-btn-active-bg: #bdc4ca; + --bs-btn-active-border-color: #b5bcc4; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #fff; - --bs-btn-disabled-bg: #444; - --bs-btn-disabled-border-color: #444; + --bs-btn-disabled-color: #000; + --bs-btn-disabled-bg: #adb5bd; + --bs-btn-disabled-border-color: #adb5bd; } .btn-success { @@ -3130,19 +3130,19 @@ textarea.form-control-lg { } .btn-outline-secondary { - --bs-btn-color: #444; - --bs-btn-border-color: #444; - --bs-btn-hover-color: #fff; - --bs-btn-hover-bg: #444; - --bs-btn-hover-border-color: #444; - --bs-btn-focus-shadow-rgb: 68, 68, 68; - --bs-btn-active-color: #fff; - --bs-btn-active-bg: #444; - --bs-btn-active-border-color: #444; + --bs-btn-color: #adb5bd; + --bs-btn-border-color: #adb5bd; + --bs-btn-hover-color: #000; + --bs-btn-hover-bg: #adb5bd; + --bs-btn-hover-border-color: #adb5bd; + --bs-btn-focus-shadow-rgb: 173, 181, 189; + --bs-btn-active-color: #000; + --bs-btn-active-bg: #adb5bd; + --bs-btn-active-border-color: #adb5bd; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #444; + --bs-btn-disabled-color: #adb5bd; --bs-btn-disabled-bg: transparent; - --bs-btn-disabled-border-color: #444; + --bs-btn-disabled-border-color: #adb5bd; --bs-gradient: none; } @@ -6777,8 +6777,8 @@ textarea.form-control-lg { } .text-bg-secondary { - color: #fff !important; - background-color: RGBA(68, 68, 68, var(--bs-bg-opacity, 1)) !important; + color: #000 !important; + background-color: RGBA(173, 181, 189, var(--bs-bg-opacity, 1)) !important; } .text-bg-success { @@ -6825,8 +6825,8 @@ textarea.form-control-lg { text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-secondary:hover, .link-secondary:focus { - color: RGBA(54, 54, 54, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(54, 54, 54, var(--bs-link-underline-opacity, 1)) !important; + color: RGBA(189, 196, 202, var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(189, 196, 202, var(--bs-link-underline-opacity, 1)) !important; } .link-success { diff --git a/src/assets/css/themes/darkly-pureblack.css b/src/assets/css/themes/darkly-pureblack.css index 3fe1e91..f532a28 100644 --- a/src/assets/css/themes/darkly-pureblack.css +++ b/src/assets/css/themes/darkly-pureblack.css @@ -30,7 +30,7 @@ --bs-gray-800: #202020; --bs-gray-900: #111; --bs-primary: #00bc8c; - --bs-secondary: #333; + --bs-secondary: #666; --bs-success: #00bc8c; --bs-info: #3498db; --bs-warning: #f39c12; @@ -38,7 +38,7 @@ --bs-light: #111; --bs-dark: #dee2e6; --bs-primary-rgb: 0, 188, 140; - --bs-secondary-rgb: 51, 51, 51; + --bs-secondary-rgb: 102, 102, 102; --bs-success-rgb: 0, 188, 140; --bs-info-rgb: 52, 152, 219; --bs-warning-rgb: 243, 156, 18; @@ -46,7 +46,7 @@ --bs-light-rgb: 17, 17, 17; --bs-dark-rgb: 222, 226, 230; --bs-primary-text-emphasis: #004b38; - --bs-secondary-text-emphasis: #141414; + --bs-secondary-text-emphasis: #292929; --bs-success-text-emphasis: #004b38; --bs-info-text-emphasis: #153d58; --bs-warning-text-emphasis: #613e07; @@ -54,7 +54,7 @@ --bs-light-text-emphasis: #333; --bs-dark-text-emphasis: #333; --bs-primary-bg-subtle: #ccf2e8; - --bs-secondary-bg-subtle: #d6d6d6; + --bs-secondary-bg-subtle: #e0e0e0; --bs-success-bg-subtle: #ccf2e8; --bs-info-bg-subtle: #d6eaf8; --bs-warning-bg-subtle: #fdebd0; @@ -62,7 +62,7 @@ --bs-light-bg-subtle: #f6f6f7; --bs-dark-bg-subtle: #ced4da; --bs-primary-border-subtle: #99e4d1; - --bs-secondary-border-subtle: #adadad; + --bs-secondary-border-subtle: #c2c2c2; --bs-success-border-subtle: #99e4d1; --bs-info-border-subtle: #aed6f1; --bs-warning-border-subtle: #fad7a0; @@ -142,7 +142,7 @@ --bs-tertiary-bg: #191919; --bs-tertiary-bg-rgb: 25, 25, 25; --bs-primary-text-emphasis: #66d7ba; - --bs-secondary-text-emphasis: #858585; + --bs-secondary-text-emphasis: #a3a3a3; --bs-success-text-emphasis: #66d7ba; --bs-info-text-emphasis: #85c1e9; --bs-warning-text-emphasis: #f8c471; @@ -150,7 +150,7 @@ --bs-light-text-emphasis: #f8f9fa; --bs-dark-text-emphasis: #dee2e6; --bs-primary-bg-subtle: #00261c; - --bs-secondary-bg-subtle: #0a0a0a; + --bs-secondary-bg-subtle: #141414; --bs-success-bg-subtle: #00261c; --bs-info-bg-subtle: #0a1e2c; --bs-warning-bg-subtle: #311f04; @@ -158,7 +158,7 @@ --bs-light-bg-subtle: #202020; --bs-dark-bg-subtle: #101010; --bs-primary-border-subtle: #007154; - --bs-secondary-border-subtle: #1f1f1f; + --bs-secondary-border-subtle: #3d3d3d; --bs-success-border-subtle: #007154; --bs-info-border-subtle: #1f5b83; --bs-warning-border-subtle: #925e0b; @@ -1945,13 +1945,13 @@ progress { .table-secondary { --bs-table-color: #000; - --bs-table-bg: #d6d6d6; - --bs-table-border-color: #c1c1c1; - --bs-table-striped-bg: #cbcbcb; + --bs-table-bg: #e0e0e0; + --bs-table-border-color: #cacaca; + --bs-table-striped-bg: #d5d5d5; --bs-table-striped-color: #000; - --bs-table-active-bg: #c1c1c1; + --bs-table-active-bg: #cacaca; --bs-table-active-color: #000; - --bs-table-hover-bg: #c6c6c6; + --bs-table-hover-bg: #cfcfcf; --bs-table-hover-color: #000; color: var(--bs-table-color); border-color: var(--bs-table-border-color); @@ -2979,19 +2979,19 @@ textarea.form-control-lg { .btn-secondary { --bs-btn-color: #f3f3f3; - --bs-btn-bg: #333; - --bs-btn-border-color: #333; + --bs-btn-bg: #666; + --bs-btn-border-color: #666; --bs-btn-hover-color: #f3f3f3; - --bs-btn-hover-bg: #2b2b2b; - --bs-btn-hover-border-color: #292929; - --bs-btn-focus-shadow-rgb: 80, 80, 80; + --bs-btn-hover-bg: #575757; + --bs-btn-hover-border-color: #525252; + --bs-btn-focus-shadow-rgb: 123, 123, 123; --bs-btn-active-color: #f3f3f3; - --bs-btn-active-bg: #292929; - --bs-btn-active-border-color: #262626; + --bs-btn-active-bg: #525252; + --bs-btn-active-border-color: #4d4d4d; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #f3f3f3; - --bs-btn-disabled-bg: #333; - --bs-btn-disabled-border-color: #333; + --bs-btn-disabled-bg: #666; + --bs-btn-disabled-border-color: #666; } .btn-success { @@ -3114,19 +3114,19 @@ textarea.form-control-lg { } .btn-outline-secondary { - --bs-btn-color: #333; - --bs-btn-border-color: #333; + --bs-btn-color: #666; + --bs-btn-border-color: #666; --bs-btn-hover-color: #f3f3f3; - --bs-btn-hover-bg: #333; - --bs-btn-hover-border-color: #333; - --bs-btn-focus-shadow-rgb: 51, 51, 51; + --bs-btn-hover-bg: #666; + --bs-btn-hover-border-color: #666; + --bs-btn-focus-shadow-rgb: 102, 102, 102; --bs-btn-active-color: #f3f3f3; - --bs-btn-active-bg: #333; - --bs-btn-active-border-color: #333; + --bs-btn-active-bg: #666; + --bs-btn-active-border-color: #666; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #333; + --bs-btn-disabled-color: #666; --bs-btn-disabled-bg: transparent; - --bs-btn-disabled-border-color: #333; + --bs-btn-disabled-border-color: #666; --bs-gradient: none; } @@ -6766,7 +6766,7 @@ textarea.form-control-lg { .text-bg-secondary { color: #f3f3f3 !important; - background-color: RGBA(51, 51, 51, var(--bs-bg-opacity, 1)) !important; + background-color: RGBA(102, 102, 102, var(--bs-bg-opacity, 1)) !important; } .text-bg-success { @@ -6813,8 +6813,8 @@ textarea.form-control-lg { text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-secondary:hover, .link-secondary:focus { - color: RGBA(41, 41, 41, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(41, 41, 41, var(--bs-link-underline-opacity, 1)) !important; + color: RGBA(82, 82, 82, var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(82, 82, 82, var(--bs-link-underline-opacity, 1)) !important; } .link-success { diff --git a/src/assets/css/themes/darkly-red.css b/src/assets/css/themes/darkly-red.css index 0527b42..20349d1 100644 --- a/src/assets/css/themes/darkly-red.css +++ b/src/assets/css/themes/darkly-red.css @@ -30,7 +30,7 @@ --bs-gray-800: #303030; --bs-gray-900: #222; --bs-primary: #375a7f; - --bs-secondary: #444; + --bs-secondary: #adb5bd; --bs-success: #00bc8c; --bs-info: #3498db; --bs-warning: #f39c12; @@ -38,7 +38,7 @@ --bs-light: #303030; --bs-dark: #dee2e6; --bs-primary-rgb: 55, 90, 127; - --bs-secondary-rgb: 68, 68, 68; + --bs-secondary-rgb: 173, 181, 189; --bs-success-rgb: 0, 188, 140; --bs-info-rgb: 52, 152, 219; --bs-warning-rgb: 243, 156, 18; @@ -46,7 +46,7 @@ --bs-light-rgb: 48, 48, 48; --bs-dark-rgb: 222, 226, 230; --bs-primary-text-emphasis: #162433; - --bs-secondary-text-emphasis: #1b1b1b; + --bs-secondary-text-emphasis: #45484c; --bs-success-text-emphasis: #004b38; --bs-info-text-emphasis: #153d58; --bs-warning-text-emphasis: #613e07; @@ -54,7 +54,7 @@ --bs-light-text-emphasis: #444; --bs-dark-text-emphasis: #444; --bs-primary-bg-subtle: #d7dee5; - --bs-secondary-bg-subtle: #dadada; + --bs-secondary-bg-subtle: #eff0f2; --bs-success-bg-subtle: #ccf2e8; --bs-info-bg-subtle: #d6eaf8; --bs-warning-bg-subtle: #fdebd0; @@ -62,7 +62,7 @@ --bs-light-bg-subtle: #fcfcfd; --bs-dark-bg-subtle: #ced4da; --bs-primary-border-subtle: #afbdcc; - --bs-secondary-border-subtle: #b4b4b4; + --bs-secondary-border-subtle: #dee1e5; --bs-success-border-subtle: #99e4d1; --bs-info-border-subtle: #aed6f1; --bs-warning-border-subtle: #fad7a0; @@ -142,7 +142,7 @@ --bs-tertiary-bg: #292929; --bs-tertiary-bg-rgb: 41, 41, 41; --bs-primary-text-emphasis: #879cb2; - --bs-secondary-text-emphasis: #8f8f8f; + --bs-secondary-text-emphasis: #ced3d7; --bs-success-text-emphasis: #66d7ba; --bs-info-text-emphasis: #85c1e9; --bs-warning-text-emphasis: #f8c471; @@ -150,7 +150,7 @@ --bs-light-text-emphasis: #f8f9fa; --bs-dark-text-emphasis: #dee2e6; --bs-primary-bg-subtle: #0b1219; - --bs-secondary-bg-subtle: #0e0e0e; + --bs-secondary-bg-subtle: #232426; --bs-success-bg-subtle: #00261c; --bs-info-bg-subtle: #0a1e2c; --bs-warning-bg-subtle: #311f04; @@ -158,7 +158,7 @@ --bs-light-bg-subtle: #303030; --bs-dark-bg-subtle: #181818; --bs-primary-border-subtle: #21364c; - --bs-secondary-border-subtle: #292929; + --bs-secondary-border-subtle: #686d71; --bs-success-border-subtle: #007154; --bs-info-border-subtle: #1f5b83; --bs-warning-border-subtle: #925e0b; @@ -1945,13 +1945,13 @@ progress { .table-secondary { --bs-table-color: #000; - --bs-table-bg: #dadada; - --bs-table-border-color: #c4c4c4; - --bs-table-striped-bg: #cfcfcf; + --bs-table-bg: #eff0f2; + --bs-table-border-color: #d7d8da; + --bs-table-striped-bg: #e3e4e6; --bs-table-striped-color: #000; - --bs-table-active-bg: #c4c4c4; + --bs-table-active-bg: #d7d8da; --bs-table-active-color: #000; - --bs-table-hover-bg: #cacaca; + --bs-table-hover-bg: #dddee0; --bs-table-hover-color: #000; color: var(--bs-table-color); border-color: var(--bs-table-border-color); @@ -2978,20 +2978,20 @@ textarea.form-control-lg { } .btn-secondary { - --bs-btn-color: #fff; - --bs-btn-bg: #444; - --bs-btn-border-color: #444; - --bs-btn-hover-color: #fff; - --bs-btn-hover-bg: #3a3a3a; - --bs-btn-hover-border-color: #363636; - --bs-btn-focus-shadow-rgb: 96, 96, 96; - --bs-btn-active-color: #fff; - --bs-btn-active-bg: #363636; - --bs-btn-active-border-color: #333333; + --bs-btn-color: #000; + --bs-btn-bg: #adb5bd; + --bs-btn-border-color: #adb5bd; + --bs-btn-hover-color: #000; + --bs-btn-hover-bg: #b9c0c7; + --bs-btn-hover-border-color: #b5bcc4; + --bs-btn-focus-shadow-rgb: 147, 154, 161; + --bs-btn-active-color: #000; + --bs-btn-active-bg: #bdc4ca; + --bs-btn-active-border-color: #b5bcc4; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #fff; - --bs-btn-disabled-bg: #444; - --bs-btn-disabled-border-color: #444; + --bs-btn-disabled-color: #000; + --bs-btn-disabled-bg: #adb5bd; + --bs-btn-disabled-border-color: #adb5bd; } .btn-success { @@ -3114,19 +3114,19 @@ textarea.form-control-lg { } .btn-outline-secondary { - --bs-btn-color: #444; - --bs-btn-border-color: #444; - --bs-btn-hover-color: #fff; - --bs-btn-hover-bg: #444; - --bs-btn-hover-border-color: #444; - --bs-btn-focus-shadow-rgb: 68, 68, 68; - --bs-btn-active-color: #fff; - --bs-btn-active-bg: #444; - --bs-btn-active-border-color: #444; + --bs-btn-color: #adb5bd; + --bs-btn-border-color: #adb5bd; + --bs-btn-hover-color: #000; + --bs-btn-hover-bg: #adb5bd; + --bs-btn-hover-border-color: #adb5bd; + --bs-btn-focus-shadow-rgb: 173, 181, 189; + --bs-btn-active-color: #000; + --bs-btn-active-bg: #adb5bd; + --bs-btn-active-border-color: #adb5bd; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #444; + --bs-btn-disabled-color: #adb5bd; --bs-btn-disabled-bg: transparent; - --bs-btn-disabled-border-color: #444; + --bs-btn-disabled-border-color: #adb5bd; --bs-gradient: none; } @@ -6765,8 +6765,8 @@ textarea.form-control-lg { } .text-bg-secondary { - color: #fff !important; - background-color: RGBA(68, 68, 68, var(--bs-bg-opacity, 1)) !important; + color: #000 !important; + background-color: RGBA(173, 181, 189, var(--bs-bg-opacity, 1)) !important; } .text-bg-success { @@ -6813,8 +6813,8 @@ textarea.form-control-lg { text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-secondary:hover, .link-secondary:focus { - color: RGBA(54, 54, 54, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(54, 54, 54, var(--bs-link-underline-opacity, 1)) !important; + color: RGBA(189, 196, 202, var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(189, 196, 202, var(--bs-link-underline-opacity, 1)) !important; } .link-success { diff --git a/src/assets/css/themes/darkly.css b/src/assets/css/themes/darkly.css index 8baaf71..9450e54 100644 --- a/src/assets/css/themes/darkly.css +++ b/src/assets/css/themes/darkly.css @@ -30,7 +30,7 @@ --bs-gray-800: #303030; --bs-gray-900: #222; --bs-primary: #00bc8c; - --bs-secondary: #444; + --bs-secondary: #adb5bd; --bs-success: #00bc8c; --bs-info: #3498db; --bs-warning: #f39c12; @@ -38,7 +38,7 @@ --bs-light: #303030; --bs-dark: #dee2e6; --bs-primary-rgb: 0, 188, 140; - --bs-secondary-rgb: 68, 68, 68; + --bs-secondary-rgb: 173, 181, 189; --bs-success-rgb: 0, 188, 140; --bs-info-rgb: 52, 152, 219; --bs-warning-rgb: 243, 156, 18; @@ -46,7 +46,7 @@ --bs-light-rgb: 48, 48, 48; --bs-dark-rgb: 222, 226, 230; --bs-primary-text-emphasis: #004b38; - --bs-secondary-text-emphasis: #1b1b1b; + --bs-secondary-text-emphasis: #45484c; --bs-success-text-emphasis: #004b38; --bs-info-text-emphasis: #153d58; --bs-warning-text-emphasis: #613e07; @@ -54,7 +54,7 @@ --bs-light-text-emphasis: #444; --bs-dark-text-emphasis: #444; --bs-primary-bg-subtle: #ccf2e8; - --bs-secondary-bg-subtle: #dadada; + --bs-secondary-bg-subtle: #eff0f2; --bs-success-bg-subtle: #ccf2e8; --bs-info-bg-subtle: #d6eaf8; --bs-warning-bg-subtle: #fdebd0; @@ -62,7 +62,7 @@ --bs-light-bg-subtle: #fcfcfd; --bs-dark-bg-subtle: #ced4da; --bs-primary-border-subtle: #99e4d1; - --bs-secondary-border-subtle: #b4b4b4; + --bs-secondary-border-subtle: #dee1e5; --bs-success-border-subtle: #99e4d1; --bs-info-border-subtle: #aed6f1; --bs-warning-border-subtle: #fad7a0; @@ -142,7 +142,7 @@ --bs-tertiary-bg: #292929; --bs-tertiary-bg-rgb: 41, 41, 41; --bs-primary-text-emphasis: #66d7ba; - --bs-secondary-text-emphasis: #8f8f8f; + --bs-secondary-text-emphasis: #ced3d7; --bs-success-text-emphasis: #66d7ba; --bs-info-text-emphasis: #85c1e9; --bs-warning-text-emphasis: #f8c471; @@ -150,7 +150,7 @@ --bs-light-text-emphasis: #f8f9fa; --bs-dark-text-emphasis: #dee2e6; --bs-primary-bg-subtle: #00261c; - --bs-secondary-bg-subtle: #0e0e0e; + --bs-secondary-bg-subtle: #232426; --bs-success-bg-subtle: #00261c; --bs-info-bg-subtle: #0a1e2c; --bs-warning-bg-subtle: #311f04; @@ -158,7 +158,7 @@ --bs-light-bg-subtle: #303030; --bs-dark-bg-subtle: #181818; --bs-primary-border-subtle: #007154; - --bs-secondary-border-subtle: #292929; + --bs-secondary-border-subtle: #686d71; --bs-success-border-subtle: #007154; --bs-info-border-subtle: #1f5b83; --bs-warning-border-subtle: #925e0b; @@ -1945,13 +1945,13 @@ progress { .table-secondary { --bs-table-color: #000; - --bs-table-bg: #dadada; - --bs-table-border-color: #c4c4c4; - --bs-table-striped-bg: #cfcfcf; + --bs-table-bg: #eff0f2; + --bs-table-border-color: #d7d8da; + --bs-table-striped-bg: #e3e4e6; --bs-table-striped-color: #000; - --bs-table-active-bg: #c4c4c4; + --bs-table-active-bg: #d7d8da; --bs-table-active-color: #000; - --bs-table-hover-bg: #cacaca; + --bs-table-hover-bg: #dddee0; --bs-table-hover-color: #000; color: var(--bs-table-color); border-color: var(--bs-table-border-color); @@ -2978,20 +2978,20 @@ textarea.form-control-lg { } .btn-secondary { - --bs-btn-color: #fff; - --bs-btn-bg: #444; - --bs-btn-border-color: #444; - --bs-btn-hover-color: #fff; - --bs-btn-hover-bg: #3a3a3a; - --bs-btn-hover-border-color: #363636; - --bs-btn-focus-shadow-rgb: 96, 96, 96; - --bs-btn-active-color: #fff; - --bs-btn-active-bg: #363636; - --bs-btn-active-border-color: #333333; + --bs-btn-color: #000; + --bs-btn-bg: #adb5bd; + --bs-btn-border-color: #adb5bd; + --bs-btn-hover-color: #000; + --bs-btn-hover-bg: #b9c0c7; + --bs-btn-hover-border-color: #b5bcc4; + --bs-btn-focus-shadow-rgb: 147, 154, 161; + --bs-btn-active-color: #000; + --bs-btn-active-bg: #bdc4ca; + --bs-btn-active-border-color: #b5bcc4; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #fff; - --bs-btn-disabled-bg: #444; - --bs-btn-disabled-border-color: #444; + --bs-btn-disabled-color: #000; + --bs-btn-disabled-bg: #adb5bd; + --bs-btn-disabled-border-color: #adb5bd; } .btn-success { @@ -3114,19 +3114,19 @@ textarea.form-control-lg { } .btn-outline-secondary { - --bs-btn-color: #444; - --bs-btn-border-color: #444; - --bs-btn-hover-color: #fff; - --bs-btn-hover-bg: #444; - --bs-btn-hover-border-color: #444; - --bs-btn-focus-shadow-rgb: 68, 68, 68; - --bs-btn-active-color: #fff; - --bs-btn-active-bg: #444; - --bs-btn-active-border-color: #444; + --bs-btn-color: #adb5bd; + --bs-btn-border-color: #adb5bd; + --bs-btn-hover-color: #000; + --bs-btn-hover-bg: #adb5bd; + --bs-btn-hover-border-color: #adb5bd; + --bs-btn-focus-shadow-rgb: 173, 181, 189; + --bs-btn-active-color: #000; + --bs-btn-active-bg: #adb5bd; + --bs-btn-active-border-color: #adb5bd; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #444; + --bs-btn-disabled-color: #adb5bd; --bs-btn-disabled-bg: transparent; - --bs-btn-disabled-border-color: #444; + --bs-btn-disabled-border-color: #adb5bd; --bs-gradient: none; } @@ -6765,8 +6765,8 @@ textarea.form-control-lg { } .text-bg-secondary { - color: #fff !important; - background-color: RGBA(68, 68, 68, var(--bs-bg-opacity, 1)) !important; + color: #000 !important; + background-color: RGBA(173, 181, 189, var(--bs-bg-opacity, 1)) !important; } .text-bg-success { @@ -6813,8 +6813,8 @@ textarea.form-control-lg { text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important; } .link-secondary:hover, .link-secondary:focus { - color: RGBA(54, 54, 54, var(--bs-link-opacity, 1)) !important; - text-decoration-color: RGBA(54, 54, 54, var(--bs-link-underline-opacity, 1)) !important; + color: RGBA(189, 196, 202, var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(189, 196, 202, var(--bs-link-underline-opacity, 1)) !important; } .link-success {