From 9f56823366196f7e4edf64fc597ca8a930cf94cc Mon Sep 17 00:00:00 2001 From: Aslam H Date: Fri, 18 Oct 2024 23:14:44 +0700 Subject: [PATCH] chore: editor css --- web/shared/editor/styles/index.css | 152 +++++++++++++++++- .../styles/partials/prosemirror-base.css | 86 ---------- web/shared/editor/styles/partials/vars.css | 51 ------ 3 files changed, 145 insertions(+), 144 deletions(-) delete mode 100644 web/shared/editor/styles/partials/prosemirror-base.css delete mode 100644 web/shared/editor/styles/partials/vars.css diff --git a/web/shared/editor/styles/index.css b/web/shared/editor/styles/index.css index 03f4c72d..f03c743b 100644 --- a/web/shared/editor/styles/index.css +++ b/web/shared/editor/styles/index.css @@ -1,7 +1,145 @@ -@import "partials/vars.css"; -@import "partials/prosemirror-base.css"; -@import "partials/code-highlight.css"; -@import "partials/lists.css"; -@import "partials/typography.css"; -@import "partials/misc.css"; -@import "partials/zoom.css"; +@import "./partials/code-highlight.css"; +@import "./partials/code.css"; +@import "./partials/lists.css"; +@import "./partials/misc.css"; +@import "./partials/typography.css"; +@import "./partials/zoom.css"; + +:root { + --mt-overlay: rgba(251, 251, 251, 0.75); + --mt-transparent-foreground: rgba(0, 0, 0, 0.4); + --mt-bg-secondary: rgba(251, 251, 251, 0.8); + --checkbox-bg-image: url("data:image/svg+xml;utf8,%3Csvg%20width=%2210%22%20height=%229%22%20viewBox=%220%200%2010%208%22%20xmlns=%22http://www.w3.org/2000/svg%22%20fill=%22%23fbfbfb%22%3E%3Cpath%20d=%22M3.46975%205.70757L1.88358%204.1225C1.65832%203.8974%201.29423%203.8974%201.06897%204.1225C0.843675%204.34765%200.843675%204.7116%201.06897%204.93674L3.0648%206.93117C3.29006%207.15628%203.65414%207.15628%203.8794%206.93117L8.93103%201.88306C9.15633%201.65792%209.15633%201.29397%208.93103%201.06883C8.70578%200.843736%208.34172%200.843724%208.11646%201.06879C8.11645%201.0688%208.11643%201.06882%208.11642%201.06883L3.46975%205.70757Z%22%20stroke-width=%220.2%22%20/%3E%3C/svg%3E"); + + --la-code-background: rgba(8, 43, 120, 0.047); + --la-code-color: rgb(212, 212, 212); + --la-secondary: rgb(157, 157, 159); + --la-pre-background: rgb(236, 236, 236); + --la-pre-border: rgb(224, 224, 224); + --la-pre-color: rgb(47, 47, 49); + --la-hr: rgb(220, 220, 220); + --la-drag-handle-hover: rgb(92, 92, 94); + + --hljs-string: rgb(170, 67, 15); + --hljs-title: rgb(176, 136, 54); + --hljs-comment: rgb(153, 153, 153); + --hljs-keyword: rgb(12, 94, 177); + --hljs-attr: rgb(58, 146, 188); + --hljs-literal: rgb(200, 43, 15); + --hljs-name: rgb(37, 151, 146); + --hljs-selector-tag: rgb(200, 80, 15); + --hljs-number: rgb(61, 160, 103); +} + +.dark .ProseMirror { + --mt-overlay: rgba(31, 32, 35, 0.75); + --mt-transparent-foreground: rgba(255, 255, 255, 0.4); + --mt-bg-secondary: rgba(31, 32, 35, 0.8); + --checkbox-bg-image: url("data:image/svg+xml;utf8,%3Csvg%20width=%2210%22%20height=%229%22%20viewBox=%220%200%2010%208%22%20xmlns=%22http://www.w3.org/2000/svg%22%20fill=%22lch%284.8%25%200.7%20272%29%22%3E%3Cpath%20d=%22M3.46975%205.70757L1.88358%204.1225C1.65832%203.8974%201.29423%203.8974%201.06897%204.1225C0.843675%204.34765%200.843675%204.7116%201.06897%204.93674L3.0648%206.93117C3.29006%207.15628%203.65414%207.15628%203.8794%206.93117L8.93103%201.88306C9.15633%201.65792%209.15633%201.29397%208.93103%201.06883C8.70578%200.843736%208.34172%200.843724%208.11646%201.06879C8.11645%201.0688%208.11643%201.06882%208.11642%201.06883L3.46975%205.70757Z%22%20stroke-width=%220.2%22%20/%3E%3C/svg%3E"); + + --la-code-background: rgba(255, 255, 255, 0.075); + --la-code-color: rgb(44, 46, 51); + --la-secondary: rgb(89, 90, 92); + --la-pre-background: rgb(8, 8, 8); + --la-pre-border: rgb(35, 37, 42); + --la-pre-color: rgb(227, 228, 230); + --la-hr: rgb(38, 40, 45); + --la-drag-handle-hover: rgb(150, 151, 153); + + --hljs-string: rgb(218, 147, 107); + --hljs-title: rgb(241, 213, 157); + --hljs-comment: rgb(170, 170, 170); + --hljs-keyword: rgb(102, 153, 204); + --hljs-attr: rgb(144, 202, 232); + --hljs-literal: rgb(242, 119, 122); + --hljs-name: rgb(95, 192, 160); + --hljs-selector-tag: rgb(232, 199, 133); + --hljs-number: rgb(182, 231, 182); +} + +.la-editor .ProseMirror { + @apply block flex-1 whitespace-pre-wrap outline-0 focus:outline-none; +} + +.la-editor .ProseMirror .block-node:not(:last-child), +.la-editor .ProseMirror .list-node:not(:last-child), +.la-editor .ProseMirror .text-node:not(:last-child) { + @apply mb-2.5; +} + +.la-editor .ProseMirror ol, +.la-editor .ProseMirror ul { + @apply pl-6; +} + +.la-editor .ProseMirror blockquote, +.la-editor .ProseMirror dl, +.la-editor .ProseMirror ol, +.la-editor .ProseMirror p, +.la-editor .ProseMirror pre, +.la-editor .ProseMirror ul { + @apply m-0; +} + +.la-editor .ProseMirror li { + @apply leading-7; +} + +.la-editor .ProseMirror p { + @apply break-words; +} + +.la-editor .ProseMirror li .text-node:has(+ .list-node), +.la-editor .ProseMirror li > .list-node, +.la-editor .ProseMirror li > .text-node, +.la-editor .ProseMirror li p { + @apply mb-0; +} + +.la-editor .ProseMirror blockquote { + @apply relative pl-3.5; +} + +.la-editor .ProseMirror blockquote::before, +.la-editor .ProseMirror blockquote.is-empty::before { + @apply absolute bottom-0 left-0 top-0 h-full w-1 rounded-sm bg-accent-foreground/15 content-['']; +} + +.la-editor .ProseMirror hr { + @apply my-3 h-0.5 w-full border-none bg-[var(--la-hr)]; +} + +.la-editor .ProseMirror-focused hr.ProseMirror-selectednode { + @apply rounded-full outline outline-2 outline-offset-1 outline-muted-foreground; +} + +.la-editor .ProseMirror .ProseMirror-gapcursor { + @apply pointer-events-none absolute hidden; +} + +.la-editor .ProseMirror .ProseMirror-hideselection { + @apply caret-transparent; +} + +.la-editor .ProseMirror.resize-cursor { + @apply cursor-col-resize; +} + +.la-editor .ProseMirror .selection { + @apply inline-block; +} + +.la-editor .ProseMirror .selection, +.la-editor .ProseMirror *::selection, +::selection { + @apply bg-primary/40; +} + +/* Override native selection when custom selection is present */ +.la-editor .ProseMirror .selection::selection { + background: transparent; +} + +[data-theme="slash-command"] { + width: 1000vw; +} diff --git a/web/shared/editor/styles/partials/prosemirror-base.css b/web/shared/editor/styles/partials/prosemirror-base.css deleted file mode 100644 index 6115c84a..00000000 --- a/web/shared/editor/styles/partials/prosemirror-base.css +++ /dev/null @@ -1,86 +0,0 @@ -.la-editor .ProseMirror { - @apply block flex-1 whitespace-pre-wrap outline-0 focus:outline-none; -} - -.la-editor .ProseMirror .block-node:not(:last-child), -.la-editor .ProseMirror .list-node:not(:last-child), -.la-editor .ProseMirror .text-node:not(:last-child) { - @apply mb-2.5; -} - -.la-editor .ProseMirror ol, -.la-editor .ProseMirror ul { - @apply pl-6; -} - -.la-editor .ProseMirror blockquote, -.la-editor .ProseMirror dl, -.la-editor .ProseMirror ol, -.la-editor .ProseMirror p, -.la-editor .ProseMirror pre, -.la-editor .ProseMirror ul { - @apply m-0; -} - -.la-editor .ProseMirror li { - @apply leading-7; -} - -.la-editor .ProseMirror p { - @apply break-words; -} - -.la-editor .ProseMirror li .text-node:has(+ .list-node), -.la-editor .ProseMirror li > .list-node, -.la-editor .ProseMirror li > .text-node, -.la-editor .ProseMirror li p { - @apply mb-0; -} - -.la-editor .ProseMirror blockquote { - @apply relative pl-3.5; -} - -.la-editor .ProseMirror blockquote::before, -.la-editor .ProseMirror blockquote.is-empty::before { - @apply absolute bottom-0 left-0 top-0 h-full w-1 rounded-sm bg-accent-foreground/15 content-['']; -} - -.la-editor .ProseMirror hr { - @apply my-3 h-0.5 w-full border-none bg-[var(--la-hr)]; -} - -.la-editor .ProseMirror-focused hr.ProseMirror-selectednode { - @apply rounded-full outline outline-2 outline-offset-1 outline-muted-foreground; -} - -.la-editor .ProseMirror .ProseMirror-gapcursor { - @apply pointer-events-none absolute hidden; -} - -.la-editor .ProseMirror .ProseMirror-hideselection { - @apply caret-transparent; -} - -.la-editor .ProseMirror.resize-cursor { - @apply cursor-col-resize; -} - -.la-editor .ProseMirror .selection { - @apply inline-block; -} - -.la-editor .ProseMirror .selection, -.la-editor .ProseMirror *::selection, -::selection { - @apply bg-primary/40; -} - -/* Override native selection when custom selection is present */ -.la-editor .ProseMirror .selection::selection { - background: transparent; -} - -[data-theme="slash-command"] { - width: 1000vw; -} diff --git a/web/shared/editor/styles/partials/vars.css b/web/shared/editor/styles/partials/vars.css deleted file mode 100644 index b909f9bd..00000000 --- a/web/shared/editor/styles/partials/vars.css +++ /dev/null @@ -1,51 +0,0 @@ -:root { - --mt-overlay: rgba(251, 251, 251, 0.75); - --mt-transparent-foreground: rgba(0, 0, 0, 0.4); - --mt-bg-secondary: rgba(251, 251, 251, 0.8); - --checkbox-bg-image: url("data:image/svg+xml;utf8,%3Csvg%20width=%2210%22%20height=%229%22%20viewBox=%220%200%2010%208%22%20xmlns=%22http://www.w3.org/2000/svg%22%20fill=%22%23fbfbfb%22%3E%3Cpath%20d=%22M3.46975%205.70757L1.88358%204.1225C1.65832%203.8974%201.29423%203.8974%201.06897%204.1225C0.843675%204.34765%200.843675%204.7116%201.06897%204.93674L3.0648%206.93117C3.29006%207.15628%203.65414%207.15628%203.8794%206.93117L8.93103%201.88306C9.15633%201.65792%209.15633%201.29397%208.93103%201.06883C8.70578%200.843736%208.34172%200.843724%208.11646%201.06879C8.11645%201.0688%208.11643%201.06882%208.11642%201.06883L3.46975%205.70757Z%22%20stroke-width=%220.2%22%20/%3E%3C/svg%3E"); - - --la-code-background: rgba(8, 43, 120, 0.047); - --la-code-color: rgb(212, 212, 212); - --la-secondary: rgb(157, 157, 159); - --la-pre-background: rgb(236, 236, 236); - --la-pre-border: rgb(224, 224, 224); - --la-pre-color: rgb(47, 47, 49); - --la-hr: rgb(220, 220, 220); - --la-drag-handle-hover: rgb(92, 92, 94); - - --hljs-string: rgb(170, 67, 15); - --hljs-title: rgb(176, 136, 54); - --hljs-comment: rgb(153, 153, 153); - --hljs-keyword: rgb(12, 94, 177); - --hljs-attr: rgb(58, 146, 188); - --hljs-literal: rgb(200, 43, 15); - --hljs-name: rgb(37, 151, 146); - --hljs-selector-tag: rgb(200, 80, 15); - --hljs-number: rgb(61, 160, 103); -} - -.dark .ProseMirror { - --mt-overlay: rgba(31, 32, 35, 0.75); - --mt-transparent-foreground: rgba(255, 255, 255, 0.4); - --mt-bg-secondary: rgba(31, 32, 35, 0.8); - --checkbox-bg-image: url("data:image/svg+xml;utf8,%3Csvg%20width=%2210%22%20height=%229%22%20viewBox=%220%200%2010%208%22%20xmlns=%22http://www.w3.org/2000/svg%22%20fill=%22lch%284.8%25%200.7%20272%29%22%3E%3Cpath%20d=%22M3.46975%205.70757L1.88358%204.1225C1.65832%203.8974%201.29423%203.8974%201.06897%204.1225C0.843675%204.34765%200.843675%204.7116%201.06897%204.93674L3.0648%206.93117C3.29006%207.15628%203.65414%207.15628%203.8794%206.93117L8.93103%201.88306C9.15633%201.65792%209.15633%201.29397%208.93103%201.06883C8.70578%200.843736%208.34172%200.843724%208.11646%201.06879C8.11645%201.0688%208.11643%201.06882%208.11642%201.06883L3.46975%205.70757Z%22%20stroke-width=%220.2%22%20/%3E%3C/svg%3E"); - - --la-code-background: rgba(255, 255, 255, 0.075); - --la-code-color: rgb(44, 46, 51); - --la-secondary: rgb(89, 90, 92); - --la-pre-background: rgb(8, 8, 8); - --la-pre-border: rgb(35, 37, 42); - --la-pre-color: rgb(227, 228, 230); - --la-hr: rgb(38, 40, 45); - --la-drag-handle-hover: rgb(150, 151, 153); - - --hljs-string: rgb(218, 147, 107); - --hljs-title: rgb(241, 213, 157); - --hljs-comment: rgb(170, 170, 170); - --hljs-keyword: rgb(102, 153, 204); - --hljs-attr: rgb(144, 202, 232); - --hljs-literal: rgb(242, 119, 122); - --hljs-name: rgb(95, 192, 160); - --hljs-selector-tag: rgb(232, 199, 133); - --hljs-number: rgb(182, 231, 182); -}