diff --git a/code-input.css b/code-input.css
index a5fd92a..c3ac631 100644
--- a/code-input.css
+++ b/code-input.css
@@ -38,8 +38,8 @@ code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, co
margin: 0px!important;
padding: var(--padding, 16px)!important;
border: 0;
- min-width: calc(100% - var(--padding) * 2);
- min-height: calc(100% - var(--padding) * 2);
+ min-width: calc(100% - var(--padding, 16px) * 2);
+ min-height: calc(100% - var(--padding, 16px) * 2);
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. */
overflow: hidden;
resize: none;
@@ -57,8 +57,6 @@ code-input:not(.code-input_pre-element-styled) pre, code-input.code-input_pre-el
/* Remove all margin and padding from others */
margin: 0px!important;
padding: 0px!important;
- width: 100%;
- height: 100%;
}
code-input textarea, code-input pre, code-input pre * {
@@ -139,12 +137,12 @@ code-input:not(.code-input_registered)::after {
content: "Use codeInput.registerTemplate to set up.";
display: block;
position: absolute;
- bottom: var(--padding);
- left: var(--padding);
- width: calc(100% - 2 * var(--padding));
+ bottom: var(--padding, 16px);
+ left: var(--padding, 16px);
+ width: calc(100% - 2 * var(--padding, 16px));
border-top: 1px solid grey;
- outline: var(--padding) solid white;
+ outline: var(--padding, 16px) solid white;
background-color: white;
}
@@ -167,12 +165,16 @@ code-input .code-input_dialog-container {
margin: 0;
padding: 0;
- width: 100%;
height: 0;
+ width: 100%;
/* Dialog boxes' text is based on text-direction */
text-align: inherit;
}
+code-input.code-input_pre-element-styled .code-input_dialog-container {
+ width: calc(100% + 2 * var(--padding, 16px) - 2px);
+}
+
[dir=rtl] code-input .code-input_dialog-container, code-input[dir=rtl] .code-input_dialog-container {
left: unset;
right: 0;
@@ -212,5 +214,8 @@ code-input .code-input_dialog-container .code-input_keyboard-navigation-instruct
code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused) textarea,
code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea: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:focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
- padding-top: calc(var(--padding) + 3em)!important;
+ padding-top: calc(var(--padding, 16px) + 3em)!important;
+}
+code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea:focus):not(.code-input_mouse-focused) textarea, code-input:not(:has(.code-input_keyboard-navigation-instructions:empty)):has(textarea: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:focus):not(.code-input_mouse-focused).code-input_pre-element-styled pre {
+ min-height: calc(100% - var(--padding, 16px) * 2 - 3em);
}
diff --git a/plugins/prism-line-numbers.css b/plugins/prism-line-numbers.css
index 3542034..e8c4c0c 100644
--- a/plugins/prism-line-numbers.css
+++ b/plugins/prism-line-numbers.css
@@ -4,7 +4,7 @@
* https://prismjs.com/plugins/line-numbers/
* Files: prism-line-numbers.css
*/
-/* Update padding to match line-numbers plugin */
+/* Update padding to match line-numbers plugin, and decrease width likewise */
code-input.line-numbers textarea, code-input.line-numbers.code-input_pre-element-styled pre,
.line-numbers code-input textarea, .line-numbers code-input.code-input_pre-element-styled pre {
padding-left: max(3.8em, var(--padding, 16px))!important;
@@ -15,11 +15,6 @@ code-input.line-numbers, .line-numbers code-input {
grid-template-columns: calc(100% - max(0em, calc(3.8em - var(--padding, 16px))));
}
-/* Make keyboard navigation still fill width */
-code-input.line-numbers .code-input_dialog-container .code-input_keyboard-navigation-instructions, .line-numbers code-input .code-input_dialog-container .code-input_keyboard-navigation-instructions {
- width: calc(100% + max(3.8em, var(--padding, 16px)))!important;
-}
-
/* Override Prism styles so there's no display:inline, relatively-positioned code element which breaks offsetTop, used in FindAndReplace, in Firefox. */
code-input pre[class*=language-].line-numbers>code {
position: static;
diff --git a/tests/i18n.html b/tests/i18n.html
index b8d4f7f..bc3a6ca 100644
--- a/tests/i18n.html
+++ b/tests/i18n.html
@@ -7,7 +7,7 @@
-
+