mirror of
https://github.com/devm0nk3y/CyberGlow.git
synced 2026-07-22 04:40:32 +00:00
1714 lines
53 KiB
CSS
1714 lines
53 KiB
CSS
/*
|
|
* ╔═══════════════════════════════════════════════════════════╗
|
|
* ║ C Y B E R G L O W ║
|
|
* ║ An Obsidian Theme by DevM0nk3y ║
|
|
* ║ v1.0.0 ║
|
|
* ╚═══════════════════════════════════════════════════════════╝
|
|
*
|
|
* Secciones:
|
|
* 1. Style Settings YAML
|
|
* 2. Variables de Fundación
|
|
* 3. Navegación
|
|
* 4. Editor
|
|
* 5. Bloques de Código (Xcode Midnight)
|
|
* 6. Componentes UI
|
|
* 7. Correcciones y Componentes adicionales
|
|
* 8. Eliminación de bordes (fuera del card layout)
|
|
* 9. Card Layout: Tab header refinements
|
|
* 10. Card Layout: Vault profile en sidebar
|
|
* 11. Card Layout: Graph controls en splits laterales
|
|
*/
|
|
|
|
|
|
/* ============================================================
|
|
SECCIÓN 1 — Style Settings YAML
|
|
============================================================ */
|
|
|
|
/* @settings
|
|
|
|
name: CyberGlow
|
|
id: cyberglow-settings
|
|
settings:
|
|
# Colors
|
|
- id: cg-colors-header
|
|
title: Colors
|
|
description: "Theme Accent, Active Color, Background Intensity"
|
|
type: heading
|
|
level: 1
|
|
collapsed: true
|
|
- id: cg-primary-color
|
|
title: Primary Color
|
|
description: "Main accent color (default: cyan)"
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-dark: '#00FFFF'
|
|
- id: cg-secondary-color
|
|
title: Secondary Color
|
|
description: "Secondary color for hover and details (default: magenta)"
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-dark: '#FF00FF'
|
|
- id: cg-active-color
|
|
title: Active Color
|
|
description: "Color for active/selected elements"
|
|
type: variable-themed-color
|
|
format: hex
|
|
default-dark: '#FF00FF'
|
|
- id: cg-bg-intensity
|
|
title: Background Intensity
|
|
description: "How dark the background is"
|
|
type: class-select
|
|
default: cg-bg-default
|
|
options:
|
|
- label: Abyss (darkest)
|
|
value: cg-bg-abyss
|
|
- label: Default
|
|
value: cg-bg-default
|
|
- label: Elevated (lightest)
|
|
value: cg-bg-elevated
|
|
# Editor
|
|
- id: cg-editor-header
|
|
title: Editor
|
|
description: "Bold, Italic, Headings styling"
|
|
type: heading
|
|
level: 1
|
|
collapsed: true
|
|
- id: cg-colored-bold
|
|
title: Colored Bold
|
|
description: "Bold text uses the primary theme color"
|
|
type: class-toggle
|
|
default: false
|
|
- id: cg-colored-italic
|
|
title: Colored Italic
|
|
description: "Italic text uses the active theme color"
|
|
type: class-toggle
|
|
default: false
|
|
- id: cg-colored-headings
|
|
title: Neon Gradient Headings
|
|
description: "Headings use neon gradient colors"
|
|
type: class-toggle
|
|
default: false
|
|
# Workspace
|
|
- id: cg-ui-header
|
|
title: Workspace
|
|
description: "Layout, Cards, Tabs, Status Bar, Scrollbars, etc."
|
|
type: heading
|
|
level: 1
|
|
collapsed: true
|
|
- id: cg-autohide-titlebar
|
|
title: Auto-hide Titlebar
|
|
description: "Title bar hides until hover"
|
|
type: class-toggle
|
|
default: false
|
|
- id: cg-slim-scrollbars
|
|
title: Slim Scrollbars
|
|
description: "Minimalist scrollbars with accent color"
|
|
type: class-toggle
|
|
default: false
|
|
- id: cg-statusbar-header
|
|
title: "Status Bar"
|
|
description: "Select status bar style"
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
- id: cg-status-bar
|
|
title: Show Status Bar
|
|
description: "Show the bottom status bar (hidden by default)"
|
|
type: class-toggle
|
|
default: false
|
|
- id: cg-tabs-header
|
|
title: "Tabs"
|
|
description: "Tab bar appearance and behavior"
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
- id: cg-tab-style
|
|
title: "Tab style"
|
|
type: class-select
|
|
default: cg-tab-floating
|
|
options:
|
|
- label: Floating Tabs
|
|
value: cg-tab-floating
|
|
- label: Minimal Tabs
|
|
value: cg-tab-minimal
|
|
- id: cg-tab-gap
|
|
title: Tab Gap
|
|
description: "Spacing between workspace tabs"
|
|
type: variable-number
|
|
default: 10
|
|
format: px
|
|
- id: cg-custom-tab-height
|
|
title: "Custom tab height"
|
|
description: "Adjust the height of workspace tabs"
|
|
type: variable-number
|
|
default: 40
|
|
format: px
|
|
- id: cg-workspace-layout-header
|
|
title: Workspace Layout
|
|
description: "Workspace layout and arrangement"
|
|
type: heading
|
|
level: 2
|
|
collapsed: true
|
|
- id: cg-workspace-layout
|
|
title: Workspace Layout variant
|
|
type: class-select
|
|
default: cg-layout-default
|
|
options:
|
|
- label: Default
|
|
value: cg-layout-default
|
|
- label: Cards
|
|
value: cg-card-layout
|
|
- id: cg-hide-borders
|
|
title: Hide Borders
|
|
description: "Remove UI borders for a cleaner look"
|
|
type: class-toggle
|
|
default: true
|
|
- id: cg-card-layout-settings-header
|
|
title: Card Layout Settings
|
|
description: "Card radius, padding, and component toggles"
|
|
type: heading
|
|
level: 3
|
|
collapsed: true
|
|
- id: cg-card-filebrowser
|
|
title: Card Layout — File Browser
|
|
description: "Card style for the file explorer"
|
|
type: class-toggle
|
|
default: true
|
|
- id: cg-card-actions
|
|
title: Card Layout — Actions Panel
|
|
description: "Card style for the side actions panel"
|
|
type: class-toggle
|
|
default: true
|
|
- id: cg-card-shadows
|
|
title: Card Shadows
|
|
description: "Add shadows to layout cards"
|
|
type: class-toggle
|
|
default: false
|
|
# Support
|
|
- id: cg-support-header
|
|
title: Support CyberGlow
|
|
description: "If you like the theme, here are some ways to support development"
|
|
type: heading
|
|
level: 1
|
|
collapsed: true
|
|
- id: cg-support-star
|
|
title: "⭐ Star the Theme on GitHub"
|
|
description: "https://github.com/DevM0nk3y/CyberGlow"
|
|
type: info-text
|
|
markdown: true
|
|
- id: cg-support-issue
|
|
title: "🐛 Submit an Issue on GitHub"
|
|
description: "https://github.com/DevM0nk3y/CyberGlow/issues"
|
|
type: info-text
|
|
markdown: true
|
|
|
|
*/
|
|
|
|
|
|
|
|
/* Style Settings — Support heading en cian */
|
|
.style-settings-container .setting-item[data-id="cg-support-header"] .setting-item-name {
|
|
color: var(--cg-primary);
|
|
}
|
|
|
|
/* Style Settings — gradient bar bajo Colors */
|
|
.style-settings-container .setting-item[data-id="cg-colors-header"] .setting-item-name::after {
|
|
content: "";
|
|
display: block;
|
|
height: 3px;
|
|
margin-top: 6px;
|
|
border-radius: 2px;
|
|
background: linear-gradient(90deg, #00FFFF, #00FF88, #FFFF00, #FF8800, #FF00FF, #8800FF, #00FFFF);
|
|
}
|
|
|
|
/* ============================================================
|
|
SECCIÓN 2 — Variables de Fundación
|
|
============================================================ */
|
|
|
|
.theme-dark {
|
|
--cg-primary: var(--cg-primary-color, #00FFFF);
|
|
--cg-secondary: var(--cg-secondary-color, #FF00FF);
|
|
--cg-active: var(--cg-active-color, #FF00FF);
|
|
|
|
/* Variables RGB para uso en rgba() */
|
|
--cg-primary-rgb: 0, 255, 255;
|
|
--cg-secondary-rgb: 255, 0, 255;
|
|
--cg-active-rgb: 255, 0, 255;
|
|
|
|
/* Variables para bloques de código */
|
|
--cg-code-bg: #000000;
|
|
--cg-code-text: #FFFFFF;
|
|
|
|
--cg-bg-primary: #0a0a0f;
|
|
--cg-bg-secondary: #181825;
|
|
--cg-bg-tertiary: #1a1a25;
|
|
--cg-text: #e0e0e8;
|
|
--cg-text-muted: #8888a0;
|
|
--cg-text-faint: #555570;
|
|
|
|
/* Mapeo a variables de Obsidian — todo el shell usa el mismo fondo */
|
|
--background-primary: var(--cg-bg-primary);
|
|
--background-primary-alt: var(--cg-bg-primary);
|
|
--background-secondary: var(--cg-bg-primary);
|
|
--background-secondary-alt: var(--cg-bg-primary);
|
|
--background-modifier-border: rgba(var(--cg-primary-rgb), 0.08);
|
|
--background-modifier-border-hover: rgba(var(--cg-primary-rgb), 0.15);
|
|
--background-modifier-border-focus: rgba(var(--cg-primary-rgb), 0.25);
|
|
|
|
--text-normal: var(--cg-text);
|
|
--text-muted: var(--cg-text-muted);
|
|
--text-faint: var(--cg-text-faint);
|
|
--text-accent: var(--cg-primary);
|
|
--text-accent-hover: var(--cg-secondary);
|
|
--text-on-accent: #0a0a0f;
|
|
|
|
--interactive-accent: var(--cg-primary);
|
|
--interactive-accent-hover: var(--cg-secondary);
|
|
--interactive-normal: var(--cg-bg-secondary);
|
|
--interactive-hover: var(--cg-bg-tertiary);
|
|
|
|
--accent-h: 180;
|
|
--accent-s: 100%;
|
|
--accent-l: 50%;
|
|
|
|
--color-red: #FF4647;
|
|
--color-green: #4BD156;
|
|
--color-blue: #00B1FF;
|
|
--color-yellow: #EB905A;
|
|
--color-cyan: #00FFFF;
|
|
--color-purple: #8B87FF;
|
|
--color-pink: #DE38A5;
|
|
|
|
/* Escala base */
|
|
--color-base-00: #0a0a0f;
|
|
--color-base-05: #0e0e15;
|
|
--color-base-10: #12121a;
|
|
--color-base-20: #1a1a25;
|
|
--color-base-25: #1e1e2a;
|
|
--color-base-30: #22222f;
|
|
--color-base-35: #282835;
|
|
--color-base-40: #2e2e3b;
|
|
--color-base-50: #3a3a4a;
|
|
--color-base-60: #555570;
|
|
--color-base-70: #8888a0;
|
|
--color-base-100: #e0e0e8;
|
|
|
|
/* Títulos del sidebar */
|
|
--nav-item-color: var(--cg-text-muted);
|
|
--nav-item-color-hover: var(--cg-primary);
|
|
--nav-item-color-active: var(--cg-primary);
|
|
--nav-item-color-selected: var(--cg-primary);
|
|
--nav-item-background-hover: rgba(var(--cg-primary-rgb), 0.05);
|
|
--nav-item-background-active: rgba(var(--cg-primary-rgb), 0.1);
|
|
--nav-item-background-selected: rgba(var(--cg-primary-rgb), 0.1);
|
|
|
|
/* Tabs */
|
|
--tab-text-color: var(--cg-text-muted);
|
|
--tab-text-color-focused: var(--cg-active);
|
|
--tab-text-color-focused-active: var(--cg-primary);
|
|
--tab-text-color-focused-active-current: var(--cg-primary);
|
|
|
|
/* Scrollbar */
|
|
--scrollbar-bg: transparent;
|
|
--scrollbar-thumb-bg: rgba(var(--cg-primary-rgb), 0.15);
|
|
--scrollbar-active-thumb-bg: rgba(var(--cg-primary-rgb), 0.3);
|
|
}
|
|
|
|
/* Variantes de intensidad de fondo */
|
|
.cg-bg-abyss.theme-dark {
|
|
--cg-bg-primary: #000000;
|
|
--cg-bg-secondary: #080810;
|
|
--cg-bg-tertiary: #101018;
|
|
}
|
|
|
|
.cg-bg-elevated.theme-dark {
|
|
--cg-bg-primary: #141420;
|
|
--cg-bg-secondary: #1c1c2a;
|
|
--cg-bg-tertiary: #242435;
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
SECCIÓN 3 — Navegación
|
|
============================================================ */
|
|
|
|
/* Iconos base */
|
|
.side-dock-ribbon-action svg,
|
|
.nav-action-button svg,
|
|
.tab-header-icon svg,
|
|
.nav-folder-collapse-indicator svg,
|
|
.nav-file-icon svg,
|
|
.nav-folder-icon svg,
|
|
.view-action svg,
|
|
.clickable-icon svg,
|
|
.search-input-clear-button svg {
|
|
color: var(--cg-primary);
|
|
stroke: var(--cg-primary);
|
|
fill: none;
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
/* Estado activo */
|
|
.is-active svg,
|
|
.is-selected svg,
|
|
.is-active .clickable-icon svg,
|
|
.is-active .nav-action-button svg,
|
|
.is-active .tab-header-icon svg,
|
|
.workspace-tab-header.is-active svg,
|
|
.side-dock-ribbon-action.is-active svg,
|
|
.nav-file-title.is-active svg {
|
|
color: var(--cg-active);
|
|
stroke: var(--cg-active);
|
|
--icon-color: var(--cg-active);
|
|
}
|
|
|
|
/* Hover → magenta */
|
|
.side-dock-ribbon-action:hover svg,
|
|
.nav-action-button:hover svg,
|
|
.view-action:hover svg,
|
|
.clickable-icon:hover svg {
|
|
color: var(--cg-secondary);
|
|
stroke: var(--cg-secondary);
|
|
--icon-color: var(--cg-secondary);
|
|
}
|
|
|
|
/* Archivo activo en explorador */
|
|
.nav-file-title.is-active,
|
|
.nav-file.is-active .nav-file-title {
|
|
color: var(--cg-primary);
|
|
}
|
|
|
|
/* Tabs — estilo pill/card con gap */
|
|
.workspace-tabs:not(.mod-stacked) {
|
|
--tab-background: var(--cg-bg-secondary);
|
|
--tab-background-active: var(--cg-bg-primary);
|
|
--tab-font-size: 12px;
|
|
--tab-height: 28px;
|
|
--tab-max-width: 200px;
|
|
}
|
|
|
|
.mod-vertical:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container-inner,
|
|
.mod-horizontal:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container-inner {
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
width: 100%;
|
|
gap: var(--cg-tab-gap, 10px);
|
|
}
|
|
|
|
.mod-vertical:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header,
|
|
.mod-horizontal:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
|
|
background: var(--tab-background);
|
|
border-radius: 6px;
|
|
box-shadow: none !important;
|
|
height: var(--tab-height);
|
|
padding: 0 !important;
|
|
border: 1px solid rgba(var(--cg-primary-rgb), 0.08);
|
|
}
|
|
|
|
.workspace-tabs:not(.mod-stacked) .workspace-tab-header::before,
|
|
.workspace-tabs:not(.mod-stacked) .workspace-tab-header::after,
|
|
.workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner::after {
|
|
display: none;
|
|
}
|
|
|
|
.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
|
|
max-width: var(--tab-max-width);
|
|
}
|
|
|
|
.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner {
|
|
padding: 0 4px 0 8px;
|
|
}
|
|
|
|
/* Tab activo */
|
|
.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active {
|
|
flex-grow: 1.67;
|
|
max-width: 300px;
|
|
background-color: var(--cg-bg-primary);
|
|
}
|
|
|
|
.mod-root .workspace-tabs:not(.mod-stacked).mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-title {
|
|
color: var(--cg-primary) !important;
|
|
}
|
|
|
|
.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active .workspace-tab-header-inner-title {
|
|
color: var(--cg-active);
|
|
}
|
|
|
|
/* Tabs inactivos */
|
|
.workspace-tab-header:not(.is-active) .workspace-tab-header-inner-title {
|
|
color: rgba(var(--cg-primary-rgb), 0.5);
|
|
}
|
|
|
|
.workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner {
|
|
background-color: transparent;
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
SECCIÓN 4 — Editor
|
|
============================================================ */
|
|
|
|
|
|
/* Headings h1-h6 — color normal del texto, sin gradientes */
|
|
.markdown-rendered h1,
|
|
.markdown-rendered h2,
|
|
.markdown-rendered h3,
|
|
.markdown-rendered h4,
|
|
.markdown-rendered h5,
|
|
.markdown-rendered h6 {
|
|
color: var(--cg-text);
|
|
}
|
|
|
|
.cm-header-1,
|
|
.cm-header-2,
|
|
.cm-header-3,
|
|
.cm-header-4,
|
|
.cm-header-5,
|
|
.cm-header-6 {
|
|
color: var(--cg-text);
|
|
}
|
|
|
|
/* HR separadores */
|
|
.cm-line hr,
|
|
.markdown-preview-view hr,
|
|
.markdown-rendered hr {
|
|
margin-block-start: 4em;
|
|
margin-block-end: 4em;
|
|
border: none;
|
|
height: 0;
|
|
border-bottom: 1px solid;
|
|
border-image-slice: 1;
|
|
border-image-source: linear-gradient(to right, transparent, var(--cg-primary), transparent);
|
|
}
|
|
|
|
.cm-line hr::after,
|
|
.markdown-rendered hr::after {
|
|
content: '§';
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) rotate(60deg);
|
|
transform-origin: 50% 50%;
|
|
padding: 0.5rem;
|
|
color: var(--cg-secondary);
|
|
background-color: var(--cg-bg-secondary);
|
|
}
|
|
|
|
/* Links */
|
|
.cm-url, .cm-link,
|
|
.markdown-rendered a,
|
|
.internal-link {
|
|
color: var(--cg-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.markdown-rendered a:hover,
|
|
.internal-link:hover {
|
|
color: var(--cg-secondary);
|
|
}
|
|
|
|
/* Tags */
|
|
.tag, .cm-hashtag {
|
|
color: var(--cg-secondary);
|
|
background-color: rgba(var(--cg-secondary-rgb), 0.1);
|
|
border-radius: 4px;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
|
|
/* Tablas */
|
|
.markdown-rendered table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.markdown-rendered th {
|
|
background-color: var(--cg-bg-tertiary);
|
|
color: var(--cg-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.markdown-rendered td,
|
|
.markdown-rendered th {
|
|
border: 1px solid rgba(var(--cg-primary-rgb), 0.1);
|
|
padding: 6px 12px;
|
|
}
|
|
|
|
.markdown-rendered tr:hover td {
|
|
background-color: rgba(var(--cg-primary-rgb), 0.03);
|
|
}
|
|
|
|
/* Blockquotes */
|
|
.markdown-rendered blockquote {
|
|
border-left: 3px solid var(--cg-primary);
|
|
color: var(--cg-text-muted);
|
|
padding-left: 1em;
|
|
}
|
|
|
|
/* Listas — marcadores */
|
|
.list-bullet::after {
|
|
color: var(--cg-text);
|
|
}
|
|
|
|
.markdown-rendered ul > li::marker,
|
|
.markdown-rendered ol > li::marker {
|
|
color: var(--cg-text);
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
SECCIÓN 5 — Bloques de Código (Xcode Midnight)
|
|
============================================================ */
|
|
|
|
/* --- CodeMirror 6 — Editor — activo siempre por defecto --- */
|
|
.cm-s-obsidian .HyperMD-codeblock {
|
|
background-color: var(--cg-code-bg);
|
|
color: var(--cg-code-text);
|
|
}
|
|
.cm-s-obsidian .HyperMD-codeblock .cm-comment { color: #4BD156; }
|
|
.cm-s-obsidian .HyperMD-codeblock .cm-string,
|
|
.cm-s-obsidian .HyperMD-codeblock .cm-string-2 { color: #FF4647; }
|
|
.cm-s-obsidian .HyperMD-codeblock .cm-number,
|
|
.cm-s-obsidian .HyperMD-codeblock .cm-atom { color: #8B87FF; }
|
|
.cm-s-obsidian .HyperMD-codeblock .cm-keyword { color: #DE38A5; }
|
|
.cm-s-obsidian .HyperMD-codeblock .cm-def { color: #08FA95; }
|
|
.cm-s-obsidian .HyperMD-codeblock .cm-variable-2,
|
|
.cm-s-obsidian .HyperMD-codeblock .cm-variable-3,
|
|
.cm-s-obsidian .HyperMD-codeblock .cm-type,
|
|
.cm-s-obsidian .HyperMD-codeblock .cm-builtin,
|
|
.cm-s-obsidian .HyperMD-codeblock .cm-property { color: #00B1FF; }
|
|
.cm-s-obsidian .HyperMD-codeblock .cm-meta,
|
|
.cm-s-obsidian .HyperMD-codeblock .cm-tag { color: #EB905A; }
|
|
.cm-s-obsidian .HyperMD-codeblock .cm-attribute,
|
|
.cm-s-obsidian .HyperMD-codeblock .cm-qualifier { color: #3B5AAC; }
|
|
.cm-s-obsidian .HyperMD-codeblock .cm-variable,
|
|
.cm-s-obsidian .HyperMD-codeblock .cm-operator { color: var(--cg-code-text); }
|
|
|
|
/* --- Prism.js — Vista de Lectura --- */
|
|
.markdown-rendered pre code {
|
|
background-color: var(--cg-code-bg);
|
|
color: var(--cg-code-text);
|
|
}
|
|
.markdown-rendered pre {
|
|
background-color: var(--cg-code-bg);
|
|
}
|
|
.markdown-rendered code .token.comment,
|
|
.markdown-rendered code .token.prolog,
|
|
.markdown-rendered code .token.doctype,
|
|
.markdown-rendered code .token.cdata { color: #4BD156; }
|
|
.markdown-rendered code .token.string,
|
|
.markdown-rendered code .token.attr-value,
|
|
.markdown-rendered code .token.regex { color: #FF4647; }
|
|
.markdown-rendered code .token.number,
|
|
.markdown-rendered code .token.boolean,
|
|
.markdown-rendered code .token.constant { color: #8B87FF; }
|
|
.markdown-rendered code .token.keyword,
|
|
.markdown-rendered code .token.important,
|
|
.markdown-rendered code .token.atrule { color: #DE38A5; }
|
|
.markdown-rendered code .token.function { color: #08FA95; }
|
|
.markdown-rendered code .token.class-name,
|
|
.markdown-rendered code .token.builtin,
|
|
.markdown-rendered code .token.property { color: #00B1FF; }
|
|
.markdown-rendered code .token.tag,
|
|
.markdown-rendered code .token.selector { color: #EB905A; }
|
|
.markdown-rendered code .token.attr-name { color: #3B5AAC; }
|
|
.markdown-rendered code .token.operator,
|
|
.markdown-rendered code .token.punctuation { color: var(--cg-code-text); }
|
|
.markdown-rendered code .token.parameter { color: #EB905A; }
|
|
.markdown-rendered code .token.variable { color: #00B1FF; }
|
|
.markdown-rendered code .token.parameter.variable { color: #00B1FF; }
|
|
|
|
/* --- Code-styler plugin (con !important para ganar especificidad) --- */
|
|
pre.code-styler-pre,
|
|
pre.code-styler-pre code {
|
|
background-color: var(--cg-code-bg) !important;
|
|
color: var(--cg-code-text) !important;
|
|
}
|
|
pre.code-styler-pre .token.comment,
|
|
pre.code-styler-pre .token.prolog { color: #4BD156 !important; }
|
|
pre.code-styler-pre .token.string,
|
|
pre.code-styler-pre .token.attr-value,
|
|
pre.code-styler-pre .token.regex { color: #FF4647 !important; }
|
|
pre.code-styler-pre .token.number,
|
|
pre.code-styler-pre .token.boolean,
|
|
pre.code-styler-pre .token.constant { color: #8B87FF !important; }
|
|
pre.code-styler-pre .token.keyword,
|
|
pre.code-styler-pre .token.important { color: #DE38A5 !important; }
|
|
pre.code-styler-pre .token.function { color: #08FA95 !important; }
|
|
pre.code-styler-pre .token.class-name,
|
|
pre.code-styler-pre .token.builtin,
|
|
pre.code-styler-pre .token.property { color: #00B1FF !important; }
|
|
pre.code-styler-pre .token.tag,
|
|
pre.code-styler-pre .token.selector { color: #EB905A !important; }
|
|
pre.code-styler-pre .token.attr-name { color: #3B5AAC !important; }
|
|
pre.code-styler-pre .token.operator,
|
|
pre.code-styler-pre .token.punctuation { color: var(--cg-code-text) !important; }
|
|
pre.code-styler-pre .token.parameter { color: #EB905A !important; }
|
|
pre.code-styler-pre .token.variable { color: #00B1FF !important; }
|
|
pre.code-styler-pre .token.parameter.variable { color: #00B1FF !important; }
|
|
|
|
|
|
/* ============================================================
|
|
SECCIÓN 6 — Componentes UI
|
|
============================================================ */
|
|
|
|
/* Botones primarios */
|
|
.mod-cta {
|
|
background-color: var(--cg-primary);
|
|
color: var(--cg-bg-primary);
|
|
font-weight: 600;
|
|
border: none;
|
|
}
|
|
|
|
.mod-cta:hover {
|
|
background-color: var(--cg-active);
|
|
color: var(--cg-bg-primary);
|
|
}
|
|
|
|
/* Checkboxes */
|
|
input[type="checkbox"]:checked {
|
|
background-color: var(--cg-primary);
|
|
border-color: var(--cg-primary);
|
|
}
|
|
|
|
/* Scrollbars delgadas — usa API estándar que respeta auto-hide nativo de macOS */
|
|
.cg-slim-scrollbars * {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(var(--cg-primary-rgb), 0.15) transparent;
|
|
}
|
|
|
|
/* Bordes ocultos — elimina dividers y outlines entre paneles */
|
|
body.cg-hide-borders .workspace-leaf,
|
|
body.cg-hide-borders .workspace-tab-header-container,
|
|
body.cg-hide-borders .workspace-split {
|
|
border: none !important;
|
|
}
|
|
body.cg-hide-borders.cg-card-layout {
|
|
--cg-card-outline-color: transparent;
|
|
}
|
|
body.cg-hide-borders.cg-card-layout .menu {
|
|
border: none !important;
|
|
}
|
|
body.cg-hide-borders.cg-tab-floating .workspace-tab-header {
|
|
border: none !important;
|
|
}
|
|
|
|
/* -----------------------------------------------
|
|
* Card Layout — Variables y estructura base
|
|
* ----------------------------------------------- */
|
|
|
|
body.cg-card-layout {
|
|
--cg-card-bg: var(--cg-bg-primary);
|
|
--cg-card-fg: var(--cg-bg-secondary);
|
|
--cg-card-outline-color: rgba(var(--cg-primary-rgb), 0.08);
|
|
--cg-card-radius: var(--radius-xl, 12px);
|
|
--cg-card-padding: 8px;
|
|
--cg-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
|
|
--divider-color: transparent;
|
|
--divider-color-hover: rgba(var(--cg-primary-rgb), 0.1);
|
|
--divider-width: 4px;
|
|
--divider-width-hover: 4px;
|
|
--tab-container-background: var(--cg-card-bg);
|
|
--ribbon-padding: 0;
|
|
}
|
|
|
|
/* Workspace y container — fondo del "canvas" detrás de las cards */
|
|
body.cg-card-layout .workspace,
|
|
body.cg-card-layout .horizontal-main-container,
|
|
body.cg-card-layout .mod-vertical .workspace-tabs {
|
|
background-color: var(--cg-card-bg);
|
|
}
|
|
|
|
/* Leaves en splits laterales y root — fondo del canvas */
|
|
body.cg-card-layout .mod-left-split .workspace-tabs .workspace-leaf,
|
|
body.cg-card-layout .mod-right-split .workspace-tabs .workspace-leaf,
|
|
body.cg-card-layout .mod-left-split,
|
|
body.cg-card-layout .mod-vertical .workspace-tab-container,
|
|
body.cg-card-layout .mod-vertical,
|
|
body.cg-card-layout .workspace-split.mod-vertical,
|
|
body.cg-card-layout .workspace-fake-target-overlay:not(.is-in-sidebar) .workspace-tabs .workspace-leaf,
|
|
body.cg-card-layout .mod-root .workspace-tabs .workspace-leaf,
|
|
body.cg-card-layout .workspace-ribbon.mod-left,
|
|
body.cg-card-layout .workspace-ribbon.mod-left:before {
|
|
background-color: var(--cg-card-bg);
|
|
}
|
|
|
|
/* Padding horizontal en sidebar tab containers */
|
|
body.cg-card-layout .mod-left-split .workspace-tab-container,
|
|
body.cg-card-layout .mod-right-split .workspace-tab-container {
|
|
padding-left: var(--cg-card-padding);
|
|
padding-right: var(--cg-card-padding);
|
|
background-color: var(--cg-card-bg);
|
|
}
|
|
|
|
/* Tab header — sin borde inferior */
|
|
body.cg-card-layout .workspace-tab-header-container,
|
|
body.cg-card-layout .workspace-ribbon.mod-left:before {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Padding lateral en workspace-tabs verticales */
|
|
body.cg-card-layout:not(.is-phone) .mod-vertical .workspace-tabs {
|
|
padding-left: var(--cg-card-padding);
|
|
padding-right: var(--cg-card-padding);
|
|
}
|
|
|
|
/* === CARD — workspace-leaf-content principal === */
|
|
/* Todos los leaf-content EXCEPTO file-explorer (a menos que cg-card-filebrowser esté activo) */
|
|
body.cg-card-layout .workspace-split .workspace-leaf-content:not([data-type="file-explorer"]),
|
|
body.cg-card-layout.cg-card-filebrowser .workspace-leaf-content[data-type="file-explorer"] {
|
|
background-color: var(--cg-card-fg);
|
|
border: 1px solid var(--cg-card-outline-color);
|
|
}
|
|
|
|
/* Bordes redondeados + separación inferior — no en móvil */
|
|
body.cg-card-layout:not(.is-phone) .workspace-split .workspace-leaf-content:not([data-type="file-explorer"]),
|
|
body.cg-card-layout:not(.is-phone).cg-card-filebrowser .workspace-leaf-content[data-type="file-explorer"] {
|
|
border-radius: var(--cg-card-radius);
|
|
margin-bottom: var(--cg-card-padding);
|
|
}
|
|
|
|
/* Paneles laterales — canvas (fondo detrás de las cards) */
|
|
body.cg-card-layout .mod-left-split .workspace-leaf,
|
|
body.cg-card-layout .mod-right-split .workspace-leaf {
|
|
background-color: var(--cg-card-bg);
|
|
margin-bottom: var(--cg-card-padding);
|
|
}
|
|
|
|
/* Paneles laterales — sobreescribir variables de Obsidian en el scope del sidebar.
|
|
* Obsidian aplica --background-primary en workspace-leaf-content vía sus CSS base.
|
|
* Al redefinirla aquí, el leaf-content hereda el color de card sin necesitar !important. */
|
|
body.cg-card-layout .workspace-split.mod-left-split .workspace-leaf-content:not([data-type="file-explorer"]),
|
|
body.cg-card-layout .workspace-split.mod-right-split .workspace-leaf-content {
|
|
--background-primary: var(--cg-card-fg);
|
|
--background-primary-alt: var(--cg-card-fg);
|
|
--background-secondary: var(--cg-card-fg);
|
|
--background-secondary-alt: var(--cg-card-fg);
|
|
background-color: var(--cg-card-fg);
|
|
border: 1px solid var(--cg-card-outline-color);
|
|
border-radius: var(--cg-card-radius);
|
|
}
|
|
|
|
/* Sidebars — forzar fondo card en TODOS los hijos */
|
|
body.cg-card-layout .workspace-split.mod-right-split .workspace-leaf-content .view-content,
|
|
body.cg-card-layout .workspace-split.mod-right-split .workspace-leaf-content .view-header,
|
|
body.cg-card-layout .workspace-split.mod-right-split .workspace-leaf-content .backlink-pane,
|
|
body.cg-card-layout .workspace-split.mod-right-split .workspace-leaf-content .outgoing-link-pane,
|
|
body.cg-card-layout .workspace-split.mod-right-split .workspace-leaf-content .tree-item-self,
|
|
body.cg-card-layout .workspace-split.mod-right-split .workspace-leaf-content .search-result-container,
|
|
body.cg-card-layout .workspace-split.mod-left-split .workspace-leaf-content .view-content,
|
|
body.cg-card-layout .workspace-split.mod-left-split .workspace-leaf-content .view-header {
|
|
background-color: var(--cg-card-fg) !important;
|
|
}
|
|
body.cg-card-layout .workspace-split.mod-right-split .workspace-leaf-content .view-header,
|
|
body.cg-card-layout .workspace-split.mod-left-split .workspace-leaf-content .view-header {
|
|
border-radius: var(--cg-card-radius) var(--cg-card-radius) 0 0;
|
|
}
|
|
|
|
/* Stacked tabs — sin radius ni borde (ya hay borde en el stacked tab header) */
|
|
body.cg-card-layout .workspace-split .mod-stacked .workspace-leaf-content {
|
|
border-radius: 0;
|
|
border: none;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Stacked tabs — header con borde card */
|
|
body.cg-card-layout .workspace .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header {
|
|
border-style: solid;
|
|
border-radius: var(--cg-card-radius) 0 0 var(--cg-card-radius);
|
|
border-width: 1px;
|
|
border-color: var(--cg-card-outline-color);
|
|
border-right: 1px dashed var(--cg-card-outline-color);
|
|
}
|
|
|
|
body.cg-card-layout .workspace .workspace-tabs.mod-stacked .workspace-leaf {
|
|
border-left-width: 0;
|
|
border-top-width: 1px;
|
|
border-bottom-width: 1px;
|
|
border-style: solid;
|
|
border-color: var(--cg-card-outline-color);
|
|
border-radius: 0 var(--cg-card-radius) var(--cg-card-radius) 0;
|
|
}
|
|
|
|
body.cg-card-layout .workspace .workspace-tabs.mod-stacked .workspace-tab-container {
|
|
padding-bottom: var(--cg-card-padding);
|
|
}
|
|
|
|
body.cg-card-layout .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-leaf {
|
|
background-color: var(--cg-bg-primary);
|
|
}
|
|
|
|
/* Horizontal splits */
|
|
body.cg-card-layout .workspace-split.mod-horizontal > * {
|
|
width: unset;
|
|
}
|
|
|
|
/* Drop overlay — ajustar al card */
|
|
body.cg-card-layout .workspace-drop-overlay:before {
|
|
width: calc(100% - 6px - var(--cg-card-padding) * 2);
|
|
height: calc(100% - 6px - var(--cg-card-padding) * 2);
|
|
margin: auto;
|
|
}
|
|
|
|
/* Card layout — solo el contenido de cada card tiene fondo más claro (legacy — mantenido para compatibilidad) */
|
|
body.cg-card-layout .workspace-leaf-content {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* También el área de texto del editor markdown */
|
|
.workspace-leaf-content[data-type="markdown"] .view-content {
|
|
background-color: var(--cg-bg-secondary);
|
|
}
|
|
|
|
/* Modal */
|
|
.modal {
|
|
background-color: var(--cg-bg-secondary);
|
|
border: 1px solid rgba(var(--cg-primary-rgb), 0.1);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Status bar — oculta por defecto, visible cuando cg-status-bar está activo */
|
|
.status-bar {
|
|
display: none;
|
|
background-color: color-mix(in srgb, var(--cg-bg-secondary) 80%, black);
|
|
color: var(--cg-text-faint);
|
|
}
|
|
.cg-status-bar .status-bar {
|
|
display: flex;
|
|
}
|
|
.status-bar .status-bar-item {
|
|
color: var(--cg-primary);
|
|
}
|
|
.status-bar .status-bar-item svg {
|
|
color: var(--cg-primary);
|
|
stroke: var(--cg-primary);
|
|
--icon-color: var(--cg-primary);
|
|
}
|
|
.status-bar .status-bar-item:last-child svg {
|
|
color: var(--cg-text-faint);
|
|
stroke: var(--cg-text-faint);
|
|
--icon-color: var(--cg-text-faint);
|
|
}
|
|
|
|
/* Ribbon */
|
|
.workspace-ribbon {
|
|
background-color: var(--cg-bg-primary);
|
|
}
|
|
|
|
/* Search */
|
|
.search-result-file-title {
|
|
color: var(--cg-primary);
|
|
}
|
|
|
|
.search-result-file-matched-text {
|
|
color: var(--cg-secondary);
|
|
background-color: rgba(var(--cg-secondary-rgb), 0.15);
|
|
}
|
|
|
|
/* Input fields */
|
|
input[type="text"],
|
|
input[type="search"],
|
|
textarea {
|
|
background-color: var(--cg-bg-tertiary);
|
|
border: 1px solid rgba(var(--cg-primary-rgb), 0.1);
|
|
color: var(--cg-text);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
input[type="text"]:focus,
|
|
input[type="search"]:focus,
|
|
textarea:focus {
|
|
border-color: rgba(var(--cg-primary-rgb), 0.15);
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
|
|
/* Tooltip */
|
|
.tooltip {
|
|
background-color: var(--cg-bg-tertiary);
|
|
color: var(--cg-text);
|
|
border: 1px solid rgba(var(--cg-primary-rgb), 0.1);
|
|
}
|
|
|
|
/* Selection highlight */
|
|
::selection {
|
|
background-color: rgba(var(--cg-primary-rgb), 0.2);
|
|
}
|
|
|
|
/* Card layout — file browser */
|
|
body.cg-card-filebrowser .nav-files-container {
|
|
padding: 4px;
|
|
}
|
|
body.cg-card-filebrowser .nav-folder-children {
|
|
background-color: var(--cg-bg-secondary);
|
|
border-radius: 8px;
|
|
padding: 4px;
|
|
margin: 2px 0;
|
|
}
|
|
|
|
/* Card layout — actions panel (ribbon lateral) */
|
|
body.cg-card-layout.cg-card-actions .workspace-ribbon.mod-left {
|
|
margin-right: var(--cg-card-padding);
|
|
}
|
|
body.cg-card-layout.cg-card-actions .side-dock-actions {
|
|
border-radius: 0 var(--cg-card-radius) var(--cg-card-radius) 0;
|
|
margin-top: 2px;
|
|
border-width: 1px 1px 0 1px;
|
|
border-style: solid;
|
|
border-color: var(--cg-card-outline-color);
|
|
background-color: var(--cg-card-fg);
|
|
}
|
|
|
|
/* Card shadows */
|
|
.cg-card-shadows .workspace-leaf-content {
|
|
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--cg-primary-rgb), 0.04);
|
|
}
|
|
|
|
/* Autohide titlebar — implementación completa (inspirada en AnuPpuccin) */
|
|
.cg-autohide-titlebar:not(.is-mobile) {
|
|
--cg-titlebar-delay: 150ms;
|
|
--cg-titlebar-duration: 300ms;
|
|
--cg-titlebar-target-translate-y: 18px;
|
|
--cg-titlebar-translate-y: 40px;
|
|
}
|
|
.cg-autohide-titlebar:not(.is-mobile) .workspace-leaf-content .view-header {
|
|
margin-top: calc(var(--cg-titlebar-translate-y) * -1);
|
|
position: relative;
|
|
transition: transform var(--cg-titlebar-duration) var(--cg-titlebar-delay);
|
|
}
|
|
.cg-autohide-titlebar:not(.is-mobile) .workspace-leaf-content .view-header::before {
|
|
bottom: calc(var(--cg-titlebar-target-translate-y) * -1);
|
|
content: "";
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
transition: transform var(--cg-titlebar-duration) var(--cg-titlebar-delay);
|
|
width: 100%;
|
|
z-index: 0;
|
|
}
|
|
.cg-autohide-titlebar:not(.is-mobile) .workspace-leaf-content .view-header:is(:hover, :focus-within)::before {
|
|
transform: translateY(var(--cg-titlebar-target-translate-y));
|
|
}
|
|
.cg-autohide-titlebar:not(.is-mobile) .workspace-leaf-content .view-header:is(:hover, :focus-within),
|
|
.cg-autohide-titlebar:not(.is-mobile) .workspace-leaf-content .view-header:is(:hover, :focus-within) + .view-content {
|
|
transform: translateY(var(--cg-titlebar-translate-y));
|
|
}
|
|
.cg-autohide-titlebar:not(.is-mobile) .workspace-leaf-content .view-content {
|
|
transition: transform var(--cg-titlebar-duration) var(--cg-titlebar-delay);
|
|
}
|
|
.cg-autohide-titlebar:not(.is-mobile) .workspace-leaf-content .view-header-title {
|
|
--file-header-font-size: var(--font-ui-medium);
|
|
}
|
|
.cg-autohide-titlebar:not(.is-mobile) .workspace-leaf-content .view-header > div {
|
|
transition: visibility var(--cg-titlebar-duration) var(--cg-titlebar-delay);
|
|
visibility: visible;
|
|
z-index: 1;
|
|
}
|
|
.cg-autohide-titlebar:not(.is-mobile) .workspace-leaf-content .view-header:not(:hover, :focus-within) > div {
|
|
visibility: hidden;
|
|
}
|
|
|
|
|
|
/* ============================================================
|
|
SECCIÓN 7 — Correcciones y Componentes adicionales
|
|
============================================================ */
|
|
|
|
/* Panel derecho — backlinks y outgoing links */
|
|
.backlink-pane,
|
|
.outgoing-link-pane {
|
|
background-color: var(--cg-bg-primary);
|
|
}
|
|
.backlink-pane .search-result-file-title,
|
|
.outgoing-link-pane .search-result-file-title {
|
|
color: var(--cg-primary);
|
|
}
|
|
.backlink-pane .search-result-file-match,
|
|
.outgoing-link-pane .search-result-file-match {
|
|
color: var(--cg-text-muted);
|
|
}
|
|
.tree-item-self .tree-item-inner {
|
|
color: var(--cg-text-muted);
|
|
}
|
|
.tree-item-self:hover .tree-item-inner {
|
|
color: var(--cg-primary);
|
|
}
|
|
.tree-item-self.is-clickable:hover {
|
|
background-color: rgba(var(--cg-primary-rgb), 0.05);
|
|
}
|
|
|
|
/* Headers de paneles laterales */
|
|
.sidebar-section-header {
|
|
color: var(--cg-primary);
|
|
}
|
|
|
|
/* Grafo */
|
|
.graph-view.color-fill {
|
|
color: var(--cg-primary);
|
|
}
|
|
.graph-view.color-fill-highlight {
|
|
color: var(--cg-secondary);
|
|
}
|
|
.graph-view.color-fill-focused {
|
|
color: var(--cg-active);
|
|
}
|
|
.graph-view.color-line {
|
|
color: rgba(var(--cg-primary-rgb), 0.15);
|
|
}
|
|
.graph-view.color-text {
|
|
color: var(--cg-text);
|
|
}
|
|
.graph-view.color-fill-attachment {
|
|
color: var(--cg-secondary);
|
|
}
|
|
.graph-view.color-fill-tag {
|
|
color: var(--color-purple);
|
|
}
|
|
.graph-view.color-fill-unresolved {
|
|
color: var(--cg-text-faint);
|
|
}
|
|
.graph-view.color-arrow {
|
|
color: rgba(var(--cg-primary-rgb), 0.3);
|
|
}
|
|
|
|
/* View header — parte de la card */
|
|
body.cg-card-layout .view-header {
|
|
background-color: var(--cg-bg-secondary) !important;
|
|
border-bottom: 1px solid rgba(var(--cg-primary-rgb), 0.05);
|
|
}
|
|
|
|
/* Breadcrumb / vista de título */
|
|
.view-header-title {
|
|
color: var(--cg-text-muted);
|
|
}
|
|
.view-header-breadcrumb {
|
|
color: var(--cg-text-faint);
|
|
}
|
|
.view-header-breadcrumb:hover {
|
|
color: var(--cg-primary);
|
|
}
|
|
|
|
/* Settings panel */
|
|
.vertical-tab-header-group-title {
|
|
color: var(--cg-primary);
|
|
}
|
|
.vertical-tab-nav-item {
|
|
color: var(--cg-text-muted);
|
|
}
|
|
.vertical-tab-nav-item.is-active {
|
|
color: var(--cg-primary);
|
|
background-color: rgba(var(--cg-primary-rgb), 0.1);
|
|
}
|
|
|
|
/* Toggle switches */
|
|
.checkbox-container.is-enabled {
|
|
background-color: var(--cg-primary);
|
|
}
|
|
.checkbox-container {
|
|
background-color: var(--cg-bg-tertiary);
|
|
}
|
|
|
|
/* Dropdown */
|
|
.dropdown {
|
|
background-color: var(--cg-bg-tertiary);
|
|
border: 1px solid rgba(var(--cg-primary-rgb), 0.1);
|
|
color: var(--cg-text);
|
|
}
|
|
|
|
/* Sugerencias / Autocomplete */
|
|
.suggestion-item {
|
|
color: var(--cg-text);
|
|
}
|
|
.suggestion-item.is-selected {
|
|
background-color: rgba(var(--cg-primary-rgb), 0.1);
|
|
color: var(--cg-primary);
|
|
border: none;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* Prompt / Command palette */
|
|
.prompt {
|
|
background-color: var(--cg-bg-secondary);
|
|
border: 1px solid rgba(var(--cg-primary-rgb), 0.08);
|
|
}
|
|
.prompt-input-container {
|
|
border-radius: var(--radius-l, 8px) var(--radius-l, 8px) 0 0;
|
|
}
|
|
.prompt-input {
|
|
background-color: var(--cg-bg-tertiary);
|
|
color: var(--cg-text);
|
|
border: 1px solid rgba(var(--cg-primary-rgb), 0.08);
|
|
border-radius: var(--radius-l, 8px) var(--radius-l, 8px) 0 0 !important;
|
|
}
|
|
|
|
.prompt-input:focus {
|
|
border-color: rgba(var(--cg-primary-rgb), 0.15);
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
|
|
/* Empty state text */
|
|
.empty-state-title {
|
|
color: var(--cg-text-faint);
|
|
}
|
|
|
|
/* Inline code */
|
|
.cm-inline-code,
|
|
.markdown-rendered code:not(pre code) {
|
|
background-color: var(--cg-bg-tertiary);
|
|
color: var(--cg-primary);
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Bold y italic — colores base */
|
|
strong, .cm-strong { color: var(--cg-text); }
|
|
em, .cm-em { color: var(--cg-text); }
|
|
|
|
/* Bold en color primario */
|
|
.cg-colored-bold strong,
|
|
.cg-colored-bold .cm-strong {
|
|
color: var(--cg-primary) !important;
|
|
}
|
|
|
|
/* Italic en color activo */
|
|
.cg-colored-italic em,
|
|
.cg-colored-italic .cm-em {
|
|
color: var(--cg-active) !important;
|
|
}
|
|
|
|
/* Headings con gradiente neon */
|
|
.cg-colored-headings .markdown-rendered h1,
|
|
.cg-colored-headings .cm-header-1 { color: #00FFFF; }
|
|
.cg-colored-headings .markdown-rendered h2,
|
|
.cg-colored-headings .cm-header-2 { color: #33CCFF; }
|
|
.cg-colored-headings .markdown-rendered h3,
|
|
.cg-colored-headings .cm-header-3 { color: #6699FF; }
|
|
.cg-colored-headings .markdown-rendered h4,
|
|
.cg-colored-headings .cm-header-4 { color: #9966FF; }
|
|
.cg-colored-headings .markdown-rendered h5,
|
|
.cg-colored-headings .cm-header-5 { color: #CC33FF; }
|
|
.cg-colored-headings .markdown-rendered h6,
|
|
.cg-colored-headings .cm-header-6 { color: #FF00FF; }
|
|
|
|
/* Frontmatter / Properties */
|
|
.metadata-container {
|
|
background-color: var(--cg-bg-secondary);
|
|
border: 1px solid rgba(var(--cg-primary-rgb), 0.05);
|
|
border-radius: 8px;
|
|
}
|
|
.metadata-property-key {
|
|
color: var(--cg-text-muted);
|
|
}
|
|
.metadata-property-value {
|
|
color: var(--cg-text);
|
|
}
|
|
|
|
/* -----------------------------------------------
|
|
* Embeds y File References
|
|
* ----------------------------------------------- */
|
|
|
|
/* Archivos embebidos / referencias a archivos */
|
|
.internal-embed,
|
|
.file-embed {
|
|
background-color: var(--cg-bg-tertiary);
|
|
border: 1px solid rgba(var(--cg-primary-rgb), 0.08);
|
|
border-radius: 6px;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.file-embed-link,
|
|
.internal-embed .markdown-embed-link {
|
|
color: var(--cg-primary);
|
|
}
|
|
|
|
.file-embed-link:hover {
|
|
color: var(--cg-secondary);
|
|
}
|
|
|
|
/* Icono del archivo embebido */
|
|
.file-embed-icon svg {
|
|
color: var(--cg-primary);
|
|
stroke: var(--cg-primary);
|
|
}
|
|
|
|
/* Markdown embed */
|
|
.markdown-embed {
|
|
background-color: var(--cg-bg-secondary);
|
|
border: 1px solid rgba(var(--cg-primary-rgb), 0.08);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.markdown-embed-title {
|
|
color: var(--cg-primary);
|
|
}
|
|
|
|
/* -----------------------------------------------
|
|
* Callouts — colores semánticos (inglés y español)
|
|
* ----------------------------------------------- */
|
|
|
|
.callout {
|
|
--callout-color: 0, 255, 255;
|
|
background-color: rgba(var(--callout-color), 0.05);
|
|
border-radius: 8px;
|
|
border: none;
|
|
}
|
|
|
|
.callout-title {
|
|
color: rgb(var(--callout-color));
|
|
}
|
|
|
|
.callout-content {
|
|
color: var(--cg-text);
|
|
}
|
|
|
|
.callout[data-callout="warning"],
|
|
.callout[data-callout="caution"],
|
|
.callout[data-callout="advertencia"],
|
|
.callout[data-callout="precaución"] { --callout-color: 235, 144, 90; }
|
|
|
|
.callout[data-callout="danger"],
|
|
.callout[data-callout="error"],
|
|
.callout[data-callout="bug"],
|
|
.callout[data-callout="peligro"] { --callout-color: 255, 70, 71; }
|
|
|
|
.callout[data-callout="tip"],
|
|
.callout[data-callout="success"],
|
|
.callout[data-callout="hint"],
|
|
.callout[data-callout="consejo"],
|
|
.callout[data-callout="éxito"] { --callout-color: 75, 209, 86; }
|
|
|
|
.callout[data-callout="info"],
|
|
.callout[data-callout="note"],
|
|
.callout[data-callout="nota"],
|
|
.callout[data-callout="información"] { --callout-color: 0, 255, 255; }
|
|
|
|
.callout[data-callout="question"],
|
|
.callout[data-callout="pregunta"],
|
|
.callout[data-callout="help"] { --callout-color: 139, 135, 255; }
|
|
|
|
.callout[data-callout="example"],
|
|
.callout[data-callout="ejemplo"] { --callout-color: 222, 56, 165; }
|
|
|
|
.callout[data-callout="quote"],
|
|
.callout[data-callout="cite"],
|
|
.callout[data-callout="cita"] { --callout-color: 136, 136, 160; }
|
|
|
|
.callout[data-callout="abstract"],
|
|
.callout[data-callout="summary"],
|
|
.callout[data-callout="resumen"] { --callout-color: 0, 177, 255; }
|
|
|
|
/* -----------------------------------------------
|
|
* Inline Title
|
|
* ----------------------------------------------- */
|
|
|
|
.inline-title {
|
|
color: var(--cg-text);
|
|
}
|
|
|
|
/* -----------------------------------------------
|
|
* Sidebar mejorada
|
|
* ----------------------------------------------- */
|
|
|
|
/* Vault title */
|
|
.nav-header .nav-buttons-container {
|
|
border-bottom: 1px solid rgba(var(--cg-primary-rgb), 0.05);
|
|
}
|
|
|
|
/* Folder titles */
|
|
.nav-folder-title {
|
|
color: var(--cg-text-muted);
|
|
}
|
|
|
|
.nav-folder-title:hover {
|
|
color: var(--cg-primary);
|
|
}
|
|
|
|
/* Collapse indicator */
|
|
.nav-folder-collapse-indicator {
|
|
color: var(--cg-text-faint);
|
|
}
|
|
|
|
/* File titles (no activos) */
|
|
.nav-file-title {
|
|
color: var(--cg-text-muted);
|
|
}
|
|
|
|
.nav-file-title:hover {
|
|
color: var(--cg-primary);
|
|
background-color: rgba(var(--cg-primary-rgb), 0.05);
|
|
}
|
|
|
|
/* -----------------------------------------------
|
|
* Número de línea en bloques de código
|
|
* ----------------------------------------------- */
|
|
|
|
/* Line numbers del code-styler */
|
|
.code-styler-line-number {
|
|
color: var(--cg-text-faint) !important;
|
|
}
|
|
|
|
/* -----------------------------------------------
|
|
* Mejoras de listas de tareas
|
|
* ----------------------------------------------- */
|
|
|
|
/* Checkboxes en listas de tareas */
|
|
.task-list-item-checkbox:checked {
|
|
background-color: var(--cg-primary);
|
|
border-color: var(--cg-primary);
|
|
}
|
|
|
|
.task-list-item-checkbox {
|
|
border-color: var(--cg-text-faint);
|
|
}
|
|
|
|
/* Texto tachado en tareas completadas */
|
|
.task-list-item[data-task="x"] .task-list-item-checkbox ~ * {
|
|
text-decoration: line-through;
|
|
color: var(--cg-text-faint);
|
|
}
|
|
|
|
/* -----------------------------------------------
|
|
* Progress bars y sliders
|
|
* ----------------------------------------------- */
|
|
|
|
input[type="range"] {
|
|
accent-color: var(--cg-primary);
|
|
}
|
|
|
|
/* -----------------------------------------------
|
|
* Notices / Notificaciones
|
|
* ----------------------------------------------- */
|
|
|
|
.notice {
|
|
background-color: var(--cg-bg-tertiary);
|
|
color: var(--cg-text);
|
|
border: 1px solid rgba(var(--cg-primary-rgb), 0.1);
|
|
}
|
|
|
|
/* -----------------------------------------------
|
|
* Tab header mejorado
|
|
* ----------------------------------------------- */
|
|
|
|
/* Barra de tabs — fondo */
|
|
.workspace-tab-header-container {
|
|
background-color: var(--cg-bg-primary);
|
|
}
|
|
|
|
/* Icono del tab */
|
|
.workspace-tab-header-inner-icon svg {
|
|
color: var(--cg-primary);
|
|
stroke: var(--cg-primary);
|
|
}
|
|
|
|
/* Close button del tab */
|
|
.workspace-tab-header-inner-close-button:hover svg {
|
|
color: var(--cg-secondary);
|
|
stroke: var(--cg-secondary);
|
|
}
|
|
|
|
/* -----------------------------------------------
|
|
* Mejoras del explorador de archivos
|
|
* ----------------------------------------------- */
|
|
|
|
/* Contador de archivos en carpetas */
|
|
.nav-folder-title .nav-folder-title-content .nav-file-tag {
|
|
color: var(--cg-text-faint);
|
|
background-color: rgba(var(--cg-primary-rgb), 0.05);
|
|
}
|
|
|
|
/* Indicador de vault en la parte inferior */
|
|
.nav-header-title {
|
|
color: var(--cg-primary);
|
|
}
|
|
|
|
/* ============================================================
|
|
SECCIÓN 8A — Tab Styles: Floating & Minimal
|
|
============================================================ */
|
|
|
|
/* --- Custom tab height variable --- */
|
|
body.cg-tab-floating,
|
|
body.cg-tab-minimal {
|
|
--cg-custom-tab-height: 40px;
|
|
--header-height: var(--cg-custom-tab-height, 40px);
|
|
}
|
|
|
|
/* ---- Floating Tabs (adapted from AnuPuccin Safari-style Animated) ---- */
|
|
|
|
body.cg-tab-floating .workspace-tabs:not(.mod-stacked) {
|
|
--tab-background: var(--cg-bg-secondary);
|
|
--tab-background-active: var(--cg-bg-primary);
|
|
--tab-font-size: 12px;
|
|
--tab-height: calc(var(--header-height) * 0.7);
|
|
--tab-max-width: 200px;
|
|
--tab-max-width-active: 300px;
|
|
}
|
|
|
|
body.cg-tab-floating .workspace-tabs:not(.mod-stacked) .workspace-tab-header::before,
|
|
body.cg-tab-floating .workspace-tabs:not(.mod-stacked) .workspace-tab-header::after {
|
|
display: none;
|
|
}
|
|
|
|
body.cg-tab-floating .mod-vertical:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container-inner,
|
|
body.cg-tab-floating .mod-horizontal:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container-inner {
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
width: 100%;
|
|
gap: var(--cg-tab-gap, 10px);
|
|
}
|
|
|
|
body.cg-tab-floating .mod-vertical:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header,
|
|
body.cg-tab-floating .mod-horizontal:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
|
|
background: var(--tab-background);
|
|
border-radius: 6px;
|
|
box-shadow: none !important;
|
|
height: var(--tab-height);
|
|
padding: 0 !important;
|
|
transition: 400ms, background-color 150ms ease-in-out;
|
|
border: 1px solid rgba(var(--cg-primary-rgb), 0.12);
|
|
}
|
|
|
|
body.cg-tab-floating .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
|
|
max-width: var(--tab-max-width);
|
|
}
|
|
|
|
body.cg-tab-floating .mod-root:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner {
|
|
padding: 0 4px 0 8px;
|
|
transition: 400ms, background-color 150ms ease-in-out, max-width 400ms;
|
|
color: var(--cg-text-muted);
|
|
}
|
|
|
|
body.cg-tab-floating .mod-root:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner-close-button,
|
|
body.cg-tab-floating .mod-root:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner-icon {
|
|
color: var(--cg-text-muted);
|
|
}
|
|
|
|
|
|
body.cg-tab-floating .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active {
|
|
flex-grow: 1.67;
|
|
max-width: var(--tab-max-width-active);
|
|
background-color: var(--cg-bg-primary);
|
|
}
|
|
|
|
body.cg-tab-floating .mod-root .workspace-tabs:not(.mod-stacked).mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-title {
|
|
color: var(--cg-primary) !important;
|
|
}
|
|
|
|
body.cg-tab-floating .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active .workspace-tab-header-inner-title {
|
|
color: var(--cg-active);
|
|
}
|
|
|
|
body.cg-tab-floating .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-title {
|
|
color: rgba(var(--cg-primary-rgb), 0.5);
|
|
}
|
|
|
|
body.cg-tab-floating .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner {
|
|
background-color: transparent;
|
|
}
|
|
|
|
body.cg-tab-floating .sidebar-toggle-button.mod-left,
|
|
body.cg-tab-floating .sidebar-toggle-button.mod-right {
|
|
align-items: center;
|
|
}
|
|
|
|
body.cg-tab-floating .sidebar-toggle-button.mod-left .clickable-icon,
|
|
body.cg-tab-floating .sidebar-toggle-button.mod-right .clickable-icon {
|
|
height: var(--tab-height);
|
|
}
|
|
|
|
/* ---- Minimal Tabs (adapted from AnuPuccin mini-tab style) ---- */
|
|
|
|
body.cg-tab-minimal {
|
|
--tab-stacked-header-width: 40px;
|
|
}
|
|
|
|
/* Visual alignment: align tabs with card edge */
|
|
body.cg-tab-floating .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner,
|
|
body.cg-tab-minimal .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner {
|
|
justify-content: flex-start !important;
|
|
}
|
|
|
|
/* All tabs: fully transparent, no shadow, no border */
|
|
body.cg-tab-minimal .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner .workspace-tab-header {
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
max-width: 200px;
|
|
}
|
|
|
|
/* Kill all pseudo-elements (corner curves, separators) */
|
|
body.cg-tab-minimal .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner .workspace-tab-header::before,
|
|
body.cg-tab-minimal .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner .workspace-tab-header::after,
|
|
body.cg-tab-minimal .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner .workspace-tab-header *::after {
|
|
display: none;
|
|
}
|
|
|
|
/* Active tab: bottom border accent only, no background */
|
|
body.cg-tab-minimal .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner .workspace-tab-header.is-active {
|
|
background-color: transparent;
|
|
border-bottom: 2px solid var(--cg-primary);
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
/* Active tab inner: no background, compact */
|
|
body.cg-tab-minimal .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner .workspace-tab-header.is-active .workspace-tab-header-inner {
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
margin-top: 0;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
/* Active tab title: accent color */
|
|
body.cg-tab-minimal .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner .workspace-tab-header.is-active .workspace-tab-header-inner-title {
|
|
color: var(--cg-primary);
|
|
}
|
|
|
|
/* Hover: very subtle tint, no background */
|
|
body.cg-tab-minimal .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner .workspace-tab-header:hover .workspace-tab-header-inner {
|
|
background-color: rgba(var(--cg-primary-rgb), 0.05);
|
|
}
|
|
|
|
/* Inactive tab inner: no background */
|
|
body.cg-tab-minimal .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner .workspace-tab-header:not(.is-active) .workspace-tab-header-inner {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* ============================================================
|
|
SECCIÓN 8 — Eliminación de bordes (fuera del card layout)
|
|
============================================================ */
|
|
|
|
/* Eliminar bordes laterales del contenido — solo cuando NO hay card layout activo */
|
|
body:not(.cg-card-layout) .workspace-leaf-content {
|
|
border: none;
|
|
}
|
|
|
|
body:not(.cg-card-layout) .workspace-leaf {
|
|
border: none;
|
|
}
|
|
|
|
.view-content {
|
|
border: none;
|
|
}
|
|
|
|
body:not(.cg-card-layout) .workspace-split.mod-root .workspace-leaf {
|
|
border: none;
|
|
}
|
|
|
|
.markdown-source-view,
|
|
.markdown-reading-view {
|
|
border: none;
|
|
}
|
|
|
|
.cm-editor {
|
|
border: none;
|
|
}
|
|
|
|
/* Quitar focus ring que puede parecer una barra */
|
|
body:not(.cg-card-layout) .workspace-leaf.mod-active .workspace-leaf-content {
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Toggle switches — off state styling */
|
|
.checkbox-container:not(.is-enabled) {
|
|
background-color: var(--cg-bg-secondary);
|
|
outline: 1px solid rgba(var(--cg-primary-rgb), 0.3);
|
|
outline-offset: -1px;
|
|
}
|
|
.checkbox-container:not(.is-enabled) .checkbox-container-thumb {
|
|
background-color: var(--cg-text-faint);
|
|
}
|
|
|
|
/* ============================================================
|
|
SECCIÓN 9 — Card Layout: Tab header refinements
|
|
============================================================ */
|
|
|
|
/* Tab header container en card layout — padding y alineación */
|
|
body.cg-card-layout .mod-vertical .workspace-tabs .workspace-tab-header-container {
|
|
padding-left: 8px;
|
|
}
|
|
body.cg-card-layout .mod-vertical .workspace-tabs .workspace-tab-header-container .workspace-tab-header-container-inner {
|
|
margin: 6px -5px calc(var(--tab-outline-width, 1px) * -1);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Sidebar tabs activos — fondo highlighted */
|
|
body.cg-card-layout .mod-left-split .workspace-tab-header.is-active,
|
|
body.cg-card-layout .mod-right-split .workspace-tab-header.is-active,
|
|
body.cg-card-layout .mod-left-split .workspace-tab-header.has-active-menu,
|
|
body.cg-card-layout .mod-right-split .workspace-tab-header.has-active-menu {
|
|
background-color: rgba(var(--cg-primary-rgb), 0.1);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* New tab button — empujar a la derecha */
|
|
body:not(.cg-card-layout) .workspace-split.mod-vertical .workspace-tab-header-spacer {
|
|
display: none;
|
|
}
|
|
body:not(.cg-card-layout) .workspace-split.mod-vertical .workspace-tab-header-new-tab {
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* ============================================================
|
|
SECCIÓN 10 — Card Layout: Vault profile en sidebar
|
|
============================================================ */
|
|
|
|
body.cg-card-layout .workspace-split.mod-left-split .workspace-sidedock-vault-profile {
|
|
border: none;
|
|
margin: var(--cg-card-padding, 8px);
|
|
margin-bottom: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* ============================================================
|
|
SECCIÓN 11 — Card Layout: Graph controls en splits laterales
|
|
============================================================ */
|
|
|
|
body.cg-card-layout .workspace-split:not(.mod-root) .graph-controls {
|
|
background-color: var(--cg-bg-secondary);
|
|
}
|
|
|
|
/* Style Settings — contenido de sub-headings como card */
|
|
.style-settings-heading[data-level="2"] {
|
|
margin-bottom: 4px;
|
|
}
|
|
.style-settings-heading[data-level="2"] + .style-settings-container {
|
|
background-color: color-mix(in srgb, var(--cg-bg-secondary) 30%, transparent);
|
|
padding: 8px 8px 8px 24px;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(var(--cg-primary-rgb), 0.06);
|
|
margin-top: 4px;
|
|
}
|
|
.style-settings-heading[data-level="2"] + .style-settings-container > .setting-item:not(.style-settings-heading) {
|
|
background-color: transparent;
|
|
}
|
|
.style-settings-heading[data-level="3"] {
|
|
margin-bottom: 4px;
|
|
}
|
|
.style-settings-heading[data-level="3"] + .style-settings-container {
|
|
background-color: color-mix(in srgb, var(--cg-bg-secondary) 40%, transparent);
|
|
padding: 8px 8px 8px 24px;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(var(--cg-primary-rgb), 0.06);
|
|
margin-top: 4px;
|
|
}
|
|
.style-settings-heading[data-level="3"] + .style-settings-container > .setting-item:not(.style-settings-heading) {
|
|
background-color: transparent;
|
|
}
|
|
.style-settings-heading[data-level="1"] {
|
|
margin-bottom: 4px;
|
|
}
|
|
.style-settings-heading[data-level="1"] + .style-settings-container {
|
|
background-color: var(--cg-bg-secondary);
|
|
padding: 8px 8px 8px 16px;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(var(--cg-primary-rgb), 0.06);
|
|
margin-top: 4px;
|
|
}
|
|
.style-settings-heading[data-level="1"] + .style-settings-container > .setting-item:not(.style-settings-heading) {
|
|
background-color: transparent;
|
|
}
|