From 87f2c3d79606e26d5ea953fecaf2aa19cdaffbf8 Mon Sep 17 00:00:00 2001 From: Michael Mayer Date: Sat, 28 May 2022 20:57:37 +0200 Subject: [PATCH] Frontend: Update theme styles and colors --- frontend/src/component/navigation.vue | 2 +- frontend/src/css/app.css | 2 +- frontend/src/css/navigation.css | 10 +++++--- frontend/src/css/themes.css | 19 ++++++++++---- frontend/src/css/themes/gemstone.css | 27 ++++++++++++-------- frontend/src/options/themes.json | 36 +++++++++++++-------------- 6 files changed, 56 insertions(+), 40 deletions(-) diff --git a/frontend/src/component/navigation.vue b/frontend/src/component/navigation.vue index ed4f442f0..085439f6a 100644 --- a/frontend/src/component/navigation.vue +++ b/frontend/src/component/navigation.vue @@ -12,7 +12,7 @@ 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; } diff --git a/frontend/src/css/navigation.css b/frontend/src/css/navigation.css index 875173355..be18f4849 100644 --- a/frontend/src/css/navigation.css +++ b/frontend/src/css/navigation.css @@ -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; diff --git a/frontend/src/css/themes.css b/frontend/src/css/themes.css index c3877cf44..cbcaf93d6 100644 --- a/frontend/src/css/themes.css +++ b/frontend/src/css/themes.css @@ -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; } diff --git a/frontend/src/css/themes/gemstone.css b/frontend/src/css/themes/gemstone.css index 52c7a0043..2145c2572 100644 --- a/frontend/src/css/themes/gemstone.css +++ b/frontend/src/css/themes/gemstone.css @@ -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; +} \ No newline at end of file diff --git a/frontend/src/options/themes.json b/frontend/src/options/themes.json index b6e78de7c..803114da6 100644 --- a/frontend/src/options/themes.json +++ b/frontend/src/options/themes.json @@ -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" } } }