From d1e05915b5de30ff97b952f382a99039de92ba84 Mon Sep 17 00:00:00 2001 From: DebaucheryLibrarian Date: Sun, 31 Oct 2021 00:31:18 +0200 Subject: [PATCH] Tweaked scene and actor tile design, tags grid breakpoints. --- assets/components/actors/tile.vue | 11 ++-- assets/components/releases/scene-tile.vue | 51 +++++++++------ assets/components/releases/tile-details.vue | 22 ++----- assets/components/tags/tags.vue | 71 +++++++++++++++++++-- assets/css/_theme.scss | 11 +++- 5 files changed, 116 insertions(+), 50 deletions(-) diff --git a/assets/components/actors/tile.vue b/assets/components/actors/tile.vue index 56cdaaf5..afcc39a3 100644 --- a/assets/components/actors/tile.vue +++ b/assets/components/actors/tile.vue @@ -214,7 +214,7 @@ export default { display: inline-block; position: relative; box-shadow: 0 0 3px var(--darken-weak); - background: var(--background); + background: var(--info); overflow: hidden; &::before { @@ -237,12 +237,8 @@ export default { position: absolute; top: 0; left: 0; - color: var(--text); + color: var(--text-light); text-decoration: none; - - &:hover { - color: var(--primary); - } } .handle { @@ -253,7 +249,8 @@ export default { box-shadow: 0 0 3px var(--shadow); .name { - padding: .5rem; + padding: .25rem .5rem; + font-size: .9rem; } .alias { diff --git a/assets/components/releases/scene-tile.vue b/assets/components/releases/scene-tile.vue index 65aa190e..71e4304b 100644 --- a/assets/components/releases/scene-tile.vue +++ b/assets/components/releases/scene-tile.vue @@ -233,22 +233,27 @@ export default { height: 100%; box-shadow: 0 0 3px var(--darken-weak); + /* &.new .poster::after { - content: '★'; + content: 'new'; position: absolute; - top: 0; - left: 0; - width: 1rem; - height: 1rem; + display: flex; + align-items: center; + justify-content: center; + bottom: 0; + right: .5rem; + width: 2rem; box-sizing: border-box; - margin: .25rem; - border-radius: 0 0 .5rem 0; - color: var(--primary); - font-size: 1rem; + padding: .1rem 0 .05rem 0; + border-radius: .25rem .25rem 0 0; + background: var(--info); + color: var(--text-light); + font-size: .7rem; font-weight: bold; line-height: 1; - text-shadow: 0 0 2px var(--darken-weak); + box-shadow: 0 0 3px var(--shadow); } + */ &:hover .unstashed, &:hover .unstash { @@ -323,12 +328,12 @@ export default { align-items: center; box-sizing: border-box; padding: 0 .5rem; - margin: 0 0 .1rem 0; } .info { display: flex; flex-direction: column; + align-items: flex-start; flex-grow: 1; overflow: hidden; } @@ -340,7 +345,7 @@ export default { .title { margin: 0; color: var(--text); - font-size: 1rem; + font-size: .9rem; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; @@ -366,8 +371,9 @@ export default { } .actor-link { - color: var(--link); + color: var(--text); text-decoration: none; + font-size: .9rem; &:hover { color: var(--primary); @@ -375,7 +381,7 @@ export default { } .labels { - padding: 0 .5rem 1.5rem .5rem; + padding: 0 .5rem 1.25rem .5rem; max-height: .5rem; overflow-y: hidden; font-size: 0; @@ -406,11 +412,11 @@ export default { } .tag-link { - background: var(--background); + background: var(--shadow-touch); color: var(--shadow); display: inline-block; padding: .25rem .5rem; - border: solid 1px var(--shadow-hint); + margin: 0 1px 0 0; font-size: .75rem; font-weight: bold; text-decoration: none; @@ -422,7 +428,7 @@ export default { } .details-wide { - margin: 0 0 .5rem 0; + margin: 0 0 .4rem 0; } .details-compact { @@ -474,15 +480,18 @@ export default { display: none; } + /* .tile.new .poster::after { - bottom: 0; - top: auto; - margin: .1rem .25rem; + top: 0; + right: .25rem; + bottom: auto; + border-radius: 0 0 .25rem .25rem; + padding: .05rem 0 .1rem 0; } + */ .stash { left: 0; - right: auto; padding: .25rem .5rem .5rem .25rem; } } diff --git a/assets/components/releases/tile-details.vue b/assets/components/releases/tile-details.vue index c4c6bea7..6ce1f2cc 100644 --- a/assets/components/releases/tile-details.vue +++ b/assets/components/releases/tile-details.vue @@ -57,10 +57,7 @@ target="_blank" rel="noopener noreferrer" class="date" - >{{ formatDate(release.date, 'MMMM D, YYYY', release.datePrecision) }} + >{{ formatDate(release.date, 'MMMM D, YYYY', release.datePrecision) }} diff --git a/assets/css/_theme.scss b/assets/css/_theme.scss index f182dc01..0cb04b2f 100644 --- a/assets/css/_theme.scss +++ b/assets/css/_theme.scss @@ -5,10 +5,17 @@ $breakpoint3: 1200px; $breakpoint4: 1500px; :root { + --primary: #c63971; + --primary-strong: #f90071; + --primary-faded: #ffcce4; + + /* + --primary: #f04288; + --primary: #ff6c88; --primary-strong: #ff4166; --primary-faded: #ffdfee; - /* + --primary: #f28; --primary-strong: #f90071; --primary-faded: #ffcce4; @@ -39,6 +46,8 @@ $breakpoint4: 1500px; --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); + --info: #361723; + --male: #0af; --female: #f0a;