Added feature #15783: Improve ExtJS skin: Tabs
authorSteffen Gebert <steffen.gebert@typo3.org>
Sun, 10 Oct 2010 12:31:40 +0000 (12:31 +0000)
committerSteffen Gebert <steffen.gebert@typo3.org>
Sun, 10 Oct 2010 12:31:40 +0000 (12:31 +0000)
git-svn-id: https://svn.typo3.org/TYPO3v4/Core/trunk@9028 709f56b5-9817-0410-a4d7-c38de5d9e867

ChangeLog
typo3/sysext/t3skin/extjs/xtheme-t3skin.css

index 71aace3..3bc4fc3 100755 (executable)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,7 @@
+2010-10-10  Steffen Gebert  <steffen@steffen-gebert.de>
+
+       * Added feature #15783: Improve ExtJS skin: Tabs
+
 2010-10-10  Steffen Kamper  <steffen@typo3.org>
 
        * Fixed bug #15690: Change text of exception in t3lib_cache_frontend_stringfrontend
index 990d6e0..2274506 100644 (file)
  * font-size                   10px
  */
 
-/* preliminary code for the tabmenu */
-.x-tab-panel-body .x-panel-body {
-       padding: 10px;
-       background-color: #EFEFF4;
-}
 .x-tab-strip-spacer { display: none; }
-.x-tab-strip { padding-left: 10px; }
 
 .x-panel {
        border-style: solid;
 }
 
 ul.x-tab-strip-top{
-       background:#dbdbdb url(images/tabs/tab-strip-bg.gif) repeat-x left top;
-       border-color:#A2AAB8;
-       padding-top: 2px;
+       padding-top: 1px;
 }
 
 ul.x-tab-strip-bottom{
-       background-image:url(images/tabs/tab-strip-btm-bg.gif);
-       border-color:#A2AAB8;
+       padding-bottom: 1px;
 }
 
-.x-tab-strip span.x-tab-strip-text {
-       color:#333;
+ul.x-tab-strip li {
+       margin-left: 0;
+       margin-right: 2px;
 }
-.x-tab-strip-over span.x-tab-strip-text {
-       color:#111;
+
+.x-tab-strip span.x-tab-strip-text {
+       font-style: normal;
 }
 
 .x-tab-strip-active span.x-tab-strip-text {
-       color:#333;
+       color: #333333;
 }
 
 .x-tab-strip-disabled .x-tabs-text {
        color:#aaaaaa;
 }
 
+.x-tab-strip span.x-tab-strip-text,
+.x-tab-strip-top .x-tab-strip-active .x-tab-right span.x-tab-strip-text {
+       padding: 1px 0;
+}
+
+.x-tab-strip-over span.x-tab-strip-text,
+.x-tab-strip-active span.x-tab-strip-text {
+       color: #000000;
+}
+
+.x-tab-strip-disabled .x-tabs-text {
+       color: #aaaaaa;
+}
+
+
 .x-tab-strip-top .x-tab-right {
-       background-image:url(images/tabs/tabs-sprite.gif);
-       padding-left:15px;
+       background: #dadada;
+       border-color: #adadad #adadad #c0c0c0;
+       border-style: solid;
+       border-width: 1px;
+       -moz-border-radius-topleft: 3px;
+       -moz-border-radius-topright: 3px;
+       -webkit-border-top-left-radius: 3px;
+       -webkit-border-top-right-radius: 3px;
+       border-top-left-radius: 3px;
+       border-top-right-radius: 3px;
+       color: #666666;
+       padding: 5px 10px;
+       position: relative;
+       top: 1px;
 }
 
-.x-tab-strip-top .x-tab-left {
-       background-image:url(images/tabs/tabs-sprite.gif);
-       padding-right: 15px;
+.x-tab-strip-over .x-tab-right {
+       background-color: #ffffff;
 }
-.x-tab-strip-top .x-tab-strip-inner {
-       background-image:url(images/tabs/tabs-sprite.gif);
+
+.x-tab-strip-top .x-tab-strip-active .x-tab-right {
+       background-color: #ffffff;
+       border-bottom: 1px solid #ffffff;
 }
 
 .x-tab-strip-bottom .x-tab-right {
@@ -277,10 +298,6 @@ ul.x-tab-strip-bottom{
        background-image:url(images/tabs/tab-close.gif);
 }
 
-.x-tab-panel-body {
-       border-color:#A2AAB8;
-       background:#EFEFF4;
-}
 .x-tab-panel-bbar .x-toolbar {
        border-color: #A2AAB8;
 }
@@ -289,12 +306,29 @@ ul.x-tab-strip-bottom{
        border-color: #A2AAB8;
 }
 
+.x-tab-panel-header, .x-tab-panel-footer {
+       border-bottom: none;
+}
+
+.x-tab-panel-header {
+       padding-bottom: 0;
+}
+
+.x-tab-panel-footer {
+       padding-top: 0;
+}
+
 .x-tab-panel-header-plain .x-tab-strip-spacer,
 .x-tab-panel-footer-plain .x-tab-strip-spacer {
        border-color:#A2AAB8;
        background: #eaeaea;
 }
 
+.x-tab-scrolling .x-tab-strip-wrap {
+       margin-left: 21px;
+       margin-right: 21px;
+}
+
 .x-tab-scroller-left {
        background-image: url(images/tabs/scroll-left.gif);
        border-color:#A2AAB8;
@@ -553,7 +587,7 @@ body.x-body-masked .x-window-mc, body.x-body-masked .x-window-plain .x-window-mc
 }
 
 .x-tab-panel-header, .x-tab-panel-footer {
-       background-color: #EFEFF4;
+       background-color: #f1f1f1;
        border-color:#A2AAB8;
        overflow:hidden;
        zoom:1;
@@ -563,16 +597,18 @@ body.x-body-masked .x-window-mc, body.x-body-masked .x-window-plain .x-window-mc
        border-color:#A2AAB8;
 }
 
+/* tabs inside tabs */
+.x-tab-panel-body .x-tab-panel-header,
+.x-tab-panel-body .x-tab-panel-footer {
+       background-color: #ffffff;
+
+}
 ul.x-tab-strip-top{
-       background-color:#EFEFF4;
-       background-image: url(images/tabs/tab-strip-bg.gif);
-       border-bottom-color:#A2AAB8;
+       border-bottom-color: #adadad;
 }
 
 ul.x-tab-strip-bottom{
-       background-color:#EFEFF4;
-       background-image: url(images/tabs/tab-strip-btm-bg.gif);
-       border-top-color:#A2AAB8;
+       border-top-color:#adadad;
 }
 
 .x-tab-panel-header-plain .x-tab-strip-spacer,
@@ -581,45 +617,6 @@ ul.x-tab-strip-bottom{
        background-color: #EFEFF4;
 }
 
-.x-tab-strip span.x-tab-strip-text {
-       font:normal 10px verdana, arial, tahoma, helvetica;
-       color:#686868;
-       padding-top:7px;
-}
-
-.x-tab-strip-over span.x-tab-strip-text {
-       color:#55545E;
-}
-
-.x-tab-strip-active span.x-tab-strip-text {
-       color:#55545E;
-       /*font-weight:bold; no bold tabs in TYPO3 */
-}
-
-.x-tab-strip-disabled .x-tabs-text {
-       color:#aaaaaa;
-}
-
-.x-tab-strip-top .x-tab-right, .x-tab-strip-top .x-tab-left, .x-tab-strip-top .x-tab-strip-inner{
-       background-image: url(images/tabs/tabs-sprite.gif);
-}
-
-.x-tab-strip-bottom .x-tab-right {
-       background-image: url(images/tabs/tab-btm-inactive-right-bg.gif);
-}
-
-.x-tab-strip-bottom .x-tab-left {
-       background-image: url(images/tabs/tab-btm-inactive-left-bg.gif);
-}
-
-.x-tab-strip-bottom .x-tab-strip-active .x-tab-right {
-       background-image: url(images/tabs/tab-btm-right-bg.gif);
-}
-
-.x-tab-strip-bottom .x-tab-strip-active .x-tab-left {
-       background-image: url(images/tabs/tab-btm-left-bg.gif);
-}
-
 .x-tab-strip .x-tab-strip-closable a.x-tab-strip-close {
        background-image:url(images/tabs/tab-close.gif);
 }
@@ -629,8 +626,17 @@ ul.x-tab-strip-bottom{
 }
 
 .x-tab-panel-body {
-       border-color:#A2AAB8;
-       background-color:#fff;
+       border-color:#a2aab8;
+       background-color: #ececec;
+       background-repeat: repeat-x;
+       background-image: url(../images/backgrounds/tab.png);
+       background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #ffffff), color-stop(0.3, #ececec));
+       background-image: -moz-linear-gradient(center top , #ffffff 0, #ececec 100px);
+       background-image: linear-gradient(center top , #ffffff 0, #ececec 100px);
+}
+
+.x-tab-panel-body .x-panel-body {
+       background-color: transparent;
 }
 
 .x-tab-panel-body-top {