diff --git a/css/base/bazarr/bazarr-base.css b/css/base/bazarr/bazarr-base.css new file mode 100644 index 00000000..877f6361 --- /dev/null +++ b/css/base/bazarr/bazarr-base.css @@ -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)); +} \ No newline at end of file