mirror of
https://codeberg.org/likwid/likwid.git
synced 2026-02-09 21:13:09 +00:00
ux: unify public buttons to ui-btn
This commit is contained in:
parent
c00814156d
commit
2c8f55d31c
7 changed files with 24 additions and 196 deletions
|
|
@ -382,6 +382,18 @@
|
|||
transition: transform var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard), opacity var(--motion-fast) var(--easing-standard);
|
||||
}
|
||||
|
||||
.ui-btn-lg {
|
||||
padding: 0.875rem 1.75rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.ui-btn-xl {
|
||||
padding: 1rem 2.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.ui-btn:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@ const { userId, communityId, compact = false } = Astro.props;
|
|||
<svg class="icon icon-xl"><use href="#icon-delegation"/></svg>
|
||||
<h4>No Active Delegations</h4>
|
||||
<p>You haven't delegated your vote to anyone, and no one has delegated to you.</p>
|
||||
<a href="/delegations" class="btn-primary ui-btn ui-btn-primary">Explore Delegates</a>
|
||||
<a href="/delegations" class="ui-btn ui-btn-primary ui-btn-lg">Explore Delegates</a>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
|
|
@ -598,18 +598,6 @@ const { userId, communityId, compact = false } = Astro.props;
|
|||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Tree View */
|
||||
.tree-container {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -213,8 +213,8 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
|
|||
Use demo accounts to participate.
|
||||
</p>
|
||||
<div class="cta-buttons">
|
||||
<a href={`/demo?enter=1${nextQuery || '&next=%2Fcommunities'}`} class="btn-primary btn-large">Enter the Demo</a>
|
||||
<a href={`/demo?enter=1${nextQuery || '&next=%2Flogin'}`} class="btn-secondary">Continue</a>
|
||||
<a href={`/demo?enter=1${nextQuery || '&next=%2Fcommunities'}`} class="ui-btn ui-btn-primary ui-btn-xl">Enter the Demo</a>
|
||||
<a href={`/demo?enter=1${nextQuery || '&next=%2Flogin'}`} class="ui-btn ui-btn-secondary ui-btn-lg">Continue</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -622,47 +622,6 @@ const nextQuery = nextParam ? `&next=${encodeURIComponent(nextParam)}` : '';
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
padding: 0.875rem 1.75rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
font-size: 0.9375rem;
|
||||
transition: all var(--motion-fast) var(--easing-standard);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--color-primary-hover);
|
||||
color: var(--color-text-inverse);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(129, 140, 248, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary.btn-large {
|
||||
padding: 1rem 2.5rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
padding: 0.875rem 2rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 500;
|
||||
transition: all var(--motion-fast) var(--easing-standard);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* Next Section */
|
||||
.demo-next {
|
||||
padding: 3rem 0;
|
||||
|
|
|
|||
|
|
@ -327,8 +327,8 @@ import PublicLayout from '../layouts/PublicLayout.astro';
|
|||
with pre-populated communities and governance history.
|
||||
</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="/demo" class="btn-primary">Explore the Demo</a>
|
||||
<a href="/docs" class="btn-secondary">Read Documentation</a>
|
||||
<a href="/demo" class="ui-btn ui-btn-primary ui-btn-lg">Explore the Demo</a>
|
||||
<a href="/docs" class="ui-btn ui-btn-secondary ui-btn-lg">Read Documentation</a>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
|
@ -642,39 +642,4 @@ import PublicLayout from '../layouts/PublicLayout.astro';
|
|||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
display: inline-block;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
padding: 1rem 2rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
transition: all var(--motion-fast) var(--easing-standard);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--color-primary-hover);
|
||||
color: var(--color-on-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
padding: 1rem 2rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
transition: all var(--motion-fast) var(--easing-standard);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ import PublicLayout from '../layouts/PublicLayout.astro';
|
|||
A complete governance layer for complex, distributed organizations.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="/demo" class="btn-primary">Explore the Demo</a>
|
||||
<a href="/about" class="btn-secondary">Learn More</a>
|
||||
<a href="/demo" class="ui-btn ui-btn-primary ui-btn-lg">Explore the Demo</a>
|
||||
<a href="/about" class="ui-btn ui-btn-secondary ui-btn-lg">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -191,8 +191,8 @@ import PublicLayout from '../layouts/PublicLayout.astro';
|
|||
<h2>Experience Governance in Action</h2>
|
||||
<p>The best way to understand Likwid is to see it working. Explore our demo instance with pre-populated communities, ongoing decisions, and real governance history.</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="/demo" class="btn-primary btn-large">Explore the Demo</a>
|
||||
<a href="/manifesto" class="btn-secondary btn-large">Read the Manifesto</a>
|
||||
<a href="/demo" class="ui-btn ui-btn-primary ui-btn-xl">Explore the Demo</a>
|
||||
<a href="/manifesto" class="ui-btn ui-btn-secondary ui-btn-xl">Read the Manifesto</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -240,53 +240,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
padding: 0.875rem 1.75rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
font-size: 0.9375rem;
|
||||
transition: all var(--motion-fast) var(--easing-standard);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--color-primary-hover);
|
||||
color: var(--color-text-inverse);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(129, 140, 248, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
padding: 0.875rem 1.75rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 500;
|
||||
font-size: 0.9375rem;
|
||||
transition: all var(--motion-fast) var(--easing-standard);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
border-color: var(--color-text-muted);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
padding: 1rem 2.5rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
/* Section Styling */
|
||||
section {
|
||||
padding: 4rem 2rem;
|
||||
|
|
|
|||
|
|
@ -227,8 +227,8 @@ import PublicLayout from '../layouts/PublicLayout.astro';
|
|||
</section>
|
||||
|
||||
<section class="manifesto-cta">
|
||||
<a href="/demo" class="btn-primary">Explore the Demo</a>
|
||||
<a href="/about" class="btn-secondary">Learn More About Likwid</a>
|
||||
<a href="/demo" class="ui-btn ui-btn-primary ui-btn-lg">Explore the Demo</a>
|
||||
<a href="/about" class="ui-btn ui-btn-secondary ui-btn-lg">Learn More About Likwid</a>
|
||||
</section>
|
||||
</article>
|
||||
</PublicLayout>
|
||||
|
|
@ -405,41 +405,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
display: inline-block;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-on-primary);
|
||||
padding: 1rem 2rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
transition: all var(--motion-fast) var(--easing-standard);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--color-primary-hover);
|
||||
color: var(--color-on-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
padding: 1rem 2rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
transition: all var(--motion-fast) var(--easing-standard);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.page-header h1 {
|
||||
font-size: 2.25rem;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { API_BASE as apiBase } from '../lib/api';
|
|||
<section class="notifications-page">
|
||||
<div class="header-row">
|
||||
<h1>Notifications</h1>
|
||||
<button id="mark-all-read" class="btn-secondary">Mark All Read</button>
|
||||
<button id="mark-all-read" class="ui-btn ui-btn-secondary" type="button">Mark All Read</button>
|
||||
</div>
|
||||
|
||||
<div id="notifications-list" class="notifications-list">
|
||||
|
|
@ -110,20 +110,6 @@ import { API_BASE as apiBase } from '../lib/api';
|
|||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text);
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.notifications-list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
|
|
|
|||
Loading…
Reference in a new issue