style.css 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. /*
  2. Style for broadcast html as generated by broadcast2html.xslt.
  3. Supposed to be either linked to from or located in station/<name>/app/style.css,
  4. so each station could provide a custom skin.
  5. */
  6. @font-face {
  7. /* http://moorstation.org/typoasis/blackletter/htm/deutsche_druck.htm */
  8. font-family: DeutscheDruckschriftInitialen;
  9. src: url("http://aladin.mro.name/assets/Druckschrift-Initialen.ttf");
  10. }
  11. @font-face {
  12. /* http://www.ligafaktur.de/Schriften.html */
  13. font-family: DeutscheDruckschrift;
  14. src: url("http://aladin.mro.name/assets/LFODeutscheDruckschrift.ttf");
  15. }
  16. html {
  17. /* font-family: DeutscheDruckschrift; */
  18. min-width: 319px;
  19. background-color: rgb(237, 227, 207);
  20. color: rgb(48, 43, 37);
  21. }
  22. body {
  23. background-color: rgb(217, 207, 187);
  24. border-radius: 30px;
  25. box-shadow: 1px 2px 1px #333;
  26. padding: 1em;
  27. margin: 1em auto;
  28. max-width: 800px;
  29. }
  30. ul.buttongroup {
  31. clear: left;
  32. list-style-type: none;
  33. padding: 0;
  34. margin: -1em;
  35. }
  36. ul.nobullet {
  37. list-style-type:none;
  38. padding: 0;
  39. }
  40. ul.buttongroup li {
  41. float: left;
  42. padding: 0;
  43. margin: 3pt;
  44. max-width: 45%;
  45. background-color: rgba(0,0,0,0.061);
  46. border: 1px solid rgba(0,0,0,0.1);
  47. border-radius: 15px;
  48. }
  49. ul.buttongroup li a {
  50. display: block;
  51. padding: 0 4px;
  52. text-align: center;
  53. min-width: 30px;
  54. min-height: 4.5ex;
  55. text-decoration: none;
  56. color: rgb(0,0,238);
  57. }
  58. ul#whatsonnow li a {
  59. min-width: 120px;
  60. max-width: 240px;
  61. overflow: hidden;
  62. text-overflow: ellipsis;
  63. -o-text-overflow: ellipsis;
  64. white-space: nowrap;
  65. }
  66. *.station.title {
  67. text-transform:capitalize;
  68. font-variant: small-caps;
  69. }
  70. ul#navigation a span {
  71. font-family: sans-serif;
  72. font-size: 10pt;
  73. }
  74. ul#navigation li {
  75. margin: 1px;
  76. }
  77. #image {
  78. float:right;
  79. margin: 0 -0.5ex 0 0;
  80. max-width: 50%;
  81. height: auto;
  82. }
  83. #content {
  84. background-color: rgba(0,0,0,0.03);
  85. margin: 0 -0.5ex 0 -0.5ex;
  86. padding: 0 0.5ex 0 0.5ex;
  87. }
  88. /*
  89. #content p::first-letter {
  90. color: rgb(147, 77, 63);
  91. float: left;
  92. font-family: DeutscheDruckschriftInitialen;
  93. font-size: 100pt;
  94. vertical-align: top;
  95. }
  96. */
  97. .border {
  98. border: 1px solid rgba(0,0,0,0.1);
  99. border-radius: 4px;
  100. }
  101. fieldset {
  102. border: 0 none;
  103. }
  104. input[type="submit"] {
  105. /* font-family: DeutscheDruckschrift; */
  106. font-size: 110%;
  107. }
  108. #footer {
  109. font-size: 8pt;
  110. color: darkgrey;
  111. overflow: hidden;
  112. text-overflow: ellipsis;
  113. -o-text-overflow: ellipsis;
  114. }
  115. /* hide enclosure paragraph by default */
  116. #enclosure {
  117. display:none;
  118. }
  119. .has_podcast.is_future #title:before { content:"* "; }
  120. @keyframes doSpin {
  121. 0% {
  122. opacity: 1;
  123. transform: rotate(0deg) scale(1);
  124. }
  125. 50% {
  126. opacity: 0.25;
  127. transform: rotate(180deg) scale(0.75);
  128. }
  129. 100% {
  130. opacity: 1;
  131. transform: rotate(360deg) scale(1);
  132. }
  133. }
  134. .has_podcast.is_current #title:before {
  135. content:"♪ ";
  136. animation-duration: 1s;
  137. animation-name: doSpin;
  138. animation-duration: 5s;
  139. animation-iteration-count: infinite;
  140. }
  141. .has_podcast.is_past #title:before { content:"✇ "; }
  142. /* disable recording button for past broadcasts */
  143. .is_past form#ad_hoc { display:none; }
  144. #series {
  145. clear: left;
  146. }
  147. #allday {
  148. font-size: 12px;
  149. }
  150. #allday a.is_current > span {
  151. background: none repeat scroll 0 0 orange;
  152. color: #262626;
  153. border-radius: 3px;
  154. padding: 4px;
  155. margin: 0 0 0 1ex;
  156. text-decoration: blink;
  157. }
  158. #allday a {
  159. text-decoration: none;
  160. }
  161. *.is_current *.now {
  162. background: none repeat scroll 0 0 orange;
  163. }
  164. ul > li > a.has_podcast:before { content:"* "; }
  165. ul > li > a.has_podcast.is_past:before { content:"✇ "; }
  166. ul > li > a.has_podcast.is_current:before { content:"♪ "; }
  167. /* This is a workaround for Browsers that insert additional <br> tags.
  168. * See http://purl.mro.name/safari-xslt-br-bug */
  169. br { display:none; }
  170. br.br { display:inline; }
  171. @media screen and (max-width: 581px) {
  172. /* http://maddesigns.de/meta-viewport-1817.html */
  173. .navigation {
  174. line-height: 3.5ex;
  175. }
  176. }
  177. /** see https://www.w3.org/community/fedsocweb/ and https://www.w3.org/community/src/cgbg2012/templates/wordpress/StoryTeller/style.css */
  178. /*
  179. @keyframes fadeInRotate {
  180. 0% {
  181. opacity: 0;
  182. transform: rotate(180deg) scale(0.1);
  183. }
  184. 35% {
  185. opacity: 0.1;
  186. }
  187. 100% {
  188. opacity: 1;
  189. transform: rotate(360deg) scale(1);
  190. }
  191. }
  192. .fadeInRotate {
  193. animation-name: fadeInRotate;
  194. }
  195. .animated {
  196. animation-duration: 1s;
  197. animation-fill-mode: both;
  198. }
  199. */