artalk 2.1.0 → 2.1.4

package/src/style/editor.less

@@ -1,35 +1,32 @@
-.artalk > .atk-editor {
-  border: 1px solid @color-border;
-  border-radius: @block-radius;
-  margin-bottom: @block-margin;
-  overflow: hidden;
+.atk-main-editor {
+  @editor-padding: 10px;
+  z-index: 5;
   position: relative;
-  background: @color-bg;
+  overflow: hidden;
+  background: var(--at-color-bg);
+  border: 1px solid var(--at-color-border);
+  border-radius: @block-radius;
+  margin-bottom: 15px;
 
   @media only screen and (max-width: 768px) {
-    & > {
-      margin-bottom: @block-margin-mobile;
-    }
+    margin-bottom: 7px;
   }
 
-  & > .atk-editor-header {
+  & > .atk-header {
     display: flex;
     flex-direction: row;
-    padding: 0 @block-padding;
-    padding-top: calc(@block-padding / 2);
-    padding-bottom: 0;
+    padding: calc(@editor-padding / 2) @editor-padding 0;
 
     input {
-      font-size: 14px;
-      border: 2px solid transparent;
-      transition: color .3s ease;
       flex: 1;
+      width: 100%;
+      font-size: 14px;
       background: transparent;
+      border: 2px solid transparent;
       border-radius: calc(@block-radius / 2);
       padding: 6px 5px;
       resize: none;
       outline: none;
-      width: 100%;
 
       &:not(:last-child) {
         margin-right: 2px;
@@ -37,64 +34,50 @@
     }
   }
 
-  & > .atk-editor-textarea-wrap {
-    .atk-editor-textarea {
-      font-size: 15px;
-      color: @color-font;
-      background-color: @color-bg;
-      margin-top: 2px;
-      padding: @block-padding calc(10px + 5px);
+  & > .atk-textarea-wrap {
+    position: relative;
+
+    & > .atk-textarea {
       display: block;
+      overflow: hidden;
+      color: var(--at-color-font);
+      font-size: 15px;
+      background-color: var(--at-color-bg);
+      border: 2px solid transparent;
+      border-radius: calc(@block-radius / 2);
       width: 100%;
       min-height: 130px;
+      margin-top: 2px;
+      padding: @editor-padding calc(10px + 5px);
       resize: none;
       word-wrap: break-word;
-      border: 2px solid transparent;
-      border-radius: calc(@block-radius / 2);
       outline: none;
-      overflow: hidden;
     }
 
-    .atk-close-comment {
-      display: flex;
-      user-select: none;
-      // background: repeating-linear-gradient(145deg, #f2f2f2, #f2f2f2 15px, #fff 0, #fff 30px);
-      padding: 0;
-      position: relative;
-      text-align: center;
-      min-height: 30px;
-      border-top: 1px solid @color-border;
-      margin-top: 4px;
-      font-weight: 100;
+    & > .atk-comment-closed {
+      pointer-events: none;
+      color: var(--at-color-meta);
       font-size: 12px;
-      place-items: center;
-      justify-content: center;
-      place-content: flex-end;
-      flex-direction: row;
-      background: @color-bg;
-
-      & > span {
-        color: @color-meta;
-        border-radius: 2px;
-        margin-right: 14px;
-      }
-    }
-
-    .atk-send-reply-wrap {
-      position: relative;
-      padding: 0 10px;
+      background-color: var(--at-color-bg);
+      border-top: 1px solid var(--at-color-border);
+      padding: 5px 15px;
+      // background: repeating-linear-gradient(145deg, #f2f2f2, #f2f2f2 15px, #fff 0, #fff 30px);
     }
 
-    .atk-send-reply {
-      position: relative;
-      display: inline-block;
-      font-size: 14px;
+    & > .atk-send-reply {
+      z-index: 2;
+      position: absolute;
+      right: 10px;
+      bottom: 8px;
+      max-width: calc(100% - 20px);
       height: 30px;
       line-height: 30px;
-      background: @color-bg-grey-transl;
+      font-size: 14px;
+      background: var(--at-color-bg-grey-transl);
       padding: 0 30px 0 10px;
-      z-index: 2;
-      user-select: none;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       cursor: pointer;
 
       .atk-text {
@@ -111,97 +94,89 @@
         font-weight: 700;
 
         &:hover {
-          color: @color-deep;
+          color: var(--at-color-deep);
         }
       }
     }
   }
 
-  & > .atk-editor-plug-wrap {
+  & > .atk-plug-wrap {
     position: relative;
     height: 180px;
     width: 100%;
     overflow: hidden;
-    border-top: 1px solid @color-border;
-    animation: .3s both atkFadeIn;
-    transition: .2s height ease-in-out;
+    border-top: 1px solid var(--at-color-border);
+    animation: 0.3s both atkFadeIn;
+    transition: 0.2s height ease-in-out;
   }
 
-  & > .atk-editor-bottom {
+  & > .atk-bottom {
     display: flex;
     flex-direction: row;
-    border-top: 1px solid @color-border;
-    padding: 0 0 0 calc(@block-padding - 5px);
+    justify-content: space-between;
+    border-top: 1px solid var(--at-color-border);
+    padding: 0 0 0 calc(@editor-padding - 5px);
 
-    .atk-editor-bottom-part {
+    & > .atk-item {
       display: flex;
-      flex: 1;
       flex-direction: row;
       align-items: center;
-
-      &.atk-left {
-        flex: inherit;
-      }
-
-      &.atk-right {
-        justify-content: flex-end;
-      }
     }
 
-    .atk-editor-action {
+    .atk-plug-btn {
       padding: 0 8px;
       cursor: pointer;
-      color: @color-grey;
+      color: var(--at-color-grey);
       font-size: @font-size;
       user-select: none;
 
-      & > i {
-        color: @color-grey;
-        display: inline-flex;
-        vertical-align: sub;
-        margin-left: 4px;
-        svg.markdown path {
-          fill: @color-grey;
-        }
+      &:not(:last-child) {
+        border-right: 1px solid var(--at-color-border);
       }
 
       &.active {
-        color: @color-main;
+        color: var(--at-color-main);
 
-        & > i > svg.markdown path {
-          fill: @color-main;
+        svg.markdown path {
+          fill: var(--at-color-main);
         }
       }
 
-      &:not(:last-child) {
-        border-right: 1px solid @color-border;
+      i {
+        color: var(--at-color-grey);
+        display: inline-flex;
+        vertical-align: sub;
+        margin-left: 4px;
+        svg.markdown path {
+          fill: var(--at-color-grey);
+        }
       }
     }
 
     .atk-send-btn {
-      background: @color-main;
-      color: #FFF;
+      background: var(--at-color-main);
+      color: #fff;
+      font-size: @font-size;
       border: none;
       padding: 0 30px;
+      margin: 0;
       height: 30px;
       cursor: pointer;
-      transition: opacity .3s ease-in-out;
+      transition: opacity 0.3s ease-in-out;
       outline: none;
-      font-size: @font-size;
-      margin: 0;
 
       &:active {
-        opacity: .9;
+        opacity: 0.9;
       }
     }
   }
 
-  & > .atk-editor-notify-wrap {
+  & > .atk-notify-wrap {
+    z-index: 9;
     position: absolute;
     right: -2px;
     bottom: 36px;
     width: 225px;
-    z-index: 9;
-    opacity: .83;
+    opacity: 0.83;
   }
 }

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

@@ -1,6 +1,6 @@
 .atk-item-text-editor-layer {
   z-index: 999;
-  background: @color-bg;
+  background: var(--at-color-bg);
   position: absolute;
   left: 0;
   top: 0;
@@ -19,7 +19,7 @@
       width: 100%;
       padding: 3px 5px;
       border: 0;
-      border-bottom: 1px solid @color-border;
+      border-bottom: 1px solid var(--at-color-border);
       outline: none;
       background: transparent;
 

package/src/style/list.less

@@ -5,7 +5,7 @@
     display: flex;
     flex-direction: row;
     padding: 10px 10px 5px 10px;
-    border-bottom: 1px solid @color-border;
+    border-bottom: 1px solid var(--at-color-border);
 
     .atk-comment-count {
       font-size: 15px;
@@ -25,19 +25,19 @@
 
       & > span {
         font-size: 14px;
-        color: @color-meta;
+        color: var(--at-color-meta);
         cursor: pointer;
         user-select: none;
         position: relative;
 
         &.atk-on, &.atk-on * {
-          color: @color-main;
+          color: var(--at-color-main);
         }
 
         &:not(:last-child):not(.atk-hide) {
           margin-right: 10px;
           padding-right: 10px;
-          border-right: 1px solid @color-border;
+          border-right: 1px solid var(--at-color-border);
         }
 
         .atk-unread-badge {
@@ -45,7 +45,7 @@
           top: -5px;
           left: -6px;
           color: #fff;
-          background: @color-pink;
+          background: var(--at-color-pink);
           text-align: center;
           min-width: 16px;
           height: 16px;
@@ -66,6 +66,7 @@
   }
 
   & > .atk-list-footer {
+    z-index: 1;
     position: absolute;
     bottom: 5px;
     right: 0;
@@ -79,12 +80,12 @@
     .atk-copyright {
       display: block;
       font-size: 12px;
-      color: @color-meta;
+      color: var(--at-color-meta);
       padding-right: 15px;
       margin-top: 5px;
 
       a {
-        color: @color-main;
+        color: var(--at-color-main);
         text-decoration: none;
       }
     }
@@ -100,7 +101,7 @@
 }
 
 .atk-list-read-more {
-  border-top: 1px dashed @color-border;
+  border-top: 1px dashed var(--at-color-border);
   margin-top: 20px;
   padding-bottom: 20px;
 
@@ -123,11 +124,11 @@
     width: 120px;
     margin: 0 auto;
     margin-top: -15px;
-    background: @color-bg;
-    border-color: @color-border;
+    background: var(--at-color-bg);
+    border-color: var(--at-color-border);
 
     &.atk-err > .atk-text {
-      color: @color-red !important;
+      color: var(--at-color-red) !important;
     }
 
     & > .atk-loading-icon {
@@ -136,12 +137,12 @@
     }
 
     & > .atk-text {
-      color: @color-meta;
+      color: var(--at-color-meta);
     }
 
     &:hover {
       & > .atk-text {
-        color: @color-main;
+        color: var(--at-color-main);
       }
     }
   }

package/src/style/main.less

@@ -10,7 +10,7 @@
   * {
     box-sizing: border-box;
     line-height: @line-height;
-    color: @color-font;
+    color: var(--at-color-font);
     font-family: @font-family;
     word-wrap: break-word;
     word-break: break-all;
@@ -19,16 +19,20 @@
   pre {
     padding: 10px;
     line-height: @line-height;
-    background-color: @color-bg-grey;
-    color: @color-font;
-    padding: 5px 10px;
-    border-radius: calc(@block-radius / 2);
+    background-color: var(--at-color-bg-grey);
+    color: var(--at-color-font);
+    padding: 10px 15px;
+    border-radius: @block-radius;
     margin: 0;
     font-family: Source Code Pro,courier new,Input Mono,PT Mono,SFMono-Regular,Consolas,Monaco,Menlo,PingFang SC,Liberation Mono,Microsoft YaHei,Courier,monospace;
+
+    code {
+      white-space: pre-wrap;
+    }
   }
 
   a {
-    color: @color-main;
+    color: var(--at-color-main);
     text-decoration: none;
   }
 
@@ -36,8 +40,8 @@
     position: static;
     margin: 10px 0 10px 0;
     padding: 10px 20px 10px 20px;
-    background: @color-bg-grey;
-    border-left: 4px solid @color-quote;
+    background: var(--at-color-bg-grey);
+    border-left: 4px solid #687a86;
   }
 
   p:first-child {
@@ -48,10 +52,6 @@
     margin-bottom: 0;
   }
 
-  * {
-    box-sizing: border-box;
-  }
-
   img {
     max-width: 100%;
   }
@@ -67,7 +67,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  background: @color-bg;
+  background: var(--at-color-bg);
   z-index: 10;
   align-items: center;
   justify-content: center;
@@ -170,7 +170,7 @@
 i.atk-icon {
   width: 20px;
   height: 20px;
-  background-color: @color-deep;
+  background-color: var(--at-color-deep);
   background-size: contain;
   background-repeat: no-repeat;
   mask-repeat: no-repeat;
@@ -182,7 +182,7 @@ i.atk-icon {
 }
 
 .atk-icon-del {
-  background-color: @color-red !important;
+  background-color: var(--at-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");
 }
 
@@ -205,14 +205,14 @@ i.atk-icon {
 /* Layer */
 .atk-error-layer {
   &:extend(.atk-full-layer);
-  background-color: @color-bg-transl;
+  background-color: var(--at-color-bg-transl);
 
   .atk-error-title {
-    color: @color-red;
+    color: var(--at-color-red);
   }
 
   .atk-warn-title {
-    color: @color-yellow;
+    color: var(--at-color-yellow);
   }
 
   .atk-error-title, .atk-warn-title {
@@ -228,11 +228,11 @@ i.atk-icon {
     padding: 0 20px;
 
     * {
-      color: @color-deep;
+      color: var(--at-color-deep);
     }
 
     a {
-      color: @color-meta;
+      color: var(--at-color-meta);
     }
   }
 }
@@ -240,7 +240,7 @@ i.atk-icon {
 .atk-layer-dialog-wrap {
   @formInputHeight: 30px;
   &:extend(.atk-full-layer);
-  background-color: @color-bg-transl;
+  background-color: var(--at-color-bg-transl);
 
   & > .atk-layer-dialog {
     width: 25%;
@@ -252,15 +252,15 @@ i.atk-icon {
         height: auto;
         margin-right: 10px;
         padding-right: 10px;
-        border-right: 1px solid @color-border;
+        border-right: 1px solid var(--at-color-border);
         vertical-align: bottom;
       }
 
       input {
         width: 100%;
         line-height: calc(@formInputHeight + 4px);
-        background-color: @color-bg;
-        border: 1px solid @color-border;
+        background-color: var(--at-color-bg);
+        border: 1px solid var(--at-color-border);
         border-radius: calc(@block-radius / 2);
         outline: none;
         padding: 0 6px;
@@ -279,9 +279,9 @@ i.atk-icon {
         flex: 1;
         display: block;
         cursor: pointer;
-        border: 1px solid @color-main;
+        border: 1px solid var(--at-color-main);
         background: transparent;
-        color: @color-main;
+        color: var(--at-color-main);
         border-radius: calc(@block-radius / 2);
         padding: 0 15px;
         line-height: @formInputHeight;
@@ -289,7 +289,7 @@ i.atk-icon {
 
         &:active {
           color: #FFF;
-          background: @color-main;
+          background: var(--at-color-main);
         }
 
         &:not(:last-child) {
@@ -355,18 +355,22 @@ i.atk-icon {
 /* Common Action Btn */
 .atk-common-action-btn {
   &.atk-btn-confirm {
-    color: @color-yellow !important;
+    color: var(--at-color-yellow) !important;
   }
 
   &.atk-btn-warn {
-    color: @color-yellow !important;
+    color: var(--at-color-yellow) !important;
   }
 
   &.atk-btn-error {
-    color: @color-red !important;
+    color: var(--at-color-red) !important;
   }
 
   &.atk-btn-success {
-    color: @color-green !important;
+    color: var(--at-color-green) !important;
   }
 }
+
+img[atk-emoticon] {
+  max-height: 60px;
+}

package/src/style/page-list.less

@@ -7,7 +7,7 @@
     align-items: center;
 
     &:not(:last-child) {
-      border-bottom: 1px solid @color-border;
+      border-bottom: 1px solid var(--at-color-border);
     }
   }
 
@@ -18,13 +18,13 @@
     padding: 20px 30px;
 
     .atk-title {
-      color: @color-font;
+      color: var(--at-color-font);
       font-size: 21px;
       margin-bottom: 10px;
     }
 
     .atk-sub {
-      color: @color-sub;
+      color: var(--at-color-sub);
       font-size: 14px;
     }
   }
@@ -39,7 +39,7 @@
 
   .atk-page-edit-layer {
     z-index: 999;
-    background: @color-bg;
+    background: var(--at-color-bg);
     position: absolute;
     width: 100%;
     height: 100%;

package/src/style/pagination.less

@@ -9,11 +9,11 @@
   & > .atk-input {
     font-size: 15px;
     height: 32px;
-    border: 1px solid @color-border;
+    border: 1px solid var(--at-color-border);
     border-radius: 3px;
     padding: 0 5px;
     text-align: center;
-    background: @color-bg;
+    background: var(--at-color-bg);
   }
 
   & > .atk-btn {
@@ -25,11 +25,11 @@
     align-items: center;
 
     &:hover {
-      background: @color-bg-grey;
+      background: var(--at-color-bg-grey);
     }
 
     &.atk-disabled {
-      color: @color-sub;
+      color: var(--at-color-sub);
 
       &:hover {
         cursor: default;
@@ -40,13 +40,13 @@
 
   & > .atk-input {
     background: transparent;
-    color: @color-font;
+    color: var(--at-color-font);
     font-size: 18px;
     width: 60px;
     outline: none;
 
     &:focus {
-      border-color: @color-main;
+      border-color: var(--at-color-main);
     }
   }