forked from rc/aircox
radiocampus: style update
This commit is contained in:
1
radiocampus/assets/src/styles/*
Symbolic link
1
radiocampus/assets/src/styles/*
Symbolic link
@ -0,0 +1 @@
|
||||
../../../../assets/src/styles/*
|
||||
101
radiocampus/assets/src/styles/admin.scss
Normal file
101
radiocampus/assets/src/styles/admin.scss
Normal file
@ -0,0 +1,101 @@
|
||||
@use "./vars";
|
||||
@use "./components";
|
||||
|
||||
@import "bulma/sass/utilities/_all.sass";
|
||||
@import "bulma/sass/elements/button";
|
||||
@import "bulma/sass/components/navbar";
|
||||
|
||||
|
||||
// enforce button usage inside custom application
|
||||
#player, .ax {
|
||||
@include components.button;
|
||||
}
|
||||
|
||||
|
||||
.admin {
|
||||
.navbar.has-shadow, .navbar.is-fixed-bottom.has-shadow {
|
||||
box-shadow: 0em 0em 1em rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
a.navbar-item.is-active {
|
||||
border-bottom: 1px grey solid;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
& + .container {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.navbar-dropdown {
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.navbar-split {
|
||||
margin: 0.2em 0em;
|
||||
margin-right: 1em;
|
||||
padding-right: 1em;
|
||||
border-right: 1px vars.$grey-light solid;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0em;
|
||||
padding: 0em;
|
||||
}
|
||||
|
||||
&.toolbar {
|
||||
margin: 1em 0em;
|
||||
background-color: transparent;
|
||||
margin-bottom: 1em;
|
||||
|
||||
.title {
|
||||
padding-right: 2em;
|
||||
margin-right: 1em;
|
||||
border-right: 1px vars.$grey-light solid;
|
||||
|
||||
font-size: vars.$text-size;
|
||||
font-weight: vars.$weight-light;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-dropdown {
|
||||
max-height: 40rem;
|
||||
overflow-y: auto;
|
||||
|
||||
input {
|
||||
z-index: 10000;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navbar .navbar-brand {
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.navbar .navbar-brand img {
|
||||
margin: 0em 0.4em;
|
||||
margin-top: 0.3em;
|
||||
max-height: 3em;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.results > #result_list {
|
||||
width: 100%;
|
||||
margin: 1em 0em;
|
||||
}
|
||||
|
||||
|
||||
ul.menu-list li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.submit-row a.deletelink {
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
98
radiocampus/assets/src/styles/common.scss
Normal file
98
radiocampus/assets/src/styles/common.scss
Normal file
@ -0,0 +1,98 @@
|
||||
@use "./vars" as v;
|
||||
@import "./vendor";
|
||||
@import "./helpers";
|
||||
|
||||
//-- helpers/modifiers
|
||||
//-- forms
|
||||
input.half-field:not(:active):not(:hover) {
|
||||
border: none;
|
||||
background-color: rgba(0,0,0,0);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
//-- general
|
||||
:root {
|
||||
--body-bg: #fff;
|
||||
--text-color: black;
|
||||
--text-color-light: #555;
|
||||
--break-color: rgb(225, 225, 225, 0.8);
|
||||
|
||||
--main-color: #EFCA08;
|
||||
--main-color-light: #F4da51;
|
||||
--main-color-dark: #F49F0A;
|
||||
--secondary-color: #00A6A6;
|
||||
--secondary-color-light: #4cc0c0;
|
||||
--secondary-color-dark: #007ba8;
|
||||
|
||||
--disabled-color: #aaa;
|
||||
--disabled-bg: #eee;
|
||||
--link-fg: #00A6A6;
|
||||
--link-hv-fg: var(--text-color);
|
||||
|
||||
--nav-primary-height: 3rem;
|
||||
--nav-secondary-height: 2.5rem;
|
||||
--nav-fg: var(--text-color);
|
||||
--nav-bg: var(--main-color);
|
||||
--nav-secondary-bg: var(--main-color-light);
|
||||
--nav-hv-fg: var(--button-hv-fg);
|
||||
--nav-hv-bg: var(--button-hv-bg);
|
||||
--nav-active-fg: var(--button-active-fg);
|
||||
--nav-active-bg: var(--button-active-bg);
|
||||
--nav-fs: 1rem;
|
||||
--nav-2-fs: 0.9rem;
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--body-bg);
|
||||
}
|
||||
|
||||
|
||||
@mixin mobile-small {
|
||||
.grid { @include grid-1; }
|
||||
}
|
||||
|
||||
|
||||
body.mobile {
|
||||
@include mobile-small;
|
||||
}
|
||||
|
||||
@media screen and (max-width: v.$screen-smaller) {
|
||||
@include mobile-small;
|
||||
}
|
||||
|
||||
@media screen and (max-width: v.$screen-normal) {
|
||||
html { font-size: 16px !important; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: v.$screen-wider) {
|
||||
html { font-size: 20px !important; }
|
||||
}
|
||||
|
||||
@media screen and (min-width: v.$screen-wider) {
|
||||
html { font-size: 20px !important; }
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
font-family: var(--heading-font-family);
|
||||
}
|
||||
|
||||
|
||||
.container:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-cover {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.modal .dropdown-menu {
|
||||
z-index: 50,
|
||||
}
|
||||
782
radiocampus/assets/src/styles/components.scss
Normal file
782
radiocampus/assets/src/styles/components.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
165
radiocampus/assets/src/styles/helpers.scss
Normal file
165
radiocampus/assets/src/styles/helpers.scss
Normal file
@ -0,0 +1,165 @@
|
||||
@use "./vars" as v;
|
||||
|
||||
// ---- text
|
||||
.text-light { font-weight: 400; color: var(--text-color-light); }
|
||||
|
||||
.bigger { font-size: v.$text-size-bigger !important; }
|
||||
.big { font-size: v.$text-size-big !important; }
|
||||
.smaller { font-size: v.$text-size-smaller !important; }
|
||||
.small { font-size: v.$text-size-small !important; }
|
||||
|
||||
// ---- layout
|
||||
.align-left {
|
||||
text-align: left;
|
||||
justify-content: left;
|
||||
|
||||
&.x { padding-left: 0px !important; }
|
||||
}
|
||||
.align-right {
|
||||
text-align: right;
|
||||
justify-content: right;
|
||||
|
||||
&.x { padding-right: 0px !important; }
|
||||
}
|
||||
.align-center {
|
||||
text-align: center !important;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.clear-left { clear: left !important }
|
||||
.clear-right { clear: right !important }
|
||||
.clear-both { clear: both !important }
|
||||
.clear-unset { clear: unset !important }
|
||||
|
||||
.d-inline { display: inline !important; }
|
||||
.d-block { display: block !important; }
|
||||
.d-inline-block { display: inline-block !important; }
|
||||
|
||||
.p-relative { position: relative !important }
|
||||
.p-absolute { position: absolute !important }
|
||||
.p-fixed { position: fixed !important }
|
||||
.p-sticky { position: sticky !important }
|
||||
.p-static { position: static !important }
|
||||
|
||||
.ws-nowrap { white-space: nowrap; }
|
||||
|
||||
|
||||
.height-1 { height: 1em; }
|
||||
.height-2 { height: 2em; }
|
||||
.height-3 { height: 3em; }
|
||||
.height-4 { height: 4em; }
|
||||
.height-5 { height: 5em; }
|
||||
.height-6 { height: 6em; }
|
||||
.height-7 { height: 7em; }
|
||||
.height-8 { height: 8em; }
|
||||
.height-9 { height: 9em; }
|
||||
.height-10 { height: 10em; }
|
||||
.height-15 { height: 15em; }
|
||||
.height-20 { height: 20em; }
|
||||
.height-25 { height: 25em; }
|
||||
|
||||
// ---- grid / flex
|
||||
|
||||
.gap-1 { gap: v.$mp-1 !important; }
|
||||
.gap-2 { gap: v.$mp-2 !important; }
|
||||
.gap-3 { gap: v.$mp-3 !important; }
|
||||
.gap-4 { gap: v.$mp-4 !important; }
|
||||
.gap-5 { gap: v.$mp-5 !important; }
|
||||
|
||||
|
||||
// ---- ---- grid
|
||||
@mixin grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-auto-flow: dense;
|
||||
gap: v.$mp-4;
|
||||
}
|
||||
@mixin grid-1 { grid-template-columns: 1fr; }
|
||||
@mixin grid-2 { grid-template-columns: 1fr 1fr; }
|
||||
@mixin grid-3 { grid-template-columns: 1fr 1fr 1fr; }
|
||||
|
||||
.grid { @include grid; }
|
||||
.grid-1 { @include grid; @include grid-1; }
|
||||
.grid-2 { @include grid; @include grid-2; }
|
||||
.grid-3 { @include grid; @include grid-3; }
|
||||
|
||||
// ---- ---- flex
|
||||
.flex-row { display: flex; flex-direction: row }
|
||||
.flex-column { display: flex; flex-direction: column }
|
||||
.flex-grow-0 { flex-grow: 0 !important; }
|
||||
.flex-grow-1 { flex-grow: 1 !important; }
|
||||
.flex-grow-2 { flex-grow: 2 !important; }
|
||||
.flex-grow-3 { flex-grow: 3 !important; }
|
||||
.flex-grow-4 { flex-grow: 4 !important; }
|
||||
.flex-grow-5 { flex-grow: 5 !important; }
|
||||
.flex-grow-6 { flex-grow: 6 !important; }
|
||||
|
||||
.float-right { float: right }
|
||||
.float-left { float: left }
|
||||
|
||||
// ---- boxing
|
||||
.is-fullwidth { width: 100%; }
|
||||
.is-fullheight { height: 100%; }
|
||||
.is-fixed-bottom {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
margin-bottom: 0px;
|
||||
border-radius: 0;
|
||||
}
|
||||
.no-border { border: 0px !important; }
|
||||
|
||||
.overflow-hidden { overflow: hidden }
|
||||
.overflow-hidden.is-fullwidth { max-width: 100%; }
|
||||
|
||||
.height-full { height: 100%; }
|
||||
|
||||
*[draggable="true"] {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
|
||||
// ---- animations
|
||||
@keyframes blink {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0.4; }
|
||||
}
|
||||
|
||||
.blink { animation: 1s ease-in-out 3s infinite alternate blink; }
|
||||
.loading { animation: 1s ease-in-out 1s infinite alternate blink; }
|
||||
|
||||
|
||||
// -- colors
|
||||
.main-color { color: var(--main-color); }
|
||||
.secondary-color { color: var(--secondary-color); }
|
||||
|
||||
.bg-main { background-color: var(--main-color); }
|
||||
.bg-main-light { background-color: var(--main-color-light); }
|
||||
.bg-secondary { background-color: var(--secondary-color); }
|
||||
.bg-secondary-light { background-color: var(--secondary-color-light); }
|
||||
.bg-transparent { background-color: transparent; }
|
||||
|
||||
.border { border: 1px solid var(--text-color); }
|
||||
.border-main { border: 1px solid var(--main-color); }
|
||||
.border-secondary { border: 1px solid var(--secondary-color); }
|
||||
.border-bottom-main { border-bottom: 1px solid var(--main-color); }
|
||||
.border-bottom-secondary { border-bottom: 1px solid var(--secondary-color); }
|
||||
|
||||
.is-success {
|
||||
background-color: v.$green !important;
|
||||
border-color: v.$green-dark !important;
|
||||
}
|
||||
.is-danger {
|
||||
background-color: v.$red !important;
|
||||
border-color: v.$red-dark !important;
|
||||
}
|
||||
|
||||
|
||||
.box-shadow {
|
||||
&:hover {
|
||||
box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
&.active {
|
||||
box-shadow: 0em 0em 1em rgba(0,0,0,0.4);
|
||||
}
|
||||
}
|
||||
478
radiocampus/assets/src/styles/public.scss
Normal file
478
radiocampus/assets/src/styles/public.scss
Normal file
@ -0,0 +1,478 @@
|
||||
@use "./vars" as v;
|
||||
@use "./components";
|
||||
|
||||
|
||||
// ---- main theme & layout
|
||||
|
||||
.page {
|
||||
padding-bottom: 5rem;
|
||||
|
||||
a {
|
||||
color: var(--link-fg);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
color: var(--link-hv-fg);
|
||||
}
|
||||
}
|
||||
|
||||
section.container {
|
||||
margin-top: v.$mp-3;
|
||||
margin-bottom: v.$mp-4;
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: calc(v.$mp-4 / 2);
|
||||
// border-bottom: 2px var(--break-color) solid;
|
||||
}
|
||||
|
||||
> .title, h3.title {
|
||||
font-size: var(--title-2-sz);
|
||||
clear: both;
|
||||
margin: v.$mp-3 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
*[data-oembed-url] {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---- components
|
||||
.dropdown-item {
|
||||
font-size: unset !important
|
||||
}
|
||||
|
||||
.vc-weekday-1, .vc-weekday-7 {
|
||||
color: var(--secondary-color) !important;
|
||||
}
|
||||
|
||||
|
||||
.schedules {
|
||||
padding-top: 0;
|
||||
margin-bottom: calc(0rem - v.$mp-3) !important;
|
||||
}
|
||||
|
||||
.schedule {
|
||||
display: inline-block;
|
||||
margin: v.$mp-3;
|
||||
margin-left: 0rem;
|
||||
padding: v.$mp-2;
|
||||
text-color: var(--main-color);
|
||||
background-color: var(--main-color-light);
|
||||
|
||||
.heading {
|
||||
padding: 0em;
|
||||
}
|
||||
|
||||
.day {
|
||||
font-weight: v.$weight-bold;
|
||||
margin-right: v.$mp-3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// -- buttons, forms
|
||||
@include components.button;
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: v.$mp-3;
|
||||
justify-content: right;
|
||||
|
||||
&.no-label label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button, .action, a {
|
||||
justify-content: center;
|
||||
min-width: 2rem;
|
||||
padding: v.$mp-2;
|
||||
|
||||
.not-selected { opacity: 0.6; }
|
||||
.icon { margin: 0em !important; }
|
||||
label { margin-left: v.$mp-2; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.label, .textarea, .input, .select {
|
||||
font-size: v.$text-size;
|
||||
}
|
||||
|
||||
.field.is-horizontal {
|
||||
display: flex;
|
||||
flex-direction: horizontal;
|
||||
|
||||
.label { min-width: 7rem }
|
||||
.control {
|
||||
flex: 1;
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: v.$screen-small) {
|
||||
comment.textarea {
|
||||
height: calc( v.$text-size * 7 ) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-item.active, .table tr.is-selected {
|
||||
color: var(--secondary-color);
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
|
||||
// -- headings
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
&.is-3 { margin-top: v.$mp-3; }
|
||||
}
|
||||
|
||||
|
||||
// ---- main navigation
|
||||
.navs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
background-color: var(--nav-bg);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.burger {
|
||||
display: none;
|
||||
background-color: var(--nav-bg);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
padding: v.$mp-2;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
text-align: center;
|
||||
|
||||
font-family: var(--heading-font-family);
|
||||
text-transform: uppercase;
|
||||
color: var(--nav-fg) !important;
|
||||
|
||||
.icon:first-child, .icon + span {
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--nav-hv-bg);
|
||||
color: var(--nav-hv-fg);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--nav-active-bg);
|
||||
color: var(--nav-active-fg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
|
||||
.dropdown-content {
|
||||
font-size: v.$text-size;
|
||||
min-width: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.primary {
|
||||
height: var(--nav-primary-height);
|
||||
|
||||
.nav-menu {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
display: inline-block;
|
||||
padding: v.$mp-3;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 1;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: var(--nav-fs);
|
||||
font-weight: v.$weight-bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background-color: var(--nav-secondary-bg);
|
||||
//position: absolute;
|
||||
//width: 100%;
|
||||
//box-shadow: 0em 0.5em 0.5em rgba(0, 0, 0, 0.05);
|
||||
|
||||
justify-content: right;
|
||||
//display: none;
|
||||
|
||||
.nav.primary:hover + &,
|
||||
&:hover {
|
||||
display: flex;
|
||||
top: var(--nav-primary-height);
|
||||
left: 0rem;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: var(--nav-2-fs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---- breadcrumbs
|
||||
.breadcrumbs {
|
||||
text-align: right;
|
||||
padding: v.$mp-3 0rem;
|
||||
font-size: v.$text-size-smaller;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:empty { display: none; }
|
||||
|
||||
a + a {
|
||||
padding-left: 0;
|
||||
|
||||
&:before {
|
||||
content: "/";
|
||||
margin: 0 v.$mp-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: v.$screen-normal) {
|
||||
.page {
|
||||
margin-top: var(--nav-primary-height);
|
||||
}
|
||||
|
||||
.navs {
|
||||
z-index: 100000;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
.nav:first-child {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.nav + .nav {
|
||||
flex-grow: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
justify-content: space-between;
|
||||
|
||||
.burger {
|
||||
display: unset;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: var(--nav-secondary-bg);
|
||||
left: 0;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
box-shadow: 0em 0.5em 0.5em rgba(0,0,0,0.05);
|
||||
|
||||
.nav-item {
|
||||
display: block;
|
||||
font-weight: v.$weight-normal;
|
||||
font-size: var(--nav-fs);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-menu:not(.active) {
|
||||
display: none !important
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
nav li {
|
||||
list-style: none;
|
||||
|
||||
a, .button {
|
||||
font-size: v.$text-size-medium;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-urls {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
margin-top: v.$mp-3;
|
||||
text-align: right;
|
||||
|
||||
> a:only-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.urls {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: v.$mp-3;
|
||||
justify-content: center;
|
||||
|
||||
a:not(:last-child) {
|
||||
margin-right: v.$mp-3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.left {
|
||||
flex-grow: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex-grow: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- page header
|
||||
.header {
|
||||
&.preview-header {
|
||||
//display: flex;
|
||||
align-items: start;
|
||||
gap: v.$mp-3;
|
||||
min-height: unset;
|
||||
padding-top: v.$mp-3 !important;
|
||||
|
||||
}
|
||||
|
||||
.headings {
|
||||
width: unset;
|
||||
flex-grow: 1;
|
||||
padding-top: 0 !important;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&.has-cover {
|
||||
min-height: calc( var(--header-height) / 3 );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.header-cover:not(:only-child) {
|
||||
float: right;
|
||||
position: relative;
|
||||
z-index: 30;
|
||||
background-color: var(--body-bg);
|
||||
margin: 0 0 v.$mp-4 v.$mp-4;
|
||||
|
||||
.cover {
|
||||
max-width: calc(var(--header-height) * 2);
|
||||
height: var(--header-height);
|
||||
}
|
||||
}
|
||||
.header-cover:only-child {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: v.$screen-small) {
|
||||
.container.header {
|
||||
width: calc( 100% - v.$mp-2 );
|
||||
|
||||
.headings {
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.header-cover {
|
||||
float: none;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cover {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-height: calc(var(--cover-h) * 1);
|
||||
max-width: calc(var(--cover-w) * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- ---- detail
|
||||
.page-content {
|
||||
margin-top: v.$mp-6;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: v.$mp-6;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- ---- list
|
||||
.list-item {
|
||||
&.logs {
|
||||
.track {
|
||||
margin-right: v.$mp-3;
|
||||
.icon {
|
||||
margin-right: v.$mp-2;
|
||||
color: var(--secondary-color-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3n):not(.wide) .media,
|
||||
{
|
||||
border-color: var(--main-color-dark) !important;
|
||||
}
|
||||
|
||||
&:nth-child(3n+1):not(.wide) .media,
|
||||
{
|
||||
border-color: var(--secondary-color-dark) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ---- responsive
|
||||
@media screen and (max-width: v.$screen-normal) {
|
||||
.page .container {
|
||||
margin-left: v.$mp-4;
|
||||
margin-right: v.$mp-4;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: v.$screen-small) {
|
||||
.page .container {
|
||||
margin-left: v.$mp-2;
|
||||
margin-right: v.$mp-2;
|
||||
}
|
||||
}
|
||||
52
radiocampus/assets/src/styles/vars.scss
Normal file
52
radiocampus/assets/src/styles/vars.scss
Normal file
@ -0,0 +1,52 @@
|
||||
@charset "utf-8";
|
||||
|
||||
$black: #000;
|
||||
$white: #fff;
|
||||
$red: #e00;
|
||||
$red-dark: #b00;
|
||||
$green: #0e0;
|
||||
$green-dark: #0b0;
|
||||
$grey-light: #ddd;
|
||||
|
||||
$mp-1: 0.2rem;
|
||||
$mp-1e: 0.2em;
|
||||
$mp-2: 0.4rem;
|
||||
$mp-2e: 0.4em;
|
||||
$mp-3: 0.6rem;
|
||||
$mp-3e: 0.6em;
|
||||
$mp-4: 1.2rem;
|
||||
$mp-4e: 1.2em;
|
||||
$mp-5: 1.6rem;
|
||||
$mp-5e: 1.6em;
|
||||
$mp-6: 2rem;
|
||||
$mp-6e: 2em;
|
||||
$mp-7: 4rem;
|
||||
$mp-7e: 4em;
|
||||
|
||||
$text-size-small: 0.6rem;
|
||||
$text-size-smaller: 0.8rem;
|
||||
$text-size: 1rem;
|
||||
$text-size-2: 1.2rem;
|
||||
$text-size-medium: 1.4rem;
|
||||
$text-size-bigger: 1.6rem;
|
||||
$text-size-big: 2rem;
|
||||
|
||||
$h1-size: 40px;
|
||||
$h2-size: 32px;
|
||||
$h3-size: 28px;
|
||||
$h4-size: 24px;
|
||||
$h5-size: 20px;
|
||||
$h6-size: 14px;
|
||||
|
||||
$weight-light: 100;
|
||||
$weight-lighter: 300;
|
||||
$weight-normal: 400;
|
||||
$weight-bolder: 500;
|
||||
$weight-bold: 700;
|
||||
|
||||
$screen-very-small: 400px;
|
||||
$screen-small: 600px;
|
||||
$screen-smaller: 900px;
|
||||
$screen-normal: 1024px;
|
||||
$screen-wider: 1280px;
|
||||
$screen-wide: 1380px;
|
||||
35
radiocampus/assets/src/styles/vendor.scss
Normal file
35
radiocampus/assets/src/styles/vendor.scss
Normal file
@ -0,0 +1,35 @@
|
||||
@import 'v-calendar/style.css';
|
||||
// @import '@fortawesome/fontawesome-free/css/all.min.css';
|
||||
|
||||
// ---- bulma
|
||||
$body-color: #000;
|
||||
$title-color: #000;
|
||||
$modal-content-width: 80%;
|
||||
|
||||
|
||||
@import "bulma/sass/utilities/_all.sass";
|
||||
|
||||
|
||||
@import "bulma/sass/base/_all";
|
||||
@import "bulma/sass/components/dropdown";
|
||||
// @import "bulma/sass/components/card";
|
||||
@import "bulma/sass/components/media";
|
||||
@import "bulma/sass/components/message";
|
||||
@import "bulma/sass/components/modal";
|
||||
//@import "bulma/sass/components/pagination";
|
||||
|
||||
@import "bulma/sass/form/_all";
|
||||
@import "bulma/sass/grid/_all";
|
||||
@import "bulma/sass/helpers/_all";
|
||||
@import "bulma/sass/layout/_all";
|
||||
@import "bulma/sass/elements/box";
|
||||
// @import "bulma/sass/elements/button";
|
||||
@import "bulma/sass/elements/container";
|
||||
// @import "bulma/sass/elements/content";
|
||||
@import "bulma/sass/elements/icon";
|
||||
// @import "bulma/sass/elements/image";
|
||||
// @import "bulma/sass/elements/notification";
|
||||
// @import "bulma/sass/elements/progress";
|
||||
@import "bulma/sass/elements/table";
|
||||
@import "bulma/sass/elements/tag";
|
||||
//@import "bulma/sass/elements/title";
|
||||
Reference in New Issue
Block a user