/*蓝色托帕石，适合Obsidian v0.10.2。[20201222] flying fly flies修改，欢迎使用及分享，借鉴（copy）了许多主题，在此一一感谢。如果喜欢，可以在Github里给我星星 https://github.com/whyt-byte */
/*Blue Topaz for Obsidian v0.10.2, [20201222] 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 */


/* 
----------------------------------------------------------------------
---------------不同颜色背景 Colourful note backgrounds-----------------
----------------------------------------------------------------------
语法：```note-xxx-bg 或```note-xxx-background
---------------------------------------------

```note-orange-bg
正文text
```

```note-yellow-bg
正文text
```

```note-green-bg
正文text
```

```note-blue-bg
正文text
```

```note-purple-bg
正文text
```

```note-pink-bg
正文text
```

```note-red-bg
正文text
```

```note-gray-bg
正文text
```

```note-brown-bg
正文text
```
-----------------------------------------------------
----------不同笔记颜色 Colourful note texts------------
-----------------------------------------------------

```note-orange
正文text
```

```note-yellow
正文text
```

```note-green
正文text
```

```note-blue
正文text
```

```note-purple
正文text
```

```note-pink
正文text
```

```note-red
正文text
```

```note-gray
正文text
```

```note-brown
正文text
```

-----------------------------------------------------------
------------记忆笔记框 Recall/cloze note blocks-------------
-----------------------------------------------------------
可鼠标点击显示笔记内容 To show text by clicking
-----------------------------------------------------------

```note-cloze
正文text
```


--------------------------------------------------------
------------重要笔记框 important note blocks-------------
--------------------------------------------------------
有笔记外框 Different block style
--------------------------------------------------------

```note-imp
正文text
```
*/

.theme-dark {
/*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 {
  /*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;
}


/* Active background */
.theme-dark .CodeMirror-activeline .CodeMirror-linebackground{
  background-color: #468eeb4b !important;
}



/* 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;
}