@opensumi/ide-preferences 2.21.13 → 2.22.0

package/src/browser/preferences.module.less

@@ -0,0 +1,345 @@
+@base-font-size: 14px;
+
+.preferences {
+  height: 100%;
+  font-size: @base-font-size;
+  overflow: hidden;
+  padding: 16px 32px 0 32px;
+  box-sizing: border-box;
+  min-width: 500px;
+  .preference_noResults {
+    padding: 20px;
+    color: var(--foreground);
+  }
+  .preferences_header {
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    align-items: center;
+
+    height: 40px;
+    .search_pref {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-grow: 1;
+      align-self: flex-end;
+      max-width: 400px;
+      margin-left: 50px;
+      input {
+        width: 100%;
+      }
+    }
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 1px;
+      width: 100%;
+      z-index: 0;
+      background: var(--editorGroup-border);
+    }
+  }
+
+  .preferences_body {
+    height: calc(100% - 40px);
+    margin-top: 8px;
+    .preferences_indexes {
+      .group_item {
+        font-size: @base-font-size;
+        cursor: pointer;
+        white-space: nowrap;
+        user-select: none;
+        margin-bottom: 2px;
+        :global {
+          .kt-icon {
+            max-height: 20px !important;
+          }
+        }
+      }
+
+      .index_item {
+        color: var(--titleBar-inactiveForeground);
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        cursor: pointer;
+      }
+    }
+
+    .preferences_items {
+      height: 100%;
+      width: 100%;
+      flex: 1;
+      user-select: text;
+    }
+    .preference_section {
+      :global(.kt-checkbox-icon) {
+        height: 16px;
+        width: 16px;
+      }
+      :global(.kt-checkbox) {
+        font-size: @base-font-size;
+      }
+      .group_title {
+        font-size: 24px;
+        font-weight: 400;
+        padding: 10px 18px;
+        &:hover {
+          color: var(--kt-tree-hoverForeground);
+          background: var(--kt-tree-hoverBackground);
+        }
+      }
+      .section_title {
+        font-size: 20px;
+        font-weight: 500;
+        padding: 10px 18px;
+        &:hover {
+          color: var(--kt-tree-hoverForeground);
+          background: var(--kt-tree-hoverBackground);
+        }
+      }
+      .preference_item {
+        padding: 18px;
+        border-left: 4px solid transparent;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: space-around;
+        &.modified {
+          position: relative;
+        }
+        &.modified:before {
+          content: '';
+          position: absolute;
+          left: 7px;
+          height: 75%;
+          border-left: 2px solid var(--settings-modifiedItemIndicator);
+        }
+        &:hover {
+          color: var(--kt-tree-hoverForeground);
+          background: var(--kt-tree-hoverBackground);
+        }
+        &.selected {
+          color: var(--kt-tree-inactiveSelectionForeground) !important;
+          background: var(--kt-tree-inactiveSelectionBackground);
+        }
+        &.focused {
+          outline: 1px solid var(--list-focusOutline);
+          outline-offset: -1px;
+        }
+      }
+      .key {
+        flex: 1;
+        padding: 0 10px 10px 0;
+        font-weight: 600;
+        font-size: @base-font-size;
+      }
+      .check {
+        display: flex;
+        align-items: center;
+        :global {
+          .kt-checkbox {
+            margin-right: 2px;
+            display: flex;
+            align-self: flex-start;
+          }
+        }
+        & .desc {
+          padding: 0;
+        }
+      }
+      .desc {
+        flex: 1;
+        padding: 0 10px 10px 0;
+        font-size: @base-font-size;
+        opacity: 0.75;
+        color: var(--descriptionForeground);
+        margin-bottom: 0px;
+        ul {
+          list-style: none;
+        }
+        code {
+          color: var(--editor-foreground);
+        }
+        ul li::before {
+          content: '\2022'; /* content: \2022 is the CSS Code/unicode for a bullet */
+          font-weight: bold;
+          display: inline-block;
+          width: 1em;
+          margin-left: -1em;
+        }
+        p {
+          margin-bottom: auto;
+        }
+      }
+      .control_wrap {
+        input[type='number']::-webkit-outer-spin-button,
+        input[type='number']::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+        .text_control {
+          width: 80%;
+        }
+      }
+      .add_button {
+        margin-left: 10px;
+        padding: 0 8px !important;
+      }
+      .array_items_wrapper {
+        padding-left: 0;
+        position: relative;
+        .array_edit_wrapper {
+          position: absolute;
+          height: 24px;
+          width: 100%;
+          top: 0;
+          left: 0;
+        }
+        .array_edit_input {
+          height: 24px;
+          width: 100%;
+        }
+        .array_edit_input_tip {
+          height: 24px;
+          line-height: 24px;
+          opacity: 0.3;
+        }
+      }
+      .array_items {
+        list-style: none;
+        height: 24px;
+        line-height: 24px;
+        text-indent: 5px;
+        font-size: 12px;
+        color: var(--foreground);
+        position: relative;
+        cursor: pointer;
+        .operate {
+          display: none;
+          position: absolute;
+          right: 10px;
+          top: 0;
+          height: 24px;
+          align-items: center;
+          justify-content: center;
+        }
+        &:hover {
+          color: var(--list-hoverForeground);
+          background-color: var(--list-hoverBackground);
+          .operate {
+            display: flex;
+          }
+        }
+      }
+
+      .array_item {
+        display: inline-block;
+      }
+      .rm_icon {
+        cursor: pointer;
+      }
+      .text_control {
+        min-width: 300px;
+        max-width: 500px;
+        width: 100%;
+      }
+      .select_control {
+        min-width: 300px;
+        max-width: 500px;
+        width: 100%;
+
+        .select_option {
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          color: inherit;
+          &:hover .select_default_option_tips {
+            color: var(--kt-selectDropdown-foreground);
+          }
+        }
+
+        .select_default_option_tips {
+          width: auto;
+          flex: 0;
+          color: var(--kt-selectOption-activeBorder);
+          background-color: transparent;
+        }
+      }
+      .number_control {
+        min-width: 300px;
+        max-width: 500px;
+        width: 100%;
+      }
+    }
+    .preferences_flex_row {
+      display: flex;
+      align-items: center;
+      justify-content: start;
+    }
+  }
+
+  .tabs {
+    padding: 0 !important;
+    font-size: @base-font-size;
+    user-select: none;
+    :global {
+      .kt-tab {
+        padding-left: 10px;
+        padding-right: 10px;
+      }
+    }
+  }
+}
+
+.preference_status {
+  margin-left: 5px;
+  .preference_overwritten {
+    font-size: 12px;
+    opacity: 0.75;
+    text-decoration: underline;
+    text-decoration-color: black;
+    text-underline-position: under;
+    cursor: pointer;
+    opacity: 0.75;
+  }
+  .preference_reset {
+    font-size: @base-font-size;
+    cursor: pointer;
+    display: inline-block;
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
+}
+
+.devider {
+  box-sizing: border-box;
+  font-size: 14px;
+  font-variant: tabular-nums;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  position: relative;
+  margin: 0 3px;
+  display: inline-block;
+  vertical-align: middle;
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    border-top: 0;
+    border-left: 1px solid var(--editorGroup-border);
+    pointer-events: none;
+    transform: translateX(1.5px);
+  }
+  &:hover:after {
+    border-color: transparent;
+  }
+}