diff options
Diffstat (limited to 'FrontEnd/src/views/common')
-rw-r--r-- | FrontEnd/src/views/common/button/Button.css | 14 | ||||
-rw-r--r-- | FrontEnd/src/views/common/index.css | 5 | ||||
-rw-r--r-- | FrontEnd/src/views/common/theme.css | 296 |
3 files changed, 168 insertions, 147 deletions
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css index e0b8e733..7a271446 100644 --- a/FrontEnd/src/views/common/button/Button.css +++ b/FrontEnd/src/views/common/button/Button.css @@ -1,5 +1,5 @@ .cru-button:not(.outline) {
- color: var(--cru-text-color);
+ color: var(--cru-light-color);
cursor: pointer;
padding: 0.2em 0.5em;
border-radius: 0.2em;
@@ -9,11 +9,11 @@ }
.cru-button:not(.outline):hover {
- background-color: var(--cru-theme-f1-color);
+ background-color: var(--cru-theme-b1-color);
}
.cru-button:not(.outline):active {
- background-color: var(--cru-theme-f2-color);
+ background-color: var(--cru-theme-b2-color);
}
.cru-button:not(.outline):disabled {
@@ -32,14 +32,14 @@ }
.cru-button.outline:hover {
- color: var(--cru-theme-f1-color);
- border-color: var(--cru-theme-f1-color);
+ color: var(--cru-theme-b1-color);
+ border-color: var(--cru-theme-b1-color);
background-color: var(--cru-background-color);
}
.cru-button.outline:active {
- color: var(--cru-theme-f2-color);
- border-color: var(--cru-theme-f2-color);
+ color: var(--cru-theme-b2-color);
+ border-color: var(--cru-theme-b2-color);
background-color: var(--cru-background-1-color);
}
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css index 06f2556b..16a7f924 100644 --- a/FrontEnd/src/views/common/index.css +++ b/FrontEnd/src/views/common/index.css @@ -1,5 +1,10 @@ @import "./theme.css";
+body {
+ background: var(--cru-bg-color);
+ color: var(--cru-text-color);
+}
+
.cru-text-center {
text-align: center;
}
diff --git a/FrontEnd/src/views/common/theme.css b/FrontEnd/src/views/common/theme.css index 816bd3d1..9dfa1d9a 100644 --- a/FrontEnd/src/views/common/theme.css +++ b/FrontEnd/src/views/common/theme.css @@ -2,163 +2,179 @@ :root { --cru-primary-color: hsl(210 100% 50%); - --cru-primary-l1-color: hsl(210 100% 60%); - --cru-primary-l2-color: hsl(210 100% 70%); - --cru-primary-l3-color: hsl(210 100% 80%); - --cru-primary-d1-color: hsl(210 100% 40%); - --cru-primary-d2-color: hsl(210 100% 30%); - --cru-primary-d3-color: hsl(210 100% 20%); - --cru-primary-f1-color: hsl(210 100% 60%); - --cru-primary-f2-color: hsl(210 100% 70%); - --cru-primary-f3-color: hsl(210 100% 80%); - --cru-primary-b1-color: hsl(210 100% 40%); - --cru-primary-b2-color: hsl(210 100% 30%); - --cru-primary-b3-color: hsl(210 100% 20%); + --cru-primary-l1-color: hsl(210 100% 55%); + --cru-primary-l2-color: hsl(210 100% 60%); + --cru-primary-l3-color: hsl(210 100% 65%); + --cru-primary-d1-color: hsl(210 100% 45%); + --cru-primary-d2-color: hsl(210 100% 40%); + --cru-primary-d3-color: hsl(210 100% 35%); + --cru-primary-f1-color: hsl(210 100% 55%); + --cru-primary-f2-color: hsl(210 100% 60%); + --cru-primary-f3-color: hsl(210 100% 65%); + --cru-primary-b1-color: hsl(210 100% 45%); + --cru-primary-b2-color: hsl(210 100% 40%); + --cru-primary-b3-color: hsl(210 100% 35%); --cru-secondary-color: hsl(40 100% 50%); - --cru-secondary-l1-color: hsl(40 100% 60%); - --cru-secondary-l2-color: hsl(40 100% 70%); - --cru-secondary-l3-color: hsl(40 100% 80%); - --cru-secondary-d1-color: hsl(40 100% 40%); - --cru-secondary-d2-color: hsl(40 100% 30%); - --cru-secondary-d3-color: hsl(40 100% 20%); - --cru-secondary-f1-color: hsl(40 100% 60%); - --cru-secondary-f2-color: hsl(40 100% 70%); - --cru-secondary-f3-color: hsl(40 100% 80%); - --cru-secondary-b1-color: hsl(40 100% 40%); - --cru-secondary-b2-color: hsl(40 100% 30%); - --cru-secondary-b3-color: hsl(40 100% 20%); + --cru-secondary-l1-color: hsl(40 100% 55%); + --cru-secondary-l2-color: hsl(40 100% 60%); + --cru-secondary-l3-color: hsl(40 100% 65%); + --cru-secondary-d1-color: hsl(40 100% 45%); + --cru-secondary-d2-color: hsl(40 100% 40%); + --cru-secondary-d3-color: hsl(40 100% 35%); + --cru-secondary-f1-color: hsl(40 100% 55%); + --cru-secondary-f2-color: hsl(40 100% 60%); + --cru-secondary-f3-color: hsl(40 100% 65%); + --cru-secondary-b1-color: hsl(40 100% 45%); + --cru-secondary-b2-color: hsl(40 100% 40%); + --cru-secondary-b3-color: hsl(40 100% 35%); --cru-tertiary-color: hsl(160 100% 50%); - --cru-tertiary-l1-color: hsl(160 100% 60%); - --cru-tertiary-l2-color: hsl(160 100% 70%); - --cru-tertiary-l3-color: hsl(160 100% 80%); - --cru-tertiary-d1-color: hsl(160 100% 40%); - --cru-tertiary-d2-color: hsl(160 100% 30%); - --cru-tertiary-d3-color: hsl(160 100% 20%); - --cru-tertiary-f1-color: hsl(160 100% 60%); - --cru-tertiary-f2-color: hsl(160 100% 70%); - --cru-tertiary-f3-color: hsl(160 100% 80%); - --cru-tertiary-b1-color: hsl(160 100% 40%); - --cru-tertiary-b2-color: hsl(160 100% 30%); - --cru-tertiary-b3-color: hsl(160 100% 20%); + --cru-tertiary-l1-color: hsl(160 100% 55%); + --cru-tertiary-l2-color: hsl(160 100% 60%); + --cru-tertiary-l3-color: hsl(160 100% 65%); + --cru-tertiary-d1-color: hsl(160 100% 45%); + --cru-tertiary-d2-color: hsl(160 100% 40%); + --cru-tertiary-d3-color: hsl(160 100% 35%); + --cru-tertiary-f1-color: hsl(160 100% 55%); + --cru-tertiary-f2-color: hsl(160 100% 60%); + --cru-tertiary-f3-color: hsl(160 100% 65%); + --cru-tertiary-b1-color: hsl(160 100% 45%); + --cru-tertiary-b2-color: hsl(160 100% 40%); + --cru-tertiary-b3-color: hsl(160 100% 35%); --cru-danger-color: hsl(0 100% 50%); - --cru-danger-l1-color: hsl(0 100% 60%); - --cru-danger-l2-color: hsl(0 100% 70%); - --cru-danger-l3-color: hsl(0 100% 80%); - --cru-danger-d1-color: hsl(0 100% 40%); - --cru-danger-d2-color: hsl(0 100% 30%); - --cru-danger-d3-color: hsl(0 100% 20%); - --cru-danger-f1-color: hsl(0 100% 60%); - --cru-danger-f2-color: hsl(0 100% 70%); - --cru-danger-f3-color: hsl(0 100% 80%); - --cru-danger-b1-color: hsl(0 100% 40%); - --cru-danger-b2-color: hsl(0 100% 30%); - --cru-danger-b3-color: hsl(0 100% 20%); - --cru-success-color: hsl(120 100% 50%); - --cru-success-l1-color: hsl(120 100% 60%); - --cru-success-l2-color: hsl(120 100% 70%); - --cru-success-l3-color: hsl(120 100% 80%); - --cru-success-d1-color: hsl(120 100% 40%); - --cru-success-d2-color: hsl(120 100% 30%); - --cru-success-d3-color: hsl(120 100% 20%); - --cru-success-f1-color: hsl(120 100% 60%); - --cru-success-f2-color: hsl(120 100% 70%); - --cru-success-f3-color: hsl(120 100% 80%); - --cru-success-b1-color: hsl(120 100% 40%); - --cru-success-b2-color: hsl(120 100% 30%); - --cru-success-b3-color: hsl(120 100% 20%); + --cru-danger-l1-color: hsl(0 100% 55%); + --cru-danger-l2-color: hsl(0 100% 60%); + --cru-danger-l3-color: hsl(0 100% 65%); + --cru-danger-d1-color: hsl(0 100% 45%); + --cru-danger-d2-color: hsl(0 100% 40%); + --cru-danger-d3-color: hsl(0 100% 35%); + --cru-danger-f1-color: hsl(0 100% 55%); + --cru-danger-f2-color: hsl(0 100% 60%); + --cru-danger-f3-color: hsl(0 100% 65%); + --cru-danger-b1-color: hsl(0 100% 45%); + --cru-danger-b2-color: hsl(0 100% 40%); + --cru-danger-b3-color: hsl(0 100% 35%); + --cru-success-color: hsl(120 60% 50%); + --cru-success-l1-color: hsl(120 60% 55%); + --cru-success-l2-color: hsl(120 60% 60%); + --cru-success-l3-color: hsl(120 60% 65%); + --cru-success-d1-color: hsl(120 60% 45%); + --cru-success-d2-color: hsl(120 60% 40%); + --cru-success-d3-color: hsl(120 60% 35%); + --cru-success-f1-color: hsl(120 60% 55%); + --cru-success-f2-color: hsl(120 60% 60%); + --cru-success-f3-color: hsl(120 60% 65%); + --cru-success-b1-color: hsl(120 60% 45%); + --cru-success-b2-color: hsl(120 60% 40%); + --cru-success-b3-color: hsl(120 60% 35%); --cru-text-color: hsl(0 0% 0%); - --cru-text-1-color: hsl(0 0% 10%); - --cru-text-2-color: hsl(0 0% 20%); - --cru-text-3-color: hsl(0 0% 30%); + --cru-text-1-color: hsl(0 0% 5%); + --cru-text-2-color: hsl(0 0% 10%); + --cru-text-3-color: hsl(0 0% 15%); --cru-bg-color: hsl(0 0% 100%); - --cru-bg-1-color: hsl(0 0% 90%); - --cru-bg-2-color: hsl(0 0% 80%); - --cru-bg-3-color: hsl(0 0% 70%); + --cru-bg-1-color: hsl(0 0% 95%); + --cru-bg-2-color: hsl(0 0% 90%); + --cru-bg-3-color: hsl(0 0% 85%); + --cru-light-color: hsl(0 0% 100%); + --cru-light-1-color: hsl(0 0% 95%); + --cru-light-2-color: hsl(0 0% 90%); + --cru-light-3-color: hsl(0 0% 85%); + --cru-dark-color: hsl(0 0% 0%); + --cru-dark-1-color: hsl(0 0% 5%); + --cru-dark-2-color: hsl(0 0% 10%); + --cru-dark-3-color: hsl(0 0% 15%); --cru-disabled-color: hsl(0 0% 75%); - --cru-disabled-1-color: hsl(0 0% 65%); - --cru-disabled-2-color: hsl(0 0% 55%); - --cru-disabled-3-color: hsl(0 0% 45%); + --cru-disabled-1-color: hsl(0 0% 70%); + --cru-disabled-2-color: hsl(0 0% 65%); + --cru-disabled-3-color: hsl(0 0% 60%); } @media (prefers-color-scheme: dark) { :root { --cru-primary-color: hsl(210 100% 50%); - --cru-primary-l1-color: hsl(210 100% 60%); - --cru-primary-l2-color: hsl(210 100% 70%); - --cru-primary-l3-color: hsl(210 100% 80%); - --cru-primary-d1-color: hsl(210 100% 40%); - --cru-primary-d2-color: hsl(210 100% 30%); - --cru-primary-d3-color: hsl(210 100% 20%); - --cru-primary-f1-color: hsl(210 100% 40%); - --cru-primary-f2-color: hsl(210 100% 30%); - --cru-primary-f3-color: hsl(210 100% 20%); - --cru-primary-b1-color: hsl(210 100% 60%); - --cru-primary-b2-color: hsl(210 100% 70%); - --cru-primary-b3-color: hsl(210 100% 80%); + --cru-primary-l1-color: hsl(210 100% 55%); + --cru-primary-l2-color: hsl(210 100% 60%); + --cru-primary-l3-color: hsl(210 100% 65%); + --cru-primary-d1-color: hsl(210 100% 45%); + --cru-primary-d2-color: hsl(210 100% 40%); + --cru-primary-d3-color: hsl(210 100% 35%); + --cru-primary-f1-color: hsl(210 100% 45%); + --cru-primary-f2-color: hsl(210 100% 40%); + --cru-primary-f3-color: hsl(210 100% 35%); + --cru-primary-b1-color: hsl(210 100% 55%); + --cru-primary-b2-color: hsl(210 100% 60%); + --cru-primary-b3-color: hsl(210 100% 65%); --cru-secondary-color: hsl(40 100% 50%); - --cru-secondary-l1-color: hsl(40 100% 60%); - --cru-secondary-l2-color: hsl(40 100% 70%); - --cru-secondary-l3-color: hsl(40 100% 80%); - --cru-secondary-d1-color: hsl(40 100% 40%); - --cru-secondary-d2-color: hsl(40 100% 30%); - --cru-secondary-d3-color: hsl(40 100% 20%); - --cru-secondary-f1-color: hsl(40 100% 40%); - --cru-secondary-f2-color: hsl(40 100% 30%); - --cru-secondary-f3-color: hsl(40 100% 20%); - --cru-secondary-b1-color: hsl(40 100% 60%); - --cru-secondary-b2-color: hsl(40 100% 70%); - --cru-secondary-b3-color: hsl(40 100% 80%); + --cru-secondary-l1-color: hsl(40 100% 55%); + --cru-secondary-l2-color: hsl(40 100% 60%); + --cru-secondary-l3-color: hsl(40 100% 65%); + --cru-secondary-d1-color: hsl(40 100% 45%); + --cru-secondary-d2-color: hsl(40 100% 40%); + --cru-secondary-d3-color: hsl(40 100% 35%); + --cru-secondary-f1-color: hsl(40 100% 45%); + --cru-secondary-f2-color: hsl(40 100% 40%); + --cru-secondary-f3-color: hsl(40 100% 35%); + --cru-secondary-b1-color: hsl(40 100% 55%); + --cru-secondary-b2-color: hsl(40 100% 60%); + --cru-secondary-b3-color: hsl(40 100% 65%); --cru-tertiary-color: hsl(160 100% 50%); - --cru-tertiary-l1-color: hsl(160 100% 60%); - --cru-tertiary-l2-color: hsl(160 100% 70%); - --cru-tertiary-l3-color: hsl(160 100% 80%); - --cru-tertiary-d1-color: hsl(160 100% 40%); - --cru-tertiary-d2-color: hsl(160 100% 30%); - --cru-tertiary-d3-color: hsl(160 100% 20%); - --cru-tertiary-f1-color: hsl(160 100% 40%); - --cru-tertiary-f2-color: hsl(160 100% 30%); - --cru-tertiary-f3-color: hsl(160 100% 20%); - --cru-tertiary-b1-color: hsl(160 100% 60%); - --cru-tertiary-b2-color: hsl(160 100% 70%); - --cru-tertiary-b3-color: hsl(160 100% 80%); + --cru-tertiary-l1-color: hsl(160 100% 55%); + --cru-tertiary-l2-color: hsl(160 100% 60%); + --cru-tertiary-l3-color: hsl(160 100% 65%); + --cru-tertiary-d1-color: hsl(160 100% 45%); + --cru-tertiary-d2-color: hsl(160 100% 40%); + --cru-tertiary-d3-color: hsl(160 100% 35%); + --cru-tertiary-f1-color: hsl(160 100% 45%); + --cru-tertiary-f2-color: hsl(160 100% 40%); + --cru-tertiary-f3-color: hsl(160 100% 35%); + --cru-tertiary-b1-color: hsl(160 100% 55%); + --cru-tertiary-b2-color: hsl(160 100% 60%); + --cru-tertiary-b3-color: hsl(160 100% 65%); --cru-danger-color: hsl(0 100% 50%); - --cru-danger-l1-color: hsl(0 100% 60%); - --cru-danger-l2-color: hsl(0 100% 70%); - --cru-danger-l3-color: hsl(0 100% 80%); - --cru-danger-d1-color: hsl(0 100% 40%); - --cru-danger-d2-color: hsl(0 100% 30%); - --cru-danger-d3-color: hsl(0 100% 20%); - --cru-danger-f1-color: hsl(0 100% 40%); - --cru-danger-f2-color: hsl(0 100% 30%); - --cru-danger-f3-color: hsl(0 100% 20%); - --cru-danger-b1-color: hsl(0 100% 60%); - --cru-danger-b2-color: hsl(0 100% 70%); - --cru-danger-b3-color: hsl(0 100% 80%); - --cru-success-color: hsl(120 100% 50%); - --cru-success-l1-color: hsl(120 100% 60%); - --cru-success-l2-color: hsl(120 100% 70%); - --cru-success-l3-color: hsl(120 100% 80%); - --cru-success-d1-color: hsl(120 100% 40%); - --cru-success-d2-color: hsl(120 100% 30%); - --cru-success-d3-color: hsl(120 100% 20%); - --cru-success-f1-color: hsl(120 100% 40%); - --cru-success-f2-color: hsl(120 100% 30%); - --cru-success-f3-color: hsl(120 100% 20%); - --cru-success-b1-color: hsl(120 100% 60%); - --cru-success-b2-color: hsl(120 100% 70%); - --cru-success-b3-color: hsl(120 100% 80%); + --cru-danger-l1-color: hsl(0 100% 55%); + --cru-danger-l2-color: hsl(0 100% 60%); + --cru-danger-l3-color: hsl(0 100% 65%); + --cru-danger-d1-color: hsl(0 100% 45%); + --cru-danger-d2-color: hsl(0 100% 40%); + --cru-danger-d3-color: hsl(0 100% 35%); + --cru-danger-f1-color: hsl(0 100% 45%); + --cru-danger-f2-color: hsl(0 100% 40%); + --cru-danger-f3-color: hsl(0 100% 35%); + --cru-danger-b1-color: hsl(0 100% 55%); + --cru-danger-b2-color: hsl(0 100% 60%); + --cru-danger-b3-color: hsl(0 100% 65%); + --cru-success-color: hsl(120 60% 50%); + --cru-success-l1-color: hsl(120 60% 55%); + --cru-success-l2-color: hsl(120 60% 60%); + --cru-success-l3-color: hsl(120 60% 65%); + --cru-success-d1-color: hsl(120 60% 45%); + --cru-success-d2-color: hsl(120 60% 40%); + --cru-success-d3-color: hsl(120 60% 35%); + --cru-success-f1-color: hsl(120 60% 45%); + --cru-success-f2-color: hsl(120 60% 40%); + --cru-success-f3-color: hsl(120 60% 35%); + --cru-success-b1-color: hsl(120 60% 55%); + --cru-success-b2-color: hsl(120 60% 60%); + --cru-success-b3-color: hsl(120 60% 65%); --cru-text-color: hsl(0 0% 100%); - --cru-text-1-color: hsl(0 0% 90%); - --cru-text-2-color: hsl(0 0% 80%); - --cru-text-3-color: hsl(0 0% 70%); + --cru-text-1-color: hsl(0 0% 95%); + --cru-text-2-color: hsl(0 0% 90%); + --cru-text-3-color: hsl(0 0% 85%); --cru-bg-color: hsl(0 0% 0%); - --cru-bg-1-color: hsl(0 0% 10%); - --cru-bg-2-color: hsl(0 0% 20%); - --cru-bg-3-color: hsl(0 0% 30%); + --cru-bg-1-color: hsl(0 0% 5%); + --cru-bg-2-color: hsl(0 0% 10%); + --cru-bg-3-color: hsl(0 0% 15%); + --cru-light-color: hsl(0 0% 100%); + --cru-light-1-color: hsl(0 0% 95%); + --cru-light-2-color: hsl(0 0% 90%); + --cru-light-3-color: hsl(0 0% 85%); + --cru-dark-color: hsl(0 0% 0%); + --cru-dark-1-color: hsl(0 0% 5%); + --cru-dark-2-color: hsl(0 0% 10%); + --cru-dark-3-color: hsl(0 0% 15%); --cru-disabled-color: hsl(0 0% 25%); - --cru-disabled-1-color: hsl(0 0% 35%); - --cru-disabled-2-color: hsl(0 0% 45%); - --cru-disabled-3-color: hsl(0 0% 55%); + --cru-disabled-1-color: hsl(0 0% 30%); + --cru-disabled-2-color: hsl(0 0% 35%); + --cru-disabled-3-color: hsl(0 0% 40%); } } |