Fix/improve <textarea> (#8171)

## Feed configuration slider:

### Before:
<img width="747" height="346" alt="grafik" src="https://github.com/user-attachments/assets/37056ef8-1163-48d1-a3dd-99e745418b2d" />

### After:
<img width="743" height="473" alt="grafik" src="https://github.com/user-attachments/assets/388a0ef6-633e-43ee-8ea5-5cbe7b40e6e4" />

## CustomCSS, CustomJS extensions
### Before:
<img width="762" height="504" alt="grafik" src="https://github.com/user-attachments/assets/279801fb-06a7-477a-81e7-c681087595a5" />

### After:
<img width="767" height="922" alt="grafik" src="https://github.com/user-attachments/assets/ca4cf304-03c7-4028-89d0-1c3094086176" />

And cleaning some CSS

* UserCSS+JS: w100 h50
* clean textarea width height
* feed config slider
* Update base.rtl.css
* fix class="valid-json"
* padding + vertical-align
* fix ansum mapco

app/views/helpers/feed/update.phtml

@@ -846,7 +846,7 @@
 						$httpHeaders = array_filter($httpHeaders,
 							fn(string $header) => !preg_match('/^(Remote-User|X-WebAuth-User)\\s*:/i', $header));
 					?>
-					<textarea class="valid-json" id="http_headers" name="http_headers" rows="3" cols="64" spellcheck="false"><?php
+					<textarea class="w100" id="http_headers" name="http_headers" rows="3" spellcheck="false"><?php
 						foreach ($httpHeaders as $header) {
 							echo htmlspecialchars($header, ENT_NOQUOTES, 'UTF-8'), PHP_EOL;
 						}

app/views/subscription/add.phtml

@@ -365,7 +365,7 @@
 			<div class="form-group">
 				<label class="group-name" for="http_headers"><?= _t('sub.feed.http_headers') ?></label>
 				<div class="group-controls">
-					<textarea class="valid-json" id="http_headers" name="http_headers" rows="3" cols="64" spellcheck="false"></textarea>
+					<textarea id="http_headers" name="http_headers" rows="3" cols="64" spellcheck="false"></textarea>
 					<p class="help"><?= _i('help') ?> <?= _t('sub.feed.http_headers_help') ?></p>
 				</div>
 			</div>

lib/core-extensions/UserCSS/configure.phtml

@@ -7,7 +7,7 @@
 	<div class="form-group">
 		<label class="group-name" for="css-rules"><?= _t('ext.user_css.write_css') ?></label>
 		<div class="group-controls">
-			<textarea name="css-rules" id="css-rules"><?= $this->css_rules ?></textarea>
+			<textarea name="css-rules" id="css-rules" class="w100 h50"><?= $this->css_rules ?></textarea>
 		</div>
 	</div>
 

lib/core-extensions/UserJS/configure.phtml

@@ -7,7 +7,7 @@
 	<div class="form-group">
 		<label class="group-name" for="js-rules"><?= _t('ext.user_js.write_js') ?></label>
 		<div class="group-controls">
-			<textarea name="js-rules" id="js-rules"><?= $this->js_rules ?></textarea>
+			<textarea name="js-rules" id="js-rules" class="w100 h50"><?= $this->js_rules ?></textarea>
 		</div>
 	</div>
 

p/themes/Alternative-Dark/adark.css

@@ -79,18 +79,11 @@ label {
 	cursor: pointer;
 }
 
-textarea {
-	width: 360px;
-	height: 100px;
-}
-
 input, select, textarea {
-	padding: 7px;
 	background: var(--background-color-light);
 	color: var(--font-color-middle);
 	border: 1px solid var(--border-color-middle);
 	border-radius: 3px;
-	vertical-align: middle;
 }
 
 input:hover,

p/themes/Alternative-Dark/adark.rtl.css

@@ -79,18 +79,11 @@ label {
 	cursor: pointer;
 }
 
-textarea {
-	width: 360px;
-	height: 100px;
-}
-
 input, select, textarea {
-	padding: 7px;
 	background: var(--background-color-light);
 	color: var(--font-color-middle);
 	border: 1px solid var(--border-color-middle);
 	border-radius: 3px;
-	vertical-align: middle;
 }
 
 input:hover,

p/themes/Ansum/_forms.scss

@@ -70,8 +70,6 @@ label {
 
 textarea {
 	max-width: 100%;
-	width: 360px;
-	height: 100px;
 }
 
 input, select, textarea, button {
@@ -84,7 +82,6 @@ input, select, textarea, button {
 	border-radius: 2px;
 	min-height: 25px;
 	line-height: 25px;
-	vertical-align: middle;
 }
 
 select {

p/themes/Ansum/ansum.css

@@ -114,8 +114,6 @@ label {
 
 textarea {
 	max-width: 100%;
-	width: 360px;
-	height: 100px;
 }
 
 input, select, textarea, button {

p/themes/Ansum/ansum.rtl.css

@@ -114,8 +114,6 @@ label {
 
 textarea {
 	max-width: 100%;
-	width: 360px;
-	height: 100px;
 }
 
 input, select, textarea, button {

p/themes/Flat/flat.css

@@ -33,11 +33,6 @@ label {
 	color: #444;
 }
 
-textarea {
-	width: 360px;
-	height: 100px;
-}
-
 input, select, textarea {
 	padding: 5px;
 	background: #fff;
@@ -48,7 +43,6 @@ input, select, textarea {
 	border-radius: 5px;
 	min-height: 25px;
 	line-height: 1;
-	vertical-align: middle;
 }
 
 option {

p/themes/Flat/flat.rtl.css

@@ -33,11 +33,6 @@ label {
 	color: #444;
 }
 
-textarea {
-	width: 360px;
-	height: 100px;
-}
-
 input, select, textarea {
 	padding: 5px;
 	background: #fff;
@@ -48,7 +43,6 @@ input, select, textarea {
 	border-radius: 5px;
 	min-height: 25px;
 	line-height: 1;
-	vertical-align: middle;
 }
 
 option {

p/themes/Mapco/_forms.scss

@@ -70,8 +70,6 @@ label {
 
 textarea {
 	max-width: 100%;
-	width: 360px;
-	height: 100px;
 }
 
 input, select, textarea, button {
@@ -84,7 +82,6 @@ input, select, textarea, button {
 	border-radius: 2px;
 	min-height: 25px;
 	line-height: 25px;
-	vertical-align: middle;
 }
 
 select {

p/themes/Mapco/mapco.css

@@ -114,8 +114,6 @@ label {
 
 textarea {
 	max-width: 100%;
-	width: 360px;
-	height: 100px;
 }
 
 input, select, textarea, button {

p/themes/Mapco/mapco.rtl.css

@@ -114,8 +114,6 @@ label {
 
 textarea {
 	max-width: 100%;
-	width: 360px;
-	height: 100px;
 }
 
 input, select, textarea, button {

p/themes/Nord/nord.css

@@ -125,14 +125,12 @@ label {
 }
 
 input, select, textarea {
-	padding: 5px;
 	color: var(--text-default);
 	border: 1px solid var(--border-elements);
 	border-radius: 6px;
 	background-color: transparent;
 	min-height: 25px;
 	line-height: 1;
-	vertical-align: middle;
 }
 
 input:invalid,
@@ -141,11 +139,6 @@ textarea:invalid {
 	border-color: var(--red);
 }
 
-select {
-	padding-top: 10px;
-	padding-bottom: 9px;
-}
-
 input:hover,
 select:hover,
 textarea:hover {
@@ -1087,11 +1080,6 @@ a, button.as-link {
 }
 
 /*=== Forms */
-textarea {
-	width: 360px;
-	height: 100px;
-}
-
 option,
 optgroup {
 	padding-left: 0.5rem;

p/themes/Nord/nord.rtl.css

@@ -125,14 +125,12 @@ label {
 }
 
 input, select, textarea {
-	padding: 5px;
 	color: var(--text-default);
 	border: 1px solid var(--border-elements);
 	border-radius: 6px;
 	background-color: transparent;
 	min-height: 25px;
 	line-height: 1;
-	vertical-align: middle;
 }
 
 input:invalid,
@@ -141,11 +139,6 @@ textarea:invalid {
 	border-color: var(--red);
 }
 
-select {
-	padding-top: 10px;
-	padding-bottom: 9px;
-}
-
 input:hover,
 select:hover,
 textarea:hover {
@@ -1087,11 +1080,6 @@ a, button.as-link {
 }
 
 /*=== Forms */
-textarea {
-	width: 360px;
-	height: 100px;
-}
-
 option,
 optgroup {
 	padding-right: 0.5rem;

p/themes/Origine/origine.css

@@ -120,18 +120,11 @@ textarea:hover {
 	color: var(--font-color);
 }
 
-textarea {
-	width: 360px;
-	height: 100px;
-}
-
 input, select, textarea {
-	padding: 7px;
 	background-color: var(--background-color-light);
 	color: var(--font-color-grey);
 	border: 1px solid var(--border-color);
 	border-radius: 3px;
-	vertical-align: middle;
 }
 
 option {

p/themes/Origine/origine.rtl.css

@@ -120,18 +120,11 @@ textarea:hover {
 	color: var(--font-color);
 }
 
-textarea {
-	width: 360px;
-	height: 100px;
-}
-
 input, select, textarea {
-	padding: 7px;
 	background-color: var(--background-color-light);
 	color: var(--font-color-grey);
 	border: 1px solid var(--border-color);
 	border-radius: 3px;
-	vertical-align: middle;
 }
 
 option {

p/themes/Pafat/pafat.css

@@ -114,18 +114,11 @@ label {
 	cursor: pointer;
 }
 
-textarea {
-	width: 360px;
-	height: 100px;
-}
-
 input, select, textarea {
-	padding: 7px;
 	background-color: var(--background-color-white);
 	color: var(--font-color-grey);
 	border: 1px solid var(--border-color-grey-dark);
 	border-radius: 3px;
-	vertical-align: middle;
 }
 
 option {

p/themes/Pafat/pafat.rtl.css

@@ -114,18 +114,11 @@ label {
 	cursor: pointer;
 }
 
-textarea {
-	width: 360px;
-	height: 100px;
-}
-
 input, select, textarea {
-	padding: 7px;
 	background-color: var(--background-color-white);
 	color: var(--font-color-grey);
 	border: 1px solid var(--border-color-grey-dark);
 	border-radius: 3px;
-	vertical-align: middle;
 }
 
 option {

p/themes/Swage/swage.scss

@@ -62,11 +62,8 @@ $color_hover:	#fff;
 %input {
 	min-height: 25px;
 	margin-top: 4px;
-	line-height: 2.25;
-	vertical-align: middle;
 	background-color: var(--color-background-light);
 	border: 2px solid var(--color-border-grey);
-	padding-left: 8px;
 }
 %input:focus {
 	border: 2px solid var(--color-background-dark);
@@ -181,8 +178,6 @@ label {
 }
 
 textarea {
-	width: 360px;
-	height: 100px;
 
 	@extend %input;
 }
@@ -202,11 +197,6 @@ select {
 	}
 }
 
-select {
-	padding-top: 7px;
-	padding-bottom: 8px;
-}
-
 option {
 	padding: 0 .5em;
 }

p/themes/base-theme/base.css

@@ -29,16 +29,6 @@ label {
 	cursor: pointer;
 }
 
-textarea {
-	width: 360px;
-	height: 100px;
-}
-
-input, select, textarea {
-	padding: 7px;
-	vertical-align: middle;
-}
-
 option {
 	padding: 0 .5em;
 }

p/themes/base-theme/base.rtl.css

@@ -29,16 +29,6 @@ label {
 	cursor: pointer;
 }
 
-textarea {
-	width: 360px;
-	height: 100px;
-}
-
-input, select, textarea {
-	padding: 7px;
-	vertical-align: middle;
-}
-
 option {
 	padding: 0 .5em;
 }

p/themes/base-theme/frss.css

@@ -291,6 +291,10 @@ input[type=number] {
 	width: 6em;
 }
 
+textarea {
+	height: 7rem;
+}
+
 textarea,
 input[type="file"],
 input.long {
@@ -298,6 +302,8 @@ input.long {
 }
 
 input, select, textarea {
+	padding: 0.5rem;
+	vertical-align: middle;
 	display: inline-block;
 	max-width: 85vw;
 	font-size: 0.8rem;
@@ -308,6 +314,11 @@ select {
 	min-width: 6em;
 }
 
+textarea.h50 {
+	height: 50vh;
+	min-height: 7rem;
+}
+
 input.w50,
 select.w50,
 textarea.w50 {

p/themes/base-theme/frss.rtl.css

@@ -291,6 +291,10 @@ input[type=number] {
 	width: 6em;
 }
 
+textarea {
+	height: 7rem;
+}
+
 textarea,
 input[type="file"],
 input.long {
@@ -298,6 +302,8 @@ input.long {
 }
 
 input, select, textarea {
+	padding: 0.5rem;
+	vertical-align: middle;
 	display: inline-block;
 	max-width: 85vw;
 	font-size: 0.8rem;
@@ -308,6 +314,11 @@ select {
 	min-width: 6em;
 }
 
+textarea.h50 {
+	height: 50vh;
+	min-height: 7rem;
+}
+
 input.w50,
 select.w50,
 textarea.w50 {