cherry-muse 1.0.1

package/src/sass/components/codemirror.scss

@@ -0,0 +1,628 @@
+
+  /* BASICS */
+
+  .CodeMirror {
+    /* Set height, width, borders, and global font properties here */
+    height: 300px;
+    height: auto;
+  }
+  .CodeMirror-scroll {
+    /* Set scrolling behaviour here */
+    overflow-y: hidden;
+    overflow-x: auto;
+  }
+  /* PADDING */
+
+  .CodeMirror-lines {
+    padding: 4px 0;
+    /* Vertical padding around content */
+  }
+  .CodeMirror pre {
+    /* Horizontal padding of content */
+  }
+  .CodeMirror-scrollbar-filler,
+  .CodeMirror-gutter-filler {
+    background-color: white;
+    /* The little square between H and V scrollbars */
+  }
+  /* GUTTER */
+
+  .CodeMirror-gutters {
+    border-right: 1px solid #ddd;
+    background-color: #f7f7f7;
+    white-space: nowrap;
+  }
+  .CodeMirror-linenumbers {} .CodeMirror-linenumber {
+                               padding: 0 3px 0 5px;
+                               text-align: right;
+                               color: #999;
+                             }
+  /* CURSOR */
+
+  .CodeMirror div.CodeMirror-cursor {
+    border-left: 1px solid black;
+    z-index: 3;
+  }
+  /* Shown when moving in bi-directional text */
+
+  .CodeMirror div.CodeMirror-secondarycursor {
+    border-left: 1px solid silver;
+  }
+  .CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
+    width: auto;
+    border: 0;
+    background: #7e7;
+    z-index: 1;
+  }
+  /* Can style cursor different in overwrite (non-insert) mode */
+
+  .CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite {} .cm-tab {
+                                                              display: inline-block;
+                                                            }
+
+  /* DEFAULT THEME */
+
+  .cm-s-default .cm-keyword {
+    color: #708;
+  }
+  .cm-s-default .cm-atom,
+  .cm-s-default.cm-atom {
+    color: #219;
+  }
+  .cm-s-default .cm-number {
+    color: #164;
+  }
+  .cm-s-default .cm-def {
+    color: #00f;
+  }
+  .cm-s-default .cm-variable {
+    color: black;
+  }
+  .cm-s-default .cm-variable-2 {
+    color: #05a;
+  }
+  .cm-s-default .cm-variable-3 {
+    color: #085;
+  }
+  .cm-s-default .cm-property {
+    color: black;
+  }
+  .cm-s-default .cm-operator {
+    color: black;
+  }
+  .cm-s-default .cm-comment,
+  .cm-s-default.cm-comment {
+    color: #a50;
+  }
+  .cm-s-default .cm-string {
+    color: #a11;
+  }
+  .cm-s-default .cm-string-2 {
+    color: #f50;
+  }
+  .cm-s-default .cm-meta {
+    color: #555;
+  }
+  .cm-s-default .cm-qualifier {
+    color: #555;
+  }
+  .cm-s-default .cm-builtin {
+    color: #30a;
+  }
+  .cm-s-default .cm-bracket {
+    color: #997;
+  }
+  .cm-s-default .cm-tag {
+    color: #170;
+  }
+  .cm-s-default .cm-attribute {
+    color: #00c;
+  }
+  .cm-s-default .cm-header,
+  .cm-s-default.cm-header {
+    color: blue;
+  }
+  .cm-s-default .cm-quote,
+  .cm-s-default.cm-quote  {
+    color: #090;
+  }
+  .cm-s-default .cm-hr,
+  .cm-s-default.cm-hr {
+    color: #999;
+  }
+  .cm-s-default .cm-link,
+  .cm-s-default.cm-link {
+    color: #00c;
+  }
+
+  /** sourcemode highlight **/
+
+  .cm-s-default .cm-header,
+  .cm-s-default .cm-property {
+    color: #D94F8A;
+  }
+  .cm-s-default  .cm-header{
+    font-weight: bold;
+  }
+  .cm-s-default  .cm-header-1{
+    font-size: 2rem;
+    line-height: 3rem;
+  }
+
+  .cm-s-default  .cm-header-2{
+    font-size: 1.4rem;
+    line-height: 2rem;
+  }
+
+  .cm-s-default .cm-atom,
+  .cm-s-default .cm-number {
+    color: #958486;
+  }
+
+  .cm-s-default .cm-table-row,
+  .cm-s-default .cm-block-start{
+  }
+
+  .cm-s-default .cm-comment,
+  .cm-s-default .cm-code{
+    color: #4A5A9F;
+  }
+
+  .cm-s-default .cm-tag{
+    color: #a94442;
+  }
+
+  .cm-s-default .cm-string{
+    color: #7e86a9;
+  }
+
+  .cm-s-default .cm-link {
+    color: #C47A0F;
+    text-decoration: underline;
+  }
+
+  .cm-s-default .cm-variable-2,
+  .cm-s-default .cm-variable-1 {
+
+  }
+
+  .cm-s-default .cm-overlay {
+
+  }
+
+  .CodeMirror.cm-s-default div.CodeMirror-cursor{
+    border-left: 3px solid #E4629A;
+  }
+
+  .cm-s-default .CodeMirror-activeline-background {
+    left: -60px;
+    right: -30px;
+    background: rgba(204,204,204,0.2);
+  }
+
+  .cm-s-default  .CodeMirror-gutters {
+    border-right: none;
+  }
+
+  .cm-s-default .cm-trailing-space-new-line:after,
+  .cm-startspace:after,
+  .cm-starttab .cm-tab:after {
+    content: "•";
+    position:absolute;
+    left:0;
+    opacity: 0;
+    font-family: "LetterGothicStd", monospace;
+  }
+
+  .os-windows .cm-startspace:after,
+  .os-windows .cm-starttab .cm-tab:after {
+    left: -0.1em;
+  }
+
+  .cm-starttab .cm-tab:after {
+    content: " ";
+  }
+
+  .cm-startspace, .cm-tab,
+  .cm-starttab,
+  .cm-trailing-space-a,
+  .cm-trailing-space-b,
+  .cm-trailing-space-new-line  {
+    position:relative;
+  }
+
+  .cm-s-default .cm-trailing-space-new-line:after {
+    content: "↓";
+    opacity: 0.3;
+  }
+
+
+  .cm-negative {
+    color: #d44;
+  }
+  .cm-positive {
+    color: #292;
+  }
+  .cm-header,
+  .cm-strong {
+    font-weight: bold;
+  }
+  .cm-del {
+    text-decoration: line-through;
+  }
+  .cm-em {
+    font-style: italic;
+  }
+  .cm-link {
+    text-decoration: underline;
+  }
+  .cm-error {
+    color: #f00;
+  }
+  .cm-invalidchar {
+    color: #f00;
+  }
+  div.CodeMirror span.CodeMirror-matchingbracket {
+    color: #0f0;
+  }
+  div.CodeMirror span.CodeMirror-nonmatchingbracket {
+    color: #f22;
+  }
+  .cm-s-default .CodeMirror-activeline-background {
+    background: inherit;
+  }
+  /* STOP */
+
+  /* The rest of this file contains styles related to the mechanics of
+     the editor. You probably shouldn't touch them. */
+
+  .CodeMirror {
+    position: relative;
+    overflow: hidden;
+    /*background: white;*/
+  }
+  .CodeMirror-scroll {
+    /* 30px is the magic margin used to hide the element's real scrollbars */
+    /* See overflow: hidden in .CodeMirror */
+    margin-bottom: -30px;
+    margin-right: -30px;
+    padding-bottom: 30px;
+    padding-right: 30px;
+    height: 100%;
+    outline: none;
+    /* Prevent dragging from highlighting the element */
+    position: relative;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+  }
+  .CodeMirror-sizer {
+    position: relative;
+  }
+  /* The fake, visible scrollbars. Used to force redraw during scrolling
+     before actuall scrolling happens, thus preventing shaking and
+     flickering artifacts. */
+
+  .CodeMirror-vscrollbar,
+  .CodeMirror-hscrollbar,
+  .CodeMirror-scrollbar-filler,
+  .CodeMirror-gutter-filler {
+    position: absolute;
+    z-index: 6;
+    display: none;
+  }
+  .CodeMirror-vscrollbar {
+    right: 0;
+    top: 0;
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+  .CodeMirror-hscrollbar {
+    bottom: 0;
+    left: 0;
+    overflow-y: hidden;
+    overflow-x: scroll;
+  }
+  .CodeMirror-scrollbar-filler {
+    right: 0;
+    bottom: 0;
+  }
+  .CodeMirror-gutter-filler {
+    left: 0;
+    bottom: 0;
+  }
+  .CodeMirror-gutters {
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding-bottom: 30px;
+    z-index: 3;
+  }
+  .CodeMirror-gutter {
+    white-space: normal;
+    height: 100%;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    padding-bottom: 30px;
+    margin-bottom: -32px;
+    display: inline-block;
+    /* Hack to make IE7 behave */
+    *zoom: 1;
+    *display: inline;
+  }
+  .CodeMirror-gutter-elt {
+    position: absolute;
+    cursor: default;
+    z-index: 4;
+  }
+  .CodeMirror-lines {
+    cursor: text;
+  }
+  .CodeMirror pre {
+    /* Reset some styles that the rest of the page might have set */
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    border-width: 0;
+    background: transparent;
+    font-family: inherit;
+    font-size: 1rem;
+    margin: 0;
+    white-space: pre;
+    word-wrap: normal;
+
+    z-index: 2;
+    position: relative;
+    overflow: visible;
+  }
+  .CodeMirror-wrap pre {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    word-break: normal;
+  }
+  .CodeMirror-code pre {
+    border-right: 30px solid transparent;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+  .CodeMirror-wrap .CodeMirror-code pre {
+    border-right: none;
+    width: auto;
+  }
+  .CodeMirror-linebackground {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 0;
+  }
+  .CodeMirror-linewidget {
+    position: relative;
+    z-index: 2;
+    overflow: auto;
+  }
+  .CodeMirror-widget {
+
+    
+  } 
+  .CodeMirror-wrap .CodeMirror-scroll {
+                          overflow-x: hidden;
+                        }
+  .CodeMirror-measure {
+    position: absolute;
+    width: 100%;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .CodeMirror-measure pre {
+    position: static;
+  }
+  .CodeMirror div.CodeMirror-cursor {
+    position: absolute;
+    visibility: hidden;
+    border-right: none;
+    width: 0;
+  }
+
+  .CodeMirror div.CodeMirror-cursor{
+    visibility: hidden;
+  }
+
+  .CodeMirror-focused div.CodeMirror-cursor {
+    visibility: inherit;
+  }
+  .CodeMirror-selected {
+    background: #d9d9d9;
+  }
+  .CodeMirror-focused .CodeMirror-selected {
+    background: #d7d4f0;
+  }
+  .cm-searching {
+    background: #ffa;
+    background: rgba(255, 255, 0, .4);
+  }
+  /* IE7 hack to prevent it from returning funny offsetTops on the spans */
+
+  .CodeMirror span {
+    *vertical-align: text-bottom;
+  }
+  @media print {
+    /* Hide the cursor when printing */
+    .CodeMirror div.CodeMirror-cursor {
+      visibility: hidden;
+    }
+  }
+
+
+
+/* DARK THEME */
+.theme__dark {
+    .CodeMirror {
+      color: #d4d4d4;
+      background: #1e1e1e;
+    }
+
+    .CodeMirror-gutters {
+      background-color: #1e1e1e;
+      border-right: 1px solid #333;
+    }
+
+    .CodeMirror-linenumber {
+      color: #858585;
+    }
+
+    /* Cursor */
+    .CodeMirror div.CodeMirror-cursor {
+      border-left: 1px solid #d4d4d4;
+    }
+
+    /* Selection */
+    .CodeMirror-selected {
+      background: #264f78;
+    }
+    
+    .CodeMirror-focused .CodeMirror-selected {
+      background: #264f78;
+    }
+
+    /* Syntax Highlighting */
+    .cm-s-default {
+      .cm-header,
+      .cm-property {
+        color: #ff79c6;
+      }
+
+      .cm-keyword {
+        color: #c586c0;
+      }
+
+      .cm-atom,
+      .cm-number {
+        color: #b5cea8;
+      }
+
+      .cm-def {
+        color: #4ec9b0;
+      }
+
+      .cm-variable {
+        color: #9cdcfe;
+      }
+
+      .cm-variable-2 {
+        color: #9cdcfe;
+      }
+
+      .cm-variable-3 {
+        color: #9cdcfe;
+      }
+
+      .cm-comment {
+        color: #6a9955;
+      }
+
+      .cm-string {
+        color: #ce9178;
+      }
+
+      .cm-tag {
+        color: #569cd6;
+      }
+
+      .cm-link {
+        color: #569cd6;
+      }
+
+      .cm-error {
+        color: #f44747;
+      }
+
+      .CodeMirror-activeline-background {
+        background: #2c2c2c;
+      }
+    }
+
+    .CodeMirror-scrollbar-filler,
+    .CodeMirror-gutter-filler {
+      background-color: #1e1e1e;
+    }
+
+    .CodeMirror-gutters {
+      border-right: 1px solid #333;
+      background-color: #1e1e1e;
+    }
+
+    .CodeMirror-linenumber {
+      color: #858585;
+    }
+
+    .CodeMirror div.CodeMirror-cursor {
+      border-left: 1px solid #d4d4d4;
+    }
+
+    .CodeMirror div.CodeMirror-secondarycursor {
+      border-left: 1px solid #747474;
+    }
+
+    .CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
+      background: #5a9e5a;
+    }
+
+    .cm-s-default {
+      .cm-keyword { color: #c586c0; }
+      .cm-atom, &.cm-atom { color: #b5cea8; }
+      .cm-number { color: #b5cea8; }
+      .cm-def { color: #4ec9b0; }
+      .cm-variable { color: #9cdcfe; }
+      .cm-variable-2 { color: #9cdcfe; }
+      .cm-variable-3 { color: #9cdcfe; }
+      .cm-property { color: #9cdcfe; }
+      .cm-operator { color: #d4d4d4; }
+      .cm-comment, &.cm-comment { color: #6a9955; }
+      .cm-string { color: #ce9178; }
+      .cm-string-2 { color: #ce9178; }
+      .cm-meta { color: #9cdcfe; }
+      .cm-qualifier { color: #9cdcfe; }
+      .cm-builtin { color: #4ec9b0; }
+      .cm-bracket { color: #d4d4d4; }
+      .cm-tag { color: #569cd6; }
+      .cm-attribute { color: #9cdcfe; }
+      .cm-header, &.cm-header { color: #ff79c6; }
+      .cm-quote, &.cm-quote { color: #608b4e; }
+      .cm-hr, &.cm-hr { color: #858585; }
+      .cm-link, &.cm-link { color: #569cd6; }
+
+      .cm-header,
+      .cm-property {
+        color: #ff79c6;
+      }
+
+      .cm-atom,
+      .cm-number {
+        color: #b5cea8;
+      }
+
+      .cm-comment,
+      .cm-code {
+        color: #6a9955;
+      }
+
+      .cm-tag {
+        color: #569cd6;
+      }
+
+      .cm-string {
+        color: #ce9178;
+      }
+
+      .cm-link {
+        color: #569cd6;
+      }
+    }
+
+    .CodeMirror.cm-s-default div.CodeMirror-cursor {
+      border-left: 3px solid #ff79c6;
+    }
+  }

package/src/sass/components/dropdown.scss

@@ -0,0 +1,37 @@
+
+.cherry{
+  .cherry-dropdown {
+    position: absolute;
+    width: 8.75rem;
+    min-height: 2.5rem;
+    background: var(--bg-color);
+    //border: 1px solid $borderColor;
+    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);
+    margin-left: -3.75rem;
+    z-index: 11;
+    border-radius: var(--border-radius);
+    max-height: 50vh;
+    overflow-y: auto;
+    &-item {
+      width: 100%;
+      padding: 0 0.9375rem;
+      text-align: left;
+      display: inline-block;
+      height: 2.25rem;
+      line-height: 2.25rem;
+      font-size: 0.775rem;
+      font-style: normal;
+      cursor: pointer;
+      box-sizing: border-box;
+      white-space: nowrap;       /* 不换行 */
+      overflow: hidden;          /* 超出隐藏 */
+      text-overflow: ellipsis;
+      &:hover {
+        background: var(--hover-bg-color);
+        color: var(--hover-text-color);
+      }
+
+    }
+
+  }
+}

package/src/sass/components/editor.scss

@@ -0,0 +1,78 @@
+.cherry-editor {
+  position: relative;
+  padding-top: 0.3125rem;
+  padding-right: 0.3125rem;
+  width: 50%;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  border-right: 0.125rem solid var(--border-color);
+
+  &.cherry-editor--full {
+    width: 100%;
+    padding-right: 0;
+  }
+
+  &.cherry-editor--hidden {
+    display: none;
+  }
+  /*scrollbar-color: transparent transparent;*/
+
+  .CodeMirror {
+    font-family: var(--font-family), serif;
+    background: var(--bg-color);
+    color: var(--text-color);
+    .cm-cursor-line {
+      background-color: var(--hover-bg-color);
+    }
+
+    .CodeMirror-vscrollbar {
+      display: none !important;
+    }
+
+    textarea {
+      font-size: var(--font-size);
+    }
+
+    .CodeMirror-line {
+  /*  padding-left: 2rem;
+      padding-right: 2rem;*/
+    }
+    .CodeMirror-gutters,.CodeMirror-gutter{
+      padding-bottom: 0;
+    }
+
+  }
+  .CodeMirror-scroll {
+    margin-right: 0;
+    padding-right: 0;
+    .CodeMirror-sizer{
+      margin-right: 0;
+      padding-right: 0!important;
+      border-right-width: 0!important;
+    }
+  }
+  .CodeMirror-lines {
+    padding: 0.9375rem 2rem 0.9375rem 2rem;
+    box-sizing: border-box;
+    width: 100%;
+    .base64 {
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 5rem;
+      white-space: nowrap;
+      vertical-align: bottom;
+     // color: darkmagenta !important;
+      font-size: 0.75rem !important;
+    }
+  }
+
+
+  .CodeMirror pre {
+    font-family: var(--font-family), serif;
+    font-size: var(--font-size);
+    line-height: var(--line-height);
+  }
+
+}