1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
@import "./themes/light.css";
@import "./themes/dark.css";
@import "./themes/solarized.css";
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
font-size: 14px;
line-height: 1.5;
margin: 0;
padding: 12px 16px;
background-color: var(--pgw-bg);
color: var(--pgw-text);
border: 1px solid var(--pgw-border);
}
a {
color: var(--pgw-link);
text-decoration: none;
}
a:hover {
color: var(--pgw-link-hover);
}
a:visited {
color: var(--pgw-link-visited);
}
h1, h2, h3 {
margin: 0 0 0.5em;
color: var(--pgw-accent-text);
font-weight: 600;
}
/* Tables */
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
max-width: 60em;
margin: 0.5em 0;
background-color: var(--pgw-bg-raised);
border: 1px solid var(--pgw-border);
}
th, td {
padding: 6px 10px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--pgw-border-muted);
}
th {
background-color: var(--pgw-accent-bg);
color: var(--pgw-accent-text);
font-weight: 600;
}
tbody tr:nth-child(even) {
background-color: var(--pgw-table-stripe);
}
tbody tr:hover {
background-color: var(--pgw-table-hover);
}
/* Optional: page header / footer blocks for future use */
.page_header,
.page_footer {
padding: 8px 12px;
background-color: var(--pgw-accent-bg);
color: var(--pgw-accent-text);
border: 1px solid var(--pgw-border);
}
.page_footer_text {
color: var(--pgw-text-muted);
font-style: italic;
}
.page_body {
padding: 8px;
font-family: ui-monospace, monospace;
background-color: var(--pgw-code-bg);
border: 1px solid var(--pgw-code-border);
}
.title, .title_text {
background-color: var(--pgw-title-bg);
padding: 6px 8px;
border-bottom: 1px solid var(--pgw-border);
}
.title:hover, a.title:hover {
background-color: var(--pgw-title-hover-bg);
}
/* Diff/status helpers (use var(--pgw-add-*) etc. in markup if needed) */
.diff-add { color: var(--pgw-add-fg); background-color: var(--pgw-add-bg); }
.diff-rem { color: var(--pgw-rem-fg); background-color: var(--pgw-rem-bg); }
.text-muted { color: var(--pgw-text-muted); }