mirror of
https://github.com/xscriptor/obsidian.git
synced 2026-07-22 04:10:24 +00:00
2175 lines
64 KiB
CSS
2175 lines
64 KiB
CSS
/* Xscriptor Theme for Obsidian */
|
||
/* X */
|
||
|
||
/* @settings
|
||
|
||
name: X Theme Settings
|
||
id: x-theme
|
||
settings:
|
||
-
|
||
id: transparency
|
||
title: Transparencia
|
||
type: heading
|
||
level: 2
|
||
collapsed: true
|
||
-
|
||
id: background-opacity
|
||
title: Opacidad del fondo
|
||
description: Controla la transparencia de la aplicación
|
||
type: variable-number-slider
|
||
default: 0.8
|
||
min: 0.1
|
||
max: 1
|
||
step: 0.1
|
||
format:
|
||
-
|
||
id: mica-effect
|
||
title: Efecto Pseudo Mica
|
||
description: Habilita el efecto de vidrio esmerilado (requiere fondo translúcido)
|
||
type: variable-toggle
|
||
default: true
|
||
-
|
||
id: blur-intensity
|
||
title: Intensidad del desenfoque
|
||
description: Controla la intensidad del efecto de desenfoque
|
||
type: variable-number-slider
|
||
default: 20
|
||
min: 5
|
||
max: 50
|
||
step: 5
|
||
format: px
|
||
-
|
||
id: colors
|
||
title: Colores
|
||
type: heading
|
||
level: 2
|
||
collapsed: true
|
||
-
|
||
id: accent-color
|
||
title: Color de acento
|
||
description: Color principal del tema
|
||
type: variable-themed-color
|
||
opacity: true
|
||
format: hex
|
||
default-light: '#cc99ff'
|
||
default-dark: '#cc99ff'
|
||
-
|
||
id: h1-color
|
||
title: Color de títulos H1
|
||
type: variable-themed-color
|
||
format: hex
|
||
default-light: '#8b0000'
|
||
default-dark: '#cd919e'
|
||
-
|
||
id: h2-color
|
||
title: Color de títulos H2
|
||
type: variable-themed-color
|
||
format: hex
|
||
default-light: '#b8860b'
|
||
default-dark: '#daa520'
|
||
-
|
||
id: h3-color
|
||
title: Color de títulos H3
|
||
type: variable-themed-color
|
||
format: hex
|
||
default-light: '#2e8b57'
|
||
default-dark: '#8fbc8f'
|
||
-
|
||
id: italic-color
|
||
title: Color de texto en cursiva
|
||
type: variable-themed-color
|
||
format: hex
|
||
default-light: '#8b4513'
|
||
default-dark: '#8be3eb'
|
||
-
|
||
id: typography
|
||
title: Tipografía
|
||
type: heading
|
||
level: 2
|
||
collapsed: true
|
||
-
|
||
id: font-size
|
||
title: Tamaño de fuente
|
||
description: Tamaño base de la fuente
|
||
type: variable-number-slider
|
||
default: 16
|
||
min: 12
|
||
max: 24
|
||
step: 1
|
||
format: px
|
||
-
|
||
id: line-height
|
||
title: Altura de línea
|
||
description: Espaciado entre líneas
|
||
type: variable-number-slider
|
||
default: 1.6
|
||
min: 1.2
|
||
max: 2.0
|
||
step: 0.1
|
||
format:
|
||
-
|
||
id: interface
|
||
title: Interfaz
|
||
type: heading
|
||
level: 2
|
||
collapsed: true
|
||
-
|
||
id: border-radius
|
||
title: Radio de bordes
|
||
description: Redondez de los elementos
|
||
type: variable-number-slider
|
||
default: 8
|
||
min: 0
|
||
max: 20
|
||
step: 1
|
||
format: px
|
||
-
|
||
id: folder-colors
|
||
title: Colores de carpetas
|
||
description: Habilitar colores en las carpetas
|
||
type: class-toggle
|
||
default: true
|
||
|
||
*/
|
||
|
||
/* Definir fuentes EB Garamond locales */
|
||
@font-face {
|
||
font-family: 'EB Garamond';
|
||
src: url('fonts/EBGaramond-VariableFont_wght.ttf') format('truetype');
|
||
font-weight: 400 700;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'EB Garamond';
|
||
src: url('fonts/EBGaramond-Italic-VariableFont_wght.ttf') format('truetype');
|
||
font-weight: 400 700;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
/* Variables CSS para el tema */
|
||
:root {
|
||
/* Style Settings Variables */
|
||
--background-opacity: 0.8;
|
||
--mica-effect: 1;
|
||
--blur-intensity: 20px;
|
||
--accent-color: #cc99ff;
|
||
--h1-color: #8b0000;
|
||
--h2-color: #b8860b;
|
||
--h3-color: #2e8b57;
|
||
--italic-color: #8b4513;
|
||
--font-size: 16px;
|
||
--line-height: 1.6;
|
||
--border-radius: 8px;
|
||
}
|
||
|
||
/* =================================================================
|
||
PSEUDO MICA EFFECT & PLUGIN SUPPORT
|
||
================================================================= */
|
||
|
||
/* Pseudo Mica Plugin Support */
|
||
/* These classes are used by the Pseudo Mica plugin for Obsidian */
|
||
.pseudo-mica-enabled,
|
||
.pseudo-mica-active {
|
||
background: transparent !important;
|
||
}
|
||
|
||
.pseudo-mica-enabled .workspace,
|
||
.pseudo-mica-active .workspace {
|
||
background: rgba(var(--background-primary-rgb), var(--background-opacity, 0.8)) !important;
|
||
backdrop-filter: blur(var(--blur-intensity, 20px));
|
||
-webkit-backdrop-filter: blur(var(--blur-intensity, 20px));
|
||
}
|
||
|
||
.pseudo-mica-enabled .workspace-leaf-content,
|
||
.pseudo-mica-active .workspace-leaf-content {
|
||
background: rgba(var(--background-secondary-rgb), calc(var(--background-opacity, 0.8) * 0.9)) !important;
|
||
backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.7));
|
||
-webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.7));
|
||
}
|
||
|
||
.pseudo-mica-enabled .workspace-drawer,
|
||
.pseudo-mica-active .workspace-drawer {
|
||
background: rgba(var(--background-secondary-rgb), calc(var(--background-opacity, 0.8) * 0.85)) !important;
|
||
backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.8));
|
||
-webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.8));
|
||
}
|
||
|
||
.pseudo-mica-enabled .titlebar,
|
||
.pseudo-mica-active .titlebar {
|
||
background: rgba(var(--background-primary-rgb), calc(var(--background-opacity, 0.8) * 0.7)) !important;
|
||
backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.9));
|
||
-webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.9));
|
||
}
|
||
|
||
.pseudo-mica-enabled .status-bar,
|
||
.pseudo-mica-active .status-bar {
|
||
background: rgba(var(--background-secondary-rgb), calc(var(--background-opacity, 0.8) * 0.8)) !important;
|
||
backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.7));
|
||
-webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.7));
|
||
}
|
||
|
||
.pseudo-mica-enabled .workspace-tab-header-container,
|
||
.pseudo-mica-active .workspace-tab-header-container {
|
||
background: rgba(var(--background-secondary-rgb), calc(var(--background-opacity, 0.8) * 0.6)) !important;
|
||
backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.6));
|
||
-webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.6));
|
||
}
|
||
|
||
.pseudo-mica-enabled .modal,
|
||
.pseudo-mica-active .modal {
|
||
background: rgba(var(--background-primary-rgb), calc(var(--background-opacity, 0.8) * 0.95)) !important;
|
||
backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 1.2));
|
||
-webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 1.2));
|
||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
.pseudo-mica-enabled .menu,
|
||
.pseudo-mica-active .menu {
|
||
background: rgba(var(--background-secondary-rgb), calc(var(--background-opacity, 0.8) * 0.9)) !important;
|
||
backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.8));
|
||
-webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.8));
|
||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||
}
|
||
|
||
/* Custom mica effect base styles (for manual activation) */
|
||
.mica-enabled {
|
||
backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1)));
|
||
-webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1)));
|
||
}
|
||
|
||
/* Apply mica effect to main containers when enabled */
|
||
body:has(.mica-toggle:checked) .workspace,
|
||
body.mica-effect .workspace {
|
||
backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1)));
|
||
-webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1)));
|
||
}
|
||
|
||
body:has(.mica-toggle:checked) .workspace-leaf-content,
|
||
body.mica-effect .workspace-leaf-content {
|
||
backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.7));
|
||
-webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.7));
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
body:has(.mica-toggle:checked) .workspace-split.mod-vertical > .workspace-leaf:first-of-type .workspace-leaf-content,
|
||
body.mica-effect .workspace-split.mod-vertical > .workspace-leaf:first-of-type .workspace-leaf-content {
|
||
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
body:has(.mica-toggle:checked) .workspace-split.mod-horizontal > .workspace-leaf:first-of-type .workspace-leaf-content,
|
||
body.mica-effect .workspace-split.mod-horizontal > .workspace-leaf:first-of-type .workspace-leaf-content {
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
/* Sidebar mica effect */
|
||
body:has(.mica-toggle:checked) .workspace-drawer,
|
||
body.mica-effect .workspace-drawer {
|
||
backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.8));
|
||
-webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.8));
|
||
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
/* Tab bar mica effect */
|
||
body:has(.mica-toggle:checked) .workspace-tab-header-container,
|
||
body.mica-effect .workspace-tab-header-container {
|
||
backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.6));
|
||
-webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.6));
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
/* Title bar mica effect */
|
||
body:has(.mica-toggle:checked) .titlebar,
|
||
body.mica-effect .titlebar {
|
||
backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.9));
|
||
-webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.9));
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
/* Status bar mica effect */
|
||
body:has(.mica-toggle:checked) .status-bar,
|
||
body.mica-effect .status-bar {
|
||
backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.7));
|
||
-webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.7));
|
||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
/* Modal and popup mica effect */
|
||
body:has(.mica-toggle:checked) .modal,
|
||
body.mica-effect .modal {
|
||
backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 1.2));
|
||
-webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 1.2));
|
||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
body:has(.mica-toggle:checked) .suggestion-container,
|
||
body.mica-effect .suggestion-container {
|
||
backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1)));
|
||
-webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1)));
|
||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||
}
|
||
|
||
/* Menu mica effect */
|
||
body:has(.mica-toggle:checked) .menu,
|
||
body.mica-effect .menu {
|
||
backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.8));
|
||
-webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.8));
|
||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||
}
|
||
|
||
/* Enhanced glass effect for cards and panels */
|
||
body:has(.mica-toggle:checked) .callout,
|
||
body.mica-effect .callout {
|
||
backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.5));
|
||
-webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.5));
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
/* Disable mica when not supported or disabled */
|
||
@supports not (backdrop-filter: blur(1px)) {
|
||
.mica-enabled,
|
||
body:has(.mica-toggle:checked) .workspace,
|
||
body.mica-effect .workspace,
|
||
body:has(.mica-toggle:checked) .workspace-leaf-content,
|
||
body.mica-effect .workspace-leaf-content {
|
||
backdrop-filter: none;
|
||
-webkit-backdrop-filter: none;
|
||
}
|
||
}
|
||
|
||
.theme-light {
|
||
/* Style Settings Variables - Light Mode */
|
||
--accent-color: var(--accent-color, #cc99ff);
|
||
--h1-color: var(--h1-color, #8b0000);
|
||
--h2-color: var(--h2-color, #b8860b);
|
||
--h3-color: var(--h3-color, #2e8b57);
|
||
--italic-color: var(--italic-color, #8b4513);
|
||
|
||
/* RGB Variables for Pseudo Mica Plugin */
|
||
--background-primary-rgb: 255, 255, 255;
|
||
--background-secondary-rgb: 248, 249, 250;
|
||
/* Colores principales - Modo Claro */
|
||
--background-primary: #ffffff;
|
||
--background-primary-alt: #f8f9fa;
|
||
--background-secondary: #f1f3f4;
|
||
--background-secondary-alt: #e8eaed;
|
||
--background-accent: #ffffff;
|
||
--background-modifier-border: #dadce0;
|
||
--background-modifier-form-field: #ffffff;
|
||
--background-modifier-form-field-highlighted: #f8f9fa;
|
||
--background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
|
||
--background-modifier-success: #d4edda;
|
||
--background-modifier-error: #f8d7da;
|
||
--background-modifier-error-rgb: 248, 215, 218;
|
||
--background-modifier-error-hover: #f5c6cb;
|
||
--background-modifier-cover: rgba(0, 0, 0, 0.8);
|
||
|
||
/* Colores de texto - Modo Claro */
|
||
--text-normal: #202124;
|
||
--text-muted: #5f6368;
|
||
--text-faint: #9aa0a6;
|
||
--text-accent: #cc99ff;
|
||
--text-accent-hover: #99c2ff;
|
||
--text-on-accent: #ffffff;
|
||
--text-error: #d93025;
|
||
--text-warning: #f9ab00;
|
||
--text-success: #137333;
|
||
|
||
/* Colores para títulos jerárquicos - Modo Claro */
|
||
--h1-color: #8b0000; /* Rojo oscuro */
|
||
--h2-color: #b8860b; /* Dorado oscuro */
|
||
--h3-color: #2e8b57; /* Verde mar */
|
||
--h4-color: #4682b4; /* Azul acero */
|
||
--h5-color: #9932cc; /* Violeta oscuro */
|
||
--h6-color: #696969; /* Gris oscuro */
|
||
|
||
/* Color para texto en cursiva - Modo Claro */
|
||
--italic-color: #8b4513; /* Azul cian */
|
||
|
||
/* Bordes - Variaciones de grises */
|
||
--border-color: #dadce0;
|
||
--border-color-hover: #bdc1c6;
|
||
--border-color-focus: #9aa0a6;
|
||
--divider-color: #e8eaed;
|
||
--divider-color-hover: #dadce0;
|
||
|
||
/* Colores interactivos */
|
||
--interactive-normal: #f8f9fa;
|
||
--interactive-hover: #f1f3f4;
|
||
--interactive-accent: #1a73e8;
|
||
--interactive-accent-hover: #1557b0;
|
||
--interactive-success: #137333;
|
||
|
||
/* Colores para callouts - Modo Claro */
|
||
--callout-info: #e3f2fd;
|
||
--callout-info-border: #2196f3;
|
||
--callout-info-text: #0d47a1;
|
||
--callout-warning: #fff3e0;
|
||
--callout-warning-border: #ff9800;
|
||
--callout-warning-text: #e65100;
|
||
--callout-error: #ffebee;
|
||
--callout-error-border: #f44336;
|
||
--callout-error-text: #c62828;
|
||
--callout-success: #e8f5e8;
|
||
--callout-success-border: #4caf50;
|
||
--callout-success-text: #2e7d32;
|
||
--callout-tip: #f3e5f5;
|
||
--callout-tip-border: #9c27b0;
|
||
--callout-tip-text: #6a1b9a;
|
||
--callout-note: #f5f5f5;
|
||
--callout-note-border: #757575;
|
||
--callout-note-text: #424242;
|
||
|
||
/* Colores para tags - Modo Claro */
|
||
--tag-background: #e8f0fe;
|
||
--tag-text: #1565c0;
|
||
--tag-border: #bbdefb;
|
||
|
||
/* Colores para highlights - Modo Claro */
|
||
--highlight-yellow: #fff59d;
|
||
--highlight-green: #c8e6c9;
|
||
--highlight-blue: #bbdefb;
|
||
--highlight-pink: #f8bbd9;
|
||
--highlight-purple: #e1bee7;
|
||
|
||
/* Colores para tablas - Modo Claro */
|
||
--table-header-background: #f5f5f5;
|
||
--table-row-even: #fafafa;
|
||
--table-row-odd: #ffffff;
|
||
--table-border-color: #e0e0e0;
|
||
|
||
/* Interface element variables - Modo Claro */
|
||
--radius-xl: calc(var(--border-radius, 8px) * 2);
|
||
--radius-l: calc(var(--border-radius, 8px) * 1.26);
|
||
--radius-m: var(--border-radius, 8px);
|
||
--radius-s: calc(var(--border-radius, 8px) * 0.5);
|
||
--card-color: #ffffff;
|
||
--select-color: #ffffff;
|
||
--input-color: #f8f9fa;
|
||
}
|
||
|
||
/* Estilos específicos para modo claro */
|
||
.theme-light {
|
||
/* Pestañas del workspace */
|
||
.workspace-tab-header {
|
||
background-color: var(--card-color) !important;
|
||
border: 1px solid #2a2a2a;
|
||
border-radius: var(--radius-xl);
|
||
padding: 4px 16px;
|
||
}
|
||
|
||
/* Workspace tab containers */
|
||
.workspace
|
||
.mod-root
|
||
.workspace-tabs.mod-stacked
|
||
.workspace-tab-container
|
||
.workspace-tab-header {
|
||
border-radius: var(--radius-xl) 0 0 var(--radius-xl);
|
||
background: var(--card-color) !important;
|
||
color: var(--text-normal);
|
||
border: 1px solid #2a2a2a;
|
||
box-shadow: -24px 0px 56px rgba(42, 42, 42, 0.1);
|
||
}
|
||
|
||
.workspace-split.mod-root .view-content {
|
||
background-color: var(--background-primary);
|
||
border-radius: var(--radius-xl);
|
||
}
|
||
|
||
.view-header {
|
||
border-radius: var(--radius-xl);
|
||
margin: 0 0 8px 0;
|
||
background-color: var(--card-color);
|
||
}
|
||
|
||
/* Workspace leaf content */
|
||
.workspace-split .workspace-leaf-content:not([data-type="file-explorer"]) {
|
||
background-color: var(--card-color);
|
||
border-radius: var(--radius-xl);
|
||
border: 1px solid #2a2a2a;
|
||
}
|
||
|
||
.mod-root .workspace-tabs .workspace-leaf {
|
||
background-color: var(--card-color);
|
||
border-radius: var(--radius-xl);
|
||
padding: 8px;
|
||
border: 1px solid #2a2a2a;
|
||
}
|
||
|
||
.mod-left-split .workspace-tab-header,
|
||
.mod-right-split .workspace-tab-header {
|
||
border: 1px solid #2a2a2a;
|
||
border-radius: var(--radius-m);
|
||
background-color: var(--card-color);
|
||
}
|
||
|
||
/* Menús contextuales */
|
||
.menu,
|
||
.suggestion-container,
|
||
.modal {
|
||
background-color: var(--card-color) !important;
|
||
border: 2px solid #2a2a2a;
|
||
border-radius: var(--radius-xl);
|
||
}
|
||
|
||
/* Sugerencias */
|
||
.suggestion-container {
|
||
background-color: var(--card-color) !important;
|
||
border: 2px solid #2a2a2a;
|
||
border-radius: var(--radius-xl);
|
||
}
|
||
|
||
/* Modales */
|
||
.modal-bg {
|
||
background-color: rgba(42, 42, 42, 0.8);
|
||
}
|
||
|
||
.modal {
|
||
border: 2px solid #2a2a2a;
|
||
border-radius: var(--radius-xl);
|
||
}
|
||
|
||
.modal-sidebar {
|
||
background-color: var(--card-color);
|
||
border-radius: var(--radius-xl);
|
||
}
|
||
|
||
/* Dropdowns y selects */
|
||
select,
|
||
.dropdown {
|
||
background-color: var(--select-color);
|
||
border: 1px solid #2a2a2a;
|
||
border-radius: var(--radius-xl);
|
||
color: var(--text-normal);
|
||
padding: 8px 10.1px;
|
||
}
|
||
|
||
select:hover,
|
||
.dropdown:hover,
|
||
select:focus,
|
||
.dropdown:focus {
|
||
background-color: var(--select-color);
|
||
border-color: var(--text-accent);
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* Checkbox containers */
|
||
.checkbox-container {
|
||
background-color: var(--select-color);
|
||
border-radius: var(--radius-m);
|
||
}
|
||
|
||
/* Metadata containers */
|
||
.metadata-container .metadata-add-button {
|
||
border-radius: var(--radius-xl);
|
||
background: var(--card-color);
|
||
padding: 0 16px 0 8px;
|
||
margin-top: 1em;
|
||
border: 1px solid #2a2a2a;
|
||
}
|
||
|
||
/* Vertical tab headers */
|
||
.vertical-tab-header {
|
||
background-color: var(--card-color);
|
||
border-radius: var(--radius-m);
|
||
}
|
||
|
||
/* Community items */
|
||
.community-item {
|
||
border-radius: var(--radius-xl);
|
||
border: 1px solid #2a2a2a;
|
||
}
|
||
|
||
/* Input de búsqueda */
|
||
input[type="search"] {
|
||
background-color: var(--input-color);
|
||
border-radius: var(--radius-xl);
|
||
border: 1px solid #2a2a2a;
|
||
}
|
||
|
||
/* Mantener bordes grises muy oscuros */
|
||
.workspace-leaf,
|
||
.workspace-split,
|
||
.nav-folder-title,
|
||
.nav-file-title,
|
||
.workspace-tab-header {
|
||
border-color: #2a2a2a !important;
|
||
}
|
||
}
|
||
|
||
.theme-dark {
|
||
/* Style Settings Variables - Dark Mode */
|
||
--accent-color: var(--accent-color, #cc99ff);
|
||
--h1-color: var(--h1-color, #cd919e);
|
||
--h2-color: var(--h2-color, #daa520);
|
||
--h3-color: var(--h3-color, #8fbc8f);
|
||
--italic-color: var(--italic-color, #8be3eb);
|
||
|
||
/* RGB Variables for Pseudo Mica Plugin */
|
||
--background-primary-rgb: 10, 10, 10;
|
||
--background-secondary-rgb: 18, 18, 18;
|
||
|
||
/* Colores principales - Modo Oscuro (Versión Luminosa) */
|
||
--background-primary: rgba(10, 10, 10, var(--background-opacity, 0.8));
|
||
--background-primary-alt: rgba(15, 15, 15, var(--background-opacity, 0.8));
|
||
--background-secondary: rgba(18, 18, 18, var(--background-opacity, 0.8));
|
||
--background-secondary-alt: rgba(21, 21, 21, var(--background-opacity, 0.8));
|
||
--background-accent: rgba(10, 10, 10, var(--background-opacity, 0.8));
|
||
--background-modifier-border: #404040;
|
||
--background-modifier-form-field: rgba(0, 0, 0, var(--background-opacity, 0.8));
|
||
--background-modifier-form-field-highlighted: rgba(0, 0, 0, var(--background-opacity, 0.8));
|
||
--background-modifier-box-shadow: rgba(0, 0, 0, 0.3);
|
||
--background-modifier-success: #8fbc8f;
|
||
--background-modifier-error: #cd919e;
|
||
--background-modifier-error-rgb: 205, 145, 158;
|
||
--background-modifier-error-hover: #cd919e;
|
||
--background-modifier-cover: rgba(0, 0, 0, 0.9);
|
||
|
||
/* Colores de texto - Modo Oscuro (Versión Luminosa) */
|
||
--text-normal: #ffffff;
|
||
--text-muted: #d0d0d0;
|
||
--text-faint: #a0a0a0;
|
||
--text-accent: #cc99ff;
|
||
--text-accent-hover: #cc99ff;
|
||
--text-on-accent: #000000;
|
||
--text-error: #cd919e;
|
||
--text-warning: #daa520;
|
||
--text-success: #8fbc8f;
|
||
|
||
/* Colores para títulos jerárquicos - Modo Oscuro (Versión Luminosa) */
|
||
--h1-color: #cd919e; /* Rosa vintage apagado */
|
||
--h2-color: #daa520; /* Dorado vintage */
|
||
--h3-color: #8fbc8f; /* Verde salvia vintage */
|
||
--h4-color: #5f9ea0; /* Azul cadete vintage */
|
||
--h5-color: #9370db; /* Violeta medio vintage */
|
||
--h6-color: #cd853f; /* Marrón dorado vintage */
|
||
|
||
/* Color para texto en cursiva - Modo Oscuro (Versión Luminosa) */
|
||
--italic-color: #8be3eb; /* Azul cian */
|
||
|
||
/* Folder color variables */
|
||
--color-red-rgb: 205, 145, 158;
|
||
--color-orange-rgb: 205, 133, 63;
|
||
--color-yellow-rgb: 218, 165, 32;
|
||
--color-green-rgb: 143, 188, 143;
|
||
--color-cyan-rgb: 95, 158, 160;
|
||
--color-blue-rgb: 95, 158, 160;
|
||
--color-purple-rgb: 147, 112, 219;
|
||
--color-pink-rgb: 205, 145, 158;
|
||
|
||
/* Interface element variables */
|
||
--radius-xl: calc(var(--border-radius, 8px) * 2);
|
||
--radius-l: calc(var(--border-radius, 8px) * 1.26);
|
||
--radius-m: var(--border-radius, 8px);
|
||
--radius-s: calc(var(--border-radius, 8px) * 0.5);
|
||
--card-color: rgba(0, 0, 0, var(--background-opacity, 0.8));
|
||
--select-color: rgba(0, 0, 0, var(--background-opacity, 0.8));
|
||
--input-color: rgba(10, 10, 10, var(--background-opacity, 0.8));
|
||
--table-border-color: #555555;
|
||
|
||
/* Bordes - Variaciones de grises */
|
||
--border-color: #404040;
|
||
--border-color-hover: #505050;
|
||
--border-color-focus: #707070;
|
||
--divider-color: #303030;
|
||
--divider-color-hover: #404040;
|
||
|
||
/* Colores interactivos (Versión Luminosa) */
|
||
--interactive-normal: rgba(0, 0, 0, 0.8);
|
||
--interactive-hover: rgba(32, 32, 32, 0.8);
|
||
--interactive-accent: #ffd700;
|
||
--interactive-accent-hover: #ffd700;
|
||
--interactive-success: #90ff9f;
|
||
|
||
/* Colores para callouts - Modo Oscuro */
|
||
--callout-info: #1a2332;
|
||
--callout-info-border: #64b5f6;
|
||
--callout-info-text: #90caf9;
|
||
--callout-warning: #2d2416;
|
||
--callout-warning-border: #ffb74d;
|
||
--callout-warning-text: #ffcc02;
|
||
--callout-error: #2d1b1b;
|
||
--callout-error-border: #ef5350;
|
||
--callout-error-text: #ffcdd2;
|
||
--callout-success: #1b2d1b;
|
||
--callout-success-border: #66bb6a;
|
||
--callout-success-text: #c8e6c9;
|
||
--callout-tip: #2d1b2d;
|
||
--callout-tip-border: #ba68c8;
|
||
--callout-tip-text: #e1bee7;
|
||
--callout-note: #1f1f1f;
|
||
--callout-note-border: #9e9e9e;
|
||
--callout-note-text: #e0e0e0;
|
||
|
||
/* Colores para tags - Modo Oscuro */
|
||
--tag-background: #1a2332;
|
||
--tag-text: #90caf9;
|
||
--tag-border: #42a5f5;
|
||
|
||
/* Colores para highlights - Modo Oscuro */
|
||
--highlight-yellow: #4a4a1a;
|
||
--highlight-green: #1a4a1a;
|
||
--highlight-blue: #1a1a4a;
|
||
--highlight-pink: #4a1a4a;
|
||
--highlight-purple: #3a1a4a;
|
||
|
||
/* Colores para tablas - Modo Oscuro */
|
||
--table-header-background: #1f1f1f;
|
||
--table-row-even: #151515;
|
||
--table-row-odd: #0a0a0a;
|
||
--table-border-color: #404040;
|
||
}
|
||
|
||
/* Estilos específicos para modo oscuro */
|
||
.theme-dark {
|
||
/* Pestañas del workspace */
|
||
.workspace-tab-header {
|
||
background-color: var(--card-color) !important;
|
||
border: 1px solid #555555;
|
||
border-radius: var(--radius-xl);
|
||
padding: 4px 16px;
|
||
}
|
||
|
||
/* Workspace tab containers */
|
||
.workspace
|
||
.mod-root
|
||
.workspace-tabs.mod-stacked
|
||
.workspace-tab-container
|
||
.workspace-tab-header {
|
||
border-radius: var(--radius-xl) 0 0 var(--radius-xl);
|
||
background: var(--card-color) !important;
|
||
color: var(--text-normal);
|
||
border: 1px solid #555555;
|
||
box-shadow: -24px 0px 56px rgba(85, 85, 85, 0.1);
|
||
}
|
||
|
||
.workspace-split.mod-root .view-content {
|
||
background-color: var(--background-primary);
|
||
border-radius: var(--radius-xl);
|
||
}
|
||
|
||
.view-header {
|
||
border-radius: var(--radius-xl);
|
||
margin: 0 0 8px 0;
|
||
background-color: var(--card-color);
|
||
}
|
||
|
||
/* Workspace leaf content */
|
||
.workspace-split .workspace-leaf-content:not([data-type="file-explorer"]) {
|
||
background-color: var(--card-color);
|
||
border-radius: var(--radius-xl);
|
||
border: 1px solid #555555;
|
||
}
|
||
|
||
.mod-root .workspace-tabs .workspace-leaf {
|
||
background-color: var(--card-color);
|
||
border-radius: var(--radius-xl);
|
||
padding: 8px;
|
||
border: 1px solid #555555;
|
||
}
|
||
|
||
.mod-left-split .workspace-tab-header,
|
||
.mod-right-split .workspace-tab-header {
|
||
border: 1px solid #555555;
|
||
border-radius: var(--radius-m);
|
||
background-color: var(--card-color);
|
||
}
|
||
|
||
/* Menús contextuales */
|
||
.menu,
|
||
.suggestion-container,
|
||
.modal {
|
||
background-color: var(--card-color) !important;
|
||
border: 2px solid #555555;
|
||
border-radius: var(--radius-xl);
|
||
}
|
||
|
||
/* Sugerencias */
|
||
.suggestion-container {
|
||
background-color: var(--card-color) !important;
|
||
border: 2px solid #555555;
|
||
border-radius: var(--radius-xl);
|
||
}
|
||
|
||
/* Modales */
|
||
.modal-bg {
|
||
background-color: rgba(85, 85, 85, 0.8);
|
||
}
|
||
|
||
.modal {
|
||
border: 2px solid #555555;
|
||
border-radius: var(--radius-xl);
|
||
}
|
||
|
||
.modal-sidebar {
|
||
background-color: var(--card-color);
|
||
border-radius: var(--radius-xl);
|
||
}
|
||
|
||
/* Dropdowns y selects */
|
||
select,
|
||
.dropdown {
|
||
background-color: var(--select-color);
|
||
border: 1px solid #555555;
|
||
border-radius: var(--radius-xl);
|
||
color: var(--text-normal);
|
||
padding: 8px 10.1px;
|
||
}
|
||
|
||
select:hover,
|
||
.dropdown:hover,
|
||
select:focus,
|
||
.dropdown:focus {
|
||
background-color: var(--select-color);
|
||
border-color: var(--text-accent);
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* Checkbox containers */
|
||
.checkbox-container {
|
||
background-color: var(--select-color);
|
||
border-radius: var(--radius-m);
|
||
}
|
||
|
||
/* Metadata containers */
|
||
.metadata-container .metadata-add-button {
|
||
border-radius: var(--radius-xl);
|
||
background: var(--card-color);
|
||
padding: 0 16px 0 8px;
|
||
margin-top: 1em;
|
||
border: 1px solid #555555;
|
||
}
|
||
|
||
/* Vertical tab headers */
|
||
.vertical-tab-header {
|
||
background-color: var(--card-color);
|
||
border-radius: var(--radius-m);
|
||
}
|
||
|
||
/* Community items */
|
||
.community-item {
|
||
border-radius: var(--radius-xl);
|
||
border: 1px solid #555555;
|
||
}
|
||
|
||
/* Input de búsqueda */
|
||
input[type="search"] {
|
||
background-color: var(--input-color);
|
||
border-radius: var(--radius-xl);
|
||
border: 1px solid #555555;
|
||
}
|
||
|
||
/* Mantener bordes grises */
|
||
.workspace-leaf,
|
||
.workspace-split,
|
||
.nav-folder-title,
|
||
.nav-file-title,
|
||
.workspace-tab-header {
|
||
border-color: #555555 !important;
|
||
}
|
||
}
|
||
|
||
/* Configuración global de fuente */
|
||
body {
|
||
font-family: 'EB Garamond', Georgia, serif !important;
|
||
font-size: var(--font-size, 16px);
|
||
line-height: var(--line-height, 1.6);
|
||
--font-text: 'EB Garamond', Georgia, serif;
|
||
--font-interface: 'EB Garamond', Georgia, serif;
|
||
--font-monospace: 'Courier New', monospace;
|
||
}
|
||
|
||
/* Estilos para títulos jerárquicos */
|
||
h1, .cm-header-1 {
|
||
color: var(--h1-color) !important;
|
||
font-weight: 700;
|
||
}
|
||
|
||
h2, .cm-header-2 {
|
||
color: var(--h2-color) !important;
|
||
font-weight: 600;
|
||
}
|
||
|
||
h3, .cm-header-3 {
|
||
color: var(--h3-color) !important;
|
||
font-weight: 600;
|
||
}
|
||
|
||
h4, .cm-header-4 {
|
||
color: var(--h4-color, var(--h3-color)) !important;
|
||
font-weight: 500;
|
||
}
|
||
|
||
h5, .cm-header-5 {
|
||
color: var(--h5-color, var(--h3-color)) !important;
|
||
font-weight: 500;
|
||
}
|
||
|
||
h6, .cm-header-6 {
|
||
color: var(--h6-color, var(--h3-color)) !important;
|
||
font-weight: 400;
|
||
}
|
||
|
||
/* Estilos para texto en cursiva */
|
||
em, i, .cm-em {
|
||
color: var(--italic-color) !important;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* Folder icons styles */
|
||
body:not(.folder-colors) .nav-files-container {
|
||
/* Disable folder colors when toggle is off */
|
||
& > div > .nav-folder > .tree-item-self,
|
||
& .nav-folder-children .nav-folder > .tree-item-self {
|
||
border-left: none !important;
|
||
}
|
||
|
||
& > div > .nav-folder .tree-item-children,
|
||
& .nav-folder-children .nav-folder .tree-item-children {
|
||
border-left-color: var(--background-modifier-border) !important;
|
||
}
|
||
}
|
||
|
||
.pln-folder-icons {
|
||
/* Make all folder chevrons into icons */
|
||
& .nav-files-container > div > .nav-folder .collapse-icon svg {
|
||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-folder-open'%3E%3Cpath d='m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
|
||
color: var(--text-muted);
|
||
background-color: var(--text-muted);
|
||
}
|
||
|
||
/* Collapsed folder icons */
|
||
& .nav-files-container > div > .nav-folder .collapse-icon.is-collapsed svg {
|
||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-folder'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");
|
||
color: var(--text-muted);
|
||
background-color: var(--text-muted);
|
||
}
|
||
}
|
||
|
||
/* Folder navigation styles */
|
||
/* Colorful folder borders - Nivel 1 (Carpetas principales) */
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+1) > .tree-item-self {
|
||
border-left: 3px solid #ff6b6b !important; /* Rojo coral */
|
||
}
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+1) .tree-item-children {
|
||
--nav-indentation-guide-color: #ff6b6b;
|
||
border-left-color: #ff6b6b !important;
|
||
}
|
||
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+2) > .tree-item-self {
|
||
border-left: 3px solid #4ecdc4 !important; /* Turquesa */
|
||
}
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+2) .tree-item-children {
|
||
--nav-indentation-guide-color: #4ecdc4;
|
||
border-left-color: #4ecdc4 !important;
|
||
}
|
||
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+3) > .tree-item-self {
|
||
border-left: 3px solid #45b7d1 !important; /* Azul cielo */
|
||
}
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+3) .tree-item-children {
|
||
--nav-indentation-guide-color: #45b7d1;
|
||
border-left-color: #45b7d1 !important;
|
||
}
|
||
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+4) > .tree-item-self {
|
||
border-left: 3px solid #f7b731 !important; /* Amarillo dorado */
|
||
}
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+4) .tree-item-children {
|
||
--nav-indentation-guide-color: #f7b731;
|
||
border-left-color: #f7b731 !important;
|
||
}
|
||
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+5) > .tree-item-self {
|
||
border-left: 3px solid #5f27cd !important; /* Púrpura */
|
||
}
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+5) .tree-item-children {
|
||
--nav-indentation-guide-color: #5f27cd;
|
||
border-left-color: #5f27cd !important;
|
||
}
|
||
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+6) > .tree-item-self {
|
||
border-left: 3px solid #00d2d3 !important; /* Cian brillante */
|
||
}
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+6) .tree-item-children {
|
||
--nav-indentation-guide-color: #00d2d3;
|
||
border-left-color: #00d2d3 !important;
|
||
}
|
||
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+7) > .tree-item-self {
|
||
border-left: 3px solid #ff9ff3 !important; /* Rosa claro */
|
||
}
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+7) .tree-item-children {
|
||
--nav-indentation-guide-color: #ff9ff3;
|
||
border-left-color: #ff9ff3 !important;
|
||
}
|
||
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+8) > .tree-item-self {
|
||
border-left: 3px solid #26de81 !important; /* Verde menta */
|
||
}
|
||
.nav-files-container > div > .nav-folder:nth-child(8n+8) .tree-item-children {
|
||
--nav-indentation-guide-color: #26de81;
|
||
border-left-color: #26de81 !important;
|
||
}
|
||
|
||
/* Colorful folder borders - Nivel 2 (Subcarpetas directas) */
|
||
.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+1) > .tree-item-self {
|
||
border-left: 2px solid #ff7675 !important; /* Rojo suave */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+1) .tree-item-children {
|
||
--nav-indentation-guide-color: #ff7675;
|
||
border-left-color: #ff7675 !important;
|
||
}
|
||
|
||
.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+2) > .tree-item-self {
|
||
border-left: 2px solid #74b9ff !important; /* Azul francés */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+2) .tree-item-children {
|
||
--nav-indentation-guide-color: #74b9ff;
|
||
border-left-color: #74b9ff !important;
|
||
}
|
||
|
||
.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+3) > .tree-item-self {
|
||
border-left: 2px solid #55a3ff !important; /* Azul brillante */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+3) .tree-item-children {
|
||
--nav-indentation-guide-color: #55a3ff;
|
||
border-left-color: #55a3ff !important;
|
||
}
|
||
|
||
.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+4) > .tree-item-self {
|
||
border-left: 2px solid #a29bfe !important; /* Lavanda */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+4) .tree-item-children {
|
||
--nav-indentation-guide-color: #a29bfe;
|
||
border-left-color: #a29bfe !important;
|
||
}
|
||
|
||
.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+5) > .tree-item-self {
|
||
border-left: 2px solid #fd79a8 !important; /* Rosa intenso */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+5) .tree-item-children {
|
||
--nav-indentation-guide-color: #fd79a8;
|
||
border-left-color: #fd79a8 !important;
|
||
}
|
||
|
||
.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+6) > .tree-item-self {
|
||
border-left: 2px solid #00b894 !important; /* Verde esmeralda */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+6) .tree-item-children {
|
||
--nav-indentation-guide-color: #00b894;
|
||
border-left-color: #00b894 !important;
|
||
}
|
||
|
||
.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+7) > .tree-item-self {
|
||
border-left: 2px solid #fdcb6e !important; /* Amarillo mantequilla */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+7) .tree-item-children {
|
||
--nav-indentation-guide-color: #fdcb6e;
|
||
border-left-color: #fdcb6e !important;
|
||
}
|
||
|
||
/* Colorful folder borders - Nivel 3 (Sub-subcarpetas) */
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+1) > .tree-item-self {
|
||
border-left: 2px solid #e17055 !important; /* Naranja terracota */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+1) .tree-item-children {
|
||
--nav-indentation-guide-color: #e17055;
|
||
border-left-color: #e17055 !important;
|
||
}
|
||
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+2) > .tree-item-self {
|
||
border-left: 2px solid #6c5ce7 !important; /* Púrpura brillante */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+2) .tree-item-children {
|
||
--nav-indentation-guide-color: #6c5ce7;
|
||
border-left-color: #6c5ce7 !important;
|
||
}
|
||
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+3) > .tree-item-self {
|
||
border-left: 2px solid #00cec9 !important; /* Turquesa oscuro */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+3) .tree-item-children {
|
||
--nav-indentation-guide-color: #00cec9;
|
||
border-left-color: #00cec9 !important;
|
||
}
|
||
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+4) > .tree-item-self {
|
||
border-left: 2px solid #e84393 !important; /* Rosa magenta */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+4) .tree-item-children {
|
||
--nav-indentation-guide-color: #e84393;
|
||
border-left-color: #e84393 !important;
|
||
}
|
||
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+5) > .tree-item-self {
|
||
border-left: 2px solid #2d3436 !important; /* Gris carbón */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+5) .tree-item-children {
|
||
--nav-indentation-guide-color: #2d3436;
|
||
border-left-color: #2d3436 !important;
|
||
}
|
||
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+6) > .tree-item-self {
|
||
border-left: 2px solid #fab1a0 !important; /* Melocotón */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+6) .tree-item-children {
|
||
--nav-indentation-guide-color: #fab1a0;
|
||
border-left-color: #fab1a0 !important;
|
||
}
|
||
|
||
/* Colorful folder borders - Nivel 4 (Cuarto nivel) */
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(5n+1) > .tree-item-self {
|
||
border-left: 1px solid #636e72 !important; /* Gris azulado */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(5n+1) .tree-item-children {
|
||
--nav-indentation-guide-color: #636e72;
|
||
border-left-color: #636e72 !important;
|
||
}
|
||
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(5n+2) > .tree-item-self {
|
||
border-left: 1px solid #81ecec !important; /* Cian claro */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(5n+2) .tree-item-children {
|
||
--nav-indentation-guide-color: #81ecec;
|
||
border-left-color: #81ecec !important;
|
||
}
|
||
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(5n+3) > .tree-item-self {
|
||
border-left: 1px solid #ffeaa7 !important; /* Amarillo pálido */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(5n+3) .tree-item-children {
|
||
--nav-indentation-guide-color: #ffeaa7;
|
||
border-left-color: #ffeaa7 !important;
|
||
}
|
||
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(5n+4) > .tree-item-self {
|
||
border-left: 1px solid #dda0dd !important; /* Ciruela */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(5n+4) .tree-item-children {
|
||
--nav-indentation-guide-color: #dda0dd;
|
||
border-left-color: #dda0dd !important;
|
||
}
|
||
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(5n+5) > .tree-item-self {
|
||
border-left: 1px solid #55efc4 !important; /* Verde agua */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(5n+5) .tree-item-children {
|
||
--nav-indentation-guide-color: #55efc4;
|
||
border-left-color: #55efc4 !important;
|
||
}
|
||
|
||
/* Colorful folder borders - Nivel 5+ (Niveles profundos - patrón rotativo) */
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(3n+1) > .tree-item-self {
|
||
border-left: 1px solid #b2bec3 !important; /* Gris claro */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(3n+1) .tree-item-children {
|
||
--nav-indentation-guide-color: #b2bec3;
|
||
border-left-color: #b2bec3 !important;
|
||
}
|
||
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(3n+2) > .tree-item-self {
|
||
border-left: 1px solid #fd79a8 !important; /* Rosa suave */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(3n+2) .tree-item-children {
|
||
--nav-indentation-guide-color: #fd79a8;
|
||
border-left-color: #fd79a8 !important;
|
||
}
|
||
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(3n+3) > .tree-item-self {
|
||
border-left: 1px solid #74b9ff !important; /* Azul suave */
|
||
}
|
||
.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(3n+3) .tree-item-children {
|
||
--nav-indentation-guide-color: #74b9ff;
|
||
border-left-color: #74b9ff !important;
|
||
}
|
||
|
||
/* Make items focused via arrow keys highlighted */
|
||
.nav-files-container .tree-item-self.has-focus {
|
||
background-color: rgba(var(--color-yellow-rgb), 0.4) !important;
|
||
}
|
||
|
||
/* Folder title text color for better contrast on colored backgrounds */
|
||
.nav-files-container > div > .nav-folder > .nav-folder-title {
|
||
color: var(--text-normal) !important;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* File navigation improvements */
|
||
& .nav-file-title {
|
||
color: var(--text-muted);
|
||
transition: color 0.2s ease, background-color 0.2s ease;
|
||
}
|
||
|
||
& .nav-file-title:hover {
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
& .nav-file-title.is-active {
|
||
color: var(--text-accent) !important;
|
||
background-color: rgba(var(--color-yellow-rgb), 0.5) !important;
|
||
}
|
||
}
|
||
|
||
/* Estilos específicos para modo oscuro (Versión Luminosa con Fondo Negro) */
|
||
|
||
/* Estilos específicos para modo oscuro (Versión Luminosa con Fondo Negro) */
|
||
|
||
/* Pestañas del workspace */
|
||
.theme-dark .workspace-tab-header {
|
||
background-color: var(--card-color) !important;
|
||
border: 1px solid #2a2a2a;
|
||
border-radius: var(--radius-xl);
|
||
padding: 4px 16px;
|
||
}
|
||
|
||
/* Workspace tab containers */
|
||
.theme-dark .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header {
|
||
border-radius: var(--radius-xl) 0 0 var(--radius-xl);
|
||
background: var(--card-color) !important;
|
||
color: var(--text-normal);
|
||
border: 1px solid #2a2a2a;
|
||
box-shadow: -24px 0px 56px rgba(42, 42, 42, 0.3);
|
||
}
|
||
|
||
.theme-dark .workspace-split.mod-root .view-content {
|
||
background-color: var(--background-primary);
|
||
border-radius: var(--radius-xl);
|
||
}
|
||
|
||
.theme-dark .view-header {
|
||
border-radius: var(--radius-xl);
|
||
margin: 0 0 8px 0;
|
||
background-color: var(--card-color);
|
||
}
|
||
|
||
/* Workspace leaf content */
|
||
.theme-dark .workspace-split .workspace-leaf-content:not([data-type="file-explorer"]) {
|
||
background-color: var(--card-color);
|
||
border-radius: var(--radius-xl);
|
||
border: 1px solid #2a2a2a;
|
||
}
|
||
|
||
.theme-dark .mod-root .workspace-tabs .workspace-leaf {
|
||
background-color: var(--card-color);
|
||
border-radius: var(--radius-xl);
|
||
padding: 8px;
|
||
border: 1px solid #2a2a2a;
|
||
}
|
||
|
||
.theme-dark .mod-left-split .workspace-tab-header,
|
||
.theme-dark .mod-right-split .workspace-tab-header {
|
||
border: 1px solid #2a2a2a;
|
||
border-radius: var(--radius-m);
|
||
background-color: var(--card-color);
|
||
}
|
||
|
||
/* Menús contextuales */
|
||
.theme-dark .menu,
|
||
.theme-dark .suggestion-container,
|
||
.theme-dark .modal {
|
||
background-color: var(--card-color) !important;
|
||
border: 2px solid #2a2a2a;
|
||
border-radius: var(--radius-xl);
|
||
}
|
||
|
||
/* Sugerencias */
|
||
.theme-dark .suggestion-container {
|
||
background-color: var(--card-color) !important;
|
||
border: 2px solid #2a2a2a;
|
||
border-radius: var(--radius-xl);
|
||
}
|
||
|
||
/* Modales */
|
||
.theme-dark .modal-bg {
|
||
background-color: rgba(42, 42, 42, 0.9);
|
||
}
|
||
|
||
.theme-dark .modal {
|
||
border: 2px solid #2a2a2a;
|
||
border-radius: var(--radius-xl);
|
||
}
|
||
|
||
.theme-dark .modal-sidebar {
|
||
background-color: var(--card-color);
|
||
border-radius: var(--radius-xl);
|
||
}
|
||
|
||
/* Dropdowns y selects */
|
||
.theme-dark select,
|
||
.theme-dark .dropdown {
|
||
background-color: var(--select-color);
|
||
border: 1px solid #2a2a2a;
|
||
border-radius: var(--radius-xl);
|
||
color: var(--text-normal);
|
||
padding: 8px 10.1px;
|
||
}
|
||
|
||
.theme-dark select:hover,
|
||
.theme-dark .dropdown:hover,
|
||
.theme-dark select:focus,
|
||
.theme-dark .dropdown:focus {
|
||
background-color: var(--select-color);
|
||
border-color: var(--text-accent);
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* Checkbox containers */
|
||
.theme-dark .checkbox-container {
|
||
background-color: var(--select-color);
|
||
border-radius: var(--radius-m);
|
||
}
|
||
|
||
/* Metadata containers */
|
||
.theme-dark .metadata-container .metadata-add-button {
|
||
border-radius: var(--radius-xl);
|
||
background: var(--card-color);
|
||
padding: 0 16px 0 8px;
|
||
margin-top: 1em;
|
||
border: 1px solid #2a2a2a;
|
||
}
|
||
|
||
/* Vertical tab headers */
|
||
.theme-dark .vertical-tab-header {
|
||
background-color: var(--card-color);
|
||
border-radius: var(--radius-m);
|
||
}
|
||
|
||
/* Community items */
|
||
.theme-dark .community-item {
|
||
border-radius: var(--radius-xl);
|
||
border: 1px solid #2a2a2a;
|
||
}
|
||
|
||
/* Input de búsqueda */
|
||
.theme-dark input[type="search"] {
|
||
background-color: var(--input-color);
|
||
border-radius: var(--radius-xl);
|
||
border: 1px solid #2a2a2a;
|
||
}
|
||
|
||
/* Mantener bordes grises muy oscuros */
|
||
.theme-dark .workspace-leaf,
|
||
.theme-dark .workspace-split,
|
||
.theme-dark .nav-folder-title,
|
||
.theme-dark .nav-file-title,
|
||
.theme-dark .workspace-tab-header {
|
||
border-color: #2a2a2a !important;
|
||
}
|
||
|
||
/* Tablas con bordes redondeados */
|
||
.theme-dark table {
|
||
border-radius: var(--radius-l);
|
||
border: 1px solid #2a2a2a;
|
||
background-color: var(--card-color);
|
||
box-shadow: 0 2px 8px rgba(42, 42, 42, 0.2);
|
||
}
|
||
|
||
.theme-dark th {
|
||
background-color: rgba(var(--background-secondary-rgb), 0.9);
|
||
border: 1px solid #2a2a2a;
|
||
}
|
||
|
||
.theme-dark td {
|
||
border: 1px solid #2a2a2a;
|
||
}
|
||
|
||
/* Callouts con bordes redondeados y contraste */
|
||
.theme-dark .callout {
|
||
border-radius: var(--radius-l);
|
||
border: 1px solid #2a2a2a;
|
||
background-color: rgba(var(--background-secondary-rgb), 0.7);
|
||
}
|
||
|
||
/* Botones con bordes redondeados */
|
||
.theme-dark button {
|
||
background-color: var(--card-color);
|
||
border: 1px solid #2a2a2a;
|
||
border-radius: var(--radius-xl);
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.theme-dark button:hover {
|
||
background-color: rgba(var(--background-secondary-rgb), 0.9);
|
||
border-color: var(--text-accent);
|
||
}
|
||
|
||
/* Inputs y controles de entrada */
|
||
.theme-dark input, .theme-dark textarea, .theme-dark select {
|
||
background-color: var(--input-color);
|
||
border: 1px solid #2a2a2a;
|
||
border-radius: var(--radius-xl);
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.theme-dark input:focus, .theme-dark textarea:focus, .theme-dark select:focus {
|
||
border-color: var(--text-accent);
|
||
box-shadow: 0 0 0 2px rgba(204, 153, 255, 0.3);
|
||
}
|
||
|
||
/* Elementos de búsqueda */
|
||
.theme-dark .search-input {
|
||
background-color: var(--input-color);
|
||
border: 1px solid #2a2a2a;
|
||
border-radius: var(--radius-xl);
|
||
}
|
||
|
||
.theme-dark .search-input:focus {
|
||
border-color: var(--text-accent);
|
||
box-shadow: 0 0 0 2px rgba(204, 153, 255, 0.2);
|
||
}
|
||
|
||
/* Tooltips */
|
||
.theme-dark .tooltip {
|
||
background-color: var(--card-color);
|
||
border: 1px solid #2a2a2a;
|
||
border-radius: var(--radius-m);
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
/* Blockquotes */
|
||
.theme-dark blockquote {
|
||
background-color: rgba(var(--background-secondary-rgb), 0.8);
|
||
border-left: 3px solid var(--text-accent);
|
||
border-radius: 0 var(--radius-m) var(--radius-m) 0;
|
||
}
|
||
|
||
|
||
/* Títulos y encabezados */
|
||
h1, h2, h3, h4, h5, h6 {
|
||
font-family: 'EB Garamond', Georgia, serif !important;
|
||
font-weight: 600;
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
h1 { font-size: 2.2em; }
|
||
h2 { font-size: 1.8em; }
|
||
h3 { font-size: 1.5em; }
|
||
h4 { font-size: 1.3em; }
|
||
h5 { font-size: 1.1em; }
|
||
h6 { font-size: 1em; }
|
||
|
||
/* Editor principal */
|
||
.markdown-source-view,
|
||
.markdown-preview-view {
|
||
font-family: 'EB Garamond', Georgia, serif !important;
|
||
color: var(--text-normal);
|
||
background-color: var(--background-primary);
|
||
}
|
||
|
||
/* Sidebar */
|
||
.nav-folder-title,
|
||
.nav-file-title {
|
||
font-family: 'EB Garamond', Georgia, serif !important;
|
||
color: var(--text-normal);
|
||
border-radius: 4px;
|
||
padding: 4px 8px;
|
||
border: none;
|
||
box-shadow: 0 1px 0 0 rgba(128, 128, 128, 0.3);
|
||
}
|
||
|
||
.nav-folder-title:hover,
|
||
.nav-file-title:hover {
|
||
background-color: var(--interactive-hover);
|
||
box-shadow: 0 1px 0 0 rgba(128, 128, 128, 0.5);
|
||
}
|
||
|
||
.nav-file-title.is-active {
|
||
background-color: var(--interactive-accent);
|
||
color: var(--text-on-accent);
|
||
box-shadow: 0 1px 0 0 var(--text-accent);
|
||
}
|
||
|
||
/* Pestañas */
|
||
.workspace-tab-header {
|
||
background-color: var(--background-secondary);
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.workspace-tab-header-inner {
|
||
font-family: 'EB Garamond', Georgia, serif !important;
|
||
color: var(--text-muted);
|
||
border: 1px solid transparent;
|
||
border-radius: 4px 4px 0 0;
|
||
padding: 8px 10.1px;
|
||
}
|
||
|
||
.workspace-tab-header-inner:hover {
|
||
background-color: var(--interactive-hover);
|
||
border-color: var(--border-color-hover);
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.workspace-tab-header-inner.is-active {
|
||
background-color: var(--background-primary);
|
||
border-color: var(--border-color);
|
||
border-bottom-color: var(--background-primary);
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
/* Barra de estado */
|
||
.status-bar {
|
||
background-color: var(--background-secondary);
|
||
border-top: 1px solid var(--border-color);
|
||
font-family: 'EB Garamond', Georgia, serif !important;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* Botones */
|
||
button {
|
||
font-family: 'EB Garamond', Georgia, serif !important;
|
||
background-color: var(--interactive-normal);
|
||
color: var(--text-normal);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 4px;
|
||
padding: 6px 10.1px;
|
||
transition: all 0.5s ease;
|
||
}
|
||
|
||
button:hover {
|
||
background-color: var(--interactive-hover);
|
||
border-color: var(--border-color-hover);
|
||
}
|
||
|
||
.mod-cta {
|
||
background-color: var(--interactive-accent) !important;
|
||
color: var(--text-on-accent) !important;
|
||
border-color: var(--interactive-accent) !important;
|
||
}
|
||
|
||
.mod-cta:hover {
|
||
background-color: var(--interactive-accent-hover) !important;
|
||
border-color: var(--interactive-accent-hover) !important;
|
||
}
|
||
|
||
/* Campos de entrada */
|
||
input[type="text"],
|
||
input[type="search"],
|
||
input[type="email"],
|
||
input[type="password"],
|
||
input[type="number"],
|
||
textarea {
|
||
font-family: 'EB Garamond', Georgia, serif !important;
|
||
background-color: var(--input-color);
|
||
color: var(--text-normal);
|
||
border: 0.1px solid var(--card-color);
|
||
border-radius: var(--radius-xl);
|
||
padding: 8px 10.1px;
|
||
}
|
||
|
||
input:focus,
|
||
textarea:focus {
|
||
border-color: var(--text-accent);
|
||
background-color: var(--input-color);
|
||
outline: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* Scrollbars */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: var(--background-secondary);
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: var(--border-color);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: var(--border-color-hover);
|
||
}
|
||
|
||
/* Divisores */
|
||
.workspace-split.mod-vertical > * > .workspace-leaf-resize-handle,
|
||
.workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle {
|
||
background-color: var(--divider-color);
|
||
}
|
||
|
||
.workspace-split.mod-vertical > * > .workspace-leaf-resize-handle:hover,
|
||
.workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle:hover {
|
||
background-color: var(--divider-color-hover);
|
||
}
|
||
|
||
/* Menús contextuales */
|
||
.menu {
|
||
background-color: var(--background-primary);
|
||
border: 0.1px solid var(--card-color);
|
||
border-radius: var(--radius-xl);
|
||
box-shadow: 0 4px 10.1px var(--background-modifier-box-shadow);
|
||
}
|
||
|
||
.menu-item {
|
||
font-family: 'EB Garamond', Georgia, serif !important;
|
||
color: var(--text-normal);
|
||
padding: 6px 10.1px;
|
||
}
|
||
|
||
.menu-item:hover {
|
||
background-color: var(--interactive-hover);
|
||
}
|
||
|
||
.menu-separator {
|
||
border-top: 1px solid var(--divider-color);
|
||
}
|
||
|
||
/* Código */
|
||
code {
|
||
font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
|
||
background-color: rgba(40, 44, 52, 0.8);
|
||
color: #ffffff !important;
|
||
text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
|
||
border: 1px solid rgba(100, 120, 140, 0.3);
|
||
border-radius: 8px;
|
||
padding: 4px 8px;
|
||
}
|
||
|
||
/* Bloques de código con variaciones tenues */
|
||
pre {
|
||
background-color: rgba(30, 35, 42, 0.9);
|
||
border: 1px solid rgba(120, 140, 160, 0.4);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
position: relative;
|
||
overflow-x: auto;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
pre code {
|
||
background: none;
|
||
border: none;
|
||
padding: 0;
|
||
color: #ffffff !important;
|
||
text-shadow: 0 0 3px rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
/* Bloques de código específicos por lenguaje */
|
||
.theme-dark {
|
||
/* JavaScript */
|
||
.language-javascript pre,
|
||
.language-js pre {
|
||
background-color: rgba(255, 221, 34, 0.12);
|
||
border-color: rgba(255, 255, 100, 0.6);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
/* Python */
|
||
.language-python pre,
|
||
.language-py pre {
|
||
background-color: rgba(119, 238, 255, 0.12);
|
||
border-color: rgba(150, 255, 255, 0.6);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
/* CSS */
|
||
.language-css pre {
|
||
background-color: rgba(255, 136, 187, 0.12);
|
||
border-color: rgba(255, 180, 220, 0.6);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
/* HTML */
|
||
.language-html pre {
|
||
background-color: rgba(255, 204, 119, 0.12);
|
||
border-color: rgba(255, 230, 150, 0.6);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
/* JSON */
|
||
.language-json pre {
|
||
background-color: rgba(153, 255, 170, 0.12);
|
||
border-color: rgba(180, 255, 200, 0.6);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
/* Markdown */
|
||
.language-markdown pre,
|
||
.language-md pre {
|
||
background-color: rgba(204, 153, 255, 0.12);
|
||
border-color: rgba(230, 180, 255, 0.6);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
/* Bash/Shell */
|
||
.language-bash pre,
|
||
.language-shell pre,
|
||
.language-sh pre {
|
||
background-color: rgba(85, 85, 85, 0.5);
|
||
border-color: rgba(200, 200, 200, 0.6);
|
||
border-radius: 12px;
|
||
}
|
||
}
|
||
|
||
/* Callouts */
|
||
.callout {
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
margin: 16px 0;
|
||
border-left: 4px solid;
|
||
}
|
||
|
||
.callout[data-callout="info"] {
|
||
background-color: var(--callout-info);
|
||
border-left-color: var(--callout-info-border);
|
||
color: var(--callout-info-text);
|
||
}
|
||
|
||
.callout[data-callout="warning"] {
|
||
background-color: var(--callout-warning);
|
||
border-left-color: var(--callout-warning-border);
|
||
color: var(--callout-warning-text);
|
||
}
|
||
|
||
.callout[data-callout="error"], .callout[data-callout="danger"] {
|
||
background-color: var(--callout-error);
|
||
border-left-color: var(--callout-error-border);
|
||
color: var(--callout-error-text);
|
||
}
|
||
|
||
.callout[data-callout="success"] {
|
||
background-color: var(--callout-success);
|
||
border-left-color: var(--callout-success-border);
|
||
color: var(--callout-success-text);
|
||
}
|
||
|
||
.callout[data-callout="tip"], .callout[data-callout="hint"] {
|
||
background-color: var(--callout-tip);
|
||
border-left-color: var(--callout-tip-border);
|
||
color: var(--callout-tip-text);
|
||
}
|
||
|
||
.callout[data-callout="note"], .callout[data-callout="abstract"], .callout[data-callout="summary"] {
|
||
background-color: var(--callout-note);
|
||
border-left-color: var(--callout-note-border);
|
||
color: var(--callout-note-text);
|
||
}
|
||
|
||
.callout-title {
|
||
font-weight: bold;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.callout-icon {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
/* Tags */
|
||
.tag {
|
||
background-color: var(--tag-background);
|
||
color: var(--tag-text);
|
||
border: 1px solid var(--tag-border);
|
||
border-radius: 12px;
|
||
padding: 2px 8px;
|
||
font-size: 0.85em;
|
||
display: inline-block;
|
||
margin: 2px;
|
||
}
|
||
|
||
.tag:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* Highlights */
|
||
mark, .cm-highlight {
|
||
border-radius: 3px;
|
||
padding: 1px 2px;
|
||
}
|
||
|
||
.markdown-rendered mark {
|
||
background-color: var(--highlight-yellow);
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.cm-highlight-yellow {
|
||
background-color: var(--highlight-yellow);
|
||
}
|
||
|
||
.cm-highlight-green {
|
||
background-color: var(--highlight-green);
|
||
}
|
||
|
||
.cm-highlight-blue {
|
||
background-color: var(--highlight-blue);
|
||
}
|
||
|
||
.cm-highlight-pink {
|
||
background-color: var(--highlight-pink);
|
||
}
|
||
|
||
.cm-highlight-purple {
|
||
background-color: var(--highlight-purple);
|
||
}
|
||
|
||
/* Enlaces */
|
||
a {
|
||
color: var(--text-accent);
|
||
text-decoration: none;
|
||
}
|
||
|
||
a:hover {
|
||
color: var(--text-accent-hover);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Elementos de navegación */
|
||
.nav-header {
|
||
background-color: var(--background-secondary);
|
||
border-bottom: 1px solid var(--border-color);
|
||
padding: 8px 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.nav-folder-title {
|
||
color: var(--text-normal);
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.nav-folder-title:hover {
|
||
background-color: var(--interactive-hover);
|
||
}
|
||
|
||
.nav-file-title {
|
||
color: var(--text-muted);
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
transition: color 0.2s ease, background-color 0.2s ease;
|
||
}
|
||
|
||
.nav-file-title:hover {
|
||
background-color: var(--interactive-hover);
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.nav-file-title.is-active {
|
||
background-color: var(--interactive-accent);
|
||
color: var(--text-on-accent);
|
||
}
|
||
|
||
/* Breadcrumbs */
|
||
.breadcrumb {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8px 16px;
|
||
background-color: var(--background-secondary);
|
||
border-bottom: 1px solid var(--border-color);
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.breadcrumb-item {
|
||
color: var(--text-muted);
|
||
text-decoration: none;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
transition: background-color 0.2s ease, color 0.2s ease;
|
||
}
|
||
|
||
.breadcrumb-item:hover {
|
||
background-color: var(--interactive-hover);
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
.breadcrumb-separator {
|
||
margin: 0 4px;
|
||
color: var(--text-faint);
|
||
}
|
||
|
||
/* Botones */
|
||
.mod-cta, button {
|
||
background-color: var(--interactive-accent);
|
||
color: var(--text-on-accent);
|
||
border: none;
|
||
border-radius: 6px;
|
||
padding: 8px 16px;
|
||
font-family: inherit;
|
||
font-size: 0.9em;
|
||
cursor: pointer;
|
||
transition: background-color 0.2s ease, transform 0.1s ease;
|
||
}
|
||
|
||
.mod-cta:hover, button:hover {
|
||
background-color: var(--interactive-accent-hover);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.mod-cta:active, button:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Botones secundarios */
|
||
.mod-muted {
|
||
background-color: var(--background-modifier-form-field);
|
||
color: var(--text-normal);
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
.mod-muted:hover {
|
||
background-color: var(--interactive-hover);
|
||
border-color: var(--border-color-hover);
|
||
}
|
||
|
||
/* Controles de entrada */
|
||
input, textarea, select {
|
||
background-color: var(--background-modifier-form-field);
|
||
color: var(--text-normal);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 4px;
|
||
padding: 8px 12px;
|
||
font-family: inherit;
|
||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||
}
|
||
|
||
input:focus, textarea:focus, select:focus {
|
||
outline: none;
|
||
border-color: var(--interactive-accent);
|
||
box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.5);
|
||
}
|
||
|
||
/* Checkboxes y radio buttons */
|
||
input[type="checkbox"], input[type="radio"] {
|
||
accent-color: var(--interactive-accent);
|
||
}
|
||
|
||
/* Elementos de búsqueda */
|
||
.search-input-container {
|
||
position: relative;
|
||
}
|
||
|
||
.search-input {
|
||
padding-left: 32px;
|
||
background-color: var(--background-modifier-form-field);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.search-input:focus {
|
||
border-color: var(--interactive-accent);
|
||
box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
|
||
}
|
||
|
||
.search-icon {
|
||
position: absolute;
|
||
left: 10px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--text-faint);
|
||
}
|
||
|
||
/* Estados de elementos */
|
||
.is-selected {
|
||
background-color: var(--interactive-accent) !important;
|
||
color: var(--text-on-accent) !important;
|
||
}
|
||
|
||
.is-focused {
|
||
outline: 2px solid var(--interactive-accent);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.is-disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* Tooltips */
|
||
.tooltip {
|
||
background-color: var(--background-primary-alt);
|
||
color: var(--text-normal);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 6px;
|
||
padding: 6px 10px;
|
||
font-size: 0.85em;
|
||
box-shadow: var(--background-modifier-box-shadow);
|
||
}
|
||
|
||
/* Scrollbars */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: var(--background-secondary);
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: var(--border-color);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: var(--border-color-hover);
|
||
}
|
||
|
||
/* Blockquotes */
|
||
blockquote {
|
||
border-left: 4px solid var(--text-accent);
|
||
background-color: var(--background-secondary);
|
||
margin: 16px 0;
|
||
padding: 10.1px 16px;
|
||
border-radius: 0 4px 4px 0;
|
||
}
|
||
|
||
/* Listas */
|
||
ul, ol {
|
||
padding-left: 24px;
|
||
}
|
||
|
||
li {
|
||
margin: 4px 0;
|
||
}
|
||
|
||
/* Tablas */
|
||
table {
|
||
font-family: 'EB Garamond', Georgia, serif !important;
|
||
border-collapse: separate;
|
||
border-spacing: 0;
|
||
width: 100%;
|
||
margin: 1em 0;
|
||
background-color: var(--background-primary);
|
||
border-radius: var(--radius-l);
|
||
overflow: hidden;
|
||
border: 0.1px solid var(--table-border-color);
|
||
}
|
||
|
||
th, td {
|
||
border: 1px solid var(--table-border-color);
|
||
padding: 8px 10.1px;
|
||
text-align: left;
|
||
}
|
||
|
||
th {
|
||
background-color: var(--card-color);
|
||
font-weight: 600;
|
||
color: var(--text-normal);
|
||
}
|
||
|
||
/* Callouts con bordes redondeados */
|
||
.callout {
|
||
border-radius: var(--radius-l);
|
||
border: 0.1px solid var(--table-border-color);
|
||
background-color: var(--card-color);
|
||
}
|
||
|
||
/* Botones */
|
||
button {
|
||
background-color: var(--card-color);
|
||
border: 0.1px solid var(--table-border-color);
|
||
border-radius: var(--radius-xl);
|
||
color: var(--text-normal);
|
||
padding: 8px 16px;
|
||
font-family: 'EB Garamond', Georgia, serif !important;
|
||
}
|
||
|
||
button:hover {
|
||
background-color: var(--select-color);
|
||
border-color: var(--text-accent);
|
||
}
|
||
|
||
button:active {
|
||
background-color: var(--input-color);
|
||
}
|
||
|
||
tr:nth-child(even) {
|
||
background-color: var(--background-primary-alt);
|
||
}
|
||
|
||
/* Animaciones suaves - aplicadas solo a elementos específicos */
|
||
/* Removido el selector universal (*) que causaba problemas de movimiento en el explorador de archivos */
|
||
|
||
|
||
/* === 1) Fondo y texto sólidos para code/blocks === */
|
||
.theme-dark .markdown-rendered pre,
|
||
.theme-dark .markdown-rendered pre code {
|
||
background: #0f1117 !important;
|
||
color: #e6e9ef !important;
|
||
border: 1px solid #2a2f3a !important;
|
||
text-shadow: none !important; /* quita “neblina” */
|
||
}
|
||
|
||
/* inline code (no tan pesado) */
|
||
.theme-dark .markdown-rendered code:not([class*="language-"]) {
|
||
background: #11151a !important;
|
||
color: #e6e9ef !important;
|
||
border: 1px solid #2a2f3a !important;
|
||
text-shadow: none !important;
|
||
}
|
||
|
||
/* === Estilos para Modo Claro === */
|
||
.theme-light .markdown-rendered pre,
|
||
.theme-light .markdown-rendered pre code {
|
||
background: #f8f9fa !important;
|
||
color: #212529 !important;
|
||
border: 1px solid #dee2e6 !important;
|
||
text-shadow: none !important;
|
||
}
|
||
|
||
.theme-light .markdown-rendered code:not([class*="language-"]) {
|
||
background: #f1f3f4 !important;
|
||
color: #212529 !important;
|
||
border: 1px solid #dee2e6 !important;
|
||
text-shadow: none !important;
|
||
}
|
||
|
||
/* === 2) Evitar opacidades en tokens (CM6 y Prism) === */
|
||
.cm-editor .cm-line span { opacity: 1 !important; }
|
||
.markdown-rendered code[class*="language-"] * { opacity: 1 !important; }
|
||
|
||
/* === 3) Colores de tokens (CM6 – editor) - Modo Oscuro === */
|
||
.theme-dark .cm-keyword { color: #c792ea !important; }
|
||
.theme-dark .cm-string { color: #ecc48d !important; }
|
||
.theme-dark .cm-number { color: #f78c6c !important; }
|
||
.theme-dark .cm-atom,
|
||
.theme-dark .cm-bool { color: #82aaff !important; }
|
||
.theme-dark .cm-property { color: #addb67 !important; }
|
||
.theme-dark .cm-comment { color: #5c6773 !important; }
|
||
|
||
/* === 3) Colores de tokens (CM6 – editor) - Modo Claro === */
|
||
.theme-light .cm-keyword { color: #6a1b9a !important; }
|
||
.theme-light .cm-string { color: #bf6900 !important; }
|
||
.theme-light .cm-number { color: #d84315 !important; }
|
||
.theme-light .cm-atom,
|
||
.theme-light .cm-bool { color: #1565c0 !important; }
|
||
.theme-light .cm-property { color: #2e7d32 !important; }
|
||
.theme-light .cm-comment { color: #616161 !important; }
|
||
|
||
/* === 4) Colores de tokens (Prism – preview renderizado) - Modo Oscuro === */
|
||
.theme-dark .markdown-rendered code[class*="language-"] .token.keyword { color: #c792ea !important; }
|
||
.theme-dark .markdown-rendered code[class*="language-"] .token.string { color: #ecc48d !important; }
|
||
.theme-dark .markdown-rendered code[class*="language-"] .token.number { color: #f78c6c !important; }
|
||
.theme-dark .markdown-rendered code[class*="language-"] .token.boolean { color: #82aaff !important; }
|
||
.theme-dark .markdown-rendered code[class*="language-"] .token.property { color: #addb67 !important; }
|
||
.theme-dark .markdown-rendered code[class*="language-"] .token.comment { color: #5c6773 !important; }
|
||
|
||
/* === 4) Colores de tokens (Prism – preview renderizado) - Modo Claro === */
|
||
.theme-light .markdown-rendered code[class*="language-"] .token.keyword { color: #6a1b9a !important; }
|
||
.theme-light .markdown-rendered code[class*="language-"] .token.string { color: #bf6900 !important; }
|
||
.theme-light .markdown-rendered code[class*="language-"] .token.number { color: #d84315 !important; }
|
||
.theme-light .markdown-rendered code[class*="language-"] .token.boolean { color: #1565c0 !important; }
|
||
.theme-light .markdown-rendered code[class*="language-"] .token.property { color: #2e7d32 !important; }
|
||
.theme-light .markdown-rendered code[class*="language-"] .token.comment { color: #616161 !important; }
|
||
|
||
code { background-color: #0f1117 !important; border-color: #2a2f3a !important; text-shadow: none !important; }
|
||
pre { background-color: #0f1117 !important; border-color: #2a2f3a !important; }
|
||
|
||
/* === 6) Reglas por lenguaje (aplican al code dentro de pre) === */
|
||
.markdown-rendered pre code.language-javascript { --code-bg: #1a1400; --code-bd: #665200; }
|
||
.markdown-rendered pre code.language-python { --code-bg: #001a1a; --code-bd: #0f4d4d; }
|
||
.markdown-rendered pre code.language-css { --code-bg: #1a0010; --code-bd: #661141; }
|
||
.markdown-rendered pre code.language-html { --code-bg: #1a0f00; --code-bd: #664200; }
|
||
|
||
.markdown-rendered pre {
|
||
background: var(--code-bg, #0f1117) !important;
|
||
border-color: var(--code-bd, #2a2f3a) !important;
|
||
}
|
||
|
||
|