AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

typora中newsprint.css主题调试！

2022-10-16 295
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： typora中newsprint.css主题调试！

01、newsprint.css主题

/* meyer reset -- http://meyerweb.com/eric/tools/css/reset/ , v2.0 | 20110126 | License: none (public domain) */
 
@include-when-export url(https://fonts.loli.net/css?family=PT+Serif:400,400italic,700,700italic&subset=latin,cyrillic-ext,cyrillic,latin-ext);
 
/* =========== */
 
/* pt-serif-regular - latin */
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: normal;
    src: local('PT Serif'), local('PTSerif-Regular'), url('./newsprint/pt-serif-v11-latin-regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* pt-serif-italic - latin */
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: normal;
    src: local('PT Serif Italic'), local('PTSerif-Italic'), url('./newsprint/pt-serif-v11-latin-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* pt-serif-700 - latin */
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: bold;
    src: local('PT Serif Bold'), local('PTSerif-Bold'), url('./newsprint/pt-serif-v11-latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* pt-serif-700italic - latin */
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: bold;
    src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url('./newsprint/pt-serif-v11-latin-700italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 
:root {
    --active-file-bg-color: #dadada;
    --active-file-bg-color: rgba(32, 43, 51, 0.63);
    --active-file-text-color: white;
    --bg-color: #f3f2ee;
    --text-color: #1f0909;
    --control-text-color: #444;
    --rawblock-edit-panel-bd: #e5e5e5;
 
    --select-text-bg-color: rgba(32, 43, 51, 0.63);
  --select-text-font-color: white;
}
 
pre {
    --select-text-bg-color: #36284e;
    --select-text-font-color: #fff;
}
 
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}
 
html, body {
    background-color: #f3f2ee;
    font-family: "PT Serif", 'Times New Roman', Times, serif;
    color: #1f0909;
    line-height: 1.5em;
}
 
/*#write {
    overflow-x: auto;
    max-width: initial;
    padding-left: calc(50% - 17em);
    padding-right: calc(50% - 17em);
}
 
@media (max-width: 36em) {
    #write {
        padding-left: 1em;
        padding-right: 1em;
    }
}*/
 
#write {
    max-width: 40em;
}
 
@media only screen and (min-width: 1400px) {
    #write {
            max-width: 914px;
    }
}
 
ol li {
    list-style-type: decimal;
    list-style-position: outside;
}
ul li {
    list-style-type: disc;
    list-style-position: outside;
}
 
ol,
ul {
    list-style: none;
}
 
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* styles */
 
/* ====== */
 
/* headings */
 
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
}
h1 {
    font-size: 1.875em;
    /*30 / 16*/
    line-height: 1.6em;
    /* 48 / 30*/
    margin-top: 2em;
}
h2,
h3 {
    font-size: 1.3125em;
    /*21 / 16*/
    line-height: 1.15;
    /*24 / 21*/
    margin-top: 2.285714em;
    /*48 / 21*/
    margin-bottom: 1.15em;
    /*24 / 21*/
}
h3 {
    font-weight: normal;
}
h4 {
    font-size: 1.125em;
    /*18 / 16*/
    margin-top: 2.67em;
    /*48 / 18*/
}
h5,
h6 {
    font-size: 1em;
    /*16*/
}
h1 {
    border-bottom: 1px solid;
    margin-bottom: 1.875em;
    padding-bottom: 0.8125em;
}
/* links */
 
a {
    text-decoration: none;
    color: #065588;
}
a:hover,
a:active {
    text-decoration: underline;
}
/* block spacing */
 
p,
blockquote,
.md-fences {
    margin-bottom: 1.5em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 1.5em;
}
/* blockquote */
 
blockquote {
    font-style: italic;
    border-left: 5px solid;
    margin-left: 2em;
    padding-left: 1em;
}
/* lists */
 
ul,
ol {
    margin: 0 0 1.5em 1.5em;
}
/* tables */
.md-meta,.md-before, .md-after {
    color:#999;
}
 
table {
    margin-bottom: 1.5em;
    /*24 / 16*/
    font-size: 1em;
    /* width: 100%; */
}
thead th,
tfoot th {
    padding: .25em .25em .25em .4em;
    text-transform: uppercase;
}
th {
    text-align: left;
}
td {
    vertical-align: top;
    padding: .25em .25em .25em .4em;
}
 
code,
.md-fences {
    background-color: #dadada1c; /* 自定义 */
}
 
code {
    padding-left: 2px;
    padding-right: 2px;
}
 
.md-fences {  /* 自定义 */
    margin-left: 0em;
    margin-bottom: 1em;
    padding-left: 1ch;
    padding-right: 1ch;
}
 
pre,
code,
tt {
    font-size: .875em;
    line-height: 1.714285em;
}
/* some fixes */
 
h1 {
    line-height: 1.3em;
    font-weight: normal;
    margin-bottom: 0.5em;
}
 
p + ul,
p + ol{
    margin-top: .5em;
}
 
h3 + ul,
h4 + ul,
h5 + ul,
h6 + ul,
h3 + ol,
h4 + ol,
h5 + ol,
h6 + ol {
    margin-top: .5em;
}
 
li > ul,
li > ol {
    margin-top: inherit;
    margin-bottom: 0;
}
 
li ol>li {
    list-style-type: lower-alpha;
}
 
li li ol>li{
    list-style-type: lower-roman;
}
 
h2,
h3 {
    margin-bottom: .75em;
}
hr {
    border-top: none;
    border-right: none;
    border-bottom: 1px solid;
    border-left: none;
}
h1 {
    border-color: #c5c5c5;
}
blockquote {
    border-color: #bababa;
    color: #656565;
}
 
blockquote ul,
blockquote ol {
    margin-left:0;
}
 
.ty-table-edit {
    background-color: transparent;
}
thead {
    background-color: #dadada;
}
tr:nth-child(even) {
    background: #e8e7e7;
}
hr {
    border-color: #c5c5c5;
}
.task-list{
    padding-left: 1rem;
}
 
.md-task-list-item {
    padding-left: 1.5rem;
    list-style-type: none;
}
 
.md-task-list-item > input:before {
    content: '\221A';
    display: inline-block;
    width: 1.25rem;
    height: 1.6rem;
    vertical-align: middle;
    text-align: center;
    color: #ddd;
    background-color: #F3F2EE;
}
 
.md-task-list-item > input:checked:before,
.md-task-list-item > input[checked]:before{
    color: inherit;
}
 
#write pre.md-meta-block {
    min-height: 1.875rem;
    color: #555;
    border: 0px;
    background: transparent;
    margin-top: -4px;
    margin-left: 1em;
    margin-top: 1em;
}
 
.md-image>.md-meta {
    color: #9B5146;
}
 
.md-image>.md-meta{
    font-family: Menlo, 'Ubuntu Mono', Consolas, 'Courier New', 'Microsoft Yahei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', serif;
}
 
 
#write>h3.md-focus:before{
    left: -1.5rem;
    color:#999;
    border-color:#999;
}
#write>h4.md-focus:before{
    left: -1.5rem;
    top: .25rem;
    color:#999;
    border-color:#999;
}
#write>h5.md-focus:before{
    left: -1.5rem;
    top: .0.3125rem;
    color:#999;
    border-color:#999;
}
#write>h6.md-focus:before{
    left: -1.5rem;
    top: 0.3125rem;
    color:#999;
    border-color:#999;
}
 
.md-toc:focus .md-toc-content{
    margin-top: 19px;
}
 
.md-toc-content:empty:before{
    color: #065588;
}
.md-toc-item {
    color: #065588;
}
#write div.md-toc-tooltip {
    background-color: #f3f2ee;
}
 
#typora-sidebar {
    background-color: #f3f2ee;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.375);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.375);
}
 
.pin-outline #typora-sidebar {
    background: inherit;
    box-shadow: none;
    border-right: 1px dashed;
}
 
.pin-outline #typora-sidebar:hover .outline-title-wrapper {
    border-left:1px dashed;
}
 
.outline-item:hover {
  background-color: #dadada;
  border-left: 28px solid #dadada;
  border-right: 18px solid #dadada;
}
 
.typora-node .outline-item:hover {
    border-right: 28px solid #dadada;
}
 
.outline-expander:before {
  content: "\f0da";
  font-family: FontAwesome;
  font-size:14px;
  top: 1px;
}
 
.outline-expander:hover:before,
.outline-item-open>.outline-item>.outline-expander:before {
  content: "\f0d7";
}
 
.modal-content {
    background-color: #f3f2ee;
}
 
.auto-suggest-container ul li {
    list-style-type: none;
}
 
/** UI for electron */
 
.megamenu-menu,
#top-titlebar, #top-titlebar *,
.megamenu-content {
    background: #f3f2ee;
    color: #1f0909;
}
 
.megamenu-menu-header {
    border-bottom: 1px dashed #202B33;
}
 
.megamenu-menu {
    box-shadow: none;
    border-right: 1px dashed;
}
 
header, .context-menu, .megamenu-content, footer {
    font-family: "PT Serif", 'Times New Roman', Times, serif;
    color: #1f0909;
}
 
#megamenu-back-btn {
    color: #1f0909;
    border-color: #1f0909;
}
 
.megamenu-menu-header #megamenu-menu-header-title:before {
    color: #1f0909;
}
 
.megamenu-menu-list li a:hover, .megamenu-menu-list li a.active {
    color: inherit;
    background-color: #e8e7df;
}
 
.long-btn:hover {
    background-color: #e8e7df;
}
 
#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 {
    background-color: #D2D1D1;
}
 
.btn-default {
    background-color: transparent;
}
 
.typora-sourceview-on #toggle-sourceview-btn,
.ty-show-word-count #footer-word-count {
    background: #c7c5c5;
}
 
#typora-quick-open {
    background-color: inherit;
}
 
.md-diagram-panel {
    margin-top: 8px;
}
 
.file-list-item-file-name {
    font-weight: initial;
}
 
.file-list-item-summary {
    opacity: 1;
}
 
.file-list-item {
    color: #777;
}
 
.file-list-item.active {
    background-color: inherit;
    color: black;
}
 
.ty-side-sort-btn.active {
    background-color: inherit;
}
 
.file-list-item.active .file-list-item-file-name  {
    font-weight: bold;
}
 
.file-list-item{
    opacity:1 !important;
}
 
.file-library-node.active>.file-node-background{
    background-color: rgba(32, 43, 51, 0.63);
    background-color: var(--active-file-bg-color);
}
 
.file-tree-node.active>.file-node-content{
    color: white;
    color: var(--active-file-text-color);
}
 
.md-task-list-item>input {
    margin-left: -1.7em;
    margin-top: calc(1rem - 12px);
}
 
input {
    border: 1px solid #aaa;
}
 
.megamenu-menu-header #megamenu-menu-header-title,
.megamenu-menu-header:hover, 
.megamenu-menu-header:focus {
    color: inherit;
}
 
.dropdown-menu .divider {
    border-color: #e5e5e5;
    opacity: 1;
}
 
/* https://github.com/typora/typora-issues/issues/2046 */
.os-windows-7 strong,
.os-windows-7 strong  {
    font-weight: 760;
}
 
.ty-preferences .btn-default {
    background: transparent;
}
 
.ty-preferences .window-header {
    border-bottom: 1px dashed #202B33;
    box-shadow: none;
}
 
#sidebar-loading-template, #sidebar-loading-template.file-list-item {
    color: #777;
}
 
.searchpanel-search-option-btn.active {
    background: #777;
    color: white;
}


/*yykk 自定义*/
.md-fences{margin-left: 0!important;}
.outline-item-active{background: @6fd18d;color: #fff;}
.outline-content li, .outline-content ul{margin: 5px 0!important;}
.ul-list{margin: 0!important;}
.blockquote{margin: 10px 0!important; background: #f8f8f8!important;}
img{padding: 15px!important; background: #f8f8f8!important;}


#write h1, #write h2,#write h3, #write h4 ,#write h5, #write h6{color: #5fb93a!important;font-weight: 700!important;}
#write h1:before{content: "📚";padding-right: 4px;display: inline-block;}
#write h2:before{content: "🍊";padding-right: 4px;display: inline-block;}
#write h3:before{content: "🍓";padding-right: 4px;display: inline-block;}
#write h4:before{content: "🍑";padding-right: 4px;display: inline-block;}
#write h5:before{content: "🍭";padding-right: 4px;display: inline-block;}
#write h6:before{content: "🍐";padding-right: 4px;display: inline-block;}

02、newsprint主题--飞哥

/* meyer reset -- http://meyerweb.com/eric/tools/css/reset/ , v2.0 | 20110126 | License: none (public domain) */

@include-when-export url(https://fonts.loli.net/css?family=PT+Serif:400,400italic,700,700italic&subset=latin,cyrillic-ext,cyrillic,latin-ext);

/* =========== */

/* pt-serif-regular - latin */
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: normal;
    src: local('PT Serif'), local('PTSerif-Regular'), url('./newsprint/pt-serif-v11-latin-regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* pt-serif-italic - latin */
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: normal;
    src: local('PT Serif Italic'), local('PTSerif-Italic'), url('./newsprint/pt-serif-v11-latin-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* pt-serif-700 - latin */
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: bold;
    src: local('PT Serif Bold'), local('PTSerif-Bold'), url('./newsprint/pt-serif-v11-latin-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* pt-serif-700italic - latin */
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: bold;
    src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url('./newsprint/pt-serif-v11-latin-700italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --active-file-bg-color: #dadada;
    --active-file-bg-color: rgba(32, 43, 51, 0.63);
    --active-file-text-color: white;
    --bg-color: #f3f2ee;
    --text-color: #1f0909;
    --control-text-color: #444;
    --rawblock-edit-panel-bd: #e5e5e5;

    --select-text-bg-color: rgba(32, 43, 51, 0.63);
  --select-text-font-color: white;
}

pre {
    --select-text-bg-color: #36284e;
    --select-text-font-color: #fff;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

html, body {
    background-color: #f3f2ee;
    font-family: "PT Serif", 'Times New Roman', Times, serif;
    color: #1f0909;
    line-height: 1.5em;
}

/*#write {
    overflow-x: auto;
    max-width: initial;
    padding-left: calc(50% - 17em);
    padding-right: calc(50% - 17em);
}

@media (max-width: 36em) {
    #write {
        padding-left: 1em;
        padding-right: 1em;
    }
}*/

#write {
    max-width: 40em;
}

@media only screen and (min-width: 1400px) {
    #write {
            max-width: 914px;
    }
}

ol li {
    list-style-type: decimal;
    list-style-position: outside;
}
ul li {
    list-style-type: disc;
    list-style-position: outside;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* styles */

/* ====== */

/* headings */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
}
h1 {
    font-size: 1.875em;
    /*30 / 16*/
    line-height: 1.6em;
    /* 48 / 30*/
    margin-top: 2em;
}
h2,
h3 {
    font-size: 1.3125em;
    /*21 / 16*/
    line-height: 1.15;
    /*24 / 21*/
    margin-top: 2.285714em;
    /*48 / 21*/
    margin-bottom: 1.15em;
    /*24 / 21*/
}
h3 {
    font-weight: normal;
}
h4 {
    font-size: 1.125em;
    /*18 / 16*/
    margin-top: 2.67em;
    /*48 / 18*/
}
h5,
h6 {
    font-size: 1em;
    /*16*/
}
h1 {
    border-bottom: 1px solid;
    margin-bottom: 1.875em;
    padding-bottom: 0.8125em;
}
/* links */

a {
    text-decoration: none;
    color: #065588;
}
a:hover,
a:active {
    text-decoration: underline;
}
/* block spacing */

p,
blockquote,
.md-fences {
    margin-bottom: 1.5em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 1.5em;
}
/* blockquote */

blockquote {
    font-style: italic;
    border-left: 5px solid;
    /* margin-left: 2em; */
    padding: 1em;
    background: #fefefe;
}
/* lists */

ul,
ol {
    margin:0;
}
/* tables */
.md-meta,.md-before, .md-after {
    color:#999;
}

table {
    margin-bottom: 1.5em;
    /*24 / 16*/
    font-size: 1em;
    /* width: 100%; */
}
thead th,
tfoot th {
    padding: .25em .25em .25em .4em;
    text-transform: uppercase;
}
th {
    text-align: left;
}
td {
    vertical-align: top;
    padding: .25em .25em .25em .4em;
}

code,
.md-fences {
    background-color: #dadada;
}

code {
    padding-left: 2px;
    padding-right: 2px;
}

.md-fences {
    margin:15px 0;
    padding:10px;
}

pre,
code,
tt {
    font-size: .875em;
    line-height: 1.714285em;
}
/* some fixes */

h1 {
    line-height: 1.3em;
    font-weight: normal;
    margin-bottom: 0.5em;
}

p + ul,
p + ol{
    margin-top: .5em;
}

h3 + ul,
h4 + ul,
h5 + ul,
h6 + ul,
h3 + ol,
h4 + ol,
h5 + ol,
h6 + ol {
    margin-top: .5em;
}

li > ul,
li > ol {
    margin-top: inherit;
    margin-bottom: 0;
}

li ol>li {
    list-style-type: lower-alpha;
}

li li ol>li{
    list-style-type: lower-roman;
}

h2,
h3 {
    margin-bottom: .75em;
}
hr {
    border-top: none;
    border-right: none;
    border-bottom: 1px solid;
    border-left: none;
}
h1 {
    border-color: #c5c5c5;
}
blockquote {
    border-color: #17d02e;
    color: #656565;
}

blockquote ul,
blockquote ol {
    margin-left:0;
}

.ty-table-edit {
    background-color: transparent;
}
thead {
    background-color: #dadada;
}
tr:nth-child(even) {
    background: #e8e7e7;
}
hr {
    border-color: #c5c5c5;
}
.task-list{
    padding-left: 1rem;
}

.md-task-list-item {
    padding-left: 1.5rem;
    list-style-type: none;
}

.md-task-list-item > input:before {
    content: '\221A';
    display: inline-block;
    width: 1.25rem;
    height: 1.6rem;
    vertical-align: middle;
    text-align: center;
    color: #ddd;
    background-color: #F3F2EE;
}

.md-task-list-item > input:checked:before,
.md-task-list-item > input[checked]:before{
    color: inherit;
}

#write pre.md-meta-block {
    min-height: 1.875rem;
    color: #555;
    border: 0px;
    background: transparent;
    margin-top: -4px;
    margin-left: 1em;
    margin-top: 1em;
}

.md-image>.md-meta {
    color: #9B5146;
}

.md-image>.md-meta{
    font-family: Menlo, 'Ubuntu Mono', Consolas, 'Courier New', 'Microsoft Yahei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', serif;
}


#write>h3.md-focus:before{
    left: -1.5rem;
    color:#999;
    border-color:#999;
}
#write>h4.md-focus:before{
    left: -1.5rem;
    top: .25rem;
    color:#999;
    border-color:#999;
}
#write>h5.md-focus:before{
    left: -1.5rem;
    top: .0.3125rem;
    color:#999;
    border-color:#999;
}
#write>h6.md-focus:before{
    left: -1.5rem;
    top: 0.3125rem;
    color:#999;
    border-color:#999;
}

.md-toc:focus .md-toc-content{
    margin-top: 19px;
}

.md-toc-content:empty:before{
    color: #065588;
}
.md-toc-item {
    color: #065588;
}
#write div.md-toc-tooltip {
    background-color: #f3f2ee;
}

#typora-sidebar {
    background-color: #f3f2ee;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.375);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.375);
}

.pin-outline #typora-sidebar {
    background: inherit;
    box-shadow: none;
    border-right: 1px dashed;
}

.pin-outline #typora-sidebar:hover .outline-title-wrapper {
    border-left:1px dashed;
}

.outline-item:hover {
  background-color: #dadada;
  border-left: 28px solid #dadada;
  border-right: 18px solid #dadada;
}

.typora-node .outline-item:hover {
    border-right: 28px solid #dadada;
}

.outline-expander:before {
  content: "\f0da";
  font-family: FontAwesome;
  font-size:14px;
  top: 1px;
}

.outline-expander:hover:before,
.outline-item-open>.outline-item>.outline-expander:before {
  content: "\f0d7";
}

.modal-content {
    background-color: #f3f2ee;
}

.auto-suggest-container ul li {
    list-style-type: none;
}

/** UI for electron */

.megamenu-menu,
#top-titlebar, #top-titlebar *,
.megamenu-content {
    background: #f3f2ee;
    color: #1f0909;
}

.megamenu-menu-header {
    border-bottom: 1px dashed #202B33;
}

.megamenu-menu {
    box-shadow: none;
    border-right: 1px dashed;
}

header, .context-menu, .megamenu-content, footer {
    font-family: "PT Serif", 'Times New Roman', Times, serif;
    color: #1f0909;
}

#megamenu-back-btn {
    color: #1f0909;
    border-color: #1f0909;
}

.megamenu-menu-header #megamenu-menu-header-title:before {
    color: #1f0909;
}

.megamenu-menu-list li a:hover, .megamenu-menu-list li a.active {
    color: inherit;
    background-color: #e8e7df;
}

.long-btn:hover {
    background-color: #e8e7df;
}

#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 {
    background-color: #D2D1D1;
}

.btn-default {
    background-color: transparent;
}

.typora-sourceview-on #toggle-sourceview-btn,
.ty-show-word-count #footer-word-count {
    background: #c7c5c5;
}

#typora-quick-open {
    background-color: inherit;
}

.md-diagram-panel {
    margin-top: 8px;
}

.file-list-item-file-name {
    font-weight: initial;
}

.file-list-item-summary {
    opacity: 1;
}

.file-list-item {
    color: #777;
}

.file-list-item.active {
    background-color: inherit;
    color: black;
}

.ty-side-sort-btn.active {
    background-color: inherit;
}

.file-list-item.active .file-list-item-file-name  {
    font-weight: bold;
}

.file-list-item{
    opacity:1 !important;
}

.file-library-node.active>.file-node-background{
    background-color: rgba(32, 43, 51, 0.63);
    background-color: var(--active-file-bg-color);
}

.file-tree-node.active>.file-node-content{
    color: white;
    color: var(--active-file-text-color);
}

.md-task-list-item>input {
    margin-left: -1.7em;
    margin-top: calc(1rem - 12px);
}

input {
    border: 1px solid #aaa;
}

.megamenu-menu-header #megamenu-menu-header-title,
.megamenu-menu-header:hover, 
.megamenu-menu-header:focus {
    color: inherit;
}

.dropdown-menu .divider {
    border-color: #e5e5e5;
    opacity: 1;
}

/* https://github.com/typora/typora-issues/issues/2046 */
.os-windows-7 strong,
.os-windows-7 strong  {
    font-weight: 760;
}

.ty-preferences .btn-default {
    background: transparent;
}

.ty-preferences .window-header {
    border-bottom: 1px dashed #202B33;
    box-shadow: none;
}

#sidebar-loading-template, #sidebar-loading-template.file-list-item {
    color: #777;
}

.searchpanel-search-option-btn.active {
    background: #777;
    color: white;
}





.md-fences{margin-left:0!important}
.outline-item-active{background:#6fd18d;color:#fff;}
.outline-content li, .outline-content ul{margin:5px 0!important; }
.ul-list{margin:0!important}
.blockquote{margin:10px 0!important;padding:10px!important;border-color:#6fd047!importnat;}
img{padding:15px!important;background:#f8f8f8!important;}

#write h1, #write h2, #write h3, #write h4, #write h5, #write h6{color:##5fb93a!important;font-weight:700!important;}
#write h1:before{content:"📚";padding-right:4px;display:inline-block;}
#write h2:before{content:"🍊";padding-right:4px;display:inline-block;}
#write h3:before{content:"🍐";padding-right:4px;display:inline-block;}
#write h4:before{content:"📦";padding-right:4px;display:inline-block;}
#write h5:before{content:"🧬";padding-right:4px;display:inline-block;}
#write h6:before{content:"🐞";padding-right:4px;display:inline-block;}

03、对于newsprint主题的优化

  1. 美化前后效果对比
    美化前

img

美化后

img

  1. 代码块背景颜色与代码块布局
    在NewsPrint的基础上进行了一点css的微调，优化了代码的背景颜色，得到了比较满意的样式。

在newsprint.css文件中修改.md-fences的background-color属性。

code,`
`.md-fences {`
`  background-color: #dadada1c; /* 自定义 */`
`}

还优化了代码块的布局。

在newsprint.css文件中修改.md-fences的布局属性。

.md-fences {  /* 自定义 */`
`  margin-left: 0em;`
`  margin-bottom: 1em;`
`  padding-left: 1ch;`
`  padding-right: 1ch;`
`}
  1. 关于图片缩放
    发现一个与图片缩放有关的问题，在Typora中，图片一般会模糊化，这与CSS有关，具体原因不是很清楚，可能是采用了一些不能保证清晰度的图片缩放算法。

解决方案：在newprint.css中为img标签添加一个样式，作用是在缩放图片时使用最邻近算法，提升缩放图片的清晰度

img {`
`  image-rendering: -webkit-optimize-contrast; /* 自定义 */`
`}
  1. 关于字体
    newprint.css中的字体设置如下
html, body {`
`  font-family: "PT Serif", 'Times New Roman', Times, serif;`
`}

个人推荐将PT Serif作为英文字体，Serif是衬线的意思，微软雅黑（Microsoft YaHei）作为中文字体。

新的样式配置如下，将"PT Serif"放在'Microsoft YaHei'的前面，因为'Microsoft YaHei'也包含英文和数字字符，放在前面会覆盖掉"PT Serif"字体。

html, body {`
`  font-family: "PT Serif", 'Microsoft YaHei'; /* 自定义 */`
`}

代码快则使用默认的经典consoles字体

04、拓展--Vue主题

@import 'vue/fonts.css';

:root {
    --side-bar-bg-color: #fff;
    --control-text-color: #777;
    --font-sans-serif: 'Ubuntu', 'Source Sans Pro', sans-serif !important;
    --font-monospace: 'Fira Code', 'Roboto Mono', monospace !important;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-sans-serif);
    color: #34495e;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6rem;
    letter-spacing: 0;
    margin: 0;
    overflow-x: hidden;
}

#write {
    max-width: 860px;
    margin: 0 auto;
    padding: 20px 30px 100px;
}

#write p {
    line-height: 1.6rem;
    word-spacing: .05rem;
}

#write ol li {
    padding-left: 0.5rem;
}

#write > ul:first-child,
#write > ol:first-child {
    margin-top: 30px;
}

body > *:first-child {
    margin-top: 0 !important;
}

body > *:last-child {
    margin-bottom: 0 !important;
}

a {
    color: #42b983;
    font-weight: 600;
    padding: 0 2px;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    line-height: 1.4;
    cursor: text;
}

h1:hover a.anchor,
h2:hover a.anchor,
h3:hover a.anchor,
h4:hover a.anchor,
h5:hover a.anchor,
h6:hover a.anchor {
    text-decoration: none;
}

h1 tt,
h1 code {
    font-size: inherit !important;
}

h2 tt,
h2 code {
    font-size: inherit !important;
}

h3 tt,
h3 code {
    font-size: inherit !important;
}

h4 tt,
h4 code {
    font-size: inherit !important;
}

h5 tt,
h5 code {
    font-size: inherit !important;
}

h6 tt,
h6 code {
    font-size: inherit !important;
}

h2 a,
h3 a {
    color: #34495e;
}

h1 {
    padding-bottom: .4rem;
    font-size: 2.2rem;
    line-height: 1.3;
}

h2 {
    font-size: 1.75rem;
    line-height: 1.225;
    margin: 35px 0 15px;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #ddd;
}

h3 {
    font-size: 1.4rem;
    line-height: 1.43;
    margin: 20px 0 7px;
}

h4 {
    font-size: 1.2rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 1rem;
    color: #777;
}

p,
blockquote,
ul,
ol,
dl,
table {
    margin: 0.8em 0;
}

li > ol,
li > ul {
    margin: 0 0;
}

hr {
    height: 2px;
    padding: 0;
    margin: 16px 0;
    background-color: #e7e7e7;
    border: 0 none;
    overflow: hidden;
    box-sizing: content-box;
}

body > h2:first-child {
    margin-top: 0;
    padding-top: 0;
}

body > h1:first-child {
    margin-top: 0;
    padding-top: 0;
}

body > h1:first-child + h2 {
    margin-top: 0;
    padding-top: 0;
}

body > h3:first-child,
body > h4:first-child,
body > h5:first-child,
body > h6:first-child {
    margin-top: 0;
    padding-top: 0;
}

a:first-child h1,
a:first-child h2,
a:first-child h3,
a:first-child h4,
a:first-child h5,
a:first-child h6 {
    margin-top: 0;
    padding-top: 0;
}

h1 p,
h2 p,
h3 p,
h4 p,
h5 p,
h6 p {
    margin-top: 0;
}

li p.first {
    display: inline-block;
}

ul,
ol {
    padding-left: 30px;
}

ul:first-child,
ol:first-child {
    margin-top: 0;
}

ul:last-child,
ol:last-child {
    margin-bottom: 0;
}

blockquote {
    border-left: 4px solid #42b983;
    padding: 10px 15px;
    color: #777;
    background-color: rgba(66, 185, 131, .1);
}

table {
    padding: 0;
    word-break: initial;
}

table tr {
    border-top: 1px solid #dfe2e5;
    margin: 0;
    padding: 0;
}

table tr:nth-child(2n),
thead {
    background-color: #fafafa;
}

table tr th {
    font-weight: bold;
    border: 1px solid #dfe2e5;
    border-bottom: 0;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
}

table tr td {
    border: 1px solid #dfe2e5;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
}

table tr th:first-child,
table tr td:first-child {
    margin-top: 0;
}

table tr th:last-child,
table tr td:last-child {
    margin-bottom: 0;
}

#write strong {
    padding: 0 1px;
}

#write em {
    padding: 0 5px 0 2px;
}

#write table thead th {
    background-color: #f2f2f2;
}

#write .CodeMirror-gutters {
    border-right: none;
}

#write .md-fences {
    border: 1px solid #F4F4F4;
    -webkit-font-smoothing: initial;
    margin: 0.8rem 0 !important;
    padding: 0.3rem 0 !important;
    line-height: 1.43rem;
    background-color: #F8F8F8 !important;
    border-radius: 2px;
    font-family: var(--font-monospace);
    font-size: 0.85rem;
    word-wrap: normal;
}

#write .CodeMirror-wrap .CodeMirror-code pre {
    padding-left: 12px;
}

#write code, tt {
    padding: 2px 4px;
    border-radius: 2px;
    font-family: var(--font-monospace);
    font-size: 0.92rem;
    color: #e96900;
    background-color: #f8f8f8;
}

tt {
    margin: 0 2px;
}

#write .md-footnote {
    background-color: #f8f8f8;
    color: #e96900;
}

/* heighlight. */
#write mark {
    background-color: #EBFFEB;
    border-radius: 2px;
    padding: 2px 4px;
    margin: 0 2px;
    color: #222;
    font-weight: 500;
}

#write del {
    padding: 1px 2px;
}

.cm-s-inner .cm-link,
.cm-s-inner.cm-link {
    color: #22a2c9;
}

.cm-s-inner .cm-string {
    color: #22a2c9;
}

.md-task-list-item > input {
    margin-left: -1.3em;
}

@media print {
    html {
        font-size: 13px;
    }

    table,
    pre {
        page-break-inside: avoid;
    }

    pre {
        word-wrap: break-word;
    }
}

.md-fences {
    background-color: #f8f8f8;
}

.md-diagram-panel {
    position: static !important;
}

#write pre.md-meta-block {
    padding: 1rem;
    font-size: 85%;
    line-height: 1.45;
    background-color: #f7f7f7;
    border: 0;
    border-radius: 3px;
    color: #777777;
    margin-top: 0 !important;
}

.mathjax-block > .code-tooltip {
    bottom: .375rem;
}

#write > h3.md-focus:before {
    left: -1.5625rem;
    top: .375rem;
}

#write > h4.md-focus:before {
    left: -1.5625rem;
    top: .285714286rem;
}

#write > h5.md-focus:before {
    left: -1.5625rem;
    top: .285714286rem;
}

#write > h6.md-focus:before {
    left: -1.5625rem;
    top: .285714286rem;
}

.md-image > .md-meta {
    border-radius: 3px;
    font-family: var(--font-monospace);
    padding: 2px 0 0 4px;
    font-size: 0.9em;
    color: inherit;
}

.md-tag {
    color: inherit;
}

.md-toc {
    margin-top: 20px;
    padding-bottom: 20px;
}

.sidebar-tabs {
    border-bottom: none;
}

#typora-quick-open {
    border: 1px solid #ddd;
    background-color: #f8f8f8;
}

#typora-quick-open-item {
    background-color: #FAFAFA;
    border-color: #FEFEFE #e5e5e5 #e5e5e5 #eee;
    border-style: solid;
    border-width: 1px;
}

#md-notification:before {
    top: 10px;
}

/** focus mode */

.on-focus-mode blockquote {
    border-left-color: rgba(85, 85, 85, 0.12);
}

header,
.context-menu,
.megamenu-content,
footer {
    font-family: var(--font-sans-serif);
}

.file-node-content:hover .file-node-icon,
.file-node-content:hover .file-node-open-state {
    visibility: visible;
}

.mac-seamless-mode #typora-sidebar {
    background-color: var(--side-bar-bg-color);
}

.md-lang {
    color: #b4654d;
}

.html-for-mac .context-menu {
    --item-hover-bg-color: #E6F0FE;
}
文章标签：
JavaScript
前端开发
算法
关键词：
typora CSS
游客wazjug5ieii4a
目录
相关文章
游客r35aptsdr4whc
|
前端开发
Typora使用(包含Markdown使用及注意说明、修改css样式、自动上传图床)
Typora使用(包含Markdown使用及注意说明、修改css样式、自动上传图床)
游客r35aptsdr4whc
390 0
Typora使用(包含Markdown使用及注意说明、修改css样式、自动上传图床)
二二*一一
|
13天前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
36 1
游客fz577umxdejsg
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
游客fz577umxdejsg
75 2
游客fz577umxdejsg
|
3月前
HTML+CSS 实现通用的企业官网页面（记得收藏）
HTML+CSS 实现通用的企业官网页面（记得收藏）
游客fz577umxdejsg
80 2
aliyun8599273441-30642
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代，拥有一个个人博客不仅是展示自我的平台，也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建，涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章，你将学会如何从零开始构建自己的网络空间，并在互联网世界留下你的足迹。
aliyun8599273441-30642
256 65
疯狂的猿
|
24天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码，带歌词显示。包括支持单曲循环，歌词显示，歌曲搜索，音量控制，列表循环等功能。利用json获取音乐歌单和歌词，基于html5 audio属性手机音乐播放器代码。
疯狂的猿
76 6
游客moiomvrp3vyac2
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代，拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识，一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解，这篇文章都将是你的理想指南。我们将探索基本概念，实现页面布局，并点缀以个性化样式，最终将静态页面转变为动态交互式网站。准备好了吗？让我们开始吧！
游客moiomvrp3vyac2
111 4
程序员皮皮林
|
2月前
|
前端开发 数据安全/隐私保护 容器
HTML+CSS 水滴登录页
该代码实现了一个创意的水滴登录页面，包含一个水滴形状的登录框与两个按钮（忘记密码和注册）。登录框包括用户名、密码输入框及登录按钮。页面设计独特，采用渐变色与动态效果，增强了交互性和视觉美感。以下为关键实现步骤： - 重置默认样式。 - 设置页面背景颜色和尺寸。 - 定义登录表单容器的布局、位置和尺寸。 - 设置登录表单内容样式，包括3D效果和过渡动画。 - 创建伪元素增强水滴效果。 - 设定输入框容器和输入框样式。 - 为提交按钮、忘记密码和注册按钮设定特定样式，并添加悬停效果。
程序员皮皮林
32 1
游客zi3qmblbcdexu
|
2月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3（HTML--网页标签 下）
HTML/CSS/JS学习笔记 Day3（HTML--网页标签 下）
游客zi3qmblbcdexu
76 9
游客fz577umxdejsg
|
3月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果？3分钟学会，炫酷到爆！
HTML+CSS如何打造撒花动画效果？3分钟学会，炫酷到爆！
游客fz577umxdejsg
211 2

热门文章

最新文章

  • 1
    CSS 居中方法总结
  • 2
    纯CSS3实现宽屏二级下拉菜单
  • 3
    CSS3实现多样的边框效果
  • 4
    CSS3-实现单选框radio的小动画
  • 5
    使用 CSS3 实现 3D 图片滑块效果【附源码下载】
  • 6
    CSS3实现时间轴效果
  • 7
    【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
  • 8
    05.javascript访问CSS
  • 9
    CSS3中的选择器
  • 10
    Css:背景色透明，内容不透明之终极方法！兼容所有浏览器
  • 1
    使用CSS中的cursor属性值，常用的可设置参数，以及其他16中参数值的使用场景和示例代码
    72
  • 2
    技术心得：xpath、CSS定位方法
    46
  • 3
    【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
    165
  • 4
    CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）
    76
  • 5
    CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）
    142
  • 6
    CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
    51
  • 7
    CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）
    75
  • 8
    CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
    159
  • 9
    使用HTML和CSS创建响应式表格
    167
  • 10
    常见的css优化方案都有那些
    51

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • jQuery开发教程

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • JS零基础入门教程（上册）
  • 低代码开发师（初级）实战教程

    • 相关实验场景

    更多
  • 图表样式智能美化工具
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    无影云桌面