code-input.css

/**
 * **code-input** is a library which lets you create custom HTML `<code-input>`
 * elements that act like `<textarea>` elements but support syntax-highlighted
 * code, implemented using any typical syntax highlighting library.
 *
 * License of whole library for bundlers:
 *
 * Copyright 2021-2025 Oliver Geer and contributors
 * @license MIT
 *
 * **<https://code-input-js.org>**
 */

code-input {
  /* Allow other elements to be inside */
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  overflow-y: auto;
  overflow-x: auto;
  position: relative;
  top: 0;
  left: 0;

  /* CSS variables rather than inline styles used for values synced from JavaScript
   to keep low precedence and thus overridability
   The variable names may change and are for internal use. */
  /* --code-input_highlight-text-color: Set by JS to be base text color of pre code element */
  /* --code-input_no-override-color: Set by JS for very short time to get whether color has been overriden */
  color: var(--code-input_no-override-color, black);
  /* --code-input_default-caret-color: Set by JS to be same as color property - currentColor won't work because it's lazily evaluated so gives transparent for the textarea */
  caret-color: var(--code-input_default-caret-color, inherit);
  background-color: white;

  /* Normal inline styles */
  margin: 8px;
  --padding: 16px;
  --padding-left: var(--padding, 16px);
  --padding-right: var(--padding, 16px);
  --padding-top: var(--padding, 16px);
  --padding-bottom: var(--padding, 16px);

  height: 250px;
  font-size: inherit;
  font-family: monospace;
  text-align: start;
  line-height: 1.5; /* Inherited to child elements */
  tab-size: 2;
  white-space: pre;
  padding: 0!important; /* Use --padding to set the code-input element's padding */
}

code-input :not(.code-input_dialog-container *) {
  box-sizing: content-box; /* Make height, width work consistently no matter the box-sizing of ancestors; dialogs can be styled as wanted so are excluded. */
}

code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 0px!important;
  padding-left: var(--padding-left, 16px)!important;
  padding-right: var(--padding-right, 16px)!important;
  padding-top: var(--padding-top, 16px)!important;
  padding-bottom: var(--padding-bottom, 16px)!important;
  border: 0;

  min-width: calc(100% - var(--padding-left, 16px) - var(--padding-right, 16px));
  min-height: calc(100% - var(--padding-top, 16px) - var(--padding-bottom, 16px));
  resize: none;
  overflow: hidden;
  grid-row: 1;
  grid-column: 1;
  display: block;
}
code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
  height: max-content;
  width: max-content;

  /* Allow colour change to reflect properly;
  transition-behavior: allow-discrete could be used but this is better supported and
  works with the color property. */
  transition: color 0.001s;
}

code-input:not(.code-input_pre-element-styled) pre, code-input.code-input_pre-element-styled pre code {
  /* Remove all margin and padding from others */
  margin: 0!important;
  padding: 0!important;
  border: 0!important;

  min-width: 100%;
  min-height: 100%;
}

code-input textarea, code-input pre, code-input pre * {
  /* Also add text styles to highlighing tokens */
  font-size: inherit!important;
  font-family: inherit!important;
  line-height: inherit!important;
  tab-size: inherit!important;
  text-align: inherit!important;
}
code-input pre, code-input pre code {
  overflow: visible!important;
}

/* Make changing the text direction propogate */
code-input textarea[dir=auto] + pre {
  unicode-bidi: plaintext;
}

code-input textarea[dir=ltr] + pre {
  direction: ltr;
}

code-input textarea[dir=rtl] + pre {
  direction: rtl;
}


code-input textarea, code-input pre {
  /* In the same place */
  grid-column: 1;
  grid-row: 1;
}

/* Move the textarea in front of the result */

code-input textarea:not([data-code-input-fallback]) {
  z-index: 1;
}
code-input pre {
  z-index: 0;
}

/* Make textarea almost completely transparent, except for caret and placeholder */

code-input textarea:not([data-code-input-fallback]) {
  background: transparent;
  color: transparent;
  caret-color: inherit;
}
code-input textarea:not([data-code-input-fallback]):placeholder-shown {
  /* Show placeholder */
  color: var(--code-input_highlight-text-color, inherit);
}

/* Can be scrolled */
code-input textarea, code-input pre {
  white-space: inherit;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
}

/* No resize on textarea; transfer outline on focus to code-input element */
code-input textarea {
  resize: none;
  outline: none!important;
}
code-input:has(textarea:focus):not(.code-input_mouse-focused) {
  outline: 2px solid currentColor;
}

/* Contains dialog boxes that might appear as the result of a plugin.
Sticks to the top of the code-input element */

code-input .code-input_dialog-container {
  z-index: 2;
  
  position: sticky;
  grid-row: 1;
  grid-column: 1;
  
  top: 0;
  left: 0;

  margin: 0;
  padding: 0;
  height: 0;
  width: 100%;

  /* Dialog boxes' text is based on text-direction */
  text-align: inherit;

  /* Allow colour change to reflect properly;
   * transition-behavior: allow-discrete could be used but this is * better supported and works with the color property. */
  color: inherit;
  transition: color 0.001s;
}

[dir=rtl] code-input .code-input_dialog-container, code-input[dir=rtl] .code-input_dialog-container {
  left: unset;
  right: 0;
}

/* Instructions specific to keyboard navigation set by plugins that override Tab functionality. */
code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions {
  top: 0;
  left: 0;

  display: block;
  position: absolute;
  top: 0;
  left: 0;

  background-color: black;
  color: white;
  padding: 2px;
  padding-left: var(--padding-left, 16px);
  padding-right: var(--padding-right, 16px);
  margin: 0;
  text-wrap: balance;
  overflow-x: hidden;
  overflow-y: auto;

  width: 100%;
  box-sizing: border-box;
  height: 3em;
}

code-input:not(:has(textarea:not([data-code-input-fallback]):focus)) .code-input_dialog-container .code-input_keyboard-navigation-instructions,
code-input.code-input_mouse-focused .code-input_dialog-container .code-input_keyboard-navigation-instructions,
code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions:empty {
  /* When not keyboard-focused / no instructions don't show instructions */
  display: none;
}

/* Things with padding when instructions are present */
code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused) textarea,
code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused):not(.code-input_pre-element-styled) pre code,
code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:not([data-code-input-fallback]):focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
  padding-top: calc(var(--padding-top, 16px) + 3em)!important;
  min-height: calc(100% - var(--padding-top, 16px) - 3em - var(--padding-bottom, 16px));
}

/* Pre-loaded appearance */

code-input:not(.code-input_loaded) {
  padding-left: var(--padding-left, 16px)!important;
  padding-right: var(--padding-right, 16px)!important;
  padding: var(--padding-top, 16px)!important;
  padding: var(--padding-bottom, 16px)!important;
  overflow: hidden;
  display: block;
  box-sizing: border-box; /* Include padding in width/height */
}

code-input:not(.code-input_loaded)::after {
  /* Display message to register */
  content: "No highlighting. JavaScript support is disabled or insufficient, or codeInput.registerTemplate has not been called.";
  display: block;
  position: absolute;
  bottom: 0;
  left: var(--padding-left, 16px);
  width: calc(100% - var(--padding-left, 1.6px) - var(--padding-right, 1.6px));
  overflow-x: auto;

  border-top: 1px solid currentColor;
  outline-top: 0;
  background-color: inherit;
  color: inherit;

  margin: 0;
  padding: 0;
  height: 2em;
}


code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) textarea:not([data-code-input-fallback]) {
  opacity: 0;
}

/* No JavaScript fallback - styles to override all previous */

code-input:has(textarea[data-code-input-fallback]) {
  padding: 0!important; /* Padding now in the textarea */
  box-sizing: content-box;

  caret-color: revert; /* JS not setting the colour since no highlighting */
}
code-input textarea[data-code-input-fallback] {
  overflow: auto;
  background-color: inherit;
  color: var(--code-input_highlight-text-color, inherit);

  /* Don't overlap with message */
  min-height: calc(100% - var(--padding-top, 16px) - 2em - var(--padding-bottom, 16px));
}