162 lines
3.4 KiB
CSS
162 lines
3.4 KiB
CSS
/* assets/css/login.css
|
|
Login-Layout im Stil von style.css (dunkler Hintergrund + helle Cards)
|
|
*/
|
|
|
|
:root{
|
|
/* nutzt eure globalen Farben aus style.css, mit Fallbacks */
|
|
--gh-bg: var(--bg-main, #151923);
|
|
--gh-card: var(--bg-card, #ffffff);
|
|
--gh-header: var(--bg-header, #1f2937);
|
|
|
|
--gh-text: var(--text-main, #151c2e);
|
|
--gh-muted: var(--text-muted, #6b7280);
|
|
--gh-border: var(--border-color, #e5e7eb);
|
|
|
|
--gh-primary: var(--color-primary, #2563eb);
|
|
--gh-primary-hover: var(--color-primary-hover, #1d4ed8);
|
|
|
|
--gh-danger: #d92d20;
|
|
|
|
--gh-radius: var(--radius-lg, 16px);
|
|
--gh-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,0.08));
|
|
|
|
--gh-transition-fast: var(--transition-fast, 150ms ease);
|
|
--gh-transition-normal: var(--transition-normal, 250ms ease);
|
|
|
|
--gh-focus: 0 0 0 4px rgba(37, 99, 235, 0.28);
|
|
}
|
|
|
|
/* Wir stylen nur innerhalb des Login-Bereichs, damit global nichts kaputtgeht */
|
|
.auth{
|
|
min-height: calc(100svh - 56px);
|
|
padding: 34px 18px 60px;
|
|
background: var(--gh-bg);
|
|
color: var(--gh-text);
|
|
}
|
|
|
|
.auth__card,
|
|
.auth__sideCard{
|
|
background: var(--gh-card);
|
|
border: 1px solid var(--gh-border);
|
|
border-radius: var(--gh-radius);
|
|
box-shadow: var(--gh-shadow);
|
|
}
|
|
|
|
.auth__title{
|
|
margin: 0;
|
|
font-size: 1.55rem;
|
|
letter-spacing: 0.2px;
|
|
color: var(--gh-text);
|
|
}
|
|
|
|
.auth__subtitle{
|
|
margin: 0;
|
|
color: var(--gh-muted);
|
|
font-size: 0.98rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.auth__field label{
|
|
display: block;
|
|
margin: 0 0 6px;
|
|
font-size: 0.85rem;
|
|
color: var(--gh-muted);
|
|
}
|
|
|
|
.auth__field input[type="text"],
|
|
.auth__field input[type="password"]{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0.75rem 0.8rem;
|
|
border: 1px solid var(--gh-border);
|
|
border-radius: var(--radius-sm, 6px);
|
|
background: #ffffff;
|
|
color: var(--gh-text);
|
|
outline: none;
|
|
transition: border-color var(--gh-transition-fast), box-shadow var(--gh-transition-fast);
|
|
}
|
|
|
|
.auth__field input[type="text"]:focus,
|
|
.auth__field input[type="password"]:focus{
|
|
border-color: rgba(37, 99, 235, 0.75);
|
|
box-shadow: var(--gh-focus);
|
|
}
|
|
|
|
.auth__submit{
|
|
width: 100%;
|
|
padding: 0.75rem 0.8rem;
|
|
border: 0;
|
|
border-radius: var(--radius-sm, 6px);
|
|
background: var(--gh-primary);
|
|
color: #ffffff;
|
|
font-weight: 650;
|
|
cursor: pointer;
|
|
transition: background var(--gh-transition-fast), transform var(--gh-transition-fast);
|
|
}
|
|
|
|
.auth__submit:hover{
|
|
background: var(--gh-primary-hover);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.auth__submit:active{
|
|
transform: translateY(0px);
|
|
}
|
|
|
|
.auth__muted{
|
|
margin: 8px 0 0;
|
|
color: var(--gh-muted);
|
|
}
|
|
|
|
.auth__muted a{
|
|
color: var(--gh-primary);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.auth__muted a:hover{
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.auth__sideCard{
|
|
padding: 18px;
|
|
}
|
|
|
|
.auth__tip{
|
|
margin-top: 14px;
|
|
padding: 12px 12px;
|
|
border-radius: var(--radius-md, 10px);
|
|
background: #f3f4f6;
|
|
border: 1px solid var(--gh-border);
|
|
color: var(--gh-text);
|
|
}
|
|
|
|
@media (max-width: 900px){
|
|
.auth__grid{
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.auth__logo{
|
|
width: 120px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 520px){
|
|
.auth{
|
|
padding-top: 18px;
|
|
}
|
|
|
|
.auth__card{
|
|
padding: 18px;
|
|
}
|
|
|
|
.auth__header{
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.auth__logo{
|
|
width: 140px;
|
|
grid-row: auto;
|
|
}
|
|
}
|