style.css

main 182 lines · 4.9 KB Raw
Alex Alex Commit Initial commit 01/10/2026 09:20
1/* ===========================================================================
2 Example theme
3 ---------------------------------------------------------------------------
4 Deliberately plain. It is a starting point, not a design.
5
6 The bottom half of this file is the CSS CONTRACT: the classes the root
7 pages emit in their own markup. Style those and every page of the site is
8 readable, even the ones you never wrote a view for. Skip them and those
9 pages render unstyled.
10 =========================================================================== */
11
12:root {
13 --ex-bg: #14171d;
14 --ex-panel: #1d222b;
15 --ex-line: #2c333f;
16 --ex-text: #dfe4ec;
17 --ex-muted: #93a0b2;
18 --ex-accent: #d1a233;
19 --ex-radius: 6px;
20}
21
22* { box-sizing: border-box; }
23
24body {
25 margin: 0;
26 background: var(--ex-bg);
27 color: var(--ex-text);
28 font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
29}
30
31a { color: var(--ex-accent); text-decoration: none; }
32a:hover { text-decoration: underline; }
33
34img { max-width: 100%; height: auto; }
35
36/* --------------------------------------------------------------- Chrome --
37 These belong to this theme's shell (shells/default.php). Rename them
38 freely - nothing outside your theme refers to them. */
39
40.ex-header {
41 display: flex;
42 flex-wrap: wrap;
43 align-items: center;
44 gap: 10px 26px;
45 padding: 14px 24px;
46 background: var(--ex-panel);
47 border-bottom: 2px solid var(--ex-accent);
48}
49
50.ex-logo {
51 font-size: 20px;
52 font-weight: 700;
53 color: #fff;
54}
55.ex-logo:hover { text-decoration: none; }
56
57.ex-nav { display: flex; flex-wrap: wrap; gap: 18px; }
58.ex-nav a { color: var(--ex-muted); font-size: 14px; }
59.ex-nav a:hover { color: var(--ex-accent); text-decoration: none; }
60
61.ex-main {
62 max-width: 1100px;
63 margin: 26px auto;
64 padding: 0 20px;
65}
66
67.ex-footer {
68 max-width: 1100px;
69 margin: 40px auto 24px;
70 padding: 18px 20px 0;
71 border-top: 1px solid var(--ex-line);
72 color: var(--ex-muted);
73 font-size: 13px;
74}
75
76/* ============================================================ CSS CONTRACT
77 Emitted by the root pages themselves, not by your theme. Every theme has
78 to style these or those pages look broken. This is the whole list.
79 ======================================================================== */
80
81h1, h2, h3 { line-height: 1.25; margin: 1.4em 0 .6em; }
82h1 { font-size: 26px; }
83h2 { font-size: 20px; }
84
85/* Tables - highscores, guilds, deaths, online list, forum, ... */
86table,
87.table,
88.znoteTable,
89.ThreadTable {
90 width: 100%;
91 border-collapse: collapse;
92 margin: 14px 0;
93 background: var(--ex-panel);
94 border-radius: var(--ex-radius);
95 overflow: hidden;
96}
97
98table td, table th {
99 padding: 9px 12px;
100 border-bottom: 1px solid var(--ex-line);
101 text-align: left;
102}
103
104/* Header rows. Znote marks them with .yellow, not with <th>. */
105tr.yellow td,
106tr.yellow th,
107.yellow {
108 background: #262d38;
109 color: #fff;
110 font-weight: 700;
111}
112
113.table-striped tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, .02); }
114.table-hover tbody tr:hover td,
115.tbl-hover tr:hover td { background: rgba(209, 162, 51, .08); }
116
117tr.special td { font-weight: 600; }
118
119/* Buttons and form controls */
120.btn,
121button,
122input[type="submit"],
123input[type="button"] {
124 display: inline-block;
125 padding: 8px 16px;
126 border: 0;
127 border-radius: var(--ex-radius);
128 background: var(--ex-accent);
129 color: #14171d;
130 font: inherit;
131 font-weight: 600;
132 cursor: pointer;
133}
134.btn:hover { filter: brightness(1.1); text-decoration: none; }
135
136.btn-primary { background: #3c8dbc; color: #fff; }
137.btn-success { background: #2ea36c; color: #fff; }
138.btn-warning { background: #e6a532; color: #14171d; }
139.btn-danger { background: #e05563; color: #fff; }
140.btn-info { background: #17a2b8; color: #fff; }
141
142input[type="text"],
143input[type="password"],
144input[type="number"],
145input[type="email"],
146select,
147textarea,
148.form-control {
149 padding: 8px 11px;
150 border: 1px solid var(--ex-line);
151 border-radius: var(--ex-radius);
152 background: #12161c;
153 color: var(--ex-text);
154 font: inherit;
155 max-width: 100%;
156}
157
158textarea { min-height: 120px; }
159.forumReply { width: 100%; }
160
161/* Odds and ends the pages use */
162.txt { color: var(--ex-muted); }
163.zheadline { font-size: 22px; font-weight: 700; margin: 1.2em 0 .5em; }
164.bighr { border: 0; border-top: 1px solid var(--ex-line); margin: 24px 0; }
165.outfitColumn { width: 64px; text-align: center; }
166.span12 { width: 100%; }
167.show { display: block; }
168.wtf { overflow-x: auto; }
169.nav_link { display: inline-block; padding: 4px 8px; }
170
171/* The sidebar widgets, if your shell calls theme_sidebar() or widget().
172 This theme's shell does not, so these are here only for reference. */
173.well { background: var(--ex-panel); border-radius: var(--ex-radius); padding: 14px; margin-bottom: 16px; }
174.widget { margin-bottom: 16px; }
175.header { font-weight: 700; margin-bottom: 8px; }
176
177@media (max-width: 720px) {
178 .ex-header { flex-direction: column; align-items: flex-start; }
179 .ex-main { padding: 0 14px; }
180 table { font-size: 14px; }
181}
182
Top