1 changed files with 432 additions and 0 deletions
@ -0,0 +1,432 @@ |
|||
@import url("/css/defaults/placeholders.css"); |
|||
@import url("/css/defaults/transparent.css"); |
|||
|
|||
body,#root { |
|||
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; |
|||
color: var(--text); |
|||
} |
|||
|
|||
/* TEXT */ |
|||
|
|||
[class$="-label"]:not([class$="-Button-label"]) { |
|||
color: var(--text-hover) !important; |
|||
} |
|||
|
|||
.mantine-Text-root[class*="bazarr-"]:not(.mantine-Badge-light span div):not(.mantine-Progress-bar div):not(a) { |
|||
color: var(--text); |
|||
} |
|||
|
|||
a, |
|||
.mantine-Text-root.mantine-Anchor-root[class*="bazarr-"] { |
|||
color: var(--link-color); |
|||
} |
|||
|
|||
a:hover, |
|||
.mantine-Text-root.mantine-Anchor-root[class*="bazarr-"]:hover { |
|||
color: var(--link-color-hover); |
|||
} |
|||
|
|||
h1, |
|||
h1 div, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6 { |
|||
color: var(--text-hover) !important; |
|||
} |
|||
|
|||
/* HEADER */ |
|||
|
|||
.mantine-Header-root[class*="bazarr-"] { |
|||
background: var(--main-bg-color); |
|||
border-bottom: 1px solid var(--transparency-light-15); |
|||
} |
|||
|
|||
/* SUBHEADER */ |
|||
|
|||
/* .mantine-Container-root[class*="bazarr-"] .mantine-Group-root[class*="bazarr-"]:not(td>*):not(.mantine-Card-root div), */ |
|||
#root > div > div > main > div > div.mantine-Group-root[class*="bazarr-"], |
|||
#root > div > div > main > div > div > div.mantine-Group-root[class*="bazarr-"], |
|||
#root > div > div > main > form > div.mantine-Group-root[class*="bazarr-"] { |
|||
background: var(--transparency-dark-25); |
|||
} |
|||
.mantine-Button-icon.mantine-Button-leftIcon[class*="bazarr-"] { |
|||
color: var(--text) |
|||
} |
|||
|
|||
|
|||
/* SIDEMENU */ |
|||
|
|||
.mantine-Navbar-root.mantine-Navbar-hidden[class*="bazarr-"] { |
|||
background: var(--transparency-dark-25); |
|||
border-right: 1px solid var(--transparency-light-15); |
|||
} |
|||
.mantine-Divider-root .mantine-Divider-horizontal[class*="bazarr-"] { |
|||
border-top-color: var(--transparency-light-10); |
|||
} |
|||
.mantine-Navbar-root.mantine-Navbar-hidden[class*="bazarr-"] .mantine-Stack-root[class*="bazarr-"] a[aria-current="page"] { |
|||
background: var(--transparency-dark-15) !important; |
|||
border-left: 2px solid rgb(var(--accent-color)); |
|||
} |
|||
|
|||
.mantine-Navbar-root.mantine-Navbar-hidden[class*="bazarr-"] .mantine-Stack-root[class*="bazarr-"] a{ |
|||
border-left: 2px solid var(--transparency-light-10); |
|||
} |
|||
.mantine-Navbar-root.mantine-Navbar-hidden[class*="bazarr-"] .mantine-Stack-root a [class*="bazarr-"]:hover:not(.mantine-Badge-light):not(.mantine-Badge-inner), |
|||
.mantine-Navbar-root.mantine-Navbar-hidden[class*="bazarr-"] .mantine-Stack-root [class*="bazarr-"]:hover:not(.mantine-Badge-light):not(.mantine-Badge-inner) { |
|||
color: rgb(var(--accent-color)); |
|||
background: transparent; |
|||
} |
|||
|
|||
.mantine-Navbar-root[class*="bazarr-"] { |
|||
background: var(--main-bg-color); |
|||
} |
|||
|
|||
|
|||
/* TABLE */ |
|||
[class*="bazarr-"] tbody tr { |
|||
color: var(--text); |
|||
} |
|||
[class*="bazarr-"] tbody tr td { |
|||
border-bottom: 1px solid var(--transparency-light-10) !important; |
|||
} |
|||
[class*="bazarr-"] thead tr th { |
|||
border-bottom: 1px solid var(--transparency-light-20) !important; |
|||
} |
|||
[class*="bazarr-"].__mantine-ref-striped tbody tr:nth-of-type(2n+1) { |
|||
background: var(--transparency-dark-15) !important; |
|||
} |
|||
.mantine-Table-root .__mantine-ref-striped .mantine-Table-striped[class*="bazarr-"] { |
|||
color: var(--text) |
|||
} |
|||
[class*="bazarr-"] thead tr th, [class*="bazarr-"] tfoot tr th { |
|||
color: var(--text-hover) !important; |
|||
} |
|||
.mantine-Skeleton-root.mantine-Skeleton-visible[class*="bazarr-"]::after { |
|||
background: var(--transparency-light-10); |
|||
} |
|||
.mantine-Skeleton-root.mantine-Skeleton-visible[class*="bazarr-"]::before { |
|||
background: var(--transparency-dark-25); |
|||
} |
|||
|
|||
/* BUTTONS */ |
|||
|
|||
.mantine-Button-filled.mantine-Button-root.mantine-Group-child[class*="bazarr-"] { |
|||
color: var(--button-text); |
|||
background: var(--button-color); |
|||
} |
|||
.mantine-Button-filled.mantine-Button-root.mantine-Group-child[class*="bazarr-"]:hover { |
|||
color: var(--button-text-hover); |
|||
background: var(--button-color-hover); |
|||
} |
|||
|
|||
.mantine-Button-subtle.mantine-Button-root.mantine-Group-child[class*="bazarr-"]:hover { |
|||
background: var(--transparency-dark-15); |
|||
} |
|||
|
|||
.mantine-Button-subtle.mantine-Button-root.mantine-Group-child[class*="bazarr-"]:not(.__mantine-ref-loading):disabled { |
|||
background: transparent; |
|||
opacity: .5; |
|||
} |
|||
|
|||
.mantine-ActionIcon-hover.mantine-ActionIcon-root[class*="bazarr-"]:hover { |
|||
background: var(--transparency-dark-15); |
|||
} |
|||
|
|||
.mantine-Button-filled.mantine-Button-root[class*="bazarr-"] { |
|||
color: var(--button-text); |
|||
background: var(--button-color); |
|||
} |
|||
.mantine-Button-filled.mantine-Button-root[class*="bazarr-"]:hover { |
|||
color: var(--button-text-hover); |
|||
background: var(--button-color-hover); |
|||
} |
|||
|
|||
[class*="bazarr-"].mantine-Switch-input:checked { |
|||
background-color: rgb(var(--accent-color)); |
|||
border-color: rgb(var(--accent-color)); |
|||
} |
|||
|
|||
[class*="bazarr-"].mantine-Switch-input:checked::before { |
|||
border-color: var(--label-text-color); |
|||
background: var(--label-text-color); |
|||
} |
|||
|
|||
[class*="bazarr-"].mantine-Switch-input:checked::after { |
|||
color: var(--label-text-color); |
|||
} |
|||
|
|||
[class*="bazarr-"].mantine-Switch-label { |
|||
color: var(--text-hover); |
|||
} |
|||
|
|||
[class*="bazarr-"].mantine-Switch-input { |
|||
background: var(--transparency-dark-15); |
|||
border: 1px solid var(--transparency-light-10); |
|||
} |
|||
|
|||
.mantine-UnstyledButton-root.__mantine-ref-control.mantine-Accordion-control[class*="bazarr-"]:hover { |
|||
background: var(--transparency-dark-15); |
|||
} |
|||
.mantine-Accordion-item[class*="bazarr-"] { |
|||
border-bottom: var(--transparency-light-10) 1px solid; |
|||
} |
|||
.__mantine-ref-icon.mantine-Accordion-icon[class*="bazarr-"] { |
|||
color: rgb(var(--accent-color)) |
|||
} |
|||
|
|||
.mantine-ActionIcon-transparent.mantine-ActionIcon-root[class*="bazarr-"] { |
|||
color: rgb(var(--accent-color)) |
|||
} |
|||
.mantine-UnstyledButton-root[class*="bazarr-"] { |
|||
color: var(--text) |
|||
} |
|||
.mantine-UnstyledButton-root[class*="bazarr-"]:hover { |
|||
box-shadow: rgb(0 0 0 / 5%) 0px 1px 3px, rgb(0 0 0 / 5%) 0px 20px 25px -5px, rgb(0 0 0 / 4%) 0px 10px 10px -5px; |
|||
border: 1px solid rgb(var(--accent-color)); |
|||
} |
|||
|
|||
.mantine-Slider-bar[class*="bazarr-"] { |
|||
background: rgb(var(--accent-color)); |
|||
} |
|||
.mantine-Slider-thumb[class*="bazarr-"] { |
|||
border: 4px solid rgb(var(--accent-color)); |
|||
color: var(--label-text-color); |
|||
background: var(--label-text-color); |
|||
} |
|||
.mantine-Slider-mark.mantine-Slider-markFilled[class*="bazarr-"] { |
|||
border: 2px solid var(--label-text-color); |
|||
background: var(--label-text-color); |
|||
} |
|||
[class*="bazarr-"].mantine-Slider-track::before { |
|||
background: var(--transparency-dark-15); |
|||
} |
|||
[class*="bazarr-"].mantine-Slider-mark { |
|||
border: 2px solid rgb(var(--accent-color)); |
|||
background-color: rgb(var(--accent-color)) |
|||
} |
|||
|
|||
/* ACTION BUTTON */ |
|||
.mantine-ActionIcon-light.mantine-ActionIcon-root[class*="bazarr-"] { |
|||
background: var(--button-color); |
|||
color: var(--button-text); |
|||
border: 1px solid var(--button-color) |
|||
} |
|||
.mantine-ActionIcon-light.mantine-ActionIcon-root[class*="bazarr-"]:hover { |
|||
background: var(--button-color-hover); |
|||
color: var(--button-text-hover); |
|||
border: 1px solid var(--button-color-hover) |
|||
} |
|||
|
|||
.mantine-ActionIcon-hover.mantine-ActionIcon-root.mantine-Group-child[class*="bazarr-"] { |
|||
color: var(--text); |
|||
} |
|||
|
|||
/* BADGES/PROGRESSBARS */ |
|||
.mantine-Progress-root[class*="bazarr-"] { |
|||
background: var(--transparency-dark-15); |
|||
} |
|||
.mantine-Badge-light.mantine-Badge-root[class*="bazarr-"] { |
|||
background-color: rgb(var(--accent-color)); |
|||
color: var(--label-text-color) |
|||
} |
|||
|
|||
[class*="mantine-MultiSelect-"].mantine-MultiSelect-value[class*="bazarr-"], |
|||
.mantine-ActionIcon-transparent.mantine-ActionIcon-root.mantine-MultiSelect-defaultValueRemove[class*="bazarr-"] { |
|||
background: rgb(var(--accent-color)); |
|||
color: var(--label-text-color) |
|||
} |
|||
|
|||
/* INPUT */ |
|||
|
|||
[class*="mantine-Autocomplete-"].mantine-Autocomplete-input.mantine-Autocomplete-withIcon[class*="bazarr-"], |
|||
[class*="mantine-TextInput-"].mantine-TextInput-input[class*="bazarr-"], |
|||
[class*="mantine-NumberInput-"].mantine-NumberInput-input[class*="bazarr-"], |
|||
[class*="mantine-PasswordInput-"].mantine-PasswordInput-input.mantine-PasswordInput-input[class*="bazarr-"] { |
|||
background: var(--transparency-dark-25); |
|||
border: 1px solid var(--transparency-light-10); |
|||
color: var(--text); |
|||
} |
|||
|
|||
[class*="mantine-Autocomplete-"].mantine-Autocomplete-input.mantine-Autocomplete-withIcon[class*="bazarr-"]:focus, |
|||
[class*="mantine-Autocomplete-"].mantine-Autocomplete-input.mantine-Autocomplete-withIcon[class*="bazarr-"]:focus-within, |
|||
[class*="mantine-TextInput-"].mantine-TextInput-input[class*="bazarr-"]:focus, |
|||
[class*="mantine-TextInput-"].mantine-TextInput-input[class*="bazarr-"]:focus-within, |
|||
[class*="mantine-NumberInput-"].mantine-NumberInput-input[class*="bazarr-"]:focus, |
|||
[class*="mantine-NumberInput-"].mantine-NumberInput-input[class*="bazarr-"]:focus-within,¨ |
|||
[class*="mantine-PasswordInput-"].mantine-PasswordInput-input.mantine-PasswordInput-input[class*="bazarr-"]:focus, |
|||
[class*="mantine-PasswordInput-"].mantine-PasswordInput-input.mantine-PasswordInput-input[class*="bazarr-"]:focus-within { |
|||
outline: none; |
|||
border-color: rgb(var(--accent-color)) !important; |
|||
color: var(--text-hover) |
|||
} |
|||
|
|||
.mantine-NumberInput-control.mantine-NumberInput-controlUp[class*="bazarr-"] { |
|||
border-bottom-color: var(--transparency-light-10); |
|||
border-left-color: var(--transparency-light-10); |
|||
} |
|||
.mantine-NumberInput-control.mantine-NumberInput-controlDown[class*="bazarr-"] { |
|||
border-left-color: var(--transparency-light-10); |
|||
} |
|||
|
|||
.mantine-NumberInput-control.mantine-NumberInput-controlUp[class*="bazarr-"]::after { |
|||
border-color: transparent transparent var(--text); |
|||
} |
|||
.mantine-NumberInput-control.mantine-NumberInput-controlDown[class*="bazarr-"]::after { |
|||
border-color: var(--text) transparent transparent; |
|||
} |
|||
|
|||
[class*="bazarr-"].mantine-Checkbox-inner input { |
|||
background: var(--transparency-dark-15); |
|||
border: 1px solid var(--transparency-light-10); |
|||
} |
|||
[class*="bazarr-"].mantine-Checkbox-input:checked { |
|||
background-color: rgb(var(--accent-color)); |
|||
border-color: rgb(var(--accent-color)); |
|||
} |
|||
.__mantine-ref-icon[class*="bazarr-"].mantine-Checkbox-icon { |
|||
color: var(--label-text-color) |
|||
} |
|||
|
|||
[class*="mantine-TextInput-"].mantine-TextInput-input[class*="bazarr-"], |
|||
[class*="mantine-Autocomplete-"].mantine-Autocomplete-input.mantine-Autocomplete-withIcon[class*="bazarr-"] { |
|||
color: var(--text); |
|||
} |
|||
|
|||
textarea, [class*="mantine-Textarea-"].mantine-Textarea-input[class*="bazarr-"] { |
|||
background: var(--transparency-dark-15); |
|||
} |
|||
|
|||
textarea:focus, [class*="mantine-Textarea-"].mantine-Textarea-input[class*="bazarr-"]:focus, |
|||
textarea:focus-within, [class*="mantine-Textarea-"].mantine-Textarea-input[class*="bazarr-"]:focus-within { |
|||
border-color: rgb(var(--accent-color)) !important; |
|||
} |
|||
|
|||
/* SELECT */ |
|||
.mantine-Select-wrapper[class*="bazarr-"] input, |
|||
[class*="mantine-MultiSelect-"].mantine-MultiSelect-input[class*="bazarr-"] { |
|||
background-color: var(--transparency-dark-15); |
|||
color: var(--text); |
|||
border: 1px solid var(--transparency-light-10); |
|||
} |
|||
|
|||
[class*="mantine-MultiSelect-"].mantine-MultiSelect-input[class*="bazarr-"]:focus, |
|||
[class*="mantine-MultiSelect-"].mantine-MultiSelect-input[class*="bazarr-"]:focus-within { |
|||
border-color: rgb(var(--accent-color)) !important; |
|||
} |
|||
|
|||
.mantine-Select-wrapper[class*="bazarr-"] input:focus, |
|||
.mantine-Select-wrapper[class*="bazarr-"] input:focus-within { |
|||
outline: none; |
|||
border-color: rgb(var(--accent-color)) !important; |
|||
} |
|||
|
|||
/* DROPDOWNS */ |
|||
|
|||
.mantine-Paper-root.mantine-Menu-body[class*="bazarr-"] { |
|||
border: 1px solid var(--transparency-light-10); |
|||
background: var(--drop-down-menu-bg); |
|||
} |
|||
|
|||
[class*="bazarr-"].mantine-Menu-itemInner { |
|||
color: var(--text); |
|||
} |
|||
|
|||
.mantine-Menu-item.mantine-Menu-itemHovered[class*="bazarr-"] { |
|||
background-color: var(--transparency-light-10); |
|||
color: var(--text-hover); |
|||
} |
|||
.mantine-Menu-item[class*="bazarr-"]:hover { |
|||
color: var(--text-hover); |
|||
} |
|||
|
|||
/* MODAL */ |
|||
|
|||
.mantine-Paper-root.mantine-Modal-modal[class*="bazarr-"] { |
|||
color: var(--text); |
|||
box-shadow: rgb(0 0 0 / 5%) 0px 1px 3px, rgb(0 0 0 / 5%) 0px 28px 23px -7px, rgb(0 0 0 / 4%) 0px 12px 12px -7px; |
|||
background: var(--modal-bg-color); |
|||
} |
|||
|
|||
.mantine-Divider-root.mantine-Divider-horizontal[class*="bazarr-"] { |
|||
border-top-color: var(--transparency-light-10); |
|||
} |
|||
|
|||
.mantine-ActionIcon-hover.mantine-ActionIcon-root.mantine-Modal-close[class*="bazarr-"]:hover { |
|||
background: var(--transparency-dark-15); |
|||
} |
|||
|
|||
.mantine-ActionIcon-hover.mantine-ActionIcon-root.mantine-Modal-close[class*="bazarr-"] { |
|||
color: var(--text); |
|||
} |
|||
|
|||
.mantine-ActionIcon-hover.mantine-ActionIcon-root[class*="bazarr-"] { |
|||
color: var(--text); |
|||
} |
|||
|
|||
/* RELEASES */ |
|||
|
|||
.mantine-Paper-root.mantine-Card-root[class*="bazarr-"] { |
|||
background: var(--transparency-dark-15); |
|||
} |
|||
|
|||
.mantine-List-item[class*="bazarr-"] { |
|||
color: var(--text); |
|||
} |
|||
|
|||
/* ALERTS */ |
|||
|
|||
.mantine-Alert-root.mantine-Alert-light[class*="bazarr-"] { |
|||
background: var(--transparency-dark-15); |
|||
} |
|||
[class*="bazarr-"].mantine-Alert-message { |
|||
color: var(--text); |
|||
} |
|||
[class*="bazarr-"].mantine-Alert-label { |
|||
color: var(--text-hover) |
|||
} |
|||
|
|||
/* RECHARTS */ |
|||
.recharts-default-tooltip { |
|||
background: var(--drop-down-menu-bg) !important; |
|||
border: transparent !important; |
|||
} |
|||
|
|||
.recharts-rectangle.recharts-tooltip-cursor { |
|||
fill: var(--transparency-light-15) !important; |
|||
} |
|||
|
|||
text { |
|||
stroke: none; |
|||
fill: var(--text-hover); |
|||
text-anchor: end; |
|||
} |
|||
|
|||
line { |
|||
stroke: var(--text); |
|||
fill: none; |
|||
} |
|||
|
|||
/* NOTIFICATIONS */ |
|||
.mantine-Notification-root.mantine-Notification-withIcon[class*="bazarr-"] { |
|||
background: var(--drop-down-menu-bg); |
|||
} |
|||
|
|||
code, .mantine-Code-root[class*="bazarr-"] { |
|||
background: rgb(var(--accent-color)); |
|||
color: var(--label-text-color); |
|||
} |
|||
|
|||
/* SPINNER */ |
|||
|
|||
.mantine-Notification-root.mantine-Notification-withIcon[class*="bazarr-"] svg { |
|||
stroke: rgb(var(--accent-color)); |
|||
} |
Loading…
Reference in new issue