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