jekyll-svg-viewer 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/LICENSE.txt +22 -0
- data/README.md +110 -0
- data/assets/svg-viewer/css/svg-viewer.css +439 -0
- data/assets/svg-viewer/i18n/locales.json +78 -0
- data/assets/svg-viewer/js/svg-viewer.js +1604 -0
- data/assets/svg-viewer/preview/index.html +178 -0
- data/assets/svg-viewer/preview/preset-builder.css +338 -0
- data/assets/svg-viewer/preview/preset-builder.js +793 -0
- data/lib/jekyll/svg_viewer/asset_manager.rb +129 -0
- data/lib/jekyll/svg_viewer/config.rb +40 -0
- data/lib/jekyll/svg_viewer/preview_page.rb +54 -0
- data/lib/jekyll/svg_viewer/tag.rb +528 -0
- data/lib/jekyll/svg_viewer/version.rb +6 -0
- data/lib/jekyll/svg_viewer.rb +6 -0
- data/lib/jekyll-svg-viewer.rb +11 -0
- metadata +93 -0
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8" />
|
|
6
|
+
<title>SVG Viewer Preset Builder</title>
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
8
|
+
<link rel="stylesheet" href="{{ site.baseurl }}/assets/svg-viewer/css/svg-viewer.css" />
|
|
9
|
+
<link rel="stylesheet" href="{{ site.baseurl }}/assets/svg-viewer/preview/preset-builder.css" />
|
|
10
|
+
</head>
|
|
11
|
+
|
|
12
|
+
<body class="preset-builder-body">
|
|
13
|
+
<script>
|
|
14
|
+
window.__SVG_VIEWER_DEFAULTS__ = {{ page.svg_viewer_defaults | jsonify }};
|
|
15
|
+
window.__SVG_VIEWER_BASEURL__ = "{{ site.baseurl }}";
|
|
16
|
+
</script>
|
|
17
|
+
<main class="preset-builder">
|
|
18
|
+
<section class="preset-builder__panel">
|
|
19
|
+
<header class="preset-builder__hero">
|
|
20
|
+
<h1>SVG Viewer Preset Builder</h1>
|
|
21
|
+
<p>Adjust the options, load the preview, then copy the Liquid tag or configuration YAML for your Jekyll site.
|
|
22
|
+
</p>
|
|
23
|
+
</header>
|
|
24
|
+
|
|
25
|
+
<form id="preset-form" class="preset-builder__form">
|
|
26
|
+
<div class="field full">
|
|
27
|
+
<label for="field-src">SVG Source URL</label>
|
|
28
|
+
<input type="text" id="field-src" data-setting="src" placeholder="https://example.com/diagram.svg"
|
|
29
|
+
autocomplete="off" />
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<div class="field-grid">
|
|
33
|
+
<div class="field">
|
|
34
|
+
<label for="field-height">Viewer Height</label>
|
|
35
|
+
<input type="text" id="field-height" data-setting="height" placeholder="600px" />
|
|
36
|
+
</div>
|
|
37
|
+
<div class="field">
|
|
38
|
+
<label for="field-zoom">Initial Zoom (%)</label>
|
|
39
|
+
<input type="number" id="field-zoom" data-setting="zoom" min="1" max="1600" step="1" />
|
|
40
|
+
</div>
|
|
41
|
+
<div class="field">
|
|
42
|
+
<label for="field-min-zoom">Min Zoom (%)</label>
|
|
43
|
+
<input type="number" id="field-min-zoom" data-setting="min_zoom" min="1" max="1600" step="1" />
|
|
44
|
+
</div>
|
|
45
|
+
<div class="field">
|
|
46
|
+
<label for="field-max-zoom">Max Zoom (%)</label>
|
|
47
|
+
<input type="number" id="field-max-zoom" data-setting="max_zoom" min="1" max="3200" step="1" />
|
|
48
|
+
</div>
|
|
49
|
+
<div class="field">
|
|
50
|
+
<label for="field-zoom-step">Zoom Step (%)</label>
|
|
51
|
+
<input type="number" id="field-zoom-step" data-setting="zoom_step" min="1" max="200" step="1" />
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<div class="field-grid">
|
|
56
|
+
<div class="field">
|
|
57
|
+
<label for="field-pan-mode">Pan Mode</label>
|
|
58
|
+
<select id="field-pan-mode" data-setting="pan_mode">
|
|
59
|
+
<option value="">Auto (default)</option>
|
|
60
|
+
<option value="scroll">Scroll</option>
|
|
61
|
+
<option value="drag">Drag</option>
|
|
62
|
+
</select>
|
|
63
|
+
</div>
|
|
64
|
+
<div class="field">
|
|
65
|
+
<label for="field-zoom-mode">Zoom Mode</label>
|
|
66
|
+
<select id="field-zoom-mode" data-setting="zoom_mode">
|
|
67
|
+
<option value="">Super Scroll (default)</option>
|
|
68
|
+
<option value="scroll">Scroll</option>
|
|
69
|
+
<option value="click">Click</option>
|
|
70
|
+
</select>
|
|
71
|
+
</div>
|
|
72
|
+
<div class="field">
|
|
73
|
+
<label for="field-controls-position">Controls Position</label>
|
|
74
|
+
<select id="field-controls-position" data-setting="controls_position">
|
|
75
|
+
<option value="top">Top</option>
|
|
76
|
+
<option value="bottom">Bottom</option>
|
|
77
|
+
<option value="left">Left</option>
|
|
78
|
+
<option value="right">Right</option>
|
|
79
|
+
</select>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
<div class="field full">
|
|
84
|
+
<label for="field-controls-buttons">Controls Buttons (comma separated)</label>
|
|
85
|
+
<input type="text" id="field-controls-buttons" data-setting="controls_buttons"
|
|
86
|
+
placeholder="both,alignleft,zoom_in,zoom_out,reset,center" />
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<div class="field-grid">
|
|
90
|
+
<div class="field">
|
|
91
|
+
<label for="field-button-fill">Button Fill</label>
|
|
92
|
+
<input type="color" id="field-button-fill" data-setting="button_fill" />
|
|
93
|
+
</div>
|
|
94
|
+
<div class="field">
|
|
95
|
+
<label for="field-button-border">Button Border</label>
|
|
96
|
+
<input type="color" id="field-button-border" data-setting="button_border" />
|
|
97
|
+
</div>
|
|
98
|
+
<div class="field">
|
|
99
|
+
<label for="field-button-foreground">Button Foreground</label>
|
|
100
|
+
<input type="color" id="field-button-foreground" data-setting="button_foreground" />
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
|
|
104
|
+
<div class="field checkbox-field">
|
|
105
|
+
<input type="checkbox" id="field-show-coords" data-setting="show_coords" />
|
|
106
|
+
<label for="field-show-coords">Show coordinate helper button</label>
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
<div class="field full">
|
|
110
|
+
<label for="field-title">Title</label>
|
|
111
|
+
<input type="text" id="field-title" data-setting="title"
|
|
112
|
+
placeholder="Optional title displayed above the viewer" />
|
|
113
|
+
</div>
|
|
114
|
+
|
|
115
|
+
<div class="field full">
|
|
116
|
+
<label for="field-caption">Caption</label>
|
|
117
|
+
<textarea id="field-caption" data-setting="caption" rows="2"
|
|
118
|
+
placeholder="Optional caption shown below the viewer"></textarea>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
<div class="field-grid">
|
|
122
|
+
<div class="field">
|
|
123
|
+
<label for="field-center-x">Center X</label>
|
|
124
|
+
<input type="text" id="field-center-x" data-setting="center_x" inputmode="decimal" />
|
|
125
|
+
</div>
|
|
126
|
+
<div class="field">
|
|
127
|
+
<label for="field-center-y">Center Y</label>
|
|
128
|
+
<input type="text" id="field-center-y" data-setting="center_y" inputmode="decimal" />
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</form>
|
|
132
|
+
|
|
133
|
+
<p class="preset-builder__status" id="builder-status" role="status"></p>
|
|
134
|
+
|
|
135
|
+
<section class="preset-builder__outputs">
|
|
136
|
+
<label for="liquid-tag-output">Liquid Tag</label>
|
|
137
|
+
<textarea id="liquid-tag-output" readonly rows="3"></textarea>
|
|
138
|
+
<div class="outputs-actions">
|
|
139
|
+
<button class="btn secondary" id="copy-liquid" type="button">Copy Liquid Tag</button>
|
|
140
|
+
<button class="btn secondary" id="show-yaml" type="button">Generate YAML</button>
|
|
141
|
+
</div>
|
|
142
|
+
</section>
|
|
143
|
+
</section>
|
|
144
|
+
|
|
145
|
+
<section class="preset-builder__preview">
|
|
146
|
+
<div class="preview-card">
|
|
147
|
+
<header>
|
|
148
|
+
<h2>Live Preview</h2>
|
|
149
|
+
<p>Provide an SVG source and press “Load Preview” to render the interactive viewer.</p>
|
|
150
|
+
</header>
|
|
151
|
+
<div class="preset-builder__actions preset-builder__actions--preview">
|
|
152
|
+
<button id="load-preview" class="btn primary">Load Preview</button>
|
|
153
|
+
<button id="capture-center" class="btn subtle" type="button">Use Current View</button>
|
|
154
|
+
</div>
|
|
155
|
+
<div id="viewer-preview" class="viewer-preview"></div>
|
|
156
|
+
</div>
|
|
157
|
+
</section>
|
|
158
|
+
</main>
|
|
159
|
+
|
|
160
|
+
<dialog id="yaml-modal">
|
|
161
|
+
<form method="dialog">
|
|
162
|
+
<header>
|
|
163
|
+
<h2>_config.yml Snippet</h2>
|
|
164
|
+
<p>Copy these defaults (excluding the SVG path and captured center) into your site configuration.</p>
|
|
165
|
+
</header>
|
|
166
|
+
<textarea id="yaml-output" rows="12" readonly></textarea>
|
|
167
|
+
<footer>
|
|
168
|
+
<button class="btn secondary" id="copy-yaml" type="button">Copy YAML</button>
|
|
169
|
+
<button class="btn primary" value="close">Close</button>
|
|
170
|
+
</footer>
|
|
171
|
+
</form>
|
|
172
|
+
</dialog>
|
|
173
|
+
|
|
174
|
+
<script src="{{ site.baseurl }}/assets/svg-viewer/js/svg-viewer.js"></script>
|
|
175
|
+
<script src="{{ site.baseurl }}/assets/svg-viewer/preview/preset-builder.js"></script>
|
|
176
|
+
</body>
|
|
177
|
+
|
|
178
|
+
</html>
|
|
@@ -0,0 +1,338 @@
|
|
|
1
|
+
.preset-builder-body {
|
|
2
|
+
margin: 0;
|
|
3
|
+
min-height: 100vh;
|
|
4
|
+
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
5
|
+
sans-serif;
|
|
6
|
+
color: #e8ecf6;
|
|
7
|
+
background: radial-gradient(
|
|
8
|
+
circle at top,
|
|
9
|
+
rgba(79, 70, 229, 0.35),
|
|
10
|
+
transparent 55%
|
|
11
|
+
),
|
|
12
|
+
radial-gradient(circle at bottom, rgba(16, 185, 129, 0.2), transparent 45%),
|
|
13
|
+
#090b15;
|
|
14
|
+
padding: 3rem clamp(1.25rem, 2vw, 2.5rem);
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.preset-builder {
|
|
19
|
+
max-width: 1400px;
|
|
20
|
+
margin: 0 auto;
|
|
21
|
+
display: grid;
|
|
22
|
+
grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.1fr);
|
|
23
|
+
gap: clamp(2rem, 3vw, 3rem);
|
|
24
|
+
align-items: start;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.preset-builder__panel,
|
|
28
|
+
.preset-builder__preview .preview-card {
|
|
29
|
+
background: rgba(8, 11, 23, 0.85);
|
|
30
|
+
backdrop-filter: blur(24px);
|
|
31
|
+
border: 1px solid rgba(148, 163, 184, 0.15);
|
|
32
|
+
border-radius: 20px;
|
|
33
|
+
box-shadow: 0 30px 60px -25px rgba(15, 23, 42, 0.6);
|
|
34
|
+
padding: clamp(1.75rem, 2.4vw, 2.5rem);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.preset-builder__hero h1 {
|
|
38
|
+
margin: 0;
|
|
39
|
+
font-size: clamp(1.8rem, 3vw, 2.4rem);
|
|
40
|
+
font-weight: 700;
|
|
41
|
+
letter-spacing: -0.02em;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.preset-builder__hero p {
|
|
45
|
+
margin: 0.75rem 0 0;
|
|
46
|
+
color: rgba(226, 232, 240, 0.7);
|
|
47
|
+
line-height: 1.6;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.preset-builder__form {
|
|
51
|
+
margin-top: 2rem;
|
|
52
|
+
display: flex;
|
|
53
|
+
flex-direction: column;
|
|
54
|
+
gap: 1.25rem;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.field {
|
|
58
|
+
display: flex;
|
|
59
|
+
flex-direction: column;
|
|
60
|
+
gap: 0.5rem;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.field.full {
|
|
64
|
+
grid-column: 1 / -1;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.field label {
|
|
68
|
+
font-size: 0.875rem;
|
|
69
|
+
text-transform: uppercase;
|
|
70
|
+
letter-spacing: 0.08em;
|
|
71
|
+
color: rgba(148, 163, 184, 0.8);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.field input[type="text"],
|
|
75
|
+
.field input[type="number"],
|
|
76
|
+
.field input[type="color"],
|
|
77
|
+
.field textarea,
|
|
78
|
+
.field select {
|
|
79
|
+
background: rgba(17, 24, 39, 0.7);
|
|
80
|
+
border: 1px solid rgba(148, 163, 184, 0.2);
|
|
81
|
+
border-radius: 12px;
|
|
82
|
+
padding: 0.75rem 0.9rem;
|
|
83
|
+
color: #e8ecf6;
|
|
84
|
+
font-size: 1rem;
|
|
85
|
+
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.field input[type="color"] {
|
|
89
|
+
padding: 0.35rem;
|
|
90
|
+
height: 2.75rem;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.field input[type="text"]:focus,
|
|
94
|
+
.field input[type="number"]:focus,
|
|
95
|
+
.field input[type="color"]:focus,
|
|
96
|
+
.field textarea:focus,
|
|
97
|
+
.field select:focus {
|
|
98
|
+
outline: none;
|
|
99
|
+
border-color: rgba(59, 130, 246, 0.75);
|
|
100
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.field textarea {
|
|
104
|
+
resize: vertical;
|
|
105
|
+
min-height: 90px;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.field-grid {
|
|
109
|
+
display: grid;
|
|
110
|
+
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
111
|
+
gap: 1rem;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.checkbox-field {
|
|
115
|
+
flex-direction: row;
|
|
116
|
+
align-items: center;
|
|
117
|
+
gap: 0.75rem;
|
|
118
|
+
margin-top: 0.5rem;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.checkbox-field input[type="checkbox"] {
|
|
122
|
+
width: 1.15rem;
|
|
123
|
+
height: 1.15rem;
|
|
124
|
+
accent-color: #6366f1;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.preset-builder__actions {
|
|
128
|
+
margin-top: 1.75rem;
|
|
129
|
+
display: flex;
|
|
130
|
+
gap: 1rem;
|
|
131
|
+
flex-wrap: wrap;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.preset-builder__actions--preview {
|
|
135
|
+
margin-top: 1.25rem;
|
|
136
|
+
margin-bottom: 1.5rem;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.btn {
|
|
140
|
+
border: none;
|
|
141
|
+
border-radius: 999px;
|
|
142
|
+
padding: 0.75rem 1.6rem;
|
|
143
|
+
font-size: 0.95rem;
|
|
144
|
+
font-weight: 600;
|
|
145
|
+
cursor: pointer;
|
|
146
|
+
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.btn.primary {
|
|
150
|
+
background: linear-gradient(135deg, #6366f1, #22d3ee);
|
|
151
|
+
color: #0f172a;
|
|
152
|
+
box-shadow: 0 18px 45px -18px rgba(99, 102, 241, 0.6);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.btn.primary:hover {
|
|
156
|
+
transform: translateY(-1px);
|
|
157
|
+
box-shadow: 0 22px 50px -20px rgba(99, 102, 241, 0.7);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.btn.secondary {
|
|
161
|
+
background: rgba(148, 163, 184, 0.15);
|
|
162
|
+
color: #e2e8f0;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.btn.secondary:hover {
|
|
166
|
+
background: rgba(148, 163, 184, 0.25);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.btn.subtle {
|
|
170
|
+
background: transparent;
|
|
171
|
+
color: rgba(226, 232, 240, 0.7);
|
|
172
|
+
border: 1px dashed rgba(148, 163, 184, 0.3);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.btn.subtle:hover {
|
|
176
|
+
border-color: rgba(148, 163, 184, 0.6);
|
|
177
|
+
color: #e2e8f0;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.preset-builder__status {
|
|
181
|
+
min-height: 1.4rem;
|
|
182
|
+
margin: 1rem 0 0;
|
|
183
|
+
font-size: 0.9rem;
|
|
184
|
+
color: rgba(94, 234, 212, 0.85);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.preset-builder__status[data-tone="warn"] {
|
|
188
|
+
color: #fbbf24;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.preset-builder__status[data-tone="error"] {
|
|
192
|
+
color: #f87171;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.preset-builder__status[data-tone="success"] {
|
|
196
|
+
color: #34d399;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.preset-builder__outputs {
|
|
200
|
+
margin-top: 2.25rem;
|
|
201
|
+
display: flex;
|
|
202
|
+
flex-direction: column;
|
|
203
|
+
gap: 0.75rem;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
.preset-builder__outputs label {
|
|
207
|
+
font-size: 0.85rem;
|
|
208
|
+
text-transform: uppercase;
|
|
209
|
+
letter-spacing: 0.08em;
|
|
210
|
+
color: rgba(148, 163, 184, 0.75);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
#liquid-tag-output {
|
|
214
|
+
background: rgba(15, 23, 42, 0.65);
|
|
215
|
+
border: 1px solid rgba(99, 102, 241, 0.2);
|
|
216
|
+
border-radius: 14px;
|
|
217
|
+
padding: 1rem 1.25rem;
|
|
218
|
+
color: #dbeafe;
|
|
219
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
220
|
+
line-height: 1.5;
|
|
221
|
+
min-height: 110px;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.outputs-actions {
|
|
225
|
+
display: flex;
|
|
226
|
+
gap: 0.75rem;
|
|
227
|
+
flex-wrap: wrap;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.preset-builder__preview .preview-card header {
|
|
231
|
+
margin-bottom: 1.5rem;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.preset-builder__preview h2 {
|
|
235
|
+
margin: 0;
|
|
236
|
+
font-size: 1.35rem;
|
|
237
|
+
font-weight: 600;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.preset-builder__preview p {
|
|
241
|
+
margin: 0.65rem 0 0;
|
|
242
|
+
color: rgba(148, 163, 184, 0.75);
|
|
243
|
+
line-height: 1.5;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.viewer-preview {
|
|
247
|
+
min-height: 420px;
|
|
248
|
+
border-radius: 16px;
|
|
249
|
+
border: 1px solid rgba(148, 163, 184, 0.2);
|
|
250
|
+
background: rgba(15, 23, 42, 0.7);
|
|
251
|
+
padding: 1.5rem;
|
|
252
|
+
display: block;
|
|
253
|
+
width: 100%;
|
|
254
|
+
max-width: 100%;
|
|
255
|
+
overflow-x: hidden;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.viewer-preview .svg-viewer-wrapper {
|
|
259
|
+
width: 100%;
|
|
260
|
+
max-width: 100%;
|
|
261
|
+
min-width: 0;
|
|
262
|
+
margin: 0 auto;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
dialog {
|
|
266
|
+
border: none;
|
|
267
|
+
border-radius: 20px;
|
|
268
|
+
padding: 1.75rem;
|
|
269
|
+
max-width: 720px;
|
|
270
|
+
width: 90vw;
|
|
271
|
+
background: rgba(8, 11, 23, 0.92);
|
|
272
|
+
color: #e8ecf6;
|
|
273
|
+
box-shadow: 0 30px 60px -30px rgba(2, 6, 23, 0.75);
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
dialog::backdrop {
|
|
277
|
+
background: rgba(9, 11, 21, 0.55);
|
|
278
|
+
backdrop-filter: blur(6px);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
dialog header h2 {
|
|
282
|
+
margin: 0;
|
|
283
|
+
font-size: 1.35rem;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
dialog header p {
|
|
287
|
+
margin: 0.5rem 0 1.25rem;
|
|
288
|
+
color: rgba(148, 163, 184, 0.75);
|
|
289
|
+
line-height: 1.5;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
#yaml-output {
|
|
293
|
+
width: 100%;
|
|
294
|
+
background: rgba(15, 23, 42, 0.65);
|
|
295
|
+
border: 1px solid rgba(148, 163, 184, 0.3);
|
|
296
|
+
border-radius: 14px;
|
|
297
|
+
padding: 1rem 1.15rem;
|
|
298
|
+
color: #dbeafe;
|
|
299
|
+
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
300
|
+
line-height: 1.5;
|
|
301
|
+
box-sizing: border-box;
|
|
302
|
+
margin-bottom: 1.5rem;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
dialog footer {
|
|
306
|
+
display: flex;
|
|
307
|
+
justify-content: flex-end;
|
|
308
|
+
gap: 0.75rem;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
@media (max-width: 1100px) {
|
|
312
|
+
.preset-builder {
|
|
313
|
+
grid-template-columns: 1fr;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.preset-builder__preview .preview-card {
|
|
317
|
+
order: -1;
|
|
318
|
+
}
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
@media (max-width: 720px) {
|
|
322
|
+
.preset-builder-body {
|
|
323
|
+
padding: 2rem 1rem;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.preset-builder__actions {
|
|
327
|
+
flex-direction: column;
|
|
328
|
+
align-items: stretch;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.outputs-actions {
|
|
332
|
+
flex-direction: column;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
dialog {
|
|
336
|
+
padding: 1.5rem;
|
|
337
|
+
}
|
|
338
|
+
}
|