mirror of
https://forgejo.ellis.link/continuwuation/continuwuity.git
synced 2026-05-26 20:49:55 +00:00
feat: Merge ginger/oauth
This commit is contained in:
@@ -0,0 +1,22 @@
|
||||
html {
|
||||
height: 100svh;
|
||||
--bg: oklch(0.44 0.177 353.06);
|
||||
background-color: var(--bg);
|
||||
background-image: linear-gradient(180deg, var(--bg) 55%, black 100%);;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-top: 20vh;
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
font-size: 1.3em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
em {
|
||||
font-size: 1.35em;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -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,8 +27,8 @@
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color-scheme: dark;
|
||||
--text-color: #fff;
|
||||
--secondary: #888;
|
||||
--text-color: #f5ebeb;
|
||||
--secondary: #999;
|
||||
--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,33 @@ footer {
|
||||
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
|
||||
a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
section {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
em {
|
||||
color: oklch(from var(--c2) var(--name-lightness) c h);
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
|
||||
&.negative {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border-width: 1px;
|
||||
border-color: var(--secondary);
|
||||
}
|
||||
|
||||
small {
|
||||
@@ -103,39 +129,59 @@ small.error {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.panel {
|
||||
--preferred-width: 12rem + 40dvw;
|
||||
--maximum-width: 48rem;
|
||||
|
||||
width: min(clamp(24rem, var(--preferred-width), var(--maximum-width)), calc(100dvw - 3rem));
|
||||
border-radius: var(--border-radius-lg);
|
||||
background-color: var(--panel-bg);
|
||||
padding-inline: 1.5rem;
|
||||
padding-block: 1rem;
|
||||
box-shadow: 0 0.25em 0.375em hsla(0, 0%, 0%, 0.1);
|
||||
img.matrix-icon {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
filter: invert();
|
||||
}
|
||||
}
|
||||
|
||||
&.narrow {
|
||||
--preferred-width: 12rem + 20dvw;
|
||||
--maximum-width: 36rem;
|
||||
h1.with-matrix-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
input, button {
|
||||
width: 100%;
|
||||
a:last-of-type {
|
||||
margin-left: auto;
|
||||
|
||||
img {
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
h1 a.back {
|
||||
font-size: initial;
|
||||
font-weight: initial;
|
||||
}
|
||||
|
||||
input, button {
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
color: oklch(from var(--c1) var(--name-lightness) c h);
|
||||
}
|
||||
|
||||
code {
|
||||
color: oklch(from var(--secondary) var(--name-lightness) c h);
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: oklch(from var(--panel-bg) calc(l - 0.05) c h);
|
||||
border-radius: var(--border-radius-sm);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
input, button, a.button {
|
||||
display: inline-block;
|
||||
padding: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
color: white;
|
||||
line-height: normal;
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
|
||||
border: none;
|
||||
@@ -151,14 +197,36 @@ input {
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
input[type="checkbox"] {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
button, a.button {
|
||||
color: white;
|
||||
background-color: var(--c1);
|
||||
transition: opacity .2s;
|
||||
text-align: center;
|
||||
margin: 0.5rem 0;
|
||||
|
||||
&:enabled:hover {
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: lightgray;
|
||||
background-color: gray;
|
||||
}
|
||||
|
||||
&:not(:disabled) {
|
||||
transition: linear color, background-color 0.1s;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -166,6 +234,77 @@ h1 {
|
||||
margin-bottom: 0.67em;
|
||||
}
|
||||
|
||||
ul.bullet-separated {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
flex: 1;
|
||||
list-style-type: none;
|
||||
|
||||
&:not(:first-child)::before {
|
||||
content: "• ";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fullwidth {
|
||||
width: 100%;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.select-all {
|
||||
user-select: all;
|
||||
}
|
||||
|
||||
.panel {
|
||||
--preferred-width: 12rem + 40dvw;
|
||||
--maximum-width: 48rem;
|
||||
--minimum-width: 32rem;
|
||||
|
||||
width: min(clamp(var(--minimum-width), var(--preferred-width), var(--maximum-width)), calc(100dvw - 3rem));
|
||||
border-radius: var(--border-radius-lg);
|
||||
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, a.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.narrow) form p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.project-name {
|
||||
font-weight: bold;
|
||||
text-decoration: none !important;
|
||||
background: linear-gradient(
|
||||
130deg,
|
||||
oklch(from var(--c1) var(--name-lightness) c h),
|
||||
oklch(from var(--c2) var(--name-lightness) c h)
|
||||
);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
@media (max-width: 425px) {
|
||||
main {
|
||||
padding-block-start: 2rem;
|
||||
@@ -175,11 +314,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 {
|
||||
.red-avatar {
|
||||
--avatar-color: var(--c1);
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
@@ -29,16 +34,26 @@
|
||||
.info {
|
||||
flex: 1 1;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
.name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.display-name {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
color: var(--secondary);
|
||||
}
|
||||
.id {
|
||||
color: var(--secondary);
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&.danger {
|
||||
display: block;
|
||||
background-color: oklch(from red 0.2 c h);
|
||||
border: 1px dashed red;
|
||||
}
|
||||
}
|
||||
|
||||
.card-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@@ -2,12 +2,19 @@
|
||||
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;
|
||||
background: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
.avatars {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.separator {
|
||||
align-self: center;
|
||||
margin-inline: 1em;
|
||||
color: var(--secondary);
|
||||
font-size: x-large;
|
||||
font-weight: bold;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.identity {
|
||||
margin-block: 1em;
|
||||
color: var(--secondary);
|
||||
font-size: small;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -1,11 +1,3 @@
|
||||
.project-name {
|
||||
text-decoration: none;
|
||||
background: linear-gradient(
|
||||
130deg,
|
||||
oklch(from var(--c1) var(--name-lightness) c h),
|
||||
oklch(from var(--c2) var(--name-lightness) c h)
|
||||
);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
filter: brightness(1.2);
|
||||
.button {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
.centered-links {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
:last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.text-rule {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.text-rule::before, .text-rule::after {
|
||||
content: '';
|
||||
flex: 1;
|
||||
border-bottom: 1px solid var(--secondary);
|
||||
}
|
||||
|
||||
.text-rule:not(:empty)::before {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.text-rule:not(:empty)::after {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.username-input {
|
||||
display: flex;
|
||||
padding: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
line-height: 1;
|
||||
|
||||
border-radius: var(--border-radius-sm);
|
||||
border: 2px solid var(--secondary);
|
||||
|
||||
&:has(input:focus-visible) {
|
||||
outline: 2px solid var(--c1);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 0;
|
||||
color: var(--secondary);
|
||||
|
||||
&:first-of-type {
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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