Tiago
87 lines
2.0 KiB
Markdown
87 lines
2.0 KiB
Markdown
# 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>
|
|
|
|
<div class="login-form">
|
|
<div class="input" style="border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:1px solid var(--vp-c-divider);">
|
|
<label for="username">Username</label>
|
|
<input id="username" placeholder="example" autocomplete="off" />
|
|
</div>
|
|
|
|
<div class="input" style="border-bottom-left-radius:8px;border-bottom-right-radius:8px;">
|
|
<label for="password">Password</label>
|
|
<input type="password" id="pass" autocomplete="off" readonly="" value="Password123!" />
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 1rem;--cap-widget-width:300px;">
|
|
<Demo />
|
|
</div>
|
|
|
|
<button class="signin-button" onclick="alert('Success!')">Sign in</button>
|
|
|
|
You can find more demos [in the GitHub repo](https://github.com/tiagorangel1/cap/tree/main/demo). 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.
|