Last active
November 12, 2019 17:53
-
-
Save obahareth/0ac87912c8aec822da471861e0824c8f to your computer and use it in GitHub Desktop.
Typora Night Theme with Pragmata Pro and Pragmata Pro Mono
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "night/mermaid.dark.css"; | |
@import "night/codeblock.dark.css"; | |
@import "night/sourcemode.dark.css"; | |
:root { | |
--bg-color: #363B40; | |
--side-bar-bg-color: #2E3033; | |
--text-color: #b8bfc6; | |
--select-text-bg-color:#4a89dc; | |
--item-hover-bg-color: #0a0d16; | |
--control-text-color: #b7b7b7; | |
--control-text-hover-color: #eee; | |
--window-border: 1px solid #555; | |
--active-file-bg-color: rgb(34, 34, 34); | |
--active-file-border-color: #8d8df0; | |
--primary-color: #a3d5fe; | |
--active-file-text-color: white; | |
--item-hover-bg-color: #70717d; | |
--item-hover-text-color: white; | |
--primary-color: #6dc1e7; | |
--rawblock-edit-panel-bd: #333; | |
--search-select-bg-color: #428bca; | |
} | |
html { | |
font-size: 16px; | |
} | |
html, | |
body { | |
-webkit-text-size-adjust: 100%; | |
-ms-text-size-adjust: 100%; | |
background: #363B40; | |
background: var(--bg-color); | |
fill: currentColor; | |
line-height: 1.625rem; | |
} | |
#write { | |
max-width: 914px; | |
} | |
html, | |
body, | |
button, | |
input, | |
select, | |
textarea, | |
div.code-tooltip-content { | |
color: #b8bfc6; | |
border-color: transparent; | |
} | |
div.code-tooltip, | |
.md-hover-tip .md-arrow:after { | |
background: #333; | |
} | |
.popover.bottom > .arrow:after { | |
border-bottom-color: #333; | |
} | |
html, | |
body, | |
button, | |
input, | |
select, | |
textarea { | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
} | |
hr { | |
height: 2px; | |
border: 0; | |
margin: 24px 0 !important; | |
} | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
font-family: "Lucida Grande", "Corbel", sans-serif; | |
font-weight: normal; | |
clear: both; | |
-ms-word-wrap: break-word; | |
word-wrap: break-word; | |
margin: 0; | |
padding: 0; | |
color: #DEDEDE | |
} | |
h1 { | |
font-size: 2.5rem; | |
/* 36px */ | |
line-height: 2.75rem; | |
/* 40px */ | |
margin-bottom: 1.5rem; | |
/* 24px */ | |
letter-spacing: -1.5px; | |
} | |
h2 { | |
font-size: 1.63rem; | |
/* 24px */ | |
line-height: 1.875rem; | |
/* 30px */ | |
margin-bottom: 1.5rem; | |
/* 24px */ | |
letter-spacing: -1px; | |
font-weight: bold; | |
} | |
h3 { | |
font-size: 1.17rem; | |
/* 18px */ | |
line-height: 1.5rem; | |
/* 24px */ | |
margin-bottom: 1.5rem; | |
/* 24px */ | |
letter-spacing: -1px; | |
font-weight: bold; | |
} | |
h4 { | |
font-size: 1.12rem; | |
/* 16px */ | |
line-height: 1.375rem; | |
/* 22px */ | |
margin-bottom: 1.5rem; | |
/* 24px */ | |
color: white; | |
} | |
h5 { | |
font-size: 0.97rem; | |
/* 16px */ | |
line-height: 1.25rem; | |
/* 22px */ | |
margin-bottom: 1.5rem; | |
/* 24px */ | |
font-weight: bold; | |
} | |
h6 { | |
font-size: 0.93rem; | |
/* 16px */ | |
line-height: 1rem; | |
/* 16px */ | |
margin-bottom: 0.75rem; | |
color: white; | |
} | |
@media (min-width: 980px) { | |
h3.md-focus:before, | |
h4.md-focus:before, | |
h5.md-focus:before, | |
h6.md-focus:before { | |
color: #ddd; | |
border: 1px solid #ddd; | |
border-radius: 3px; | |
position: absolute; | |
left: -1.642857143rem; | |
top: .357142857rem; | |
float: left; | |
font-size: 9px; | |
padding-left: 2px; | |
padding-right: 2px; | |
vertical-align: bottom; | |
font-weight: normal; | |
line-height: normal; | |
} | |
h3.md-focus:before { | |
content: 'h3'; | |
} | |
h4.md-focus:before { | |
content: 'h4'; | |
} | |
h5.md-focus:before { | |
content: 'h5'; | |
top: 0px; | |
} | |
h6.md-focus:before { | |
content: 'h6'; | |
top: 0px; | |
} | |
} | |
a { | |
text-decoration: none; | |
outline: 0; | |
} | |
a:hover { | |
outline: 0; | |
} | |
a:focus { | |
outline: thin dotted; | |
} | |
sup.md-footnote { | |
background-color: #555; | |
color: #ddd; | |
} | |
p { | |
-ms-word-wrap: break-word; | |
word-wrap: break-word; | |
} | |
p, | |
ul, | |
dd, | |
ol, | |
hr, | |
address, | |
pre, | |
table, | |
iframe, | |
.wp-caption, | |
.wp-audio-shortcode, | |
.wp-video-shortcode { | |
margin-top: 0; | |
margin-bottom: 1.5rem; | |
/* 24px */ | |
} | |
li > blockquote { | |
margin-bottom: 0; | |
} | |
audio:not([controls]) { | |
display: none; | |
} | |
[hidden] { | |
display: none; | |
} | |
::-moz-selection { | |
background: #4a89dc; | |
color: #fff; | |
text-shadow: none; | |
} | |
*.in-text-selection, | |
::selection { | |
background: #4a89dc; | |
color: #fff; | |
text-shadow: none; | |
} | |
ul, | |
ol { | |
padding: 0 0 0 1.875rem; | |
/* 30px */ | |
} | |
ul { | |
list-style: square; | |
} | |
ol { | |
list-style: decimal; | |
} | |
ul ul, | |
ol ol, | |
ul ol, | |
ol ul { | |
margin: 0; | |
} | |
b, | |
th, | |
dt, | |
strong { | |
font-weight: bold; | |
} | |
i, | |
em, | |
dfn, | |
cite { | |
font-style: italic; | |
} | |
blockquote { | |
padding-left: 1.875rem; | |
margin: 0 0 1.875rem 1.875rem; | |
border-left: solid 2px #474d54; | |
padding-left: 30px; | |
margin-top: 35px; | |
} | |
pre, | |
code, | |
kbd, | |
tt, | |
var { | |
background: rgba(0, 0, 0, 0.05); | |
font-size: 0.875rem; | |
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; | |
} | |
kbd { | |
padding: 2px 4px; | |
font-size: 90%; | |
color: #fff; | |
background-color: #333; | |
border-radius: 3px; | |
box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); | |
} | |
pre.md-fences { | |
padding: 10px 10px 10px 30px; | |
margin-bottom: 20px; | |
background: #333; | |
} | |
.CodeMirror-gutters { | |
background: #333; | |
border-right: 1px solid transparent; | |
} | |
.enable-diagrams pre.md-fences[lang="sequence"] .code-tooltip, | |
.enable-diagrams pre.md-fences[lang="flow"] .code-tooltip, | |
.enable-diagrams pre.md-fences[lang="mermaid"] .code-tooltip { | |
bottom: -2.2em; | |
right: 4px; | |
} | |
code, | |
kbd, | |
tt, | |
var { | |
padding: 2px 5px; | |
} | |
table { | |
max-width: 100%; | |
width: 100%; | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
th, | |
td { | |
padding: 5px 10px; | |
vertical-align: top; | |
} | |
a { | |
-webkit-transition: all .2s ease-in-out; | |
transition: all .2s ease-in-out; | |
} | |
hr { | |
background: #474d54; | |
/* variable */ | |
} | |
h1 { | |
margin-top: 2em; | |
} | |
a { | |
color: #e0e0e0; | |
text-decoration: underline; | |
} | |
a:hover { | |
color: #fff; | |
} | |
.md-inline-math script { | |
color: #81b1db; | |
} | |
b, | |
th, | |
dt, | |
strong { | |
color: #DEDEDE; | |
/* variable */ | |
} | |
mark { | |
background: #D3D40E; | |
} | |
blockquote { | |
color: #9DA2A6; | |
} | |
table a { | |
color: #DEDEDE; | |
/* variable */ | |
} | |
th, | |
td { | |
border: solid 1px #474d54; | |
/* variable */ | |
} | |
.task-list { | |
padding-left: 0; | |
} | |
.md-task-list-item { | |
padding-left: 1.25rem; | |
} | |
.md-task-list-item > input { | |
top: auto; | |
} | |
.md-task-list-item > input:before { | |
content: ""; | |
display: inline-block; | |
width: 0.875rem; | |
height: 0.875rem; | |
vertical-align: middle; | |
text-align: center; | |
border: 1px solid #b8bfc6; | |
background-color: #363B40; | |
margin-top: -0.4rem; | |
} | |
.md-task-list-item > input:checked:before, | |
.md-task-list-item > input[checked]:before { | |
content: '\221A'; | |
/*◘*/ | |
font-size: 0.625rem; | |
line-height: 0.625rem; | |
color: #DEDEDE; | |
} | |
/** quick open **/ | |
.auto-suggest-container { | |
border: 0px; | |
background-color: #525C65; | |
} | |
#typora-quick-open { | |
background-color: #525C65; | |
} | |
#typora-quick-open input{ | |
background-color: #525C65; | |
border: 0; | |
border-bottom: 1px solid grey; | |
} | |
.typora-quick-open-item { | |
background-color: inherit; | |
color: inherit; | |
} | |
.typora-quick-open-item.active, | |
.typora-quick-open-item:hover { | |
background-color: #4D8BDB; | |
color: white; | |
} | |
.typora-quick-open-item:hover { | |
background-color: rgba(77, 139, 219, 0.8); | |
} | |
.typora-search-spinner > div { | |
background-color: #fff; | |
} | |
#write pre.md-meta-block { | |
border-bottom: 1px dashed #ccc; | |
background: transparent; | |
padding-bottom: 0.6em; | |
line-height: 1.6em; | |
} | |
.btn, | |
.btn .btn-default { | |
background: transparent; | |
color: #b8bfc6; | |
} | |
.ty-table-edit { | |
border-top: 1px solid gray; | |
background-color: #363B40; | |
} | |
.popover-title { | |
background: transparent; | |
} | |
.md-image>.md-meta { | |
color: #BBBBBB; | |
background: transparent; | |
} | |
.md-expand.md-image>.md-meta { | |
color: #DDD; | |
} | |
#write>h3:before, | |
#write>h4:before, | |
#write>h5:before, | |
#write>h6:before { | |
border: none; | |
border-radius: 0px; | |
color: #888; | |
text-decoration: underline; | |
left: -1.4rem; | |
top: 0.2rem; | |
} | |
#write>h3.md-focus:before { | |
top: 2px; | |
} | |
#write>h4.md-focus:before { | |
top: 2px; | |
} | |
.md-toc-item { | |
color: #A8C2DC; | |
} | |
#write div.md-toc-tooltip { | |
background-color: #363B40; | |
} | |
.dropdown-menu .btn:hover, | |
.dropdown-menu .btn:focus, | |
.md-toc .btn:hover, | |
.md-toc .btn:focus { | |
color: white; | |
background: black; | |
} | |
#toc-dropmenu { | |
background: rgba(50, 54, 59, 0.93); | |
border: 1px solid rgba(253, 253, 253, 0.15); | |
} | |
#toc-dropmenu .divider { | |
background-color: #9b9b9b; | |
} | |
.outline-expander:before { | |
top: 2px; | |
} | |
#typora-sidebar { | |
box-shadow: none; | |
border-right: 1px dashed; | |
border-right: none; | |
} | |
.sidebar-tabs { | |
border-bottom:0; | |
} | |
#typora-sidebar:hover .outline-title-wrapper { | |
border-left: 1px dashed; | |
} | |
.outline-title-wrapper .btn { | |
color: inherit; | |
} | |
.outline-item:hover { | |
border-color: #363B40; | |
background-color: #363B40; | |
color: white; | |
} | |
h1.md-focus .md-attr, | |
h2.md-focus .md-attr, | |
h3.md-focus .md-attr, | |
h4.md-focus .md-attr, | |
h5.md-focus .md-attr, | |
h6.md-focus .md-attr, | |
.md-header-span .md-attr { | |
color: #8C8E92; | |
display: inline; | |
} | |
.md-comment { | |
color: #5a95e3; | |
opacity: 1; | |
} | |
.md-inline-math g, | |
.md-inline-math svg { | |
stroke: #b8bfc6 !important; | |
fill: #b8bfc6 !important; | |
} | |
[md-inline='inline_math'] { | |
color: #9CB2E9; | |
} | |
#math-inline-preview .md-arrow:after { | |
background: black; | |
} | |
.modal-content { | |
background: var(--bg-color); | |
border: 0; | |
} | |
.modal-title { | |
font-size: 1.5em; | |
} | |
.modal-content input { | |
background-color: rgba(26, 21, 21, 0.51); | |
color: white; | |
} | |
.modal-content .input-group-addon { | |
color: white; | |
} | |
.modal-backdrop { | |
background-color: rgba(174, 174, 174, 0.7); | |
} | |
.modal-content .btn-primary { | |
border-color: var(--primary-color); | |
} | |
.md-table-resize-popover { | |
background-color: #333; | |
} | |
.form-inline .input-group .input-group-addon { | |
color: white; | |
} | |
#md-searchpanel { | |
border-bottom: 1px dashed grey; | |
} | |
/** UI for electron */ | |
.context-menu, | |
#spell-check-panel, | |
#footer-word-count-info { | |
background-color: #42464A; | |
} | |
.context-menu.dropdown-menu .divider, | |
.dropdown-menu .divider { | |
background-color: #777777; | |
} | |
footer { | |
color: inherit; | |
} | |
@media (max-width: 1000px) { | |
footer { | |
border-top: none; | |
} | |
footer:hover { | |
color: inherit; | |
} | |
} | |
#file-info-file-path .file-info-field-value:hover { | |
background-color: #555; | |
color: #dedede; | |
} | |
.megamenu-content, | |
.megamenu-opened header { | |
background: var(--bg-color); | |
} | |
.megamenu-menu-panel h2, | |
.megamenu-menu-panel h1, | |
.long-btn { | |
color: inherit; | |
} | |
.megamenu-menu-panel input[type='text'] { | |
background: inherit; | |
border: 0; | |
border-bottom: 1px solid; | |
} | |
#recent-file-panel-action-btn { | |
background: inherit; | |
border: 1px grey solid; | |
} | |
.megamenu-menu-panel .dropdown-menu > li > a { | |
color: inherit; | |
background-color: #2F353A; | |
text-decoration: none; | |
} | |
.megamenu-menu-panel table td:nth-child(1) { | |
color: inherit; | |
font-weight: bold; | |
} | |
.megamenu-menu-panel tbody tr:hover td:nth-child(1) { | |
color: white; | |
} | |
.modal-footer .btn-default, | |
.modal-footer .btn-primary, | |
.modal-footer .btn-default:not(:hover) { | |
border: 1px solid; | |
border-color: transparent; | |
} | |
.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { | |
color: white; | |
border: 1px solid #ddd; | |
background-color: inherit; | |
} | |
.modal-header { | |
border-bottom: 0; | |
} | |
.modal-footer { | |
border-top: 0; | |
} | |
#recent-file-panel tbody tr:nth-child(2n-1) { | |
background-color: transparent !important; | |
} | |
.megamenu-menu-panel tbody tr:hover td:nth-child(2) { | |
color: inherit; | |
} | |
.megamenu-menu-panel .btn { | |
border: 1px solid #eee; | |
background: transparent; | |
} | |
.mouse-hover .toolbar-icon.btn:hover, | |
#w-full.mouse-hover, | |
#w-pin.mouse-hover { | |
background-color: inherit; | |
} | |
.typora-node::-webkit-scrollbar { | |
width: 5px; | |
} | |
.typora-node::-webkit-scrollbar-thumb:vertical { | |
background: rgba(250, 250, 250, 0.3); | |
} | |
.typora-node::-webkit-scrollbar-thumb:vertical:active { | |
background: rgba(250, 250, 250, 0.5); | |
} | |
#w-unpin { | |
background-color: #4182c4; | |
} | |
#top-titlebar, #top-titlebar * { | |
color: var(--item-hover-text-color); | |
} | |
.typora-sourceview-on #toggle-sourceview-btn, | |
#footer-word-count:hover, | |
.ty-show-word-count #footer-word-count { | |
background: #333333; | |
} | |
#toggle-sourceview-btn:hover { | |
color: #eee; | |
background: #333333; | |
} | |
/** focus mode */ | |
.on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container) * { | |
color: #686868 !important; | |
} | |
.on-focus-mode .md-end-block:not(.md-focus) img, | |
.on-focus-mode .md-task-list-item:not(.md-focus-container)>input { | |
opacity: #686868 !important; | |
} | |
.on-focus-mode li[cid]:not(.md-focus-container){ | |
color: #686868; | |
} | |
.on-focus-mode .md-fences.md-focus .CodeMirror-code>*:not(.CodeMirror-activeline) *, | |
.on-focus-mode .CodeMirror.cm-s-inner:not(.CodeMirror-focused) * { | |
color: #686868 !important; | |
} | |
.on-focus-mode .md-focus, | |
.on-focus-mode .md-focus-container { | |
color: #fff; | |
} | |
.on-focus-mode #typora-source .CodeMirror-code>*:not(.CodeMirror-activeline) * { | |
color: #686868 !important; | |
} | |
/*diagrams*/ | |
#write .md-focus .md-diagram-panel { | |
border: 1px solid #ddd; | |
margin-left: -1px; | |
width: calc(100% + 2px); | |
} | |
/*diagrams*/ | |
#write .md-focus.md-fences-with-lineno .md-diagram-panel { | |
margin-left: auto; | |
} | |
.md-diagram-panel-error { | |
color: #f1908e; | |
} | |
.active-tab-files #info-panel-tab-file, | |
.active-tab-files #info-panel-tab-file:hover, | |
.active-tab-outline #info-panel-tab-outline, | |
.active-tab-outline #info-panel-tab-outline:hover { | |
color: #eee; | |
} | |
.sidebar-footer-item:hover, | |
.footer-item:hover { | |
background: inherit; | |
color: white; | |
} | |
.ty-side-sort-btn.active, | |
.ty-side-sort-btn:hover, | |
.selected-folder-menu-item a:after { | |
color: white; | |
} | |
#sidebar-files-menu { | |
border:solid 1px; | |
box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.79); | |
background-color: var(--bg-color); | |
} | |
.file-list-item { | |
border-bottom:none; | |
} | |
.file-list-item-summary { | |
opacity: 1; | |
} | |
.file-list-item.active:first-child { | |
border-top: none; | |
} | |
.file-node-background { | |
height: 32px; | |
} | |
.file-library-node.active>.file-node-content, | |
.file-list-item.active { | |
color: white; | |
color: var(--active-file-text-color); | |
} | |
.file-library-node.active>.file-node-background{ | |
background-color: rgb(34, 34, 34); | |
background-color: var(--active-file-bg-color); | |
} | |
.file-list-item.active { | |
background-color: rgb(34, 34, 34); | |
background-color: var(--active-file-bg-color); | |
} | |
#ty-tooltip { | |
background-color: black; | |
color: #eee; | |
} | |
.md-task-list-item>input { | |
margin-left: -1.3em; | |
margin-top: 0.3rem; | |
-webkit-appearance: none; | |
} | |
.md-mathjax-midline { | |
background-color: #57616b; | |
border-bottom: none; | |
} | |
footer.ty-footer { | |
border-color: #656565; | |
} | |
.ty-preferences .btn-default { | |
background: transparent; | |
} | |
.ty-preferences .btn-default:hover { | |
background: #57616b; | |
} | |
.ty-preferences select { | |
border: 1px solid #989698; | |
height: 21px; | |
} | |
.ty-preferences .nav-group-item.active { | |
background: var(--item-hover-bg-color); | |
} | |
.ty-preferences input[type="search"] { | |
border-color: #333; | |
background: #333; | |
line-height: 22px; | |
border-radius: 6px; | |
color: white; | |
} | |
.ty-preferences input[type="search"]:focus { | |
box-shadow: none; | |
} | |
[data-is-directory="true"] .file-node-content { | |
margin-bottom: 0; | |
} | |
.file-node-title { | |
line-height: 22px; | |
} | |
.html-for-mac .file-node-open-state, .html-for-mac .file-node-icon { | |
line-height: 26px; | |
} | |
::-webkit-scrollbar-thumb { | |
background: rgba(230, 230, 230, 0.30); | |
} | |
::-webkit-scrollbar-thumb:active { | |
background: rgba(230, 230, 230, 0.50); | |
} | |
#typora-sidebar:hover div.sidebar-content-content::-webkit-scrollbar-thumb:horizontal { | |
background: rgba(230, 230, 230, 0.30); | |
} | |
.nav-group-item:active { | |
background-color: #474d54; | |
} | |
.md-search-hit { | |
background-color: rgba(199, 140, 60, 0.81); | |
color: #eee; | |
} | |
.md-search-hit * { | |
color: #eee; | |
} | |
#md-searchpanel input { | |
color: white; | |
} | |
html, | |
body, | |
button, | |
input, | |
select, | |
textarea { | |
font-family: "PragmataPro Liga", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
} | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
font-family: "PragmataPro Liga", "Lucida Grande", "Corbel", sans-serif; | |
font-weight: normal; | |
clear: both; | |
-ms-word-wrap: break-word; | |
word-wrap: break-word; | |
margin: 0; | |
padding: 0; | |
color: #DEDEDE | |
} | |
pre, | |
code, | |
kbd, | |
tt, | |
var { | |
font-family: "PragmataPro Mono Liga", "Monaco", Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment