Skip to content

Instantly share code, notes, and snippets.

@Kenshin

Kenshin/simpread_custom_Dakr&Peace.user.css

Last active February 26, 2024 15:33
Show Gist options
  • Save Kenshin/d10d4f4a52c556ef68e073dc443f7e57 to your computer and use it in GitHub Desktop.
Save Kenshin/d10d4f4a52c556ef68e073dc443f7e57 to your computer and use it in GitHub Desktop.
Download ZIP
简悦用户定制样式合辑 with Stylus
Raw
simpread_custom_Dakr&Peace.user.css
/* ==UserStyle==
@name simpread style: Dark & Peace
@namespace simpread.pro
@version 0.1.0
@description dark mode for eye protection
@author eterlen
==/UserStyle== */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;300;400;500&family=Noto+Sans&family=Noto+Sans+SC:wght@100;300;400;500&family=Noto+Sans+TC:wght@100;300;400;500&family=Noto+Serif&family=Noto+Serif+SC:wght@100;300;400;500&family=Noto+Serif+TC:wght@100;300;400;500&family=PT+Serif:wght@400;700&display=swap");
.simpread-theme-root {
background-color: #1E1E1E
}
sr-rd-content img {
margin: 0px;
padding: 0px;
max-width: 50%;
border: 0px;
box-shadow: none;
background: #2b2b2b;
filter: brightness(0.5);
}
sr-rd-content p {
color: rgb(99, 104, 102);
line-height: 1.7;
}
sr-rd-content li code,
sr-rd-content p code {
margin: 0 4px;
font-size: initial;
font-family: auto;
}
sr-rd-content h3 {
font-size: 1.8rem;
line-height: 38.4px;
padding: 1rem 0.2rem;
margin: 1rem 0 0.5rem 3px
}
sr-rd-content a:visited {
color: #6F6F6F
}
sr-rd-content a:link {
color: #AEAEAE
}
sr-rd-content a:hover {
color: #515151
}
sr-rd-content ul {
margin-left: 1em;
}
sr-rd-content ul li {
margin: 0 0 0.3em
}
sr-rd-content pre,
sr-rd-content pre *,
sr-rd-content pre div {
font-size: 1.3rem;
}
Raw
simpread_custom_example.user.css
/* ==UserStyle==
@name simpread style: xxxx
@namespace simpread.pro
@version 0.1.0
@description xxxx style for simpread
@author xxxx
==/UserStyle== */
@import url("xxxxx");
@-moz-document regexp("http[s]://.*")
{
sr-rd-title {
}
sr-rd-desc {
}
sr-rd-content *, sr-rd-content p, sr-rd-content div {
}
}
Raw
simpread_custom_green.user.css
/* ==UserStyle==
@name simpread style: green-eye
@namespace simpread.pro
@version 0.0.1
@author lyserenity
==/UserStyle== */
@-moz-document regexp("http[s]://.*")
{
:root {
/* --wp-primary-color: #2f75bf; */
--wp-primary-color-05a: rgba(153, 174, 124, 0.05);
--wp-primary-color-10a: rgba(153, 174, 124, 0.1);
--wp-primary-color-25a: rgba(153, 174, 124, 0.25);
--wp-primary-color-50a: rgba(153, 174, 124, 0.5);
--wp-primary-color: #99ae7c;
--wp-bg-05: #0d0d0d;
--wp-bg-05a: rgba(232, 242, 221, 0.05);
--wp-bg-10: #1a1a1a;
--wp-bg-10a: rgba(232, 242, 221, 0.10);
--wp-bg-25: #404040;
--wp-bg-25a: rgba(232, 242, 221, 0.25);
--wp-bg-50: #808080;
--wp-bg-50a: rgba(232, 242, 221, 0.5);
--wp-bg-100: #b6cb9f;
--wp-fg-05: #f2f2f2;
--wp-fg-05a: rgba(0, 0, 0, 0.05);
--wp-fg-10: #e5e5e5;
--wp-fg-10a: rgba(0, 0, 0, 0.10);
--wp-fg-25: #bfbfbf;
--wp-fg-25a: rgba(0, 0, 0, 0.25);
--wp-fg-50: #7f7f7f;
--wp-fg-50a: rgba(0, 0, 0, 0.5);
--wp-fg-100: #000;
/* common */
--wp-text-color-2-reverse: var(--wp-bg-50a);
--wp-text-color-2: #88957a;
--wp-text-color-on-primary-bg: #fff;
--wp-text-color-reverse: #fff;
--wp-text-color: #3d4435;
--wp-border-color-2: #c5daae;
--wp-border-color: #9eb683;
--wp-caret-color: #6ab120;
--wp-focus-outline-color-danger: rgba(255, 22, 0, 0.3);
--wp-focus-outline-color: var(--wp-primary-color-50a);
--wp-gray-bg: #cfdfbb;
--wp-hover-bg: #adc691;
--wp-input-bg: var(--wp-paper-bg);
--wp-item-icon-bg-color: #D9E6C8;
--wp-item-icon-color: var(--wp-primary-color);
--wp-link-color: var(--wp-primary-color);
--wp-overlay-bg: var(--wp-primary-color-25a);
--wp-paper-bg: #e0ead2;
--wp-paper-bg-rgb: 224, 234, 210;
--wp-shadow-lg: 1px 2px 2px 1px rgba(0, 0, 0, 0.2);
--wp-shadow-sm: 0 1px 1px 0px rgba(0, 0, 0, 0.1);
--wp-shadow: 1px 2px 2px 0px rgba(0, 0, 0, 0.1);
--wp-text-highlight-bg: #f6f1ae;
/* top bar */
--wp-minimal-bar-bg: #D9E6C8;
--wp-top-bar-bg-blur: #cfdfbf;
--wp-top-bar-bg: #c7d8b7;
--wp-top-bar-button-pressed: rgba(0, 0, 0, 0.1);
--wp-top-bar-fill-color-1: #D9E6C8;
--wp-top-bar-fill-color-2: #D9E6C8;
--wp-top-bar-line-color: var(--wp-primary-color);
--wp-top-bar-icon-hl: var(--wp-primary-color);
--wp-top-bar-shadow: rgba(0, 0, 0, 0.1);
--wp-top-bar-selected-text-color: var(--wp-text-color);
--wp-top-bar-selected-bg: var(--wp-primary-color-25a);
/* left */
--wp-frame-left-bg-color: #d9e6c8;
/* tree */
--wp-tree-drag-indicator-color: var(--wp-primary-color);
--wp-tree-drag-select-bg-color: var(--wp-primary-color-25a);
--wp-tree-hover-bg: var(--wp-primary-color-25a);
--wp-tree-selected-bg-blur: #c4d3b6;
--wp-tree-selected-bg: var(--wp-primary-color);
--wp-tree-selected-text-color-blur: #000;
--wp-tree-selected-text-color: var(--wp-text-color-reverse);
/* scroll bar */
--wp-scrollbar-corner: rgba(255, 255, 255, 0);
--wp-scrollbar-hander-bg: rgba(0, 0, 0, 0.2);
--wp-scrollbar-hander-border-color: rgba(255, 255, 255, 0.8);
--wp-scrollbar-thumb-compose: rgba(255, 255, 255, 0.1);
--wp-scrollbar-thumb-hover: rgba(153, 174, 124, 0.42);
--wp-scrollbar-thumb: rgba(153, 174, 124, 0.24);
--wp-scrollbar-track-hover: rgba(0, 0, 0, 0.05);
--wp-scrollbar-track: rgba(187, 196, 175, 0.2);
/* editor */
--wp-board-bg: var(--wp-paper-bg);
--wp-board-drag-add-bg: var(--wp-primary-color-10a);
--wp-board-grid-color: rgba(0, 0, 0, 0.05);
--wp-editor-border-splitter-compose: rgba(255, 255, 255, 0.1);
--wp-editor-code-bg: #ebf2e3;
--wp-editor-compose-bg-color-light: rgba(128, 128, 128, 0.9);
--wp-editor-compose-bg-color: #333;
--wp-editor-cursor-color: #000;
--wp-editor-font-color: var(--wp-text-color);
--wp-editor-keyword: #1d408c;
--wp-editor-md-tag-color: var(--wp-primary-color-50a);
--wp-editor-negative: var(--wp-error-color);
--wp-editor-number: #926;
--wp-editor-operator: #be6ce3;
--wp-editor-positive: var(--wp-success-color);
--wp-editor-selected-bg-unfocused: rgba(70, 74, 66, 0.2);
--wp-editor-selected-bg: var(--wp-primary-color);
--wp-editor-selected-text-color: var(--wp-text-color-reverse);
--wp-editor-wrapper-bg: #cedcbb;
--wp-editor_focus_bg: var(--wp-primary-color-10a);
--wp-editor_focus_hl: var(--wp-primary-color);
--wp-nav-bar-bg: #D9E6C8;
--wp-status-bar-bg: #D9E6C8;
--wp-status-bar-selected-bg: #bbcda1;
--wp-status-bar-hover-bg: #c1d4a6;
--wp-kanban-card-bg: var(--wp-paper-bg);
--wp-kanban-column-bg: #f8fef0;
/* right */
--wp-memo-bg: #D9E6C8;
/* tag */
--wp-tag-blue-bg-color: #e6f7ff;
--wp-tag-blue-border-color: #91d5ff;
--wp-tag-blue-font-color: #1890ff;
--wp-tag-green-bg-color: #f6ffed;
--wp-tag-green-border-color: #b7eb8f;
--wp-tag-green-font-color: #52c41a;
--wp-tag-purple-bg-color: #f9f0ff;
--wp-tag-purple-border-color: #d3adf7;
--wp-tag-purple-font-color: #722ed1;
--wp-tag-yellow-bg-color: #fff7e6;
--wp-tag-yellow-border-color: #ffd591;
--wp-tag-yellow-font-color: #fa8c16;
--wp-error-color: #c92a2a;
--wp-warning-color: #f2ab1f;
--wp-success-color: #2b8a3e;
/* other components */
--wp-tippy-bg: var(--wp-primary-color);
--wp-tippy-border: rgba(255, 255, 255, 1);
--wp-tippy-text: rgba(255, 255, 255, 1);
--wp-toast-bg: #fff;
--wp-toast-border: var(--wp-border-color);
--wp-tooltip-bg: rgba(0, 0, 0, 0.8);
--wp-tooltip-border: #fcc419;
--wp-tooltip-text: #fff;
}
.simpread-read-root {
background: var(--wp-nav-bar-bg) !important;
}
sr-read {
background: var(--wp-nav-bar-bg) !important;
}
sr-blockquote {
border-left: 2px solid var(--wp-bg-100) !important;
}
sr-rd-content a {
color: var(--wp-primary-color) !important;
}
}
Raw
simpread_custom_lxgwwenkai.user.css
/* ==UserStyle==
@name simpread style: LXGW WenKai
@namespace simpread.pro
@version 0.0.1
@description LXGW WenKai
@author Kenshin
==/UserStyle== */
sr-rd-title, sr-rd-desc, sr-rd-content {
font-family: 'lxgw wenkai', -apple-system, PingFang SC, Microsoft Yahei, Lantinghei SC, Hiragino Sans GB, Microsoft Sans Serif, sans-serif!important;
}
Raw
simpread_custom_medium.user.css
/* ==UserStyle==
@name simpread style: medium
@namespace simpread.pro
@version 0.1.0
@description medium style for simpread
@author kenshin
==/UserStyle== */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;300;400;500&family=Noto+Sans&family=Noto+Sans+SC:wght@100;300;400;500&family=Noto+Sans+TC:wght@100;300;400;500&family=Noto+Serif&family=Noto+Serif+SC:wght@100;300;400;500&family=Noto+Serif+TC:wght@100;300;400;500&family=PT+Serif:wght@400;700&display=swap");
@-moz-document regexp("http[s]://.*")
{
sr-rd-title {
font-family: "Adobe Garamond Pro", Georgia, "Times New Roman", Times, serif, -apple-system, system-ui, "Segoe UI", "Droid Sans", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif, sans-serif;
}
sr-rd-content *, sr-rd-content p, sr-rd-content div {
color: rgb(85, 85, 85);
font-size: 1.9rem;
line-height: 1.8;
font-weight: 400;
font-family: "Adobe Garamond Pro", Georgia, "Times New Roman", Times, serif, -apple-system, system-ui, "Segoe UI", "Droid Sans", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif, sans-serif;
}
}
Raw
simpread_custom_simple.user.css
/* ==UserStyle==
@name simpread style: simple
@namespace simpread.pro
@version 0.1.0
@description simple style for simpread
@author kenshin
==/UserStyle== */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap');
@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('https://fonts.googleapis.com/earlyaccess/notosansjp.css');
@import url('https://fonts.googleapis.com/earlyaccess/notosanssc.css');
@-moz-document regexp("http[s]://.*")
{
sr-read {
font-family: Montserrat, "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", sans-serif!important;
}
}
Raw
simpread_custom_white.user.css
/* ==UserStyle==
@name simpread style: white
@namespace simpread.pro
@version 0.2.0
@description custom style for simpread
@author lyserenity
==/UserStyle== */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;300;400;500&family=Noto+Sans&family=Noto+Sans+SC:wght@100;300;400;500&family=Noto+Sans+TC:wght@100;300;400;500&family=Noto+Serif&family=Noto+Serif+SC:wght@100;300;400;500&family=Noto+Serif+TC:wght@100;300;400;500&family=PT+Serif:wght@400;700&display=swap");
@-moz-document regexp("http[s]://.*")
{
:root {
--sans-font: "Noto Sans", "Noto Sans TC", "Noto Sans SC", sans-serif !important;
--serif-font: "PT Serif", "Noto Serif TC", "Noto Serif SC", serif !important;
--title-font: "PT Serif", "Noto Serif TC", "Noto Serif SC", serif !important;
--inline-code-font: monospace !important;
--mono-font: "JetBrains Mono", monospace !important;
--content-font-size: 17px;
}
sr-blockquote {
font-weight: 400;
color: #999;
}
sr-rd-title {
font-family: var(--title-font);
font-size: calc(var(--content-font-size) * 2.5);
line-height: 1.2;
}
sr-rd-desc {
font-family: var(--sans-font);
font-size: calc(var(--content-font-size) * 1.2);
line-height: 1.6;
}
sr-rd-content *,
sr-rd-content p,
sr-rd-content div {
margin: 0;
line-height: 1.6;
font-weight: 400;
font-family: var(--sans-font);
font-size: var(--content-font-size);
}
sr-rd-content p {
margin: 1em 0em 1em 0em;
}
sr-rd-content code {
line-height: inherit;
font-size: inherit;
font-weight: inherit;
font-family: var(--inline-code-font);
}
sr-rd-content pre,
sr-rd-content pre * {
line-height: 1.3;
font-family: var(--mono-font);
margin: 1em 0em 1em 0em;
}
sr-rd-content pre code,
sr-rd-content pre code * {
line-height: inherit;
font-family: var(--mono-font);
font-size: inherit;
}
sr-rd-content ol,
sr-rd-content ul {
list-style-type: none;
margin: 0em 0em 1.2em 2.5em;
padding: 0;
}
sr-rd-content ol li,
sr-rd-content ul li {
margin: 0;
line-height: 1.6;
}
sr-rd-content h1,
sr-rd-content h1 * {
font-family: var(--serif-font);
font-weight: 100;
font-size: calc(var(--content-font-size) * 2.5);
}
sr-rd-content h2,
sr-rd-content h2 * {
font-family: var(--serif-font);
font-weight: 300;
font-size: calc(var(--content-font-size) * 2);
}
sr-rd-content h3,
sr-rd-content h3 * {
font-family: var(--sans-font);
font-weight: 400;
font-size: calc(var(--content-font-size) * 1.7);
}
sr-rd-content h4,
sr-rd-content h4 * {
font-family: var(--sans-font);
font-weight: 400;
font-size: calc(var(--content-font-size) * 1.5);
}
sr-rd-content h5,
sr-rd-content h5 * {
font-weight: 400;
font-size: calc(var(--content-font-size) * 1.2);
}
sr-rd-content h6,
sr-rd-content h6 * {
font-weight: 500;
font-size: calc(var(--content-font-size) * 1);
}
sr-rd-content h1,
sr-rd-content h2,
sr-rd-content h3,
sr-rd-content h4,
sr-rd-content h5,
sr-rd-content h6 {
line-height: 1.2;
margin: 1em 0em 0.6em 0em;
}
sr-rd-content h1,
sr-rd-content h2 {
padding-left: 1.9rem;
border-left: 5px solid;
}
sr-rd-footer {
display: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment