Fix corner ribbon: use !important to override inline styles, match brand gradient

Ribbon was rendering as flat green text because inline <style> block
overrode external CSS. Now uses !important on color/background/display.
Also upgraded to brand gradient (#5871ad → #82A8FF), larger size, smoother
transitions.
This commit is contained in:
russell@unturf.com 2026-03-04 15:53:41 -05:00
parent 5818fbfa81
commit a7bef8b98c
2 changed files with 23 additions and 20 deletions

View file

@ -786,31 +786,33 @@ textarea.markup-editor-textarea {
right: 0;
z-index: 99;
overflow: hidden;
width: 150px;
height: 150px;
width: 185px;
height: 185px;
pointer-events: none;
}
.corner-ribbon a {
display: block;
position: absolute;
right: -40px;
top: 30px;
width: 220px;
padding: 8px 0;
display: block !important;
position: absolute !important;
right: -45px;
top: 40px;
width: 250px;
padding: 10px 0;
text-align: center;
font-size: 13px;
font-weight: bold;
color: #ffffff;
background-color: #5871ad;
text-decoration: none;
font-size: 14px;
font-weight: bold !important;
color: #ffffff !important;
background: linear-gradient(to right, #5871ad, #82A8FF) !important;
text-decoration: none !important;
transform: rotate(45deg);
pointer-events: auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
letter-spacing: 0.03em;
transition: background 300ms ease;
}
.corner-ribbon a:hover {
background-color: #a3c765;
background: #a3c765 !important;
}
@media (min-width: 800px) {