@waline/client 2.14.4 → 2.14.6

package/src/styles/card.scss

@@ -1,25 +1,9 @@
 .wl-cards {
-  .wl-item {
-    position: relative;
-    display: flex;
-    padding: 0.5em;
-
-    &:last-child .wl-card {
-      border-bottom: none;
-    }
-  }
-
-  .wl-card {
-    .wl-item {
-      padding-right: 0;
-    }
-  }
-
   .wl-user {
     --avatar-size: var(--waline-avatar-size);
 
     position: relative;
-    margin-right: 0.75em;
+    margin-inline-end: 0.75em;
 
     @media (max-width: 720px) {
       --avatar-size: var(--waline-m-avatar-size);
@@ -35,7 +19,7 @@
     .verified-icon {
       position: absolute;
       top: calc(var(--avatar-size) * 3 / 4);
-      left: calc(var(--avatar-size) * 3 / 4);
+      inset-inline-start: calc(var(--avatar-size) * 3 / 4);
 
       border-radius: 50%;
 
@@ -45,6 +29,16 @@
   }
 }
 
+.wl-card-item {
+  position: relative;
+  display: flex;
+  padding: 0.5em;
+
+  .wl-card-item {
+    padding-inline-end: 0;
+  }
+}
+
 .wl-card {
   flex: 1;
   width: 0;
@@ -52,11 +46,16 @@
   border-bottom: 1px dashed var(--waline-border-color);
 
   &:first-child {
-    margin-left: 1em;
+    margin-inline-start: 1em;
+  }
+
+  .wl-card-item:last-child & {
+    border-bottom: none;
   }
 
   .wl-head {
-    overflow: hidden; // bfc to fix https://github.com/walinejs/waline/issues/1415
+    // bfc to fix https://github.com/walinejs/waline/issues/1415
+    overflow: hidden;
     line-height: 1.5;
   }
 
@@ -65,7 +64,7 @@
 
     display: inline-block;
 
-    margin-right: 0.5em;
+    margin-inline-end: 0.5em;
 
     font-weight: bold;
     font-size: 0.875em;
@@ -86,7 +85,7 @@
   .wl-badge {
     display: inline-block;
 
-    margin-right: 1em;
+    margin-inline-end: 1em;
     padding: 0 0.3em;
     border: 1px solid var(--waline-badge-color);
     border-radius: 4px;
@@ -97,7 +96,7 @@
   }
 
   .wl-time {
-    margin-right: 0.875em;
+    margin-inline-end: 0.875em;
     color: var(--waline-info-color);
     font-size: 0.75em;
   }
@@ -109,7 +108,7 @@
     > span {
       display: inline-block;
 
-      margin-right: 0.25em;
+      margin-inline-end: 0.25em;
       padding: 2px 4px;
       border-radius: 0.2em;
 
@@ -128,6 +127,10 @@
   .wl-comment-actions {
     float: right;
     line-height: 1;
+
+    [dir='rtl'] & {
+      float: left;
+    }
   }
 
   .wl-delete,
@@ -179,7 +182,7 @@
         position: absolute;
         top: 0;
         bottom: 3.15em;
-        left: 0;
+        inset-inline-start: 0;
         z-index: 999;
 
         display: block;
@@ -194,7 +197,7 @@
 
         position: absolute;
         bottom: 0;
-        left: 0;
+        inset-inline-start: 0;
         z-index: 999;
 
         display: block;
@@ -232,19 +235,19 @@
       border-radius: 0;
 
       &:first-child {
-        border-right: 0;
+        border-inline-end: 0;
         border-radius: 0.5em 0 0 0.5em;
       }
 
       &:last-child {
-        border-left: 0;
+        border-inline-start: 0;
         border-radius: 0 0.5em 0.5em 0;
       }
     }
   }
 
   .wl-quote {
-    border-left: 1px dashed rgb(237 237 237 / 50%);
+    border-inline-start: 1px dashed rgb(237 237 237 / 50%);
 
     .wl-user {
       --avatar-size: var(--waline-m-avatar-size);

package/src/styles/emoji.scss

@@ -1,7 +1,7 @@
 .wl-emoji-popup {
   position: absolute;
   top: 100%;
-  left: 1.25em;
+  inset-inline-start: 1.25em;
   z-index: 10;
 
   max-width: 526px;

package/src/styles/gif.scss

@@ -1,7 +1,7 @@
 .wl-gif-popup {
   position: absolute;
   top: 100%;
-  left: 1.25em;
+  inset-inline-start: 1.25em;
   z-index: 10;
 
   width: calc(100% - 3em);

package/src/styles/highlight.scss

@@ -15,8 +15,11 @@
     code {
       padding: 0;
       border-radius: 0;
+
       background: transparent !important;
       color: #bbb;
+
+      direction: ltr;
     }
   }
 

package/src/styles/layout.scss

@@ -20,7 +20,7 @@
   span.wl-tex {
     display: inline-block;
 
-    margin-right: 0.25em;
+    margin-inline-end: 0.25em;
     padding: 2px 4px;
     border-radius: 0.2em;
 
@@ -74,7 +74,7 @@
   padding: 0.5em 0;
   color: var(--waline-light-grey);
   font-size: var(--waline-info-font-size);
-  text-align: right;
+  text-align: end;
 }
 
 .wl-meta-head {
@@ -84,22 +84,22 @@
   padding: 0.375em;
 }
 
-ul.wl-sort {
+.wl-sort {
   margin: 0;
   list-style-type: none;
-}
 
-.wl-sort li {
-  display: inline-block;
-  color: var(--waline-info-color);
-  font-size: 0.75em;
-  cursor: pointer;
-}
+  li {
+    display: inline-block;
+    color: var(--waline-info-color);
+    font-size: 0.75em;
+    cursor: pointer;
 
-.wl-sort li + li {
-  margin-left: 1em;
-}
+    &.active {
+      color: var(--waline-theme-color);
+    }
 
-.wl-sort li.active {
-  color: var(--waline-theme-color);
+    + li {
+      margin-inline-start: 1em;
+    }
+  }
 }

package/src/styles/meta.scss

@@ -21,7 +21,7 @@ $safari-icon: '<svg viewBox="0 0 512 512" fill="#999"><path d="m274.69 274.69-37
 
     width: 1em;
     height: 1em;
-    margin-right: 2px;
+    margin-inline-end: 2px;
 
     background-position: center center;
     background-repeat: no-repeat;

package/src/styles/normalize.scss

@@ -1,6 +1,10 @@
 [data-waline] {
   font-size: var(--waline-font-size);
-  text-align: left;
+  text-align: start;
+
+  [dir='rtl'] & {
+    direction: rtl;
+  }
 
   * {
     box-sizing: content-box;
@@ -88,7 +92,7 @@
   blockquote {
     margin: 0.5em 0;
     padding: 0.5em 0 0.5em 1em;
-    border-left: 8px solid var(--waline-bq-color);
+    border-inline-start: 8px solid var(--waline-bq-color);
     color: var(--waline-dark-grey);
 
     > p {
@@ -98,7 +102,7 @@
 
   ol,
   ul {
-    margin-left: 1.25em;
+    margin-inline-start: 1.25em;
     padding: 0;
   }
 

package/src/styles/panel.scss

@@ -7,7 +7,7 @@
 .wl-close {
   position: absolute;
   top: -4px;
-  right: -4px;
+  inset-inline-end: -4px;
 
   padding: 0;
   border: none;
@@ -28,7 +28,7 @@
 .wl-logout-btn {
   position: absolute;
   top: -10px;
-  right: -10px;
+  inset-inline-end: -10px;
 
   padding: 3px;
   border: none;
@@ -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;
 
@@ -275,7 +275,7 @@
   }
 
   button {
-    margin-left: 0.75em;
+    margin-inline-start: 0.75em;
 
     svg {
       display: block;

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;
-    right: -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;
-    right: -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 {
@@ -37,7 +16,7 @@
 
     overflow: hidden;
 
-    margin-right: 10px;
+    margin-inline-end: 10px;
     border-radius: 4px;
 
     line-height: 0;
@@ -50,8 +29,8 @@
 
   .wl-user-badge {
     position: absolute;
-    right: 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;
@@ -76,7 +76,7 @@
     display: inline-block;
     vertical-align: text-top;
 
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
     padding: 0 0.3em;
     border: 1px solid var(--waline-badge-color);
     border-radius: 4px;
@@ -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;
-  }
 }