SillyTavern_replica/frontend/src/index.css

/* Import global styles */
@import './styles/variables.css';
@import './styles/reset.css';
@import './styles/z-index.css'; /* ✅ Z-Index 层级规范 */
@import './styles/context-menu.css'; /* ✅ 右键菜单通用样式 */

/* ==================== Main Layout ==================== */
.app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body); /* 全局使用微软雅黑 */
  overflow: hidden;
}

.main-container {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
  min-width: 0;
  gap: 0; /* Panels have their own borders */
  padding: 0;
  margin-top: 0; /* Ensure panels start from top */
}

.main-container.placeholder-container,
.main-container.studio-container {
  flex-direction: column;
}

.main-container.studio-container {
  display: flex;
  min-height: 0;
}

/* Smooth transitions for theme changes - only apply to specific properties */
.app {
  transition: background-color var(--transition-normal), 
              color var(--transition-normal);
}

.app * {
  /* Remove global transition to improve performance */
}

/* ==================== Panel Layout - Proportional Ratio ==================== */

/* CSS Variables for layout ratios */
:root {
  /* Fixed mode (default): 2 : 6 : 2 */
  --left-fixed: 2fr;
  --middle-fixed: 6fr;
  --right-fixed: 2fr;
  
  /* Expanded mode: 4 : 4.5 : 1.5 */
  --left-expanded: 4fr;
  --middle-expanded: 4.5fr;
  --right-expanded: 1.5fr;
}

.main-container {
  display: grid;
  flex: 1;
  overflow: hidden;
  position: relative;
  min-width: 0;
  gap: 0; /* Panels have their own borders */
  padding: 0;
  margin-top: 0; /* Ensure panels start from top */
  transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Wrapper containers for hover detection */
.sidebar-left-wrapper,
.chat-area-wrapper,
.sidebar-right-wrapper {
  min-width: 0;
  min-height: 0; /* 允许 flex/grid 收缩 */
  overflow: hidden;
  display: flex; /* 确保子元素可以占满高度 */
  flex-direction: column;
  transition: flex-basis 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fixed mode (default): 2 : 6 : 2 */
.app.chat-mode .main-container,
.sidebar-mode-fixed ~ .chat-area-wrapper {
  grid-template-columns: var(--left-fixed) var(--middle-fixed) var(--right-fixed);
}

/* Expanded mode: 4 : 4.5 : 1.5 */
.app.edit-mode .main-container,
.sidebar-mode-expanded,
.sidebar-mode-smart.sidebar-expanded {
  grid-template-columns: var(--left-expanded) var(--middle-expanded) var(--right-expanded) !important;
}

.sidebar-left {
  min-width: 0;
  max-width: none;
  background-color: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-normal);
}

/* Highlight left sidebar in edit mode */
.app.edit-mode .sidebar-left {
  box-shadow: 2px 0 8px rgba(102, 126, 234, 0.15);
}

.chat-area {
  flex: 1; /* 占据 wrapper 的全部高度 */
  min-width: 0;
  min-height: 0; /* 允许 flex 收缩 */
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-primary);
  overflow: hidden;
  position: relative;
}

/* Subtle gradient background for visual interest */
.chat-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(109, 140, 255, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(109, 140, 255, 0.03) 0%, transparent 50%),
    linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-subtle) 100%);
  pointer-events: none;
  z-index: var(--z-background); /* ✅ 基础层 - 背景 */
}

.chat-area > * {
  position: relative;
  z-index: var(--z-base-content); /* ✅ 基础层 - 内容 */
}

.sidebar-right {
  min-width: 0;
  max-width: none;
  background-color: var(--color-bg-secondary);
  border-left: 1px solid var(--color-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-normal);
}

/* Slightly fade right sidebar in edit mode */
.app.edit-mode .sidebar-right {
  opacity: 0.85;
}

/* Custom scrollbar for webkit browsers */
.sidebar-left::-webkit-scrollbar,
.sidebar-right::-webkit-scrollbar {
  width: 6px;
}

.sidebar-left::-webkit-scrollbar-track,
.sidebar-right::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-left::-webkit-scrollbar-thumb,
.sidebar-right::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar);
  border-radius: var(--radius-full);
}

.sidebar-left::-webkit-scrollbar-thumb:hover,
.sidebar-right::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-scrollbar-hover);
}

/* ==================== Responsive Breakpoints ==================== */

/* Large screens (>1920px) - Add minimum width constraints */
@media (min-width: 1920px) {
  .app.chat-mode .main-container,
  .sidebar-mode-fixed ~ .chat-area-wrapper {
    grid-template-columns: minmax(320px, var(--left-fixed)) var(--middle-fixed) minmax(320px, var(--right-fixed));
  }
  
  .app.edit-mode .main-container,
  .sidebar-mode-expanded,
  .sidebar-mode-smart.sidebar-expanded {
    grid-template-columns: minmax(450px, var(--left-expanded)) var(--middle-expanded) minmax(200px, var(--right-expanded)) !important;
  }
}

/* Medium screens (1024px - 1439px) - Compress ratios */
@media (min-width: 1024px) and (max-width: 1439px) {
  :root {
    --left-chat: 0.9fr;
    --middle-chat: 3.8fr;
    --right-chat: 1.1fr;
    
    --left-edit: 1.3fr;
    --middle-edit: 2.7fr;
    --right-edit: 0.9fr;
  }
}

/* Small screens (<1024px) - Hide right sidebar */
@media (max-width: 1023px) {
  .app.chat-mode .main-container,
  .app.edit-mode .main-container,
  .sidebar-mode-fixed ~ .chat-area-wrapper,
  .sidebar-mode-expanded,
  .sidebar-mode-smart.sidebar-expanded {
    grid-template-columns: 1fr 3fr;
  }
  
  .sidebar-right {
    display: none;
  }
}

/* Mobile/Tablet (<768px) - Single column layout */
@media (max-width: 767px) {
  .main-container {
    grid-template-columns: 1fr;
  }
  
  .sidebar-left,
  .sidebar-right {
    display: none;
  }
}