OXYGENHUB
◆ v0.9.3 oxygenhub / assets / github.css
18.3 KiB · CSS · last changed Repository bar: an Artifacts menu and a More menu 17 days ago source blame history raw
f6346d87 Andy McCall ↶ 1 
/* OxygenHub's look (oxygenhub#74), close to GitHub's: Primer colours,
2 
   system fonts, rounded boxes, underline navigation, sentence case. It is
3 
   the default, loaded over style.css: every rule is scoped to
4 
   :root[data-look="github"], which base.html sets unless the browser chose
5 
   the classic RetroPlay look with ?look=classic. Light and dark follow the
6 
   theme toggle. */
749d9a5f Andy McCall ↶ 7
8 
:root[data-look="github"] {
9 
  --bg:#ffffff; --panel:#ffffff; --soft:#f6f8fa; --ink:#1f2328; --mute:#59636e; --line:#d1d9e0; --dim:#818b98;
10 
  --acc:#0969da; --acc-2:#0969da; --band:#f6f8fa; --band-ink:#1f2328; --band-acc:#0969da; --band-line:transparent; --now:#0969da; --now-ink:#ffffff;
11 
  --ok:#1a7f37; --bad:#d1242f; --warn:#9a6700;
12 
  --add:#dafbe1; --del:#ffebe9; --add-ink:#116329; --del-ink:#82071e;
13 
  --sy-kw:#cf222e; --sy-str:#0a3069; --sy-num:#0550ae; --sy-cmt:#59636e; --sy-fn:#8250df; --sy-ty:#953800; --sy-var:#1f2328; --sy-const:#0550ae;
ae138eea Andy McCall ↶ 14 
  --gh-btn:#f6f8fa; --gh-btn-hover:#eff2f5; --gh-btn-line:#d1d9e0; --gh-primary:#0969da; --gh-primary-hover:#0860ca; --gh-tab:#fd8c73;
749d9a5f Andy McCall ↶ 15 
  --gh-header:#f6f8fa; --gh-bm-bg:#ddf4ff; --gh-bm-ink:#0969da; --gh-shadow:0 1px 0 rgba(31,35,40,.04);
16 
  --gh-font:-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
17 
  --gh-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
17ca6cdd Andy McCall ↶ 18 
  --bd-mark:rgba(89,99,110,.16); --bd-lit:rgba(9,105,218,.7); --bd-link:rgba(9,105,218,.22);
749d9a5f Andy McCall ↶ 19 
  color-scheme: light;
20 
}
21 
:root[data-look="github"][data-theme="dark"] {
22 
  --bg:#0d1117; --panel:#0d1117; --soft:#151b23; --ink:#f0f6fc; --mute:#9198a1; --line:#3d444d; --dim:#656c76;
23 
  --acc:#4493f8; --acc-2:#4493f8; --band:#151b23; --band-ink:#f0f6fc; --band-acc:#4493f8; --now:#1f6feb; --now-ink:#ffffff;
24 
  --ok:#3fb950; --bad:#f85149; --warn:#d29922;
25 
  --add:rgba(46,160,67,.15); --del:rgba(248,81,73,.1); --add-ink:#aff5b4; --del-ink:#ffdcd7;
26 
  --sy-kw:#ff7b72; --sy-str:#a5d6ff; --sy-num:#79c0ff; --sy-cmt:#9198a1; --sy-fn:#d2a8ff; --sy-ty:#ffa657; --sy-var:#f0f6fc; --sy-const:#79c0ff;
ae138eea Andy McCall ↶ 27 
  --gh-btn:#212830; --gh-btn-hover:#262c36; --gh-btn-line:#3d444d; --gh-primary:#1f6feb; --gh-primary-hover:#388bfd;
749d9a5f Andy McCall ↶ 28 
  --gh-header:#010409; --gh-bm-bg:rgba(56,139,253,.1); --gh-bm-ink:#4493f8; --gh-shadow:none;
29 
  color-scheme: dark;
17ca6cdd Andy McCall ↶ 30 
  --bd-mark:rgba(145,152,161,.14); --bd-lit:rgba(0,240,255,.75); --bd-link:rgba(0,240,255,.28);
749d9a5f Andy McCall ↶ 31 
}
32
33 
/* Type: the system stack at 14px, no capitals forced on anything. */
34 
:root[data-look="github"] body { font: 14px/1.5 var(--gh-font); }
35 
:root[data-look="github"] code, :root[data-look="github"] pre, :root[data-look="github"] kbd, :root[data-look="github"] .mono,
36 
:root[data-look="github"] table.code td, :root[data-look="github"] .chip { font-family: var(--gh-mono); font-size: 12px; }
37 
:root[data-look="github"] .px, :root[data-look="github"] .pxs { font-family: var(--gh-font); font-size: inherit; }
38 
:root[data-look="github"] h2 { font-size: 16px; font-weight: 600; }
39 
:root[data-look="github"] h3, :root[data-look="github"] th, :root[data-look="github"] dl.facts dt,
40 
:root[data-look="github"] form.card label, :root[data-look="github"] .field label, :root[data-look="github"] .inbox-nav h3,
41 
:root[data-look="github"] .tag, :root[data-look="github"] .kind, :root[data-look="github"] .vis, :root[data-look="github"] .runner-status,
42 
:root[data-look="github"] .chain-state, :root[data-look="github"] aside.side h3 .side-edit {
43 
  text-transform: none; letter-spacing: normal;
44 
}
45 
:root[data-look="github"] h3 { font-size: 14px; font-weight: 600; color: var(--ink); }
46 
:root[data-look="github"] form.card label, :root[data-look="github"] .field label { font-size: 14px; font-weight: 600; color: var(--ink); }
47 
:root[data-look="github"] dl.facts dt { font-size: 14px; color: var(--mute); padding-top: 0; }
48 
:root[data-look="github"] th { font-size: 12px; font-weight: 600; color: var(--mute); }
49 
:root[data-look="github"] a { color: var(--acc); }
50 
:root[data-look="github"] kbd { border-radius: 6px; box-shadow: inset 0 -1px 0 var(--line); }
51
52 
/* The header: GitHub's global bar; the site band becomes a quiet second row. */
53 
:root[data-look="github"] header { background: var(--gh-header); border-bottom: 1px solid var(--line); padding: 12px 24px; gap: 12px; }
54 
:root[data-look="github"] .brand { gap: 8px; }
55 
:root[data-look="github"] .brand svg { height: 28px; }
56 
:root[data-look="github"] .brand .px { font-size: 0; }
57 
:root[data-look="github"] .brand .px::after { content: "OxygenHub"; font-size: 16px; font-weight: 600; color: var(--ink); }
58 
:root[data-look="github"] form.find input { border-radius: 6px; background: var(--bg); padding: 5px 12px; font-size: 14px; }
59 
:root[data-look="github"] form.find input:focus, :root[data-look="github"] form.card input:focus,
60 
:root[data-look="github"] form.card textarea:focus, :root[data-look="github"] form.card select:focus {
61 
  outline: 2px solid var(--acc); outline-offset: -1px;
62 
}
63 
:root[data-look="github"] header nav .theme-toggle { border-radius: 6px; border-color: var(--gh-btn-line); background: var(--gh-btn); }
64 
:root[data-look="github"] header nav .bell .count { background: var(--acc); }
65 
:root[data-look="github"] .band { background: var(--gh-header); border-bottom: 1px solid var(--line); padding: 0 24px; }
66 
:root[data-look="github"] .band a { color: var(--ink); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: normal; padding: 8px 12px; border: 0; }
67 
:root[data-look="github"] .band a:first-child { border: 0; }
68 
:root[data-look="github"] .band a:hover { background: var(--gh-btn-hover); border-radius: 6px; }
69 
:root[data-look="github"] .band a.on { background: none; box-shadow: inset 0 -2px 0 var(--gh-tab); font-weight: 600; }
70 
:root[data-look="github"] .band a.dim { color: var(--mute); opacity: 1; }
71 
:root[data-look="github"] .band a.admin { color: var(--acc); }
72
73 
/* Repository tabs: underline navigation. */
74 
:root[data-look="github"] .tabs { background: var(--gh-header); }
75 
:root[data-look="github"] .tabs-in { padding: 0 24px; gap: 4px; }
76 
:root[data-look="github"] .tabs .crumb { font-size: 20px; padding: 14px 0 10px; }
77 
:root[data-look="github"] .tabs a:not(.crumb a) { padding: 8px 10px; font-size: 14px; border-radius: 6px; }
78 
:root[data-look="github"] .tabs a.on { border-bottom: 0; box-shadow: inset 0 -2px 0 var(--gh-tab); border-radius: 0; font-weight: 600; }
79 
:root[data-look="github"] .tabs a:hover { background: var(--gh-btn-hover); }
16ee5d19 Andy McCall ↶ 80 
:root[data-look="github"] .tab-menu > summary { padding: 8px 10px; font-size: 14px; border-radius: 6px; }
81 
:root[data-look="github"] .tab-menu > summary.on { border-bottom: 0; box-shadow: inset 0 -2px 0 var(--gh-tab); border-radius: 0; font-weight: 600; }
82 
:root[data-look="github"] .tab-menu > summary:hover { background: var(--gh-btn-hover); }
83 
:root[data-look="github"] .tab-menu-list { border-radius: 6px; padding: 4px; }
84 
:root[data-look="github"] .tabs .tab-menu-list a[aria-current] { box-shadow: inset 2px 0 0 var(--gh-tab); border-radius: 0 6px 6px 0; }
749d9a5f Andy McCall ↶ 85 
:root[data-look="github"] main { padding: 24px 24px 32px; }
86
87 
/* Page headings. */
88 
:root[data-look="github"] .head { border-image: none; border-bottom: 1px solid var(--line); margin: 0 0 16px; padding-bottom: 8px; }
89 
:root[data-look="github"] .head h1 { font-size: 24px; font-weight: 400; color: var(--ink); }
90 
:root[data-look="github"] .head h1 small { color: var(--mute); font-size: 14px; }
91
ae138eea Andy McCall ↶ 92 
/* Buttons: grey, rounded, sentence case; the accent blue for the primary action. */
749d9a5f Andy McCall ↶ 93 
:root[data-look="github"] button, :root[data-look="github"] a.go, :root[data-look="github"] button.go, :root[data-look="github"] summary.go {
94 
  font-family: var(--gh-font); font-size: 14px; font-weight: 500; letter-spacing: normal; text-transform: lowercase;
95 
  background: var(--gh-btn); color: var(--ink); border: 1px solid var(--gh-btn-line); border-radius: 6px; padding: 5px 16px;
96 
  box-shadow: var(--gh-shadow); line-height: 20px;
97 
}
98 
:root[data-look="github"] button::first-letter, :root[data-look="github"] a.go::first-letter, :root[data-look="github"] summary.go::first-letter { text-transform: uppercase; }
99 
:root[data-look="github"] button:hover, :root[data-look="github"] a.go:hover, :root[data-look="github"] summary.go:hover { background: var(--gh-btn-hover); color: var(--ink); }
100 
:root[data-look="github"] button.small, :root[data-look="github"] a.go.small, :root[data-look="github"] form.tiny button { padding: 2px 10px; font-size: 12px; }
101 
:root[data-look="github"] form.card button[type=submit], :root[data-look="github"] form.card .primary, :root[data-look="github"] button.primary-btn {
ae138eea Andy McCall ↶ 102 
  background: var(--gh-primary); color: #ffffff; border-color: rgba(31,35,40,.15);
749d9a5f Andy McCall ↶ 103 
}
ae138eea Andy McCall ↶ 104 
:root[data-look="github"] form.card button[type=submit]:hover, :root[data-look="github"] button.primary-btn:hover { background: var(--gh-primary-hover); color: #fff; filter: none; }
749d9a5f Andy McCall ↶ 105 
:root[data-look="github"] button.danger-btn { color: var(--bad); }
106 
:root[data-look="github"] button.linkish { background: none; border: 0; padding: 0; box-shadow: none; color: var(--acc); text-transform: none; }
cb71e18e Andy McCall ↶ 107 
/* The issue sidebar's actions are quiet rows, not buttons; their first
108 
   letter is an icon, so the look's sentence-case trick must not apply. */
109 
:root[data-look="github"] aside.side button.side-action { background: none; border: 0; box-shadow: none; padding: 5px 0; text-transform: none; font-size: 13px; font-weight: 600; color: var(--ink); }
110 
:root[data-look="github"] aside.side button.side-action:hover { background: none; color: var(--acc); }
111 
:root[data-look="github"] .side-empty button.linkish { font-size: 12px; }
4f37afcc Andy McCall ↶ 112 
:root[data-look="github"] .menu-actions .menu-action { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 6px 14px; text-transform: none; font-size: 13px; font-weight: 400; color: var(--ink); }
113 
:root[data-look="github"] .menu-actions .menu-action:hover { background: var(--soft); }
749d9a5f Andy McCall ↶ 114
115 
/* Boxes: rounded, one border, rows divided inside. */
116 
:root[data-look="github"] .panel, :root[data-look="github"] form.card, :root[data-look="github"] dl.facts, :root[data-look="github"] .table,
117 
:root[data-look="github"] .filebox, :root[data-look="github"] .file-diff, :root[data-look="github"] .hist, :root[data-look="github"] ul.feed,
118 
:root[data-look="github"] article.doc, :root[data-look="github"] .quickstart, :root[data-look="github"] .comment, :root[data-look="github"] .tl-card,
119 
:root[data-look="github"] .lanes-board, :root[data-look="github"] .file-side, :root[data-look="github"] .strip, :root[data-look="github"] pre.msg,
120 
:root[data-look="github"] .board-col, :root[data-look="github"] .card-item, :root[data-look="github"] li.hook, :root[data-look="github"] p.chain,
121 
:root[data-look="github"] .clone-panel, :root[data-look="github"] .sheet, :root[data-look="github"] .empty {
122 
  border-radius: 6px;
123 
}
124 
:root[data-look="github"] .table, :root[data-look="github"] .filebox, :root[data-look="github"] .file-diff, :root[data-look="github"] .hist,
125 
:root[data-look="github"] ul.feed, :root[data-look="github"] .tl-card { overflow: hidden; }
126 
:root[data-look="github"] ul.rows { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
127 
:root[data-look="github"] ul.rows li { margin: 0; border: 0; border-top: 1px solid var(--line); padding: 12px 16px; }
128 
:root[data-look="github"] ul.rows li:first-child { border-top: 0; }
129 
:root[data-look="github"] ul.rows li:hover { background: var(--soft); }
130 
:root[data-look="github"] ul.rows .name { font-size: 16px; font-weight: 600; }
131 
:root[data-look="github"] ul.rows li.unread { box-shadow: inset 3px 0 0 var(--acc); }
132 
:root[data-look="github"] th { background: var(--soft); padding: 8px 16px; }
133 
:root[data-look="github"] td { padding: 8px 16px; }
134 
:root[data-look="github"] tr:last-child > td { border-bottom: 0; }
135 
:root[data-look="github"] tbody tr:hover > td { background: var(--soft); }
136 
:root[data-look="github"] .filebox > header, :root[data-look="github"] .file-diff > header, :root[data-look="github"] .file-diff > summary,
137 
:root[data-look="github"] .tl-head { background: var(--soft); }
138 
:root[data-look="github"] article.doc { padding: 24px 32px; font-size: 16px; line-height: 1.5; }
139 
:root[data-look="github"] article.doc h1 { font-size: 32px; font-weight: 600; padding-bottom: .3em; border-bottom: 1px solid var(--line); }
140 
:root[data-look="github"] article.doc h2 { font-size: 24px; font-weight: 600; padding-bottom: .3em; border-bottom: 1px solid var(--line); }
141 
:root[data-look="github"] article.doc pre { background: var(--soft); border: 0; border-radius: 6px; padding: 16px; }
142 
:root[data-look="github"] article.doc code { background: color-mix(in srgb, var(--mute) 20%, transparent); border-radius: 6px; padding: .2em .4em; font-size: 85%; }
143 
:root[data-look="github"] article.doc blockquote { border-left: 4px solid var(--line); }
144 
:root[data-look="github"] .clone code, :root[data-look="github"] .cmds pre, :root[data-look="github"] .secret { border-radius: 6px; }
145
146 
/* Forms. */
147 
:root[data-look="github"] form.card input[type=text], :root[data-look="github"] form.card input[type=password], :root[data-look="github"] form.card input[type=email],
ae138eea Andy McCall ↶ 148 
:root[data-look="github"] form.card input[type=search], :root[data-look="github"] form.card input[type=number], :root[data-look="github"] form.card input[type=url], :root[data-look="github"] form.card textarea,
749d9a5f Andy McCall ↶ 149 
:root[data-look="github"] form.card select, :root[data-look="github"] .field input, :root[data-look="github"] .field select, :root[data-look="github"] .field textarea,
150 
:root[data-look="github"] .tiny-form input[type=text], :root[data-look="github"] .tiny-form select, :root[data-look="github"] .compare-bar input,
151 
:root[data-look="github"] details.inline-edit input, :root[data-look="github"] details.inline-edit textarea, :root[data-look="github"] details.linecomment textarea {
152 
  border-radius: 6px; background: var(--bg); padding: 5px 12px; font-size: 14px;
153 
}
154
155 
/* Labels, tags and status marks: pills. */
156 
:root[data-look="github"] .tag, :root[data-look="github"] .label, :root[data-look="github"] .lbl, :root[data-look="github"] .kind,
157 
:root[data-look="github"] .runner-status, :root[data-look="github"] .vis, :root[data-look="github"] .count-chip, :root[data-look="github"] .chain-link {
158 
  border-radius: 2em; font-size: 12px; font-weight: 500; padding: 0 8px; line-height: 20px;
159 
}
160 
:root[data-look="github"] .lbl-bm { background: var(--gh-bm-bg); color: var(--gh-bm-ink); border-color: transparent; border-radius: 6px; font-family: var(--gh-mono); }
161 
:root[data-look="github"] .tag.head { background: var(--now); color: var(--now-ink); }
162 
:root[data-look="github"] .modes a, :root[data-look="github"] .diff-bar .modes a { border-radius: 6px; }
163
164 
/* Avatars are round. */
165 
:root[data-look="github"] img.avatar { border-radius: 50%; }
166 
:root[data-look="github"] img.avatar.xl { border-radius: 50%; }
167
168 
/* Settings and side navigation, as GitHub's: a highlighted row, not a rule. */
169 
:root[data-look="github"] .section-nav a { border-left: 0; border-radius: 6px; color: var(--ink); padding: 6px 8px; }
170 
:root[data-look="github"] .section-nav a:hover { background: var(--gh-btn-hover); }
171 
:root[data-look="github"] .section-nav a.on { background: var(--gh-btn-hover); font-weight: 600; box-shadow: inset 3px 0 0 var(--acc); }
172
173 
/* Footer: plain, small, muted. */
174 
:root[data-look="github"] footer { background: none; border-top: 1px solid var(--line); }
175 
:root[data-look="github"] footer .brand .px::after { font-size: 14px; color: var(--mute); }
176 
:root[data-look="github"] .foot { font-size: 12px; color: var(--mute); }
177
178 
/* History: GitHub's commit-list quiet. */
179 
:root[data-look="github"] .lane { stroke: var(--line); }
bf5101d3 Andy McCall ↶ 180 
/* The history and lanes graphs' dots and cards only: other graphs (the
181 
   release trust graph) use .node on groups holding text. */
182 
:root[data-look="github"] :is(circle, rect).node { fill: var(--panel); stroke: var(--mute); }
183 
:root[data-look="github"] :is(circle, rect).node.head { fill: var(--acc); stroke: var(--acc); }
749d9a5f Andy McCall ↶ 184 
:root[data-look="github"] .chg .title { font-weight: 600; }
7493abf9 Andy McCall ↶ 185
186 
/* The file list is one box, as on GitHub. */
187 
:root[data-look="github"] table.tree { border: 1px solid var(--line); border-radius: 6px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
188 
:root[data-look="github"] table.tree td { padding: 8px 16px; }
189 
:root[data-look="github"] table.tree td.g { color: var(--mute); }
190 
:root[data-look="github"] table.tree tr:first-child > td { border-top: 0; }
9e50caed Andy McCall ↶ 191
192 
/* Form controls everywhere get the look's rounding and focus ring, over
193 
   the older per-place rules (oxygenhub#87). */
194 
:root[data-look="github"] :is(input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], input[type=url], input[type=date], input:not([type]), textarea, select) {
195 
  border-radius: 6px; border-color: var(--line); background-color: var(--bg); color: var(--ink);
196 
}
197 
:root[data-look="github"] :is(input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], input[type=url], input[type=date], input:not([type]), textarea, select):focus {
198 
  outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent);
199 
}
200 
:root[data-look="github"] select:not([multiple]) { padding-right: 30px; }
201 
:root[data-look="github"] button.menu-item.menu-pick { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 8px 12px; text-transform: none; font-size: 13px; font-weight: 400; text-align: left; }
202 
:root[data-look="github"] button.menu-item.menu-pick:hover { background: var(--soft); }
c9aacc0e Andy McCall ↶ 203 
/* The tree under its shaded head (#152): the head takes the top corners. */
204 
:root[data-look="github"] .tree-box .tree-head + table.tree { border-top-left-radius: 0; border-top-right-radius: 0; }
205 
:root[data-look="github"] .side-card > h3 { font-size: 14px; }
1656dc14 Andy McCall ↶ 206 
:root[data-look="github"] table.tree td.g.ic-dir { color: #54aeff; }
f8cf54e9 Andy McCall ↶ 207 
/* Lists inside a card (#155) take the card's border, not their own. */
208 
:root[data-look="github"] .card-box > ul.rows, :root[data-look="github"] .card-box > ul.feed { border: 0; border-radius: 0; }
7f283f8e Andy McCall ↶ 209 
/* The page's primary action (#161), as the GitHub look's primary buttons. */
210 
:root[data-look="github"] a.go.primary, :root[data-look="github"] summary.go.primary { background: var(--gh-primary); color: #ffffff; border-color: rgba(31,35,40,.15); }
211 
:root[data-look="github"] a.go.primary:hover, :root[data-look="github"] summary.go.primary:hover { background: var(--gh-primary-hover); color: #ffffff; filter: none; }
212 
:root[data-look="github"] .clone-pop[open] > summary.go.primary { background: var(--gh-primary-hover); }
61ecbd29 Andy McCall ↶ 213 
:root[data-look="github"] :is(.panel, form.card) > h2:first-child,
214 
:root[data-look="github"] :is(.panel, form.card) > input[type=hidden]:first-child + h2 { border-radius: 6px 6px 0 0; font-size: 16px; }