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