gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: use global css variable

This commit is contained in:
fantasticit 2022-04-13 20:49:38 +08:00
parent 2d89d2057b
commit ba50a54e9b
14 changed files with 120 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/client/src/styles/var.scss
View File

@ -1,15 +1,4 @@
body {
--border-radius: 4px;
--box-shadow: rgb(0 0 0 / 10%) 0 0 10px;
/* 自定义节点 边框 */
--node-border-color: rgb(28 31 35 / 8%);
/* 自定义节点 hover */
--node-hover-border-color: #bacefd;
/* 自定义节点选中 */
--node-selected-border-color: rgb(0 101 255);
}
body[theme-mode='dark'] {
--node-border-color: rgb(255, 255, 255, 0.08);
}

2
packages/client/src/tiptap/styles/index.scss
View File

@ -1,3 +1,4 @@
@import './var.scss';
@import './base.scss';
@import './code.scss';
@import './collaboration.scss';
@ -8,6 +9,7 @@
@import './mention.scss';
@import './menu.scss';
@import './mind.scss';
@import './node.scss';
@import './placeholder.scss';
@import './search.scss';
@import './selection.scss';

76
packages/client/src/tiptap/styles/node.scss Normal file
View File

@ -0,0 +1,76 @@
/* 自定义节点样式 */
.ProseMirror {
.node-status {
margin-right: 4px;
.semi-tag-default {
border: 1px solid var(--node-border-color);
}
}
.node-codeBlock,
.node-katex,
.node-documentChildren,
.node-documentReference {
user-select: none;
.render-wrapper {
border: 1px solid var(--node-border-color);
}
}
.node-codeBlock,
.node-katex {
.render-wrapper {
border-radius: var(--border-radius);
}
}
.node-image,
.node-attachment,
.node-iframe,
.node-mind,
.node-banner,
.node-countdown {
margin-top: 0.75em;
}
.node-attachment,
.node-banner,
.node-countdown,
.node-iframe,
.node-katex,
.node-mind,
.node-codeBlock,
.node-documentChildren,
.node-documentReference {
.render-wrapper {
position: relative;
user-select: text;
&:hover,
&:active {
border: 1px solid var(--node-hover-border-color);
}
}
}
.node-image {
.render-wrapper {
position: relative;
&:hover,
&:active {
&::after {
position: absolute;
content: '';
inset: 0;
pointer-events: none;
background-color: transparent;
border: 1px solid var(--node-hover-border-color) !important;
border-radius: var(--border-radius);
}
}
}
}
}

63
packages/client/src/tiptap/styles/selection.scss
View File

@ -4,10 +4,6 @@
}
.tableWrapper {
::selection {
//background-color: transparent;
}
&.selected-node {
td,
th {
@ -17,12 +13,6 @@
}
.node-status {
margin-right: 4px;
.semi-tag-default {
border: 1px solid var(--node-border-color);
}
&.selected-node {
.semi-tag-default {
border: 1px solid var(--node-selected-border-color);
@ -30,33 +20,6 @@
}
}
.node-codeBlock,
.node-katex,
.node-documentChildren,
.node-documentReference {
user-select: none;
.render-wrapper {
border: 1px solid var(--node-border-color);
}
}
.node-codeBlock,
.node-katex {
.render-wrapper {
border-radius: var(--border-radius);
}
}
.node-image,
.node-attachment,
.node-iframe,
.node-mind,
.node-banner,
.node-countdown {
margin-top: 0.75em;
}
.node-attachment,
.node-banner,
.node-countdown,
@ -66,16 +29,6 @@
.node-codeBlock,
.node-documentChildren,
.node-documentReference {
.render-wrapper {
position: relative;
user-select: text;
&:hover,
&:active {
border: 1px solid var(--node-hover-border-color);
}
}
&.selected-node {
&:not(.has-focus) {
::selection {
@ -105,22 +58,6 @@
}
.node-image {
.render-wrapper {
position: relative;
&:hover,
&:active {
&::after {
position: absolute;
content: '';
inset: 0;
pointer-events: none;
background-color: transparent;
border: 1px solid var(--node-hover-border-color) !important;
border-radius: var(--border-radius);
}
}
}
&.selected-node {
&:not(.has-focus) {
::selection {

17
packages/client/src/tiptap/styles/var.scss Normal file
View File

@ -0,0 +1,17 @@
.ProseMirror {
--node-text-color: rgba(3, 3, 3, 0.8);
--node-hover-text-color: rgb(0 101 255);
/* 自定义节点 边框 */
--node-border-color: rgb(28 31 35 / 8%);
/* 自定义节点 hover */
--node-hover-border-color: rgb(0 101 255);
/* 自定义节点选中 */
--node-selected-border-color: rgb(0 101 255);
}
body[theme-mode='dark'] {
.ProseMirror {
--node-text-color: rgba(249, 249, 249, 0.8);
--node-border-color: rgb(255, 255, 255, 0.08);
}
}

2
packages/client/src/tiptap/wrappers/attachment/player/index.module.scss
View File

@ -2,7 +2,7 @@
width: 100%;
display: flex;
justify-content: center;
border-top: 1px solid var(--semi-color-border);
border-top: 1px solid var(--node-border-color);
padding: 12px;
> video {

4
packages/client/src/tiptap/wrappers/banner/index.module.scss
View File

@ -1,10 +1,10 @@
.wrap {
line-height: 0;
border: 1px solid var(--semi-color-border);
border: 1px solid var(--node-border-color);
border-radius: var(--border-radius);
p {
margin-top: .25em;
margin-top: 0.25em;
}
p:first-child {

2
packages/client/src/tiptap/wrappers/code-block/index.module.scss
View File

@ -6,7 +6,7 @@
display: flex;
justify-content: space-between;
padding: 6px 8px;
border-bottom: 1px solid var(--semi-color-border);
border-bottom: 1px solid var(--node-border-color);
background-color: var(--semi-color-fill-0);
.selectorWrap {

2
packages/client/src/tiptap/wrappers/countdown/index.module.scss
View File

@ -3,7 +3,7 @@
overflow: hidden;
line-height: 0;
background-color: var(--semi-color-fill-0);
border: 1px solid var(--semi-color-border);
border: 1px solid var(--node-border-color);
border-radius: var(--border-radius);
display: flex;

12
packages/client/src/tiptap/wrappers/document-children/index.module.scss
View File

@ -1,23 +1,23 @@
.wrap {
padding: 12px;
margin-top: .75em;
border: 1px solid var(--semi-color-border);
margin-top: 0.75em;
border: 1px solid var(--node-border-color);
border-radius: var(--border-radius);
.itemWrap {
display: flex;
padding: 6px;
margin-top: 12px;
color: var(--semi-color-text-1);
color: var(--node-text-color);
text-decoration: none;
cursor: pointer;
border: 1px solid var(--semi-color-border);
border: 1px solid var(--node-border-color);
border-radius: var(--border-radius);
align-items: center;
&:hover {
border-color: var(--semi-color-link);
color: var(--semi-color-link);
border-color: var(--node-hover-border-color);
color: var(--node-hover-text-color);
}
span {

14
packages/client/src/tiptap/wrappers/document-reference/index.module.scss
View File

@ -1,19 +1,19 @@
.wrap {
margin-top: .75em;
margin-top: 0.75em;
border-radius: var(--border-radius);
.itemWrap {
display: flex;
padding: 8px;
color: var(--semi-color-text-1);
color: var(--node-text-color);
text-decoration: none;
border: 1px solid var(--semi-color-border);
border: 1px solid var(--node-border-color);
border-radius: var(--border-radius);
align-items: center;
&:hover {
border-color: var(--semi-color-link);
color: var(--semi-color-link);
border-color: var(--node-hover-border-color);
color: var(--node-hover-text-color);
}
span {
@ -24,10 +24,10 @@
.empty {
display: flex;
padding: 8px;
color: var(--semi-color-text-1);
color: var(--node-text-color);
text-decoration: none;
cursor: not-allowed;
border: 1px solid var(--semi-color-border);
border: 1px solid var(--node-border-color);
border-radius: var(--border-radius);
align-items: center;
}

2
packages/client/src/tiptap/wrappers/iframe/index.module.scss
View File

@ -5,7 +5,7 @@
overflow: hidden;
line-height: 0;
background-color: var(--semi-color-fill-0);
border: 1px solid var(--semi-color-border);
border: 1px solid var(--node-border-color);
border-radius: var(--border-radius);
flex-direction: column;

2
packages/client/src/tiptap/wrappers/image/index.module.scss
View File

@ -2,7 +2,7 @@
display: flex;
padding: 8px 16px;
cursor: pointer;
border: 1px solid var(--semi-color-border);
border: 1px solid var(--node-border-color);
border-radius: var(--border-radius);
justify-content: space-between;
align-items: center;

10
packages/client/src/tiptap/wrappers/mind/index.module.scss
View File

@ -40,7 +40,7 @@
align-items: center;
width: 12px;
height: 12px;
border-color: var(--semi-color-border);
border-color: var(--node-border-color);
}
}
}
@ -58,7 +58,7 @@
.jsmindInnerWrap {
padding: 6px;
background-color: var(--semi-color-bg-2);
border: 1px solid var(--semi-color-border);
border: 1px solid var(--node-border-color);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
@ -68,7 +68,7 @@
position: relative;
min-height: 50px;
overflow: hidden;
border: 1px solid var(--semi-color-border);
border: 1px solid var(--node-border-color);
border-radius: var(--border-radius);
outline: none;
@ -89,7 +89,7 @@
z-index: 1000;
padding: 4px 8px;
background-color: var(--semi-color-bg-2);
border: 1px solid var(--semi-color-border);
border: 1px solid var(--node-border-color);
border-radius: var(--border-radius);
opacity: 0;
box-shadow: var(--box-shadow);
@ -112,6 +112,6 @@
display: flex;
justify-content: center;
padding: 10px;
border-top: 1px solid var(--semi-color-border);
border-top: 1px solid var(--node-border-color);
}
}