mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-07-29 19:12:27 +08:00
chore(in-app-help): add first draft of the user guide
This commit is contained in:
Elian Doran
parent
acbd936654
commit
58e82fb0f8
500
src/public/app/doc_notes/en/User Guide/!!!meta.json
Normal file
500
src/public/app/doc_notes/en/User Guide/!!!meta.json
Normal file
@ -0,0 +1,500 @@
|
|||||||
|
{
|
||||||
|
"formatVersion": 2,
|
||||||
|
"appVersion": "0.91.5",
|
||||||
|
"files": [
|
||||||
|
{
|
||||||
|
"isClone": false,
|
||||||
|
"noteId": "OkOZllzB3fqN",
|
||||||
|
"notePath": [
|
||||||
|
"OkOZllzB3fqN"
|
||||||
|
],
|
||||||
|
"title": "User Guide",
|
||||||
|
"notePosition": 20,
|
||||||
|
"prefix": null,
|
||||||
|
"isExpanded": false,
|
||||||
|
"type": "text",
|
||||||
|
"mime": "text/html",
|
||||||
|
"attributes": [
|
||||||
|
{
|
||||||
|
"type": "label",
|
||||||
|
"name": "iconClass",
|
||||||
|
"value": "bx bx-help-circle",
|
||||||
|
"isInheritable": false,
|
||||||
|
"position": 10
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"format": "html",
|
||||||
|
"attachments": [],
|
||||||
|
"dirFileName": "User Guide",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"isClone": false,
|
||||||
|
"noteId": "wmegHv51MJMd",
|
||||||
|
"notePath": [
|
||||||
|
"OkOZllzB3fqN",
|
||||||
|
"wmegHv51MJMd"
|
||||||
|
],
|
||||||
|
"title": "Types of notes",
|
||||||
|
"notePosition": 20,
|
||||||
|
"prefix": null,
|
||||||
|
"isExpanded": false,
|
||||||
|
"type": "text",
|
||||||
|
"mime": "text/html",
|
||||||
|
"attributes": [],
|
||||||
|
"format": "html",
|
||||||
|
"attachments": [],
|
||||||
|
"dirFileName": "Types of notes",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"isClone": false,
|
||||||
|
"noteId": "foPEtsL51pD2",
|
||||||
|
"notePath": [
|
||||||
|
"OkOZllzB3fqN",
|
||||||
|
"wmegHv51MJMd",
|
||||||
|
"foPEtsL51pD2"
|
||||||
|
],
|
||||||
|
"title": "Geo map",
|
||||||
|
"notePosition": 10,
|
||||||
|
"prefix": null,
|
||||||
|
"isExpanded": false,
|
||||||
|
"type": "text",
|
||||||
|
"mime": "text/html",
|
||||||
|
"attributes": [
|
||||||
|
{
|
||||||
|
"type": "label",
|
||||||
|
"name": "iconClass",
|
||||||
|
"value": "bx bx-map-alt",
|
||||||
|
"isInheritable": false,
|
||||||
|
"position": 10
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"format": "html",
|
||||||
|
"dataFileName": "Geo map.html",
|
||||||
|
"attachments": [
|
||||||
|
{
|
||||||
|
"attachmentId": "viN50n5G4kB0",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "Geo map_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "eUrcqc8RRuZG",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "1_Geo map_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "1quk4yxJpeHZ",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "2_Geo map_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "mgwGrtQZjxxb",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "3_Geo map_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "JULizn130rVI",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "4_Geo map_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "kcYjOvJDFkbS",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "5_Geo map_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "ut6vm2aXVfXI",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "6_Geo map_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "0AwaQMqt3FVA",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "7_Geo map_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "gFR2Izzp18LQ",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "8_Geo map_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "PMqmCbNLlZOG",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "9_Geo map_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "pKdtiq4r0eFY",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "10_Geo map_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "FXRVvYpOxWyR",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "11_Geo map_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "42AncDs7SSAf",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "12_Geo map_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "gR2c2Thmfy3I",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "13_Geo map_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "FDP3JzIVSnuJ",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "14_Geo map_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "GhHYO2LteDmZ",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "15_Geo map_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "J0baLTpafs7C",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "16_Geo map_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "uYdb9wWf5Nuv",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "17_Geo map_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "iSpyhQ5Ya6Nk",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "18_Geo map_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "MdC0DpifJwu4",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "19_Geo map_image.png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"isClone": false,
|
||||||
|
"noteId": "BDEpqZHDS51s",
|
||||||
|
"notePath": [
|
||||||
|
"OkOZllzB3fqN",
|
||||||
|
"BDEpqZHDS51s"
|
||||||
|
],
|
||||||
|
"title": "Working with notes",
|
||||||
|
"notePosition": 30,
|
||||||
|
"prefix": null,
|
||||||
|
"isExpanded": false,
|
||||||
|
"type": "text",
|
||||||
|
"mime": "text/html",
|
||||||
|
"attributes": [],
|
||||||
|
"format": "html",
|
||||||
|
"attachments": [],
|
||||||
|
"dirFileName": "Working with notes",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"isClone": false,
|
||||||
|
"noteId": "13D1lOc9sqmZ",
|
||||||
|
"notePath": [
|
||||||
|
"OkOZllzB3fqN",
|
||||||
|
"BDEpqZHDS51s",
|
||||||
|
"13D1lOc9sqmZ"
|
||||||
|
],
|
||||||
|
"title": "Exporting as PDF",
|
||||||
|
"notePosition": 10,
|
||||||
|
"prefix": null,
|
||||||
|
"isExpanded": false,
|
||||||
|
"type": "text",
|
||||||
|
"mime": "text/html",
|
||||||
|
"attributes": [],
|
||||||
|
"format": "html",
|
||||||
|
"dataFileName": "Exporting as PDF.html",
|
||||||
|
"attachments": [
|
||||||
|
{
|
||||||
|
"attachmentId": "b3v1pLE6TF1Y",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "Exporting as PDF_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "xsGM34t8ssKV",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "1_Exporting as PDF_image.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "cvyes4f1Vhmm",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "2_Exporting as PDF_image.png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"isClone": false,
|
||||||
|
"noteId": "XUG1egT28FBk",
|
||||||
|
"notePath": [
|
||||||
|
"OkOZllzB3fqN",
|
||||||
|
"XUG1egT28FBk"
|
||||||
|
],
|
||||||
|
"title": "Power users",
|
||||||
|
"notePosition": 50,
|
||||||
|
"prefix": null,
|
||||||
|
"isExpanded": true,
|
||||||
|
"type": "text",
|
||||||
|
"mime": "text/html",
|
||||||
|
"attributes": [],
|
||||||
|
"format": "html",
|
||||||
|
"attachments": [],
|
||||||
|
"dirFileName": "Power users",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"isClone": false,
|
||||||
|
"noteId": "DtJJ20yEozPA",
|
||||||
|
"notePath": [
|
||||||
|
"OkOZllzB3fqN",
|
||||||
|
"XUG1egT28FBk",
|
||||||
|
"DtJJ20yEozPA"
|
||||||
|
],
|
||||||
|
"title": "Theme development",
|
||||||
|
"notePosition": 10,
|
||||||
|
"prefix": null,
|
||||||
|
"isExpanded": false,
|
||||||
|
"type": "text",
|
||||||
|
"mime": "text/html",
|
||||||
|
"attributes": [
|
||||||
|
{
|
||||||
|
"type": "label",
|
||||||
|
"name": "iconClass",
|
||||||
|
"value": "bx bx-palette",
|
||||||
|
"isInheritable": false,
|
||||||
|
"position": 10
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"format": "html",
|
||||||
|
"attachments": [],
|
||||||
|
"dirFileName": "Theme development",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"isClone": false,
|
||||||
|
"noteId": "5HH79ztN0fZA",
|
||||||
|
"notePath": [
|
||||||
|
"OkOZllzB3fqN",
|
||||||
|
"XUG1egT28FBk",
|
||||||
|
"DtJJ20yEozPA",
|
||||||
|
"5HH79ztN0fZA"
|
||||||
|
],
|
||||||
|
"title": "Creating a custom theme",
|
||||||
|
"notePosition": 10,
|
||||||
|
"prefix": null,
|
||||||
|
"isExpanded": false,
|
||||||
|
"type": "text",
|
||||||
|
"mime": "text/html",
|
||||||
|
"attributes": [
|
||||||
|
{
|
||||||
|
"type": "relation",
|
||||||
|
"name": "internalLink",
|
||||||
|
"value": "aH8Dk5aMiq7R",
|
||||||
|
"isInheritable": false,
|
||||||
|
"position": 10
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"format": "html",
|
||||||
|
"dataFileName": "Creating a custom theme.html",
|
||||||
|
"attachments": [
|
||||||
|
{
|
||||||
|
"attachmentId": "bn93hwF7C8sR",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "Creating a custom theme_im.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "17p6z24yW5eP",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "1_Creating a custom theme_im.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "gXLyv5KXjfxg",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "2_Creating a custom theme_im.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "AJHVfQtIQgJ7",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "3_Creating a custom theme_im.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "on1gD7BzCWdN",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "4_Creating a custom theme_im.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "K3cdwj8f90m0",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "5_Creating a custom theme_im.png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"isClone": false,
|
||||||
|
"noteId": "aH8Dk5aMiq7R",
|
||||||
|
"notePath": [
|
||||||
|
"OkOZllzB3fqN",
|
||||||
|
"XUG1egT28FBk",
|
||||||
|
"DtJJ20yEozPA",
|
||||||
|
"aH8Dk5aMiq7R"
|
||||||
|
],
|
||||||
|
"title": "Theme base (legacy vs. next)",
|
||||||
|
"notePosition": 20,
|
||||||
|
"prefix": null,
|
||||||
|
"isExpanded": false,
|
||||||
|
"type": "text",
|
||||||
|
"mime": "text/html",
|
||||||
|
"attributes": [],
|
||||||
|
"format": "html",
|
||||||
|
"dataFileName": "Theme base (legacy vs. next).html",
|
||||||
|
"attachments": [
|
||||||
|
{
|
||||||
|
"attachmentId": "u0zkXkD7rGXA",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "Theme base (legacy vs. nex.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"attachmentId": "5z4bC0x0eH0P",
|
||||||
|
"title": "image.png",
|
||||||
|
"role": "image",
|
||||||
|
"mime": "image/png",
|
||||||
|
"position": 10,
|
||||||
|
"dataFileName": "1_Theme base (legacy vs. nex.png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"isClone": false,
|
||||||
|
"noteId": "pMq6N1oBV9oo",
|
||||||
|
"notePath": [
|
||||||
|
"OkOZllzB3fqN",
|
||||||
|
"XUG1egT28FBk",
|
||||||
|
"DtJJ20yEozPA",
|
||||||
|
"pMq6N1oBV9oo"
|
||||||
|
],
|
||||||
|
"title": "Reference",
|
||||||
|
"notePosition": 30,
|
||||||
|
"prefix": null,
|
||||||
|
"isExpanded": false,
|
||||||
|
"type": "text",
|
||||||
|
"mime": "text/html",
|
||||||
|
"attributes": [],
|
||||||
|
"format": "html",
|
||||||
|
"dataFileName": "Reference.html",
|
||||||
|
"attachments": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"noImport": true,
|
||||||
|
"dataFileName": "navigation.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"noImport": true,
|
||||||
|
"dataFileName": "index.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"noImport": true,
|
||||||
|
"dataFileName": "style.css"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
@ -0,0 +1,94 @@
|
|||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" href="../../../style.css">
|
||||||
|
<base target="_parent">
|
||||||
|
<title data-trilium-title>Creating a custom theme</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="content">
|
||||||
|
<h1 data-trilium-h1>Creating a custom theme</h1>
|
||||||
|
|
||||||
|
<div class="ck-content">
|
||||||
|
<h2>Step 1. Find a place to place the themes</h2>
|
||||||
|
<p>Organization is an important aspect of managing a knowledge base. When
|
||||||
|
developing a new theme or importing an existing one it's a good idea to
|
||||||
|
keep them into one place.</p>
|
||||||
|
<p>As such, the first step is to create a new note to gather all the themes.</p>
|
||||||
|
<p>
|
||||||
|
<img src="Creating a custom theme_im.png" width="181" height="84">
|
||||||
|
</p>
|
||||||
|
<h2>Step 2. Create the theme</h2>
|
||||||
|
<figure class="table" style="width:100%;">
|
||||||
|
<table class="ck-table-resized">
|
||||||
|
<colgroup>
|
||||||
|
<col style="width:32.47%;">
|
||||||
|
<col style="width:67.53%;">
|
||||||
|
</colgroup>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<figure class="image">
|
||||||
|
<img style="aspect-ratio:651/220;" src="1_Creating a custom theme_im.png"
|
||||||
|
width="651" height="220">
|
||||||
|
</figure>
|
||||||
|
</td>
|
||||||
|
<td style="vertical-align:top;">Themes are code notes with a special attribute. Start by creating a new
|
||||||
|
code note.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<figure class="image">
|
||||||
|
<img style="aspect-ratio:302/349;" src="2_Creating a custom theme_im.png"
|
||||||
|
width="302" height="349">
|
||||||
|
</figure>
|
||||||
|
</td>
|
||||||
|
<td style="vertical-align:top;">Then change the note type to a CSS code.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<figure class="image">
|
||||||
|
<img style="aspect-ratio:316/133;" src="3_Creating a custom theme_im.png"
|
||||||
|
width="316" height="133">
|
||||||
|
</figure>
|
||||||
|
</td>
|
||||||
|
<td style="vertical-align:top;">In the <i>Owned Attributes</i> section define the <code>#appTheme</code> attribute
|
||||||
|
to point to any desired name. This is the name that will show up in the
|
||||||
|
appearance section in settings.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</figure>
|
||||||
|
<h2>Step 3. Define the theme's CSS</h2>
|
||||||
|
<p>As a very simple example we will change the background color of the launcher
|
||||||
|
pane to a shade of blue.</p>
|
||||||
|
<p>To alter the different variables of the theme:</p><pre><code class="language-text-css">:root {
|
||||||
|
--launcher-pane-background-color: #0d6efd;
|
||||||
|
}</code></pre>
|
||||||
|
<h2>Step 4. Activating the theme</h2>
|
||||||
|
<p>Refresh the application (Ctrl+Shift+R is a good way to do so) and go to
|
||||||
|
settings. You should see the newly created theme:</p>
|
||||||
|
<p>
|
||||||
|
<img src="4_Creating a custom theme_im.png" width="631" height="481">
|
||||||
|
</p>
|
||||||
|
<p>Afterwards the application will refresh itself with the new theme:</p>
|
||||||
|
<p>
|
||||||
|
<img src="5_Creating a custom theme_im.png" width="653" height="554">
|
||||||
|
</p>
|
||||||
|
<p>Do note that the theme will be based off of the legacy theme. To override
|
||||||
|
that and base the theme on the new TriliumNext theme, see: <a class="reference-link"
|
||||||
|
href="Theme%20base%20(legacy%20vs.%20next).html">Theme base (legacy vs. next)</a>
|
||||||
|
</p>
|
||||||
|
<h2>Step 5. Making changes</h2>
|
||||||
|
<p>Simply go back to the note and change according to needs. To apply the
|
||||||
|
changes to the current window, press Ctrl+Shift+R to refresh.</p>
|
||||||
|
<p>It's a good idea to keep two windows, one for editing and the other one
|
||||||
|
for previewing the changes.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
@ -0,0 +1,129 @@
|
|||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" href="../../../style.css">
|
||||||
|
<base target="_parent">
|
||||||
|
<title data-trilium-title>Reference</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="content">
|
||||||
|
<h1 data-trilium-h1>Reference</h1>
|
||||||
|
|
||||||
|
<div class="ck-content">
|
||||||
|
<h2>Detecting horizontal vs. vertical layout</h2>
|
||||||
|
<p>The user can select between vertical layout (the classical one, where
|
||||||
|
the launcher bar is on the left) and a horizontal layout (where the launcher
|
||||||
|
bar is on the top and tabs are full-width).</p>
|
||||||
|
<p>Different styles can be applied by using classes at <code>body</code> level:</p><pre><code class="language-text-x-trilium-auto">body.layout-vertical #left-pane {
|
||||||
|
/* Do something */
|
||||||
|
}
|
||||||
|
|
||||||
|
body.layout-horizontal #center-pane {
|
||||||
|
/* Do something else */
|
||||||
|
}</code></pre>
|
||||||
|
<p>The two different layouts use different containers (but they are present
|
||||||
|
in the DOM regardless of the user's choice), for example <code>#horizontal-main-container</code> and <code>#vertical-main-container</code> can
|
||||||
|
be used to customize the background of the content section.</p>
|
||||||
|
<h2>Detecting platform (Windows, macOS) or Electron</h2>
|
||||||
|
<p>It is possible to add particular styles that only apply to a given platform
|
||||||
|
by using the classes in <code>body</code>:</p>
|
||||||
|
<figure class="table">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Windows</th>
|
||||||
|
<th>macOS</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td><pre><code class="language-text-x-trilium-auto">body.platform-win32 {
|
||||||
|
background: red;
|
||||||
|
}</code></pre>
|
||||||
|
</td>
|
||||||
|
<td><pre><code class="language-text-x-trilium-auto">body.platform-darwin {
|
||||||
|
background: red;
|
||||||
|
}</code></pre>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</figure>
|
||||||
|
<p>It is also possible to only apply a style if running under Electron (desktop
|
||||||
|
application):</p><pre><code class="language-text-x-trilium-auto">body.electron {
|
||||||
|
background: blue;
|
||||||
|
}</code></pre>
|
||||||
|
<h3>Native title bar</h3>
|
||||||
|
<p>It's possible to detect if the user has selected the native title bar
|
||||||
|
or the custom title bar by querying against <code>body</code>:</p><pre><code class="language-text-x-trilium-auto">body.electron.native-titlebar {
|
||||||
|
/* Do something */
|
||||||
|
}
|
||||||
|
|
||||||
|
body.electron:not(.native-titlebar) {
|
||||||
|
/* Do something else */
|
||||||
|
}</code></pre>
|
||||||
|
<h3>Native window buttons</h3>
|
||||||
|
<p>When running under Electron with native title bar off, a feature was introduced
|
||||||
|
to use the platform-specific window buttons such as the semaphore on macOS.</p>
|
||||||
|
<p>See <a href="https://github.com/TriliumNext/Notes/pull/702">Native title bar buttons by eliandoran · Pull Request #702 · TriliumNext/Notes</a> for
|
||||||
|
the original implementation of this feature, including screenshots.</p>
|
||||||
|
<h4>On Windows</h4>
|
||||||
|
<p>The colors of the native window button area can be adjusted using a RGB
|
||||||
|
hex color:</p><pre><code class="language-text-x-trilium-auto">body {
|
||||||
|
--native-titlebar-foreground: #ffffff;
|
||||||
|
--native-titlebar-background: #ff0000;
|
||||||
|
}</code></pre>
|
||||||
|
<p>It is also possible to use transparency at the cost of reduced hover colors
|
||||||
|
using a RGBA hex color:</p><pre><code class="language-text-x-trilium-auto">body {
|
||||||
|
--native-titlebar-background: #ff0000aa;
|
||||||
|
}</code></pre>
|
||||||
|
<p>Note that the value is read when the window is initialized and then it
|
||||||
|
is refreshed only when the user changes their light/dark mode preference.</p>
|
||||||
|
<h4>On macOS</h4>
|
||||||
|
<p>On macOS the semaphore window buttons are enabled by default when the
|
||||||
|
native title bar is disabled. The offset of the buttons can be adjusted
|
||||||
|
using:</p><pre><code class="language-text-x-trilium-auto">body {
|
||||||
|
--native-titlebar-darwin-x-offset: 12;
|
||||||
|
--native-titlebar-darwin-y-offset: 14 !important;
|
||||||
|
}</code></pre>
|
||||||
|
<h3>Background/transparency effects on Windows (Mica)</h3>
|
||||||
|
<p>Windows 11 offers a special background/transparency effect called Mica,
|
||||||
|
which can be enabled by themes by setting the <code>--background-material</code> variable
|
||||||
|
at <code>body</code> level:</p><pre><code class="language-text-x-trilium-auto">body.electron.platform-win32 {
|
||||||
|
--background-material: tabbed;
|
||||||
|
}</code></pre>
|
||||||
|
<p>The value can be either <code>tabbed</code> (especially useful for the horizontal
|
||||||
|
layout) or <code>mica</code> (ideal for the vertical layout).</p>
|
||||||
|
<p>Do note that the Mica effect is applied at <code>body</code> level and the
|
||||||
|
theme needs to make the entire hierarchy (semi-)transparent in order for
|
||||||
|
it to be visible. Use the TrilumNext theme as an inspiration.</p>
|
||||||
|
<h2>Note icons, tab workspace accent color</h2>
|
||||||
|
<p>Theme capabilities are small adjustments done through CSS variables that
|
||||||
|
can affect the layout or the visual aspect of the application.</p>
|
||||||
|
<p>In the tab bar, to display the icons of notes instead of the icon of the
|
||||||
|
workspace:</p><pre><code class="language-text-x-trilium-auto">:root {
|
||||||
|
--tab-note-icons: true;
|
||||||
|
}</code></pre>
|
||||||
|
<p>When a workspace is hoisted for a given tab, it is possible to get the
|
||||||
|
background color of that workspace, for example to apply a small strip
|
||||||
|
on the tab instead of the whole background color:</p><pre><code class="language-text-x-trilium-auto">.note-tab .note-tab-wrapper {
|
||||||
|
--tab-background-color: initial !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-tab .note-tab-wrapper::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 3px;
|
||||||
|
background-color: var(--workspace-tab-background-color);
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@ -0,0 +1,36 @@
|
|||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" href="../../../style.css">
|
||||||
|
<base target="_parent">
|
||||||
|
<title data-trilium-title>Theme base (legacy vs. next)</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="content">
|
||||||
|
<h1 data-trilium-h1>Theme base (legacy vs. next)</h1>
|
||||||
|
|
||||||
|
<div class="ck-content">
|
||||||
|
<p>By default, any custom theme will be based on the legacy light theme.
|
||||||
|
To change the TriliumNext theme instead, add the <code>#appThemeBase=next</code> attribute
|
||||||
|
onto the existing theme. The <code>appTheme</code> attribute must also be
|
||||||
|
present.</p>
|
||||||
|
<p>
|
||||||
|
<img src="1_Theme base (legacy vs. nex.png" width="424" height="140">
|
||||||
|
</p>
|
||||||
|
<p>When <code>appThemeBase</code> is set to <code>next</code> it will use the
|
||||||
|
“TriliumNext (auto)” theme. Any other value is ignored and will use the
|
||||||
|
legacy white theme instead.</p>
|
||||||
|
<h2>Overrides</h2>
|
||||||
|
<p>Do note that the TriliumNext theme has a few more overrides than the legacy
|
||||||
|
theme, so you might need to suffix <code>!important</code> if the style changes
|
||||||
|
are not applied.</p><pre><code class="language-text-css">:root {
|
||||||
|
--launcher-pane-background-color: #0d6efd !important;
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 191 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 515 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 323 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 397 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
@ -0,0 +1,295 @@
|
|||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" href="../../style.css">
|
||||||
|
<base target="_parent">
|
||||||
|
<title data-trilium-title>Geo map</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="content">
|
||||||
|
<h1 data-trilium-h1>Geo map</h1>
|
||||||
|
|
||||||
|
<div class="ck-content">
|
||||||
|
<h2>Creating a new geo map</h2>
|
||||||
|
<figure class="table" style="width:100%;">
|
||||||
|
<table class="ck-table-resized">
|
||||||
|
<colgroup>
|
||||||
|
<col style="width:4.67%;">
|
||||||
|
<col style="width:57.81%;">
|
||||||
|
<col style="width:37.52%;">
|
||||||
|
</colgroup>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>1</th>
|
||||||
|
<td>
|
||||||
|
<figure class="image image_resized" style="width:100%;">
|
||||||
|
<img style="aspect-ratio:1256/1044;" src="Geo map_image.png" width="1256"
|
||||||
|
height="1044">
|
||||||
|
</figure>
|
||||||
|
</td>
|
||||||
|
<td style="vertical-align:top;">Right click on any note on the note tree and select <i>Insert child note</i> → <i>Geo Map (beta)</i>.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>2</th>
|
||||||
|
<td>
|
||||||
|
<figure class="image image_resized" style="width:100%;">
|
||||||
|
<img style="aspect-ratio:1720/1396;" src="1_Geo map_image.png" width="1720"
|
||||||
|
height="1396">
|
||||||
|
</figure>
|
||||||
|
</td>
|
||||||
|
<td style="vertical-align:top;">By default the map will be empty and will show the entire world.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</figure>
|
||||||
|
<h2>Repositioning the map</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Click and drag the map in order to move across the map.</li>
|
||||||
|
<li>Use the mouse wheel, two-finger gesture on a touchpad or the +/- buttons
|
||||||
|
on the top-left to adjust the zoom.</li>
|
||||||
|
</ul>
|
||||||
|
<p>The position on the map and the zoom are saved inside the map note. When
|
||||||
|
visting again the note it will restore this position.</p>
|
||||||
|
<h2>Adding a marker using the map</h2>
|
||||||
|
<figure class="table" style="width:100%;">
|
||||||
|
<table class="ck-table-resized">
|
||||||
|
<colgroup>
|
||||||
|
<col style="width:5.05%;">
|
||||||
|
<col style="width:49.62%;">
|
||||||
|
<col style="width:45.33%;">
|
||||||
|
</colgroup>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>1</th>
|
||||||
|
<td> </td>
|
||||||
|
<td style="vertical-align:top;">
|
||||||
|
<p>To create a marker, first navigate to the desired point on the map. Then
|
||||||
|
press the
|
||||||
|
<img class="image_resized" style="aspect-ratio:72/66;width:7.37%;"
|
||||||
|
src="2_Geo map_image.png" width="72" height="66">button on the top-right of the map.</p>
|
||||||
|
<p>If the button is not visible, make sure the button section is visible
|
||||||
|
by pressing the chevron button (
|
||||||
|
<img class="image_resized" style="aspect-ratio:72/66;width:7.51%;"
|
||||||
|
src="3_Geo map_image.png" width="72" height="66">) in the top-right of the map.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>2</th>
|
||||||
|
<td>
|
||||||
|
<figure class="image image_resized" style="width:100%;">
|
||||||
|
<img style="aspect-ratio:1730/416;" src="4_Geo map_image.png" width="1730"
|
||||||
|
height="416">
|
||||||
|
</figure>
|
||||||
|
<p> </p>
|
||||||
|
</td>
|
||||||
|
<td style="vertical-align:top;">
|
||||||
|
<p>Once pressed, the map will enter in the insert mode, as illustrated by
|
||||||
|
the notification.</p>
|
||||||
|
<p>Simply click the point on the map where to place the marker, or the Escape
|
||||||
|
key to cancel.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>3</th>
|
||||||
|
<td>
|
||||||
|
<figure class="image">
|
||||||
|
<img style="aspect-ratio:1586/404;" src="5_Geo map_image.png" width="1586"
|
||||||
|
height="404">
|
||||||
|
</figure>
|
||||||
|
<p> </p>
|
||||||
|
</td>
|
||||||
|
<td>Enter the name of the marker/note to be created. </td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>4</th>
|
||||||
|
<td>
|
||||||
|
<figure class="image">
|
||||||
|
<img style="aspect-ratio:1696/608;" src="6_Geo map_image.png" width="1696"
|
||||||
|
height="608">
|
||||||
|
</figure>
|
||||||
|
<p> </p>
|
||||||
|
</td>
|
||||||
|
<td>Once confirmed, the marker will show up on the map and it will also be
|
||||||
|
displayed as a child note of the map.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</figure>
|
||||||
|
<h2>Repositioning markers</h2>
|
||||||
|
<p>It's possible to reposition existing markers by simply drag and dropping
|
||||||
|
them to the new destination.</p>
|
||||||
|
<p>As soon as the mouse is released, the new position is saved.</p>
|
||||||
|
<p>If moved by mistake, there is currently no way to undo the change. If
|
||||||
|
the mouse was not yet released, it's possible to force a refresh of the
|
||||||
|
page (Ctrl+R or Meta+R) to cancel it.</p>
|
||||||
|
<h2>Adding the geolocation manually</h2>
|
||||||
|
<p>The location of a marker is stored in the <code>#geolocation</code> attribute
|
||||||
|
of the child notes:</p>
|
||||||
|
<figure class="image">
|
||||||
|
<img style="aspect-ratio:1288/278;" src="7_Geo map_image.png" width="1288"
|
||||||
|
height="278">
|
||||||
|
</figure>
|
||||||
|
<p>The value of the attribute is made up of the latitude and longitude separated
|
||||||
|
by a comma.</p>
|
||||||
|
<h3>Adding from Google Maps</h3>
|
||||||
|
<figure class="table">
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>1</th>
|
||||||
|
<td>
|
||||||
|
<figure class="image image-style-align-center image_resized" style="width:100%;">
|
||||||
|
<img style="aspect-ratio:732/918;" src="8_Geo map_image.png" width="732"
|
||||||
|
height="918">
|
||||||
|
</figure>
|
||||||
|
</td>
|
||||||
|
<td style="vertical-align:top;">
|
||||||
|
<p>Go to Google Maps on the web and look for a desired location, right click
|
||||||
|
on it and a context menu will show up.</p>
|
||||||
|
<p>Simply click on the first item displaying the coordinates and they will
|
||||||
|
be copied to clipboard.</p>
|
||||||
|
<p>Then paste the value inside the text box into the <code>#geolocation</code> attribute
|
||||||
|
of a child note of the map (don't forget to surround the value with a <code>"</code> character).</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>2</th>
|
||||||
|
<td>
|
||||||
|
<figure class="image image_resized" style="width:100%;">
|
||||||
|
<img style="aspect-ratio:518/84;" src="11_Geo map_image.png" width="518"
|
||||||
|
height="84">
|
||||||
|
</figure>
|
||||||
|
</td>
|
||||||
|
<td style="vertical-align:top;">
|
||||||
|
<p>In Trilium, create a child note under the map.</p>
|
||||||
|
<p> </p>
|
||||||
|
<p> </p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>3</th>
|
||||||
|
<td>
|
||||||
|
<figure class="image image_resized" style="width:100%;">
|
||||||
|
<img style="aspect-ratio:1074/276;" src="9_Geo map_image.png" width="1074"
|
||||||
|
height="276">
|
||||||
|
</figure>
|
||||||
|
</td>
|
||||||
|
<td style="vertical-align:top;">And then go to Owned Attributes and type <code>#geolocation="</code>, then
|
||||||
|
paste from the clipboard as-is and then add the ending <code>"</code> character.
|
||||||
|
Press Enter to confirm and the map should now be updated to contain the
|
||||||
|
new note.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</figure>
|
||||||
|
<h3>Adding from OpenStreetMap</h3>
|
||||||
|
<p>Similarly to the Google Maps approach:</p>
|
||||||
|
<figure class="table" style="width:100%;">
|
||||||
|
<table class="ck-table-resized">
|
||||||
|
<colgroup>
|
||||||
|
<col style="width:4.65%;">
|
||||||
|
<col style="width:36.01%;">
|
||||||
|
<col style="width:59.34%;">
|
||||||
|
</colgroup>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>1</th>
|
||||||
|
<td>
|
||||||
|
<figure class="image image_resized" style="width:100%;">
|
||||||
|
<img style="aspect-ratio:562/454;" src="12_Geo map_image.png" width="562"
|
||||||
|
height="454">
|
||||||
|
</figure>
|
||||||
|
</td>
|
||||||
|
<td style="vertical-align:top;">Go to any location on openstreetmap.org and right click to bring up the
|
||||||
|
context menu. Select the “Show address” item.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>2</th>
|
||||||
|
<td>
|
||||||
|
<figure class="image image_resized" style="width:100%;">
|
||||||
|
<img style="aspect-ratio:696/480;" src="13_Geo map_image.png" width="696"
|
||||||
|
height="480">
|
||||||
|
</figure>
|
||||||
|
</td>
|
||||||
|
<td style="vertical-align:top;">
|
||||||
|
<p>The address will be visible in the top-left of the screen, in the place
|
||||||
|
of the search bar.</p>
|
||||||
|
<p>Select the coordinates and copy them into the clipboard.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>3</th>
|
||||||
|
<td>
|
||||||
|
<figure class="image">
|
||||||
|
<img style="aspect-ratio:640/276;" src="14_Geo map_image.png" width="640"
|
||||||
|
height="276">
|
||||||
|
</figure>
|
||||||
|
</td>
|
||||||
|
<td style="vertical-align:top;">Simply paste the value inside the text box into the <code>#geolocation</code> attribute
|
||||||
|
of a child note of the map and then it should be displayed on the map.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</figure>
|
||||||
|
<h2>Adding GPS tracks (.gpx)</h2>
|
||||||
|
<p>Trilium has basic support for displaying GPS tracks on the geo map.</p>
|
||||||
|
<figure
|
||||||
|
class="table" style="width:100%;">
|
||||||
|
<table class="ck-table-resized">
|
||||||
|
<colgroup>
|
||||||
|
<col style="width:4.66%;">
|
||||||
|
<col style="width:36.79%;">
|
||||||
|
<col style="width:58.55%;">
|
||||||
|
</colgroup>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>1</th>
|
||||||
|
<td>
|
||||||
|
<figure class="image">
|
||||||
|
<img style="aspect-ratio:226/74;" src="17_Geo map_image.png" width="226"
|
||||||
|
height="74">
|
||||||
|
</figure>
|
||||||
|
</td>
|
||||||
|
<td style="vertical-align:top;">To add a track, simply drag & drop a .gpx file inside the geo map
|
||||||
|
in the note tree.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>2</th>
|
||||||
|
<td>
|
||||||
|
<figure class="image">
|
||||||
|
<img style="aspect-ratio:322/222;" src="18_Geo map_image.png" width="322"
|
||||||
|
height="222">
|
||||||
|
</figure>
|
||||||
|
</td>
|
||||||
|
<td style="vertical-align:top;">In order for the file to be recognized as a GPS track, it needs to show
|
||||||
|
up as <code>application/gpx+xml</code> in the <i>File type</i> field.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>3</th>
|
||||||
|
<td>
|
||||||
|
<figure class="image image_resized" style="width:100%;">
|
||||||
|
<img style="aspect-ratio:620/530;" src="19_Geo map_image.png" width="620"
|
||||||
|
height="530">
|
||||||
|
</figure>
|
||||||
|
</td>
|
||||||
|
<td style="vertical-align:top;">
|
||||||
|
<p>When going back to the map, the track should now be visible.</p>
|
||||||
|
<p>The start and end points of the track are indicated by the two blue markers.</p>
|
||||||
|
<p> </p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</figure>
|
||||||
|
<p> </p>
|
||||||
|
<p> </p>
|
||||||
|
<p> </p>
|
||||||
|
<p> </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 260 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@ -0,0 +1,52 @@
|
|||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" href="../../style.css">
|
||||||
|
<base target="_parent">
|
||||||
|
<title data-trilium-title>Exporting as PDF</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="content">
|
||||||
|
<h1 data-trilium-h1>Exporting as PDF</h1>
|
||||||
|
|
||||||
|
<div class="ck-content">
|
||||||
|
<figure class="image image-style-align-right image_resized" style="width:47.17%;">
|
||||||
|
<img style="aspect-ratio:951/432;" src="1_Exporting as PDF_image.png"
|
||||||
|
width="951" height="432">
|
||||||
|
</figure>
|
||||||
|
<p>On the desktop application of Trilium it is possible to export a note
|
||||||
|
as PDF. On the server or PWA (mobile), the option is not available due
|
||||||
|
to technical constraints and it will be hidden.</p>
|
||||||
|
<p>To print a note, select the
|
||||||
|
<img src="Exporting as PDF_image.png" width="29"
|
||||||
|
height="31">button to the right of the note and select <i>Export as PDF</i>.</p>
|
||||||
|
<p>Afterwards you will be prompted to select where to save the PDF file.
|
||||||
|
Upon confirmation, the resulting PDF will be opened automatically.</p>
|
||||||
|
<p>Should you encounter any visual issues in the resulting PDF file (e.g.
|
||||||
|
a table does not fit properly, there is cut off text, etc.) feel free to
|
||||||
|
<a
|
||||||
|
href="#root/OeKBfN6JbMIq/jRV1MPt4mNSP/hrC6xn7hnDq5">report the issue</a>. In this case, it's best to offer a sample note (click
|
||||||
|
on the
|
||||||
|
<img src="Exporting as PDF_image.png" width="29" height="31">button, select Export note → This note and all of its descendants → HTML
|
||||||
|
in ZIP archive). Make sure not to accidentally leak any personal information.</p>
|
||||||
|
<h2>Landscape mode</h2>
|
||||||
|
<p>When exporting to PDF, there are no customizable settings such as page
|
||||||
|
orientation, size, etc. However, it is possible to specify a given note
|
||||||
|
to be printed as a PDF in landscape mode by adding the <code>#printLandscape</code> attribute
|
||||||
|
to it (see <a class="reference-link" href="#root/9QRytp0ZYFIf/PnO38wN0ffOA">Adding an attribute to a note</a>).</p>
|
||||||
|
<h2>Page size</h2>
|
||||||
|
<p>By default, the resulting PDF will be in Letter format. It is possible
|
||||||
|
to adjust it to another page size via the <code>#printPageSize</code> attribute,
|
||||||
|
with one of the following values: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>.</p>
|
||||||
|
<h2>Keyboard shortcut</h2>
|
||||||
|
<p>It's possible to trigger the export to PDF from the keyboard by going
|
||||||
|
to <i>Keyboard shortcuts</i> and assigning a key combination
|
||||||
|
for the <code>exportAsPdf</code> action.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 340 B |
11
src/public/app/doc_notes/en/User Guide/index.html
Normal file
11
src/public/app/doc_notes/en/User Guide/index.html
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
</head>
|
||||||
|
<frameset cols="25%,75%">
|
||||||
|
<frame name="navigation" src="navigation.html">
|
||||||
|
<frame name="detail" src="User%20Guide/Types%20of%20notes/Geo%20map.html">
|
||||||
|
</frameset>
|
||||||
|
</html>
|
||||||
47
src/public/app/doc_notes/en/User Guide/navigation.html
Normal file
47
src/public/app/doc_notes/en/User Guide/navigation.html
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<ul>
|
||||||
|
<li>User Guide
|
||||||
|
<ul>
|
||||||
|
<li>Types of notes
|
||||||
|
<ul>
|
||||||
|
<li><a href="User%20Guide/Types%20of%20notes/Geo%20map.html" target="detail">Geo map</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>Working with notes
|
||||||
|
<ul>
|
||||||
|
<li><a href="User%20Guide/Working%20with%20notes/Exporting%20as%20PDF.html"
|
||||||
|
target="detail">Exporting as PDF</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>Power users
|
||||||
|
<ul>
|
||||||
|
<li>Theme development
|
||||||
|
<ul>
|
||||||
|
<li><a href="User%20Guide/Power%20users/Theme%20development/Creating%20a%20custom%20theme.html"
|
||||||
|
target="detail">Creating a custom theme</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="User%20Guide/Power%20users/Theme%20development/Theme%20base%20(legacy%20vs.%20next).html"
|
||||||
|
target="detail">Theme base (legacy vs. next)</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="User%20Guide/Power%20users/Theme%20development/Reference.html"
|
||||||
|
target="detail">Reference</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
567
src/public/app/doc_notes/en/User Guide/style.css
Normal file
567
src/public/app/doc_notes/en/User Guide/style.css
Normal file
@ -0,0 +1,567 @@
|
|||||||
|
/* !!!!!! TRILIUM CUSTOM CHANGES !!!!!! */
|
||||||
|
|
||||||
|
.printed-content .ck-widget__selection-handle, .printed-content .ck-widget__type-around { /* gets rid of triangles: https://github.com/zadam/trilium/issues/1129 */
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-break {
|
||||||
|
page-break-after: always;
|
||||||
|
}
|
||||||
|
|
||||||
|
.printed-content .page-break:after,
|
||||||
|
.printed-content .page-break > * {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ck-content li p {
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* CKEditor 5 (v41.0.0) content styles.
|
||||||
|
* Generated on Fri, 26 Jan 2024 10:23:49 GMT.
|
||||||
|
* For more information, check out https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--ck-color-image-caption-background: hsl(0, 0%, 97%);
|
||||||
|
--ck-color-image-caption-text: hsl(0, 0%, 20%);
|
||||||
|
--ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
|
||||||
|
--ck-color-mention-text: hsl(341, 100%, 30%);
|
||||||
|
--ck-color-selector-caption-background: hsl(0, 0%, 97%);
|
||||||
|
--ck-color-selector-caption-text: hsl(0, 0%, 20%);
|
||||||
|
--ck-highlight-marker-blue: hsl(201, 97%, 72%);
|
||||||
|
--ck-highlight-marker-green: hsl(120, 93%, 68%);
|
||||||
|
--ck-highlight-marker-pink: hsl(345, 96%, 73%);
|
||||||
|
--ck-highlight-marker-yellow: hsl(60, 97%, 73%);
|
||||||
|
--ck-highlight-pen-green: hsl(112, 100%, 27%);
|
||||||
|
--ck-highlight-pen-red: hsl(0, 85%, 49%);
|
||||||
|
--ck-image-style-spacing: 1.5em;
|
||||||
|
--ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
|
||||||
|
--ck-todo-list-checkmark-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
|
||||||
|
.ck-content .table .ck-table-resized {
|
||||||
|
table-layout: fixed;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
|
||||||
|
.ck-content .table table {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
|
||||||
|
.ck-content .table td,
|
||||||
|
.ck-content .table th {
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-table/theme/table.css */
|
||||||
|
.ck-content .table {
|
||||||
|
margin: 0.9em auto;
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-table/theme/table.css */
|
||||||
|
.ck-content .table table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px double hsl(0, 0%, 70%);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-table/theme/table.css */
|
||||||
|
.ck-content .table table td,
|
||||||
|
.ck-content .table table th {
|
||||||
|
min-width: 2em;
|
||||||
|
padding: .4em;
|
||||||
|
border: 1px solid hsl(0, 0%, 75%);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-table/theme/table.css */
|
||||||
|
.ck-content .table table th {
|
||||||
|
font-weight: bold;
|
||||||
|
background: hsla(0, 0%, 0%, 5%);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-table/theme/table.css */
|
||||||
|
.ck-content[dir="rtl"] .table th {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-table/theme/table.css */
|
||||||
|
.ck-content[dir="ltr"] .table th {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-table/theme/tablecaption.css */
|
||||||
|
.ck-content .table > figcaption {
|
||||||
|
display: table-caption;
|
||||||
|
caption-side: top;
|
||||||
|
word-break: break-word;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--ck-color-selector-caption-text);
|
||||||
|
background-color: var(--ck-color-selector-caption-background);
|
||||||
|
padding: .6em;
|
||||||
|
font-size: .75em;
|
||||||
|
outline-offset: -1px;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
|
||||||
|
.ck-content .page-break {
|
||||||
|
position: relative;
|
||||||
|
clear: both;
|
||||||
|
padding: 5px 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
|
||||||
|
.ck-content .page-break::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
border-bottom: 2px dashed hsl(0, 0%, 77%);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
|
||||||
|
.ck-content .page-break__label {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
padding: .3em .6em;
|
||||||
|
display: block;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border: 1px solid hsl(0, 0%, 77%);
|
||||||
|
border-radius: 2px;
|
||||||
|
font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
|
||||||
|
font-size: 0.75em;
|
||||||
|
font-weight: bold;
|
||||||
|
color: hsl(0, 0%, 20%);
|
||||||
|
background: hsl(0, 0%, 100%);
|
||||||
|
box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-media-embed/theme/mediaembed.css */
|
||||||
|
.ck-content .media {
|
||||||
|
clear: both;
|
||||||
|
margin: 0.9em 0;
|
||||||
|
display: block;
|
||||||
|
min-width: 15em;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/todolist.css */
|
||||||
|
.ck-content .todo-list {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/todolist.css */
|
||||||
|
.ck-content .todo-list li {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/todolist.css */
|
||||||
|
.ck-content .todo-list li .todo-list {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/todolist.css */
|
||||||
|
.ck-content .todo-list .todo-list__label > input {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: var(--ck-todo-list-checkmark-size);
|
||||||
|
height: var(--ck-todo-list-checkmark-size);
|
||||||
|
vertical-align: middle;
|
||||||
|
border: 0;
|
||||||
|
left: -25px;
|
||||||
|
margin-right: -15px;
|
||||||
|
right: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/todolist.css */
|
||||||
|
.ck-content[dir=rtl] .todo-list .todo-list__label > input {
|
||||||
|
left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
right: -25px;
|
||||||
|
margin-left: -15px;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/todolist.css */
|
||||||
|
.ck-content .todo-list .todo-list__label > input::before {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
|
content: '';
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid hsl(0, 0%, 20%);
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: 250ms ease-in-out box-shadow;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/todolist.css */
|
||||||
|
.ck-content .todo-list .todo-list__label > input::after {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: content-box;
|
||||||
|
pointer-events: none;
|
||||||
|
content: '';
|
||||||
|
left: calc( var(--ck-todo-list-checkmark-size) / 3 );
|
||||||
|
top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
|
||||||
|
width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
|
||||||
|
height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
|
||||||
|
border-style: solid;
|
||||||
|
border-color: transparent;
|
||||||
|
border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/todolist.css */
|
||||||
|
.ck-content .todo-list .todo-list__label > input[checked]::before {
|
||||||
|
background: hsl(126, 64%, 41%);
|
||||||
|
border-color: hsl(126, 64%, 41%);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/todolist.css */
|
||||||
|
.ck-content .todo-list .todo-list__label > input[checked]::after {
|
||||||
|
border-color: hsl(0, 0%, 100%);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/todolist.css */
|
||||||
|
.ck-content .todo-list .todo-list__label .todo-list__label__description {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/todolist.css */
|
||||||
|
.ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type=checkbox] {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/todolist.css */
|
||||||
|
.ck-editor__editable.ck-content .todo-list .todo-list__label > input,
|
||||||
|
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/todolist.css */
|
||||||
|
.ck-editor__editable.ck-content .todo-list .todo-list__label > input:hover::before, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input:hover::before {
|
||||||
|
box-shadow: 0 0 0 5px hsla(0, 0%, 0%, 0.1);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/todolist.css */
|
||||||
|
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: var(--ck-todo-list-checkmark-size);
|
||||||
|
height: var(--ck-todo-list-checkmark-size);
|
||||||
|
vertical-align: middle;
|
||||||
|
border: 0;
|
||||||
|
left: -25px;
|
||||||
|
margin-right: -15px;
|
||||||
|
right: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/todolist.css */
|
||||||
|
.ck-editor__editable.ck-content[dir=rtl] .todo-list .todo-list__label > span[contenteditable=false] > input {
|
||||||
|
left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
right: -25px;
|
||||||
|
margin-left: -15px;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/todolist.css */
|
||||||
|
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input::before {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
|
content: '';
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid hsl(0, 0%, 20%);
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: 250ms ease-in-out box-shadow;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/todolist.css */
|
||||||
|
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input::after {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: content-box;
|
||||||
|
pointer-events: none;
|
||||||
|
content: '';
|
||||||
|
left: calc( var(--ck-todo-list-checkmark-size) / 3 );
|
||||||
|
top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
|
||||||
|
width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
|
||||||
|
height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
|
||||||
|
border-style: solid;
|
||||||
|
border-color: transparent;
|
||||||
|
border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/todolist.css */
|
||||||
|
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input[checked]::before {
|
||||||
|
background: hsl(126, 64%, 41%);
|
||||||
|
border-color: hsl(126, 64%, 41%);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/todolist.css */
|
||||||
|
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input[checked]::after {
|
||||||
|
border-color: hsl(0, 0%, 100%);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/todolist.css */
|
||||||
|
.ck-editor__editable.ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type=checkbox] {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/list.css */
|
||||||
|
.ck-content ol {
|
||||||
|
list-style-type: decimal;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/list.css */
|
||||||
|
.ck-content ol ol {
|
||||||
|
list-style-type: lower-latin;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/list.css */
|
||||||
|
.ck-content ol ol ol {
|
||||||
|
list-style-type: lower-roman;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/list.css */
|
||||||
|
.ck-content ol ol ol ol {
|
||||||
|
list-style-type: upper-latin;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/list.css */
|
||||||
|
.ck-content ol ol ol ol ol {
|
||||||
|
list-style-type: upper-roman;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/list.css */
|
||||||
|
.ck-content ul {
|
||||||
|
list-style-type: disc;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/list.css */
|
||||||
|
.ck-content ul ul {
|
||||||
|
list-style-type: circle;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/list.css */
|
||||||
|
.ck-content ul ul ul {
|
||||||
|
list-style-type: square;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-list/theme/list.css */
|
||||||
|
.ck-content ul ul ul ul {
|
||||||
|
list-style-type: square;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/image.css */
|
||||||
|
.ck-content .image {
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0.9em auto;
|
||||||
|
min-width: 50px;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/image.css */
|
||||||
|
.ck-content .image img {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 100%;
|
||||||
|
min-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/image.css */
|
||||||
|
.ck-content .image-inline {
|
||||||
|
/*
|
||||||
|
* Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).;
|
||||||
|
* Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
|
||||||
|
* This strange behavior does not happen with inline-flex.
|
||||||
|
*/
|
||||||
|
display: inline-flex;
|
||||||
|
max-width: 100%;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/image.css */
|
||||||
|
.ck-content .image-inline picture {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/image.css */
|
||||||
|
.ck-content .image-inline picture,
|
||||||
|
.ck-content .image-inline img {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/imageresize.css */
|
||||||
|
.ck-content img.image_resized {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/imageresize.css */
|
||||||
|
.ck-content .image.image_resized {
|
||||||
|
max-width: 100%;
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/imageresize.css */
|
||||||
|
.ck-content .image.image_resized img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/imageresize.css */
|
||||||
|
.ck-content .image.image_resized > figcaption {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/imagecaption.css */
|
||||||
|
.ck-content .image > figcaption {
|
||||||
|
display: table-caption;
|
||||||
|
caption-side: bottom;
|
||||||
|
word-break: break-word;
|
||||||
|
color: var(--ck-color-image-caption-text);
|
||||||
|
background-color: var(--ck-color-image-caption-background);
|
||||||
|
padding: .6em;
|
||||||
|
font-size: .75em;
|
||||||
|
outline-offset: -1px;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
|
||||||
|
.ck-content .image-style-block-align-left,
|
||||||
|
.ck-content .image-style-block-align-right {
|
||||||
|
max-width: calc(100% - var(--ck-image-style-spacing));
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
|
||||||
|
.ck-content .image-style-align-left,
|
||||||
|
.ck-content .image-style-align-right {
|
||||||
|
clear: none;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
|
||||||
|
.ck-content .image-style-side {
|
||||||
|
float: right;
|
||||||
|
margin-left: var(--ck-image-style-spacing);
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
|
||||||
|
.ck-content .image-style-align-left {
|
||||||
|
float: left;
|
||||||
|
margin-right: var(--ck-image-style-spacing);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
|
||||||
|
.ck-content .image-style-align-center {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
|
||||||
|
.ck-content .image-style-align-right {
|
||||||
|
float: right;
|
||||||
|
margin-left: var(--ck-image-style-spacing);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
|
||||||
|
.ck-content .image-style-block-align-right {
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
|
||||||
|
.ck-content .image-style-block-align-left {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
|
||||||
|
.ck-content p + .image-style-align-left,
|
||||||
|
.ck-content p + .image-style-align-right,
|
||||||
|
.ck-content p + .image-style-side {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
|
||||||
|
.ck-content .image-inline.image-style-align-left,
|
||||||
|
.ck-content .image-inline.image-style-align-right {
|
||||||
|
margin-top: var(--ck-inline-image-style-spacing);
|
||||||
|
margin-bottom: var(--ck-inline-image-style-spacing);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
|
||||||
|
.ck-content .image-inline.image-style-align-left {
|
||||||
|
margin-right: var(--ck-inline-image-style-spacing);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
|
||||||
|
.ck-content .image-inline.image-style-align-right {
|
||||||
|
margin-left: var(--ck-inline-image-style-spacing);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
|
||||||
|
.ck-content .marker-yellow {
|
||||||
|
background-color: var(--ck-highlight-marker-yellow);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
|
||||||
|
.ck-content .marker-green {
|
||||||
|
background-color: var(--ck-highlight-marker-green);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
|
||||||
|
.ck-content .marker-pink {
|
||||||
|
background-color: var(--ck-highlight-marker-pink);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
|
||||||
|
.ck-content .marker-blue {
|
||||||
|
background-color: var(--ck-highlight-marker-blue);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
|
||||||
|
.ck-content .pen-red {
|
||||||
|
color: var(--ck-highlight-pen-red);
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
|
||||||
|
.ck-content .pen-green {
|
||||||
|
color: var(--ck-highlight-pen-green);
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-block-quote/theme/blockquote.css */
|
||||||
|
.ck-content blockquote {
|
||||||
|
overflow: hidden;
|
||||||
|
padding-right: 1.5em;
|
||||||
|
padding-left: 1.5em;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
font-style: italic;
|
||||||
|
border-left: solid 5px hsl(0, 0%, 80%);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-block-quote/theme/blockquote.css */
|
||||||
|
.ck-content[dir="rtl"] blockquote {
|
||||||
|
border-left: 0;
|
||||||
|
border-right: solid 5px hsl(0, 0%, 80%);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-basic-styles/theme/code.css */
|
||||||
|
.ck-content code {
|
||||||
|
background-color: hsla(0, 0%, 78%, 0.3);
|
||||||
|
padding: .15em;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-font/theme/fontsize.css */
|
||||||
|
.ck-content .text-tiny {
|
||||||
|
font-size: .7em;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-font/theme/fontsize.css */
|
||||||
|
.ck-content .text-small {
|
||||||
|
font-size: .85em;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-font/theme/fontsize.css */
|
||||||
|
.ck-content .text-big {
|
||||||
|
font-size: 1.4em;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-font/theme/fontsize.css */
|
||||||
|
.ck-content .text-huge {
|
||||||
|
font-size: 1.8em;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-mention/theme/mention.css */
|
||||||
|
.ck-content .mention {
|
||||||
|
background: var(--ck-color-mention-background);
|
||||||
|
color: var(--ck-color-mention-text);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-horizontal-line/theme/horizontalline.css */
|
||||||
|
.ck-content hr {
|
||||||
|
margin: 15px 0;
|
||||||
|
height: 4px;
|
||||||
|
background: hsl(0, 0%, 87%);
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-code-block/theme/codeblock.css */
|
||||||
|
.ck-content pre {
|
||||||
|
padding: 1em;
|
||||||
|
text-align: left;
|
||||||
|
direction: ltr;
|
||||||
|
tab-size: 4;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
font-style: normal;
|
||||||
|
min-width: 200px;
|
||||||
|
border: 0px;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
.ck-content pre:not(.hljs) {
|
||||||
|
color: hsl(0, 0%, 20.8%);
|
||||||
|
background: hsla(0, 0%, 78%, 0.3);
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-code-block/theme/codeblock.css */
|
||||||
|
.ck-content pre code {
|
||||||
|
background: unset;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
@media print {
|
||||||
|
/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
|
||||||
|
.ck-content .page-break {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
|
||||||
|
.ck-content .page-break::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user