editor-style.css (10310B)
1 /* 2 Theme Name: Appside 3 Description: Used to style the TinyMCE editor. 4 */ 5 6 7 /** 8 * Table of Contents: 9 * 10 * 1.0 - Body 11 * 2.0 - Typography 12 * 3.0 - Elements 13 * 4.0 - Alignment 14 * 5.0 - Caption 15 * 6.0 - Galleries 16 * 7.0 - Media Elements 17 * 8.0 - RTL 18 */ 19 20 /** 21 * 1.0 - Body 22 */ 23 24 body { 25 background-color: #fff; 26 color: #333; 27 margin: 20px 40px; 28 max-width: 580px; 29 } 30 31 /** 32 * 2.0 - Typography 33 */ 34 35 body, 36 button, 37 input, 38 select, 39 textarea { 40 font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif; 41 font-size: 16px; 42 font-size: 1rem; 43 font-weight: 400; 44 line-height: 1.66; 45 } 46 47 h1, 48 h2, 49 h3, 50 h4, 51 h5, 52 h6 { 53 clear: both; 54 line-height: 1.4; 55 margin: 0 0 0.75em; 56 padding: 1.5em 0 0; 57 } 58 59 h1:first-child, 60 h2:first-child, 61 h3:first-child, 62 h4:first-child, 63 h5:first-child, 64 h6:first-child { 65 padding-top: 0; 66 } 67 68 h1 { 69 font-size: 24px; 70 font-size: 1.5rem; 71 font-weight: 300; 72 } 73 74 h2 { 75 color: #666; 76 font-size: 20px; 77 font-size: 1.25rem; 78 font-weight: 300; 79 } 80 81 h3 { 82 color: #333; 83 font-size: 18px; 84 font-size: 1.125rem; 85 font-weight: 300; 86 } 87 88 h4 { 89 color: #333; 90 font-size: 16px; 91 font-size: 1rem; 92 font-weight: 800; 93 } 94 95 h5 { 96 color: #767676; 97 font-size: 13px; 98 font-size: 0.8125rem; 99 font-weight: 800; 100 letter-spacing: 0.15em; 101 text-transform: uppercase; 102 } 103 104 h6 { 105 color: #333; 106 font-size: 15px; 107 font-size: 0.9375rem; 108 font-weight: 800; 109 } 110 111 p { 112 margin: 0 0 1.5em; 113 padding: 0; 114 } 115 116 dfn, 117 cite, 118 em, 119 i { 120 font-style: italic; 121 } 122 123 blockquote { 124 color: #666; 125 font-size: 18px; 126 font-size: 1.125rem; 127 font-style: italic; 128 line-height: 1.7; 129 margin: 0; 130 overflow: hidden; 131 padding: 0; 132 } 133 134 blockquote.alignleft, 135 blockquote.alignright { 136 font-size: 14px; 137 font-size: 0.875rem; 138 width: 34%; 139 } 140 141 address { 142 margin: 0 0 1.5em; 143 } 144 145 pre { 146 background: #eee; 147 font-family: "Courier 10 Pitch", Courier, monospace; 148 font-size: 15px; 149 font-size: 0.9375rem; 150 line-height: 1.6; 151 margin-bottom: 1.6em; 152 max-width: 100%; 153 overflow: auto; 154 padding: 1.6em; 155 } 156 157 code, 158 kbd, 159 tt, 160 var { 161 font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; 162 font-size: 15px; 163 font-size: 0.9375rem; 164 } 165 166 abbr, 167 acronym { 168 border-bottom: 1px dotted #666; 169 cursor: help; 170 } 171 172 mark, 173 ins { 174 background: #eee; 175 text-decoration: none; 176 } 177 178 big { 179 font-size: 125%; 180 } 181 182 blockquote, 183 q { 184 quotes: "" ""; 185 } 186 187 blockquote:before, 188 blockquote:after, 189 q:before, 190 q:after { 191 content: ""; 192 } 193 194 /* Typography for Thai Font */ 195 196 html[lang="th"] h1, 197 html[lang="th"] h2, 198 html[lang="th"] h3, 199 html[lang="th"] h4, 200 html[lang="th"] h5, 201 html[lang="th"] h6 { 202 letter-spacing: 0; 203 line-height: 1.65; 204 } 205 206 html[lang="th"] body, 207 html[lang="th"] button, 208 html[lang="th"] input, 209 html[lang="th"] select, 210 html[lang="th"] textarea { 211 line-height: 1.8; 212 } 213 214 /** 215 * 3.0 - Elements 216 */ 217 218 hr { 219 background-color: #bbb; 220 border: 0; 221 height: 1px; 222 margin-bottom: 1.5em; 223 } 224 225 ul, 226 ol { 227 margin: 0 0 1.5em; 228 padding: 0; 229 } 230 231 ul { 232 list-style: disc; 233 } 234 235 ol { 236 counter-reset: item; 237 } 238 239 ol > li { 240 display: block; 241 position: relative; 242 } 243 244 ol > li:before { 245 content: counter(item); 246 counter-increment: item; 247 font-weight: 800; 248 left: -1.5em; 249 position: absolute; 250 } 251 252 li > ul, 253 li > ol { 254 margin-bottom: 0; 255 margin-left: 1.5em; 256 } 257 258 dt { 259 font-weight: 700; 260 } 261 262 dd { 263 margin: 0 1.5em 1.5em; 264 } 265 266 table { 267 border-collapse: collapse; 268 margin: 0 0 1.5em; 269 width: 100%; 270 } 271 272 thead th { 273 border-bottom: 2px solid #bbb; 274 padding-bottom: 0.5em; 275 } 276 277 th { 278 padding: 0.4em; 279 text-align: left; 280 } 281 282 tr { 283 border-bottom: 1px solid #eee; 284 } 285 286 td { 287 padding: 0.4em; 288 } 289 290 th:first-child, 291 td:first-child { 292 padding-left: 0; 293 } 294 295 th:last-child, 296 td:last-child { 297 padding-right: 0; 298 } 299 300 a { 301 -webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1); 302 box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1); 303 color: #222; 304 text-decoration: none; 305 -webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out; 306 transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out; 307 transition: color 80ms ease-in, box-shadow 130ms ease-in-out; 308 transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out; 309 } 310 311 a:focus { 312 outline: thin dotted; 313 } 314 315 a:hover, 316 a:focus { 317 color: #000; 318 -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1); 319 box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1); 320 } 321 322 /* Fixes linked images */ 323 324 a img { 325 background: #fff; 326 -webkit-box-shadow: 0 0 0 6px #fff; 327 box-shadow: 0 0 0 6px #fff; 328 } 329 330 /** 331 * 4.0 - Alignment 332 */ 333 334 img { 335 height: auto; /* Make sure images are scaled correctly. */ 336 width: inherit; /* Make images fill their parent's space. Solves IE8. */ 337 max-width: 100%; /* Adhere to container width. */ 338 } 339 340 embed, 341 iframe, 342 object { 343 margin-bottom: 1.5em; 344 max-width: 100%; 345 } 346 347 /** 348 * 5.0 - Caption 349 */ 350 351 .wp-caption { 352 color: #666; 353 font-size: 13px; 354 font-size: 0.8125rem; 355 font-style: italic; 356 margin-bottom: 1.5em; 357 max-width: 100%; 358 } 359 360 .wp-caption img[class*="wp-image-"] { 361 display: block; 362 margin-left: auto; 363 margin-right: auto; 364 } 365 366 .wp-caption .wp-caption-text { 367 margin: 0.8075em 0; 368 } 369 370 /** 371 * 6.0 - Galleries 372 */ 373 374 .gallery { 375 margin-bottom: 1.5em; 376 } 377 378 .gallery-item { 379 display: inline-block; 380 text-align: center; 381 vertical-align: top; 382 width: 100%; 383 } 384 385 .gallery-item a, 386 .gallery-item a:hover, 387 .gallery-item a:focus { 388 -webkit-box-shadow: none; 389 box-shadow: none; 390 background: none; 391 display: inline-block; 392 } 393 394 .gallery-columns-2 .gallery-item { 395 max-width: 50%; 396 } 397 398 .gallery-columns-3 .gallery-item { 399 max-width: 33.33%; 400 } 401 402 .gallery-columns-4 .gallery-item { 403 max-width: 25%; 404 } 405 406 .gallery-columns-5 .gallery-item { 407 max-width: 20%; 408 } 409 410 .gallery-columns-6 .gallery-item { 411 max-width: 16.66%; 412 } 413 414 .gallery-columns-7 .gallery-item { 415 max-width: 14.28%; 416 } 417 418 .gallery-columns-8 .gallery-item { 419 max-width: 12.5%; 420 } 421 422 .gallery-columns-9 .gallery-item { 423 max-width: 11.11%; 424 } 425 426 .gallery-caption { 427 display: block; 428 } 429 430 /** 431 * 7.0 - Media Elements 432 */ 433 434 .mejs-container { 435 margin-bottom: 1.5em; 436 } 437 438 /* Audio Player */ 439 440 .mejs-controls a.mejs-horizontal-volume-slider, 441 .mejs-controls a.mejs-horizontal-volume-slider:focus, 442 .mejs-controls a.mejs-horizontal-volume-slider:hover { 443 background: transparent; 444 border: 0; 445 } 446 447 /* Playlist Color Overrides: Light */ 448 449 .wp-playlist-light { 450 border-color: #eee; 451 color: #222; 452 } 453 454 .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-album { 455 color: #333; 456 } 457 458 .wp-playlist-light .wp-playlist-current-item .wp-playlist-item-artist { 459 color: #767676; 460 } 461 462 .wp-playlist-light .wp-playlist-item { 463 border-bottom: 1px dotted #eee; 464 -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; 465 transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; 466 } 467 468 .wp-playlist-light .wp-playlist-item:hover, 469 .wp-playlist-light .wp-playlist-item:focus { 470 border-bottom-color: rgba(0, 0, 0, 0); 471 background-color: #767676; 472 color: #fff; 473 } 474 475 .wp-playlist-light a.wp-playlist-caption:hover, 476 .wp-playlist-light .wp-playlist-item:hover a, 477 .wp-playlist-light .wp-playlist-item:focus a { 478 color: #fff; 479 } 480 481 /* Playlist Color Overrides: Dark */ 482 483 .wp-playlist-dark { 484 background: #222; 485 border-color: #333; 486 } 487 488 .wp-playlist-dark .mejs-container .mejs-controls { 489 background-color: #333; 490 } 491 492 .wp-playlist-dark .wp-playlist-caption { 493 color: #fff; 494 } 495 496 .wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-album { 497 color: #eee; 498 } 499 500 .wp-playlist-dark .wp-playlist-current-item .wp-playlist-item-artist { 501 color: #aaa; 502 } 503 504 .wp-playlist-dark .wp-playlist-playing { 505 background-color: #333; 506 } 507 508 .wp-playlist-dark .wp-playlist-item { 509 border-bottom: 1px dotted #555; 510 -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; 511 transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; 512 } 513 514 .wp-playlist-dark .wp-playlist-item:hover, 515 .wp-playlist-dark .wp-playlist-item:focus { 516 border-bottom-color: rgba(0, 0, 0, 0); 517 background-color: #aaa; 518 color: #222; 519 } 520 521 .wp-playlist-dark a.wp-playlist-caption:hover, 522 .wp-playlist-dark .wp-playlist-item:hover a, 523 .wp-playlist-dark .wp-playlist-item:focus a { 524 color: #222; 525 } 526 527 /* Playlist Style Overrides */ 528 529 .wp-playlist { 530 padding: 0.625em 0.625em 0.3125em; 531 } 532 533 .wp-playlist-current-item .wp-playlist-item-title { 534 font-weight: 700; 535 } 536 537 .wp-playlist-current-item .wp-playlist-item-album { 538 font-style: normal; 539 } 540 541 .wp-playlist-current-item .wp-playlist-item-artist { 542 font-size: 10px; 543 font-size: 0.625rem; 544 font-weight: 800; 545 letter-spacing: 0.1818em; 546 text-transform: uppercase; 547 } 548 549 .wp-playlist-item { 550 padding: 0 0.3125em; 551 cursor: pointer; 552 } 553 554 .wp-playlist-item:last-of-type { 555 border-bottom: none; 556 } 557 558 .wp-playlist-item a { 559 padding: 0.3125em 0; 560 border-bottom: none; 561 } 562 563 .wp-playlist-item a, 564 .wp-playlist-item a:focus, 565 .wp-playlist-item a:hover { 566 -webkit-box-shadow: none; 567 box-shadow: none; 568 background: transparent; 569 } 570 571 .wp-playlist-item-length { 572 top: 5px; 573 } 574 575 /** 576 * 8.0 - RTL 577 */ 578 579 .rtl th { 580 text-align: right; 581 } 582 583 .rtl ol { 584 counter-reset: item; 585 } 586 587 .rtl ol > li:before { 588 left: auto; 589 right: -1.5em; 590 } 591 592 .rtl li > ul, 593 .rtl li > ol { 594 margin-left: 0; 595 margin-right: 1.5em; 596 } 597 598 .rtl .mejs-offscreen { 599 right: -10000px; 600 }