Skip to content

Commit d823d8f

Browse files
anthony-hyoanthony-hyo
committed
extension: Add per-site configuration settings modal
1 parent 6fe83ab commit d823d8f

File tree

2 files changed

+703
-7
lines changed

2 files changed

+703
-7
lines changed

‎web/packages/extension/assets/css/options.css‎

Lines changed: 209 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,217 @@
1212
padding: 24px 32px;
1313
}
1414

15-
#advanced-options {
16-
color: var(--ruffle-orange);
17-
font-size: 28px;
18-
margin: 8px auto 0;
15+
hr {
16+
border: none;
17+
height: 1px;
18+
background-color: #546da3;
19+
margin: 20px 0;
20+
width: 100%;
1921
}
2022

2123
#reset-settings {
2224
margin: 0 auto;
2325
}
26+
27+
.option-title {
28+
border-bottom: 2px solid var(--ruffle-light-blue);
29+
padding-bottom: 8px;
30+
margin-block-end: 0;
31+
font-size: 1.2em;
32+
color: var(--ruffle-orange);
33+
}
34+
35+
.option-description {
36+
opacity: 0.8;
37+
margin-block: 0.2em;
38+
}
39+
40+
/* Per-site settings */
41+
42+
#per-site-list {
43+
display: flex;
44+
flex-direction: column;
45+
gap: 8px;
46+
}
47+
48+
.per-site-entry {
49+
display: flex;
50+
justify-content: space-between;
51+
align-items: center;
52+
padding: 10px;
53+
border-radius: 8px;
54+
background: var(--ruffle-dark-blue);
55+
}
56+
57+
.per-site-entry .site-domain {
58+
font-weight: bold;
59+
}
60+
61+
#site-entry-new {
62+
align-self: flex-start;
63+
}
64+
65+
/* Modal */
66+
67+
.modal-open {
68+
overflow: hidden;
69+
}
70+
71+
.modal-overlay {
72+
position: fixed;
73+
top: 0;
74+
left: 0;
75+
width: 100%;
76+
height: 100%;
77+
background: rgb(0 0 0 / 70%);
78+
display: none;
79+
justify-content: center;
80+
align-items: center;
81+
z-index: 1000;
82+
}
83+
84+
.modal-content {
85+
background: var(--ruffle-blue);
86+
border: 2px solid var(--ruffle-light-blue);
87+
padding: 25px;
88+
border-radius: 8px;
89+
width: 90%;
90+
max-width: 800px;
91+
max-height: 90vh;
92+
overflow-y: auto;
93+
box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
94+
scrollbar-width: thin;
95+
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
96+
}
97+
98+
.modal-header {
99+
display: flex;
100+
justify-content: space-between;
101+
align-items: center;
102+
}
103+
104+
.modal-header h3 {
105+
margin: 0;
106+
color: var(--ruffle-orange);
107+
}
108+
109+
.modal-close-btn {
110+
font-size: 1.5rem;
111+
cursor: pointer;
112+
border: none;
113+
background: none;
114+
color: #aaa;
115+
}
116+
117+
.modal-body {
118+
margin-top: 20px;
119+
}
120+
121+
.modal-footer {
122+
margin-top: 25px;
123+
display: flex;
124+
gap: 10px;
125+
justify-content: flex-end;
126+
}
127+
128+
/* Modal Scrollbar */
129+
130+
:root {
131+
--scrollbar-width: 8px;
132+
--scrollbar-track: rgb(255 255 255 / 10%);
133+
--scrollbar-thumb: rgb(255 255 255 / 30%);
134+
--scrollbar-thumb-hover: rgb(255 255 255 / 50%);
135+
--scrollbar-border-radius: 4px;
136+
}
137+
138+
/* Webkit browsers (Chrome, Safari, Edge) */
139+
.modal-content::-webkit-scrollbar {
140+
width: var(--scrollbar-width);
141+
height: var(--scrollbar-width);
142+
}
143+
144+
.modal-content::-webkit-scrollbar-track {
145+
background: var(--scrollbar-track);
146+
border-radius: var(--scrollbar-border-radius);
147+
}
148+
149+
.modal-content::-webkit-scrollbar-thumb {
150+
background: var(--scrollbar-thumb);
151+
border-radius: var(--scrollbar-border-radius);
152+
transition: background-color 0.2s ease;
153+
}
154+
155+
.modal-content::-webkit-scrollbar-thumb:hover {
156+
background: var(--scrollbar-thumb-hover);
157+
}
158+
159+
.modal-content::-webkit-scrollbar-corner {
160+
background: var(--scrollbar-track);
161+
}
162+
163+
.modal-content::-webkit-scrollbar-button {
164+
display: none;
165+
}
166+
167+
/* Sections */
168+
169+
.settings-section > * {
170+
margin-bottom: 20px;
171+
padding-bottom: 15px;
172+
border-bottom: 2px solid var(--ruffle-light-blue);
173+
}
174+
175+
.settings-section > :last-child {
176+
margin-bottom: 0;
177+
padding-bottom: 0;
178+
border-bottom: none;
179+
}
180+
181+
.settings-section-title {
182+
font-size: 1.1em;
183+
font-weight: bold;
184+
color: var(--ruffle-orange);
185+
margin-bottom: 10px;
186+
}
187+
188+
/* Per-site override options */
189+
190+
.settings-option {
191+
display: grid;
192+
grid-template-columns: 40px 1fr;
193+
align-items: start;
194+
gap: 15px;
195+
padding: 12px 0;
196+
border-bottom: 1px solid var(--ruffle-light-blue);
197+
}
198+
199+
.settings-option-toggle {
200+
margin: auto 0;
201+
}
202+
203+
.settings-option:last-child {
204+
border-bottom: none;
205+
}
206+
207+
.settings-option .settings-option-control.settings-option-disabled {
208+
pointer-events: none;
209+
opacity: 0.5;
210+
}
211+
212+
/* Per-site override option label and description */
213+
214+
.settings-option-control {
215+
display: flex;
216+
flex-direction: column;
217+
gap: 5px;
218+
}
219+
220+
.settings-option-control label {
221+
font-weight: bold;
222+
}
223+
224+
.settings-option-control small {
225+
font-size: 0.8em;
226+
color: #ccc;
227+
opacity: 0.8;
228+
}

0 commit comments

Comments
 (0)