mirror of
https://github.com/HackTricks-wiki/hacktricks-cloud.git
synced 2026-06-12 11:01:38 -07:00
Improve sponsor ad hover layout
This commit is contained in:
+31
-11
@@ -128,6 +128,7 @@
|
||||
display: none; /*changed via JS once ad is loaded*/
|
||||
flex-direction: column;
|
||||
text-decoration: none !important;
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.sidesponsor img {
|
||||
@@ -159,12 +160,13 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
.sidesponsor .sponsor-title{
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
font-weight: 800;
|
||||
font-size: 2rem;
|
||||
line-height: 1.08;
|
||||
color: var(--sponsor-fg);
|
||||
}
|
||||
.sidesponsor:hover .sponsor-title{
|
||||
@@ -175,29 +177,37 @@
|
||||
font-size: 1.55rem;
|
||||
line-height: 1.15;
|
||||
overflow-wrap: anywhere;
|
||||
animation: sponsorTextReveal .3s ease .12s both;
|
||||
}
|
||||
.sidesponsor .sponsor-description{
|
||||
display:none;
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 15px;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
color: var(--sponsor-fg);
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(.4,0,.2,1);
|
||||
transition-duration: .3s;
|
||||
overflow: scroll;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
opacity .18s ease .14s,
|
||||
visibility 0s linear .32s;
|
||||
}
|
||||
.sidesponsor:hover .sponsor-description{
|
||||
display:block;
|
||||
grid-area: sponsor-description;
|
||||
min-height: 0;
|
||||
max-height: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: calc(1em - 1px);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
transition:
|
||||
opacity .18s ease .14s,
|
||||
visibility 0s linear 0s;
|
||||
}
|
||||
.sidesponsor .sponsor-cta{
|
||||
margin-top: auto;
|
||||
@@ -209,20 +219,30 @@
|
||||
border-radius: 8px;
|
||||
background-color: var(--fg);
|
||||
color: var(--bg);
|
||||
font-weight: 800;
|
||||
}
|
||||
.sidesponsor:hover .sponsor-cta{
|
||||
grid-area: sponsor-cta;
|
||||
margin-top: 0;
|
||||
margin-bottom: 4px;
|
||||
padding: 7px 10px;
|
||||
padding: 10px 14px;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 1.08rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
animation: sponsorTextReveal .3s ease .12s both;
|
||||
}
|
||||
@keyframes sponsorTextReveal {
|
||||
0%, 45% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.sidesponsor-bsa {
|
||||
max-height: 40%;
|
||||
|
||||
Reference in New Issue
Block a user