Skip to content
Snippets Groups Projects
Commit 5e22791f authored by Rebecca Müller's avatar Rebecca Müller
Browse files

Add new file

parent aaee58f9
No related branches found
No related tags found
No related merge requests found
main.css 0 → 100644
body {
background: #f7f7f7;
}
.content {
margin-left: 2rem;
margin-right: 2rem;
font-family: Tahoma, Arial, sans-serif;
}
.grid-container-elementsandrgraph {
display: grid;
grid-template-columns: 50% 50%;
}
.grid-container-elementsandrgraph > div {
padding: 10px;
}
.graph {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 3%;
box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
}
.grid-container1 {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
gap: 10px;
padding: 10px;
}
.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;
}
.grid-container2 {
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto;
gap: 10px;
padding: 10px;
width: 50%;
}
.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;
}
.grid-container2 .progressbar {
width: 170px;
height: 190px;
position: relative;
align-items: center;
justify-content: center;
}
.progressbar:hover {
transform: scale(1.03);
transition: transform 0.2s;
}
.active {
background-color: aliceblue !important;
transform: scale(1.02);
transition: transform 0.2s;
}
.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);
}
.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);
}
.grid-container2 #number {
font-size: 30px;
font-weight: 600;
}
.grid-container2 circle {
--fill: 440;
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;
}
.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;
}
.svgContainer {
display: none;
width: 50%;
height: 50%;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment