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

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

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

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

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

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

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

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

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

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

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

6
assets/css/_inputs.scss
View File

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

32
assets/css/_theme.scss
View File

@ -1,41 +1,11 @@
/* $primary: #ff886c; */
$breakpoint0: 540px; $breakpoint0: 540px;
$breakpoint: 720px; $breakpoint: 720px;
$breakpoint2: 900px; $breakpoint2: 900px;
$breakpoint3: 1200px; $breakpoint3: 1200px;
$breakpoint4: 1500px; $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 { :root {
/* --primary: #ff886c; */
--primary: #ff6c88; --primary: #ff6c88;
--text-dark: #222; --text-dark: #222;

4
assets/css/style.scss
View File

@ -31,9 +31,9 @@ body {
} }
.icon.icon-href { .icon.icon-href {
fill: $shadow; fill: var(--shadow);
:hover { :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 initAuthStore from './auth/auth';
import initReleasesStore from './releases/releases'; import initReleasesStore from './releases/releases';
import initEntitiesStore from './entities/entities'; import initEntitiesStore from './entities/entities';
// import initSitesStore from './sites/sites';
// import initNetworksStore from './networks/networks';
import initActorsStore from './actors/actors'; import initActorsStore from './actors/actors';
import initTagsStore from './tags/tags'; import initTagsStore from './tags/tags';
@ -18,10 +16,8 @@ function initStore(router) {
store.registerModule('ui', initUiStore(store, router)); store.registerModule('ui', initUiStore(store, router));
store.registerModule('auth', initAuthStore(store, router)); store.registerModule('auth', initAuthStore(store, router));
store.registerModule('releases', initReleasesStore(store, router)); store.registerModule('releases', initReleasesStore(store, router));
store.registerModule('actors', initActorsStore(store, router));
store.registerModule('entities', initEntitiesStore(store, router)); store.registerModule('entities', initEntitiesStore(store, router));
// store.registerModule('sites', initSitesStore(store, router)); store.registerModule('actors', initActorsStore(store, router));
// store.registerModule('networks', initNetworksStore(store, router));
store.registerModule('tags', initTagsStore(store, router)); store.registerModule('tags', initTagsStore(store, router));
return store; return store;