From cad499028f20e7e97b0662ce3c4486413e68b6d0 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Tue, 15 Dec 2020 17:57:56 +0100 Subject: [PATCH 1/3] feat(dark-theme): add dark theme colors --- assets/global.scss | 15 ++++- assets/styles/HomeHeader.scss | 51 ++++++++++---- assets/variables.scss | 26 ++++--- components/Buttons/UserButton.vue | 38 ++++++++--- components/Item/Card.vue | 13 ++-- components/Layout/AudioControls.vue | 1 + components/Layout/Backdrop.vue | 4 +- .../Layout/HomeHeader/HomeHeaderItems.vue | 61 +++++++++++++++++ components/Layout/Images/BlurhashImage.vue | 1 + components/System/DarkModeToggle.vue | 25 ++++++- components/System/LocaleSwitcher.vue | 26 +++++-- layouts/default.vue | 67 ++++++++----------- locales/en-US.json | 6 +- nuxt.config.ts | 10 +-- pages/artist/_itemId/index.vue | 9 +++ pages/item/_itemId/index.vue | 9 +++ stylelint.config.js | 5 +- 17 files changed, 280 insertions(+), 87 deletions(-) diff --git a/assets/global.scss b/assets/global.scss index 6ce45ed1a5f..33a88203c91 100644 --- a/assets/global.scss +++ b/assets/global.scss @@ -1,3 +1,4 @@ +@import '~vuetify/src/styles/styles.sass'; @import '@fontsource/noto-sans/index.css'; @import '@fontsource/noto-sans-jp/index.css'; @import '@fontsource/noto-sans-sc/index.css'; @@ -9,8 +10,11 @@ body { background-color: var(--v-background-base); } -/* W3C standard (Firefox-only for now) */ * { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + /* W3C standard scrollbars (Firefox-only for now) */ scrollbar-width: thin; scrollbar-color: var(--v-thumb-lighten5) var(--v-track-base); } @@ -82,3 +86,12 @@ body { .link:hover { text-decoration: underline; } + +/* Customized Vuetify components */ +.v-menu__content .v-list { + background: map-get($material-light, 'cards') !important; +} + +.theme--dark .v-menu__content .v-list { + background: map-get($material-dark, 'menus') !important; +} diff --git a/assets/styles/HomeHeader.scss b/assets/styles/HomeHeader.scss index be52b1a85b3..42d169fac19 100644 --- a/assets/styles/HomeHeader.scss +++ b/assets/styles/HomeHeader.scss @@ -35,11 +35,9 @@ background-size: contain; background-repeat: no-repeat; box-sizing: border-box; - mask-image: linear-gradient( - 180deg, - rgba(37, 18, 18, 0.75) 0%, - rgba(0, 0, 0, 0) 100% - ); + mask-image: linear-gradient(180deg, + rgba(37, 18, 18, 0.75) 0%, + rgba(0, 0, 0, 0) 100%); z-index: 1; } @@ -60,14 +58,41 @@ margin-right: 0; padding-bottom: (9 / 16) * 80%; background-position: right center; - mask-image: linear-gradient( - 180deg, - rgba(0, 0, 0, 1) 60%, - rgba(0, 0, 0, 0) 100% - ), - linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 40%); - mask-composite: subtract; - -webkit-mask-composite: source-out; // This is needed due to autoprefixed not converting subtract to the proper webkit equivalent + mask-image: linear-gradient(to right, + hsla(0, 0%, 0%, 0) 0%, + hsla(0, 0%, 0%, 0.182) 5.6%, + hsla(0, 0%, 0%, 0.34) 9.9%, + hsla(0, 0%, 0%, 0.476) 13.1%, + hsla(0, 0%, 0%, 0.593) 15.7%, + hsla(0, 0%, 0%, 0.69) 17.9%, + hsla(0, 0%, 0%, 0.771) 20.2%, + hsla(0, 0%, 0%, 0.836) 22.9%, + hsla(0, 0%, 0%, 0.888) 26.3%, + hsla(0, 0%, 0%, 0.927) 30.8%, + hsla(0, 0%, 0%, 0.956) 36.7%, + hsla(0, 0%, 0%, 0.976) 44.4%, + hsla(0, 0%, 0%, 0.989) 54.3%, + hsla(0, 0%, 0%, 0.996) 66.6%, + hsla(0, 0%, 0%, 0.999) 81.7%, + hsl(0, 0%, 0%) 100%), + linear-gradient(to top, + hsla(0, 0%, 0%, 0) 0%, + hsla(0, 0%, 0%, 0.182) 5.6%, + hsla(0, 0%, 0%, 0.34) 9.9%, + hsla(0, 0%, 0%, 0.476) 13.1%, + hsla(0, 0%, 0%, 0.593) 15.7%, + hsla(0, 0%, 0%, 0.69) 17.9%, + hsla(0, 0%, 0%, 0.771) 20.2%, + hsla(0, 0%, 0%, 0.836) 22.9%, + hsla(0, 0%, 0%, 0.888) 26.3%, + hsla(0, 0%, 0%, 0.927) 30.8%, + hsla(0, 0%, 0%, 0.956) 36.7%, + hsla(0, 0%, 0%, 0.976) 44.4%, + hsla(0, 0%, 0%, 0.989) 54.3%, + hsla(0, 0%, 0%, 0.996) 66.6%, + hsla(0, 0%, 0%, 0.999) 81.7%, + hsl(0, 0%, 0%) 100%); + mask-composite: intersect; } .swiper { diff --git a/assets/variables.scss b/assets/variables.scss index 3a2e01e0ebb..005671f667e 100644 --- a/assets/variables.scss +++ b/assets/variables.scss @@ -3,17 +3,27 @@ // The variables you want to modify // $font-size-root: 20px; +@import '~vuetify/src/styles/styles.sass'; + // Globals -$heading-font-family: 'Noto Sans', 'Noto Sans HK', 'Noto Sans JP', - 'Noto Sans KR', 'Noto Sans SC', sans-serif !default; +$heading-font-family: 'Noto Sans', +'Noto Sans HK', +'Noto Sans JP', +'Noto Sans KR', +'Noto Sans SC', +sans-serif !default; $body-font-family: $heading-font-family; $font-size-root: 14px; $input-font-size: 14px; +$btn-font-weight: 500; -$material-light: ( - 'background': #f2f2f2 -); +$material-light: map-merge($material-light, ('background': #f2f2f2)); -$material-dark: ( - 'background': #101010 -); +$material-dark: map-merge($material-dark, ('background': #121721, + 'navigation-drawer': #1c2331, + 'app-bar': #1c2331, + 'dividers': #233543, + 'cards': #1c2331, + 'chips': #2b4355, + 'menus': #252e41, + 'text': ('primary': #edf2f7))) diff --git a/components/Buttons/UserButton.vue b/components/Buttons/UserButton.vue index b988aec1edc..4e71bcb47af 100644 --- a/components/Buttons/UserButton.vue +++ b/components/Buttons/UserButton.vue @@ -2,15 +2,19 @@ @@ -42,14 +46,32 @@ export default Vue.extend({ }, computed: { menuItems(): MenuItem[] { - return [ - { - title: this.$t('logout'), + const menuItems = []; + + if (this.$auth.$state.user.Policy.IsAdministrator) { + menuItems.push({ + title: this.$t('metadata'), action: (): void => { - this.logoutUser(); + this.$router.push('/metadata'); } + }); + } + + menuItems.push({ + title: this.$t('settings'), + action: (): void => { + this.$router.push('/settings'); } - ]; + }); + + menuItems.push({ + title: this.$t('logout'), + action: (): void => { + this.logoutUser(); + } + }); + + return menuItems; } }, methods: { diff --git a/components/Item/Card.vue b/components/Item/Card.vue index 7d76c24db9c..315a4acc047 100644 --- a/components/Item/Card.vue +++ b/components/Item/Card.vue @@ -3,7 +3,7 @@
{{ itemIcon }} @@ -233,7 +234,7 @@ export default Vue.extend({ episodeNumber: this.item.IndexNumber })} - ${this.item.Name}`; case 'MusicAlbum': - return `${this.item.AlbumArtist}`; + return `${this.item.AlbumArtist || ''}`; case 'Series': { if (this.item.Status === 'Continuing') { return `${this.item.ProductionYear} - ${this.$t('present')}`; @@ -323,6 +324,7 @@ export default Vue.extend({ } .card-content { + background-color: #{map-get($material-dark, 'menus')}; overflow: hidden; position: absolute; top: 0; @@ -339,6 +341,9 @@ export default Vue.extend({ background-position: center center; -webkit-tap-highlight-color: transparent; } +.theme--dark .card-content { + background-color: #{map-get($material-dark, 'menus')}; +} .card-image { width: 100%; diff --git a/components/Layout/AudioControls.vue b/components/Layout/AudioControls.vue index 195371809e9..4ef6731fa8f 100644 --- a/components/Layout/AudioControls.vue +++ b/components/Layout/AudioControls.vue @@ -27,6 +27,7 @@ diff --git a/components/Layout/HomeHeader/HomeHeaderItems.vue b/components/Layout/HomeHeader/HomeHeaderItems.vue index 29a1b9daa5c..9d60cd22a8c 100644 --- a/components/Layout/HomeHeader/HomeHeaderItems.vue +++ b/components/Layout/HomeHeader/HomeHeaderItems.vue @@ -10,6 +10,22 @@ >
+
+ + {{ getItemIcon(item) }} + +
@import '~/assets/styles/HomeHeader.scss'; + +.default-icon { + display: flex; + align-content: center; + justify-content: center; + height: 100%; + width: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.slide-backdrop { + background-color: #{map-get($material-dark, 'menus')}; +} diff --git a/components/Layout/Images/BlurhashImage.vue b/components/Layout/Images/BlurhashImage.vue index d2d687ac465..a9ddda81597 100644 --- a/components/Layout/Images/BlurhashImage.vue +++ b/components/Layout/Images/BlurhashImage.vue @@ -166,6 +166,7 @@ export default Vue.extend({ bottom: 0; } img { + color: transparent; object-fit: cover; } diff --git a/components/System/DarkModeToggle.vue b/components/System/DarkModeToggle.vue index 73c002ba034..9a4bfe122ce 100644 --- a/components/System/DarkModeToggle.vue +++ b/components/System/DarkModeToggle.vue @@ -1,5 +1,22 @@