hq/setto.basspistol.com
hq/setto.basspistol.com
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

make color variables selectable in cloudcannon

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

56
_sass/_player.scss
View file

@ -32,7 +32,7 @@ audio {
list-style: none;
padding: 0;
li {
border-top: solid 1px _palette(fg-alt);
border-top: solid 1px var(--fg-alt);
}
li:first-child {
@ -40,13 +40,13 @@ audio {
}
li:last-child {
border-radius: 0 0 5px 5px;
border-bottom: solid 1px _palette(fg-alt);
border-bottom: solid 1px var(--fg-alt);
}
}
}
#audiowrap {
background-color: _palette(bg);
background-color: var(--bg);
margin: 0 auto 0 auto;
}
@ -71,7 +71,7 @@ audio {
flex-wrap: unset;
justify-content: flex-start;
align-items: center;
background-color: _palette(bg);
background-color: var(--bg);
}
@ -94,19 +94,19 @@ audio {
}
#plList li {
background-color: _palette(bg);
background-color: var(--bg);
cursor: pointer;
margin: 0;
padding: 21px 0;
border-left: 1px solid _palette(fg-alt);
border-right: 1px solid _palette(fg-alt);
border-left: 1px solid var(--fg-alt);
border-right: 1px solid var(--fg-alt);
border-top: 0;
transition: all 400ms ease-in-out;
}
#plList li:hover {
background-color: _palette(accent1);
color: _palette(bg);
background-color: var(--accent1);
color: var(--bg);
transition: all 400ms ease-in-out;
}
@ -139,17 +139,17 @@ audio {
}
.plSel {
background-color: _palette(fg-alt)!important;
background-color: var(--fg-alt)!important;
cursor: pointer!important;
}
.plSel:hover {
background-color: _palette(accent1)!important;
background-color: var(--accent1)!important;
}
a[id^="btn"] {
font-size: 1.5em;
color: _palette(fg);
color: var(--fg);
cursor: pointer;
margin: 0;
padding: 0 27px 0 21px;
@ -206,18 +206,18 @@ a[id^="btn"]::-moz-focus-inner {
flex-wrap: wrap;
margin:0;
padding:0;
background-color: _palette(accent1);
background-color: var(--accent1);
margin: 0;
padding: 0;
min-height: 50vw;
text-align: left;
.button {
background-color: _palette(accent1);
color: _palette(bg);
background-color: var(--accent1);
color: var(--bg);
}
.button:hover {
background-color: _palette(accent2);
color: _palette(fg);
background-color: var(--accent2);
color: var(--fg);
}
> div {
flex: 1 1 auto;
@ -225,10 +225,10 @@ a[id^="btn"]::-moz-focus-inner {
min-width: 280px;
margin: 0;
padding: 0;
background-color: _palette(bg);
-webkit-box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
-moz-box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
box-shadow: inset 0px 23px 25px -25px _palette(border-alt);
background-color: var(--bg);
-webkit-box-shadow: inset 0px 23px 25px -25px var(--border-alt);
-moz-box-shadow: inset 0px 23px 25px -25px var(--border-alt);
box-shadow: inset 0px 23px 25px -25px var(--border-alt);
> h2, p {
text-align: left;
@ -252,15 +252,15 @@ a[id^="btn"]::-moz-focus-inner {
.track-picker:nth-child(even) {
flex-direction: row-reverse;
background-color: _palette(accent2);
background-color: var(--accent2);
text-align: right;
.button {
background-color: _palette(accent2);
color: _palette(fg);
background-color: var(--accent2);
color: var(--fg);
}
.button:hover{
background-color: _palette(accent1);
color: _palette(bg);
background-color: var(--accent1);
color: var(--bg);
}
> div {
> h2, a, p {
@ -271,7 +271,7 @@ a[id^="btn"]::-moz-focus-inner {
}
#fixedPlayer {
background-color: _palette(bg);
background-color: var(--bg);
margin: 0;
padding:0;
position: fixed;
@ -316,7 +316,7 @@ a[id^="btn"]::-moz-focus-inner {
}
a[id^="btn"] {
font-size: 1em;
color: _palette(fg);
color: var(--fg);
cursor: pointer;
margin: 0;
padding: 0 0 0 20px;