From 997f279897c4cea65cd244bc6889a41056d9fa47 Mon Sep 17 00:00:00 2001 From: Maxim Likhachev Date: Tue, 20 Jul 2021 14:45:19 +0300 Subject: [PATCH] joplin: ++new theme --- etc/soft/joplin/userchrome-bw.css | 93 +++++++++ etc/soft/joplin/userchrome.css | 54 +++-- etc/soft/joplin/userstyle-bw.css | 403 ++++++++++++++++++++++++++++++++++++++ etc/soft/joplin/userstyle.css | 394 ++++++++++++++++++++++--------------- 4 files changed, 775 insertions(+), 169 deletions(-) create mode 100644 etc/soft/joplin/userchrome-bw.css create mode 100644 etc/soft/joplin/userstyle-bw.css diff --git a/etc/soft/joplin/userchrome-bw.css b/etc/soft/joplin/userchrome-bw.css new file mode 100644 index 0000000..eb99c73 --- /dev/null +++ b/etc/soft/joplin/userchrome-bw.css @@ -0,0 +1,93 @@ +/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */ + +.ace_heading { + font-weight: bold; + color: #5082be !important; +} + +#note-editor{ + color: black !important; +} + +.ace_emphasis{ + color: black !important; + font-weight: bold; +} + +.ace_blockquote{ + color: #797979 !important; +} + +/* +.ace_string{ + color: #85b096 !important; + font-weight: bold; +} + +.ace_support{ + color: #298d56 !important; + font-weight: bold; +} + +.ace_function{ + margin-left: 5px; + color: #85b096 !important; + background-color: #f7f7f7; + font-style: italic; +} + +.ace_list{ + color:#313131 !important; + font-family: monospace; +} + +.ace_strong { + color: black !important; + font-weight: bold; +} +*/ + +/* MARKDOWN EDITOR */ + +span.cm-rm-checkbox.cm-property + span.cm-rm-checkbox + span.cm-rm-checkbox { + /*adds a strike through on completed checkmarks*/ + text-decoration: line-through; + opacity: 0.7; +} + +.CodeMirror-sizer { + /*keeps the text width manageable*/ + margin-right: auto !important; + margin-left: auto !important; + max-width: 100ch !important; + line-height: 2.3ch !important; +} + +.cm-s-default .cm-header { + color: darkslategray; +} + +/* .cm-hr { */ + /* makes `---` solid */ + /* border-top: 1px solid #cccccc; */ + /* display: block; */ + /* line-height: 0px; */ +/* } */ + +/* .cm-s-default *{ */ + /*makes all text black*/ + /* color: black !important; */ +/* } */ + +.cm-header.cm-rm-header-token{ + /*makes the markdown #, ##, ###, etc less noticable*/ + color: #cccccc !important; + /* font-size: 90%; */ + margin-left: -50px; + max-width: 50px; + width: 50px; + /* overflow: hidden; */ + display: inline-block; + text-align: right; +} + diff --git a/etc/soft/joplin/userchrome.css b/etc/soft/joplin/userchrome.css index eb99c73..ff3aef2 100644 --- a/etc/soft/joplin/userchrome.css +++ b/etc/soft/joplin/userchrome.css @@ -1,10 +1,40 @@ -/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */ +.CodeMirror { + font-family: "NotoMono Nerd Font" !important; + font-size: 1.1rem !important; +} -.ace_heading { - font-weight: bold; - color: #5082be !important; +.CodeMirror .cm-header { + color: darkslategray; +} + +.CodeMirror .cm-quote { + color: #090; +} + +.CodeMirror-sizer { + /*keeps the text width manageable*/ + margin-right: auto !important; + margin-left: auto !important; + max-width: 100ch !important; + line-height: 2.3ch !important; } +/* Default theme */ +.cm-s-default .cm-attribute {color: #00c !important;} +.cm-s-default .cm-bracket {color: #997 !important;} +.cm-s-default .cm-builtin {color: #30a !important;} +.cm-s-default .cm-comment {color: #a50 !important;} +.cm-s-default .cm-hr {color: #999 !important;} +.cm-s-default .cm-keyword {color: #708 !important;} +.cm-s-default .cm-link {color: #00c !important;} +.cm-s-default .cm-meta {color: #555 !important;} +.cm-s-default .cm-qualifier {color: #555 !important;} +.cm-s-default .cm-string {color: #a11 !important;} +.cm-s-default .cm-string-2 {color: #f50 !important;} +.cm-s-default .cm-tag {color: #170 !important;} +.cm-s-default .cm-variable-2 {color: #05a !important;} +.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085 !important;} + #note-editor{ color: black !important; } @@ -55,17 +85,11 @@ span.cm-rm-checkbox.cm-property + span.cm-rm-checkbox + span.cm-rm-checkbox { opacity: 0.7; } -.CodeMirror-sizer { - /*keeps the text width manageable*/ - margin-right: auto !important; - margin-left: auto !important; - max-width: 100ch !important; - line-height: 2.3ch !important; -} - -.cm-s-default .cm-header { - color: darkslategray; -} +/* .cm-s-default .cm-comment { */ +/* color: #faffc3 !important; */ +/* background-color: #383a42 !important; */ +/* font-family: "NotoMono Nerd Font" !important; */ +/* } */ /* .cm-hr { */ /* makes `---` solid */ diff --git a/etc/soft/joplin/userstyle-bw.css b/etc/soft/joplin/userstyle-bw.css new file mode 100644 index 0000000..c23756b --- /dev/null +++ b/etc/soft/joplin/userstyle-bw.css @@ -0,0 +1,403 @@ + +#joplin-container-content{ + padding-left: 0 !important; + padding-right: 0 !important; +} + +#rendered-md { + width: 100%; +} + +h1, h2, h3, h4 { + padding-left: 0.5em; + padding-bottom: 0; +} + +h1 { + color: white; + background-color: #414650; + width: 100%; + line-height: 2.5em; + text-align: center; +} + +h2 { + color: white; + font-weight: 400; + background-color: #414650; + width: 100%; + border: 2px solid #414650; +} + +h3 { + color: white; + font-weight: 150; + background-color: #606776; +} + +h4 { + color: white; + font-weight: 100; + width: 100%; + background-color: #808286; +} + +mark { + background: #aeefce; + color: black; + padding-left: 3px; + padding-right: 3px; +} + +a { + color: #5082be; + font-weight: bold; + text-decoration: none; +} + +/* BADGES */ + +b-error, b-success, b-info, b-warning, b-help { + display: block; + margin-bottom: 10px; + padding: 10px 10px 10px 50px; + border: 1px solid; + border-left: 5px solid; + border-radius: 2px; + word-wrap: break-word; + text-align: left; + box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.3); + color: gray; + background-color: transparent; +} + +b-error::before, +b-success::before, +b-info::before, +b-warning::before, +b-help::before { + font-weight: 700; + font-size: 1.5em; + left: 30px; + position: absolute; +} + +b-error { + border-color: red; + color: red; +} + +b-error::before { + content: "❌"; + font-family: "Font Awesome 5 Free" !important; + color: red; +} + +b-success { + border-color: forestgreen; + color: forestgreen; +} + +b-success::before { + content: "✅"; + font-family: "Font Awesome 5 Free" !important; + color: forestgreen; +} + +b-warning { + border-color: darkorange; + color: darkorange; +} + +b-warning::before { + content: "⚠️"; + font-family: "Font Awesome 5 Free" !important; + color: orange !important; +} + +b-info { + border-color: cornflowerblue; + color: cornflowerblue; +} + +b-info::before { + content: "ℹ️"; + font-family: "Font Awesome 5 Free" !important; + color: cornflowerblue; +} + +b-help { + border-color: blueviolet; + color: blueviolet; +} + +b-help::before { + content: "🔔"; + font-family: "Font Awesome 5 Free" !important; + color: blueviolet; +} + +strike, s { + opacity: 0.5 !important; +} + +blockquote { + color: black; + margin: 1.5em; + padding: 1em; + border-radius: 8px; + border-left: 6px solid darkslateblue; + background-color: lavender; +} + +blockquote strong { + font-style: bold !important; + color: darkblue !important; +} + +blockquote em { + font-style: italic !important; + color: darkblue !important; +} + +hr { + border: none; + border-bottom: 1px solid gray !important; + margin: 2.5em 0 !important; +} + +a:hover { + text-decoration: underline; +} + +ol { + margin: 0 0 1.5em; + padding: 0; + counter-reset: item; +} +ol li { + margin: 0; + padding: 0 0 0 1.5em; + list-style-type: none; + counter-increment: item; +} +ol li:before { + color: #007c7c; + /* content: counter(item, decimal-leading-zero) "."; */ + content: "00" counter(item) "."; + /* display: inline-block; */ + /* float: left; */ + font-weight: bold; + padding-right: 0.5em; + width: 1em; +} + +ol li:nth-child(n+10):before { + content: "0" counter(item) "."; +} + +ol li:nth-child(n+100):before { + content: counter(item) "."; +} + +ul { + margin: 0 0 1.5em; + padding: 0; + list-style: none; +} +ul li { + margin: 0; + padding: 0 0 0 1.5em; + list-style-type: none; +} +ul li::before { + color: #007c7c; + content: "\2022"; + /* display: inline-block; */ + float: left; + font-weight: bold; + padding-right: 0.3em; + width: 1em; +} + +table { + border-collapse: collapse; + overflow: hidden; +} +th, +td { + padding: 15px; + background-color: rgba(255, 255, 255, 0.2); + color: #fff; +} +th { + text-align: left; +} +thead th, .jop-tinymce table th, table th { + background-color: dimgray; +} +tbody tr:hover { + background-color: rgba(255, 255, 255, 0.3); +} +tbody td { + position: relative; +} +tbody td:hover:before { + content: ""; + position: absolute; + left: 0; + right: 0; + top: -9999px; + bottom: -9999px; + background-color: rgba(255, 255, 255, 0.2); + z-index: -1; +} + +input[type='checkbox'], +.md-checkbox .checkbox-label-unchecked, +.md-checkbox .checkbox-label-checked, +li.md-checkbox { + cursor: pointer !important; +} + +li.md-checkbox [type="checkbox"]:not(:checked), +li.md-checkbox [type="checkbox"]:checked { + position: absolute; + left: -9999px; +} +li.md-checkbox [type="checkbox"]:not(:checked) + label, +li.md-checkbox [type="checkbox"]:checked + label { + position: relative; + padding-left: 1.5em; + cursor: pointer; +} + +li.md-checkbox [type="checkbox"]:not(:checked) + label:before, +li.md-checkbox [type="checkbox"]:checked + label:before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 1em; + height: 1em; + border: 1px solid darkgray; + /* background: var(--light-gray); */ + border-radius: 50%; +} + +li.md-checkbox [type="checkbox"]:checked + label { + opacity: 1 !important; +} + +li.md-checkbox [type="checkbox"]:checked + label:before { + background: palegreen; + opacity: 1 !important; +} + +.checkbox-label-checked { + text-decoration: line-through; + text-decoration-color: darkgray; +} + +li.md-checkbox [type="checkbox"]:not(:checked) + label:after, +li.md-checkbox [type="checkbox"]:checked + label:after { + /* content: '\2713\0020'; */ + position: absolute; + top: -3px; + left: 4px; + color: white; + font-weight: bold; + font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial; + opacity: 1 !important; +} + +li.md-checkbox [type="checkbox"]:not(:checked) + label:after { + opacity: 0; + transform: scale(0); +} + +li.md-checkbox [type="checkbox"]:checked + label:after { + opacity: 1; + transform: scale(1); +} + +ins { + text-decoration: none; + color: #2178db; + font-weight: bold; +} + +.resource-icon { + display: inline-block; + position: relative; + top: 2px; + text-decoration: none; + width: 14px; + height: 16px; + margin-right: 5px; + background-color: #155BDA; +} + +/* TOC */ + +nav.table-of-contents ul { + list-style-type: none; + margin-top: 0px !important; + margin-bottom: 0px !important; + margin-left: 1em !important; +} + +nav.table-of-contents>ul { + + top: 5px; + right: 0px; + z-index: 99; + + font-size: 12px; + position: fixed; + padding: 15px; + + border-radius: 10px 0px 0px 10px; + margin: 0px; + + overflow: hidden; + height: 90%; + width: 5px; + transition: .2s; +} + +nav.table-of-contents::after { + content: ""; + color: black; +} + +nav.table-of-contents>ul:hover { + background: #F8F8F8; + box-shadow: -5px 0px 10px 0px rgba(0,0,0,0.15); + + width: 30%; + color: none; + overflow: scroll; +} + +nav.table-of-contents>ul:hover::before { + content: "Содержание" + font-weight: bold; +} + +nav.table-of-contents>ul:hover li { + display: list-item; +} + +nav.table-of-contents li { + display: none; + white-space: nowrap; + overflow: hidden; + margin: 0px; + padding: 0px; +} + +nav.table-of-contents li:before { + content: "" !important; +} + diff --git a/etc/soft/joplin/userstyle.css b/etc/soft/joplin/userstyle.css index c23756b..5817ac8 100644 --- a/etc/soft/joplin/userstyle.css +++ b/etc/soft/joplin/userstyle.css @@ -1,58 +1,256 @@ +:root { + --text: #32373f; + --code: #383a42; + --link: #4286f4; +} + #joplin-container-content{ padding-left: 0 !important; padding-right: 0 !important; } #rendered-md { - width: 100%; + padding: 3%; +} + +body { + font-size: 1.3rem; + color: var(--text); + word-wrap: break-word; + line-height: 1.6em; + /* background-color: #ffffff; */ + font-family: 'Avenir', 'Arial', sans-serif; + padding-bottom: 0px; + padding-top: 0px; +} + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + color: var(--code); + background: var(--code); + padding: 1em; + /* background: #000; */ + /* color: #f8f8f8; */ +} + +code.hljs { + padding: 3px 5px; +} + +.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, +.hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number, +.hljs-built_in, .hljs-class .hljs-title { + color: #ffc13d; +} +.hljs-comment, +.hljs-meta, +.hljs-quote { + color: #7c7c7c; +} +.hljs-keyword, +.hljs-name, +.hljs-selector-tag, +.hljs-tag { + color: #96cbfe; +} +.hljs-attribute, +.hljs-selector-id { + color: #ffffb6; +} +.hljs-addition, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-string { + color: #a8ff60; +} +.hljs-subst { + color: #daefa3; +} +.hljs-link, +.hljs-regexp { + color: #e9c062; +} +.hljs-doctag, +.hljs-section, +.hljs-title, +.hljs-type { + color: #ffffb6; +} +.hljs-bullet, +.hljs-literal, +.hljs-symbol, +.hljs-template-variable, +.hljs-variable { + color: #c6c5fe; +} +.hljs-deletion, +.hljs-number { + color: #ff73fd; +} +.hljs-emphasis { + font-style: italic; +} +.hljs-strong { + font-weight: 700; } -h1, h2, h3, h4 { - padding-left: 0.5em; - padding-bottom: 0; + +/* CUSTOM */ + +h1 { + font-size: 2rem; + color: #2c3e50 !important; + margin-bottom: 0.5rem; + text-transform: uppercase!important; + text-align: center!important; + line-height: 1.2; + margin-top: 0; + margin-bottom: 1em; +} + +h1, h2, h3, h4, h5, h6 { + font-weight: 700; + color: #2c3e50 !important; + margin-bottom: 0.5rem; } h1 { - color: white; - background-color: #414650; - width: 100%; - line-height: 2.5em; - text-align: center; + font-size: 2rem; + text-transform: uppercase!important; + text-align: center!important; + line-height: 1.2; + margin-top: 0; } h2 { - color: white; - font-weight: 400; - background-color: #414650; - width: 100%; - border: 2px solid #414650; + font-size: 1.8rem; } h3 { - color: white; - font-weight: 150; - background-color: #606776; + font-size: 1.6rem; } h4 { - color: white; - font-weight: 100; - width: 100%; - background-color: #808286; + font-size: 1.4rem; } -mark { - background: #aeefce; - color: black; - padding-left: 3px; - padding-right: 3px; +h5 { + font-size: 1.2rem; +} + +h6 { + font-size: 1rem; +} + +code { + padding: 0% 0.5%; + color: #faffc3 !important; + background-color: var(--code) !important; +} + +code, pre { + font-family: "NotoMono Nerd Font" !important; + font-size: 1.2rem; +} + +pre > code { + /* background-color: #2c3e50 !important; */ + /* color: #fff !important; */ +} + +p { + display: block; + margin-block-end: 1em; + margin-block-start: 1em; + margin-bottom: 1rem; + margin-inline-end: 0px; + margin-inline-start: 0px; + margin-top: 0; } a { - color: #5082be; + color: var(--link); + text-decoration: none; +} + +a:focus, +a:hover, +a:active { + text-decoration: none; + /* color: #26e4bb; */ + color: #007c7c; +} + +blockquote { + border-left: 4px solid #4286f4; + display: block; + margin-block-end: 1em; + margin-block-start: 1em; + margin-inline-end: 40px; + margin-inline-start: 40px; + margin: 0 0 1rem; + padding-left: 2%; +} + +/* LISTS */ + +ol { + margin: 0 0 1.5em; + padding: 0; + counter-reset: item; +} +ol li { + margin: 0; + padding: 0 0 0 1.5em; + list-style-type: none; + counter-increment: item; +} +ol li:before { + color: var(--link); + /* content: counter(item, decimal-leading-zero) "."; */ + content: "00" counter(item) "."; + /* display: inline-block; */ + /* float: left; */ font-weight: bold; + padding-right: 0.5em; + width: 1em; +} + +ol li:nth-child(n+10):before { + content: "0" counter(item) "."; +} + +ol li:nth-child(n+100):before { + content: counter(item) "."; +} + +ul { + margin: 0 0 1.5em; + padding: 0; + list-style: none; +} +ul li { + margin: 0; + padding: 0 0 0 1.5em; + list-style-type: none; +} +ul li::before { + color: var(--link); + content: "\2022"; + /* display: inline-block; */ + float: left; + font-weight: bold; + /* padding-right: 0.3em; */ + width: 1em; +} + +ins { text-decoration: none; + color: #007c7c; + font-weight: bold; } /* BADGES */ @@ -78,8 +276,8 @@ b-warning::before, b-help::before { font-weight: 700; font-size: 1.5em; - left: 30px; - position: absolute; + left: 1.6em; + /* position: absolute; */ } b-error { @@ -137,122 +335,12 @@ b-help::before { color: blueviolet; } -strike, s { - opacity: 0.5 !important; -} - -blockquote { - color: black; - margin: 1.5em; - padding: 1em; - border-radius: 8px; - border-left: 6px solid darkslateblue; - background-color: lavender; -} - -blockquote strong { - font-style: bold !important; - color: darkblue !important; -} - -blockquote em { - font-style: italic !important; - color: darkblue !important; -} - hr { border: none; border-bottom: 1px solid gray !important; margin: 2.5em 0 !important; } -a:hover { - text-decoration: underline; -} - -ol { - margin: 0 0 1.5em; - padding: 0; - counter-reset: item; -} -ol li { - margin: 0; - padding: 0 0 0 1.5em; - list-style-type: none; - counter-increment: item; -} -ol li:before { - color: #007c7c; - /* content: counter(item, decimal-leading-zero) "."; */ - content: "00" counter(item) "."; - /* display: inline-block; */ - /* float: left; */ - font-weight: bold; - padding-right: 0.5em; - width: 1em; -} - -ol li:nth-child(n+10):before { - content: "0" counter(item) "."; -} - -ol li:nth-child(n+100):before { - content: counter(item) "."; -} - -ul { - margin: 0 0 1.5em; - padding: 0; - list-style: none; -} -ul li { - margin: 0; - padding: 0 0 0 1.5em; - list-style-type: none; -} -ul li::before { - color: #007c7c; - content: "\2022"; - /* display: inline-block; */ - float: left; - font-weight: bold; - padding-right: 0.3em; - width: 1em; -} - -table { - border-collapse: collapse; - overflow: hidden; -} -th, -td { - padding: 15px; - background-color: rgba(255, 255, 255, 0.2); - color: #fff; -} -th { - text-align: left; -} -thead th, .jop-tinymce table th, table th { - background-color: dimgray; -} -tbody tr:hover { - background-color: rgba(255, 255, 255, 0.3); -} -tbody td { - position: relative; -} -tbody td:hover:before { - content: ""; - position: absolute; - left: 0; - right: 0; - top: -9999px; - bottom: -9999px; - background-color: rgba(255, 255, 255, 0.2); - z-index: -1; -} - input[type='checkbox'], .md-checkbox .checkbox-label-unchecked, .md-checkbox .checkbox-label-checked, @@ -272,6 +360,10 @@ li.md-checkbox [type="checkbox"]:checked + label { cursor: pointer; } +/* .md-checkbox input[type=checkbox]:checked { */ +/* opacity: 1; */ +/* } */ + li.md-checkbox [type="checkbox"]:not(:checked) + label:before, li.md-checkbox [type="checkbox"]:checked + label:before { content: ''; @@ -321,21 +413,15 @@ li.md-checkbox [type="checkbox"]:checked + label:after { transform: scale(1); } -ins { - text-decoration: none; - color: #2178db; - font-weight: bold; -} - .resource-icon { display: inline-block; position: relative; - top: 2px; + top: 4px; text-decoration: none; - width: 14px; - height: 16px; + width: 18px; + height: 21px; margin-right: 5px; - background-color: #155BDA; + background-color: #155bda; } /* TOC */ @@ -348,12 +434,11 @@ nav.table-of-contents ul { } nav.table-of-contents>ul { - top: 5px; right: 0px; z-index: 99; - font-size: 12px; + font-size: 0.8em !important; position: fixed; padding: 15px; @@ -371,7 +456,7 @@ nav.table-of-contents::after { color: black; } -nav.table-of-contents>ul:hover { +nav.table-of-contents > ul:hover { background: #F8F8F8; box-shadow: -5px 0px 10px 0px rgba(0,0,0,0.15); @@ -380,8 +465,8 @@ nav.table-of-contents>ul:hover { overflow: scroll; } -nav.table-of-contents>ul:hover::before { - content: "Содержание" +nav.table-of-contents > ul:hover::before { + content: "Содержание"; font-weight: bold; } @@ -401,3 +486,4 @@ nav.table-of-contents li:before { content: "" !important; } +