summaryrefslogtreecommitdiff
path: root/src/client/index.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/index.css')
-rw-r--r--src/client/index.css301
1 files changed, 265 insertions, 36 deletions
diff --git a/src/client/index.css b/src/client/index.css
index 2349c9b..6cf1cfb 100644
--- a/src/client/index.css
+++ b/src/client/index.css
@@ -2,9 +2,24 @@
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
+
+ /* DigiID Inspired Colors (Light Theme Defaults) */
+ --digi-blue: #003366;
+ --digi-accent: #007bff;
+ --digi-text-light: #f0f0f0;
+ --digi-text-dark: #222222;
+ --digi-bg-dark: var(--digi-blue);
+ --digi-bg-light: #ffffff;
+ --digi-border-dark: #0059b3;
+ --digi-border-light: #cccccc;
+ --digi-address-bg-light: #e8f0fe;
+ --digi-error-light: #d9534f;
+ --digi-code-bg-light: #e8f0fe;
+
+ /* Default to Light Theme */
+ color-scheme: light;
+ color: var(--digi-text-dark);
+ background-color: var(--digi-bg-light);
font-synthesis: none;
text-rendering: optimizeLegibility;
@@ -14,8 +29,6 @@
body {
margin: 0;
- display: flex;
- place-items: center;
min-width: 320px;
min-height: 100vh;
}
@@ -23,7 +36,7 @@ body {
#root {
max-width: 1280px;
margin: 0 auto;
- padding: 2rem;
+ padding: 0.5rem 2rem;
text-align: center;
}
@@ -31,85 +44,301 @@ body {
display: flex;
flex-direction: column;
align-items: center;
- gap: 1.5rem;
+ gap: 1rem;
+ padding: 20px 0 0;
+ margin-top: 0;
}
-h1 {
- font-size: 2.5em;
- line-height: 1.1;
+.app-container h1 {
+ margin: 0;
margin-bottom: 1rem;
+ color: var(--digi-blue);
+ font-size: 1.8em;
+}
+
+/* Style the container that holds the changing views */
+.view-container {
+ width: 100%; /* Keep width if needed for centering the box */
+ display: flex; /* Keep display flex for centering */
+ justify-content: center; /* Center the box itself */
+}
+
+h1 {
+ font-size: 1.5em;
+ line-height: 1.2;
+ margin: 0;
+ color: var(--digi-blue);
}
button {
border-radius: 8px;
border: 1px solid transparent;
- padding: 0.6em 1.2em;
+ padding: 0.5em 1em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
- background-color: #1a1a1a;
+ background-color: var(--digi-accent);
+ color: var(--digi-text-light);
cursor: pointer;
- transition: border-color 0.25s;
+ transition: border-color 0.25s, background-color 0.25s;
+ margin-top: 0.5rem;
}
button:hover {
- border-color: #646cff;
+ background-color: var(--digi-blue);
+ border-color: var(--digi-blue);
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
button:disabled {
- background-color: #333;
+ background-color: #555; /* Keep disabled distinct */
cursor: not-allowed;
opacity: 0.6;
}
-.initial-view, .waiting-view, .success-view, .failed-view {
+/* Box styling for views that need it */
+.waiting-view, .success-view, .failed-view {
padding: 1.5rem;
- border: 1px solid #555;
+ border: 1px solid var(--digi-border-light);
+ background-color: rgba(0, 0, 0, 0.02);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
+ justify-content: center;
gap: 1rem;
- min-width: 300px;
+ width: 390px;
+ height: 560px;
+ box-sizing: border-box;
+}
+
+.waiting-view {
+ padding: 1rem;
+ gap: 0.5rem;
+}
+
+.waiting-view h2 {
+ margin-bottom: 0.1rem;
+}
+
+.waiting-view p {
+ margin: 0.1rem 0;
}
.waiting-view img {
- background-color: white; /* Ensure QR code background is white */
- padding: 10px;
- border-radius: 4px;
+ margin: 0.5rem auto;
+}
+
+.waiting-view button {
+ margin-top: 0.5rem;
}
.address {
font-family: monospace;
- background-color: #333;
+ background-color: var(--digi-address-bg-light);
+ color: var(--digi-text-dark);
padding: 0.5em;
border-radius: 4px;
word-break: break-all;
}
.error-message {
- color: #ff6b6b;
+ color: var(--digi-error-light);
font-weight: bold;
}
+code, .code-link a {
+ background-color: var(--digi-code-bg-light);
+ color: var(--digi-text-dark);
+ padding: 0.2em 0.4em;
+ border-radius: 3px;
+ font-family: monospace;
+ text-decoration: none; /* Remove underline from link part */
+}
+
+.code-link a:hover {
+ text-decoration: underline;
+}
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- button {
- background-color: #f9f9f9;
+.description {
+ font-size: 0.9em;
+ line-height: 1.4;
+ margin: 0;
+ text-align: center;
+ max-width: 100%;
+}
+
+.description ul {
+ margin-top: 0.5em;
+ padding-left: 20px;
+}
+
+.description li {
+ margin-bottom: 0.3em;
+ text-align: left;
+}
+
+/* Base styling ONLY for view transitions */
+.view-box {
+ opacity: 1;
+ transform: scale(1);
+ transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
+}
+
+/* Animation for success */
+.success-view {
+ /* Add specific styles if needed, e.g., border color */
+ border-color: #28a745; /* Green border for success */
+}
+
+/* Checkmark Icon Styles & Animation */
+.checkmark-icon {
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ display: block;
+ stroke-width: 3;
+ stroke: #28a745; /* Green checkmark */
+ stroke-miterlimit: 10;
+ margin: 10px auto;
+ box-shadow: inset 0px 0px 0px #ffffff; /* Start transparent */
+ animation: scale .3s ease-in-out .9s both, fill .4s ease-in-out .9s both;
+}
+
+.checkmark__circle {
+ stroke-dasharray: 166;
+ stroke-dashoffset: 166;
+ stroke-width: 2;
+ stroke-miterlimit: 10;
+ stroke: #7ac142;
+ fill: none;
+ animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+}
+
+.checkmark__check {
+ transform-origin: 50% 50%;
+ stroke-dasharray: 48;
+ stroke-dashoffset: 48;
+ animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+}
+
+@keyframes stroke {
+ 100% {
+ stroke-dashoffset: 0;
}
- .app-container {
- /* Add light mode adjustments if needed */
+}
+
+@keyframes scale {
+ 0%, 100% {
+ transform: none;
}
- .initial-view, .waiting-view, .success-view, .failed-view {
- border-color: #ccc;
+ 50% {
+ transform: scale3d(1.1, 1.1, 1);
}
- .address {
- background-color: #eee;
+}
+
+@keyframes fill {
+ 100% {
+ box-shadow: inset 0px 0px 0px 40px #7ac142; /* Fill effect */
}
+}
+
+/* Adjust QR code size to fit better in the box */
+.qr-code {
+ width: 240px;
+ height: 240px;
+ margin: 0 auto;
+}
+
+/* Ensure success animation fits */
+.success-animation {
+ width: 100px;
+ height: 100px;
+ margin: 0 auto;
+}
+
+/* Ensure waiting spinner fits */
+.waiting-spinner {
+ width: 40px;
+ height: 40px;
+ margin: 0 auto;
+}
+
+/* Ensure failed X mark fits */
+.failed-x {
+ width: 60px;
+ height: 60px;
+ margin: 0 auto;
+}
+
+/* Remove dark mode specific overrides */
+/* @media (prefers-color-scheme: dark) { ... } */
+
+/* Initial view without box */
+.initial-view {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 120px;
+}
+
+.initial-view h2 {
+ margin: 0;
+ color: var(--digi-blue);
+ font-size: 1.5em;
+}
+
+.initial-view .description {
+ margin-top: 0.1rem;
+ margin-bottom: 0.5rem;
+}
+
+.initial-view .qr-code {
+ margin: 0.5rem auto;
+}
+
+.initial-view .waiting-text {
+ margin: 0.25rem 0;
+}
+
+.initial-view button {
+ margin-top: 0.25rem;
+}
+
+.signin-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ padding: 0.6rem 1.2rem;
+ background-color: white;
+ color: #1a237e;
+ border: 1px solid var(--digi-border-light);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ transition: all 0.2s ease;
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+.signin-button:hover {
+ background-color: #f8f9fa;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.signin-button:disabled {
+ opacity: 0.7;
+ cursor: not-allowed;
+}
+
+.signin-button img {
+ margin: 0;
+ width: 20px;
+ height: 20px;
+}
+
+.signin-button span {
+ font-weight: 600;
+ font-size: 0.95rem;
+ letter-spacing: 0.3px;
} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-05-11 13:46:42 +0000