Themes: Improve styles and add new "Snow" theme based on nordtheme.com

Signed-off-by: Michael Mayer <michael@photoprism.app>
This commit is contained in:
Michael Mayer 2023-01-05 17:35:22 +01:00
parent a3564578af
commit 93251d77a0
14 changed files with 282 additions and 28 deletions

View file

@ -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": "*"
}

View file

@ -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)}">
</v-select>
@ -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})}">
</v-select>
@ -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"

View file

@ -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 */

View file

@ -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,

View file

@ -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 {

View file

@ -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,

View file

@ -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,

View file

@ -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,

View file

@ -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;
}

View file

@ -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,

View file

@ -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,

View file

@ -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",

View file

@ -8,7 +8,7 @@
<v-spacer></v-spacer>
<v-btn icon href="https://photoprism.app/" target="_blank" class="action-info" :title="$gettext('Learn more')">
<v-icon size="26">info</v-icon>
<v-icon size="26">diamond</v-icon>
</v-btn>
</v-toolbar>
<v-container fluid class="px-4 pt-4 pb-1">

View file

@ -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})}">
</v-select>
@ -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})}">
</v-select>