Skip to content

Commit 3757b8e

Browse files
ToolboxAidToolboxAid
committed
Tweaking css
1 parent 6816dc6 commit 3757b8e

3 files changed

Lines changed: 121 additions & 12 deletions

File tree

‎tools/Palette Browser/index.html‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,17 @@
1212
<body class="tools-platform-tool-page" data-tool-id="palette-browser" data-tools-platform-page="tool">
1313
<div data-tools-platform-header></div>
1414
<div class="palette-browser app-shell">
15-
<header class="palette-browser__hero panel">
16-
<h2>Palette Browser / Manager</h2>
17-
<p>Browse shared engine palettes, duplicate them into editable local palettes, validate entries, and hand off a chosen palette contract to the active art tools.</p>
18-
</header>
19-
15+
<details class="accordion palette-browser__accordion" open>
16+
<summary class="accordion__summary">
17+
<h2>Palette Browser / Manager</h2>
18+
<span class="accordion__icon">▼</span>
19+
</summary>
20+
<div class="accordion__content">
21+
<header class="palette-browser__hero panel">
22+
<p>Browse shared engine palettes, duplicate them into editable local palettes, validate entries, and hand off a chosen palette contract to the active art tools.</p>
23+
</header>
24+
</div>
25+
</details>
2026
<div class="palette-browser__layout">
2127
<aside class="panel palette-browser__panel">
2228
<h3>Palette List</h3>

‎tools/Palette Browser/paletteBrowser.css‎

Lines changed: 90 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,11 @@
1515
}
1616

1717
.palette-browser__panel {
18-
display: grid;
18+
display: flex;
19+
flex-direction: column;
1920
gap: 0.85rem;
20-
align-content: start;
21+
padding: 1rem;
22+
min-height: 0;
2123
}
2224

2325
.field {
@@ -34,8 +36,9 @@
3436
.palette-browser__list {
3537
display: grid;
3638
gap: 0.5rem;
37-
max-height: 60vh;
38-
overflow: auto;
39+
min-height: 0;
40+
flex: 1;
41+
overflow-y: auto;
3942
}
4043

4144
.palette-browser__list button {
@@ -101,8 +104,8 @@
101104

102105
.palette-browser__json-preview {
103106
margin: 0;
104-
min-height: 16rem;
105-
max-height: 32rem;
107+
min-height: 0;
108+
flex: 1;
106109
overflow: auto;
107110
white-space: pre-wrap;
108111
word-break: break-word;
@@ -121,3 +124,84 @@
121124
grid-template-columns: 1fr;
122125
}
123126
}
127+
128+
/* Accordion Styles */
129+
.accordion {
130+
border: 1px solid var(--panel-border, #29405c);
131+
border-radius: 0.75rem;
132+
margin-bottom: 1.5rem;
133+
background: rgba(15, 23, 42, 0.6);
134+
position: relative;
135+
z-index: 0;
136+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
137+
overflow: hidden;
138+
}
139+
140+
.accordion__summary {
141+
list-style: none;
142+
}
143+
144+
.accordion__summary::marker {
145+
display: none;
146+
}
147+
148+
.accordion__summary {
149+
display: flex;
150+
align-items: center;
151+
justify-content: space-between;
152+
cursor: pointer;
153+
padding: 1.25rem 1.5rem;
154+
user-select: none;
155+
list-style: none;
156+
position: relative;
157+
z-index: 1;
158+
background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.8) 100%);
159+
border-bottom: 1px solid var(--panel-border, #29405c);
160+
transition: background-color 0.2s ease;
161+
}
162+
163+
.accordion__summary:hover {
164+
background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(51, 65, 85, 0.9) 100%);
165+
}
166+
167+
.accordion__summary h2 {
168+
margin: 0;
169+
font-size: 1.4rem;
170+
font-weight: 600;
171+
flex: 1;
172+
position: relative;
173+
color: var(--text-color, #e2e8f0);
174+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
175+
}
176+
177+
.accordion__icon {
178+
display: inline-flex;
179+
align-items: center;
180+
justify-content: center;
181+
width: 1.75rem;
182+
height: 1.75rem;
183+
color: var(--accent, #ddd6fe);
184+
font-size: 1rem;
185+
font-weight: bold;
186+
transition: all 0.3s ease;
187+
flex-shrink: 0;
188+
pointer-events: none;
189+
z-index: 10;
190+
position: relative;
191+
background: rgba(221, 214, 254, 0.1);
192+
border-radius: 50%;
193+
border: 1px solid rgba(221, 214, 254, 0.3);
194+
}
195+
196+
.accordion[open] .accordion__icon {
197+
transform: rotate(180deg);
198+
background: rgba(221, 214, 254, 0.2);
199+
border-color: rgba(221, 214, 254, 0.5);
200+
}
201+
202+
.accordion__content {
203+
padding: 1rem 1.5rem 1.5rem 1.5rem;
204+
border-top: none;
205+
background: rgba(15, 23, 42, 0.4);
206+
}
207+

‎tools/shared/platformShell.js‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,9 +120,14 @@ function renderHeaderMarkup(currentTool) {
120120

121121
return `
122122
<section class="tools-platform-frame">
123+
<details class="accordion palette-browser__accordion" open>
124+
<summary class="accordion__summary">
125+
<h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface</h2>
126+
<span class="accordion__icon">▼</span>
127+
</summary>
128+
<div class="accordion__content">
123129
<div class="tools-platform-frame__topline">
124130
<div>
125-
<p class="tools-platform-frame__eyebrow">First-Class Tools Surface</p>
126131
<h1 class="tools-platform-frame__title">${escapeHtml(title)}</h1>
127132
<p class="tools-platform-frame__description">${escapeHtml(description)}</p>
128133
</div>
@@ -144,6 +149,8 @@ function renderHeaderMarkup(currentTool) {
144149
</div>
145150
${renderSharedSelectionSummary()}
146151
` : ""}
152+
</div>
153+
</details>
147154
</section>
148155
`;
149156
}
@@ -247,10 +254,22 @@ function renderShell(currentTool) {
247254
const headerHost = document.querySelector("[data-tools-platform-header]");
248255
const statusHost = document.querySelector("[data-tools-platform-status]");
249256

257+
// Preserve accordion open state (default to open on first load)
258+
const accordion = headerHost?.querySelector(".accordion");
259+
const wasOpen = accordion?.hasAttribute("open") ?? true;
260+
250261
applyDocumentMetadata(currentTool);
251262

252263
if (headerHost) {
253264
headerHost.innerHTML = renderHeaderMarkup(currentTool);
265+
266+
// Restore accordion open state (always open by default)
267+
const newAccordion = headerHost.querySelector(".accordion");
268+
if (newAccordion && wasOpen) {
269+
newAccordion.setAttribute("open", "");
270+
} else if (newAccordion && !wasOpen) {
271+
newAccordion.removeAttribute("open");
272+
}
254273
}
255274

256275
if (statusHost) {

0 commit comments

Comments
 (0)