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