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

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