app/javascript/advertisements/sticky-box/theme.scss
div#cf[data-template='sticky-box'] {
&[data-theme='dark'] {
}
&[data-theme='light'] {
}
background: rgba(255, 255, 255, 0.98);
border-radius: 3px;
border: 1px solid #ccc;
box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 12px 0;
display: flex;
font-family: Helvetica, Arial, sans-serif;
padding: 10px;
position: fixed;
width: 360px;
z-index: 999 !important;
animation: fadein 0.85s;
text-align: left;
a {
text-decoration: none;
color: #06c;
&:hover .cf-headline {
text-decoration: underline;
text-decoration-style: dotted;
}
}
a.cf-powered-by {
background: #ccc;
border-radius: 2px 0 0 2px;
bottom: 57px;
color: #333;
display: block;
font-size: 11px;
font-weight: thin;
left: -19px;
padding: 2px 0;
position: absolute;
text-align: center;
text-decoration: none;
width: 18px;
&:hover {
background: #333;
color: #ccc;
text-decoration: none;
}
}
a.cf-sponsored-by {
margin: 0;
padding: 0;
width: 100%;
img.cf-img {
float: left;
margin: 0 10px 0 0;
width: 55px;
height: 55px;
}
span.cf-text {
strong.cf-headline {
display: block;
font-size: 14px;
font-weight: 600;
line-height: 1.5;
}
span.cf-body {
color: #414141;
display: block;
font-size: 13px;
line-height: 1.35;
max-width: 350px;
&:hover {
color: #111;
}
span.cf-link {
color: #06c;
font-size: 13px;
line-height: 1.35;
text-decoration: underline;
}
}
}
}
[data-behavior='close'] {
background: rgba(0, 0, 0, 0.1);
border-radius: 50px;
color: #fff;
cursor: pointer;
display: block;
float: right;
font-size: 12px;
font-weight: bold;
height: 18px;
line-height: 150%;
position: absolute;
right: 7px;
text-align: center;
text-decoration: none;
top: 7px;
width: 18px;
&:hover {
background: rgba(0, 0, 0, 0.3);
color: rgba(255, 255, 255, 0.8);
}
}
}