znote-editor.css

main 192 lines · 3.6 KB Raw
Alex Alex Commit Initial commit 01/10/2026 09:20
1.znote-editor-wrap {
2 max-width: 100%;
3 margin: 0 0 12px;
4}
5
6div.sceditor-container {
7 width: 100% !important;
8 max-width: 100%;
9 border: 1px solid var(--border, #2b2f38);
10 border-radius: 4px;
11 background: var(--secondary, #191c21);
12 font-family: inherit;
13 resize: vertical;
14 overflow: hidden;
15}
16
17div.sceditor-container.sourceMode textarea,
18div.sceditor-container iframe {
19 background: var(--secondary, #191c21) !important;
20 color: var(--font-color, #9ba2b1);
21}
22
23div.sceditor-container.sourceMode textarea {
24 font-family: Consolas, "Courier New", monospace;
25 font-size: 13px;
26 padding: 6px 8px;
27 border: 0;
28}
29
30div.sceditor-toolbar {
31 background: var(--primary, #1e2128);
32 border-bottom: 1px solid var(--border, #2b2f38);
33 padding: 3px;
34}
35
36div.sceditor-group {
37 background: transparent;
38 border-radius: 3px;
39 margin: 1px 3px 1px 0;
40 padding: 0;
41}
42
43a.sceditor-button {
44 border-radius: 3px;
45 opacity: .75;
46 padding: 4px;
47 width: 24px;
48 height: 24px;
49 transition: background .12s, opacity .12s;
50}
51
52a.sceditor-button.disabled { opacity: .3; }
53
54a.sceditor-button:hover,
55a.sceditor-button.active {
56 opacity: 1;
57 background: rgba(255, 255, 255, .09);
58}
59
60/* The material icon pack draws SVG into the buttons, so the theme's
61 sprite background would only produce a 404 for famfamfam.png. */
62.sceditor-button div {
63 background-image: none !important;
64 width: 16px;
65 height: 16px;
66}
67
68.sceditor-button svg {
69 fill: var(--font-color, #9ba2b1);
70 stroke: var(--font-color, #9ba2b1);
71}
72
73a.sceditor-button:hover svg,
74a.sceditor-button.active svg {
75 fill: var(--anchor, #d9a441);
76 stroke: var(--anchor, #d9a441);
77}
78
79div.sceditor-grip { background-image: none; }
80
81/* Dropdowns (colour picker, font size, link/image prompts) */
82div.sceditor-dropdown {
83 background: var(--primary, #1e2128);
84 border: 1px solid var(--border, #2b2f38);
85 color: var(--font-color, #9ba2b1);
86 border-radius: 4px;
87 box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
88}
89
90div.sceditor-dropdown a,
91div.sceditor-dropdown label { color: var(--font-color, #9ba2b1); }
92
93div.sceditor-dropdown input,
94div.sceditor-dropdown textarea {
95 background: var(--secondary, #191c21);
96 border: 1px solid var(--border, #2b2f38);
97 color: var(--font-color, #9ba2b1);
98 border-radius: 3px;
99 padding: 4px 6px;
100}
101
102div.sceditor-dropdown input[type=button] {
103 background: var(--anchor, #d9a441);
104 color: #16181d;
105 border: 0;
106 cursor: pointer;
107 padding: 5px 12px;
108}
109
110.znote-editor-note {
111 font-size: 12px;
112 color: var(--font-color, #9ba2b1);
113 opacity: .7;
114 margin: 4px 0 10px;
115}
116
117.znote-editor-warning {
118 color: #e06c6c;
119 font-size: 13px;
120 margin: 6px 0 0;
121}
122
123.znote-editor-count {
124 font-size: 12px;
125 opacity: .6;
126 margin: 4px 0 0;
127}
128
129.znote-editor-count.is-over {
130 color: #e06c6c;
131 opacity: 1;
132 font-weight: 600;
133}
134
135/* ---- rendered post body ---- */
136.zbb-img {
137 max-width: 100%;
138 height: auto;
139 border-radius: 3px;
140}
141
142.zbb-quote {
143 margin: 8px 0;
144 padding: 8px 14px;
145 border-left: 3px solid var(--anchor, #d9a441);
146 background: rgba(255, 255, 255, .04);
147 border-radius: 0 3px 3px 0;
148}
149
150.zbb-quote cite {
151 display: block;
152 font-style: normal;
153 font-weight: 600;
154 opacity: .8;
155 margin-bottom: 4px;
156}
157
158.zbb-code {
159 margin: 8px 0;
160 padding: 10px 12px;
161 background: rgba(0, 0, 0, .3);
162 border: 1px solid var(--border, #2b2f38);
163 border-radius: 3px;
164 overflow-x: auto;
165 font-family: Consolas, "Courier New", monospace;
166 font-size: 13px;
167 white-space: pre-wrap;
168 word-break: break-word;
169}
170
171.zbb-list {
172 padding-left: 24px;
173 margin: 6px 0;
174}
175
176.zbb-video {
177 position: relative;
178 width: 100%;
179 max-width: 640px;
180 aspect-ratio: 16 / 9;
181 margin: 10px 0;
182}
183
184.zbb-video iframe {
185 position: absolute;
186 inset: 0;
187 width: 100%;
188 height: 100%;
189 border: 0;
190 border-radius: 3px;
191}
192
Top