starred/audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2026-08-08 21:08:43 +02:00
Code Issues 454 Packages Projects Releases 10 Wiki Activity

Update:Light theme colors for track progress bar and ereader settings #916

Browse Source
This commit is contained in:
advplyr
2023-12-13 16:57:44 -06:00
parent d9f4ed3d54
commit 19d6c84113
9 changed files with 72 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ui/RangeInput.vue
+8 -8
View File
@@ -49,7 +49,7 @@ input[type='range']:focus {
/* chromium */
input[type='range']::-webkit-slider-runnable-track {
background-color: rgb(0 0 0 / 0.25);
background-color: rgb(var(--color-track) / 0.5);
border-radius: 9999px;
height: 0.75rem;
}
@@ -58,19 +58,19 @@ input[type='range']::-webkit-slider-thumb {
appearance: none;
margin-top: -0.25rem;
border-radius: 9999px;
background-color: rgb(255 255 255 / 0.7);
background-color: rgb(var(--color-track-cursor));
height: 1.25rem;
width: 1.25rem;
}
input[type='range']:focus::-webkit-slider-thumb {
border: 1px solid #6b6b6b;
outline: 3px solid #6b6b6b;
border: 1px solid rgb(var(--color-track));
outline: 3px solid rgb(var(--color-track));
outline-offset: 0.125rem;
}
/* firefox */
input[type='range']::-moz-range-track {
background-color: rgb(0 0 0 / 0.25);
background-color: rgb(var(--color-track) / 0.5);
border-radius: 9999px;
height: 0.75rem;
}
@@ -78,13 +78,13 @@ input[type='range']::-moz-range-thumb {
border: none;
border-radius: 9999px;
margin-top: -0.25rem;
background-color: rgb(255 255 255 / 0.7);
background-color: rgb(var(--color-track-cursor));
height: 1.25rem;
width: 1.25rem;
}
input[type='range']:focus::-moz-range-thumb {
border: 1px solid #6b6b6b;
outline: 3px solid #6b6b6b;
border: 1px solid rgb(var(--color-track));
outline: 3px solid rgb(var(--color-track));
outline-offset: 0.125rem;
}
</style>
components/ui/ToggleBtns.vue
+5 -30
View File
@@ -1,6 +1,6 @@
<template>
<div class="inline-flex toggle-btn-wrapper shadow-md">
<button v-for="item in items" :key="item.value" type="button" class="toggle-btn outline-none relative border border-gray-600 px-4 py-1" :class="{ selected: item.value === value }" @click.stop="clickBtn(item.value)">
<button v-for="item in items" :key="item.value" type="button" class="toggle-btn outline-none relative border border-border px-4 py-1" :class="{ selected: item.value === value }" @click.stop="clickBtn(item.value)">
{{ item.text }}
</button>
</div>
@@ -10,9 +10,6 @@
export default {
props: {
value: String,
/**
* [{ "text", "", "value": "" }]
*/
items: {
type: Array,
default: Object
@@ -52,34 +49,12 @@ export default {
.toggle-btn-wrapper .toggle-btn:not(:first-child) {
margin-left: -1px;
}
.toggle-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0);
transition: all 0.1s ease-in-out;
}
.toggle-btn:hover:not(:disabled)::before {
background-color: rgba(255, 255, 255, 0.1);
}
.toggle-btn:hover:not(:disabled) {
color: white;
}
.toggle-btn {
color: rgba(255, 255, 255, 0.75);
background-color: rgb(var(--color-bg-toggle));
color: rgb(var(--color-fg) / 0.5);
}
.toggle-btn.selected {
color: white;
}
.toggle-btn.selected::before {
background-color: rgba(255, 255, 255, 0.1);
}
button.toggle-btn:disabled::before {
background-color: rgba(0, 0, 0, 0.2);
background-color: rgb(var(--color-bg-toggle-selected));
color: rgb(var(--color-fg));
}
</style>