markupr 2.1.8

package/src/renderer/components/settings/settingsStyles.ts

@@ -0,0 +1,673 @@
+/**
+ * Settings Panel Styles
+ *
+ * Shared style definitions used across all settings primitives and tab components.
+ */
+
+import type React from 'react';
+
+export type ExtendedCSSProperties = React.CSSProperties & {
+  WebkitAppRegion?: 'drag' | 'no-drag';
+};
+
+export const styles: Record<string, ExtendedCSSProperties> = {
+  // Overlay & Panel
+  overlay: {
+    position: 'fixed',
+    inset: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 100,
+    padding: 12,
+  },
+
+  backdrop: {
+    position: 'absolute',
+    inset: 0,
+    backgroundColor: 'rgba(5, 8, 15, 0.44)',
+    backdropFilter: 'blur(8px)',
+    WebkitBackdropFilter: 'blur(8px)',
+  },
+
+  panel: {
+    position: 'relative',
+    width: '100%',
+    maxWidth: 940,
+    maxHeight: '92vh',
+    backgroundColor: 'rgba(14, 19, 29, 0.92)',
+    borderRadius: 16,
+    boxShadow: '0 24px 56px rgba(2, 6, 14, 0.62), 0 0 0 1px rgba(145, 160, 186, 0.24)',
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+    transition: 'opacity 0.3s ease, transform 0.3s ease',
+    WebkitAppRegion: 'no-drag',
+  },
+
+  // Header
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '20px 24px',
+    borderBottom: '1px solid rgba(145, 160, 186, 0.24)',
+    WebkitAppRegion: 'drag',
+  },
+
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: 600,
+    color: 'var(--text-primary)',
+    margin: 0,
+  },
+
+  headerTitleWrap: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 10,
+  },
+
+  byokBadge: {
+    border: '1px solid rgba(245, 158, 11, 0.4)',
+    backgroundColor: 'rgba(245, 158, 11, 0.16)',
+    color: 'var(--status-warning)',
+    fontSize: 11,
+    fontWeight: 600,
+    borderRadius: 999,
+    padding: '4px 10px',
+    cursor: 'pointer',
+    whiteSpace: 'nowrap',
+  },
+
+  closeButton: {
+    width: 32,
+    height: 32,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'transparent',
+    border: 'none',
+    borderRadius: 8,
+    color: 'var(--text-tertiary)',
+    cursor: 'pointer',
+    transition: 'all 0.2s ease',
+    WebkitAppRegion: 'no-drag',
+  },
+
+  // Content
+  content: {
+    display: 'flex',
+    flex: 1,
+    overflow: 'hidden',
+    minHeight: 0,
+  },
+
+  // Sidebar
+  sidebar: {
+    width: 200,
+    padding: '16px 12px',
+    borderRight: '1px solid rgba(145, 160, 186, 0.2)',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+    flexShrink: 0,
+  },
+
+  sidebarCompact: {
+    width: '100%',
+    borderRight: 'none',
+    borderBottom: '1px solid rgba(145, 160, 186, 0.24)',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 6,
+    padding: '12px',
+  },
+
+  tabButton: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 10,
+    width: '100%',
+    padding: '10px 12px',
+    backgroundColor: 'transparent',
+    border: '1px solid transparent',
+    borderRadius: 8,
+    color: 'var(--text-tertiary)',
+    fontSize: 14,
+    fontWeight: 500,
+    cursor: 'pointer',
+    transition: 'all 0.15s ease',
+    textAlign: 'left',
+  },
+
+  tabButtonCompact: {
+    width: 'auto',
+    flex: '1 1 calc(50% - 6px)',
+    justifyContent: 'center',
+  },
+
+  tabLabel: {
+    flex: 1,
+  },
+
+  // Tab Panel
+  tabPanel: {
+    flex: 1,
+    overflow: 'auto',
+    padding: 24,
+    minHeight: 0,
+  },
+
+  tabPanelCompact: {
+    padding: 16,
+  },
+
+  tabContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 32,
+  },
+
+  // Section
+  section: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 16,
+  },
+
+  sectionHeader: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    gap: 12,
+  },
+
+  sectionTitle: {
+    fontSize: 14,
+    fontWeight: 600,
+    color: 'var(--text-secondary)',
+    margin: 0,
+    textTransform: 'uppercase',
+    letterSpacing: '0.05em',
+  },
+
+  sectionDescription: {
+    fontSize: 13,
+    color: 'var(--text-tertiary)',
+    marginTop: 2,
+  },
+
+  sectionContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 12,
+    backgroundColor: 'rgba(18, 25, 37, 0.82)',
+    borderRadius: 12,
+    padding: 16,
+    border: '1px solid rgba(145, 160, 186, 0.2)',
+  },
+
+  resetSectionButton: {
+    width: 28,
+    height: 28,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'transparent',
+    border: '1px solid rgba(145, 160, 186, 0.34)',
+    borderRadius: 6,
+    color: 'var(--text-tertiary)',
+    cursor: 'pointer',
+    transition: 'all 0.15s ease',
+    flexShrink: 0,
+  },
+
+  // Setting Row
+  settingRow: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    gap: 16,
+    minHeight: 40,
+    flexWrap: 'wrap',
+  },
+
+  settingRowVertical: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 12,
+  },
+
+  settingInfo: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 2,
+    flex: 1,
+  },
+
+  settingLabel: {
+    fontSize: 14,
+    fontWeight: 500,
+    color: 'var(--text-primary)',
+  },
+
+  settingDescription: {
+    fontSize: 12,
+    color: 'var(--text-tertiary)',
+    lineHeight: 1.4,
+  },
+
+  // Toggle
+  toggle: {
+    width: 44,
+    height: 24,
+    borderRadius: 12,
+    border: 'none',
+    padding: 0,
+    cursor: 'pointer',
+    transition: 'background-color 0.2s ease',
+    position: 'relative',
+    flexShrink: 0,
+  },
+
+  toggleKnob: {
+    position: 'absolute',
+    top: 2,
+    width: 20,
+    height: 20,
+    borderRadius: '50%',
+    backgroundColor: 'var(--text-inverse)',
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
+    transition: 'transform 0.2s ease',
+  },
+
+  // Select
+  select: {
+    minWidth: 180,
+    padding: '8px 12px',
+    backgroundColor: 'rgba(12, 18, 29, 0.84)',
+    border: '1px solid rgba(145, 160, 186, 0.34)',
+    borderRadius: 8,
+    color: 'var(--text-primary)',
+    fontSize: 13,
+    cursor: 'pointer',
+    transition: 'border-color 0.2s ease',
+    maxWidth: '100%',
+  },
+
+  // Slider
+  sliderContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 12,
+    minWidth: 220,
+    maxWidth: 320,
+    width: '100%',
+  },
+
+  sliderValue: {
+    fontSize: 13,
+    fontWeight: 500,
+    color: 'var(--text-link)',
+    minWidth: 48,
+    textAlign: 'right',
+    fontVariantNumeric: 'tabular-nums',
+  },
+
+  slider: {
+    width: 120,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: 'rgba(124, 137, 160, 0.42)',
+    cursor: 'pointer',
+  },
+
+  // Directory Picker
+  directoryPicker: {
+    display: 'flex',
+    gap: 8,
+    minWidth: 0,
+    width: '100%',
+  },
+
+  directoryInput: {
+    flex: 1,
+    padding: '8px 12px',
+    backgroundColor: 'rgba(12, 18, 29, 0.84)',
+    border: '1px solid rgba(145, 160, 186, 0.34)',
+    borderRadius: 8,
+    color: 'var(--text-primary)',
+    fontSize: 13,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    minWidth: 0,
+  },
+
+  browseButton: {
+    padding: '8px 12px',
+    backgroundColor: 'rgba(124, 137, 160, 0.14)',
+    border: '1px solid rgba(145, 160, 186, 0.34)',
+    borderRadius: 8,
+    color: 'var(--text-primary)',
+    fontSize: 13,
+    fontWeight: 500,
+    cursor: 'pointer',
+    transition: 'all 0.15s ease',
+    whiteSpace: 'nowrap',
+  },
+
+  // Key Recorder
+  keyRecorder: {
+    minWidth: 140,
+    padding: '8px 12px',
+    backgroundColor: 'rgba(12, 18, 29, 0.84)',
+    border: '1px solid rgba(145, 160, 186, 0.34)',
+    borderRadius: 8,
+    color: 'var(--text-primary)',
+    fontSize: 13,
+    cursor: 'pointer',
+    transition: 'all 0.15s ease',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  keyRecorderRecording: {
+    color: 'var(--text-link)',
+    animation: 'pulse 1s ease-in-out infinite',
+  },
+
+  keyRecorderValue: {
+    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
+    fontSize: 12,
+  },
+
+  conflictWarning: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 6,
+    color: 'var(--status-warning)',
+    fontSize: 12,
+    marginTop: 4,
+  },
+
+  // Color Picker
+  colorPickerContainer: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: 8,
+    alignItems: 'center',
+  },
+
+  colorSwatch: {
+    width: 32,
+    height: 32,
+    borderRadius: '50%',
+    border: 'none',
+    cursor: 'pointer',
+    transition: 'all 0.15s ease',
+  },
+
+  customColorContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 4,
+    marginLeft: 8,
+  },
+
+  customColorInput: {
+    width: 32,
+    height: 32,
+    borderRadius: '50%',
+    border: '2px solid rgba(145, 160, 186, 0.34)',
+    backgroundColor: 'transparent',
+    cursor: 'pointer',
+  },
+
+  customColorLabel: {
+    fontSize: 10,
+    color: 'var(--text-tertiary)',
+  },
+
+  // API Key
+  apiKeyContainer: {
+    display: 'flex',
+    gap: 8,
+    flexWrap: 'wrap',
+  },
+
+  apiKeyInputWrapper: {
+    flex: 1,
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+  },
+
+  apiKeyInput: {
+    width: '100%',
+    padding: '10px 40px 10px 12px',
+    backgroundColor: 'rgba(12, 18, 29, 0.84)',
+    border: '1px solid rgba(145, 160, 186, 0.34)',
+    borderRadius: 8,
+    color: 'var(--text-primary)',
+    fontSize: 13,
+    transition: 'border-color 0.2s ease',
+  },
+
+  apiKeyVisibilityButton: {
+    position: 'absolute',
+    right: 8,
+    width: 28,
+    height: 28,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'transparent',
+    border: 'none',
+    borderRadius: 4,
+    color: 'var(--text-tertiary)',
+    cursor: 'pointer',
+    transition: 'color 0.15s ease',
+  },
+
+  apiKeyTestButton: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 6,
+    padding: '10px 16px',
+    backgroundColor: 'var(--accent-default)',
+    border: 'none',
+    borderRadius: 8,
+    color: 'var(--text-inverse)',
+    fontSize: 13,
+    fontWeight: 500,
+    cursor: 'pointer',
+    transition: 'all 0.15s ease',
+    whiteSpace: 'nowrap',
+  },
+
+  apiKeyError: {
+    display: 'block',
+    fontSize: 12,
+    color: 'var(--status-error)',
+    marginTop: 4,
+  },
+
+  apiKeySuccess: {
+    display: 'block',
+    fontSize: 12,
+    color: 'var(--status-success)',
+    marginTop: 4,
+  },
+
+  // Service Info
+  serviceInfo: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: 12,
+    padding: 12,
+    backgroundColor: 'rgba(10, 132, 255, 0.08)',
+    borderRadius: 8,
+    border: '1px solid rgba(59, 130, 246, 0.2)',
+    marginBottom: 12,
+  },
+
+  serviceName: {
+    display: 'block',
+    fontSize: 14,
+    fontWeight: 600,
+    color: 'var(--text-primary)',
+  },
+
+  serviceDescription: {
+    display: 'block',
+    fontSize: 12,
+    color: 'var(--text-secondary)',
+    marginTop: 2,
+    lineHeight: 1.4,
+  },
+
+  // Buttons
+  secondaryButton: {
+    padding: '8px 16px',
+    backgroundColor: 'rgba(124, 137, 160, 0.14)',
+    border: '1px solid rgba(145, 160, 186, 0.34)',
+    borderRadius: 8,
+    color: 'var(--text-primary)',
+    fontSize: 13,
+    fontWeight: 500,
+    cursor: 'pointer',
+    transition: 'all 0.15s ease',
+  },
+
+  dangerButton: {
+    padding: '8px 16px',
+    backgroundColor: 'rgba(239, 68, 68, 0.1)',
+    border: '1px solid rgba(239, 68, 68, 0.3)',
+    borderRadius: 8,
+    color: 'var(--status-error)',
+    fontSize: 13,
+    fontWeight: 500,
+    cursor: 'pointer',
+    transition: 'all 0.15s ease',
+  },
+
+  // Theme Preview
+  themePreview: {
+    padding: 16,
+    backgroundColor: 'rgba(118, 118, 128, 0.09)',
+    borderRadius: 8,
+  },
+
+  previewCard: {
+    padding: 16,
+    borderRadius: 12,
+    border: '1px solid',
+    transition: 'all 0.2s ease',
+  },
+
+  previewHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 10,
+    marginBottom: 16,
+  },
+
+  previewDot: {
+    width: 10,
+    height: 10,
+    borderRadius: '50%',
+    transition: 'background-color 0.2s ease',
+  },
+
+  previewTitle: {
+    fontSize: 14,
+    fontWeight: 500,
+    transition: 'color 0.2s ease',
+  },
+
+  previewButton: {
+    width: '100%',
+    padding: '10px 16px',
+    borderRadius: 8,
+    border: 'none',
+    color: 'var(--text-inverse)',
+    fontSize: 13,
+    fontWeight: 600,
+    cursor: 'default',
+    transition: 'background-color 0.2s ease',
+  },
+
+  // Hotkey Reference
+  hotkeyReference: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 12,
+    padding: 4,
+  },
+
+  hotkeyRefItem: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+
+  hotkeyRefLabel: {
+    fontSize: 13,
+    color: 'var(--text-secondary)',
+  },
+
+  // Footer
+  footer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '16px 24px',
+    borderTop: '1px solid rgba(145, 160, 186, 0.24)',
+    backgroundColor: 'rgba(14, 19, 29, 0.88)',
+    flexWrap: 'wrap',
+    gap: 10,
+  },
+
+  footerLeft: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 16,
+    flexWrap: 'wrap',
+  },
+
+  footerText: {
+    fontSize: 12,
+    color: 'var(--text-tertiary)',
+  },
+
+  savedIndicator: {
+    marginLeft: 8,
+    color: 'var(--status-success)',
+  },
+
+  resetAllButton: {
+    padding: '8px 16px',
+    backgroundColor: 'transparent',
+    border: '1px solid rgba(145, 160, 186, 0.34)',
+    borderRadius: 8,
+    color: 'var(--text-secondary)',
+    fontSize: 12,
+    fontWeight: 500,
+    cursor: 'pointer',
+    transition: 'all 0.15s ease',
+  },
+
+  // Spinner
+  spinner: {
+    width: 14,
+    height: 14,
+    border: '2px solid rgba(255, 255, 255, 0.3)',
+    borderTopColor: 'var(--text-inverse)',
+    borderRadius: '50%',
+    animation: 'spin 0.8s linear infinite',
+  },
+};