entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 10 Releases Wiki Activity

scss: make .loader class available in all pages (#89221)
gitea/publik-base-theme/pipeline/head This commit looks good Details

This commit is contained in:
Frédéric Péters 2024-04-06 08:20:32 +02:00
parent 80432a11c2
commit 9912b1795e
2 changed files with 38 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
static/includes/_layout.scss
View File

@ -34,6 +34,12 @@ html, body {
min-height: 100vh;
}
@if variable-exists(primary-color) {
html {
--primary-color: #{$primary-color};
}
}
div#page {
display: flex;
min-height: 100vh;
@ -238,11 +244,6 @@ div#main-content {
}
body.pk-mini-page {
@if variable-exists(primary-color) {
--primary-color: #{$primary-color};
} @else {
--primary-color: #ccc;
}
margin: 0;
padding: 0;
background: #F2F2F2;
@ -260,34 +261,4 @@ body.pk-mini-page {
.pk-mini-page--content {
padding: 1em
}
.loader {
margin: 2em auto;
width: 40px;
height: 30px;
aspect-ratio: 1;
--c: linear-gradient(var(--primary-color) 0 0);
--r1: radial-gradient(farthest-side at bottom, var(--primary-color) 93%, var(--primary-color));
--r2: radial-gradient(farthest-side at top , var(--primary-color) 93%, var(--primary-color));
background: var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2);
background-repeat: no-repeat;
animation: l2 1s infinite alternate;
}
@keyframes l2 {
0%,25% {
background-size: 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
background-position: 0 50%, 0 calc(50% - 2px), 0 calc(50% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
}
50% {
background-size: 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
}
75% {
background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
}
95%,100% {
background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px;
background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(0% - 2px), 100% calc(100% + 2px);
}
}
}

32
static/includes/_misc.scss
View File

@ -847,3 +847,35 @@ div.leaflet-bottom, div.leaflet-top {
.leaflet-attribution-flag {
display: none !important;
}
.loader {
--loader-color: var(--primary-color, black);
margin: 2em auto;
width: 40px;
height: 30px;
aspect-ratio: 1;
--c: linear-gradient(var(--loader-color) 0 0);
--r1: radial-gradient(farthest-side at bottom, var(--loader-color) 93%, var(--loader-color));
--r2: radial-gradient(farthest-side at top , var(--loader-color) 93%, var(--loader-color));
background: var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2), var(--c), var(--r1), var(--r2);
background-repeat: no-repeat;
animation: l2 1s infinite alternate;
}
@keyframes l2 {
0%,25% {
background-size: 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
background-position: 0 50%, 0 calc(50% - 2px), 0 calc(50% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
}
50% {
background-size: 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(50% - 2px), 50% calc(50% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
}
75% {
background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px, 8px 0, 8px 4px, 8px 4px;
background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(50% - 2px), 100% calc(50% + 2px);
}
95%,100% {
background-size: 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px, 8px 100%, 8px 4px, 8px 4px;
background-position: 0 50%, 0 calc(0% - 2px), 0 calc(100% + 2px), 50% 50%, 50% calc(0% - 2px), 50% calc(100% + 2px), 100% 50%, 100% calc(0% - 2px), 100% calc(100% + 2px);
}
}