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