DebaucheryLibrarian/traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Added dark theme. Fixed actor country aggregation.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2024-06-10 03:24:48 +02:00
parent 255dd48af6
commit 69cefa57ff
38 changed files with 299 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/filters/birthdate.vue
View File

@@ -80,7 +80,7 @@ const emit = defineEmits(['update']);
.select {
flex-grow: 1;
color: var(--shadow-strong-10);
color: var(--glass-strong-10);
option {
color: var(--text);

2
components/filters/channels.vue
View File

@@ -171,7 +171,7 @@ const entities = computed(() => {
width: 2.25rem;
height: 1rem;
transform: rotate(-135deg);
fill: var(--shadow-weak-30);
fill: var(--glass-weak-30);
overflow: hidden; /* prevent parent jumping on load */
}
}

6
components/filters/countries.vue
View File

@@ -42,7 +42,7 @@ const emit = defineEmits(['country']);
<style scoped>
.countries:not(:last-child) {
border-bottom: solid 1px var(--shadow-weak-30);
border-bottom: solid 1px var(--glass-weak-30);
}
.country {
@@ -57,7 +57,7 @@ const emit = defineEmits(['country']);
}
&:hover {
background: var(--shadow-weak-30);
background: var(--glass-weak-30);
cursor: pointer;
}
@@ -78,7 +78,7 @@ const emit = defineEmits(['country']);
display: flex;
align-items: center;
padding: .5rem;
fill: var(--shadow);
fill: var(--glass);
&:hover {
fill: var(--error);

42
components/filters/filters.vue
View File

@@ -81,7 +81,7 @@ function toggleFilters(state) {
}
&:not(:last-child) {
border-bottom: solid 1px var(--shadow-weak-30);
border-bottom: solid 1px var(--glass-weak-30);
}
}
@@ -98,7 +98,7 @@ function toggleFilters(state) {
display: flex;
align-items: center;
padding-left: .5rem;
fill: var(--shadow);
fill: var(--glass);
&:hover {
cursor: pointer;
@@ -109,13 +109,13 @@ function toggleFilters(state) {
.filter-mode {
width: 100%;
color: var(--shadow);
color: var(--glass);
background: none;
padding: .75rem;
margin: 0 0 .5rem 0;
font-size: 1rem;
border: none;
border-bottom: solid 1px var(--shadow-hint);
border-bottom: solid 1px var(--glass-weak-40);
option {
color: var(--text-dark);
@@ -124,7 +124,7 @@ function toggleFilters(state) {
.filters-sort {
display: flex;
border-bottom: solid 1px var(--shadow-weak-30);
border-bottom: solid 1px var(--glass-weak-30);
}
.filters-search {
@@ -138,25 +138,25 @@ function toggleFilters(state) {
align-items: center;
justify-content: space-between;
padding: .5rem 1rem;
color: var(--shadow-weak-10);
color: var(--glass-weak-10);
text-decoration: none;
cursor: default;
.icon {
fill: var(--shadow-weak-30);
fill: var(--glass-weak-30);
margin: 0 0 0 1rem;
}
&.active {
color: var(--shadow);
color: var(--glass);
.icon {
fill: var(--shadow-weak-10);
fill: var(--glass-weak-10);
}
&:hover {
color: var(--text);
background: var(--shadow-hint);
background: var(--glass-weak-30);
cursor: pointer;
.icon {
@@ -184,7 +184,7 @@ function toggleFilters(state) {
align-items: stretch;
&:hover {
background: var(--shadow-weak-30);
background: var(--glass-weak-30);
cursor: pointer;
}
@@ -240,7 +240,7 @@ function toggleFilters(state) {
.icon {
width: 1rem;
padding: 0 .75rem;
fill: var(--shadow-weak-30);
fill: var(--glass-weak-30);
}
.filter-remove {
@@ -255,7 +255,7 @@ function toggleFilters(state) {
.filter-include:hover,
.filter-name:hover {
background: var(--shadow-weak-30);
background: var(--glass-weak-30);
}
.filter-sort {
@@ -267,14 +267,14 @@ function toggleFilters(state) {
padding: 0 .25rem;
cursor: pointer;
font-weight: bold;
color: var(--shadow);
color: var(--glass);
&.order {
padding: 0 .5rem 0 .25rem;
}
.icon {
fill: var(--shadow);
fill: var(--glass);
}
&:hover {
@@ -293,7 +293,7 @@ function toggleFilters(state) {
.filter-remove.icon {
padding: .25rem .6rem;
fill: var(--shadow);
fill: var(--glass);
&:hover {
fill: var(--alert);
@@ -308,13 +308,13 @@ function toggleFilters(state) {
justify-content: flex-end;
padding: 0 .25rem;
overflow: hidden;
color: var(--shadow-weak-10);
color: var(--glass-weak-10);
font-size: .9rem;
}
.filter-empty {
padding: .5rem;
color: var(--shadow);
color: var(--glass);
font-style: italic;
}
@@ -329,7 +329,7 @@ function toggleFilters(state) {
@media (--compact) {
.filter {
border-right: solid 1px var(--shadow-weak-30);
border-right: solid 1px var(--glass-weak-30);
}
}
</style>
@@ -377,7 +377,7 @@ function toggleFilters(state) {
right: -2.5rem;
border-radius: 0 .5rem .5rem 0;
background: var(--background);
color: var(--shadow);
color: var(--glass);
font-weight: bold;
box-shadow: inset 0 0 3px var(--shadow-weak-30);
@@ -395,7 +395,7 @@ function toggleFilters(state) {
}
.icon {
fill: var(--shadow);
fill: var(--glass);
}
&:hover {

5
components/filters/gender.vue
View File

@@ -75,7 +75,8 @@ const emit = defineEmits(['update']);
justify-content: center;
box-sizing: border-box;
border: none;
color: var(--shadow);
border-radius: 100%;
color: var(--glass);
background: var(--background);
font-weight: bold;
text-decoration: none;
@@ -89,7 +90,7 @@ const emit = defineEmits(['update']);
}
.icon {
fill: var(--shadow);
fill: var(--glass);
}
&:hover {