fixes
This commit is contained in:
		@ -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;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -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);
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -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;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -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;
 | 
			
		||||
 | 
			
		||||
		Reference in New Issue
	
	Block a user