mirror of
https://github.com/zadam/trilium.git
synced 2025-12-24 08:14:25 +01:00
497 lines
13 KiB
CSS
497 lines
13 KiB
CSS
/*
|
|
* CKEDITOR
|
|
*/
|
|
|
|
:root {
|
|
--ck-font-face: var(--main-font-family);
|
|
}
|
|
|
|
/*
|
|
* Toolbar
|
|
*/
|
|
|
|
.ck.ck-toolbar,
|
|
.ck.ck-block-toolbar-button {
|
|
--ck-color-toolbar-background: transparent;
|
|
|
|
--ck-color-button-default-background: transparent;
|
|
--ck-color-button-default-hover-background: var(--hover-item-background-color);
|
|
--ck-color-button-default-disabled-background: transparent;
|
|
|
|
--ck-color-button-on-background: transparent;
|
|
--ck-color-button-on-hover-background: var(--hover-item-background-color);
|
|
--ck-color-button-default-active-background: var(--hover-item-background-color);
|
|
|
|
--ck-focus-ring: 1px solid transparent;
|
|
--ck-color-focus-border: var(--input-focus-outline-color);
|
|
--ck-focus-outer-shadow: none;
|
|
--ck-focus-disabled-outer-shadow: none;
|
|
|
|
--ck-border-radius: 6px;
|
|
}
|
|
|
|
/* Toolbar button in on state */
|
|
.ck.ck-toolbar .ck-button.ck-on:not(.ck-dropdown__button):not(.ck-list-item-button):not(.ck-button_with-text) {
|
|
--ck-color-button-on-background: var(--ck-editor-toolbar-button-on-background);
|
|
--ck-color-button-on-color: var(--ck-editor-toolbar-button-on-color);
|
|
box-shadow: var(--ck-editor-toolbar-button-on-shadow);
|
|
}
|
|
|
|
/* Toolbar button with its dropdown open */
|
|
.ck.ck-toolbar .ck-button.ck-dropdown__button {
|
|
--ck-color-button-on-background: var(--ck-editor-toolbar-dropdown-button-open-background);
|
|
--ck-color-button-on-color: currentColor;
|
|
}
|
|
|
|
/* The toolbar show / hide button for the current text block */
|
|
.ck.ck-block-toolbar-button {
|
|
--ck-color-button-on-background: transparent;
|
|
--ck-color-button-on-color: currentColor;
|
|
}
|
|
|
|
:root .ck.ck-toolbar .ck-button:not(.ck-disabled):active,
|
|
.ck.ck-block-toolbar-button:active {
|
|
background-color: var(--hover-item-background-color);
|
|
}
|
|
|
|
.ck.ck-toolbar .ck-button:active:not(.ck-list-item-button):not(.ck-button_with-text):not(.ck-disabled) svg:not(.ck-dropdown__arrow),
|
|
.ck.ck-block-toolbar-button:active svg {
|
|
transform: scale(.8);
|
|
}
|
|
|
|
/* Disabled button */
|
|
:root .classic-toolbar-widget .ck.ck-button.ck-disabled {
|
|
opacity: .75;
|
|
}
|
|
|
|
/* Focus visible */
|
|
.ck.ck-toolbar .ck-button:focus-visible {
|
|
--ck-focus-ring: 1px solid var(--input-focus-outline-color);
|
|
}
|
|
|
|
/*
|
|
* Dropdowns
|
|
*/
|
|
|
|
/* Dropdown body */
|
|
:root .ck.ck-dropdown__panel,
|
|
:root .ck-balloon-panel {
|
|
--ck-editor-popup-padding: 4px;
|
|
|
|
--ck-color-panel-background: var(--menu-background-color);
|
|
--ck-color-panel-border: var(--ck-editor-popup-border-color);
|
|
|
|
box-shadow: 0px 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
|
|
outline: transparent !important;
|
|
border: 1px solid var(--ck-editor-popup-border-color) !important;
|
|
border-radius: var(--dropdown-border-radius) !important;
|
|
background: var(--menu-background-color) !important;
|
|
padding: var(--ck-editor-popup-padding);
|
|
}
|
|
|
|
/*
|
|
* Backdrop blur pseudo-element
|
|
*
|
|
* Since .ck-balloon-panel already uses the :after and :before pseudo-elements, there is no other
|
|
* option than using a :before on the children element to apply the backdrop blur.
|
|
* This pseudoelement will overflow and cover the entire surface of .ck-balloon-panel.
|
|
*/
|
|
|
|
:root .ck-balloon-panel > .ck-toolbar,
|
|
:root .ck-balloon-panel > .ck-balloon-rotator {
|
|
position: relative;
|
|
}
|
|
|
|
:root .ck-balloon-panel > .ck-toolbar::before,
|
|
:root .ck-balloon-panel > .ck-balloon-rotator::before {
|
|
--negative-padding: calc(0px - var(--ck-editor-popup-padding)); /* Compensate the parent's padding */
|
|
|
|
content: "";
|
|
position: absolute;
|
|
top: var(--negative-padding);
|
|
right: var(--negative-padding);
|
|
bottom: var(--negative-padding);
|
|
left: var(--negative-padding);
|
|
border-radius: var(--dropdown-border-radius);
|
|
backdrop-filter: var(--dropdown-backdrop-filter);
|
|
z-index: -1;
|
|
}
|
|
|
|
:root .ck.ck-dropdown__panel {
|
|
--ck-editor-popup-padding: var(--menu-padding-size);
|
|
}
|
|
|
|
/* Dropdown panel containing a toolbar */
|
|
:root .ck.ck-dropdown__panel:has(>.ck-toolbar) {
|
|
--ck-editor-popup-padding: calc(var(--menu-padding-size) - var(--ck-spacing-small));
|
|
}
|
|
|
|
/* Bulleted / number list toolbar */
|
|
.ck-list-styles-list {
|
|
--ck-spacing-large: var(--ck-spacing-small);
|
|
}
|
|
|
|
:root ul.ck.ck-list,
|
|
:root div.ck.ck-balloon-panel:not(.ck-tooltip) {
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
:root .ck.ck-list {
|
|
padding: 0;
|
|
}
|
|
|
|
/* Tooltip */
|
|
:root div.ck.ck-balloon-panel.ck-tooltip {
|
|
--ck-color-panel-background: var(--toast-background); /* Arrow */
|
|
border-color: transparent !important;
|
|
border-radius: 6px !important;
|
|
padding: 0 10px 2px 10px;
|
|
background-color: var(--toast-background) !important;
|
|
}
|
|
|
|
:root div.ck.ck-balloon-panel.ck-tooltip * {
|
|
color: var(--toast-text-color) !important;
|
|
}
|
|
|
|
/* Dropdown list item */
|
|
:root ul.ck.ck-list button.ck-button,
|
|
:root .ck.ck-collapsible > button.ck-button {
|
|
padding: 2px 16px;
|
|
background: transparent;
|
|
border-radius: 6px !important;
|
|
box-shadow: unset;
|
|
}
|
|
|
|
:root .ck.ck-list__item {
|
|
min-width: 10em;
|
|
}
|
|
|
|
/* Item with icon */
|
|
:root .ck.ck-button_with-text svg:first-child {
|
|
color: var(--menu-item-icon-color);
|
|
}
|
|
|
|
/* Checked list item */
|
|
|
|
:root ul.ck.ck-list button.ck-button:hover,
|
|
:root ul.ck.ck-list button.ck-button.ck-on:hover,
|
|
:root .ck.ck-collapsible > button.ck-button:not(.ck-disabled):hover,
|
|
:root .ck.ck-collapsible > button.ck-button:not(.ck-disabled):not(:focus):hover {
|
|
background: var(--hover-item-background-color);
|
|
color: var(--hover-item-color);
|
|
}
|
|
|
|
/* List item checkmark container */
|
|
|
|
:root .ck.ck-list-item-button .ck-list-item-button__check-holder {
|
|
margin-inline-start: var(--ck-spacing-small);
|
|
margin-inline-end: var(--menu-padding-size);
|
|
}
|
|
|
|
:root .ck.ck-list-item-button .ck-list-item-button__check-holder svg {
|
|
transform: scale(1.2);
|
|
color: var(--menu-item-icon-color);
|
|
}
|
|
|
|
/* Separator */
|
|
:root .ck .ck-list__separator {
|
|
margin: .5em 0;
|
|
margin-left: calc(0px - var(--ck-editor-popup-padding));
|
|
width: calc(100% + (var(--ck-editor-popup-padding) * 2));
|
|
background: var(--menu-item-delimiter-color);
|
|
}
|
|
|
|
/* Collapsible section */
|
|
|
|
.ck.ck-collapsible {
|
|
position: relative;
|
|
border: unset !important;
|
|
padding-top: var(--ck-editor-popup-padding);
|
|
}
|
|
|
|
.ck.ck-collapsible::before {
|
|
/* Adds a background shade which overlaps the dropdown's padding */
|
|
|
|
--negative-padding: calc(0px - var(--ck-editor-popup-padding));
|
|
|
|
display: block;
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: var(--negative-padding);
|
|
left: var(--negative-padding);
|
|
right: var(--negative-padding);
|
|
border-top: 1px solid var(--ck-editor-popup-border-color);
|
|
background: var(--menu-section-background-color);
|
|
}
|
|
|
|
.ck.ck-collapsible:last-child::before {
|
|
border-radius: 0 0 var(--dropdown-border-radius) var(--dropdown-border-radius);
|
|
}
|
|
|
|
.ck.ck-collapsible.ck-collapsible_collapsed > button.ck-button {
|
|
font-weight: normal !important;
|
|
}
|
|
|
|
.ck.ck-collapsible .ck-collapsible__children {
|
|
padding-top: 1em;
|
|
}
|
|
|
|
/* Toolbar separators */
|
|
|
|
:root .ck.ck-toolbar .ck.ck-toolbar__separator {
|
|
background: transparent;
|
|
border-left: 1px solid var(--ck-color-toolbar-border);
|
|
}
|
|
|
|
/* The last separator of the toolbar */
|
|
:root .classic-toolbar-widget .ck.ck-toolbar__separator:last-of-type {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/* Heading dropdown */
|
|
|
|
:root .ck.ck-dropdown.ck-heading-dropdown .ck-dropdown__panel .ck-list__item {
|
|
min-width: 170px;
|
|
}
|
|
|
|
/* Font size dropdown */
|
|
|
|
.ck-fontsize-option {
|
|
min-height: 2rem !important;
|
|
}
|
|
|
|
.ck-fontsize-option.text-tiny {--size: .75em;}
|
|
.ck-fontsize-option.text-small {--size: .85em;}
|
|
.ck-fontsize-option.text-big {--size: 1.4em;}
|
|
.ck-fontsize-option.text-huge {--size: 1.8em;}
|
|
|
|
:root .ck-fontsize-option .ck-button__label {
|
|
font-size: var(--size);
|
|
}
|
|
|
|
/* Color picker dropdown */
|
|
|
|
/* Color palette */
|
|
:root .ck.ck-color-selector .ck-color-grid {
|
|
--ck-editor-toolbar-button-on-shadow: none; /* Remove the shadow of the selected color button */
|
|
}
|
|
|
|
/* Color picker button */
|
|
:root .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker {
|
|
--ck-color-base-border: transparent; /* Remove the top border */
|
|
|
|
border-bottom-left-radius: var(--ck-border-radius);
|
|
border-bottom-right-radius: var(--ck-border-radius);
|
|
}
|
|
|
|
/* Current color checkmark */
|
|
:root .ck.ck-color-selector .ck-color-grid .ck-icon {
|
|
color: white;
|
|
}
|
|
|
|
:root .ck.ck-color-selector .ck-color-grid .ck-icon__fill {
|
|
fill: black !important;
|
|
}
|
|
|
|
/* Numbered list */
|
|
|
|
:root .ck.ck-list-properties_with-numbered-properties .ck.ck-list-styles-list {
|
|
min-width: 200px;
|
|
grid-template-columns: repeat(3, auto);
|
|
justify-content: space-between;
|
|
padding-bottom: calc(var(--ck-spacing-medium) + var(--menu-padding-size));
|
|
}
|
|
|
|
/* Table dropdown */
|
|
|
|
/* Table rows / columns button grid container */
|
|
.ck-insert-table-dropdown__grid {
|
|
--ck-insert-table-dropdown-box-width: 16px;
|
|
--ck-insert-table-dropdown-box-height: 16px;
|
|
--ck-insert-table-dropdown-box-margin: 2px;
|
|
--ck-color-base-border: var(--ck-color-panel-border); /* Cell box color */
|
|
--ck-color-focus-border: var(--hover-item-text-color); /* Selected cell box border color */
|
|
--ck-color-focus-outer-shadow: var(--hover-item-background-color); /* Selected cell box background color */
|
|
--ck-border-radius: 0;
|
|
}
|
|
|
|
/* Selected rows / column counter */
|
|
.ck.ck-insert-table-dropdown__label {
|
|
margin-top: var(--ck-spacing-medium);
|
|
}
|
|
|
|
/* Admonitions dropdown */
|
|
|
|
.ck-tn-admonition-note { --icon: "\eb21"; --accent: var(--admonition-note-accent-color);}
|
|
.ck-tn-admonition-tip { --icon: "\ea0d"; --accent: var(--admonition-tip-accent-color);}
|
|
.ck-tn-admonition-important { --icon: "\ea7c"; --accent: var(--admonition-important-accent-color);}
|
|
.ck-tn-admonition-caution { --icon: "\eac7"; --accent: var(--admonition-caution-accent-color);}
|
|
.ck-tn-admonition-warning { --icon: "\eac5"; --accent: var(--admonition-warning-accent-color);}
|
|
|
|
:root .ck.ck-tn-admonition-option .ck-button__label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin: 4px;
|
|
padding-right: 2em;
|
|
border: 1px solid var(--accent);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
:root .ck.ck-tn-admonition-option .ck-button__label::before {
|
|
display: inline-block;
|
|
content: var(--icon);
|
|
width: 2em;
|
|
text-align: center;
|
|
font-size: 1.4em;
|
|
font-family: boxicons;
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* Action buttons */
|
|
|
|
:root .ck-link-actions button.ck-button,
|
|
:root .ck-link-form button.ck-button {
|
|
--ck-border-radius: 6px;
|
|
|
|
background: transparent;
|
|
box-shadow: unset;
|
|
}
|
|
|
|
:root .ck-link-actions button.ck-button:hover,
|
|
:root .ck-link-form button.ck-button:hover {
|
|
background: var(--hover-item-background-color);
|
|
}
|
|
|
|
/*
|
|
* EDITOR'S CONTENT
|
|
*/
|
|
|
|
/*
|
|
* Code Blocks
|
|
*/
|
|
|
|
.attachment-content-wrapper pre,
|
|
.ck-content pre,
|
|
.ck-mermaid__editing-view {
|
|
border: 0;
|
|
border-radius: 6px;
|
|
box-shadow: var(--code-block-box-shadow);
|
|
padding: 0 !important;
|
|
margin-top: 2px !important;
|
|
}
|
|
|
|
.ck-content pre {
|
|
overflow: unset;
|
|
}
|
|
|
|
html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
|
|
/* Create some space for the top-side shadow */
|
|
margin-top: 1px !important;
|
|
}
|
|
|
|
.ck.ck-editor__editable pre[data-language]::after {
|
|
--ck-color-code-block-label-background: rgba(128, 128, 128, 0.5);
|
|
border-radius: 0 0 5px 5px;
|
|
padding: 0px 10px;
|
|
letter-spacing: 0.5px;
|
|
font-weight: bold;
|
|
top: 0;
|
|
}
|
|
|
|
.attachment-content-wrapper pre code,
|
|
.ck-content pre code,
|
|
.ck-mermaid__editing-view {
|
|
display: block;
|
|
padding: 1em !important;
|
|
overflow: auto;
|
|
}
|
|
|
|
.ck-content pre code {
|
|
--scrollbar-thumb-color: gray;
|
|
--scrollbar-thumb-hover-color: gray;
|
|
}
|
|
|
|
.ck-content pre code::-webkit-scrollbar-track,
|
|
::-webkit-scrollbar-thumb {
|
|
cursor: default;
|
|
}
|
|
|
|
.ck-content blockquote {
|
|
background: var(--card-background-color);
|
|
border: 1px solid var(--card-border-color) !important;
|
|
box-shadow: var(--card-box-shadow);
|
|
border-radius: 10px;
|
|
padding: 1em 2.5em;
|
|
position: relative;
|
|
font-style: unset !important;
|
|
}
|
|
|
|
.ck-content blockquote p:last-of-type {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.ck-content blockquote:before,
|
|
.ck-content blockquote:after {
|
|
position: absolute;
|
|
top: 0;
|
|
font-size: 48px;
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.ck-content blockquote:before {
|
|
content: "“";
|
|
left: 0.2em;
|
|
}
|
|
|
|
.ck-content blockquote:after {
|
|
content: "”";
|
|
right: 0.35em;
|
|
}
|
|
|
|
.ck-content h2,
|
|
.ck-content h3,
|
|
.ck-content h4,
|
|
.ck-content h5,
|
|
.ck-content h6 {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.ck-content hr {
|
|
margin: 5px 0;
|
|
height: 1px;
|
|
background-color: var(--main-border-color);
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (screen) {
|
|
.ck-content p code {
|
|
border: 1px solid var(--card-border-color);
|
|
box-shadow: var(--card-box-shadow);
|
|
border-radius: 6px;
|
|
background-color: var(--card-background-color);
|
|
}
|
|
}
|
|
|
|
.note-detail-printable:not(.word-wrap) pre code {
|
|
white-space: pre;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.code-sample-wrapper .hljs {
|
|
transition: background-color linear 100ms;
|
|
}
|
|
|
|
.ck-content .footnote-section {
|
|
border: 0 !important;
|
|
border-top: 1px solid var(--main-border-color) !important;
|
|
}
|
|
|
|
/* Table caption */
|
|
|
|
.ck-content .table > figcaption {
|
|
background: var(--accented-background-color);
|
|
color: var(--main-text-color);
|
|
} |