style.css

main 985 lines · 19.2 KB Raw
Alex Alex Commit Initial commit 01/10/2026 09:20
1:root {
2 /* backgrounds */
3 --primary: rgb(30,33,40);
4 --secondary: rgb(25,28,33);
5 --third: #ddd;
6 --border: rgb(19,20,23);
7
8 /* text */
9 --font-color: rgb(155,162,177);
10
11 /* Links / anchors */
12 --anchor:#b39062;
13 --anchor-hover:#e79424;
14
15 /* buttons or alert boxes with different colors */
16 --bg-danger: #3c0e0e;
17 --color-danger: #9e5858;
18 --border-danger: #350505;
19
20 --bg-warning: #905c00;
21 --color-warning: #39280a;
22 --border-warning: #322001;
23
24 --bg-info: #005d90;
25 --color-info: #00263e;
26 --border-info: #022530;
27
28 --bg-success: #009039;
29 --color-success: #003f0c;
30 --border-success: #00380c;
31
32 --bg-default: rgb(15,17,20);
33 --color-default: #968452;
34 --border-default: #000;
35
36 /* accent (gold) used by buttons, banners and highlights */
37 --accent: #d1a233;
38 --accent-ink: #1a1510;
39}
40
41
42
43body {
44 font-family: 'arial', sans-serif;
45 color:var(--font-color);
46}
47
48
49body, ul { margin: 0; padding: 0; }
50li { list-style: none; }
51a { text-decoration: none;color:var(--anchor); }
52a:hover {color:var(--anchor-hover);}
53a:hover, button:hover, input[type="submit"]:hover { cursor: pointer; }
54* {-webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;transition-duration: 0.2s;}
55*:hover {-webkit-transition-duration: 0s;-moz-transition-duration: 0s;-o-transition-duration: 0s;transition-duration: 0s;}
56
57nav .container > div > ul > li > ul {
58 position: absolute;
59 border: 2px solid;
60 border-top:none !important;
61 border-color: var(--border);
62 width: 200px;
63}
64
65nav { border: 10px solid var(--primary); }
66nav .container { padding-left: 10px; }
67nav .container > div > ul > li,
68.modIcon:hover > i:nth-child(2) { display: inline-block; }
69
70nav .container > div > ul > li > a,
71nav .container > div > ul > li > .menuCategory { padding: 20px; }
72
73/* A top-level category is a heading, not a link: same look, no navigation. */
74nav .container > div > ul > li > .menuCategory {
75 display: block;
76 z-index: 1;
77 color: var(--anchor);
78 cursor: default;
79}
80nav .container > div > ul > li:hover > .menuCategory { color: var(--anchor-hover); }
81nav .container > div > ul > li:hover > ul,
82nav .container > div > ul > li > a,
83nav .container > div > ul > li > ul > li > a { display: block; z-index: 1; }
84nav .container > div > ul > li > ul > li > a { padding: 10px 20px; }
85nav .container, .preventCollapse, .ellipsis { overflow: hidden; }
86
87.topPane { margin-bottom: 10px; }
88.leftPane { width: 70%; }
89.rightPane { width: 29%; }
90.searchForm { width: 200px; }
91.body { padding: 10px 0px; }
92table { width: 100%; }
93td { padding: 10px 5px; }
94.header { color: var(--accent); }
95.feedContainer { margin:2rem 0; }
96.pull-left { float:left; }
97.pull-right { float:right; }
98.well, .header { width: auto; }
99.centralizeContent { text-align: center; }
100.smedia { font-size: 2em; }
101
102.banner {
103 background: url("../img/header.png");
104 height: 240px;
105 background-size: 100%;
106 background-repeat: no-repeat;
107 margin-top: 30px;
108 border: 10px solid var(--primary);
109}
110
111
112
113.searchForm input {
114 width: 100%;
115 height: 25px;
116 border: 1px solid var(--border);
117 color: var(--font-color);
118 font-size: 1em;
119}
120
121#countDownTimer {
122 line-height: 2.3;
123 padding: 0px 10px;
124 color: #5390a8;
125}
126
127.modIcon > i:nth-child(2),
128.modIcon:hover > i:nth-child(1),
129/*.loginContainer, */
130nav .container > div > ul > li > ul {
131 display: none;
132}
133
134.loginForm {
135 display: flex;
136 flex-wrap: wrap;
137}
138.loginForm button:hover {
139 background: #0000004d;
140}
141.loginForm button {
142 width: 100%;
143 margin-top: 10px;
144 background: rgb(15,17,20);
145 color: var(--font-color);
146 height: 40px;
147 border: 1px solid var(--border);
148 font-size: 1em;
149}
150
151.loginForm input {
152 width: 100%;
153 height: 30px;
154 border: none;
155 color: #fff;
156 font-size: 1em;
157 border-bottom: 1px solid var(--border);
158}
159
160.main {
161 width: 1220px;
162 margin: 2rem auto;
163 position: relative;
164 z-index: 1;
165}
166
167.ellipsis {
168 text-overflow: ellipsis;
169 white-space: nowrap;
170}
171
172.alert-box {
173 max-width: 500px;
174 font-size: 14px;
175 border-radius: 5px;
176 border: 1px solid var(--third);
177 margin: 0 auto;
178 margin-bottom: 15px;
179 text-align: center;
180}
181
182.alert-default {
183 background: var(--bg-default);
184 color: var(--color-default);
185 border-color: var(--border-default);
186}
187.alert-info {
188 background: var(--bg-info);
189 color: var(--color-info);
190 border-color: var(--border-info);
191}
192.alert-success {
193 background: var(--bg-success);
194 color: var(--color-success);
195 border-color: var(--border-success);
196}
197.alert-warning {
198 background: var(--bg-warning);
199 color: var(--color-warning);
200 border-color: var(--border-warning);
201}
202.alert-danger {
203 background: var(--bg-danger);
204 color: var(--color-danger);
205 border-color: var(--border-danger);
206}
207.alert-collapse {display:inline-block;}
208.alert-size1 { font-size: 12px; }
209.alert-size2 { font-size: 15px; }
210.alert-size3 { font-size: 18px; }
211.alert-size4 { font-size: 20px; }
212
213
214nav .container > div > ul > li > ul > li > a:hover,
215.searchForm input, #countDownTimer, .loginForm input,
216nav, footer, table, .header, .feedContainer {
217 background: var(--primary);
218}
219.loginForm .well {
220 width: 100%;
221}
222
223body, nav .container,
224nav .container > div > ul > li > ul,
225.leftPane, .rightPane, .topPane,
226tr:nth-child(2n+1) {
227 background: var(--secondary);
228}
229
230footer, .feedContainer,
231nav .container, .topPane {
232 border-bottom: 2px solid var(--border)
233}
234
235table, .header, .well, .smedia a {
236 padding: 10px;
237}
238
239.searchForm input,
240.loginForm input,
241.alert-box {
242 padding: 5px;
243}
244
245/* Znote AAC */
246.leftPane img {
247 max-width: 100%;
248}
249/* adding button style to select */
250select {
251 background: rgb(15,17,20);
252 color: var(--font-color);
253 height: 40px;
254 border: 1px solid var(--border);
255 font-size: 1em;
256}
257input {
258 background: rgb(15,17,20);
259 color: var(--font-color);
260 height: 40px;
261 border: 1px solid var(--border);
262 font-size: 1em;
263}
264#loginContainer li {
265 text-align: right;
266}
267
268ul.linkbuttons {
269 margin-top: 8px;
270 padding: 0 8px;
271}
272ul.linkbuttons li {
273 display: inline-block;
274 border: 1px solid var(--accent);
275 width: calc(50% - 10px);
276 float: left;
277 margin-bottom: 16px;
278 text-align: center;
279}
280ul.linkbuttons li:nth-child(odd) {
281 margin-right: 16px;
282}
283ul.linkbuttons li a {
284 padding: 5px 0;
285 display: inline-block;
286 width: 100%;
287 text-align: center;
288}
289ul.linkbuttons:after {
290 content: '';
291 display: block;
292 clear: both;
293}
294.widget,
295.widget .body,
296.search_widget,
297.search_widget .body {
298 padding-bottom: 0;
299}
300.widget center {
301 margin: auto;
302}
303.widget h3 {
304 margin-bottom: 0;
305}
306.search_widget form {
307 margin: auto;
308}
309.search_widget input {
310 width: 50%;
311 float: left;
312}
313.search_widget label {
314 padding: 9px;
315 float: left;
316}
317.search_widget form:after {
318 display: block;
319 content: '';
320 clear: both;
321}
322div.relative {
323 position: relative;
324}
325.search_widget #name_suggestion {
326 position: absolute;
327 width: 280px;
328 left: -290px;
329 display: none;
330}
331.search_widget #name_suggestion.show {
332 display: block;
333}
334.search_widget .sname {
335 text-align: right;
336}
337.search_widget .sname a {
338 display: inline-block;
339 background-color: black;
340 padding: 10px 20px;
341 border-bottom: 1px solid rgb(30,33,40);
342}
343.page_credits .feedContainer .pull-left.leftPane {
344 box-sizing: border-box;
345 padding-left: 8px;
346 padding-right: 8px;
347}
348
349.page_characterprofile #characterProfileTable thead th:first-of-type {
350 position: relative;
351 width: 28%;
352}
353.page_characterprofile #characterProfileTable thead th:last-of-type {
354 text-align: left;
355 padding-left: 16px;
356}
357.page_characterprofile .outfit {
358 position: absolute;
359 top: 0;
360 left: 0;
361}
362.page_characterprofile .flag {
363 position: absolute;
364 top: 16px;
365 right: 16px;
366}
367.postHolder iframe {
368 display: block;
369 margin: auto;
370}
371.znx-empty-box {
372 margin: 0 0 18px;
373 padding: 16px;
374 border: 1px solid var(--border);
375 border-radius: 6px;
376 background: var(--secondary);
377 color: var(--color-default);
378 text-align: center;
379}
380.znx-section-head {
381 margin: 0 0 12px;
382 padding: 10px 14px;
383 border: 1px solid var(--border);
384 border-radius: 6px;
385 background: var(--primary);
386 color: var(--accent);
387 font-weight: 800;
388 font-size: 15px;
389}
390.sr-only {
391 position: absolute;
392 width: 1px;
393 height: 1px;
394 margin: -1px;
395 padding: 0;
396 overflow: hidden;
397 clip-path: inset(50%);
398 white-space: nowrap;
399 border: 0;
400}
401.znx-acct-head {
402 margin: 0 0 12px;
403 padding: 10px 14px;
404 border: 1px solid var(--border);
405 border-radius: 6px;
406 background: var(--primary);
407 color: var(--accent);
408 font-weight: 800;
409 font-size: 15px;
410}
411.znx-acct-info {
412 margin: 0 0 18px;
413 padding: 16px;
414 border: 1px solid var(--border);
415 border-radius: 6px;
416 background: var(--secondary);
417}
418.znx-acct-info p {
419 margin: 0;
420 line-height: 1.6;
421}
422.znx-acct-2fa {
423 display: flex;
424 flex-wrap: wrap;
425 gap: 10px 24px;
426 margin-top: 12px;
427 padding-top: 12px;
428 border-top: 1px solid var(--border);
429}
430.znx-acct-2fa__row {
431 display: flex;
432 align-items: center;
433 gap: 8px;
434 font-size: 13px;
435}
436.znx-acct-badge {
437 display: inline-block;
438 padding: 2px 10px;
439 border-radius: 12px;
440 font-size: 12px;
441 font-weight: 700;
442 text-decoration: none;
443}
444.znx-acct-badge.is-on {
445 background: rgba(0,144,57,0.18);
446 color: #3fbf6a;
447 border: 1px solid #1f5c37;
448}
449.znx-acct-badge.is-off {
450 background: rgba(60,14,14,0.35);
451 color: #c47a7a;
452 border: 1px solid #4a2020;
453}
454.znx-acct-badge:hover {
455 color: var(--anchor-hover);
456}
457.znx-acct-table-wrap {
458 border: 1px solid var(--border);
459 border-radius: 6px;
460 overflow: hidden;
461 margin-bottom: 18px;
462}
463.znx-acct-table {
464 width: 100%;
465 border-collapse: collapse;
466}
467.znx-acct-table th {
468 background: var(--primary);
469 color: var(--accent);
470 text-align: left;
471 font-size: 12px;
472 padding: 10px;
473}
474.znx-acct-table td {
475 padding: 8px 10px;
476 font-size: 13px;
477 border-top: 1px solid var(--border);
478}
479.znx-acct-table tr.yellow td {
480 background: var(--primary);
481 color: var(--accent);
482 text-align: left;
483 font-size: 12px;
484 border-top: none;
485}
486.znx-pill-nav {
487 display: flex;
488 flex-wrap: wrap;
489 gap: 8px;
490 margin: 0 0 18px;
491}
492.znx-pill-nav a {
493 display: inline-block;
494 padding: 6px 14px;
495 border: 1px solid var(--border);
496 border-radius: 999px;
497 background: var(--secondary);
498 color: var(--font-color);
499 font-size: 12px;
500 text-decoration: none;
501}
502.znx-pill-nav a:hover {
503 border-color: var(--accent);
504 color: var(--anchor-hover);
505}
506.znx-jump-top {
507 margin: 0 0 10px;
508 font-size: 12px;
509}
510.znx-acct-toolbar {
511 display: flex;
512 flex-wrap: wrap;
513 gap: 10px;
514 align-items: stretch;
515 padding: 14px;
516 border: 1px solid var(--border);
517 border-radius: 6px;
518 background: var(--secondary);
519 margin-bottom: 18px;
520}
521.znx-acct-toolbar__field {
522 flex: 1 1 200px;
523 min-width: 160px;
524}
525.znx-acct-toolbar__submit {
526 flex: 0 0 auto;
527 min-width: 0;
528 display: flex;
529}
530.znx-acct-select {
531 width: 100%;
532 height: 40px;
533 padding: 0 10px;
534 background: var(--bg-default);
535 color: var(--font-color);
536 border: 1px solid var(--border);
537 border-radius: 6px;
538 font-size: 13px;
539}
540.znx-acct-btn {
541 height: 40px;
542 padding: 0 22px;
543 border: 1px solid var(--accent);
544 border-radius: 6px;
545 background: var(--accent);
546 color: var(--accent-ink);
547 font-weight: 700;
548 font-size: 13px;
549}
550.znx-acct-btn:hover {
551 background: var(--anchor-hover);
552 border-color: var(--anchor-hover);
553}
554@media (max-width: 640px) {
555 .znx-acct-toolbar {
556 flex-direction: column;
557 }
558 .znx-acct-toolbar__field,
559 .znx-acct-toolbar__submit {
560 flex: 1 1 auto;
561 width: 100%;
562 }
563 .znx-acct-btn {
564 width: 100%;
565 }
566}
567.znx-acct-edit-btn {
568 display: inline-block;
569 padding: 4px 12px;
570 border: 1px solid var(--accent);
571 border-radius: 5px;
572 background: transparent;
573 color: var(--accent);
574 font-weight: 700;
575 font-size: 12px;
576 text-decoration: none;
577}
578.znx-acct-edit-btn:hover {
579 background: var(--accent);
580 color: var(--accent-ink);
581}
582.znx-editchar-back {
583 margin: 0 0 14px;
584}
585.znx-editchar-back a {
586 display: inline-flex;
587 align-items: center;
588 gap: 6px;
589 height: 34px;
590 padding: 0 16px;
591 border: 1px solid var(--border);
592 border-radius: 6px;
593 background: var(--primary);
594 color: var(--accent);
595 font-weight: 700;
596 font-size: 13px;
597 text-decoration: none;
598}
599.znx-editchar-back a:hover {
600 border-color: var(--accent);
601 color: var(--anchor-hover);
602}
603.znx-editchar-notice {
604 font-size: 13px;
605 line-height: 1.6;
606}
607.znx-editchar-notice ul {
608 margin: 0;
609 padding-left: 18px;
610}
611.znx-editchar-notice--ok {
612 border-color: #1f5c37;
613 color: #3fbf6a;
614}
615.znx-editchar-notice--error {
616 border-color: #4a2020;
617 color: #c47a7a;
618}
619.znx-editchar-info {
620 display: flex;
621 flex-wrap: wrap;
622 gap: 8px 28px;
623}
624.znx-editchar-info__row {
625 display: flex;
626 align-items: center;
627 gap: 8px;
628 font-size: 13px;
629}
630.znx-editchar-info__row span {
631 color: var(--color-default);
632 text-transform: uppercase;
633 font-size: 11px;
634 letter-spacing: .04em;
635}
636.znx-editchar-box {
637 margin: 0 0 18px;
638 padding: 14px;
639 border: 1px solid var(--border);
640 border-radius: 6px;
641 background: var(--secondary);
642}
643.znx-editchar-box--muted {
644 color: var(--color-default);
645 font-size: 13px;
646}
647.znx-editchar-ticket-note {
648 margin-top: 8px;
649 font-size: 12px;
650 color: var(--color-default);
651}
652.znx-settings-field {
653 margin-bottom: 14px;
654}
655.znx-settings-field .znx-acct-select {
656 max-width: 320px;
657}
658.znx-settings-field label {
659 display: block;
660 margin-bottom: 6px;
661 font-size: 12px;
662 color: var(--color-default);
663 text-transform: uppercase;
664 letter-spacing: .04em;
665}
666.znx-guild-create {
667 margin: 0 0 18px;
668 padding: 14px;
669 border: 1px solid var(--border);
670 border-radius: 6px;
671 background: var(--secondary);
672}
673.znx-guild-create ul {
674 margin: 0;
675 padding: 0;
676}
677.znx-guild-create li {
678 list-style: none;
679 display: flex;
680 flex-wrap: wrap;
681 align-items: center;
682 gap: 10px;
683 font-size: 12px;
684 color: var(--color-default);
685 text-transform: uppercase;
686 letter-spacing: .04em;
687}
688.znx-guild-create li br {
689 display: none;
690}
691.znx-guild-create select,
692.znx-guild-create input[type="text"] {
693 height: 40px;
694 padding: 0 10px;
695 background: var(--bg-default);
696 color: var(--font-color);
697 border: 1px solid var(--border);
698 border-radius: 6px;
699 font-size: 13px;
700 text-transform: none;
701 letter-spacing: normal;
702}
703.znx-guild-create input[type="submit"] {
704 height: 40px;
705 padding: 0 22px;
706 border: 1px solid var(--accent);
707 border-radius: 6px;
708 background: var(--accent);
709 color: var(--accent-ink);
710 font-weight: 700;
711 font-size: 13px;
712 text-transform: none;
713 letter-spacing: normal;
714}
715.znx-guild-create input[type="submit"]:hover {
716 background: var(--anchor-hover);
717 border-color: var(--anchor-hover);
718 color: var(--accent-ink);
719}
720.znx-guild-overview #guildTitleDiv {
721 display: flex;
722 align-items: center;
723 gap: 14px;
724 margin: 0 0 18px;
725 padding: 14px;
726 border: 1px solid var(--border);
727 border-radius: 6px;
728 background: var(--primary);
729}
730.znx-guild-overview #guildImageDiv {
731 flex: 0 0 auto;
732 margin: 0 !important;
733}
734.znx-guild-overview #guildImageDiv img {
735 display: block;
736 border-radius: 6px;
737}
738.znx-guild-overview #guildDescription h1 {
739 margin: 0 0 4px;
740 font-size: 20px;
741 color: var(--accent);
742}
743.znx-guild-overview #guildDescription p {
744 margin: 0;
745 font-size: 13px;
746 color: var(--font-color);
747}
748.znx-guild-overview h1,
749.znx-guild-overview h2,
750.znx-guild-overview h3 {
751 margin: 0 0 12px;
752 padding: 10px 14px;
753 border: 1px solid var(--border);
754 border-radius: 6px;
755 background: var(--primary);
756 color: var(--accent);
757 font-weight: 800;
758 font-size: 15px;
759}
760.znx-guild-overview table {
761 width: 100%;
762 border-collapse: collapse;
763 margin: 0 0 18px;
764 border: 1px solid var(--border);
765 border-radius: 6px;
766 overflow: hidden;
767}
768.znx-guild-overview table th,
769.znx-guild-overview table td {
770 padding: 8px 10px;
771 font-size: 13px;
772 border-top: 1px solid var(--border);
773}
774.znx-guild-overview table tr.yellow th,
775.znx-guild-overview table tr.yellow td {
776 background: var(--primary);
777 color: var(--accent);
778 border-top: none;
779 text-align: left;
780 font-size: 12px;
781}
782.znx-guild-overview ul {
783 margin: 0 0 14px;
784 padding: 0;
785}
786.znx-guild-overview li {
787 list-style: none;
788 display: flex;
789 flex-wrap: wrap;
790 align-items: center;
791 gap: 10px;
792 margin-bottom: 8px;
793 font-size: 12px;
794 color: var(--color-default);
795 text-transform: uppercase;
796 letter-spacing: .04em;
797}
798.znx-guild-overview li:last-child {
799 margin-bottom: 0;
800}
801.znx-guild-overview li br {
802 display: none;
803}
804.znx-guild-overview form {
805 margin: 0 0 18px;
806 padding: 14px;
807 border: 1px solid var(--border);
808 border-radius: 6px;
809 background: var(--secondary);
810}
811.znx-guild-overview select,
812.znx-guild-overview input[type="text"],
813.znx-guild-overview input[type="number"],
814.znx-guild-overview textarea {
815 height: 40px;
816 padding: 0 10px;
817 background: var(--bg-default);
818 color: var(--font-color);
819 border: 1px solid var(--border);
820 border-radius: 6px;
821 font-size: 13px;
822 text-transform: none;
823 letter-spacing: normal;
824}
825.znx-guild-overview textarea {
826 height: auto;
827 min-height: 70px;
828 padding: 10px;
829 width: 100%;
830 box-sizing: border-box;
831 font-family: inherit;
832}
833.znx-guild-overview input[type="submit"] {
834 height: 40px;
835 padding: 0 22px;
836 border: 1px solid var(--accent);
837 border-radius: 6px;
838 background: var(--accent);
839 color: var(--accent-ink);
840 font-weight: 700;
841 font-size: 13px;
842 text-transform: none;
843 letter-spacing: normal;
844 cursor: pointer;
845}
846.znx-guild-overview input[type="submit"]:hover {
847 background: var(--anchor-hover);
848 border-color: var(--anchor-hover);
849 color: var(--accent-ink);
850}
851.znx-dl-grid {
852 display: grid;
853 grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
854 gap: 12px;
855 margin: 0 0 18px;
856}
857.znx-dl-card {
858 display: flex;
859 flex-direction: column;
860 align-items: center;
861 gap: 8px;
862 padding: 14px;
863 border: 1px solid var(--border);
864 border-radius: 6px;
865 background: var(--secondary);
866 text-align: center;
867}
868.znx-dl-card img {
869 max-width: 64px;
870 max-height: 64px;
871}
872.znx-dl-card__label {
873 font-weight: 700;
874 color: var(--font-color);
875}
876.znx-dl-card__desc {
877 font-size: 12px;
878 color: var(--color-default);
879}
880.znx-dl-card__btn {
881 display: inline-block;
882 margin-top: auto;
883 padding: 6px 18px;
884 border: 1px solid var(--accent);
885 border-radius: 6px;
886 background: var(--accent);
887 color: var(--accent-ink);
888 font-weight: 700;
889 font-size: 12px;
890 text-decoration: none;
891}
892.znx-dl-card__btn:hover {
893 background: var(--anchor-hover);
894 border-color: var(--anchor-hover);
895 color: var(--accent-ink);
896}
897.znx-dl-register {
898 margin-top: 14px;
899 padding-top: 14px;
900 border-top: 1px solid var(--border);
901 display: flex;
902 flex-direction: column;
903 align-items: flex-start;
904 gap: 10px;
905 font-size: 13px;
906}
907.znx-dl-steps {
908 margin: 0;
909 padding: 0;
910 list-style: none;
911 counter-reset: znx-dl-step;
912}
913.znx-dl-steps li {
914 position: relative;
915 margin-bottom: 14px;
916 padding-left: 34px;
917 line-height: 1.6;
918 font-size: 13px;
919}
920.znx-dl-steps li:last-child {
921 margin-bottom: 0;
922}
923.znx-dl-steps li::before {
924 counter-increment: znx-dl-step;
925 content: counter(znx-dl-step);
926 position: absolute;
927 left: 0;
928 top: 0;
929 width: 22px;
930 height: 22px;
931 border-radius: 50%;
932 background: var(--primary);
933 color: var(--accent);
934 font-size: 12px;
935 font-weight: 800;
936 display: flex;
937 align-items: center;
938 justify-content: center;
939}
940.znx-editchar-inline {
941 display: flex;
942 flex-wrap: wrap;
943 align-items: center;
944 justify-content: space-between;
945 gap: 10px;
946 font-size: 13px;
947}
948.znx-editchar-textarea {
949 width: 100%;
950 min-height: 120px;
951 margin-bottom: 10px;
952 padding: 10px;
953 background: var(--bg-default);
954 color: var(--font-color);
955 border: 1px solid var(--border);
956 border-radius: 6px;
957 font-size: 13px;
958 font-family: inherit;
959 resize: vertical;
960 box-sizing: border-box;
961}
962.znx-char-action {
963 height: 36px;
964 padding: 0 16px;
965 border: 1px solid var(--border);
966 border-radius: 6px;
967 background: var(--primary);
968 color: var(--font-color);
969 font-weight: 700;
970 font-size: 12px;
971}
972.znx-char-action:hover {
973 border-color: var(--accent);
974 color: var(--anchor-hover);
975}
976.znx-char-action--danger {
977 border-color: #4a2020;
978 background: #3c0e0e;
979 color: #c47a7a;
980}
981.znx-char-action--danger:hover {
982 border-color: #9e5858;
983 color: #ff8a8a;
984}
985
Top