fix: 🐛 Bazarr: CSS for new UI. WIP

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));
+}