Issue 5384 - Introduced dedicated mobile options page

skin/mobile-options.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
- * Copyright (C) 2006-2017 eyeo GmbH
+ * Copyright (C) 2006-present eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-weight: 300;
+  font-style: normal;
+  src: url("fonts/Source-Sans-Pro/300.woff2") format("woff2");
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-weight: 400;
+  font-style: normal;
+  src: url("fonts/Source-Sans-Pro/400.woff2") format("woff2");
+}
+
+@font-face
+{
+  font-family: "Source Sans Pro";
+  font-weight: 700;
+  font-style: normal;
+  src: url("fonts/Source-Sans-Pro/700.woff2") format("woff2");
+  ;
+}
+
+body,
+input
+{
+  font-family: "Source Sans Pro", sans-serif;
+  font-size: 14px;
+}
 
 body
 {
   text-align: center;
-  font-family: sans-serif;
-  font-size: 14px;
-  color: #3E4347;
+  color: #494949;
 }
 
 main,
 [role="dialog"]
 {
   text-align: start;
 }
 
 main
 {
@@ skipping 26 matching lines @@
 
 h2
 {
   font-size: 1em;
 }
 
 a:link,
 a:visited
 {
   text-decoration: none;
-  color: #0A9BD0;
+  color: #099DD1;
 }
 
 [hidden]
 {
   display: none !important;
 }
 
 #acceptableAds-more
 {
   white-space: nowrap;
 }
 
 /* Lists */
 
 ul
 {
   margin: 0;
   padding: 0;
 }
 
 ul > li
 {
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  min-height: 36px;
+  min-height: 46px;
   padding: 5px 10px;
-  border: 1px solid #BCBCBC;
+  border: 1px solid #BBBBBB;
   border-bottom: none;
   list-style: none;
 }
 
 ul > li > span
 {
-  flex: 1;
+  flex: auto;
   padding: 10px;
   word-wrap: break-word;
   overflow: hidden;
 }
 
 /* Form elements */
 
 input[type="text"]
 {
   min-width: 220px;
   padding: 5px 0;
   border: 0;
-  border-bottom: 1px solid #BCBCBC;
+  border-bottom: 1px solid #BBBBBB;
 }
 
 input[type="text"]::placeholder
 {
-  color: #9E9E9E;
+  color: #BBBBBB;
+  opacity: 1; /* Firefox sets opacity so we need to override it */
 }
 
 input[type="text"]:focus::placeholder
 {
   color: transparent;
 }
 
 input[type="text"]:not(:focus):placeholder-shown ~ label,
 input[type="text"]:not(:placeholder-shown) ~ .error
 {
   visibility: hidden
 }
 
 .toggle-container
 {
   display: flex;
 }
 
 .toggle-container > span
 {
-  flex-grow: 1;
+  flex: auto;
 }
 
 .toggle-container input
 {
   display: none;
 }
 
 .toggle-image
 {
   display: inline-block;
   flex-shrink: 0;
   width: 36px;
   height: 21px;
   background-image: url(mobile/toggle.png);
 }
 
 input:checked + .toggle-image
 {
   background-position: 0 -22px;
 }
 
 button
 {
   width: 100%;
-  height: 45px;
+  height: 46px; /* equal to height of list item */
   border: none;
   font-weight: 600;
   text-transform: uppercase;
-  color: #0A9BD0;
+  color: #099DD1;
   background: none;
 }
 
 button.primary,
 button.secondary
 {
-  height: 36px;
+  height: auto;
   margin: 5px 0;
+  padding: 10px;
   border: 1px solid;
   border-radius: 2px;
 }
 
 button.primary
 {
   color: #FFF;
-  border-color: #0A9BD0;
-  background-color: #0A9BD0;
+  border-color: #099DD1;
+  background-color: #099DD1;
 }
 
 button.secondary
 {
-  border-color: #BCBCBC;
+  border-color: #BBBBBB;
 }
 
 button.remove
 {
   width: 36px;
   height: 36px;
   padding: 0;
-  background-color: #0A9BD0;
+  background-color: #099DD1;
   mask: url(mobile/trash.svg) center/19px no-repeat;
 }
 
 ul + button
 {
   width: 100%;
-  border: 1px solid #BCBCBC;
+  padding: 0 20px; /* based on margin and padding of list item */
+  border: 1px solid #BBBBBB;
+  text-align: start;
 }
 
 /* Dialogs */
 
 #dialog
 {
   display: flex;
   align-items: flex-start;
   justify-content: center;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  padding-top: 20px;
+  padding: 20px;
   background: rgba(0, 0, 0, 0.7);
   z-index: 101;
 }
 
 [role="dialog"]
 {
   max-width: 25em;
   padding: 0;
-  border: 1px solid #BCBCBC;
+  border: 1px solid #BBBBBB;
   background-color: #FFF;
 }
 
 [role="dialog"] h2
 {
   margin: 0;
 }
 
 [role="dialog"] form
 {
   padding: 20px;
 }
 
 [role="dialog"] p
 {
   display: flex;
   flex-direction: column;
   margin: 5px 0;
 }
 
 [role="dialog"] label
 {
   order: 1;
   display: block;
   margin: 5px 0;
   font-size: 10px;
 }
 
-[role="dialog"] menu
-{
-  display: flex;
-  margin: 0;
-  padding: 0;
-  border-top: 1px solid #BCBCBC;
-}
-
 [role="dialog"] input[type="text"]
 {
   order: 2;
 }
 
 [role="dialog"] .error
 {
   order: 3;
   margin-top: 5px;
   font-size: 12px;
-  color: #D1142A;
+  color: #C11D26;
 }
 
 [role="dialog"]:not([data-error]) .error,
 #dialog-subscribe:not([data-error="title"]) .error[data-error="title"],
 #dialog-subscribe:not([data-error="url"]) .error[data-error="url"]
 {
   visibility: hidden;
 }
 
 #dialog-subscribe[data-error="title"] [name="title"]:placeholder-shown,
 #dialog-subscribe[data-error="url"] [name="url"]:placeholder-shown
 {
-  border-color: #D1142A;
+  border-color: #C11D26;
 }
 
 body:not([data-dialog]) #dialog,
 body:not([data-dialog="recommended"]) #dialog-recommended,
 body:not([data-dialog="subscribe"]) #dialog-subscribe
 {
   display: none;
 }
 
 #dialog-recommended
 {
   display: flex;
   flex-direction: column;
-  top: 20px;
-  max-height: calc(100vh - 40px);
+  max-height: 100%;
 }
 
 #dialog-recommended ul
 {
   width: auto;
   margin: 0;
   overflow-y: auto;
 }
 
 #dialog-recommended ul li
 {
   border: none;
 }
 
 #dialog-recommended ul li.installed
 {
-  color: #A1A1A1;
+  color: #BBBBBB;
 }
 
 #dialog-recommended ul li::before
 {
   flex-shrink: 0;
   width: 13px;
   height: 11px;
   margin: 10px;
   content: "";
 }
 
 #dialog-recommended ul li.installed::before
 {
-  background-color: #A1A1A1;
+  background-color: #BBBBBB;
   mask: url(mobile/checkmark.svg) center/cover no-repeat;
 }
 
-#dialog-recommended menu
-{
-  flex-shrink: 0;
-}
+#dialog-recommended > button
+{
+  border-width: 1px 0 0 0;
+  text-align: center;
+}