88 lines
1.6 KiB
SCSS
88 lines
1.6 KiB
SCSS
// Styling for the now-playing and idle-gallery weather-overlay widgets. Installed
|
|
// to /home/<KIOSK_USERNAME>/.config/eww/eww.scss by build-thin-client-iso.sh.
|
|
//
|
|
// eww compiles SCSS itself (bundled grass), so nothing on the image needs a Sass
|
|
// toolchain. eww.scss rather than eww.css because every eww release supports the
|
|
// former, while plain eww.css is only honoured by newer builds.
|
|
|
|
$bg: rgba(16, 16, 20, 0.88);
|
|
$fg: #e8e8ec;
|
|
$muted: #9a9aa6;
|
|
|
|
.np-root {
|
|
background-color: $bg;
|
|
border-radius: 12px;
|
|
padding: 12px;
|
|
color: $fg;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.np-art {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.np-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: $fg;
|
|
}
|
|
|
|
.np-artist {
|
|
font-size: 13px;
|
|
color: $muted;
|
|
}
|
|
|
|
.np-controls {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.np-btn {
|
|
font-size: 20px;
|
|
color: $fg;
|
|
background-color: transparent;
|
|
border: none;
|
|
padding: 4px 8px;
|
|
|
|
&:hover {
|
|
background-color: rgba(255, 255, 255, 0.10);
|
|
border-radius: 6px;
|
|
}
|
|
}
|
|
|
|
// Idle-gallery weather/clock overlay. Text-shadow rather than a background card —
|
|
// a solid panel over someone's photo would fight the point of a photo slideshow, so
|
|
// this reads like on-screen text (photo-frame convention) instead of a floating box.
|
|
.wo-root {
|
|
color: $fg;
|
|
font-family: sans-serif;
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.wo-time {
|
|
font-size: 46px;
|
|
font-weight: 700;
|
|
color: $fg;
|
|
}
|
|
|
|
.wo-date {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: $muted;
|
|
}
|
|
|
|
.wo-weather {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.wo-location,
|
|
.wo-temp,
|
|
.wo-condition {
|
|
font-size: 15px;
|
|
color: $fg;
|
|
}
|
|
|
|
.wo-sep {
|
|
font-size: 15px;
|
|
color: $muted;
|
|
}
|