Adapt to new Nextcloud vue style

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

apps/settings/css/settings.css

@@ -480,12 +480,32 @@ table.nostyle td {
 #security-password #passwordform {
   display: flex;
   flex-wrap: wrap;
+  flex-direction: column;
+  gap: 1rem;
 }
-#security-password #passwordform #pass1, #security-password #passwordform .personal-show-container, #security-password #passwordform #passwordbutton {
+#security-password #passwordform .input-control {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+}
+#security-password #passwordform .input-control label {
+  margin-bottom: 0.5rem;
+}
+#security-password #passwordform #pass1, #security-password #passwordform .personal-show-container {
   flex-shrink: 1;
-  width: 200px;
+  width: 300px;
   min-width: 150px;
 }
+#security-password #passwordform .personal-show-container #pass2 {
+  position: relative;
+  top: 0.5rem;
+}
+#security-password #passwordform .personal-show-container .personal-show-label {
+  top: 34px !important;
+  margin-right: 0;
+  margin-top: 0 !important;
+  right: 3px;
+}
 #security-password #passwordform #pass2 {
   width: 100%;
 }
@@ -497,7 +517,7 @@ table.nostyle td {
   left: 0;
   width: 100%;
   border-radius: 0 0 2px 2px;
-  margin-top: -6px;
+  margin-top: 5px;
   overflow: hidden;
   height: 3px;
 }

apps/settings/css/settings.scss

@@ -514,13 +514,37 @@ table.nostyle {
 	#passwordform {
 		display: flex;
 		flex-wrap: wrap;
+		flex-direction: column;
+		gap: 1rem;
+		.input-control {
+			display: flex;
+			flex-wrap: wrap;
+			flex-direction: column;
+			label {
+				margin-bottom: 0.5rem;
+			}
+		}
 
-		#pass1, .personal-show-container, #passwordbutton {
+		#pass1, .personal-show-container {
 			flex-shrink: 1;
-			width: 200px;
+			width: 300px;
 			min-width: 150px;
 		}
 
+		// Extremely fragile code, to be replaced by PasswordField component soon
+		.personal-show-container {
+			#pass2 {
+				position: relative;
+				top: 0.5rem;
+			}
+			.personal-show-label {
+				top: 34px !important;
+				margin-right: 0;
+				margin-top: 0 !important;
+				right: 3px;
+			}
+		}
+
 		#pass2 {
 			width: 100%;
 		}
@@ -534,7 +558,7 @@ table.nostyle {
 			left: 0;
 			width: 100%;
 			border-radius: 0 0 2px 2px;
-			margin-top: -6px;
+			margin-top: 5px;
 			overflow: hidden;
 			height: 3px;
 		}

apps/settings/src/components/PersonalInfo/EmailSection/Email.vue

@@ -365,15 +365,6 @@ export default {
 	input {
 		grid-area: 1 / 1;
 		width: 100%;
-		height: 34px;
-		margin: 3px 3px 3px 0;
-		padding: 7px 14px;
-		color: var(--color-main-text);
-		border: 1px solid var(--color-border-dark);
-		border-radius: var(--border-radius);
-		background-color: var(--color-main-background);
-		font-family: var(--font-face);
-		cursor: text;
 	}
 
 	.email__actions-container {

apps/settings/src/components/PersonalInfo/LanguageSection/Language.vue

@@ -151,16 +151,6 @@ export default {
 
 	select {
 		width: 100%;
-		height: 34px;
-		margin: 3px 3px 3px 0;
-		padding: 6px 16px;
-		color: var(--color-main-text);
-		border: 1px solid var(--color-border-dark);
-		border-radius: var(--border-radius);
-		background: var(--icon-triangle-s-dark) no-repeat right 4px center;
-		font-family: var(--font-face);
-		appearance: none;
-		cursor: pointer;
 	}
 
 	a {

apps/settings/templates/settings/personal/security/password.php

@@ -37,25 +37,29 @@ if ($_['passwordChangeSupported']) {
 	<h2 class="inlineblock"><?php p($l->t('Password'));?></h2>
 	<span id="password-error-msg" class="msg success hidden">Saved</span>
 	<div class="personal-settings-setting-box personal-settings-password-box">
-			<form id="passwordform" method="POST">
-				<label for="pass1" class="hidden-visually"><?php p($l->t('Current password')); ?>: </label>
+		<form id="passwordform" method="POST">
+			<div class="input-control">
+				<label for="pass1"><?php p($l->t('Current password')); ?>: </label>
 				<input type="password" id="pass1" name="oldpassword"
 					   placeholder="<?php p($l->t('Current password'));?>"
 					   autocomplete="current-password" autocapitalize="none" autocorrect="off" />
+			</div>
 
-				<div class="personal-show-container">
-					<label for="pass2" class="hidden-visually"><?php p($l->t('New password'));?>: </label>
-					<input type="password" id="pass2" name="newpassword"
-						   maxlength="469"
-						   placeholder="<?php p($l->t('New password')); ?>"
-						   data-typetoggle="#personal-show"
-						   autocomplete="new-password" autocapitalize="none" autocorrect="off" />
-					<input type="checkbox" id="personal-show" class="hidden-visually" name="show" /><label for="personal-show" class="personal-show-label"></label>
-				</div>
+			<div class="personal-show-container">
+				<label for="pass2" ><?php p($l->t('New password'));?>: </label>
+				<input type="password" id="pass2" name="newpassword"
+					   maxlength="469"
+					   placeholder="<?php p($l->t('New password')); ?>"
+					   data-typetoggle="#personal-show"
+					   autocomplete="new-password" autocapitalize="none" autocorrect="off" />
+				<input type="checkbox" id="personal-show" class="hidden-visually" name="show" />
+				<label for="personal-show" class="personal-show-label"></label>
+			</div>
 
-				<input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" />
-
-			</form>
+			<div>
+				<input id="passwordbutton" class="primary" type="submit" value="<?php p($l->t('Change password')); ?>" />
+			</div>
+		</form>
 	</div>
 	<span class="msg"></span>
 </div>

apps/user_ldap/lib/Group_LDAP.php.rej

@@ -1,33 +0,0 @@
---- apps/user_ldap/lib/Group_LDAP.php
-+++ apps/user_ldap/lib/Group_LDAP.php
-@@ -62,7 +62,7 @@ class Group_LDAP extends BackendUtility implements GroupInterface, IGroupLDAP, I
-        protected CappedMemoryCache $cachedGroupsByMember;
-        /** @var CappedMemoryCache<string[]> $cachedNestedGroups array of groups with gid (DN) as key */
-        protected CappedMemoryCache $cachedNestedGroups;
--       protected GroupInterface $groupPluginManager;
-+       protected GroupPluginManager $groupPluginManager;
-        protected LoggerInterface $logger;
- 
-        /**
-@@ -243,8 +243,9 @@ class Group_LDAP extends BackendUtility implements GroupInterface, IGroupLDAP, I
-         * @psalm-param array<string, bool> $seen List of DN that have already been processed.
-         * @throws ServerNotAvailableException
-         */
--       private function _groupMembers(string $dnGroup, array &$seen = []): array {
-+       private function _groupMembers(string $dnGroup, array $seen = [], bool &$recursive = false): array {
-                if (isset($seen[$dnGroup])) {
-+                       $recursive = true;
-                        return [];
-                }
-                $seen[$dnGroup] = true;
-@@ -317,7 +318,9 @@ class Group_LDAP extends BackendUtility implements GroupInterface, IGroupLDAP, I
-                        unset($allMembers[$index]);
-                }
- 
--               $this->access->connection->writeToCache($cacheKey, $allMembers);
-+               if (!$recursive) {
-+                       $this->access->connection->writeToCache($cacheKey, $allMembers);
-+               }
- 
-                if (isset($attemptedLdapMatchingRuleInChain)
- 

core/css/inputs.css

@@ -96,11 +96,10 @@ div[contenteditable=false] {
  */
 /* Default global values */
 div.select2-drop .select2-search input,
-select,
+input[type=submit],
+input[type=button],
+input[type=reset],
 button:not(.button-vue), .button,
-input:not([type=range]),
-textarea,
-div[contenteditable=true],
 .pager li a {
   margin: 3px 3px 3px 0;
   padding: 7px 14px;
@@ -114,21 +113,18 @@ div[contenteditable=true],
   /* Primary action button, use sparingly */
 }
 div.select2-drop .select2-search input:not(:disabled):not(.primary):hover, div.select2-drop .select2-search input:not(:disabled):not(.primary):focus, div.select2-drop .select2-search input:not(:disabled):not(.primary).active,
-select:not(:disabled):not(.primary):hover,
-select:not(:disabled):not(.primary):focus,
-select:not(:disabled):not(.primary).active,
+input[type=submit]:not(:disabled):not(.primary):hover,
+input[type=submit]:not(:disabled):not(.primary):focus,
+input[type=submit]:not(:disabled):not(.primary).active,
+input[type=button]:not(:disabled):not(.primary):hover,
+input[type=button]:not(:disabled):not(.primary):focus,
+input[type=button]:not(:disabled):not(.primary).active,
+input[type=reset]:not(:disabled):not(.primary):hover,
+input[type=reset]:not(:disabled):not(.primary):focus,
+input[type=reset]:not(:disabled):not(.primary).active,
 button:not(.button-vue):not(:disabled):not(.primary):hover,
 button:not(.button-vue):not(:disabled):not(.primary):focus,
 button:not(.button-vue):not(:disabled):not(.primary).active, .button:not(:disabled):not(.primary):hover, .button:not(:disabled):not(.primary):focus, .button:not(:disabled):not(.primary).active,
-input:not([type=range]):not(:disabled):not(.primary):hover,
-input:not([type=range]):not(:disabled):not(.primary):focus,
-input:not([type=range]):not(:disabled):not(.primary).active,
-textarea:not(:disabled):not(.primary):hover,
-textarea:not(:disabled):not(.primary):focus,
-textarea:not(:disabled):not(.primary).active,
-div[contenteditable=true]:not(:disabled):not(.primary):hover,
-div[contenteditable=true]:not(:disabled):not(.primary):focus,
-div[contenteditable=true]:not(:disabled):not(.primary).active,
 .pager li a:not(:disabled):not(.primary):hover,
 .pager li a:not(:disabled):not(.primary):focus,
 .pager li a:not(:disabled):not(.primary).active {
@@ -137,31 +133,28 @@ div[contenteditable=true]:not(:disabled):not(.primary).active,
   outline: none;
 }
 div.select2-drop .select2-search input:not(:disabled):not(.primary):active,
-select:not(:disabled):not(.primary):active,
+input[type=submit]:not(:disabled):not(.primary):active,
+input[type=button]:not(:disabled):not(.primary):active,
+input[type=reset]:not(:disabled):not(.primary):active,
 button:not(.button-vue):not(:disabled):not(.primary):active, .button:not(:disabled):not(.primary):active,
-input:not([type=range]):not(:disabled):not(.primary):active,
-textarea:not(:disabled):not(.primary):active,
-div[contenteditable=true]:not(:disabled):not(.primary):active,
 .pager li a:not(:disabled):not(.primary):active {
   outline: none;
   background-color: var(--color-main-background);
   color: var(--color-text-light);
 }
 div.select2-drop .select2-search input:not(:disabled):not(.primary):focus-visible,
-select:not(:disabled):not(.primary):focus-visible,
+input[type=submit]:not(:disabled):not(.primary):focus-visible,
+input[type=button]:not(:disabled):not(.primary):focus-visible,
+input[type=reset]:not(:disabled):not(.primary):focus-visible,
 button:not(.button-vue):not(:disabled):not(.primary):focus-visible, .button:not(:disabled):not(.primary):focus-visible,
-input:not([type=range]):not(:disabled):not(.primary):focus-visible,
-textarea:not(:disabled):not(.primary):focus-visible,
-div[contenteditable=true]:not(:disabled):not(.primary):focus-visible,
 .pager li a:not(:disabled):not(.primary):focus-visible {
   box-shadow: 0 0 0 2px var(--color-primary);
 }
 div.select2-drop .select2-search input:disabled,
-select:disabled,
+input[type=submit]:disabled,
+input[type=button]:disabled,
+input[type=reset]:disabled,
 button:not(.button-vue):disabled, .button:disabled,
-input:not([type=range]):disabled,
-textarea:disabled,
-div[contenteditable=true]:disabled,
 .pager li a:disabled {
   background-color: var(--color-background-dark);
   color: var(--color-main-text);
@@ -169,29 +162,26 @@ div[contenteditable=true]:disabled,
   opacity: 0.5;
 }
 div.select2-drop .select2-search input:required,
-select:required,
+input[type=submit]:required,
+input[type=button]:required,
+input[type=reset]:required,
 button:not(.button-vue):required, .button:required,
-input:not([type=range]):required,
-textarea:required,
-div[contenteditable=true]:required,
 .pager li a:required {
   box-shadow: none;
 }
 div.select2-drop .select2-search input:user-invalid,
-select:user-invalid,
+input[type=submit]:user-invalid,
+input[type=button]:user-invalid,
+input[type=reset]:user-invalid,
 button:not(.button-vue):user-invalid, .button:user-invalid,
-input:not([type=range]):user-invalid,
-textarea:user-invalid,
-div[contenteditable=true]:user-invalid,
 .pager li a:user-invalid {
   box-shadow: 0 0 0 2px var(--color-error) !important;
 }
 div.select2-drop .select2-search input.primary,
-select.primary,
+input[type=submit].primary,
+input[type=button].primary,
+input[type=reset].primary,
 button:not(.button-vue).primary, .button.primary,
-input:not([type=range]).primary,
-textarea.primary,
-div[contenteditable=true].primary,
 .pager li a.primary {
   background-color: var(--color-primary-element);
   border-color: var(--color-primary-element);
@@ -200,36 +190,31 @@ div[contenteditable=true].primary,
   /* Apply border to primary button if on log in page (and not in a dark container) or if in header */
 }
 #body-login :not(.body-login-container) div.select2-drop .select2-search input.primary, #header div.select2-drop .select2-search input.primary,
-#body-login :not(.body-login-container) select.primary,
-#header select.primary,
+#body-login :not(.body-login-container) input[type=submit].primary,
+#header input[type=submit].primary,
+#body-login :not(.body-login-container) input[type=button].primary,
+#header input[type=button].primary,
+#body-login :not(.body-login-container) input[type=reset].primary,
+#header input[type=reset].primary,
 #body-login :not(.body-login-container) button:not(.button-vue).primary,
 #header button:not(.button-vue).primary, #body-login :not(.body-login-container) .button.primary, #header .button.primary,
-#body-login :not(.body-login-container) input:not([type=range]).primary,
-#header input:not([type=range]).primary,
-#body-login :not(.body-login-container) textarea.primary,
-#header textarea.primary,
-#body-login :not(.body-login-container) div[contenteditable=true].primary,
-#header div[contenteditable=true].primary,
 #body-login :not(.body-login-container) .pager li a.primary,
 #header .pager li a.primary {
   border-color: var(--color-primary-text);
 }
 div.select2-drop .select2-search input.primary:not(:disabled):hover, div.select2-drop .select2-search input.primary:not(:disabled):focus, div.select2-drop .select2-search input.primary:not(:disabled):active,
-select.primary:not(:disabled):hover,
-select.primary:not(:disabled):focus,
-select.primary:not(:disabled):active,
+input[type=submit].primary:not(:disabled):hover,
+input[type=submit].primary:not(:disabled):focus,
+input[type=submit].primary:not(:disabled):active,
+input[type=button].primary:not(:disabled):hover,
+input[type=button].primary:not(:disabled):focus,
+input[type=button].primary:not(:disabled):active,
+input[type=reset].primary:not(:disabled):hover,
+input[type=reset].primary:not(:disabled):focus,
+input[type=reset].primary:not(:disabled):active,
 button:not(.button-vue).primary:not(:disabled):hover,
 button:not(.button-vue).primary:not(:disabled):focus,
 button:not(.button-vue).primary:not(:disabled):active, .button.primary:not(:disabled):hover, .button.primary:not(:disabled):focus, .button.primary:not(:disabled):active,
-input:not([type=range]).primary:not(:disabled):hover,
-input:not([type=range]).primary:not(:disabled):focus,
-input:not([type=range]).primary:not(:disabled):active,
-textarea.primary:not(:disabled):hover,
-textarea.primary:not(:disabled):focus,
-textarea.primary:not(:disabled):active,
-div[contenteditable=true].primary:not(:disabled):hover,
-div[contenteditable=true].primary:not(:disabled):focus,
-div[contenteditable=true].primary:not(:disabled):active,
 .pager li a.primary:not(:disabled):hover,
 .pager li a.primary:not(:disabled):focus,
 .pager li a.primary:not(:disabled):active {
@@ -237,35 +222,31 @@ div[contenteditable=true].primary:not(:disabled):active,
   border-color: var(--color-primary-element-hover);
 }
 div.select2-drop .select2-search input.primary:not(:disabled):focus, div.select2-drop .select2-search input.primary:not(:disabled):focus-visible,
-select.primary:not(:disabled):focus,
-select.primary:not(:disabled):focus-visible,
+input[type=submit].primary:not(:disabled):focus,
+input[type=submit].primary:not(:disabled):focus-visible,
+input[type=button].primary:not(:disabled):focus,
+input[type=button].primary:not(:disabled):focus-visible,
+input[type=reset].primary:not(:disabled):focus,
+input[type=reset].primary:not(:disabled):focus-visible,
 button:not(.button-vue).primary:not(:disabled):focus,
 button:not(.button-vue).primary:not(:disabled):focus-visible, .button.primary:not(:disabled):focus, .button.primary:not(:disabled):focus-visible,
-input:not([type=range]).primary:not(:disabled):focus,
-input:not([type=range]).primary:not(:disabled):focus-visible,
-textarea.primary:not(:disabled):focus,
-textarea.primary:not(:disabled):focus-visible,
-div[contenteditable=true].primary:not(:disabled):focus,
-div[contenteditable=true].primary:not(:disabled):focus-visible,
 .pager li a.primary:not(:disabled):focus,
 .pager li a.primary:not(:disabled):focus-visible {
   box-shadow: 0 0 0 2px var(--color-main-text);
 }
 div.select2-drop .select2-search input.primary:not(:disabled):active,
-select.primary:not(:disabled):active,
+input[type=submit].primary:not(:disabled):active,
+input[type=button].primary:not(:disabled):active,
+input[type=reset].primary:not(:disabled):active,
 button:not(.button-vue).primary:not(:disabled):active, .button.primary:not(:disabled):active,
-input:not([type=range]).primary:not(:disabled):active,
-textarea.primary:not(:disabled):active,
-div[contenteditable=true].primary:not(:disabled):active,
 .pager li a.primary:not(:disabled):active {
   color: var(--color-primary-text-dark);
 }
 div.select2-drop .select2-search input.primary:disabled,
-select.primary:disabled,
+input[type=submit].primary:disabled,
+input[type=button].primary:disabled,
+input[type=reset].primary:disabled,
 button:not(.button-vue).primary:disabled, .button.primary:disabled,
-input:not([type=range]).primary:disabled,
-textarea.primary:disabled,
-div[contenteditable=true].primary:disabled,
 .pager li a.primary:disabled {
   background-color: var(--color-primary-element);
   color: var(--color-primary-text-dark);
@@ -322,7 +303,8 @@ button:not(.button-vue), .button,
 input[type=button],
 input[type=submit],
 input[type=reset] {
-  padding: 6px 11px;
+  padding: 8px 14px;
+  font-size: var(--default-font-size);
   width: auto;
   min-height: 44px;
   cursor: pointer;
@@ -337,6 +319,54 @@ input[type=reset]:disabled {
   cursor: default;
 }
 
+input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input),
+select,
+div[contenteditable=true],
+textarea {
+  margin: 3px 3px 3px 0;
+  padding: 0 12px;
+  font-size: var(--default-font-size);
+  background-color: var(--color-main-background);
+  color: var(--color-main-text);
+  border: 2px solid var(--color-border-dark);
+  height: 36px;
+  outline: none;
+  border-radius: var(--border-radius-large);
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(:disabled):hover, input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(:disabled):focus, input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(:disabled):active,
+select:not(:disabled):hover,
+select:not(:disabled):focus,
+select:not(:disabled):active,
+div[contenteditable=true]:not(:disabled):hover,
+div[contenteditable=true]:not(:disabled):focus,
+div[contenteditable=true]:not(:disabled):active,
+textarea:not(:disabled):hover,
+textarea:not(:disabled):focus,
+textarea:not(:disabled):active {
+  border-color: var(--color-primary-element);
+}
+input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(:disabled):focus,
+select:not(:disabled):focus,
+div[contenteditable=true]:not(:disabled):focus,
+textarea:not(:disabled):focus {
+  cursor: text;
+}
+
+textarea, div[contenteditable=true] {
+  padding: 12px;
+  height: auto;
+}
+
+/* Override the ugly select arrow */
+select {
+  background: var(--icon-triangle-s-dark) no-repeat right 8px center;
+  appearance: none;
+  background-color: var(--color-main-background);
+  padding-right: 28px !important;
+}
+
 select *,
 button:not(.button-vue) *, .button * {
   cursor: pointer;
@@ -379,35 +409,6 @@ button:not(.button-vue):not(.action-button) > span[class^=icon-], button:not(.bu
   opacity: 0.5;
 }
 
-textarea, div[contenteditable=true] {
-  color: var(--color-main-text);
-  cursor: text;
-  font-family: inherit;
-  height: auto;
-}
-textarea:not(:disabled):active, textarea:not(:disabled):hover, textarea:not(:disabled):focus, div[contenteditable=true]:not(:disabled):active, div[contenteditable=true]:not(:disabled):hover, div[contenteditable=true]:not(:disabled):focus {
-  border-color: var(--color-background-darker) !important;
-  background-color: var(--color-main-background) !important;
-}
-
-div[contenteditable=false] {
-  color: var(--color-text-lighter);
-  font-family: inherit;
-  height: auto;
-}
-
-/* Override the ugly select arrow */
-select {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: var(--icon-triangle-s-dark) no-repeat right 4px center;
-  background-color: inherit;
-  outline: 0;
-  padding-right: 24px !important;
-  height: 44px;
-}
-
 /* Confirm inputs */
 input[type=text], input[type=password], input[type=email] {
   /* only show confirm borders if input is not focused */

core/css/inputs.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["variables.scss","inputs.scss","functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ADlCC;AACD;EACC;;;AAED;EACC;;;AAKD;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC;EACA,YAVgB;EAWhB;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA8BA;;AA5BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGC;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAGD;AACA;AAcC;AAAA;;AAbA;EACC;EACA;EAEA,QA7He;;AA+HhB;EAIC;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAED;EACC;;;AAIF;AACA;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;EACA,YAhKgB;EAiKhB;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACC;;;AAKD;AAAA;EACC;;AAIA;AAAA;EACC;;;AAKH;AACA;AAAA;AAAA;AAAA;EAIC;EACA;AAEA;;AACA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;EACA;EACA;;;AAID;AACC;;AACA;EAEC;EACA;EACA;;;AAKH;EACC;EACA;EACA;EACA;;AAEC;EAGC;EACA;;;AAKH;EACC;EACA;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EAEA,QApPgB;;;AAuPjB;AAEC;AAsBC;;AAnBA;EACC;EACA;EACA;EACA;AACA;EACA;EACA;EACA,QApQc;EAqQd,OArQc;EAsQd;EACA;EACA;;AACA;EACC;ACnOH;EAEA;;ADyOG;EACC;;AAID;EAGC;EACA;;AACA;EACC;;AAQH;EACC;EACA;AACA;EACA;;;AAOJ;AACA;AAAA;EAEC;;;AAED;AAAA;EAEC;;;AAGD;AAKC;AA8EC;;AA5EA;EAEC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAED;EAEC;;AAED;EACC;EACA;EACA,QAxBkB;EAyBlB,OAzBkB;EA0BlB;EACA;EACA;EACA;;AAED;EAEC;;AAED;EACC;EACA;EACA;EACA;;AAED;AAEA;AAAA;EAEC;EACA;EACA;;AAED;EACC;EACA;AAA4D;;AAE7D;EACC;;AAID;EACC;EACA;;AAED;EACC,eA/DkB;;AAmEnB;EACC;EACA,QArEkB;EAsElB,OAtEkB;EAuElB;EACA;;AAED;EACC;;AAED;EACC;;AAOD;EAEC;;AAED;EACC,cAzFyB;;AA2F1B;EACC;EACA;EACA;;AAED;EACC;AAAuE;EACvE;AAAiE;;AAElE;EACC;EACA;AAAiE;EACjE;;AAID;EAEC;AAA0C;EAC1C;AAAsD;EACtD;;AAED;EACC;;AAED;EACC;AAAc;;;AAMlB;AACA;EACC;EACA;;AACA;EACC;;AAED;EACC;EACA;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;EACA;;AAIH;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA;;AAGA;EACC;;AAGF;EACE;EACA;;;AAMH;AAAA;AAAA;AAAA;EAEC;;;AAID;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACA;EAIC;EACA;EACA;EACA;;AAED;EACC;;AAGF;EACC;;AACA;EACC;;;AAKJ;EACC;;AACA;EACC;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;;AAED;EAEC;EACA;;AAGF;EACC;EACA;EACA;;AACA;EACC;EACA;;AAGF;EAGC;;AAED;EACC;;;AAKH;AACA;EACC;EACA;;AACA;EACC;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAIH;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;;AAED;EACC;EACA;;AACA;EACC;;;AAQL;AACA;EACC;EACA;EACA;EACA;EACA;EACA;AAiHA;;AAhHA;AACC;;AACA;EACC;EACA;;AAGF;EAEC;;AAED;AACC;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QAhsBe;AAisBf;AAoDA;AASA;AAaA;;AAzEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAAA;AASA;;AAPA;EACC;AACA;;AACA;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAAA;EAEA;EACA;EACA;EACA;AACA;AAAA;AAQA;AAAA;;AANA;EACC;;AAED;EACC,cAnDa;;AAuDd;EACC;EACA;EACA;;AAKH;EACC;EACA;EACA;AAAY;EACZ;EACA;EACA;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA,cAhFe;AAiFf;EACA;;AAGD;EACC;EACA;EACA;EACA;AACA;EACA;EACA;AACA;EACA;AACA;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AACA;AAAA;EAEC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAiBA;AAAA;AAAA;;AAhBA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAMA;EACC;EACA;;AAGF;EACC;;AAED;EACC;;AAIA;EACC;;;AAQN;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEC;EACC;;AAED;EACC;;AAGF;EACC;;AAED;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;;AAIF;AACA;EACC;IAEC;;EAED;IAEC;;EAED;IAGC;;EAED;IAEC;;;AAGF;EACC;EACA;EACA;;;AAKD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC","file":"inputs.css"}
+{"version":3,"sourceRoot":"","sources":["variables.scss","inputs.scss","functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ADlCC;AACD;EACC;;;AAED;EACC;;;AAKD;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC;EACA,YAVgB;EAWhB;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA8BA;;AA5BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA;EACC;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;EACA;EACA;EACA;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;;AAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGC;EACA;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;;AAED;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAEC;EACA;EACA;;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAGD;AACA;AAcC;AAAA;;AAbA;EACC;EACA;EAEA,QA5He;;AA8HhB;EAIC;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAED;EACC;;;AAIF;AACA;AAAA;AAAA;AAAA;AAAA;EAKC;EACA;EACA;EACA,YAhKgB;EAiKhB;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EACC;;;AAIF;AAAA;AAAA;AAAA;EAIC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACC;;AAED;AAAA;AAAA;AAAA;EACC;;;AAIF;EACC;EACA;;;AAGD;AACA;EACC;EACA;EACA;EACA;;;AAKA;AAAA;EACC;;AAIA;AAAA;EACC;;;AAKH;AACA;AAAA;AAAA;AAAA;EAIC;EACA;AAEA;;AACA;AAAA;AAAA;AAAA;EACC;;AAGD;AAAA;AAAA;AAAA;EACC;EACA;EACA;;;AAID;AACC;;AACA;EAEC;EACA;EACA;;;AAKH;AAEC;AAsBC;;AAnBA;EACC;EACA;EACA;EACA;AACA;EACA;EACA;EACA,QAvQc;EAwQd,OAxQc;EAyQd;EACA;EACA;;AACA;EACC;ACtOH;EAEA;;AD4OG;EACC;;AAID;EAGC;EACA;;AACA;EACC;;AAQH;EACC;EACA;AACA;EACA;;;AAOJ;AACA;AAAA;EAEC;;;AAED;AAAA;EAEC;;;AAGD;AAKC;AA8EC;;AA5EA;EAEC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAED;EAEC;;AAED;EACC;EACA;EACA,QAxBkB;EAyBlB,OAzBkB;EA0BlB;EACA;EACA;EACA;;AAED;EAEC;;AAED;EACC;EACA;EACA;EACA;;AAED;AAEA;AAAA;EAEC;EACA;EACA;;AAED;EACC;EACA;AAA4D;;AAE7D;EACC;;AAID;EACC;EACA;;AAED;EACC,eA/DkB;;AAmEnB;EACC;EACA,QArEkB;EAsElB,OAtEkB;EAuElB;EACA;;AAED;EACC;;AAED;EACC;;AAOD;EAEC;;AAED;EACC,cAzFyB;;AA2F1B;EACC;EACA;EACA;;AAED;EACC;AAAuE;EACvE;AAAiE;;AAElE;EACC;EACA;AAAiE;EACjE;;AAID;EAEC;AAA0C;EAC1C;AAAsD;EACtD;;AAED;EACC;;AAED;EACC;AAAc;;;AAMlB;AACA;EACC;EACA;;AACA;EACC;;AAED;EACC;EACA;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AACA;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;EACA;;AAIH;AAAA;AAAA;EAGC;EACA;EACA;EACA;EACA;EACA;;AAGA;EACC;;AAGF;EACE;EACA;;;AAMH;AAAA;AAAA;AAAA;EAEC;;;AAID;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AACA;EAIC;EACA;EACA;EACA;;AAED;EACC;;AAGF;EACC;;AACA;EACC;;;AAKJ;EACC;;AACA;EACC;EACA;;AACA;EACC;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;;AAED;EAEC;EACA;;AAGF;EACC;EACA;EACA;;AACA;EACC;EACA;;AAGF;EAGC;;AAED;EACC;;;AAKH;AACA;EACC;EACA;;AACA;EACC;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAIH;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACC;;AAED;EACC;EACA;;AACA;EACC;;;AAQL;AACA;EACC;EACA;EACA;EACA;EACA;EACA;AAiHA;;AAhHA;AACC;;AACA;EACC;EACA;;AAGF;EAEC;;AAED;AACC;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QAnsBe;AAosBf;AAoDA;AASA;AAaA;;AAzEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAAA;AASA;;AAPA;EACC;AACA;;AACA;EACC;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAAA;EAEA;EACA;EACA;EACA;AACA;AAAA;AAQA;AAAA;;AANA;EACC;;AAED;EACC,cAnDa;;AAuDd;EACC;EACA;EACA;;AAKH;EACC;EACA;EACA;AAAY;EACZ;EACA;EACA;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA,cAhFe;AAiFf;EACA;;AAGD;EACC;EACA;EACA;EACA;AACA;EACA;EACA;AACA;EACA;AACA;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;;AACA;AAAA;EAEC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAiBA;AAAA;AAAA;;AAhBA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;;AAMA;EACC;EACA;;AAGF;EACC;;AAED;EACC;;AAIA;EACC;;;AAQN;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEC;EACC;;AAED;EACC;;AAGF;EACC;;AAED;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;;AAIF;AACA;EACC;IAEC;;EAED;IAEC;;EAED;IAGC;;EAED;IAEC;;;AAGF;EACC;EACA;EACA;;;AAKD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC","file":"inputs.css"}

core/css/inputs.scss

@@ -44,11 +44,10 @@ div[contenteditable=false] {
 
 /* Default global values */
 div.select2-drop .select2-search input, // TODO: REMOVE WHEN DROPPING SELECT2
-select,
+input[type='submit'],
+input[type='button'],
+input[type='reset'],
 button:not(.button-vue), .button,
-input:not([type='range']),
-textarea,
-div[contenteditable=true],
 .pager li a {
 	margin: 3px 3px 3px 0;
 	padding: 7px 14px;
@@ -180,7 +179,8 @@ button:not(.button-vue), .button,
 input[type='button'],
 input[type='submit'],
 input[type='reset'] {
-	padding: 6px 11px;
+	padding: 8px 14px;
+	font-size: var(--default-font-size);
 	width: auto;
 	min-height: $default-height;
 	cursor: pointer;
@@ -191,6 +191,43 @@ input[type='reset'] {
 		cursor: default;
 	}
 }
+
+input:not([type='range']):not(.input-field__input):not([type='submit']):not([type='button']):not([type='reset']):not(.multiselect__input),
+select,
+div[contenteditable=true],
+textarea {
+	margin: 3px 3px 3px 0;
+	padding: 0 12px;
+	font-size: var(--default-font-size);
+	background-color: var(--color-main-background);
+	color: var(--color-main-text);
+	border: 2px solid var(--color-border-dark);
+	height: 36px;
+	outline: none;
+	border-radius: var(--border-radius-large);
+	text-overflow: ellipsis;
+	cursor: pointer;
+	&:not(:disabled):hover, &:not(:disabled):focus, &:not(:disabled):active {
+		border-color: var(--color-primary-element);
+	}
+	&:not(:disabled):focus {
+		cursor: text;
+	}
+}
+
+textarea, div[contenteditable=true] {
+	padding: 12px;
+	height: auto;
+}
+
+/* Override the ugly select arrow */
+select {
+	background: var(--icon-triangle-s-dark) no-repeat right 8px center;
+	appearance: none;
+	background-color: var(--color-main-background);
+	padding-right: 28px !important;
+}
+
 select,
 button:not(.button-vue), .button {
 	* {
@@ -235,40 +272,6 @@ button:not(.button-vue):not(.action-button), .button {
 	}
 }
 
-textarea, div[contenteditable=true] {
-	color: var(--color-main-text);
-	cursor: text;
-	font-family: inherit;
-	height: auto;
-	&:not(:disabled) {
-		&:active,
-		&:hover,
-		&:focus {
-			border-color: var(--color-background-darker) !important;
-			background-color: var(--color-main-background) !important;
-		}
-	}
-}
-
-div[contenteditable=false] {
-	color: var(--color-text-lighter);
-	font-family: inherit;
-	height: auto;
-}
-
-/* Override the ugly select arrow */
-select {
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-	background: var(--icon-triangle-s-dark) no-repeat right 4px center;
-	background-color: inherit;
-	outline: 0;
-	padding-right: 24px !important;
-	// force height for inline elements like inputs (not textarea, contenteditable...)
-	height: $default-height;
-}
-
 /* Confirm inputs */
 input {
 	&[type='text'],

core/css/server.css

@@ -1264,11 +1264,10 @@ div[contenteditable=false] {
  */
 /* Default global values */
 div.select2-drop .select2-search input,
-select,
+input[type=submit],
+input[type=button],
+input[type=reset],
 button:not(.button-vue), .button,
-input:not([type=range]),
-textarea,
-div[contenteditable=true],
 .pager li a {
   margin: 3px 3px 3px 0;
   padding: 7px 14px;
@@ -1282,21 +1281,18 @@ div[contenteditable=true],
   /* Primary action button, use sparingly */
 }
 div.select2-drop .select2-search input:not(:disabled):not(.primary):hover, div.select2-drop .select2-search input:not(:disabled):not(.primary):focus, div.select2-drop .select2-search input:not(:disabled):not(.primary).active,
-select:not(:disabled):not(.primary):hover,
-select:not(:disabled):not(.primary):focus,
-select:not(:disabled):not(.primary).active,
+input[type=submit]:not(:disabled):not(.primary):hover,
+input[type=submit]:not(:disabled):not(.primary):focus,
+input[type=submit]:not(:disabled):not(.primary).active,
+input[type=button]:not(:disabled):not(.primary):hover,
+input[type=button]:not(:disabled):not(.primary):focus,
+input[type=button]:not(:disabled):not(.primary).active,
+input[type=reset]:not(:disabled):not(.primary):hover,
+input[type=reset]:not(:disabled):not(.primary):focus,
+input[type=reset]:not(:disabled):not(.primary).active,
 button:not(.button-vue):not(:disabled):not(.primary):hover,
 button:not(.button-vue):not(:disabled):not(.primary):focus,
 button:not(.button-vue):not(:disabled):not(.primary).active, .button:not(:disabled):not(.primary):hover, .button:not(:disabled):not(.primary):focus, .button:not(:disabled):not(.primary).active,
-input:not([type=range]):not(:disabled):not(.primary):hover,
-input:not([type=range]):not(:disabled):not(.primary):focus,
-input:not([type=range]):not(:disabled):not(.primary).active,
-textarea:not(:disabled):not(.primary):hover,
-textarea:not(:disabled):not(.primary):focus,
-textarea:not(:disabled):not(.primary).active,
-div[contenteditable=true]:not(:disabled):not(.primary):hover,
-div[contenteditable=true]:not(:disabled):not(.primary):focus,
-div[contenteditable=true]:not(:disabled):not(.primary).active,
 .pager li a:not(:disabled):not(.primary):hover,
 .pager li a:not(:disabled):not(.primary):focus,
 .pager li a:not(:disabled):not(.primary).active {
@@ -1305,31 +1301,28 @@ div[contenteditable=true]:not(:disabled):not(.primary).active,
   outline: none;
 }
 div.select2-drop .select2-search input:not(:disabled):not(.primary):active,
-select:not(:disabled):not(.primary):active,
+input[type=submit]:not(:disabled):not(.primary):active,
+input[type=button]:not(:disabled):not(.primary):active,
+input[type=reset]:not(:disabled):not(.primary):active,
 button:not(.button-vue):not(:disabled):not(.primary):active, .button:not(:disabled):not(.primary):active,
-input:not([type=range]):not(:disabled):not(.primary):active,
-textarea:not(:disabled):not(.primary):active,
-div[contenteditable=true]:not(:disabled):not(.primary):active,
 .pager li a:not(:disabled):not(.primary):active {
   outline: none;
   background-color: var(--color-main-background);
   color: var(--color-text-light);
 }
 div.select2-drop .select2-search input:not(:disabled):not(.primary):focus-visible,
-select:not(:disabled):not(.primary):focus-visible,
+input[type=submit]:not(:disabled):not(.primary):focus-visible,
+input[type=button]:not(:disabled):not(.primary):focus-visible,
+input[type=reset]:not(:disabled):not(.primary):focus-visible,
 button:not(.button-vue):not(:disabled):not(.primary):focus-visible, .button:not(:disabled):not(.primary):focus-visible,
-input:not([type=range]):not(:disabled):not(.primary):focus-visible,
-textarea:not(:disabled):not(.primary):focus-visible,
-div[contenteditable=true]:not(:disabled):not(.primary):focus-visible,
 .pager li a:not(:disabled):not(.primary):focus-visible {
   box-shadow: 0 0 0 2px var(--color-primary);
 }
 div.select2-drop .select2-search input:disabled,
-select:disabled,
+input[type=submit]:disabled,
+input[type=button]:disabled,
+input[type=reset]:disabled,
 button:not(.button-vue):disabled, .button:disabled,
-input:not([type=range]):disabled,
-textarea:disabled,
-div[contenteditable=true]:disabled,
 .pager li a:disabled {
   background-color: var(--color-background-dark);
   color: var(--color-main-text);
@@ -1337,29 +1330,26 @@ div[contenteditable=true]:disabled,
   opacity: 0.5;
 }
 div.select2-drop .select2-search input:required,
-select:required,
+input[type=submit]:required,
+input[type=button]:required,
+input[type=reset]:required,
 button:not(.button-vue):required, .button:required,
-input:not([type=range]):required,
-textarea:required,
-div[contenteditable=true]:required,
 .pager li a:required {
   box-shadow: none;
 }
 div.select2-drop .select2-search input:user-invalid,
-select:user-invalid,
+input[type=submit]:user-invalid,
+input[type=button]:user-invalid,
+input[type=reset]:user-invalid,
 button:not(.button-vue):user-invalid, .button:user-invalid,
-input:not([type=range]):user-invalid,
-textarea:user-invalid,
-div[contenteditable=true]:user-invalid,
 .pager li a:user-invalid {
   box-shadow: 0 0 0 2px var(--color-error) !important;
 }
 div.select2-drop .select2-search input.primary,
-select.primary,
+input[type=submit].primary,
+input[type=button].primary,
+input[type=reset].primary,
 button:not(.button-vue).primary, .button.primary,
-input:not([type=range]).primary,
-textarea.primary,
-div[contenteditable=true].primary,
 .pager li a.primary {
   background-color: var(--color-primary-element);
   border-color: var(--color-primary-element);
@@ -1368,36 +1358,31 @@ div[contenteditable=true].primary,
   /* Apply border to primary button if on log in page (and not in a dark container) or if in header */
 }
 #body-login :not(.body-login-container) div.select2-drop .select2-search input.primary, #header div.select2-drop .select2-search input.primary,
-#body-login :not(.body-login-container) select.primary,
-#header select.primary,
+#body-login :not(.body-login-container) input[type=submit].primary,
+#header input[type=submit].primary,
+#body-login :not(.body-login-container) input[type=button].primary,
+#header input[type=button].primary,
+#body-login :not(.body-login-container) input[type=reset].primary,
+#header input[type=reset].primary,
 #body-login :not(.body-login-container) button:not(.button-vue).primary,
 #header button:not(.button-vue).primary, #body-login :not(.body-login-container) .button.primary, #header .button.primary,
-#body-login :not(.body-login-container) input:not([type=range]).primary,
-#header input:not([type=range]).primary,
-#body-login :not(.body-login-container) textarea.primary,
-#header textarea.primary,
-#body-login :not(.body-login-container) div[contenteditable=true].primary,
-#header div[contenteditable=true].primary,
 #body-login :not(.body-login-container) .pager li a.primary,
 #header .pager li a.primary {
   border-color: var(--color-primary-text);
 }
 div.select2-drop .select2-search input.primary:not(:disabled):hover, div.select2-drop .select2-search input.primary:not(:disabled):focus, div.select2-drop .select2-search input.primary:not(:disabled):active,
-select.primary:not(:disabled):hover,
-select.primary:not(:disabled):focus,
-select.primary:not(:disabled):active,
+input[type=submit].primary:not(:disabled):hover,
+input[type=submit].primary:not(:disabled):focus,
+input[type=submit].primary:not(:disabled):active,
+input[type=button].primary:not(:disabled):hover,
+input[type=button].primary:not(:disabled):focus,
+input[type=button].primary:not(:disabled):active,
+input[type=reset].primary:not(:disabled):hover,
+input[type=reset].primary:not(:disabled):focus,
+input[type=reset].primary:not(:disabled):active,
 button:not(.button-vue).primary:not(:disabled):hover,
 button:not(.button-vue).primary:not(:disabled):focus,
 button:not(.button-vue).primary:not(:disabled):active, .button.primary:not(:disabled):hover, .button.primary:not(:disabled):focus, .button.primary:not(:disabled):active,
-input:not([type=range]).primary:not(:disabled):hover,
-input:not([type=range]).primary:not(:disabled):focus,
-input:not([type=range]).primary:not(:disabled):active,
-textarea.primary:not(:disabled):hover,
-textarea.primary:not(:disabled):focus,
-textarea.primary:not(:disabled):active,
-div[contenteditable=true].primary:not(:disabled):hover,
-div[contenteditable=true].primary:not(:disabled):focus,
-div[contenteditable=true].primary:not(:disabled):active,
 .pager li a.primary:not(:disabled):hover,
 .pager li a.primary:not(:disabled):focus,
 .pager li a.primary:not(:disabled):active {
@@ -1405,35 +1390,31 @@ div[contenteditable=true].primary:not(:disabled):active,
   border-color: var(--color-primary-element-hover);
 }
 div.select2-drop .select2-search input.primary:not(:disabled):focus, div.select2-drop .select2-search input.primary:not(:disabled):focus-visible,
-select.primary:not(:disabled):focus,
-select.primary:not(:disabled):focus-visible,
+input[type=submit].primary:not(:disabled):focus,
+input[type=submit].primary:not(:disabled):focus-visible,
+input[type=button].primary:not(:disabled):focus,
+input[type=button].primary:not(:disabled):focus-visible,
+input[type=reset].primary:not(:disabled):focus,
+input[type=reset].primary:not(:disabled):focus-visible,
 button:not(.button-vue).primary:not(:disabled):focus,
 button:not(.button-vue).primary:not(:disabled):focus-visible, .button.primary:not(:disabled):focus, .button.primary:not(:disabled):focus-visible,
-input:not([type=range]).primary:not(:disabled):focus,
-input:not([type=range]).primary:not(:disabled):focus-visible,
-textarea.primary:not(:disabled):focus,
-textarea.primary:not(:disabled):focus-visible,
-div[contenteditable=true].primary:not(:disabled):focus,
-div[contenteditable=true].primary:not(:disabled):focus-visible,
 .pager li a.primary:not(:disabled):focus,
 .pager li a.primary:not(:disabled):focus-visible {
   box-shadow: 0 0 0 2px var(--color-main-text);
 }
 div.select2-drop .select2-search input.primary:not(:disabled):active,
-select.primary:not(:disabled):active,
+input[type=submit].primary:not(:disabled):active,
+input[type=button].primary:not(:disabled):active,
+input[type=reset].primary:not(:disabled):active,
 button:not(.button-vue).primary:not(:disabled):active, .button.primary:not(:disabled):active,
-input:not([type=range]).primary:not(:disabled):active,
-textarea.primary:not(:disabled):active,
-div[contenteditable=true].primary:not(:disabled):active,
 .pager li a.primary:not(:disabled):active {
   color: var(--color-primary-text-dark);
 }
 div.select2-drop .select2-search input.primary:disabled,
-select.primary:disabled,
+input[type=submit].primary:disabled,
+input[type=button].primary:disabled,
+input[type=reset].primary:disabled,
 button:not(.button-vue).primary:disabled, .button.primary:disabled,
-input:not([type=range]).primary:disabled,
-textarea.primary:disabled,
-div[contenteditable=true].primary:disabled,
 .pager li a.primary:disabled {
   background-color: var(--color-primary-element);
   color: var(--color-primary-text-dark);
@@ -1490,7 +1471,8 @@ button:not(.button-vue), .button,
 input[type=button],
 input[type=submit],
 input[type=reset] {
-  padding: 6px 11px;
+  padding: 8px 14px;
+  font-size: var(--default-font-size);
   width: auto;
   min-height: 44px;
   cursor: pointer;
@@ -1505,6 +1487,54 @@ input[type=reset]:disabled {
   cursor: default;
 }
 
+input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input),
+select,
+div[contenteditable=true],
+textarea {
+  margin: 3px 3px 3px 0;
+  padding: 0 12px;
+  font-size: var(--default-font-size);
+  background-color: var(--color-main-background);
+  color: var(--color-main-text);
+  border: 2px solid var(--color-border-dark);
+  height: 36px;
+  outline: none;
+  border-radius: var(--border-radius-large);
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(:disabled):hover, input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(:disabled):focus, input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(:disabled):active,
+select:not(:disabled):hover,
+select:not(:disabled):focus,
+select:not(:disabled):active,
+div[contenteditable=true]:not(:disabled):hover,
+div[contenteditable=true]:not(:disabled):focus,
+div[contenteditable=true]:not(:disabled):active,
+textarea:not(:disabled):hover,
+textarea:not(:disabled):focus,
+textarea:not(:disabled):active {
+  border-color: var(--color-primary-element);
+}
+input:not([type=range]):not(.input-field__input):not([type=submit]):not([type=button]):not([type=reset]):not(.multiselect__input):not(:disabled):focus,
+select:not(:disabled):focus,
+div[contenteditable=true]:not(:disabled):focus,
+textarea:not(:disabled):focus {
+  cursor: text;
+}
+
+textarea, div[contenteditable=true] {
+  padding: 12px;
+  height: auto;
+}
+
+/* Override the ugly select arrow */
+select {
+  background: var(--icon-triangle-s-dark) no-repeat right 8px center;
+  appearance: none;
+  background-color: var(--color-main-background);
+  padding-right: 28px !important;
+}
+
 select *,
 button:not(.button-vue) *, .button * {
   cursor: pointer;
@@ -1547,35 +1577,6 @@ button:not(.button-vue):not(.action-button) > span[class^=icon-], button:not(.bu
   opacity: 0.5;
 }
 
-textarea, div[contenteditable=true] {
-  color: var(--color-main-text);
-  cursor: text;
-  font-family: inherit;
-  height: auto;
-}
-textarea:not(:disabled):active, textarea:not(:disabled):hover, textarea:not(:disabled):focus, div[contenteditable=true]:not(:disabled):active, div[contenteditable=true]:not(:disabled):hover, div[contenteditable=true]:not(:disabled):focus {
-  border-color: var(--color-background-darker) !important;
-  background-color: var(--color-main-background) !important;
-}
-
-div[contenteditable=false] {
-  color: var(--color-text-lighter);
-  font-family: inherit;
-  height: auto;
-}
-
-/* Override the ugly select arrow */
-select {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: var(--icon-triangle-s-dark) no-repeat right 4px center;
-  background-color: inherit;
-  outline: 0;
-  padding-right: 24px !important;
-  height: 44px;
-}
-
 /* Confirm inputs */
 input[type=text], input[type=password], input[type=email] {
   /* only show confirm borders if input is not focused */