projects / themes.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
seventh part of syncing LCARStrek with Firefox 42-44 windows theme changes
[themes.git] / LCARStrek / browser / tabview / tabview.css
diff --git a/LCARStrek/browser/tabview/tabview.css b/LCARStrek/browser/tabview/tabview.css
index 3018c2dbe1e6bd664f476216f00771e3ae0ecbb8..688ed914a6937e88e2b616b2cc2f43c45cb609b2 100644 (file)
--- a/LCARStrek/browser/tabview/tabview.css
+++ b/LCARStrek/browser/tabview/tabview.css
@@ -25,10 +25,12 @@ body {
 .tab canvas,
 .cached-thumb {
   border: none;
+  border-radius: 3px;
 }
 
 .thumb {
   background-color: white;
+  border-radius: 3px;
 }
 
 .favicon {
@@ -45,11 +47,11 @@ body {
   width: 17px;
 }
 
-html[dir=ltr] .favicon {
+.favicon:-moz-dir(ltr) {
   border-bottom-right-radius: 0.4em;
 }
 
-html[dir=rtl] .favicon {
+.favicon:-moz-dir(rtl) {
   border-bottom-left-radius: 0.4em;
   left: auto;
   right: 2px;
@@ -68,6 +70,9 @@ html[dir=rtl] .favicon {
   height: 16px;
   border-radius: 3px;
   background-image: -moz-image-rect(url("chrome://browser/skin/tabview/close.png"), 0, 16, 16, 0);
+  background-repeat: no-repeat;
+  background-color: rgba(0, 0, 0, 0.35);
+  background-position: center center;
 }
 
 .close:hover {
@@ -75,7 +80,7 @@ html[dir=rtl] .favicon {
   background-color: #FFCF00;
 }
 
-html[dir=rtl] .close {
+.close:-moz-dir(rtl) {
   right: auto;
   left: 6px;
 }
@@ -85,24 +90,24 @@ html[dir=rtl] .close {
   right: 6px;
   width: 16px;
   height: 16px;
-  background: url(chrome://global/skin/icons/resizer.png) no-repeat;
-  -moz-transition-property: opacity;
-  -moz-transition-duration: 0.5s;
-  -moz-transition-timing-function: ease-out;
+  background: url("chrome://global/skin/icons/resizer.png") no-repeat;
+  transition-property: opacity;
+  transition-duration: 0.5s;
+  transition-timing-function: ease-out;
   opacity: 0.2;
 }
 
-html[dir=rtl] .expander {
+.expander:-moz-dir(rtl) {
   right: auto;
   left: 6px;
-  -moz-transform: scaleX(-1);
+  transform: scaleX(-1);
 }
 
 .expander:hover,
 .appTabIcon:hover {
-  -moz-transition-property: opacity;
-  -moz-transition-duration: 0.5s;
-  -moz-transition-timing-function: ease-out;
+  transition-property: opacity;
+  transition-duration: 0.5s;
+  transition-timing-function: ease-out;
   opacity: 1.0;
 }
 
@@ -136,12 +141,12 @@ html[dir=rtl] .expander {
 }
 
 .tab.focus {
-  box-shadow:
-    0 1px 0 #008484 inset,
-    0 -1px 1px #008484 inset,
-    1px 0 1px #008484 inset,
-    -1px 0 1px #008484 inset,
-    0 0 5.5px #008484;
+  background-color: #008484;
+  border-color: #008484;
+}
+
+.tab.focus > .favicon {
+  background-color: #008484;
 }
 
 /* Tab: Zooming
@@ -167,18 +172,28 @@ html[dir=rtl] .expander {
 ----------------------------------*/
 
 .groupItem {
-  cursor: move;
+  cursor: pointer;
   background-color: #000000;
   border-radius: 0.4em;
   border: 1px solid #6080B5;
 }
 
 .groupItem.activeGroupItem {
+  background-color: rgba(0, 132, 132, 0.2);
   border: 1px solid #008484;
 }
 
 .groupItem .close {
   z-index: 10;
+  top: 3px;
+  right: 3px;
+  padding: 2px;
+}
+
+.groupItem .close:-moz-dir(rtl) {
+  right: auto;
+  left: 0px;
+  background-position: bottom right;
 }
 
 .dragRegion {
@@ -200,7 +215,7 @@ html[dir=rtl] .expander {
   line-height: 0;
 }
 
-html[dir=rtl] .appTabTrayContainer {
+.appTabTrayContainer:-moz-dir(rtl) {
   right: auto;
   left: 1px;
 }
@@ -208,7 +223,6 @@ html[dir=rtl] .appTabTrayContainer {
 .appTabTray {
   display: inline-block;
   -moz-column-width: 16px;
-  -moz-column-count: 0;
   -moz-column-gap: 5px;
 }
 
@@ -265,7 +279,7 @@ html[dir=rtl] .appTabTrayContainer {
   opacity: 0.5;
 }
 
-html[dir=rtl] .undo .close {
+.undo .close:-moz-dir(rtl) {
   right: auto;
   left: 7px;
 }
@@ -274,20 +288,6 @@ html[dir=rtl] .undo .close {
   opacity: 1.0;
 }
 
-/* InfoItems
-----------------------------------*/
-
-.info-item {
-  cursor: move;
-  border: 1px solid #9C9CFF;
-  background-color: #000000;
-  border-radius: 0.4em;
-}
-
-.intro {
-  margin: 10px;
-}
-
 /* Trenches
 ----------------------------------*/
 
@@ -299,7 +299,7 @@ html[dir=rtl] .undo .close {
   box-shadow: 1px 1px 0 rgba(0,132,132,.15);
 }
 
-html[dir=rtl] .guideTrench {
+.guideTrench:-moz-dir(rtl) {
   box-shadow: -1px 1px 0 rgba(0,132,132,.15);
 }
 
@@ -328,30 +328,11 @@ html[dir=rtl] .guideTrench {
 /* Other
 ----------------------------------*/
 
-.newTabButton {
-  width: 16px;
-  height: 15px;
-  bottom: 10px;
-  left: 10px;
-  cursor: pointer;
-  opacity: .3;
-  background-image: url(chrome://browser/skin/tabview/new-tab.png);
-}
-
-html[dir=rtl] .newTabButton {
-  left: auto;
-  right: 10px;
-}
-
-.newTabButton:hover {
-  opacity: 1;
-}
-
 .active {
   box-shadow: 5px 5px 3px rgba(255,207,0,.5);
 }
 
-html[dir=rtl] .active {
+.active:-moz-dir(rtl) {
   box-shadow: -5px 5px 3px rgba(255,207,0,.5);
 }
 
@@ -359,11 +340,12 @@ html[dir=rtl] .active {
   box-shadow: 2px 2px 7px -1px rgba(0,132,132,.6);
 }
 
-html[dir=rtl] .acceptsDrop {
+.acceptsDrop:-moz-dir(rtl) {
   box-shadow: -2px 2px 7px -1px rgba(0,132,132,.6);
 }
 
 .titlebar {
+  cursor: move;
   font-size: 12px;
   height: 18px;
 }
@@ -377,9 +359,10 @@ input.name {
   margin-bottom: 0;
   -moz-margin-start: 3px;
   padding: 1px;
+  border-radius: 3px;
 }
 
-html[dir=rtl] input.name {
+input.name:-moz-dir(rtl) {
   background-position: right top;
 }
 
@@ -397,16 +380,20 @@ input.name:focus {
   color: #FFCF00;
 }
 
-input.name:-moz-placeholder {
+input.name::-moz-placeholder {
   font-style: italic !important;
   color: transparent;
-  background-image: url(chrome://browser/skin/tabview/edit-light.png);
+  background-image: url("chrome://browser/skin/tabview/edit-light.png");
   background-repeat: no-repeat;
-  -moz-padding-start: 20px;
 }
 
-.title-container:hover input.name:-moz-placeholder {
+.title-container:hover input.name::-moz-placeholder {
   color: #E7ADE7;
+  background-image: none;
+}
+
+input.name:focus::-moz-placeholder {
+  background-image: none;
 }
 
 .title-shield {
@@ -417,12 +404,12 @@ input.name:-moz-placeholder {
   padding: 1px;
   left: 0;
   top: 0;
-  width: 100%;
   height: 100%;
+  width: -moz-available;
   cursor: text;
 }
 
-html[dir=rtl] .title-shield {
+.title-shield:-moz-dir(rtl) {
   left: auto;
   right: 0;
 }
@@ -434,19 +421,19 @@ html[dir=rtl] .title-shield {
 .stackExpander {
   cursor: pointer;
   bottom: 8px;
-  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/stack-expander.png), 0, 48, 24, 24);
+  background-image: -moz-image-rect(url("chrome://browser/skin/tabview/stack-expander.png"), 0, 48, 24, 24);
   width: 24px;
   height: 24px;
 }
 
 .stackExpander:hover {
-  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/stack-expander.png), 0, 24, 24, 0);
+  background-image: -moz-image-rect(url("chrome://browser/skin/tabview/stack-expander.png"), 0, 24, 24, 0);
 }
 
 /* Resizable
 ----------------------------------*/
 .resizer {
-  background-image: url(chrome://global/skin/icons/resizer.png);
+  background-image: url("chrome://global/skin/icons/resizer.png");
   width: 16px;
   height: 16px;
   bottom: 0px;
@@ -454,10 +441,10 @@ html[dir=rtl] .title-shield {
   opacity: .2;
 }
 
-html[dir=rtl] .resizer {
+.resizer:-moz-dir(rtl) {
   right: auto;
   left: 0;
-  -moz-transform: scaleX(-1);
+  transform: scaleX(-1);
 }
 
 .iq-resizable-handle {
@@ -474,7 +461,7 @@ html[dir=rtl] .resizer {
   bottom: -2px;
 }
 
-html[dir=rtl] .iq-resizable-se {
+.iq-resizable-se:-moz-dir(rtl) {
   cursor: sw-resize;
   right: auto;
   left: 1px;
@@ -483,30 +470,37 @@ html[dir=rtl] .iq-resizable-se {
 /* Exit button
 +----------------------------------*/
 #exit-button {
-  width: 18px;
-  height: 18px;
-  -moz-margin-end: 4px;
-  margin-top: 2px;
-  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 90, 18, 72);
+  width: 24px;
+  height: 24px;
+  -moz-margin-end: 2px;
+  margin-bottom: 2px;
+  background-color: transparent;
+  background-image: -moz-image-rect(url("chrome://browser/skin/tabview/tabviewFx.png"), 0, 90, 18, 72);
   background-attachment: scroll;
   background-repeat: no-repeat;
+  background-position: center center;
   border: none;
+  border-radius: 3px;
 }
 
 #exit-button[groups="0"] {
-  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 18, 18, 0);
+  background-image: -moz-image-rect(url("chrome://browser/skin/tabview/tabviewFx.png"), 0, 18, 18, 0);
 }
 
 #exit-button[groups="1"] {
-  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 36, 18, 18);
+  background-image: -moz-image-rect(url("chrome://browser/skin/tabview/tabviewFx.png"), 0, 36, 18, 18);
 }
 
 #exit-button[groups="2"] {
-  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 54, 18, 36);
+  background-image: -moz-image-rect(url("chrome://browser/skin/tabview/tabviewFx.png"), 0, 54, 18, 36);
 }
 
 #exit-button[groups="3"] {
-  background-image: -moz-image-rect(url(chrome://browser/skin/tabview/tabview.png), 0, 72, 18, 54);
+  background-image: -moz-image-rect(url("chrome://browser/skin/tabview/tabviewFx.png"), 0, 72, 18, 54);
+}
+
+#exit-button:hover {
+  background-color: #FFCF00;
 }
 
 /* Search
@@ -519,11 +513,13 @@ html[dir=rtl] .iq-resizable-se {
 
 #search{
   width: 100%;
-  height: 100%;
+  height: calc(100% - 1.7em - 20px); /* leave room for banner */
 }
 
 #searchbox{
   width: 270px;
+  max-width: -moz-available;
+  -moz-margin-start: 20px;
   height: 30px;
   color: #FF9F00;
   border: 2px solid #008484;
@@ -546,12 +542,21 @@ html[dir=rtl] .iq-resizable-se {
 }
 
 #actions #searchbutton{
-  background: transparent url(chrome://browser/skin/tabview/search.png) no-repeat;
+  background-color: transparent;
+  background-image: -moz-image-rect(url("chrome://browser/skin/tabview/search.png"), 0, 20, 20, 0);
+  background-repeat: no-repeat;
+  background-position: center center;
+  border-radius: 3px;
   border: none;
-  width: 20px;
-  height: 20px;
-  margin-top: 3px;
-  -moz-margin-end: 1px;
+  width: 24px;
+  height: 24px;
+  -moz-margin-end: 2px;
+  margin-bottom: 2px;
+}
+
+#actions #searchbutton:hover{
+  background-color: #FFCF00;
+  background-image: -moz-image-rect(url("chrome://browser/skin/tabview/search.png"), 0, 40, 20, 20);
 }
 
 .notMainMatch{
@@ -567,7 +572,7 @@ html[dir=rtl] .iq-resizable-se {
   box-shadow: 0px -1px 0px rgba(255,207,0,.1), inset 0px 2px 5px rgba(255,207,0,.3);
 }
 
-html[dir=rtl] #otherresults {
+#otherresults:-moz-dir(rtl) {
   left: auto;
   right: 0;
 }
@@ -599,6 +604,8 @@ html[dir=rtl] #otherresults {
   -moz-margin-end: 5px;
   position: relative;
   top: 2px;
+  width: 16px;
+  height: 16px;
 }
 
 .inlineMatch > span {
KaiRo's SeaMonkey themes