разработана аутентификация и регистрация аккаунта

mirzaev/site/account/system/public/css/account.css

@@ -19,7 +19,14 @@ main {
   align-items: unset;
 }
 
+div.column {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
 section.panel {
+    --display     : flex;
     z-index       : 1000;
     width         : 400px;
     position      : absolute;
@@ -27,6 +34,10 @@ section.panel {
     flex-direction: column;
 }
 
+div.column>section.panel {
+    position      : unset;
+}
+
 section.panel.medium {
   width: 300px;
 }
@@ -43,7 +54,6 @@ section.panel#classic {
   margin-left: 570px;
 }
 
-
 section.panel>section.body>ul {
   margin: 0 5%;
   padding: 0;
@@ -61,6 +71,34 @@ section.panel>section.body>ul>li {
   animation-fill-mode      : forwards;
   animation-timing-function: cubic-bezier(.47,0,.74,.71);
 }
+
+section.panel>section.body>dl {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+section.panel>section.body>dl>* {
+  word-break: break-word;
+  animation-duration       : .35s;
+  animation-name           : uprise;
+  animation-fill-mode      : forwards;
+  animation-timing-function: cubic-bezier(.47,0,.74,.71);
+}
+
+section.panel>section.body>dl>dt {
+  margin-left: 20px;
+  display: none;
+  font-size: 0.9rem;
+  font-weight: bold;
+}
+
+section.panel>section.body>dl>dd {
+  margin-left: unset;
+  font-size: 0.8rem;
+}
+
 section.panel>section.header {
     z-index           : 1000;
     height            : 50px;

mirzaev/site/account/system/public/css/animations.css

@@ -21,3 +21,44 @@
     filter: blur(0px);
   }
 }
+
+@keyframes window-vertical-open {
+  0% {
+    height: 0;
+    opacity: 0;
+  }
+  
+  100% {
+    height: var(--height, inherit);
+    opacity: var(--opacity, 1);
+  }
+}
+
+@keyframes window-vertical-close {
+  0% {
+    height: var(--height, inherit);
+    opacity: var(--opacity, 1);
+  }
+  
+  100% {
+    height: 0;
+    opacity: 0;
+  }
+}
+
+
+.animation.window:not(.hidden, .horizontal) {
+  overflow: hidden;
+  animation-duration       : .1s;
+  animation-name           : window-vertical-open;
+  animation-fill-mode      : forwards;
+  animation-timing-function: ease-in;
+}
+
+.animation.window.hidden:not(.horizontal) {
+  overflow: hidden;
+  animation-duration       : .05s;
+  animation-name           : window-vertical-close;
+  animation-fill-mode      : forwards;
+  animation-timing-function: ease-out;
+}

mirzaev/site/account/system/public/css/main.css

@@ -1,5 +1,3 @@
-@import url('/fonts/commissioner.ttf');
-
 @media (prefers-color-scheme: light) {
     :root {
         --background-above-1       : #fff;
@@ -81,9 +79,8 @@
     user-select          : none;
 }
 
-.hidden {
+.hidden:not(.animation) {
   display: none !important;
-  opacity: 0;
 }
 
 * {