Skip to content

Commit

Permalink
add colorful- cloze- and important-notes
Browse files Browse the repository at this point in the history 
```note-yellow
```note-yellow-bg or ```note-yellow-background
```note-imp or ```note-important
```note-cloze
  • Loading branch information
@whyt-byte
whyt-byte authored Dec 6, 2020
1 parent 0ec1943 commit 505e8de
Showing 1 changed file with 253 additions and 30 deletions.
283 changes: 253 additions & 30 deletions obsidian.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*蓝色托帕石，适合Obsidian v0.9.20。[20201205] flying fly flies修改，欢迎使用及分享，借鉴（copy）了许多主题，在此一一感谢。如果喜欢，可以在Github里给我星星 https://github.com/whyt-byte */
/*Blue Topaz for Obsidian v0.9.20, [20201205] modified by flying fly flies. Feel free to use, share and modify. Thanks for all shared css themes which inspire me a lot. If you like the theme, please star me on GitHub https://github.com/whyt-byte */
/*蓝色托帕石，适合Obsidian v0.9.20。[20201206] flying fly flies修改，欢迎使用及分享，借鉴（copy）了许多主题，在此一一感谢。如果喜欢，可以在Github里给我星星 https://github.com/whyt-byte */
/*Blue Topaz for Obsidian v0.9.20, [20201206] modified by flying fly flies. Feel free to use, share and modify. Thanks for all shared css themes which inspire me a lot. If you like the theme, please star me on GitHub https://github.com/whyt-byte */

:root{
--font-size-obsidian-titlebar: 12px;
Expand All @@ -22,21 +22,23 @@
--font-size-code: 14px;
--font-size-edit-code: 14px;
--font-size-latex: 20px;
--text-size-cloze: 15px;

/*font family*/
--font-family-list: ;/*列表字体*/
--font-family-major: ;/*主体（包括列表）字体，除代码框等少数部分*/
--font-family-h1: ;
--font-family-h2: ;
--font-family-h3: ;
--font-family-h4: ;
--font-family-h5: ;
--font-family-h6: ;
--font-family-title: ;/*文件抬头标题*/
--font-family-folder-file-title: ;/*左侧边栏文件、文件夹字体*/
--font-family-preview-code: ;
--font-family-tag: ;
--font-family-vault: ;/*左侧库名字体*/
--font-family-list: ;/*列表字体*/
--font-family-major: ;/*主体（包括列表）字体，除代码框等少数部分*/
--font-family-h1: ;
--font-family-h2: ;
--font-family-h3: ;
--font-family-h4: ;
--font-family-h5: ;
--font-family-h6: ;
--font-family-title: ;/*文件抬头标题*/
--font-family-folder-file-title: ;/*左侧边栏文件、文件夹字体*/
--font-family-preview-edit-code: Consolas;
--text-family-inline-code: Consolas;
--font-family-tag: ;
--font-family-vault: ;/*左侧库名字体*/
}

.theme-dark {
Expand Down Expand Up @@ -166,6 +168,30 @@
--event-item-color8: #c62828bb;
--event-item-color9: #ad1457bb;
--event-item-color10:#6a1b9abb;

/*colourful notes*/
--text-gray: #acacac;
--text-brown: #be9684;
--text-orange: #ffa344;
--text-yellow: #ffdc51;
--text-green: #52c7b2;
--text-blue: #8ca1ff;
--text-purple: #b386f1;
--text-pink: #ff6bba;
--text-red: #ff4f4f;

--background-gray: #535353;
--background-brown: #493a3a;
--background-orange: #53422f;
--background-yellow: #585536;
--background-green: #32503e;
--background-blue: #2f5264;
--background-purple: #443f57;
--background-pink: #533b4a;
--background-red: #683c3c;

--note-important: #fd4141;
--note-cloze: #ffffff;
}

.theme-light {
Expand Down Expand Up @@ -290,6 +316,30 @@
--event-item-color8: #0c469c;
--event-item-color9: #0a3c86;
--event-item-color10:#072f6b;

/*colourful notes*/
--text-gray: #37352f99;
--text-brown: #855a46;
--text-orange: #d9730d;
--text-yellow: #d4a300;
--text-green: #00927f;
--text-blue: #0083bb;
--text-purple: #5d1fb9;
--text-pink: #c40075;
--text-red: #ff4343;

--background-gray: #ebeced;
--background-brown: #e9e5e3;
--background-orange: #faebdd;
--background-yellow: #fbf3db;
--background-green: #ddedea;
--background-blue: #ddebf1;
--background-purple: #eae4f2;
--background-pink: #f4dfeb;
--background-red: #ffe3e3;

--note-important: #fd4141;
--note-cloze: #000000;
}

/*=========================*/
Expand Down Expand Up @@ -649,17 +699,14 @@ input.search-input{
top: 0px;
}
*/

/*左侧边栏按钮 icon buttons in left side*/
.side-dock-ribbon-action{
padding: 6px 0 2px 0;
padding: 7px 0 2px 0;
}

.side-dock-ribbon-tab:hover, .side-dock-ribbon-action:hover {
color: var(--ztys);
}

/*目录 folders*/
.nav-folder.mod-root > .nav-folder-title {
padding-left: 0px;
font-size: var(--font-size-vault-name);
Expand Down Expand Up @@ -728,9 +775,7 @@ span.search-result-file-matched-text{
color: var(--text-accent);
}

/*==========================*/
/*=========checkbox=========*/
/*==========================*/
/*checkbox*/
.markdown-preview-view .task-list-item-checkbox {
-webkit-appearance: none;
box-sizing: border-box;
Expand Down Expand Up @@ -795,10 +840,6 @@ div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-task.cm-prop
content: "☑";
color: var(--text-accent) !important;
}

/*===============================*/
/*=========header titles=========*/
/*===============================*/
.markdown-preview-view h1 {
font-size: var(--font-size-h1);
font-weight:600;
Expand Down Expand Up @@ -906,7 +947,7 @@ mjx-container[jax='CHTML'] {
.theme-dark .markdown-preview-view code {
color: #e48900;
font-size: var(--font-size-edit-code) !important;
font-family: var(--font-family-preview-code);
font-family: var(--font-family-preview-edit-code);
}

.theme-light .cm-s-obsidian pre.HyperMD-codeblock,
Expand All @@ -915,18 +956,18 @@ mjx-container[jax='CHTML'] {
.theme-light .markdown-preview-view code:not([class*='language-']) {
color: #ee5f00;
font-size: var(--font-size-edit-code) !important;
font-family: var(--font-family-preview-code);
font-family: var(--font-family-preview-edit-code);
}

/*bold code text except code language*/
code:not([class*='language-']){
font-weight: 600;
font-family: Consolas;
font-family: var(--font-family-preview-edit-code) !important;
}

.cm-s-obsidian span.cm-inline-code {
font-weight: 600;
font-family: Consolas;
font-family: var(--text-family-inline-code) !important;
}

/*====================================*/
Expand Down Expand Up @@ -2029,6 +2070,187 @@ div:not(.CodeMirror-activeline)>.HyperMD-quote {
margin-left: 15px;
}


/* colourful notes */
/* from Notation by death_au https://github.com/deathau/Notation-for-Obsidian */
/* Original idea from: https://gist.github.com/mklepaczewski/54e451f09994b9d450de81c8baaf8aa4 */
/* but also with simpler classes so you can use `<span class='colour'>` as well */
.app-container .markdown-preview-view pre[class*="language-note-"] {

}

.app-container .markdown-preview-view pre[class*="language-note-"] code[class*="language-note-"] {
white-space: pre-wrap;
}

.app-container .markdown-preview-view pre.language-note-notice,
.app-container .markdown-preview-view pre.language-note-gray-background,
.app-container .markdown-preview-view pre.language-note-gray-bg,
.gray-background,
.gray-bg {
background-color: var(--background-gray);
}

.app-container .markdown-preview-view pre.language-note-brown-background,
.app-container .markdown-preview-view pre.language-note-brown-bg,
.brown-background,
.brown-bg {
background-color: var(--background-brown);
}

.app-container .markdown-preview-view pre.language-note-orange-background,
.app-container .markdown-preview-view pre.language-note-orange-bg,
.orange-background,
.orange-bg {
background-color: var(--background-orange);
}

.app-container .markdown-preview-view pre.language-note-yellow-background,
.app-container .markdown-preview-view pre.language-note-yellow-bg,
.yellow-background,
.yellow-bg {
background-color: var(--background-yellow)
}

.app-container .markdown-preview-view pre.language-note-green-background,
.app-container .markdown-preview-view pre.language-note-green-bg,
.green-background,
.green-bg {
background-color: var(--background-green);
}

.app-container .markdown-preview-view pre.language-note-blue-background,
.app-container .markdown-preview-view pre.language-note-blue-bg,
.blue-background,
.blue-bg {
background-color: var(--background-blue);
}

.app-container .markdown-preview-view pre.language-note-purple-background,
.app-container .markdown-preview-view pre.language-note-purple-bg,
.purple-background,
.purple-bg {
background-color: var(--background-purple);
}

.app-container .markdown-preview-view pre.language-note-pink-background,
.app-container .markdown-preview-view pre.language-note-pink-bg,
.pink-background,
.pink-bg {
background-color: var(--background-pink);
}

.app-container .markdown-preview-view pre.language-note-red-background,
.app-container .markdown-preview-view pre.language-note-red-bg,
.red-background,
.red-bg {
background-color: var(--background-red);
}

.app-container .markdown-preview-view pre.language-note-important,
.app-container .markdown-preview-view pre.language-note-imp {
border: 4px dashed var(--note-important);
}

pre.language-note-important:before, pre.language-note-imp::before{
content: "Important";
color: var(--note-important);
font-weight: 800;
}

/*colourful text*/
.app-container .markdown-preview-view pre.language-note-gray,
.app-container .markdown-preview-view pre.language-note-brown,
.app-container .markdown-preview-view pre.language-note-orange,
.app-container .markdown-preview-view pre.language-note-yellow,
.app-container .markdown-preview-view pre.language-note-green,
.app-container .markdown-preview-view pre.language-note-blue,
.app-container .markdown-preview-view pre.language-note-purple,
.app-container .markdown-preview-view pre.language-note-pink,
.app-container .markdown-preview-view pre.language-note-red {
background-color: transparent;
}

.app-container .markdown-preview-view pre.language-note-gray code.language-note-gray,
.gray {
color: var(--text-gray);
}

.app-container .markdown-preview-view pre.language-note-brown code.language-note-brown,
.brown {
color: var(--text-brown);
}

.app-container .markdown-preview-view pre.language-note-orange code.language-note-orange,
.orange {
color: var(--text-orange);
}

.app-container .markdown-preview-view pre.language-note-yellow code.language-note-yellow,
.yellow {
color: var(--text-yellow)
}

.app-container .markdown-preview-view pre.language-note-green code.language-note-green,
.green {
color: var(--text-green);
}

.app-container .markdown-preview-view pre.language-note-blue code.language-note-blue,
.blue {
color: var(--text-blue);
}

.app-container .markdown-preview-view pre.language-note-purple code.language-note-purple,
.purple {
color: var(--text-purple);
}

.app-container .markdown-preview-view pre.language-note-pink code.language-note-pink,
.pink {
color: var(--text-pink);
}

.app-container .markdown-preview-view pre.language-note-red code.language-note-red,
.red {
color: var(--text-red);
}

/* cloze */
.app-container .markdown-preview-view pre.language-note-cloze code.language-note-cloze,
.cloze {
color: var(--text-normal);
background-color: var(--text-normal);
display: block;
padding: 0px !important;
text-shadow: none;
margin: 5px;
font-size: var(--text-size-cloze) !important;
}

.app-container .markdown-preview-view pre.language-note-cloze {
background-color: transparent;
}

code.language-note-cloze.is-loaded:hover{
cursor: pointer;
}

code.language-note-cloze.is-loaded:active{
background-color: transparent !important;
}

pre.language-note-cloze::before {
content: "TO RECALL";
color: var(--note-cloze);
font-weight: 800;
left: 22px;
top: 0px;
}




/*===============================================*/
/* .__ .___*/
/* _____ ___________ _____ _____ |__| __| _/*/
Expand Down Expand Up @@ -3095,3 +3317,4 @@ pre.frontmatter.language-yaml:before{
.event_item_color10 {
background-color: var(--event-item-color10)!important;
}

0 comments on commit 505e8de

Please sign in to comment.