aboutsummaryrefslogtreecommitdiffstats
path: root/core/css/inputs.scss
diff options
context:
space:
mode:
Diffstat (limited to 'core/css/inputs.scss')
-rw-r--r--core/css/inputs.scss460
1 files changed, 250 insertions, 210 deletions
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 7c0733582d5..27136b69ad4 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -1,31 +1,26 @@
-/**
- * @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
- * @copyright Copyright (c) 2016, Morris Jobke <hey@morrisjobke.de>
- * @copyright Copyright (c) 2016, Joas Schilling <coding@schilljs.com>
- * @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net>
- * @copyright Copyright (c) 2016, jowi <sjw@gmx.ch>
- * @copyright Copyright (c) 2015, Joas Schilling <nickvergessen@owncloud.com>
- * @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de>
- * @copyright Copyright (c) 2014-2017, Jan-Christoph Borchardt <hey@jancborchardt.net>
- *
- * @license GNU AGPL version 3 or any later version
- *
+/*!
+ * SPDX-FileCopyrightText: 2016-2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-FileCopyrightText: 2016 ownCloud, Inc.
+ * SPDX-License-Identifier: AGPL-3.0-or-later
*/
@use 'variables';
-@import 'functions';
+@use 'sass:color';
+@use 'functions';
/* Specifically override browser styles */
input, textarea, select, button, div[contenteditable=true], div[contenteditable=false] {
font-family: var(--font-face);
}
+
.select2-container-multi .select2-choices .select2-search-field input, .select2-search input, .ui-widget {
font-family: var(--font-face) !important;
}
+
.select2-container.select2-drop-above .select2-choice {
- background-image: unset !important;
+ background-image: unset !important;
}
-$default-height: 36px;
+$opacity-disabled: .7;
/* Simple selector to allow easy overriding */
select,
@@ -39,18 +34,29 @@ textarea,
div[contenteditable=true],
div[contenteditable=false] {
width: 130px;
- min-height: $default-height;
+ min-height: var(--default-clickable-area);
box-sizing: border-box;
}
/**
- * color-text-lighter normal state
- * color-text-lighter active state
- * color-text-maxcontrast disabled state
+ * color-main-text normal state
+ * color-main-text active state
+ * color-text-maxcontrast disabled state
*/
+button:not(.button-vue),
+input:not([type='range']),
+textarea {
+ &:disabled {
+ cursor: default;
+ color: var(--color-text-maxcontrast);
+ border-color: var(--color-border-dark);
+ opacity: $opacity-disabled;
+ }
+}
+
input:not([type="range"]) {
- outline: none;
+ outline: none;
}
/* Default global values */
@@ -65,7 +71,6 @@ button:not(
.button,
.pager li a {
padding: 7px 14px;
- font-size: 13px;
background-color: var(--color-main-background);
color: var(--color-main-text);
border: 1px solid var(--color-border-dark);
@@ -74,7 +79,8 @@ button:not(
border-radius: var(--border-radius);
cursor: text;
&:not(.app-navigation-entry-button) {
- margin: 3px 3px 3px 0;
+ margin: 3px;
+ margin-inline-start: 0;
}
&:not(
:disabled,
@@ -85,13 +91,13 @@ button:not(
&:focus,
&.active {
/* active class used for multiselect */
- border-color: var(--color-primary-element);
+ border-color: var(--color-main-text);
outline: none;
}
&:active {
outline: none;
background-color: var(--color-main-background);
- color: var(--color-text-light);
+ color: var(--color-main-text);
}
}
&:focus-visible {
@@ -149,17 +155,16 @@ button:not(
}
div[contenteditable=false] {
- margin: 3px 3px 3px 0;
+ margin: 3px;
+ margin-inline-start: 0;
padding: 7px 6px;
font-size: 13px;
- background-color: var(--color-main-background);
- color: var(--color-text-lighter);
border: 1px solid var(--color-background-darker);
outline: none;
border-radius: var(--border-radius);
background-color: var(--color-background-dark);
- color: var(--color-text-lighter);
+ color: var(--color-text-maxcontrast);
cursor: default;
opacity: 0.5;
}
@@ -169,8 +174,9 @@ input {
&:not([type='radio']):not([type='checkbox']):not([type='range']):not([type='submit']):not([type='button']):not([type='reset']):not([type='color']):not([type='file']):not([type='image']) {
-webkit-appearance: textfield;
-moz-appearance: textfield;
+ appearance: textfield;
// force height for inline elements like inputs (not textarea, contenteditable...)
- height: $default-height;
+ height: var(--default-clickable-area);
}
&[type='radio'],
&[type='checkbox'],
@@ -207,13 +213,20 @@ button:not(
input[type='button'],
input[type='submit'],
input[type='reset'] {
- padding: 8px 14px;
+ padding: calc((var(--default-clickable-area) - 1lh) / 2) calc(3 * var(--default-grid-baseline));
font-size: var(--default-font-size);
width: auto;
- min-height: $default-height;
+ min-height: var(--default-clickable-area);
cursor: pointer;
box-sizing: border-box;
- background-color: var(--color-background-dark);
+ color: var(--color-primary-element-light-text);
+ background-color: var(--color-primary-element-light);
+ border: none;
+
+ &:hover,
+ &:focus {
+ background-color: var(--color-primary-element-light-hover);
+ }
&:disabled {
cursor: default;
@@ -234,7 +247,8 @@ input:not(
select,
div[contenteditable=true],
textarea {
- margin: 3px 3px 3px 0;
+ margin: 3px;
+ margin-inline-start: 0;
padding: 0 12px;
font-size: var(--default-font-size);
background-color: var(--color-main-background);
@@ -266,10 +280,18 @@ textarea, div[contenteditable=true] {
/* Override the ugly select arrow */
select {
- background: var(--icon-triangle-s-dark) no-repeat right 8px center;
+ background: var(--icon-triangle-s-dark) no-repeat;
appearance: none;
background-color: var(--color-main-background);
- padding-right: 28px !important;
+ padding-inline-end: 28px !important;
+}
+
+body[dir='ltr'] select {
+ background-position: right 8px center;
+}
+
+body[dir='rtl'] select {
+ background-position: left 8px center;
}
select,
@@ -299,7 +321,7 @@ input[type='button'],
input[type='submit'],
input[type='reset'] {
font-weight: bold;
- border-radius: var(--border-radius-pill);
+ border-radius: var(--border-radius-element);
/* Get rid of the inside dotted line in Firefox */
&::-moz-focus-inner {
@@ -310,8 +332,13 @@ input[type='reset'] {
background-color: var(--color-error) !important;
border-color: var(--color-error) !important;
color: #fff !important;
+ &:hover{
+ background-color: var(--color-error-hover) !important;
+ border-color: var(--color-main-text) !important;
+ }
}
}
+
button:not(
.button-vue,
.action-button,
@@ -330,60 +357,58 @@ button:not(
}
/* Confirm inputs */
-input {
- &[type='text'],
- &[type='password'],
- &[type='email'] {
- + .icon-confirm {
- margin-left: -13px !important;
- border-left-color: transparent !important;
- border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0 !important;
- border-width: 2px;
- background-clip: padding-box;
- /* Avoid background under border */
- background-color: var(--color-main-background) !important;
- opacity: 1;
- height: $default-height;
- width: $default-height;
- padding: 7px 6px;
- cursor: pointer;
- margin-right: 0;
- &:disabled {
- cursor: default;
- @include icon-color('confirm-fade', 'actions', variables.$color-black, 2, true);
- }
+input[type='text'],
+input[type='password'],
+input[type='email'] {
+ + .icon-confirm {
+ margin-inline-start: -13px !important;
+ border-inline-start-color: transparent !important;
+ border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0 !important;
+ border-width: 2px;
+ background-clip: padding-box;
+ /* Avoid background under border */
+ background-color: var(--color-main-background) !important;
+ opacity: 1;
+ height: var(--default-clickable-area);
+ width: var(--default-clickable-area);
+ padding: 7px 6px;
+ cursor: pointer;
+ margin-inline-end: 0;
+ &:disabled {
+ cursor: default;
+ @include functions.icon-color('confirm-fade', 'actions', variables.$color-black, 2, true);
}
+ }
- /* only show confirm borders if input is not focused */
- &:not(:active):not(:hover):not(:focus){
- &:invalid {
- + .icon-confirm {
- border-color: var(--color-error);
- }
- }
+ /* only show confirm borders if input is not focused */
+ &:not(:active):not(:hover):not(:focus){
+ &:invalid {
+ .icon-confirm {
- &:active,
- &:hover,
- &:focus {
- border-color: var(--color-primary-element) !important;
- border-radius: var(--border-radius) !important;
- &:disabled {
- border-color: var(--color-background-darker) !important;
- }
- }
+ border-color: var(--color-error);
}
}
- &:active,
- &:hover,
- &:focus {
- + .icon-confirm {
+ + .icon-confirm {
+ &:active,
+ &:hover,
+ &:focus {
border-color: var(--color-primary-element) !important;
- border-left-color: transparent !important;
- /* above previous input */
- z-index: 2;
+ border-radius: var(--border-radius) !important;
+ &:disabled {
+ border-color: var(--color-background-darker) !important;
+ }
}
}
}
+ &:active,
+ &:hover,
+ &:focus {
+ + .icon-confirm {
+ border-color: var(--color-primary-element) !important;
+ border-inline-start-color: transparent !important;
+ /* above previous input */
+ z-index: 2;
+ }
+ }
}
@@ -392,6 +417,7 @@ button img,
.button img {
cursor: pointer;
}
+
select,
.button.multiselect {
font-weight: normal;
@@ -401,123 +427,122 @@ select,
$checkbox-radio-size: 14px;
$color-checkbox-radio-white: #fff;
-input {
- &[type='checkbox'],
- &[type='radio'] {
- &.radio,
- &.checkbox {
- position: absolute;
- left: -10000px;
- top: auto;
- width: 1px;
- height: 1px;
- overflow: hidden;
- + label {
- user-select: none;
- }
- &:disabled + label,
- &:disabled + label:before {
- cursor: default;
- }
- + label:before {
- content: '';
- display: inline-block;
- height: $checkbox-radio-size;
- width: $checkbox-radio-size;
- vertical-align: middle;
- border-radius: 50%;
- margin: 0 6px 3px 3px;
- border: 1px solid var(--color-text-lighter);
- }
- &:not(:disabled):not(:checked) + label:hover:before,
- &:focus + label:before {
- border-color: var(--color-primary-element);
- }
- &:focus-visible + label {
- outline-style: solid;
- outline-color: var(--color-main-text);
- outline-width: 1px;
- outline-offset: 2px;
- }
- &:checked + label:before,
- &.checkbox:indeterminate + label:before {
- /* ^ :indeterminate have a strange behavior on radio,
- so we respecified the checkbox class again to be safe */
- box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
- background-color: var(--color-primary-element);
- border-color: var(--color-primary-element);
- }
- &:disabled + label:before {
- border: 1px solid var(--color-text-lighter);
- background-color: var(--color-text-maxcontrast) !important; /* override other status */
- }
- &:checked:disabled + label:before {
- background-color: var(--color-text-maxcontrast);
- }
+input[type='checkbox'],
+input[type='radio'] {
+ &.radio,
+ &.checkbox {
+ position: absolute;
+ inset-inline-start: -10000px;
+ top: auto;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ + label {
+ user-select: none;
+ }
+ &:disabled + label,
+ &:disabled + label:before {
+ cursor: default;
+ }
+ + label:before {
+ content: '';
+ display: inline-block;
+ height: $checkbox-radio-size;
+ width: $checkbox-radio-size;
+ vertical-align: middle;
+ border-radius: 50%;
+ margin: 0 3px;
+ margin-inline: 3px 6px;
+ border: 1px solid var(--color-text-maxcontrast);
+ }
+ &:not(:disabled):not(:checked) + label:hover:before,
+ &:focus + label:before {
+ border-color: var(--color-primary-element);
+ }
+ &:focus-visible + label {
+ outline-style: solid;
+ outline-color: var(--color-main-text);
+ outline-width: 1px;
+ outline-offset: 2px;
+ }
+ &:checked + label:before,
+ &.checkbox:indeterminate + label:before {
+ /* ^ :indeterminate have a strange behavior on radio,
+ so we respecified the checkbox class again to be safe */
+ box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
+ background-color: var(--color-primary-element);
+ border-color: var(--color-primary-element);
+ }
+ &:disabled + label:before {
+ border: 1px solid var(--color-text-maxcontrast);
+ background-color: var(--color-text-maxcontrast) !important; /* override other status */
+ }
+ &:checked:disabled + label:before {
+ background-color: var(--color-text-maxcontrast);
+ }
- // Detail description below label of checkbox or radio button
- & + label ~ em {
- display: inline-block;
- margin-left: 25px;
- }
- & + label ~ em:last-of-type {
- margin-bottom: $checkbox-radio-size;
- }
+ // Detail description below label of checkbox or radio button
+ & + label ~ em {
+ display: inline-block;
+ margin-inline-start: 25px;
}
- &.checkbox {
- + label:before {
- border-radius: 1px;
- height: $checkbox-radio-size;
- width: $checkbox-radio-size;
- box-shadow: none !important;
- background-position: center;
- }
- &:checked + label:before {
- background-image: url('../img/actions/checkbox-mark.svg');
- }
- &:indeterminate + label:before {
- background-image: url('../img/actions/checkbox-mixed.svg');
- }
+ & + label ~ em:last-of-type {
+ margin-bottom: $checkbox-radio-size;
+ }
+ }
+ &.checkbox {
+ + label:before {
+ border-radius: 1px;
+ height: $checkbox-radio-size;
+ width: $checkbox-radio-size;
+ box-shadow: none !important;
+ background-position: center;
+ }
+ &:checked + label:before {
+ background-image: url('../img/actions/checkbox-mark.svg');
+ }
+ &:indeterminate + label:before {
+ background-image: url('../img/actions/checkbox-mixed.svg');
}
+ }
- /* We do not use the variables as we keep the colours as white for this variant */
- &.radio--white,
- &.checkbox--white {
- + label:before,
- &:focus + label:before {
- border-color: darken($color-checkbox-radio-white, 27%);
- }
- &:not(:disabled):not(:checked) + label:hover:before {
- border-color: $color-checkbox-radio-white;
- }
- &:checked + label:before {
- box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
- background-color: darken($color-checkbox-radio-white, 14%);
- border-color: darken($color-checkbox-radio-white, 14%);
- }
- &:disabled + label:before {
- background-color: darken($color-checkbox-radio-white, 27%) !important; /* override other status */
- border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
- }
- &:checked:disabled + label:before {
- box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
- border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
- background-color: darken($color-checkbox-radio-white, 27%);
- }
+ /* We do not use the variables as we keep the colours as white for this variant */
+ &.radio--white,
+ &.checkbox--white {
+ + label:before,
+ &:focus + label:before {
+ border-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl);
}
- &.checkbox--white {
- &:checked + label:before,
- &:indeterminate + label:before {
- background-color: transparent !important; /* Override default checked */
- border-color: $color-checkbox-radio-white !important; /* Override default checked */
- background-image: url('../img/actions/checkbox-mark-white.svg');
- }
- &:indeterminate + label:before {
- background-image: url('../img/actions/checkbox-mixed-white.svg');
- }
- &:disabled + label:before {
- opacity: 0.7; /* No other choice for white background image */
- }
+ &:not(:disabled):not(:checked) + label:hover:before {
+ border-color: $color-checkbox-radio-white;
+ }
+ &:checked + label:before {
+ box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
+ background-color: color.adjust($color-checkbox-radio-white, $lightness: -14%, $space: hsl);
+ border-color: color.adjust($color-checkbox-radio-white, $lightness: -14%, $space: hsl);
+ }
+ &:disabled + label:before {
+ background-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl) !important; /* override other status */
+ border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
+ }
+ &:checked:disabled + label:before {
+ box-shadow: inset 0px 0px 0px 2px var(--color-main-background);
+ border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
+ background-color: color.adjust($color-checkbox-radio-white, $lightness: -27%, $space: hsl);
+ }
+ }
+ &.checkbox--white {
+ &:checked + label:before,
+ &:indeterminate + label:before {
+ background-color: transparent !important; /* Override default checked */
+ border-color: $color-checkbox-radio-white !important; /* Override default checked */
+ background-image: url('../img/actions/checkbox-mark-white.svg');
+ }
+ &:indeterminate + label:before {
+ background-image: url('../img/actions/checkbox-mixed-white.svg');
+ }
+ &:disabled + label:before {
+ opacity: 0.7; /* No other choice for white background image */
}
}
}
@@ -531,7 +556,7 @@ div.select2-drop {
}
.avatar {
display: inline-block;
- margin-right: 8px;
+ margin-inline-end: 8px;
vertical-align: middle;
img {
cursor: pointer;
@@ -539,7 +564,7 @@ div.select2-drop {
}
.select2-search input {
min-height: auto;
- background: var(--icon-search-dark) no-repeat right center !important;
+ background: var(--icon-search-dark) no-repeat !important;
background-origin: content-box !important;
}
.select2-results {
@@ -566,7 +591,7 @@ div.select2-drop {
padding: 12px;
background-color: transparent;
cursor: pointer;
- color: var(--color-text-lighter);
+ color: var(--color-text-maxcontrast);
}
.select2-result {
&.select2-selected {
@@ -579,6 +604,15 @@ div.select2-drop {
}
}
}
+
+body[dir='ltr'] div.select2-drop .select2-search input {
+ background-position: right center !important;
+}
+
+body[dir='rtl'] div.select2-drop .select2-search input {
+ background-position: left center !important;
+}
+
.select2-chosen,
#select2-drop {
.avatar,
@@ -586,6 +620,7 @@ div.select2-drop {
cursor: pointer;
}
}
+
div.select2-container-multi {
.select2-choices,
&.select2-container-active .select2-choices {
@@ -593,7 +628,7 @@ div.select2-container-multi {
white-space: nowrap;
text-overflow: ellipsis;
background: var(--color-main-background);
- color: var(--color-text-lighter) !important;
+ color: var(--color-text-maxcontrast) !important;
box-sizing: content-box;
border-radius: var(--border-radius-large);
border: 2px solid var(--color-border-dark);
@@ -605,14 +640,14 @@ div.select2-container-multi {
}
.select2-search-choice {
line-height: 20px;
- padding-left: 5px;
+ padding-inline-start: 5px;
&.select2-search-choice-focus,
&:hover,
&:active,
& {
background-image: none;
background-color: var(--color-main-background);
- color: var(--color-text-lighter);
+ color: var(--color-text-maxcontrast);
border: 1px solid var(--color-border-dark);
}
.select2-search-choice-close {
@@ -630,8 +665,10 @@ div.select2-container-multi {
}
}
}
+
div.select2-container {
- margin: 3px 3px 3px 0;
+ margin: 3px;
+ margin-inline-start: 0;
&.select2-container-multi .select2-choices {
display: flex;
flex-wrap: wrap;
@@ -644,7 +681,7 @@ div.select2-container {
white-space: nowrap;
text-overflow: ellipsis;
background: var(--color-main-background);
- color: var(--color-text-lighter) !important;
+ color: var(--color-text-maxcontrast) !important;
box-sizing: content-box;
border-radius: var(--border-radius-large);
border: 2px solid var(--color-border-dark);
@@ -656,7 +693,7 @@ div.select2-container {
}
.select2-search-choice {
line-height: 20px;
- padding-left: 5px;
+ padding-inline-start: 5px;
background-image: none;
background-color: var(--color-background-dark);
border-color: var(--color-background-dark);
@@ -691,22 +728,23 @@ div.select2-container {
/* Vue v-select */
.v-select {
- margin: 3px 3px 3px 0;
+ margin: 3px;
+ margin-inline-start: 0;
display: inline-block;
.dropdown-toggle {
display: flex !important;
flex-wrap: wrap;
.selected-tag {
line-height: 20px;
- padding-left: 5px;
+ padding-inline-start: 5px;
background-image: none;
background-color: var(--color-main-background);
- color: var(--color-text-lighter);
+ color: var(--color-text-maxcontrast);
border: 1px solid var(--color-border-dark);
display: inline-flex;
align-items: center;
.close {
- margin-left: 3px;
+ margin-inline-start: 3px;
}
}
}
@@ -718,13 +756,14 @@ div.select2-container {
display: list-item;
background-color: transparent;
cursor: pointer;
- color: var(--color-text-lighter);
+ color: var(--color-text-maxcontrast);
a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 25px;
- padding: 3px 7px 4px 2px;
+ padding-block: 3px 4px;
+ padding-inline: 2px 7px;
margin: 0;
cursor: pointer;
min-height: 1em;
@@ -746,7 +785,7 @@ div.select2-container {
min-height: 16px;
display: block;
opacity: 0.5;
- margin-right: 5px;
+ margin-inline-end: 5px;
visibility: hidden;
}
}
@@ -818,6 +857,7 @@ progress:not(.vue) {
transform: translate(4px);
}
}
+
.shake {
animation-name: shake;
animation-duration: .7s;
@@ -828,7 +868,7 @@ progress:not(.vue) {
// Same as .hidden-visually
label.infield {
position: absolute;
- left: -10000px;
+ inset-inline-start: -10000px;
top: -10000px;
width: 1px;
height: 1px;
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-14 17:32:35 +0000