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