API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 22nd, 2025
27
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.50 KB | None | 0 0
raw download clone embed print report
  1. /*------------------------------------------------------------------------------
  2. Obsidian Colored Sidebar Items by CyanVoxel v2.0.0
  3.  
  4. A colored sidebar CSS snippet inspired by
  5. the "Coloured Folders" snippet by Lithou.
  6.  
  7. This snippet targets folders beginning with numbered prefixes, and applies full
  8. color formatting based on the root colors listed below. The prefixes are both
  9. customizable and extensible; feel free to change, add, and remove them based on
  10. your own titles and vault structure! By default I have a range of 8+1 colors,
  11. however I've provided some other common colors as a starting point for your own
  12. customization. Just swap out the color variable names in the prefix groups.
  13.  
  14. ------------------------------------------------------------------------------*/
  15.  
  16. :root {
  17. /* ================================ Colors ================================ */
  18. --color-sb-: #e22c3c; /* red Default Prefix: None */
  19. --color-sb-: #e9404b; /* red-orange Default Prefix: None */
  20. --color-sb-: #ee6748; /* orange Default Prefix: None */
  21. --color-sb-: #fa9f50; /* amber Default Prefix: None */
  22. --color-sb-: #ffd85e; /* yellow Default Prefix: None */
  23. --color-sb-: #97e768; /* lime Default Prefix: None */
  24. --color-sb0: #52eea3; /* mint Default Prefix: 0 */
  25. --color-sb1: #51e1e9; /* cyan Default Prefix: 1 */
  26. --color-sb-: #43cfea; /* cool-cyan Default Prefix: None */
  27. --color-sb2: #54b6f8; /* light-blue Default Prefix: 2 */
  28. --color-sb-: #437cf3; /* blue Default Prefix: 3 */
  29. --color-sb-: #6f51f4; /* blue-violet Default Prefix: None */
  30. --color-sbx: #9446f8; /* violet Default Prefix: 4 */
  31. --color-sb-: #c952ed; /* purple Default Prefix: 5 */
  32. --color-sb3: #e54f9b; /* magenta Default Prefix: 6 */
  33. --color-sb4: #e3365e; /* hot-red Default Prefix: 7 */
  34. --color-sb-: #515768; /* cool-gray Default Prefix: x */
  35. --color-sb-: #515768; /* cool-gray Default Prefix: x */
  36.  
  37.  
  38. --default-text-color: #d0d0d0;
  39. --highlight: #fff;
  40. --shadow: #0b0c2c;
  41.  
  42. --nav-item-weight-hover: bold;
  43. }
  44.  
  45. /* Light Theme Specific Properties */
  46. .theme-light {
  47. --contrast-color: var(--shadow);
  48. --default-text-color: var(--shadow);
  49. --bg-contrast-amount: 70%;
  50. --fg-contrast-amount: 30%;
  51. --medium-contrast-amount: 60%;
  52. --active-contrast-amount: 30%;
  53.  
  54. /* Darker Versions of Bright Colors for Light Theme */
  55. --yellow: color-mix(in srgb, #ffd85e 90%, var(--shadow));
  56. --lime: color-mix(in srgb, #97e768 90%, var(--shadow));
  57. --color-sb0: color-mix(in srgb, #52eea3 85%, var(--shadow));
  58. --color-sb1: color-mix(in srgb, #51e1e9 85%, var(--shadow));
  59. --cool-cyan: color-mix(in srgb, #43cfea 85%, var(--shadow));
  60. --color-sb2: color-mix(in srgb, #54b6f8 90%, var(--shadow));
  61. }
  62.  
  63. /* Dark Theme Specific Properties */
  64. .theme-dark {
  65. --contrast-color: var(--highlight);
  66. --bg-contrast-amount: 15%;
  67. --fg-contrast-amount: 40%;
  68. --medium-contrast-amount: 30%;
  69. --active-contrast-amount: 20%;
  70. }
  71.  
  72. /* All Folder Titles */
  73. .nav-folder-title {
  74. font-weight: bold;
  75. border-radius: 5px;
  76. }
  77.  
  78. /* Narrower Padding on Desktop*/
  79. @media only screen and (min-width: 768px) {
  80. .nav-file-title,
  81. .nav-folder-title {
  82. /* padding: 3px 5px 2px 4px !important; */
  83. padding-top: 3px !important;
  84. padding-right: 5px !important;
  85. padding-bottom: 2px !important;
  86. padding-left: 15px;
  87. }
  88. }
  89.  
  90. /*
  91. ============================ Folder Title Prefixes =============================
  92. The following groups of prefixes are divided by the numbering prefix that they
  93. target. For example, prefix '0' targets any folder titles beginning with '0',
  94. such as '0 - Maps of Content'. The only other piece of information that changes
  95. between the prefix groups are the color variables. Change or expand on any of
  96. these to suit your own folder structure and vault theme!
  97. */
  98.  
  99. /* ------------------------------- 0 Prefix -------------------------------- */
  100. .nav-folder-title[data-path^="0"] {
  101. color: var(--color-sb0);
  102. --nav-item-color-hover: color-mix(
  103. in srgb,
  104. var(--color-sb0) var(--fg-contrast-amount),
  105. var(--contrast-color)
  106. );
  107. --nav-item-background-hover: color-mix(
  108. in srgb,
  109. var(--color-sb0) var(--bg-contrast-amount),
  110. transparent
  111. );
  112. --background-modifier-border-focus: color-mix(
  113. in srgb,
  114. var(--color-sb0) 40%,
  115. transparent
  116. );
  117. --nav-collapse-icon-color: color-mix(in srgb, var(--color-sb0) 60%, transparent);
  118. }
  119. .nav-folder-title[data-path^="0"]:hover {
  120. --nav-collapse-icon-color: color-mix(
  121. in srgb,
  122. var(--color-sb0) 60%,
  123. var(--contrast-color)
  124. );
  125. }
  126. .tree-item-children .nav-folder:has(.nav-folder-title[data-path^="0"]) {
  127. --nav-indentation-guide-color: color-mix(
  128. in srgb,
  129. var(--color-sb0) var(--medium-contrast-amount),
  130. transparent
  131. );
  132. }
  133. .tree-item-children
  134. .nav-folder:has(.nav-folder-title[data-path^="0"])
  135. .nav-file-title {
  136. color: color-mix(
  137. in srgb,
  138. var(--color-sb0) var(--medium-contrast-amount),
  139. var(--default-text-color)
  140. );
  141. --nav-item-background-hover: color-mix(
  142. in srgb,
  143. color-mix(in srgb, var(--color-sb0) 50%, var(--highlight))
  144. var(--bg-contrast-amount),
  145. transparent
  146. );
  147. --background-modifier-border-focus: color-mix(
  148. in srgb,
  149. var(--color-sb0) 40%,
  150. transparent
  151. );
  152. --nav-item-background-active: color-mix(
  153. in srgb,
  154. var(--color-sb0) var(--active-contrast-amount),
  155. transparent
  156. );
  157. }
  158.  
  159. /* ------------------------------- 1 Prefix -------------------------------- */
  160. .nav-folder-title[data-path^="1"] {
  161. color: var(--color-sb1);
  162. --nav-item-color-hover: color-mix(
  163. in srgb,
  164. var(--color-sb1) var(--fg-contrast-amount),
  165. var(--contrast-color)
  166. );
  167. --nav-item-background-hover: color-mix(
  168. in srgb,
  169. var(--color-sb1) var(--bg-contrast-amount),
  170. transparent
  171. );
  172. --background-modifier-border-focus: color-mix(
  173. in srgb,
  174. var(--color-sb1) 40%,
  175. transparent
  176. );
  177. --nav-collapse-icon-color: color-mix(in srgb, var(--color-sb1) 60%, transparent);
  178. }
  179. .nav-folder-title[data-path^="1"]:hover {
  180. --nav-collapse-icon-color: color-mix(
  181. in srgb,
  182. var(--color-sb1) 60%,
  183. var(--contrast-color)
  184. );
  185. }
  186. .tree-item-children .nav-folder:has(.nav-folder-title[data-path^="1"]) {
  187. --nav-indentation-guide-color: color-mix(
  188. in srgb,
  189. var(--color-sb1) var(--medium-contrast-amount),
  190. transparent
  191. );
  192. }
  193. .tree-item-children
  194. .nav-folder:has(.nav-folder-title[data-path^="1"])
  195. .nav-file-title {
  196. color: color-mix(
  197. in srgb,
  198. var(--color-sb1) var(--medium-contrast-amount),
  199. var(--default-text-color)
  200. );
  201. --nav-item-background-hover: color-mix(
  202. in srgb,
  203. color-mix(in srgb, var(--color-sb1) 50%, var(--highlight))
  204. var(--bg-contrast-amount),
  205. transparent
  206. );
  207. --background-modifier-border-focus: color-mix(
  208. in srgb,
  209. var(--color-sb1) 40%,
  210. transparent
  211. );
  212. --nav-item-background-active: color-mix(
  213. in srgb,
  214. var(--color-sb1) var(--active-contrast-amount),
  215. transparent
  216. );
  217. }
  218.  
  219. /* ------------------------------- 2 Prefix -------------------------------- */
  220. .nav-folder-title[data-path^="2"] {
  221. color: var(--color-sb2);
  222. --nav-item-color-hover: color-mix(
  223. in srgb,
  224. var(--color-sb2) var(--fg-contrast-amount),
  225. var(--contrast-color)
  226. );
  227. --nav-item-background-hover: color-mix(
  228. in srgb,
  229. var(--color-sb2) var(--bg-contrast-amount),
  230. transparent
  231. );
  232. --background-modifier-border-focus: color-mix(
  233. in srgb,
  234. var(--color-sb2) 40%,
  235. transparent
  236. );
  237. --nav-collapse-icon-color: color-mix(
  238. in srgb,
  239. var(--color-sb2) 60%,
  240. transparent
  241. );
  242. }
  243. .nav-folder-title[data-path^="2"]:hover {
  244. --nav-collapse-icon-color: color-mix(
  245. in srgb,
  246. var(--color-sb2) 60%,
  247. var(--contrast-color)
  248. );
  249. }
  250. .tree-item-children .nav-folder:has(.nav-folder-title[data-path^="2"]) {
  251. --nav-indentation-guide-color: color-mix(
  252. in srgb,
  253. var(--color-sb2) var(--medium-contrast-amount),
  254. transparent
  255. );
  256. }
  257. .tree-item-children
  258. .nav-folder:has(.nav-folder-title[data-path^="2"])
  259. .nav-file-title {
  260. color: color-mix(
  261. in srgb,
  262. var(--color-sb2) var(--medium-contrast-amount),
  263. var(--default-text-color)
  264. );
  265. --nav-item-background-hover: color-mix(
  266. in srgb,
  267. color-mix(in srgb, var(--color-sb2) 50%, var(--highlight))
  268. var(--bg-contrast-amount),
  269. transparent
  270. );
  271. --background-modifier-border-focus: color-mix(
  272. in srgb,
  273. var(--color-sb2) 40%,
  274. transparent
  275. );
  276. --nav-item-background-active: color-mix(
  277. in srgb,
  278. var(--color-sb2) var(--active-contrast-amount),
  279. transparent
  280. );
  281. }
  282.  
  283. /* ------------------------------- 3 Prefix -------------------------------- */
  284. .nav-folder-title[data-path^="3"] {
  285. color: var(--color-sb3);
  286. --nav-item-color-hover: color-mix(
  287. in srgb,
  288. var(--color-sb3) var(--fg-contrast-amount),
  289. var(--contrast-color)
  290. );
  291. --nav-item-background-hover: color-mix(
  292. in srgb,
  293. var(--color-sb3) var(--bg-contrast-amount),
  294. transparent
  295. );
  296. --background-modifier-border-focus: color-mix(
  297. in srgb,
  298. var(--color-sb3) 40%,
  299. transparent
  300. );
  301. --nav-collapse-icon-color: color-mix(in srgb, var(--color-sb3) 60%, transparent);
  302. }
  303. .nav-folder-title[data-path^="3"]:hover {
  304. --nav-collapse-icon-color: color-mix(
  305. in srgb,
  306. var(--color-sb3) 60%,
  307. var(--contrast-color)
  308. );
  309. }
  310. .tree-item-children .nav-folder:has(.nav-folder-title[data-path^="3"]) {
  311. --nav-indentation-guide-color: color-mix(
  312. in srgb,
  313. var(--color-sb3) var(--medium-contrast-amount),
  314. transparent
  315. );
  316. }
  317. .tree-item-children
  318. .nav-folder:has(.nav-folder-title[data-path^="3"])
  319. .nav-file-title {
  320. color: color-mix(
  321. in srgb,
  322. var(--color-sb3) var(--medium-contrast-amount),
  323. var(--default-text-color)
  324. );
  325. --nav-item-background-hover: color-mix(
  326. in srgb,
  327. color-mix(in srgb, var(--color-sb3) 50%, var(--highlight))
  328. var(--bg-contrast-amount),
  329. transparent
  330. );
  331. --background-modifier-border-focus: color-mix(
  332. in srgb,
  333. var(--color-sb3) 40%,
  334. transparent
  335. );
  336. --nav-item-background-active: color-mix(
  337. in srgb,
  338. var(--color-sb3) var(--active-contrast-amount),
  339. transparent
  340. );
  341. }
  342.  
  343. /* ------------------------------- 4 Prefix -------------------------------- */
  344. .nav-folder-title[data-path^="4"] {
  345. color: var(--color-sb4);
  346. --nav-item-color-hover: color-mix(
  347. in srgb,
  348. var(--color-sb4) var(--fg-contrast-amount),
  349. var(--contrast-color)
  350. );
  351. --nav-item-background-hover: color-mix(
  352. in srgb,
  353. var(--color-sb4) var(--bg-contrast-amount),
  354. transparent
  355. );
  356. --background-modifier-border-focus: color-mix(
  357. in srgb,
  358. var(--color-sb4) 40%,
  359. transparent
  360. );
  361. --nav-collapse-icon-color: color-mix(in srgb, var(--color-sb4) 60%, transparent);
  362. }
  363. .nav-folder-title[data-path^="4"]:hover {
  364. --nav-collapse-icon-color: color-mix(
  365. in srgb,
  366. var(--color-sb4) 60%,
  367. var(--contrast-color)
  368. );
  369. }
  370. .tree-item-children .nav-folder:has(.nav-folder-title[data-path^="4"]) {
  371. --nav-indentation-guide-color: color-mix(
  372. in srgb,
  373. var(--color-sb4) var(--medium-contrast-amount),
  374. transparent
  375. );
  376. }
  377. .tree-item-children
  378. .nav-folder:has(.nav-folder-title[data-path^="4"])
  379. .nav-file-title {
  380. color: color-mix(
  381. in srgb,
  382. var(--color-sb4) var(--medium-contrast-amount),
  383. var(--default-text-color)
  384. );
  385. --nav-item-background-hover: color-mix(
  386. in srgb,
  387. color-mix(in srgb, var(--color-sb4) 50%, var(--highlight))
  388. var(--bg-contrast-amount),
  389. transparent
  390. );
  391. --background-modifier-border-focus: color-mix(
  392. in srgb,
  393. var(--color-sb4) 40%,
  394. transparent
  395. );
  396. --nav-item-background-active: color-mix(
  397. in srgb,
  398. var(--color-sb4) var(--active-contrast-amount),
  399. transparent
  400. );
  401. }
  402.  
  403. /* ------------------------------- 5 Prefix -------------------------------- */
  404. .nav-folder-title[data-path^="5"] {
  405. color: var(--color-sb5);
  406. --nav-item-color-hover: color-mix(
  407. in srgb,
  408. var(--color-sb5) var(--fg-contrast-amount),
  409. var(--contrast-color)
  410. );
  411. --nav-item-background-hover: color-mix(
  412. in srgb,
  413. var(--color-sb5) var(--bg-contrast-amount),
  414. transparent
  415. );
  416. --background-modifier-border-focus: color-mix(
  417. in srgb,
  418. var(--color-sb5) 40%,
  419. transparent
  420. );
  421. --nav-collapse-icon-color: color-mix(in srgb, var(--color-sb5) 60%, transparent);
  422. }
  423. .nav-folder-title[data-path^="5"]:hover {
  424. --nav-collapse-icon-color: color-mix(
  425. in srgb,
  426. var(--color-sb5) 60%,
  427. var(--contrast-color)
  428. );
  429. }
  430. .tree-item-children .nav-folder:has(.nav-folder-title[data-path^="5"]) {
  431. --nav-indentation-guide-color: color-mix(
  432. in srgb,
  433. var(--color-sb5) var(--medium-contrast-amount),
  434. transparent
  435. );
  436. }
  437. .tree-item-children
  438. .nav-folder:has(.nav-folder-title[data-path^="5"])
  439. .nav-file-title {
  440. color: color-mix(
  441. in srgb,
  442. var(--color-sb5) var(--medium-contrast-amount),
  443. var(--default-text-color)
  444. );
  445. --nav-item-background-hover: color-mix(
  446. in srgb,
  447. color-mix(in srgb, var(--color-sb5) 50%, var(--highlight))
  448. var(--bg-contrast-amount),
  449. transparent
  450. );
  451. --background-modifier-border-focus: color-mix(
  452. in srgb,
  453. var(--color-sb5) 40%,
  454. transparent
  455. );
  456. --nav-item-background-active: color-mix(
  457. in srgb,
  458. var(--color-sb5) var(--active-contrast-amount),
  459. transparent
  460. );
  461. }
  462.  
  463. /* ------------------------------- 6 Prefix -------------------------------- */
  464. .nav-folder-title[data-path^="6"] {
  465. color: var(--color-sb6);
  466. --nav-item-color-hover: color-mix(
  467. in srgb,
  468. var(--color-sb6) var(--fg-contrast-amount),
  469. var(--contrast-color)
  470. );
  471. --nav-item-background-hover: color-mix(
  472. in srgb,
  473. var(--color-sb6) var(--bg-contrast-amount),
  474. transparent
  475. );
  476. --background-modifier-border-focus: color-mix(
  477. in srgb,
  478. var(--color-sb6) 40%,
  479. transparent
  480. );
  481. --nav-collapse-icon-color: color-mix(
  482. in srgb,
  483. var(--color-sb6) 60%,
  484. transparent
  485. );
  486. }
  487. .nav-folder-title[data-path^="6"]:hover {
  488. --nav-collapse-icon-color: color-mix(
  489. in srgb,
  490. var(--color-sb6) 60%,
  491. var(--contrast-color)
  492. );
  493. }
  494. .tree-item-children .nav-folder:has(.nav-folder-title[data-path^="6"]) {
  495. --nav-indentation-guide-color: color-mix(
  496. in srgb,
  497. var(--color-sb6) var(--medium-contrast-amount),
  498. transparent
  499. );
  500. }
  501. .tree-item-children
  502. .nav-folder:has(.nav-folder-title[data-path^="6"])
  503. .nav-file-title {
  504. color: color-mix(
  505. in srgb,
  506. var(--color-sb6) var(--medium-contrast-amount),
  507. var(--default-text-color)
  508. );
  509. --nav-item-background-hover: color-mix(
  510. in srgb,
  511. color-mix(in srgb, var(--color-sb6) 50%, var(--highlight))
  512. var(--bg-contrast-amount),
  513. transparent
  514. );
  515. --background-modifier-border-focus: color-mix(
  516. in srgb,
  517. var(--color-sb6) 40%,
  518. transparent
  519. );
  520. --nav-item-background-active: color-mix(
  521. in srgb,
  522. var(--color-sb6) var(--active-contrast-amount),
  523. transparent
  524. );
  525. }
  526.  
  527. /* ------------------------------- 7 Prefix -------------------------------- */
  528. .nav-folder-title[data-path^="7"] {
  529. color: var(--color-sb7);
  530. --nav-item-color-hover: color-mix(
  531. in srgb,
  532. var(--color-sb7) var(--fg-contrast-amount),
  533. var(--contrast-color)
  534. );
  535. --nav-item-background-hover: color-mix(
  536. in srgb,
  537. var(--color-sb7) var(--bg-contrast-amount),
  538. transparent
  539. );
  540. --background-modifier-border-focus: color-mix(
  541. in srgb,
  542. var(--color-sb7) 40%,
  543. transparent
  544. );
  545. --nav-collapse-icon-color: color-mix(
  546. in srgb,
  547. var(--color-sb7) 60%,
  548. transparent
  549. );
  550. }
  551. .nav-folder-title[data-path^="7"]:hover {
  552. --nav-collapse-icon-color: color-mix(
  553. in srgb,
  554. var(--color-sb7) 60%,
  555. var(--contrast-color)
  556. );
  557. }
  558. .tree-item-children .nav-folder:has(.nav-folder-title[data-path^="7"]) {
  559. --nav-indentation-guide-color: color-mix(
  560. in srgb,
  561. var(--color-sb7) var(--medium-contrast-amount),
  562. transparent
  563. );
  564. }
  565. .tree-item-children
  566. .nav-folder:has(.nav-folder-title[data-path^="7"])
  567. .nav-file-title {
  568. color: color-mix(
  569. in srgb,
  570. var(--color-sb7) var(--medium-contrast-amount),
  571. var(--default-text-color)
  572. );
  573. --nav-item-background-hover: color-mix(
  574. in srgb,
  575. color-mix(in srgb, var(--color-sb7) 50%, var(--highlight))
  576. var(--bg-contrast-amount),
  577. transparent
  578. );
  579. --background-modifier-border-focus: color-mix(
  580. in srgb,
  581. var(--color-sb7) 40%,
  582. transparent
  583. );
  584. --nav-item-background-active: color-mix(
  585. in srgb,
  586. var(--color-sb7) var(--active-contrast-amount),
  587. transparent
  588. );
  589. }
  590.  
  591. /* ------------------------------- x Prefix -------------------------------- */
  592. .nav-folder-title[data-path^="x"] {
  593. color: var(--color-sbx);
  594. --nav-item-color-hover: color-mix(
  595. in srgb,
  596. var(--color-sbx) var(--fg-contrast-amount),
  597. var(--contrast-color)
  598. );
  599. --nav-item-background-hover: color-mix(
  600. in srgb,
  601. var(--color-sbx) var(--bg-contrast-amount),
  602. transparent
  603. );
  604. --background-modifier-border-focus: color-mix(
  605. in srgb,
  606. var(--color-sbx) 40%,
  607. transparent
  608. );
  609. --nav-collapse-icon-color: color-mix(
  610. in srgb,
  611. var(--color-sbx) 60%,
  612. transparent
  613. );
  614. }
  615. .nav-folder-title[data-path^="x"]:hover {
  616. --nav-collapse-icon-color: color-mix(
  617. in srgb,
  618. var(--color-sbx) 60%,
  619. var(--contrast-color)
  620. );
  621. }
  622. .tree-item-children .nav-folder:has(.nav-folder-title[data-path^="x"]) {
  623. --nav-indentation-guide-color: color-mix(
  624. in srgb,
  625. var(--color-sbx) var(--medium-contrast-amount),
  626. transparent
  627. );
  628. }
  629. .tree-item-children
  630. .nav-folder:has(.nav-folder-title[data-path^="x"])
  631. .nav-file-title {
  632. color: color-mix(
  633. in srgb,
  634. var(--color-sbx) var(--medium-contrast-amount),
  635. var(--default-text-color)
  636. );
  637. --nav-item-background-hover: color-mix(
  638. in srgb,
  639. color-mix(in srgb, var(--color-sbx) 50%, var(--highlight))
  640. var(--bg-contrast-amount),
  641. transparent
  642. );
  643. --background-modifier-border-focus: color-mix(
  644. in srgb,
  645. var(--color-sbx) 40%,
  646. transparent
  647. );
  648. --nav-item-background-active: color-mix(
  649. in srgb,
  650. var(--color-sbx) var(--active-contrast-amount),
  651. transparent
  652. );
  653. }
  654.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!