note-gen/src/app/core/article/style.scss at 959423d2878bed062fa08a43ef2fd42774d708c4 · codexu/note-gen · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
.vditor {
  @apply border-none;

  pre {
    @apply dark:bg-zinc-950 !important;
  }
}

.vditor-toolbar{
  @apply border-b bg-transparent !px-4 h-12 flex items-center justify-center;
  .vditor-toolbar__item{
    @apply h-9 w-9 flex items-center justify-center;
    svg {
      @apply size-4;
    }
    .vditor-tooltipped {
      @apply p-0;
    }
  }
  .bottom {
    .vditor-hint{
      top: 40px;
    }
  }
}

.vditor-tooltipped {
  &[data-type="upload"] svg {
    @apply translate-x-1.5 translate-y-2.5;
  }
}

.vditor--dark .vditor-reset {
  h1:not(code h1),
  h2:not(code h2),
  h3:not(code h3),
  h4:not(code h4),
  h5:not(code h5),
  h6:not(code h6),
  p:not(code p),
  span:not(code span),
  li:not(code li) {
    @apply text-zinc-100 !important;
  }
}

.vditor-counter{
  display: none;
}

.vditor {
  --border-color: rgb(228, 228, 231);
  --second-color: rgba(88, 96, 105, 0.36);

  --panel-background-color: #fff;
  --panel-shadow: #000;

  --toolbar-background-color: #f6f8fa;
  --toolbar-icon-color: #586069;
  --toolbar-icon-hover-color: @blurColor;
  --toolbar-height: 35px;
  --toolbar-divider-margin-top: 8px;

  --textarea-background-color: #fff;
  --textarea-text-color: #24292e;

  --resize-icon-color: var(--toolbar-icon-color);
  --resize-background-color: var(--toolbar-background-color);
  --resize-hover-icon-color: var(--panel-background-color);
  --resize-hover-background-color: var(--toolbar-icon-hover-color);

  --count-background-color: rgba(27, 31, 35, 0.05);
  --heading-border-color: #eaecef;
  --blockquote-color: #6a737d;

  --ir-heading-color: #660e7a;
  --ir-title-color: #808080;
  --ir-bi-color: #0033b3;
  --ir-link-color: #008000;
  --ir-bracket-color: #0000ff;
  --ir-paren-color: #008000;

  &--dark {
    --border-color: rgb(39, 39, 42);
    --second-color: rgba(185, 185, 185, 0.36);

    --panel-background-color: #000;
    --panel-shadow: #000;

    --toolbar-background-color: #000;
    --toolbar-icon-color: #b9b9b9;
    --toolbar-icon-hover-color: #fff;

    --textarea-background-color: #000;
    --textarea-text-color: #d1d5da;

    --resize-icon-color: var(--border-color);
    --resize-background-color: var(--second-color);
    --resize-hover-icon-color: var(--toolbar-icon-hover-color);
    --resize-hover-background-color: rgba(185, 185, 185, 0.86);

    --count-background-color: rgba(@blurColor, 0.36);
    --heading-border-color: var(--textarea-text-color);
    --blockquote-color: var(--toolbar-icon-color);

    --ir-heading-color: #9876aa;
    --ir-title-color: #808080;
    --ir-bi-color: #cc7832;
    --ir-link-color: #ffc66d;
    --ir-bracket-color: #287bde;
    --ir-paren-color: #6a8759;
  }
}

.vditor-outline{
  font-size: 14px;
}

.vditor-hint{
  @apply min-w-[8rem] overflow-hidden rounded-md border bg-popover;
  button {
    @apply text-xs text-primary cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 outline-none;
  }
}