329 lines
8.1 KiB
CSS
329 lines
8.1 KiB
CSS
/* *********************************************** */
|
|
/* ********** CodeMirror DaisyUI Theme *********** */
|
|
/* *********************************************** */
|
|
|
|
/* Theme selector - uses DaisyUI variables for automatic theme switching */
|
|
.cm-s-daisy.CodeMirror {
|
|
background-color: var(--color-base-100);
|
|
color: var(--color-base-content);
|
|
font-family: var(--font-mono, ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace);
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
height: auto;
|
|
border-radius: 0.5rem;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
/* Cursor */
|
|
.cm-s-daisy .CodeMirror-cursor {
|
|
border-left-color: var(--color-primary);
|
|
border-left-width: 2px;
|
|
}
|
|
|
|
/* Selection */
|
|
.cm-s-daisy .CodeMirror-selected {
|
|
background-color: var(--color-selection) !important;
|
|
}
|
|
|
|
.cm-s-daisy.CodeMirror-focused .CodeMirror-selected {
|
|
background-color: color-mix(in oklab, var(--color-primary) 30%, transparent) !important;
|
|
}
|
|
|
|
/* Line numbers and gutters */
|
|
.cm-s-daisy .CodeMirror-gutters {
|
|
background-color: var(--color-base-200);
|
|
border-right: 1px solid var(--color-border);
|
|
}
|
|
|
|
.cm-s-daisy .CodeMirror-linenumber {
|
|
color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
|
|
padding: 0 8px;
|
|
}
|
|
|
|
/* Active line */
|
|
.cm-s-daisy .CodeMirror-activeline-background {
|
|
background-color: color-mix(in oklab, var(--color-base-content) 5%, transparent);
|
|
}
|
|
|
|
.cm-s-daisy .CodeMirror-activeline-gutter {
|
|
background-color: var(--color-base-300);
|
|
}
|
|
|
|
/* Matching brackets */
|
|
.cm-s-daisy .CodeMirror-matchingbracket {
|
|
color: var(--color-success) !important;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.cm-s-daisy .CodeMirror-nonmatchingbracket {
|
|
color: var(--color-error) !important;
|
|
}
|
|
|
|
/* *********************************************** */
|
|
/* ******** CodeMirror Syntax Highlighting ******* */
|
|
/* *********************************************** */
|
|
|
|
/* Keywords (column, row, cell, if, not, and, or, in, between, case) */
|
|
.cm-s-daisy .cm-keyword {
|
|
color: var(--color-primary);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Built-in functions (style, format) */
|
|
.cm-s-daisy .cm-builtin {
|
|
color: var(--color-secondary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Operators (==, <, >, contains, startswith, etc.) */
|
|
.cm-s-daisy .cm-operator {
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
/* Strings ("error", "EUR", etc.) */
|
|
.cm-s-daisy .cm-string {
|
|
color: var(--color-success);
|
|
}
|
|
|
|
/* Numbers (0, 100, 3.14) */
|
|
.cm-s-daisy .cm-number {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* Booleans (True, False, true, false) */
|
|
.cm-s-daisy .cm-atom {
|
|
color: var(--color-info);
|
|
}
|
|
|
|
/* Special variables (value, col, row, cell) */
|
|
.cm-s-daisy .cm-variable-2 {
|
|
color: var(--color-accent);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Cell IDs (tcell_*) */
|
|
.cm-s-daisy .cm-variable-3 {
|
|
color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
|
|
}
|
|
|
|
/* Comments (#...) */
|
|
.cm-s-daisy .cm-comment {
|
|
color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Property names (bold=, color=, etc.) */
|
|
.cm-s-daisy .cm-property {
|
|
color: var(--color-base-content);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Errors/invalid syntax */
|
|
.cm-s-daisy .cm-error {
|
|
color: var(--color-error);
|
|
text-decoration: underline wavy;
|
|
}
|
|
|
|
/* *********************************************** */
|
|
/* ********** CodeMirror Autocomplete ************ */
|
|
/* *********************************************** */
|
|
|
|
/* Autocomplete dropdown container */
|
|
.CodeMirror-hints {
|
|
background-color: var(--color-base-100);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
font-family: var(--font-mono, ui-monospace, monospace);
|
|
font-size: 13px;
|
|
max-height: 20em;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Individual hint items */
|
|
.CodeMirror-hint {
|
|
color: var(--color-base-content);
|
|
padding: 4px 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Hovered/selected hint */
|
|
.CodeMirror-hint-active {
|
|
background-color: var(--color-primary);
|
|
color: var(--color-primary-content);
|
|
}
|
|
|
|
/* *********************************************** */
|
|
/* ********** CodeMirror Lint Markers ************ */
|
|
/* *********************************************** */
|
|
|
|
/* Lint gutter marker */
|
|
.CodeMirror-lint-marker {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.CodeMirror-lint-marker-error {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.CodeMirror-lint-marker-warning {
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
/* Lint tooltip */
|
|
.CodeMirror-lint-tooltip {
|
|
background-color: var(--color-base-100);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 0.375rem;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
color: var(--color-base-content);
|
|
font-family: var(--font-sans, ui-sans-serif, system-ui);
|
|
font-size: 13px;
|
|
padding: 8px 12px;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.CodeMirror-lint-message-error {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.CodeMirror-lint-message-warning {
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
/* *********************************************** */
|
|
/* ********** DslEditor Wrapper Styles *********** */
|
|
/* *********************************************** */
|
|
|
|
/* Wrapper container for DslEditor */
|
|
.mf-dsl-editor-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Editor container */
|
|
.mf-dsl-editor {
|
|
border-radius: 0.5rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* *********************************************** */
|
|
/* ********** Preset Styles *********** */
|
|
/* *********************************************** */
|
|
|
|
.mf-formatting-primary {
|
|
background-color: color-mix(in oklab, var(--color-primary) 65%, #0000);
|
|
color: var(--color-primary-content);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.mf-formatting-secondary {
|
|
background-color: var(--color-secondary);
|
|
color: var(--color-secondary-content);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.mf-formatting-accent {
|
|
background-color: var(--color-accent);
|
|
color: var(--color-accent-content);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.mf-formatting-neutral {
|
|
background-color: var(--color-neutral);
|
|
color: var(--color-neutral-content);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.mf-formatting-info {
|
|
background-color: var(--color-info);
|
|
color: var(--color-info-content);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.mf-formatting-success {
|
|
background-color: var(--color-success);
|
|
color: var(--color-success-content);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.mf-formatting-warning {
|
|
background-color: var(--color-warning);
|
|
color: var(--color-warning-content);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.mf-formatting-error {
|
|
background-color: var(--color-error);
|
|
color: var(--color-error-content);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
|
|
.mf-formatting-red {
|
|
background-color: color-mix(in oklab, red 50%, #0000);
|
|
color: var(--color-primary-content);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
|
|
.mf-formatting-red {
|
|
background-color: color-mix(in oklab, red 50%, #0000);
|
|
color: var(--color-primary-content);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.mf-formatting-blue {
|
|
background-color: color-mix(in oklab, blue 50%, #0000);
|
|
color: var(--color-primary-content);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.mf-formatting-green {
|
|
background-color: color-mix(in oklab, green 50%, #0000);
|
|
color: var(--color-primary-content);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.mf-formatting-yellow {
|
|
background-color: color-mix(in oklab, yellow 50%, #0000);
|
|
color: var(--color-base-content);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.mf-formatting-orange {
|
|
background-color: color-mix(in oklab, orange 50%, #0000);
|
|
color: var(--color-base-content);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.mf-formatting-purple {
|
|
background-color: color-mix(in oklab, purple 50%, #0000);
|
|
color: var(--color-primary-content);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.mf-formatting-pink {
|
|
background-color: color-mix(in oklab, pink 50%, #0000);
|
|
color: var(--color-base-content);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.mf-formatting-gray {
|
|
background-color: color-mix(in oklab, gray 50%, #0000);
|
|
color: var(--color-primary-content);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.mf-formatting-black {
|
|
background-color: black;
|
|
color: var(--color-primary-content);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.mf-formatting-white {
|
|
background-color: white;
|
|
color: var(--color-base-content);
|
|
border-radius: 0.375rem;
|
|
} |