1740 lines
44 KiB
CSS
1740 lines
44 KiB
CSS
/* Enhanced lists with Plus Jakarta Sans */
|
|
ul, ol {
|
|
margin: var(--apex-space-4) 0;
|
|
padding-left: var(--apex-space-6);
|
|
}
|
|
|
|
li {
|
|
margin-bottom: var(--apex-space-2);
|
|
line-height: var(--apex-leading-relaxed);
|
|
font-feature-settings: var(--apex-font-features);
|
|
}
|
|
|
|
/* Small text and captions */
|
|
small, .text-sm {
|
|
font-size: var(--apex-text-sm);
|
|
color: var(--apex-text-tertiary);
|
|
line-height: var(--apex-leading-normal);
|
|
}
|
|
|
|
.caption {
|
|
font-size: var(--apex-text-sm);
|
|
color: var(--apex-text-tertiary);
|
|
font-style: italic;
|
|
text-align: center;
|
|
margin-top: var(--apex-space-2);
|
|
}/*
|
|
* Apex Theme for Logseq - Refined Edition
|
|
* An elegant, minimalistic dark theme inspired by Apple's design philosophy
|
|
* with sophisticated typography using Azeret Mono and harmonious color theory
|
|
*/
|
|
|
|
/* Import Plus Jakarta Sans - Perfect for knowledge management */
|
|
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
|
|
|
|
:root {
|
|
/* === APEX CORE COLOR SYSTEM === */
|
|
|
|
/* Background Hierarchy - Professional developer palette */
|
|
--apex-bg-primary: #0D0D0D; /* Deepest black */
|
|
--apex-bg-secondary: #101726; /* Dark blue-gray */
|
|
--apex-bg-tertiary: #1E2940; /* Medium blue-gray */
|
|
--apex-bg-quaternary: #2a3247; /* Slightly lighter variation */
|
|
--apex-bg-surface: #161b2e; /* For inputs and overlays */
|
|
--apex-bg-hover: #252d42; /* Hover states */
|
|
|
|
/* Text Hierarchy - Sophisticated contrast system */
|
|
--apex-text-primary: #F2F2F2; /* Almost white */
|
|
--apex-text-secondary: #e8e8e8; /* Slightly dimmed */
|
|
--apex-text-tertiary: #737373; /* Medium gray */
|
|
--apex-text-quaternary: #5a5a5a; /* Darker gray */
|
|
--apex-text-accent: #ffffff; /* Pure white for highlights */
|
|
--apex-text-muted: #9CA3AF; /* For subtle text */
|
|
|
|
/* Apple-inspired Accent Colors */
|
|
--apex-blue: #4A9EFF; /* Primary blue */
|
|
--apex-blue-hover: #357ABD; /* Darker blue hover */
|
|
--apex-blue-light: rgba(74, 158, 255, 0.15);
|
|
--apex-blue-subtle: rgba(74, 158, 255, 0.08);
|
|
--apex-green: #4ADE80; /* Success green */
|
|
--apex-orange: #FB923C; /* Warning orange */
|
|
--apex-red: #F87171; /* Error red */
|
|
--apex-purple: #A78BFA; /* Accent purple */
|
|
--apex-yellow: #FDE047; /* Highlight yellow */
|
|
--apex-cyan: #67E8F9; /* Reference cyan */
|
|
--apex-pink: #F472B6; /* Tag pink */
|
|
|
|
/* Border System */
|
|
--apex-border-primary: #2D3748; /* Main borders */
|
|
--apex-border-secondary: #4A5568; /* Emphasis borders */
|
|
--apex-border-subtle: #1A202C; /* Subtle dividers */
|
|
--apex-border-focus: var(--apex-blue);
|
|
|
|
/* Shadow System with blue-gray tints */
|
|
--apex-shadow-sm: 0 1px 3px rgba(16, 23, 38, 0.4);
|
|
--apex-shadow-md: 0 4px 12px rgba(16, 23, 38, 0.5);
|
|
--apex-shadow-lg: 0 12px 32px rgba(16, 23, 38, 0.6);
|
|
--apex-shadow-focus: 0 0 0 3px rgba(74, 158, 255, 0.3);
|
|
--apex-shadow-glow: 0 0 20px rgba(74, 158, 255, 0.15);
|
|
|
|
/* Typography */
|
|
--apex-font-family: 'Azeret Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
--apex-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
|
|
/* Font weights */
|
|
--apex-font-light: 300;
|
|
--apex-font-normal: 400;
|
|
--apex-font-medium: 500;
|
|
--apex-font-semibold: 600;
|
|
--apex-font-bold: 700;
|
|
|
|
/* Spacing scale */
|
|
--apex-space-1: 0.25rem;
|
|
--apex-space-2: 0.5rem;
|
|
--apex-space-3: 0.75rem;
|
|
--apex-space-4: 1rem;
|
|
--apex-space-5: 1.25rem;
|
|
--apex-space-6: 1.5rem;
|
|
--apex-space-8: 2rem;
|
|
--apex-space-10: 2.5rem;
|
|
--apex-space-12: 3rem;
|
|
|
|
/* Border radius */
|
|
--apex-radius-sm: 0.25rem;
|
|
--apex-radius-md: 0.5rem;
|
|
--apex-radius-lg: 0.75rem;
|
|
--apex-radius-xl: 1rem;
|
|
--apex-radius-2xl: 1.5rem;
|
|
|
|
/* Transitions */
|
|
--apex-transition-fast: 0.125s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--apex-transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--apex-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
/* Font feature settings for optimal rendering */
|
|
--apex-font-features: "liga" 1, "calt" 1, "kern" 1;
|
|
|
|
/* Enhanced font weights for better hierarchy */
|
|
--apex-font-thin: 200;
|
|
--apex-font-light: 300;
|
|
--apex-font-normal: 400;
|
|
--apex-font-medium: 500;
|
|
--apex-font-semibold: 600;
|
|
--apex-font-bold: 700;
|
|
--apex-font-extrabold: 800;
|
|
|
|
/* Optimized line heights for reading */
|
|
--apex-leading-tight: 1.25;
|
|
--apex-leading-snug: 1.375;
|
|
--apex-leading-normal: 1.5;
|
|
--apex-leading-relaxed: 1.625;
|
|
--apex-leading-loose: 2;
|
|
|
|
/* Letter spacing for better readability */
|
|
--apex-tracking-tighter: -0.05em;
|
|
--apex-tracking-tight: -0.025em;
|
|
--apex-tracking-normal: 0em;
|
|
--apex-tracking-wide: 0.025em;
|
|
--apex-tracking-wider: 0.05em;
|
|
--apex-tracking-widest: 0.1em;
|
|
}
|
|
|
|
/* === LOGSEQ VARIABLES MAPPING === */
|
|
.white-theme,
|
|
.light-theme,
|
|
.dark-theme,
|
|
html[data-theme="light"],
|
|
html[data-theme="dark"] {
|
|
/* Core backgrounds */
|
|
--ls-primary-background-color: var(--apex-bg-primary);
|
|
--ls-secondary-background-color: var(--apex-bg-secondary);
|
|
--ls-tertiary-background-color: var(--apex-bg-tertiary);
|
|
--ls-quaternary-background-color: var(--apex-bg-quaternary);
|
|
|
|
/* Text colors */
|
|
--ls-primary-text-color: var(--apex-text-primary);
|
|
--ls-secondary-text-color: var(--apex-text-secondary);
|
|
--ls-title-text-color: var(--apex-text-accent);
|
|
|
|
/* Link colors */
|
|
--ls-link-text-color: var(--apex-blue);
|
|
--ls-link-text-hover-color: var(--apex-blue-hover);
|
|
--ls-link-ref-text-color: var(--apex-cyan);
|
|
--ls-link-ref-text-hover-color: var(--apex-blue);
|
|
--ls-external-link-color: var(--apex-purple);
|
|
|
|
/* Active states */
|
|
--ls-active-primary-color: var(--apex-blue);
|
|
--ls-active-secondary-color: var(--apex-blue-hover);
|
|
|
|
/* Borders */
|
|
--ls-border-color: var(--apex-border-primary);
|
|
--ls-secondary-border-color: var(--apex-border-secondary);
|
|
--ls-tertiary-border-color: var(--apex-border-subtle);
|
|
|
|
/* Status colors */
|
|
--ls-error-color: var(--apex-red);
|
|
--ls-warning-color: var(--apex-orange);
|
|
--ls-success-color: var(--apex-green);
|
|
|
|
/* Highlights with refined opacity */
|
|
--ls-highlight-color-gray: rgba(115, 115, 115, 0.2);
|
|
--ls-highlight-color-red: rgba(248, 113, 113, 0.2);
|
|
--ls-highlight-color-orange: rgba(251, 146, 60, 0.2);
|
|
--ls-highlight-color-yellow: rgba(253, 224, 71, 0.2);
|
|
--ls-highlight-color-green: rgba(74, 222, 128, 0.2);
|
|
--ls-highlight-color-blue: rgba(74, 158, 255, 0.2);
|
|
--ls-highlight-color-purple: rgba(167, 139, 250, 0.2);
|
|
--ls-highlight-color-pink: rgba(244, 114, 182, 0.2);
|
|
|
|
/* Typography */
|
|
--ls-font-family: var(--apex-font-family);
|
|
--ls-page-text-size: 1.02rem;
|
|
--ls-page-title-size: 2.2rem;
|
|
--ls-font-weight: var(--apex-font-normal);
|
|
--ls-font-feature-settings: var(--apex-font-features);
|
|
|
|
/* Layout */
|
|
--ls-main-content-max-width: 900px;
|
|
--ls-main-content-max-width-wide: 1400px;
|
|
--ls-left-sidebar-width: 280px;
|
|
--ls-headbar-height: 3.5rem;
|
|
|
|
/* UI Elements */
|
|
--ls-scrollbar-width: 6px;
|
|
--ls-border-radius-low: var(--apex-radius-sm);
|
|
--ls-border-radius-medium: var(--apex-radius-md);
|
|
|
|
/* Blocks */
|
|
--ls-block-bullet-color: var(--apex-border-primary);
|
|
--ls-block-bullet-border-color: var(--apex-border-secondary);
|
|
--ls-bullet-closed-color: var(--apex-text-tertiary);
|
|
--ls-guideline-color: var(--apex-border-subtle);
|
|
|
|
/* Selection */
|
|
--ls-selection-background-color: var(--apex-blue-light);
|
|
--ls-selection-color: var(--apex-text-primary);
|
|
|
|
/* Focus */
|
|
--ls-focus-ring-color: var(--apex-blue-light);
|
|
|
|
/* Scrollbar */
|
|
--ls-scrollbar-foreground-color: var(--apex-border-primary);
|
|
--ls-scrollbar-background-color: var(--apex-bg-primary);
|
|
--ls-scrollbar-thumb-hover-color: var(--apex-border-secondary);
|
|
|
|
/* Page elements */
|
|
--ls-page-checkbox-color: var(--apex-blue);
|
|
--ls-page-checkbox-border-color: var(--apex-border-primary);
|
|
--ls-page-blockquote-color: var(--apex-text-secondary);
|
|
--ls-page-blockquote-bg-color: var(--apex-bg-tertiary);
|
|
--ls-page-blockquote-border-color: var(--apex-blue);
|
|
--ls-page-mark-color: var(--apex-bg-primary);
|
|
--ls-page-mark-bg-color: var(--apex-yellow);
|
|
--ls-page-inline-code-color: var(--apex-green);
|
|
--ls-page-inline-code-bg-color: var(--apex-bg-surface);
|
|
|
|
/* Tags */
|
|
--ls-tag-text-color: var(--apex-purple);
|
|
--ls-tag-text-hover-color: var(--apex-text-primary);
|
|
--ls-tag-text-opacity: 0.85;
|
|
--ls-tag-text-hover-opacity: 1;
|
|
|
|
/* Table */
|
|
--ls-table-tr-even-background-color: var(--apex-bg-secondary);
|
|
|
|
/* Header */
|
|
--ls-header-bg-color: var(--apex-bg-secondary);
|
|
--ls-header-button-background: var(--apex-text-secondary);
|
|
|
|
/* Menu */
|
|
--ls-menu-hover-color: var(--apex-bg-tertiary);
|
|
|
|
/* Block highlight */
|
|
--ls-block-highlight-color: var(--apex-blue-subtle);
|
|
|
|
/* Properties */
|
|
--ls-page-properties-background-color: var(--apex-bg-secondary);
|
|
--ls-block-properties-background-color: var(--apex-bg-secondary);
|
|
}
|
|
|
|
/* === GLOBAL STYLES === */
|
|
|
|
html {
|
|
font-size: 16px;
|
|
line-height: var(--apex-leading-normal);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
font-feature-settings: var(--apex-font-features);
|
|
font-variant-ligatures: common-ligatures;
|
|
font-variant-numeric: oldstyle-nums proportional-nums;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--apex-font-family);
|
|
font-weight: var(--apex-font-normal);
|
|
font-size: var(--apex-text-base);
|
|
line-height: var(--apex-leading-relaxed);
|
|
background-color: var(--apex-bg-primary);
|
|
color: var(--apex-text-primary);
|
|
transition: background-color var(--apex-transition-base);
|
|
font-feature-settings: var(--apex-font-features);
|
|
letter-spacing: var(--apex-tracking-normal);
|
|
}
|
|
|
|
#app-container {
|
|
background-color: var(--apex-bg-primary);
|
|
}
|
|
|
|
/* === ENHANCED TYPOGRAPHY === */
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--apex-font-family);
|
|
color: var(--apex-text-primary);
|
|
font-feature-settings: var(--apex-font-features);
|
|
font-variant-numeric: lining-nums;
|
|
margin: 0;
|
|
line-height: var(--apex-leading-tight);
|
|
letter-spacing: var(--apex-tracking-tight);
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--apex-text-4xl);
|
|
font-weight: var(--apex-font-bold);
|
|
line-height: var(--apex-leading-tight);
|
|
margin-bottom: var(--apex-space-6);
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--apex-text-3xl);
|
|
font-weight: var(--apex-font-semibold);
|
|
line-height: var(--apex-leading-tight);
|
|
margin-bottom: var(--apex-space-5);
|
|
}
|
|
|
|
h3 {
|
|
font-size: var(--apex-text-2xl);
|
|
font-weight: var(--apex-font-semibold);
|
|
line-height: var(--apex-leading-snug);
|
|
margin-bottom: var(--apex-space-4);
|
|
}
|
|
|
|
h4 {
|
|
font-size: var(--apex-text-xl);
|
|
font-weight: var(--apex-font-medium);
|
|
line-height: var(--apex-leading-snug);
|
|
margin-bottom: var(--apex-space-3);
|
|
}
|
|
|
|
h5 {
|
|
font-size: var(--apex-text-lg);
|
|
font-weight: var(--apex-font-medium);
|
|
line-height: var(--apex-leading-normal);
|
|
margin-bottom: var(--apex-space-3);
|
|
}
|
|
|
|
h6 {
|
|
font-size: var(--apex-text-sm);
|
|
font-weight: var(--apex-font-semibold);
|
|
line-height: var(--apex-leading-normal);
|
|
margin-bottom: var(--apex-space-2);
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--apex-tracking-wide);
|
|
}
|
|
|
|
/* Enhanced page title with optimized Plus Jakarta Sans */
|
|
h1.title {
|
|
font-size: clamp(2rem, 4vw, 3rem);
|
|
font-weight: var(--apex-font-extrabold);
|
|
color: var(--apex-text-accent);
|
|
margin: var(--apex-space-8) 0 var(--apex-space-6) 0;
|
|
letter-spacing: var(--apex-tracking-tighter);
|
|
line-height: var(--apex-leading-tight);
|
|
|
|
/* Subtle gradient text effect optimized for Plus Jakarta Sans */
|
|
background: linear-gradient(135deg,
|
|
var(--apex-text-accent) 0%,
|
|
var(--apex-blue) 70%,
|
|
var(--apex-cyan) 100%
|
|
);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
|
|
/* Enhanced text shadow */
|
|
filter: drop-shadow(0 2px 8px rgba(74, 158, 255, 0.3));
|
|
}
|
|
|
|
/* === LAYOUT COMPONENTS === */
|
|
|
|
/* Enhanced header with backdrop blur */
|
|
.cp__header {
|
|
background: rgba(16, 23, 38, 0.8);
|
|
border-bottom: 1px solid var(--apex-border-primary);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
height: var(--ls-headbar-height);
|
|
position: relative;
|
|
}
|
|
|
|
.cp__header::after {
|
|
display: none;
|
|
}
|
|
|
|
.cp__header a,
|
|
.cp__header button {
|
|
color: var(--apex-text-secondary);
|
|
transition: color var(--apex-transition-fast);
|
|
}
|
|
|
|
.cp__header a:hover,
|
|
.cp__header button:hover {
|
|
color: var(--apex-text-primary);
|
|
}
|
|
|
|
/* Enhanced left sidebar */
|
|
#left-sidebar {
|
|
background: linear-gradient(180deg, var(--apex-bg-secondary) 0%, rgba(16, 23, 38, 0.95) 100%);
|
|
border-right: 1px solid var(--apex-border-primary);
|
|
width: var(--ls-left-sidebar-width);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.left-sidebar-inner {
|
|
background: transparent;
|
|
padding: var(--apex-space-6);
|
|
}
|
|
|
|
.left-sidebar-inner .nav-header {
|
|
font-weight: var(--apex-font-semibold);
|
|
font-size: 0.75rem;
|
|
color: var(--apex-text-tertiary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
margin-bottom: var(--apex-space-4);
|
|
}
|
|
|
|
.left-sidebar-inner a,
|
|
.nav-content-item {
|
|
color: var(--apex-text-secondary);
|
|
text-decoration: none;
|
|
padding: var(--apex-space-2) var(--apex-space-3);
|
|
border-radius: var(--apex-radius-md);
|
|
transition: all var(--apex-transition-fast);
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: var(--apex-space-1);
|
|
font-weight: var(--apex-font-normal);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.left-sidebar-inner a::before,
|
|
.nav-content-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 2px;
|
|
background: var(--apex-blue);
|
|
transform: scaleY(0);
|
|
transition: transform var(--apex-transition-fast);
|
|
}
|
|
|
|
.left-sidebar-inner a:hover,
|
|
.nav-content-item:hover {
|
|
background: linear-gradient(135deg, var(--apex-bg-tertiary) 0%, rgba(74, 158, 255, 0.05) 100%);
|
|
color: var(--apex-text-primary);
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
.left-sidebar-inner a:hover::before,
|
|
.nav-content-item:hover::before {
|
|
transform: scaleY(1);
|
|
}
|
|
|
|
/* Enhanced main content */
|
|
.cp__sidebar-main-content {
|
|
padding: var(--apex-space-10);
|
|
max-width: var(--ls-main-content-max-width);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* === ENHANCED BLOCK SYSTEM === */
|
|
|
|
.ls-block {
|
|
margin-bottom: var(--apex-space-3);
|
|
}
|
|
|
|
.block-content {
|
|
font-size: var(--apex-text-base);
|
|
line-height: var(--apex-leading-relaxed);
|
|
color: var(--apex-text-primary);
|
|
font-family: var(--apex-font-family);
|
|
font-feature-settings: var(--apex-font-features);
|
|
font-variant-numeric: oldstyle-nums;
|
|
max-width: 65ch; /* Optimal reading width */
|
|
hyphens: auto;
|
|
hyphenate-limit-chars: 6 3 3;
|
|
}
|
|
|
|
/* Enhanced paragraph spacing */
|
|
p, .block-content p {
|
|
margin-bottom: var(--apex-space-4);
|
|
font-feature-settings: var(--apex-font-features);
|
|
font-variant-numeric: oldstyle-nums;
|
|
}
|
|
|
|
.block-content-wrapper {
|
|
background-color: transparent;
|
|
transition: all var(--apex-transition-fast);
|
|
border-radius: var(--apex-radius-md);
|
|
padding: var(--apex-space-1);
|
|
position: relative;
|
|
}
|
|
|
|
.block-content-wrapper:hover {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(74, 158, 255, 0.02) 100%);
|
|
box-shadow: var(--apex-shadow-sm);
|
|
}
|
|
|
|
/* Enhanced bullets with micro-interactions */
|
|
.bullet-container {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.bullet {
|
|
width: 6px;
|
|
height: 6px;
|
|
background-color: var(--apex-border-primary);
|
|
border-radius: 50%;
|
|
transition: all var(--apex-transition-fast);
|
|
position: relative;
|
|
}
|
|
|
|
.bullet::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, var(--apex-blue) 0%, transparent 70%);
|
|
opacity: 0;
|
|
transition: opacity var(--apex-transition-fast);
|
|
}
|
|
|
|
.bullet:hover {
|
|
background-color: var(--apex-blue);
|
|
transform: scale(1.3);
|
|
box-shadow: 0 0 0 3px var(--apex-blue-light);
|
|
}
|
|
|
|
.bullet:hover::before {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.bullet-container.bullet-closed .bullet {
|
|
background-color: var(--apex-border-secondary);
|
|
border: 1px solid var(--apex-text-tertiary);
|
|
}
|
|
|
|
/* === ENHANCED LINKS AND REFERENCES === */
|
|
|
|
/* Enhanced text emphasis */
|
|
strong, b {
|
|
font-weight: var(--apex-font-semibold);
|
|
color: var(--apex-text-accent);
|
|
}
|
|
|
|
em, i {
|
|
font-style: italic;
|
|
color: var(--apex-text-secondary);
|
|
}
|
|
|
|
/* Enhanced links with Plus Jakarta Sans */
|
|
a {
|
|
color: var(--apex-blue);
|
|
text-decoration: none;
|
|
font-weight: var(--apex-font-medium);
|
|
transition: all var(--apex-transition-fast);
|
|
position: relative;
|
|
}
|
|
|
|
a::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
width: 0;
|
|
height: 1px;
|
|
background: var(--apex-blue);
|
|
transition: width var(--apex-transition-fast);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--apex-blue-hover);
|
|
}
|
|
|
|
a:hover::after {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Enhanced page references with gradient backgrounds */
|
|
.page-reference {
|
|
color: var(--apex-cyan);
|
|
background: linear-gradient(135deg, var(--apex-blue-light) 0%, rgba(103, 232, 249, 0.1) 100%);
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: var(--apex-radius-sm);
|
|
text-decoration: none;
|
|
transition: all var(--apex-transition-fast);
|
|
font-weight: var(--apex-font-medium);
|
|
border: 1px solid transparent;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.page-reference::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
|
transition: left var(--apex-transition-base);
|
|
}
|
|
|
|
.page-reference:hover {
|
|
background: linear-gradient(135deg, rgba(103, 232, 249, 0.2) 0%, var(--apex-blue-light) 100%);
|
|
color: var(--apex-text-primary);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--apex-shadow-sm);
|
|
border-color: var(--apex-cyan);
|
|
}
|
|
|
|
.page-reference:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
/* === ENHANCED TAGS === */
|
|
|
|
.tag {
|
|
background: linear-gradient(135deg, var(--apex-bg-tertiary) 0%, rgba(167, 139, 250, 0.1) 100%);
|
|
color: var(--apex-purple);
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: var(--apex-radius-sm);
|
|
font-size: 0.875rem;
|
|
font-weight: var(--apex-font-medium);
|
|
transition: all var(--apex-transition-fast);
|
|
text-decoration: none;
|
|
border: 1px solid transparent;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tag::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg, var(--apex-purple) 0%, var(--apex-pink) 100%);
|
|
opacity: 0;
|
|
transition: opacity var(--apex-transition-fast);
|
|
}
|
|
|
|
.tag::after {
|
|
content: attr(data-ref);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.tag:hover {
|
|
color: var(--apex-text-primary);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--apex-shadow-sm);
|
|
border-color: var(--apex-purple);
|
|
}
|
|
|
|
.tag:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* === ENHANCED CODE BLOCKS === */
|
|
|
|
/* Enhanced code typography with JetBrains Mono */
|
|
code {
|
|
font-family: var(--apex-font-mono);
|
|
font-size: 0.9em;
|
|
font-weight: var(--apex-font-normal);
|
|
background: linear-gradient(135deg, var(--apex-bg-surface) 0%, rgba(74, 222, 128, 0.05) 100%);
|
|
color: var(--apex-green);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: var(--apex-radius-sm);
|
|
border: 1px solid rgba(74, 222, 128, 0.2);
|
|
font-feature-settings: "liga" 1, "calt" 1, "zero" 1, "ss01" 1;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
pre {
|
|
font-family: var(--apex-font-mono);
|
|
font-size: var(--apex-text-sm);
|
|
line-height: var(--apex-leading-relaxed);
|
|
background: linear-gradient(135deg, var(--apex-bg-secondary) 0%, rgba(16, 23, 38, 0.8) 100%);
|
|
border: 1px solid var(--apex-border-primary);
|
|
border-radius: var(--apex-radius-lg);
|
|
padding: var(--apex-space-6);
|
|
overflow-x: auto;
|
|
margin: var(--apex-space-4) 0;
|
|
backdrop-filter: blur(10px);
|
|
font-feature-settings: "liga" 1, "calt" 1, "zero" 1, "ss01" 1;
|
|
position: relative;
|
|
}
|
|
|
|
pre::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--apex-blue), transparent);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
pre code {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
color: var(--apex-text-primary);
|
|
border: none;
|
|
font-size: inherit;
|
|
}
|
|
|
|
/* === ENHANCED BLOCKQUOTES === */
|
|
|
|
/* Enhanced blockquotes with Plus Jakarta Sans */
|
|
blockquote {
|
|
font-size: var(--apex-text-lg);
|
|
line-height: var(--apex-leading-relaxed);
|
|
font-style: italic;
|
|
color: var(--apex-text-secondary);
|
|
border-left: 4px solid var(--apex-blue);
|
|
margin: var(--apex-space-6) 0;
|
|
padding: var(--apex-space-4) var(--apex-space-6);
|
|
background: linear-gradient(135deg,
|
|
rgba(74, 158, 255, 0.08) 0%,
|
|
rgba(16, 23, 38, 0.6) 50%,
|
|
rgba(30, 41, 64, 0.4) 100%
|
|
);
|
|
border-radius: 0 var(--apex-radius-md) var(--apex-radius-md) 0;
|
|
backdrop-filter: blur(10px);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
blockquote::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, var(--apex-blue), transparent);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
blockquote::after {
|
|
content: '"';
|
|
font-size: 4rem;
|
|
color: var(--apex-blue);
|
|
position: absolute;
|
|
right: var(--apex-space-4);
|
|
bottom: -var(--apex-space-2);
|
|
line-height: 1;
|
|
opacity: 0.1;
|
|
font-family: var(--apex-font-family);
|
|
font-weight: var(--apex-font-bold);
|
|
}
|
|
|
|
blockquote p {
|
|
margin-bottom: var(--apex-space-2);
|
|
}
|
|
|
|
blockquote p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* === ENHANCED FORMS === */
|
|
|
|
input[type="text"],
|
|
input[type="search"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
textarea,
|
|
.form-input {
|
|
background: linear-gradient(135deg, var(--apex-bg-surface) 0%, rgba(16, 23, 38, 0.8) 100%);
|
|
border: 1px solid var(--apex-border-primary);
|
|
border-radius: var(--apex-radius-md);
|
|
color: var(--apex-text-primary);
|
|
padding: var(--apex-space-3) var(--apex-space-4);
|
|
font-family: var(--apex-font-family);
|
|
font-size: 1rem;
|
|
transition: all var(--apex-transition-fast);
|
|
position: relative;
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
.form-input:focus {
|
|
outline: none;
|
|
border-color: var(--apex-blue);
|
|
box-shadow: var(--apex-shadow-focus);
|
|
background: linear-gradient(135deg, var(--apex-bg-primary) 0%, rgba(74, 158, 255, 0.05) 100%);
|
|
}
|
|
|
|
/* === ENHANCED BUTTONS === */
|
|
|
|
button,
|
|
.button,
|
|
.ui__button {
|
|
background: linear-gradient(135deg, var(--apex-bg-tertiary) 0%, rgba(42, 50, 71, 0.8) 100%);
|
|
color: var(--apex-text-primary);
|
|
border: 1px solid var(--apex-border-primary);
|
|
border-radius: var(--apex-radius-md);
|
|
padding: var(--apex-space-3) var(--apex-space-5);
|
|
font-family: var(--apex-font-family);
|
|
font-size: 0.875rem;
|
|
font-weight: var(--apex-font-medium);
|
|
cursor: pointer;
|
|
transition: all var(--apex-transition-fast);
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
button::before,
|
|
.button::before,
|
|
.ui__button::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
|
transition: left var(--apex-transition-base);
|
|
}
|
|
|
|
button:hover,
|
|
.button:hover,
|
|
.ui__button:hover {
|
|
background: linear-gradient(135deg, var(--apex-bg-quaternary) 0%, rgba(74, 158, 255, 0.1) 100%);
|
|
border-color: var(--apex-blue);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--apex-shadow-sm);
|
|
}
|
|
|
|
button:hover::before,
|
|
.button:hover::before,
|
|
.ui__button:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
/* === ENHANCED TODO/DONE STATES === */
|
|
|
|
.todo-keyword,
|
|
.done-keyword {
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: var(--apex-radius-sm);
|
|
font-size: 0.75rem;
|
|
font-weight: var(--apex-font-semibold);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.todo-keyword {
|
|
background: linear-gradient(135deg, var(--apex-orange) 0%, #ff8c42 100%);
|
|
color: white;
|
|
box-shadow: 0 2px 4px rgba(251, 146, 60, 0.3);
|
|
}
|
|
|
|
.done-keyword {
|
|
background: linear-gradient(135deg, var(--apex-green) 0%, #22c55e 100%);
|
|
color: white;
|
|
box-shadow: 0 2px 4px rgba(74, 222, 128, 0.3);
|
|
}
|
|
|
|
/* === ENHANCED SCROLLBARS === */
|
|
|
|
::-webkit-scrollbar {
|
|
width: var(--ls-scrollbar-width);
|
|
height: var(--ls-scrollbar-width);
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--apex-bg-primary);
|
|
border-radius: var(--apex-radius-sm);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(180deg, var(--apex-border-primary) 0%, var(--apex-border-secondary) 100%);
|
|
border-radius: var(--apex-radius-sm);
|
|
border: 1px solid var(--apex-border-subtle);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(180deg, var(--apex-border-secondary) 0%, var(--apex-blue) 100%);
|
|
}
|
|
|
|
/* === ENHANCED SELECTION === */
|
|
|
|
::selection {
|
|
background: linear-gradient(135deg, var(--apex-blue-light) 0%, rgba(103, 232, 249, 0.2) 100%);
|
|
color: var(--apex-text-primary);
|
|
}
|
|
|
|
::-moz-selection {
|
|
background: linear-gradient(135deg, var(--apex-blue-light) 0%, rgba(103, 232, 249, 0.2) 100%);
|
|
color: var(--apex-text-primary);
|
|
}
|
|
|
|
/* === ENHANCED PROPERTIES === */
|
|
|
|
.block-properties,
|
|
.page-properties {
|
|
background: linear-gradient(135deg,
|
|
var(--apex-bg-secondary) 0%,
|
|
rgba(30, 41, 64, 0.8) 50%,
|
|
var(--apex-bg-tertiary) 100%
|
|
);
|
|
border: 1px solid var(--apex-border-primary);
|
|
border-radius: var(--apex-radius-lg);
|
|
padding: var(--apex-space-4);
|
|
margin: var(--apex-space-4) 0;
|
|
position: relative;
|
|
backdrop-filter: blur(10px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.block-properties::before,
|
|
.page-properties::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--apex-blue), transparent);
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.page-property-key {
|
|
color: var(--apex-text-secondary);
|
|
font-weight: var(--apex-font-medium);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.page-property-value {
|
|
color: var(--apex-text-primary);
|
|
}
|
|
|
|
.page-property-key:hover,
|
|
.page-property-value:hover {
|
|
color: var(--apex-blue);
|
|
transition: color var(--apex-transition-fast);
|
|
}
|
|
|
|
/* === ENHANCED TABLES === */
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin: var(--apex-space-4) 0;
|
|
border-radius: var(--apex-radius-lg);
|
|
overflow: hidden;
|
|
box-shadow: var(--apex-shadow-sm);
|
|
}
|
|
|
|
th {
|
|
background: linear-gradient(135deg, var(--apex-bg-secondary) 0%, var(--apex-bg-tertiary) 100%);
|
|
color: var(--apex-text-primary);
|
|
font-weight: var(--apex-font-semibold);
|
|
padding: var(--apex-space-3) var(--apex-space-4);
|
|
border: 1px solid var(--apex-border-primary);
|
|
text-align: left;
|
|
font-size: 0.875rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
td {
|
|
padding: var(--apex-space-3) var(--apex-space-4);
|
|
border: 1px solid var(--apex-border-primary);
|
|
color: var(--apex-text-primary);
|
|
background-color: var(--apex-bg-primary);
|
|
}
|
|
|
|
tr:nth-child(even) td {
|
|
background: linear-gradient(135deg, var(--apex-bg-secondary) 0%, rgba(16, 23, 38, 0.5) 100%);
|
|
}
|
|
|
|
tr:hover td {
|
|
background: linear-gradient(135deg, var(--apex-bg-tertiary) 0%, rgba(74, 158, 255, 0.05) 100%);
|
|
color: var(--apex-text-primary);
|
|
}
|
|
|
|
/* === ENHANCED SEARCH === */
|
|
|
|
.cp__header-search-inner {
|
|
background: linear-gradient(135deg, var(--apex-bg-surface) 0%, rgba(22, 27, 46, 0.8) 100%);
|
|
border: 1px solid var(--apex-border-primary);
|
|
border-radius: var(--apex-radius-xl);
|
|
padding: var(--apex-space-2) var(--apex-space-4);
|
|
backdrop-filter: blur(10px);
|
|
position: relative;
|
|
}
|
|
|
|
.cp__header-search-inner::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-radius: var(--apex-radius-xl);
|
|
padding: 1px;
|
|
background: linear-gradient(135deg, var(--apex-blue) 0%, transparent 50%, var(--apex-cyan) 100%);
|
|
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
opacity: 0;
|
|
transition: opacity var(--apex-transition-fast);
|
|
}
|
|
|
|
.cp__header-search-inner:focus-within {
|
|
border-color: var(--apex-blue);
|
|
box-shadow: var(--apex-shadow-focus);
|
|
}
|
|
|
|
.cp__header-search-inner:focus-within::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* === ENHANCED MODALS AND PANELS === */
|
|
|
|
.ui__modal-panel,
|
|
.panel-content {
|
|
background: linear-gradient(135deg,
|
|
var(--apex-bg-secondary) 0%,
|
|
rgba(30, 41, 64, 0.95) 50%,
|
|
var(--apex-bg-tertiary) 100%
|
|
);
|
|
border: 1px solid var(--apex-border-primary);
|
|
border-radius: var(--apex-radius-xl);
|
|
box-shadow: var(--apex-shadow-lg);
|
|
backdrop-filter: blur(20px);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ui__modal-panel::before,
|
|
.panel-content::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--apex-blue), transparent);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* === ENHANCED HIGHLIGHTS === */
|
|
|
|
mark {
|
|
background: linear-gradient(135deg, var(--apex-yellow) 0%, #fbbf24 100%);
|
|
color: var(--apex-bg-primary);
|
|
padding: 0.125rem 0.25rem;
|
|
border-radius: var(--apex-radius-sm);
|
|
font-weight: var(--apex-font-medium);
|
|
box-shadow: 0 1px 3px rgba(253, 224, 71, 0.3);
|
|
}
|
|
|
|
/* Refined highlight colors with gradients */
|
|
.bg-yellow-500 {
|
|
background: linear-gradient(135deg, var(--ls-highlight-color-yellow) 0%, rgba(253, 224, 71, 0.3) 100%);
|
|
}
|
|
|
|
.bg-blue-500 {
|
|
background: linear-gradient(135deg, var(--ls-highlight-color-blue) 0%, rgba(74, 158, 255, 0.3) 100%);
|
|
}
|
|
|
|
.bg-green-500 {
|
|
background: linear-gradient(135deg, var(--ls-highlight-color-green) 0%, rgba(74, 222, 128, 0.3) 100%);
|
|
}
|
|
|
|
.bg-red-500 {
|
|
background: linear-gradient(135deg, var(--ls-highlight-color-red) 0%, rgba(248, 113, 113, 0.3) 100%);
|
|
}
|
|
|
|
.bg-purple-500 {
|
|
background: linear-gradient(135deg, var(--ls-highlight-color-purple) 0%, rgba(167, 139, 250, 0.3) 100%);
|
|
}
|
|
|
|
.bg-pink-500 {
|
|
background: linear-gradient(135deg, var(--ls-highlight-color-pink) 0%, rgba(244, 114, 182, 0.3) 100%);
|
|
}
|
|
|
|
.bg-gray-500 {
|
|
background: linear-gradient(135deg, var(--ls-highlight-color-gray) 0%, rgba(115, 115, 115, 0.3) 100%);
|
|
}
|
|
|
|
/* === ENHANCED CARDS AND CONTAINERS === */
|
|
|
|
.card,
|
|
.dashboard-card {
|
|
background: linear-gradient(135deg,
|
|
var(--apex-bg-secondary) 0%,
|
|
rgba(30, 41, 64, 0.8) 50%,
|
|
rgba(42, 50, 71, 0.6) 100%
|
|
);
|
|
border: 1px solid var(--apex-border-primary);
|
|
border-radius: var(--apex-radius-lg);
|
|
padding: var(--apex-space-6);
|
|
margin: var(--apex-space-4) 0;
|
|
transition: all var(--apex-transition-base);
|
|
backdrop-filter: blur(15px);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card::before,
|
|
.dashboard-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--apex-blue), transparent);
|
|
opacity: 0;
|
|
transition: opacity var(--apex-transition-base);
|
|
}
|
|
|
|
.card::after,
|
|
.dashboard-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: radial-gradient(circle at 50% 0%, rgba(74, 158, 255, 0.1) 0%, transparent 50%);
|
|
opacity: 0;
|
|
transition: opacity var(--apex-transition-base);
|
|
}
|
|
|
|
.card:hover,
|
|
.dashboard-card:hover {
|
|
border-color: var(--apex-blue);
|
|
box-shadow:
|
|
var(--apex-shadow-md),
|
|
var(--apex-shadow-glow);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.card:hover::before,
|
|
.dashboard-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.card:hover::after,
|
|
.dashboard-card:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.dashboard-create-card {
|
|
background: linear-gradient(135deg,
|
|
var(--apex-bg-tertiary) 0%,
|
|
rgba(42, 50, 71, 0.8) 100%
|
|
);
|
|
border: 2px dashed var(--apex-border-primary);
|
|
border-radius: var(--apex-radius-lg);
|
|
transition: all var(--apex-transition-base);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dashboard-create-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(135deg, var(--apex-blue) 0%, var(--apex-cyan) 100%);
|
|
opacity: 0;
|
|
transition: opacity var(--apex-transition-base);
|
|
}
|
|
|
|
.dashboard-create-card:hover {
|
|
background: linear-gradient(135deg,
|
|
var(--apex-bg-quaternary) 0%,
|
|
rgba(74, 158, 255, 0.1) 100%
|
|
);
|
|
border-color: var(--apex-blue);
|
|
border-style: solid;
|
|
}
|
|
|
|
.dashboard-create-card:hover::before {
|
|
opacity: 0.05;
|
|
}
|
|
|
|
/* === ENHANCED REFERENCES === */
|
|
|
|
.references-blocks-item {
|
|
background: linear-gradient(135deg,
|
|
var(--apex-bg-secondary) 0%,
|
|
rgba(30, 41, 64, 0.8) 100%
|
|
);
|
|
border: 1px solid var(--apex-border-primary);
|
|
border-radius: var(--apex-radius-lg);
|
|
margin: var(--apex-space-3) 0;
|
|
padding: var(--apex-space-4);
|
|
transition: all var(--apex-transition-fast);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.references-blocks-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 2px;
|
|
background: linear-gradient(180deg, var(--apex-blue) 0%, var(--apex-cyan) 100%);
|
|
transform: scaleY(0);
|
|
transition: transform var(--apex-transition-fast);
|
|
}
|
|
|
|
.references-blocks-item:hover {
|
|
border-color: var(--apex-blue);
|
|
background: linear-gradient(135deg,
|
|
var(--apex-bg-tertiary) 0%,
|
|
rgba(74, 158, 255, 0.05) 100%
|
|
);
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.references-blocks-item:hover::before {
|
|
transform: scaleY(1);
|
|
}
|
|
|
|
/* === ENHANCED EMBED BLOCKS === */
|
|
|
|
.embed-block,
|
|
.embed-page {
|
|
background: linear-gradient(135deg,
|
|
var(--apex-bg-secondary) 0%,
|
|
rgba(30, 41, 64, 0.6) 100%
|
|
);
|
|
border: 1px solid var(--apex-border-primary);
|
|
border-radius: var(--apex-radius-lg);
|
|
padding: var(--apex-space-4);
|
|
margin: var(--apex-space-4) 0;
|
|
backdrop-filter: blur(10px);
|
|
position: relative;
|
|
}
|
|
|
|
.embed-block::before,
|
|
.embed-page::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--apex-cyan), transparent);
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* === ENHANCED PRIORITY LABELS === */
|
|
|
|
a[priority="A"]::before,
|
|
a.priority[href="#/page/A" i]:before {
|
|
background: linear-gradient(135deg, var(--apex-red) 0%, #dc2626 100%);
|
|
color: white;
|
|
content: "A";
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: var(--apex-radius-sm);
|
|
font-size: 0.75rem;
|
|
font-weight: var(--apex-font-bold);
|
|
margin-right: var(--apex-space-2);
|
|
box-shadow: 0 2px 4px rgba(248, 113, 113, 0.3);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
a[priority="B"]::before,
|
|
a.priority[href="#/page/B" i]:before {
|
|
background: linear-gradient(135deg, var(--apex-orange) 0%, #ea580c 100%);
|
|
color: white;
|
|
content: "B";
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: var(--apex-radius-sm);
|
|
font-size: 0.75rem;
|
|
font-weight: var(--apex-font-bold);
|
|
margin-right: var(--apex-space-2);
|
|
box-shadow: 0 2px 4px rgba(251, 146, 60, 0.3);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
a[priority="C"]::before,
|
|
a.priority[href="#/page/C" i]:before {
|
|
background: linear-gradient(135deg, var(--apex-green) 0%, #16a34a 100%);
|
|
color: white;
|
|
content: "C";
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: var(--apex-radius-sm);
|
|
font-size: 0.75rem;
|
|
font-weight: var(--apex-font-bold);
|
|
margin-right: var(--apex-space-2);
|
|
box-shadow: 0 2px 4px rgba(74, 222, 128, 0.3);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* === ENHANCED CHECKBOXES === */
|
|
|
|
.form-checkbox,
|
|
.form-checkbox:checked {
|
|
background: linear-gradient(135deg, var(--apex-blue) 0%, #1d4ed8 100%);
|
|
border-color: var(--apex-blue);
|
|
color: white;
|
|
border-radius: var(--apex-radius-sm);
|
|
box-shadow: 0 2px 4px rgba(74, 158, 255, 0.3);
|
|
transition: all var(--apex-transition-fast);
|
|
}
|
|
|
|
.form-checkbox:focus {
|
|
box-shadow: var(--apex-shadow-focus);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.form-checkbox:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 4px 8px rgba(74, 158, 255, 0.4);
|
|
}
|
|
|
|
/* === ENHANCED TOOLTIPS === */
|
|
|
|
.tippy-tooltip {
|
|
background: linear-gradient(135deg,
|
|
var(--apex-bg-tertiary) 0%,
|
|
rgba(42, 50, 71, 0.95) 100%
|
|
);
|
|
border: 1px solid var(--apex-border-primary);
|
|
border-radius: var(--apex-radius-md);
|
|
color: var(--apex-text-primary);
|
|
box-shadow: var(--apex-shadow-md);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.tippy-tooltip > .tippy-tooltip-content {
|
|
padding: var(--apex-space-3) var(--apex-space-4);
|
|
}
|
|
|
|
/* === ENHANCED CODE MIRROR THEME === */
|
|
|
|
.cm-s-solarized.CodeMirror,
|
|
.cm-s-solarized.cm-s-dark {
|
|
background: linear-gradient(135deg,
|
|
var(--apex-bg-secondary) 0%,
|
|
rgba(30, 41, 64, 0.8) 100%
|
|
);
|
|
color: var(--apex-text-primary);
|
|
border: 1px solid var(--apex-border-primary);
|
|
border-radius: var(--apex-radius-lg);
|
|
font-family: var(--apex-font-family);
|
|
font-feature-settings: var(--apex-font-features);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.cm-s-solarized .CodeMirror-gutters {
|
|
background: linear-gradient(180deg,
|
|
var(--apex-bg-secondary) 0%,
|
|
rgba(16, 23, 38, 0.8) 100%
|
|
);
|
|
border-right: 1px solid var(--apex-border-primary);
|
|
}
|
|
|
|
.cm-s-solarized .CodeMirror-linenumber {
|
|
color: var(--apex-text-tertiary);
|
|
}
|
|
|
|
.cm-s-solarized .CodeMirror-cursor {
|
|
border-left: 2px solid var(--apex-blue);
|
|
animation: blink 1s infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 50% { opacity: 1; }
|
|
51%, 100% { opacity: 0; }
|
|
}
|
|
|
|
.cm-s-solarized .cm-comment {
|
|
color: var(--apex-text-tertiary);
|
|
font-style: italic;
|
|
}
|
|
|
|
.cm-s-solarized .cm-keyword {
|
|
color: var(--apex-purple);
|
|
font-weight: var(--apex-font-medium);
|
|
}
|
|
|
|
.cm-s-solarized .cm-string {
|
|
color: var(--apex-green);
|
|
}
|
|
|
|
.cm-s-solarized .cm-number {
|
|
color: var(--apex-orange);
|
|
}
|
|
|
|
.cm-s-solarized .cm-variable {
|
|
color: var(--apex-text-primary);
|
|
}
|
|
|
|
.cm-s-solarized .cm-property {
|
|
color: var(--apex-cyan);
|
|
}
|
|
|
|
.cm-s-solarized .cm-operator {
|
|
color: var(--apex-blue);
|
|
}
|
|
|
|
.cm-s-solarized .cm-def {
|
|
color: var(--apex-yellow);
|
|
font-weight: var(--apex-font-medium);
|
|
}
|
|
|
|
.cm-s-solarized .cm-tag {
|
|
color: var(--apex-red);
|
|
}
|
|
|
|
.cm-s-solarized .cm-attribute {
|
|
color: var(--apex-cyan);
|
|
}
|
|
|
|
.cm-s-solarized .cm-meta {
|
|
color: var(--apex-purple);
|
|
}
|
|
|
|
.cm-s-solarized .CodeMirror-activeline-background {
|
|
background: linear-gradient(135deg,
|
|
var(--apex-bg-tertiary) 0%,
|
|
rgba(74, 158, 255, 0.05) 100%
|
|
);
|
|
}
|
|
|
|
.cm-s-solarized .CodeMirror-selected {
|
|
background: var(--apex-blue-light);
|
|
}
|
|
|
|
.cm-s-solarized .CodeMirror-matchingbracket {
|
|
background: var(--apex-blue-light);
|
|
color: var(--apex-text-primary);
|
|
border-radius: var(--apex-radius-sm);
|
|
}
|
|
|
|
/* === ENHANCED JOURNALS === */
|
|
|
|
.journals .journal-item {
|
|
border-top: 1px solid var(--apex-border-subtle);
|
|
padding: var(--apex-space-6) 0;
|
|
position: relative;
|
|
}
|
|
|
|
.journals .journal-item:first-child {
|
|
border-top: none;
|
|
}
|
|
|
|
.journals .journal-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 2px;
|
|
height: 0;
|
|
background: linear-gradient(180deg, var(--apex-blue) 0%, var(--apex-cyan) 100%);
|
|
transition: height var(--apex-transition-base);
|
|
}
|
|
|
|
.journals .journal-item:hover::before {
|
|
height: 100%;
|
|
}
|
|
|
|
/* === RESPONSIVE DESIGN === */
|
|
|
|
/* === RESPONSIVE TYPOGRAPHY === */
|
|
|
|
@media (max-width: 768px) {
|
|
html {
|
|
font-size: 15px;
|
|
}
|
|
|
|
body {
|
|
font-size: var(--apex-text-sm);
|
|
line-height: var(--apex-leading-relaxed);
|
|
}
|
|
|
|
h1 { font-size: var(--apex-text-3xl); }
|
|
h2 { font-size: var(--apex-text-2xl); }
|
|
h3 { font-size: var(--apex-text-xl); }
|
|
h4 { font-size: var(--apex-text-lg); }
|
|
|
|
.block-content {
|
|
max-width: none;
|
|
}
|
|
|
|
h1.title {
|
|
font-size: var(--apex-text-3xl);
|
|
line-height: var(--apex-leading-snug);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
html {
|
|
font-size: 14px;
|
|
}
|
|
|
|
h1.title {
|
|
font-size: var(--apex-text-2xl);
|
|
line-height: var(--apex-leading-snug);
|
|
}
|
|
|
|
.left-sidebar-inner {
|
|
padding: var(--apex-space-4);
|
|
}
|
|
}
|
|
|
|
/* === ANIMATIONS === */
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes glow {
|
|
0%, 100% {
|
|
box-shadow: 0 0 5px var(--apex-blue);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 20px var(--apex-blue), 0 0 30px var(--apex-blue);
|
|
}
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.slide-in {
|
|
animation: slideInRight 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* === ACCESSIBILITY === */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
@media (prefers-contrast: high) {
|
|
:root {
|
|
--apex-text-primary: #ffffff;
|
|
--apex-text-secondary: #e0e0e0;
|
|
--apex-border-primary: #555555;
|
|
--apex-blue: #4da6ff;
|
|
}
|
|
}
|
|
|
|
/* === PLUGIN COMPATIBILITY === */
|
|
|
|
/* Query Builder */
|
|
.cp__query-builder {
|
|
background: linear-gradient(135deg,
|
|
var(--apex-bg-secondary) 0%,
|
|
rgba(30, 41, 64, 0.8) 100%
|
|
);
|
|
border: 1px solid var(--apex-border-primary);
|
|
border-radius: var(--apex-radius-lg);
|
|
padding: var(--apex-space-4);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.query-builder-clause {
|
|
background: linear-gradient(135deg,
|
|
var(--apex-bg-tertiary) 0%,
|
|
rgba(42, 50, 71, 0.8) 100%
|
|
);
|
|
border: 1px solid var(--apex-border-primary);
|
|
border-radius: var(--apex-radius-md);
|
|
padding: var(--apex-space-2) var(--apex-space-3);
|
|
margin: var(--apex-space-1) 0;
|
|
transition: all var(--apex-transition-fast);
|
|
}
|
|
|
|
.query-builder-clause:hover {
|
|
background: linear-gradient(135deg,
|
|
var(--apex-bg-quaternary) 0%,
|
|
rgba(74, 158, 255, 0.1) 100%
|
|
);
|
|
border-color: var(--apex-blue);
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
/* PDF Viewer */
|
|
.extensions__pdf-container {
|
|
background-color: var(--apex-bg-primary);
|
|
}
|
|
|
|
.extensions__pdf-container[data-theme="dark"] .textLayer {
|
|
background-color: var(--apex-bg-secondary);
|
|
filter: invert(100%);
|
|
}
|
|
|
|
.extensions__pdf-container[data-theme="dark"] .pdfViewer {
|
|
background: transparent;
|
|
filter: invert(100%);
|
|
}
|
|
|
|
/* Whiteboards */
|
|
.logseq-tldraw {
|
|
--color-panel: var(--apex-bg-tertiary);
|
|
--color-panel-inverted: var(--apex-text-secondary);
|
|
--color-text: var(--apex-text-primary);
|
|
--color-text-inverted: var(--apex-bg-tertiary);
|
|
--color-hover: var(--apex-bg-secondary);
|
|
--color-selectedStroke: var(--apex-blue);
|
|
--color-selectedFill: var(--apex-blue-light);
|
|
--color-selectedContrast: var(--apex-text-primary);
|
|
--shadow-small: var(--apex-shadow-sm);
|
|
--shadow-medium: var(--apex-shadow-md);
|
|
--shadow-large: var(--apex-shadow-lg);
|
|
background-color: var(--apex-bg-primary);
|
|
}
|
|
|
|
/* === FINAL OVERRIDES === */
|
|
|
|
/* Ensure all elements use the theme */
|
|
body,
|
|
#app-container,
|
|
.cp__sidebar-main-content {
|
|
background-color: var(--apex-bg-primary) !important;
|
|
color: var(--apex-text-primary) !important;
|
|
}
|
|
|
|
/* Hide unwanted elements */
|
|
::-webkit-scrollbar {
|
|
display: block !important;
|
|
}
|
|
|
|
/* Force consistent font application */
|
|
* {
|
|
font-family: var(--apex-font-family);
|
|
font-feature-settings: var(--apex-font-features);
|
|
}
|
|
|
|
/* Override any light theme artifacts */
|
|
.white-theme,
|
|
.light-theme,
|
|
html[data-theme="light"] {
|
|
--ls-primary-background-color: var(--apex-bg-primary) !important;
|
|
--ls-secondary-background-color: var(--apex-bg-secondary) !important;
|
|
--ls-tertiary-background-color: var(--apex-bg-tertiary) !important;
|
|
--ls-quaternary-background-color: var(--apex-bg-quaternary) !important;
|
|
--ls-primary-text-color: var(--apex-text-primary) !important;
|
|
--ls-secondary-text-color: var(--apex-text-secondary) !important;
|
|
--ls-border-color: var(--apex-border-primary) !important;
|
|
}
|
|
|
|
/* === PRINT TYPOGRAPHY === */
|
|
|
|
@media print {
|
|
body {
|
|
font-size: 11pt;
|
|
line-height: 1.4;
|
|
color: black !important;
|
|
background-color: white !important;
|
|
font-family: var(--apex-font-family);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: black !important;
|
|
page-break-after: avoid;
|
|
font-family: var(--apex-font-family);
|
|
}
|
|
|
|
p, .block-content {
|
|
orphans: 3;
|
|
widows: 3;
|
|
}
|
|
|
|
blockquote {
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
#left-sidebar,
|
|
#right-sidebar,
|
|
.cp__header {
|
|
display: none !important;
|
|
}
|
|
|
|
.cp__sidebar-main-content {
|
|
padding: 0 !important;
|
|
max-width: none !important;
|
|
}
|
|
|
|
a {
|
|
color: black !important;
|
|
text-decoration: underline !important;
|
|
}
|
|
} |