From 815a45c34914c1f242a6293e9b18c521222ad915 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rebecca=20M=C3=BCller?=
<rebecca.mueller@student.reutlingen-university.de>
Date: Thu, 4 Apr 2024 11:36:46 +0000
Subject: [PATCH] Update style.css
---
style.css | 236 +++++++++++++++++++++++++++++++++++-------------------
1 file changed, 153 insertions(+), 83 deletions(-)
diff --git a/style.css b/style.css
index 1c91478..406c9db 100644
--- a/style.css
+++ b/style.css
@@ -1,134 +1,204 @@
body {
- background: #f7f7f7;
+ background: #f7f7f7;
}
.content {
- margin-left: 2rem;
- margin-right: 2rem;
- font-family: Tahoma, Arial, sans-serif;
+ margin-left: 2rem;
+ margin-right: 2rem;
+ font-family: Tahoma, Arial, sans-serif;
+ min-height: 1300px;
}
-.grid-container-elementsandrgraph {
- display: grid;
- grid-template-columns: 50% 50%;
+.grid-parent {
+ display: grid;
+ grid-template-columns: repeat(8, 1fr);
+ grid-column-gap: 10px;
+ grid-row-gap: 10px;
}
-.grid-container-elementsandrgraph > div {
- padding: 10px;
+.div1 {
+ grid-area: 1 / 1 / 2 / 3;
+}
+.div2 {
+ grid-area: 1 / 3 / 2 / 5;
+}
+.div3 {
+ grid-area: 1 / 5 / 2 / 7;
+}
+.div4 {
+ grid-area: 1 / 7 / 2 / 9;
+}
+.div5 {
+ grid-area: 2 / 1 / 3 / 2;
+}
+.div6 {
+ grid-area: 2 / 2 / 3 / 3;
+}
+.div7 {
+ grid-area: 2 / 3 / 3 / 4;
+}
+.div8 {
+ grid-area: 2 / 4 / 3 / 5;
+}
+.div9 {
+ grid-area: 3 / 1 / 4 / 2;
+}
+.div10 {
+ grid-area: 3 / 2 / 4 / 3;
+}
+.div11 {
+ grid-area: 3 / 3 / 4 / 4;
+}
+.div12 {
+ grid-area: 3 / 4 / 4 / 5;
+}
+.div13 {
+ grid-area: 2 / 5 / 4 / 9;
+}
+.div14 {
+ grid-area: 4 / 1 / 5 / 9;
}
-.graph {
- background-color: rgba(255, 255, 255, 0.8);
- border-radius: 3%;
- box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
+fieldset {
+ border: none;
+ margin: 0px;
+ padding: 0px;
+}
+fieldset > div {
+ display: flex;
+}
+
+fieldset > div > * {
+ align-self: baseline;
}
-.grid-container1 {
- display: grid;
- grid-template-columns: 25% 25% 25% 25%;
- gap: 10px;
- padding: 10px;
+fieldset > div > label {
+ padding-left: 5px;
}
-.grid-container1 > div {
- background-color: rgba(255, 255, 255, 0.8);
- text-align: left;
- padding: 10px;
- font-size: 15px;
- border-radius: 3%;
- box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
+.main-criterias {
+ background-color: rgba(255, 255, 255, 0.8);
+ text-align: left;
+ padding: 10px;
+ font-size: 15px;
+ border-radius: 5px;
+ box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
+ overflow-wrap: anywhere;
+}
+
+.main-criteria {
+ font-weight: 600;
}
.grid-container2 {
- display: grid;
- grid-template-columns: auto auto auto auto;
- grid-template-rows: auto auto;
- gap: 10px;
- padding: 10px;
- width: 50%;
+ display: flex;
+ align-itmes: center;
+ background-color: rgba(255, 255, 255, 0.8);
+ border-radius: 5px;
+ box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
}
.grid-container2 > div {
- background-color: rgba(255, 255, 255, 0.8);
- text-align: center;
- padding: 10px;
- font-size: 15px;
- border-radius: 3%;
- box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
+ text-align: center;
+ padding: 10px;
+ font-size: 15px;
}
.grid-container2 .progressbar {
- width: 170px;
- height: 190px;
- position: relative;
- align-items: center;
- justify-content: center;
+ flex: 1;
+ width: auto;
+ height: auto;
+ position: relative;
+ align-items: center;
+ justify-content: center;
+ text-align: -webkit-center !important;
}
.progressbar:hover {
- transform: scale(1.03);
- transition: transform 0.2s;
+ transform: scale(1.03);
+ transition: transform 0.2s;
}
.active {
- background-color: aliceblue !important;
- transform: scale(1.02);
- transition: transform 0.2s;
+ background-color: aliceblue !important;
+ transform: scale(1.02);
+ transition: transform 0.2s;
+ border-radius: 5px;
}
.grid-container2 .outer {
- width: 120px;
- height: 120px;
- border-radius: 50%;
- padding: 20px;
- box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15),
- -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
+ width: 73px;
+ height: 73px;
+ border-radius: 50%;
+ padding: 6px;
+ box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15),
+ -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
+
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.grid-container2 .inner {
- width: 120px;
- height: 120px;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
- inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
- -0.5px -0.5px 0px rgba(255, 255, 255, 1), 0.5px 0.5px 0px rgba(0, 0, 0, 0.15),
- 0px 12px 10px -10px rgba(0, 0, 0, 0.05);
+ width: 65px;
+ height: 65px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
+ inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
+ -0.5px -0.5px 0px rgba(255, 255, 255, 1),
+ 0.5px 0.5px 0px rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05);
}
.grid-container2 #number {
- font-size: 30px;
- font-weight: 600;
+ font-size: 15px;
+ font-weight: 600;
}
.grid-container2 circle {
- --fill: 440;
- fill: none;
- animation: anim 2s linear forwards;
- stroke-dashoffset: var(--fill);
- transition: stroke-dashoffset 2s;
+ --fill: 235;
+ fill: none;
+ animation: anim 2s linear forwards;
+ stroke-dashoffset: var(--fill);
+ transition: stroke-dashoffset 2s;
}
.grid-container2 svg {
- transform: rotate(270deg);
- position: absolute;
- top: 10px;
- left: 10px;
+ transform: rotate(270deg);
+ position: absolute;
+}
+
+.graph {
+ background-color: rgba(255, 255, 255, 0.8);
+ border-radius: 5px;
+ padding: 10px;
+ box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
}
.examples {
- width: auto;
- height: 160px;
- background-color: rgba(255, 255, 255, 0.8);
- border-radius: 3%;
- box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
- padding: 10px;
+ width: auto;
+ height: auto;
+ background-color: rgba(255, 255, 255, 0.8);
+ border-radius: 5px;
+ box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
+ padding: 10px;
+}
+
+.grid-examples {
+ display: grid;
+ grid-template-columns: auto auto;
+ align-items: center;
}
.svgContainer {
- display: none;
- width: 50%;
- height: 50%;
+ display: none;
+ width: auto;
+ height: auto;
+}
+
+.source {
+ font-size: 12px;
}
--
GitLab