Bump the stylelint group with 2 updates

package.json

@@ -118,8 +118,8 @@
     "rimraf": "^6.0.1",
     "sass": "^1.77.8",
     "sass-loader": "^14.2.1",
-    "stylelint": "^16.6.1",
-    "stylelint-config-sass-guidelines": "^11.1.0",
+    "stylelint": "^16.7.0",
+    "stylelint-config-sass-guidelines": "^12.0.0",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-high-performance-animation": "^1.10.0",
     "stylelint-use-logical-spec": "^5.0.1",

src/renderer/App.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: Roboto;
-  src: url("assets/font/Roboto-Regular.ttf");
+  src: url('assets/font/Roboto-Regular.ttf');
 }
 
 .app {
@@ -45,11 +45,13 @@
   overflow-wrap: break-word;
 }
 
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .15s;
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s;
 }
 
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+.fade-enter,
+.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
 

src/renderer/components/experimental-settings/experimental-settings.css

@@ -1,5 +1,5 @@
 .experimental-warning {
   text-align: center;
   font-weight: bold;
-  padding-inline: 4% 4%
+  padding-inline: 4%;
 }

src/renderer/components/ft-age-restricted/ft-age-restricted.css

@@ -8,7 +8,8 @@
   padding-block: 20px;
 }
 
-.message, .frown {
+.message,
+.frown {
   color: var(--primary-text-color);
   background-color: var(--card-bg-color);
   padding-inline: 0;

src/renderer/components/ft-button/ft-button.css

@@ -34,7 +34,7 @@
 }
 
 .ripple::after {
-  content: "";
+  content: '';
   display: block;
   position: absolute;
   inline-size: 100%;
@@ -47,11 +47,11 @@
   background-position: 50%;
   transform: scale(10, 10);
   opacity: 0;
-  transition: transform .5s, opacity 1s;
+  transition: transform 0.5s, opacity 1s;
 }
 
 .ripple:active::after {
   transform: scale(0, 0);
-  opacity: .3;
+  opacity: 0.3;
   transition: 0s;
 }

src/renderer/components/ft-channel-bubble/ft-channel-bubble.css

@@ -34,7 +34,7 @@
 }
 
 .icon {
-  color: #EEE;
+  color: #eee;
   font-size: 25px;
   position: absolute;
   inset-block-start: 12px;

src/renderer/components/ft-checkbox-list/ft-checkbox-list.css

@@ -1,5 +1,5 @@
 /* stylelint-disable no-descending-specificity */
-.pure-checkbox input[type="checkbox"] {
+.pure-checkbox input[type='checkbox'] {
   border: 0;
   clip: rect(0 0 0 0);
   block-size: 1px;
@@ -10,13 +10,14 @@
   inline-size: 1px;
 }
 
-.pure-checkbox input[type="checkbox"]:focus + label::before, .pure-checkbox input[type="checkbox"]:hover + label::before {
+.pure-checkbox input[type='checkbox']:focus + label::before,
+.pure-checkbox input[type='checkbox']:hover + label::before {
   border: 2px solid var(--primary-color);
 }
 
-.pure-checkbox input[type="checkbox"]:active + label::before { transition-duration: 0s; }
+.pure-checkbox input[type='checkbox']:active + label::before { transition-duration: 0s; }
 
-.pure-checkbox input[type="checkbox"] + label {
+.pure-checkbox input[type='checkbox'] + label {
   position: relative;
   padding-inline-start: 2em;
   user-select: none;
@@ -25,7 +26,7 @@
   margin-block-start: 10px;
 }
 
-.pure-checkbox input[type="checkbox"] + label::before {
+.pure-checkbox input[type='checkbox'] + label::before {
   box-sizing: content-box;
   content: '';
   color: var(--primary-text-color);
@@ -40,7 +41,7 @@
   transition: all 0.4s ease;
 }
 
-.pure-checkbox input[type="checkbox"] + label::after {
+.pure-checkbox input[type='checkbox'] + label::after {
   box-sizing: content-box;
   border-style: solid;
   border-image: none;
@@ -58,34 +59,35 @@
   transition: transform 200ms ease-out;
 }
 
-.pure-checkbox input[type="checkbox"]:disabled + label::before { border-color: #ccc; }
+.pure-checkbox input[type='checkbox']:disabled + label::before { border-color: #ccc; }
 
-.pure-checkbox input[type="checkbox"]:disabled:focus + label::before, .pure-checkbox input[type="checkbox"]:disabled:hover + label::before { background-color: inherit; }
+.pure-checkbox input[type='checkbox']:disabled:focus + label::before,
+.pure-checkbox input[type='checkbox']:disabled:hover + label::before { background-color: inherit; }
 
-.pure-checkbox input[type="checkbox"]:disabled:checked + label::before { background-color: #ccc; }
+.pure-checkbox input[type='checkbox']:disabled:checked + label::before { background-color: #ccc; }
 
-.pure-checkbox input[type="checkbox"]:checked + label::after {
+.pure-checkbox input[type='checkbox']:checked + label::after {
   content: '';
   transform: rotate(-45deg) scale(1);
   transition: transform 200ms ease-out;
 }
 
-.pure-checkbox input[type="checkbox"]:checked + label::before {
+.pure-checkbox input[type='checkbox']:checked + label::before {
   animation: borderscale 200ms ease-in;
 }
 
 @keyframes
-borderscale {  50% {
- box-shadow: 0 0 0 2px var(--primary-text-color);
-}
+  borderscale {  50% {
+    box-shadow: 0 0 0 2px var(--primary-text-color);
+  }
 }
 
 .checkboxTitle {
   margin-block: 0;
 }
 
 @media only screen and (width <= 680px) {
-  .pure-checkbox input[type="checkbox"] + label {
+  .pure-checkbox input[type='checkbox'] + label {
     margin-block-start: 3px;
   }
 }

src/renderer/components/ft-community-poll/ft-community-poll.css

@@ -65,6 +65,7 @@
   cursor: pointer;
 }
 
-.reveal-answer:hover, .reveal-answer:focus {
-  background-color: var(--side-nav-hover-color)
+.reveal-answer:hover,
+.reveal-answer:focus {
+  background-color: var(--side-nav-hover-color);
 }

src/renderer/components/ft-icon-button/ft-icon-button.scss

@@ -98,7 +98,9 @@
     }
   }
 
-  &.favorite, &.favorite:hover, &.favorite:focus-visible {
+  &.favorite,
+  &.favorite:hover,
+  &.favorite:focus-visible {
     &:not(.disabled) {
       color: var(--favorite-icon-color);
     }

src/renderer/components/ft-input/ft-input.css

@@ -3,14 +3,14 @@
   position: relative;
 }
 
- body[dir='rtl'] .ft-input-component.search.showClearTextButton .inputAction {
+body[dir='rtl'] .ft-input-component.search.showClearTextButton .inputAction {
   inset-inline-end: -30px;
- }
+}
 
- body[dir='rtl'] .ft-input-component.search.clearTextButtonVisible .inputAction,
- body[dir='rtl'] .ft-input-component.search.showClearTextButton:focus-within .inputAction {
+body[dir='rtl'] .ft-input-component.search.clearTextButtonVisible .inputAction,
+body[dir='rtl'] .ft-input-component.search.showClearTextButton:focus-within .inputAction {
   inset-inline-end: 0;
- }
+}
 
 .ft-input-component.search.showClearTextButton {
   padding-inline-start: 30px;
@@ -41,7 +41,8 @@
   opacity: 1;
 }
 
-.disabled label, .disabled .ft-input{
+.disabled label,
+.disabled .ft-input {
   opacity: 0.4;
   cursor: not-allowed;
 }
@@ -82,7 +83,7 @@
 }
 
 .forceTextColor .clearInputTextButton {
-  color: #EEE;
+  color: #eee;
 }
 
 .forceTextColor .clearInputTextButton:active {
@@ -109,7 +110,7 @@
 }
 
 .forceTextColor .ft-input {
-  color: #EEE;
+  color: #eee;
   background-color: var(--primary-input-color);
 }
 
@@ -119,7 +120,7 @@
 }
 
 .forceTextColor ::placeholder {
-  color: #EEE;
+  color: #eee;
 }
 
 .inputWrapper {
@@ -153,7 +154,7 @@
 }
 
 .forceTextColor .inputAction {
-  color: #EEE;
+  color: #eee;
 }
 
 .ft-input-component.showActionButton .ft-input {

src/renderer/components/ft-loader/ft-loader.css

@@ -36,37 +36,37 @@
 */
 
 .spinner {
-    inline-size: 40px;
-    block-size: 40px;
-    position: relative;
-    margin-block: 100px;
-    margin-inline: auto;
+  inline-size: 40px;
+  block-size: 40px;
+  position: relative;
+  margin-block: 100px;
+  margin-inline: auto;
 }
 
 .double-bounce1,
 .double-bounce2 {
-    inline-size: 100%;
-    block-size: 100%;
-    border-radius: 50%;
-    opacity: 0.6;
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    background-color: var(--primary-color);
-    animation: sk-bounce 2.0s infinite ease-in-out;
+  inline-size: 100%;
+  block-size: 100%;
+  border-radius: 50%;
+  opacity: 0.6;
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  background-color: var(--primary-color);
+  animation: sk-bounce 2s infinite ease-in-out;
 }
 
 .double-bounce2 {
-    animation-delay: -1.0s;
+  animation-delay: -1s;
 }
 
 @keyframes sk-bounce {
-    0%,
-    100% {
-        transform: scale(0.0);
-    }
+  0%,
+  100% {
+    transform: scale(0);
+  }
 
-    50% {
-        transform: scale(1.0);
-    }
+  50% {
+    transform: scale(1);
+  }
 }

src/renderer/components/ft-notification-banner/ft-notification-banner.css

@@ -7,7 +7,7 @@
   color: var(--text-with-accent-color);
   */
   margin: 4px;
-	padding: 16px;
+  padding: 16px;
   padding-block: 3px 5px;
   padding-inline: 16px;
   box-shadow: 0 1px 2px rgb(0 0 0 / 10%);

src/renderer/components/ft-profile-channel-list/ft-profile-channel-list.css

@@ -1,4 +1,5 @@
-h2, .selectedCount {
+h2,
+.selectedCount {
   text-align: center;
 }
 

src/renderer/components/ft-profile-edit/ft-profile-edit.css

@@ -11,7 +11,8 @@ h3 {
   color: var(--tertiary-text-color);
 }
 
-.profileName, .colorSelection {
+.profileName,
+.colorSelection {
   margin: auto;
   inline-size: 350px;
 }

src/renderer/components/ft-profile-selector/ft-profile-selector.css

@@ -40,13 +40,13 @@
   profile list max height: 90% of window size - 100 px. It's scaled to be 340px on 800x600 resolution. 
   Offset of 100px is to compensate for the fixed size of elements above the list, which takes more screen space on lower resolutions
   */
-  max-block-size: calc(90vh - 100px); 
+  max-block-size: calc(90vh - 100px);
   min-block-size: 340px;
 }
 
 /* Navbar changes position to horizontal with this media rule.
 Height adjust for profile list so it won't cover navbar.  */
-@media only screen and (width <= 680px){
+@media only screen and (width <= 680px) {
   .profileWrapper {
     max-block-size: calc(95vh - 180px);
   }

src/renderer/components/ft-prompt/ft-prompt.css

@@ -36,9 +36,9 @@
 }
 
 .promptCard.flex-column {
-    /* Some child(ren) will grow vertically */
-    display: flex;
-    flex-direction: column;
+  /* Some child(ren) will grow vertically */
+  display: flex;
+  flex-direction: column;
 }
 
 .promptCard.slim {