internet-radio-recorder/pages/stations/b2/app/style.css

/*
  Style for broadcast html as generated by broadcast2html.xslt.

  Supposed to be either linked to from or located in station/<name>/app/style.css,
  so each station could provide a custom skin.
*/

html {
  --bgRough: rgb(237, 227, 207);
  --bgFairway: rgb(217, 207, 187);
  --text-color: hsl(30, 50%, 24%);
  --link-color: hsl(200, 60%, 45%);
}
@media (prefers-color-scheme: dark) {
  html {
    --bgRough: #111;
    --bgFairway: #111;
    --text-color: hsl(30, 35%, 59%);
    --link-color: hsl(200, 60%, 60%);
  }
}
html {
  /* font-family: DeutscheDruckschrift; */
  min-width:  319px;
  background-color: var(--bgRough);
  color: var(--text-color);
}

body {
  font-family: sans-serif;
  background-color: var(--bgFairway);
  border-radius: 30px;
  box-shadow: 1px 2px 1px #333;
  padding: 1em;
  margin: 1em auto;
  max-width: 800px;
}
a {
  color: var(--link-color);
}
ul.buttongroup {
  clear:      left;
  list-style-type: none;
  padding:    0;
  margin:     -1em;
}
ul.nobullet {
  list-style-type:none;
  padding: 0;
}
ul.buttongroup li {
  float:      left;
  padding:    0;
  margin:     3pt;
  max-width:  45%;

  background-color: rgba(0,0,0,0.061);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 15px;
}
ul.buttongroup li a {
  display:    block;
  padding:    0 4px;
  text-align: center;
  min-width:  30px;
  min-height: 4.5ex;
  text-decoration: none;
}
ul#whatsonnow li a {
  min-width:  120px;
  max-width:  240px;

  overflow:   hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}
*.station.title {
  text-transform:capitalize;
  font-variant: small-caps;
}
ul#navigation a span {
  font-family: sans-serif;
  font-size: 10pt;
}
ul#navigation li {
  margin:     1px;
  width: 13%;
}

#image {
  float:right;
  margin: 0 -0.5ex 0 0;
  max-width:  45%;
  min-height:  150px;
  min-width:  150px;
}
#content {
  background-color: rgba(0,0,0,0.03);
  margin: 0 -0.5ex 0 -0.5ex;
  padding: 0 0.5ex 0 0.5ex;
}
/*
#content p::first-letter {
  color: rgb(147, 77, 63);
  float: left;
  font-family: DeutscheDruckschriftInitialen;
  font-size: 100pt;
  vertical-align: top;
}
*/
.border, .station.logo {
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 4px;
}
.station.logo {
  max-height: 30px;
}

fieldset {
  border: 0 none;
}
input[type="submit"] {
  /* font-family: DeutscheDruckschrift; */
  font-size:  110%;
}
#footer {
  font-size:  8pt;
  color:      darkgrey;

  overflow:   hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
/* hide enclosure paragraph by default */
#enclosure {
  display:none;
}
.has_podcast.is_future  #title:before { content:"* "; }
@keyframes doSpin {
  0% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
  50% {
    opacity: 0.25;
    transform: rotate(180deg) scale(0.75);
  }
  100% {
    opacity: 1;
    transform: rotate(360deg) scale(1);
  }
}
.has_podcast.is_current #title:before {
  content:"♪ ";
  animation-duration: 1s;
  animation-name: doSpin;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
.has_podcast.is_past    #title:before { content:"✇ "; }

/* disable recording button for past broadcasts */
.is_past form#ad_hoc { display:none; }

#series {
  clear:    left;
}
#allday {
  font-size: 9pt;
}
#allday a.is_current > span {
  background: none repeat scroll 0 0 orange;
  color: #262626;
  border-radius: 3px;
  padding: 4px;
  margin: 0 0 0 1ex;
  text-decoration: blink;
}
#allday a {
}
*.is_current *.now {
  background: none repeat scroll 0 0 orange;
}

ul > li > a.has_podcast:after { content:" *"; }
ul > li > a.has_podcast.is_past:after { content:" ✇"; }
ul > li > a.has_podcast.is_current:after { content:" ♪"; }

/* This is a workaround for Browsers that insert additional <br> tags. 
 * See http://purl.mro.name/safari-xslt-br-bug */
br { display:none; }
br.br { display:inline; }

@media screen and (max-width: 581px) {
  /* http://maddesigns.de/meta-viewport-1817.html */
  .navigation {
    line-height: 3.5ex;
  }
}

/** see https://www.w3.org/community/fedsocweb/ and https://www.w3.org/community/src/cgbg2012/templates/wordpress/StoryTeller/style.css */
/*
@keyframes fadeInRotate {
  0% {
    opacity: 0;
    transform: rotate(180deg) scale(0.1);
  }
  35% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
    transform: rotate(360deg) scale(1);
  }
}
.fadeInRotate {
  animation-name: fadeInRotate;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
*/
@media (prefers-color-scheme: dark) {
  ul.buttongroup li {
    background-color: hsla(40, 28.3%, 79.2%, 20%);
    border-color: hsla(40, 28.3%, 79.2%, 25%);
  }
}