UX prettified

This commit is contained in:
l4kr
2023-09-04 19:02:21 +02:00
parent 31973b84de
commit c585bee08c
6 changed files with 6129 additions and 10 deletions

View File

@@ -10,6 +10,7 @@
}
.topDetailsMain {
overflow: hidden;
margin-top: 11em;
}
.topDetailsMain.padded-left {
-webkit-padding-start: 2.5%;
@@ -38,7 +39,6 @@
}
.detailImageContainerCard:not(.imageWidthTest) {
width: 100% !important;
padding: 10em
}
.detailImageContainerCard .cardBox {
-webkit-margin-end: 0 !important;
@@ -81,6 +81,7 @@
.detailImageContainer-main.detailImageContainer-backdrop {
width: 28vw;
width: clamp(20vw, 49.5em, 28vw);
top: 5em;
}
.detailImageContainer-main.detailImageContainer-banner {
width: 28vw;
@@ -265,13 +266,60 @@
.detailButton {
margin-top: 0.75em !important;
margin-bottom: 0.75em !important;
-webkit-margin-start: 0 !important;
-webkit-marg0in-start: 0 !important;
margin-inline-start: 0 !important;
-webkit-margin-end: 0.5em !important;
margin-inline-end: 0.5em !important;
-webkit-flex-shrink: 0;
flex-shrink: 0;
box-shadow: none !important;
box-shadow: 0px 3px 15px rgba(0,0,0,0.4); !important;
opacity 0.2s ease-out;
color: var(--theme-accent-text-color);
}
.detailButton:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity ease-in-out;
border-radius: 10px;
}
.detailButton:active {
color: #000;
}
.detailButton:active:after {
background: transparent;
}
.detailButton:hover:before {
opacity: 1;
}
.detailButton:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
@keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
.detailButton.raised {
-webkit-justify-content: center;
@@ -355,8 +403,9 @@
padding-right: 0.5em;
}
.detailTextContainer {
margin: 0 -1em;
padding: 10em 1em;
margin: 0 0;
padding: 5em 1em;
padding-bottom: 20em;
}
.detailTextContainer-extrapadding {
padding: 0 1.6em;