##// END OF EJS Templates
jro_apps » redmine
RSS
Expand username to cover whole line in mobile menu (#22074)....
Jean-Philippe Lang -
r14829:079a1881d78c
parent child
Show More
Side by Side Unified
Context file:
r14829:079a1881d78c Loading diff...:
Show file before | Show file after | Hide comments
@@ -1,757 +1,760
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;
514 padding-right: 15px;
515 text-overflow: ellipsis;
515 text-overflow: ellipsis;
516 overflow: hidden;
516 overflow: hidden;
517 white-space: nowrap;
517 white-space: nowrap;
518 -webkit-flex-grow: 1;
519 -ms-flex-grow: 1;
520 flex-grow: 1;
518 }
521 }
519
522
520 /* user link when no avatar is present */
523 /* user link when no avatar is present */
521 .flyout-menu__avatar--no-avatar a.user {
524 .flyout-menu__avatar--no-avatar a.user {
522 line-height: 40px;
525 line-height: 40px;
523 padding-left: 8px;
526 padding-left: 8px;
524 }
527 }
525
528
526 .flyout-is-active body {
529 .flyout-is-active body {
527 overflow: hidden; /* for body not to have scrollbars when left flyout menu is active */
530 overflow: hidden; /* for body not to have scrollbars when left flyout menu is active */
528 }
531 }
529
532
530 html.flyout-is-active {
533 html.flyout-is-active {
531 overflow: hidden;
534 overflow: hidden;
532 }
535 }
533
536
534 .flyout-is-active #wrapper, .flyout-is-active #header {
537 .flyout-is-active #wrapper, .flyout-is-active #header {
535 right: 250px; /* when left flyout is active, move body and header to the right (same amount like flyout-menu's width) */
538 right: 250px; /* when left flyout is active, move body and header to the right (same amount like flyout-menu's width) */
536 }
539 }
537
540
538 .flyout-is-active #wrapper {
541 .flyout-is-active #wrapper {
539 overflow: visible;
542 overflow: visible;
540 height: 100%;
543 height: 100%;
541 }
544 }
542
545
543 .flyout-is-active .mobile-toggle-button:after {
546 .flyout-is-active .mobile-toggle-button:after {
544 content: '\00D7'; /* close glyph */
547 content: '\00D7'; /* close glyph */
545 }
548 }
546
549
547 .flyout-is-active #wrapper2 {
550 .flyout-is-active #wrapper2 {
548 /*
551 /*
549 * only relevant for devices with cursor when flyout it active, in order to show,
552 * only relevant for devices with cursor when flyout it active, in order to show,
550 * that whole wrapper content is clickable and closes flyout menu
553 * that whole wrapper content is clickable and closes flyout menu
551 */
554 */
552 cursor: pointer;
555 cursor: pointer;
553 }
556 }
554
557
555 #admin-menu {
558 #admin-menu {
556 padding-left: 0;
559 padding-left: 0;
557 }
560 }
558
561
559 #admin-menu li {
562 #admin-menu li {
560 padding-bottom: 0;
563 padding-bottom: 0;
561 }
564 }
562
565
563 #admin-menu a,
566 #admin-menu a,
564 #admin-menu a.selected {
567 #admin-menu a.selected {
565 line-height: 40px;
568 line-height: 40px;
566 padding: 0;
569 padding: 0;
567 padding-left: 32px !important;
570 padding-left: 32px !important;
568 background-position: 8px 50%;
571 background-position: 8px 50%;
569 }
572 }
570
573
571 /*----------------------------------------*\
574 /*----------------------------------------*\
572 E) UX ELEMENTS
575 E) UX ELEMENTS
573 \*----------------------------------------*/
576 \*----------------------------------------*/
574
577
575 .mobile-hide {display:none;}
578 .mobile-hide {display:none;}
576 .mobile-show {display:initial;}
579 .mobile-show {display:initial;}
577
580
578 /* Contextual Buttons */
581 /* Contextual Buttons */
579
582
580 #content>.contextual {
583 #content>.contextual {
581 width: 100%;
584 width: 100%;
582 margin-bottom: .5em;
585 margin-bottom: .5em;
583 padding-left: 0; /* reset left padding in order to use whole space */
586 padding-left: 0; /* reset left padding in order to use whole space */
584 white-space: normal;
587 white-space: normal;
585 color: transparent;
588 color: transparent;
586 }
589 }
587
590
588 #content>.contextual a,
591 #content>.contextual a,
589 p.buttons a {
592 p.buttons a {
590 font-weight: bold;
593 font-weight: bold;
591
594
592 display: inline-block;
595 display: inline-block;
593
596
594 margin: 5px 0;
597 margin: 5px 0;
595 margin-right: 2px;
598 margin-right: 2px;
596 padding: 9px 9px 9px 9px;
599 padding: 9px 9px 9px 9px;
597
600
598 border: 1px solid #ddd;
601 border: 1px solid #ddd;
599 -webkit-border-radius: 3px;
602 -webkit-border-radius: 3px;
600 border-radius: 3px;
603 border-radius: 3px;
601 background-color: transparent;
604 background-color: transparent;
602 background-position-x: 4px;
605 background-position-x: 4px;
603 }
606 }
604
607
605 #content>.contextual a.icon,
608 #content>.contextual a.icon,
606 p.buttons a.icon {
609 p.buttons a.icon {
607 padding-left: 25px;
610 padding-left: 25px;
608 }
611 }
609
612
610 .flyout-menu .contextual {
613 .flyout-menu .contextual {
611 float: none;
614 float: none;
612 }
615 }
613
616
614 /* loading indicator */
617 /* loading indicator */
615 #ajax-indicator {
618 #ajax-indicator {
616 width: 60%;
619 width: 60%;
617 left: 20%;
620 left: 20%;
618 }
621 }
619
622
620 /* jquery ui dialogs */
623 /* jquery ui dialogs */
621 .ui-dialog {
624 .ui-dialog {
622 max-width: 98%;
625 max-width: 98%;
623 margin: 1%;
626 margin: 1%;
624 }
627 }
625
628
626 .ui-dialog .ui-dialog-content {
629 .ui-dialog .ui-dialog-content {
627 padding-left: 0;
630 padding-left: 0;
628 padding-right: 0;
631 padding-right: 0;
629 }
632 }
630
633
631 #filters-table {width:100%; float:none;}
634 #filters-table {width:100%; float:none;}
632 .add-filter {width:100%; float:none; text-align: left; margin-top: 8px;}
635 .add-filter {width:100%; float:none; text-align: left; margin-top: 8px;}
633
636
634 /*----------------------------------------*\
637 /*----------------------------------------*\
635 F) PAGE SPECIFIC STYLES
638 F) PAGE SPECIFIC STYLES
636 \*----------------------------------------*/
639 \*----------------------------------------*/
637
640
638 /* page /login */
641 /* page /login */
639
642
640 #login-form table {
643 #login-form table {
641 width: 100%;
644 width: 100%;
642 }
645 }
643
646
644 #login-form input#username,
647 #login-form input#username,
645 #login-form input#password,
648 #login-form input#password,
646 #login-form input#openid_url {
649 #login-form input#openid_url {
647 width: 100%;
650 width: 100%;
648 height: auto;
651 height: auto;
649 }
652 }
650
653
651 /* some themes add a margin to login page, remove it on mobile */
654 /* some themes add a margin to login page, remove it on mobile */
652 .action-login #main {
655 .action-login #main {
653 margin: 0;
656 margin: 0;
654 }
657 }
655
658
656 div#activity dl, #search-results {margin-left: 0;}
659 div#activity dl, #search-results {margin-left: 0;}
657
660
658 .version-overview table.progress {width:75%;}
661 .version-overview table.progress {width:75%;}
659 div#version-summary {float:none; width:100%; margin-left:0;}
662 div#version-summary {float:none; width:100%; margin-left:0;}
660 body.controller-versions.action-show div#roadmap .related-issues {width:100%;}
663 body.controller-versions.action-show div#roadmap .related-issues {width:100%;}
661
664
662 /*----------------------------------------*\
665 /*----------------------------------------*\
663 G) FORMS
666 G) FORMS
664 \*----------------------------------------*/
667 \*----------------------------------------*/
665
668
666 /* tabular forms resets for mobile */
669 /* tabular forms resets for mobile */
667 .tabular p, .tabular.settings p {
670 .tabular p, .tabular.settings p {
668 padding-left: 0;
671 padding-left: 0;
669 }
672 }
670
673
671 .tabular label, .tabular.settings label {
674 .tabular label, .tabular.settings label {
672 display: block;
675 display: block;
673 width: 100%;
676 width: 100%;
674 margin-left: 0;
677 margin-left: 0;
675 text-align: left;
678 text-align: left;
676 }
679 }
677
680
678 .tabular input, .tabular select, .tabular textarea {
681 .tabular input, .tabular select, .tabular textarea {
679 width: 100%;
682 width: 100%;
680 max-width: 100%;
683 max-width: 100%;
681 }
684 }
682
685
683 .tabular input[type="checkbox"], .tabular input.date {
686 .tabular input[type="checkbox"], .tabular input.date {
684 width: auto;
687 width: auto;
685 max-width: 95%;
688 max-width: 95%;
686 }
689 }
687
690
688 /* new issue form */
691 /* new issue form */
689 #all_attributes p:first-child {
692 #all_attributes p:first-child {
690 float: none !important;
693 float: none !important;
691 }
694 }
692
695
693 #issue_is_private_label {
696 #issue_is_private_label {
694 display: inline;
697 display: inline;
695 }
698 }
696
699
697 span#watchers_inputs {
700 span#watchers_inputs {
698 width: 100%;
701 width: 100%;
699 }
702 }
700
703
701 /* subtasks and related issues list on issue show */
704 /* subtasks and related issues list on issue show */
702 #issue_tree .issues, #relations .issues {
705 #issue_tree .issues, #relations .issues {
703 border-collapse: separate;
706 border-collapse: separate;
704 border-spacing: 0 1em; /* vertical space between tasks */
707 border-spacing: 0 1em; /* vertical space between tasks */
705 }
708 }
706
709
707 #issue_tree .issue > td:not(.checkbox), #relations .issue > td:not(.checkbox) {
710 #issue_tree .issue > td:not(.checkbox), #relations .issue > td:not(.checkbox) {
708 display: block;
711 display: block;
709 float: left;
712 float: left;
710 text-align: left;
713 text-align: left;
711 padding-right: 5px;
714 padding-right: 5px;
712 }
715 }
713
716
714 #issue_tree .issue > td, #relations .issue > td, #issue_tree .issue .user {
717 #issue_tree .issue > td, #relations .issue > td, #issue_tree .issue .user {
715 text-overflow: ellipsis; /* if text exceeds its space, add ... */
718 text-overflow: ellipsis; /* if text exceeds its space, add ... */
716 overflow: hidden;
719 overflow: hidden;
717 }
720 }
718
721
719 #issue_tree .issue > td.subject, #relations .issue > td.subject {
722 #issue_tree .issue > td.subject, #relations .issue > td.subject {
720 width: 100% !important; /* let subject have one full width column */
723 width: 100% !important; /* let subject have one full width column */
721 }
724 }
722
725
723 #issue_tree .issue > td:not(.checkbox), #relations .issue > td:not(.checkbox) {
726 #issue_tree .issue > td:not(.checkbox), #relations .issue > td:not(.checkbox) {
724 width: 33.33%; /* three columns for all cells that are not subject */
727 width: 33.33%; /* three columns for all cells that are not subject */
725 }
728 }
726
729
727 #relations .issues, #relations .issue {
730 #relations .issues, #relations .issue {
728 position: relative; /* needed for .buttons positioning */
731 position: relative; /* needed for .buttons positioning */
729 }
732 }
730
733
731 /* positioniong of unline button */
734 /* positioniong of unline button */
732 #relations .issue > td.buttons {
735 #relations .issue > td.buttons {
733 text-align: right;
736 text-align: right;
734 position: absolute;
737 position: absolute;
735 right: 0;
738 right: 0;
736 margin: 0;
739 margin: 0;
737 padding-right: 0;
740 padding-right: 0;
738 }
741 }
739
742
740 #relations .issue .buttons a {
743 #relations .issue .buttons a {
741 vertical-align: middle;
744 vertical-align: middle;
742 padding-right: 5px;
745 padding-right: 5px;
743 }
746 }
744
747
745 #relations .issue > td.subject {
748 #relations .issue > td.subject {
746 padding-right: 25px; /* this is the spaces that .buttons uses next to subject */
749 padding-right: 25px; /* this is the spaces that .buttons uses next to subject */
747 }
750 }
748 }
751 }
749 }
752 }
750
753
751 @media all and (max-width: 599px) {
754 @media all and (max-width: 599px) {
752 .pagination ul.pages li {display:none;}
755 .pagination ul.pages li {display:none;}
753 .pagination ul.pages li.current,
756 .pagination ul.pages li.current,
754 .pagination ul.pages li.previous,
757 .pagination ul.pages li.previous,
755 .pagination ul.pages li.next {display:inline-block; width:32%; overflow:hidden;}
758 .pagination ul.pages li.next {display:inline-block; width:32%; overflow:hidden;}
756 }
759 }
757
760
General Comments 0
You need to be logged in to leave comments. Login now