| 1 | .wterm { |
| 2 | --term-fg: #d4d4d4; |
| 3 | --term-bg: #1e1e1e; |
| 4 | --term-cursor: #aeafad; |
| 5 | |
| 6 | --term-color-0: #1e1e1e; |
| 7 | --term-color-1: #f44747; |
| 8 | --term-color-2: #6a9955; |
| 9 | --term-color-3: #d7ba7d; |
| 10 | --term-color-4: #569cd6; |
| 11 | --term-color-5: #c586c0; |
| 12 | --term-color-6: #4ec9b0; |
| 13 | --term-color-7: #d4d4d4; |
| 14 | --term-color-8: #808080; |
| 15 | --term-color-9: #f44747; |
| 16 | --term-color-10: #6a9955; |
| 17 | --term-color-11: #d7ba7d; |
| 18 | --term-color-12: #569cd6; |
| 19 | --term-color-13: #c586c0; |
| 20 | --term-color-14: #4ec9b0; |
| 21 | --term-color-15: #ffffff; |
| 22 | |
| 23 | --term-font-family: 'Menlo', 'Consolas', 'DejaVu Sans Mono', 'Courier New', monospace; |
| 24 | --term-font-size: 14px; |
| 25 | --term-line-height: 1.2; |
| 26 | --term-row-height: 17px; |
| 27 | |
| 28 | position: relative; |
| 29 | background: var(--term-bg); |
| 30 | color: var(--term-fg); |
| 31 | font-family: var(--term-font-family); |
| 32 | font-size: var(--term-font-size); |
| 33 | line-height: var(--term-line-height); |
| 34 | padding: 12px; |
| 35 | border-radius: 8px; |
| 36 | box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); |
| 37 | outline: none; |
| 38 | overflow: hidden; |
| 39 | overflow-anchor: none; |
| 40 | } |
| 41 | |
| 42 | .wterm:focus, |
| 43 | .wterm:focus-visible { |
| 44 | outline: none; |
| 45 | } |
| 46 | |
| 47 | .term-grid { |
| 48 | display: block; |
| 49 | white-space: pre; |
| 50 | contain: layout paint style; |
| 51 | will-change: contents; |
| 52 | } |
| 53 | |
| 54 | .term-row { |
| 55 | display: block; |
| 56 | height: var(--term-row-height); |
| 57 | line-height: var(--term-row-height); |
| 58 | contain: layout style; |
| 59 | } |
| 60 | |
| 61 | .term-scrollback-spacer { |
| 62 | display: block; |
| 63 | pointer-events: none; |
| 64 | } |
| 65 | |
| 66 | .term-row > span, |
| 67 | .term-row > .term-link, |
| 68 | .term-link > span { |
| 69 | display: inline-block; |
| 70 | height: var(--term-row-height); |
| 71 | vertical-align: top; |
| 72 | } |
| 73 | |
| 74 | .term-link { |
| 75 | color: inherit; |
| 76 | cursor: text; |
| 77 | } |
| 78 | |
| 79 | .wterm.link-modifier-active .term-link:hover, |
| 80 | .term-link:focus-visible { |
| 81 | cursor: pointer; |
| 82 | } |
| 83 | |
| 84 | .wterm.link-modifier-active .term-link:hover > span, |
| 85 | .term-link:focus-visible > span { |
| 86 | text-decoration: underline; |
| 87 | text-underline-offset: 0.15em; |
| 88 | } |
| 89 | |
| 90 | .term-block { |
| 91 | width: 1ch; |
| 92 | overflow: hidden; |
| 93 | } |
| 94 | |
| 95 | .term-wide { |
| 96 | width: 2ch; |
| 97 | overflow: hidden; |
| 98 | } |
| 99 | |
| 100 | .term-cursor { |
| 101 | outline: 1px solid var(--term-cursor); |
| 102 | outline-offset: -1px; |
| 103 | } |
| 104 | |
| 105 | .wterm.focused .term-cursor { |
| 106 | background: var(--term-cursor); |
| 107 | color: var(--term-bg); |
| 108 | outline: none; |
| 109 | } |
| 110 | |
| 111 | .wterm.focused.cursor-blink .term-cursor { |
| 112 | animation: cursor-blink 1s step-end infinite; |
| 113 | } |
| 114 | |
| 115 | @keyframes cursor-blink { |
| 116 | 0%, 100% { background: var(--term-cursor); color: var(--term-bg); } |
| 117 | 50% { background: transparent; color: inherit; } |
| 118 | } |
| 119 | |
| 120 | .wterm.has-scrollback { |
| 121 | overflow-y: auto; |
| 122 | } |
| 123 | |
| 124 | .wterm ::selection { |
| 125 | background: rgba(86, 156, 214, 0.3); |
| 126 | } |
| 127 | |
| 128 | /* Solarized Dark */ |
| 129 | .wterm.theme-solarized-dark { |
| 130 | --term-fg: #839496; |
| 131 | --term-bg: #002b36; |
| 132 | --term-cursor: #93a1a1; |
| 133 | --term-color-0: #073642; |
| 134 | --term-color-1: #dc322f; |
| 135 | --term-color-2: #859900; |
| 136 | --term-color-3: #b58900; |
| 137 | --term-color-4: #268bd2; |
| 138 | --term-color-5: #d33682; |
| 139 | --term-color-6: #2aa198; |
| 140 | --term-color-7: #eee8d5; |
| 141 | --term-color-8: #586e75; |
| 142 | --term-color-9: #cb4b16; |
| 143 | --term-color-10: #586e75; |
| 144 | --term-color-11: #657b83; |
| 145 | --term-color-12: #839496; |
| 146 | --term-color-13: #6c71c4; |
| 147 | --term-color-14: #93a1a1; |
| 148 | --term-color-15: #fdf6e3; |
| 149 | } |
| 150 | |
| 151 | /* Monokai */ |
| 152 | .wterm.theme-monokai { |
| 153 | --term-fg: #f8f8f2; |
| 154 | --term-bg: #272822; |
| 155 | --term-cursor: #f8f8f0; |
| 156 | --term-color-0: #272822; |
| 157 | --term-color-1: #f92672; |
| 158 | --term-color-2: #a6e22e; |
| 159 | --term-color-3: #f4bf75; |
| 160 | --term-color-4: #66d9ef; |
| 161 | --term-color-5: #ae81ff; |
| 162 | --term-color-6: #a1efe4; |
| 163 | --term-color-7: #f8f8f2; |
| 164 | --term-color-8: #75715e; |
| 165 | --term-color-9: #f92672; |
| 166 | --term-color-10: #a6e22e; |
| 167 | --term-color-11: #f4bf75; |
| 168 | --term-color-12: #66d9ef; |
| 169 | --term-color-13: #ae81ff; |
| 170 | --term-color-14: #a1efe4; |
| 171 | --term-color-15: #f9f8f5; |
| 172 | } |
| 173 | |
| 174 | /* Light */ |
| 175 | .wterm.theme-light { |
| 176 | --term-fg: #383a42; |
| 177 | --term-bg: #fafafa; |
| 178 | --term-cursor: #526eff; |
| 179 | --term-color-0: #383a42; |
| 180 | --term-color-1: #e45649; |
| 181 | --term-color-2: #50a14f; |
| 182 | --term-color-3: #c18401; |
| 183 | --term-color-4: #4078f2; |
| 184 | --term-color-5: #a626a4; |
| 185 | --term-color-6: #0184bc; |
| 186 | --term-color-7: #fafafa; |
| 187 | --term-color-8: #a0a1a7; |
| 188 | --term-color-9: #e45649; |
| 189 | --term-color-10: #50a14f; |
| 190 | --term-color-11: #c18401; |
| 191 | --term-color-12: #4078f2; |
| 192 | --term-color-13: #a626a4; |
| 193 | --term-color-14: #0184bc; |
| 194 | --term-color-15: #ffffff; |
| 195 | } |