From 7d60a5bb7a45153b25b09d2890c01ba26579a9dd Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Wed, 18 Jul 2018 22:16:26 -0400
Subject: [PATCH] Fix-fake button wrapping

---
 popup/popup.css | 126 +++++++++++++++++++++++++++++++-----------------
 1 file changed, 82 insertions(+), 44 deletions(-)

diff --git a/popup/popup.css b/popup/popup.css
index 15e11918..8ab2c491 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -12,23 +12,27 @@ html {
   /* Chrome 66-?? adds a gap equal to the scrollbar width,
      which looks like a bug, see https://crbug.com/821143 */
   overflow: overlay;
+  max-height: 600px;
 }
 
 html, body {
   height: min-content;
-  max-height: 600px;
 }
 
 body {
   width: 252px;
+  max-height: 596px;
   font-size: 12px;
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
-  margin: 0;
+  margin: 0 0 1px;
+  color: hsl(0, 0%, 20%);
+  background-color: hsl(0, 0%, 88%);
+  border: 1px solid hsl(0, 0%, 80%);
+  box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, .4);
 }
 
-.firefox body {
-  color: #000;
-  background-color: #fff;
+body.blocked {
+  background-color: hsl(0, 0%, 90%);
 }
 
 body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
@@ -41,14 +45,12 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
 }
 /************ checkbox ************/
 
-.style-name:hover input[type="checkbox"]:checked {
-  border-color: hsl(0, 0%, 32%);
-  background-color: hsl(0, 0%, 82%);
+.style-name:hover input[type="checkbox"] {
+  border-color: hsl(0, 0%, 10%);
 }
 
-.style-name:hover input[type="checkbox"] {
-  border-color: hsl(0, 0%, 32%);
-  background-color: hsl(0, 0%, 82%);
+.style-name:hover input[type="checkbox"]:checked + .svg-icon.checked {
+  fill: hsl(0, 0%, 0%);
 }
 
 #disable-all-wrapper input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
@@ -59,11 +61,11 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
 }
 
 #installed.disabled + .actions #disableAll:checked + .svg-icon.checked {
-  fill: hsl(0, 68%, 42%);
+  fill: hsl(0, 100%, 36%);
 }
 
 #installed.disabled + .actions #disableAll:checked {
-  border-color: hsl(0, 68%, 50%);
+  border-color: hsl(0, 100%, 36%);
 }
 
 #installed.disabled + .actions #disableAll:checked:hover + .svg-icon.checked {
@@ -71,17 +73,16 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
 }
 
 #disableAll:hover {
-  border-color: hsl(0, 68%, 50%);
-  background-color: hsl(20, 70%, 75%);
+  border-color: hsl(0, 100%, 36%);
 }
 
 #disableAll-label:hover {
-  color: hsl(0, 68%, 42%);
+  color: hsl(0, 100%, 36%);
 }
 
 #installed.disabled + .actions #disableAll:checked:hover {
-  border-color: hsl(0, 50%, 56%);
-  background-color: hsl(0, 50%, 56%);
+  border-color: hsl(0, 100%, 36%);
+  background-color: hsl(0, 100%, 36%);
 }
 
 #installed .style-name .checker,
@@ -109,8 +110,11 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
 }
 
 #no-styles {
+  background-color: hsl(0, 0%, 91%);
   padding: 4px var(--outer-padding) 6px;
   font-weight: bold;
+  border-bottom: 1px solid hsl(0, 0%, 80%);
+  box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, .4);
 }
 
 #find-styles-link {
@@ -146,13 +150,13 @@ body.blocked > DIV {
 }
 
 #installed {
-  border-bottom: 1px solid black;
-  padding-bottom: 2px;
-  padding-top: 2px;
   max-height: 445px;
   overflow-y: auto;
   counter-reset: style-number;
   position: relative;
+  background-color: hsl(0, 0%, 88%);
+  border-bottom: 1px solid hsl(0, 0%, 80%);
+  box-shadow: 0 1px 0 0 hsla(0, 0%, 100%, .4);
 }
 
 #installed.disabled .style-name {
@@ -161,7 +165,7 @@ body.blocked > DIV {
 
 #installed.disabled + .actions #disableAll-label {
   font-weight: bold;
-  color: firebrick;
+  color: hsl(0, 100%, 36%);
 }
 
 #installed .actions {
@@ -179,12 +183,17 @@ body.blocked > DIV {
   display: flex;
   align-items: center;
   height: 26px;
-  padding: 0 14px 0 0;
+  padding: 0 13px 0 0;
   position: relative;
+  box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, .4);
+}
+
+.entry:not(:last-of-type) {
+  border-bottom: 1px solid hsl(0, 0%, 80%);
 }
 
 html[style] .entry {
-  padding: 0 16px 0 0;
+  padding: 0 15px 0 0;
 }
 
 #no-styles.entry {
@@ -193,6 +202,9 @@ html[style] .entry {
 
 .entry .actions {
   display: inline-flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
 }
 
 .style-name {
@@ -215,7 +227,7 @@ html[style] .entry {
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(to right, hsla(180, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 50%, transparent);
+  background: linear-gradient(to right, hsla(0, 0%, 50%, 0.2), hsla(0, 0%, 50%, 0.05) 50%, transparent);
   pointer-events: none;
   opacity: 0;
   transition: opacity .1s;
@@ -235,8 +247,20 @@ html[style] .entry {
   padding-right: 5px;
 }
 
+.entry:nth-child(odd) {
+  background-color: hsl(0, 0%, 91%);
+}
+
 .entry:nth-child(even) {
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: hsl(0, 0%, 88%);
+}
+
+.reverse-stripe .entry:nth-child(even) {
+  background-color: hsl(0, 0%, 91%);
+}
+
+.reverse-stripe .entry:nth-child(odd) {
+  background-color: hsl(0, 0%, 88%);
 }
 
 .entry:nth-child(-n+10):before,
@@ -259,15 +283,12 @@ html[style*="border"] .entry:nth-child(11):before {
   right: 7px;
 }
 
-.entry .actions {
-  margin-left: -1px;
-  margin-right: -1px;
-}
-
 .entry .actions > * {
-  display: inline-block;
-  padding: 0 1px;
-  margin: 0 1px;
+  display: inline-flex;
+  height: 18px;
+  width: 18px;
+  align-items: center;
+  justify-content: center;
 }
 
 .not-applied .checker,
@@ -342,13 +363,29 @@ html[style*="border"] .entry:nth-child(11):before {
 .svg-icon {
   pointer-events: none;
   transition: fill .5s;
-  width: 14px;
+  width: 16px;
   height: 16px;
-  fill: #666;
+  fill: hsl(0, 0%, 54%);
 }
 
-a:hover .svg-icon {
-  fill: #000;
+.entry .actions .svg-icon.config {
+  height: 15px;
+  width: 15px;
+  margin-left: -2px;
+}
+
+.entry .actions .svg-icon.edit {
+  width: 14px;
+}
+
+.entry .actions .svg-icon.remove {
+  width: 12px;
+  margin-left: -2px;
+}
+
+a:hover .svg-icon,
+#message-box-close-icon:hover .svg-icon {
+  fill: hsl(0, 0%, 10%);
 }
 
 body > .actions {
@@ -460,7 +497,7 @@ body.blocked .actions > .main-controls {
 #popup-options {
   display: flex;
   flex-direction: row;
-  padding: var(--outer-padding) 1px;
+  padding: var(--outer-padding) 1px 8px;
 }
 
 #popup-options button {
@@ -516,10 +553,11 @@ body.blocked .actions > .main-controls {
   max-height: 80%;
   min-height: 6em;
   padding: 1em;
-  background-color: #fff;
+  background-color: hsl(0, 0%, 92%);
   display: flex;
   flex-direction: column;
-  border: solid 2px rgba(0, 0, 0, 0.5);
+  border: solid 1px hsl(0, 0%, 40%);
+  box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 1);
 }
 
 #confirm > div > *:not(:last-child) {
@@ -593,12 +631,13 @@ body.blocked .actions > .main-controls {
   cursor: auto;
   display: flex;
   flex-direction: column;
-  border-left: 2px solid white;
   box-shadow: 0 0 90px rgba(0, 0, 0, .5);
   z-index: 5;
 }
 
 #hotkey-info div:first-child {
+  background-color: hsl(0, 0%, 90%);
+  box-shadow: inset 0 0 0 1px hsla(0, 0%, 80%, .4);
   flex-grow: 1;
   padding: 0 1em;
   font-size: 11px;
@@ -607,12 +646,11 @@ body.blocked .actions > .main-controls {
 
 #hotkey-info div {
   padding: 1em;
-  border-top: 1px solid #ddd;
-  background-color: white;
 }
 
 #hotkey-info div:last-child {
   box-shadow: 0 0 90px rgba(0, 0, 0, .25);
+  background-color: hsl(0, 0%, 80%);
   position: relative;
 }