Update !!!meta.json, README.md, and 11 more files...

This commit is contained in:
Quentin Le Caignec 2021-06-10 15:25:03 +02:00
commit 6edf300f7c
13 changed files with 1061 additions and 0 deletions

328
!!!meta.json Normal file
View File

@ -0,0 +1,328 @@
{
"formatVersion": 1,
"appVersion": "0.45.9",
"files": [
{
"isClone": false,
"noteId": "88wRRr8JFs9w",
"notePath": [
"88wRRr8JFs9w"
],
"title": "Timeline Widget",
"notePosition": 70,
"prefix": null,
"isExpanded": 0,
"type": "render",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "hideChildrenOverview",
"value": "",
"isInheritable": false,
"position": 10
},
{
"type": "relation",
"name": "renderNote",
"value": "K4zWN9M9WFWa",
"isInheritable": false,
"position": 20
},
{
"type": "label",
"name": "iconClass",
"value": "bx bxs-calendar",
"isInheritable": false,
"position": 30
},
{
"type": "label",
"name": "label:timeline_start",
"value": "promoted,single,text",
"isInheritable": false,
"position": 40
},
{
"type": "label",
"name": "label:timeline_end",
"value": "promoted,single,text",
"isInheritable": false,
"position": 50
},
{
"type": "label",
"name": "label:timeline_present",
"value": "promoted,single,text",
"isInheritable": false,
"position": 60
},
{
"type": "label",
"name": "timeline_start",
"value": "2020",
"isInheritable": false,
"position": 70
},
{
"type": "label",
"name": "timeline_end",
"value": "2050",
"isInheritable": false,
"position": 80
},
{
"type": "label",
"name": "timeline_present",
"value": "2021",
"isInheritable": false,
"position": 90
}
],
"dirFileName": "Timeline Widget",
"children": [
{
"isClone": false,
"noteId": "K4zWN9M9WFWa",
"notePath": [
"88wRRr8JFs9w",
"K4zWN9M9WFWa"
],
"title": "render.html",
"notePosition": 5,
"prefix": null,
"isExpanded": 0,
"type": "code",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "archived",
"value": "",
"isInheritable": false,
"position": 10
}
],
"dataFileName": "render.html",
"dirFileName": "1_render.html",
"children": [
{
"isClone": false,
"noteId": "WfNOCj0WIe1V",
"notePath": [
"88wRRr8JFs9w",
"K4zWN9M9WFWa",
"WfNOCj0WIe1V"
],
"title": "script.js",
"notePosition": 153,
"prefix": null,
"isExpanded": 0,
"type": "code",
"mime": "application/javascript;env=frontend",
"attributes": [],
"dataFileName": "script.js",
"dirFileName": "1_script.js",
"children": [
{
"isClone": false,
"noteId": "mmW5usFcw0yu",
"notePath": [
"88wRRr8JFs9w",
"K4zWN9M9WFWa",
"WfNOCj0WIe1V",
"mmW5usFcw0yu"
],
"title": "moment.min.js",
"notePosition": 123,
"prefix": null,
"isExpanded": 0,
"type": "file",
"mime": "application/javascript",
"attributes": [
{
"type": "label",
"name": "originalFileName",
"value": "moment.min.js",
"isInheritable": false,
"position": 1000
}
],
"dataFileName": "moment.min.js"
},
{
"isClone": false,
"noteId": "Cy3lxle7k81w",
"notePath": [
"88wRRr8JFs9w",
"K4zWN9M9WFWa",
"WfNOCj0WIe1V",
"Cy3lxle7k81w"
],
"title": "vis.min.js",
"notePosition": 133,
"prefix": null,
"isExpanded": 0,
"type": "file",
"mime": "application/javascript",
"attributes": [
{
"type": "label",
"name": "originalFileName",
"value": "vis.min.js",
"isInheritable": false,
"position": 1000
}
],
"dataFileName": "vis.min.js"
},
{
"isClone": false,
"noteId": "6H1kgqEVe6aV",
"notePath": [
"88wRRr8JFs9w",
"K4zWN9M9WFWa",
"WfNOCj0WIe1V",
"6H1kgqEVe6aV"
],
"title": "vis-timeline-graph2d.min.js",
"notePosition": 143,
"prefix": null,
"isExpanded": 0,
"type": "file",
"mime": "application/javascript",
"attributes": [
{
"type": "label",
"name": "originalFileName",
"value": "vis-timeline-graph2d.min.js",
"isInheritable": false,
"position": 1000
}
],
"dataFileName": "vis-timeline-graph2d.min.js"
},
{
"isClone": false,
"noteId": "mqnQgjq1H3PN",
"notePath": [
"88wRRr8JFs9w",
"K4zWN9M9WFWa",
"WfNOCj0WIe1V",
"mqnQgjq1H3PN"
],
"title": "vis.min.css",
"notePosition": 153,
"prefix": null,
"isExpanded": 0,
"type": "file",
"mime": "text/css",
"attributes": [
{
"type": "label",
"name": "originalFileName",
"value": "vis.min.css",
"isInheritable": false,
"position": 10
},
{
"type": "label",
"name": "appCss",
"value": "",
"isInheritable": false,
"position": 20
}
],
"dataFileName": "vis.min.css"
},
{
"isClone": false,
"noteId": "pAtCFHdWtxQj",
"notePath": [
"88wRRr8JFs9w",
"K4zWN9M9WFWa",
"WfNOCj0WIe1V",
"pAtCFHdWtxQj"
],
"title": "vis-timeline-graph2d.min.css",
"notePosition": 163,
"prefix": null,
"isExpanded": 0,
"type": "file",
"mime": "text/css",
"attributes": [
{
"type": "label",
"name": "originalFileName",
"value": "vis-timeline-graph2d.min.css",
"isInheritable": false,
"position": 10
},
{
"type": "label",
"name": "appCss",
"value": "",
"isInheritable": false,
"position": 20
}
],
"dataFileName": "vis-timeline-graph2d.min.css"
}
]
}
]
},
{
"isClone": false,
"noteId": "JcAPShvMupkV",
"notePath": [
"88wRRr8JFs9w",
"JcAPShvMupkV"
],
"title": "button.js",
"notePosition": 15,
"prefix": null,
"isExpanded": 0,
"type": "code",
"mime": "application/javascript;env=frontend",
"attributes": [
{
"type": "relation",
"name": "targetNote",
"value": "88wRRr8JFs9w",
"isInheritable": false,
"position": 10
},
{
"type": "label",
"name": "run",
"value": "frontendStartup",
"isInheritable": false,
"position": 20
},
{
"type": "label",
"name": "archived",
"value": "",
"isInheritable": false,
"position": 30
}
],
"dataFileName": "button.js"
}
]
},
{
"noImport": true,
"dataFileName": "navigation.html"
},
{
"noImport": true,
"dataFileName": "index.html"
},
{
"noImport": true,
"dataFileName": "style.css"
}
]
}

13
README.md Normal file
View File

@ -0,0 +1,13 @@
# trilium-timeline
Interactive timeline in html+js widget for [Trilium Notes](https://github.com/zadam/trilium), using [vis.js](https://visjs.org/) timeline.
## What is this?
Fetches notes with specific labels to be displayed as events in various ways (single point, range, background box) grouped in multiple categories and with varying colors, uses root note's promoted attributes to easily set the timeline values (present marker, start/end values for the initial loaded view).
Used for my own personal purposes (prepping and tracking a Pathfinder 2e tabletop campaign) and will require tweaking to be used for other labels and note structures.
## Install
Zip this source into a .zip file and import it into Trilium Notes (right-click into the tree sidebar -> Import).

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,138 @@
// Initialize libraries and context
var vis = require('vis.min.js');
var moment = require('moment.min.js');
var container = document.getElementById("timeline");
// Get notes with specific labels
const events = await api.runOnServer(() => {
const event_notes = api.getNotesWithLabel('date_start');
const agent_notes = api.getNotesWithLabel('date_birth');
const events = [];
for (const note of event_notes) {
const id = note.noteId;
const content = note.title;
const start = note.getLabelValue('date_start');
const end = note.getLabelValue('date_end');
const group = note.getLabelValue('date_type');
if (content && start) {
events.push({ id, content, start, end, group });
}
}
for (const note of agent_notes) {
const id = note.noteId;
const start = note.getLabelValue('date_birth');
const end = note.getLabelValue('date_death');
const group = note.getLabelValue('date_type') ? note.getLabelValue('date_type') : 'agent';
if (start) {
const content = note.title + ' (Naissance)';
events.push({ id, content, start, group });
}
if (end) {
const content = note.title + ' (Mort)';
events.push({ id, content, end, group });
}
}
return events;
});
// Create groups
var groups = new vis.DataSet([
{id: 0, order: 2, content:'Évenements', visible: true}, // 'default'
// {id: 1, order: 5, content:'Âge', visible: false}, // 'era'
{id: 2, order: 4, content:'Astrologique/Fêtes', visible: true}, // 'astrological'
{id: 3, order: 1, content:'Agents', visible: true}, // 'agent'
{id: 4, order: 0, content:'Joueurs', visible: true}, // 'player'
{id: 5, order: 5, content:'Sessions', visible: true}, // 'session'
{id: 6, order: 3, content:'Prophéties', visible: true}, // 'session'
]);
// Create a DataSet, change groups/type with custom logic
var items = new vis.DataSet();
for (var i = 0; i < events.length; i++) {
var note_id = events[i].id;
var note_link = await api.createNoteLink(note_id);
var event_content = events[i].content;
note_link[0].firstChild.innerText = event_content;
var event_start = vis.moment(events[i].start);
var event_end = events[i].end ? vis.moment(events[i].end) : null;
// If no group is set, default
var event_groupName = events[i].group ? events[i].group : 'default';
// Change 'era' type dates to appear in the background
var event_type = (event_groupName == 'era') ? 'background' : null;
// Convert group names into IDs
var event_group = (event_groupName == 'default') ? 0 :
(event_groupName == 'era') ? 1 :
(event_groupName == 'astrological') ? 2 :
(event_groupName == 'agent') ? 3 :
(event_groupName == 'player') ? 4 :
(event_groupName == 'session') ? 5 :
(event_groupName == 'prophecy') ? 6 : 0;
var event_style = events[i].style ? events[i].style : null;
items.add({
id: i,
content: note_link[0].firstChild,
start: event_start,
end: event_end,
group: (event_group == 1) ? 5 : event_group, // force change specific notes into other group
type: event_type,
className: event_groupName,
style: event_style,
});
}
const timeline_options = await api.runOnServer(() => {
const parentNote = api.startNote.getParentNotes()[0];
const timeline_start = parentNote.getLabelValue('timeline_start');
const timeline_end = parentNote.getLabelValue('timeline_end');
const timeline_present = parentNote.getLabelValue('timeline_present');
return {timeline_start, timeline_end, timeline_present};
});
console.log(timeline_options);
// Timeline options
var options = {
clickToUse: false,
showCurrentTime: true,
minHeight: 750,
maxHeight: 820,
start: timeline_options.timeline_start,
end: timeline_options.timeline_end,
};
// Create Timeline
var timeline = new vis.Timeline(container, items, groups, options);
// Add present time marker based on "timeline_present" label
timeline.setCurrentTime(timeline_options.timeline_present);
// Set specific groups as hidden by default
toggleGroupVisibility(2);
toggleGroupVisibility(6);
// Toggle buttons
document.getElementById('toggle_players').onclick = function () {
toggleGroupVisibility(4); // players
};
document.getElementById('toggle_agents').onclick = function () {
toggleGroupVisibility(3); // agents
};
document.getElementById('toggle_events').onclick = function () {
toggleGroupVisibility(0); // events
};
document.getElementById('toggle_prophecies').onclick = function () {
toggleGroupVisibility(6); // prophecies
};
document.getElementById('toggle_astros').onclick = function () {
toggleGroupVisibility(2); // astrological
};
document.getElementById('toggle_sessions').onclick = function () {
toggleGroupVisibility(5); // sessions
};
// Function to toggle group visibility
function toggleGroupVisibility(group_id){
var setting = groups.get({filter:function(item){return (item.id==group_id)}})[0].visible;
groups.update({id: group_id, visible: !setting});
timeline.setGroups(groups);
}

View File

@ -0,0 +1,6 @@
// Add UI Button shortcut
api.addButtonToToolbar({
title: 'Timeline',
icon: 'bx bxs-calendar',
action: async () => api.activateNote(await api.startNote.getRelationValue('targetNote'))
});

107
Timeline Widget/render.html Normal file
View File

@ -0,0 +1,107 @@
<div id="timeline">
<div class="menu">
<input type="button" id="toggle_players" value="Toggle Joueurs">
<input type="button" id="toggle_agents" value="Toggle Agents">
<input type="button" id="toggle_events" value="Toggle Évenements">
<input type="button" id="toggle_prophecies" value="Toggle Prophéties">
<input type="button" id="toggle_astros" value="Toggle Astrologique">
<input type="button" id="toggle_sessions" value="Toggle Sessions">
</div>
</div>
<style>
body, html {
font-family: sans-serif;
}
/* button menu */
.menu {
z-index: 5;
right: 2px;
top: 140px;
font-size: small;
}
.menu > input {
border-color: gray;
border-radius: 5px;
border-width: 1px;
}
/* add visible dotted line to ranges */
.vis-item.vis-range {
border-style: dotted !important;
border-color: black !important;
border-width: 1px;
}
/* change text and label color */
.vis-text, .vis-label {
color: lightgray !important;
}
/* change link color */
.vis-item-content > a {
color: #1a1a1a;
font-size: small;
}
/* custom event style */
.default {
background-color : brown;
border-color : brown;
}
.era {
/*background-color : brown;*/
/*border-color : brown;*/
}
.player {
background-color : orange;
border-color: orange;
}
.agent {
background-color: forestgreen;
border-color: forestgreen;
}
.prophecy {
background-color: blueviolet;
border-color : blueviolet;
}
.astrological {
background-color: royalblue;
border-color : royalblue;
}
/* change current time marker color */
.vis-current-time {
background-color: red;
}
/* alternating column backgrounds */
.vis-time-axis .vis-grid.vis-odd {
background: #424242;
}
/* gray background in weekends, white text color */
.vis-time-axis .vis-grid.vis-saturday,
.vis-time-axis .vis-grid.vis-sunday {
background: gray;
}
.vis-time-axis .vis-text.vis-saturday,
.vis-time-axis .vis-text.vis-sunday {
color: dimgray;
}
/* interior grid color */
.vis-grid.vis-minor {
border-color: dimgray !important;
}
.vis-foreground .vis-group {
border-color: dimgray !important;
}
/* reduce padding */
.vis-item .vis-item-content {
padding: 2px;
}
</style>

11
index.html Normal file
View 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="Timeline%20Widget/render.html">
</frameset>
</html>

39
navigation.html Normal file
View File

@ -0,0 +1,39 @@
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li>Timeline Widget
<ul>
<li><a href="Timeline%20Widget/render.html" target="detail">render.html</a>
<ul>
<li><a href="Timeline%20Widget/1_render.html/script.js" target="detail">script.js</a>
<ul>
<li><a href="Timeline%20Widget/1_render.html/1_script.js/moment.min.js" target="detail">moment.min.js</a>
</li>
<li><a href="Timeline%20Widget/1_render.html/1_script.js/vis.min.js" target="detail">vis.min.js</a>
</li>
<li><a href="Timeline%20Widget/1_render.html/1_script.js/vis-timeline-graph2d.min.js"
target="detail">vis-timeline-graph2d.min.js</a>
</li>
<li><a href="Timeline%20Widget/1_render.html/1_script.js/vis.min.css" target="detail">vis.min.css</a>
</li>
<li><a href="Timeline%20Widget/1_render.html/1_script.js/vis-timeline-graph2d.min.css"
target="detail">vis-timeline-graph2d.min.css</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="Timeline%20Widget/button.js" target="detail">button.js</a>
</li>
</ul>
</li>
</ul>
</body>
</html>

338
style.css Normal file
View File

@ -0,0 +1,338 @@
/* !!!!!! 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;
}
/*
* CKEditor 5 (v23.1.0) content styles.
* Generated on Thu, 29 Oct 2020 12:17:48 GMT.
* For more information, check out https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html
*/
:root {
--ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
--ck-color-mention-text: hsl(341, 100%, 30%);
--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-todo-list-checkmark-size: 16px;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-side {
float: right;
margin-left: var(--ck-image-style-spacing);
max-width: 50%;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-left {
float: left;
margin-right: var(--ck-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-center {
margin-left: auto;
margin-right: auto;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-right {
float: right;
margin-left: var(--ck-image-style-spacing);
}
/* ckeditor5-image/theme/image.css */
.ck-content .image {
display: table;
clear: both;
text-align: center;
margin: 1em auto;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image img {
display: block;
margin: 0 auto;
max-width: 100%;
min-width: 50px;
}
/* ckeditor5-image/theme/imagecaption.css */
.ck-content .image > figcaption {
display: table-caption;
caption-side: bottom;
word-break: break-word;
color: hsl(0, 0%, 20%);
background-color: hsl(0, 0%, 97%);
padding: .6em;
font-size: .75em;
outline-offset: -1px;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized {
max-width: 100%;
display: block;
box-sizing: border-box;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized img {
width: 100%;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized > figcaption {
display: block;
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-yellow {
background-color: var(--ck-highlight-marker-yellow);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-green {
background-color: var(--ck-highlight-marker-green);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-pink {
background-color: var(--ck-highlight-marker-pink);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-blue {
background-color: var(--ck-highlight-marker-blue);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .pen-red {
color: var(--ck-highlight-pen-red);
background-color: transparent;
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .pen-green {
color: var(--ck-highlight-pen-green);
background-color: transparent;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-tiny {
font-size: .7em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-small {
font-size: .85em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-big {
font-size: 1.4em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-huge {
font-size: 1.8em;
}
/* 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%);
}
/* ckeditor5-block-quote/theme/blockquote.css */
.ck-content[dir="rtl"] blockquote {
border-left: 0;
border-right: solid 5px hsl(0, 0%, 80%);
}
/* ckeditor5-basic-styles/theme/code.css */
.ck-content code {
background-color: hsla(0, 0%, 78%, 0.3);
padding: .15em;
border-radius: 2px;
}
/* ckeditor5-table/theme/table.css */
.ck-content .table {
margin: 1em auto;
display: table;
}
/* 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%);
}
/* 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%);
}
/* ckeditor5-table/theme/table.css */
.ck-content .table table th {
font-weight: bold;
background: hsla(0, 0%, 0%, 5%);
}
/* ckeditor5-table/theme/table.css */
.ck-content[dir="rtl"] .table th {
text-align: right;
}
/* ckeditor5-table/theme/table.css */
.ck-content[dir="ltr"] .table th {
text-align: left;
}
/* 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;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break::after {
content: '';
position: absolute;
border-bottom: 2px dashed hsl(0, 0%, 77%);
width: 100%;
}
/* 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;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list {
list-style: none;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list li {
margin-bottom: 5px;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list li .todo-list {
margin-top: 5px;
}
/* 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;
}
/* 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, 250ms ease-in-out background, 250ms ease-in-out border;
}
/* 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);
}
/* 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%);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input[checked]::after {
border-color: hsl(0, 0%, 100%);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label .todo-list__label__description {
vertical-align: middle;
}
/* ckeditor5-media-embed/theme/mediaembed.css */
.ck-content .media {
clear: both;
margin: 1em 0;
display: block;
min-width: 15em;
}
/* ckeditor5-html-embed/theme/htmlembed.css */
.ck-content .raw-html-embed {
margin: 1em auto;
min-width: 15em;
}
/* ckeditor5-horizontal-line/theme/horizontalline.css */
.ck-content hr {
margin: 15px 0;
height: 4px;
background: hsl(0, 0%, 87%);
border: 0;
}
/* ckeditor5-code-block/theme/codeblock.css */
.ck-content pre {
padding: 1em;
color: hsl(0, 0%, 20.8%);
background: hsla(0, 0%, 78%, 0.3);
border: 1px solid hsl(0, 0%, 77%);
border-radius: 2px;
text-align: left;
direction: ltr;
tab-size: 4;
white-space: pre-wrap;
font-style: normal;
min-width: 200px;
}
/* ckeditor5-code-block/theme/codeblock.css */
.ck-content pre code {
background: unset;
padding: 0;
border-radius: 0;
}
/* ckeditor5-mention/theme/mention.css */
.ck-content .mention {
background: var(--ck-color-mention-background);
color: var(--ck-color-mention-text);
}
@media print {
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break {
padding: 0;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break::after {
display: none;
}
}