306 lines
9.0 KiB
CSS
306 lines
9.0 KiB
CSS
:root {
|
|
/* text colors */
|
|
--editor-colors-gray-text: #5c5e63;
|
|
--editor-colors-peach-text: #ff5b59;
|
|
--editor-colors-pink-text: #f65385;
|
|
--editor-colors-orange-text: #fd9038;
|
|
--editor-colors-green-text: #0fc27b;
|
|
--editor-colors-light-blue-text: #17bee9;
|
|
--editor-colors-dark-blue-text: #266df0;
|
|
--editor-colors-purple-text: #9162f9;
|
|
/* end text colors */
|
|
|
|
/* layout */
|
|
--normal-content-width: 720px;
|
|
--wide-content-width: 1152px;
|
|
--normal-content-margin: 20px;
|
|
--wide-content-margin: 96px;
|
|
/* end layout */
|
|
}
|
|
|
|
/* text background colors */
|
|
[data-theme*="light"] {
|
|
--editor-colors-gray-background: #d6d6d8;
|
|
--editor-colors-peach-background: #ffd5d7;
|
|
--editor-colors-pink-background: #fdd4e3;
|
|
--editor-colors-orange-background: #ffe3cd;
|
|
--editor-colors-green-background: #c3f0de;
|
|
--editor-colors-light-blue-background: #c5eff9;
|
|
--editor-colors-dark-blue-background: #c9dafb;
|
|
--editor-colors-purple-background: #e3d8fd;
|
|
}
|
|
[data-theme*="dark"] {
|
|
--editor-colors-gray-background: #404144;
|
|
--editor-colors-peach-background: #593032;
|
|
--editor-colors-pink-background: #562e3d;
|
|
--editor-colors-orange-background: #583e2a;
|
|
--editor-colors-green-background: #1d4a3b;
|
|
--editor-colors-light-blue-background: #1f495c;
|
|
--editor-colors-dark-blue-background: #223558;
|
|
--editor-colors-purple-background: #3d325a;
|
|
}
|
|
/* end text background colors */
|
|
|
|
/* font size and style */
|
|
.editor-container {
|
|
--color-placeholder: --alpha(var(--text-color-primary) / 50%);
|
|
|
|
/* font sizes and line heights */
|
|
&.large-font {
|
|
--font-size-h1: 1.75rem;
|
|
--font-size-h2: 1.5rem;
|
|
--font-size-h3: 1.375rem;
|
|
--font-size-h4: 1.25rem;
|
|
--font-size-h5: 1.125rem;
|
|
--font-size-h6: 1rem;
|
|
--font-size-regular: 1rem;
|
|
--font-size-code: 0.85rem;
|
|
--font-size-list: var(--font-size-regular);
|
|
|
|
--line-height-h1: 2.25rem;
|
|
--line-height-h2: 2rem;
|
|
--line-height-h3: 1.75rem;
|
|
--line-height-h4: 1.5rem;
|
|
--line-height-h5: 1.5rem;
|
|
--line-height-h6: 1.5rem;
|
|
--line-height-regular: 1.5rem;
|
|
--line-height-code: 1.5rem;
|
|
--line-height-list: var(--line-height-regular);
|
|
}
|
|
&.small-font {
|
|
--font-size-h1: 1.4rem;
|
|
--font-size-h2: 1.2rem;
|
|
--font-size-h3: 1.1rem;
|
|
--font-size-h4: 1rem;
|
|
--font-size-h5: 0.9rem;
|
|
--font-size-h6: 0.8rem;
|
|
--font-size-regular: 0.8rem;
|
|
--font-size-code: 0.8rem;
|
|
--font-size-list: var(--font-size-regular);
|
|
|
|
--line-height-h1: 1.8rem;
|
|
--line-height-h2: 1.6rem;
|
|
--line-height-h3: 1.4rem;
|
|
--line-height-h4: 1.2rem;
|
|
--line-height-h5: 1.2rem;
|
|
--line-height-h6: 1.2rem;
|
|
--line-height-regular: 1.2rem;
|
|
--line-height-code: 1.2rem;
|
|
--line-height-list: var(--line-height-regular);
|
|
}
|
|
|
|
&.mobile-font {
|
|
--font-size-h1: 1.75rem;
|
|
--font-size-h2: 1.5rem;
|
|
--font-size-h3: 1.375rem;
|
|
--font-size-h4: 1.25rem;
|
|
--font-size-h5: 1.125rem;
|
|
--font-size-h6: 1rem;
|
|
--font-size-regular: 0.95rem;
|
|
--font-size-code: 0.85rem;
|
|
--font-size-list: var(--font-size-regular);
|
|
|
|
--line-height-h1: 2.25rem;
|
|
--line-height-h2: 2rem;
|
|
--line-height-h3: 1.75rem;
|
|
--line-height-h4: 1.5rem;
|
|
--line-height-h5: 1.5rem;
|
|
--line-height-h6: 1.5rem;
|
|
--line-height-regular: 1.5rem;
|
|
--line-height-code: 1.5rem;
|
|
--line-height-list: var(--line-height-regular);
|
|
}
|
|
/* end font sizes and line heights */
|
|
|
|
/* font styles */
|
|
--font-style: "Inter Variable", sans-serif;
|
|
|
|
&.sans-serif {
|
|
--font-style: "Inter Variable", sans-serif;
|
|
}
|
|
&.serif {
|
|
--font-style: serif;
|
|
}
|
|
&.monospace {
|
|
--font-style: monospace;
|
|
}
|
|
/* end font styles */
|
|
|
|
/* spacing */
|
|
&.line-spacing-regular {
|
|
--heading-1-padding-top: 28px;
|
|
--heading-1-padding-bottom: 4px;
|
|
--heading-2-padding-top: 28px;
|
|
--heading-2-padding-bottom: 4px;
|
|
--heading-3-padding-top: 28px;
|
|
--heading-3-padding-bottom: 4px;
|
|
--heading-4-padding-top: 28px;
|
|
--heading-4-padding-bottom: 4px;
|
|
--heading-5-padding-top: 20px;
|
|
--heading-5-padding-bottom: 4px;
|
|
--heading-6-padding-top: 20px;
|
|
--heading-6-padding-bottom: 4px;
|
|
--paragraph-padding-top: 4px;
|
|
--paragraph-padding-bottom: 4px;
|
|
--paragraph-padding-between: 8px;
|
|
--list-spacing-y: 8px;
|
|
--divider-padding-top: 4px;
|
|
--divider-padding-bottom: 4px;
|
|
}
|
|
|
|
&.line-spacing-small {
|
|
--heading-1-padding-top: 16px;
|
|
--heading-1-padding-bottom: 4px;
|
|
--heading-2-padding-top: 16px;
|
|
--heading-2-padding-bottom: 4px;
|
|
--heading-3-padding-top: 16px;
|
|
--heading-3-padding-bottom: 4px;
|
|
--heading-4-padding-top: 16px;
|
|
--heading-4-padding-bottom: 4px;
|
|
--heading-5-padding-top: 12px;
|
|
--heading-5-padding-bottom: 4px;
|
|
--heading-6-padding-top: 12px;
|
|
--heading-6-padding-bottom: 4px;
|
|
--paragraph-padding-top: 2px;
|
|
--paragraph-padding-bottom: 2px;
|
|
--paragraph-padding-between: 4px;
|
|
--list-spacing-y: 0px;
|
|
--divider-padding-top: 0px;
|
|
--divider-padding-bottom: 4px;
|
|
}
|
|
|
|
&.line-spacing-mobile-regular {
|
|
--heading-1-padding-top: 16px;
|
|
--heading-1-padding-bottom: 4px;
|
|
--heading-2-padding-top: 16px;
|
|
--heading-2-padding-bottom: 4px;
|
|
--heading-3-padding-top: 16px;
|
|
--heading-3-padding-bottom: 4px;
|
|
--heading-4-padding-top: 16px;
|
|
--heading-4-padding-bottom: 4px;
|
|
--heading-5-padding-top: 12px;
|
|
--heading-5-padding-bottom: 4px;
|
|
--heading-6-padding-top: 12px;
|
|
--heading-6-padding-bottom: 4px;
|
|
--paragraph-padding-top: 2px;
|
|
--paragraph-padding-bottom: 2px;
|
|
--paragraph-padding-between: 4px;
|
|
--list-spacing-y: 0px;
|
|
--divider-padding-top: 0px;
|
|
--divider-padding-bottom: 4px;
|
|
}
|
|
/* end spacing */
|
|
}
|
|
/* end font size and style */
|
|
|
|
/* layout config */
|
|
#page-toolbar-container {
|
|
container-name: page-toolbar-container;
|
|
container-type: inline-size;
|
|
|
|
.page-toolbar-content {
|
|
--header-width: var(--normal-content-width);
|
|
|
|
&.wide-layout {
|
|
--header-width: var(--wide-content-width);
|
|
}
|
|
|
|
padding-left: calc(((100% - var(--header-width)) / 2) - 10px);
|
|
}
|
|
}
|
|
|
|
#page-content-container {
|
|
container-name: page-content-container;
|
|
container-type: inline-size;
|
|
|
|
.frame-renderer {
|
|
--editor-content-width: var(--normal-content-width);
|
|
|
|
&.wide-layout {
|
|
--editor-content-width: var(--wide-content-width);
|
|
}
|
|
|
|
.editor-container.page-title-editor .ProseMirror,
|
|
.document-editor-loader {
|
|
max-width: var(--editor-content-width);
|
|
margin: 0 auto;
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.editor-container.document-editor .ProseMirror {
|
|
& > *:not(.editor-full-width-block) {
|
|
max-width: var(--editor-content-width);
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
& > .editor-full-width-block {
|
|
max-width: 100%;
|
|
padding-inline-start: calc((100% - var(--editor-content-width)) / 2);
|
|
padding-inline-end: var(--wide-content-margin);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* keep a static padding of 96px for wide layouts for container width >912px and <1344px */
|
|
@container page-toolbar-container (min-width: 912px) and (max-width: 1344px) {
|
|
.page-toolbar-content.wide-layout {
|
|
padding-left: var(--wide-content-margin) !important;
|
|
}
|
|
}
|
|
|
|
/* keep a static padding of 96px for wide layouts for container width <912px */
|
|
@container page-toolbar-container (max-width: 912) {
|
|
.page-toolbar-content.wide-layout {
|
|
padding-left: var(--wide-content-margin) !important;
|
|
}
|
|
}
|
|
/* end layout config */
|
|
|
|
/* keep a static padding of 20px for wide layouts for container width <760px */
|
|
@container page-toolbar-container (max-width: 760px) {
|
|
.page-toolbar-content {
|
|
padding-left: var(--normal-content-margin) !important;
|
|
}
|
|
}
|
|
/* end layout config */
|
|
|
|
/* keep a static padding of 96px for wide layouts for container width >912px and <1344px */
|
|
@container page-content-container (min-width: 912px) and (max-width: 1344px) {
|
|
#page-content-container .frame-renderer.wide-layout .editor-container,
|
|
#page-content-container .frame-renderer.wide-layout .document-editor-loader,
|
|
.page-header-container {
|
|
padding-left: var(--wide-content-margin);
|
|
padding-right: var(--wide-content-margin);
|
|
}
|
|
}
|
|
|
|
/* keep a static padding of 20px for wide layouts for container width <912px */
|
|
@container page-content-container (max-width: 912px) {
|
|
#page-content-container .frame-renderer.wide-layout .editor-container,
|
|
#page-content-container .frame-renderer.wide-layout .document-editor-loader,
|
|
.page-header-container {
|
|
padding-left: var(--normal-content-margin);
|
|
padding-right: var(--normal-content-margin);
|
|
}
|
|
}
|
|
|
|
/* keep a static padding of 20px for normal layouts for container width <760px */
|
|
@container page-content-container (max-width: 760px) {
|
|
#page-content-container .frame-renderer:not(.wide-layout) .editor-container,
|
|
#page-content-container .frame-renderer:not(.wide-layout) .document-editor-loader,
|
|
.page-header-container {
|
|
padding-left: var(--normal-content-margin);
|
|
padding-right: var(--normal-content-margin);
|
|
}
|
|
}
|
|
|
|
@container page-content-container (max-width: 930px) {
|
|
.page-summary-container {
|
|
display: none;
|
|
}
|
|
}
|
|
/* end layout config */
|