1/* Styles common to WebUI pages that share the options pages style */
2body {
3  cursor: default;
4  font-size: 13px;
5}
6
7a:link {
8  color: rgb(63, 110, 194);
9}
10
11a:active {
12  color: rgb(37, 64, 113);
13}
14
15#navbar-content-title {
16  -webkit-padding-end: 24px;
17  -webkit-user-select: none;
18  color: #53637d;
19  cursor: pointer;
20  font-size: 200%;
21  font-weight: normal;
22  margin: 0;
23  padding-bottom: 14px;
24  padding-top: 13px;
25  text-align: end;
26  text-shadow: white 0 1px 2px;
27}
28
29#main-content {
30  display: -webkit-box;
31  position: absolute;
32  left: 0;
33  right: 0;
34  top: 0;
35  bottom: 0;
36}
37
38#navbar {
39  margin: 0;
40}
41
42#navbar-container {
43  -webkit-border-end: 1px solid #c6c9ce;
44  background: -webkit-linear-gradient(rgba(234, 238, 243, 0.2), #eaeef3),
45              -webkit-linear-gradient(left, #eaeef3, #eaeef3 97%, #d3d7db);
46  position: fixed;
47  bottom: 0;
48  /* We set both left and right for the sake of RTL. */
49  left: 0;
50  right: 0;
51  top: 0;
52  width: 216px;
53  z-index: 2;
54}
55
56html[dir='rtl'] #navbar-container {
57  background: -webkit-linear-gradient(rgba(234, 238, 243, 0), #EAEEF3),
58              -webkit-linear-gradient(right, #EAEEF3, #EAEEF3 97%, #D3D7DB);
59}
60
61html.hide-menu #navbar-container {
62  display: none;
63}
64
65#navbar-container > ul {
66  -webkit-user-select: none;
67  list-style-type: none;
68  margin: 0;
69  padding: 0;
70}
71
72.navbar-item {
73  border-bottom: 1px solid transparent;
74  border-top: 1px solid transparent;
75  color: #426dc9;
76  cursor: pointer;
77  display: block;
78  font-size: 105%;
79  outline: none;
80  padding: 7px 0;
81  text-align: end;
82  text-shadow: white 0 1px 1px;
83  -webkit-padding-end: 24px;
84}
85
86.navbar-item:focus {
87  border-bottom: 1px solid #8faad9;
88  border-top: 1px solid #8faad9;
89}
90
91.navbar-item-selected {
92  -webkit-box-shadow: 0px 1px 0px #f7f7f7;
93  background: -webkit-linear-gradient(left, #bbcee9, #bbcee9 97%, #aabedc);
94  border-bottom: 1px solid #8faad9;
95  border-top: 1px solid #8faad9;
96  color: black;
97  text-shadow: #bbcee9 0 1px 1px;
98}
99
100#mainview {
101  -webkit-box-align: stretch;
102  -webkit-padding-start: 216px;
103  margin: 0;
104  position: absolute;
105  left: 0;
106  right: 0;
107  top: 0;
108  bottom: 0;
109  z-index: 1;
110}
111
112html.hide-menu #mainview {
113  -webkit-padding-start: 0;
114}
115
116#mainview-content {
117  min-height: 100%;
118  position: relative;
119}
120
121#page-container {
122  box-sizing: border-box;
123  max-width: 888px;
124  min-width: 600px;
125  padding: 0 24px;
126}
127
128div.checkbox,
129div.radio {
130  margin: 5px 0;
131  color: #444;
132}
133
134div.disabled {
135  color: #888;
136}
137
138/* TEXT */
139input[type='password'],
140input[type='text'],
141input[type='url'],
142input:not([type]) {
143  -webkit-border-radius: 2px;
144  border: 1px solid #aaa;
145  font-size: inherit;
146  padding: 3px;
147}
148
149/* CHECKBOX, RADIO */
150input[type=checkbox],
151input[type=radio] {
152  margin-left: 0;
153  margin-right: 0;
154  position: relative;
155  top: 1px;
156}
157
158/* Checkbox and radio buttons have different sizes on different platforms. The
159 * following rules have platform specific tweaks.
160 * TODO(arv): Test the vertical position on Linux and CrOS as well.
161 */
162
163label > input[type=checkbox],
164label > input[type=radio] {
165  opacity: 0.7;
166  margin-top: 1px;
167}
168
169html[os=mac] label > input[type=checkbox],
170html[os=mac] label > input[type=radio] {
171  margin-top: 2px;
172}
173
174html[os=chromeos] label > input[type=checkbox],
175html[os=chromeos] label > input[type=radio] {
176  top: 2px;
177}
178
179/* Checkbox and radio hover visuals.
180 * Their appearance when checked is set to be the same.
181 */
182label:hover > input[type=checkbox]:not([disabled]),
183label:hover > input[type=radio]:not([disabled]),
184label > input:not([disabled]):checked {
185  opacity: 1;
186}
187
188label:hover > input[type=checkbox]:not([disabled]) ~ span,
189label:hover > input[type=radio]:not([disabled]) ~ span,
190label > input:not([disabled]):checked ~ span {
191  color: #222;
192}
193
194/* This will 'disable' the label associated with any input whose next sibling is
195 * the span containing the label (usually a checkbox or radio).
196 */
197label > input[disabled] ~ span {
198  color: #888;
199}
200
201/* Elements that need to be LTR even in an RTL context, but should align
202 * right. (Namely, URLs, search engine names, etc.)
203 */
204html[dir='rtl'] .weakrtl {
205  direction: ltr;
206  text-align: right;
207}
208
209/* Input fields in search engine table need to be weak-rtl. Since those input
210 * fields are generated for all cr.ListItem elements (and we only want weakrtl
211 * on some), the class needs to be on the enclosing div.
212 */
213html[dir='rtl'] div.weakrtl input {
214    direction: ltr;
215    text-align: right;
216}
217
218html[dir='rtl'] .favicon-cell.weakrtl {
219  -webkit-padding-end: 22px;
220  -webkit-padding-start: 0;
221}
222
223/* weakrtl for selection drop downs needs to account for the fact that
224 * Webkit does not honor the text-align attribute for the select element.
225 * (See Webkit bug #40216)
226 */
227html[dir='rtl'] select.weakrtl {
228  direction: rtl;
229}
230
231html[dir='rtl'] select.weakrtl option {
232  direction: ltr;
233}
234
235/* WebKit does not honor alignment for text specified via placeholder attrib.
236 * This CSS is a workaround. Please remove once WebKit bug is fixed.
237 * https://bugs.webkit.org/show_bug.cgi?id=63367
238 */
239html[dir='rtl'] input.weakrtl::-webkit-input-placeholder,
240html[dir='rtl'] .weakrtl input::-webkit-input-placeholder {
241  direction: rtl;
242}
243
244.page h1 {
245  -webkit-padding-end: 24px;
246  -webkit-user-select: none;
247  border-bottom: 1px solid #eeeeee;
248  color: #53637d;
249  font-size: 200%;
250  font-weight: normal;
251  margin: 0;
252  padding-bottom: 4px;
253  padding-top: 13px;
254  text-shadow: white 0 1px 2px;
255}
256
257
258