boiii/traxxx
1
0
Fork 0
forked from DebaucheryLibrarian/traxxx
Code Issues Pull Requests Projects Releases Wiki Activity

Removed all old SASS color variables.

Browse Source
This commit is contained in:
ThePendulum
2020-07-05 04:27:46 +02:00
parent f4ef2d4cc2
commit e4144409f0
12 changed files with 90 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
assets/components/actors/actor.vue
View File

@@ -401,8 +401,8 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
color: $highlight-extreme;
background: $profile;
color: var(--highlight-extreme);
background: var(--profile);
padding: .75rem 1rem;
}
@@ -435,8 +435,8 @@ export default {
}
.profile {
background: $profile;
color: $highlight-extreme;
background: var(--profile);
color: var(--highlight-extreme);
width: 100%;
max-height: 18rem;
display: flex;
@@ -493,7 +493,7 @@ export default {
overflow: hidden;
&:not(:last-of-type) {
border-bottom: solid 1px $highlight-hint;
border-bottom: solid 1px var(--highlight-hint);
}
}
@@ -504,14 +504,14 @@ export default {
}
.bio-label {
color: $highlight;
color: var(--highlight);
margin: 0 1rem 0 0;
flex-shrink: 0;
font-style: normal;
font-weight: 400;
.icon {
fill: $highlight;
fill: var(--highlight);
margin: -.25rem .5rem 0 0;
}
}
@@ -545,7 +545,7 @@ export default {
.age {
font-weight: bold;
padding: 0 0 0 .5rem;
border-left: solid 1px $highlight-weak;
border-left: solid 1px var(--highlight-weak);
margin: 0 0 0 .5rem;
}
@@ -561,12 +561,12 @@ export default {
.height-imperial,
.weight-imperial {
padding: 0 0 0 .5rem;
border-left: solid 1px $highlight-weak;
border-left: solid 1px var(--highlight-weak);
margin: 0 0 0 .5rem;
}
.enhanced.icon {
fill: $primary;
fill: var(--primary);
padding: 0 .5rem;
transform: scaleX(-1);
}
@@ -578,7 +578,7 @@ export default {
}
.scraped {
color: $highlight-weak;
color: var(--highlight-weak);
font-size: .8rem;
}
@@ -659,27 +659,27 @@ export default {
cursor: pointer;
.icon {
fill: $shadow;
fill: var(--shadow);
}
&:hover {
background: $shadow-hint;
background: var(--shadow-hint);
.icon {
fill: $shadow-strong;
fill: var(--shadow-strong);
}
}
}
.expand-sidebar:hover {
background: $shadow-hint;
background: var(--shadow-hint);
}
.expand-header {
display: none;
&:hover {
background: $shadow-hint;
background: var(--shadow-hint);
}
}
@@ -689,17 +689,17 @@ export default {
justify-content: center;
align-items: center;
padding: 0;
background: $profile;
background: var(--profile);
.icon {
width: 100%;
fill: $highlight;
fill: var(--highlight);
padding: .5rem 0;
}
&:hover .icon {
background: $highlight-hint;
fill: $text-contrast;
background: var(--highlight-hint);
fill: var(--text-contrast);
}
}

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

@@ -1,19 +1,19 @@
<template>
<span
v-if="gender"
class="gender"
:class="{ [gender]: true }"
><Icon :icon="gender" /></span>
<span
v-if="gender"
class="gender"
:class="{ [gender]: true }"
><Icon :icon="gender" /></span>
</template>
<script>
export default {
props: {
gender: {
type: String,
default: null,
},
},
props: {
gender: {
type: String,
default: null,
},
},
};
</script>
@@ -22,20 +22,20 @@ export default {
.gender {
&.female .icon {
fill: $female;
filter: drop-shadow(0 0 1px $shadow);
fill: var(--female);
filter: drop-shadow(0 0 1px var(--shadow));
}
&.male .icon {
fill: $male;
filter: drop-shadow(0 0 1px $shadow);
fill: var(--male);
filter: drop-shadow(0 0 1px var(--shadow));
}
&.transsexual .icon {
fill: $text-contrast;
filter: drop-shadow(1px 0 0 $female) drop-shadow(-1px 0 0 $female) drop-shadow(0 1px 0 $female) drop-shadow(0 -1px 0 $female)
drop-shadow(1px 0 0 $male) drop-shadow(-1px 0 0 $male) drop-shadow(0 1px 0 $male) drop-shadow(0 -1px 0 $male)
drop-shadow(0 0 1px $shadow)
fill: var(--text-contrast);
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))
}
}
</style>

2
assets/components/actors/photos.vue
View File

@@ -110,7 +110,7 @@ export default {
.photo {
height: 15rem;
box-shadow: 0 0 3px $shadow-weak;
box-shadow: 0 0 3px var(--darken-weak);
object-fit: cover;
}

64
assets/components/actors/social.vue
View File

@@ -1,38 +1,38 @@
<template>
<div
v-if="actor"
class="social"
>
<a
v-for="social in actor.social"
:key="`social-${social.id}`"
v-tooltip.bottom="social.url"
:href="social.url"
target="_blank"
rel="noopener noreferrer"
class="social-link"
>
<Icon
v-if="social.platform"
:icon="social.platform"
/>
<div
v-if="actor"
class="social"
>
<a
v-for="social in actor.social"
:key="`social-${social.id}`"
v-tooltip.bottom="social.url"
:href="social.url"
target="_blank"
rel="noopener noreferrer"
class="social-link"
>
<Icon
v-if="social.platform"
:icon="social.platform"
/>
<Icon
v-else
icon="link"
/>
</a>
</div>
<Icon
v-else
icon="link"
/>
</a>
</div>
</template>
<script>
export default {
props: {
actor: {
type: Object,
default: null,
},
},
props: {
actor: {
type: Object,
default: null,
},
},
};
</script>
@@ -48,14 +48,14 @@ export default {
padding: 0 0 0 1rem;
.icon {
color: $highlight;
fill: $highlight;
color: var(--highlight);
fill: var(--highlight);
width: 1.5rem;
height: 1.5rem;
}
&:hover .icon {
fill: $primary;
fill: var(--primary);
}
}
</style>