diff --git a/aircox/static/aircox/css/admin.css b/aircox/static/aircox/css/admin.css index cff5404..51fc66b 100644 --- a/aircox/static/aircox/css/admin.css +++ b/aircox/static/aircox/css/admin.css @@ -28,18 +28,19 @@ --a-carousel-nav-x: -0.6em; --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: 0.4rem; --a-playlist-header-bg: var(--secondary-color); --a-playlist-header-fg: var(--text-color); --a-playlist-title-sz: 1rem; --a-playlist-title-pd: 0.6rem; --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: 1rem; --a-player-url-fg: var(--text-color); --a-player-panel-bg: var(--hg-color); @@ -48,15 +49,15 @@ --a-player-bar-title-alone-sz: 1.4rem; --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); } @media screen and (max-width: 1380px) { @@ -190,7 +191,6 @@ display: flex; flex-direction: column; width: 100%; - padding: 0.6rem; } .list-item .headings { display: flex; @@ -208,7 +208,6 @@ font-size: var(--preview-title-sz); text-align: right; min-width: 8rem; - text-decoration: underline; } .list-item .media { flex-grow: 1; @@ -216,14 +215,17 @@ .list-item .media-content { display: flex; flex-direction: column; + height: 100%; margin-bottom: unset; } +.list-item .media-content .content { + flex-grow: 1; +} .list-item:not(.no-cover) .list-item .media-content { min-height: var(--preview-cover-small-size); } .list-item .actions { text-align: right; - margin-top: 0.6rem; } @media screen and (max-width: 400px) { @@ -380,7 +382,7 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co height: 3rem; background-color: var(--a-sound-bg); } -.a-sound-item.playing, .a-sound-item.playing .label { +.a-sound-item.playing .label { color: var(--a-sound-playing-fg) !important; } .a-sound-item:hover { @@ -412,6 +414,10 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co width: 3em; font-size: var(--a-sound-text-sz); } +.a-sound-item .button:hover { + color: var(--a-sound-btn-hv-fg) !important; + background-color: unset; +} .player-container { z-index: 1000000; @@ -493,8 +499,8 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co border-radius: 0px; } .a-player-bar .button.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); } .a-player-bar-content { @@ -2749,19 +2755,14 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i margin-left: 0.6rem; } #player .button:hover, #player a.button:hover, #player button.button:hover, .ax .button:hover, .ax a.button:hover, .ax button.button: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; } -#player .button.active, #player a.button.active, #player button.button.active, .ax .button.active, .ax a.button.active, .ax button.button.active { +#player .button.active:not(:hover), #player a.button.active:not(:hover), #player button.button.active:not(:hover), .ax .button.active:not(:hover), .ax a.button.active:not(:hover), .ax button.button.active:not(:hover) { color: var(--button-active-fg); background-color: var(--button-active-bg); } -#player .button.active:hover, #player a.button.active:hover, #player button.button.active:hover, .ax .button.active:hover, .ax a.button.active:hover, .ax button.button.active:hover { - border-color: var(--hg-color); - background-color: var(--hg-color-2-alpha); - opacity: 1 !important; -} #player .button:not([disabled]), #player .button:not(.disabled), #player a.button:not([disabled]), #player a.button:not(.disabled), #player button.button:not([disabled]), #player button.button:not(.disabled), .ax .button:not([disabled]), .ax .button:not(.disabled), .ax a.button:not([disabled]), .ax a.button:not(.disabled), .ax button.button:not([disabled]), .ax button.button:not(.disabled) { cursor: pointer; } diff --git a/aircox/static/aircox/css/chunk-common.css b/aircox/static/aircox/css/chunk-common.css index 89d71a8..5e1d2cf 100644 --- a/aircox/static/aircox/css/chunk-common.css +++ b/aircox/static/aircox/css/chunk-common.css @@ -6973,10 +6973,10 @@ input.half-field:not(:active):not(:hover) { --body-bg: #fff; --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; --disabled-bg: #eee; @@ -6990,18 +6990,15 @@ input.half-field:not(:active):not(:hover) { --hg-color-2-grey: rgba(50, 200, 200, 1); --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; } body { diff --git a/aircox/static/aircox/css/public.css b/aircox/static/aircox/css/public.css index 2b46f67..593489a 100644 --- a/aircox/static/aircox/css/public.css +++ b/aircox/static/aircox/css/public.css @@ -28,18 +28,19 @@ --a-carousel-nav-x: -0.6em; --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: 0.4rem; --a-playlist-header-bg: var(--secondary-color); --a-playlist-header-fg: var(--text-color); --a-playlist-title-sz: 1rem; --a-playlist-title-pd: 0.6rem; --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: 1rem; --a-player-url-fg: var(--text-color); --a-player-panel-bg: var(--hg-color); @@ -48,15 +49,15 @@ --a-player-bar-title-alone-sz: 1.4rem; --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); } @media screen and (max-width: 1380px) { @@ -190,7 +191,6 @@ display: flex; flex-direction: column; width: 100%; - padding: 0.6rem; } .list-item .headings { display: flex; @@ -208,7 +208,6 @@ font-size: var(--preview-title-sz); text-align: right; min-width: 8rem; - text-decoration: underline; } .list-item .media { flex-grow: 1; @@ -216,14 +215,17 @@ .list-item .media-content { display: flex; flex-direction: column; + height: 100%; margin-bottom: unset; } +.list-item .media-content .content { + flex-grow: 1; +} .list-item:not(.no-cover) .list-item .media-content { min-height: var(--preview-cover-small-size); } .list-item .actions { text-align: right; - margin-top: 0.6rem; } @media screen and (max-width: 400px) { @@ -380,7 +382,7 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co height: 3rem; background-color: var(--a-sound-bg); } -.a-sound-item.playing, .a-sound-item.playing .label { +.a-sound-item.playing .label { color: var(--a-sound-playing-fg) !important; } .a-sound-item:hover { @@ -412,6 +414,10 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co width: 3em; font-size: var(--a-sound-text-sz); } +.a-sound-item .button:hover { + color: var(--a-sound-btn-hv-fg) !important; + background-color: unset; +} .player-container { z-index: 1000000; @@ -493,8 +499,8 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co border-radius: 0px; } .a-player-bar .button.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); } .a-player-bar-content { @@ -7358,19 +7364,14 @@ a.tag:hover { margin-left: 0.6rem; } .button:hover, a.button:hover, button.button: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; } -.button.active, a.button.active, button.button.active { +.button.active:not(:hover), a.button.active:not(:hover), button.button.active:not(:hover) { color: var(--button-active-fg); background-color: var(--button-active-bg); } -.button.active:hover, a.button.active:hover, button.button.active:hover { - border-color: var(--hg-color); - background-color: var(--hg-color-2-alpha); - opacity: 1 !important; -} .button:not([disabled]), .button:not(.disabled), a.button:not([disabled]), a.button:not(.disabled), button.button:not([disabled]), button.button:not(.disabled) { cursor: pointer; } @@ -7484,14 +7485,17 @@ a.tag:hover { vertical-align: top; display: inline-block; } +.nav .nav-item:hover { + background-color: var(--nav-hv-bg); + color: var(--nav-hv-fg); +} .nav .nav-item.active { background-color: var(--nav-active-bg); - color: var(--nav-active-fg); + color: var(--nav-active-fg) !important; } .nav .nav-menu { display: flex; flex-grow: 1; - background-color: var(--nav-bg); } .nav .nav-menu .dropdown-content { font-size: 1rem; @@ -7518,7 +7522,7 @@ a.tag:hover { white-space: nowrap; } .nav.secondary { - background-color: var(--nav-bg); + background-color: var(--nav-secondary-bg); justify-content: right; } .nav.primary:hover + .nav.secondary, .nav.secondary:hover { @@ -7576,6 +7580,7 @@ a.tag:hover { .nav .nav-menu { display: block; position: absolute; + background-color: var(--nav-secondary-bg); left: 0; top: 100%; width: 100%; @@ -7584,10 +7589,7 @@ a.tag:hover { .nav .nav-menu .nav-item { display: block; font-weight: 400; - } - .nav .nav-menu .nav-item:hover { - background-color: var(--hg-color-2-alpha); - color: var(--hg-color); + font-size: var(--nav-fs); } .nav .nav-menu:not(.active) { display: none !important; @@ -7680,12 +7682,13 @@ nav li a, nav li .button { margin-right: 0.4rem; color: var(--secondary-color-dark); } -.list-item:nth-child(3n):not(.wide) { +.list-item:nth-child(3n):not(.wide) .media, .list-item.logs:nth-child(3n):not(.wide) { padding: 0.6rem; border-radius: 0.4rem; border: 1px solid var(--main-color-dark) !important; } -.list-item:nth-child(3n+1):not(.wide) { +.list-item:nth-child(3n+1):not(.wide) .media, .list-item.logs:nth-child(3n+1):not(.wide) { + padding: 0.6rem; border-radius: 0.4rem; border: 1px solid var(--secondary-color-dark) !important; } diff --git a/aircox/static/aircox/js/chunk-common.js b/aircox/static/aircox/js/chunk-common.js index 0c69051..e4a5b85 100644 --- a/aircox/static/aircox/js/chunk-common.js +++ b/aircox/static/aircox/js/chunk-common.js @@ -35,7 +35,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _mod \*******************************************************************************************************************************************************************************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.push.js */ \"./node_modules/core-js/modules/es.array.push.js\");\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\n\nclass Offset {\n constructor(el, min = null, max = null) {\n this.el = el;\n this.rect = el.getBoundingClientRect();\n ({\n min,\n max\n } = this.minmax(min, max));\n this.min = min;\n this.max = max;\n this.size = max - min;\n }\n minmax(min = null, max = null) {\n min = min === null ? this.rect.left : min;\n max = max === null ? this.rect.right : max;\n return {\n min,\n max\n };\n }\n relative(to) {\n return new Offset(this.el, this.min - to.min, this.max - to.min);\n }\n}\nclass Card extends Offset {\n constructor(el, index) {\n super(el);\n this.index = index;\n }\n visible(viewportOffset) {\n return viewportOffset.min <= this.min && viewportOffset.max >= this.max;\n }\n}\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n setup() {\n return {\n viewport: (0,vue__WEBPACK_IMPORTED_MODULE_1__.ref)(null),\n container: (0,vue__WEBPACK_IMPORTED_MODULE_1__.ref)(null)\n };\n },\n data() {\n return {\n cards: [],\n index: 0,\n refresh_: 0\n };\n },\n props: {\n cardSelector: {\n type: String,\n default: ''\n },\n containerClass: {\n type: String,\n default: ''\n },\n buttonClass: {\n type: String,\n default: 'button'\n },\n leftButtonIcon: {\n type: String,\n default: \"fas fa-chevron-left\"\n },\n rightButtonIcon: {\n type: String,\n default: \"fas fa-chevron-right\"\n }\n },\n computed: {\n card() {\n return this.cards()[this.index];\n },\n /*showPrevButton() {\n return this.index > 0\n },\n showNextButton() {\n if(!this.cards || this.cards.length <= 1)\n return false\n let { count } = this.visibility\n return (this.index + count) < this.cards.length\n },*/\n\n bullets() {\n if (!this.cards || !this.$refs.viewport) return [];\n let contOff = new Offset(this.$refs.container);\n let viewMax = new Offset(this.$refs.viewport).max;\n let bullets = [];\n let i = 0;\n let max = viewMax;\n bullets.push(i);\n while (i < this.cards.length) {\n // skip until next view\n for (; i < this.cards.length; i++) {\n let card = this.cards[i].relative(contOff);\n if (card.max > max) {\n max = card.min + viewMax;\n bullets.push(i);\n i++;\n break;\n }\n }\n }\n return bullets;\n }\n },\n methods: {\n getCards() {\n if (!this.$refs.container) return [];\n let nodes = !this.cardSelector ? [...this.$refs.container.children] : [...this.$refs.container.querySelectorAll(this.cardSelector)];\n return nodes.map((el, index) => new Card(el, index));\n },\n select(index, relative = false) {\n if (relative) index = this.index + index;\n index = Math.min(index, this.cards.length);\n index = Math.max(index, 0);\n let card = this.cards[index];\n if (!card) return null;\n card = new Card(card.el);\n const cont = new Offset(this.$refs.container);\n const rel = card.relative(cont);\n this.$refs.container.style.marginLeft = `-${rel.min}px`;\n this.index = index;\n return card.el;\n },\n refresh() {\n this.cards = this.getCards();\n this.select(this.index);\n this.refresh_++;\n }\n },\n mounted() {\n this.observers = [new MutationObserver(() => this.refresh()), new ResizeObserver(() => this.refresh())];\n this.observers[0].observe(this.$refs.container, {\n \"childList\": true\n });\n this.observers[1].observe(this.$refs.container);\n this.refresh();\n },\n unmounted() {\n for (var observer of this.observers) observer.disconnect();\n }\n});\n\n//# sourceURL=webpack://aircox-assets/./src/components/ACarousel.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es.array.push.js */ \"./node_modules/core-js/modules/es.array.push.js\");\n/* harmony import */ var core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_push_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\n\nclass Offset {\n constructor(el, min = null, max = null) {\n this.el = el;\n this.rect = el.getBoundingClientRect();\n ({\n min,\n max\n } = this.minmax(min, max));\n this.min = min;\n this.max = max;\n this.size = max - min;\n }\n minmax(min = null, max = null) {\n min = min === null ? this.rect.left : min;\n max = max === null ? this.rect.right : max;\n return {\n min,\n max\n };\n }\n relative(to) {\n return new Offset(this.el, this.min - to.min, this.max - to.min);\n }\n}\nclass Card extends Offset {\n constructor(el, index) {\n super(el);\n this.index = index;\n }\n visible(viewportOffset) {\n return viewportOffset.min <= this.min && viewportOffset.max >= this.max;\n }\n}\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n setup() {\n return {\n viewport: (0,vue__WEBPACK_IMPORTED_MODULE_1__.ref)(null),\n container: (0,vue__WEBPACK_IMPORTED_MODULE_1__.ref)(null)\n };\n },\n data() {\n return {\n cards: [],\n index: 0,\n refresh_: 0\n };\n },\n props: {\n cardSelector: {\n type: String,\n default: ''\n },\n containerClass: {\n type: String,\n default: ''\n },\n buttonClass: {\n type: String,\n default: 'button'\n },\n leftButtonIcon: {\n type: String,\n default: \"fas fa-chevron-left\"\n },\n rightButtonIcon: {\n type: String,\n default: \"fas fa-chevron-right\"\n }\n },\n computed: {\n card() {\n return this.cards()[this.index];\n },\n /*showPrevButton() {\n return this.index > 0\n },\n showNextButton() {\n if(!this.cards || this.cards.length <= 1)\n return false\n let { count } = this.visibility\n return (this.index + count) < this.cards.length\n },*/\n\n bullets() {\n if (!this.cards || !this.$refs.viewport) return [];\n let contOff = new Offset(this.$refs.container);\n let viewMax = new Offset(this.$refs.viewport).size;\n let bullets = [];\n let i = 0;\n let max = viewMax;\n bullets.push(i);\n while (i < this.cards.length) {\n // skip until next view\n for (; i < this.cards.length; i++) {\n let card = this.cards[i].relative(contOff);\n if (card.max > max) {\n max = card.min + viewMax;\n bullets.push(i);\n i++;\n break;\n }\n }\n }\n return bullets;\n }\n },\n methods: {\n getCards() {\n if (!this.$refs.container) return [];\n let nodes = !this.cardSelector ? [...this.$refs.container.children] : [...this.$refs.container.querySelectorAll(this.cardSelector)];\n return nodes.map((el, index) => new Card(el, index));\n },\n select(index, relative = false) {\n if (relative) index = this.index + index;\n index = Math.min(index, this.cards.length);\n index = Math.max(index, 0);\n let card = this.cards[index];\n if (!card) return null;\n card = new Card(card.el);\n const cont = new Offset(this.$refs.container);\n const rel = card.relative(cont);\n this.$refs.container.style.marginLeft = `-${rel.min}px`;\n this.index = index;\n return card.el;\n },\n refresh() {\n this.cards = this.getCards();\n this.select(this.index);\n this.refresh_++;\n }\n },\n mounted() {\n this.observers = [new MutationObserver(() => this.refresh()), new ResizeObserver(() => this.refresh())];\n this.observers[0].observe(this.$refs.container, {\n \"childList\": true\n });\n this.observers[1].observe(this.$refs.container);\n this.refresh();\n },\n unmounted() {\n for (var observer of this.observers) observer.disconnect();\n }\n});\n\n//# sourceURL=webpack://aircox-assets/./src/components/ACarousel.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D"); /***/ }), diff --git a/aircox/templates/aircox/widgets/item.html b/aircox/templates/aircox/widgets/item.html index 3e6996d..f986aec 100644 --- a/aircox/templates/aircox/widgets/item.html +++ b/aircox/templates/aircox/widgets/item.html @@ -32,11 +32,11 @@ {% endif %} {% endblock %} + {% block actions-container %} + {{ block.super }} + {% endblock %} -{% block actions-container %} -{{ block.super }} -{% endblock %} {% endblock %} {% endblock %} diff --git a/assets/src/assets/common.scss b/assets/src/assets/common.scss index e8f84aa..85e18af 100644 --- a/assets/src/assets/common.scss +++ b/assets/src/assets/common.scss @@ -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; } diff --git a/assets/src/assets/components.scss b/assets/src/assets/components.scss index e8d24ed..71226ed 100644 --- a/assets/src/assets/components.scss +++ b/assets/src/assets/components.scss @@ -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); } } } diff --git a/assets/src/assets/public.scss b/assets/src/assets/public.scss index bd733c3..63f3108 100644 --- a/assets/src/assets/public.scss +++ b/assets/src/assets/public.scss @@ -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; } diff --git a/assets/src/components/ACarousel.vue b/assets/src/components/ACarousel.vue index 2cfdf1c..1af22bb 100644 --- a/assets/src/components/ACarousel.vue +++ b/assets/src/components/ACarousel.vue @@ -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;