forks/sorcery
git clone https://git.gae.moe/forks/sorcery
e759987
darwin-flake
1@font-face { 2font-family : "InterVariable" ; 3src : local ( "Inter Variable" ), local ( "InterVariable" ), url ( "/fonts/inter/InterVariable.woff2" ) format ( "woff2" ); 4font-weight : 100 900 ; 5font-style : normal; 6font-display : swap; 7} 8@font-face { 9font-family : "InterVariable" ; 10src : local ( "Inter Variable Italic" ), local ( "InterVariableItalic" ), url ( "/fonts/inter/InterVariable-Italic.woff2" ) format ( "woff2" ); 11font-weight : 100 900 ; 12font-style : italic; 13font-display : swap; 14} 15@supports ( font-variation-settings : normal) { 16@font-face { 17font-family : "iocgnMonoVariable" ; 18src : url ( "/fonts/iocgnMono/iocgnMono-Variable.woff2" ) format ( "woff2" ); 19font-weight : 200 800 ; 20font-style : normal; 21font-display : swap; 22} 23} 24 25@font-face { 26font-family : "iocgnMono" ; 27src : url ( "/fonts/iocgnMono/iocgnMono-Regular.woff2" ) format ( "woff2" ); 28font-weight : 400 ; 29font-style : normal; 30font-display : swap; 31} 32 33@font-face { 34font-family : "iocgnMono" ; 35src : url ( "/fonts/iocgnMono/iocgnMono-Medium.woff2" ) format ( "woff2" ); 36font-weight : 500 ; 37font-style : normal; 38font-display : swap; 39} 40 41@font-face { 42font-family : "iocgnMono" ; 43src : url ( "/fonts/iocgnMono/iocgnMono-SemiBold.woff2" ) format ( "woff2" ); 44font-weight : 600 ; 45font-style : normal; 46font-display : swap; 47} 48 49@font-face { 50font-family : "iocgnMono" ; 51src : url ( "/fonts/iocgnMono/iocgnMono-Bold.woff2" ) format ( "woff2" ); 52font-weight : 700 ; 53font-style : normal; 54font-display : swap; 55} 56 57/* palette & syntax colours lifted from char.lt */ 58: root { 59--bg-col : # 100e11 ; 60--bg-col-2 : # 181419 ; 61--bg-col-3 : # 211a22 ; 62 63--fg-col : # f3eef2 ; 64--fg-col-mute : # 958792 ; 65 66--accent-col : # ff9df5 ; 67--accent-col-mute-1 : # b86caf ; 68--accent-col-mute-2 : # 493045 ; 69--accent-col-fade-1 : # ffd0fb ; 70 71--hl-comment : # 9da8bb ; 72--hl-keyword : # 9bedff ; 73--hl-builtin : # ff94d1 ; 74--hl-string : # 95ffc3 ; 75--hl-ident : # d8a8ff ; 76--hl-number : var ( --hl-string ); 77 78--font-mono : "iocgnMonoVariable" , "iocgnMono" , ui-monospace, "SF Mono" , "Cascadia Code" , "Roboto Mono" , monospace; 79} 80 81* { 82box-sizing : border-box; 83} 84 85html { 86color-scheme : dark; 87font-family : "InterVariable" , "Inter" , sans-serif; 88line-height : 1.5 ; 89text-rendering : optimizeLegibility; 90-webkit-text-size-adjust : 100 % ; 91text-size-adjust : 100 % ; 92background : var ( --bg-col ); 93color : var ( --fg-col ); 94} 95 96body { 97max-width : 64 rem ; 98margin : 0 auto; 99padding : 1.5 rem 1.25 rem 4 rem ; 100} 101 102:: selection { 103background-color : # 6d3567 ; 104} 105 106/* type scale: 0.75 / 0.875 / 1 / 1.5 / 1.75rem. Ioskeley has a larger 107x-height than Inter, so mono sits a step down to read as the same size. */ 108h1 { font-size : 1.75 rem ; font-weight : 520 ; margin : 0 0 0.75 em ; line-height : 1.08 ; } 109h1 : has ( + . desc ) { margin-bottom : 0.25 em ; } 110h2 { font-size : 1.5 rem ; font-weight : 650 ; margin-top : 2 rem ; } 111/* repositories page: user headings sit directly on their list */ 112h2 : has ( + . catalog ) { margin-bottom : 0 ; } 113h2 : has ( + . catalog ) > a { color : inherit; } 114h2 : has ( + . catalog ) > a : hover { color : var ( --accent-col ); } 115 116pre , code , kbd , . code , . cid , . sha , . path , table . diff , table . commit-meta td { 117font-family : var ( --font-mono ); 118font-size : 0.95 rem ; 119font-weight : 500 ; 120} 121time { font-variant-numeric : tabular-nums; } 122 123/* chrome links are bare and signal with colour; only prose underlines */ 124a { color : var ( --accent-col ); text-decoration : none; } 125a : hover { color : var ( --accent-col-fade-1 ); } 126. readme a { 127text-decoration : underline; 128text-decoration-thickness : 1 px ; 129text-underline-offset : 0.2 em ; 130} 131 132progress { accent-color : var ( --accent-col ); } 133 134noscript . callout { 135margin : 0 0 1.5 rem ; 136padding : 0.6 rem 1 rem ; 137background : var ( --bg-col-2 ); 138border : 1 px solidvar ( --accent-col-mute-2 ); 139color : var ( --fg-col-mute ); 140font-size : 0.875 rem ; 141 142p { margin : 0 ; } 143} 144 145/* ref switcher (static only), crumbs, stats, actions; 146its rule separates the chrome from the content below */ 147. topbar { 148display : flex; 149flex-wrap : wrap; 150gap : 0.75 rem ; 151align-items : center; 152margin : 0 0 1.5 rem ; 153padding : 0 0 0.75 rem ; 154border-bottom : 1 px solidvar ( --accent-col-mute-2 ); 155font-size : 0.875 rem ; 156} 157. topbar : has ( + . languages ) { margin-bottom : 0 ; border-bottom : none; } 158. topbar nav . crumbs { margin : 0 ; white-space : nowrap; overflow-x : auto; } 159. topbar > . actions { 160display : flex; 161gap : 0.75 rem ; 162margin-left : auto; 163white-space : nowrap; 164} 165. topbar > . actions : empty { display : none; } 166 167a . back { 168display : inline-block; 169margin-bottom : 0.75 rem ; 170color : var ( --fg-col-mute ); 171} 172a . back : hover { color : var ( --accent-col ); } 173 174details . switcher { position : relative; } 175details . switcher > summary { 176list-style : none; 177cursor : pointer; 178background : var ( --bg-col-2 ); 179border : 1 px solidvar ( --accent-col-mute-2 ); 180padding : 0.2 em 0.75 em ; 181font-weight : 650 ; 182} 183details . switcher > summary :: -webkit-details-marker { display : none; } 184details . switcher > summary :: after { content : " ▾" ; color : var ( --fg-col-mute ); } 185details . switcher [open ]> summary { background : var ( --bg-col-3 ); } 186details . switcher > . menu { 187position : absolute; 188z-index : 1 ; 189top : calc ( 100 % + 0.25 rem ); 190left : 0 ; 191min-width : 14 rem ; 192max-height : 60 vh ; 193overflow-y : auto; 194background : var ( --bg-col-2 ); 195border : 1 px solidvar ( --accent-col-mute-2 ); 196padding : 0.4 rem 0 ; 197display : flex; 198flex-direction : column; 199} 200details . switcher > . menu strong { 201padding : 0.3 rem 0.75 rem 0.1 rem ; 202color : var ( --fg-col-mute ); 203font-size : 0.75 rem ; 204text-transform : uppercase; 205letter-spacing : 0.05 em ; 206} 207details . switcher > . menu a { 208padding : 0.15 rem 0.75 rem ; 209color : var ( --fg-col ); 210white-space : nowrap; 211} 212details . switcher > . menu a : hover { background : var ( --accent-col-mute-2 ); } 213details . switcher > . menu a . current { color : var ( --accent-col ); font-weight : 650 ; } 214details . switcher > . menu a . all { color : var ( --fg-col-mute ); margin-top : 0.25 rem ; } 215 216nav . crumbs { color : var ( --fg-col-mute ); } 217nav . crumbs . cur { color : var ( --fg-col ); } 218 219. view-stats { 220display : inline-flex; 221align-items : center; 222gap : 0.75 rem ; 223color : var ( --fg-col-mute ); 224white-space : nowrap; 225} 226. snapshot-commit { 227display : flex; 228align-items : baseline; 229flex-wrap : wrap; 230gap : 0.4 rem ; 231margin : 0 0 0.75 rem ; 232color : var ( --fg-col-mute ); 233font-size : 0.875 rem ; 234} 235. view-stats > span + span :: before { 236content : "" ; 237width : 3 px ; 238height : 3 px ; 239border : 1.5 px solidvar ( --fg-col-mute ); 240border-radius : 50 % ; 241background : var ( --fg-col-mute ); 242} 243. view-stats > span { 244display : inline-flex; 245align-items : center; 246gap : 0.75 rem ; 247} 248. snapshot-commit . commit-message { color : var ( --fg-col ); } 249. snapshot-commit a . commit-message : hover { color : var ( --accent-col ); } 250. snapshot-sha { 251margin-left : auto; 252padding : 0.1 em 0.55 em ; 253background : var ( --bg-col-2 ); 254color : var ( --fg-col-mute ); 255} 256a . snapshot-sha : hover { color : var ( --accent-col ); } 257. history-status { min-height : 1.3 rem ; margin-top : 0 ; } 258. history-log { margin-top : 0.25 rem ; } 259. history-log . deleted { color : var ( --hl-builtin ); } 260@media ( max-width : 760 px ) { 261. snapshot-sha { margin-left : 0 ; } 262} 263. meta { 264display : flex; 265align-items : center; 266gap : 0.75 rem ; 267color : var ( --fg-col-mute ); 268font-size : 0.875 rem ; 269} 270 271/* Small circle separators between adjacent segments, as tangled. The 272segments are inline-flex so the dot centres geometrically against the 273text; vertical-align can't do this portably. */ 274. meta > span , 275. who > * { 276display : inline-flex; 277align-items : center; 278} 279. meta > span + span :: before , 280. who > * + * :: before , 281nav . crumbs > . label :: before { 282content : "" ; 283width : 3 px ; 284height : 3 px ; 285border : 1.5 px solidvar ( --fg-col-mute ); 286border-radius : 50 % ; 287background : var ( --fg-col-mute ); 288margin-right : 0.75 rem ; 289} 290nav . crumbs > . label :: before { 291display : inline-block; 292vertical-align : middle; 293margin : 0 0.75 rem ; 294} 295. desc { color : var ( --fg-col-mute ); margin : 0 ; } 296 297/* repo header: name and description beside the clone command, which is 298read once and shouldn't outweigh them */ 299header . repo { 300display : grid; 301grid-template-columns : minmax ( 50 % , 1 fr ) auto; 302gap : 1 rem 2 rem ; 303align-items : center; 304margin : 0 0 1.5 rem ; 305} 306@media ( max-width : 760 px ) { 307header . repo { grid-template-columns : 1 fr ; } 308} 309 310/* root pages: file listing beside the recent-commits log */ 311/* columns stretch to the row height so the divider spans it fully */ 312. overview { 313display : grid; 314grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr )); 315} 316/* structural boundary: stronger than the per-row rules, like .readme's */ 317. overview > . files { 318padding-right : 1.25 rem ; 319border-right : 1 px solidvar ( --accent-col-mute-1 ); 320} 321. overview > . commits { 322padding-left : 1.25 rem ; 323} 324@media ( max-width : 920 px ) { 325. overview { grid-template-columns : minmax ( 0 , 1 fr ); gap : 2 rem ; } 326. overview > . files { padding-right : 0 ; border-right : 0 ; } 327. overview > . commits { padding-left : 0 ; } 328} 329 330/* the overview owns its divider from a following readme, so the readme's 331margin sits below the line rather than above it */ 332. overview : has ( + . readme ) { 333padding-bottom : 1.5 rem ; 334border-bottom : 1 px solidvar ( --accent-col-mute-1 ); 335} 336. overview + . readme { 337margin-top : 1.5 rem ; 338border-top : 0 ; 339padding-top : 0 ; 340} 341 342. overview h2 , 343h2 . file-heading { 344margin : 0 0 0.25 rem ; 345font-size : 0.875 rem ; 346font-weight : 650 ; 347color : var ( --fg-col-mute ); 348text-align : right; 349} 350. overview h2 > a { color : inherit; } 351. overview h2 > a : hover { color : var ( --accent-col ); } 352ol . log { list-style : none; margin : 0 ; padding : 0 ; } 353ol . log li { 354padding : 0.4 rem 0 ; 355border-top : 1 px solidvar ( --accent-col-mute-2 ); 356} 357ol . log . cid { color : var ( --hl-ident ); } 358ol . log . sha { color : var ( --fg-col-mute ); } 359ol . log a : is (. cid , . sha ): hover { color : var ( --accent-col ); } 360ol . log . msg { display : block; overflow : hidden; text-overflow : ellipsis; white-space : nowrap; } 361ol . log . who { 362float : right; 363display : inline-flex; 364align-items : center; 365gap : 0.5 rem ; 366color : var ( --fg-col-mute ); 367font-size : 0.875 rem ; 368} 369ol . log . who > * + * :: before { margin-right : 0.5 rem ; } 370/* hold ten two-line rows so paging doesn't shift the readme below */ 371. overview > . commits > ol . log . paginated : not (. exhausted ) { 372min-height : calc ( 10 * ( 2 lh + 0.8 rem + 1 px )); 373} 374. log-pagination { justify-content : space-between; margin : 0.4 rem 0 0 ; } 375button . log-page-button { 376appearance : none; 377border : 0 ; 378padding : 0 ; 379background : none; 380color : var ( --accent-col ); 381font : inherit; 382cursor : pointer; 383} 384button . log-page-button : hover { color : var ( --accent-col-fade-1 ); } 385button . log-page-button : disabled { color : var ( --fg-col-mute ); cursor : default; } 386 387. catalog { 388margin : 0 ; 389padding : 0 ; 390list-style : none; 391} 392. catalog a { 393display : grid; 394/* fixed, not auto: each row is its own grid, and relative times vary in width */ 395grid-template-columns : minmax ( 10 rem , 1 fr ) minmax ( 0 , 4 fr ) 8.5 rem ; 396gap : 0.75 rem ; 397width : 100 % ; 398padding : 0.25 rem 0 ; 399border-top : 1 px solidvar ( --accent-col-mute-2 ); 400} 401. catalog . msg , . catalog time { color : var ( --fg-col-mute ); } 402. catalog time { text-align : right; white-space : nowrap; } 403. catalog a : hover { background : var ( --bg-col-2 ); } 404. catalog a : focus-visible { outline : 1 px solidvar ( --accent-col ); outline-offset : 2 px ; } 405@media ( max-width : 35 rem ) { 406. catalog a { grid-template-columns : 1 fr auto; gap : 0 0.75 rem ; } 407. catalog . msg { grid-column : 1 / -1 ; } 408. catalog time { grid-row : 1 ; grid-column : 2 ; } 409} 410 411table . list { border-collapse : collapse; width : 100 % ; } 412/* rows carry their top edge: a line under the heading, none after the last row */ 413table . list td { 414padding : 0.25 rem 0.75 rem 0.25 rem 0 ; 415border-top : 1 px solidvar ( --accent-col-mute-2 ); 416} 417table . list td . size , table . list td . date { 418color : var ( --fg-col-mute ); 419text-align : right; 420white-space : nowrap; 421font-variant-numeric : tabular-nums; 422} 423table . list td . msg { color : var ( --fg-col-mute ); } 424 425/* blob view: each logical line shares a grid row with its number, so wrapped 426source makes that row taller without displacing the following numbers */ 427pre . code { 428display : grid; 429grid-template-columns : max-contentminmax ( 0 , 1 fr ); 430margin : 0 ; 431padding : 1 rem 0 ; 432background : var ( --bg-col-2 ); 433border-left : 2 px solidvar ( --accent-col-mute-1 ); 434line-height : 1.45 ; 435} 436. code-line { display : contents; } 437. code-break { 438position : absolute; 439width : 0 ; 440height : 0 ; 441overflow : hidden; 442} 443pre . code . ln { 444padding-left : 0.75 rem ; 445padding-right : 0.6 rem ; 446text-align : right; 447color : var ( --fg-col-mute ); 448user-select : none; 449border-right : 1 px solidvar ( --accent-col-mute-2 ); 450} 451pre . code a . ln : hover { color : var ( --fg-col ); } 452pre . code a . ln : target { color : var ( --accent-col ); font-weight : 600 ; } 453. code-text { 454min-width : 0 ; 455min-height : 1 lh ; 456padding-left : 1 rem ; 457padding-right : 1 rem ; 458white-space : pre-wrap; 459overflow-wrap : anywhere; 460} 461 462. image-preview , . file-download { 463padding : 2 rem ; 464text-align : center; 465background : var ( --bg-col-2 ); 466border : 1 px solidvar ( --accent-col-mute-2 ); 467} 468 469. image-preview img { max-width : 100 % ; height : auto; } 470. file-download p { margin : 0 0 1 rem ; color : var ( --fg-col-mute ); } 471. file-download a { 472display : inline-block; 473padding : 0.5 rem 1 rem ; 474border : 1 px solidvar ( --accent-col-mute-1 ); 475font-weight : 650 ; 476} 477 478/* markdown blob pages: no-JS rendered/code tabs */ 479. markdown-view { 480display : grid; 481grid-template-columns : repeat ( 2 , max-content) 1 fr ; 482gap : 0 0.25 rem ; 483} 484. markdown-view > input { 485position : absolute; 486width : 1 px ; 487height : 1 px ; 488opacity : 0 ; 489} 490. markdown-view > label { 491cursor : pointer; 492padding : 0.2 em 0.75 em ; 493border : 1 px solidvar ( --accent-col-mute-2 ); 494color : var ( --fg-col-mute ); 495} 496. markdown-view > input : focus-visible + label { outline : 2 px solidvar ( --accent-col ); } 497. markdown-view > input : checked + label { 498color : var ( --accent-col ); 499background : var ( --bg-col-2 ); 500border-color : var ( --accent-col-mute-1 ); 501font-weight : 650 ; 502} 503. markdown-view > . rendered , 504. markdown-view > . code-panel { 505display : none; 506grid-column : 1 / -1 ; 507} 508# markdown-rendered : checked ~ . rendered , 509# markdown-code : checked ~ . code-panel { display : block; } 510. markdown-view > . readme { margin-top : 1 rem ; } 511. markdown-view > . code-panel { margin-top : 1 rem ; } 512 513. readme { 514width : 100 % ; 515margin-top : 2.5 rem ; 516border-top : 1 px solidvar ( --accent-col-mute-1 ); 517padding-top : 0.5 rem ; 518overflow-wrap : anywhere; 519} 520/* a readme's own title sits under the page h1, so its headings step down */ 521. readme h1 { font-size : 1.5 rem ; font-weight : 650 ; } 522. readme h2 { font-size : 1.25 rem ; } 523. readme pre { 524background : var ( --bg-col-2 ); 525border-left : 2 px solidvar ( --accent-col-mute-1 ); 526padding : 1 rem ; 527overflow-x : auto; 528line-height : 1.45 ; 529} 530. readme code { 531background : var ( --bg-col-2 ); 532padding : 0.125 em 0.25 em ; 533margin : 0 0.125 em ; 534font-size : 0.875 em ; 535} 536. readme pre code { background : none; padding : 0 ; margin : 0 ; font-size : inherit; } 537. readme img { max-width : 100 % ; } 538. readme blockquote { 539border-left : 2 px solidvar ( --accent-col-mute-1 ); 540margin : 1.5 rem 0 ; 541padding-left : 1 rem ; 542color : var ( --fg-col-mute ); 543} 544. readme table { border-collapse : collapse; } 545. readme th , . readme td { border : 1 px solidvar ( --accent-col-mute-2 ); padding : 0.25 rem 0.6 rem ; } 546 547/* right-aligned in the header, so the accent rule sits on the outer edge */ 548pre . clone { 549margin : 0 ; 550background : var ( --bg-col-2 ); 551border : 1 px solidvar ( --accent-col-mute-2 ); 552border-right : 2 px solidvar ( --accent-col-mute-1 ); 553padding : 0.6 rem 1 rem ; 554overflow-x : auto; 555} 556 557. languages { margin : 0 0 1.5 rem ; } 558. languages summary { 559display : flex; 560gap : 2 px ; 561height : 0.5 rem ; 562overflow : hidden; 563cursor : pointer; 564list-style : none; 565} 566. languages summary :: -webkit-details-marker { display : none; } 567. languages summary > span : not (. language-label ) { display : block; } 568. languages . language-label { 569position : absolute; 570width : 1 px ; 571height : 1 px ; 572overflow : hidden; 573clip-path : inset ( 50 % ); 574} 575. languages ul { 576display : flex; 577flex-wrap : wrap; 578gap : 0.5 rem 1.25 rem ; 579margin : 0 ; 580padding : 0.5 rem 0 0 ; 581list-style : none; 582} 583. languages li { display : flex; align-items : center; gap : 0.4 rem ; font-size : 0.875 rem ; } 584. languages li i { width : 0.65 rem ; height : 0.65 rem ; border-radius : 50 % ; } 585. languages li small { color : var ( --fg-col-mute ); } 586. languages li a { color : inherit; } 587. languages li a : hover { color : var ( --accent-col ); } 588 589/* client-rendered commit view, laid out like tangled's commit page. the 590subject and body read as one block; the metadata table and the diff each 591sit a full step below */ 592. commit-view . commit-subject { margin : 0.25 rem 0 0 ; } 593. commit-view . commit-body { 594white-space : pre-wrap; 595font : inherit; 596color : var ( --fg-col-mute ); 597margin : 0.5 rem 0 0 ; 598} 599 600table . commit-meta { 601border-collapse : collapse; 602margin-top : 1.5 rem ; 603font-size : 0.875 rem ; 604} 605table . commit-meta th { 606text-align : left; 607font-weight : 400 ; 608color : var ( --fg-col-mute ); 609padding : 0.05 rem 1.5 rem 0.05 rem 0 ; 610vertical-align : top; 611} 612table . commit-meta td { word-break : break-all; } 613 614. add-count { color : var ( --hl-string ); } 615. del-count { color : var ( --hl-builtin ); } 616. diffstat { margin : 1.5 rem 0 0 ; } 617 618. commit-view . status . added { color : var ( --hl-string ); } 619. commit-view . status . deleted { color : var ( --hl-builtin ); } 620. commit-view . status . modified { color : var ( --fg-col-mute ); } 621 622. file-diff { 623margin-top : 0.75 rem ; 624border : 1 px solidvar ( --accent-col-mute-2 ); 625} 626. file-diff + . file-diff { margin-top : 1.5 rem ; } 627. file-diff > summary { 628display : flex; 629align-items : baseline; 630gap : 0.75 rem ; 631padding : 0.35 rem 0.75 rem ; 632background : var ( --bg-col-2 ); 633color : var ( --fg-col-mute ); 634font-size : 0.875 rem ; 635cursor : pointer; 636list-style : none; 637} 638. file-diff > summary :: -webkit-details-marker { display : none; } 639. file-diff > summary :: before { 640content : "" ; 641position : relative; 642top : -0.17 rem ; 643width : 0.4 rem ; 644height : 0.4 rem ; 645flex : none; 646align-self : baseline; 647border-right : 1.5 px solid currentColor; 648border-bottom : 1.5 px solid currentColor; 649transform : rotate ( 45 deg ); 650} 651. file-diff : not ( [open ]) > summary :: before { 652top : -0.1 rem ; 653transform : rotate ( -45 deg ); 654} 655. file-diff > summary : focus-visible { outline : 2 px solidvar ( --accent-col ); outline-offset : 2 px ; } 656. file-summary-content { 657display : inline-flex; 658align-items : baseline; 659flex-wrap : wrap; 660gap : 0 0.6 rem ; 661flex : 1 ; 662min-width : 0 ; 663} 664. file-summary-content . path { 665color : var ( --fg-col ); 666font-weight : 600 ; 667overflow-wrap : anywhere; 668} 669. file-summary-content . file-actions { 670display : inline-flex; 671align-items : baseline; 672gap : 0.6 rem ; 673margin-left : auto; 674} 675. file-diff . binary-note { padding : 0.5 rem 0.75 rem ; } 676. file-diff . generated-note { color : var ( --fg-col-mute ); font-style : italic; } 677 678table . diff { 679width : 100 % ; 680border-collapse : collapse; 681border-top : 1 px solidvar ( --accent-col-mute-2 ); 682line-height : 1.5 ; 683} 684table . diff td { padding : 0 0.6 rem ; } 685table . diff td . text { white-space : pre-wrap; word-break : break-word; width : 100 % ; } 686table . diff td . text :: before { 687content : " " ; 688display : inline-block; 689width : 1 ch ; 690margin-right : 0.5 ch ; 691} 692table . diff tr . add td . text :: before { content : "+" ; color : var ( --hl-string ); } 693table . diff tr . del td . text :: before { content : "-" ; color : var ( --hl-builtin ); } 694table . diff td . ln { 695text-align : right; 696color : var ( --fg-col-mute ); 697user-select : none; 698white-space : nowrap; 699min-width : 2.5 rem ; 700} 701table . diff tr . hunk td { 702color : var ( --fg-col-mute ); 703background : var ( --bg-col-2 ); 704padding-top : 0.15 rem ; 705padding-bottom : 0.15 rem ; 706} 707table . diff tr . add { background : color-mix ( in srgb, var ( --hl-string ) 9 % , transparent); } 708table . diff tr . del { background : color-mix ( in srgb, var ( --hl-builtin ) 9 % , transparent); } 709 710/* syntax highlighting, as char.lt */ 711a-c , a-cd , a-er { 712color : var ( --hl-comment ); 713} 714 715a-k , a-kc , a-ko , a-kd , a-ke , a-kf , a-ki , a-kp , a-kr , a-kt , a-ky , a-km , a-dr , 716a-in , a-sc , a-rp , a-cn , a-ex , a-pp , 717a-co , a-cb , a-m , 718a-tu , a-tr { 719color : var ( --hl-keyword ); 720font-weight : 600 ; 721} 722 723/* builtins & types */ 724a-t , a-tb , a-tq , a-tf , a-fb { 725color : var ( --hl-builtin ); 726} 727 728a-s , a-ss , a-se , a-rx , a-ch , a-cs { 729color : var ( --hl-string ); 730} 731 732a-n { 733color : var ( --hl-number ); 734} 735 736a-f , a-fm , a-fd , a-fc , a-cr , a-ns , 737a-tg , a-td , a-at , a-pr , a-vm , a-l { 738color : var ( --hl-ident ); 739} 740 741a-da { color : var ( --hl-string ); } 742a-dd { color : var ( --hl-comment ); } 743 744a-em { font-style : italic; } 745a-st , a-tt { font-weight : 600 ; } 746a-tx { text-decoration : line-through; } 747 748/* match the old behaviour of only colouring shell-script variables */ 749. language-bash a-v , . language-shell a-v , . language-zsh a-v { 750color : var ( --hl-ident ); 751}