From e4144409f0ec5b76bf6322534e0935a94cc7cd76 Mon Sep 17 00:00:00 2001 From: Niels Simenon Date: Sun, 5 Jul 2020 04:27:46 +0200 Subject: [PATCH] Removed all old SASS color variables. --- assets/components/actors/actor.vue | 40 +++++++++--------- assets/components/actors/gender.vue | 38 ++++++++--------- assets/components/actors/photos.vue | 2 +- assets/components/actors/social.vue | 64 ++++++++++++++--------------- assets/components/entities/tile.vue | 2 +- assets/components/errors/404.vue | 20 ++++----- assets/css/_inputs.scss | 6 +-- assets/css/_theme.scss | 32 +-------------- assets/css/style.scss | 4 +- assets/js/networks/state.js | 1 - assets/js/sites/state.js | 1 - assets/js/store.js | 6 +-- 12 files changed, 90 insertions(+), 126 deletions(-) delete mode 100644 assets/js/networks/state.js delete mode 100644 assets/js/sites/state.js diff --git a/assets/components/actors/actor.vue b/assets/components/actors/actor.vue index 029e643f..f8b86d68 100644 --- a/assets/components/actors/actor.vue +++ b/assets/components/actors/actor.vue @@ -401,8 +401,8 @@ export default { display: flex; justify-content: space-between; align-items: center; - color: $highlight-extreme; - background: $profile; + color: var(--highlight-extreme); + background: var(--profile); padding: .75rem 1rem; } @@ -435,8 +435,8 @@ export default { } .profile { - background: $profile; - color: $highlight-extreme; + background: var(--profile); + color: var(--highlight-extreme); width: 100%; max-height: 18rem; display: flex; @@ -493,7 +493,7 @@ export default { overflow: hidden; &: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 { - color: $highlight; + color: var(--highlight); margin: 0 1rem 0 0; flex-shrink: 0; font-style: normal; font-weight: 400; .icon { - fill: $highlight; + fill: var(--highlight); margin: -.25rem .5rem 0 0; } } @@ -545,7 +545,7 @@ export default { .age { font-weight: bold; padding: 0 0 0 .5rem; - border-left: solid 1px $highlight-weak; + border-left: solid 1px var(--highlight-weak); margin: 0 0 0 .5rem; } @@ -561,12 +561,12 @@ export default { .height-imperial, .weight-imperial { padding: 0 0 0 .5rem; - border-left: solid 1px $highlight-weak; + border-left: solid 1px var(--highlight-weak); margin: 0 0 0 .5rem; } .enhanced.icon { - fill: $primary; + fill: var(--primary); padding: 0 .5rem; transform: scaleX(-1); } @@ -578,7 +578,7 @@ export default { } .scraped { - color: $highlight-weak; + color: var(--highlight-weak); font-size: .8rem; } @@ -659,27 +659,27 @@ export default { cursor: pointer; .icon { - fill: $shadow; + fill: var(--shadow); } &:hover { - background: $shadow-hint; + background: var(--shadow-hint); .icon { - fill: $shadow-strong; + fill: var(--shadow-strong); } } } .expand-sidebar:hover { - background: $shadow-hint; + background: var(--shadow-hint); } .expand-header { display: none; &:hover { - background: $shadow-hint; + background: var(--shadow-hint); } } @@ -689,17 +689,17 @@ export default { justify-content: center; align-items: center; padding: 0; - background: $profile; + background: var(--profile); .icon { width: 100%; - fill: $highlight; + fill: var(--highlight); padding: .5rem 0; } &:hover .icon { - background: $highlight-hint; - fill: $text-contrast; + background: var(--highlight-hint); + fill: var(--text-contrast); } } diff --git a/assets/components/actors/gender.vue b/assets/components/actors/gender.vue index a3de1652..52c21de8 100644 --- a/assets/components/actors/gender.vue +++ b/assets/components/actors/gender.vue @@ -1,19 +1,19 @@ @@ -22,20 +22,20 @@ export default { .gender { &.female .icon { - fill: $female; - filter: drop-shadow(0 0 1px $shadow); + fill: var(--female); + filter: drop-shadow(0 0 1px var(--shadow)); } &.male .icon { - fill: $male; - filter: drop-shadow(0 0 1px $shadow); + fill: var(--male); + filter: drop-shadow(0 0 1px var(--shadow)); } &.transsexual .icon { - fill: $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) - 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(0 0 1px $shadow) + fill: var(--text-contrast); + 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 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 var(--shadow)) } } diff --git a/assets/components/actors/photos.vue b/assets/components/actors/photos.vue index 559f7f33..a4cfd10c 100644 --- a/assets/components/actors/photos.vue +++ b/assets/components/actors/photos.vue @@ -110,7 +110,7 @@ export default { .photo { height: 15rem; - box-shadow: 0 0 3px $shadow-weak; + box-shadow: 0 0 3px var(--darken-weak); object-fit: cover; } diff --git a/assets/components/actors/social.vue b/assets/components/actors/social.vue index 49994f5e..b487e811 100644 --- a/assets/components/actors/social.vue +++ b/assets/components/actors/social.vue @@ -1,38 +1,38 @@ @@ -48,14 +48,14 @@ export default { padding: 0 0 0 1rem; .icon { - color: $highlight; - fill: $highlight; + color: var(--highlight); + fill: var(--highlight); width: 1.5rem; height: 1.5rem; } &:hover .icon { - fill: $primary; + fill: var(--primary); } } diff --git a/assets/components/entities/tile.vue b/assets/components/entities/tile.vue index 25f031e9..a7882445 100644 --- a/assets/components/entities/tile.vue +++ b/assets/components/entities/tile.vue @@ -50,7 +50,7 @@ export default { .tile { height: 6rem; - background: $tile; + background: var(--tile); display: flex; flex-shrink: 0; justify-content: center; diff --git a/assets/components/errors/404.vue b/assets/components/errors/404.vue index f81d5889..b86b03bb 100644 --- a/assets/components/errors/404.vue +++ b/assets/components/errors/404.vue @@ -1,20 +1,20 @@ diff --git a/assets/css/_inputs.scss b/assets/css/_inputs.scss index e70f87db..5a0599a3 100644 --- a/assets/css/_inputs.scss +++ b/assets/css/_inputs.scss @@ -1,8 +1,8 @@ .select { - color: $shadow-strong; - background: $background; + color: var(--shadow-strong); + background: var(--background); padding: .5rem; font-size: 1rem; - border: solid 1px $shadow-weak; + border: solid 1px var(--shadow-weak); cursor: pointer; } diff --git a/assets/css/_theme.scss b/assets/css/_theme.scss index deee8411..f9618d0c 100644 --- a/assets/css/_theme.scss +++ b/assets/css/_theme.scss @@ -1,41 +1,11 @@ -/* $primary: #ff886c; */ $breakpoint0: 540px; $breakpoint: 720px; $breakpoint2: 900px; $breakpoint3: 1200px; $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 { + /* --primary: #ff886c; */ --primary: #ff6c88; --text-dark: #222; diff --git a/assets/css/style.scss b/assets/css/style.scss index a88a99c1..bb0c8b5e 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -31,9 +31,9 @@ body { } .icon.icon-href { - fill: $shadow; + fill: var(--shadow); :hover { - fill: $primary; + fill: var(--primary); } } diff --git a/assets/js/networks/state.js b/assets/js/networks/state.js deleted file mode 100644 index ff8b4c56..00000000 --- a/assets/js/networks/state.js +++ /dev/null @@ -1 +0,0 @@ -export default {}; diff --git a/assets/js/sites/state.js b/assets/js/sites/state.js deleted file mode 100644 index ff8b4c56..00000000 --- a/assets/js/sites/state.js +++ /dev/null @@ -1 +0,0 @@ -export default {}; diff --git a/assets/js/store.js b/assets/js/store.js index 29230d9b..3087efba 100644 --- a/assets/js/store.js +++ b/assets/js/store.js @@ -5,8 +5,6 @@ import initUiStore from './ui/ui'; import initAuthStore from './auth/auth'; import initReleasesStore from './releases/releases'; import initEntitiesStore from './entities/entities'; -// import initSitesStore from './sites/sites'; -// import initNetworksStore from './networks/networks'; import initActorsStore from './actors/actors'; import initTagsStore from './tags/tags'; @@ -18,10 +16,8 @@ function initStore(router) { store.registerModule('ui', initUiStore(store, router)); store.registerModule('auth', initAuthStore(store, router)); store.registerModule('releases', initReleasesStore(store, router)); - store.registerModule('actors', initActorsStore(store, router)); store.registerModule('entities', initEntitiesStore(store, router)); - // store.registerModule('sites', initSitesStore(store, router)); - // store.registerModule('networks', initNetworksStore(store, router)); + store.registerModule('actors', initActorsStore(store, router)); store.registerModule('tags', initTagsStore(store, router)); return store;