1  :root {
  2      --custom-accent: #8BA4CC;
  3      --custom-accent-muted: #304F80;
  4      --custom-accent-muted-transparent: rgba(48, 79, 128, 0.3);
  5      --custom-accent-muted-selection: rgba(48, 79, 128, 0.99);
  6      --custom-text-on-accent: #000000;
  7      --custom-text-muted: #cacaca;
  8      --custom-text-faint: #909090;
  9  
 10      /* --mica-base-bg-start: #1B202A;
 11      --mica-base-bg-end: #1A1F28;
 12      --mica-content-bg-start: #212834;
 13      --mica-content-bg-end: #202732;
 14      --mica-border: #1A1F28; */
 15  
 16      --mica-base-bg-start: #202028;
 17      --mica-base-bg-end: #1B2020;
 18      --mica-content-bg-start: #222832;
 19      --mica-content-bg-start-transparent: rgba(34, 40, 50, 0.3);
 20      --mica-content-bg-end: #212223;
 21      --mica-content-bg-end-transparent: rgba(33, 34, 35, 0.3);
 22      --mica-border: #1A1F28;
 23  }
 24  
 25  /* background */
 26  
 27  body {
 28      background: linear-gradient(135deg, var(--mica-base-bg-start), var(--mica-base-bg-end));
 29  
 30      --file-header-justify: left;
 31      --file-line-width: 100%;
 32  }
 33  
 34  .workspace > .workspace-split {
 35      padding-bottom: 12px;
 36  }
 37  
 38  .workspace-tabs,
 39  .workspace-ribbon,
 40  .workspace-ribbon.is-collapsed,
 41  .workspace-ribbon.mod-left.is-collapsed,
 42  .workspace-ribbon.mod-right.is-collapsed,
 43  .titlebar,
 44  .workspace-tabs .workspace-leaf,
 45  .workspace-tab-header-container,
 46  .workspace-tab-container-before,
 47  .workspace-tab-container-before.is-before-active,
 48  .workspace-tab-container-before.is-before-active .workspace-tab-header-inner,
 49  .workspace-tab-container-after,
 50  .workspace-tab-container-after.is-after-active,
 51  .workspace-tab-container-after.is-after-active .workspace-tab-header-inner,
 52  .workspace-tab-header.is-before-active,
 53  .workspace-tab-header.is-before-active .workspace-tab-header-inner,
 54  .workspace-tab-header.is-after-active,
 55  .workspace-tab-header.is-after-active .workspace-tab-header-inner,
 56  .workspace-leaf .view-header-title-container:after,
 57  .workspace-leaf.mod-active .view-header-title-container:after,
 58  .status-bar,
 59  ::-webkit-scrollbar {
 60      background: transparent;
 61      border: 0;
 62  }
 63  
 64  /* workspace */
 65  
 66  .workspace-tab-header-container {
 67      height: 48px;
 68  }
 69  
 70  .workspace-ribbon {
 71      width: 48px;
 72  }
 73  
 74  .side-dock-ribbon {
 75      flex: 0 0 48px;
 76  }
 77  
 78  .workspace-ribbon.mod-right {
 79      position: absolute;
 80      right: 0;
 81  }
 82  
 83  .workspace-ribbon.is-collapsed {
 84      border: none !important;
 85  }
 86  
 87  .workspace-ribbon-collapse-btn {
 88      margin-top: -4px;
 89  }
 90  
 91  .workspace-tab-header.is-active {
 92      background: transparent;
 93      color: white;
 94  }
 95  
 96  /* .workspace-tab-header-inner-icon {
 97      margin-top: 7px;
 98  } */
 99  
100  .workspace-leaf-resize-handle {
101      background: transparent;
102  }
103  
104  .workspace {
105      padding-top: 24px;
106  }
107  
108  .workspace-ribbon.mod-left {
109      margin-top: 48px;
110  }
111  
112  .workspace-split {
113      background: linear-gradient(135deg, var(--mica-content-bg-start), var(--mica-content-bg-end));
114      background-attachment: fixed;
115  }
116  
117  .workspace-split.mod-left-split {
118      border-top-left-radius: 8px;
119      border-left: 2px solid var(--mica-border);
120      border-top: 2px solid var(--mica-border);
121  }
122  
123  .workspace-split.mod-left-split.is-collapsed + .workspace-split.mod-root {
124      border-top-left-radius: 8px;
125  }
126  
127  .workspace-split.mod-root, .workspace-split.mod-right-split {
128      border-top: 2px solid var(--mica-border);
129  }
130  
131  .workspace-split .workspace-tabs {
132      border-bottom: 2px solid var(--mica-border);
133  }
134  
135  .workspace-split.mod-root {
136      border-left: 2px solid var(--mica-border);
137      border-right: 2px solid var(--mica-border);
138  }
139  
140  .workspace-split .nav-header {
141      height: 48px;
142      padding: 4px 6px;
143      border-bottom: 2px solid var(--mica-border);
144  }
145  
146  .workspace-tab-header-container {
147      border-bottom: 2px solid var(--mica-border);
148      background: linear-gradient(160deg, transparent, rgba(255, 255, 255, 0.02));
149  }
150  
151  .workspace-tabs {
152      padding-right: 0;
153  }
154  
155  .nav-action-button {
156      margin-top: 4px;
157  }
158  
159  .workspace-leaf-content .nav-header + * {
160      padding: 6px 0;
161  }
162  
163  .workspace-tab-container-before {
164      width: 6px;
165  }
166  
167  /* box-shadow: 0 0 4px 0px rgba(0,0,0,0.2); */
168  
169  .workspace-split.mod-root .view-header {
170      border-bottom: 2px solid var(--mica-border) !important;
171  }
172  
173  .workspace-split.mod-root .view-content {
174      background: transparent;
175  }
176  
177  .workspace-split.mod-root > .workspace-leaf .view-header-title-container:after {
178      background: transparent !important;
179  }
180  
181  .workspace-leaf-content .view-actions {
182      margin-right: 12px;
183  }
184  
185  .workspace-leaf-content .view-actions .view-action svg {
186      margin-top: 4px;
187  }
188  
189  body:not(.is-mobile) .workspace-leaf-content[data-type="markdown"] .view-actions .view-action svg {
190      margin-top: 8px;
191  }
192  
193  .workspace > .workspace-split {
194      padding-bottom: 0;
195  }
196  
197  
198  .workspace-leaf-content .view-header {
199      background: transparent !important;
200      border: none !important;
201  }
202  
203  /* scroll */
204  
205  body:not(.native-scrollbars) ::-webkit-scrollbar {
206      width: 6px;
207  }
208  
209  body:not(.native-scrollbars) .workspace-leaf-content .nav-header + *:hover::-webkit-scrollbar-thumb {
210      border: none;
211      /* background-color: var(--scrollbar-thumb-bg); */
212  }
213  
214  body:not(.native-scrollbars) .workspace-leaf-content .view-content:hover *::-webkit-scrollbar-thumb {
215      border: none;
216      /* background-color: var(--scrollbar-thumb-bg); */
217  }
218  
219  body:not(.native-scrollbars) ::-webkit-scrollbar-thumb {
220      border-radius: 0;
221      background-clip: content-box;
222      border-left: 4px solid transparent;
223      /* background-color: var(--mica-border); */
224      transition: background-color 0.2s;
225  }
226  
227  body:not(.native-scrollbars) .modal-container ::-webkit-scrollbar-thumb {
228      /* background-color: white; */
229      border: none;
230  }
231  
232  /* view header wrangling */
233  
234  .view-header {
235      height: 48px;
236      max-height: 48px;
237      min-height: 48px;
238  }
239  
240  .view-header-title-parent {
241      display: none;
242  }
243  
244  /* mod top buttons */
245  
246  .sidebar-toggle-button.mod-left {
247      top: 24px;
248  }
249  
250  .workspace-ribbon.mod-left:before {
251      display: none;
252  }
253  
254  .is-hidden-frameless:not(.is-fullscreen) .titlebar-button-container.mod-right,
255  .is-hidden-frameless:not(.is-fullscreen) .titlebar-button-container.mod-left,
256  .is-hidden-frameless:not(.is-fullscreen).is-focused .titlebar-button-container.mod-right,
257  .is-hidden-frameless:not(.is-fullscreen).is-focused .titlebar-button-container.mod-left {
258      background-color: transparent;
259  }
260  
261  .titlebar-button {
262      height: 24px;
263  }
264  
265  /* tabs */
266  
267  .mod-root .workspace-tab-header {
268      border-radius: 0;
269  }
270  
271  .mod-root .workspace-tab-header-container-inner {
272      padding: 0;
273      border-radius: 0;
274      margin: 0;
275  }
276  
277  .mod-root .workspace-tab-header-container-inner::before, .mod-root .workspace-tab-header-container-inner::after,
278  .workspace-split.mod-root .workspace-tab-header.is-active::before, .workspace-split.mod-root .workspace-tab-header.is-active::after {
279      display: none;
280  }
281  
282  .workspace .mod-root .workspace-tab-header-container-inner .workspace-tab-header {
283      padding-left: 8px;
284  }
285  
286  .workspace-tab-header.is-active {
287      box-shadow: none;
288      background: var(--mica-base-bg-start);
289  }
290  
291  .workspace-tab-header-new-tab {
292      margin-left: 8px;
293  }
294  
295  /* nav */
296  
297  .nav-header .nav-buttons-container {
298      justify-content: flex-start;
299  }
300  
301  /* make links slightly lighter + accented */
302  
303  .nav-file-title, .nav-folder-title {
304      --text-muted: var(--custom-text-muted);
305  }
306  
307  .tree-item-self {
308      --text-muted: var(--custom-text-muted);
309      --interactive-accent: var(--custom-accent-muted);
310      --text-on-accent: var(--custom-text-on-accent);
311  }
312  
313  /* file tree */
314  
315  .nav-file-title, .nav-folder-title {
316      min-width: calc(100% - 12px);
317      border-radius: 6px;
318  }
319  
320  .nav-file-title:hover, .nav-folder-title:hover {
321  
322  }
323  
324  .nav-files-container .nav-folder.mod-root {
325      padding: 0 4px;
326  }
327  
328  .nav-file-title.is-active {
329      background: rgba(255, 255, 255, 0.05);
330      border: 1px solid rgba(255, 255, 255, 0.08);
331      box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.5);
332      font-weight: bold;
333  }
334  
335  .nav-file-title.is-active:hover {
336      font-weight: bold !important;
337  }
338  
339  .nav-file-tag {
340      border-radius: 0;
341      font-size: 10px;
342      padding: 0px 2px;
343      color: var(--custom-text-muted);
344  }
345  
346  .nav-file-tag::before {
347      content: '● ';
348      color: #caca00;
349  }
350  
351  /* make the buttons slightly lighter + accented */
352  
353  .side-dock-ribbon-action {
354      --text-faint: var(--custom-text-faint);
355      --text-muted: var(--custom-text-muted);
356  }
357  
358  .workspace-tab-header {
359      --text-faint: var(--custom-text-faint);
360      --text-muted: var(--custom-text-muted);
361  }
362  
363  .nav-action-button {
364      --text-faint: var(--custom-text-faint);
365      --text-muted: var(--custom-text-muted);
366      --interactive-accent: var(--custom-accent-muted);
367      --text-on-accent: var(--custom-text-on-accent);
368      --text-accent: var(--custom-accent-muted);
369  }
370  
371  /* change flash animation */
372  
373  .is-flashing {
374      background: transparent;
375  }
376  
377  .is-flashing .nav-file-title {
378      background: linear-gradient(90deg, 
379          rgba(255, 255, 255, 0.05) 0%,
380          rgba(255, 255, 255, 0.05) 30%,
381          rgba(255, 255, 255, 0.3) 50%,
382          rgba(255, 255, 255, 0.05) 70%,
383          rgba(255, 255, 255, 0.05) 100%);
384      animation: flashing 5s infinite;
385      animation-timing-function: linear;
386      background-size: 200px 100%;
387      /* --text-highlight-bg: var(--custom-accent); */
388  }
389  
390  @keyframes flashing {
391      0% {
392          background-position: 0% 0;
393      }
394      100%{
395          background-position: 400px 0;
396      }
397  }
398  
399  /* frame */
400  
401  .mod-windows {
402      --frame-right-space: 0;
403  }
404  
405  /* sidebar toggle move */
406  
407  .workspace-tabs.mod-top-right-space .workspace-tab-header-container {
408      padding-right: 8px !important;
409  }
410  
411  /* change note header to match h1 */
412  
413  body:not(.plugin-sliding-panes):not(.is-mobile) .workspace-leaf-content[data-type="markdown"] .view-header {
414      height: 56px;
415  }
416  
417  body:not(.plugin-sliding-panes):not(.is-mobile) .workspace-leaf-content[data-type="markdown"] .view-header .view-header-title {
418      font-size: 38px;
419      line-height: 56px;
420      font-family: "Futura Md BT", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
421  }
422  
423  body:not(.plugin-sliding-panes):not(.is-mobile) .workspace-leaf-content[data-type="markdown"] .view-header .view-header-icon {
424      padding-top: 17px;
425      width: 48px;
426      text-align: center;
427  }
428  
429  /* sliding panes fix */
430  
431  .plugin-sliding-panes .workspace-leaf-content[data-type="markdown"] {
432      background: linear-gradient(135deg, var(--mica-content-bg-start), var(--mica-content-bg-end));
433      background-attachment: fixed;
434  }
435  
436  /* change tree header */ 
437  
438  .nav-folder.mod-root > .nav-folder-title .nav-folder-title-content {
439      font-size: 22px;
440      padding-bottom: 10px;
441      font-family: "Futura Md BT", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
442  }
443  
444  /* title bar */
445  
446  .titlebar {
447      -webkit-app-region: drag !important;
448  }
449  
450  .titlebar .titlebar-text, 
451  .is-hidden-frameless .titlebar .titlebar-text {
452      display: block;
453      text-align: left;
454      width: auto;
455      left: 64px;
456      line-height: 24px;
457      z-index: 5;
458      font-weight: normal;
459      padding: 0;
460  }
461  
462  .mod-macos .titlebar .titlebar-text {
463      left: 136px;
464  }
465  
466  .titlebar .titlebar-text::after {
467      z-index: 5;
468      opacity: 0.7;
469      content: " - https://tmz.io/sodalite v0.8.2";
470  }
471  
472  /* status bar */
473  
474  .status-bar {
475      bottom: auto;
476      top: 0;
477      right: 136px;
478      font-size: 12px;
479  }
480  
481  .mod-macos .status-bar {
482      right: 0;
483  }
484  
485  @media only screen and (max-width: 1280px) {
486      .status-bar {
487          display: none;
488      }
489  }
490  
491  /* buttons */
492  
493  button.mod-cta {
494      background: var(--custom-accent-muted);
495  }
496  
497  button.mod-cta:hover {
498      background: var(--custom-accent);
499  }
500  
501  /* popups */
502  
503  .suggestion-container, .menu {
504      margin-top: 6px;
505      border-radius: 8px;
506      background: 
507          rgba(0,0,0,0.3)
508          linear-gradient(160deg, transparent, rgba(255, 255, 255, 0.02));
509      border: 2px solid var(--mica-border);
510      backdrop-filter: blur(12px);
511      box-shadow: 0 3.2px 7.2px 0 rgba(0,0,0,.132),0 .6px 1.8px 0 rgba(0,0,0,.108);
512  }
513  
514  /* modals */
515  
516  body:not(.is-mobile) .modal-container .modal-bg {
517      background-color: rgba(0, 0, 0, .3);
518      backdrop-filter: blur(12px);
519  }
520  
521  .modal-container .modal {
522      background: linear-gradient(135deg, var(--mica-base-bg-start), var(--mica-base-bg-end));
523      box-shadow: 0 6.4px 14.4px 0 rgba(0,0,0,.132),0 1.2px 3.6px 0 rgba(0,0,0,.108);
524      overflow: visible !important;
525  }
526  
527  .modal-container .modal .modal-content {
528      padding: 0;
529  }
530  
531  .modal-container .modal .modal-title {
532      font-family: "Futura Md BT", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
533      font-size: 32px;
534  }
535  
536  .modal-container .modal .vertical-tab-content {
537      background: transparent;
538      padding-top: 20px;
539  }
540  
541  .modal-container .modal .vertical-tab-header {
542      background: transparent;
543      padding-top: 0;
544  }
545  
546  .modal-container .modal .vertical-tab-content-container {
547      background: linear-gradient(135deg, var(--mica-content-bg-start), var(--mica-content-bg-end));
548      padding: 0;
549      border-left: 2px solid var(--mica-border);
550  }
551  
552  .modal-container .modal .vertical-tab-nav-item {
553      background: transparent;
554  }
555  
556  .modal-container .modal .vertical-tab-nav-item.is-active {
557      background: rgba(255, 255, 255, 0.05);
558      border: 1px solid rgba(255, 255, 255, 0.08);
559      box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.5);
560      border-radius: 6px;
561      margin: 0 8px;
562      font-weight: bold;
563  }
564  
565  .modal-container .modal .modal-close-button {
566      right: -40px;
567  }
568  
569  .modal-container .prompt {
570      background: transparent;
571  }
572  
573  .modal-container .prompt .suggestion-item.is-selected {
574      background: linear-gradient(160deg, transparent, rgba(255, 255, 255, 0.1));
575  }
576  
577  /* tooltips */
578  
579  .tooltip {
580      background: 
581          rgba(0,0,0,0.4)
582          linear-gradient(160deg, transparent, rgba(255,255,255,0.05));
583      backdrop-filter: blur(18px);
584      font-size: 1em;
585      padding: 6px 12px;
586  }
587  
588  .tooltip .tooltip-arrow {
589      backdrop-filter: blur(18px);
590      border-bottom: 5px solid rgba(0,0,0,0.4);
591  }
592  
593  .tooltip.mod-right .tooltip-arrow {
594      border-right: 5px solid rgba(0,0,0,0.4);
595  }
596  
597  .tooltip.mod-left .tooltip-arrow {
598      border-left: 5px solid rgba(0,0,0,0.4);
599  }
600  
601  .tooltip.mod-top .tooltip-arrow {
602      border-top: 5px solid rgba(0,0,0,0.4);
603  }
604  
605  /* notice */
606  
607  .notice-container .notice {
608      background: 
609          var(--custom-accent-muted-transparent)
610          linear-gradient(160deg, transparent, rgba(255,255,255,0.05));
611      backdrop-filter: blur(18px);
612  }
613  
614  /* content */
615  
616  .view-content {
617      height: 100%;
618  }
619  
620  /* selection */
621  
622  ::selection, .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection, .CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected {
623      background: var(--custom-accent-muted-selection);
624      color: white;
625  }
626  
627  /* scroll-below */
628  
629  body:not(.is-mobile) .workspace-leaf-content > .nav-header,
630  body:not(.plugin-sliding-panes):not(.is-mobile) .workspace-leaf-content > .view-header {
631      position: absolute;
632      z-index: 90;
633      width: 100%;
634      backdrop-filter: blur(18px);
635      background: 
636          linear-gradient(135deg, var(--mica-content-bg-start-transparent),
637          var(--mica-content-bg-end-transparent)) !important;
638      background-attachment: fixed !important;
639  }
640  
641  body:not(.is-mobile) .workspace-leaf-content > .nav-header + * {
642      padding-top: calc(48px + 6px);
643  }
644  
645  body:not(.is-mobile) .workspace-leaf-content > .nav-header + *::-webkit-scrollbar-track {
646      margin-top: 48px;
647  }
648  
649  body:not(.is-mobile) .workspace-leaf-content[data-type="bookmarks"] .view-content {
650      padding-top: 56px;
651  }
652  
653  body:not(.plugin-sliding-panes):not(.is-mobile) .workspace-leaf-content[data-type="markdown"] .markdown-preview-sizer {
654      padding-top: 56px;
655  }
656  
657  body:not(.plugin-sliding-panes):not(.is-mobile) .workspace-leaf-content[data-type="markdown"] .markdown-preview-view::-webkit-scrollbar-track {
658      margin-top: 56px;
659  }
660  
661  body:not(.plugin-sliding-panes):not(.is-mobile) .workspace-leaf-content[data-type="markdown"] .CodeMirror-scroll {
662      padding-top: 56px;
663  }
664  
665  body:not(.plugin-sliding-panes):not(.is-mobile) .workspace-leaf-content[data-type="markdown"] .CodeMirror-vscrollbar::-webkit-scrollbar-track {
666      margin-top: 56px;
667  }
668  
669  body:not(.plugin-sliding-panes):not(.is-mobile) .workspace-leaf-content[data-type="markdown"] .cm-scroller {
670      padding-top: 56px;
671  }
672  
673  body:not(.plugin-sliding-panes):not(.is-mobile) .workspace-leaf-content[data-type="markdown"] .cm-scroller::-webkit-scrollbar-track {
674      margin-top: 56px;
675  }
676  
677  /* fix search with scroll below */
678  
679  body:not(.is-mobile) .workspace-leaf-content .document-search-container {
680      position: absolute;
681      top: 64px;
682      right: 0;
683      background: transparent;
684      backdrop-filter: blur(18px);
685      background: 
686          linear-gradient(135deg, var(--mica-content-bg-start-transparent),
687          var(--mica-content-bg-end-transparent)) !important;
688      background-attachment: fixed !important;
689      min-width: 400px;
690      padding: 12px;
691      border: 1px solid #404040;
692  }
693  
694  .document-search-close-button {
695      padding: 0;
696      margin-top: -4px;
697      margin-right: -8px;
698      margin-left: 8px;
699  }
700  
701  /* graph */
702  
703  .graph-controls {
704      border-radius: 0 0 8px 0;
705      border: none;
706      border-right: 2px solid var(--mica-border);
707      border-bottom: 2px solid var(--mica-border);
708      top: 0;
709      left: 0;
710      background: linear-gradient(160deg, transparent, rgba(255, 255, 255, 0.02));
711      backdrop-filter: blur(10px);
712  }
713  
714  body:not(.is-mobile) .workspace-split.mod-root .graph-controls {
715      top: 48px;
716  }
717  
718  .graph-controls.is-close {
719      background: linear-gradient(160deg, transparent, rgba(255, 255, 255, 0.02));
720      width: 48px;
721  }
722  
723  .graph-controls .setting-item-name {
724      --text-muted: var(--custom-text-muted);
725  }
726  
727  body.is-mobile .graph-controls {
728      background: linear-gradient(135deg, var(--mica-content-bg-start), var(--mica-content-bg-end));
729      background-attachment: fixed;
730      backdrop-filter: none;
731  }
732  
733  .graph-view.color-line {
734      color: #404050;
735  }
736  
737  .graph-view.color-line-highlight {
738      color: #507090;
739  }
740  
741  /* preview frontmatter */ 
742  
743  .frontmatter-container {
744      background: linear-gradient(160deg, transparent, rgba(255, 255, 255, 0.02));
745      border-radius: 8px;
746      border: 1px solid rgba(255, 255, 255, 0.05);
747      margin-bottom: 20px;
748  }
749  
750  /* side dock */
751  
752  .side-dock-settings {
753      margin-bottom: 0;
754  }
755  
756  /* checkboxes */
757  
758  .setting-item-control .checkbox-container.is-enabled {
759      background: var(--custom-accent-muted);
760  }
761  
762  /* sync icon */
763  
764  .status-bar-item .status-bar-item-icon.sync-status-icon {
765      position: relative;
766  }
767  
768  .status-bar-item .status-bar-item-icon.sync-status-icon svg {
769      width: 21px;
770      height: 21px;
771  }
772  
773  .status-bar-item .status-bar-item-icon.sync-status-icon::after {
774      display: block;
775      width: 100%;
776      height: 26px;
777      position: fixed;
778      content: ' ';
779      left: 0;
780      top: 0;
781      z-index: -1;
782      pointer-events: none;
783      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
784  }
785  
786  /* .status-bar-item .status-bar-item-icon.sync-status-icon.mod-success::after {
787      background: linear-gradient(90deg, 
788          transparent 0%,
789          transparent 30%,
790          rgba(40, 255, 40, 0.2) 50%,
791          transparent 70%,
792          transparent 100%);
793      animation: sync-flashing-success 5s 1;
794      animation-timing-function: linear;
795      background-size: 500px 100%;
796  } */
797  
798  .status-bar-item .status-bar-item-icon.sync-status-icon.mod-working::after {
799      background: linear-gradient(90deg, 
800          transparent 0%,
801          transparent 30%,
802          rgba(40, 40, 255, 0.2),
803          transparent 70%,
804          transparent 100%);
805      animation: sync-flashing 5s infinite, sync-fadein 1s 1;
806      animation-timing-function: linear;
807      background-size: 500px 100%;
808      background-repeat: repeat-x;
809  }
810  
811  @keyframes sync-flashing {
812      0% {
813          background-position: 0% 0;
814      }
815      100%{
816          background-position: 1000px 0;
817      }
818  }
819  
820  @keyframes sync-fadein {
821      0% {
822          opacity: 0;
823      }
824      50% {
825          opacity: 0;
826      }
827      100%{
828          opacity: 1;
829      }
830  }
831  
832  /* collapse */
833  
834  .CodeMirror-gutter.CodeMirror-linenumbers, .CodeMirror-gutter.CodeMirror-foldgutter {
835      background: transparent;
836  }
837  
838  .markdown-source-view.mod-cm6 .cm-gutters {
839      background: transparent !important;
840  }
841  
842  /* content colors */
843  
844  .cm-s-obsidian span.cm-hashtag {
845      color: var(--text-accent);
846  }
847  
848  /* add icons to tree */
849  
850  .nav-folder .nav-folder-title-content::before {
851      content: '📂 ';
852  }
853  
854  .nav-folder.is-collapsed .nav-folder-title-content::before {
855      content: '📁 ';
856  }
857  
858  .workspace-leaf-content[data-type="file-explorer"] .nav-folder.mod-root > .nav-folder-title .nav-folder-title-content::before {
859      content: '🏠 '
860  }
861  
862  .workspace-leaf-content[data-type="file-explorer"] .nav-file .nav-file-title-content::before {
863      content: '📝 '
864  }
865  
866  /* special icon example */
867  
868  .workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path^="samplepaththatdoesntexist"] .nav-file-title-content::before {
869      content: '⚡ ';
870  }
871  
872  /* callouts */
873  
874  body {
875      --callout-radius: 0;
876      --callout-padding: 18px;
877  }
878  
879  .callout .callout-content > :last-child {
880      margin-block-end: 0;
881  }
882  
883  .callout .callout-title .callout-icon {
884      margin-top: 0;
885      margin-right: 0.15em;
886  }