##// END OF EJS Templates
Prevent font scaling in landscape mode on webkit (#22104)....
Jean-Philippe Lang -
r14834:f4a17421c1a0
parent child
Show More
@@ -1,764 +1,765
1 /*----------------------------------------*\
1 /*----------------------------------------*\
2 RESPONSIVE CSS
2 RESPONSIVE CSS
3 \*----------------------------------------*/
3 \*----------------------------------------*/
4
4
5 /*
5 /*
6 CONTENTS
6 CONTENTS
7
7
8 A) BASIC MOBILE RESETS
8 A) BASIC MOBILE RESETS
9 B) HEADER & TOP MENUS
9 B) HEADER & TOP MENUS
10 C) MAIN CONTENT & SIDEBAR
10 C) MAIN CONTENT & SIDEBAR
11 D) TOGGLE BUTTON & FLYOUT MENU
11 D) TOGGLE BUTTON & FLYOUT MENU
12 E) UX ELEMENTS
12 E) UX ELEMENTS
13 F) PAGE SPECIFIC STYLES
13 F) PAGE SPECIFIC STYLES
14 G) FORMS
14 G) FORMS
15 */
15 */
16
16
17 /* Hide new elements (toggle button and flyout menu) above 900px */
17 /* Hide new elements (toggle button and flyout menu) above 900px */
18 .mobile-toggle-button,
18 .mobile-toggle-button,
19 .flyout-menu {
19 .flyout-menu {
20 display: none;
20 display: none;
21 }
21 }
22
22
23 /*
23 /*
24 redmine's body is set to min-width: 900px
24 redmine's body is set to min-width: 900px
25 add first breakpoint here and start adding responsiveness
25 add first breakpoint here and start adding responsiveness
26 */
26 */
27
27
28 @media all and (max-width: 899px)
28 @media all and (max-width: 899px)
29 {
29 {
30 /*----------------------------------------*\
30 /*----------------------------------------*\
31 A) BASIC MOBILE RESETS
31 A) BASIC MOBILE RESETS
32 \*----------------------------------------*/
32 \*----------------------------------------*/
33
33
34 /*
34 /*
35 apply natural border box, see: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
35 apply natural border box, see: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
36 this helps us to better deal with percentages and padding / margin
36 this helps us to better deal with percentages and padding / margin
37 */
37 */
38 *,
38 *,
39 *:before,
39 *:before,
40 *:after {
40 *:after {
41 -webkit-box-sizing: border-box;
41 -webkit-box-sizing: border-box;
42 -moz-box-sizing: border-box;
42 -moz-box-sizing: border-box;
43 box-sizing: border-box;
43 box-sizing: border-box;
44 }
44 }
45
45
46 body,
46 body,
47 html {
47 html {
48 height: 100%;
48 height: 100%;
49 margin: 0;
49 margin: 0;
50 padding: 0;
50 padding: 0;
51 }
51 }
52
52
53 html {
53 html {
54 overflow-y: auto; /* avoid 2nd scrollbar on desktop */
54 overflow-y: auto; /* avoid 2nd scrollbar on desktop */
55 -webkit-text-size-adjust: 100%; /* prevent font scaling in landscape mode on webkit */
55 }
56 }
56
57
57 body {
58 body {
58 min-width: 0; /* reset the min-width of 900px */
59 min-width: 0; /* reset the min-width of 900px */
59 -webkit-overflow-scrolling: touch;
60 -webkit-overflow-scrolling: touch;
60 }
61 }
61
62
62 body,
63 body,
63 input,
64 input,
64 select,
65 select,
65 textarea,
66 textarea,
66 button {
67 button {
67 font-size: 14px; /* Set font-size for standard elements to 14px */
68 font-size: 14px; /* Set font-size for standard elements to 14px */
68 }
69 }
69
70
70 select {
71 select {
71 max-width: 100%; /* prevent long names within select menues from breaking content */
72 max-width: 100%; /* prevent long names within select menues from breaking content */
72 }
73 }
73
74
74 #wrapper {
75 #wrapper {
75 position: relative;
76 position: relative;
76 overflow-x: hidden; /* hide horizontal overflow */
77 overflow-x: hidden; /* hide horizontal overflow */
77 max-width: 100%;
78 max-width: 100%;
78 }
79 }
79
80
80 #wrapper,
81 #wrapper,
81 #wrapper2 {
82 #wrapper2 {
82 margin: 0;
83 margin: 0;
83 }
84 }
84
85
85 /*----------------------------------------*\
86 /*----------------------------------------*\
86 B) HEADER & TOP MENUS
87 B) HEADER & TOP MENUS
87 \*----------------------------------------*/
88 \*----------------------------------------*/
88
89
89 #header {
90 #header {
90 width: 100%;
91 width: 100%;
91 height: 64px; /* the height of our header on mobile */
92 height: 64px; /* the height of our header on mobile */
92 min-height: 0;
93 min-height: 0;
93 margin: 0;
94 margin: 0;
94 padding: 0;
95 padding: 0;
95 border: none;
96 border: none;
96 background-color: #628db6;
97 background-color: #628db6;
97 position: fixed;
98 position: fixed;
98 z-index: 9999;
99 z-index: 9999;
99 }
100 }
100
101
101 /* Hide project name on mobile (project name is still visible in select menu) */
102 /* Hide project name on mobile (project name is still visible in select menu) */
102 #header h1 {
103 #header h1 {
103 display: none !important;
104 display: none !important;
104 }
105 }
105
106
106 /* reset #header a color for mobile toggle button */
107 /* reset #header a color for mobile toggle button */
107 #header a.mobile-toggle-button {
108 #header a.mobile-toggle-button {
108 color: #f8f8f8;
109 color: #f8f8f8;
109 }
110 }
110
111
111
112
112 /* Hide top-menu and main-menu on mobile, because it's placed in our flyout menu */
113 /* Hide top-menu and main-menu on mobile, because it's placed in our flyout menu */
113 #top-menu,
114 #top-menu,
114 #header #main-menu {
115 #header #main-menu {
115 display: none;
116 display: none;
116 }
117 }
117
118
118 /* the quick search within header holding search form and #project_quick_jump_box box*/
119 /* the quick search within header holding search form and #project_quick_jump_box box*/
119 #header #quick-search {
120 #header #quick-search {
120 float: none;
121 float: none;
121 clear: none; /* there are themes which set clear property, this resets it */
122 clear: none; /* there are themes which set clear property, this resets it */
122 max-width: 100%; /* reset max-width */
123 max-width: 100%; /* reset max-width */
123 margin: 0;
124 margin: 0;
124 background: inherit;
125 background: inherit;
125 }
126 }
126
127
127 /* this represents the dropdown arrow to left of the mobile project menu */
128 /* this represents the dropdown arrow to left of the mobile project menu */
128 #header .jump-box-arrow:before {
129 #header .jump-box-arrow:before {
129 /* set a font-size in order to achive same result in different themes */
130 /* set a font-size in order to achive same result in different themes */
130 font-family: Verdana, sans-serif;
131 font-family: Verdana, sans-serif;
131 font-size: 2em;
132 font-size: 2em;
132 line-height: 64px;
133 line-height: 64px;
133
134
134 position: absolute;
135 position: absolute;
135 left: 0;
136 left: 0;
136
137
137 width: 2em;
138 width: 2em;
138 padding: 0 .5em;
139 padding: 0 .5em;
139 /* achieve dropdwon arrow by scaling a caret character */
140 /* achieve dropdwon arrow by scaling a caret character */
140 content: '^';
141 content: '^';
141 -webkit-transform: scale(1,-.8);
142 -webkit-transform: scale(1,-.8);
142 -ms-transform: scale(1,-.8);
143 -ms-transform: scale(1,-.8);
143 transform: scale(1,-.8);
144 transform: scale(1,-.8);
144 text-align: right;
145 text-align: right;
145 pointer-events: none;
146 pointer-events: none;
146
147
147 opacity: .6;
148 opacity: .6;
148 }
149 }
149
150
150 /* styles for combobox within quick-search (#project_quick_jump_box) */
151 /* styles for combobox within quick-search (#project_quick_jump_box) */
151 #header #quick-search select {
152 #header #quick-search select {
152 font-size: 1.5em;
153 font-size: 1.5em;
153 font-weight: bold;
154 font-weight: bold;
154 line-height: 1.2;
155 line-height: 1.2;
155
156
156 position: absolute;
157 position: absolute;
157 top: 15px;
158 top: 15px;
158 left: 0;
159 left: 0;
159
160
160 float: left;
161 float: left;
161
162
162 width: 100%;
163 width: 100%;
163 max-width: 100%;
164 max-width: 100%;
164 height: 2em;
165 height: 2em;
165 height: 35px;
166 height: 35px;
166 padding: 5px;
167 padding: 5px;
167 padding-right: 72px;
168 padding-right: 72px;
168 padding-left: 50px;
169 padding-left: 50px;
169
170
170 text-indent: .01px;
171 text-indent: .01px;
171
172
172 color: inherit;
173 color: inherit;
173 border: 0;
174 border: 0;
174 -webkit-border-radius: 0;
175 -webkit-border-radius: 0;
175 border-radius: 0;
176 border-radius: 0;
176 background: none;
177 background: none;
177 -webkit-box-shadow: none;
178 -webkit-box-shadow: none;
178 box-shadow: none;
179 box-shadow: none;
179 /* hide default browser arrow */
180 /* hide default browser arrow */
180 -webkit-appearance: none;
181 -webkit-appearance: none;
181 -moz-appearance: none;
182 -moz-appearance: none;
182 }
183 }
183
184
184 #header #quick-search form {
185 #header #quick-search form {
185 display: none;
186 display: none;
186 }
187 }
187
188
188 /*----------------------------------------*\
189 /*----------------------------------------*\
189 C) MAIN CONTENT & SIDEBAR
190 C) MAIN CONTENT & SIDEBAR
190 \*----------------------------------------*/
191 \*----------------------------------------*/
191
192
192 #main {
193 #main {
193 padding: 64px 0 0; /* padding-top equals header height */
194 padding: 64px 0 0; /* padding-top equals header height */
194 }
195 }
195
196
196 #main.nosidebar #content,
197 #main.nosidebar #content,
197 div#content {
198 div#content {
198 width: 100%;
199 width: 100%;
199 min-height: 0; /* reset min-height of #content */
200 min-height: 0; /* reset min-height of #content */
200 margin: 0;
201 margin: 0;
201 }
202 }
202
203
203 /* hide sidebar and sidebar switch panel, since it's placed in mobile flyout menu */
204 /* hide sidebar and sidebar switch panel, since it's placed in mobile flyout menu */
204 #sidebar,
205 #sidebar,
205 #sidebar-switch-panel {
206 #sidebar-switch-panel {
206 display: none;
207 display: none;
207 }
208 }
208
209
209 .splitcontentleft {
210 .splitcontentleft {
210 width: 100%;
211 width: 100%;
211 }
212 }
212
213
213 .splitcontentright {
214 .splitcontentright {
214 width: 100%;
215 width: 100%;
215 }
216 }
216
217
217 /*----------------------------------------*\
218 /*----------------------------------------*\
218 D) TOGGLE BUTTON & FLYOUT MENU
219 D) TOGGLE BUTTON & FLYOUT MENU
219 \*----------------------------------------*/
220 \*----------------------------------------*/
220
221
221 .mobile-toggle-button {
222 .mobile-toggle-button {
222 font-size: 42px;
223 font-size: 42px;
223 line-height: 64px;
224 line-height: 64px;
224
225
225 position: relative;
226 position: relative;
226 z-index: 10;
227 z-index: 10;
227
228
228 display: block; /* remove display: none; of non-mobile version */
229 display: block; /* remove display: none; of non-mobile version */
229 float: right;
230 float: right;
230
231
231 width: 60px;
232 width: 60px;
232 height: 64px;
233 height: 64px;
233 margin-top: 0;
234 margin-top: 0;
234
235
235 text-align: center;
236 text-align: center;
236
237
237 border-left: 1px solid #ddd;
238 border-left: 1px solid #ddd;
238 }
239 }
239
240
240 .mobile-toggle-button:hover,
241 .mobile-toggle-button:hover,
241 .mobile-toggle-button:active {
242 .mobile-toggle-button:active {
242 text-decoration: none;
243 text-decoration: none;
243 }
244 }
244
245
245 .mobile-toggle-button:after {
246 .mobile-toggle-button:after {
246 font-family: Verdana, sans-serif;
247 font-family: Verdana, sans-serif;
247 display: block;
248 display: block;
248 margin-top: -3px;
249 margin-top: -3px;
249 content: '\2261';
250 content: '\2261';
250 }
251 }
251
252
252 /* search magnifier icon */
253 /* search magnifier icon */
253 .search-magnifier {
254 .search-magnifier {
254 font-family: Verdana;
255 font-family: Verdana;
255 color: #bbb;
256 color: #bbb;
256
257
257 cursor: pointer;
258 cursor: pointer;
258 -webkit-transform: rotate(-45deg);
259 -webkit-transform: rotate(-45deg);
259 -moz-transform: rotate(45deg);
260 -moz-transform: rotate(45deg);
260 -o-transform: rotate(45deg);
261 -o-transform: rotate(45deg);
261 }
262 }
262
263
263 .search-magnifier--flyout {
264 .search-magnifier--flyout {
264 font-size: 25px;
265 font-size: 25px;
265 line-height: 54px;
266 line-height: 54px;
266
267
267 position: absolute;
268 position: absolute;
268 z-index: 1;
269 z-index: 1;
269 left: 12px;
270 left: 12px;
270 }
271 }
271
272
272 /* Flyout Menu */
273 /* Flyout Menu */
273
274
274 .flyout-menu {
275 .flyout-menu {
275 position: absolute;
276 position: absolute;
276 right: -250px;
277 right: -250px;
277
278
278 display: block; /* remove display: none; of non-mobile version */
279 display: block; /* remove display: none; of non-mobile version */
279 overflow-x: hidden;
280 overflow-x: hidden;
280
281
281 width: 250px;
282 width: 250px;
282 height: 100%;
283 height: 100%;
283 margin: 0; /* reset margin for themes that define it */
284 margin: 0; /* reset margin for themes that define it */
284 padding: 0; /* reset padding for themes that define it */
285 padding: 0; /* reset padding for themes that define it */
285
286
286 color: white;
287 color: white;
287 background-color: #3e5b76;
288 background-color: #3e5b76;
288 }
289 }
289
290
290 /* avoid zoom on search input focus for ios devices */
291 /* avoid zoom on search input focus for ios devices */
291 .flyout-menu input[type='text'] {
292 .flyout-menu input[type='text'] {
292 font-size: 16px;
293 font-size: 16px;
293 }
294 }
294
295
295 .flyout-menu h3 {
296 .flyout-menu h3 {
296 font-size: 11px;
297 font-size: 11px;
297 line-height: 19px;
298 line-height: 19px;
298
299
299 height: 20px;
300 height: 20px;
300 margin: 0;
301 margin: 0;
301 padding: 0;
302 padding: 0;
302
303
303 letter-spacing: .1em;
304 letter-spacing: .1em;
304 text-transform: uppercase;
305 text-transform: uppercase;
305
306
306 color: white;
307 color: white;
307 border-top: 1px solid #506a83;
308 border-top: 1px solid #506a83;
308 border-bottom: 1px solid #506a83;
309 border-bottom: 1px solid #506a83;
309 background-color: #628db6;
310 background-color: #628db6;
310 }
311 }
311
312
312 .flyout-menu h4 {
313 .flyout-menu h4 {
313 color: white;
314 color: white;
314 }
315 }
315
316
316 .flyout-menu h3,
317 .flyout-menu h3,
317 .flyout-menu h4,
318 .flyout-menu h4,
318 .flyout-menu > p,
319 .flyout-menu > p,
319 .flyout-menu > a,
320 .flyout-menu > a,
320 .flyout-menu ul li a,
321 .flyout-menu ul li a,
321 .flyout-menu__search,
322 .flyout-menu__search,
322 .flyout-menu__sidebar > div,
323 .flyout-menu__sidebar > div,
323 .flyout-menu__sidebar > p,
324 .flyout-menu__sidebar > p,
324 .flyout-menu__sidebar > a,
325 .flyout-menu__sidebar > a,
325 .flyout-menu__sidebar > form,
326 .flyout-menu__sidebar > form,
326 .flyout-menu > div,
327 .flyout-menu > div,
327 .flyout-menu > form {
328 .flyout-menu > form {
328 padding-left: 8px;
329 padding-left: 8px;
329 }
330 }
330
331
331 .flyout-menu .flyout-menu__avatar {
332 .flyout-menu .flyout-menu__avatar {
332 margin-top: -1px; /* move avatar up 1px */
333 margin-top: -1px; /* move avatar up 1px */
333 padding-left: 0;
334 padding-left: 0;
334 }
335 }
335
336
336 .flyout-menu__sidebar > form {
337 .flyout-menu__sidebar > form {
337 display: block;
338 display: block;
338 }
339 }
339
340
340 .flyout-menu__sidebar > form h3 {
341 .flyout-menu__sidebar > form h3 {
341 margin-left: -8px;
342 margin-left: -8px;
342 }
343 }
343
344
344 .flyout-menu__sidebar > form label {
345 .flyout-menu__sidebar > form label {
345 display: inline-block;
346 display: inline-block;
346 margin: 8px 0;
347 margin: 8px 0;
347 }
348 }
348
349
349 .flyout-menu__sidebar > form br br {
350 .flyout-menu__sidebar > form br br {
350 display: none;
351 display: none;
351 }
352 }
352
353
353 /* Targets list containing checkboxes (e.g. activities sidebar) in flyout menu */
354 /* Targets list containing checkboxes (e.g. activities sidebar) in flyout menu */
354 .flyout-menu__sidebar form > ul {
355 .flyout-menu__sidebar form > ul {
355 margin-left: -8px;
356 margin-left: -8px;
356 padding-left: 0;
357 padding-left: 0;
357 }
358 }
358
359
359 .flyout-menu__sidebar form > ul li {
360 .flyout-menu__sidebar form > ul li {
360 line-height: 39px;
361 line-height: 39px;
361 display: block;
362 display: block;
362 padding-left: 8px;
363 padding-left: 8px;
363 border-top: 1px solid rgba(255,255,255,.1);
364 border-top: 1px solid rgba(255,255,255,.1);
364 }
365 }
365
366
366 .flyout-menu__sidebar form > ul li:first-child {
367 .flyout-menu__sidebar form > ul li:first-child {
367 border-top: none;
368 border-top: none;
368 }
369 }
369
370
370 .flyout-menu__sidebar form > ul li label {
371 .flyout-menu__sidebar form > ul li label {
371 margin: 0;
372 margin: 0;
372 }
373 }
373
374
374 .flyout-menu__sidebar form > ul li label a {
375 .flyout-menu__sidebar form > ul li label a {
375 line-height: 1;
376 line-height: 1;
376 display: inline;
377 display: inline;
377 padding-left: 0;
378 padding-left: 0;
378 border: none;
379 border: none;
379 }
380 }
380
381
381 .flyout-menu ul {
382 .flyout-menu ul {
382 margin: 0;
383 margin: 0;
383 padding: 0;
384 padding: 0;
384 list-style: none;
385 list-style: none;
385 }
386 }
386
387
387 .flyout-menu #watchers {
388 .flyout-menu #watchers {
388 display: -webkit-flex;
389 display: -webkit-flex;
389 display: -ms-flexbox;
390 display: -ms-flexbox;
390 display: -webkit-box;
391 display: -webkit-box;
391 display: flex;
392 display: flex;
392 flex-direction: column;
393 flex-direction: column;
393
394
394 -webkit-flex-direction: column;
395 -webkit-flex-direction: column;
395 -ms-flex-direction: column;
396 -ms-flex-direction: column;
396 -webkit-box-orient: vertical;
397 -webkit-box-orient: vertical;
397 -webkit-box-direction: normal;
398 -webkit-box-direction: normal;
398 }
399 }
399
400
400 .flyout-menu #watchers .contextual {
401 .flyout-menu #watchers .contextual {
401 -webkit-box-ordinal-group: 4;
402 -webkit-box-ordinal-group: 4;
402 -webkit-order: 3;
403 -webkit-order: 3;
403 -ms-flex-order: 3;
404 -ms-flex-order: 3;
404 order: 3;
405 order: 3;
405 }
406 }
406
407
407 .flyout-menu #watchers h3 {
408 .flyout-menu #watchers h3 {
408 margin-left: -8px;
409 margin-left: -8px;
409 }
410 }
410
411
411 .flyout-menu #watchers ul li {
412 .flyout-menu #watchers ul li {
412 display: -webkit-flex;
413 display: -webkit-flex;
413 display: -ms-flexbox;
414 display: -ms-flexbox;
414 display: -webkit-box;
415 display: -webkit-box;
415 display: flex;
416 display: flex;
416 flex-direction: row;
417 flex-direction: row;
417
418
418 -webkit-flex-direction: row;
419 -webkit-flex-direction: row;
419 -ms-flex-direction: row;
420 -ms-flex-direction: row;
420 -webkit-box-orient: horizontal;
421 -webkit-box-orient: horizontal;
421 -webkit-box-direction: normal;
422 -webkit-box-direction: normal;
422 -webkit-align-items: center;
423 -webkit-align-items: center;
423 -ms-flex-align: center;
424 -ms-flex-align: center;
424 -webkit-box-align: center;
425 -webkit-box-align: center;
425 align-items: center;
426 align-items: center;
426 }
427 }
427
428
428 .flyout-menu ul li a {
429 .flyout-menu ul li a {
429 line-height: 40px;
430 line-height: 40px;
430 display: block;
431 display: block;
431 overflow: hidden;
432 overflow: hidden;
432 height: 40px;
433 height: 40px;
433 white-space: nowrap;
434 white-space: nowrap;
434 text-overflow: ellipsis;
435 text-overflow: ellipsis;
435 border-top: 1px solid rgba(255,255,255,.1);
436 border-top: 1px solid rgba(255,255,255,.1);
436 }
437 }
437
438
438 .flyout-menu ul li:first-child a {
439 .flyout-menu ul li:first-child a {
439 line-height: 39px;
440 line-height: 39px;
440 height: 39px;
441 height: 39px;
441 border-top: none;
442 border-top: none;
442 }
443 }
443
444
444 .flyout-menu a {
445 .flyout-menu a {
445 color: white;
446 color: white;
446 }
447 }
447
448
448 .flyout-menu ul li a:hover {
449 .flyout-menu ul li a:hover {
449 text-decoration: none;
450 text-decoration: none;
450 }
451 }
451
452
452 .flyout-menu ul li a.new-object,
453 .flyout-menu ul li a.new-object,
453 .new-object ~ .menu-children {
454 .new-object ~ .menu-children {
454 display: none;
455 display: none;
455 }
456 }
456
457
457 /* Left flyout search container */
458 /* Left flyout search container */
458 .flyout-menu__search {
459 .flyout-menu__search {
459 line-height: 54px;
460 line-height: 54px;
460 height: 64px;
461 height: 64px;
461 padding-top: 3px;
462 padding-top: 3px;
462 padding-right: 8px;
463 padding-right: 8px;
463 }
464 }
464
465
465 .flyout-menu__search input[type='text'] {
466 .flyout-menu__search input[type='text'] {
466 line-height: 2;
467 line-height: 2;
467
468
468 width: 100%;
469 width: 100%;
469 height: 38px;
470 height: 38px;
470 padding-left: 27px;
471 padding-left: 27px;
471
472
472 vertical-align: middle;
473 vertical-align: middle;
473
474
474 border: none;
475 border: none;
475 -webkit-border-radius: 3px;
476 -webkit-border-radius: 3px;
476 border-radius: 3px;
477 border-radius: 3px;
477 background-color: #fff;
478 background-color: #fff;
478 }
479 }
479
480
480 .flyout-menu__avatar {
481 .flyout-menu__avatar {
481 display: -webkit-box;
482 display: -webkit-box;
482 display: -webkit-flex;
483 display: -webkit-flex;
483 display: -ms-flexbox;
484 display: -ms-flexbox;
484 display: flex;
485 display: flex;
485 width: 100%;
486 width: 100%;
486 border-top: 1px solid rgba(255,255,255,.1);
487 border-top: 1px solid rgba(255,255,255,.1);
487 }
488 }
488
489
489 .flyout-menu__avatar img.gravatar {
490 .flyout-menu__avatar img.gravatar {
490 width: 40px;
491 width: 40px;
491 height: 40px;
492 height: 40px;
492 padding: 0;
493 padding: 0;
493 vertical-align: top;
494 vertical-align: top;
494 border-width: 0;
495 border-width: 0;
495 }
496 }
496
497
497 .flyout-menu__avatar a {
498 .flyout-menu__avatar a {
498 line-height: 40px;
499 line-height: 40px;
499 height: auto;
500 height: auto;
500 height: 40px;
501 height: 40px;
501 text-decoration: none;
502 text-decoration: none;
502 color: white;
503 color: white;
503 }
504 }
504
505
505 /* avatar */
506 /* avatar */
506 .flyout-menu__avatar a:first-child {
507 .flyout-menu__avatar a:first-child {
507 line-height: 0;
508 line-height: 0;
508 width: 40px;
509 width: 40px;
509 padding: 0;
510 padding: 0;
510 }
511 }
511
512
512 .flyout-menu__avatar .user {
513 .flyout-menu__avatar .user {
513 padding-left: 15px;
514 padding-left: 15px;
514 padding-right: 15px;
515 padding-right: 15px;
515 text-overflow: ellipsis;
516 text-overflow: ellipsis;
516 overflow: hidden;
517 overflow: hidden;
517 white-space: nowrap;
518 white-space: nowrap;
518 -webkit-flex-grow: 1;
519 -webkit-flex-grow: 1;
519 -ms-flex-grow: 1;
520 -ms-flex-grow: 1;
520 flex-grow: 1;
521 flex-grow: 1;
521 }
522 }
522
523
523 /* user link when no avatar is present */
524 /* user link when no avatar is present */
524 .flyout-menu__avatar--no-avatar a.user {
525 .flyout-menu__avatar--no-avatar a.user {
525 line-height: 40px;
526 line-height: 40px;
526 padding-left: 8px;
527 padding-left: 8px;
527 }
528 }
528
529
529 .flyout-is-active body {
530 .flyout-is-active body {
530 overflow: hidden; /* for body not to have scrollbars when left flyout menu is active */
531 overflow: hidden; /* for body not to have scrollbars when left flyout menu is active */
531 }
532 }
532
533
533 html.flyout-is-active {
534 html.flyout-is-active {
534 overflow: hidden;
535 overflow: hidden;
535 }
536 }
536
537
537 .flyout-is-active #wrapper, .flyout-is-active #header {
538 .flyout-is-active #wrapper, .flyout-is-active #header {
538 right: 250px; /* when left flyout is active, move body and header to the right (same amount like flyout-menu's width) */
539 right: 250px; /* when left flyout is active, move body and header to the right (same amount like flyout-menu's width) */
539 }
540 }
540
541
541 .flyout-is-active #wrapper {
542 .flyout-is-active #wrapper {
542 overflow: visible;
543 overflow: visible;
543 height: 100%;
544 height: 100%;
544 }
545 }
545
546
546 .flyout-is-active .mobile-toggle-button:after {
547 .flyout-is-active .mobile-toggle-button:after {
547 content: '\00D7'; /* close glyph */
548 content: '\00D7'; /* close glyph */
548 }
549 }
549
550
550 .flyout-is-active #wrapper2 {
551 .flyout-is-active #wrapper2 {
551 /*
552 /*
552 * only relevant for devices with cursor when flyout it active, in order to show,
553 * only relevant for devices with cursor when flyout it active, in order to show,
553 * that whole wrapper content is clickable and closes flyout menu
554 * that whole wrapper content is clickable and closes flyout menu
554 */
555 */
555 cursor: pointer;
556 cursor: pointer;
556 }
557 }
557
558
558 #admin-menu {
559 #admin-menu {
559 padding-left: 0;
560 padding-left: 0;
560 }
561 }
561
562
562 #admin-menu li {
563 #admin-menu li {
563 padding-bottom: 0;
564 padding-bottom: 0;
564 }
565 }
565
566
566 #admin-menu a,
567 #admin-menu a,
567 #admin-menu a.selected {
568 #admin-menu a.selected {
568 line-height: 40px;
569 line-height: 40px;
569 padding: 0;
570 padding: 0;
570 padding-left: 32px !important;
571 padding-left: 32px !important;
571 background-position: 8px 50%;
572 background-position: 8px 50%;
572 }
573 }
573
574
574 /*----------------------------------------*\
575 /*----------------------------------------*\
575 E) UX ELEMENTS
576 E) UX ELEMENTS
576 \*----------------------------------------*/
577 \*----------------------------------------*/
577
578
578 .mobile-hide {display:none;}
579 .mobile-hide {display:none;}
579 .mobile-show {display:initial;}
580 .mobile-show {display:initial;}
580
581
581 /* Contextual Buttons */
582 /* Contextual Buttons */
582
583
583 #content>.contextual {
584 #content>.contextual {
584 width: 100%;
585 width: 100%;
585 margin-bottom: .5em;
586 margin-bottom: .5em;
586 padding-left: 0; /* reset left padding in order to use whole space */
587 padding-left: 0; /* reset left padding in order to use whole space */
587 white-space: normal;
588 white-space: normal;
588 color: transparent;
589 color: transparent;
589 }
590 }
590
591
591 #content>.contextual a,
592 #content>.contextual a,
592 p.buttons a {
593 p.buttons a {
593 font-weight: bold;
594 font-weight: bold;
594
595
595 display: inline-block;
596 display: inline-block;
596
597
597 margin: 5px 0;
598 margin: 5px 0;
598 margin-right: 2px;
599 margin-right: 2px;
599 padding: 9px 9px 9px 9px;
600 padding: 9px 9px 9px 9px;
600
601
601 border: 1px solid #ddd;
602 border: 1px solid #ddd;
602 -webkit-border-radius: 3px;
603 -webkit-border-radius: 3px;
603 border-radius: 3px;
604 border-radius: 3px;
604 background-color: transparent;
605 background-color: transparent;
605 background-position-x: 4px;
606 background-position-x: 4px;
606 }
607 }
607
608
608 #content>.contextual a.icon,
609 #content>.contextual a.icon,
609 p.buttons a.icon {
610 p.buttons a.icon {
610 padding-left: 25px;
611 padding-left: 25px;
611 }
612 }
612
613
613 .flyout-menu .contextual {
614 .flyout-menu .contextual {
614 float: none;
615 float: none;
615 }
616 }
616
617
617 /* loading indicator */
618 /* loading indicator */
618 #ajax-indicator {
619 #ajax-indicator {
619 width: 60%;
620 width: 60%;
620 left: 20%;
621 left: 20%;
621 }
622 }
622
623
623 /* jquery ui dialogs */
624 /* jquery ui dialogs */
624 .ui-dialog {
625 .ui-dialog {
625 max-width: 98%;
626 max-width: 98%;
626 margin: 1%;
627 margin: 1%;
627 }
628 }
628
629
629 .ui-dialog .ui-dialog-content {
630 .ui-dialog .ui-dialog-content {
630 padding-left: 0;
631 padding-left: 0;
631 padding-right: 0;
632 padding-right: 0;
632 }
633 }
633
634
634 #filters-table {width:100%; float:none;}
635 #filters-table {width:100%; float:none;}
635 .add-filter {width:100%; float:none; text-align: left; margin-top: 8px;}
636 .add-filter {width:100%; float:none; text-align: left; margin-top: 8px;}
636
637
637 /*----------------------------------------*\
638 /*----------------------------------------*\
638 F) PAGE SPECIFIC STYLES
639 F) PAGE SPECIFIC STYLES
639 \*----------------------------------------*/
640 \*----------------------------------------*/
640
641
641 /* page /login */
642 /* page /login */
642
643
643 #login-form table {
644 #login-form table {
644 width: 100%;
645 width: 100%;
645 }
646 }
646
647
647 #login-form input#username,
648 #login-form input#username,
648 #login-form input#password,
649 #login-form input#password,
649 #login-form input#openid_url {
650 #login-form input#openid_url {
650 width: 100%;
651 width: 100%;
651 height: auto;
652 height: auto;
652 }
653 }
653
654
654 /* some themes add a margin to login page, remove it on mobile */
655 /* some themes add a margin to login page, remove it on mobile */
655 .action-login #main {
656 .action-login #main {
656 margin: 0;
657 margin: 0;
657 }
658 }
658
659
659 div#activity dl, #search-results {margin-left: 0;}
660 div#activity dl, #search-results {margin-left: 0;}
660
661
661 .version-overview table.progress {width:75%;}
662 .version-overview table.progress {width:75%;}
662 div#version-summary {float:none; width:100%; margin-left:0;}
663 div#version-summary {float:none; width:100%; margin-left:0;}
663 body.controller-versions.action-show div#roadmap .related-issues {width:100%;}
664 body.controller-versions.action-show div#roadmap .related-issues {width:100%;}
664
665
665 /*----------------------------------------*\
666 /*----------------------------------------*\
666 G) FORMS
667 G) FORMS
667 \*----------------------------------------*/
668 \*----------------------------------------*/
668
669
669 input, select, textarea {
670 input, select, textarea {
670 max-width: 100%;
671 max-width: 100%;
671 }
672 }
672
673
673 /* tabular forms resets for mobile */
674 /* tabular forms resets for mobile */
674 .tabular p, .tabular.settings p {
675 .tabular p, .tabular.settings p {
675 padding-left: 0;
676 padding-left: 0;
676 }
677 }
677
678
678 .tabular label, .tabular.settings label {
679 .tabular label, .tabular.settings label {
679 display: block;
680 display: block;
680 width: 100%;
681 width: 100%;
681 margin-left: 0;
682 margin-left: 0;
682 text-align: left;
683 text-align: left;
683 }
684 }
684
685
685 .tabular input, .tabular select, .tabular textarea {
686 .tabular input, .tabular select, .tabular textarea {
686 width: 100%;
687 width: 100%;
687 max-width: 100%;
688 max-width: 100%;
688 }
689 }
689
690
690 .tabular input[type="checkbox"], .tabular input.date {
691 .tabular input[type="checkbox"], .tabular input.date {
691 width: auto;
692 width: auto;
692 max-width: 95%;
693 max-width: 95%;
693 }
694 }
694
695
695 /* new issue form */
696 /* new issue form */
696 #all_attributes p:first-child {
697 #all_attributes p:first-child {
697 float: none !important;
698 float: none !important;
698 }
699 }
699
700
700 #issue_is_private_label {
701 #issue_is_private_label {
701 display: inline;
702 display: inline;
702 }
703 }
703
704
704 span#watchers_inputs {
705 span#watchers_inputs {
705 width: 100%;
706 width: 100%;
706 }
707 }
707
708
708 /* subtasks and related issues list on issue show */
709 /* subtasks and related issues list on issue show */
709 #issue_tree .issues, #relations .issues {
710 #issue_tree .issues, #relations .issues {
710 border-collapse: separate;
711 border-collapse: separate;
711 border-spacing: 0 1em; /* vertical space between tasks */
712 border-spacing: 0 1em; /* vertical space between tasks */
712 }
713 }
713
714
714 #issue_tree .issue > td:not(.checkbox), #relations .issue > td:not(.checkbox) {
715 #issue_tree .issue > td:not(.checkbox), #relations .issue > td:not(.checkbox) {
715 display: block;
716 display: block;
716 float: left;
717 float: left;
717 text-align: left;
718 text-align: left;
718 padding-right: 5px;
719 padding-right: 5px;
719 }
720 }
720
721
721 #issue_tree .issue > td, #relations .issue > td, #issue_tree .issue .user {
722 #issue_tree .issue > td, #relations .issue > td, #issue_tree .issue .user {
722 text-overflow: ellipsis; /* if text exceeds its space, add ... */
723 text-overflow: ellipsis; /* if text exceeds its space, add ... */
723 overflow: hidden;
724 overflow: hidden;
724 }
725 }
725
726
726 #issue_tree .issue > td.subject, #relations .issue > td.subject {
727 #issue_tree .issue > td.subject, #relations .issue > td.subject {
727 width: 100% !important; /* let subject have one full width column */
728 width: 100% !important; /* let subject have one full width column */
728 }
729 }
729
730
730 #issue_tree .issue > td:not(.checkbox), #relations .issue > td:not(.checkbox) {
731 #issue_tree .issue > td:not(.checkbox), #relations .issue > td:not(.checkbox) {
731 width: 33.33%; /* three columns for all cells that are not subject */
732 width: 33.33%; /* three columns for all cells that are not subject */
732 }
733 }
733
734
734 #relations .issues, #relations .issue {
735 #relations .issues, #relations .issue {
735 position: relative; /* needed for .buttons positioning */
736 position: relative; /* needed for .buttons positioning */
736 }
737 }
737
738
738 /* positioniong of unline button */
739 /* positioniong of unline button */
739 #relations .issue > td.buttons {
740 #relations .issue > td.buttons {
740 text-align: right;
741 text-align: right;
741 position: absolute;
742 position: absolute;
742 right: 0;
743 right: 0;
743 margin: 0;
744 margin: 0;
744 padding-right: 0;
745 padding-right: 0;
745 }
746 }
746
747
747 #relations .issue .buttons a {
748 #relations .issue .buttons a {
748 vertical-align: middle;
749 vertical-align: middle;
749 padding-right: 5px;
750 padding-right: 5px;
750 }
751 }
751
752
752 #relations .issue > td.subject {
753 #relations .issue > td.subject {
753 padding-right: 25px; /* this is the spaces that .buttons uses next to subject */
754 padding-right: 25px; /* this is the spaces that .buttons uses next to subject */
754 }
755 }
755 }
756 }
756 }
757 }
757
758
758 @media all and (max-width: 599px) {
759 @media all and (max-width: 599px) {
759 .pagination ul.pages li {display:none;}
760 .pagination ul.pages li {display:none;}
760 .pagination ul.pages li.current,
761 .pagination ul.pages li.current,
761 .pagination ul.pages li.previous,
762 .pagination ul.pages li.previous,
762 .pagination ul.pages li.next {display:inline-block; width:32%; overflow:hidden;}
763 .pagination ul.pages li.next {display:inline-block; width:32%; overflow:hidden;}
763 }
764 }
764
765
General Comments 0
You need to be logged in to leave comments. Login now