62 lines
1.4 KiB
CSS
62 lines
1.4 KiB
CSS
|
.ribbon{
|
||
|
|
--color-ribbon : #fff;
|
||
|
|
@apply block;
|
||
|
|
span{
|
||
|
|
position: relative;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
padding: .75em 1.25em .75em .75em;
|
||
|
|
margin-left: -.5em;
|
||
|
|
margin-right: -.5em;
|
||
|
|
background-color: var(--color-ribbon);
|
||
|
|
box-shadow: inset 0 .062em 0 var(--color-ribbon), 0 .125em .25em rgba(0, 0, 0, .2);
|
||
|
|
color: black;
|
||
|
|
box-shadow: 0 0 16px var(--color-ribbon);
|
||
|
|
text-shadow: 0 -.062em 0 rgba(0, 0, 0, .2);
|
||
|
|
text-align: center;
|
||
|
|
display: block;
|
||
|
|
border-radius: 0 .5em 0 .5em;
|
||
|
|
word-wrap: break-word;
|
||
|
|
}
|
||
|
|
|
||
|
|
span:before{
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
top: -1em;
|
||
|
|
left: 0;
|
||
|
|
width: .5em;
|
||
|
|
height: 3em;
|
||
|
|
border-radius: .5em 0 0 .5em;
|
||
|
|
background-color: var(--color-ribbon);
|
||
|
|
z-index: -1;
|
||
|
|
background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.4) 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
span:after{
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
top: 1em;
|
||
|
|
right: 0em;
|
||
|
|
width: .5em;
|
||
|
|
height: 3em;
|
||
|
|
border-radius: 0 .5em .5em 0;
|
||
|
|
background-color: var(--color-ribbon);
|
||
|
|
z-index: -1;
|
||
|
|
background-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.4) 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.ribbon-druid{
|
||
|
|
--color-ribbon : var(--color-druid)
|
||
|
|
}
|
||
|
|
|
||
|
|
.ribbon-deathknight{
|
||
|
|
--color-ribbon : var(--color-deathknight)
|
||
|
|
}
|
||
|
|
|
||
|
|
.ribbon-demonhunter{
|
||
|
|
--color-ribbon : var(--color-demonhunter)
|
||
|
|
}
|
||
|
|
|