codemirror.lsradix.css 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. /*
  2. lsradix theme for code-mirror
  3. http://ethanschoonover.com/lsradix
  4. */
  5. /*
  6. lsradix color palette
  7. http://ethanschoonover.com/lsradix/img/lsradix-palette.png
  8. */
  9. .lsradix.base03 { color: or(--lx-gray-01, #002b36); }
  10. .dark .lsradix.base03 { color: or(--lx-gray-02, #002b36); }
  11. .lsradix.base02 { color: or(--lx-gray-02, #073642); }
  12. .dark .lsradix.base02 { color: or(--lx-gray-01, #073642); }
  13. .lsradix.base01 { color: or(--lx-gray-03, #586e75); }
  14. .lsradix.base00 { color: or(--lx-gray-04, #657b83); }
  15. .lsradix.base0 { color: or(--lx-gray-09, #839496); }
  16. .lsradix.base1 { color: or(--lx-gray-10, #93a1a1); }
  17. .lsradix.base2 { color: or(--lx-gray-11, #eee8d5); }
  18. .lsradix.base3 { color: or(--lx-gray-11, #fdf6e3); }
  19. .lsradix.solar-yellow { color: or(--rx-yellow-11, #b58900); }
  20. .lsradix.solar-orange { color: or(--rx-orange-11, #cb4b16); }
  21. .lsradix.solar-red { color: or(--rx-red-11, #dc322f); }
  22. .lsradix.solar-magenta { color: or(--rx-pink-11, #d33682); }
  23. .lsradix.solar-violet { color: or(--rx-purple-11, #6c71c4); }
  24. .lsradix.solar-blue { color: or(--rx-blue-11, #268bd2); }
  25. .lsradix.solar-cyan { color: or(--rx-sky-11, #2aa198); }
  26. .lsradix.solar-green { color: or(--rx-grass-11, #859900); }
  27. /* Color scheme for code-mirror */
  28. .cm-s-lsradix {
  29. line-height: 1.45em;
  30. color-profile: sRGB;
  31. rendering-intent: auto;
  32. }
  33. .cm-s-lsradix.cm-s-dark {
  34. background-color: var(--lx-gray-01, hsl(var(--secondary)/.7));
  35. color: var(--ls-primary-text-color, var(--lx-gray-10, hsl(var(--secondary-foreground))));
  36. }
  37. .dark .cm-s-lsradix.cm-s-dark {
  38. background-color: var(--lx-gray-02, hsl(var(--secondary)/.7));
  39. }
  40. .cm-s-lsradix.cm-s-light {
  41. background-color: var(--lx-gray-02, hsl(var(--secondary)/.7));
  42. color: var(--lx-gray-10, hsl(var(--secondary-foreground)));
  43. }
  44. .cm-s-lsradix .CodeMirror-widget {
  45. text-shadow: none;
  46. }
  47. .cm-s-lsradix .cm-header { color: or(--lx-gray-03, #586e75); }
  48. .cm-s-lsradix .cm-quote { color: or(--lx-gray-10, #93a1a1); }
  49. .cm-s-lsradix .cm-keyword { color: or(--rx-orange-11, #cb4b16); }
  50. .cm-s-lsradix .cm-atom { color: or(--rx-pink-11, #d33682); }
  51. .cm-s-lsradix .cm-number { color: or(--rx-pink-11, #d33682); }
  52. .cm-s-lsradix .cm-def { color: or(--rx-sky-11, #2aa198); }
  53. /* .cm-s-lsradix .cm-variable { color: or(--lx-gray-09, #839496); } */
  54. .cm-s-lsradix .cm-variable { color: or(--lx-gray-12, #839496); }
  55. .cm-s-lsradix .cm-variable-2 { color: or(--rx-yellow-11, #b58900); }
  56. .cm-s-lsradix .cm-variable-3, .cm-s-lsradix .cm-type { color: or(--rx-purple-11, #6c71c4); }
  57. .cm-s-lsradix .cm-property { color: or(--rx-sky-11, #2aa198); }
  58. .cm-s-lsradix .cm-operator { color: or(--rx-purple-11, #6c71c4); }
  59. .cm-s-lsradix .cm-comment { color: or(--lx-gray-10, #586e75); font-style:italic; }
  60. .cm-s-lsradix .cm-string { color: or(--rx-grass-11, #859900); }
  61. .cm-s-lsradix .cm-string-2 { color: or(--rx-yellow-11, #b58900); }
  62. .cm-s-lsradix .cm-meta { color: or(--rx-grass-11, #859900); }
  63. .cm-s-lsradix .cm-qualifier { color: or(--rx-yellow-11, #b58900); }
  64. .cm-s-lsradix .cm-builtin { color: or(--rx-pink-11, #d33682); }
  65. .cm-s-lsradix .cm-bracket { color: or(--rx-orange-11, #cb4b16); }
  66. .cm-s-lsradix .CodeMirror-matchingbracket { color: or(--rx-grass-11, #859900); }
  67. .cm-s-lsradix .CodeMirror-nonmatchingbracket { color: or(--rx-red-11, #dc322f); }
  68. .cm-s-lsradix .cm-tag { color: or(--lx-gray-10, #93a1a1); }
  69. .cm-s-lsradix .cm-attribute { color: or(--rx-sky-11, #2aa198); }
  70. .cm-s-lsradix .cm-hr {
  71. color: transparent;
  72. border-top: 1px solid or(--lx-gray-03, #586e75);
  73. display: block;
  74. }
  75. .cm-s-lsradix .cm-link { color: or(--lx-gray-10, #93a1a1); cursor: pointer; }
  76. .cm-s-lsradix .cm-special { color: or(--rx-purple-11, #6c71c4); }
  77. .cm-s-lsradix .cm-em {
  78. color: #999;
  79. text-decoration: underline;
  80. text-decoration-style: dotted;
  81. }
  82. .cm-s-lsradix .cm-error,
  83. .cm-s-lsradix .cm-invalidchar {
  84. /* color: or(--lx-gray-03, #586e75); */
  85. color: or(--lx-gray-10, #586e75);
  86. border-bottom: 1px dotted or(--rx-red-11, #dc322f);
  87. }
  88. .cm-s-lsradix.cm-s-dark div.CodeMirror-selected { background: or(--lx-gray-06, rgb(4 38 47 / 99%)); }
  89. .cm-s-lsradix.cm-s-dark.CodeMirror ::selection { background: or(--lx-gray-06, rgb(4 38 47 / 99%)); }
  90. .cm-s-lsradix.cm-s-dark .CodeMirror-line::-moz-selection, .cm-s-dark .CodeMirror-line > span::-moz-selection, .cm-s-dark .CodeMirror-line > span > span::-moz-selection { background: or(--lx-gray-06, rgb(4 38 47 / 99%)); }
  91. .cm-s-lsradix.cm-s-light div.CodeMirror-selected { background: or(--lx-gray-06, #eee8d5); }
  92. .cm-s-lsradix.cm-s-light .CodeMirror-line::selection, .cm-s-light .CodeMirror-line > span::selection, .cm-s-light .CodeMirror-line > span > span::selection { background: or(--lx-gray-06, #eee8d5); }
  93. .cm-s-lsradix.cm-s-light .CodeMirror-line::-moz-selection, .cm-s-light .CodeMirror-line > span::-moz-selection, .cm-s-light .CodeMirror-line > span > span::-moz-selection { background: or(--lx-gray-06, #eee8d5); }
  94. /* Editor styling */
  95. /* Remove gutter border */
  96. .cm-s-lsradix .CodeMirror-gutters {
  97. border-right: 0;
  98. }
  99. /* Gutter colors and line number styling based of color scheme (dark / light) */
  100. /* Dark */
  101. .cm-s-lsradix.cm-s-dark .CodeMirror-gutters {
  102. background-color: var(--lx-gray-03, hsl(var(--secondary)));
  103. }
  104. .cm-s-lsradix.cm-s-dark .CodeMirror-linenumber {
  105. color: var(--lx-gray-09, #586e75);
  106. }
  107. /* Light */
  108. .cm-s-lsradix.cm-s-light .CodeMirror-gutters {
  109. background-color: var(--lx-gray-03, hsl(var(--secondary)));
  110. }
  111. .cm-s-lsradix.cm-s-light .CodeMirror-linenumber {
  112. color: var(--lx-gray-09, #839496);
  113. }
  114. /* Common */
  115. .cm-s-lsradix .CodeMirror-linenumber {
  116. padding: 0 5px;
  117. }
  118. .cm-s-lsradix .CodeMirror-guttermarker-subtle { color: or(--lx-gray-03, #586e75); }
  119. .cm-s-lsradix.cm-s-dark .CodeMirror-guttermarker { color: #ddd; }
  120. .cm-s-lsradix.cm-s-light .CodeMirror-guttermarker { color: or(--rx-orange-11, #cb4b16); }
  121. .cm-s-lsradix .CodeMirror-gutter .CodeMirror-gutter-text {
  122. color: or(--lx-gray-03, #586e75);
  123. }
  124. /* Cursor */
  125. .cm-s-lsradix .CodeMirror-cursor { border-left: 1px solid #819090; }
  126. /* Fat cursor */
  127. .cm-s-lsradix.cm-s-light.cm-fat-cursor .CodeMirror-cursor { background: #77ee77; }
  128. .cm-s-lsradix.cm-s-light .cm-animate-fat-cursor { background-color: #77ee77; }
  129. .cm-s-lsradix.cm-s-dark.cm-fat-cursor .CodeMirror-cursor { background: or(--lx-gray-03, #586e75); }
  130. .cm-s-lsradix.cm-s-dark .cm-animate-fat-cursor { background-color: or(--lx-gray-03, #586e75); }
  131. /* Active line */
  132. .cm-s-lsradix.cm-s-dark .CodeMirror-activeline-background {
  133. background: rgba(255, 255, 255, 0.06);
  134. }
  135. .cm-s-lsradix.cm-s-light .CodeMirror-activeline-background {
  136. background: rgba(0, 0, 0, 0.06);
  137. }