alee/stegasoo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Accordion headers: gold left border, warmer tint, visible chevrons

Browse Source
This commit is contained in:
Aaron D. Lee
2026-01-07 20:14:02 -05:00
parent aebfb20dfc
commit 0c9ea0e3f2
2 changed files with 30 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontends/web/templates/decode.html
View File

@@ -6,20 +6,29 @@
<style> <style>
/* Accordion styling */ /* Accordion styling */
.step-accordion .accordion-button { .step-accordion .accordion-button {
background: rgba(30, 40, 50, 0.6); background: rgba(35, 45, 55, 0.8);
color: #fff; color: #fff;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-left: 3px solid transparent; border-left: 3px solid rgba(255, 230, 153, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.step-accordion .accordion-button:hover {
background: rgba(45, 55, 65, 0.9);
border-left-color: rgba(255, 230, 153, 0.5);
}
.step-accordion .accordion-button:not(.collapsed) { .step-accordion .accordion-button:not(.collapsed) {
background: linear-gradient(90deg, rgba(99, 179, 237, 0.15) 0%, rgba(40, 50, 60, 0.8) 40%, rgba(40, 50, 60, 0.8) 100%); background: linear-gradient(90deg, rgba(255, 230, 153, 0.12) 0%, rgba(40, 50, 60, 0.85) 40%, rgba(40, 50, 60, 0.85) 100%);
color: #fff; color: #fff;
box-shadow: inset 0 1px 0 rgba(99, 179, 237, 0.1); box-shadow: inset 0 1px 0 rgba(255, 230, 153, 0.1);
border-left: 3px solid rgba(99, 179, 237, 0.6); border-left: 3px solid #ffe699;
} }
.step-accordion .accordion-button::after { .step-accordion .accordion-button::after {
filter: invert(1); filter: invert(1) sepia(1) saturate(3) hue-rotate(10deg);
opacity: 0.7;
}
.step-accordion .accordion-button:hover::after {
opacity: 1;
} }
.step-accordion .accordion-body { .step-accordion .accordion-body {
background: rgba(30, 40, 50, 0.4); background: rgba(30, 40, 50, 0.4);

21
frontends/web/templates/encode.html
View File

@@ -6,20 +6,29 @@
<style> <style>
/* Accordion styling */ /* Accordion styling */
.step-accordion .accordion-button { .step-accordion .accordion-button {
background: rgba(30, 40, 50, 0.6); background: rgba(35, 45, 55, 0.8);
color: #fff; color: #fff;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-left: 3px solid transparent; border-left: 3px solid rgba(255, 230, 153, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.step-accordion .accordion-button:hover {
background: rgba(45, 55, 65, 0.9);
border-left-color: rgba(255, 230, 153, 0.5);
}
.step-accordion .accordion-button:not(.collapsed) { .step-accordion .accordion-button:not(.collapsed) {
background: linear-gradient(90deg, rgba(99, 179, 237, 0.15) 0%, rgba(40, 50, 60, 0.8) 40%, rgba(40, 50, 60, 0.8) 100%); background: linear-gradient(90deg, rgba(255, 230, 153, 0.12) 0%, rgba(40, 50, 60, 0.85) 40%, rgba(40, 50, 60, 0.85) 100%);
color: #fff; color: #fff;
box-shadow: inset 0 1px 0 rgba(99, 179, 237, 0.1); box-shadow: inset 0 1px 0 rgba(255, 230, 153, 0.1);
border-left: 3px solid rgba(99, 179, 237, 0.6); border-left: 3px solid #ffe699;
} }
.step-accordion .accordion-button::after { .step-accordion .accordion-button::after {
filter: invert(1); filter: invert(1) sepia(1) saturate(3) hue-rotate(10deg);
opacity: 0.7;
}
.step-accordion .accordion-button:hover::after {
opacity: 1;
} }
.step-accordion .accordion-body { .step-accordion .accordion-body {
background: rgba(30, 40, 50, 0.4); background: rgba(30, 40, 50, 0.4);