fleetcode/styles.css
Anish Lakhwara f75c054e65 update
2025-11-08 21:58:34 -08:00

507 lines
10 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;
}
/* 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-actions {
@apply flex items-center gap-3;
}
.btn-merge {
@apply px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded font-medium transition-colors;
}
.btn-merge:disabled {
@apply bg-gray-700 text-gray-500 cursor-not-allowed;
}
.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 transition-all duration-300 relative;
}
.diff-file-list.collapsed {
@apply w-12 overflow-hidden;
}
.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-sidebar-toggle {
@apply sticky top-0 left-0 w-full bg-gray-700 hover:bg-gray-600 text-gray-300 py-2 px-3 text-sm font-mono transition-colors z-10 border-b border-gray-600 flex items-center justify-center;
}
.diff-file-list.collapsed .diff-sidebar-toggle {
@apply px-0;
}
.toggle-collapse {
@apply inline-block;
}
.diff-file-list.collapsed .toggle-collapse {
@apply hidden;
}
.toggle-expand {
@apply hidden;
}
.diff-file-list.collapsed .toggle-expand {
@apply inline-block;
}
@media (min-width: 768px) {
.diff-sidebar-toggle {
@apply hidden;
}
.diff-file-list.collapsed {
@apply w-80;
}
}
.diff-display {
@apply flex-1 overflow-auto bg-gray-900 p-4 relative;
}
.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;
}
}
}