edit.css (13080B)
1 /* Edit extension, https://github.com/annaesvensson/yellow-edit */ 2 3 .yellow-bar { 4 position: relative; 5 } 6 .yellow-bar-left { 7 display: block; 8 float: left; 9 } 10 .yellow-bar-right { 11 display: block; 12 float: right; 13 } 14 .yellow-bar-right a { 15 margin-left: 1em; 16 } 17 .yellow-bar-banner { 18 clear: both; 19 } 20 .yellow-body-modal-open { 21 overflow: hidden; 22 } 23 .yellow-pane { 24 position: absolute; 25 display: none; 26 z-index: 100; 27 padding: 10px; 28 background-color: #fff; 29 color: #000; 30 border: 1px solid #bbb; 31 border-radius: 4px; 32 box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2); 33 text-align: center; 34 } 35 .yellow-pane h1 { 36 color: #000; 37 font-size: 2em; 38 margin: 0 1em; 39 overflow: hidden; 40 text-overflow: ellipsis; 41 } 42 .yellow-pane p { 43 margin: 0.5em 0; 44 } 45 .yellow-pane .yellow-status { 46 margin-bottom: 1em; 47 } 48 .yellow-pane .yellow-fields { 49 width: 14em; 50 margin: 0 auto; 51 text-align: left; 52 } 53 .yellow-pane .yellow-fields .yellow-center { 54 width: 14em; 55 display: inline-block; 56 text-align: center; 57 } 58 .yellow-pane .yellow-fields .yellow-form-control { 59 width: 15em; 60 box-sizing: border-box; 61 } 62 .yellow-pane .yellow-fields .yellow-btn { 63 width: 15em; 64 margin: 1em 0 0.5em 0; 65 } 66 .yellow-pane .yellow-buttons .yellow-btn { 67 width: 15em; 68 margin: 0.5em 0; 69 } 70 .yellow-close { 71 position: absolute; 72 top: 0.8em; 73 right: 1em; 74 cursor: pointer; 75 font-size: 0.9em; 76 color: #bbb; 77 text-decoration: none; 78 } 79 .yellow-close:hover { 80 color: #000; 81 text-decoration: none; 82 } 83 .yellow-arrow { 84 position: absolute; 85 top: 0; 86 left: 0; 87 } 88 .yellow-arrow:after, 89 .yellow-arrow:before { 90 position: absolute; 91 pointer-events: none; 92 bottom: 100%; 93 height: 0; 94 width: 0; 95 border: solid transparent; 96 content: ""; 97 } 98 .yellow-arrow:after { 99 border-color: rgba(255, 255, 255, 0); 100 border-bottom-color: #fff; 101 border-width: 10px; 102 margin-left: -10px; 103 } 104 .yellow-arrow:before { 105 border-color: rgba(187, 187, 187, 0); 106 border-bottom-color: #bbb; 107 border-width: 11px; 108 margin-left: -11px; 109 } 110 .yellow-settings { 111 text-align: left; 112 } 113 .yellow-settings-left { 114 float: left; 115 padding: 0 0.5em; 116 } 117 .yellow-settings-right { 118 float: left; 119 } 120 .yellow-settings-separator { 121 visibility: hidden; 122 padding: 20px; 123 } 124 .yellow-settings-banner { 125 clear: both; 126 } 127 .yellow-popup { 128 position: absolute; 129 display: none; 130 z-index: 200; 131 padding: 10px 0; 132 background-color: #fff; 133 color: #000; 134 border: 1px solid #bbb; 135 border-radius: 4px; 136 box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2); 137 } 138 .yellow-dropdown { 139 list-style: none; 140 margin: 0; 141 padding: 0; 142 } 143 .yellow-dropdown span { 144 display: block; 145 margin: 0; 146 padding: 0.25em 1em; 147 } 148 .yellow-dropdown a { 149 display: block; 150 padding: 0.2em 1em; 151 text-decoration: none; 152 } 153 .yellow-dropdown a:hover { 154 color: #fff; 155 background-color: #18e; 156 text-decoration: none; 157 } 158 .yellow-dropdown-menu a { 159 color: #000; 160 } 161 .yellow-toolbar { 162 list-style: none; 163 margin: 0; 164 padding: 0; 165 } 166 .yellow-toolbar-left { 167 display: inline-block; 168 float: left; 169 } 170 .yellow-toolbar-right { 171 display: inline-block; 172 float: right; 173 } 174 .yellow-toolbar-banner { 175 clear: both; 176 } 177 .yellow-toolbar h1 { 178 margin: -5px 0 0 0; 179 white-space: nowrap; 180 overflow: hidden; 181 text-overflow: ellipsis; 182 } 183 .yellow-toolbar li { 184 display: inline-block; 185 vertical-align: top; 186 } 187 .yellow-toolbar a { 188 display: inline-block; 189 padding: 6px 16px; 190 text-decoration: none; 191 background-color: #fff; 192 color: #000; 193 font-size: 0.9em; 194 font-weight: normal; 195 border: 1px solid #bbb; 196 border-radius: 4px; 197 } 198 .yellow-toolbar a:hover { 199 background-color: #18e; 200 background-image: none; 201 border-color: #18e; 202 color: #fff; 203 text-decoration: none; 204 } 205 .yellow-toolbar-left a { 206 margin-right: 4px; 207 margin-bottom: 10px; 208 } 209 .yellow-toolbar-right a { 210 margin-left: 4px; 211 margin-bottom: 10px; 212 } 213 .yellow-toolbar .yellow-icon { 214 font-size: 0.9em; 215 min-width: 1em; 216 text-align: center; 217 } 218 .yellow-toolbar .yellow-toolbar-btn { 219 padding: 6px 10px; 220 min-width: 4em; 221 text-align: center; 222 } 223 .yellow-toolbar .yellow-toolbar-btn-edit { 224 background-color: #29f; 225 border-color: #29f; 226 color: #fff; 227 } 228 .yellow-toolbar .yellow-toolbar-btn-create { 229 background-color: #29f; 230 border-color: #29f; 231 color: #fff; 232 } 233 .yellow-toolbar .yellow-toolbar-btn-delete { 234 background-color: #e55; 235 border-color: #e55; 236 color: #fff; 237 } 238 .yellow-toolbar .yellow-toolbar-btn-delete:hover { 239 background-color: #d44; 240 border-color: #d44; 241 } 242 .yellow-toolbar .yellow-toolbar-btn-separator { 243 visibility: hidden; 244 padding: 6px; 245 } 246 .yellow-toolbar .yellow-toolbar-checked { 247 background-color: #666; 248 border-color: #666; 249 color: #fff; 250 } 251 .yellow-toolbar .yellow-toolbar-disabled, 252 .yellow-toolbar .yellow-toolbar-disabled:hover { 253 background-color: inherit; 254 border-color: #c1c1c1 #c1c1c1 #aaa; 255 color: #aaa; 256 } 257 .yellow-toolbar-tooltip { 258 position: relative; 259 } 260 .yellow-toolbar-tooltip::after, 261 .yellow-toolbar-tooltip::before { 262 position: absolute; 263 z-index: 300; 264 display: none; 265 pointer-events: none; 266 } 267 .yellow-toolbar-tooltip::after { 268 padding: 2px 9px; 269 font-weight: normal; 270 font-size: 0.9em; 271 text-align: center; 272 white-space: nowrap; 273 content: attr(aria-label); 274 background-color: #111; 275 color: #ddd; 276 border-radius: 3px; 277 top: 100%; 278 right: 50%; 279 margin-top: 6px; 280 transform: translateX(50%); 281 } 282 .yellow-toolbar-tooltip::before { 283 width: 0; 284 height: 0; 285 content: ""; 286 border: 4px solid transparent; 287 top: auto; 288 right: 50%; 289 bottom: -6px; 290 margin-right: -4px; 291 border-bottom-color: #111; 292 } 293 .yellow-toolbar-tooltip:hover::before, 294 .yellow-toolbar-tooltip:hover::after { 295 display: inline-block; 296 } 297 .yellow-toolbar-selected.yellow-toolbar-tooltip::before, 298 .yellow-toolbar-selected.yellow-toolbar-tooltip::after { 299 display: none; 300 } 301 .yellow-edit-text { 302 margin: 0; 303 padding: 0 2px; 304 outline: none; 305 resize: none; 306 border: none; 307 font-size: 0.9em; 308 font-family: inherit; 309 font-weight: normal; 310 line-height: normal; 311 } 312 .yellow-edit-preview { 313 padding: 0; 314 overflow: auto; 315 } 316 .yellow-edit-preview h1 { 317 margin: 0.67em 0; 318 } 319 .yellow-edit-preview p { 320 margin: 1em 0; 321 } 322 .yellow-edit-preview .content { 323 margin: 0; 324 padding: 0; 325 } 326 .yellow-form-control { 327 margin: 0; 328 padding: 2px 4px; 329 display: inline-block; 330 background-color: #fff; 331 color: #000; 332 background-image: linear-gradient(to bottom, #fff, #fff); 333 border: 1px solid #bbb; 334 border-radius: 4px; 335 font-size: 0.9em; 336 font-family: inherit; 337 font-weight: normal; 338 line-height: normal; 339 } 340 .yellow-btn { 341 margin: 0; 342 padding: 4px 22px; 343 display: inline-block; 344 min-width: 8em; 345 background-color: #eaeaea; 346 color: #333333; 347 background-image: linear-gradient(to bottom, #f8f8f8, #e1e1e1); 348 border: 1px solid #bbb; 349 border-color: #c1c1c1 #c1c1c1 #aaa; 350 border-radius: 4px; 351 outline-offset: -2px; 352 font-size: 0.9em; 353 font-family: inherit; 354 font-weight: normal; 355 line-height: 1; 356 text-align: center; 357 text-decoration: none; 358 box-sizing: border-box; 359 } 360 .yellow-btn:hover, 361 .yellow-btn:focus, 362 .yellow-btn:active { 363 color: #333333; 364 background-image: none; 365 text-decoration: none; 366 } 367 .yellow-btn:active { 368 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); 369 } 370 371 /* Specific panes */ 372 373 #yellow-pane-create-bar { 374 padding: 0 0.5em; 375 } 376 #yellow-pane-delete-bar { 377 padding: 0 0.5em; 378 } 379 #yellow-pane-create, 380 #yellow-pane-edit, 381 #yellow-pane-delete { 382 text-align: left; 383 } 384 #yellow-pane-menu { 385 padding: 10px 0; 386 text-align: left; 387 } 388 389 /* Specific popups */ 390 391 #yellow-popup-format, 392 #yellow-popup-heading, 393 #yellow-popup-list { 394 width: 16em; 395 } 396 #yellow-popup-format a, 397 #yellow-popup-heading a { 398 padding: 0.25em 16px; 399 } 400 #yellow-popup-format #yellow-popup-format-h1, 401 #yellow-popup-heading #yellow-popup-heading-h1 { 402 font-size: 2em; 403 font-weight: bold; 404 } 405 #yellow-popup-format #yellow-popup-format-h2, 406 #yellow-popup-heading #yellow-popup-heading-h2 { 407 font-size: 1.6em; 408 font-weight: bold; 409 } 410 #yellow-popup-format #yellow-popup-format-h3, 411 #yellow-popup-heading #yellow-popup-heading-h3 { 412 font-size: 1.3em; 413 font-weight: bold; 414 } 415 #yellow-popup-format #yellow-popup-format-quote { 416 font-style: italic; 417 } 418 #yellow-popup-format #yellow-popup-format-pre { 419 font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; 420 font-size: 0.9em; 421 line-height: 1.8; 422 } 423 #yellow-popup-emoji { 424 padding: 10px; 425 width: 14em; 426 } 427 #yellow-popup-emoji a { 428 padding: 0.2em; 429 } 430 #yellow-popup-emoji .yellow-dropdown li { 431 display: inline-block; 432 } 433 #yellow-popup-icon { 434 padding: 10px; 435 width: 13em; 436 } 437 #yellow-popup-icon a { 438 padding: 0.18em 0.3em; 439 min-width: 1em; 440 text-align: center; 441 } 442 #yellow-popup-icon .yellow-dropdown li { 443 display: inline-block; 444 } 445 446 /* Icons */ 447 448 .yellow-icon { 449 display: inline-block; 450 width: 1em; 451 height: 1em; 452 background-color: currentcolor; 453 background-size: 1em 1em; 454 background-repeat: no-repeat; 455 background-position: center center; 456 } 457 .yellow-spin { 458 -webkit-animation: yellow-spin 1s infinite steps(16); 459 animation: yellow-spin 1s infinite steps(16); 460 } 461 @-webkit-keyframes yellow-spin { 462 0% { 463 -webkit-transform: rotate(0deg); 464 transform: rotate(0deg); 465 } 466 100% { 467 -webkit-transform: rotate(359deg); 468 transform: rotate(359deg); 469 } 470 } 471 @keyframes yellow-spin { 472 0% { 473 -webkit-transform: rotate(0deg); 474 transform: rotate(0deg); 475 } 476 100% { 477 -webkit-transform: rotate(359deg); 478 transform: rotate(359deg); 479 } 480 } 481 .yellow-icon-preview { 482 -webkit-mask: url("edit-stack.svg#preview"); 483 mask: url("edit-stack.svg#preview"); 484 } 485 .yellow-icon-format, 486 .yellow-icon-paragraph { 487 -webkit-mask: url("edit-stack.svg#format"); 488 mask: url("edit-stack.svg#format"); 489 } 490 .yellow-icon-heading { 491 -webkit-mask: url("edit-stack.svg#heading"); 492 mask: url("edit-stack.svg#heading"); 493 } 494 .yellow-icon-h1 { 495 -webkit-mask: url("edit-stack.svg#h1"); 496 mask: url("edit-stack.svg#h1"); 497 } 498 .yellow-icon-h2 { 499 -webkit-mask: url("edit-stack.svg#h2"); 500 mask: url("edit-stack.svg#h2"); 501 } 502 .yellow-icon-h3 { 503 -webkit-mask: url("edit-stack.svg#h3"); 504 mask: url("edit-stack.svg#h3"); 505 } 506 .yellow-icon-bold { 507 -webkit-mask: url("edit-stack.svg#bold"); 508 mask: url("edit-stack.svg#bold"); 509 } 510 .yellow-icon-italic { 511 -webkit-mask: url("edit-stack.svg#italic"); 512 mask: url("edit-stack.svg#italic"); 513 } 514 .yellow-icon-strikethrough { 515 -webkit-mask: url("edit-stack.svg#strikethrough"); 516 mask: url("edit-stack.svg#strikethrough"); 517 } 518 .yellow-icon-quote { 519 -webkit-mask: url("edit-stack.svg#quote"); 520 mask: url("edit-stack.svg#quote"); 521 } 522 .yellow-icon-code, 523 .yellow-icon-pre { 524 -webkit-mask: url("edit-stack.svg#code"); 525 mask: url("edit-stack.svg#code"); 526 } 527 .yellow-icon-link { 528 -webkit-mask: url("edit-stack.svg#link"); 529 mask: url("edit-stack.svg#link"); 530 } 531 .yellow-icon-file { 532 -webkit-mask: url("edit-stack.svg#file"); 533 mask: url("edit-stack.svg#file"); 534 } 535 .yellow-icon-list, 536 .yellow-icon-ul { 537 -webkit-mask: url("edit-stack.svg#list"); 538 mask: url("edit-stack.svg#list"); 539 } 540 .yellow-icon-ol { 541 -webkit-mask: url("edit-stack.svg#ol"); 542 mask: url("edit-stack.svg#ol"); 543 } 544 .yellow-icon-tl { 545 -webkit-mask: url("edit-stack.svg#tl"); 546 mask: url("edit-stack.svg#tl"); 547 } 548 .yellow-icon-hr { 549 -webkit-mask: url("edit-stack.svg#hr"); 550 mask: url("edit-stack.svg#hr"); 551 } 552 .yellow-icon-table { 553 -webkit-mask: url("edit-stack.svg#table"); 554 mask: url("edit-stack.svg#table"); 555 } 556 .yellow-icon-emoji { 557 -webkit-mask: url("edit-stack.svg#emoji"); 558 mask: url("edit-stack.svg#emoji"); 559 } 560 .yellow-icon-icon { 561 -webkit-mask: url("edit-stack.svg#icon"); 562 mask: url("edit-stack.svg#icon"); 563 } 564 .yellow-icon-status { 565 -webkit-mask: url("edit-stack.svg#status"); 566 mask: url("edit-stack.svg#status"); 567 } 568 .yellow-icon-undo { 569 -webkit-mask: url("edit-stack.svg#undo"); 570 mask: url("edit-stack.svg#undo"); 571 } 572 .yellow-icon-redo { 573 -webkit-mask: url("edit-stack.svg#redo"); 574 mask: url("edit-stack.svg#redo"); 575 } 576 .yellow-icon-spinner { 577 -webkit-mask: url("edit-stack.svg#spinner"); 578 mask: url("edit-stack.svg#spinner"); 579 } 580 .yellow-icon-select { 581 -webkit-mask: url("edit-stack.svg#select"); 582 mask: url("edit-stack.svg#select"); 583 } 584 .yellow-icon-search { 585 -webkit-mask: url("edit-stack.svg#search"); 586 mask: url("edit-stack.svg#search"); 587 } 588 .yellow-icon-close { 589 -webkit-mask: url("edit-stack.svg#close"); 590 mask: url("edit-stack.svg#close"); 591 } 592 .yellow-icon-help { 593 -webkit-mask: url("edit-stack.svg#help"); 594 mask: url("edit-stack.svg#help"); 595 } 596 .yellow-icon-logo { 597 -webkit-mask: url("edit-stack.svg#logo"); 598 mask: url("edit-stack.svg#logo"); 599 }