mirror of
https://github.com/wekan/wekan.git
synced 2025-12-16 07:20:12 +01:00
939 lines
23 KiB
CSS
939 lines
23 KiB
CSS
.integration-form {
|
|
padding: 0.7vh 0.7vw;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
.flex,
|
|
.option {
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -webkit-flex;
|
|
display: -moz-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.option {
|
|
-webkit-border-radius: 0.4vw;
|
|
border-radius: 0.4vw;
|
|
background: #fff;
|
|
text-decoration: none;
|
|
-webkit-box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.2);
|
|
box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.2);
|
|
margin-top: 0.7vh;
|
|
padding: 0.7vh 0.7vw;
|
|
}
|
|
|
|
/* Zoom and Mobile Mode Controls */
|
|
.board-header-btns.center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.zoom-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5vw;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
padding: 0.5vh 1vw;
|
|
border-radius: 0.5vw;
|
|
box-shadow: 0 0.2vh 0.5vh rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.zoom-controls .board-header-btn {
|
|
padding: 0.5vh 0.8vw !important;
|
|
border-radius: 0.3vw !important;
|
|
background: #fff !important;
|
|
border: 1px solid #000 !important;
|
|
transition: all 0.2s ease !important;
|
|
color: #000 !important;
|
|
height: auto !important;
|
|
line-height: normal !important;
|
|
margin: 0 !important;
|
|
float: none !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.zoom-controls .board-header-btn i {
|
|
color: #000 !important;
|
|
float: none !important;
|
|
display: inline !important;
|
|
line-height: normal !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.zoom-controls .board-header-btn:hover {
|
|
background: #000 !important;
|
|
border-color: #000 !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.zoom-controls .board-header-btn:hover i {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.zoom-controls .board-header-btn.is-active {
|
|
background: #0079bf;
|
|
color: white;
|
|
border-color: #005a8a;
|
|
}
|
|
|
|
.zoom-controls .board-header-btn.is-active i {
|
|
color: white;
|
|
}
|
|
|
|
.zoom-level {
|
|
font-weight: bold;
|
|
color: #333;
|
|
min-width: 3vw;
|
|
text-align: center;
|
|
font-size: clamp(12px, 2vw, 14px);
|
|
cursor: pointer;
|
|
padding: 0.3vh 0.5vw;
|
|
border-radius: 0.3vw;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.zoom-level:hover {
|
|
background: #f0f0f0;
|
|
color: #000;
|
|
}
|
|
|
|
/* Mobile Mode Styles */
|
|
.mobile-mode .board-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.mobile-mode .board-canvas {
|
|
height: 100%;
|
|
}
|
|
|
|
.mobile-mode .minicard {
|
|
font-size: clamp(16px, 4vw, 20px);
|
|
padding: 1.2vh 1.5vw 0.5vh;
|
|
min-height: 3vh;
|
|
}
|
|
|
|
.mobile-mode .list-header-name {
|
|
font-size: clamp(18px, 4.5vw, 24px);
|
|
}
|
|
|
|
.mobile-mode .board-header-btn {
|
|
padding: 1vh 1.5vw;
|
|
font-size: clamp(14px, 3.5vw, 18px);
|
|
}
|
|
|
|
.mobile-mode .zoom-controls {
|
|
padding: 1vh 1.5vw;
|
|
gap: 1vw;
|
|
}
|
|
|
|
.mobile-mode .zoom-controls .board-header-btn {
|
|
padding: 1vh 1.5vw !important;
|
|
font-size: clamp(14px, 3.5vw, 18px) !important;
|
|
background: #fff !important;
|
|
border: 1px solid #000 !important;
|
|
color: #000 !important;
|
|
height: auto !important;
|
|
line-height: normal !important;
|
|
margin: 0 !important;
|
|
float: none !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.mobile-mode .zoom-controls .board-header-btn i {
|
|
color: #000 !important;
|
|
float: none !important;
|
|
display: inline !important;
|
|
line-height: normal !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.mobile-mode .zoom-controls .board-header-btn:hover {
|
|
background: #000 !important;
|
|
border-color: #000 !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.mobile-mode .zoom-controls .board-header-btn:hover i {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.mobile-mode .zoom-level {
|
|
font-size: clamp(14px, 3.5vw, 18px);
|
|
min-width: 4vw;
|
|
}
|
|
|
|
/* Comprehensive Mobile Mode Styles - Works on all screen sizes */
|
|
.mobile-mode .board-wrapper {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
transform: none !important;
|
|
transform-origin: initial !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.mobile-mode .board-canvas {
|
|
height: 100% !important;
|
|
overflow-x: hidden !important;
|
|
overflow-y: auto !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.mobile-mode .swimlane {
|
|
width: 100% !important;
|
|
min-width: 100% !important;
|
|
max-width: 100% !important;
|
|
margin-bottom: 2rem !important;
|
|
display: block !important;
|
|
float: none !important;
|
|
}
|
|
|
|
.mobile-mode .swimlane-header {
|
|
width: 100% !important;
|
|
min-width: 100% !important;
|
|
max-width: 100% !important;
|
|
font-size: clamp(18px, 2.5vw, 32px) !important;
|
|
padding: 1rem !important;
|
|
margin-bottom: 1rem !important;
|
|
display: block !important;
|
|
}
|
|
|
|
.mobile-mode .list {
|
|
width: 100% !important;
|
|
min-width: 100% !important;
|
|
max-width: 100% !important;
|
|
display: block !important;
|
|
float: none !important;
|
|
margin-bottom: 2rem !important;
|
|
border-left: none !important;
|
|
border-bottom: 2px solid #ccc !important;
|
|
clear: both !important;
|
|
}
|
|
|
|
.mobile-mode .list-header {
|
|
width: 100% !important;
|
|
min-width: 100% !important;
|
|
max-width: 100% !important;
|
|
padding: 1rem !important;
|
|
font-size: clamp(18px, 2.5vw, 32px) !important;
|
|
display: grid !important;
|
|
grid-template-columns: 30px 1fr auto auto !important;
|
|
gap: 10px !important;
|
|
align-items: center !important;
|
|
position: relative !important;
|
|
}
|
|
|
|
.mobile-mode .list-header .list-header-name {
|
|
font-size: clamp(18px, 2.5vw, 32px) !important;
|
|
font-weight: bold !important;
|
|
grid-row: 1 !important;
|
|
grid-column: 2 !important;
|
|
align-self: end !important;
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.mobile-mode .list-header .cardCount {
|
|
font-size: clamp(14px, 2vw, 24px) !important;
|
|
grid-row: 2 !important;
|
|
grid-column: 2 !important;
|
|
align-self: start !important;
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.mobile-mode .list-header .list-header-menu-icon {
|
|
position: static !important;
|
|
right: auto !important;
|
|
top: auto !important;
|
|
transform: none !important;
|
|
grid-row: 1/3 !important;
|
|
grid-column: 3 !important;
|
|
padding: 14px !important;
|
|
font-size: clamp(24px, 3vw, 48px) !important;
|
|
text-align: center !important;
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.mobile-mode .list-header .list-header-handle {
|
|
position: static !important;
|
|
right: auto !important;
|
|
top: auto !important;
|
|
transform: none !important;
|
|
grid-row: 1/3 !important;
|
|
grid-column: 4 !important;
|
|
padding: 14px !important;
|
|
font-size: clamp(28px, 3.5vw, 56px) !important;
|
|
text-align: center !important;
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.mobile-mode .list-body {
|
|
width: 100% !important;
|
|
min-width: 100% !important;
|
|
max-width: 100% !important;
|
|
padding: 1rem !important;
|
|
display: block !important;
|
|
}
|
|
|
|
.mobile-mode .minicard {
|
|
width: 100% !important;
|
|
min-width: 100% !important;
|
|
max-width: 100% !important;
|
|
font-size: clamp(16px, 2vw, 24px) !important;
|
|
padding: 1.2vh 1.5vw 0.5vh !important;
|
|
min-height: 3vh !important;
|
|
margin-bottom: 0.5rem !important;
|
|
display: block !important;
|
|
float: none !important;
|
|
}
|
|
|
|
.mobile-mode .minicard .minicard-title {
|
|
font-size: clamp(16px, 2vw, 24px) !important;
|
|
font-weight: bold !important;
|
|
}
|
|
|
|
.mobile-mode .minicard .minicard-members {
|
|
font-size: clamp(12px, 1.5vw, 18px) !important;
|
|
}
|
|
|
|
.mobile-mode .minicard .minicard-lists {
|
|
font-size: clamp(12px, 1.5vw, 18px) !important;
|
|
}
|
|
|
|
/* Desktop Mode Styles */
|
|
.desktop-mode .board-wrapper {
|
|
width: auto !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
.desktop-mode .swimlane {
|
|
width: auto !important;
|
|
min-width: auto !important;
|
|
}
|
|
|
|
.desktop-mode .list {
|
|
width: auto !important;
|
|
min-width: auto !important;
|
|
display: flex !important;
|
|
float: left !important;
|
|
margin-bottom: 0 !important;
|
|
border-left: 1px solid #ccc !important;
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
.desktop-mode .list-header {
|
|
width: auto !important;
|
|
min-width: auto !important;
|
|
padding: 2.5vh 1.5vw 0.5vh !important;
|
|
font-size: clamp(14px, 3vw, 18px) !important;
|
|
display: block !important;
|
|
}
|
|
|
|
.desktop-mode .list-header .list-header-name {
|
|
font-size: clamp(14px, 3vw, 18px) !important;
|
|
display: inline !important;
|
|
grid-row: auto !important;
|
|
grid-column: auto !important;
|
|
align-self: auto !important;
|
|
}
|
|
|
|
.desktop-mode .list-header .cardCount {
|
|
font-size: 12px !important;
|
|
grid-row: auto !important;
|
|
grid-column: auto !important;
|
|
align-self: auto !important;
|
|
}
|
|
|
|
.desktop-mode .list-header .list-header-menu-icon {
|
|
position: absolute !important;
|
|
right: 60px !important;
|
|
top: 50% !important;
|
|
transform: translateY(-50%) !important;
|
|
grid-row: auto !important;
|
|
grid-column: auto !important;
|
|
padding: 14px !important;
|
|
font-size: 40px !important;
|
|
}
|
|
|
|
.desktop-mode .list-header .list-header-handle {
|
|
position: absolute !important;
|
|
right: 10px !important;
|
|
top: 50% !important;
|
|
transform: translateY(-50%) !important;
|
|
grid-row: auto !important;
|
|
grid-column: auto !important;
|
|
padding: 7px !important;
|
|
font-size: clamp(16px, 3vw, 20px) !important;
|
|
}
|
|
|
|
.desktop-mode .list-body {
|
|
width: auto !important;
|
|
min-width: auto !important;
|
|
padding: 5px 11px !important;
|
|
}
|
|
|
|
.desktop-mode .minicard {
|
|
width: auto !important;
|
|
min-width: auto !important;
|
|
font-size: clamp(12px, 2.5vw, 16px) !important;
|
|
padding: 0.5vh 0.8vw !important;
|
|
min-height: auto !important;
|
|
margin-bottom: 9px !important;
|
|
}
|
|
|
|
.desktop-mode .minicard .minicard-title {
|
|
font-size: clamp(12px, 2.5vw, 16px) !important;
|
|
}
|
|
|
|
.desktop-mode .minicard .minicard-members {
|
|
font-size: 10px !important;
|
|
}
|
|
|
|
.desktop-mode .minicard .minicard-lists {
|
|
font-size: 10px !important;
|
|
}
|
|
|
|
/* Additional Mobile Mode Styles for Other Elements - Works on all screen sizes */
|
|
.mobile-mode .swimlane-header .swimlane-title {
|
|
font-size: clamp(18px, 2.5vw, 32px) !important;
|
|
font-weight: bold !important;
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.mobile-mode .swimlane-header .swimlane-description {
|
|
font-size: clamp(14px, 2vw, 24px) !important;
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.mobile-mode .board-header {
|
|
font-size: clamp(18px, 2.5vw, 32px) !important;
|
|
padding: 1rem !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.mobile-mode .board-header .board-header-title {
|
|
font-size: clamp(18px, 2.5vw, 32px) !important;
|
|
font-weight: bold !important;
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.mobile-mode .board-header .board-header-description {
|
|
font-size: clamp(14px, 2vw, 24px) !important;
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.mobile-mode .board-header .board-header-btn {
|
|
font-size: clamp(14px, 2vw, 24px) !important;
|
|
padding: 1vh 1.5vw !important;
|
|
display: inline-block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.mobile-mode .board-header .board-header-btn i {
|
|
font-size: clamp(14px, 2vw, 24px) !important;
|
|
display: inline !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Force mobile mode visibility on all screen sizes */
|
|
.mobile-mode .list-header .fa-angle-right,
|
|
.mobile-mode .list-header .fa-arrows {
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
position: static !important;
|
|
right: auto !important;
|
|
top: auto !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.mobile-mode .list-header .fa-angle-right {
|
|
grid-row: 1/3 !important;
|
|
grid-column: 3 !important;
|
|
padding: 14px !important;
|
|
font-size: clamp(24px, 3vw, 48px) !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
.mobile-mode .list-header .fa-arrows {
|
|
grid-row: 1/3 !important;
|
|
grid-column: 4 !important;
|
|
padding: 14px !important;
|
|
font-size: clamp(28px, 3.5vw, 56px) !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
/* Override any media queries that might hide elements in mobile mode */
|
|
.mobile-mode * {
|
|
max-width: none !important;
|
|
}
|
|
|
|
.mobile-mode .list,
|
|
.mobile-mode .swimlane,
|
|
.mobile-mode .board-wrapper,
|
|
.mobile-mode .board-canvas {
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
min-width: 100% !important;
|
|
}
|
|
|
|
/* Force mobile mode list styling on all screen sizes - override desktop CSS */
|
|
.mobile-mode .board-canvas {
|
|
display: block !important;
|
|
flex-direction: column !important;
|
|
flex-wrap: nowrap !important;
|
|
align-items: stretch !important;
|
|
justify-content: flex-start !important;
|
|
width: 100vw !important;
|
|
max-width: 100vw !important;
|
|
min-width: 100vw !important;
|
|
overflow-x: hidden !important;
|
|
overflow-y: auto !important;
|
|
}
|
|
|
|
.mobile-mode .swimlane {
|
|
display: block !important;
|
|
width: 100vw !important;
|
|
max-width: 100vw !important;
|
|
min-width: 100vw !important;
|
|
margin: 0 0 2rem 0 !important;
|
|
padding: 0 !important;
|
|
float: none !important;
|
|
clear: both !important;
|
|
}
|
|
|
|
.mobile-mode .swimlane .swimlane-header {
|
|
display: block !important;
|
|
width: 100vw !important;
|
|
max-width: 100vw !important;
|
|
min-width: 100vw !important;
|
|
margin: 0 0 1rem 0 !important;
|
|
padding: 1rem !important;
|
|
font-size: clamp(18px, 2.5vw, 32px) !important;
|
|
font-weight: bold !important;
|
|
border-bottom: 2px solid #ccc !important;
|
|
}
|
|
|
|
.mobile-mode .swimlane .lists {
|
|
display: block !important;
|
|
width: 100vw !important;
|
|
max-width: 100vw !important;
|
|
min-width: 100vw !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
flex-direction: column !important;
|
|
flex-wrap: nowrap !important;
|
|
align-items: stretch !important;
|
|
justify-content: flex-start !important;
|
|
}
|
|
|
|
.mobile-mode .list {
|
|
display: block !important;
|
|
width: 100vw !important;
|
|
max-width: 100vw !important;
|
|
min-width: 100vw !important;
|
|
margin: 0 0 2rem 0 !important;
|
|
padding: 0 !important;
|
|
float: none !important;
|
|
clear: both !important;
|
|
border-left: none !important;
|
|
border-right: none !important;
|
|
border-top: none !important;
|
|
border-bottom: 2px solid #ccc !important;
|
|
flex: none !important;
|
|
flex-basis: auto !important;
|
|
flex-grow: 0 !important;
|
|
flex-shrink: 0 !important;
|
|
position: static !important;
|
|
left: auto !important;
|
|
right: auto !important;
|
|
top: auto !important;
|
|
bottom: auto !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.mobile-mode .list:first-child {
|
|
margin-left: 0 !important;
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.mobile-mode .list:last-child {
|
|
margin-right: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.mobile-mode .list.ui-sortable-helper {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
min-width: 100% !important;
|
|
height: auto !important;
|
|
min-height: 60px !important;
|
|
margin: 0 0 2rem 0 !important;
|
|
padding: 0 !important;
|
|
float: none !important;
|
|
clear: both !important;
|
|
border-left: none !important;
|
|
border-right: none !important;
|
|
border-top: none !important;
|
|
border-bottom: 2px solid #ccc !important;
|
|
flex: none !important;
|
|
}
|
|
|
|
.mobile-mode .list.placeholder {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
min-width: 100% !important;
|
|
height: auto !important;
|
|
min-height: 60px !important;
|
|
margin: 0 0 2rem 0 !important;
|
|
padding: 0 !important;
|
|
float: none !important;
|
|
clear: both !important;
|
|
border-left: none !important;
|
|
border-right: none !important;
|
|
border-top: none !important;
|
|
border-bottom: 2px solid #ccc !important;
|
|
flex: none !important;
|
|
}
|
|
|
|
/* Override any existing responsive CSS that might interfere with mobile mode */
|
|
.mobile-mode .board-canvas .swimlane .lists {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
min-width: 100% !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
flex-direction: column !important;
|
|
flex-wrap: nowrap !important;
|
|
align-items: stretch !important;
|
|
justify-content: flex-start !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.mobile-mode .board-canvas .swimlane .lists .list {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
min-width: 100% !important;
|
|
margin: 0 0 2rem 0 !important;
|
|
padding: 0 !important;
|
|
float: none !important;
|
|
clear: both !important;
|
|
border-left: none !important;
|
|
border-right: none !important;
|
|
border-top: none !important;
|
|
border-bottom: 2px solid #ccc !important;
|
|
flex: none !important;
|
|
flex-basis: auto !important;
|
|
flex-grow: 0 !important;
|
|
flex-shrink: 0 !important;
|
|
position: static !important;
|
|
left: auto !important;
|
|
right: auto !important;
|
|
top: auto !important;
|
|
bottom: auto !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
/* Force mobile mode to override any media query styles */
|
|
@media screen and (min-width: 801px) {
|
|
.mobile-mode .board-canvas {
|
|
display: block !important;
|
|
flex-direction: column !important;
|
|
flex-wrap: nowrap !important;
|
|
align-items: stretch !important;
|
|
justify-content: flex-start !important;
|
|
width: 100vw !important;
|
|
max-width: 100vw !important;
|
|
min-width: 100vw !important;
|
|
overflow-x: hidden !important;
|
|
overflow-y: auto !important;
|
|
}
|
|
|
|
.mobile-mode .swimlane {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
min-width: 100% !important;
|
|
margin: 0 0 2rem 0 !important;
|
|
padding: 0 !important;
|
|
float: none !important;
|
|
clear: both !important;
|
|
}
|
|
|
|
.mobile-mode .swimlane .lists {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
min-width: 100% !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
flex-direction: column !important;
|
|
flex-wrap: nowrap !important;
|
|
align-items: stretch !important;
|
|
justify-content: flex-start !important;
|
|
}
|
|
|
|
.mobile-mode .list {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
min-width: 100% !important;
|
|
margin: 0 0 2rem 0 !important;
|
|
padding: 0 !important;
|
|
float: none !important;
|
|
clear: both !important;
|
|
border-left: none !important;
|
|
border-right: none !important;
|
|
border-top: none !important;
|
|
border-bottom: 2px solid #ccc !important;
|
|
flex: none !important;
|
|
flex-basis: auto !important;
|
|
flex-grow: 0 !important;
|
|
flex-shrink: 0 !important;
|
|
position: static !important;
|
|
left: auto !important;
|
|
right: auto !important;
|
|
top: auto !important;
|
|
bottom: auto !important;
|
|
transform: none !important;
|
|
}
|
|
}
|
|
|
|
/* Hide desktop-only elements in mobile mode (like mobile media queries do) */
|
|
.mobile-mode .board-header-btn i.fa + span {
|
|
display: none !important;
|
|
}
|
|
|
|
.mobile-mode .board-header-btn span {
|
|
display: none !important;
|
|
}
|
|
|
|
.mobile-mode .board-header-btn .fa + span {
|
|
display: none !important;
|
|
}
|
|
|
|
.mobile-mode .board-header-btn .fa + .board-header-btn-text {
|
|
display: none !important;
|
|
}
|
|
|
|
.mobile-mode .board-header-btn .fa + .board-header-btn-label {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Show only icons in mobile mode */
|
|
.mobile-mode .board-header-btn {
|
|
width: auto !important;
|
|
min-width: auto !important;
|
|
padding: 8px !important;
|
|
text-align: center !important;
|
|
}
|
|
|
|
.mobile-mode .board-header-btn i {
|
|
display: inline-block !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* Hide desktop-specific elements that shouldn't show in mobile mode */
|
|
.mobile-mode .desktop-only,
|
|
.mobile-mode .board-header .desktop-only {
|
|
display: none !important;
|
|
}
|
|
|
|
.mobile-mode .board-header .board-header-btn.desktop-only {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Hide desktop-specific board header buttons in mobile mode */
|
|
.mobile-mode .board-header-btns.left {
|
|
display: none !important;
|
|
}
|
|
|
|
.mobile-mode .board-header-btns.center {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Show only the right section buttons in mobile mode, but hide text labels */
|
|
.mobile-mode .board-header-btns.right {
|
|
display: block !important;
|
|
}
|
|
|
|
.mobile-mode .board-header-btns.right .board-header-btn span {
|
|
display: none !important;
|
|
}
|
|
|
|
.mobile-mode .board-header-btns.right .board-header-btn .fa + span {
|
|
display: none !important;
|
|
}
|
|
|
|
.mobile-mode .board-header-btns.right .board-header-btn .fa + .board-header-btn-text {
|
|
display: none !important;
|
|
}
|
|
|
|
.mobile-mode .board-header-btns.right .board-header-btn .fa + .board-header-btn-label {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Hide specific desktop-only buttons that shouldn't show in mobile mode */
|
|
.mobile-mode .board-header-btn.js-star-board span,
|
|
.mobile-mode .board-header-btn.js-change-visibility span,
|
|
.mobile-mode .board-header-btn.js-watch-board span,
|
|
.mobile-mode .board-header-btn.js-sort-cards span {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Show only icons for mobile mode buttons */
|
|
.mobile-mode .board-header-btns.right .board-header-btn {
|
|
width: auto !important;
|
|
min-width: auto !important;
|
|
padding: 8px !important;
|
|
text-align: center !important;
|
|
margin: 0 2px !important;
|
|
}
|
|
|
|
.mobile-mode .board-header-btns.right .board-header-btn i {
|
|
display: inline-block !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* Ensure mobile mode looks like small screen mobile view */
|
|
.mobile-mode .board-header {
|
|
height: 40px !important;
|
|
}
|
|
|
|
.mobile-mode .board-header .board-header-btns {
|
|
margin-top: 0px !important;
|
|
}
|
|
|
|
.mobile-mode .board-header .board-header-btn {
|
|
height: 32px !important;
|
|
line-height: 32px !important;
|
|
font-size: 15px !important;
|
|
}
|
|
|
|
.mobile-mode .board-header .board-header-btn i.fa {
|
|
line-height: 32px !important;
|
|
}
|
|
|
|
/* Copy mobile media query styles to mobile mode for consistent appearance */
|
|
.mobile-mode .board-header {
|
|
height: 40px !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.mobile-mode .board-header .board-header-btns {
|
|
margin-top: 0px !important;
|
|
height: 40px !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: flex-end !important;
|
|
}
|
|
|
|
.mobile-mode .board-header .board-header-btn {
|
|
height: 32px !important;
|
|
line-height: 32px !important;
|
|
font-size: 15px !important;
|
|
margin: 0 2px !important;
|
|
padding: 4px 8px !important;
|
|
border-radius: 4px !important;
|
|
background: rgba(255, 255, 255, 0.1) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
|
color: #fff !important;
|
|
text-decoration: none !important;
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
min-width: 32px !important;
|
|
width: auto !important;
|
|
}
|
|
|
|
.mobile-mode .board-header .board-header-btn:hover {
|
|
background: rgba(255, 255, 255, 0.2) !important;
|
|
border-color: rgba(255, 255, 255, 0.3) !important;
|
|
}
|
|
|
|
.mobile-mode .board-header .board-header-btn i.fa {
|
|
line-height: 32px !important;
|
|
font-size: 15px !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.mobile-mode .board-header .board-header-btn i.fa + span {
|
|
display: none !important;
|
|
}
|
|
|
|
.mobile-mode .board-header .board-header-btn span {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Hide the board title in mobile mode to match mobile view */
|
|
.mobile-mode .header-board-menu {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Ensure the board header takes full width in mobile mode */
|
|
.mobile-mode .board-header {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: space-between !important;
|
|
padding: 0 10px !important;
|
|
}
|
|
|
|
/* Additional Desktop Mode Styles for Other Elements */
|
|
.desktop-mode .swimlane-header .swimlane-title {
|
|
font-size: clamp(14px, 3vw, 18px) !important;
|
|
}
|
|
|
|
.desktop-mode .swimlane-header .swimlane-description {
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
.desktop-mode .board-header {
|
|
font-size: clamp(14px, 3vw, 18px) !important;
|
|
padding: 2.5vh 1.5vw 0.5vh !important;
|
|
}
|
|
|
|
.desktop-mode .board-header .board-header-title {
|
|
font-size: clamp(14px, 3vw, 18px) !important;
|
|
}
|
|
|
|
.desktop-mode .board-header .board-header-description {
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
.desktop-mode .board-header .board-header-btn {
|
|
font-size: clamp(12px, 2.5vw, 16px) !important;
|
|
padding: 0.5vh 0.8vw !important;
|
|
}
|
|
|
|
.desktop-mode .board-header .board-header-btn i {
|
|
font-size: clamp(12px, 2.5vw, 16px) !important;
|
|
}
|