/* * GENERAL MOBILE (Applies to all resolutions below 979px) */ @media (max-width: 979px) { /* Profile Page */ .profile-pic>img { width: 110px; } /* Profile Page */ .profile-pic { float:left; } .profile-pic>img { margin-right:10px; } .profile-pic + div, .profile-pic + div + div { padding-left:30px; padding-right:30px; } /* added new class per version 1.3 html, body { overflow-x: hidden !important; }*/ #fullscreen > :first-child > a { display:none !important; } body.container { border:none !important; } .inbox-data-message > :first-child { height: 50px; overflow: hidden; } .show-stats .show-stat-buttons>:first-child{ padding-right:13px; } .show-stats .show-stat-buttons>:last-child{ padding-left:13px; } .inbox-checkbox-triggered > .btn-group .btn { padding-left:10px; padding-right:10px; } .inbox-body .table-wrap { padding:0px !important; } .inbox-nav-bar { padding-left:5px; padding-right:5px; } .inbox-data-message > :first-child > :first-child { display: block !important; font-size: @font-size-base + 1px; } .inbox-table-icon > :first-child { margin-top: 12px; }#inbox-table .inbox-table-icon { padding-left: 10px !important; } /* search header */ .header-search.pull-right { margin-left: 0px; } /* Visibility */ .visible-tablet { display:inline-block !important; } .hidden-tablet, .display-inline.hidden-tablet { display:none !important; } } /* MOBILE LAYOUT STARTS HERE */ /* * IPAD HORIZONTAL */ @media (min-width: 768px) and (max-width: 979px) { #main::after { /*content: "IPAD HORIZONTAL";*/ } #main { margin-left: 0; } #left-panel { left: -@asideWidth; } /* minified adjustment counter */ .minified #left-panel { left:0px; } /* responsive menu button */ #hide-menu > :first-child > a { margin-top:9px; width:40px; } .btn-header a { margin-top:9px !important; width:40px !important; } #hide-menu i { color:#6D6A69; font-size: 100%; } .hidden-menu #hide-menu i { color:@white; } #hide-menu i::before { content:"\f0c9" } .hidden-menu #left-panel { left:0; } .hidden-menu #main { position:relative; left: @asideWidth - 10px; } .hidden-menu.fixed-ribbon #ribbon { left: @asideWidth; } .fixed-ribbon #ribbon { left: 0px; } /* * Header search */ .header-search > input[type="text"] { margin-top: 9px; } } /* * IPAD VERTICAL */ @media (min-width: 768px) and (max-width: 880px) { #main::after { /*content: "IPAD VERTICAL";*/ } #main { margin-left: 0; } #left-panel { left: -@asideWidth; } .no-content-padding { margin: 0 -14px !important; } .inbox-nav-bar.no-content-padding { margin-top:-10px !important; } /* minified adjustment counter */ .minified #left-panel { left:0px; } /* responsive menu button */ #hide-menu > :first-child > a, .btn-header a { margin-top:5px !important; width:40px !important; height: 39px !important; line-height: 38px !important; } #logo { margin-top: 10px; } #logo img { width: 127px; } /* transparent header button */ .btn-header.transparent a { border: none !important; background: none; margin-left: 0; width: 25px !important; box-shadow:none !important; } .btn-header.transparent a:hover { color: @brand-danger; } #hide-menu i { color:#6D6A69; font-size: 121%; } .hidden-menu #hide-menu i { color:@white; } #hide-menu i::before { content:"\f0c9" } .hidden-menu #left-panel { left:0px; } .hidden-menu #main { position:relative; left:@asideWidth - 10px; } .hidden-menu.fixed-ribbon #ribbon { left: @asideWidth; } .fixed-ribbon #ribbon { left: 0px; } /* * Header search */ .header-search > input[type="text"] { margin-top: 9px; } } /* * OTHER DEVICES */ @media (max-width: 767px) { /* Profile Page */ .profile-pic>img { width: 100px; } #main::after { /*content: "OTHER DEVICES";*/ } #main { margin-left: 0px; } #left-panel { left: -@asideWidth; } /* dashboard microcharts */ .show-stat-microcharts > div { margin-top:0px !important; border-right:none !important; } .show-stat-buttons { padding-left:10px !important; padding-right:10px !important; } /* padding adjustment */ #content, #ribbon { padding-left:5px; padding-right:5px; } #header { padding-right:5px; } #logo { margin-left: 4px; } .no-content-padding { margin: 0 -5px !important; } .inbox-nav-bar.no-content-padding { margin-top:-10px !important; } /* minified adjustment counter */ .minified #left-panel { left:0px; } /* transparent header button */ .btn-header.transparent a { border: none !important; background: none; margin-left: 0; width: 25px !important; box-shadow:none !important; } .btn-header.transparent a:hover { color: @brand-danger; } /* responsive menu button */ #hide-menu > :first-child > a, .btn-header a { margin-top:5px !important; width: 40px !important; height: 39px !important; line-height: 38px !important; } #hide-menu > :first-child > a { width:50px !important; } #logo { margin-top: 10px; } #logo img { width: 127px; } #hide-menu i { color:#6D6A69; font-size: 121%; } .hidden-menu #hide-menu i { color:@white; } #hide-menu i::before { content:"\f0c9" } .hidden-menu #left-panel { left:0px; } .hidden-menu #main { position: relative; left: @asideWidth - 10px; } .hidden-menu.fixed-ribbon #ribbon { left: @asideWidth; } .fixed-ribbon #ribbon { left: 0px; } .fixed-navigation #left-panel { position:absolute !important; } /* * fixed ribbon */ .fixed-ribbon #content { padding-top: 52px; } /* * header search */ .header-search { display:none; } #search-mobile { display:block; } .search-mobile .header-search { display: block; position: absolute; top: 0px; width: 100%; height: @smart-navbar-height; background: #333; padding: 0 2px; box-sizing: border-box; left: 0px; } .search-mobile .header-search > input[type="text"] { margin-top: 2px; height: 45px; border-color:#333; padding-right:75px; } .search-mobile .header-search > button { height: 29px; line-height: 29px; background: #DDDDDD; } .search-mobile .header-search > button { right: 44px } .search-mobile #search-mobile { display:none; } .search-mobile #cancel-search-js { display:block; } /* project info is not needed at this width */ #project-context { display:none; } } /* * ANDROID */ @media only screen and (min-width: 0px) and (max-width: 679px) { /* Profile Page */ .profile-pic>img { width: 90px; } #main::after { /*content: "ANDROID";*/ } #main { margin-left: 0; } #left-panel { left: -@asideWidth; } /* dashboard microcharts */ .show-stat-microcharts > div { margin-top:0px !important; border-right:none !important; } .show-stat-buttons { padding-left:10px !important; padding-right:10px !important; } /* padding adjustment */ #content, #ribbon { padding-left:5px; padding-right:5px; } #header { padding-right:5px; } #logo { margin-left: 4px; } .no-content-padding { margin: 0 -5px !important; } .inbox-nav-bar.no-content-padding { margin-top:-10px !important; } /* minified adjustment counter */ .minified #left-panel { left:0px; } /* header color altered and adjusted for mobile view & contrast */ #header { background:@white; } #ribbon { border-bottom: 1px solid #CFCFCF; border-top: 1px solid #E6E6E6; background: #F5F5F5; } #ribbon .breadcrumb a, #ribbon .breadcrumb { color: #6D6C6C !important; } #ribbon .breadcrumb > .active, #ribbon .breadcrumb li:last-child { color: #333 !important; } /* responsive menu button */ #hide-menu > :first-child > a, .btn-header a { margin-top: 5px !important; width: 40px !important; height: 39px !important; line-height: 38px !important; } #hide-menu > :first-child > a { width:50px !important; } #logo { margin-top: 10px; } #logo img { width: 127px; } /* transparent header button */ .btn-header.transparent a { border: none !important; background: none; margin-left: 0; width: 25px !important; box-shadow:none !important; } .btn-header.transparent a:hover { color: @brand-danger; } /* menu btn cont... */ #hide-menu i { color:#6D6A69; font-size: 121%; } .hidden-menu #hide-menu i { color:@white; } #hide-menu i::before { content:"\f0c9" } .hidden-menu #left-panel { left: 0; } .hidden-menu #main { position:relative; left: @asideWidth - 10px; } .hidden-menu.fixed-ribbon #ribbon { left: @asideWidth; } .fixed-ribbon #ribbon { left: 0px; } /* * header search */ .header-search { display:none; } #search-mobile { display:block; } .search-mobile .header-search { display: block; position: absolute; top: 0px; width: 100%; height: @smart-navbar-height; background: #333; padding: 0 2px; box-sizing: border-box; left: 0px; } .search-mobile .header-search > input[type="text"] { margin-top: 2px; height: 45px; border-color:#333; padding-right:75px; } .search-mobile .header-search > button { height: 29px; line-height: 29px; background: #DDDDDD; } .search-mobile .header-search > button { right: 44px } .search-mobile #search-mobile { display:none; } .search-mobile #cancel-search-js { display:block; } /* project info is not needed at this width */ #project-context { display:none !important; } .hidden-tablet { display:none !important; } } /* * IPHONE */ @media only screen and (min-width: 320px) and (max-width: 479px) { /* Profile Page */ .profile-pic { text-align: left; } .profile-pic>img { width: 90px; margin-left:0px; top: -25px; margin-right:0px; } .profile-pic + div > h1 { font-size: 20px; } .profile-pic + div > h1 small { font-size: 16px; } .profile-carousel .carousel-indicators { top: 10px; } #main::after { /*content: "IPHONE";*/ } #main { margin-left: 0; } #left-panel { left: -@asideWidth; } /* dashboard microcharts */ .show-stat-microcharts > div { margin-top: 0px !important; border-right: none !important; } .show-stat-buttons { padding-left: 10px !important; padding-right: 10px !important; } /* padding adjustment */ #content, #ribbon { padding-left:5px; padding-right:5px; } #header { padding-right:5px; } #logo { margin-left: 4px; } .no-content-padding { margin: 0 -5px !important; } .inbox-nav-bar.no-content-padding { margin-top: -10px !important; } /* minified adjustment counter */ .minified #left-panel { left: 0px; } /* header color altered and adjusted for mobile view & contrast */ #header { background: @white; } #ribbon { border-bottom: 1px solid #CFCFCF; border-top: 1px solid #E6E6E6; background: #F5F5F5; } #ribbon .breadcrumb a, #ribbon .breadcrumb { color: #6D6C6C !important; } #ribbon .breadcrumb > .active, #ribbon .breadcrumb li:last-child { color: #333 !important; } /* lego width adjustment */ #logo { width:135px; } #logo-group { width: 169px !important; } /* spark line top */ #sparks { text-align:center; background: #E0E0E0; padding: 10px 0; margin-bottom: 15px; } #sparks li { padding: 0 10px 0 20px; } /* project content */ #project-context { display:none !important; } /* responsive menu button */ #hide-menu > :first-child > a, .btn-header a { margin-top: 5px !important; width:40px !important; height: 39px !important; line-height: 38px !important; } #logo { margin-top: 10px; } #logo img { width: 127px; } /* transparent header button */ .btn-header.transparent a { border: none !important; background: none; margin-left: 0; width: 25px !important; box-shadow:none !important; } .btn-header.transparent a:hover { color: @brand-danger; } #hide-menu > :first-child > a { width:46px !important; } #hide-menu i { color:#6D6A69; font-size: 121%; } .hidden-menu #hide-menu i { color:@white; } #hide-menu i::before { content:"\f0c9" } .hidden-menu #left-panel { left:0px; } .hidden-menu #main { position:relative; left:@asideWidth - 10px; } .hidden-menu.fixed-ribbon #ribbon { left: @asideWidth; } .fixed-ribbon #ribbon { left: 0px; } /* project info is not needed at this width */ #project-context { display:none; } /* #*$^& Bootstrap 3 ! */ .hidden-mobile { display:none !important; } .visible-mobile { display:inline-block !important; } /* activity panel */ .ajax-notifications { height: 250px; } .ajax-dropdown { width: 299px; height: 320px; left: 0; top: @smart-navbar-height; } .ajax-dropdown:before { margin-left: -14px; } .ajax-dropdown:after { margin-left: -13px; } /* * header search */ .header-search { display:none; } #search-mobile { display:block; margin-left:0; } .search-mobile .header-search { display: block; position: absolute; top: 0px; width: 100%; height: @smart-navbar-height; background: #333; padding: 0 2px; box-sizing: border-box; left: 0px; } .search-mobile .header-search > input[type="text"] { margin-top: 2px; height: 45px; border-color:#333; padding-right:75px; } .search-mobile .header-search > button { height: 29px; line-height: 29px; background: #DDDDDD; } .search-mobile .header-search > button { right: 44px } .search-mobile #search-mobile { display:none; } .search-mobile #cancel-search-js { display:block; } /* widget headers width */ .jarviswidget header h2 { width:135px; text-overflow:ellipsis; white-space: nowrap; overflow: hidden; } }