Spaces:
Running
Running
File size: 2,859 Bytes
db4f1f9 54f1737 f68f600 54f1737 f778a95 54f1737 f778a95 54f1737 f778a95 e5231eb f778a95 54f1737 f778a95 54f1737 f778a95 54f1737 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
body {
padding: 2rem;
font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
}
h1 {
font-size: 16px;
margin-top: 0;
}
p {
color: rgb(107, 114, 128);
font-size: 15px;
margin-bottom: 10px;
margin-top: 5px;
}
.card {
max-width: 620px;
margin: 0 auto;
padding: 16px;
border: 1px solid lightgray;
border-radius: 16px;
}
.card p:last-child {
margin-bottom: 0;
}
/* Sortable Table Header Styles */
.sortable-header {
cursor: pointer;
position: relative; /* Needed for pseudo-element positioning */
padding-right: 20px; /* Make space for the arrow */
}
.sortable-header::after {
content: '';
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
opacity: 0.4; /* Dim by default */
}
.sortable-header:hover::after {
opacity: 0.7; /* Slightly brighter on hover */
}
.sortable-header.sort-asc::after {
border-bottom: 5px solid var(--text-color); /* Arrow pointing up */
opacity: 1;
}
.sortable-header.sort-desc::after {
border-top: 5px solid var(--text-color); /* Arrow pointing down */
opacity: 1;
}
/* Spinner Styles */
#loading {
display: flex;
flex-direction: column; /* Stack spinner and message */
align-items: center;
justify-content: center;
min-height: 150px; /* Give it some space */
text-align: center;
font-size: 1.2em;
color: var(--muted-text-color);
}
.spinner {
border: 3px solid transparent;
width: 40px;
height: 40px;
border-radius: 50%;
border-top-color: var(--primary-color);
border-left-color: var(--primary-color);
margin-bottom: 20px;
animation: spin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
position: relative;
will-change: transform;
}
.skeleton {
background: linear-gradient(90deg, rgba(22, 27, 34, 0.2) 25%, rgba(22, 27, 34, 0.3) 50%, rgba(22, 27, 34, 0.2) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 8px;
min-height: 100px;
}
@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.spinner::after {
content: '';
position: absolute;
top: -6px;
left: -6px;
right: -6px;
bottom: -6px;
border: 3px solid transparent;
border-radius: 50%;
border-top-color: rgba(88, 166, 255, 0.3);
border-left-color: rgba(88, 166, 255, 0.3);
animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite reverse;
}
#loading-message {
font-size: 1rem; /* Slightly smaller message */
}
@keyframes spin {
0% {
transform: rotate(0deg);
opacity: 1;
}
50% {
opacity: 0.7;
}
100% {
transform: rotate(360deg);
opacity: 1;
}
}
|