UX: Improve theme styles and colors

Signed-off-by: Michael Mayer <michael@photoprism.app>

frontend/src/css/layout.css

@@ -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,

frontend/src/css/results.css

@@ -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 {
+#photoprism .cards-view .card.is-selected,
-    color: #fff;
+#photoprism .cards-view .card.is-selected .card-background {
+    background-color: #424142 !important;
 }
 
-#photoprism .cards-view .v-card.is-selected,
+#photoprism .cards-view .card.is-selected .card-details .v-icon {
-#photoprism .cards-view .v-card.is-selected .card-background {
+    color: #fff;
-    background-color: #333 !important;
 }
 
 #photoprism .search-results.list-view .input-select,

frontend/src/css/themes.css

@@ -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;
-}

frontend/src/css/themes/carbon.css

@@ -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;
+}

frontend/src/css/themes/gemstone.css

@@ -108,7 +108,16 @@ body.dark-theme.theme-gemstone,
     background: transparent;
 }
 
-#photoprism.theme-gemstone .cards-view .result {
+#photoprism.theme-gemstone .cards-view .card.is-selected .card-details {
-    border-top-left-radius: 6px;
+    color: #fff;
-    border-top-right-radius: 6px;
+    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;
 }

frontend/src/css/themes/lavender.css

@@ -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;
+}

frontend/src/css/themes/raspberry.css

@@ -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;
+}

frontend/src/css/themes/snow.css

@@ -129,7 +129,16 @@ body.theme-snow,
     background: transparent;
 }
 
-#photoprism.theme-snow .cards-view .result {
+#photoprism.theme-snow .cards-view .card.is-selected .card-details {
-    border-top-left-radius: 6px;
+    color: #333333;
-    border-top-right-radius: 6px;
+    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;
 }

frontend/src/options/themes.js

@@ -135,7 +135,7 @@ let themes = {
     colors: {
       application: "#fafafa",
       form: "#fafafa",
-      card: "#eef0f6",
+      card: "#DFE0E8",
       primary: "#9ca2c9",
       "primary-button": "#6c6f84",
       "secondary-dark": "#475185",