170 lines
4.5 KiB
CSS
170 lines
4.5 KiB
CSS
/* OVERRIDE CHRONOS DEAFULT SETTINGS FOR OBSIDIAN */
|
|
/* Chronos theme variables mapped to Obsidian theme vars */
|
|
.chronos-timeline-container {
|
|
/* neutrals / misc */
|
|
--chronos-semi-gray: hsla(0, 0%, 50%, 0.4);
|
|
--chronos-opacity: 0.2;
|
|
|
|
/* backgrounds & surfaces */
|
|
--chronos-bg-primary: var(--background-primary);
|
|
--chronos-bg-secondary: var(--background-secondary);
|
|
|
|
/* text */
|
|
--chronos-text-normal: var(--text-normal);
|
|
--chronos-text-muted: var(--text-muted);
|
|
--chronos-text-on-accent: var(--text-on-accent);
|
|
--chronos-bg-text: var(--text-on-primary);
|
|
|
|
/* accent / interactive */
|
|
--chronos-accent: var(--interactive-accent);
|
|
--chronos-accent-hover: var(--interactive-accent-hover);
|
|
--chronos-accent-alpha: hsl(
|
|
var(--accent-h) var(--accent-s) var(--accent-l) / 0.2
|
|
);
|
|
--chronos-interactive: var(--interactive-accent);
|
|
--chronos-interactive-hover: var(--interactive-accent-hover);
|
|
|
|
/* borders / focus */
|
|
--chronos-border: var(--text-muted);
|
|
--chronos-border-active: rgba(3, 102, 214, 0.5);
|
|
|
|
/* radius / icons */
|
|
--chronos-radius: 6px;
|
|
--chronos-radius-small: 3px;
|
|
--chronos-icon-color: var(--text-muted);
|
|
|
|
/* palette */
|
|
--chronos-color-red: var(--color-red);
|
|
--chronos-color-red-rgb: var(--color-red-rgb);
|
|
|
|
--chronos-color-green: var(--color-green);
|
|
--chronos-color-green-rgb: var(--color-green-rgb);
|
|
|
|
--chronos-color-blue: var(--color-blue);
|
|
--chronos-color-blue-rgb: var(--color-blue-rgb);
|
|
|
|
--chronos-color-yellow: var(--color-yellow);
|
|
--chronos-color-yellow-rgb: var(--color-yellow-rgb);
|
|
|
|
--chronos-color-orange: var(--color-orange);
|
|
--chronos-color-orange-rgb: var(--color-orange-rgb);
|
|
|
|
--chronos-color-purple: var(--color-purple);
|
|
--chronos-color-purple-rgb: var(--color-purple-rgb);
|
|
|
|
--chronos-color-pink: var(--color-pink);
|
|
--chronos-color-pink-rgb: var(--color-pink-rgb);
|
|
|
|
--chronos-color-cyan: var(--color-cyan);
|
|
--chronos-color-cyan-rgb: var(--color-cyan-rgb);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="chronos-timeline"] .view-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.chronos-error-message-container {
|
|
padding: 1rem 1.5rem;
|
|
}
|
|
|
|
.chronos-timeline-container .vis-timeline {
|
|
border: 2px solid transparent !important;
|
|
border-radius: 0 !important;
|
|
cursor: default;
|
|
}
|
|
|
|
.chronos-timeline-container .vis-timeline.vis-active {
|
|
border-color: hsla(var(--color-accent-hsl), 0.5) !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.chronos-timeline-container .vis-label {
|
|
color: var(--text-muted) !important;
|
|
}
|
|
|
|
.chronos-timeline-container .vis-custom-time,
|
|
.chronos-timeline-container .vis-custom-time-marker {
|
|
color: var(--color-base-00) !important;
|
|
background-color: var(--color-base-70) !important;
|
|
}
|
|
|
|
.chronos-timeline-container .vis-item.vis-background {
|
|
background-color: hsla(var(--color-accent-hsl), 0.2);
|
|
color: var(--text-on-primary);
|
|
}
|
|
|
|
.chronos-timeline-container .vis-item {
|
|
border-radius: var(--radius-s) !important;
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.chronos-timeline-container .vis-time-axis .vis-grid.vis-minor {
|
|
border-color: var(--chronos-semi-gray) !important;
|
|
}
|
|
|
|
.chronos-timeline-container .vis-minor {
|
|
color: var(--text-muted) !important;
|
|
}
|
|
|
|
.chronos-timeline-container .vis-major {
|
|
color: var(--text-muted) !important;
|
|
}
|
|
|
|
/* Link styles*/
|
|
.chronos-timeline-container .is-link {
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
.chronos-timeline-container .is-link .vis-item-content {
|
|
text-transform: none !important;
|
|
text-decoration: underline !important;
|
|
text-decoration-line: underline !important;
|
|
text-decoration-style: solid !important;
|
|
text-decoration-color: currentColor !important;
|
|
text-underline-offset: 5px !important;
|
|
}
|
|
|
|
.chronos-timeline-container .vis-item-content {
|
|
text-decoration: inherit !important;
|
|
}
|
|
|
|
.chronos-timeline-container .vis-dot,
|
|
.chronos-timeline-container .vis-line {
|
|
background-color: var(--interactive-accent) !important;
|
|
color: var(--interactive-accent) !important;
|
|
}
|
|
|
|
/* Ensure code editor button is always on top and easy to find with pointer,
|
|
in chronos blocks only as to not interfer with normal Obsidian behavior
|
|
*/
|
|
.block-language-chronos ~ .edit-block-button {
|
|
z-index: 999;
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
.vis-custom-time[title]::after {
|
|
content: attr(title);
|
|
display: none;
|
|
}
|
|
|
|
.chronos-setting-header {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.chronos-settings-md-container {
|
|
min-height: 250px;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
border: 1px solid var(--interactive-border-color);
|
|
background-color: var(--color-base-20);
|
|
border-radius: 5px;
|
|
font-family: var(--font-monospace), "Source Code Pro", "Courier New",
|
|
monospace;
|
|
}
|
|
|
|
.ai-setting.is-disabled {
|
|
display: none;
|
|
}
|