From 02307e86cd13ba5a5e92220a2d99ace0582f4809 Mon Sep 17 00:00:00 2001 From: Alain Nussbaumer Date: Wed, 1 Jan 2025 17:22:17 +0100 Subject: [PATCH] [web] Move styles in the components --- web-src/src/components/BaseModal.vue | 17 +++ web-src/src/components/ControlSlider.vue | 110 ++++++++++++++++ web-src/src/components/ListItemQueueItem.vue | 8 +- web-src/src/components/ListTracksSpotify.vue | 8 +- web-src/src/mystyles.scss | 130 ------------------- 5 files changed, 141 insertions(+), 132 deletions(-) diff --git a/web-src/src/components/BaseModal.vue b/web-src/src/components/BaseModal.vue index 4fd6947d..fa2acb64 100644 --- a/web-src/src/components/BaseModal.vue +++ b/web-src/src/components/BaseModal.vue @@ -35,3 +35,20 @@ export default { } } + + diff --git a/web-src/src/components/ControlSlider.vue b/web-src/src/components/ControlSlider.vue index 2d4a82f5..a5cd9486 100644 --- a/web-src/src/components/ControlSlider.vue +++ b/web-src/src/components/ControlSlider.vue @@ -32,3 +32,113 @@ export default { } } + + diff --git a/web-src/src/components/ListItemQueueItem.vue b/web-src/src/components/ListItemQueueItem.vue index d35dcaff..0625c8c5 100644 --- a/web-src/src/components/ListItemQueueItem.vue +++ b/web-src/src/components/ListItemQueueItem.vue @@ -5,7 +5,7 @@ >
@@ -80,3 +80,9 @@ export default { } } + + diff --git a/web-src/src/components/ListTracksSpotify.vue b/web-src/src/components/ListTracksSpotify.vue index 05919d2b..aa96bb6d 100644 --- a/web-src/src/components/ListTracksSpotify.vue +++ b/web-src/src/components/ListTracksSpotify.vue @@ -5,7 +5,7 @@ class="media-content" :class="{ 'is-clickable': item.is_playable, - 'fd-is-not-allowed': !item.is_playable + 'is-not-allowed': !item.is_playable }" @click="play(item)" > @@ -82,3 +82,9 @@ export default { } } + + diff --git a/web-src/src/mystyles.scss b/web-src/src/mystyles.scss index 5710fd69..f72bfea9 100644 --- a/web-src/src/mystyles.scss +++ b/web-src/src/mystyles.scss @@ -3,14 +3,6 @@ @use 'bulma/bulma'; @use 'bulma/sass/utilities/mixins'; -.fd-is-not-allowed { - cursor: not-allowed; -} - -.fd-is-movable { - cursor: move; -} - .fd-tabs-section { padding-bottom: 0; padding-top: 0; @@ -93,22 +85,6 @@ padding-top: 1rem; } -/* Transition effect */ -.fade-leave-active { - transition: opacity 0.2s ease; -} -.fade-enter-active { - transition: opacity 0.5s ease; -} -.fade-enter-from, -.fade-leave-to { - opacity: 0; -} -.fade-enter-to, -.fade-leave-from { - opacity: 1; -} - /* Only scroll content if modal contains a card component */ .modal-content .card-content { max-height: calc(100vh - calc(4 * var(--bulma-navbar-height))); @@ -169,109 +145,3 @@ max-height: calc(100vh - calc(2 * var(--bulma-navbar-height))); overflow: auto; } - -/* Slider */ -@mixin thumb { - -webkit-appearance: none; - width: var(--th); - height: var(--th); - box-sizing: border-box; - border-radius: 50%; - background: var(--bulma-light); - border: 1px solid var(--bulma-grey-lighter); - @media (prefers-color-scheme: dark) { - background: var(--bulma-grey-lighter); - border: 1px solid var(--bulma-grey-dark); - } -} - -@mixin thumb-inactive { - box-sizing: border-box; - background-color: var(--bulma-light); - @media (prefers-color-scheme: dark) { - background-color: var(--bulma-grey-dark); - border: 1px solid var(--bulma-grey-darker); - } -} - -@mixin track { - height: calc(var(--sh)); - border-radius: calc(var(--sh) / 2); - background: linear-gradient( - 90deg, - var(--bulma-dark) var(--sx), - var(--bulma-grey-lighter) var(--sx) - ); - @media (prefers-color-scheme: dark) { - background: linear-gradient( - 90deg, - var(--bulma-grey-lighter) var(--sx), - var(--bulma-grey-dark) var(--sx) - ); - } -} - -@mixin track-inactive { - background: linear-gradient( - 90deg, - var(--bulma-grey-light) var(--sx), - var(--bulma-light) var(--sx) - ); - @media (prefers-color-scheme: dark) { - background: linear-gradient( - 90deg, - var(--bulma-grey-dark) var(--sx), - var(--bulma-black-ter) var(--sx) - ); - } -} - -input[type='range'].slider { - --sh: 0.25rem; - --th: calc(var(--sh) * 4); - background-color: transparent; - @include mixins.mobile { - --th: calc(var(--sh) * 5); - } - & { - --sx: calc(var(--th) / 2 + (var(--ratio) * (100% - var(--th)))); - -webkit-appearance: none; - min-width: 250px; - height: calc(var(--sh) * 5); - width: 100% !important; - cursor: grab; - } - &:active { - cursor: grabbing; - } - &::-webkit-slider-thumb { - @include thumb; - & { - margin-top: calc((var(--th) - var(--sh)) / -2); - } - } - &::-moz-range-thumb { - @include thumb; - } - &::-webkit-slider-runnable-track { - @include track; - } - &::-moz-range-track { - @include track; - } - &.is-inactive { - cursor: var(--cursor, not-allowed); - &::-webkit-slider-thumb { - @include thumb-inactive; - } - &::-webkit-slider-runnable-track { - @include track-inactive; - } - &::-moz-range-thumb { - @include thumb-inactive; - } - &::-moz-range-track { - @include track-inactive; - } - } -}