575 lines
17 KiB
CSS
575 lines
17 KiB
CSS
@charset "UTF-8";
|
|
|
|
/** -----------------------------------------------------------------------
|
|
_____ _ _ _ _ _ _ _ _
|
|
/ ____| | | | (_) | \ | (_) | | | |
|
|
| (___ _ __ __ _ _ __| | _| |_ _ __ __ _ | \| |_ __ _| |__ | |_
|
|
\___ \| '_ \ / _` | '__| |/ / | | '_ \ / _` | | . ` | |/ _` | '_ \| __|
|
|
____) | |_) | (_| | | | <| | | | | | (_| | | |\ | | (_| | | | | |_
|
|
|_____/| .__/ \__,_|_| |_|\_\_|_|_| |_|\__, | |_| \_|_|\__, |_| |_|\__|
|
|
| | __/ | __/ |
|
|
|_| |___/ |___/
|
|
|
|
—— Version 1.0.0
|
|
—— Made by Isax785
|
|
Changelog here:
|
|
------------------------------------------------------------------------- */
|
|
|
|
/* :root {
|
|
--default-font: Calibri;
|
|
--h1-font: Times;
|
|
--font-monospace: Courier;
|
|
--code-mono-font: 'OperatorMonoSSmLig-Book';;
|
|
} */
|
|
|
|
:root {
|
|
--white: #FCFCFC;
|
|
/* --raisin-black: #1b1825; */
|
|
--raisin-black: #16141f;
|
|
--rich-black: #121019;
|
|
--dark-purple: #242032;
|
|
--dark-purple-light: #413a58;
|
|
--bright-green: #5AFF15;
|
|
--tropical-indigo: #8B80F9;
|
|
--tropical-indigo-light: #A69EFA;
|
|
--robin-egg-blue: #19D8D5;
|
|
--cool-gray: #7C809B;
|
|
--french-gray : #D1D2DC; /*cool gray light*/
|
|
--white-smoke: #F5F5F5;
|
|
--ylmn-blue: #375BA9;
|
|
--mint: #13C4A3;
|
|
--anti-flash-white: #EBEBEB;
|
|
--folly: #FF3366;
|
|
--gold: rgb(253, 233, 9);
|
|
--line-width: 750px;
|
|
}
|
|
|
|
.theme-dark, .theme-light {
|
|
--file-line-width: var(--line-width);
|
|
/* Line color */
|
|
--tab-divider-color: var(--dark-purple-light);
|
|
--tab-outline-color: var(--dark-purple-light);
|
|
--divider-color: var(--dark-purple-light);
|
|
/* Background */
|
|
--background-primary: var(--rich-black);
|
|
--background-secondary: var(--raisin-black);
|
|
--background-secondary-alt: var(--raisin-black);
|
|
--background-code: var(--grey);
|
|
|
|
/* Text */
|
|
--text-normal: var(--white);
|
|
--text-accent: var(--bright-green);
|
|
--text-selection: var(--tropical-indigo-light);
|
|
|
|
--text-header: var(--tropical-indigo);
|
|
|
|
--h1-color: var(--tropical-indigo);
|
|
--h1-gradient-start: transparent;
|
|
--h1-gradient-mid: var(--tropical-indigo);
|
|
--h1-gradient-end: transparent;
|
|
|
|
--h2-color: var(--tropical-indigo);
|
|
--h2-gradient-start: var(--tropical-indigo);
|
|
--h2-gradient-end: transparent;
|
|
|
|
--h3-color: var(--tropical-indigo);
|
|
--h4-color: var(--tropical-indigo);
|
|
--h5-color: var(--tropical-indigo);
|
|
--h6-color: var(--tropical-indigo);
|
|
|
|
/* bar */
|
|
--bar-gradient-start: transparent;
|
|
--bar-gradient-mid: var(--bright-green);
|
|
--bar-gradient-end: transparent;
|
|
|
|
/* bold, Italic, Underline */
|
|
|
|
--strong: var(--robin-egg-blue);
|
|
/* --italic: var(--robin-egg-blue); */
|
|
--underline-text-color: var(--white);
|
|
--underline-line-color: var(--bright-green);
|
|
--underline-line-thickness: 0.15em;
|
|
|
|
/* Code */
|
|
--codeblock-background: var(--dark-purple);
|
|
--codeblock-color: var(--white);
|
|
--inline-code-background: var(--dark-purple);
|
|
--inline-code-color: var(--bright-green);
|
|
--code-variable-color: var(--white);
|
|
--code-function-color: var(--bright-green);
|
|
--code-builtin-color: var(--tropical-indigo);
|
|
--code-string-color: var(--robin-egg-blue);
|
|
--code-operator-color: var(--bright-green);
|
|
--code-comment-color: var(--cool-gray);
|
|
--code-text-size: 0.9em;
|
|
|
|
/* Tags */
|
|
--tags-background: var(--dark-purple);
|
|
--tags-color: var(--robin-egg-blue);
|
|
|
|
/* List Markers */
|
|
--list-marker-color: var(--white);
|
|
--list-marker-color-hover: var(--bright-green);
|
|
|
|
/* Checkboxes */
|
|
--checkbox-marker-color: var(--white);
|
|
--radius-s: 3px;
|
|
--interactive-accent: var(--tropical-indigo); /*marked color*/
|
|
--checklist-done-color: var(--cool-gray);
|
|
--checkbox-border-color: var(--cool-gray);
|
|
--checkbox-border-color-hover: var(--bright-green);
|
|
--checkbox-color-hover: var(--bright-green);
|
|
--checklist-done-decoration: none;
|
|
|
|
/* Quotes */
|
|
--quote-background: var(--dark-purple);
|
|
/* --quote-style: italic; */
|
|
|
|
/* Links */
|
|
--link-text-shadow: var(--raisin-black);
|
|
--link-text-color: var(--white);
|
|
--link-text-color-hover: var(--tropical-indigo);
|
|
--link-ext-color: var(--tropical-indigo);
|
|
--link-int-color: var(--robin-egg-blue);
|
|
--link-url-text-color: var(--tropical-indigo);
|
|
|
|
/* Explorer */
|
|
--folder-title-color: var(--white);
|
|
--file-title-color: var(--white);
|
|
--folder-filter: invert(30%) sepia(99%) saturate(1210%) hue-rotate(51deg) brightness(120%) contrast(100%);
|
|
|
|
/* Progress Bar Loading */
|
|
--progress-bar-color: var(--tropical-indigo);
|
|
|
|
/* Highlight */
|
|
--highlight-background-color: var(--bright-green);
|
|
--highlight-text-color: var(--dark-purple);
|
|
--highlight-text-shadow: var(--text-normal);
|
|
|
|
/* Search and Find */
|
|
--search-result-background: var(--tropical-indigo);
|
|
--find-flashing: var(--bright-green);
|
|
}
|
|
|
|
|
|
/* ----------- Font ----------- */
|
|
|
|
/* working progress */
|
|
|
|
/* ----------- Text ----------- */
|
|
|
|
.markdown-source-view.mod-cm6 .cm-line {
|
|
padding-top: 0em;
|
|
padding-bottom: 0.3em;
|
|
}
|
|
|
|
/* ----------- Titles ----------- */
|
|
|
|
.HyperMD-header-1, .HyperMD-header.HyperMD-header-1.cm-line, h1 {
|
|
text-align: center;
|
|
width: 100%;
|
|
border-bottom: 0.1em solid transparent;
|
|
border-image: linear-gradient(0.25turn,
|
|
var(--h1-gradient-start) 5%,
|
|
var(--h1-gradient-mid) 50%,
|
|
var(--h1-gradient-end) 96%);
|
|
border-radius: 3px;
|
|
border-image-slice: 1;
|
|
padding-top: 0.3em!important;
|
|
padding-bottom: 0.2em!important;
|
|
margin-top: 0.3em!important;
|
|
margin-bottom: 0.5em!important;
|
|
}
|
|
|
|
.HyperMD-header-2, .HyperMD-header.HyperMD-header-2.cm-line, h2 {
|
|
text-align: left;
|
|
width: 100%;
|
|
border-bottom: 0.05em solid transparent;
|
|
border-image: linear-gradient(0.25turn,
|
|
var(--h2-gradient-start) 0%,
|
|
var(--h2-gradient-end) 60%);
|
|
border-radius: 3px;
|
|
border-image-slice: 1;
|
|
padding-top: 0.3em!important;
|
|
padding-bottom: 0.2em!important;
|
|
margin-top: 0.3em!important;
|
|
margin-bottom: 0.5em!important;
|
|
}
|
|
|
|
.HyperMD-header-3, .HyperMD-header.HyperMD-header-3.cm-line, h3 {
|
|
padding-top: 0.3em!important;
|
|
margin-top: 0.3em!important;
|
|
margin-bottom: 0.3em!important;
|
|
}
|
|
|
|
.cm-header.cm-header-1.cm-inline-code,
|
|
.cm-header.cm-header-2.cm-inline-code{
|
|
font-size: var(--code-text-size)!important;
|
|
}
|
|
|
|
.cm-header.cm-header-3.cm-inline-code,
|
|
.cm-header.cm-header-4.cm-inline-code,
|
|
.cm-header.cm-header-5.cm-inline-code,
|
|
.cm-header.cm-header-6.cm-inline-code{
|
|
font-size: var(--code-text-size)!important;
|
|
}
|
|
/* ----------- Bar ----------- */
|
|
|
|
.cm-line hr,
|
|
.markdown-preview-view hr {
|
|
margin-block-start: 1em;
|
|
margin-block-end: 1.2em;
|
|
border: none;
|
|
height: 0;
|
|
border-bottom: 1px solid;
|
|
border-image-slice: 1;
|
|
border-width: 0.1em;
|
|
border-image-source: linear-gradient(0.25turn,
|
|
var(--bar-gradient-start) 2%,
|
|
var(--bar-gradient-mid) 50%,
|
|
var(--bar-gradient-end) 98%);
|
|
}
|
|
|
|
/* ----------- Lists ----------- */
|
|
|
|
.mod-cm6 .HyperMD-list-line.cm-line {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
/* ordered */
|
|
ol,
|
|
ol ol,
|
|
ol ol ol,
|
|
ol ol ol ol
|
|
{
|
|
list-style-type: lower-roman;
|
|
}
|
|
|
|
/* unordered */
|
|
ul,
|
|
ul ul,
|
|
ul ul ul {
|
|
list-style-type: square;
|
|
}
|
|
|
|
/* ----------- Checkboxes ----------- */
|
|
|
|
:is(.HyperMD-task-line[data-task="/"],
|
|
.HyperMD-task-line[data-task=">"],
|
|
.HyperMD-task-line[data-task="-"],
|
|
.HyperMD-task-line[data-task="<"]) .task-list-item-checkbox::after {
|
|
-webkit-mask-image: none;
|
|
mask-image: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.HyperMD-task-line[data-task="/"] .task-list-item-checkbox,
|
|
.HyperMD-task-line[data-task="/"] .task-list-item-checkbox:hover {
|
|
background-color: var(--folly);
|
|
border-color: var(--checkbox-border-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.HyperMD-task-line[data-task=">"] .task-list-item-checkbox,
|
|
.HyperMD-task-line[data-task=">"] .task-list-item-checkbox:hover {
|
|
background-color: var(--bright-green);
|
|
border-color: var(--checkbox-border-color);
|
|
}
|
|
|
|
.HyperMD-task-line[data-task="-"] .task-list-item-checkbox,
|
|
.HyperMD-task-line[data-task="-"] .task-list-item-checkbox:hover {
|
|
background-color: var(--gold);
|
|
border-color: var(--checkbox-border-color);
|
|
}
|
|
.HyperMD-task-line[data-task="<"] .task-list-item-checkbox,
|
|
.HyperMD-task-line[data-task="<"] .task-list-item-checkbox:hover {
|
|
background-color: var(--robin-egg-blue);
|
|
border-color: var(--checkbox-border-color);
|
|
}
|
|
|
|
/* ----------- Bold, Italic, Underline ----------- */
|
|
|
|
.cm-strong, strong {
|
|
color: var(--strong) !important;
|
|
}
|
|
|
|
.cm-em, em,
|
|
.cm-em cm-quote cm-quote-1
|
|
{
|
|
color: var(--italic);
|
|
}
|
|
|
|
/* ----------- Code - Code Block ----------- */
|
|
|
|
pre code {
|
|
background-color: var(--codeblock-background) !important;
|
|
border: var(--codeblock-background) !important;
|
|
color: var(--codeblock-color)!important;
|
|
}
|
|
|
|
.markdown-rendered pre {
|
|
background-color: var(--codeblock-background);
|
|
}
|
|
|
|
pre[class*="language-"],
|
|
code[class*="language-"]
|
|
{
|
|
font-size: var(--code-text-size)!important;
|
|
background: var(--codeblock-background)!important;
|
|
color: var(--codeblock-color)!important;
|
|
}
|
|
|
|
.cm-s-obsidian div.HyperMD-codeblock-begin-bg,
|
|
.cm-s-obsidian div.HyperMD-codeblock-end-bg {
|
|
background-color: var(--codeblock-background);
|
|
}
|
|
|
|
.cm-s-obsidian div.HyperMD-codeblock-bg {
|
|
left: 0;
|
|
right: 0;
|
|
background-color: var(--codeblock-background);
|
|
}
|
|
|
|
.cm-inline-code{
|
|
background-color: var(--inline-code-background)!important;
|
|
color: var(--inline-code-color)!important;
|
|
font-size: var(--code-text-size)!important;
|
|
padding: 3px 4px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.markdown-rendered code {
|
|
background-color: var(--codeblock-background)!important;
|
|
/* color: var(--white); */
|
|
color: var(--inline-code-color);
|
|
font-size: var(--code-text-size)!important;
|
|
padding: 3px 4px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* code styling */
|
|
|
|
.cm-link, .cm-variable, .cm-variable-2, .cm-variable-3 {color: var(--code-variable-color)!important;} /* variable */
|
|
.cm-def.cm-hmd-codeblock, .token.function, .token.class-name {
|
|
color: var(--code-function-color)!important;
|
|
text-emphasis: italic;
|
|
} /* function name in declaration */
|
|
.cm-builtin, .cm-property, .cm-attribute, .cm-type, .cm-keyword, .token.keyword, .token.builtin, .token.property {color: var(--code-builtin-color)!important;} /* built-in functions, methods */
|
|
.cm-hmd-codeblock.cm-string, .token.string {color: var(--code-string-color)!important;} /* strings and numbers */
|
|
.cm-hmd-codeblock.cm-number, .token.number {color: var(--code-operator-color)!important}
|
|
.cm-operator, .token.operator {color: var(--code-operator-color)!important;} /* operators */
|
|
.cm-hmd-codeblock {color: var(--codeblock-color);} /* codeblock */
|
|
.cm-comment, .token.comment {color: var(--code-comment-color)!important;} /* comment */
|
|
|
|
|
|
/* ----------- Tags ----------- */
|
|
|
|
.cm-s-obsidian span.cm-hashtag, .tag
|
|
{
|
|
background-color: var(--tags-background)!important;
|
|
color: var(--tags-color)!important;
|
|
font-weight: bold;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
/* ----------- Quotes ----------- */
|
|
|
|
.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote, .markdown-rendered blockquote {
|
|
/* font-style: var(--quote-style); */
|
|
font-size: 0.9em;
|
|
background-color: var(--quote-background);
|
|
padding-top: 0.3em;
|
|
padding-bottom: 0.4em;
|
|
}
|
|
|
|
/* ----------- Underline ----------- */
|
|
|
|
u {
|
|
color: var(--underline-text-color);
|
|
text-decoration-color: var(--underline-line-color);
|
|
text-decoration-thickness: var(--underline-line-thickness);
|
|
}
|
|
|
|
/* ----------- Highlight ----------- */
|
|
|
|
.cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight, .markdown-rendered mark {
|
|
background-color: var(--highlight-background-color);
|
|
color: var(--highlight-text-color);
|
|
padding-left: 0.3rem;
|
|
padding-right: 0.3rem;
|
|
border-radius: 0.2rem;
|
|
/* text-shadow: -1px -1px 1px var(--highlight-text-shadow), -1px 1px 1px var(--highlight-text-shadow), 1px -1px 1px var(--highlight-text-shadow), 1px 1px 1px var(--highlight-text-shadow); */
|
|
}
|
|
|
|
|
|
/* ----------- Search ----------- */
|
|
|
|
.search-result-file-matched-text {
|
|
background-color: var(--search-result-background);
|
|
}
|
|
|
|
|
|
/* ----------- Explorer ----------- */
|
|
|
|
.is-flashing {
|
|
background-color: var(--find-flashing);
|
|
transition: all 0.7s ease-in !important;
|
|
}
|
|
|
|
|
|
/* ----------- Links ----------- */
|
|
|
|
.external-link, .internal-link,
|
|
.cm-s-obsidian span.cm-link:not(.cm-formatting-link) .cm-underline,
|
|
.cm-s-obsidian span.cm-hmd-internal-link .cm-underline {
|
|
text-shadow: -1px -1px 2px var(--link-text-shadow),
|
|
-1px 1px 2px var(--link-text-shadow),
|
|
1px -1px 2px var(--link-text-shadow),
|
|
1px 1px 2px var(--link-text-shadow);
|
|
color: var(--link-text-color);
|
|
background-position: 0 100%;
|
|
background-repeat: repeat-x;
|
|
background-size: 1px 2px;
|
|
text-decoration: none;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.external-link,
|
|
.cm-s-obsidian span.cm-link:not(.cm-formatting-link) .cm-underline,
|
|
.cm-s-obsidian span.cm-hmd-external-link .cm-underline
|
|
{
|
|
background-image: linear-gradient(
|
|
to bottom,
|
|
var(--link-ext-color) 0%,
|
|
var(--link-ext-color) 100%
|
|
);
|
|
}
|
|
|
|
.internal-link,
|
|
.cm-s-obsidian span.cm-hmd-internal-link .cm-underline
|
|
{
|
|
background-image: linear-gradient(
|
|
to bottom,
|
|
var(--link-int-color) 0%,
|
|
var(--link-int-color) 100%
|
|
);
|
|
text-decoration: none!important;
|
|
}
|
|
|
|
/* link hover color */
|
|
a:hover,
|
|
.internal-link:hover,
|
|
.external-link:hover,
|
|
.cm-underline:hover {
|
|
text-decoration: none !important;
|
|
color: var(--link-text-color-hover);
|
|
}
|
|
|
|
.cm-s-obsidian span.cm-url {
|
|
color: var(--link-url-text-color)!important;
|
|
background-image: none!important;
|
|
background-color: transparent!important;
|
|
/* text-decoration: double!important; */
|
|
}
|
|
|
|
.markdown-rendered .internal-link{
|
|
color: var(--text-normal) !important;
|
|
}
|
|
|
|
/* ----------- Images ----------- */
|
|
|
|
img {display:block;
|
|
margin-left:auto;
|
|
margin-right:auto;}
|
|
|
|
.markdown-preview-view img {
|
|
display: block;
|
|
margin-top: 20pt;
|
|
margin-bottom: 20pt;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 40%; /* experiment with values */
|
|
transition:transform 0.25s ease;
|
|
}
|
|
|
|
.markdown-preview-view img:hover {
|
|
-webkit-transform:scale(1); /* experiment with values */
|
|
transform:scale(1.4);
|
|
}
|
|
|
|
/* ----------- Tables ----------- */
|
|
|
|
/* preview */
|
|
.markdown-preview-view table {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.markdown-source-view.mod-cm6 .cm-table-widget {
|
|
margin-left: auto!important;
|
|
margin-right: auto!important;
|
|
}
|
|
|
|
/* ----------- File Explorer ----------- */
|
|
|
|
.nav-folder-children .nav-file-title-content:first-child::before
|
|
{
|
|
content: '📄 ';
|
|
}
|
|
|
|
.nav-folder-children .nav-folder-title-content::before
|
|
{
|
|
content: '📁 ';
|
|
margin-right: 0px !important;
|
|
}
|
|
|
|
.nav-folder-title-content
|
|
{
|
|
color: var(--folder-title-color);
|
|
}
|
|
|
|
.nav-file-title-content
|
|
{
|
|
color: var(--file-title-color);
|
|
}
|
|
|
|
.nav-folder-title-content::before {
|
|
font-size: 13px;
|
|
/* how to get CSS filter ?
|
|
0, open website: https://www.zhangxinxu.com/sp/filter.html
|
|
1, first: image original color this is : #000
|
|
2, second: display color i want : #D6FFF1
|
|
3, CSS filter trans btn clik: the result is :
|
|
filter: invert(99%) sepia(90%) saturate(382%) hue-rotate(69deg) brightness(106%) contrast(102%);
|
|
4, pause👇 : OK ✌️;
|
|
*/
|
|
|
|
/* filter to --bright-green: invert(72%) sepia(99%) saturate(1210%) hue-rotate(51deg) brightness(107%) contrast(107%); */
|
|
/* filter: invert(30%) sepia(99%) saturate(1210%) hue-rotate(51deg) brightness(120%) contrast(100%); */
|
|
filter: var(--folder-filter);
|
|
|
|
/*
|
|
/* If you want to change the icon, you only need to modify this code.you can only change d=''
|
|
*/
|
|
|
|
content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 100 100' width='17' height='17'><path fill='currentColor' stroke='currentColor' d='M6.1,8c-3.3,0-6,2.7-6,6v73.8c-0.1,0.5-0.1,0.9,0.1,1.4c0.6,2.7,3,4.8,5.9,4.8h78c3,0,5.4-2.2,5.9-5.1 c0-0.1,0.1-0.2,0.1-0.4c0,0,0-0.1,0-0.1l0.1-0.3c0,0,0,0,0-0.1l9.9-53.6l0.1-0.2V34c0-3.3-2.7-6-6-6v-6c0-3.3-2.7-6-6-6H36.1 c0,0,0,0-0.1,0c-0.1,0-0.2-0.2-0.6-0.6c-0.5-0.6-1.1-1.5-1.7-2.5c-0.6-1-1.3-2.1-2.1-3C30.9,9,29.7,8,28.1,8L6.1,8z M6.1,12h22 c-0.1,0,0.1,0,0.6,0.6c0.5,0.6,1.1,1.5,1.7,2.5c0.6,1,1.3,2.1,2.1,3c0.8,0.9,1.9,1.9,3.6,1.9h52c1.1,0,2,0.9,2,2v6h-74 c-3.1,0-5.7,2.5-5.9,5.6h-0.1L10.1,34l-6,32.4V14C4.1,12.9,4.9,12,6.1,12z M16.1,32h78c1.1,0,2,0.9,2,2l-9.8,53.1l-0.1,0.1 c0,0.1,0,0.2-0.1,0.2c0,0.1,0,0.2-0.1,0.2c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1c0,0.1,0,0.2-0.1,0.3c0,0.1,0,0.1,0,0.2 c0,0.1,0,0.2,0,0.2c-0.3,0.8-1,1.4-1.9,1.4h-78c-1.1,0-2-0.9-2-2L14,34.4l0.1-0.2V34C14.1,32.9,14.9,32,16.1,32L16.1,32z'/></svg>");
|
|
|
|
margin-right: 7px !important;
|
|
}
|
|
|
|
/* ----------- Progress Bar Loading ----------- */
|
|
|
|
.progress-bar-subline {
|
|
position: absolute;
|
|
background-color: var(--progress-bar-color);
|
|
height: 5px;
|
|
}
|
|
|
|
.progress-bar-line {
|
|
position: absolute;
|
|
opacity: 0.4;
|
|
background-color: var(--progress-bar-color);
|
|
width: 150%;
|
|
height: 5px;
|
|
} |