170 lines
4.7 KiB
CSS
170 lines
4.7 KiB
CSS
/* =============================================================================
|
|
EASYMDE EDITOR DARK MODE STYLES
|
|
============================================================================= */
|
|
|
|
/* Toolbar Container */
|
|
.EasyMDEContainer .editor-toolbar {
|
|
background-color: hsl(var(--color-background-secondary)) !important;
|
|
border-color: hsl(var(--color-neutral)) !important;
|
|
border-radius: 0.5rem 0.5rem 0 0;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
/* Toolbar Buttons */
|
|
.EasyMDEContainer .editor-toolbar button {
|
|
color: hsl(var(--color-base)) !important;
|
|
background-color: transparent !important;
|
|
border: 1px solid transparent !important;
|
|
border-radius: 0.375rem;
|
|
padding: 0.25rem 0.5rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.EasyMDEContainer .editor-toolbar button:hover {
|
|
background-color: hsl(var(--color-neutral) / 0.3) !important;
|
|
border-color: hsl(var(--color-neutral)) !important;
|
|
}
|
|
|
|
.EasyMDEContainer .editor-toolbar button.active {
|
|
background-color: hsl(var(--color-primary) / 0.2) !important;
|
|
border-color: hsl(var(--color-primary)) !important;
|
|
color: hsl(var(--color-primary)) !important;
|
|
}
|
|
|
|
/* Toolbar Separator */
|
|
.EasyMDEContainer .editor-toolbar i.separator {
|
|
border-left-color: hsl(var(--color-neutral)) !important;
|
|
border-right-color: hsl(var(--color-neutral)) !important;
|
|
}
|
|
|
|
/* CodeMirror Editor Area */
|
|
.EasyMDEContainer .CodeMirror {
|
|
background-color: hsl(var(--color-background)) !important;
|
|
border-color: hsl(var(--color-neutral)) !important;
|
|
border-radius: 0 0 0.5rem 0.5rem;
|
|
color: hsl(var(--color-base)) !important;
|
|
}
|
|
|
|
.EasyMDEContainer .CodeMirror-cursor {
|
|
border-left-color: hsl(var(--color-base)) !important;
|
|
}
|
|
|
|
/* Placeholder Text */
|
|
.EasyMDEContainer .CodeMirror .CodeMirror-placeholder {
|
|
color: hsl(var(--color-muted)) !important;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Selected Text */
|
|
.EasyMDEContainer .CodeMirror-selected {
|
|
background-color: hsl(var(--color-primary) / 0.3) !important;
|
|
}
|
|
|
|
/* Scrollbar Styling */
|
|
.EasyMDEContainer .CodeMirror-scroll {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: hsl(var(--color-neutral)) transparent;
|
|
}
|
|
|
|
.EasyMDEContainer .CodeMirror-scroll::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.EasyMDEContainer .CodeMirror-scroll::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.EasyMDEContainer .CodeMirror-scroll::-webkit-scrollbar-thumb {
|
|
background-color: hsl(var(--color-neutral));
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Status Bar */
|
|
.EasyMDEContainer .editor-statusbar {
|
|
background-color: hsl(var(--color-background-secondary)) !important;
|
|
border-color: hsl(var(--color-neutral)) !important;
|
|
color: hsl(var(--color-muted)) !important;
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
|
|
/* Preview Mode */
|
|
.EasyMDEContainer .editor-preview {
|
|
background-color: hsl(var(--color-background)) !important;
|
|
color: hsl(var(--color-base)) !important;
|
|
}
|
|
|
|
.EasyMDEContainer .editor-preview-side {
|
|
background-color: hsl(var(--color-background-secondary)) !important;
|
|
border-color: hsl(var(--color-neutral)) !important;
|
|
color: hsl(var(--color-base)) !important;
|
|
}
|
|
|
|
/* Fullscreen Mode */
|
|
.EasyMDEContainer.fullscreen .editor-toolbar,
|
|
.EasyMDEContainer.fullscreen .CodeMirror,
|
|
.EasyMDEContainer.fullscreen .editor-preview-side {
|
|
background-color: hsl(var(--color-background)) !important;
|
|
}
|
|
|
|
/* Markdown Syntax Highlighting */
|
|
.EasyMDEContainer .cm-header {
|
|
color: hsl(var(--color-primary)) !important;
|
|
}
|
|
|
|
.EasyMDEContainer .cm-quote {
|
|
color: hsl(var(--color-muted)) !important;
|
|
font-style: italic;
|
|
}
|
|
|
|
.EasyMDEContainer .cm-link {
|
|
color: hsl(var(--color-info)) !important;
|
|
}
|
|
|
|
.EasyMDEContainer .cm-url {
|
|
color: hsl(var(--color-info)) !important;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.EasyMDEContainer .cm-strong {
|
|
color: hsl(var(--color-base)) !important;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.EasyMDEContainer .cm-em {
|
|
color: hsl(var(--color-base)) !important;
|
|
font-style: italic;
|
|
}
|
|
|
|
.EasyMDEContainer .cm-strikethrough {
|
|
color: hsl(var(--color-muted)) !important;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.EasyMDEContainer .cm-comment {
|
|
color: hsl(var(--color-muted)) !important;
|
|
}
|
|
|
|
/* Code blocks */
|
|
.EasyMDEContainer .cm-s-easymde .cm-comment {
|
|
background-color: hsl(var(--color-neutral) / 0.2) !important;
|
|
border-radius: 0.25rem;
|
|
padding: 0.125rem 0.25rem;
|
|
}
|
|
|
|
/* Gutters */
|
|
.EasyMDEContainer .CodeMirror-gutters {
|
|
background-color: hsl(var(--color-background-secondary)) !important;
|
|
border-right-color: hsl(var(--color-neutral)) !important;
|
|
}
|
|
|
|
.EasyMDEContainer .CodeMirror-linenumber {
|
|
color: hsl(var(--color-muted)) !important;
|
|
}
|
|
|
|
/* Focus States */
|
|
.EasyMDEContainer .CodeMirror-focused {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px hsl(var(--color-primary) / 0.3);
|
|
}
|