artalk 2.0.4 → 2.1.1

package/src/style/sidebar.less

@@ -1,5 +1,8 @@
+@header-height: 60px;
+@nav-height: 40px;
+
 .atk-sidebar {
-  @width: 450px;
+  @width: 430px;
   position: fixed;
   z-index: 99999;
   top: 0;
@@ -18,86 +21,247 @@
 
   .atk-sidebar-inner {
     position: relative;
+  }
+
+  // Header
+  .atk-sidebar-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1px solid @color-border;
+
+    .atk-avatar {
+      display: flex;
+      width: @header-height + 5px;
+      height: @header-height;
+      align-items: center;
+      justify-content: center;
 
-    .atk-sidebar-title-wrap {
-      padding: 15px 35px 10px 20px;
+      img, .atk-site-logo {
+        @height: @header-height - 30px;
+        height: @height;
+        width: @header-height - 30px;
+        border-radius: 2px;
+        background: @color-meta;
+        text-align: center;
+        line-height: @height;
+        font-size: 13px;
+        color: @color-bg;
+      }
 
-      .atk-title-item {
+      .atk-site-logo {
         user-select: none;
-        font-size: 17px;
         cursor: pointer;
-        color: var(--at-color-font);
+      }
+    }
 
-        &.atk-active {
-          color: var(--at-color-font) !important;
-          font-size: 23px;
-          cursor: initial;
-        }
+    .atk-menu {
+      flex: auto;
+      text-align: center;
 
-        &:hover {
-          color: var(--at-color-main);
-        }
+      .atk-item {
+        position: relative;
+        color: @color-sub;
+        font-size: 20px;
+        // cursor: pointer;
+        user-select: none;
 
         &:not(:last-child) {
-          margin-right: 25px;
+          margin-right: 20px;
+        }
+
+        &.atk-active {
+          color: @color-font;
+
+          &:after {
+            content: ' ';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 6px;
+            background: @color-main;
+            opacity: .4;
+          }
         }
       }
     }
 
     .atk-sidebar-close {
-      position: absolute;
       display: flex;
-      right: 10px;
-      top: 10px;
-      width: 40px;
-      height: 40px;
+      flex-direction: column;
+      width: @header-height;
+      height: @header-height;
       align-items: center;
       place-content: center;
       cursor: pointer;
       user-select: none;
+      margin-left: 10px;
 
-      &:hover {
-        background: rgba(232, 17, 35, 0.9);
-        svg {
-          fill: #fff;
-        }
-      }
-
-      & svg {
-        fill: @color-font;
+      &:hover .atk-icon-close {
+        background-color: rgba(232, 17, 35, 0.9);
       }
     }
   }
 
-  .atk-sidebar-actions {
+  // Nav
+  .atk-sidebar-nav {
     display: flex;
     flex-direction: row;
     border-bottom: 1px solid @color-border;
+    height: @nav-height + 1px;
 
-    .atk-action-item {
+    .akt-curt-view-btn {
       display: flex;
-      flex-grow: 1;
-      scroll-snap-align: start;
-      place-content: center;
-      line-height: 40px;
+      align-items: center;
+      padding: 0 20px;
+      border-right: 1px solid @color-border;
       cursor: pointer;
       user-select: none;
+      height: @nav-height;
+      line-height: @nav-height;
+      white-space: nowrap;
 
       &:hover {
         background: @color-bg-grey;
       }
 
-      &.atk-active {
-        color: @color-main;
-        font-weight: bold;
+      .atk-icon {
+        width: 17px;
+
+        span {
+          position: relative;
+          display: block;
+          width: 14px;
+          height: 1px;
+          margin: 0 auto 4px;
+          background: @color-deep;
+          transform-origin: 20px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+
+        &.atk-arrow span {
+          width: 8px;
+          opacity: 1;
+          transform: rotate(-45deg);
+          transform-origin: 7px;
+
+          &:nth-child(2) {
+            transform: rotate(0deg);
+            width: 0;
+            opacity: 0;
+          }
+
+          &:nth-child(3) {
+            opacity: 1;
+            transform: rotate(45deg);
+          }
+        }
+      }
+
+      .atk-text {
+        margin-left: 10px;
+      }
+    }
+
+    .atk-tabs {
+      &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+        background: transparent;
+      }
+
+      display: flex;
+      flex-direction: row;
+      overflow-y: auto;
+
+      &.atk-views .atk-active {
+
+      }
+
+      .atk-tab-item {
+        line-height: @nav-height;
+        height: @nav-height;
+        color: @color-sub;
+        cursor: pointer;
+        user-select: none;
+        padding: 0 20px;
+        white-space: nowrap;
+
+        &:hover {
+          background: @color-bg-grey;
+        }
+
+        &.atk-active {
+          color: @color-deep;
+        }
+      }
+    }
+  }
+
+  .atk-site-list-floater {
+    .atk-slim-scrollbar();
+
+    position: absolute;
+    z-index: 9999;
+    left: 50%;
+    top: 70px;
+    transform: translateX(-50%);
+    pointer-events: all;
+    background: @color-bg;
+    width: 80%;
+    max-height: 40%;
+    margin: 0 auto;
+    border: 1px solid @color-border;
+    border-radius: 4px;
+    overflow-y: auto;
+
+    .atk-sites {
+      display: flex;
+      flex-direction: column;
+      padding: 7px 0;
+
+      .atk-site-item {
+        display: flex;
+        flex-direction: row;
+        cursor: pointer;
+        align-items: center;
+        padding: 0 10px;
+        margin-bottom: 1px;
+
+        .atk-site-logo {
+          width: 20px;
+          height: 20px;
+          line-height: 20px;
+          background: @color-meta;
+          margin: 10px;
+          border-radius: 3px;
+          text-align: center;
+          color: @color-bg;
+          font-size: 12px;
+        }
+
+        .atk-site-name {
+          color: @color-font;
+          font-size: 17px;
+          margin-left: 7px;
+        }
+
+        &.atk-active, &:hover {
+          background: @color-bg-grey;
+        }
       }
     }
   }
 
-  .atk-sidebar-content {
+  .atk-sidebar-view-wrap {
     position: relative;
     overflow-y: auto;
-    height: calc(100vh - 102px);
+    height: calc(100vh - @header-height - @nav-height - 2px);
+    .atk-slim-scrollbar();
 
     .atk-sidebar-no-content {
       position: absolute;
@@ -114,232 +278,143 @@
     }
   }
 
-  .atk-filter-bar {
-    padding: 0 15px;
-    font-size: 15px;
-
-    & > span {
-      display: inline-block;
-      padding: 3px 13px;
-      cursor: pointer;
-      user-select: none;
-      border-radius: 50px;
-      margin-bottom: 5px;
-
-      &:hover {
-        color: #4285f4;
-        background: @color-bg-grey;
-      }
-
-      &.atk-active {
-        background: @color-bg-light;
-        color: @color-light;
-      }
+  .atk-form {
+    @form-height: 35px;
 
-      &:not(:last-child) {
-        margin-right: 5px;
-      }
-    }
+    padding: 20px 30px;
 
-    &:not(:last-child) {
-      padding-top: 8px;
+    .atk-label {
+      font-size: 16px;
+      margin-bottom: 12px;
+      color: @color-font;
     }
-  }
 
-  .atk-form-inline-wrap {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 15px 0;
-
-    input, select, button {
-      display: inline !important;
-      min-width: initial !important;
+    .atk-desc {
+      font-size: 14px;
+      margin-top: 12px;
+      margin-left: 15px;
+      margin-bottom: 20px;
+      display: block;
+      color: @color-meta;
 
-      @media only screen and (max-width: 768px) {
-        & {
-          width: 100%;
-        }
+      a {
+        opacity: 0.8;
       }
     }
 
-    button {
-      width: 200px !important;
-    }
-  }
-
-  .atk-form-wrap, .atk-form-inline-wrap {
-    padding: 10px 10px;
-
-    input, select {
-      min-width: 200px;
-    }
-
     input, textarea {
       display: block;
-      line-height: 30px;
+      line-height: @form-height;
       padding: 0 10px;
-      margin: 0 2px;
+      margin: 0;
       border: none;
-      border-bottom: 1px solid @color-border;
+      border-bottom: 2px solid @color-border;
       outline: none;
       width: 100%;
+      margin-bottom: 25px;
+      background: @color-bg;
 
       &:focus {
-        border-bottom-color: @color-main;
+        border-bottom-color: @color-bg-light;
       }
 
       &[type="file"] {
-        width: 200px;
+        border-radius: 2px;
+        background: transparent;
+        border-bottom: 2px solid @color-border;
         cursor: pointer;
         position: relative;
-        border: 0;
-        margin: 17px 0;
+        padding: 0 15px;
+        margin-bottom: 30px;
       }
     }
 
     textarea {
-      min-height: 120px;
+      font-size: 13px;
+      line-height: 20px;
+      min-height: 80px;
+      resize: vertical;
     }
 
     select {
       display: block;
       outline: none;
-      border: none;
-      border-bottom: 1px solid @color-border;
-      height: 30px;
-      padding: 0 10px;
+      height: @form-height;
+      padding: 5px 10px;
       width: 100%;
+      border: none;
+      border-bottom: 2px solid @color-border;
+      margin-bottom: 25px;
+      -webkit-appearance: none;
+      border-radius: 0;
+      background: @color-bg;
     }
 
     button {
       &:hover {
-        color: #fff;
-        background: @color-main;
+        background: @color-bg-light;
       }
 
+      text-align: center;
       color: @color-light;
-      background: @color-bg-light;
-      border: 0;
-      line-height: 30px;
+      background: transparent;
+      border: 2px solid @color-bg-light;
+      line-height: @form-height;
+      letter-spacing: 2em;
+      text-indent: 2em; // center
       cursor: pointer;
       outline: none;
       padding: 0 20px;
-      border-radius: 2px;
+      border-radius: 4px;
       margin: 0 5px;
       width: 100%;
     }
 
-    .atk-desc {
-      font-size: 14px;
-      margin-top: 12px;
-      margin-left: 15px;
-      display: block;
+    input, select, button {
+      font-size: 15px;
     }
   }
 
-  .atk-admin-setting {
+  .atk-log-wrap {
     .atk-log-back-btn {
       display: inline-block;
-      padding: 5px 30px;
+      padding: 5px 33px;
       cursor: pointer;
       user-select: none;
+      border-right: 1px solid @color-border;
+      border-left: 1px solid transparent;
       &:hover {
         background: #f4f4f4;
       }
     }
 
+    .atk-log {}
+
     .atk-iframe {
       width: 100%;
       height: calc(100vh - 150px);
       border: 0;
       background: #f4f4f4;
-      border: 5px solid #eee;
+      border: 3px solid #eee;
     }
   }
 }
 
-/* Sidebar Common List */
-.atk-sidebar .atk-sidebar-list {
-  & > .atk-item {
-    display: flex;
-    align-items: flex-start;
-    padding: 10px 20px;
-    flex-direction: column;
-
-    &:not(:last-child) {
-      border-bottom: 1px solid @color-border;
-    }
-
-    .atk-title {
-      font-size: 20px;
-      display: block;
-      cursor: pointer;
-
-      &:hover {
-        color: @color-main;
-      }
-    }
-
-    .atk-sub {
-      display: block;
-      color: @color-meta;
-      cursor: pointer;
-
-      &:hover {
-        color: @color-main;
-      }
-    }
-
-    .atk-actions {
-      display: flex;
-      margin-top: 10px;
-      flex-direction: row;
-      flex-wrap: wrap;
-
-      & > .atk-item {
-        font-size: 14px;
-        color: @color-meta;
-        cursor: pointer;
-        user-select: none;
-
-        &:not(:last-child) {
-          margin-right: 10px;
-          padding-right: 10px;
-          border-right: 1px solid @color-border;
-        }
-
-        &:hover {
-          color: @color-main;
-        }
-      }
-    }
-  }
-}
-
-.atk-sidebar .atk-setting {
-  .atk-group {
-    padding: 15px 25px;
-
-    &:not(:last-child) {
-      border-bottom: 1px solid @color-border;
-    }
-  }
-
-  .atk-title {
-    font-size: 20px;
-    margin-bottom: 10px;
-  }
-
-  .atk-label {
-    font-size: 16px;
-    margin-top: 10px;
-    margin-bottom: 2px;
-    color: @color-meta;
+.atk-view-name-pages, .atk-view-name-comments {
+  padding-bottom: 55px;
+
+  .atk-pagination-wrap {
+    z-index: 200;
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    background: @color-bg;
+    border-top: 1px solid @color-border;
   }
 
-  .atk-btn {
-    padding: 4px 25px;
-    margin-top: 20px;
+  .atk-list-read-more {
+    margin-top: 30px;
+    margin-bottom: -40px;
   }
 }