System-End/identity-vault
1
0
Fork 0
mirror of https://github.com/System-End/identity-vault.git synced 2026-04-19 20:55:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

a small part of the inevitable css pass

Browse source
This commit is contained in:
24c02 2025-12-02 02:53:42 -05:00
parent 5e0b776e29
commit fdd029d5ec
29 changed files with 268 additions and 587 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

124
app/frontend/stylesheets/colors.css → app/frontend/stylesheets/_colors.scss
View file

@ -1,42 +1,4 @@
:root {
--error-bg: #fbf2f4;
--error-border: #eab4bc;
--error-fg: #b9031f;
--error-fg-strong: #78202e;
--warning-bg: #fffcf2;
--warning-border: #ffe69b;
--warning-fg: #ffc107;
--warning-fg-strong: #6a311c;
--success-bg: #f3f8f5;
--success-border: #a1caad;
--success-fg: #147b33;
--success-fg-strong: #285a37;
--info-bg: #f2f7fb;
--info-bg-selected: #cce0f1;
--info-border: #b2d1ea;
--info-fg: #0067b9;
--info-fg-strong: #1f5077;
--quote-fg-1: #2b497d;
--quote-bg-1: #e8ecf2;
--quote-fg-2: #1d3e0f;
--quote-bg-2: #e4f1df;
--quote-fg-3: #5c0a0a;
--quote-bg-3: #f7d4d4;
--quote-fg-4: #472215;
--quote-bg-4: #dbbeb3;
--quote-fg-5: #335f61;
--quote-bg-5: #e0e6e6;
--purple-bg: #f7f3fb;
--purple-border: #c4a3d4;
--purple-fg: #7c3aed;
--purple-fg-strong: #4c1d95;
}
[data-theme="dark"] {
@mixin _color-vars-dark {
--error-bg: #3b1017;
--error-border: #8b2535;
--error-fg: #dc818f;
@ -75,43 +37,51 @@
--purple-fg-strong: #ddd6fe;
}
:root {
--error-bg: #fbf2f4;
--error-border: #eab4bc;
--error-fg: #b9031f;
--error-fg-strong: #78202e;
--warning-bg: #fffcf2;
--warning-border: #ffe69b;
--warning-fg: #ffc107;
--warning-fg-strong: #6a311c;
--success-bg: #f3f8f5;
--success-border: #a1caad;
--success-fg: #147b33;
--success-fg-strong: #285a37;
--info-bg: #f2f7fb;
--info-bg-selected: #cce0f1;
--info-border: #b2d1ea;
--info-fg: #0067b9;
--info-fg-strong: #1f5077;
--quote-fg-1: #2b497d;
--quote-bg-1: #e8ecf2;
--quote-fg-2: #1d3e0f;
--quote-bg-2: #e4f1df;
--quote-fg-3: #5c0a0a;
--quote-bg-3: #f7d4d4;
--quote-fg-4: #472215;
--quote-bg-4: #dbbeb3;
--quote-fg-5: #335f61;
--quote-bg-5: #e0e6e6;
--purple-bg: #f7f3fb;
--purple-border: #c4a3d4;
--purple-fg: #7c3aed;
--purple-fg-strong: #4c1d95;
}
:root[data-theme="dark"] {
@include _color-vars-dark;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--error-bg: #3b1017;
--error-border: #8b2535;
--error-fg: #dc818f;
--error-fg-strong: #e39aa5;
--warning-bg: #33290b;
--warning-border: #7f661c;
--warning-fg: #ffe083;
--warning-fg-strong: #ffecb4;
--success-bg: #142c1b;
--success-border: #285a37;
--success-fg: #8abd99;
--success-fg-strong: #b9d8c2;
--info-bg: #0f273b;
--info-bg-selected: #436075;
--info-border: #436075;
--info-fg: #b4d9f3;
--info-fg-strong: #d2e8f7;
--quote-fg-1: #b3cbff;
--quote-bg-1: #373a3f;
--quote-fg-2: #bee3aa;
--quote-bg-2: #313b2d;
--quote-fg-3: #ffc4b3;
--quote-bg-3: #55393a;
--quote-fg-4: #ffd3c0;
--quote-bg-4: #5e473e;
--quote-fg-5: #9ac9ca;
--quote-bg-5: #393d3e;
--purple-bg: #2d1b3b;
--purple-border: #6b46c1;
--purple-fg: #c4b5fd;
--purple-fg-strong: #ddd6fe;
:root:not([data-theme]) {
@include _color-vars-dark;
}
}
}

24
app/frontend/stylesheets/application.scss
View file

@ -2,6 +2,7 @@
// $theme-color: "lime";
$theme-color: "red";
@import "@picocss/pico/scss/pico";
@import "./snippets/tokens";
:root {
--pico-font-family-sans-serif: Inter, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji) !important;
@ -18,18 +19,8 @@ $theme-color: "red";
--pico-primary-hover: #d92d46;
--pico-primary-focus: rgba(236, 55, 80, 0.15);
--pico-primary-inverse: #fff;
}
[data-theme="dark"] {
--pico-primary: #f03d58;
--pico-primary-rgb: 240, 61, 88;
--pico-primary-hover: #ff4d68;
--pico-primary-focus: rgba(240, 61, 88, 0.25);
--pico-primary-inverse: #fff;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
@include dark-mode-root {
--pico-primary: #f03d58;
--pico-primary-rgb: 240, 61, 88;
--pico-primary-hover: #ff4d68;
@ -42,7 +33,7 @@ h1, h2, h3, h4, h5, h6 {
letter-spacing: -0.025em;
font-weight: 700;
[data-theme="dark"] & {
@include dark-mode {
color: #f0f0f0;
}
}
@ -56,8 +47,7 @@ h3 { font-size: 1.5rem; }
.usn {
user-select: none;
}
@import "./colors.css";
@import "./snippets/tokens";
@import "./colors";
@import "./snippets/breakpoints";
@import "./snippets/skeumorphic.scss";
@import "./snippets/utilities";
@ -97,7 +87,7 @@ textarea {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 10px;
[data-theme="dark"] & {
@include dark-mode {
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.3),
0 1px 0 rgba(255, 255, 255, 0.03);
@ -109,7 +99,7 @@ textarea {
0 1px 0 rgba(255, 255, 255, 0.4),
0 0 0 3px rgba(var(--pico-primary-rgb), 0.25);
[data-theme="dark"] & {
@include dark-mode {
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.3),
0 1px 0 rgba(255, 255, 255, 0.03),

2
app/frontend/stylesheets/backend.scss
View file

@ -1,4 +1,4 @@
@import "./colors.css";
@import "./colors";
@import "./snippets/tokens";
@import "./snippets/breakpoints";
@import "./snippets/banners.scss";

27
app/frontend/stylesheets/snippets/_tokens.scss
View file

@ -1,20 +1,25 @@
@mixin dark-mode {
[data-theme="dark"] & { @content; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) & { @content; }
}
}
@mixin dark-mode-root {
&[data-theme="dark"] { @content; }
@media (prefers-color-scheme: dark) {
&:not([data-theme]) { @content; }
}
}
:root {
--surface-1: var(--pico-card-background-color);
--surface-2: #f9fafb;
--surface-2-border: #e5e7eb;
--text-strong: #1a1d23;
--text-muted-strong: #6b7280;
}
[data-theme="dark"] {
--surface-2: #1f2937;
--surface-2-border: #374151;
--text-strong: #f5f7fa;
--text-muted-strong: #9ca3af;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
@include dark-mode-root {
--surface-2: #1f2937;
--surface-2-border: #374151;
--text-strong: #f5f7fa;

26
app/frontend/stylesheets/snippets/_utilities.scss
View file

@ -1,19 +1,7 @@
.card {
@include card();
}
.section-card {
@include section-card();
}
.container {
@include container();
}
.container-md {
@include container(1000px);
}
.container-sm {
@include container(720px);
}
.card { @include card(); }
.section-card { @include section-card(); }
.card-hoverable { @include card-hoverable(); }
.page-sections { @include page-sections(); }
.container { @include container(); }
.container-md { @include container(1000px); }
.container-sm { @include container(720px); }

79
app/frontend/stylesheets/snippets/addresses.scss
View file

@ -1,26 +1,3 @@
.address-card {
@include card($padding: $space-4, $radius: $radius-lg);
@include transition-default();
[data-theme="dark"] & {
background: #1f2937;
border-color: #374151;
}
&:hover {
transform: translateY(-1px);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.1),
0 2px 6px rgba(0, 0, 0, 0.06);
[data-theme="dark"] & {
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.4),
0 2px 6px rgba(0, 0, 0, 0.3);
}
}
}
.address-header {
display: grid;
grid-template-columns: auto 1fr auto;
@ -108,56 +85,16 @@
.address-form {
fieldset {
border: none;
padding: 0;
@include form-fieldset;
margin: 0 0 $space-5;
legend {
font-size: 1.125rem;
font-weight: 600;
color: var(--pico-color);
margin-bottom: $space-3;
padding: 0;
}
label {
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.375rem;
display: block;
color: var(--pico-color);
}
input, select, textarea {
margin-bottom: $space-3;
border-radius: $radius-md;
font-size: 0.9375rem;
}
.grid {
gap: $space-3;
}
legend { font-size: 1.125rem; margin-bottom: $space-3; }
label { font-size: 0.875rem; margin-bottom: 0.375rem; }
input, select, textarea { margin-bottom: $space-3; font-size: 0.9375rem; }
.grid { gap: $space-3; }
}
footer {
margin-top: $space-5;
display: flex;
gap: $space-2;
justify-content: center;
flex-wrap: wrap;
button, input[type="submit"] {
margin: 0;
font-weight: 500;
font-size: 0.9375rem;
padding: 0.625rem $space-5;
border-radius: $radius-md;
}
a {
margin: 0;
padding: 0.625rem $space-5;
font-size: 0.9375rem;
}
margin-top: $space-5; display: flex; gap: $space-2; justify-content: center; flex-wrap: wrap;
button, input[type="submit"], a { margin: 0; font-size: 0.9375rem; padding: 0.625rem $space-5; }
button, input[type="submit"] { font-weight: 500; border-radius: $radius-md; }
}
}

43
app/frontend/stylesheets/snippets/auth.scss
View file

@ -8,7 +8,7 @@
padding: 2rem 1rem;
background: #f5f5f5;
[data-theme="dark"] & {
@include dark-mode {
background: #1a1d23;
}
}
@ -25,7 +25,7 @@
2px 2px 8px rgba(0, 0, 0, 0.02),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
[data-theme="dark"] & {
@include dark-mode {
background: linear-gradient(165deg, #252932 0%, #1f2329 100%);
border-color: rgba(255, 255, 255, 0.08);
box-shadow:
@ -67,43 +67,16 @@
}
fieldset {
border: none;
padding: 0;
@include form-fieldset;
margin: 0 0 1.75rem;
legend {
font-size: 0.95rem;
font-weight: 600;
color: var(--pico-color);
margin-bottom: $space-4;
padding: 0;
}
label {
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 0.625rem;
display: block;
color: var(--pico-color);
}
legend { font-size: 0.95rem; margin-bottom: $space-4; }
label { font-size: 0.9rem; margin-bottom: 0.625rem; }
input, select, textarea {
margin-bottom: $space-1;
border-radius: $radius-md;
background: var(--surface-2);
margin-bottom: $space-1; background: var(--surface-2);
@include transition-default(background);
&:focus {
background: var(--surface-1);
}
}
small {
font-size: 0.85rem;
color: var(--text-muted-strong);
margin-top: 0.375rem;
display: block;
&:focus { background: var(--surface-1); }
}
small { font-size: 0.85rem; color: var(--text-muted-strong); margin-top: 0.375rem; display: block; }
}
.grid {

10
app/frontend/stylesheets/snippets/banners.scss
View file

@ -51,6 +51,16 @@
@include banner-theme(var(--purple-bg), var(--purple-border), var(--purple-fg-strong), var(--purple-fg));
}
@mixin alert-box($bg, $border, $fg-strong) {
background: $bg;
border: 1px solid $border;
border-radius: $radius-md;
padding: $space-3 $space-4;
margin-bottom: $space-5;
h3, h4 { margin: 0 0 $space-2; font-weight: 500; font-size: 1rem; color: $fg-strong; }
ul { margin: 0; padding-left: $space-4; }
}
.banner {
@include banner-base;
text-align: left;

165
app/frontend/stylesheets/snippets/buttons.scss
View file

@ -13,7 +13,7 @@ input[type="button"],
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 1px rgba(0, 0, 0, 0.2);
[data-theme="dark"] & {
@include dark-mode {
background: linear-gradient(180deg, #f03d58 0%, #dd2f4a 100%);
border: 1px solid #c62642;
box-shadow:
@ -31,7 +31,7 @@ input[type="button"],
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 1px rgba(0, 0, 0, 0.2);
[data-theme="dark"] & {
@include dark-mode {
background: linear-gradient(180deg, #ff4d68 0%, #f03d58 100%);
border-color: #dd2f4a;
box-shadow:
@ -47,7 +47,7 @@ input[type="button"],
inset 0 3px 6px rgba(0, 0, 0, 0.3),
inset 0 1px 3px rgba(0, 0, 0, 0.2);
[data-theme="dark"] & {
@include dark-mode {
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.4),
inset 0 1px 3px rgba(0, 0, 0, 0.3);
@ -68,7 +68,7 @@ input[type="button"],
inset 0 1px 0 rgba(255, 255, 255, 0.8),
inset 0 -1px 1px rgba(0, 0, 0, 0.04) !important;
[data-theme="dark"] & {
@include dark-mode {
background: #2c2c2c linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.1) 100%) !important;
color: #d0d0d0 !important;
border-color: rgba(255, 255, 255, 0.1) !important;
@ -87,7 +87,7 @@ input[type="button"],
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -1px 1px rgba(0, 0, 0, 0.05) !important;
[data-theme="dark"] & {
@include dark-mode {
background: #333 linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.15) 100%) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
box-shadow:
@ -103,7 +103,7 @@ input[type="button"],
inset 0 3px 6px rgba(0, 0, 0, 0.15),
inset 0 1px 3px rgba(0, 0, 0, 0.12) !important;
[data-theme="dark"] & {
@include dark-mode {
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.5),
inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
@ -112,162 +112,19 @@ input[type="button"],
// Override for delete variant on secondary
&.delete {
background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%) !important;
border: 1px solid #991b1b !important;
color: #ffffff !important;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
[data-theme="dark"] & {
background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
border: 1px solid #b91c1c !important;
color: #ffffff !important;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
}
&:hover:not(:disabled) {
transform: translateY(-1px);
background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
border-color: #991b1b !important;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
[data-theme="dark"] & {
background: linear-gradient(180deg, #f87171 0%, #ef4444 100%) !important;
border-color: #dc2626 !important;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
}
}
&:active:not(:disabled) {
transform: translateY(0);
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.3),
inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
[data-theme="dark"] & {
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.4),
inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
}
@include colored-button(#dc2626, #b91c1c, #991b1b, #ef4444, #dc2626, #b91c1c, #ef4444, #dc2626, #f87171, #ef4444);
}
}
// Danger/Delete button variant (skeumorphic style)
// Danger/Delete button variant
&.danger,
&.delete {
background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%) !important;
border: 1px solid #991b1b !important;
color: white !important;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
[data-theme="dark"] & {
background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
border: 1px solid #b91c1c !important;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
}
&:hover:not(:disabled) {
transform: translateY(-1px);
background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
border-color: #991b1b !important;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
[data-theme="dark"] & {
background: linear-gradient(180deg, #f87171 0%, #ef4444 100%) !important;
border-color: #dc2626 !important;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
}
}
&:active:not(:disabled) {
transform: translateY(0);
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.3),
inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
[data-theme="dark"] & {
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.4),
inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
}
@include colored-button(#dc2626, #b91c1c, #991b1b, #ef4444, #dc2626, #b91c1c, #ef4444, #dc2626, #f87171, #ef4444);
}
// Approve button variant (green skeumorphic style)
// Approve button variant (green)
&.approve {
background: linear-gradient(180deg, #16a34a 0%, #15803d 100%) !important;
border: 1px solid #166534 !important;
color: #ffffff !important;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
[data-theme="dark"] & {
background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
border: 1px solid #15803d !important;
color: #ffffff !important;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
}
&:hover:not(:disabled) {
transform: translateY(-1px);
background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
border-color: #166534 !important;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
[data-theme="dark"] & {
background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%) !important;
border-color: #16a34a !important;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
}
}
&:active:not(:disabled) {
transform: translateY(0);
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.3),
inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
[data-theme="dark"] & {
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.4),
inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
}
@include colored-button(#16a34a, #15803d, #166534, #22c55e, #16a34a, #15803d, #22c55e, #16a34a, #4ade80, #22c55e);
}
}

4
app/frontend/stylesheets/snippets/code_input.scss
View file

@ -20,7 +20,7 @@
inset 0 1px 2px rgba(0, 0, 0, 0.06),
0 0 0 3px rgba(var(--pico-primary-rgb), 0.15);
[data-theme="dark"] & {
@include dark-mode {
background: #252932;
}
}
@ -67,7 +67,7 @@
transition: opacity 0.2s ease;
pointer-events: none;
[data-theme="dark"] & {
@include dark-mode {
background: linear-gradient(180deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.15) 50%,

7
app/frontend/stylesheets/snippets/identities.scss
View file

@ -1,10 +1,3 @@
.info-sections {
max-width: 900px;
margin: $space-6 auto 0;
}
.developer-mode-toggle {
display: flex;
align-items: center;

2
app/frontend/stylesheets/snippets/lightswitch.scss
View file

@ -11,7 +11,7 @@
justify-content: center;
overflow: hidden;
[data-theme="dark"] & {
@include dark-mode {
color: #d0d0d0;
}

13
app/frontend/stylesheets/snippets/profile_completion.scss
View file

@ -4,21 +4,12 @@
--completion-icon-bg: #f0fdf4;
--completion-completed-icon-bg: #d1fae5;
[data-theme="dark"] & {
@include dark-mode {
--completion-green: #a3e635;
--completion-green-dark: #84cc16;
--completion-icon-bg: rgba(132, 204, 22, 0.1);
--completion-completed-icon-bg: rgba(16, 185, 129, 0.15);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) & {
--completion-green: #a3e635;
--completion-green-dark: #84cc16;
--completion-icon-bg: rgba(132, 204, 22, 0.1);
--completion-completed-icon-bg: rgba(16, 185, 129, 0.15);
}
}
background: linear-gradient(165deg, var(--pico-card-background-color) 0%, var(--surface-2) 100%);
border: 1px solid var(--pico-card-border-color);
@ -30,7 +21,7 @@
2px 2px 8px rgba(0, 0, 0, 0.02),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
[data-theme="dark"] & {
@include dark-mode {
background: linear-gradient(165deg, #252932 0%, #1f2329 100%);
box-shadow:
4px 4px 16px rgba(0, 0, 0, 0.3),

39
app/frontend/stylesheets/snippets/security.scss
View file

@ -1,11 +1,3 @@
.security-sections {
max-width: 900px;
margin: 2rem auto 0;
}
.loading-text {
color: var(--text-muted-strong);
font-size: 0.95rem;
@ -223,29 +215,6 @@
gap: $space-3;
}
.session-card {
@include card($padding: $space-4, $radius: $radius-lg);
@include transition-default();
[data-theme="dark"] & {
background: #1f2937;
border-color: #374151;
}
&:hover {
transform: translateY(-1px);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.1),
0 2px 6px rgba(0, 0, 0, 0.06);
[data-theme="dark"] & {
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.4),
0 2px 6px rgba(0, 0, 0, 0.3);
}
}
}
.current-session {
background: linear-gradient(135deg, #f7fee7, #ecfccb);
border-color: #84cc16;
@ -255,7 +224,7 @@
0 1px 4px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
[data-theme="dark"] & {
@include dark-mode {
background: linear-gradient(135deg, rgba(132, 204, 22, 0.15), rgba(132, 204, 22, 0.08));
border-color: #84cc16;
box-shadow:
@ -295,7 +264,7 @@
0 1px 3px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
[data-theme="dark"] & {
@include dark-mode {
background: #84cc16;
color: #1a1d23;
box-shadow:
@ -331,7 +300,7 @@
.backup-code-method {
color: #dc2626;
background: linear-gradient(135deg, rgba(220, 38, 38, 0.15), rgba(153, 27, 27, 0.15));
[data-theme="dark"] & {
@include dark-mode {
color: #fca5a5;
background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(220, 38, 38, 0.25));
border-color: rgba(239, 68, 68, 0.4);
@ -372,7 +341,7 @@
font-size: 0.9rem;
line-height: 1.5;
[data-theme="dark"] & {
@include dark-mode {
background: color-mix(in srgb, #d97706 15%, #1f2937 85%);
color: #fbbf24;
}

24
app/frontend/stylesheets/snippets/sidebar.scss
View file

@ -18,7 +18,7 @@
box-shadow: 4px 0 16px rgba(0, 0, 0, 0.04),
2px 0 4px rgba(0, 0, 0, 0.02);
[data-theme="dark"] & {
@include dark-mode {
background: linear-gradient(165deg, #1c1c1c 0%, #161616 100%);
box-shadow: 4px 0 16px rgba(0, 0, 0, 0.3),
2px 0 4px rgba(0, 0, 0, 0.2);
@ -32,7 +32,7 @@
align-items: center;
gap: 0.875rem;
[data-theme="dark"] & {
@include dark-mode {
border-bottom-color: rgba(255, 255, 255, 0.06);
}
@ -57,7 +57,7 @@
line-height: 1.2;
flex: 1;
[data-theme="dark"] & {
@include dark-mode {
color: #f0f0f0;
}
}
@ -81,7 +81,7 @@
background: transparent;
position: relative;
[data-theme="dark"] & {
@include dark-mode {
color: #d0d0d0;
}
@ -90,7 +90,7 @@
transform: translateX(2px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
[data-theme="dark"] & {
@include dark-mode {
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
@ -104,7 +104,7 @@
0 1px 0 rgba(255, 255, 255, 0.8);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
[data-theme="dark"] & {
@include dark-mode {
color: var(--pico-primary);
background: linear-gradient(135deg, rgba(60, 60, 60, 0.95) 0%, rgba(50, 50, 50, 0.8) 100%);
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.5),
@ -143,7 +143,7 @@
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 -4px 12px rgba(0, 0, 0, 0.04);
[data-theme="dark"] & {
@include dark-mode {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.3) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 -4px 12px rgba(0, 0, 0, 0.3);
@ -194,7 +194,7 @@
overflow: hidden;
text-overflow: ellipsis;
[data-theme="dark"] & {
@include dark-mode {
color: #e0e0e0;
}
}
@ -206,7 +206,7 @@
overflow: hidden;
text-overflow: ellipsis;
[data-theme="dark"] & {
@include dark-mode {
color: #999;
}
}
@ -244,7 +244,7 @@
}
}
[data-theme="dark"] & {
@include dark-mode {
background: linear-gradient(180deg, #2a2a2a 0%, #242424 100%);
color: #d0d0d0;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4),
@ -259,7 +259,7 @@
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -1px 1px rgba(0, 0, 0, 0.05);
[data-theme="dark"] & {
@include dark-mode {
background: linear-gradient(180deg, #333 0%, #2a2a2a 100%);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.1),
@ -272,7 +272,7 @@
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.15),
inset 0 1px 3px rgba(0, 0, 0, 0.12);
[data-theme="dark"] & {
@include dark-mode {
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.5),
inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

106
app/frontend/stylesheets/snippets/skeumorphic.scss
View file

@ -57,7 +57,7 @@
@include shadow-raised;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
[data-theme="dark"] & {
@include dark-mode {
@include gradient-dark;
border-color: rgba(0, 0, 0, 0.3);
box-shadow:
@ -71,7 +71,7 @@
transform: translateY(-1px);
@include shadow-raised-hover;
[data-theme="dark"] & {
@include dark-mode {
@include gradient-dark-hover;
box-shadow:
0 6px 16px rgba(0, 0, 0, 0.5),
@ -84,7 +84,7 @@
transform: translateY(0);
@include shadow-pressed;
[data-theme="dark"] & {
@include dark-mode {
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.5),
inset 0 1px 3px rgba(0, 0, 0, 0.4);
@ -127,7 +127,7 @@
border-radius: $radius;
padding: $padding;
[data-theme="dark"] & {
@include dark-mode {
background: linear-gradient(165deg, #252932 0%, #1f2329 100%);
}
@ -137,7 +137,7 @@
2px 2px 8px rgba(0, 0, 0, 0.02),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
[data-theme="dark"] & {
@include dark-mode {
box-shadow:
4px 4px 16px rgba(0, 0, 0, 0.3),
2px 2px 8px rgba(0, 0, 0, 0.2),
@ -146,10 +146,55 @@
}
}
@mixin card-hoverable($padding: $space-4, $radius: $radius-lg) {
@include card($padding: $padding, $radius: $radius);
@include transition-default();
@include dark-mode {
background: #1f2937;
border-color: #374151;
}
&:hover {
transform: translateY(-1px);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.1),
0 2px 6px rgba(0, 0, 0, 0.06);
@include dark-mode {
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.4),
0 2px 6px rgba(0, 0, 0, 0.3);
}
}
}
@mixin section-card {
@include card(2rem, $radius-lg);
}
@mixin page-sections($max: 900px) {
max-width: $max;
margin: 2rem auto 0;
}
@mixin form-fieldset {
border: none; padding: 0;
legend { font-weight: 600; color: var(--pico-color); padding: 0; }
label { font-weight: 500; display: block; color: var(--pico-color); }
input, select, textarea { border-radius: $radius-md; }
}
@mixin status-card($color, $light-from, $light-to) {
background: linear-gradient(135deg, $light-from, $light-to);
border-color: $color;
@include dark-mode {
background: linear-gradient(135deg, rgba($color, 0.15), rgba($color, 0.08));
border-color: rgba($color, 0.3);
}
}
@mixin badge($bg, $fg, $radius: 6px) {
display: inline-flex;
align-items: center;
@ -170,3 +215,54 @@
margin: 0 0 $mb;
color: var(--pico-color);
}
@mixin colored-button($light-from, $light-to, $border, $dark-from, $dark-to, $dark-border, $hover-from, $hover-to, $dark-hover-from, $dark-hover-to) {
background: linear-gradient(180deg, $light-from 0%, $light-to 100%) !important;
border: 1px solid $border !important;
color: #ffffff !important;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
@include dark-mode {
background: linear-gradient(180deg, $dark-from 0%, $dark-to 100%) !important;
border: 1px solid $dark-border !important;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
}
&:hover:not(:disabled) {
transform: translateY(-1px);
background: linear-gradient(180deg, $hover-from 0%, $hover-to 100%) !important;
border-color: $border !important;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
@include dark-mode {
background: linear-gradient(180deg, $dark-hover-from 0%, $dark-hover-to 100%) !important;
border-color: $dark-to !important;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 1px rgba(0, 0, 0, 0.2) !important;
}
}
&:active:not(:disabled) {
transform: translateY(0);
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.3),
inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
@include dark-mode {
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.4),
inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
}
}

4
app/frontend/stylesheets/snippets/sso_apps.scss
View file

@ -42,7 +42,7 @@ button.sso-app-card.secondary {
background: #fff linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.02) 100%) !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
[data-theme="dark"] & {
@include dark-mode {
background: #2c2c2c linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.08) 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
@ -55,7 +55,7 @@ button.sso-app-card.secondary {
0 4px 12px rgba(0, 0, 0, 0.1),
0 0 0 2px rgba(236, 55, 80, 0.1) !important;
[data-theme="dark"] & {
@include dark-mode {
background: #333 linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.1) 100%) !important;
border: 1px solid #f03d58 !important;
box-shadow:

130
app/frontend/stylesheets/snippets/verifications.scss
View file

@ -1,36 +1,13 @@
.verification-sections {
max-width: 900px;
margin: 2rem auto 0;
}
.verification-verified {
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border-color: #22c55e;
[data-theme="dark"] & {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.08));
border-color: rgba(34, 197, 94, 0.3);
}
@include status-card(#22c55e, #f0fdf4, #dcfce7);
}
.verification-ineligible {
background: linear-gradient(135deg, #fef2f2, #fee2e2);
border-color: #ef4444;
[data-theme="dark"] & {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.08));
border-color: rgba(239, 68, 68, 0.3);
}
@include status-card(#ef4444, #fef2f2, #fee2e2);
}
.verification-needs-action {
background: linear-gradient(135deg, #fffbeb, #fef3c7);
border-color: #f59e0b;
[data-theme="dark"] & {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.08));
border-color: rgba(245, 158, 11, 0.3);
}
@include status-card(#f59e0b, #fffbeb, #fef3c7);
}
.status-indicator {
@ -163,11 +140,6 @@
}
}
.verification-form-sections {
max-width: 900px;
margin: 2rem auto 0;
}
.privacy-section {
background: var(--surface-2);
border-color: var(--surface-2-border);
@ -184,65 +156,18 @@
}
.resubmission-alert {
background: var(--warning-bg);
border: 1px solid var(--warning-border);
border-radius: $radius-md;
padding: $space-3 $space-4;
margin-bottom: $space-5;
h3 {
margin: 0 0 $space-2;
font-weight: 500;
font-size: 1rem;
color: var(--warning-fg-strong);
}
ul {
margin: 0;
padding-left: $space-4;
li {
margin-bottom: $space-1;
color: var(--warning-fg);
line-height: 1.5;
&:last-child {
margin-bottom: 0;
}
strong {
font-weight: 500;
color: var(--warning-fg-strong);
}
small {
display: block;
margin-top: 0.25rem;
font-size: 0.875rem;
}
}
@include alert-box(var(--warning-bg), var(--warning-border), var(--warning-fg-strong));
li {
margin-bottom: $space-1; color: var(--warning-fg); line-height: 1.5;
&:last-child { margin-bottom: 0; }
strong { font-weight: 500; color: var(--warning-fg-strong); }
small { display: block; margin-top: 0.25rem; font-size: 0.875rem; }
}
}
.error-alert {
background: var(--error-bg);
border: 1px solid var(--error-border);
border-radius: $radius-md;
padding: $space-3 $space-4;
margin-bottom: $space-5;
h4 {
margin: 0 0 $space-1;
font-weight: 500;
font-size: 1rem;
color: var(--error-fg-strong);
}
ul {
margin: 0;
padding-left: $space-4;
color: var(--error-fg);
}
@include alert-box(var(--error-bg), var(--error-border), var(--error-fg-strong));
ul { color: var(--error-fg); }
}
.requirement-group {
@ -314,34 +239,11 @@
}
.photo-tips {
background: var(--info-bg);
border: 1px solid var(--info-border);
border-radius: $radius-md;
padding: $space-3 $space-4;
margin-top: $space-5;
h4 {
margin: 0 0 $space-2;
font-weight: 600;
font-size: 0.95rem;
color: var(--info-fg-strong);
}
ul {
margin: 0;
padding-left: $space-4;
color: var(--info-fg);
font-size: 0.875rem;
line-height: 1.6;
li {
margin-bottom: 0.25rem;
&:last-child {
margin-bottom: 0;
}
}
}
@include alert-box(var(--info-bg), var(--info-border), var(--info-fg-strong));
margin-top: $space-5; margin-bottom: 0;
h4 { font-weight: 600; font-size: 0.95rem; }
ul { color: var(--info-fg); font-size: 0.875rem; line-height: 1.6; }
li { margin-bottom: 0.25rem; &:last-child { margin-bottom: 0; } }
}
.uploading-state {

6
app/frontend/stylesheets/snippets/welcome.scss
View file

@ -59,7 +59,7 @@
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 1px rgba(0, 0, 0, 0.05) !important;
[data-theme="dark"] & {
@include dark-mode {
box-shadow:
0 3px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
@ -73,7 +73,7 @@
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 1px rgba(0, 0, 0, 0.05) !important;
[data-theme="dark"] & {
@include dark-mode {
box-shadow:
0 6px 16px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.25),
@ -87,7 +87,7 @@
inset 0 3px 6px rgba(0, 0, 0, 0.15),
inset 0 1px 3px rgba(0, 0, 0, 0.12) !important;
[data-theme="dark"] & {
@include dark-mode {
box-shadow:
inset 0 3px 6px rgba(0, 0, 0, 0.4),
inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;

2
app/views/addresses/edit.html.erb
View file

@ -2,7 +2,7 @@
<h1><%= t '.title' %></h1>
</div>
<div class="info-sections">
<div class="page-sections">
<section class="section-card">
<h3><%= t '.subtitle' %></h3>
<%= render 'form', address: @address %>

2
app/views/addresses/index.html.erb
View file

@ -3,7 +3,7 @@
</div>
<% if @addresses.any? %>
<div class="info-sections">
<div class="page-sections">
<% @addresses.each do |address| %>
<%= render 'address', address: address %>
<% end %>

2
app/views/addresses/new.html.erb
View file

@ -2,7 +2,7 @@
<h1><%= t '.title' %></h1>
</div>
<div class="info-sections">
<div class="page-sections">
<section class="section-card">
<h3><%= t '.subtitle' %></h3>
<%= render 'form', address: @address %>

2
app/views/audit_logs/index.html.erb
View file

@ -6,7 +6,7 @@
<h1>Activity Log</h1>
</div>
<div class="security-sections">
<div class="page-sections">
<section class="section-card">
<p>View your recent account activity and security events.</p>
<%= render Components::PublicActivity::Container.new(@activities) %>

2
app/views/authorized_applications/_authorized_application.html.erb
View file

@ -1,4 +1,4 @@
<div class="session-card">
<div class="card-hoverable">
<div class="session-header">
<div class="session-icon"><%= inline_icon("private", size: 20) %></div>
<div class="session-info">

2
app/views/identities/edit.html.erb
View file

@ -2,7 +2,7 @@
<h1><%= t ".title" %></h1>
</div>
<div class="info-sections">
<div class="page-sections">
<%= form_with model: @identity, url: identity_path, method: :patch, local: true do |f| %>
<% if @identity.errors.any? %>
<div class="banner danger" aria-live="polite" style="margin-bottom: 1.5rem;">

2
app/views/identity_sessions/_identity_session.html.erb
View file

@ -1,4 +1,4 @@
<div class="session-card <%= 'current-session' if identity_session.id == @current_session&.id %>">
<div class="card-hoverable <%= 'current-session' if identity_session.id == @current_session&.id %>">
<div class="session-header">
<div class="session-icon">
<% if identity_session.os_info&.include?("Mac") || identity_session.os_info&.include?("macOS") %>

2
app/views/static_pages/security.html.erb
View file

@ -2,7 +2,7 @@
<h1><%= t ".heading" %></h1>
</div>
<div class="security-sections">
<div class="page-sections">
<section class="section-card">
<h3><%= t ".sessions" %></h3>

2
app/views/verifications/document.html.erb
View file

@ -3,7 +3,7 @@
<p><%= t(".subtitle.#{@is_resubmission ? 'resubmit' : 'initial'}") %></p>
</div>
<div class="verification-form-sections">
<div class="page-sections">
<% if @is_resubmission %>
<div class="resubmission-alert">
<h3><%= t(".issues_to_fix") %></h3>

2
app/views/verifications/status.html.erb
View file

@ -2,7 +2,7 @@
<h1>ID Verification</h1>
</div>
<div class="verification-sections">
<div class="page-sections">
<% case @status %>
<% when "pending" %>
<section class="section-card">