Frontend: Refactor styles and add Chrome theme
Signed-off-by: Michael Mayer <michael@photoprism.app>
This commit is contained in:
Michael Mayer
parent
71c30e4218
commit
77b5996640
19 changed files with 384 additions and 212 deletions
74
frontend/package-lock.json
generated
74
frontend/package-lock.json
generated
|
|
@ -2584,9 +2584,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
|
||||
"version": "3.4.2",
|
||||
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz",
|
||||
"integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==",
|
||||
"version": "3.4.3",
|
||||
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
|
||||
"integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
|
||||
"engines": {
|
||||
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
|
||||
},
|
||||
|
|
@ -2603,9 +2603,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@eslint/eslintrc": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.1.tgz",
|
||||
"integrity": "sha512-9t7ZA7NGGK8ckelF0PQCfcxIUzs1Md5rrO6U/c+FIQNanea5UZC0wqKXH4vHBccmu4ZJgZ2idtPeW7+Q2npOEA==",
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz",
|
||||
"integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==",
|
||||
"dependencies": {
|
||||
"ajv": "^6.12.4",
|
||||
"debug": "^4.3.2",
|
||||
|
|
@ -2666,9 +2666,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@eslint/js": {
|
||||
"version": "8.46.0",
|
||||
"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.46.0.tgz",
|
||||
"integrity": "sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==",
|
||||
"version": "8.47.0",
|
||||
"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.47.0.tgz",
|
||||
"integrity": "sha512-P6omY1zv5MItm93kLM8s2vr1HICJH8v0dvddDhysbIuZ+vcjOHg5Zbkf1mTkcmi2JA9oBG2anOkRnW8WJTS8Og==",
|
||||
"engines": {
|
||||
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
|
||||
}
|
||||
|
|
@ -3120,9 +3120,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "20.4.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.9.tgz",
|
||||
"integrity": "sha512-8e2HYcg7ohnTUbHk8focoklEQYvemQmu9M/f43DZVx43kHn0tE3BY/6gSDxS7k0SprtS0NHvj+L80cGLnoOUcQ=="
|
||||
"version": "20.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.0.tgz",
|
||||
"integrity": "sha512-Mgq7eCtoTjT89FqNoTzzXg2XvCi5VMhRV6+I2aYanc6kQCBImeNaAYRs/DyoVqk1YEUJK5gN9VO7HRIdz4Wo3Q=="
|
||||
},
|
||||
"node_modules/@types/pbf": {
|
||||
"version": "3.0.2",
|
||||
|
|
@ -3911,9 +3911,9 @@
|
|||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||
},
|
||||
"node_modules/autoprefixer": {
|
||||
"version": "10.4.14",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
|
||||
"integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
|
||||
"version": "10.4.15",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz",
|
||||
"integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
|
|
@ -3922,11 +3922,15 @@
|
|||
{
|
||||
"type": "tidelift",
|
||||
"url": "https://tidelift.com/funding/github/npm/autoprefixer"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"browserslist": "^4.21.5",
|
||||
"caniuse-lite": "^1.0.30001464",
|
||||
"browserslist": "^4.21.10",
|
||||
"caniuse-lite": "^1.0.30001520",
|
||||
"fraction.js": "^4.2.0",
|
||||
"normalize-range": "^0.1.2",
|
||||
"picocolors": "^1.0.0",
|
||||
|
|
@ -4400,9 +4404,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001519",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz",
|
||||
"integrity": "sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==",
|
||||
"version": "1.0.30001520",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz",
|
||||
"integrity": "sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
|
|
@ -5834,14 +5838,14 @@
|
|||
}
|
||||
},
|
||||
"node_modules/eslint": {
|
||||
"version": "8.46.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.46.0.tgz",
|
||||
"integrity": "sha512-cIO74PvbW0qU8e0mIvk5IV3ToWdCq5FYG6gWPHHkx6gNdjlbAYvtfHmlCMXxjcoVaIdwy/IAt3+mDkZkfvb2Dg==",
|
||||
"version": "8.47.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.47.0.tgz",
|
||||
"integrity": "sha512-spUQWrdPt+pRVP1TTJLmfRNJJHHZryFmptzcafwSvHsceV81djHOdnEeDmkdotZyLNjDhrOasNK8nikkoG1O8Q==",
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.2.0",
|
||||
"@eslint-community/regexpp": "^4.6.1",
|
||||
"@eslint/eslintrc": "^2.1.1",
|
||||
"@eslint/js": "^8.46.0",
|
||||
"@eslint/eslintrc": "^2.1.2",
|
||||
"@eslint/js": "^8.47.0",
|
||||
"@humanwhocodes/config-array": "^0.11.10",
|
||||
"@humanwhocodes/module-importer": "^1.0.1",
|
||||
"@nodelib/fs.walk": "^1.2.8",
|
||||
|
|
@ -5852,7 +5856,7 @@
|
|||
"doctrine": "^3.0.0",
|
||||
"escape-string-regexp": "^4.0.0",
|
||||
"eslint-scope": "^7.2.2",
|
||||
"eslint-visitor-keys": "^3.4.2",
|
||||
"eslint-visitor-keys": "^3.4.3",
|
||||
"espree": "^9.6.1",
|
||||
"esquery": "^1.4.2",
|
||||
"esutils": "^2.0.2",
|
||||
|
|
@ -6579,9 +6583,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/eslint/node_modules/eslint-visitor-keys": {
|
||||
"version": "3.4.2",
|
||||
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz",
|
||||
"integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==",
|
||||
"version": "3.4.3",
|
||||
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
|
||||
"integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
|
||||
"engines": {
|
||||
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
|
||||
},
|
||||
|
|
@ -6759,9 +6763,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/espree/node_modules/eslint-visitor-keys": {
|
||||
"version": "3.4.2",
|
||||
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz",
|
||||
"integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==",
|
||||
"version": "3.4.3",
|
||||
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
|
||||
"integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
|
||||
"engines": {
|
||||
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
|
||||
},
|
||||
|
|
@ -13918,9 +13922,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/vue-eslint-parser/node_modules/eslint-visitor-keys": {
|
||||
"version": "3.4.2",
|
||||
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.2.tgz",
|
||||
"integrity": "sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==",
|
||||
"version": "3.4.3",
|
||||
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
|
||||
"integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
|
||||
"engines": {
|
||||
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
</v-list>
|
||||
</v-toolbar>
|
||||
|
||||
<v-list class="pt-3 p-flex-menu">
|
||||
<v-list class="pt-3 p-flex-menu navigation-menu">
|
||||
<v-list-tile v-if="isMini && !isRestricted" class="nav-expand" @click.stop="toggleIsMini()">
|
||||
<v-list-tile-action :title="$gettext('Expand')">
|
||||
<v-icon v-if="!rtl">chevron_right</v-icon>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* Event Logs */
|
||||
|
||||
#photoprism .p-logs {
|
||||
color: white;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
/* Maps & Places */
|
||||
|
||||
#photoprism .map-control {
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
/* App Navigation */
|
||||
|
||||
#p-navigation {
|
||||
z-index: 10;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
@import url("themes/default.css");
|
||||
@import url("themes/grayscale.css");
|
||||
@import url("themes/shadow.css");
|
||||
@import url("themes/yellowstone.css");
|
||||
@import url("themes/abyss.css");
|
||||
@import url("themes/vanta.css");
|
||||
@import url("themes/neon.css");
|
||||
@import url("themes/gemstone.css");
|
||||
@import url("themes/carbon.css");
|
||||
@import url("themes/mint.css");
|
||||
@import url("themes/nordic.css");
|
||||
@import url("themes/chrome.css");
|
||||
@import url("themes/gemstone.css");
|
||||
@import url("themes/grayscale.css");
|
||||
@import url("themes/lavender.css");
|
||||
@import url("themes/mint.css");
|
||||
@import url("themes/neon.css");
|
||||
@import url("themes/nordic.css");
|
||||
@import url("themes/shadow.css");
|
||||
@import url("themes/vanta.css");
|
||||
@import url("themes/yellowstone.css");
|
||||
|
||||
/* Input Style Overrides */
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/* Carbon Theme */
|
||||
/* Carbon Dark Theme */
|
||||
|
||||
body.dark-theme.theme-carbon,
|
||||
.theme-carbon .v-content__wrap,
|
||||
|
|
|
|||
133
frontend/src/css/themes/chrome.css
Normal file
133
frontend/src/css/themes/chrome.css
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
/* Chrome Dark Theme */
|
||||
|
||||
body.dark-theme.theme-chrome,
|
||||
.theme-chrome .v-content__wrap,
|
||||
.theme-chrome .p-page,
|
||||
.theme-chrome .form,
|
||||
.theme-chrome .v-content {
|
||||
background: #1d1d1d !important;
|
||||
}
|
||||
|
||||
#photoprism.theme-chrome .theme--light.v-small-dialog__content,
|
||||
#photoprism.theme-chrome .theme--light.v-sheet,
|
||||
#photoprism.theme-chrome .theme--light.v-card,
|
||||
.theme-chrome .application.theme--light {
|
||||
background: #202020;
|
||||
}
|
||||
|
||||
#photoprism.container.theme-chrome {
|
||||
background-image: linear-gradient(160deg, #808080 0%, #262626 100%);
|
||||
}
|
||||
|
||||
#photoprism.theme-chrome .theme--light .v-table {
|
||||
background: #262626;
|
||||
}
|
||||
|
||||
body.dark-theme #photoprism.theme-chrome,
|
||||
body.dark-theme #photoprism.theme-chrome .v-datatable a,
|
||||
body.dark-theme #photoprism.theme-chrome .theme--light.v-expansion-panel .v-expansion-panel__container,
|
||||
body.dark-theme #photoprism.theme-chrome .theme--light.v-tabs__bar .v-tabs__div {
|
||||
color: #ffffff;
|
||||
caret-color: #ffffff;
|
||||
stroke: #ffffff;
|
||||
}
|
||||
|
||||
body.dark-theme #photoprism.theme-chrome .p-page a,
|
||||
body.dark-theme #photoprism.theme-chrome .theme--light,
|
||||
body.dark-theme #photoprism.theme-chrome #p-navigation .navigation-menu.theme--dark.v-list,
|
||||
body.dark-theme #photoprism.theme-chrome #p-navigation .navigation-menu .theme--dark.v-icon {
|
||||
color: #d8d8d8;
|
||||
caret-color: #d8d8d8;
|
||||
stroke: #d8d8d8;
|
||||
}
|
||||
|
||||
body.dark-theme #photoprism.theme-chrome .v-input--selection-controls__input .theme--light {
|
||||
color: #8e8e8e;
|
||||
caret-color: #8e8e8e;
|
||||
stroke: #8e8e8e;
|
||||
}
|
||||
|
||||
body.dark-theme #photoprism.theme-chrome #p-navigation .navigation-menu .theme--dark.v-icon {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#photoprism.theme-chrome .theme--light.v-table thead th,
|
||||
#photoprism.theme-chrome .theme--light.v-table tbody td {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#photoprism.theme-chrome .theme--light.v-table tbody tr:hover {
|
||||
background: #2b2b2b;
|
||||
}
|
||||
|
||||
#photoprism.theme-chrome .theme--light.v-text-field--solo>.v-input__control>.v-input__slot,
|
||||
#photoprism.theme-chrome .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#photoprism.theme-chrome .secondary--text {
|
||||
color: rgba(255, 255, 255, 0.2)!important;
|
||||
}
|
||||
|
||||
body.dark-theme #photoprism.theme-chrome .v-card .theme--light.v-text-field--box>.v-input__control>.v-input__slot {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
#photoprism.theme-chrome .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon {
|
||||
color: #999 !important;
|
||||
}
|
||||
|
||||
#photoprism.theme-chrome .theme--light.v-input--selection-controls.v-input--is-disabled .v-icon,
|
||||
#photoprism.theme-chrome .theme--light.v-input--is-disabled .v-label,
|
||||
#photoprism.theme-chrome .theme--light.v-input--is-disabled input,
|
||||
#photoprism.theme-chrome .theme--light.v-input--is-disabled textarea {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
#photoprism.theme-chrome .theme--light.v-list {
|
||||
background: #232425;
|
||||
}
|
||||
|
||||
#photoprism.theme-chrome a.text-link {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
#photoprism.theme-chrome .footer .body-link {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
#photoprism.theme-chrome .theme--light.v-list .v-list__tile__sub-title,
|
||||
#photoprism.theme-chrome .accent--text {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
#photoprism.theme-chrome .theme--light.v-input:not(.v-input--is-disabled) input,
|
||||
#photoprism.theme-chrome .theme--light.v-input:not(.v-input--is-disabled) textarea {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#photoprism.theme-chrome .theme--light.v-btn.v-btn--disabled,
|
||||
#photoprism.theme-chrome .theme--light.v-btn.v-btn--disabled .v-btn__loading,
|
||||
#photoprism.theme-chrome .theme--light.v-btn.v-btn--disabled .v-icon {
|
||||
color: #999 !important;
|
||||
}
|
||||
|
||||
#photoprism.theme-chrome .theme--light.v-list .v-list__tile__mask {
|
||||
color: #cccccc;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#photoprism.theme-chrome .cards-view .card.is-selected .card-details {
|
||||
color: #fff;
|
||||
background-color: #424242;
|
||||
}
|
||||
|
||||
#photoprism.theme-chrome .cards-view .card.is-selected,
|
||||
#photoprism.theme-chrome .cards-view .card.is-selected .card-background {
|
||||
background-color: #424242 !important;
|
||||
}
|
||||
|
||||
#photoprism.theme-chrome .cards-view .card.is-selected .card-details .v-icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
/* Gemstone Theme */
|
||||
/* Gemstone Dark Theme */
|
||||
|
||||
body.dark-theme.theme-gemstone,
|
||||
.theme-gemstone .v-content__wrap,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/* Grayscale Theme */
|
||||
/* Grayscale Dark Theme */
|
||||
|
||||
body.dark-theme.theme-grayscale {
|
||||
background: #525252 !important;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/* Mint Theme */
|
||||
/* Mint Dark Theme */
|
||||
|
||||
body.dark-theme.theme-mint,
|
||||
.theme-mint .v-content__wrap,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/* Neon Theme */
|
||||
/* Neon Dark Theme */
|
||||
|
||||
.theme-neon .v-snack.v-snack--active.v-snack--bottom,
|
||||
.theme-neon .v-speed-dial .v-btn--floating.v-btn--small {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/* Shadow Theme */
|
||||
/* Shadow Dark Theme */
|
||||
|
||||
body.dark-theme.theme-shadow {
|
||||
background: #444 !important;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/* Vanta Theme */
|
||||
/* Vanta Dark Theme */
|
||||
|
||||
body.dark-theme.theme-vanta {
|
||||
background: #212121 !important;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/* Yellowstone Theme */
|
||||
/* Yellowstone Dark Theme */
|
||||
|
||||
body.dark-theme.theme-yellowstone,
|
||||
.theme-yellowstone .v-content__wrap,
|
||||
|
|
|
|||
|
|
@ -39,6 +39,10 @@ button.v-btn.compact {
|
|||
height: 34px;
|
||||
}
|
||||
|
||||
.caption.filename {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Line Height */
|
||||
|
||||
.lh-15 {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<v-expansion-panel-content v-if="!file.Missing" :key="file.UID" class="pa-0 elevation-0 secondary-light"
|
||||
style="margin-top: 1px;">
|
||||
<template #header>
|
||||
<div class="caption">{{ file.baseName(70) }}</div>
|
||||
<div class="caption filename">{{ file.baseName(70) }}</div>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-text class="white pa-0">
|
||||
|
|
|
|||
|
|
@ -35,6 +35,132 @@ let themes = {
|
|||
"navigation-home": "#0e0f10",
|
||||
},
|
||||
},
|
||||
abyss: {
|
||||
name: "abyss",
|
||||
dark: true,
|
||||
sponsor: true,
|
||||
colors: {
|
||||
application: "#202020",
|
||||
form: "#202020",
|
||||
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: "#9575cd",
|
||||
restore: "#64b5f6",
|
||||
album: "#7e57c2",
|
||||
download: "#673ab7",
|
||||
private: "#512da8",
|
||||
edit: "#4527a0",
|
||||
share: "#311b92",
|
||||
love: "#ef5350",
|
||||
terminal: "#333333",
|
||||
navigation: "#0d0d0d",
|
||||
"navigation-home": "#000000",
|
||||
},
|
||||
},
|
||||
carbon: {
|
||||
dark: true,
|
||||
sponsor: true,
|
||||
title: "Carbon",
|
||||
name: "carbon",
|
||||
colors: {
|
||||
application: "#16141c",
|
||||
form: "#16141c",
|
||||
card: "#292732",
|
||||
primary: "#8a6eff",
|
||||
"primary-button": "#53478a",
|
||||
"secondary-dark": "#7f63fd",
|
||||
secondary: "#0E0D12",
|
||||
"secondary-light": "#292733",
|
||||
accent: "#262238",
|
||||
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: "#292733",
|
||||
navigation: "#0E0D12",
|
||||
"navigation-home": "#0E0D12",
|
||||
},
|
||||
},
|
||||
chrome: {
|
||||
dark: true,
|
||||
sponsor: false,
|
||||
title: "Chrome",
|
||||
name: "chrome",
|
||||
colors: {
|
||||
application: "#1d1d1d",
|
||||
form: "#1d1d1d",
|
||||
card: "#1f1f1f",
|
||||
primary: "#ffffff",
|
||||
"primary-button": "#393939",
|
||||
"secondary-dark": "#ffffff",
|
||||
secondary: "#1f1f1f",
|
||||
"secondary-light": "#292929",
|
||||
accent: "#727272",
|
||||
error: "#d36161",
|
||||
info: "#0696a7",
|
||||
success: "#3da097",
|
||||
warning: "#e5c036",
|
||||
remove: "#d35442",
|
||||
restore: "#3bbeaf",
|
||||
album: "#e39c0b",
|
||||
download: "#06a590",
|
||||
private: "#0bb1ca",
|
||||
edit: "#279765",
|
||||
share: "#9575cd",
|
||||
love: "#ef5350",
|
||||
terminal: "#2f3131",
|
||||
navigation: "#1e2122",
|
||||
"navigation-home": "#1e2122",
|
||||
},
|
||||
},
|
||||
gemstone: {
|
||||
name: "gemstone",
|
||||
dark: true,
|
||||
sponsor: true,
|
||||
colors: {
|
||||
application: "#2f2f31",
|
||||
form: "#2f2f31",
|
||||
card: "#2b2b2d",
|
||||
primary: "#AFB4D4",
|
||||
"primary-button": "#545465",
|
||||
"secondary-dark": "#9BA0C5",
|
||||
secondary: "#272727",
|
||||
"secondary-light": "#37373a",
|
||||
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: "#4A464F",
|
||||
navigation: "#1C1C21",
|
||||
"navigation-home": "#131316",
|
||||
},
|
||||
},
|
||||
grayscale: {
|
||||
name: "grayscale",
|
||||
dark: true,
|
||||
|
|
@ -160,6 +286,37 @@ let themes = {
|
|||
"navigation-home": "#181818",
|
||||
},
|
||||
},
|
||||
neon: {
|
||||
name: "neon",
|
||||
dark: true,
|
||||
sponsor: true,
|
||||
colors: {
|
||||
application: "#242326",
|
||||
form: "#242326",
|
||||
card: "#1b1a1c",
|
||||
primary: "#f44abf",
|
||||
"primary-button": "#890664",
|
||||
"secondary-dark": "#cc0d99",
|
||||
secondary: "#111111",
|
||||
"secondary-light": "#1a1a1a",
|
||||
accent: "#090c10",
|
||||
error: "#e57373",
|
||||
info: "#00acc1",
|
||||
success: "#26A69A",
|
||||
warning: "#fece3e",
|
||||
love: "#fb4483",
|
||||
remove: "#9100a0",
|
||||
restore: "#5e33f8",
|
||||
album: "#6234b5",
|
||||
download: "#8d56eb",
|
||||
private: "#4749c8",
|
||||
edit: "#5658eb",
|
||||
share: "#5692eb",
|
||||
terminal: "#333333",
|
||||
navigation: "#0e0d0f",
|
||||
"navigation-home": "#000000",
|
||||
},
|
||||
},
|
||||
nordic: {
|
||||
dark: false,
|
||||
sponsor: false,
|
||||
|
|
@ -223,131 +380,6 @@ let themes = {
|
|||
"navigation-home": "#212121",
|
||||
},
|
||||
},
|
||||
abyss: {
|
||||
name: "abyss",
|
||||
dark: true,
|
||||
sponsor: true,
|
||||
colors: {
|
||||
application: "#202020",
|
||||
form: "#202020",
|
||||
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: "#9575cd",
|
||||
restore: "#64b5f6",
|
||||
album: "#7e57c2",
|
||||
download: "#673ab7",
|
||||
private: "#512da8",
|
||||
edit: "#4527a0",
|
||||
share: "#311b92",
|
||||
love: "#ef5350",
|
||||
terminal: "#333333",
|
||||
navigation: "#0d0d0d",
|
||||
"navigation-home": "#000000",
|
||||
},
|
||||
},
|
||||
carbon: {
|
||||
dark: true,
|
||||
sponsor: true,
|
||||
title: "Carbon",
|
||||
name: "carbon",
|
||||
colors: {
|
||||
application: "#16141c",
|
||||
form: "#16141c",
|
||||
card: "#292732",
|
||||
primary: "#8a6eff",
|
||||
"primary-button": "#53478a",
|
||||
"secondary-dark": "#7f63fd",
|
||||
secondary: "#0E0D12",
|
||||
"secondary-light": "#292733",
|
||||
accent: "#262238",
|
||||
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: "#292733",
|
||||
navigation: "#0E0D12",
|
||||
"navigation-home": "#0E0D12",
|
||||
},
|
||||
},
|
||||
gemstone: {
|
||||
name: "gemstone",
|
||||
dark: true,
|
||||
sponsor: true,
|
||||
colors: {
|
||||
application: "#2f2f31",
|
||||
form: "#2f2f31",
|
||||
card: "#2b2b2d",
|
||||
primary: "#AFB4D4",
|
||||
"primary-button": "#545465",
|
||||
"secondary-dark": "#9BA0C5",
|
||||
secondary: "#272727",
|
||||
"secondary-light": "#37373a",
|
||||
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: "#4A464F",
|
||||
navigation: "#1C1C21",
|
||||
"navigation-home": "#131316",
|
||||
},
|
||||
},
|
||||
neon: {
|
||||
name: "neon",
|
||||
dark: true,
|
||||
sponsor: true,
|
||||
colors: {
|
||||
application: "#242326",
|
||||
form: "#242326",
|
||||
card: "#1b1a1c",
|
||||
primary: "#f44abf",
|
||||
"primary-button": "#890664",
|
||||
"secondary-dark": "#cc0d99",
|
||||
secondary: "#111111",
|
||||
"secondary-light": "#1a1a1a",
|
||||
accent: "#090c10",
|
||||
error: "#e57373",
|
||||
info: "#00acc1",
|
||||
success: "#26A69A",
|
||||
warning: "#fece3e",
|
||||
love: "#fb4483",
|
||||
remove: "#9100a0",
|
||||
restore: "#5e33f8",
|
||||
album: "#6234b5",
|
||||
download: "#8d56eb",
|
||||
private: "#4749c8",
|
||||
edit: "#5658eb",
|
||||
share: "#5692eb",
|
||||
terminal: "#333333",
|
||||
navigation: "#0e0d0f",
|
||||
"navigation-home": "#000000",
|
||||
},
|
||||
},
|
||||
shadow: {
|
||||
name: "shadow",
|
||||
dark: true,
|
||||
|
|
@ -451,6 +483,26 @@ let options = [
|
|||
value: "default",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "Abyss",
|
||||
value: "abyss",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "Carbon",
|
||||
value: "carbon",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "Chrome",
|
||||
value: "chrome",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "Gemstone",
|
||||
value: "gemstone",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "Grayscale",
|
||||
value: "grayscale",
|
||||
|
|
@ -471,6 +523,11 @@ let options = [
|
|||
value: "mint",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "Neon",
|
||||
value: "neon",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "Nordic",
|
||||
value: "nordic",
|
||||
|
|
@ -481,26 +538,6 @@ let options = [
|
|||
value: "onyx",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "Abyss",
|
||||
value: "abyss",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "Carbon",
|
||||
value: "carbon",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "Gemstone",
|
||||
value: "gemstone",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "Neon",
|
||||
value: "neon",
|
||||
disabled: false,
|
||||
},
|
||||
{
|
||||
text: "Shadow",
|
||||
value: "shadow",
|
||||
|
|
|
|||
|
|
@ -464,20 +464,8 @@ export default {
|
|||
return false;
|
||||
}
|
||||
|
||||
this.$sponsorFeatures().then(() => {
|
||||
this.currentTheme = value;
|
||||
this.onChange();
|
||||
}).catch(() => {
|
||||
if (themes.Get(value).sponsor) {
|
||||
this.dialog.sponsor = true;
|
||||
this.$nextTick(() => {
|
||||
this.settings.ui.theme = this.currentTheme;
|
||||
});
|
||||
} else {
|
||||
this.currentTheme = value;
|
||||
this.onChange();
|
||||
}
|
||||
});
|
||||
this.currentTheme = value;
|
||||
this.onChange();
|
||||
},
|
||||
onChangeMapsStyle(value) {
|
||||
if (!value) {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue