[ Index ] |
PHP Cross Reference of WordPress Trunk (Updated Daily) |
[Summary view] [Print] [Text view]
1 /* 2 Theme Name: Twenty Thirteen 3 Description: Used to style blocks. 4 */ 5 6 /*-------------------------------------------------------------- 7 >>> TABLE OF CONTENTS: 8 ---------------------------------------------------------------- 9 1.0 Block Alignments 10 2.0 General Block Styles 11 3.0 Blocks - Common Blocks 12 4.0 Blocks - Formatting 13 5.0 Blocks - Layout Elements 14 6.0 Blocks - Widgets 15 7.0 Blocks - Colors 16 --------------------------------------------------------------*/ 17 18 /*-------------------------------------------------------------- 19 1.0 Block Alignments 20 --------------------------------------------------------------*/ 21 22 .content-area { 23 overflow-x: hidden; /* prevents side-scrolling caused by use of vw */ 24 } 25 26 [class^="wp-block-"].alignleft, 27 [class^="wp-block-"] .alignleft { 28 margin-right: 20px; 29 } 30 31 [class^="wp-block-"].alignright, 32 [class^="wp-block-"] .alignright { 33 margin-left: 20px; 34 } 35 36 .alignfull, 37 .alignwide { 38 clear: both; 39 } 40 41 body:not(.sidebar) .alignwide { 42 margin-left: calc(25% - 25vw); 43 margin-right: calc(25% - 25vw); 44 width: auto; 45 max-width: 1600px; 46 } 47 48 body:not(.sidebar) .alignfull { 49 margin-left: calc(50% - 50vw); 50 margin-right: calc(50% - 50vw); 51 width: auto; 52 max-width: 1600px; 53 } 54 55 /* Make non image-based blocks a bit narrower, so they don't get cut off. */ 56 body:not(.sidebar) .wp-block-columns.alignfull, 57 body:not(.sidebar) .wp-block-audio.alignfull, 58 body:not(.sidebar) .wp-block-table.alignfull, 59 body:not(.sidebar) .wp-block-latest-comments.alignfull { 60 margin-left: calc(50% - 48vw); 61 margin-right: calc(50% - 48vw); 62 } 63 64 @media (max-width: 999px) { 65 body.sidebar .alignwide { 66 margin-left: calc(25% - 25vw); 67 margin-right: calc(25% - 25vw); 68 width: auto; 69 max-width: 1600px; 70 } 71 72 body.sidebar .alignfull { 73 margin-left: calc(50% - 50vw); 74 margin-right: calc(50% - 50vw); 75 width: auto; 76 max-width: 1600px; 77 } 78 79 /* Make non image-based blocks a bit narrower, so they don't get cut off. */ 80 body.sidebar .wp-block-columns.alignfull, 81 body.sidebar .wp-block-audio.alignfull, 82 body.sidebar .wp-block-table.alignfull, 83 body.sidebar .wp-block-latest-comments.alignfull { 84 margin-left: calc(50% - 48vw); 85 margin-right: calc(50% - 48vw); 86 } 87 } 88 89 @media (min-width: 1600px) { 90 91 /* Make sure the full and wide blocks still stay in Twenty Thirteen's wide container */ 92 body:not(.sidebar) .alignfull { 93 margin-left: calc(50% - 800px); 94 margin-right: calc(50% - 800px); 95 width: auto; 96 max-width: 1000%; 97 } 98 99 body:not(.sidebar) .wp-block-columns.alignfull, 100 body:not(.sidebar) .wp-block-audio.alignfull, 101 body:not(.sidebar) .wp-block-table.alignfull, 102 body:not(.sidebar) .wp-block-latest-comments.alignfull { 103 margin-left: calc(50% - 780px); 104 margin-right: calc(50% - 780px); 105 } 106 107 body:not(.sidebar) .wp-block-gallery.alignfull { 108 margin-left: calc(50% - 808px); /* Adjust for gallery margins */ 109 margin-right: calc(50% - 808px); 110 width: auto; 111 max-width: 1000%; 112 } 113 114 /* Make sure the 'wide' alignment doesn't get too wide. */ 115 body:not(.sidebar) .alignwide { 116 margin-left: -230px; 117 margin-right: -230px; 118 } 119 } 120 121 /*-------------------------------------------------------------- 122 2.0 General Block Styles 123 --------------------------------------------------------------*/ 124 125 /* Captions */ 126 127 [class^="wp-block-"] figcaption, 128 [class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body { 129 color: #220e10; 130 font-size: 18px; 131 font-style: italic; 132 font-weight: 300; 133 line-height: 1.5; 134 margin: 0 0 24px; 135 } 136 137 /*-------------------------------------------------------------- 138 3.0 Blocks - Common Blocks 139 --------------------------------------------------------------*/ 140 141 /* Paragraph */ 142 143 p.has-drop-cap:not(:focus)::first-letter { 144 font-size: 5em; 145 } 146 147 /* Gallery */ 148 149 .wp-block-gallery { 150 margin-bottom: 24px; 151 } 152 153 .wp-block-gallery figcaption { 154 margin-bottom: 0; 155 } 156 157 /* Quote */ 158 159 .wp-block-quote { 160 margin: 24px 40px; 161 padding: 0; 162 } 163 164 .wp-block-quote:not(.is-large):not(.is-style-large) { 165 border-left: 0; 166 border-right: 0; 167 padding-left: 0; 168 padding-right: 0; 169 } 170 171 .wp-block-quote.is-large p, 172 .wp-block-quote.is-style-large p { 173 font-size: 28px; 174 } 175 176 .wp-block-quote cite { 177 color: inherit; 178 font-size: inherit; 179 font-style: italic; 180 } 181 182 /* Audio */ 183 184 .wp-block-audio audio { 185 display: block; 186 width: 100%; 187 } 188 189 /* Cover */ 190 191 .wp-block-cover-image.aligncenter, 192 .wp-block-cover.aligncenter { 193 clear: both; 194 display: flex; 195 } 196 197 body:not(.sidebar) .wp-block-cover > .wp-block-cover__inner-container > * { 198 width: 604px; 199 max-width: 100%; 200 margin-left: auto; 201 margin-right: auto; 202 } 203 204 @media screen and (min-width: 665px) { 205 body:not(.sidebar) .wp-block-cover__inner-container > .wp-block-group.alignfull, 206 body:not(.sidebar) .wp-block-cover__inner-container > .wp-block-group.has-background.alignfull { 207 padding: 20px; 208 } 209 } 210 211 /* File */ 212 213 .wp-block-file .wp-block-file__button { 214 background: #e05d22; /* Old browsers */ 215 background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */ 216 background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */ 217 border: none; 218 border-radius: 2px; 219 border-bottom: 3px solid #b93207; 220 color: #fff; 221 display: inline-block; 222 font-size: 16px; 223 padding: 11px 24px 10px; 224 text-decoration: none; 225 } 226 227 .wp-block-file .wp-block-file__button:hover, 228 .wp-block-file .wp-block-file__button:focus { 229 background: #ed6a31; /* Old browsers */ 230 background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */ 231 background: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */ 232 color: #fff; 233 outline: none; 234 } 235 236 .wp-block-file .wp-block-file__button:active { 237 background: #d94412; /* Old browsers */ 238 background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome 10+, Safari 5.1+ */ 239 background: linear-gradient(to bottom, #d94412 0%, #e05d22 100%); /* W3C */ 240 border: none; 241 border-top: 3px solid #b93207; 242 padding: 10px 24px 11px; 243 } 244 245 /*-------------------------------------------------------------- 246 4.0 Blocks - Formatting 247 --------------------------------------------------------------*/ 248 249 /* Code */ 250 251 .wp-block-code { 252 background-color: transparent; 253 border: 0; 254 padding: 0; 255 } 256 257 /* Pullquote */ 258 259 .wp-block-pullquote { 260 border: 0; 261 color: inherit; 262 padding: 0.5em 0; 263 } 264 265 .wp-block-pullquote__citation, 266 .wp-block-pullquote cite, 267 .wp-block-pullquote footer { 268 color: inherit; 269 } 270 271 /* Table */ 272 273 .wp-block-table { 274 border-collapse: collapse; 275 border-spacing: 0; 276 font-size: 14px; 277 line-height: 2; 278 margin: 0 0 20px; 279 width: 100%; 280 } 281 282 .wp-block-table th { 283 border: 0; 284 font-weight: bold; 285 text-transform: uppercase; 286 } 287 288 .wp-block-table td { 289 border: 0; 290 border-top: 1px solid #ededed; 291 } 292 293 body:not(.sidebar) .wp-block-table.alignwide, 294 body:not(.sidebar) .wp-block-table.alignfull { 295 width: 100%; 296 } 297 298 /* Some acrobatics to make sure the table blocks always fill the available space. */ 299 300 @media (max-width: 1599px) { 301 body:not(.sidebar) .wp-block-table.alignwide { 302 width: calc(302px + 50vw); /* Half the content area width plus half the screen width. */ 303 } 304 305 body:not(.sidebar) .wp-block-table.alignfull { 306 width: 96vw; 307 } 308 } 309 310 @media (max-width: 999px) { 311 body.sidebar .wp-block-table.alignwide { 312 width: calc(302px + 50vw); /* Half the content area width plus half the screen width. */ 313 } 314 315 body.sidebar .wp-block-table.alignfull { 316 width: 96vw; 317 } 318 } 319 320 @media (max-width: 654px) { 321 body:not(.sidebar) .wp-block-table.alignwide, 322 body.sidebar .wp-block-table.alignwide { 323 width: 96vw; 324 } 325 } 326 327 @media (min-width: 1600px) { 328 body:not(.sidebar) .wp-block-table.alignwide { 329 width: 1064px; 330 } 331 332 body:not(.sidebar) .wp-block-table.alignfull { 333 width: 1560px; 334 } 335 } 336 337 /*-------------------------------------------------------------- 338 5.0 Blocks - Layout Elements 339 --------------------------------------------------------------*/ 340 341 /* Buttons */ 342 343 .wp-block-button.alignleft { 344 margin-right: 20px; 345 } 346 347 .wp-block-button.alignright { 348 margin-left: 20px; 349 } 350 351 .wp-block-button .wp-block-button__link { 352 border-bottom: 3px solid #b93207; 353 display: inline-block; 354 font-size: 16px; 355 padding: 11px 24px 10px; 356 text-decoration: none; 357 } 358 359 .entry-content .wp-block-button__link { 360 background-color: #e05d22; 361 color: #fff; 362 } 363 364 .entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) { 365 background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */ 366 background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */ 367 } 368 369 .entry-content .wp-block-button__link:hover, 370 .entry-content .wp-block-button__link:focus, 371 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):hover, 372 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color):focus, 373 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):hover, 374 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):focus { 375 background: #ed6a31; 376 color: #fff; 377 } 378 379 .wp-block-button.is-style-outline .wp-block-button__link { 380 border-width: 2px; 381 border-color: inherit; 382 } 383 384 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) { 385 background-color: inherit; 386 } 387 388 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) { 389 color: #ed6a31; 390 } 391 392 .entry-content .wp-block-button__link:not(.has-background):hover, 393 .entry-content .wp-block-button__link:not(.has-background):hover, 394 .entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover { 395 background: -webkit-linear-gradient(top, #ed6a31 0%, #e55627 100%); /* Chrome 10+, Safari 5.1+ */ 396 background: linear-gradient(to bottom, #ed6a31 0%, #e55627 100%); /* W3C */ 397 } 398 399 .entry-content .wp-block-button__link:active { 400 background: #d94412; 401 } 402 403 .entry-content .wp-block-button__link:not(.has-background):active { 404 background: -webkit-linear-gradient(top, #d94412 0%, #e05d22 100%); /* Chrome 10+, Safari 5.1+ */ 405 background: linear-gradient(to bottom, #d94412 0%, #e05d22 100%); /* W3C */ 406 } 407 408 .entry-content .wp-block-button .wp-block-button__link:active { 409 border: none; 410 border-top: 3px solid #b93207; 411 padding: 10px 24px 11px; 412 } 413 414 .entry-content .wp-block-button.is-style-no-shadow .wp-block-button__link { 415 border-bottom: none; 416 } 417 418 /* Separator */ 419 420 .wp-block-separator { 421 border: 0; 422 max-width: 100px; 423 } 424 425 .wp-block-separator.is-style-wide, 426 .wp-block-separator.is-style-dots { 427 max-width: 100%; 428 } 429 430 /* Group Block: Default Alignment */ 431 432 .wp-block-group, 433 .wp-block-group.has-background { 434 margin-bottom: 24px; 435 } 436 437 .wp-block-group:not(.alignfull):not(.alignwide) > .wp-block-group__inner-container > * { 438 width: 604px; 439 max-width: 100%; 440 margin-left: 0; 441 margin-right: 0; 442 } 443 444 .wp-block-group.has-background:not(.alignfull):not(.alignwide) > .wp-block-group__inner-container > .alignfull { 445 width: calc(100% + 60px); 446 max-width: calc(100% + 60px); 447 margin-left: -30px; 448 } 449 450 .wp-block-group:not(.alignfull) .wp-block-columns.alignfull { 451 margin-left: auto; 452 margin-right: auto; 453 } 454 455 /* Group Block: Wide Alignment */ 456 457 .wp-block-group.alignwide > .wp-block-group__inner-container > *, 458 .wp-block-group.alignwide > .wp-block-group__inner-container > .alignwide, 459 .wp-block-group.alignwide > .wp-block-group__inner-container > .alignfull { 460 max-width: 604px; 461 margin-left: auto; 462 margin-right: auto; 463 } 464 465 .wp-block-group.alignwide > .wp-block-group__inner-container > .alignwide, 466 .wp-block-group.alignwide > .wp-block-group__inner-container > .alignfull { 467 width: 100%; 468 max-width: 100%; 469 } 470 471 .wp-block-group.has-background.alignwide > .wp-block-group__inner-container > .alignfull { 472 width: calc(100% + 60px); 473 max-width: calc(100% + 60px); 474 margin-left: -30px; 475 } 476 477 @media (max-width: 664px) { 478 .wp-block-group:not(.has-background).alignwide { 479 margin-left: 0; 480 margin-right: 0; 481 } 482 483 .wp-block-group:not(.has-background).alignwide > .wp-block-group__inner-container > .alignwide, 484 .wp-block-group:not(.has-background).alignwide > .wp-block-group__inner-container > .alignfull { 485 width: auto; 486 max-width: 1600px; 487 margin-left: calc(25% - 25vw); 488 margin-right: calc(25% - 25vw); 489 } 490 } 491 492 /* Group Block: Full Alignment */ 493 494 @media (max-width: 664px) { 495 .wp-block-group:not(.has-background).alignfull { 496 margin-left: 0; 497 margin-right: 0; 498 } 499 500 .wp-block-group.has-background.alignfull > *:not(.alignfull) { 501 margin-left: auto; 502 margin-right: auto; 503 } 504 } 505 506 @media (max-width: 999px) { 507 body.sidebar .wp-block-group.alignfull:not(.has-background) { 508 margin-left: 0; 509 margin-right: 0; 510 } 511 512 body.sidebar .wp-block-group.alignfull.has-background > .wp-block-group__inner-container { 513 max-width: 604px; 514 margin: 0 auto; 515 } 516 517 body.sidebar .wp-block-group.alignfull:not(.has-background) > .wp-block-group__inner-container > .alignfull { 518 margin-left: calc(50% - 50vw); 519 margin-right: calc(50% - 50vw); 520 } 521 } 522 523 @media (min-width: 665px) { 524 body:not(.sidebar) .wp-block-group.alignfull, 525 body:not(.sidebar) .wp-block-group.has-background.alignfull { 526 padding: 20px calc( (100vw - 604px ) / 2 ); /* Reproduces the padding of entry-content, so that default block rules apply properly inside of this block. */ 527 } 528 } 529 530 @media (min-width: 1600px) { 531 body:not(.sidebar) .wp-block-group.alignfull, 532 body:not(.sidebar) .wp-block-group.has-background.alignfull { 533 padding: 20px 498px; /* Above 1600px, these need fixed left/right padding. This works out to ((1600px - 604px) / 2) */ 534 } 535 } 536 537 /* Media & Text */ 538 539 .wp-block-media-text { 540 margin-bottom: 24px; 541 } 542 543 .wp-block-media-text *:last-child { 544 margin-bottom: 0; 545 } 546 547 /* Details */ 548 549 .wp-block-details > summary:first-of-type { 550 display: list-item; 551 } 552 553 /*-------------------------------------------------------------- 554 6.0 Blocks - Widgets 555 --------------------------------------------------------------*/ 556 557 /* Archives, Categories & Latest Posts */ 558 559 .wp-block-archives.aligncenter, 560 .wp-block-categories.aligncenter, 561 .wp-block-latest-posts.aligncenter { 562 list-style-position: inside; 563 text-align: center; 564 } 565 566 /* Latest Comments */ 567 568 .wp-block-latest-comments { 569 margin: 0; 570 padding: 0; 571 } 572 573 .wp-block-latest-comments .avatar, 574 .wp-block-latest-comments__comment-avatar { 575 border-radius: 0; 576 } 577 578 .wp-block-latest-comments__comment, 579 .wp-block-latest-comments__comment-excerpt, 580 .wp-block-latest-comments__comment-excerpt p { 581 font-size: 16px; 582 } 583 584 .wp-block-latest-comments__comment-excerpt p:last-child { 585 margin-bottom: 0; 586 } 587 588 .wp-block-latest-comments__comment-date { 589 font-size: 16px; 590 } 591 592 .wp-block-latest-comments .wp-block-latest-comments__comment:not(:first-child) { 593 background: url(../images/dotted-line.png) repeat-x left top; 594 margin-bottom: 0; 595 padding: 24px 0; 596 } 597 598 /*-------------------------------------------------------------- 599 7.0 Blocks - Colors 600 --------------------------------------------------------------*/ 601 602 .entry-content .has-dark-gray-color { 603 color: #141412; 604 } 605 606 .entry-content .has-dark-gray-background-color { 607 background-color: #141412; 608 } 609 610 .entry-content .has-red-color { 611 color: #bc360a; 612 } 613 614 .entry-content .has-red-background-color { 615 background-color: #bc360a; 616 } 617 618 .entry-content .has-medium-orange-color { 619 color: #db572f; 620 } 621 622 .entry-content .has-medium-orange-background-color { 623 background-color: #db572f; 624 } 625 626 .entry-content .has-light-orange-color { 627 color: #ea9629; 628 } 629 630 .entry-content .has-light-orange-background-color { 631 background-color: #ea9629; 632 } 633 634 .entry-content .has-yellow-color { 635 color: #fbca3c; 636 } 637 638 .entry-content .has-yellow-background-color { 639 background-color: #fbca3c; 640 } 641 642 .entry-content .has-white-color { 643 color: #fff; 644 } 645 646 .entry-content .has-white-background-color { 647 background-color: #fff; 648 } 649 650 .entry-content .has-dark-brown-color { 651 color: #220e10; 652 } 653 654 .entry-content .has-dark-brown-background-color { 655 background-color: #220e10; 656 } 657 658 .entry-content .has-medium-brown-color { 659 color: #722d19; 660 } 661 662 .entry-content .has-medium-brown-background-color { 663 background-color: #722d19; 664 } 665 666 .entry-content .has-light-brown-color { 667 color: #eadaa6; 668 } 669 670 .entry-content .has-light-brown-background-color { 671 background-color: #eadaa6; 672 } 673 674 .entry-content .has-beige-color { 675 color: #e8e5ce; 676 } 677 678 .entry-content .has-beige-background-color { 679 background-color: #e8e5ce; 680 } 681 682 .entry-content .has-off-white-color { 683 color: #f7f5e7; 684 } 685 686 .entry-content .has-off-white-background-color { 687 background-color: #f7f5e7; 688 }
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
Generated : Fri Mar 29 08:20:02 2024 | Cross-referenced by PHPXref |