forum.css

main 278 lines · 16.3 KB Raw
Alex Alex Commit Initial commit 01/10/2026 09:20
1.znx-forum {
2 --znf-surface: var(--box-inner-bg, var(--box-bg, var(--nz-panel, var(--wc-bg-2, var(--z-panel-2, var(--s-panel, var(--primary, #1b1e25)))))));
3 --znf-surface-2: color-mix(in srgb, var(--znf-surface) 82%, #000);
4 --znf-hover: color-mix(in srgb, var(--znf-accent, #d1a233) 8%, transparent);
5 --znf-text: var(--font-color, var(--text, var(--nz-text, var(--wc-text, var(--z-text, var(--s-text, #dfe4ec))))));
6 --znf-border: var(--border, var(--box-inner-border, var(--box-border, var(--nz-border-soft, var(--wc-line, var(--z-border, #2a2e37))))));
7 --znf-accent: var(--accent, var(--link, var(--nz-accent, #d1a233)));
8 --znf-danger: #e5534b;
9 --znf-radius: 12px;
10 --znf-muted: color-mix(in srgb, var(--znf-text) 58%, transparent);
11
12 color: var(--znf-text);
13 line-height: 1.55;
14 font-size: 14px;
15}
16.znx-forum * { box-sizing: border-box; }
17.znx-forum a { color: var(--znf-accent); text-decoration: none; }
18.znx-forum a:hover { text-decoration: underline; }
19.znx-forum font { font: inherit; }
20.znx-forum font[color="red"], .znx-forum font[color='red'] { color: var(--znf-danger); font-weight: 700; }
21
22/* ---- headings + breadcrumb ------------------------------- */
23.znx-forum h1, .znx-forum .znf-h1, .znx-forum #ThreadTitle, .znx-forum .znf-title {
24 font-size: 23px; line-height: 1.25; font-weight: 800; margin: 2px 0 4px; letter-spacing: .01em;
25}
26.znx-forum h1 a, .znx-forum .znf-title a { color: inherit; }
27.znx-forum .znf-crumbs {
28 display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
29 margin: 0 0 14px; font-size: 12.5px; color: var(--znf-muted);
30}
31.znx-forum .znf-crumbs a { color: var(--znf-muted); }
32.znx-forum .znf-crumbs a:hover { color: var(--znf-accent); text-decoration: none; }
33.znx-forum .znf-crumbs span { opacity: .5; }
34
35.znx-forum .znf-bhead {
36 display: flex; align-items: center; justify-content: space-between;
37 gap: 14px; flex-wrap: wrap; margin: 0 0 16px;
38}
39.znx-forum .znf-bhead h1, .znx-forum .znf-bhead .znf-h1 { margin: 0; }
40
41/* ---- alerts / permission messages ---------------------- */
42.znx-forum .znf-alert,
43.znx-forum p:has(> b > font[color]),
44.znx-forum p:has(> font[color]) {
45 margin: 0 0 16px; padding: 12px 16px;
46 border: 1px solid color-mix(in srgb, var(--znf-danger) 45%, var(--znf-border));
47 border-left: 3px solid var(--znf-danger);
48 border-radius: 10px;
49 background: color-mix(in srgb, var(--znf-danger) 11%, transparent);
50 font-size: 13.5px;
51}
52.znx-forum .znf-note {
53 margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--znf-border);
54 border-radius: 10px; background: var(--znf-surface-2); font-size: 13.5px; color: var(--znf-muted);
55}
56.znx-forum .forumCooldown {
57 display: block; margin: 12px 0; padding: 10px 14px;
58 border: 1px solid color-mix(in srgb, var(--znf-danger) 40%, var(--znf-border));
59 border-radius: 9px; background: color-mix(in srgb, var(--znf-danger) 9%, transparent);
60 color: var(--znf-danger); font-size: 13px; font-weight: 600;
61}
62.znx-forum .znf-empty {
63 margin: 0; padding: 26px 16px; text-align: center;
64 color: var(--znf-muted); font-size: 14px;
65}
66
67/* ---- board list --------------------------------------- */
68.znx-forum .znf-boards { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--znf-border); border-radius: var(--znf-radius); overflow: hidden; background: var(--znf-surface); }
69.znx-forum .znf-boards + .znf-boards { margin-top: 18px; }
70.znx-forum .znf-boards__title {
71 padding: 10px 16px; font-size: 11px; font-weight: 800; text-transform: uppercase;
72 letter-spacing: .07em; color: var(--znf-muted); background: var(--znf-surface-2);
73 border-bottom: 1px solid var(--znf-border);
74}
75.znx-forum .znf-board {
76 display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px;
77 padding: 15px 16px; border-top: 1px solid var(--znf-border); cursor: pointer;
78 color: inherit;
79}
80.znx-forum .znf-boards__title + .znf-board,
81.znx-forum .znf-board:first-child { border-top: 0; }
82.znx-forum .znf-board:hover { background: var(--znf-hover); }
83.znx-forum .znf-board__icon {
84 width: 40px; height: 40px; display: grid; place-items: center; font-size: 18px;
85 border-radius: 9px; background: color-mix(in srgb, var(--znf-accent) 14%, transparent);
86 color: var(--znf-accent);
87}
88.znx-forum .znf-board__main { min-width: 0; }
89.znx-forum .znf-board__name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15.5px; font-weight: 700; }
90.znx-forum .znf-board__name a { color: var(--znf-text); }
91.znx-forum .znf-board__name a:hover { color: var(--znf-accent); text-decoration: none; }
92.znx-forum .znf-board__last { display: block; margin-top: 3px; font-size: 12.5px; color: var(--znf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
93.znx-forum .znf-board__last b { color: color-mix(in srgb, var(--znf-text) 82%, transparent); font-weight: 600; }
94.znx-forum .znf-board__count { text-align: right; font-size: 12.5px; color: var(--znf-muted); white-space: nowrap; }
95.znx-forum .znf-board__count b { display: block; font-size: 17px; color: var(--znf-text); font-weight: 800; }
96.znx-forum .znf-board__admin { display: flex; gap: 6px; }
97.znx-forum .znf-board__admin form { margin: 0; }
98
99/* ---- tags / badges ----------------------------------- */
100.znx-forum .znf-tag {
101 display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
102 border-radius: 999px; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
103 letter-spacing: .04em; border: 1px solid var(--znf-border);
104}
105.znx-forum .znf-tag--lock { color: var(--znf-danger); border-color: color-mix(in srgb, var(--znf-danger) 45%, var(--znf-border)); }
106.znx-forum .znf-tag--hidden { color: var(--znf-muted); }
107.znx-forum .znf-tag--sticky { color: var(--znf-accent); border-color: color-mix(in srgb, var(--znf-accent) 45%, var(--znf-border)); }
108.znx-forum .znf-tag--guild { color: var(--znf-accent); background: color-mix(in srgb, var(--znf-accent) 12%, transparent); }
109
110/* ---- thread list ------------------------------------- */
111.znx-forum .znf-threads { border: 1px solid var(--znf-border); border-radius: var(--znf-radius); overflow: hidden; background: var(--znf-surface); }
112.znx-forum .znf-thread {
113 display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 14px;
114 padding: 14px 16px; border-top: 1px solid var(--znf-border); cursor: pointer;
115}
116.znx-forum .znf-thread:first-child { border-top: 0; }
117.znx-forum .znf-thread:hover { background: var(--znf-hover); }
118.znx-forum .znf-thread.is-sticky { background: color-mix(in srgb, var(--znf-accent) 5%, transparent); }
119.znx-forum .znf-thread__ico { text-align: center; font-size: 15px; opacity: .8; }
120.znx-forum .znf-thread__main { min-width: 0; }
121.znx-forum .znf-thread__title { display: block; font-size: 15px; font-weight: 700; color: var(--znf-text); overflow-wrap: anywhere; }
122.znx-forum .znf-thread__title:hover { color: var(--znf-accent); text-decoration: none; }
123.znx-forum .znf-thread.is-locked .znf-thread__title { opacity: .7; }
124.znx-forum .znf-thread__meta { display: block; margin-top: 3px; font-size: 12px; color: var(--znf-muted); }
125.znx-forum .znf-thread__meta a { color: var(--znf-muted); }
126.znx-forum .znf-thread__meta a:hover { color: var(--znf-accent); }
127.znx-forum .znf-thread__stats { text-align: right; font-size: 11.5px; color: var(--znf-muted); white-space: nowrap; line-height: 1.5; }
128.znx-forum .znf-thread__stats b { color: var(--znf-text); font-size: 14px; font-weight: 800; }
129
130/* ---- thread view: post cards ------------------------- */
131.znx-forum .znf-tbadges { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
132.znx-forum .znf-mod {
133 display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 12px 14px;
134 border: 1px dashed var(--znf-border); border-radius: 10px; background: var(--znf-surface-2);
135}
136.znx-forum .znf-mod form { margin: 0; }
137
138.znx-forum .znf-post {
139 display: grid; grid-template-columns: 176px 1fr; margin: 0 0 14px;
140 border: 1px solid var(--znf-border); border-radius: var(--znf-radius);
141 background: var(--znf-surface); overflow: hidden;
142}
143.znx-forum .znf-post.is-op { border-color: color-mix(in srgb, var(--znf-accent) 40%, var(--znf-border)); }
144.znx-forum .znf-post__side, .znx-forum .znf-post .avatar {
145 padding: 16px 14px; text-align: center; background: var(--znf-surface-2);
146 border-right: 1px solid var(--znf-border); font-size: 13px;
147}
148.znx-forum .znf-post__side > a, .znx-forum .znf-post .avatar > a { display: block; font-weight: 800; color: var(--znf-text); word-break: break-word; }
149.znx-forum .znf-post__side > a:hover, .znx-forum .znf-post .avatar > a:hover { color: var(--znf-accent); text-decoration: none; }
150.znx-forum .znf-post__side img, .znx-forum .znf-post .avatar img {
151 display: block; margin: 12px auto 8px; width: 96px; height: 96px; object-fit: contain;
152 padding: 8px; border: 1px solid var(--znf-border); border-radius: 12px;
153 background: color-mix(in srgb, var(--znf-text) 5%, transparent); image-rendering: -webkit-optimize-contrast;
154}
155.znx-forum .znf-post__side span, .znx-forum .znf-post .avatar span {
156 display: inline-block; margin-top: 2px; padding: 2px 9px; border-radius: 999px;
157 font-size: 11px; font-weight: 700; color: var(--znf-accent);
158 background: color-mix(in srgb, var(--znf-accent) 15%, transparent);
159}
160.znx-forum .znf-post__body { padding: 0; }
161.znx-forum .znf-post__meta {
162 padding: 9px 16px; font-size: 11.5px; color: var(--znf-muted);
163 border-bottom: 1px solid var(--znf-border); background: color-mix(in srgb, var(--znf-surface-2) 55%, transparent);
164}
165.znx-forum .znf-post__meta a { color: var(--znf-text); }
166.znx-forum .znf-post__text { padding: 16px; }
167.znx-forum .znf-post__text p { margin: 0; overflow-wrap: anywhere; }
168.znx-forum .znf-post__text img { max-width: 100%; height: auto; border-radius: 6px; }
169.znx-forum .znf-post__text blockquote {
170 margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--znf-accent);
171 background: color-mix(in srgb, var(--znf-accent) 8%, transparent); border-radius: 0 6px 6px 0; color: var(--znf-muted);
172}
173.znx-forum .znf-post__text pre { background: var(--znf-surface-2); border: 1px solid var(--znf-border); border-radius: 6px; padding: 12px 14px; overflow-x: auto; }
174.znx-forum .znf-post__text code { background: var(--znf-surface-2); border: 1px solid var(--znf-border); border-radius: 6px; padding: 1px 5px; }
175.znx-forum .znf-post__actions { padding: 0 16px 14px; display: flex; gap: 8px; flex-wrap: wrap; }
176.znx-forum .znf-post__actions form { margin: 0; }
177
178.znx-forum hr.bighr { border: 0; height: 0; margin: 0; }
179.znx-forum .znf-reply { margin-top: 20px; }
180.znx-forum .znf-reply h2, .znx-forum .znf-reply h3 { font-size: 15px; margin: 0 0 10px; }
181
182/* ---- forms + inputs --------------------------------- */
183.znx-forum input[type="text"], .znx-forum input[type="password"], .znx-forum input[type="number"],
184.znx-forum textarea, .znx-forum select,
185.znx-forum .form-control, .znx-forum .span12,
186.znx-forum .znote-newthread-title, .znx-forum .znote-postas-select {
187 appearance: none; width: 100%; max-width: 100%; min-height: 40px; padding: 8px 12px;
188 color: var(--znf-text); background: color-mix(in srgb, var(--znf-text) 5%, var(--znf-surface));
189 border: 1px solid var(--znf-border); border-radius: 9px; font: inherit;
190 transition: border-color .15s, box-shadow .15s;
191}
192.znx-forum textarea { min-height: 120px; resize: vertical; }
193.znx-forum select { max-width: 340px; }
194.znx-forum input:focus, .znx-forum textarea:focus, .znx-forum select:focus, .znx-forum .form-control:focus {
195 outline: 0; border-color: var(--znf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--znf-accent) 22%, transparent);
196}
197.znx-forum label { font-size: 12px; font-weight: 700; color: var(--znf-muted); }
198
199/* ---- buttons (scoped) ------------------------------- */
200.znx-forum .btn, .znx-forum .znf-btn,
201.znx-forum input[type="submit"], .znx-forum button[type="submit"] {
202 display: inline-flex; align-items: center; justify-content: center; gap: 7px;
203 min-height: 38px; padding: 0 16px; width: auto;
204 border: 1px solid var(--znf-border); border-radius: 9px;
205 background: color-mix(in srgb, var(--znf-text) 8%, var(--znf-surface));
206 color: var(--znf-text); font: inherit; font-weight: 700; line-height: 1;
207 cursor: pointer; transition: filter .12s, transform .06s;
208}
209.znx-forum .btn:hover, .znx-forum .znf-btn:hover,
210.znx-forum input[type="submit"]:hover, .znx-forum button[type="submit"]:hover { filter: brightness(1.12); text-decoration: none; }
211.znx-forum .btn:active, .znx-forum .znf-btn:active { transform: translateY(1px); }
212.znx-forum .btn-primary, .znx-forum .btn-info, .znx-forum .znf-btn--primary { background: var(--znf-accent); border-color: var(--znf-accent); color: #16181d; }
213.znx-forum .btn-success { background: #2f9e5e; border-color: #2f9e5e; color: #fff; }
214.znx-forum .btn-warning { background: #d89a2b; border-color: #d89a2b; color: #16181d; }
215.znx-forum .btn-danger { background: #c9443c; border-color: #c9443c; color: #fff; }
216.znx-forum .btn-default, .znx-forum .znf-btn--ghost { background: transparent; }
217.znx-forum .btn--sm, .znx-forum .znf-btn--sm { min-height: 30px; padding: 0 10px; font-size: 12px; }
218
219/* ---- post-as picker + new-thread form -------------- */
220.znx-forum .znf-newwrap {
221 margin-top: 18px; padding: 16px; border: 1px solid var(--znf-border);
222 border-radius: var(--znf-radius); background: var(--znf-surface-2);
223}
224.znote-postas, .znote-newthread-head {
225 display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0;
226}
227.znote-postas-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--znf-muted); }
228.znote-postas-single { font-weight: 800; padding: 8px 13px; border-radius: 8px; background: color-mix(in srgb, var(--znf-accent) 14%, transparent); color: var(--znf-accent); }
229.znx-forum .znote-postas-select { width: auto; min-width: 200px; }
230.znote-postas-btn { min-height: 40px; white-space: nowrap; }
231.znx-forum .znote-newthread-title { font-size: 15px; margin: 12px 0 14px; }
232.znx-forum .znote-newthread-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
233.znx-forum .znote-newthread { margin: 0; }
234
235/* ---- editor + admin edit forms -------------------- */
236.znote-editor-wrap { margin: 6px 0 4px; }
237.znote-editor-wrap .sceditor-container { border: 1px solid var(--znf-border) !important; border-radius: 10px !important; overflow: hidden; }
238.znote-editor-note { margin: 6px 0 12px; font-size: 12px; color: var(--znf-muted); }
239.znx-forum .updateTable, .znx-forum .editThread { width: 100%; margin: 6px 0 18px; border-collapse: separate; border-spacing: 0; border: 1px dashed var(--znf-border); border-radius: 10px; background: var(--znf-surface-2); }
240.znx-forum .updateTable td, .znx-forum .editThread td { padding: 10px 14px; vertical-align: top; }
241.znx-forum .postButton { display: inline-block; margin: 3px 6px 3px 0; }
242
243/* ---- stacked field form (create / edit board) -------- */
244.znx-forum .znf-form {
245 max-width: 520px; margin: 4px 0 8px;
246 border: 1px solid var(--znf-border); border-radius: 12px;
247 background: var(--znf-surface-2); padding: 18px 20px;
248}
249.znx-forum .znf-form__title { margin: 0 0 16px; font-size: 16px; }
250.znx-forum .znf-field {
251 display: grid; grid-template-columns: 150px 1fr;
252 align-items: center; gap: 12px; margin: 0 0 12px;
253}
254.znx-forum .znf-field > label { color: var(--znf-muted); font-size: 13px; font-weight: 600; }
255.znx-forum .znf-field > input[type="text"],
256.znx-forum .znf-field > select { width: 100%; max-width: none; margin: 0; }
257.znx-forum .znf-field--submit { grid-template-columns: 150px 1fr; margin: 16px 0 0; }
258.znx-forum .znf-field--submit > input[type="submit"] { grid-column: 2; justify-self: start; }
259@media (max-width: 560px) {
260 .znx-forum .znf-field, .znx-forum .znf-field--submit { grid-template-columns: 1fr; gap: 4px; }
261 .znx-forum .znf-field--submit > input[type="submit"] { grid-column: 1; }
262}
263
264/* ---- responsive --------------------------------------- */
265@media (max-width: 720px) {
266 .znx-forum .znf-board { grid-template-columns: 34px 1fr; }
267 .znx-forum .znf-board__count { grid-column: 2; text-align: left; margin-top: 2px; }
268 .znx-forum .znf-board__count b { display: inline; font-size: inherit; }
269 .znx-forum .znf-thread { grid-template-columns: 24px 1fr; }
270 .znx-forum .znf-thread__stats { grid-column: 2; text-align: left; margin-top: 4px; }
271 .znx-forum .znf-post { grid-template-columns: 1fr; }
272 .znx-forum .znf-post__side, .znx-forum .znf-post .avatar {
273 display: flex; align-items: center; gap: 12px; text-align: left;
274 border-right: 0; border-bottom: 1px solid var(--znf-border);
275 }
276 .znx-forum .znf-post__side img, .znx-forum .znf-post .avatar img { margin: 0; width: 56px; height: 56px; padding: 4px; }
277}
278
Top