style: improve altcha widget integration and button alignment
Some checks reported errors
continuous-integration/drone/push Build was killed
Some checks reported errors
continuous-integration/drone/push Build was killed
- Style altcha widget to match theme using CSS variables (border, background, colors, dark mode) - Make buttons in .btn-group stretch full width to align with inputs - Center altcha widget with max-width: 100% Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
121efb6b62
commit
e64db9d923
1 changed files with 74 additions and 0 deletions
|
|
@ -272,6 +272,10 @@ body {
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-group .btn {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
/* ============================================================
|
/* ============================================================
|
||||||
Message page
|
Message page
|
||||||
============================================================ */
|
============================================================ */
|
||||||
|
|
@ -290,6 +294,76 @@ body {
|
||||||
============================================================ */
|
============================================================ */
|
||||||
.form-field altcha-widget {
|
.form-field altcha-widget {
|
||||||
display: block;
|
display: block;
|
||||||
|
max-width: 100% !important;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-field altcha-widget .altcha {
|
||||||
|
background: var(--input-bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: var(--text);
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-field altcha-widget .altcha-main {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 0.625rem 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-field altcha-widget .altcha-checkbox {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-field altcha-widget .altcha-checkbox input[type="checkbox"] {
|
||||||
|
width: 1.125rem;
|
||||||
|
height: 1.125rem;
|
||||||
|
accent-color: var(--btn-primary-bg);
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-field altcha-widget .altcha-label {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-field altcha-widget .altcha-label label {
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-field altcha-widget .altcha-logo {
|
||||||
|
color: var(--text-muted);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
transition: color .15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-field altcha-widget .altcha-logo:hover {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-field altcha-widget .altcha-footer {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
padding: 0.35rem 0.875rem;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
background: var(--btn-secondary-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-field altcha-widget .altcha-footer a {
|
||||||
|
color: var(--btn-primary-bg);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-field altcha-widget .altcha-footer a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================================
|
/* ============================================================
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue