mini boutons ogg/mp3

This commit is contained in:
chankalan 2021-09-23 15:15:47 +02:00
parent 88923c0a94
commit cc07b38519
8 changed files with 49 additions and 6 deletions

View File

@ -11,8 +11,8 @@
<B_sl>
<BOUCLE_sl(CHAPITRES){id_article}{type_sujet=SL}{par debut}>
<h1><a href="#URL_ARTICLE"><span class="#EDIT{titre} article__titre">[(#TITRE)]</span></a>
<small><a href="https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/[(#CODE_PODCAST)]/libre-a-vous-[(#CODE_PODCAST)]-[(#CODE_FICHIER)].ogg" class="btn blanc ogg podcast">ogg</a>
<a href="https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/[(#CODE_PODCAST)]/libre-a-vous-[(#CODE_PODCAST)]-[(#CODE_FICHIER)].mp3" class="btn blanc mp3 podcast">mp3</a></small>
<small><a href="https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/[(#CODE_PODCAST)]/libre-a-vous-[(#CODE_PODCAST)]-[(#CODE_FICHIER)].ogg" class="btn ogg podcast mini"><span class="visuallyhidden">ogg</span></a>
<a href="https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/[(#CODE_PODCAST)]/libre-a-vous-[(#CODE_PODCAST)]-[(#CODE_FICHIER)].mp3" class="btn mp3 podcast mini"><span class="visuallyhidden">mp3</span></a></small>
</h1>
</BOUCLE_sl>
</B_sl>
@ -39,8 +39,8 @@
<ul>
<BOUCLE_s(CHAPITRES){id_article}{type_sujet!=SL}{par debut}>
<li>#TITRE
<small><a href="https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/[(#CODE_PODCAST)]/libre-a-vous-[(#CODE_PODCAST)]-[(#CODE_FICHIER)].ogg" class="btn blanc ogg podcast">ogg</a>
<a href="https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/[(#CODE_PODCAST)]/libre-a-vous-[(#CODE_PODCAST)]-[(#CODE_FICHIER)].mp3" class="btn blanc mp3 podcast">mp3</a></small>
<small><a href="https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/[(#CODE_PODCAST)]/libre-a-vous-[(#CODE_PODCAST)]-[(#CODE_FICHIER)].ogg" class="btn ogg podcast mini"><span class="visuallyhidden">ogg</span></a>
<a href="https://media.april.org/audio/radio-cause-commune/libre-a-vous/emissions/[(#CODE_PODCAST)]/libre-a-vous-[(#CODE_PODCAST)]-[(#CODE_FICHIER)].mp3" class="btn mp3 podcast mini"><span class="visuallyhidden">mp3</span></a></small>
</li>
</BOUCLE_s>
</ul>

BIN
squelettes/scss/img/mp3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="10" viewBox="0 0 8.731 2.646">
<g clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
<path d="M2649.273 1536.059c0-5.002-3.049-9.044-6.816-9.044H2606.2c-3.768 0-6.816 4.042-6.816 9.044v0c0 4.99 3.048 9.043 6.816 9.043h36.256c3.768 0 6.816-4.052 6.816-9.044z" fill="none" stroke-width="2.304" transform="matrix(.16743 0 0 .13026 -435.036 -198.764)" stroke="#005184"/>
<path d="m1.844 1.318-.778.534V.785z" fill="#005184"/>
<g font-weight="700" font-size="5.112" font-family="Metropolis-Bold,Metropolis" fill="#005184">
<path d="M4.86.534v1.579h.34V1.6h.373c.343 0 .597-.22.597-.532 0-.313-.254-.534-.597-.534zm.34.31h.336c.168 0 .284.088.284.224 0 .135-.116.222-.284.222H5.2zM2.645.534v1.579h.34V1.13l.49.891.49-.891v.983h.34V.534h-.34l-.49.892-.49-.892ZM7.147.515a.72.72 0 0 0-.585.278l.19.204c.104-.11.218-.182.364-.182.153 0 .258.073.258.187 0 .111-.1.175-.27.175l-.177-.002v.286h.178c.209-.002.3.06.3.18 0 .112-.098.19-.269.19a.55.55 0 0 1-.408-.183l-.195.223c.13.152.34.264.619.264.359 0 .595-.196.595-.467 0-.207-.155-.327-.324-.366.169-.05.29-.18.29-.36 0-.248-.218-.427-.566-.427z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
squelettes/scss/img/ogg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="10" viewBox="0 0 8.731 2.646">
<g clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
<path d="m1.844 1.318-.778.534V.785z" fill="#f7651a"/>
<path d="M3.28.532a.803.803 0 0 0-.796.786c0 .427.366.788.796.788.435 0 .797-.36.797-.788A.8.8 0 0 0 3.28.532zm1.998 0a.805.805 0 0 0-.803.786c0 .427.368.788.803.788a.855.855 0 0 0 .607-.254v-.627H5.22v.254h.35v.233a.506.506 0 0 1-.293.097.488.488 0 0 1-.472-.49c0-.264.216-.49.472-.49.137 0 .284.066.373.17l.234-.212a.856.856 0 0 0-.607-.255Zm1.84 0a.805.805 0 0 0-.803.786c0 .427.369.788.803.788a.855.855 0 0 0 .608-.254v-.627h-.664v.254h.35v.233a.506.506 0 0 1-.294.097.488.488 0 0 1-.47-.49c0-.264.215-.49.47-.49.138 0 .285.066.374.17l.234-.212a.856.856 0 0 0-.608-.255ZM3.28.83c.254 0 .468.226.468.49 0 .265-.214.49-.468.49-.25 0-.465-.225-.465-.49 0-.264.214-.49.465-.49z" font-weight="700" font-size="5.112" font-family="Metropolis-Bold,Metropolis" fill="#f7651a"/>
<path d="M2649.273 1536.059c0-5.002-3.049-9.044-6.816-9.044H2606.2c-3.768 0-6.816 4.042-6.816 9.044v0c0 4.99 3.048 9.043 6.816 9.043h36.256c3.768 0 6.816-4.052 6.816-9.044z" fill="none" stroke="#f7651a" stroke-width="2.304" transform="matrix(.16743 0 0 .13026 -435.036 -198.764)"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -527,7 +527,7 @@ h2 {
font-weight:900;
font-size:0.6rem;
text-transform:uppercase;
&:before {
&:not(.mini):before {
@include triangle(right, $couleurSecondaire, 0.5em);
position: absolute;
left: 0.4rem;
@ -538,7 +538,7 @@ h2 {
font-size:0.7em;
font-weight:400;
}
&.mp3 {
&.mp3:not(.mini) {
border-color:$couleurPrincipale;
color:$couleurPrincipale !important;
&:before {
@ -553,6 +553,33 @@ h2 {
@include triangle(right, $couleurPrincipale, 0.5em);
}
}
&.mini {
background-color:white;
background-size:cover !important;
border:0 !important;
height:10px;
width:33px;
padding:0;
&:before {
display:none;
}
&:hover {
background-color:white !important;
}
&.ogg {
background-image:url('img/ogg.png');
&:hover {
background-image:url('img/ogg_hover.png') !important;
}
}
&.mp3 {
background-image:url('img/mp3.png');
&:hover {
background-image:url('img/mp3_hover.png') !important;
}
}
}
}