Browse Source

style: 💄 Bazarr base formatting

pull/400/head
GilbN 3 years ago
parent
commit
a2349def40
  1. 93
      css/base/bazarr/bazarr-base.css

93
css/base/bazarr/bazarr-base.css

@ -1,7 +1,9 @@
@import url("/css/defaults/placeholders.css"); @import url("/css/defaults/placeholders.css");
@import url("/css/defaults/transparent.css"); @import url("/css/defaults/transparent.css");
body,#root,html { body,
#root,
html {
background: var(--main-bg-color); background: var(--main-bg-color);
background-repeat: repeat, no-repeat; background-repeat: repeat, no-repeat;
background-attachment: fixed, fixed; background-attachment: fixed, fixed;
@ -53,11 +55,12 @@ h6 {
/* SUBHEADER */ /* SUBHEADER */
/* .mantine-Container-root[class*="bazarr-"] .mantine-Group-root[class*="bazarr-"]:not(td>*):not(.mantine-Card-root div), */ /* .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.mantine-Group-root[class*="bazarr-"],
#root > div > div > main > div > 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-"] { #root>div>div>main>form>div.mantine-Group-root[class*="bazarr-"] {
background: var(--transparency-dark-25); background: var(--transparency-dark-25);
} }
.mantine-Button-icon.mantine-Button-leftIcon[class*="bazarr-"] { .mantine-Button-icon.mantine-Button-leftIcon[class*="bazarr-"] {
color: var(--text) color: var(--text)
} }
@ -69,17 +72,20 @@ h6 {
background: var(--transparency-dark-25); background: var(--transparency-dark-25);
border-right: 1px solid var(--transparency-light-15); border-right: 1px solid var(--transparency-light-15);
} }
.mantine-Divider-root .mantine-Divider-horizontal[class*="bazarr-"] { .mantine-Divider-root .mantine-Divider-horizontal[class*="bazarr-"] {
border-top-color: var(--transparency-light-10); border-top-color: var(--transparency-light-10);
} }
.mantine-Navbar-root.mantine-Navbar-hidden[class*="bazarr-"] .mantine-Stack-root[class*="bazarr-"] a[aria-current="page"] { .mantine-Navbar-root.mantine-Navbar-hidden[class*="bazarr-"] .mantine-Stack-root[class*="bazarr-"] a[aria-current="page"] {
background: var(--transparency-dark-15) !important; background: var(--transparency-dark-15) !important;
border-left: 2px solid rgb(var(--accent-color)); border-left: 2px solid rgb(var(--accent-color));
} }
.mantine-Navbar-root.mantine-Navbar-hidden[class*="bazarr-"] .mantine-Stack-root[class*="bazarr-"] a{ .mantine-Navbar-root.mantine-Navbar-hidden[class*="bazarr-"] .mantine-Stack-root[class*="bazarr-"] a {
border-left: 2px solid var(--transparency-light-10); 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 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) { .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)); color: rgb(var(--accent-color));
@ -95,24 +101,32 @@ h6 {
[class*="bazarr-"] tbody tr { [class*="bazarr-"] tbody tr {
color: var(--text); color: var(--text);
} }
[class*="bazarr-"] tbody tr td { [class*="bazarr-"] tbody tr td {
border-bottom: 1px solid var(--transparency-light-10) !important; border-bottom: 1px solid var(--transparency-light-10) !important;
} }
[class*="bazarr-"] thead tr th { [class*="bazarr-"] thead tr th {
border-bottom: 1px solid var(--transparency-light-20) !important; border-bottom: 1px solid var(--transparency-light-20) !important;
} }
[class*="bazarr-"].__mantine-ref-striped tbody tr:nth-of-type(2n+1) { [class*="bazarr-"].__mantine-ref-striped tbody tr:nth-of-type(2n+1) {
background: var(--transparency-dark-15) !important; background: var(--transparency-dark-15) !important;
} }
.mantine-Table-root .__mantine-ref-striped .mantine-Table-striped[class*="bazarr-"] { .mantine-Table-root .__mantine-ref-striped .mantine-Table-striped[class*="bazarr-"] {
color: var(--text) color: var(--text)
} }
[class*="bazarr-"] thead tr th, [class*="bazarr-"] tfoot tr th {
[class*="bazarr-"] thead tr th,
[class*="bazarr-"] tfoot tr th {
color: var(--text-hover) !important; color: var(--text-hover) !important;
} }
.mantine-Skeleton-root.mantine-Skeleton-visible[class*="bazarr-"]::after { .mantine-Skeleton-root.mantine-Skeleton-visible[class*="bazarr-"]::after {
background: var(--transparency-light-10); background: var(--transparency-light-10);
} }
.mantine-Skeleton-root.mantine-Skeleton-visible[class*="bazarr-"]::before { .mantine-Skeleton-root.mantine-Skeleton-visible[class*="bazarr-"]::before {
background: var(--transparency-dark-25); background: var(--transparency-dark-25);
} }
@ -123,6 +137,7 @@ h6 {
color: var(--button-text); color: var(--button-text);
background: var(--button-color); background: var(--button-color);
} }
.mantine-Button-filled.mantine-Button-root.mantine-Group-child[class*="bazarr-"]:hover { .mantine-Button-filled.mantine-Button-root.mantine-Group-child[class*="bazarr-"]:hover {
color: var(--button-text-hover); color: var(--button-text-hover);
background: var(--button-color-hover); background: var(--button-color-hover);
@ -145,6 +160,7 @@ h6 {
color: var(--button-text); color: var(--button-text);
background: var(--button-color); background: var(--button-color);
} }
.mantine-Button-filled.mantine-Button-root[class*="bazarr-"]:hover { .mantine-Button-filled.mantine-Button-root[class*="bazarr-"]:hover {
color: var(--button-text-hover); color: var(--button-text-hover);
background: var(--button-color-hover); background: var(--button-color-hover);
@ -176,9 +192,11 @@ h6 {
.mantine-UnstyledButton-root.__mantine-ref-control.mantine-Accordion-control[class*="bazarr-"]:hover { .mantine-UnstyledButton-root.__mantine-ref-control.mantine-Accordion-control[class*="bazarr-"]:hover {
background: var(--transparency-dark-15); background: var(--transparency-dark-15);
} }
.mantine-Accordion-item[class*="bazarr-"] { .mantine-Accordion-item[class*="bazarr-"] {
border-bottom: var(--transparency-light-10) 1px solid; border-bottom: var(--transparency-light-10) 1px solid;
} }
.__mantine-ref-icon.mantine-Accordion-icon[class*="bazarr-"] { .__mantine-ref-icon.mantine-Accordion-icon[class*="bazarr-"] {
color: rgb(var(--accent-color)) color: rgb(var(--accent-color))
} }
@ -186,9 +204,11 @@ h6 {
.mantine-ActionIcon-transparent.mantine-ActionIcon-root[class*="bazarr-"] { .mantine-ActionIcon-transparent.mantine-ActionIcon-root[class*="bazarr-"] {
color: rgb(var(--accent-color)) color: rgb(var(--accent-color))
} }
.mantine-UnstyledButton-root[class*="bazarr-"] { .mantine-UnstyledButton-root[class*="bazarr-"] {
color: var(--text) color: var(--text)
} }
.mantine-UnstyledButton-root[class*="bazarr-"]:hover { .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; 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)); border: 1px solid rgb(var(--accent-color));
@ -197,53 +217,59 @@ h6 {
.mantine-Slider-bar[class*="bazarr-"] { .mantine-Slider-bar[class*="bazarr-"] {
background: rgb(var(--accent-color)); background: rgb(var(--accent-color));
} }
.mantine-Slider-thumb[class*="bazarr-"] { .mantine-Slider-thumb[class*="bazarr-"] {
border: 4px solid rgb(var(--accent-color)); border: 4px solid rgb(var(--accent-color));
color: var(--label-text-color); color: var(--label-text-color);
background: var(--label-text-color); background: var(--label-text-color);
} }
.mantine-Slider-mark.mantine-Slider-markFilled[class*="bazarr-"] { .mantine-Slider-mark.mantine-Slider-markFilled[class*="bazarr-"] {
border: 2px solid var(--label-text-color); border: 2px solid var(--label-text-color);
background: var(--label-text-color); background: var(--label-text-color);
} }
[class*="bazarr-"].mantine-Slider-track::before { [class*="bazarr-"].mantine-Slider-track::before {
background: var(--transparency-dark-15); background: var(--transparency-dark-15);
} }
[class*="bazarr-"].mantine-Slider-mark { [class*="bazarr-"].mantine-Slider-mark {
border: 2px solid rgb(var(--accent-color)); border: 2px solid rgb(var(--accent-color));
background-color: rgb(var(--accent-color)) background-color: rgb(var(--accent-color))
} }
/* ACTION BUTTON */ /* ACTION BUTTON */
.mantine-ActionIcon-light.mantine-ActionIcon-root[class*="bazarr-"] { .mantine-ActionIcon-light.mantine-ActionIcon-root[class*="bazarr-"] {
background: var(--button-color); background: var(--button-color);
color: var(--button-text); color: var(--button-text);
border: 1px solid var(--button-color) border: 1px solid var(--button-color)
} }
.mantine-ActionIcon-light.mantine-ActionIcon-root[class*="bazarr-"]:hover {
.mantine-ActionIcon-light.mantine-ActionIcon-root[class*="bazarr-"]:hover {
background: var(--button-color-hover); background: var(--button-color-hover);
color: var(--button-text-hover); color: var(--button-text-hover);
border: 1px solid var(--button-color-hover) border: 1px solid var(--button-color-hover)
} }
.mantine-ActionIcon-hover.mantine-ActionIcon-root.mantine-Group-child[class*="bazarr-"] { .mantine-ActionIcon-hover.mantine-ActionIcon-root.mantine-Group-child[class*="bazarr-"] {
color: var(--text); color: var(--text);
} }
/* BADGES/PROGRESSBARS */ /* BADGES/PROGRESSBARS */
.mantine-Progress-root[class*="bazarr-"] { .mantine-Progress-root[class*="bazarr-"] {
background: var(--transparency-dark-15); background: var(--transparency-dark-15);
} }
.mantine-Badge-light.mantine-Badge-root[class*="bazarr-"] {
.mantine-Badge-light.mantine-Badge-root[class*="bazarr-"] {
background-color: rgb(var(--accent-color)); background-color: rgb(var(--accent-color));
color: var(--label-text-color) color: var(--label-text-color)
} }
[class*="mantine-MultiSelect-"].mantine-MultiSelect-value[class*="bazarr-"], [class*="mantine-MultiSelect-"].mantine-MultiSelect-value[class*="bazarr-"],
.mantine-ActionIcon-transparent.mantine-ActionIcon-root.mantine-MultiSelect-defaultValueRemove[class*="bazarr-"] { .mantine-ActionIcon-transparent.mantine-ActionIcon-root.mantine-MultiSelect-defaultValueRemove[class*="bazarr-"] {
background: rgb(var(--accent-color)); background: rgb(var(--accent-color));
color: var(--label-text-color) color: var(--label-text-color)
} }
/* INPUT */ /* INPUT */
@ -261,8 +287,8 @@ h6 {
[class*="mantine-TextInput-"].mantine-TextInput-input[class*="bazarr-"]:focus, [class*="mantine-TextInput-"].mantine-TextInput-input[class*="bazarr-"]:focus,
[class*="mantine-TextInput-"].mantine-TextInput-input[class*="bazarr-"]:focus-within, [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,
[class*="mantine-NumberInput-"].mantine-NumberInput-input[class*="bazarr-"]:focus-within,¨ [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,
[class*="mantine-PasswordInput-"].mantine-PasswordInput-input.mantine-PasswordInput-input[class*="bazarr-"]:focus-within { [class*="mantine-PasswordInput-"].mantine-PasswordInput-input.mantine-PasswordInput-input[class*="bazarr-"]:focus-within {
outline: none; outline: none;
border-color: rgb(var(--accent-color)) !important; border-color: rgb(var(--accent-color)) !important;
@ -273,6 +299,7 @@ h6 {
border-bottom-color: var(--transparency-light-10); border-bottom-color: var(--transparency-light-10);
border-left-color: var(--transparency-light-10); border-left-color: var(--transparency-light-10);
} }
.mantine-NumberInput-control.mantine-NumberInput-controlDown[class*="bazarr-"] { .mantine-NumberInput-control.mantine-NumberInput-controlDown[class*="bazarr-"] {
border-left-color: var(--transparency-light-10); border-left-color: var(--transparency-light-10);
} }
@ -280,6 +307,7 @@ h6 {
.mantine-NumberInput-control.mantine-NumberInput-controlUp[class*="bazarr-"]::after { .mantine-NumberInput-control.mantine-NumberInput-controlUp[class*="bazarr-"]::after {
border-color: transparent transparent var(--text); border-color: transparent transparent var(--text);
} }
.mantine-NumberInput-control.mantine-NumberInput-controlDown[class*="bazarr-"]::after { .mantine-NumberInput-control.mantine-NumberInput-controlDown[class*="bazarr-"]::after {
border-color: var(--text) transparent transparent; border-color: var(--text) transparent transparent;
} }
@ -288,10 +316,12 @@ h6 {
background: var(--transparency-dark-15); background: var(--transparency-dark-15);
border: 1px solid var(--transparency-light-10); border: 1px solid var(--transparency-light-10);
} }
[class*="bazarr-"].mantine-Checkbox-input:checked { [class*="bazarr-"].mantine-Checkbox-input:checked {
background-color: rgb(var(--accent-color)); background-color: rgb(var(--accent-color));
border-color: rgb(var(--accent-color)); border-color: rgb(var(--accent-color));
} }
.__mantine-ref-icon[class*="bazarr-"].mantine-Checkbox-icon { .__mantine-ref-icon[class*="bazarr-"].mantine-Checkbox-icon {
color: var(--label-text-color) color: var(--label-text-color)
} }
@ -301,12 +331,15 @@ h6 {
color: var(--text); color: var(--text);
} }
textarea, [class*="mantine-Textarea-"].mantine-Textarea-input[class*="bazarr-"] { textarea,
[class*="mantine-Textarea-"].mantine-Textarea-input[class*="bazarr-"] {
background: var(--transparency-dark-15); background: var(--transparency-dark-15);
} }
textarea:focus, [class*="mantine-Textarea-"].mantine-Textarea-input[class*="bazarr-"]:focus, textarea:focus,
textarea:focus-within, [class*="mantine-Textarea-"].mantine-Textarea-input[class*="bazarr-"]:focus-within { [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; border-color: rgb(var(--accent-color)) !important;
} }
@ -344,6 +377,7 @@ textarea:focus-within, [class*="mantine-Textarea-"].mantine-Textarea-input[class
background-color: var(--transparency-light-10); background-color: var(--transparency-light-10);
color: var(--text-hover); color: var(--text-hover);
} }
.mantine-Menu-item[class*="bazarr-"]:hover { .mantine-Menu-item[class*="bazarr-"]:hover {
color: var(--text-hover); color: var(--text-hover);
} }
@ -359,7 +393,7 @@ textarea:focus-within, [class*="mantine-Textarea-"].mantine-Textarea-input[class
[class*="bazarr-"].mantine-Select-item:hover { [class*="bazarr-"].mantine-Select-item:hover {
background: var(--transparency-dark-15) background: var(--transparency-dark-15)
} }
/* MODAL */ /* MODAL */
@ -400,9 +434,11 @@ textarea:focus-within, [class*="mantine-Textarea-"].mantine-Textarea-input[class
.mantine-Alert-root.mantine-Alert-light[class*="bazarr-"] { .mantine-Alert-root.mantine-Alert-light[class*="bazarr-"] {
background: var(--transparency-dark-15); background: var(--transparency-dark-15);
} }
[class*="bazarr-"].mantine-Alert-message { [class*="bazarr-"].mantine-Alert-message {
color: var(--text); color: var(--text);
} }
[class*="bazarr-"].mantine-Alert-label { [class*="bazarr-"].mantine-Alert-label {
color: var(--text-hover) color: var(--text-hover)
} }
@ -433,7 +469,8 @@ line {
background: var(--drop-down-menu-bg); background: var(--drop-down-menu-bg);
} }
code, .mantine-Code-root[class*="bazarr-"] { code,
.mantine-Code-root[class*="bazarr-"] {
background: rgb(var(--accent-color)); background: rgb(var(--accent-color));
color: var(--label-text-color); color: var(--label-text-color);
} }

Loading…
Cancel
Save