[Summary view] [Print] [Text view]

   1  /*
   2  Theme Name: Twenty Sixteen
   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  .editor-default-block-appender textarea.editor-default-block-appender__content {
  24      font-family: Merriweather, Georgia, serif;
  25      font-size: 16px;
  26      font-size: 1rem;
  27      line-height: 1.75;
  28  }
  29  
  30  .rtl .editor-styles-wrapper {
  31      font-family: Arial, Tahoma, sans-serif;
  32  }
  33  
  34  .edit-post-visual-editor .editor-block-list__block {
  35      color: #1a1a1a;
  36  }
  37  
  38  .editor-post-title__block .editor-post-title__input {
  39      font-family: Montserrat, "Helvetica Neue", sans-serif;
  40      font-size: 28px;
  41      font-size: 1.75rem;
  42      font-weight: 700;
  43      line-height: 1.25;
  44      margin-bottom: 1em;
  45  }
  46  
  47  .edit-post-visual-editor h1 {
  48      font-size: 28px;
  49      font-size: 1.75rem;
  50      line-height: 1.25;
  51      margin-top: 2em;
  52      margin-bottom: 1em;
  53  }
  54  
  55  .edit-post-visual-editor h2 {
  56      font-size: 23px;
  57      font-size: 1.4375rem;
  58      line-height: 1.2173913043;
  59      margin-top: 2.4347826087em;
  60      margin-bottom: 1.2173913043em;
  61  }
  62  
  63  .edit-post-visual-editor h3 {
  64      font-size: 19px;
  65      font-size: 1.1875rem;
  66      line-height: 1.1052631579;
  67      margin-top: 2.9473684211em;
  68      margin-bottom: 1.4736842105em;
  69  }
  70  
  71  .edit-post-visual-editor h4,
  72  .edit-post-visual-editor h5,
  73  .edit-post-visual-editor h6 {
  74      font-size: 16px;
  75      font-size: 1rem;
  76      line-height: 1.3125;
  77      margin-top: 3.5em;
  78      margin-bottom: 1.75em;
  79  }
  80  
  81  .edit-post-visual-editor h4 {
  82      letter-spacing: 0.140625em;
  83      text-transform: uppercase;
  84  }
  85  
  86  .edit-post-visual-editor h6 {
  87      font-style: italic;
  88  }
  89  
  90  .edit-post-visual-editor h1,
  91  .edit-post-visual-editor h2,
  92  .edit-post-visual-editor h3,
  93  .edit-post-visual-editor h4,
  94  .edit-post-visual-editor h5,
  95  .edit-post-visual-editor h6 {
  96      font-weight: 900;
  97  }
  98  
  99  @media screen and (min-width: 61.5625em) {
 100      .edit-post-visual-editor h1 {
 101          font-size: 33px;
 102          font-size: 2.0625rem;
 103          line-height: 1.2727272727;
 104          margin-top: 1.696969697em;
 105          margin-bottom: 0.8484848485em;
 106      }
 107  
 108      .edit-post-visual-editor h2 {
 109          font-size: 28px;
 110          font-size: 1.75rem;
 111          line-height: 1.25;
 112          margin-top: 2em;
 113          margin-bottom: 1em;
 114      }
 115  
 116      .edit-post-visual-editor h3 {
 117          font-size: 23px;
 118          font-size: 1.4375rem;
 119          line-height: 1.2173913043;
 120          margin-top: 2.4347826087em;
 121          margin-bottom: 1.2173913043em;
 122      }
 123  
 124      .edit-post-visual-editor h4 {
 125          letter-spacing: 0.131578947em;
 126      }
 127  
 128      .edit-post-visual-editor h4,
 129      .edit-post-visual-editor h5,
 130      .edit-post-visual-editor h6 {
 131          font-size: 19px;
 132          font-size: 1.1875rem;
 133          line-height: 1.1052631579;
 134          margin-top: 2.9473684211em;
 135          margin-bottom: 1.473684211em;
 136      }
 137  }
 138  
 139  .edit-post-visual-editor h1:first-child,
 140  .edit-post-visual-editor h2:first-child,
 141  .edit-post-visual-editor h3:first-child,
 142  .edit-post-visual-editor h4:first-child,
 143  .edit-post-visual-editor h5:first-child,
 144  .edit-post-visual-editor h6:first-child {
 145      margin-top: 0;
 146  }
 147  
 148  .edit-post-visual-editor p {
 149      margin: 0 0 1.75em;
 150  }
 151  
 152  .edit-post-visual-editor blockquote p {
 153      margin-bottom: 1.4736842105em;
 154  }
 155  
 156  @media screen and (min-width: 44.375em) {
 157      .editor-post-title__block .editor-post-title__input {
 158          font-size: 33px;
 159          font-size: 2.0625rem;
 160          line-height: 1.2727272727;
 161          margin-bottom: 0.8484848485em;
 162      }
 163  }
 164  
 165  @media screen and (min-width: 61.5625em) {
 166      .editor-post-title__block .editor-post-title__input {
 167          font-size: 40px;
 168          font-size: 2.5rem;
 169          line-height: 1.225;
 170          margin-bottom: 1.05em;
 171      }
 172  }
 173  
 174  /*--------------------------------------------------------------
 175  2.0 General Block Styles
 176  --------------------------------------------------------------*/
 177  
 178  /* Main column width */
 179  
 180  .editor-styles-wrapper {
 181      max-width: 100% !important; /* Override where editor-style.css is affecting this */
 182  }
 183  
 184  .wp-block {
 185      max-width: 630px; /* 600px + 30px to account for padding. */
 186  }
 187  
 188  /* Link styles */
 189  
 190  .edit-post-visual-editor a,
 191  .editor-block-list__block a,
 192  .wp-block-freeform.block-library-rich-text__tinymce a {
 193      color: #007acc;
 194  }
 195  
 196  /* List styles */
 197  
 198  .edit-post-visual-editor ul:not(.wp-block-gallery),
 199  .editor-block-list__block ul:not(.wp-block-gallery),
 200  .block-library-list ul,
 201  .edit-post-visual-editor ol,
 202  .editor-block-list__block ol,
 203  .block-library-list ol {
 204      padding: 0;
 205  }
 206  
 207  .edit-post-visual-editor ul:not(.wp-block-gallery),
 208  .editor-block-list__block ul:not(.wp-block-gallery),
 209  .block-library-list ul {
 210      list-style: disc;
 211  }
 212  
 213  .edit-post-visual-editor ol,
 214  .editor-block-list__block ol,
 215  .block-library-list ol {
 216      list-style: decimal;
 217      margin-left: 1.5em;
 218  }
 219  
 220  .edit-post-visual-editor ul:not(.wp-block-gallery) li,
 221  .editor-block-list__block ul:not(.wp-block-gallery) li,
 222  .edit-post-visual-editor ol li,
 223  .editor-block-list__block ol li,
 224  .block-library-list li {
 225      margin-bottom: 0;
 226  }
 227  
 228  .edit-post-visual-editor ul:not(.wp-block-gallery) li > ul,
 229  .editor-block-list__block ul:not(.wp-block-gallery) li > ul,
 230  .block-library-list li > ul,
 231  .edit-post-visual-editor li > ol,
 232  .editor-block-list__block li > ol,
 233  .block-library-list li > ol {
 234      margin-bottom: 0;
 235  }
 236  
 237  .rtl .editor-styles-wrapper ul ul,
 238  .rtl .editor-styles-wrapper ol ol,
 239  .rtl .editor-styles-wrapper ul ol,
 240  .rtl .editor-styles-wrapper ol ul {
 241      margin-left: 0;
 242      margin-right: 1.5em;
 243  }
 244  
 245  .wp-block-freeform.block-library-rich-text__tinymce ul,
 246  .wp-block-freeform.block-library-rich-text__tinymce ol {
 247      padding-left: 1.5em;
 248  }
 249  
 250  .rtl .wp-block-freeform.block-library-rich-text__tinymce ul,
 251  .rtl .wp-block-freeform.block-library-rich-text__tinymce ol {
 252      padding: 0;
 253  }
 254  
 255  .editor-styles-wrapper ol.has-background,
 256  .editor-styles-wrapper ul.has-background {
 257      padding: 1.25em 2.375em;
 258  }
 259  
 260  /* Quotes */
 261  
 262  .rtl .editor-block-list__block blockquote {
 263      border-left: 0;
 264      padding-left: 0;
 265  }
 266  
 267  /* Captions */
 268  
 269  figure[class*="wp-block-"] > figcaption {
 270      color: #686868;
 271      font-style: italic;
 272      line-height: 1.6153846154;
 273      padding-top: 0.5384615385em;
 274      text-align: start;
 275  }
 276  
 277  /*--------------------------------------------------------------
 278  3.0 Blocks - Common Blocks
 279  --------------------------------------------------------------*/
 280  
 281  /* Paragraph */
 282  
 283  .wp-block-paragraph.has-drop-cap:not(:focus)::first-letter {
 284      font-size: 5em;
 285      line-height: 0.68;
 286      margin: 0.05em 0.1em 0 0;
 287      text-transform: uppercase;
 288      font-style: normal;
 289  }
 290  
 291  .rtl .wp-block-paragraph.has-drop-cap:not(:focus)::first-letter {
 292      margin: 0.05em 0 0 0.1em;
 293  }
 294  
 295  /* Quote */
 296  
 297  .wp-block-quote {
 298      border: 0 solid #1a1a1a;
 299      border-left-width: 4px;
 300      color: #686868;
 301      font-style: italic;
 302      line-height: 1.4736842105;
 303      margin: 0 0 1.4736842105em;
 304      overflow: hidden;
 305      padding: 0 0 0 1.263157895em;
 306  }
 307  
 308  .editor-styles-wrapper .wp-block-quote {
 309      border-color: currentColor;
 310  }
 311  
 312  .wp-block-quote:not(.is-large):not(.is-style-large).alignleft,
 313  .wp-block-quote:not(.is-large):not(.is-style-large).alignright {
 314      border-left: 0;
 315      padding-left: 0;
 316  }
 317  
 318  .editor-block-list__block .wp-block-quote p {
 319      font-size: 19px;
 320      font-size: 1.1875rem;
 321      margin-bottom: 1.4736842105em;
 322  }
 323  
 324  .wp-block-quote__citation,
 325  .wp-block-quote cite {
 326      color: #1a1a1a;
 327      display: block;
 328      font-size: 16px;
 329      font-size: 1rem;
 330      line-height: 1.75;
 331  }
 332  
 333  .wp-block-quote.has-text-color .wp-block-quote__citation {
 334      color: inherit;
 335  }
 336  
 337  .has-text-color .wp-block-quote:not(.has-text-color),
 338  .has-text-color .wp-block-quote:not(.has-text-color) cite {
 339      color: inherit;
 340  }
 341  
 342  .wp-block-quote__citation:before {
 343      content: "\2014\00a0";
 344  }
 345  
 346  .wp-block-quote em,
 347  .wp-block-quote i,
 348  .wp-block-quote__citation:before {
 349      font-style: normal;
 350  }
 351  
 352  .wp-block-quote strong,
 353  .wp-block-quote b {
 354      font-weight: 400;
 355  }
 356  
 357  .wp-block-quote > :last-child {
 358      margin-bottom: 0;
 359  }
 360  
 361  .wp-block-quote.alignleft {
 362      margin: 0.3157894737em 1.4736842105em 1.473684211em 0;
 363  }
 364  
 365  .wp-block-quote.alignright {
 366      margin: 0.3157894737em 0 1.473684211em 1.4736842105em;
 367  }
 368  
 369  .wp-block-quote.aligncenter {
 370      margin-bottom: 1.473684211em;
 371  }
 372  
 373  .rtl .wp-block-quote:not(.is-large):not(.is-style-large).alignleft,
 374  .rtl .wp-block-quote:not(.is-large):not(.is-style-large).alignright  {
 375      border-right: 0;
 376      padding-right: 0;
 377  }
 378  
 379  .wp-block-quote.is-style-plain {
 380      border: none;
 381  }
 382  
 383  @media screen and (min-width: 44.375em) {
 384      .wp-block-quote.alignleft,
 385      .wp-block-quote.alignright {
 386          border-width: 4px 0 0 0;
 387          padding: 0.9473684211em 0 0;
 388          width: -webkit-calc(50% - 0.736842105em);
 389          width: calc(50% - 0.736842105em);
 390      }
 391  }
 392  
 393  @media screen and (min-width: 80em) {
 394      .editor-block-list__block .wp-block-quote.alignleft {
 395          margin-left: -40%;
 396          width: -webkit-calc(60% - 1.4736842105em);
 397          width: calc(60% - 1.4736842105em);
 398      }
 399  }
 400  
 401  /* File */
 402  
 403  .wp-block-file__textlink {
 404      box-shadow: 0 1px 0 0 currentColor;
 405      color: #007acc;
 406  }
 407  
 408  .wp-block-file .wp-block-file__button {
 409      background: #1a1a1a;
 410      border: 0;
 411      border-radius: 2px;
 412      color: #fff;
 413      font-family: Montserrat, "Helvetica Neue", sans-serif;
 414      font-weight: 700;
 415      letter-spacing: 0.046875em;
 416      line-height: 1;
 417      padding: 0.84375em 0.875em 0.78125em;
 418      text-transform: uppercase;
 419  }
 420  
 421  /*--------------------------------------------------------------
 422  4.0 Blocks - Formatting
 423  --------------------------------------------------------------*/
 424  
 425  /* Code */
 426  
 427  .editor-styles-wrapper .wp-block-code {
 428      border: 0;
 429      font-family: Inconsolata, monospace;
 430      line-height: 1.75;
 431      padding: 0;
 432      background-color: #d1d1d1;
 433  }
 434  
 435  /* Classic */
 436  
 437  .wp-block-freeform.block-library-rich-text__tinymce blockquote {
 438      border: 0 solid #1a1a1a;
 439      border-left-width: 4px;
 440      color: #686868;
 441      font-style: italic;
 442      line-height: 1.4736842105;
 443      margin: 0 0 1.4736842105em;
 444      overflow: hidden;
 445      padding: 0 0 0 1.263157895em;
 446  }
 447  
 448  .editor-block-list__block .wp-block-freeform.block-library-rich-text__tinymce blockquote:not(.alignleft):not(.alignright) {
 449      margin-left: 0;
 450  }
 451  
 452  .wp-block-freeform.block-library-rich-text__tinymce blockquote p {
 453      font-size: 19px;
 454      font-size: 1.1875rem;
 455  }
 456  
 457  .wp-block-freeform.block-library-rich-text__tinymce blockquote cite {
 458      color: #1a1a1a;
 459      display: block;
 460      font-size: 16px;
 461      font-size: 1rem;
 462      font-style: normal;
 463      line-height: 1.75;
 464  }
 465  
 466  .wp-block-freeform.block-library-rich-text__tinymce blockquote cite:before {
 467      content: "\2014\00a0";
 468  }
 469  
 470  .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignleft {
 471      margin: 0.3157894737em 1.4736842105em 1.473684211em 0;
 472  }
 473  
 474  .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright {
 475      margin: 0.3157894737em 0 1.473684211em 1.4736842105em;
 476  }
 477  
 478  .wp-block-freeform.block-library-rich-text__tinymce blockquote.aligncenter {
 479      margin-bottom: 1.473684211em;
 480  }
 481  
 482  @media screen and (min-width: 44.375em) {
 483      .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignleft,
 484      .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright {
 485          border-width: 4px 0 0 0;
 486          padding: 0.9473684211em 0 0;
 487          width: -webkit-calc(50% - 0.736842105em);
 488          width: calc(50% - 0.736842105em);
 489      }
 490  }
 491  
 492  .rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote {
 493      border-left-width: 0;
 494      border-right-width: 4px;
 495      overflow: hidden;
 496      padding-left: 0;
 497      padding-right: 1.263157895em;
 498  }
 499  
 500  .rtl .wp-block-freeform.block-library-rich-text__tinymce .alignleft {
 501      float: left;
 502  }
 503  
 504  .rtl .wp-block-freeform.block-library-rich-text__tinymce .alignright {
 505      float: right;
 506  }
 507  
 508  .rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignleft {
 509      margin: 0.3157894737em 0 1.473684211em 1.4736842105em;
 510  }
 511  
 512  .rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright {
 513      margin: 0.3157894737em 1.4736842105em 1.473684211em 0;
 514  }
 515  
 516  /* Pullquote */
 517  
 518  .editor-styles-wrapper .wp-block-pullquote blockquote {
 519      border: 0;
 520      margin: 0;
 521      padding: 0;
 522  }
 523  
 524  .editor-styles-wrapper .wp-block-pullquote:where([style*="border-width"]) blockquote {
 525      padding-left: 1rem;
 526      padding-right: 1rem;
 527  }
 528  
 529  .wp-block-pullquote blockquote > .editor-rich-text p {
 530      font-size: 19px;
 531      font-size: 1.1875rem;
 532  }
 533  
 534  .wp-block-pullquote .wp-block-pullquote__citation {
 535      color: #1a1a1a;
 536      display: block;
 537      font-size: 16px;
 538      font-size: 1rem;
 539      font-style: italic;
 540      line-height: 1.75;
 541      text-transform: none;
 542  }
 543  
 544  .wp-block-pullquote.has-text-color blockquote,
 545  .wp-block-pullquote.has-background blockquote,
 546  .has-background .wp-block-pullquote blockquote,
 547  .wp-block-pullquote.has-text-color cite {
 548      color: inherit;
 549  }
 550  
 551  .wp-block-pullquote[class*="-font-size"] blockquote,
 552  .wp-block-pullquote[class*="-font-size"] blockquote p,
 553  .wp-block-pullquote[class*="-font-size"] cite,
 554  .wp-block-pullquote[style*="font-size"] blockquote,
 555  .wp-block-pullquote[style*="font-size"] blockquote p,
 556  .wp-block-pullquote[style*="font-size"] cite {
 557      font-size: inherit;
 558  }
 559  
 560  .wp-block-pullquote[style*="line-height"] blockquote,
 561  .wp-block-pullquote[style*="line-height"] blockquote p,
 562  .wp-block-pullquote[style*="line-height"] cite {
 563      line-height: inherit;
 564  }
 565  
 566  .wp-block-pullquote .wp-block-pullquote__citation:before {
 567      content: "\2014\00a0";
 568  }
 569  
 570  /* Table */
 571  
 572  .editor-block-list__block table.wp-block-table th,
 573  .editor-block-list__block table.wp-block-table td {
 574      padding: 0;
 575  }
 576  
 577  .rtl .wp-block-table th,
 578  .rtl .wp-block-table td {
 579      text-align: right;
 580  }
 581  
 582  /*--------------------------------------------------------------
 583  5.0 Blocks - Layout Elements
 584  --------------------------------------------------------------*/
 585  
 586  /* Buttons */
 587  
 588  .wp-block-buttons {
 589      font-weight: 700;
 590      letter-spacing: 0.046875em;
 591      line-height: 1;
 592      text-transform: uppercase;
 593  }
 594  
 595  .wp-block-button .wp-block-button__link {
 596      box-shadow: none;
 597      font-family: Montserrat, "Helvetica Neue", sans-serif;
 598      padding: 0.84375em 1.3125em 0.78125em;
 599  }
 600  
 601  .wp-block-button__link {
 602      background: #1a1a1a;
 603      color: #fff;
 604  }
 605  
 606  .is-style-outline .wp-block-button__link {
 607      color: #1a1a1a;
 608  }
 609  
 610  /* Media & Text */
 611  
 612  .wp-block-media-text *:last-child {
 613      margin-bottom: 0;
 614  }
 615  
 616  /*--------------------------------------------------------------
 617  6.0 Blocks - Widgets
 618  --------------------------------------------------------------*/
 619  
 620  /* Archives, Categories & Latest Posts */
 621  
 622  [data-align="center"] .wp-block-archives ul,
 623  [data-align="center"] .wp-block-categories ul,
 624  [data-align="center"] .wp-block-latest-posts ul {
 625      list-style-position: inside;
 626  }
 627  
 628  /* Latest Comments */
 629  
 630  .editor-styles-wrapper .wp-block-latest-comments__comment-meta a {
 631      box-shadow: none;
 632      font-weight: 700;
 633      text-decoration: none;
 634  }
 635  
 636  .wp-block-latest-comments__comment-date {
 637      color: #686868;
 638      font-family: Montserrat, "Helvetica Neue", sans-serif;
 639      font-size: 13px;
 640      font-size: 0.8125rem;
 641      line-height: 1.6153846154;
 642  }
 643  
 644  .wp-block-latest-comments .wp-block-latest-comments__comment:not(:first-child) {
 645      border-top: 1px solid #d1d1d1;
 646      margin-bottom: 0;
 647      padding: 1.75em 0;
 648  }
 649  
 650  .wp-block-latest-comments__comment-excerpt p:last-child {
 651      margin-bottom: 0;
 652  }
 653  
 654  /* Latest Posts */
 655  
 656  .edit-post-visual-editor .wp-block-latest-posts.is-grid {
 657      list-style: none;
 658      margin-left: 0;
 659      margin-right: 0;
 660  }
 661  
 662  .edit-post-visual-editor .wp-block-latest-posts.is-grid li {
 663      margin-bottom: 16px;
 664  }
 665  
 666  /* Avatar & Post Author */
 667  
 668  .editor-styles-wrapper .avatar,
 669  .wp-block-post-author__avatar img {
 670      border-radius: 50%;
 671  }
 672  
 673  /*--------------------------------------------------------------
 674  7.0 Blocks - Colors
 675  --------------------------------------------------------------*/
 676  
 677  :root .editor-styles-wrapper .has-dark-gray-color {
 678      color: #1a1a1a;
 679  }
 680  
 681  :root .editor-styles-wrapper .has-dark-gray-background-color {
 682      background-color: #1a1a1a;
 683  }
 684  
 685  :root .editor-styles-wrapper .has-medium-gray-color {
 686      color: #686868;
 687  }
 688  
 689  :root .editor-styles-wrapper .has-medium-gray-background-color {
 690      background-color: #686868;
 691  }
 692  
 693  :root .editor-styles-wrapper .has-light-gray-color {
 694      color: #e5e5e5;
 695  }
 696  
 697  :root .editor-styles-wrapper .has-light-gray-background-color {
 698      background-color: #e5e5e5;
 699  }
 700  
 701  :root .editor-styles-wrapper .has-white-color {
 702      color: #fff;
 703  }
 704  
 705  :root .editor-styles-wrapper .has-white-background-color {
 706      background-color: #fff;
 707  }
 708  
 709  :root .editor-styles-wrapper .has-blue-gray-color {
 710      color: #4d545c;
 711  }
 712  
 713  :root .editor-styles-wrapper .has-blue-gray-background-color {
 714      background-color: #4d545c;
 715  }
 716  
 717  :root .editor-styles-wrapper .has-bright-blue-color {
 718      color: #007acc;
 719  }
 720  
 721  :root .editor-styles-wrapper .has-bright-blue-background-color {
 722      background-color: #007acc;
 723  }
 724  
 725  :root .editor-styles-wrapper .has-light-blue-color {
 726      color: #9adffd;
 727  }
 728  
 729  :root .editor-styles-wrapper .has-light-blue-background-color {
 730      background-color: #9adffd;
 731  }
 732  
 733  :root .editor-styles-wrapper .has-dark-brown-color {
 734      color: #402b30;
 735  }
 736  
 737  :root .editor-styles-wrapper .has-dark-brown-background-color {
 738      background-color: #402b30;
 739  }
 740  
 741  :root .editor-styles-wrapper .has-medium-brown-color {
 742      color: #774e24;
 743  }
 744  
 745  :root .editor-styles-wrapper .has-medium-brown-background-color {
 746      background-color: #774e24;
 747  }
 748  
 749  :root .editor-styles-wrapper .has-dark-red-color {
 750      color: #640c1f;
 751  }
 752  
 753  :root .editor-styles-wrapper .has-dark-red-background-color {
 754      background-color: #640c1f;
 755  }
 756  
 757  :root .editor-styles-wrapper .has-bright-red-color {
 758      color: #ff675f;
 759  }
 760  
 761  :root .editor-styles-wrapper .has-bright-red-background-color {
 762      background-color: #ff675f;
 763  }
 764  
 765  :root .editor-styles-wrapper .has-yellow-color {
 766      color: #ffef8e;
 767  }
 768  
 769  :root .editor-styles-wrapper .has-yellow-background-color {
 770      background-color: #ffef8e;
 771  }