artalk 2.0.4 → 2.1.1

package/src/style/comment.less

@@ -32,6 +32,10 @@
     &:hover {
       background: @color-bg-grey;
     }
+
+    .atk-comment-more-hide:after {
+      background: transparent !important;
+    }
   }
 
   &:last-child {
@@ -69,10 +73,15 @@
         align-items: center;
 
         .badge() {
+          color: @color-meta;
           background: @color-bg-grey;
           padding: 0 6px;
           line-height: 18px;
           border-radius: 3px;
+
+          &:not(:last-child) {
+            margin-right: 6px;
+          }
         }
 
         & > span {
@@ -84,22 +93,25 @@
             margin-right: 6px;
           }
 
-          &.atk-nick {
+          &.atk-nick, &.atk-nick > a {
             font-size: 14px;
-
-            & > a {
-              color: @color-main;
-              text-decoration: none;
-            }
+            color: @color-main;
+            text-decoration: none;
           }
+        }
 
-          &.atk-badge {
-            .badge();
-            background: #FF6C00;
-            color: #FFF;
+        .atk-badge {
+          .badge();
+          background: #FF6C00;
+          color: #FFF;
+        }
+
+        .atk-ua-wrap {
+          @media only screen and (max-width: 768px) {
+            display: block;
           }
 
-          &.atk-ua {
+          .atk-ua {
             .badge();
           }
         }
@@ -132,6 +144,10 @@
           & > *:last-child {
             margin-bottom: 0;
           }
+
+          .atk-more-hide-open-btn {
+            bottom: 5px;
+          }
         }
 
         & > .atk-pending {
@@ -148,6 +164,7 @@
           padding: 5px 15px;
           border-left: 3px solid #eee;
           margin-bottom: 10px;
+          position: relative;
 
           & > .atk-meta {
             font-size: 15px;
@@ -184,19 +201,6 @@
             }
           }
         }
-
-        &.atk-read-more-mask:after {
-          pointer-events: none;
-          position: absolute;
-          z-index: 1;
-          display: block;
-          overflow: hidden;
-          width: 100%;
-          content: " ";
-          bottom: 0;
-          height: 41px;
-          background: linear-gradient(180deg, hsla(0,0%,100%,0), hsla(0,0%,100%,1));
-        }
       }
 
       & > .atk-footer {
@@ -251,6 +255,10 @@
         width: 36px;
         height: 36px;
       }
+
+      & > .atk-comment-main {
+        margin-left: 47px;
+      }
     }
   }
 
@@ -262,4 +270,32 @@
       .comment-small-size()
     }
   }
+
+  .atk-comment-more-hide:after {
+    position: absolute;
+    z-index: 1;
+    display: block;
+    overflow: hidden;
+    width: 100%;
+    content: " ";
+    bottom: 0;
+    height: 80px;
+    background: @color-gradient;
+  }
+
+  .atk-more-hide-open-btn {
+    z-index: 10;
+    position: absolute;
+    left: 50%;
+    bottom: 10px;
+    transform: translateX(-50%);
+    cursor: pointer;
+    border: 1px solid @color-border;
+    border-radius: @block-radius;
+    background: @color-bg;
+    padding: 1px 20px;
+    font-size: 15px;
+    color: @color-meta;
+    user-select: none;
+  }
 }

package/src/style/editor.less

@@ -20,6 +20,7 @@
     padding-bottom: 0;
 
     input {
+      font-size: 14px;
       border: 2px solid transparent;
       transition: color .3s ease;
       flex: 1;
@@ -38,6 +39,7 @@
 
   & > .atk-editor-textarea-wrap {
     .atk-editor-textarea {
+      font-size: 15px;
       color: @color-font;
       background-color: @color-bg;
       margin-top: 2px;
@@ -186,6 +188,7 @@
       transition: opacity .3s ease-in-out;
       outline: none;
       font-size: @font-size;
+      margin: 0;
 
       &:active {
         opacity: .9;

package/src/style/item-text-editor.less

@@ -0,0 +1,35 @@
+.atk-item-text-editor-layer {
+  z-index: 999;
+  background: @color-bg;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .atk-edit-form {
+    flex: auto;
+    padding-left: 20px;
+
+    input {
+      font-size: 17px;
+      width: 100%;
+      padding: 3px 5px;
+      border: 0;
+      border-bottom: 1px solid @color-border;
+      outline: none;
+      background: transparent;
+
+      &.atk-invalid {}
+    }
+  }
+
+  .atk-actions {
+    .atk-list-btn-actions();
+
+    .atk-yes-btn.atk-disabled {}
+  }
+}

package/src/style/list.less

@@ -66,16 +66,22 @@
   }
 
   & > .atk-list-footer {
-    position: relative;
-    overflow: hidden;
+    position: absolute;
+    bottom: 5px;
+    right: 0;
+
+    @media only screen and (max-width: 768px) {
+      position: relative;
+      margin-top: 10px;
+      text-align: center;
+    }
 
     .atk-copyright {
       display: block;
-      font-size: 13px;
-      float: right;
-      color: @color-main;
-      padding: 0 10px;
-      border-radius: 2px;
+      font-size: 12px;
+      color: @color-meta;
+      padding-right: 15px;
+      margin-top: 5px;
 
       a {
         color: @color-main;
@@ -94,36 +100,49 @@
 }
 
 .atk-list-read-more {
-  margin-bottom: 12px;
-  cursor: pointer;
-  user-select: none;
-  border: 1px solid @color-border;
-  padding: 0 20px;
-  font-size: @font-size;
-  border-radius: @block-radius;
-  display: flex;
-  height: 30px;
-  flex-direction: row;
-  place-content: center;
-  align-items: center;
-
-  &.atk-err > .atk-text {
-    color: @color-red !important;
-  }
+  border-top: 1px dashed @color-border;
+  margin-top: 20px;
+  padding-bottom: 20px;
 
-  & > .atk-loading-icon {
-    height: 15px;
-    width: 15px;
+  @media only screen and (max-width: 768px) {
+    padding-bottom: 10px;
   }
 
-  & > .atk-text {
-    color: @color-meta;
-  }
+  .atk-list-read-more-inner {
+    cursor: pointer;
+    user-select: none;
+    padding: 0 15px;
+    font-size: @font-size;
+    border-radius: @block-radius;
+    border: 1px solid transparent;
+    display: flex;
+    height: 30px;
+    flex-direction: row;
+    place-content: center;
+    align-items: center;
+    width: 120px;
+    margin: 0 auto;
+    margin-top: -15px;
+    background: @color-bg;
+    border-color: @color-border;
+
+    &.atk-err > .atk-text {
+      color: @color-red !important;
+    }
+
+    & > .atk-loading-icon {
+      height: 15px;
+      width: 15px;
+    }
 
-  &:hover {
-    background-color: @color-border;
     & > .atk-text {
-      color: @color-main;
+      color: @color-meta;
+    }
+
+    &:hover {
+      & > .atk-text {
+        color: @color-main;
+      }
     }
   }
 }

package/src/style/main.less

@@ -167,6 +167,41 @@
   0% {}
 }
 
+i.atk-icon {
+  width: 20px;
+  height: 20px;
+  background-color: @color-deep;
+  background-size: contain;
+  background-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  mask-position: center;
+}
+
+.atk-icon-sync {
+  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.99133 4.87635C2.22512 7.64257 2.22512 12.1275 4.99133 14.8937C6.04677 15.9491 7.3524 16.6019 8.71732 16.8519' stroke='%234E5969' stroke-width='2'/%3E%3Cpath d='M14.4179 15.4815L15.0072 14.8922C17.7734 12.126 17.7734 7.64107 15.0072 4.87486C13.9518 3.81942 12.6461 3.16668 11.2812 2.91664' stroke='%234E5969' stroke-width='2'/%3E%3Cpath d='M6.17106 4.99252L5.58181 4.40327L4.99255 3.81401H6.17106V4.99252Z' fill='%23C4C4C4' stroke='%234E5969' stroke-width='2'/%3E%3Cpath d='M13.8299 15.0084L14.4192 15.5976L15.0084 16.1869H13.8299V15.0084Z' fill='%23C4C4C4' stroke='%234E5969' stroke-width='2'/%3E%3C/svg%3E");
+}
+
+.atk-icon-del {
+  background-color: @color-red !important;
+  mask-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.29167 5.04166L4.81251 5.04166M4.81251 5.04166L4.81251 18.3333C4.81251 18.5865 5.01771 18.7917 5.27084 18.7917L16.7292 18.7917C16.9823 18.7917 17.1875 18.5865 17.1875 18.3333V5.04166M4.81251 5.04166L7.33334 5.04166M17.1875 5.04166L19.7083 5.04166M17.1875 5.04166L14.6667 5.04166M7.33334 5.04166V3.20833L14.6667 3.20833V5.04166M7.33334 5.04166L14.6667 5.04166' stroke='%23D06565' stroke-width='2'/%3E%3Cpath d='M9.16667 8.25V15.125M12.8333 8.25V15.125' stroke='%23D06565' stroke-width='2'/%3E%3C/svg%3E");
+}
+
+.atk-icon-edit {
+  mask-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.70618 4.08515L12.6081 7.06376M1.00041 13.021L11.7376 2L14.6392 4.97861L3.90274 16H1L1.00041 13.021Z' stroke='%234E5969' stroke-width='1.5'/%3E%3C/svg%3E");
+}
+
+.atk-icon-no, .atk-icon-close {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Cpath d='M19.8657 5.13431L12.5 12.5L5.13431 19.8657' stroke='%234E5969'/%3E%3Cpath d='M5.13431 5.13432L12.5 12.5L19.8657 19.8657' stroke='%234E5969'/%3E%3C/svg%3E");
+}
+
+.atk-icon-yes {
+  mask-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.7071 5.75533L9.92197 17.5404L3.29285 10.9113' stroke='%234E5969'/%3E%3C/svg%3E");
+}
+
+.atk-icon-plus {
+  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.08331 10H17.9166' stroke='%234E5969' stroke-width='2'/%3E%3Cpath d='M10 2.08334L10 17.9167' stroke='%234E5969' stroke-width='2'/%3E%3C/svg%3E");
+}
+
 /* Layer */
 .atk-error-layer {
   &:extend(.atk-full-layer);
@@ -176,9 +211,29 @@
     color: @color-red;
   }
 
+  .atk-warn-title {
+    color: @color-yellow;
+  }
+
+  .atk-error-title, .atk-warn-title {
+    display: inline-block;
+    padding: 0 15px;
+    margin-bottom: 20px;
+    font-size: 20px;
+    letter-spacing: -0.5px;
+  }
+
   .atk-error-text {
     text-align: center;
     padding: 0 20px;
+
+    * {
+      color: @color-deep;
+    }
+
+    a {
+      color: @color-meta;
+    }
   }
 }
 
@@ -216,7 +271,7 @@
       }
     }
 
-    & > .atk-layer-dialog-action {
+    & > .atk-layer-dialog-actions {
       display: flex;
       flex-direction: row;
 
@@ -296,3 +351,22 @@
     height: 100%;
   }
 }
+
+/* Common Action Btn */
+.atk-common-action-btn {
+  &.atk-btn-confirm {
+    color: @color-yellow !important;
+  }
+
+  &.atk-btn-warn {
+    color: @color-yellow !important;
+  }
+
+  &.atk-btn-error {
+    color: @color-red !important;
+  }
+
+  &.atk-btn-success {
+    color: @color-green !important;
+  }
+}

package/src/style/page-list.less

@@ -0,0 +1,50 @@
+.atk-page-list {
+  .atk-page-item {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    min-height: 120px;
+    align-items: center;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid @color-border;
+    }
+  }
+
+  .atk-page-main {
+    display: flex;
+    flex-direction: column;
+    flex: auto;
+    padding: 20px 30px;
+
+    .atk-title {
+      color: @color-font;
+      font-size: 21px;
+      margin-bottom: 10px;
+    }
+
+    .atk-sub {
+      color: @color-sub;
+      font-size: 14px;
+    }
+  }
+
+  .atk-page-main-actions {
+    .atk-list-text-actions();
+  }
+
+  .atk-page-actions {
+    .atk-list-btn-actions();
+  }
+
+  .atk-page-edit-layer {
+    z-index: 999;
+    background: @color-bg;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}

package/src/style/pagination.less

@@ -0,0 +1,58 @@
+.atk-pagination {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding: 10px 0;
+  position: relative;
+
+  & > .atk-btn,
+  & > .atk-input {
+    font-size: 15px;
+    height: 32px;
+    border: 1px solid @color-border;
+    border-radius: 3px;
+    padding: 0 5px;
+    text-align: center;
+    background: @color-bg;
+  }
+
+  & > .atk-btn {
+    user-select: none;
+    width: 70px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+      background: @color-bg-grey;
+    }
+
+    &.atk-disabled {
+      color: @color-sub;
+
+      &:hover {
+        cursor: default;
+        background: initial;
+      }
+    }
+  }
+
+  & > .atk-input {
+    background: transparent;
+    color: @color-font;
+    font-size: 18px;
+    width: 60px;
+    outline: none;
+
+    &:focus {
+      border-color: @color-main;
+    }
+  }
+
+  & > * {
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+}