blob: a97121d578931d64dcc533fd46d299fd66e9d37b (
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
|
/*
* Language Category Display (LCD) consists of multiple sections:
* - one to display when there are no search results (which might display suggested languages)
* - one for each region of the world, plus regions for world languages and suggested languages
* The regions consist of one or more rows (blocks) which consist of one-to-four columns. Each
* column is an ul element, and contains up to 8 li elements, each containing a link.
*/
.uls-lcd {
background-color: #fcfcfc;
height: 20em;
/* Work around Chrome bug where it places scrollbar on the left in
* in RTL mode but actually reserves the place on the right side */
overflow-x: hidden;
overflow-y: auto;
width: auto;
padding: 0 16px;
}
.uls-lcd--no-quicklist [data-region="all"] .uls-lcd-region-title {
display: none;
}
.uls-lcd-region-section {
margin-top: 10px;
}
.uls-lcd-region-title {
color: #555;
font-size: 14px;
padding-left: 28px;
}
/*
* We need to have this as a grid row to push rest of the content below it, but resetting
* padding and margin so that calculating them for children is easier.
*/
.grid .uls-language-block.row {
padding: 0;
margin: 0;
}
.uls-language-block > ul {
/*
* We don't want any visible bullets in this list. Not by default anyway.
* Using very unspecific selector here to allow other classes to override.
* Bug because overflow: hidden is incompatible with bullets, also render
* the bullets inside the list in case there should be any.
*/
list-style: none none;
}
/*
* Each block should have 16px padding on both sides. But because we already gave
* 16px for the whole menu, we need to remove it for first and last items the blocks.
*/
.grid .uls-language-block > ul {
margin: 0 0 20px 0;
padding: 0 16px;
}
.grid .uls-language-block > ul:first-child {
padding-left: 0;
}
.grid .uls-language-block > ul:last-child {
padding-right: 0;
}
.uls-language-block > ul > li {
cursor: pointer;
margin-left: 20px;
padding: 8px;
/*
* The directionality (ltr/rtl) for each list item is set dynamically
* as HTML attributes in JavaScript. Setting directionality also applies
* alignment, but a list with mixed alignment is hard to read.
* All items are therefore explicitly aligned to the left, including names
* of right-to-left languages in left-to-right environment and vice versa.
* As long as the directionality of the item is set correctly, the text
* is readable.
*/
text-align: left;
}
.uls-language-block > ul > li:hover {
background-color: #eaeff7;
}
.uls-language-block a {
cursor: pointer;
text-decoration: none;
color: #36c;
font-size: 14px;
display: inline-block;
width: 100%;
overflow-x: hidden;
/*
* Some languages have long names for various reasons and we still want
* them to appear on one line.
* To make it work correctly, the directionality must be set correctly
* on the item level.
*/
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
.uls-no-results-view {
display: none;
}
.uls-lcd.uls-no-results > .uls-lcd-region-section {
display: none;
}
.uls-lcd.uls-no-results > .uls-no-results-view {
display: block;
}
.uls-no-results-found-title {
font-size: 16px;
padding: 0 16px 0 28px;
margin: 20px 0;
border-bottom: 0;
color: #54595d;
}
.uls-no-found-more {
border-top: 1px solid #eaecf0;
color: #54595d;
padding: 12px 16px 12px 44px;
font-size: 0.9em;
width: 100%;
margin-top: 1.6em;
line-height: 1.6em;
position: absolute;
bottom: 0;
left: 0;
}
|
