DebaucheryLibrarian
/
traxxx
2
1
Fork 1
Code Issues 37 Pull Requests 1 Releases Wiki Activity

Refined dark theme.

This commit is contained in:
DebaucheryLibrarian 2021-03-23 20:37:20 +01:00
parent 8ff5a8c5e1
commit b2105c8fb0
9 changed files with 44 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/components/actors/actors.vue
View File

@ -516,7 +516,7 @@ export default {
display: flex;
justify-content: space-between;
padding: .75rem .5rem .5rem .5rem;
color: var(--darken);
color: var(--shadow);
font-weight: bold;
font-size: .9rem;
@ -598,7 +598,7 @@ export default {
min-width: 1.5rem;
flex-shrink: 0;
padding: 0 .5rem;
color: var(--darken);
color: var(--shadow);
font-weight: bold;
font-size: .9rem;
@ -607,7 +607,7 @@ export default {
}
.icon {
fill: var(--darken);
fill: var(--shadow);
}
&:hover {
@ -637,7 +637,7 @@ export default {
height: 1.25rem;
appearance: none;
border-radius: 1rem;
background-color: var(--darken-hint);
background-color: var(--shadow-hint);
background-image: radial-gradient(circle, var(--shadow-weak) .3rem, transparent calc(.3rem + 1px));
cursor: pointer;

8
assets/components/actors/filter-range.vue
View File

@ -87,14 +87,14 @@ export default {
.filter-section {
width: 15rem;
max-width: 100%;
border-bottom: solid 1px var(--darken-hint);
border-bottom: solid 1px var(--shadow-hint);
}
.filter-label {
display: flex;
justify-content: space-between;
padding: .75rem .5rem .5rem .5rem;
color: var(--darken);
color: var(--shadow);
font-weight: bold;
font-size: .9rem;
@ -180,7 +180,7 @@ export default {
min-width: 1.5rem;
flex-shrink: 0;
padding: 0 .5rem;
color: var(--darken);
color: var(--shadow);
font-weight: bold;
font-size: .9rem;
@ -189,7 +189,7 @@ export default {
}
.icon {
fill: var(--darken);
fill: var(--shadow);
}
&:hover {

8
assets/components/actors/gender.vue
View File

@ -23,19 +23,19 @@ export default {
.gender {
&.female .icon {
fill: var(--female);
filter: drop-shadow(0 0 1px var(--shadow));
filter: drop-shadow(0 0 1px var(--darken));
}
&.male .icon {
fill: var(--male);
filter: drop-shadow(0 0 1px var(--shadow));
filter: drop-shadow(0 0 1px var(--darken));
}
&.transsexual .icon {
fill: var(--text-contrast);
fill: var(--text-light);
filter: drop-shadow(1px 0 0 var(--female)) drop-shadow(-1px 0 0 var(--female)) drop-shadow(0 1px 0 var(--female)) drop-shadow(0 -1px 0 var(--female))
drop-shadow(1px 0 0 var(--male)) drop-shadow(-1px 0 0 var(--male)) drop-shadow(0 1px 0 var(--male)) drop-shadow(0 -1px 0 var(--male))
drop-shadow(0 0 1px var(--shadow))
drop-shadow(0 0 1px var(--darken))
}
}
</style>

22
assets/components/filters/filter-bar.vue
View File

@ -128,12 +128,17 @@ export default {
.filter-mode {
width: 100%;
color: var(--shadow);
background: none;
padding: .75rem;
margin: 0 0 .5rem 0;
font-size: 1rem;
border: none;
border-bottom: solid 1px var(--shadow-hint);
option {
color: var(--text-dark);
}
}
.filter-clear {
@ -141,25 +146,25 @@ export default {
align-items: center;
justify-content: space-between;
padding: .5rem 1rem;
color: var(--darken-weak);
color: var(--shadow-weak);
text-decoration: none;
cursor: default;
.icon {
fill: var(--darken-hint);
fill: var(--shadow-hint);
margin: 0 0 0 1rem;
}
&.active {
color: var(--darken);
color: var(--shadow);
.icon {
fill: var(--darken-weak);
fill: var(--shadow-weak);
}
&:hover {
color: var(--text);
background: var(--darken-hint);
background: var(--shadow-hint);
cursor: pointer;
.icon {
@ -174,7 +179,7 @@ export default {
align-items: center;
&:hover {
background: var(--darken-hint);
background: var(--shadow-hint);
cursor: pointer;
}
@ -202,7 +207,7 @@ export default {
width: 1rem;
height: 1rem;
padding: .5rem 1rem;
fill: var(--darken-hint);
fill: var(--shadow-hint);
}
.filter-remove {
@ -226,7 +231,7 @@ export default {
.filter-include:hover,
.filter-name:hover {
background: var(--darken-hint);
background: var(--shadow-hint);
}
@media(max-width: $breakpoint-small) {
@ -299,7 +304,6 @@ export default {
}
}
.filters {
flex-shrink: 0;
}

6
assets/components/form/range.vue
View File

@ -163,6 +163,12 @@ export default {
};
</script>
<style lang="scss">
.dark .range-container .range {
--slider-range: var(--lighten-weak);
}
</style>
<style lang="scss" scoped>
@mixin thumb {
appearance: none;

12
assets/components/header/menu.vue
View File

@ -134,20 +134,20 @@ export default {
.menu-item {
display: flex;
padding: .75rem 1rem .75rem .75rem;
color: inherit;
color: var(--text);
text-decoration: none;
.icon {
fill: var(--darken);
fill: var(--shadow);
margin: 0 1rem 0 0;
}
&.disabled {
color: var(--darken-weak);
color: var(--shadow-weak);
cursor: default;
.icon {
fill: var(--darken-weak);
fill: var(--shadow-weak);
}
}
@ -164,10 +164,10 @@ export default {
.menu-username {
display: block;
font-weight: bold;
color: var(--darken-strong);
color: var(--shadow-strong);
font-size: .9rem;
padding: .75rem 1rem;
border-bottom: solid 1px var(--darken-hint);
border-bottom: solid 1px var(--shadow-hint);
text-align: center;
text-decoration: none;
}

4
assets/components/tooltip/tooltip.vue
View File

@ -160,7 +160,7 @@ export default {
.tooltip {
position: relative;
background: var(--background-light);
background: var(--background);
}
.tooltip-arrow {
@ -172,7 +172,7 @@ export default {
left: calc(50% - .5rem);
border-left: .5rem solid transparent;
border-right: .5rem solid transparent;
border-bottom: .5rem solid var(--background-light);
border-bottom: .5rem solid var(--background);
margin: 0 auto;
filter: drop-shadow(0 0 3px var(--darken-weak));
}

2
assets/components/users/stash.vue
View File

@ -139,7 +139,7 @@ export default {
min-width: 0;
height: 100%;
background: var(--background);
box-shadow: 0 0 3px var(--shadow-weak);
box-shadow: 0 0 3px var(--darken-weak);
}
.stash-section {

8
assets/css/_theme.scss
View File

@ -90,11 +90,11 @@ $breakpoint4: 1500px;
--text: #fff;
--text-contrast: #222;
--background: var(--background-dark);
--background-dim: #181818;
--background-soft: #111;
--background: #181818;
--background-dim: #111;
--background-soft: #000;
--profile: #000;
--profile: #0a0a0a;
--tile: #2a2a2a;
--link: #dd6688;