X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Ftabview%2Ftabview.css;h=688ed914a6937e88e2b616b2cc2f43c45cb609b2;hp=08e01f7a5b76db42ad437251557e5a568845b1b7;hb=fa703ff4868b5400c27aa76a4c65219d297a2431;hpb=8ad8bf83a252ba11e812866d40a22f78223a9b8a

diff --git a/LCARStrek/browser/tabview/tabview.css b/LCARStrek/browser/tabview/tabview.css
index 08e01f7a..688ed914 100644
--- 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;
@@ -69,6 +71,8 @@ html[dir=rtl] .favicon {
   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 {
@@ -76,7 +80,7 @@ html[dir=rtl] .favicon {
   background-color: #FFCF00;
 }
 
-html[dir=rtl] .close {
+.close:-moz-dir(rtl) {
   right: auto;
   left: 6px;
 }
@@ -86,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;
 }
 
@@ -137,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
@@ -175,19 +179,18 @@ html[dir=rtl] .expander {
 }
 
 .groupItem.activeGroupItem {
+  background-color: rgba(0, 132, 132, 0.2);
   border: 1px solid #008484;
 }
 
 .groupItem .close {
   z-index: 10;
-  top: 0px;
-  right: 0px;
-  width: 22px;
-  height: 22px;
-  background-position: bottom left;
+  top: 3px;
+  right: 3px;
+  padding: 2px;
 }
 
-html[dir=rtl] .groupItem .close {
+.groupItem .close:-moz-dir(rtl) {
   right: auto;
   left: 0px;
   background-position: bottom right;
@@ -212,7 +215,7 @@ html[dir=rtl] .groupItem .close {
   line-height: 0;
 }
 
-html[dir=rtl] .appTabTrayContainer {
+.appTabTrayContainer:-moz-dir(rtl) {
   right: auto;
   left: 1px;
 }
@@ -220,7 +223,6 @@ html[dir=rtl] .appTabTrayContainer {
 .appTabTray {
   display: inline-block;
   -moz-column-width: 16px;
-  -moz-column-count: 0;
   -moz-column-gap: 5px;
 }
 
@@ -277,7 +279,7 @@ html[dir=rtl] .appTabTrayContainer {
   opacity: 0.5;
 }
 
-html[dir=rtl] .undo .close {
+.undo .close:-moz-dir(rtl) {
   right: auto;
   left: 7px;
 }
@@ -297,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);
 }
 
@@ -330,7 +332,7 @@ html[dir=rtl] .guideTrench {
   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);
 }
 
@@ -338,7 +340,7 @@ 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);
 }
 
@@ -357,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;
 }
 
@@ -377,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 {
@@ -402,7 +409,7 @@ input.name:-moz-placeholder {
   cursor: text;
 }
 
-html[dir=rtl] .title-shield {
+.title-shield:-moz-dir(rtl) {
   left: auto;
   right: 0;
 }
@@ -414,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;
@@ -434,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 {
@@ -454,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;
@@ -463,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
@@ -499,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;
@@ -526,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{
@@ -547,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;
 }