From 5485fbf8b32780969292068e783160c57c8e86a6 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Mon, 19 Jun 2017 16:00:45 +0300
Subject: [PATCH] optionsUI: more flexboxes and relative widths

* also center the UI vertically in Opera
* allow body width to grow up to 800px in FF/Opera/etc
* use :: in pseudo selectors
---
 options/index.css | 46 ++++++++++++++++++++++++++++++----------------
 1 file changed, 30 insertions(+), 16 deletions(-)

diff --git a/options/index.css b/options/index.css
index b1501ed7..8262040b 100644
--- a/options/index.css
+++ b/options/index.css
@@ -1,10 +1,12 @@
 html.opera {
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
 }
 
 html.opera body {
-  display: inline-block;
-  text-align: initial;
+  width: auto;
 }
 
 html.firefox .block {
@@ -19,7 +21,15 @@ body {
   margin: 0;
   font-family: "Helvetica Neue", Helvetica, sans-serif;
   font-size: 12px;
-  width: calc(16px + 100px + 8px + 260px + 8px + 60px + 4px + 16px);
+  width: 480px;
+  min-width: 400px;
+  max-width: 800px;
+}
+
+@media (min-width: 401px) {
+  .firefox body {
+    width: calc(100% - 6px); /* TODO: rework to avoid compensating padding of 'html.firefox .block'  */
+  }
 }
 
 .firefox .chromium-only {
@@ -31,7 +41,7 @@ body {
   align-items: center;
   margin: 1em 0;
   border-bottom: 1px dotted #ccc;
-  padding: 0 0 1em 16px;
+  padding: 0 16px 1em;
   position: relative;
 }
 
@@ -41,29 +51,31 @@ body {
 }
 
 h1 {
-  width: 100px;
+  width: 30%;
   margin: 0;
   font-size: 120%;
   font-weight: bold;
   padding-right: 8px;
+  box-sizing: border-box;
   word-wrap: break-word;
 }
 
+.items {
+  width: 70%;
+}
+
 label {
-  display: block;
-  white-space: nowrap;
+  display: flex;
   margin: .25ex 0;
 }
 
 label > * {
-  display: inline-block;
-  vertical-align: middle;
+  /*vertical-align: middle;*/
 }
 
 label > :first-child {
-  width: 260px;
-  white-space: normal;
   margin-right: 8px;
+  flex-grow: 1;
 }
 
 label:not([disabled]) > :first-child {
@@ -80,6 +92,7 @@ input[type="color"],
 .onoffswitch {
   width: 60px;
   box-sizing: border-box;
+  flex-shrink: 0;
 }
 
 a {
@@ -140,7 +153,7 @@ input[type="color"] {
   margin-top: 1px;
 }
 
-#updates-installed:after {
+#updates-installed::after {
   content: attr(data-value);
   margin-left: .5ex;
   font-weight: bold;
@@ -221,10 +234,11 @@ sup {
   box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1);
 }
 
-.onoffswitch span:before {
+.onoffswitch span::before {
   content: "";
   display: block;
   width: 18px;
+  height: 18px;
   margin: -3px;
   background: #efefef;
   position: absolute;
@@ -239,7 +253,7 @@ sup {
   background-color: #CAEBE3;
 }
 
-.onoffswitch input:checked + span, .onoffswitch input:checked + span:before {
+.onoffswitch input:checked + span, .onoffswitch input:checked + span::before {
   border-color: #CAEBE3;
 }
 
@@ -247,7 +261,7 @@ sup {
   margin-left: 0;
 }
 
-.onoffswitch input:checked + span:before {
+.onoffswitch input:checked + span::before {
   right: 0;
   background-color: #04BA9F;
   box-shadow: 3px 6px 18px 0 rgba(0, 0, 0, 0.2);