1 files changed, 69 insertions, 16 deletions

diff --git a/data/extensions/https-everywhere@eff.org/pages/cancel/style.css b/data/extensions/https-everywhere@eff.org/pages/cancel/style.css
index 9b91ca3..aeba151 100644
--- a/data/extensions/https-everywhere@eff.org/pages/cancel/style.css
+++ b/data/extensions/https-everywhere@eff.org/pages/cancel/style.css
@@ -1,13 +1,33 @@
+@import "../main.css";
+
 body {
-  margin-top: 6em;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  margin: 2% auto;
   font-size: 12pt;
   font-family: sans-serif;
   line-height: 150%;
+  row-gap: 16px;
 }
 
-.content {
-  margin: auto;
-  max-width: 600px;
+/*---------
+# GRID LAYOUT
+---------*/
+.banner {
+  grid-column: 2;
+  grid-row: 1;
+}
+.explainer {
+  grid-column: 2;
+  grid-row: 2;
+}
+.copy_block {
+  grid-column: 2;
+  grid-row: 3;
+}
+.button_options {
+  grid-column: 2;
+  grid-row: 4;
 }
 
 h1 {
@@ -20,37 +40,70 @@ h1 img {
 }
 
 #url-paragraph {
-  display: block;
+  display: inline-flex;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-button {
+.ease_button {
   background-color: #ec1e1e;
   border: 1px solid #ec1e1e;
   border-radius: 4px;
   color: #fff;
   cursor: pointer;
   padding: 0.5em 1em;
-  display: block;
   float: none;
   font-size: 12pt;
+  font-weight: normal;
   margin: 8px 0;
   line-height: 150%;
 }
 
-button:hover {
-  background-color: #fff;
-  color: #ec1e1e;
-}
-
 button:last-child {
   margin: 0;
 }
 
-@media screen and (max-width: 550px) {
-  button {
+#url-value{
+ float: left;
+ font-weight: bold;
+ margin: 2% 2% 0 0;
+}
+#copy-url, #open-url-button{
+  background-color: var(--light-grey) !important;
+  border: 1px solid var(--text-secondary) !important;
+}
+#copy-url {
+  color: var(--text-secondary) !important;
+  font-size: 14px;
+}
+#open-url-button {
+  color: #666666 !important;
+}
+#copy-url:hover, #open-url-button:hover {
+  background-color: var(--text-secondary) !important;
+  border: 1px solid var(--text-secondary) !important;
+  color: var(--light-grey) !important;
+}
+
+@media screen and (max-width: 800px) {
+  body {
+    grid-template-columns: 1fr;
+    margin: 5%;
+  }
+  .banner {
+    grid-row: 1;
+  }
+  .explainer {
+    grid-row: 2;
+  }
+  .copy_block {
+    grid-row: 3;
+  }
+  .button_options {
+    grid-row: 4;
+  }
+  .ease_button {
     width: 100%;
     margin: 8px 0;
   }
@@ -66,11 +119,11 @@ button:last-child {
     color: #45a1ff;
   }
 
-  button {
+  .ease_button {
     color: #202023;
   }
 
-  button:hover {
+  .ease_button:hover {
     background-color: #202023;
     border-color: #ec1e1e;
   }