mirror of
https://github.com/gilbN/theme.park.git
synced 2024-11-20 10:02:32 +01:00
732 lines
19 KiB
CSS
732 lines
19 KiB
CSS
|
/* dP dP dP */
|
||
|
|
/* 88 88 88 */
|
||
|
|
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
|
||
|
|
/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */
|
||
|
|
/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */
|
||
|
|
/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */
|
||
|
|
/* 88 */
|
||
|
|
/* dP */
|
||
|
|
|
||
|
|
/* Made by @gilbN */
|
||
|
|
/* https://github.com/gilbN/theme.park */
|
||
|
|
|
||
|
|
/* MOBILE */
|
||
|
|
|
||
|
|
@media (max-width: 720px) {
|
||
|
|
|
||
|
|
.modal__body,
|
||
|
|
.modal__content__wrapper,
|
||
|
|
.modal__header,
|
||
|
|
body,
|
||
|
|
.dark .torrents,
|
||
|
|
.torrents,
|
||
|
|
.action-bar {
|
||
|
|
background: #1b1b1b !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
body,
|
||
|
|
.dark .torrents,
|
||
|
|
.torrents {
|
||
|
|
color: var(--text);
|
||
|
|
background: var(--main-bg-color);
|
||
|
|
background-repeat: repeat, no-repeat;
|
||
|
|
background-attachment: fixed, fixed;
|
||
|
|
background-position: center center, center center;
|
||
|
|
background-size: auto, cover;
|
||
|
|
-webkit-background-size: auto, cover;
|
||
|
|
-moz-background-size: auto, cover;
|
||
|
|
-o-background-size: auto, cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* TEXT */
|
||
|
|
.h1,
|
||
|
|
.h2,
|
||
|
|
.h3,
|
||
|
|
.h4,
|
||
|
|
.h5,
|
||
|
|
.h6,
|
||
|
|
h1,
|
||
|
|
h2,
|
||
|
|
h3,
|
||
|
|
h4,
|
||
|
|
h5,
|
||
|
|
h6,
|
||
|
|
p,
|
||
|
|
.inverse .h1,
|
||
|
|
.inverse .h2,
|
||
|
|
.inverse .h3,
|
||
|
|
.inverse .h4,
|
||
|
|
.inverse .h5,
|
||
|
|
.inverse .h6,
|
||
|
|
.inverse h1,
|
||
|
|
.inverse h2,
|
||
|
|
.inverse h3,
|
||
|
|
.inverse h4,
|
||
|
|
.inverse h5,
|
||
|
|
.inverse h6 .dark .torrents__alert,
|
||
|
|
.torrents__alert {
|
||
|
|
color: var(--text-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* AUTH PAGE */
|
||
|
|
|
||
|
|
.application__view--auth-form {
|
||
|
|
background: var(--main-bg-color);
|
||
|
|
background-repeat: repeat, no-repeat;
|
||
|
|
background-attachment: fixed, fixed;
|
||
|
|
background-position: center center, center center;
|
||
|
|
background-size: auto, cover;
|
||
|
|
-webkit-background-size: auto, cover;
|
||
|
|
-moz-background-size: auto, cover;
|
||
|
|
-o-background-size: auto, cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.panel--light {
|
||
|
|
background: rgba(0, 0, 0, .25);
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel {
|
||
|
|
border: 1px solid transparent;
|
||
|
|
border-radius: 4px;
|
||
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 1px 3px 1px rgba(0, 0, 0, .2);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* FORMS */
|
||
|
|
|
||
|
|
.input,
|
||
|
|
.inverse .input {
|
||
|
|
background: rgba(255, 255, 255, .05);
|
||
|
|
color: #fff;
|
||
|
|
border: 1px solid #0000;
|
||
|
|
box-shadow: 0 1px 1px rgba(210, 216, 222, 0), 0 1px 3px 1px rgba(210, 216, 222, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.input:hover,
|
||
|
|
.inverse .input:hover {
|
||
|
|
border: 1px solid rgba(255, 255, 255, .1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.input:active,
|
||
|
|
.input:focus,
|
||
|
|
.inverse .input:active,
|
||
|
|
.inverse .input:focus,
|
||
|
|
.inverse .button--quaternary:active {
|
||
|
|
background-color: rgba(52, 156, 244, .05);
|
||
|
|
color: var(--text);
|
||
|
|
border-color: rgb(var(--accent-color));
|
||
|
|
box-shadow: 0 1px 1px rgb(var(--accent-color) / 15%), 0 1px 3px 1px rgb(var(--accent-color) / 20%), 0 0 0 1px rgb(var(--accent-color));
|
||
|
|
}
|
||
|
|
|
||
|
|
.button--quaternary,
|
||
|
|
.inverse .button--quaternary {
|
||
|
|
background: rgba(255, 255, 255, .05);
|
||
|
|
border-color: transparent;
|
||
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0), 0 1px 3px 1px rgba(0, 0, 0, 0);
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button--quaternary:focus-visible,
|
||
|
|
.button--quaternary:hover,
|
||
|
|
.inverse .button--quaternary:focus,
|
||
|
|
.inverse .button--quaternary:hover {
|
||
|
|
border: 1px solid rgba(255, 255, 255, .1);
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button--quaternary:active,
|
||
|
|
.button--quaternary:focus,
|
||
|
|
.inverse .button--quaternary:active,
|
||
|
|
.inverse .button--quaternary:focus {
|
||
|
|
border-color: rgb(var(--accent-color));
|
||
|
|
box-shadow: 0 1px 1px rgb(var(--accent-color) / 15%), 0 1px 3px 1px rgb(var(--accent-color) / 20%), 0 0 0 1px rgb(var(--accent-color));
|
||
|
|
color: var(--text-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
.context-menu__items .select__item:focus-visible,
|
||
|
|
.context-menu__items .select__item:hover {
|
||
|
|
background: rgba(255, 255, 255, .15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.inverse .form__element__addon {
|
||
|
|
border-color: rgb(255 255 255 / 10%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.form__element__addon--is-interactive:focus .icon,
|
||
|
|
.form__element__addon--is-interactive:hover .icon {
|
||
|
|
fill: rgb(var(--accent-color));
|
||
|
|
transition: all .125s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form__element:active~.form__element__addon .icon,
|
||
|
|
.form__element:focus~.form__element__addon .icon {
|
||
|
|
fill: rgb(var(--accent-color));
|
||
|
|
}
|
||
|
|
|
||
|
|
.form__element__addon .icon {
|
||
|
|
fill: var(--text-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
.select__item--is-selected .icon {
|
||
|
|
fill: rgb(var(--accent-color));
|
||
|
|
}
|
||
|
|
|
||
|
|
.sortable-list__item {
|
||
|
|
background: rgb(255 255 255 / 10%);
|
||
|
|
border: 1px solid rgb(255 255 255 / 10%);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.css-1759iaw {
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.css-q5wzhq:hover {
|
||
|
|
color: var(--text-hover);
|
||
|
|
background: rgba(255, 255, 255, .1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.css-m5tpeq:hover {
|
||
|
|
color: var(--text-hover);
|
||
|
|
background: rgba(94, 114, 140, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Cancel button */
|
||
|
|
.button--tertiary {
|
||
|
|
background: rgb(255 255 255 / 20%);
|
||
|
|
border-color: #768a9b;
|
||
|
|
box-shadow: 0 1px 1px rgb(136 153 168 / 0%), 0 1px 3px 1px rgb(0 0 0 / 0%);
|
||
|
|
text-shadow: 0 1px 0 #00000000, 0 1px 2px rgb(0 0 0 / 0%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.inverse .button--tertiary {
|
||
|
|
border-color: rgb(255 255 255 / 0%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.inverse .button--tertiary:focus,
|
||
|
|
.inverse .button--tertiary:hover {
|
||
|
|
background: rgba(255, 255, 255, .35);
|
||
|
|
border-color: #0000;
|
||
|
|
box-shadow: 0 1px 1px rgb(136 153 168 / 0%), 0 1px 3px 1px rgb(0 0 0 / 0%);
|
||
|
|
text-shadow: 0 1px 0 #00000000, 0 1px 2px rgb(0 0 0 / 0%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.inverse .button--tertiary:active {
|
||
|
|
background: rgba(255, 255, 255, .35);
|
||
|
|
border-color: #0000;
|
||
|
|
box-shadow: 0 1px 1px rgb(136 153 168 / 0%), 0 1px 3px 1px rgb(0 0 0 / 0%);
|
||
|
|
text-shadow: 0 1px 0 #00000000, 0 1px 2px rgb(0 0 0 / 0%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.inverse .button--tertiary:focus,
|
||
|
|
.inverse .button--tertiary:hover {
|
||
|
|
background: rgba(255, 255, 255, .35);
|
||
|
|
border-color: #0000;
|
||
|
|
box-shadow: 0 1px 1px rgb(136 153 168 / 0%), 0 1px 3px 1px rgb(0 0 0 / 0%);
|
||
|
|
text-shadow: 0 1px 0 #00000000, 0 1px 2px rgb(0 0 0 / 0%);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* DROPDOWN MENUS*/
|
||
|
|
|
||
|
|
.context-menu__items,
|
||
|
|
.menu {
|
||
|
|
background: var(--modal-bg-color);
|
||
|
|
background-repeat: repeat, no-repeat;
|
||
|
|
background-attachment: fixed, fixed;
|
||
|
|
background-position: center center, center center;
|
||
|
|
background-size: auto, cover;
|
||
|
|
-webkit-background-size: auto, cover;
|
||
|
|
-moz-background-size: auto, cover;
|
||
|
|
-o-background-size: auto, cover;
|
||
|
|
border-radius: 4px;
|
||
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, .05), 0 1px 3px 1px rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .1);
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.select__item--is-selected,
|
||
|
|
.menu__item.is-selectable.is-selected,
|
||
|
|
.dark .sidebar__icon-button:focus-visible,
|
||
|
|
.dark .sidebar__icon-button:hover,
|
||
|
|
.sidebar__icon-button:focus-visible,
|
||
|
|
.sidebar__icon-button:hover,
|
||
|
|
.dark .sidebar__icon-button:focus-visible .icon,
|
||
|
|
.dark .sidebar__icon-button:hover .icon,
|
||
|
|
.sidebar__icon-button:focus-visible .icon,
|
||
|
|
.sidebar__icon-button:hover .icon {
|
||
|
|
color: rgb(var(--accent-color));
|
||
|
|
fill: rgb(var(--accent-color));
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu__item.is-selectable:focus-within,
|
||
|
|
.menu__item.is-selectable:hover {
|
||
|
|
background: rgba(255, 255, 255, .1);
|
||
|
|
color: var(--text-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* BUTTONS */
|
||
|
|
.button--primary,
|
||
|
|
.inverse .button--primary {
|
||
|
|
background: var(--button-color);
|
||
|
|
border-color: var(--button-color);
|
||
|
|
box-shadow: none;
|
||
|
|
text-shadow: none;
|
||
|
|
color: var(--button-text)
|
||
|
|
}
|
||
|
|
|
||
|
|
.inverse .button--primary:focus,
|
||
|
|
.inverse .button--primary:hover {
|
||
|
|
background: var(--button-color-hover);
|
||
|
|
border-color: var(--button-color-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
.button--primary:active {
|
||
|
|
background: var(--button-color-hover);
|
||
|
|
border-color: var(--button-color-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
::placeholder {
|
||
|
|
color: var(--text) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
:-ms-input-placeholder {
|
||
|
|
color: var(--text) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
::-webkit-input-placeholder {
|
||
|
|
color: var(--text) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.error {
|
||
|
|
background: #f34570;
|
||
|
|
border-radius: 3px;
|
||
|
|
color: #fff;
|
||
|
|
padding: 8px 12px;
|
||
|
|
transition: opacity .25s;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* TORRENT PAGE */
|
||
|
|
|
||
|
|
.dark .torrent--is-condensed.torrent--is-selected,
|
||
|
|
.dark .torrent--is-condensed.torrent--is-selected+.torrent,
|
||
|
|
.torrent--is-condensed.torrent--is-selected,
|
||
|
|
.torrent--is-condensed.torrent--is-selected+.torrent {
|
||
|
|
border-color: rgba(var(--accent-color), .7);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .torrent--is-selected:after,
|
||
|
|
.dark .torrent--is-selected:hover:after,
|
||
|
|
.torrent--is-selected:after,
|
||
|
|
.torrent--is-selected:hover:after {
|
||
|
|
background: rgba(var(--accent-color), .7);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .table__row--heading,
|
||
|
|
.table__row--heading {
|
||
|
|
background: rgba(255, 255, 255, .15);
|
||
|
|
box-shadow: 0 1px 0 hsl(0deg 0% 100% / 12%);
|
||
|
|
color: var(--text-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .torrent__detail--name,
|
||
|
|
.torrent__detail--name {
|
||
|
|
color: var(--text-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .torrent--is-condensed,
|
||
|
|
.torrent--is-condensed {
|
||
|
|
border-top: 1px solid hsla(0, 0%, 100%, .12);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .torrent__detail,
|
||
|
|
.torrent__detail {
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.torrent--is-downloading--actively .torrent__detail--downRate {
|
||
|
|
color: #39ce83;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .torrent--is-condensed.torrent--is-selected .torrent__detail,
|
||
|
|
.torrent--is-condensed.torrent--is-selected .torrent__detail,
|
||
|
|
.dark .torrent--is-condensed.torrent--is-selected.torrent--is-stopped .torrent__detail,
|
||
|
|
.torrent--is-condensed.torrent--is-selected.torrent--is-stopped .torrent__detail {
|
||
|
|
color: var(--label-text-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.table__heading:focus-visible,
|
||
|
|
.table__heading:hover,
|
||
|
|
.dark .table__heading:focus-visible,
|
||
|
|
.dark .table__heading:hover {
|
||
|
|
color: var(--text-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .table__heading--is-sorted,
|
||
|
|
.table__heading--is-sorted {
|
||
|
|
color: var(--text-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .table__heading,
|
||
|
|
.table__heading {
|
||
|
|
border-right: 1px solid hsla(0, 0%, 100%, .12);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .table__heading__handle:after,
|
||
|
|
.table__heading__handle:after {
|
||
|
|
background: hsla(0, 0%, 100%, .6);
|
||
|
|
}
|
||
|
|
|
||
|
|
.torrent--is-condensed:nth-child(0n+1),
|
||
|
|
.dark .torrent--is-condensed,
|
||
|
|
.torrent--is-condensed {
|
||
|
|
border-top: 1px solid hsla(0, 0%, 100%, .12);
|
||
|
|
}
|
||
|
|
|
||
|
|
.torrent-details__sub-heading__secondary,
|
||
|
|
.dark .torrent-details__sub-heading__secondary {
|
||
|
|
color: var(--text);
|
||
|
|
display: flex;
|
||
|
|
font-size: .85rem;
|
||
|
|
flex: 1 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.torrent-details__sub-heading__tertiary .icon,
|
||
|
|
.dark .torrent-details__sub-heading__tertiary .icon {
|
||
|
|
fill: rgba(var(--accent-color), .5);
|
||
|
|
height: 12px;
|
||
|
|
margin-right: 3px;
|
||
|
|
margin-top: -3px;
|
||
|
|
vertical-align: middle;
|
||
|
|
width: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.torrent-details__table,
|
||
|
|
.dark .torrent-details__table,
|
||
|
|
.torrent-details__table__heading--tertiary,
|
||
|
|
.dark .torrent-details__table__heading--tertiary,
|
||
|
|
.torrent-details__detail__label,
|
||
|
|
.dark .torrent-details__detail__label {
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.torrent-details__section--file-tree .directory-tree__node {
|
||
|
|
color: var(--text) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.torrent-details__section--file-tree .directory-tree__parent-directory,
|
||
|
|
.dark .torrent-details__section--file-tree .directory-tree__parent-directory {
|
||
|
|
color: var(--text-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .torrent-details__table__heading--primary,
|
||
|
|
.torrent-details__table__heading--primary,
|
||
|
|
.dark .torrent-details__table__heading--secondary .torrent-details__table__heading--secondary,
|
||
|
|
.dark .torrent-details__table__heading--tertiary,
|
||
|
|
.torrent-details__table__heading--tertiary {
|
||
|
|
color: var(--text-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
.torrent-details__section .badge {
|
||
|
|
background: var(--button-color);
|
||
|
|
color: var(--button-text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.torrent-details__action.is-active {
|
||
|
|
color: rgb(var(--accent-color));
|
||
|
|
}
|
||
|
|
|
||
|
|
.priority-meter--max-3.priority-meter--level-1:after {
|
||
|
|
background: rgb(var(--accent-color));
|
||
|
|
}
|
||
|
|
|
||
|
|
/* TOB NAVBAR */
|
||
|
|
.action-bar {
|
||
|
|
background: var(--main-bg-color);
|
||
|
|
background-repeat: repeat, no-repeat;
|
||
|
|
background-attachment: fixed, fixed;
|
||
|
|
background-position: center center, center center;
|
||
|
|
background-size: auto, cover;
|
||
|
|
-webkit-background-size: auto, cover;
|
||
|
|
-moz-background-size: auto, cover;
|
||
|
|
-o-background-size: auto, cover;
|
||
|
|
border-bottom: 1px solid rgba(255, 255, 255, .1);
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .action .icon,
|
||
|
|
.action .icon {
|
||
|
|
fill: var(--text-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .action:focus-visible,
|
||
|
|
.dark .action:hover,
|
||
|
|
.action:focus-visible,
|
||
|
|
.action:hover {
|
||
|
|
background: rgba(255, 255, 255, .1);
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.action:focus-visible .icon,
|
||
|
|
.action:hover .icon,
|
||
|
|
.dark .action:focus-visible .icon,
|
||
|
|
.dark .action:hover .icon {
|
||
|
|
fill: rgb(var(--accent-color));
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropdown__value,
|
||
|
|
.dropdown.is-expanded .dropdown__header .dropdown__value {
|
||
|
|
color: rgb(var(--accent-color));
|
||
|
|
}
|
||
|
|
|
||
|
|
/* SIDE MENU */
|
||
|
|
.dark .application__sidebar,
|
||
|
|
.application__sidebar {
|
||
|
|
background: rgba(0, 0, 0, .25);
|
||
|
|
box-shadow: 1px 0 hsl(0deg 0% 100% / 12%);
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar-filter__item--heading,
|
||
|
|
.sidebar-filter__item--heading:focus-visible,
|
||
|
|
.sidebar-filter__item--heading:hover {
|
||
|
|
color: var(--text-hover) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .sidebar-filter__item,
|
||
|
|
.sidebar-filter__item {
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .sidebar-filter__item.is-active,
|
||
|
|
.sidebar-filter__item.is-active {
|
||
|
|
color: rgb(var(--accent-color));
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .sidebar-filter__item.is-active .icon,
|
||
|
|
.sidebar-filter__item.is-active .icon {
|
||
|
|
fill: rgb(var(--accent-color));
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .sidebar-filter__item.is-active .badge,
|
||
|
|
.sidebar-filter__item.is-active .badge {
|
||
|
|
background: rgb(var(--accent-color));
|
||
|
|
color: var(--label-text-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .sidebar-filter__item .icon,
|
||
|
|
.sidebar-filter__item .icon {
|
||
|
|
fill: rgb(var(--accent-color), .3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar-filter .badge,
|
||
|
|
.dark .sidebar-filter .badge {
|
||
|
|
background: rgb(var(--accent-color), .3);
|
||
|
|
color: var(--label-text-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .sidebar-filter__item:focus-visible .icon,
|
||
|
|
.dark .sidebar-filter__item:hover .icon,
|
||
|
|
.sidebar-filter__item:focus-visible .icon,
|
||
|
|
.sidebar-filter__item:hover .icon {
|
||
|
|
fill: rgb(var(--accent-color));
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .sidebar-filter__item:focus-visible,
|
||
|
|
.dark .sidebar-filter__item:hover,
|
||
|
|
.sidebar-filter__item:focus-visible,
|
||
|
|
.sidebar-filter__item:hover {
|
||
|
|
color: var(--text-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search.is-in-use .textbox {
|
||
|
|
background: rgba(var(--accent-color), .25);
|
||
|
|
border-bottom: 1px solid rgba(var(--accent-color), .3);
|
||
|
|
border-top: 1px solid rgba(var(--accent-color), .3);
|
||
|
|
color: #eee;
|
||
|
|
padding-right: 45px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search.is-in-use .icon {
|
||
|
|
fill: rgb(var(--accent-color));
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search .textbox {
|
||
|
|
border: 1px solid rgba(var(--accent-color), .2);
|
||
|
|
background: rgba(var(--accent-color), .1);
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.search .icon {
|
||
|
|
fill: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .sidebar__diskusage .progress-bar__fill,
|
||
|
|
.sidebar__diskusage .progress-bar__fill {
|
||
|
|
background: hsla(0, 0%, 100%, .38);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .sidebar__diskusage .progress-bar__fill__wrapper,
|
||
|
|
.sidebar__diskusage .progress-bar__fill__wrapper {
|
||
|
|
background: hsla(0, 0%, 100%, .12);
|
||
|
|
}
|
||
|
|
|
||
|
|
.torrent--is-selected.torrent--is-stopped .progress-bar__icon .icon {
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.torrent--is-selected.torrent--is-stopped .progress-bar__fill {
|
||
|
|
background: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dark .sidebar__icon-button,
|
||
|
|
.sidebar__icon-button {
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar__icon-button .icon,
|
||
|
|
.dark .sidebar__icon-button .icon {
|
||
|
|
fill: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.diskusage__details-list__label {
|
||
|
|
color: rgb(var(--accent-color));
|
||
|
|
}
|
||
|
|
|
||
|
|
.tooltip__content {
|
||
|
|
background: #1b1b1b;
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* MODAL */
|
||
|
|
.modal__body,
|
||
|
|
.modal__content__wrapper,
|
||
|
|
.modal__header {
|
||
|
|
background: var(--modal-bg-color);
|
||
|
|
background-repeat: repeat, no-repeat;
|
||
|
|
background-attachment: fixed, fixed;
|
||
|
|
background-position: center center, center center;
|
||
|
|
background-size: auto, cover;
|
||
|
|
-webkit-background-size: auto, cover;
|
||
|
|
-moz-background-size: auto, cover;
|
||
|
|
-o-background-size: auto, cover;
|
||
|
|
color: var(--text)
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal--size-large {
|
||
|
|
width: 776px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal--vertical.modal--tabs-in-header .modal__header {
|
||
|
|
box-shadow: inset -1px 0 0 rgba(255, 255, 255, .1);
|
||
|
|
background: var(--modal-bg-color);
|
||
|
|
background-repeat: repeat, no-repeat;
|
||
|
|
background-attachment: fixed, fixed;
|
||
|
|
background-position: center center, center center;
|
||
|
|
background-size: auto, cover;
|
||
|
|
-webkit-background-size: auto, cover;
|
||
|
|
-moz-background-size: auto, cover;
|
||
|
|
-o-background-size: auto, cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal--vertical.modal--tabs-in-header .modal__header,
|
||
|
|
.modal--vertical.modal--tabs-in-body .modal__tabs {
|
||
|
|
/* Modal side menu*/
|
||
|
|
background: rgb(0 0 0 / 45%) !important;
|
||
|
|
color: var(--text-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal__tabs .modal__tab.is-active:after {
|
||
|
|
background: rgb(var(--accent-color));
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal--vertical .modal__tabs .modal__tab:after {
|
||
|
|
width: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal__header {
|
||
|
|
color: var(--text-hover);
|
||
|
|
box-shadow: inset 0 -1px 0 rgb(255 255 255 / 10%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal__tabs .modal__tab.is-active {
|
||
|
|
color: var(--text-hover);
|
||
|
|
background: rgb(255 255 255 / 15%);
|
||
|
|
border-radius: 3px 3px 0px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal__tabs {
|
||
|
|
color: var(--text);
|
||
|
|
font-size: .85rem;
|
||
|
|
font-weight: 500;
|
||
|
|
margin: 5px -5px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-input__indicator__icon .icon {
|
||
|
|
fill: var(--button-text);
|
||
|
|
transition: all .25s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.inverse .toggle-input__indicator {
|
||
|
|
background: var(--button-color);
|
||
|
|
border: 1px solid var(--button-color);
|
||
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 1px 3px 1px rgba(0, 0, 0, .2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.inverse .toggle-input:hover .toggle-input__indicator {
|
||
|
|
border-color: var(--button-color-hover);
|
||
|
|
background: var(--button-color-hover)
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-input:active,
|
||
|
|
.toggle-input:focus {
|
||
|
|
color: var(--accent-color-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-input:active .toggle-input__indicator .icon,
|
||
|
|
.toggle-input:active .toggle-input__indicator__icon .icon,
|
||
|
|
.toggle-input:focus .toggle-input__indicator .icon,
|
||
|
|
.toggle-input:focus .toggle-input__indicator__icon .icon {
|
||
|
|
fill: var(--accent-color-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
.inverse .toggle-input:active .toggle-input__indicator,
|
||
|
|
.inverse .toggle-input:focus .toggle-input__indicator,
|
||
|
|
.toggle-input:active .toggle-input__indicator,
|
||
|
|
.toggle-input:focus .toggle-input__indicator {
|
||
|
|
border-color: var(--accent-color-hover);
|
||
|
|
box-shadow: 0 1px 1px rgb(var(--accent-color) / 15%), 0 1px 3px 1px rgb(var(--accent-color) / 20%), 0 0 0 1px var(--accent-color-hover);
|
||
|
|
;
|
||
|
|
}
|
||
|
|
|
||
|
|
.interactive-list {
|
||
|
|
background: rgb(255 255 255 / 10%);
|
||
|
|
border: 1px solid rgb(255 255 255 / 10%);
|
||
|
|
box-shadow: 0 1px 1px rgb(0 0 0 / 15%), 0 1px 3px 1px rgb(0 0 0 / 20%);
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropzone__icon .icon--files {
|
||
|
|
fill: rgba(var(--accent-color), .5);
|
||
|
|
height: 64px;
|
||
|
|
transition: fill .25s;
|
||
|
|
width: 64px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropzone__browse-button {
|
||
|
|
color: rgb(var(--accent-color));
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropzone:hover {
|
||
|
|
border-color: rgb(0 0 0 / 25%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dropzone:hover .dropzone__icon .icon {
|
||
|
|
fill: var(--accent-color-hover);
|
||
|
|
}
|