Skip to content

Commit 4fc50a4

Browse files
sidvishnoisidvishnoi
authored
fix(/play): inline styles and prevent unused CSS purge (#674)
1 parent 9adbc19 commit 4fc50a4

2 files changed

Lines changed: 155 additions & 153 deletions

File tree

‎src/pages/play.astro‎

Lines changed: 2 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { getLangFromUrl, useTranslations } from '../i18n/utils'
33
import Base from '../layouts/Base.astro'
44
import ToolsHeader from '../components/pages/ToolsHeader.astro'
5+
import playgroundStyles from '../styles/play.css?raw'
56
67
const lang = getLangFromUrl(Astro.url)
78
const t = useTranslations(lang)
@@ -56,159 +57,7 @@ const t = useTranslations(lang)
5657
</section>
5758
</Base>
5859

59-
<style>
60-
p.text {
61-
padding-inline: var(--padding-md);
62-
margin-bottom: var(--spacing-3xl);
63-
}
64-
.link-events {
65-
display: grid;
66-
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
67-
width: 100%;
68-
padding-inline: var(--padding-md);
69-
margin-top: var(--spacing-md);
70-
gap: var(--spacing-md);
71-
font: var(--font-small-regular);
72-
div[data-wallet-address] {
73-
padding: var(--padding-md);
74-
background-color: var(--color-mint-50);
75-
border-radius: var(--moderate-rounding);
76-
border: 1px solid var(--color-green-100);
77-
& .log-header {
78-
padding-bottom: var(--padding-sm);
79-
margin-bottom: var(--spacing-sm);
80-
border-bottom: 1px solid var(--color-silver-200);
81-
gap: var(--spacing-sm);
82-
display: flex;
83-
align-items: center;
84-
justify-content: space-between;
85-
& p {
86-
max-width: 100%;
87-
overflow-x: hidden;
88-
text-overflow: ellipsis;
89-
white-space: nowrap;
90-
text-align: center;
91-
color: var(--paragraph-success);
92-
}
93-
94-
.wallet-switch {
95-
display: flex;
96-
align-items: center;
97-
gap: var(--spacing-sm);
98-
99-
.switch-text {
100-
font: var(--font-standard-regular);
101-
color: var(--default-font-color);
102-
}
103-
104-
.switch-container {
105-
position: relative;
106-
display: inline-block;
107-
width: 2.75rem;
108-
height: 1.5rem;
109-
}
110-
111-
input {
112-
width: 100%;
113-
height: 100%;
114-
}
115-
116-
.switch-slider {
117-
position: absolute;
118-
inset: 0;
119-
background-color: var(--color-silver-300);
120-
border-radius: var(--fully-rounded);
121-
cursor: pointer;
122-
}
123-
124-
.switch-slider::before {
125-
content: '';
126-
position: absolute;
127-
width: 1.25rem;
128-
height: 1.25rem;
129-
top: 0.125rem;
130-
left: 0.125rem;
131-
background-color: var(--color-white);
132-
border-radius: var(--fully-rounded);
133-
transition: transform 0.3s;
134-
}
135-
136-
input:checked + .switch-slider {
137-
background-color: var(--button-ghost-color);
138-
}
139-
140-
input:checked + .switch-slider::before {
141-
transform: translateX(1.25rem);
142-
}
143-
}
144-
}
145-
146-
& ul.events {
147-
font-family: var(--sl-font-system-mono);
148-
height: 20rem;
149-
margin-block: var(--spacing-sm);
150-
padding: var(--padding-sm) 0px var(--padding-sm) var(--padding-sm);
151-
list-style: none;
152-
overflow-y: auto;
153-
white-space: nowrap;
154-
border-bottom: 1px solid var(--color-silver-200);
155-
156-
& li {
157-
margin-block-end: var(--spacing-2xs);
158-
159-
& details {
160-
& summary {
161-
cursor: pointer;
162-
163-
& span {
164-
text-decoration: underline dotted;
165-
text-underline-offset: 2px;
166-
}
167-
}
168-
169-
& pre {
170-
padding: var(--padding-xs);
171-
margin-inline-start: var(--spacing-md);
172-
}
173-
}
174-
}
175-
}
176-
177-
& .log-footer {
178-
gap: var(--spacing-sm);
179-
display: flex;
180-
align-items: center;
181-
justify-content: right;
182-
183-
& button.tools-secondary-btn {
184-
background-color: transparent;
185-
color: var(--button-ghost-color);
186-
border: none;
187-
font: var(--font-standard-regular);
188-
}
189-
& button.tools-secondary-btn:hover,
190-
& button.tools-secondary-btn:focus-visible {
191-
background-color: var(--surface-hover-color);
192-
color: var(--button-hover-color);
193-
}
194-
}
195-
}
196-
}
197-
198-
@media screen and (max-width: 767px) {
199-
p.text {
200-
margin-bottom: var(--spacing-lg);
201-
}
202-
.link-events {
203-
grid-template-columns: minmax(16.5rem, 1fr);
204-
div[data-wallet-address] {
205-
& .log-header {
206-
flex-wrap: wrap;
207-
}
208-
}
209-
}
210-
}
211-
</style>
60+
<style is:inline set:html={playgroundStyles}></style>
21261

21362
<script>
21463
import cleanIcon from '@assets/clean-icon.svg?raw'

‎src/styles/play.css‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
p.text {
2+
padding-inline: var(--padding-md);
3+
margin-bottom: var(--spacing-3xl);
4+
}
5+
6+
.link-events {
7+
display: grid;
8+
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
9+
width: 100%;
10+
padding-inline: var(--padding-md);
11+
margin-top: var(--spacing-md);
12+
gap: var(--spacing-md);
13+
font: var(--font-small-regular);
14+
15+
div[data-wallet-address] {
16+
padding: var(--padding-md);
17+
background-color: var(--color-mint-50);
18+
border-radius: var(--moderate-rounding);
19+
border: 1px solid var(--color-green-100);
20+
& .log-header {
21+
padding-bottom: var(--padding-sm);
22+
margin-bottom: var(--spacing-sm);
23+
border-bottom: 1px solid var(--color-silver-200);
24+
gap: var(--spacing-sm);
25+
display: flex;
26+
align-items: center;
27+
justify-content: space-between;
28+
& p {
29+
max-width: 100%;
30+
overflow-x: hidden;
31+
text-overflow: ellipsis;
32+
white-space: nowrap;
33+
text-align: center;
34+
color: var(--paragraph-success);
35+
}
36+
37+
.wallet-switch {
38+
display: flex;
39+
align-items: center;
40+
gap: var(--spacing-sm);
41+
42+
.switch-text {
43+
font: var(--font-standard-regular);
44+
color: var(--default-font-color);
45+
}
46+
47+
.switch-container {
48+
position: relative;
49+
display: inline-block;
50+
width: 2.75rem;
51+
height: 1.5rem;
52+
}
53+
54+
input {
55+
width: 100%;
56+
height: 100%;
57+
}
58+
59+
.switch-slider {
60+
position: absolute;
61+
inset: 0;
62+
background-color: var(--color-silver-300);
63+
border-radius: var(--fully-rounded);
64+
cursor: pointer;
65+
}
66+
67+
.switch-slider::before {
68+
content: '';
69+
position: absolute;
70+
width: 1.25rem;
71+
height: 1.25rem;
72+
top: 0.125rem;
73+
left: 0.125rem;
74+
background-color: var(--color-white);
75+
border-radius: var(--fully-rounded);
76+
transition: transform 0.3s;
77+
}
78+
79+
input:checked + .switch-slider {
80+
background-color: var(--button-ghost-color);
81+
}
82+
83+
input:checked + .switch-slider::before {
84+
transform: translateX(1.25rem);
85+
}
86+
}
87+
}
88+
89+
& ul.events {
90+
font-family: var(--sl-font-system-mono);
91+
height: 20rem;
92+
margin-block: var(--spacing-sm);
93+
padding: var(--padding-sm) 0px var(--padding-sm) var(--padding-sm);
94+
list-style: none;
95+
overflow-y: auto;
96+
white-space: nowrap;
97+
border-bottom: 1px solid var(--color-silver-200);
98+
99+
& li {
100+
margin-block-end: var(--spacing-2xs);
101+
102+
& details {
103+
& summary {
104+
cursor: pointer;
105+
106+
& span {
107+
text-decoration: underline dotted;
108+
text-underline-offset: 2px;
109+
}
110+
}
111+
112+
& pre {
113+
padding: var(--padding-xs);
114+
margin-inline-start: var(--spacing-md);
115+
}
116+
}
117+
}
118+
}
119+
120+
& .log-footer {
121+
gap: var(--spacing-sm);
122+
display: flex;
123+
align-items: center;
124+
justify-content: right;
125+
126+
& button.tools-secondary-btn {
127+
background-color: transparent;
128+
color: var(--button-ghost-color);
129+
border: none;
130+
font: var(--font-standard-regular);
131+
}
132+
& button.tools-secondary-btn:hover,
133+
& button.tools-secondary-btn:focus-visible {
134+
background-color: var(--surface-hover-color);
135+
color: var(--button-hover-color);
136+
}
137+
}
138+
}
139+
}
140+
141+
@media screen and (max-width: 767px) {
142+
p.text {
143+
margin-bottom: var(--spacing-lg);
144+
}
145+
.link-events {
146+
grid-template-columns: minmax(16.5rem, 1fr);
147+
div[data-wallet-address] {
148+
& .log-header {
149+
flex-wrap: wrap;
150+
}
151+
}
152+
}
153+
}

0 commit comments

Comments
 (0)