Add timeline to timemachine page

This commit is contained in:
2023-12-17 08:57:06 +11:00
parent 5903915810
commit abe2e53b32
6 changed files with 407 additions and 34 deletions

View File

@@ -735,6 +735,36 @@ video {
.-top-4 {
top: -1rem;
}
.top-1 {
top: 0.25rem;
}
.-top-10 {
top: -2.5rem;
}
.bottom-10 {
bottom: 2.5rem;
}
.bottom-5 {
bottom: 1.25rem;
}
.bottom-7 {
bottom: 1.75rem;
}
.bottom-4 {
bottom: 1rem;
}
.bottom-2 {
bottom: 0.5rem;
}
.bottom-3 {
bottom: 0.75rem;
}
.bottom-1 {
bottom: 0.25rem;
}
.bottom-0 {
bottom: 0px;
}
.z-40 {
z-index: 40;
}
@@ -765,6 +795,9 @@ video {
.m-2 {
margin: 0.5rem;
}
.m-4 {
margin: 1rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
@@ -839,9 +872,6 @@ video {
.mt-6 {
margin-top: 1.5rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.block {
display: block;
}
@@ -863,6 +893,9 @@ video {
.hidden {
display: none;
}
.h-1 {
height: 0.25rem;
}
.h-16 {
height: 4rem;
}
@@ -881,9 +914,23 @@ video {
.h-8 {
height: 2rem;
}
.h-max {
height: -moz-max-content;
height: max-content;
}
.h-4 {
height: 1rem;
}
.h-3 {
height: 0.75rem;
}
.max-h-12 {
max-height: 3rem;
}
.max-h-fit {
max-height: -moz-fit-content;
max-height: fit-content;
}
.max-h-full {
max-height: 100%;
}
@@ -986,6 +1033,9 @@ video {
.grid-flow-col {
grid-auto-flow: column;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@@ -1001,9 +1051,6 @@ video {
.grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
@@ -1019,6 +1066,9 @@ video {
.content-center {
align-content: center;
}
.items-start {
align-items: flex-start;
}
.items-center {
align-items: center;
}
@@ -1037,6 +1087,9 @@ video {
.gap-4 {
gap: 1rem;
}
.gap-5 {
gap: 1.25rem;
}
.gap-x-1 {
-moz-column-gap: 0.25rem;
column-gap: 0.25rem;
@@ -1050,6 +1103,11 @@ video {
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.overflow-auto {
overflow: auto;
}
@@ -1093,6 +1151,9 @@ video {
.border-t {
border-top-width: 1px;
}
.border-t-2 {
border-top-width: 2px;
}
.border-solid {
border-style: solid;
}
@@ -1203,10 +1264,18 @@ video {
--tw-bg-opacity: 1;
background-color: rgb(253 242 248 / var(--tw-bg-opacity));
}
.bg-pink-800 {
--tw-bg-opacity: 1;
background-color: rgb(157 23 77 / var(--tw-bg-opacity));
}
.bg-red-400 {
--tw-bg-opacity: 1;
background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}
.bg-red-50 {
--tw-bg-opacity: 1;
background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1215,10 +1284,6 @@ video {
--tw-bg-opacity: 1;
background-color: rgb(254 252 232 / var(--tw-bg-opacity));
}
.bg-red-50 {
--tw-bg-opacity: 1;
background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}
.bg-opacity-75 {
--tw-bg-opacity: 0.75;
}
@@ -1301,6 +1366,9 @@ video {
.pt-4 {
padding-top: 1rem;
}
.pt-0 {
padding-top: 0px;
}
.text-left {
text-align: left;
}
@@ -1681,6 +1749,9 @@ h6 a {
--tw-text-opacity: 1;
color: rgb(30 58 138 / var(--tw-text-opacity));
}
.hover\:block:hover {
display: block;
}
.hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
@@ -1736,6 +1807,10 @@ h6 a {
--tw-bg-opacity: 1;
background-color: rgb(251 207 232 / var(--tw-bg-opacity));
}
.hover\:bg-pink-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(244 114 182 / var(--tw-bg-opacity));
}
.hover\:bg-red-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -1814,6 +1889,13 @@ h6 a {
outline: 2px solid transparent;
outline-offset: 2px;
}
.group:hover .group-hover\:block {
display: block;
}
.group:hover .group-hover\:bg-pink-400 {
--tw-bg-opacity: 1;
background-color: rgb(244 114 182 / var(--tw-bg-opacity));
}
.prose-p\:m-1 :is(:where(p):not(:where([class~=not-prose] *))) {
margin: 0.25rem;
}
@@ -1927,6 +2009,26 @@ h6 a {
--tw-border-opacity: 1;
border-color: rgb(30 41 59 / var(--tw-border-opacity));
}
.dark\:border-indigo-600 {
--tw-border-opacity: 1;
border-color: rgb(79 70 229 / var(--tw-border-opacity));
}
.dark\:border-indigo-200 {
--tw-border-opacity: 1;
border-color: rgb(199 210 254 / var(--tw-border-opacity));
}
.dark\:border-indigo-800 {
--tw-border-opacity: 1;
border-color: rgb(55 48 163 / var(--tw-border-opacity));
}
.dark\:border-indigo-100 {
--tw-border-opacity: 1;
border-color: rgb(224 231 255 / var(--tw-border-opacity));
}
.dark\:border-indigo-300 {
--tw-border-opacity: 1;
border-color: rgb(165 180 252 / var(--tw-border-opacity));
}
.dark\:bg-amber-400 {
--tw-bg-opacity: 1;
background-color: rgb(251 191 36 / var(--tw-bg-opacity));
@@ -1962,10 +2064,18 @@ h6 a {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.dark\:bg-indigo-200 {
--tw-bg-opacity: 1;
background-color: rgb(199 210 254 / var(--tw-bg-opacity));
}
.dark\:bg-indigo-400 {
--tw-bg-opacity: 1;
background-color: rgb(129 140 248 / var(--tw-bg-opacity));
}
.dark\:bg-indigo-800 {
--tw-bg-opacity: 1;
background-color: rgb(55 48 163 / var(--tw-bg-opacity));
}
.dark\:bg-indigo-950 {
--tw-bg-opacity: 1;
background-color: rgb(30 27 75 / var(--tw-bg-opacity));
@@ -2082,6 +2192,10 @@ h6 a {
--tw-text-opacity: 1;
color: rgb(250 204 21 / var(--tw-text-opacity));
}
.dark\:text-indigo-200 {
--tw-text-opacity: 1;
color: rgb(199 210 254 / var(--tw-text-opacity));
}
.dark\:shadow-pink-200 {
--tw-shadow-color: #fbcfe8;
--tw-shadow: var(--tw-shadow-colored);
@@ -2162,6 +2276,10 @@ h6 a {
--tw-bg-opacity: 1;
background-color: rgb(162 28 175 / var(--tw-bg-opacity));
}
.dark\:hover\:bg-indigo-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(129 140 248 / var(--tw-bg-opacity));
}
.dark\:hover\:bg-orange-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(154 52 18 / var(--tw-bg-opacity));
@@ -2206,6 +2324,10 @@ h6 a {
--tw-text-opacity: 1;
color: rgb(71 85 105 / var(--tw-text-opacity));
}
.group:hover .dark\:group-hover\:bg-indigo-400 {
--tw-bg-opacity: 1;
background-color: rgb(129 140 248 / var(--tw-bg-opacity));
}
.dark\:prose-a\:text-blue-600 :is(:where(a):not(:where([class~=not-prose] *))) {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity));
@@ -2228,6 +2350,24 @@ h6 a {
}
}
@media (min-width: 768px) {
.md\:col-span-14 {
grid-column: span 14 / span 14;
}
.md\:col-span-2 {
grid-column: span 2 / span 2;
}
.md\:col-span-1 {
grid-column: span 1 / span 1;
}
.md\:col-span-15 {
grid-column: span 15 / span 15;
}
.md\:col-span-13 {
grid-column: span 13 / span 13;
}
.md\:col-span-3 {
grid-column: span 3 / span 3;
}
.md\:mx-0 {
margin-left: 0px;
margin-right: 0px;
@@ -2253,6 +2393,9 @@ h6 a {
.md\:flex-auto {
flex: 1 1 auto;
}
.md\:grid-cols-16 {
grid-template-columns: repeat(16, minmax(0, 1fr));
}
.md\:pt-8 {
padding-top: 2rem;
}