Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move to native css variables

Browse Source
This commit is contained in:
James Lyne 2021-05-15 23:24:29 +01:00
parent 651165d571
commit 36d2be4100
12 changed files with 98 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
index.html
View File

@ -22,6 +22,33 @@
<title>Minecraft Dynamic Map - LiveAtlas</title> <title>Minecraft Dynamic Map - LiveAtlas</title>
<style> <style>
:root {
--background-base: #222222; /* Buttons/sidebar */
--background-dark: #121212; /* Body/map labels */
--background-light: #333333; /* Scrollbars/inputs */
--background-error: #771616; /* Errors */
--background-disabled: #555555; /* Disabled controls */
--background-hover: #cccccc; /* Button :hover/selected */
--background-active: #eeeeee; /* Button :active */
--outline-focus: #222222; /* Button :focus outline */
--border-radius: 1rem;
--border-color: #333333; /* Control borders */
--text-base: #cccccc; /* Normal text */
--text-emphasis: #eeeeee; /* Chat messages/:focus inputs */
--text-subtle: #aaaaaa; /* Skeletons/secondary text */
--text-disabled: #999999; /* Disabled controls */
--text-hover: var(--background-base); /* Text in :hover/selected buttons */
--text-active: var(--background-dark); /* Text in :active buttons */
--text-night: #ddffff; /* Clock time at night */
--text-day: #ffdd33; /* Clock time in day */
}
@keyframes fade { @keyframes fade {
from { from {
opacity: 0; opacity: 0;
@ -33,7 +60,7 @@
} }
html, body { html, body {
background-color: #121212; background-color: var(--background-dark);
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0; margin: 0;
@ -41,7 +68,7 @@
} }
noscript { noscript {
color: #cccccc; color: var(--text-base);
font-size: 1rem; font-size: 1rem;
font-family: sans-serif; font-family: sans-serif;
text-align: center; text-align: center;
@ -56,7 +83,7 @@
right: 0; right: 0;
transition: 0.3s opacity linear; transition: 0.3s opacity linear;
z-index: 10000; z-index: 10000;
background-color: #121212; background-color: var(--background-dark);
cursor: wait; cursor: wait;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

19
src/components/ChatBox.vue
View File

@ -116,7 +116,6 @@
</script> </script>
<style lang="scss"> <style lang="scss">
@import '../scss/variables';
@import '../scss/placeholders'; @import '../scss/placeholders';
.chat { .chat {
@ -148,7 +147,7 @@
&.message--skeleton { &.message--skeleton {
font-style: italic; font-style: italic;
color: #aaaaaa; color: var(--text-subtle);
} }
} }
} }
@ -160,19 +159,19 @@
margin: 1.5rem -1.5rem -1.5rem; margin: 1.5rem -1.5rem -1.5rem;
.chat__input { .chat__input {
border-bottom-left-radius: $global-border-radius; border-bottom-left-radius: var(--border-radius);
flex-grow: 1; flex-grow: 1;
} }
.chat__send { .chat__send {
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
border-radius: 0 0 $global-border-radius 0; border-radius: 0 0 var(--border-radius) 0;
} }
.chat__error { .chat__error {
background-color: #771616; background-color: var(--background-error);
color: #eeeeee; color: var(--text-emphasis);
font-size: 1.6rem; font-size: 1.6rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
line-height: 2rem; line-height: 2rem;
@ -183,11 +182,11 @@
.chat__login { .chat__login {
font-size: 1.6rem; font-size: 1.6rem;
padding: 1.2rem; padding: 1.2rem;
background-color: #333333; background-color: var(--background-light);
color: #aaaaaa; color: var(--text-subtle);
margin: 1.5rem -1.5rem -1.5rem; margin: 1.5rem -1.5rem -1.5rem;
border-bottom-left-radius: $global-border-radius; border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: $global-border-radius; border-bottom-right-radius: var(--border-radius);
} }
@media (max-width: 400px), (max-height: 480px) { @media (max-width: 400px), (max-height: 480px) {

2
src/components/Map.vue
View File

@ -276,7 +276,7 @@ export default defineComponent({
.map { .map {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #000; background: transparent;
z-index: 0; z-index: 0;
} }
</style> </style>

3
src/components/Sidebar.vue
View File

@ -88,7 +88,6 @@ export default defineComponent({
</script> </script>
<style lang="scss"> <style lang="scss">
@import '../scss/variables';
@import '../scss/placeholders'; @import '../scss/placeholders';
.sidebar { .sidebar {
@ -173,7 +172,7 @@ export default defineComponent({
.section__skeleton { .section__skeleton {
font-style: italic; font-style: italic;
color: #aaa; color: var(--text-disabled);
text-align: center; text-align: center;
align-self: center; align-self: center;
margin-top: 1rem; margin-top: 1rem;

2
src/components/chat/ChatMessage.vue
View File

@ -113,7 +113,7 @@
.message__content { .message__content {
display: block; display: block;
color: #eeeeee; color: var(--text-emphasis);
} }
} }
} }

8
src/components/sidebar/PlayerListItem.vue
View File

@ -141,7 +141,9 @@ export default defineComponent({
cursor: not-allowed; cursor: not-allowed;
} }
color: #999999; .player__name {
color: var(--text-disabled);
}
} }
&.player--other-world { &.player--other-world {
@ -149,7 +151,9 @@ export default defineComponent({
opacity: 0.5; opacity: 0.5;
} }
color: #999999; .player__name {
color: var(--text-disabled);
}
} }
} }
</style> </style>

4
src/components/sidebar/WorldListItem.vue
View File

@ -90,8 +90,6 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../scss/variables';
.world { .world {
display: flex; display: flex;
align-items: center; align-items: center;
@ -130,7 +128,7 @@ export default defineComponent({
} }
&.map--selected button { &.map--selected button {
background-color: $global-focus-color; background-color: var(--background-hover);
} }
} }
</style> </style>

30
src/scss/_placeholders.scss
View File

@ -18,9 +18,9 @@
appearance: none; appearance: none;
border: none; border: none;
box-shadow: none; box-shadow: none;
background-color: $global-background; background-color: var(--background-base);
color: $global-text-color; color: var(--text-base);
border-radius: $global-border-radius; border-radius: var(--border-radius);
cursor: pointer; cursor: pointer;
display: block; display: block;
text-align: center; text-align: center;
@ -29,28 +29,28 @@
font-size: 1.6rem; font-size: 1.6rem;
&:hover, &.active { &:hover, &.active {
background-color: $global-focus-color; background-color: var(--background-hover);
color: #222222; color: var(--text-hover);
} }
&:focus { &:focus {
outline-color: $global-focus-color; outline-color: var(--outline-focus);
outline-width: 0.2rem; outline-width: 0.2rem;
} }
&:active { &:active {
background-color: #eeeeee; background-color: var(--background-active);
color: #121212; color: var(--text-active);
} }
&[disabled], &.disabled { &[disabled], &.disabled {
background-color: $global-disabled-background; background-color: var(--background-disabled);
color: $global-disabled-text-color; color: var(--text-disabled);
cursor: not-allowed; cursor: not-allowed;
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
background-color: $global-disabled-background; background-color: var(--background-disabled);
color: $global-disabled-text-color; color: var(--text-disabled);
} }
} }
@ -71,9 +71,9 @@
} }
%panel { %panel {
background-color: $global-background; background-color: var(--background-base);
color: $global-text-color; color: var(--text-base);
border-radius: $global-border-radius; border-radius: var(--border-radius);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1.5rem; padding: 1.5rem;

24
src/scss/_variables.scss
View File

@ -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;

18
src/scss/leaflet/_controls.scss
View File

@ -15,8 +15,8 @@
*/ */
.leaflet-control { .leaflet-control {
background-color: $global-background; background-color: var(--background-base);
border-radius: $global-border-radius; border-radius: var(--border-radius);
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
@ -39,20 +39,20 @@
a { a {
border-radius: 0; border-radius: 0;
border-bottom: 0.1rem solid $global-border-color; border-bottom: 0.1rem solid var(--border-color);
&.leaflet-disabled { &.leaflet-disabled {
background-color: $global-disabled-background; background-color: var(--background-disabled);
cursor: not-allowed; cursor: not-allowed;
&:hover { &:hover {
color: $global-disabled-text-color; color: var(--text-disabled);
border-bottom-color: $global-border-color; border-bottom-color: var(--border-color);
} }
} }
&:hover { &:hover {
border-bottom-color: $global-border-color; border-bottom-color: var(--border-color);
} }
} }
@ -141,7 +141,7 @@
.leaflet-control-layers { .leaflet-control-layers {
width: auto; width: auto;
border: none; border: none;
color: $global-text-color; color: var(--text-base);
&.leaflet-control-layers-expanded { &.leaflet-control-layers-expanded {
padding: 0; padding: 0;
@ -281,7 +281,7 @@
animation-fill-mode: forwards; animation-fill-mode: forwards;
&:focus, &:hover, &:active { &:focus, &:hover, &:active {
background-color: $global-background; background-color: var(--background-base);
} }
&[hidden] { &[hidden] {

10
src/scss/leaflet/_popups.scss
View File

@ -16,14 +16,14 @@
.leaflet-popup { .leaflet-popup {
.leaflet-popup-content-wrapper, .leaflet-popup-tip { .leaflet-popup-content-wrapper, .leaflet-popup-tip {
background-color: $global-background; background-color: var(--background-base);
color: $global-text-color; color: var(--text-base);
} }
.leaflet-popup-content-wrapper { .leaflet-popup-content-wrapper {
max-height: 50vh; max-height: 50vh;
display: flex; display: flex;
border-radius: $global-border-radius; border-radius: var(--border-radius);
} }
.leaflet-popup-content { .leaflet-popup-content {
@ -42,8 +42,8 @@
@at-root { @at-root {
.leaflet-container a.leaflet-popup-close-button { .leaflet-container a.leaflet-popup-close-button {
background-color: $global-background; background-color: var(--background-base);
border-radius: $global-border-radius; border-radius: var(--border-radius);
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
top: -1rem; top: -1rem;

42
src/scss/style.scss
View File

@ -16,8 +16,6 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
@import "variables";
@import "placeholders"; @import "placeholders";
@import "leaflet/controls"; @import "leaflet/controls";
@import "leaflet/popups"; @import "leaflet/popups";
@ -53,7 +51,7 @@
* { * {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: $global-text-color transparent; scrollbar-color: var(--background-hover) transparent;
} }
*::-webkit-scrollbar { *::-webkit-scrollbar {
@ -65,13 +63,13 @@
} }
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
background-color: #333333; background-color: var(--background-light);
border-radius: 2rem; border-radius: 2rem;
transition: background 1s ease-in; transition: background 1s ease-in;
} }
*:hover::-webkit-scrollbar-thumb { *:hover::-webkit-scrollbar-thumb {
background-color: $global-focus-color; background-color: var(--background-hover);
} }
*::-webkit-scrollbar-button { *::-webkit-scrollbar-button {
@ -84,13 +82,13 @@ html {
body { body {
font-family: Raleway, sans-serif; font-family: Raleway, sans-serif;
color: $global-text-color; color: var(--text-base);
text-shadow: 0.1rem 0.1rem #000000; text-shadow: 0.1rem 0.1rem #000000;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
} }
html, body { html, body {
background-color: $global-background; background-color: var(--background-dark);
height: 100%; height: 100%;
overscroll-behavior: none; overscroll-behavior: none;
} }
@ -111,7 +109,7 @@ h2 {
} }
a { a {
color: $global-text-color; color: var(--text-base);
} }
button { button {
@ -120,22 +118,22 @@ button {
input { input {
appearance: none; appearance: none;
background-color: #333333; background-color: var(--background-light);
box-shadow: none; box-shadow: none;
color: #cccccc; color: var(--text-base);
font-size: 1.6rem; font-size: 1.6rem;
padding: 1rem; padding: 1rem;
border: 0.2rem solid #333333; border: 0.2rem solid var(--border-color);
border-radius: 0; border-radius: 0;
&:focus { &:focus {
color: #eeeeee; color: var(--text-emphasis);
outline-color: #eeeeee; outline-color: var(--text-emphasis);
} }
&[disabled] { &[disabled] {
background-color: #333333; background-color: var(--background-disabled);
border-color: #333333; border-color: var(--border-color);
cursor: not-allowed; cursor: not-allowed;
} }
} }
@ -174,7 +172,7 @@ input {
&:checked { &:checked {
& ~ span { & ~ span {
color: #cccccc; color: var(--text-base);
} }
& + svg { & + svg {
@ -190,7 +188,7 @@ input {
} }
span { span {
color: #aaaaaa; color: var(--text-subtle);
padding-left: 3rem; padding-left: 3rem;
} }
} }
@ -220,17 +218,17 @@ input {
font-size: 2rem; font-size: 2rem;
line-height: 2rem; line-height: 2rem;
margin-top: auto; margin-top: auto;
background-color: #222; background-color: var(--background-base);
z-index: 1; z-index: 1;
padding: 0.1rem 0.1rem 0; padding: 0.1rem 0.1rem 0;
border-radius: 0.3rem; border-radius: 0.3rem;
&.night { &.night {
color: #ddffff; color: var(--text-night);
} }
&.day { &.day {
color: #ffdd33; color: var(--text-day);
} }
&.night, &.day { &.night, &.day {
@ -327,8 +325,8 @@ input {
white-space: nowrap; white-space: nowrap;
color: $global-text-color; color: var(--text-base);
background: #121212; background: var(--background-dark);
padding: 0.2rem; padding: 0.2rem;
display: none; display: none;
max-width: 25vw; max-width: 25vw;