UI: Add Electra theme #2916
Signed-off-by: Michael Mayer <michael@photoprism.app>
This commit is contained in:
parent
441812fd7b
commit
aa7a843b07
|
@ -4,6 +4,7 @@
|
|||
@import url("themes/yellowstone.css");
|
||||
@import url("themes/abyss.css");
|
||||
@import url("themes/gemstone.css");
|
||||
@import url("themes/electra.css");
|
||||
|
||||
/* General Styles */
|
||||
|
||||
|
|
96
frontend/src/css/themes/electra.css
Normal file
96
frontend/src/css/themes/electra.css
Normal file
|
@ -0,0 +1,96 @@
|
|||
/* Electra Theme */
|
||||
|
||||
body.dark-theme.theme-electra {
|
||||
background: #161025 !important;
|
||||
}
|
||||
|
||||
#photoprism.theme-electra .theme--light.v-text-field--solo>.v-input__control>.v-input__slot{
|
||||
background: rgba(250, 250, 255, 0.1);
|
||||
}
|
||||
|
||||
#photoprism.container.theme-electra {
|
||||
background-image: linear-gradient(160deg, #808080 0%, #262626 100%);
|
||||
}
|
||||
|
||||
#photoprism.container.theme-electra div.loading-animation {
|
||||
color: #AFB4D4 !important;
|
||||
caret-color: #AFB4D4 !important;
|
||||
}
|
||||
|
||||
#photoprism.container.theme-electra div.loading-animation .loading-underlay {
|
||||
stroke: rgba(196, 241, 229, 0.3);
|
||||
}
|
||||
|
||||
.theme-electra .v-content__wrap,
|
||||
.theme-electra .p-page,
|
||||
.theme-electra .form,
|
||||
.theme-electra .v-content {
|
||||
background: #161025 !important;
|
||||
}
|
||||
|
||||
#photoprism.theme-electra .theme--light.v-small-dialog__content,
|
||||
#photoprism.theme-electra .theme--light.v-sheet,
|
||||
#photoprism.theme-electra .theme--light.v-card {
|
||||
background: #161025;
|
||||
}
|
||||
|
||||
.theme-electra .application.theme--light {
|
||||
background: #161025;
|
||||
}
|
||||
|
||||
#photoprism.theme-electra .theme--light .v-table {
|
||||
background: #161025;
|
||||
}
|
||||
|
||||
#photoprism. .theme--light.v-table thead th,
|
||||
#photoprism.theme-electra .theme--light.v-table tbody td {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#photoprism.theme-electra .theme--light.v-table tbody tr:hover {
|
||||
background: #23164f;
|
||||
}
|
||||
|
||||
#photoprism.theme-electra .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon {
|
||||
color: #999 !important;
|
||||
}
|
||||
|
||||
#photoprism.theme-electra .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon,
|
||||
#photoprism.theme-electra .theme--light.v-input--is-disabled .v-label,
|
||||
#photoprism.theme-electra .theme--light.v-input--is-disabled input,
|
||||
#photoprism.theme-electra .theme--light.v-input--is-disabled textarea {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
#photoprism.theme-electra .theme--light.v-list {
|
||||
background: #434057;
|
||||
}
|
||||
|
||||
#photoprism.theme-electra a.text-link {
|
||||
color: #D2CEEB !important;
|
||||
}
|
||||
|
||||
#photoprism.theme-electra .footer .body-link {
|
||||
color: #D2CEEB !important;
|
||||
}
|
||||
|
||||
#photoprism.theme-electra .theme--light.v-list .v-list__tile__sub-title,
|
||||
#photoprism.theme-electra .accent--text {
|
||||
color: #D3CBFF !important;
|
||||
}
|
||||
|
||||
#photoprism.theme-electra .theme--light.v-input:not(.v-input--is-disabled) input,
|
||||
#photoprism.theme-electra .theme--light.v-input:not(.v-input--is-disabled) textarea {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#photoprism.theme-electra .theme--light.v-btn.v-btn--disabled,
|
||||
#photoprism.theme-electra .theme--light.v-btn.v-btn--disabled .v-btn__loading,
|
||||
#photoprism.theme-electra .theme--light.v-btn.v-btn--disabled .v-icon {
|
||||
color: #999 !important;
|
||||
}
|
||||
|
||||
#photoprism.theme-electra .theme--light.v-list .v-list__tile__mask {
|
||||
color: #cccccc;
|
||||
background: transparent;
|
||||
}
|
|
@ -340,9 +340,9 @@ let themes = {
|
|||
colors: {
|
||||
application: "#212121",
|
||||
form: "#AFB42B",
|
||||
primary: "#7e57c2",
|
||||
primary: "#814fd9",
|
||||
"primary-button": "#7e57c2",
|
||||
"secondary-dark": "#7e57c2",
|
||||
"secondary-dark": "#814fd9",
|
||||
secondary: "#111111",
|
||||
"secondary-light": "#1a1a1a",
|
||||
accent: "#090c10",
|
||||
|
@ -393,6 +393,37 @@ let themes = {
|
|||
"navigation-home": "#131316",
|
||||
},
|
||||
},
|
||||
electra: {
|
||||
dark: true,
|
||||
sponsor: true,
|
||||
title: "Electra",
|
||||
name: "electra",
|
||||
colors: {
|
||||
application: "#161025",
|
||||
form: "#eeeeee",
|
||||
primary: "#D3CBFF",
|
||||
"primary-button": "#53478a",
|
||||
"secondary-dark": "#9c8aef",
|
||||
secondary: "#0f0723",
|
||||
"secondary-light": "#2f2b44",
|
||||
accent: "#262238",
|
||||
error: "#e57373",
|
||||
info: "#00acc1",
|
||||
success: "#4db6ac",
|
||||
warning: "#ffd740",
|
||||
remove: "#e57373",
|
||||
restore: "#64b5f6",
|
||||
album: "#ffab00",
|
||||
download: "#00bfa5",
|
||||
private: "#00b8d4",
|
||||
edit: "#00b8d4",
|
||||
share: "#9575cd",
|
||||
love: "#ef5350",
|
||||
terminal: "#070121",
|
||||
navigation: "#070121",
|
||||
"navigation-home": "#02000e",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
/* Available Themes */
|
||||
|
@ -418,6 +449,11 @@ let options = [
|
|||
value: "abyss",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: $gettext("Electra"),
|
||||
value: "electra",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: $gettext("Moonlight"),
|
||||
value: "moonlight",
|
||||
|
|
Loading…
Reference in a new issue