xref: /template/ad-hominem/css/_modal.css (revision 5061d95dcf9e1b44f347d654b9765ce2b7e68196) 
1/**
2 * This file provides styles for modal dialogues.
3 */
4
5.dokuwiki .ui-widget {
6	font-size: 100%;
7	/*min-width: 290px;
8	min-height: 285px; */
9}
10
11element {
12}
13@media screen {
14  #mediamanager__page .panelHeader form.options .ui-controlgroup-horizontal label {
15    font-size: 90%;
16    margin-right: -0.4em;
17    padding: .3em .5em;
18    line-height: 1;
19  }
20}
21@media screen {
22  .dokuwiki .ui-widget {
23    font-size: 100%;
24    min-width: 290px;
25    min-height: 285px;
26  }
27}
28@media screen {
29  .ui-controlgroup > .ui-controlgroup-item {
30    float: left;
31    margin-left: 0;
32    margin-right: 0;
33  }
34}
35@media screen {
36  .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
37    border-bottom-right-radius: 4px;
38  }
39}
40@media screen {
41  .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
42    border-top-right-radius: 4px;
43  }
44}
45@media screen {
46  .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button {
47    color: #555555;
48    text-decoration: none;
49  }
50}
51.ui-state-default,
52.ui-widget-content .ui-state-default,
53.ui-widget-header .ui-state-default,
54.ui-button,
55html .ui-button.ui-state-disabled:hover,
56html .ui-button.ui-state-disabled:active {
57	border: 1px solid @ini_border;
58	background: @ini_background_neu none;
59	color: @ini_text_neu;
60}
61
62.dokuwiki .ui-state-active,
63.dokuwiki .ui-widget-content .ui-state-active,
64.dokuwiki .ui-widget-header .ui-state-active,
65.dokuwiki a.ui-button:active,
66.dokuwiki .ui-button:active,
67.dokuwiki .ui-button.ui-state-active:hover {
68	border: 1px solid @ini_border;
69	background: @ini_background_alt none;
70	color: @ini_text_alt;
71}
72
73
74/* link wizard (opens from the link button in the edit toolbar)
75********************************************************************/
76
77#link__wiz {
78	resize:	both;
79	max-width: 80%;
80	max-height: 512px;
81	-webkit-box-shadow: 2px 2px 3px 2px rgba(0,0,0,.5);
82	-moz-box-shadow: 2px 2px 3px 2px rgba(0,0,0,.5);
83	box-shadow: 2px 2px 3px 2px rgba(0,0,0,.5);
84}
85
86[dir=rtl] #link__wiz_close {
87	float: left;
88}
89
90#link__wiz .ui-dialog-content {
91	width:	100%;
92	height: ~"calc(100% - 22px)";
93	overflow: hidden;
94	color: @ini_text_alt;
95	font-size: small;
96}
97
98#link__wiz button.ui-dialog-titlebar-close {
99	width:		16px;
100	height:		16px;
101	min-width:	16px;
102	min-height:	16px;
103	background-color: @ini_background;
104	border:		@ini_border solid 1px;
105}
106
107#link__wiz #link__wiz_entry {
108	width: ~"calc(100% - 5em)";
109	border-color: @ini_border;
110	background-color: @ini_background;
111	color: @ini_text;
112	font-family: @ini_mono_fonts;
113	font-size: 11pt;
114}
115#link__wiz #link__wiz_entry:focus {
116	outline: @ini_focus_color solid 2px;
117}
118
119#link__wiz_result {
120	background-color: @ini_background;
121	width:  ~"calc(100% - 2px)";
122	height: ~"calc(100% - 68px)";
123	overflow: auto;
124	border: 1px solid @ini_border;
125	margin: 3px auto;
126	text-align: left;
127	font-size: medium;
128	line-height: 1em;
129}
130[dir=rtl] #link__wiz_result {
131	text-align: right;
132}
133
134#link__wiz_result div {
135	padding: 3px 3px 3px 0;
136}
137
138#link__wiz_result div a {
139	display: block;
140	padding-left: 1.3em;
141	min-height: 16px;
142	background: transparent 3px center no-repeat;
143	background-size: 1em;
144}
145[dir=rtl] #link__wiz_result div a {
146	padding: 3px 22px 3px 3px;
147	background-position: 257px 3px;
148}
149
150#link__wiz_result div.type_u a:link,
151#link__wiz_result div.type_u a:visited {
152	background-image: url(./images/editor/browse-parent.svg);
153	color: @ini_link;
154}
155#link__wiz_result div.type_f a {
156	background-image: url(./images/editor/browse-link.svg);
157}
158#link__wiz_result div.type_d a:link,
159#link__wiz_result div.type_d a:visited {
160	background-image: url(./images/editor/browse-folder.svg);
161	color: @ini_link;
162}
163
164#link__wiz_result div.even {
165	background-color: @ini_background_neu;
166}
167
168#link__wiz_result div.selected {
169	background-color: @ini_background_alt;
170}
171
172#link__wiz_result span {
173	display: block;
174	color: @ini_text_neu;
175	margin-left: 22px;
176}
177
178#link__wiz .ui-button {
179	background-color:	transparent;
180	border-color:		transparent;
181}
182
183#link__wiz .ui-icon-closethick {
184	background:			transparent url(images/editor/close.svg) center no-repeat;
185	background-size:	16px;
186}
187
188/* media option wizard (opens when inserting media in the media popup)
189********************************************************************/
190
191#media__popup {
192	/* for backwards compatibility (not needed since Rincewind) */
193	display: none;
194}
195
196#media__popup_content p {
197	margin: 0 0 .5em;
198}
199
200#media__popup_content label {
201	margin-right: .5em;
202	cursor: default;
203}
204
205#media__popup_content button {
206	margin-right: 1px;
207	cursor: pointer;
208}
209
210/* dark mode overrides */
211@media (prefers-color-scheme: dark) {
212	body.darkmode {
213
214		.ui-state-default,
215		.ui-widget-content .ui-state-default,
216		.ui-widget-header .ui-state-default,
217		.ui-button,
218		html .ui-button.ui-state-disabled:hover,
219		html .ui-button.ui-state-disabled:active {
220			border-color: @ini_text_alt_dark;
221			background: @ini_background_dark;
222			color: @ini_text_dark;
223		}
224
225		.ui-state-active,
226		.ui-widget-content .ui-state-active,
227		.ui-widget-header .ui-state-active,
228		a.ui-button:active,
229		.ui-button:active,
230		.ui-button.ui-state-active:hover {
231			border-color: @ini_text_alt_dark;
232			background-color: @ini_background_alt_dark;
233			color: @ini_text_alt_dark;
234		}
235
236		#link__wiz {
237			background-color: @ini_background_dark;
238			border-color: @ini_border_dark;
239		}
240		#link__wiz .ui-widget-header {
241			background: @ini_background_alt_dark none;
242			border-color: @ini_border_dark;
243		}
244		#link__wiz .ui-widget-header .ui-dialog-title {
245			color: @ini_headlines_dark;
246		}
247		#link__wiz #link__wiz_entry {
248			border-color: @ini_border_dark;
249			background-color: @ini_background_alt_dark;
250			color: @ini_text_dark;
251		}
252		#link__wiz_result div.type_u a:link,
253		#link__wiz_result div.type_u a:visited,
254		#link__wiz_result div.type_u a:link,
255		#link__wiz_result div.type_u a:visited {
256			color: @ini_link_dark;
257		}
258		#link__wiz button.ui-dialog-titlebar-close {
259			border-color: @ini_border_dark;
260		}
261		#link__wiz .ui-icon-closethick {
262			background-color: @ini_background_dark;
263		}
264
265		#link__wiz_result {
266			background-color: rgba(0,0,0,.2);
267			border-color: @ini_border_dark;
268		}
269		#link__wiz_result div.even {
270			background-color: @ini_background_dark;
271		}
272	}
273}