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:
parent
5818fbfa81
commit
a7bef8b98c
2 changed files with 23 additions and 20 deletions
32
common.css
32
common.css
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue