@opensumi/ide-core-browser 2.21.13 → 2.22.0

package/src/style/icon/symbol-icons/variable-light.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 4L1 4.5V12.5L1.5 13H4V12H2V5H4V4H1.5ZM14.5 13L15 12.5L15 4.5L14.5 4H12V5L14 5L14 12H12V13H14.5ZM8.79693 5L4.29693 7L4 7.45691V9.95691L4.24275 10.3857L6.74275 11.8857L7.20307 11.9138L11.7031 9.91381L12 9.45691V6.95691L11.7572 6.52816L9.25725 5.02816L8.79693 5ZM5 8.34V9.67381L6.5 10.5738V9.24L5 8.34ZM7.5 9.28184V10.6875L11 9.13197V7.72629L7.5 9.28184ZM10.4178 6.89071L8.96559 6.01936L5.58216 7.52311L7.03441 8.39445L10.4178 6.89071Z" fill="#007ACC"/>
+</svg>

package/src/style/icon.less

@@ -0,0 +1,8 @@
+// 本地IDE集成时引入该文件: @opensumi/ide-core-browser/lib/style/icon.less
+@import '~@opensumi/ide-components/lib/icon/iconfont/iconfont.css';
+@import './octicons/octicons.css';
+@import '~@vscode/codicons/dist/codicon.css';
+
+.kaitian-icon {
+  font-size: 14px;
+}

package/src/style/index.less

@@ -0,0 +1,14 @@
+/**
+ * 这里的设计是为了将 应用本身完整 css 和 normalize 分开
+ * 目的是解决作为组件嵌入其他应用时，避免 normalize/reset 部分的样式冲突和互相覆盖\污染
+ * 需要增加引用时请前往 `entry.less`
+ * 需要增加 reset/normalize 部分时请前往 `normalize.less`
+ */
+@import './entry.less';
+@import './normalize.less';
+
+/**
+ * cdn 上无此样式，因此需放在公共的文件中
+ */
+
+@import './codicons/codicon-animations.css';

package/src/style/monaco-override.less

@@ -0,0 +1,116 @@
+.kt-output-monaco {
+  .margin,
+  .monaco-editor-background {
+    background-color: var(--kt-panelTitle-background) !important;
+  }
+}
+
+#workbench-editor {
+  .monaco-editor {
+    font-size: 13px;
+    // 覆盖 Monaco 搜索输入框样式
+    .find-widget {
+      box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
+    }
+    .find-widget .button {
+      outline: none;
+    }
+    .rename-box {
+      .preview {
+        padding: 3px 3px 0 3px;
+      }
+
+      .rename-input {
+        padding: 3px;
+        outline: 1px solid;
+        width: calc(100% - 6px);
+        line-height: normal;
+        &:focus {
+          outline-color: var(--inputOption-activeBorder);
+        }
+      }
+    }
+
+    .find-widget .monaco-inputbox .input {
+      border-width: 1px;
+      border-style: solid;
+      outline: none;
+      color: var(--input-foreground);
+      border-color: var(--input-background);
+      &:focus {
+        outline-color: var(--inputOption-activeBorder);
+      }
+      &::placeholder {
+        color: var(--input-placeholderForeground);
+      }
+    }
+
+    // 禁用掉 monaco editor 左侧行号的选中效果，避免在断点 context menu 时选中所有行号
+    .margin-view-overlays .line-numbers {
+      user-select: none;
+    }
+
+    .monaco-tl-twistie {
+      box-sizing: initial !important;
+    }
+
+    .debug-hover-widget {
+      position: absolute;
+      margin-top: -1px;
+      z-index: 50;
+    }
+
+    .decorationsOverviewRuler {
+      width: 10px !important;
+    }
+
+    .monaco-scrollable-element {
+      .vertical {
+        .slider {
+          width: 10px !important;
+          left: unset !important;
+          right: 0;
+        }
+      }
+
+      .horizontal {
+        .slider {
+          height: 10px !important;
+        }
+      }
+    }
+  }
+}
+
+.split-view-container {
+  .preview.inline {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.quick-open-overlay .monaco-tree .monaco-tree-row > .content.actions > .primary-action-bar .action-label {
+  margin-right: 4px;
+  margin-left: 4px;
+  margin-top: 0px;
+  background-repeat: no-repeat;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+}
+
+// monaco editor 内部 menu 的分割线
+.monaco-action-bar.vertical .action-label.separator {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.monaco-editor .peekview-widget .head .peekview-title {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.context-view.monaco-menu-container {
+  margin-left: 1px;
+}

package/src/style/normalize.less

@@ -0,0 +1,92 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  // 使用该字体获取与vscode一致的图标表现
+  // 仅mac下可用，windows待区分
+  // https://stackoverflow.com/questions/32660748/how-to-use-apples-new-san-francisco-font-on-a-webpage
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  // 全局默认字体颜色
+  color: var(--foreground);
+  background-color: var(--editor-background);
+  font-size: var(--base-font-size);
+  // 设置 antialiased 会导致整体清晰度降低
+  // -webkit-font-smoothing: antialiased;
+}
+
+:root {
+  --base-font-size: 13px;
+}
+
+html {
+  /* 防止 overlay/modal 撑开页面元素 */
+  overflow: hidden;
+  /* 防止mac上的回退手势 */
+  overscroll-behavior-x: none;
+
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--input-placeholder-foreground);
+  }
+
+  // 全局设置滚动条样式
+  ::-webkit-scrollbar {
+    background: transparent;
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar:hover {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--scrollbarSlider-background);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbarSlider-hoverBackground);
+  }
+
+  ::-webkit-scrollbar-thumb:active {
+    background: var(--scrollbarSlider-activeBackground);
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  a {
+    color: var(--textLink-foreground);
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: var(--textLink-activeForeground);
+    }
+  }
+
+  blockquote {
+    background-color: var(--textBlockQuote-background);
+    border-color: var(--textBlockQuote-border);
+  }
+
+  li {
+    list-style: none;
+  }
+}
+
+/* ---- 该样式主要用于让带 tabindex='-1' 的元素焦点态时拥有高亮边框，以便于实现如Tree，List组件焦点态时的自动高亮边框效果  ---- */
+[tabindex='-1'] {
+  &:focus {
+    outline-width: 1px;
+    outline-style: solid;
+    outline-offset: -1px;
+  }
+}
+/* -------- */
+
+::selection {
+  color: inherit;
+  background-color: var(--selection-background);
+}