180 lines
3.3 KiB
SCSS
180 lines
3.3 KiB
SCSS
* {
|
|
all: unset;
|
|
font-family: Hack;
|
|
font-weight: 900;
|
|
}
|
|
label {
|
|
color: #232629;
|
|
font-size: 32px;
|
|
}
|
|
.box {
|
|
background-color: rgba(242, 242, 243, .6);
|
|
padding: 10px;
|
|
border-radius: 25px;
|
|
border: 4px solid rgba(196, 214, 226, .6);
|
|
box-shadow: inset 0 0 2px rgba(0,0,0,0.2);
|
|
|
|
}
|
|
|
|
/* Time, Date, and Weather */
|
|
|
|
label.time {
|
|
font-size: 35px;
|
|
text-shadow: 0 0 2px rgba(0,0,0,0.3);
|
|
}
|
|
label.date {
|
|
font-size: 26px;
|
|
text-shadow: 0 0 2px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
/* status bar css */
|
|
.spacer {
|
|
margin-left: 5px;
|
|
margin-right: 5px;
|
|
border: 2px solid rgba(196, 214, 226, .6);
|
|
border-radius: 25px;
|
|
}
|
|
.system .label {
|
|
font-size: 18px;
|
|
margin-top: -35px;
|
|
}
|
|
.system .label2 {
|
|
font-size: 14px;
|
|
margin-top: -130px;
|
|
}
|
|
|
|
.system .progress {
|
|
margin-bottom: -90px;
|
|
}
|
|
.progress progress {
|
|
min-width: 8px;
|
|
border-radius: 25px;
|
|
}
|
|
.system progress {
|
|
background-color: #89b4fa;
|
|
box-shadow: 0 0 2px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.system .progress trough {
|
|
min-height: 120px;
|
|
min-width:10px;
|
|
box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
|
|
}
|
|
.progress trough {
|
|
background-color: #ffffff;
|
|
border-radius: 25px;
|
|
}
|
|
/* ----------------------------------------------- */
|
|
|
|
|
|
|
|
/* Media Player Variables */
|
|
$bg-color: rgba(242, 242, 243, .5);
|
|
$primary-neon: #89b4fa; /* Cyan */
|
|
$secondary-neon: #232629; /* Magenta */
|
|
$text-color: #232629;
|
|
$font-family: "Hack";
|
|
|
|
.music-widget {
|
|
background-color: $bg-color;
|
|
border-radius: 25px;
|
|
padding: 15px;
|
|
color: $text-color;
|
|
font-family: $font-family;
|
|
border: 5px solid rgba(196, 214, 226, .6);
|
|
box-shadow: inset 0 0 1.5px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.cover-art {
|
|
background-size: cover;
|
|
background-position: center;
|
|
min-width: 155px;
|
|
min-height: 125px;
|
|
border-radius: 25px;
|
|
margin-right: 5px;
|
|
margin-bottom: 5px;
|
|
margin-top: 5px;
|
|
padding-right:10px ;
|
|
padding-bottom: 40px;
|
|
border: 5px solid rgba(190, 190, 210, 1);
|
|
box-shadow: 0 0 3px rgba(0,0,0,0.8);
|
|
}
|
|
|
|
.music-info {
|
|
padding: 5px 0;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.song-title {
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
color: $secondary-neon;
|
|
text-shadow: 0 0 1px rgba($secondary-neon, 0.3);
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.artist {
|
|
font-size: 14px;
|
|
opacity: 0.70;
|
|
color: $primary-neon;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.controls {
|
|
margin: 8px 0;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.controls button {
|
|
background: none;
|
|
border: none;
|
|
color: $secondary-neon;
|
|
padding: 0 10px;
|
|
transition: all 0.2s ease-in-out;
|
|
text-shadow: 0 20 60px rgba($secondary-neon, 0.1);
|
|
}
|
|
|
|
.controls button:hover {
|
|
color: $primary-neon;
|
|
text-shadow: 0 0 10px rgba($secondary-neon, 1);
|
|
}
|
|
|
|
.position {
|
|
font-size: 12px;
|
|
opacity: 0.75;
|
|
color: $text-color;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.progress-bar {
|
|
margin-left: 5px;
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
|
|
.progress-bar trough {
|
|
background-color: rgba($primary-neon, 0.1);
|
|
border-radius: 25px;
|
|
min-height: 12px;
|
|
min-width: 180px;
|
|
border: 1px solid rgba($primary-neon, 0.3);
|
|
box-shadow: inset 0 0 3px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.progress-bar highlight {
|
|
background-image: linear-gradient(to right, $primary-neon, $secondary-neon);
|
|
border-radius: 25px;
|
|
box-shadow: 0 0 3px $primary-neon;
|
|
|
|
}
|
|
|
|
.cava-visualizer {
|
|
margin-left: 5px;
|
|
font-family: "monospace";
|
|
font-size: 10px;
|
|
letter-spacing: 1px;
|
|
color: $primary-neon;
|
|
text-shadow: 0 0 6px rgba($primary-neon, 0.5);
|
|
margin-top: 10px;
|
|
text-shadow: 0 0 3px $primary-neon;
|
|
}
|