@nextcloud/vue
Version:
Nextcloud vue components
260 lines • 8.95 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[data-v-98c79945] {
display: flex;
align-self: center;
justify-self: center;
align-items: center;
justify-content: center;
}
.autocomplete-result[data-v-98c79945] {
display: flex;
align-items: center;
gap: var(--default-grid-baseline);
line-height: 1.2;
--auto-complete-result-avatar-size: var(--default-clickable-area);
}
.autocomplete-result__icon[data-v-98c79945] {
position: relative;
flex: 0 0 var(--default-clickable-area);
width: var(--default-clickable-area);
min-width: var(--default-clickable-area);
height: var(--default-clickable-area);
border-radius: var(--default-clickable-area);
background-color: var(--color-background-darker);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.autocomplete-result__icon--with-avatar[data-v-98c79945] {
color: inherit;
background-size: cover;
}
.autocomplete-result__status[data-v-98c79945] {
--auto-complete-result-status-icon-size: clamp(14px, var(--auto-complete-result-avatar-size) * 0.4, 18px);
--auto-complete-result-status-icon-position: calc(var(--auto-complete-result-avatar-size) / 2 * (1 - 1 / sqrt(2)) - var(--auto-complete-result-status-icon-size) / 2);
box-sizing: border-box;
position: absolute;
right: var(--auto-complete-result-status-icon-position);
bottom: var(--auto-complete-result-status-icon-position);
height: var(--auto-complete-result-status-icon-size);
width: var(--auto-complete-result-status-icon-size);
border: 2px solid var(--color-main-background);
border-radius: 50%;
background-color: var(--color-main-background);
font-size: calc(var(--auto-complete-result-status-icon-size) / 1.2);
line-height: 1.2;
background-repeat: no-repeat;
background-size: var(--auto-complete-result-status-icon-size);
background-position: center;
}
.autocomplete-result__status--icon[data-v-98c79945] {
border: none;
background-color: transparent;
}
.autocomplete-result__content[data-v-98c79945] {
display: flex;
flex: 1 1 100%;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.autocomplete-result__title[data-v-98c79945], .autocomplete-result__subline[data-v-98c79945] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.autocomplete-result__subline[data-v-98c79945] {
color: var(--color-text-maxcontrast);
}/**
* 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-108d42c7] {
display: flex;
align-self: center;
justify-self: center;
align-items: center;
justify-content: center;
}
.rich-contenteditable[data-v-108d42c7] {
position: relative;
width: auto;
}
.rich-contenteditable__label[data-v-108d42c7] {
position: absolute;
margin-inline: 14px 0;
max-width: fit-content;
inset-block-start: 11px;
inset-inline: 0;
color: var(--color-text-maxcontrast);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
transition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);
}
.rich-contenteditable__input:focus + .rich-contenteditable__label[data-v-108d42c7], .rich-contenteditable__input:not(.rich-contenteditable__input--empty) + .rich-contenteditable__label[data-v-108d42c7] {
inset-block-start: -10px;
line-height: 1.5;
font-size: 13px;
font-weight: 500;
border-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;
background-color: var(--color-main-background);
padding-inline: 5px;
margin-inline-start: 9px;
transition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);
}
.rich-contenteditable__input[data-v-108d42c7] {
overflow-y: auto;
width: auto;
margin: 0;
padding: 8px;
cursor: text;
white-space: pre-wrap;
word-break: break-word;
color: var(--color-main-text);
border: 2px solid var(--color-border-maxcontrast);
border-radius: var(--border-radius-large);
outline: none;
background-color: var(--color-main-background);
font-family: var(--font-face);
font-size: inherit;
min-height: var(--default-clickable-area);
max-height: calc(var(--default-clickable-area) * 5.5);
}
.rich-contenteditable__input--has-label[data-v-108d42c7] {
margin-top: 10px;
}
.rich-contenteditable__input--empty[data-v-108d42c7]:focus:before, .rich-contenteditable__input--empty[data-v-108d42c7]:not(.rich-contenteditable__input--has-label):before {
content: attr(aria-placeholder);
color: var(--color-text-maxcontrast);
position: absolute;
}
.rich-contenteditable__input[contenteditable=false][data-v-108d42c7]:not(.rich-contenteditable__input--disabled) {
cursor: default;
background-color: transparent;
color: var(--color-main-text);
border-color: transparent;
opacity: 1;
border-radius: 0;
}
.rich-contenteditable__input--multiline[data-v-108d42c7] {
min-height: calc(var(--default-clickable-area) * 3);
max-height: none;
}
.rich-contenteditable__input--disabled[data-v-108d42c7] {
opacity: 0.5;
color: var(--color-text-maxcontrast);
border: 2px solid var(--color-background-darker);
border-radius: var(--border-radius);
background-color: var(--color-background-dark);
}/**
* 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_1o935_12 {
display: flex;
align-self: center;
justify-self: center;
align-items: center;
justify-content: center;
}
._tribute-container_1o935_20 {
z-index: 9000;
overflow: auto;
position: absolute;
left: -10000px;
margin: var(--default-grid-baseline) 0;
padding: var(--default-grid-baseline);
color: var(--color-text-maxcontrast);
border-radius: var(--border-radius-element, var(--border-radius));
background: var(--color-main-background);
box-shadow: 0 1px 5px var(--color-box-shadow);
}
._tribute-container_1o935_20, ._tribute-container_1o935_20 * {
box-sizing: border-box;
}
._tribute-container_1o935_20 ul {
display: flex;
flex-direction: column;
gap: var(--default-grid-baseline);
}
._tribute-container_1o935_20 ._tribute-container__item_1o935_40 {
color: var(--color-text-maxcontrast);
border-radius: var(--border-radius-small, var(--border-radius));
padding: var(--default-grid-baseline);
cursor: pointer;
min-height: var(--clickable-area-small, auto);
}
._tribute-container_1o935_20 ._tribute-container__item_1o935_40.highlight {
color: var(--color-main-text);
background: var(--color-background-hover);
}
._tribute-container_1o935_20 ._tribute-container__item_1o935_40.highlight, ._tribute-container_1o935_20 ._tribute-container__item_1o935_40.highlight * {
cursor: pointer;
}
._tribute-container_1o935_20._tribute-container--focus-visible_1o935_54 .highlight._tribute-container__item_1o935_40 {
outline: 2px solid var(--color-main-text) ;
}
._tribute-container-autocomplete_1o935_58 {
min-width: 250px;
max-width: 300px;
max-height: calc((var(--default-clickable-area) + 3 * var(--default-grid-baseline)) * 4.5 - 1.5 * var(--default-grid-baseline));
}
._tribute-container-emoji_1o935_64,
._tribute-container-link_1o935_65 {
min-width: 200px;
max-width: 200px;
max-height: calc((24px + 3 * var(--default-grid-baseline)) * 5.5 - 1.5 * var(--default-grid-baseline));
}
._tribute-container-emoji_1o935_64 ._tribute-item_1o935_70,
._tribute-container-link_1o935_65 ._tribute-item_1o935_70 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
._tribute-container-link_1o935_65 {
min-width: 200px;
max-width: 300px;
}
._tribute-container-link_1o935_65 ._tribute-item_1o935_70 {
display: flex;
align-items: center;
}
._tribute-container-link_1o935_65 ._tribute-item__title_1o935_85 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
._tribute-container-link_1o935_65 ._tribute-item__icon_1o935_90 {
margin: auto 0;
width: 20px;
height: 20px;
object-fit: contain;
padding-right: var(--default-grid-baseline);
filter: var(--background-invert-if-dark);
}