Mirrors/photoprism
1
0
Fork 0
mirror of https://github.com/photoprism/photoprism.git synced 2026-08-01 14:32:12 +00:00
Code Issues Projects Releases Wiki Activity

Frontend: Update theme styles and colors

Browse source
This commit is contained in:
Michael Mayer 2022-05-28 20:57:37 +02:00
parent 122cbfceba
commit 87f2c3d796
6 changed files with 56 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/component/navigation.vue
View file

@ -12,7 +12,7 @@
<v-speed-dial
v-model="speedDial"
direction="bottom"
transition="slide-y-reverse-transition"
transition="slide-y-transition"
class="mobile-dial"
open-on-hover
dark

2
frontend/src/css/app.css
View file

@ -347,7 +347,7 @@ ol, ul {
.rounded-6,
.rounded-6>a,
#photoprism div.v-dialog>div.v-card,
#photoprism div.v-dialog .v-expansion-panel__container {
#photoprism div.v-dialog>div.v-card>.v-card__text .v-expansion-panel__container {
border-radius: 6px;
}

10
frontend/src/css/navigation.css
View file

@ -152,6 +152,12 @@ nav .v-list__tile__title.title {
padding: 0;
}
/* SPEED DIAL */
#photoprism .v-speed-dial__list .v-btn .v-icon {
font-size: 19px;
}
/* MOBILE NAV SPEED DIAL */
#photoprism .mobile-dial .v-btn.nav-menu-trigger {
@ -163,10 +169,6 @@ nav .v-list__tile__title.title {
display: none!important;
}
#photoprism .mobile-dial .v-speed-dial__list .v-btn .v-icon {
font-size: 19px;
}
#photoprism .mobile-dial .v-speed-dial__list .v-btn {
color: white!important;
background-color: #8916ff;

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

@ -37,15 +37,15 @@ body.dark-theme .theme--light.v-list a:hover {
box-shadow: none;
}
/* Raspberry */
/* Raspberry Theme */
#photoprism.theme-raspberry .mobile-dial .v-speed-dial__list .v-btn {
color: white;
background-color: #a40e52;
background-color: #B81469;
}
#photoprism.theme-raspberry .mobile-dial .v-speed-dial__list .v-btn.highlight {
background-color: #bc105d;
background-color: #E72388;
}
#photoprism.theme-raspberry .mobile-dial .v-speed-dial__list .v-btn:hover,
@ -53,6 +53,15 @@ body.dark-theme .theme--light.v-list a:hover {
background-color: #d31269;
}
#photoprism.theme-raspberry .navigation.darken-1 {
background-color: #bc105d!important;
#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;
}

27
frontend/src/css/themes/gemstone.css
View file

@ -1,7 +1,7 @@
/* Gemstone Theme */
body.dark-theme.theme-gemstone {
background: #444 !important;
background: #353535 !important;
}
#photoprism.container.theme-gemstone {
@ -9,8 +9,8 @@ body.dark-theme.theme-gemstone {
}
#photoprism.container.theme-gemstone div.loading-animation {
color: #c4f1e5 !important;
caret-color: #c4f1e5 !important;
color: #AFB4D4 !important;
caret-color: #AFB4D4 !important;
}
#photoprism.container.theme-gemstone div.loading-animation .loading-underlay {
@ -21,21 +21,21 @@ body.dark-theme.theme-gemstone {
.theme-gemstone .p-page,
.theme-gemstone .form,
.theme-gemstone .v-content {
background: #444 !important;
background: #353535 !important;
}
#photoprism.theme-gemstone .theme--light.v-small-dialog__content,
#photoprism.theme-gemstone .theme--light.v-sheet,
#photoprism.theme-gemstone .theme--light.v-card {
background: #444;
background: #353535;
}
.theme-gemstone .application.theme--light {
background: #444;
background: #353535;
}
#photoprism.theme-gemstone .theme--light .v-table {
background: #4E4E4E;
background: #353535;
}
#photoprism.theme-gemstone .theme--light.v-table thead th,
@ -53,7 +53,7 @@ body.dark-theme.theme-gemstone {
}
#photoprism.theme-gemstone .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
background: #4E4E4E;
background: #353535;
}
#photoprism.theme-gemstone .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon {
@ -77,11 +77,11 @@ body.dark-theme.theme-gemstone {
}
#photoprism.theme-gemstone .theme--light.v-list {
background: #555;
background: #3a3a3a;
}
#photoprism.theme-gemstone a.text-link {
color: #c8e3e7 !important;
color: #BABEDC !important;
}
#photoprism.theme-gemstone .theme--light.v-select .v-select__selections {
@ -90,7 +90,7 @@ body.dark-theme.theme-gemstone {
#photoprism.theme-gemstone .theme--light.v-list .v-list__tile__sub-title,
#photoprism.theme-gemstone .accent--text {
color: #7a83b8 !important;
color: #BABEDC !important;
}
#photoprism.theme-gemstone .theme--light.v-input:not(.v-input--is-disabled) input,
@ -108,3 +108,8 @@ body.dark-theme.theme-gemstone {
color: #cccccc;
background: transparent;
}
#photoprism.theme-gemstone .cards-view .result {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}

36
frontend/src/options/themes.json
View file

@ -90,14 +90,14 @@
"dark": false,
"sponsor": false,
"colors": {
"application": "#fafafa",
"application": "#FDEDF5",
"form": "#fafafa",
"primary": "#ffb3cc",
"primary-button": "#757575",
"secondary-dark": "#757575",
"secondary": "#fbd0e3",
"secondary-light": "#fde8f1",
"accent": "#9e9e9e",
"primary-button": "#EA3495",
"secondary-dark": "#EA3495",
"secondary": "#F6C5DC",
"secondary-light": "#FDD8E7",
"accent": "#B994A5",
"error": "#e57373",
"info": "#00acc1",
"success": "#4db6ac",
@ -110,9 +110,9 @@
"edit": "#00b8d4",
"share": "#9575cd",
"love": "#ef5350",
"terminal": "#616161",
"navigation": "#b2346c",
"navigation-home": "#9e2e60"
"terminal": "#a97599",
"navigation": "#A21F65",
"navigation-home": "#891A55"
}
},
"seaweed": {
@ -351,13 +351,13 @@
"dark": true,
"sponsor": true,
"colors": {
"application": "#444",
"application": "#353535",
"form": "#eeeeee",
"primary": "#9ca2c9",
"primary-button": "#6c6f84",
"secondary-dark": "#7e8bce",
"secondary": "#363636",
"secondary-light": "#3b3b3b",
"primary": "#AFB4D4",
"primary-button": "#545465",
"secondary-dark": "#9BA0C5",
"secondary": "#272727",
"secondary-light": "#424242",
"accent": "#333",
"error": "#e57373",
"info": "#00acc1",
@ -371,9 +371,9 @@
"edit": "#00b8d4",
"share": "#9575cd",
"love": "#ef5350",
"terminal": "#333333",
"navigation": "#1b1e32",
"navigation-home": "#121421"
"terminal": "#4A464F",
"navigation": "#1C1C21",
"navigation-home": "#131316"
}
}
}