Files
typora-theme-Fugu/fugu.css
2024-04-04 20:53:56 +08:00

869 lines
16 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/*
* Typora Theme - Lapis / Author - YiNN
* https://github.com/YiNNx/typora-theme-lapis
*
*********************************************************
*
* fugu基于lapis主题修改
*/
:root {
--text-color: rgb(58, 71, 73);
/* Text */
--primary-color: #4870ac;
/* Primary Color */
--bg-color: #fafafa;
--side-bar-bg-color: var(--bg-color);
/* Background */
--h1-before-content: "# ";
--h2-before-content: "┃";
--h3-before-content: "『 ";
--h3--before-margin-left: -5px;
--h3-after-content: " 』";
--h4-before-content: "♪ ";
--h4-after-content: " ♪";
--marker-color: #a2b6d4;
/* List Marker */
--highlight-color: #ffffb5c2;
/* Highlight */
--header-span-color: var(--primary-color);
/* h2 Span Color */
--block-bg-color: #f6f8fa;
/* Block Background */
--img-shadow-color: #e3e8f0;
/* Overwrite of Typora Base Color */
--search-hit-bg-color: var(--select-text-bg-color);
--search-select-bg-color: #5bb3ff;
--control-text-hover-color: #a2b6d4;
--rawblock-edit-panel-bd: var(--block-bg-color);
--item-hover-bg-color: rgb(246 248 250);
--active-file-bg-color: var(--block-bg-color);
}
@media print {
:root {
--text-color: rgb(0, 0, 0);
}
::-webkit-scrollbar-thumb {
background-color: transparent !important;
}
}
/*
* Font-face for Cantarell, Source Han Serif CN and JetBrains Mono
*/
@font-face {
font-family: "GlowSansSC";
font-weight: 400;
font-style: normal;
src: url("fugu/GlowSansSC-Normal-Book.otf") format("opentype");
}
@font-face {
font-family: "GlowSansSC";
font-weight: bold;
font-style: normal;
src: url("fugu/GlowSansSC-Normal-Bold.otf") format("opentype");
}
@font-face {
font-family: "MonaspaceArgon";
font-weight: bold;
font-style: normal;
src: url("fugu/MonaspaceArgon-Bold.woff") format("woff");
}
@font-face {
font-family: "MonaspaceArgon";
font-weight: bold;
font-style: normal;
src: url("fugu/MonaspaceArgon-Regular.woff") format("woff");
}
@font-face {
font-family: "LXGW";
font-weight: regular;
font-style: normal;
src: url("fugu/LXGW.ttf") format("truetype");
}
/*
* Basic Style
*/
#write {
max-width: 950px;
font-size: 1.1rem;
font-weight: 400;
color: var(--text-color);
line-height: 1.6;
word-spacing: 0px;
letter-spacing: 0px;
word-break: break-word;
word-wrap: break-word;
text-align: left;
font-family: "GlowSansSC";
margin-bottom: 20rem;
}
.searchpanel-search-option-btn {
position: absolute;
width: 24px;
height: 16px;
right: 5px;
top: 5px;
z-index: 99;
cursor: pointer;
margin-top: 1px;
padding: 1px;
border-radius: 3px;
line-height: 10px;
border: 1px solid #ddd;
border-color: var(--active-toggle-btn-color);
}
/* Strong */
#write strong {
color: var(--primary-color);
}
/* Link */
#write a {
color: var(--primary-color);
/* border-bottom: 1px solid var(--primary-color); */
}
#write .md-p a,
#write .md-heading a {
word-wrap: break-word;
text-decoration: underline solid;
margin: 2px;
}
#write h2.md-heading a {
text-decoration: underline;
border-bottom: 0;
text-decoration-thickness: 1.2px;
text-underline-offset: 2px;
}
[md-inline="url"],
[md-inline="link"] > .md-content,
[md-inline="image"] > .md-meta {
word-break: break-all;
font-weight: normal;
font-family: "MonaspaceArgon";
padding-left: 0.15rem;
padding-right: 0rem;
color: var(--marker-color);
}
/*
* TOC
*/
.md-toc-content {
font-family: "GlowSansSC";
}
.md-toc-content:empty:before {
color: var(--primary-color);
}
#write div.md-toc-tooltip {
font-family: "GlowSansSC";
color: var(--primary-color);
position: static;
margin-top: 10px;
background-color: var(--block-bg-color);
line-height: 1.6rem;
padding: 0.3rem 0.75rem;
border-top: none;
/* border-left: 2px solid var(--primary-color);
*/
border-radius: 0.5rem;
}
.md-toc:focus .md-toc-content {
border-color: var(--bg-color);
margin: 9px -1px;
margin-top: 9px;
}
.md-toc .md-toc-content {
border-color: var(--bg-color);
margin: 10px 0px;
margin-top: 10px;
}
/* mark */
mark {
background: var(--highlight-color);
padding: 1px 0.15rem;
border-radius: 1px;
color: inherit;
}
/*
* Paragraph
*/
#write + p,
#write blockquote p {
font-size: 1.1rem;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
margin: 0;
line-height: 1.8rem;
color: #777;
}
/*
* Header
*/
/* #write h4,
#write h5,
#write h6 {
font-weight: normal;
} */
#write h1,
#write h2,
#write h3,
#write h4,
#write h5,
#write h6 {
font-family: "GlowSansSC";
margin: 1em 0 1em;
padding: 0px;
color: var(--primary-color);
}
#write h1 {
font-weight: bold;
border-bottom: 3px solid var(--marker-color);
}
#write h1::before {
content: var(--h1-before-content);
}
#write h2::before {
content: var(--h2-before-content);
}
#write h3::before {
content: var(--h3-before-content);
margin-left: var(--h3--before-margin-left);
}
#write h3::after {
content: var(--h3-after-content);
}
#write h4::before {
content: var(--h4-before-content);
}
#write h4::after {
content: var(--h4-after-content);
}
#write h2 a {
border-bottom-color: var(--bg-color) !important;
}
#write h1 {
font-size: 2rem;
}
#write h2 {
font-size: 1.75rem;
}
#write h3 {
font-size: 1.45rem;
}
#write h4 {
font-size: 1.25rem;
}
#write h5 {
font-size: 1.1rem;
}
#write h6 {
font-size: 1rem;
}
blockquote h3.md-focus:before,
blockquote h4.md-focus:before,
blockquote h5.md-focus:before,
blockquote h6.md-focus:before {
left: -1.3rem;
}
/*
* List
*/
::marker {
font-weight: bold;
color: var(--marker-color);
}
li.md-list-item {
margin: 0.4rem 0;
}
#write ul,
#write ol {
margin-top: 8px;
margin-bottom: 8px;
padding-left: -20px;
}
#write ul {
list-style-type: disc;
}
#write em {
padding: 0 3px 0 0;
}
#write ul ul {
list-style-type: square;
}
#write ol {
list-style-type: decimal;
}
#write li section {
margin-top: 5px;
margin-bottom: 5px;
line-height: 1.7rem;
text-align: justify;
color: var(--text-color);
font-weight: 500;
}
/*
* Quote
*/
#write blockquote {
display: block;
font-size: 0.9em;
font-style: italic;
overflow: auto;
border-left: 5px solid var(--primary-color);
padding: 15px 30px 15px 20px;
margin-bottom: 20px;
margin-top: 20px;
background-color: rgba(66, 139, 185, 0.1);
color: #777;
}
/*
* Inline code
*/
#write code {
color: var(--primary-color);
font-size: 1.1rem;
font-weight: normal;
word-wrap: break-word;
padding: 2px 4px 2px;
border-radius: 7px;
margin: 2px;
background-color: var(--block-bg-color);
font-family: MonaspaceArgon, LXGW;
word-break: break-all;
}
/*
* Img
*/
#write img {
margin: 0 auto;
max-width: 80%;
margin: 0 auto;
}
#write p > .md-image:only-child:not(.md-img-error) img,
#write p > img:only-child {
filter: drop-shadow(var(--img-shadow-color) 0px 6px 6px);
display: block;
margin: 0 auto;
padding: 1rem;
}
/*
* Table
*/
#write table {
display: table;
text-align: left;
overflow-x: auto;
border-collapse: collapse;
border-spacing: 0px;
font-size: 1em;
margin: 0px 0px 20px;
width: 100%;
}
#write tbody {
border: 0;
}
#write table tr {
border: 0;
border-top: 1px solid #ccc;
background-color: white;
}
#write table tr th,
#write table tr td {
font-size: 1rem;
border: 1px solid #d9dfe4;
padding: 5px 10px;
text-align: justify;
}
#write table tr th {
font-family: GlowSansSC;
/* text-align: center; */
min-width: 10rem;
font-weight: bold;
background-color: #f8f8f8;
color: var(--primary-color);
}
#write table tr:nth-child(2n) {
background-color: #f8f8f8;
}
/* #write table tr td:hover,
#write table tr th:hover {
background-color: #4870ac12;
} */
table td {
min-width: 32px;
}
.md-table-resize-popover {
width: auto !important;
}
/* Footnote */
sup.md-footnote {
background-color: var(--block-bg-color);
color: var(--primary-color);
}
.md-def-name {
color: var(--primary-color);
}
/*
* Math Script
*/
.md-inline-math script {
color: var(--primary-color);
}
.md-rawblock-control:not(.md-rawblock-tooltip) {
background: var(--bg-color);
color: var(--md-char-color);
}
.code-tooltip {
box-shadow: none;
}
.md-rawblock-tooltip.md-rawblock-control {
border-radius: 1rem;
}
.md-rawblock .md-rawblock-tooltip {
inset: auto 0.3rem auto auto;
transform: translateY(-120%);
}
/*
* Comment
*/
.md-comment {
color: #a8a8a9;
opacity: 1;
font-family: "MonaspaceArgon";
}
/*
* Dividing line
*/
hr {
background-image: repeating-linear-gradient(
-45deg,
var(--marker-color),
var(--marker-color) 4px,
transparent 4px,
transparent 8px
);
border: 0;
height: 3px;
margin: 40px 0;
}
/* Checkbox */
#write input[type="checkbox"] {
width: 0;
}
.task-list-item input::before {
content: "";
display: inline-block;
width: 1.0125rem;
height: 1.0125rem;
vertical-align: middle;
text-align: center;
border: 1px solid var(--marker-color);
border-radius: 1.2rem;
background-color: #fdfdfd;
margin-left: -0.1rem;
margin-right: 0.1rem;
margin-top: -0.6rem;
}
.task-list-item input:checked::before {
content: "✓";
font-weight: bold;
-webkit-text-stroke: 1px var(--primary-color);
color: var(--primary-color);
background-color: var(--bg-color);
font-size: 0.75rem;
line-height: 0.8rem;
}
blockquote .task-list-item input::before {
margin-top: 0.2rem;
}
/*
* Sidebar
*/
#typora-sidebar {
font-family: "GlowSansSC";
height: 100%;
color: var(--text-color);
font-size: 0.92rem;
background-color: var(--bg-color);
}
#sidebar-content.sidebar-content {
margin-top: 0.5rem;
}
.html-for-mac #write input[type="checkbox"] {
margin-top: 0.65rem;
}
.html-for-mac #write .task-list-item input::before {
margin-top: -0.85rem;
}
/*
* Sidebar - FileNode
*/
.active-tab-files #info-panel-tab-file .info-panel-tab-border,
.active-tab-outline #info-panel-tab-outline .info-panel-tab-border,
.ty-show-search #info-panel-tab-search .info-panel-tab-border {
border-radius: 10px;
height: 1px;
background-color: var(--primary-color);
}
.file-node-content {
color: var(--primary-color);
line-height: 1.6rem;
}
span.file-node-title-name-part {
color: var(--text-color);
}
span.file-node-title-ext-part {
color: var(--text-color);
}
.file-node-icon {
padding-right: 0.2rem;
}
.file-tree-node.active > .file-node-background {
border-left: 4px solid var(--primary-color);
border-color: var(--primary-color);
}
/*
* Sidebar - Outline
*/
#outline-content {
height: 100%;
overflow-x: hidden;
line-height: 1.6rem;
font-size: 0.96rem;
}
#outline-content .outline-active,
.pin-outline .outline-active {
color: var(--primary-color);
}
.outline-item {
padding-left: 2em;
}
.outline-item > .outline-expander:before {
transform: translateY(-1px) !important;
}
/* Meta Block */
pre.md-meta-block {
font-family: "MonaspaceArgon";
color: var(--primary-color);
background: #f6f8fa;
padding: 1.5rem;
margin: -37px 0rem 3.8rem;
/* border-radius: 1rem; */
filter: drop-shadow(var(--img-shadow-color) 0px 3px 3px);
/* border-top: 1px solid var(--primary-color); */
/* border-bottom: 1px solid var(--primary-color); */
}
pre.md-fences-advanced.md-focus .md-fences-adv-panel {
border-radius: 0.8rem;
}
/*
* Scrollbar
*/
#outline-content::-webkit-scrollbar {
width: 0.5rem;
}
#file-library::-webkit-scrollbar {
width: 0.5rem;
}
::-webkit-scrollbar-track {
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: rgba(179, 179, 179, 0.425);
}
::-webkit-scrollbar {
width: 1rem;
}
/*
* Code Block - Style
*/
.md-fences:before {
content: " ";
display: block;
width: 100%;
background-size: 40px;
background-repeat: no-repeat;
/* background-color: #282c34; */
margin-bottom: -7px;
border-radius: 5px;
background-position: 10px 10px;
}
.CodeMirror-wrap .CodeMirror-scroll {
overflow-x: auto;
}
.md-fences .cm-s-inner.CodeMirror {
margin: 1.5rem 0;
}
.cm-s-inner.CodeMirror {
padding: 1.2rem 0.8rem;
color: #4f5467;
font-family: MonaspaceArgon, LXGW;
border-radius: 10px;
background-color: var(--block-bg-color);
/* border: 1px solid #eef2f5;*/
line-height: 1.6rem;
}
.CodeMirror-gutters {
border-right: 1px solid #a2b6d452;
background: inherit;
white-space: nowrap;
}
pre.CodeMirror-line {
padding: 0 1.2rem;
}
.CodeMirror-linenumber {
padding: 0 3px 0 5px;
text-align: right;
color: var(--primary-color);
}
/*
* Code Block - Color Scheme
*/
/* 关键字 */
.cm-s-inner .cm-keyword {
color: #a626a4 !important;
}
/* 操作符 */
.cm-s-inner .cm-operator {
color: #005cc5 !important;
}
.cm-s-inner .cm-property {
color: #a649ae !important;
}
/* 变量和函数名 */
.cm-s-inner .cm-variable {
color: #5a68ee !important;
}
.cm-s-inner .cm-def {
color: #c18401 !important;
}
/* 内置函数/类型 */
.cm-s-inner .cm-builtin,
.cm-s-inner .cm-type {
color: #005cc5 !important;
}
/* 数字 */
.cm-s-inne-86801number {
color: #d73a49 !important;
}
/* 字符串 */
.cm-s-inner .cm-string {
color: #67a154 !important;
}
/* 注释 */
.cm-s-inner .cm-comment {
color: #a0a1a7 !important;
}
/* 元数据和属性 */
.cm-s-inner .cm-meta,
.cm-s-inner .cm-attribute {
color: #22863a !important;
}
/* 错误 */
.cm-s-inner .cm-error {
background-color: #f97583 !important;
color: #ffffff !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) !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);
}
/*
* Sitting - Unibody
*/
.megamenu-menu-header {
border: none;
color: var(--text-color);
}
.megamenu-menu-header #megamenu-back-btn,
.megamenu-menu-header .megamenu-menu-header-title-back,
.megamenu-menu-header .megamenu-menu-header-title-menu {
color: var(--text-color);
}
.megamenu-menu {
background-color: var(--bg-color);
color: var(--text-color);
box-shadow: none !important;
}
header,
#megamenu-content {
background-color: var(--bg-color);
background-image: none !important;
}
.md-search-hit {
background-color: var(--search-hit-bg-color);
}
#recent-file-panel tbody tr:nth-child(2n-1) {
background-color: var(--recent-file-panel-n-bg-color);
color: var(--recent-file-panel-n-color);
}