Skip to content

Commit 4b35dfe

Browse files
WangSimiao2000WangSimiao2000
committed
fix: 优化评论框样式，调整边框和背景颜色
Signed-off-by: wangsimiao1 <wangsimiao1@xiaomi.com>
1 parent b8eb235 commit 4b35dfe

2 files changed

Lines changed: 4 additions & 192 deletions

File tree

‎assets/css/giscus-morandi-dark.css‎

Lines changed: 2 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -67,108 +67,14 @@ main {
6767
--color-neutral-emphasis: #8A8580;
6868
}
6969

70-
main .gsc-comment-box {
71-
border-color: var(--color-border-muted);
72-
border-radius: 12px;
73-
background-color: var(--color-canvas-default);
74-
box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
75-
}
76-
77-
main .gsc-comment-box textarea {
78-
border-color: var(--color-border-muted);
79-
border-radius: 8px;
80-
background-color: var(--color-canvas-inset);
81-
}
82-
83-
main .gsc-comment-box textarea:focus {
84-
border-color: #C4956E;
85-
box-shadow: 0 0 0 2px rgb(196 149 110 / 20%);
86-
}
87-
88-
main .gsc-header .gsc-left-header em {
89-
color: var(--color-fg-muted);
90-
}
91-
70+
main .gsc-comment-box,
9271
main .gsc-comment {
93-
border-color: var(--color-border-muted);
94-
border-radius: 12px;
95-
}
96-
97-
main .gsc-comment .gsc-comment-content {
98-
background-color: var(--color-canvas-default);
99-
border-color: var(--color-border-muted);
100-
}
101-
102-
main .gsc-comment .gsc-comment-header {
103-
background-color: var(--color-canvas-subtle);
104-
border-color: var(--color-border-muted);
105-
border-radius: 12px 12px 0 0;
106-
}
107-
108-
main .gsc-comment .gsc-comment-header > div:first-child {
109-
border-color: var(--color-border-muted);
110-
}
111-
112-
main .gsc-timeline {
113-
border-color: var(--color-border-muted);
114-
}
115-
116-
main .gsc-replies {
117-
border-color: var(--color-border-muted);
118-
}
119-
120-
main .gsc-reply {
121-
border-color: var(--color-border-muted);
122-
}
123-
124-
main .gsc-main .gsc-comment:first-child {
125-
border-top-color: var(--color-border-muted);
126-
}
127-
128-
main .gsc-reactions-count {
129-
color: var(--color-fg-muted);
72+
border-radius: 8px;
13073
}
13174

13275
main .gsc-reactions button,
13376
main .gsc-comment-reactions button {
134-
border-color: var(--color-border-muted);
13577
border-radius: 20px;
136-
background-color: var(--color-canvas-subtle);
137-
transition: background-color 0.3s ease, border-color 0.3s ease;
138-
}
139-
140-
main .gsc-reactions button:hover,
141-
main .gsc-comment-reactions button:hover {
142-
border-color: #C4956E;
143-
background-color: rgb(196 149 110 / 10%);
144-
}
145-
146-
main .gsc-reactions button.has-reacted,
147-
main .gsc-comment-reactions button.has-reacted {
148-
border-color: #C4956E;
149-
background-color: rgb(196 149 110 / 12%);
150-
color: #C4956E;
151-
}
152-
153-
main .gsc-comment-box-buttons button[type='submit'] {
154-
border-radius: 8px;
155-
background-color: #8FB896;
156-
border-color: #8FB896;
157-
color: #1E1D1B;
158-
}
159-
160-
main .gsc-comment-box-buttons button[type='submit']:hover {
161-
background-color: #7DA080;
162-
}
163-
164-
main .gsc-comment-box-tabs {
165-
border-color: var(--color-border-muted);
166-
border-radius: 12px 12px 0 0;
167-
background-color: var(--color-canvas-subtle);
168-
}
169-
170-
main .gsc-comment-box-main {
171-
border-color: var(--color-border-muted) !important;
17278
}
17379

17480
main a {

‎assets/css/giscus-morandi-light.css‎

Lines changed: 2 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -67,108 +67,14 @@ main {
6767
--color-neutral-emphasis: #6B6B6B;
6868
}
6969

70-
main .gsc-comment-box {
71-
border-color: var(--color-border-muted);
72-
border-radius: 12px;
73-
background-color: var(--color-canvas-default);
74-
box-shadow: 0 1px 3px rgb(120 110 100 / 6%);
75-
}
76-
77-
main .gsc-comment-box textarea {
78-
border-color: var(--color-border-muted);
79-
border-radius: 8px;
80-
background-color: var(--color-canvas-inset);
81-
}
82-
83-
main .gsc-comment-box textarea:focus {
84-
border-color: #B07D62;
85-
box-shadow: 0 0 0 2px rgb(176 125 98 / 15%);
86-
}
87-
88-
main .gsc-header .gsc-left-header em {
89-
color: var(--color-fg-muted);
90-
}
91-
70+
main .gsc-comment-box,
9271
main .gsc-comment {
93-
border-color: var(--color-border-muted);
94-
border-radius: 12px;
95-
}
96-
97-
main .gsc-comment .gsc-comment-content {
98-
background-color: var(--color-canvas-default);
99-
border-color: var(--color-border-muted);
100-
}
101-
102-
main .gsc-comment .gsc-comment-header {
103-
background-color: var(--color-canvas-subtle);
104-
border-color: var(--color-border-muted);
105-
border-radius: 12px 12px 0 0;
106-
}
107-
108-
main .gsc-comment .gsc-comment-header > div:first-child {
109-
border-color: var(--color-border-muted);
110-
}
111-
112-
main .gsc-timeline {
113-
border-color: var(--color-border-muted);
114-
}
115-
116-
main .gsc-replies {
117-
border-color: var(--color-border-muted);
118-
}
119-
120-
main .gsc-reply {
121-
border-color: var(--color-border-muted);
122-
}
123-
124-
main .gsc-main .gsc-comment:first-child {
125-
border-top-color: var(--color-border-muted);
126-
}
127-
128-
main .gsc-reactions-count {
129-
color: var(--color-fg-muted);
72+
border-radius: 8px;
13073
}
13174

13275
main .gsc-reactions button,
13376
main .gsc-comment-reactions button {
134-
border-color: var(--color-border-muted);
13577
border-radius: 20px;
136-
background-color: var(--color-canvas-subtle);
137-
transition: background-color 0.3s ease, border-color 0.3s ease;
138-
}
139-
140-
main .gsc-reactions button:hover,
141-
main .gsc-comment-reactions button:hover {
142-
border-color: #B07D62;
143-
background-color: rgb(176 125 98 / 8%);
144-
}
145-
146-
main .gsc-reactions button.has-reacted,
147-
main .gsc-comment-reactions button.has-reacted {
148-
border-color: #B07D62;
149-
background-color: rgb(176 125 98 / 10%);
150-
color: #B07D62;
151-
}
152-
153-
main .gsc-comment-box-buttons button[type='submit'] {
154-
border-radius: 8px;
155-
background-color: #6B8F71;
156-
border-color: #6B8F71;
157-
color: #fff;
158-
}
159-
160-
main .gsc-comment-box-buttons button[type='submit']:hover {
161-
background-color: #5A7D60;
162-
}
163-
164-
main .gsc-comment-box-tabs {
165-
border-color: var(--color-border-muted);
166-
border-radius: 12px 12px 0 0;
167-
background-color: var(--color-canvas-subtle);
168-
}
169-
170-
main .gsc-comment-box-main {
171-
border-color: var(--color-border-muted) !important;
17278
}
17379

17480
main a {

0 commit comments

Comments
 (0)