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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,15 +26,17 @@
opacity: 0.6;
margin: 0;
letter-spacing: 0.0625rem;
}
.uppercase {
text-transform: uppercase;
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-preview {
@ -50,11 +52,7 @@
.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 button {
@ -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;
}

2
EnvelopeGenerator.Web/wwwroot/css/card.min.css vendored
View File

@ -1 +1 @@
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');*{box-sizing:border-box}.dd-cards-container{font-family:'Muli',sans-serif;display:flex;align-items:center;justify-content:center;flex-direction:column}.dd-card{background-color:#fff;display:flex;max-width:100%;margin:0;overflow:hidden;width:100%}.dd-card h6{opacity:.6;margin:0;letter-spacing:.0625rem}.uppercase{text-transform:uppercase}.dd-card h2{letter-spacing:.0625rem;margin:0}.dd-card-preview{background-color:#2a265f;color:#fff;padding:.1rem 1rem 1rem 1rem;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center}.dd-card-preview a{color:#fff;display:inline-block;font-size:.75rem;opacity:.6;margin-top:1.875rem;text-decoration:none}.dd-card-preview button{border-width:0;align-items:center;background-color:transparent;color:#fff;margin:15% 0 0 0;transition:color .25s ease}.dd-card-preview button:hover{color:#bebebe}.dd-card-info{padding:1rem 0 0 1.875rem;position:relative;width:100%}.dd-card-info p{opacity:.6;font-size:.75rem;opacity:.6;margin-top:.875rem;text-decoration:none}.progress-container{text-align:right;width:100%;margin:1rem 0 0 0}.app-logo{width:5rem;margin:1rem 0 0 0}.progress{background-color:#ddd;border-radius:.1875rem;height:.3125rem;width:10rem}.progress::after{background-color:#2a265f;content:'';position:absolute;top:0;left:0;height:.3125rem;width:var(--progress-width,1%);transition:width 1s ease}.progress-text{font-size:.625rem;opacity:.6;letter-spacing:.0625rem;text-align:left}
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');*{box-sizing:border-box}.dd-cards-container{font-family:'Muli',sans-serif;display:flex;align-items:center;justify-content:center;flex-direction:column}.dd-card{background-color:#fff;display:flex;max-width:100%;margin:0;overflow:hidden;width:100%}.dd-card h6{opacity:.6;margin:0;letter-spacing:.0625rem;font-size:clamp(.6rem,1.33vw,.8rem)}.dd-card h2{letter-spacing:.0625rem;margin:0;font-size:clamp(1rem,2.67vw,1.67rem)}.uppercase{text-transform:uppercase}.dd-card-preview{background-color:#2a265f;color:#fff;padding:.1rem 1rem 1rem 1rem;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center}.dd-card-preview a{color:#fff;opacity:.6}.dd-card-preview button{border-width:0;align-items:center;background-color:transparent;color:#fff;margin:15% 0 0 0;transition:color .25s ease}.dd-card-preview button:hover{color:#bebebe}.dd-card-info{padding:clamp(.55rem,2vw,.875rem) 0 0 clamp(.55rem,2.5vw,1.7rem);margin:0;position:relative;width:100%}.dd-card-info p,.dd-card-info a,.dd-card-info small,.dd-card-info span{opacity:.65;font-size:clamp(.55rem,1.23vw,.75rem);margin:clamp(.55rem,2vw,.875rem) 0 clamp(.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:clamp(.8rem,2vw,1rem) 0 0 0}.progress{background-color:#ddd;border-radius:.1875rem;height:clamp(.25rem,1vw,.3125rem);width:clamp(6rem,20vw,10rem);position:relative}.progress::after{background-color:#2a265f;content:'';position:absolute;top:0;left:0;height:clamp(.25rem,1vw,.3125rem);width:var(--progress-width,1%);transition:width 1s ease;opacity:.85}.progress-text{font-size:clamp(.5rem,1.5vw,.625rem);opacity:.6;letter-spacing:clamp(.05rem,.5vw,.0625rem);text-align:left}

1
EnvelopeGenerator.Web/wwwroot/css/logo.css
View File

@ -24,6 +24,7 @@
@media (max-width: 767px) {
.dd-show-logo {
width: 5rem;
margin-right: 0rem;
}
.cursor-show-logo {

2
EnvelopeGenerator.Web/wwwroot/css/logo.min.css vendored
View File

@ -1 +1 @@
.dd-locked-logo{width:13rem;padding-top:1rem}.dd-show-logo{width:9rem;position:absolute;right:0;margin:0 2rem 0 0;padding:0;top:0}.cursor-locked-logo{width:9rem;padding-top:1rem}.cursor-show-logo{width:6rem}@media(max-width:767px){.dd-show-logo{width:5rem}.cursor-show-logo{width:3rem}}
.dd-locked-logo{width:13rem;padding-top:1rem}.dd-show-logo{width:9rem;position:absolute;right:0;margin:0 2rem 0 0;padding:0;top:0}.cursor-locked-logo{width:9rem;padding-top:1rem}.cursor-show-logo{width:6rem}@media(max-width:767px){.dd-show-logo{width:5rem;margin-right:0}.cursor-show-logo{width:3rem}}