Baseline Bookmark Coloring, Bookmark Icons, Header Coloring and File Explorer Icons

Baseline_bookmarkcoloring.css

/* ===== Bookmarks: coloring, hover, active ===== */

/* Small top padding so the first row doesn't hug the header */
.workspace-leaf-content[data-type="bookmarks"]
  .view-content.node-insert-event > div:first-child {
  padding-top: 6px !important;
}

/* Rounded “pill” rows + inherit text color from theme (or mode overrides) */
.workspace-leaf-content[data-type="bookmarks"]
  .view-content > div > .tree-item > .tree-item-self {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-s);
  color: var(--nav-item-color, var(--text-normal));
}

/* ---------------- Indicator bar (Colorful folders: side) ---------------- */
body.colorful-folders-side
  .workspace-leaf-content[data-type="bookmarks"]
  .view-content > div > .tree-item > .tree-item-self::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 4px;
  border-radius: var(--radius-s);
  pointer-events: none; /* never block hover/click */
}

/* Cycle colors every 8 items */
body.colorful-folders-side .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+2)  > .tree-item-self::before { background-color: var(--color-red); }
body.colorful-folders-side .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+3)  > .tree-item-self::before { background-color: var(--color-orange); }
body.colorful-folders-side .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+4)  > .tree-item-self::before { background-color: var(--color-yellow); }
body.colorful-folders-side .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+5)  > .tree-item-self::before { background-color: var(--color-green); }
body.colorful-folders-side .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+6)  > .tree-item-self::before { background-color: var(--color-cyan); }
body.colorful-folders-side .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+7)  > .tree-item-self::before { background-color: var(--color-blue); }
body.colorful-folders-side .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+8)  > .tree-item-self::before { background-color: var(--color-purple); }
body.colorful-folders-side .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+9)  > .tree-item-self::before { background-color: var(--color-pink); }

/* ---------------- Subtle mode ---------------- */
body.colorful-folders-subtle
  .workspace-leaf-content[data-type="bookmarks"]
  .view-content > div > .tree-item > .tree-item-self {
  --nav-item-color-hover: var(--nav-item-color);
  --nav-collapse-icon-color: var(--nav-item-color);
}

body.colorful-folders-subtle .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+2)  > .tree-item-self { --nav-item-color: color-mix(in srgb, var(--color-red),    var(--color-base-100));    background-color: rgba(var(--color-red-rgb),    .10); }
body.colorful-folders-subtle .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+3)  > .tree-item-self { --nav-item-color: color-mix(in srgb, var(--color-orange), var(--color-base-100)); background-color: rgba(var(--color-orange-rgb), .10); }
body.colorful-folders-subtle .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+4)  > .tree-item-self { --nav-item-color: color-mix(in srgb, var(--color-yellow), var(--color-base-100)); background-color: rgba(var(--color-yellow-rgb), .10); }
body.colorful-folders-subtle .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+5)  > .tree-item-self { --nav-item-color: color-mix(in srgb, var(--color-green),  var(--color-base-100));  background-color: rgba(var(--color-green-rgb),  .10); }
body.colorful-folders-subtle .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+6)  > .tree-item-self { --nav-item-color: color-mix(in srgb, var(--color-cyan),   var(--color-base-100));   background-color: rgba(var(--color-cyan-rgb),   .10); }
body.colorful-folders-subtle .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+7)  > .tree-item-self { --nav-item-color: color-mix(in srgb, var(--color-blue),   var(--color-base-100));   background-color: rgba(var(--color-blue-rgb),   .10); }
body.colorful-folders-subtle .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+8)  > .tree-item-self { --nav-item-color: color-mix(in srgb, var(--color-purple), var(--color-base-100)); background-color: rgba(var(--color-purple-rgb), .10); }
body.colorful-folders-subtle .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+9)  > .tree-item-self { --nav-item-color: color-mix(in srgb, var(--color-pink),   var(--color-base-100));   background-color: rgba(var(--color-pink-rgb),   .10); }

/* ---------------- Strong mode ---------------- */
body.colorful-folders-strong
  .workspace-leaf-content[data-type="bookmarks"]
  .view-content > div > .tree-item > .tree-item-self {
  --nav-item-color: white;
  --nav-item-color-hover: var(--nav-item-color);
  --nav-collapse-icon-color: var(--nav-item-color);
}

body.colorful-folders-strong .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+2)  > .tree-item-self { background-color: rgba(var(--color-red-rgb),    .85); }
body.colorful-folders-strong .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+3)  > .tree-item-self { background-color: rgba(var(--color-orange-rgb), .85); }
body.colorful-folders-strong .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+4)  > .tree-item-self { background-color: rgba(var(--color-yellow-rgb), .85); }
body.colorful-folders-strong .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+5)  > .tree-item-self { background-color: rgba(var(--color-green-rgb),  .85); }
body.colorful-folders-strong .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+6)  > .tree-item-self { background-color: rgba(var(--color-cyan-rgb),   .85); }
body.colorful-folders-strong .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+7)  > .tree-item-self { background-color: rgba(var(--color-blue-rgb),   .85); }
body.colorful-folders-strong .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+8)  > .tree-item-self { background-color: rgba(var(--color-purple-rgb), .85); }
body.colorful-folders-strong .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+9)  > .tree-item-self { background-color: rgba(var(--color-pink-rgb),   .85); }

/* ---------------- Mono mode ---------------- */
body.colorful-folders-mono
  .workspace-leaf-content[data-type="bookmarks"]
  .view-content > div > .tree-item > .tree-item-self {
  --nav-item-color: var(--text-normal);
}

body.colorful-folders-mono .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+2)  > .tree-item-self { background-color: rgba(var(--mono-rgb-100), .24); }
body.colorful-folders-mono .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+3)  > .tree-item-self { background-color: rgba(var(--mono-rgb-100), .21); }
body.colorful-folders-mono .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+4)  > .tree-item-self { background-color: rgba(var(--mono-rgb-100), .18); }
body.colorful-folders-mono .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+5)  > .tree-item-self { background-color: rgba(var(--mono-rgb-100), .15); }
body.colorful-folders-mono .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+6)  > .tree-item-self { background-color: rgba(var(--mono-rgb-100), .12); }
body.colorful-folders-mono .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+7)  > .tree-item-self { background-color: rgba(var(--mono-rgb-100), .09); }
body.colorful-folders-mono .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+8)  > .tree-item-self { background-color: rgba(var(--mono-rgb-100), .06); }
body.colorful-folders-mono .workspace-leaf-content[data-type="bookmarks"] .view-content > div > .tree-item:nth-child(8n+9)  > .tree-item-self { background-color: rgba(var(--mono-rgb-100), .03); }

/* ---------------- Hover & Active ---------------- */

/* Use the same hover token the theme uses (don’t change the value here) */
body { 
  --nav-item-background-hover: rgba(var(--mono-rgb-100,255,255,255), .26) !important; 
}

/* Hover (non-active) */
.workspace-leaf-content[data-type="bookmarks"]
  .view-content .tree-item .tree-item-self.bookmark.is-clickable:not(.is-active):hover {
  background-color: var(--nav-item-background-hover) !important;
  color: var(--nav-item-color-hover, var(--nav-item-color, var(--text-normal))) !important;
  cursor: pointer;
}

/* Slight lift on strong mode */
body.colorful-folders-strong
  .workspace-leaf-content[data-type="bookmarks"]
  .view-content .tree-item .tree-item-self.bookmark.is-clickable:not(.is-active):hover {
  filter: brightness(1.06) !important;
}

/* Active bookmark: make the label bolder */
:root { --nav-item-weight-active: 700; }
.workspace-leaf-content[data-type="bookmarks"]
  .tree-item-self.bookmark.is-active .tree-item-inner-text,
.workspace-leaf-content[data-type="bookmarks"]
  .tree-item.is-active > .tree-item-self .tree-item-inner-text {
  font-weight: var(--nav-item-weight-active) !important;
}

/* ===== Bookmarks: inherit normal weight by default ===== */
.workspace-leaf-content[data-type="bookmarks"]
  .tree-item-self.bookmark .tree-item-inner-text {
  font-weight: inherit; /* normal when the theme toggle is OFF */
}

/* ===== Follow theme bold toggle (either class the theme uses) ===== */
body.folder-font-bold
  .workspace-leaf-content[data-type="bookmarks"]
  .tree-item-self.bookmark .tree-item-inner-text,
body.bold-folders
  .workspace-leaf-content[data-type="bookmarks"]
  .tree-item-self.bookmark .tree-item-inner-text {
  font-weight: var(--nav-item-weight, 600);
}

/* ===== Active item gets the theme’s “active” weight ===== */
.workspace-leaf-content[data-type="bookmarks"]
  .tree-item-self.bookmark.is-active .tree-item-inner-text,
.workspace-leaf-content[data-type="bookmarks"]
  .tree-item.is-active > .tree-item-self .tree-item-inner-text {
  font-weight: var(--nav-item-weight-active, 700);
}

/* Bookmarks only — remove rounding on the left indicator line */
.workspace-leaf-content[data-type="bookmarks"]
  .view-content .tree-item > .tree-item-self {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* If the bookmark indicator itself has its own border-radius */
.workspace-leaf-content[data-type="bookmarks"]
  .view-content .tree-item > .tree-item-self::before {
  border-radius: 0 !important;
}

Baseline_bookmarkicons.css

/* ===== Bookmark icons ===== */

/* Size & alignment (relies on theme’s --icon-size where available) */
:root {
  --icon-size: calc(var(--file-font-size, 0.9em) * 1.3);
  --icon-margin-right: 0.2em;
  --icon-margin-left: 0.2em;
  --icon-vertical-align: middle;
}

/* Replace the default bookmark glyph with your mask */
.workspace-leaf-content[data-type="bookmarks"]
  .tree-item-self > .tree-item-icon:not(.collapse-icon) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M168,72V224l-56-40L56,224V72a8,8,0,0,1,8-8h96A8,8,0,0,1,168,72Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M160,56H64A16,16,0,0,0,48,72V224a8,8,0,0,0,12.65,6.51L112,193.83l51.36,36.68A8,8,0,0,0,176,224V72A16,16,0,0,0,160,56Zm0,152.46-43.36-31a8,8,0,0,0-9.3,0L64,208.45V72h96ZM208,40V192a8,8,0,0,1-16,0V40H88a8,8,0,0,1,0-16H192A16,16,0,0,1,208,40Z'%3E%3C/path%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  background-color: currentColor;
  color: currentColor;
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
}

Baseline_fileexplorericons.css

/* ===== File Explorer icons (file types) ===== */

/* Size & alignment (uses same vars so icons match bookmarks) */
:root {
  --icon-size: calc(var(--file-font-size, 0.9em) * 1.3);
  --icon-margin-right: 0.2em;
  --icon-margin-left: 0.2em;
  --icon-vertical-align: middle;
}

/* Reserve space and paint via mask before the filename */
.nav-file .nav-file-title[data-path] {
  display: flex;
  align-items: center;
}

.nav-file .nav-file-title[data-path]::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  margin-right: var(--icon-margin-right);
  margin-left: var(--icon-margin-left);
  background-color: currentColor;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: var(--icon-vertical-align);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
}


/* -----------------------------------------------------------------------
   9) Your file-type masks (examples shown; keep adding as in your script)
   ----------------------------------------------------------------------- */
.nav-file-title[data-path$=".md"]::before  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M208,88H152V32Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v72a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48V224a8,8,0,0,0,16,0V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM144,144H128a8,8,0,0,0-8,8v56a8,8,0,0,0,8,8h16a36,36,0,0,0,0-72Zm0,56h-8V160h8a20,20,0,0,1,0,40Zm-40-48v56a8,8,0,0,1-16,0V177.38L74.55,196.59a8,8,0,0,1-13.1,0L48,177.38V208a8,8,0,0,1-16,0V152a8,8,0,0,1,14.55-4.59L68,178.05l21.45-30.64A8,8,0,0,1,104,152Z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; background-color: currentColor; color: currentColor; }

.nav-file-title[data-path$=".js"]::before  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M208,88H152V32Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v72a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48V216H176a8,8,0,0,0,0,16h24a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160Zm-12.19,145a20.82,20.82,0,0,1-9.19,15.23C133.43,215,127,216,121.13,216A61.14,61.14,0,0,1,106,214a8,8,0,1,1,4.3-15.41c4.38,1.2,15,2.7,19.55-.36.88-.59,1.83-1.52,2.14-3.93.35-2.67-.71-4.1-12.78-7.59-9.35-2.7-25-7.23-23-23.11a20.56,20.56,0,0,1,9-14.95c11.84-8,30.71-3.31,32.83-2.76a8,8,0,0,1-4.07,15.48c-4.49-1.17-15.23-2.56-19.83.56a4.54,4.54,0,0,0-2,3.67c-.12.9-.14,1.09,1.11,1.9,2.31,1.49,6.45,2.68,10.45,3.84C133.49,174.17,150.05,179,147.81,196.31ZM80,152v38a26,26,0,0,1-52,0,8,8,0,0,1,16,0,10,10,0,0,0,20,0V152a8,8,0,0,1,16,0Z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; background-color: currentColor; color: currentColor; }

.nav-file-title[data-path$=".py"]::before  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M208,88H152V32Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v72a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48V216H168a8,8,0,0,0,0,16h32a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM64,144H48a8,8,0,0,0-8,8v56a8,8,0,0,0,16,0v-8h8a28,28,0,0,0,0-56Zm0,40H56V160h8a12,12,0,0,1,0,24Zm90.78-27.76-18.78,30V208a8,8,0,0,1-16,0V186.29l-18.78-30a8,8,0,1,1,13.56-8.48L128,168.91l13.22-21.15a8,8,0,1,1,13.56,8.48Z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; background-color: currentColor; color: currentColor; }

.nav-file-title[data-path$=".svg"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M208,88H152V32Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v72a8,8,0,1,0,16,0V40h88V88a8,8,0,0,0,8,8h48v16a8,8,0,0,0,16,0V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160Zm-72.18,145a20.82,20.82,0,0,1-9.19,15.23C73.44,215,67,216,61.14,216A61.23,61.23,0,0,1,46,214a8,8,0,0,1,4.3-15.41c4.38,1.2,14.95,2.7,19.55-.36.88-.59,1.83-1.52,2.14-3.93.35-2.67-.71-4.1-12.78-7.59-9.35-2.7-25-7.23-23-23.11a20.55,20.55,0,0,1,9-14.95c11.84-8,30.72-3.31,32.83-2.76a8,8,0,0,1-4.07,15.48c-4.48-1.17-15.23-2.56-19.83.56a4.54,4.54,0,0,0-2,3.67c-.11.9-.14,1.09,1.12,1.9,2.31,1.49,6.44,2.68,10.45,3.84C73.5,174.17,90.06,179,87.82,196.31Zm63.72-41.62-20,56a8,8,0,0,1-15.07,0l-20-56a8,8,0,1,1,15.06-5.38L124,184.21l12.46-34.9a8,8,0,0,1,15.07,5.38ZM216,184v16.87a8,8,0,0,1-2.22,5.53A30.06,30.06,0,0,1,192,216c-17.64,0-32-16.15-32-36s14.36-36,32-36a29.38,29.38,0,0,1,16.48,5.12,8,8,0,0,1-8.95,13.26A13.27,13.27,0,0,0,192,160c-8.82,0-16,9-16,20s7.18,20,16,20a13.38,13.38,0,0,0,8-2.71V192a8,8,0,0,1,0-16h8A8,8,0,0,1,216,184Z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; background-color: currentColor; color: currentColor; }

.nav-file-title[data-path$=".png"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M208,88H152V32Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M60,144H44a8,8,0,0,0-8,8v56a8,8,0,0,0,16,0v-8h8a28,28,0,0,0,0-56Zm0,40H52V160h8a12,12,0,0,1,0,24Zm164,16.87a8,8,0,0,1-2.22,5.53A30.06,30.06,0,0,1,200,216c-17.64,0-32-16.15-32-36s14.36-36,32-36a29.45,29.45,0,0,1,16.48,5.11,8,8,0,0,1-9,13.27A13.21,13.21,0,0,0,200,160c-8.82,0-16,9-16,20s7.18,20,16,20a13.57,13.57,0,0,0,8-2.72V192a8,8,0,0,1,0-16h8A8,8,0,0,1,216,184Z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; background-color: currentColor; color: currentColor; }

.nav-file-title[data-path$=".css"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M208,88H152V32Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M48,180c0,11,7.18,20,16,20a14.2,14.2,0,0,0,10.22-4.66A8,8,0,1,1,85.77,206.4,30,30,0,0,1,64,216c-17.65,0-32-16.15-32-36s14.35-36,32-36a30,30,0,0,1,21.77,9.6,8,8,0,1,1-11.55,11.06A14.24,14.24,0,0,0,64,160C55.18,160,48,169,48,180Z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; background-color: currentColor; color: currentColor; }

.nav-file-title[data-path$=".jpg"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M208,88H152V32Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M120,144H104a8,8,0,0,0-8,8v56a8,8,0,0,0,16,0v-8h8a28,28,0,0,0,0-56Zm0,40h-8V160h8a12,12,0,0,1,0,24Zm96,0v16.87a8,8,0,0,1-2.22,5.53A30.06,30.06,0,0,1,192,216c-17.64,0-32-16.15-32-36s14.36-36,32-36a29.38,29.38,0,0,1,16.48,5.12,8,8,0,0,1-9,13.26A13.21,13.21,0,0,0,192,160c-8.82,0-16,9-16,20s7.18,20,16,20a13.63,13.63,0,0,0,8-2.71V192a8,8,0,0,1,0-16h8A8,8,0,0,1,216,184ZM80,152v38a26,26,0,0,1-52,0,8,8,0,0,1,16,0,10,10,0,0,0,20,0V152a8,8,0,0,1,16,0ZM213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v72a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v16a8,8,0,0,0,16,0V88A8,8,0,0,0,213.66,82.34ZM160,80V51.31L188.69,80Z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; background-color: currentColor; color: currentColor; }

.nav-file-title[data-path$=".canvas"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23000000' viewBox='0 0 256 256'%3E%3Cpath d='M64,112v32a8,8,0,0,1-8,8H24a8,8,0,0,1-8-8V112a8,8,0,0,1,8-8H56A8,8,0,0,1,64,112ZM208,40H160a8,8,0,0,0-8,8V96a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V48A8,8,0,0,0,208,40Zm0,112H160a8,8,0,0,0-8,8v48a8,8,0,0,0,8,8h48a8,8,0,0,0,8-8V160A8,8,0,0,0,208,152Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M160,112h48a16,16,0,0,0,16-16V48a16,16,0,0,0-16-16H160a16,16,0,0,0-16,16V64H128a24,24,0,0,0-24,24v32H72v-8A16,16,0,0,0,56,96H24A16,16,0,0,0,8,112v32a16,16,0,0,0,16,16H56a16,16,0,0,0,16-16v-8h32v32a24,24,0,0,0,24,24h16v16a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V160a16,16,0,0,0-16-16H160a16,16,0,0,0-16,16v16H128a8,8,0,0,1-8-8V88a8,8,0,0,1,8-8h16V96A16,16,0,0,0,160,112ZM56,144H24V112H56v32Zm104,16h48v48H160Zm0-112h48V96H160Z'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    background-color: currentColor;
    color: currentColor;
}

.nav-file-title[data-path$=".csv"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='black' viewBox='0 0 256 256'%3e%3cpath d='M208%2c88H152V32Z' opacity='0.2'%3e%3c/path%3e%3cpath d='M48%2c180c0%2c11%2c7.18%2c20%2c16%2c20a14.24%2c14.24%2c0%2c0%2c0%2c10.22-4.66A8%2c8%2c0%2c0%2c1%2c85.78%2c206.4%2c30.06%2c30.06%2c0%2c0%2c1%2c64%2c216c-17.65%2c0-32-16.15-32-36s14.35-36%2c32-36a30.06%2c30.06%2c0%2c0%2c1%2c21.78%2c9.6%2c8%2c8%2c0%2c0%2c1-11.56%2c11.06A14.24%2c14.24%2c0%2c0%2c0%2c64%2c160C55.18%2c160%2c48%2c169%2c48%2c180Zm79.6-8.69c-4-1.16-8.14-2.35-10.45-3.84-1.25-.81-1.23-1-1.12-1.9a4.57%2c4.57%2c0%2c0%2c1%2c2-3.67c4.6-3.12%2c15.34-1.73%2c19.83-.56A8%2c8%2c0%2c0%2c0%2c142%2c145.86c-2.12-.55-21-5.22-32.84%2c2.76a20.58%2c20.58%2c0%2c0%2c0-9%2c14.95c-2%2c15.88%2c13.65%2c20.41%2c23%2c23.11%2c12.06%2c3.49%2c13.12%2c4.92%2c12.78%2c7.59-.31%2c2.41-1.26%2c3.34-2.14%2c3.93-4.6%2c3.06-15.17%2c1.56-19.55.36A8%2c8%2c0%2c0%2c0%2c109.94%2c214a61.34%2c61.34%2c0%2c0%2c0%2c15.19%2c2c5.82%2c0%2c12.3-1%2c17.49-4.46a20.82%2c20.82%2c0%2c0%2c0%2c9.19-15.23C154%2c179%2c137.49%2c174.17%2c127.6%2c171.31Zm83.09-26.84a8%2c8%2c0%2c0%2c0-10.23%2c4.84L188%2c184.21l-12.47-34.9a8%2c8%2c0%2c0%2c0-15.07%2c5.38l20%2c56a8%2c8%2c0%2c0%2c0%2c15.07%2c0l20-56A8%2c8%2c0%2c0%2c0%2c210.69%2c144.47ZM216%2c88v24a8%2c8%2c0%2c0%2c1-16%2c0V96H152a8%2c8%2c0%2c0%2c1-8-8V40H56v72a8%2c8%2c0%2c0%2c1-16%2c0V40A16%2c16%2c0%2c0%2c1%2c56%2c24h96a8%2c8%2c0%2c0%2c1%2c5.66%2c2.34l56%2c56A8%2c8%2c0%2c0%2c1%2c216%2c88Zm-27.31-8L160%2c51.31V80Z'%3e%3c/path%3e%3c/svg%3e");
    -webkit-mask-size: contain;
    background-color: currentColor;
    color: currentColor;
}

Baseline_headerlinecolors.css

/* ===== Header line coloring / compact accents ===== */

/* Accent color derived from your theme accent (safe fallbacks included) */
body {
  --compact-tab-bar-color: hsla(
    var(--accent-h, 210),
    var(--accent-s, 100%),
    calc(var(--accent-l, 50%) - 30%),
    1
  );
}

/* Collapsed side-dock little bars (when the header isn’t hovered) */
body:not(.compact-tabs-off)
  .workspace .mod-sidedock
  .workspace-tabs:not(.mod-top)
  .workspace-tab-header-container:not(:hover)
  .workspace-tab-header {
  background-color: var(--compact-tab-bar-color) !important;
}

/* Tabs: Underline (active + hover) */
body.tabs-underline .workspace .mod-root .workspace-tab-header.is-active {
  border-bottom-color: var(--compact-tab-bar-color) !important;
}
body.tabs-underline .workspace .mod-root .workspace-tab-header:not(.is-active):hover {
  border-bottom-color: var(--compact-tab-bar-color) !important;
}

/* Collapsed “dotted line” nav action buttons (header not hovered) */
body:not(.compact-actions-off)
  .mod-sidedock
  .workspace-leaf-content > .nav-header:not(:hover)
  .nav-buttons-container .nav-action-button,
body:not(.compact-actions-off)
  .mod-sidedock
  .workspace-leaf-content > .view-content > .nav-header:not(:hover)
  .nav-buttons-container .nav-action-button {
  background-color: var(--compact-tab-bar-color) !important;
}

/* Keep the “active” dot consistent as well */
body:not(.compact-actions-off)
  .mod-sidedock
  .workspace-leaf-content > .nav-header:not(:hover)
  .nav-buttons-container .nav-action-button.is-active,
body:not(.compact-actions-off)
  .mod-sidedock
  .workspace-leaf-content > .view-content > .nav-header:not(:hover)
  .nav-buttons-container .nav-action-button.is-active {
  background-color: var(--compact-tab-bar-color) !important;
}