181 lines
3.0 KiB
CSS
181 lines
3.0 KiB
CSS
/* Grid Layout Styles for ClaudeCodeSession */
|
|
|
|
/* Base layout classes */
|
|
.mobile-layout {
|
|
@apply relative;
|
|
}
|
|
|
|
.tablet-layout {
|
|
@apply relative;
|
|
}
|
|
|
|
.desktop-layout {
|
|
@apply relative;
|
|
}
|
|
|
|
.widescreen-layout {
|
|
@apply relative;
|
|
}
|
|
|
|
/* Compact mode adjustments */
|
|
.compact-mode {
|
|
@apply text-sm;
|
|
}
|
|
|
|
.compact-mode .floating-prompt-input {
|
|
@apply h-10;
|
|
}
|
|
|
|
.compact-mode .message-container {
|
|
@apply py-2;
|
|
}
|
|
|
|
/* Panel transitions */
|
|
.panel-transition {
|
|
transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Mobile panel overlays */
|
|
@media (max-width: 639px) {
|
|
.mobile-panel-overlay {
|
|
@apply fixed inset-0 bg-black/50 z-40;
|
|
}
|
|
|
|
.mobile-panel {
|
|
@apply fixed inset-y-0 z-50 bg-background shadow-2xl;
|
|
max-width: 85vw;
|
|
}
|
|
|
|
.mobile-panel-left {
|
|
@apply left-0;
|
|
}
|
|
|
|
.mobile-panel-right {
|
|
@apply right-0;
|
|
}
|
|
}
|
|
|
|
/* Tablet adjustments */
|
|
@media (min-width: 640px) and (max-width: 1023px) {
|
|
.tablet-sidebar {
|
|
width: min(320px, 40vw);
|
|
}
|
|
}
|
|
|
|
/* Desktop grid layout */
|
|
@media (min-width: 1024px) {
|
|
.desktop-grid {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
height: 100%;
|
|
}
|
|
|
|
.desktop-content-grid {
|
|
display: grid;
|
|
gap: 0;
|
|
height: 100%;
|
|
transition: grid-template-columns 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
}
|
|
|
|
/* Widescreen optimizations */
|
|
@media (min-width: 1536px) {
|
|
.widescreen-content {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
/* Resize handle styles */
|
|
.resize-handle {
|
|
@apply absolute top-0 bottom-0 w-1 cursor-col-resize;
|
|
@apply hover:bg-primary/20 transition-colors;
|
|
}
|
|
|
|
.resize-handle:active {
|
|
@apply bg-primary/30;
|
|
}
|
|
|
|
.resize-handle-left {
|
|
@apply right-0;
|
|
}
|
|
|
|
.resize-handle-right {
|
|
@apply left-0;
|
|
}
|
|
|
|
/* Panel content scrolling */
|
|
.panel-content {
|
|
@apply h-full overflow-y-auto;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.panel-content::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.panel-content::-webkit-scrollbar-track {
|
|
@apply bg-transparent;
|
|
}
|
|
|
|
.panel-content::-webkit-scrollbar-thumb {
|
|
@apply bg-muted-foreground/20 rounded-full;
|
|
}
|
|
|
|
.panel-content::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-muted-foreground/30;
|
|
}
|
|
|
|
/* Animation classes */
|
|
@keyframes slideInLeft {
|
|
from {
|
|
transform: translateX(-100%);
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
transform: translateX(100%);
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideOutLeft {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
@keyframes slideOutRight {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
.animate-slide-in-left {
|
|
animation: slideInLeft 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.animate-slide-in-right {
|
|
animation: slideInRight 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.animate-slide-out-left {
|
|
animation: slideOutLeft 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.animate-slide-out-right {
|
|
animation: slideOutRight 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
} |