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}