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/* toolbar popups */ 286.dokuwiki div.picker { 287 & { 288 background-color: @ini_background_alt; 289 border: @ini_border solid 1px; 290 padding: .125rem; 291 -webkit-box-shadow: .125rem .125rem .5rem 0 rgba(0,0,0,.2); 292 -moz-box-shadow: .125rem .125rem .5rem 0 rgba(0,0,0,.2); 293 box-shadow: .125rem .125rem .5rem 0 rgba(0,0,0,.2); 294 } 295 button { 296 & { 297 color: @ini_text; 298 background-color: @ini_background; 299 border: @ini_border solid 1px; 300 min-width: 24px; min-height: 24px; 301 cursor: pointer; 302 margin: 1px; 303 } 304 &:hover { 305 background-color: @ini_text; 306 color: @ini_background; 307 } 308 } 309 &#picker1 { 310 /* width: 308px; max-width: 308px; min-width: 308px; */ 311 resize: both; 312 overflow: auto; 313 } 314 &#picker2 { 315 /* width: 585px; max-width: 585px; min-width: 585px; */ 316 resize: both; 317 overflow: auto; 318 } 319} 320 321/* preview 322********************************************************************/ 323 324.dokuwiki div.preview { 325 border: dotted #CCC; 326 border-width: .2em 0; 327 padding: 1.4em 0; 328 margin-bottom: 1.4em; 329} 330 331/* narrow screen overrides: */ 332@media (max-width: @ini_tablet_width) { 333 334 .dokuwiki div.editBar { 335 grid-template-columns: 1fr 5px auto; 336 } 337 .dokuwiki div.editBar .summary { 338 grid-row: 2; 339 grid-column: 1 / span 3; 340 } 341 .dokuwiki .editBar .summary #edit__summary { 342 margin-left: 8pt; 343 width: ~"calc(100% - 8px)"; 344 } 345 .dokuwiki .editBar .summary label:last-child { 346 /*text-align: right;*/ 347 } 348} 349@media (max-width: @ini_phone_width) { 350 351 .dokuwiki .editBar .summary, 352 .dokuwiki .editBar .summary > label:first-child { 353 grid-template-columns: 100%; 354 } 355} 356@media (max-width: 390px) { 357 358 .dokuwiki .editBar .editButtons button { 359 overflow: hidden; 360 height: 30px; 361 line-height: 24px; 362 } 363 .dokuwiki .editBar .summary #edit__summary { 364 margin-left: 4px; 365 width: 100%; 366 } 367 368} 369/* dark mode overrides */ 370@media (prefers-color-scheme: dark) { 371 372 body.darkmode .editBox > .toolbar { 373 background-color: @ini_background_dark; 374 } 375 body.darkmode textarea.edit { 376 background-color: @ini_background_alt_dark; 377 border: @ini_headlines_dark solid 1px; 378 color: @ini_text_dark; 379 } 380 381 body.darkmode textarea::-webkit-scrollbar-track { 382 background: @ini_background_alt_dark; 383 } 384 body.darkmode textarea::-webkit-scrollbar-thumb { 385 background: @ini_background_dark; 386 } 387 body.darkmode textarea::-webkit-scrollbar-thumb:hover { 388 background: @ini_background_site_dark; 389 } 390 body.darkmode textarea { scrollbar-color: @ini_background_dark @ini_background_alt_dark; } 391 .dokuwiki textarea::-webkit-resizer { 392 background-color: @ini_background_alt_dark; 393 background: linear-gradient(135deg, @ini_background_alt_dark 0%, @ini_background_alt_dark 50%, @ini_text_alt_dark 50%, @ini_text_alt_dark 100%); 394 } 395 396 body.mode_edit.darkmode div.editBox button, 397 body.mode_preview.darkmode div.editBox button { 398 background-color: @ini_headlines_dark; 399 border-color: @ini_border_dark; 400 } 401 body.mode_edit.darkmode .editBar .editButtons button::before, 402 body.mode_preview.darkmode .editBar .editButtons button::before { 403 filter: invert(.9); 404 } 405 body.darkmode .editBar .editButtons button#edbtn__save { 406 background-color: #334466; 407 color: #CCDDFF; 408 } 409 body.darkmode .editBar .editButtons button#edbtn__preview { 410 background-color: #226633; 411 color: #CCFFDD; 412 } 413 body.darkmode .editBar .editButtons button[name="do[cancel]"] { 414 background-color: #663344; 415 color: #FFCCDD; 416 } 417 418 body.mode_edit.darkmode #tool__bar button, 419 body.mode_preview.darkmode #tool__bar button { 420 border-color: @ini_border_dark; 421 filter: invert(.8); 422 } 423 body.mode_edit.darkmode .editBar .editButtons button, 424 body.mode_preview.darkmode .editBar .editButtons button { 425 border-color: @ini_border_dark; 426 } 427 428 body.mode_edit.darkmode .editBar .summary #edit__summary, 429 body.mode_preview.darkmode .editBar .summary #edit__summary { 430 background-color: @ini_background_alt_dark; 431 border-color: @ini_headlines_dark; 432 color: @ini_text_dark; 433 } 434 435 body.darkmode div.picker { 436 & { 437 background-color: @ini_background_dark; 438 border: @ini_border_dark solid 1px; 439 } 440 button { 441 & { 442 color: @ini_text_dark; 443 background-color: @ini_background_alt_dark; 444 border-color: @ini_border_dark; 445 } 446 &:hover { 447 background-color: @ini_text_dark; 448 color: @ini_background_alt_dark; 449 } 450 } 451 } 452 453}