Fix styleline, fix css format issues globally

.stylelintrc

@@ -1,9 +1,13 @@
 {
     "extends": "stylelint-config-standard",
+    "customSyntax": "postcss-html",
     "rules": {
         "indentation": 4,
         "no-descending-specificity": null,
         "selector-list-comma-newline-after": null,
-        "declaration-empty-line-before": null
+        "declaration-empty-line-before": null,
+        "alpha-value-notation": "number",
+        "color-function-notation": "legacy",
+        "shorthand-property-no-redundant-values": null
     }
 }

package.json

@@ -132,6 +132,7 @@
         "jest": "~27.2.5",
         "jest-puppeteer": "~6.0.3",
         "npm-check-updates": "^12.5.5",
+        "postcss-html": "^1.3.1",
         "puppeteer": "~13.1.3",
         "sass": "~1.42.1",
         "stylelint": "~14.2.0",

src/components/MonitorList.vue

@@ -21,7 +21,7 @@
 
             <router-link v-for="(item, index) in sortedMonitorList" :key="index" :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }">
                 <div class="row">
-                    <div class="col-9 col-md-8 small-padding" :class="{ 'monitorItem': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
+                    <div class="col-9 col-md-8 small-padding" :class="{ 'monitor-item': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
                         <div class="info">
                             <Uptime :monitor="item" type="24" :pill="true" />
                             {{ item.name }}
@@ -198,7 +198,7 @@ export default {
     max-width: 15em;
 }
 
-.monitorItem {
+.monitor-item {
     width: 100%;
 }
 

src/components/PingChart.vue

@@ -278,7 +278,7 @@ export default {
 
         .dropdown-item {
             border-radius: 0.3rem;
-            padding: 2px 16px 4px 16px;
+            padding: 2px 16px 4px;
 
             .dark & {
                 background: $dark-bg;

src/components/ProxyDialog.vue

@@ -25,7 +25,7 @@
                             <label for="proxy-host" class="form-label">{{ $t("Proxy Server") }}</label>
                             <div class="d-flex">
                                 <input id="proxy-host" v-model="proxy.host" type="text" class="form-control" required :placeholder="$t('Server Address')">
-                                <input v-model="proxy.port" type="number" class="form-control ms-2" style="width: 100px" required min="1" max="65535" :placeholder="$t('Port')">
+                                <input v-model="proxy.port" type="number" class="form-control ms-2" style="width: 100px;" required min="1" max="65535" :placeholder="$t('Port')">
                             </div>
                         </div>
 

src/components/PublicGroupList.vue

@@ -145,7 +145,7 @@ export default {
 
 .mobile {
     .item {
-        padding: 13px 0 10px 0;
+        padding: 13px 0 10px;
     }
 }
 

src/components/ToggleSection.vue

@@ -49,7 +49,7 @@ export default {
 <style lang="scss" scoped>
 @import "../assets/vars.scss";
 
-h5:after {
+h5::after {
     content: "";
     display: block;
     width: 50%;

src/components/TwoFADialog.vue

@@ -46,7 +46,7 @@
                                     <input v-model="token" type="text" maxlength="6" class="form-control">
                                     <button class="btn btn-outline-primary" type="button" @click="verifyToken()">{{ $t("Verify Token") }}</button>
                                 </div>
-                                <p v-show="tokenValid" class="mt-2" style="color: green">{{ $t("tokenValidSettingsMsg") }}</p>
+                                <p v-show="tokenValid" class="mt-2" style="color: green;">{{ $t("tokenValidSettingsMsg") }}</p>
                             </div>
                         </div>
                     </div>

src/components/settings/About.vue

@@ -44,6 +44,7 @@ export default {
 .logo {
     margin: 4em 1em;
 }
+
 .update-link {
     font-size: 0.9em;
 }

src/components/settings/Backup.vue

@@ -69,7 +69,7 @@
 
             <div class="mb-2">
                 <input
-                    id="importBackup"
+                    id="import-backend"
                     type="file"
                     class="form-control"
                     accept="application/json"
@@ -94,7 +94,7 @@
             <div
                 v-if="importAlert"
                 class="alert alert-danger mt-3"
-                style="padding: 6px 16px"
+                style="padding: 6px 16px;"
             >
                 {{ importAlert }}
             </div>
@@ -159,7 +159,7 @@ export default {
 
         importBackup() {
             this.processing = true;
-            let uploadItem = document.getElementById("importBackup").files;
+            let uploadItem = document.getElementById("import-backend").files;
 
             if (uploadItem.length <= 0) {
                 this.processing = false;
@@ -198,7 +198,7 @@ export default {
 @import "../../assets/vars.scss";
 
 .dark {
-    #importBackup {
+    #import-backend {
         &::file-selector-button {
             color: $primary;
             background-color: $dark-bg;

src/components/settings/General.vue

@@ -189,4 +189,3 @@ export default {
 };
 </script>
 
-<style></style>

src/components/settings/MonitorHistory.vue

@@ -129,5 +129,3 @@ export default {
     },
 };
 </script>
-
-<style></style>

src/components/settings/Security.vue

@@ -355,7 +355,7 @@ export default {
 <style lang="scss" scoped>
 @import "../../assets/vars.scss";
 
-h5:after {
+h5::after {
     content: "";
     display: block;
     width: 50%;

src/pages/ManageStatusPage.vue

@@ -92,7 +92,6 @@ export default {
         }
 
         .info {
-
             .title {
                 font-weight: bold;
                 font-size: 20px;

src/pages/StatusPage.vue

@@ -836,7 +836,7 @@ footer {
 
 .incident {
     .content {
-        &[contenteditable=true] {
+        &[contenteditable="true"] {
             min-height: 60px;
         }
     }