// TODO: copied from string-utils
function formatCssSize(v: any): string {
if (typeof v === 'string') {
if (v.includes('px') || v.includes('em') || v.includes('%')) return v;
}
return `${v}px`;
}
export default function(theme: any) {
theme = theme ? theme : {};
const fontFamily = '\'Avenir\', \'Arial\', sans-serif';
const css =
`
/* https://necolas.github.io/normalize.css/ */
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}
pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}
b,strong{font-weight:bolder}small{font-size:80%}img{border-style:none}
body {
font-size: ${formatCssSize(theme.noteViewerFontSize)};
color: ${theme.color};
word-wrap: break-word;
line-height: ${theme.lineHeight};
background-color: ${theme.backgroundColor};
font-family: ${fontFamily};
padding-bottom: ${formatCssSize(theme.bodyPaddingBottom)};
padding-top: ${formatCssSize(theme.bodyPaddingTop)};
}
strong {
color: ${theme.colorBright};
}
kbd {
border: 1px solid ${theme.codeBorderColor};
box-shadow: inset 0 -1px 0 ${theme.codeBorderColor};
padding: 2px 4px;
border-radius: 3px;
background-color: ${theme.codeBackgroundColor};
}
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-corner {
background: none;
}
::-webkit-scrollbar-track {
border: none;
}
::-webkit-scrollbar-thumb {
background: rgba(100, 100, 100, 0.3);
border-radius: 5px;
}
::-webkit-scrollbar-track:hover {
background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(100, 100, 100, 0.7);
}
/* Remove top padding and margin from first child so that top of rendered text is aligned to top of text editor text */
#rendered-md > h1:first-child,
#rendered-md > h2:first-child,
#rendered-md > h3:first-child,
#rendered-md > h4:first-child,
#rendered-md > ul:first-child,
#rendered-md > ol:first-child,
#rendered-md > table:first-child,
#rendered-md > blockquote:first-child,
#rendered-md > img:first-child,
#rendered-md > p:first-child {
margin-top: 0;
padding-top: 0;
}
p, h1, h2, h3, h4, h5, h6, ul, table {
margin-top: .6em;
margin-bottom: .65em;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.5em;
}
h1 {
font-size: 1.5em;
font-weight: bold;
border-bottom: 1px solid ${theme.dividerColor};
padding-bottom: .3em;
}
h2 {
font-size: 1.3em;
font-weight: bold;
padding-bottom: .1em; */
}
h3 {
font-size: 1.1em;
}
h4, h5, h6 {
font-size: 1em;
font-weight: bold;
}
.exported-note-title {
font-size: 2em;
font-weight: bold;
margin-bottom: 0.8em;
line-height: 1.5em;
padding-bottom: .35em;
border-bottom: 1px solid ${theme.dividerColor};
}
a {
color: ${theme.urlColor};
}
ul, ol {
padding-left: 0;
margin-left: 1.7em;
}
li {
margin-bottom: .4em;
}
li p {
margin-top: 0.2em;
margin-bottom: 0;
}
.resource-icon {
display: inline-block;
position: relative;
top: 0.3em;
text-decoration: none;
width: 1.2em;
height: 1.4em;
margin-right: 0.4em;
background-color: ${theme.urlColor};
}
/* These icons are obtained from the wonderful ForkAwesome project by copying the src svgs
* into the css classes below.
* svgs are obtained from https://github.com/ForkAwesome/Fork-Awesome/tree/master/src/icons/svg
* instead of the svg width, height property you must use a viewbox here, 0 0 1536 1792 is typically the actual size of the icon
* each line begins with the pre-amble -webkit-mask: url("data:image/svg+xml;utf8,
* and of course finishes with ");
* to precvent artifacts it is also necessary to include -webkit-mask-repeat: no-repeat;
* on the following line
* */
.fa-joplin {
/* Awesome Font file */
-webkit-mask: url("data:image/svg+xml;utf8,");
}
.fa-file-image {
-webkit-mask: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
}
.fa-file-pdf {
-webkit-mask: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
}
.fa-file-word {
-webkit-mask: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
}
.fa-file-powerpoint {
-webkit-mask: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
}
.fa-file-excel {
-webkit-mask: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
}
.fa-file-audio {
-webkit-mask: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
}
.fa-file-video {
-webkit-mask: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
}
.fa-file-archive {
-webkit-mask: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
}
.fa-file-code {
-webkit-mask: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
}
.fa-file-alt, .fa-file-csv {
/* fork-awesome doesn't have csv so we use the text icon */
-webkit-mask: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
}
.fa-file {
-webkit-mask: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
}
blockquote {
border-left: 4px solid ${theme.codeBorderColor};
padding-left: 1.2em;
margin-left: 0;
opacity: .7;
}
.jop-tinymce table,
table {
text-align: left;
border-collapse: collapse;
border: 1px solid ${theme.codeBorderColor};
background-color: ${theme.backgroundColor};
}
.jop-tinymce table td, .jop-tinymce table th,
table td, th {
text-align: left;
padding: .5em 1em .5em 1em;
font-size: ${theme.noteViewerFontSize};
color: ${theme.color};
font-family: ${fontFamily};
}
.jop-tinymce table td,
table td {
border: 1px solid ${theme.codeBorderColor};
}
.jop-tinymce table th,
table th {
border: 1px solid ${theme.codeBorderColor};
border-bottom: 2px solid ${theme.codeBorderColor};
background-color: ${theme.tableBackgroundColor};
}
.jop-tinymce table tr:nth-child(even),
table tr:nth-child(even) {
background-color: ${theme.tableBackgroundColor};
}
.jop-tinymce table tr:hover,
table tr:hover {
background-color: ${theme.raisedBackgroundColor};
}
hr {
border: none;
border-bottom: 2px solid ${theme.dividerColor};
}
img {
max-width: 100%;
height: auto;
}
.inline-code,
.mce-content-body code {
border: 1px solid ${theme.codeBorderColor};
background-color: ${theme.codeBackgroundColor};
padding-right: .2em;
padding-left: .2em;
border-radius: .25em;
color: ${theme.codeColor};
font-size: ${theme.codeFontSize};
}
.highlighted-keyword {
background-color: #F3B717;
color: black;
}
.not-loaded-resource img {
width: 1.15em;
height: 1.15em;
background: white;
padding: 2px !important;
border-radius: 2px;
box-shadow: 0 1px 3px #000000aa;
}
a.not-loaded-resource img {
margin-right: .2em;
}
a.not-loaded-resource {
display: flex;
flex-direction: row;
align-items: center;
}
.md-checkbox input[type=checkbox]:checked {
opacity: 0.7;
}
.jop-tinymce ul.joplin-checklist .checked,
.md-checkbox .checkbox-label-checked {
opacity: 0.5;
}
.exported-note {
padding: 1em;
}
.joplin-editable .joplin-source {
display: none;
}
mark {
background: #F7D26E;
color: black;
}
/* =============================================== */
/* For TinyMCE */
/* =============================================== */
.mce-content-body {
/* Note: we give a bit more padding at the bottom, to allow scrolling past the end of the document */
padding: 5px 10px 10em 0;
}
/*
.mce-content-body code {
background-color: transparent;
}
*/
.mce-content-body [data-mce-selected=inline-boundary] {
background-color: transparent;
}
.mce-content-body .joplin-editable {
cursor: pointer !important;
}
.mce-content-body.mce-content-readonly {
opacity: 0.5;
}
/* We need that to make sure click events have the A has a target */
.katex a span {
pointer-events: none;
}
.media-player {
width: 100%;
margin-top: 10px;
}
.media-player.media-pdf {
min-height: 100vh;
}
/* Clear the CODE style if the element is within a joplin-editable block */
.mce-content-body .joplin-editable code {
border: none;
background: none;
padding: 0;
color: inherit;
font-size: inherit;
}
/* =============================================== */
/* For TinyMCE */
/* =============================================== */
@media print {
body {
height: auto !important;
}
pre {
white-space: pre-wrap;
}
.code, .inline-code {
border: 1px solid #CBCBCB;
}
#joplin-container-content {
/* The height of the content is set dynamically by JavaScript (in updateBodyHeight) to go
around various issues related to scrolling. However when printing we don't want this
fixed size as that would crop the content. So we set it to auto here. "important" is
needed to override the style set by JavaScript at the element-level. */
height: auto !important;
}
}
`;
return [css];
}