This commit is contained in:
bkfox
2024-01-30 20:19:44 +01:00
parent b9148933f4
commit 1475a80316
9 changed files with 131 additions and 127 deletions

View File

@ -17,10 +17,10 @@ input.half-field:not(:active):not(:hover) {
--text-color: black;
--main-color: #EFCA08;
--main-color-light: #EFCA08B3;
--main-color-light: #F4da51;
--main-color-dark: #F49F0A;
--secondary-color: #00A6A6;
--secondary-color-light: #00A6A6B3;
--secondary-color-light: #4cc0c0;
--secondary-color-dark: #007ba8;
--disabled-color: #aaa;
@ -37,19 +37,15 @@ input.half-field:not(:active):not(:hover) {
--nav-primary-height: 3rem;
--nav-secondary-height: 2.5rem;
--nav-bg: var(--main-color);
--nav-fg: var(--text-color);
--nav-active-bg: var(--secondary-color);
--nav-active-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.8rem;
--button-fg: var(--text-color);
--button-bg: var(--hg-color);
--button-hg-fg: var(--hg-color-2);
--button-hg-bg: var(--hg-color);
--button-active-fg: var(--hg-color);
--button-active-bg: var(--hg-color-2);
--nav-2-fs: 0.9rem;
}

View File

@ -31,8 +31,8 @@
--a-carousel-bg: var(--secondary-color-light);
--a-progress-bg: transparent;
--a-progress-bar-bg: var(--hg-color-2);
--a-progress-bar-color: var(--hg-color);
--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);
@ -41,10 +41,11 @@
--a-playlist-title-pd: #{v.$mp-3};
--a-playlist-item-border: 1px var(--secondary-color) solid;
--a-sound-bg: var(--hg-color-alpha);
--a-sound-hv-bg: var(--hg-color);
--a-sound-playing-fg: var(--hg-color-alpha);
--a-sound-hv-fg: var(--text-color);
--a-sound-bg: var(--main-color);
--a-sound-hv-bg: var(--main-color-light);
--a-sound-btn-hv-fg: var(--secondary-color);
--a-sound-playing-fg: var(--secondary-color-dark);
--a-sound-hv-fg: var(--secondary-color);
--a-sound-text-sz: #{v.$text-size};
--a-player-url-fg: var(--text-color);
@ -54,16 +55,16 @@
--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-hg-fg: var(--button-hg-fg);
--a-player-bar-button-hg-bg: var(--button-hg-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-hg-fg: var(--text-color);
--button-hg-bg: var(--secondary-color);
--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-light);
--button-active-bg: var(--secondary-color);
}
@ -149,23 +150,16 @@
}
}
&:hover {
color: var(--button-hg-fg);
background-color: var(--button-hg-bg);
color: var(--button-hv-fg);
background-color: var(--button-hv-bg);
opacity: 1 !important;
}
&.active {
&.active:not(:hover) {
// border-color: var(--hg-color-alpha);
color: var(--button-active-fg);
background-color: var(--button-active-bg);
&:hover {
border-color: var(--hg-color);
background-color: var(--hg-color-2-alpha);
opacity: 1 !important;
}
}
&:not([disabled]), &:not(.disabled) {
@ -302,7 +296,7 @@
display: flex;
flex-direction: column;
width: 100%;
padding: v.$mp-3;
// padding: v.$mp-3;
.headings {
display: flex;
@ -323,7 +317,6 @@
// background-color: var(--preview-heading-bg-color);
text-align: right;
min-width: 8rem;
text-decoration: underline;
}
.media {
@ -333,8 +326,13 @@
.media-content {
display: flex;
flex-direction: column;
height: 100%;
margin-bottom: unset;
.content {
flex-grow: 1;
}
.list-item:not(.no-cover) & {
min-height: var(--preview-cover-small-size);
}
@ -343,7 +341,6 @@
.actions {
text-align: right;
margin-top: v.$mp-3;
}
}
@ -554,7 +551,7 @@
height: 3rem;
background-color: var(--a-sound-bg);
&.playing, &.playing .label {
&.playing .label {
color: var(--a-sound-playing-fg) !important;
}
@ -596,6 +593,11 @@
.button {
width: 3em;
font-size: var(--a-sound-text-sz);
&:hover {
color: var(--a-sound-btn-hv-fg) !important;
background-color: unset;
}
}
}
@ -676,8 +678,8 @@
border-radius: 0px;
&.open {
background-color: var(--a-player-bar-button-hg-bg);
color: var(--a-player-bar-button-hg-fg);
background-color: var(--button-active-bg);
color: var(--button-active-fg);
}
}
}

View File

@ -165,17 +165,20 @@
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);
color: var(--nav-active-fg) !important;
}
}
.nav-menu {
display: flex;
flex-grow: 1;
background-color: var(--nav-bg);
.dropdown-content {
font-size: v.$text-size;
@ -209,7 +212,7 @@
}
&.secondary {
background-color: var(--nav-bg);
background-color: var(--nav-secondary-bg);
//position: absolute;
//width: 100%;
//box-shadow: 0em 0.5em 0.5em rgba(0, 0, 0, 0.05);
@ -284,6 +287,7 @@
.nav-menu {
display: block;
position: absolute;
background-color: var(--nav-secondary-bg);
left: 0;
top: 100%;
width: 100%;
@ -292,11 +296,7 @@
.nav-item {
display: block;
font-weight: v.$weight-normal;
&:hover {
background-color: var(--hg-color-2-alpha);
color: var(--hg-color);
}
font-size: var(--nav-fs);
}
}
@ -420,13 +420,18 @@ nav li {
}
}
&:nth-child(3n):not(.wide) {
&:nth-child(3n):not(.wide) .media,
&.logs:nth-child(3n):not(.wide)
{
padding: v.$mp-3;
border-radius: v.$mp-2;
border: 1px solid var(--main-color-dark) !important;
}
&:nth-child(3n+1):not(.wide) {
&:nth-child(3n+1):not(.wide) .media,
&.logs:nth-child(3n+1):not(.wide)
{
padding: v.$mp-3;
border-radius: v.$mp-2;
border: 1px solid var(--secondary-color-dark) !important;
}

View File

@ -145,7 +145,7 @@ export default {
return []
let contOff = new Offset(this.$refs.container)
let viewMax = new Offset(this.$refs.viewport).max
let viewMax = new Offset(this.$refs.viewport).size
let bullets = []
let i = 0;