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

Removed all old SASS color variables.

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
Show Stats 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>

2
assets/components/entities/tile.vue
View File

@ -50,7 +50,7 @@ export default {
.tile {
height: 6rem;
background: $tile;
background: var(--tile);
display: flex;
flex-shrink: 0;
justify-content: center;

20
assets/components/errors/404.vue
View File

@ -1,20 +1,20 @@
<template>
<div class="errorpage">
<h1 class="error">404 - Not Found</h1>
<div class="errorpage">
<h1 class="error">404 - Not Found</h1>
<a
href="/"
class="home"
>Take me home</a>
</div>
<a
href="/"
class="home"
>Take me home</a>
</div>
</template>
<style lang="scss" scoped>
@import 'theme';
.errorpage {
background: $background;
color: $primary;
background: var(--background);
color: var(--primary);
height: 100%;
display: flex;
flex-direction: column;
@ -28,7 +28,7 @@
}
.home {
color: $shadow;
color: var(--shadow);
margin: 3rem 0;
}
</style>

6
assets/css/_inputs.scss
View File

@ -1,8 +1,8 @@
.select {
color: $shadow-strong;
background: $background;
color: var(--shadow-strong);
background: var(--background);
padding: .5rem;
font-size: 1rem;
border: solid 1px $shadow-weak;
border: solid 1px var(--shadow-weak);
cursor: pointer;
}

32
assets/css/_theme.scss
View File

@ -1,41 +1,11 @@
/* $primary: #ff886c; */
$breakpoint0: 540px;
$breakpoint: 720px;
$breakpoint2: 900px;
$breakpoint3: 1200px;
$breakpoint4: 1500px;
$primary: #ff6c88;
$background: #fff;
$background-dim: #fafafa;
$text: #222;
$text-contrast: #fff;
$shadow: rgba(0, 0, 0, .5);
$shadow-extreme: rgba(0, 0, 0, .9);
$shadow-strong: rgba(0, 0, 0, .7);
$shadow-weak: rgba(0, 0, 0, .2);
$shadow-hint: rgba(0, 0, 0, .1);
$highlight: rgba(255, 255, 255, .5);
$highlight-extreme: rgba(255, 255, 255, .9);
$highlight-strong: rgba(255, 255, 255, .7);
$highlight-weak: rgba(255, 255, 255, .2);
$highlight-hint: rgba(255, 255, 255, .075);
$logo-shadow: drop-shadow(1px 0 0 var(--shadow-weak)) drop-shadow(-1px 0 0 var(--shadow-weak)) drop-shadow(0 1px 0 var(--shadow-weak)) drop-shadow(0 -1px 0 var(--shadow-weak));
$logo-highlight: drop-shadow(0 0 1px var(--highlight));
$profile: #222;
$tile: #2a2a2a;
$link: #dd6688;
$empty: #333;
$male: #0af;
$female: #f0a;
:root {
/* --primary: #ff886c; */
--primary: #ff6c88;
--text-dark: #222;

4
assets/css/style.scss
View File

@ -31,9 +31,9 @@ body {
}
.icon.icon-href {
fill: $shadow;
fill: var(--shadow);
:hover {
fill: $primary;
fill: var(--primary);
}
}

1
assets/js/networks/state.js
View File

@ -1 +0,0 @@
export default {};

1
assets/js/sites/state.js
View File

@ -1 +0,0 @@
export default {};

6
assets/js/store.js
View File

@ -5,8 +5,6 @@ import initUiStore from './ui/ui';
import initAuthStore from './auth/auth';
import initReleasesStore from './releases/releases';
import initEntitiesStore from './entities/entities';
// import initSitesStore from './sites/sites';
// import initNetworksStore from './networks/networks';
import initActorsStore from './actors/actors';
import initTagsStore from './tags/tags';
@ -18,10 +16,8 @@ function initStore(router) {
store.registerModule('ui', initUiStore(store, router));
store.registerModule('auth', initAuthStore(store, router));
store.registerModule('releases', initReleasesStore(store, router));
store.registerModule('actors', initActorsStore(store, router));
store.registerModule('entities', initEntitiesStore(store, router));
// store.registerModule('sites', initSitesStore(store, router));
// store.registerModule('networks', initNetworksStore(store, router));
store.registerModule('actors', initActorsStore(store, router));
store.registerModule('tags', initTagsStore(store, router));
return store;