supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use CSS variable for button color

Browse Source
This commit is contained in:
Jérémie Astori 2019-02-18 13:32:41 -05:00
parent 8b98c2c93c
commit 404de0ff5b
No known key found for this signature in database
GPG Key ID: B9A4F245CD67BDE8
1 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/css/style.css
View File

@ -11,6 +11,10 @@
/* Background color of the whole page */ /* Background color of the whole page */
--body-bg-color: #415364; --body-bg-color: #415364;
/* Main button color. Applies to border, text, and background on hover */
--button-color: #84ce88;
--button-text-color-hover: #fff;
/* Links and link-looking buttons */ /* Links and link-looking buttons */
--link-color: #50a656; --link-color: #50a656;
@ -155,9 +159,9 @@ kbd {
} }
.btn { .btn {
border: 2px solid #84ce88; border: 2px solid var(--button-color);
border-radius: 3px; border-radius: 3px;
color: #84ce88; color: var(--button-color);
display: inline-block; display: inline-block;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
@ -177,8 +181,8 @@ kbd {
.btn:disabled, .btn:disabled,
.btn:hover, .btn:hover,
.btn:focus { .btn:focus {
background: #84ce88; background: var(--button-color);
color: #fff; color: var(--button-text-color-hover);
opacity: 1; opacity: 1;
} }
@ -1113,8 +1117,8 @@ background on hover (unless active) */
line-height: 34px; line-height: 34px;
border-radius: 50%; border-radius: 50%;
background: var(--window-bg-color); background: var(--window-bg-color);
color: #84ce88; color: var(--button-color);
border: 2px solid #84ce88; border: 2px solid var(--button-color);
text-align: center; text-align: center;
transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s;
box-shadow: box-shadow:
@ -1123,8 +1127,8 @@ background on hover (unless active) */
} }
.scroll-down:hover .scroll-down-arrow { .scroll-down:hover .scroll-down-arrow {
background: #84ce88; background: var(--button-color);
color: var(--window-bg-color); color: var(--button-text-color-hover);
} }
.scroll-down-arrow::after { .scroll-down-arrow::after {