/* Theme handling (using data-theme on or ) */
html[data-theme="light"],
body[data-theme="light"] {
background-color: #f3f4f6;
color: #111827;
}
html[data-theme="dark"],
body[data-theme="dark"] {
background-color: #020617;
color: #e5e7eb;
}
/* Dark mode card + elements */
body[data-theme="dark"] .main-card {
background-color: #020617;
border-color: #1f2933;
}
body[data-theme="dark"] input,
body[data-theme="dark"] .btn-primary,
body[data-theme="dark"] .btn-secondary,
body[data-theme="dark"] .btn-outline {
background-color: #020617;
color: #e5e7eb;
border-color: #334155;
}
body[data-theme="dark"] input {
border-color: #334155;
}
body[data-theme="dark"] .preview-container {
background-color: #020617;
}
/* Editor panel with line numbers */
.editor-panel {
display: flex;
border-radius: 0.75rem;
border: 1px solid #e5e7eb;
overflow: hidden;
background-color: #f9fafb;
}
/* Dark theme editor panel */
body[data-theme="dark"] .editor-panel {
background-color: #020617;
border-color: #1f2933;
}
/* Line numbers column */
.line-numbers {
width: 3rem;
padding: 0.75rem 0.5rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
font-size: 0.75rem;
line-height: 1.5;
text-align: right;
color: #9ca3af;
background-color: #f3f4f6;
border-right: 1px solid #e5e7eb;
box-sizing: border-box;
overflow: hidden;
}
/* Dark mode line numbers */
body[data-theme="dark"] .line-numbers {
background-color: #020617;
border-right-color: #1f2933;
color: #6b7280;
}
/* Code editor textarea */
.code-editor {
flex: 1;
padding: 0.75rem 0.75rem;
font-family: ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace;
font-size: 0.8rem;
line-height: 1.5;
border: none;
outline: none;
resize: vertical;
min-height: 260px;
background-color: transparent;
color: inherit;
overflow:auto;
}
/* Ensure line numbers and editor scroll together vertically */
.code-editor,
.line-numbers {
scrollbar-width: thin;
}
/* Preview */
.preview-container {
border-radius: 0.75rem;
border: 1px solid #e5e7eb;
padding: 0.25rem;
background-color: #f9fafb;
min-height: 500px;
box-sizing: border-box;
}
.preview-frame {
width: 100%;
height: 100%;
min-height: 800px;
}
/* Buttons */
.btn-primary,
.btn-secondary,
.btn-outline {
font-size: 0.8rem;
padding: 0.5rem 0.85rem;
border-radius: 9999px;
border-width: 1px;
font-weight: 500;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
cursor: pointer;
transition: transform 0.08s ease, box-shadow 0.12s ease,
background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
text-decoration: none;
}
.btn-primary {
background-color: #2563eb;
color: #ffffff;
border-color: #1d4ed8;
box-shadow: 0 6px 12px rgba(37, 99, 235, 0.25);
}
.btn-primary:hover {
background-color: #1d4ed8;
transform: translateY(-1px);
box-shadow: 0 8px 16px rgba(37, 99, 235, 0.35);
}
.btn-secondary {
background-color: #f9fafb;
color: #111827;
border-color: #e5e7eb;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.btn-secondary:hover {
background-color: #e5e7eb;
transform: translateY(-1px);
}
.btn-outline {
background-color: #ffffff;
color: #2563eb;
border-color: #bfdbfe;
}
.btn-outline:hover {
background-color: #eff6ff;
transform: translateY(-1px);
}
/* Dark mode hover tweaks */
body[data-theme="dark"] .btn-primary {
background-color: #2563eb;
border-color: #1d4ed8;
box-shadow: 0 6px 12px rgba(15, 23, 42, 0.7);
}
body[data-theme="dark"] .btn-primary:hover {
background-color: #1d4ed8;
}
body[data-theme="dark"] .btn-secondary {
background-color: #020617;
border-color: #1f2933;
}
body[data-theme="dark"] .btn-secondary:hover {
background-color: #020617;
border-color: #334155;
}
body[data-theme="dark"] .btn-outline {
background-color: transparent;
}
/* Tiny kbd styling */
kbd {
display: inline-block;
padding: 0.1rem 0.25rem;
border-radius: 0.25rem;
background: #e5e7eb;
font-size: 0.7rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
}
body[data-theme="dark"] kbd {
background: #1f2937;
}
/* Dark mode code editor text */
body[data-theme="dark"] .code-editor {
color: #e5e7eb;
background-color: #020617;
}
body[data-theme="dark"] .editor-panel {
background-color: #020617;
}
body[data-theme="dark"] .preview-container {
background-color: #020617;
}