mirror of
https://forgejo.ellis.link/continuwuation/continuwuity.git
synced 2026-05-26 20:49:55 +00:00
feat: Implement a web-based account management dashboard
This commit is contained in:
Ginger
@@ -9,6 +9,7 @@
|
||||
--panel-bg: oklch(0.91 0.042 317.27);
|
||||
--c1: oklch(0.44 0.177 353.06);
|
||||
--c2: oklch(0.59 0.158 150.88);
|
||||
--avatar-color: var(--c2);
|
||||
|
||||
--name-lightness: 0.45;
|
||||
--background-lightness: 0.9;
|
||||
@@ -26,7 +27,7 @@
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color-scheme: dark;
|
||||
--text-color: #fff;
|
||||
--text-color: #f5ebeb;
|
||||
--secondary: #888;
|
||||
--bg: oklch(0.15 0.042 317.27);
|
||||
--panel-bg: oklch(0.24 0.03 317.27);
|
||||
@@ -54,10 +55,13 @@
|
||||
}
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
min-height: 100vh;
|
||||
|
||||
color: var(--text-color);
|
||||
@@ -73,6 +77,7 @@ html {
|
||||
|
||||
footer {
|
||||
padding-inline: 0.25rem;
|
||||
margin-top: 1rem;
|
||||
height: max(fit-content, 2rem);
|
||||
|
||||
.logo {
|
||||
@@ -83,12 +88,24 @@ footer {
|
||||
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
|
||||
a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
em {
|
||||
color: oklch(from var(--c2) var(--name-lightness) c h);
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
|
||||
&.negative {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
@@ -112,34 +129,79 @@ small.error {
|
||||
background-color: var(--panel-bg);
|
||||
padding-inline: 1.5rem;
|
||||
padding-block: 1rem;
|
||||
margin-top: 1em;
|
||||
margin-bottom: auto;
|
||||
box-shadow: 0 0.25em 0.375em hsla(0, 0%, 0%, 0.1);
|
||||
|
||||
&.middle {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.narrow {
|
||||
--preferred-width: 12rem + 20dvw;
|
||||
--maximum-width: 36rem;
|
||||
|
||||
input, button {
|
||||
input, button, a.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.narrow) form p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
img.matrix-icon {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
filter: invert();
|
||||
}
|
||||
}
|
||||
|
||||
h1.with-matrix-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
a:last-of-type {
|
||||
margin-left: auto;
|
||||
|
||||
img {
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 a.back {
|
||||
font-size: initial;
|
||||
font-weight: initial;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, button {
|
||||
a, a:visited {
|
||||
color: oklch(from var(--c1) var(--name-lightness) c h);
|
||||
}
|
||||
|
||||
input, button, a.button {
|
||||
display: inline-block;
|
||||
padding: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
line-height: normal;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
|
||||
border: none;
|
||||
border-radius: var(--border-radius-sm);
|
||||
|
||||
&:visited {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
@@ -151,14 +213,29 @@ input {
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
input[type="checkbox"] {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button, a.button {
|
||||
background-color: var(--c1);
|
||||
transition: opacity .2s;
|
||||
text-align: center;
|
||||
|
||||
&:enabled:hover {
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: lightgray;
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
&:not(:disabled) {
|
||||
transition: linear color, background-color 0.1s;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -166,6 +243,11 @@ h1 {
|
||||
margin-bottom: 0.67em;
|
||||
}
|
||||
|
||||
.fullwidth {
|
||||
width: 100%;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
@media (max-width: 425px) {
|
||||
main {
|
||||
padding-block-start: 2rem;
|
||||
@@ -175,11 +257,12 @@ h1 {
|
||||
.panel {
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 799px) {
|
||||
input, button {
|
||||
input, button, a.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,12 +11,17 @@
|
||||
font-size: calc(var(--avatar-size) * 0.5);
|
||||
font-weight: 700;
|
||||
line-height: calc(var(--avatar-size) - 2px);
|
||||
user-select: none;
|
||||
|
||||
color: oklch(from var(--c1) calc(l + 0.2) c h);
|
||||
background-color: var(--c1);
|
||||
color: oklch(from var(--avatar-color) calc(l + 0.2) c h);
|
||||
background-color: var(--avatar-color);
|
||||
}
|
||||
|
||||
.user-card {
|
||||
.green-avatar {
|
||||
--avatar-color: var(--c1);
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
@@ -32,13 +37,21 @@
|
||||
p {
|
||||
margin: 0;
|
||||
|
||||
&.display-name {
|
||||
&.name {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
color: var(--secondary);
|
||||
}
|
||||
.id {
|
||||
color: var(--secondary);
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@@ -2,12 +2,18 @@
|
||||
font-family: monospace;
|
||||
font-size: x-small;
|
||||
font-weight: 700;
|
||||
transform: translate(1rem, 1.6rem);
|
||||
transform: translate(0rem, 2rem);
|
||||
color: var(--secondary);
|
||||
user-select: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
.reset-password {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: right;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 520 520" style="enable-background:new 0 0 520 520;" xml:space="preserve">
|
||||
<path d="M13.7,11.9v496.2h35.7V520H0V0h49.4v11.9H13.7z"/>
|
||||
<path d="M166.3,169.2v25.1h0.7c6.7-9.6,14.8-17,24.2-22.2c9.4-5.3,20.3-7.9,32.5-7.9c11.7,0,22.4,2.3,32.1,6.8
|
||||
c9.7,4.5,17,12.6,22.1,24c5.5-8.1,13-15.3,22.4-21.5c9.4-6.2,20.6-9.3,33.5-9.3c9.8,0,18.9,1.2,27.3,3.6c8.4,2.4,15.5,6.2,21.5,11.5
|
||||
c6,5.3,10.6,12.1,14,20.6c3.3,8.5,5,18.7,5,30.7v124.1h-50.9V249.6c0-6.2-0.2-12.1-0.7-17.6c-0.5-5.5-1.8-10.3-3.9-14.3
|
||||
c-2.2-4.1-5.3-7.3-9.5-9.7c-4.2-2.4-9.9-3.6-17-3.6c-7.2,0-13,1.4-17.4,4.1c-4.4,2.8-7.9,6.3-10.4,10.8c-2.5,4.4-4.2,9.4-5,15.1
|
||||
c-0.8,5.6-1.3,11.3-1.3,17v103.3h-50.9v-104c0-5.5-0.1-10.9-0.4-16.3c-0.2-5.4-1.3-10.3-3.1-14.9c-1.8-4.5-4.8-8.2-9-10.9
|
||||
c-4.2-2.7-10.3-4.1-18.5-4.1c-2.4,0-5.6,0.5-9.5,1.6c-3.9,1.1-7.8,3.1-11.5,6.1c-3.7,3-6.9,7.3-9.5,12.9c-2.6,5.6-3.9,13-3.9,22.1
|
||||
v107.6h-50.9V169.2H166.3z"/>
|
||||
<path d="M506.3,508.1V11.9h-35.7V0H520v520h-49.4v-11.9H506.3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,7 @@
|
||||
const SLOWDOWN_TIMEOUT = 5 * 1000;
|
||||
|
||||
document.querySelectorAll(".slowdown").forEach((element) => element.setAttribute("disabled", ""));
|
||||
|
||||
setTimeout(() => {
|
||||
document.querySelectorAll(".slowdown").forEach((element) => element.removeAttribute("disabled"));
|
||||
}, SLOWDOWN_TIMEOUT);
|
||||
Reference in New Issue
Block a user