mirror of
https://github.com/waynesutton/markdown-site.git
synced 2026-01-12 04:09:14 +00:00
13941 lines
269 KiB
CSS
13941 lines
269 KiB
CSS
/* ============================================
|
|
FONT SIZE CONFIGURATION
|
|
============================================
|
|
FONT SIZE SWITCHER: Change these values to adjust font sizes across the entire app.
|
|
All font sizes are defined here as CSS variables for easy customization.
|
|
|
|
Size scale:
|
|
- 3xs: 10px (tiny labels)
|
|
- 2xs: 11px (code language labels, small badges)
|
|
- xs: 12px (descriptions, small text)
|
|
- sm: 13px (meta text, tags, secondary info)
|
|
- md: 16px (navigation, buttons, labels)
|
|
- base: 18px (body text, default)
|
|
- lg: 17px (blog content)
|
|
- xl: 18px (post description, h3)
|
|
- 2xl: 20px (h2 headings)
|
|
- 3xl: 24px (h1 headings, post titles)
|
|
- 4xl: 28px (mobile home name)
|
|
- 5xl: 32px (home name, stats title)
|
|
============================================ */
|
|
:root {
|
|
/* Base font sizes */
|
|
--font-size-3xs: 10px;
|
|
--font-size-2xs: 11px;
|
|
--font-size-xs: 12px;
|
|
--font-size-sm: 13px;
|
|
--font-size-md: 16px;
|
|
--font-size-base: 16px;
|
|
--font-size-lg: 17px;
|
|
--font-size-xl: 18px;
|
|
--font-size-2xl: 20px;
|
|
--font-size-3xl: 24px;
|
|
--font-size-4xl: 28px;
|
|
--font-size-5xl: 32px;
|
|
|
|
/* Homepage font sizes */
|
|
--font-size-home-name: var(--font-size-5xl);
|
|
--font-size-home-intro: var(--font-size-base);
|
|
--font-size-home-bio: var(--font-size-base);
|
|
--font-size-home-featured-intro: var(--font-size-base);
|
|
--font-size-home-cta: var(--font-size-base);
|
|
|
|
/* Navigation font sizes */
|
|
--font-size-nav-link: var(--font-size-md);
|
|
--font-size-back-button: var(--font-size-md);
|
|
|
|
/* Post list font sizes (home page) */
|
|
--font-size-year-heading: var(--font-size-md);
|
|
--font-size-post-list-title: var(--font-size-base);
|
|
--font-size-post-meta: var(--font-size-sm);
|
|
|
|
/* Post page font sizes */
|
|
--font-size-post-title: var(--font-size-3xl);
|
|
--font-size-post-meta-header: var(--font-size-md);
|
|
--font-size-post-description: var(--font-size-xl);
|
|
|
|
/* Blog content font sizes (article body) */
|
|
--font-size-blog-content: var(--font-size-md);
|
|
--font-size-blog-h1: var(--font-size-3xl);
|
|
--font-size-blog-h2: var(--font-size-2xl);
|
|
--font-size-blog-h3: var(--font-size-xl);
|
|
--font-size-blog-h4: var(--font-size-base);
|
|
--font-size-blog-h5: var(--font-size-md);
|
|
--font-size-blog-h6: var(--font-size-sm);
|
|
|
|
/* Table font sizes */
|
|
--font-size-table: var(--font-size-md);
|
|
--font-size-table-code: var(--font-size-sm);
|
|
|
|
/* Code font sizes */
|
|
--font-size-code-language: var(--font-size-2xs);
|
|
--font-size-inline-code: 0.9em;
|
|
|
|
/* Image caption font sizes */
|
|
--font-size-image-caption: var(--font-size-md);
|
|
|
|
/* Footer and tags font sizes */
|
|
--font-size-post-tag: var(--font-size-sm);
|
|
--font-size-share-button: var(--font-size-md);
|
|
--font-size-footer-text: var(--font-size-base);
|
|
|
|
/* Blog page font sizes */
|
|
--font-size-blog-page-title: 2rem;
|
|
--font-size-blog-page-description: 1rem;
|
|
|
|
/* Stats page font sizes */
|
|
--font-size-stats-title: var(--font-size-5xl);
|
|
--font-size-stats-subtitle: var(--font-size-base);
|
|
--font-size-stat-card-label: var(--font-size-md);
|
|
--font-size-stat-card-value: var(--font-size-5xl);
|
|
--font-size-stat-card-desc: var(--font-size-sm);
|
|
--font-size-stat-card-note: var(--font-size-2xs);
|
|
--font-size-stats-section-title: var(--font-size-xl);
|
|
--font-size-stats-list-path: 15px;
|
|
--font-size-stats-list-type: var(--font-size-xs);
|
|
--font-size-stats-list-count: var(--font-size-md);
|
|
|
|
/* Search modal font sizes */
|
|
--font-size-search-input: var(--font-size-base);
|
|
--font-size-search-hint: 15px;
|
|
--font-size-search-shortcut: var(--font-size-xs);
|
|
--font-size-search-shortcut-kbd: var(--font-size-2xs);
|
|
--font-size-search-result-title: 15px;
|
|
--font-size-search-result-snippet: var(--font-size-sm);
|
|
--font-size-search-result-type: var(--font-size-2xs);
|
|
--font-size-search-footer-hint: var(--font-size-xs);
|
|
|
|
/* Featured cards font sizes */
|
|
--font-size-featured-card-title: var(--font-size-base);
|
|
--font-size-featured-card-excerpt: var(--font-size-md);
|
|
|
|
/* Logo marquee font sizes */
|
|
--font-size-logo-marquee-title: var(--font-size-md);
|
|
|
|
/* Mobile menu font sizes */
|
|
--font-size-mobile-nav-link: var(--font-size-base);
|
|
--font-size-mobile-home-link: var(--font-size-md);
|
|
--font-size-mobile-toc-title: var(--font-size-2xs);
|
|
--font-size-mobile-toc-link: var(--font-size-md);
|
|
|
|
/* Copy dropdown font sizes */
|
|
--font-size-copy-trigger: var(--font-size-sm);
|
|
--font-size-copy-item-title: var(--font-size-md);
|
|
--font-size-copy-item-desc: var(--font-size-xs);
|
|
--font-size-external-arrow: var(--font-size-xs);
|
|
}
|
|
|
|
/* ============================================
|
|
MOBILE FONT SIZE OVERRIDES
|
|
============================================
|
|
Adjust font sizes for smaller screens.
|
|
These override the base sizes on mobile devices.
|
|
============================================ */
|
|
@media (max-width: 768px) {
|
|
:root {
|
|
/* Homepage mobile */
|
|
--font-size-home-name: var(--font-size-4xl);
|
|
--font-size-nav-link: var(--font-size-sm);
|
|
|
|
/* Post list mobile */
|
|
--font-size-post-list-title: var(--font-size-xl);
|
|
|
|
/* Post page mobile */
|
|
--font-size-post-title: var(--font-size-4xl);
|
|
|
|
/* Blog content mobile */
|
|
--font-size-blog-content: var(--font-size-base);
|
|
--font-size-blog-h1: 22px;
|
|
--font-size-blog-h2: var(--font-size-xl);
|
|
--font-size-blog-h3: var(--font-size-base);
|
|
--font-size-blog-h4: 15px;
|
|
--font-size-blog-h5: var(--font-size-sm);
|
|
|
|
/* Table mobile */
|
|
--font-size-table: var(--font-size-sm);
|
|
|
|
/* Blog page mobile */
|
|
--font-size-blog-page-title: 1.75rem;
|
|
|
|
/* Stats mobile */
|
|
--font-size-stats-title: var(--font-size-4xl);
|
|
--font-size-stat-card-value: var(--font-size-4xl);
|
|
|
|
/* Search modal mobile */
|
|
--font-size-search-result-title: var(--font-size-md);
|
|
--font-size-search-result-snippet: var(--font-size-xs);
|
|
--font-size-search-result-type: var(--font-size-3xs);
|
|
|
|
/* Featured cards mobile */
|
|
--font-size-featured-card-title: 15px;
|
|
--font-size-featured-card-excerpt: var(--font-size-sm);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
CSS Variables for theming
|
|
============================================
|
|
THEME SWITCHER: Default theme is "tan". To change default, edit src/context/ThemeContext.tsx
|
|
Available themes: dark, light, tan, cloud */
|
|
:root[data-theme="dark"] {
|
|
--bg-primary: #111111;
|
|
--bg-secondary: #1a1a1a;
|
|
--bg-hover: #252525;
|
|
--bg-sidebar: #0d0d0d;
|
|
--text-primary: #fafafa;
|
|
--text-secondary: #a1a1a1;
|
|
--text-muted: #6b6b6b;
|
|
--border-color: #2a2a2a;
|
|
--border-sidebar: #2a2a2a;
|
|
--accent: #fafafa;
|
|
--accent-hover: #e5e5e5;
|
|
--link-color: #fafafa;
|
|
--link-hover: #a1a1a1;
|
|
--code-bg: #1e1e1e;
|
|
--code-border: #2a2a2a;
|
|
--inline-code-bg: #2a2a2a;
|
|
--blockquote-border: #3a3a3a;
|
|
--blockquote-bg: #1a1a1a;
|
|
}
|
|
|
|
:root[data-theme="light"] {
|
|
--bg-primary: #ffffff;
|
|
--bg-secondary: #fafafa;
|
|
--bg-hover: #f5f5f5;
|
|
--bg-sidebar: #f8f8f8;
|
|
--text-primary: #111111;
|
|
--text-secondary: #6b6b6b;
|
|
--text-muted: #a1a1a1;
|
|
--border-color: #e5e5e5;
|
|
--border-sidebar: #e5e5e5;
|
|
--accent: #111111;
|
|
--accent-hover: #333333;
|
|
--link-color: #111111;
|
|
--link-hover: #6b6b6b;
|
|
--code-bg: #f5f5f5;
|
|
--code-border: #e5e5e5;
|
|
--inline-code-bg: #f0f0f0;
|
|
--blockquote-border: #e5e5e5;
|
|
--blockquote-bg: #fafafa;
|
|
}
|
|
|
|
:root[data-theme="tan"] {
|
|
--bg-primary: #faf8f5;
|
|
--bg-secondary: #f5f3f0;
|
|
--bg-hover: #ebe9e6;
|
|
--bg-sidebar: #f5f2ed;
|
|
--text-primary: #1a1a1a;
|
|
--text-secondary: #6b6b6b;
|
|
--text-muted: #999999;
|
|
--border-color: #e6e4e1;
|
|
--border-sidebar: #e0ddd8;
|
|
--accent: #8b7355;
|
|
--accent-hover: #735f47;
|
|
--link-color: #8b7355;
|
|
--link-hover: #6b5a45;
|
|
--code-bg: #f0ece4;
|
|
--code-border: #e6e4e1;
|
|
--inline-code-bg: #ebe7df;
|
|
--blockquote-border: #d4cfc6;
|
|
--blockquote-bg: #f5f3f0;
|
|
}
|
|
|
|
/* Cloud theme - soft gray aesthetic */
|
|
:root[data-theme="cloud"] {
|
|
--bg-primary: #f5f5f5;
|
|
--bg-secondary: #ebebeb;
|
|
--bg-hover: #e0e0e0;
|
|
--bg-sidebar: #eeeeee;
|
|
--text-primary: #171717;
|
|
--text-secondary: #525252;
|
|
--text-muted: #737373;
|
|
--border-color: #d4d4d4;
|
|
--border-sidebar: #d4d4d4;
|
|
--accent: #171717;
|
|
--accent-hover: #404040;
|
|
--link-color: #171717;
|
|
--link-hover: #525252;
|
|
--code-bg: #e5e5e5;
|
|
--code-border: #d4d4d4;
|
|
--inline-code-bg: #e0e0e0;
|
|
--blockquote-border: #a3a3a3;
|
|
--blockquote-bg: #ebebeb;
|
|
}
|
|
|
|
/* Reset and base styles */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
font-size: 16px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
/* FONT SWITCHER: Replace the font-family below to change fonts
|
|
Sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif
|
|
Serif (New York): "New York", -apple-system-ui-serif, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif
|
|
Monospace: "IBM Plex Mono", "Liberation Mono", ui-monospace, monospace
|
|
Or configure via siteConfig.ts fontFamily option */
|
|
font-family: var(
|
|
--font-family,
|
|
"New York",
|
|
-apple-system-ui-serif,
|
|
ui-serif,
|
|
Georgia,
|
|
Cambria,
|
|
"Times New Roman",
|
|
Times,
|
|
serif
|
|
);
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
transition:
|
|
background-color 0.2s ease,
|
|
color 0.2s ease;
|
|
}
|
|
|
|
/* Layout */
|
|
.layout {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Mobile and tablet layout padding */
|
|
@media (max-width: 1024px) {
|
|
.layout {
|
|
padding: 15px;
|
|
}
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
max-width: 800px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
margin-top: 60px;
|
|
/* padding: 40px 24px; */
|
|
}
|
|
|
|
/* Expand main-content to full width when sidebar layout is used */
|
|
.main-content:has(.post-page-with-sidebar) {
|
|
max-width: 100%;
|
|
padding: 0 0px;
|
|
}
|
|
|
|
/* Wide content layout for pages that need more space (stats, etc.) */
|
|
.main-content-wide {
|
|
flex: 1;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Top navigation bar */
|
|
.top-nav {
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 13px;
|
|
right: 13px;
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
/* Themed background to prevent content overlap on scroll */
|
|
background-color: var(--bg-primary);
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
/* nav bar border to match sidebar if sidebar is enabled
|
|
border-bottom: 1px solid var(--border-sidebar); */
|
|
}
|
|
|
|
/* Logo in top navigation */
|
|
.top-nav-logo-link {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.top-nav-logo-link:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.top-nav-logo {
|
|
width: auto;
|
|
display: block;
|
|
height: 28px;
|
|
}
|
|
|
|
/* Mobile nav controls (search, theme, hamburger) - shown on left on mobile */
|
|
.mobile-nav-controls {
|
|
display: none;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Desktop controls (search, theme) - shown on right on desktop */
|
|
.desktop-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Header social links (shown left of search when enabled) */
|
|
.header-social-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin-right: 8px;
|
|
padding-right: 8px;
|
|
border-right: 1px solid var(--border-color);
|
|
}
|
|
|
|
.header-social-link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-secondary);
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
transition:
|
|
color 0.2s ease,
|
|
background-color 0.2s ease;
|
|
}
|
|
|
|
.header-social-link:hover {
|
|
color: var(--text-primary);
|
|
background-color: var(--hover-bg);
|
|
}
|
|
|
|
/* Page navigation links (About, Projects, Contact, etc.) */
|
|
.page-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.page-nav-link {
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
font-size: var(--font-size-nav-link);
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.page-nav-link:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.theme-toggle-container {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.theme-toggle {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition:
|
|
color 0.2s ease,
|
|
background-color 0.2s ease;
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
.font-toggle {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition:
|
|
color 0.2s ease,
|
|
background-color 0.2s ease;
|
|
}
|
|
|
|
.font-toggle:hover {
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
/* Home page styles */
|
|
.home {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.home-header {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
/* Site logo on homepage */
|
|
.home-logo {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-bottom: 10px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.home-name {
|
|
font-size: var(--font-size-home-name);
|
|
font-weight: 400;
|
|
margin-bottom: 24px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.home-intro,
|
|
.home-bio {
|
|
font-size: var(--font-size-home-intro);
|
|
color: var(--text-secondary);
|
|
margin-bottom: 16px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* Links inside home intro and bio sections */
|
|
.home-intro a,
|
|
.home-bio a {
|
|
color: var(--link-color);
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.home-intro a:hover,
|
|
.home-bio a:hover {
|
|
color: var(--link-hover);
|
|
}
|
|
|
|
/* Home intro content from synced markdown page */
|
|
.home-intro-content {
|
|
max-width: 800px;
|
|
margin: 0 auto 16px;
|
|
/* Text alignment controlled via frontmatter textAlign field (default: left) */
|
|
}
|
|
|
|
.home-intro-content p {
|
|
font-size: var(--font-size-home-intro);
|
|
color: var(--text-secondary);
|
|
margin-bottom: 16px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.home-intro-content p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.home-intro-content a {
|
|
color: var(--link-color);
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.home-intro-content a:hover {
|
|
color: var(--link-hover);
|
|
}
|
|
|
|
.home-featured {
|
|
margin: 24px 0;
|
|
}
|
|
|
|
.home-featured-intro {
|
|
font-size: var(--font-size-home-featured-intro);
|
|
color: var(--text-secondary);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.home-featured-list {
|
|
list-style: none;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.home-featured-list li {
|
|
position: relative;
|
|
padding-left: 16px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.home-featured-list li::before {
|
|
content: "•";
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.home-featured-link {
|
|
color: var(--text-primary);
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.home-featured-link:hover {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.home-cta {
|
|
font-size: var(--font-size-home-cta);
|
|
color: var(--text-secondary);
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.home-text-link {
|
|
color: var(--text-primary);
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.home-text-link:hover {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.external-icon {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-left: 2px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.home-divider {
|
|
border: none;
|
|
border-top: 1px solid var(--border-color);
|
|
margin: 40px 0;
|
|
}
|
|
|
|
/* Post list styles */
|
|
.post-list {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.home-posts-read-more {
|
|
margin-top: 32px;
|
|
text-align: center;
|
|
}
|
|
|
|
.home-posts-read-more-link {
|
|
display: inline-block;
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
font-size: var(--font-size-base);
|
|
font-weight: 500;
|
|
padding: 12px 24px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.home-posts-read-more-link:hover {
|
|
background-color: var(--bg-hover);
|
|
border-color: var(--text-muted);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.post-year-group {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.year-heading {
|
|
font-size: var(--font-size-year-heading);
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
margin-bottom: 16px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.posts {
|
|
list-style: none;
|
|
}
|
|
|
|
.post-item {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.post-link {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
padding: 6px 0;
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
transition: opacity 0.2s ease;
|
|
gap: 12px;
|
|
}
|
|
|
|
.post-link:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Post list item title (on home page) */
|
|
.post-link .post-title {
|
|
font-size: var(--font-size-post-list-title);
|
|
font-weight: 400;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.post-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: var(--font-size-post-meta);
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.post-read-time {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.post-date {
|
|
color: var(--text-muted);
|
|
min-width: 80px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Footer styles */
|
|
.home-footer {
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.social-links {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.social-link {
|
|
color: var(--text-muted);
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.social-link:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Post page styles */
|
|
.post-page {
|
|
padding-top: 0px;
|
|
}
|
|
|
|
/* Full-width sidebar layout - breaks out of .main-content constraints */
|
|
.post-page-with-sidebar {
|
|
padding-top: 0px;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.post-nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
/* Nav layout adjustments */
|
|
.post-nav .back-button {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.post-nav .copy-page-dropdown {
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Shift CopyPageDropdown 7px to the left for sidebar layouts */
|
|
.post-nav-with-sidebar .copy-page-dropdown {
|
|
margin-right: 35px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* Copy Page Dropdown Styles */
|
|
.copy-page-dropdown {
|
|
position: relative;
|
|
}
|
|
|
|
.copy-page-trigger {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 12px;
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-copy-trigger);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.copy-page-trigger:hover {
|
|
background-color: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
.dropdown-chevron {
|
|
transition: transform 0.15s ease;
|
|
}
|
|
|
|
.dropdown-chevron.open {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.copy-page-menu {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
right: 0;
|
|
width: 280px;
|
|
background-color: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
z-index: 1000;
|
|
overflow: hidden;
|
|
animation: dropdownFadeIn 0.15s ease;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.spinner-icon {
|
|
animation: spin 1s linear infinite;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
@keyframes dropdownFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-4px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.copy-page-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
width: 100%;
|
|
padding: 12px 14px;
|
|
background: transparent;
|
|
border: none;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: background-color 0.1s ease;
|
|
}
|
|
|
|
.copy-page-item:hover {
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
.copy-page-item:not(:last-child) {
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.copy-page-icon {
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.copy-page-item:hover .copy-page-icon {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Feedback states for copy/share actions */
|
|
.copy-page-icon.feedback-success {
|
|
color: #22c55e;
|
|
}
|
|
|
|
.copy-page-icon.feedback-error {
|
|
color: #ef4444;
|
|
}
|
|
|
|
.copy-page-icon.feedback-warning {
|
|
color: #f59e0b;
|
|
}
|
|
|
|
.copy-page-item-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.copy-page-item-title {
|
|
font-size: var(--font-size-copy-item-title);
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.external-arrow {
|
|
font-size: var(--font-size-external-arrow);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.copy-page-item-desc {
|
|
font-size: var(--font-size-copy-item-desc);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.copy-page-divider {
|
|
height: 1px;
|
|
background-color: var(--border-color);
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.back-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--text-secondary);
|
|
background: transparent;
|
|
border: none;
|
|
font-size: var(--font-size-back-button);
|
|
cursor: pointer;
|
|
padding: 8px 0px;
|
|
margin-left: -12px;
|
|
border-radius: 6px;
|
|
transition:
|
|
color 0.2s ease,
|
|
background-color 0.2s ease;
|
|
}
|
|
|
|
.back-button:hover {
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
.post-article {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.post-header {
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
/* Header image displayed at top of post/page */
|
|
.post-header-image {
|
|
width: 100%;
|
|
margin-bottom: 32px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.post-header-image-img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Title row container - flex layout for title and CopyPageDropdown */
|
|
.post-title-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* Header actions container for CopyPageDropdown when sidebars are enabled */
|
|
.post-header-actions {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
/* Sidebar layout for pages - two-column grid with docs-style sidebar */
|
|
/* DOM order: article first (for SEO), sidebar second */
|
|
/* Visual order: sidebar on left (order: -1), article on right (order: 0) */
|
|
.post-content-with-sidebar {
|
|
display: grid;
|
|
grid-template-columns: 240px 1fr;
|
|
gap: 0;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Article comes first in DOM (order: 0) but displays second visually */
|
|
.post-content-with-sidebar .post-article,
|
|
.post-content-with-sidebar .post-article-with-sidebar {
|
|
order: 0;
|
|
}
|
|
|
|
/* Left sidebar displays first visually (left) but comes second in DOM */
|
|
.post-content-with-sidebar .post-sidebar-wrapper.post-sidebar-left {
|
|
order: -1;
|
|
}
|
|
|
|
/* Three-column layout when right sidebar is enabled */
|
|
@media (min-width: 1135px) {
|
|
.post-content-with-sidebar:has(.post-sidebar-right) {
|
|
grid-template-columns: 240px 1fr 280px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Center article in middle column when right sidebar exists */
|
|
.post-content-with-sidebar:has(.post-sidebar-right)
|
|
.post-article-with-sidebar {
|
|
max-width: 800px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 48px;
|
|
padding-right: 48px;
|
|
}
|
|
}
|
|
|
|
/* Center article layout when ONLY right sidebar is enabled (no left sidebar) */
|
|
/* Right sidebar flush right, article centered in remaining space */
|
|
.post-content-with-sidebar.post-content-right-sidebar-only {
|
|
display: grid;
|
|
grid-template-columns: 1fr 280px;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Centered article styling when only right sidebar exists */
|
|
.post-article-with-sidebar.post-article-centered {
|
|
max-width: 800px;
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 48px;
|
|
padding-right: 48px;
|
|
}
|
|
|
|
@media (max-width: 1134px) {
|
|
/* Hide right sidebar on smaller screens, center article fully */
|
|
.post-content-with-sidebar.post-content-right-sidebar-only {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.post-article-with-sidebar.post-article-centered {
|
|
max-width: 800px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
}
|
|
}
|
|
|
|
/* Left sidebar wrapper - docs-style with alt background and borders */
|
|
.post-sidebar-wrapper {
|
|
position: sticky;
|
|
top: 80px;
|
|
align-self: start;
|
|
max-height: calc(100vh - 100px);
|
|
overflow-y: auto;
|
|
/* Hide scrollbar while keeping scroll functionality */
|
|
-ms-overflow-style: none; /* IE */
|
|
scrollbar-width: none; /* Firefox */
|
|
background-color: var(--bg-sidebar);
|
|
margin-left: -24px;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
padding-top: 24px;
|
|
padding-bottom: 24px;
|
|
margin-top: -24px;
|
|
border-radius: 6px;
|
|
/* Extend background to fill height - ensures sidebars flush to bottom */
|
|
min-height: calc(100vh - 80px);
|
|
/* Top border using CSS variable for theme consistency */
|
|
border-top: 1px solid var(--border-sidebar);
|
|
/* Right border using box-shadow for consistent 1px width regardless of scrollbar */
|
|
box-shadow: inset -1px 0 0 var(--border-sidebar);
|
|
}
|
|
|
|
/* Hide scrollbar for Chrome/Safari/Edge */
|
|
.post-sidebar-wrapper::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
/* Left sidebar - flush left with internal padding */
|
|
/* All styles inherited from .post-sidebar-wrapper */
|
|
|
|
/* Right sidebar - complete styles based on left sidebar wrapper */
|
|
.post-sidebar-right {
|
|
position: sticky;
|
|
top: 80px;
|
|
align-self: start;
|
|
max-height: calc(100vh - 100px);
|
|
overflow-y: auto;
|
|
/* Hide scrollbar while keeping scroll functionality */
|
|
-ms-overflow-style: none; /* IE */
|
|
scrollbar-width: none; /* Firefox */
|
|
background-color: var(--bg-sidebar);
|
|
margin-right: 0;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
padding-top: 24px;
|
|
padding-bottom: 24px;
|
|
margin-top: -24px;
|
|
border-radius: 6px;
|
|
/* Extend background to fill height - ensures sidebars flush to bottom */
|
|
min-height: calc(100vh - 80px);
|
|
/* Top border using CSS variable for theme consistency */
|
|
border-top: 1px solid var(--border-sidebar);
|
|
/* Left border using box-shadow for consistent 1px width regardless of scrollbar */
|
|
box-shadow: inset 1px 0 0 var(--border-sidebar);
|
|
}
|
|
|
|
/* Hide scrollbar for Chrome/Safari/Edge */
|
|
.post-sidebar-right::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.right-sidebar-content {
|
|
position: sticky;
|
|
top: 0px;
|
|
}
|
|
|
|
/* Hide right sidebar below 1135px */
|
|
@media (max-width: 1134px) {
|
|
.post-sidebar-right {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Content area - flexible width with left padding for gap from sidebar */
|
|
.post-article-with-sidebar {
|
|
min-width: 0; /* Prevent overflow */
|
|
max-width: 800px;
|
|
padding-left: 48px;
|
|
padding-right: 48px;
|
|
padding-top: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Page sidebar TOC navigation */
|
|
.page-sidebar {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.page-sidebar-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.page-sidebar-item {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.page-sidebar-item-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.page-sidebar-expand {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: all 0.15s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.page-sidebar-expand:hover {
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
.page-sidebar-expand svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
transition: transform 0.15s ease;
|
|
}
|
|
|
|
.page-sidebar-expand.expanded svg {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.page-sidebar-spacer {
|
|
width: 24px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.page-sidebar-link {
|
|
display: block;
|
|
flex: 1;
|
|
padding: 6px 8px;
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
font-family: inherit;
|
|
font-size: var(--font-size-md);
|
|
line-height: 1.5;
|
|
border-radius: 4px;
|
|
transition:
|
|
color 0.15s ease,
|
|
background-color 0.15s ease;
|
|
}
|
|
|
|
.page-sidebar-link:hover {
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
.page-sidebar-link.active {
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-hover);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Indentation for nested headings */
|
|
.page-sidebar-link.page-sidebar-item-level-1 {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.page-sidebar-sublist {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.page-sidebar-sublist .page-sidebar-link.page-sidebar-item-level-2 {
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.page-sidebar-sublist .page-sidebar-link.page-sidebar-item-level-3 {
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.page-sidebar-sublist .page-sidebar-link.page-sidebar-item-level-4,
|
|
.page-sidebar-sublist .page-sidebar-link.page-sidebar-item-level-5,
|
|
.page-sidebar-sublist .page-sidebar-link.page-sidebar-item-level-6 {
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
/* Mobile: stack columns */
|
|
@media (max-width: 1024px) {
|
|
.post-page-with-sidebar {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.post-content-with-sidebar {
|
|
grid-template-columns: 1fr;
|
|
gap: 24px;
|
|
}
|
|
|
|
/* Hide sidebars on mobile - left sidebar is now in the hamburger menu */
|
|
.post-sidebar-wrapper {
|
|
display: none;
|
|
}
|
|
|
|
/* Ensure right sidebar is hidden on mobile */
|
|
.post-sidebar-right {
|
|
display: none;
|
|
}
|
|
|
|
/* Reset sidebar styles for mobile (when shown in hamburger) */
|
|
.post-sidebar-left {
|
|
position: static;
|
|
width: 100%;
|
|
max-height: none;
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 16px;
|
|
margin-left: 0;
|
|
margin-top: 0;
|
|
min-height: auto;
|
|
background-color: transparent;
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Reset content area padding on mobile */
|
|
.post-article-with-sidebar {
|
|
max-width: 100%;
|
|
padding-left: 0;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.page-sidebar {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.page-sidebar-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.page-sidebar-item {
|
|
display: inline-block;
|
|
}
|
|
|
|
.page-sidebar-link {
|
|
padding: 4px 8px;
|
|
font-size: var(--font-size-xs);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.page-sidebar-expand {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.page-sidebar-expand svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.page-sidebar-spacer {
|
|
width: 24px;
|
|
}
|
|
|
|
.page-sidebar-link {
|
|
padding: 4px 6px;
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.page-sidebar-sublist {
|
|
margin-left: 16px;
|
|
}
|
|
}
|
|
|
|
/* Post page article title */
|
|
.post-header .post-title {
|
|
font-size: var(--font-size-post-title);
|
|
font-weight: 300;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 0;
|
|
line-height: 1.2;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.post-meta-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: var(--font-size-post-meta-header);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.post-meta-separator {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Author display in post header */
|
|
.post-author {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.post-author-image {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 10%;
|
|
object-fit: cover;
|
|
border: none;
|
|
}
|
|
|
|
.post-author-name {
|
|
font-size: var(--font-size-post-meta-header);
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.post-author-link {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.post-author-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.post-description {
|
|
font-size: var(--font-size-post-description);
|
|
color: var(--text-secondary);
|
|
margin-top: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Blog post content styles */
|
|
.blog-post-content {
|
|
font-size: var(--font-size-blog-content);
|
|
line-height: 1.8;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.blog-post-content p {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.blog-h1 {
|
|
font-size: var(--font-size-blog-h1);
|
|
font-weight: 300;
|
|
margin: 48px 0 24px;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.3;
|
|
position: relative;
|
|
}
|
|
|
|
/* Demoted H1 (from markdown) - styled identically to .blog-h1 for visual consistency */
|
|
/* This is an H2 element with H1 visual styling, used for SEO (single H1 per page) */
|
|
.blog-h1-demoted {
|
|
font-size: var(--font-size-blog-h1);
|
|
font-weight: 300;
|
|
margin: 48px 0 24px;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.3;
|
|
position: relative;
|
|
}
|
|
|
|
/* Anchor link hover for demoted H1 */
|
|
.blog-h1-demoted:hover .heading-anchor {
|
|
opacity: 1;
|
|
}
|
|
|
|
.blog-h2 {
|
|
font-size: var(--font-size-blog-h2);
|
|
font-weight: 300;
|
|
margin: 40px 0 20px;
|
|
letter-spacing: -0.01em;
|
|
line-height: 1.3;
|
|
position: relative;
|
|
}
|
|
|
|
.blog-h3 {
|
|
font-size: var(--font-size-blog-h3);
|
|
font-weight: 300;
|
|
margin: 32px 0 16px;
|
|
line-height: 1.4;
|
|
position: relative;
|
|
}
|
|
|
|
.blog-h4 {
|
|
font-size: var(--font-size-blog-h4);
|
|
font-weight: 300;
|
|
margin: 24px 0 12px;
|
|
line-height: 1.4;
|
|
position: relative;
|
|
}
|
|
|
|
.blog-h5 {
|
|
font-size: var(--font-size-blog-h5);
|
|
font-weight: 300;
|
|
margin: 20px 0 10px;
|
|
line-height: 1.4;
|
|
position: relative;
|
|
}
|
|
|
|
.blog-h6 {
|
|
font-size: var(--font-size-blog-h6);
|
|
font-weight: 300;
|
|
margin: 16px 0 8px;
|
|
line-height: 1.4;
|
|
position: relative;
|
|
}
|
|
|
|
/* Anchor links for headings */
|
|
.heading-anchor {
|
|
position: absolute;
|
|
left: -1.5em;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
font-weight: normal;
|
|
font-size: 0.9em;
|
|
padding-right: 0.5em;
|
|
}
|
|
|
|
.blog-h1:hover .heading-anchor,
|
|
.blog-h2:hover .heading-anchor,
|
|
.blog-h3:hover .heading-anchor,
|
|
.blog-h4:hover .heading-anchor,
|
|
.blog-h5:hover .heading-anchor,
|
|
.blog-h6:hover .heading-anchor {
|
|
opacity: 1;
|
|
}
|
|
|
|
.heading-anchor:hover {
|
|
color: var(--link-color);
|
|
}
|
|
|
|
.blog-link {
|
|
color: var(--link-color);
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.blog-link:hover {
|
|
color: var(--link-hover);
|
|
}
|
|
|
|
.blog-ul,
|
|
.blog-ol {
|
|
margin: 0 0 24px 24px;
|
|
}
|
|
|
|
.blog-li {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.blog-li::marker {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.blog-blockquote {
|
|
border-left: 3px solid var(--blockquote-border);
|
|
background-color: var(--blockquote-bg);
|
|
padding: 16px 20px;
|
|
margin: 24px 0;
|
|
border-radius: 0 6px 6px 0;
|
|
}
|
|
|
|
.blog-blockquote p {
|
|
margin-bottom: 0;
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
}
|
|
|
|
.blog-hr {
|
|
border: none;
|
|
border-top: 1px solid var(--border-color);
|
|
margin: 48px 0;
|
|
}
|
|
|
|
/* Collapsible sections (details/summary) */
|
|
.blog-post-content details {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 0;
|
|
margin: 24px 0;
|
|
background-color: var(--bg-secondary);
|
|
}
|
|
|
|
.blog-post-content details summary {
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
padding: 12px 16px;
|
|
list-style: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
user-select: none;
|
|
}
|
|
|
|
.blog-post-content details summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.blog-post-content details summary::before {
|
|
content: "";
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 6px solid var(--text-secondary);
|
|
border-top: 4px solid transparent;
|
|
border-bottom: 4px solid transparent;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.blog-post-content details[open] summary::before {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.blog-post-content details summary:hover {
|
|
background-color: var(--bg-primary);
|
|
}
|
|
|
|
.blog-post-content details[open] summary {
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.blog-post-content details > *:not(summary) {
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.blog-post-content details > p:first-of-type {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.blog-post-content details > *:last-child {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* Nested details styling */
|
|
.blog-post-content details details {
|
|
margin: 12px 0;
|
|
}
|
|
|
|
/* Table styles - GitHub-style tables */
|
|
.blog-table-wrapper {
|
|
overflow-x: auto;
|
|
margin: 24px 0;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.blog-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
font-size: var(--font-size-table);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.blog-thead {
|
|
background-color: var(--bg-secondary);
|
|
}
|
|
|
|
.blog-th {
|
|
padding: 12px 16px;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-color);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.blog-td {
|
|
padding: 12px 16px;
|
|
text-align: left;
|
|
color: var(--text-secondary);
|
|
border: 1px solid var(--border-color);
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* Alternating row colors */
|
|
.blog-tbody .blog-tr:nth-child(even) {
|
|
background-color: var(--bg-secondary);
|
|
}
|
|
|
|
.blog-tbody .blog-tr:hover {
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
/* Inline code within tables */
|
|
.blog-td code,
|
|
.blog-th code {
|
|
background-color: var(--inline-code-bg);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-family:
|
|
SF Mono,
|
|
Monaco,
|
|
Cascadia Code,
|
|
Roboto Mono,
|
|
Consolas,
|
|
monospace;
|
|
font-size: var(--font-size-table-code);
|
|
}
|
|
|
|
/* Code styles */
|
|
.code-block-wrapper {
|
|
position: relative;
|
|
margin: 24px 0;
|
|
}
|
|
|
|
/* Allow text wrapping for plain text code blocks */
|
|
.code-block-text pre,
|
|
.code-block-text code {
|
|
white-space: pre-wrap !important;
|
|
word-wrap: break-word !important;
|
|
overflow-wrap: break-word !important;
|
|
}
|
|
|
|
.code-language {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 44px;
|
|
font-size: var(--font-size-code-language);
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Copy button for code blocks */
|
|
.code-copy-button {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition:
|
|
opacity 0.15s ease,
|
|
background 0.15s ease,
|
|
color 0.15s ease;
|
|
}
|
|
|
|
.code-block-wrapper:hover .code-copy-button {
|
|
opacity: 1;
|
|
}
|
|
|
|
.code-copy-button:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
.code-copy-button:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.inline-code {
|
|
background-color: var(--inline-code-bg);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-family:
|
|
SF Mono,
|
|
Monaco,
|
|
Cascadia Code,
|
|
Roboto Mono,
|
|
Consolas,
|
|
monospace;
|
|
font-size: var(--font-size-inline-code);
|
|
}
|
|
|
|
/* Copy command inline styles */
|
|
.copy-command {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.copy-command .inline-code {
|
|
margin: 0;
|
|
}
|
|
|
|
.inline-copy-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
padding: 0;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
opacity: 0.6;
|
|
transition:
|
|
opacity 0.15s ease,
|
|
background 0.15s ease,
|
|
color 0.15s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.inline-copy-button:hover {
|
|
opacity: 1;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
.inline-copy-button:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
/* Image styles */
|
|
.blog-image-wrapper {
|
|
display: block;
|
|
margin: 32px 0;
|
|
}
|
|
|
|
.blog-image {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
display: block;
|
|
}
|
|
|
|
.blog-image-clickable {
|
|
cursor: pointer;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.blog-image-clickable:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.blog-image-caption {
|
|
display: block;
|
|
font-size: var(--font-size-image-caption);
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
/* Embed container for YouTube and Twitter/X iframes */
|
|
.embed-container {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.embed-container iframe {
|
|
max-width: 100%;
|
|
border: none;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Image lightbox styles */
|
|
.image-lightbox-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
z-index: 10000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
animation: lightboxFadeIn 0.2s ease;
|
|
}
|
|
|
|
@keyframes lightboxFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.image-lightbox-close {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 6px;
|
|
color: #fff;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition:
|
|
background-color 0.2s ease,
|
|
border-color 0.2s ease;
|
|
z-index: 10001;
|
|
}
|
|
|
|
.image-lightbox-close:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.image-lightbox-content {
|
|
max-width: 90vw;
|
|
max-height: 90vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.image-lightbox-image {
|
|
max-width: 100%;
|
|
max-height: calc(90vh - 60px);
|
|
object-fit: contain;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.image-lightbox-caption {
|
|
color: #fff;
|
|
font-size: var(--font-size-base);
|
|
text-align: center;
|
|
max-width: 800px;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.image-lightbox-backdrop {
|
|
padding: 10px;
|
|
}
|
|
|
|
.image-lightbox-close {
|
|
top: 10px;
|
|
right: 10px;
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
.image-lightbox-content {
|
|
max-width: 95vw;
|
|
max-height: 95vh;
|
|
}
|
|
|
|
.image-lightbox-image {
|
|
max-height: calc(95vh - 60px);
|
|
}
|
|
|
|
.image-lightbox-caption {
|
|
font-size: var(--font-size-sm);
|
|
padding: 0 10px;
|
|
}
|
|
}
|
|
|
|
/* Post footer styles */
|
|
.post-footer {
|
|
margin-top: 64px;
|
|
padding-top: 32px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.post-share {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.share-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 16px;
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-share-button);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.share-button:hover {
|
|
background-color: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Mobile: icon-only share buttons */
|
|
@media (max-width: 480px) {
|
|
.share-button {
|
|
padding: 10px;
|
|
gap: 0;
|
|
}
|
|
|
|
.share-button span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.post-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.post-tags-icon {
|
|
color: var(--text-muted);
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.post-tag {
|
|
font-size: var(--font-size-post-tag);
|
|
color: var(--text-muted);
|
|
background-color: var(--bg-secondary);
|
|
padding: 4px 12px;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.post-tag-link {
|
|
text-decoration: none;
|
|
transition:
|
|
background-color 0.2s ease,
|
|
color 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.post-tag-link:hover {
|
|
background-color: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Related posts section */
|
|
.related-posts {
|
|
margin-top: 32px;
|
|
padding-top: 24px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.post-share-title {
|
|
width: 100%;
|
|
font-size: var(--font-size-md);
|
|
font-weight: 300;
|
|
color: var(--text-muted);
|
|
margin: 0 0 4px 0;
|
|
}
|
|
|
|
.related-posts-title {
|
|
font-size: var(--font-size-md);
|
|
font-weight: 300;
|
|
color: var(--text-muted);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.related-posts-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.related-post-item {
|
|
margin: 0;
|
|
}
|
|
|
|
.related-post-link {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
background-color: var(--bg-secondary);
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
transition: background-color 0.2s ease;
|
|
gap: 16px;
|
|
}
|
|
|
|
.related-post-link:hover {
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
.related-post-title {
|
|
color: var(--text-primary);
|
|
font-size: 0.9375rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.related-post-meta {
|
|
color: var(--text-muted);
|
|
font-size: 0.8125rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Loading and error states */
|
|
.loading,
|
|
.no-posts,
|
|
.post-loading,
|
|
.post-not-found {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.post-not-found h1 {
|
|
font-size: var(--font-size-3xl);
|
|
margin-bottom: 16px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.post-not-found p {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.back-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--text-primary);
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
/* Footer section */
|
|
.home-footer {
|
|
margin-top: 4rem;
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
.home-footer-text {
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-footer-text);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.home-footer-text a {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.home-footer-text a:hover {
|
|
color: var(--link-hover);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Site footer styles (used by Footer component) */
|
|
.site-footer {
|
|
margin-top: 4rem;
|
|
margin-bottom: 4rem;
|
|
padding-top: 2rem;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.site-footer-content {
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-footer-text);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.site-footer-text {
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-footer-text);
|
|
line-height: 1.7;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.site-footer-text:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.site-footer-text a {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.site-footer-text a:hover {
|
|
color: var(--link-hover);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.site-footer-link {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.site-footer-link:hover {
|
|
color: var(--link-hover);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Site footer image styles */
|
|
.site-footer-image-wrapper {
|
|
/* display: block;*/
|
|
margin: 5px;
|
|
}
|
|
|
|
.site-footer-image {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.site-footer-image-caption {
|
|
display: block;
|
|
margin-top: 0.5rem;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ============================================
|
|
Social Footer Styles
|
|
Displays social links on left and copyright on right
|
|
============================================ */
|
|
.social-footer {
|
|
margin-top: 2rem;
|
|
padding-top: 1.5rem;
|
|
padding-bottom: 1.5rem;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.social-footer-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* Social links container */
|
|
.social-footer-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.social-footer-link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-secondary);
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.social-footer-link:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Copyright section */
|
|
.social-footer-copyright {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
font-style: italic;
|
|
}
|
|
|
|
.social-footer-copyright-symbol {
|
|
font-size: var(--font-size-md);
|
|
}
|
|
|
|
.social-footer-copyright-name {
|
|
font-style: italic;
|
|
}
|
|
|
|
.social-footer-copyright-year {
|
|
font-style: normal;
|
|
}
|
|
|
|
/* Mobile responsive */
|
|
@media (max-width: 480px) {
|
|
.social-footer-content {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.social-footer-links {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
Blog Page Styles
|
|
Dedicated /blog page that shows all posts
|
|
============================================ */
|
|
.blog-page {
|
|
padding-top: 20px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding-left: 24px;
|
|
padding-right: 24px;
|
|
}
|
|
|
|
/* List view: constrain to narrower width for readability */
|
|
.blog-page-list {
|
|
max-width: 800px;
|
|
}
|
|
|
|
/* Card view: use full width up to 1200px */
|
|
.blog-page-cards {
|
|
max-width: 1200px;
|
|
}
|
|
|
|
.blog-header {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.blog-header-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 20px;
|
|
}
|
|
|
|
.blog-title {
|
|
font-size: var(--font-size-blog-page-title);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.blog-description {
|
|
font-size: var(--font-size-blog-page-description);
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
max-width: 600px;
|
|
}
|
|
|
|
.blog-posts {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/* Blog hero section for featured post */
|
|
.blog-hero-section {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
/* Blog featured row section (2-column grid for additional featured posts) */
|
|
.blog-featured-row {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.blog-featured-row .post-cards {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
/* Blog hero card (large featured card like Giga.ai/news) */
|
|
.blog-hero-card {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 32px;
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
text-decoration: none;
|
|
overflow: hidden;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.blog-hero-card:hover {
|
|
background-color: var(--bg-hover);
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
/* Hero image wrapper */
|
|
.blog-hero-image-wrapper {
|
|
aspect-ratio: 16 / 10;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.blog-hero-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.blog-hero-card:hover .blog-hero-image {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
/* Hero content section */
|
|
.blog-hero-content {
|
|
padding: 32px 32px 32px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Hero tags */
|
|
.blog-hero-tags {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.blog-hero-tag {
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 500;
|
|
color: var(--accent-color, var(--text-secondary));
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Hero date */
|
|
.blog-hero-date {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
/* Hero title */
|
|
.blog-hero-title {
|
|
font-size: var(--font-size-4xl);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0 0 16px 0;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* Hero excerpt */
|
|
.blog-hero-excerpt {
|
|
font-size: var(--font-size-base);
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
margin: 0 0 20px 0;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Hero footer with author and read more */
|
|
.blog-hero-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.blog-hero-author {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.blog-hero-author-image {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.blog-hero-author-name {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.blog-hero-read-time {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.blog-hero-read-more {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Blog post cards grid (thumbnail view) */
|
|
.post-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* 2-column layout when there's a hero post */
|
|
.post-cards-2col {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.post-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
text-decoration: none;
|
|
transition: all 0.15s ease;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.post-card:hover {
|
|
background-color: var(--bg-hover);
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
/* Thumbnail image wrapper with landscape aspect ratio (like Giga.ai) */
|
|
.post-card-image-wrapper {
|
|
width: 100%;
|
|
aspect-ratio: 16 / 10;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Image displays as landscape regardless of original aspect ratio */
|
|
.post-card-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.post-card:hover .post-card-image {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
/* Content wrapper for text below image */
|
|
.post-card-content {
|
|
padding: 16px;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Cards without images get padding directly */
|
|
.post-card:not(:has(.post-card-image-wrapper)) {
|
|
padding: 20px;
|
|
}
|
|
|
|
.post-card-title {
|
|
font-size: var(--font-size-featured-card-title);
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
margin: 0 0 8px 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.post-card-excerpt {
|
|
font-size: var(--font-size-featured-card-excerpt);
|
|
color: var(--text-secondary);
|
|
margin: 0 0 12px 0;
|
|
line-height: 1.5;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.post-card-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: var(--font-size-post-meta);
|
|
color: var(--text-muted);
|
|
margin-top: auto;
|
|
}
|
|
|
|
.post-card-read-time {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.post-card-date {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.blog-disabled-message {
|
|
color: var(--text-muted);
|
|
font-size: 0.95rem;
|
|
padding: 20px;
|
|
background: var(--bg-secondary);
|
|
border-radius: 8px;
|
|
border: 1px dashed var(--border-color);
|
|
}
|
|
|
|
.blog-disabled-message code {
|
|
background: var(--inline-code-bg);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
/* Tag Page Styles */
|
|
.tag-page {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.tag-header {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.tag-header-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 20px;
|
|
}
|
|
|
|
.tag-title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.tag-icon {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.tag-title {
|
|
font-size: var(--font-size-blog-page-title);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
.tag-description {
|
|
font-size: var(--font-size-blog-page-description);
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.tag-posts {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.tag-not-found {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.tag-not-found h1 {
|
|
font-size: var(--font-size-3xl);
|
|
margin-bottom: 16px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.tag-not-found p {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* Author page styles */
|
|
.author-page {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.author-header {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.author-header-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 20px;
|
|
}
|
|
|
|
.author-title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.author-icon {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.author-title {
|
|
font-size: var(--font-size-blog-page-title);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.author-description {
|
|
font-size: var(--font-size-blog-page-description);
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.author-posts {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.author-not-found {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.author-not-found h1 {
|
|
font-size: var(--font-size-3xl);
|
|
margin-bottom: 16px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.author-not-found p {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* Responsive styles */
|
|
@media (max-width: 768px) {
|
|
.main-content {
|
|
padding: 48px 16px 16px 24px;
|
|
}
|
|
|
|
.top-nav {
|
|
top: 6px;
|
|
left: 6px;
|
|
right: 6px;
|
|
gap: 8px;
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.top-nav-logo {
|
|
height: 24px;
|
|
}
|
|
|
|
.page-nav {
|
|
gap: 12px;
|
|
}
|
|
|
|
.page-nav-link {
|
|
font-size: var(--font-size-nav-link);
|
|
}
|
|
|
|
.home-name {
|
|
font-size: var(--font-size-home-name);
|
|
}
|
|
|
|
/* Blog page responsive */
|
|
.blog-page {
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.blog-title {
|
|
font-size: var(--font-size-blog-page-title);
|
|
}
|
|
|
|
.blog-header {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.post-link .post-title {
|
|
font-size: var(--font-size-post-list-title);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.post-header .post-title {
|
|
font-size: var(--font-size-post-title);
|
|
}
|
|
|
|
.post-link {
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.post-meta {
|
|
font-size: var(--font-size-post-meta);
|
|
}
|
|
|
|
.blog-post-content {
|
|
font-size: var(--font-size-blog-content);
|
|
}
|
|
|
|
.blog-h1 {
|
|
font-size: var(--font-size-blog-h1);
|
|
}
|
|
|
|
.blog-h2 {
|
|
font-size: var(--font-size-blog-h2);
|
|
}
|
|
|
|
.blog-h3 {
|
|
font-size: var(--font-size-blog-h3);
|
|
}
|
|
|
|
.blog-h4 {
|
|
font-size: var(--font-size-blog-h4);
|
|
}
|
|
|
|
.blog-h5 {
|
|
font-size: var(--font-size-blog-h5);
|
|
}
|
|
|
|
.blog-h6 {
|
|
font-size: var(--font-size-blog-h6);
|
|
}
|
|
|
|
/* Adjust anchor link position on mobile */
|
|
.heading-anchor {
|
|
left: -1.2em;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
/* Table mobile styles */
|
|
.blog-table {
|
|
font-size: var(--font-size-table);
|
|
}
|
|
|
|
.blog-th,
|
|
.blog-td {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
/* Copy page dropdown mobile */
|
|
.copy-page-menu {
|
|
width: 260px;
|
|
right: -8px;
|
|
}
|
|
}
|
|
|
|
/* Dark mode shadow adjustment */
|
|
:root[data-theme="dark"] .copy-page-menu {
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* Tan theme shadow adjustment */
|
|
:root[data-theme="tan"] .copy-page-menu {
|
|
box-shadow: 0 4px 16px rgba(139, 115, 85, 0.12);
|
|
}
|
|
|
|
/* Selection styles */
|
|
::selection {
|
|
background-color: var(--accent);
|
|
color: var(--bg-primary);
|
|
}
|
|
|
|
/* Scrollbar styles */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border-color);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-muted);
|
|
}
|
|
|
|
/* Stats page styles (legacy - kept for backwards compatibility) */
|
|
.stats-page {
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.stats-nav {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.stats-header {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.stats-title {
|
|
font-size: var(--font-size-stats-title);
|
|
font-weight: 400;
|
|
margin-bottom: 12px;
|
|
letter-spacing: -0.02em;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.stats-subtitle {
|
|
font-size: var(--font-size-stats-subtitle);
|
|
color: var(--text-secondary);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* Stats cards grid (legacy) */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
.stat-card {
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
.stat-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.stat-card-icon {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.stat-card-label {
|
|
font-size: var(--font-size-stat-card-label);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.stat-card-value {
|
|
font-size: var(--font-size-stat-card-value);
|
|
font-weight: 400;
|
|
color: var(--text-primary);
|
|
margin-bottom: 4px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.stat-card-desc {
|
|
font-size: var(--font-size-stat-card-desc);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.stat-card-note {
|
|
font-size: var(--font-size-stat-card-note);
|
|
color: var(--text-secondary);
|
|
opacity: 0.7;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* Stats sections (legacy) */
|
|
.stats-section {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.stats-section-title {
|
|
font-size: var(--font-size-stats-section-title);
|
|
font-weight: 400;
|
|
color: var(--text-primary);
|
|
margin-bottom: 16px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* Stats list (legacy) */
|
|
.stats-list {
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stats-list-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 14px 16px;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.stats-list-item:hover {
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
.stats-list-item:not(:last-child) {
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.stats-list-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.stats-list-path,
|
|
.stats-list-title {
|
|
font-size: var(--font-size-stats-list-path);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.stats-list-type {
|
|
font-size: var(--font-size-stats-list-type);
|
|
color: var(--text-muted);
|
|
background-color: var(--bg-hover);
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.stats-list-count {
|
|
font-size: var(--font-size-stats-list-count);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* ============================================
|
|
MODERN STATS PAGE STYLES (WIDE LAYOUT)
|
|
Horizontal card design with numbered sections
|
|
============================================ */
|
|
|
|
/* Wide stats page container - full width layout */
|
|
.stats-page-wide {
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 40px 32px;
|
|
}
|
|
|
|
.stats-nav-wide {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.stats-header-wide {
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
.stats-title-wide {
|
|
font-size: var(--font-size-stats-title);
|
|
font-weight: 400;
|
|
margin-bottom: 12px;
|
|
letter-spacing: -0.02em;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.stats-subtitle-wide {
|
|
font-size: var(--font-size-stats-subtitle);
|
|
color: var(--text-secondary);
|
|
line-height: 1.7;
|
|
max-width: 600px;
|
|
}
|
|
|
|
/* Modern horizontal cards container - 5 equal columns on large screens */
|
|
.stats-cards-modern {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 0;
|
|
margin-bottom: 64px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
/* Ensure 6-column layout on large screens (explicit rule) */
|
|
@media (min-width: 1101px) {
|
|
.stats-cards-modern {
|
|
grid-template-columns: repeat(6, 1fr);
|
|
}
|
|
}
|
|
|
|
/* Individual modern stat card */
|
|
.stat-card-modern {
|
|
padding: 24px 20px;
|
|
background: var(--bg-secondary);
|
|
border-right: 1px solid var(--border-color);
|
|
transition: background-color 0.2s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 180px;
|
|
}
|
|
|
|
.stat-card-modern:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.stat-card-modern:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
/* Highlighted card state (like the green one in screenshot) */
|
|
.stat-card-modern.stat-card-highlighted {
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
.stat-card-modern.stat-card-highlighted:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
/* Card header with icon and number */
|
|
.stat-card-modern-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stat-card-modern-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
color: var(--text-muted);
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
.stat-card-modern-icon.highlighted {
|
|
background: #10b981;
|
|
border-color: #10b981;
|
|
color: white;
|
|
}
|
|
|
|
.stat-card-modern-number {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
font-family:
|
|
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
}
|
|
|
|
/* Card content */
|
|
.stat-card-modern-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.stat-card-modern-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0 0 8px 0;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* Highlighted title gets accent color */
|
|
.stat-card-highlighted .stat-card-modern-title {
|
|
color: #10b981;
|
|
}
|
|
|
|
.stat-card-modern-value {
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
color: var(--text-primary);
|
|
margin: 0 0 8px 0;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.stat-card-modern-desc {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.stat-card-modern-note {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
margin: 6px 0 0 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Wide stats sections */
|
|
.stats-section-wide {
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
.stats-section-title-wide {
|
|
font-size: var(--font-size-stats-section-title);
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
margin-bottom: 20px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* Wide stats list */
|
|
.stats-list-wide {
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stats-list-item-wide {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px 20px;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.stats-list-item-wide:hover {
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
.stats-list-item-wide:not(:last-child) {
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.stats-list-info-wide {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.stats-list-path-wide,
|
|
.stats-list-title-wide {
|
|
font-size: 15px;
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.stats-list-type-wide {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
background-color: var(--bg-hover);
|
|
padding: 3px 10px;
|
|
border-radius: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.stats-list-count-wide {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Stats responsive styles (legacy) */
|
|
@media (max-width: 900px) {
|
|
.stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.stats-title {
|
|
font-size: var(--font-size-stats-title);
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 12px;
|
|
}
|
|
|
|
.stat-card {
|
|
padding: 16px;
|
|
}
|
|
|
|
.stat-card-value {
|
|
font-size: var(--font-size-stat-card-value);
|
|
}
|
|
|
|
.stats-list-item {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
}
|
|
|
|
.stats-list-info {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Modern stats responsive styles */
|
|
@media (max-width: 1100px) {
|
|
.stats-page-wide {
|
|
padding: 32px 24px;
|
|
}
|
|
|
|
.stats-cards-modern {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.stat-card-modern {
|
|
min-height: 160px;
|
|
}
|
|
|
|
/* Remove right border on last card of each row (3rd, 6th) */
|
|
.stat-card-modern:nth-child(3),
|
|
.stat-card-modern:nth-child(6) {
|
|
border-right: none;
|
|
}
|
|
|
|
/* Add top border on second row (4th, 5th, 6th) */
|
|
.stat-card-modern:nth-child(4),
|
|
.stat-card-modern:nth-child(5),
|
|
.stat-card-modern:nth-child(6) {
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.stat-card-modern:nth-child(4) {
|
|
border-right: 1px solid var(--border-color);
|
|
}
|
|
|
|
.stat-card-modern:nth-child(5) {
|
|
border-right: 1px solid var(--border-color);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.stats-page-wide {
|
|
padding: 24px 16px;
|
|
}
|
|
|
|
.stats-cards-modern {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.stat-card-modern {
|
|
padding: 20px 16px;
|
|
min-height: 150px;
|
|
}
|
|
|
|
/* Remove right border on even cards (end of each row) */
|
|
.stat-card-modern:nth-child(2n) {
|
|
border-right: none;
|
|
}
|
|
|
|
/* Add top border on rows 2 and 3 (cards 3-6) */
|
|
.stat-card-modern:nth-child(3),
|
|
.stat-card-modern:nth-child(4),
|
|
.stat-card-modern:nth-child(5),
|
|
.stat-card-modern:nth-child(6) {
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Odd cards in rows 2+ need right border */
|
|
.stat-card-modern:nth-child(3),
|
|
.stat-card-modern:nth-child(5) {
|
|
border-right: 1px solid var(--border-color);
|
|
}
|
|
|
|
.stat-card-modern-value {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.stats-title-wide {
|
|
font-size: var(--font-size-4xl);
|
|
}
|
|
|
|
.stats-list-item-wide {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.stats-list-info-wide {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.stats-cards-modern {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.stat-card-modern {
|
|
border-right: none !important;
|
|
min-height: auto;
|
|
padding: 18px 16px;
|
|
}
|
|
|
|
.stat-card-modern:not(:first-child) {
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.stat-card-modern-header {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.stat-card-modern-value {
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
|
|
/* Search button in top nav */
|
|
.search-button {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition:
|
|
color 0.2s ease,
|
|
background-color 0.2s ease;
|
|
}
|
|
|
|
.search-button:hover {
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
/* Search modal backdrop */
|
|
.search-modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding-top: 15vh;
|
|
animation: backdropFadeIn 0.15s ease;
|
|
}
|
|
|
|
@keyframes backdropFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Search modal container */
|
|
.search-modal {
|
|
background-color: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
width: 100%;
|
|
max-width: 560px;
|
|
max-height: 70vh;
|
|
margin: 0 16px;
|
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
animation: modalSlideIn 0.2s ease;
|
|
}
|
|
|
|
@keyframes modalSlideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px) scale(0.98);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
/* Search mode toggle (Keyword / Semantic) */
|
|
.search-mode-toggle {
|
|
display: flex;
|
|
gap: 6px;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.search-mode-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 12px;
|
|
background: transparent;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
color: var(--text-muted);
|
|
font-size: var(--font-size-sm);
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.search-mode-btn:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.search-mode-btn.active {
|
|
background: var(--bg-primary);
|
|
border-color: var(--text-secondary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Search result meta (type + score) */
|
|
.search-result-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 2px;
|
|
margin-left: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.search-result-score {
|
|
font-size: var(--font-size-2xs);
|
|
color: var(--text-muted);
|
|
font-family: var(--font-family-mono);
|
|
}
|
|
|
|
/* Empty state hint for semantic search */
|
|
.search-modal-empty-hint {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-muted);
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Search input wrapper */
|
|
.search-modal-input-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
gap: 12px;
|
|
}
|
|
|
|
.search-modal-icon {
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.search-modal-input {
|
|
flex: 1;
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
font-size: var(--font-size-search-input);
|
|
color: var(--text-primary);
|
|
font-family: inherit;
|
|
}
|
|
|
|
.search-modal-input::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.search-modal-close {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
padding: 6px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition:
|
|
color 0.15s ease,
|
|
background-color 0.15s ease;
|
|
}
|
|
|
|
.search-modal-close:hover {
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
/* Search results container */
|
|
.search-modal-results {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 8px;
|
|
min-height: 120px;
|
|
}
|
|
|
|
/* Search hint (empty state) */
|
|
.search-modal-hint {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 32px 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.search-modal-hint p {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-size-search-hint);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.search-modal-shortcuts {
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.search-shortcut {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: var(--font-size-search-shortcut);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.search-shortcut kbd {
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
padding: 2px 6px;
|
|
font-family: inherit;
|
|
font-size: var(--font-size-search-shortcut-kbd);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Loading and empty states */
|
|
.search-modal-loading,
|
|
.search-modal-empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 32px 16px;
|
|
color: var(--text-muted);
|
|
font-size: var(--font-size-search-hint);
|
|
}
|
|
|
|
/* Search results list */
|
|
.search-results-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.search-result-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
width: 100%;
|
|
padding: 12px;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
transition: background-color 0.1s ease;
|
|
}
|
|
|
|
.search-result-item:hover,
|
|
.search-result-item.selected {
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
.search-result-icon {
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.search-result-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.search-result-title {
|
|
font-size: var(--font-size-search-result-title);
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.search-result-snippet {
|
|
font-size: var(--font-size-search-result-snippet);
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.search-result-type {
|
|
font-size: var(--font-size-search-result-type);
|
|
color: var(--text-muted);
|
|
background-color: var(--bg-secondary);
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
flex-shrink: 0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.search-result-arrow {
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.search-result-item:hover .search-result-arrow,
|
|
.search-result-item.selected .search-result-arrow {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Search modal footer */
|
|
.search-modal-footer {
|
|
display: flex;
|
|
gap: 16px;
|
|
padding: 10px 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
background-color: var(--bg-secondary);
|
|
}
|
|
|
|
.search-footer-hint {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: var(--font-size-search-footer-hint);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.search-footer-hint kbd {
|
|
background-color: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
padding: 2px 6px;
|
|
font-family: inherit;
|
|
font-size: var(--font-size-search-shortcut-kbd);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Dark theme adjustments for search modal */
|
|
:root[data-theme="dark"] .search-modal-backdrop {
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
:root[data-theme="dark"] .search-modal {
|
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* Tan theme adjustments for search modal */
|
|
:root[data-theme="tan"] .search-modal {
|
|
box-shadow: 0 16px 48px rgba(139, 115, 85, 0.15);
|
|
}
|
|
|
|
/* Cloud theme adjustments for search modal */
|
|
:root[data-theme="cloud"] .search-modal {
|
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Search result highlighting on destination page */
|
|
.search-highlight {
|
|
background-color: var(--search-highlight-bg);
|
|
border-radius: 2px;
|
|
padding: 1px 2px;
|
|
margin: 0 -2px;
|
|
transition: background-color 0.5s ease-out;
|
|
}
|
|
|
|
.search-highlight-active {
|
|
background-color: var(--search-highlight-active);
|
|
animation: search-highlight-pulse 0.6s ease-out;
|
|
}
|
|
|
|
@keyframes search-highlight-pulse {
|
|
0% { background-color: var(--accent); }
|
|
100% { background-color: var(--search-highlight-active); }
|
|
}
|
|
|
|
/* Theme-specific search highlight colors */
|
|
:root[data-theme="dark"] {
|
|
--search-highlight-bg: rgba(250, 250, 250, 0.15);
|
|
--search-highlight-active: rgba(250, 250, 250, 0.35);
|
|
}
|
|
|
|
:root[data-theme="light"] {
|
|
--search-highlight-bg: rgba(17, 17, 17, 0.08);
|
|
--search-highlight-active: rgba(17, 17, 17, 0.18);
|
|
}
|
|
|
|
:root[data-theme="tan"] {
|
|
--search-highlight-bg: rgba(139, 115, 85, 0.15);
|
|
--search-highlight-active: rgba(139, 115, 85, 0.30);
|
|
}
|
|
|
|
:root[data-theme="cloud"] {
|
|
--search-highlight-bg: rgba(100, 116, 139, 0.12);
|
|
--search-highlight-active: rgba(100, 116, 139, 0.25);
|
|
}
|
|
|
|
/* Mobile responsive search modal */
|
|
@media (max-width: 768px) {
|
|
.search-modal-backdrop {
|
|
padding-top: 10vh;
|
|
}
|
|
|
|
.search-modal {
|
|
max-height: 80vh;
|
|
margin: 0 12px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.search-modal-input-wrapper {
|
|
padding: 14px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.search-modal-input {
|
|
font-size: var(--font-size-base); /* Prevent zoom on iOS */
|
|
}
|
|
|
|
.search-modal-results {
|
|
padding: 6px;
|
|
}
|
|
|
|
.search-result-item {
|
|
padding: 10px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.search-result-title {
|
|
font-size: var(--font-size-search-result-title);
|
|
}
|
|
|
|
.search-result-snippet {
|
|
font-size: var(--font-size-search-result-snippet);
|
|
}
|
|
|
|
.search-result-type {
|
|
font-size: var(--font-size-search-result-type);
|
|
padding: 2px 6px;
|
|
}
|
|
|
|
.search-modal-shortcuts {
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.search-modal-footer {
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
padding: 8px 14px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.search-modal-backdrop {
|
|
padding-top: 5vh;
|
|
}
|
|
|
|
.search-modal {
|
|
max-height: 85vh;
|
|
}
|
|
|
|
.search-result-arrow {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Featured section header with toggle */
|
|
.home-featured-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.home-featured-header .home-featured-intro {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* View toggle button */
|
|
.view-toggle-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 0;
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.view-toggle-button:hover {
|
|
background-color: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
/* Featured cards grid */
|
|
.featured-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.featured-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
transition: all 0.15s ease;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.featured-card:hover {
|
|
background-color: var(--bg-hover);
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
/* Thumbnail image wrapper with square aspect ratio */
|
|
.featured-card-image-wrapper {
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Image displays as square regardless of original aspect ratio */
|
|
.featured-card-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.featured-card:hover .featured-card-image {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
/* Content wrapper for text below image */
|
|
.featured-card-content {
|
|
padding: 16px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* Cards without images get padding directly */
|
|
.featured-card:not(:has(.featured-card-image-wrapper)) {
|
|
padding: 20px;
|
|
}
|
|
|
|
.featured-card-title {
|
|
font-size: var(--font-size-featured-card-title);
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
margin: 0 0 8px 0;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.featured-card-excerpt {
|
|
font-size: var(--font-size-featured-card-excerpt);
|
|
color: var(--text-secondary);
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ============================================
|
|
GITHUB CONTRIBUTIONS GRAPH
|
|
Theme-aware contribution calendar
|
|
============================================ */
|
|
.github-contributions-container {
|
|
margin: 32px 0 48px;
|
|
padding: 16px 20px;
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.github-contributions-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
|
|
.github-contributions-header-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.github-contributions-title {
|
|
font-size: var(--font-size-md);
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.github-contributions-count {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.github-contributions-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.github-nav-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.github-nav-button:hover:not(:disabled) {
|
|
background-color: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
.github-nav-button:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.github-year {
|
|
font-size: var(--font-size-md);
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
min-width: 48px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Graph layout */
|
|
.github-contributions-graph {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.github-contributions-months {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.github-contributions-day-spacer {
|
|
width: 28px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.github-contributions-month-labels {
|
|
display: grid;
|
|
grid-template-columns: repeat(53, 1fr);
|
|
flex: 1;
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.github-contributions-month {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.github-contributions-body {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.github-contributions-days {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
width: 28px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.github-contributions-day-label {
|
|
height: 10px;
|
|
font-size: 9px;
|
|
color: var(--text-muted);
|
|
line-height: 10px;
|
|
text-align: right;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.github-contributions-grid {
|
|
display: grid;
|
|
grid-template-rows: repeat(7, 1fr);
|
|
grid-auto-flow: column;
|
|
gap: 2px;
|
|
flex: 1;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* Contribution cells */
|
|
.github-contribution-cell {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 2px;
|
|
transition: filter 0.15s ease;
|
|
}
|
|
|
|
.github-contributions-link {
|
|
display: block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.github-contributions-link:hover .github-contribution-cell {
|
|
filter: brightness(1.15);
|
|
}
|
|
|
|
/* Legend */
|
|
.github-contributions-legend {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 4px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.github-contributions-legend-label {
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.github-contributions-legend .github-contribution-cell {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
/* Error state */
|
|
.github-contributions-error {
|
|
padding: 24px;
|
|
text-align: center;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Theme-specific contribution colors */
|
|
/* Dark theme - GitHub green on dark */
|
|
:root[data-theme="dark"] {
|
|
--contrib-empty: #161b22;
|
|
--contrib-level-1: #0e4429;
|
|
--contrib-level-2: #006d32;
|
|
--contrib-level-3: #26a641;
|
|
--contrib-level-4: #39d353;
|
|
}
|
|
|
|
/* Light theme - GitHub green */
|
|
:root[data-theme="light"] {
|
|
--contrib-empty: #ebedf0;
|
|
--contrib-level-1: #9be9a8;
|
|
--contrib-level-2: #40c463;
|
|
--contrib-level-3: #30a14e;
|
|
--contrib-level-4: #216e39;
|
|
}
|
|
|
|
/* Tan theme - warm brown tones */
|
|
:root[data-theme="tan"] {
|
|
--contrib-empty: #ebe7df;
|
|
--contrib-level-1: #d4c4a8;
|
|
--contrib-level-2: #b5986d;
|
|
--contrib-level-3: #8b7355;
|
|
--contrib-level-4: #5d4e37;
|
|
}
|
|
|
|
/* Cloud theme - gray-blue tones */
|
|
:root[data-theme="cloud"] {
|
|
--contrib-empty: #e0e0e0;
|
|
--contrib-level-1: #b0c4de;
|
|
--contrib-level-2: #7ba3c9;
|
|
--contrib-level-3: #4682b4;
|
|
--contrib-level-4: #2f5a7c;
|
|
}
|
|
|
|
/* Apply colors to cells */
|
|
.github-contribution-cell[data-level="empty"] {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.github-contribution-cell[data-level="0"] {
|
|
background-color: var(--contrib-empty);
|
|
}
|
|
|
|
.github-contribution-cell[data-level="1"] {
|
|
background-color: var(--contrib-level-1);
|
|
}
|
|
|
|
.github-contribution-cell[data-level="2"] {
|
|
background-color: var(--contrib-level-2);
|
|
}
|
|
|
|
.github-contribution-cell[data-level="3"] {
|
|
background-color: var(--contrib-level-3);
|
|
}
|
|
|
|
.github-contribution-cell[data-level="4"] {
|
|
background-color: var(--contrib-level-4);
|
|
}
|
|
|
|
/* Theme-specific container shadows */
|
|
:root[data-theme="dark"] .github-contributions-container {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
:root[data-theme="tan"] .github-contributions-container {
|
|
box-shadow: 0 2px 8px rgba(139, 115, 85, 0.1);
|
|
}
|
|
|
|
:root[data-theme="cloud"] .github-contributions-container {
|
|
box-shadow: 0 2px 8px rgba(100, 116, 139, 0.1);
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.github-contributions-container {
|
|
margin: 24px 0 32px;
|
|
padding: 12px 14px;
|
|
}
|
|
|
|
.github-contributions-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
}
|
|
|
|
.github-contributions-nav {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.github-contributions-day-spacer,
|
|
.github-contributions-days {
|
|
width: 20px;
|
|
}
|
|
|
|
.github-contribution-cell {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.github-contributions-legend .github-contribution-cell {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.github-contributions-grid {
|
|
gap: 1px;
|
|
}
|
|
|
|
.github-contributions-day-label {
|
|
font-size: 8px;
|
|
height: 8px;
|
|
line-height: 8px;
|
|
}
|
|
|
|
.github-contributions-month-labels {
|
|
font-size: 9px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.github-contributions-container {
|
|
margin: 20px 0 28px;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.github-contribution-cell {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.github-contributions-legend .github-contribution-cell {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.github-contributions-day-spacer,
|
|
.github-contributions-days {
|
|
display: none;
|
|
}
|
|
|
|
.github-contributions-month-labels {
|
|
font-size: 8px;
|
|
}
|
|
|
|
.github-contributions-legend-label {
|
|
font-size: 9px;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
VISITOR MAP STYLES
|
|
============================================
|
|
World map showing real-time visitor locations
|
|
Uses Netlify geo data, privacy friendly (no IP stored)
|
|
============================================ */
|
|
|
|
/* Visitor map theme colors */
|
|
:root[data-theme="dark"] {
|
|
--visitor-map-bg: #141414;
|
|
--visitor-map-land: #4a4a4a;
|
|
--visitor-map-dot: #60a5fa;
|
|
--visitor-map-dot-core: #93c5fd;
|
|
}
|
|
|
|
:root[data-theme="light"] {
|
|
--visitor-map-bg: #fafafa;
|
|
--visitor-map-land: #9ca3af;
|
|
--visitor-map-dot: #3b82f6;
|
|
--visitor-map-dot-core: #60a5fa;
|
|
}
|
|
|
|
:root[data-theme="tan"] {
|
|
--visitor-map-bg: #f3f1ed;
|
|
--visitor-map-land: #b8a892;
|
|
--visitor-map-dot: #8b7355;
|
|
--visitor-map-dot-core: #b5986d;
|
|
}
|
|
|
|
:root[data-theme="cloud"] {
|
|
--visitor-map-bg: #f0f4f8;
|
|
--visitor-map-land: #94a3b8;
|
|
--visitor-map-dot: #4682b4;
|
|
--visitor-map-dot-core: #7ba3c9;
|
|
}
|
|
|
|
/* Visitor map container */
|
|
.visitor-map-container {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.visitor-map-title {
|
|
font-size: var(--font-size-stats-section-title);
|
|
color: var(--text-primary);
|
|
margin-bottom: 4px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.visitor-map-subtitle {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-muted);
|
|
margin: 0 0 16px 0;
|
|
}
|
|
|
|
.visitor-map-wrapper {
|
|
position: relative;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background: var(--visitor-map-bg);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.visitor-map-svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: 300px;
|
|
}
|
|
|
|
/* Pulse animation for visitor dots */
|
|
@keyframes visitor-pulse {
|
|
0% {
|
|
r: 5;
|
|
opacity: 0.6;
|
|
}
|
|
50% {
|
|
r: 18;
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
r: 5;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes visitor-pulse-mid {
|
|
0% {
|
|
r: 5;
|
|
opacity: 0.3;
|
|
}
|
|
50% {
|
|
r: 12;
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
r: 5;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.visitor-pulse-ring {
|
|
animation: visitor-pulse 2.5s ease-out infinite;
|
|
}
|
|
|
|
.visitor-pulse-ring-mid {
|
|
animation: visitor-pulse-mid 2.5s ease-out infinite;
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.visitor-dot-center {
|
|
filter: drop-shadow(0 0 4px var(--visitor-map-dot));
|
|
}
|
|
|
|
/* Visitor count badge */
|
|
.visitor-map-badge {
|
|
position: absolute;
|
|
bottom: 12px;
|
|
left: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 12px;
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 20px;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.visitor-map-badge-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--visitor-map-dot);
|
|
border-radius: 50%;
|
|
animation: badge-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes badge-pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
/* No box-shadow on visitor map wrapper - clean flat design */
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.visitor-map-container {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.visitor-map-svg {
|
|
max-height: 200px;
|
|
}
|
|
|
|
.visitor-map-badge {
|
|
font-size: var(--font-size-xs);
|
|
padding: 4px 10px;
|
|
gap: 6px;
|
|
}
|
|
|
|
.visitor-map-badge-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.visitor-map-svg {
|
|
max-height: 160px;
|
|
}
|
|
|
|
.visitor-map-badge {
|
|
bottom: 8px;
|
|
left: 8px;
|
|
}
|
|
}
|
|
|
|
/* Logo marquee container */
|
|
.logo-marquee-container {
|
|
margin: 48px 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.logo-marquee-title {
|
|
font-size: var(--font-size-logo-marquee-title);
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.logo-marquee {
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
mask-image: linear-gradient(
|
|
to right,
|
|
transparent,
|
|
black 10%,
|
|
black 90%,
|
|
transparent
|
|
);
|
|
-webkit-mask-image: linear-gradient(
|
|
to right,
|
|
transparent,
|
|
black 10%,
|
|
black 90%,
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.logo-marquee-track {
|
|
display: flex;
|
|
animation: marquee-scroll var(--marquee-speed, 30s) linear infinite;
|
|
width: max-content;
|
|
}
|
|
|
|
@keyframes marquee-scroll {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.logo-marquee-item {
|
|
flex-shrink: 0;
|
|
padding: 0 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logo-marquee-image {
|
|
height: 56px;
|
|
width: auto;
|
|
max-width: 120px;
|
|
object-fit: contain;
|
|
filter: grayscale(100%);
|
|
opacity: 0.6;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.logo-marquee-image:hover {
|
|
filter: grayscale(0%);
|
|
opacity: 1;
|
|
}
|
|
|
|
.logo-marquee-link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logo-marquee-link:hover .logo-marquee-image {
|
|
filter: grayscale(0%);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Dark theme adjustments for featured cards */
|
|
:root[data-theme="dark"] .featured-card {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
:root[data-theme="dark"] .featured-card:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Dark theme adjustments for post cards */
|
|
:root[data-theme="dark"] .post-card {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
:root[data-theme="dark"] .post-card:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
:root[data-theme="dark"] .logo-marquee-image {
|
|
filter: grayscale(100%) invert(1);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
:root[data-theme="dark"] .logo-marquee-image:hover {
|
|
filter: invert(1);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
:root[data-theme="dark"] .logo-marquee-link:hover .logo-marquee-image {
|
|
filter: invert(1);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Logo static grid mode (non-scrolling) */
|
|
.logo-static-grid {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 48px;
|
|
flex-wrap: wrap;
|
|
padding: 0 24px;
|
|
}
|
|
|
|
.logo-static-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.logo-static-grid {
|
|
gap: 32px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.logo-static-grid {
|
|
gap: 24px;
|
|
}
|
|
}
|
|
|
|
/* Tan theme adjustments for featured cards */
|
|
:root[data-theme="tan"] .featured-card {
|
|
box-shadow: 0 2px 8px rgba(139, 115, 85, 0.08);
|
|
}
|
|
|
|
:root[data-theme="tan"] .featured-card:hover {
|
|
box-shadow: 0 4px 12px rgba(139, 115, 85, 0.12);
|
|
}
|
|
|
|
:root[data-theme="tan"] .post-card {
|
|
box-shadow: 0 2px 8px rgba(139, 115, 85, 0.08);
|
|
}
|
|
|
|
:root[data-theme="tan"] .post-card:hover {
|
|
box-shadow: 0 4px 12px rgba(139, 115, 85, 0.12);
|
|
}
|
|
|
|
/* Cloud theme adjustments for featured cards */
|
|
:root[data-theme="cloud"] .featured-card {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
:root[data-theme="cloud"] .featured-card:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
:root[data-theme="cloud"] .post-card {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
:root[data-theme="cloud"] .post-card:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Featured cards responsive */
|
|
@media (max-width: 768px) {
|
|
.featured-cards {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 12px;
|
|
}
|
|
|
|
.featured-card:not(:has(.featured-card-image-wrapper)) {
|
|
padding: 16px;
|
|
}
|
|
|
|
.featured-card-content {
|
|
padding: 12px;
|
|
}
|
|
|
|
.featured-card-title {
|
|
font-size: var(--font-size-search-hint);
|
|
}
|
|
|
|
.featured-card-excerpt {
|
|
font-size: var(--font-size-sm);
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.logo-marquee-item {
|
|
padding: 0 24px;
|
|
}
|
|
|
|
.logo-marquee-image {
|
|
height: 28px;
|
|
max-width: 100px;
|
|
}
|
|
|
|
/* Blog hero card responsive (tablet) */
|
|
.blog-hero-card {
|
|
grid-template-columns: 1fr;
|
|
gap: 0;
|
|
}
|
|
|
|
.blog-hero-image-wrapper {
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
.blog-hero-content {
|
|
padding: 24px;
|
|
}
|
|
|
|
.blog-hero-title {
|
|
font-size: var(--font-size-3xl);
|
|
}
|
|
|
|
/* Blog featured row responsive (tablet) */
|
|
.blog-featured-row .post-cards {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
/* Blog post cards responsive */
|
|
.post-cards {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 12px;
|
|
}
|
|
|
|
.post-cards-2col {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.post-card:not(:has(.post-card-image-wrapper)) {
|
|
padding: 16px;
|
|
}
|
|
|
|
.post-card-content {
|
|
padding: 12px;
|
|
}
|
|
|
|
.post-card-title {
|
|
font-size: var(--font-size-search-hint);
|
|
}
|
|
|
|
.post-card-excerpt {
|
|
font-size: var(--font-size-sm);
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.blog-header-top {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
/* Tag page responsive */
|
|
.tag-header-top {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.tag-title {
|
|
font-size: var(--font-size-blog-page-title);
|
|
}
|
|
|
|
.tag-title-row {
|
|
gap: 8px;
|
|
}
|
|
|
|
.tag-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
/* Related posts responsive */
|
|
.related-post-link {
|
|
padding: 10px 12px;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
}
|
|
|
|
.related-post-title {
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
/* Blog page mobile padding */
|
|
.blog-page {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
/* Blog hero card mobile */
|
|
.blog-hero-content {
|
|
padding: 16px;
|
|
}
|
|
|
|
.blog-hero-title {
|
|
font-size: var(--font-size-2xl);
|
|
}
|
|
|
|
.blog-hero-excerpt {
|
|
font-size: var(--font-size-sm);
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.blog-hero-footer {
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.blog-hero-read-more {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* Blog featured row mobile (single column) */
|
|
.blog-featured-row .post-cards {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.featured-cards {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/* On mobile single column, use smaller square aspect ratio */
|
|
.featured-card-image-wrapper {
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
.post-cards {
|
|
grid-template-columns: 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.post-cards-2col {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.post-card-image-wrapper {
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
.view-toggle-button {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.logo-marquee-item {
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.logo-marquee-image {
|
|
height: 50px;
|
|
max-width: 80px;
|
|
}
|
|
}
|
|
|
|
/* ===========================================
|
|
MOBILE MENU STYLES
|
|
Left-side drawer for mobile/tablet navigation
|
|
=========================================== */
|
|
|
|
/* Hide mobile controls on desktop, show on mobile/tablet */
|
|
.mobile-nav-controls {
|
|
display: none;
|
|
}
|
|
|
|
/* Show desktop nav by default */
|
|
.desktop-only {
|
|
display: flex;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
/* Move top-nav to left side on mobile/tablet */
|
|
.top-nav {
|
|
right: auto;
|
|
left: 13px;
|
|
gap: 4px;
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
.mobile-nav-controls {
|
|
display: flex !important;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.desktop-only {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* Hamburger button */
|
|
.hamburger-button {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition:
|
|
color 0.2s ease,
|
|
background-color 0.2s ease;
|
|
}
|
|
|
|
.hamburger-button:hover {
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
/* Mobile menu backdrop */
|
|
.mobile-menu-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
z-index: 998;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition:
|
|
opacity 0.25s ease,
|
|
visibility 0.25s ease;
|
|
backdrop-filter: blur(2px);
|
|
-webkit-backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.mobile-menu-backdrop.open {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* Mobile menu drawer */
|
|
.mobile-menu-drawer {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100vh;
|
|
width: 280px;
|
|
max-width: 85vw;
|
|
background-color: var(--bg-primary);
|
|
z-index: 999;
|
|
transform: translateX(-100%);
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.mobile-menu-drawer.open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
/* Close button */
|
|
.mobile-menu-close {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition:
|
|
color 0.2s ease,
|
|
background-color 0.2s ease;
|
|
}
|
|
|
|
.mobile-menu-close:hover {
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
/* Menu content area */
|
|
.mobile-menu-content {
|
|
flex: 1;
|
|
padding: 1px 16px 16px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Mobile navigation links */
|
|
.mobile-nav-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.mobile-nav-link {
|
|
display: block;
|
|
padding: 8px 12px;
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
font-family: inherit;
|
|
font-size: var(--font-size-mobile-nav-link);
|
|
font-weight: 500;
|
|
border-radius: 6px;
|
|
transition:
|
|
background-color 0.15s ease,
|
|
color 0.15s ease;
|
|
}
|
|
|
|
.mobile-nav-link:hover {
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
/* Mobile docs sidebar in hamburger menu */
|
|
.mobile-menu-docs {
|
|
margin-top: 16px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.mobile-menu-docs .docs-mobile-sidebar {
|
|
padding: 0;
|
|
}
|
|
|
|
.mobile-menu-docs .docs-sidebar-title {
|
|
font-size: var(--font-size-mobile-toc-title);
|
|
padding: 4px 12px 8px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.mobile-menu-docs .docs-sidebar-group {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.mobile-menu-docs .docs-sidebar-group-title {
|
|
padding: 6px 12px;
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.mobile-menu-docs .docs-sidebar-link {
|
|
padding: 6px 12px;
|
|
font-size: var(--font-size-mobile-toc-link);
|
|
}
|
|
|
|
/* Mobile menu table of contents */
|
|
.mobile-menu-toc {
|
|
margin-top: 16px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.mobile-menu-toc-title {
|
|
font-family: inherit;
|
|
font-size: var(--font-size-mobile-toc-title);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-muted);
|
|
padding: 4px 12px 8px;
|
|
}
|
|
|
|
.mobile-menu-toc-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
}
|
|
|
|
.mobile-menu-toc-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
width: 100%;
|
|
padding: 6px 12px;
|
|
color: var(--text-secondary);
|
|
background: transparent;
|
|
border: none;
|
|
text-decoration: none;
|
|
font-family: inherit;
|
|
font-size: var(--font-size-mobile-toc-link);
|
|
text-align: left;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
/* Mobile touch improvements */
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
touch-action: manipulation;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
transition:
|
|
background-color 0.15s ease,
|
|
color 0.15s ease;
|
|
}
|
|
|
|
.mobile-menu-toc-link:hover,
|
|
.mobile-menu-toc-link:active {
|
|
background-color: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.mobile-menu-toc-link.active {
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Pressed state for mobile touch feedback */
|
|
.mobile-menu-toc-link:active {
|
|
background-color: var(--bg-tertiary, var(--bg-hover));
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.mobile-menu-toc-icon {
|
|
flex-shrink: 0;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* TOC level indentation and font sizes */
|
|
.mobile-menu-toc-level-1 {
|
|
padding-left: 12px;
|
|
font-size: var(--font-size-mobile-toc-link);
|
|
}
|
|
.mobile-menu-toc-level-2 {
|
|
padding-left: 20px;
|
|
font-size: var(--font-size-mobile-toc-link);
|
|
}
|
|
.mobile-menu-toc-level-3 {
|
|
padding-left: 28px;
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
.mobile-menu-toc-level-4,
|
|
.mobile-menu-toc-level-5,
|
|
.mobile-menu-toc-level-6 {
|
|
padding-left: 36px;
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
.mobile-menu-toc-level-5 {
|
|
padding-left: 44px;
|
|
}
|
|
.mobile-menu-toc-level-6 {
|
|
padding-left: 52px;
|
|
}
|
|
|
|
/* Menu header with home link */
|
|
.mobile-menu-header {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Menu footer (kept for backwards compatibility) */
|
|
.mobile-menu-footer {
|
|
padding: 16px 24px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.mobile-menu-home-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 12px;
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
font-family: inherit;
|
|
font-size: var(--font-size-mobile-home-link);
|
|
border-radius: 6px;
|
|
transition:
|
|
background-color 0.15s ease,
|
|
color 0.15s ease;
|
|
}
|
|
|
|
.mobile-menu-home-link:hover {
|
|
background-color: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Theme-specific adjustments */
|
|
:root[data-theme="dark"] .mobile-menu-backdrop {
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
:root[data-theme="dark"] .mobile-menu-drawer {
|
|
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
:root[data-theme="tan"] .mobile-menu-backdrop {
|
|
background-color: rgba(139, 115, 85, 0.25);
|
|
}
|
|
|
|
:root[data-theme="tan"] .mobile-menu-drawer {
|
|
box-shadow: 4px 0 24px rgba(139, 115, 85, 0.15);
|
|
}
|
|
|
|
:root[data-theme="cloud"] .mobile-menu-backdrop {
|
|
background-color: rgba(100, 116, 139, 0.2);
|
|
}
|
|
|
|
:root[data-theme="cloud"] .mobile-menu-drawer {
|
|
box-shadow: 4px 0 24px rgba(100, 116, 139, 0.12);
|
|
}
|
|
|
|
/* Tablet adjustments */
|
|
@media (min-width: 481px) and (max-width: 1024px) {
|
|
.mobile-menu-drawer {
|
|
width: 320px;
|
|
}
|
|
}
|
|
|
|
/* Small mobile */
|
|
@media (max-width: 480px) {
|
|
.mobile-menu-drawer {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.mobile-menu-content {
|
|
padding: 1px 12px 12px;
|
|
}
|
|
|
|
.mobile-menu-footer {
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.mobile-nav-link {
|
|
padding: 6px 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.mobile-menu-toc-link {
|
|
padding: 5px 10px;
|
|
font-size: var(--font-size-md);
|
|
}
|
|
}
|
|
|
|
/* Desktop - hide mobile menu components */
|
|
@media (min-width: 1025px) {
|
|
.mobile-nav-controls,
|
|
.mobile-menu-backdrop,
|
|
.mobile-menu-drawer {
|
|
display: none !important;
|
|
}
|
|
|
|
.desktop-only {
|
|
display: flex !important;
|
|
}
|
|
}
|
|
|
|
/* ===== Scroll to Top Button ===== */
|
|
.scroll-to-top {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
right: 24px;
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease;
|
|
z-index: 100;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
animation: scrollToTopFadeIn 0.2s ease;
|
|
}
|
|
|
|
@keyframes scrollToTopFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.scroll-to-top:hover {
|
|
background-color: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.scroll-to-top:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Theme-specific shadows */
|
|
:root[data-theme="dark"] .scroll-to-top {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
:root[data-theme="dark"] .scroll-to-top:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
:root[data-theme="tan"] .scroll-to-top {
|
|
box-shadow: 0 2px 8px rgba(139, 115, 85, 0.1);
|
|
}
|
|
|
|
:root[data-theme="tan"] .scroll-to-top:hover {
|
|
box-shadow: 0 4px 12px rgba(139, 115, 85, 0.15);
|
|
}
|
|
|
|
:root[data-theme="cloud"] .scroll-to-top {
|
|
box-shadow: 0 2px 8px rgba(100, 116, 139, 0.1);
|
|
}
|
|
|
|
:root[data-theme="cloud"] .scroll-to-top:hover {
|
|
box-shadow: 0 4px 12px rgba(100, 116, 139, 0.15);
|
|
}
|
|
|
|
/* Mobile adjustments */
|
|
@media (max-width: 768px) {
|
|
.scroll-to-top {
|
|
bottom: 20px;
|
|
right: 20px;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.scroll-to-top {
|
|
bottom: 16px;
|
|
right: 16px;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
WRITE PAGE STYLES
|
|
============================================
|
|
Three-column layout like Cursor docs.
|
|
Left: Type selector | Center: Editor | Right: Frontmatter fields
|
|
============================================ */
|
|
|
|
.write-layout {
|
|
display: grid;
|
|
grid-template-columns: 220px 1fr 280px;
|
|
min-height: 100vh;
|
|
height: 100vh;
|
|
background: var(--bg-primary);
|
|
overflow: hidden; /* Prevent any page-level scroll */
|
|
}
|
|
|
|
/* Left Sidebar */
|
|
.write-sidebar-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-right: 1px solid var(--border-color);
|
|
background: var(--bg-secondary);
|
|
overflow-y: auto;
|
|
max-height: 100vh;
|
|
}
|
|
|
|
.write-sidebar-header {
|
|
padding: 1rem 1rem 0.75rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.write-logo-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: 6px;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
transition: all 0.15s ease;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.write-logo-link:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Navigation */
|
|
.write-nav {
|
|
flex: 1;
|
|
padding: 0.75rem 0.75rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.write-nav-section {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.write-nav-label {
|
|
display: block;
|
|
padding: 0 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--text-secondary);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.write-nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
width: 100%;
|
|
padding: 0.5rem 0.75rem;
|
|
margin-bottom: 2px;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 6px;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 400;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
text-align: left;
|
|
}
|
|
|
|
.write-nav-item:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.write-nav-item.active {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Warning message */
|
|
.write-warning {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin: 0.75rem;
|
|
padding: 0.625rem 0.75rem;
|
|
background: rgba(234, 179, 8, 0.1);
|
|
border: 1px solid rgba(234, 179, 8, 0.2);
|
|
border-radius: 6px;
|
|
font-size: 11px;
|
|
color: #ca8a04;
|
|
}
|
|
|
|
:root[data-theme="dark"] .write-warning {
|
|
background: rgba(234, 179, 8, 0.08);
|
|
border-color: rgba(234, 179, 8, 0.15);
|
|
color: #eab308;
|
|
}
|
|
|
|
/* Main Content Area */
|
|
.write-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
max-height: 100vh;
|
|
background: var(--bg-primary);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* When AI chat is active, ensure proper height constraints */
|
|
.write-main:has(.write-ai-chat-container) {
|
|
height: 100vh;
|
|
}
|
|
|
|
.write-main-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem 1.5rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.write-main-title {
|
|
font-size: var(--font-size-lg);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
.write-copy-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
padding: 0.5rem 0.875rem;
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.write-copy-btn:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.write-copy-btn.copied {
|
|
background: #22c55e;
|
|
color: white;
|
|
}
|
|
|
|
/* Textarea */
|
|
.write-textarea {
|
|
flex: 1;
|
|
width: 100%;
|
|
padding: 1.5rem;
|
|
font-family:
|
|
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
font-size: 14px;
|
|
line-height: 1.7;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-primary);
|
|
resize: none;
|
|
tab-size: 2;
|
|
caret-color: var(--text-primary);
|
|
}
|
|
|
|
.write-textarea:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.write-textarea::placeholder {
|
|
color: var(--text-secondary);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.write-textarea::selection {
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
}
|
|
|
|
/* Main Footer */
|
|
.write-main-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.625rem 1.5rem;
|
|
border-top: 1px solid var(--border-color);
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.write-stats {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
font-family:
|
|
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
}
|
|
|
|
.write-stats-divider {
|
|
width: 3px;
|
|
height: 3px;
|
|
border-radius: 50%;
|
|
background: var(--text-secondary);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.write-save-hint {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.write-save-hint code {
|
|
font-family:
|
|
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
font-size: 11px;
|
|
background: var(--bg-secondary);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Right Sidebar */
|
|
.write-sidebar-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-left: 1px solid var(--border-color);
|
|
background: var(--bg-primary);
|
|
overflow-y: auto;
|
|
max-height: 100vh;
|
|
}
|
|
|
|
.write-sidebar-right .write-sidebar-header {
|
|
background: transparent;
|
|
}
|
|
|
|
.write-sidebar-title {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Fields List */
|
|
.write-fields {
|
|
flex: 1;
|
|
padding: 0 1rem 1rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.write-fields-section {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.write-fields-label {
|
|
display: block;
|
|
padding: 0.5rem 0;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--text-secondary);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.write-field-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
padding: 0.5rem 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.write-field-row:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.write-field-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.write-field-name {
|
|
font-family:
|
|
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
font-size: 12px;
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.write-field-required {
|
|
color: #ef4444;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.write-field-example {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
opacity: 0.8;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.write-field-copy {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
flex-shrink: 0;
|
|
margin-left: 0.5rem;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 4px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.write-field-copy:hover {
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.write-field-copy.copied {
|
|
background: #22c55e;
|
|
color: white;
|
|
}
|
|
|
|
.write-fields-note {
|
|
padding: 0.75rem 0;
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Sidebar Header with Toggle */
|
|
.write-sidebar-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Sidebar Toggle Button */
|
|
.write-sidebar-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 6px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.write-sidebar-toggle:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Header Layout */
|
|
.write-header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.write-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Focus Mode Toggle Button */
|
|
.write-focus-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 0;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.write-focus-btn:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
border-color: var(--text-secondary);
|
|
}
|
|
|
|
.write-focus-btn.active {
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
border-color: var(--text-primary);
|
|
}
|
|
|
|
/* Sidebar Collapsed State */
|
|
.write-layout.sidebar-collapsed {
|
|
grid-template-columns: 56px 1fr 280px;
|
|
}
|
|
|
|
.write-layout.frontmatter-collapsed {
|
|
grid-template-columns: 220px 1fr 56px;
|
|
}
|
|
|
|
.write-layout.sidebar-collapsed.frontmatter-collapsed {
|
|
grid-template-columns: 56px 1fr 56px;
|
|
}
|
|
|
|
.write-sidebar-left.collapsed {
|
|
width: 56px;
|
|
}
|
|
|
|
.write-sidebar-left.collapsed .write-logo-link span,
|
|
.write-sidebar-left.collapsed .write-nav-label,
|
|
.write-sidebar-left.collapsed .write-nav-item span,
|
|
.write-sidebar-left.collapsed .write-warning {
|
|
display: none;
|
|
}
|
|
|
|
.write-sidebar-left.collapsed .write-sidebar-header {
|
|
padding: 1rem 0.75rem 0.75rem;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.write-sidebar-left.collapsed .write-logo-link {
|
|
padding: 0.5rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.write-sidebar-left.collapsed .write-nav {
|
|
padding: 0.75rem 0.5rem;
|
|
}
|
|
|
|
.write-sidebar-left.collapsed .write-nav-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.write-sidebar-left.collapsed .write-nav-item {
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Frontmatter Toggle Button */
|
|
.write-frontmatter-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 0;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.write-frontmatter-btn:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
border-color: var(--text-secondary);
|
|
}
|
|
|
|
.write-frontmatter-btn.active {
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
border-color: var(--text-primary);
|
|
}
|
|
|
|
/* Right Sidebar Collapsed State */
|
|
.write-sidebar-right.collapsed {
|
|
width: 56px;
|
|
}
|
|
|
|
.write-sidebar-right.collapsed .write-fields {
|
|
display: none;
|
|
}
|
|
|
|
.write-sidebar-right.collapsed .write-sidebar-title {
|
|
display: none;
|
|
}
|
|
|
|
.write-sidebar-right.collapsed .write-sidebar-header {
|
|
padding: 1rem 0.75rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Focus Mode State - shows collapsed left sidebar with toggleable frontmatter sidebar */
|
|
.write-layout.focus-mode {
|
|
grid-template-columns: 56px 1fr 280px;
|
|
}
|
|
|
|
.write-layout.focus-mode.frontmatter-collapsed {
|
|
grid-template-columns: 56px 1fr 56px;
|
|
}
|
|
|
|
/* In focus mode, force left sidebar to collapsed state */
|
|
.write-layout.focus-mode .write-sidebar-left {
|
|
width: 56px;
|
|
}
|
|
|
|
.write-layout.focus-mode .write-sidebar-left .write-logo-link span,
|
|
.write-layout.focus-mode .write-sidebar-left .write-nav-label,
|
|
.write-layout.focus-mode .write-sidebar-left .write-nav-item span,
|
|
.write-layout.focus-mode .write-sidebar-left .write-warning {
|
|
display: none;
|
|
}
|
|
|
|
.write-layout.focus-mode .write-sidebar-left .write-sidebar-header {
|
|
padding: 1rem 0.75rem 0.75rem;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.write-layout.focus-mode .write-sidebar-left .write-logo-link {
|
|
padding: 0.5rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.write-layout.focus-mode .write-sidebar-left .write-nav {
|
|
padding: 0.75rem 0.5rem;
|
|
}
|
|
|
|
.write-layout.focus-mode .write-sidebar-left .write-nav-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.write-layout.focus-mode .write-sidebar-left .write-nav-item {
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.write-layout.focus-mode .write-main-header {
|
|
padding: 0.75rem 1.5rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
.write-layout.focus-mode .write-main-title {
|
|
display: none;
|
|
}
|
|
|
|
.write-layout.focus-mode .write-header-left {
|
|
display: none;
|
|
}
|
|
|
|
.write-layout.focus-mode .write-header-actions {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.write-layout.focus-mode .write-copy-btn {
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.write-layout.focus-mode .write-copy-btn:hover {
|
|
background: var(--bg-primary);
|
|
border-color: var(--text-secondary);
|
|
}
|
|
|
|
.write-layout.focus-mode .write-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.write-layout.focus-mode .write-textarea {
|
|
padding: 2rem 3rem;
|
|
width: 100%;
|
|
flex: 1;
|
|
}
|
|
|
|
.write-layout.focus-mode .write-main-footer {
|
|
width: 100%;
|
|
border-top: 1px solid var(--border-color);
|
|
padding: 0.5rem 3rem;
|
|
}
|
|
|
|
/* Responsive: Tablet */
|
|
@media (max-width: 1024px) {
|
|
.write-layout {
|
|
grid-template-columns: 200px 1fr 240px;
|
|
}
|
|
|
|
.write-layout.sidebar-collapsed {
|
|
grid-template-columns: 56px 1fr 240px;
|
|
}
|
|
|
|
.write-layout.frontmatter-collapsed {
|
|
grid-template-columns: 200px 1fr 56px;
|
|
}
|
|
|
|
.write-layout.sidebar-collapsed.frontmatter-collapsed {
|
|
grid-template-columns: 56px 1fr 56px;
|
|
}
|
|
}
|
|
|
|
/* Responsive: Mobile */
|
|
@media (max-width: 768px) {
|
|
.write-layout {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto 1fr auto;
|
|
}
|
|
|
|
.write-sidebar-left {
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.write-sidebar-header {
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.write-nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem 0.75rem;
|
|
}
|
|
|
|
.write-nav-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.write-nav-label {
|
|
display: none;
|
|
}
|
|
|
|
.write-nav-item {
|
|
padding: 0.375rem 0.75rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.write-nav-item span {
|
|
display: none;
|
|
}
|
|
|
|
.write-warning {
|
|
display: none;
|
|
}
|
|
|
|
.write-main {
|
|
min-height: auto;
|
|
max-height: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* On mobile, AI chat gets fixed height */
|
|
.write-main:has(.write-ai-chat-container) {
|
|
height: calc(100vh - 120px); /* Account for mobile nav */
|
|
max-height: calc(100vh - 120px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.write-main-header {
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.write-textarea {
|
|
min-height: 50vh;
|
|
padding: 1rem;
|
|
font-size: 16px; /* Prevent iOS zoom */
|
|
}
|
|
|
|
.write-main-footer {
|
|
padding: 0.5rem 1rem;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.write-sidebar-right {
|
|
border-left: none;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.write-sidebar-right .write-sidebar-header {
|
|
padding: 0.75rem 1rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.write-fields {
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.write-fields-section {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.write-fields-label {
|
|
grid-column: 1 / -1;
|
|
padding: 0.25rem 0;
|
|
}
|
|
|
|
.write-field-row {
|
|
padding: 0.375rem 0;
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.write-copy-btn span {
|
|
display: none;
|
|
}
|
|
|
|
.write-copy-btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.write-save-hint {
|
|
display: none;
|
|
}
|
|
|
|
.write-fields-section {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* AI Chat Styles */
|
|
/* Write page AI chat container */
|
|
.write-ai-chat-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0; /* Allow shrinking in flex container */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.write-ai-chat-container .ai-chat-view {
|
|
flex: 1;
|
|
height: 100%;
|
|
min-height: 0; /* Allow shrinking in flex container */
|
|
}
|
|
|
|
.ai-chat-view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
min-height: 0; /* Allow shrinking in flex container */
|
|
background-color: var(--bg-primary);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ai-chat-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background-color: var(--bg-secondary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ai-chat-title {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.ai-chat-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ai-chat-load-context-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 6px 10px;
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
background-color: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.ai-chat-load-context-button:hover {
|
|
background-color: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.ai-chat-context-loaded {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: var(--font-size-xs);
|
|
color: #10b981;
|
|
}
|
|
|
|
.ai-chat-clear-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 0;
|
|
color: var(--text-muted);
|
|
background: none;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.ai-chat-clear-button:hover:not(:disabled) {
|
|
background-color: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.ai-chat-clear-button:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.ai-chat-close-button {
|
|
padding: 6px 12px;
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
background-color: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.ai-chat-close-button:hover {
|
|
background-color: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.ai-chat-messages {
|
|
flex: 1;
|
|
min-height: 0; /* Critical: allows flex item to shrink below content size */
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
.ai-chat-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
padding: 32px;
|
|
}
|
|
|
|
.ai-chat-empty p {
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.ai-chat-empty-hint {
|
|
font-size: var(--font-size-xs);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.ai-chat-message {
|
|
display: flex;
|
|
gap: 8px;
|
|
max-width: 85%;
|
|
animation: aiChatFadeIn 0.2s ease;
|
|
}
|
|
|
|
@keyframes aiChatFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.ai-chat-message-user {
|
|
align-self: flex-end;
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.ai-chat-message-assistant {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.ai-chat-message-content {
|
|
padding: 10px 14px;
|
|
border-radius: 12px;
|
|
font-size: var(--font-size-sm);
|
|
line-height: 1.5;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.ai-chat-message-user .ai-chat-message-content {
|
|
background-color: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
|
|
.ai-chat-message-assistant .ai-chat-message-content {
|
|
background-color: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
border-bottom-left-radius: 4px;
|
|
}
|
|
|
|
.ai-chat-message-content p {
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.ai-chat-message-content p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.ai-chat-message-content h1,
|
|
.ai-chat-message-content h2,
|
|
.ai-chat-message-content h3,
|
|
.ai-chat-message-content h4,
|
|
.ai-chat-message-content h5,
|
|
.ai-chat-message-content h6 {
|
|
margin: 12px 0 8px;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ai-chat-message-content h1:first-child,
|
|
.ai-chat-message-content h2:first-child,
|
|
.ai-chat-message-content h3:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.ai-chat-message-content ul,
|
|
.ai-chat-message-content ol {
|
|
margin: 8px 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.ai-chat-message-content li {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.ai-chat-message-content code {
|
|
font-family:
|
|
"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
|
|
font-size: 0.9em;
|
|
padding: 2px 6px;
|
|
background-color: var(--bg-hover);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.ai-chat-message-content pre {
|
|
margin: 8px 0;
|
|
padding: 12px;
|
|
background-color: var(--bg-hover);
|
|
border-radius: 6px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.ai-chat-message-content pre code {
|
|
padding: 0;
|
|
background: none;
|
|
}
|
|
|
|
.ai-chat-message-content a {
|
|
color: var(--link-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.ai-chat-message-content a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.ai-chat-message-content blockquote {
|
|
margin: 8px 0;
|
|
padding-left: 12px;
|
|
border-left: 3px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.ai-chat-copy-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
color: var(--text-muted);
|
|
background: none;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition: all 0.15s ease;
|
|
flex-shrink: 0;
|
|
align-self: flex-start;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.ai-chat-message:hover .ai-chat-copy-button {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ai-chat-copy-button:hover {
|
|
background-color: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.ai-chat-loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.ai-chat-loading-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 14px;
|
|
background-color: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
border-bottom-left-radius: 4px;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.ai-chat-spinner {
|
|
animation: aiChatSpin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes aiChatSpin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.ai-chat-stop-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 6px 10px;
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 500;
|
|
color: #ef4444;
|
|
background-color: rgba(239, 68, 68, 0.1);
|
|
border: 1px solid rgba(239, 68, 68, 0.2);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.ai-chat-stop-button:hover {
|
|
background-color: rgba(239, 68, 68, 0.15);
|
|
border-color: rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
.ai-chat-stopped {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
padding: 8px;
|
|
}
|
|
|
|
.ai-chat-error {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.ai-chat-error .ai-chat-message-content {
|
|
color: #ef4444;
|
|
}
|
|
|
|
.ai-chat-input-container {
|
|
padding: 12px 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
background-color: var(--bg-secondary);
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.ai-chat-input-wrapper {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 8px;
|
|
background-color: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 8px 12px;
|
|
transition: border-color 0.15s ease;
|
|
}
|
|
|
|
.ai-chat-input-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ai-chat-attach-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 0;
|
|
color: var(--text-muted);
|
|
background: none;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.ai-chat-attach-button:hover:not(:disabled) {
|
|
background-color: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.ai-chat-attach-button:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.ai-chat-input-wrapper:focus-within {
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
.ai-chat-input {
|
|
flex: 1;
|
|
min-height: 24px;
|
|
max-height: 200px;
|
|
padding: 0;
|
|
font-family: inherit;
|
|
font-size: var(--font-size-sm);
|
|
line-height: 1.5;
|
|
color: var(--text-primary);
|
|
background: none;
|
|
border: none;
|
|
resize: none;
|
|
outline: none;
|
|
/* Prevent scroll jump when focusing */
|
|
scroll-margin: 0;
|
|
}
|
|
|
|
.ai-chat-input::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.ai-chat-send-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 0;
|
|
color: var(--bg-primary);
|
|
background-color: var(--text-primary);
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ai-chat-send-button:hover:not(:disabled) {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.ai-chat-send-button:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Attachments preview */
|
|
.ai-chat-attachments-preview {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
background-color: var(--bg-secondary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ai-chat-attachment-preview {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px;
|
|
background-color: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.ai-chat-attachment-preview-image {
|
|
width: 60px;
|
|
height: 60px;
|
|
object-fit: cover;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.ai-chat-attachment-preview-url {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-secondary);
|
|
max-width: 200px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ai-chat-attachment-remove {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
padding: 0;
|
|
color: var(--text-muted);
|
|
background-color: var(--bg-hover);
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ai-chat-attachment-remove:hover {
|
|
background-color: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
}
|
|
|
|
/* Link input modal */
|
|
.ai-chat-link-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
animation: backdropFadeIn 0.2s ease;
|
|
}
|
|
|
|
.ai-chat-link-modal-content {
|
|
background-color: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
max-width: 400px;
|
|
width: 90%;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.ai-chat-link-modal-content h3 {
|
|
margin: 0 0 12px;
|
|
font-size: var(--font-size-base);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.ai-chat-link-input {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
margin-bottom: 12px;
|
|
outline: none;
|
|
transition: border-color 0.15s ease;
|
|
}
|
|
|
|
.ai-chat-link-input:focus {
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
.ai-chat-link-modal-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.ai-chat-link-modal-cancel,
|
|
.ai-chat-link-modal-add {
|
|
padding: 6px 12px;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.ai-chat-link-modal-cancel {
|
|
color: var(--text-secondary);
|
|
background-color: var(--bg-secondary);
|
|
}
|
|
|
|
.ai-chat-link-modal-cancel:hover {
|
|
background-color: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.ai-chat-link-modal-add {
|
|
color: var(--bg-primary);
|
|
background-color: var(--text-primary);
|
|
border-color: var(--text-primary);
|
|
}
|
|
|
|
.ai-chat-link-modal-add:hover:not(:disabled) {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.ai-chat-link-modal-add:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Attachments in messages */
|
|
.ai-chat-attachments {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.ai-chat-attachment {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ai-chat-attachment-image {
|
|
max-width: 200px;
|
|
max-height: 200px;
|
|
border-radius: 6px;
|
|
object-fit: contain;
|
|
display: block;
|
|
}
|
|
|
|
.ai-chat-attachment-loading {
|
|
padding: 8px;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
.ai-chat-attachment-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
padding: 6px 10px;
|
|
background-color: var(--bg-secondary);
|
|
border-radius: 6px;
|
|
font-size: var(--font-size-xs);
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.ai-chat-attachment-link:hover {
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
/* AI Chat in Write Page - overrides for Write context */
|
|
.write-ai-chat-container .ai-chat-view {
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* AI Chat toggle button in Write nav */
|
|
.write-nav-item.ai-chat-active {
|
|
background-color: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
}
|
|
|
|
.write-nav-item.ai-chat-active:hover {
|
|
background-color: var(--text-primary);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* AI Chat in Right Sidebar */
|
|
.right-sidebar-ai-chat {
|
|
height: 100%;
|
|
min-height: 300px;
|
|
}
|
|
|
|
.right-sidebar-ai-chat .ai-chat-view {
|
|
height: 100%;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.right-sidebar-ai-chat .ai-chat-header {
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.right-sidebar-ai-chat .ai-chat-title {
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.right-sidebar-ai-chat .ai-chat-messages {
|
|
padding: 12px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.right-sidebar-ai-chat .ai-chat-message {
|
|
max-width: 95%;
|
|
}
|
|
|
|
.right-sidebar-ai-chat .ai-chat-message-content {
|
|
padding: 8px 12px;
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.right-sidebar-ai-chat .ai-chat-input-container {
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.right-sidebar-ai-chat .ai-chat-input {
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.right-sidebar-ai-chat .ai-chat-send-button {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
/* Theme-specific AI Chat styles */
|
|
:root[data-theme="dark"] .ai-chat-message-user .ai-chat-message-content {
|
|
background-color: #f5f5f5;
|
|
color: #171717;
|
|
}
|
|
|
|
:root[data-theme="dark"] .ai-chat-message-content code {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
:root[data-theme="dark"] .ai-chat-message-content pre {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
:root[data-theme="tan"] .ai-chat-message-user .ai-chat-message-content {
|
|
background-color: #1a1a1a;
|
|
color: #faf8f5;
|
|
}
|
|
|
|
:root[data-theme="cloud"] .ai-chat-message-user .ai-chat-message-content {
|
|
background-color: #1e293b;
|
|
color: #f8fafc;
|
|
}
|
|
|
|
/* Mobile responsive AI Chat */
|
|
@media (max-width: 768px) {
|
|
.ai-chat-header {
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.ai-chat-title {
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.ai-chat-messages {
|
|
padding: 12px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.ai-chat-message {
|
|
max-width: 90%;
|
|
}
|
|
|
|
.ai-chat-message-content {
|
|
padding: 8px 12px;
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.ai-chat-input-container {
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.ai-chat-load-context-button span {
|
|
display: none;
|
|
}
|
|
|
|
.ai-chat-close-button {
|
|
padding: 6px 8px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.ai-chat-copy-button {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ai-chat-attachments-preview {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.ai-chat-attachment-preview-image {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
.ai-chat-attachment-preview-url {
|
|
max-width: 150px;
|
|
}
|
|
|
|
.ai-chat-link-modal-content {
|
|
padding: 16px;
|
|
max-width: 90%;
|
|
}
|
|
|
|
.ai-chat-attachment-image {
|
|
max-width: 150px;
|
|
max-height: 150px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.ai-chat-header-actions {
|
|
gap: 4px;
|
|
}
|
|
|
|
.ai-chat-empty {
|
|
padding: 20px;
|
|
}
|
|
|
|
.ai-chat-empty p {
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
Newsletter Signup Component
|
|
Email-only newsletter subscription form with AgentMail integration
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
|
|
.newsletter-signup {
|
|
margin: 2rem 0;
|
|
padding: 1.5rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.newsletter-signup__content {
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.newsletter-signup__title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin: 0 0 0.5rem 0;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.newsletter-signup__description {
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
margin: 0 0 1rem 0;
|
|
}
|
|
|
|
.newsletter-signup__form {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.newsletter-signup__input {
|
|
flex: 1;
|
|
max-width: 280px;
|
|
padding: 0.625rem 0.875rem;
|
|
font-size: 0.9rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.newsletter-signup__input:focus {
|
|
border-color: var(--accent-color, var(--text-primary));
|
|
}
|
|
|
|
.newsletter-signup__input::placeholder {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.newsletter-signup__button {
|
|
padding: 0.625rem 1.25rem;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
white-space: nowrap;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.newsletter-signup__button:hover:not(:disabled) {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.newsletter-signup__button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.newsletter-signup__success {
|
|
padding: 0.75rem;
|
|
background: rgba(34, 197, 94, 0.1);
|
|
color: #22c55e;
|
|
border-radius: 6px;
|
|
font-size: 0.9rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.newsletter-signup__error {
|
|
margin-top: 0.5rem;
|
|
font-size: 0.85rem;
|
|
color: #ef4444;
|
|
}
|
|
|
|
/* Mobile responsive */
|
|
@media (max-width: 480px) {
|
|
.newsletter-signup {
|
|
padding: 1.25rem;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.newsletter-signup__form {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.newsletter-signup__input {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.newsletter-signup__button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
Unsubscribe Page
|
|
Simple page for newsletter unsubscribe flow
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
|
|
.unsubscribe-page {
|
|
max-width: 480px;
|
|
margin: 4rem auto;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.unsubscribe-page h1 {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.unsubscribe-page p {
|
|
color: var(--text-secondary);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.unsubscribe-success {
|
|
color: #22c55e;
|
|
}
|
|
|
|
.unsubscribe-error {
|
|
color: #ef4444;
|
|
}
|
|
|
|
.unsubscribe-home-link {
|
|
display: inline-block;
|
|
margin-top: 1rem;
|
|
padding: 0.625rem 1.25rem;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.unsubscribe-home-link:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
Contact Form Component
|
|
Form for visitors to send messages via AgentMail
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
|
|
.contact-form {
|
|
margin: 2rem 0;
|
|
padding: 1.5rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.contact-form__content {
|
|
max-width: 520px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.contact-form__title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin: 0 0 0.5rem 0;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.contact-form__description {
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
margin: 0 0 1.5rem 0;
|
|
}
|
|
|
|
.contact-form__form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.contact-form__field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.contact-form__label {
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.contact-form__input,
|
|
.contact-form__textarea {
|
|
padding: 0.625rem 0.875rem;
|
|
font-size: 0.9rem;
|
|
font-family: inherit;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.contact-form__input:focus,
|
|
.contact-form__textarea:focus {
|
|
border-color: var(--accent-color, var(--text-primary));
|
|
}
|
|
|
|
.contact-form__input::placeholder,
|
|
.contact-form__textarea::placeholder {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.contact-form__textarea {
|
|
resize: vertical;
|
|
min-height: 100px;
|
|
}
|
|
|
|
.contact-form__button {
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.contact-form__button:hover:not(:disabled) {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.contact-form__button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.contact-form__success {
|
|
padding: 1rem;
|
|
background: var(--success-bg, rgba(34, 197, 94, 0.1));
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
}
|
|
|
|
.contact-form__success p {
|
|
color: var(--success-text, #22c55e);
|
|
font-size: 0.9rem;
|
|
margin: 0 0 1rem 0;
|
|
}
|
|
|
|
.contact-form__reset-button {
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition:
|
|
background-color 0.2s,
|
|
color 0.2s;
|
|
}
|
|
|
|
.contact-form__reset-button:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.contact-form__error {
|
|
margin-top: 0.75rem;
|
|
font-size: 0.85rem;
|
|
color: var(--error-color, #ef4444);
|
|
}
|
|
|
|
/* Mobile responsive */
|
|
@media (max-width: 480px) {
|
|
.contact-form {
|
|
padding: 1.25rem;
|
|
margin: 1.5rem 0;
|
|
}
|
|
|
|
.contact-form__button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
NEWSLETTER ADMIN STYLES
|
|
============================================ */
|
|
|
|
/* Newsletter Admin - Disabled State */
|
|
.newsletter-admin-disabled {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
padding: 2rem;
|
|
text-align: center;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.newsletter-admin-disabled h1 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.newsletter-admin-disabled p {
|
|
color: var(--text-secondary);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.newsletter-admin-disabled a {
|
|
color: var(--text-primary);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Newsletter Admin - Main Layout */
|
|
.newsletter-admin-layout {
|
|
display: grid;
|
|
grid-template-columns: 220px 1fr 280px;
|
|
min-height: 100vh;
|
|
height: 100vh;
|
|
background: var(--bg-primary);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Two-column layout (no right sidebar) */
|
|
.newsletter-admin-layout.two-column {
|
|
grid-template-columns: 220px 1fr;
|
|
}
|
|
|
|
/* Left Sidebar */
|
|
.newsletter-admin-sidebar-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-right: 1px solid var(--border-color);
|
|
background: var(--bg-secondary);
|
|
overflow-y: auto;
|
|
max-height: 100vh;
|
|
}
|
|
|
|
.newsletter-admin-sidebar-header {
|
|
padding: 1rem 1rem 0.75rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.newsletter-admin-logo-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: 6px;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
transition: all 0.15s ease;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.newsletter-admin-logo-link:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Navigation */
|
|
.newsletter-admin-nav {
|
|
flex: 1;
|
|
padding: 0.75rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.newsletter-admin-nav-section {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.newsletter-admin-nav-label {
|
|
display: block;
|
|
padding: 0 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
font-size: var(--font-size-2xs);
|
|
font-weight: 500;
|
|
color: var(--text-tertiary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.newsletter-admin-nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
padding: 0.5rem 0.75rem;
|
|
margin-bottom: 2px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
text-align: left;
|
|
}
|
|
|
|
.newsletter-admin-nav-item:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.newsletter-admin-nav-item.active {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Stats in Sidebar */
|
|
.newsletter-admin-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 0.5rem;
|
|
padding: 0.75rem;
|
|
border-top: 1px solid var(--border-color);
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
.newsletter-admin-stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0.5rem;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.newsletter-admin-stat-value {
|
|
font-size: var(--font-size-lg);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.newsletter-admin-stat-label {
|
|
font-size: var(--font-size-2xs);
|
|
color: var(--text-tertiary);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Main Content Area */
|
|
.newsletter-admin-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
padding: 1rem 1.5rem;
|
|
max-height: 100vh;
|
|
}
|
|
|
|
.newsletter-admin-main-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
margin-bottom: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.newsletter-admin-main-header .newsletter-admin-search {
|
|
flex: 1;
|
|
max-width: 400px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.newsletter-admin-main-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: var(--font-size-xl);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Search */
|
|
.newsletter-admin-search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-tertiary);
|
|
flex: 1;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.newsletter-admin-search-input {
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-sm);
|
|
width: 100%;
|
|
outline: none;
|
|
}
|
|
|
|
.newsletter-admin-search-input::placeholder {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* Filter Bar */
|
|
.newsletter-admin-filter-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--text-tertiary);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.newsletter-admin-filter-label {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Subscriber List */
|
|
.newsletter-admin-list {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.newsletter-admin-loading,
|
|
.newsletter-admin-empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 3rem;
|
|
color: var(--text-tertiary);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.newsletter-admin-subscriber {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.75rem 1rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-secondary);
|
|
transition: background-color 0.15s;
|
|
}
|
|
|
|
.newsletter-admin-subscriber:hover {
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
.newsletter-admin-subscriber.unsubscribed {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.newsletter-admin-subscriber-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.newsletter-admin-subscriber-email {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
word-break: break-all;
|
|
}
|
|
|
|
.newsletter-admin-subscriber-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
font-size: var(--font-size-2xs);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.newsletter-admin-badge {
|
|
display: inline-block;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: var(--font-size-2xs);
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.newsletter-admin-badge.active {
|
|
background: rgba(34, 197, 94, 0.15);
|
|
color: #22c55e;
|
|
}
|
|
|
|
.newsletter-admin-badge.inactive {
|
|
background: rgba(239, 68, 68, 0.15);
|
|
color: #ef4444;
|
|
}
|
|
|
|
.newsletter-admin-subscriber-source {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.newsletter-admin-subscriber-date {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.newsletter-admin-subscriber-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.newsletter-admin-action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.375rem;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: var(--text-tertiary);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.newsletter-admin-action-btn:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.newsletter-admin-action-btn.delete:hover {
|
|
color: #ef4444;
|
|
}
|
|
|
|
.newsletter-admin-delete-confirm {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
font-size: var(--font-size-2xs);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.newsletter-admin-delete-yes,
|
|
.newsletter-admin-delete-no {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.25rem;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.newsletter-admin-delete-yes {
|
|
color: #22c55e;
|
|
}
|
|
|
|
.newsletter-admin-delete-yes:hover {
|
|
background: rgba(34, 197, 94, 0.15);
|
|
}
|
|
|
|
.newsletter-admin-delete-no {
|
|
color: #ef4444;
|
|
}
|
|
|
|
.newsletter-admin-delete-no:hover {
|
|
background: rgba(239, 68, 68, 0.15);
|
|
}
|
|
|
|
/* Pagination */
|
|
.newsletter-admin-pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 1rem 0;
|
|
border-top: 1px solid var(--border-color);
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.newsletter-admin-pagination-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.5rem 1rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.newsletter-admin-pagination-btn:hover:not(:disabled) {
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.newsletter-admin-pagination-btn:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Right Sidebar */
|
|
.newsletter-admin-sidebar-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
border-left: 1px solid var(--border-color);
|
|
background: var(--bg-secondary);
|
|
padding: 1rem;
|
|
overflow-y: auto;
|
|
max-height: 100vh;
|
|
}
|
|
|
|
.newsletter-admin-panel {
|
|
padding: 1rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
.newsletter-admin-panel-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0 0 0.5rem 0;
|
|
}
|
|
|
|
.newsletter-admin-panel-desc {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-tertiary);
|
|
margin: 0 0 1rem 0;
|
|
}
|
|
|
|
.newsletter-admin-send-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.newsletter-admin-label {
|
|
font-size: var(--font-size-2xs);
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.newsletter-admin-select {
|
|
padding: 0.5rem 0.75rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-sm);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.newsletter-admin-select:focus {
|
|
outline: none;
|
|
border-color: var(--text-tertiary);
|
|
}
|
|
|
|
.newsletter-admin-send-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.625rem 1rem;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: opacity 0.15s;
|
|
}
|
|
|
|
.newsletter-admin-send-btn:hover:not(:disabled) {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.newsletter-admin-send-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.newsletter-admin-send-result {
|
|
padding: 0.75rem;
|
|
border-radius: 6px;
|
|
font-size: var(--font-size-xs);
|
|
word-break: break-all;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.newsletter-admin-send-result.success {
|
|
background: var(--color-bg-secondary);
|
|
color: var(--color-text);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
.newsletter-admin-send-result.error {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
color: var(--color-text);
|
|
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
.newsletter-admin-result-message {
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.newsletter-admin-command-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.newsletter-admin-command {
|
|
flex: 1;
|
|
padding: 0.5rem;
|
|
background: var(--color-bg);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 4px;
|
|
font-family: var(--font-mono);
|
|
font-size: var(--font-size-xs);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.newsletter-admin-copy-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.5rem;
|
|
background: var(--color-bg-secondary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 4px;
|
|
color: var(--color-text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.newsletter-admin-copy-btn:hover {
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
/* Mode toggle */
|
|
.newsletter-admin-mode-toggle {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
margin-bottom: 1rem;
|
|
padding: 0.25rem;
|
|
background: var(--color-bg-secondary);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.newsletter-admin-mode-btn {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.375rem;
|
|
padding: 0.5rem 0.75rem;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 4px;
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.newsletter-admin-mode-btn:hover {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.newsletter-admin-mode-btn.active {
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* Input and textarea */
|
|
.newsletter-admin-input {
|
|
width: 100%;
|
|
padding: 0.625rem;
|
|
background: var(--color-bg);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
color: var(--color-text);
|
|
font-size: var(--font-size-sm);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.newsletter-admin-input:focus {
|
|
outline: none;
|
|
border-color: var(--color-text-secondary);
|
|
}
|
|
|
|
.newsletter-admin-input::placeholder {
|
|
color: var(--color-text-secondary);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.newsletter-admin-textarea {
|
|
width: 100%;
|
|
padding: 0.625rem;
|
|
background: var(--color-bg);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
color: var(--color-text);
|
|
font-size: var(--font-size-sm);
|
|
font-family: var(--font-mono);
|
|
line-height: 1.5;
|
|
resize: vertical;
|
|
min-height: 150px;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.newsletter-admin-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--color-text-secondary);
|
|
}
|
|
|
|
.newsletter-admin-textarea::placeholder {
|
|
color: var(--color-text-secondary);
|
|
opacity: 0.6;
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
/* Recent Newsletters List (sidebar) */
|
|
.newsletter-admin-recent-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.newsletter-admin-recent-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
padding: 0.5rem;
|
|
border-radius: 4px;
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.newsletter-admin-recent-slug {
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
word-break: break-all;
|
|
}
|
|
|
|
.newsletter-admin-recent-meta {
|
|
font-size: var(--font-size-2xs);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* Form Container (for send-post and write-email views) */
|
|
.newsletter-admin-form-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
max-width: 600px;
|
|
padding: 1.5rem 0;
|
|
}
|
|
|
|
.newsletter-admin-form-container.full-width {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.newsletter-admin-form-desc {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
.newsletter-admin-form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Recent Container (for recent-sends view in main area) */
|
|
.newsletter-admin-recent-container {
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.newsletter-admin-recent-container.full-width {
|
|
width: 100%;
|
|
}
|
|
|
|
.newsletter-admin-recent-list-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.newsletter-admin-recent-item-main {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.newsletter-admin-recent-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.newsletter-admin-recent-slug-main {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
word-break: break-all;
|
|
}
|
|
|
|
.newsletter-admin-recent-meta-main {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.newsletter-admin-recent-date {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-secondary);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.newsletter-admin-recent-meta-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.newsletter-admin-badge-type {
|
|
display: inline-block;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: var(--font-size-2xs);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.newsletter-admin-badge-type.post {
|
|
background: rgba(59, 130, 246, 0.15);
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.newsletter-admin-badge-type.custom {
|
|
background: rgba(139, 92, 246, 0.15);
|
|
color: #8b5cf6;
|
|
}
|
|
|
|
/* Email Stats View */
|
|
.newsletter-admin-email-stats {
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.newsletter-admin-email-stats.full-width {
|
|
width: 100%;
|
|
}
|
|
|
|
.newsletter-admin-stats-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.newsletter-admin-stat-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.newsletter-admin-stat-card-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 8px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.newsletter-admin-stat-card-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.newsletter-admin-stat-card-value {
|
|
font-size: var(--font-size-2xl);
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.newsletter-admin-stat-card-label {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.newsletter-admin-stats-summary {
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.newsletter-admin-stats-summary h3 {
|
|
font-size: var(--font-size-lg);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0 0 1rem 0;
|
|
}
|
|
|
|
.newsletter-admin-stats-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.75rem 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.newsletter-admin-stats-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.newsletter-admin-stats-row span:first-child {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.newsletter-admin-stats-row span:last-child {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Responsive: Tablet */
|
|
@media (max-width: 1024px) {
|
|
.newsletter-admin-layout {
|
|
grid-template-columns: 200px 1fr 240px;
|
|
}
|
|
|
|
.newsletter-admin-layout.two-column {
|
|
grid-template-columns: 200px 1fr;
|
|
}
|
|
}
|
|
|
|
/* Responsive: Mobile */
|
|
@media (max-width: 768px) {
|
|
.newsletter-admin-layout {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto 1fr auto;
|
|
}
|
|
|
|
.newsletter-admin-layout.two-column {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto 1fr;
|
|
}
|
|
|
|
.newsletter-admin-sidebar-left {
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.newsletter-admin-sidebar-header {
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.newsletter-admin-nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem 0.75rem;
|
|
}
|
|
|
|
.newsletter-admin-nav-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.newsletter-admin-nav-label {
|
|
display: none;
|
|
}
|
|
|
|
.newsletter-admin-nav-item {
|
|
padding: 0.375rem 0.75rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.newsletter-admin-nav-item span {
|
|
display: none;
|
|
}
|
|
|
|
.newsletter-admin-stats {
|
|
display: flex;
|
|
justify-content: center;
|
|
border-top: none;
|
|
padding: 0 1rem 0.75rem;
|
|
background: transparent;
|
|
}
|
|
|
|
.newsletter-admin-main {
|
|
min-height: auto;
|
|
max-height: none;
|
|
overflow: visible;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.newsletter-admin-main-header {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.newsletter-admin-search {
|
|
max-width: none;
|
|
}
|
|
|
|
.newsletter-admin-subscriber {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.newsletter-admin-subscriber-actions {
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.newsletter-admin-sidebar-right {
|
|
border-left: none;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.newsletter-admin-form-container {
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.newsletter-admin-recent-item-main {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.newsletter-admin-recent-date {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.newsletter-admin-stats-cards {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.newsletter-admin-stat-card {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.newsletter-admin-stat-card-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.newsletter-admin-stat-card-value {
|
|
font-size: var(--font-size-xl);
|
|
}
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
DASHBOARD STYLES
|
|
Admin dashboard for content management, site config, and sync operations
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* Dashboard Auth Container (for login prompt and loading states) */
|
|
.dashboard-auth-container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 2rem;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-auth-card {
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px;
|
|
padding: 2rem;
|
|
max-width: 500px;
|
|
width: 100%;
|
|
border: 1px solid var(--border-color);
|
|
text-align: center;
|
|
}
|
|
|
|
.dashboard-auth-card h1 {
|
|
margin-top: 0;
|
|
font-weight: 300;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.dashboard-auth-card p {
|
|
color: var(--text-secondary);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.dashboard-sign-in-button {
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
border: none;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 6px;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.dashboard-sign-in-button:hover {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.dashboard-auth-card a {
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.dashboard-auth-card a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Dashboard Auth Warning Banner */
|
|
.dashboard-auth-warning {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background: #f59e0b;
|
|
color: #1a1a1a;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.dashboard-auth-warning svg {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Adjust layout when warning banner is present */
|
|
.dashboard-layout:has(.dashboard-auth-warning) {
|
|
padding-top: 36px;
|
|
}
|
|
|
|
/* Dashboard Main Layout */
|
|
.dashboard-layout {
|
|
display: grid;
|
|
grid-template-columns: 220px 1fr;
|
|
min-height: 100vh;
|
|
height: 100vh;
|
|
background: var(--bg-primary);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dashboard-layout.with-right-sidebar {
|
|
grid-template-columns: 220px 1fr 280px;
|
|
}
|
|
|
|
/* Left Sidebar */
|
|
.dashboard-sidebar-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-right: 1px solid var(--border-color);
|
|
background: var(--bg-secondary);
|
|
overflow-y: auto;
|
|
max-height: 100vh;
|
|
}
|
|
|
|
.dashboard-sidebar-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
padding: 1rem 1rem 0.75rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.dashboard-logo-link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: 6px;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
transition: all 0.15s ease;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.dashboard-logo-link:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Sidebar Toggle Button */
|
|
.dashboard-sidebar-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dashboard-sidebar-toggle:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Collapsed Sidebar Styles */
|
|
.dashboard-layout.sidebar-collapsed {
|
|
grid-template-columns: 56px 1fr;
|
|
}
|
|
|
|
.dashboard-layout.sidebar-collapsed.with-right-sidebar {
|
|
grid-template-columns: 56px 1fr 280px;
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed {
|
|
width: 56px;
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed .dashboard-sidebar-header {
|
|
padding: 0.75rem 0.5rem;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed .dashboard-logo-link {
|
|
padding: 0.5rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed .dashboard-logo-link span {
|
|
display: none;
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed .dashboard-nav {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed .dashboard-nav-label {
|
|
display: none;
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed .dashboard-nav-item {
|
|
justify-content: center;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed .dashboard-nav-item span {
|
|
display: none;
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed .dashboard-sidebar-footer {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed
|
|
.dashboard-sidebar-footer
|
|
.dashboard-nav-item {
|
|
justify-content: center;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed
|
|
.dashboard-sidebar-footer
|
|
.dashboard-nav-item
|
|
span {
|
|
display: none;
|
|
}
|
|
|
|
/* Dashboard Navigation */
|
|
.dashboard-nav {
|
|
flex: 1;
|
|
padding: 0.75rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.dashboard-nav-section {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.dashboard-nav-label {
|
|
display: block;
|
|
padding: 0 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
font-size: var(--font-size-2xs);
|
|
font-weight: 500;
|
|
color: var(--text-tertiary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.dashboard-nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
padding: 0.5rem 0.75rem;
|
|
margin-bottom: 2px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.dashboard-nav-item:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-nav-item.active {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-sidebar-footer {
|
|
padding: 0.75rem;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.dashboard-sidebar-footer .login-link {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* Dashboard Main Content */
|
|
.dashboard-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
max-height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
/* Dashboard Header */
|
|
.dashboard-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 0.75rem 1.5rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background: var(--bg-primary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dashboard-header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.dashboard-title {
|
|
font-size: var(--font-size-lg);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
.dashboard-header-center {
|
|
flex: 1;
|
|
max-width: 400px;
|
|
margin: 0 1rem;
|
|
}
|
|
|
|
.dashboard-search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.dashboard-search-input {
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-sm);
|
|
width: 100%;
|
|
outline: none;
|
|
}
|
|
|
|
.dashboard-search-input::placeholder {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.dashboard-header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dashboard-sync-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.375rem 0.75rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.dashboard-sync-btn:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
border-color: var(--text-tertiary);
|
|
}
|
|
|
|
.dashboard-sync-btn.prod {
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
border-color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-sync-btn.prod:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.dashboard-theme-btn,
|
|
.dashboard-font-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.dashboard-theme-btn:hover,
|
|
.dashboard-font-btn:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Dashboard Sidebar Footer (User Profile) */
|
|
.dashboard-sidebar-footer {
|
|
margin-top: auto;
|
|
padding: 0.75rem;
|
|
border-top: 1px solid var(--border-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.dashboard-user-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.5rem;
|
|
border-radius: 8px;
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed .dashboard-user-card {
|
|
justify-content: center;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed .dashboard-user-info {
|
|
display: none;
|
|
}
|
|
|
|
.dashboard-user-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 2px solid var(--border-color);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed .dashboard-user-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.dashboard-user-avatar-placeholder {
|
|
border-radius: 50%;
|
|
background: var(--bg-primary);
|
|
border: 2px solid var(--border-color);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed .dashboard-user-avatar-placeholder {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.dashboard-user-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.dashboard-user-name {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dashboard-user-email {
|
|
font-size: 11px;
|
|
color: var(--text-tertiary);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dashboard-signout-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed .dashboard-signout-btn span {
|
|
display: none;
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed .dashboard-signout-btn {
|
|
width: auto;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.dashboard-signout-btn:hover {
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
border-color: var(--text-tertiary);
|
|
}
|
|
|
|
/* Dashboard Content Area */
|
|
.dashboard-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0.625rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Dashboard List View */
|
|
.dashboard-list-view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.dashboard-list-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.dashboard-filter-tabs {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.25rem;
|
|
background: var(--bg-secondary);
|
|
border-radius: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.dashboard-filter-tab {
|
|
padding: 0.375rem 0.75rem;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.dashboard-filter-tab:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-filter-tab.active {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-items-per-page {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.dashboard-items-label {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-secondary);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dashboard-items-select {
|
|
padding: 0.375rem 0.5rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-xs);
|
|
outline: none;
|
|
cursor: pointer;
|
|
transition: border-color 0.15s ease;
|
|
}
|
|
|
|
.dashboard-items-select:hover {
|
|
border-color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-items-select:focus {
|
|
border-color: var(--mobile-add-button-bg);
|
|
}
|
|
|
|
.dashboard-pagination {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.dashboard-pagination-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.5rem 1rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.dashboard-pagination-btn:hover:not(:disabled) {
|
|
background: var(--bg-hover);
|
|
border-color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-pagination-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* List Table */
|
|
.dashboard-list-table {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dashboard-list-table-header {
|
|
display: grid;
|
|
grid-template-columns: 1fr 120px 100px 100px;
|
|
gap: 1rem;
|
|
padding: 0.75rem 1rem;
|
|
background: var(--bg-secondary);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 600;
|
|
color: var(--text-tertiary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.dashboard-list-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 110px 170px 110px;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
border-top: 1px solid var(--border-color);
|
|
align-items: center;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.dashboard-list-row:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.dashboard-list-row .col-title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.dashboard-list-row .post-title {
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.dashboard-list-row .post-slug {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-tertiary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.dashboard-list-row .col-date {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-list-row .col-order {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-list-row .col-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: var(--font-size-2xs);
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.status-badge.published {
|
|
background: rgba(34, 197, 94, 0.15);
|
|
color: #22c55e;
|
|
}
|
|
|
|
.status-badge.draft {
|
|
background: rgba(234, 179, 8, 0.15);
|
|
color: #ca8a04;
|
|
}
|
|
|
|
.source-badge {
|
|
display: inline-block;
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 3px;
|
|
font-size: var(--font-size-2xs);
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.source-badge.dashboard {
|
|
background: rgba(59, 130, 246, 0.15);
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.source-badge.sync {
|
|
background: rgba(107, 114, 128, 0.15);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.dashboard-list-row .col-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: var(--text-tertiary);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.action-btn.edit:hover {
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.action-btn.view:hover {
|
|
color: #22c55e;
|
|
}
|
|
|
|
.dashboard-list-empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 3rem;
|
|
color: var(--text-tertiary);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
/* Dashboard Editor */
|
|
.dashboard-editor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: calc(100vh - var(--header-height) - var(--padding-md));
|
|
min-height: 500px;
|
|
}
|
|
|
|
.dashboard-editor-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.dashboard-back-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.375rem 0.75rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.dashboard-back-btn:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-editor-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dashboard-view-toggle {
|
|
padding: 0.375rem 0.75rem;
|
|
border: 1px solid var(--border-color);
|
|
background: var(--bg-secondary);
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.dashboard-view-toggle:first-of-type {
|
|
border-radius: 6px 0 0 6px;
|
|
}
|
|
|
|
.dashboard-view-toggle:nth-of-type(2) {
|
|
border-radius: 0 6px 6px 0;
|
|
border-left: none;
|
|
}
|
|
|
|
.dashboard-view-toggle.active {
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
border-color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.375rem 0.75rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.dashboard-action-btn:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-action-btn.primary {
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
border-color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-action-btn.primary:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.dashboard-action-btn.success {
|
|
background: #22c55e;
|
|
color: #fff;
|
|
border-color: #22c55e;
|
|
}
|
|
|
|
.dashboard-action-btn.success:hover {
|
|
background: #16a34a;
|
|
border-color: #16a34a;
|
|
}
|
|
|
|
.dashboard-action-btn.success:disabled {
|
|
background: #86efac;
|
|
border-color: #86efac;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.animate-spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.dashboard-editor-container {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dashboard-editor-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dashboard-textarea {
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 1rem;
|
|
font-family:
|
|
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
font-size: var(--font-size-sm);
|
|
line-height: 1.6;
|
|
color: var(--text-primary);
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
resize: none;
|
|
outline: none;
|
|
}
|
|
|
|
.dashboard-textarea:focus {
|
|
border-color: var(--text-tertiary);
|
|
}
|
|
|
|
.dashboard-preview {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 2rem;
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.dashboard-preview-content {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.dashboard-preview-content h1 {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-preview-content .lead {
|
|
font-size: 1.125rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* Dashboard Editor Sidebar */
|
|
.dashboard-editor-sidebar {
|
|
position: relative;
|
|
min-width: 200px;
|
|
max-width: 600px;
|
|
border-left: 1px solid var(--border-color);
|
|
background-color: var(--background-secondary);
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dashboard-editor-sidebar.resizing {
|
|
user-select: none;
|
|
}
|
|
|
|
.dashboard-editor-sidebar.resizing * {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dashboard-editor-sidebar.resizing .dashboard-sidebar-resize-handle {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.dashboard-sidebar-resize-handle {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 4px;
|
|
cursor: col-resize;
|
|
background: transparent;
|
|
z-index: 10;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.dashboard-sidebar-resize-handle:hover {
|
|
background: var(--mobile-add-button-bg);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.dashboard-editor-sidebar.resizing .dashboard-sidebar-resize-handle {
|
|
background: var(--mobile-add-button-bg);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Dashboard Right Sidebar */
|
|
.dashboard-sidebar-right {
|
|
border-left: 1px solid var(--border-color);
|
|
background: var(--bg-secondary);
|
|
overflow-y: auto;
|
|
max-height: 100vh;
|
|
}
|
|
|
|
.dashboard-frontmatter {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dashboard-frontmatter-title {
|
|
flex-shrink: 0;
|
|
padding: 1rem 1rem 0.75rem;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
padding-bottom: 0.75rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.dashboard-frontmatter-fields {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.dashboard-frontmatter-divider {
|
|
height: 1px;
|
|
background: var(--border-color);
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.dashboard-frontmatter-section-title {
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.dashboard-frontmatter-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.dashboard-field-label {
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-field-label .required {
|
|
color: #ef4444;
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.dashboard-field-input,
|
|
.dashboard-field-textarea {
|
|
padding: 0.5rem 0.75rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-sm);
|
|
outline: none;
|
|
transition: border-color 0.15s ease;
|
|
}
|
|
|
|
.dashboard-field-input:focus,
|
|
.dashboard-field-textarea:focus {
|
|
border-color: var(--text-tertiary);
|
|
}
|
|
|
|
.dashboard-field-textarea {
|
|
resize: vertical;
|
|
min-height: 60px;
|
|
}
|
|
|
|
.dashboard-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dashboard-checkbox input {
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Tags Field */
|
|
.dashboard-tags-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dashboard-tags-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.dashboard-tag {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.25rem 0.5rem;
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-tag button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-tertiary);
|
|
cursor: pointer;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.dashboard-tag button:hover {
|
|
color: #ef4444;
|
|
}
|
|
|
|
.dashboard-tags-input {
|
|
display: flex;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.dashboard-tags-input input {
|
|
flex: 1;
|
|
padding: 0.375rem 0.5rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-xs);
|
|
outline: none;
|
|
}
|
|
|
|
.dashboard-tags-input button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.dashboard-tags-input button:hover {
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
border-color: var(--text-primary);
|
|
}
|
|
|
|
/* Dashboard Section Placeholder */
|
|
.dashboard-section-placeholder {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 400px;
|
|
text-align: center;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-section-placeholder h2 {
|
|
margin: 1rem 0 0.5rem;
|
|
font-size: var(--font-size-xl);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-section-placeholder p {
|
|
margin: 0 0 1rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-section-placeholder .note {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-tertiary);
|
|
font-style: italic;
|
|
}
|
|
|
|
.dashboard-placeholder-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.5rem 1rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.dashboard-placeholder-link:hover {
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
border-color: var(--text-primary);
|
|
}
|
|
|
|
/* AI Agent Section */
|
|
.dashboard-ai-section {
|
|
height: calc(100vh - 140px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dashboard-ai-section .ai-chat-view {
|
|
flex: 1;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* AI Dashboard Tabs */
|
|
.dashboard-ai-tabs {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
padding: 0.25rem;
|
|
background: var(--bg-secondary);
|
|
border-radius: 8px;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.dashboard-ai-tab {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.625rem 1rem;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.dashboard-ai-tab:hover {
|
|
color: var(--text-primary);
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.dashboard-ai-tab.active {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.dashboard-ai-chat-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* AI Chat Model Selector */
|
|
.ai-chat-header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.ai-chat-model-selector {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.ai-chat-model-select {
|
|
appearance: none;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 0.375rem 1.75rem 0.375rem 0.625rem;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.ai-chat-model-select:focus {
|
|
outline: none;
|
|
border-color: var(--accent-color);
|
|
}
|
|
|
|
.ai-chat-model-select:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.ai-chat-model-caret {
|
|
position: absolute;
|
|
right: 0.5rem;
|
|
pointer-events: none;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Image Generation Panel */
|
|
.dashboard-image-gen {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.dashboard-image-gen-controls {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.dashboard-image-gen-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dashboard-image-gen-label {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-image-gen-select {
|
|
appearance: none;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 0.625rem 0.875rem;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 0.75rem center;
|
|
}
|
|
|
|
.dashboard-image-gen-select:focus {
|
|
outline: none;
|
|
border-color: var(--accent-color);
|
|
}
|
|
|
|
.dashboard-image-gen-select:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.dashboard-image-gen-aspect-buttons {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.dashboard-image-gen-aspect-btn {
|
|
padding: 0.5rem 0.875rem;
|
|
border: 1px solid var(--border-color);
|
|
background: var(--bg-secondary);
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.dashboard-image-gen-aspect-btn:hover {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-image-gen-aspect-btn.active {
|
|
background: var(--accent-color);
|
|
border-color: var(--accent-color);
|
|
color: white;
|
|
}
|
|
|
|
.dashboard-image-gen-aspect-btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.dashboard-image-gen-textarea {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-sm);
|
|
font-family: inherit;
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
}
|
|
|
|
.dashboard-image-gen-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--accent-color);
|
|
}
|
|
|
|
.dashboard-image-gen-textarea:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.dashboard-image-gen-textarea::placeholder {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.dashboard-image-gen-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: var(--accent-color);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.dashboard-image-gen-button:hover:not(:disabled) {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.dashboard-image-gen-button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.dashboard-image-gen-error {
|
|
padding: 1rem;
|
|
background: var(--bg-error, rgba(239, 68, 68, 0.1));
|
|
border: 1px solid var(--border-error, rgba(239, 68, 68, 0.3));
|
|
border-radius: 8px;
|
|
color: var(--text-error, #ef4444);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.dashboard-image-gen-error p {
|
|
margin: 0 0 0.5rem;
|
|
}
|
|
|
|
.dashboard-image-gen-error p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.dashboard-image-gen-error a {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.dashboard-image-gen-result {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
background: var(--bg-secondary);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.dashboard-image-gen-preview {
|
|
max-width: 100%;
|
|
max-height: 400px;
|
|
border-radius: 8px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.dashboard-image-gen-download {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.625rem 1rem;
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-sm);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.dashboard-image-gen-download:hover {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
/* AI Agent Tabs */
|
|
.ai-agent-tabs {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
padding: 0.25rem;
|
|
background: var(--bg-secondary);
|
|
border-radius: 8px;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.ai-agent-tab {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.625rem 1rem;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.ai-agent-tab:hover {
|
|
color: var(--text-primary);
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.ai-agent-tab.active {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* AI Agent Chat Container */
|
|
.ai-agent-chat-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
|
|
.ai-agent-chat-container .ai-chat-view {
|
|
flex: 1;
|
|
}
|
|
|
|
/* AI Agent Image Container */
|
|
.ai-agent-image-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* AI Model Selector */
|
|
.ai-model-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.ai-model-label {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.ai-model-dropdown-container {
|
|
position: relative;
|
|
}
|
|
|
|
.ai-model-dropdown-trigger {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-sm);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.ai-model-dropdown-trigger:hover {
|
|
background: var(--bg-tertiary);
|
|
border-color: var(--text-tertiary);
|
|
}
|
|
|
|
.ai-model-dropdown {
|
|
position: absolute;
|
|
top: calc(100% + 4px);
|
|
left: 0;
|
|
min-width: 200px;
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
z-index: 100;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ai-model-option {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 0.625rem 0.875rem;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-sm);
|
|
cursor: pointer;
|
|
transition: background 0.15s ease;
|
|
text-align: left;
|
|
}
|
|
|
|
.ai-model-option:hover {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.ai-model-option.selected {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.ai-model-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.ai-model-provider {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-tertiary);
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
/* AI Aspect Ratio Selector */
|
|
.ai-aspect-ratio-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.ai-aspect-ratio-options {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ai-aspect-ratio-option {
|
|
padding: 0.5rem 0.875rem;
|
|
border: 1px solid var(--border-color);
|
|
background: var(--bg-secondary);
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.ai-aspect-ratio-option:hover {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.ai-aspect-ratio-option.selected {
|
|
background: var(--accent-color);
|
|
border-color: var(--accent-color);
|
|
color: white;
|
|
}
|
|
|
|
/* AI Generated Image Display */
|
|
.ai-generated-image {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
background: var(--bg-secondary);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.ai-generated-image img {
|
|
max-width: 100%;
|
|
max-height: 400px;
|
|
border-radius: 8px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.ai-generated-image-prompt {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
text-align: center;
|
|
margin: 0;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* AI Image Error */
|
|
.ai-image-error {
|
|
padding: 1rem;
|
|
background: var(--bg-error, rgba(239, 68, 68, 0.1));
|
|
border: 1px solid var(--border-error, rgba(239, 68, 68, 0.3));
|
|
border-radius: 8px;
|
|
color: var(--text-error, #ef4444);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.ai-image-error p {
|
|
margin: 0 0 0.5rem;
|
|
}
|
|
|
|
.ai-image-error p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.ai-image-error a {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* AI Image Loading */
|
|
.ai-image-loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
padding: 3rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.ai-image-spinner {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* AI Image Input Container */
|
|
.ai-image-input-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.ai-image-input {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-sm);
|
|
font-family: inherit;
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
}
|
|
|
|
.ai-image-input:focus {
|
|
outline: none;
|
|
border-color: var(--accent-color);
|
|
}
|
|
|
|
.ai-image-input:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.ai-image-input::placeholder {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.ai-image-generate-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: var(--accent-color);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.ai-image-generate-button:hover:not(:disabled) {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.ai-image-generate-button:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Import URL Section */
|
|
.dashboard-import-section {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.dashboard-import-header {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.dashboard-import-header h2 {
|
|
margin: 1rem 0 0.5rem;
|
|
font-size: var(--font-size-xl);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-import-header p {
|
|
color: var(--text-secondary);
|
|
margin: 0;
|
|
}
|
|
|
|
.dashboard-import-form {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.dashboard-import-input-group {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.625rem 0.875rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.dashboard-import-input {
|
|
flex: 1;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-sm);
|
|
outline: none;
|
|
}
|
|
|
|
.dashboard-import-input::placeholder {
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.dashboard-import-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.625rem 1rem;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.dashboard-import-btn:hover:not(:disabled) {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.dashboard-import-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.dashboard-import-btn .spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.dashboard-import-result {
|
|
padding: 1rem;
|
|
border-radius: 6px;
|
|
margin-bottom: 1.5rem;
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.dashboard-import-result.success {
|
|
background: rgba(34, 197, 94, 0.1);
|
|
color: #22c55e;
|
|
}
|
|
|
|
.dashboard-import-result.info {
|
|
background: rgba(59, 130, 246, 0.1);
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.dashboard-import-info {
|
|
padding: 1.5rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.dashboard-import-info h3 {
|
|
margin: 0 0 1rem;
|
|
font-size: var(--font-size-base);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-import-info ol {
|
|
margin: 0 0 1rem;
|
|
padding-left: 1.25rem;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.dashboard-import-info .note {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-tertiary);
|
|
font-style: italic;
|
|
}
|
|
|
|
.dashboard-import-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dashboard-import-checkbox input[type="checkbox"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dashboard-import-success {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
padding: 1rem;
|
|
background: rgba(34, 197, 94, 0.1);
|
|
border: 1px solid rgba(34, 197, 94, 0.3);
|
|
border-radius: 8px;
|
|
margin-bottom: 1.5rem;
|
|
color: #22c55e;
|
|
}
|
|
|
|
.dashboard-import-success svg {
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.dashboard-import-success strong {
|
|
color: #16a34a;
|
|
}
|
|
|
|
.import-view-link {
|
|
color: #22c55e;
|
|
text-decoration: none;
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.import-view-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Sync Section */
|
|
.dashboard-sync-section {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.dashboard-sync-header {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.dashboard-sync-header h2 {
|
|
margin: 1rem 0 0.5rem;
|
|
font-size: var(--font-size-xl);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-sync-header p {
|
|
color: var(--text-secondary);
|
|
margin: 0;
|
|
}
|
|
|
|
.dashboard-sync-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.dashboard-sync-card {
|
|
padding: 1.25rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.sync-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.sync-card-header h3 {
|
|
margin: 0;
|
|
font-size: var(--font-size-base);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.sync-status {
|
|
font-size: var(--font-size-2xs);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sync-status.running {
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.sync-status.success {
|
|
color: #22c55e;
|
|
}
|
|
|
|
.sync-status.error {
|
|
color: #ef4444;
|
|
}
|
|
|
|
.dashboard-sync-card p {
|
|
margin: 0 0 0.75rem;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.sync-command {
|
|
display: block;
|
|
padding: 0.5rem 0.75rem;
|
|
background: var(--bg-primary);
|
|
border-radius: 4px;
|
|
font-family:
|
|
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-secondary);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.dashboard-sync-card-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.375rem;
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.dashboard-sync-card-btn:hover {
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
border-color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-sync-info {
|
|
padding: 1rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.dashboard-sync-info h3 {
|
|
margin: 0 0 0.5rem;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-sync-info p {
|
|
margin: 0;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-sync-info p code {
|
|
background: var(--bg-primary);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 3px;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
/* Sync Server Status */
|
|
.sync-server-status {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 0.75rem 1rem;
|
|
margin-bottom: 1.5rem;
|
|
border-radius: 8px;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.sync-server-status.online {
|
|
border-color: #22c55e33;
|
|
}
|
|
|
|
.sync-server-status.offline {
|
|
border-color: #f5930033;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--text-tertiary);
|
|
}
|
|
|
|
.status-dot.online {
|
|
background: #22c55e;
|
|
box-shadow: 0 0 6px #22c55e66;
|
|
}
|
|
|
|
.status-dot.offline {
|
|
background: #f59300;
|
|
}
|
|
|
|
.status-text {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.status-help {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.status-help code {
|
|
background: var(--bg-primary);
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* Copy Sync Server Button */
|
|
.copy-sync-server-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-left: 0.25rem;
|
|
padding: 0;
|
|
border: none;
|
|
background: var(--bg-primary);
|
|
color: var(--text-tertiary);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.copy-sync-server-btn:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Copyable Code with Inline Button */
|
|
.copyable-code {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
background: var(--bg-primary);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 3px;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.inline-copy-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-tertiary);
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.inline-copy-btn:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Sync Card Buttons */
|
|
.sync-card-buttons {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.dashboard-sync-card-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.375rem;
|
|
flex: 1;
|
|
padding: 0.5rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
font-size: var(--font-size-xs);
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.dashboard-sync-card-btn:hover:not(:disabled) {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-sync-card-btn.copy {
|
|
flex: 0.4;
|
|
}
|
|
|
|
.dashboard-sync-card-btn.execute {
|
|
flex: 0.6;
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
border-color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-sync-card-btn.execute:hover:not(:disabled) {
|
|
opacity: 0.9;
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
}
|
|
|
|
.dashboard-sync-card-btn.execute.disabled,
|
|
.dashboard-sync-card-btn.execute:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-tertiary);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
/* Spinning animation for sync icon */
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.spinning {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/* Sync Terminal Output */
|
|
.sync-terminal {
|
|
margin-top: 1.5rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
.sync-terminal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.sync-terminal-header span {
|
|
flex: 1;
|
|
}
|
|
|
|
.sync-terminal-clear {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.25rem;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: var(--text-tertiary);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.sync-terminal-clear:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.sync-terminal-output {
|
|
margin: 0;
|
|
padding: 1rem;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
font-family:
|
|
ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Consolas,
|
|
monospace;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
color: var(--text-secondary);
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
.sync-terminal-output::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.sync-terminal-output::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.sync-terminal-output::-webkit-scrollbar-thumb {
|
|
background: var(--border-color);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.sync-terminal-output::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-tertiary);
|
|
}
|
|
|
|
/* Header Sync Buttons States */
|
|
.dashboard-sync-btn.running {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.dashboard-sync-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
DASHBOARD WRITE SECTION
|
|
Full writing experience with markdown editor and frontmatter sidebar
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
|
|
.dashboard-write-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-height: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.dashboard-write-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 0.75rem 1rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background-color: var(--background-secondary);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.dashboard-write-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
font-size: var(--font-size-md);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-editor-mode-toggles {
|
|
display: flex;
|
|
gap: 0;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-md);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dashboard-editor-mode-toggles .dashboard-view-toggle {
|
|
border: none;
|
|
border-radius: 0;
|
|
border-right: 1px solid var(--border-color);
|
|
}
|
|
|
|
.dashboard-editor-mode-toggles .dashboard-view-toggle:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
/* Quill Editor Styles */
|
|
.dashboard-quill-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dashboard-quill-container .quill {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dashboard-quill-container .ql-container {
|
|
flex: 1;
|
|
overflow: auto;
|
|
font-family: var(--font-family-base);
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
.dashboard-quill-container .ql-editor {
|
|
min-height: 100%;
|
|
padding: 1rem;
|
|
color: var(--text-primary);
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.dashboard-quill-container .ql-editor.ql-blank::before {
|
|
color: var(--text-tertiary);
|
|
font-style: normal;
|
|
}
|
|
|
|
.dashboard-quill-container .ql-toolbar {
|
|
background: var(--bg-primary);
|
|
border: none;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.dashboard-quill-container .ql-toolbar .ql-stroke {
|
|
stroke: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-quill-container .ql-toolbar .ql-fill {
|
|
fill: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-quill-container .ql-toolbar .ql-picker {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-quill-container .ql-toolbar button:hover .ql-stroke,
|
|
.dashboard-quill-container .ql-toolbar button.ql-active .ql-stroke {
|
|
stroke: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-quill-container .ql-toolbar button:hover .ql-fill,
|
|
.dashboard-quill-container .ql-toolbar button.ql-active .ql-fill {
|
|
fill: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-quill-container .ql-toolbar .ql-picker-label:hover,
|
|
.dashboard-quill-container .ql-toolbar .ql-picker-label.ql-active {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-quill-container .ql-toolbar .ql-picker-options {
|
|
background: var(--bg-primary);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.dashboard-quill-container .ql-container {
|
|
border: none;
|
|
}
|
|
|
|
.dashboard-write-type-selector {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.write-type-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-md);
|
|
background-color: var(--background-primary);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
font-size: var(--font-size-sm);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.write-type-btn:hover {
|
|
border-color: var(--primary-color);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.write-type-btn.active {
|
|
border-color: var(--primary-color);
|
|
background-color: var(--primary-color);
|
|
color: var(--button-text-color);
|
|
}
|
|
|
|
.dashboard-write-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dashboard-write-container {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
.dashboard-write-main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.dashboard-write-textarea {
|
|
flex: 1;
|
|
width: 100%;
|
|
padding: 1rem;
|
|
border: none;
|
|
resize: none;
|
|
font-family: var(--font-mono);
|
|
font-size: var(--font-size-sm);
|
|
line-height: 1.6;
|
|
background-color: var(--background-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-write-textarea:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.dashboard-write-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.5rem 1rem;
|
|
border-top: 1px solid var(--border-color);
|
|
background-color: var(--background-secondary);
|
|
}
|
|
|
|
.dashboard-write-stats {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.dashboard-write-stats .stats-divider {
|
|
width: 1px;
|
|
height: 12px;
|
|
background-color: var(--border-color);
|
|
}
|
|
|
|
.dashboard-write-hint {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.dashboard-write-hint code {
|
|
background-color: var(--background-tertiary);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: var(--border-radius-sm);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* Frontmatter sidebar in write section */
|
|
.dashboard-write-sidebar {
|
|
width: 280px;
|
|
border-left: 1px solid var(--border-color);
|
|
background-color: var(--background-secondary);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
}
|
|
|
|
.dashboard-write-sidebar-header {
|
|
padding: 0.75rem 1rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-weight: 600;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-primary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dashboard-write-fields {
|
|
flex: 1;
|
|
padding: 0.75rem;
|
|
overflow-y: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.write-fields-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.write-fields-label {
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.write-field-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.375rem 0.5rem;
|
|
border-radius: var(--border-radius-sm);
|
|
background-color: var(--background-primary);
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.write-field-row:hover {
|
|
background-color: var(--background-tertiary);
|
|
}
|
|
|
|
.write-field-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.write-field-name {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.write-field-required {
|
|
color: var(--color-red-500);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.write-field-example {
|
|
font-size: 0.675rem;
|
|
color: var(--text-muted);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.write-field-copy {
|
|
background: none;
|
|
border: none;
|
|
padding: 0.25rem;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
border-radius: var(--border-radius-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.write-field-copy:hover {
|
|
color: var(--primary-color);
|
|
background-color: var(--background-secondary);
|
|
}
|
|
|
|
.write-field-copy.copied {
|
|
color: var(--color-green-600);
|
|
}
|
|
|
|
.write-fields-note {
|
|
margin-top: 0.75rem;
|
|
padding: 0.5rem;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-muted);
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Dashboard write warning */
|
|
.dashboard-write-warning {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background-color: var(--color-orange-100);
|
|
color: var(--color-orange-800);
|
|
font-size: var(--font-size-xs);
|
|
border-top: 1px solid var(--color-orange-200);
|
|
}
|
|
|
|
:root[data-theme="dark"] .dashboard-write-warning {
|
|
background-color: rgba(245, 158, 11, 0.1);
|
|
color: var(--color-orange-400);
|
|
border-top-color: rgba(245, 158, 11, 0.2);
|
|
}
|
|
|
|
/* Dashboard write link */
|
|
.dashboard-write-link {
|
|
padding: 0.75rem 1rem;
|
|
text-align: center;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Dashboard write AI chat container */
|
|
.dashboard-write-ai-chat {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Dashboard Write Focus Mode Toggle Button */
|
|
.dashboard-action-btn.focus-toggle {
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.dashboard-action-btn.focus-toggle span {
|
|
display: none;
|
|
}
|
|
|
|
.dashboard-action-btn.focus-toggle.active {
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
border-color: var(--text-primary);
|
|
}
|
|
|
|
/* Frontmatter Toggle Button */
|
|
.dashboard-action-btn.frontmatter-toggle {
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.dashboard-action-btn.frontmatter-toggle.active {
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
border-color: var(--text-primary);
|
|
}
|
|
|
|
/* Dashboard Write Sidebar Toggle */
|
|
.dashboard-write-sidebar-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 4px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.dashboard-write-sidebar-toggle:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Dashboard Write Sidebar Header with Toggle */
|
|
.dashboard-write-sidebar-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* Dashboard Write Sidebar Collapsed State */
|
|
.dashboard-write-sidebar.collapsed {
|
|
width: 56px;
|
|
}
|
|
|
|
.dashboard-write-sidebar.collapsed .dashboard-write-fields {
|
|
display: none;
|
|
}
|
|
|
|
.dashboard-write-sidebar.collapsed .dashboard-write-sidebar-header span {
|
|
display: none;
|
|
}
|
|
|
|
.dashboard-write-sidebar.collapsed .dashboard-write-sidebar-header {
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Dashboard Write Focus Mode State */
|
|
.dashboard-write-section.focus-mode {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 10;
|
|
background: var(--bg-primary);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dashboard-write-section.focus-mode .dashboard-write-header {
|
|
padding: 0.75rem 1.5rem;
|
|
background: var(--bg-primary);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.dashboard-write-section.focus-mode .dashboard-write-title {
|
|
display: none;
|
|
}
|
|
|
|
.dashboard-write-section.focus-mode .dashboard-write-actions {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.dashboard-write-section.focus-mode .dashboard-write-container {
|
|
flex: 1;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dashboard-write-section.focus-mode .dashboard-write-main {
|
|
flex: 1;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dashboard-write-section.focus-mode .dashboard-write-sidebar {
|
|
width: 280px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dashboard-write-section.focus-mode.frontmatter-collapsed .dashboard-write-sidebar {
|
|
width: 56px;
|
|
}
|
|
|
|
.dashboard-write-section.focus-mode .dashboard-write-textarea {
|
|
padding: 2rem 3rem;
|
|
}
|
|
|
|
.dashboard-write-section.focus-mode .dashboard-write-footer {
|
|
width: 100%;
|
|
border-top: 1px solid var(--border-color);
|
|
padding: 0.5rem 3rem;
|
|
}
|
|
|
|
.dashboard-write-section.focus-mode .dashboard-write-warning {
|
|
display: none;
|
|
}
|
|
|
|
/* Config field note styling */
|
|
.config-field-note {
|
|
display: block;
|
|
margin-top: 0.375rem;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-muted);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Mobile responsive for dashboard write */
|
|
@media (max-width: 768px) {
|
|
.dashboard-write-header {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.dashboard-write-type-selector {
|
|
width: 100%;
|
|
}
|
|
|
|
.write-type-btn {
|
|
flex: 1;
|
|
justify-content: center;
|
|
}
|
|
|
|
.dashboard-write-actions {
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.dashboard-write-container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dashboard-write-sidebar {
|
|
width: 100%;
|
|
border-left: none;
|
|
border-top: 1px solid var(--border-color);
|
|
max-height: 300px;
|
|
}
|
|
|
|
.dashboard-write-footer {
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
DASHBOARD TOAST NOTIFICATIONS
|
|
Themed toast notifications that match the app's design system
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
|
|
.dashboard-toast-container {
|
|
position: fixed;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
z-index: 10000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.dashboard-toast {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.875rem 1rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
animation: toastSlideIn 0.3s ease;
|
|
}
|
|
|
|
@keyframes toastSlideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.dashboard-toast-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dashboard-toast.success .dashboard-toast-icon {
|
|
color: #22c55e;
|
|
}
|
|
|
|
.dashboard-toast.error .dashboard-toast-icon {
|
|
color: #ef4444;
|
|
}
|
|
|
|
.dashboard-toast.warning .dashboard-toast-icon {
|
|
color: #f59e0b;
|
|
}
|
|
|
|
.dashboard-toast.info .dashboard-toast-icon {
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.dashboard-toast-message {
|
|
flex: 1;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-primary);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.dashboard-toast-close {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: var(--text-tertiary);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dashboard-toast-close:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Toast theme variations */
|
|
.dashboard-toast.success {
|
|
border-left: 3px solid #22c55e;
|
|
}
|
|
|
|
.dashboard-toast.error {
|
|
border-left: 3px solid #ef4444;
|
|
}
|
|
|
|
.dashboard-toast.warning {
|
|
border-left: 3px solid #f59e0b;
|
|
}
|
|
|
|
.dashboard-toast.info {
|
|
border-left: 3px solid #3b82f6;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════════
|
|
DASHBOARD COMMAND MODAL
|
|
Themed modal for displaying terminal commands
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
|
|
.dashboard-modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(4px);
|
|
animation: modalFadeIn 0.2s ease;
|
|
}
|
|
|
|
@keyframes modalFadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.dashboard-modal {
|
|
width: 100%;
|
|
max-width: 480px;
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
|
overflow: hidden;
|
|
animation: dashboardModalSlideIn 0.2s ease;
|
|
}
|
|
|
|
@keyframes dashboardModalSlideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95) translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
}
|
|
|
|
.dashboard-modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 1.25rem 1.5rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.dashboard-modal-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dashboard-modal-title {
|
|
flex: 1;
|
|
margin: 0;
|
|
font-size: var(--font-size-lg);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-modal-close {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--text-tertiary);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dashboard-modal-close:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-modal-description {
|
|
margin: 0;
|
|
padding: 1rem 1.5rem;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.dashboard-modal-command-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin: 0 1.5rem 1rem;
|
|
padding: 0.875rem 1rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.dashboard-modal-command {
|
|
flex: 1;
|
|
font-family:
|
|
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-primary);
|
|
word-break: break-all;
|
|
}
|
|
|
|
.dashboard-modal-copy-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 0;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dashboard-modal-copy-btn:hover {
|
|
background: var(--text-primary);
|
|
color: var(--bg-primary);
|
|
border-color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-modal-footer {
|
|
padding: 1rem 1.5rem 1.5rem;
|
|
}
|
|
|
|
.dashboard-modal-hint {
|
|
margin: 0 0 1rem;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-tertiary);
|
|
text-align: center;
|
|
}
|
|
|
|
.dashboard-modal-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.dashboard-modal-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.375rem;
|
|
padding: 0.625rem 1rem;
|
|
border-radius: 6px;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.dashboard-modal-btn.secondary {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-modal-btn.secondary:hover {
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-modal-btn.primary {
|
|
background: var(--text-primary);
|
|
border: 1px solid var(--text-primary);
|
|
color: var(--bg-primary);
|
|
}
|
|
|
|
.dashboard-modal-btn.primary:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Delete confirmation modal */
|
|
.dashboard-modal-delete {
|
|
max-width: 420px;
|
|
}
|
|
|
|
.dashboard-modal-icon-warning {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
color: #ef4444;
|
|
}
|
|
|
|
.dashboard-modal-content {
|
|
padding: 0 1.5rem 1rem;
|
|
}
|
|
|
|
.dashboard-modal-message {
|
|
margin: 0 0 1rem;
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
.dashboard-modal-item-name {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-md);
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.dashboard-modal-item-name svg {
|
|
color: var(--text-secondary);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dashboard-modal-warning-text {
|
|
margin: 0;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-tertiary);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.dashboard-modal-btn.danger {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
background: #ef4444;
|
|
border: 1px solid #ef4444;
|
|
color: #fff;
|
|
}
|
|
|
|
.dashboard-modal-btn.danger:hover:not(:disabled) {
|
|
background: #dc2626;
|
|
border-color: #dc2626;
|
|
}
|
|
|
|
.dashboard-modal-btn.danger:disabled {
|
|
background: #fca5a5;
|
|
border-color: #fca5a5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Modal theme variations */
|
|
:root[data-theme="dark"] .dashboard-modal-backdrop {
|
|
background: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
:root[data-theme="tan"] .dashboard-modal {
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
:root[data-theme="cloud"] .dashboard-modal {
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Toast responsive */
|
|
@media (max-width: 768px) {
|
|
.dashboard-toast-container {
|
|
left: 1rem;
|
|
right: 1rem;
|
|
max-width: none;
|
|
}
|
|
|
|
.dashboard-toast {
|
|
padding: 0.75rem;
|
|
}
|
|
}
|
|
|
|
/* Modal responsive */
|
|
@media (max-width: 768px) {
|
|
.dashboard-modal-backdrop {
|
|
padding: 0.5rem;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.dashboard-modal {
|
|
max-width: none;
|
|
border-radius: 12px 12px 0 0;
|
|
animation: dashboardModalSlideUp 0.3s ease;
|
|
}
|
|
|
|
@keyframes dashboardModalSlideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(100%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.dashboard-modal-header {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.dashboard-modal-description {
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.dashboard-modal-command-container {
|
|
margin: 0 1rem 0.75rem;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.dashboard-modal-footer {
|
|
padding: 0.75rem 1rem 1rem;
|
|
}
|
|
|
|
.dashboard-modal-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dashboard-modal-btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* Responsive: Tablet */
|
|
@media (max-width: 1024px) {
|
|
.dashboard-layout {
|
|
grid-template-columns: 200px 1fr;
|
|
}
|
|
|
|
.dashboard-layout.sidebar-collapsed {
|
|
grid-template-columns: 56px 1fr;
|
|
}
|
|
|
|
.dashboard-layout.with-right-sidebar {
|
|
grid-template-columns: 200px 1fr 240px;
|
|
}
|
|
|
|
.dashboard-layout.sidebar-collapsed.with-right-sidebar {
|
|
grid-template-columns: 56px 1fr 240px;
|
|
}
|
|
|
|
.dashboard-header-center {
|
|
max-width: 300px;
|
|
}
|
|
|
|
.dashboard-sync-btn span {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Config Section */
|
|
.dashboard-config-section {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.dashboard-config-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.dashboard-config-header h2 {
|
|
margin: 0 0 0.25rem;
|
|
font-size: var(--font-size-xl);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-config-header p {
|
|
margin: 0;
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.dashboard-config-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.dashboard-config-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.dashboard-config-card {
|
|
padding: 1.25rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.dashboard-config-card h3 {
|
|
margin: 0 0 1rem;
|
|
font-size: var(--font-size-base);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.config-field {
|
|
margin-bottom: 0.875rem;
|
|
}
|
|
|
|
.config-field:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.config-field label {
|
|
display: block;
|
|
margin-bottom: 0.375rem;
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.config-field input[type="text"],
|
|
.config-field input[type="number"],
|
|
.config-field select,
|
|
.config-field textarea {
|
|
width: 100%;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-sm);
|
|
outline: none;
|
|
transition: border-color 0.15s ease;
|
|
}
|
|
|
|
.config-field input:focus,
|
|
.config-field select:focus,
|
|
.config-field textarea:focus {
|
|
border-color: var(--text-tertiary);
|
|
}
|
|
|
|
.config-field textarea {
|
|
resize: vertical;
|
|
min-height: 60px;
|
|
}
|
|
|
|
.config-field.checkbox label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
cursor: pointer;
|
|
font-size: var(--font-size-sm);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.config-field.checkbox input {
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.config-field.checkbox span {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-config-note {
|
|
padding: 1rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-config-note code {
|
|
padding: 0.125rem 0.375rem;
|
|
background: var(--bg-primary);
|
|
border-radius: 4px;
|
|
font-family:
|
|
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.dashboard-config-reminder {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.875rem 1rem;
|
|
margin-bottom: 1.5rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-config-reminder svg {
|
|
flex-shrink: 0;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.dashboard-link-button {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
margin-left: 0.25rem;
|
|
color: var(--text-primary);
|
|
font-weight: 500;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
font-size: inherit;
|
|
font-family: inherit;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.dashboard-link-button:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.dashboard-config-preview {
|
|
margin-top: 2rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.dashboard-config-preview h3 {
|
|
margin: 0 0 1rem;
|
|
font-size: var(--font-size-base);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-config-preview-content {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dashboard-code-preview {
|
|
margin: 0;
|
|
padding: 1rem;
|
|
overflow-x: auto;
|
|
font-family:
|
|
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
font-size: var(--font-size-xs);
|
|
line-height: 1.6;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-code-preview code {
|
|
display: block;
|
|
white-space: pre;
|
|
color: inherit;
|
|
}
|
|
|
|
.config-field input[type="color"] {
|
|
width: 60px;
|
|
height: 40px;
|
|
padding: 0;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.config-field input[type="url"] {
|
|
font-family:
|
|
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
}
|
|
|
|
/* Newsletter Section in Dashboard */
|
|
.dashboard-newsletter-section {
|
|
max-width: 800px;
|
|
}
|
|
|
|
.dashboard-newsletter-section.full-width {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.dashboard-newsletter-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.newsletter-stat-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 1.25rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.newsletter-stat-card .stat-value {
|
|
font-size: var(--font-size-2xl);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.newsletter-stat-card .stat-label {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-tertiary);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.dashboard-newsletter-send {
|
|
padding: 1.5rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.dashboard-newsletter-send h3 {
|
|
margin: 0 0 0.5rem;
|
|
font-size: var(--font-size-base);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-newsletter-send p {
|
|
margin: 0 0 1rem;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.newsletter-post-select select {
|
|
width: 100%;
|
|
padding: 0.625rem 0.875rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-sm);
|
|
outline: none;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.newsletter-send-note {
|
|
padding: 1rem;
|
|
background: var(--bg-primary);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.newsletter-send-note p {
|
|
margin: 0 0 0.5rem;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.newsletter-send-note code {
|
|
display: block;
|
|
padding: 0.5rem 0.75rem;
|
|
background: var(--bg-secondary);
|
|
border-radius: 4px;
|
|
font-family:
|
|
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-newsletter-link {
|
|
margin-top: 1.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.dashboard-newsletter-write {
|
|
padding: 1.5rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.dashboard-newsletter-write h3 {
|
|
margin: 0 0 0.5rem;
|
|
font-size: var(--font-size-base);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-newsletter-write p {
|
|
margin: 0 0 1.5rem;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-newsletter-form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.dashboard-newsletter-result {
|
|
padding: 0.75rem;
|
|
border-radius: 6px;
|
|
font-size: var(--font-size-sm);
|
|
word-break: break-word;
|
|
}
|
|
|
|
.dashboard-newsletter-result.success {
|
|
background: rgba(34, 197, 94, 0.1);
|
|
border: 1px solid rgba(34, 197, 94, 0.3);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-newsletter-result.error {
|
|
background: rgba(239, 68, 68, 0.1);
|
|
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-newsletter-controls {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.dashboard-newsletter-search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.625rem 0.875rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.dashboard-newsletter-search-input {
|
|
flex: 1;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-sm);
|
|
outline: none;
|
|
}
|
|
|
|
.dashboard-newsletter-filter-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.dashboard-newsletter-filter-label {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-newsletter-filter-buttons {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dashboard-newsletter-filter-btn {
|
|
padding: 0.375rem 0.75rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-secondary);
|
|
font-size: var(--font-size-xs);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.dashboard-newsletter-filter-btn:hover {
|
|
background: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-newsletter-filter-btn.active {
|
|
background: var(--mobile-add-button-bg);
|
|
color: var(--text-primary);
|
|
border-color: var(--mobile-add-button-bg);
|
|
}
|
|
|
|
.dashboard-newsletter-pagination {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-top: 1.5rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.dashboard-newsletter-delete-confirm {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dashboard-newsletter-command-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.dashboard-newsletter-command {
|
|
flex: 1;
|
|
padding: 0.5rem 0.75rem;
|
|
background: var(--bg-primary);
|
|
border-radius: 4px;
|
|
font-family:
|
|
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-newsletter-recent-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.dashboard-newsletter-recent-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.dashboard-newsletter-recent-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.dashboard-newsletter-recent-slug {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-newsletter-recent-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-newsletter-badge-type {
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.dashboard-newsletter-badge-type.custom {
|
|
background: rgba(59, 130, 246, 0.1);
|
|
color: rgb(59, 130, 246);
|
|
}
|
|
|
|
.dashboard-newsletter-badge-type.post {
|
|
background: rgba(34, 197, 94, 0.1);
|
|
color: rgb(34, 197, 94);
|
|
}
|
|
|
|
.dashboard-newsletter-recent-date {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-newsletter-stats-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.dashboard-newsletter-stat-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1.25rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.dashboard-newsletter-stat-card-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--bg-primary);
|
|
border-radius: 8px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-newsletter-stat-card-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dashboard-newsletter-stat-card-value {
|
|
font-size: var(--font-size-xl);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-newsletter-stat-card-label {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.dashboard-newsletter-stats-summary {
|
|
padding: 1.5rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.dashboard-newsletter-stats-summary h3 {
|
|
margin: 0 0 1rem;
|
|
font-size: var(--font-size-base);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-newsletter-stats-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0.75rem 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-newsletter-stats-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.dashboard-newsletter-label {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.dashboard-newsletter-input,
|
|
.dashboard-newsletter-select,
|
|
.dashboard-newsletter-textarea {
|
|
width: 100%;
|
|
padding: 0.625rem 0.875rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: var(--font-size-sm);
|
|
outline: none;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.dashboard-newsletter-textarea {
|
|
resize: vertical;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.dashboard-newsletter-send-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: var(--mobile-add-button-bg);
|
|
color: var(--text-primary);
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.dashboard-newsletter-send-btn:hover:not(:disabled) {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.dashboard-newsletter-send-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.dashboard-newsletter-form-desc {
|
|
margin: 0 0 1.5rem;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Stats Section in Dashboard */
|
|
.dashboard-stats-section {
|
|
max-width: 800px;
|
|
}
|
|
|
|
.dashboard-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.dashboard-stat-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1.25rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.dashboard-stat-card .stat-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--bg-primary);
|
|
border-radius: 8px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-stat-card .stat-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dashboard-stat-card .stat-value {
|
|
font-size: var(--font-size-xl);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dashboard-stat-card .stat-label {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
.dashboard-stats-active,
|
|
.dashboard-stats-pages {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.dashboard-stats-active h3,
|
|
.dashboard-stats-pages h3 {
|
|
margin: 0 0 1rem;
|
|
font-size: var(--font-size-base);
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.active-paths-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.active-path-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.75rem 1rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.active-path-item .path {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.active-path-item .count {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
background: var(--bg-primary);
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.col-views {
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.col-email {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-primary);
|
|
word-break: break-all;
|
|
}
|
|
|
|
.col-source {
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.dashboard-stats-link {
|
|
margin-top: 1.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Responsive: Tablet */
|
|
@media (max-width: 1024px) {
|
|
.dashboard-config-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
}
|
|
|
|
.dashboard-stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
/* Responsive: Mobile */
|
|
@media (max-width: 768px) {
|
|
.dashboard-layout {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto 1fr;
|
|
}
|
|
|
|
.dashboard-layout.sidebar-collapsed {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto 1fr;
|
|
}
|
|
|
|
.dashboard-layout.with-right-sidebar {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto 1fr auto;
|
|
}
|
|
|
|
.dashboard-layout.sidebar-collapsed.with-right-sidebar {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto 1fr auto;
|
|
}
|
|
|
|
.dashboard-sidebar-left {
|
|
border-right: none;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Mobile: collapsed sidebar hides nav items completely */
|
|
.dashboard-sidebar-left.collapsed {
|
|
width: 100%;
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed .dashboard-nav {
|
|
display: none;
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed .dashboard-sidebar-footer {
|
|
display: none;
|
|
}
|
|
|
|
.dashboard-sidebar-header {
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed .dashboard-sidebar-header {
|
|
padding: 0.75rem 1rem;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.dashboard-sidebar-left.collapsed .dashboard-logo-link span {
|
|
display: inline;
|
|
}
|
|
|
|
.dashboard-nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem 0.75rem;
|
|
}
|
|
|
|
.dashboard-nav-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.dashboard-nav-label {
|
|
display: none;
|
|
}
|
|
|
|
.dashboard-nav-item {
|
|
padding: 0.375rem 0.75rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.dashboard-nav-item span {
|
|
display: none;
|
|
}
|
|
|
|
.dashboard-sidebar-footer {
|
|
display: none;
|
|
}
|
|
|
|
.dashboard-header {
|
|
flex-wrap: wrap;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.dashboard-header-center {
|
|
order: 3;
|
|
flex: 1 1 100%;
|
|
max-width: none;
|
|
margin: 0.75rem 0 0;
|
|
}
|
|
|
|
.dashboard-header-right {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.dashboard-sync-btn {
|
|
padding: 0.375rem;
|
|
}
|
|
|
|
.dashboard-content {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.dashboard-list-table-header,
|
|
.dashboard-list-row {
|
|
grid-template-columns: 1fr 80px 80px;
|
|
}
|
|
|
|
.dashboard-list-table-header .col-date,
|
|
.dashboard-list-row .col-date {
|
|
display: none;
|
|
}
|
|
|
|
.dashboard-sidebar-right {
|
|
border-left: none;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.dashboard-editor-container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dashboard-editor-sidebar {
|
|
width: 100%;
|
|
border-left: none;
|
|
border-top: 1px solid var(--border-color);
|
|
max-height: 50vh;
|
|
}
|
|
|
|
.dashboard-editor-toolbar {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.dashboard-editor-actions {
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.dashboard-sync-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/* Config section mobile */
|
|
.dashboard-config-header {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.dashboard-config-actions {
|
|
justify-content: stretch;
|
|
}
|
|
|
|
.dashboard-config-actions .dashboard-action-btn {
|
|
flex: 1;
|
|
justify-content: center;
|
|
}
|
|
|
|
.dashboard-config-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/* Stats section mobile */
|
|
.dashboard-stats-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.dashboard-stat-card {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dashboard-stat-card .stat-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
/* Newsletter section mobile */
|
|
.dashboard-newsletter-stats {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.newsletter-stat-card {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.dashboard-newsletter-controls {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dashboard-newsletter-filter-bar {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dashboard-newsletter-filter-buttons {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.dashboard-newsletter-stats-cards {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.dashboard-newsletter-recent-item {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dashboard-list-table-header,
|
|
.dashboard-list-row {
|
|
grid-template-columns: 1fr 80px 60px 80px 60px;
|
|
}
|
|
|
|
.dashboard-list-table-header .col-source,
|
|
.dashboard-list-row .col-source {
|
|
display: none;
|
|
}
|
|
|
|
/* Import section mobile */
|
|
.dashboard-import-form {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dashboard-import-btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Pagination mobile */
|
|
.dashboard-items-per-page {
|
|
margin-left: 0;
|
|
margin-top: 0.5rem;
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.dashboard-pagination {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.dashboard-pagination-btn {
|
|
flex: 1;
|
|
justify-content: center;
|
|
min-width: 120px;
|
|
}
|
|
}
|
|
|
|
/* Responsive: Small Mobile */
|
|
@media (max-width: 480px) {
|
|
.dashboard-stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.dashboard-title {
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
.dashboard-theme-btn,
|
|
.dashboard-font-btn {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.dashboard-filter-tabs {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.dashboard-filter-tab {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
Docs Section Layout (Starlight-style)
|
|
============================================ */
|
|
|
|
/* Three-column docs layout - full width */
|
|
/* Sidebars are position: fixed, so no grid needed */
|
|
.docs-layout {
|
|
width: 100%;
|
|
min-height: calc(100vh - 60px);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Docs layout without TOC (two-column) */
|
|
.docs-layout.no-toc {
|
|
/* Same as default - sidebars are fixed */
|
|
}
|
|
|
|
/* Left sidebar for docs navigation - flush left */
|
|
.docs-sidebar-left {
|
|
position: fixed;
|
|
top: 80px;
|
|
left: 0;
|
|
width: 280px;
|
|
height: calc(100vh - 80px);
|
|
overflow-y: auto;
|
|
background-color: var(--bg-sidebar);
|
|
padding: 24px;
|
|
border-right: 1px solid var(--border-sidebar);
|
|
border-radius: 6px;
|
|
border-top: 1px solid var(--border-sidebar);
|
|
z-index: 10;
|
|
}
|
|
|
|
.docs-sidebar-left::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.docs-sidebar-left::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.docs-sidebar-left::-webkit-scrollbar-thumb {
|
|
background-color: var(--border-color);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.docs-sidebar-left::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--text-muted);
|
|
}
|
|
|
|
/* Right sidebar for table of contents - flush right */
|
|
.docs-sidebar-right {
|
|
position: fixed;
|
|
top: 80px;
|
|
right: 0;
|
|
width: 280px;
|
|
height: calc(100vh - 80px);
|
|
overflow-y: auto;
|
|
background-color: var(--bg-sidebar);
|
|
padding: 24px;
|
|
border-left: 1px solid var(--border-sidebar);
|
|
border-radius: 6px;
|
|
border-top: 1px solid var(--border-sidebar);
|
|
z-index: 10;
|
|
}
|
|
|
|
.docs-sidebar-right::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.docs-sidebar-right::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.docs-sidebar-right::-webkit-scrollbar-thumb {
|
|
background-color: var(--border-color);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.docs-sidebar-right::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--text-muted);
|
|
}
|
|
|
|
/* AI Chat section in docs right sidebar */
|
|
.docs-ai-chat-section {
|
|
padding: 0px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid var(--border-sidebar);
|
|
}
|
|
|
|
.docs-ai-chat-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 10px 14px;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.docs-ai-chat-toggle:hover {
|
|
background: var(--bg-tertiary);
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
.docs-ai-chat-toggle[aria-expanded="true"] {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
.docs-ai-chat-toggle-text {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.docs-ai-chat-container {
|
|
border: 1px solid var(--border-color);
|
|
border-top: none;
|
|
border-radius: 0 0 8px 8px;
|
|
background: var(--bg-primary);
|
|
max-height: 400px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Override AI chat view styles for docs sidebar */
|
|
.docs-ai-chat-container .ai-chat-view {
|
|
height: 100%;
|
|
max-height: 400px;
|
|
border: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.docs-ai-chat-container .ai-chat-messages {
|
|
max-height: 280px;
|
|
min-height: 150px;
|
|
}
|
|
|
|
.docs-ai-chat-container .ai-chat-input-wrapper {
|
|
padding: 12px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.docs-ai-chat-container .ai-chat-input {
|
|
font-size: var(--font-size-sm);
|
|
min-height: 36px;
|
|
max-height: 80px;
|
|
}
|
|
|
|
/* Main content area - uses margins for fixed sidebars */
|
|
.docs-content {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding: 32px 48px;
|
|
overflow-y: auto;
|
|
min-height: calc(100vh - 80px);
|
|
}
|
|
|
|
/* Center the article within docs-content */
|
|
.docs-content .docs-article {
|
|
max-width: 800px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* No TOC layout - content takes more space */
|
|
.docs-layout.no-toc .docs-content {
|
|
margin-right: 0;
|
|
}
|
|
|
|
/* Docs sidebar navigation */
|
|
.docs-sidebar-nav {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.docs-sidebar-title {
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin: 0 0 16px;
|
|
padding: 0 8px 12px;
|
|
border-bottom: 1px solid var(--border-sidebar);
|
|
}
|
|
|
|
/* Docs sidebar groups */
|
|
.docs-sidebar-group {
|
|
margin-bottom: 16px;
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid var(--border-sidebar);
|
|
}
|
|
|
|
.docs-sidebar-group:last-child {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.docs-sidebar-group-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: var(--font-size-sm);
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
margin: 0 0 4px;
|
|
padding: 6px 8px;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
border: none;
|
|
transition:
|
|
color 0.15s ease,
|
|
background-color 0.15s ease;
|
|
}
|
|
|
|
.docs-sidebar-group-title:hover {
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
.docs-sidebar-group-title.expanded {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.docs-sidebar-group-title svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
transition: transform 0.15s ease;
|
|
flex-shrink: 0;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Phosphor icon for group - no rotation */
|
|
.docs-sidebar-group-title .docs-sidebar-group-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
transform: none !important;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.docs-sidebar-group-title.expanded .docs-sidebar-group-icon {
|
|
transform: none !important;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Only rotate the chevron, not the group icon */
|
|
.docs-sidebar-group-title.expanded svg:not(.docs-sidebar-group-icon) {
|
|
transform: rotate(90deg);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.docs-sidebar-group-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 0 0 8px;
|
|
}
|
|
|
|
.docs-sidebar-item {
|
|
margin: 0;
|
|
}
|
|
|
|
.docs-sidebar-link {
|
|
display: block;
|
|
padding: 8px 12px 8px 20px;
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
font-size: var(--font-size-sm);
|
|
border-radius: 6px;
|
|
border-left: 2px solid transparent;
|
|
margin-left: 4px;
|
|
transition:
|
|
color 0.15s ease,
|
|
background-color 0.15s ease,
|
|
border-color 0.15s ease;
|
|
}
|
|
|
|
.docs-sidebar-link:hover {
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
.docs-sidebar-link.active {
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-hover);
|
|
border-left-color: var(--accent-color, var(--text-primary));
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Docs TOC (right sidebar) */
|
|
.docs-toc {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.docs-toc-title {
|
|
font-size: var(--font-size-xs);
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin: 0 0 16px;
|
|
padding: 0 0 12px;
|
|
border-bottom: 1px solid var(--border-sidebar);
|
|
}
|
|
|
|
.docs-toc-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.docs-toc-item {
|
|
margin: 0;
|
|
}
|
|
|
|
.docs-toc-link {
|
|
display: block;
|
|
padding: 6px 8px;
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
font-size: var(--font-size-sm);
|
|
border-radius: 4px;
|
|
border-left: 2px solid transparent;
|
|
transition:
|
|
color 0.15s ease,
|
|
background-color 0.15s ease,
|
|
border-color 0.15s ease;
|
|
}
|
|
|
|
.docs-toc-link:hover {
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
.docs-toc-link.active {
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-hover);
|
|
border-left-color: var(--accent-color, var(--text-primary));
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* TOC indentation levels */
|
|
.docs-toc-link.level-2 {
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.docs-toc-link.level-3 {
|
|
padding-left: 20px;
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.docs-toc-link.level-4 {
|
|
padding-left: 32px;
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.docs-toc-link.level-5,
|
|
.docs-toc-link.level-6 {
|
|
padding-left: 44px;
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
/* Docs page header */
|
|
.docs-page-header {
|
|
margin-bottom: 32px;
|
|
padding-bottom: 24px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.docs-page-title {
|
|
margin: 0 0 8px;
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.docs-page-description {
|
|
margin: 0;
|
|
font-size: var(--font-size-lg);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* Docs article styling */
|
|
.docs-article {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
animation: docs-content-fade-in 150ms ease-out;
|
|
}
|
|
|
|
@keyframes docs-content-fade-in {
|
|
from {
|
|
opacity: 0.7;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Docs loading skeleton - prevents flash when navigating between docs pages */
|
|
.docs-article-loading {
|
|
padding: 32px 0;
|
|
}
|
|
|
|
.docs-loading-skeleton {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--bg-secondary) 25%,
|
|
var(--bg-hover) 50%,
|
|
var(--bg-secondary) 75%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: docs-skeleton-pulse 1.5s ease-in-out infinite;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.docs-loading-title {
|
|
height: 40px;
|
|
width: 60%;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.docs-loading-text {
|
|
height: 16px;
|
|
width: 100%;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.docs-loading-text-short {
|
|
height: 16px;
|
|
width: 40%;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
@keyframes docs-skeleton-pulse {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
/* Docs article actions (CopyPageDropdown) */
|
|
.docs-article-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.docs-article-header {
|
|
margin-bottom: 32px;
|
|
padding-bottom: 24px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.docs-article-title {
|
|
margin: 0 0 12px;
|
|
font-size: var(--font-size-post-title);
|
|
font-weight: 300;
|
|
letter-spacing: -0.02em;
|
|
color: var(--text-primary);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.docs-article-description {
|
|
margin: 0;
|
|
font-size: var(--font-size-lg);
|
|
color: var(--text-secondary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Docs landing page content */
|
|
.docs-landing-content {
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.docs-landing-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 24px 0;
|
|
}
|
|
|
|
.docs-landing-item {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.docs-landing-link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
background-color: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
transition:
|
|
background-color 0.15s ease,
|
|
border-color 0.15s ease;
|
|
}
|
|
|
|
.docs-landing-link:hover {
|
|
background-color: var(--bg-hover);
|
|
border-color: var(--text-muted);
|
|
}
|
|
|
|
.docs-landing-link svg {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.docs-landing-more {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.docs-landing-empty {
|
|
padding: 32px;
|
|
background-color: var(--bg-secondary);
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.docs-landing-empty code {
|
|
background-color: var(--bg-tertiary);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
/* Docs responsive - tablet (hide right TOC) */
|
|
@media (max-width: 1200px) {
|
|
.docs-sidebar-right {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Docs responsive - small tablet */
|
|
@media (max-width: 900px) {
|
|
.docs-sidebar-left {
|
|
width: 240px;
|
|
}
|
|
|
|
.docs-content {
|
|
padding: 24px 32px;
|
|
}
|
|
}
|
|
|
|
/* Docs responsive - mobile */
|
|
@media (max-width: 768px) {
|
|
.docs-layout,
|
|
.docs-layout.no-toc {
|
|
display: block;
|
|
padding: 0;
|
|
}
|
|
|
|
.docs-sidebar-left,
|
|
.docs-sidebar-right {
|
|
display: none;
|
|
}
|
|
|
|
.docs-content {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
padding: 20px 16px;
|
|
min-height: auto;
|
|
}
|
|
|
|
.docs-article {
|
|
padding: 0;
|
|
}
|
|
|
|
.docs-article-title {
|
|
font-size: var(--font-size-2xl);
|
|
}
|
|
|
|
.docs-article-description {
|
|
font-size: var(--font-size-md);
|
|
}
|
|
}
|
|
|
|
/* Docs mobile sidebar (in hamburger menu) */
|
|
.docs-mobile-sidebar {
|
|
padding: 16px 0;
|
|
border-top: 1px solid var(--border-color);
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.docs-mobile-sidebar .docs-sidebar-title {
|
|
padding: 0 0 12px;
|
|
}
|
|
|
|
.docs-mobile-sidebar .docs-sidebar-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.docs-mobile-sidebar .docs-sidebar-link {
|
|
padding: 8px 16px;
|
|
}
|
|
|
|
/* ===========================================
|
|
Ask AI Modal Styles
|
|
Kapa-style header chat for RAG-based Q&A
|
|
=========================================== */
|
|
|
|
/* Ask AI Button in header */
|
|
.ask-ai-button {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: color 0.2s ease, background-color 0.2s ease;
|
|
}
|
|
|
|
.ask-ai-button:hover {
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
/* Modal Backdrop */
|
|
.ask-ai-modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding-top: 10vh;
|
|
animation: backdropFadeIn 0.15s ease;
|
|
}
|
|
|
|
/* Modal Container */
|
|
.ask-ai-modal {
|
|
background-color: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
width: 100%;
|
|
max-width: 640px;
|
|
max-height: 80vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
|
|
animation: modalSlideIn 0.2s ease;
|
|
}
|
|
|
|
/* Modal Header */
|
|
.ask-ai-modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ask-ai-modal-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-weight: 600;
|
|
font-size: var(--font-size-base);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.ask-ai-modal-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Model Selector */
|
|
.ask-ai-model-select {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 4px 8px;
|
|
font-size: var(--font-size-sm);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.ask-ai-model-select:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
/* Action Buttons */
|
|
.ask-ai-action-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
padding: 6px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: color 0.2s ease, background-color 0.2s ease;
|
|
}
|
|
|
|
.ask-ai-action-btn:hover:not(:disabled) {
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-hover);
|
|
}
|
|
|
|
.ask-ai-action-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Messages Container */
|
|
.ask-ai-messages {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
/* Empty State */
|
|
.ask-ai-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 48px 16px;
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.ask-ai-empty p {
|
|
margin-top: 12px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.ask-ai-hint {
|
|
font-size: var(--font-size-sm);
|
|
margin-top: 4px !important;
|
|
}
|
|
|
|
/* Message Styles */
|
|
.ask-ai-message {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ask-ai-message-user {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.ask-ai-message-user .ask-ai-message-content {
|
|
background: var(--bg-secondary);
|
|
border-radius: 12px 12px 4px 12px;
|
|
padding: 10px 14px;
|
|
max-width: 85%;
|
|
}
|
|
|
|
.ask-ai-message-user .ask-ai-message-content p {
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.ask-ai-message-assistant {
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ask-ai-message-assistant .ask-ai-message-content {
|
|
background: transparent;
|
|
max-width: 100%;
|
|
line-height: 1.6;
|
|
flex: 1;
|
|
}
|
|
|
|
.ask-ai-message-assistant .ask-ai-message-content p {
|
|
margin: 0 0 12px;
|
|
}
|
|
|
|
.ask-ai-message-assistant .ask-ai-message-content p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.ask-ai-message-assistant .ask-ai-message-content ul,
|
|
.ask-ai-message-assistant .ask-ai-message-content ol {
|
|
margin: 8px 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.ask-ai-message-assistant .ask-ai-message-content li {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.ask-ai-message-assistant .ask-ai-message-content code {
|
|
background: var(--bg-secondary);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.ask-ai-message-assistant .ask-ai-message-content pre {
|
|
background: var(--bg-secondary);
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
overflow-x: auto;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.ask-ai-message-assistant .ask-ai-message-content pre code {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.ask-ai-message-assistant .ask-ai-message-content hr {
|
|
border: none;
|
|
border-top: 1px solid var(--border-color);
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.ask-ai-message-assistant .ask-ai-message-content strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Links in messages */
|
|
.ask-ai-link {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.ask-ai-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Thinking/Loading state */
|
|
.ask-ai-thinking {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--text-muted);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
/* Spinning animation */
|
|
.ask-ai-spinner {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Streaming cursor */
|
|
.ask-ai-cursor {
|
|
animation: blink 1s steps(1) infinite;
|
|
color: var(--accent);
|
|
font-weight: bold;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%,
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
51%,
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Error state */
|
|
.ask-ai-error {
|
|
color: #ef4444;
|
|
font-size: var(--font-size-sm);
|
|
padding: 8px 12px;
|
|
background: rgba(239, 68, 68, 0.1);
|
|
border-radius: 6px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Copy button for responses */
|
|
.ask-ai-copy-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
color: var(--text-muted);
|
|
background: none;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
opacity: 0.5;
|
|
transition: all 0.15s ease;
|
|
flex-shrink: 0;
|
|
align-self: flex-start;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.ask-ai-message:hover .ask-ai-copy-button {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ask-ai-copy-button:hover {
|
|
background-color: var(--bg-hover);
|
|
color: var(--text-primary);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Configuration warning banner */
|
|
.ask-ai-config-warning {
|
|
display: flex;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
background: rgba(234, 179, 8, 0.1);
|
|
border-bottom: 1px solid rgba(234, 179, 8, 0.3);
|
|
color: #ca8a04;
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.ask-ai-config-warning svg {
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.ask-ai-config-warning-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.ask-ai-config-warning-content strong {
|
|
display: block;
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.ask-ai-config-warning-content p {
|
|
margin: 0 0 4px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.ask-ai-config-warning-hint {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.ask-ai-config-warning-content code {
|
|
background: rgba(234, 179, 8, 0.15);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* Input Container */
|
|
.ask-ai-input-container {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 8px;
|
|
padding: 12px 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ask-ai-input {
|
|
flex: 1;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 10px 14px;
|
|
font-size: var(--font-size-base);
|
|
color: var(--text-primary);
|
|
resize: none;
|
|
font-family: inherit;
|
|
min-height: 44px;
|
|
max-height: 120px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.ask-ai-input:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.ask-ai-input::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.ask-ai-input:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Send Button */
|
|
.ask-ai-send-btn {
|
|
background: var(--accent);
|
|
border: none;
|
|
color: var(--bg-primary);
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.ask-ai-send-btn:hover:not(:disabled) {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.ask-ai-send-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Footer Hints */
|
|
.ask-ai-footer {
|
|
display: flex;
|
|
gap: 16px;
|
|
padding: 8px 16px;
|
|
border-top: 1px solid var(--border-color);
|
|
background: var(--bg-secondary);
|
|
border-radius: 0 0 12px 12px;
|
|
font-size: var(--font-size-xs);
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ask-ai-footer kbd {
|
|
background: var(--bg-hover);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-family: inherit;
|
|
font-size: 10px;
|
|
}
|
|
|
|
/* Mobile Responsive */
|
|
@media (max-width: 768px) {
|
|
.ask-ai-modal-backdrop {
|
|
padding-top: 5vh;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
.ask-ai-modal {
|
|
max-height: 90vh;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.ask-ai-messages {
|
|
padding: 12px;
|
|
}
|
|
|
|
.ask-ai-footer {
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
|
|
.ask-ai-message-user .ask-ai-message-content {
|
|
max-width: 90%;
|
|
}
|
|
|
|
.ask-ai-copy-button {
|
|
opacity: 1;
|
|
}
|
|
}
|