@waline/client 2.14.5 → 2.14.6

package/src/styles/panel.scss

@@ -152,21 +152,6 @@
   }
 }
 
-.wl-editor,
-.wl-input {
-  max-width: 100%;
-  border: none;
-
-  color: var(--waline-color);
-  outline: none;
-
-  transition: all 0.25s ease;
-
-  &:focus {
-    background: var(--waline-bgcolor-light);
-  }
-}
-
 .wl-editor {
   position: relative;
 
@@ -182,6 +167,21 @@
   resize: vertical;
 }
 
+.wl-editor,
+.wl-input {
+  max-width: 100%;
+  border: none;
+
+  color: var(--waline-color);
+  outline: none;
+
+  transition: all 0.25s ease;
+
+  &:focus {
+    background: var(--waline-bgcolor-light);
+  }
+}
+
 .wl-preview {
   padding: 0 0.5em 0.5em;
 

package/src/styles/reaction.scss

@@ -1,100 +1,103 @@
 .wl-reaction {
+  overflow: auto hidden;
   margin-bottom: 1.75em;
   text-align: center;
-  overflow-x: auto;
 
   img {
     width: 100%;
     height: 100%;
     transition: all 250ms ease-in-out;
   }
+}
 
-  .reaction-title {
-    margin: 16px auto;
-    font-size: 18px;
-    font-weight: bold;
-  }
+.wl-reaction-title {
+  margin: 16px auto;
+  font-weight: bold;
+  font-size: 18px;
+}
 
-  .reaction-list {
-    padding: 8px;
-    display: flex;
-    flex-direction: row;
-    gap: 16px;
-    justify-content: center;
+.wl-reaction-list {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  justify-content: center;
 
-    margin: 0;
+  margin: 0;
+  padding: 8px;
 
-    list-style-type: none;
+  list-style-type: none;
 
-    @media (max-width: 580px) {
-      gap: 12px;
-    }
+  @media (max-width: 580px) {
+    gap: 12px;
   }
 
-  .reaction-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    cursor: pointer;
-
-    &:hover img,
-    &.active img {
-      transform: scale(1.15);
-    }
-
-    &.active {
-      .reaction-votes {
-        background: var(--waline-theme-color);
-        color: var(--waline-bgcolor);
-      }
-
-      .reaction-text {
-        color: var(--waline-theme-color);
-      }
-    }
+  // normalize reset
+  [data-waline] & {
+    margin-inline-start: 0;
   }
+}
 
-  .reaction-img {
-    position: relative;
-    width: 42px;
-    height: 42px;
+.wl-reaction-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
 
-    @media (max-width: 580px) {
-      width: 32px;
-      height: 32px;
-    }
+  &:hover img,
+  &.active img {
+    transform: scale(1.15);
   }
+}
 
-  .reaction-loading {
-    position: absolute;
-    top: -4px;
-    inset-inline-end: -5px;
-
-    width: 18px;
-    height: 18px;
+.wl-reaction-img {
+  position: relative;
+  width: 42px;
+  height: 42px;
 
-    color: var(--waline-theme-color);
+  @media (max-width: 580px) {
+    width: 32px;
+    height: 32px;
   }
+}
 
-  .reaction-votes {
-    position: absolute;
-    top: -9px;
-    inset-inline-end: -9px;
+.wl-reaction-loading {
+  position: absolute;
+  top: -4px;
+  inset-inline-end: -5px;
 
-    min-width: 1em;
-    padding: 2px;
-    border: 1px solid var(--waline-theme-color);
-    border-radius: 1em;
+  width: 18px;
+  height: 18px;
 
-    background: var(--waline-bgcolor);
-    color: var(--waline-theme-color);
+  color: var(--waline-theme-color);
+}
+
+.wl-reaction-votes {
+  position: absolute;
+  top: -9px;
+  inset-inline-end: -9px;
+
+  min-width: 1em;
+  padding: 2px;
+  border: 1px solid var(--waline-theme-color);
+  border-radius: 1em;
+
+  background: var(--waline-bgcolor);
+  color: var(--waline-theme-color);
 
-    font-weight: 700;
-    font-size: 0.75em;
-    line-height: 1;
+  font-weight: 700;
+  font-size: 0.75em;
+  line-height: 1;
+
+  .wl-reaction-item.active & {
+    background: var(--waline-theme-color);
+    color: var(--waline-bgcolor);
   }
+}
 
-  .reaction-text {
-    font-size: 0.875em;
+.wl-reaction-text {
+  font-size: 0.875em;
+
+  .wl-reaction-item.active & {
+    color: var(--waline-theme-color);
   }
 }

package/src/styles/user-list.scss

@@ -2,27 +2,6 @@
   padding: 0;
   list-style: none;
 
-  .wl-user-item {
-    margin: 10px 0;
-
-    &:nth-child(1) .wl-user-badge {
-      background: var(--waline-rank-gold-bgcolor, #fa3939);
-      color: var(--waline-white);
-      font-weight: bold;
-    }
-
-    &:nth-child(2) .wl-user-badge {
-      background: var(--waline-rank-silver-bgcolor, #fb811c);
-      color: var(--waline-white);
-      font-weight: bold;
-    }
-
-    &:nth-child(3) .wl-user-badge {
-      background: var(--waline-rank-copper-bgcolor, #feb207);
-      color: var(--waline-white);
-    }
-  }
-
   a,
   a:hover,
   a:visited {
@@ -50,8 +29,8 @@
 
   .wl-user-badge {
     position: absolute;
-    inset-inline-end: 0;
     bottom: 0;
+    inset-inline-end: 0;
 
     min-width: 0.7em;
     height: 1.5em;
@@ -67,6 +46,27 @@
     text-align: center;
   }
 
+  .wl-user-item {
+    margin: 10px 0;
+
+    &:nth-child(1) .wl-user-badge {
+      background: var(--waline-rank-gold-bgcolor, #fa3939);
+      color: var(--waline-white);
+      font-weight: bold;
+    }
+
+    &:nth-child(2) .wl-user-badge {
+      background: var(--waline-rank-silver-bgcolor, #fb811c);
+      color: var(--waline-white);
+      font-weight: bold;
+    }
+
+    &:nth-child(3) .wl-user-badge {
+      background: var(--waline-rank-copper-bgcolor, #feb207);
+      color: var(--waline-white);
+    }
+  }
+
   .wl-user-meta {
     display: inline-block;
     vertical-align: top;
@@ -91,6 +91,12 @@
   padding: 0;
   list-style: none;
 
+  // stylelint-disable-next-line no-descending-specificity
+  .wl-user-badge,
+  .wl-user-meta {
+    display: none;
+  }
+
   .wl-user-item {
     position: relative;
     display: inline-block;
@@ -150,9 +156,4 @@
       height: var(--waline-user-avatar-size, 48px);
     }
   }
-
-  .wl-user-badge,
-  .wl-user-meta {
-    display: none;
-  }
 }