@nextcloud/vue/dist/assets/NcActionTextEditable-TPYz4ma-.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-24e8b746] {
  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-24e8b746]:not(.button-vue),
input[data-v-24e8b746]:not([type=range]),
textarea[data-v-24e8b746] {
  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-24e8b746]:not(.button-vue):not(:disabled):not(.primary):hover, button[data-v-24e8b746]:not(.button-vue):not(:disabled):not(.primary):focus, button:not(.button-vue):not(:disabled):not(.primary).active[data-v-24e8b746],
input[data-v-24e8b746]:not([type=range]):not(:disabled):not(.primary):hover,
input[data-v-24e8b746]:not([type=range]):not(:disabled):not(.primary):focus,
input:not([type=range]):not(:disabled):not(.primary).active[data-v-24e8b746],
textarea[data-v-24e8b746]:not(:disabled):not(.primary):hover,
textarea[data-v-24e8b746]:not(:disabled):not(.primary):focus,
textarea:not(:disabled):not(.primary).active[data-v-24e8b746] {
  /* active class used for multiselect */
  border-color: var(--color-primary-element);
  outline: none;
}
button[data-v-24e8b746]:not(.button-vue):not(:disabled):not(.primary):active,
input[data-v-24e8b746]:not([type=range]):not(:disabled):not(.primary):active,
textarea[data-v-24e8b746]:not(:disabled):not(.primary):active {
  color: var(--color-main-text);
  outline: none;
  background-color: var(--color-main-background);
}
button[data-v-24e8b746]:not(.button-vue):disabled,
input[data-v-24e8b746]:not([type=range]):disabled,
textarea[data-v-24e8b746]:disabled {
  cursor: default;
  opacity: 0.5;
  color: var(--color-text-maxcontrast);
  background-color: var(--color-background-dark);
}
button[data-v-24e8b746]:not(.button-vue):required,
input[data-v-24e8b746]:not([type=range]):required,
textarea[data-v-24e8b746]:required {
  box-shadow: none;
}
button[data-v-24e8b746]:not(.button-vue):invalid,
input[data-v-24e8b746]:not([type=range]):invalid,
textarea[data-v-24e8b746]:invalid {
  border-color: var(--color-border-error, var(--color-error));
  box-shadow: none !important;
}
button[data-v-24e8b746]:not(.button-vue),
input[data-v-24e8b746]:not([type=range]),
textarea[data-v-24e8b746] {
  /* Primary action button, use sparingly */
}
button:not(.button-vue).primary[data-v-24e8b746],
input:not([type=range]).primary[data-v-24e8b746],
textarea.primary[data-v-24e8b746] {
  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-24e8b746]:not(:disabled):hover, button:not(.button-vue).primary[data-v-24e8b746]:not(:disabled):focus, button:not(.button-vue).primary[data-v-24e8b746]:not(:disabled):active,
input:not([type=range]).primary[data-v-24e8b746]:not(:disabled):hover,
input:not([type=range]).primary[data-v-24e8b746]:not(:disabled):focus,
input:not([type=range]).primary[data-v-24e8b746]:not(:disabled):active,
textarea.primary[data-v-24e8b746]:not(:disabled):hover,
textarea.primary[data-v-24e8b746]:not(:disabled):focus,
textarea.primary[data-v-24e8b746]:not(:disabled):active {
  border-color: var(--color-primary-element-light);
  background-color: var(--color-primary-element-light);
}
button:not(.button-vue).primary[data-v-24e8b746]:not(:disabled):active,
input:not([type=range]).primary[data-v-24e8b746]:not(:disabled):active,
textarea.primary[data-v-24e8b746]:not(:disabled):active {
  color: var(--color-primary-element-text-dark);
}
button:not(.button-vue).primary[data-v-24e8b746]:disabled,
input:not([type=range]).primary[data-v-24e8b746]:disabled,
textarea.primary[data-v-24e8b746]: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-24e8b746]:hover, li.action.active[data-v-24e8b746] {
  border-radius: 6px;
  padding: 0;
}
li.action[data-v-24e8b746]:hover {
  background-color: var(--color-background-hover);
}
.action--disabled[data-v-24e8b746] {
  pointer-events: none;
  opacity: 0.5;
}
.action--disabled[data-v-24e8b746]:hover, .action--disabled[data-v-24e8b746]:focus {
  cursor: default;
  opacity: 0.5;
}
.action--disabled[data-v-24e8b746] * {
  opacity: 1 !important;
}
.action-text-editable[data-v-24e8b746] {
  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;
  line-height: var(--default-clickable-area);
}
.action-text-editable > span[data-v-24e8b746] {
  cursor: pointer;
  white-space: nowrap;
}
.action-text-editable__icon[data-v-24e8b746] {
  min-width: 0; /* Overwrite icons*/
  min-height: 0;
  /* Keep padding to define the width to
  	assure correct position of a possible text */
  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-text-editable[data-v-24e8b746] .material-design-icon {
  width: var(--default-clickable-area);
  height: var(--default-clickable-area);
  opacity: 1;
}
.action-text-editable[data-v-24e8b746] .material-design-icon .material-design-icon__svg {
  vertical-align: middle;
}
.action-text-editable__form[data-v-24e8b746] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  position: relative;
  margin: 4px 0;
  padding-inline-end: calc((var(--default-clickable-area) - 16px) / 2);
}
.action-text-editable__submit[data-v-24e8b746] {
  position: absolute;
  inset-inline-start: 0;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -1;
  opacity: 0;
}
.action-text-editable__label[data-v-24e8b746] {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset-inline-end: calc((var(--default-clickable-area) - 16px) / 2 + 1px);
  bottom: 1px;
  width: calc(var(--default-clickable-area) - 8px);
  height: calc(var(--default-clickable-area) - 8px);
  box-sizing: border-box;
  margin: 0;
  padding: 7px 6px;
  border: 0;
  border-radius: 50%;
  /* Avoid background under border */
  background-color: var(--color-main-background);
  background-clip: padding-box;
}
.action-text-editable__label[data-v-24e8b746], .action-text-editable__label[data-v-24e8b746] * {
  cursor: pointer;
}
.action-text-editable[data-v-24e8b746] {
  /* Inputs inside popover supports text, submit & reset */
}
.action-text-editable__textarea[data-v-24e8b746] {
  flex: 1 1 auto;
  color: inherit;
  border-color: var(--color-border-maxcontrast);
  min-height: calc(var(--default-clickable-area) * 2 - 8px); /* twice the element margin-y */
  max-height: calc(var(--default-clickable-area) * 3 - 8px); /* twice the element margin-y */
  min-width: calc(var(--default-clickable-area) * 4);
  width: 100% !important;
  margin: 0;
}
.action-text-editable__textarea[data-v-24e8b746]:disabled {
  cursor: default;
}
.action-text-editable__textarea[data-v-24e8b746] {
  /* only show confirm borders if input is not focused */
}
.action-text-editable__textarea:not(:active):not(:hover):not(:focus):invalid + .action-text-editable__label[data-v-24e8b746] {
  background-color: var(--color-error);
}
.action-text-editable__textarea:not(:active):not(:hover):not(:focus):not(:disabled) + .action-text-editable__label[data-v-24e8b746]:active, .action-text-editable__textarea:not(:active):not(:hover):not(:focus):not(:disabled) + .action-text-editable__label[data-v-24e8b746]:hover, .action-text-editable__textarea:not(:active):not(:hover):not(:focus):not(:disabled) + .action-text-editable__label[data-v-24e8b746]:focus {
  background-color: var(--color-primary-element);
  color: var(--color-primary-element-text);
}
.action-text-editable__textarea:active:not(:disabled) + .action-text-editable__label[data-v-24e8b746], .action-text-editable__textarea:hover:not(:disabled) + .action-text-editable__label[data-v-24e8b746], .action-text-editable__textarea:focus:not(:disabled) + .action-text-editable__label[data-v-24e8b746] {
  /* above previous input */
  z-index: 2;
  border-color: var(--color-primary-element);
  border-inline-start-color: transparent;
}
li:last-child > .action-text-editable[data-v-24e8b746] {
  margin-bottom: calc((var(--default-clickable-area) - 16px) / 2 - 4px);
}
li:first-child > .action-text-editable[data-v-24e8b746] {
  margin-top: calc((var(--default-clickable-area) - 16px) / 2 - 4px);
}