clean-up css; related publications; pagination
This commit is contained in:
bkfox
@ -5,21 +5,33 @@ $font-special-url: url("assets/Bagnard.otf");
|
||||
|
||||
$black: #000;
|
||||
$white: #fff;
|
||||
$red: #e00;
|
||||
$red-dark: #b00;
|
||||
$green: #0e0;
|
||||
$green-dark: #0b0;
|
||||
|
||||
$mp-1: 0.2em;
|
||||
$mp-2: 0.4em;
|
||||
$mp-3: 0.8em;
|
||||
$mp-4: 1.2em;
|
||||
$mp-5: 1.6em;
|
||||
$mp-6: 2em;
|
||||
$mp-7: 4em;
|
||||
$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.6em;
|
||||
$text-size-smaller: 0.8em;
|
||||
$text-size: 1em;
|
||||
$text-size-medium: 1.4em;
|
||||
$text-size-bigger: 1.6em;
|
||||
$text-size-big: 2em;
|
||||
$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;
|
||||
@ -152,10 +164,15 @@ a.navbar-item.is-active {
|
||||
//-- general
|
||||
:root {
|
||||
--text-color: black;
|
||||
--disabled-color: #aaa;
|
||||
--disabled-bg: #eee;
|
||||
|
||||
--highlight-color: rgba(255, 255, 0, 1);
|
||||
--highlight-color-alpha: rgba(255, 255, 0, 0.7);
|
||||
--highlight-color-grey: rgba(230, 230, 60, 1);
|
||||
--highlight-color-2: rgb(0, 0, 254);
|
||||
--highlight-color-2-alpha: rgb(0, 0, 254, 0.7);
|
||||
--highlight-color-2-grey: rgba(50, 200, 200, 1);
|
||||
|
||||
--header-height: 30em;
|
||||
|
||||
@ -165,10 +182,7 @@ a.navbar-item.is-active {
|
||||
--heading-bg-highlight-color: var(--highlight-color-2);
|
||||
--heading-font-family: default;
|
||||
|
||||
--preview-media-height: 10em;
|
||||
--preview-media-cover-size: 10em;
|
||||
|
||||
--preview-cover-size: 24em;
|
||||
--preview-cover-size: 18em;
|
||||
--preview-cover-small-size: 10em;
|
||||
|
||||
--player-panel-bg: var(--highlight-color);
|
||||
@ -182,6 +196,7 @@ a.navbar-item.is-active {
|
||||
|
||||
|
||||
body {
|
||||
font-size: 1.4em;
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
@ -192,13 +207,14 @@ section > .toolbar {
|
||||
}
|
||||
|
||||
|
||||
// ---- main theme & layout
|
||||
h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
font-family: var(--heading-font-family);
|
||||
}
|
||||
|
||||
|
||||
// ---- main theme & layout
|
||||
.page {
|
||||
padding-bottom: 5em;
|
||||
padding-bottom: 5rem;
|
||||
|
||||
a {
|
||||
background-color: var(--highlight-color-alpha);
|
||||
@ -207,10 +223,6 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
padding: $mp-2;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: $text-size-big;
|
||||
}
|
||||
|
||||
section.container {
|
||||
padding-top: $mp-6;
|
||||
|
||||
@ -229,6 +241,7 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
|
||||
|
||||
// ---- helpers
|
||||
// -- layout
|
||||
.d-inline { display: inline; }
|
||||
.d-block { display: block; }
|
||||
.d-inline-block { display: inline-block; }
|
||||
@ -239,6 +252,7 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
.p-sticky { position: sticky }
|
||||
.p-static { position: static }
|
||||
|
||||
.align-left { text-align: left; justify-content: left; }
|
||||
.align-right { text-align: right; justify-content: right; }
|
||||
|
||||
.height-full { height: 100%; }
|
||||
@ -247,34 +261,82 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
|
||||
.no-border { border: 0px !important; }
|
||||
|
||||
.is-clickable { cursor: pointer; }
|
||||
|
||||
|
||||
// ---- components
|
||||
.btn-hg, .btn-outline-hg {
|
||||
border: 0.1em var(--highlight-color) solid;
|
||||
background-color: var(--highlight-color-alpha) !important;
|
||||
border-radius: 0.2em;
|
||||
// -- colors
|
||||
.is-success {
|
||||
background-color: $green !important;
|
||||
border-color: $green-dark !important;
|
||||
}
|
||||
.is-danger {
|
||||
background-color: $red !important;
|
||||
border-color: $red-dark !important;
|
||||
}
|
||||
|
||||
.button {
|
||||
border-radius: 0px;
|
||||
border-color: var(--highlight-color-2-alpha);
|
||||
// ---- components
|
||||
.dropdown-item {
|
||||
font-size: unset !important
|
||||
}
|
||||
|
||||
.vc-weekday-1, .vc-weekday-7 {
|
||||
color: var(--highlight-color-2) !important;
|
||||
}
|
||||
|
||||
|
||||
// -- buttons, forms
|
||||
.button, a.button, button.button, .nav-urls a {
|
||||
display: inline-block;
|
||||
padding: $mp-3e;
|
||||
border-radius: 4px;
|
||||
border: 1px var(--highlight-color-2-alpha) solid;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-size: $text-size-medium;
|
||||
|
||||
background-color: var(--highlight-color);
|
||||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
&:first-child { margin-right: $mp-3; }
|
||||
&:last-child { margin-left: $mp-3 }
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
border-color: var(--highlight-color-2) !important;
|
||||
color: var(--highlight-color-2) !important;
|
||||
border-color: var(--highlight-color-2);
|
||||
color: var(--highlight-color-2);
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: var(--highlight-color-alpha);
|
||||
background-color: var(--highlight-color-2);
|
||||
color: var(--highlight-color);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--highlight-color);
|
||||
background-color: var(--highlight-color-2-alpha);
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:not([disabled]), &:not(.disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&[disabled], &.disabled {
|
||||
background-color: var(--highlight-color-grey);
|
||||
color: var(--highlight-color-2);
|
||||
border-color: var(--highlight-color-2-alpha);
|
||||
}
|
||||
|
||||
.actions &, &.action {
|
||||
background-color: var(--highlight-color);
|
||||
justify-content: center;
|
||||
padding: $mp-2 !important;
|
||||
min-width: 2em;
|
||||
min-width: 2rem;
|
||||
|
||||
.not-selected { opacity: 0.6; }
|
||||
|
||||
|
||||
.icon { margin: 0em !important; }
|
||||
.not-selected { opacity: 0.6; }
|
||||
|
||||
label {
|
||||
margin-left: $mp-2;
|
||||
@ -298,9 +360,8 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
border-bottom: 0px;
|
||||
height: 100%;
|
||||
|
||||
&:last-child {
|
||||
border-right: 0px;
|
||||
}
|
||||
&:not(:first-child) { border-left: 0px; }
|
||||
&:last-child { border-right: 0px; }
|
||||
}
|
||||
}
|
||||
|
||||
@ -311,6 +372,7 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
}
|
||||
|
||||
|
||||
// -- headings
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
|
||||
@ -339,25 +401,6 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
font-size: unset !important
|
||||
}
|
||||
|
||||
.list-urls {
|
||||
margin-top: $mp-3;
|
||||
text-align: right;
|
||||
font-size: $text-size-medium;
|
||||
|
||||
a:not(:last-child) {
|
||||
margin-right: $mp-3;
|
||||
}
|
||||
}
|
||||
|
||||
.vc-weekday-1, .vc-weekday-7 {
|
||||
color: var(--highlight-color-2) !important;
|
||||
}
|
||||
|
||||
|
||||
// ---- main navigation
|
||||
.nav {
|
||||
display: flex;
|
||||
@ -385,7 +428,7 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
padding: $mp-3;
|
||||
|
||||
img {
|
||||
width: 14em !important;
|
||||
width: 12rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -395,7 +438,7 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: $text-size-medium;
|
||||
font-size: $text-size-2;
|
||||
font-weight: $weight-bold;
|
||||
}
|
||||
}
|
||||
@ -404,7 +447,7 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
justify-content: right;
|
||||
|
||||
.nav-item {
|
||||
font-size: 1.2em;
|
||||
font-size: $text-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -418,6 +461,46 @@ nav li {
|
||||
}
|
||||
|
||||
|
||||
.nav-urls {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
margin-top: $mp-3;
|
||||
text-align: right;
|
||||
font-size: $text-size-medium;
|
||||
|
||||
> a:only-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.urls {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: $mp-3;
|
||||
justify-content: center;
|
||||
|
||||
a:not(:last-child) {
|
||||
margin-right: $mp-3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.left {
|
||||
flex-grow: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex-grow: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- ---- detail
|
||||
.page-content {
|
||||
margin-top: $mp-6;
|
||||
@ -641,8 +724,6 @@ nav li {
|
||||
|
||||
|
||||
// -- program grid
|
||||
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
@ -729,7 +810,7 @@ nav li {
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
|
||||
height: 3em;
|
||||
height: 3rem;
|
||||
background-color: var(--highlight-color-alpha);
|
||||
|
||||
&.playing, &.playing .title {
|
||||
@ -738,21 +819,35 @@ nav li {
|
||||
|
||||
&:hover {
|
||||
background-color: var(--highlight-color);
|
||||
|
||||
.title {
|
||||
color: var(--highlight-color-2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.title:hover::before, &.playing .title::before {
|
||||
content: "\f04b";
|
||||
font-family: "Font Awesome 6 Free";
|
||||
margin-right: $mp-3e;
|
||||
}
|
||||
&.playing .title:hover::before {
|
||||
content: '';
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.headings > * {
|
||||
}
|
||||
|
||||
.title {
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
padding: 0em $mp-3;
|
||||
}
|
||||
|
||||
margin: 0em;
|
||||
padding: 0em;
|
||||
padding: $mp-3e;
|
||||
font-size: $text-size-medium;
|
||||
}
|
||||
.button {
|
||||
@ -826,20 +921,12 @@ nav li {
|
||||
font-size: $text-size-bigger;
|
||||
height: 100%;
|
||||
padding: auto 0.2em !important;
|
||||
min-width: 2.5em;
|
||||
min-width: 3em;
|
||||
border-radius: 0px;
|
||||
transition: background-color 0.5s;
|
||||
|
||||
&:hover {
|
||||
color: var(--highlight-color-2) !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--highlight-color-2);
|
||||
}
|
||||
|
||||
&.open {
|
||||
background-color: var(--highlight-color-2);
|
||||
background-color: var(--highlight-color-2-alpha);
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,14 +12,14 @@ $menu-item-active-background-color: #d2d2d2;
|
||||
@import "~bulma/sass/components/media";
|
||||
@import "~bulma/sass/components/message";
|
||||
@import "~bulma/sass/components/modal";
|
||||
@import "~bulma/sass/components/pagination";
|
||||
//@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/button";
|
||||
@import "~bulma/sass/elements/container";
|
||||
@import "~bulma/sass/elements/content";
|
||||
@import "~bulma/sass/elements/icon";
|
||||
|
||||
@ -1,27 +1,24 @@
|
||||
<template>
|
||||
<div :class="['a-sound-item m-0 button-group', playing && 'playing' || '']">
|
||||
<slot name="title" :player="player" :item="item" :loaded="loaded">
|
||||
<span :class="['title is-flex-grow-1', playing && 'blink' || '']" @click.stop="$emit('togglePlay')">
|
||||
<span class="icon mr-3">
|
||||
<i class="fa fa-play"></i>
|
||||
</span>
|
||||
<span :class="['title is-flex-grow-1 align-left', playing && 'blink' || '']" @click.stop="$emit('togglePlay')">
|
||||
{{ name || item.name }}
|
||||
</span>
|
||||
</slot>
|
||||
<div class="button-group actions">
|
||||
<a class="button" v-if="hasAction('page')"
|
||||
<a class="button action" v-if="hasAction('page')"
|
||||
:href="item.data.page_url">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-external-link"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="button" v-if="item.data.is_downloadable"
|
||||
<a class="button action" v-if="item.data.is_downloadable"
|
||||
:href="item.data.url" target="_blank">
|
||||
<span class="icon is-small">
|
||||
<span class="fa fa-download"></span>
|
||||
</span>
|
||||
</a>
|
||||
<button :class="['button', pinned ? 'selected' : 'not-selected']" v-if="player && player.sets.pin != $parent.set" @click.stop="player.togglePin(item)">
|
||||
<button :class="['button action', pinned ? 'selected' : 'not-selected']" v-if="player && player.sets.pin != $parent.set" @click.stop="player.togglePin(item)">
|
||||
<span class="icon is-small">
|
||||
<span class="fa fa-star"></span>
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user