mirror of
https://github.com/go-gitea/gitea.git
synced 2026-09-18 18:45:42 +00:00
silverwind
2b10f77e42
Update to [mermaid v12](https://github.com/mermaid-js/mermaid/releases#release-mermaid@12.0.0), ELK is now the default layout so the plugin and all supporting code is gone. Layout switching to previous `dagre` layout via frontmatter works as expected. Diagrams use the new `neo` default look which renders them slightly different (smaller boxes) then the `classic` look that was default in v11. The `neo` look got some tweaks to remove shadows and gradient to look better. Also did some related refactors and mermaid dragging now works on touch devices too.
114 lines
2.3 KiB
CSS
114 lines
2.3 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 > *,
|
|
.btn-octicon.is-loading > *,
|
|
.button.is-loading > * {
|
|
opacity: 0;
|
|
}
|
|
|
|
.is-loading::after {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
left: 50%;
|
|
top: 50%;
|
|
height: var(--loading-size, 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: 3px;
|
|
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 {
|
|
height: var(--height-loading);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.rotate-clockwise {
|
|
animation: rotate-clockwise-keyframes 1s linear infinite;
|
|
}
|
|
|
|
@keyframes rotate-clockwise-keyframes {
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|