GDL - Global Design Language

Introplayer 

<script type="text/delayed-html">

    <?php ob_start( ); ob_implicit_flush( FALSE ); ?>
    <script id="speakup-player-script" src="https://cdn.speakup.ai/loader.speakup.min.js" async> </script>
<div id="speakup-player" class="u-size-full u-my-small u-mx-auto" style="min-height: 55px"></div>
<?php echo esc_entities( @ob_get_clean() ?: '' ); ?>

</script>

<div class="c-introplayer u-flex u-justify-center u-column u-items-center u-relative u-cursor-pointer u-p-large" onclick="this.previousElementSibling&&this.previousElementSibling.setAttribute('type','text/async-html');window.asyncHTML&&asyncHTML.setup();this.remove();">

    <button class="c-btn c-btn--secondary c-btn--small c-btn--rounded c-btn--evidence u-flex u-label-04 u-cursor-pointer u-items-center u-nowrap u-z-cover">
        Attiva la lettura vocale
        <svg class="o-icon  u-ml-xxsmall o-icon--md ">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
        </svg>
    </button>

</div>
 
<script type="text/delayed-html">
      
  <?php ob_start( ); ob_implicit_flush( FALSE ); ?>
    <script id="speakup-player-script" src="https://cdn.speakup.ai/loader.speakup.min.js" async> </script>
    <div id="speakup-player" class="u-size-full u-my-small u-mx-auto" style="min-height: 55px"></div>
  <?php echo esc_entities( @ob_get_clean() ?: '' ); ?>

</script>

<div class="c-introplayer u-flex u-justify-center u-column u-items-center u-relative u-cursor-pointer u-p-large"
  onclick="this.previousElementSibling&&this.previousElementSibling.setAttribute('type','text/async-html');window.asyncHTML&&asyncHTML.setup();this.remove();" >
  
  <button class="c-btn c-btn--secondary c-btn--small c-btn--rounded c-btn--evidence u-flex u-label-04 u-cursor-pointer u-items-center u-nowrap u-z-cover">
    Attiva la lettura vocale
    <svg class="o-icon  u-ml-xxsmall o-icon--md ">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
    </svg>
  </button>
  
</div>
 
{
  "claim": "Ascolta la notizia",
  "action": "Attiva il player"
}
  • Content: 
    @use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;

.c-introplayer {
  margin: 7px auto;
  height: 50px;
  &::before {
    content: '';
    --_introplayer-bg: 50%;
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url("https://citynews.stgy.ovh/~shared/images/wave-30.png");
    background-size: var(--_introplayer-bg);
    background-position: center;
    background-repeat: repeat-x;
    opacity: .3;
    @include bp(md){
      --_introplayer-bg: 30%;
    }
  }
}
  • URL: /components/raw/introplayer/introplayer.scss
  • Filesystem Path: src/lib/components/introplayer/introplayer.scss
  • Size: 851 Bytes

No notes defined.