fleetcode/styles.css
Amrit Subramanian f61aca9d09 session config
2025-10-02 20:20:05 -04:00

142 lines
2.8 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;
}
.sidebar-title {
@apply text-white font-semibold text-lg;
}
.sidebar-content {
@apply flex-1 overflow-y-auto;
}
.sidebar-section {
@apply p-2;
}
.sidebar-section-title {
@apply text-xs text-gray-400 px-2 py-1 mb-1;
}
.sidebar-footer {
@apply p-3 border-t border-gray-700;
}
/* 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-close-btn {
@apply text-gray-500 hover:text-red-500 ml-2;
opacity: 0;
transition: opacity 0.2s;
}
.session-list-item:hover .session-close-btn {
opacity: 1;
}
/* 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-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;
}
.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;
}
.btn-secondary {
@apply bg-gray-600 hover:bg-gray-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;
}
}