fix styling

This commit is contained in:
Philipinho
2023-09-26 12:36:27 +01:00
parent 4dc3d58645
commit 3a53a7ea30
4 changed files with 10 additions and 13 deletions

View File

@ -11,9 +11,9 @@
}, },
"dependencies": { "dependencies": {
"@hocuspocus/provider": "^2.5.0", "@hocuspocus/provider": "^2.5.0",
"@mantine/core": "^7.0.0", "@mantine/core": "^7.0.2",
"@mantine/form": "^7.0.0", "@mantine/form": "^7.0.2",
"@mantine/hooks": "^7.0.0", "@mantine/hooks": "^7.0.2",
"@tabler/icons-react": "^2.32.0", "@tabler/icons-react": "^2.32.0",
"@tanstack/react-query": "^4.33.0", "@tanstack/react-query": "^4.33.0",
"@tanstack/react-table": "^8.9.3", "@tanstack/react-table": "^8.9.3",
@ -42,12 +42,10 @@
"@types/node": "20.4.8", "@types/node": "20.4.8",
"@types/react": "18.2.18", "@types/react": "18.2.18",
"@types/react-dom": "18.2.7", "@types/react-dom": "18.2.7",
"autoprefixer": "^10.4.16",
"eslint": "8.46.0", "eslint": "8.46.0",
"eslint-config-next": "13.4.13", "eslint-config-next": "13.4.13",
"optics-ts": "^2.4.1", "optics-ts": "^2.4.1",
"postcss": "^8.4.30", "postcss": "^8.4.30",
"postcss-preset-env": "^9.1.4",
"postcss-preset-mantine": "^1.7.0", "postcss-preset-mantine": "^1.7.0",
"postcss-simple-vars": "^7.0.1" "postcss-simple-vars": "^7.0.1"
} }

View File

@ -1,7 +1,5 @@
module.exports = { module.exports = {
plugins: { plugins: {
autoprefixer: {},
"postcss-preset-env": {},
"postcss-preset-mantine": {}, "postcss-preset-mantine": {},
"postcss-simple-vars": { "postcss-simple-vars": {
variables: { variables: {

View File

@ -7,6 +7,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-right: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)); border-right: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
user-select: none;
} }
.section { .section {
@ -42,9 +43,8 @@
font-weight: 500; font-weight: 500;
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0)); color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
& &:hover {
:hover { background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0)); color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
} }
} }
@ -83,7 +83,7 @@
font-weight: 500; font-weight: 500;
&:hover { &:hover {
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6)); background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0)); color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
} }
} }

View File

@ -41,10 +41,11 @@
padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm); padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
border-radius: var(--mantine-radius-sm); border-radius: var(--mantine-radius-sm);
font-weight: 500; font-weight: 500;
user-select: none;
@mixin hover { @mixin hover {
background-color: light-dark( background-color: light-dark(
var(--mantine-color-gray-0), var(--mantine-color-gray-1),
var(--mantine-color-dark-6) var(--mantine-color-dark-6)
); );
color: light-dark(var(--mantine-color-black), var(--mantine-color-white)); color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
@ -54,7 +55,7 @@
} }
} }
& [data-active] { &[data-active] {
&, &,
& :hover { & :hover {
background-color: var(--mantine-color-blue-light); background-color: var(--mantine-color-blue-light);