Fixed animation bugs in Edge

src/main/resources/static/css/dimensions.css

@@ -31,13 +31,12 @@
     --top-info-label: 4.188rem;
     --top-inner-dot: 0.375rem;
     --top-detailed-hw-info-div: 1.168rem;
-    --top-controls-div: 0.750rem;
-    --top-controls-div-before: 1.250rem;
+    --top-controls-img: 0.750rem;
     --top-announcement: 3.813rem;
     --top-contacts-label: 1.500rem;
     --top-contacts-description-first: 3.125rem;
     --top-contacts-description-second: 3.813rem;
-    --top-contacts-links-img: 4.906rem;
+    --top-contacts-links-a-img: 4.906rem;
     --top-uptime-rectangle-grid: 1.925rem;
     --top-chart-label: 1.500rem;
     --top-chart-triangle-grid: 0.500rem;
@@ -82,9 +81,8 @@
     --left-second-divider: 14.563rem;
     --left-controls-first: 0.750rem;
     --left-controls-second: 19.250rem;
-    --left-controls-div-before: 0.313rem;
-    --left-contacts-links-first: 8.075rem;
-    --left-contacts-links-second: 11.700rem;
+    --left-contacts-links-a-first: 8.075rem;
+    --left-contacts-links-a-second: 11.700rem;
     --left-uptime-squares-grid: 9.250rem;
     --left-uptime-rectangle-grid: 2.781rem;
     --left-chart-label: 1.500rem;
@@ -147,9 +145,9 @@
     --height-detailed-hw-info-div: 1.063rem;
     --height-dividers-div: 3.125rem;
     --height-controls: 2.625rem;
-    --height-controls-div: 1.875rem;
-    --height-contacts-links-img: 2.125rem;
-    --height-uptime: 8.281rem;
+    --height-controls-img: 1.875rem;
+    --height-contacts-links-a-img: 2.125rem;
+    --height-uptime: 8.270rem;
     --height-uptime-squares-grid-div: 0.625rem;
     --height-values-grid-div: 3.188rem;
     --height-labels-grid-div: 0.813rem;
@@ -193,11 +191,11 @@
     --width-detailed-hw-info-div: 5.625rem;
     --width-dividers-div: 0.063rem;
     --width-controls: 100%;
-    --width-controls-div: 1.875rem;
+    --width-controls-img: 1.875rem;
     --width-announcement: 21.875rem;
     --width-contacts-label: 21.875rem;
     --width-contacts-description-div: 21.875rem;
-    --width-contacts-links-img: 2.125rem;
+    --width-contacts-links-a-img: 2.125rem;
     --width-uptime: 100%;
     --width-uptime-squares-grid-div: 0.625rem;
     --width-values-grid-div: 3.750rem;
@@ -224,8 +222,6 @@
     --border-chart-container: 0.063rem;
 
     /* border-width */
-    --border-width-controls-first-before: 0.638rem 0.638rem 0.000rem 0.638rem;
-    --border-width-controls-second-before: 0.638rem 0.638rem 0.000rem 0.638rem;
     --border-width-chart-triangle-grid-div: 0.438rem 0.438rem 0.000rem 0.438rem;
 
     /* border-radius */
@@ -236,7 +232,7 @@
     --border-radius-card-footer-dots-grid-div: 50%;
     --border-radius-inner-dot: 50%;
     --border-radius-error-gif: 50%;
-    --border-radius-controls-div: 50%;
+    --border-radius-controls-img: 50%;
     --border-radius-error-div: 1.250rem;
 
     /* letter-spacing */
@@ -251,12 +247,10 @@
     --transform-form-squares-grid-second: scale(1.3);
     --transform-theme-button-div-active: scale(0.9);
     --transform-submit-button-active: scale(0.9);
-    --transform-controls-first: rotate(90deg);
-    --transform-controls-first-active: scale(0.9) rotate(90deg);
-    --transform-controls-second: rotate(-90deg);
-    --transform-controls-second-active: scale(0.9) rotate(-90deg);
-    --transform-contacts-links-first-active: scale(0.9);
-    --transform-contacts-links-second-active: scale(0.9);
+    --transform-controls-first-active: scale(0.9);
+    --transform-controls-second-active: scale(0.9);
+    --transform-contacts-links-a-first-active: scale(0.9);
+    --transform-contacts-links-a-second-active: scale(0.9);
     --transform-uptime-squares-grid-second: scale(1.3);
     --transform-chart-rectangle-grid-div-active: scale(0.9);
 }

src/main/resources/static/css/layout.css

@@ -723,21 +723,19 @@ body
     width: var(--width-controls);
 }
 
-.controls > div
+.controls > img
 {
     position: absolute;
-    top: var(--top-controls-div);
+    top: var(--top-controls-img);
     z-index: 2;
-    height: var(--height-controls-div);
-    width: var(--width-controls-div);
-    border-radius: var(--border-radius-controls-div);
-    background: var(--background-controls-div);
+    height: var(--height-controls-img);
+    width: var(--width-controls-img);
+    border-radius: var(--border-radius-controls-img);
 }
 
 .controls > .first
 {
     left: var(--left-controls-first);
-    transform: var(--transform-controls-first);
     animation: wiggle-first-control;
     animation-duration: var(--animation-duration-wiggle-first-control);
 }
@@ -745,31 +743,10 @@ body
 .controls > .second
 {
     left: var(--left-controls-second);
-    transform: var(--transform-controls-second);
     animation: wiggle-second-control;
     animation-duration: var(--animation-duration-wiggle-second-control);
 }
 
-.controls > div::before
-{
-    position: relative;
-    top: var(--top-controls-div-before);
-    left: var(--left-controls-div-before);
-    content: "";
-    border-style: solid;
-    border-color: var(--background-controls-div-before) transparent;
-}
-
-.controls > .first::before
-{
-    border-width: var(--border-width-controls-first-before);
-}
-
-.controls > .second::before
-{
-    border-width: var(--border-width-controls-second-before);
-}
-
 .controls > .first:active
 {
     transform: var(--transform-controls-first-active);
@@ -856,30 +833,30 @@ body
 .contacts-links > a > img
 {
     position: absolute;
-    top: var(--top-contacts-links-img);
+    top: var(--top-contacts-links-a-img);
     z-index: 1;
-    height: var(--height-contacts-links-img);
-    width: var(--width-contacts-links-img);
+    height: var(--height-contacts-links-a-img);
+    width: var(--width-contacts-links-a-img);
 }
 
 .contacts-links > a > .first
 {
-    left: var(--left-contacts-links-first);
+    left: var(--left-contacts-links-a-first);
 }
 
 .contacts-links > a > .first:active
 {
-    transform: var(--transform-contacts-links-first-active);
+    transform: var(--transform-contacts-links-a-first-active);
 }
 
 .contacts-links > a > .second
 {
-    left: var(--left-contacts-links-second);
+    left: var(--left-contacts-links-a-second);
 }
 
 .contacts-links > a > .second:active
 {
-    transform: var(--transform-contacts-links-second-active);
+    transform: var(--transform-contacts-links-a-second-active);
 }
 
 .uptime

src/main/resources/static/css/themes.css

@@ -82,8 +82,6 @@ html[theme = "light"]
     --background-footer-third-card-footer-dots-grid-div-inner-dot: var(--green);
     --background-card-footer-dots-grid-div: var(--white);
     --background-dividers-div: var(--white);
-    --background-controls-div: var(--white-opacity-40);
-    --background-controls-div-before: var(--white-opacity-70);
     --background-uptime: var(--linear-gradient-uptime-light);
     --background-uptime-squares-grid-first: var(--blue-light);
     --background-uptime-squares-grid-second: var(--red-light);
@@ -168,8 +166,6 @@ html[theme = "dark"]
     --background-footer-third-card-footer-dots-grid-div-inner-dot: var(--grey-light);
     --background-card-footer-dots-grid-div: var(--grey-dark);
     --background-dividers-div: var(--grey-dark);
-    --background-controls-div: var(--white-opacity-40);
-    --background-controls-div-before: var(--white-opacity-70);
     --background-uptime: var(--linear-gradient-uptime-dark);
     --background-uptime-squares-grid-first: var(--grey-light);
     --background-uptime-squares-grid-second: var(--grey-light);

src/main/resources/templates/index.html

@@ -187,8 +187,8 @@
                 <div class = "col-6 col-lg-6 col-xl-4">
                     <div class = "card">
                         <div class = "controls">
-                            <div id = "first-control" class = "first"></div>
-                            <div id = "second-control" class = "second"></div>
+                            <img id = "first-control" class = "first" th:src = @{/img/controls/left.png} />
+                            <img id = "second-control" class = "second" th:src = @{/img/controls/right.png} />
                         </div>
                         <div class = "pages">
                             <div id = "location-page" class = "first">