Files

2886 lines
56 KiB
CSS

/*
Mobile Stylesheet
Available Breakpoints
min-width: 375px lowest tested resolution
min-width: 576px
min-width: 768px //Not used
min-width: 992px //Not used
min-width: 1200px
*/
@media (max-width:575px) {
.tab-primary.ui-tabs .ui-tabs-nav {
padding:0px;
height:auto;
}
.leftmenu .nav-tabs .projectselector .projectSelectorTabs .scrollingTab {
height:auto;
overflow:scroll;
}
.headerinner .bigProjectSelector {
width:auto;
min-width: 40px;
}
.mainwrapper.menuclosed .bigProjectSelector .fa {
font-size:var(--base-font-size);
line-height: 50px;
}
.row .regpanel {
}
.header .logo {
display:none !important;
}
.projectselector .scrollingTab {
overflow:inherit;
}
.progressWrapper .step {
display:none;
}
.progressWrapper .step.current {
display:inherit;
}
.maincontentinner {
overflow:auto;
}
.tabbedwidget ul li {
width:100%;
}
.leftmenu .projectselector .projectSelectorTabs .tabs li{
width:auto;
}
.mainwrapper.menuclosed .leftpanel {
display:none;
z-index: 9999;
}
.headmenu .projectselector {
min-width:320px;
width:320px;
}
.headmenu > li.appsLink {
display:none;
}
.mainwrapper .primaryContent {
padding-left:0px !important;
}
.mainwrapper .leftpanel {
width:90%;
position:absolute;
top:50px;
left:5px;
background:#555;
z-index: 999;
}
.barmenu,
.headerCTA{
line-height: 50px;
}
.mainwrapper .headmenu,
.mainwrapper.menuclosed .headmenu {
margin-left: 10px;
}
.col-md-4 > .pull-right,
.col-md-6 > .pull-right{
width:100%;
}
.dropdown-menu {
width:100%;
}
.fc-header {
margin-top:50px;
}
.maincontentinner .btn,
.maincontentinner .btn-group{
margin-bottom:5px;
}
.maincontentinner .simpleButtons .btn,
.maincontentinner .simpleButtons .btn-group{
width:auto;
}
.maincontentinner .simpleButtons {
width:auto;
}
.col-md-4 > .pull-right,
.col-md-5 > .pull-right,
.col-md-6 > .pull-right {
width:100%;
}
.currentSprint {
margin:0px;
}
.profileHandler .username {
display:none;
}
.headmenu > li > a {
padding: 15px 10px 9px;
}
.maincontent {
margin-top:0px;
padding: 10px 10px;
}
/* buttons */
.iconsweetslist li {
width: 50%;
}
/* forms */
#elm1_toolbargroup {
width: 560px;
}
/* media */
.mediamgr_category, .mediamgr_content {
margin-right: 0;
}
.mediamgr .mediamgr_right {
position: static;
width: auto;
}
.mediamgr .mediamgr_rightinner {
padding-left: 0;
}
.mediamgr_category ul li.right {
float: right;
border-top: 0;
margin-top: 0;
}
.hidden-gt-sm {
display:block!important;
}
.loginpage .header {
margin-left: 0 !important;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
/* Fix mobile login scrollbar issues */
body.loginpage {
overflow-x: hidden;
max-width: 100vw;
min-height: 100vh;
}
.loginpage .row {
margin: 0;
width: 100vw;
max-width: 100vw;
min-height: 100vh;
height: auto;
box-sizing: border-box;
overflow-x: hidden;
padding: 0;
}
.loginpage .regRight {
padding-left: 10px;
padding-right: 10px;
max-width: 100%;
}
.regcontent {
max-width: 100vw;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
.headmenu > li > a {
padding: 15px 15px 9px;
}
.userloggedinfo .userinfo small {
}
.userloggedinfo {
}
.userloggedinfo .userinfo {
}
/* media */
.mediaWrapper {
width: 400px;
}
/* table */
.dataTable th, .dataTable td {
padding: 5px;
}
.dataTable th:nth-child(2), .dataTable td:nth-child(2) {
}
.dataTables_paginate {
position: relative;
margin: -25px 0 0 20px;
}
.dataTables_info {
height: 50px;
}
#dyntable2_info {
height: auto;
}
.dataTables_filter {
position: relative;
margin: -50px 0 20px 20px;
}
.dataTables_length {
height: 70px;
}
#dyntable2_wrapper .dataTables_filter {
margin: 0;
}
.hidden-gt-sm {
display:block!important;
}
.headmenu > li > a {
padding: 15px 20px 9px;
}
.headmenu > li.right {
padding-bottom: 13px;
}
.pageheader {
padding: 5px 15px;
min-height: 50px;
}
/* Let the header meta wrap on phones — it's white-space:nowrap for the
desktop single-line layout, which would otherwise overflow the card
once the string carries updated + multiple metrics. */
.pageheader-meta {
white-space: normal;
}
.searchbar {
position: static;
margin-bottom: 5px;
}
.searchbar input {
width: 100%;
-moz-box-sizing: border-box;
height: auto;
background-position: 410px 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* buttons */
.tabbable > .nav-tabs > li > a {
padding: 10px;
}
/* forms */
.wizard .hormenu li {
float: none;
display: block;
width: auto;
border: 2px solid #0866c6;
margin-bottom: 5px;
}
.wizard .hormenu li a {
border: 0;
}
.wizard .hormenu li a.done {
border: 0;
}
.wizard .hormenu {
margin-bottom: 20px;
}
.wizard-inverse .hormenu li {
border-color: #333;
}
.wizard .tabbedmenu {
height: auto;
padding: 10px;
}
.wizard .tabbedmenu li {
display: block;
margin-bottom: 10px;
}
.wizard .tabbedmenu li:last-child {
margin-bottom: 0;
}
.wizard .tabbedmenu li a {
padding: 10px;
}
#elm1_toolbargroup {
width: 395px;
}
/* media */
.mediamgr_menu li.right {
float: none;
margin-top: 10px;
}
.mediamgr_category ul li.right {
float: none;
text-align: right;
display: block;
border-top: 1px dashed #ddd;
margin-top: 10px;
}
.mediamgr .mediamgr_right {
top: 110px;
}
.mediamgr_menu li.filesearch {
margin: 10px 0;
width: 100%;
}
.mediamgr_menu form input.filekeyword {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: auto;
margin-bottom: 0;
}
.mediamgr_menu li.right {
margin-top: 0;
}
.mediaWrapper {
width: 280px;
}
/* messages */
.messageleft {
width: auto;
float: none;
height: auto;
}
.messageright {
margin-left: 0;
display: none;
height: auto;
border-left: 1px solid #0866c6;
}
.messagesearch input {
background-position: 375px 9px;
}
.msglist {
height: auto;
border-bottom-width: 1px;
}
.messageview {
height: auto;
}
/* calendar */
.fc-button {
padding: 0 5px;
}
.fc-header-title {
margin-top: 3px;
}
/* invoice */
.amountdue h1 {
padding: 10px 25px;
}
.amountdue .btn {
width: 225px;
}
.hidden-gt-sm {
display:block!important;
}
.hidden-gt-sm {
display: block !important;
}
.dataTables_filter {
display: none;
}
.modalTextArea {
height: 75px;
}
.pagetitle {
padding-left: 0px;
margin-left: 0px;
}
.loginpage .pagetitle {
padding-left: 0px;
}
.row-fluid .column {
width: 100%;
clear: both;
height: auto;
}
.contentInner {
height: auto !important;
}
.pagetitle h1 {
font-size: 18px;
}
.pageheader {
padding: 5px 15px;
min-height: 50px;
}
.header {
height: 50px;
}
/* Fix header navigation icon overflow */
.headmenu {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.headmenu::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.headmenu > li {
padding: unset;
width: 36px;
min-width: 36px;
flex-shrink: 0;
}
.headmenu > li > a {
padding: 0 3px;
line-height: 50px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
min-height: 44px; /* Touch-friendly minimum */
}
.userloggedinfo .userinfo a.profileHandler {
line-height:60px;
height:60px;
margin-right: 0px;
}
.header .userloggedinfo img {
margin-top:10px;
}
.headmenu > li > a .head-icon {
width: 28px;
background-size: cover;
flex-shrink: 0;
}
.headmenu > li > a .headmenu-label {
display: none;
}
.leftmenu .nav-tabs.nav-stacked li a {
font-size: 13px;
}
.leftmenu .nav-tabs.nav-stacked .dropdown ul li a {
font-size: 12px;
}
.header .logo {
padding-top: 0;
}
.searchbar input {
background-position: 285px 10px;
}
/* buttons */
.tabbable > .nav-tabs > li {
overflow: hidden;
font-size: 11px;
}
.tabbable > .nav-tabs > li a {
padding: 10px 5px;
}
.fontawesomeicons .span3 {
width: auto;
float: none;
}
.iconsweetslist li {
width: auto;
float: none;
}
/* forms */
.dualselect select {
width: 38%;
}
.chzn-container {
width: 270px !important;
}
.chzn-drop {
width: 268px !important;
}
.chzn-search input {
width: 220px !important;
}
.tagsinput {
width: 260px !important;
}
#elm1_toolbargroup {
width: 285px;
}
/* elements */
.navbar .brand {
display: none;
}
/* hidden for demo purposes only */
/* boxes */
.slide_img, .entry_img {
float: none;
margin-bottom: 10px;
}
.slide_content, .entry_content {
margin-left: 0;
}
/* media */
.mediamgr_category ul li {
float: none;
display: block;
margin: 0;
}
.mediamgr_menu li {
margin-bottom: 10px;
}
.mediamgr_menu li.newfilebtn {
margin-left: 10px;
}
.mediaWrapper {
width: 240px;
}
.imgpreview {
width: 209px;
}
/* messages */
.messagemenu ul {
height: 45px;
}
.messagemenu ul li a {
padding: 12px 10px;
}
/* calendar */
.fc-header-title h2 {
margin-top: -50px;
}
.fc-button-month {
margin-left: -50px;
}
/* error */
.errortitle h4 {
font-size: 20px;
}
.errortitle span {
font-size: 50px;
}
.errortitle span:first-child {
margin-left: 0;
}
/* bootstrap */
.tabbable > .tab-content {
padding: 15px;
}
.btn-circle {
width: 6px;
}
.btn-circle i {
margin-left: -3px;
}
.input-append .btn, .input-prepend .btn {
padding-left: 8px;
padding-right: 8px;
font-size: 12px;
}
/* footer */
.footer .footer-left {
float: none;
text-align: center;
}
.footer .footer-right {
float: none;
text-align: center;
}
.column-filter-widgets {
display: none;
}
.hidden-gt-sm {
display:block!important;
}
.hidden-sm {
display:none;
}
body {
line-height: 18px;
}
.leftpanel {
width: 68px;
}
.header .logo {
width: 240px;
}
.headmenu > li > a {
}
.searchbar input {
background-position: 245px 10px;
}
/* dashboard */
.shortcuts li a {
width: 125px;
}
.commentlist li img {
width: 40px;
}
.commentlist li .comment-info {
margin-left: 55px;
}
.commentlist li .comment-info h4 {
font-size: 14px;
}
/* buttons */
.buttons-icons li {
width: 50px;
overflow: hidden;
}
.buttons-icons li a {
width: 150px;
}
/* forms */
.stdform .input-append input, .stdform .input-prepend input {
width: 100px !important;
}
#elm1_toolbargroup {
width: 240px;
}
/* media */
.mediamgr_menu li.newfoldbtn {
margin-left: 0;
clear: left;
}
/* calendar */
.fc-button-month {
margin-left: -90px;
}
.fc-header-title h2 {
margin-left: -175px;
}
.hidden-gt-sm {
display:block!important;
}
.column {
/*A little smaller so you can see the column to the right indicating there is more*/
width:85% !important;
}
.ui-tabs-nav > li a {
padding:10px 6px;
}
.hidden-gt-sm {
display:block !important;
}
#ideaMason .ticketBox {
width:100%;
}
.headerinner {
width: calc(100% - 45px);
margin-left: 45px !important;
}
.stickyColumn {
position:relative;
}
.userinfo .fa-caret-down {
display:none;
}
/* Kanban board mobile optimizations */
.kanbanBoard .row {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
flex-wrap: nowrap;
padding-bottom: 10px;
}
.kanbanBoard .row::-webkit-scrollbar {
display: none;
}
.kanbanBoard .column {
min-width: 280px;
flex-shrink: 0;
margin-right: 10px;
}
.kanbanBoard .column:last-child {
margin-right: 0;
}
/* Improve touch targets for mobile */
.ticketBox {
min-height: 44px;
cursor: pointer;
}
.ticketBox .dropdown > a {
min-height: 44px;
padding: 8px 12px;
}
/* Table responsive improvements */
.maincontentinner .dataTables_wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.maincontentinner .table {
min-width: 500px;
}
.maincontentinner .dataTables_filter {
position: static;
margin-top: 10px;
margin-bottom: 10px;
right: auto;
text-align: left;
}
.maincontentinner .dataTables_filter input {
width: 100%;
max-width: 200px;
margin: 5px 0 0 0;
}
/* Project overview mobile improvements */
.col-md-4, .col-md-8 {
margin-bottom: 15px;
}
.rightpanel {
padding-left: 10px;
padding-right: 10px;
}
/* Better spacing for mobile cards/widgets */
.maincontentinner .row > div {
margin-bottom: 15px;
}
/* Mobile content padding optimization - reclaim horizontal space */
.maincontent {
padding-left: 5px;
padding-right: 5px;
}
.rightpanel {
padding-left: 5px;
padding-right: 5px;
}
/* Fix login page layout and text cutoff issues */
.loginpage .regRight {
padding-left: 10px;
padding-right: 10px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: visible;
}
/* Fix login form positioning - key fix for cutoff issues */
.loginpage .row .regRight {
margin-left: 0;
margin-right: 0;
padding-left: 10px;
padding-right: 10px;
}
.loginpage .regpanel {
width: 100%;
max-width: 100%;
padding: 10px;
margin: 0;
box-sizing: border-box;
}
/* Ensure form elements don't overflow and have proper spacing */
.loginpage input[type="text"],
.loginpage input[type="password"],
.loginpage input[type="email"],
.loginpage .form-control {
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-bottom: 10px;
}
/* Fix submit button */
.loginpage input[type="submit"],
.loginpage .btn {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 12px;
margin-bottom: 15px;
}
/* Fix "Forgot password?" link positioning and visibility */
.loginpage form {
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* Ensure the forgot password link container has proper spacing */
.loginpage .forgotPwContainer,
.loginpage form > div {
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-bottom: 15px;
padding-right: 0;
overflow: visible;
}
.loginpage .forgotPw,
.loginpage form a[href*="resetPw"] {
display: inline-block !important;
float: right;
clear: both;
margin-top: 5px;
margin-bottom: 10px;
padding-right: 0;
white-space: nowrap;
font-size: 14px;
color: #0866c6;
text-decoration: none;
}
/* Ensure form fields container has proper spacing */
.loginpage .regpanelinner {
padding: 10px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
}
.loginpage .regpanelinner > div {
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-bottom: 15px;
padding: 0;
}
}
@media (min-width: 576px) and (max-width:1200px) {
.progressWrapper .step {
display:none;
}
.progressWrapper .step.current {
display:inherit;
}
.leftmenu .projectselector .projectSelectorTabs .tabs li{
width:auto;
}
.barmenu,
.headerCTA{
display:none;
}
.hidden-sm {
display:none;
}
.hidden-phone {
display: none!important;
}
.maincontentinner {
overflow:auto;
}
.tabbedwidget ul li {
width:100%;
}
.col-md-4 > .pull-right,
.col-md-5 > .pull-right,
.col-md-6 > .pull-right{
width:100%;
}
.dropdown-menu {
width:100%;
}
.fc-header {
margin-top:50px;
}
.maincontentinner .btn,
.maincontentinner .btn-group{
width:100%;
margin-bottom:5px;
}
.currentSprint {
margin:0px;
}
.pageheader {
padding: 5px 15px;
min-height: 50px;
}
.leftpanel a.barmenu {
position: fixed;
left: 0px;
top: 5px;
margin-left:0px;
padding-left:15px;
width:50px;
}
.leftpanel a.barmenu.open {
left:240px;
background:var(--primary-color);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow:var(--regular-shadow);
}
.leftpanel {
position:absolute;
}
.header {
}
.rightpanel {
width:calc(100% - 63px);
}
.maincontent {
margin-top:0px;
padding: 10px 10px;
}
.col-sm {
-webkit-flex-basis: 0;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%
}
.col-sm-auto {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.col-sm-1 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 8.333333%;
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%
}
.col-sm-2 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 16.666667%;
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%
}
.col-sm-3 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%
}
.col-sm-4 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.333333%;
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%
}
.col-sm-5 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 41.666667%;
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%
}
.col-sm-6 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
.col-sm-7 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 58.333333%;
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%
}
.col-sm-8 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 66.666667%;
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%
}
.col-sm-9 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%
}
.col-sm-10 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 83.333333%;
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%
}
.col-sm-11 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 91.666667%;
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%
}
.col-sm-12 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%
}
.pull-sm-0 {
right: auto
}
.pull-sm-1 {
right: 8.333333%
}
.pull-sm-2 {
right: 16.666667%
}
.pull-sm-3 {
right: 25%
}
.pull-sm-4 {
right: 33.333333%
}
.pull-sm-5 {
right: 41.666667%
}
.pull-sm-6 {
right: 50%
}
.pull-sm-7 {
right: 58.333333%
}
.pull-sm-8 {
right: 66.666667%
}
.pull-sm-9 {
right: 75%
}
.pull-sm-10 {
right: 83.333333%
}
.pull-sm-11 {
right: 91.666667%
}
.pull-sm-12 {
right: 100%
}
.push-sm-0 {
left: auto
}
.push-sm-1 {
left: 8.333333%
}
.push-sm-2 {
left: 16.666667%
}
.push-sm-3 {
left: 25%
}
.push-sm-4 {
left: 33.333333%
}
.push-sm-5 {
left: 41.666667%
}
.push-sm-6 {
left: 50%
}
.push-sm-7 {
left: 58.333333%
}
.push-sm-8 {
left: 66.666667%
}
.push-sm-9 {
left: 75%
}
.push-sm-10 {
left: 83.333333%
}
.push-sm-11 {
left: 91.666667%
}
.push-sm-12 {
left: 100%
}
.offset-sm-0 {
margin-left: 0
}
.offset-sm-1 {
margin-left: 8.333333%
}
.offset-sm-2 {
margin-left: 16.666667%
}
.offset-sm-3 {
margin-left: 25%
}
.offset-sm-4 {
margin-left: 33.333333%
}
.offset-sm-5 {
margin-left: 41.666667%
}
.offset-sm-6 {
margin-left: 50%
}
.offset-sm-7 {
margin-left: 58.333333%
}
.offset-sm-8 {
margin-left: 66.666667%
}
.offset-sm-9 {
margin-left: 75%
}
.offset-sm-10 {
margin-left: 83.333333%
}
.offset-sm-11 {
margin-left: 91.666667%
}
.container {
padding-right: 15px;
padding-left: 15px
}
.container {
width: 540px;
max-width: 100%
}
.container-fluid {
padding-right: 15px;
padding-left: 15px
}
.row {
margin-right: -5px;
margin-left: -5px
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9 {
padding-right: 5px;
padding-left: 5px
}
/* Fix modal responsive issues and content cutoff */
.nyroModalCont {
width: 95% !important;
left: 2.5% !important;
max-width: 100vw !important;
padding: 20px 10px !important;
overflow-x: hidden !important;
box-sizing: border-box;
}
/* Override fixed min-width from base CSS - key fix for task modal */
.nyroModalCont .row .regRight {
min-width: auto !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box;
}
/* Ensure modal close button stays visible */
.nyroModalCloseButton {
right: 15px !important;
top: 15px !important;
z-index: 101;
}
/* Make modal content scrollable if needed */
.nyroModalCont .modal-icons {
margin-right: 40px;
}
/* Fix modal form elements */
.nyroModalCont input,
.nyroModalCont select,
.nyroModalCont textarea {
max-width: 100% !important;
box-sizing: border-box;
}
/* Additional fixes for task modal layout */
.nyroModalCont .tabbable {
width: 100% !important;
overflow-x: auto;
}
.nyroModalCont .tab-content {
padding: 10px 5px;
}
/* Ensure dropdowns and form controls are mobile-friendly */
.nyroModalCont .form-control,
.nyroModalCont .dropdown-menu {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box;
}
/* Fix sidebar layout in task modal */
.nyroModalCont .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
.nyroModalCont .row > div {
padding-left: 5px !important;
padding-right: 5px !important;
}
.maincontentinner {
}
.tabbedwidget .btn-group {
display: none;
}
.ui-tabs-nav > li a {
padding: 10px 6px;
}
.pageicon {
}
/* forms */
#elm1_toolbargroup {
width: 680px;
}
/* messages */
.messageview .subject {
padding-right: 110px;
padding-left: 10px;
}
.msgauthor, .msgbody {
padding: 10px;
}
.msgauthor .authorinfo h5 span {
margin-left: 0;
display: block;
}
/* media */
.mediaWrapper {
width: 500px;
}
.row-fluid .span5.imginfo {
width: auto;
float: none;
margin-bottom: 20px;
}
.row-fluid .span7.imgdetails {
width: auto;
margin: 0;
float: none;
}
.loginpanel {
width: 80%;
}
#dashboard-left, #dashboard-right {
width: 100%;
margin: 0;
}
/* calendar */
.ui-datepicker-calendar td a {
padding: 10px;
font-size: 12px;
}
/* buttons */
.fontawesomeicons .span3 {
width: 48%;
display: inline-block;
}
.iconsweetslist li {
width: 33.3333%;
}
/* forms */
.stdform label {
float: none;
width: auto;
text-align: left;
margin-bottom: 5px;
}
.stdform div.par .controls,
.stdform .stdformbutton, .stdform small.desc,
.stdform2 span.field, .stdform2 div.field,
.stdform span.field, .stdform div.field,
.stdform .formwrapper, .dualselect {
margin-left: 0;
}
.input-append .add-on, .input-prepend .add-on {
height: 20px;
}
.stdform input {
padding: 4px 5px;
}
.stdform2 p, .stdform2 div.par {
background: none;
}
.stepContainer p {
margin: 10px 15px;
}
#wiz1step2_1 p {
margin: 10px 0;
}
.tabbedwizard .stepContainer {
padding: 30px 15px;
}
#elm1_toolbargroup {
width: 640px;
}
/* boxes */
.bx-wrapper {
margin-bottom: 20px;
}
.slide_img {
float: left;
width: 100px;
}
.slide_content {
margin-left: 120px;
}
.entry_img {
float: left;
}
.entry_content {
margin-left: 120px;
}
/* media */
.mediamgr_menu li.right {
float: none;
margin-top: 10px;
}
.mediamgr_category ul li.right {
float: none;
text-align: right;
display: block;
border-top: 1px dashed #ddd;
margin-top: 10px;
}
.mediamgr .mediamgr_right {
top: 110px;
}
/* messages */
.messageleft {
width: 241px;
}
.messageright {
margin-left: 241px;
}
/* bootstrap */
.btn {
padding: 4px 12px;
}
.ticketBox {
width: 100% !important;
}
.hidden-gt-sm {
display:block!important;
}
.headerinner {
width: 100%;
margin-left: 0 !important;
}
.stickyColumn {
position:relative;
}
}
@media (min-width: 1201px) {
.col-md {
-webkit-flex-basis: 0;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%
}
.col-md-auto {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.col-md-1 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 8.333333%;
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%
}
.col-md-2 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 16.666667%;
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%
}
.col-md-3 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%
}
.col-md-4 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.333333%;
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%
}
.col-md-5 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 41.666667%;
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%
}
.col-md-6 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
.col-md-7 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 58.333333%;
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%
}
.col-md-8 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 66.666667%;
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%
}
.col-md-9 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%
}
.col-md-10 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 83.333333%;
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%
}
.col-md-11 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 91.666667%;
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%
}
.col-md-12 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%
}
.pull-md-0 {
right: auto
}
.pull-md-1 {
right: 8.333333%
}
.pull-md-2 {
right: 16.666667%
}
.pull-md-3 {
right: 25%
}
.pull-md-4 {
right: 33.333333%
}
.pull-md-5 {
right: 41.666667%
}
.pull-md-6 {
right: 50%
}
.pull-md-7 {
right: 58.333333%
}
.pull-md-8 {
right: 66.666667%
}
.pull-md-9 {
right: 75%
}
.pull-md-10 {
right: 83.333333%
}
.pull-md-11 {
right: 91.666667%
}
.pull-md-12 {
right: 100%
}
.push-md-0 {
left: auto
}
.push-md-1 {
left: 8.333333%
}
.push-md-2 {
left: 16.666667%
}
.push-md-3 {
left: 25%
}
.push-md-4 {
left: 33.333333%
}
.push-md-5 {
left: 41.666667%
}
.push-md-6 {
left: 50%
}
.push-md-7 {
left: 58.333333%
}
.push-md-8 {
left: 66.666667%
}
.push-md-9 {
left: 75%
}
.push-md-10 {
left: 83.333333%
}
.push-md-11 {
left: 91.666667%
}
.push-md-12 {
left: 100%
}
.offset-md-0 {
margin-left: 0
}
.offset-md-1 {
margin-left: 8.333333%
}
.offset-md-2 {
margin-left: 16.666667%
}
.offset-md-3 {
margin-left: 25%
}
.offset-md-4 {
margin-left: 33.333333%
}
.offset-md-5 {
margin-left: 41.666667%
}
.offset-md-6 {
margin-left: 50%
}
.offset-md-7 {
margin-left: 58.333333%
}
.offset-md-8 {
margin-left: 66.666667%
}
.offset-md-9 {
margin-left: 75%
}
.offset-md-10 {
margin-left: 83.333333%
}
.offset-md-11 {
margin-left: 91.666667%
}
.container {
padding-right: 15px;
padding-left: 15px
}
.col-lg {
-webkit-flex-basis: 0;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%
}
.col-lg-auto {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.col-lg-1 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 8.333333%;
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%
}
.col-lg-2 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 16.666667%;
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%
}
.col-lg-3 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%
}
.col-lg-4 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.333333%;
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%
}
.col-lg-5 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 41.666667%;
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%
}
.col-lg-6 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
.col-lg-7 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 58.333333%;
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%
}
.col-lg-8 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 66.666667%;
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%
}
.col-lg-9 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%
}
.col-lg-10 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 83.333333%;
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%
}
.col-lg-11 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 91.666667%;
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%
}
.col-lg-12 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%
}
.pull-lg-0 {
right: auto
}
.pull-lg-1 {
right: 8.333333%
}
.pull-lg-2 {
right: 16.666667%
}
.pull-lg-3 {
right: 25%
}
.pull-lg-4 {
right: 33.333333%
}
.pull-lg-5 {
right: 41.666667%
}
.pull-lg-6 {
right: 50%
}
.pull-lg-7 {
right: 58.333333%
}
.pull-lg-8 {
right: 66.666667%
}
.pull-lg-9 {
right: 75%
}
.pull-lg-10 {
right: 83.333333%
}
.pull-lg-11 {
right: 91.666667%
}
.pull-lg-12 {
right: 100%
}
.push-lg-0 {
left: auto
}
.push-lg-1 {
left: 8.333333%
}
.push-lg-2 {
left: 16.666667%
}
.push-lg-3 {
left: 25%
}
.push-lg-4 {
left: 33.333333%
}
.push-lg-5 {
left: 41.666667%
}
.push-lg-6 {
left: 50%
}
.push-lg-7 {
left: 58.333333%
}
.push-lg-8 {
left: 66.666667%
}
.push-lg-9 {
left: 75%
}
.push-lg-10 {
left: 83.333333%
}
.push-lg-11 {
left: 91.666667%
}
.push-lg-12 {
left: 100%
}
.offset-lg-0 {
margin-left: 0
}
.offset-lg-1 {
margin-left: 8.333333%
}
.offset-lg-2 {
margin-left: 16.666667%
}
.offset-lg-3 {
margin-left: 25%
}
.offset-lg-4 {
margin-left: 33.333333%
}
.offset-lg-5 {
margin-left: 41.666667%
}
.offset-lg-6 {
margin-left: 50%
}
.offset-lg-7 {
margin-left: 58.333333%
}
.offset-lg-8 {
margin-left: 66.666667%
}
.offset-lg-9 {
margin-left: 75%
}
.offset-lg-10 {
margin-left: 83.333333%
}
.offset-lg-11 {
margin-left: 91.666667%
}
.col-xl {
-webkit-flex-basis: 0;
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%
}
.col-xl-auto {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: auto
}
.col-xl-1 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 8.333333%;
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%
}
.col-xl-2 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 16.666667%;
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%
}
.col-xl-3 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%
}
.col-xl-4 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.333333%;
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%
}
.col-xl-5 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 41.666667%;
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%
}
.col-xl-6 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%
}
.col-xl-7 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 58.333333%;
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%
}
.col-xl-8 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 66.666667%;
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%
}
.col-xl-9 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 75%;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%
}
.col-xl-10 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 83.333333%;
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%
}
.col-xl-11 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 91.666667%;
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%
}
.col-xl-12 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%
}
.pull-xl-0 {
right: auto
}
.pull-xl-1 {
right: 8.333333%
}
.pull-xl-2 {
right: 16.666667%
}
.pull-xl-3 {
right: 25%
}
.pull-xl-4 {
right: 33.333333%
}
.pull-xl-5 {
right: 41.666667%
}
.pull-xl-6 {
right: 50%
}
.pull-xl-7 {
right: 58.333333%
}
.pull-xl-8 {
right: 66.666667%
}
.pull-xl-9 {
right: 75%
}
.pull-xl-10 {
right: 83.333333%
}
.pull-xl-11 {
right: 91.666667%
}
.pull-xl-12 {
right: 100%
}
.push-xl-0 {
left: auto
}
.push-xl-1 {
left: 8.333333%
}
.push-xl-2 {
left: 16.666667%
}
.push-xl-3 {
left: 25%
}
.push-xl-4 {
left: 33.333333%
}
.push-xl-5 {
left: 41.666667%
}
.push-xl-6 {
left: 50%
}
.push-xl-7 {
left: 58.333333%
}
.push-xl-8 {
left: 66.666667%
}
.push-xl-9 {
left: 75%
}
.push-xl-10 {
left: 83.333333%
}
.push-xl-11 {
left: 91.666667%
}
.push-xl-12 {
left: 100%
}
.offset-xl-0 {
margin-left: 0
}
.offset-xl-1 {
margin-left: 8.333333%
}
.offset-xl-2 {
margin-left: 16.666667%
}
.offset-xl-3 {
margin-left: 25%
}
.offset-xl-4 {
margin-left: 33.333333%
}
.offset-xl-5 {
margin-left: 41.666667%
}
.offset-xl-6 {
margin-left: 50%
}
.offset-xl-7 {
margin-left: 58.333333%
}
.offset-xl-8 {
margin-left: 66.666667%
}
.offset-xl-9 {
margin-left: 75%
}
.offset-xl-10 {
margin-left: 83.333333%
}
.offset-xl-11 {
margin-left: 91.666667%
}
.container {
padding-right: 15px;
padding-left: 15px
}
.container {
width: 1140px;
max-width: 100%
}
.container-fluid {
padding-right: 15px;
padding-left: 15px
}
.row {
margin-right: -5px;
margin-left: -5px
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9 {
padding-right: 5px;
padding-left: 5px
}
}
/* ============================================================================
MOBILE-LIKE SHELL — phones + tablets (< 1200px)
----------------------------------------------------------------------------
The desktop sidebar layout is reserved for >= 1200px. Below that we use a
single mobile-like behaviour: fixed header, content full-width, and the left
menu becomes an off-canvas drawer toggled by the hamburger.
This block is appended LAST in mobile.css (which itself loads after nav.css /
structure.css), so for selectors it redefines it wins on source order at
equal specificity — no !important needed except where it must beat an
earlier same-file rule (e.g. the 576-1200 bucket hiding .barmenu).
Stabilization sweep — see GitHub #3185, #2878.
============================================================================ */
@media (max-width: 1199px) {
/* --- Hamburger must be visible (the 576-1200 bucket hid it) --- */
.barmenu {
display: inline-block !important;
line-height: 50px;
}
/* --- Header above content so its dropdowns aren't out-painted --- */
/* The fixed header + backdrop-filter trap dropdowns in a z-index:15 stacking
context, and content uses zlayer tokens up to 20+. Lift the header above
all content (zlayer max 40) but keep it below the nyroModal (z 100). #1938 */
.header {
z-index: 90;
}
.header,
.headerinner,
.headmenu {
overflow: visible;
}
/* Header dropdowns (notifications #1938, news, profile, project selector):
contain within the viewport as a panel below the header instead of
overflowing off the right-anchored icon. */
.header .dropdown-menu,
.headerinner .dropdown-menu {
position: fixed;
top: 50px;
left: 5px;
right: 5px;
width: auto;
min-width: 0;
max-width: calc(100vw - 10px);
max-height: calc(100vh - 60px);
overflow-y: auto;
}
/* --- Kanban: unify the horizontal scroll (#1364) ---
The sticky column-header bar and the ticket columns were in SEPARATE
horizontal scrollers, so they desynced when swiping. Make the board
wrapper the single horizontal scroller, drop the per-row overflow and
the header's sticky positioning, and match header/ticket column widths
so titles stay above their columns. */
.kanban-board-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.kanban-board-wrapper .sortableTicketList .row-fluid {
overflow-x: visible;
}
.kanban-column-headers {
position: static !important;
top: auto !important;
}
.kanban-column-headers .column,
.sortableTicketList .row-fluid > .column {
flex: 0 0 280px;
width: 280px;
min-width: 280px;
}
/* --- Task / idea / article detail modal (#3088, #1357) ---
Cap the modal to the viewport (the JS no longer forces 1800px on mobile),
collapse the two-column main+sidebar layout to one column, make the tab
nav usable, and stop fixed-pixel fields from overflowing. */
.nyroModalCont {
width: 95vw !important;
left: 2.5vw !important;
max-width: 95vw !important;
max-height: calc(100vh - 24px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
box-sizing: border-box;
padding: 20px 12px !important;
}
.nyroModalCont .col-md-9,
.nyroModalCont .col-md-3 {
width: 100% !important;
display: block !important;
float: none !important;
}
/* The modal's jQuery-UI tab nav collapses on mobile — force it to show/wrap */
.nyroModalCont .tab-primary.ui-tabs .ui-tabs-nav,
.nyroModalCont .tabbable .ui-tabs-nav,
.tab-primary.ui-tabs .ui-tabs-nav {
display: flex !important;
flex-wrap: wrap;
height: auto;
}
/* Fields fill the column instead of fixed pixel/min widths overflowing */
.nyroModalCont input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.nyroModalCont select,
.nyroModalCont textarea,
.nyroModalCont .chosen-container {
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box;
}
/* Stack form rows: label on its own full-width line, field below it (the
side-by-side label/field layout wraps awkwardly — "Assigned\nto" etc). */
.nyroModalCont .form-group {
display: block !important;
width: 100% !important;
}
.nyroModalCont .form-group .control-label {
display: block !important;
width: 100% !important;
text-align: left !important;
margin: 0 0 4px 0 !important;
padding: 0 !important;
}
.nyroModalCont .form-group select,
.nyroModalCont .form-group .chosen-container,
.nyroModalCont .form-group .date-picker-form-control,
.nyroModalCont .form-group input[type="text"] {
width: 100% !important;
}
/* Save/footer bar must not float over content on small screens */
.nyroModalCont .sticky-modal-footer {
position: relative !important;
bottom: auto !important;
}
/* --- Dashboard widget cards (#3350) ---
Tighten widget padding, keep task-card content inside the card (the
"New"/status badges were overflowing), and let card rows wrap. */
.widgetContent {
padding-left: 8px !important;
padding-right: 8px !important;
}
.grid-stack-item-content {
overflow-x: hidden;
}
/* Hide the welcome/stats widget on mobile — low value and the stat strip
scrolls awkwardly. height:0 + min-height:0 so GridStack doesn't leave a
gap where it was. */
#widget_wrapper_welcome {
display: none !important;
height: 0 !important;
min-height: 0 !important;
}
.ticketBox {
overflow: hidden;
}
/* Show essentials only on mobile (title + status + actions menu). The
timer, due date, recurring and scheduler icons cram the ~240px card, and
the floated status pill ends up overlapping the title/date. All of this
is available in the task detail. Per product guidance for mobile cards. */
/* NB: ':not(.col-md-12)' — on the project-dashboard card variant the title
link lives inside a .col-md-12.timerContainer; only hide the small
play/timer button (the .tw-relative timerContainer), never the title. */
.ticketBox .timerContainer:not(.col-md-12),
.ticketBox .due-date-container,
.ticketBox .placeholder-container,
.ticketBox .date-picker-form-control,
.ticketBox .scheduler {
display: none !important;
}
/* Let the remaining row wrap and stop the status pill floating over text. */
.ticketBox .tw-flex.tw-flex-row {
flex-wrap: wrap;
align-items: center;
row-gap: 6px;
}
.ticketBox .ticket-title,
.ticketBox .title-text,
.ticketBox .tw-flex-1 {
min-width: 0;
}
.ticketBox .ticket-title {
flex: 1 1 100%;
}
.ticketBox .title-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ticketBox .dropdown-toggle.status {
float: none !important;
max-width: 100%;
}
/* Project-dashboard "Latest To-Dos" card variant uses a .col-md-4 / .col-md-8
grid with floated effort/milestone/status dropdowns that squeeze the title
to zero width. Stack the columns, hide effort/milestone/due-date (in the
detail), un-float the dropdowns, and give the title room. */
.ticketBox .col-md-4,
.ticketBox .col-md-8 {
width: 100% !important;
display: block !important;
float: none !important;
}
.ticketBox .effortDropdown,
.ticketBox .milestoneDropdown,
.ticketBox .due-date-container,
.ticketBox .business-time,
.ticketBox .infoIcon,
.ticketBox .duedates {
display: none !important;
}
.ticketBox .dropdown.ticketDropdown,
.ticketBox .dropdown-toggle.status,
.ticketBox .statusDropdown {
float: none !important;
}
.ticketBox .right {
text-align: left;
}
/* Title link must stay visible (was collapsed to 0 width) */
.ticketBox a[class*="ticket-headline"],
.ticketBox .ticket-title a {
display: inline-block;
min-width: 0;
}
/* --- Content takes the full width; the drawer leaves the flow --- */
.rightpanel {
width: 100%;
margin-left: 0;
padding-top: 50px;
}
.mainwrapper .primaryContent,
.mainwrapper.menuclosed .primaryContent,
.mainwrapper.menuopen .primaryContent {
padding-left: 0;
}
.maincontent {
margin-top: 0;
padding: 10px;
width: 100%;
}
/* Header menu must not reserve collapsed-rail space */
.mainwrapper .headmenu,
.mainwrapper.menuclosed .headmenu,
.mainwrapper.menuopen .headmenu {
margin-left: 10px;
}
/* --- Left menu as an off-canvas drawer --- */
.mainwrapper .leftpanel,
.mainwrapper.menuclosed .leftpanel,
.mainwrapper.menuopen .leftpanel {
position: fixed;
top: 50px;
left: 0;
margin: 0;
width: min(85vw, 300px);
max-width: 300px;
height: calc(100vh - 50px);
border-radius: 0;
z-index: 1001;
display: flex;
transform: translateX(-100%);
transition: transform 0.25s ease;
overflow-y: auto;
overflow-x: hidden;
}
.mainwrapper.menuopen .leftpanel {
transform: translateX(0);
box-shadow: var(--large-shadow);
}
/* Drawer always shows full labels (undo the desktop collapsed-rail tweaks).
NOTE: scoped strictly to .leftpanel — must NOT touch .headmenu, whose
work-mode labels stay icon-only in the header (see rule below). */
.mainwrapper.menuclosed .leftpanel .leftmenu .nav-tabs.nav-stacked > li.dropdown a {
font-size: var(--base-font-size);
width: auto;
text-align: left;
padding: 12px 15px 8px;
}
.mainwrapper.menuclosed .leftpanel .leftmenu .nav-tabs.nav-stacked > li.dropdown a span,
.mainwrapper.menuclosed .leftpanel .leftmenu .nav-tabs.nav-stacked > li.dropdown a span.feature-label {
font-size: var(--base-font-size);
display: inline;
}
/* Header work-mode switcher (Projects / My Work / Company) is icons-only on
mobile — its text labels overflow the cramped header and overlap the
project avatar. Keep labels hidden in BOTH menu states. */
.headmenu .headmenu-label {
display: none !important;
}
/* Project avatar in the header: render it as a 30px square avatar, centred
in the 50px bar and in line with the other icons. The active-project
highlight (rgba white 0.2) must NOT become a full-height grey box, and the
avatar image must not be pushed down inside its span. */
.headmenu.work-modes > li > a {
display: inline-flex;
align-items: center;
height: 50px;
padding: 0 4px;
}
.headmenu.work-modes > li > a.bigProjectSelector,
.headmenu.work-modes > li > a.bigProjectSelector.active,
.headmenu.work-modes > li > a.bigProjectSelector:hover {
background: none !important;
box-shadow: none !important;
}
/* Header shows ONLY the avatar on mobile — hide the project name text and
caret in BOTH menu states. (menuclosed sets font-size:0, but opening the
drawer switches to menuopen which un-hides the name — so scope it here.) */
.headmenu.work-modes .bigProjectSelector {
font-size: 0 !important;
}
.headmenu.work-modes .bigProjectSelector .fa-caret-down {
display: none !important;
}
.mainwrapper.menuclosed .bigProjectSelector > .projectAvatar,
.headmenu.work-modes .bigProjectSelector .projectAvatar {
width: 30px !important;
height: 30px !important;
margin: 0 !important;
border-radius: var(--box-radius-small, 5px);
overflow: hidden;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.headmenu.work-modes .bigProjectSelector .projectAvatar img {
width: 30px !important;
height: 30px !important;
margin: 0 !important;
object-fit: cover;
display: block;
vertical-align: middle;
}
/* --- Dimmed backdrop behind the open drawer (real element, tap to close) --- */
.mainwrapper.menuopen .menu-backdrop {
display: block;
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 1000;
}
}
/* Backdrop element is hidden everywhere except the open mobile drawer (above) */
.menu-backdrop {
display: none;
}