aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd/src')
-rw-r--r--FrontEnd/src/views/common/AppBar.css7
-rw-r--r--FrontEnd/src/views/common/button/Button.css21
-rw-r--r--FrontEnd/src/views/common/button/FlatButton.css6
-rw-r--r--FrontEnd/src/views/common/index.css4
-rw-r--r--FrontEnd/src/views/common/theme-color.css64
-rw-r--r--FrontEnd/src/views/common/theme.css30
6 files changed, 88 insertions, 44 deletions
diff --git a/FrontEnd/src/views/common/AppBar.css b/FrontEnd/src/views/common/AppBar.css
index 67fd9516..c278aa1e 100644
--- a/FrontEnd/src/views/common/AppBar.css
+++ b/FrontEnd/src/views/common/AppBar.css
@@ -37,18 +37,19 @@
display: flex;
align-items: center;
padding: 0 1em;
+ transition: all 0.5s;
}
.app-bar.desktop a:hover {
- filter: brightness(var(--cru-hover-brightness));
+ background-color: var(--cru-primary-1-color);
}
.app-bar.desktop a:focus {
- filter: brightness(var(--cru-focus-brightness));
+ background-color: var(--cru-primary-1-color);
}
.app-bar.desktop a:active {
- filter: brightness(var(--cru-press-brightness));
+ background-color: var(--cru-primary-2-color);
}
.app-bar.desktop .app-bar-user-area {
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index dacea3e1..55563e00 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -14,15 +14,18 @@
}
.cru-button:not(.outline):hover {
- filter: brightness(var(--cru-hover-darkness));
+ background-color: var(--cru-key-1-color);
+ border-color: var(--cru-key-1-color);
}
.cru-button:not(.outline):focus {
- filter: brightness(var(--cru-focus-darkness));
+ background-color: var(--cru-key-1-color);
+ border-color: var(--cru-key-1-color);
}
.cru-button:not(.outline):active {
- filter: brightness(var(--cru-press-darkness));
+ background-color: var(--cru-key-2-color);
+ border-color: var(--cru-key-2-color);
}
.cru-button:not(.outline):disabled {
@@ -33,20 +36,22 @@
.cru-button.outline {
color: var(--cru-key-color);
- border: var(--cru-key-color) 1px solid;
- background-color: var(--cru-surface-color);
+ border-color: var(--cru-key-color);
}
.cru-button.outline:hover {
- filter: brightness(var(--cru-hover-brightness));
+ color: var(--cru-key-1-color);
+ border-color: var(--cru-key-1-color);
}
.cru-button.outline:focus {
- filter: brightness(var(--cru-focus-brightness));
+ color: var(--cru-key-1-color);
+ border-color: var(--cru-key-1-color);
}
.cru-button.outline:active {
- filter: brightness(var(--cru-press-brightness));
+ color: var(--cru-key-2-color);
+ border-color: var(--cru-key-2-color);
}
.cru-button.outline:disabled {
diff --git a/FrontEnd/src/views/common/button/FlatButton.css b/FrontEnd/src/views/common/button/FlatButton.css
index f9a7d772..921fafe4 100644
--- a/FrontEnd/src/views/common/button/FlatButton.css
+++ b/FrontEnd/src/views/common/button/FlatButton.css
@@ -10,15 +10,15 @@
}
.cru-flat-button:hover {
- filter: brightness(var(--cru-hover-darkness));
+ background-color: var(--cru-surface-1-color);
}
.cru-flat-button:focus {
- filter: brightness(var(--cru-focus-darkness));
+ background-color: var(--cru-surface-1-color);
}
.cru-flat-button:active {
- filter: brightness(var(--cru-press-darkness));
+ background-color: var(--cru-surface-2-color);
}
.cru-flat-button.disabled {
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index f87fdfd2..789a0f05 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -12,6 +12,10 @@ body {
color: var(--cru-surface-on-color);
}
+button {
+ background-color: unset;
+}
+
.cru-text-center {
text-align: center;
}
diff --git a/FrontEnd/src/views/common/theme-color.css b/FrontEnd/src/views/common/theme-color.css
index 7cb9a8f8..24a7e267 100644
--- a/FrontEnd/src/views/common/theme-color.css
+++ b/FrontEnd/src/views/common/theme-color.css
@@ -2,27 +2,49 @@
:root {
--cru-primary-color: hsl(210 100% 40%);
+ --cru-primary-1-color: hsl(210 100% 37%);
+ --cru-primary-2-color: hsl(210 100% 34%);
--cru-primary-on-color: hsl(210 100% 100%);
--cru-primary-container-color: hsl(210 100% 90%);
+ --cru-primary-container-1-color: hsl(210 100% 80%);
+ --cru-primary-container-2-color: hsl(210 100% 70%);
--cru-primary-on-container-color: hsl(210 100% 10%);
--cru-secondary-color: hsl(40 100% 40%);
+ --cru-secondary-1-color: hsl(40 100% 37%);
+ --cru-secondary-2-color: hsl(40 100% 34%);
--cru-secondary-on-color: hsl(40 100% 100%);
--cru-secondary-container-color: hsl(40 100% 90%);
+ --cru-secondary-container-1-color: hsl(40 100% 80%);
+ --cru-secondary-container-2-color: hsl(40 100% 70%);
--cru-secondary-on-container-color: hsl(40 100% 10%);
--cru-tertiary-color: hsl(160 100% 40%);
+ --cru-tertiary-1-color: hsl(160 100% 37%);
+ --cru-tertiary-2-color: hsl(160 100% 34%);
--cru-tertiary-on-color: hsl(160 100% 100%);
--cru-tertiary-container-color: hsl(160 100% 90%);
+ --cru-tertiary-container-1-color: hsl(160 100% 80%);
+ --cru-tertiary-container-2-color: hsl(160 100% 70%);
--cru-tertiary-on-container-color: hsl(160 100% 10%);
--cru-danger-color: hsl(0 100% 40%);
+ --cru-danger-1-color: hsl(0 100% 37%);
+ --cru-danger-2-color: hsl(0 100% 34%);
--cru-danger-on-color: hsl(0 100% 100%);
--cru-danger-container-color: hsl(0 100% 90%);
+ --cru-danger-container-1-color: hsl(0 100% 80%);
+ --cru-danger-container-2-color: hsl(0 100% 70%);
--cru-danger-on-container-color: hsl(0 100% 10%);
--cru-success-color: hsl(120 60% 40%);
+ --cru-success-1-color: hsl(120 60% 37%);
+ --cru-success-2-color: hsl(120 60% 34%);
--cru-success-on-color: hsl(120 60% 100%);
--cru-success-container-color: hsl(120 60% 90%);
+ --cru-success-container-1-color: hsl(120 60% 80%);
+ --cru-success-container-2-color: hsl(120 60% 70%);
--cru-success-on-container-color: hsl(120 60% 10%);
--cru-surface-dim-color: hsl(0 0% 87%);
--cru-surface-color: hsl(0 0% 98%);
+ --cru-surface-1-color: hsl(0 0% 90%);
+ --cru-surface-2-color: hsl(0 0% 82%);
--cru-surface-bright-color: hsl(0 0% 98%);
--cru-surface-container-lowest-color: hsl(0 0% 100%);
--cru-surface-container-low-color: hsl(0 0% 96%);
@@ -38,27 +60,49 @@
@media (prefers-color-scheme: dark) {
:root {
--cru-primary-color: hsl(210 100% 80%);
+ --cru-primary-1-color: hsl(210 100% 75%);
+ --cru-primary-2-color: hsl(210 100% 68%);
--cru-primary-on-color: hsl(210 100% 20%);
--cru-primary-container-color: hsl(210 100% 30%);
+ --cru-primary-container-1-color: hsl(210 100% 25%);
+ --cru-primary-container-2-color: hsl(210 100% 20%);
--cru-primary-on-container-color: hsl(210 100% 90%);
--cru-secondary-color: hsl(40 100% 80%);
+ --cru-secondary-1-color: hsl(40 100% 75%);
+ --cru-secondary-2-color: hsl(40 100% 68%);
--cru-secondary-on-color: hsl(40 100% 20%);
--cru-secondary-container-color: hsl(40 100% 30%);
+ --cru-secondary-container-1-color: hsl(40 100% 25%);
+ --cru-secondary-container-2-color: hsl(40 100% 20%);
--cru-secondary-on-container-color: hsl(40 100% 90%);
--cru-tertiary-color: hsl(160 100% 80%);
+ --cru-tertiary-1-color: hsl(160 100% 75%);
+ --cru-tertiary-2-color: hsl(160 100% 68%);
--cru-tertiary-on-color: hsl(160 100% 20%);
--cru-tertiary-container-color: hsl(160 100% 30%);
+ --cru-tertiary-container-1-color: hsl(160 100% 25%);
+ --cru-tertiary-container-2-color: hsl(160 100% 20%);
--cru-tertiary-on-container-color: hsl(160 100% 90%);
--cru-danger-color: hsl(0 100% 80%);
+ --cru-danger-1-color: hsl(0 100% 75%);
+ --cru-danger-2-color: hsl(0 100% 68%);
--cru-danger-on-color: hsl(0 100% 20%);
--cru-danger-container-color: hsl(0 100% 30%);
+ --cru-danger-container-1-color: hsl(0 100% 25%);
+ --cru-danger-container-2-color: hsl(0 100% 20%);
--cru-danger-on-container-color: hsl(0 100% 90%);
--cru-success-color: hsl(120 60% 80%);
+ --cru-success-1-color: hsl(120 60% 75%);
+ --cru-success-2-color: hsl(120 60% 68%);
--cru-success-on-color: hsl(120 60% 20%);
--cru-success-container-color: hsl(120 60% 30%);
+ --cru-success-container-1-color: hsl(120 60% 25%);
+ --cru-success-container-2-color: hsl(120 60% 20%);
--cru-success-on-container-color: hsl(120 60% 90%);
--cru-surface-dim-color: hsl(0 0% 6%);
--cru-surface-color: hsl(0 0% 6%);
+ --cru-surface-1-color: hsl(0 0% 25%);
+ --cru-surface-2-color: hsl(0 0% 40%);
--cru-surface-bright-color: hsl(0 0% 24%);
--cru-surface-container-lowest-color: hsl(0 0% 4%);
--cru-surface-container-low-color: hsl(0 0% 10%);
@@ -74,36 +118,56 @@
.cru-primary {
--cru-key-color: var(--cru-primary-color);
+ --cru-key-1-color: var(--cru-primary-1-color);
+ --cru-key-2-color: var(--cru-primary-2-color);
--cru-key-on-color: var(--cru-primary-on-color);
--cru-key-container-color: var(--cru-primary-container-color);
+ --cru-key-container-1-color: var(--cru-primary-container-1-color);
+ --cru-key-container-2-color: var(--cru-primary-container-2-color);
--cru-key-on-container-color: var(--cru-primary-on-container-color);
}
.cru-secondary {
--cru-key-color: var(--cru-secondary-color);
+ --cru-key-1-color: var(--cru-secondary-1-color);
+ --cru-key-2-color: var(--cru-secondary-2-color);
--cru-key-on-color: var(--cru-secondary-on-color);
--cru-key-container-color: var(--cru-secondary-container-color);
+ --cru-key-container-1-color: var(--cru-secondary-container-1-color);
+ --cru-key-container-2-color: var(--cru-secondary-container-2-color);
--cru-key-on-container-color: var(--cru-secondary-on-container-color);
}
.cru-tertiary {
--cru-key-color: var(--cru-tertiary-color);
+ --cru-key-1-color: var(--cru-tertiary-1-color);
+ --cru-key-2-color: var(--cru-tertiary-2-color);
--cru-key-on-color: var(--cru-tertiary-on-color);
--cru-key-container-color: var(--cru-tertiary-container-color);
+ --cru-key-container-1-color: var(--cru-tertiary-container-1-color);
+ --cru-key-container-2-color: var(--cru-tertiary-container-2-color);
--cru-key-on-container-color: var(--cru-tertiary-on-container-color);
}
.cru-danger {
--cru-key-color: var(--cru-danger-color);
+ --cru-key-1-color: var(--cru-danger-1-color);
+ --cru-key-2-color: var(--cru-danger-2-color);
--cru-key-on-color: var(--cru-danger-on-color);
--cru-key-container-color: var(--cru-danger-container-color);
+ --cru-key-container-1-color: var(--cru-danger-container-1-color);
+ --cru-key-container-2-color: var(--cru-danger-container-2-color);
--cru-key-on-container-color: var(--cru-danger-on-container-color);
}
.cru-success {
--cru-key-color: var(--cru-success-color);
+ --cru-key-1-color: var(--cru-success-1-color);
+ --cru-key-2-color: var(--cru-success-2-color);
--cru-key-on-color: var(--cru-success-on-color);
--cru-key-container-color: var(--cru-success-container-color);
+ --cru-key-container-1-color: var(--cru-success-container-1-color);
+ --cru-key-container-2-color: var(--cru-success-container-2-color);
--cru-key-on-container-color: var(--cru-success-on-container-color);
}
diff --git a/FrontEnd/src/views/common/theme.css b/FrontEnd/src/views/common/theme.css
index 6cbc06b4..9c9e1645 100644
--- a/FrontEnd/src/views/common/theme.css
+++ b/FrontEnd/src/views/common/theme.css
@@ -1,36 +1,6 @@
@import "./theme-color.css";
:root {
- --cru-hover-lightness-change: 4%;
- --cru-focus-lightness-change: 10%;
- --cru-press-lightness-change: 10%;
- --cru-drag-lightness-change: 15%;
-
- --cru-hover-darkness: calc(100% - var(--cru-hover-lightness-change));
- --cru-focus-darkness: calc(100% - var(--cru-focus-lightness-change));
- --cru-press-darkness: calc(100% - var(--cru-press-lightness-change));
- --cru-drag-darkness: calc(100% - var(--cru-drag-lightness-change));
- --cru-hover-brightness: calc(100% + var(--cru-hover-lightness-change));
- --cru-focus-brightness: calc(100% + var(--cru-focus-lightness-change));
- --cru-press-brightness: calc(100% + var(--cru-press-lightness-change));
- --cru-drag-brightness: calc(100% + var(--cru-drag-lightness-change));
-}
-
-/*
-:hover {
- filter: brightness(var(--cru-hover-darkness));
-}
-
-:focus {
- filter: brightness(var(--cru-focus-darkness));
-}
-
-:active {
- filter: brightness(var(--cru-press-darkness));
-}
-*/
-
-:root {
--cru-default-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--cru-card-border-radius: 8px;
} \ No newline at end of file
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 17:28:55 +0000