hanzoai/dev
2
0
Fork 0
mirror of https://github.com/hanzoai/dev.git synced 2026-10-25 03:32:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(login/success): fix background + theme variables

Browse Source 
- Add color-scheme meta and CSS variables for light/dark themes.
- Use page-level background with min-height:100vh to ensure full-viewport fill.
- Make components consume vars; adjust logo stroke via currentColor.
- Preserve existing layout; improve contrast in dark mode.
This commit is contained in:
James Peter
2025-09-06 21:05:17 +10:00
parent d43eb23e8d
commit c4e586cfb4
1 changed files with 46 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
codex-rs/login/src/assets/success.html
+46 -12
View File
@@ -2,17 +2,47 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="light dark" />
<title>Sign into Codex</title>
<link rel="icon" href='data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32"%3E%3Cpath stroke="%23000" stroke-linecap="round" stroke-width="2.484" d="M22.356 19.797H17.17M9.662 12.29l1.979 3.576a.511.511 0 0 1-.005.504l-1.974 3.409M30.758 16c0 8.15-6.607 14.758-14.758 14.758-8.15 0-14.758-6.607-14.758-14.758C1.242 7.85 7.85 1.242 16 1.242c8.15 0 14.758 6.608 14.758 14.758Z"/%3E%3C/svg%3E' type="image/svg+xml">
<style>
:root {
--bg-page: #ffffff;
--bg-primary: #ffffff;
--text-primary: #0d0d0d;
--text-secondary: #5d5d5d;
--interactive-bg-primary-default: #0d0d0d;
--interactive-label-primary-default: #ffffff;
--border-default: rgba(13, 13, 13, 0.10);
}
@media (prefers-color-scheme: dark) {
:root {
--bg-page: #0d0d0d;
--bg-primary: #141414;
--text-primary: #f2f2f2;
--text-secondary: #b0b0b0;
--interactive-bg-primary-default: #f2f2f2;
--interactive-label-primary-default: #0d0d0d;
--border-default: rgba(255, 255, 255, 0.15);
}
}
html, body {
height: 100%;
margin: 0;
background: var(--bg-page);
color: var(--text-primary);
}
.container {
margin: auto;
height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: white;
background: transparent;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
@@ -38,7 +68,7 @@
}
.title {
text-align: center;
color: var(--text-primary, #0D0D0D);
color: var(--text-primary);
font-size: 32px;
font-weight: 400;
line-height: 40px;
@@ -47,10 +77,10 @@
.setup-box {
width: 600px;
padding: 16px 20px;
background: var(--bg-primary, white);
background: var(--bg-primary);
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.05);
border-radius: 16px;
outline: 1px var(--border-default, rgba(13, 13, 13, 0.10)) solid;
outline: 1px var(--border-default) solid;
outline-offset: -1px;
justify-content: flex-start;
align-items: center;
@@ -74,7 +104,7 @@
}
.setup-title {
align-self: stretch;
color: var(--text-primary, #0D0D0D);
color: var(--text-primary);
font-size: 14px;
font-weight: 510;
line-height: 20px;
@@ -82,7 +112,7 @@
}
.setup-description {
align-self: stretch;
color: var(--text-secondary, #5D5D5D);
color: var(--text-secondary);
font-size: 14px;
font-weight: 400;
line-height: 20px;
@@ -98,7 +128,7 @@
.redirect-button {
height: 28px;
padding: 8px 16px;
background: var(--interactive-bg-primary-default, #0D0D0D);
background: var(--interactive-bg-primary-default);
border-radius: 999px;
justify-content: center;
align-items: center;
@@ -107,7 +137,7 @@
}
.close-button,
.redirect-text {
color: var(--interactive-label-primary-default, white);
color: var(--interactive-label-primary-default);
font-size: 14px;
font-weight: 510;
line-height: 20px;
@@ -121,10 +151,14 @@
width: 4rem;
height: 4rem;
border-radius: 16px;
border: .5px solid rgba(0, 0, 0, 0.1);
border: .5px solid var(--border-default);
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 16px 0px;
box-sizing: border-box;
background-color: rgb(255, 255, 255);
background-color: var(--bg-primary);
color: var(--text-primary);
}
.logo svg path {
stroke: currentColor;
}
</style>
</head>
@@ -195,4 +229,4 @@
</script>
</body>
</html>