fix: purple pushbox

This commit is contained in:
Tim Rijkse
2026-01-16 10:37:43 +01:00
parent 69e4f160fe
commit 95ffd84aeb
3 changed files with 42 additions and 20 deletions

View File

@@ -74,6 +74,7 @@ class ContentTabs extends HTMLElement {
<style>
:host {
display: block;
margin: var(--spacing-xl, 2rem) 0;
}
.tabs-container {
@@ -83,15 +84,18 @@ class ContentTabs extends HTMLElement {
.tab-list {
display: flex;
gap: var(--spacing-lg, 1.5rem);
gap: var(--spacing-md, 1rem);
margin-top: var(--spacing-lg, 1.5rem);
border-bottom: 1px solid var(--color-border, #e2e8f0);
margin-bottom: var(--spacing-md, 1rem);
}
.tab-button {
padding: var(--spacing-sm, 0.5rem) 0;
background: none;
padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
background: transparent;
border: none;
border-radius: 4px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
font-family: var(--font-family-outfit, "Outfit", sans-serif);
font-size: 16px;
font-weight: 400;
@@ -100,28 +104,24 @@ class ContentTabs extends HTMLElement {
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
transition: opacity var(--transition-fast, 150ms ease);
position: relative;
}
.tab-button:first-child {
color: var(--color-text, #1e293b);
text-decoration: none;
font-weight: 400;
transition: all var(--transition-fast, 150ms ease);
}
.tab-button.active {
background: var(--color-border, #e2e8f0);
color: var(--color-text, #1e293b);
text-decoration: none;
font-weight: 400;
}
.tab-button:hover {
.tab-button:not(.active):hover {
opacity: 0.7;
}
.tab-panels {
min-height: 100px;
background: var(--color-border, #e2e8f0);
padding: var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem);
border-radius: var(--radius-sm, 0.25rem);
}
</style>
<div class="tabs-container">