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