diff options
| -rw-r--r-- | ufund-ui/src/styles.css | 28 |
1 files changed, 22 insertions, 6 deletions
diff --git a/ufund-ui/src/styles.css b/ufund-ui/src/styles.css index c4034ad..82db502 100644 --- a/ufund-ui/src/styles.css +++ b/ufund-ui/src/styles.css @@ -21,16 +21,20 @@ [theme="dark"] { color-scheme: dark; --background-color: #000715; - --secondary-color: #444444; - --tertiary-color: #3a3a3a; - --foreground-color: #ffffff; - --highlight-color: #6091e8; - --dark-highlight-clor: #002846; - --hover-color: #394559; + --secondary-color: #444444; /* color of cards and buttons*/ + --tertiary-color: #3a3a3a; /* color of dark cards */ + --foreground-color: #ffffff; /* used on text */ + --highlight-color: #6091e8; /* accent color */ + --dark-highlight-clor: #002846; /* not used currently */ + --hover-color: #394559; /* hover color for cards and buttons*/ --opacity-cr: 0; --opacity-jf: 1; } +:root { + --background-hover: color-mix(in oklch, var(--background-color) 60%, var(--hover-color) 40%); +} + html, body { margin: 0; height: 100%; @@ -60,6 +64,10 @@ input, textarea, select { &.sort-scheme { background-color: transparent; border-color: var(--secondary-color); + + &:hover { + background-color: var(--background-hover); + } } } @@ -82,6 +90,10 @@ button, input[type=button], input[type=reset], input[type=submit], .button { &.sort-scheme { background-color: transparent; + + &:hover { + background-color: var(--background-hover); + } } } @@ -94,6 +106,10 @@ button, input[type=button], input[type=reset], input[type=submit], .button { font-weight: 700; background-color: transparent; text-shadow: var(--highlight-color) 0 0 50px; + + &:hover { + background-color: var(--background-hover) !important; + } } .icon { |