@nextcloud/vue
Version:
Nextcloud vue components
150 lines • 4.33 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-4b144346] {
display: flex;
align-self: center;
justify-self: center;
align-items: center;
justify-content: center;
}
.widget-custom[data-v-4b144346] {
width: 100%;
margin: auto;
margin-bottom: calc(var(--default-grid-baseline, 4px) * 3);
margin-top: calc(var(--default-grid-baseline, 4px) * 3);
overflow: hidden;
border: 2px solid var(--color-border);
border-radius: var(--border-radius-container);
background-color: transparent;
display: flex;
position: relative;
}
.widget-custom.full-width[data-v-4b144346] {
width: var(--widget-full-width, 100%) ;
inset-inline-start: calc((var(--widget-full-width, 100%) - 100%) / 2 * -1);
position: relative;
}
.widget-custom__content[data-v-4b144346] {
width: 100%;
display: flex;
flex-direction: column;
}
.widget-custom__resize-handle[data-v-4b144346] {
position: absolute;
bottom: 0;
inset-inline-start: 0;
width: 100%;
height: calc(var(--default-grid-baseline) * 2);
border-top: 1px solid var(--color-border);
margin-top: -1px;
cursor: row-resize;
touch-action: none;
}
.widget-custom__resize-handle[data-v-4b144346]::before, .widget-custom__resize-handle[data-v-4b144346]::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background-color: var(--color-border);
margin-top: 1px;
transform: translateX(-50%);
width: 30px;
height: 1px;
}
.widget-custom__resize-handle[data-v-4b144346]::before {
margin-top: -2px;
}
.widget-custom__resize-handle[data-v-4b144346]:focus-visible {
outline: 2px solid var(--color-primary-element);
outline-offset: -4px;
}
.widget-access[data-v-4b144346] {
width: 100%;
margin: auto;
margin-bottom: calc(var(--default-grid-baseline, 4px) * 3);
margin-top: calc(var(--default-grid-baseline, 4px) * 3);
overflow: hidden;
border: 2px solid var(--color-border);
border-radius: var(--border-radius-container);
background-color: transparent;
display: flex;
padding: calc(var(--default-grid-baseline, 4px) * 3);
}
.widget-default[data-v-4b144346] {
width: 100%;
margin: auto;
margin-bottom: calc(var(--default-grid-baseline, 4px) * 3);
margin-top: calc(var(--default-grid-baseline, 4px) * 3);
overflow: hidden;
border: 2px solid var(--color-border);
border-radius: var(--border-radius-container);
background-color: transparent;
display: flex;
}
.widget-default--compact[data-v-4b144346] {
flex-direction: column;
}
.widget-default--compact .widget-default--image[data-v-4b144346] {
width: 100%;
height: 150px;
}
.widget-default--compact .widget-default--details[data-v-4b144346] {
width: 100%;
padding-top: calc(var(--default-grid-baseline, 4px) * 2);
padding-bottom: calc(var(--default-grid-baseline, 4px) * 2);
}
.widget-default--compact .widget-default--description[data-v-4b144346] {
display: none;
}
.widget-default--image[data-v-4b144346] {
width: 40%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.widget-default--name[data-v-4b144346] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: var(--font-weight-heading, bold);
}
.widget-default--details[data-v-4b144346] {
padding: calc(var(--default-grid-baseline, 4px) * 3);
width: 60%;
}
.widget-default--details p[data-v-4b144346] {
margin: 0;
padding: 0;
}
.widget-default--description[data-v-4b144346] {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3; /* stylelint-disable-line property-no-unknown */
-webkit-box-orient: vertical;
}
.widget-default--link[data-v-4b144346] {
color: var(--color-text-maxcontrast);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.toggle-interactive[data-v-4b144346] {
position: relative;
}
.toggle-interactive .toggle-interactive--button[data-v-4b144346] {
position: absolute;
bottom: var(--default-grid-baseline);
inset-inline-end: var(--default-grid-baseline);
z-index: 10000;
}