From 404de0ff5bc4cf8e276e325cee495186572965aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Mon, 18 Feb 2019 13:32:41 -0500 Subject: [PATCH] Use CSS variable for button color --- client/css/style.css | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index fb6b73c4..918c811d 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -11,6 +11,10 @@ /* Background color of the whole page */ --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 */ --link-color: #50a656; @@ -155,9 +159,9 @@ kbd { } .btn { - border: 2px solid #84ce88; + border: 2px solid var(--button-color); border-radius: 3px; - color: #84ce88; + color: var(--button-color); display: inline-block; font-size: 12px; font-weight: bold; @@ -177,8 +181,8 @@ kbd { .btn:disabled, .btn:hover, .btn:focus { - background: #84ce88; - color: #fff; + background: var(--button-color); + color: var(--button-text-color-hover); opacity: 1; } @@ -1113,8 +1117,8 @@ background on hover (unless active) */ line-height: 34px; border-radius: 50%; background: var(--window-bg-color); - color: #84ce88; - border: 2px solid #84ce88; + color: var(--button-color); + border: 2px solid var(--button-color); text-align: center; transition: background 0.2s, color 0.2s; box-shadow: @@ -1123,8 +1127,8 @@ background on hover (unless active) */ } .scroll-down:hover .scroll-down-arrow { - background: #84ce88; - color: var(--window-bg-color); + background: var(--button-color); + color: var(--button-text-color-hover); } .scroll-down-arrow::after {