[Summary view] [Print] [Text view]

   1  /**
   2  * Editor Post Title
   3  * - Needs a special styles
   4  */
   5  
   6  // Post title style
   7  .wp-block.editor-post-title__block {
   8      border-bottom: 3px solid var(--global--color-border);
   9      padding-bottom: calc(2 * var(--global--spacing-vertical));
  10      margin-bottom: calc(3 * var(--global--spacing-vertical));
  11      max-width: var(--responsive--alignwide-width);
  12  
  13      .editor-post-title__input {
  14          color: var(--global--color-secondary);
  15          font-family: var(--heading--font-family);
  16          font-size: var(--global--font-size-page-title);
  17          font-weight: var(--heading--font-weight-page-title);
  18          line-height: var(--heading--line-height-h1);
  19      }
  20  }
  21  
  22  // Editor UI font styles
  23  .wp-block.block-editor-default-block-appender > textarea {
  24      font-family: var(--global--font-secondary);
  25      font-size: var(--global--font-size-md);
  26  }
  27  
  28  // Gutenberg text color options
  29  .has-primary-color[class] {
  30      color: var(--global--color-primary);
  31  }
  32  
  33  .has-secondary-color[class] {
  34      color: var(--global--color-secondary);
  35  }
  36  
  37  // Gutenberg background-color options
  38  .has-background {
  39  
  40      a,
  41      p,
  42      h1,
  43      h2,
  44      h3,
  45      h4,
  46      h5,
  47      h6 {
  48          color: currentColor;
  49      }
  50  }
  51  
  52  .has-primary-background-color[class] {
  53      background-color: var(--global--color-primary);
  54      color: var(--global--color-background);
  55  }
  56  
  57  .has-secondary-background-color[class] {
  58      background-color: var(--global--color-secondary);
  59      color: var(--global--color-background);
  60  }
  61  
  62  .has-white-background-color[class] {
  63      background-color: var(--global--color-white);
  64      color: var(--global--color-secondary);
  65  }
  66  
  67  .has-black-background-color[class] {
  68      background-color: var(--global--color-black);
  69      color: var(--global--color-primary);
  70  }
  71  
  72  // Spacing Overrides
  73  [data-block] {
  74      margin-top: var(--global--spacing-vertical);
  75      margin-bottom: var(--global--spacing-vertical);
  76  }
  77  
  78  // Block Alignments
  79  .wp-block {
  80  
  81      // Gutenberg injects a rule that limits the max width of .wp-block to 580px
  82      // This line overrides it to use the responsive spacing rules for default width content
  83      max-width: var(--responsive--aligndefault-width);
  84  
  85      // Use the theme's max-width for wide alignment.
  86      &[data-align="wide"],
  87      &.alignwide {
  88          max-width: var(--responsive--alignwide-width);
  89      }
  90  
  91      &[data-align="full"],
  92      &.alignfull {
  93          max-width: none;
  94      }
  95  }
  96  
  97  .alignleft {
  98      margin: 0;
  99      margin-right: var(--global--spacing-horizontal);
 100  }
 101  
 102  .alignright {
 103      margin: 0;
 104      margin-left: var(--global--spacing-horizontal);
 105  }
 106  
 107  // Drop cap
 108  .has-drop-cap:not(:focus)::first-letter {
 109      font-family: var(--heading--font-family);
 110      font-weight: var(--heading--font-weight);
 111      line-height: 0.66;
 112      text-transform: uppercase;
 113      font-style: normal;
 114      float: left;
 115      margin: 0.1em 0.1em 0 0;
 116      font-size: calc(1.2 * var(--heading--font-size-h1));
 117  }
 118  
 119  @media only screen and (min-width: 482px) {
 120  
 121      .wp-block[data-align="left"] > * {
 122          max-width: 290px;
 123          margin-right: var(--global--spacing-horizontal);
 124      }
 125  
 126      .wp-block[data-align="right"] > * {
 127          max-width: 290px;
 128          margin-left: var(--global--spacing-horizontal);
 129      }
 130  }
 131  
 132  // Remove the border of blockquotes inside the classic block.
 133  .wp-block-freeform.block-library-rich-text__tinymce blockquote {
 134      border: none;
 135  }
 136  
 137  // Adjust the position of the quote symbol for blockquotes inside the classic block.
 138  .wp-block-freeform.block-library-rich-text__tinymce blockquote:before {
 139      left: 5px;
 140  }