diff --git a/CSS/themes/vuetorrent/vuetorrent-base.css b/CSS/themes/vuetorrent/vuetorrent-base.css index 0a553897..b7d54d8d 100644 --- a/CSS/themes/vuetorrent/vuetorrent-base.css +++ b/CSS/themes/vuetorrent/vuetorrent-base.css @@ -28,11 +28,13 @@ body, .background, .theme--light.v-application, -.theme--dark.v-application, .v-application .background{ +.theme--dark.v-application, +.v-application .background { color: var(--text); background: var(--main-bg-color) !important; } -html{ + +html { color: var(--text); background: #1f1f1f !important; } @@ -42,6 +44,7 @@ html{ background: rgba(255, 255, 255, .1); border-radius: 20px } + #app>div>nav>nav>div.v-navigation-drawer__content::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .25); border-radius: 20px @@ -66,68 +69,92 @@ p, .theme--light.v-counter { color: var(--text); } + .v-application .grey--text { color: var(--text-muted) !important; caret-color: var(--text-muted) !important; } -.theme--light.v-tabs>.v-tabs-bar .v-tab--disabled, .theme--light.v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active), .theme--light.v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active)>.v-btn, .theme--light.v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active)>.v-icon, -.theme--dark.v-tabs>.v-tabs-bar .v-tab--disabled, .theme--dark.v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active), .theme--dark.v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active)>.v-btn, .theme--dark.v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active)>.v-icon{ + +.theme--light.v-tabs>.v-tabs-bar .v-tab--disabled, +.theme--light.v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active), +.theme--light.v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active)>.v-btn, +.theme--light.v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active)>.v-icon, +.theme--dark.v-tabs>.v-tabs-bar .v-tab--disabled, +.theme--dark.v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active), +.theme--dark.v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active)>.v-btn, +.theme--dark.v-tabs>.v-tabs-bar .v-tab:not(.v-tab--active)>.v-icon { color: var(--text); } + .theme--dark.v-subheader, -.theme--light.v-subheader{ - color: hsla(0,0%,100%,.7); +.theme--light.v-subheader { + color: hsla(0, 0%, 100%, .7); } -.theme--light.v-input, .theme--light.v-input input, .theme--light.v-input textarea { + +.theme--light.v-input, +.theme--light.v-input input, +.theme--light.v-input textarea { color: var(--text); } + /* TOP NAVBAR */ .theme--light.v-app-bar.v-toolbar.v-sheet, -.theme--dark.v-app-bar.v-toolbar.v-sheet{ +.theme--dark.v-app-bar.v-toolbar.v-sheet { background-color: rgba(0, 0, 0, .25) !important; color: var(--text) !important; } + .v-navigation-drawer__content .theme--dark.v-card, -.v-navigation-drawer__content .theme--light.v-card{ +.v-navigation-drawer__content .theme--light.v-card { background: rgba(0, 0, 0, 0) !important; - + } /* SIDE MENU */ .v-application .primary { - background: rgba(0, 0, 0, .25) !important; - color: var(--text) !important; + background: rgba(0, 0, 0, .25) !important; + color: var(--text) !important; } + .v-application .secondary { - background-color: rgba(255, 255, 255, .15) !important; - border-color: rgba(255, 255, 255, .15) !important; - + background-color: rgba(255, 255, 255, .15) !important; + border-color: rgba(255, 255, 255, .15) !important; + } + .theme--dark.v-navigation-drawer:not(.v-navigation-drawer--floating) .v-navigation-drawer__border, -.theme--light.v-navigation-drawer:not(.v-navigation-drawer--floating) .v-navigation-drawer__border{ - background-color: rgba(0,0,0,.12); +.theme--light.v-navigation-drawer:not(.v-navigation-drawer--floating) .v-navigation-drawer__border { + background-color: rgba(0, 0, 0, .12); } @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { -.v-navigation-drawer--is-mobile:not(.v-navigation-drawer--close), .v-navigation-drawer--temporary:not(.v-navigation-drawer--close), -.v-navigation-drawer--is-mobile:not(.v-navigation-drawer--close), .v-navigation-drawer--temporary:not(.v-navigation-drawer--close) { - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); + + .v-navigation-drawer--is-mobile:not(.v-navigation-drawer--close), + .v-navigation-drawer--temporary:not(.v-navigation-drawer--close), + .v-navigation-drawer--is-mobile:not(.v-navigation-drawer--close), + .v-navigation-drawer--temporary:not(.v-navigation-drawer--close) { + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); } - } - /* slightly transparent fallback for Firefox (not supporting backdrop-filter) */ - @supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { -.v-navigation-drawer--is-mobile:not(.v-navigation-drawer--close), .v-navigation-drawer--temporary:not(.v-navigation-drawer--close), -.v-navigation-drawer--is-mobile:not(.v-navigation-drawer--close), .v-navigation-drawer--temporary:not(.v-navigation-drawer--close) { - background-color: rgba(0, 0, 0, 0.9); +} + +/* slightly transparent fallback for Firefox (not supporting backdrop-filter) */ +@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { + + .v-navigation-drawer--is-mobile:not(.v-navigation-drawer--close), + .v-navigation-drawer--temporary:not(.v-navigation-drawer--close), + .v-navigation-drawer--is-mobile:not(.v-navigation-drawer--close), + .v-navigation-drawer--temporary:not(.v-navigation-drawer--close) { + background-color: rgba(0, 0, 0, 0.9); } - } +} .v-application .download--text { color: rgb(var(--accent-color)) !important; caret-color: rgb(var(--accent-color)) !important; } + .v-navigation-drawer__content .download--text { color: var(--v-download-base) !important; caret-color: var(--v-download-base) !important; @@ -139,7 +166,7 @@ p, .v-dialog .theme--light.v-tabs-items, .v-dialog .theme--dark.v-tabs-items, .v-dialog .theme--light.v-list, -.v-dialog .theme--dark.v-list{ +.v-dialog .theme--dark.v-list { background: var(--modal-bg-color); color: var(--text); } @@ -148,93 +175,111 @@ p, color: var(--button-color) !important; caret-color: var(--button-color) !important; } + .theme--light.v-tabs>.v-tabs-bar, -.theme--dark.v-tabs>.v-tabs-bar{ +.theme--dark.v-tabs>.v-tabs-bar { background-color: rgba(0, 0, 0, .15); } .v-application .white, -.v-tab:before, .v-tabs-slider { +.v-tab:before, +.v-tabs-slider { background-color: rgb(var(--accent-color)) !important; border-color: rbg(var(--accent-color)) !important; } .theme--dark.v-icon.v-icon.v-icon--disabled, -.theme--light.v-icon.v-icon.v-icon--disabled{ - color: rgba(255, 255, 255, .38) !important; +.theme--light.v-icon.v-icon.v-icon--disabled { + color: rgba(255, 255, 255, .38) !important; } .theme--dark.v-text-field--solo>.v-input__control>.v-input__slot, -.theme--light.v-text-field--solo>.v-input__control>.v-input__slot{ +.theme--light.v-text-field--solo>.v-input__control>.v-input__slot { background: #1e1e1e; } -.v-input__icon svg, .v-select__selection { - color: rgb(var(--accent-color))!important; + +.v-input__icon svg, +.v-select__selection { + color: rgb(var(--accent-color)) !important; } + .v-application .accent { background-color: var(--button-color) !important; border-color: var(--button-color) !important; } + .theme--light.v-text-field>.v-input__control>.v-input__slot:before { border-color: rgb(255 255 255 / 42%); } + .theme--light.v-text-field:not(.v-input--has-state):hover>.v-input__control>.v-input__slot:before { border-color: rgba(255, 255, 255, .87); } + /* FORMS */ -.v-input__slot:hover fieldset, .v-text-field--outlined fieldset { - border-color: rgba(255, 255, 255, .1)!important; +.v-input__slot:hover fieldset, +.v-text-field--outlined fieldset { + border-color: rgba(255, 255, 255, .1) !important; } /* DASHBOARD */ .theme--dark.v-card.sideborder.done, -.theme--light.v-card.sideborder.done{ +.theme--light.v-card.sideborder.done { background-color: #16573e40; color: #FFF; } + .theme--dark.v-card.sideborder.downloading, -.theme--light.v-card.sideborder.downloading{ +.theme--light.v-card.sideborder.downloading { background-color: #5bb97440; color: #FFF; } + .theme--dark.v-card.sideborder.fail, -.theme--light.v-card.sideborder.fail{ +.theme--light.v-card.sideborder.fail { background-color: #f83e7040; color: #FFF; } + .theme--dark.v-card.sideborder.paused, .theme--light.v-card.sideborder.paused { background-color: #9ca3af40; color: #FFF; } + .theme--dark.v-card.sideborder.queued, -.theme--light.v-card.sideborder.queued{ +.theme--light.v-card.sideborder.queued { background-color: #2e5eaa40; color: #FFF; } + .theme--dark.v-card.sideborder.seeding, -.theme--light.v-card.sideborder.seeding{ +.theme--light.v-card.sideborder.seeding { background-color: #4ecde640; color: #FFF; } + .theme--dark.v-card.sideborder.checking, -.theme--light.v-card.sideborder.checking{ +.theme--light.v-card.sideborder.checking { background-color: #ff704340; color: #FFF; } + .theme--dark.v-card.sideborder.stalled, -.theme--light.v-card.sideborder.stalled{ +.theme--light.v-card.sideborder.stalled { background-color: #4ade8040; color: #FFF; } + .theme--dark.v-card.sideborder.metadata, -.theme--light.v-card.sideborder.metadata{ +.theme--light.v-card.sideborder.metadata { background-color: #7e57c240; color: #FFF; } + .theme--dark.v-card.sideborder.moving, -.theme--light.v-card.sideborder.moving{ +.theme--light.v-card.sideborder.moving { background-color: #ffaa2c40; color: #FFF; } @@ -242,22 +287,24 @@ p, /* DROPDOWN */ .theme--dark.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled), -.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled){ +.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) { color: var(--text) !important; background: var(--modal-bg-color) !important; } + .theme--dark.v-icon, -.theme--light.v-icon{ +.theme--light.v-icon { color: #fff; } + .theme--light.v-divider, -.theme--dark.v-divider{ +.theme--dark.v-divider { border-color: rgba(255, 255, 255, .65) !important; } /* TABLE */ .theme--dark.v-data-table, -.theme--light.v-data-table{ +.theme--light.v-data-table { background-color: rgba(0, 0, 0, .65); color: var(--text); } \ No newline at end of file