Refactored components styling 1/?
This commit is contained in:
1 parent
e72212a467
commit
8b27bc2ab2
20 files changed
+278
-197
No files matched your search
@@ -17,8 +17,6 @@
|
||||
|
||||
.MuiPaper-root:has(table.MuiTable-root) {
|
||||
box-shadow: none;
|
||||
border: solid 1px var(--border-color);
|
||||
border-radius: var(--env-var-radius-1);
|
||||
}
|
||||
.MuiTable-root
|
||||
.MuiTableBody-root
|
||||
@@ -26,10 +24,7 @@
|
||||
.MuiTableCell-root {
|
||||
border: none;
|
||||
}
|
||||
.MuiTable-root .MuiTableHead-root,
|
||||
.MuiTable-root .MuiTableRow-root:hover {
|
||||
background-color: var(--primary-bg-accent);
|
||||
}
|
||||
|
||||
.MuiTable-root .MuiTableHead-root .MuiTableCell-root,
|
||||
.MuiTable-root .MuiTableBody-root .MuiTableCell-root {
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
@@ -37,7 +32,6 @@
|
||||
.MuiTable-root .MuiTableHead-root .MuiTableCell-root {
|
||||
padding: var(--env-var-spacing-1) var(--env-var-spacing-2);
|
||||
font-weight: 500;
|
||||
color: var(--secondary-color-light);
|
||||
}
|
||||
.MuiTable-root .MuiTableHead-root span {
|
||||
display: inline-block;
|
||||
@@ -52,7 +46,6 @@
|
||||
height: 20px;
|
||||
}
|
||||
.MuiTable-root .MuiTableBody-root .MuiTableCell-root {
|
||||
color: var(--secondary-color);
|
||||
padding: 6px var(--env-var-spacing-2);
|
||||
}
|
||||
.MuiTable-root .MuiTableBody-root .MuiTableRow-root {
|
||||
@@ -61,21 +54,14 @@
|
||||
|
||||
.MuiPaper-root + .MuiPagination-root {
|
||||
margin-top: 24px;
|
||||
background-color: var(--primary-bg);
|
||||
border: solid 1px var(--border-color);
|
||||
border-radius: var(--env-var-radius-1);
|
||||
padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2);
|
||||
}
|
||||
.MuiPaper-root + .MuiPagination-root ul {
|
||||
justify-content: center;
|
||||
}
|
||||
.MuiPaper-root
|
||||
+ .MuiPagination-root
|
||||
ul
|
||||
li:not(:first-child):not(:last-child)
|
||||
button {
|
||||
.MuiPaper-root + .MuiPagination-root button {
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
color: var(--secondary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
.MuiPaper-root + .MuiPagination-root ul li:first-child {
|
||||
@@ -84,11 +70,6 @@
|
||||
.MuiPaper-root + .MuiPagination-root ul li:last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
.MuiPaper-root + .MuiPagination-root ul li:first-child button,
|
||||
.MuiPaper-root + .MuiPagination-root ul li:last-child button {
|
||||
border: solid 1px var(--border-color);
|
||||
border-radius: var(--env-var-radius-1);
|
||||
}
|
||||
.MuiPaper-root + .MuiPagination-root ul li:first-child button {
|
||||
padding: 0 var(--env-var-spacing-1) 0 var(--env-var-spacing-1-plus);
|
||||
}
|
||||
@@ -108,23 +89,14 @@
|
||||
content: "Next";
|
||||
margin-right: 15px;
|
||||
}
|
||||
.MuiPaper-root + .MuiPagination-root .MuiPaginationItem-root.Mui-selected {
|
||||
background-color: var(--primary-bg-fill);
|
||||
}
|
||||
.MuiPaper-root + .MuiPagination-root div.MuiPaginationItem-root {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.MuiTablePagination-root p {
|
||||
color: var(--secondary-color-light);
|
||||
font-weight: 500;
|
||||
font-size: var(--env-var-font-size-small-plus);
|
||||
}
|
||||
.MuiTablePagination-root button,
|
||||
.MuiTablePagination-root .MuiSelect-select {
|
||||
border: solid 1px var(--border-color);
|
||||
border-radius: var(--env-var-radius-1);
|
||||
}
|
||||
.MuiTablePagination-root .MuiTablePagination-select.MuiSelect-select {
|
||||
text-align: left;
|
||||
text-align-last: left;
|
||||
@@ -138,10 +110,6 @@
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
.MuiTablePagination-root svg path {
|
||||
stroke: var(--secondary-color-light);
|
||||
stroke-width: 1.3;
|
||||
}
|
||||
.MuiTablePagination-root .MuiSelect-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@@ -152,30 +120,13 @@
|
||||
.MuiTablePagination-root button.Mui-disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.MuiTablePagination-root button:not(.Mui-disabled):hover {
|
||||
background-color: var(--primary-bg-fill);
|
||||
border-color: var(--primary-bg-fill);
|
||||
}
|
||||
|
||||
.pagination-dropdown.MuiPaper-root {
|
||||
box-shadow: var(--env-var-shadow-1);
|
||||
border: solid 1px var(--border-color);
|
||||
border-radius: var(--env-var-radius-1);
|
||||
}
|
||||
.pagination-dropdown ul {
|
||||
padding: 4px;
|
||||
min-width: 100px;
|
||||
}
|
||||
.pagination-dropdown li,
|
||||
body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
|
||||
.pagination-dropdown li {
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
color: var(--secondary-color-light);
|
||||
padding: 4px;
|
||||
}
|
||||
.pagination-dropdown li.Mui-selected,
|
||||
.pagination-dropdown li.Mui-selected.Mui-focusVisible,
|
||||
.pagination-dropdown li.Mui-selected:hover {
|
||||
background-color: var(--primary-bg-fill);
|
||||
}
|
||||
body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
|
||||
font-size: var(--env-var-font-size-small-plus);
|
||||
@@ -183,7 +134,6 @@ body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
|
||||
|
||||
.monitors .MuiTable-root .MuiTableHead-root .MuiTableCell-root {
|
||||
text-transform: uppercase;
|
||||
color: var(--secondary-color);
|
||||
opacity: 0.8;
|
||||
font-size: var(--env-var-font-size-small-plus);
|
||||
font-weight: 400;
|
||||
|
||||
Reference in new issue
Block a user