forked from rc/aircox
783 lines
17 KiB
SCSS
783 lines
17 KiB
SCSS
@use "vars" as v;
|
|
|
|
:root {
|
|
--title-1-sz: 1.4rem;
|
|
--title-2-sz: 1.3rem;
|
|
--title-3-sz: 1.1rem;
|
|
--title-4-sz: 1.0rem;
|
|
--subtitle-1-sz: 1.6rem;
|
|
--subtitle-2-sz: 1.4rem;
|
|
--subtitle-3-sz: 1.2rem;
|
|
|
|
--heading-font-family: default;
|
|
--heading-bg: var(--main-color);
|
|
--heading-fg: var(--text-color);
|
|
--heading-hg-fg: var(--text-color);
|
|
--heading-hg-bg: var(--secondary-color);
|
|
--heading-link-hv-fg: var(--link-fg);
|
|
|
|
--cover-w: 10rem;
|
|
--cover-h: 10rem;
|
|
--cover-small-w: 10rem;
|
|
--cover-small-h: 10rem;
|
|
--cover-tiny-w: 10rem;
|
|
--cover-tiny-h: 10rem;
|
|
|
|
--card-w: var(--cover-w);
|
|
--preview-bg: var(--body-bg);
|
|
--preview-title-sz: var(--title-4-sz);
|
|
--preview-subtitle-sz: var(--title-4-sz);
|
|
--preview-wide-content-sz: #{v.$text-size-2};
|
|
--preview-heading-bg-color: var(--main-color);
|
|
--header-height: var(--cover-h);
|
|
|
|
--a-carousel-p: #{v.$text-size-medium};
|
|
--a-carousel-ml: calc(#{v.$mp-4} - 0.5rem);
|
|
--a-carousel-gap: #{v.$mp-4};
|
|
--a-carousel-nav-x: -#{v.$mp-3e};
|
|
--a-carousel-bg: none; // var(--secondary-color-light);
|
|
|
|
--a-progress-bg: transparent;
|
|
--a-progress-bar-bg: var(--secondary-color);
|
|
--a-progress-bar-color: var(--text-color);
|
|
--a-progress-bar-pd: #{v.$mp-2};
|
|
|
|
--a-playlist-header-bg: var(--secondary-color);
|
|
--a-playlist-header-fg: var(--text-color);
|
|
--a-playlist-title-sz: #{v.$text-size};
|
|
--a-playlist-title-pd: #{v.$mp-3};
|
|
--a-playlist-item-border: 1px var(--secondary-color) solid;
|
|
|
|
--a-sound-bg: var(--main-color);
|
|
--a-sound-hv-bg: var(--main-color);
|
|
--a-sound-hv-fg: var(--secondary-color);
|
|
--a-sound-playing-fg: var(--secondary-color-dark);
|
|
--a-sound-text-sz: #{v.$text-size};
|
|
|
|
--a-player-url-fg: var(--text-color);
|
|
--a-player-panel-bg: var(--main-color);
|
|
--a-player-bar-height: var(--nav-primary-height);
|
|
--a-player-bar-bg: var(--main-color);
|
|
--a-player-bar-title-alone-sz: #{v.$text-size-medium};
|
|
--a-player-bar-button-fg: var(--button-fg);
|
|
--a-player-bar-button-fg: var(--button-bg);
|
|
--a-player-bar-button-hv-fg: var(--button-hv-fg);
|
|
--a-player-bar-button-hv-bg: var(--button-hv-bg);
|
|
|
|
--button-fg: var(--text-color);
|
|
--button-bg: var(--main-color);
|
|
--button-sec-bg: var(--main-color-light);
|
|
--button-hv-fg: var(--text-color);
|
|
--button-hv-bg: var(--secondary-color-light);
|
|
--button-active-fg: var(--text-color);
|
|
--button-active-bg: var(--secondary-color);
|
|
}
|
|
|
|
|
|
@media screen and (max-width: v.$screen-wide) {
|
|
:root {
|
|
--cover-w: 10rem;
|
|
--cover-h: 10rem;
|
|
--cover-small-w: 6rem;
|
|
--cover-small-h: 6rem;
|
|
--cover-tiny-w: 4rem;
|
|
--cover-tiny-h: 4rem;
|
|
|
|
--section-content-sz: 1rem;
|
|
|
|
// --preview-title-sz: #{v.$text-size};
|
|
// --preview-subtitle-sz: #{v.$text-size-smaller};
|
|
// --preview-wide-content-sz: #{v.$text-size};
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: v.$screen-wide) {
|
|
:root {
|
|
--cover-w: 8rem;
|
|
--cover-h: 8rem;
|
|
--cover-small-w: 4rem;
|
|
--cover-small-h: 4rem;
|
|
--cover-tiny-w: 2rem;
|
|
--cover-tiny-h: 2rem;
|
|
|
|
--section-content-sz: 1rem;
|
|
|
|
// --preview-title-sz: #{v.$text-size};
|
|
// --preview-subtitle-sz: #{v.$text-size-smaller};
|
|
// --preview-wide-content-sz: #{v.$text-size};
|
|
}
|
|
}
|
|
|
|
// ---- headings
|
|
|
|
.no-reset h1 { font-size: var(--title-1-sz); }
|
|
.no-reset h2 { font-size: var(--title-2-sz); }
|
|
.no-reset h3 { font-size: var(--title-3-sz); }
|
|
.no-reset h3 { font-size: var(--title-3-sz); }
|
|
.no-reset h4 { font-size: var(--title-4-sz); }
|
|
.no-reset h5 { font-size: var(--title-5-sz); }
|
|
|
|
.title, .header.preview .title {
|
|
&.is-1 { font-size: var(--title-1-sz); }
|
|
&.is-2 { font-size: var(--title-2-sz); }
|
|
&.is-3 { font-size: var(--title-3-sz); }
|
|
}
|
|
|
|
.subtitle, .header.preview .subtitle {
|
|
color: var(--text-color-light);
|
|
|
|
&.is-1 { font-size: var(--subtitle-1-sz); }
|
|
&.is-2 { font-size: var(--subtitle-2-sz); }
|
|
&.is-3 { font-size: var(--subtitle-3-sz); }
|
|
}
|
|
|
|
.title + .subtitle {
|
|
padding-top: 0em !important;
|
|
}
|
|
|
|
.headings a, a.heading, a.subtitle {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.heading {
|
|
display: inline-block;
|
|
|
|
&:not(:empty) {
|
|
// border-bottom: 1px var(--heading-bg) solid;
|
|
// color: var(--heading-fg);
|
|
//padding: v.$mp-2;
|
|
margin-top: 0em !important;
|
|
vertical-align: top;
|
|
|
|
&.highlight, &.active,
|
|
.preview.active &,
|
|
{
|
|
// border-color: var(--heading-hg-bg);
|
|
color: var(--heading-hg-fg);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// ---- bulma overrides
|
|
.modal-card {
|
|
max-width: v.$screen-wide;
|
|
}
|
|
.modal-card {
|
|
max-height: calc(100% - 10rem);
|
|
}
|
|
|
|
// ---- button
|
|
@mixin button {
|
|
.button, a.button, button.button {
|
|
font-size: v.$text-size;
|
|
display: inline-block;
|
|
padding: v.$mp-2e;
|
|
border: none;
|
|
justify-content: center;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
|
|
color: var(--button-fg);
|
|
background-color: var(--button-bg);
|
|
|
|
&.square { min-width: 2.5em; }
|
|
&.secondary { background-color: var(--button-sec-bg); }
|
|
|
|
.label, label {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.icon {
|
|
vertical-align: middle;
|
|
&:not(:only-child) {
|
|
&:first-child { margin: 0 v.$mp-3e 0 v.$mp-1e; }
|
|
&:last-child { margin: 0 v.$mp-3e 0 v.$mp-1e; }
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--button-hv-fg);
|
|
background-color: var(--button-hv-bg);
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
&.active:not(:hover) {
|
|
color: var(--button-active-fg);
|
|
background-color: var(--button-active-bg);
|
|
}
|
|
|
|
&:not([disabled]), &:not(.disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&[disabled], &.disabled {
|
|
background-color: var(--text-color-light);
|
|
color: var(--secondary-color);
|
|
border-color: var(--secondary-color-light);
|
|
}
|
|
|
|
.dropdown-trigger {
|
|
border-radius: 1.5em;
|
|
}
|
|
}
|
|
|
|
|
|
.button-group, .nav {
|
|
.button {
|
|
border-radius: 0px;
|
|
background-color: transparent;
|
|
border-top: 0px;
|
|
border-bottom: 0px;
|
|
height: 100%;
|
|
|
|
&:not(:first-child) { border-left: 0px; }
|
|
&:last-child { border-right: 0px; }
|
|
}
|
|
}
|
|
|
|
.button-group + .button-group {
|
|
border-left: 1px solid var(--text-color-light);
|
|
}
|
|
}
|
|
|
|
|
|
// ---- preview
|
|
.preview {
|
|
position: relative;
|
|
background-size: cover;
|
|
background-color: var(--preview-bg) !important;
|
|
|
|
&.preview-item {
|
|
width: 100%;
|
|
}
|
|
|
|
// FIXME: remove
|
|
&.columns, .headings.columns {
|
|
margin-left: 0em;
|
|
margin-right: 0em;
|
|
.column { padding: 0em; }
|
|
}
|
|
|
|
.title, .title:not(:last-child) {
|
|
// second is bulma reset
|
|
font-weight: v.$weight-bold;
|
|
font-size: var(--preview-title-sz);
|
|
margin-bottom: unset;
|
|
}
|
|
.subtitle {
|
|
font-weight: v.$weight-bolder;
|
|
font-size: var(--preview-subtitle-sz);
|
|
margin-bottom: unset;
|
|
}
|
|
//.content, .actions {
|
|
// font-size: v.$text-size-bigger;
|
|
//}
|
|
|
|
.headings {
|
|
background-size: cover;
|
|
|
|
> * { margin: 0em; }
|
|
.column { padding: 0em; }
|
|
|
|
a { color: var(--text-color); }
|
|
a:hover { color: var(--heading-link-hv-fg) !important; }
|
|
}
|
|
|
|
&.tiny {
|
|
.title { font-size: calc(var(--preview-title-sz) * 0.8); }
|
|
.subtitle { font-size: calc(var(--preview-subtitle-sz) * 0.8); }
|
|
.content {
|
|
font-size: v.$text-size;
|
|
max-height: 3rem;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.preview-cover {
|
|
background: var(--preview-bg);
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
height: var(--cover-h);
|
|
max-width: calc( var(--cover-w) * 1.5 );
|
|
min-width: var(--cover-w);
|
|
overflow: hidden;
|
|
border: 1px #c4c4c4 solid;
|
|
|
|
img {
|
|
height: var(--cover-h);
|
|
max-width: calc( var(--cover-w) * 1.5 );
|
|
min-width: var(--cover-w);
|
|
}
|
|
img.hide { visibility: hidden; }
|
|
|
|
|
|
&.small, .preview.small & {
|
|
min-width: unset;
|
|
height: var(--cover-small-h);
|
|
width: var(--cover-small-w) !important;
|
|
min-width: var(--cover-small-w);
|
|
}
|
|
|
|
&.tiny, .preview.tiny & {
|
|
min-width: unset;
|
|
height: var(--cover-tiny-h);
|
|
width: var(--cover-tiny-w) !important;
|
|
min-width: var(--cover-tiny-w);
|
|
}
|
|
}
|
|
|
|
.preview-header {
|
|
// width: 100%;
|
|
|
|
/*&:not(.no-cover) {
|
|
min-height: var(--header-height);
|
|
}*/
|
|
|
|
&.no-cover {
|
|
height: unset;
|
|
}
|
|
|
|
.headings {
|
|
padding-top: v.$mp-6;
|
|
}
|
|
|
|
.headings, > .container {
|
|
width: 100%;
|
|
}
|
|
|
|
> .container, {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
// ---- list
|
|
.list-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
// padding: v.$mp-3;
|
|
|
|
.headings {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 0em;
|
|
margin-bottom: v.$mp-2 !important;
|
|
|
|
.heading {
|
|
// background-color: var(--preview-heading-bg-color);
|
|
padding: 0rem;
|
|
}
|
|
|
|
}
|
|
|
|
.title { flex-grow: 1; }
|
|
.subtitle {
|
|
font-size: var(--preview-title-sz);
|
|
// background-color: var(--preview-heading-bg-color);
|
|
text-align: right;
|
|
|
|
&:not(:empty) { min-width: 9rem; }
|
|
}
|
|
|
|
.media-content {
|
|
height: 100%;
|
|
margin-bottom: unset;
|
|
|
|
.list-item:not(.no-cover) & {
|
|
min-height: var(--cover-small-h);
|
|
}
|
|
}
|
|
|
|
.actions {
|
|
text-align: right;
|
|
align-items: center;
|
|
}
|
|
|
|
&:not(.wide) .media {
|
|
padding: v.$mp-3;
|
|
// border-radius: v.$mp-2;
|
|
border: 1px solid var(--break-color) !important;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: v.$screen-very-small) {
|
|
.list-item .headings {
|
|
flex-direction: column;
|
|
|
|
.heading {
|
|
display: inline;
|
|
text-align: left;
|
|
}
|
|
|
|
.subtitle {
|
|
color: unset !important;
|
|
background: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// ---- wide
|
|
.list-item.wide {
|
|
& .preview-cover {
|
|
box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
|
|
}
|
|
|
|
& .content {
|
|
font-size: var(--preview-wide-content-sz);
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
|
|
// ---- card
|
|
.preview-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: var(--card-w);
|
|
padding: 0rem !important;
|
|
margin-bottom: auto;
|
|
|
|
background-color: var(--preview-bg) !important;
|
|
transition: box-shadow 0.2s;
|
|
|
|
&:hover {
|
|
figure {
|
|
// box-shadow: 0em 0em 1.2em rgba(0, 0, 0, 0.4) !important;
|
|
box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
|
|
}
|
|
|
|
a {
|
|
color: var(--heading-link-hv-fg);
|
|
}
|
|
}
|
|
|
|
.headings {
|
|
margin-top: v.$mp-2;
|
|
|
|
.heading {
|
|
display: block !important;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: v.$text-size-2;
|
|
}
|
|
}
|
|
|
|
.card-content {
|
|
flex-grow: 1;
|
|
position: relative;
|
|
|
|
figure {
|
|
// box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.2);
|
|
height: var(--cover-h);
|
|
width: var(--cover-w);
|
|
}
|
|
|
|
.actions {
|
|
position: absolute;
|
|
padding: v.$mp-2;
|
|
bottom: 0rem;
|
|
right: 0rem;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
// ---- ---- Carousel
|
|
.a-carousel {
|
|
.a-carousel-viewport {
|
|
box-shadow: inset 0em 0em 20rem var(--a-carousel-bg);
|
|
// background-color: var(--a-carousel-bg);
|
|
padding: 0rem;
|
|
padding-top: var(--a-carousel-p);
|
|
margin-top: calc( 0rem - var(--a-carousel-p) );
|
|
}
|
|
}
|
|
|
|
.a-carousel-container {
|
|
width: 100%;
|
|
gap: var(--a-carousel-gap);
|
|
transition: margin-left 1s;
|
|
|
|
> * {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
.a-carousel-bullets-container {
|
|
// due to a-carousel margin-left
|
|
padding-left: var(--a-carousel-ml);
|
|
|
|
.bullet {
|
|
margin: v.$mp-1;
|
|
cursor: pointer;
|
|
|
|
&:hover { color: var(--link-fg); }
|
|
}
|
|
}
|
|
|
|
|
|
// ---- ---- progress bar
|
|
.a-progress {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 0em;
|
|
padding: 0em;
|
|
|
|
&:hover {
|
|
background-color: var(--a-progress-bg);
|
|
}
|
|
|
|
.a-progress-bar-container {
|
|
flex-grow: 1;
|
|
margin: 0em;
|
|
}
|
|
|
|
> time, .a-progress-bar {
|
|
height: 100%;
|
|
padding: var(--a-progress-bar-pd);
|
|
}
|
|
|
|
.a-progress-bar {
|
|
background-color: var(--a-progress-bar-bg);
|
|
color: var(--a-progress-bar-color)
|
|
}
|
|
}
|
|
|
|
|
|
// ---- ---- player
|
|
// ---- playlist
|
|
.playlist, .a-playlist {
|
|
.header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
.title, .button {
|
|
background-color: var(--a-playlist-header-bg);
|
|
color: var(--a-playlist-header-fg);
|
|
}
|
|
|
|
.title {
|
|
font-size: var(--a-playlist-title-sz);
|
|
margin: 0;
|
|
padding: var(--a-playlist-title-pd);
|
|
}
|
|
}
|
|
|
|
li {
|
|
list-style: none;
|
|
border-bottom: var(--a-playlist-item-border);
|
|
|
|
&:last-child {
|
|
border-bottom: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---- sound item
|
|
.a-sound-item {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
|
|
height: 3rem;
|
|
background-color: var(--a-sound-bg);
|
|
|
|
&.playing .label {
|
|
color: var(--a-sound-playing-fg) !important;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--a-sound-hv-bg);
|
|
|
|
.label {
|
|
color: var(--a-sound-hv-fg) !important;
|
|
}
|
|
}
|
|
|
|
.label:hover::before, &.playing .label::before {
|
|
content: "\f04b";
|
|
font-family: "Font Awesome 6 Free";
|
|
margin-right: v.$mp-3e;
|
|
}
|
|
&.playing .label:hover::before {
|
|
content: '';
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
.headings > * {
|
|
}
|
|
|
|
.label {
|
|
cursor: pointer;
|
|
|
|
.icon {
|
|
padding: 0em v.$mp-3;
|
|
}
|
|
|
|
margin: 0em !important;
|
|
padding: v.$mp-3e;
|
|
font-size: var(--a-sound-text-sz);
|
|
font-family: var(--heading-font-family);
|
|
}
|
|
|
|
.button {
|
|
width: 3em;
|
|
font-size: var(--a-sound-text-sz);
|
|
|
|
&:hover {
|
|
color: var(--a-sound-hv-fg) !important;
|
|
background-color: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// ---- player
|
|
.player-container {
|
|
z-index: 1000000;
|
|
}
|
|
|
|
.a-player {
|
|
box-shadow: 0em -0.5em 0.5em rgba(0, 0, 0, 0.05);
|
|
|
|
a { color: var(--a-player-url-fg); }
|
|
.button {
|
|
color: var(--text-black);
|
|
&:hover { color: var(--button-fg); }
|
|
}
|
|
}
|
|
|
|
.a-player-panels {
|
|
background: var(--a-player-panel-bg);
|
|
height: 0%;
|
|
transition: height 1s;
|
|
}
|
|
.a-player-panels.is-open {
|
|
height: auto;
|
|
}
|
|
|
|
.a-player-panel {
|
|
padding-bottom: v.$mp-3;
|
|
max-height: 80%;
|
|
overflow-y: auto;
|
|
|
|
.a-sound-item:not(:hover) {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.a-player-progress {
|
|
height: 0.4em;
|
|
overflow: hidden;
|
|
|
|
time { display: none; }
|
|
|
|
&:hover, .a-player-panels.is-open + & {
|
|
background: var(--a-player-bar-bg);
|
|
height: 2em;
|
|
time { display: unset; }
|
|
}
|
|
}
|
|
|
|
.a-player-bar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
height: var(--a-player-bar-height);
|
|
|
|
border-top: 1px v.$grey-light solid;
|
|
background: var(--a-player-bar-bg);
|
|
|
|
> * { height: 100%; }
|
|
|
|
.cover { height: 100%; }
|
|
.title {
|
|
font-size: v.$text-size;
|
|
margin: 0em;
|
|
|
|
&:last-child {
|
|
font-size: var(--a-player-bar-title-alone-sz);
|
|
}
|
|
}
|
|
|
|
.button {
|
|
font-size: v.$text-size-medium;
|
|
height: 100%;
|
|
padding: v.$mp-2 !important;
|
|
min-width: calc(var(--a-player-bar-height) + v.$mp-2 * 2);
|
|
border-radius: 0px;
|
|
|
|
&.open {
|
|
background-color: var(--button-active-bg);
|
|
color: var(--button-active-fg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.a-player-bar-content {
|
|
display: flex;
|
|
flex-direction: vertical;
|
|
align-items: center;
|
|
flex-grow: 1;
|
|
padding: 0 v.$mp-3;
|
|
border-right: 1px black solid;
|
|
|
|
.title {
|
|
max-height: calc( var(--a-player-bar-height) - v.$mp-3 );
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
|
|
/// ---- playlist editor
|
|
.a-tracklist-editor {
|
|
.dropdown {
|
|
display: unset !important;
|
|
}
|
|
}
|
|
|
|
/// ----------------
|
|
.a-select-file {
|
|
> *:not(:last-child) {
|
|
margin-bottom: v.$mp-3;
|
|
}
|
|
|
|
.upload-preview {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.a-select-file-list {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
gap: v.$mp-3;
|
|
}
|
|
|
|
.file-preview {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
|
|
&:hover {
|
|
box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
|
|
}
|
|
|
|
&.active {
|
|
box-shadow: 0em 0em 1em rgba(0,0,0,0.4);
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
max-height: 10rem;
|
|
}
|
|
}
|
|
}
|