resources/css/highlighting.css - main - evo/docviz

resources/css/highlighting.css
427 строк8 KB
evo
Fix markdown editor
09 фев 2026, 00:13
09 фев 2026, 00:13f7a315b
/* ============================================
   CODE BLOCKS — синтаксис, стиль сайта
   Светлая и тёмная темы
   + номера строк, кнопка копирования
   ============================================ */

/* Обёртка с номерами строк и кнопкой */
.code-block-wrapper {
    @apply relative mb-4 rounded-xl border overflow-hidden;
}

.code-block-header {
    @apply absolute top-0 right-0 z-10 p-2;
}

.code-block-copy {
    @apply flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border transition;
    @apply bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm;
    @apply border-slate-200 dark:border-slate-600;
    @apply text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200;
    @apply hover:bg-slate-100 dark:hover:bg-slate-700/80;
}

.code-block-copy.copied {
    @apply text-emerald-600 dark:text-emerald-400 border-emerald-300 dark:border-emerald-700;
}

.code-block-body {
    @apply flex overflow-x-auto;
}

.code-block-line-numbers {
    @apply flex flex-col py-4 pl-4 pr-3 text-right select-none shrink-0;
    @apply text-slate-400 dark:text-slate-500 text-sm font-mono leading-relaxed;
    @apply border-r border-slate-200 dark:border-slate-700;
}

.code-block-line-numbers span {
    @apply block;
}

.code-block-body pre {
    @apply flex-1 min-w-0 mb-0 rounded-none border-0 overflow-x-auto;
}

.code-block-body pre code {
    @apply py-4 pl-4 pr-4;
}

/* Фон и рамка для обёртки */
html:not(.dark) .code-block-wrapper {
    @apply bg-slate-50 border-slate-200;
}

html.dark .code-block-wrapper {
    @apply bg-slate-900 border-slate-700;
}

/* Базовые блоки pre/code (без обёртки) */
.prose pre:not(.code-block-body pre),
.markdown-content pre:not(.code-block-body pre) {
    @apply rounded-xl overflow-x-auto mb-4 border;
}

.prose pre code,
.markdown-content pre code {
    @apply block p-4 text-sm font-mono leading-relaxed;
}

.prose code:not(pre code),
.markdown-content code:not(pre code) {
    @apply rounded px-2 py-1 text-sm font-mono;
}

html:not(.dark) .prose code:not(pre code),
html:not(.dark) .markdown-content code:not(pre code) {
    @apply bg-slate-50 text-slate-800 border border-slate-200;
}

html.dark .prose code:not(pre code),
html.dark .markdown-content code:not(pre code) {
    @apply bg-slate-900 text-slate-200 border border-slate-700;
}

/* ---- СВЕТЛАЯ ТЕМА ---- */
.prose pre,
.markdown-content pre {
    @apply bg-slate-50 border-slate-200;
}

.prose pre code,
.markdown-content pre code {
    @apply text-slate-800;
}

/* Светлая тема — элементы синтаксиса */
html:not(.dark) .prose pre .hljs,
html:not(.dark) .markdown-content pre .hljs,
html:not(.dark) .prose pre code,
html:not(.dark) .markdown-content pre code {
    @apply text-slate-800;
}

html:not(.dark) .hljs-comment,
html:not(.dark) .hljs-quote {
    @apply text-slate-500 italic;
}

html:not(.dark) .hljs-doctag {
    @apply text-indigo-500 italic;
}

html:not(.dark) .hljs-keyword,
html:not(.dark) .hljs-selector-tag,
html:not(.dark) .hljs-addition {
    @apply text-violet-600 font-medium;
}

html:not(.dark) .hljs-string {
    @apply text-emerald-700;
}

html:not(.dark) .hljs-attr,
html:not(.dark) .hljs-attribute {
    @apply text-amber-700;
}

html:not(.dark) .hljs-template-variable {
    @apply text-amber-600;
}

html:not(.dark) .hljs-type {
    @apply text-sky-600;
}

html:not(.dark) .hljs-number,
html:not(.dark) .hljs-literal {
    @apply text-rose-600;
}

html:not(.dark) .hljs-title {
    @apply text-sky-600 font-medium;
}

html:not(.dark) .hljs-params {
    @apply text-slate-600;
}

html:not(.dark) .hljs-built_in {
    @apply text-teal-600;
}

html:not(.dark) .hljs-class {
    @apply text-violet-600;
}

html:not(.dark) .hljs-property {
    @apply text-teal-700;
}

html:not(.dark) .hljs-meta,
html:not(.dark) .hljs-meta .hljs-keyword {
    @apply text-slate-500;
}

html:not(.dark) .hljs-meta .hljs-string {
    @apply text-emerald-600;
}

html:not(.dark) .hljs-variable,
html:not(.dark) .hljs-name {
    @apply text-slate-700;
}

html:not(.dark) .hljs-variable\.language_ {
    @apply text-violet-600;
}

html:not(.dark) .hljs-variable\.constant_ {
    @apply text-rose-600 font-medium;
}

html:not(.dark) .hljs-punctuation {
    @apply text-slate-500;
}

html:not(.dark) .hljs-operator {
    @apply text-slate-600;
}

html:not(.dark) .hljs-tag .hljs-name {
    @apply text-rose-600;
}

html:not(.dark) .hljs-tag .hljs-attr {
    @apply text-amber-700;
}

html:not(.dark) .hljs-regexp,
html:not(.dark) .hljs-link {
    @apply text-teal-600;
}

html:not(.dark) .hljs-char\.escape_ {
    @apply text-amber-600;
}

html:not(.dark) .hljs-subst {
    @apply text-slate-600;
}

html:not(.dark) .hljs-symbol {
    @apply text-rose-500;
}

html:not(.dark) .hljs-section {
    @apply text-slate-700 font-semibold;
}

html:not(.dark) .hljs-selector-id,
html:not(.dark) .hljs-selector-class,
html:not(.dark) .hljs-selector-attr,
html:not(.dark) .hljs-selector-pseudo {
    @apply text-teal-600;
}

html:not(.dark) .hljs-deletion {
    @apply text-rose-600 line-through;
}

html:not(.dark) .hljs-meta\.prompt {
    @apply text-slate-500;
}

/* ---- ТЁМНАЯ ТЕМА ---- */
html.dark .prose pre,
html.dark .markdown-content pre {
    @apply bg-slate-900 border-slate-700;
}

html.dark .prose pre code,
html.dark .markdown-content pre code {
    @apply text-slate-200;
}

html.dark .prose pre .hljs,
html.dark .markdown-content pre .hljs,
html.dark .hljs {
    @apply text-slate-200;
}

html.dark .hljs-comment,
html.dark .hljs-quote {
    @apply text-slate-500 italic;
}

html.dark .hljs-doctag {
    @apply text-indigo-400 italic;
}

html.dark .hljs-keyword,
html.dark .hljs-selector-tag,
html.dark .hljs-addition {
    @apply text-violet-400 font-medium;
}

html.dark .hljs-string {
    @apply text-emerald-400;
}

html.dark .hljs-attr,
html.dark .hljs-attribute {
    @apply text-amber-400;
}

html.dark .hljs-template-variable {
    @apply text-amber-300;
}

html.dark .hljs-type {
    @apply text-sky-400;
}

html.dark .hljs-number,
html.dark .hljs-literal {
    @apply text-rose-400;
}

html.dark .hljs-title {
    @apply text-sky-400 font-medium;
}

html.dark .hljs-params {
    @apply text-slate-400;
}

html.dark .hljs-built_in {
    @apply text-teal-400;
}

html.dark .hljs-class {
    @apply text-violet-400;
}

html.dark .hljs-property {
    @apply text-teal-300;
}

html.dark .hljs-meta,
html.dark .hljs-meta .hljs-keyword {
    @apply text-slate-500;
}

html.dark .hljs-meta .hljs-string {
    @apply text-emerald-500;
}

html.dark .hljs-variable,
html.dark .hljs-name {
    @apply text-slate-300;
}

html.dark .hljs-variable\.language_ {
    @apply text-violet-400;
}

html.dark .hljs-variable\.constant_ {
    @apply text-rose-400 font-medium;
}

html.dark .hljs-punctuation {
    @apply text-slate-500;
}

html.dark .hljs-operator {
    @apply text-slate-400;
}

html.dark .hljs-tag .hljs-name {
    @apply text-rose-400;
}

html.dark .hljs-tag .hljs-attr {
    @apply text-amber-400;
}

html.dark .hljs-regexp,
html.dark .hljs-link {
    @apply text-teal-400;
}

html.dark .hljs-char\.escape_ {
    @apply text-amber-400;
}

html.dark .hljs-subst {
    @apply text-slate-400;
}

html.dark .hljs-symbol {
    @apply text-rose-400;
}

html.dark .hljs-section {
    @apply text-slate-300 font-semibold;
}

html.dark .hljs-selector-id,
html.dark .hljs-selector-class,
html.dark .hljs-selector-attr,
html.dark .hljs-selector-pseudo {
    @apply text-teal-400;
}

html.dark .hljs-deletion {
    @apply text-rose-400 line-through;
}

html.dark .hljs-meta\.prompt_ {
    @apply text-slate-500;
}

/* Prose dark mode (если используется .prose) */
.dark .prose {
    @apply text-slate-300;
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6 {
    @apply text-white;
}

.dark .prose a {
    @apply text-indigo-400 hover:text-indigo-300;
}

.dark .prose code {
    @apply bg-slate-800;
}

.dark .prose pre {
    @apply bg-slate-900 border-slate-700;
}

.dark .prose hr {
    @apply border-slate-700;
}

.dark .prose table {
    @apply border-slate-700;
}

.dark .prose thead {
    @apply border-slate-700;
}

.dark .prose tbody tr {
    @apply border-slate-700;
}

.dark .prose blockquote {
    @apply border-slate-700 text-slate-400;
}