diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css index cff3207fa..83df23386 100644 --- a/src/public/stylesheets/theme-next-dark.css +++ b/src/public/stylesheets/theme-next-dark.css @@ -19,16 +19,11 @@ --accented-background-color: #555; - --button-background-color: transparent; - --button-border-color: #ccc; - --button-text-color: currentColor; - --button-border-radius: 5px; - --button-disabled-background-color: transparent; - --button-disabled-text-color: #999; - - --primary-button-background-color: #888; - --primary-button-text-color: white; - --primary-button-border-color: #999; + --button-background-color: #ffffff28; + --button-text-color: #ffffffc2; + --button-hover-background-color: #ffffff37; + --button-hover-text-color: white; + --button-shadow-color: #00000080; --muted-text-color: #bbb; diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css index 865afc47b..26e47a978 100644 --- a/src/public/stylesheets/theme-next-light.css +++ b/src/public/stylesheets/theme-next-light.css @@ -19,16 +19,11 @@ --accented-background-color: #f5f5f5; - --button-background-color: transparent; - --button-border-color: #ddd; - --button-text-color: black; - --button-border-radius: 5px; - --button-disabled-background-color: #ddd; - --button-disabled-text-color: black; - - --primary-button-background-color: #6c757d; - --primary-button-text-color: white; - --primary-button-border-color: #6c757d; + --button-background-color: #0000000f; + --button-text-color: #000000ad; + --button-hover-background-color: #00000016; + --button-hover-text-color: #000; + --button-shadow-color: #00000040; --muted-text-color: #666; diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index 510ddc807..c4475b8df 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -1,3 +1,35 @@ +/* + * Buttons + */ + +button.btn, +button.btn.btn-primary { + box-shadow: 1px 1px 1px var(--button-shadow-color); + padding: 4px 16px; + min-width: 120px; + border: unset; + border-radius: 6px; + background: var(--button-background-color); + color: var(--button-text-color); +} + +button.btn:hover { + background: var(--button-hover-background-color); + color: var(--button-hover-text-color); +} + +button.btn:active { + box-shadow: unset; + opacity: .85; + background: var(--button-background-color) !important; + color: var(--button-text-color) !important; + transform: scale(.95); +} + +button.btn + button.btn { + margin-left: 8px; +} + /* * Input boxes */