diff --git a/lapis-dark.css b/lapis-dark.css index 071f519..4b79494 100755 --- a/lapis-dark.css +++ b/lapis-dark.css @@ -3,318 +3,319 @@ * https://github.com/YiNNx/typora-theme-lapis */ - @import "lapis.css"; - - :root { - --text-color: #e4e4e4e3; - /* Text */ - --primary-color: #8393ad; - /* Primary Color */ - --bg-color: #1e222a; - --bg-sidebar-color: #181c24; - /* Background */ - - --code-color: #abbad4; - /* Inline Code & Code Block */ - --marker-color: #7d8a9f; - /* List Marker */ - --highlight-color: #ffffb5c2; - /* Highlight */ - --header-span-color: #47556d; - /* h2 Span Color */ - --block-bg-color: #080e1d; - /* Code Block Background */ - --quote-block-bg-color: #2a2f3b; - /* Quote Block Background */ - - /* Overwrite of Typora Base Color */ - --md-char-color: #7d8a9f7d; - --heading-char-color: var(--text-color); - --select-text-bg-color: #dae3ea2e; - --search-select-bg-color: #428bca; - --item-hover-bg-color: var(--block-bg-color); - --window-border: 1px solid var(--bg-color); - --control-text-hover-color: var(--text-color); - --rawblock-edit-panel-bd: var(--block-bg-color); - } - - /* - * Background Color - */ - - content { - background: var(--bg-color); - } +@import "lapis.css"; + +:root { + --text-color: #e4e4e4e3; + /* Text */ + --primary-color: #8393ad; + /* Primary Color */ + --bg-color: #1e222a; + --bg-sidebar-color: #181c24; + /* Background */ + + --code-color: #abbad4; + /* Inline Code & Code Block */ + --marker-color: #7d8a9f; + /* List Marker */ + --highlight-color: #ffffb5c2; + /* Highlight */ + --header-span-color: #47556d; + /* h2 Span Color */ + --block-bg-color: #080e1d; + /* Code Block Background */ + --quote-block-bg-color: #2a2f3b; + /* Quote Block Background */ + + /* Overwrite of Typora Base Color */ + --md-char-color: #7d8a9f7d; + --heading-char-color: var(--text-color); + --select-text-bg-color: #dae3ea2e; + --search-select-bg-color: #428bca; + --item-hover-bg-color: var(--block-bg-color); + --window-border: 1px solid var(--bg-color); + --control-text-hover-color: var(--text-color); + --rawblock-edit-panel-bd: var(--block-bg-color); +} + +/* + * Background Color + */ + +content { + background: var(--bg-color); +} /* - * Header - */ - #write h2 { + * Header + */ +#write h2 { color: var(--text-color); } - - /* - * Mark - */ - - mark { - background: var(--highlight-color); - border-radius: 1px; - color: var(--bg-color); - } - - /* - * Quote - */ - - #write blockquote { - background: var(--quote-block-bg-color); - } - - /* - * Code - */ - - #write code { - color: var(--code-color); - } - - #write h2 code { + +/* + * Mark + */ + +mark { + background: var(--highlight-color); + border-radius: 1px; + color: var(--bg-color); +} + +/* + * Quote + */ + +#write blockquote { + background: var(--quote-block-bg-color); +} + +/* + * Code + */ + +#write code { + color: var(--code-color); +} + +#write h2 code { background-color: var(--header-span-color); color: var(--text-color); - } - /* - * Image - */ - - #write span img { - filter: drop-shadow(var(--block-bg-color) 0px 0px 8px) brightness(90%); - } - - /* - * Table - */ - - #write table.md-table tr th, - #write table.md-table tr td { - border: 1px solid var(--header-span-color); - } - - #write table.md-table tr th { - color: var(--text-color); - } - - table.md-table.md-table td { - background-color: var(--bg-color); - } - - #write table.md-table tr td:hover, - #write table.md-table tr th:hover { - background-color: var(--bg-sidebar-color); - } - - - /* - * Task List - */ - - .task-list-item input:checked::before, - .task-list-item input:before { - background-color: var(--bg-color); - } - - /* - * Sidebar - */ - - #typora-sidebar { - color: var(--text-color); - background-color: var(--bg-sidebar-color); - } - - /* .typora-sidebar-resizer-bar { +} + +/* + * Image + */ + +#write span img { + filter: drop-shadow(var(--block-bg-color) 0px 0px 8px) brightness(90%); +} + +/* + * Table + */ + +#write table.md-table tr th, +#write table.md-table tr td { + border: 1px solid var(--header-span-color); +} + +#write table.md-table tr th { + color: var(--text-color); +} + +table.md-table.md-table td { + background-color: var(--bg-color); +} + +#write table.md-table tr td:hover, +#write table.md-table tr th:hover { + background-color: var(--bg-sidebar-color); +} + + +/* + * Task List + */ + +.task-list-item input:checked::before, +.task-list-item input:before { + background-color: var(--bg-color); +} + +/* + * Sidebar + */ + +#typora-sidebar { + color: var(--text-color); + background-color: var(--bg-sidebar-color); +} + +/* .typora-sidebar-resizer-bar { border-left: 2px solid var(--block-bg-color); } */ - - /* - * Horizontal Line - */ - - #write hr { - border-top: 1px solid var(--header-span-color); - } - - /* - * Comment - */ - - .md-comment { - color: var(--header-span-color); - } - - /* - * Front Matter - */ - - pre.md-meta-block { - background: var(--quote-block-bg-color); - filter: drop-shadow(var(--block-bg-color) 0px 3px 3px); - } - - /* - * Code Block - Style - */ - - .cm-s-inner.CodeMirror { - color: var(--code-color); - background-color: var(--block-bg-color); - } - - .CodeMirror-gutters { - border-right: 1px solid #a2b6d452; - } - - .CodeMirror-linenumber { - color: var(--primary-color); - } - - /* - * Code Block - Color Scheme - */ - - .cm-s-inner .cm-keyword { - color: #66cfe9 !important; - } - - .cm-s-inner .cm-operator { - color: #e7fc4a !important; - } - - .cm-s-inner .cm-variable, - .cm-s-inner .cm-builtin, - .cm-s-inner .cm-header, - .cm-s-inner .cm-tag, - .cm-s-inner .cm-property, - .cm-s-inner .cm-quote { - color: #c2eaff !important; - } - - .cm-s-inner .cm-variable-2 { - color: #8eb0b0 !important; - } - - .cm-s-inner .cm-variable-3, - .cm-s-inner .cm-type, - .cm-s-inner .cm-atom { - color: #debbfb !important; - } - - .cm-s-inner .cm-number { - color: #b0f6ae !important; - } - - .cm-s-inner .cm-def, - .cm-s-inner .cm-qualifier { - color: #f9fbfd !important; - } - - .cm-s-inner .cm-string { - color: #acd9a4 !important; - } - - .cm-s-inner .cm-string-2 { - color: #89acc5 !important; - } - - .cm-s-inner .cm-comment { - color: rgb(168, 168, 168) !important; - } - - .cm-s-inner .cm-meta { - color: #a0b4f6 !important; - } - - .cm-s-inner .cm-attribute { - color: #baacc3 !important; - } - - .cm-s-inner .cm-error { - color: rgba(255, 255, 255, 1) !important; - background-color: #ffcff140 !important; - } - - .cm-s-inner .CodeMirror-matchingbracket { - text-decoration: underline; - color: white !important; - } - - .CodeMirror div.CodeMirror-cursor { - border-left: 1px solid var(--primary-color); - z-index: 3; - } - - .cm-s-inner div.CodeMirror-selected { - background: rgba(167, 178, 189, 0.2) !important; - } - - .cm-s-inner.CodeMirror-focused div.CodeMirror-selected { - background: rgba(167, 178, 189, 0.2) !important; - } - - .cm-s-inner .CodeMirror-selected, - .cm-s-inner .CodeMirror-selectedtext { - background-color: rgba(167, 178, 189, 0.0) !important; - } - - .cm-s-inner .CodeMirror-line::-moz-selection, - .cm-s-inner .CodeMirror-line>span::-moz-selection, - .cm-s-inner .CodeMirror-line>span>span::-moz-selection { - background-color: rgba(167, 178, 189, 0.2); - } - - .cm-s-inner .CodeMirror-line::selection, - .cm-s-inner .CodeMirror-line>span::selection, - .cm-s-inner .CodeMirror-line>span>span::selection { - background-color: rgba(167, 178, 189, 0.2); - } - - /* - * Source Code Mode - */ - - cm-s-inner .cm-link, - .cm-s-inner.cm-link { - color: #42a5f5; - } - - .cm-s-typora-default .cm-link { - color: #42a5f5; - text-decoration: underline; - } - - /* - * Preferences - */ - - .typora-sourceview-on #toggle-sourceview-btn { - background: #41444b; - } - - .typora-sourceview-on #toggle-sourceview-btn { - background: #41444b; - padding-left: 10px; - margin-left: -2px; - } - - .nav-group-item.active { - background: var(--primary-color) !important; - color: var(--bg-color); - } - - .md-def-name:before { - color: var(--md-char-color); - } - - ::-webkit-scrollbar-thumb { - background: var(--block-bg-color); - } + +/* + * Horizontal Line + */ + +#write hr { + border-top: 1px solid var(--header-span-color); +} + +/* + * Comment + */ + +.md-comment { + color: var(--header-span-color); +} + +/* + * Front Matter + */ + +pre.md-meta-block { + background: var(--quote-block-bg-color); + filter: drop-shadow(var(--block-bg-color) 0px 3px 3px); +} + +/* + * Code Block - Style + */ + +.cm-s-inner.CodeMirror { + color: var(--code-color); + background-color: var(--block-bg-color); +} + +.CodeMirror-gutters { + border-right: 1px solid #a2b6d452; +} + +.CodeMirror-linenumber { + color: var(--primary-color); +} + +/* + * Code Block - Color Scheme + */ + +.cm-s-inner .cm-keyword { + color: #66cfe9 !important; +} + +.cm-s-inner .cm-operator { + color: #e7fc4a !important; +} + +.cm-s-inner .cm-variable, +.cm-s-inner .cm-builtin, +.cm-s-inner .cm-header, +.cm-s-inner .cm-tag, +.cm-s-inner .cm-property, +.cm-s-inner .cm-quote { + color: #c2eaff !important; +} + +.cm-s-inner .cm-variable-2 { + color: #8eb0b0 !important; +} + +.cm-s-inner .cm-variable-3, +.cm-s-inner .cm-type, +.cm-s-inner .cm-atom { + color: #debbfb !important; +} + +.cm-s-inner .cm-number { + color: #b0f6ae !important; +} + +.cm-s-inner .cm-def, +.cm-s-inner .cm-qualifier { + color: #f9fbfd !important; +} + +.cm-s-inner .cm-string { + color: #acd9a4 !important; +} + +.cm-s-inner .cm-string-2 { + color: #89acc5 !important; +} + +.cm-s-inner .cm-comment { + color: rgb(168, 168, 168) !important; +} + +.cm-s-inner .cm-meta { + color: #a0b4f6 !important; +} + +.cm-s-inner .cm-attribute { + color: #baacc3 !important; +} + +.cm-s-inner .cm-error { + color: rgba(255, 255, 255, 1) !important; + background-color: #ffcff140 !important; +} + +.cm-s-inner .CodeMirror-matchingbracket { + text-decoration: underline; + color: white !important; +} + +.CodeMirror div.CodeMirror-cursor { + border-left: 1px solid var(--primary-color); + z-index: 3; +} + +.cm-s-inner div.CodeMirror-selected { + background: rgba(167, 178, 189, 0.2) !important; +} + +.cm-s-inner.CodeMirror-focused div.CodeMirror-selected { + background: rgba(167, 178, 189, 0.2) !important; +} + +.cm-s-inner .CodeMirror-selected, +.cm-s-inner .CodeMirror-selectedtext { + background-color: rgba(167, 178, 189, 0.0) !important; +} + +.cm-s-inner .CodeMirror-line::-moz-selection, +.cm-s-inner .CodeMirror-line>span::-moz-selection, +.cm-s-inner .CodeMirror-line>span>span::-moz-selection { + background-color: rgba(167, 178, 189, 0.2); +} + +.cm-s-inner .CodeMirror-line::selection, +.cm-s-inner .CodeMirror-line>span::selection, +.cm-s-inner .CodeMirror-line>span>span::selection { + background-color: rgba(167, 178, 189, 0.2); +} + +/* + * Source Code Mode + */ + +cm-s-inner .cm-link, +.cm-s-inner.cm-link { + color: #42a5f5; +} + +.cm-s-typora-default .cm-link { + color: #42a5f5; + text-decoration: underline; +} + +/* + * Preferences + */ + +.typora-sourceview-on #toggle-sourceview-btn { + background: #41444b; +} + +.typora-sourceview-on #toggle-sourceview-btn { + background: #41444b; + padding-left: 10px; + margin-left: -2px; +} + +.nav-group-item.active { + background: var(--primary-color) !important; + color: var(--bg-color); +} + +.md-def-name:before { + color: var(--md-char-color); +} + +::-webkit-scrollbar-thumb { + background: var(--block-bg-color); +} \ No newline at end of file diff --git a/lapis.css b/lapis.css index 08bcab4..de30147 100644 --- a/lapis.css +++ b/lapis.css @@ -488,7 +488,6 @@ hr { margin-top: -.6rem; } - .task-list-item input:checked::before { content: '✓'; font-weight: bold; @@ -499,6 +498,10 @@ hr { line-height: 0.8rem; } +blockquote .task-list-item input::before { + margin-top: .2rem; +} + /* * Sidebar */ @@ -801,4 +804,4 @@ header, #megamenu-content { background-color: var(--bg-color); background-image: none !important; -} +} \ No newline at end of file