[Summary view] [Print] [Text view]

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