I hope you can help me to improve the gradient theme. Thank you

Share & showcase
1

.cm-s-obsidian div:not(.CodeMirror-activeline) > pre.CodeMirror-line,
.cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-link,
.cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hmd-internal-link,
.cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-url,
.cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hmd-escape-backslash,
.cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-inline-code,
.cm-s-obsidian div:not(.CodeMirror-activeline) > pre.CodeMirror-line.HyperMD-codeblock,
.cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag,
.cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-builtin,
.cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hr,
.cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-footref,
.cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line pre.HyperMD-footnote span.cm-hmd-footnote,
.cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-highlight,
.cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-highlight,
.cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-list,
.cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-task,
.cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-quote,
.cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-math,
.cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.hmd-fold-math-placeholder {
filter: saturate(1.0);
color: rgb(147,112,219);
opacity: 0.2;
transition: opacity 60s ease-in-out;
}
.cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-highlight,
.cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-highlight {
background-color: transparent;
}
.CodeMirror-activeline {
opacity:1;
color: rgb(255,215,0);
}

.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, ::-webkit-scrollbar {
width: 6px;
height: 6px;
}

.view-header:not(:hover) .view-actions {
opacity: 0.2;
transition: opacity 3s ease-in-out;
}

/* auto fades status bar items */
.status-bar:not(:hover) .status-bar-item {
opacity: 0.2;
transition: opacity 3s ease-in-out;
color: rgb(147,112,219);
}
.status-bar-item {
opacity: 1;
transition: opacity 0.01s ease-in-out;
color: rgb(255,215,0);
}

/* Make subtler folding gutter arrows */
.CodeMirror-foldgutter-folded:after, .CodeMirror-foldgutter-open:after {
font-size: 60%;
opacity: 0.2;
transition: opacity 30s ease-in-out;
}
.CodeMirror-foldgutter-folded:hover:after, .CodeMirror-foldgutter-open:hover:after {
opacity: 1;
font-size: 100%;
transition: opacity 0.01s ease-in-out;
}
.CodeMirror-foldgutter-folded:after {
content: “\➤”;
color: rgb(0,255,255);
}
.CodeMirror-foldgutter-open:after {
content: “\:heart:”;
color: rgb(255,0,0);
}

.markdown-preview-view img {
display: block;
margin-top: 20pt;
margin-bottom: 20pt;
margin-left: auto;
margin-right: auto;
width: 50%; /* experiment with values /
transition:transform 0.3s ease;
position:relative;
z-index:9999;
}
.markdown-preview-view img:hover {
-webkit-transform:scale(2); / experiment with values */
transform:scale(2);
}
.markdown-preview-view hr {
margin-block-start: 4em;
margin-block-end: 4em;
border: none;
height: 1px;

background-image: linear-gradient(to right, var(–background-primary), var(–text-accent), var(–background-primary));
}
.markdown-preview-view hr::after {
content: ‘§’;
display: inline-block;
position: absolute;
left: 50%;
transform: translate(-50%, -50%) rotate(60deg);
transform-origin: 50% 50%;
padding: 0.5rem;
color: rgb(147,112,219);
background-color: var(–background-primary);
}

/* CHECKBOX: Green / Red color /
.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;
background-color: #DC143C;
}
.markdown-preview-view .task-list-item-checkbox:checked {
background-color: #7CFC00;
}
/ for editor /
.cm-quote {
color: var(–text-normal) !important;
}
/ for preview /
.markdown-preview-view blockquote {
background-color: #d3d3d3; / PB changed it from #1A1B24 /
border: 0px solid;
border-color: red !important; / PB changed from ? to red /
border-left-width: 5px !important; / PB changed it from 1px /
border-radius: 0 8px 8px 0;
font-family: ; / PB deleted merriwether, georgia, serif /
color: black;
font-size: 15px; / PB changed it from 1.15em /
line-height: 1.5em;
margin: 0 10px;
padding-top: 2px; / added by PB for centering vertically - Baskerville font /
padding-bottom: 13px; / added by PB for centering vertically - Baskerville font */
}

/* Vertical centering of text in blockquote /
blockquote {
display: flex;
flex-direction: column;
justify-content: center;
}
/ As per Obsidianite /
.markdown-preview-view blockquote {
position: relative;
padding: 1rem 3rem 1rem 3rem;
color: white; / #bdbdbd /
line-height: 1.5em;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
margin-bottom: 2em;
border-left: 4px rgba(31, 178, 129, 0.9) solid;
border-top: transparent;
border-bottom: transparent;
background: linear-gradient(135deg, var(–base4), var(–base3));
border-right: transparent;
display: inline-block;
margin-right: 0 !important;
}
.markdown-preview-view blockquote::before {
content: ‘’;
position: absolute;
top: 0;
left: 0px;
height: 2px;
width: 60%;
background: linear-gradient(90deg, rgba(31, 178, 129, 0.9), var(–base3));
}
.markdown-preview-view blockquote::after {
content: ‘’;
position: absolute;
bottom: 0;
left: 0px;
height: 2px;
width: 25%;
background: linear-gradient(90deg, rgba(31, 178, 129, 0.9), var(–base3));
}
.markdown-preview-view blockquote p {
position: relative;
}
.markdown-preview-view blockquote p:first-of-type::before {
content: ‘“’;
font: 14px/15px italic Times, serif; / PB changed from italic /
font-weight: 100;
font-size: 3em; / PB changed from 18px /
color: var(–base2); / PB changed from var(–text-accent) */
position: absolute;
top: 0.1rem;
left: -4rem;
}

/=== From Obsdn-Dark-Rmx: line nos. smaller and less bright ===/
/== Section name in O-D-R: codemirror line numbers gutter edit mode ====/
.cm-s-obsidian .CodeMirror-linenumber {
opacity: 1;
transition: opacity 30s ease-in-out;
color: rgb(147,112,219);
font-size: 14px;
font-family: Consolas,monospace;
}
.CodeMirror-gutter-elt {
position: absolute;
cursor: default;
z-index: 4;
}
.CodeMirror-linenumber {
padding: 0 3px 0 0px;
min-width: 20px;
text-align: right;
white-space: nowrap;
}

/* Change the colour or the font-weight of the note title in a pane /
.view-header-title {
color: rgb(147,112,219);
}
/ Change color of note title active pane - Obsidianite */
.workspace-leaf.mod-active .view-header-title {
color: rgb(255,215,0);
}

/* Change icon above vert. note title on title spine - from Obsidianite /
.view-header-icon {
color: rgb(147,112,219);
/ PB changed from var(–text-accent) /
}
/ Change icon above vert. active pane - from Obsidianite /
.workspace-leaf.mod-active .view-header-icon {
color: rgb(255,215,0);
/ PB changed from var(–text-accent) */
}

/* connecting lines outliner /
.outline .collapsible-item-children {
margin-left: 30px;
border-left: 1px solid var(–text-muted);
border-left-color: rgb(147,112,219);
border-radius: 1px;
transition:all 0.5s ease-in-out;
}
.outline .collapsible-item-children:hover {
border-left-color: rgb(255,215,0);
}
/ change font color outline /
div.collapsible-item-inner {
color: rgb(147,112,219);
}
/ change font color outline /
div.collapsible-item-inner:hover {
color: rgb(255,215,0);
}
/ indent wrapped titles outliner*/
.outline .collapsible-item-inner {
margin-left: 10px;
text-indent: -10px;
}

/* Ribbons /
/ collapse buttons: change color */
.workspace-ribbon-collapse-btn {
color: rgb(147,112,219);
}
.workspace-ribbon-collapse-btn:hover {
color: rgb(255,215,0);
}

/* on left change background color */
.workspace-ribbon.mod-left {
border-color: transparent;
width: 30px;
background: var(–base3);
}

/* on left icons: change color */
.side-dock-ribbon-tab, .side-dock-ribbon-action {
color: rgb(147,112,219);
}
.side-dock-ribbon-tab, .side-dock-ribbon-action:hover {
color: rgb(255,215,0);
text-align: center;
}

/* on right change background color */
.workspace-ribbon.mod-right {
border-color: transparent;
width: 30px;
background: var(–base3);
}

.markdown-embed
{
font-size: 13px; /* bigger text to make up for the downscaling */
text-align: justify;
padding-left: 15px !important;
padding-right: 15px !important;
box-shadow: 0px 0px 8px 2px rgba(77,60,166);
}

.markdown-embed-title { display:none; }

@charset “UTF-8”;
:root {
–default-font: “Inter”, sans-serif;
–font-monospace: “Jetbrains Mono”, monospace;
–font-editor-size: 11pt;
–font-editor-linenumbers-size: medium;
–font-h1-preview-size: 2em;
–font-h2-preview-size: 1.5em;
–font-h3-preview-size: 1.25;
–font-h4-preview-size: 1em;
–font-h5-preview-size: 0.875em;
–font-h6-preview-size: 0.85em;
–font-math-preview-size: 18px;
–font-tag-preview-size: 9pt;
–font-hover-preview-size: 0.9em;
–font-prompts-size: 14px;
–font-todoist-title-size: 1em;
–font-todoist-metadata-size: small;
}

1 Like