From fe9e87d5a08681552303f5a6bda96821699f13ec Mon Sep 17 00:00:00 2001 From: "nbhatla%netscape.com" Date: Thu, 14 Sep 2000 10:36:17 +0000 Subject: [PATCH] #46423 -. new modern tabs continued. r=ben git-svn-id: svn://10.0.0.236/trunk@79112 18797224-902f-48f8-a5cc-f745e15eee43 --- .../themes/modern/global/menulist-leftcap.gif | Bin 138 -> 145 bytes .../themes/modern/global/menulist-middle.gif | Bin 161 -> 170 bytes .../modern/global/menulist-rightcap.gif | Bin 275 -> 287 bytes mozilla/themes/modern/global/menulist.css | 12 +- mozilla/themes/modern/global/tabcontrol.css | 193 +++++++++++++++--- mozilla/themes/modern/global/textfield.css | 4 +- 6 files changed, 174 insertions(+), 35 deletions(-) diff --git a/mozilla/themes/modern/global/menulist-leftcap.gif b/mozilla/themes/modern/global/menulist-leftcap.gif index 55e2d902e8064b03e951ae07371bdd903e95de98..22bc64962278348745c54ffa0b5c7168f8de64fe 100644 GIT binary patch literal 145 zcmZ?wbhEHbN+ zgXhjwPME*|1ByRc7#SFN8FWAbATt

^7Wqc&WqsLTuBuyWd--64_K0*JvcHWBSF# sp|t*l!JVeMJ9f+k2?D#STo!wUztJgW_FGuKB2J96&FRoe79|F201az8+yDRo literal 138 zcmZ?wbhEHbu_PkMypD4-BGjuM1vcnRDpvfjtHyovkgwoGuIu)&QxsI$i(( diff --git a/mozilla/themes/modern/global/menulist-middle.gif b/mozilla/themes/modern/global/menulist-middle.gif index 7d3258d1172d1940923bb7ac8f361d646c2ec061..8c75c3d19a4c131aef9fb2e733777512c2857325 100644 GIT binary patch delta 146 zcmV;D0B!%F0jdEjM@dFFIbk3G5&*LR0H?XR|NsBO(9pHT#W6WZ=I`!TZf?ui*xTji z(A?aSDM)j%3*tXsWJkt0HhL&vY#(c&_h!uOGmma7Zi) z1<0gw$!sbI(5Q4utx5sdtai)odcWYXcuX#Po#^z^%5F~$@VIM)j%3*#XsWJks}^u9&vY#tc&_h!uM5DSa7Zi) r2gsyy$!sbC(5Q4uty-_xtadv!dcQ-bc)UcI&*-#zjmEg&l?VVkCU`+( diff --git a/mozilla/themes/modern/global/menulist-rightcap.gif b/mozilla/themes/modern/global/menulist-rightcap.gif index e76467d5bab7d59bbaf6cc00416fe51d27d691ab..e3c9ba3d13f4acfe2bee356e6eca3414f7036bd7 100644 GIT binary patch delta 258 zcmV+d0sa1y0-pj^M@dFFIbjw65&*;)0RR90F*!)N$;syL?!wT}5EB^C+}w77l2>kS zwZ+AUmYUn;=BK&2j+dL$-`{P7gl>X^#naPykdS3|cwuyP$jQoRd3%K5h1?d{!?JzU}ps=`@jyL!PVY*$Q2t4M7frT-7s9LQ_rDM8S z6uw|^ccF}M7l$zTFjfkF0|Q~64j<+V$KVlQzzqU{0(AukfpZQ7e0~OTf`L|#1P%-k zeSeRckCc{-j+&Vf1Pn9;aC4}sB&rM+Gzkg}1PQaWwX_TqG#CiHy}rH=5*HM@7$(Oj IC>S9CJ3D`Eq5uE@ delta 246 zcmVrT$ny0zBj+dL$-`{P7gvHa-$jQoKbaiZge`tApZi0hlc6fP^kdaj%K4$1?d{!EkQH^u&}t8jz{ggJ3Us7YuuC4g+?02WxzLP>BN$3>9~IiIaQ~ w0}M0+YHggIo(vQ;2@4DZ38$#37^n;uG#Ci5v9huc7ZVb$7$&S9CJ0#O)UjP6A diff --git a/mozilla/themes/modern/global/menulist.css b/mozilla/themes/modern/global/menulist.css index 1f206f98f44..493b35daba9 100644 --- a/mozilla/themes/modern/global/menulist.css +++ b/mozilla/themes/modern/global/menulist.css @@ -11,34 +11,34 @@ { -moz-binding : url(chrome://global/skin/globalBindings.xml#menulist); padding : 0px; - margin : 3px 3px 4px 5px; + margin : 2px 3px 2px 5px; font-size : 10px; font-family : geneva, arial; } .menulist-text-box { - margin-top : 1px; + margin-top : 2px; margin-right : 2px; } .menulist-spring-left { background : url(chrome://global/skin/menulist-leftcap.gif) no-repeat; - height : 16px; + height : 18px; width : 8px; } .menulist-box-middle { background : url(chrome://global/skin/menulist-middle.gif) repeat-x; - height : 16px; + height : 18px; } .menulist-dropmarker-right { background : url(chrome://global/skin/menulist-rightcap.gif) no-repeat; - height : 16px; + height : 18px; width : 22px; } @@ -165,7 +165,7 @@ menulist:focus { border : 2px solid #F2C34F; - margin : 1px 1px 2px 3px; + margin : 0px 1px 0px 3px; -moz-border-radius : 8px 7px 11px 9px; } diff --git a/mozilla/themes/modern/global/tabcontrol.css b/mozilla/themes/modern/global/tabcontrol.css index 2aa687a67bf..bf9aee03c30 100644 --- a/mozilla/themes/modern/global/tabcontrol.css +++ b/mozilla/themes/modern/global/tabcontrol.css @@ -1,45 +1,176 @@ -tabcontrol { - margin: 1px 5px 2px 5px; + +/*** TAB: TOP ***/ + +tab { + -moz-binding : url(chrome://global/skin/globalBindings.xml#tab); + padding : 0px; + color : #1C1D1F; } -/********** Tab widget *********/ -tab { - border-top: 1px solid white; - border-bottom: 1px solid #666666; - border-left: 1px solid white; - border-right: 1px solid #666666; - color: black; - padding: 3px 5px 3px 5px; +.tab-image-left { + background : url(chrome://global/skin/tab-unselect-left.gif) no-repeat bottom; + width : 11px; + height : 21px; } +.tab-image-middle { + background : url(chrome://global/skin/tab-unselect-middle.gif) repeat-x bottom; +} + +.tab-image-right { + background : url(chrome://global/skin/tab-unselect-right.gif) no-repeat bottom; + width : 11px; + height : 21px; +} + +.tab-text { + padding : 5px 0px 3px 0px; + font-size : 12px; + font-family : charcoal, ms sans serif; +} + +tab:hover:active { + color : #FEFEFE; +} + +tab:hover:active > .tab-image-left { + background : url(chrome://global/skin/tab-clicked-left.gif) no-repeat bottom; +} + +tab:hover:active > .tab-image-middle { + background : url(chrome://global/skin/tab-clicked-middle.gif) repeat-x bottom; +} + +tab:hover:active > .tab-image-right { + background : url(chrome://global/skin/tab-clicked-right.gif) no-repeat bottom; +} + + /* when a tab is selected this is how it should look */ -tab[selected="true"] { - font-weight: bold; +tab[selected="true"], tab:hover:active[selected="true"], +tab[selected="1"], tab:hover:active[selected="1"]{ + color : #1C1D1F; } -tab:hover { - color: #003366; - text-decoration: underline; +tab[selected="true"] > .tab-image-left, +tab:hover:active[selected="true"] > .tab-image-left { + background : url(chrome://global/skin/tab-select-left.gif) no-repeat bottom; } -tab:hover:active { - border-top: 1px solid #666666; - border-bottom: 1px solid white; - border-left: 1px solid #666666; - border-right: 1px solid white; - text-decoration: none; +tab[selected="true"] > .tab-image-middle, +tab:hover:active[selected="true"] > .tab-image-middle { + background : url(chrome://global/skin/tab-select-middle.gif) repeat-x bottom; +} + +tab[selected="true"] > .tab-image-right, +tab:hover:active[selected="true"] > .tab-image-right { + background : url(chrome://global/skin/tab-select-right.gif) no-repeat bottom; +} + +.tab-border-top-left, .tab-border-top-right { + background : url(chrome://global/skin/tab-top-border.gif) repeat-x bottom; + height : 2px; +} + +.tab-border-top-left-cap { + background : url(chrome://global/skin/tab-top-border-leftcap.gif) no-repeat bottom; + width : 2px; + height : 2px; +} + +.tab-border-top-right-cap { + background : url(chrome://global/skin/tab-top-border-rightcap.gif) no-repeat bottom; + width : 2px; + height : 2px; } tabbox { - padding: 0px 2px 0px 2px; + -moz-binding : url(chrome://global/skin/globalBindings.xml#tabbox); + padding : 0px; } /* top tabs */ tabcontrol[align="vertical"] tabbox[align="horizontal"] tab { - border-bottom: none; - -moz-border-radius: 8px 8px 0px 0px; - padding-bottom: 1px; - margin: 1px 2px 1px 2px; + padding: 0px; + margin: 0px; +} + +/*** TAB: BOTTOM ***/ +/* Found in editor.xul & editorOverlay.xul + * SMALL TABS FOR NOW */ + +.tab-bottom:hover:active > .tab-image-middle > .tab-text { + +} + +.tab-bottom > .tab-image-left { + background : url(chrome://global/skin/tab-bot-unselect-left.gif) no-repeat; + width : 11px; + height : 19px; +} + +.tab-bottom > .tab-image-middle { + background : url(chrome://global/skin/tab-bot-unselect-middle.gif) repeat-x; +} + +.tab-bottom > .tab-image-middle > .tab-left { + padding : 4px 0px; +} + +.tab-bottom > .tab-image-right { + background : url(chrome://global/skin/tab-bot-unselect-right.gif) no-repeat; + width : 11px; + height : 19px; +} + +.tab-bottom > .tab-image-middle > .tab-text { + padding : 4px 0px 5px 0px; +} + +.tab-bottom:hover:active > .tab-image-left { + background : url(chrome://global/skin/tab-bot-clicked-left.gif) no-repeat; +} + +.tab-bottom:hover:active > .tab-image-middle { + background : url(chrome://global/skin/tab-bot-clicked-middle.gif) repeat-x; +} + +.tab-bottom:hover:active > .tab-image-right { + background : url(chrome://global/skin/tab-bot-clicked-right.gif) no-repeat; +} + +/* when a tab is selected this is how it should look */ + +.tab-bottom[selected="1"] > .tab-image-left, +.tab-bottom:hover:active[selected="1"] > .tab-image-left { + background : url(chrome://global/skin/tab-bot-select-left.gif) no-repeat; +} + +.tab-bottom[selected="1"] > .tab-image-middle, +.tab-bottom:hover:active[selected="1"] > .tab-image-middle { + background : url(chrome://global/skin/tab-bot-select-middle.gif) repeat-x; +} + +.tab-bottom[selected="1"] > .tab-image-right, +.tab-bottom:hover:active[selected="1"] > .tab-image-right { + background : url(chrome://global/skin/tab-bot-select-right.gif) no-repeat; +} + +.tabbox-bottom > .tab-border-top-left, .tabbox-bottom > .tab-border-top-right { + background : url(chrome://global/skin/tab-bot-border.gif) repeat-x top; + width : 2px; +} + +.tabbox-bottom > .tab-border-top-left-cap { + background : url(chrome://global/skin/tab-bot-border-leftcap.gif) no-repeat top; + width : 2px; + height : 2px; +} + +.tabbox-bottom > .tab-border-top-right-cap { + background : url(chrome://global/skin/tab-bot-border-rightcap.gif) no-repeat top; + width : 2px; + height : 2px; } /* bottom tabs */ @@ -84,7 +215,15 @@ tabpanel.light { } tabpanel { - border : 1px outset #FFFFFF; + border-top : 0px; + background-color : #C2D0D0; + border-left : 1px solid #313948; + border-right : 1px solid #313948; + border-bottom : 1px solid #313948; padding : 5px; } +/* This is horrible CSS style, but is necessary to handle this case */ +tabpanel title { + background-color : #C2D0D0; +} diff --git a/mozilla/themes/modern/global/textfield.css b/mozilla/themes/modern/global/textfield.css index 8cfdada0197..05b0d472330 100644 --- a/mozilla/themes/modern/global/textfield.css +++ b/mozilla/themes/modern/global/textfield.css @@ -14,7 +14,7 @@ margin : 2px 4px 2px 4px; background-color : #FFFFFF; -moz-border-radius : 4px 4px 3px 6px; - border : 1px inset #B4C3D4; + border : 2px inset #B4C3D4; cursor : text; } @@ -26,7 +26,7 @@ textfield[focused="true"] { border : 2px solid #F2C34F; - margin : 0px 2px 0px 2px; + margin : 2px 4px 2px 4px; -moz-border-radius : 7px 7px 4px 6px; }