[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,
 160  [class^="wp-block-"] figcaption.editor-rich-text__tinymce.mce-content-body {
 161      font-size: 12px;
 162      font-style: italic;
 163      line-height: 1.5;
 164      margin: 9px 0 0;
 165  }
 166  
 167  /* Tables */
 168  
 169  .editor-styles-wrapper table,
 170  .editor-styles-wrapper table th,
 171  .editor-styles-wrapper table td {
 172      font-size: 14px;
 173      line-height: 1.2857142857;
 174  }
 175  
 176  .editor-styles-wrapper table {
 177      border-collapse: collapse;
 178      border-spacing: 0;
 179      margin-bottom: 24px;
 180      width: 100%;
 181  }
 182  
 183  .editor-styles-wrapper table th {
 184      font-weight: 700;
 185      text-align: left;
 186      text-transform: uppercase;
 187  }
 188  
 189  .rtl .editor-styles-wrapper table th,
 190  [dir="rtl"] .editor-styles-wrapper table th {
 191      text-align: right;
 192  }
 193  
 194  .editor-styles-wrapper :where(:not(.is-style-stripes)) > table:where(:not(.is-style-stripes)),
 195  .editor-styles-wrapper :where(:not(.is-style-stripes)) > table:where(:not(.is-style-stripes)) th,
 196  .editor-styles-wrapper :where(:not(.is-style-stripes)) > table:where(:not(.is-style-stripes)) td {
 197      border: 1px solid rgba(0, 0, 0, 0.1);
 198  }
 199  
 200  /* Quotes */
 201  
 202  .wp-block-freeform.block-library-rich-text__tinymce blockquote {
 203      border-left: 0;
 204      border-right: 0;
 205      padding-left: 0;
 206      padding-right: 0;
 207  }
 208  
 209  .wp-block-freeform.block-library-rich-text__tinymce blockquote p {
 210      font-size: 19px;
 211  }
 212  
 213  /* Tables */
 214  
 215  .editor-block-list__block .wp-block-table th,
 216  .editor-block-list__block .wp-block-table td {
 217      padding: 0;
 218  }
 219  
 220  /*--------------------------------------------------------------
 221  3.0 Blocks - Common Blocks
 222  --------------------------------------------------------------*/
 223  
 224  /* Paragraph */
 225  
 226  p.has-drop-cap:not(:focus)::first-letter {
 227      font-size: 5em;
 228  }
 229  
 230  /* Image */
 231  
 232  .wp-block-image {
 233      margin-bottom: 24px;
 234      max-width: 800px;
 235  }
 236  
 237  .wp-block-image figcaption {
 238      text-align: left;
 239  }
 240  
 241  @media screen and (min-width: 810px) {
 242      [data-type="core/image"][data-align="left"] .editor-block-list__block-edit {
 243          clear: left;
 244          margin-left: -198px; /* 30px wider than front-end, to account for editor tool spacing */
 245      }
 246  
 247      [data-type="core/image"][data-align="right"] .editor-block-list__block-edit {
 248          clear: right;
 249          margin-right: -198px; /* 30px wider than front-end, to account for editor tool spacing */
 250      }
 251  }
 252  
 253  .rtl .wp-block-image figcaption {
 254      text-align: right;
 255  }
 256  
 257  /* Gallery */
 258  
 259  .editor-block-list__block .wp-block-gallery {
 260      margin-left: 0;
 261      margin-right: 0;
 262  }
 263  
 264  /* Quote */
 265  
 266  .editor-block-list__block .wp-block-quote p {
 267      font-size: 19px;
 268  }
 269  
 270  .wp-block-quote:not(.is-large):not(.is-style-large) {
 271      border-left: 0;
 272      border-right: 0;
 273      padding-left: 0;
 274      padding-right: 0;
 275  }
 276  
 277  .wp-block-quote.is-large,
 278  .wp-block-quote.is-style-large {
 279      padding: 0;
 280  }
 281  
 282  .wp-block-quote.is-large p,
 283  .wp-block-quote.is-style-large p {
 284      font-size: 24px;
 285      line-height: 1.6;
 286  }
 287  
 288  .wp-block-quote .wp-block-quote__citation {
 289      color: #2b2b2b;
 290      font-size: 16px;
 291      font-weight: 400;
 292      margin-top: 0;
 293  }
 294  
 295  .wp-block-quote.alignleft .wp-block-quote__citation,
 296  .wp-block-quote.alignright .wp-block-quote__citation {
 297      display: inline-block;
 298      margin-bottom: 17px;
 299  }
 300  
 301  @media screen and (min-width: 1200px) {
 302      .editor-block-list__block .wp-block-quote.alignleft,
 303      .editor-block-list__block .wp-block-quote.alignright {
 304          width: -webkit-calc(50% + 130px);
 305          width: calc(50% + 130px);
 306      }
 307  
 308      .editor-block-list__block .wp-block-quote.alignleft {
 309          clear: left;
 310          margin-left: -168px;
 311      }
 312  
 313      .editor-block-list__block .wp-block-quote.alignright {
 314          clear: right;
 315          margin-right: -168px;
 316      }
 317  }
 318  
 319  /* Cover */
 320  
 321  .wp-block-cover-image.aligncenter,
 322  .wp-block-cover.aligncenter {
 323      display: flex;
 324  }
 325  
 326  /* File */
 327  
 328  .wp-block-file .wp-block-file__textlink {
 329      color: #24890d;
 330      text-decoration: underline;
 331  }
 332  
 333  .wp-block-file .wp-block-file__button {
 334      background-color: #24890d;
 335      border: 0;
 336      border-radius: 2px;
 337      color: #fff;
 338      font-size: 12px;
 339      font-weight: 700;
 340      line-height: 1.25;
 341      padding: 10px 30px 11px;
 342      text-transform: uppercase;
 343      vertical-align: bottom;
 344  }
 345  
 346  .editor-block-list__block .wp-block-file .wp-block-file__button.mce-content-body {
 347      line-height: normal;
 348  }
 349  
 350  /*--------------------------------------------------------------
 351  4.0 Blocks - Formatting
 352  --------------------------------------------------------------*/
 353  
 354  /* Code (Added specficity required to override TinyMCE styles) */
 355  
 356  .editor-styles-wrapper .wp-block-code {
 357      border: 0;
 358      padding: 0;
 359  }
 360  
 361  .editor-styles-wrapper .wp-block-code code {
 362      font-size: inherit;
 363  }
 364  
 365  /* Pullquote */
 366  
 367  .wp-block-pullquote {
 368      margin: 0;
 369  }
 370  
 371  .editor-styles-wrapper .wp-block-pullquote {
 372      border: 0;
 373  }
 374  
 375  .wp-block-pullquote[class*="-font-size"] blockquote,
 376  .wp-block-pullquote[style*="font-size"] blockquote {
 377      font-size: inherit;
 378  }
 379  
 380  .wp-block-pullquote[style*="font-style"] blockquote {
 381      font-style: inherit;
 382  }
 383  
 384  .wp-block-pullquote[style*="font-weight"] blockquote {
 385      font-weight: inherit;
 386  }
 387  
 388  .wp-block-pullquote .wp-block-pullquote__citation {
 389      color: #2b2b2b;
 390      font-size: 16px;
 391      font-weight: 400;
 392      margin-top: 0;
 393      text-transform: none;
 394  }
 395  
 396  .wp-block-pullquote.has-text-color blockquote,
 397  .wp-block-pullquote.has-background blockquote,
 398  .has-background .wp-block-pullquote blockquote,
 399  .wp-block-pullquote.has-text-color cite,
 400  .has-background .wp-block-pullquote cite,
 401  .has-text-color .wp-block-pullquote__citation {
 402      color: inherit;
 403  }
 404  
 405  .wp-block-pullquote.alignleft blockquote > .editor-rich-text p,
 406  .wp-block-pullquote.alignright blockquote > .editor-rich-text p {
 407      font-size: 20px;
 408  }
 409  
 410  @media screen and (min-width: 810px) {
 411      .editor-block-list__block .wp-block-pullquote.alignleft {
 412          margin-left: -168px;
 413      }
 414  
 415      .editor-block-list__block .wp-block-pullquote.alignright {
 416          margin-right: -168px;
 417      }
 418  }
 419  
 420  /*--------------------------------------------------------------
 421  5.0 Blocks - Layout Elements
 422  --------------------------------------------------------------*/
 423  
 424  /* Buttons */
 425  
 426  .wp-block-button .wp-block-button__link {
 427      font-size: 12px;
 428      font-weight: 700;
 429      line-height: 1.25;
 430      padding: 10px 30px 11px;
 431      text-transform: uppercase;
 432      vertical-align: bottom;
 433  }
 434  
 435  .wp-block-buttons[style*="text-transform"] .wp-block-button__link,
 436  .wp-block-button[style*="text-transform"] .wp-block-button__link {
 437      text-transform: inherit;
 438  }
 439  
 440  .wp-block-button__link {
 441      background-color: #24890d;
 442      color: #fff;
 443  }
 444  
 445  .is-style-outline .wp-block-button__link {
 446      color: #24890d;
 447  }
 448  
 449  .editor-block-list__block .wp-block-button .mce-content-body {
 450      line-height: normal;
 451  }
 452  
 453  /* Media & Text */
 454  
 455  .wp-block-media-text *:last-child {
 456      margin-bottom: 0;
 457  }
 458  
 459  /*--------------------------------------------------------------
 460  6.0 Blocks - Widgets
 461  --------------------------------------------------------------*/
 462  
 463  /* Archives, Categories & Latest Posts */
 464  
 465  [data-align="center"] .wp-block-archives ul,
 466  [data-align="center"] .wp-block-categories ul,
 467  [data-align="center"] .wp-block-categories ul {
 468      list-style-position: inside;
 469  }
 470  
 471  .wp-block-archives li a,
 472  .wp-block-categories__list li a,
 473  .wp-block-latest-posts li a {
 474      text-decoration: underline;
 475  }
 476  
 477  /* Latest Comments */
 478  
 479  .editor-block-list__block ol.wp-block-latest-comments,
 480  .rtl .editor-block-list__block ol.wp-block-latest-comments {
 481      margin: 0;
 482      padding: 0;
 483  }
 484  
 485  .has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt,
 486  .has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta {
 487      margin-left: 60px;
 488  }
 489  
 490  .wp-block-latest-comments .avatar, .wp-block-latest-comments__comment-avatar {
 491      border-radius: 0;
 492      border: 1px solid rgba(0, 0, 0, 0.1);
 493      padding: 2px;
 494  }
 495  
 496  .wp-block-latest-comments__comment,
 497  .wp-block-latest-comments__comment-excerpt,
 498  .wp-block-latest-comments__comment-excerpt p {
 499      font-size: 16px;
 500  }
 501  
 502  .editor-block-list__block .wp-block-latest-comments__comment-meta a,
 503  .editor-block-list__block .wp-block-latest-comments__comment-meta a:visited {
 504      color: #2b2b2b;
 505      font-weight: 900;
 506      text-decoration: none;
 507  }
 508  
 509  .wp-block-latest-comments__comment-date {
 510      text-transform: uppercase;
 511  }
 512  
 513  .wp-block-latest-comments .wp-block-latest-comments__comment {
 514      border-top: 1px solid rgba(0, 0, 0, 0.1);
 515      margin-bottom: 24px;
 516      padding-top: 24px;
 517  }
 518  
 519  /* Latest Posts */
 520  
 521  .edit-post-visual-editor .editor-block-list__block .wp-block-latest-posts.is-grid {
 522      list-style: none;
 523      margin-left: 0;
 524      margin-right: 0;
 525  }
 526  
 527  /*--------------------------------------------------------------
 528  7.0 Blocks - Colors
 529  --------------------------------------------------------------*/
 530  
 531  :root .editor-styles-wrapper .has-green-color {
 532      color: #24890d;
 533  }
 534  
 535  :root .editor-styles-wrapper .has-green-background-color {
 536      background-color: #24890d;
 537  }
 538  
 539  :root .editor-styles-wrapper .has-black-color {
 540      color: #000;
 541  }
 542  
 543  :root .editor-styles-wrapper .has-black-background-color {
 544      background-color: #000;
 545  }
 546  
 547  :root .editor-styles-wrapper .has-dark-gray-color {
 548      color: #2b2b2b;
 549  }
 550  
 551  :root .editor-styles-wrapper .has-dark-gray-background-color {
 552      background-color: #2b2b2b;
 553  }
 554  
 555  :root .editor-styles-wrapper .has-medium-gray-color {
 556      color: #767676;
 557  }
 558  
 559  :root .editor-styles-wrapper .has-medium-gray-background-color {
 560      background-color: #767676;
 561  }
 562  
 563  :root .editor-styles-wrapper .has-light-gray-color {
 564      color: #f5f5f5;
 565  }
 566  
 567  :root .editor-styles-wrapper .has-light-gray-background-color {
 568      background-color: #f5f5f5;
 569  }
 570  
 571  :root .editor-styles-wrapper .has-white-color {
 572      color: #fff;
 573  }
 574  
 575  :root .editor-styles-wrapper .has-white-background-color {
 576      background-color: #fff;
 577  }