redesign

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

@@ -5,7 +5,7 @@
         left   : 130%;
         bottom : -200%;
         width  : 120px;
-        opacity: 1;
+        opacity: 0.7;
     }
 }
 
@@ -19,18 +19,14 @@ section#authentication {
 }
 
 section#authentication>section.header {
-    z-index                  : 1000;
-    height                   : 100px;
-    margin-left              : -50px;
-    padding                  : 30px 0;
-    display                  : flex;
-    clip-path                : url(#authentication-header-mask);
-    border-radius            : 3px 3px 0 0;
-    animation-duration       : 120s;
-    animation-name           : background;
-    animation-iteration-count: infinite;
-    background-repeat        : no-repeat;
-    animation-timing-function: ease-in-out;
+    z-index           : 1000;
+    height            : 100px;
+    margin-left       : -50px;
+    padding           : 30px 0;
+    display           : flex;
+    clip-path         : url(#authentication-header-mask);
+    border-radius     : 3px 3px 0 0;
+    animation-duration: 120s;
 }
 
 section#authentication>section.header>img.avatar {
@@ -60,6 +56,20 @@ section#authentication>section.header>img.avatar:hover {
     -moz-box-shadow   : 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
 }
 
+section#authentication>section.header>img.cover {
+    z-index        : -5000;
+    left           : -50px;
+    top            : 0;
+    position       : absolute;
+    width          : calc(100% + 100px);
+    height         : 100%;
+    object-position: 0px 30%;
+    object-fit     : cover;
+    clip-path      : polygon(50px 0, calc(100% - 50px) 0, calc(100% - 50px) 100%, 50px 100%);
+    border-radius  : 0 0 3px 3px;
+    background     : var(--background-above);
+}
+
 section#authentication>section.header>div.glare {
     z-index                  : 3000;
     left                     : -30px;
@@ -83,7 +93,7 @@ section#authentication>section.header>div {
     animation-duration: 80s;
 }
 
-section#authentication>section.header>h3 {
+section#authentication>section.header>a {
     margin        : auto;
     width         : 100%;
     margin-left   : 110px;
@@ -92,27 +102,24 @@ section#authentication>section.header>h3 {
     overflow-x    : hidden;
     text-overflow : ellipsis;
     font-size     : 1.3em;
+    font-weight   : bold;
     color         : var(--text-inverse);
     text-shadow   : 0 0 8px #00000080;
 }
 
-section#authentication>section.body {
-    margin-top        : -160px;
-    padding           : 180px 30px 20px 30px;
-    gap               : 3ex;
-    display           : flex;
-    flex-direction    : column;
-    border-radius     : 3px;
-    background-color  : var(--background-above);
-    box-shadow        : 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
-    -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
-    -moz-box-shadow   : 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
-}
 
-section#authentication>section.body>a {
-    margin-left: 5%;
-    font-size  : 1.2em;
-    font-weight: bold;
+section#authentication>section.body {
+    margin-top           : -160px;
+    padding              : 180px 30px 20px 30px;
+    gap                  : 3ex;
+    display              : flex;
+    flex-direction       : column;
+    border-radius        : 3px;
+    background-color     : var(--background-above);
+    /* background-image  : radial-gradient(circle at 70% 20%, #000000A0 0%, var(--background-above) 75%); */
+    box-shadow           : 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
+    -webkit-box-shadow   : 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
+    -moz-box-shadow      : 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
 }
 
 section#authentication>section.body>ul {

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

@@ -14,7 +14,7 @@
         top : -230%;
     }
 
-    to {
+    100% {
         left: -250%;
         top : -300%;
     }
@@ -36,7 +36,7 @@
         top : -300%;
     }
 
-    to {
+    100% {
         left: -280%;
         top : -80%;
     }
@@ -58,17 +58,13 @@
         top : -80%;
     }
 
-    to {
+    100% {
         left: -180%;
         top : -100%;
     }
 }
 
 @keyframes wrap-background {
-    from {
-        background-color: #ff5c5c;
-    }
-
     25% {
         background-color: #9395ff;
     }
@@ -81,7 +77,7 @@
         background-color: #534eff;
     }
 
-    to {
+    100% {
         background-color: #ff5c5c;
     }
 }
@@ -94,6 +90,7 @@
     animation-iteration-count: infinite;
     background-repeat        : no-repeat;
     animation-timing-function: ease-in-out;
+    background-color         : #ff5c5c;
 }
 
 :is(div, section).gradient>div:not(.gradient) {