boiii
/
traxxx
forked from DebaucheryLibrarian/traxxx
1
0
Fork 0
Code Issues Pull Requests Projects 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; display: flex;
justify-content: space-between; justify-content: space-between;
padding: .75rem .5rem .5rem .5rem; padding: .75rem .5rem .5rem .5rem;
color: var(--darken); color: var(--shadow);
font-weight: bold; font-weight: bold;
font-size: .9rem; font-size: .9rem;
@ -598,7 +598,7 @@ export default {
min-width: 1.5rem; min-width: 1.5rem;
flex-shrink: 0; flex-shrink: 0;
padding: 0 .5rem; padding: 0 .5rem;
color: var(--darken); color: var(--shadow);
font-weight: bold; font-weight: bold;
font-size: .9rem; font-size: .9rem;
@ -607,7 +607,7 @@ export default {
} }
.icon { .icon {
fill: var(--darken); fill: var(--shadow);
} }
&:hover { &:hover {
@ -637,7 +637,7 @@ export default {
height: 1.25rem; height: 1.25rem;
appearance: none; appearance: none;
border-radius: 1rem; 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)); background-image: radial-gradient(circle, var(--shadow-weak) .3rem, transparent calc(.3rem + 1px));
cursor: pointer; cursor: pointer;

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

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

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

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

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

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

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

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

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

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

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

@ -160,7 +160,7 @@ export default {
.tooltip { .tooltip {
position: relative; position: relative;
background: var(--background-light); background: var(--background);
} }
.tooltip-arrow { .tooltip-arrow {
@ -172,7 +172,7 @@ export default {
left: calc(50% - .5rem); left: calc(50% - .5rem);
border-left: .5rem solid transparent; border-left: .5rem solid transparent;
border-right: .5rem solid transparent; border-right: .5rem solid transparent;
border-bottom: .5rem solid var(--background-light); border-bottom: .5rem solid var(--background);
margin: 0 auto; margin: 0 auto;
filter: drop-shadow(0 0 3px var(--darken-weak)); 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; min-width: 0;
height: 100%; height: 100%;
background: var(--background); background: var(--background);
box-shadow: 0 0 3px var(--shadow-weak); box-shadow: 0 0 3px var(--darken-weak);
} }
.stash-section { .stash-section {

8
assets/css/_theme.scss
View File

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