consent.software/catalog
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(elements): Revamp consent components with improved theming, layout, and accessibility

Browse Source
This commit is contained in:
Jürgen Kunz
2025-11-30 21:43:36 +00:00
parent 8a26378689
commit 0b366b360d
5 changed files with 243 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
ts_web/elements/consentsoftware-tabs.ts
View File

@@ -10,7 +10,7 @@ export class ConsentsoftwareTabs extends LitElement {
:host {
display: block;
position: relative;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background: var(--muted, hsl(0 0% 15%));
}
.tabs {
@@ -20,25 +20,34 @@ export class ConsentsoftwareTabs extends LitElement {
.tabs .tab {
text-align: center;
line-height: 3em;
padding: 8px 0;
font-size: 0.8em;
font-weight: 500;
color: var(--muted-foreground, hsl(0 0% 64%));
cursor: pointer;
transition: color 0.15s ease;
}
/* Media query for mobile devices: stack buttons vertically */
@media (max-width: 600px) {
.tabs .tab:hover {
color: var(--foreground, hsl(0 0% 95%));
}
@media (max-width: 560px) {
.tabs .tab {
font-size: 0.8em;
font-size: 0.75em;
padding: 6px 0;
}
}
.selector {
position: absolute;
width: calc(100% / 3);
height: 1px;
height: 2px;
left: 0;
bottom: 0px;
background: orange;
transition: all 0.2s;
bottom: 0;
background: var(--foreground, hsl(0 0% 95%));
transition: all 0.2s ease-out;
border-radius: 1px;
}
`;