-
Notifications
You must be signed in to change notification settings - Fork 26
/
ui.less
381 lines (326 loc) · 7.17 KB
/
ui.less
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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
@import 'minerva.variables';
@import 'minerva.mixins';
@import 'mediawiki.mixins';
@topBarBackgroundColor: #f3f3f3;
html,
body {
// Ensure overlays take up full screen
height: 100%;
}
#content {
//border-top: 1px solid @grayLight;
border-top-color: @chromeContentSeparator;
}
.header-container {
background-color: @chromeColor;
}
.search-overlay,
.header {
.search {
padding: .5em 28px;
// FIXME: share this file with the similar file in mobile.languages.structured
.background-image-svg( 'magnifying-glass.svg', '' );
background-position: 7px center;
background-repeat: no-repeat;
background-size: 20px 20px;
border-radius: @borderRadius;
box-shadow: 0 1px 1px rgba( 0, 0, 0, .05 );
}
}
.last-modified-bar {
background-color: transparent;
display: block;
color: @colorGray6;
transition: background-color 0.2s ease, color 0.2s ease;
a,
a:visited {
color: @colorGray6;
// If browser supports
&:nth-child( 2 ) {
font-weight: bold;
}
}
#mw-mf-last-modified {
padding: 5px @contentMargin;
background-color: @colorGray14;
}
&.active {
#mw-mf-last-modified {
background-color: @lastModifiedBarActiveBackgroundColor;
}
color: #fff;
a {
color: #fff;
}
}
}
.header {
display: table;
width: 100%;
height: @headerHeight;
white-space: nowrap;
// When banners are present we want to easily distinguish between them and the header so add border
border-top: 1px solid @colorGrayLight;
margin-top: @headerMarginTop;
// button
> div {
width: @headerHeight;
position: relative;
}
// Search field
> form,
// Spinner
> div {
vertical-align: middle;
display: table-cell;
}
// Menu and notifications button
> div a {
display: block;
}
// Search
> form {
width: auto;
vertical-align: middle;
}
> .header-title {
vertical-align: middle;
}
}
.header > form,
.overlay-header .overlay-title {
padding: .15em 0;
&:last-child {
// Reserve space to the right in case the search form in the header or
// overlay title in the overlay header is the last element. Use @iconGutterWidth
// because there is a hamburger or close/back icon next to this element and
// the space between them is exactly that.
padding-right: @iconGutterWidth;
}
}
// Make search input more visible for users on small screens.
// Opera Mini doesn't support placeholders.
@media all and ( max-width: @wgMFDeviceWidthMobileSmall ) {
.header {
.search {
border: 1px solid @grayLight;
padding: .3em .1em;
}
}
}
/* Search */
.client-use-basic-search,
.client-nojs {
.search-box {
.fulltext-search, // FIXME: remove `.fulltext-search` selector when cache clears
.button-wrapper {
background-color: @colorProgressive;
border-radius: @borderRadius;
cursor: pointer;
float: right;
margin-left: .5em;
padding: .375em 0;
.fulltext-search {
opacity: 0; // the enclosing div is an icon, no need to show the text
padding: 0;
}
}
.input-wrapper {
overflow: hidden;
.search {
margin-right: 0;
// FIXME: use the magnifying glass width, rather than an absolute value
padding: .5em .1em .5em 2em; // 2em - space for the magnifying glass icon
width: 100%;
}
}
// FIXME: remove when cache clears
> .search,
> .fulltext-search {
display: inline-block;
float: none;
}
// FIXME: remove when cache clears
> .search {
max-width: 180px;
}
}
.content h2 {
border-bottom: solid 1px @sectionBorderColor;
}
}
input.search {
outline: 0;
width: 100%;
// FIXME: unable to check but the important may not be needed for Nokia S60;
background-color: #fff !important; /* remove fennec default background also see bug 36490 */
// get rid of rounded corners in Safari
-webkit-appearance: none;
// get rid of X in Chrome
&::-webkit-search-cancel-button {
-webkit-appearance: none;
}
}
// FIXME: remove when micro.tap in stable and rule from common-js.less too
.search-box {
-webkit-tap-highlight-color: rgba( 255, 255, 255, 0 );
}
.content {
// Correct icon sizes of edit icon when using mw-ui-icon.
h1 {
.edit-page {
font-size: 1 / @fontSizeH1;
}
}
h2 {
// Clear table of contents and any other floated elements in desktop Minerva.
clear: both;
.edit-page {
font-size: 1 / @fontSizeH2;
}
}
h3 {
.edit-page {
font-size: 1 / @fontSizeH3;
}
}
.edit-page {
display: inline-block;
visibility: hidden;
}
.open-block {
// Restrict to child so that child section edit links do not get revealed.
.edit-page {
visibility: visible;
}
}
.section-heading {
width: 100%;
border-bottom: solid 1px @sectionBorderColor;
margin-bottom: @headingMargin;
.indicator {
font-size: @indicatorFontSize;
}
}
.section-heading,
.in-block {
// Safari needs this. @see T106347
display: table;
.mw-headline {
width: 100%;
}
> span {
display: table-cell;
vertical-align: middle;
}
}
}
// Toggling indicators are unusable without JavaScript
.client-nojs {
.section-heading .indicator {
display: none;
}
}
.stable {
// Remove when/if page-secondary-actions are promoted to stable
#language-switcher,
// FIXME: remove .languageSelector when cache clears
.languageSelector {
margin-top: 1em;
}
}
#page-secondary-actions {
// Clears floating on table of contents on stub pages.
clear: both;
a {
margin: 10px 2px 2px 0;
}
}
.truncated-text {
white-space: nowrap;
overflow: hidden;
-webkit-text-overflow: ellipsis;
text-overflow: ellipsis;
// FIXME: this works only in WebKit
&.multi-line {
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
}
&.two-line {
-webkit-line-clamp: 2;
// fallback for non-WebKit
max-height: 2.6em;
}
}
// FIXME: Create generic class to represent both of these headers
.overlay,
.header {
// need to specify id or else other rules are more important
// FIXME: simplify when .icon class from Overlay used instead
#secondary-button.user-button,
.user-button {
// Make sure count is positioned correctly in relation to bell icon
position: relative;
// can't use display:none class as icons must have a label to retain height
.label {
visibility: hidden;
}
&.loading span {
display: none;
}
}
}
.notification-count {
text-indent: 0;
display: inline-block;
font-weight: bold;
color: #fff;
background: #c91f2c;
border-radius: 2px;
height: 1.2em;
line-height: 1.2em;
min-width: 1em;
margin: .6em .6em 0 0;
padding: 0 0.1em;
text-align: center;
position: absolute;
right: 0;
top: -.1em;
&.zero {
display: none;
}
// FIXME: There must be a better way of doing this
&.max {
right: .2em;
width: 2em;
height: 2em;
line-height: 2em;
font-size: 0.7em;
}
}
// FIXME [mediawiki ui] These rules should not be needed in the mobile context
.mw-ui-button-group {
text-align: center;
* {
float: none !important;
}
// For talk and CTA drawer
.mw-ui-block {
width: auto;
}
}
// This is here rather than in mainmenu.less because we want to load these rules for non-js users too
// Transparent shield hidden by default
.transparent-shield,
.navigation-drawer {
// don't use display: none because it's not animatable
position: absolute;
z-index: @z-indexBase;
visibility: hidden;
}
.content .nojs-edit {
display: inline-block;
visibility: visible;
float: right;
}