app/javascript/advertisements/@responsive_footer/theme.scss
div#cf[data-template='responsive_footer'] {
&[data-theme='dark'] {
font-family: Helvetica Neue, Helvetica, Arial;
font-size: 15px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
max-height: 75px;
padding: 10px;
background-color: rgba(255, 255, 255, 0.7);
position: fixed;
z-index: 9999;
bottom: 0;
left: 0;
width: 100%;
line-height: 1.5;
a {
text-decoration: none;
}
a.cf-img-wrapper {
margin-right: 10px;
line-height: 0;
}
a.cf-img-wrapper img {
width: 55px;
height: 55px;
}
a.cf-text {
color: rgba(0, 0, 0, 0.7);
}
a.cf-text strong {
color: #000;
}
button[data-behavior='close'] {
flex: 1;
color: #000;
background-color: transparent;
padding: 2px 6px 4px 6px;
font-size: 1rem;
margin-right: 20px;
border: none;
cursor: pointer;
}
}
&[data-theme='light'] {
font-family: Helvetica Neue, Helvetica, Arial;
font-size: 0.9rem;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
max-height: 75px;
padding: 10px;
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
z-index: 9999;
bottom: 0;
left: 0;
width: 100%;
line-height: 1.5;
a {
text-decoration: none;
}
a.cf-img-wrapper {
margin-right: 10px;
flex: 0 0 60px;
}
a.cf-img-wrapper img {
width: 55px;
height: 55px;
}
a.cf-text {
color: rgba(255, 255, 255, 0.7);
}
a.cf-text strong {
color: #ffffff;
}
button[data-behavior='close'] {
color: #ffffff;
background-color: transparent;
padding: 2px 6px 4px 6px;
font-size: 1rem;
margin-right: 20px;
border: none;
cursor: pointer;
}
}
}