diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index d3a429caa..3069b5afa 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1173,64 +1173,37 @@ body:has(#menu-controller:checked) { /* Background */ -.prose .chroma { - position: static; +.chroma { border-radius: 0.375rem; --tw-bg-opacity: 1; background-color: rgba(var(--color-neutral-50), var(--tw-bg-opacity)); + padding-top: 0.75rem; + padding-bottom: 0.75rem; --tw-text-opacity: 1; color: rgba(var(--color-neutral-700), var(--tw-text-opacity)); } -.dark .prose .chroma { +.dark .chroma { --tw-bg-opacity: 1; background-color: rgba(var(--color-neutral-700), var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgba(var(--color-neutral-200), var(--tw-text-opacity)); } -/* LineTableTD */ - -.chroma .lntd, -.chroma .lntd pre { +.chroma pre { margin: 0px; - overflow: hidden; - border-style: none; padding: 0px; - vertical-align: top; } /* LineTable */ .chroma .lntable { + margin: 0px; display: block; width: auto; - overflow-x: auto; - padding-top: 0.75rem; - padding-bottom: 0.75rem; + overflow: auto; font-size: 1rem; line-height: 1.5rem; - border-spacing: 0; -} - -/* LineTable Line */ - -.chroma .lntable .line { - padding-right: 1rem; -} - -/* LineHighlight */ - -.chroma .hl { - display: block; - width: auto; - --tw-bg-opacity: 1; - background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity)); -} - -.dark .chroma .hl { - --tw-bg-opacity: 1; - background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity)); } /* LineNumbersTable */ @@ -1239,11 +1212,9 @@ body:has(#menu-controller:checked) { .chroma .lnt, .chroma .ln { - margin-right: 0.4em; - padding-left: 0.4em; - padding-right: 0.4em; - padding-top: 0px; - padding-bottom: 0px; + margin-right: 0.5rem; + padding-left: 0.5rem; + padding-right: 0.5rem; --tw-text-opacity: 1; color: rgba(var(--color-neutral-600), var(--tw-text-opacity)); } @@ -1254,6 +1225,29 @@ body:has(#menu-controller:checked) { color: rgba(var(--color-neutral-300), var(--tw-text-opacity)); } +.chroma .lntd { + padding: 0px; + vertical-align: top; +} + +.chroma .lntd:last-of-type { + width: 100%; +} + +/* LineHighlight */ + +.chroma .hl { + display: block; + width: 100%; + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-100), var(--tw-bg-opacity)); +} + +.dark .chroma .hl { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity)); +} + /* Keyword */ /* KeywordDeclaration */ diff --git a/assets/css/main.css b/assets/css/main.css index 106e16f82..6c5e70fd4 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -98,32 +98,31 @@ body:has(#menu-controller:checked) { /* -- Chroma Highlight -- */ /* Background */ -.prose .chroma { - @apply static rounded-md bg-neutral-50 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200; +.chroma { + @apply py-3 rounded-md bg-neutral-50 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200; } -/* LineTableTD */ -.chroma .lntd, -.chroma .lntd pre { - @apply p-0 m-0 overflow-hidden align-top border-none; +.chroma pre { + @apply p-0 m-0; } /* LineTable */ .chroma .lntable { - @apply block w-auto py-3 overflow-x-auto text-base; - border-spacing: 0; -} -/* LineTable Line */ -.chroma .lntable .line { - @apply pr-4; -} -/* LineHighlight */ -.chroma .hl { - @apply block w-auto bg-primary-100 dark:bg-primary-900; + @apply block w-auto m-0 overflow-auto text-base; } /* LineNumbersTable */ /* LineNumbers */ .chroma .lnt, .chroma .ln { - @apply mr-[0.4em] px-[0.4em] py-0 text-neutral-600 dark:text-neutral-300; + @apply px-2 mr-2 text-neutral-600 dark:text-neutral-300; +} +.chroma .lntd { + @apply p-0 align-top; +} +.chroma .lntd:last-of-type { + @apply w-full; +} +/* LineHighlight */ +.chroma .hl { + @apply block w-full bg-primary-100 dark:bg-primary-900; } /* Keyword */ /* KeywordDeclaration */