df10f31f6c
Fix table alignment issue on landing page by rendering simple table rows instead of collapsible project sections inside the tbody. Changes: - Simplify renderSessionsGroupedByProject() to render table rows directly - Add table-layout: fixed to .projects-table for proper column widths - Sort sessions by last activity (newest first) The previous implementation was rendering div elements (project sections) inside the table tbody, which broke the table layout. Table elements only accept tr elements as direct children. Resolves "things don't align" issue on projects table. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
911 lines
18 KiB
CSS
911 lines
18 KiB
CSS
/**
|
|
* Sessions Landing Page Styles
|
|
*/
|
|
|
|
body.sessions-page {
|
|
background: #0d0d0d;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* === Hero Section === */
|
|
.hero-section {
|
|
min-height: 50vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 80px 20px 60px;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 56px;
|
|
font-weight: 700;
|
|
margin: 0 0 16px 0;
|
|
background: linear-gradient(135deg, #4a9eff 0%, #a78bfa 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 20px;
|
|
color: #888;
|
|
margin: 0 0 48px 0;
|
|
}
|
|
|
|
.project-input {
|
|
width: 100%;
|
|
max-width: 600px;
|
|
padding: 18px 24px;
|
|
font-size: 18px;
|
|
background: #1a1a1a;
|
|
border: 2px solid #333;
|
|
border-radius: 12px;
|
|
color: #e0e0e0;
|
|
outline: none;
|
|
transition: all 0.3s ease;
|
|
text-align: center;
|
|
}
|
|
|
|
.project-input:focus {
|
|
border-color: #4a9eff;
|
|
box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.15);
|
|
}
|
|
|
|
.input-status {
|
|
height: 20px;
|
|
margin-top: 12px;
|
|
font-size: 14px;
|
|
color: #ff6b6b;
|
|
}
|
|
|
|
/* === Projects Section === */
|
|
.projects-section {
|
|
padding: 40px 20px 80px;
|
|
border-top: 1px solid #222;
|
|
}
|
|
|
|
.projects-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
max-width: 1200px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.projects-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #e0e0e0;
|
|
margin: 0;
|
|
}
|
|
|
|
.btn-refresh {
|
|
padding: 8px 16px;
|
|
background: #1a1a1a;
|
|
border: 1px solid #333;
|
|
border-radius: 8px;
|
|
color: #e0e0e0;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-refresh:hover {
|
|
background: #252525;
|
|
border-color: #4a9eff;
|
|
}
|
|
|
|
.projects-empty {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
padding: 80px 40px;
|
|
color: #888;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* === Projects Table === */
|
|
.projects-table-wrapper {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background: #1a1a1a;
|
|
border: 1px solid #333;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.projects-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.projects-table thead {
|
|
background: #0d0d0d;
|
|
border-bottom: 1px solid #333;
|
|
}
|
|
|
|
.projects-table th {
|
|
padding: 16px 20px;
|
|
text-align: left;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #888;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.projects-table tbody tr {
|
|
border-bottom: 1px solid #252525;
|
|
transition: background 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.projects-table tbody tr:hover {
|
|
background: #252525;
|
|
}
|
|
|
|
.projects-table tbody tr:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.projects-table td {
|
|
padding: 16px 20px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Column Widths */
|
|
.col-name { width: 40%; }
|
|
.col-activity { width: 25%; }
|
|
.col-status { width: 15%; }
|
|
.col-actions { width: 20%; text-align: right; }
|
|
|
|
/* Project Name */
|
|
.project-name {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #e0e0e0;
|
|
margin: 0;
|
|
}
|
|
|
|
.project-name-input {
|
|
background: #0d0d0d;
|
|
border: 2px solid #4a9eff;
|
|
border-radius: 6px;
|
|
padding: 8px 12px;
|
|
color: #e0e0e0;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
font-family: inherit;
|
|
width: 100%;
|
|
max-width: 300px;
|
|
outline: none;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.project-name-input:focus {
|
|
box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.15);
|
|
}
|
|
|
|
/* Last Activity */
|
|
.last-activity {
|
|
font-size: 14px;
|
|
color: #888;
|
|
}
|
|
|
|
/* Status Badges */
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-badge.active { color: #51cf66; background: rgba(81, 207, 102, 0.15); }
|
|
.status-badge.done { color: #888; background: rgba(136, 136, 136, 0.15); }
|
|
.status-badge.archived { color: #ffa94d; background: rgba(255, 169, 77, 0.15); }
|
|
|
|
/* Buttons */
|
|
.btn-continue {
|
|
padding: 8px 20px;
|
|
background: linear-gradient(135deg, #4a9eff 0%, #a78bfa 100%);
|
|
border: none;
|
|
border-radius: 8px;
|
|
color: white;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-continue:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(74, 158, 255, 0.4);
|
|
}
|
|
|
|
.btn-menu {
|
|
background: #2a2a2a;
|
|
border: 1px solid #444;
|
|
color: #e0e0e0;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 8px;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
margin-left: 8px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-menu:hover {
|
|
background: #3a3a3a;
|
|
border-color: #666;
|
|
}
|
|
|
|
/* Dropdown Menu */
|
|
.dropdown-menu {
|
|
position: absolute;
|
|
background: #2a2a2a;
|
|
border: 1px solid #444;
|
|
border-radius: 8px;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
|
|
z-index: 1000;
|
|
min-width: 180px;
|
|
}
|
|
|
|
.dropdown-menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
background: none;
|
|
border: none;
|
|
color: #e0e0e0;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.dropdown-menu-item:hover { background: #3a3a3a; }
|
|
.dropdown-menu-item:first-child { border-radius: 8px 8px 0 0; }
|
|
.dropdown-menu-item:last-child { border-radius: 0 0 8px 8px; }
|
|
.dropdown-menu-item.danger { color: #ff6b6b; }
|
|
|
|
/* Loading State */
|
|
.loading {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: #888;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.hero-title { font-size: 40px; }
|
|
.hero-subtitle { font-size: 16px; }
|
|
.project-input { font-size: 16px; padding: 14px 20px; }
|
|
|
|
.projects-table th,
|
|
.projects-table td { padding: 12px 16px; }
|
|
.col-actions { display: none; }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.hero-section { padding: 60px 16px 40px; }
|
|
.hero-title { font-size: 32px; }
|
|
.hero-subtitle { font-size: 14px; }
|
|
.project-input { font-size: 14px; padding: 12px 16px; }
|
|
|
|
.projects-section { padding: 24px 16px 60px; }
|
|
.projects-header { flex-direction: column; align-items: flex-start; gap: 12px; }
|
|
|
|
.projects-table thead { display: none; }
|
|
.projects-table tbody { display: flex; flex-direction: column; gap: 12px; }
|
|
.projects-table tr {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid #333;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
gap: 8px;
|
|
}
|
|
.projects-table td {
|
|
padding: 4px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border: none;
|
|
}
|
|
.projects-table td::before {
|
|
content: attr(data-label);
|
|
font-size: 12px;
|
|
color: #888;
|
|
font-weight: 600;
|
|
}
|
|
.col-actions { display: flex; justify-content: flex-end; gap: 8px; }
|
|
}
|
|
|
|
/**
|
|
* Loading Overlay
|
|
*/
|
|
.loading-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10000;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.loading-overlay.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.loading-overlay.visible {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 4px solid #333;
|
|
border-top-color: #4a9eff;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.loading-text {
|
|
margin-top: 20px;
|
|
color: #e0e0e0;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/**
|
|
* Toast Notifications
|
|
*/
|
|
.toast-notification {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
min-width: 300px;
|
|
max-width: 500px;
|
|
padding: 16px 20px;
|
|
background: #2a2a2a;
|
|
border: 1px solid #444;
|
|
border-radius: 8px;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
z-index: 10001;
|
|
opacity: 0;
|
|
transform: translateX(400px);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.toast-notification.visible {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.toast-icon {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
flex-shrink: 0;
|
|
width: 28px;
|
|
height: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.toast-message {
|
|
flex: 1;
|
|
color: #e0e0e0;
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Toast Types */
|
|
.toast-success {
|
|
border-color: #51cf66;
|
|
}
|
|
|
|
.toast-success .toast-icon {
|
|
color: #51cf66;
|
|
background: rgba(81, 207, 102, 0.1);
|
|
}
|
|
|
|
.toast-error {
|
|
border-color: #ff6b6b;
|
|
}
|
|
|
|
.toast-error .toast-icon {
|
|
color: #ff6b6b;
|
|
background: rgba(255, 107, 107, 0.1);
|
|
}
|
|
|
|
.toast-info {
|
|
border-color: #4a9eff;
|
|
}
|
|
|
|
.toast-info .toast-icon {
|
|
color: #4a9eff;
|
|
background: rgba(74, 158, 255, 0.1);
|
|
}
|
|
|
|
.toast-warning {
|
|
border-color: #ffa94d;
|
|
}
|
|
|
|
.toast-warning .toast-icon {
|
|
color: #ffa94d;
|
|
background: rgba(255, 169, 77, 0.1);
|
|
}
|
|
|
|
/* Responsive Toast */
|
|
@media (max-width: 768px) {
|
|
.toast-notification {
|
|
top: 10px;
|
|
right: 10px;
|
|
left: 10px;
|
|
min-width: auto;
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Project Section Styles
|
|
*/
|
|
.project-section {
|
|
border-bottom: 1px solid #333;
|
|
}
|
|
|
|
.project-section:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Project Section Header */
|
|
.project-section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 16px 20px;
|
|
background: #151515;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.project-section-header:hover {
|
|
background: #1a1a1a;
|
|
}
|
|
|
|
.project-section-toggle {
|
|
font-size: 12px;
|
|
color: #888;
|
|
transition: transform 0.2s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.project-section-icon {
|
|
font-size: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.project-section-name {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #e0e0e0;
|
|
flex: 1;
|
|
}
|
|
|
|
.project-section-count {
|
|
font-size: 13px;
|
|
color: #888;
|
|
font-weight: 500;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Project Section Sessions Container */
|
|
.project-section-sessions {
|
|
display: block;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.project-section.collapsed .project-section-sessions {
|
|
display: none;
|
|
}
|
|
|
|
/* Session Rows within Project Sections */
|
|
.session-row {
|
|
border-bottom: 1px solid #252525;
|
|
transition: background 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.session-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.session-row:hover {
|
|
background: #252525;
|
|
}
|
|
|
|
/* Session Project Badge */
|
|
.session-project-badge {
|
|
display: inline-block;
|
|
margin-top: 4px;
|
|
padding: 3px 8px;
|
|
background: rgba(74, 158, 255, 0.15);
|
|
color: #4a9eff;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Unassigned Section Special Styling */
|
|
.unassigned-section .project-section-header {
|
|
background: #1a1a1a;
|
|
border-top: 1px solid #333;
|
|
}
|
|
|
|
.unassigned-section .project-section-header:hover {
|
|
background: #222;
|
|
}
|
|
|
|
/* Collapsed state */
|
|
.project-section.collapsed .project-section-toggle {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
/* Responsive Design for Project Sections */
|
|
@media (max-width: 768px) {
|
|
.project-section-header {
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.project-section-toggle {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.project-section-icon {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.project-section-name {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.project-section-count {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.session-project-badge {
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Session Context Menu
|
|
*/
|
|
.session-context-menu {
|
|
position: fixed;
|
|
background: #2a2a2a;
|
|
border: 1px solid #444;
|
|
border-radius: 8px;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
|
|
z-index: 10000;
|
|
min-width: 280px;
|
|
max-width: 400px;
|
|
overflow: hidden;
|
|
animation: contextMenuFadeIn 0.15s ease;
|
|
}
|
|
|
|
@keyframes contextMenuFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.context-menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
color: #e0e0e0;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease;
|
|
user-select: none;
|
|
}
|
|
|
|
.context-menu-item:hover {
|
|
background: #3a3a3a;
|
|
}
|
|
|
|
.context-menu-item:first-child {
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
|
|
.context-menu-item:last-child {
|
|
border-radius: 0 0 8px 8px;
|
|
}
|
|
|
|
.context-menu-icon {
|
|
font-size: 18px;
|
|
flex-shrink: 0;
|
|
width: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
.context-menu-text {
|
|
flex: 1;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.context-menu-divider {
|
|
height: 1px;
|
|
background: #444;
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.context-menu-label {
|
|
padding: 8px 16px 4px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: #888;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Context Menu Suggestions */
|
|
.context-menu-suggestion {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
padding: 10px 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.context-menu-suggestion-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.context-menu-suggestion .context-menu-text {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.context-menu-reason {
|
|
font-size: 12px;
|
|
color: #888;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.context-menu-score {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #4a9eff;
|
|
flex-shrink: 0;
|
|
background: rgba(74, 158, 255, 0.15);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* High score styling */
|
|
.context-menu-score.high-score {
|
|
color: #51cf66;
|
|
background: rgba(81, 207, 102, 0.15);
|
|
}
|
|
|
|
/* Medium score styling */
|
|
.context-menu-score.medium-score {
|
|
color: #ffd43b;
|
|
background: rgba(255, 212, 59, 0.15);
|
|
}
|
|
|
|
/**
|
|
* All Projects Modal
|
|
*/
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10001;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.modal-overlay.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.all-projects-modal {
|
|
background: #1a1a1a;
|
|
border: 1px solid #333;
|
|
border-radius: 12px;
|
|
width: 90%;
|
|
max-width: 500px;
|
|
max-height: 80vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
|
|
transform: scale(0.95);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.modal-overlay.visible .all-projects-modal {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20px 24px;
|
|
border-bottom: 1px solid #333;
|
|
background: #151515;
|
|
}
|
|
|
|
.modal-header h2 {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #e0e0e0;
|
|
margin: 0;
|
|
}
|
|
|
|
.modal-close {
|
|
background: none;
|
|
border: none;
|
|
color: #888;
|
|
font-size: 28px;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
transition: all 0.2s ease;
|
|
line-height: 1;
|
|
}
|
|
|
|
.modal-close:hover {
|
|
background: #2a2a2a;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 20px 24px;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.modal-info {
|
|
font-size: 14px;
|
|
color: #888;
|
|
margin: 0 0 16px 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.projects-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.project-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
background: #252525;
|
|
border: 1px solid #333;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.project-option:hover {
|
|
background: #2a2a2a;
|
|
border-color: #4a9eff;
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.project-option-icon {
|
|
font-size: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.project-option-name {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.project-option-arrow {
|
|
font-size: 18px;
|
|
color: #888;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.no-projects {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: #888;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Responsive Design for Modal */
|
|
@media (max-width: 768px) {
|
|
.all-projects-modal {
|
|
width: 95%;
|
|
max-height: 85vh;
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
.modal-header h2 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
.project-option {
|
|
padding: 10px 14px;
|
|
}
|
|
}
|