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
11
12/* link wizard (opens from the link button in the edit toolbar)
13********************************************************************/
14
15#link__wiz {
16	resize:	both;
17	max-width: 80%;
18	max-height: 512px;
19	-webkit-box-shadow: 2px 2px 3px 2px rgba(0,0,0,.5);
20	-moz-box-shadow: 2px 2px 3px 2px rgba(0,0,0,.5);
21	box-shadow: 2px 2px 3px 2px rgba(0,0,0,.5);
22}
23
24[dir=rtl] #link__wiz_close {
25    float: left;
26}
27
28#link__wiz .ui-dialog-content {
29	width:	100%;
30	height: ~"calc(100% - 22px)";
31	overflow: hidden;
32	color: @ini_text_alt;
33	font-size: small;
34}
35
36#link__wiz button.ui-dialog-titlebar-close {
37	width:		16px;
38	height:		16px;
39	min-width:	16px;
40	min-height:	16px;
41	background-color: @ini_background;
42	border:		@ini_border solid 1px;
43}
44
45#link__wiz #link__wiz_entry {
46	width: ~"calc(100% - 5em)";
47	border-color: @ini_border;
48	background-color: @ini_background;
49	color: @ini_text;
50	font-family: @ini_mono_fonts;
51	font-size: 11pt;
52}
53#link__wiz #link__wiz_entry:focus {
54	outline: @ini_focus_color solid 2px;
55}
56
57#link__wiz_result {
58    background-color: @ini_background;
59    width:  ~"calc(100% - 2px)";
60    height: ~"calc(100% - 68px)";
61    overflow: auto;
62    border: 1px solid @ini_border;
63    margin: 3px auto;
64    text-align: left;
65	font-size: medium;
66    line-height: 1em;
67}
68[dir=rtl] #link__wiz_result {
69    text-align: right;
70}
71
72#link__wiz_result div {
73    padding: 3px 3px 3px 0;
74}
75
76#link__wiz_result div a {
77    display: block;
78    padding-left: 1.3em;
79    min-height: 16px;
80    background: transparent 3px center no-repeat;
81	background-size: 1em;
82}
83[dir=rtl] #link__wiz_result div a {
84    padding: 3px 22px 3px 3px;
85    background-position: 257px 3px;
86}
87
88#link__wiz_result div.type_u a:link,
89#link__wiz_result div.type_u a:visited {
90    background-image: url(./images/editor/browse-parent.svg);
91	color: @ini_link;
92}
93#link__wiz_result div.type_f a {
94    background-image: url(./images/editor/browse-link.svg);
95}
96#link__wiz_result div.type_d a:link,
97#link__wiz_result div.type_d a:visited {
98    background-image: url(./images/editor/browse-folder.svg);
99	color: @ini_link;
100}
101
102#link__wiz_result div.even {
103    background-color: @ini_background_neu;
104}
105
106#link__wiz_result div.selected {
107    background-color: @ini_background_alt;
108}
109
110#link__wiz_result span {
111    display: block;
112    color: @ini_text_neu;
113    margin-left: 22px;
114}
115
116#link__wiz .ui-button {
117	background-color:	transparent;
118	border-color:		transparent;
119}
120
121#link__wiz .ui-icon-closethick {
122	background:			transparent url(images/editor/close.svg) center no-repeat;
123	background-size:	16px;
124}
125
126/* media option wizard (opens when inserting media in the media popup)
127********************************************************************/
128
129#media__popup {
130    /* for backwards compatibility (not needed since Rincewind) */
131    display: none;
132}
133
134#media__popup_content p {
135    margin: 0 0 .5em;
136}
137
138#media__popup_content label {
139    margin-right: .5em;
140    cursor: default;
141}
142
143#media__popup_content button {
144    margin-right: 1px;
145    cursor: pointer;
146}
147
148/* dark mode overrides */
149@media (prefers-color-scheme: dark) {
150
151	body.darkmode #link__wiz {
152		background-color: @ini_background_dark;
153		border-color: @ini_border_dark;
154	}
155	body.darkmode #link__wiz .ui-widget-header {
156		background: @ini_background_alt_dark none;
157		border-color: @ini_border_dark;
158	}
159	body.darkmode #link__wiz .ui-widget-header .ui-dialog-title {
160		color: @ini_headlines_dark;
161	}
162	body.darkmode #link__wiz #link__wiz_entry {
163		border-color: @ini_border_dark;
164		background-color: @ini_background_alt_dark;
165		color: @ini_text_dark;
166	}
167	body.darkmode #link__wiz_result div.type_u a:link,
168	body.darkmode #link__wiz_result div.type_u a:visited,
169	body.darkmode #link__wiz_result div.type_u a:link,
170	body.darkmode #link__wiz_result div.type_u a:visited {
171		color: @ini_link_dark;
172	}
173	body.darkmode #link__wiz button.ui-dialog-titlebar-close {
174		border-color: @ini_border_dark;
175	}
176	body.darkmode #link__wiz .ui-icon-closethick {
177		background-color: @ini_background_dark;
178	}
179
180	body.darkmode #link__wiz_result {
181		background-color: rgba(0,0,0,.2);
182		border-color: @ini_border_dark;
183	}
184	body.darkmode #link__wiz_result div.even {
185		background-color: @ini_background_dark;
186	}
187}