mirror of
https://github.com/go-gitea/gitea.git
synced 2025-04-24 18:38:46 +03:00
02e49a0f47
In the file tree, the icons are not vertically centered, which affects the overall visual consistency. Currently, the icons of submodules and symlinks do not adopt the value of entryIcon, resulting in inconsistent icon display. before:  after:  --------- Co-authored-by: silverwind <me@silverwind.io>
129 lines
2.5 KiB
CSS
129 lines
2.5 KiB
CSS
@keyframes isloadingspin {
|
|
0% { transform: translate(-50%, -50%) rotate(0deg); }
|
|
100% { transform: translate(-50%, -50%) rotate(360deg); }
|
|
}
|
|
|
|
.is-loading {
|
|
pointer-events: none !important;
|
|
position: relative !important;
|
|
}
|
|
|
|
.is-loading > * {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.btn.is-loading > *,
|
|
.button.is-loading > * {
|
|
opacity: 0;
|
|
}
|
|
|
|
.is-loading::after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
left: 50%;
|
|
top: 50%;
|
|
height: min(4em, 66.6%);
|
|
width: fit-content; /* compat: safari - https://bugs.webkit.org/show_bug.cgi?id=267625 */
|
|
aspect-ratio: 1;
|
|
transform: translate(-50%, -50%);
|
|
animation: isloadingspin 1000ms infinite linear;
|
|
border-width: 4px;
|
|
border-style: solid;
|
|
border-color: var(--color-secondary) var(--color-secondary) var(--color-secondary-dark-8) var(--color-secondary-dark-8);
|
|
border-radius: var(--border-radius-full);
|
|
}
|
|
|
|
.is-loading.loading-icon-2px::after {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.is-loading.loading-icon-3px::after {
|
|
border-width: 3px;
|
|
}
|
|
|
|
/* for single form button, the loading state should be on the button, but not go semi-transparent, just replace the text on the button with the loader. */
|
|
form.single-button-form.is-loading > * {
|
|
opacity: 1;
|
|
}
|
|
|
|
form.single-button-form.is-loading .button {
|
|
color: transparent;
|
|
}
|
|
|
|
.markup pre.is-loading,
|
|
.editor-loading.is-loading,
|
|
.pdf-content.is-loading {
|
|
height: var(--height-loading);
|
|
}
|
|
|
|
.markup .is-loading > * {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.markup .is-loading {
|
|
color: transparent;
|
|
background: transparent;
|
|
}
|
|
|
|
/* TODO: not needed, use "is-loading loading-icon-2px" instead */
|
|
code.language-math.is-loading::after {
|
|
padding: 0;
|
|
border-width: 2px;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
|
|
@keyframes fadein {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeout {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* 1p5 means 1-point-5. it can't use "pulse" here, otherwise the animation is not right (maybe due to some conflicts */
|
|
@keyframes pulse-1p5 {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.5);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* pulse animation for scale(1.5) in 200ms */
|
|
.pulse-1p5-200 {
|
|
animation: pulse-1p5 200ms linear;
|
|
}
|
|
|
|
.ui.modal,
|
|
.ui.dimmer.transition {
|
|
animation-name: fadein;
|
|
animation-duration: 100ms;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
.circular-spin {
|
|
animation: circular-spin-keyframes 1s linear infinite;
|
|
}
|
|
|
|
@keyframes circular-spin-keyframes {
|
|
100% {
|
|
transform: rotate(-360deg);
|
|
}
|
|
}
|