@nextcloud/vue/dist/assets/NcActionInput-BxRA_Skn.css

Nextcloud vue components

/**
 * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */
/**
 * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */
/*
* Ensure proper alignment of the vue material icons
*/
.material-design-icon[data-v-67b3d681] {
  display: flex;
  align-self: center;
  justify-self: center;
  align-items: center;
  justify-content: center;
}

/**
 * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */
/* Default global values */
button[data-v-67b3d681]:not(.button-vue),
input[data-v-67b3d681]:not([type=range]),
textarea[data-v-67b3d681] {
  margin: 0;
  padding: 7px 6px;
  cursor: text;
  color: var(--color-main-text);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--border-radius-element);
  outline: none;
  background-color: var(--color-main-background);
  font-size: 13px;
}
button[data-v-67b3d681]:not(.button-vue):not(:disabled):not(.primary):hover, button[data-v-67b3d681]:not(.button-vue):not(:disabled):not(.primary):focus, button:not(.button-vue):not(:disabled):not(.primary).active[data-v-67b3d681],
input[data-v-67b3d681]:not([type=range]):not(:disabled):not(.primary):hover,
input[data-v-67b3d681]:not([type=range]):not(:disabled):not(.primary):focus,
input:not([type=range]):not(:disabled):not(.primary).active[data-v-67b3d681],
textarea[data-v-67b3d681]:not(:disabled):not(.primary):hover,
textarea[data-v-67b3d681]:not(:disabled):not(.primary):focus,
textarea:not(:disabled):not(.primary).active[data-v-67b3d681] {
  /* active class used for multiselect */
  border-color: var(--color-primary-element);
  outline: none;
}
button[data-v-67b3d681]:not(.button-vue):not(:disabled):not(.primary):active,
input[data-v-67b3d681]:not([type=range]):not(:disabled):not(.primary):active,
textarea[data-v-67b3d681]:not(:disabled):not(.primary):active {
  color: var(--color-main-text);
  outline: none;
  background-color: var(--color-main-background);
}
button[data-v-67b3d681]:not(.button-vue):disabled,
input[data-v-67b3d681]:not([type=range]):disabled,
textarea[data-v-67b3d681]:disabled {
  cursor: default;
  opacity: 0.5;
  color: var(--color-text-maxcontrast);
  background-color: var(--color-background-dark);
}
button[data-v-67b3d681]:not(.button-vue):required,
input[data-v-67b3d681]:not([type=range]):required,
textarea[data-v-67b3d681]:required {
  box-shadow: none;
}
button[data-v-67b3d681]:not(.button-vue):invalid,
input[data-v-67b3d681]:not([type=range]):invalid,
textarea[data-v-67b3d681]:invalid {
  border-color: var(--color-border-error, var(--color-error));
  box-shadow: none !important;
}
button[data-v-67b3d681]:not(.button-vue),
input[data-v-67b3d681]:not([type=range]),
textarea[data-v-67b3d681] {
  /* Primary action button, use sparingly */
}
button:not(.button-vue).primary[data-v-67b3d681],
input:not([type=range]).primary[data-v-67b3d681],
textarea.primary[data-v-67b3d681] {
  cursor: pointer;
  color: var(--color-primary-element-text);
  border-color: var(--color-primary-element);
  background-color: var(--color-primary-element);
}
button:not(.button-vue).primary[data-v-67b3d681]:not(:disabled):hover, button:not(.button-vue).primary[data-v-67b3d681]:not(:disabled):focus, button:not(.button-vue).primary[data-v-67b3d681]:not(:disabled):active,
input:not([type=range]).primary[data-v-67b3d681]:not(:disabled):hover,
input:not([type=range]).primary[data-v-67b3d681]:not(:disabled):focus,
input:not([type=range]).primary[data-v-67b3d681]:not(:disabled):active,
textarea.primary[data-v-67b3d681]:not(:disabled):hover,
textarea.primary[data-v-67b3d681]:not(:disabled):focus,
textarea.primary[data-v-67b3d681]:not(:disabled):active {
  border-color: var(--color-primary-element-light);
  background-color: var(--color-primary-element-light);
}
button:not(.button-vue).primary[data-v-67b3d681]:not(:disabled):active,
input:not([type=range]).primary[data-v-67b3d681]:not(:disabled):active,
textarea.primary[data-v-67b3d681]:not(:disabled):active {
  color: var(--color-primary-element-text-dark);
}
button:not(.button-vue).primary[data-v-67b3d681]:disabled,
input:not([type=range]).primary[data-v-67b3d681]:disabled,
textarea.primary[data-v-67b3d681]:disabled {
  cursor: default;
  color: var(--color-primary-element-text-dark);
  background-color: var(--color-primary-element);
}

/**
 * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */
li.action[data-v-67b3d681]:hover, li.action.active[data-v-67b3d681] {
  border-radius: 6px;
  padding: 0;
}
li.action[data-v-67b3d681]:hover {
  background-color: var(--color-background-hover);
}
.action--disabled[data-v-67b3d681] {
  pointer-events: none;
  opacity: 0.5;
}
.action--disabled[data-v-67b3d681]:hover, .action--disabled[data-v-67b3d681]:focus {
  cursor: default;
  opacity: 0.5;
}
.action--disabled[data-v-67b3d681] * {
  opacity: 1 !important;
}
.action-input[data-v-67b3d681] {
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  color: var(--color-main-text);
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  font-weight: normal;
}
.action-input__icon-wrapper[data-v-67b3d681] {
  display: flex;
  align-self: center;
  align-items: center;
  justify-content: center;
}
.action-input__icon-wrapper[data-v-67b3d681] .material-design-icon {
  width: var(--default-clickable-area);
  height: var(--default-clickable-area);
  opacity: 1;
}
.action-input__icon-wrapper[data-v-67b3d681] .material-design-icon .material-design-icon__svg {
  vertical-align: middle;
}
.action-input > span[data-v-67b3d681] {
  cursor: pointer;
  white-space: nowrap;
}
.action-input__icon[data-v-67b3d681] {
  min-width: 0; /* Overwrite icons*/
  min-height: 0;
  padding: calc(var(--default-clickable-area) / 2) 0 calc(var(--default-clickable-area) / 2) var(--default-clickable-area);
  background-position: calc((var(--default-clickable-area) - 16px) / 2) center;
  background-size: 16px;
}
.action-input__form[data-v-67b3d681] {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  margin: 4px 0;
  padding-inline-end: calc((var(--default-clickable-area) - 16px) / 2);
}
.action-input__container[data-v-67b3d681] {
  position: relative;
  width: 100%;
}
.action-input__input-container[data-v-67b3d681] {
  display: flex;
}
.action-input__input-container .colorpicker__trigger[data-v-67b3d681], .action-input__input-container .colorpicker__preview[data-v-67b3d681] {
  width: 100%;
}
.action-input__input-container .colorpicker__preview[data-v-67b3d681] {
  width: 100%;
  height: 36px;
  border-radius: var(--border-radius-element);
  border: 2px solid var(--color-border-maxcontrast);
  box-shadow: none !important;
}
.action-input__text-label[data-v-67b3d681] {
  padding: 4px 0;
  display: block;
}
.action-input__text-label--hidden[data-v-67b3d681] {
  position: absolute;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -1;
  opacity: 0;
}
.action-input__datetimepicker[data-v-67b3d681] {
  width: 100%;
}
.action-input__datetimepicker[data-v-67b3d681] .mx-input {
  margin: 0;
}
.action-input__multi[data-v-67b3d681] {
  width: 100%;
}
li:last-child > .action-input[data-v-67b3d681] {
  padding-bottom: calc((var(--default-clickable-area) - 16px) / 2 - 4px);
}
li:first-child > .action-input[data-v-67b3d681]:not(.action-input--visible-label) {
  padding-top: calc((var(--default-clickable-area) - 16px) / 2 - 4px);
}