summaryrefslogtreecommitdiff
path: root/skins/Vector/components/navigation.less
blob: e9c5e4af9b83a77409ac06c5591ddd8f80c33f0f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
@import "mediawiki.mixins";
@import "personalMenu";
@import "search";
@import "tabs";

/* Hide, but keep accessible for screen-readers */
#mw-navigation h2 {
	position: absolute;
	top: -9999px;
}

/* Head */
#mw-page-base {
	height: 5em;
	background-position: bottom left;
	background-repeat: repeat-x;
	/* This image is only a fallback (for IE 6-9), so we do not @embed it. */
	background-image: url('images/page-fade.png');
	.vertical-gradient(@body-background-color, @menu-background-color, 50%, 100%);
	background-color: @body-background-color;
}

#mw-head-base {
	margin-top: -5em;
	margin-left: 10em;
	height: 5em;
}

div#mw-head {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;

	h3 {
		margin: 0;
		padding: 0;
	}
}

/* Navigation Containers */
#left-navigation {
	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;
	margin-top: 2.5em;
}

/* Logo */
#p-logo {
	position: absolute;
	top: -160px;
	left: 0;
	width: 10em;
	height: 160px;

	a {
		display: block;
		width: 10em;
		height: 160px;
		background-repeat: no-repeat;
		background-position: center center;
		text-decoration: none;
	}
}

/* Panel */
div#mw-panel {
	font-size: @menu-main-font-size;
	position: absolute;
	top: 160px;
	padding-top: 1em;
	width: 10em;
	left: 0;

	div.portal {
		margin: 0 0.6em 0 0.7em;
		padding: 0.25em 0;
		direction: ltr;
		background-position: top left;
		background-repeat: no-repeat;
		.background-image('images/portal-break.png');

		h3 {
			font-size: @menu-main-heading-font-size;
			color: @menu-main-heading-color;
			font-weight: normal;
			margin: 0;
			padding: @menu-main-heading-padding;
			cursor: default;
			border: none;
		}

		div.body {
			margin: @menu-main-body-margin;
			padding-top: 0;

			ul {
				list-style-type: none;
				list-style-image: none;
				margin: 0;
				padding: @menu-main-body-padding;

				li {
					line-height: 1.125em;
					margin: 0;
					padding: 0.25em 0;
					font-size: @menu-main-body-font-size;
					word-wrap: break-word;

					a {
						color: @menu-main-body-link-color;
						&:visited {
							color: @menu-main-body-link-visited-color;
						}
					}
				}
			}
		}
	}

	/* First sidebar portlet. Not using :first-of-type for IE<=8 support. */
	#p-logo + div.portal {
		background-image: none;
		margin-top: 0;
		h3 {
			display: none;
		}
		div.body {
			margin-left: 0.5em;
		}
	}
}