Audio Player Woed

Link to article: Audio Player Woed.

Module Styles

• h1, h2 {
      text-align: center;
  }
  
  .help {
      display: flex;
      align-content: stretch;
      padding-top: 1em;
  }
  
  .help blockquote {
      margin: 0;
      font-size: 85%;
  }
  
  .help blockquote > p {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      align-content: center;
      margin-right: 0;
      min-height: 2rem;
      margin: 0;
  }
  
  .help blockquote > p * {
      margin: 0 0.1rem;
      height: 100%;
  }
  
  .help blockquote:nth-of-type(1) {
      background: transparent;
      border: unset;
      box-shadow: unset;
      text-align: right;
      margin-right: 0;
      padding: 0;
  }
  
  .help blockquote:nth-of-type(1) > p {
      justify-content: flex-end;
  }
  
  .help blockquote:nth-of-type(2) {
      margin-left: 1em;
      width: 50%;
  }

Inline Styles

• (none)

Includes

• (none)

CSS Classes

• help

Page Source

[[>]]
[[module Rate]]
[[/>]]
[[module css]]
h1, h2 {
    text-align: center;
}

.help {
    display: flex;
    align-content: stretch;
    padding-top: 1em;
}

.help blockquote {
    margin: 0;
    font-size: 85%;
}

.help blockquote > p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    margin-right: 0;
    min-height: 2rem;
    margin: 0;
}

.help blockquote > p * {
    margin: 0 0.1rem;
    height: 100%;
}

.help blockquote:nth-of-type(1) {
    background: transparent;
    border: unset;
    box-shadow: unset;
    text-align: right;
    margin-right: 0;
    padding: 0;
}

.help blockquote:nth-of-type(1) > p {
    justify-content: flex-end;
}

.help blockquote:nth-of-type(2) {
    margin-left: 1em;
    width: 50%;
}
[[/module]]

[[include :scp-wiki:component:audio-player-woed-source
|unique-name=secretparty
|audio-file=https://scp-wiki.wikidot.com/local--files/component:audio-player-woed/PartyTime.mp3
|background-color=rgb(252, 252, 252)
|border-color=rgb(215, 215, 215)
|border-radius=0.313rem
|dropshadow-color=rgba(12, 12, 12, 0.15)
|text-color=rgb(80, 0, 2)
|icons-color=rgb(171, 0, 5)
|player-color=rgb(215, 215, 215)
|progress-color=rgb(80, 0, 2)
]]
@@ @@
[[iftags +component]]
+ How to use

++ 1. Copy code below.
++ 2. Follow guide on bottom.


> @@[[include :scp-wiki:component:audio-player-woed-source@@
> @@|unique-name=secretparty@@
> @@|audio-file=https://thisisalink.com/PartyTime.mp3@@
> @@|background-color=rgb(252, 252, 252)@@
> @@|border-color=rgb(215, 215, 215)@@
> @@|border-radius=0.313rem@@
> @@|dropshadow-color=rgba(12, 12, 12, 0.15)@@
> @@|text-color=rgb(80, 0, 2)@@
> @@|icons-color=rgb(171, 0, 5)@@
> @@|player-color=rgb(215, 215, 215)@@
> @@|progress-color=rgb(80, 0, 2)@@
> @@]]@@


[[div_ class="help"]]
> Beginning of component include. **Will need to paste this entire code per block.** ↦ 
> 
> Unique name given per-audio player. **Use words, not numbers.** ↦ 
> 
> FULL Audio File Link //(Accepts all Audio Types// ↦
> 
> Background Color for Audio Player //(accepts hex, rgb, rgba, hsl)// ↦ 
> 
> Color border around and between Audio Player //(accepts hex, rgb, rgba, hsl)// ↦ 
> 
> Amount removed from the corners. //Set to 0 for square.// ↦ 
> 
> Color of drop-shadow //(accepts hex, rgb, rgba, hsl)// ↦ 
> 
> Color of Text below the progress bar //(accepts hex, rgb, rgba, hsl)// ↦ 
> 
> Color of Icons //(accepts hex, rgb, rgba, hsl)// ↦ 
> 
> Color of unplayed area of progress bar //(accepts hex, rgb, rgba, hsl)// ↦ 
> 
> Color of played area of progress bar //(accepts hex, rgb, rgba, hsl)// ↦ 
> 
> End of Include Block
> 

> [[include :scp-wiki:component:audio-player-woed-source
> 
> |unique-name=secretparty 
> 
> |audio-file=https://thisisalink.com/PartyTime.mp3
> 
> |background-color=rgb(252, 252, 252)
> 
> |border-color=rgb(215, 215, 215)
> 
> |border-radius=0.313rem
> 
> |dropshadow-color=rgba(12, 12, 12, 0.15)
> 
> |text-color=rgb(80, 0, 2)
> 
> |icons-color=rgb(171, 0, 5)
> 
> |player-color=rgb(215, 215, 215)
> 
> |progress-color=rgb(80, 0, 2)
> 
> ]]
> 
[[/div]]
[[/iftags]]