added spacing

awaisab172 · Jul 30, 2018 · 45c3b7f · 45c3b7f
1 parent 4de2b4d
commit 45c3b7f
Showing 1 changed file with 41 additions and 35 deletions.
diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css
@@ -9,19 +9,19 @@ html {
 body {
   margin: 0;
   padding: 0;
-  display:flex;
-  background:#7A419B;
-  min-height:100vh;
+  display: flex;
+  background: #7A419B;
+  min-height: 100vh;
   background: linear-gradient(135deg, #7c1599 0%,#921099 48%,#7e4ae8 100%);
-  background-size:cover;
+  background-size: cover;
   align-items: center;
   justify-content: center;
 }
 
 .player {
-  max-width:750px;
-  border:5px solid rgba(0,0,0,0.2);
-  box-shadow:0 0 20px rgba(0,0,0,0.2);
+  max-width: 750px;
+  border: 5px solid rgba(0,0,0,0.2);
+  box-shadow: 0 0 20px rgba(0,0,0,0.2);
   position: relative;
   font-size: 0;
   overflow: hidden;
@@ -43,78 +43,80 @@ body {
 }
 
 .player__button {
-  background:none;
-  border:0;
-  line-height:1;
-  color:white;
+  background: none;
+  border: 0;
+  line-height: 1;
+  color: white;
   text-align: center;
-  outline:0;
+  outline: 0;
   padding: 0;
-  cursor:pointer;
-  max-width:50px;
+  cursor: pointer;
+  max-width: 50px;
 }
 
 .player__button:focus {
   border-color: #ffc600;
 }
 
 .player__slider {
-  width:10px;
-  height:30px;
+  width: 10px;
+  height: 30px;
 }
 
 .player__controls {
-  display:flex;
+  display: flex;
   position: absolute;
-  bottom:0;
+  bottom: 0;
   width: 100%;
   transform: translateY(100%) translateY(-5px);
-  transition:all .3s;
-  flex-wrap:wrap;
-  background:rgba(0,0,0,0.1);
+  transition: all .3s;
+  flex-wrap: wrap;
+  background: rgba(0,0,0,0.1);
 }
 
 .player:hover .player__controls {
   transform: translateY(0);
 }
 
 .player:hover .progress {
-  height:15px;
+  height: 15px;
 }
 
 .player__controls > * {
-  flex:1;
+  flex: 1;
 }
 
 .progress {
-  flex:10;
+  flex: 10;
   position: relative;
-  display:flex;
-  flex-basis:100%;
-  height:5px;
-  transition:height 0.3s;
-  background:rgba(0,0,0,0.5);
-  cursor:ew-resize;
+  display: flex;
+  flex-basis: 100%;
+  height: 5px;
+  transition: height 0.3s;
+  background: rgba(0,0,0,0.5);
+  cursor: ew-resize;
 }
 
 .progress__filled {
-  width:50%;
-  background:#ffc600;
-  flex:0;
-  flex-basis:50%;
+  width: 50%;
+  background: #ffc600;
+  flex: 0;
+  flex-basis: 50%;
 }
 
 /* unholy css to style input type="range" */
 
 input[type=range] {
   -webkit-appearance: none;
-  background:transparent;
+  background: transparent;
   width: 100%;
   margin: 0 5px;
 }
+
 input[type=range]:focus {
   outline: none;
 }
+
 input[type=range]::-webkit-slider-runnable-track {
   width: 100%;
   height: 8.4px;
@@ -124,6 +126,7 @@ input[type=range]::-webkit-slider-runnable-track {
   border-radius: 1.3px;
   border: 0.2px solid rgba(1, 1, 1, 0);
 }
+
 input[type=range]::-webkit-slider-thumb {
   height: 15px;
   width: 15px;
@@ -134,9 +137,11 @@ input[type=range]::-webkit-slider-thumb {
   margin-top: -3.5px;
   box-shadow:0 0 2px rgba(0,0,0,0.2);
 }
+
 input[type=range]:focus::-webkit-slider-runnable-track {
   background: #bada55;
 }
+
 input[type=range]::-moz-range-track {
   width: 100%;
   height: 8.4px;
@@ -146,6 +151,7 @@ input[type=range]::-moz-range-track {
   border-radius: 1.3px;
   border: 0.2px solid rgba(1, 1, 1, 0);
 }
+
 input[type=range]::-moz-range-thumb {
   box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
   height: 15px;