Skip to content

Commit 7eab4f2

Browse files
huozhihuozhi
committed
border radius
1 parent c54e2e6 commit 7eab4f2

File tree

3 files changed

+95
-89
lines changed

3 files changed

+95
-89
lines changed

‎site/styles.css

+4-89
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ a:hover {
3131
color: #424d5b;
3232
}
3333

34-
35-
main {
34+
main,
35+
footer {
3636
padding: 0 1.5rem;
3737
}
3838

@@ -49,26 +49,6 @@ main {
4949
flex-direction: column;
5050
}
5151

52-
textarea:focus,
53-
textarea:focus-visible {
54-
outline: none;
55-
}
56-
.preview {
57-
position: relative;
58-
border-top: 1px solid #dfe0e5;
59-
padding: 1.5rem 1rem;
60-
}
61-
.preview--error {
62-
margin: 0;
63-
padding: 8px;
64-
font-size: 13px;
65-
color: #f47067;
66-
position: absolute;
67-
top: 0;
68-
right: 0;
69-
left: 0;
70-
bottom: 0;
71-
}
7252
.executor {
7353
position: absolute;
7454
right: 8px;
@@ -78,73 +58,7 @@ textarea:focus-visible {
7858
border-radius: 4px;
7959
color: #fff;
8060
}
81-
.preview--result {
82-
font-family: Consolas, Monaco, monospace;
83-
border: none;
84-
font-size: 16px;
85-
line-height: 1.25em;
86-
background-color: #fff;
87-
width: 100%;
88-
}
89-
90-
.filetree {
91-
display: flex;
92-
position: relative;
93-
flex-wrap: wrap;
94-
padding-right: 2rem;
95-
}
96-
97-
.filetab {
98-
position: relative;
99-
padding: 0.4rem 1.5rem;
100-
border: none;
101-
line-height: 1;
102-
background-color: #fff;
103-
cursor: pointer;
104-
color: #000;
105-
}
106-
.filetab:hover {
107-
opacity: .8;
108-
}
109-
.filetab--active {
110-
color: #087ea4;
111-
}
112-
.filetab--active::after {
113-
content: '';
114-
position: absolute;
115-
bottom: -2px;
116-
height: 2px;
117-
background: #087ea4;
118-
left: 0;
119-
width: 100%;
120-
}
121-
.filetab--new {
122-
padding: 0;
123-
color: #087ea4;
124-
background-color: #f0f0f0;
125-
}
126-
.filetab__button {
127-
display: inline-block;
128-
padding: 0.4rem 1.5rem;
129-
margin: 0;
130-
line-height: 1;
131-
border: none;
132-
background-color: transparent;
133-
cursor: pointer;
134-
color: #70858c;
135-
}
136-
.filetab__input {
137-
display: inline-block;
138-
outline: none;
139-
border: none;
140-
padding: 0.4rem 1.5rem;
141-
margin: 0;
142-
background-color: #f0f0f0;
143-
}
14461

145-
[data-codesandbox] {
146-
box-shadow: 0 24px 40px 4px rgb(200 200 200 / 50%);
147-
}
14862

14963
.titles {
15064
display: flex;
@@ -196,7 +110,8 @@ textarea:focus-visible {
196110
}
197111

198112
@media (max-width: 640px) {
199-
main {
113+
main,
114+
footer {
200115
padding: 0 0.5rem;
201116
}
202117
.filetree {

‎site/ui/codesandbox.css

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
textarea:focus,
2+
textarea:focus-visible {
3+
outline: none;
4+
}
5+
.preview {
6+
position: relative;
7+
border-top: 1px solid #dfe0e5;
8+
padding: 1.5rem 1rem;
9+
}
10+
.preview--error {
11+
margin: 0;
12+
padding: 8px;
13+
font-size: 13px;
14+
color: #f47067;
15+
position: absolute;
16+
top: 0;
17+
right: 0;
18+
left: 0;
19+
bottom: 0;
20+
}
21+
.preview--result {
22+
font-family: Consolas, Monaco, monospace;
23+
border: none;
24+
font-size: 16px;
25+
line-height: 1.25em;
26+
background-color: #fff;
27+
width: 100%;
28+
}
29+
30+
.filetree {
31+
display: flex;
32+
position: relative;
33+
flex-wrap: wrap;
34+
padding-right: 2rem;
35+
}
36+
37+
.filetab {
38+
position: relative;
39+
padding: 0.4rem 1.5rem;
40+
border: none;
41+
line-height: 1;
42+
background-color: #fff;
43+
cursor: pointer;
44+
color: #000;
45+
}
46+
.filetab:hover {
47+
opacity: .8;
48+
}
49+
.filetab--active {
50+
color: #087ea4;
51+
}
52+
.filetab--active::after {
53+
content: '';
54+
position: absolute;
55+
bottom: -2px;
56+
height: 2px;
57+
background: #087ea4;
58+
left: 0;
59+
width: 100%;
60+
}
61+
.filetab--new {
62+
padding: 0;
63+
color: #087ea4;
64+
background-color: #f0f0f0;
65+
}
66+
.filetab__button {
67+
display: inline-block;
68+
padding: 0.4rem 1.5rem;
69+
margin: 0;
70+
line-height: 1;
71+
border: none;
72+
background-color: transparent;
73+
cursor: pointer;
74+
color: #70858c;
75+
}
76+
.filetab__input {
77+
display: inline-block;
78+
outline: none;
79+
border: none;
80+
padding: 0.4rem 1.5rem;
81+
margin: 0;
82+
background-color: #f0f0f0;
83+
}
84+
85+
[data-codesandbox] {
86+
border-radius: 8px;
87+
overflow: hidden ;
88+
box-shadow: 0 12px 36px 4px rgb(200 200 200 / 50%);
89+
}

‎site/ui/codesandbox.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
'use client'
22

3+
import './codesandbox.css'
4+
35
const CDN_HOST = 'https://esm.sh'
46

57
import { Editor } from 'codice'

0 commit comments

Comments
 (0)