1 files changed, 82 insertions, 23 deletions
diff --git a/arc-firefox-theme/chrome/browser/aboutProviderDirectory.css b/arc-firefox-theme/chrome/browser/aboutProviderDirectory.css
index ba1a542..ecd54b7 100644
--- a/arc-firefox-theme/chrome/browser/aboutProviderDirectory.css
+++ b/arc-firefox-theme/chrome/browser/aboutProviderDirectory.css
@@ -1,43 +1,102 @@
-@import url("chrome://global/skin/in-content/common.css");
+body {
+  background-color: rgb(241, 244, 248);
+  margin-top: 2em;
+  font: message-box;
+  font-size: 100%;
+  min-height: 200px;
+}
+
+p {
+  font-size: .8em;
+}
+
+#error-box {
+  background: url('chrome://global/skin/icons/information-24.png') no-repeat left 4px;
+  -moz-padding-start: 30px;
+}
 
-#errorPageContainer {
-  min-width: 50%;
+#error-box:-moz-locale-dir(rtl) {
+  background-position: right 4px;
 }
 
-#errorTitle {
-  background: url("aboutNetError_info.svg") left 0 no-repeat;
-  background-size: 2em;
-  -moz-padding-start: 3em;
+#main-error-msg {
+  color: #4b4b4b;
+  font-weight: bold;
 }
 
+
 #button-box {
   text-align: center;
   width: 75%;
   margin: 0 auto;
 }
 
-button {
-  width: auto !important;
-  min-width: 150px;
-}
-
-@media all and (max-width: 300px) {
-  body {
-    padding: 0px 10px;
-  }
-  #errorPageContainer {
-    min-width: 100%;
-  }
-  #errorTitle {
-    background: none;
-    -moz-padding-start: 0 !important;
+@media all and (min-width: 300px) {
+  #error-box {
+    max-width: 50%;
+    margin: 0 auto;
+    background-image: url('chrome://global/skin/icons/information-32.png');
+    min-height: 36px;
+    -moz-padding-start: 38px;
   }
+
   button {
     width: auto !important;
-    min-width: auto !important;
+    min-width: 150px;
   }
 }
 
+@media all and (min-width: 780px) {
+  #error-box {
+    max-width: 30%;
+  }
+}
+
+button {
+  font: message-box;
+  font-size: 0.6875em;
+  -moz-appearance: none;
+  -moz-user-select: none;
+  width: 100%;
+  margin: 2px 0;
+  padding: 2px 6px;
+  line-height: 1.2;
+  background-color: hsla(210,30%,95%,.1);
+  background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
+  background-clip: padding-box;
+  border: 1px solid hsla(210,15%,25%,.4);
+  border-color: hsla(210,15%,25%,.3) hsla(210,15%,25%,.35) hsla(210,15%,25%,.4);
+  border-radius: 3px;
+  box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset,
+              0 0 0 1px hsla(0,0%,100%,.3) inset,
+              0 1px 0 hsla(0,0%,100%,.1);
+
+  transition-property: background-color, border-color, box-shadow;
+  transition-duration: 150ms;
+  transition-timing-function: ease;
+
+}
+
+button:hover {
+  background-color: hsla(210,30%,95%,.8);
+  border-color: hsla(210,15%,25%,.45) hsla(210,15%,25%,.5) hsla(210,15%,25%,.55);
+  box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset,
+              0 0 0 1px hsla(0,0%,100%,.3) inset,
+              0 1px 0 hsla(0,0%,100%,.1),
+              0 0 3px hsla(210,15%,25%,.1);
+  transition-property: background-color, border-color, box-shadow;
+  transition-duration: 150ms;
+  transition-timing-function: ease;
+}
+
+button:hover:active {
+  background-color: hsla(210,15%,25%,.2);
+  box-shadow: 0 1px 1px hsla(210,15%,25%,.2) inset,
+              0 0 2px hsla(210,15%,25%,.4) inset;
+  transition-property: background-color, border-color, box-shadow;
+  transition-duration: 10ms;
+  transition-timing-function: linear;
+}
 
 body {
   width: 310px;