Skip to content

Commit 20df14e

Browse files
lastzerolastzero
committed
Frontend: Add "Mint" theme and move default styles to themes/default.css
Signed-off-by: Michael Mayer <michael@photoprism.app>
1 parent b5b13b0 commit 20df14e

File tree

5 files changed

+237
-99
lines changed

5 files changed

+237
-99
lines changed

‎frontend/package-lock.json

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/css/themes.css

+3-77
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import url("themes/default.css");
12
@import url("themes/grayscale.css");
23
@import url("themes/shadow.css");
34
@import url("themes/yellowstone.css");
@@ -6,11 +7,11 @@
67
@import url("themes/neon.css");
78
@import url("themes/gemstone.css");
89
@import url("themes/carbon.css");
10+
@import url("themes/mint.css");
911
@import url("themes/nordic.css");
1012
@import url("themes/lavender.css");
11-
@import url("themes/default.css");
1213

13-
/* General Styles */
14+
/* Input Style Overrides */
1415

1516
:-webkit-autofill,
1617
:-webkit-autofill:hover,
@@ -21,90 +22,15 @@ input:-webkit-autofill:focus {
2122
transition: background-color 9999s !important;
2223
}
2324

24-
body.dark-theme #photoprism .v-tabs .v-badge__badge {
25-
color: #000000;
26-
}
27-
28-
body.dark-theme #photoprism .theme--light.v-table thead th {
29-
color: #ffffff;
30-
}
31-
32-
.card {
33-
background-color: #e0e0e0;
34-
}
35-
36-
body.dark-theme .card {
37-
background-color: #1a1a1a;
38-
}
39-
40-
body.dark-theme #photoprism .v-table .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
41-
background: transparent;
42-
}
43-
44-
body.dark-theme .theme--light.v-list .v-list__tile--highlighted,
45-
body.dark-theme .theme--light.v-list a:hover {
46-
background: rgba(255,255,255,0.3) !important;
47-
}
48-
49-
body.dark-theme .v-input input::placeholder {
50-
color: rgba(255,255,255,0.5) !important;
51-
}
52-
5325
.v-text-field>.v-input__control>.v-input__slot:after,
5426
.v-text-field>.v-input__control>.v-input__slot:before {
5527
display: none !important;
5628
}
5729

58-
/*
59-
body.dark-theme .v-text-field.v-text-field--enclosed .v-text-field__details {
60-
padding-left: 0;
61-
}*/
62-
63-
.theme--light.v-list .v-list__tile--highlighted,
64-
.theme--light.v-list a:hover {
65-
background: rgba(155,155,155,0.3) !important;
66-
}
67-
68-
body.dark-theme #photoprism .map-control .theme--light.v-input:not(.v-input--is-disabled) i,
69-
body.dark-theme #photoprism .map-control .theme--light.v-input:not(.v-input--is-disabled) input {
70-
color: #333333;
71-
}
72-
73-
body:not(.dark-theme) .theme--dark.v-btn.v-btn--disabled:not(.v-btn--icon):not(.v-btn--flat):not(.v-btn--outline) {
74-
color: rgb(51, 51, 51)!important;
75-
background-color: #d9dadc!important;
76-
}
77-
78-
body.dark-theme #photoprism .theme--light.v-chip,
79-
body.dark-theme #photoprism .v-card .theme--light.v-text-field--box>.v-input__control>.v-input__slot {
80-
background: #00000033;
81-
}
82-
83-
body.dark-theme #photoprism,
84-
body.dark-theme #photoprism .p-page a,
85-
body.dark-theme #photoprism .v-datatable a,
86-
body.dark-theme #photoprism .theme--light.v-expansion-panel .v-expansion-panel__container,
87-
body.dark-theme #photoprism .theme--light.v-tabs__bar .v-tabs__div,
88-
body.dark-theme #photoprism .theme--light {
89-
color: #ffffff;
90-
caret-color: #ffffff;
91-
stroke: #ffffff;
92-
}
93-
94-
body.dark-theme #photoprism .theme--light.v-label {
95-
color: #ffffffaa;
96-
}
97-
98-
body.dark-theme #photoprism .theme--light.v-select .v-select__selections {
99-
color: #ffffffee;
100-
}
101-
10230
#photoprism .v-select.v-text-field--box .v-select__selections {
10331
padding-top: 20px;
10432
}
10533

106-
/* Exceptions */
107-
10834
#photoprism .theme--light.v-text-field--solo.background-inherit>.v-input__control>.v-input__slot {
10935
background: inherit;
11036
box-shadow: none;

‎frontend/src/css/themes/default.css

+91-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,76 @@
1-
/* Default Theme */
1+
/* Component Color Defaults */
22

3-
#photoprism.theme-default .theme--light.v-text-field--solo>.v-input__control>.v-input__slot,
4-
#photoprism.theme-default .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
3+
.card {
4+
background-color: #e0e0e0;
5+
}
6+
7+
body.dark-theme .card {
8+
background-color: #1a1a1a;
9+
}
10+
11+
body.dark-theme #photoprism .v-table .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
12+
background: transparent;
13+
}
14+
15+
body.dark-theme .theme--light.v-list .v-list__tile--highlighted,
16+
body.dark-theme .theme--light.v-list a:hover {
17+
background: rgba(255,255,255,0.3) !important;
18+
}
19+
20+
body.dark-theme .v-input input::placeholder {
21+
color: rgba(255,255,255,0.5) !important;
22+
}
23+
24+
body.dark-theme .theme--light .v-table {
25+
background: #303030;
26+
}
27+
28+
body.dark-theme .theme--light.v-table tbody tr:hover {
29+
background: #343434;
30+
}
31+
32+
.theme--light.v-list .v-list__tile--highlighted,
33+
.theme--light.v-list a:hover {
34+
background: rgba(155,155,155,0.3) !important;
35+
}
36+
37+
body:not(.dark-theme) .theme--dark.v-btn.v-btn--disabled:not(.v-btn--icon):not(.v-btn--flat):not(.v-btn--outline) {
38+
color: rgb(51, 51, 51)!important;
39+
background-color: #d9dadc!important;
40+
}
41+
42+
body.dark-theme #photoprism .theme--light.v-chip,
43+
body.dark-theme #photoprism .v-card .theme--light.v-text-field--box>.v-input__control>.v-input__slot {
44+
background: #00000033;
45+
}
46+
47+
body.dark-theme #photoprism,
48+
body.dark-theme #photoprism .p-page a,
49+
body.dark-theme #photoprism .v-datatable a,
50+
body.dark-theme #photoprism .theme--light.v-expansion-panel .v-expansion-panel__container,
51+
body.dark-theme #photoprism .theme--light.v-tabs__bar .v-tabs__div,
52+
body.dark-theme #photoprism .theme--light {
53+
color: #ffffff;
54+
caret-color: #ffffff;
55+
stroke: #ffffff;
56+
}
57+
58+
body.dark-theme #photoprism .theme--light.v-label {
59+
color: #ffffffaa;
60+
}
61+
62+
body.dark-theme #photoprism .theme--light.v-select .v-select__selections {
63+
color: #ffffffee;
64+
}
65+
66+
body.dark-theme .theme--light.v-small-dialog__content,
67+
body.dark-theme .theme--light.v-sheet,
68+
body.dark-theme .theme--light.v-card {
69+
background: #2f3031;
70+
}
71+
72+
body.dark-theme .theme--light.v-text-field--solo>.v-input__control>.v-input__slot,
73+
body.dark-theme .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
574
background: rgba(250, 250, 255, 0.1);
675
}
776

@@ -20,7 +89,10 @@ body.dark-theme #photoprism .p-page a,
2089
body.dark-theme #photoprism .v-datatable a,
2190
body.dark-theme #photoprism .theme--light.v-expansion-panel .v-expansion-panel__container,
2291
body.dark-theme #photoprism .theme--light.v-tabs__bar .v-tabs__div,
23-
body.dark-theme #photoprism .theme--light {
92+
body.dark-theme #photoprism .theme--light,
93+
body.dark-theme #photoprism .theme--light.v-table thead th,
94+
body.dark-theme .theme--light.v-table thead th,
95+
body.dark-theme .theme--light.v-table tbody td {
2496
color: #ffffff;
2597
}
2698

@@ -36,6 +108,12 @@ body.dark-theme #photoprism .theme--light.v-select .v-select__selections {
36108
padding-top: 20px;
37109
}
38110

111+
body.dark-theme #photoprism .v-tabs .v-badge__badge {
112+
color: #000000;
113+
}
114+
115+
/* Default Theme */
116+
39117
body.dark-theme.theme-default,
40118
.theme-default .v-content__wrap,
41119
.theme-default .p-page,
@@ -51,10 +129,6 @@ body.dark-theme.theme-default,
51129
background: #2f3031;
52130
}
53131

54-
#photoprism.theme-default .theme--light .v-table {
55-
background: #37393a;
56-
}
57-
58132
#photoprism.container.theme-default {
59133
background-image: linear-gradient(160deg, #808080 0%, #262626 100%);
60134
}
@@ -68,6 +142,10 @@ body.dark-theme.theme-default,
68142
stroke: rgba(196, 241, 229, 0.3);
69143
}
70144

145+
#photoprism.theme-default .theme--light .v-table {
146+
background: #37393a;
147+
}
148+
71149
#photoprism.theme-default .theme--light.v-table thead th,
72150
#photoprism.theme-default .theme--light.v-table tbody td {
73151
color: #fff;
@@ -81,6 +159,11 @@ body.dark-theme.theme-default,
81159
color: #999 !important;
82160
}
83161

162+
#photoprism.theme-default .theme--light.v-text-field--solo>.v-input__control>.v-input__slot,
163+
#photoprism.theme-default .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
164+
background: rgba(250, 250, 255, 0.1);
165+
}
166+
84167
#photoprism.theme-default .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon,
85168
#photoprism.theme-default .theme--light.v-input--is-disabled .v-label,
86169
#photoprism.theme-default .theme--light.v-input--is-disabled input,

‎frontend/src/css/themes/mint.css

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
/* Mint Theme */
2+
3+
body.dark-theme.theme-mint,
4+
.theme-mint .v-content__wrap,
5+
.theme-mint .p-page,
6+
.theme-mint .form,
7+
.theme-mint .v-content {
8+
background: #121212 !important;
9+
}
10+
11+
#photoprism.theme-mint .theme--light.v-small-dialog__content,
12+
#photoprism.theme-mint .theme--light.v-sheet,
13+
#photoprism.theme-mint .theme--light.v-card,
14+
.theme-mint .application.theme--light {
15+
background: #1e1e1e;
16+
}
17+
18+
#photoprism.container.theme-mint {
19+
background-image: linear-gradient(160deg, #808080 0%, #262626 100%);
20+
}
21+
22+
#photoprism.theme-mint .theme--light .v-table {
23+
background: #1a1a1a;
24+
}
25+
26+
#photoprism.theme-mint .theme--light.v-table thead th,
27+
#photoprism.theme-mint .theme--light.v-table tbody td {
28+
color: #fff;
29+
}
30+
31+
#photoprism.theme-mint .theme--light.v-table tbody tr:hover {
32+
background: #2b2b2b;
33+
}
34+
35+
#photoprism.theme-mint .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon {
36+
color: #999 !important;
37+
}
38+
39+
#photoprism.theme-mint .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon,
40+
#photoprism.theme-mint .theme--light.v-input--is-disabled .v-label,
41+
#photoprism.theme-mint .theme--light.v-input--is-disabled input,
42+
#photoprism.theme-mint .theme--light.v-input--is-disabled textarea {
43+
color: #ccc;
44+
}
45+
46+
#photoprism.theme-mint .theme--light.v-list {
47+
background: #232425;
48+
}
49+
50+
#photoprism.theme-mint a.text-link {
51+
color: #f6f7e8 !important;
52+
}
53+
54+
#photoprism.theme-mint .footer .body-link {
55+
color: #f6f7e8 !important;
56+
}
57+
58+
#photoprism.theme-mint .theme--light.v-list .v-list__tile__sub-title,
59+
#photoprism.theme-mint .accent--text {
60+
color: #2bb14c !important;
61+
}
62+
63+
#photoprism.theme-mint .theme--light.v-input:not(.v-input--is-disabled) input,
64+
#photoprism.theme-mint .theme--light.v-input:not(.v-input--is-disabled) textarea {
65+
color: #fff;
66+
}
67+
68+
#photoprism.theme-mint .theme--light.v-btn.v-btn--disabled,
69+
#photoprism.theme-mint .theme--light.v-btn.v-btn--disabled .v-btn__loading,
70+
#photoprism.theme-mint .theme--light.v-btn.v-btn--disabled .v-icon {
71+
color: #999 !important;
72+
}
73+
74+
#photoprism.theme-mint .theme--light.v-list .v-list__tile__mask {
75+
color: #cccccc;
76+
background: transparent;
77+
}
78+
79+
#photoprism.theme-mint .cards-view .card.is-selected .card-details {
80+
color: #fff;
81+
background-color: #333333;
82+
}
83+
84+
#photoprism.theme-mint .cards-view .card.is-selected,
85+
#photoprism.theme-mint .cards-view .card.is-selected .card-background {
86+
background-color: #333333 !important;
87+
}
88+
89+
#photoprism.theme-mint .cards-view .card.is-selected .card-details .v-icon {
90+
color: #fff;
91+
}
92+

0 commit comments

Comments
 (0)