wekan/client/components/boards/boardBody.css

.board-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  min-width: 100%;
}

/* When zoom is 50% or lower, ensure full width like content */
.board-wrapper[style*="transform: scale(0.5)"] {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.board-wrapper[style*="transform: scale(0.4)"] {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.board-wrapper[style*="transform: scale(0.3)"] {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.board-wrapper .board-canvas {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: margin 0.1s;
  overflow-y: auto;
  width: 100%;
  min-width: 100%;
}

/* Ensure horizontal scrollbar is visible for high zoom levels */
.board-wrapper .board-canvas[style*="overflow-x: auto"] {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

/* Style the scrollbar for better visibility */
.board-wrapper .board-canvas::-webkit-scrollbar {
  height: 12px;
  width: 12px;
}

.board-wrapper .board-canvas::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

.board-wrapper .board-canvas::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 6px;
}

.board-wrapper .board-canvas::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Ensure content area can scroll horizontally for high zoom levels */
#content[style*="overflow-x: auto"] {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

/* Style content area scrollbar */
#content::-webkit-scrollbar {
  height: 12px;
  width: 12px;
}

#content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 6px;
}

#content::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 6px;
}

#content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Ensure scrollbars are always visible for high zoom levels */
#content[style*="overflow-x: auto"] {
  position: relative;
}

#content[style*="overflow-x: auto"]::-webkit-scrollbar {
  height: 12px;
  width: 12px;
}

    /* Force vertical scrollbar to always be visible */
    #content[style*="overflow-y: auto"] {
      overflow-y: scroll !important;
    }

    /* Mobile - make all text 2x bigger inside #content by default (icons stay same size) */
    @media screen and (max-width: 800px),
           screen and (max-device-width: 800px),
           screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
           screen and (max-width: 800px) and (orientation: portrait),
           screen and (max-width: 800px) and (orientation: landscape) {
      #content {
        font-size: 2em !important; /* 2x bigger base font size for content area */
      }

      /* Make all text elements 2x bigger */
      #content h1, #content h2, #content h3, #content h4, #content h5, #content h6,
      #content p, #content span, #content div, #content a, #content button,
      #content .minicard, #content .list-header-name, #content .board-header-btn,
      #content .card-title, #content .card-details, #content .card-description,
      #content .swimlane-header, #content .list-title, #content .card-text,
      #content .member, #content .member-name, #content .member-initials,
      #content .checklist-item, #content .checklist-title, #content .comment,
      #content .activity, #content .activity-text, #content .activity-time,
      #content .board-title, #content .board-description, #content .list-name,
      #content .card-text, #content .card-title, #content .card-description,
      #content .swimlane-title, #content .swimlane-description,
      #content .board-header-title, #content .board-header-description,
      #content .card-detail-title, #content .card-detail-description,
      #content .list-header-title, #content .list-header-description,
      #content .swimlane-header-title, #content .swimlane-header-description,
      #content .minicard-title, #content .minicard-description,
      #content .card-comment, #content .card-comment-text,
      #content .checklist-item-text, #content .checklist-item-title,
      #content .activity-item, #content .activity-item-text,
      #content .board-member, #content .board-member-name,
      #content .team-member, #content .team-member-name,
      #content .org-member, #content .org-member-name,
      #content .template-member, #content .template-member-name,
      #content .user-name, #content .user-email, #content .user-role,
      #content .setting-title, #content .setting-description,
      #content .popup-title, #content .popup-description,
      #content .modal-title, #content .modal-description,
      #content .notification-title, #content .notification-text,
      #content .announcement-title, #content .announcement-text,
      #content .offline-warning-title, #content .offline-warning-text,
      #content .error-title, #content .error-text,
      #content .success-title, #content .success-text,
      #content .info-title, #content .info-text,
      #content .warning-title, #content .warning-text {
        font-size: 1em !important; /* Use inherited 2x scaling */
      }

      /* Keep icons the same size (don't scale them) */
      #content .fa, #content .icon, #content i {
        font-size: 1em !important; /* Keep original icon size */
      }

      /* Reset specific icon sizes to prevent double scaling */
      #content .fa-home, #content .fa-bars, #content .fa-search,
      #content .fa-bell, #content .fa-user, #content .fa-cog,
      #content .fa-plus, #content .fa-minus, #content .fa-edit,
      #content .fa-trash, #content .fa-save, #content .fa-cancel,
      #content .fa-arrow-left, #content .fa-arrow-right,
      #content .fa-arrow-up, #content .fa-arrow-down,
      #content .fa-check, #content .fa-times, #content .fa-close,
      #content .fa-star, #content .fa-heart, #content .fa-thumbs-up,
      #content .fa-thumbs-down, #content .fa-comment, #content .fa-reply,
      #content .fa-share, #content .fa-download, #content .fa-upload,
      #content .fa-copy, #content .fa-paste, #content .fa-cut,
      #content .fa-undo, #content .fa-redo, #content .fa-refresh,
      #content .fa-sync, #content .fa-spinner, #content .fa-loading,
      #content .fa-info, #content .fa-question, #content .fa-exclamation,
      #content .fa-warning, #content .fa-error, #content .fa-success,
      #content .fa-check-circle, #content .fa-times-circle,
      #content .fa-exclamation-circle, #content .fa-question-circle,
      #content .fa-info-circle, #content .fa-warning-circle,
      #content .fa-error-circle, #content .fa-success-circle {
        font-size: 1em !important; /* Keep original icon size */
      }
    }

    /* Fallback for iPhone devices using JavaScript detection */
    .iphone-device #content {
      font-size: 2em !important; /* 2x bigger base font size for content area */
    }

    .iphone-device #content h1, .iphone-device #content h2, .iphone-device #content h3, .iphone-device #content h4, .iphone-device #content h5, .iphone-device #content h6,
    .iphone-device #content p, .iphone-device #content span, .iphone-device #content div, .iphone-device #content a, .iphone-device #content button,
    .iphone-device #content .minicard, .iphone-device #content .list-header-name, .iphone-device #content .board-header-btn,
    .iphone-device #content .card-title, .iphone-device #content .card-details, .iphone-device #content .card-description,
    .iphone-device #content .swimlane-header, .iphone-device #content .list-title, .iphone-device #content .card-text,
    .iphone-device #content .member, .iphone-device #content .member-name, .iphone-device #content .member-initials,
    .iphone-device #content .checklist-item, .iphone-device #content .checklist-title, .iphone-device #content .comment,
    .iphone-device #content .activity, .iphone-device #content .activity-text, .iphone-device #content .activity-time,
    .iphone-device #content .board-title, .iphone-device #content .board-description, .iphone-device #content .list-name,
    .iphone-device #content .card-text, .iphone-device #content .card-title, .iphone-device #content .card-description,
    .iphone-device #content .swimlane-title, .iphone-device #content .swimlane-description,
    .iphone-device #content .board-header-title, .iphone-device #content .board-header-description,
    .iphone-device #content .card-detail-title, .iphone-device #content .card-detail-description,
    .iphone-device #content .list-header-title, .iphone-device #content .list-header-description,
    .iphone-device #content .swimlane-header-title, .iphone-device #content .swimlane-header-description,
    .iphone-device #content .minicard-title, .iphone-device #content .minicard-description,
    .iphone-device #content .card-comment, .iphone-device #content .card-comment-text,
    .iphone-device #content .checklist-item-text, .iphone-device #content .checklist-item-title,
    .iphone-device #content .activity-item, .iphone-device #content .activity-item-text,
    .iphone-device #content .board-member, .iphone-device #content .board-member-name,
    .iphone-device #content .team-member, .iphone-device #content .team-member-name,
    .iphone-device #content .org-member, .iphone-device #content .org-member-name,
    .iphone-device #content .template-member, .iphone-device #content .template-member-name,
    .iphone-device #content .user-name, .iphone-device #content .user-email, .iphone-device #content .user-role,
    .iphone-device #content .setting-title, .iphone-device #content .setting-description,
    .iphone-device #content .popup-title, .iphone-device #content .popup-description,
    .iphone-device #content .modal-title, .iphone-device #content .modal-description,
    .iphone-device #content .notification-title, .iphone-device #content .notification-text,
    .iphone-device #content .announcement-title, .iphone-device #content .announcement-text,
    .iphone-device #content .offline-warning-title, .iphone-device #content .offline-warning-text,
    .iphone-device #content .error-title, .iphone-device #content .error-text,
    .iphone-device #content .success-title, .iphone-device #content .success-text,
    .iphone-device #content .info-title, .iphone-device #content .info-text,
    .iphone-device #content .warning-title, .iphone-device #content .warning-text {
      font-size: 1em !important; /* Use inherited 2x scaling */
    }

    /* Keep icons the same size for iPhone devices */
    .iphone-device #content .fa, .iphone-device #content .icon, .iphone-device #content i {
      font-size: 1em !important; /* Keep original icon size */
    }

/* Ensure scrollbars are positioned correctly */
#content[style*="overflow-x: auto"]::-webkit-scrollbar:vertical {
  width: 12px;
}

#content[style*="overflow-x: auto"]::-webkit-scrollbar:horizontal {
  height: 12px;
}

/* Force both scrollbars to always be visible for high zoom levels */
#content[style*="overflow-x: auto"][style*="overflow-y: auto"] {
  overflow-x: scroll !important;
  overflow-y: scroll !important;
}

/* Ensure the right scrollbar is always visible on the inner right edge */
#content[style*="overflow-y: auto"] {
  scrollbar-gutter: stable;
}
.board-wrapper .board-canvas .board-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  top: -100px;
  right: -400px;
  background: #000;
  opacity: 0.33;
  animation: fadeIn 0.2s;
  z-index: 16;
}
.board-wrapper .board-canvas.is-dragging-active .open-minicard-composer,
.board-wrapper .board-canvas.is-dragging-active .minicard-wrapper.is-checked {
  display: none;
}
/* Mobile view styles - applied when isMiniScreen is true (iPhone, etc.) */
.board-wrapper.mobile-view {
  width: 100% !important;
  min-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

.board-wrapper.mobile-view .board-canvas {
  width: 100% !important;
  min-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

.board-wrapper.mobile-view .board-canvas.mobile-view .swimlane {
  border-bottom: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  min-width: 100%;
}

@media screen and (max-width: 800px) {
  .board-wrapper {
    width: 100% !important;
    min-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  .board-wrapper .board-canvas {
    width: 100% !important;
    min-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  .board-wrapper .board-canvas .swimlane {
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    min-width: 100%;
  }
}
.calendar-event-green {
  background: #3cb500 !important;
  border-color: #2a8000;
  color: #fff !important;
}
.calendar-event-yellow {
  background: #fad900 !important;
  border-color: #c7ac00;
  color: #000 !important;
}
.calendar-event-orange {
  background: #ff9f19 !important;
  border-color: #cc7c14;
  color: #000 !important;
}
.calendar-event-red {
  background: #eb4646 !important;
  border-color: #b83737;
  color: #fff !important;
}
.calendar-event-purple {
  background: #a632db !important;
  border-color: #7d26a6;
  color: #fff !important;
}
.calendar-event-blue {
  background: #0079bf !important;
  border-color: #005a8a;
  color: #fff !important;
}
.calendar-event-pink {
  background: #ff78cb !important;
  border-color: #cc62a3;
  color: #000 !important;
}
.calendar-event-sky {
  background: #00c2e0 !important;
  border-color: #0094ab;
  color: #fff !important;
}
.calendar-event-black {
  background: #4d4d4d !important;
  border-color: #1a1a1a;
  color: #fff !important;
}
.calendar-event-lime {
  background: #51e898 !important;
  border-color: #3eb375;
  color: #000 !important;
}
.calendar-event-silver {
  background: #c0c0c0 !important;
  border-color: #8c8c8c;
  color: #000 !important;
}
.calendar-event-peachpuff {
  background: #ffdab9 !important;
  border-color: #ccaf95;
  color: #000 !important;
}
.calendar-event-crimson {
  background: #dc143c !important;
  border-color: #a8112f;
  color: #fff !important;
}
.calendar-event-plum {
  background: #dda0dd !important;
  border-color: #a87ba8;
  color: #000 !important;
}
.calendar-event-darkgreen {
  background: #006400 !important;
  border-color: #003000;
  color: #fff !important;
}
.calendar-event-slateblue {
  background: #6a5acd !important;
  border-color: #4f4399;
  color: #fff !important;
}
.calendar-event-magenta {
  background: #f0f !important;
  border-color: #c0c;
  color: #fff !important;
}
.calendar-event-gold {
  background: #ffd700 !important;
  border-color: #ca0;
  color: #000 !important;
}
.calendar-event-navy {
  background: #000080 !important;
  border-color: #003;
  color: #fff !important;
}
.calendar-event-gray {
  background: #808080 !important;
  border-color: #333;
  color: #fff !important;
}
.calendar-event-saddlebrown {
  background: #8b4513 !important;
  border-color: #572b0c;
  color: #fff !important;
}
.calendar-event-paleturquoise {
  background: #afeeee !important;
  border-color: #8ababa;
  color: #000 !important;
}
.calendar-event-mistyrose {
  background: #ffe4e1 !important;
  border-color: #ccb8b6;
  color: #000 !important;
}
.calendar-event-indigo {
  background: #4b0082 !important;
  border-color: #2b004d;
  color: #fff !important;
}
/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}
.modal-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25%; /* Adjust the height to make it smaller */
  position: relative;
  margin: 10% auto; /* This margin will help center the modal vertically */
  max-width: 400px; /* Adjust the max-width to make it smaller */
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 1px;
  border-bottom: 1px solid #ccc;
}
.modal-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  font-size: 18px;
}
.modal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 4px;
  border-top: 1px solid #ccc;
}
.close {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 25px;
  cursor: pointer;
}