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

@@ -1028,6 +1028,46 @@ video {
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;
}
@@ -1068,6 +1108,10 @@ video {
margin: 0.5rem;
}
.m-4 {
margin: 1rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
@@ -1166,10 +1210,6 @@ video {
margin-top: 1.5rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.block {
display: block;
}
@@ -1198,6 +1238,10 @@ video {
display: none;
}
.h-1 {
height: 0.25rem;
}
.h-16 {
height: 4rem;
}
@@ -1222,10 +1266,28 @@ video {
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%;
}
@@ -1361,6 +1423,10 @@ video {
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));
}
@@ -1381,10 +1447,6 @@ video {
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));
}
@@ -1405,6 +1467,10 @@ video {
align-content: center;
}
.items-start {
align-items: flex-start;
}
.items-center {
align-items: center;
}
@@ -1429,6 +1495,10 @@ video {
gap: 1rem;
}
.gap-5 {
gap: 1.25rem;
}
.gap-x-1 {
-moz-column-gap: 0.25rem;
column-gap: 0.25rem;
@@ -1445,6 +1515,12 @@ video {
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;
}
@@ -1502,6 +1578,10 @@ video {
border-top-width: 1px;
}
.border-t-2 {
border-top-width: 2px;
}
.border-solid {
border-style: solid;
}
@@ -1640,11 +1720,21 @@ video {
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));
@@ -1655,11 +1745,6 @@ video {
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;
}
@@ -1767,6 +1852,10 @@ video {
padding-top: 1rem;
}
.pt-0 {
padding-top: 0px;
}
.text-left {
text-align: left;
}
@@ -2167,6 +2256,10 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
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;
@@ -2236,6 +2329,11 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
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));
@@ -2335,6 +2433,15 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
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;
}
@@ -2481,6 +2588,31 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
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));
@@ -2525,11 +2657,21 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
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));
@@ -2675,6 +2817,11 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
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);
@@ -2775,6 +2922,11 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
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));
@@ -2830,6 +2982,11 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
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));
@@ -2857,6 +3014,30 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, 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;
@@ -2890,6 +3071,10 @@ h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
flex: 1 1 auto;
}
.md\:grid-cols-16 {
grid-template-columns: repeat(16, minmax(0, 1fr));
}
.md\:pt-8 {
padding-top: 2rem;
}