+3 -5

appview/pages/templates/fragments/tabSelector.html

Reviewed

··· 4 4 {{ $active := .Active }} 5 5 {{ $include := .Include }} 6 6 {{ $form := .Form }} 7 7 - <div class="flex justify-between divide-x divide-gray-200 dark:divide-gray-700 rounded border border-gray-200 dark:border-gray-700 overflow-hidden"> 8 8 - {{ $activeTab := "bg-white dark:bg-gray-700 shadow-sm" }} 9 9 - {{ $inactiveTab := "bg-gray-100 dark:bg-gray-800 shadow-inner" }} 7 7 + <div class="btn-group"> 10 8 {{ range $index, $value := $all }} 11 9 {{ $isActive := eq $value.Key $active }} 12 10 {{ if $form }} ··· 18 16 hx-push-url="true" 19 17 hx-target="body" 20 18 hx-on:htmx:config-request="if(!event.detail.parameters.q) delete event.detail.parameters.q" 21 21 - class="p-2 whitespace-nowrap flex justify-center items-center gap-2 text-sm w-full hover:no-underline text-center {{ if $isActive }} {{$activeTab }} {{ else }} {{ $inactiveTab }} {{ end }}"> 19 19 + class="btn-group-item {{ if $isActive }}active{{ end }}"> 22 20 {{ if $value.Icon }} 23 21 {{ i $value.Icon "size-4" }} 24 22 {{ end }} ··· 38 36 hx-target="body" 39 37 hx-on:htmx:config-request="if(!event.detail.parameters.q) delete event.detail.parameters.q" 40 38 {{ end }} 41 41 - class="p-2 whitespace-nowrap flex justify-center items-center gap-2 text-sm w-full block hover:no-underline text-center {{ if $isActive }} {{$activeTab }} {{ else }} {{ $inactiveTab }} {{ end }}"> 39 39 + class="btn-group-item {{ if $isActive }}active{{ end }}"> 42 40 {{ if $value.Icon }} 43 41 {{ i $value.Icon "size-4" }} 44 42 {{ end }}

+1 -1

appview/pages/templates/repo/fragments/diff.html

Reviewed

··· 231 231 <label 232 232 title="Expand/Collapse diffs" 233 233 for="collapseToggle" 234 234 - class="btn font-normal normal-case p-2" 234 234 + class="btn font-normal normal-case" 235 235 > 236 236 <input type="checkbox" id="collapseToggle" class="peer/collapse hidden" checked/> 237 237 <span class="peer-checked/collapse:hidden inline-flex items-center gap-2">

+4 -6

appview/pages/templates/repo/fragments/diffOpts.html

Reviewed

··· 4 4 {{ $active = "split" }} 5 5 {{ end }} 6 6 7 7 - {{ $activeTab := "bg-white dark:bg-gray-800 shadow-sm cursor-default" }} 8 8 - {{ $inactiveTab := "hover:text-gray-900 dark:hover:text-white" }} 9 7 {{ $usePost := ne .RefreshUrl "" }} 10 8 {{ $target := .Target }} 11 9 {{ if eq $target "" }}{{ $target = "#diff-files" }}{{ end }} 12 10 {{ $field := .Field }} 13 11 {{ if eq $field "" }}{{ $field = "diff" }}{{ end }} 14 12 15 15 - <div class="inline-flex items-center gap-1 p-1 bg-slate-100 dark:bg-gray-900 rounded-md text-gray-600 dark:text-gray-300 border dark:border-gray-700" 16 16 - hx-on::before-request="const t=event.target.closest('button'); if(!t||t.classList.contains('shadow-sm'))return event.preventDefault(); this.querySelectorAll('button').forEach(b => { const active=b===t; b.classList.toggle('bg-white',active); b.classList.toggle('dark:bg-gray-800',active); b.classList.toggle('shadow-sm',active); b.classList.toggle('cursor-default',active); b.classList.toggle('hover:text-gray-900',!active); b.classList.toggle('dark:hover:text-white',!active); })"> 13 13 + <div class="btn-group" 14 14 + hx-on::before-request="const t=event.target.closest('button');if(!t||t.classList.contains('active'))return event.preventDefault();this.querySelectorAll('button').forEach(b=>b.classList.toggle('active',b===t))"> 17 15 <button 18 16 {{ if $usePost }} 19 17 hx-post="{{ .RefreshUrl }}" ··· 27 25 hx-select="{{ $target }}" 28 26 hx-swap="outerHTML" 29 27 hx-indicator="this" 30 30 - class="group flex items-center justify-center gap-2 px-3 py-1 text-sm whitespace-nowrap rounded hover:no-underline {{ if eq $active "unified" }} {{ $activeTab }} {{ else }} {{ $inactiveTab }} {{ end }}"> 28 28 + class="group btn-group-item {{ if eq $active "unified" }}active{{ end }}"> 31 29 {{ i "square-split-vertical" "size-4 inline group-[.htmx-request]:hidden" }} 32 30 {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }} 33 31 unified ··· 45 43 hx-select="{{ $target }}" 46 44 hx-swap="outerHTML" 47 45 hx-indicator="this" 48 48 - class="group flex items-center justify-center gap-2 px-3 py-1 text-sm whitespace-nowrap rounded hover:no-underline {{ if eq $active "split" }} {{ $activeTab }} {{ else }} {{ $inactiveTab }} {{ end }}"> 46 46 + class="group btn-group-item {{ if eq $active "split" }}active{{ end }}"> 49 47 {{ i "square-split-horizontal" "size-4 inline group-[.htmx-request]:hidden" }} 50 48 {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }} 51 49 split

+5 -8

appview/pages/templates/repo/pulls/fragments/pullStepDetails.html

Reviewed

··· 53 53 {{ $placeholder := .Placeholder }} 54 54 {{ $previewUrl := .PreviewUrl }} 55 55 <div class="flex flex-col gap-2" data-md-editor="{{ $id }}"> 56 56 - {{ $tabClasses := "group flex items-center gap-2 px-3 py-1 text-sm whitespace-nowrap rounded hover:no-underline data-[active=true]:bg-white data-[active=true]:dark:bg-gray-800 data-[active=true]:shadow-sm data-[active=true]:cursor-default data-[active=false]:hover:text-gray-900 data-[active=false]:dark:hover:text-white" }} 57 57 - <div class="inline-flex items-center gap-1 p-1 bg-slate-100 dark:bg-gray-900 rounded-md text-gray-600 dark:text-gray-300 self-start border dark:border-gray-700"> 56 56 + <div class="btn-group self-start text-gray-600 dark:text-gray-300"> 58 57 <button type="button" data-md-mode="write" 59 59 - data-active="true" 60 60 - class="{{ $tabClasses }}"> 61 61 - {{ i "pencil" "w-3.5 h-3.5 inline group-[.htmx-request]:hidden" }} 58 58 + class="btn-group-item active group"> 59 59 + {{ i "pencil" "w-3.5 h-3.5" }} 62 60 Write 63 61 </button> 64 62 <button type="button" data-md-mode="preview" 65 65 - data-active="false" 66 63 hx-post="{{ $previewUrl }}" 67 64 hx-vals='js:{body: document.querySelector("[data-md-editor=\"{{ $id }}\"] textarea").value}' 68 65 hx-params="body" 69 66 hx-target="[data-md-editor='{{ $id }}'] [data-md-preview]" 70 67 hx-swap="innerHTML" 71 68 hx-indicator="this" 72 72 - class="{{ $tabClasses }}"> 69 69 + class="btn-group-item group"> 73 70 {{ i "eye" "w-3.5 h-3.5 inline group-[.htmx-request]:hidden" }} 74 71 {{ i "loader-circle" "w-3.5 h-3.5 animate-spin hidden group-[.htmx-request]:inline" }} 75 72 Preview ··· 138 135 p.classList.toggle('hidden', p.dataset.mdPanel !== mode); 139 136 }); 140 137 editor.querySelectorAll('[data-md-mode]').forEach(b => { 141 141 - b.dataset.active = (b === btn) ? 'true' : 'false'; 138 138 + b.classList.toggle('active', b === btn); 142 139 }); 143 140 }); 144 141 })();

+2 -2

appview/pages/templates/repo/pulls/fragments/pullStepReview.html

Reviewed

··· 265 265 266 266 <div class="flex-grow"></div> 267 267 268 268 - <label title="Expand/Collapse diffs" for="{{ $colId }}" class="btn font-normal normal-case p-2"> 268 268 + <label title="Expand/Collapse diffs" for="{{ $colId }}" class="btn font-normal normal-case"> 269 269 <input type="checkbox" id="{{ $colId }}" class="peer/collapse hidden"/> 270 270 <span class="peer-checked/collapse:hidden inline-flex items-center gap-2"> 271 271 {{ i "unfold-vertical" "w-4 h-4" }} ··· 436 436 437 437 <div class="flex-grow"></div> 438 438 439 439 - <label title="Expand/Collapse diffs" for="composeCollapseToggle" class="btn font-normal normal-case p-2"> 439 439 + <label title="Expand/Collapse diffs" for="composeCollapseToggle" class="btn font-normal normal-case"> 440 440 <input type="checkbox" id="composeCollapseToggle" class="peer/collapse hidden"/> 441 441 <span class="peer-checked/collapse:hidden inline-flex items-center gap-2"> 442 442 {{ i "unfold-vertical" "w-4 h-4" }}

+2 -2

appview/pages/templates/user/settings/profile.html

Reviewed

··· 160 160 <button 161 161 popovertarget="deactivate-modal" 162 162 popovertargetaction="toggle" 163 163 - class="btn flex items-center gap-2 text-sm text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300 border-amber-300 dark:border-amber-600 cursor-pointer"> 163 163 + class="btn flex items-center gap-2 text-sm text-amber-600 hover:text-amber-700 dark:text-amber-400 dark:hover:text-amber-300 cursor-pointer"> 164 164 {{ i "pause" "size-4" }} 165 165 deactivate account 166 166 </button> ··· 168 168 <button 169 169 popovertarget="delete-modal" 170 170 popovertargetaction="toggle" 171 171 - class="btn flex items-center gap-2 text-sm text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 border-red-300 dark:border-red-600 cursor-pointer"> 171 171 + class="btn flex items-center gap-2 text-sm text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 cursor-pointer"> 172 172 {{ i "trash-2" "size-4" }} 173 173 delete account 174 174 </button>

+1029 -854

input.css

Reviewed

··· 2 2 @tailwind components; 3 3 @tailwind utilities; 4 4 @layer base { 5 5 - @font-face { 6 6 - font-family: "InterVariable"; 7 7 - src: url("/static/fonts/InterVariable.woff2") format("woff2"); 8 8 - font-weight: normal; 9 9 - font-style: normal; 10 10 - font-display: swap; 11 11 - } 5 5 + @font-face { 6 6 + font-family: "InterVariable"; 7 7 + src: url("/static/fonts/InterVariable.woff2") format("woff2"); 8 8 + font-weight: normal; 9 9 + font-style: normal; 10 10 + font-display: swap; 11 11 + } 12 12 13 13 - @font-face { 14 14 - font-family: "InterVariable"; 15 15 - src: url("/static/fonts/InterVariable-Italic.woff2") format("woff2"); 16 16 - font-weight: normal; 17 17 - font-style: italic; 18 18 - font-display: swap; 19 19 - } 13 13 + @font-face { 14 14 + font-family: "InterVariable"; 15 15 + src: url("/static/fonts/InterVariable-Italic.woff2") format("woff2"); 16 16 + font-weight: normal; 17 17 + font-style: italic; 18 18 + font-display: swap; 19 19 + } 20 20 21 21 - @font-face { 22 22 - font-family: "InterVariable"; 23 23 - src: url("/static/fonts/InterDisplay-Bold.woff2") format("woff2"); 24 24 - font-weight: bold; 25 25 - font-style: normal; 26 26 - font-display: swap; 27 27 - } 21 21 + @font-face { 22 22 + font-family: "InterVariable"; 23 23 + src: url("/static/fonts/InterDisplay-Bold.woff2") format("woff2"); 24 24 + font-weight: bold; 25 25 + font-style: normal; 26 26 + font-display: swap; 27 27 + } 28 28 29 29 - @font-face { 30 30 - font-family: "InterVariable"; 31 31 - src: url("/static/fonts/InterDisplay-BoldItalic.woff2") format("woff2"); 32 32 - font-weight: bold; 33 33 - font-style: italic; 34 34 - font-display: swap; 35 35 - } 29 29 + @font-face { 30 30 + font-family: "InterVariable"; 31 31 + src: url("/static/fonts/InterDisplay-BoldItalic.woff2") format("woff2"); 32 32 + font-weight: bold; 33 33 + font-style: italic; 34 34 + font-display: swap; 35 35 + } 36 36 37 37 - @font-face { 38 38 - font-family: "IBMPlexMono"; 39 39 - src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2"); 40 40 - font-weight: normal; 41 41 - font-style: normal; 42 42 - font-display: swap; 43 43 - } 37 37 + @font-face { 38 38 + font-family: "IBMPlexMono"; 39 39 + src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2"); 40 40 + font-weight: normal; 41 41 + font-style: normal; 42 42 + font-display: swap; 43 43 + } 44 44 45 45 - @font-face { 46 46 - font-family: "IBMPlexMono"; 47 47 - src: url("/static/fonts/IBMPlexMono-Italic.woff2") format("woff2"); 48 48 - font-weight: normal; 49 49 - font-style: italic; 50 50 - font-display: swap; 51 51 - } 45 45 + @font-face { 46 46 + font-family: "IBMPlexMono"; 47 47 + src: url("/static/fonts/IBMPlexMono-Italic.woff2") format("woff2"); 48 48 + font-weight: normal; 49 49 + font-style: italic; 50 50 + font-display: swap; 51 51 + } 52 52 + 53 53 + @font-face { 54 54 + font-family: "IBMPlexMono"; 55 55 + src: url("/static/fonts/IBMPlexMono-Bold.woff2") format("woff2"); 56 56 + font-weight: bold; 57 57 + font-style: normal; 58 58 + font-display: swap; 59 59 + } 52 60 53 53 - @font-face { 54 54 - font-family: "IBMPlexMono"; 55 55 - src: url("/static/fonts/IBMPlexMono-Bold.woff2") format("woff2"); 56 56 - font-weight: bold; 57 57 - font-style: normal; 58 58 - font-display: swap; 59 59 - } 61 61 + @font-face { 62 62 + font-family: "IBMPlexMono"; 63 63 + src: url("/static/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2"); 64 64 + font-weight: bold; 65 65 + font-style: italic; 66 66 + font-display: swap; 67 67 + } 60 68 61 61 - @font-face { 62 62 - font-family: "IBMPlexMono"; 63 63 - src: url("/static/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2"); 64 64 - font-weight: bold; 65 65 - font-style: italic; 66 66 - font-display: swap; 67 67 - } 69 69 + ::selection { 70 70 + @apply bg-yellow-400 text-black bg-opacity-30 dark:bg-yellow-600 dark:bg-opacity-50 dark:text-white; 71 71 + } 68 72 69 69 - ::selection { 70 70 - @apply bg-yellow-400 text-black bg-opacity-30 dark:bg-yellow-600 dark:bg-opacity-50 dark:text-white; 73 73 + @layer base { 74 74 + html { 75 75 + font-size: 14px; 76 76 + scrollbar-gutter: stable; 77 77 + } 78 78 + @supports (font-variation-settings: normal) { 79 79 + html { 80 80 + font-feature-settings: 81 81 + "kern" 1, 82 82 + "liga" 1, 83 83 + "cv05" 1, 84 84 + "tnum" 1; 85 85 + } 71 86 } 72 87 73 73 - @layer base { 74 74 - html { 75 75 - font-size: 14px; 76 76 - scrollbar-gutter: stable; 77 77 - } 78 78 - @supports (font-variation-settings: normal) { 79 79 - html { 80 80 - font-feature-settings: 81 81 - "kern" 1, 82 82 - "liga" 1, 83 83 - "cv05" 1, 84 84 - "tnum" 1; 85 85 - } 86 86 - } 88 88 + a { 89 89 + @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300; 90 90 + } 87 91 88 88 - a { 89 89 - @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300; 90 90 - } 92 92 + label { 93 93 + @apply block text-gray-900 text-sm py-2 dark:text-gray-100; 94 94 + } 91 95 92 92 - label { 93 93 - @apply block text-gray-900 text-sm py-2 dark:text-gray-100; 94 94 - } 95 95 - 96 96 - input, 97 97 - textarea { 98 98 - @apply block rounded p-3 96 96 + input, 97 97 + textarea { 98 98 + @apply block rounded p-3 99 99 bg-gray-50 dark:bg-gray-800 dark:text-white 100 100 border border-gray-300 dark:border-gray-600 101 101 focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-500; 102 102 - } 103 103 - 104 104 - input[type="checkbox"] { 105 105 - @apply appearance-none size-4 p-0 rounded 102 102 + } 103 103 + 104 104 + input[type="checkbox"] { 105 105 + @apply appearance-none size-4 p-0 rounded 106 106 bg-transparent border border-gray-200 107 107 hover:bg-gray-100 108 108 checked:bg-gray-900 checked:border-transparent ··· 121 121 dark:disabled:checked:bg-gray-500 dark:disabled:checked:border-transparent 122 122 dark:disabled:indeterminate:bg-gray-700 dark:disabled:indeterminate:border-gray-600 123 123 focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-500; 124 124 - background-position: center; 125 125 - background-repeat: no-repeat; 126 126 - background-size: 12px; 127 127 - } 128 128 - input[type="checkbox"]:checked { 129 129 - background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M10 3 4.5 8.5 2 6' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); 130 130 - } 131 131 - input[type="checkbox"]:indeterminate { 132 132 - background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='white' stroke-width='1.5' stroke-linecap='round'/></svg>"); 133 133 - } 134 134 - input[type="checkbox"]:disabled:indeterminate { 135 135 - background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(156,163,175)' stroke-width='1.5' stroke-linecap='round'/></svg>"); 136 136 - } 137 137 - @media (prefers-color-scheme: dark) { 138 138 - input[type="checkbox"]:checked { 139 139 - background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M10 3 4.5 8.5 2 6' stroke='rgb(17,24,39)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); 140 140 - } 141 141 - input[type="checkbox"]:indeterminate { 142 142 - background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(17,24,39)' stroke-width='1.5' stroke-linecap='round'/></svg>"); 143 143 - } 144 144 - input[type="checkbox"]:disabled:indeterminate { 145 145 - background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(107,114,128)' stroke-width='1.5' stroke-linecap='round'/></svg>"); 146 146 - } 147 147 - } 148 148 - 149 149 - input[type="radio"] { 150 150 - @apply appearance-none size-4 p-0 rounded-full bg-transparent border 124 124 + background-position: center; 125 125 + background-repeat: no-repeat; 126 126 + background-size: 12px; 127 127 + } 128 128 + input[type="checkbox"]:checked { 129 129 + background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M10 3 4.5 8.5 2 6' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); 130 130 + } 131 131 + input[type="checkbox"]:indeterminate { 132 132 + background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='white' stroke-width='1.5' stroke-linecap='round'/></svg>"); 133 133 + } 134 134 + input[type="checkbox"]:disabled:indeterminate { 135 135 + background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(156,163,175)' stroke-width='1.5' stroke-linecap='round'/></svg>"); 136 136 + } 137 137 + @media (prefers-color-scheme: dark) { 138 138 + input[type="checkbox"]:checked { 139 139 + background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M10 3 4.5 8.5 2 6' stroke='rgb(17,24,39)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); 140 140 + } 141 141 + input[type="checkbox"]:indeterminate { 142 142 + background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(17,24,39)' stroke-width='1.5' stroke-linecap='round'/></svg>"); 143 143 + } 144 144 + input[type="checkbox"]:disabled:indeterminate { 145 145 + background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(107,114,128)' stroke-width='1.5' stroke-linecap='round'/></svg>"); 146 146 + } 147 147 + } 148 148 + 149 149 + input[type="radio"] { 150 150 + @apply appearance-none size-4 p-0 rounded-full bg-transparent border 151 151 152 152 border-gray-400 hover:border-gray-900 153 153 hover:bg-gray-200 ··· 168 168 169 169 focus:outline-none focus:ring-1 170 170 focus:ring-gray-400 dark:focus:ring-gray-500; 171 171 - 172 172 - background-position: center; 173 173 - background-repeat: no-repeat; 174 174 - background-size: 8px; 175 175 - } 176 176 - input[type="radio"]:checked { 177 177 - background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(17,24,39)'/></svg>"); 178 178 - } 179 179 - input[type="radio"]:disabled:checked { 180 180 - background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(209,213,219)'/></svg>"); 181 181 - } 182 182 - @media (prefers-color-scheme: dark) { 183 183 - input[type="radio"]:checked { 184 184 - background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(243,244,246)'/></svg>"); 185 185 - } 186 186 - input[type="radio"]:disabled:checked { 187 187 - background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(107,114,128)'/></svg>"); 188 188 - } 189 189 - } 190 171 191 191 - details summary::-webkit-details-marker { 192 192 - display: none; 193 193 - } 172 172 + background-position: center; 173 173 + background-repeat: no-repeat; 174 174 + background-size: 8px; 175 175 + } 176 176 + input[type="radio"]:checked { 177 177 + background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(17,24,39)'/></svg>"); 178 178 + } 179 179 + input[type="radio"]:disabled:checked { 180 180 + background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(209,213,219)'/></svg>"); 181 181 + } 182 182 + @media (prefers-color-scheme: dark) { 183 183 + input[type="radio"]:checked { 184 184 + background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(243,244,246)'/></svg>"); 185 185 + } 186 186 + input[type="radio"]:disabled:checked { 187 187 + background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(107,114,128)'/></svg>"); 188 188 + } 189 189 + } 194 190 195 195 - code { 196 196 - @apply font-mono rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white; 197 197 - } 191 191 + details summary::-webkit-details-marker { 192 192 + display: none; 198 193 } 199 194 200 200 - @layer components { 201 201 - .btn { 202 202 - @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center justify-center 203 203 - bg-transparent px-2 pb-[0.2rem] text-sm text-gray-900 204 204 - before:absolute before:inset-0 before:-z-10 before:block before:rounded 205 205 - before:border before:border-gray-200 before:bg-white 206 206 - before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.1),0_1px_0_0_rgba(0,0,0,0.04)] 207 207 - before:content-[''] before:transition-all before:duration-150 before:ease-in-out 208 208 - hover:before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.15),0_2px_1px_0_rgba(0,0,0,0.06)] 209 209 - hover:before:bg-gray-50 210 210 - dark:hover:before:bg-gray-700 211 211 - active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.1)] 212 212 - focus:outline-none focus-visible:before:outline focus-visible:before:outline-2 focus-visible:before:outline-gray-400 213 213 - disabled:cursor-not-allowed disabled:opacity-50 214 214 - dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700; 215 215 - } 195 195 + code { 196 196 + @apply font-mono rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white; 197 197 + } 198 198 + } 216 199 217 217 - .btn-flat { 218 218 - @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center justify-center 219 219 - bg-transparent px-2 pb-[0.2rem] text-sm text-gray-900 220 220 - before:absolute before:inset-0 before:-z-10 before:block before:rounded 221 221 - before:border before:border-gray-200 before:bg-white 222 222 - before:content-[''] before:transition-all before:duration-150 before:ease-in-out 223 223 - hover:before:bg-gray-50 224 224 - dark:hover:before:bg-gray-700 225 225 - focus:outline-none focus-visible:before:outline focus-visible:before:outline-2 focus-visible:before:outline-gray-400 226 226 - disabled:cursor-not-allowed disabled:opacity-50 227 227 - dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700; 228 228 - } 200 200 + @layer components { 201 201 + .btn { 202 202 + @apply relative z-10 inline-flex overflow-hidden items-center justify-center 203 203 + min-h-[32px] px-2 py-[6px] 204 204 + rounded border border-gray-200 dark:border-gray-700 205 205 + bg-white dark:bg-gray-800 206 206 + text-sm text-gray-900 dark:text-gray-100 207 207 + transition-all duration-150 ease-in-out 208 208 + outline-transparent cursor-pointer 209 209 + focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-400 dark:focus-visible:outline-gray-600; 229 210 230 230 - .btn-create { 231 231 - @apply btn text-white 232 232 - before:bg-green-600 hover:before:bg-green-700 233 233 - dark:before:bg-green-700 dark:hover:before:bg-green-800 234 234 - before:border before:border-green-700 hover:before:border-green-800 235 235 - focus-visible:before:outline-green-500 236 236 - disabled:before:bg-green-400 dark:disabled:before:bg-green-600; 237 237 - } 211 211 + @apply before:absolute before:inset-0 before:-z-10 before:block before:rounded-sm before:content-[''] 212 212 + before:transition-all before:duration-150 before:ease-in-out 213 213 + before:shadow-[inset_0_-2px_0_0_theme(colors.gray.200)] dark:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900)]; 238 214 239 239 - .btn-cancel { 240 240 - @apply btn text-white 241 241 - before:bg-red-600 hover:before:bg-red-700 242 242 - dark:before:bg-red-700 dark:hover:before:bg-red-800 243 243 - before:border before:border-red-700 hover:before:border-red-800 244 244 - focus-visible:before:outline-red-500 245 245 - disabled:before:bg-red-400 dark:disabled:before:bg-red-600; 246 246 - } 215 215 + @apply hover:bg-gray-50 dark:hover:bg-gray-700 216 216 + hover:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.300)] dark:hover:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.800)] 217 217 + active:before:shadow-[inset_0_2px_2px_0_theme(colors.gray.200)] dark:active:before:shadow-[inset_0_2px_2px_0_theme(colors.gray.900)] 218 218 + disabled:cursor-not-allowed disabled:opacity-50; 219 219 + } 247 220 248 248 - .prose { 249 249 - overflow-wrap: anywhere; 250 250 - } 221 221 + .btn-flat { 222 222 + @apply inline-flex items-center justify-center 223 223 + min-h-7 px-2 py-[6px] 224 224 + dark:bg-gray-800 dark:border-gray-700 225 225 + text-sm text-gray-900 dark:text-gray-100 cursor-pointer 226 226 + focus:outline-none 227 227 + focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-400 228 228 + dark:hover:text-gray-400 229 229 + disabled:cursor-not-allowed disabled:opacity-50; 230 230 + } 251 231 252 252 - .prose td, 253 253 - .prose th { 254 254 - overflow-wrap: normal; 255 255 - } 232 232 + .btn-create { 233 233 + @apply btn text-white 234 234 + bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 235 235 + border border-green-700 hover:border-green-800 236 236 + focus-visible:outline-green-500 237 237 + disabled:bg-green-400 dark:disabled:bg-green-600 238 238 + before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900/25%)] 239 239 + hover:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900/25%)] 240 240 + active:before:shadow-[inset_0_2px_2px_0_theme(colors.gray.900/50%)]; 241 241 + } 256 242 257 257 - .prose hr { 258 258 - @apply my-2; 259 259 - } 243 243 + .btn-cancel { 244 244 + @apply btn text-white 245 245 + bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 246 246 + border border-red-700 hover:border-red-800 247 247 + focus-visible:outline-red-500 248 248 + disabled:bg-red-400 dark:disabled:bg-red-600; 249 249 + } 260 250 261 261 - .prose li:has(input) { 262 262 - @apply list-none; 263 263 - } 251 251 + .btn-group { 252 252 + @apply inline-flex items-center 253 253 + max-h-[32px] 254 254 + rounded border border-gray-200 dark:border-gray-700 255 255 + divide-x divide-gray-200 dark:divide-gray-700 256 256 + overflow-hidden; 257 257 + } 264 258 265 265 - .prose ul:has(input) { 266 266 - @apply pl-2; 267 267 - } 259 259 + .btn-group-item { 260 260 + @apply btn-flat min-h-[30px] gap-1.5 261 261 + bg-gray-50 dark:bg-gray-900 262 262 + border-y-0 263 263 + hover:text-gray-600 dark:hover:text-gray-400; 264 264 + } 268 265 269 269 - .prose .heading .anchor { 270 270 - @apply no-underline mx-2 opacity-0; 271 271 - } 266 266 + .btn-group-item.active { 267 267 + @apply btn min-h-[30px] rounded-none border-y-0 268 268 + before:border-none before:rounded-none before:bg-inherit; 272 269 273 273 - .prose .heading:hover .anchor { 274 274 - @apply opacity-70; 275 275 - } 270 270 + &:first-child { 271 271 + @apply border-none before:rounded-l-sm; 272 272 + } 273 273 + &:last-child { 274 274 + @apply border-y-0 border-r-0 border-l before:rounded-r-sm; 275 275 + } 276 276 + } 276 277 277 277 - .prose .heading .anchor:hover { 278 278 - @apply opacity-70; 279 279 - } 278 278 + .prose { 279 279 + overflow-wrap: anywhere; 280 280 + } 280 281 281 281 - .prose h1:target, 282 282 - .prose h2:target, 283 283 - .prose h3:target, 284 284 - .prose h4:target, 285 285 - .prose h5:target, 286 286 - .prose h6:target { 287 287 - @apply bg-yellow-200/30 dark:bg-yellow-600/30; 288 288 - } 282 282 + .prose td, 283 283 + .prose th { 284 284 + overflow-wrap: normal; 285 285 + } 289 286 290 290 - .prose a.footnote-backref { 291 291 - @apply no-underline; 292 292 - } 287 287 + .prose hr { 288 288 + @apply my-2; 289 289 + } 293 290 294 294 - .prose a.mention { 295 295 - @apply no-underline hover:underline font-bold; 296 296 - } 291 291 + .prose li:has(input) { 292 292 + @apply list-none; 293 293 + } 297 294 298 298 - .prose li { 299 299 - @apply my-0 py-0; 300 300 - } 295 295 + .prose ul:has(input) { 296 296 + @apply pl-2; 297 297 + } 301 298 302 302 - .prose ul, 303 303 - .prose ol { 304 304 - @apply my-1 py-0; 305 305 - } 299 299 + .prose .heading .anchor { 300 300 + @apply no-underline mx-2 opacity-0; 301 301 + } 306 302 307 307 - .prose img { 308 308 - display: inline; 309 309 - margin: 0; 310 310 - vertical-align: middle; 311 311 - } 303 303 + .prose .heading:hover .anchor { 304 304 + @apply opacity-70; 305 305 + } 312 306 313 313 - .prose input { 314 314 - @apply inline-block my-0 mb-1 mx-1; 307 307 + .prose .heading .anchor:hover { 308 308 + @apply opacity-70; 309 309 + } 315 310 316 316 - &[type="checkbox"] { 317 317 - @apply m-0 mr-1; 318 318 - } 319 319 - } 311 311 + .prose h1:target, 312 312 + .prose h2:target, 313 313 + .prose h3:target, 314 314 + .prose h4:target, 315 315 + .prose h5:target, 316 316 + .prose h6:target { 317 317 + @apply bg-yellow-200/30 dark:bg-yellow-600/30; 318 318 + } 320 319 320 320 + .prose a.footnote-backref { 321 321 + @apply no-underline; 322 322 + } 321 323 322 322 - /* Mermaid diagrams */ 323 323 - .prose pre.mermaid { 324 324 - @apply flex justify-center my-4 overflow-x-auto bg-transparent border-0; 325 325 - } 324 324 + .prose a.mention { 325 325 + @apply no-underline hover:underline font-bold; 326 326 + } 326 327 327 327 - /* Base callout */ 328 328 - details[data-callout] { 329 329 - @apply border-l-4 pl-3 py-2 text-gray-800 dark:text-gray-200 my-4; 330 330 - } 328 328 + .prose li { 329 329 + @apply my-0 py-0; 330 330 + } 331 331 332 332 - details[data-callout] > summary { 333 333 - @apply font-bold cursor-pointer mb-1; 334 334 - } 332 332 + .prose ul, 333 333 + .prose ol { 334 334 + @apply my-1 py-0; 335 335 + } 335 336 336 336 - details[data-callout] > .callout-content { 337 337 - @apply text-sm leading-snug; 338 338 - } 337 337 + .prose img { 338 338 + display: inline; 339 339 + margin: 0; 340 340 + vertical-align: middle; 341 341 + } 339 342 340 340 - /* Note (blue) */ 341 341 - details[data-callout="note" i] { 342 342 - @apply border-blue-400 dark:border-blue-500; 343 343 - } 344 344 - details[data-callout="note" i] > summary { 345 345 - @apply text-blue-700 dark:text-blue-400; 346 346 - } 343 343 + .prose input { 344 344 + @apply inline-block my-0 mb-1 mx-1; 345 345 + } 347 346 348 348 - /* Important (purple) */ 349 349 - details[data-callout="important" i] { 350 350 - @apply border-purple-400 dark:border-purple-500; 351 351 - } 352 352 - details[data-callout="important" i] > summary { 353 353 - @apply text-purple-700 dark:text-purple-400; 354 354 - } 347 347 + /* Mermaid diagrams */ 348 348 + .prose pre.mermaid { 349 349 + @apply flex justify-center my-4 overflow-x-auto bg-transparent border-0; 350 350 + } 355 351 356 356 - /* Warning (yellow) */ 357 357 - details[data-callout="warning" i] { 358 358 - @apply border-yellow-400 dark:border-yellow-500; 359 359 - } 360 360 - details[data-callout="warning" i] > summary { 361 361 - @apply text-yellow-700 dark:text-yellow-400; 362 362 - } 352 352 + /* Base callout */ 353 353 + details[data-callout] { 354 354 + @apply border-l-4 pl-3 py-2 text-gray-800 dark:text-gray-200 my-4; 355 355 + } 363 356 364 364 - /* Caution (red) */ 365 365 - details[data-callout="caution" i] { 366 366 - @apply border-red-400 dark:border-red-500; 367 367 - } 368 368 - details[data-callout="caution" i] > summary { 369 369 - @apply text-red-700 dark:text-red-400; 370 370 - } 357 357 + details[data-callout] > summary { 358 358 + @apply font-bold cursor-pointer mb-1; 359 359 + } 371 360 372 372 - /* Tip (green) */ 373 373 - details[data-callout="tip" i] { 374 374 - @apply border-green-400 dark:border-green-500; 375 375 - } 376 376 - details[data-callout="tip" i] > summary { 377 377 - @apply text-green-700 dark:text-green-400; 378 378 - } 361 361 + details[data-callout] > .callout-content { 362 362 + @apply text-sm leading-snug; 363 363 + } 379 364 380 380 - /* Optional: hide the disclosure arrow like GitHub */ 381 381 - details[data-callout] > summary::-webkit-details-marker { 382 382 - display: none; 383 383 - } 365 365 + /* Note (blue) */ 366 366 + details[data-callout="note" i] { 367 367 + @apply border-blue-400 dark:border-blue-500; 368 368 + } 369 369 + details[data-callout="note" i] > summary { 370 370 + @apply text-blue-700 dark:text-blue-400; 384 371 } 385 385 - @layer utilities { 386 386 - .error { 387 387 - @apply py-1 text-red-400 dark:text-red-300; 388 388 - } 389 389 - .success { 390 390 - @apply py-1 text-gray-900 dark:text-gray-100; 391 391 - } 392 372 393 393 - @keyframes scroll { 394 394 - 0% { transform: translateX(0); } 395 395 - 100% { transform: translateX(-50%); } 396 396 - } 373 373 + /* Important (purple) */ 374 374 + details[data-callout="important" i] { 375 375 + @apply border-purple-400 dark:border-purple-500; 376 376 + } 377 377 + details[data-callout="important" i] > summary { 378 378 + @apply text-purple-700 dark:text-purple-400; 379 379 + } 397 380 398 398 - .animate-marquee { 399 399 - animation: scroll 60s linear infinite; 400 400 - } 381 381 + /* Warning (yellow) */ 382 382 + details[data-callout="warning" i] { 383 383 + @apply border-yellow-400 dark:border-yellow-500; 384 384 + } 385 385 + details[data-callout="warning" i] > summary { 386 386 + @apply text-yellow-700 dark:text-yellow-400; 387 387 + } 401 388 402 402 - .animate-marquee:hover { 403 403 - animation-play-state: paused; 404 404 - } 389 389 + /* Caution (red) */ 390 390 + details[data-callout="caution" i] { 391 391 + @apply border-red-400 dark:border-red-500; 392 392 + } 393 393 + details[data-callout="caution" i] > summary { 394 394 + @apply text-red-700 dark:text-red-400; 395 395 + } 405 396 406 406 - @media (prefers-reduced-motion: reduce) { 407 407 - .animate-marquee { 408 408 - animation: none; 409 409 - transform: none; 410 410 - } 411 411 - } 397 397 + /* Tip (green) */ 398 398 + details[data-callout="tip" i] { 399 399 + @apply border-green-400 dark:border-green-500; 400 400 + } 401 401 + details[data-callout="tip" i] > summary { 402 402 + @apply text-green-700 dark:text-green-400; 403 403 + } 412 404 413 413 - @keyframes progress { 414 414 - from { width: 0%; } 415 415 - to { width: 100%; } 416 416 - } 405 405 + /* Optional: hide the disclosure arrow like GitHub */ 406 406 + details[data-callout] > summary::-webkit-details-marker { 407 407 + display: none; 408 408 + } 409 409 + } 410 410 + @layer utilities { 411 411 + .error { 412 412 + @apply py-1 text-red-400 dark:text-red-300; 413 413 + } 414 414 + .success { 415 415 + @apply py-1 text-gray-900 dark:text-gray-100; 416 416 + } 417 417 418 418 - .animate-progress { 419 419 - animation: progress 10s linear forwards; 420 420 - } 418 418 + @keyframes scroll { 419 419 + 0% { 420 420 + transform: translateX(0); 421 421 + } 422 422 + 100% { 423 423 + transform: translateX(-50%); 424 424 + } 425 425 + } 421 426 422 422 - @keyframes fadeIn { 423 423 - from { opacity: 0; } 424 424 - to { opacity: 1; } 425 425 - } 427 427 + .animate-marquee { 428 428 + animation: scroll 60s linear infinite; 429 429 + } 430 430 + 431 431 + .animate-marquee:hover { 432 432 + animation-play-state: paused; 433 433 + } 434 434 + 435 435 + @media (prefers-reduced-motion: reduce) { 436 436 + .animate-marquee { 437 437 + animation: none; 438 438 + transform: none; 439 439 + } 440 440 + } 441 441 + 442 442 + @keyframes progress { 443 443 + from { 444 444 + width: 0%; 445 445 + } 446 446 + to { 447 447 + width: 100%; 448 448 + } 449 449 + } 450 450 + 451 451 + .animate-progress { 452 452 + animation: progress 10s linear forwards; 453 453 + } 454 454 + 455 455 + @keyframes fadeIn { 456 456 + from { 457 457 + opacity: 0; 458 458 + } 459 459 + to { 460 460 + opacity: 1; 461 461 + } 462 462 + } 426 463 427 427 - @keyframes fadeOut { 428 428 - from { opacity: 1; } 429 429 - to { opacity: 0; } 430 430 - } 464 464 + @keyframes fadeOut { 465 465 + from { 466 466 + opacity: 1; 467 467 + } 468 468 + to { 469 469 + opacity: 0; 470 470 + } 471 471 + } 431 472 432 432 - .animate-fadein { 433 433 - animation: fadeIn 0.25s ease-in forwards; 434 434 - } 473 473 + .animate-fadein { 474 474 + animation: fadeIn 0.25s ease-in forwards; 475 475 + } 435 476 436 436 - .animate-fadeout { 437 437 - animation: fadeOut 0.25s ease-out forwards; 438 438 - } 477 477 + .animate-fadeout { 478 478 + animation: fadeOut 0.25s ease-out forwards; 439 479 } 480 480 + } 440 481 } 441 482 442 483 /* Background */ 443 484 .bg { 444 444 - color: #4c4f69; 445 445 - background-color: #eff1f5; 485 485 + color: #4c4f69; 486 486 + background-color: #eff1f5; 446 487 } 447 488 /* PreWrapper */ 448 489 .chroma { 449 449 - color: #4c4f69; 490 490 + color: #4c4f69; 450 491 } 451 492 /* Error */ 452 493 .chroma .err { 453 453 - color: #d20f39; 494 494 + color: #d20f39; 454 495 } 455 496 /* LineLink */ 456 497 .chroma .lnlinks { 457 457 - outline: none; 458 458 - text-decoration: none; 459 459 - color: inherit; 498 498 + outline: none; 499 499 + text-decoration: none; 500 500 + color: inherit; 460 501 } 461 502 /* LineTableTD */ 462 503 .chroma .lntd { 463 463 - vertical-align: top; 464 464 - padding: 0; 465 465 - margin: 0; 466 466 - border: 0; 504 504 + vertical-align: top; 505 505 + padding: 0; 506 506 + margin: 0; 507 507 + border: 0; 467 508 } 468 509 /* LineTable */ 469 510 .chroma .lntable { 470 470 - border-spacing: 0; 471 471 - padding: 0; 472 472 - margin: 0; 473 473 - border: 0; 511 511 + border-spacing: 0; 512 512 + padding: 0; 513 513 + margin: 0; 514 514 + border: 0; 474 515 } 475 516 /* LineHighlight */ 476 517 .chroma .hl { 477 477 - @apply bg-amber-400/30 dark:bg-amber-500/20; 518 518 + @apply bg-amber-400/30 dark:bg-amber-500/20; 478 519 } 479 520 480 480 - .line-quote-hl, .line-range-hl { 481 481 - @apply !bg-yellow-200/30 dark:!bg-yellow-700/30; 521 521 + .line-quote-hl, 522 522 + .line-range-hl { 523 523 + @apply !bg-yellow-200/30 dark:!bg-yellow-700/30; 482 524 } 483 525 484 526 :is(.line-quote-hl, .line-range-hl) > .min-w-\[3\.5rem\] { 485 485 - @apply !bg-yellow-200/30 dark:!bg-yellow-700/30; 527 527 + @apply !bg-yellow-200/30 dark:!bg-yellow-700/30; 486 528 } 487 529 488 530 :is(.line-quote-hl, .line-range-hl) > .min-w-\[3\.5rem\] a { 489 489 - @apply !text-black dark:!text-white; 531 531 + @apply !text-black dark:!text-white; 490 532 } 491 533 492 534 /* LineNumbersTable */ 493 535 .chroma .lnt { 494 494 - white-space: pre; 495 495 - -webkit-user-select: none; 496 496 - user-select: none; 497 497 - margin-right: 0.4em; 498 498 - padding: 0 0.4em 0 0.4em; 499 499 - color: #8c8fa1; 536 536 + white-space: pre; 537 537 + -webkit-user-select: none; 538 538 + user-select: none; 539 539 + margin-right: 0.4em; 540 540 + padding: 0 0.4em 0 0.4em; 541 541 + color: #8c8fa1; 500 542 } 501 543 /* LineNumbers */ 502 544 .chroma .ln { 503 503 - white-space: pre; 504 504 - -webkit-user-select: none; 505 505 - user-select: none; 506 506 - margin-right: 0.4em; 507 507 - padding: 0 0.4em 0 0.4em; 508 508 - color: #8c8fa1; 545 545 + white-space: pre; 546 546 + -webkit-user-select: none; 547 547 + user-select: none; 548 548 + margin-right: 0.4em; 549 549 + padding: 0 0.4em 0 0.4em; 550 550 + color: #8c8fa1; 509 551 } 510 552 /* Line */ 511 553 .chroma .line { 512 512 - display: flex; 554 554 + display: flex; 513 555 } 514 556 /* Keyword */ 515 557 .chroma .k { 516 516 - color: #8839ef; 558 558 + color: #8839ef; 517 559 } 518 560 /* KeywordConstant */ 519 561 .chroma .kc { 520 520 - color: #fe640b; 562 562 + color: #fe640b; 521 563 } 522 564 /* KeywordDeclaration */ 523 565 .chroma .kd { 524 524 - color: #d20f39; 566 566 + color: #d20f39; 525 567 } 526 568 /* KeywordNamespace */ 527 569 .chroma .kn { 528 528 - color: #179299; 570 570 + color: #179299; 529 571 } 530 572 /* KeywordPseudo */ 531 573 .chroma .kp { 532 532 - color: #8839ef; 574 574 + color: #8839ef; 533 575 } 534 576 /* KeywordReserved */ 535 577 .chroma .kr { 536 536 - color: #8839ef; 578 578 + color: #8839ef; 537 579 } 538 580 /* KeywordType */ 539 581 .chroma .kt { 540 540 - color: #d20f39; 582 582 + color: #d20f39; 541 583 } 542 584 /* NameAttribute */ 543 585 .chroma .na { 544 544 - color: #1e66f5; 586 586 + color: #1e66f5; 545 587 } 546 588 /* NameBuiltin */ 547 589 .chroma .nb { 548 548 - color: #04a5e5; 590 590 + color: #04a5e5; 549 591 } 550 592 /* NameBuiltinPseudo */ 551 593 .chroma .bp { 552 552 - color: #04a5e5; 594 594 + color: #04a5e5; 553 595 } 554 596 /* NameClass */ 555 597 .chroma .nc { 556 556 - color: #df8e1d; 598 598 + color: #df8e1d; 557 599 } 558 600 /* NameConstant */ 559 601 .chroma .no { 560 560 - color: #df8e1d; 602 602 + color: #df8e1d; 561 603 } 562 604 /* NameDecorator */ 563 605 .chroma .nd { 564 564 - color: #1e66f5; 565 565 - font-weight: bold; 606 606 + color: #1e66f5; 607 607 + font-weight: bold; 566 608 } 567 609 /* NameEntity */ 568 610 .chroma .ni { 569 569 - color: #179299; 611 611 + color: #179299; 570 612 } 571 613 /* NameException */ 572 614 .chroma .ne { 573 573 - color: #fe640b; 615 615 + color: #fe640b; 574 616 } 575 617 /* NameFunction */ 576 618 .chroma .nf { 577 577 - color: #1e66f5; 619 619 + color: #1e66f5; 578 620 } 579 621 /* NameFunctionMagic */ 580 622 .chroma .fm { 581 581 - color: #1e66f5; 623 623 + color: #1e66f5; 582 624 } 583 625 /* NameLabel */ 584 626 .chroma .nl { 585 585 - color: #04a5e5; 627 627 + color: #04a5e5; 586 628 } 587 629 /* NameNamespace */ 588 630 .chroma .nn { 589 589 - color: #fe640b; 631 631 + color: #fe640b; 590 632 } 591 633 /* NameProperty */ 592 634 .chroma .py { 593 593 - color: #fe640b; 635 635 + color: #fe640b; 594 636 } 595 637 /* NameTag */ 596 638 .chroma .nt { 597 597 - color: #8839ef; 639 639 + color: #8839ef; 598 640 } 599 641 /* NameVariable */ 600 642 .chroma .nv { 601 601 - color: #dc8a78; 643 643 + color: #dc8a78; 602 644 } 603 645 /* NameVariableClass */ 604 646 .chroma .vc { 605 605 - color: #dc8a78; 647 647 + color: #dc8a78; 606 648 } 607 649 /* NameVariableGlobal */ 608 650 .chroma .vg { 609 609 - color: #dc8a78; 651 651 + color: #dc8a78; 610 652 } 611 653 /* NameVariableInstance */ 612 654 .chroma .vi { 613 613 - color: #dc8a78; 655 655 + color: #dc8a78; 614 656 } 615 657 /* NameVariableMagic */ 616 658 .chroma .vm { 617 617 - color: #dc8a78; 659 659 + color: #dc8a78; 618 660 } 619 661 /* LiteralString */ 620 662 .chroma .s { 621 621 - color: #40a02b; 663 663 + color: #40a02b; 622 664 } 623 665 /* LiteralStringAffix */ 624 666 .chroma .sa { 625 625 - color: #d20f39; 667 667 + color: #d20f39; 626 668 } 627 669 /* LiteralStringBacktick */ 628 670 .chroma .sb { 629 629 - color: #40a02b; 671 671 + color: #40a02b; 630 672 } 631 673 /* LiteralStringChar */ 632 674 .chroma .sc { 633 633 - color: #40a02b; 675 675 + color: #40a02b; 634 676 } 635 677 /* LiteralStringDelimiter */ 636 678 .chroma .dl { 637 637 - color: #1e66f5; 679 679 + color: #1e66f5; 638 680 } 639 681 /* LiteralStringDoc */ 640 682 .chroma .sd { 641 641 - color: #9ca0b0; 683 683 + color: #9ca0b0; 642 684 } 643 685 /* LiteralStringDouble */ 644 686 .chroma .s2 { 645 645 - color: #40a02b; 687 687 + color: #40a02b; 646 688 } 647 689 /* LiteralStringEscape */ 648 690 .chroma .se { 649 649 - color: #1e66f5; 691 691 + color: #1e66f5; 650 692 } 651 693 /* LiteralStringHeredoc */ 652 694 .chroma .sh { 653 653 - color: #9ca0b0; 695 695 + color: #9ca0b0; 654 696 } 655 697 /* LiteralStringInterpol */ 656 698 .chroma .si { 657 657 - color: #40a02b; 699 699 + color: #40a02b; 658 700 } 659 701 /* LiteralStringOther */ 660 702 .chroma .sx { 661 661 - color: #40a02b; 703 703 + color: #40a02b; 662 704 } 663 705 /* LiteralStringRegex */ 664 706 .chroma .sr { 665 665 - color: #179299; 707 707 + color: #179299; 666 708 } 667 709 /* LiteralStringSingle */ 668 710 .chroma .s1 { 669 669 - color: #40a02b; 711 711 + color: #40a02b; 670 712 } 671 713 /* LiteralStringSymbol */ 672 714 .chroma .ss { 673 673 - color: #40a02b; 715 715 + color: #40a02b; 674 716 } 675 717 /* LiteralNumber */ 676 718 .chroma .m { 677 677 - color: #fe640b; 719 719 + color: #fe640b; 678 720 } 679 721 /* LiteralNumberBin */ 680 722 .chroma .mb { 681 681 - color: #fe640b; 723 723 + color: #fe640b; 682 724 } 683 725 /* LiteralNumberFloat */ 684 726 .chroma .mf { 685 685 - color: #fe640b; 727 727 + color: #fe640b; 686 728 } 687 729 /* LiteralNumberHex */ 688 730 .chroma .mh { 689 689 - color: #fe640b; 731 731 + color: #fe640b; 690 732 } 691 733 /* LiteralNumberInteger */ 692 734 .chroma .mi { 693 693 - color: #fe640b; 735 735 + color: #fe640b; 694 736 } 695 737 /* LiteralNumberIntegerLong */ 696 738 .chroma .il { 697 697 - color: #fe640b; 739 739 + color: #fe640b; 698 740 } 699 741 /* LiteralNumberOct */ 700 742 .chroma .mo { 701 701 - color: #fe640b; 743 743 + color: #fe640b; 702 744 } 703 745 /* Operator */ 704 746 .chroma .o { 705 705 - color: #04a5e5; 706 706 - font-weight: bold; 747 747 + color: #04a5e5; 748 748 + font-weight: bold; 707 749 } 708 750 /* OperatorWord */ 709 751 .chroma .ow { 710 710 - color: #04a5e5; 711 711 - font-weight: bold; 752 752 + color: #04a5e5; 753 753 + font-weight: bold; 712 754 } 713 755 /* Comment */ 714 756 .chroma .c { 715 715 - color: #9ca0b0; 716 716 - font-style: italic; 757 757 + color: #9ca0b0; 758 758 + font-style: italic; 717 759 } 718 760 /* CommentHashbang */ 719 761 .chroma .ch { 720 720 - color: #9ca0b0; 721 721 - font-style: italic; 762 762 + color: #9ca0b0; 763 763 + font-style: italic; 722 764 } 723 765 /* CommentMultiline */ 724 766 .chroma .cm { 725 725 - color: #9ca0b0; 726 726 - font-style: italic; 767 767 + color: #9ca0b0; 768 768 + font-style: italic; 727 769 } 728 770 /* CommentSingle */ 729 771 .chroma .c1 { 730 730 - color: #9ca0b0; 731 731 - font-style: italic; 772 772 + color: #9ca0b0; 773 773 + font-style: italic; 732 774 } 733 775 /* CommentSpecial */ 734 776 .chroma .cs { 735 735 - color: #9ca0b0; 736 736 - font-style: italic; 777 777 + color: #9ca0b0; 778 778 + font-style: italic; 737 779 } 738 780 /* CommentPreproc */ 739 781 .chroma .cp { 740 740 - color: #9ca0b0; 741 741 - font-style: italic; 782 782 + color: #9ca0b0; 783 783 + font-style: italic; 742 784 } 743 785 /* CommentPreprocFile */ 744 786 .chroma .cpf { 745 745 - color: #9ca0b0; 746 746 - font-weight: bold; 747 747 - font-style: italic; 787 787 + color: #9ca0b0; 788 788 + font-weight: bold; 789 789 + font-style: italic; 748 790 } 749 791 /* GenericDeleted */ 750 792 .chroma .gd { 751 751 - color: #d20f39; 752 752 - background-color: oklch(93.6% 0.032 17.717); 793 793 + color: #d20f39; 794 794 + background-color: oklch(93.6% 0.032 17.717); 753 795 } 754 796 /* GenericEmph */ 755 797 .chroma .ge { 756 756 - font-style: italic; 798 798 + font-style: italic; 757 799 } 758 800 /* GenericError */ 759 801 .chroma .gr { 760 760 - color: #d20f39; 802 802 + color: #d20f39; 761 803 } 762 804 /* GenericHeading */ 763 805 .chroma .gh { 764 764 - color: #fe640b; 765 765 - font-weight: bold; 806 806 + color: #fe640b; 807 807 + font-weight: bold; 766 808 } 767 809 /* GenericInserted */ 768 810 .chroma .gi { 769 769 - color: #40a02b; 770 770 - background-color: oklch(96.2% 0.044 156.743); 811 811 + color: #40a02b; 812 812 + background-color: oklch(96.2% 0.044 156.743); 771 813 } 772 814 /* GenericStrong */ 773 815 .chroma .gs { 774 774 - font-weight: bold; 816 816 + font-weight: bold; 775 817 } 776 818 /* GenericSubheading */ 777 819 .chroma .gu { 778 778 - color: #fe640b; 779 779 - font-weight: bold; 820 820 + color: #fe640b; 821 821 + font-weight: bold; 780 822 } 781 823 /* GenericTraceback */ 782 824 .chroma .gt { 783 783 - color: #d20f39; 825 825 + color: #d20f39; 784 826 } 785 827 /* GenericUnderline */ 786 828 .chroma .gl { 787 787 - text-decoration: underline; 829 829 + text-decoration: underline; 788 830 } 789 831 790 832 @media (prefers-color-scheme: dark) { 791 791 - /* Background */ 792 792 - .bg { 793 793 - color: #cad3f5; 794 794 - background-color: #24273a; 795 795 - } 796 796 - /* PreWrapper */ 797 797 - .chroma { 798 798 - color: #cad3f5; 799 799 - } 800 800 - /* Error */ 801 801 - .chroma .err { 802 802 - color: #ed8796; 803 803 - } 804 804 - /* LineLink */ 805 805 - .chroma .lnlinks { 806 806 - outline: none; 807 807 - text-decoration: none; 808 808 - color: inherit; 809 809 - } 810 810 - /* LineTableTD */ 811 811 - .chroma .lntd { 812 812 - vertical-align: top; 813 813 - padding: 0; 814 814 - margin: 0; 815 815 - border: 0; 816 816 - } 817 817 - /* LineTable */ 818 818 - .chroma .lntable { 819 819 - border-spacing: 0; 820 820 - padding: 0; 821 821 - margin: 0; 822 822 - border: 0; 823 823 - } 824 824 - /* LineHighlight */ 825 825 - .chroma .hl { 826 826 - background-color: #494d64; 827 827 - } 828 828 - /* LineNumbersTable */ 829 829 - .chroma .lnt { 830 830 - white-space: pre; 831 831 - -webkit-user-select: none; 832 832 - user-select: none; 833 833 - margin-right: 0.4em; 834 834 - padding: 0 0.4em 0 0.4em; 835 835 - color: #8087a2; 836 836 - } 837 837 - /* LineNumbers */ 838 838 - .chroma .ln { 839 839 - white-space: pre; 840 840 - -webkit-user-select: none; 841 841 - user-select: none; 842 842 - margin-right: 0.4em; 843 843 - padding: 0 0.4em 0 0.4em; 844 844 - color: #8087a2; 845 845 - } 846 846 - /* Line */ 847 847 - .chroma .line { 848 848 - display: flex; 849 849 - } 850 850 - /* Keyword */ 851 851 - .chroma .k { 852 852 - color: #c6a0f6; 853 853 - } 854 854 - /* KeywordConstant */ 855 855 - .chroma .kc { 856 856 - color: #f5a97f; 857 857 - } 858 858 - /* KeywordDeclaration */ 859 859 - .chroma .kd { 860 860 - color: #ed8796; 861 861 - } 862 862 - /* KeywordNamespace */ 863 863 - .chroma .kn { 864 864 - color: #8bd5ca; 865 865 - } 866 866 - /* KeywordPseudo */ 867 867 - .chroma .kp { 868 868 - color: #c6a0f6; 869 869 - } 870 870 - /* KeywordReserved */ 871 871 - .chroma .kr { 872 872 - color: #c6a0f6; 873 873 - } 874 874 - /* KeywordType */ 875 875 - .chroma .kt { 876 876 - color: #ed8796; 877 877 - } 878 878 - /* NameAttribute */ 879 879 - .chroma .na { 880 880 - color: #8aadf4; 881 881 - } 882 882 - /* NameBuiltin */ 883 883 - .chroma .nb { 884 884 - color: #91d7e3; 885 885 - } 886 886 - /* NameBuiltinPseudo */ 887 887 - .chroma .bp { 888 888 - color: #91d7e3; 889 889 - } 890 890 - /* NameClass */ 891 891 - .chroma .nc { 892 892 - color: #eed49f; 893 893 - } 894 894 - /* NameConstant */ 895 895 - .chroma .no { 896 896 - color: #eed49f; 897 897 - } 898 898 - /* NameDecorator */ 899 899 - .chroma .nd { 900 900 - color: #8aadf4; 901 901 - font-weight: bold; 902 902 - } 903 903 - /* NameEntity */ 904 904 - .chroma .ni { 905 905 - color: #8bd5ca; 906 906 - } 907 907 - /* NameException */ 908 908 - .chroma .ne { 909 909 - color: #f5a97f; 910 910 - } 911 911 - /* NameFunction */ 912 912 - .chroma .nf { 913 913 - color: #8aadf4; 914 914 - } 915 915 - /* NameFunctionMagic */ 916 916 - .chroma .fm { 917 917 - color: #8aadf4; 918 918 - } 919 919 - /* NameLabel */ 920 920 - .chroma .nl { 921 921 - color: #91d7e3; 922 922 - } 923 923 - /* NameNamespace */ 924 924 - .chroma .nn { 925 925 - color: #f5a97f; 926 926 - } 927 927 - /* NameProperty */ 928 928 - .chroma .py { 929 929 - color: #f5a97f; 930 930 - } 931 931 - /* NameTag */ 932 932 - .chroma .nt { 933 933 - color: #c6a0f6; 934 934 - } 935 935 - /* NameVariable */ 936 936 - .chroma .nv { 937 937 - color: #f4dbd6; 938 938 - } 939 939 - /* NameVariableClass */ 940 940 - .chroma .vc { 941 941 - color: #f4dbd6; 942 942 - } 943 943 - /* NameVariableGlobal */ 944 944 - .chroma .vg { 945 945 - color: #f4dbd6; 946 946 - } 947 947 - /* NameVariableInstance */ 948 948 - .chroma .vi { 949 949 - color: #f4dbd6; 950 950 - } 951 951 - /* NameVariableMagic */ 952 952 - .chroma .vm { 953 953 - color: #f4dbd6; 954 954 - } 955 955 - /* LiteralString */ 956 956 - .chroma .s { 957 957 - color: #a6da95; 958 958 - } 959 959 - /* LiteralStringAffix */ 960 960 - .chroma .sa { 961 961 - color: #ed8796; 962 962 - } 963 963 - /* LiteralStringBacktick */ 964 964 - .chroma .sb { 965 965 - color: #a6da95; 966 966 - } 967 967 - /* LiteralStringChar */ 968 968 - .chroma .sc { 969 969 - color: #a6da95; 970 970 - } 971 971 - /* LiteralStringDelimiter */ 972 972 - .chroma .dl { 973 973 - color: #8aadf4; 974 974 - } 975 975 - /* LiteralStringDoc */ 976 976 - .chroma .sd { 977 977 - color: #6e738d; 978 978 - } 979 979 - /* LiteralStringDouble */ 980 980 - .chroma .s2 { 981 981 - color: #a6da95; 982 982 - } 983 983 - /* LiteralStringEscape */ 984 984 - .chroma .se { 985 985 - color: #8aadf4; 986 986 - } 987 987 - /* LiteralStringHeredoc */ 988 988 - .chroma .sh { 989 989 - color: #6e738d; 990 990 - } 991 991 - /* LiteralStringInterpol */ 992 992 - .chroma .si { 993 993 - color: #a6da95; 994 994 - } 995 995 - /* LiteralStringOther */ 996 996 - .chroma .sx { 997 997 - color: #a6da95; 998 998 - } 999 999 - /* LiteralStringRegex */ 1000 1000 - .chroma .sr { 1001 1001 - color: #8bd5ca; 1002 1002 - } 1003 1003 - /* LiteralStringSingle */ 1004 1004 - .chroma .s1 { 1005 1005 - color: #a6da95; 1006 1006 - } 1007 1007 - /* LiteralStringSymbol */ 1008 1008 - .chroma .ss { 1009 1009 - color: #a6da95; 1010 1010 - } 1011 1011 - /* LiteralNumber */ 1012 1012 - .chroma .m { 1013 1013 - color: #f5a97f; 1014 1014 - } 1015 1015 - /* LiteralNumberBin */ 1016 1016 - .chroma .mb { 1017 1017 - color: #f5a97f; 1018 1018 - } 1019 1019 - /* LiteralNumberFloat */ 1020 1020 - .chroma .mf { 1021 1021 - color: #f5a97f; 1022 1022 - } 1023 1023 - /* LiteralNumberHex */ 1024 1024 - .chroma .mh { 1025 1025 - color: #f5a97f; 1026 1026 - } 1027 1027 - /* LiteralNumberInteger */ 1028 1028 - .chroma .mi { 1029 1029 - color: #f5a97f; 1030 1030 - } 1031 1031 - /* LiteralNumberIntegerLong */ 1032 1032 - .chroma .il { 1033 1033 - color: #f5a97f; 1034 1034 - } 1035 1035 - /* LiteralNumberOct */ 1036 1036 - .chroma .mo { 1037 1037 - color: #f5a97f; 1038 1038 - } 1039 1039 - /* Operator */ 1040 1040 - .chroma .o { 1041 1041 - color: #91d7e3; 1042 1042 - font-weight: bold; 1043 1043 - } 1044 1044 - /* OperatorWord */ 1045 1045 - .chroma .ow { 1046 1046 - color: #91d7e3; 1047 1047 - font-weight: bold; 1048 1048 - } 1049 1049 - /* Comment */ 1050 1050 - .chroma .c { 1051 1051 - color: #6e738d; 1052 1052 - font-style: italic; 1053 1053 - } 1054 1054 - /* CommentHashbang */ 1055 1055 - .chroma .ch { 1056 1056 - color: #6e738d; 1057 1057 - font-style: italic; 1058 1058 - } 1059 1059 - /* CommentMultiline */ 1060 1060 - .chroma .cm { 1061 1061 - color: #6e738d; 1062 1062 - font-style: italic; 1063 1063 - } 1064 1064 - /* CommentSingle */ 1065 1065 - .chroma .c1 { 1066 1066 - color: #6e738d; 1067 1067 - font-style: italic; 1068 1068 - } 1069 1069 - /* CommentSpecial */ 1070 1070 - .chroma .cs { 1071 1071 - color: #6e738d; 1072 1072 - font-style: italic; 1073 1073 - } 1074 1074 - /* CommentPreproc */ 1075 1075 - .chroma .cp { 1076 1076 - color: #6e738d; 1077 1077 - font-style: italic; 1078 1078 - } 1079 1079 - /* CommentPreprocFile */ 1080 1080 - .chroma .cpf { 1081 1081 - color: #6e738d; 1082 1082 - font-weight: bold; 1083 1083 - font-style: italic; 1084 1084 - } 1085 1085 - /* GenericDeleted */ 1086 1086 - .chroma .gd { 1087 1087 - color: #ed8796; 1088 1088 - background-color: oklch(44.4% 0.177 26.899 / 0.5); 1089 1089 - } 1090 1090 - /* GenericEmph */ 1091 1091 - .chroma .ge { 1092 1092 - font-style: italic; 1093 1093 - } 1094 1094 - /* GenericError */ 1095 1095 - .chroma .gr { 1096 1096 - color: #ed8796; 1097 1097 - } 1098 1098 - /* GenericHeading */ 1099 1099 - .chroma .gh { 1100 1100 - color: #f5a97f; 1101 1101 - font-weight: bold; 1102 1102 - } 1103 1103 - /* GenericInserted */ 1104 1104 - .chroma .gi { 1105 1105 - color: #a6da95; 1106 1106 - background-color: oklch(44.8% 0.119 151.328 / 0.5); 1107 1107 - } 1108 1108 - /* GenericStrong */ 1109 1109 - .chroma .gs { 1110 1110 - font-weight: bold; 1111 1111 - } 1112 1112 - /* GenericSubheading */ 1113 1113 - .chroma .gu { 1114 1114 - color: #f5a97f; 1115 1115 - font-weight: bold; 1116 1116 - } 1117 1117 - /* GenericTraceback */ 1118 1118 - .chroma .gt { 1119 1119 - color: #ed8796; 1120 1120 - } 1121 1121 - /* GenericUnderline */ 1122 1122 - .chroma .gl { 1123 1123 - text-decoration: underline; 1124 1124 - } 833 833 + /* Background */ 834 834 + .bg { 835 835 + color: #cad3f5; 836 836 + background-color: #24273a; 837 837 + } 838 838 + /* PreWrapper */ 839 839 + .chroma { 840 840 + color: #cad3f5; 841 841 + } 842 842 + /* Error */ 843 843 + .chroma .err { 844 844 + color: #ed8796; 845 845 + } 846 846 + /* LineLink */ 847 847 + .chroma .lnlinks { 848 848 + outline: none; 849 849 + text-decoration: none; 850 850 + color: inherit; 851 851 + } 852 852 + /* LineTableTD */ 853 853 + .chroma .lntd { 854 854 + vertical-align: top; 855 855 + padding: 0; 856 856 + margin: 0; 857 857 + border: 0; 858 858 + } 859 859 + /* LineTable */ 860 860 + .chroma .lntable { 861 861 + border-spacing: 0; 862 862 + padding: 0; 863 863 + margin: 0; 864 864 + border: 0; 865 865 + } 866 866 + /* LineHighlight */ 867 867 + .chroma .hl { 868 868 + background-color: #494d64; 869 869 + } 870 870 + /* LineNumbersTable */ 871 871 + .chroma .lnt { 872 872 + white-space: pre; 873 873 + -webkit-user-select: none; 874 874 + user-select: none; 875 875 + margin-right: 0.4em; 876 876 + padding: 0 0.4em 0 0.4em; 877 877 + color: #8087a2; 878 878 + } 879 879 + /* LineNumbers */ 880 880 + .chroma .ln { 881 881 + white-space: pre; 882 882 + -webkit-user-select: none; 883 883 + user-select: none; 884 884 + margin-right: 0.4em; 885 885 + padding: 0 0.4em 0 0.4em; 886 886 + color: #8087a2; 887 887 + } 888 888 + /* Line */ 889 889 + .chroma .line { 890 890 + display: flex; 891 891 + } 892 892 + /* Keyword */ 893 893 + .chroma .k { 894 894 + color: #c6a0f6; 895 895 + } 896 896 + /* KeywordConstant */ 897 897 + .chroma .kc { 898 898 + color: #f5a97f; 899 899 + } 900 900 + /* KeywordDeclaration */ 901 901 + .chroma .kd { 902 902 + color: #ed8796; 903 903 + } 904 904 + /* KeywordNamespace */ 905 905 + .chroma .kn { 906 906 + color: #8bd5ca; 907 907 + } 908 908 + /* KeywordPseudo */ 909 909 + .chroma .kp { 910 910 + color: #c6a0f6; 911 911 + } 912 912 + /* KeywordReserved */ 913 913 + .chroma .kr { 914 914 + color: #c6a0f6; 915 915 + } 916 916 + /* KeywordType */ 917 917 + .chroma .kt { 918 918 + color: #ed8796; 919 919 + } 920 920 + /* NameAttribute */ 921 921 + .chroma .na { 922 922 + color: #8aadf4; 923 923 + } 924 924 + /* NameBuiltin */ 925 925 + .chroma .nb { 926 926 + color: #91d7e3; 927 927 + } 928 928 + /* NameBuiltinPseudo */ 929 929 + .chroma .bp { 930 930 + color: #91d7e3; 931 931 + } 932 932 + /* NameClass */ 933 933 + .chroma .nc { 934 934 + color: #eed49f; 935 935 + } 936 936 + /* NameConstant */ 937 937 + .chroma .no { 938 938 + color: #eed49f; 939 939 + } 940 940 + /* NameDecorator */ 941 941 + .chroma .nd { 942 942 + color: #8aadf4; 943 943 + font-weight: bold; 944 944 + } 945 945 + /* NameEntity */ 946 946 + .chroma .ni { 947 947 + color: #8bd5ca; 948 948 + } 949 949 + /* NameException */ 950 950 + .chroma .ne { 951 951 + color: #f5a97f; 952 952 + } 953 953 + /* NameFunction */ 954 954 + .chroma .nf { 955 955 + color: #8aadf4; 956 956 + } 957 957 + /* NameFunctionMagic */ 958 958 + .chroma .fm { 959 959 + color: #8aadf4; 960 960 + } 961 961 + /* NameLabel */ 962 962 + .chroma .nl { 963 963 + color: #91d7e3; 964 964 + } 965 965 + /* NameNamespace */ 966 966 + .chroma .nn { 967 967 + color: #f5a97f; 968 968 + } 969 969 + /* NameProperty */ 970 970 + .chroma .py { 971 971 + color: #f5a97f; 972 972 + } 973 973 + /* NameTag */ 974 974 + .chroma .nt { 975 975 + color: #c6a0f6; 976 976 + } 977 977 + /* NameVariable */ 978 978 + .chroma .nv { 979 979 + color: #f4dbd6; 980 980 + } 981 981 + /* NameVariableClass */ 982 982 + .chroma .vc { 983 983 + color: #f4dbd6; 984 984 + } 985 985 + /* NameVariableGlobal */ 986 986 + .chroma .vg { 987 987 + color: #f4dbd6; 988 988 + } 989 989 + /* NameVariableInstance */ 990 990 + .chroma .vi { 991 991 + color: #f4dbd6; 992 992 + } 993 993 + /* NameVariableMagic */ 994 994 + .chroma .vm { 995 995 + color: #f4dbd6; 996 996 + } 997 997 + /* LiteralString */ 998 998 + .chroma .s { 999 999 + color: #a6da95; 1000 1000 + } 1001 1001 + /* LiteralStringAffix */ 1002 1002 + .chroma .sa { 1003 1003 + color: #ed8796; 1004 1004 + } 1005 1005 + /* LiteralStringBacktick */ 1006 1006 + .chroma .sb { 1007 1007 + color: #a6da95; 1008 1008 + } 1009 1009 + /* LiteralStringChar */ 1010 1010 + .chroma .sc { 1011 1011 + color: #a6da95; 1012 1012 + } 1013 1013 + /* LiteralStringDelimiter */ 1014 1014 + .chroma .dl { 1015 1015 + color: #8aadf4; 1016 1016 + } 1017 1017 + /* LiteralStringDoc */ 1018 1018 + .chroma .sd { 1019 1019 + color: #6e738d; 1020 1020 + } 1021 1021 + /* LiteralStringDouble */ 1022 1022 + .chroma .s2 { 1023 1023 + color: #a6da95; 1024 1024 + } 1025 1025 + /* LiteralStringEscape */ 1026 1026 + .chroma .se { 1027 1027 + color: #8aadf4; 1028 1028 + } 1029 1029 + /* LiteralStringHeredoc */ 1030 1030 + .chroma .sh { 1031 1031 + color: #6e738d; 1032 1032 + } 1033 1033 + /* LiteralStringInterpol */ 1034 1034 + .chroma .si { 1035 1035 + color: #a6da95; 1036 1036 + } 1037 1037 + /* LiteralStringOther */ 1038 1038 + .chroma .sx { 1039 1039 + color: #a6da95; 1040 1040 + } 1041 1041 + /* LiteralStringRegex */ 1042 1042 + .chroma .sr { 1043 1043 + color: #8bd5ca; 1044 1044 + } 1045 1045 + /* LiteralStringSingle */ 1046 1046 + .chroma .s1 { 1047 1047 + color: #a6da95; 1048 1048 + } 1049 1049 + /* LiteralStringSymbol */ 1050 1050 + .chroma .ss { 1051 1051 + color: #a6da95; 1052 1052 + } 1053 1053 + /* LiteralNumber */ 1054 1054 + .chroma .m { 1055 1055 + color: #f5a97f; 1056 1056 + } 1057 1057 + /* LiteralNumberBin */ 1058 1058 + .chroma .mb { 1059 1059 + color: #f5a97f; 1060 1060 + } 1061 1061 + /* LiteralNumberFloat */ 1062 1062 + .chroma .mf { 1063 1063 + color: #f5a97f; 1064 1064 + } 1065 1065 + /* LiteralNumberHex */ 1066 1066 + .chroma .mh { 1067 1067 + color: #f5a97f; 1068 1068 + } 1069 1069 + /* LiteralNumberInteger */ 1070 1070 + .chroma .mi { 1071 1071 + color: #f5a97f; 1072 1072 + } 1073 1073 + /* LiteralNumberIntegerLong */ 1074 1074 + .chroma .il { 1075 1075 + color: #f5a97f; 1076 1076 + } 1077 1077 + /* LiteralNumberOct */ 1078 1078 + .chroma .mo { 1079 1079 + color: #f5a97f; 1080 1080 + } 1081 1081 + /* Operator */ 1082 1082 + .chroma .o { 1083 1083 + color: #91d7e3; 1084 1084 + font-weight: bold; 1085 1085 + } 1086 1086 + /* OperatorWord */ 1087 1087 + .chroma .ow { 1088 1088 + color: #91d7e3; 1089 1089 + font-weight: bold; 1090 1090 + } 1091 1091 + /* Comment */ 1092 1092 + .chroma .c { 1093 1093 + color: #6e738d; 1094 1094 + font-style: italic; 1095 1095 + } 1096 1096 + /* CommentHashbang */ 1097 1097 + .chroma .ch { 1098 1098 + color: #6e738d; 1099 1099 + font-style: italic; 1100 1100 + } 1101 1101 + /* CommentMultiline */ 1102 1102 + .chroma .cm { 1103 1103 + color: #6e738d; 1104 1104 + font-style: italic; 1105 1105 + } 1106 1106 + /* CommentSingle */ 1107 1107 + .chroma .c1 { 1108 1108 + color: #6e738d; 1109 1109 + font-style: italic; 1110 1110 + } 1111 1111 + /* CommentSpecial */ 1112 1112 + .chroma .cs { 1113 1113 + color: #6e738d; 1114 1114 + font-style: italic; 1115 1115 + } 1116 1116 + /* CommentPreproc */ 1117 1117 + .chroma .cp { 1118 1118 + color: #6e738d; 1119 1119 + font-style: italic; 1120 1120 + } 1121 1121 + /* CommentPreprocFile */ 1122 1122 + .chroma .cpf { 1123 1123 + color: #6e738d; 1124 1124 + font-weight: bold; 1125 1125 + font-style: italic; 1126 1126 + } 1127 1127 + /* GenericDeleted */ 1128 1128 + .chroma .gd { 1129 1129 + color: #ed8796; 1130 1130 + background-color: oklch(44.4% 0.177 26.899 / 0.5); 1131 1131 + } 1132 1132 + /* GenericEmph */ 1133 1133 + .chroma .ge { 1134 1134 + font-style: italic; 1135 1135 + } 1136 1136 + /* GenericError */ 1137 1137 + .chroma .gr { 1138 1138 + color: #ed8796; 1139 1139 + } 1140 1140 + /* GenericHeading */ 1141 1141 + .chroma .gh { 1142 1142 + color: #f5a97f; 1143 1143 + font-weight: bold; 1144 1144 + } 1145 1145 + /* GenericInserted */ 1146 1146 + .chroma .gi { 1147 1147 + color: #a6da95; 1148 1148 + background-color: oklch(44.8% 0.119 151.328 / 0.5); 1149 1149 + } 1150 1150 + /* GenericStrong */ 1151 1151 + .chroma .gs { 1152 1152 + font-weight: bold; 1153 1153 + } 1154 1154 + /* GenericSubheading */ 1155 1155 + .chroma .gu { 1156 1156 + color: #f5a97f; 1157 1157 + font-weight: bold; 1158 1158 + } 1159 1159 + /* GenericTraceback */ 1160 1160 + .chroma .gt { 1161 1161 + color: #ed8796; 1162 1162 + } 1163 1163 + /* GenericUnderline */ 1164 1164 + .chroma .gl { 1165 1165 + text-decoration: underline; 1166 1166 + } 1125 1167 } 1126 1168 1127 1169 actor-typeahead { 1128 1128 - --color-background: #ffffff; 1129 1129 - --color-border: #d1d5db; 1130 1130 - --color-shadow: #000000; 1131 1131 - --color-hover: #f9fafb; 1132 1132 - --color-avatar-fallback: #e5e7eb; 1133 1133 - --radius: 0; 1134 1134 - --padding-menu: 0rem; 1135 1135 - z-index: 1000; 1170 1170 + --color-background: #ffffff; 1171 1171 + --color-border: #d1d5db; 1172 1172 + --color-shadow: #000000; 1173 1173 + --color-hover: #f9fafb; 1174 1174 + --color-avatar-fallback: #e5e7eb; 1175 1175 + --radius: 0; 1176 1176 + --padding-menu: 0rem; 1177 1177 + z-index: 1000; 1136 1178 } 1137 1179 1138 1180 actor-typeahead::part(handle) { 1139 1139 - color: #111827; 1181 1181 + color: #111827; 1140 1182 } 1141 1183 1142 1184 actor-typeahead::part(menu) { 1143 1143 - box-shadow: 1144 1144 - 0 4px 6px -1px rgb(0 0 0 / 0.1), 1145 1145 - 0 2px 4px -2px rgb(0 0 0 / 0.1); 1185 1185 + box-shadow: 1186 1186 + 0 4px 6px -1px rgb(0 0 0 / 0.1), 1187 1187 + 0 2px 4px -2px rgb(0 0 0 / 0.1); 1146 1188 } 1147 1189 1148 1190 @media (prefers-color-scheme: dark) { 1149 1149 - actor-typeahead { 1150 1150 - --color-background: #1f2937; 1151 1151 - --color-border: #4b5563; 1152 1152 - --color-shadow: #000000; 1153 1153 - --color-hover: #374151; 1154 1154 - --color-avatar-fallback: #4b5563; 1155 1155 - } 1191 1191 + actor-typeahead { 1192 1192 + --color-background: #1f2937; 1193 1193 + --color-border: #4b5563; 1194 1194 + --color-shadow: #000000; 1195 1195 + --color-hover: #374151; 1196 1196 + --color-avatar-fallback: #4b5563; 1197 1197 + } 1156 1198 1157 1157 - actor-typeahead::part(handle) { 1158 1158 - color: #f9fafb; 1159 1159 - } 1199 1199 + actor-typeahead::part(handle) { 1200 1200 + color: #f9fafb; 1201 1201 + } 1160 1202 } 1161 1203 1162 1204 @layer utilities { ··· 1195 1237 background-color: rgba(34, 197, 94, 0.1); 1196 1238 } 1197 1239 1198 1198 - .hit-area-1 { --hit-area-t: -0.25rem; --hit-area-r: -0.25rem; --hit-area-b: -0.25rem; --hit-area-l: -0.25rem; } 1199 1199 - .hit-area-2 { --hit-area-t: -0.5rem; --hit-area-r: -0.5rem; --hit-area-b: -0.5rem; --hit-area-l: -0.5rem; } 1200 1200 - .hit-area-4 { --hit-area-t: -1rem; --hit-area-r: -1rem; --hit-area-b: -1rem; --hit-area-l: -1rem; } 1201 1201 - .hit-area-6 { --hit-area-t: -1.5rem; --hit-area-r: -1.5rem; --hit-area-b: -1.5rem; --hit-area-l: -1.5rem; } 1202 1202 - .hit-area-8 { --hit-area-t: -2rem; --hit-area-r: -2rem; --hit-area-b: -2rem; --hit-area-l: -2rem; } 1203 1203 - .hit-area-10 { --hit-area-t: -2.5rem; --hit-area-r: -2.5rem; --hit-area-b: -2.5rem; --hit-area-l: -2.5rem; } 1204 1204 - .hit-area-12 { --hit-area-t: -3rem; --hit-area-r: -3rem; --hit-area-b: -3rem; --hit-area-l: -3rem; } 1240 1240 + .hit-area-1 { 1241 1241 + --hit-area-t: -0.25rem; 1242 1242 + --hit-area-r: -0.25rem; 1243 1243 + --hit-area-b: -0.25rem; 1244 1244 + --hit-area-l: -0.25rem; 1245 1245 + } 1246 1246 + .hit-area-2 { 1247 1247 + --hit-area-t: -0.5rem; 1248 1248 + --hit-area-r: -0.5rem; 1249 1249 + --hit-area-b: -0.5rem; 1250 1250 + --hit-area-l: -0.5rem; 1251 1251 + } 1252 1252 + .hit-area-4 { 1253 1253 + --hit-area-t: -1rem; 1254 1254 + --hit-area-r: -1rem; 1255 1255 + --hit-area-b: -1rem; 1256 1256 + --hit-area-l: -1rem; 1257 1257 + } 1258 1258 + .hit-area-6 { 1259 1259 + --hit-area-t: -1.5rem; 1260 1260 + --hit-area-r: -1.5rem; 1261 1261 + --hit-area-b: -1.5rem; 1262 1262 + --hit-area-l: -1.5rem; 1263 1263 + } 1264 1264 + .hit-area-8 { 1265 1265 + --hit-area-t: -2rem; 1266 1266 + --hit-area-r: -2rem; 1267 1267 + --hit-area-b: -2rem; 1268 1268 + --hit-area-l: -2rem; 1269 1269 + } 1270 1270 + .hit-area-10 { 1271 1271 + --hit-area-t: -2.5rem; 1272 1272 + --hit-area-r: -2.5rem; 1273 1273 + --hit-area-b: -2.5rem; 1274 1274 + --hit-area-l: -2.5rem; 1275 1275 + } 1276 1276 + .hit-area-12 { 1277 1277 + --hit-area-t: -3rem; 1278 1278 + --hit-area-r: -3rem; 1279 1279 + --hit-area-b: -3rem; 1280 1280 + --hit-area-l: -3rem; 1281 1281 + } 1205 1282 1206 1206 - .hit-area-l-1 { --hit-area-l: -0.25rem; } 1207 1207 - .hit-area-l-2 { --hit-area-l: -0.5rem; } 1208 1208 - .hit-area-l-4 { --hit-area-l: -1rem; } 1209 1209 - .hit-area-l-6 { --hit-area-l: -1.5rem; } 1210 1210 - .hit-area-l-8 { --hit-area-l: -2rem; } 1211 1211 - .hit-area-l-10 { --hit-area-l: -2.5rem; } 1212 1212 - .hit-area-l-12 { --hit-area-l: -3rem; } 1283 1283 + .hit-area-l-1 { 1284 1284 + --hit-area-l: -0.25rem; 1285 1285 + } 1286 1286 + .hit-area-l-2 { 1287 1287 + --hit-area-l: -0.5rem; 1288 1288 + } 1289 1289 + .hit-area-l-4 { 1290 1290 + --hit-area-l: -1rem; 1291 1291 + } 1292 1292 + .hit-area-l-6 { 1293 1293 + --hit-area-l: -1.5rem; 1294 1294 + } 1295 1295 + .hit-area-l-8 { 1296 1296 + --hit-area-l: -2rem; 1297 1297 + } 1298 1298 + .hit-area-l-10 { 1299 1299 + --hit-area-l: -2.5rem; 1300 1300 + } 1301 1301 + .hit-area-l-12 { 1302 1302 + --hit-area-l: -3rem; 1303 1303 + } 1213 1304 1214 1214 - .hit-area-r-1 { --hit-area-r: -0.25rem; } 1215 1215 - .hit-area-r-2 { --hit-area-r: -0.5rem; } 1216 1216 - .hit-area-r-4 { --hit-area-r: -1rem; } 1217 1217 - .hit-area-r-6 { --hit-area-r: -1.5rem; } 1218 1218 - .hit-area-r-8 { --hit-area-r: -2rem; } 1219 1219 - .hit-area-r-10 { --hit-area-r: -2.5rem; } 1220 1220 - .hit-area-r-12 { --hit-area-r: -3rem; } 1305 1305 + .hit-area-r-1 { 1306 1306 + --hit-area-r: -0.25rem; 1307 1307 + } 1308 1308 + .hit-area-r-2 { 1309 1309 + --hit-area-r: -0.5rem; 1310 1310 + } 1311 1311 + .hit-area-r-4 { 1312 1312 + --hit-area-r: -1rem; 1313 1313 + } 1314 1314 + .hit-area-r-6 { 1315 1315 + --hit-area-r: -1.5rem; 1316 1316 + } 1317 1317 + .hit-area-r-8 { 1318 1318 + --hit-area-r: -2rem; 1319 1319 + } 1320 1320 + .hit-area-r-10 { 1321 1321 + --hit-area-r: -2.5rem; 1322 1322 + } 1323 1323 + .hit-area-r-12 { 1324 1324 + --hit-area-r: -3rem; 1325 1325 + } 1221 1326 1222 1222 - .hit-area-t-1 { --hit-area-t: -0.25rem; } 1223 1223 - .hit-area-t-2 { --hit-area-t: -0.5rem; } 1224 1224 - .hit-area-t-4 { --hit-area-t: -1rem; } 1225 1225 - .hit-area-t-6 { --hit-area-t: -1.5rem; } 1226 1226 - .hit-area-t-8 { --hit-area-t: -2rem; } 1227 1227 - .hit-area-t-10 { --hit-area-t: -2.5rem; } 1228 1228 - .hit-area-t-12 { --hit-area-t: -3rem; } 1327 1327 + .hit-area-t-1 { 1328 1328 + --hit-area-t: -0.25rem; 1329 1329 + } 1330 1330 + .hit-area-t-2 { 1331 1331 + --hit-area-t: -0.5rem; 1332 1332 + } 1333 1333 + .hit-area-t-4 { 1334 1334 + --hit-area-t: -1rem; 1335 1335 + } 1336 1336 + .hit-area-t-6 { 1337 1337 + --hit-area-t: -1.5rem; 1338 1338 + } 1339 1339 + .hit-area-t-8 { 1340 1340 + --hit-area-t: -2rem; 1341 1341 + } 1342 1342 + .hit-area-t-10 { 1343 1343 + --hit-area-t: -2.5rem; 1344 1344 + } 1345 1345 + .hit-area-t-12 { 1346 1346 + --hit-area-t: -3rem; 1347 1347 + } 1229 1348 1230 1230 - .hit-area-b-1 { --hit-area-b: -0.25rem; } 1231 1231 - .hit-area-b-2 { --hit-area-b: -0.5rem; } 1232 1232 - .hit-area-b-4 { --hit-area-b: -1rem; } 1233 1233 - .hit-area-b-6 { --hit-area-b: -1.5rem; } 1234 1234 - .hit-area-b-8 { --hit-area-b: -2rem; } 1235 1235 - .hit-area-b-10 { --hit-area-b: -2.5rem; } 1236 1236 - .hit-area-b-12 { --hit-area-b: -3rem; } 1349 1349 + .hit-area-b-1 { 1350 1350 + --hit-area-b: -0.25rem; 1351 1351 + } 1352 1352 + .hit-area-b-2 { 1353 1353 + --hit-area-b: -0.5rem; 1354 1354 + } 1355 1355 + .hit-area-b-4 { 1356 1356 + --hit-area-b: -1rem; 1357 1357 + } 1358 1358 + .hit-area-b-6 { 1359 1359 + --hit-area-b: -1.5rem; 1360 1360 + } 1361 1361 + .hit-area-b-8 { 1362 1362 + --hit-area-b: -2rem; 1363 1363 + } 1364 1364 + .hit-area-b-10 { 1365 1365 + --hit-area-b: -2.5rem; 1366 1366 + } 1367 1367 + .hit-area-b-12 { 1368 1368 + --hit-area-b: -3rem; 1369 1369 + } 1237 1370 1238 1238 - .hit-area-x-1 { --hit-area-l: -0.25rem; --hit-area-r: -0.25rem; } 1239 1239 - .hit-area-x-2 { --hit-area-l: -0.5rem; --hit-area-r: -0.5rem; } 1240 1240 - .hit-area-x-4 { --hit-area-l: -1rem; --hit-area-r: -1rem; } 1241 1241 - .hit-area-x-6 { --hit-area-l: -1.5rem; --hit-area-r: -1.5rem; } 1242 1242 - .hit-area-x-8 { --hit-area-l: -2rem; --hit-area-r: -2rem; } 1243 1243 - .hit-area-x-10 { --hit-area-l: -2.5rem; --hit-area-r: -2.5rem; } 1244 1244 - .hit-area-x-12 { --hit-area-l: -3rem; --hit-area-r: -3rem; } 1371 1371 + .hit-area-x-1 { 1372 1372 + --hit-area-l: -0.25rem; 1373 1373 + --hit-area-r: -0.25rem; 1374 1374 + } 1375 1375 + .hit-area-x-2 { 1376 1376 + --hit-area-l: -0.5rem; 1377 1377 + --hit-area-r: -0.5rem; 1378 1378 + } 1379 1379 + .hit-area-x-4 { 1380 1380 + --hit-area-l: -1rem; 1381 1381 + --hit-area-r: -1rem; 1382 1382 + } 1383 1383 + .hit-area-x-6 { 1384 1384 + --hit-area-l: -1.5rem; 1385 1385 + --hit-area-r: -1.5rem; 1386 1386 + } 1387 1387 + .hit-area-x-8 { 1388 1388 + --hit-area-l: -2rem; 1389 1389 + --hit-area-r: -2rem; 1390 1390 + } 1391 1391 + .hit-area-x-10 { 1392 1392 + --hit-area-l: -2.5rem; 1393 1393 + --hit-area-r: -2.5rem; 1394 1394 + } 1395 1395 + .hit-area-x-12 { 1396 1396 + --hit-area-l: -3rem; 1397 1397 + --hit-area-r: -3rem; 1398 1398 + } 1245 1399 1246 1246 - .hit-area-y-1 { --hit-area-t: -0.25rem; --hit-area-b: -0.25rem; } 1247 1247 - .hit-area-y-2 { --hit-area-t: -0.5rem; --hit-area-b: -0.5rem; } 1248 1248 - .hit-area-y-4 { --hit-area-t: -1rem; --hit-area-b: -1rem; } 1249 1249 - .hit-area-y-6 { --hit-area-t: -1.5rem; --hit-area-b: -1.5rem; } 1250 1250 - .hit-area-y-8 { --hit-area-t: -2rem; --hit-area-b: -2rem; } 1251 1251 - .hit-area-y-10 { --hit-area-t: -2.5rem; --hit-area-b: -2.5rem; } 1252 1252 - .hit-area-y-12 { --hit-area-t: -3rem; --hit-area-b: -3rem; } 1400 1400 + .hit-area-y-1 { 1401 1401 + --hit-area-t: -0.25rem; 1402 1402 + --hit-area-b: -0.25rem; 1403 1403 + } 1404 1404 + .hit-area-y-2 { 1405 1405 + --hit-area-t: -0.5rem; 1406 1406 + --hit-area-b: -0.5rem; 1407 1407 + } 1408 1408 + .hit-area-y-4 { 1409 1409 + --hit-area-t: -1rem; 1410 1410 + --hit-area-b: -1rem; 1411 1411 + } 1412 1412 + .hit-area-y-6 { 1413 1413 + --hit-area-t: -1.5rem; 1414 1414 + --hit-area-b: -1.5rem; 1415 1415 + } 1416 1416 + .hit-area-y-8 { 1417 1417 + --hit-area-t: -2rem; 1418 1418 + --hit-area-b: -2rem; 1419 1419 + } 1420 1420 + .hit-area-y-10 { 1421 1421 + --hit-area-t: -2.5rem; 1422 1422 + --hit-area-b: -2.5rem; 1423 1423 + } 1424 1424 + .hit-area-y-12 { 1425 1425 + --hit-area-t: -3rem; 1426 1426 + --hit-area-b: -3rem; 1427 1427 + } 1253 1428 }