xref: /template/ad-hominem/css/_edit.css (revision 47c2444da2b4844a31f547760ea8e1d38be85b75) 
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 div.toolbar {
40    display: inline-block;
41}
42#draft__status {
43    font-size: small;
44    color: @ini_text_alt;
45    background-color: inherit;
46}
47[dir=rtl] #draft__status {
48    /* float: left; */
49}
50#tool__bar {
51    float: left;
52}
53[dir=rtl] #tool__bar {
54    float: right;
55}
56
57/* hide the hard-coded button images */
58#tool__bar button>img {
59	visibility: hidden;
60}
61
62#tool__bar button {
63	background:	#E9E9ED none center no-repeat;
64	background-size: 20px;
65	border:	@ini_border solid 1px;
66}
67#tool__bar button[aria-haspopup=true]:after,
68#tool__bar button:nth-child(10):after,
69#tool__bar button:nth-child(15):after {
70	content: '';
71	display: inline-block;
72	position: absolute;
73	width: 8px;
74	height: 8px;
75	margin-left: -2px;
76	margin-top: 14px;
77	background:	transparent none center no-repeat;
78	background-size: 13px;
79}
80
81#tool__bar button[aria-haspopup=true]:after {
82	background-image: url('images/editor/overlay-menu.svg');
83}
84#tool__bar button:nth-child(10):after,
85#tool__bar button:nth-child(15):after {
86	background-image: url('images/editor/overlay-popup.svg');
87}
88
89/* import the new icons */
90#tool__bar button[accesskey="b"] { background-image: url('images/editor/format-bold.svg'); }
91#tool__bar button[accesskey="i"] { background-image: url('images/editor/format-italic.svg'); }
92#tool__bar button[accesskey="u"] { background-image: url('images/editor/format-underline.svg'); }
93#tool__bar button[accesskey="m"] { background-image: url('images/editor/format-monospace.svg'); }
94#tool__bar button[accesskey="d"] { background-image: url('images/editor/format-strikethrough.svg'); }
95#tool__bar button[accesskey="8"] { background-image: url('images/editor/format-header-equal.svg'); margin-left: 4pt; }
96#tool__bar button[accesskey="9"] { background-image: url('images/editor/format-header-decrease.svg'); }
97#tool__bar button[accesskey="0"] { background-image: url('images/editor/format-header-increase.svg'); }
98#tool__bar button:nth-child(9) { background-image: url('images/editor/format-header-menu.svg'); }
99#tool__bar button[accesskey="l"] { background-image: url('images/editor/insert-link.svg');margin-left:4pt; }
100#tool__bar button:nth-child(11) { background-image: url('images/editor/insert-external-link.svg'); }
101#tool__bar button[accesskey="-"] { background-image: url('images/editor/format-list-numbered.svg');  margin-left:4pt;}
102#tool__bar button[accesskey="."] { background-image: url('images/editor/format-list-bulleted.svg'); }
103#tool__bar button:nth-child(14) { background-image: url('images/editor/insert-hr.svg');margin-left:4pt;}
104#tool__bar button:nth-child(15) { background-image: url('images/editor/insert-media.svg');margin-left:4pt; }
105#tool__bar button:nth-child(16) { background-image: url('images/editor/insert-emoticon.svg');margin-left:4pt; }
106#tool__bar button:nth-child(17) { background-image: url('images/editor/insert-symbol.svg'); }
107#tool__bar button[accesskey="y"] { background-image: url('images/editor/insert-signature.svg');margin-left:4pt; }
108
109/* buttons inside of toolbar */
110.mode_edit div.toolbar button.toolbutton {
111	margin:		0;
112}
113/* picker popups (outside of .dokuwiki) */
114div.picker {
115    width: 300px;
116    border: 1px solid #CCC;
117    background-color: #EEE;
118    color: inherit;
119}
120/* picker for headlines */
121div.picker.pk_hl {
122    width: auto;
123}
124
125/* buttons inside of picker */
126div.picker button.pickerbutton,
127div.picker button.toolbutton {
128    padding: .1em .35em;
129    border-width: 0;
130}
131
132/*____________ edit textarea ____________*/
133
134.dokuwiki textarea.edit {
135    width: 100%;
136	padding: 1px 0 0 2px;
137    margin-bottom: .5em;
138	background-color: #EEE;
139	font-family: 'Source Code Pro',Menlo,Consolas,'Courier New',Courier,monospace;
140	font-size: 12pt;
141	line-height: 17pt;
142	caret-color: @ini_focus_color;
143}
144.dokuwiki textarea.edit:focus {
145	outline: transparent none 0;
146}
147
148/*____________ below the textarea ____________*/
149
150.dokuwiki div.editBar {
151    overflow: hidden;
152    margin-bottom: .5em;
153}
154
155/* size and wrap controls */
156#size__ctl {
157    float: right;
158}
159[dir=rtl] #size__ctl {
160    float: left;
161}
162#size__ctl img {
163    cursor: pointer;
164}
165
166/* edit buttons */
167.dokuwiki .editBar .editButtons {
168    display: inline;
169    margin-right: 1em;
170}
171[dir=rtl] .dokuwiki .editBar .editButtons {
172    margin-right: 0;
173    margin-left: 1em;
174}
175.dokuwiki .editBar .editButtons button {
176}
177
178/* summary input and minor changes checkbox */
179.dokuwiki .editBar .summary {
180    display: inline;
181}
182.dokuwiki .editBar .summary label {
183    vertical-align: middle;
184    white-space: nowrap;
185}
186.dokuwiki .editBar .summary label span {
187    vertical-align: middle;
188}
189.dokuwiki .editBar .summary input {
190}
191/* change background colour if summary is missing */
192.dokuwiki .editBar .summary input.missing {
193    color: @ini_text;
194    background-color: #ffcccc;
195}
196
197/* preview
198********************************************************************/
199
200.dokuwiki div.preview {
201    border: dotted #CCC;
202    border-width: .2em 0;
203    padding: 1.4em 0;
204    margin-bottom: 1.4em;
205}
206
207/* section edit buttons
208********************************************************************/
209
210/* .dokuwiki .secedit {
211    float: right;
212    margin-top: -1.4em;
213} */
214[dir=rtl] .dokuwiki .secedit {
215    float: left;
216}
217/*.dokuwiki .secedit button {
218    font-size: 75%;
219}*/
220
221/* style for section highlighting
222.dokuwiki div.section_highlight {
223    margin: 0 -1em;
224    padding: 0 .5em;
225    border: solid @ini_background_alt;
226    border-width: 0 .5em;
227} */
228
229/* dark mode overrides */
230@media (prefers-color-scheme: dark) {
231
232	body.mode_edit.darkmode  textarea.edit {
233		background-color:	@ini_background_alt_dark;
234		border:				@ini_headlines_dark solid 1px;
235		color:				@ini_text_dark;
236	}
237
238	body.mode_edit.darkmode div.editBox button {
239		background-color:	@ini_headlines_dark;
240		border-color:		@ini_border_dark;
241	}
242	body.mode_edit.darkmode div.editBox button#edbtn__save {
243		filter:				invert(.9);
244	}
245	body.mode_edit.darkmode #tool__bar button {
246		border-color:	@ini_border_dark;
247		filter: invert(.8);
248	}
249}
250