letro/letro-authentication-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

rebranding html templates and styles

Browse Source
This commit is contained in:
Letro Bot
2026-04-03 17:30:09 +03:30
parent dc3133021f
commit 1bad9bdb7c
15 changed files with 310 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@@ -13,7 +13,7 @@ Please see LICENSE files in the repository root for full details.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>matrix-authentication-service</title>
<title>letro-authentication-service</title>
<script type="application/javascript">
window.APP_CONFIG = JSON.parse(
'{"root": "/account/", "graphqlEndpoint": "/graphql"}',

17
frontend/src/components/PageHeading/PageHeading.module.css
View File

@@ -48,6 +48,19 @@
}
}
& .brand-logo {
display: flex;
align-items: center;
justify-content: center;
align-self: center;
margin-block-end: var(--cpd-space-1x);
& svg {
display: block;
block-size: auto;
}
}
& .header {
display: flex;
flex-direction: column;
@@ -78,5 +91,9 @@
@media screen and (min-width: 768px) {
.page-heading {
margin-block-start: var(--cpd-space-8x);
& .brand-logo {
margin-block-end: var(--cpd-space-2x);
}
}
}

1
frontend/src/entrypoints/templates.css
View File

@@ -17,6 +17,7 @@
@import "../components/Layout/Layout.module.css";
@import "../components/Footer/Footer.module.css";
@import "../components/PageHeading/PageHeading.module.css";
@import "../styles/brand-theme.css";
.cpd-text-body-lg-regular {
font: var(--cpd-font-body-lg-regular);

23
frontend/src/entrypoints/templates.ts
View File

@@ -96,3 +96,26 @@ for (const element of document.querySelectorAll<HTMLInputElement>(
)) {
patchUsernameInput(element);
}
function patchDisableSubmitUntilValid(formElement: HTMLFormElement) {
const submitButton = formElement.querySelector<HTMLButtonElement>(
'.cpd-button[data-kind="primary"][type="submit"]',
);
if (!submitButton) return;
const syncDisabledState = () => {
submitButton.disabled = !formElement.checkValidity();
};
syncDisabledState();
formElement.addEventListener("input", syncDisabledState);
formElement.addEventListener("change", syncDisabledState);
}
for (const formElement of document.querySelectorAll<HTMLFormElement>(
"form[data-disable-submit-until-valid]",
)) {
patchDisableSubmitUntilValid(formElement);
}

95
frontend/src/styles/brand-theme.css Normal file
View File

@@ -0,0 +1,95 @@
/* Copyright 2026 New Vector Ltd.
*
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
* Please see LICENSE files in the repository root for full details.
*/
:root {
--brand-color-accent: #D51C0B;
--brand-input-background: #F4F4F4;
--brand-input-background-autofill: #EEF3FA;
--brand-link-muted: #696B7799;
--brand-link-muted-hover: #55565E;
--brand-link-muted-active: #292A2D;
--brand-primary-gradient: linear-gradient(45deg, #C20000 6.43%, #C30300 19.99%, #C60E00 32.57%, #CB2000 45.16%, #D33900 56.78%, #DD5A00 67.43%, #E98200 79.04%, #F7B000 89.69%, #FFC800 94.53%);
}
.cpd-text-control {
background: var(--brand-input-background);
border-color: transparent;
}
.cpd-text-control:-webkit-autofill,
.cpd-text-control:-webkit-autofill:hover,
.cpd-text-control:-webkit-autofill:focus,
.cpd-text-control:-webkit-autofill:active {
-webkit-text-fill-color: var(--cpd-color-text-primary);
-webkit-box-shadow: 0 0 0 1000px var(--brand-input-background-autofill) inset;
box-shadow: 0 0 0 1000px var(--brand-input-background-autofill) inset;
background-color: var(--brand-input-background-autofill);
border-color: transparent;
transition: background-color 99999s ease-out 0s;
}
.cpd-text-control:-webkit-autofill:not(:hover):not(:focus):not(:active) {
border-color: transparent;
}
@media (hover) {
.cpd-text-control:hover {
border-color: var(--brand-color-accent);
}
}
.cpd-text-control:active {
border-color: var(--brand-color-accent);
}
.cpd-text-control:focus,
.cpd-text-control:focus-visible {
outline: 2px solid color-mix(in srgb, var(--brand-color-accent) 20%, white);
outline-offset: 0;
border-color: var(--brand-color-accent);
}
.cpd-button[data-kind="primary"]:not(.destructive) {
background: var(--brand-primary-gradient);
border-width: 0;
}
@media (hover) {
.cpd-button[data-kind="primary"]:not(.destructive):hover {
filter: brightness(1.03);
}
}
.cpd-button[data-kind="primary"]:not(.destructive):active,
.cpd-button[data-kind="primary"]:not(.destructive)[aria-expanded="true"] {
filter: brightness(0.96);
}
.cpd-button[data-kind="primary"]:not(.destructive)[disabled] {
filter: none;
}
.login-page .cpd-link[data-kind="primary"] {
color: var(--brand-link-muted);
}
@media (hover) {
.login-page .cpd-link[data-kind="primary"]:hover {
color: var(--brand-link-muted-hover);
background: transparent;
}
}
.login-page .cpd-link[data-kind="primary"]:active {
color: var(--brand-link-muted-active);
background: transparent;
}
[data-disable-submit-until-valid] .cpd-button[type="submit"][data-kind="primary"][disabled] {
cursor: not-allowed;
filter: grayscale(0.2);
opacity: 0.55;
}