mirror of
https://github.com/owntone/owntone-server.git
synced 2025-03-20 04:24:20 -04:00
[web] Move styles in the components
This commit is contained in:
Alain Nussbaumer
parent
16a76fdc58
commit
02307e86cd
@ -35,3 +35,20 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -32,3 +32,113 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use 'bulma/bulma';
|
||||
@use 'bulma/sass/utilities/mixins';
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
>
|
||||
<div v-if="edit_mode" class="media-left">
|
||||
<mdicon
|
||||
class="icon has-text-grey fd-is-movable"
|
||||
class="icon has-text-grey is-movable"
|
||||
name="drag-horizontal"
|
||||
size="18"
|
||||
/>
|
||||
@ -80,3 +80,9 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.is-movable {
|
||||
cursor: move;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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 {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.is-not-allowed {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user