mirror of
https://github.com/makeplane/plane.git
synced 2026-02-25 04:35:21 +01:00
feat: add editor styles
This commit is contained in:
Anmol Singh Bhatia
117
packages/tailwind-config/styles/editor/drag-drop.css
Normal file
117
packages/tailwind-config/styles/editor/drag-drop.css
Normal file
@@ -0,0 +1,117 @@
|
||||
/* side menu */
|
||||
#editor-side-menu {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease 0.2s;
|
||||
|
||||
&.side-menu-hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
/* end side menu */
|
||||
|
||||
/* drag handle */
|
||||
#drag-handle {
|
||||
opacity: 1;
|
||||
|
||||
&.drag-handle-hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
/* end drag handle */
|
||||
|
||||
/* ai handle */
|
||||
#ai-handle {
|
||||
opacity: 1;
|
||||
|
||||
&.handle-hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
/* end ai handle */
|
||||
|
||||
.ProseMirror:not(.dragging) .ProseMirror-selectednode:not(.node-imageComponent):not(.node-image):not(.table-wrapper) {
|
||||
position: relative;
|
||||
cursor: grab;
|
||||
outline: none !important;
|
||||
box-shadow: none;
|
||||
|
||||
--horizontal-offset: 5px;
|
||||
|
||||
&:has(.issue-embed),
|
||||
&.table-wrapper {
|
||||
--horizontal-offset: 0px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(-1 * var(--horizontal-offset));
|
||||
height: 100%;
|
||||
width: calc(100% + (var(--horizontal-offset) * 2));
|
||||
background-color: rgba(var(--color-primary-100), 0.2);
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.node-imageComponent,
|
||||
&.node-image,
|
||||
&.table-wrapper {
|
||||
--horizontal-offset: 0px;
|
||||
|
||||
&::after {
|
||||
background-color: rgba(var(--color-background-100), 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* for targeting the task list items */
|
||||
li.ProseMirror-selectednode:not(.dragging)[data-checked]::after {
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
/* for targeting the unordered list items */
|
||||
ul > li.ProseMirror-selectednode:not(.dragging)::after {
|
||||
margin-left: -10px; /* Adjust as needed */
|
||||
}
|
||||
|
||||
/* Initialize a counter for the ordered list */
|
||||
ol {
|
||||
counter-reset: item;
|
||||
}
|
||||
|
||||
/* for targeting the ordered list items */
|
||||
ol > li.ProseMirror-selectednode:not(.dragging)::after {
|
||||
counter-increment: item;
|
||||
margin-left: -18px;
|
||||
}
|
||||
|
||||
/* for targeting the ordered list items after the 9th item */
|
||||
ol > li:nth-child(n + 10).ProseMirror-selectednode:not(.dragging)::after {
|
||||
margin-left: -25px;
|
||||
}
|
||||
|
||||
/* for targeting the ordered list items after the 99th item */
|
||||
ol > li:nth-child(n + 100).ProseMirror-selectednode:not(.dragging)::after {
|
||||
margin-left: -35px;
|
||||
}
|
||||
|
||||
.ProseMirror node-image,
|
||||
.ProseMirror node-imageComponent {
|
||||
transition: filter 0.1s ease-in-out;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(90%);
|
||||
}
|
||||
|
||||
&.ProseMirror-selectednode {
|
||||
filter: brightness(90%);
|
||||
}
|
||||
}
|
||||
508
packages/tailwind-config/styles/editor/editor.css
Normal file
508
packages/tailwind-config/styles/editor/editor.css
Normal file
@@ -0,0 +1,508 @@
|
||||
.ProseMirror {
|
||||
position: relative;
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
-moz-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
outline: none !important;
|
||||
cursor: text;
|
||||
font-family: var(--font-style);
|
||||
font-size: var(--font-size-regular);
|
||||
font-weight: 400;
|
||||
color: inherit;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
appearance: textfield;
|
||||
-webkit-appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
/* Placeholder only for the first line in an empty editor. */
|
||||
.ProseMirror p.is-editor-empty:first-child::before {
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
color: var(--color-placeholder);
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* Display Placeholders on every new line. */
|
||||
.ProseMirror p.is-empty::before {
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
color: var(--color-placeholder);
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.ProseMirror li blockquote {
|
||||
margin-top: 10px;
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
|
||||
/* block quotes */
|
||||
.ProseMirror blockquote {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
border-left: 3px solid rgb(var(--color-border-300));
|
||||
}
|
||||
|
||||
.ProseMirror blockquote p::before,
|
||||
.ProseMirror blockquote p::after {
|
||||
display: none;
|
||||
}
|
||||
/* end block quotes */
|
||||
|
||||
.ProseMirror code::before,
|
||||
.ProseMirror code::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Custom image styles */
|
||||
.ProseMirror img {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:not(.read-only-image):not(.loading-image) {
|
||||
transition: filter 0.1s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
filter: brightness(90%);
|
||||
}
|
||||
|
||||
&.ProseMirror-selectednode {
|
||||
outline: 3px solid rgba(var(--color-primary-100));
|
||||
filter: brightness(90%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom gap cursor styles */
|
||||
.ProseMirror-gapcursor::after {
|
||||
border-top: 1px solid rgb(var(--color-text-100)) !important;
|
||||
}
|
||||
|
||||
/* to-do list */
|
||||
ul[data-type="taskList"] li {
|
||||
font-size: var(--font-size-list);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] li > label {
|
||||
position: absolute;
|
||||
left: -5px;
|
||||
margin: 0.1rem 0.15rem 0 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] li > div {
|
||||
margin-left: 1.15rem;
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] li > label input[type="checkbox"] {
|
||||
border: 1px solid rgba(var(--color-text-100), 0.2) !important;
|
||||
outline: none;
|
||||
border-radius: 2px;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.ProseMirror[contenteditable="true"] input[type="checkbox"]:hover {
|
||||
background-color: rgba(var(--color-text-100), 0.1);
|
||||
}
|
||||
|
||||
.ProseMirror[contenteditable="false"] input[type="checkbox"] {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] li > label input[type="checkbox"]:checked {
|
||||
background-color: rgba(var(--color-primary-100)) !important;
|
||||
border-color: rgba(var(--color-primary-100)) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] li > label input[type="checkbox"]:checked:hover {
|
||||
background-color: rgba(var(--color-primary-300)) !important;
|
||||
border-color: rgba(var(--color-primary-300)) !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
ul[data-type="taskList"] li > label {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* the p tag just after the ul tag */
|
||||
ul[data-type="taskList"] + p.editor-paragraph-block {
|
||||
margin-top: 0.4rem !important;
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] li > label input[type="checkbox"] {
|
||||
position: relative;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
position: relative;
|
||||
border: 1.5px solid rgb(var(--color-text-100));
|
||||
margin-right: 0.2rem;
|
||||
margin-top: 0.15rem;
|
||||
|
||||
&:active {
|
||||
background-color: rgb(var(--color-background-90));
|
||||
}
|
||||
|
||||
/* check sign */
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
transform: scale(0);
|
||||
transform-origin: center;
|
||||
transition: 120ms transform ease-in-out;
|
||||
box-shadow: inset 1em 1em;
|
||||
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
|
||||
}
|
||||
|
||||
&:checked::before {
|
||||
transform: scale(1) translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] li > div {
|
||||
& > p.editor-paragraph-block {
|
||||
margin-top: 10px;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
[data-text-color] {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] li[data-checked="true"] {
|
||||
& > div > p.editor-paragraph-block {
|
||||
color: var(--color-placeholder);
|
||||
}
|
||||
|
||||
[data-text-color] {
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
}
|
||||
/* end to-do list */
|
||||
|
||||
/* Overwrite tippy-box original max-width */
|
||||
|
||||
.tippy-box {
|
||||
max-width: 800px !important;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-in;
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes spinning {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.resize-cursor {
|
||||
cursor: ew-resize;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.ProseMirror table * .is-empty::before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* code block, inline code */
|
||||
.ProseMirror pre {
|
||||
font-family: JetBrainsMono, monospace;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
.ProseMirror pre code {
|
||||
background: none;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ProseMirror code {
|
||||
font-size: var(--font-size-code);
|
||||
}
|
||||
/* end code block, inline code */
|
||||
|
||||
div[data-type="horizontalRule"] {
|
||||
line-height: 0;
|
||||
padding: var(--divider-padding-top) 0 var(--divider-padding-bottom) 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
& > div {
|
||||
border-bottom: 2px solid rgb(var(--color-border-200));
|
||||
}
|
||||
}
|
||||
|
||||
/* Cursor styles for the inline code blocks */
|
||||
@keyframes blink {
|
||||
49% {
|
||||
border-color: unset;
|
||||
}
|
||||
|
||||
50% {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
99% {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.no-cursor {
|
||||
caret-color: transparent;
|
||||
}
|
||||
|
||||
div:focus .fake-cursor,
|
||||
span:focus .fake-cursor {
|
||||
margin-right: -1px;
|
||||
border-left-width: 1.5px;
|
||||
border-left-style: solid;
|
||||
animation: blink 1s;
|
||||
animation-iteration-count: infinite;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* numbered, bulleted and to-do lists spacing */
|
||||
.prose ol:where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)),
|
||||
.prose
|
||||
ul:not([data-type="taskList"]):where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)),
|
||||
.prose ul[data-type="taskList"]:where(.prose > :first-child) {
|
||||
margin-top: 0.25rem !important;
|
||||
margin-bottom: 1px !important;
|
||||
}
|
||||
|
||||
.prose ol:not(:where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *))),
|
||||
.prose
|
||||
ul:not([data-type="taskList"]):not(
|
||||
:where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *))
|
||||
),
|
||||
.prose ul[data-type="taskList"]:not(:where(.prose > :first-child)) {
|
||||
margin-top: calc(0.25rem + 3px) !important;
|
||||
margin-bottom: 1px !important;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ol ul:not([data-type="taskList"]),
|
||||
ul:not([data-type="taskList"]) ul:not([data-type="taskList"]),
|
||||
ul:not([data-type="taskList"]) ol {
|
||||
margin-top: 0.45rem !important;
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] ul[data-type="taskList"] {
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
/* end numbered, bulleted and to-do lists spacing */
|
||||
|
||||
h1.editor-heading-block,
|
||||
h2.editor-heading-block,
|
||||
h3.editor-heading-block,
|
||||
h4.editor-heading-block,
|
||||
h5.editor-heading-block,
|
||||
h6.editor-heading-block,
|
||||
p.editor-paragraph-block {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* tailwind typography */
|
||||
.prose :where(h1.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
&:not(:first-child) {
|
||||
padding-top: var(--heading-1-padding-top);
|
||||
}
|
||||
|
||||
padding-bottom: var(--heading-1-padding-bottom);
|
||||
font-size: var(--font-size-h1) !important;
|
||||
line-height: var(--line-height-h1) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.prose :where(h2.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
&:not(:first-child) {
|
||||
padding-top: var(--heading-2-padding-top);
|
||||
}
|
||||
|
||||
padding-bottom: var(--heading-2-padding-bottom);
|
||||
font-size: var(--font-size-h2) !important;
|
||||
line-height: var(--line-height-h2) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.prose :where(h3.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
&:not(:first-child) {
|
||||
padding-top: var(--heading-3-padding-top);
|
||||
}
|
||||
|
||||
padding-bottom: var(--heading-3-padding-bottom);
|
||||
font-size: var(--font-size-h3) !important;
|
||||
line-height: var(--line-height-h3) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.prose :where(h4.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
&:not(:first-child) {
|
||||
padding-top: var(--heading-4-padding-top);
|
||||
}
|
||||
|
||||
padding-bottom: var(--heading-4-padding-bottom);
|
||||
font-size: var(--font-size-h4) !important;
|
||||
line-height: var(--line-height-h4) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.prose :where(h5.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
&:not(:first-child) {
|
||||
padding-top: var(--heading-5-padding-top);
|
||||
}
|
||||
|
||||
padding-bottom: var(--heading-5-padding-bottom);
|
||||
font-size: var(--font-size-h5) !important;
|
||||
line-height: var(--line-height-h5) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.prose :where(h6.editor-heading-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
&:not(:first-child) {
|
||||
padding-top: var(--heading-6-padding-top);
|
||||
}
|
||||
|
||||
padding-bottom: var(--heading-6-padding-bottom);
|
||||
font-size: var(--font-size-h6) !important;
|
||||
line-height: var(--line-height-h6) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.prose :where(p.editor-paragraph-block):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-top: var(--paragraph-padding-top);
|
||||
}
|
||||
|
||||
&:not(td p.editor-paragraph-block, th p.editor-paragraph-block) {
|
||||
&:last-child {
|
||||
padding-bottom: var(--paragraph-padding-bottom);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: var(--paragraph-padding-between);
|
||||
}
|
||||
}
|
||||
|
||||
font-size: var(--font-size-regular) !important;
|
||||
line-height: var(--line-height-regular) !important;
|
||||
}
|
||||
|
||||
p.editor-paragraph-block + p.editor-paragraph-block {
|
||||
padding-top: var(--paragraph-padding-between) !important;
|
||||
}
|
||||
|
||||
.prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p.editor-paragraph-block,
|
||||
.prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) li p.editor-paragraph-block {
|
||||
font-size: var(--font-size-list);
|
||||
line-height: var(--line-height-list);
|
||||
}
|
||||
|
||||
.prose :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
||||
margin-top: 0;
|
||||
}
|
||||
/* end tailwind typography */
|
||||
|
||||
/* text colors */
|
||||
[data-text-color="gray"] {
|
||||
color: var(--editor-colors-gray-text);
|
||||
}
|
||||
[data-text-color="peach"] {
|
||||
color: var(--editor-colors-peach-text);
|
||||
}
|
||||
[data-text-color="pink"] {
|
||||
color: var(--editor-colors-pink-text);
|
||||
}
|
||||
[data-text-color="orange"] {
|
||||
color: var(--editor-colors-orange-text);
|
||||
}
|
||||
[data-text-color="green"] {
|
||||
color: var(--editor-colors-green-text);
|
||||
}
|
||||
[data-text-color="light-blue"] {
|
||||
color: var(--editor-colors-light-blue-text);
|
||||
}
|
||||
[data-text-color="dark-blue"] {
|
||||
color: var(--editor-colors-dark-blue-text);
|
||||
}
|
||||
[data-text-color="purple"] {
|
||||
color: var(--editor-colors-purple-text);
|
||||
}
|
||||
/* end text colors */
|
||||
|
||||
/* background colors */
|
||||
[data-background-color="gray"] {
|
||||
background-color: var(--editor-colors-gray-background);
|
||||
}
|
||||
[data-background-color="peach"] {
|
||||
background-color: var(--editor-colors-peach-background);
|
||||
}
|
||||
[data-background-color="pink"] {
|
||||
background-color: var(--editor-colors-pink-background);
|
||||
}
|
||||
[data-background-color="orange"] {
|
||||
background-color: var(--editor-colors-orange-background);
|
||||
}
|
||||
[data-background-color="green"] {
|
||||
background-color: var(--editor-colors-green-background);
|
||||
}
|
||||
[data-background-color="light-blue"] {
|
||||
background-color: var(--editor-colors-light-blue-background);
|
||||
}
|
||||
[data-background-color="dark-blue"] {
|
||||
background-color: var(--editor-colors-dark-blue-background);
|
||||
}
|
||||
[data-background-color="purple"] {
|
||||
background-color: var(--editor-colors-purple-background);
|
||||
}
|
||||
/* end background colors */
|
||||
|
||||
/* emoji styles */
|
||||
span[data-name][data-type="emoji"] img {
|
||||
display: inline !important;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-width: 1.25em;
|
||||
max-height: 1.25em;
|
||||
}
|
||||
|
||||
/* touch device styles */
|
||||
.touch-select-none {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
85
packages/tailwind-config/styles/editor/github-dark.css
Normal file
85
packages/tailwind-config/styles/editor/github-dark.css
Normal file
@@ -0,0 +1,85 @@
|
||||
pre code.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 1em;
|
||||
}
|
||||
code.hljs {
|
||||
padding: 3px 5px;
|
||||
}
|
||||
.hljs {
|
||||
color: #c9d1d9;
|
||||
background: #0d1117;
|
||||
}
|
||||
.hljs-doctag,
|
||||
.hljs-keyword,
|
||||
.hljs-meta .hljs-keyword,
|
||||
.hljs-template-tag,
|
||||
.hljs-template-variable,
|
||||
.hljs-type,
|
||||
.hljs-variable.language_ {
|
||||
color: #ff7b72;
|
||||
}
|
||||
.hljs-title,
|
||||
.hljs-title.class_,
|
||||
.hljs-title.class_.inherited__,
|
||||
.hljs-title.function_ {
|
||||
color: #d2a8ff;
|
||||
}
|
||||
.hljs-attr,
|
||||
.hljs-attribute,
|
||||
.hljs-literal,
|
||||
.hljs-meta,
|
||||
.hljs-number,
|
||||
.hljs-operator,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-id,
|
||||
.hljs-variable {
|
||||
color: #79c0ff;
|
||||
}
|
||||
.hljs-meta .hljs-string,
|
||||
.hljs-regexp,
|
||||
.hljs-string {
|
||||
color: #a5d6ff;
|
||||
}
|
||||
.hljs-built_in,
|
||||
.hljs-symbol {
|
||||
color: #ffa657;
|
||||
}
|
||||
.hljs-code,
|
||||
.hljs-comment,
|
||||
.hljs-formula {
|
||||
color: #8b949e;
|
||||
}
|
||||
.hljs-name,
|
||||
.hljs-quote,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-selector-tag {
|
||||
color: #7ee787;
|
||||
}
|
||||
.hljs-subst {
|
||||
color: #c9d1d9;
|
||||
}
|
||||
.hljs-section {
|
||||
color: #1f6feb;
|
||||
font-weight: 700;
|
||||
}
|
||||
.hljs-bullet {
|
||||
color: #f2cc60;
|
||||
}
|
||||
.hljs-emphasis {
|
||||
color: #c9d1d9;
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-strong {
|
||||
color: #c9d1d9;
|
||||
font-weight: 700;
|
||||
}
|
||||
.hljs-addition {
|
||||
color: #aff5b4;
|
||||
background-color: #033a16;
|
||||
}
|
||||
.hljs-deletion {
|
||||
color: #ffdcd7;
|
||||
background-color: #67060c;
|
||||
}
|
||||
5
packages/tailwind-config/styles/editor/index.css
Normal file
5
packages/tailwind-config/styles/editor/index.css
Normal file
@@ -0,0 +1,5 @@
|
||||
@import "./variables.css";
|
||||
@import "./editor.css";
|
||||
@import "./table.css";
|
||||
@import "./github-dark.css";
|
||||
@import "./drag-drop.css";
|
||||
216
packages/tailwind-config/styles/editor/table.css
Normal file
216
packages/tailwind-config/styles/editor/table.css
Normal file
@@ -0,0 +1,216 @@
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
padding-bottom: 26px;
|
||||
|
||||
table {
|
||||
position: relative;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
margin: 0.5rem 0 0 0;
|
||||
border: 1px solid rgba(var(--color-border-200));
|
||||
width: 100%;
|
||||
|
||||
td,
|
||||
th {
|
||||
min-width: 1em;
|
||||
border: 1px solid rgba(var(--color-border-300));
|
||||
padding: 7px 10px;
|
||||
vertical-align: top;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Selected cell outline */
|
||||
&.selectedCell:not(.content-hidden) {
|
||||
user-select: none;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
height: calc(100% + 2px);
|
||||
width: calc(100% + 2px);
|
||||
}
|
||||
|
||||
&.selectedCell-border-top::after {
|
||||
border-top: 2px solid rgba(var(--color-primary-100));
|
||||
}
|
||||
|
||||
&.selectedCell-border-left::after {
|
||||
border-left: 2px solid rgba(var(--color-primary-100));
|
||||
}
|
||||
|
||||
&.selectedCell-border-bottom::after {
|
||||
border-bottom: 2px solid rgba(var(--color-primary-100));
|
||||
}
|
||||
|
||||
&.selectedCell-border-right::after {
|
||||
border-right: 2px solid rgba(var(--color-primary-100));
|
||||
}
|
||||
}
|
||||
/* End selected cell outline */
|
||||
|
||||
.table-col-handle-container,
|
||||
.table-row-handle-container {
|
||||
& > button {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.table-col-handle-container,
|
||||
.table-row-handle-container {
|
||||
& > button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ProseMirror-widget + * {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
&.content-hidden > * {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tr[background="none"],
|
||||
tr:not([background]) {
|
||||
th {
|
||||
background-color: rgba(var(--color-background-90));
|
||||
}
|
||||
}
|
||||
|
||||
.table-drop-marker {
|
||||
background-color: rgba(var(--color-primary-100));
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.table-col-drag-marker,
|
||||
.table-row-drag-marker {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.table-col-drag-marker {
|
||||
top: -9px;
|
||||
}
|
||||
|
||||
.table-row-drag-marker {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Selected status */
|
||||
&.ProseMirror-selectednode {
|
||||
table {
|
||||
background-color: rgba(var(--color-primary-100), 0.2);
|
||||
}
|
||||
}
|
||||
/* End selected status */
|
||||
}
|
||||
|
||||
/* Column resizer */
|
||||
.table-wrapper table .column-resize-handle {
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: -1px;
|
||||
width: 2px;
|
||||
height: calc(100% + 2px);
|
||||
z-index: 5;
|
||||
background-color: rgba(var(--color-primary-100));
|
||||
pointer-events: none;
|
||||
}
|
||||
/* End column resizer */
|
||||
|
||||
.resize-cursor .table-wrapper .table-controls .rows-control,
|
||||
.table-wrapper.controls--disabled .table-controls .rows-control,
|
||||
.resize-cursor .table-wrapper .table-controls .columns-control,
|
||||
.table-wrapper.controls--disabled .table-controls .columns-control {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Insert buttons */
|
||||
.table-wrapper {
|
||||
.table-column-insert-button,
|
||||
.table-row-insert-button {
|
||||
position: absolute;
|
||||
background-color: rgba(var(--color-background-90));
|
||||
color: rgba(var(--color-text-300));
|
||||
border: 1px solid rgba(var(--color-border-200));
|
||||
border-radius: 4px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
outline: none;
|
||||
z-index: 10;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(var(--color-background-80));
|
||||
color: rgba(var(--color-text-100));
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
background-color: rgba(var(--color-primary-100), 0.2);
|
||||
color: rgba(var(--color-text-100));
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-column-insert-button {
|
||||
top: 0;
|
||||
right: -16px;
|
||||
width: 16px;
|
||||
height: 100%;
|
||||
transform: translateX(50%);
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.table-row-insert-button {
|
||||
bottom: -16px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
transform: translateY(50%);
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
/* Show buttons on table hover */
|
||||
&:hover {
|
||||
.table-column-insert-button,
|
||||
.table-row-insert-button {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* End insert buttons */
|
||||
3
packages/tailwind-config/styles/editor/tailwind.css
Normal file
3
packages/tailwind-config/styles/editor/tailwind.css
Normal file
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
305
packages/tailwind-config/styles/editor/variables.css
Normal file
305
packages/tailwind-config/styles/editor/variables.css
Normal file
@@ -0,0 +1,305 @@
|
||||
: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: rgba(var(--color-text-100), 0.5);
|
||||
|
||||
/* 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", sans-serif;
|
||||
|
||||
&.sans-serif {
|
||||
--font-style: "Inter", 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 */
|
||||
Reference in New Issue
Block a user