updated accounts page: transition the store details when opening

styles/index.css

@@ -531,6 +531,28 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .delay-150 {
+    transition-delay: 150ms;
+  }
+  .delay-1000 {
+    transition-delay: 1000ms;
+  }
+  .delay-3000 {
+    transition-delay: 3000ms;
+  }
+  .delay-5000 {
+    transition-delay: 5000ms;
+  }
+  .delay-\[3s\] {
+    transition-delay: 3s;
+  }
+  .delay-\[3000\] {
+    transition-delay: 3000;
+  }
+  .duration-3000 {
+    --tw-duration: 3000ms;
+    transition-duration: 3000ms;
+  }
   .group-open\:border-b-\[0\.5rem\] {
     &:is(:where(.group):is([open], :popover-open, :open) *) {
       border-bottom-style: var(--tw-border-style);
@@ -655,6 +677,102 @@
       color: var(--color-sky-400);
     }
   }
+  .details-content\:transform-\[translate\(0px\,-1em\)\] {
+    &::details-content {
+      transform: translate(0px,-1em);
+    }
+  }
+  .details-content\:transform-\[translate\(0px\,-2em\)\] {
+    &::details-content {
+      transform: translate(0px,-2em);
+    }
+  }
+  .details-content\:transform-\[translate\(0px\,-3em\)\] {
+    &::details-content {
+      transform: translate(0px,-3em);
+    }
+  }
+  .details-content\:transform-\[translate\(0px\,-100px\)\] {
+    &::details-content {
+      transform: translate(0px,-100px);
+    }
+  }
+  .details-content\:transform-\[translate\(0px\,100px\)\] {
+    &::details-content {
+      transform: translate(0px,100px);
+    }
+  }
+  .details-content\:transform-\[translate\(100px\)\] {
+    &::details-content {
+      transform: translate(100px);
+    }
+  }
+  .details-content\:transform-\[translatey\(0px\,100px\)\] {
+    &::details-content {
+      transform: translatey(0px,100px);
+    }
+  }
+  .details-content\:border-none {
+    &::details-content {
+      --tw-border-style: none;
+      border-style: none;
+    }
+  }
+  .details-content\:border-transparent {
+    &::details-content {
+      border-color: transparent;
+    }
+  }
+  .details-content\:opacity-\[0\%\] {
+    &::details-content {
+      opacity: 0%;
+    }
+  }
+  .details-content\:opacity-\[0\] {
+    &::details-content {
+      opacity: 0;
+    }
+  }
+  .details-content\:outline-transparent {
+    &::details-content {
+      outline-color: transparent;
+    }
+  }
+  .details-content\:transition {
+    &::details-content {
+      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .details-content\:transition-\[opacity\] {
+    &::details-content {
+      transition-property: opacity;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .details-content\:transition-\[opacity_transform\] {
+    &::details-content {
+      transition-property: opacity transform;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .details-content\:transition-opacity {
+    &::details-content {
+      transition-property: opacity;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .details-content\:transition-transform {
+    &::details-content {
+      transition-property: transform, translate, scale, rotate;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
   .after\:float-right {
     &::after {
       content: var(--tw-content);
@@ -776,6 +894,158 @@
       background-color: var(--background);
     }
   }
+  .open\:details-content\:transform-\[translate\(0px\)\] {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        transform: translate(0px);
+      }
+    }
+  }
+  .open\:details-content\:transform-\[translate\(0px\,0px\)\] {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        transform: translate(0px,0px);
+      }
+    }
+  }
+  .open\:details-content\:border-x-0 {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        border-inline-style: var(--tw-border-style);
+        border-inline-width: 0px;
+      }
+    }
+  }
+  .open\:details-content\:border-x-\[0px\] {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        border-inline-style: var(--tw-border-style);
+        border-inline-width: 0px;
+      }
+    }
+  }
+  .open\:details-content\:border-t {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        border-top-style: var(--tw-border-style);
+        border-top-width: 1px;
+      }
+    }
+  }
+  .open\:details-content\:border-t-\[0\.25rem\] {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        border-top-style: var(--tw-border-style);
+        border-top-width: 0.25rem;
+      }
+    }
+  }
+  .open\:details-content\:border-r-0 {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        border-right-style: var(--tw-border-style);
+        border-right-width: 0px;
+      }
+    }
+  }
+  .open\:details-content\:border-b-0 {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: 0px;
+      }
+    }
+  }
+  .open\:details-content\:border-b-\[0\.25rem\] {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: 0.25rem;
+      }
+    }
+  }
+  .open\:details-content\:border-b-\[0px\] {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: 0px;
+      }
+    }
+  }
+  .open\:details-content\:border-l-0 {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        border-left-style: var(--tw-border-style);
+        border-left-width: 0px;
+      }
+    }
+  }
+  .open\:details-content\:border-dotted {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        --tw-border-style: dotted;
+        border-style: dotted;
+      }
+    }
+  }
+  .open\:details-content\:border-solid {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        --tw-border-style: solid;
+        border-style: solid;
+      }
+    }
+  }
+  .open\:details-content\:border-x-transparent {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        border-inline-color: transparent;
+      }
+    }
+  }
+  .open\:details-content\:border-t-background {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        border-top-color: var(--background);
+      }
+    }
+  }
+  .open\:details-content\:border-b-background {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        border-bottom-color: var(--background);
+      }
+    }
+  }
+  .open\:details-content\:border-b-transparent {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        border-bottom-color: transparent;
+      }
+    }
+  }
+  .open\:details-content\:opacity-\[1\] {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        opacity: 1;
+      }
+    }
+  }
+  .open\:details-content\:outline-transparent {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        outline-color: transparent;
+      }
+    }
+  }
+  .open\:details-content\:outline-dotted {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        --tw-outline-style: dotted;
+        outline-style: dotted;
+      }
+    }
+  }
   .hover\:scale-110 {
     &:hover {
       @media (hover: hover) {
@@ -1243,6 +1513,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-scale-x {
   syntax: "*";
   inherits: false;
@@ -1258,6 +1532,26 @@
   inherits: false;
   initial-value: 1;
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-content {
   syntax: "*";
   initial-value: "";
@@ -1285,9 +1579,15 @@
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-duration: initial;
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-content: "";
       --tw-leading: initial;
     }

templates/pages/accounts/{acctID.int64}/index.html.tmpl

@@ -68,7 +68,29 @@
 			{{- define "shop-list-entry" }}
 				{{/* .Platform, .AccountID */}}
 			<li class="my-[1rem] rounded-lg bg-accent">
-				<details class="group">
+				<details
+					class="
+						group
+
+						details-content:opacity-[0]
+						open:details-content:opacity-[1]
+
+						details-content:transform-[translate(0px,-2em)]
+						open:details-content:transform-[translate(0px,0px)]
+
+						details-content:border-transparent
+						open:details-content:border-dotted
+						open:details-content:border-x-[0px]
+						open:details-content:border-x-transparent
+						open:details-content:border-b-[0px]
+						open:details-content:border-b-transparent
+						open:details-content:border-t-background
+						open:details-content:border-t-[0.25rem]
+						details-content:outline-transparent
+
+						details-content:transition-[opacity_transform]
+					"
+				>
 					<summary class="
 						list-none
 						p-[1em]
@@ -79,10 +101,12 @@
 						after:text-[2em]
 						after:leading-[1em]
 						cursor-pointer
+					">
+						{{/*
 						group-open:border-b-background
 						group-open:border-b-[0.25rem]
 						border-dotted
-					">
+						*/}}
 						<h3 class="inline-block">{{.Platform}}</h3>
 					</summary>