@nextcloud/vue/dist/assets/NcModal.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-8a639337] {
  display: flex;
  align-self: center;
  justify-self: center;
  align-items: center;
  justify-content: center;
}
.modal-mask[data-v-8a639337] {
  position: fixed;
  z-index: 9998;
  top: 0;
  inset-inline-start: 0;
  display: block;
  width: 100%;
  height: 100%;
  --backdrop-color: 0, 0, 0;
  background-color: rgba(var(--backdrop-color), 0.5);
}
.modal-mask[data-v-8a639337], .modal-mask[data-v-8a639337] * {
  box-sizing: border-box;
}
.modal-mask--opaque[data-v-8a639337] {
  background-color: rgba(var(--backdrop-color), 0.92);
}
.modal-mask--light[data-v-8a639337] {
  --backdrop-color: 255, 255, 255;
}
.modal-header[data-v-8a639337] {
  position: absolute;
  z-index: 10001;
  top: 0;
  inset-inline: 0 0;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--header-height);
  overflow: hidden;
  transition: opacity 250ms, visibility 250ms;
}
.modal-header__name[data-v-8a639337] {
  overflow-x: hidden;
  width: 100%;
  padding-inline: 12px 0;
  transition: padding ease 100ms;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  margin-block: 0;
}
@media only screen and (min-width: 1024px) {
.modal-header__name[data-v-8a639337] {
    padding-inline-start: calc(var(--header-height) * var(--v11237964));
    text-align: center;
}
}
.modal-header .icons-menu[data-v-8a639337] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: flex-end;
}
.modal-header .icons-menu .header-close[data-v-8a639337] {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: calc((var(--header-height) - var(--default-clickable-area)) / 2);
  padding: 0;
}
.modal-header .icons-menu .play-pause-icons[data-v-8a639337] {
  position: relative;
  width: var(--header-height);
  height: var(--header-height);
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: none;
  background-color: transparent;
}
.modal-header .icons-menu .play-pause-icons:hover .play-pause-icons__icon[data-v-8a639337], .modal-header .icons-menu .play-pause-icons:focus .play-pause-icons__icon[data-v-8a639337] {
  opacity: 1;
  border-radius: calc(var(--default-clickable-area) / 2);
  background-color: rgba(127, 127, 127, 0.25);
}
.modal-header .icons-menu .play-pause-icons__icon[data-v-8a639337] {
  width: var(--default-clickable-area);
  height: var(--default-clickable-area);
  margin: calc((var(--header-height) - var(--default-clickable-area)) / 2);
  cursor: pointer;
  opacity: 0.7;
}
.modal-header .icons-menu[data-v-8a639337]  .action-item {
  margin: calc((var(--header-height) - var(--default-clickable-area)) / 2);
}
.modal-header .icons-menu[data-v-8a639337]  .action-item--single {
  width: var(--default-clickable-area);
  height: var(--default-clickable-area);
  cursor: pointer;
  background-position: center;
  background-size: 22px;
}
.modal-header .icons-menu .header-actions[data-v-8a639337] button:focus-visible {
  box-shadow: none !important;
  outline: 2px solid #fff !important;
}
.modal-wrapper[data-v-8a639337] {
  --modal-header-offset: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.modal-wrapper--no-header[data-v-8a639337] {
  --modal-header-offset: var(--body-container-margin);
}
.modal-wrapper[data-v-8a639337] {
  /* Navigation buttons */
}
.modal-wrapper .prev[data-v-8a639337],
.modal-wrapper .next[data-v-8a639337] {
  z-index: 10000;
  height: 35vh;
  min-height: 300px;
  position: absolute;
  transition: opacity 250ms;
  color: white;
}
.modal-wrapper .prev[data-v-8a639337]:focus-visible,
.modal-wrapper .next[data-v-8a639337]:focus-visible {
  box-shadow: 0 0 0 2px var(--color-primary-element-text);
  background-color: var(--color-box-shadow);
}
.modal-wrapper .prev[data-v-8a639337] {
  inset-inline-start: 2px;
}
.modal-wrapper .next[data-v-8a639337] {
  inset-inline-end: 2px;
}
.modal-wrapper[data-v-8a639337] {
  /* Content */
}
.modal-wrapper .modal-container[data-v-8a639337] {
  position: relative;
  display: flex;
  padding: 0;
  transition: transform 300ms ease;
  border-radius: var(--border-radius-container);
  background-color: var(--color-main-background);
  color: var(--color-main-text);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
  overflow: auto;
}
.modal-wrapper .modal-container__close[data-v-8a639337] {
  z-index: 1;
  position: absolute;
  top: 4px;
  inset-inline-end: var(--default-grid-baseline);
}
.modal-wrapper .modal-container__content[data-v-8a639337] {
  width: 100%;
  min-height: 52px;
  overflow: auto;
}
.modal-wrapper--small > .modal-container[data-v-8a639337] {
  width: 400px;
  max-width: 90%;
  max-height: min(90%, 100% - 2 * var(--header-height) - 2 * var(--body-container-margin));
}
.modal-wrapper--normal > .modal-container[data-v-8a639337] {
  max-width: 90%;
  width: 600px;
  max-height: min(90%, 100% - 2 * var(--header-height) - 2 * var(--body-container-margin));
}
.modal-wrapper--large > .modal-container[data-v-8a639337] {
  max-width: 90%;
  width: 900px;
  max-height: min(90%, 100% - 2 * var(--header-height) - 2 * var(--body-container-margin));
}
.modal-wrapper--full > .modal-container[data-v-8a639337] {
  width: 100%;
  height: calc(100% - var(--modal-header-offset));
  position: absolute;
  top: var(--modal-header-offset);
  border-radius: 0;
}
@media only screen and ((max-width: 512px) or (max-height: 400px)) {
.modal-wrapper .modal-container[data-v-8a639337] {
    max-width: initial;
    width: 100%;
    max-height: initial;
    height: calc(100% - var(--modal-header-offset));
    position: absolute;
    top: var(--modal-header-offset);
    border-radius: 0;
}
}

/* TRANSITIONS */
.fade-enter-active[data-v-8a639337],
.fade-leave-active[data-v-8a639337] {
  transition: opacity 250ms;
}
.fade-enter-from[data-v-8a639337],
.fade-leave-to[data-v-8a639337] {
  opacity: 0;
}
.fade-visibility-enter-from[data-v-8a639337],
.fade-visibility-leave-to[data-v-8a639337] {
  visibility: hidden;
  opacity: 0;
}
.modal-in-enter-active[data-v-8a639337],
.modal-in-leave-active[data-v-8a639337],
.modal-out-enter-active[data-v-8a639337],
.modal-out-leave-active[data-v-8a639337] {
  transition: opacity 250ms;
}
.modal-in-enter-from[data-v-8a639337],
.modal-in-leave-to[data-v-8a639337],
.modal-out-enter-from[data-v-8a639337],
.modal-out-leave-to[data-v-8a639337] {
  opacity: 0;
}
.modal-in-enter .modal-container[data-v-8a639337],
.modal-in-leave-to .modal-container[data-v-8a639337] {
  transform: scale(0.9);
}
.modal-out-enter .modal-container[data-v-8a639337],
.modal-out-leave-to .modal-container[data-v-8a639337] {
  transform: scale(1.1);
}
.modal-mask .play-pause-icons .progress-ring[data-v-8a639337] {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  transform: rotate(-90deg);
}
.modal-mask .play-pause-icons .progress-ring .progress-ring__circle[data-v-8a639337] {
  transition: 100ms stroke-dashoffset;
  transform-origin: 50% 50%;
  animation: progressring-8a639337 linear var(--v5117887e) infinite;
  stroke-linecap: round;
  stroke-dashoffset: 94.2477796077;
  stroke-dasharray: 94.2477796077;
}
.modal-mask .play-pause-icons--paused .play-pause-icons__icon[data-v-8a639337] {
  animation: breath-8a639337 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.modal-mask .play-pause-icons--paused .progress-ring__circle[data-v-8a639337] {
  animation-play-state: paused !important;
}
@keyframes progressring-8a639337 {
from {
    stroke-dashoffset: 94.2477796077;
}
to {
    stroke-dashoffset: 0;
}
}
@keyframes breath-8a639337 {
0% {
    opacity: 1;
}
50% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}