radiocampus: style update

radiocampus/assets/src/styles/components.scss

@@ -0,0 +1,782 @@
+@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;
+        }
+    }
+}