fleetcode/styles.css
Amrit Subramanian d25d969dde Add worktree path display to session sidebar
Shows the worktree directory path below each session name in the sidebar with subtle gray text to help users identify where each session's files are located.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-07 15:02:14 -04:00

228 lines
4.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 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-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;
}
.session-worktree-path {
@apply text-xs text-gray-500 truncate block mt-0.5;
}
/* 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;
}
}