[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  /* Verse */
 276  
 277  .editor-styles-wrapper .wp-block-verse {
 278      font-family: inherit;
 279  }
 280  
 281  /*--------------------------------------------------------------
 282  5.0 Blocks - Formatting
 283  --------------------------------------------------------------*/
 284  
 285  /* Code */
 286  
 287  .editor-styles-wrapper .wp-block-code {
 288      border: 0;
 289      padding: 0;
 290  }
 291  
 292  /* Pullquote */
 293  
 294  .edit-post-visual-editor .wp-block-pullquote {
 295      border: 0;
 296      padding: 0.5em 0;
 297  }
 298  
 299  .edit-post-visual-editor .editor-block-list__block .wp-block-pullquote p {
 300      font-weight: 300;
 301  }
 302  
 303  .edit-post-visual-editor .wp-block-pullquote__citation,
 304  .edit-post-visual-editor .wp-block-pullquote cite,
 305  .edit-post-visual-editor .wp-block-pullquote footer {
 306      color: #141412;
 307      font-size: 16px;
 308  }
 309  
 310  /* Table */
 311  
 312  .wp-block-table {
 313      border-bottom: 1px solid #ededed;
 314      border-collapse: collapse;
 315      border-spacing: 0;
 316      font-size: 14px;
 317      line-height: 2;
 318      margin: 0 0 20px;
 319      width: 100%;
 320  }
 321  
 322  .wp-block-table th {
 323      border: 0;
 324      font-weight: bold;
 325      text-transform: uppercase;
 326  }
 327  
 328  .editor-block-list__block .wp-block-table td {
 329      border: 0;
 330      border-top: 1px solid #ededed;
 331      padding: 0;
 332  }
 333  
 334  /*--------------------------------------------------------------
 335  6.0 Blocks - Layout Elements
 336  --------------------------------------------------------------*/
 337  
 338  /* Buttons */
 339  
 340  .wp-block-button .wp-block-button__link {
 341      display: inline-block;
 342      font-size: 16px;
 343      line-height: 24px;
 344      padding: 11px 24px 10px;
 345      text-decoration: none;
 346  }
 347  
 348  .wp-block-button__link {
 349      background: #e05d22;
 350      border-bottom: 3px solid #b93207;
 351      color: #fff;
 352  }
 353  
 354  .is-style-outline .wp-block-button__link:not(.has-text-color) {
 355      border-width: 2px;
 356      color: #e05d22;
 357  }
 358  
 359  .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
 360      background: -webkit-linear-gradient(top, #e05d22 0%, #d94412 100%); /* Chrome 10+, Safari 5.1+ */
 361      background: linear-gradient(to bottom, #e05d22 0%, #d94412 100%); /* W3C */
 362  }
 363  
 364  .wp-block-button.is-style-no-shadow .wp-block-button__link {
 365      border-bottom: none;
 366  }
 367  
 368  /* Separator */
 369  
 370  .editor-block-list__block hr.wp-block-separator {
 371      margin-left: auto;
 372      margin-right: auto;
 373  }
 374  
 375  /* Media & Text */
 376  
 377  .wp-block-media-text *:last-child {
 378      margin-bottom: 0;
 379  }
 380  
 381  /* Group */
 382  
 383  .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,
 384  [data-align="wide"] .wp-block,
 385  [data-align="full"] .wp-block {
 386      max-width: 634px;
 387  }
 388  
 389  .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"] {
 390      max-width: 1100px;
 391  }
 392  
 393  .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"] {
 394      max-width: 100%;
 395  }
 396  
 397  .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"] {
 398      width: calc(100% + 60px);
 399      max-width: calc(100% + 60px);
 400  }
 401  
 402  /*--------------------------------------------------------------
 403  7.0 Blocks - Widgets
 404  --------------------------------------------------------------*/
 405  
 406  /* Archives, Categories & Latest Posts */
 407  
 408  [data-align="center"] .wp-block-archives ul,
 409  [data-align="center"] .wp-block-categories ul,
 410  [data-align="center"] .wp-block-latest-posts ul {
 411      list-style-position: inside;
 412      text-align: center;
 413  }
 414  
 415  /* Latest Comments */
 416  
 417  .editor-block-list__block .wp-block-latest-comments {
 418      margin: 0;
 419      padding: 0;
 420  }
 421  
 422  .wp-block-latest-comments .avatar,
 423  .wp-block-latest-comments__comment-avatar {
 424      border-radius: 0;
 425  }
 426  
 427  .wp-block-latest-comments__comment,
 428  .wp-block-latest-comments__comment-excerpt,
 429  .wp-block-latest-comments__comment-excerpt p {
 430      font-size: 16px;
 431  }
 432  
 433  .wp-block-latest-comments__comment-excerpt p:last-child {
 434      margin-bottom: 0;
 435  }
 436  
 437  .wp-block-latest-comments__comment-date {
 438      font-size: 16px;
 439  }
 440  
 441  .wp-block-latest-comments .wp-block-latest-comments__comment {
 442      background: url(../images/dotted-line.png) repeat-x left top;
 443      margin-bottom: 0;
 444      padding: 24px 0;
 445  }
 446  
 447  /* Latest Posts */
 448  
 449  .edit-post-visual-editor .editor-block-list__block .wp-block-latest-posts.is-grid {
 450      list-style-type: none;
 451      margin-left: 0;
 452      margin-right: 0;
 453  }
 454  
 455  .edit-post-visual-editor .wp-block-latest-posts.is-grid li {
 456      margin-bottom: 1em;
 457  }
 458  
 459  /*--------------------------------------------------------------
 460  7.0 Blocks - Colors
 461  --------------------------------------------------------------*/
 462  
 463  :root .editor-styles-wrapper .has-dark-gray-color {
 464      color: #141412;
 465  }
 466  
 467  :root .editor-styles-wrapper .has-dark-gray-background-color {
 468      background-color: #141412;
 469  }
 470  
 471  :root .editor-styles-wrapper .has-red-color {
 472      color: #bc360a;
 473  }
 474  
 475  :root .editor-styles-wrapper .has-red-background-color {
 476      background-color: #bc360a;
 477  }
 478  
 479  :root .editor-styles-wrapper .has-medium-orange-color {
 480      color: #db572f;
 481  }
 482  
 483  :root .editor-styles-wrapper .has-medium-orange-background-color {
 484      background-color: #db572f;
 485  }
 486  
 487  :root .editor-styles-wrapper .has-light-orange-color {
 488      color: #ea9629;
 489  }
 490  
 491  :root .editor-styles-wrapper .has-light-orange-background-color {
 492      background-color: #ea9629;
 493  }
 494  
 495  :root .editor-styles-wrapper .has-yellow-color {
 496      color: #fbca3c;
 497  }
 498  
 499  :root .editor-styles-wrapper .has-yellow-background-color {
 500      background-color: #fbca3c;
 501  }
 502  
 503  :root .editor-styles-wrapper .has-white-color {
 504      color: #fff;
 505  }
 506  
 507  :root .editor-styles-wrapper .has-white-background-color {
 508      background-color: #fff;
 509  }
 510  
 511  :root .editor-styles-wrapper .has-dark-brown-color {
 512      color: #220e10;
 513  }
 514  
 515  :root .editor-styles-wrapper .has-dark-brown-background-color {
 516      background-color: #220e10;
 517  }
 518  
 519  :root .editor-styles-wrapper .has-medium-brown-color {
 520      color: #722d19;
 521  }
 522  
 523  :root .editor-styles-wrapper .has-medium-brown-background-color {
 524      background-color: #722d19;
 525  }
 526  
 527  :root .editor-styles-wrapper .has-light-brown-color {
 528      color: #eadaa6;
 529  }
 530  
 531  :root .editor-styles-wrapper .has-light-brown-background-color {
 532      background-color: #eadaa6;
 533  }
 534  
 535  :root .editor-styles-wrapper .has-beige-color {
 536      color: #e8e5ce;
 537  }
 538  
 539  :root .editor-styles-wrapper .has-beige-background-color {
 540      background-color: #e8e5ce;
 541  }
 542  
 543  :root .editor-styles-wrapper .has-off-white-color {
 544      color: #f7f5e7;
 545  }
 546  
 547  :root .editor-styles-wrapper .has-off-white-background-color {
 548      background-color: #f7f5e7;
 549  }