@tailwind base; @tailwind components; @tailwind utilities; @layer components { /* Sidebar Styles */ .sidebar { @apply w-64 bg-gray-800 border-r border-gray-700 flex flex-col; } .sidebar-header { @apply p-4 border-b border-gray-700 flex items-center justify-between; } .sidebar-title { @apply text-white font-semibold text-lg; } .settings-btn { @apply text-gray-400 hover:text-white hover:bg-gray-700 text-lg w-8 h-8 flex items-center justify-center rounded transition-all; } .sidebar-content { @apply flex-1 overflow-y-auto; } .sidebar-section { @apply p-2; } .sidebar-section-header { @apply flex items-center justify-between px-2 py-1 mb-1; } .sidebar-section-title { @apply text-xs text-gray-400; } .section-add-btn { @apply text-gray-400 hover:text-white hover:bg-gray-700 text-sm w-5 h-5 flex items-center justify-center rounded transition-all; } .loading-spinner { @apply inline-block w-3 h-3 border-2 border-gray-400 border-t-transparent rounded-full; animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Session List Item */ .session-list-item { @apply mb-3 px-3 py-2 rounded cursor-pointer hover:bg-gray-700 text-gray-300 text-sm flex items-center justify-between; } .session-list-item.active { @apply bg-gray-700; } .session-indicator { @apply w-2 h-2 rounded-full bg-gray-600; transition: background-color 0.2s; } .session-indicator.active { @apply bg-green-500; } .session-indicator.disconnected { @apply bg-red-500; } .session-delete-btn { @apply text-gray-500 hover:text-red-500 ml-2; opacity: 0; transition: opacity 0.2s; } .session-list-item:hover .session-delete-btn { opacity: 1; } .session-name-container { min-width: 0; } .session-name-text { cursor: pointer; } .session-name-text:hover { @apply text-gray-100; } .session-name-input { @apply bg-gray-700 border border-gray-600 rounded px-1 py-0 text-gray-100 text-sm focus:outline-none focus:border-blue-500; min-width: 80px; } /* Tabs */ .tabs-container { @apply flex bg-gray-900 border-b border-gray-700 overflow-x-auto; } .tab { @apply px-4 py-2 border-r border-gray-700 cursor-pointer hover:bg-gray-800 flex items-center space-x-2 min-w-max; } .tab.active { @apply bg-gray-800 border-b-2 border-blue-500; } .unread-indicator { display: none; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; } .tab.unread .unread-indicator { display: inline-block; background-color: #3b82f6; } .tab.activity .unread-indicator { display: inline-block; border: 2px solid #eab308; border-top-color: transparent; background-color: transparent; animation: spin 1s linear infinite; } .tab-name { @apply text-sm text-gray-300; } .tab-close-btn { @apply text-gray-500 hover:text-red-500; } /* Button */ .btn-primary { @apply w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition; } /* Session Container */ .session-wrapper { @apply absolute inset-0 hidden; } .session-wrapper.active { @apply block; } /* Modal */ .modal-overlay { @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50; } .modal-overlay.hidden { display: none; } .modal { @apply bg-gray-800 rounded-lg shadow-xl w-full max-w-md p-6; } .modal-title { @apply text-xl font-semibold text-white mb-4; } .form-group { @apply mb-4; } .form-label { @apply block text-sm font-medium text-gray-300 mb-2; } .form-input { @apply w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:outline-none focus:border-blue-500; font-family: inherit; resize: vertical; } .form-select { @apply w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:outline-none focus:border-blue-500; } .form-checkbox { @apply w-4 h-4 rounded border-gray-600 bg-gray-700 text-blue-600 focus:ring-blue-500 focus:ring-2 cursor-pointer; } .color-input { @apply bg-gray-700 border border-gray-600 rounded px-2 py-1 h-10 w-20 cursor-pointer; } .btn-secondary { @apply bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded text-sm font-medium transition; } .btn-danger { @apply bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded text-sm font-medium transition; } .btn-group { @apply flex justify-end space-x-3 mt-6; } .directory-input-group { @apply flex space-x-2; } .directory-input-group .form-input { @apply flex-1; } .btn-icon { @apply bg-gray-600 hover:bg-gray-700 text-white px-3 py-2 rounded text-sm font-medium transition; } .btn-primary.loading { @apply opacity-75 cursor-not-allowed; } .btn-primary.loading .loading-spinner { @apply border-white border-t-transparent; } /* Mobile Menu */ .mobile-menu-btn { @apply fixed top-4 left-4 z-50 bg-gray-800 text-white p-2 rounded shadow-lg; @apply flex flex-col justify-center items-center w-10 h-10; @apply hover:bg-gray-700 transition-colors; display: none; } .hamburger-line { @apply bg-white w-6 h-0.5 mb-1 last:mb-0 transition-all; } .mobile-menu-btn.active .hamburger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); } .mobile-menu-btn.active .hamburger-line:nth-child(2) { opacity: 0; } .mobile-menu-btn.active .hamburger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .mobile-overlay { @apply fixed inset-0 bg-black bg-opacity-50 z-40 hidden; } .mobile-overlay.active { display: block; } /* Mobile Responsive Styles */ @media (max-width: 768px) { .mobile-menu-btn { display: flex; } .sidebar { @apply fixed top-0 left-0 bottom-0 z-50 transform -translate-x-full transition-transform duration-300; width: 80vw; max-width: 300px; } .sidebar.mobile-open { @apply translate-x-0; } .tabs-container { @apply text-xs; padding-left: 50px; /* Space for hamburger menu */ } .tab { @apply px-2 py-1.5 text-xs; } .tab-name { @apply text-xs; } .modal { @apply max-w-[90vw] mx-4; } /* Make modals scrollable on mobile */ .modal-overlay { @apply items-start pt-4 overflow-y-auto; } } /* Tablet */ @media (min-width: 769px) and (max-width: 1024px) { .sidebar { @apply w-48; } .tab { @apply px-3 py-1.5 text-sm; } } /* Small mobile devices */ @media (max-width: 480px) { .sidebar { width: 85vw; } .sidebar-title { @apply text-base; } .session-list-item { @apply text-xs py-1.5; } .form-input, .form-select { @apply text-sm; } .modal-title { @apply text-lg; } } /* Diff Viewer Styles */ .diff-viewer-modal { @apply bg-gray-900 rounded-lg shadow-xl flex flex-col; width: 95vw; height: 90vh; max-width: 1400px; } .diff-viewer-header { @apply flex items-center justify-between p-4 border-b border-gray-700; } .diff-viewer-close { @apply text-gray-400 hover:text-white text-3xl font-bold w-10 h-10 flex items-center justify-center rounded transition-colors hover:bg-gray-800; } .diff-viewer-content { @apply flex flex-1 overflow-hidden; } .diff-file-list { @apply w-80 border-r border-gray-700 overflow-y-auto bg-gray-800; } .diff-loading { @apply p-4 text-gray-400 text-center; } .diff-file-item { @apply px-4 py-3 border-b border-gray-700 cursor-pointer hover:bg-gray-700 transition-colors; } .diff-file-item.active { @apply bg-gray-700; } .diff-file-path { @apply text-sm text-gray-200 mb-1 break-all; } .diff-file-stats { @apply flex items-center space-x-2 text-xs; } .diff-file-status { @apply px-2 py-0.5 rounded text-xs font-medium; } .diff-file-status.added { @apply bg-green-900 text-green-300; } .diff-file-status.modified { @apply bg-blue-900 text-blue-300; } .diff-file-status.deleted { @apply bg-red-900 text-red-300; } .diff-file-status.renamed { @apply bg-purple-900 text-purple-300; } .diff-file-additions { @apply text-green-400; } .diff-file-deletions { @apply text-red-400; } .diff-display { @apply flex-1 overflow-auto bg-gray-900 p-4; } .diff-empty { @apply text-gray-500 text-center p-8; } .diff-content { @apply text-sm; } /* Pierre.js diff styles */ .diff-content .pierre-diff { @apply font-mono text-xs; } .diff-content .pierre-diff .line-number { @apply text-gray-500 select-none; } .diff-content .pierre-diff .line-addition { @apply bg-green-900 bg-opacity-30; } .diff-content .pierre-diff .line-deletion { @apply bg-red-900 bg-opacity-30; } .view-diff-btn { @apply ml-2 text-xs bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded transition-colors; } @media (max-width: 768px) { .diff-viewer-modal { width: 100vw; height: 100vh; @apply rounded-none; } .diff-file-list { @apply w-64; } } }