Adding the experimental tabs to vector/experiments
authorAdam Miller <adam@users.mediawiki.org>
Thu, 1 Oct 2009 00:54:23 +0000 (00:54 +0000)
committerAdam Miller <adam@users.mediawiki.org>
Thu, 1 Oct 2009 00:54:23 +0000 (00:54 +0000)
skins/vector/experiments/images/tab-active-first.png [new file with mode: 0644]
skins/vector/experiments/images/tab-active-last.png [new file with mode: 0644]
skins/vector/experiments/images/tab-fade.png [new file with mode: 0644]
skins/vector/experiments/images/tab-first.png [new file with mode: 0644]
skins/vector/experiments/images/tab-last.png [new file with mode: 0644]
skins/vector/experiments/new-tabs.css [new file with mode: 0644]

diff --git a/skins/vector/experiments/images/tab-active-first.png b/skins/vector/experiments/images/tab-active-first.png
new file mode 100644 (file)
index 0000000..e4c39c4
Binary files /dev/null and b/skins/vector/experiments/images/tab-active-first.png differ
diff --git a/skins/vector/experiments/images/tab-active-last.png b/skins/vector/experiments/images/tab-active-last.png
new file mode 100644 (file)
index 0000000..a96f391
Binary files /dev/null and b/skins/vector/experiments/images/tab-active-last.png differ
diff --git a/skins/vector/experiments/images/tab-fade.png b/skins/vector/experiments/images/tab-fade.png
new file mode 100644 (file)
index 0000000..63b4f6e
Binary files /dev/null and b/skins/vector/experiments/images/tab-fade.png differ
diff --git a/skins/vector/experiments/images/tab-first.png b/skins/vector/experiments/images/tab-first.png
new file mode 100644 (file)
index 0000000..439b713
Binary files /dev/null and b/skins/vector/experiments/images/tab-first.png differ
diff --git a/skins/vector/experiments/images/tab-last.png b/skins/vector/experiments/images/tab-last.png
new file mode 100644 (file)
index 0000000..08e283d
Binary files /dev/null and b/skins/vector/experiments/images/tab-last.png differ
diff --git a/skins/vector/experiments/new-tabs.css b/skins/vector/experiments/new-tabs.css
new file mode 100644 (file)
index 0000000..97ab904
--- /dev/null
@@ -0,0 +1,291 @@
+/* Framework */
+body {
+       background-color: #f9f9f9;
+       color: #000000;
+}
+       body div#left-navigation,
+       body div#right-navigation{
+               top:3.15em;
+       }
+       body div#right-navigation{
+               margin-top:3.15em;
+       }
+       body #p-search form, 
+       body #p-search input, 
+       body #simpleSearch {
+               margin-top:0;
+       }
+       body div#p-cactions{
+               margin-top:0;
+       }
+       /* Namespaces and Views */
+       /* @noflip */
+       div.vectorTabs {
+               float: left;
+       }
+       body div.vectorTabs {
+               background-image: none;
+               padding-left: 0;
+       }
+       /* @noflip */
+       div.vectorTabs ul {
+               float: left;
+       }
+       div.vectorTabs ul {
+               height: 100%;
+               list-style: none;
+               margin: 0;
+               padding: 0;
+       }
+       /* @noflip */
+       div.vectorTabs ul li {
+               float: left;
+       }
+       /* OVERRIDDEN BY COMPLIANT BROWSERS */
+       body div.vectorTabs ul li {
+               line-height: 1.125em;
+               display: inline-block;
+               height: 1.85em;
+               margin: 0 1px 0 0;
+               padding: 0;
+               background:none;
+       }
+       /* IGNORED BY IE6 */
+       div.vectorTabs ul > li {
+               display: block;
+       }
+       body div.vectorTabs li.selected {
+               background-image: none;
+               border:none;
+       }
+       /* OVERRIDDEN BY COMPLIANT BROWSERS */
+       body div.vectorTabs li a {
+               border-top:1px solid #c0c0c0;
+               border-left:1px solid #c0c0c0;
+               border-right:1px solid #c0c0c0;
+               border-bottom:1px solid #a7d7f9;
+               display: inline-block;
+               height: 1.75em;
+               padding-left: 0.4em;
+               padding-right: 0.4em;
+               background-image:url(images/tab-fade.png);
+               background-position:top left;
+               background-repeat:repeat-x;
+       }
+       div.vectorTabs li a,
+       div.vectorTabs li a span {
+               color: #0645ad;
+               cursor: pointer;
+       }
+       div.vectorTabs li a span {
+               font-size: 0.8em;
+       }
+       /* IGNORED BY IE6 */
+       div.vectorTabs li > a {
+               display: block;
+       }
+       /* OVERRIDDEN BY COMPLIANT BROWSERS */
+       body div.vectorTabs a span {
+               display: inline-block;
+               padding-top: 0.5em;
+       }
+       /* IGNORED BY IE6 */
+       /* @noflip */
+       div.vectorTabs a > span {
+               float: left;
+               display: block;
+       }
+       body div.vectorTabs li.last {
+               background-image: url(images/tab-last.png);
+               background-repeat:no-repeat;
+               background-position:top right;
+               border:none;
+       }
+       body div.vectorTabs li.last a{
+               margin-right:7px;
+               padding-left:0.4em;
+               padding-right:0;
+               border-left:1px solid #c0c0c0;
+               border-top:1px solid #c0c0c0;
+               border-right:none;
+               background-image:url(images/tab-fade.png);
+               background-position:top left;
+               background-repeat:repeat-x;
+       }
+       body div.vectorTabs li.first {
+               background-image: url(images/tab-first.png);
+               background-repeat:no-repeat;
+               background-position:top left;
+               border:none;
+       }
+       body div.vectorTabs li.first a{
+               margin-left:7px;
+               padding-left:0em;
+               padding-right:0.4em;
+               border-right:1px solid #c0c0c0;
+               border-top:1px solid #c0c0c0;
+               background-image:url(images/tab-fade.png);
+               background-position:top left;
+               background-repeat:repeat-x;
+       }
+       
+       div.vectorTabs li.selected a,
+       div.vectorTabs li.selected a span,
+       div.vectorTabs li.selected a:visited
+       div.vectorTabs li.selected a:visited span {
+               color: #be5900 !important;
+               text-decoration: none;
+       }
+
+       body div.vectorTabs li.selected a{
+               border-top:1px solid #6cc8f3;
+               border-right:1px solid #6cc8f3;
+               border-left:1px solid #6cc8f3;
+               border-bottom:#ffffff;
+               height: 1.8em;
+               background-color:#fff;
+               background-image:none;
+       }
+       body div.vectorTabs li.selected.first{
+               background-image: url(images/tab-active-first.png);
+               background-repeat:no-repeat;
+               background-position:top left;
+       }
+       body div.vectorTabs li.selected.first a{
+               margin-left:7px;
+               padding-right:0.4em;
+               padding-left:0.2em;
+               border-left:none;
+       }
+       body div.vectorTabs li.selected.last{
+               background-image: url(images/tab-active-last.png);
+               background-repeat:no-repeat;
+               background-position:top right;
+       }
+       body div.vectorTabs li.selected.last a{
+               margin-right:7px;
+               padding-left:0.4em;
+               padding-right:0.2em;
+               border-right:none;
+       }
+       div.vectorTabs li.new a,
+       div.vectorTabs li.new a span,
+       div.vectorTabs li.new a:visited,
+       div.vectorTabs li.new a:visited span {
+               color: #990000;
+       }
+       
+       /* Variants and Actions */
+       /* @noflip */
+       div.vectorMenu {
+       }
+       body.rtl div.vectorMenu {
+               direction: rtl;
+       }
+       /* @noflip */
+       body #head div.vectorMenu h5 {
+
+               border-top:1px solid #c0c0c0;
+               border-left:1px solid #c0c0c0;
+               border-right:1px solid #c0c0c0;
+               padding-left: 0;
+               margin-left: 0px;
+       }
+       /* OVERRIDDEN BY COMPLIANT BROWSERS */
+       body div.vectorMenu h5 a {
+               display: inline-block;
+               width: 24px;
+               height:1.5em;
+               background-image: none;
+       }
+       /* IGNORED BY IE6 */
+       div.vectorMenu h5 > a {
+               display: block;
+       }
+       div.vectorMenu div.menu {
+               position: relative;
+               display: none;
+               clear: both;
+               text-align: left;
+       }
+       /* OVERRIDDEN BY COMPLIANT BROWSERS */
+       body.rtl div.vectorMenu div.menu {
+               margin-right: 24px;
+       }
+       /* IGNORED BY IE6 */
+       body.rtl div.vectorMenu > div.menu {
+               margin-right: auto;
+       }
+       /* Fixes old versions of FireFox */
+       body.rtl div.vectorMenu > div.menu,
+       x:-moz-any-link {
+               margin-right: 24px;
+       }
+       div.vectorMenu:hover div.menu {
+               display: block;
+       }
+       div.vectorMenu ul {
+               position: absolute;
+               background-color: white;
+               border: solid 1px silver;
+               border-top-width: 0;
+               list-style: none;
+               list-style-image: none;
+               list-style-type: none;
+               padding: 0;
+               margin: 0;
+               margin-left: -1px;
+               text-align: left;
+       }
+       /* Fixes old versions of FireFox */
+       div.vectorMenu ul,
+       x:-moz-any-link {
+               min-width: 5em;
+       }
+       /* Returns things back to normal in modern versions of FireFox */
+       div.vectorMenu ul,
+       x:-moz-any-link,
+       x:default {
+               min-width: 0;
+       }
+       div.vectorMenu li {
+               padding: 0;
+               margin: 0;
+               text-align: left;
+               line-height: 1em;
+       }
+       /* OVERRIDDEN BY COMPLIANT BROWSERS */
+       div.vectorMenu li a {
+               display: inline-block;
+               padding: 0.5em;
+               white-space: nowrap;
+       }
+       /* IGNORED BY IE6 */
+       div.vectorMenu li > a {
+               display: block;
+       }
+       div.vectorMenu li a {
+               color: #0645ad;
+               cursor: pointer;
+               font-size: 0.8em;
+       }
+       div.vectorMenu li.selected a,
+       div.vectorMenu li.selected a:visited {
+               color: #333333;
+               text-decoration: none;
+       }
+#ca-unwatch.icon,
+#ca-watch.icon{
+       background-color:#ffffff;
+       
+}
+#ca-unwatch.icon a,
+#ca-watch.icon a {
+       height: 1.75em !important;
+       padding-bottom:1px;
+       border-bottom:none;
+}
+#ca-watch.icon a,
+#ca-unwatch.icon a{
+       background-repeat:no-repeat;
+}