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

Added transition to theme switch.

This commit is contained in:
ThePendulum 2020-04-02 03:11:00 +02:00
parent c39bfb234d
commit 5d467622f4
14 changed files with 39 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/components/container/container.vue
View File

@ -73,6 +73,7 @@ export default {
overflow: hidden;
background: var(--background-dim);
color: var(--text);
transition: background var(--theme-transition);
}
.content {

2
assets/components/header/filter-bar.vue
View File

@ -175,6 +175,7 @@ export default {
z-index: 1;
font-size: 0;
box-shadow: 0 0 3px var(--darken);
transition: background var(--theme-transition);
.icon {
fill: var(--shadow);
@ -205,6 +206,7 @@ export default {
box-shadow: 0 0 2px var(--shadow-weak);
font-size: .8rem;
font-weight: bold;
transition: background var(--theme-transition), color var(--theme-transition);
&:hover {
color: var(--text);

1
assets/components/header/filters.vue
View File

@ -124,6 +124,7 @@ export default {
font-size: .9rem;
font-weight: bold;
cursor: pointer;
transition: color var(--theme-transition);
.check {
display: none;

2
assets/components/header/header.vue
View File

@ -185,6 +185,7 @@ export default {
color: var(--primary);
box-shadow: 0 1px 0 var(--darken-hint);
font-size: 0;
transition: background var(--theme-transition);
}
.header-nav {
@ -253,6 +254,7 @@ export default {
font-size: .9rem;
font-weight: bold;
cursor: pointer;
transition: color var(--theme-transition);
&.active {
color: var(--primary);

2
assets/components/header/search.vue
View File

@ -93,9 +93,11 @@ export default {
outline: none;
font-size: 1rem;
outline: none;
transition: background var(--theme-transition), color var(--theme-transition);
&::placeholder {
color: var(--shadow);
transition: color var(--theme-transition);
}
&::-webkit-search-cancel-button {

1
assets/components/icon/icon.vue
View File

@ -43,6 +43,7 @@ export default {
flex-shrink: 0;
width: 1rem;
height: 1rem;
transition: fill var(--theme-transition);
svg {
width: 100%;

1
assets/components/networks/networks.vue
View File

@ -113,6 +113,7 @@ export default {
margin: 1rem 0;
font-size: 1rem;
outline: none;
transition: background var(--theme-transition);
&:focus {
box-shadow: 0 0 3px var(--primary);

36
assets/components/releases/release.vue
View File

@ -210,24 +210,11 @@
class="link added"
>{{ formatDate(release.dateAdded, 'MMMM D, YYYY') }}</a>
</span>
<div class="row">
<Icon icon="paste2" />
<input
class="filename"
:value="filename"
@focus="copyFilename"
>
</div>
</div>
</div>
</template>
<script>
import config from 'config';
import format from 'template-format';
import Banner from './banner.vue';
import Actor from '../tile/actor.vue';
import Release from '../tile/release.vue';
@ -237,20 +224,8 @@ function pageTitle() {
return this.release && this.release.title;
}
function copyFilename(event) {
event.target.setSelectionRange(0, event.target.value.length);
document.execCommand('copy');
}
async function mounted() {
this.release = await this.$store.dispatch('fetchReleaseById', this.$route.params.releaseId);
this.filename = format(config.filename.pattern, {
...this.release,
shootId: this.release.shootId || '',
date: this.formatDate(this.release.date, config.filename.date),
}, {
spreadSeparator: config.filename.separator,
});
}
export default {
@ -270,9 +245,6 @@ export default {
pageTitle,
},
mounted,
methods: {
copyFilename,
},
};
</script>
@ -313,7 +285,7 @@ export default {
.details {
background: var(--profile);
color: var(--text-light);
box-shadow: 0 0 3px var(--shadow-weak);
box-shadow: 0 0 3px var(--darken-weak);
cursor: default;
.column {
@ -324,6 +296,7 @@ export default {
.link {
color: var(--text-light);
transition: color var(--theme-transition);
}
}
@ -385,10 +358,12 @@ export default {
.title {
margin: 0 0 1.5rem 0;
transition: color var(--theme-transition);
}
.description {
line-height: 1.5;
transition: color var(--theme-transition);
}
.duration {
@ -440,9 +415,10 @@ export default {
display: inline-block;
padding: .5rem;
margin: 0 .25rem .25rem 0;
box-shadow: 0 0 2px var(--shadow-weak);
box-shadow: 0 0 2px var(--darken-weak);
text-decoration: none;
text-transform: capitalize;
transition: background var(--theme-transition);
&:hover {
color: var(--primary);

1
assets/components/releases/releases.vue
View File

@ -83,6 +83,7 @@ export default {
.empty {
color: var(--shadow-strong);
font-weight: bold;
transition: color var(--theme-transition);
}
@media(max-width: $breakpoint4) {

8
assets/components/tile/release.vue
View File

@ -184,13 +184,14 @@ export default {
.tile {
background: var(--background);
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 0 0 .5rem 0;
overflow: hidden;
box-shadow: 0 0 3px var(--shadow-weak);
height: 100%;
box-shadow: 0 0 3px var(--darken-weak);
transition: background var(--theme-transition);
}
.poster {
@ -299,6 +300,7 @@ export default {
line-height: 1.5;
text-overflow: ellipsis;
overflow: hidden;
transition: color var(--theme-transition);
.icon {
margin: 0 .25rem 0 0;
@ -316,6 +318,7 @@ export default {
overflow: hidden;
max-height: 2.75rem;
line-height: 1.5rem;
transition: color var(--theme-transition);
}
.tags {
@ -358,6 +361,7 @@ export default {
text-decoration: none;
line-height: 1;
border: solid 1px var(--shadow-hint);
transition: color var(--theme-transition), border-color var(--theme-transition);
&:hover {
color: var(--primary);

6
assets/components/tile/site.vue
View File

@ -47,18 +47,18 @@ export default {
.logo {
width: 100%;
height: 5rem;
color: $text-contrast;
color: var(--text-contrast);
display: flex;
align-items: center;
justify-content: center;
object-fit: contain;
font-size: 1rem;
font-weight: bold;
filter: $logo-highlight;
filter: var(--logo-highlight);
}
.title {
color: $text;
color: var(--text);
height: 100%;
display: flex;
align-items: center;

7
assets/css/_states.scss
View File

@ -1,3 +1,9 @@
$breakpoint0: 540px;
$breakpoint: 720px;
$breakpoint2: 900px;
$breakpoint3: 1200px;
$breakpoint4: 1500px;
.noselect {
user-select: none;
-webkit-user-select: none;
@ -14,7 +20,6 @@
li {
display: inline-block;
padding: 0;
margin: 0;
}
}

13
assets/css/_theme.scss
View File

@ -1,9 +1,6 @@
@import 'states';
/* $primary: #ff886c; */
$breakpoint0: 540px;
$breakpoint: 720px;
$breakpoint2: 900px;
$breakpoint3: 1200px;
$breakpoint4: 1500px;
$primary: #ff6c88;
$background: #fff;
@ -36,6 +33,8 @@ $male: #0af;
$female: #f0a;
:root {
--theme-transition: .5s ease;
--primary: #ff6c88;
--text-dark: #222;
@ -53,8 +52,8 @@ $female: #f0a;
--lighten-weak: rgba(255, 255, 255, .2);
--lighten-hint: rgba(255, 255, 255, .1);
--logo-shadow: drop-shadow(1px 0 0 $shadow-weak) drop-shadow(-1px 0 0 $shadow-weak) drop-shadow(0 1px 0 $shadow-weak) drop-shadow(0 -1px 0 $shadow-weak);
--logo-highlight: drop-shadow(0 0 1px $highlight);
--logo-shadow: drop-darken(1px 0 0 $darken-weak) drop-darken(-1px 0 0 $darken-weak) drop-darken(0 1px 0 $darken-weak) drop-darken(0 -1px 0 $darken-weak);
--logo-highlight: drop-shadow(0 0 1px $lighten);
--alert: #f00;
--warn: #fa0;

2
assets/css/style.scss
View File

@ -1,6 +1,5 @@
@import 'theme';
@import 'inputs';
@import 'states';
@import 'tooltip';
html,
@ -28,6 +27,7 @@ body {
padding: 0;
margin: 0 0 1rem 0;
font-size: 1.5rem;
transition: color var(--theme-transition);
}
.icon.icon-href {