@waline/client 1.6.0 → 2.0.0-alpha.2

package/src/styles/card.scss

@@ -0,0 +1,223 @@
+.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);
+
+    @media (max-width: 720px) {
+      --avatar-size: var(--waline-m-avatar-size);
+    }
+
+    position: relative;
+    margin-right: 0.75em;
+
+    img {
+      width: var(--avatar-size);
+      height: var(--avatar-size);
+      border-radius: var(--waline-avatar-radius);
+      box-shadow: var(--waline-box-shadow);
+    }
+
+    .verified-icon {
+      position: absolute;
+      top: calc(var(--avatar-size) * 3 / 4);
+      left: calc(var(--avatar-size) * 3 / 4);
+
+      border-radius: 50%;
+
+      background: var(--waline-bgcolor);
+      box-shadow: var(--waline-box-shadow);
+    }
+  }
+}
+
+.wl-card {
+  flex: 1;
+  width: 0;
+  padding-bottom: 0.5em;
+  border-bottom: 1px dashed var(--waline-border-color);
+
+  &:first-child {
+    margin-left: 1em;
+  }
+
+  .wl-head {
+    line-height: 1.5;
+  }
+
+  .wl-nick {
+    position: relative;
+
+    display: inline-block;
+
+    margin-right: 0.5em;
+
+    font-weight: bold;
+    font-size: 0.875em;
+    line-height: 1;
+    text-decoration: none;
+
+    svg {
+      position: relative;
+      bottom: -0.125em;
+      line-height: 1;
+    }
+  }
+
+  span.wl-nick {
+    color: var(--waline-dark-grey);
+  }
+
+  .wl-badge {
+    display: inline-block;
+
+    margin-right: 0.5em;
+    padding: 0 0.3em;
+    border-radius: 3px;
+
+    background: var(--waline-badge-color);
+    color: var(--waline-white);
+
+    font-size: var(--waline-badge-font-size);
+  }
+
+  .wl-time {
+    margin-right: 0.875em;
+    color: var(--waline-info-color);
+    font-size: 0.75em;
+  }
+
+  .wl-reply {
+    float: right;
+
+    padding: 4px;
+    border: none;
+
+    background: transparent;
+    color: var(--waline-color);
+
+    line-height: 1;
+
+    cursor: pointer;
+
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: var(--waline-theme-color);
+    }
+
+    &.active {
+      color: var(--waline-active-color);
+    }
+  }
+
+  .wl-meta {
+    position: relative;
+    line-height: 1;
+
+    > span {
+      display: inline-block;
+
+      margin-right: 0.25em;
+      padding: 2px 4px;
+      border-radius: 0.2em;
+
+      background: var(--waline-info-bgcolor);
+      color: var(--waline-info-color);
+
+      font-size: var(--waline-info-font-size);
+      line-height: 1.5;
+
+      @media (max-width: 520px) {
+        display: none;
+      }
+
+      &:empty {
+        display: none;
+      }
+    }
+  }
+
+  .wl-content {
+    position: relative;
+
+    margin-bottom: 0.75em;
+    padding-top: 0.625em;
+
+    font-size: 0.875em;
+    line-height: 2;
+    word-wrap: break-word;
+
+    &.expand {
+      overflow: hidden;
+      max-height: 8em;
+      cursor: pointer;
+
+      &::before {
+        content: '';
+
+        position: absolute;
+        top: 0;
+        bottom: 3.15em;
+        left: 0;
+        z-index: 999;
+
+        display: block;
+
+        width: 100%;
+
+        background: linear-gradient(180deg, #000, rgb(255 255 255 / 90%));
+      }
+
+      &::after {
+        content: attr(data-expand);
+
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 999;
+
+        display: block;
+
+        width: 100%;
+        height: 3.15em;
+
+        background: rgb(255 255 255 / 90%);
+        color: #828586;
+
+        line-height: 3.15em;
+        text-align: center;
+      }
+    }
+
+    > *:first-child {
+      margin-top: 0;
+    }
+
+    > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .wl-quote {
+    border-left: 1px dashed rgb(237 237 237 / 50%);
+
+    .wl-user {
+      --avatar-size: var(--waline-m-avatar-size);
+    }
+  }
+}

package/src/styles/config.scss

@@ -0,0 +1,52 @@
+:root {
+  // font-size
+  --waline-font-size: 16px;
+
+  // regular colors
+  --waline-white: #fff;
+  --waline-light-grey: #999;
+  --waline-dark-grey: #666;
+
+  // theme colors
+  --waline-theme-color: #27ae60;
+  --waline-active-color: #2ecc71;
+
+  // layout colors
+  --waline-color: #444;
+  --waline-bgcolor: #fff;
+  --waline-bgcolor-light: #f8f8f8;
+  --waline-bgcolor-hover: #f0f0f0;
+  --waline-border-color: #ddd;
+  --waline-disable-bgcolor: #f8f8f8;
+  --waline-disable-color: #000;
+  --waline-code-bgcolor: #282c34;
+
+  // special colors
+  --waline-bq-color: #f0f0f0;
+
+  // avatar
+  --waline-avatar-size: 3.25rem;
+  --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
+
+  // badge
+  --waline-badge-color: #3498db;
+  --waline-badge-font-size: 0.775em;
+
+  // info
+  --waline-info-bgcolor: #f8f8f8;
+  --waline-info-color: #999;
+  --waline-info-font-size: 0.625em;
+
+  // ====render choises====
+  //   ** using border **
+  --waline-border: 1px solid var(--waline-border-color);
+  --waline-avatar-radius: 50%;
+  --waline-box-shadow: none;
+
+  // ** using box-shadow **
+  // --waline-border: none;
+  // Light:
+  // --waline-box-shadow: 0 12px 40px rgb(134 151 168 / 25%);
+  // Dark:
+  // --waline-box-shadow: 0 12px 40px #0f0e0d
+}

package/src/styles/emoji.scss

@@ -0,0 +1,118 @@
+@mixin emoji() {
+  .wl-emoji-popup {
+    position: absolute;
+    top: 100%;
+    left: 1.25em;
+    z-index: 10;
+
+    max-width: 526px;
+    border: var(--waline-border);
+    border-radius: 6px;
+
+    background: var(--waline-bgcolor);
+    box-shadow: var(--waline-box-shadow);
+
+    opacity: 0;
+    visibility: hidden;
+
+    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
+    transform: scale(0.9, 0.9);
+    transform-origin: 0 0;
+
+    &.display {
+      opacity: 1;
+      visibility: visible;
+      transform: none;
+    }
+
+    button {
+      display: inline-block;
+      vertical-align: middle;
+
+      width: 2em;
+      margin: 0.125em;
+      padding: 0;
+      border-width: 0;
+
+      background: transparent;
+
+      font-size: inherit;
+      line-height: 2;
+      text-align: center;
+
+      cursor: pointer;
+
+      &:hover {
+        background: var(--waline-bgcolor-hover);
+      }
+    }
+
+    .wl-emoji {
+      display: inline-block;
+      vertical-align: middle;
+      max-width: 1.5em;
+      max-height: 1.5em;
+    }
+
+    .wl-tab-wrapper {
+      overflow-y: auto;
+      max-height: 145px;
+      padding: 0.5em;
+
+      &::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+      }
+
+      &::-webkit-scrollbar-track-piece:vertical {
+        -webkit-border-radius: 6px;
+        border-radius: 6px;
+        background: rgb(0 0 0 / 10%);
+      }
+
+      &::-webkit-scrollbar-thumb:vertical {
+        width: 6px;
+        -webkit-border-radius: 6px;
+        border-radius: 6px;
+        background: var(--waline-theme-color);
+      }
+    }
+
+    .wl-tabs {
+      position: relative;
+      height: 2em;
+      padding: 0 6px;
+
+      &::before {
+        content: ' ';
+
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        z-index: 2;
+
+        height: 1px;
+
+        background: var(--waline-border-color);
+      }
+    }
+
+    .wl-tab {
+      position: relative;
+      margin: 0;
+      padding: 0 0.5em;
+
+      &.active {
+        z-index: 3;
+
+        border: 1px solid var(--waline-border-color);
+        border-top-width: 0;
+        border-bottom-right-radius: 6px;
+        border-bottom-left-radius: 6px;
+
+        background: var(--waline-bgcolor);
+      }
+    }
+  }
+}

package/src/styles/highlight.scss

@@ -0,0 +1,135 @@
+// should only effect waline content
+.wl-content {
+  pre,
+  pre[class*='language-'] {
+    overflow: auto;
+
+    margin: 0.75rem 0;
+    padding: 1rem 1.25rem;
+    border-radius: 6px;
+
+    background: var(--waline-code-bgcolor);
+
+    line-height: 1.4;
+
+    code {
+      padding: 0;
+      border-radius: 0;
+      background: transparent !important;
+      color: #bbb;
+    }
+  }
+
+  /**
+   * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+   * Based on https://github.com/chriskempson/tomorrow-theme
+   * @author Rose Pritchard
+   */
+  code[class*='language-'],
+  pre[class*='language-'] {
+    background: none;
+    color: #ccc;
+
+    font-size: 1em;
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-wrap: normal;
+    word-break: normal;
+    tab-size: 4;
+    hyphens: none;
+  }
+
+  /* Code blocks */
+  pre[class*='language-'] {
+    overflow: auto;
+  }
+
+  :not(pre) > code[class*='language-'],
+  pre[class*='language-'] {
+    background: #2d2d2d;
+  }
+
+  /* Inline code */
+  :not(pre) > code[class*='language-'] {
+    padding: 0.1em;
+    border-radius: 0.3em;
+    white-space: normal;
+  }
+
+  .token.comment,
+  .token.block-comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #999;
+  }
+
+  .token.punctuation {
+    color: #ccc;
+  }
+
+  .token.tag,
+  .token.attr-name,
+  .token.namespace,
+  .token.deleted {
+    color: #e2777a;
+  }
+
+  .token.function-name {
+    color: #6196cc;
+  }
+
+  .token.boolean,
+  .token.number,
+  .token.function {
+    color: #f08d49;
+  }
+
+  .token.property,
+  .token.class-name,
+  .token.constant,
+  .token.symbol {
+    color: #f8c555;
+  }
+
+  .token.selector,
+  .token.important,
+  .token.atrule,
+  .token.keyword,
+  .token.builtin {
+    color: #cc99cd;
+  }
+
+  .token.string,
+  .token.char,
+  .token.attr-value,
+  .token.regex,
+  .token.variable {
+    color: #7ec699;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url {
+    color: #67cdcc;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  .token.inserted {
+    color: #008000;
+  }
+}

package/src/styles/index.scss

@@ -0,0 +1,12 @@
+@use 'config';
+@use 'nomalize';
+
+@use 'base';
+
+@use 'panel';
+@use 'card';
+@use 'layout';
+
+@use 'highlight';
+
+@use 'recent';

package/src/styles/layout.scss

@@ -0,0 +1,78 @@
+.wl-close-icon {
+  color: var(--waline-border-color);
+}
+
+.wl-content {
+  // remain for historical reasons
+  .vemoji,
+  .wl-emoji {
+    display: inline-block;
+    vertical-align: middle;
+    width: 1.25em;
+    margin: 0.25em;
+  }
+
+  .wl-tex {
+    background: var(--waline-info-bgcolor);
+    color: var(--waline-info-color);
+  }
+
+  span.wl-tex {
+    display: inline-block;
+
+    margin-right: 0.25em;
+    padding: 2px 4px;
+    border-radius: 0.2em;
+
+    font-size: var(--waline-info-font-size);
+    line-height: 1.5;
+  }
+
+  p.wl-tex {
+    text-align: center;
+  }
+
+  // katex support
+  .katex-display {
+    overflow: auto hidden;
+    -webkit-overflow-scrolling: touch;
+    padding-top: 0.2em;
+    padding-bottom: 0.2em;
+
+    &::-webkit-scrollbar {
+      height: 3px;
+    }
+  }
+
+  .katex-error {
+    color: #f00;
+  }
+}
+
+.wl-count {
+  padding: 0.375em;
+  font-weight: bold;
+  font-size: 1.25em;
+}
+
+.wl-empty {
+  overflow: auto;
+  padding: 1.25em;
+  color: var(--waline-color);
+  text-align: center;
+}
+
+.wl-more {
+  text-align: center;
+
+  button {
+    margin: 1em 0;
+  }
+}
+
+.wl-power {
+  padding: 0.5em 0;
+  color: var(--waline-light-grey);
+  font-size: var(--waline-info-font-size);
+  text-align: right;
+}

package/src/styles/nomalize.scss

@@ -0,0 +1,112 @@
+[data-waline] {
+  font-size: var(--waline-font-size);
+  text-align: left;
+
+  * {
+    box-sizing: content-box;
+    line-height: 1.75;
+  }
+
+  p {
+    color: var(--waline-color);
+  }
+
+  a {
+    position: relative;
+
+    display: inline-block;
+
+    color: var(--waline-theme-color);
+
+    text-decoration: none;
+
+    cursor: pointer;
+
+    &:hover {
+      color: var(--waline-active-color);
+    }
+  }
+
+  img {
+    max-width: 100%;
+    max-height: 400px;
+    border: none;
+  }
+
+  hr {
+    margin: 0.825em 0;
+    border-style: dashed;
+    border-color: var(--waline-bgcolor-light);
+  }
+
+  code,
+  pre {
+    margin: 0;
+    padding: 0.2em 0.4em;
+    border-radius: 3px;
+
+    background: var(--waline-bgcolor-light);
+
+    font-size: 85%;
+  }
+
+  pre {
+    overflow: auto;
+    padding: 10px;
+    line-height: 1.45;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+    &::-webkit-scrollbar-track-piece:horizontal {
+      -webkit-border-radius: 6px;
+      border-radius: 6px;
+      background: rgb(0 0 0 / 10%);
+    }
+
+    &::-webkit-scrollbar-thumb:horizontal {
+      width: 6px;
+      -webkit-border-radius: 6px;
+      border-radius: 6px;
+      background: var(--waline-theme-color);
+    }
+
+    code {
+      padding: 0;
+
+      background: transparent;
+      color: var(--waline-color);
+
+      white-space: pre-wrap;
+      word-break: keep-all;
+    }
+  }
+
+  blockquote {
+    margin: 0.5em 0;
+    padding: 0.5em 0 0.5em 1em;
+    border-left: 8px solid var(--waline-bq-color);
+    color: var(--waline-dark-grey);
+
+    > p {
+      margin: 0;
+    }
+  }
+
+  ol,
+  ul {
+    margin-left: 1.25em;
+    padding: 0;
+  }
+
+  input {
+    &[type='checkbox'],
+    &[type='radio'] {
+      display: inline-block;
+      vertical-align: middle;
+      margin-top: -2px;
+    }
+  }
+}