1 files changed, 66 insertions, 47 deletions

diff --git a/data/extensions/https-everywhere@eff.org/pages/options/style.css b/data/extensions/https-everywhere@eff.org/pages/options/style.css
index d0f4324..032a7ba 100644
--- a/data/extensions/https-everywhere@eff.org/pages/options/style.css
+++ b/data/extensions/https-everywhere@eff.org/pages/options/style.css
@@ -1,35 +1,30 @@
+@import "../main.css";
+
 body{
-  min-width: 500px;
-  min-height: 250px;
-  display: block;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
 }
 
-@media (prefers-color-scheme: dark) {
-  body {
-    background-color: #202023;
-    color: #f9f9fa;
-  }
-
-  .section-header-span, div#update-channels-warning {
-    color: #000;
-  }
-
-  textarea, input[type=text] {
-    background-color: #202023;
-    color: #f9f9fa;
-  }
+/*---------
+# GRID LAYOUT
+---------*/
+.header-wrapper, .section-wrapper {
+  margin: auto;
 }
-
-a.settings{
-	background-color: #1c87c9;
-	border: none;
-	color: white;
-	padding: 20px 34px;
-	text-align: center;
-	text-decoration: none;
-	display: inline-block;
-	font-size: 20px;
-	margin: 4px 2px;
+.header-wrapper {
+  display: inline-flex;
+  grid-column: 2;
+  grid-row: 1;
+}
+.section-wrapper {
+  grid-column: 2;
+  grid-row: 2;
+}
+#add-disabled-site-wrapper {
+  float: left;
+}
+#add-update-channel-wrapper {
+  display: inline-block;
 }
 
 .settings-wrapper{
@@ -63,6 +58,11 @@ a.settings{
 }
 
 /** Disabled Sites Option**/
+#add-disabled-site-invalid-host {
+  font-weight: bold;
+  color: red;
+  display: none;
+}
 .disabled-rules-wrapper-header {
   font-weight: bold;
   padding-left: 5px;
@@ -71,7 +71,7 @@ img.remove{
   cursor: pointer;
   float: right;
   height: 15px;
-  margin: 10px 0 0 8%;
+  margin-top: -34px;
   width: 15px;
 }
 .disabled-rule-list-item:last-of-type {
@@ -79,12 +79,11 @@ img.remove{
 }
 .disabled-rule-list-item {
   border-bottom: 1px solid #ccc;
-  display: inline-flex;
-  margin-left: 5%;
-  width: 80%;
+  clear: both;
 }
 .disabled-rule-list-item p {
-  width: 100%;
+  width: 80%;
+  word-wrap: anywhere;
 }
 
 .section-header{
@@ -101,28 +100,30 @@ img.remove{
 }
 
 .section-header-span{
-  font-size: 15px;
-  border: 0px;
-  border-radius: 13px;
+  cursor: pointer;
   padding: 8px;
-  margin-right: 10px;
+  margin-left: 0 !important;
+  margin-right: var(--space) !important;
   display: inline-block;
 }
 
 .section-header-span.active{
-  background-color: #66ccff;
+  background-color: var(--darker-blue);
+  color: #FFF;
 }
-
 .section-header-span.inactive{
-  background-color: #ddd;
+  background-color: var(--light-grey);
+}
+.section-header-span.inactive:hover {
+  background-color: var(--darker-blue);
 }
 
 .update-channel{
-  margin-top: 30px;
-  margin-bottom: 30px;
   border: 1px solid grey;
   border-radius: 20px;
-  width: 498px;
+  margin-top: 30px;
+  margin-bottom: 30px;
+  padding: 6px;
 }
 
 .update-channel-name{
@@ -146,8 +147,9 @@ img.remove{
 }
 
 textarea.update-channel-jwk {
-  width: 380px;
+  width: 367px;
   height: 250px;
+  resize: vertical;
 }
 
 input.update-channel-path-prefix, input.update-channel-scope {
@@ -166,8 +168,9 @@ div.update-channel-row-scope {
 
 button#add-update-channel, button#add-disabled-site {
   float: right;
+  height: 30px;
   margin: 0px 10px 10px 10px;
-  border-radius: 7px;
+  padding: 6px;
 }
 
 input#update-channel-name, input#disabled-site {
@@ -218,8 +221,8 @@ div#update-channels-last-checked {
   font-size: 10px;
 }
 
-#update-channels-wrapper{
-  width: 500px;
+#update-channels-list {
+  display: inline-block;
 }
 
 @keyframes flash {
@@ -243,3 +246,19 @@ div#update-channels-last-checked {
 .flash {
   animation: flash 1s ease-out;
 }
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #202023;
+    color: #f9f9fa;
+  }
+
+  .section-header-span, div#update-channels-warning {
+    color: #000;
+  }
+
+  textarea, input[type=text] {
+    background-color: #202023;
+    color: #f9f9fa;
+  }
+}