xref: /template/ad-hominem/css/_edit.css (revision d65dddee9bc233440cabc6fa68f46168fe4415ce) 
1/**
2 * This file provides styles for the edit view (?do=edit), preview
3 * and section edit buttons.
4 */
5
6/* edit view
7********************************************************************/
8
9.mode_edit div.editBox {
10}
11
12.mode_edit div.editBox button {
13	border:				#666 solid 1px;
14	border-radius:		1px;
15	padding:			3pt 6pt;
16	margin:				0 2px;
17	cursor:				pointer;
18}
19
20.mode_edit div.editButtons button:hover {
21	text-decoration:	underline;
22}
23.mode_edit div.editBox button:focus {
24	outline:			@ini_focus_color solid 2px;
25	background-color:	@ini_background;
26}
27
28/*____________ toolbar ____________*/
29
30.mode_edit .editBox > .toolbar,
31.mode_preview .editBox > .toolbar {
32    display: block;
33	position: -webkit-sticky;
34	position: sticky;
35	top: 0;
36	background-color:	@ini_background;
37	padding-bottom: 2px;
38	z-index: 9;
39}
40
41
42.mode_edit div.toolbar,
43.mode_preview div.toolbar {
44    display: inline-block;
45}
46#draft__status {
47    font-size: small;
48    color: @ini_text_alt;
49    background-color: inherit;
50}
51[dir=rtl] #draft__status {
52    /* float: left; */
53}
54#tool__bar {
55    float: left;
56}
57[dir=rtl] #tool__bar {
58    float: right;
59}
60
61/* hide the hard-coded button images */
62#tool__bar button>img {
63	visibility: hidden;
64}
65
66#tool__bar button {
67	background:	#E9E9ED url('images/editor/default.svg') center no-repeat;
68	background-size: 20px;
69	padding: 3pt 6pt;
70	border:	@ini_border solid 1px;
71}
72#tool__bar button[aria-haspopup=true]:after,
73#tool__bar button:nth-child(10):after,
74#tool__bar button:nth-child(15):after {
75	content: '';
76	display: inline-block;
77	position: absolute;
78	width: 8px;
79	height: 8px;
80	margin-left: -2px;
81	margin-top: 14px;
82	background:	transparent none center no-repeat;
83	background-size: 13px;
84}
85
86#tool__bar button[aria-haspopup=true]:after {
87	background-image: url('images/editor/overlay-menu.svg');
88}
89#tool__bar button:nth-child(10):after,
90#tool__bar button:nth-child(15):after {
91	background-image: url('images/editor/overlay-popup.svg');
92}
93
94/* import the new icons */
95#tool__bar button[accesskey="b"] { background-image: url('images/editor/format-bold.svg'); margin-left: 1.5pt; }
96#tool__bar button[accesskey="i"] { background-image: url('images/editor/format-italic.svg'); }
97#tool__bar button[accesskey="u"] { background-image: url('images/editor/format-underline.svg'); }
98#tool__bar button[accesskey="m"] { background-image: url('images/editor/format-monospace.svg'); }
99#tool__bar button[accesskey="d"] { background-image: url('images/editor/format-strikethrough.svg'); }
100#tool__bar button[accesskey="8"] { background-image: url('images/editor/format-header-equal.svg'); margin-left: 4pt; }
101#tool__bar button[accesskey="9"] { background-image: url('images/editor/format-header-decrease.svg'); }
102#tool__bar button[accesskey="0"] { background-image: url('images/editor/format-header-increase.svg'); }
103#tool__bar button:nth-child(9) { background-image: url('images/editor/format-header-menu.svg'); }
104#tool__bar button[accesskey="l"] { background-image: url('images/editor/insert-link.svg');margin-left:4pt; }
105#tool__bar button:nth-child(11) { background-image: url('images/editor/insert-external-link.svg'); }
106#tool__bar button[accesskey="-"] { background-image: url('images/editor/format-list-numbered.svg');  margin-left:4pt;}
107#tool__bar button[accesskey="."] { background-image: url('images/editor/format-list-bulleted.svg'); }
108#tool__bar button:nth-child(14) { background-image: url('images/editor/insert-hr.svg');margin-left:4pt;}
109#tool__bar button:nth-child(15) { background-image: url('images/editor/insert-media.svg');margin-left:4pt; }
110#tool__bar button:nth-child(16) { background-image: url('images/editor/insert-emoticon.svg');margin-left:4pt; }
111#tool__bar button:nth-child(17) { background-image: url('images/editor/insert-symbol.svg'); }
112#tool__bar button[accesskey="y"] { background-image: url('images/editor/insert-signature.svg');margin-left:4pt; }
113
114/* buttons inside of toolbar */
115.mode_edit div.toolbar button.toolbutton {
116	margin:		0;
117}
118/* picker popups (outside of .dokuwiki) */
119div.picker {
120    width: 300px;
121    border: 1px solid #CCC;
122    background-color: #EEE;
123    color: inherit;
124}
125/* picker for headlines */
126div.picker.pk_hl {
127    width: auto;
128}
129
130/* buttons inside of picker */
131div.picker button.pickerbutton,
132div.picker button.toolbutton {
133    padding: .1em .35em;
134    border-width: 0;
135}
136
137/*____________ edit textarea ____________*/
138
139.dokuwiki textarea.edit {
140    width: 100%;
141	padding: 1px 0 0 2px;
142    margin-bottom: .5em;
143	background-color: #EEE;
144	font-family: 'Source Code Pro',Menlo,Consolas,'Courier New',Courier,monospace;
145	font-size: 12pt;
146	line-height: 17pt;
147	caret-color: #0078D7;
148}
149.dokuwiki textarea.edit:focus {
150	outline: transparent none 0;
151}
152
153/*____________ below the textarea ____________*/
154
155.dokuwiki div.editBar {
156    display: grid;
157	grid-template-columns: 320px minmax(500px, 1fr) auto;
158	align-items: start;
159    margin-bottom: .5em;
160}
161
162/* size and wrap controls */
163#size__ctl {
164	grid-row: 1;
165    grid-column: 3;
166	min-width: 64px;
167}
168#size__ctl img {
169    cursor: pointer;
170}
171
172/* edit buttons */
173.dokuwiki .editBar .editButtons {
174	grid-row: 1;
175	grid-column: 1;
176	display: grid;
177	grid-template-columns: 1fr 1fr 1fr;
178}
179[dir=rtl] .dokuwiki .editBar .editButtons {
180    margin-right: 0;
181    margin-left: 1em;
182}
183.dokuwiki .editBar .editButtons button {
184	border: #CCC solid 1.5pt;
185	padding: .25em .5em;
186	margin: 0 2pt;
187}
188.dokuwiki .editBar .editButtons button::before {
189	content: ' ';
190	display: inline-block;
191	position: relative;
192	top: .1em;
193	width: 1em;
194	height: 1em;
195	background: none center bottom no-repeat;
196	background-size: 1em;
197	margin-right: 4px;
198}
199
200.dokuwiki .editBar .editButtons button#edbtn__save {
201	background-color: #ccddff;
202}
203.dokuwiki .editBar .editButtons button#edbtn__save::before {
204	background-image: url('images/editor/edit-save.svg');
205}
206.dokuwiki .editBar .editButtons button#edbtn__preview {
207	background-color: #ccffdd;
208}
209.dokuwiki .editBar .editButtons button#edbtn__preview::before {
210	background-image: url('images/editor/edit-preview.svg');
211}
212.dokuwiki .editBar .editButtons button[name="do[cancel]"] {
213	background-color: #ffccdd;
214}
215.dokuwiki .editBar .editButtons button[name="do[cancel]"]::before {
216	background-image: url('images/editor/edit-cancel.svg');
217}
218
219/* summary input and minor changes checkbox */
220.dokuwiki .editBar .summary {
221	grid-row: 1;
222	grid-column: 2;
223    display: grid;
224	grid-template-columns: 1fr auto;
225	line-height: 1em;
226	padding-top: 2pt;
227	padding-right: 5pt;
228}
229
230.dokuwiki .editBar .summary #edit__summary {
231	background-color: @ini_background_alt;
232	border-color: @ini_border;
233	color: @ini_text;
234	border-radius: 3pt;
235	margin-left: 0;
236	width: 100%;
237}
238
239.dokuwiki .editBar .summary label {
240    white-space: nowrap;
241}
242.dokuwiki .editBar .summary label:last-child  {
243	padding: 2pt 0 2pt 4pt;
244}
245.dokuwiki .editBar .summary > label:first-child {
246	display: grid;
247	grid-template-columns: auto 1fr;
248	column-gap: 10px;
249	padding: 2pt 5pt 0 0;
250}
251.dokuwiki .editBar .summary label span {
252    font-size: small;
253	margin: 0 1pt 0 3pt;
254}
255.dokuwiki .editBar .summary input {
256}
257/* change background colour if summary is missing */
258.dokuwiki .editBar .summary input.missing {
259    color: @ini_text;
260    background-color: #ffcccc;
261}
262
263/* preview
264********************************************************************/
265
266.dokuwiki div.preview {
267    border: dotted #CCC;
268    border-width: .2em 0;
269    padding: 1.4em 0;
270    margin-bottom: 1.4em;
271}
272
273/* narrow screen overrides: */
274@media (max-width: @ini_tablet_width) {
275
276	.dokuwiki div.editBar {
277		grid-template-columns: 1fr 5px auto;
278	}
279	.dokuwiki div.editBar .summary {
280		grid-row: 2;
281		grid-column: 1 / span 3;
282	}
283	.dokuwiki .editBar .summary #edit__summary {
284		margin-left: 8pt;
285		width: ~"calc(100% - 8px)";
286	}
287	.dokuwiki .editBar .summary label:last-child {
288		/*text-align: right;*/
289	}
290}
291@media (max-width: @ini_phone_width) {
292
293	.dokuwiki .editBar .summary,
294	.dokuwiki .editBar .summary > label:first-child {
295		grid-template-columns: 100%;
296	}
297}
298@media (max-width: 390px) {
299
300	.dokuwiki .editBar .editButtons button {
301		overflow: hidden;
302		height: 30px;
303		line-height: 24px;
304	}
305	.dokuwiki .editBar .summary #edit__summary {
306		margin-left: 4px;
307		width: 100%;
308	}
309
310}
311/* dark mode overrides */
312@media (prefers-color-scheme: dark) {
313
314	body.mode_edit.darkmode .editBox > .toolbar,
315	body.mode_preview.darkmode .editBox > .toolbar {
316		background-color:	@ini_background_dark;
317	}
318
319	body.mode_edit.darkmode textarea.edit,
320	body.mode_preview.darkmode textarea.edit {
321		background-color:	@ini_background_alt_dark;
322		border:				@ini_headlines_dark solid 1px;
323		color:				@ini_text_dark;
324	}
325
326	body.mode_edit.darkmode div.editBox button,
327	body.mode_preview.darkmode div.editBox button {
328		background-color: @ini_headlines_dark;
329		border-color: @ini_border_dark;
330	}
331	body.mode_edit.darkmode .editBar .editButtons button::before,
332	body.mode_preview.darkmode .editBar .editButtons button::before {
333		filter: invert(.9);
334	}
335	body.darkmode .editBar .editButtons button#edbtn__save {
336		background-color: #334466;
337		color: #CCDDFF;
338	}
339	body.darkmode .editBar .editButtons button#edbtn__preview {
340		background-color: #226633;
341		color: #CCFFDD;
342	}
343	body.darkmode .editBar .editButtons button[name="do[cancel]"] {
344		background-color: #663344;
345		color: #FFCCDD;
346	}
347
348	body.mode_edit.darkmode #tool__bar button,
349	body.mode_preview.darkmode #tool__bar button {
350		border-color:	@ini_border_dark;
351		filter: invert(.8);
352	}
353	body.mode_edit.darkmode .editBar .editButtons button,
354	body.mode_preview.darkmode .editBar .editButtons button {
355		border-color: @ini_border_dark;
356	}
357
358	body.mode_edit.darkmode .editBar .summary #edit__summary,
359	body.mode_preview.darkmode .editBar .summary #edit__summary {
360		background-color:	@ini_background_alt_dark;
361		border-color: @ini_headlines_dark;
362		color: @ini_text_dark;
363	}
364}
365