diff --git a/src/assets/base.css b/src/assets/base.css index 3474f444941f8de331422c1d5f2561ddd56854e7..4d25b57a7854150d0981c93623e0b8c3e4d4fb40 100644 --- a/src/assets/base.css +++ b/src/assets/base.css @@ -22,7 +22,10 @@ --color-button: var(--green); --color-button-disabled: var(--grey); --color-nav-hover: var(--light-grey); + --color-button-edit: var(--grey); --color-button-hover: var(--light-green); + --color-button-danger: var(--accent3); + --color-button-danger-hover: var(--accent1); --color-link: var(--accent3); --color-border: var(--black); @@ -30,10 +33,14 @@ --section-gap: 160px; } -@media (prefers-color-scheme: dark) { - :root { - /* TODO: add dark mode colors */ - } +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} + +input[type="number"] { + -moz-appearance: textfield; /* Firefox */ } *, diff --git a/src/assets/main.css b/src/assets/main.css index fb3adbdedd532ef58ec23cf3738f192b8852b7c4..6aea95d7ffc247b4457e16f54cacbf0462f3af7a 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -34,25 +34,52 @@ h3 { margin-bottom: 1rem; } -button { - background-color: var(--color-button); +button.primary { + background-color: transparent; + border-color: var(--color-button); color: var(--color-text); - border-color: transparent; padding: 0.2rem 1rem; + font-weight: bold; border-radius: 1rem; + border-width: 2px; cursor: pointer; transition: 0.4s; } -button:disabled { +button.primary:disabled { background-color: var(--color-button-disabled); + border-color: var(--color-button-disabled); cursor: not-allowed; } -button:hover { - background-color: var(--color-button-hover); +button.primary:hover { + border-color: var(--color-button-hover); transition: 0.7s; } +button.secondary { + border-color: var(--color-button-edit); +} + +button.secondary:hover { + border-color: black; + transition: 0.7s; +} + +button.danger { + background-color: var(--color-button-danger); + border-color: transparent; +} + +button.danger:hover { + background-color: var(--color-button-danger-hover); + border-color: var(--color-button-danger); + transition: 0.7s; +} + +button.logout { + background-color: var(--color-button); +} + a { text-decoration: none; color: var(--color-text);