@@ -8,88 +8,88 @@ const css = (arr: TemplateStringsArray, ...exts: never[]) => {
88
99export const errorCss = css `
1010 : root {
11- --bg : # fff ;
12- --bg-code-frame : rgb (255 , 0 , 32 , 0.1 );
13- --bg-active-line : # fbcecc ;
14- --text : # 222 ;
15- --text2 : # 444 ;
16- --title : # e84644 ;
17- --code : # 333 ;
18- font-family : sans-serif;
19- line-height : 1.4 ;
20- color : var (--text );
21- background : var (--bg );
22- }
23-
24- * {
25- box-sizing : border-box;
26- padding : 0 ;
27- margin : 0 ;
28- }
29-
30- @media (prefers-color-scheme : dark) {
31- : root {
32- --bg-code-frame : rgba (251 , 93 , 113 , 0.2 );
33- --bg-active-line : # 4f1919 ;
34- --bg : # 353535 ;
35- --text : # f7f7f7 ;
36- --text2 : # ddd ;
37- --code : # fdd1d1 ;
38- }
39- }
40-
41- .inner {
42- max-width : 48rem ;
43- padding : 4rem 1rem ;
44- margin : 0 auto;
45- }
46-
47- .title {
48- color : var (--title );
49- font-weight : normal;
50- font-size : 1.5rem ;
51- margin-bottom : 1rem ;
52- }
53-
54- .code-frame {
55- overflow : auto;
56- padding : 0.5rem ;
57- margin-bottom : 0.5rem ;
58- background : var (--bg-code-frame );
59- color : var (--code );
60- }
61- .line {
62- padding : 0.25rem 0.5rem ;
63- }
64- .active-line {
65- display : inline-block;
66- width : 100% ;
67- background : var (--bg-active-line );
68- }
69-
70- .stack {
71- overflow-x : auto;
72- }
73-
74- .close-btn {
75- position : absolute;
76- top : 1rem ;
77- right : 1rem ;
78- color : var (--title );
79- display : block;
80- width : 3rem ;
81- height : 3rem ;
82- background : none;
83- border : none;
84- transform : translate3d (0 , 0 , 0 );
85- }
86- .close-btn : active {
87- transform : translate3d (0 , 2px , 0 );
88- }
89- .close-btn : hover {
90- cursor : pointer;
91- filter : drop-shadow (0 0 0.75rem crimson);
92- }
11+ --bg : # fff ;
12+ --bg-code-frame : rgb (255 , 0 , 32 , 0.1 );
13+ --bg-active-line : # fbcecc ;
14+ --text : # 222 ;
15+ --text2 : # 444 ;
16+ --title : # e84644 ;
17+ --code : # 333 ;
18+ font-family : sans-serif;
19+ line-height : 1.4 ;
20+ color : var (--text );
21+ background : var (--bg );
22+ }
23+
24+ * {
25+ box-sizing : border-box;
26+ padding : 0 ;
27+ margin : 0 ;
28+ }
29+
30+ @media (prefers-color-scheme : dark) {
31+ : root {
32+ --bg-code-frame : rgba (251 , 93 , 113 , 0.2 );
33+ --bg-active-line : # 4f1919 ;
34+ --bg : # 353535 ;
35+ --text : # f7f7f7 ;
36+ --text2 : # ddd ;
37+ --code : # fdd1d1 ;
38+ }
39+ }
40+
41+ .inner {
42+ max-width : 48rem ;
43+ padding : 4rem 1rem ;
44+ margin : 0 auto;
45+ }
46+
47+ .title {
48+ color : var (--title );
49+ font-weight : normal;
50+ font-size : 1.5rem ;
51+ margin-bottom : 1rem ;
52+ }
53+
54+ .code-frame {
55+ overflow : auto;
56+ padding : 0.5rem ;
57+ margin-bottom : 0.5rem ;
58+ background : var (--bg-code-frame );
59+ color : var (--code );
60+ }
61+ .line {
62+ padding : 0.25rem 0.5rem ;
63+ }
64+ .active-line {
65+ display : inline-block;
66+ width : 100% ;
67+ background : var (--bg-active-line );
68+ }
69+
70+ .stack {
71+ overflow-x : auto;
72+ }
73+
74+ .close-btn {
75+ position : absolute;
76+ top : 1rem ;
77+ right : 1rem ;
78+ color : var (--title );
79+ display : block;
80+ width : 3rem ;
81+ height : 3rem ;
82+ background : none;
83+ border : none;
84+ transform : translate3d (0 , 0 , 0 );
85+ }
86+ .close-btn : active {
87+ transform : translate3d (0 , 2px , 0 );
88+ }
89+ .close-btn : hover {
90+ cursor : pointer;
91+ filter : drop-shadow (0 0 0.75rem crimson);
92+ }
9393` ;
9494
9595function CodeFrame ( props : { codeFrame : string } ) {
0 commit comments