mirror of
https://github.com/nextcloud/spreed.git
synced 2025-07-21 05:46:02 +00:00
50 lines
2.2 KiB
CSS
50 lines
2.2 KiB
CSS
/**
|
|
* SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
|
|
* SPDX-License-Identifier: AGPL-3.0-or-later
|
|
*/
|
|
|
|
.settings-section-placeholder {
|
|
--settings-section-placeholder-header-height: 30px;
|
|
--settings-section-placeholder-line-height: 1lh;
|
|
--settings-section-placeholder-padding: 1em;
|
|
--settings-section-placeholder-image: linear-gradient(90deg, var(--color-placeholder-light) 65%, var(--color-placeholder-dark) 70%, var(--color-placeholder-light) 75%);
|
|
position: relative;
|
|
height: calc(2 * (7 * var(--default-grid-baseline)) + var(--settings-section-placeholder-header-height) + 3 * (var(--settings-section-placeholder-line-height) + 1em));
|
|
}
|
|
|
|
.settings-section-placeholder::before,
|
|
.settings-section-placeholder::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: calc(7 * var(--default-grid-baseline));
|
|
background-clip: content-box;
|
|
background-origin: content-box;
|
|
animation: loading-animation 3s forwards infinite linear;
|
|
}
|
|
|
|
.settings-section-placeholder::before {
|
|
max-width: 300px;
|
|
background: var(--settings-section-placeholder-image) 0 0 / 200vw var(--settings-section-placeholder-header-height) repeat-x content-box;
|
|
}
|
|
|
|
.settings-section-placeholder::after {
|
|
max-width: 900px;
|
|
background:
|
|
var(--settings-section-placeholder-image) 0 calc(var(--settings-section-placeholder-header-height) + 1em + 0 * (var(--settings-section-placeholder-line-height) + 1em)) / 200vw var(--settings-section-placeholder-line-height) repeat-x content-box,
|
|
var(--settings-section-placeholder-image) 0 calc(var(--settings-section-placeholder-header-height) + 1em + 1 * (var(--settings-section-placeholder-line-height) + 1em)) / 200vw var(--settings-section-placeholder-line-height) repeat-x content-box,
|
|
var(--settings-section-placeholder-image) 0 calc(var(--settings-section-placeholder-header-height) + 1em + 2 * (var(--settings-section-placeholder-line-height) + 1em)) / 200vw var(--settings-section-placeholder-line-height) repeat-x content-box;
|
|
}
|
|
|
|
.settings-section-placeholder + .settings-section-placeholder {
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
@keyframes loading-animation {
|
|
0% {
|
|
background-position-x: 0;
|
|
}
|
|
100% {
|
|
background-position-x: 140vw;
|
|
}
|
|
}
|