From 4058f9e06ecfc30662bbc940631be2d95c692b22 Mon Sep 17 00:00:00 2001 From: Maxim Likhachev Date: Tue, 23 Mar 2021 20:11:21 +0300 Subject: [PATCH] joplin: improve on the light theme --- etc/soft/joplin/userstyle.css | 228 +++++++++++++++++++++++++++++++++++++++--- 1 file changed, 215 insertions(+), 13 deletions(-) diff --git a/etc/soft/joplin/userstyle.css b/etc/soft/joplin/userstyle.css index 51e3000..dc7bd88 100644 --- a/etc/soft/joplin/userstyle.css +++ b/etc/soft/joplin/userstyle.css @@ -1,3 +1,8 @@ + +#rendered-md { + width: 100%; +} + h1, h2, h3, h4 { padding-left: 0.5em; padding-bottom: 0; @@ -5,10 +10,10 @@ h1, h2, h3, h4 { h1 { color: white; - font-weight: 300; background-color: #414650; width: 100%; - border: 3px solid #414650; + line-height: 2.5em; + text-align: center; } h2 { @@ -26,10 +31,10 @@ h3 { } h4 { - color: black; + color: white; font-weight: 100; width: 100%; - text-decoration: underline; + background-color: #808286; } mark { @@ -103,15 +108,11 @@ nav.table-of-contents li { } -#rendered-md { - width: 100%; -} - /* BADGES */ -b-error, b-success, b-notice, b-warning, b-help { +b-error, b-success, b-info, b-warning, b-help { display: block; margin-bottom: 10px; padding: 10px 10px 10px 50px; @@ -121,13 +122,13 @@ b-error, b-success, b-notice, b-warning, b-help { word-wrap: break-word; text-align: left; box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.3); - color: var(--grey); + color: gray; background-color: transparent; } b-error::before, b-success::before, -b-notice::before, +b-info::before, b-warning::before, b-help::before { font-weight: 700; @@ -137,7 +138,7 @@ b-help::before { } b-error { - border-color: var(--red); + border-color: red; color: red; } @@ -166,7 +167,7 @@ b-warning { b-warning::before { content: "⚠️"; font-family: "Font Awesome 5 Free" !important; - color: var(--orange-light) !important; + color: orange !important; } b-notice { @@ -191,3 +192,204 @@ 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, +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; +} +