From 93251d77a02a7de1ced8e28caf3deb2220a442c4 Mon Sep 17 00:00:00 2001 From: Michael Mayer Date: Thu, 5 Jan 2023 17:35:22 +0100 Subject: [PATCH] Themes: Improve styles and add new "Snow" theme based on nordtheme.com Signed-off-by: Michael Mayer --- frontend/package-lock.json | 109 ++++++++++++++---- frontend/src/component/photo/toolbar.vue | 9 ++ frontend/src/css/themes.css | 1 + frontend/src/css/themes/abyss.css | 2 +- frontend/src/css/themes/carbon.css | 2 +- frontend/src/css/themes/gemstone.css | 2 +- frontend/src/css/themes/grayscale.css | 2 +- frontend/src/css/themes/shadow.css | 2 +- frontend/src/css/themes/snow.css | 135 +++++++++++++++++++++++ frontend/src/css/themes/vanta.css | 2 +- frontend/src/css/themes/yellowstone.css | 2 +- frontend/src/options/themes.js | 37 +++++++ frontend/src/page/about/about.vue | 2 +- frontend/src/page/albums.vue | 3 + 14 files changed, 282 insertions(+), 28 deletions(-) create mode 100644 frontend/src/css/themes/snow.css diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 346ef0e92..10ca78562 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -2493,9 +2493,9 @@ "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==" }, "node_modules/@vvo/tzdb": { - "version": "6.87.0", - "resolved": "https://registry.npmjs.org/@vvo/tzdb/-/tzdb-6.87.0.tgz", - "integrity": "sha512-EX4ssb9u2e0nnEnOVCxfiId1FitRe/uPfpqodNG2/rkV8fQs9xZe+J3cDQDHlDFI4P5eTvKc6pAT6dACPX/JIg==" + "version": "6.88.0", + "resolved": "https://registry.npmjs.org/@vvo/tzdb/-/tzdb-6.88.0.tgz", + "integrity": "sha512-sF/8+XuX5ns6IKQAzXja1zQKGwlVxlAMDoqoH0dr08XQbqOUZhH0o65rgiC9E4YZeevZiiHat4rmWT1WvSXaEA==" }, "node_modules/@webassemblyjs/ast": { "version": "1.11.1", @@ -3119,9 +3119,9 @@ } }, "node_modules/babel-loader": { - "version": "9.1.0", - "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.0.tgz", - "integrity": "sha512-Antt61KJPinUMwHwIIz9T5zfMgevnfZkEVWYDWlG888fgdvRRGD0JTuf/fFozQnfT+uq64sk1bmdHDy/mOEWnA==", + "version": "9.1.2", + "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.2.tgz", + "integrity": "sha512-mN14niXW43tddohGl8HPu5yfQq70iUThvFL/4QzESA7GcZoC0eVOhvWdQ8+3UlSjaDE9MVtsW9mxDY07W7VpVA==", "dependencies": { "find-cache-dir": "^3.3.2", "schema-utils": "^4.0.0" @@ -3469,9 +3469,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001441", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz", - "integrity": "sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==", + "version": "1.0.30001442", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001442.tgz", + "integrity": "sha512-239m03Pqy0hwxYPYR5JwOIxRJfLTWtle9FV8zosfV5pHg+/51uD4nxcUlM8+mWWGfwKtt8lJNHnD3cWw9VZ6ow==", "funding": [ { "type": "opencollective", @@ -4701,26 +4701,31 @@ } }, "node_modules/es-abstract": { - "version": "1.20.5", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.5.tgz", - "integrity": "sha512-7h8MM2EQhsCA7pU/Nv78qOXFpD8Rhqd12gYiSJVkrH9+e8VuA8JlPJK/hQjjlLv6pJvx/z1iRFKzYb0XT/RuAQ==", + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.0.tgz", + "integrity": "sha512-GUGtW7eXQay0c+PRq0sGIKSdaBorfVqsCMhGHo4elP7YVqZu9nCZS4UkK4gv71gOWNMra/PaSKD3ao1oWExO0g==", "dependencies": { "call-bind": "^1.0.2", + "es-set-tostringtag": "^2.0.0", "es-to-primitive": "^1.2.1", "function-bind": "^1.1.1", "function.prototype.name": "^1.1.5", "get-intrinsic": "^1.1.3", "get-symbol-description": "^1.0.0", + "globalthis": "^1.0.3", "gopd": "^1.0.1", "has": "^1.0.3", "has-property-descriptors": "^1.0.0", + "has-proto": "^1.0.1", "has-symbols": "^1.0.3", - "internal-slot": "^1.0.3", + "internal-slot": "^1.0.4", + "is-array-buffer": "^3.0.0", "is-callable": "^1.2.7", "is-negative-zero": "^2.0.2", "is-regex": "^1.1.4", "is-shared-array-buffer": "^1.0.2", "is-string": "^1.0.7", + "is-typed-array": "^1.1.10", "is-weakref": "^1.0.2", "object-inspect": "^1.12.2", "object-keys": "^1.1.1", @@ -4729,7 +4734,9 @@ "safe-regex-test": "^1.0.0", "string.prototype.trimend": "^1.0.6", "string.prototype.trimstart": "^1.0.6", - "unbox-primitive": "^1.0.2" + "typed-array-length": "^1.0.4", + "unbox-primitive": "^1.0.2", + "which-typed-array": "^1.1.9" }, "engines": { "node": ">= 0.4" @@ -4743,6 +4750,18 @@ "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.9.3.tgz", "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==" }, + "node_modules/es-set-tostringtag": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.0.tgz", + "integrity": "sha512-vZVAIWss0FcR/+a08s6e2/GjGjjYBCZJXDrOnj6l5kJCKhQvJs4cnVqUxkVepIhqHbKHm3uwOvPb8lRcqA3DSg==", + "dependencies": { + "get-intrinsic": "^1.1.3", + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/es-shim-unscopables": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz", @@ -6604,6 +6623,20 @@ "node": ">=4" } }, + "node_modules/globalthis": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz", + "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==", + "dependencies": { + "define-properties": "^1.1.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -6697,6 +6730,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/has-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz", + "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/has-symbols": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", @@ -7054,6 +7098,18 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-array-buffer": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.0.tgz", + "integrity": "sha512-TI2hnvT6dPUnn/jARFCJBKL1eeabAfLnKZ2lmW5Uh317s1Ii2IMroL1yMciEk/G+OETykVzlsH6x/L4q/avhgw==", + "dependencies": { + "call-bind": "^1.0.2", + "get-intrinsic": "^1.1.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", @@ -8066,9 +8122,9 @@ } }, "node_modules/luxon": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.2.0.tgz", - "integrity": "sha512-Namj3XqoJjFekq/JHQEaaAv4zyE/fyyDBrMEBnIL2s/X54SC8W5Ea0uej1TRXUArWec8OojsAVsGBYhNRjpMVw==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.2.1.tgz", + "integrity": "sha512-QrwPArQCNLAKGO/C+ZIilgIuDnEnKx5QYODdDtbFaxzsbZcc/a7WFq7MhsVYgRlwawLtvOUESTlfJ+hc/USqPg==", "engines": { "node": ">=12" } @@ -11907,6 +11963,19 @@ "node": ">= 0.6" } }, + "node_modules/typed-array-length": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz", + "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==", + "dependencies": { + "call-bind": "^1.0.2", + "for-each": "^0.3.3", + "is-typed-array": "^1.1.9" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/ua-parser-js": { "version": "0.7.32", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.32.tgz", @@ -12384,9 +12453,9 @@ } }, "node_modules/vue-luxon/node_modules/luxon": { - "version": "1.28.0", - "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.28.0.tgz", - "integrity": "sha512-TfTiyvZhwBYM/7QdAVDh+7dBTBA29v4ik0Ce9zda3Mnf8on1S5KJI8P2jKFZ8+5C0jhmr0KwJEO/Wdpm0VeWJQ==", + "version": "1.28.1", + "resolved": "https://registry.npmjs.org/luxon/-/luxon-1.28.1.tgz", + "integrity": "sha512-gYHAa180mKrNIUJCbwpmD0aTu9kV0dREDrwNnuyFAsO1Wt0EVYSZelPnJlbj9HplzXX/YWXHFTL45kvZ53M0pw==", "engines": { "node": "*" } diff --git a/frontend/src/component/photo/toolbar.vue b/frontend/src/component/photo/toolbar.vue index 1dec0ea1f..9b38d92dc 100644 --- a/frontend/src/component/photo/toolbar.vue +++ b/frontend/src/component/photo/toolbar.vue @@ -55,6 +55,7 @@ :menu-props="{'maxHeight':346}" flat solo hide-details color="secondary-dark" + background-color="secondary" item-value="ID" item-text="Name" :items="countryOptions" @@ -69,6 +70,7 @@ :menu-props="{'maxHeight':346}" flat solo hide-details color="secondary-dark" + background-color="secondary" item-value="ID" item-text="Name" :items="cameraOptions" @@ -81,6 +83,7 @@ :label="$gettext('View')" flat solo hide-details color="secondary-dark" + background-color="secondary" :items="options.views" @change="(v) => {setView(v)}"> @@ -91,6 +94,7 @@ :menu-props="{'maxHeight':400}" flat solo hide-details color="secondary-dark" + background-color="secondary" :items="options.sorting" @change="(v) => {updateQuery({'order': v})}"> @@ -101,6 +105,7 @@ :menu-props="{'maxHeight':346}" flat solo hide-details color="secondary-dark" + background-color="secondary" item-value="value" item-text="text" :items="yearOptions()" @@ -113,6 +118,7 @@ :menu-props="{'maxHeight':346}" flat solo hide-details color="secondary-dark" + background-color="secondary" item-value="value" item-text="text" :items="monthOptions()" @@ -124,6 +130,7 @@ :label="labels.lens" flat solo hide-details color="secondary-dark" + background-color="secondary-light" item-value="ID" item-text="Model" v-model="filter.lens" @@ -136,6 +143,7 @@ :menu-props="{'maxHeight':346}" flat solo hide-details color="secondary-dark" + background-color="secondary" item-value="Slug" item-text="Name" :items="colorOptions()" @@ -148,6 +156,7 @@ :menu-props="{'maxHeight':346}" flat solo hide-details color="secondary-dark" + background-color="secondary" item-value="Slug" item-text="Name" :items="categoryOptions" diff --git a/frontend/src/css/themes.css b/frontend/src/css/themes.css index 3a356ce89..3a9b4a026 100644 --- a/frontend/src/css/themes.css +++ b/frontend/src/css/themes.css @@ -6,6 +6,7 @@ @import url("themes/neon.css"); @import url("themes/gemstone.css"); @import url("themes/carbon.css"); +@import url("themes/snow.css"); /* General Styles */ diff --git a/frontend/src/css/themes/abyss.css b/frontend/src/css/themes/abyss.css index 6b6f5718b..a608975e2 100644 --- a/frontend/src/css/themes/abyss.css +++ b/frontend/src/css/themes/abyss.css @@ -25,7 +25,7 @@ body.dark-theme.theme-abyss, } #photoprism.theme-abyss .theme--light.v-table tbody tr:hover { - background: #333333; + background: #342C43; } #photoprism.theme-abyss .theme--light.v-chip, diff --git a/frontend/src/css/themes/carbon.css b/frontend/src/css/themes/carbon.css index b6c33aa2c..50e67266d 100644 --- a/frontend/src/css/themes/carbon.css +++ b/frontend/src/css/themes/carbon.css @@ -42,7 +42,7 @@ body.dark-theme.theme-carbon, } #photoprism.theme-carbon .theme--light.v-table tbody tr:hover { - background: #34314e; + background: #302c3d; } #photoprism.theme-carbon .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon { diff --git a/frontend/src/css/themes/gemstone.css b/frontend/src/css/themes/gemstone.css index 949612e23..88a3f94a8 100644 --- a/frontend/src/css/themes/gemstone.css +++ b/frontend/src/css/themes/gemstone.css @@ -38,7 +38,7 @@ body.dark-theme.theme-gemstone, } #photoprism.theme-gemstone .theme--light.v-table tbody tr:hover { - background: #666; + background: #47474b; } #photoprism.theme-gemstone .theme--light.v-chip, diff --git a/frontend/src/css/themes/grayscale.css b/frontend/src/css/themes/grayscale.css index 5c8b46f96..dcb3799e6 100644 --- a/frontend/src/css/themes/grayscale.css +++ b/frontend/src/css/themes/grayscale.css @@ -44,7 +44,7 @@ body.dark-theme.theme-grayscale { } #photoprism.theme-grayscale .theme--light.v-table tbody tr:hover { - background: #666; + background: #555; } #photoprism.theme-grayscale .theme--light.v-chip, diff --git a/frontend/src/css/themes/shadow.css b/frontend/src/css/themes/shadow.css index 42469ba5e..2995dc119 100644 --- a/frontend/src/css/themes/shadow.css +++ b/frontend/src/css/themes/shadow.css @@ -44,7 +44,7 @@ body.dark-theme.theme-shadow { } #photoprism.theme-shadow .theme--light.v-table tbody tr:hover { - background: #666; + background: #555; } #photoprism.theme-shadow .theme--light.v-chip, diff --git a/frontend/src/css/themes/snow.css b/frontend/src/css/themes/snow.css new file mode 100644 index 000000000..bf6c27979 --- /dev/null +++ b/frontend/src/css/themes/snow.css @@ -0,0 +1,135 @@ +/* Snow Theme */ + +body.theme-snow #p-navigation.theme--dark, +body.theme-snow #p-navigation .theme--dark.v-icon, +body.theme-snow #p-navigation .theme--dark.v-list, +body.theme-snow #p-navigation .theme--dark.v-toolbar, +#photoprism.theme-snow .v-navigation-drawer>.theme--dark.v-list .v-list__tile__sub-title, +body.theme-snow .theme--light.application { + color: #4C566A; +} + +body.theme-snow #p-navigation .primary--text .theme--dark.v-icon, +body.theme-snow #p-navigation .primary--text .theme--dark.v-list { + color: #4ca0b8; +} + +body.theme-snow #p-navigation .navigation-home.theme--dark .nav-logo { + color: #4C566A; +} + +body.theme-snow, +.theme-snow .v-content__wrap, +.theme-snow .p-page, +.theme-snow .form, +.theme-snow .v-content { + background: #f7f8fa !important; +} + +.theme-snow .application.theme--light, +#photoprism.theme-snow .theme--light.v-small-dialog__content, +#photoprism.theme-snow .theme--light.v-sheet, +#photoprism.theme-snow .theme--light.v-card { + background: #f7f8fa; +} + +#photoprism.theme-snow .theme--light .v-table { + background: #f2f3f7; +} + +#photoprism.container.theme-snow { + background-image: linear-gradient(160deg, #808080 0%, #262626 100%); +} + +#photoprism.container.theme-snow div.loading-animation { + color: #AFB4D4 !important; + caret-color: #AFB4D4 !important; +} + +#photoprism.container.theme-snow div.loading-animation .loading-underlay { + stroke: rgba(196, 241, 229, 0.3); +} + +#photoprism.theme-snow .theme--dark.v-toolbar, +#photoprism.theme-snow .v-list__tile.theme--dark, +#photoprism.theme-snow .theme--dark.v-toolbar .v-icon, +#photoprism.theme-snow .theme--light.v-table thead th, +#photoprism.theme-snow .theme--light.v-table tbody td { + color: #333333; +} + +#photoprism.theme-snow .theme--light.v-table tbody tr:hover { + background: #eceff4; +} + +#photoprism.theme-snow .theme--light.v-chip, +#photoprism.theme-snow .v-card__actions .theme--light.v-text-field--solo>.v-input__control>.v-input__slot { + background: #ECEFF4; +} + +#photoprism.theme-snow .theme--light.v-text-field--solo>.v-input__control>.v-input__slot { + background: rgba(250, 250, 255, 0.1); +} + +#photoprism.theme-snow .map-control .theme--light.v-input:not(.v-input--is-disabled) i, +#photoprism.theme-snow .map-control .theme--light.v-input:not(.v-input--is-disabled) input { + color: #333333; +} + +#photoprism.theme-snow .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon { + color: #999 !important; +} + +#photoprism.theme-snow .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon, +#photoprism.theme-snow .theme--light.v-input--is-disabled .v-label, +#photoprism.theme-snow .theme--light.v-input--is-disabled input, +#photoprism.theme-snow .theme--light.v-input--is-disabled textarea { + color: #4C566A; +} + +#photoprism.theme-snow, +#photoprism.theme-snow .p-page a, +#photoprism.theme-snow .v-datatable a, +#photoprism.theme-snow .theme--light.v-expansion-panel .v-expansion-panel__container, +#photoprism.theme-snow .theme--light.v-tabs__bar .v-tabs__div, +#photoprism.theme-snow .theme--light { + color: #333333; +} + +#photoprism.theme-snow .theme--light.v-list { + background: #f7f8fa; +} + +#photoprism.theme-snow a.text-link { + color: #326f80 !important; +} + +#photoprism.theme-snow .theme--light.v-select .v-select__selections { + color: #4C566A; +} + +#photoprism.theme-snow .theme--light.v-list .v-list__tile__sub-title, +#photoprism.theme-snow .accent--text { + color: #326f80 !important; +} + +#photoprism.theme-snow .theme--light.v-input:not(.v-input--is-disabled) input, +#photoprism.theme-snow .theme--light.v-input:not(.v-input--is-disabled) textarea { + color: #333333; +} + +#photoprism.theme-snow .theme--light.v-btn.v-btn--disabled, +#photoprism.theme-snow .theme--light.v-btn.v-btn--disabled .v-btn__loading, +#photoprism.theme-snow .theme--light.v-btn.v-btn--disabled .v-icon { + color: #999 !important; +} + +#photoprism.theme-snow .theme--light.v-list .v-list__tile__mask { + color: #cccccc; + background: transparent; +} + +#photoprism.theme-snow .cards-view .result { + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} \ No newline at end of file diff --git a/frontend/src/css/themes/vanta.css b/frontend/src/css/themes/vanta.css index 73f6ce374..fe7adb09d 100644 --- a/frontend/src/css/themes/vanta.css +++ b/frontend/src/css/themes/vanta.css @@ -44,7 +44,7 @@ body.dark-theme.theme-vanta { } #photoprism.theme-vanta .theme--light.v-table tbody tr:hover { - background: #333333; + background: #303536; } #photoprism.theme-vanta .theme--light.v-chip, diff --git a/frontend/src/css/themes/yellowstone.css b/frontend/src/css/themes/yellowstone.css index c722615f4..c917527fa 100644 --- a/frontend/src/css/themes/yellowstone.css +++ b/frontend/src/css/themes/yellowstone.css @@ -38,7 +38,7 @@ body.dark-theme.theme-yellowstone, } #photoprism.theme-yellowstone .theme--light.v-table tbody tr:hover { - background: #666; + background: #403d3a; } #photoprism.theme-yellowstone .theme--light.v-chip, diff --git a/frontend/src/options/themes.js b/frontend/src/options/themes.js index 802240baa..06cb94b08 100644 --- a/frontend/src/options/themes.js +++ b/frontend/src/options/themes.js @@ -407,6 +407,38 @@ let themes = { "navigation-home": "#0E0D12", }, }, + snow: { + dark: false, + sponsor: true, + title: "Snow", + name: "snow", + colors: { + application: "#f7f8fa", + form: "#eeeeee", + card: "#ECEFF4", + primary: "#4ca0b8", + "primary-button": "#88C0D0", + "secondary-dark": "#4ca0b8", + secondary: "#e7ebf1", + "secondary-light": "#eceff4", + accent: "#81A1C1", + error: "#BF616A", + info: "#88C0D0", + success: "#8FBCBB", + warning: "#f0d8a8", + remove: "#BF616A", + restore: "#81A1C1", + album: "#EBCB8B", + download: "#8FBCBB", + private: "#88C0D0", + edit: "#88C0D0", + share: "#B48EAD", + love: "#ef5350", + terminal: "#4C566A", + navigation: "#e7ebf1", + "navigation-home": "#e2e6ee", + }, + }, }; /* Available Themes */ @@ -457,6 +489,11 @@ let options = [ value: "shadow", disabled: false, }, + { + text: $gettext("Snow"), + value: "snow", + disabled: false, + }, { text: $gettext("Onyx"), value: "onyx", diff --git a/frontend/src/page/about/about.vue b/frontend/src/page/about/about.vue index 51e5b4ca9..8b0b181ff 100644 --- a/frontend/src/page/about/about.vue +++ b/frontend/src/page/about/about.vue @@ -8,7 +8,7 @@ - info + diamond diff --git a/frontend/src/page/albums.vue b/frontend/src/page/albums.vue index b1d1eafca..b410f6cf9 100644 --- a/frontend/src/page/albums.vue +++ b/frontend/src/page/albums.vue @@ -51,6 +51,7 @@ :menu-props="{'maxHeight':346}" flat solo hide-details color="secondary-dark" + background-color="secondary" item-value="value" item-text="text" :items="yearOptions()" @@ -63,6 +64,7 @@ :menu-props="{'maxHeight':346}" flat solo hide-details color="secondary-dark" + background-color="secondary" :items="categories" @change="(v) => {updateQuery({'category': v})}"> @@ -73,6 +75,7 @@ :menu-props="{'maxHeight':400}" flat solo hide-details color="secondary-dark" + background-color="secondary" :items="options.sorting" @change="(v) => {updateQuery({'order': v})}">