added support for theming buttons

This commit is contained in:
Malcolm Diller 2022-10-15 18:34:59 -07:00
parent 72a65218be
commit 58d8a5ce46

View File

@ -13,6 +13,10 @@
--input-background-color: #e9e9ed; --input-background-color: #e9e9ed;
--input-border-color: #8f8f9d; --input-border-color: #8f8f9d;
--button-text-color: var(--input-text-color);
--button-color: #e9e9ed;
--button-border: 1px solid #8f8f9d;
/* other */ /* other */
--input-border-radius: 4px; --input-border-radius: 4px;
--input-border-size: 1px; --input-border-size: 1px;
@ -22,8 +26,7 @@
/* Light Theme */ /* Light Theme */
/* /* :root {
:root {
--background-color1: white; --background-color1: white;
--background-color2: #dddddd; --background-color2: #dddddd;
--background-color3: #e7e9eb; --background-color3: #e7e9eb;
@ -34,12 +37,11 @@
--input-text-color: black; --input-text-color: black;
--input-background-color: #f8f9fa; --input-background-color: #f8f9fa;
--input-border-color: grey; --input-border-color: grey;
} } */
*/
/* Discord Theme */ /* Discord Theme */
/* /* :root {
:root {
--background-color1: #36393f; --background-color1: #36393f;
--background-color2: #2f3136; --background-color2: #2f3136;
--background-color3: #292b2f; --background-color3: #292b2f;
@ -49,12 +51,16 @@
--accent-lightness: 65%; --accent-lightness: 65%;
--make-image-border: none; --make-image-border: none;
--button-color: var(--accent-color);
--button-border: none;
--input-text-color: #ccc;
--input-border-size: 2px; --input-border-size: 2px;
--input-background-color: #202225; --input-background-color: #202225;
--input-border-color: var(--input-background-color); --input-border-color: var(--input-background-color);
} */ } */
/* Dillerm Theme */ /* Example "Custom" Theme */
/* :root { /* :root {
--main-hue: 222; --main-hue: 222;
--main-saturation: 18%; --main-saturation: 18%;
@ -68,6 +74,9 @@
--accent-hue: 212; --accent-hue: 212;
--make-image-border: none; --make-image-border: none;
--button-color: var(--accent-color);
--button-border: none;
--input-border-size: 1px; --input-border-size: 1px;
--input-background-color: var(--background-color3); --input-background-color: var(--background-color3);
--input-text-color: #ccc; --input-text-color: #ccc;
@ -98,6 +107,7 @@ label {
width: 100%; width: 100%;
height: 65pt; height: 65pt;
font-size: 13px; font-size: 13px;
margin-bottom: 6px;
} }
.image_preview_container { .image_preview_container {
/* display: none; */ /* display: none; */
@ -582,8 +592,18 @@ input[type="file"] {
padding: 2px; padding: 2px;
} }
button,
input::file-selector-button {
padding: 2px 4px;
border-radius: 4px;
background: var(--button-color);
color: var(--button-text-color);
border: var(--button-border);
}
input::file-selector-button { input::file-selector-button {
padding: 0px 4px; padding: 0px 4px;
height: 19px;
} }
/* input[type="range"] { /* input[type="range"] {