@nextcloud/vue

Version:
Nextcloud vue components
github.com/nextcloud-libraries/nextcloud-vue
221 lines • 7.89 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_p1TBV {
  display: flex;
  align-self: center;
  justify-self: center;
  align-items: center;
  justify-content: center;
}
._appSettingsDialogVersion_cjsRO {
  --form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));
  color: var(--color-text-maxcontrast);
  margin-block-end: calc(8 * var(--default-grid-baseline));
  margin-inline: var(--form-element-label-offset);
}
._appSettingsDialogVersion__legacy_FaQVZ {
  margin-inline: 0;
}/**
 * 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-e669a5ef] {
  display: flex;
  align-self: center;
  justify-self: center;
  align-items: center;
  justify-content: center;
}
.app-settings[data-v-e669a5ef]:not(.app-settings--legacy) {
  --nav-tint: hsl(from var(--color-primary-element-light) h s calc(l * 1.045));
  --nav-tint-strong: var(--color-primary-element-light);
}
.app-settings[data-v-e669a5ef]:not(.app-settings--legacy) .modal-wrapper .modal-container {
  padding-inline-start: 0 !important;
  padding-block-start: 0 !important;
  background-color: var(--nav-tint);
  overflow: hidden;
  max-width: 900px;
}
.app-settings[data-v-e669a5ef]:not(.app-settings--legacy) .dialog__name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(100%);
  white-space: nowrap;
  border: 0;
}
.app-settings[data-v-e669a5ef]:not(.app-settings--legacy) .app-settings__navigation {
  min-width: 200px;
  max-width: 200px;
  flex: 0 0 200px;
  margin-inline-end: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}
.app-settings[data-v-e669a5ef]:not(.app-settings--legacy) .app-settings__content {
  padding: calc(3 * var(--default-grid-baseline));
  background-color: var(--color-main-background);
  border-inline-start: 1px solid var(--color-border-dark);
  border-start-start-radius: var(--border-radius-element);
  border-end-start-radius: var(--border-radius-element);
}
.app-settings:not(.app-settings--legacy) .app-settings__title[data-v-e669a5ef] {
  box-sizing: border-box;
  padding: calc(3 * var(--default-grid-baseline));
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}
.app-settings:not(.app-settings--legacy) .navigation-list[data-v-e669a5ef] {
  height: 100%;
  overflow-y: auto;
  padding: var(--default-grid-baseline);
}
.app-settings:not(.app-settings--legacy) .navigation-list__link[data-v-e669a5ef] {
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--default-font-size);
  font-weight: 500;
  height: var(--default-clickable-area);
  margin: 2px 0;
  line-height: var(--default-clickable-area);
  border-radius: var(--border-radius-element);
  padding-inline: calc(2 * var(--default-grid-baseline));
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background-color: transparent;
  border: none;
  color: var(--color-main-text);
}
.app-settings:not(.app-settings--legacy) .navigation-list__link[data-v-e669a5ef]:hover, .app-settings:not(.app-settings--legacy) .navigation-list__link[data-v-e669a5ef]:focus-visible {
  background-color: color-mix(in srgb, var(--color-primary-element) 8%, transparent);
}
.app-settings:not(.app-settings--legacy) .navigation-list__link[data-v-e669a5ef]:focus-visible {
  outline: 2px solid var(--color-main-text);
  outline-offset: -2px;
}
.app-settings:not(.app-settings--legacy) .navigation-list__link--active[data-v-e669a5ef] {
  background-color: var(--nav-tint-strong);
}
.app-settings:not(.app-settings--legacy) .navigation-list__link--active[data-v-e669a5ef]:hover, .app-settings:not(.app-settings--legacy) .navigation-list__link--active[data-v-e669a5ef]:focus-visible {
  background-color: var(--color-primary-element-light-hover);
}
.app-settings:not(.app-settings--legacy) .navigation-list__link--active[data-v-e669a5ef]::before {
  content: "";
  position: absolute;
  inset-block: var(--default-grid-baseline);
  inset-inline-start: 0;
  width: 3px;
  background-color: var(--color-primary-element);
  border-radius: 999px;
}
.app-settings:not(.app-settings--legacy) .navigation-list__link--icon[data-v-e669a5ef] {
  gap: var(--default-grid-baseline);
}
.app-settings:not(.app-settings--legacy) .navigation-list__link-icon[data-v-e669a5ef] {
  display: flex;
  justify-content: center;
  align-content: center;
  width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));
  max-width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));
}
@media only screen and (width < 1024px) {
.app-settings[data-v-e669a5ef]:not(.app-settings--legacy) .modal-wrapper .modal-container {
    padding-inline-start: 12px !important;
    padding-block-start: 4px !important;
    background-color: var(--color-main-background);
}
.app-settings[data-v-e669a5ef]:not(.app-settings--legacy) .dialog__name {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 12px 0;
    padding-inline-end: var(--default-clickable-area);
    overflow: visible;
    clip-path: none;
    white-space: normal;
    border: 0;
}
.app-settings[data-v-e669a5ef]:not(.app-settings--legacy) .app-settings__content {
    border: none;
    border-radius: 0;
}
}
.app-settings.app-settings--legacy[data-v-e669a5ef] .app-settings__navigation {
  min-width: 200px;
  margin-inline-end: calc(4 * var(--default-grid-baseline));
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}
.app-settings.app-settings--legacy[data-v-e669a5ef] .app-settings__content {
  padding-inline: calc(4 * var(--default-grid-baseline));
}
.app-settings.app-settings--legacy .navigation-list[data-v-e669a5ef] {
  height: 100%;
  overflow-y: auto;
  padding: calc(3 * var(--default-grid-baseline));
}
.app-settings.app-settings--legacy .navigation-list__link[data-v-e669a5ef] {
  display: flex;
  align-content: center;
  font-size: 16px;
  height: var(--default-clickable-area);
  margin: 4px 0;
  line-height: var(--default-clickable-area);
  border-radius: var(--border-radius-element);
  font-weight: var(--font-weight-element, bold);
  padding: 0 calc(4 * var(--default-grid-baseline));
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background-color: transparent;
  border: none;
}
.app-settings.app-settings--legacy .navigation-list__link[data-v-e669a5ef]:hover, .app-settings.app-settings--legacy .navigation-list__link[data-v-e669a5ef]:focus {
  background-color: var(--color-background-hover);
}
.app-settings.app-settings--legacy .navigation-list__link--active[data-v-e669a5ef] {
  background-color: var(--color-primary-element-light) !important;
}
.app-settings.app-settings--legacy .navigation-list__link--icon[data-v-e669a5ef] {
  padding-inline-start: calc(2 * var(--default-grid-baseline));
  gap: var(--default-grid-baseline);
}
.app-settings.app-settings--legacy .navigation-list__link-icon[data-v-e669a5ef] {
  display: flex;
  justify-content: center;
  align-content: center;
  width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));
  max-width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));
}
@media only screen and (max-width: 512px) {
.app-settings.app-settings--legacy[data-v-e669a5ef] .dialog__name {
    padding-inline-start: 16px;
}
}