add css linting, fix css linting issues

This commit is contained in:
Arthur Lu 2023-06-29 22:39:21 +00:00
parent f7dd99e933
commit 8496d9d565
5 changed files with 36 additions and 27 deletions

6
.stylelintrc.json Normal file
View File

@ -0,0 +1,6 @@
{
"extends": [
"stylelint-config-standard"
],
"rules": {}
}

View File

@ -6,8 +6,8 @@
} }
.input-grid * { .input-grid * {
margin-top: 0px; margin-top: 0;
margin-bottom: 0px; margin-bottom: 0;
} }
.input-grid .last-item { .input-grid .last-item {

View File

@ -29,7 +29,7 @@ header {
header h1 { header h1 {
font-size: 18px; font-size: 18px;
margin: 0px; margin: 0;
background-color: var(--nav-header-bg-color); background-color: var(--nav-header-bg-color);
color: var(--nav-header-text-color); color: var(--nav-header-text-color);
} }
@ -50,8 +50,8 @@ label[for="navtoggle"], #navtoggle {
display: none; display: none;
} }
@media screen and (min-width: 600px){ @media screen and (width >= 600px){
nav a:hover, nav a[aria-current="true"], nav:hover a[aria-current="true"]:hover { nav a:hover, nav a[aria-current="true"] {
color: var(--nav-link-active-text-color); color: var(--nav-link-active-text-color);
background-color: var(--nav-link-active-bg-color); background-color: var(--nav-link-active-bg-color);
} }
@ -61,17 +61,18 @@ label[for="navtoggle"], #navtoggle {
background-color: var(--nav-bg-color); background-color: var(--nav-bg-color);
} }
nav:hover a[aria-current="true"]:hover {
color: var(--nav-link-active-text-color);
background-color: var(--nav-link-active-bg-color);
}
nav { nav {
display: flex; display: flex;
align-items: center; align-items: center;
} }
nav {
display: flex;
}
} }
@media screen and (max-width: 600px){ @media screen and (width <= 600px){
header { header {
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;

View File

@ -5,7 +5,7 @@
--main-bg-color: #404040; --main-bg-color: #404040;
--main-text-color: white; --main-text-color: white;
--main-card-bg-color: #202020; --main-card-bg-color: #202020;
--main-card-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.8), 0 2px 10px 0 rgba(0,0,0,0.8); --main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 80%), 0 2px 10px 0 rgb(0 0 0 / 80%);
--main-table-header-bg-color: black; --main-table-header-bg-color: black;
--main-input-bg-color: #404040; --main-input-bg-color: #404040;
} }
@ -15,7 +15,7 @@
--main-bg-color: white; --main-bg-color: white;
--main-text-color: black; --main-text-color: black;
--main-card-bg-color: white; --main-card-bg-color: white;
--main-card-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0,0,0,0.2); --main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 20%);
--main-table-header-bg-color: #808080; --main-table-header-bg-color: #808080;
--main-input-bg-color: white; --main-input-bg-color: white;
} }
@ -25,7 +25,7 @@ html {
box-sizing: border-box; box-sizing: border-box;
} }
h1, h2, h3, h3, h4, h5, h6, p, a, label, button, input, select, td { h1, h2, h3, h4, h5, h6, p, a, label, button, input, select, td {
font-family: monospace; font-family: monospace;
} }

View File

@ -4,13 +4,15 @@
"description": "Front-end for ProxmoxAAS", "description": "Front-end for ProxmoxAAS",
"type": "module", "type": "module",
"scripts": { "scripts": {
"lint": "eslint --fix ." "lint": "stylelint --fix **/*.css; eslint --fix .;"
}, },
"devDependencies": { "devDependencies": {
"eslint": "^8.43.0", "eslint": "^8.43.0",
"eslint-config-standard": "^17.1.0", "eslint-config-standard": "^17.1.0",
"eslint-plugin-import": "^2.27.5", "eslint-plugin-import": "^2.27.5",
"eslint-plugin-n": "^16.0.1", "eslint-plugin-n": "^16.0.1",
"eslint-plugin-promise": "^6.1.1" "eslint-plugin-promise": "^6.1.1",
"stylelint": "^15.9.0",
"stylelint-config-standard": "^33.0.0"
} }
} }