API tools faq
paste
Advertisement
Guest User

UI.css

a guest
May 22nd, 2025
59
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.51 KB | None | 0 0
raw download clone embed print report
  1. /* ========================= [ General ] ========================= */
  2.  
  3. body {
  4. /* size of the page */
  5. --file-line-width: 800px;
  6.  
  7. /* Page padding*/
  8. --file-margins: var(--size-4-6);
  9.  
  10. /* line number margine */
  11. --file-folding-offset: 10px;
  12.  
  13. /*title to the left
  14. --file-header-justify: left;
  15. */
  16.  
  17. /* inline*/
  18. --inline-title-size: 2em;
  19. /*
  20. --inline-title-variant:small-caps;
  21. */
  22.  
  23. /* Tags */
  24. --tag-radius: 6px;
  25.  
  26. /* active line #new variables*/
  27. --active-line-background: hsla(var(--color-accent-hsl), 0.055);
  28.  
  29. /*Embed*/
  30. --embed-border-start: 2px solid hsla(var(--color-accent-hsl), 0.25);
  31. }
  32. /* Embed title */
  33. .markdown-embed-title {
  34. text-shadow: var(--color-accent) 1px 0 10px;
  35. color: var(--link-color);
  36. font-size: 1.2em;
  37. }
  38. .theme-dark {
  39. --color-base-00: #000;
  40. --color-base-05: #050505;
  41. --color-base-10: #0a0a0a;
  42. --color-base-20: #111;
  43. --color-base-25: #151515;
  44. --color-base-30: #1a1a1a;
  45. --color-base-35: #353535;
  46. --color-base-40: #555;
  47. --color-base-50: #666;
  48. --color-base-60: #999;
  49. --color-base-70: #bababa;
  50. --color-base-100: #e0e0e0;
  51. --color-base-110: #f0f0f0;
  52. --background-primary: var(--color-base-00);
  53. --background-secondary: var(--color-base-05);
  54. --titlebar-background: var(--color-base-00);
  55. --titlebar-background-focused: var(--color-base-10);
  56. /* Link color
  57. --link-color: #95EEEE;
  58. --link-color-hover: #BFFFFF;
  59. */
  60.  
  61. /* Indentation active color */
  62. --indentation-guide-color-active: var(--color-accent);
  63.  
  64. /*highlight background color*/
  65. --text-highlight-bg: hsla(var(--color-accent-hsl), 0.4);
  66. --background-modifier-border: hsla(var(--color-accent-hsl), 0.2);
  67. --divider-color: var(--color-base-00);
  68. --status-bar-border-color: var(--background-modifier-border);
  69.  
  70. /* Bold */
  71. --bold-color: var(--color-pink);
  72.  
  73. /*italic*/
  74. --italic-color: var(--color-cyan);
  75.  
  76. /* Inline Color */
  77. --inline-title-color: var(--color-base-110);
  78. }
  79.  
  80. /* dashes instead of bullets
  81. .list-bullet:after {
  82. content: '\2010';
  83. border-radius: 0;
  84. width: 0;
  85. }
  86.  
  87. .list-bullet:before {
  88. display: none;
  89. }
  90.  
  91. .list-bullet {
  92. color: var(--text-normal);
  93. }
  94.  
  95. .cm-formatting-list .list-bullet:after {
  96. display: none;
  97. }
  98. */
  99.  
  100. /* search resulte border */
  101. .cm-s-obsidian span.obsidian-search-match-highlight {
  102. box-shadow: 0 0 0px 1.5px var(--text-accent);
  103. border-radius: 1px;
  104. }
  105.  
  106. /* Link */
  107. .theme-light,
  108. .theme-dark {
  109. --link-decoration: none;
  110. --link-decoration-hover: none;
  111. --link-external-decoration: none;
  112. --link-external-decoration-hover: underline;
  113. }
  114.  
  115. /* ========================= [ Callouts ] ========================= */
  116. body {
  117. /*callout (linked with .p*/
  118. --callout-border-width: 1px;
  119. --callout-padding: 5px;
  120. --callout-radius: 5px;
  121. --callout-tip: 255, 53, 98;
  122. }
  123. .markdown-rendered p {
  124. margin-block-start: 0px;
  125. margin-block-end: 0px;
  126. }
  127. /*
  128. author: Adonis, Anubis
  129. source: https://discord.com/channels/686053708261228577/702656734631821413/1040275500297375856
  130. support Anubis: https://www.buymeacoffee.com/anubisnekhet
  131. */
  132.  
  133. .callout:not(.is-collapsible) {
  134. padding: 0px;
  135. }
  136. .callout:not(.is-collapsible) .callout-content {
  137. padding: 0 var(--callout-title-padding) var(--callout-title-padding)
  138. var(--callout-title-padding);
  139. }
  140. .callout:not(.is-collapsible) .callout-title {
  141. background-color: rgba(var(--callout-color), 0 0.5);
  142. padding: var(--callout-title-padding);
  143. cursor: pointer;
  144. }
  145. .callout:not(.is-collapsible) .callout-title .callout-title-inner {
  146. font-weight: normal;
  147. }
  148.  
  149. .callout:not(.is-collapsible) {
  150. border-color: rgba(var(--callout-color), 0.4);
  151. border-width: 1px;
  152. border-radius: var(--callout-radius);
  153. background-color: rgba(var(--ctp-mantle), 0.4);
  154. }
  155.  
  156. .callout-content {
  157. padding: var(--callout-title-padding) var(--callout-title-padding)
  158. var(--callout-title-padding) calc(var(--callout-title-padding) * 1.5);
  159. border-top: 1px dashed rgba(var(--callout-color), 0.4);
  160. }
  161.  
  162. .callout-fold {
  163. padding-right: 0px;
  164. }
  165.  
  166. .callout-title-inner {
  167. flex-grow: var(--anp-callout-fold-position, unset);
  168. }
  169.  
  170. .callout {
  171. --callout-title-padding: var(--size-4-2);
  172. }
  173. .callout.is-collapsible {
  174. border-color: rgba(var(--callout-color), 0.4);
  175. border-width: 1px;
  176. border-radius: var(--callout-radius);
  177. background-color: rgba(var(--ctp-mantle), 0.4);
  178. --bold-weight: bolder;
  179. }
  180. .callout.is-collapsible .callout-fold {
  181. padding-right: 0px;
  182. }
  183. .callout.is-collapsible .callout-title-inner {
  184. flex-grow: var(--anp-callout-fold-position, unset);
  185. }
  186. .callout.is-collapsible.is-collapsed {
  187. padding: 0;
  188. }
  189. .callout.is-collapsible.is-collapsed .callout-title {
  190. background-color: rgba(var(--callout-color), 0.1);
  191. padding: var(--callout-title-padding);
  192. cursor: pointer;
  193. }
  194. .callout.is-collapsible.is-collapsed .callout-content {
  195. display: none;
  196. }
  197. .callout.is-collapsible:not(.is-collapsed) {
  198. padding: 0px 0px var(--callout-title-padding) 0px;
  199. }
  200. .callout.is-collapsible:not(.is-collapsed) .callout-title {
  201. background-color: rgba(var(--callout-color), 0.1);
  202. padding: var(--callout-title-padding);
  203. border-color: rgba(var(--callout-color), 0.4);
  204. cursor: pointer;
  205. }
  206. .callout.is-collapsible:not(.is-collapsed) .callout-content {
  207. padding: var(--callout-title-padding) var(--callout-title-padding) 0
  208. calc(var(--callout-title-padding) * 1.5);
  209. border-top: 1px dashed rgba(var(--callout-color), 0.4);
  210. }
  211. .callout:not(.is-collapsible) {
  212. padding: 0px;
  213. }
  214. .callout:not(.is-collapsible) .callout-title {
  215. background-color: rgba(var(--callout-color), 0.1);
  216. padding: var(--callout-title-padding);
  217. border-color: rgba(var(--callout-color), 0.4);
  218. }
  219. .callout .list-collapse-indicator {
  220. margin-left: -35px;
  221. padding-right: 3px;
  222. }
  223.  
  224. /*# sourceMappingURL=anuppuccin-sleek-callout.css.map */
  225.  
  226. /* ========================= [ Headings ] ========================= */
  227.  
  228. body {
  229. /*
  230. --h1-size: 1.5em;
  231. --h2-size: 1.3em;
  232. --h3-size: 1.2em;
  233. --h4-size: 1.1em;
  234. --h5-size: 1em;
  235. --h6-size: 1em;
  236. --h1-line-height: 1.5;
  237. --h2-line-height: 1.5;
  238. --h3-line-height: 1.5;
  239. --h4-line-height: 1.5;
  240. --H-font: inherit;/*new var
  241. --H-weight: 400;/*new var
  242. --h1-font: var(--H-font);
  243. --h2-font: var(--H-font);
  244. --h3-font: var(--H-font);
  245. --h4-font: var(--H-font);
  246. --h5-font: var(--H-font);
  247. --h6-font: var(--H-font);
  248. --h1-weight: var(--H-weight);
  249. --h2-weight: var(--H-weight);
  250. --h3-weight: var(--H-weight);
  251. --h4-weight: var(--H-weight);
  252. --h5-weight: var(--H-weight);
  253. --h6-weight: var(--H-weight);
  254. */
  255. --h1-color: var(--h1-color-d);
  256. --h2-color: var(--h2-color-d);
  257. --h3-color: var(--h3-color-d);
  258. --h4-color: var(--h4-color-d);
  259. --h5-color: var(--h5-color-d);
  260. --h6-color: var(--h6-color-d);
  261. }
  262.  
  263. .theme-dark {
  264. /*tented headings*/
  265. --h1-color-d: #f4ebff;
  266. --h2-color-d: #fff2f8;
  267. --h3-color-d: #f2ffff;
  268. --h4-color-d: #f2fffa;
  269. --h5-color-d: #fffdf2;
  270. --h6-color-d: #faf2ff;
  271. }
  272.  
  273. /*H1 normal underline
  274. .markdown-rendered h1,
  275. .HyperMD-header-1 {
  276. border-bottom: var(--hr-thickness) solid var(--background-modifier-border);
  277. padding-bottom: 2px;
  278. }*/
  279.  
  280. /* Gradian Underline for headings
  281. /*Underline headings
  282. .markdown-preview-view h1, .HyperMD-header.HyperMD-header-1,
  283. .markdown-preview-view h2, .HyperMD-header.HyperMD-header-2,
  284. .markdown-preview-view h3, .HyperMD-header.HyperMD-header-3,
  285. .markdown-preview-view h4, .HyperMD-header.HyperMD-header-4{
  286. border-bottom: 1px solid;
  287. border-width: 1px;
  288. border-image-slice: 1;
  289. border-image-source: linear-gradient(to right, var(--color-accent), #100e17, #100e17, #100e17);
  290. }
  291. /*Gradian Underline
  292. .markdown-preview-view h1, .HyperMD-header.HyperMD-header-1 {
  293. border-width: 2px;
  294. border-image-source: linear-gradient(to right, var(--h1-color-d), #100e17 );
  295. }
  296. .markdown-preview-view h2, .HyperMD-header.HyperMD-header-2 { border-image-source: linear-gradient(to right, var(--h2-color-d), #100e17 30%); }
  297. .markdown-preview-view h3, .HyperMD-header.HyperMD-header-3 { border-image-source: linear-gradient(to right, var(--h3-color-d), #100e17 20%); }
  298. .markdown-preview-view h4, .HyperMD-header.HyperMD-header-4 { border-image-source: linear-gradient(to right, var(--h4-color-d), #100e17 10%); }
  299. */
  300.  
  301. /* heading indicator ⋮*/
  302. .markdown-preview-view h1::before, .HyperMD-header.HyperMD-header-1::before { content: "₊"; color: #b446f8;}
  303. .markdown-preview-view h2::before, .HyperMD-header.HyperMD-header-2::before { content: "₊"; color: #e54f9b;}
  304. .markdown-preview-view h3::before, .HyperMD-header.HyperMD-header-3::before { content: "₊"; color: #51e1e9;}
  305. .markdown-preview-view h4::before, .HyperMD-header.HyperMD-header-4::before { content: "₊"; color: #33eea3;}
  306. .markdown-preview-view h5::before, .HyperMD-header.HyperMD-header-5::before { content: "₊"; color: #fff5ba;}
  307. .markdown-preview-view h6::before, .HyperMD-header.HyperMD-header-6::before { content: "₊"; color: #edd4fe;}
  308.  
  309. .markdown-preview-view h1::after, .HyperMD-header.HyperMD-header-1::after { content: "₊ ᴴ¹"; color: var(--color-base-35);}
  310. .markdown-preview-view h2::after, .HyperMD-header.HyperMD-header-2::after { content: "₊ ᴴ²"; color: var(--color-base-35);}
  311. .markdown-preview-view h3::after, .HyperMD-header.HyperMD-header-3::after { content: "₊ ᴴ³"; color: var(--color-base-35);}
  312. .markdown-preview-view h4::after, .HyperMD-header.HyperMD-header-4::after { content: "₊ ᴴ⁴"; color: var(--color-base-35);}
  313. .markdown-preview-view h5::after, .HyperMD-header.HyperMD-header-5::after { content: "₊ ᴴ⁵"; color: var(--color-base-35);}
  314. .markdown-preview-view h6::after, .HyperMD-header.HyperMD-header-6::after { content: "₊ ᴴ⁶"; color: var(--color-base-35);}
  315.  
  316. /*active line background*/
  317. .cm-active {
  318. background: var(--active-line-background);
  319. }
  320.  
  321. .is-flashing {
  322. background-color: var(--text-highlight-bg);
  323. }
  324.  
  325. /* ========================= [ PROPRITIES ] ========================= */
  326.  
  327. /*
  328. author: sailKite
  329. source: https://discord.com/channels/686053708261228577/702656734631821413/1155496243691266158
  330. two colums proprities
  331. */
  332. @media (min-width: 700px) {
  333. [data-type="markdown"] .metadata-properties {
  334. display: grid;
  335. grid: auto-flow / 50% 50%;
  336. gap: 0px 0px;
  337. }
  338.  
  339. [data-type="markdown"] .metadata-properties .metadata-property-value {
  340. align-items: start;
  341. }
  342.  
  343. body {
  344. --metadata-label-width: 6.5em;
  345. }
  346. }
  347. /* ========================= [ TABLES ] ========================= */
  348.  
  349. body {
  350. --table-row-background-hover: var(--active-line-background);
  351. --table-row-alt-background-hover: var(--active-line-background);
  352. --table-add-button-background: var(--background-modifier-border);
  353. --table-column-min-width: 3ch;
  354. --table-border-color: hsla(var(--color-accent-hsl), 0.3);
  355. }
  356.  
  357. /*Center tables on the page
  358. .markdown-source-view table,
  359. .markdown-reading-view table {
  360. margin-left: auto;
  361. margin-right: auto;
  362. }*/
  363.  
  364. /*
  365. author: FireIsGood
  366. source: https://discord.com/channels/686053708261228577/702656734631821413/1112164539975340032
  367. */
  368.  
  369. :root table {
  370. border-collapse: separate;
  371. border-spacing: 0;
  372. }
  373. th:first-of-type {
  374. border-top-left-radius: 8px;
  375. }
  376. th:last-of-type {
  377. border-top-right-radius: 8px;
  378. }
  379. tr:last-of-type td:first-of-type {
  380. border-bottom-left-radius: 8px;
  381. }
  382. tr:last-of-type td:last-of-type {
  383. border-bottom-right-radius: 8px;
  384. }
  385.  
  386. :root :is(td, th) {
  387. border-width: 0 var(--table-border-width) var(--table-border-width) 0;
  388. }
  389.  
  390. /* ========================= [ Tabs ] ========================= */
  391. body {
  392. /*tabs and title bar height */
  393. --header-height: 30px;
  394.  
  395. /* tabs size */
  396. --tab-stacked-pane-width: 850px;
  397.  
  398. /* tab text color */
  399. --tab-text-color-focused-active-current: var(--icon-color-active);
  400. }
  401.  
  402. .mod-root .workspace-tab-header-container-inner {
  403. padding: 0px 10px 0px 10px;
  404. }
  405. .workspace-tab-header-container-inner {
  406. margin: 0px -5px calc(var(--tab-outline-width) * -1);
  407. }
  408.  
  409. /* margins for tabs in sidebars */
  410. .mod-left-split .workspace-tab-header-container-inner,
  411. .mod-right-split .workspace-tab-header-container-inner {
  412. padding: 1px 0 1px;
  413. margin: 0px 0 0 0;
  414. }
  415.  
  416. /* tab active indicator */
  417. .workspace-tab-header.is-active .workspace-tab-header-inner {
  418. border: 1px solid hsla(var(--color-accent-hsl), 0.1);
  419. border-radius: 8px;
  420. background-color: hsla(var(--color-accent-hsl), 0.15);
  421. }
  422.  
  423. .is-focused
  424. .mod-active
  425. .workspace-tab-header.is-active
  426. .workspace-tab-header-inner-icon {
  427. color: var(--icon-color-active);
  428. }
  429.  
  430. /* vertical tabs */
  431. .workspace
  432. .mod-root
  433. .workspace-tabs.mod-stacked
  434. .workspace-tab-container
  435. .workspace-tab-header-inner-title {
  436. text-orientation: upright;
  437. letter-spacing: -3px;
  438. text-transform: uppercase;
  439. }
  440.  
  441. /* Pin tabs */
  442. .workspace .mod-root .workspace-tab-header:has(.mod-pinned),
  443. .workspace-tab-header:has(.mod-pinned) .workspace-tab-header-inner {
  444. flex: unset;
  445. width: 90px;
  446. min-width: unset;
  447. border-color: hsla(var(--color-accent-hsl), .4);
  448. border-width: 2px;
  449. }
  450. /* Hide unpin button */
  451. div[aria-label="Unpin"] {
  452. display: none;
  453. }
  454.  
  455. /*
  456. author: sailKite
  457. source: https://discord.com/channels/686053708261228577/702656734631821413/1170914511788724254
  458. autohide tabs on the sidebars
  459.  
  460.  
  461. .workspace-tabs:not(.mod-top) .workspace-tab-header-container {
  462. height: 2px;
  463. transition: height 100ms ease-out;
  464.  
  465. &:hover {
  466. height: var(--header-height);
  467. }
  468.  
  469. &::after {
  470. content: "";
  471. display: block;
  472. width: 100%;
  473. height: calc(var(--size-4-4) + 10px);
  474. top: 100%;
  475. position: absolute;
  476. z-index: 1;
  477. }
  478. }
  479. */
  480.  
  481. /* ========================= [ FILE MANAGER ] ========================= */
  482.  
  483. /* = Vault Name*/
  484.  
  485. /* folder name
  486. .nav-folder-children .nav-folder-title-content {color: var(--color-base-110);}
  487. .nav-folder-children .nav-file-title-content { color: var(--color-base-100);}
  488.  
  489. /*₪⌬🗎ʭ ◍▤▨◬⩨⫼≡⏣
  490. .nav-folder-children .nav-folder-title-content::before {color: var(--interactive-accent); content: '▨ ';}
  491. .nav-folder-children .nav-file-title-content:first-child::before {color: var(--interactive-accent); content: '';}
  492. */
  493.  
  494. /* focused note
  495. body {
  496. --nav-item-color-active: #1e1e1e;
  497. --nav-item-background-active: #d1d2f9ef;
  498. }
  499. */
  500.  
  501. /* folder icons
  502. body:not(.nav-folder-indicators) .nav-folder.is-collapsed .nav-folder-title-content::before,
  503. body:not(.nav-folder-indicators) .nav-folder .nav-folder-title-content::before {
  504. display: inline-block;
  505. content: "";
  506. margin-right: 8px;
  507. vertical-align: text-bottom;
  508. height: 16px;
  509. width: 16px;
  510. background-color: currentColor;
  511. color: var(--interactive-accent)
  512. }
  513. body:not(.nav-folder-indicators) .nav-folder.is-collapsed .nav-folder-title .nav-folder-title-content::before {
  514. -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Efolder%3C/title%3E%3Cpath d='M11.17,6l3.42,3.41.58.59H28V26H4V6h7.17m0-2H4A2,2,0,0,0,2,6V26a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2H16L12.59,4.59A2,2,0,0,0,11.17,4Z' transform='translate(0)'/%3E%3Crect id='_Transparent_Rectangle_' data-name='<Transparent Rectangle>' class='cls-1' width='32' height='32'/%3E%3C/svg%3E") no-repeat;
  515. }
  516. body:not(.nav-folder-indicators) .nav-folder .nav-folder-title .nav-folder-title-content::before {
  517. -webkit-mask: url("data:image/svg+xml,%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; %7D %3C/style%3E%3C/defs%3E%3Cpath d='M28,8H20.8284L17.4143,4.5859A2,2,0,0,0,16,4H4A2,2,0,0,0,2,6V26a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10A2,2,0,0,0,28,8ZM8,26V14h8v6.17l-2.59-2.58L12,19l5,5,5-5-1.41-1.41L18,20.17V14a2.0025,2.0025,0,0,0-2-2H8a2.0025,2.0025,0,0,0-2,2V26H4V6H16l4,4h8v2H22v2h6V26Z'/%3E%3Crect id='_Transparent_Rectangle_' data-name='<Transparent Rectangle>' class='cls-1' width='32' height='32'/%3E%3C/svg%3E") no-repeat;
  518. }
  519. body:not(.nav-folder-indicators) .nav-folder-collapse-indicator {
  520. display: none;
  521. }
  522. body:not(.nav-folder-indicators) .nav-folder-title {
  523. padding-left: 4px;
  524. }*/
  525.  
  526. /* ========================= [ Plugins ] ========================= */
  527.  
  528. /* dataview table style */
  529. .table-view-table > thead > tr > th {
  530. font-size: medium;
  531. border: 1px solid var(--table-header-border-color);
  532. }
  533.  
  534. .table-view-table > tbody > tr > td {
  535. border: 1px solid var(--table-border-color);
  536. }
  537.  
  538. /* Tag Folder */
  539. .nav-files-container {
  540. padding-left: 2px;
  541. padding-right: 2px;
  542. }
  543.  
  544. .tree-item-children {
  545. margin-left: 2px;
  546. }
  547.  
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!