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/*____________ toolbar ____________*/ 29 30.mode_edit .editBox > .toolbar, 31.mode_preview .editBox > .toolbar { 32 display: block; 33 position: -webkit-sticky; 34 position: sticky; 35 top: 0; 36 background-color: @ini_background; 37 padding-bottom: 2px; 38 z-index: 9; 39} 40 41 42.mode_edit div.toolbar, 43.mode_preview div.toolbar { 44 display: inline-block; 45} 46#draft__status { 47 font-size: small; 48 color: @ini_text_alt; 49 background-color: inherit; 50} 51[dir=rtl] #draft__status { 52 /* float: left; */ 53} 54#tool__bar { 55 float: left; 56} 57[dir=rtl] #tool__bar { 58 float: right; 59} 60 61/* hide the hard-coded button images */ 62#tool__bar button>img { 63 visibility: hidden; 64} 65 66#tool__bar button { 67 background: #E9E9ED url('images/editor/default.svg') center no-repeat; 68 background-size: 20px; 69 padding: 3pt 6pt; 70 border: @ini_border solid 1px; 71} 72#tool__bar button[aria-haspopup=true]:after, 73#tool__bar button:nth-child(10):after, 74#tool__bar button:nth-child(15):after { 75 content: ''; 76 display: inline-block; 77 position: absolute; 78 width: 8px; 79 height: 8px; 80 margin-left: -2px; 81 margin-top: 14px; 82 background: transparent none center no-repeat; 83 background-size: 13px; 84} 85 86#tool__bar button[aria-haspopup=true]:after { 87 background-image: url('images/editor/overlay-menu.svg'); 88} 89#tool__bar button:nth-child(10):after, 90#tool__bar button:nth-child(15):after { 91 background-image: url('images/editor/overlay-popup.svg'); 92} 93 94/* import the new icons */ 95#tool__bar button[accesskey="b"] { background-image: url('images/editor/format-bold.svg'); margin-left: 1.5pt; } 96#tool__bar button[accesskey="i"] { background-image: url('images/editor/format-italic.svg'); } 97#tool__bar button[accesskey="u"] { background-image: url('images/editor/format-underline.svg'); } 98#tool__bar button[accesskey="m"] { background-image: url('images/editor/format-monospace.svg'); } 99#tool__bar button[accesskey="d"] { background-image: url('images/editor/format-strikethrough.svg'); } 100#tool__bar button[accesskey="8"] { background-image: url('images/editor/format-header-equal.svg'); margin-left: 4pt; } 101#tool__bar button[accesskey="9"] { background-image: url('images/editor/format-header-decrease.svg'); } 102#tool__bar button[accesskey="0"] { background-image: url('images/editor/format-header-increase.svg'); } 103#tool__bar button:nth-child(9) { background-image: url('images/editor/format-header-menu.svg'); } 104#tool__bar button[accesskey="l"] { background-image: url('images/editor/insert-link.svg');margin-left:4pt; } 105#tool__bar button:nth-child(11) { background-image: url('images/editor/insert-external-link.svg'); } 106#tool__bar button[accesskey="-"] { background-image: url('images/editor/format-list-numbered.svg'); margin-left:4pt;} 107#tool__bar button[accesskey="."] { background-image: url('images/editor/format-list-bulleted.svg'); } 108#tool__bar button:nth-child(14) { background-image: url('images/editor/insert-hr.svg');margin-left:4pt;} 109#tool__bar button:nth-child(15) { background-image: url('images/editor/insert-media.svg');margin-left:4pt; } 110#tool__bar button:nth-child(16) { background-image: url('images/editor/insert-emoticon.svg');margin-left:4pt; } 111#tool__bar button:nth-child(17) { background-image: url('images/editor/insert-symbol.svg'); } 112#tool__bar button[accesskey="y"] { background-image: url('images/editor/insert-signature.svg');margin-left:4pt; } 113 114/* set icons for known plugins: */ 115#tool__bar #tbbtn_adhoctagsInline { background-image: url('../../plugins/adhoctags/images/code-tags.svg');margin-left:4pt; } 116#tool__bar #tbbtn_adhoctagsBlocks { background-image: url('../../plugins/adhoctags/images/code-brackets.svg'); } 117 118/* buttons inside of toolbar */ 119.mode_edit div.toolbar button.toolbutton { 120 margin: 0; 121} 122/* picker popups (outside of .dokuwiki) */ 123div.picker { 124 width: 300px; 125 border: 1px solid #CCC; 126 background-color: #EEE; 127 color: inherit; 128} 129/* picker for headlines */ 130div.picker.pk_hl { 131 width: auto; 132} 133 134/* buttons inside of picker */ 135div.picker button.pickerbutton, 136div.picker button.toolbutton { 137 padding: .1em .35em; 138 border-width: 0; 139} 140 141/*____________ edit textarea ____________*/ 142 143.dokuwiki textarea.edit { 144 width: 100%; 145 padding: 1px 0 0 2px; 146 margin-bottom: .5em; 147 min-height: 52pt; 148 background-color: #EEE; 149 font-family: 'Source Code Pro',Menlo,Consolas,'Courier New',Courier,monospace; 150 font-size: 12pt; 151 line-height: 17pt; 152 caret-color: #0078D7; 153 resize: vertical; 154} 155.dokuwiki textarea.edit:focus { 156 outline: transparent none 0; 157} 158 159.dokuwiki textarea::-webkit-scrollbar-track { 160 background: @ini_background_alt; 161} 162.dokuwiki textarea::-webkit-scrollbar-thumb { 163 background: @ini_blockquote; 164} 165.dokuwiki textarea::-webkit-scrollbar-thumb:hover { 166 background: @ini_separator; 167} 168.dokuwiki textarea::-webkit-resizer { 169 background-color: @ini_background_alt; 170 background: linear-gradient(135deg, @ini_background_alt 0%, @ini_background_alt 50%, @ini_blockquote 50%, @ini_blockquote 100%); 171} 172 173.dokuwiki textarea { scrollbar-color: @ini_blockquote @ini_background_alt; } 174 175/*____________ below the textarea ____________*/ 176 177.dokuwiki div.editBar { 178 display: grid; 179 grid-template-columns: 320px minmax(500px, 1fr) auto; 180 align-items: start; 181 margin-bottom: .5em; 182} 183 184/* size and wrap controls */ 185#size__ctl { 186 grid-row: 1; 187 grid-column: 3; 188 min-width: 64px; 189} 190#size__ctl img { 191 cursor: pointer; 192} 193 194/* edit buttons */ 195.dokuwiki .editBar .editButtons { 196 grid-row: 1; 197 grid-column: 1; 198 display: grid; 199 grid-template-columns: 1fr 1fr 1fr; 200} 201[dir=rtl] .dokuwiki .editBar .editButtons { 202 margin-right: 0; 203 margin-left: 1em; 204} 205.dokuwiki .editBar .editButtons button { 206 border: #CCC solid 1.5pt; 207 padding: .25em .5em; 208 margin: 0 2pt; 209} 210.dokuwiki .editBar .editButtons button::before { 211 content: ' '; 212 display: inline-block; 213 position: relative; 214 top: .1em; 215 width: 1em; 216 height: 1em; 217 background: none center bottom no-repeat; 218 background-size: 1em; 219 margin-right: 4px; 220} 221 222.dokuwiki .editBar .editButtons button#edbtn__save { 223 background-color: #ccddff; 224} 225.dokuwiki .editBar .editButtons button#edbtn__save::before { 226 background-image: url('images/editor/edit-save.svg'); 227} 228.dokuwiki .editBar .editButtons button#edbtn__preview { 229 background-color: #ccffdd; 230} 231.dokuwiki .editBar .editButtons button#edbtn__preview::before { 232 background-image: url('images/editor/edit-preview.svg'); 233} 234.dokuwiki .editBar .editButtons button[name="do[cancel]"] { 235 background-color: #ffccdd; 236} 237.dokuwiki .editBar .editButtons button[name="do[cancel]"]::before { 238 background-image: url('images/editor/edit-cancel.svg'); 239} 240 241/* summary input and minor changes checkbox */ 242.dokuwiki .editBar .summary { 243 grid-row: 1; 244 grid-column: 2; 245 display: grid; 246 grid-template-columns: 1fr auto; 247 line-height: 1em; 248 padding-top: 2pt; 249 padding-right: 5pt; 250} 251 252.dokuwiki .editBar .summary #edit__summary { 253 background-color: @ini_background_alt; 254 border-color: @ini_border; 255 color: @ini_text; 256 border-radius: 3pt; 257 margin-left: 0; 258 width: 100%; 259} 260 261.dokuwiki .editBar .summary label { 262 white-space: nowrap; 263} 264.dokuwiki .editBar .summary label:last-child { 265 padding: 2pt 0 2pt 4pt; 266} 267.dokuwiki .editBar .summary > label:first-child { 268 display: grid; 269 grid-template-columns: auto 1fr; 270 column-gap: 10px; 271 padding: 2pt 5pt 0 0; 272} 273.dokuwiki .editBar .summary label span { 274 font-size: small; 275 margin: 0 1pt 0 3pt; 276} 277.dokuwiki .editBar .summary input { 278} 279/* change background colour if summary is missing */ 280.dokuwiki .editBar .summary input.missing { 281 color: @ini_text; 282 background-color: #ffcccc; 283} 284 285/* preview 286********************************************************************/ 287 288.dokuwiki div.preview { 289 border: dotted #CCC; 290 border-width: .2em 0; 291 padding: 1.4em 0; 292 margin-bottom: 1.4em; 293} 294 295/* narrow screen overrides: */ 296@media (max-width: @ini_tablet_width) { 297 298 .dokuwiki div.editBar { 299 grid-template-columns: 1fr 5px auto; 300 } 301 .dokuwiki div.editBar .summary { 302 grid-row: 2; 303 grid-column: 1 / span 3; 304 } 305 .dokuwiki .editBar .summary #edit__summary { 306 margin-left: 8pt; 307 width: ~"calc(100% - 8px)"; 308 } 309 .dokuwiki .editBar .summary label:last-child { 310 /*text-align: right;*/ 311 } 312} 313@media (max-width: @ini_phone_width) { 314 315 .dokuwiki .editBar .summary, 316 .dokuwiki .editBar .summary > label:first-child { 317 grid-template-columns: 100%; 318 } 319} 320@media (max-width: 390px) { 321 322 .dokuwiki .editBar .editButtons button { 323 overflow: hidden; 324 height: 30px; 325 line-height: 24px; 326 } 327 .dokuwiki .editBar .summary #edit__summary { 328 margin-left: 4px; 329 width: 100%; 330 } 331 332} 333/* dark mode overrides */ 334@media (prefers-color-scheme: dark) { 335 336 body.darkmode .editBox > .toolbar { 337 background-color: @ini_background_dark; 338 } 339 body.darkmode textarea.edit { 340 background-color: @ini_background_alt_dark; 341 border: @ini_headlines_dark solid 1px; 342 color: @ini_text_dark; 343 } 344 345 body.darkmode textarea::-webkit-scrollbar-track { 346 background: @ini_background_alt_dark; 347 } 348 body.darkmode textarea::-webkit-scrollbar-thumb { 349 background: @ini_background_dark; 350 } 351 body.darkmode textarea::-webkit-scrollbar-thumb:hover { 352 background: @ini_background_site_dark; 353 } 354 body.darkmode textarea { scrollbar-color: @ini_background_dark @ini_background_alt_dark; } 355 .dokuwiki textarea::-webkit-resizer { 356 background-color: @ini_background_alt_dark; 357 background: linear-gradient(135deg, @ini_background_alt_dark 0%, @ini_background_alt_dark 50%, @ini_text_alt_dark 50%, @ini_text_alt_dark 100%); 358 } 359 360 body.mode_edit.darkmode div.editBox button, 361 body.mode_preview.darkmode div.editBox button { 362 background-color: @ini_headlines_dark; 363 border-color: @ini_border_dark; 364 } 365 body.mode_edit.darkmode .editBar .editButtons button::before, 366 body.mode_preview.darkmode .editBar .editButtons button::before { 367 filter: invert(.9); 368 } 369 body.darkmode .editBar .editButtons button#edbtn__save { 370 background-color: #334466; 371 color: #CCDDFF; 372 } 373 body.darkmode .editBar .editButtons button#edbtn__preview { 374 background-color: #226633; 375 color: #CCFFDD; 376 } 377 body.darkmode .editBar .editButtons button[name="do[cancel]"] { 378 background-color: #663344; 379 color: #FFCCDD; 380 } 381 382 body.mode_edit.darkmode #tool__bar button, 383 body.mode_preview.darkmode #tool__bar button { 384 border-color: @ini_border_dark; 385 filter: invert(.8); 386 } 387 body.mode_edit.darkmode .editBar .editButtons button, 388 body.mode_preview.darkmode .editBar .editButtons button { 389 border-color: @ini_border_dark; 390 } 391 392 body.mode_edit.darkmode .editBar .summary #edit__summary, 393 body.mode_preview.darkmode .editBar .summary #edit__summary { 394 background-color: @ini_background_alt_dark; 395 border-color: @ini_headlines_dark; 396 color: @ini_text_dark; 397 } 398} 399
