From 36d2be410046463e07abbf53314065cf84f7c736 Mon Sep 17 00:00:00 2001 From: James Lyne Date: Sat, 15 May 2021 23:24:29 +0100 Subject: [PATCH] Move to native css variables --- index.html | 33 ++++++++++++++++-- src/components/ChatBox.vue | 19 +++++----- src/components/Map.vue | 2 +- src/components/Sidebar.vue | 3 +- src/components/chat/ChatMessage.vue | 2 +- src/components/sidebar/PlayerListItem.vue | 8 +++-- src/components/sidebar/WorldListItem.vue | 4 +-- src/scss/_placeholders.scss | 30 ++++++++-------- src/scss/_variables.scss | 24 ------------- src/scss/leaflet/_controls.scss | 18 +++++----- src/scss/leaflet/_popups.scss | 10 +++--- src/scss/style.scss | 42 +++++++++++------------ 12 files changed, 98 insertions(+), 97 deletions(-) delete mode 100644 src/scss/_variables.scss diff --git a/index.html b/index.html index 8026cb3..db9ee1e 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,33 @@ Minecraft Dynamic Map - LiveAtlas \ No newline at end of file diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index 5bc13e0..0e2a7f8 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -88,7 +88,6 @@ export default defineComponent({ \ No newline at end of file diff --git a/src/components/sidebar/WorldListItem.vue b/src/components/sidebar/WorldListItem.vue index 4a52270..c439e42 100644 --- a/src/components/sidebar/WorldListItem.vue +++ b/src/components/sidebar/WorldListItem.vue @@ -90,8 +90,6 @@ export default defineComponent({ diff --git a/src/scss/_placeholders.scss b/src/scss/_placeholders.scss index eb8582f..85a59ba 100644 --- a/src/scss/_placeholders.scss +++ b/src/scss/_placeholders.scss @@ -18,9 +18,9 @@ appearance: none; border: none; box-shadow: none; - background-color: $global-background; - color: $global-text-color; - border-radius: $global-border-radius; + background-color: var(--background-base); + color: var(--text-base); + border-radius: var(--border-radius); cursor: pointer; display: block; text-align: center; @@ -29,28 +29,28 @@ font-size: 1.6rem; &:hover, &.active { - background-color: $global-focus-color; - color: #222222; + background-color: var(--background-hover); + color: var(--text-hover); } &:focus { - outline-color: $global-focus-color; + outline-color: var(--outline-focus); outline-width: 0.2rem; } &:active { - background-color: #eeeeee; - color: #121212; + background-color: var(--background-active); + color: var(--text-active); } &[disabled], &.disabled { - background-color: $global-disabled-background; - color: $global-disabled-text-color; + background-color: var(--background-disabled); + color: var(--text-disabled); cursor: not-allowed; &:hover, &:focus, &:active { - background-color: $global-disabled-background; - color: $global-disabled-text-color; + background-color: var(--background-disabled); + color: var(--text-disabled); } } @@ -71,9 +71,9 @@ } %panel { - background-color: $global-background; - color: $global-text-color; - border-radius: $global-border-radius; + background-color: var(--background-base); + color: var(--text-base); + border-radius: var(--border-radius); display: flex; flex-direction: column; padding: 1.5rem; diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss deleted file mode 100644 index 74b42f4..0000000 --- a/src/scss/_variables.scss +++ /dev/null @@ -1,24 +0,0 @@ -/*! - * Copyright 2020 James Lyne - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -$global-text-color: #cccccc; -$global-border-radius: 1rem; -$global-background: #222222; -$global-focus-color: #cccccc; -$global-border-color: #333333; - -$global-disabled-background: #555555; -$global-disabled-text-color: #bbbbbb; \ No newline at end of file diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss index db3d423..f6f486d 100644 --- a/src/scss/leaflet/_controls.scss +++ b/src/scss/leaflet/_controls.scss @@ -15,8 +15,8 @@ */ .leaflet-control { - background-color: $global-background; - border-radius: $global-border-radius; + background-color: var(--background-base); + border-radius: var(--border-radius); margin: 0; box-sizing: border-box; overflow: hidden; @@ -39,20 +39,20 @@ a { border-radius: 0; - border-bottom: 0.1rem solid $global-border-color; + border-bottom: 0.1rem solid var(--border-color); &.leaflet-disabled { - background-color: $global-disabled-background; + background-color: var(--background-disabled); cursor: not-allowed; &:hover { - color: $global-disabled-text-color; - border-bottom-color: $global-border-color; + color: var(--text-disabled); + border-bottom-color: var(--border-color); } } &:hover { - border-bottom-color: $global-border-color; + border-bottom-color: var(--border-color); } } @@ -141,7 +141,7 @@ .leaflet-control-layers { width: auto; border: none; - color: $global-text-color; + color: var(--text-base); &.leaflet-control-layers-expanded { padding: 0; @@ -281,7 +281,7 @@ animation-fill-mode: forwards; &:focus, &:hover, &:active { - background-color: $global-background; + background-color: var(--background-base); } &[hidden] { diff --git a/src/scss/leaflet/_popups.scss b/src/scss/leaflet/_popups.scss index 489ad9c..a4f824f 100644 --- a/src/scss/leaflet/_popups.scss +++ b/src/scss/leaflet/_popups.scss @@ -16,14 +16,14 @@ .leaflet-popup { .leaflet-popup-content-wrapper, .leaflet-popup-tip { - background-color: $global-background; - color: $global-text-color; + background-color: var(--background-base); + color: var(--text-base); } .leaflet-popup-content-wrapper { max-height: 50vh; display: flex; - border-radius: $global-border-radius; + border-radius: var(--border-radius); } .leaflet-popup-content { @@ -42,8 +42,8 @@ @at-root { .leaflet-container a.leaflet-popup-close-button { - background-color: $global-background; - border-radius: $global-border-radius; + background-color: var(--background-base); + border-radius: var(--border-radius); width: 2rem; height: 2rem; top: -1rem; diff --git a/src/scss/style.scss b/src/scss/style.scss index 8b00104..13a2636 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -16,8 +16,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - -@import "variables"; @import "placeholders"; @import "leaflet/controls"; @import "leaflet/popups"; @@ -53,7 +51,7 @@ * { scrollbar-width: thin; - scrollbar-color: $global-text-color transparent; + scrollbar-color: var(--background-hover) transparent; } *::-webkit-scrollbar { @@ -65,13 +63,13 @@ } *::-webkit-scrollbar-thumb { - background-color: #333333; + background-color: var(--background-light); border-radius: 2rem; transition: background 1s ease-in; } *:hover::-webkit-scrollbar-thumb { - background-color: $global-focus-color; + background-color: var(--background-hover); } *::-webkit-scrollbar-button { @@ -84,13 +82,13 @@ html { body { font-family: Raleway, sans-serif; - color: $global-text-color; + color: var(--text-base); text-shadow: 0.1rem 0.1rem #000000; letter-spacing: 0.02rem; } html, body { - background-color: $global-background; + background-color: var(--background-dark); height: 100%; overscroll-behavior: none; } @@ -111,7 +109,7 @@ h2 { } a { - color: $global-text-color; + color: var(--text-base); } button { @@ -120,22 +118,22 @@ button { input { appearance: none; - background-color: #333333; + background-color: var(--background-light); box-shadow: none; - color: #cccccc; + color: var(--text-base); font-size: 1.6rem; padding: 1rem; - border: 0.2rem solid #333333; + border: 0.2rem solid var(--border-color); border-radius: 0; &:focus { - color: #eeeeee; - outline-color: #eeeeee; + color: var(--text-emphasis); + outline-color: var(--text-emphasis); } &[disabled] { - background-color: #333333; - border-color: #333333; + background-color: var(--background-disabled); + border-color: var(--border-color); cursor: not-allowed; } } @@ -174,7 +172,7 @@ input { &:checked { & ~ span { - color: #cccccc; + color: var(--text-base); } & + svg { @@ -190,7 +188,7 @@ input { } span { - color: #aaaaaa; + color: var(--text-subtle); padding-left: 3rem; } } @@ -220,17 +218,17 @@ input { font-size: 2rem; line-height: 2rem; margin-top: auto; - background-color: #222; + background-color: var(--background-base); z-index: 1; padding: 0.1rem 0.1rem 0; border-radius: 0.3rem; &.night { - color: #ddffff; + color: var(--text-night); } &.day { - color: #ffdd33; + color: var(--text-day); } &.night, &.day { @@ -327,8 +325,8 @@ input { white-space: nowrap; - color: $global-text-color; - background: #121212; + color: var(--text-base); + background: var(--background-dark); padding: 0.2rem; display: none; max-width: 25vw;