Files
nutty-tools/now-playing/themes/simple/style.css
T
nutty 1e423ee2fe • Removed all references to 'SetAlbumArtSize()'
• Added progress info to Simple theme
2026-07-01 05:04:28 +10:00

109 lines
2.0 KiB
CSS

:root {
--border-radius: 10px;
}
#main-wrapper {
width: 500px;
display: flex;
flex-direction: row;
align-items: stretch;
opacity: 0;
}
#yet-another-wrapper-yup {
position: relative;
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.75em;
transition: all 0.25s ease-in-out;
}
#album-art-container {
/* 1. Tell it to maintain a 1:1 square ratio */
height: 150%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--border-radius);
position: relative;
background-size: cover;
background-position: center;
display: var(--show-album-art);
flex-shrink: 0;
}
#album-art-layer,
#album-art-transition-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: opacity 0.5s ease;
}
#album-art-layer {
z-index: 1;
transition: all 0.5s ease;
}
#album-art-transition-layer {
z-index: 0;
}
#song-info-container {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
flex-grow: 1;
min-width: 0;
}
#background-transition-layer {
z-index: 0;
}
/* The content sits on top */
#song-info-wrapper {
position: relative; /* Keeps it in the document flow */
z-index: 2; /* Sits above the background-layer */
padding: 1em 1.75em;
display: flex;
flex-direction: column;
gap: 0.3em;
}
#track-label {
font-size: 1em;
font-weight: 600;
text-align: var(--text-alignment);
}
#artist-label {
font-size: 0.8em;
font-weight: 400;
opacity: 0.6;
text-align: var(--text-alignment);
}
#progress-container {
font-size: 0.6em;
font-weight: 400;
opacity: 0.6;
text-align: var(--text-alignment);
margin-top: 0.5em;
}
.text-label {
white-space: nowrap;
overflow: hidden;
mask-image: var(--trailing-fade);
-webkit-mask-image: var(--trailing-fade);
transition: opacity 0.25s ease-in-out;
}