zprovoznění přehrávače

css/style.css

@@ -123,26 +123,28 @@ article p:last-child {
   grid-template-rows: auto min-content;
   justify-items: center;
   align-items: center;
+  z-index: 5;
 }
 
 .hidden {
   display: none !important;
 }
 
-#togglePlay {
+#togglePlayIcon {
   height: 15vh;
 }
 
 .video-progress {
   width: 80%;
-  margin-bottom: 30px;
+  margin-bottom: max(30px,3vh);
   position: relative;
 }
 
 progress {
   position: absolute;
   width: 100%;
-  height: 5px;
+  height: 0.5vh;
+  min-height: 5px;
   border: none;
   background-color: #616161;
 }
@@ -156,7 +158,8 @@ progress::-moz-progress-bar {
   appearance: none;
   background: transparent;
   width: 100%;
-  height: 5px;
+  height: 0.5vh;
+  min-height: 5px;
   margin: 0;
   cursor: pointer;
   z-index: 5;
@@ -168,9 +171,9 @@ progress::-moz-progress-bar {
 
 .seek::-moz-range-thumb {
   background-color: #ffa800;
-  width: 23px;
-  height: 23px;
-  border-radius: 23px;
+  width: 2vh;
+  height: 2vh;
+  border-radius: 2vh;
   border: none;
 }
 
@@ -178,15 +181,28 @@ progress::-moz-progress-bar {
   position: absolute;
   background-color: #ffa800;
   width: 10%;
-  left: 45%;
-  height: 5px;
-  z-index: 1;
+  left: 35%;
+  height: 0.5vh;
+  min-height: 5px;
+  z-index: 6;
+}
+
+.videoComment:hover {
+  height: 0.9vh;
+  min-height: 9px;
+  margin-top: min(-2px ,-0.2vh);
+}
+
+.videoComment:hover img {
+  top: min(-33px, -1.3vh);
 }
 
 .videoComment img {
   position: relative;
-  top: -30px;
+  top: min(-35px,-1.5vh);
   left: 50%;
-  margin-left: -12px;
+  min-width: 28px;
+  width: 1vh;
+  margin-left: min(-14px,-0.5vh);
   cursor: pointer;
 }