API tools faq
paste
Guest User

HackerNews CSS

a guest
Nov 3rd, 2026
20
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 20.22 KB | None | 0 0
raw download clone embed print report
  1. /* ==========================================================
  2.    HACKER NEWS – LAYERED DARK THEME
  3.    Editorial + Modern UI Edition
  4.    ========================================================== */
  5.  
  6. /* ==========================================================
  7.    1. DENSITY TOGGLE
  8.    ========================================================== */
  9.  
  10. :root {
  11.     --hn-density: 0;
  12. }
  13.  
  14. /* ==========================================================
  15.    2. DESIGN TOKENS
  16.    ========================================================== */
  17.  
  18. :root {
  19.     --bg-main: #111111;
  20.     --bg-card-1: #1a1a1a;
  21.     --bg-card-2: #1f1f1f;
  22.     --bg-comment: #1e1e1e;
  23.     --bg-chip: #222222;
  24.     --bg-chip-hover: #2a2a2a;
  25.  
  26.     --text-primary: #e0e0e0;
  27.     --text-muted: #b3b3b3;
  28.     --text-rank: #9aa0a6;
  29.  
  30.     --accent-blue: #5aa9ff;
  31.     --accent-blue-hover: #cfe3ff;
  32.     --accent-orange: #ff7849;
  33.  
  34.     --radius-card: 10px;
  35.     --radius-small: 6px;
  36.  
  37.     /* ======================================================
  38.        FONT STACKS (CSP SAFE)
  39.        ====================================================== */
  40.  
  41.     /* UI font (Inter-like system stack) */
  42.  
  43.     --font-ui: 'IBM Plex Sans', 'Segoe UI', Bahnschrift, system-ui, sans-serif;
  44.  
  45.     /* Reading font (bookish serif stack) */
  46.  
  47.     --font-reading: 'Spectral', 'Palatino Linotype', Georgia, serif;
  48.  
  49.     --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  50.  
  51.     /* ======================================================
  52.        SPACING SYSTEM
  53.        ====================================================== */
  54.  
  55.     --story-padding-y: calc(16px - (8px * var(--hn-density)));
  56.     --story-padding-x: calc(18px - (6px * var(--hn-density)));
  57.     --story-margin: calc(14px - (8px * var(--hn-density)));
  58.  
  59.     --comment-padding: calc(10px - (4px * var(--hn-density)));
  60.  
  61.     --title-padding-y: calc(6px - (2px * var(--hn-density)));
  62.     --title-padding-x: calc(10px - (2px * var(--hn-density)));
  63. }
  64. /* ==========================================================
  65.    3. GLOBAL BASE
  66.    ========================================================== */
  67.  
  68. html,
  69. body {
  70.     background-color: var(--bg-main);
  71.     color: var(--text-primary);
  72.  
  73.     font-family: var(--font-ui);
  74.     font-size: 16px;
  75.     line-height: 1.45;
  76.  
  77.     -webkit-font-smoothing: antialiased;
  78.     text-rendering: optimizeLegibility;
  79.     letter-spacing: 0.01em;
  80.     font-feature-settings: 'liga', 'kern', 'calt';
  81. }
  82.  
  83. /* ==========================================================
  84.    Layout
  85.    ========================================================== */
  86.  
  87. #hnmain {
  88.     background-color: transparent;
  89.     width: 85%;
  90.     margin: auto;
  91.     padding: 12px;
  92. }
  93.  
  94. #hnmain td {
  95.     background-color: transparent;
  96.     border: none;
  97. }
  98.  
  99. /* ==========================================================
  100.    4. LINKS
  101.    ========================================================== */
  102.  
  103. a,
  104. .comment a,
  105. .subtext a,
  106. .comhead a {
  107.     color: var(--accent-blue) !important;
  108.     text-decoration: underline;
  109.     text-decoration-thickness: 1px;
  110.     text-underline-offset: 3px;
  111.     text-decoration-color: transparent;
  112.     transition:
  113.         color 0.18s ease,
  114.         text-decoration-color 0.18s ease;
  115. }
  116.  
  117. a:hover,
  118. .comment a:hover,
  119. .subtext a:hover,
  120. .comhead a:hover {
  121.     color: #ffffff !important;
  122.     text-decoration-color: currentColor;
  123. }
  124.  
  125. a:visited {
  126.     color: #9ecbff !important;
  127. }
  128.  
  129. /* ==========================================================
  130.    Fix Reply Link Double Underline
  131.    ========================================================== */
  132.  
  133. .reply u {
  134.     text-decoration: none;
  135. }
  136.  
  137. .reply a {
  138.     text-decoration: underline !important;
  139.     text-decoration-thickness: 1px;
  140.     text-underline-offset: 3px;
  141. }
  142.  
  143. /* ==========================================================
  144.    5. HEADER – Full Editorial Refinement
  145.    ========================================================== */
  146.  
  147. /* Masthead container */
  148.  
  149. .pagetop {
  150.     display: flex;
  151.     flex-wrap: wrap;
  152.     align-items: baseline;
  153.     gap: 16px;
  154.     row-gap: 6px;
  155.  
  156.     padding: 16px 0 12px 0;
  157.     margin-bottom: 22px;
  158.  
  159.     border-bottom: none;
  160.  
  161.     font-family: var(--font-ui);
  162.     font-size: 15px;
  163.     font-weight: 500;
  164.     letter-spacing: 0.01em;
  165. }
  166.  
  167. /* ----------------------------------------------------------
  168.    Site Title
  169.    ---------------------------------------------------------- */
  170.  
  171. .hnname,
  172. .hnname a {
  173.     font-family: var(--font-reading);
  174.     font-size: 24px;
  175.     font-weight: 600;
  176.     letter-spacing: -0.01em;
  177.     color: #d6e6ff;
  178.     text-decoration: none;
  179. }
  180.  
  181. /* Main Nav Links */
  182.  
  183. .pagetop > a:not(.hnname),
  184. .pagetop b:not(.hnname) > a {
  185.     font-family: var(--font-reading);
  186.     font-size: 17px;
  187.     font-weight: 500;
  188.     letter-spacing: -0.01em;
  189.     color: #a8c9ff;
  190.     text-decoration: none;
  191.     opacity: 0.85;
  192.     transition:
  193.         opacity 0.18s ease,
  194.         color 0.18s ease;
  195. }
  196.  
  197. .pagetop > a:not(.hnname):hover,
  198. .pagetop b:not(.hnname) > a:hover {
  199.     color: #ffffff;
  200.     opacity: 1;
  201. }
  202.  
  203. /* Active page */
  204.  
  205. .pagetop b:not(.hnname) {
  206.     font-weight: inherit;
  207. }
  208.  
  209. .pagetop b:not(.hnname) > a {
  210.     color: #ffffff;
  211.     opacity: 1;
  212.     border-bottom: 2px solid var(--accent-blue);
  213.     padding-bottom: 2px;
  214. }
  215.  
  216. /* ----------------------------------------------------------
  217.    Separator Pipes
  218.    ---------------------------------------------------------- */
  219.  
  220. .pagetop {
  221.     color: #3a3a3a;
  222. }
  223.  
  224. /* ----------------------------------------------------------
  225.    Right Side User Block
  226.    ---------------------------------------------------------- */
  227.  
  228. .pagetop span:last-child {
  229.     margin-left: auto;
  230.  
  231.     display: flex;
  232.     align-items: center;
  233.  
  234.     gap: 6px;
  235.  
  236.     font-family: var(--font-reading);
  237.  
  238.     font-size: 17px;
  239.  
  240.     color: var(--text-muted);
  241.  
  242.     word-spacing: -2px;
  243. }
  244.  
  245. /* Username */
  246.  
  247. #me,
  248. .hnuser {
  249.     color: #d6e6ff;
  250.     font-weight: 500;
  251.     letter-spacing: 0.02em;
  252.     text-decoration: none;
  253.     opacity: 0.9;
  254. }
  255.  
  256. #me:hover,
  257. .hnuser:hover {
  258.     opacity: 1;
  259. }
  260.  
  261. /* Karma */
  262.  
  263. #karma {
  264.     color: var(--accent-orange);
  265.     font-weight: 600;
  266.     font-size: 17px;
  267.     margin: 0 2px;
  268. }
  269.  
  270. /* Logout */
  271.  
  272. .pagetop a[href*='logout'] {
  273.     color: var(--text-muted);
  274.     opacity: 0.6;
  275.     text-decoration: none;
  276. }
  277.  
  278. .pagetop a[href*='logout']:hover {
  279.     color: #ffffff;
  280.     opacity: 1;
  281. }
  282.  
  283. /* ----------------------------------------------------------
  284.    Responsive
  285.    ---------------------------------------------------------- */
  286.  
  287. @media (max-width: 800px) {
  288.     .pagetop {
  289.         flex-direction: column;
  290.         align-items: flex-start;
  291.     }
  292.  
  293.     .pagetop span:last-child {
  294.         margin-left: 0;
  295.  
  296.         font-family: var(--font-reading);
  297.  
  298.         font-size: 16px;
  299.  
  300.         gap: 4px;
  301.     }
  302. }
  303. /* ==========================================================
  304.    6. STORY CARDS
  305.    ========================================================== */
  306.  
  307. html[op='news'] .athing.submission,
  308. html[op='newest'] .athing.submission,
  309. html[op='front'] .athing.submission,
  310. html[op='ask'] .athing.submission,
  311. html[op='show'] .athing.submission,
  312. html[op='jobs'] .athing.submission {
  313.     padding: var(--story-padding-y) var(--story-padding-x);
  314.     margin-bottom: var(--story-margin);
  315.     background-color: var(--bg-card-1);
  316.     border-radius: var(--radius-card);
  317. }
  318.  
  319. html[op='news'] .athing.submission:nth-of-type(even),
  320. html[op='newest'] .athing.submission:nth-of-type(even),
  321. html[op='front'] .athing.submission:nth-of-type(even),
  322. html[op='ask'] .athing.submission:nth-of-type(even),
  323. html[op='show'] .athing.submission:nth-of-type(even),
  324. html[op='jobs'] .athing.submission:nth-of-type(even) {
  325.     background-color: var(--bg-card-2);
  326. }
  327.  
  328. .rank {
  329.     color: var(--text-rank);
  330.     font-size: 13px;
  331.     padding-right: 8px;
  332. }
  333.  
  334. /* ==========================================================
  335.    7. STORY TITLE CHIP
  336.    ========================================================== */
  337.  
  338. html[op='news'] .titleline > a,
  339. html[op='newest'] .titleline > a,
  340. html[op='front'] .titleline > a,
  341. html[op='ask'] .titleline > a,
  342. html[op='show'] .titleline > a,
  343. html[op='jobs'] .titleline > a,
  344. html[op='item'] .titleline > a {
  345.     display: inline-block;
  346.     padding: var(--title-padding-y) var(--title-padding-x);
  347.  
  348.     font-family: var(--font-ui);
  349.     font-size: 18px;
  350.     font-weight: 600;
  351.     letter-spacing: -0.01em;
  352.     line-height: 1.45;
  353.  
  354.     color: var(--text-primary);
  355.  
  356.     transition:
  357.         color 0.18s ease,
  358.         text-shadow 0.18s ease;
  359. }
  360.  
  361. /* TEXT-ONLY Soft Glow Hover */
  362.  
  363. .titleline > a:hover {
  364.     color: #ffffff;
  365.     text-shadow:
  366.         0 0 6px rgba(90, 169, 255, 0.55),
  367.         0 0 12px rgba(90, 169, 255, 0.25);
  368. }
  369.  
  370. /* ==========================================================
  371.    8. STORY METADATA
  372.    ========================================================== */
  373.  
  374. .subtext,
  375. .subline {
  376.     display: block;
  377.     margin-top: 8px;
  378.     color: var(--text-muted);
  379.     font-size: 13px;
  380.     line-height: 1.45;
  381. }
  382.  
  383. /* ==========================================================
  384.    9. COMMENTS – Editorial Mode
  385.    ========================================================== */
  386.  
  387. html[op='item'] .comment,
  388. html[op='threads'] .comment {
  389.     background-color: var(--bg-comment);
  390.     padding: var(--comment-padding);
  391.     border-radius: var(--radius-small);
  392.     margin-bottom: 6px;
  393.     border-left: 5px solid transparent;
  394.     color: var(--text-primary) !important;
  395. }
  396.  
  397. /* Editorial Reading Typography */
  398.  
  399. html[op='item'] .commtext,
  400. html[op='threads'] .commtext {
  401.     font-family: var(--font-reading);
  402.     font-size: 14px;
  403.     line-height: 1.45;
  404.     max-width: 92ch !important;
  405.     letter-spacing: 0.01em;
  406.  
  407.     font-feature-settings:
  408.         'liga' 1,
  409.         'kern' 1;
  410.     font-kerning: normal;
  411.  
  412.     text-rendering: optimizeLegibility;
  413.     -webkit-font-smoothing: antialiased;
  414. }
  415.  
  416. /* Paragraph spacing */
  417.  
  418. html[op='item'] .commtext p,
  419. html[op='threads'] .commtext p {
  420.     margin-top: 0.8em;
  421.     margin-bottom: 0.8em;
  422.     text-indent: 1.4em;
  423. }
  424.  
  425. /* ==========================================================
  426.    STORY BODY – Editorial Reading Mode
  427.    Launch HN / Ask HN story text
  428.    ========================================================== */
  429.  
  430. html[op='item'] .toptext {
  431.     font-family: var(--font-reading);
  432.  
  433.     font-size: 14px;
  434.  
  435.     line-height: 1.4; /* tighter reading rhythm */
  436.  
  437.     letter-spacing: 0.01em;
  438.  
  439.     margin-top: 10px;
  440.  
  441.     color: var(--text-primary);
  442. }
  443.  
  444. /* paragraph rhythm */
  445.  
  446. html[op='item'] .toptext p {
  447.     margin-top: 0.75em;
  448.     margin-bottom: 0.75em;
  449.  
  450.     text-indent: 1.4em;
  451. }
  452.  
  453. /* links match comment style */
  454.  
  455. html[op='item'] .toptext a {
  456.     text-decoration: none;
  457.     border-bottom: 2px solid transparent;
  458. }
  459.  
  460. html[op='item'] .toptext a:hover {
  461.     border-bottom: 2px solid currentColor;
  462. }
  463.  
  464. /* ==========================================================
  465.    COMMENT LINK HOVER – Underline Only
  466.    ========================================================== */
  467.  
  468. html[op] .commtext a,
  469. html[op] .toptext a {
  470.     color: var(--accent-blue);
  471.  
  472.     /* small preview-style container */
  473.     background: rgba(90, 169, 255, 0.08);
  474.     border: 1px solid rgba(90, 169, 255, 0.18);
  475.     border-radius: 5px;
  476.     padding: 1px 4px;
  477.  
  478.     /* remove default underline */
  479.     text-decoration: none;
  480.  
  481.     /* invisible underline for hover */
  482.     border-bottom: 2px solid transparent;
  483. }
  484.  
  485. html[op] .commtext a:hover,
  486. html[op] .commtext a:focus,
  487. html[op] .commtext a:active,
  488. html[op] .toptext a:hover,
  489. html[op] .toptext a:focus,
  490. html[op] .toptext a:active {
  491.     color: var(--accent-blue) !important;
  492.  
  493.     /* underline appears on hover */
  494.     border-bottom: 2px solid var(--accent-blue);
  495. }
  496.  
  497. /* prevent interference inside code / quotes */
  498.  
  499. html[op] .commtext code a,
  500. html[op] .commtext pre a,
  501. html[op] .commtext blockquote a,
  502. html[op] .toptext code a,
  503. html[op] .toptext pre a,
  504. html[op] .toptext blockquote a {
  505.     border: none;
  506.     border-bottom: none;
  507.     background: none;
  508.     padding: 0;
  509.     text-decoration: underline;
  510. }
  511. /* ==========================================================
  512.    Depth Coloring – Thread Hierarchy
  513.    ========================================================== */
  514.  
  515. html[op='item'] td.ind[indent='0'] + td.votelinks + td.default .comment,
  516. html[op='threads'] td.ind[indent='0'] + td.votelinks + td.default .comment {
  517.     border-left-color: #58a6ff;
  518.     margin-top: 14px;
  519. }
  520.  
  521. html[op='item'] td.ind[indent='1'] + td.votelinks + td.default .comment,
  522. html[op='threads'] td.ind[indent='1'] + td.votelinks + td.default .comment {
  523.     border-left-color: #3fb950;
  524. }
  525.  
  526. html[op='item'] td.ind[indent='2'] + td.votelinks + td.default .comment,
  527. html[op='threads'] td.ind[indent='2'] + td.votelinks + td.default .comment {
  528.     border-left-color: #d29922;
  529. }
  530.  
  531. html[op='item'] td.ind[indent='3'] + td.votelinks + td.default .comment,
  532. html[op='threads'] td.ind[indent='3'] + td.votelinks + td.default .comment {
  533.     border-left-color: #f78166;
  534. }
  535.  
  536. html[op='item'] td.ind[indent='4'] + td.votelinks + td.default .comment,
  537. html[op='threads'] td.ind[indent='4'] + td.votelinks + td.default .comment {
  538.     border-left-color: #bc8cff;
  539. }
  540.  
  541. html[op='item'] td.ind[indent='5'] + td.votelinks + td.default .comment,
  542. html[op='threads'] td.ind[indent='5'] + td.votelinks + td.default .comment {
  543.     border-left-color: #79c0ff;
  544. }
  545.  
  546. html[op='item'] td.ind[indent='6'] + td.votelinks + td.default .comment,
  547. html[op='threads'] td.ind[indent='6'] + td.votelinks + td.default .comment {
  548.     border-left-color: #ff7b72;
  549. }
  550.  
  551. /* ==========================================================
  552.    10. BUILT-IN TAG STYLING – Literary Mode
  553.    ========================================================== */
  554.  
  555. /* ---------- Inline Code ---------- */
  556.  
  557. html[op] code {
  558.     font-family: var(--font-mono) !important;
  559.     font-size: 0.8em;
  560.     line-height: 1.5;
  561.  
  562.     padding: 2px 6px;
  563.     border-radius: 4px;
  564.  
  565.     background: #1a1a1a;
  566.     color: #d8e2ff;
  567.  
  568.     border: 1px solid rgba(255, 255, 255, 0.06);
  569.     letter-spacing: 0.02em;
  570. }
  571.  
  572. /* ---------- Code Blocks ---------- */
  573.  
  574. html[op] pre {
  575.     margin: 1.4em 0;
  576.  
  577.     padding: 16px 18px;
  578.  
  579.     background: #171717;
  580.     border: 1px solid #242424;
  581.     border-radius: 8px;
  582.  
  583.     font-family:
  584.         ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
  585.     font-size: 14px;
  586.     line-height: 1.7;
  587.  
  588.     color: #dde6ff;
  589.  
  590.     overflow-x: auto;
  591. }
  592. /* Allow long code lines to wrap instead of scrolling */
  593. html[op] pre code {
  594.     white-space: pre !important;
  595.     word-break: break-word;
  596.     font-family: var(--font-mono);
  597.     background: transparent;
  598.     border: none;
  599.     padding: 0;
  600. }
  601.  
  602. /* ==========================================================
  603.    BLOCKQUOTES – Editorial Highlight
  604.    ========================================================== */
  605.  
  606. html[op] blockquote {
  607.     font-size: 14px;
  608.  
  609.     margin: 1.4em 0;
  610.  
  611.     padding: 1.05em 1.4em;
  612.  
  613.     background: linear-gradient(135deg, #1b1f26, #181a20);
  614.  
  615.     border-left: 4px solid var(--accent-blue);
  616.  
  617.     border-radius: 8px;
  618.  
  619.     box-shadow:
  620.         0 2px 6px rgba(0, 0, 0, 0.35),
  621.         inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  622.  
  623.     font-family: var(--font-reading);
  624.  
  625.     line-height: 1.6;
  626.  
  627.     color: #d5dbe6;
  628. }
  629.  
  630. html[op] blockquote code {
  631.     font-style: normal;
  632. }
  633.  
  634. /* subtle quote glyph */
  635.  
  636. html[op] blockquote::before {
  637.     content: '❝';
  638.  
  639.     font-size: 40px;
  640.     line-height: 0;
  641.  
  642.     color: var(--accent-blue);
  643.  
  644.     margin-right: 8px;
  645.  
  646.     opacity: 0.9;
  647.  
  648.     position: relative;
  649.     top: 4px;
  650. }
  651.  
  652. /* remove legacy browser quotes */
  653.  
  654. html[op] blockquote::after {
  655.     content: none;
  656. }
  657.  
  658. /* ---------- Lists ---------- */
  659.  
  660. html[op] .commtext ul,
  661. html[op] .commtext ol {
  662.     margin: 1em 0 1em 1.6em;
  663.     padding-left: 1.2em;
  664. }
  665.  
  666. html[op] .commtext li {
  667.     margin-bottom: 0.5em;
  668. }
  669.  
  670. /* ---------- Horizontal Rule ---------- */
  671.  
  672. html[op] hr {
  673.     border: none;
  674.     height: 1px;
  675.     margin: 1.8em 0;
  676.  
  677.     background: linear-gradient(to right, transparent, #2a2a2a, transparent);
  678. }
  679.  
  680. /* Prevent legacy font tag from interfering inside code/quotes */
  681.  
  682. html[op] blockquote font,
  683. html[op] pre font,
  684. html[op] code font {
  685.     color: inherit !important;
  686. }
  687.  
  688. /* ==========================================================
  689.    Forms, Footer, Accessibility
  690.    ========================================================== */
  691.  
  692. textarea,
  693. form input[type='text'] {
  694.     background-color: var(--bg-comment);
  695.     color: var(--text-primary);
  696.     border: 1px solid var(--accent-blue);
  697.     padding: 6px;
  698.     border-radius: 5px;
  699.     font-family: var(--font-ui);
  700. }
  701.  
  702. input[type='submit'],
  703. button {
  704.     font-family: var(--font-ui);
  705.     font-size: 13px;
  706.     font-weight: 500;
  707.     letter-spacing: 0.02em;
  708.  
  709.     color: var(--text-primary);
  710.     background: var(--bg-chip);
  711.  
  712.     border: 1px solid rgba(255, 255, 255, 0.08);
  713.     border-radius: var(--radius-small);
  714.  
  715.     padding: 6px 12px;
  716.  
  717.     cursor: pointer;
  718.     user-select: none;
  719.  
  720.     /* raised look */
  721.     box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  722.  
  723.     transition:
  724.         background 0.15s ease,
  725.         border-color 0.15s ease,
  726.         box-shadow 0.15s ease,
  727.         transform 0.08s ease;
  728. }
  729.  
  730. input[type='submit']:hover,
  731. button:hover {
  732.     border-color: var(--accent-blue);
  733.     box-shadow: 0 0 0 2px rgba(90, 169, 255, 0.18);
  734. }
  735.  
  736. input[type='submit']:active,
  737. button:active {
  738.     /* press down */
  739.     transform: translateY(2px);
  740.  
  741.     /* remove glow */
  742.     box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  743.  
  744.     /* subtle pressed tint */
  745.     background: rgba(90, 169, 255, 0.1);
  746.  
  747.     border-color: var(--accent-blue);
  748. }
  749.  
  750. .votearrow {
  751.     background: url('triangle.svg') no-repeat;
  752.     background-size: 10px;
  753. }
  754.  
  755. .center,
  756. .yclinks a {
  757.     color: var(--accent-blue);
  758.     font-family: var(--font-reading);
  759.     font-size: 15px;
  760.     letter-spacing: -0.01em;
  761. }
  762.  
  763. .yclinks a:hover {
  764.     color: var(--accent-blue-hover);
  765. }
  766.  
  767. .hnuser {
  768.     font-variant: normal;
  769.     letter-spacing: 0.03em;
  770. }
  771.  
  772. /* Force comment text to respect dark theme */
  773.  
  774. .comment,
  775. .commtext,
  776. .commtext * {
  777.     color: var(--text-primary) !important;
  778. }
  779.  
  780. font[color],
  781. font[color='#000000'],
  782. font[color='#000'] {
  783.     color: var(--text-primary) !important;
  784. }
  785.  
  786. /* ==========================================================
  787.    SUBMIT PAGE FIX
  788.    ========================================================== */
  789.  
  790. html[op='submit'] #hnmain {
  791.     background-color: transparent !important;
  792. }
  793.  
  794. html[op='submit'] input[type='text'],
  795. html[op='submit'] input[type='url'],
  796. html[op='submit'] textarea {
  797.     background-color: var(--bg-comment);
  798.     color: var(--text-primary);
  799.     border: 1px solid var(--accent-blue);
  800.     border-radius: 5px;
  801.     padding: 6px;
  802.     font-family: var(--font-ui);
  803. }
  804.  
  805. html[op='submit'] input[type='submit'] {
  806.     background-color: var(--accent-blue);
  807.     color: white;
  808.     border: none;
  809.     padding: 8px 12px;
  810.     border-radius: 5px;
  811.     cursor: pointer;
  812.     font-family: var(--font-ui);
  813. }
  814.  
  815. /* ==========================================================
  816.    COMMENT WIDTH TWEAK
  817.    ========================================================== */
  818.  
  819. html[op='item'] .commtext,
  820. html[op='threads'] .commtext {
  821.     max-width: 92ch !important;
  822. }
  823.  
  824. /* ==========================================================
  825. CODE BLOCK LINE NUMBERS
  826. Matches enhanceCodeBlocks() JS
  827. ========================================================== */
  828.  
  829. /* allow structured rows inside code blocks */
  830.  
  831. html[op] pre code {
  832.     font-family: var(--font-mono);
  833.     display: block;
  834.     white-space: pre !important;
  835.     padding: 0;
  836. }
  837.  
  838. /* each code line */
  839.  
  840. .hn-code-line {
  841.     display: grid;
  842.     grid-template-columns: 36px 1fr;
  843.     column-gap: 12px;
  844.  
  845.     line-height: 1.55;
  846.     font-family: inherit;
  847. }
  848.  
  849. /* line numbers */
  850.  
  851. .hn-code-number {
  852.     text-align: right;
  853.     padding-right: 6px;
  854.     color: #6e7681;
  855.     opacity: 0.65;
  856.     user-select: none;
  857. }
  858.  
  859. /* code text */
  860.  
  861. .hn-code-text {
  862.     white-space: pre;
  863. }
  864.  
  865. /* tighten code block slightly */
  866.  
  867. html[op] pre {
  868.     overflow-x: auto;
  869. }
  870. /* ==========================================================
  871.    Highlight.js integration
  872.    ========================================================== */
  873.  
  874. .hljs {
  875.     background: transparent !important;
  876.     padding: 0 !important;
  877. }
  878.  
  879. .hljs-comment,
  880. .hljs-quote {
  881.     color: #7c8a9a;
  882.     font-style: italic;
  883. }
  884.  
  885. .hljs-keyword,
  886. .hljs-selector-tag,
  887. .hljs-subst {
  888.     color: #ff7b72;
  889. }
  890.  
  891. .hljs-string,
  892. .hljs-title,
  893. .hljs-name,
  894. .hljs-type {
  895.     color: #a5d6ff;
  896. }
  897.  
  898. .hljs-number,
  899. .hljs-literal {
  900.     color: #79c0ff;
  901. }
  902.  
  903. .hljs-built_in,
  904. .hljs-builtin-name {
  905.     color: #ffa657;
  906. }
  907.  
  908. pre code.hljs {
  909.     font-family: var(--font-mono);
  910.     white-space: pre;
  911. }
  912.  
  913. .commtext ul.hn-auto-list {
  914.     margin: 1em 0;
  915.     padding-left: 1.6em;
  916. }
  917.  
  918. .commtext ul.hn-auto-list li {
  919.     margin-bottom: 0.4em;
  920. }
  921.  
  922. /* ==========================================================
  923.    DIAMOND BULLETS
  924.    ========================================================== */
  925.  
  926. /* ==========================================================
  927.    DIAMOND BULLETS
  928.    ========================================================== */
  929.  
  930. .hn-bullet {
  931.     position: relative;
  932.     padding-left: 1.4em;
  933.     margin-bottom: 0.35em;
  934. }
  935.  
  936. .hn-bullet::before {
  937.     content: '◆';
  938.     position: absolute;
  939.     left: 0;
  940.     color: #5aa9ff;
  941.     font-size: 0.9em;
  942. }
  943.  
Add Comment
Please, Sign In to add comment
Public Pastes
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!