cherry-muse 1.0.1

package/src/sass/core/Card.scss

@@ -0,0 +1,219 @@
+.cherry-previewer {
+  .cherry-card {
+    margin: 0.7rem 0;
+
+    a::after {
+      content: "";
+      display: none;
+      clear: both;
+    }
+
+    .cherry-card-item {
+      width: calc(100% / 3 - 1rem);
+      margin: 0.35rem;
+      background: var(--bg-color);
+      border-radius: var(--border-radius);
+      color: var(--text-color);
+      display: flex;
+      box-shadow: var(--shadow);
+      transition: all 0.4s;
+
+      &.cherry-card-row-1 {
+        width: calc(100% - 1rem);
+      }
+
+      &.cherry-card-row-2 {
+        width: calc(100% / 2 - 1rem);
+        @media  screen and (max-width: 500px) {
+          width: calc(100% - 1rem);
+        }
+      }
+
+      &.cherry-card-row-3 {
+        width: calc(100% / 3 - 1rem);
+        @media  screen and (max-width: 720px) {
+          width: calc(100% / 2 - 1rem);
+        }
+        @media (max-width: 500px) {
+          width: calc(100% - 1rem);
+        }
+      }
+
+      &.cherry-card-row-4 {
+        width: calc(100% / 4 - 1rem);
+        @media  screen and (max-width: 900px) {
+          width: calc(100% / 3 - 1rem);
+        }
+        @media  screen and (max-width: 720px) {
+          width: calc(100% / 2 - 1rem);
+        }
+        @media  screen and (max-width: 500px) {
+          width: calc(100% - 1rem);
+        }
+      }
+
+    }
+
+    &.cherry-card-list-container {
+      margin: -0.35rem;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+
+      .cherry-card-item {
+
+
+        .cherry-card-body {
+          height: 4rem;
+          width: calc(100% - 6rem);
+        }
+
+        &:hover {
+          text-decoration: none;
+          box-shadow: var(--shadow);
+          transform: translateY(-3px) scale(1.01);
+
+          img {
+            box-shadow: var(--shadow);
+          }
+
+          div p {
+            text-shadow: var(--shadow);
+          }
+        }
+
+        img {
+          width: 4rem;
+          height: 4rem;
+          border-radius: 50%;
+          border: var(--border);
+          margin: 1rem 0 1rem 1rem;
+          box-shadow: var(--shadow);
+          transition: all 0.4s;
+        }
+
+        div {
+          flex: 1;
+          display: inline-block;
+          float: right;
+          padding: 1rem 0;
+
+          p {
+            margin: 0;
+            padding: 0 1rem;
+            transition: text-shadow 0.4s;
+            text-align: center;
+          }
+
+          .cherry-card-title {
+            margin: 0.2rem 0 0.3rem;
+            font-size: 1rem;
+            font-weight: bold;
+            white-space: nowrap; /* 文本不换行 */
+            overflow: hidden; /* 隐藏超出容器的内容 */
+            text-overflow: ellipsis; /* 超出部分显示省略号 */
+          }
+
+          .cherry-card-desc {
+            font-size: 0.8rem;
+            opacity: 0.8;
+            margin-bottom: 0.2rem;
+            overflow: hidden; /* 隐藏超出容器的内容 */
+            display: -webkit-box; /* 使用弹性盒子模型 */
+            -webkit-box-orient: vertical; /* 垂直布局 */
+            -webkit-line-clamp: 2; /* 限制显示的行数为 2 行 */
+            text-overflow: ellipsis; /* 超出部分显示省略号 */
+            line-height: 1.5; /* 设置行高 */
+            max-height: 3em; /* 行高的倍数（2行 * 1.5行高 = 3em） */
+          }
+        }
+
+        &.cherry-card-row-1 {
+
+
+          img {
+            margin-left: 2rem;
+          }
+        }
+
+        &.cherry-card-row-2 {
+          img {
+            margin-left: 1.5rem;
+          }
+        }
+
+      }
+    }
+
+    &.cherry-card-image-container {
+      margin: 1rem 0;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+
+      .cherry-card-item {
+        background: transparent;
+
+
+        &:hover {
+          box-shadow: var(--shadow);
+          transform: translateY(-3px);
+        }
+
+        .cherry-card-box-img {
+          border-radius: var(--border-radius) var(--border-radius) 0 0;
+          overflow: hidden;
+          position: relative;
+          background: transparent;
+          height: 8rem;
+
+          img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            transition: all 0.3s;
+          }
+        }
+
+        a {
+          color: var(--textColor);
+          transition: color 0.3s;
+
+          &:hover {
+            text-decoration: none;
+          }
+        }
+
+        .cherry-card-box-info {
+          border-radius: 0 0 var(--border-radius) var(--border-radius);
+          padding: 0.8rem 1rem;
+          background: var(--bg-color);
+
+          p {
+            margin: 0;
+          }
+          .cherry-card-title {
+            font-size: 1rem;
+            font-weight: bold;
+          }
+          .cherry-card-desc {
+            margin-top: 0.3rem;
+            opacity: 0.8;
+            font-size: 0.9rem;
+            line-height: 1.1rem;
+            overflow: hidden;
+            white-space: normal;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 3;
+          }
+
+        }
+
+
+      }
+    }
+  }
+
+}

package/src/sass/core/CodeBlock.scss

@@ -0,0 +1,205 @@
+.cherry-previewer{
+
+
+
+  div[data-type='codeBlock'] {
+
+    @import '../components/prism';
+
+
+    pre{
+      border-radius: var(--border-radius);
+    }
+
+    display: inline-block;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: var(--border-radius);
+    margin-bottom: 1rem;
+    font-size: 0.8rem;
+    overflow-x: auto;
+
+    pre[class*=language-]{
+      padding:1.5rem
+    }
+    & > pre {
+      margin: 0;
+      code[class*='language-'] {
+        counter-reset: line;
+
+        &.wrap {
+          white-space: pre-wrap;
+        }
+        .code-line {
+          display: inline-block;
+          position: relative;
+          padding-left: 3em;
+          height: 1.3em;
+          line-height: 2em;
+          &:before {
+            counter-increment: line;
+            content: counter(line);
+            margin-right: 1em;
+            position: absolute;
+            left: 0;
+          }
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+
+
+
+  pre{
+    code{
+      border: unset;
+    }
+  }
+
+  .cherry-mask-code-block{
+    width: 100%;
+    padding-top: 3.125rem;
+    display: none;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(var(--bg-color)));
+    background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, var(--bg-color) 100%);
+    text-align: center;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0.5em;
+    z-index: 10;
+    .expand-btn {
+      height: 1.3rem;
+      margin: 0;
+      width: 100%;
+      padding: 0;
+      box-sizing: border-box;
+      border: 1px solid transparent;
+      cursor: pointer;
+      border-radius: 0.3125rem;
+      transition: all 0.3s;
+      z-index: 12;
+      display: inline-block;
+      &:hover {
+        background-color: var(--hover-bg-color);
+        border-radius: var(--border-radius);
+      }
+    }
+  }
+
+
+  .cherry-code-unExpand{
+    pre {
+      height: 15rem;
+      overflow: hidden !important;
+    }
+    .cherry-mask-code-block {
+      display: inline-block;
+    }
+  }
+
+}
+.theme__dark{
+  .cherry-previewer {
+    div[data-type='codeBlock'] {
+      @import '../prism/light';
+    }
+  }
+}
+.theme__dark{
+  .cherry-previewer {
+    div[data-type='codeBlock'] {
+
+      @import '../prism/dark';
+    }
+  }
+}
+
+
+.cherry{
+  .cherry-previewer-codeBlock-content-handler {
+    .cherry-previewer-codeBlock-content-handler__input {
+      position: absolute;
+    }
+  }
+  .cherry-previewer-codeBlock-click-handler {
+    position: absolute;
+    z-index: 1;
+  }
+
+  .cherry-previewer-codeBlock-hover-handler {
+    z-index: 0;
+    position: absolute;
+
+    .cherry-copy-code-block,
+    .cherry-edit-code-block,
+    .cherry-unExpand-code-block{
+      .material-symbols-outlined{
+
+        font-size: 1.2rem;
+      }
+      position: relative;
+      width: 2.5rem; // 25px converted to rem (25 / 16)
+      text-align: center;
+      height: 2.5rem; // 25px converted to rem
+      cursor: pointer;
+      float: right;
+      top: 1rem; // 15px converted to rem (15 / 16)
+      margin-left: -1.5rem; // 27px converted to rem (27 / 16)
+      transition: all 0.3s;
+      z-index: 2;
+      color: var(--panel-border-color);
+      background-color: transparent;
+    }
+
+    .cherry-copy-code-block {
+      right: 0; // 10px converted to rem (10 / 16)
+    }
+
+    .cherry-edit-code-block {
+      right: 3.5rem; // 10px + 25px + 10px converted to rem
+    }
+
+    .cherry-expand-code-block{
+      position: absolute;
+      text-align: center;
+      height: 1.3rem; // 25px -> 1.5625rem
+      border: 1px solid var(--primary-color); // #3582fb
+      cursor: pointer;
+      float: right;
+      border-radius: 0.3125rem; // 5px -> 0.3125rem
+      margin-left: -1.6875rem; // -27px -> -1.6875rem
+      transition: all 0.3s;
+      z-index: 2;
+      color: var(--primary-color); // #3582fb
+      background-color: var(--bg-color); // #eee
+      border-color: var(--primary-color); // #3582fb
+    }
+    .cherry-expand-code-block {
+      top: 2.8125rem; // 45px -> 2.8125rem
+      right: 0.625rem; // 10px -> 0.625rem
+    }
+    .cherry-unExpand-code-block{
+      right: 4rem; // 10px -> 0.625rem
+      &.hidden {
+        display: none;
+      }
+    }
+    .cherry-copy-code-block:hover,
+    .cherry-expand-code-block:hover,
+    .cherry-unExpand-code-block:hover,
+    .cherry-edit-code-block:hover {
+      background-color: var(--hover-bg-color);
+      border-radius: var(--border-radius);
+    }
+
+    .cherry-code-preview-lang-select {
+      position: absolute;
+      transform: translate(0.125rem, -50%);
+    }
+  }
+
+}

package/src/sass/core/Color.scss

@@ -0,0 +1,37 @@
+.cherry{
+  .cherry-color-wrap {
+    display: none;
+    position: fixed;
+    width: auto;
+    padding: 0.3125rem 0.625rem;
+    z-index: 6;
+    background: var(--bg-color);
+
+    h3 {
+      font-size: 0.75rem;
+      margin: 0;
+      font-weight: 400;
+    }
+
+
+    .cherry-color-text, .cherry-color-bg {
+      float: left;
+      width: 8rem;
+      margin: 0.5rem;
+    }
+
+
+    .cherry-color-item {
+      float: left;
+      width: 0.875rem;
+      height: 0.875rem;
+      border: 0.0625rem solid var(--border-color);
+      cursor: pointer;
+
+      &:hover {
+        border: 0.0625rem solid var(--text-color);
+      }
+    }
+  }
+
+}

package/src/sass/core/Detail.scss

@@ -0,0 +1,107 @@
+.cherry-previewer {
+  --detail-bg-color: #eee;
+  --detail-summary-icon-bg:#ccc;
+  --detail-text-color: inherit;
+  --detail-code-bg-color: rgb(127 127 127 / 15%);
+
+  .cherry-detail{
+    position: relative;
+    display: block;
+    margin: 1rem 0;
+    padding: 1.5rem;
+    border-radius: var(--border-radius);
+    background: var(--detail-bg-color);
+    color: var(--detail-text-color);
+    details{
+      summary {
+        position: relative;
+        margin: -1.5rem;
+        padding-block: 1.5rem;
+        padding-inline: 4rem 1.5rem;
+        list-style: none;
+        cursor: pointer;
+
+
+      }
+
+      summary:before{
+        content: " ";
+        position: absolute;
+        inset-inline-start: 1.5rem;
+        top: calc(50% - .75rem);
+        width: 1.5rem;
+        height: 1.5rem;
+        border-radius: var(--border-radius);
+        background: var(--detail-summary-icon-bg);
+      }
+
+      summary:after {
+        content: " ";
+        position: absolute;
+        inset-inline-start: 1.5rem;
+        top: calc(50% - .75rem);
+        width: 1.5rem;
+        height: 1.5rem;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgb(0,0,0,0.5)' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
+        line-height: normal;
+        transition: transform .3s ease;
+        transform: rotate(90deg)
+      }
+
+
+    }
+    &.cherry-detail__multiple {
+      summary {
+        margin: -0.8rem;
+      }
+      .cherry-detail-body{
+        padding: 1rem 1.5rem 1rem 1.5rem;
+      }
+    }
+
+
+    details[open]{
+      summary:after{
+        transform: rotate(180deg);
+      }
+    }
+    .cherry-detail-body {
+      padding: 1rem 1.5rem 0 1.5rem;
+      :last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+
+}
+
+.cherry-editor {
+  .cm-detail-container {
+    color: var(--codemirror-operator-color);
+    font-weight: bold;
+  }
+  .cm-detail-title {
+    color: var(--codemirror-operator-text-color);
+  }
+}
+
+.theme__dark {
+  .cherry-previewer {
+    --detail-bg-color: #2d2d2d;
+
+    --detail-summary-icon-bg: #444444;
+    --detail-text-color: #e0e0e0;
+    --detail-code-bg-color: rgb(0 0 0 / 20%);
+
+    .cherry-detail {
+      details {
+        summary:after {
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgb(224,224,224,0.8)' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
+   
+        }
+      }
+    }
+  }
+}
+

package/src/sass/core/Emoji.scss

@@ -0,0 +1,127 @@
+.cherry{
+
+  .cherry-emoji-wrap {
+    display: none;
+    position: fixed;
+    width:20rem;
+    padding: 0.3125rem 0.625rem;
+    z-index: 6;
+    background: var(--bg-color);
+  }
+
+
+  .cherry-emoji-header {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+    margin-bottom: 0.5rem;
+
+  }
+
+  .cherry-emoji-item-btn {
+    background-color: var(--bg-color);
+    border: none;
+    border-radius: var(--border-radius);
+    padding: 0.5rem;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    &.show{
+      background-color: var(--hover-bg-color);
+    }
+    &:hover {
+      background-color:var(--hover-bg-color);
+    }
+    span.material-symbols-outlined{
+      margin: 0;
+      font-size: 1.2rem;
+    }
+  }
+
+
+  .cherry-emoji-search {
+    width: 100%;
+    margin-bottom: 0;
+    .cherry-emoji-search-input {
+      width: 100%;
+      padding: 0.6rem;
+      border: var(--border);
+      border-radius: var(--border-radius);
+      box-sizing: border-box;
+      background: var(--hover-bg-color);
+      &:focus {
+        border-color: var(--primary-color); /* 焦点时的边框颜色 */
+        outline: none; /* 移除默认的焦点轮廓 */
+      }
+    }
+  }
+
+  .cherry-emoji{
+    margin: 0 .25rem
+  }
+
+
+  .cherry-emoji-body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    .cherry-emoji-panel{
+      display: none;
+      flex-wrap: wrap;
+      justify-content: center;
+      width: 100%;
+      &.show{
+        display: flex;
+      }
+      .cherry-emoji-category {
+        font-size: 1rem;
+        color: var(--text-color);
+        font-weight: bold;
+        padding: 0.3rem;
+        width: 100%;
+      }
+
+      .cherry-emoji-container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        max-height: calc(50vh - 10rem);
+        overflow-y: scroll;
+        padding: 0.5rem 0;
+      }
+      .cherry-emoji-item{
+        cursor: pointer;
+        font-size: 2rem;
+        text-align: center;
+        line-height: 1.5rem;
+        padding: 0.5rem;
+        border-radius: var(--border-radius);
+        transition: background-color 0.3s;
+        &:hover {
+          background: var(--hover-bg-color);
+        }
+      }
+
+
+    }
+  }
+
+
+}
+.cherry-editor{
+  .cm-emoji-container{
+    color:var(--codemirror-operator-color);
+    font-weight: bold;
+  }
+  .cm-emoji-text{
+    color:var(--codemirror-operator-text-color);
+  }
+}
+
+.theme__dark{
+  .cherry-emoji-header {
+    .material-symbols-outlined {
+      color: var(--text-color);
+    }
+  }
+}

package/src/sass/core/Emphasis.scss

@@ -0,0 +1,9 @@
+.cherry-previewer {
+  em {
+    font-style: italic;
+  }
+  b,
+  strong {
+    font-weight: bold;
+  }
+}