From d66a14b13195b43fef98227dc7f18f428e143b60 Mon Sep 17 00:00:00 2001 From: Derek Holloway Date: Thu, 21 Aug 2025 21:24:09 -0700 Subject: [PATCH] Start work on converting style to material colors --- src/Client/src/app/app.css | 13 ++--- .../src/app/pages/home/home.component.css | 20 ++++++- .../src/app/pages/jobs/jobs.component.css | 14 ++--- src/Client/src/styles.css | 58 +++++++++++++++---- 4 files changed, 78 insertions(+), 27 deletions(-) diff --git a/src/Client/src/app/app.css b/src/Client/src/app/app.css index f8bee69..9be18ff 100644 --- a/src/Client/src/app/app.css +++ b/src/Client/src/app/app.css @@ -32,19 +32,16 @@ padding: 15px 0; transition: 0.5s; background-color: #00000000; - border: 1px solid var(--Mistox-White); - color: var(--Mistox-White); + color: var(--mistox-border-light); text-decoration: none; } .nav-button:hover { - background-color: #00000044; - color: var(--Mistox-Light); + background-color: #00000022; } .active { - background-color: #00000010; - color: var(--Mistox-Frame); + color: var(--mistox-border); } .nav-button-login { @@ -96,10 +93,10 @@ .bottom-bar-float { align-items: end; - color: var(--Mistox-White); + color: var(--mistox-border-light); } .bottom-bar-padding { - color: var(--Mistox-White); margin: 20px; + color: var(--mistox-border-light); } \ No newline at end of file diff --git a/src/Client/src/app/pages/home/home.component.css b/src/Client/src/app/pages/home/home.component.css index 013fb16..be3c1f6 100644 --- a/src/Client/src/app/pages/home/home.component.css +++ b/src/Client/src/app/pages/home/home.component.css @@ -10,10 +10,12 @@ .center-text h1 { font-size: 100px; margin: 20px 0; + color: var(--mistox-text); } .center-text h2 { margin-bottom: 200px; + color: var(--mistox-text-sub); } .content-frame { @@ -30,11 +32,12 @@ .floating-frame { width: 450px; height: 200px; - background-color: var(--Mistox-Frame); padding: 20px; margin: 20px 0; - border: 1px solid #000; border-radius: 10px; + background-color: var(--mistox-bg-medium); + border: 1px solid var(--mistox-border); + box-shadow: var(--mistox-shadow); } .title-block { @@ -47,6 +50,11 @@ .title-block h1 { margin: 0; + color: var(--mistox-text); +} + +.content-block p { + color: var(--mistox-text-sub); } hr { @@ -60,6 +68,14 @@ hr { text-align: center; } +.solution-frame strong { + color: var(--mistox-text); +} + +.solution-frame p { + color: var(--mistox-text-sub); +} + .border { border-bottom: solid 1px #000; } \ No newline at end of file diff --git a/src/Client/src/app/pages/jobs/jobs.component.css b/src/Client/src/app/pages/jobs/jobs.component.css index 6044df9..674dc8d 100644 --- a/src/Client/src/app/pages/jobs/jobs.component.css +++ b/src/Client/src/app/pages/jobs/jobs.component.css @@ -5,15 +5,13 @@ button { text-align: center; padding: 15px 0; transition: .5s; - background-color: #0000; - border: 1px solid var(--Mistox-White); - color: var(--Mistox-White); + background-color: var(--mistox-button-primary); + color: var(--mistox-border-light); text-decoration: none; } button:hover { - background-color: #00000044; - color: var(--Mistox-Light); + background-color: var(--mistox-button-primary-click); } .full-width { @@ -31,12 +29,14 @@ button { } .tile{ - background-color: var(--Mistox-Dark); - color: var(--Mistox-White); break-inside: avoid; padding: 20px; border-radius: 20px; margin-bottom: 20px; + background-color: var(--mistox-bg-medium); + border: 1px solid var(--mistox-border); + box-shadow: var(--mistox-shadow); + color: var(--mistox-text); } .jobs-frame { diff --git a/src/Client/src/styles.css b/src/Client/src/styles.css index 15e206c..81dd7be 100644 --- a/src/Client/src/styles.css +++ b/src/Client/src/styles.css @@ -1,15 +1,53 @@ /* You can add global styles to this file, and also import other style files */ :root { - --Mistox-Dark: #2C0703; - --Mistox-Medium: #890620; - --Mistox-Light: #B6465F; - --Mistox-Bright: #FC440F; - --Mistox-Frame: #FFE0A5; - --Mistox-Button: #ff9999; - --Mistox-Button-Hover: #ff999977; - --Mistox-White: #FFF; - --Mistox-Black: #000; + --mistox-bg-dark: oklch(0.92 0.065 264); + --mistox-bg-medium: oklch(0.96 0.065 264); + --mistox-bg-light: oklch(1 0.065 264); + + --mistox-text: oklch(0.15 0.13 264); + --mistox-text-sub: oklch(0.4 0.13 264); + + --mistox-border-light: oklch(1 0.13 264); + --mistox-border: oklch(0.6 0.13 264); + --mistox-border-dark: oklch(0.7 0.13 264); + + --mistox-button-primary: oklch(0.4 0.13 264); + --mistox-button-primary-click: oklch(0.3 0.13 264); + + --mistox-button-secondary: oklch(0.4 0.13 84); + --mistox-button-secondary-click: oklch(0.3 0.13 84); + + --mistox-alert-danger: oklch(0.5 0.13 30); + --mistox-alert-warning: oklch(0.5 0.13 100); + --mistox-alert-success: oklch(0.5 0.13 160); + --mistox-alert-info: oklch(0.5 0.13 260); + + --mistox-shadow: 0px 2px 2px oklch(0 0 0 / 0.2), 0px 4px 4px oklch(0 0 0 / 0.1); + font-family: Arial, Helvetica, sans-serif; +} + +dark-mode { + --mistox-bg-dark: oklch(0.1 0.065 264); + --mistox-bg-medium: oklch(0.15 0.065 264); + --mistox-bg-light: oklch(0.2 0.065 264); + + --mistox-text: oklch(0.96 0.1 264); + --mistox-text-sub: oklch(0.76 0.1 264); + + --mistox-border-light: oklch(0.5 0.13 264); + --mistox-border: oklch(0.4 0.13 264); + --mistox-border-dark: oklch(0.3 0.13 264); + + --mistox-button-primary: oklch(0.76 0.13 264); + --mistox-button-secondary: oklch(0.76 0.13 84); + + --mistox-alert-danger: oklch(0.7 0.13 30); + --mistox-alert-warning: oklch(0.7 0.13 100); + --mistox-alert-success: oklch(0.7 0.13 160); + --mistox-alert-info: oklch(0.7 0.13 260); + + --mistox-shadow: 0px 2px 2px oklch(0 0 0 / 0.2), 0px 4px 4px oklch(0 0 0 / 0.1); font-family: Arial, Helvetica, sans-serif; } @@ -19,5 +57,5 @@ html { body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23999999' fill-opacity='0.2' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); - background-color: #fff; + background-color: var(--mistox-bg-dark); } \ No newline at end of file -- 2.52.0