wilson/language-learning-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

styles: [frontend] Add various form and btn components

Browse source
This commit is contained in:
wilson 2026-05-04 07:59:27 +01:00
parent d1243a1997
commit ae709ac8f2
1 changed files with 94 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
frontend/src/app.css
View file

@ -56,13 +56,39 @@
--colour-grey-950: #030712;
--colour-grey-1000: #000000;
/** Colour: Red palette, based on Material You's red palette */
--colour-red-50: #ffebee;
--colour-red-100: #ffcdd2;
--colour-red-200: #ef9a9a;
--colour-red-300: #e57373;
--colour-red-400: #ef5350;
--colour-red-500: #f44336;
--colour-red-600: #e53935;
--colour-red-700: #d32f2f;
--colour-red-800: #c62828;
--colour-red-900: #b71c1c;
--colour-red-950: #7f0000;
/** Colour: Green palette, based on Material You's green palette */
--colour-green-50: #e8f5e9;
--colour-green-100: #c8e6c9;
--colour-green-200: #a5d6a7;
--colour-green-300: #81c784;
--colour-green-400: #66bb6a;
--colour-green-500: #4caf50;
--colour-green-600: #43a047;
--colour-green-700: #388e3c;
--colour-green-800: #2e7d32;
--colour-green-900: #1b5e20;
--colour-green-950: #0b2f10;
/* --- Color: On-Surface --- */
--color-on-surface: #2f342e; /* replaces pure black */
--color-on-surface-variant: #5c605b;
/* --- Color: Outline --- */
--color-outline: #8c908b;
--color-outline-variant: #afb3ac; /* use at 20% opacity as "ghost border" */
--colour-outline: #8c908b;
--colour-outline-variant: #afb3ac; /* use at 20% opacity as "ghost border" */
/* --- Typography: Font Families --- */
--font-display: 'archivo', sans-serif;
@ -218,6 +244,12 @@ body {
gap: var(--space-4);
}
.form.outline {
padding: var(--space-4);
border: 1px solid var(--colour-outline);
border-radius: var(--radius-md);
}
.form-header {
margin-bottom: var(--space-6);
}
@ -293,6 +325,23 @@ body {
padding-inline: var(--space-2);
}
.btn-submit {
background-color: var(--color-primary);
color: var(--color-on-primary);
padding: var(--space-1) var(--space-6);
font-weight: var(--weight-semi-bold);
font-size: var(--text-body-md);
border: 1px solid var(--color-primary);
}
.btn-submit:hover {
opacity: 0.88;
}
.btn-submit:active {
opacity: 0.75;
}
/* --------------------------------------------------------------------------
Component: Input
-------------------------------------------------------------------------- */
@ -322,7 +371,7 @@ body {
background-color: var(--color-surface-container-high);
color: var(--color-on-surface);
border: none;
border-bottom: 1px solid color-mix(in srgb, var(--color-outline-variant) 20%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--colour-outline-variant) 20%, transparent);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
padding: var(--space-2) var(--space-3);
font-family: var(--font-body);
@ -340,11 +389,11 @@ body {
padding: var(--space-2) var(--space-3);
background-color: var(--color-surface-container);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
border-bottom: 1px solid color-mix(in srgb, var(--color-outline-variant) 20%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--colour-outline-variant) 20%, transparent);
}
.field-input::placeholder {
color: var(--color-outline-variant);
color: var(--colour-outline-variant);
}
.field-input:focus {
@ -355,7 +404,7 @@ body {
background-color: var(--color-surface-container-high);
color: var(--color-on-surface);
border: none;
border-bottom: 1px solid color-mix(in srgb, var(--color-outline-variant) 20%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--colour-outline-variant) 20%, transparent);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
font-family: var(--font-body);
@ -375,11 +424,16 @@ body {
border-bottom: 2px solid var(--color-primary);
}
.field-select:disabled {
cursor: not-allowed;
opacity: 0.75;
}
.field-textarea {
background-color: var(--color-surface-container-high);
color: var(--color-on-surface);
border: none;
border-bottom: 1px solid color-mix(in srgb, var(--color-outline-variant) 20%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--colour-outline-variant) 20%, transparent);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
padding: var(--space-2) var(--space-3);
font-family: var(--font-body);
@ -393,7 +447,7 @@ body {
}
.field-textarea::placeholder {
color: var(--color-outline-variant);
color: var(--colour-outline-variant);
}
.field-textarea:focus {
@ -407,6 +461,29 @@ body {
margin-top: var(--space-1);
}
/* --------------------------------------------------------------------------
Component: Form divider
-------------------------------------------------------------------------- */
.form-divider {
display: flex;
align-items: center;
gap: var(--space-3);
margin: var(--space-3) 0;
}
.form-divider-text {
font-family: var(--font-label);
color: var(--color-on-surface);
white-space: nowrap;
}
.form-divider-line {
flex: 1;
height: 1px;
background-color: color-mix(in srgb, var(--colour-outline-variant) 40%, transparent);
}
/* --------------------------------------------------------------------------
Component: Button (modifiers)
-------------------------------------------------------------------------- */
@ -518,9 +595,15 @@ body {
}
.alert-error {
background-color: color-mix(in srgb, #b3261e 10%, var(--color-surface));
color: #b3261e;
border-left: 3px solid #b3261e;
background-color: color-mix(in srgb, var(--colour-red-700) 10%, var(--color-surface));
color: var(--colour-red-700);
border-left: 3px solid var(--colour-red-700);
}
.alert.success {
background-color: color-mix(in srgb, var(--colour-green-700) 10%, var(--color-surface));
color: var(--colour-green-700);
border-left: 3px solid var(--colour-green-700);
}
/*