style-editor.css

@charset "UTF-8";
/**
 * Styles for block editor (Gutenberg) content
 * https://developer.wordpress.org/block-editor/developers/themes/theme-support/#editor-styles
 *
 * Note: This stylesheet is consumed by the normal block editor (wp-admin/calypso),
 * but does not affect the block editor in p2tenberg.
 */
/**
 * Variables & Utilities
 */
/**
 * Colors (Keep in sync with inc/customizer.php)
 */
/**
 * Typography
 */
/**
 * Shadows
 */
/**
 * Borders
 */
/**
 * WP Admin Bar
 */
/**
 * Breakpoints
 */
/**
 * Column widths
 */
/**
 * Spacing
 */
:root {
  /**
	 * COLORS
	 *
	 * Keep in sync with inc/customizer.php
	 */
  --color-text: #00101c;
  --color-text-light: #6b6b6b;
  --color-link: #0267ff;
  --color-link-dark: #004cbf;
  --color-link-background: #dfeafb;
  --color-border: #dbdde1;
  --color-border-light: #e9eaed;
  --color-border-medium: #c3c4c7;
  --color-border-dark: #75808a;
  --color-border-very-dark: #272c30;
  --color-background-very-light: #f9f9f9;
  --color-background-light: #f3f3f3;
  --color-background-dark-medium: #1b252c;
  --color-background-dark: #00101c;
  --color-mentions: #b35eb1;
  --color-mentions-highlight: rgba(179, 94, 177, 0.1);
  --color-white: #fff;
  --color-black: #000;
  --color-green: #12ff61;
  --color-green-dark: #00db41;
  --color-yellow: #f6fa53;
  --color-sidebar-background: var(--color-background-light);
  --color-sidebar-content: var(--color-text);
  /* TYPOGRAPHY */
  --font-default: inter, -apple-system, system-ui, blinkmacsystemfont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
  --font-body: inter, -apple-system, system-ui, blinkmacsystemfont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
  --font-mono: monaco, consolas, Andale Mono, DejaVu Sans Mono, Courier New, monospace;
  /* ANIMATION */
  --transition-quick: 100ms; }

/**
 * Core
 */
.wp-caption {
  max-width: 100%; }
  .wp-caption img {
    display: block; }

.wp-block-code {
  padding: 2em;
  border: 0;
  border-radius: 0;
  font-family: var(--font-mono);
  line-height: 1.4;
  color: var(--color-text); }
  .wp-block-code code {
    padding: 0;
    font-size: inherit; }
  .wp-block-code .block-editor-plain-text {
    border: 0;
    background: transparent;
    font-family: var(--font-mono); }

.wp-block-image img {
  display: block; }

.wp-block-pullquote {
  border: 0;
  color: inherit; }
  .wp-block-pullquote:not(.is-style-solid-color) blockquote {
    margin-bottom: 0;
    background: transparent; }

.wp-block-quote {
  border: 0; }
  .wp-block-quote p:last-of-type {
    margin-bottom: 0; }

.wp-block-verse {
  padding: 2em; }

/**
 * UI
 */
/**
 * Styles for block editor (Gutenberg) content
 *
 * P2tenberg currently does not support the standard way of applying theme styles
 * to the block editor using add_editor_style(). This Sass placeholder class is
 * used to share content styles across the normal block editor (wp-admin/calypso)
 * and the p2tenberg editor.
 */
body .block-editor-default-block-appender .block-editor-default-block-appender__content {
  color: var(--color-text-light);
  font-family: var(--font-default); }

.wp-caption .wp-caption-text, .wp-block-image figcaption {
  margin-top: 0.75em;
  color: var(--color-text-light);
  text-align: center;
  font-size: 0.9em;
  line-height: 1.5; }

/**
 * Body content styles for post/pages and comments
 */
/**
 * Styles for a blockquote
 */
body blockquote {
  background: var(--color-background-very-light);
  font-style: italic;
  margin: 0 0 1.2em;
  padding: 2em;
  overflow: auto;
  border-radius: 2px; }
  body blockquote code {
    border: 1px solid var(--color-border);
    background: var(--color-white); }
  body blockquote em {
    font-style: normal; }
  body blockquote.wp-embedded-content {
    padding: 1.2em; }

.wp-block-pullquote__citation, .wp-block-quote__citation, body blockquote cite {
  display: block;
  margin-top: 1em;
  text-align: right; }
  .wp-block-pullquote__citation::before, .wp-block-quote__citation::before, body blockquote cite::before {
    content: "—\0000a0"; }

/**
 * Styles for <code>, <kbd>
 */
body code,
body kbd {
  border-radius: 3px;
  background: var(--color-background-very-light);
  padding: 0.3em 0.55em;
  font-family: var(--font-mono);
  font-size: 0.8em; }

body .editor-post-title__input, body h1 {
  font-family: var(--font-default);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.35;
  letter-spacing: -0.01em; }
  @media (max-width: 876px) {
    body .editor-post-title__input, body h1 {
      font-size: 1.625rem; } }

body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: var(--font-default);
  line-height: 1.1;
  font-weight: 700; }

body h2 {
  font-size: 1.5rem; }


body h3 {
  font-size: 1.25rem; }


body h4 {
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: -0.01em; }


body h5 {
  font-size: 0.8125rem;
  text-transform: uppercase; }


body h6 {
  font-size: 0.6875rem;
  text-transform: uppercase; }

@media (max-width: 876px) {
  body h2 {
    font-size: 1.3125rem; }
  
  body h3 {
    font-size: 1.125rem; } }

/**
 * Styles for a preformatted block
 */
.wp-block-code, body pre {
  background: var(--color-background-very-light);
  margin-bottom: 1.2em;
  padding: 2em;
  overflow: auto;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 0.8em; }

body table {
  border-top: 1px solid var(--color-border-dark);
  line-height: 1.4;
  text-align: left; }
  body table thead,
  body table tfoot {
    border: 0;
    font-weight: 600; }
  body table td,
  body table th {
    padding: 0.75em 1em;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
    border-left: 0; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  /**
	 * Headings
	 */
  /**
	 * Images
	 */
  /**
	 * Block margins
	 */ }
  body p a,
  body li a {
    color: var(--color-link);
    text-decoration: underline; }
    body p a:hover,
    body li a:hover {
      color: var(--color-link-dark); }
  body p {
    margin: 0 0 1.8em; }
    body p:empty {
      margin-bottom: 0; }
  body h1,
  body h2,
  body h3,
  body h4,
  body h5,
  body h6 {
    margin: 3rem 0 1rem; }
  body table {
    margin-bottom: 1.8em; }
  body blockquote,
  body pre {
    margin-bottom: 1.8em; }
    body blockquote > :last-child,
    body pre > :last-child {
      margin-bottom: 0; }
  body li:not(.blocks-gallery-item) {
    margin-bottom: 0.5em; }
    body li:not(.blocks-gallery-item) > ul,
    body li:not(.blocks-gallery-item) > ol {
      margin-top: 0.5em; }
    body li:not(.blocks-gallery-item) ul {
      list-style-type: circle; }
  body .wp-block-image:not(.wp-block),
  body .wp-block-cover,
  body .wp-block-cover-image,
  body .wp-caption {
    margin-bottom: 1.8em; }
  body .alignleft {
    float: left;
    margin-right: 1.8em;
    margin-bottom: 1.8em; }
  body .alignright {
    float: right;
    margin-left: 1.8em;
    margin-bottom: 1.8em; }
  body .wp-block-file {
    margin-bottom: 1.8em; }

body table {
  border-top: 1px solid var(--color-border-dark);
  line-height: 1.4;
  text-align: left; }
  body table thead,
  body table tfoot {
    border: 0;
    font-weight: 600; }
  body table td,
  body table th {
    padding: 0.75em 1em;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
    border-left: 0; }

/**
 * https://opengrok.a8c.com/source/xref/trunk/wp-content/mu-plugins/inline-terms/
 */
body .mention,
body .tag,
body .p2-xpost {
  text-decoration: none;
  font-weight: 500;
  padding: 2px 4px;
  border-radius: 3px; }
  body .mention:hover,
  body .tag:hover,
  body .p2-xpost:hover {
    text-decoration: underline; }

body .mention {
  color: var(--color-mentions);
  background: var(--color-mentions-highlight); }
  body .mention:hover {
    color: var(--color-mentions); }
  body .mention.mention-highlight, body .mention.mention-current-user {
    background: var(--color-mentions);
    color: var(--color-white); }


body .tag,
body .p2-xpost {
  color: var(--color-link);
  background: var(--color-background-very-light); }