Added dark and SFW modes.

2020-03-23 01:43:49 +01:00
parent fdb2b132f6
commit 58ead7b426
288 changed files with 1316 additions and 156 deletions
--- a/assets/components/actors/actors.vue
+++ b/assets/components/actors/actors.vue
@@ -110,7 +110,7 @@ export default {
@import 'theme';

 .gender-link.selected .gender .icon  {
-    fill: $text-contrast;
+    fill: var(--text-contrast);
    filter: none;
 }
 </style>
@@ -143,7 +143,7 @@ export default {
    display: flex;
    flex-shrink: 0;
    padding: 0 .5rem 0 0;
-    border-right: solid 1px $shadow-hint;
+    border-right: solid 1px var(--shadow-hint);
    margin: 0 1rem 0 0;
 }

@@ -160,38 +160,42 @@ export default {
    align-items: center;
    justify-content: center;
    margin: .25rem .5rem .25rem 0;
-    color: $shadow;
-    background: $background;
+    color: var(--shadow);
+    background: var(--background);
    font-weight: bold;
    text-decoration: none;
-    box-shadow: 0 0 3px $shadow-weak;
+    box-shadow: 0 0 3px var(--shadow-weak);

    &:hover {
-        color: $primary;
+        color: var(--primary);
        cursor: pointer;
    }

+    .icon {
+        fill: var(--shadow);
+    }
+
    &.selected {
-        background: $primary;
-        color: $text-contrast;
+        background: var(--primary);
+        color: var(--text-contrast);

        .icon {
-            fill: $text-contrast;
+            fill: var(--text-contrast);
        }

        &.male {
-            background: $male;
+            background: var(--male);
        }

        &.female {
-            background: $female;
+            background: var(--female);
        }

        &.transsexual {
            width: 2rem;
            height: 2rem;
-            background: $female;
-            border: solid .25rem $male;
+            background: var(--female);
+            border: solid .25rem var(--male);
        }
    }
 }
--- a/assets/components/container/container.vue
+++ b/assets/components/container/container.vue
@@ -1,5 +1,8 @@
 <template>
-    <div class="container">
+    <div
+        class="container"
+        :class="theme"
+    >
        <Header />

        <div class="content">
@@ -10,12 +13,23 @@
 </template>

 <script>
+import { mapState } from 'vuex';
+
 import Header from '../header/header.vue';

+function theme(state) {
+    return state.ui.theme;
+}
+
 export default {
    components: {
        Header,
    },
+    computed: {
+        ...mapState({
+            theme,
+        }),
+    },
 };
 </script>

@@ -23,7 +37,7 @@ export default {
@import 'theme';

 .container {
-    background: $background-dim;
+    background: var(--background-dim);
    height: 100%;
    display: flex;
    flex-direction: column;
--- a/assets/components/header/filter-bar.vue
+++ b/assets/components/header/filter-bar.vue
@@ -166,17 +166,17 @@ export default {
@import 'theme';

 .filter-bar {
-    background: $background;
+    background: var(--background);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 1rem;
    z-index: 1;
    font-size: 0;
-    box-shadow: 0 0 3px $shadow;
+    box-shadow: 0 0 3px var(--shadow);

    .icon {
-        fill: $shadow;
+        fill: var(--shadow);
    }
 }

@@ -196,17 +196,17 @@ export default {
 }

 .range-button {
-    color: $shadow;
-    background: $background;
+    color: var(--shadow);
+    background: var(--background);
    display: inline-block;
    padding: .5rem 1rem;
    border: none;
-    box-shadow: 0 0 2px $shadow-weak;
+    box-shadow: 0 0 2px var(--shadow-weak);
    font-size: .8rem;
    font-weight: bold;

    &:hover {
-        color: $text;
+        color: var(--text);
        cursor: pointer;
    }
 }
@@ -215,7 +215,7 @@ export default {
    display: none;

    &:checked + .range-button {
-        color: $primary;
+        color: var(--primary);
    }
 }

--- a/assets/components/header/filters.vue
+++ b/assets/components/header/filters.vue
@@ -96,7 +96,7 @@ export default {
    margin: 0;

    &:not(:last-child) {
-        border-right: solid 1px $shadow-hint;
+        border-right: solid 1px var(--shadow-hint);
    }
 }

@@ -116,7 +116,7 @@ export default {
 }

 .toggle {
-    color: $shadow-weak;
+    color: var(--shadow-weak);
    box-sizing: border-box;
    padding: .5rem;
    margin: 0 .25rem;
@@ -130,12 +130,12 @@ export default {
    }

    &:hover {
-        color: $shadow;
+        color: var(--shadow);
    }

    &.active {
-        color: $primary;
-        box-shadow: 0 0 2px $shadow-weak;
+        color: var(--primary);
+        box-shadow: 0 0 2px var(--shadow-weak);
    }
 }
 </style>
--- a/assets/components/header/header.vue
+++ b/assets/components/header/header.vue
@@ -62,34 +62,88 @@
            </nav>
        </div>

-        <Search class="search-full" />
+        <div class="header-section">
+            <div class="header-toggles">
+                <Icon
+                    v-show="!sfw"
+                    v-tooltip="'Enable safe-for-work mode'"
+                    icon="flower"
+                    class="toggle noselect"
+                    @click.native="setSfw(true)"
+                />

-        <v-popover
-            class="search-compact"
-            :open="searching"
-            @show="searching = true"
-            @hide="searching = false"
-        >
-            <button
-                type="button"
-                class="search-button"
-            ><Icon
-                icon="search"
-            /></button>
+                <Icon
+                    v-show="sfw"
+                    v-tooltip="'Disable safe-for-work mode'"
+                    icon="flower"
+                    class="toggle active noselect"
+                    @click.native="setSfw(false)"
+                />

-            <Search
-                slot="popover"
-                :searching="searching"
-                class="compact"
-                @search="searching = false"
-            />
-        </v-popover>
+                <Icon
+                    v-show="theme === 'light'"
+                    v-tooltip="'Switch to dark theme'"
+                    icon="moon"
+                    class="toggle noselect"
+                    @click.native="setTheme('dark')"
+                />
+
+                <Icon
+                    v-show="theme === 'dark'"
+                    v-tooltip="'Switch to light theme'"
+                    icon="sun"
+                    class="toggle noselect"
+                    @click.native="setTheme('light')"
+                />
+            </div>
+
+            <Search class="search-full" />
+
+            <v-popover
+                class="search-compact"
+                :open="searching"
+                @show="searching = true"
+                @hide="searching = false"
+            >
+                <button
+                    type="button"
+                    class="search-button"
+                ><Icon
+                    icon="search"
+                /></button>
+
+                <Search
+                    slot="popover"
+                    :searching="searching"
+                    class="compact"
+                    @search="searching = false"
+                />
+            </v-popover>
+        </div>
    </header>
 </template>

 <script>
+import { mapState } from 'vuex';
+
 import Search from './search.vue';

+function sfw(state) {
+    return state.ui.sfw;
+}
+
+function theme(state) {
+    return state.ui.theme;
+}
+
+function setTheme(newTheme) {
+    this.$store.dispatch('setTheme', newTheme);
+}
+
+function setSfw(enabled) {
+    this.$store.dispatch('setSfw', enabled);
+}
+
 export default {
    components: {
        Search,
@@ -99,6 +153,16 @@ export default {
            searching: false,
        };
    },
+    computed: {
+        ...mapState({
+            sfw,
+            theme,
+        }),
+    },
+    methods: {
+        setSfw,
+        setTheme,
+    },
 };
 </script>

@@ -109,9 +173,9 @@ export default {
    display: flex;
    align-items: center;
    justify-content: space-between;
-    background: $background;
-    color: $primary;
-    border-bottom: solid 1px $shadow-hint;
+    background: var(--background);
+    color: var(--primary);
+    border-bottom: solid 1px var(--shadow-hint);
    font-size: 0;
 }

@@ -120,6 +184,13 @@ export default {
    align-items: center;
 }

+.header-section {
+    height: 100%;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+}
+
 .logo-link {
    color: inherit;
    display: inline-block;
@@ -151,31 +222,44 @@ export default {
    justify-content: center;
    padding: 1rem 1rem calc(1rem - 5px) 1rem;
    border-bottom: solid 5px transparent;
-    color: $shadow;
+    color: var(--shadow);
    text-decoration: none;
    font-size: .9rem;
    font-weight: bold;
    cursor: pointer;

-    .icon {
-        fill: $shadow;
-        margin: 0 .5rem 0 0;
-    }
-
    &.active {
-        color: $primary;
-        border-bottom: solid 5px $primary;
+        color: var(--primary);
+        border-bottom: solid 5px var(--primary);

        .icon {
-            fill: $primary;
+            fill: var(--primary);
        }
    }

    &:hover:not(.active) {
-        color: $primary;
+        color: var(--primary);

        .icon {
-            fill: $primary;
+            fill: var(--primary);
+        }
+    }
+}
+
+.header-toggles {
+    margin: 0 .5rem 0 0;
+
+    .icon {
+        padding: 1rem .75rem;
+        fill: var(--shadow);
+
+        &:hover {
+            fill: var(--shadow-strong);
+            cursor: pointer;
+        }
+
+        &.active {
+            fill: var(--primary);
        }
    }
 }
@@ -189,7 +273,7 @@ export default {
    margin: .2rem 0 0 0;

    .icon {
-        fill: $shadow;
+        fill: var(--shadow);
    }
 }

--- a/assets/components/header/search.vue
+++ b/assets/components/header/search.vue
@@ -66,14 +66,14 @@ export default {
    align-items: center;
    justify-content: flex-end;
    padding: 0 1rem 0 0;
-    border-left: solid 1px $shadow-hint;
+    border-left: solid 1px var(--shadow-hint);

    &.compact {
        padding: 0;
        border: none;

        .search-input {
-            border: solid 1px $shadow-hint;
+            border: solid 1px var(--shadow-hint);
        }

        .search-button {
@@ -88,12 +88,14 @@ export default {
    width: 100%;
    padding: .5rem;
    border: none;
+    color: var(--text);
+    background: var(--background);
    outline: none;
    font-size: 1rem;
    outline: none;

    &::placeholder {
-        color: $shadow;
+        color: var(--shadow);
    }

    &::-webkit-search-cancel-button {
@@ -101,7 +103,7 @@ export default {
        padding: .5rem;
        position: relative;
        right: 0;
-        color: $text;
+        color: var(--text);
        background: url('/img/cancel-circle2.svg');
        opacity: .25;

@@ -112,7 +114,7 @@ export default {
    }

    &:focus::placeholder {
-        color: $shadow-weak;
+        color: var(--shadow-weak);
    }
 }

@@ -125,14 +127,14 @@ export default {
    outline: none;

    .icon {
-        fill: $shadow-weak;
+        fill: var(--shadow-weak);
    }

    &:hover {
        cursor: pointer;

        .icon {
-            fill: $shadow;
+            fill: var(--shadow);
        }
    }
 }
--- a/assets/components/networks/networks.vue
+++ b/assets/components/networks/networks.vue
@@ -102,18 +102,20 @@ export default {
 }

 .query {
+    color: var(--text);
+    background: var(--background);
    flex-grow: 1;
    box-sizing: border-box;
    padding: 1rem;
    border: none;
    box-sizing: border-box;
-    box-shadow: 0 0 3px $shadow-weak;
+    box-shadow: 0 0 3px var(--shadow-weak);
    margin: 1rem 0;
    font-size: 1rem;
    outline: none;

    &:focus {
-        box-shadow: 0 0 3px $primary;
+        box-shadow: 0 0 3px var(--primary);
    }
 }

@@ -123,14 +125,14 @@ export default {
    border: none;

    .icon {
-        fill: $shadow;
+        fill: var(--shadow);
    }

    &:hover {
        cursor: pointer;

        .icon {
-            fill: $primary;
+            fill: var(--primary);
        }
    }
 }
--- a/assets/components/releases/releases.vue
+++ b/assets/components/releases/releases.vue
@@ -7,12 +7,13 @@

        <ul class="nolist tiles">
            <li
-                v-for="release in releases"
+                v-for="(release, index) in releases"
                :key="`release-${release.id}`"
            >
                <ReleaseTile
                    :release="release"
                    :referer="referer"
+                    :index="index"
                />
            </li>
        </ul>
@@ -80,7 +81,7 @@ export default {
 }

 .empty {
-    color: $shadow-strong;
+    color: var(--shadow-strong);
    font-weight: bold;
 }

--- a/assets/components/tags/photos.vue
+++ b/assets/components/tags/photos.vue
@@ -4,14 +4,14 @@
            <li>
                <a
                    v-if="tag.poster"
-                    :href="`/img/${tag.poster.path}`"
-                    :title="tag.poster.comment"
+                    :href="`/img/${poster.path}`"
+                    :title="poster.comment"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="photo-link"
                >
                    <img
-                        :src="`/img/${tag.poster.thumbnail}`"
+                        :src="`/img/${poster.thumbnail}`"
                        :alt="tag.poster.comment"
                        class="poster"
                    >
@@ -19,7 +19,7 @@
            </li>

            <li
-                v-for="photo in tag.photos"
+                v-for="photo in photos"
                :key="`photo-${photo.id}`"
            >
                <a
@@ -41,6 +41,22 @@
 </template>

 <script>
+function poster() {
+    if (this.$store.state.ui.sfw) {
+        return this.tag.poster.sfw;
+    }
+
+    return this.tag.poster;
+}
+
+function photos() {
+    if (this.$store.state.ui.sfw) {
+        return this.tag.photos.map(photo => photo.sfw);
+    }
+
+    return this.tag.photos;
+}
+
 export default {
    props: {
        tag: {
@@ -48,6 +64,10 @@ export default {
            default: null,
        },
    },
+    computed: {
+        poster,
+        photos,
+    },
 };
 </script>

--- a/assets/components/tags/tag.vue
+++ b/assets/components/tags/tag.vue
@@ -99,13 +99,17 @@ export default {
@import 'theme';

 .description a {
-    color: $link;
+    color: var(--link);
    text-decoration: inherit;

    &:hover {
-        color: $primary;
+        color: var(--primary);
    }
 }
+
+.dark .sidebar {
+    border-right: solid 1px var(--shadow-weak);
+}
 </style>

 <style lang="scss" scoped>
@@ -134,8 +138,8 @@ export default {
 }

 .header {
-    background: $profile;
-    color: $text-contrast;
+    background: var(--profile);
+    color: var(--text-light);
    display: none;
    padding: .5rem 1rem;

@@ -149,8 +153,8 @@ export default {
 }

 .sidebar {
-    background: $profile;
-    color: $text-contrast;
+    background: var(--profile);
+    color: var(--text-light);
    display: flex;
    flex-direction: column;
    width: 25rem;
@@ -182,7 +186,7 @@ export default {
    text-transform: capitalize;

    .icon {
-        fill: $text-contrast;
+        fill: var(--text-light);
        width: 1.25rem;
        height: 1.25rem;
    }
--- a/assets/components/tags/tags.vue
+++ b/assets/components/tags/tags.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="tags">
-        <h3>Oral</h3>
+        <h3 class="heading">Oral</h3>

        <div class="tiles">
            <Tag
@@ -10,7 +10,7 @@
            />
        </div>

-        <h3>Penetration</h3>
+        <h3 class="heading">Penetration</h3>

        <div class="tiles">
            <Tag
@@ -20,7 +20,7 @@
            />
        </div>

-        <h3>Group</h3>
+        <h3 class="heading">Group</h3>

        <div class="tiles">
            <Tag
@@ -30,7 +30,7 @@
            />
        </div>

-        <h3>Ethnicity</h3>
+        <h3 class="heading">Ethnicity</h3>

        <div class="tiles">
            <Tag
@@ -40,7 +40,7 @@
            />
        </div>

-        <h3>Finish</h3>
+        <h3 class="heading">Finish</h3>

        <div class="tiles">
            <Tag
@@ -50,7 +50,7 @@
            />
        </div>

-        <h3>Misc</h3>
+        <h3 class="heading">Misc</h3>

        <div
            v-if="tags.misc"
@@ -149,6 +149,11 @@ export default {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, .25fr));
    grid-gap: .5rem;
+    margin: 0 0 1.5rem 0;
+}
+
+.heading {
+    font-size: 1.3rem;
 }

@media(max-width: $breakpoint3) {
--- a/assets/components/tile/release.vue
+++ b/assets/components/tile/release.vue
@@ -44,7 +44,7 @@
                    v-tooltip.bottom="release.url && `View scene on ${release.site.name}`"
                    :title="release.url && `View scene on ${release.site.name}`"
                    :href="release.url"
-                    :class="{ upcoming: isAfter(release.date, new Date()), new: release.isNew }"
+                    :class="{ upcoming: isUpcoming, new: release.isNew }"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="date"
@@ -166,6 +166,15 @@ export default {
            type: String,
            default: null,
        },
+        index: {
+            type: Number,
+            default: null,
+        },
+    },
+    data() {
+        return {
+            isUpcoming: this.isAfter(this.release.date, new Date()),
+        };
    },
 };
 </script>
@@ -174,13 +183,13 @@ export default {
@import 'theme';

 .tile {
-    background: $background;
+    background: var(--background);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 0 .5rem 0;
    overflow: hidden;
-    box-shadow: 0 0 3px $shadow-weak;
+    box-shadow: 0 0 3px var(--shadow-weak);
    height: 100%;
 }

@@ -190,7 +199,7 @@ export default {
 }

 .covers {
-    background: $profile;
+    background: var(--profile);
    display: flex;

    .cover {
@@ -207,9 +216,9 @@ export default {
    object-fit: cover;
    background-position: center;
    background-size: cover;
-    background-color: $shadow-hint;
-    color: $shadow;
-    text-shadow: 1px 1px 0 $highlight;
+    background-color: var(--shadow-hint);
+    color: var(--shadow);
+    text-shadow: 1px 1px 0 var(--highlight);
 }

 .row {
@@ -236,10 +245,10 @@ export default {

 .site,
 .date {
-    color: $text-contrast;
+    color: var(--text-light);
    display: flex;
    align-items: center;
-    background: $shadow;
+    background: var(--darken);
    position: relative;
    font-size: .8rem;
    padding: .25rem;
@@ -249,7 +258,7 @@ export default {
 .date {
    &.upcoming:before {
        content: '';
-        background: $primary;
+        background: var(--primary);
        width: .5rem;
        display: inline-block;
        position: absolute;
@@ -269,7 +278,7 @@ export default {

 .site-link {
    display: flex;
-    color: $text-contrast;
+    color: var(--text-light);
    text-decoration: none;
 }

@@ -285,7 +294,7 @@ export default {

 .title {
    margin: 0 .25rem .25rem 0;
-    color: $text;
+    color: var(--text);
    max-height: 2.75rem;
    font-size: 1rem;
    line-height: 1.5;
@@ -333,26 +342,26 @@ export default {
    text-decoration: none;

    &:hover {
-        color: $primary;
+        color: var(--primary);
    }
 }

 .actor-link {
-    color: $link;
+    color: var(--link);
 }

 .tag-link {
-    color: $shadow;
+    color: var(--shadow);
    display: inline-block;
    padding: .25rem;
    font-size: .75rem;
    font-weight: bold;
    text-decoration: none;
    line-height: 1;
-    border: solid 1px $shadow-hint;
+    border: solid 1px var(--shadow-hint);

    &:hover {
-        color: $primary;
+        color: var(--primary);
    }
 }
 </style>
--- a/assets/components/tile/tag.vue
+++ b/assets/components/tile/tag.vue
@@ -6,7 +6,7 @@
    >
        <img
            v-if="tag.poster"
-            :src="`/img/${tag.poster.thumbnail}`"
+            :src="sfw ? `/img/${tag.poster.sfw.thumbnail}` : `/img/${tag.poster.thumbnail}`"
            :alt="tag.name"
            class="poster"
        >
@@ -16,6 +16,10 @@
 </template>

 <script>
+function sfw() {
+    return this.$store.state.ui.sfw;
+}
+
 export default {
    props: {
        tag: {
@@ -23,6 +27,9 @@ export default {
            default: null,
        },
    },
+    computed: {
+        sfw,
+    },
 };
 </script>

@@ -30,8 +37,8 @@ export default {
@import 'theme';

 .tile {
-    color: $text;
-    background: $background;
+    color: var(--text);
+    background: var(--background);
    display: flex;
    flex-direction: column;
    align-items: center;