From: Jay Sitter <jay@jaysitter.com>
Date: Sat, 17 Jun 2023 05:39:48 +0000 (-0400)
Subject: fix: Fix input-bg for darkly theme
X-Git-Url: http://these/git/%24%7BgetStaticDir%28%29%7D/styles/%7B%60https:/%7Bthis.props.imageSrc%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"]) {