next-ui3 1.5.0 → 1.5.2

package/theme-chalk/src/preview/text.scss

@@ -0,0 +1,112 @@
+.nt-preview-text {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  &--light {
+    background: #fff;
+
+    pre,
+    code {
+      background: #fff;
+      color: #24292e;
+    }
+  }
+
+  &--dark {
+    background: #1e1e1e;
+
+    pre,
+    code {
+      background: #1e1e1e;
+      color: #d4d4d4;
+    }
+
+    .nt-preview-text__toolbar {
+      border-bottom-color: #333;
+    }
+  }
+
+  &--wrap {
+    pre {
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+  }
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 16px;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+    flex-shrink: 0;
+  }
+
+  &__language {
+    font-size: 12px;
+    color: var(--el-text-color-secondary);
+    text-transform: uppercase;
+  }
+
+  &__toolbar-actions {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+  }
+
+  &__switch-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    font-size: 12px;
+    color: var(--el-text-color-secondary);
+  }
+
+  &__content {
+    flex: 1;
+    overflow: auto;
+
+    pre {
+      margin: 0;
+      padding: 16px;
+      font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+      font-size: 13px;
+      line-height: 1.6;
+      tab-size: 2;
+    }
+
+    code {
+      font-family: inherit;
+    }
+  }
+
+  &__line-numbers {
+    counter-reset: line;
+
+    .line {
+      display: block;
+      width: 100%;
+      position: relative;
+      padding-left: 4em;
+      box-sizing: border-box;
+
+      &::before {
+        position: absolute;
+        left: 0;
+        top: 0;
+        counter-increment: line;
+        content: counter(line);
+        display: inline-block;
+        width: 3em;
+        margin-right: 1em;
+        text-align: right;
+        color: var(--el-text-color-placeholder);
+        user-select: none;
+      }
+    }
+  }
+}

package/theme-chalk/src/preview/video.scss

@@ -0,0 +1,30 @@
+.nt-preview-video {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background: #000;
+
+  &__player {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+
+  &__loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &:fullscreen {
+    .nt-preview-video__player {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}