Refine sponsor hover and update CTA styling

This commit is contained in:
Carlos Polop
2026-05-18 21:10:45 +02:00
parent c1bd048854
commit 4345b0e6bb
2 changed files with 37 additions and 16 deletions
+25 -10
View File
@@ -56,15 +56,24 @@ a > .hljs {
.menu-bar-link-request-update:visited {
display: inline-flex;
align-items: center;
border-radius: 6px;
padding: 6px 10px;
color: #ffffff;
background: #d12f1f;
border: 1px solid color-mix(in srgb, var(--links) 45%, transparent);
border-radius: 999px;
padding: 5px 11px;
color: var(--menu-bar-link-color-hover);
background:
linear-gradient(135deg,
color-mix(in srgb, var(--links) 20%, transparent),
color-mix(in srgb, var(--sidebar-active) 16%, transparent));
font-weight: 700;
box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 10%, transparent);
}
.menu-bar-link-request-update:hover {
color: #ffffff;
background: #f04b36;
color: var(--menu-bar-link-color-hover);
border-color: color-mix(in srgb, var(--links) 70%, transparent);
background:
linear-gradient(135deg,
color-mix(in srgb, var(--links) 30%, transparent),
color-mix(in srgb, var(--sidebar-active) 24%, transparent));
}
#menu-bar.sticky,
#menu-bar-hover-placeholder:hover + #menu-bar,
@@ -296,15 +305,21 @@ body.sidebar-visible #menu-bar {
#menubar-collapse-popup .menu-bar-link-request-update:visited {
margin: 6px 8px;
padding: 8px 12px;
color: #ffffff;
background: #d12f1f;
color: var(--fg);
background:
linear-gradient(135deg,
color-mix(in srgb, var(--links) 18%, var(--bg)),
color-mix(in srgb, var(--sidebar-active) 14%, var(--bg)));
}
#menubar-collapse-popup .menu-bar-link:hover {
background-color: var(--theme-hover);
}
#menubar-collapse-popup .menu-bar-link-request-update:hover {
color: #ffffff;
background: #f04b36;
color: var(--menu-bar-link-color-hover);
background:
linear-gradient(135deg,
color-mix(in srgb, var(--links) 28%, var(--bg)),
color-mix(in srgb, var(--sidebar-active) 22%, var(--bg)));
}
/* Languages Menu Popup */
+12 -6
View File
@@ -144,6 +144,7 @@
padding: 4px;
grid-area: sponsor-image;
align-self: start;
transition-duration: 0s;
}
.sidesponsor:hover {
display: grid !important;
@@ -177,7 +178,9 @@
font-size: 1.55rem;
line-height: 1.15;
overflow-wrap: anywhere;
animation: sponsorTextReveal .3s ease .12s both;
visibility: hidden;
opacity: 0;
animation: sponsorTextReveal .12s ease .18s forwards;
}
.sidesponsor .sponsor-description{
display: block;
@@ -205,9 +208,8 @@
visibility: visible;
overflow: auto;
overscroll-behavior: contain;
transition:
opacity .18s ease .14s,
visibility 0s linear 0s;
animation: sponsorTextReveal .12s ease .18s forwards;
transition: none;
}
.sidesponsor .sponsor-cta{
margin-top: auto;
@@ -234,14 +236,18 @@
font-size: 1.2rem;
font-weight: 800;
line-height: 1.1;
animation: sponsorTextReveal .3s ease .12s both;
visibility: hidden;
opacity: 0;
animation: sponsorTextReveal .12s ease .18s forwards;
}
@keyframes sponsorTextReveal {
0%, 45% {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
.sidesponsor-bsa {