Revert "Added transition to theme switch."

This reverts commit 5d467622f4.
This commit is contained in:
ThePendulum 2020-04-02 03:19:45 +02:00
parent 5d467622f4
commit 0ad1a5e049
14 changed files with 44 additions and 39 deletions

View File

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

View File

@ -175,7 +175,6 @@ export default {
z-index: 1;
font-size: 0;
box-shadow: 0 0 3px var(--darken);
transition: background var(--theme-transition);
.icon {
fill: var(--shadow);
@ -206,7 +205,6 @@ 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);

View File

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

View File

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

View File

@ -93,11 +93,9 @@ 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 {

View File

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

View File

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

View File

@ -210,11 +210,24 @@
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';
@ -224,8 +237,20 @@ 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 {
@ -245,6 +270,9 @@ export default {
pageTitle,
},
mounted,
methods: {
copyFilename,
},
};
</script>
@ -285,7 +313,7 @@ export default {
.details {
background: var(--profile);
color: var(--text-light);
box-shadow: 0 0 3px var(--darken-weak);
box-shadow: 0 0 3px var(--shadow-weak);
cursor: default;
.column {
@ -296,7 +324,6 @@ export default {
.link {
color: var(--text-light);
transition: color var(--theme-transition);
}
}
@ -358,12 +385,10 @@ 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 {
@ -415,10 +440,9 @@ export default {
display: inline-block;
padding: .5rem;
margin: 0 .25rem .25rem 0;
box-shadow: 0 0 2px var(--darken-weak);
box-shadow: 0 0 2px var(--shadow-weak);
text-decoration: none;
text-transform: capitalize;
transition: background var(--theme-transition);
&:hover {
color: var(--primary);

View File

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

View File

@ -184,14 +184,13 @@ 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(--darken-weak);
transition: background var(--theme-transition);
box-shadow: 0 0 3px var(--shadow-weak);
height: 100%;
}
.poster {
@ -300,7 +299,6 @@ export default {
line-height: 1.5;
text-overflow: ellipsis;
overflow: hidden;
transition: color var(--theme-transition);
.icon {
margin: 0 .25rem 0 0;
@ -318,7 +316,6 @@ export default {
overflow: hidden;
max-height: 2.75rem;
line-height: 1.5rem;
transition: color var(--theme-transition);
}
.tags {
@ -361,7 +358,6 @@ 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);

View File

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

View File

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

View File

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

View File

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