[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[class*="-font-size"] blockquote,
 375  .wp-block-pullquote[style*="font-size"] blockquote {
 376      font-size: inherit;
 377  }
 378  
 379  .wp-block-pullquote[style*="font-style"] blockquote {
 380      font-style: inherit;
 381  }
 382  
 383  .wp-block-pullquote[style*="font-weight"] blockquote {
 384      font-weight: inherit;
 385  }
 386  
 387  .wp-block-pullquote .wp-block-pullquote__citation {
 388      color: #2b2b2b;
 389      font-size: 16px;
 390      font-weight: 400;
 391      margin-top: 0;
 392      text-transform: none;
 393  }
 394  
 395  .wp-block-pullquote.has-text-color blockquote,
 396  .wp-block-pullquote.has-background blockquote,
 397  .has-background .wp-block-pullquote blockquote,
 398  .wp-block-pullquote.has-text-color cite,
 399  .has-background .wp-block-pullquote cite,
 400  .has-text-color .wp-block-pullquote__citation {
 401      color: inherit;
 402  }
 403  
 404  .wp-block-pullquote.alignleft blockquote > .editor-rich-text p,
 405  .wp-block-pullquote.alignright blockquote > .editor-rich-text p {
 406      font-size: 20px;
 407  }
 408  
 409  @media screen and (min-width: 810px) {
 410      .editor-block-list__block .wp-block-pullquote.alignleft {
 411          margin-left: -168px;
 412      }
 413  
 414      .editor-block-list__block .wp-block-pullquote.alignright {
 415          margin-right: -168px;
 416      }
 417  }
 418  
 419  /* Verse */
 420  
 421  .editor-styles-wrapper .wp-block-verse {
 422      font-family: inherit;
 423  }
 424  
 425  /*--------------------------------------------------------------
 426  5.0 Blocks - Layout Elements
 427  --------------------------------------------------------------*/
 428  
 429  /* Buttons */
 430  
 431  .wp-block-button .wp-block-button__link {
 432      font-size: 12px;
 433      font-weight: 700;
 434      line-height: 1.25;
 435      padding: 10px 30px 11px;
 436      text-transform: uppercase;
 437      vertical-align: bottom;
 438  }
 439  
 440  .wp-block-buttons[style*="text-transform"] .wp-block-button__link,
 441  .wp-block-button[style*="text-transform"] .wp-block-button__link {
 442      text-transform: inherit;
 443  }
 444  
 445  .wp-block-button__link {
 446      background-color: #24890d;
 447      color: #fff;
 448  }
 449  
 450  .is-style-outline .wp-block-button__link {
 451      color: #24890d;
 452  }
 453  
 454  .editor-block-list__block .wp-block-button .mce-content-body {
 455      line-height: normal;
 456  }
 457  
 458  /* Media & Text */
 459  
 460  .wp-block-media-text *:last-child {
 461      margin-bottom: 0;
 462  }
 463  
 464  /*--------------------------------------------------------------
 465  6.0 Blocks - Widgets
 466  --------------------------------------------------------------*/
 467  
 468  /* Archives, Categories & Latest Posts */
 469  
 470  [data-align="center"] .wp-block-archives ul,
 471  [data-align="center"] .wp-block-categories ul,
 472  [data-align="center"] .wp-block-categories ul {
 473      list-style-position: inside;
 474  }
 475  
 476  .wp-block-archives li a,
 477  .wp-block-categories__list li a,
 478  .wp-block-latest-posts li a {
 479      text-decoration: underline;
 480  }
 481  
 482  /* Latest Comments */
 483  
 484  .editor-block-list__block ol.wp-block-latest-comments,
 485  .rtl .editor-block-list__block ol.wp-block-latest-comments {
 486      margin: 0;
 487      padding: 0;
 488  }
 489  
 490  .has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt,
 491  .has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta {
 492      margin-left: 60px;
 493  }
 494  
 495  .wp-block-latest-comments .avatar, .wp-block-latest-comments__comment-avatar {
 496      border-radius: 0;
 497      border: 1px solid rgba(0, 0, 0, 0.1);
 498      padding: 2px;
 499  }
 500  
 501  .wp-block-latest-comments__comment,
 502  .wp-block-latest-comments__comment-excerpt,
 503  .wp-block-latest-comments__comment-excerpt p {
 504      font-size: 16px;
 505  }
 506  
 507  .editor-block-list__block .wp-block-latest-comments__comment-meta a,
 508  .editor-block-list__block .wp-block-latest-comments__comment-meta a:visited {
 509      color: #2b2b2b;
 510      font-weight: 900;
 511      text-decoration: none;
 512  }
 513  
 514  .wp-block-latest-comments__comment-date {
 515      text-transform: uppercase;
 516  }
 517  
 518  .wp-block-latest-comments .wp-block-latest-comments__comment {
 519      border-top: 1px solid rgba(0, 0, 0, 0.1);
 520      margin-bottom: 24px;
 521      padding-top: 24px;
 522  }
 523  
 524  /* Latest Posts */
 525  
 526  .edit-post-visual-editor .editor-block-list__block .wp-block-latest-posts.is-grid {
 527      list-style: none;
 528      margin-left: 0;
 529      margin-right: 0;
 530  }
 531  
 532  /*--------------------------------------------------------------
 533  7.0 Blocks - Colors
 534  --------------------------------------------------------------*/
 535  
 536  :root .editor-styles-wrapper .has-green-color {
 537      color: #24890d;
 538  }
 539  
 540  :root .editor-styles-wrapper .has-green-background-color {
 541      background-color: #24890d;
 542  }
 543  
 544  :root .editor-styles-wrapper .has-black-color {
 545      color: #000;
 546  }
 547  
 548  :root .editor-styles-wrapper .has-black-background-color {
 549      background-color: #000;
 550  }
 551  
 552  :root .editor-styles-wrapper .has-dark-gray-color {
 553      color: #2b2b2b;
 554  }
 555  
 556  :root .editor-styles-wrapper .has-dark-gray-background-color {
 557      background-color: #2b2b2b;
 558  }
 559  
 560  :root .editor-styles-wrapper .has-medium-gray-color {
 561      color: #767676;
 562  }
 563  
 564  :root .editor-styles-wrapper .has-medium-gray-background-color {
 565      background-color: #767676;
 566  }
 567  
 568  :root .editor-styles-wrapper .has-light-gray-color {
 569      color: #f5f5f5;
 570  }
 571  
 572  :root .editor-styles-wrapper .has-light-gray-background-color {
 573      background-color: #f5f5f5;
 574  }
 575  
 576  :root .editor-styles-wrapper .has-white-color {
 577      color: #fff;
 578  }
 579  
 580  :root .editor-styles-wrapper .has-white-background-color {
 581      background-color: #fff;
 582  }