diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..752db07 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,6 @@ +{ + "extends": [ + "stylelint-config-standard" + ], + "rules": {} +} \ No newline at end of file diff --git a/css/form.css b/css/form.css index f8358b6..a0de5e0 100644 --- a/css/form.css +++ b/css/form.css @@ -6,8 +6,8 @@ } .input-grid * { - margin-top: 0px; - margin-bottom: 0px; + margin-top: 0; + margin-bottom: 0; } .input-grid .last-item { diff --git a/css/nav.css b/css/nav.css index 75c4095..eb92fbb 100644 --- a/css/nav.css +++ b/css/nav.css @@ -29,7 +29,7 @@ header { header h1 { font-size: 18px; - margin: 0px; + margin: 0; background-color: var(--nav-header-bg-color); color: var(--nav-header-text-color); } @@ -50,8 +50,8 @@ label[for="navtoggle"], #navtoggle { display: none; } -@media screen and (min-width: 600px){ - nav a:hover, nav a[aria-current="true"], nav:hover a[aria-current="true"]:hover { +@media screen and (width >= 600px){ + nav a:hover, nav a[aria-current="true"] { color: var(--nav-link-active-text-color); background-color: var(--nav-link-active-bg-color); } @@ -61,17 +61,18 @@ label[for="navtoggle"], #navtoggle { 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 { display: flex; align-items: center; } - - nav { - display: flex; - } } -@media screen and (max-width: 600px){ +@media screen and (width <= 600px){ header { display: grid; grid-template-columns: 1fr auto; diff --git a/css/style.css b/css/style.css index c232c8d..f37c21b 100644 --- a/css/style.css +++ b/css/style.css @@ -5,7 +5,7 @@ --main-bg-color: #404040; --main-text-color: white; --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-input-bg-color: #404040; } @@ -15,7 +15,7 @@ --main-bg-color: white; --main-text-color: black; --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-input-bg-color: white; } @@ -25,7 +25,7 @@ html { 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; } diff --git a/package.json b/package.json index 3725374..5a8fbc6 100644 --- a/package.json +++ b/package.json @@ -1,16 +1,18 @@ { - "name": "proxmoxaas-client", - "version": "0.0.1", - "description": "Front-end for ProxmoxAAS", - "type": "module", - "scripts": { - "lint": "eslint --fix ." - }, - "devDependencies": { - "eslint": "^8.43.0", - "eslint-config-standard": "^17.1.0", - "eslint-plugin-import": "^2.27.5", - "eslint-plugin-n": "^16.0.1", - "eslint-plugin-promise": "^6.1.1" - } + "name": "proxmoxaas-client", + "version": "0.0.1", + "description": "Front-end for ProxmoxAAS", + "type": "module", + "scripts": { + "lint": "stylelint --fix **/*.css; eslint --fix .;" + }, + "devDependencies": { + "eslint": "^8.43.0", + "eslint-config-standard": "^17.1.0", + "eslint-plugin-import": "^2.27.5", + "eslint-plugin-n": "^16.0.1", + "eslint-plugin-promise": "^6.1.1", + "stylelint": "^15.9.0", + "stylelint-config-standard": "^33.0.0" + } }