@nextcloud/vue
Version:
Nextcloud vue components
123 lines • 4.68 kB
CSS
/**
* 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_wpltc_12 {
display: flex;
align-self: center;
justify-self: center;
align-items: center;
justify-content: center;
}
._ncPopover_wpltc_20.v-popper--theme-nc-popover-9, ._ncPopover_wpltc_20.v-popper--theme-nc-popover-9 * {
box-sizing: border-box;
}
._ncPopover_wpltc_20.v-popper--theme-nc-popover-9 .resize-observer {
position: absolute;
top: 0;
/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */
left: 0;
z-index: -1;
width: 100%;
height: 100%;
border: none;
background-color: transparent;
pointer-events: none;
display: block;
overflow: hidden;
opacity: 0;
}
._ncPopover_wpltc_20.v-popper--theme-nc-popover-9 .resize-observer object {
display: block;
position: absolute;
top: 0;
/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
pointer-events: none;
z-index: -1;
}
._ncPopover_wpltc_20.v-popper--theme-nc-popover-9.v-popper__popper {
z-index: 100000;
top: 0;
/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */
left: 0;
display: block ;
}
._ncPopover_wpltc_20.v-popper--theme-nc-popover-9.v-popper__popper .v-popper__wrapper {
/*
* In theory, "filter: drop-shadow" would look better here with arrow shadow.
* In fact, in results in a blurry popover in Chromium on scaling.
* The hypothesis is that "filter" creates a new composition layer,
* and with GPU acceleration requires the previous layers content to be rasterized.
* In combination with translate3d from floating-vue, it makes Chromium to first render and rasterize the popover
* and then apply scaling, which results in a blurry popover.
*/
box-shadow: 0 1px 10px var(--color-box-shadow);
border-radius: var(--border-radius-element);
}
._ncPopover_wpltc_20.v-popper--theme-nc-popover-9.v-popper__popper .v-popper__inner {
padding: 0;
color: var(--color-main-text);
border-radius: var(--border-radius-element);
overflow: hidden;
background: var(--color-main-background);
}
._ncPopover_wpltc_20.v-popper--theme-nc-popover-9.v-popper__popper .v-popper__arrow-container {
position: absolute;
z-index: 1;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-width: 10px;
}
._ncPopover_wpltc_20.v-popper--theme-nc-popover-9.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-container {
bottom: -9px;
/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */
border-bottom-width: 0;
/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */
border-top-color: var(--color-main-background);
}
._ncPopover_wpltc_20.v-popper--theme-nc-popover-9.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container {
top: -9px;
/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */
border-top-width: 0;
/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */
border-bottom-color: var(--color-main-background);
}
._ncPopover_wpltc_20.v-popper--theme-nc-popover-9.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-container {
/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */
left: -9px;
/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */
border-left-width: 0;
/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */
border-right-color: var(--color-main-background);
}
._ncPopover_wpltc_20.v-popper--theme-nc-popover-9.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container {
/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */
right: -9px;
/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */
border-right-width: 0;
/* stylelint-disable-next-line csstools/use-logical */ /* upstream logic */
border-left-color: var(--color-main-background);
}
._ncPopover_wpltc_20.v-popper--theme-nc-popover-9.v-popper__popper[aria-hidden=true] {
visibility: hidden;
transition: opacity var(--animation-quick), visibility var(--animation-quick);
opacity: 0;
}
._ncPopover_wpltc_20.v-popper--theme-nc-popover-9.v-popper__popper[aria-hidden=false] {
visibility: visible;
transition: opacity var(--animation-quick);
opacity: 1;
}