make color variables selectable in cloudcannon

This commit is contained in:
sakrecoer 2020-08-10 17:31:05 +02:00
parent 11d3e1f5fd
commit 7e61046352
12 changed files with 117 additions and 90 deletions

View file

@ -23,9 +23,9 @@
-webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in;
transition: all 400ms ease-in;
-webkit-box-shadow: 0px 3px 29px 0px _palette(border-alt);
-moz-box-shadow: 0px 3px 29px 0px _palette(border-alt);
box-shadow: 0px 3px 29px 0px _palette(border-alt);
-webkit-box-shadow: 0px 3px 29px 0px var(--border-alt);
-moz-box-shadow: 0px 3px 29px 0px var(--border-alt);
box-shadow: 0px 3px 29px 0px var(--border-alt);
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
@ -42,13 +42,13 @@
-webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in;
transition: all 400ms ease-in;
background-color: _palette(bg);
background-color: var(--bg);
}
.sticky {
filter: blur(0px);
opacity: 1;
background-color: _palette(bg);
background-color: var(--bg);
-webkit-transition: all 400ms ease-in;
-moz-transition: all 400ms ease-in;
transition: all 400ms ease-in;
@ -57,7 +57,7 @@
.navmenu {
margin: 0 40px 0 20px;
font-size: 34px;
color:_palette(accent1);
color:var(--accent1);
}
@ -69,7 +69,7 @@ nav {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: _palette(bg);
background-color: var(--bg);
border-radius: 5px;
display: flex;
flex-wrap: wrap;
@ -100,7 +100,7 @@ nav {
right: 0;
bottom: 0;
left: 0;
background: _palette(bg-alt);
background: var(--bg-alt);
z-index: 10;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
@ -124,14 +124,14 @@ nav {
padding: 20px;
border-radius: 3px;
background: rgb(0, 31, 36);
background: -moz-linear-gradient(_palette(border), _palette(bg));
background: -webkit-linear-gradient(_palette(border), _palette(bg));
background: -o-linear-gradient(_palette(border), _palette(bg));
background: -moz-linear-gradient(var(--border), var(--bg));
background: -webkit-linear-gradient(var(--border), var(--bg));
background: -o-linear-gradient(var(--border), var(--bg));
}
.close-button {
background-color: _palette(accent2);
color: _palette(accent1);
background-color: var(--accent2);
color: var(--accent1);
margin: 0 auto;
line-height: 48px;
position: absolute;
@ -147,8 +147,8 @@ nav {
}
.close-button:hover {
background-color: _palette(accent1);
color: _palette(accent2);
background-color: var(--accent1);
color: var(--accent2);
}