rc/aircox
13
1
Fork 1
Code Issues 15 Pull Requests Projects Releases Wiki Activity

fixes

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
aircox/static/aircox/css/admin.css
View File

@ -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;
}

21
aircox/static/aircox/css/chunk-common.css
View File

@ -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 {

71
aircox/static/aircox/css/public.css
View File

@ -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;
}

2
aircox/static/aircox/js/chunk-common.js
View File

@ -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");
/***/ }),

6
aircox/templates/aircox/widgets/item.html
View File

@ -32,11 +32,11 @@
{% endif %}
{% endblock %}
</section>
{% block actions-container %}
{{ block.super }}
{% endblock %}
</div>
</div>
{% block actions-container %}
{{ block.super }}
{% endblock %}
{% endblock %}
{% endblock %}

22
assets/src/assets/common.scss
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;
}

56
assets/src/assets/components.scss
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);
}
}
}

27
assets/src/assets/public.scss
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;
}

2
assets/src/components/ACarousel.vue
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;