vitepress-theme-tui/src/styles/components/code-group.css

A terminal UI theme for VitePress

@layer components {
  .vp-adaptive-theme:not(.vp-code-group) {
    background-color: var(--vp-tui-code-group-bg) !important;
    border-radius: var(--vp-tui-code-group-standalone-border-radius, var(--vp-tui-code-group-border-radius)) !important;
    border-style: var(--vp-tui-code-group-border-style) !important;
    border-color: var(--vp-tui-code-group-border-color) !important;
    border-width: var(--vp-tui-code-group-border-width) !important;
  }

  .vp-code-group .tabs {
    background-color: var(--vp-tui-code-group-tabs-bg) !important;
    border-style: var(--vp-tui-code-group-tabs-border-style) !important;
    border-color: var(--vp-tui-code-group-tabs-border-color) !important;
    border-width: var(--vp-tui-code-group-tabs-border-width) var(--vp-tui-code-group-tabs-border-width)
      var(--vp-tui-code-group-tabs-border-width) var(--vp-tui-code-group-tabs-border-width) !important;
    border-radius: var(--vp-tui-code-group-tabs-border-radius) !important;
    padding: 0 !important;
  }
  .vp-code-group.vp-adaptive-theme,
  .vp-code-group > .blocks {
    border-style: var(--vp-tui-code-group-border-style) !important;
    border-color: var(--vp-tui-code-group-border-color) !important;
    border-width: 0 var(--vp-tui-code-group-tabs-border-width) var(--vp-tui-code-group-tabs-border-width)
      var(--vp-tui-code-group-tabs-border-width) !important;
    border-radius: var(--vp-tui-code-group-border-radius) !important;
  }
  .vp-code-group.vp-adaptive-theme,
  .vp-code-group > .blocks > .vp-adaptive-theme {
    border: none !important;
  }

  .vp-code-group .tabs label {
    height: 28px !important;
    line-height: 28px !important;
    border-radius: var(--vp-tui-code-group-tabs-label-active-border-radius) !important;
  }

  .vp-code-group input:checked + label {
    background-color: var(--vp-tui-code-group-tabs-label-active-bg) !important;
    color: var(--vp-tui-code-group-tabs-label-active-fg) !important;
  }

  .vp-code-group input:checked + label:after {
    width: 0 !important;
    height: 0 !important;
    background-color: transparent !important;
  }

  .vp-doc [class*='language-'] > button.copy {
    border-radius: var(--vp-tui-code-copy-border-radius) !important;
    background-color: var(--vp-tui-code-copy-bg) !important;
    border: var(--vp-tui-code-copy-border-width) solid var(--vp-tui-code-copy-border-color) !important;
  }
  .vp-doc [class*='language-'] > button.copy:hover,
  .vp-doc [class*='language-'] > button.copy.copied {
    background-color: var(--vp-tui-code-copy-bg-hover) !important;
    border-color: var(--vp-tui-code-copy-border-color-hover) !important;
  }

  .vp-doc [class*='language-'] {
    margin: 16px 0 !important;
  }
  .vp-code-group .blocks .vp-adaptive-theme {
    margin-top: 0 !important;
  }
  .vp-code-group .tabs {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}