UX: Improve theme styles and colors
Signed-off-by: Michael Mayer <michael@photoprism.app>
This commit is contained in:
parent
e9be373942
commit
96e1218ee2
|
@ -81,13 +81,13 @@
|
|||
.v-text-field.v-text-field--box > .v-input__control > .v-input__slot,
|
||||
.v-text-field.v-text-field--solo > .v-input__control > .v-input__slot,
|
||||
#photoprism .v-dialog .v-responsive.v-image,
|
||||
#photoprism .cards-view .result,
|
||||
#photoprism .mosaic-view .result.image,
|
||||
#photoprism .list-view .result .image {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.v-alert,
|
||||
#photoprism .cards-view .result,
|
||||
#photoprism div.v-dialog > div.v-card,
|
||||
#photoprism div.v-dialog > div.v-card > .v-card__text .v-expansion-panel__container,
|
||||
#photoprism div.v-dialog > form > div.v-card,
|
||||
|
|
|
@ -442,7 +442,7 @@ body.chrome #photoprism .search-results .result {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
#photoprism .cards-view .v-card .card-background {
|
||||
#photoprism .cards-view .card .card-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
@ -455,23 +455,23 @@ body.chrome #photoprism .search-results .result {
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
#photoprism .cards-view .v-card .card-details {
|
||||
#photoprism .cards-view .card .card-details {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#photoprism .cards-view .v-card.is-selected .card-details {
|
||||
#photoprism .cards-view .card.is-selected .card-details {
|
||||
color: #fff;
|
||||
background-color: #333;
|
||||
background-color: #424142;
|
||||
}
|
||||
|
||||
#photoprism .cards-view .v-card.is-selected .card-details .v-icon {
|
||||
color: #fff;
|
||||
#photoprism .cards-view .card.is-selected,
|
||||
#photoprism .cards-view .card.is-selected .card-background {
|
||||
background-color: #424142 !important;
|
||||
}
|
||||
|
||||
#photoprism .cards-view .v-card.is-selected,
|
||||
#photoprism .cards-view .v-card.is-selected .card-background {
|
||||
background-color: #333 !important;
|
||||
#photoprism .cards-view .card.is-selected .card-details .v-icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#photoprism .search-results.list-view .input-select,
|
||||
|
|
|
@ -7,6 +7,8 @@
|
|||
@import url("themes/gemstone.css");
|
||||
@import url("themes/carbon.css");
|
||||
@import url("themes/snow.css");
|
||||
@import url("themes/lavender.css");
|
||||
@import url("themes/raspberry.css");
|
||||
|
||||
/* General Styles */
|
||||
|
||||
|
@ -100,32 +102,3 @@ body.dark-theme #photoprism .theme--light.v-select .v-select__selections {
|
|||
background: inherit;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Raspberry Theme */
|
||||
|
||||
#photoprism.theme-raspberry .mobile-dial .v-speed-dial__list .v-btn {
|
||||
color: white;
|
||||
background-color: #B81469;
|
||||
}
|
||||
|
||||
#photoprism.theme-raspberry .mobile-dial .v-speed-dial__list .v-btn.highlight {
|
||||
background-color: #E72388;
|
||||
}
|
||||
|
||||
#photoprism.theme-raspberry .mobile-dial .v-speed-dial__list .v-btn:hover,
|
||||
#photoprism.theme-raspberry .mobile-dial .v-speed-dial__list .v-btn.highlight:hover {
|
||||
background-color: #d31269;
|
||||
}
|
||||
|
||||
#photoprism.theme-raspberry .theme--light.v-icon {
|
||||
color: rgba(103, 20, 64, 0.85)
|
||||
}
|
||||
|
||||
#photoprism.theme-raspberry .navigation.darken-1 {
|
||||
background-color: #a21f65!important;
|
||||
}
|
||||
|
||||
#photoprism.theme-raspberry .cards-view .result {
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
}
|
||||
|
|
|
@ -88,3 +88,17 @@ body.dark-theme.theme-carbon,
|
|||
color: #cccccc;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#photoprism.theme-carbon .cards-view .card.is-selected .card-details {
|
||||
color: #fff;
|
||||
background-color: #302c3d;
|
||||
}
|
||||
|
||||
#photoprism.theme-carbon .cards-view .card.is-selected,
|
||||
#photoprism.theme-carbon .cards-view .card.is-selected .card-background {
|
||||
background-color: #302c3d !important;
|
||||
}
|
||||
|
||||
#photoprism.theme-carbon .cards-view .card.is-selected .card-details .v-icon {
|
||||
color: #fff;
|
||||
}
|
|
@ -108,7 +108,16 @@ body.dark-theme.theme-gemstone,
|
|||
background: transparent;
|
||||
}
|
||||
|
||||
#photoprism.theme-gemstone .cards-view .result {
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
#photoprism.theme-gemstone .cards-view .card.is-selected .card-details {
|
||||
color: #fff;
|
||||
background-color: #47474b;
|
||||
}
|
||||
|
||||
#photoprism.theme-gemstone .cards-view .card.is-selected,
|
||||
#photoprism.theme-gemstone .cards-view .card.is-selected .card-background {
|
||||
background-color: #47474b !important;
|
||||
}
|
||||
|
||||
#photoprism.theme-gemstone .cards-view .card.is-selected .card-details .v-icon {
|
||||
color: #fff;
|
||||
}
|
38
frontend/src/css/themes/lavender.css
Normal file
38
frontend/src/css/themes/lavender.css
Normal file
|
@ -0,0 +1,38 @@
|
|||
/* Lavender Theme */
|
||||
|
||||
body.dark-theme.theme-lavender,
|
||||
.theme-lavender .v-content__wrap,
|
||||
.theme-lavender .p-page,
|
||||
.theme-lavender .form,
|
||||
.theme-lavender .v-content {
|
||||
background: #fafafa !important;
|
||||
}
|
||||
|
||||
.theme-lavender .application.theme--light,
|
||||
#photoprism.theme-lavender .theme--light.v-small-dialog__content,
|
||||
#photoprism.theme-lavender .theme--light.v-sheet,
|
||||
#photoprism.theme-lavender .theme--light.v-card {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
#photoprism.theme-lavender .theme--light .v-table {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
#photoprism.theme-lavender .theme--light.v-table tbody tr:hover {
|
||||
background: #f6f7fa;
|
||||
}
|
||||
|
||||
#photoprism.theme-lavender .cards-view .card.is-selected .card-details {
|
||||
color: #333;
|
||||
background-color: #C3C7E0;
|
||||
}
|
||||
|
||||
#photoprism.theme-lavender .cards-view .card.is-selected,
|
||||
#photoprism.theme-lavender .cards-view .card.is-selected .card-background {
|
||||
background-color: #C3C7E0 !important;
|
||||
}
|
||||
|
||||
#photoprism.theme-lavender .cards-view .card.is-selected .card-details .v-icon {
|
||||
color: #333;
|
||||
}
|
23
frontend/src/css/themes/raspberry.css
Normal file
23
frontend/src/css/themes/raspberry.css
Normal file
|
@ -0,0 +1,23 @@
|
|||
/* Raspberry Theme */
|
||||
|
||||
#photoprism.theme-raspberry .mobile-dial .v-speed-dial__list .v-btn {
|
||||
color: white;
|
||||
background-color: #B81469;
|
||||
}
|
||||
|
||||
#photoprism.theme-raspberry .mobile-dial .v-speed-dial__list .v-btn.highlight {
|
||||
background-color: #E72388;
|
||||
}
|
||||
|
||||
#photoprism.theme-raspberry .mobile-dial .v-speed-dial__list .v-btn:hover,
|
||||
#photoprism.theme-raspberry .mobile-dial .v-speed-dial__list .v-btn.highlight:hover {
|
||||
background-color: #d31269;
|
||||
}
|
||||
|
||||
#photoprism.theme-raspberry .theme--light.v-icon {
|
||||
color: rgba(103, 20, 64, 0.85)
|
||||
}
|
||||
|
||||
#photoprism.theme-raspberry .navigation.darken-1 {
|
||||
background-color: #a21f65!important;
|
||||
}
|
|
@ -129,7 +129,16 @@ body.theme-snow,
|
|||
background: transparent;
|
||||
}
|
||||
|
||||
#photoprism.theme-snow .cards-view .result {
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
#photoprism.theme-snow .cards-view .card.is-selected .card-details {
|
||||
color: #333333;
|
||||
background-color: #D8DEE9;
|
||||
}
|
||||
|
||||
#photoprism.theme-snow .cards-view .card.is-selected,
|
||||
#photoprism.theme-snow .cards-view .card.is-selected .card-background {
|
||||
background-color: #D8DEE9 !important;
|
||||
}
|
||||
|
||||
#photoprism.theme-snow .cards-view .card.is-selected .card-details .v-icon {
|
||||
color: #333333;
|
||||
}
|
|
@ -135,7 +135,7 @@ let themes = {
|
|||
colors: {
|
||||
application: "#fafafa",
|
||||
form: "#fafafa",
|
||||
card: "#eef0f6",
|
||||
card: "#DFE0E8",
|
||||
primary: "#9ca2c9",
|
||||
"primary-button": "#6c6f84",
|
||||
"secondary-dark": "#475185",
|
||||
|
|
Loading…
Reference in a new issue