[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

Search

title

Body

[close]

/wp-content/themes/twentythirteen/css/ -> blocks.css (source)

   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  }


Generated : Fri Mar 29 08:20:02 2024 Cross-referenced by PHPXref