From: Jay Sitter Date: Sat, 17 Jun 2023 05:39:48 +0000 (-0400) Subject: fix: Fix input-bg for darkly theme X-Git-Url: http://these/git/%22%7Burl%7D/%22https:/image.com/%7B%60%24%7BghostArchiveUrl%7D/%7BimageSrc%7D?a=commitdiff_plain;h=b59ddb1810d5d2212927b79fb1ab082b856cc415;p=lemmy-ui.git fix: Fix input-bg for darkly theme --- diff --git a/src/assets/css/themes/_variables.darkly.scss b/src/assets/css/themes/_variables.darkly.scss index 95b918d..96f3e10 100644 --- a/src/assets/css/themes/_variables.darkly.scss +++ b/src/assets/css/themes/_variables.darkly.scss @@ -33,10 +33,12 @@ $colors: ( ); $primary: $green; +$secondary: $gray-700; $dark: $gray-300; $theme-colors: ( "primary": $primary, + "secondary": $gray-700, "dark": $dark, ); diff --git a/src/assets/css/themes/darkly-red.css b/src/assets/css/themes/darkly-red.css index 103072e..7c6ad6e 100644 --- a/src/assets/css/themes/darkly-red.css +++ b/src/assets/css/themes/darkly-red.css @@ -1890,7 +1890,7 @@ pre code { font-weight: 400; line-height: 1.5; color: #fff; - background-color: #6c757d; + background-color: #444; background-clip: padding-box; border: 1px solid #222; border-radius: 0.25rem; @@ -1918,7 +1918,7 @@ pre code { } .form-control:disabled, .form-control[readonly] { - background-color: #545b62; + background-color: #2b2b2b; opacity: 1; } @@ -1935,7 +1935,7 @@ select.form-control:-moz-focusring { } select.form-control:focus::-ms-value { color: #fff; - background-color: #6c757d; + background-color: #444; } .form-control-file, @@ -2132,7 +2132,7 @@ textarea.form-control.is-valid { padding-right: calc(0.75em + 2.3125rem) !important; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, - #6c757d + #444 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; @@ -2262,7 +2262,7 @@ textarea.form-control.is-invalid { padding-right: calc(0.75em + 2.3125rem) !important; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, - #6c757d + #444 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; @@ -3752,7 +3752,7 @@ input[type="button"].btn-block { line-height: 1.5; color: #fff; vertical-align: middle; - background: #6c757d + background: #444 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat; border: 1px solid #ced4da; @@ -3766,7 +3766,7 @@ input[type="button"].btn-block { } .custom-select:focus::-ms-value { color: #fff; - background-color: #6c757d; + background-color: #444; } .custom-select[multiple], .custom-select[size]:not([size="1"]) { diff --git a/src/assets/css/themes/darkly.css b/src/assets/css/themes/darkly.css index 89bcda9..bddce57 100644 --- a/src/assets/css/themes/darkly.css +++ b/src/assets/css/themes/darkly.css @@ -21,7 +21,7 @@ --gray-dark: #303030; --black: #000; --primary: #00bc8c; - --secondary: #6c757d; + --secondary: #444; --success: #28a745; --info: #17a2b8; --warning: #ffc107; @@ -1645,21 +1645,21 @@ pre code { .table-secondary, .table-secondary > th, .table-secondary > td { - background-color: #d6d8db; + background-color: #cbcbcb; } .table-secondary th, .table-secondary td, .table-secondary thead th, .table-secondary tbody + tbody { - border-color: #b3b7bb; + border-color: #9e9e9e; } .table-hover .table-secondary:hover { - background-color: #c8cbcf; + background-color: #bebebe; } .table-hover .table-secondary:hover > td, .table-hover .table-secondary:hover > th { - background-color: #c8cbcf; + background-color: #bebebe; } .table-success, @@ -1890,7 +1890,7 @@ pre code { font-weight: 400; line-height: 1.5; color: #fff; - background-color: #6c757d; + background-color: #444; background-clip: padding-box; border: 1px solid #222; border-radius: 0.25rem; @@ -1918,7 +1918,7 @@ pre code { } .form-control:disabled, .form-control[readonly] { - background-color: #545b62; + background-color: #2b2b2b; opacity: 1; } @@ -1935,7 +1935,7 @@ select.form-control:-moz-focusring { } select.form-control:focus::-ms-value { color: #fff; - background-color: #6c757d; + background-color: #444; } .form-control-file, @@ -2132,7 +2132,7 @@ textarea.form-control.is-valid { padding-right: calc(0.75em + 2.3125rem) !important; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, - #6c757d + #444 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; @@ -2262,7 +2262,7 @@ textarea.form-control.is-invalid { padding-right: calc(0.75em + 2.3125rem) !important; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, - #6c757d + #444 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; @@ -2460,38 +2460,38 @@ fieldset:disabled a.btn { .btn-secondary { color: #fff; - background-color: #6c757d; - border-color: #6c757d; + background-color: #444; + border-color: #444; } .btn-secondary:hover { color: #fff; - background-color: #5a6268; - border-color: #545b62; + background-color: #313131; + border-color: #2b2b2b; } .btn-secondary:focus, .btn-secondary.focus { color: #fff; - background-color: #5a6268; - border-color: #545b62; - box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); + background-color: #313131; + border-color: #2b2b2b; + box-shadow: 0 0 0 0.2rem rgba(96, 96, 96, 0.5); } .btn-secondary.disabled, .btn-secondary:disabled { color: #fff; - background-color: #6c757d; - border-color: #6c757d; + background-color: #444; + border-color: #444; } .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { color: #fff; - background-color: #545b62; - border-color: #4e555b; + background-color: #2b2b2b; + border-color: #242424; } .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-secondary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5); + box-shadow: 0 0 0 0.2rem rgba(96, 96, 96, 0.5); } .btn-success { @@ -2742,34 +2742,34 @@ fieldset:disabled a.btn { } .btn-outline-secondary { - color: #6c757d; - border-color: #6c757d; + color: #444; + border-color: #444; } .btn-outline-secondary:hover { color: #fff; - background-color: #6c757d; - border-color: #6c757d; + background-color: #444; + border-color: #444; } .btn-outline-secondary:focus, .btn-outline-secondary.focus { - box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); + box-shadow: 0 0 0 0.2rem rgba(68, 68, 68, 0.5); } .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { - color: #6c757d; + color: #444; background-color: transparent; } .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle { color: #fff; - background-color: #6c757d; - border-color: #6c757d; + background-color: #444; + border-color: #444; } .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); + box-shadow: 0 0 0 0.2rem rgba(68, 68, 68, 0.5); } .btn-outline-success { @@ -3752,7 +3752,7 @@ input[type="button"].btn-block { line-height: 1.5; color: #fff; vertical-align: middle; - background: #6c757d + background: #444 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat; border: 1px solid #ced4da; @@ -3766,7 +3766,7 @@ input[type="button"].btn-block { } .custom-select:focus::-ms-value { color: #fff; - background-color: #6c757d; + background-color: #444; } .custom-select[multiple], .custom-select[size]:not([size="1"]) { @@ -4871,17 +4871,17 @@ a.badge-primary.focus { .badge-secondary { color: #fff; - background-color: #6c757d; + background-color: #444; } a.badge-secondary:hover, a.badge-secondary:focus { color: #fff; - background-color: #545b62; + background-color: #2b2b2b; } a.badge-secondary:focus, a.badge-secondary.focus { outline: 0; - box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); + box-shadow: 0 0 0 0.2rem rgba(68, 68, 68, 0.5); } .badge-success { @@ -5033,15 +5033,15 @@ a.badge-dark.focus { } .alert-secondary { - color: #383d41; - background-color: #e2e3e5; - border-color: #d6d8db; + color: #232323; + background-color: #dadada; + border-color: #cbcbcb; } .alert-secondary hr { - border-top-color: #c8cbcf; + border-top-color: #bebebe; } .alert-secondary .alert-link { - color: #202326; + color: #0a0a0a; } .alert-success { @@ -5388,18 +5388,18 @@ a.badge-dark.focus { } .list-group-item-secondary { - color: #383d41; - background-color: #d6d8db; + color: #232323; + background-color: #cbcbcb; } .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus { - color: #383d41; - background-color: #c8cbcf; + color: #232323; + background-color: #bebebe; } .list-group-item-secondary.list-group-item-action.active { color: #fff; - background-color: #383d41; - border-color: #383d41; + background-color: #232323; + border-color: #232323; } .list-group-item-success { @@ -6301,14 +6301,14 @@ button.bg-primary:focus { } .bg-secondary { - background-color: #6c757d !important; + background-color: #444 !important; } a.bg-secondary:hover, a.bg-secondary:focus, button.bg-secondary:hover, button.bg-secondary:focus { - background-color: #545b62 !important; + background-color: #2b2b2b !important; } .bg-success { @@ -6430,7 +6430,7 @@ button.bg-dark:focus { } .border-secondary { - border-color: #6c757d !important; + border-color: #444 !important; } .border-success { @@ -9472,12 +9472,12 @@ a.text-primary:focus { } .text-secondary { - color: #6c757d !important; + color: #444 !important; } a.text-secondary:hover, a.text-secondary:focus { - color: #494f54 !important; + color: #1e1e1e !important; } .text-success { diff --git a/src/assets/css/themes/litely-red.css b/src/assets/css/themes/litely-red.css index bb20821..14936cd 100644 --- a/src/assets/css/themes/litely-red.css +++ b/src/assets/css/themes/litely-red.css @@ -1890,7 +1890,7 @@ pre code { font-weight: 400; line-height: 1.5; color: #fff; - background-color: #6c757d; + background-color: #444; background-clip: padding-box; border: 1px solid #222; border-radius: 0.25rem; @@ -1918,7 +1918,7 @@ pre code { } .form-control:disabled, .form-control[readonly] { - background-color: #545b62; + background-color: #2b2b2b; opacity: 1; } @@ -1935,7 +1935,7 @@ select.form-control:-moz-focusring { } select.form-control:focus::-ms-value { color: #fff; - background-color: #6c757d; + background-color: #444; } .form-control-file, @@ -2132,7 +2132,7 @@ textarea.form-control.is-valid { padding-right: calc(0.75em + 2.3125rem) !important; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, - #6c757d + #444 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; @@ -2262,7 +2262,7 @@ textarea.form-control.is-invalid { padding-right: calc(0.75em + 2.3125rem) !important; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, - #6c757d + #444 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; @@ -3752,7 +3752,7 @@ input[type="button"].btn-block { line-height: 1.5; color: #fff; vertical-align: middle; - background: #6c757d + background: #444 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat; border: 1px solid #ced4da; @@ -3766,7 +3766,7 @@ input[type="button"].btn-block { } .custom-select:focus::-ms-value { color: #fff; - background-color: #6c757d; + background-color: #444; } .custom-select[multiple], .custom-select[size]:not([size="1"]) {