234 lines
5 KiB
CSS
234 lines
5 KiB
CSS
@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;
|
|
}
|
|
}
|