[Summary view] [Print] [Text view]

   1  /*
   2  Theme Name: Twenty Thirteen
   3  Description: Used to style blocks in the editor.
   4  */
   5  
   6  /*--------------------------------------------------------------
   7  >>> TABLE OF CONTENTS:
   8  ----------------------------------------------------------------
   9  1.0 General Typography
  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  .editor-block-list__layout .editor-block-list__block[data-align="full"] > .editor-block-list__block-edit figure {
  23      width: auto;
  24  }
  25  
  26  /*--------------------------------------------------------------
  27  2.0 General Typography
  28  --------------------------------------------------------------*/
  29  
  30  .edit-post-visual-editor .editor-block-list__block,
  31  .edit-post-visual-editor .editor-block-list__block p,
  32  .editor-default-block-appender textarea.editor-default-block-appender__content {
  33      font-family: "Source Sans Pro", Helvetica, sans-serif;
  34      font-size: 16px;
  35      font-weight: 400;
  36      line-height: 1.5;
  37  }
  38  
  39  .edit-post-visual-editor .editor-block-list__block {
  40      color: #141412;
  41  }
  42  
  43  .editor-post-title__block .editor-post-title__input {
  44      font-family: Bitter, Georgia, serif;
  45      font-size: 48px;
  46      font-weight: 300;
  47      line-height: 1.0909090909;
  48      margin-bottom: 12px;
  49      margin: 0 0 12px 0;
  50  }
  51  
  52  /*--------------------------------------------------------------
  53  3.0 General Block Styles
  54  --------------------------------------------------------------*/
  55  
  56  /* Main content width */
  57  
  58  .wp-block {
  59      max-width: 634px; /* 604px + 30px to account for padding */
  60  }
  61  
  62  .wp-block.alignwide,
  63  .wp-block.alignfull {
  64      max-width: inherit;
  65  }
  66  
  67  [class^="wp-block-"] .wp-block {
  68      max-width: 100%;
  69  }
  70  
  71  /* Link styles */
  72  
  73  .edit-post-visual-editor a,
  74  .editor-block-list__block a,
  75  .wp-block-freeform.block-library-rich-text__tinymce a {
  76      color: #bc360a;
  77  }
  78  
  79  /* List styles */
  80  
  81  .edit-post-visual-editor ul:not(.wp-block-gallery):not(.wp-block-post-template),
  82  .editor-block-list__block ul:not(.wp-block-gallery):not(.wp-block-post-template),
  83  .block-library-list ul,
  84  .edit-post-visual-editor ol,
  85  .editor-block-list__block ol,
  86  .block-library-list ol,
  87  .block-library-list .editor-rich-text__tinymce {
  88      padding: 0;
  89  }
  90  
  91  .edit-post-visual-editor ul:not(.wp-block-gallery):not(.wp-block-post-template),
  92  .edit-post-visual-editor .editor-block-list__block ul:not(.wp-block-gallery):not(.wp-block-post-template),
  93  .block-library-list ul {
  94      list-style-type: square;
  95  }
  96  
  97  .edit-post-visual-editor ol,
  98  .editor-block-list__block ol,
  99  .block-library-list ol {
 100      list-style: decimal;
 101  }
 102  
 103  .edit-post-visual-editor ul:not(.wp-block-gallery) li > ul,
 104  .editor-block-list__block ul:not(.wp-block-gallery) li > ul,
 105  .block-library-list li > ul,
 106  .edit-post-visual-editor li > ol,
 107  .editor-block-list__block li > ol,
 108  .block-library-list li > ol {
 109      margin: 0;
 110  }
 111  
 112  .edit-post-visual-editor ul:not(.wp-block-gallery) li,
 113  .editor-block-list__block ul:not(.wp-block-gallery) li,
 114  .edit-post-visual-editor ol li,
 115  .editor-block-list__block ol li,
 116  .block-library-list li {
 117      margin-bottom: 0;
 118  }
 119  
 120  .editor-styles-wrapper ul.block-editor-block-list__block:not(.wp-block-post-template),
 121  .editor-styles-wrapper ol.block-editor-block-list__block:not(.wp-block-post-template),
 122  .editor-styles-wrapper ol ul:not(.wp-block-gallery):not(.wp-block-post-template),
 123  .editor-styles-wrapper ul ul:not(.wp-block-gallery):not(.wp-block-post-template),
 124  .editor-styles-wrapper ul ol,
 125  .editor-styles-wrapper ol ol,
 126  .wp-block-freeform.block-library-rich-text__tinymce ul,
 127  .wp-block-freeform.block-library-rich-text__tinymce ol {
 128      padding: 0 0 0 40px;
 129  }
 130  
 131  .rtl .editor-styles-wrapper ul.block-editor-block-list__block:not(.wp-block-post-template),
 132  .rtl .editor-styles-wrapper ol.block-editor-block-list__block:not(.wp-block-post-template),
 133  .rtl .editor-styles-wrapper ol ul:not(.wp-block-gallery):not(.wp-block-post-template),
 134  .rtl .editor-styles-wrapper ul ul:not(.wp-block-gallery):not(.wp-block-post-template),
 135  .rtl .editor-styles-wrapper ul ol,
 136  .rtl .editor-styles-wrapper ol ol,
 137  .rtl .wp-block-freeform.block-library-rich-text__tinymce ul,
 138  .rtl .wp-block-freeform.block-library-rich-text__tinymce ol {
 139      padding: 0 40px 0 0;
 140  }
 141  
 142  /* Quote */
 143  
 144  .wp-block-freeform.block-library-rich-text__tinymce blockquote {
 145      border-left: 0;
 146      border-right: 0;
 147      font-style: italic;
 148      margin: 24px 40px;
 149      padding-left: 0;
 150      padding-right: 0;
 151  }
 152  
 153  .wp-block-freeform.block-library-rich-text__tinymce blockquote p {
 154      font-size: 24px;
 155      font-weight: 300;
 156  }
 157  
 158  /* Table */
 159  
 160  .rtl .editor-block-list__block table th,
 161  .rtl .editor-block-list__block table td {
 162      text-align: right;
 163  }
 164  
 165  /* Code */
 166  
 167  .wp-block-freeform.block-library-rich-text__tinymce code,
 168  .editor-styles-wrapper .wp-block-code {
 169      background: transparent;
 170  }
 171  
 172  /* Captions */
 173  
 174  [class^="wp-block-"] figcaption,
 175  [class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body {
 176      color: #220e10;
 177      font-size: 18px;
 178      font-style: italic;
 179      font-weight: 300;
 180      line-height: 1.5;
 181      margin: 0 0 24px;
 182  }
 183  
 184  /*--------------------------------------------------------------
 185  4.0 Blocks - Common Blocks
 186  --------------------------------------------------------------*/
 187  
 188  /* Paragraph */
 189  
 190  p.has-drop-cap:not(:focus)::first-letter {
 191      font-size: 5em;
 192  }
 193  
 194  /* Gallery */
 195  
 196  .edit-post-visual-editor .wp-block-gallery {
 197      margin-bottom: 24px;
 198      padding: 0;
 199  }
 200  
 201  .wp-block-gallery figcaption,
 202  .wp-block-gallery figcaption.editor-rich-text__tinymce.mce-content-body {
 203      color: #fff;
 204      font-size: 13px;
 205      margin-bottom: 0;
 206  }
 207  
 208  /* Quote */
 209  
 210  .wp-block-quote {
 211      font-style: italic;
 212      margin: 24px 40px;
 213      padding: 0;
 214  }
 215  
 216  .editor-block-list__block .wp-block-quote p {
 217      font-size: 24px;
 218      font-weight: 300;
 219  }
 220  
 221  .wp-block-quote:not(.is-large):not(.is-style-large) {
 222      border-left: 0;
 223      border-right: 0;
 224      padding-left: 40px;
 225      padding-right: 40px;
 226  }
 227  
 228  .wp-block-quote .wp-block-quote__citation.editor-rich-text__tinymce.mce-content-body,
 229  .wp-block-quote .wp-block-quote__citation {
 230      color: inherit;
 231      font-size: 16px;
 232      font-style: italic;
 233      font-weight: normal;
 234      text-transform: uppercase;
 235  }
 236  
 237  .wp-block-quote.is-large p,
 238  .wp-block-quote.is-style-large p {
 239      font-size: 28px;
 240  }
 241  
 242  .wp-block-quote.is-large .wp-block-quote__citation.editor-rich-text__tinymce.mce-content-body,
 243  .wp-block-quote.is-style-large .wp-block-quote__citation.editor-rich-text__tinymce.mce-content-body {
 244      font-size: 18px;
 245  }
 246  
 247  /* Cover */
 248  
 249  .edit-post-visual-editor .editor-block-list__block .wp-block-cover-image p.wp-block-cover-image-text,
 250  .edit-post-visual-editor .editor-block-list__block .wp-block-cover p.wp-block-cover-text {
 251      font-size: 32px;
 252      line-height: 1.25;
 253  }
 254  
 255  /* File */
 256  
 257  .wp-block-file .wp-block-file__textlink {
 258      color: #bc360a;
 259  }
 260  
 261  .wp-block-file .wp-block-file__button {
 262      background: #e05d22; /* Old browsers */
 263      background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
 264      background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
 265      border: none;
 266      border-bottom: 3px solid #b93207;
 267      color: #fff;
 268      display: inline-block;
 269      font-size: 16px;
 270      line-height: 24px;
 271      padding: 11px 24px 10px;
 272      text-decoration: none;
 273  }
 274  
 275  /*--------------------------------------------------------------
 276  5.0 Blocks - Formatting
 277  --------------------------------------------------------------*/
 278  
 279  /* Code */
 280  
 281  .editor-styles-wrapper .wp-block-code {
 282      border: 0;
 283      padding: 0;
 284  }
 285  
 286  /* Pullquote */
 287  
 288  .edit-post-visual-editor .wp-block-pullquote {
 289      border: 0;
 290      padding: 0.5em 0;
 291  }
 292  
 293  .edit-post-visual-editor .editor-block-list__block .wp-block-pullquote p {
 294      font-weight: 300;
 295  }
 296  
 297  .edit-post-visual-editor .wp-block-pullquote__citation,
 298  .edit-post-visual-editor .wp-block-pullquote cite,
 299  .edit-post-visual-editor .wp-block-pullquote footer {
 300      color: #141412;
 301      font-size: 16px;
 302  }
 303  
 304  /* Table */
 305  
 306  .wp-block-table {
 307      border-bottom: 1px solid #ededed;
 308      border-collapse: collapse;
 309      border-spacing: 0;
 310      font-size: 14px;
 311      line-height: 2;
 312      margin: 0 0 20px;
 313      width: 100%;
 314  }
 315  
 316  .wp-block-table th {
 317      border: 0;
 318      font-weight: bold;
 319      text-transform: uppercase;
 320  }
 321  
 322  .editor-block-list__block .wp-block-table td {
 323      border: 0;
 324      border-top: 1px solid #ededed;
 325      padding: 0;
 326  }
 327  
 328  .editor-styles-wrapper .wp-block-table[style*="font-size"] *,
 329  .editor-styles-wrapper .wp-block-table[class*="-font-size"] * {
 330          font-size: inherit;
 331  }
 332  
 333  /*--------------------------------------------------------------
 334  6.0 Blocks - Layout Elements
 335  --------------------------------------------------------------*/
 336  
 337  /* Buttons */
 338  
 339  .wp-block-button .wp-block-button__link {
 340      display: inline-block;
 341      font-size: 16px;
 342      line-height: 24px;
 343      padding: 11px 24px 10px;
 344      text-decoration: none;
 345  }
 346  
 347  .wp-block-button__link {
 348      background: #e05d22;
 349      border-bottom: 3px solid #b93207;
 350      color: #fff;
 351  }
 352  
 353  .is-style-outline .wp-block-button__link:not(.has-text-color) {
 354      border-width: 2px;
 355      color: #e05d22;
 356  }
 357  
 358  .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
 359      background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
 360      background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
 361  }
 362  
 363  .wp-block-button.is-style-no-shadow .wp-block-button__link {
 364      border-bottom: none;
 365  }
 366  
 367  /* Separator */
 368  
 369  .editor-block-list__block hr.wp-block-separator {
 370      margin-left: auto;
 371      margin-right: auto;
 372  }
 373  
 374  /* Media & Text */
 375  
 376  .wp-block-media-text *:last-child {
 377      margin-bottom: 0;
 378  }
 379  
 380  /* Group */
 381  
 382  .wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block,
 383  [data-align="wide"] .wp-block,
 384  [data-align="full"] .wp-block {
 385      max-width: 634px;
 386  }
 387  
 388  .wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="wide"] {
 389      max-width: 1100px;
 390  }
 391  
 392  .wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
 393      max-width: 100%;
 394  }
 395  
 396  .wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
 397      width: calc(100% + 60px);
 398      max-width: calc(100% + 60px);
 399  }
 400  
 401  /*--------------------------------------------------------------
 402  7.0 Blocks - Widgets
 403  --------------------------------------------------------------*/
 404  
 405  /* Archives, Categories & Latest Posts */
 406  
 407  [data-align="center"] .wp-block-archives ul,
 408  [data-align="center"] .wp-block-categories ul,
 409  [data-align="center"] .wp-block-latest-posts ul {
 410      list-style-position: inside;
 411      text-align: center;
 412  }
 413  
 414  /* Latest Comments */
 415  
 416  .editor-block-list__block .wp-block-latest-comments {
 417      margin: 0;
 418      padding: 0;
 419  }
 420  
 421  .wp-block-latest-comments .avatar,
 422  .wp-block-latest-comments__comment-avatar {
 423      border-radius: 0;
 424  }
 425  
 426  .wp-block-latest-comments__comment,
 427  .wp-block-latest-comments__comment-excerpt,
 428  .wp-block-latest-comments__comment-excerpt p {
 429      font-size: 16px;
 430  }
 431  
 432  .wp-block-latest-comments__comment-excerpt p:last-child {
 433      margin-bottom: 0;
 434  }
 435  
 436  .wp-block-latest-comments__comment-date {
 437      font-size: 16px;
 438  }
 439  
 440  .wp-block-latest-comments .wp-block-latest-comments__comment {
 441      background: url(../images/dotted-line.png) repeat-x left top;
 442      margin-bottom: 0;
 443      padding: 24px 0;
 444  }
 445  
 446  /* Latest Posts */
 447  
 448  .edit-post-visual-editor .editor-block-list__block .wp-block-latest-posts.is-grid {
 449      list-style-type: none;
 450      margin-left: 0;
 451      margin-right: 0;
 452  }
 453  
 454  .edit-post-visual-editor .wp-block-latest-posts.is-grid li {
 455      margin-bottom: 1em;
 456  }
 457  
 458  /*--------------------------------------------------------------
 459  7.0 Blocks - Colors
 460  --------------------------------------------------------------*/
 461  
 462  :root .editor-styles-wrapper .has-dark-gray-color {
 463      color: #141412;
 464  }
 465  
 466  :root .editor-styles-wrapper .has-dark-gray-background-color {
 467      background-color: #141412;
 468  }
 469  
 470  :root .editor-styles-wrapper .has-red-color {
 471      color: #bc360a;
 472  }
 473  
 474  :root .editor-styles-wrapper .has-red-background-color {
 475      background-color: #bc360a;
 476  }
 477  
 478  :root .editor-styles-wrapper .has-medium-orange-color {
 479      color: #db572f;
 480  }
 481  
 482  :root .editor-styles-wrapper .has-medium-orange-background-color {
 483      background-color: #db572f;
 484  }
 485  
 486  :root .editor-styles-wrapper .has-light-orange-color {
 487      color: #ea9629;
 488  }
 489  
 490  :root .editor-styles-wrapper .has-light-orange-background-color {
 491      background-color: #ea9629;
 492  }
 493  
 494  :root .editor-styles-wrapper .has-yellow-color {
 495      color: #fbca3c;
 496  }
 497  
 498  :root .editor-styles-wrapper .has-yellow-background-color {
 499      background-color: #fbca3c;
 500  }
 501  
 502  :root .editor-styles-wrapper .has-white-color {
 503      color: #fff;
 504  }
 505  
 506  :root .editor-styles-wrapper .has-white-background-color {
 507      background-color: #fff;
 508  }
 509  
 510  :root .editor-styles-wrapper .has-dark-brown-color {
 511      color: #220e10;
 512  }
 513  
 514  :root .editor-styles-wrapper .has-dark-brown-background-color {
 515      background-color: #220e10;
 516  }
 517  
 518  :root .editor-styles-wrapper .has-medium-brown-color {
 519      color: #722d19;
 520  }
 521  
 522  :root .editor-styles-wrapper .has-medium-brown-background-color {
 523      background-color: #722d19;
 524  }
 525  
 526  :root .editor-styles-wrapper .has-light-brown-color {
 527      color: #eadaa6;
 528  }
 529  
 530  :root .editor-styles-wrapper .has-light-brown-background-color {
 531      background-color: #eadaa6;
 532  }
 533  
 534  :root .editor-styles-wrapper .has-beige-color {
 535      color: #e8e5ce;
 536  }
 537  
 538  :root .editor-styles-wrapper .has-beige-background-color {
 539      background-color: #e8e5ce;
 540  }
 541  
 542  :root .editor-styles-wrapper .has-off-white-color {
 543      color: #f7f5e7;
 544  }
 545  
 546  :root .editor-styles-wrapper .has-off-white-background-color {
 547      background-color: #f7f5e7;
 548  }