AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor(card.css): CSS des Kopfbereichs für Reaktionsfähigkeit bearbeitet

Browse Source
This commit is contained in:
Developer 02
2024-10-16 01:54:02 +02:00
parent 8b86114998
commit e6011b6201
4 changed files with 39 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
EnvelopeGenerator.Web/wwwroot/css/card.css
View File

@@ -22,21 +22,23 @@
width: 100%;
}
.dd-card h6 {
opacity: 0.6;
margin: 0;
letter-spacing: 0.0625rem;
}
.dd-card h6 {
opacity: 0.6;
margin: 0;
letter-spacing: 0.0625rem;
font-size: clamp(0.6rem, 1.33vw, 0.8rem);
}
.dd-card h2 {
letter-spacing: 0.0625rem;
margin: 0;
font-size: clamp(1rem, 2.67vw, 1.67rem);
}
.uppercase {
text-transform: uppercase;
}
.dd-card h2 {
letter-spacing: 0.0625rem;
margin: 0;
}
.dd-card-preview {
background-color: #2A265F;
color: #fff;
@@ -48,14 +50,10 @@
align-items: center;
}
.dd-card-preview a {
color: #fff;
display: inline-block;
font-size: 0.75rem;
opacity: 0.6;
margin-top: 1.875rem;
text-decoration: none;
}
.dd-card-preview a {
color: #fff;
opacity: 0.6;
}
.dd-card-preview button {
border-width: 0;
@@ -75,35 +73,37 @@
}
.dd-card-info {
padding: 1rem 0 0 1.875rem;
padding: clamp(0.55rem, 2vw, .875rem) 0 0 clamp(0.55rem, 2.5vw, 1.7rem);
margin: 0;
position: relative;
width: 100%;
}
.dd-card-info p {
opacity: 0.6;
font-size: 0.75rem;
opacity: 0.6;
margin-top: .875rem;
.dd-card-info p, .dd-card-info a, .dd-card-info small, .dd-card-info span {
opacity: 0.65;
font-size: clamp(0.55rem, 1.23vw, 0.75rem);
margin: clamp(0.55rem, 2vw, .875rem) 0 clamp(0.55rem, 2vw, .875rem) 0;
text-decoration: none;
padding: 0;
}
.app-logo {
width: clamp(4rem, 10vw, 5rem);
margin: 1rem 0 0 0;
}
.progress-container {
text-align: right;
width: 100%;
margin: 1rem 0 0 0;
}
.app-logo {
width: 5rem;
margin: 1rem 0 0 0;
margin: clamp(0.8rem, 2vw, 1rem) 0 0 0;
}
.progress {
background-color: #ddd;
border-radius: 0.1875rem;
height: 0.3125rem;
width: 10rem;
height: clamp(0.25rem, 1vw, 0.3125rem);
width: clamp(6rem, 20vw, 10rem);
position: relative;
}
.progress::after {
@@ -112,14 +112,15 @@
position: absolute;
top: 0;
left: 0;
height: 0.3125rem;
height: clamp(0.25rem, 1vw, 0.3125rem);
width: var(--progress-width, 1%);
transition: width 1s ease;
opacity: 0.85;
}
.progress-text {
font-size: 0.625rem;
font-size: clamp(0.5rem, 1.5vw, 0.625rem);
opacity: 0.6;
letter-spacing: 0.0625rem;
letter-spacing: clamp(0.05rem, 0.5vw, 0.0625rem);
text-align: left;
}