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;
|
||||
}
|
||||
|
||||
.btn-group .btn {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Message page
|
||||
============================================================ */
|
||||
|
|
@ -290,6 +294,76 @@ body {
|
|||
============================================================ */
|
||||
.form-field altcha-widget {
|
||||
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