From 03ef9d8e18441cc6df6380ea4d78b8ecea12fca9 Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Sun, 5 Aug 2012 16:51:24 +0200 Subject: [PATCH] fix tabview styling based on some good review feedback --- LCARStrek/browser/tabview/edit-light.png | Bin 208 -> 190 bytes LCARStrek/browser/tabview/search.png | Bin 215 -> 250 bytes LCARStrek/browser/tabview/tabview.css | 80 ++++++++++++++--------- 3 files changed, 50 insertions(+), 30 deletions(-) diff --git a/LCARStrek/browser/tabview/edit-light.png b/LCARStrek/browser/tabview/edit-light.png index 59d0d0d9fb8b9d21726dd7ce4af4f61ee94ed771..4a2a3ab618468bc9a52fade23a1e73d529c33cdd 100644 GIT binary patch delta 147 zcmcb>xQ}sygefC40|SGqZLSiKVhivIaRt)P*FM+bJv9}`Vk`;r3ubV5b|VeMN%D4g zVd!9$^_b`&7kr0jA5L~c#`Q(Ydaz(e< zgc+o{43sh@f${;KE{-7BH6I6L*;g%rWEI_LRJ~iZIflLPq}fX!<$*>e diff --git a/LCARStrek/browser/tabview/search.png b/LCARStrek/browser/tabview/search.png index d175a662e3ab7ddd51a7ef7c8d8392142a81b663..b8d25b3d34cd05af03ebe57652fbdc6a8953c974 100644 GIT binary patch delta 204 zcmcc4_>0l3Gr-TCmrII^fq{Y7)59eQNNWJG2op1qY|@wx;&2A|gt!9f|L1`O1J5H{ zwuufF^>;W}d9AssEF+45f?1v}jv*Y^OZzwS9#G(6;a_61^3sLnXc;PF610tIisp^PutOZ+H1bPxGPn-N>EEoUPrF=h~0y$3*Sav x-nvtElFTPDBaWsGiX4k3szp!seqB~y!MM9v%Ecn5inkNw7*AI}mvv4FO#nFFMm_)l delta 168 zcmeyxc%9LqGr-TCmrII^fq{Y7)59eQNQ;0lBQucP?%wYQq!^2X+?^QKos)S9ye!^Tu96;>Ujj zgA*qW4NiP8G>F)sY|z0k#C~$~f96&7d{>U#VMvi-Flv}3DdTXAfuV3J=SA=2874r3 O7(8A5T-G@yGywpYgfvJ1 diff --git a/LCARStrek/browser/tabview/tabview.css b/LCARStrek/browser/tabview/tabview.css index 06aefee2..ae43188d 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 { @@ -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 { @@ -86,7 +90,7 @@ html[dir=rtl] .close { right: 6px; width: 16px; height: 16px; - background: url(chrome://global/skin/icons/resizer.png) no-repeat; + 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; @@ -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,16 +179,15 @@ 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 { @@ -356,6 +359,7 @@ input.name { margin-bottom: 0; -moz-margin-start: 3px; padding: 1px; + border-radius: 3px; } html[dir=rtl] input.name { @@ -379,7 +383,7 @@ input.name:focus { 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; } @@ -413,19 +417,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; @@ -462,30 +466,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/tabview.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/tabview.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/tabview.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/tabview.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/tabview.png"), 0, 72, 18, 54); +} + +#exit-button:hover { + background-color: #FFCF00; } /* Search @@ -525,12 +536,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{ -- 2.43.0