nodejs.org/packages/ui-components/src/Common/BaseCodeBox/index.module.css at 3eccee6a5b9a673784554a8f421173aa881d08a9 · nodejs/nodejs.org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
@reference "../../styles/index.css";

.root {
  @apply relative
    w-full
    max-w-full
    overflow-x-hidden
    rounded-sm
    border
    border-neutral-200
    bg-white
    dark:border-neutral-900
    dark:bg-neutral-950;

  .content {
    @apply m-0
      min-w-0
      p-4;

    code {
      @apply font-ibm-plex-mono
        font-regular
        scrollbar-thin
        grid
        max-w-full
        [grid-template-columns:minmax(0,1fr)]
        overflow-x-auto
        bg-transparent
        p-0
        text-sm
        leading-snug
        text-neutral-800
        [counter-reset:line]
        dark:text-neutral-400;

      & > [class='line'] {
        @apply relative
          min-w-0
          pl-8
          [overflow-wrap:break-word];

        &:not(:empty:last-child)::before {
          @apply inline-block
            content-[''];
        }

        &:not(:empty:last-child)::after {
          @apply font-ibm-plex-mono
            absolute
            top-0
            left-0
            mr-4
            w-4.5
            text-right
            text-neutral-700
            [content:counter(line)]
            [counter-increment:line]
            dark:text-neutral-600;
        }
      }

      &[class*='plain-text'] {
        @apply font-ibm-plex-mono;
      }
    }

    &[class*='no-line-numbers'] code > [class='line'] {
      @apply pl-0;

      &:not(:empty:last-child)::after {
        @apply content-none
          [counter-reset:none];
      }
    }

    &[class*='no-footer'] {
      @apply pr-12;
    }
  }

  & > .ghostAction {
    @apply absolute
      top-2
      right-2
      z-10
      p-1.5
      opacity-0
      transition-opacity
      duration-150;

    > svg {
      @apply size-4;
    }

    &:focus,
    &:focus-visible {
      @apply opacity-100;
    }
  }

  &:hover > .ghostAction,
  &:focus-within > .ghostAction {
    @apply opacity-100;
  }

  & > .footer {
    @apply flex
      items-center
      justify-between
      border-t
      border-t-neutral-200
      px-3
      py-2
      text-sm
      font-medium
      dark:border-t-neutral-900;

    & > .language {
      @apply text-neutral-800
        dark:text-neutral-400;
    }

    & > .action {
      @apply px-2.5
        py-1
        text-xs
        font-medium;

      > svg {
        @apply size-4;
      }
    }
  }
}