Add --padding-left etc variables

Author: WebCoder49

code-input.css

@@ -26,6 +26,10 @@ code-input {
   /* 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;
@@ -47,10 +51,13 @@ code-input * {
 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: var(--padding, 16px)!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, 16px) * 2);
-  min-height: calc(100% - var(--padding, 16px) * 2);
+  min-width: calc(100% - var(--padding-left, 16px) - var(--padding-right, 16px));
+  min-height: calc(100% - var(--padding-top, 16px) - var(--padding-bottom, 16px));
   overflow: hidden;
   resize: none;
   grid-row: 1;
@@ -176,8 +183,8 @@ code-input .code-input_dialog-container .code-input_keyboard-navigation-instruct
   background-color: black;
   color: white;
   padding: 2px;
-  padding-left: var(--padding, 16px);
-  padding-right: var(--padding, 16px);
+  padding-left: var(--padding-left, 16px);
+  padding-right: var(--padding-right, 16px);
   margin: 0;
   text-wrap: balance;
   overflow-x: hidden;
@@ -199,14 +206,17 @@ code-input .code-input_dialog-container .code-input_keyboard-navigation-instruct
 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, 16px) + 3em)!important;
-  min-height: calc(100% - var(--padding, 16px) * 2 - 3em);
+  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: var(--padding, 16px)!important;
+  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 */
@@ -218,8 +228,8 @@ code-input:not(.code-input_loaded)::after {
   display: block;
   position: absolute;
   bottom: 0;
-  left: var(--padding, 16px);
-  width: calc(100% - 2 * var(--padding, 1.6px));
+  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;
@@ -249,5 +259,5 @@ code-input textarea[data-code-input-fallback] {
   color: inherit;
 
   /* Don't overlap with message */
-  min-height: calc(100% - var(--padding, 16px) * 2 - 2em);
+  min-height: calc(100% - var(--padding-top, 16px) - 2em - var(--padding-bottom, 16px));
 }

docs/interface/css/_index.md

@@ -7,6 +7,6 @@ title = 'Styling `code-input` elements with CSS'
 > Contributors: 2025 Oliver Geer
 
 `code-input` elements can be styled like `textarea` elements in most cases; however, there are some exceptions:
-* The CSS variable `--padding` should be used rather than the property `padding` (e.g. `<code-input style="--padding: 10px;">...`)
+* The CSS variable `--padding` should be used rather than the property `padding` (e.g. `<code-input style="--padding: 10px;">...`), or `--padding-left`, `--padding-right`, `--padding-top` and `--padding-bottom` instead of the CSS properties of the same names. For technical reasons, the value must have a unit (i.e. `0px`, not `0`).
 * Background colours set on `code-input` elements will not work with highlighters that set background colours themselves - use `(code-input's selector) pre[class*="language-"]` for Prism.js or `.hljs` for highlight.js to target the highlighted element with higher specificity than the highlighter's theme. You may also set the `background-color` of the code-input element for its appearance when its template is unregistered / there is no JavaScript.
 * For now, elements on top of `code-input` elements should have a CSS `z-index` at least 3 greater than the `code-input` element.

plugins/prism-line-numbers.css

@@ -7,16 +7,16 @@
 /* Update padding to match line-numbers plugin */
 code-input.line-numbers textarea, code-input.line-numbers.code-input_pre-element-styled pre, code-input.line-numbers:not(.code-input_pre-element-styled) pre code,
 .line-numbers code-input textarea, .line-numbers code-input.code-input_pre-element-styled pre, .line-numbers code-input:not(.code-input_pre-element-styled) pre code {
-  padding-left: max(3.8em, var(--padding, 16px))!important;
+  padding-left: max(3.8em, var(--padding-left, 16px))!important;
 }
 
 /* Ensure pre code/textarea just wide enough to give 100% width with line numbers */
 code-input.line-numbers, .line-numbers code-input {
-  grid-template-columns: calc(100% - max(0em, calc(3.8em - var(--padding, 16px))));
+  grid-template-columns: calc(100% - max(0em, calc(3.8em - var(--padding-left, 16px))));
 }
 /* Despite the above, keep dialog container full width */
 code-input.line-numbers .code-input_dialog-container, .line-numbers code-input .code-input_dialog-container {
-  width: calc(100% + max(0em, calc(3.8em - var(--padding, 16px))));
+  width: calc(100% + max(0em, calc(3.8em - var(--padding-left, 16px))));
 }
 
 
@@ -26,10 +26,10 @@ code-input pre[class*=language-].line-numbers>code {
 }
 /* Line numbers now positioned relative to the pre element not the code element. */
 code-input .line-numbers .line-numbers-rows {
-  left: 0;
-  top: var(--padding);
+  left: max(0em, calc(var(--padding-left, 16px) - 3.8em));
+  top: var(--padding-top);
 }
 /* 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) .line-numbers .line-numbers-rows {
-  top: calc(var(--padding) + 3em);
+  top: calc(var(--padding-top) + 3em);
 }