Merge "vector: Move right tabs from behind to below left tabs"

[lhc/web/wiklou.git] / skins / vector / screen.css

diff --git a/skins/vector/screen.css b/skins/vector/screen.css
index eb4a4dd..34001f4 100644 (file)
--- a/skins/vector/screen.css
+++ b/skins/vector/screen.css
@@ -61,8 +61,7 @@ div#mw-head {
        right: 0;
        width: 100%;
 }
-div#mw-head h3,
-div#mw-head h5 {
+div#mw-head h3 {
        margin: 0;
        padding: 0;
 }
@@ -78,8 +77,7 @@ div.emptyPortlet {
        /* Display on top of page tabs - bugs 37158, 48078 */
        z-index: 100;
 }
-#p-personal h3,
-#p-personal h5 {
+#p-personal h3 {
        display: none;
 }
 #p-personal ul {
@@ -102,9 +100,17 @@ div.emptyPortlet {
 }
 /* Navigation Containers */
 #left-navigation {
-       position: absolute;
-       left: 10em;
-       top: 2.5em;
+       float: left;
+       margin-left: 10em;
+       margin-top: 2.5em;
+       /* When right nav would overlap left nav, it's placed below it
+          (normal CSS floats behavior). This rule ensures that no empty space
+          is shown between them due to right nav's margin-top. Page layout
+          is still broken, but at least the nav overlaps only the page title
+          instead of half the content. */
+       margin-bottom: -2.5em;
+       /* IE 6 double-margin bug fix */
+       display: inline;
 }
 #right-navigation {
        float: right;
@@ -112,9 +118,7 @@ div.emptyPortlet {
 }
 /* Navigation Labels */
 div.vectorTabs h3,
-div.vectorTabs h5,
-div.vectorMenu h3 span,
-div.vectorMenu h5 span {
+div.vectorMenu h3 span {
        display: none;
 }
 /* Namespaces and Views */
@@ -219,6 +223,12 @@ div.vectorMenu {
        float: left;
        /* @embed */
        background-image: url(images/arrow-down-icon.png);
+       /* SVG support using a transparent gradient to guarantee cross-browser
+        * compatibility (browsers able to understand gradient syntax support also SVG) */
+       /* @embed */
+       background-image: -webkit-linear-gradient(transparent, transparent), url(images/arrow-down-icon.svg);
+       /* @embed */
+       background-image: linear-gradient(transparent, transparent), url(images/arrow-down-icon.svg);
        background-position: 100% 60%;
        background-repeat: no-repeat;
        cursor: pointer;
@@ -226,6 +236,12 @@ div.vectorMenu {
 div.vectorMenuFocus {
        /* @embed */
        background-image: url(images/arrow-down-focus-icon.png);
+       /* SVG support using a transparent gradient to guarantee cross-browser
+        * compatibility (browsers able to understand gradient syntax support also SVG) */
+       /* @embed */
+       background-image: -webkit-linear-gradient(transparent, transparent), url(images/arrow-down-focus-icon.svg);
+       /* @embed */
+       background-image: linear-gradient(transparent, transparent), url(images/arrow-down-focus-icon.svg);
        background-position: 100% 60%;
 }
 /* @noflip */
@@ -234,22 +250,19 @@ body.rtl div.vectorMenu {
 }
 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 /* @noflip */
-div#mw-head div.vectorMenu h3,
-div#mw-head div.vectorMenu h5 {
+div#mw-head div.vectorMenu h3 {
        float: left;
        /* @embed */
        background-image: url(images/tab-break.png);
        background-repeat: no-repeat;
 }
 /* This will be flipped - unlike the one above it */
-div#mw-head div.vectorMenu h3,
-div#mw-head div.vectorMenu h5 {
+div#mw-head div.vectorMenu h3 {
        background-position: bottom left;
        margin-left: -1px;
 }
 /* IGNORED BY IE6 */
-div#mw-head div.vectorMenu > h3,
-div#mw-head div.vectorMenu > h5 {
+div#mw-head div.vectorMenu > h3 {
        background-image: none;
 }
 div#mw-head div.vectorMenu h4,
@@ -264,8 +277,7 @@ div.vectorMenu#p-variants #mw-vector-current-variant {
 }
 /* OVERRIDDEN BY COMPLIANT BROWSERS */
 /* @noflip */
-div.vectorMenu h3 a,
-div.vectorMenu h5 a {
+div.vectorMenu h3 a {
        display: inline-block;
        width: 24px;
        height: 1.9em;
@@ -275,13 +287,11 @@ div.vectorMenu h5 a {
        background-repeat: no-repeat;
 }
 /* This will be flipped - unlike the one above it */
-div.vectorMenu h3 a,
-div.vectorMenu h5 a {
+div.vectorMenu h3 a {
        background-position: bottom right;
 }
 /* IGNORED BY IE6 */
-div.vectorMenu h3 > a,
-div.vectorMenu h5 > a {
+div.vectorMenu h3 > a {
        display: block;
 }
 div.vectorMenu div.menu {
@@ -360,8 +370,7 @@ div.vectorMenu li.selected a:visited {
        text-decoration: none;
 }
 /* Search */
-#p-search h3,
-#p-search h5 {
+#p-search h3 {
        display: none;
 }
 /* @noflip */
@@ -478,8 +487,7 @@ div#mw-panel div.portal {
        padding-bottom: 1.5em;
        direction: ltr;
 }
-div#mw-panel div.portal h3,
-div#mw-panel div.portal h5 {
+div#mw-panel div.portal h3 {
        font-weight: normal;
        color: #444;
        padding: 0.25em;
@@ -688,10 +696,6 @@ div#content {
        font-size: 0.8em;
 }
 
-.editsection {
-       float: right;
-}
-
 ul {
        list-style-type: disc;
        /* @embed */
@@ -808,10 +812,12 @@ div#bodyContent {
 }
 
 /* mediawiki.notification */
-.skin-vector #mw-notification-area {
-       top: 7em;
+.skin-vector .mw-notification-area {
        font-size: 0.8em;
 }
+.skin-vector .mw-notification-area-layout {
+       top: 7em;
+}
 .skin-vector .mw-notification {
        background-color: #fff;
        background-color: rgba(255, 255, 255, 0.93);
@@ -880,14 +886,14 @@ div.vectorTabs ul {
 /* Animate between standard and high definition layouts */
 
 body.vector-animateLayout div#content,
-body.vector-animateLayout div#footer {
+body.vector-animateLayout div#footer,
+body.vector-animateLayout #left-navigation {
        -moz-transition: margin-left 250ms, padding 250ms;
        -webkit-transition: margin-left 250ms, padding 250ms;
        -o-transition: margin-left 250ms, padding 250ms;
        transition: margin-left 250ms, padding 250ms;
 }
-body.vector-animateLayout #p-logo,
-body.vector-animateLayout #left-navigation {
+body.vector-animateLayout #p-logo {
        -moz-transition: left 250ms;
        -webkit-transition: left 250ms;
        -o-transition: left 250ms;