mirror of
https://github.com/anotherlusitano/SpectrumPlus.git
synced 2026-07-22 04:10:27 +00:00
619 lines
12 KiB
CSS
619 lines
12 KiB
CSS
/**********************************/
|
|
/** Tested with Obsidian v0.10.11 */
|
|
/**********************************/
|
|
/** Author: Wiktoria Mielcarek (Braweria) */
|
|
/** Name: Spectrum */
|
|
/** Licence: MIT */
|
|
/** GitHub Repo: https://github.com/Braweria/Spectrum */
|
|
/** Version: 0.10.0 */
|
|
|
|
:root,
|
|
.theme-dark {
|
|
--default-font: 'JetBrains Mono';
|
|
--font-monospace: var(--default-font);
|
|
|
|
--light-red: #f18b74;
|
|
--internal-link: #ec7d99;
|
|
--internal-link-hover: #e2417f;
|
|
|
|
--main-node: #ffbe00;
|
|
--main-node-hover: #fe6a26;
|
|
--tags: #f19eee;
|
|
--external-link: #82d2e8;
|
|
--external-link-hidden: rgba(131, 197, 235, 0.3);
|
|
--main-background: #242424;
|
|
--secondary-background: #1b1b1b;
|
|
--background-secondary: var(--secondary-background);
|
|
--attachments: #69bceb;
|
|
}
|
|
|
|
/** Background */
|
|
.theme-dark {
|
|
--background-primary: var(--main-background);
|
|
--text-normal: #c9c9c9;
|
|
}
|
|
|
|
/** Line Height */
|
|
.cm-s-obsidian,
|
|
body {
|
|
line-height: 1.7rem;
|
|
}
|
|
|
|
/** Paragraph */
|
|
.markdown-preview-view div p {
|
|
/* text-indent: 1.5rem; */
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/** Links */
|
|
/*** Standard Link */
|
|
a {
|
|
color: var(--main-node);
|
|
}
|
|
|
|
/*** Internal */
|
|
.cm-s-obsidian span.cm-hmd-internal-link.cm-overlay {
|
|
color: var(--main-node);
|
|
font-weight: 900;
|
|
}
|
|
|
|
/*** Internal Bracket */
|
|
.cm-s-obsidian span.cm-formatting-link {
|
|
color: var(--main-node);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/*** Internal Hover */
|
|
a:hover {
|
|
color: var(--main-node-hover);
|
|
}
|
|
|
|
/*** External URL and Text Brackets */
|
|
.cm-s-obsidian span.cm-url,
|
|
.cm-s-obsidian span.cm-formatting-link.cm-link {
|
|
color: var(--external-link-hidden);
|
|
}
|
|
|
|
/*** External Brackets and Text */
|
|
.cm-s-obsidian span.cm-link,
|
|
.cm-s-obsidian span.cm-hmd-internal-link,
|
|
.cm-s-obsidian span.cm-formatting.cm-url,
|
|
.external-link {
|
|
color: var(--external-link);
|
|
}
|
|
|
|
/** Tags */
|
|
.cm-s-obsidian span.cm-hashtag,
|
|
.tag {
|
|
color: var(--tags);
|
|
}
|
|
|
|
/** ??? Can't figure it out */
|
|
.nav-folder.is-collapsed .nav-folder-title .nav-folder-title-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
/** Closed Folder for closed folders */
|
|
.nav-folder.is-collapsed .nav-folder-title .nav-folder-title-content::before {
|
|
content: '🗀';
|
|
display: inline-block;
|
|
width: 1.5rem;
|
|
}
|
|
|
|
/** Open FOlder for open folders */
|
|
.nav-folder .nav-folder-title .nav-folder-title-content::before {
|
|
content: '🗁';
|
|
display: inline-block;
|
|
width: 1.5rem;
|
|
}
|
|
|
|
/** Heading 1 - 6 */
|
|
.cm-header-1,
|
|
h1 {
|
|
color: #f5704c;
|
|
}
|
|
|
|
.cm-header-2,
|
|
h2 {
|
|
color: #f5a14c;
|
|
}
|
|
|
|
.cm-header-3,
|
|
h3 {
|
|
color: #ede482;
|
|
}
|
|
|
|
.cm-header-4,
|
|
h4 {
|
|
color: #aade62;
|
|
}
|
|
|
|
.cm-header-5,
|
|
h5 {
|
|
color: #62deac;
|
|
}
|
|
|
|
.markdown-preview-view h6,
|
|
.cm-header-6 {
|
|
color: #62b7de;
|
|
}
|
|
|
|
/** Checklist */
|
|
/*** Preview Text for Checked Item */
|
|
.markdown-preview-view ul > li.task-list-item.is-checked {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/*** Preview Checkbox */
|
|
.markdown-preview-view .task-list-item-checkbox {
|
|
-webkit-appearance: none;
|
|
box-sizing: border-box;
|
|
border: 1px solid var(--text-muted);
|
|
border-radius: 2px;
|
|
position: relative;
|
|
width: 1.3em;
|
|
height: 1.3em;
|
|
margin: 0;
|
|
outline: none;
|
|
margin-right: 4px;
|
|
margin-bottom: 2px;
|
|
cursor: pointer;
|
|
vertical-align: baseline;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
/*** Preview Checked Checkbox */
|
|
.markdown-preview-view .task-list-item-checkbox:checked::before {
|
|
content: '✔';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
width: 150%;
|
|
height: 160%;
|
|
line-height: 0;
|
|
font-size: 1.5rem;
|
|
color: var(--main-node);
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/** Strong/Bold */
|
|
.cm-s-obsidian .cm-strong,
|
|
strong {
|
|
color: rgb(87, 226, 141);
|
|
font-weight: 900;
|
|
}
|
|
|
|
/** Highlight > Strong/Bold */
|
|
mark .cm-s-obsidian .cm-strong,
|
|
mark strong {
|
|
color: var(--background-primary);
|
|
color: rgb(61, 7, 49);
|
|
/* color: rgb(29, 53, 14); */
|
|
font-weight: 900;
|
|
}
|
|
|
|
/** Emphasis/Italic */
|
|
.cm-em,
|
|
em {
|
|
color: rgb(241, 236, 165);
|
|
}
|
|
|
|
/** Highlight > Emphasis/Italic */
|
|
mark .cm-em,
|
|
mark em {
|
|
color: rgb(138, 19, 112);
|
|
}
|
|
|
|
/** Table */
|
|
/*** Table Width */
|
|
table {
|
|
width: 100%;
|
|
}
|
|
|
|
/*** Head Row */
|
|
table thead tr {
|
|
background: #00000034;
|
|
}
|
|
|
|
/*** Body Row Even */
|
|
table tbody tr:nth-child(even) {
|
|
background: #00000034;
|
|
}
|
|
|
|
/*** Body Row Hover */
|
|
table tbody tr:hover {
|
|
background: #afafaf10;
|
|
}
|
|
|
|
/** Highlight */
|
|
.cm-s-obsidian span.cm-formatting-highlight,
|
|
.cm-s-obsidian span.cm-highlight,
|
|
.markdown-preview-view mark {
|
|
background: rgb(230, 114, 204);
|
|
background: rgb(245, 161, 227);
|
|
color: var(--background-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.markdown-preview-view mark {
|
|
padding: 0 0.5rem;
|
|
}
|
|
|
|
/*! Makes the Navbar Flexible, so it doesn't hide items */
|
|
.nav-buttons-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/** Blockquote */
|
|
.markdown-preview-view blockquote {
|
|
border-color: rgb(143, 96, 230);
|
|
border-width: 1px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/** Query Match */
|
|
.search-result-file-matched-text {
|
|
background: rgb(212, 69, 33);
|
|
}
|
|
|
|
.tree-item-self .tree-item-inner .search-result-file-matched-text {
|
|
background: none;
|
|
}
|
|
|
|
.internal-query .internal-query-header {
|
|
background: #00000034;
|
|
}
|
|
|
|
.internal-query
|
|
.search-results-children
|
|
.tree-item.search-result:nth-child(odd) {
|
|
background: #00000034;
|
|
}
|
|
|
|
/** Text Width */
|
|
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer,
|
|
.markdown-source-view.is-readable-line-width .CodeMirror {
|
|
max-width: 750px;
|
|
}
|
|
|
|
/** GRAPH */
|
|
/*** Background */
|
|
.view-content iframe {
|
|
background: var(--secondary-background);
|
|
}
|
|
|
|
/*** Main Nodes */
|
|
.graph-view.color-fill {
|
|
color: var(--main-node);
|
|
}
|
|
|
|
/*** Unresolved Nodes */
|
|
.theme-dark .graph-view.color-fill-unresolved {
|
|
color: var(--main-node);
|
|
opacity: 0.5;
|
|
}
|
|
*
|
|
|
|
/*** Tags */
|
|
.theme-dark .graph-view.color-fill-tag {
|
|
color: var(--tags);
|
|
}
|
|
|
|
/*** Attachments */
|
|
.theme-dark .graph-view.color-fill-attachment {
|
|
color: var(--attachments);
|
|
}
|
|
|
|
/*** Connection Line */
|
|
.graph-view.color-line {
|
|
color: #676767;
|
|
}
|
|
|
|
/*** Hover Effect */
|
|
.graph-view.color-line-highlight,
|
|
.graph-view.color-fill-highlight {
|
|
color: #fe6a26;
|
|
}
|
|
|
|
/** List */
|
|
/*** List inside List */
|
|
.cm-hmd-list-indent .cm-tab,
|
|
ul ul {
|
|
position: relative;
|
|
}
|
|
|
|
/*** Border Before List inside List */
|
|
.cm-hmd-list-indent .cm-tab::before,
|
|
ul ul::before {
|
|
content: '';
|
|
border-left: 1px solid var(--main-node);
|
|
/* border-left: 1px solid white; */
|
|
position: absolute;
|
|
left: -15px;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
/*** List Item */
|
|
ul li {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/*** List Item Marker */
|
|
ul li::marker {
|
|
color: white;
|
|
}
|
|
|
|
/** Scrollbars */
|
|
::-webkit-scrollbar {
|
|
width: 2px;
|
|
background-color: var(--main-background);
|
|
}
|
|
|
|
/** Attachment Tags */
|
|
.nav-file-tag {
|
|
background: none;
|
|
border: 1px solid var(--attachments);
|
|
color: var(--attachments);
|
|
font-weight: 400;
|
|
}
|
|
|
|
/** Footnote */
|
|
/*** Back Reference */
|
|
.footnote-backref {
|
|
color: var(--main-node);
|
|
}
|
|
|
|
/*** Back Reference Hover */
|
|
.footnote-backref:hover {
|
|
color: var(--main-node-hover);
|
|
}
|
|
|
|
/*** Footnote List Marker */
|
|
.footnotes li::marker {
|
|
color: var(--main-node);
|
|
}
|
|
|
|
/*** Footnote Reference */
|
|
.footnote-ref {
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
/** Workspace Note Active */
|
|
.workspace-leaf.mod-active .view-header {
|
|
border-bottom: 2px solid var(--main-node);
|
|
}
|
|
|
|
/** Codeblock */
|
|
/*** Markdown Block Background/Border Colour */
|
|
.cm-s-obsidian div.HyperMD-codeblock-begin-bg,
|
|
.cm-s-obsidian div.HyperMD-codeblock-end-bg,
|
|
.cm-s-obsidian div.HyperMD-codeblock-bg,
|
|
.cm-s-obsidian span.cm-inline-code {
|
|
background: var(--secondary-background);
|
|
border-color: black;
|
|
}
|
|
|
|
/*** First Markdown Code Line */
|
|
.cm-s-obsidian pre.HyperMD-codeblock-begin {
|
|
padding-top: 0.5rem;
|
|
}
|
|
|
|
/*** Last Markdown Code Line */
|
|
.cm-s-obsidian div.HyperMD-codeblock-end-bg {
|
|
border-bottom: 1px solid black;
|
|
}
|
|
|
|
/*** Markdown Code Font Colour */
|
|
.cm-s-obsidian pre.HyperMD-codeblock,
|
|
.cm-s-obsidian span.cm-inline-code {
|
|
color: #928b78;
|
|
}
|
|
|
|
/*** Preview Single Code Font Colour */
|
|
.markdown-preview-view code {
|
|
color: #c1b594;
|
|
}
|
|
|
|
/*** Preview Codeblock */
|
|
.theme-dark pre[class*='language-'] {
|
|
background: var(--secondary-background);
|
|
border: 1px solid black;
|
|
}
|
|
|
|
/*** Preview Codeblock After */
|
|
.theme-dark pre[class*='language-']::after {
|
|
content: attr(class);
|
|
position: absolute;
|
|
right: 1rem;
|
|
bottom: 0.5rem;
|
|
}
|
|
|
|
/** Handle Bar */
|
|
.workspace-split.mod-left-split > .workspace-leaf-resize-handle,
|
|
.workspace-split.mod-right-split > .workspace-leaf-resize-handle {
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
.workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle {
|
|
background: var(--main-background);
|
|
}
|
|
|
|
.workspace-split.mod-left-split > .workspace-leaf-resize-handle:hover,
|
|
.workspace-split.mod-right-split > .workspace-leaf-resize-handle:hover,
|
|
.workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle:hover {
|
|
background: var(--main-node);
|
|
}
|
|
|
|
/** Workspace Ribbon Left && Right */
|
|
.workspace-ribbon.mod-left.is-collapsed,
|
|
.workspace-ribbon.mod-right.is-collapsed {
|
|
border: 0;
|
|
}
|
|
|
|
.workspace-ribbon-collapse-btn {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/** Workspace Note Header */
|
|
.workspace-split.mod-root
|
|
> .workspace-leaf:last-of-type
|
|
.workspace-leaf-content,
|
|
.workspace-split.mod-root
|
|
> .workspace-leaf:first-of-type
|
|
.workspace-leaf-content {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.workspace-split.mod-right-split .workspace-tabs .workspace-leaf {
|
|
border-radius: 0;
|
|
}
|
|
|
|
/** Note Header */
|
|
.workspace-split.mod-root
|
|
> .workspace-leaf:first-of-type:last-of-type
|
|
.view-header,
|
|
.view-header {
|
|
border-bottom: 0px;
|
|
}
|
|
|
|
/** Workspace Bars */
|
|
/*** Ribbon */
|
|
.workspace-ribbon {
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
.workspace-ribbon.mod-left {
|
|
display: flex;
|
|
}
|
|
|
|
.workspace-ribbon.mod-left .side-dock-actions {
|
|
order: 1;
|
|
}
|
|
|
|
.workspace-ribbon.mod-left .workspace-ribbon-collapse-btn {
|
|
order: 2;
|
|
}
|
|
|
|
.workspace-ribbon.mod-left .side-dock-settings {
|
|
order: 3;
|
|
}
|
|
|
|
/*** Header */
|
|
.workspace-tab-header-container,
|
|
.workspace-tab-container-before.is-before-active,
|
|
.workspace-tab-container-after.is-after-active,
|
|
.workspace-tab-header.is-before-active,
|
|
.workspace-tab-header.is-after-active,
|
|
.workspace-tab-container-before.is-before-active .workspace-tab-header-inner,
|
|
.workspace-tab-container-after.is-after-active .workspace-tab-header-inner,
|
|
.workspace-tab-header.is-before-active .workspace-tab-header-inner,
|
|
.workspace-tab-header.is-after-active .workspace-tab-header-inner {
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
.workspace-tab-header-container {
|
|
padding-top: 10px;
|
|
height: auto;
|
|
}
|
|
|
|
.workspace-tab-header.is-active
|
|
.workspace-tab-header-inner
|
|
.workspace-tab-header-inner-icon
|
|
svg
|
|
path {
|
|
stroke: var(--main-node);
|
|
}
|
|
|
|
.workspace-split.mod-left-split .workspace-tabs .workspace-leaf {
|
|
border-top-left-radius: 0;
|
|
}
|
|
|
|
.nav-action-button.is-active,
|
|
.nav-action-button.is-active .widget-icon {
|
|
background-color: var(--main-node);
|
|
color: var(--background-secondary);
|
|
fill: var(--background-secondary);
|
|
}
|
|
|
|
.nav-action-button.is-active:hover {
|
|
color: var(--secondary-background);
|
|
background: var(--main-node-hover);
|
|
}
|
|
|
|
.nav-action-button:hover,
|
|
.nav-action-button:hover .widget-icon {
|
|
color: var(--main-node-hover);
|
|
fill: var(--main-node-hover);
|
|
}
|
|
|
|
/** Mermaid */
|
|
.mermaid {
|
|
display: flex;
|
|
width: calc(100% + 900px);
|
|
justify-content: center;
|
|
position: relative;
|
|
left: -50%;
|
|
}
|
|
|
|
.nodes {
|
|
transform: translate(0px, 10px);
|
|
}
|
|
|
|
/** Embed Notes */
|
|
.internal-embed.is-loaded {
|
|
border: 1px solid black;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.internal-embed.is-loaded .markdown-embed {
|
|
border: 0px solid black;
|
|
}
|
|
|
|
/** Text Cursor Indicator */
|
|
.CodeMirror-cursor,
|
|
.CodeMirror div.CodeMirror-secondarycursor {
|
|
border-color: var(--main-node);
|
|
}
|
|
|
|
/** CodeMirror Code */
|
|
.cm-s-obsidian .CodeMirror-code {
|
|
padding-right: 0;
|
|
}
|
|
|
|
/** Vault launch progress bar*/
|
|
.progress-bar-subline {
|
|
position: absolute;
|
|
background-color: var(--main-node);
|
|
height: 8px;
|
|
}
|
|
|
|
.progress-bar-line {
|
|
position: absolute;
|
|
opacity: 0.4;
|
|
background-color: #ffbf007c;
|
|
width: 150%;
|
|
height: 8px;
|
|
}
|
|
|
|
/*******************/
|
|
/*******************/
|
|
/*******************/
|
|
|
|
/** Day Planner */
|
|
/*** Progress Bar */
|
|
.day-planner .day-planner-progress-bar {
|
|
background: var(--secondary-background);
|
|
background: #cfcfcf;
|
|
}
|