@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 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; opacity: 0; transition: opacity 0.2s; } .session-list-item:hover .session-delete-btn { opacity: 1; } .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; } .tab.unread .tab-name::after { content: ''; display: inline-block; width: 6px; height: 6px; background-color: #3b82f6; border-radius: 50%; margin-left: 6px; vertical-align: middle; } .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; } }