diff --git a/style.css b/style.css index b2e9ce2..b19181f 100644 --- a/style.css +++ b/style.css @@ -8,6 +8,14 @@ body { #v5shoutbox { height: 100vh; + --shoutbox-color: #333333; + --shoutbox-border-color: rgba(0, 0, 0, .15); + --shoutbox-header-bg: #ececec; + --shoutbox-link-color: #ce1919; + --shoutbox-tab-activity-color: #ce1919; + --shoutbox-tab-current-color: #097ba1; + --shoutbox-message-date-color: #949494; + --shoutbox-message-author-color: #777777; } /* Shoutbox-only style */ @@ -16,15 +24,15 @@ body { display: flex; flex-flow: column; font-size: 12px; - color: #333; + color: var(--shoutbox-color); } #v5shoutbox header { height: 2em; display: flex; align-items: center; - background: #ececec; - border: 1px solid rgba(0, 0, 0, .15); + background: var(--shoutbox-header-bg); + border: 1px solid var(--shoutbox-border-color); gap: 4px; padding: 0 4px; } @@ -33,11 +41,11 @@ body { } #v5shoutbox a { - color: #ce1919; + color: var(--shoutbox-link-color); } #v5shoutbox a:active, #v5shoutbox a:hover, #v5shoutbox a:focus { - color: #ce1919; + color: var(--shoutbox-link-color); text-decoration: underline; outline: 0; } @@ -52,7 +60,7 @@ body { } #v5shoutbox .channel-buttons button { - border: 1px solid rgba(0, 0, 0, .15); + border: 1px solid var(--shoutbox-border-color); border-radius: 3px; } @@ -71,10 +79,10 @@ body { } #v5shoutbox .channel-buttons *.bg-activity { - color: #ce1919; + color: var(--shoutbox-tab-activity-color); } #v5shoutbox .channel-buttons *.current { - color: #097ba1; + color: var(--shoutbox-tab-current-color); } #v5shoutbox .channels { @@ -92,7 +100,7 @@ body { #v5shoutbox .channels .login-form { height: 30%; width: 40%; - border: 1px solid rgba(0, 0, 0, .15); + border: 1px solid var(--shoutbox-border-color); padding: 0 2%; display: flex; flex-flow: column; @@ -110,13 +118,13 @@ body { #v5shoutbox .message { line-height: 1.5; display: flex; - border-top: 1px solid rgba(0, 0, 0, .15); + border-top: 1px solid var(--shoutbox-border-color); } #v5shoutbox .message .message-author { margin-right: 6px; font-size: 0.9em; - color: #777777; + color: var(--shoutbox-message-author-color); min-width: 70px; text-align: right; flex-shrink: 0; @@ -131,7 +139,7 @@ body { } #v5shoutbox .message .message-date { - color: #949494; + color: var(--shoutbox-message-date-color); margin-left: 5px; font-size: 0.8em; order: 3; @@ -144,7 +152,7 @@ body { #v5shoutbox .shoutbox-form input[type=text] { width: 95%; - border: 1px solid rgba(0, 0, 0, .15); + border: 1px solid var(--shoutbox-border-color); border-left: 0; border-right: 0; border-radius: 0; @@ -152,6 +160,6 @@ body { #v5shoutbox .shoutbox-form button[type=submit] { width: 5%; - border: 1px solid rgba(0, 0, 0, .15); + border: 1px solid var(--shoutbox-border-color); border-radius: 0; }