swcs/cap

Files

T

Tiago 1debc51c7c update repo username

2025-08-28 11:40:46 +01:00

2.0 KiB

Raw Blame History

Demo

<style> .login-form { width: 300px; border: 1px solid var(--vp-c-divider); display: flex; flex-direction: column; border-radius: 8px; margin-top: 1em; } .login-form .input { display: flex; flex-direction: column; cursor: text; transition: box-shadow .2s; } .login-form .input:has(input:focus) { box-shadow: 0 0 0 .25rem rgba(38, 181, 250, .25); } .login-form label { font-weight: 500; opacity: .65; padding-left: .75rem; padding-top: .375rem; font-size: 13px; } .login-form input { font-size: 16px; padding: .375rem .75rem; padding-top: 0px; font-family: inherit; } .signin-button { font-size: 1.25rem; width: 300px; background-color: var(--vp-c-brand-1); height: 48px; color: #1B1B1F; border-radius: 8px; font-weight: 500; transition: filter .2s; margin-bottom: 1em; } .signin-button:hover { filter: brightness(90%) } .signin-button:active { filter: brightness(80%) } .signin-button:not(.active) { opacity: .7; pointer-events: none; filter: grayscale(1); } </style>

Username

Password

Sign in

You can find more demos in the GitHub repo. Note that this demo is not a full implementation of Cap and uses a placeholder server.

Note that the widget is also fully customizable! If you don't like how it looks, you can use CSS variables to change just about everything.