spaziointer.it

---unit tag---

<amp-state id="tsvisibilityState">
<script type="application/json">
    {
        "clhideTs": false
    }
</script>
</amp-state>
<div style="height:100px">
<amp-list id="clickio-ts-list" layout="fill" data-block-on-consent src="https://cns.clickiocdn.com/amp_360?source_url=SOURCE_URL&canon=CANONICAL_URL&counter=COUNTER&document_referrer=DOCUMENT_REFERRER&viewer=VIEWER&scr_w=AVAILABLE_SCREEN_WIDTH&scr_h=AVAILABLE_SCREEN_HEIGHT&sid=236098&said=723000&btype=hsticky
">
<template type="amp-mustache">
<div id="cl-top-sticky" class="cl-ts-visible" [class]="tsvisibilityState.clhideTs ? 'cl-ts-hidden' : 'cl-ts-visible' " >
    <amp-iframe data-block-on-consent resizable
        id="clickio-ts-creative"
        height="100"
        layout="fixed-height"
        frameborder="0"
        sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation allow-top-navigation-by-user-activation"
        src="{{_frame_src}}"
        on="message:AMP.setState({tsvisibilityState: {clhideTs: true}})">
        <div placeholder></div>
        <div overflow></div>
    </amp-iframe>
    <button class="cl-ts-close-button" on="tap:AMP.setState({tsvisibilityState: {clhideTs: true}})" style=""></button>
</div>
</template>
</amp-list>
</div>

---CSS Rules---

#cl-top-sticky {
    position: fixed;
    top: 75px;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 2147483646;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    background-color: #fff;
}
.cl-ts-hidden {
    display: none;
}
.cl-ts-visible {
    display: block;
}
.cl-ts-close-button {
    position: absolute;
    bottom: -28px;
    width: 28px;
    height: 28px;
    right: 0;
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="341 8 13 13"><path fill="%234F4F4F" fill-rule="evenodd" d="M354 9.31 352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z"/></svg>')
        9px 9px no-repeat #fff;
    box-shadow: -1px 2px 1px 0 rgba(0, 0, 0, 0.2);
    border: none;
    border-radius: 0 0 0 12px;
}
#clickio-ts-list:has(#clickio-ts-creative[height="100"][width="0"]) {
    display: none;
}