/* ========================================================================== CSS Variables - Light Mode (Default) ========================================================================== */ :root { --primary-color: #001335; --secondary-color: #0056b3; --success-color: green; --error-color: #FF7B00; --text-color: #333333; --background-color: #f5f5f5; --white: #ffffff; --border-color: #dddddd; --hover-darken: 10%; } /* ========================================================================== Dark Mode Overrides To enable dark mode, add the "dark-mode" class to the ========================================================================== */ body.dark-mode { --primary-color: #0d1b2a; /* Darker navy */ --secondary-color: #1b263b; /* Even darker for secondary elements */ --success-color: #4caf50; --error-color: #FF7B00; --text-color: #e0e0e0; --background-color: #121212; /* Option: you may wish to keep pure white for text or accents; here we keep it */ --white: #ffffff; --border-color: #555555; } /* ========================================================================== Global Styles ========================================================================== */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin: 0; padding: 0; line-height: 1.6; background-color: var(--background-color); color: var(--text-color); display: flex; flex-direction: column; min-height: 100vh; } #userRole{ display:none; } /* ========================================================================== Header Styles ========================================================================== */ .header { display: flex; justify-content: space-between; align-items: center; background-color: var(--primary-color); color: var(--white); padding: 10px 20px; position: sticky; top: 0; z-index: 1000; flex-wrap: wrap; /* Allow items to wrap on smaller screens */ } .logo { height: 150px; /* Reduced from 150px */ width: 100%; margin-right: 10px; margin-left: 10px; /* Reduced from 50px */ } .title { font-size: 24px; /* Reduced from 30px */ font-weight: bold; } .subtitle { font-size: 16px; /* Reduced from 18px */ margin-top: 5px; text-align: center; flex-grow: 1; } .user-info { font-size: 14px; text-align: right; } /* Media Queries for Responsive Design */ @media screen and (max-width: 768px) { .header { flex-direction: column; text-align: center; padding: 10px; } .logo { height: 60px; margin: 0 auto 10px; } .title { font-size: 20px; margin-bottom: 5px; } .subtitle { font-size: 14px; margin-bottom: 10px; } .user-info { text-align: center; width: 100%; margin-top: 10px; } } /* Additional breakpoint for very small screens */ @media screen and (max-width: 480px) { .logo { height: 50px; } .title { font-size: 18px; } .subtitle { font-size: 12px; } } /* ========================================================================== Home Icon ========================================================================== */ .home-link { position: absolute; bottom: 10px; left: 10px; display: block; } .home-icon { width: 30px; height: auto; cursor: pointer; transition: transform 0.2s ease; } .home-icon:hover { transform: scale(1.1); } .button-container .button { margin-top: 15px; } /* ========================================================================== Help Section ========================================================================== */ .help-button-container { text-align: right; margin: 10px 20px; } .help-text { display: none; margin: 10px auto; padding: 15px; background-color: var(--white); border: 1px solid var(--border-color); border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); color: var(--text-color); max-width: 800px; width: 100%; box-sizing: border-box; text-align: left; } .help-text ul { padding-left: 20px; } .help-text ul li { margin-bottom: 10px; } /* ========================================================================== Content Container ========================================================================== */ .content { flex: 1; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; } .content-container { max-width: 1000px; margin: 20px auto; background-color: var(--white); border-radius: 10px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); padding: 20px; min-width: 90%; } .admin-box{ padding-top: 20px; } /* Admin Box Container */ .admin-box { font-family: Arial, sans-serif; max-width: 800px; /* Increased width */ margin: 20px auto; padding: 20px; background-color: #f9f9f9; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .search-wrapper { margin-bottom: 15px; width: 100%; } .input-group { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 100%; gap: 10px; } .input-autocomplete-wrapper { flex-grow: 1; flex-shrink: 1; min-width: 0; } .button-group { display: flex; flex-direction: row; gap: 10px; flex-shrink: 0; } /* Input and autocomplete container */ .input-autocomplete-wrapper { position: relative; flex: 1; /* Take remaining space */ min-width: 200px; } /* Input field */ #adminInput { width: 100%; padding: 10px 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; box-sizing: border-box; height: 40px; /* Fixed height */ } .input-autocomplete-wrapper { flex: 1 1 auto; /* Flexible width */ min-width: 0; /* Prevent overflow */ } #submitProxyUser { background-color: #4a90e2; color: white; } #resetProxyUser { background-color: #f0f0f0; color: #333; } /* Autocomplete dropdown */ .autocomplete-list { /* Your existing autocomplete styles */ position: absolute; top:calc(100% + 2px); left: 0; width: 100%; max-height: 300px; overflow-y: auto; background: white; border: 1px solid #ccc; border-top: none; border-radius: 0 0 4px 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); z-index: 1000; /* Increased from 100 */ } /* Button group */ .button-group { display: flex; gap: 10px; align-items: center; } /* Buttons */ .button-group button { padding: 10px 15px; height: 100%; /* Match input height */ box-sizing: border-box; white-space: nowrap; } .button-container { display: flex; flex-direction: column; align-items: center; margin: 10px; min-height: 120px; } .button-label { font-weight: bold; margin-bottom: 8px; text-align: center; font-size: 18px; color: #333; } .button { margin-bottom: 8px; } .text { text-align: center; font-size: 16px; color: #666; line-height: 1.3; } .help-text { max-width: 800px; margin: 0 auto; } .help-section { margin-bottom: 25px; } .help-section h3 { color: #2c5aa0; border-bottom: 2px solid #2c5aa0; padding-bottom: 5px; margin-bottom: 15px; } .help-feature { margin-bottom: 15px; padding: 10px; background-color: #f8f9fa; border-left: 4px solid #2c5aa0; } .help-feature h4 { margin: 0 0 8px 0; color: #1a365d; } .help-feature p { margin: 5px 0; color: #555; } .help-steps { padding-left: 20px; } .help-steps li { margin-bottom: 5px; } .user-job-details { font-size: 0.9em; color: #666; margin-top: 2px; font-style: italic; } .user-main-info { font-weight: bold; } /* Active state for autocomplete items */ .autocomplete-item { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #eee; } .autocomplete-item:hover, .autocomplete-item.active { background-color: #f0f0f0; } /* Acting as label */ .acting-as-label { padding: 10px; background-color: #e8f4ff; border-radius: 4px; border-left: 3px solid #4a90e2; font-size: 14px; color: #333; margin-top: 15px; } /* ========================================================================== */ /* Search Input Field (Only for the Course Search) */ /* ========================================================================== */ #courseSearchInput , #courseNameInput{ padding: 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; flex: 1; width: 100%; /* Ensures responsiveness */ max-width: 600px; box-sizing: border-box; /* Prevents width issues */ } /* ========================================================================== */ /* Search Button (Scoped to Avoid Conflicts) */ /* ========================================================================== */ .course-search-container button { padding: 8px 16px; font-size: 16px; background-color: var(--success-color); color: white; border: none; border-radius: 4px; cursor: pointer; } .course-search-container button:hover { background-color: darkgreen; } /* ========================================================================== */ /* Autocomplete Dropdown (Scoped for Course Search Only) */ /* ========================================================================== */ #autocompleteContainer { position: absolute; border: 1px solid #ccc; top: calc(100% + 2px) !important; max-height: 150px; overflow-y: auto; background: white; width: calc(50% - 25px); /* Ensures dropdown matches input width */ z-index: 1000; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); } #autocompleteContainer div { padding: 8px; cursor: pointer; } #autocompleteContainer div:hover { background-color: #f0f0f0; } .button-table { width: 100%; table-layout: fixed; } .button-table td { width: 25%; /* Since there are four columns */ vertical-align: top; padding: 1rem; } #courseResultsTable { display: table; } .autocomplete-item { padding: 8px; cursor: pointer; border-bottom: 1px solid #ccc; background-color: white; } .autocomplete-item:hover { background-color: #f0f0f0; } /* ========================================================================== Tabs ========================================================================== */ .tabs { display: flex; gap: 10px; margin-top: 20px; margin-bottom: 20px; } .tab-button { padding: 10px 20px; border: 1px solid var(--border-color); background-color: #f1f1f1 !important; cursor: pointer; border-radius: 5px; border-color: var(--primary-color); color: var(--black) !important; font-weight: bold; transition: background-color 0.3s ease; } .tab-button:hover { color: var(--white); } .tab-button.active { background-color: var(--primary-color) !important; color: var(--white) !important; } .tab-content { display: none; } .tab-content.active { display: block; } /* ========================================================================== Buttons ========================================================================== */ #course-contents-table { width: 100%; border-collapse: collapse; visibility: visible !important; display: table !important; } #course-contents-body tr { display: table-row !important; } #course-contents-body td { display: table-cell !important; } /* ========================================================================== Tables ========================================================================== */ table { width: 100%; border-collapse: collapse; } th, td { text-align: center; vertical-align: middle; padding: 10px; border: 1px solid var(--border-color); } thead th { background-color: #f1f1f1; font-weight: bold; } #coursesTable, #courseResultsTable { width: 100%; border-collapse: collapse; } #coursesTable th, #coursesTable td, #courseResultsTable th, #courseResultsTable td { text-align: center; padding: 10px; border: 1px solid var(--border-color); } #coursesTable thead th { background-color: #f1f1f1; font-weight: bold; } #coursesTableBody tr { background-color: var(--white); transition: background-color 0.3s ease-in-out; } #coursesTableBody td { text-align: center; padding: 10px; border: 1px solid var(--border-color); } /* ========================================================================== Logout Container ========================================================================== */ .logout-container { display: flex; justify-content: center; align-items: center; padding: 10px; margin: 10px 0; } /* ========================================================================== Proxy Mode (if applicable) ========================================================================== */ .proxy-mode { border: 25px solid purple; padding: 10px; box-shadow: 0 0 10px purple; } /* ========================================================================== Additional Components: Date Picker ========================================================================== */ input[type="date"] { background-color: var(--white); color: var(--text-color); font-size: 14px; padding: 8px 10px; border: 1px solid #ccc; border-radius: 5px; outline: none; cursor: pointer; transition: border-color 0.3s ease-in-out; } input[type="date"]:hover { border-color: #28a745; } input[type="date"]:focus { border-color: #1e7e34; box-shadow: 0 0 5px rgba(40, 167, 69, 0.5); } input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(50%); cursor: pointer; transition: transform 0.2s ease-in-out; } input[type="date"]::-webkit-calendar-picker-indicator:hover { transform: scale(1.1); } /* ========================================================================== Tab 4: Request Development Area ========================================================================== */ .tab4-container { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border: 1px solid var(--border-color); margin-top: 1rem; background-color: var(--white); border-radius: 5px; } .tab4-left { flex: 1; margin-right: 1rem; } .tab4-right { flex-shrink: 0; } #devAreaStatus { margin-top: 1rem; font-weight: bold; color: var(--text-color); } /* Add these classes to your CSS file */ .success-message { color: green; } .error-message { color: red; } /* ========================================================================== Sorting Indicators ========================================================================== */ .sortable { cursor: pointer; user-select: none; } .sortable:hover { background-color: #f5f5f5; } .sort-indicator { margin-left: 5px; font-size: 0.8em; } /* ========================================================================== Login Container (for the login page) ========================================================================== */ .login-container { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; margin-top: 20px; box-sizing: border-box; } .login-container h1 { font-size: 30px; margin-bottom: 10px; } .login-container h2 { font-size: 16px; color: var(--error-color); } .login-container h3 { font-size: 24px; } /* 🔎 Search + Page Size Container */ #user-table-container > div:first-child { margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } /* 📄 Page Size Dropdown */ #page-size-selector { padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.95em; } /* 🔍 Search Input */ #user-search-input { padding: 6px 10px; font-size: 0.95em; border: 1px solid #ccc; border-radius: 4px; } /* ⏭ Pagination Buttons */ .pagination-controls button { padding: 6px 12px; margin: 0 5px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; } .pagination-controls button[disabled] { background-color: #ccc; cursor: not-allowed; } /* ========================================================================== Academic Year and Course Search ========================================================================== */ .academic-year-container, .course-search-container { margin-top: 15px; } .academic-year-container label { font-weight: bold; margin-right: 10px; } .course-search-container { display: flex; align-items: center; gap: 10px; } .course-search-container input { padding: 5px; width: 200px; } .results-container { margin-top: 15px; } /* Input Field */ #courseSearchInput { padding: 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; flex: 1; max-width: 600px; min-width: 600px; } /* ========================================================================== Filter Container ========================================================================== */ .filter-container-wrapper { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .course-count { font-weight: bold; color: var(--text-color); } /* ========================================================================== Footer Styles ========================================================================== */ /* ========================================================================== Layout Fix for Sticky Footer ========================================================================== */ /* Ensure the page layout is at least full height */ html, body { height: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; } /* Make the main content area expand to fill available space */ .content { flex: 1; /* Expands to push the footer down */ display: flex; flex-direction: column; } /* ========================================================================== Footer Styles (Ensures it Stays at the Bottom) ========================================================================== */ .footer { background-color: var(--primary-color); color: var(--white); display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; width: 100%; box-sizing: border-box; z-index: 1000; /* ✅ Ensure it sticks to the bottom */ position: relative; bottom: 0; left: 0; } /* Fix for cases where the content is too short */ .content::after { content: ""; flex-grow: 1; /* Pushes the footer down */ } .footer-left { font-size: 14px; } .footer-right a { color: var(--white); text-decoration: none; font-weight: bold; transition: color 0.3s ease; } .footer-right a:hover { color: var(--secondary-color); text-decoration: underline; } /* Proxy Mode (if applicable) */ .proxy-mode { border: 25px solid purple; padding: 10px; box-shadow: 0 0 10px purple; } .count-updated { animation: highlight 0.3s ease-in-out; } @keyframes highlight { 0% { opacity: 0.5; } 100% { opacity: 1; } } :root { --bg-light: #ffffff; --text-light: #000000; --bg-dark: #1e1e1e; --text-dark: #ffffff; } body { background-color: var(--bg-light); color: var(--text-light); transition: background-color 0.3s ease, color 0.3s ease; } .dark-mode { background-color: var(--bg-dark); color: var(--text-dark); } #darkModeToggle { font-size: 1.5rem; background: none; border: none; cursor: pointer; transition: transform 0.3s ease-in-out; } #darkModeToggle.active { transform: rotate(180deg); } .error-container { padding: 15px; margin: 10px 0; border-radius: 4px; transition: all 0.3s ease; } .error-container.success { background-color: #4CAF50; color: white; } .error-container.error { background-color: #f44336; color: white; } .purple-border { border: 12px solid purple; } /* ========================================================================== Responsive Design ========================================================================== */ @media (max-width: 768px) { .content-container { padding: 15px; } .tabs { flex-direction: column; } .tab-button { width: 100%; } .tab4-container { flex-direction: column; align-items: flex-start; } .tab4-right { margin-top: 1rem; } } /* Container for the entire search and filter section */ .search-and-filter-container { display: flex; justify-content: space-between; align-items: center; gap: 20px; /* Adds space between the left and right sections */ padding: 10px; background-color: white; min-width:98%; max-width: 1000px; /* Adjust as needed */ margin: 0 auto; /* Center the container */ } /* Left section: Search container */ .course-search-container { display: flex; align-items: center; gap: 10px; /* Adds space between the input and buttons */ flex-grow: 1; /* Allows the search container to take up available space */ } /* Style for the search input */ #courseSearchInput { padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; width: 200px; /* Adjust width as needed */ flex-grow: 1; /* Allows the input to grow and fill space */ } #searchBtn:hover, #resetBtn:hover { background-color: #0056b3; } /* Right section: Filter container */ .filter-container-wrapper-search-courses { display: flex; align-items: center; gap: 10px; /* Adds space between the label and dropdown */ } /* Style for the filter dropdown */ #roleFilter { padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; background-color: white; min-width: 150px; /* Ensures the dropdown has a consistent width */ } /* Autocomplete container */ #autocompleteContainer { position: absolute; background-color: white; top: calc(100% + 2px) !important; border: 1px solid #ccc; border-radius: 4px; width: 100%; max-width: 600px; /* Adjust as needed */ z-index: 1000; display: none; /* Hide by default */ margin-top: 5px; /* Adds space between the input and dropdown */ } /* Autocomplete list items */ .autocomplete-list div { padding: 8px; cursor: pointer; } .autocomplete-list div:hover { background-color: #f1f1f1; } /* ✅ Make the Forms and Buttons Appear in a Row */ .form-container { display: flex; justify-content: space-between; /* Evenly spaces elements */ align-items: center; /* Align items vertically */ gap: 20px; /* Adds space between elements */ padding: 10px; flex-wrap: wrap; /* Prevents items from overlapping on small screens */ } /* ✅ Ensure Forms Take Equal Space */ .form-group { flex: 1; /* Makes each form take equal width */ display: flex; align-items: center; gap: 10px; /* Spacing between form elements */ } /* ✅ Style Inputs and Buttons for Better Layout */ input[type="text"] { padding: 8px; border: 1px solid #ccc; border-radius: 4px; width: 200px; } /* ✅ Make Layout Responsive */ @media screen and (max-width: 768px) { .form-container { flex-direction: column; /* Stack elements on smaller screens */ align-items: stretch; } } /* Add these styles to your CSS file */ /* ✅ Autocomplete dropdown container */ .autocomplete-list { position: absolute; top: 100%; /* Positioned directly below the input */ left: 0; width: 100%; max-height: 300px; overflow-y: auto; border: 1px solid #ddd; border-top: none; background: white; z-index: 1000; box-shadow: 0 4px 8px rgba(0,0,0,0.1); display: none; border-radius: 5px; } .autocomplete-list.visible { display: block; } /* ✅ Individual autocomplete items */ .autocomplete-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #eee; transition: background-color 0.2s ease-in-out; display: flex; flex-direction: column; } .autocomplete-item:hover { background-color: #f0f5ff; } /* ✅ Course name (bold and clear) */ .autocomplete-name { font-weight: bold; color: #333; } /* ✅ Description (lighter text) */ .autocomplete-description { font-size: 0.85em; color: #666; line-height: 1.4; white-space: normal; overflow: hidden; text-overflow: ellipsis; } /* ✅ Ensure input wrapper is positioned properly */ .input-wrapper { position: relative; width: 100%; margin-bottom: 15px; } /* Loading Spinner Styles */ .loading-row { width: 100%; } .loading-cell { padding: 20px; text-align: center; } .loading-container { display: flex; justify-content: center; align-items: center; } .loading-spinner-wrapper { margin-right: 15px; } .loading-spinner { stroke: #007bff; } .loading-text { font-size: 16px; color: #007bff; } .text-center { text-align: center; } .text-danger { color: #dc3545; padding: 20px; } /* Hide elements */ .hidden { display: none !important; } /* Checkbox and Enrol Button Cells */ .checkbox-cell, .enrol-cell { text-align: center; } .checkbox-cell.hidden, .enrol-cell.hidden { display: none !important; } /* Python Cron Job Monitor Styles All styles are namespaced with cron- prefix to avoid conflicts with your existing styles */ /* Only add these if you don't already have tab styles */ /* Cron Monitor Specific Styles */ .cron-monitor-container { font-family: inherit; color: #333; } .cron-monitor-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .cron-monitor-header h2 { margin: 0; font-size: 1.5rem; color: #2c3e50; } .cron-monitor-actions { display: flex; gap: 10px; } .cron-btn { border: none; border-radius: 4px; padding: 8px 16px; font-size: 0.9rem; cursor: pointer; transition: background-color 0.2s, transform 0.1s; font-weight: 500; } .cron-btn:active { transform: translateY(1px); } .refresh-btn { background-color: #3498db; color: white; } .refresh-btn:hover { background-color: #2980b9; } .run-all-btn { background-color: #f39c12; color: white; } .run-all-btn:hover { background-color: #e67e22; } .cron-run-btn { background-color: #2ecc71; color: white; } .cron-run-btn:hover { background-color: #27ae60; } .cron-run-btn:disabled { background-color: #95a5a6; cursor: not-allowed; } .cron-tasks-container { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; } .cron-task-card { background-color: white; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); padding: 15px; transition: transform 0.2s; } .cron-task-card:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); } .cron-task-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .cron-task-name { font-size: 1.1rem; font-weight: bold; color: #2c3e50; } .cron-status-badge { padding: 4px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; } .cron-status-success { background-color: #e8f8f5; color: #27ae60; } .cron-status-failed { background-color: #fdedeb; color: #e74c3c; } .cron-status-unknown { background-color: #f5f5f5; color: #7f8c8d; } .cron-file-path { font-size: 0.85rem; color: #7f8c8d; margin-bottom: 8px; word-break: break-all; } .cron-task-details { font-size: 0.9rem; color: #34495e; margin-bottom: 10px; } .cron-task-output { background-color: #f5f7fa; border-radius: 4px; padding: 12px; font-family: monospace; font-size: 0.85rem; white-space: pre-wrap; word-break: break-all; color: #2c3e50; max-height: 120px; overflow-y: auto; margin-bottom: 12px; border-left: 3px solid #ddd; } .cron-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 0; color: #7f8c8d; } .cron-spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top-color: #3498db; animation: cron-spin 1s ease-in-out infinite; margin-bottom: 10px; } .cron-running-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: cron-spin 1s ease-in-out infinite; margin-left: 5px; vertical-align: middle; } @keyframes cron-spin { to { transform: rotate(360deg); } } .cron-empty-message { text-align: center; color: #7f8c8d; padding: 30px; font-style: italic; } .cron-error-message { background-color: #fdedeb; color: #c0392b; padding: 15px; border-radius: 4px; margin-top: 15px; border-left: 4px solid #e74c3c; } .hidden { display: none !important; } .visible { display: block !important; } .cursor-pointer { cursor: pointer; } /* Custom square tooltip styling */ .square-tooltip { position: relative; cursor: help; } .square-tooltip:hover::after { content: attr(data-tooltip); position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); width: 200px; padding: 6px; background-color: #333; color: white; text-align: center; z-index: 1000; /* Square box with no rounded corners */ border-radius: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.3); } .tab-content { display: none; /* Hide all tabs by default */ } .tab-content.active { display: block; /* Show only the active tab */ } /* Log display styling */ .log-status { padding: 8px; border-radius: 4px; font-size: 0.9em; max-height: 200px; overflow-y: auto; white-space: pre-wrap; } .log-success { background-color: rgba(76, 175, 80, 0.1); border-left: 3px solid #4CAF50; } .log-failed { background-color: rgba(244, 67, 54, 0.1); border-left: 3px solid #F44336; } .log-error { background-color: rgba(244, 67, 54, 0.1); border-left: 3px solid #F44336; } .log-unknown { background-color: rgba(255, 152, 0, 0.1); border-left: 3px solid #FF9800; } .log-details { display: block; margin-top: 5px; font-family: monospace; font-size: 0.85em; } /* Notification styling */ .notification { position: fixed; top: 20px; right: 20px; padding: 10px 20px; border-radius: 4px; color: white; z-index: 1000; animation: fadeIn 0.3s, fadeOut 0.3s 4.7s; box-shadow: 0 2px 10px rgba(0,0,0,0.2); } .notification-close { margin-left: 15px; cursor: pointer; } .notification-success { background-color: #4CAF50; } .notification-error { background-color: #F44336; } .notification-info { background-color: #2196F3; } @keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } @keyframes fadeOut { from {opacity: 1;} to {opacity: 0;} } @media (max-width: 768px) { .button-table td { width: 100%; display: block; } } .autocomplete-list { position: absolute; background-color: white; border: 1px solid #ccc; max-height: 200px; overflow-y: auto; width: 100%; z-index: 1000; padding: 0; margin: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .autocomplete-item { padding: 10px; cursor: pointer; border-bottom: 1px solid #eee; } .autocomplete-item:hover { background-color: #f0f0f0; } .breadcrumb-nav ul { list-style: none; display: flex; flex-wrap: wrap; font-size: 14px; margin: 10px 0; padding: 0; } .breadcrumb-nav li + li::before { content: "›"; margin: 0 8px; color: #999; } .breadcrumb-nav li a { color: #007bff; text-decoration: none; } .breadcrumb-nav li.active { font-weight: bold; color: #333; } .course-suggestions-box { position: absolute; background-color: #fff; border: 1px solid #999; border-radius: 4px; max-height: 200px; overflow-y: auto; width: 100%; z-index: 1000; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); font-size: 14px; } .course-suggestion-item { padding: 10px; cursor: pointer; border-bottom: 1px solid #eee; } .course-suggestion-item:last-child { border-bottom: none; } .course-suggestion-item:hover { background-color: #f2f2f2; } button, .button, .remove-access-button, #submitProxyUser, #resetProxyUser, #resetButton, #reset-instructor, #reset-suffix, #resetUserButton, #resetBtn, #resetButton1, #searchBtn, .logout-button, .login-container .btn, .action-button, #searchButton, #searchCourseButton, .enroll-btn, .bulk-enroll-button, .cron-btn { border: none; border-radius: 5px; padding: 10px 20px; cursor: pointer; min-width: 120px; font-weight: bold; transition: all 0.3s ease; text-align: center; font-size: 14px; height: 40px; /* Consistent height */ display: inline-flex; align-items: center; justify-content: center; } /* Primary Buttons (Green - Search/Submit/Action buttons) */ .action-button, #submitProxyUser, #searchButton, #searchCourseButton, #searchBtn, #searchUserButton, .remove-access-button, .remove-access-all-button, .help-button, .enrol-button, .save-button, .enroll-btn, .bulk-enroll-button, .cron-run-btn { background-color: var(--success-color) !important; color: var(--white) !important; } .action-button:hover, #submitProxyUser:hover, #searchButton:hover, #searchCourseButton:hover, #searchBtn:hover, #searchUserButton:hover, .remove-access-button:hover, .remove-access-all-button:hover, .enrol-button:hover, .save-button:hover, .help-button:hover, .enroll-btn:hover, .bulk-enroll-button:hover, .cron-run-btn:hover { background-color: #006400 !important; /* Darker green */ transform: translateY(-1px) !important; box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important; } /* Reset/Remove Buttons (Orange) */ .remove-access-button, #resetProxyUser, .remove-access-all-button, #resetButton, #resetBtn, #resetButton1, #reset-instructor, #reset-suffix, #resetUserButton { background-color: var(--error-color); color: var(--white); } .remove-access-button:hover, #resetProxyUser:hover, .remove-access-all-button:hover, #resetButton:hover, #resetBtn:hover, #resetButton1:hover, #resetUserButton:hover { background-color: #cc5500; /* Darker orange */ transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.2); } /* Default Buttons (Blue - Primary color) - Updated to exclude help-button */ button:not([class*="action-"]):not([class*="help-"]):not([id*="reset"]):not([id*="search"]), .button:not(.help-button), .logout-button, .login-container .btn, .refresh-btn, .run-all-btn { background-color: var(--primary-color); color: var(--white); button:not([class*="action-"]):not([id*="reset"]):not([id*="search"]):hover, .button:not(.help-button):hover, .button:hover, .logout-button:hover, .login-container .btn:hover, .refresh-btn:hover, .run-all-btn:hover { background-color: var(--secondary-color); transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.2); } /* Disabled State */ button:disabled, .button:disabled { background-color: #cccccc !important; color: #666666 !important; cursor: not-allowed; transform: none !important; box-shadow: none !important; } /* Tab Buttons */ .tab-button { padding: 10px 20px; border: 1px solid var(--border-color); background-color: #f1f1f1; cursor: pointer; border-radius: 5px; border-color: var(--primary-color); color: var(--text-color); font-weight: bold; transition: all 0.3s ease; } .tab-button:hover { background-color: var(--primary-color); color: var(--white); } .tab-button.active { background-color: var(--primary-color); color: var(--white); } /* Help Button */ .help-button { background-color: var(--success-color); color: var(--white); border: none; border-radius: 5px; padding: 10px 20px; cursor: pointer; font-weight: bold; transition: background-color 0.3s ease; } .help-button:hover { background-color: #006400; /* Darker green */ } /* Button Focus States */ button:focus, .button:focus { outline: none; box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.3); } /* Small Buttons (for tighter spaces) */ .button-sm { padding: 5px 10px; min-width: auto; font-size: 12px; } /* Button Icons */ .button-icon { margin-right: 8px; } /* ========================================================================== RESPONSIVE TABLE FIX - Add this to the END of your CSS file This will override all previous table styles and ensure scrolling works ========================================================================== */ /* Remove the conflicting styles at the bottom of your CSS and replace with this: */ /* Container that constrains the table width */ .responsive-table-wrapper { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; display: block !important; box-sizing: border-box !important; border: 1px solid #ddd; /* Optional: adds a border to make the container visible */ } /* Force tables to have a minimum width that triggers overflow */ .responsive-table-wrapper #coursesTable, .responsive-table-wrapper #courseResultsTable, .responsive-table-wrapper #pendingRequestsTable { min-width: 800px !important; /* This forces the scrollbar when screen < 800px */ width: 800px !important; /* Fixed width instead of 100% */ border-collapse: collapse !important; table-layout: fixed !important; margin: 0 !important; } /* Cell styling - prevent text wrapping */ .responsive-table-wrapper table th, .responsive-table-wrapper table td { white-space: nowrap !important; padding: 8px !important; border: 1px solid var(--border-color) !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: center !important; vertical-align: middle !important; } /* Header styling */ .responsive-table-wrapper table thead th { background-color: #f1f1f1 !important; font-weight: bold !important; position: sticky !important; top: 0 !important; z-index: 10 !important; } /* Scrollbar styling */ .responsive-table-wrapper::-webkit-scrollbar { height: 12px !important; } .responsive-table-wrapper::-webkit-scrollbar-track { background-color: #f1f1f1 !important; border-radius: 6px !important; } .responsive-table-wrapper::-webkit-scrollbar-thumb { background-color: #888 !important; border-radius: 6px !important; } .responsive-table-wrapper::-webkit-scrollbar-thumb:hover { background-color: #555 !important; } /* Mobile adjustments */ @media (max-width: 600px) { .responsive-table-wrapper #coursesTable, .responsive-table-wrapper #courseResultsTable, .responsive-table-wrapper #pendingRequestsTable { min-width: 600px !important; width: 600px !important; } } /* Container that enables horizontal scrolling */ .responsive-table-wrapper { width: 100% !important; overflow-x: auto !important; overflow-y: visible !important; display: block !important; box-sizing: border-box !important; border: 1px solid #dee2e6; background-color: #ffffff; border-radius: 4px; } /* Force tables to have minimum width that triggers overflow */ .responsive-table-wrapper > table { width: 100% !important; min-width: 1000px !important; max-width: none !important; table-layout: auto !important; border-collapse: collapse !important; margin: 0 !important; background-color: white; } /* Ensure cells don't wrap and handle overflow properly */ .responsive-table-wrapper table th, .responsive-table-wrapper table td { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; padding: 8px !important; border: 1px solid #dee2e6 !important; text-align: center !important; vertical-align: middle !important; } /* Header styling */ .responsive-table-wrapper table thead th { background-color: #f8f9fa !important; font-weight: bold !important; color: #495057 !important; position: sticky !important; top: 0 !important; z-index: 10 !important; } /* Improved scrollbar styling */ .responsive-table-wrapper::-webkit-scrollbar { height: 8px; } .responsive-table-wrapper::-webkit-scrollbar-track { background-color: #f1f1f1; border-radius: 4px; } .responsive-table-wrapper::-webkit-scrollbar-thumb { background-color: #c1c1c1; border-radius: 4px; } .responsive-table-wrapper::-webkit-scrollbar-thumb:hover { background-color: #a8a8a8; } /* Ensure parent containers don't constrain */ .table-container { width: 100% !important; overflow: visible !important; padding: 0 !important; margin: 10px 0 !important; } /* Mobile responsiveness */ @media (max-width: 768px) { .responsive-table-wrapper > table { width: 800px !important; min-width: 800px !important; } } @media (max-width: 480px) { .responsive-table-wrapper > table { width: 600px !important; min-width: 600px !important; } }; /* ===== Marking page layout (scoped) ===== */ #marking-page .container { max-width: 1100px; margin: 16px auto 24px; padding: 0 12px; } /* Tabs (kill bullets, style like the rest of the app) */ #marking-page .nav-tabs, #marking-page ul.nav, #marking-page .mm-tabs { display: flex; gap: 8px; list-style: none; padding: 0; margin: 12px 0 16px; } #marking-page .nav-tabs li, #marking-page .mm-tabs li { list-style: none; } #marking-page .nav-tabs li a, #marking-page .mm-tabs li a { display: inline-block; padding: 8px 12px; border: 1px solid #cfd3d9; border-radius: 6px; text-decoration: none; color: #0b1f3a; background: #fff; } #marking-page .nav-tabs li.active a, #marking-page .mm-tabs li.active a { background: #112d4e; color: #fff; border-color: #112d4e; } /* Show only the active pane */ #marking-page .tab-content { display: none; } #marking-page .tab-content.active { display: block; } /* Form spacing/consistency */ #marking-page .form-group { margin-bottom: 12px; } #marking-page .form-group label { display: block; font-weight: 600; margin-bottom: 4px; } #marking-page .form-group input[type="text"], #marking-page .form-group select { width: 100%; max-width: 420px; padding: 8px; } /* Tables (match other pages’ responsive wrapper) */ #marking-page .table-container { margin-top: 12px; } #marking-page .responsive-table-wrapper { overflow-x: auto; } /* Buttons (lightweight so they match your app buttons) */ #marking-page .btn { padding: 8px 12px; border: none; border-radius: 6px; cursor: pointer; } #marking-page .btn-primary { background: #0062cc; color: #fff; } #marking-page .btn-success { background: #198754; color: #fff; } #marking-page .btn-outline-secondary { background: transparent; border: 1px solid #6c757d; color: #6c757d; } /* Save box */ #marking-page #save-container { margin-top: 16px; padding: 16px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; } /* Spinner */ #marking-page .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(0,0,0,.3); border-radius: 50%; border-top-color: #000; animation: spin 1s ease-in-out infinite; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* Role badges (tab 2) */ #marking-page .role-badge { padding: 5px 10px; border-radius: 4px; font-weight: 600; display: inline-block; min-width: 100px; text-align: center; } #marking-page .role-first { background-color: #cce5ff; color: #004085; } #marking-page .role-second { background-color: #d4edda; color: #155724; } #marking-page .role-reconciler { background-color: #fff3cd; color: #856404; } /* If your global CSS doesn’t already enforce sticky header/footer, uncomment: .header { position: sticky; top: 0; z-index: 1000; } .footer { position: sticky; bottom: 0; z-index: 999; } */