Skip to content

Commit 037f725

Browse files
code2nguyencode2nguyen
committed
update theme dark
1 parent bd382d5 commit 037f725

36 files changed

+400
-336
lines changed

‎README.md

+6
Original file line numberDiff line numberDiff line change
@@ -60,3 +60,9 @@ npx lerna publish patch --no-private --exact --yes
6060
```
6161
6262
```
63+
64+
References:
65+
66+
- https://phosphoricons.com/?q=%22copy%22
67+
68+
- Icon: https://feathericons.com/?query=copy

‎demo/src/assets/common.scss

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
@use './responsive-styles.scss';
2+
3+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..900&display=swap');
4+
5+
:root {
6+
--body-margin: 60px;
7+
}
8+
9+
html {
10+
font-family: 'Inter', serif;
11+
font-optical-sizing: auto;
12+
font-weight: 400;
13+
font-style: normal;
14+
font-size: 16px;
15+
color: var(--site-color-on-surface);
16+
font-feature-settings: normal;
17+
font-variation-settings: normal;
18+
}
19+
20+
* {
21+
box-sizing: border-box;
22+
}
23+
24+
a:active {
25+
all: unset;
26+
}
27+
a:visited {
28+
color: currentColor;
29+
}
30+
body {
31+
margin: 0;
32+
line-height: inherit;
33+
background-color: var(--site-color-surface);
34+
}
35+
36+
h1 {
37+
font-size: 1.8rem;
38+
font-weight: 600;
39+
line-height: 2rem;
40+
margin: 8px 0px;
41+
&:not(:first-of-type) {
42+
margin-top: 16px;
43+
}
44+
}
45+
46+
h2 {
47+
font-size: 1.5rem;
48+
font-weight: 600;
49+
line-height: 2rem;
50+
margin: 8px 0px;
51+
&:not(:first-of-type) {
52+
margin-top: 16px;
53+
}
54+
}
55+
56+
h5 {
57+
font-size: 0.9rem;
58+
font-weight: 600;
59+
color: var(--site-color-primary);
60+
line-height: 1rem;
61+
margin: 8px 0px;
62+
}
63+
64+
hr {
65+
margin: 0px;
66+
border: none;
67+
border-top: 1px solid var(--site-color-outline-variant);
68+
}
69+
p {
70+
color: var(--site-color-on-surface-variant);
71+
}

‎demo/src/assets/components.scss

+168
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
.astro-code,
2+
.astro-code span {
3+
font-size: 0.8rem;
4+
}
5+
6+
.mdx-code-block {
7+
&.compact {
8+
--c2-expansion-panel--border-radius: 0px;
9+
--c2-expansion-panel--border-top: none;
10+
--c2-expansion-panel--border-bottom: none;
11+
--c2-expansion-panel--border-left: none;
12+
--c2-expansion-panel--border-right: none;
13+
}
14+
--c2-icon-button__icon--width: 20px;
15+
--c2-icon-button__icon--height: 20px;
16+
--c2-icon-button__state-layer--size: 32px;
17+
18+
.mdx-code-block-setting-btn {
19+
position: absolute;
20+
top: 50%;
21+
right: 50px;
22+
transform: translate(0px, -50%);
23+
--c2-icon-button-icon-color: var(--site-color-primary);
24+
}
25+
}
26+
27+
.component-content {
28+
table {
29+
margin: 16px 0px;
30+
max-width: 100%;
31+
width: 100%;
32+
border-spacing: 0px;
33+
font-size: 0.9rem;
34+
th,
35+
td {
36+
padding: 16px;
37+
border: none;
38+
text-align: left;
39+
border-bottom: 1px solid var(--site-color-outline-variant);
40+
}
41+
thead {
42+
background-color: var(--site-color-surface-container-3);
43+
> tr {
44+
cursor: default;
45+
&:hover {
46+
background-color: var(--site-color-surface-container-2);
47+
}
48+
}
49+
}
50+
51+
td:first-of-type {
52+
color: var(--site-color-on-surface-variant);
53+
font-weight: 500;
54+
text-wrap: nowrap;
55+
}
56+
.t-h1 {
57+
font-size: 18px;
58+
color: var(--site-color-on-surface);
59+
}
60+
tr.t-h1 {
61+
// background-color: var(--site-color-surface-container-5);
62+
// &:hover {
63+
// background-color: var(--site-color-surface-container-4);
64+
// }
65+
}
66+
tr.t-h2 {
67+
// background-color: var(---site-color-surface-container-5);
68+
// &:hover {
69+
// background-color: var(--site-color-surface-container-4);
70+
// }
71+
}
72+
tr[class*='t-h'] {
73+
td:last-of-type {
74+
position: relative;
75+
&::after {
76+
border-style: solid;
77+
border-width: 0 1px 1px 0;
78+
content: '';
79+
display: inline-block;
80+
padding: 3px;
81+
transform: rotate(225deg);
82+
vertical-align: middle;
83+
color: var(--primary-text-color);
84+
position: absolute;
85+
right: 16px;
86+
top: calc(50% - 4px);
87+
transition: transform 200ms cubic-bezier(0, 0, 0, 1);
88+
}
89+
}
90+
91+
&.collapsed {
92+
td:last-of-type {
93+
position: relative;
94+
&::after {
95+
transform: rotate(45deg);
96+
}
97+
}
98+
}
99+
}
100+
101+
tr {
102+
&:hover {
103+
background-color: var(--site-color-surface-container-5);
104+
}
105+
cursor: pointer;
106+
&.hide {
107+
display: none;
108+
}
109+
&.collapsed {
110+
td {
111+
border-bottom: 1px solid var(--site-color-outline);
112+
}
113+
}
114+
}
115+
116+
tbody > tr:not([class*='t-h']) {
117+
td:last-of-type {
118+
position: relative;
119+
padding-right: 22px;
120+
}
121+
&:not(.copied) {
122+
td:last-of-type:hover {
123+
&::after {
124+
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgba(203, 196, 204, 0.5)' viewBox='0 0 256 256'%3E%3Cpath d='M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z'%3E%3C/path%3E%3C/svg%3E");
125+
display: inline-block;
126+
vertical-align: middle;
127+
color: var(--site-color-on-surface);
128+
position: absolute;
129+
right: 4px;
130+
top: calc(50% - 8px);
131+
}
132+
}
133+
}
134+
&.copied {
135+
td:last-of-type {
136+
&::after {
137+
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(203, 196, 204, 0.5)' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E");
138+
display: inline-block;
139+
vertical-align: middle;
140+
color: var(--site-color-on-surface);
141+
position: absolute;
142+
right: 5px;
143+
top: calc(50% - 8px);
144+
}
145+
}
146+
}
147+
}
148+
.t-h2 {
149+
font-weight: 500;
150+
// color: var(--site-color-primary);
151+
}
152+
153+
code {
154+
background-color: var(--site-color-surface-container-3);
155+
padding: 4px 8px;
156+
border-radius: 4px;
157+
font-size: 0.8rem;
158+
color: var(--site-color-on-surface-variant);
159+
}
160+
.t-code {
161+
background-color: var(--site-color-surface-container-3);
162+
padding: 4px 8px;
163+
border-radius: 4px;
164+
font-size: 0.8rem;
165+
color: var(--site-color-on-surface-variant);
166+
}
167+
}
168+
}

0 commit comments

Comments
 (0)