From af070725a4d823ae584fc11c794cafdcd5f1e4c9 Mon Sep 17 00:00:00 2001
From: Zak Hsieh <zhsieh@book.com>
Date: Sat, 10 Jun 2017 23:27:04 +0800
Subject: [PATCH] IOS-12828: Adjust iPhone SE scrubber styles and add iPhone
 6/6 Plus/iPad Pro 12.9 media queries

---
 shared_resources/css/scrubber.css | 312 +++++++++++++++++++++++++++---
 1 file changed, 286 insertions(+), 26 deletions(-)

diff --git a/shared_resources/css/scrubber.css b/shared_resources/css/scrubber.css
index 1055b5a72..3751616c5 100644
--- a/shared_resources/css/scrubber.css
+++ b/shared_resources/css/scrubber.css
@@ -53,14 +53,14 @@ input[type=range] {
     padding: 5px;
 }
 
-/* iPhone portrait */
+/* iPhone SE portrait */
 @media only screen
 and (min-device-width : 320px)
 and (max-device-width : 568px)
 and (orientation : portrait) {
     input[type=range]::-webkit-slider-runnable-track {
         width: 300px;
-        height: 15px;
+        height: 5px;
         background: #ddd;
         border: none;
         border-radius: 3px;
@@ -69,11 +69,11 @@ and (orientation : portrait) {
     input[type=range]::-webkit-slider-thumb {
         -webkit-appearance: none;
         border: none;
-        height: 70px;
-        width: 70px;
+        height: 15px;
+        width: 15px;
         border-radius: 50%;
         background: white;
-        margin-top: -28px;
+        margin-top: -5px;
     }
 
     input[type=range]:focus {
@@ -84,20 +84,77 @@ and (orientation : portrait) {
         background: #ccc;
     }
 
+    #scrubber {
+        padding-bottom: 0px;
+    }
+
+    #scrubber_range {
+        margin-top: 8px;
+        margin-bottom: 10px;
+    }
+
     .scruber_item_img {
-        height: 400px;
-        padding: 20px;
+        width: 100px;
+        height: auto;
+        padding: 3px;
     }
 }
 
-/* iPhone landscape */
+/* iPhone SE landscape */
 @media only screen
 and (min-device-width : 320px)
 and (max-device-width : 568px)
 and (orientation : landscape) {
     input[type=range]::-webkit-slider-runnable-track {
         width: 300px;
-        height: 8px;
+        height: 5px;
+        background: #ddd;
+        border: none;
+        border-radius: 3px;
+    }
+
+    input[type=range]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        border: none;
+        height: 15px;
+        width: 15px;
+        border-radius: 50%;
+        background: white;
+        margin-top: -5px;
+    }
+
+    input[type=range]:focus {
+        outline: none;
+    }
+
+    input[type=range]:focus::-webkit-slider-runnable-track {
+        background: #ccc;
+    }
+
+    #scrubber {
+        padding-bottom: 8px;
+    }
+
+    #scrubber_range {
+        margin-top: 4px;
+        margin-bottom: 1px;
+    }
+
+    .scruber_item_img {
+        width: auto;
+        height: 40%;
+        padding: 5px;
+    }
+}
+
+/* iPhone 6 portrait */
+@media only screen
+and (min-device-width : 375px)
+and (max-device-width : 667px)
+and (orientation : portrait) {
+    input[type=range]::-webkit-slider-runnable-track {
+        width: 300px;
+        height: 7px;
         background: #ddd;
         border: none;
         border-radius: 3px;
@@ -106,11 +163,58 @@ and (orientation : landscape) {
     input[type=range]::-webkit-slider-thumb {
         -webkit-appearance: none;
         border: none;
-        height: 40px;
-        width: 40px;
+        height: 20px;
+        width: 20px;
         border-radius: 50%;
         background: white;
-        margin-top: -16px;
+        margin-top: -7px;
+    }
+
+    input[type=range]:focus {
+        outline: none;
+    }
+
+    input[type=range]:focus::-webkit-slider-runnable-track {
+        background: #ccc;
+    }
+
+    #scrubber {
+        padding-bottom: 0px;
+    }
+
+    #scrubber_range {
+        margin-top: 8px;
+        margin-bottom: 10px;
+    }
+
+    .scruber_item_img {
+        width: 117px;
+        height: auto;
+        padding: 4px;
+    }
+}
+
+/* iPhone 6 landscape */
+@media only screen
+and (min-device-width : 375px)
+and (max-device-width : 667px)
+and (orientation : landscape) {
+    input[type=range]::-webkit-slider-runnable-track {
+        width: 300px;
+        height: 7px;
+        background: #ddd;
+        border: none;
+        border-radius: 3px;
+    }
+
+    input[type=range]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        border: none;
+        height: 20px;
+        width: 20px;
+        border-radius: 50%;
+        background: white;
+        margin-top: -7px;
     }
 
     input[type=range]:focus {
@@ -126,13 +230,108 @@ and (orientation : landscape) {
     }
 
     #scrubber_range {
-        margin-top: 15px;
-        margin-bottom: 15px;
+        margin-top: 8px;
+        margin-bottom: 1px;
     }
 
     .scruber_item_img {
-        height: 200px;
-        padding: 10px;
+        width: auto;
+        height: 40%;
+        padding: 5px;
+    }
+}
+
+/* iPhone 6 Plus portrait */
+@media only screen
+and (min-device-width : 414px)
+and (max-device-width : 736px)
+and (orientation : portrait) {
+    input[type=range]::-webkit-slider-runnable-track {
+        width: 300px;
+        height: 7px;
+        background: #ddd;
+        border: none;
+        border-radius: 3px;
+    }
+
+    input[type=range]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        border: none;
+        height: 20px;
+        width: 20px;
+        border-radius: 50%;
+        background: white;
+        margin-top: -7px;
+    }
+
+    input[type=range]:focus {
+        outline: none;
+    }
+
+    input[type=range]:focus::-webkit-slider-runnable-track {
+        background: #ccc;
+    }
+
+    #scrubber {
+        padding-bottom: 0px;
+    }
+
+    #scrubber_range {
+        margin-top: 8px;
+        margin-bottom: 10px;
+    }
+
+    .scruber_item_img {
+        width: 130px;
+        height: auto;
+        padding: 4px;
+    }
+}
+
+/* iPhone 6 Plus landscape */
+@media only screen
+and (min-device-width : 414px)
+and (max-device-width : 736px)
+and (orientation : landscape) {
+    input[type=range]::-webkit-slider-runnable-track {
+        width: 300px;
+        height: 7px;
+        background: #ddd;
+        border: none;
+        border-radius: 3px;
+    }
+
+    input[type=range]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        border: none;
+        height: 20px;
+        width: 20px;
+        border-radius: 50%;
+        background: white;
+        margin-top: -7px;
+    }
+
+    input[type=range]:focus {
+        outline: none;
+    }
+
+    input[type=range]:focus::-webkit-slider-runnable-track {
+        background: #ccc;
+    }
+
+    #scrubber {
+        padding-bottom: 10px;
+    }
+
+    #scrubber_range {
+        margin-top: 8px;
+        margin-bottom: 1px;
+    }
+
+    .scruber_item_img {
+        width: auto;
+        height: 40%;
+        padding: 5px;
     }
 }
 
@@ -152,11 +351,11 @@ and (orientation : portrait) {
     input[type=range]::-webkit-slider-thumb {
         -webkit-appearance: none;
         border: none;
-        height: 60px;
-        width: 60px;
+        height: 45px;
+        width: 45px;
         border-radius: 50%;
         background: white;
-        margin-top: -23px;
+        margin-top: -15px;
     }
 
     input[type=range]:focus {
@@ -167,9 +366,19 @@ and (orientation : portrait) {
         background: #ccc;
     }
 
+    #scrubber {
+        padding-bottom: 10px;
+    }
+
+    #scrubber_range {
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+
     .scruber_item_img {
-        height: 400px;
-        padding: 20px;
+        width: 240px;
+        height: auto;
+        padding: 8px;
     }
 }
 
@@ -180,7 +389,7 @@ and (max-device-width : 1024px)
 and (orientation : landscape) {
     input[type=range]::-webkit-slider-runnable-track {
         width: 300px;
-        height: 6px;
+        height: 10px;
         background: #ddd;
         border: none;
         border-radius: 4px;
@@ -189,11 +398,11 @@ and (orientation : landscape) {
     input[type=range]::-webkit-slider-thumb {
         -webkit-appearance: none;
         border: none;
-        height: 40px;
-        width: 40px;
+        height: 35px;
+        width: 35px;
         border-radius: 50%;
         background: white;
-        margin-top: -17px;
+        margin-top: -13px;
     }
 
     input[type=range]:focus {
@@ -204,13 +413,64 @@ and (orientation : landscape) {
         background: #ccc;
     }
 
+    #scrubber {
+        padding-bottom: 10px;
+    }
+
     #scrubber_range {
         margin-top: 10px;
         margin-bottom: 10px;
     }
 
     .scruber_item_img {
-        height: 256px;
+        height: 35%;
+        padding: 10px;
+    }
+}
+
+/* iPad Pro 12.9 portrait */
+@media only screen
+and (min-device-width : 1024px)
+and (max-device-width : 1336px)
+and (orientation : portrait) {
+    input[type=range]::-webkit-slider-runnable-track {
+        width: 300px;
+        height: 15px;
+        background: #ddd;
+        border: none;
+        border-radius: 4px;
+    }
+
+    input[type=range]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        border: none;
+        height: 45px;
+        width: 45px;
+        border-radius: 50%;
+        background: white;
+        margin-top: -15px;
+    }
+
+    input[type=range]:focus {
+        outline: none;
+    }
+
+    input[type=range]:focus::-webkit-slider-runnable-track {
+        background: #ccc;
+    }
+
+    #scrubber {
+        padding-bottom: 10px;
+    }
+
+    #scrubber_range {
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+
+    .scruber_item_img {
+        width: 300px;
+        height: auto;
         padding: 20px;
     }
 }