From 53cddf5a4365614024670bb455de41e2b45da2b0 Mon Sep 17 00:00:00 2001 From: Michael Mayer Date: Tue, 28 Mar 2023 13:42:04 +0200 Subject: [PATCH] Themes: Rename "Snow" to "Nordic" and remove "Cyano" theme Signed-off-by: Michael Mayer --- frontend/src/css/themes.css | 2 +- frontend/src/css/themes/nordic.css | 144 +++++++++++ frontend/src/css/themes/snow.css | 144 ----------- frontend/src/options/themes.js | 380 +++++++++++++---------------- 4 files changed, 317 insertions(+), 353 deletions(-) create mode 100644 frontend/src/css/themes/nordic.css delete mode 100644 frontend/src/css/themes/snow.css diff --git a/frontend/src/css/themes.css b/frontend/src/css/themes.css index ae35289ce0c..75b899875af 100644 --- a/frontend/src/css/themes.css +++ b/frontend/src/css/themes.css @@ -6,7 +6,7 @@ @import url("themes/neon.css"); @import url("themes/gemstone.css"); @import url("themes/carbon.css"); -@import url("themes/snow.css"); +@import url("themes/nordic.css"); @import url("themes/lavender.css"); @import url("themes/raspberry.css"); diff --git a/frontend/src/css/themes/nordic.css b/frontend/src/css/themes/nordic.css new file mode 100644 index 00000000000..d1a8f064ec7 --- /dev/null +++ b/frontend/src/css/themes/nordic.css @@ -0,0 +1,144 @@ +/* Nordic Theme */ + +body.theme-nordic #p-navigation.theme--dark, +body.theme-nordic #p-navigation .theme--dark.v-icon, +body.theme-nordic #p-navigation .theme--dark.v-list, +body.theme-nordic #p-navigation .theme--dark.v-toolbar, +#photoprism.theme-nordic .v-navigation-drawer>.theme--dark.v-list .v-list__tile__sub-title, +body.theme-nordic .theme--light.application { + color: #4C566A; +} + +body.theme-nordic #p-navigation .primary--text .theme--dark.v-icon, +body.theme-nordic #p-navigation .primary--text .theme--dark.v-list { + color: #4ca0b8; +} + +body.theme-nordic #p-navigation .navigation-home.theme--dark .nav-logo { + color: #4C566A; +} + +body.theme-nordic, +.theme-nordic .v-content__wrap, +.theme-nordic .p-page, +.theme-nordic .form, +.theme-nordic .v-content { + background: #f7f8fa !important; +} + +.theme-nordic .application.theme--light, +#photoprism.theme-nordic .theme--light.v-small-dialog__content, +#photoprism.theme-nordic .theme--light.v-sheet, +#photoprism.theme-nordic .theme--light.v-card { + background: #f7f8fa; +} + +#photoprism.theme-nordic .theme--light .v-table { + background: #f2f3f7; +} + +#photoprism.container.theme-nordic { + background-image: linear-gradient(160deg, #808080 0%, #262626 100%); +} + +#photoprism.container.theme-nordic div.loading-animation { + color: #AFB4D4 !important; + caret-color: #AFB4D4 !important; +} + +#photoprism.container.theme-nordic div.loading-animation .loading-underlay { + stroke: rgba(196, 241, 229, 0.3); +} + +#photoprism.theme-nordic .theme--dark.v-toolbar, +#photoprism.theme-nordic .v-list__tile.theme--dark, +#photoprism.theme-nordic .theme--dark.v-toolbar .v-icon, +#photoprism.theme-nordic .theme--light.v-table thead th, +#photoprism.theme-nordic .theme--light.v-table tbody td { + color: #333333; +} + +#photoprism.theme-nordic .theme--light.v-table tbody tr:hover { + background: #eceff4; +} + +#photoprism.theme-nordic .theme--light.v-chip, +#photoprism.theme-nordic .v-card__actions .theme--light.v-text-field--solo>.v-input__control>.v-input__slot { + background: #c5dee5; +} + +#photoprism.theme-nordic .theme--light.v-text-field--solo>.v-input__control>.v-input__slot { + background: #eceff4; +} + +#photoprism.theme-nordic .map-control .theme--light.v-input:not(.v-input--is-disabled) i, +#photoprism.theme-nordic .map-control .theme--light.v-input:not(.v-input--is-disabled) input { + color: #333333; +} + +#photoprism.theme-nordic .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon { + color: #999 !important; +} + +#photoprism.theme-nordic .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon, +#photoprism.theme-nordic .theme--light.v-input--is-disabled .v-label, +#photoprism.theme-nordic .theme--light.v-input--is-disabled input, +#photoprism.theme-nordic .theme--light.v-input--is-disabled textarea { + color: #4C566A; +} + +#photoprism.theme-nordic, +#photoprism.theme-nordic .p-page a, +#photoprism.theme-nordic .v-datatable a, +#photoprism.theme-nordic .theme--light.v-expansion-panel .v-expansion-panel__container, +#photoprism.theme-nordic .theme--light.v-tabs__bar .v-tabs__div, +#photoprism.theme-nordic .theme--light { + color: #333333; +} + +#photoprism.theme-nordic .theme--light.v-list { + background: #f7f8fa; +} + +#photoprism.theme-nordic a.text-link { + color: #326f80 !important; +} + +#photoprism.theme-nordic .theme--light.v-select .v-select__selections { + color: #4C566A; +} + +#photoprism.theme-nordic .theme--light.v-list .v-list__tile__sub-title, +#photoprism.theme-nordic .accent--text { + color: #326f80 !important; +} + +#photoprism.theme-nordic .theme--light.v-input:not(.v-input--is-disabled) input, +#photoprism.theme-nordic .theme--light.v-input:not(.v-input--is-disabled) textarea { + color: #333333; +} + +#photoprism.theme-nordic .theme--light.v-btn.v-btn--disabled, +#photoprism.theme-nordic .theme--light.v-btn.v-btn--disabled .v-btn__loading, +#photoprism.theme-nordic .theme--light.v-btn.v-btn--disabled .v-icon { + color: #999 !important; +} + +#photoprism.theme-nordic .theme--light.v-list .v-list__tile__mask { + color: #cccccc; + background: transparent; +} + +#photoprism.theme-nordic .cards-view .card.is-selected .card-details { + color: #333333; + background-color: #D8DEE9; +} + +#photoprism.theme-nordic .cards-view .card.is-selected, +#photoprism.theme-nordic .cards-view .card.is-selected .card-background { + background-color: #D8DEE9 !important; +} + +#photoprism.theme-nordic .cards-view .card.is-selected .card-details .v-icon { + color: #333333; +} \ No newline at end of file diff --git a/frontend/src/css/themes/snow.css b/frontend/src/css/themes/snow.css deleted file mode 100644 index 3f8312d5b22..00000000000 --- a/frontend/src/css/themes/snow.css +++ /dev/null @@ -1,144 +0,0 @@ -/* 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: #c5dee5; -} - -#photoprism.theme-snow .theme--light.v-text-field--solo>.v-input__control>.v-input__slot { - background: #eceff4; -} - -#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 .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; -} \ No newline at end of file diff --git a/frontend/src/options/themes.js b/frontend/src/options/themes.js index 64118b1205b..db12cb1714a 100644 --- a/frontend/src/options/themes.js +++ b/frontend/src/options/themes.js @@ -34,66 +34,35 @@ let themes = { "navigation-home": "#000000", }, }, - grayscale: { - name: "grayscale", - dark: true, - sponsor: false, - colors: { - application: "#525252", - form: "#e5e4e2", - card: "#5e5e5e", - primary: "#c8bdb1", - "primary-button": "#726e69", - "secondary-dark": "#c8bdb1", - secondary: "#444", - "secondary-light": "#5E5E5E", - accent: "#333", - error: "#e57373", - info: "#5a94dd", - success: "#26A69A", - warning: "#e3d181", - love: "#ef5350", - remove: "#e35333", - restore: "#64b5f6", - album: "#ffab40", - download: "#07bd9f", - private: "#48bcd6", - edit: "#48bcd6", - share: "#0070a0", - terminal: "#333333", - navigation: "#353839", - "navigation-home": "#212121", - }, - }, - gemstone: { - name: "gemstone", + abyss: { + name: "abyss", dark: true, sponsor: true, colors: { - application: "#2f2f31", - form: "#eeeeee", - card: "#2b2b2d", - primary: "#AFB4D4", - "primary-button": "#545465", - "secondary-dark": "#9BA0C5", - secondary: "#272727", - "secondary-light": "#37373a", - accent: "#333", + application: "#202020", + form: "#AFB42B", + card: "#242424", + primary: "#814fd9", + "primary-button": "#7e57c2", + "secondary-dark": "#814fd9", + secondary: "#111111", + "secondary-light": "#1a1a1a", + accent: "#090c10", error: "#e57373", info: "#00acc1", success: "#26A69A", warning: "#ffd740", - remove: "#e57373", + remove: "#9575cd", restore: "#64b5f6", - album: "#ffab00", - download: "#00bfa5", - private: "#00b8d4", - edit: "#00b8d4", - share: "#9575cd", + album: "#7e57c2", + download: "#673ab7", + private: "#512da8", + edit: "#4527a0", + share: "#311b92", love: "#ef5350", - terminal: "#4A464F", - navigation: "#1C1C21", - "navigation-home": "#131316", + terminal: "#333333", + navigation: "#0d0d0d", + "navigation-home": "#000000", }, }, carbon: { @@ -128,20 +97,20 @@ let themes = { "navigation-home": "#0E0D12", }, }, - lavender: { - name: "lavender", - dark: false, - sponsor: false, + gemstone: { + name: "gemstone", + dark: true, + sponsor: true, colors: { - application: "#fafafa", - form: "#fafafa", - card: "#DFE0E8", - primary: "#9ca2c9", - "primary-button": "#6c6f84", - "secondary-dark": "#475185", - secondary: "#dee0ed", - "secondary-light": "#eef0f6", - accent: "#8c8c8c", + application: "#2f2f31", + form: "#eeeeee", + card: "#2b2b2d", + primary: "#AFB4D4", + "primary-button": "#545465", + "secondary-dark": "#9BA0C5", + secondary: "#272727", + "secondary-light": "#37373a", + accent: "#333", error: "#e57373", info: "#00acc1", success: "#26A69A", @@ -154,56 +123,56 @@ let themes = { edit: "#00b8d4", share: "#9575cd", love: "#ef5350", - terminal: "#333333", - navigation: "#1b1e32", - "navigation-home": "#121421", + terminal: "#4A464F", + navigation: "#1C1C21", + "navigation-home": "#131316", }, }, - abyss: { - name: "abyss", + grayscale: { + name: "grayscale", dark: true, - sponsor: true, + sponsor: false, colors: { - application: "#202020", - form: "#AFB42B", - card: "#242424", - primary: "#814fd9", - "primary-button": "#7e57c2", - "secondary-dark": "#814fd9", - secondary: "#111111", - "secondary-light": "#1a1a1a", - accent: "#090c10", + application: "#525252", + form: "#e5e4e2", + card: "#5e5e5e", + primary: "#c8bdb1", + "primary-button": "#726e69", + "secondary-dark": "#c8bdb1", + secondary: "#444", + "secondary-light": "#5E5E5E", + accent: "#333", error: "#e57373", - info: "#00acc1", + info: "#5a94dd", success: "#26A69A", - warning: "#ffd740", - remove: "#9575cd", - restore: "#64b5f6", - album: "#7e57c2", - download: "#673ab7", - private: "#512da8", - edit: "#4527a0", - share: "#311b92", + warning: "#e3d181", love: "#ef5350", + remove: "#e35333", + restore: "#64b5f6", + album: "#ffab40", + download: "#07bd9f", + private: "#48bcd6", + edit: "#48bcd6", + share: "#0070a0", terminal: "#333333", - navigation: "#0d0d0d", - "navigation-home": "#000000", + navigation: "#353839", + "navigation-home": "#212121", }, }, - vanta: { - name: "vanta", - dark: true, - sponsor: true, + lavender: { + name: "lavender", + dark: false, + sponsor: false, colors: { - application: "#212121", - form: "#AFB42B", - card: "#1d1d1d", - primary: "#04acaf", - "primary-button": "#444444", - "secondary-dark": "#04acaf", - secondary: "#111111", - "secondary-light": "#1a1a1a", - accent: "#090c10", + application: "#fafafa", + form: "#fafafa", + card: "#DFE0E8", + primary: "#9ca2c9", + "primary-button": "#6c6f84", + "secondary-dark": "#475185", + secondary: "#dee0ed", + "secondary-light": "#eef0f6", + accent: "#8c8c8c", error: "#e57373", info: "#00acc1", success: "#26A69A", @@ -217,8 +186,8 @@ let themes = { share: "#9575cd", love: "#ef5350", terminal: "#333333", - navigation: "#0d0d0d", - "navigation-home": "#000000", + navigation: "#1b1e32", + "navigation-home": "#121421", }, }, neon: { @@ -252,42 +221,11 @@ let themes = { "navigation-home": "#000000", }, }, - shadow: { - name: "shadow", - dark: true, - sponsor: true, - colors: { - application: "#444", - form: "#eeeeee", - card: "#666666", - primary: "#c4f1e5", - "primary-button": "#74817d", - "secondary-dark": "#c8e3e7", - secondary: "#585858", - "secondary-light": "#666", - accent: "#333", - error: "#e57373", - info: "#00acc1", - success: "#26A69A", - warning: "#ffd740", - remove: "#e57373", - restore: "#64b5f6", - album: "#ffab00", - download: "#00bfa5", - private: "#00b8d4", - edit: "#00b8d4", - share: "#9575cd", - love: "#ef5350", - terminal: "#333333", - navigation: "#212121", - "navigation-home": "#000000", - }, - }, - snow: { + nordic: { dark: false, sponsor: true, - title: "Snow", - name: "snow", + title: "Nordic", + name: "nordic", colors: { application: "#f7f8fa", form: "#eeeeee", @@ -346,19 +284,50 @@ let themes = { "navigation-home": "#212121", }, }, - yellowstone: { - name: "yellowstone", + raspberry: { + name: "raspberry", + dark: false, + sponsor: false, + colors: { + application: "#FDEDF5", + form: "#fafafa", + card: "#f9d1e1", + primary: "#ffb3cc", + "primary-button": "#d32d86", + "secondary-dark": "#d34892", + secondary: "#f6cadf", + "secondary-light": "#fad0e2", + accent: "#B994A5", + error: "#e57373", + info: "#00acc1", + success: "#26A69A", + warning: "#ffd740", + remove: "#e57373", + restore: "#64b5f6", + album: "#ffab00", + download: "#00bfa5", + private: "#00b8d4", + edit: "#00b8d4", + share: "#9575cd", + love: "#ef5350", + terminal: "#b93b92", + navigation: "#9f2666", + "navigation-home": "#8f0f53", + }, + }, + shadow: { + name: "shadow", dark: true, sponsor: true, colors: { - application: "#32312f", + application: "#444", form: "#eeeeee", - card: "#262524", - primary: "#ffb700", - "primary-button": "#54524e", - "secondary-dark": "#ffb700", - secondary: "#21201f", - "secondary-light": "#262523", + card: "#666666", + primary: "#c4f1e5", + "primary-button": "#74817d", + "secondary-dark": "#c8e3e7", + secondary: "#585858", + "secondary-light": "#666", accent: "#333", error: "#e57373", info: "#00acc1", @@ -372,25 +341,25 @@ let themes = { edit: "#00b8d4", share: "#9575cd", love: "#ef5350", - terminal: "#464544", - navigation: "#191817", - "navigation-home": "#0c0c0b", + terminal: "#333333", + navigation: "#212121", + "navigation-home": "#000000", }, }, - cyano: { - name: "cyano", - dark: false, - sponsor: false, + vanta: { + name: "vanta", + dark: true, + sponsor: true, colors: { - application: "#eceff1", - form: "#eceff1", - card: "#d8dbde", - primary: "#80deea", - "primary-button": "#757575", - "secondary-dark": "#757575", - secondary: "#b0bec5", - "secondary-light": "#d8dbde", - accent: "#757575", + application: "#212121", + form: "#AFB42B", + card: "#1d1d1d", + primary: "#04acaf", + "primary-button": "#444444", + "secondary-dark": "#04acaf", + secondary: "#111111", + "secondary-light": "#1a1a1a", + accent: "#090c10", error: "#e57373", info: "#00acc1", success: "#26A69A", @@ -404,24 +373,24 @@ let themes = { share: "#9575cd", love: "#ef5350", terminal: "#333333", - navigation: "#006064", - "navigation-home": "#37474f", + navigation: "#0d0d0d", + "navigation-home": "#000000", }, }, - raspberry: { - name: "raspberry", - dark: false, - sponsor: false, + yellowstone: { + name: "yellowstone", + dark: true, + sponsor: true, colors: { - application: "#FDEDF5", - form: "#fafafa", - card: "#f9d1e1", - primary: "#ffb3cc", - "primary-button": "#d32d86", - "secondary-dark": "#d34892", - secondary: "#f6cadf", - "secondary-light": "#fad0e2", - accent: "#B994A5", + application: "#32312f", + form: "#eeeeee", + card: "#262524", + primary: "#ffb700", + "primary-button": "#54524e", + "secondary-dark": "#ffb700", + secondary: "#21201f", + "secondary-light": "#262523", + accent: "#333", error: "#e57373", info: "#00acc1", success: "#26A69A", @@ -434,9 +403,9 @@ let themes = { edit: "#00b8d4", share: "#9575cd", love: "#ef5350", - terminal: "#b93b92", - navigation: "#9f2666", - "navigation-home": "#8f0f53", + terminal: "#464544", + navigation: "#191817", + "navigation-home": "#0c0c0b", }, }, }; @@ -450,67 +419,62 @@ let options = [ disabled: false, }, { - text: $gettext("Grayscale"), - value: "grayscale", - disabled: false, - }, - { - text: $gettext("Gemstone"), - value: "gemstone", + text: "Abyss", + value: "abyss", disabled: false, }, { - text: $gettext("Carbon"), + text: "Carbon", value: "carbon", disabled: false, }, { - text: $gettext("Lavender"), - value: "lavender", + text: "Gemstone", + value: "gemstone", disabled: false, }, { - text: $gettext("Abyss"), - value: "abyss", + text: "Grayscale", + value: "grayscale", disabled: false, }, { - text: $gettext("Vanta"), - value: "vanta", + text: "Lavender", + value: "lavender", disabled: false, }, { - text: $gettext("Neon"), + text: "Neon", value: "neon", disabled: false, }, { - text: $gettext("Shadow"), - value: "shadow", + text: "Nordic", + value: "nordic", disabled: false, }, { - text: $gettext("Snow"), - value: "snow", + text: "Onyx", + value: "onyx", disabled: false, }, { - text: $gettext("Onyx"), - value: "onyx", + text: "Raspberry", + value: "raspberry", disabled: false, }, { - text: $gettext("Cyano"), - value: "cyano", + text: "Shadow", + value: "shadow", disabled: false, }, { - text: $gettext("Raspberry"), - value: "raspberry", + text: "Vanta", + value: "vanta", disabled: false, }, { - text: $gettext("Yellowstone"), + text: "Yellowstone", value: "yellowstone", disabled: false, },