69 lines
1.7 KiB
CSS
69 lines
1.7 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap');
|
|
|
|
#widget {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#donationgoal {
|
|
position: relative;
|
|
width: calc(100% - 50px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 40px;
|
|
justify-content: center;
|
|
font-family: 'Montserrat';
|
|
font-weight: 800;
|
|
margin-left: 50px;
|
|
}
|
|
|
|
.bar {
|
|
position: relative;
|
|
padding: 25px;
|
|
border-radius: 45px;
|
|
outline: 4px solid black;
|
|
background-image: linear-gradient(to right, #fcf3f6, #ffd0e0);
|
|
}
|
|
|
|
.bar::before {
|
|
position: absolute;
|
|
content: '';
|
|
left: -50px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 40px;
|
|
aspect-ratio: 1;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='800' height='800' viewBox='0 0 475.528 475.528'%3E%3Cpath d='m237.376 436.245.774.976c210.94-85.154 292.221-282.553 199.331-367.706-92.899-85.154-199.331 30.953-199.331 30.953h-.774S130.936-15.639 38.045 69.515c-92.889 85.143-11.608 281.577 199.331 366.73z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
#name {
|
|
color: black;
|
|
width: fit-content;
|
|
margin-bottom: 15px;
|
|
margin-left: 50px;
|
|
font-size: 42px;
|
|
border-bottom: 2px solid black;
|
|
}
|
|
|
|
.progress {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 50px;
|
|
background-color: #fdf4f7;
|
|
outline: 4px solid black;
|
|
border-radius: 25px;
|
|
}
|
|
|
|
.progress::before {
|
|
position: absolute;
|
|
content: '';
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
background-color: #fe9dbe;
|
|
max-width: var(--progress);
|
|
transition: max-width 1.2s ease-in-out;
|
|
}
|