gitea_admin/fabiennefoehn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify button styles

Browse Source
This commit is contained in:
Mathias Gläser
2026-03-22 19:49:56 +01:00
parent e6c9ad48cb
commit 00074e408f
2 changed files with 11 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -255,7 +255,7 @@
<div class="contact-item__label">E-Mail</div> <div class="contact-item__label">E-Mail</div>
<div class="contact-item__value">fabienne@fabiennefoehn.ch</div> <div class="contact-item__value">fabienne@fabiennefoehn.ch</div>
<button <button
class="copy-button" class="button button--dark copy-button"
type="button" type="button"
data-copy-value="fabienne@fabiennefoehn.ch" data-copy-value="fabienne@fabiennefoehn.ch"
aria-label="E-Mail kopieren" aria-label="E-Mail kopieren"
@@ -276,7 +276,7 @@
<div class="contact-item__label">Telefon</div> <div class="contact-item__label">Telefon</div>
<div class="contact-item__value">+41 78 600 14 11</div> <div class="contact-item__value">+41 78 600 14 11</div>
<button <button
class="copy-button" class="button button--dark copy-button"
type="button" type="button"
data-copy-value="+41 78 600 14 11" data-copy-value="+41 78 600 14 11"
aria-label="Telefonnummer kopieren" aria-label="Telefonnummer kopieren"

23
styles.css
View File

@@ -184,12 +184,15 @@ button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.55rem;
width: fit-content; width: fit-content;
min-width: 13rem; min-width: 13rem;
min-height: 4.25rem;
padding: 1rem 1.7rem; padding: 1rem 1.7rem;
border: 0; border: 0;
border-radius: var(--radius-button); border-radius: var(--radius-button);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
line-height: 1;
cursor: pointer; cursor: pointer;
transition: transform var(--transition-fast), box-shadow var(--transition-fast), transition: transform var(--transition-fast), box-shadow var(--transition-fast),
background var(--transition-fast); background var(--transition-fast);
@@ -197,15 +200,12 @@ button {
.button:hover, .button:hover,
.button:focus-visible, .button:focus-visible,
.copy-button:hover,
.copy-button:focus-visible,
.contact-flyover__close:hover, .contact-flyover__close:hover,
.contact-flyover__close:focus-visible { .contact-flyover__close:focus-visible {
transform: translateY(-1px); transform: translateY(-1px);
} }
.button:focus-visible, .button:focus-visible,
.copy-button:focus-visible,
.contact-flyover__close:focus-visible { .contact-flyover__close:focus-visible {
outline: 3px solid #ef49ae; outline: 3px solid #ef49ae;
outline-offset: 3px; outline-offset: 3px;
@@ -669,20 +669,13 @@ button {
.copy-button { .copy-button {
grid-column: 2; grid-column: 2;
grid-row: 1 / span 2; grid-row: 1 / span 2;
display: inline-flex; align-self: center;
align-items: center; justify-self: end;
gap: 0.55rem; min-width: 8.5rem;
padding: 0.8rem 1rem;
border: 0;
border-radius: 999px;
background: var(--bg-dark);
color: var(--bg-light);
white-space: nowrap; white-space: nowrap;
cursor: pointer;
transition: transform var(--transition-fast), background var(--transition-fast);
} }
.copy-button svg { .button svg {
width: 1.15rem; width: 1.15rem;
height: 1.15rem; height: 1.15rem;
fill: none; fill: none;
@@ -913,5 +906,7 @@ button {
grid-column: 1; grid-column: 1;
grid-row: auto; grid-row: auto;
justify-content: center; justify-content: center;
justify-self: stretch;
width: 100%;
} }
} }