From 58d8a5ce466de12cc9cf1347809a0464b9387953 Mon Sep 17 00:00:00 2001 From: Malcolm Diller Date: Sat, 15 Oct 2022 18:34:59 -0700 Subject: [PATCH] added support for theming buttons --- ui/media/main.css | 34 +++++++++++++++++++++++++++------- 1 file changed, 27 insertions(+), 7 deletions(-) diff --git a/ui/media/main.css b/ui/media/main.css index 20f8726a..4d852f45 100644 --- a/ui/media/main.css +++ b/ui/media/main.css @@ -13,6 +13,10 @@ --input-background-color: #e9e9ed; --input-border-color: #8f8f9d; + --button-text-color: var(--input-text-color); + --button-color: #e9e9ed; + --button-border: 1px solid #8f8f9d; + /* other */ --input-border-radius: 4px; --input-border-size: 1px; @@ -22,8 +26,7 @@ /* Light Theme */ -/* -:root { +/* :root { --background-color1: white; --background-color2: #dddddd; --background-color3: #e7e9eb; @@ -34,12 +37,11 @@ --input-text-color: black; --input-background-color: #f8f9fa; --input-border-color: grey; -} -*/ +} */ + /* Discord Theme */ -/* -:root { +/* :root { --background-color1: #36393f; --background-color2: #2f3136; --background-color3: #292b2f; @@ -48,13 +50,17 @@ --accent-hue: 235; --accent-lightness: 65%; --make-image-border: none; + + --button-color: var(--accent-color); + --button-border: none; + --input-text-color: #ccc; --input-border-size: 2px; --input-background-color: #202225; --input-border-color: var(--input-background-color); } */ -/* Dillerm Theme */ +/* Example "Custom" Theme */ /* :root { --main-hue: 222; --main-saturation: 18%; @@ -67,6 +73,9 @@ --accent-hue: 212; --make-image-border: none; + + --button-color: var(--accent-color); + --button-border: none; --input-border-size: 1px; --input-background-color: var(--background-color3); @@ -98,6 +107,7 @@ label { width: 100%; height: 65pt; font-size: 13px; + margin-bottom: 6px; } .image_preview_container { /* display: none; */ @@ -582,8 +592,18 @@ input[type="file"] { 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 { padding: 0px 4px; + height: 19px; } /* input[type="range"] {