189 lines
3.7 KiB
SCSS
189 lines
3.7 KiB
SCSS
.arrow {
|
|
transition: -gtk-icon-transform 0.3s ease-in-out;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.media .player {
|
|
all: unset;
|
|
border-radius: 9px;
|
|
color: #eee;
|
|
background-color: rgba(238, 238, 238, 0.06);
|
|
border: 1px solid rgba(238, 238, 238, 0.03);
|
|
margin-top: 9px;
|
|
* {
|
|
font-size: 16px;
|
|
font-family: "Ubuntu Nerd Font", sans-serif;
|
|
}
|
|
label {
|
|
color: white;
|
|
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
|
|
}
|
|
.shader {
|
|
all: unset;
|
|
box-shadow: inset 0 0 3em 1em rgba(23, 23, 23, 0.7);
|
|
* {
|
|
font-size: 16px;
|
|
font-family: "Ubuntu Nerd Font", sans-serif;
|
|
}
|
|
label {
|
|
color: white;
|
|
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
|
|
}
|
|
}
|
|
.cover {
|
|
border-radius: 7.2px;
|
|
min-height: 100px;
|
|
min-width: 100px;
|
|
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.6);
|
|
margin: 9px;
|
|
margin-bottom: 0;
|
|
.shader {
|
|
background-color: transparent;
|
|
border-radius: 6.2px;
|
|
box-shadow: inset 0 0 0 999px rgba(23, 23, 23, 0.2);
|
|
}
|
|
}
|
|
.blurred-cover, .cover {
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-radius: 8px;
|
|
}
|
|
.labels {
|
|
margin-top: 9px;
|
|
label {
|
|
font-size: 1.1em;
|
|
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
|
|
&.title {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.position-slider {
|
|
all: unset;
|
|
margin: 9px 0;
|
|
* {
|
|
font-size: 16px;
|
|
font-family: "Ubuntu Nerd Font", sans-serif;
|
|
}
|
|
* {
|
|
all: unset;
|
|
}
|
|
trough {
|
|
transition: 200ms;
|
|
border-radius: 0;
|
|
border: 1px solid rgba(238, 238, 238, 0.03);
|
|
background-color: rgba(238, 238, 238, 0.06);
|
|
min-height: 0.4em;
|
|
min-width: 0.4em;
|
|
highlight, progress {
|
|
border-radius: 0;
|
|
background-image: linear-gradient(white, white);
|
|
min-height: 0.4em;
|
|
min-width: 0.4em;
|
|
}
|
|
&:focus {
|
|
background-color: rgba(238, 238, 238, 0.154);
|
|
box-shadow: inset 0 0 0 1px #51a4e7;
|
|
}
|
|
}
|
|
slider {
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
border: 1px solid transparent;
|
|
transition: 200ms;
|
|
border-radius: 0;
|
|
min-height: 0.4em;
|
|
min-width: 0.4em;
|
|
margin: -0.5em;
|
|
}
|
|
&:hover trough {
|
|
background-color: rgba(238, 238, 238, 0.154);
|
|
}
|
|
&:disabled highlight, &:disabled progress {
|
|
background-color: rgba(238, 238, 238, 0.6);
|
|
background-image: none;
|
|
}
|
|
trough {
|
|
border: none;
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
}
|
|
.footer-box {
|
|
margin: -4.5px 9px 4.5px;
|
|
image {
|
|
-gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
|
|
}
|
|
}
|
|
.controls button {
|
|
all: unset;
|
|
label {
|
|
font-size: 2em;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
transition: 200ms;
|
|
&.shuffle, &.loop {
|
|
font-size: 1.4em;
|
|
}
|
|
}
|
|
&:hover label {
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
&:active label {
|
|
color: white;
|
|
}
|
|
}
|
|
&.spotify button .shuffle.enabled {
|
|
color: #43c383;
|
|
}
|
|
&.spotify button .loop.playlist, &.spotify button .loop.track {
|
|
color: #43c383;
|
|
}
|
|
&.spotify button:active label {
|
|
color: #43c383;
|
|
}
|
|
&.spotify .position-slider:hover trough {
|
|
background-color: rgba(67, 195, 131, 0.5);
|
|
}
|
|
&.spotify .player-icon {
|
|
color: #43c383;
|
|
}
|
|
&.firefox button .shuffle.enabled {
|
|
color: #E79E64;
|
|
}
|
|
&.firefox button .loop.playlist, &.firefox button .loop.track {
|
|
color: #E79E64;
|
|
}
|
|
&.firefox button:active label {
|
|
color: #E79E64;
|
|
}
|
|
&.firefox .position-slider:hover trough {
|
|
background-color: rgba(231, 158, 100, 0.5);
|
|
}
|
|
&.firefox .player-icon {
|
|
color: #E79E64;
|
|
}
|
|
&.mpv button .shuffle.enabled {
|
|
color: #9077e7;
|
|
}
|
|
&.mpv button .loop.playlist, &.mpv button .loop.track {
|
|
color: #9077e7;
|
|
}
|
|
&.mpv button:active label {
|
|
color: #9077e7;
|
|
}
|
|
&.mpv .position-slider:hover trough {
|
|
background-color: rgba(144, 119, 231, 0.5);
|
|
}
|
|
&.mpv .player-icon {
|
|
color: #9077e7;
|
|
}
|
|
}
|
|
.media.spotify image {
|
|
color: #43c383;
|
|
}
|
|
.media.firefox image {
|
|
color: #E79E64;
|
|
}
|
|
.media.mpv image {
|
|
color: #9077e7;
|
|
}
|
|
|