Move to native css variables
This commit is contained in:
James Lyne
parent
651165d571
commit
36d2be4100
33
index.html
33
index.html
@ -22,6 +22,33 @@
|
||||
<title>Minecraft Dynamic Map - LiveAtlas</title>
|
||||
|
||||
<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 {
|
||||
from {
|
||||
opacity: 0;
|
||||
@ -33,7 +60,7 @@
|
||||
}
|
||||
|
||||
html, body {
|
||||
background-color: #121212;
|
||||
background-color: var(--background-dark);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
@ -41,7 +68,7 @@
|
||||
}
|
||||
|
||||
noscript {
|
||||
color: #cccccc;
|
||||
color: var(--text-base);
|
||||
font-size: 1rem;
|
||||
font-family: sans-serif;
|
||||
text-align: center;
|
||||
@ -56,7 +83,7 @@
|
||||
right: 0;
|
||||
transition: 0.3s opacity linear;
|
||||
z-index: 10000;
|
||||
background-color: #121212;
|
||||
background-color: var(--background-dark);
|
||||
cursor: wait;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -116,7 +116,6 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../scss/variables';
|
||||
@import '../scss/placeholders';
|
||||
|
||||
.chat {
|
||||
@ -148,7 +147,7 @@
|
||||
|
||||
&.message--skeleton {
|
||||
font-style: italic;
|
||||
color: #aaaaaa;
|
||||
color: var(--text-subtle);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -160,19 +159,19 @@
|
||||
margin: 1.5rem -1.5rem -1.5rem;
|
||||
|
||||
.chat__input {
|
||||
border-bottom-left-radius: $global-border-radius;
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.chat__send {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
border-radius: 0 0 $global-border-radius 0;
|
||||
border-radius: 0 0 var(--border-radius) 0;
|
||||
}
|
||||
|
||||
.chat__error {
|
||||
background-color: #771616;
|
||||
color: #eeeeee;
|
||||
background-color: var(--background-error);
|
||||
color: var(--text-emphasis);
|
||||
font-size: 1.6rem;
|
||||
padding: 0.5rem 1rem;
|
||||
line-height: 2rem;
|
||||
@ -183,11 +182,11 @@
|
||||
.chat__login {
|
||||
font-size: 1.6rem;
|
||||
padding: 1.2rem;
|
||||
background-color: #333333;
|
||||
color: #aaaaaa;
|
||||
background-color: var(--background-light);
|
||||
color: var(--text-subtle);
|
||||
margin: 1.5rem -1.5rem -1.5rem;
|
||||
border-bottom-left-radius: $global-border-radius;
|
||||
border-bottom-right-radius: $global-border-radius;
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
@media (max-width: 400px), (max-height: 480px) {
|
||||
|
||||
@ -276,7 +276,7 @@ export default defineComponent({
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
background: transparent;
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
@ -88,7 +88,6 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../scss/variables';
|
||||
@import '../scss/placeholders';
|
||||
|
||||
.sidebar {
|
||||
@ -173,7 +172,7 @@ export default defineComponent({
|
||||
|
||||
.section__skeleton {
|
||||
font-style: italic;
|
||||
color: #aaa;
|
||||
color: var(--text-disabled);
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
margin-top: 1rem;
|
||||
|
||||
@ -113,7 +113,7 @@
|
||||
|
||||
.message__content {
|
||||
display: block;
|
||||
color: #eeeeee;
|
||||
color: var(--text-emphasis);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -141,7 +141,9 @@ export default defineComponent({
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
color: #999999;
|
||||
.player__name {
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
&.player--other-world {
|
||||
@ -149,7 +151,9 @@ export default defineComponent({
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
color: #999999;
|
||||
.player__name {
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -90,8 +90,6 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../scss/variables';
|
||||
|
||||
.world {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -130,7 +128,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
&.map--selected button {
|
||||
background-color: $global-focus-color;
|
||||
background-color: var(--background-hover);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
@ -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] {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user