@nextcloud/vue/dist/assets/NcAppNavigation.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-e8177cc7] {
  display: flex;
  align-self: center;
  justify-self: center;
  align-items: center;
  justify-content: center;
}
.app-navigation-toggle-wrapper[data-v-e8177cc7] {
  position: absolute;
  top: var(--app-navigation-padding);
  inset-inline-end: calc(0px - var(--app-navigation-padding));
  margin-inline-end: calc(-1 * var(--default-clickable-area));
}
button.app-navigation-toggle[data-v-e8177cc7] {
  background-color: var(--color-main-background);
}/**
 * 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 {
  display: flex;
  align-self: center;
  justify-self: center;
  align-items: center;
  justify-content: center;
}
.app-navigation,
.app-content {
  /** Distance of the app navigation toggle and the first navigation item to the top edge of the app content container */
  --app-navigation-padding: calc(var(--default-grid-baseline, 4px) * 2);
}/**
 * 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-ec9c3f18] {
  display: flex;
  align-self: center;
  justify-self: center;
  align-items: center;
  justify-content: center;
}
.app-navigation[data-v-ec9c3f18] {
  --color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-text-maxcontrast-default));
  transition: transform var(--animation-slow), margin var(--animation-slow);
  width: 300px;
  --app-navigation-max-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));
  max-width: var(--app-navigation-max-width);
  position: relative;
  top: 0;
  inset-inline-start: 0;
  padding: 0px;
  z-index: 1800;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-grow: 0;
  flex-shrink: 0;
  background-color: transparent;
}
.app-navigation--legacy[data-v-ec9c3f18] {
  background-color: var(--color-main-background-blur, var(--color-main-background));
  backdrop-filter: var(--filter-background-blur, none);
}
.app-navigation--closed[data-v-ec9c3f18] {
  margin-inline-start: calc(-1 * min(300px, var(--app-navigation-max-width)));
}
.app-navigation__search[data-v-ec9c3f18] {
  width: 100%;
}
.app-navigation__body[data-v-ec9c3f18] {
  overflow-y: scroll;
}
.app-navigation__content > ul[data-v-ec9c3f18] {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--default-grid-baseline, 4px);
  padding: var(--app-navigation-padding);
}
.app-navigation .app-navigation__list[data-v-ec9c3f18] {
  height: 100%;
}
.app-navigation__body--no-list[data-v-ec9c3f18] {
  flex: 1 1 auto;
  overflow: auto;
  height: 100%;
}
.app-navigation__content[data-v-ec9c3f18] {
  height: 100%;
  display: flex;
  flex-direction: column;
}
[data-themes*=highcontrast] .app-navigation[data-v-ec9c3f18] {
  border-inline-end: 1px solid var(--color-border);
}
@media only screen and (width < 1024px) {
.app-navigation[data-v-ec9c3f18] {
    position: absolute;
    border-inline-end: 1px solid var(--color-border);
    background-color: var(--color-main-background-blur, var(--color-main-background));
    backdrop-filter: var(--filter-background-blur, none);
}
}
@media only screen and (max-width: 512px) {
.app-navigation[data-v-ec9c3f18] {
    z-index: 1400;
}
}