pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
main-responsive.less
(13790B)
1
2 /*
3 * GENERAL MOBILE (Applies to all resolutions below 979px)
4 */
5
6 @media (max-width: 979px) {
7
8 .inbox-data-message > :first-child {
9 height: 50px;
10 overflow: hidden;
11 }
12
13 .show-stats .show-stat-buttons>:first-child{
14 padding-right:13px;
15 }
16 .show-stats .show-stat-buttons>:last-child{
17 padding-left:13px;
18 }
19
20 .inbox-checkbox-triggered > .btn-group .btn {
21 padding-left:10px;
22 padding-right:10px;
23 }
24
25 .inbox-body .table-wrap {
26 padding:0px !important;
27 }
28
29 .inbox-nav-bar {
30 padding-left:5px;
31 padding-right:5px;
32 }
33
34 .inbox-data-message > :first-child > :first-child {
35 display: block !important;
36 font-size: @font-size-base + 1px;
37 }
38 .inbox-table-icon > :first-child {
39 margin-top: 12px;
40 }#inbox-table .inbox-table-icon {
41 padding-left: 10px !important;
42 }
43
44 /* search header */
45 .header-search.pull-right {
46 margin-left: 0px;
47 }
48
49 /* Visibility */
50 .visible-tablet {
51 display:inline-block !important;
52 }
53 .hidden-tablet, .display-inline.hidden-tablet {
54 display:none !important;
55 }
56
57
58 }
59
60
61 /* MOBILE LAYOUT STARTS HERE */
62
63 /*
64 * IPAD HORIZONTAL
65 */
66 @media (min-width: 768px) and (max-width: 979px) {
67
68 #main::after {
69 /*content: "IPAD HORIZONTAL";*/
70 }
71 #main {
72 margin-left: 0;
73 }
74 #left-panel {
75 left: -@asideWidth;
76 }
77 /* minified adjustment counter */
78 .minified #left-panel {
79 left:0px;
80 }
81
82 /* responsive menu button */
83 #hide-menu > :first-child > a {
84 margin-top:9px;
85 width:40px;
86 }
87
88 .btn-header a {
89 margin-top:9px !important;
90 width:40px !important;
91 }
92
93 #hide-menu i {
94 color:#6D6A69;
95 font-size: 100%;
96 }
97
98 .hidden-menu #hide-menu i {
99 color:@white;
100 }
101
102 #hide-menu i::before {
103 content:"\f0c9"
104 }
105
106 .hidden-menu #left-panel {
107 left:0;
108 }
109
110 .hidden-menu #main {
111 position:relative;
112 left: @asideWidth - 10px;
113 }
114
115 .hidden-menu.fixed-ribbon #ribbon {
116 left: @asideWidth;
117 }
118 .fixed-ribbon #ribbon {
119 left: 0px;
120 }
121
122 /*
123 * Header search
124 */
125 .header-search > input[type="text"] {
126 margin-top: 9px;
127 }
128
129 }
130
131 /*
132 * IPAD VERTICAL
133 */
134 @media (min-width: 768px) and (max-width: 880px) {
135 #main::after {
136 /*content: "IPAD VERTICAL";*/
137 }
138 #main {
139 margin-left: 0;
140 }
141 #left-panel {
142 left: -@asideWidth;
143 }
144
145 .no-content-padding {
146 margin: 0 -14px !important;
147 }
148 .inbox-nav-bar.no-content-padding {
149 margin-top:-10px !important;
150 }
151
152 /* minified adjustment counter */
153 .minified #left-panel {
154 left:0px;
155 }
156
157 /* responsive menu button */
158 #hide-menu > :first-child > a, .btn-header a {
159 margin-top:5px !important;
160 width:40px !important;
161 height: 39px !important;
162 line-height: 38px !important;
163 }
164 #logo {
165 margin-top: 10px;
166 } #logo img {
167 width: 127px;
168 }
169
170 /* transparent header button */
171 .btn-header.transparent a {
172 border: none !important;
173 background: none;
174 margin-left: 0;
175 width: 25px !important;
176 box-shadow:none !important;
177 }
178 .btn-header.transparent a:hover {
179 color: @brand-danger;
180 }
181
182 #hide-menu i {
183 color:#6D6A69;
184 font-size: 121%;
185 }
186
187 .hidden-menu #hide-menu i {
188 color:@white;
189 }
190
191 #hide-menu i::before {
192 content:"\f0c9"
193 }
194
195 .hidden-menu #left-panel {
196 left:0px;
197 }
198
199 .hidden-menu #main {
200 position:relative;
201 left:@asideWidth - 10px;
202 }
203
204 .hidden-menu.fixed-ribbon #ribbon {
205 left: @asideWidth;
206 }
207 .fixed-ribbon #ribbon {
208 left: 0px;
209 }
210
211 /*
212 * Header search
213 */
214 .header-search > input[type="text"] {
215 margin-top: 9px;
216 }
217
218 }
219
220 /*
221 * OTHER DEVICES
222 */
223
224
225 @media (max-width: 767px) {
226
227 #main::after {
228 /*content: "OTHER DEVICES";*/
229 }
230 #main {
231 margin-left: 0px;
232 }
233 #left-panel {
234 left: -@asideWidth;
235 }
236
237 /* dashboard microcharts */
238
239 .show-stat-microcharts > div {
240 margin-top:0px !important;
241 border-right:none !important;
242 }
243
244 .show-stat-buttons {
245 padding-left:10px !important;
246 padding-right:10px !important;
247 }
248
249 /* padding adjustment */
250 #content, #ribbon {
251 padding-left:5px;
252 padding-right:5px;
253 } #header {
254 padding-right:5px;
255 } #logo { margin-left: 4px; }
256
257 .no-content-padding {
258 margin: 0 -5px !important;
259 }
260 .inbox-nav-bar.no-content-padding {
261 margin-top:-10px !important;
262 }
263
264 /* minified adjustment counter */
265 .minified #left-panel {
266 left:0px;
267 }
268
269 /* transparent header button */
270 .btn-header.transparent a {
271 border: none !important;
272 background: none;
273 margin-left: 0;
274 width: 25px !important;
275 box-shadow:none !important;
276 }
277 .btn-header.transparent a:hover {
278 color: @brand-danger;
279 }
280
281 /* responsive menu button */
282 #hide-menu > :first-child > a, .btn-header a {
283 margin-top:5px !important;
284 width: 40px !important;
285 height: 39px !important;
286 line-height: 38px !important;
287 }
288 #hide-menu > :first-child > a {
289 width:50px !important;
290 }
291
292 #logo {
293 margin-top: 10px;
294 } #logo img {
295 width: 127px;
296 }
297
298 #hide-menu i {
299 color:#6D6A69;
300 font-size: 121%;
301 }
302
303 .hidden-menu #hide-menu i {
304 color:@white;
305 }
306
307 #hide-menu i::before {
308 content:"\f0c9"
309 }
310
311 .hidden-menu #left-panel {
312 left:0px;
313 }
314
315 .hidden-menu #main {
316 position: relative;
317 left: @asideWidth - 10px;
318 }
319
320 .hidden-menu.fixed-ribbon #ribbon {
321 left: @asideWidth;
322 }
323 .fixed-ribbon #ribbon {
324 left: 0px;
325 }
326
327 .fixed-navigation #left-panel {
328 position:absolute !important;
329 }
330
331 /*
332 * fixed ribbon
333 */
334 .fixed-ribbon #content {
335 padding-top: 52px;
336 }
337
338 /*
339 * header search
340 */
341 .header-search {
342 display:none;
343 }
344
345 #search-mobile {
346 display:block;
347 }
348
349 .search-mobile .header-search {
350 display: block;
351 position: absolute;
352 top: 0px;
353 width: 100%;
354 height: @smart-navbar-height;
355 background: #333;
356 padding: 0 2px;
357 box-sizing: border-box;
358 left: 0px;
359 }
360
361 .search-mobile .header-search > input[type="text"] {
362 margin-top: 2px;
363 height: 45px;
364 border-color:#333;
365 padding-right:75px;
366 }
367
368 .search-mobile .header-search > button {
369 height: 29px;
370 line-height: 29px;
371 background: #DDDDDD;
372 }
373
374 .search-mobile .header-search > button {
375 right: 44px
376 }
377
378 .search-mobile #search-mobile {
379 display:none;
380 }
381
382 .search-mobile #cancel-search-js {
383 display:block;
384 }
385
386 /* project info is not needed at this width */
387 #project-context {
388 display:none;
389 }
390
391 }
392
393 /*
394 * ANDROID
395 */
396 @media only screen and (min-width: 0px) and (max-width: 679px) {
397 #main::after {
398 /*content: "ANDROID";*/
399 }
400 #main {
401 margin-left: 0;
402 }
403 #left-panel {
404 left: -@asideWidth;
405 }
406
407 /* dashboard microcharts */
408
409 .show-stat-microcharts > div {
410 margin-top:0px !important;
411 border-right:none !important;
412 }
413
414 .show-stat-buttons {
415 padding-left:10px !important;
416 padding-right:10px !important;
417 }
418
419 /* padding adjustment */
420 #content, #ribbon {
421 padding-left:5px;
422 padding-right:5px;
423 } #header {
424 padding-right:5px;
425 } #logo { margin-left: 4px; }
426
427 .no-content-padding {
428 margin: 0 -5px !important;
429 }
430 .inbox-nav-bar.no-content-padding {
431 margin-top:-10px !important;
432 }
433
434 /* minified adjustment counter */
435 .minified #left-panel {
436 left:0px;
437 }
438
439 /* header color altered and adjusted for mobile view & contrast */
440 #header {
441 background:@white;
442 }
443
444 #ribbon {
445 border-bottom: 1px solid #CFCFCF;
446 border-top: 1px solid #E6E6E6;
447 background: #F5F5F5;
448 }
449
450 #ribbon .breadcrumb a, #ribbon .breadcrumb {
451 color: #6D6C6C !important;
452 }
453
454 #ribbon .breadcrumb > .active, #ribbon .breadcrumb li:last-child {
455 color: #333 !important;
456 }
457
458 /* responsive menu button */
459 #hide-menu > :first-child > a, .btn-header a {
460 margin-top: 5px !important;
461 width: 40px !important;
462 height: 39px !important;
463 line-height: 38px !important;
464 }
465 #hide-menu > :first-child > a {
466 width:50px !important;
467 }
468 #logo {
469 margin-top: 10px;
470 } #logo img {
471 width: 127px;
472 }
473
474 /* transparent header button */
475 .btn-header.transparent a {
476 border: none !important;
477 background: none;
478 margin-left: 0;
479 width: 25px !important;
480 box-shadow:none !important;
481 }
482 .btn-header.transparent a:hover {
483 color: @brand-danger;
484 }
485
486 /* menu btn cont... */
487 #hide-menu i {
488 color:#6D6A69;
489 font-size: 121%;
490 }
491
492 .hidden-menu #hide-menu i {
493 color:@white;
494 }
495
496 #hide-menu i::before {
497 content:"\f0c9"
498 }
499
500 .hidden-menu #left-panel {
501 left: 0;
502 }
503
504 .hidden-menu #main {
505 position:relative;
506 left: @asideWidth - 10px;
507 }
508
509 .hidden-menu.fixed-ribbon #ribbon {
510 left: @asideWidth;
511 }
512 .fixed-ribbon #ribbon {
513 left: 0px;
514 }
515
516 /*
517 * header search
518 */
519 .header-search {
520 display:none;
521 }
522
523 #search-mobile {
524 display:block;
525 }
526
527 .search-mobile .header-search {
528 display: block;
529 position: absolute;
530 top: 0px;
531 width: 100%;
532 height: @smart-navbar-height;
533 background: #333;
534 padding: 0 2px;
535 box-sizing: border-box;
536 left: 0px;
537 }
538
539 .search-mobile .header-search > input[type="text"] {
540 margin-top: 2px;
541 height: 45px;
542 border-color:#333;
543 padding-right:75px;
544 }
545
546 .search-mobile .header-search > button {
547 height: 29px;
548 line-height: 29px;
549 background: #DDDDDD;
550 }
551
552 .search-mobile .header-search > button {
553 right: 44px
554 }
555
556 .search-mobile #search-mobile {
557 display:none;
558 }
559
560 .search-mobile #cancel-search-js {
561 display:block;
562 }
563
564 /* project info is not needed at this width */
565 #project-context {
566 display:none !important;
567 }
568
569 .hidden-tablet {
570 display:none !important;
571 }
572 }
573
574 /*
575 * IPHONE
576 */
577 @media only screen and (min-width: 320px) and (max-width: 479px) {
578 #main::after {
579 /*content: "IPHONE";*/
580 }
581 #main {
582 margin-left: 0;
583 }
584 #left-panel {
585 left: -@asideWidth;
586 }
587
588 /* dashboard microcharts */
589
590 .show-stat-microcharts > div {
591 margin-top: 0px !important;
592 border-right: none !important;
593 }
594
595 .show-stat-buttons {
596 padding-left: 10px !important;
597 padding-right: 10px !important;
598 }
599
600 /* padding adjustment */
601 #content, #ribbon {
602 padding-left:5px;
603 padding-right:5px;
604 } #header {
605 padding-right:5px;
606 } #logo { margin-left: 4px; }
607
608 .no-content-padding {
609 margin: 0 -5px !important;
610 }
611 .inbox-nav-bar.no-content-padding {
612 margin-top: -10px !important;
613 }
614
615 /* minified adjustment counter */
616 .minified #left-panel {
617 left: 0px;
618 }
619
620 /* header color altered and adjusted for mobile view & contrast */
621 #header {
622 background: @white;
623 }
624
625 #ribbon {
626 border-bottom: 1px solid #CFCFCF;
627 border-top: 1px solid #E6E6E6;
628 background: #F5F5F5;
629 }
630
631 #ribbon .breadcrumb a, #ribbon .breadcrumb {
632 color: #6D6C6C !important;
633 }
634
635 #ribbon .breadcrumb > .active, #ribbon .breadcrumb li:last-child {
636 color: #333 !important;
637 }
638
639 /* lego width adjustment */
640 #logo {
641 width:135px;
642 }
643
644 #logo-group {
645 width: 169px !important;
646 }
647
648 /* spark line top */
649 #sparks {
650 text-align:center;
651 background: #E0E0E0;
652 padding: 10px 0;
653 margin-bottom: 15px;
654 }
655
656 #sparks li {
657 padding: 0 10px 0 20px;
658 }
659
660 /* project content */
661 #project-context {
662 display:none !important;
663 }
664
665 /* responsive menu button */
666 #hide-menu > :first-child > a, .btn-header a {
667 margin-top: 5px !important;
668 width:40px !important;
669 height: 39px !important;
670 line-height: 38px !important;
671 }
672 #logo {
673 margin-top: 10px;
674 } #logo img {
675 width: 127px;
676 }
677
678 /* transparent header button */
679
680 .btn-header.transparent a {
681 border: none !important;
682 background: none;
683 margin-left: 0;
684 width: 25px !important;
685 box-shadow:none !important;
686 }
687 .btn-header.transparent a:hover {
688 color: @brand-danger;
689 }
690
691 #hide-menu > :first-child > a {
692 width:46px !important;
693 }
694
695 #hide-menu i {
696 color:#6D6A69;
697 font-size: 121%;
698 }
699
700 .hidden-menu #hide-menu i {
701 color:@white;
702 }
703
704 #hide-menu i::before {
705 content:"\f0c9"
706 }
707
708 .hidden-menu #left-panel {
709 left:0px;
710 }
711
712 .hidden-menu #main {
713 position:relative;
714 left:@asideWidth - 10px;
715 }
716
717 .hidden-menu.fixed-ribbon #ribbon {
718 left: @asideWidth;
719 }
720 .fixed-ribbon #ribbon {
721 left: 0px;
722 }
723
724 /* project info is not needed at this width */
725 #project-context {
726 display:none;
727 }
728
729 /* #*$^& Bootstrap 3 ! */
730
731 .hidden-mobile {
732 display:none !important;
733 }
734 .visible-mobile {
735 display:inline-block !important;
736 }
737
738 /* activity panel */
739 .ajax-notifications {
740 height: 250px;
741 }
742
743 .ajax-dropdown {
744 width: 299px;
745 height: 320px;
746 left: 0;
747 top: @smart-navbar-height;
748 }
749
750 .ajax-dropdown:before {
751 margin-left: -14px;
752 }
753
754 .ajax-dropdown:after {
755 margin-left: -13px;
756 }
757
758 /*
759 * header search
760 */
761 .header-search {
762 display:none;
763 }
764
765 #search-mobile {
766 display:block;
767 margin-left:0;
768 }
769
770 .search-mobile .header-search {
771 display: block;
772 position: absolute;
773 top: 0px;
774 width: 100%;
775 height: @smart-navbar-height;
776 background: #333;
777 padding: 0 2px;
778 box-sizing: border-box;
779 left: 0px;
780 }
781
782 .search-mobile .header-search > input[type="text"] {
783 margin-top: 2px;
784 height: 45px;
785 border-color:#333;
786 padding-right:75px;
787 }
788
789 .search-mobile .header-search > button {
790 height: 29px;
791 line-height: 29px;
792 background: #DDDDDD;
793 }
794
795 .search-mobile .header-search > button {
796 right: 44px
797 }
798
799 .search-mobile #search-mobile {
800 display:none;
801 }
802
803 .search-mobile #cancel-search-js {
804 display:block;
805 }
806
807 /* widget headers width */
808
809 .jarviswidget header h2 {
810 width:135px;
811 text-overflow:ellipsis;
812 white-space: nowrap;
813 overflow: hidden;
814 }
815
816 }