luisgulo/photoprism
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Frontend: Add "Mint" theme and move default styles to themes/default.css

Browse source 
Signed-off-by: Michael Mayer <michael@photoprism.app>
This commit is contained in:
Michael Mayer 2023-07-21 09:55:57 +02:00
parent b5b13b0fbb
commit 20df14e9d1
5 changed files with 237 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/package-lock.json generated
View file

@ -5638,9 +5638,9 @@
}
},
"node_modules/electron-to-chromium": {
"version": "1.4.466",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.466.tgz",
"integrity": "sha512-TSkRvbXRXD8BwhcGlZXDsbI2lRoP8dvqR7LQnqQNk9KxXBc4tG8O+rTuXgTyIpEdiqSGKEBSqrxdqEntnjNncA=="
"version": "1.4.467",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.467.tgz",
"integrity": "sha512-2qI70O+rR4poYeF2grcuS/bCps5KJh6y1jtZMDDEteyKJQrzLOEhFyXCLcHW6DTBjKjWkk26JhWoAi+Ux9A0fg=="
},
"node_modules/emoji-regex": {
"version": "8.0.0",

80
frontend/src/css/themes.css
View file

@ -1,3 +1,4 @@
@import url("themes/default.css");
@import url("themes/grayscale.css");
@import url("themes/shadow.css");
@import url("themes/yellowstone.css");
@ -6,11 +7,11 @@
@import url("themes/neon.css");
@import url("themes/gemstone.css");
@import url("themes/carbon.css");
@import url("themes/mint.css");
@import url("themes/nordic.css");
@import url("themes/lavender.css");
@import url("themes/default.css");
/* General Styles */
/* Input Style Overrides */
:-webkit-autofill,
:-webkit-autofill:hover,
@ -21,90 +22,15 @@ input:-webkit-autofill:focus {
transition: background-color 9999s !important;
}
body.dark-theme #photoprism .v-tabs .v-badge__badge {
color: #000000;
}
body.dark-theme #photoprism .theme--light.v-table thead th {
color: #ffffff;
}
.card {
background-color: #e0e0e0;
}
body.dark-theme .card {
background-color: #1a1a1a;
}
body.dark-theme #photoprism .v-table .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
background: transparent;
}
body.dark-theme .theme--light.v-list .v-list__tile--highlighted,
body.dark-theme .theme--light.v-list a:hover {
background: rgba(255,255,255,0.3) !important;
}
body.dark-theme .v-input input::placeholder {
color: rgba(255,255,255,0.5) !important;
}
.v-text-field>.v-input__control>.v-input__slot:after,
.v-text-field>.v-input__control>.v-input__slot:before {
display: none !important;
}
/*
body.dark-theme .v-text-field.v-text-field--enclosed .v-text-field__details {
padding-left: 0;
}*/
.theme--light.v-list .v-list__tile--highlighted,
.theme--light.v-list a:hover {
background: rgba(155,155,155,0.3) !important;
}
body.dark-theme #photoprism .map-control .theme--light.v-input:not(.v-input--is-disabled) i,
body.dark-theme #photoprism .map-control .theme--light.v-input:not(.v-input--is-disabled) input {
color: #333333;
}
body:not(.dark-theme) .theme--dark.v-btn.v-btn--disabled:not(.v-btn--icon):not(.v-btn--flat):not(.v-btn--outline) {
color: rgb(51, 51, 51)!important;
background-color: #d9dadc!important;
}
body.dark-theme #photoprism .theme--light.v-chip,
body.dark-theme #photoprism .v-card .theme--light.v-text-field--box>.v-input__control>.v-input__slot {
background: #00000033;
}
body.dark-theme #photoprism,
body.dark-theme #photoprism .p-page a,
body.dark-theme #photoprism .v-datatable a,
body.dark-theme #photoprism .theme--light.v-expansion-panel .v-expansion-panel__container,
body.dark-theme #photoprism .theme--light.v-tabs__bar .v-tabs__div,
body.dark-theme #photoprism .theme--light {
color: #ffffff;
caret-color: #ffffff;
stroke: #ffffff;
}
body.dark-theme #photoprism .theme--light.v-label {
color: #ffffffaa;
}
body.dark-theme #photoprism .theme--light.v-select .v-select__selections {
color: #ffffffee;
}
#photoprism .v-select.v-text-field--box .v-select__selections {
padding-top: 20px;
}
/* Exceptions */
#photoprism .theme--light.v-text-field--solo.background-inherit>.v-input__control>.v-input__slot {
background: inherit;
box-shadow: none;

99
frontend/src/css/themes/default.css
View file

@ -1,7 +1,76 @@
/* Default Theme */
/* Component Color Defaults */
#photoprism.theme-default .theme--light.v-text-field--solo>.v-input__control>.v-input__slot,
#photoprism.theme-default .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
.card {
background-color: #e0e0e0;
}
body.dark-theme .card {
background-color: #1a1a1a;
}
body.dark-theme #photoprism .v-table .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
background: transparent;
}
body.dark-theme .theme--light.v-list .v-list__tile--highlighted,
body.dark-theme .theme--light.v-list a:hover {
background: rgba(255,255,255,0.3) !important;
}
body.dark-theme .v-input input::placeholder {
color: rgba(255,255,255,0.5) !important;
}
body.dark-theme .theme--light .v-table {
background: #303030;
}
body.dark-theme .theme--light.v-table tbody tr:hover {
background: #343434;
}
.theme--light.v-list .v-list__tile--highlighted,
.theme--light.v-list a:hover {
background: rgba(155,155,155,0.3) !important;
}
body:not(.dark-theme) .theme--dark.v-btn.v-btn--disabled:not(.v-btn--icon):not(.v-btn--flat):not(.v-btn--outline) {
color: rgb(51, 51, 51)!important;
background-color: #d9dadc!important;
}
body.dark-theme #photoprism .theme--light.v-chip,
body.dark-theme #photoprism .v-card .theme--light.v-text-field--box>.v-input__control>.v-input__slot {
background: #00000033;
}
body.dark-theme #photoprism,
body.dark-theme #photoprism .p-page a,
body.dark-theme #photoprism .v-datatable a,
body.dark-theme #photoprism .theme--light.v-expansion-panel .v-expansion-panel__container,
body.dark-theme #photoprism .theme--light.v-tabs__bar .v-tabs__div,
body.dark-theme #photoprism .theme--light {
color: #ffffff;
caret-color: #ffffff;
stroke: #ffffff;
}
body.dark-theme #photoprism .theme--light.v-label {
color: #ffffffaa;
}
body.dark-theme #photoprism .theme--light.v-select .v-select__selections {
color: #ffffffee;
}
body.dark-theme .theme--light.v-small-dialog__content,
body.dark-theme .theme--light.v-sheet,
body.dark-theme .theme--light.v-card {
background: #2f3031;
}
body.dark-theme .theme--light.v-text-field--solo>.v-input__control>.v-input__slot,
body.dark-theme .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
background: rgba(250, 250, 255, 0.1);
}
@ -20,7 +89,10 @@ body.dark-theme #photoprism .p-page a,
body.dark-theme #photoprism .v-datatable a,
body.dark-theme #photoprism .theme--light.v-expansion-panel .v-expansion-panel__container,
body.dark-theme #photoprism .theme--light.v-tabs__bar .v-tabs__div,
body.dark-theme #photoprism .theme--light {
body.dark-theme #photoprism .theme--light,
body.dark-theme #photoprism .theme--light.v-table thead th,
body.dark-theme .theme--light.v-table thead th,
body.dark-theme .theme--light.v-table tbody td {
color: #ffffff;
}
@ -36,6 +108,12 @@ body.dark-theme #photoprism .theme--light.v-select .v-select__selections {
padding-top: 20px;
}
body.dark-theme #photoprism .v-tabs .v-badge__badge {
color: #000000;
}
/* Default Theme */
body.dark-theme.theme-default,
.theme-default .v-content__wrap,
.theme-default .p-page,
@ -51,10 +129,6 @@ body.dark-theme.theme-default,
background: #2f3031;
}
#photoprism.theme-default .theme--light .v-table {
background: #37393a;
}
#photoprism.container.theme-default {
background-image: linear-gradient(160deg, #808080 0%, #262626 100%);
}
@ -68,6 +142,10 @@ body.dark-theme.theme-default,
stroke: rgba(196, 241, 229, 0.3);
}
#photoprism.theme-default .theme--light .v-table {
background: #37393a;
}
#photoprism.theme-default .theme--light.v-table thead th,
#photoprism.theme-default .theme--light.v-table tbody td {
color: #fff;
@ -81,6 +159,11 @@ body.dark-theme.theme-default,
color: #999 !important;
}
#photoprism.theme-default .theme--light.v-text-field--solo>.v-input__control>.v-input__slot,
#photoprism.theme-default .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
background: rgba(250, 250, 255, 0.1);
}
#photoprism.theme-default .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon,
#photoprism.theme-default .theme--light.v-input--is-disabled .v-label,
#photoprism.theme-default .theme--light.v-input--is-disabled input,

92
frontend/src/css/themes/mint.css Normal file
View file

@ -0,0 +1,92 @@
/* Mint Theme */
body.dark-theme.theme-mint,
.theme-mint .v-content__wrap,
.theme-mint .p-page,
.theme-mint .form,
.theme-mint .v-content {
background: #121212 !important;
}
#photoprism.theme-mint .theme--light.v-small-dialog__content,
#photoprism.theme-mint .theme--light.v-sheet,
#photoprism.theme-mint .theme--light.v-card,
.theme-mint .application.theme--light {
background: #1e1e1e;
}
#photoprism.container.theme-mint {
background-image: linear-gradient(160deg, #808080 0%, #262626 100%);
}
#photoprism.theme-mint .theme--light .v-table {
background: #1a1a1a;
}
#photoprism.theme-mint .theme--light.v-table thead th,
#photoprism.theme-mint .theme--light.v-table tbody td {
color: #fff;
}
#photoprism.theme-mint .theme--light.v-table tbody tr:hover {
background: #2b2b2b;
}
#photoprism.theme-mint .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon {
color: #999 !important;
}
#photoprism.theme-mint .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon,
#photoprism.theme-mint .theme--light.v-input--is-disabled .v-label,
#photoprism.theme-mint .theme--light.v-input--is-disabled input,
#photoprism.theme-mint .theme--light.v-input--is-disabled textarea {
color: #ccc;
}
#photoprism.theme-mint .theme--light.v-list {
background: #232425;
}
#photoprism.theme-mint a.text-link {
color: #f6f7e8 !important;
}
#photoprism.theme-mint .footer .body-link {
color: #f6f7e8 !important;
}
#photoprism.theme-mint .theme--light.v-list .v-list__tile__sub-title,
#photoprism.theme-mint .accent--text {
color: #2bb14c !important;
}
#photoprism.theme-mint .theme--light.v-input:not(.v-input--is-disabled) input,
#photoprism.theme-mint .theme--light.v-input:not(.v-input--is-disabled) textarea {
color: #fff;
}
#photoprism.theme-mint .theme--light.v-btn.v-btn--disabled,
#photoprism.theme-mint .theme--light.v-btn.v-btn--disabled .v-btn__loading,
#photoprism.theme-mint .theme--light.v-btn.v-btn--disabled .v-icon {
color: #999 !important;
}
#photoprism.theme-mint .theme--light.v-list .v-list__tile__mask {
color: #cccccc;
background: transparent;
}
#photoprism.theme-mint .cards-view .card.is-selected .card-details {
color: #fff;
background-color: #333333;
}
#photoprism.theme-mint .cards-view .card.is-selected,
#photoprism.theme-mint .cards-view .card.is-selected .card-background {
background-color: #333333 !important;
}
#photoprism.theme-mint .cards-view .card.is-selected .card-details .v-icon {
color: #fff;
}

59
frontend/src/options/themes.js
View file

@ -10,7 +10,7 @@ let themes = {
name: "default",
colors: {
application: "#2f3031",
form: "#eeeeee",
form: "#2f3031",
card: "#232425",
primary: "#9E7BEA",
"primary-button": "#5F1DB7",
@ -41,7 +41,7 @@ let themes = {
sponsor: false,
colors: {
application: "#525252",
form: "#e5e4e2",
form: "#525252",
card: "#5e5e5e",
primary: "#c8bdb1",
"primary-button": "#726e69",
@ -103,7 +103,7 @@ let themes = {
sponsor: false,
colors: {
application: "#F5F5F5",
form: "#eeeeee",
form: "#F5F5F5",
card: "#e0e0e0",
primary: "#FFCA28",
"primary-button": "#212121",
@ -128,6 +128,38 @@ let themes = {
"navigation-home": "#000000",
},
},
mint: {
dark: true,
sponsor: false,
title: "Mint",
name: "mint",
colors: {
application: "#121212",
form: "#121212",
card: "#1e1e1e",
primary: "#2bb14c",
"primary-button": "#22903d",
"secondary-dark": "#2bb14c",
secondary: "#181818",
"secondary-light": "#1f1f1f",
accent: "#2bb14c",
error: "#e57373",
info: "#00acc1",
success: "#4db6ac",
warning: "#ffd740",
remove: "#e57373",
restore: "#64b5f6",
album: "#ffab00",
download: "#00bfa5",
private: "#00b8d4",
edit: "#00b8d4",
share: "#9575cd",
love: "#ef5350",
terminal: "#181818",
navigation: "#181818",
"navigation-home": "#181818",
},
},
nordic: {
dark: false,
sponsor: false,
@ -135,7 +167,7 @@ let themes = {
name: "nordic",
colors: {
application: "#f7f8fa",
form: "#eeeeee",
form: "#f7f8fa",
card: "#ECEFF4",
primary: "#4ca0b8",
"primary-button": "#519fb6",
@ -197,7 +229,7 @@ let themes = {
sponsor: true,
colors: {
application: "#202020",
form: "#AFB42B",
form: "#202020",
card: "#242424",
primary: "#814fd9",
"primary-button": "#7e57c2",
@ -229,7 +261,7 @@ let themes = {
name: "carbon",
colors: {
application: "#16141c",
form: "#eeeeee",
form: "#16141c",
card: "#292732",
primary: "#8a6eff",
"primary-button": "#53478a",
@ -260,7 +292,7 @@ let themes = {
sponsor: true,
colors: {
application: "#2f2f31",
form: "#eeeeee",
form: "#2f2f31",
card: "#2b2b2d",
primary: "#AFB4D4",
"primary-button": "#545465",
@ -291,7 +323,7 @@ let themes = {
sponsor: true,
colors: {
application: "#242326",
form: "#AFB42B",
form: "#242326",
card: "#1b1a1c",
primary: "#f44abf",
"primary-button": "#890664",
@ -322,7 +354,7 @@ let themes = {
sponsor: true,
colors: {
application: "#444",
form: "#eeeeee",
form: "#444",
card: "#666666",
primary: "#c4f1e5",
"primary-button": "#74817d",
@ -353,7 +385,7 @@ let themes = {
sponsor: true,
colors: {
application: "#212121",
form: "#AFB42B",
form: "#212121",
card: "#1d1d1d",
primary: "#04acaf",
"primary-button": "#444444",
@ -384,7 +416,7 @@ let themes = {
sponsor: true,
colors: {
application: "#32312f",
form: "#eeeeee",
form: "#32312f",
card: "#262524",
primary: "#ffb700",
"primary-button": "#54524e",
@ -434,6 +466,11 @@ let options = [
value: "legacy",
disabled: false,
},
{
text: "Mint",
value: "mint",
disabled: false,
},
{
text: "Nordic",
value: "nordic",