Polish sign-in page for better visual hierarchy
- Force auth title onto two lines consistently for cleaner presentation - Round card and button corners for a softer, modern look - Add hover motion and larger touch target on submit button - Add visible keyboard focus styles for auth controls Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -10,7 +10,10 @@
|
||||
<section id="auth-screen" aria-labelledby="auth-title">
|
||||
<div class="auth-card">
|
||||
<p class="eyebrow">FAKTUROVAČ</p>
|
||||
<h1 id="auth-title">Vaše faktury, bezpečně po ruce.</h1>
|
||||
<h1 id="auth-title">
|
||||
<span>Vaše faktury,</span>
|
||||
<span>bezpečně po ruce.</span>
|
||||
</h1>
|
||||
<p class="auth-intro">Spravujte faktury přehledně.</p>
|
||||
<form id="auth-form">
|
||||
<div class="form-group">
|
||||
|
||||
@@ -37,6 +37,7 @@ body {
|
||||
padding: clamp(1.75rem, 5vw, 3.5rem);
|
||||
background: var(--paper);
|
||||
border: 1px solid rgba(24, 59, 86, 0.12);
|
||||
border-radius: 1rem;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
@@ -57,6 +58,10 @@ body {
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.auth-card h1 span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.auth-intro {
|
||||
margin: 1.25rem 0 2rem;
|
||||
color: var(--muted-ink);
|
||||
@@ -74,18 +79,21 @@ body {
|
||||
|
||||
#authSubmitButton {
|
||||
margin-top: 0.5rem;
|
||||
min-height: 3rem;
|
||||
padding: 0.8rem 1rem;
|
||||
color: #fff;
|
||||
background: var(--navy);
|
||||
border: 0;
|
||||
border-radius: 0.25rem;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
transition: background-color 160ms ease, transform 160ms ease;
|
||||
}
|
||||
|
||||
#authSubmitButton:hover:not(:disabled) {
|
||||
background: var(--blue);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.text-button {
|
||||
@@ -99,6 +107,12 @@ body {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-button:focus-visible,
|
||||
#authSubmitButton:focus-visible {
|
||||
outline: 3px solid rgba(43, 111, 143, 0.3);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.text-button:hover {
|
||||
color: var(--navy);
|
||||
text-decoration: underline;
|
||||
|
||||
Reference in New Issue
Block a user