plutonium 0.23.1 → 0.23.2

data/src/css/easymde.css

@@ -1,1198 +1,168 @@
 /**
-* EasyMDE + CodeMirror Styles
-* Based on https://cdn.jsdelivr.net/npm/easymde@2.18.0/dist/easymde.min.css
-* Adapted for Flowbite with dark mode support
-*/
+ * EasyMDE Tailwind Integration
+ * Overrides for theming with Tailwind colors and dark mode support
+ * Import this AFTER the original easymde.css
+ */
 
-.CodeMirror {
-  font-family: monospace;
-  height: 300px;
-  color: #000;
-  direction: ltr;
-  background: #fff;
-  position: relative;
-  overflow: hidden;
-}
-
-.dark .CodeMirror {
-  color: #E0E7FF;
-  background: #101828;
-}
-
-.CodeMirror-lines {
-  padding: 4px 0;
-  cursor: text;
-  min-height: 1px;
-}
-
-.CodeMirror pre.CodeMirror-line,
-.CodeMirror pre.CodeMirror-line-like {
-  padding: 0 4px;
-}
-
-.CodeMirror-gutter-filler,
-.CodeMirror-scrollbar-filler {
-  background-color: #fff;
-  position: absolute;
-  z-index: 6;
-  display: none;
-  outline: none;
-}
-
-.dark .CodeMirror-gutter-filler,
-.dark .CodeMirror-scrollbar-filler {
-  background-color: #101828;
-}
-
-.CodeMirror-gutters {
-  border-right: 1px solid #ddd;
-  background-color: #f7f7f7;
-  white-space: nowrap;
-}
-
-.dark .CodeMirror-gutters {
-  border-right: 1px solid #25304A;
-  background-color: #172033;
-}
-
-.CodeMirror-linenumber {
-  padding: 0 3px 0 5px;
-  min-width: 20px;
-  text-align: right;
-  color: #999;
-  white-space: nowrap;
-}
-
-.dark .CodeMirror-linenumber {
-  color: #A0AEC0;
-}
-
-.CodeMirror-guttermarker {
-  color: #000;
-}
-
-.dark .CodeMirror-guttermarker {
-  color: #E0E7FF;
-}
-
-.CodeMirror-guttermarker-subtle {
-  color: #999;
-}
-
-.dark .CodeMirror-guttermarker-subtle {
-  color: #A0AEC0;
-}
-
-.CodeMirror-cursor {
-  border-left: 1px solid #000;
-  border-right: none;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-
-.dark .CodeMirror-cursor {
-  border-left: 1px solid #E0E7FF;
-}
-
-.CodeMirror div.CodeMirror-secondarycursor {
-  border-left: 1px solid silver;
-}
-
-.dark .CodeMirror div.CodeMirror-secondarycursor {
-  border-left: 1px solid #A0AEC0;
-}
-
-.cm-fat-cursor .CodeMirror-cursor {
-  width: auto;
-  border: 0 !important;
-  background: #7e7;
-}
-
-.dark .cm-fat-cursor .CodeMirror-cursor {
-  background: #4ade80;
-}
-
-.cm-s-default .cm-header {
-  color: #00f;
-}
-
-.dark .cm-s-default .cm-header {
-  color: #90cdf4;
-}
-
-.cm-s-default .cm-quote {
-  color: #090;
-}
-
-.dark .cm-s-default .cm-quote {
-  color: #81e6d9;
-}
-
-.cm-negative {
-  color: #d44;
-}
-
-.dark .cm-negative {
-  color: #f56565;
-}
-
-.cm-positive {
-  color: #292;
-}
-
-.dark .cm-positive {
-  color: #68d391;
-}
-
-.cm-header,
-.cm-strong {
-  font-weight: 700;
-}
-
-.cm-em {
-  font-style: italic;
-}
-
-.cm-link {
-  text-decoration: underline;
-}
-
-.cm-strikethrough {
-  text-decoration: line-through;
-}
-
-.cm-s-default .cm-keyword {
-  color: #708;
-}
-
-.dark .cm-s-default .cm-keyword {
-  color: #d6bcfa;
-}
-
-.cm-s-default .cm-atom {
-  color: #219;
-}
-
-.dark .cm-s-default .cm-atom {
-  color: #90cdf4;
-}
-
-.cm-s-default .cm-number {
-  color: #164;
-}
-
-.dark .cm-s-default .cm-number {
-  color: #a3bffa;
-}
-
-.cm-s-default .cm-def {
-  color: #00f;
-}
-
-.dark .cm-s-default .cm-def {
-  color: #90cdf4;
-}
-
-.cm-s-default .cm-variable-2 {
-  color: #05a;
-}
-
-.dark .cm-s-default .cm-variable-2 {
-  color: #9f7aea;
-}
-
-.cm-s-default .cm-type,
-.cm-s-default .cm-variable-3 {
-  color: #085;
-}
-
-.dark .cm-s-default .cm-type,
-.dark .cm-s-default .cm-variable-3 {
-  color: #81e6d9;
-}
-
-.cm-s-default .cm-comment {
-  color: #a50;
-}
-
-.dark .cm-s-default .cm-comment {
-  color: #feb2b2;
-}
-
-.cm-s-default .cm-string {
-  color: #a11;
-}
-
-.dark .cm-s-default .cm-string {
-  color: #f56565;
-}
-
-.cm-s-default .cm-string-2 {
-  color: #f50;
-}
-
-.dark .cm-s-default .cm-string-2 {
-  color: #fdba74;
-}
-
-.cm-s-default .cm-meta {
-  color: #555;
-}
-
-.dark .cm-s-default .cm-meta {
-  color: #b2f5ea;
-}
-
-.cm-s-default .cm-qualifier {
-  color: #555;
-}
-
-.dark .cm-s-default .cm-qualifier {
-  color: #b2f5ea;
-}
-
-.cm-s-default .cm-builtin {
-  color: #30a;
-}
-
-.dark .cm-s-default .cm-builtin {
-  color: #c084fc;
-}
-
-.cm-s-default .cm-bracket {
-  color: #997;
-}
-
-.dark .cm-s-default .cm-bracket {
-  color: #fde047;
-}
-
-.cm-s-default .cm-tag {
-  color: #170;
-}
-
-.dark .cm-s-default .cm-tag {
-  color: #86efac;
-}
-
-.cm-s-default .cm-attribute {
-  color: #00c;
-}
-
-.dark .cm-s-default .cm-attribute {
-  color: #93c5fd;
-}
-
-.cm-s-default .cm-hr {
-  color: #999;
-}
-
-.dark .cm-s-default .cm-hr {
-  color: #A0AEC0;
-}
-
-.cm-s-default .cm-link {
-  color: #00c;
-}
-
-.dark .cm-s-default .cm-link {
-  color: #93c5fd;
-}
-
-.cm-s-default .cm-error {
-  color: red;
-}
-
-.dark .cm-s-default .cm-error {
-  color: #f87171;
-}
-
-.cm-invalidchar {
-  color: red;
-}
-
-.dark .cm-invalidchar {
-  color: #f87171;
-}
-
-.CodeMirror-composing {
-  border-bottom: 2px solid;
-}
-
-div.CodeMirror span.CodeMirror-matchingbracket {
-  color: #0b0;
-}
-
-.dark div.CodeMirror span.CodeMirror-matchingbracket {
-  color: #6ee7b7;
-}
-
-div.CodeMirror span.CodeMirror-nonmatchingbracket {
-  color: #a22;
-}
-
-.dark div.CodeMirror span.CodeMirror-nonmatchingbracket {
-  color: #fca5a5;
-}
-
-.CodeMirror-matchingtag {
-  background: rgba(255, 150, 0, .3);
-}
-
-.dark .CodeMirror-matchingtag {
-  background: rgba(251, 191, 36, .4);
-}
-
-.CodeMirror-activeline-background {
-  background: #e8f2ff;
-}
-
-.dark .CodeMirror-activeline-background {
-  background: #25304A;
-}
-
-.CodeMirror-scroll {
-  overflow: scroll !important;
-  margin-bottom: -50px;
-  margin-right: -50px;
-  padding-bottom: 50px;
-  height: 100%;
-  outline: 0;
-  position: relative;
-  z-index: 0;
-}
-
-.CodeMirror-sizer {
-  position: relative;
-  border-right: 50px solid transparent;
-}
-
-.CodeMirror-vscrollbar,
-.CodeMirror-hscrollbar {
-  position: absolute;
-  z-index: 6;
-  display: none;
-  outline: 0;
-}
-
-.CodeMirror-vscrollbar {
-  right: 0;
-  top: 0;
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-
-.CodeMirror-hscrollbar {
-  bottom: 0;
-  left: 0;
-  overflow-y: hidden;
-  overflow-x: scroll;
-}
-
-.CodeMirror-gutters {
-  position: absolute;
-  left: 0;
-  top: 0;
-  min-height: 100%;
-  z-index: 3;
-}
-
-.CodeMirror-gutter {
-  white-space: normal;
-  height: 100%;
-  display: inline-block;
-  vertical-align: top;
-  margin-bottom: -50px;
-}
-
-.CodeMirror-gutter-wrapper {
-  position: absolute;
-  z-index: 4;
-  background: 0 0 !important;
-  border: none !important;
-}
-
-.CodeMirror-gutter-background {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 4;
-}
-
-.CodeMirror-gutter-elt {
-  position: absolute;
-  cursor: default;
-  z-index: 4;
-}
-
-.CodeMirror-gutter-wrapper ::selection {
-  background-color: transparent;
-}
-
-.CodeMirror-gutter-wrapper ::-moz-selection {
-  background-color: transparent;
-}
-
-.CodeMirror pre.CodeMirror-line,
-.CodeMirror pre.CodeMirror-line-like {
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-  border-width: 0;
-  background: 0 0;
-  font-family: inherit;
-  font-size: inherit;
-  margin: 0;
-  white-space: pre;
-  word-wrap: normal;
-  line-height: inherit;
-  color: inherit;
-  z-index: 2;
-  position: relative;
-  overflow: visible;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-font-variant-ligatures: contextual;
-  font-variant-ligatures: contextual;
-}
-
-.CodeMirror-wrap pre.CodeMirror-line,
-.CodeMirror-wrap pre.CodeMirror-line-like {
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  word-break: normal;
-}
-
-.CodeMirror-linebackground {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 0;
-}
-
-.CodeMirror-linewidget {
-  position: relative;
-  z-index: 2;
-  padding: .1px;
-}
-
-.CodeMirror-rtl pre {
-  direction: rtl;
-}
-
-.CodeMirror-code {
-  outline: 0;
-}
-
-.CodeMirror-gutter,
-.CodeMirror-gutters,
-.CodeMirror-linenumber,
-.CodeMirror-scroll,
-.CodeMirror-sizer {
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-}
-
-.CodeMirror-measure {
-  position: absolute;
-  width: 100%;
-  height: 0;
-  overflow: hidden;
-  visibility: hidden;
-}
-
-.CodeMirror-measure pre {
-  position: static;
-}
-
-div.CodeMirror-cursors {
-  visibility: hidden;
-  position: relative;
-  z-index: 3;
-}
-
-div.CodeMirror-dragcursors {
-  visibility: visible;
+/* Container and CodeMirror theming */
+.EasyMDEContainer .CodeMirror {
+  @apply border-gray-300 bg-white text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100;
 }
 
-.CodeMirror-focused div.CodeMirror-cursors {
-  visibility: visible;
+.EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
+  @apply bg-primary-100 dark:bg-primary-900;
 }
 
 .CodeMirror-selected {
-  background: #d9d9d9;
-}
-
-.dark .CodeMirror-selected {
-  background: #25304A;
-}
-
-.CodeMirror-focused .CodeMirror-selected {
-  background: #d7d4f0;
-}
-
-.dark .CodeMirror-focused .CodeMirror-selected {
-  background: #36415F;
-}
-
-.CodeMirror-crosshair {
-  cursor: crosshair;
+  @apply bg-gray-200 dark:bg-gray-700;
 }
 
 .CodeMirror-line::selection,
 .CodeMirror-line>span::selection,
 .CodeMirror-line>span>span::selection {
-  background: #d7d4f0;
-}
-
-.dark .CodeMirror-line::selection,
-.dark .CodeMirror-line>span::selection,
-.dark .CodeMirror-line>span>span::selection {
-  background: #36415F;
+  @apply bg-primary-100 dark:bg-primary-900;
 }
 
 .CodeMirror-line::-moz-selection,
 .CodeMirror-line>span::-moz-selection,
 .CodeMirror-line>span>span::-moz-selection {
-  background: #d7d4f0;
-}
-
-.dark .CodeMirror-line::-moz-selection,
-.dark .CodeMirror-line>span::-moz-selection,
-.dark .CodeMirror-line>span>span::-moz-selection {
-  background: #36415F;
-}
-
-.cm-searching {
-  background-color: #ffa;
-  background-color: rgba(255, 255, 0, .4);
-}
-
-.dark .cm-searching {
-  background-color: #facc15;
-  background-color: rgba(250, 204, 21, .4);
-}
-
-.cm-force-border {
-  padding-right: .1px;
-}
-
-@media print {
-  .CodeMirror div.CodeMirror-cursors {
-    visibility: hidden;
-  }
-}
-
-.cm-tab-wrap-hack:after {
-  content: '';
-}
-
-span.CodeMirror-selectedtext {
-  background: 0 0;
-}
-
-.EasyMDEContainer {
-  display: block;
-}
-
-.EasyMDEContainer.sided--no-fullscreen {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
-.EasyMDEContainer .CodeMirror {
-  box-sizing: border-box;
-  height: auto;
-  border: 1px solid #ced4da;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-  padding: 10px;
-  font: inherit;
-  z-index: 0;
-  word-wrap: break-word;
-}
-
-.dark .EasyMDEContainer .CodeMirror {
-  border: 1px solid #25304A;
-}
-
-.EasyMDEContainer .CodeMirror-scroll {
-  cursor: text;
-}
-
-.EasyMDEContainer .CodeMirror-fullscreen {
-  background: #fff;
-  position: fixed !important;
-  top: 50px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: auto;
-  z-index: 8;
-  border-right: none !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-.dark .EasyMDEContainer .CodeMirror-fullscreen {
-  background: #0A0F1A;
-}
-
-.EasyMDEContainer .CodeMirror-sided {
-  width: 50% !important;
+  @apply bg-primary-100 dark:bg-primary-900;
 }
 
-.EasyMDEContainer.sided--no-fullscreen .CodeMirror-sided {
-  border-right: none !important;
-  border-bottom-right-radius: 0;
-  position: relative;
-  flex: 1 1 auto;
-}
-
-.EasyMDEContainer .CodeMirror-placeholder {
-  opacity: .5;
+/* Gutter theming */
+.CodeMirror-gutters {
+  @apply border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-700;
 }
 
-.EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
-  background: #d9d9d9;
+.CodeMirror-linenumber {
+  @apply text-gray-500 dark:text-gray-400;
 }
 
-.dark .EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
-  background: #25304A;
+.CodeMirror-cursor {
+  @apply border-gray-900 dark:border-gray-100;
 }
 
+/* Toolbar theming */
 .editor-toolbar {
-  position: relative;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
-  padding: 9px 10px;
-  border-top: 1px solid #ced4da;
-  border-left: 1px solid #ced4da;
-  border-right: 1px solid #ced4da;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-}
-
-.dark .editor-toolbar {
-  border-top: 1px solid #25304A;
-  border-left: 1px solid #25304A;
-  border-right: 1px solid #25304A;
-  background: #172033;
+  @apply border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800;
 }
 
 .editor-toolbar.fullscreen {
-  width: 100%;
-  height: 50px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  box-sizing: border-box;
-  background: #fff;
-  border: 0;
-  position: fixed;
-  top: 0;
-  left: 0;
-  opacity: 1;
-  z-index: 9;
-}
-
-.dark .editor-toolbar.fullscreen {
-  background: #172033;
-}
-
-.editor-toolbar.fullscreen::before {
-  width: 20px;
-  height: 50px;
-  background: linear-gradient(to right, #fff 0, rgba(255, 255, 255, 0) 100%);
-  position: fixed;
-  top: 0;
-  left: 0;
-  margin: 0;
-  padding: 0;
-}
-
-.dark .editor-toolbar.fullscreen::before {
-  background: linear-gradient(to right, #172033 0, rgba(23, 32, 51, 0) 100%);
-}
-
-.editor-toolbar.fullscreen::after {
-  width: 20px;
-  height: 50px;
-  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #fff 100%);
-  position: fixed;
-  top: 0;
-  right: 0;
-  margin: 0;
-  padding: 0;
-}
-
-.dark .editor-toolbar.fullscreen::after {
-  background: linear-gradient(to right, rgba(23, 32, 51, 0) 0, #172033 100%);
-}
-
-.EasyMDEContainer.sided--no-fullscreen .editor-toolbar {
-  width: 100%;
-}
-
-.editor-toolbar .easymde-dropdown,
-.editor-toolbar button {
-  background: transparent;
-  display: inline-block;
-  text-align: center;
-  text-decoration: none !important;
-  height: 30px;
-  margin: 0;
-  padding: 0 6px;
-  border: 1px solid transparent;
-  border-radius: 3px;
-  cursor: pointer;
+  @apply bg-white dark:bg-gray-800;
 }
 
 .editor-toolbar button {
-  font-weight: 700;
-  min-width: 30px;
-  white-space: nowrap;
-  color: #333;
-}
-
-.dark .editor-toolbar button {
-  color: #E0E7FF;
+  @apply text-gray-700 hover:bg-gray-100 hover:border-gray-400 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:border-gray-500;
 }
 
 .editor-toolbar button.active,
 .editor-toolbar button:hover {
-  background: #fcfcfc;
-  border-color: #95a5a6;
-}
-
-.dark .editor-toolbar button.active,
-.dark .editor-toolbar button:hover {
-  background: #25304A;
-  border-color: #36415F;
+  @apply bg-gray-100 border-gray-400 dark:bg-gray-700 dark:border-gray-500;
 }
 
 .editor-toolbar i.separator {
-  display: inline-block;
-  width: 0;
-  border-left: 1px solid #d9d9d9;
-  border-right: 1px solid #fff;
-  color: transparent;
-  text-indent: -10px;
-  margin: 0 6px;
-}
-
-.dark .editor-toolbar i.separator {
-  border-left: 1px solid #25304A;
-  border-right: 1px solid #172033;
-}
-
-.editor-toolbar button:after {
-  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
-  font-size: 65%;
-  vertical-align: text-bottom;
-  position: relative;
-  top: 2px;
-}
-
-.editor-toolbar button.heading-1:after {
-  content: "1";
-}
-
-.editor-toolbar button.heading-2:after {
-  content: "2";
-}
-
-.editor-toolbar button.heading-3:after {
-  content: "3";
-}
-
-.editor-toolbar button.heading-bigger:after {
-  content: "▲";
-}
-
-.editor-toolbar button.heading-smaller:after {
-  content: "▼";
-}
-
-.editor-toolbar.disabled-for-preview button:not(.no-disable) {
-  opacity: .6;
-  pointer-events: none;
-}
-
-@media only screen and (max-width:700px) {
-  .editor-toolbar i.no-mobile {
-    display: none;
-  }
+  @apply border-l-gray-300 border-r-white dark:border-l-gray-600 dark:border-r-gray-800;
 }
 
+/* Status bar */
 .editor-statusbar {
-  padding: 8px 10px;
-  font-size: 12px;
-  color: #959694;
-  text-align: right;
-  background: #f7f7f7;
-}
-
-.dark .editor-statusbar {
-  color: #A0AEC0;
-  background: #172033;
-}
-
-.EasyMDEContainer.sided--no-fullscreen .editor-statusbar {
-  width: 100%;
-}
-
-.editor-statusbar span {
-  display: inline-block;
-  min-width: 4em;
-  margin-left: 1em;
-}
-
-.editor-statusbar .lines:before {
-  content: 'lines: ';
-}
-
-.editor-statusbar .words:before {
-  content: 'words: ';
-}
-
-.editor-statusbar .characters:before {
-  content: 'characters: ';
-}
-
-.editor-preview-full {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 7;
-  overflow: auto;
-  display: none;
-  box-sizing: border-box;
-  padding: 10px;
-  background: #fafafa;
-}
-
-.dark .editor-preview-full {
-  background: #172033;
-  color: #E0E7FF;
-}
-
-.editor-preview-side {
-  position: fixed;
-  bottom: 0;
-  width: 50%;
-  top: 50px;
-  right: 0;
-  z-index: 9;
-  overflow: auto;
-  display: none;
-  box-sizing: border-box;
-  border: 1px solid #ddd;
-  word-wrap: break-word;
-  background: #fff;
-}
-
-.dark .editor-preview-side {
-  border: 1px solid #25304A;
-  background: #101828;
-}
-
-.editor-preview-active-side {
-  display: block;
-}
-
-.EasyMDEContainer.sided--no-fullscreen .editor-preview-active-side {
-  flex: 1 1 auto;
-  height: auto;
-  position: static;
-}
-
-.editor-preview-active {
-  display: block;
+  @apply text-gray-600 dark:text-gray-400;
 }
 
+/* Preview theming */
 .editor-preview {
-  padding: 10px;
-  background: #fafafa;
-  color: #333;
-}
-
-.dark .editor-preview {
-  background: #172033;
-  color: #E0E7FF;
-}
-
-.editor-preview>p {
-  margin-top: 0;
+  @apply bg-gray-50 text-gray-900 dark:bg-gray-800 dark:text-gray-100;
 }
 
 .editor-preview pre {
-  background: #eee;
-  margin-bottom: 10px;
-  color: #333;
-}
-
-.dark .editor-preview pre {
-  background: #101828;
-  color: #E0E7FF;
+  @apply bg-gray-200 dark:bg-gray-700;
 }
 
 .editor-preview table td,
 .editor-preview table th {
-  border: 1px solid #ddd;
-  padding: 5px;
-}
-
-.dark .editor-preview table td,
-.dark .editor-preview table th {
-  border: 1px solid #36415F;
-}
-
-.cm-s-easymde .cm-tag {
-  color: #63a35c;
-}
-
-.dark .cm-s-easymde .cm-tag {
-  color: #8eda7f;
-}
-
-.cm-s-easymde .cm-attribute {
-  color: #795da3;
-}
-
-.dark .cm-s-easymde .cm-attribute {
-  color: #b59cd7;
-}
-
-.cm-s-easymde .cm-string {
-  color: #183691;
-}
-
-.dark .cm-s-easymde .cm-string {
-  color: #6c8eef;
-}
-
-.cm-s-easymde .cm-header-1 {
-  font-size: calc(1.375rem + 1.5vw);
+  @apply border-gray-300 dark:border-gray-600;
 }
 
-.cm-s-easymde .cm-header-2 {
-  font-size: calc(1.325rem + .9vw);
-}
-
-.cm-s-easymde .cm-header-3 {
-  font-size: calc(1.3rem + .6vw);
-}
-
-.cm-s-easymde .cm-header-4 {
-  font-size: calc(1.275rem + .3vw);
-}
-
-.cm-s-easymde .cm-header-5 {
-  font-size: 1.25rem;
-  margin-bottom: .5rem;
-  line-height: 1.2;
-}
-
-.cm-s-easymde .cm-header-6 {
-  font-size: 1rem;
-  margin-bottom: .5rem;
-  line-height: 1.2;
+.editor-preview-side {
+  @apply border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800;
 }
 
-.cm-s-easymde .cm-header-1,
-.cm-s-easymde .cm-header-2,
-.cm-s-easymde .cm-header-3,
-.cm-s-easymde .cm-header-4 {
-  margin-bottom: .5rem;
-  line-height: 1.2;
+/* CodeMirror syntax highlighting - dark mode support */
+.dark .cm-s-easymde .cm-header-1,
+.dark .cm-s-easymde .cm-header-2,
+.dark .cm-s-easymde .cm-header-3,
+.dark .cm-s-easymde .cm-header-4,
+.dark .cm-s-easymde .cm-header-5,
+.dark .cm-s-easymde .cm-header-6 {
+  @apply text-blue-300;
 }
 
-.cm-s-easymde .cm-comment {
-  background: rgba(0, 0, 0, .05);
-  border-radius: 2px;
+.dark .cm-s-easymde .cm-quote {
+  @apply text-green-400;
 }
 
 .dark .cm-s-easymde .cm-comment {
-  background: rgba(224, 231, 255, .08);
-  color: #A0AEC0;
-}
-
-.cm-s-easymde .cm-link {
-  color: #7f8c8d;
-  text-decoration: underline;
+  @apply bg-gray-700;
 }
 
 .dark .cm-s-easymde .cm-link {
-  color: #a0aec0;
-}
-
-.cm-s-easymde .cm-url {
-  color: #aab2b3;
+  @apply text-blue-400;
 }
 
 .dark .cm-s-easymde .cm-url {
-  color: #cbd5e0;
-}
-
-.cm-s-easymde .cm-quote {
-  color: #7f8c8d;
-  font-style: italic;
+  @apply text-blue-300;
 }
 
-.dark .cm-s-easymde .cm-quote {
-  color: #a0aec0;
-}
-
-.editor-toolbar .easymde-dropdown {
-  position: relative;
-  background: linear-gradient(to bottom right, #fff 0, #fff 84%, #333 50%, #333 100%);
-  border-radius: 0;
-  border: 1px solid #fff;
+.dark .cm-s-easymde .cm-tag {
+  @apply text-green-400;
 }
 
-.dark .editor-toolbar .easymde-dropdown {
-  background: linear-gradient(to bottom right, #25304A 0, #25304A 84%, #A0AEC0 50%, #A0AEC0 100%);
-  border: 1px solid #36415F;
+.dark .cm-s-easymde .cm-attribute {
+  @apply text-purple-400;
 }
 
-.editor-toolbar .easymde-dropdown:hover {
-  background: linear-gradient(to bottom right, #fff 0, #fff 84%, #333 50%, #333 100%);
+.dark .cm-s-easymde .cm-string {
+  @apply text-orange-400;
 }
 
-.dark .editor-toolbar .easymde-dropdown:hover {
-  background: linear-gradient(to bottom right, #36415F 0, #36415F 84%, #b0b9c9 50%, #b0b9c9 100%);
+/* Dropdown theming */
+.editor-toolbar .easymde-dropdown {
+  @apply bg-white border-gray-300 dark:bg-gray-800 dark:border-gray-600;
 }
 
 .easymde-dropdown-content {
-  display: block;
-  visibility: hidden;
-  position: absolute;
-  background-color: #f9f9f9;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
-  padding: 8px;
-  z-index: 2;
-  top: 30px;
-}
-
-.dark .easymde-dropdown-content {
-  background-color: #172033;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .5);
-}
-
-.easymde-dropdown:active .easymde-dropdown-content,
-.easymde-dropdown:focus .easymde-dropdown-content,
-.easymde-dropdown:focus-within .easymde-dropdown-content {
-  visibility: visible;
+  @apply bg-white shadow-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-600 dark:shadow-gray-900/20;
 }
 
 .easymde-dropdown-content button {
-  display: block;
-}
-
-span[data-img-src]::after {
-  content: '';
-  background-image: var(--bg-image);
-  display: block;
-  max-height: 100%;
-  max-width: 100%;
-  background-size: contain;
-  height: 0;
-  padding-top: var(--height);
-  width: var(--width);
-  background-repeat: no-repeat;
-}
-
-.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
-  background: rgba(255, 0, 0, .15);
+  @apply text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700;
 }
 
+/* Spell check error in dark mode */
 .dark .CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word) {
-  background: rgba(239, 68, 68, .25);
+  @apply bg-red-500/20;
 }
 
-.cm-fat-cursor div.CodeMirror-cursors {
-  z-index: 1;
+/* Placeholder text */
+.dark .EasyMDEContainer .CodeMirror-placeholder {
+  @apply text-gray-500;
 }
 
-.cm-fat-cursor {
-  caret-color: transparent;
-}
-
-.cm-tab {
-  display: inline-block;
-  text-decoration: inherit;
-}
-
-.CodeMirror-ruler {
-  border-left: 1px solid #ced4da;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-}
-
-.dark .CodeMirror-ruler {
-  border-left: 1px solid #25304A;
-}
-
-.cm-s-easymde .cm-type {
-  color: #1a202c;
-}
-
-.dark .cm-s-easymde .cm-type {
-  color: #fff;
-}
-
-.cm-s-easymde .cm-qualifier {
-  color: #4A5568;
-}
-
-.dark .cm-s-easymde .cm-qualifier {
-  color: #A0AEC0;
-}
-
-.cm-s-easymde .cm-builtin {
-  color: #2b6cb0;
-}
-
-.dark .cm-s-easymde .cm-builtin {
-  color: #63b3ed;
-}
-
-.cm-s-easymde .cm-bracket {
-  color: #b7791f;
-}
-
-.dark .cm-s-easymde .cm-bracket {
-  color: #f6e05e;
-}
-
-.cm-s-easymde .cm-hr {
-  color: #718096;
-}
-
-.dark .cm-s-easymde .cm-hr {
-  color: #A0AEC0;
-}
-
-.cm-s-easymde .cm-meta {
-  color: #4A5568;
+/* Active line background */
+.dark .CodeMirror-activeline-background {
+  @apply bg-gray-700/50;
 }
 
-.dark .cm-s-easymde .cm-meta {
-  color: #A0AEC0;
+/* Matching brackets */
+.dark div.CodeMirror span.CodeMirror-matchingbracket {
+  @apply text-green-400;
 }
 
-.cm-s-easymde .cm-string.cm-url {
-  color: #c53030;
+.dark div.CodeMirror span.CodeMirror-nonmatchingbracket {
+  @apply text-red-400;
 }
 
-.dark .cm-s-easymde .cm-string.cm-url {
-  color: #fc8181;
+/* Search highlighting */
+.dark .cm-searching {
+  @apply bg-yellow-500/30;
 }