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