1 files changed, 214 insertions, 0 deletions
diff --git a/src/server/wwwroot/login.css b/src/server/wwwroot/login.css
new file mode 100644
index 0000000..102af37
--- /dev/null
+++ b/src/server/wwwroot/login.css
@@ -0,0 +1,214 @@
+:root {
+    --form-control-padding-x: var(--space-sm);
+    --form-control-padding-y: var(--space-xs);
+    --form-control-radius: 0.25em;
+    --checkbox-radio-size: 1em;
+    --checkbox-radio-translate-y: 0.15em;
+    --checkbox-radio-gap: var(--space-xxxs);
+    --checkbox-radio-border-width: 2px;
+    --checkbox-radio-line-height: var(--body-line-height);
+    --radio-marker-size: 8px;
+    --checkbox-marker-size: 12px;
+    --checkbox-radius: 0.185em;
+}
+.form-control {
+    background-color: var(--color-bg);
+    border: 2px solid var(--color-contrast-low);
+    transition: 0.3s;
+}
+.form-control::placeholder {
+    opacity: 1;
+    color: var(--color-contrast-medium);
+}
+.form-control:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 2px alpha(var(--color-primary), 0.2);
+}
+.form-control[aria-invalid="true"] {
+    border-color: var(--color-error);
+}
+.form-control[aria-invalid="true"]:focus {
+    box-shadow: 0 0 0 2px alpha(var(--color-error), 0.2);
+}
+.form-control[disabled] {
+    filter: opacity(0.8);
+}
+.form-control[disabled],
+.form-control[readonly] {
+    cursor: not-allowed;
+}
+.form-legend {
+    font-size: var(--text-md);
+}
+.form-label {
+    font-size: var(--text-sm);
+}
+
+.radio,
+.checkbox {
+    position: absolute;
+    margin: 0 !important;
+    padding: 0 !important;
+    opacity: 0;
+    height: 0;
+    width: 0;
+    pointer-events: none;
+}
+.radio + label,
+.checkbox + label {
+    display: inline-block;
+    display: inline-flex;
+    align-items: baseline;
+    line-height: var(--checkbox-radio-line-height);
+    user-select: none;
+    cursor: pointer;
+}
+.radio + label::before,
+.checkbox + label::before {
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    flex-shrink: 0;
+    width: var(--checkbox-radio-size);
+    height: var(--checkbox-radio-size);
+    background-color: var(--color-bg);
+    border-width: var(--checkbox-radio-border-width);
+    border-color: var(--color-contrast-low);
+    border-style: solid;
+    margin-right: var(--checkbox-radio-gap);
+    background-repeat: no-repeat;
+    background-position: center;
+    transition: transform 0.2s, border 0.2s;
+}
+.radio:not(:checked):not(:focus) + label:hover::before,
+.checkbox:not(:checked):not(:focus) + label:hover::before {
+    border-color: var(--color-contrast-medium);
+}
+@supports (grid-area: auto) {
+    .radio + label::before,
+    .checkbox + label::before {
+        position: relative;
+        top: var(--checkbox-radio-translate-y);
+    }
+}
+.radio + label::before {
+    border-radius: 50%;
+}
+.checkbox + label::before {
+    border-radius: var(--checkbox-radius);
+}
+.radio:checked + label::before,
+.checkbox:checked + label::before {
+    background-color: var(--color-primary);
+    box-shadow: none;
+    border-color: var(--color-primary);
+    transition: transform 0.2s;
+}
+.radio:active + label::before,
+.checkbox:active + label::before {
+    transform: scale(0.8);
+    transition: transform 0.2s;
+}
+.radio:checked:active + label::before,
+.checkbox:checked:active + label::before {
+    transform: none;
+    transition: none;
+}
+.radio:checked + label::before {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg class='nc-icon-wrapper' fill='%23ffffff'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ffffff'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
+    background-size: var(--radio-marker-size);
+}
+.checkbox:checked + label::before {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg class='nc-icon-wrapper' stroke-width='2' fill='%23ffffff' stroke='%23ffffff'%3E%3Cpolyline fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='1,9 5,13 15,3 ' data-cap='butt'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E");
+    background-size: var(--checkbox-marker-size);
+}
+.radio:checked:active + label::before,
+.checkbox:checked:active + label::before,
+.radio:focus + label::before,
+.checkbox:focus + label::before {
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px alpha(var(--color-primary), 0.2);
+}
+.radio--bg + label,
+.checkbox--bg + label {
+    padding: var(--space-xxxxs) var(--space-xxxs);
+    border-radius: var(--radius-md);
+    transition: background 0.2s;
+}
+.radio--bg + label:hover,
+.checkbox--bg + label:hover {
+    background-color: var(--color-contrast-lower);
+}
+.radio--bg:active + label,
+.checkbox--bg:active + label,
+.radio--bg:focus + label,
+.checkbox--bg:focus + label {
+    background-color: alpha(var(--color-primary), 0.1);
+}
+.alert {
+    padding: var(--space-xs) var(--space-sm);
+    background-color: alpha(var(--color-primary), 0.2);
+    border-radius: var(--radius-md);
+    color: var(--color-contrast-higher);
+    margin: var(--space-sm) 0;
+    position: absolute;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+}
+.alert__link {
+    color: inherit;
+    text-decoration: underline;
+}
+.alert__close-btn {
+    display: inline-block;
+    flex-shrink: 0;
+    margin-left: var(--space-sm);
+}
+.alert__close-btn .icon {
+    display: block;
+}
+.alert--success {
+    background-color: alpha(var(--color-success), 0.2);
+}
+.alert--error {
+    background-color: alpha(var(--color-error), 0.2);
+}
+.alert--warning {
+    background-color: alpha(var(--color-warning), 0.2);
+}
+.alert--is-visible {
+    position: static;
+    clip: auto;
+    clip-path: none;
+}
+.btn .btn__content-a {
+    display: inline-flex;
+}
+.btn .btn__content-b {
+    display: none;
+}
+.btn__content-a, .btn__content-b {
+    align-items: center;
+}
+.btn--state-b .btn__content-a {
+    display: none;
+}
+.btn--state-b .btn__content-b {
+    display: inline-block;
+    display: inline-flex;
+}
+/* preserve button width when switching from state A to state B */
+.btn--preserve-width .btn__content-b {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+}
+.btn--preserve-width.btn--state-b .btn__content-a {
+    display: inline-block;
+    display: inline-flex;
+    visibility: hidden;
+}