[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      color: #1a1a1a;
 326      display: block;
 327      font-size: 16px;
 328      font-size: 1rem;
 329      line-height: 1.75;
 330  }
 331  
 332  .wp-block-quote.has-text-color .wp-block-quote__citation {
 333      color: inherit;
 334  }
 335  
 336  .wp-block-quote__citation:before {
 337      content: "\2014\00a0";
 338  }
 339  
 340  .wp-block-quote em,
 341  .wp-block-quote i,
 342  .wp-block-quote__citation:before {
 343      font-style: normal;
 344  }
 345  
 346  .wp-block-quote strong,
 347  .wp-block-quote b {
 348      font-weight: 400;
 349  }
 350  
 351  .wp-block-quote > :last-child {
 352      margin-bottom: 0;
 353  }
 354  
 355  .wp-block-quote.alignleft {
 356      margin: 0.3157894737em 1.4736842105em 1.473684211em 0;
 357  }
 358  
 359  .wp-block-quote.alignright {
 360      margin: 0.3157894737em 0 1.473684211em 1.4736842105em;
 361  }
 362  
 363  .wp-block-quote.aligncenter {
 364      margin-bottom: 1.473684211em;
 365  }
 366  
 367  .rtl .wp-block-quote:not(.is-large):not(.is-style-large).alignleft,
 368  .rtl .wp-block-quote:not(.is-large):not(.is-style-large).alignright  {
 369      border-right: 0;
 370      padding-right: 0;
 371  }
 372  
 373  @media screen and (min-width: 44.375em) {
 374      .wp-block-quote.alignleft,
 375      .wp-block-quote.alignright {
 376          border-width: 4px 0 0 0;
 377          padding: 0.9473684211em 0 0;
 378          width: -webkit-calc(50% - 0.736842105em);
 379          width: calc(50% - 0.736842105em);
 380      }
 381  }
 382  
 383  @media screen and (min-width: 80em) {
 384      .editor-block-list__block .wp-block-quote.alignleft {
 385          margin-left: -40%;
 386          width: -webkit-calc(60% - 1.4736842105em);
 387          width: calc(60% - 1.4736842105em);
 388      }
 389  }
 390  
 391  /* File */
 392  
 393  .wp-block-file__textlink {
 394      box-shadow: 0 1px 0 0 currentColor;
 395      color: #007acc;
 396  }
 397  
 398  .wp-block-file .wp-block-file__button {
 399      background: #1a1a1a;
 400      border: 0;
 401      border-radius: 2px;
 402      color: #fff;
 403      font-family: Montserrat, "Helvetica Neue", sans-serif;
 404      font-weight: 700;
 405      letter-spacing: 0.046875em;
 406      line-height: 1;
 407      padding: 0.84375em 0.875em 0.78125em;
 408      text-transform: uppercase;
 409  }
 410  
 411  /*--------------------------------------------------------------
 412  4.0 Blocks - Formatting
 413  --------------------------------------------------------------*/
 414  
 415  /* Code */
 416  
 417  .editor-styles-wrapper .wp-block-code {
 418      border: 0;
 419      font-family: Inconsolata, monospace;
 420      line-height: 1.75;
 421      padding: 0;
 422      background-color: #d1d1d1;
 423  }
 424  
 425  /* Classic */
 426  
 427  .wp-block-freeform.block-library-rich-text__tinymce blockquote {
 428      border: 0 solid #1a1a1a;
 429      border-left-width: 4px;
 430      color: #686868;
 431      font-style: italic;
 432      line-height: 1.4736842105;
 433      margin: 0 0 1.4736842105em;
 434      overflow: hidden;
 435      padding: 0 0 0 1.263157895em;
 436  }
 437  
 438  .editor-block-list__block .wp-block-freeform.block-library-rich-text__tinymce blockquote:not(.alignleft):not(.alignright) {
 439      margin-left: 0;
 440  }
 441  
 442  .wp-block-freeform.block-library-rich-text__tinymce blockquote p {
 443      font-size: 19px;
 444      font-size: 1.1875rem;
 445  }
 446  
 447  .wp-block-freeform.block-library-rich-text__tinymce blockquote cite {
 448      color: #1a1a1a;
 449      display: block;
 450      font-size: 16px;
 451      font-size: 1rem;
 452      font-style: normal;
 453      line-height: 1.75;
 454  }
 455  
 456  .wp-block-freeform.block-library-rich-text__tinymce blockquote cite:before {
 457      content: "\2014\00a0";
 458  }
 459  
 460  .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignleft {
 461      margin: 0.3157894737em 1.4736842105em 1.473684211em 0;
 462  }
 463  
 464  .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright {
 465      margin: 0.3157894737em 0 1.473684211em 1.4736842105em;
 466  }
 467  
 468  .wp-block-freeform.block-library-rich-text__tinymce blockquote.aligncenter {
 469      margin-bottom: 1.473684211em;
 470  }
 471  
 472  @media screen and (min-width: 44.375em) {
 473      .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignleft,
 474      .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright {
 475          border-width: 4px 0 0 0;
 476          padding: 0.9473684211em 0 0;
 477          width: -webkit-calc(50% - 0.736842105em);
 478          width: calc(50% - 0.736842105em);
 479      }
 480  }
 481  
 482  .rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote {
 483      border-left-width: 0;
 484      border-right-width: 4px;
 485      overflow: hidden;
 486      padding-left: 0;
 487      padding-right: 1.263157895em;
 488  }
 489  
 490  .rtl .wp-block-freeform.block-library-rich-text__tinymce .alignleft {
 491      float: left;
 492  }
 493  
 494  .rtl .wp-block-freeform.block-library-rich-text__tinymce .alignright {
 495      float: right;
 496  }
 497  
 498  .rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignleft {
 499      margin: 0.3157894737em 0 1.473684211em 1.4736842105em;
 500  }
 501  
 502  .rtl .wp-block-freeform.block-library-rich-text__tinymce blockquote.alignright {
 503      margin: 0.3157894737em 1.4736842105em 1.473684211em 0;
 504  }
 505  
 506  /* Pullquote */
 507  
 508  .editor-styles-wrapper .wp-block-pullquote blockquote {
 509      border: 0;
 510      margin: 0;
 511      padding: 0;
 512  }
 513  
 514  .editor-styles-wrapper .wp-block-pullquote:where([style*="border-width"]) blockquote {
 515      padding-left: 1rem;
 516      padding-right: 1rem;
 517  }
 518  
 519  .wp-block-pullquote blockquote > .editor-rich-text p {
 520      font-size: 19px;
 521      font-size: 1.1875rem;
 522  }
 523  
 524  .wp-block-pullquote .wp-block-pullquote__citation {
 525      color: #1a1a1a;
 526      display: block;
 527      font-size: 16px;
 528      font-size: 1rem;
 529      font-style: italic;
 530      line-height: 1.75;
 531      text-transform: none;
 532  }
 533  
 534  .wp-block-pullquote.has-text-color blockquote,
 535  .wp-block-pullquote.has-background blockquote,
 536  .has-background .wp-block-pullquote blockquote,
 537  .wp-block-pullquote.has-text-color cite {
 538      color: inherit;
 539  }
 540  
 541  .wp-block-pullquote[class*="-font-size"] blockquote,
 542  .wp-block-pullquote[class*="-font-size"] blockquote p,
 543  .wp-block-pullquote[class*="-font-size"] cite,
 544  .wp-block-pullquote[style*="font-size"] blockquote,
 545  .wp-block-pullquote[style*="font-size"] blockquote p,
 546  .wp-block-pullquote[style*="font-size"] cite {
 547      font-size: inherit;
 548  }
 549      
 550  .wp-block-pullquote[style*="line-height"] blockquote,
 551  .wp-block-pullquote[style*="line-height"] blockquote p,
 552  .wp-block-pullquote[style*="line-height"] cite {
 553      line-height: inherit;
 554  }
 555  
 556  .wp-block-pullquote .wp-block-pullquote__citation:before {
 557      content: "\2014\00a0";
 558  }
 559  
 560  /* Table */
 561  
 562  .editor-block-list__block table.wp-block-table th,
 563  .editor-block-list__block table.wp-block-table td {
 564      padding: 0;
 565  }
 566  
 567  .rtl .wp-block-table th,
 568  .rtl .wp-block-table td {
 569      text-align: right;
 570  }
 571  
 572  /*--------------------------------------------------------------
 573  5.0 Blocks - Layout Elements
 574  --------------------------------------------------------------*/
 575  
 576  /* Buttons */
 577  
 578  .wp-block-buttons {
 579      font-weight: 700;
 580      letter-spacing: 0.046875em;
 581      line-height: 1;
 582      text-transform: uppercase;
 583  }
 584  
 585  .wp-block-button .wp-block-button__link {
 586      box-shadow: none;
 587      font-family: Montserrat, "Helvetica Neue", sans-serif;
 588      padding: 0.84375em 1.3125em 0.78125em;
 589  }
 590  
 591  .wp-block-button__link {
 592      background: #1a1a1a;
 593      color: #fff;
 594  }
 595  
 596  .is-style-outline .wp-block-button__link {
 597      color: #1a1a1a;
 598  }
 599  
 600  /* Media & Text */
 601  
 602  .wp-block-media-text *:last-child {
 603      margin-bottom: 0;
 604  }
 605  
 606  /*--------------------------------------------------------------
 607  6.0 Blocks - Widgets
 608  --------------------------------------------------------------*/
 609  
 610  /* Archives, Categories & Latest Posts */
 611  
 612  [data-align="center"] .wp-block-archives ul,
 613  [data-align="center"] .wp-block-categories ul,
 614  [data-align="center"] .wp-block-latest-posts ul {
 615      list-style-position: inside;
 616  }
 617  
 618  /* Latest Comments */
 619  
 620  .editor-block-list__block .wp-block-latest-comments__comment-meta a {
 621      box-shadow: none;
 622      font-weight: 700;
 623      text-decoration: none;
 624  }
 625  
 626  .wp-block-latest-comments__comment-date {
 627      color: #686868;
 628      font-family: Montserrat, "Helvetica Neue", sans-serif;
 629      font-size: 13px;
 630      font-size: 0.8125rem;
 631      line-height: 1.6153846154;
 632  }
 633  
 634  .wp-block-latest-comments .wp-block-latest-comments__comment {
 635      border-top: 1px solid #d1d1d1;
 636      margin-bottom: 0;
 637      padding: 1.75em 0;
 638  }
 639  
 640  .wp-block-latest-comments__comment-excerpt p:last-child {
 641      margin-bottom: 0;
 642  }
 643  
 644  /* Latest Posts */
 645  
 646  .edit-post-visual-editor .wp-block-latest-posts.is-grid {
 647      list-style: none;
 648      margin-left: 0;
 649      margin-right: 0;
 650  }
 651  
 652  .edit-post-visual-editor .wp-block-latest-posts.is-grid li {
 653      margin-bottom: 16px;
 654  }
 655  
 656  /* Avatar & Post Author */
 657  
 658  .editor-styles-wrapper .avatar,
 659  .wp-block-post-author__avatar img {
 660      border-radius: 50%;
 661  }
 662  
 663  /*--------------------------------------------------------------
 664  7.0 Blocks - Colors
 665  --------------------------------------------------------------*/
 666  
 667  :root .editor-styles-wrapper .has-dark-gray-color {
 668      color: #1a1a1a;
 669  }
 670  
 671  :root .editor-styles-wrapper .has-dark-gray-background-color {
 672      background-color: #1a1a1a;
 673  }
 674  
 675  :root .editor-styles-wrapper .has-medium-gray-color {
 676      color: #686868;
 677  }
 678  
 679  :root .editor-styles-wrapper .has-medium-gray-background-color {
 680      background-color: #686868;
 681  }
 682  
 683  :root .editor-styles-wrapper .has-light-gray-color {
 684      color: #e5e5e5;
 685  }
 686  
 687  :root .editor-styles-wrapper .has-light-gray-background-color {
 688      background-color: #e5e5e5;
 689  }
 690  
 691  :root .editor-styles-wrapper .has-white-color {
 692      color: #fff;
 693  }
 694  
 695  :root .editor-styles-wrapper .has-white-background-color {
 696      background-color: #fff;
 697  }
 698  
 699  :root .editor-styles-wrapper .has-blue-gray-color {
 700      color: #4d545c;
 701  }
 702  
 703  :root .editor-styles-wrapper .has-blue-gray-background-color {
 704      background-color: #4d545c;
 705  }
 706  
 707  :root .editor-styles-wrapper .has-bright-blue-color {
 708      color: #007acc;
 709  }
 710  
 711  :root .editor-styles-wrapper .has-bright-blue-background-color {
 712      background-color: #007acc;
 713  }
 714  
 715  :root .editor-styles-wrapper .has-light-blue-color {
 716      color: #9adffd;
 717  }
 718  
 719  :root .editor-styles-wrapper .has-light-blue-background-color {
 720      background-color: #9adffd;
 721  }
 722  
 723  :root .editor-styles-wrapper .has-dark-brown-color {
 724      color: #402b30;
 725  }
 726  
 727  :root .editor-styles-wrapper .has-dark-brown-background-color {
 728      background-color: #402b30;
 729  }
 730  
 731  :root .editor-styles-wrapper .has-medium-brown-color {
 732      color: #774e24;
 733  }
 734  
 735  :root .editor-styles-wrapper .has-medium-brown-background-color {
 736      background-color: #774e24;
 737  }
 738  
 739  :root .editor-styles-wrapper .has-dark-red-color {
 740      color: #640c1f;
 741  }
 742  
 743  :root .editor-styles-wrapper .has-dark-red-background-color {
 744      background-color: #640c1f;
 745  }
 746  
 747  :root .editor-styles-wrapper .has-bright-red-color {
 748      color: #ff675f;
 749  }
 750  
 751  :root .editor-styles-wrapper .has-bright-red-background-color {
 752      background-color: #ff675f;
 753  }
 754  
 755  :root .editor-styles-wrapper .has-yellow-color {
 756      color: #ffef8e;
 757  }
 758  
 759  :root .editor-styles-wrapper .has-yellow-background-color {
 760      background-color: #ffef8e;
 761  }