Style tabs using pure CSS

1 files changed, 18 insertions, 10 deletions

diff --git a/src/chrome/browser/browser.css b/src/chrome/browser/browser.css
index 8ba9ec5..a27657a 100644
--- a/src/chrome/browser/browser.css
+++ b/src/chrome/browser/browser.css
@@ -1297,20 +1297,28 @@ toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
 .tabbrowser-tab,
 .tabs-newtab-button {
   -moz-appearance: none;
-  background-color: transparent;
-  background-image: -moz-linear-gradient(rgba(23,23,23,1), rgba(23,23,23,1));
+  background: rgb(23,23,23);
   background-origin: border-box;
-  background-position: 1px 2px;
-  background-size: -moz-calc(100% - 2px) -moz-calc(100% - 2px);
   background-repeat: no-repeat;
+  /* top margin of 0 is important for Fitts' Law in ToT/FS */
   margin: 0;
-  padding: 2px 0 4px;
-  border-width: 4px 3px 0;
-  border-style: solid;
-  -moz-border-image: url(chrome://browser/skin/tabbrowser/tab.png) 4 3 0 / 4px 3px 0 repeat stretch;
-  border-radius: 0;
+  padding: 3px 3px 4px 1px;
+  border: 1px solid rgba(64,72,81,.4);
+  border-bottom: 0px;
+  border-radius: 2.5px 2.5px 0 0;
+  box-shadow: inset 0.5px 1px 1px rgba(255,255,255,.2);
   -moz-margin-start: -1px;
-  color: #fff;
+}
+
+.tabs-newtab-button {
+  padding: 3px 1px 4px 1px;
+}
+
+/* Make sure extra margin is added when tabs are not in the title bar so it doesn't
+ "glue" right up against the AppMenu button/caption */
+#main-window[sizemode="normal"][tabsontop=true] .tabbrowser-tab,
+#main-window[sizemode="normal"][tabsontop=true] .tabs-newtab-button {
+  margin-top: 5px;
 }
 
 .tabbrowser-tab:-moz-lwtheme,