static/screen.css

   1 :root {
   2     --color-status-success: 90;
   3     --color-status-error: 0;
   4     --color-status-neutral: 247;
   5 }
   6
   7
   8 /* Landscape phones and down */
   9 @media (min-width: 980px)
  10 {
  11
  12 #inline_logo
  13 {
  14 display: none;
  15 }
  16
  17 }
  18
  19 /****************
  20     General
  21 *****************/
  22
  23 body
  24 {
  25     font-family: 'Source Sans Pro', sans-serif;
  26 }
  27
  28 #logo
  29 {
  30     position: fixed;
  31     left: 20px;
  32     top: -2px;
  33     z-index: 4000;
  34 }
  35
  36 body h1
  37 {
  38     font-size: 3em;
  39     font-family: 'Source Sans Pro';
  40     font-weight: 200;
  41     margin-bottom: 0;
  42 }
  43
  44 h2
  45 {
  46     font-size: 14pt;
  47     padding-top: .5em;
  48 }
  49
  50 h3
  51 {
  52     font-size: 12pt;
  53 }
  54
  55 .brand img
  56 {
  57     display: inline;
  58 }
  59
  60 .logo-group
  61 {
  62     padding: .5em 0 1em 0;
  63 }
  64
  65
  66
  67 /*******************
  68    "List" Tables
  69 ********************/
  70
  71
  72 table.list
  73 {
  74     border-collapse: collapse;
  75     width: 100%;
  76     margin-bottom: 2em;
  77 }
  78
  79 table.list tr td
  80 {
  81     padding: .3em;
  82     border-top: thin dotted #ccc;
  83     border-bottom: thin dotted #ccc;
  84     vertical-align: middle;
  85 }
  86
  87 table.list tr:hover td {
  88     background-color: #eeeeee;
  89 }
  90
  91 table.list tr.nohighlight:hover td {
  92     background-color: inherit;
  93 }
  94
  95 table.list th
  96 {
  97     text-align: left;
  98     padding: 5px;
  99     font-weight: bold;
 100 }
 101
 102 table.list th,
 103 table.list td
 104 {
 105     padding-right: 1em;
 106 }
 107
 108 table.list td
 109 {
 110     height: 40px;
 111 }
 112
 113 table td.numeric,
 114 table th.numeric
 115 {
 116     text-align: right;
 117 }
 118
 119 table.list td.empty
 120 {
 121     text-align: center;
 122     font-size: .8em;
 123 }
 124
 125 table.list tr.group
 126 {
 127     font-weight: bold;
 128     height: 3em;
 129     vertical-align: bottom;
 130 }
 131
 132 table.list tr.group:hover td
 133 {
 134     /* don't show hover effect for group rows */
 135     background-color: inherit;
 136 }
 137
 138 td.logo
 139 {
 140     width: 32px;
 141 }
 142
 143 td.logo img
 144 {
 145     max-height: 32px;
 146     max-width: 32px;
 147 }
 148
 149 table form
 150 {
 151     display: inline;
 152 }
 153
 154 /* used for headers above a group of table rows */
 155
 156 table.list th.group
 157 {
 158     background-color: #999;
 159     color: white;
 160     text-align: center;
 161 }
 162
 163 table.list th.group a
 164 {
 165     color: white;
 166 }
 167
 168 table.list th.group i
 169 {
 170     font-size: .7em;
 171 }
 172
 173 .description,
 174 .summary
 175 {
 176     color: #222;
 177     hypens: auto;
 178     -webkit-hyphens: auto;
 179     -moz-hyphens: auto;
 180     -ms-hyphens: auto;
 181     -o-hyphens: auto;
 182     text-align: justify;
 183 }
 184
 185
 186 div.description,
 187 div.summary
 188 {
 189     margin-top: 1em;
 190 }
 191
 192 .summary img
 193 {
 194     display: none;
 195 }
 196
 197 /* don't show images in the description of the podcast page */
 198 .first-episode img
 199 {
 200     display: none;
 201 }
 202
 203 .first-episode div.description
 204 {
 205     margin-top: .5em;
 206 }
 207
 208 .first-episode h2
 209 {
 210     margin-bottom: 0;
 211     line-height: 1em;
 212 }
 213
 214 div#podcastlogo
 215 {
 216     float: right;
 217     padding-left: 20px;
 218     padding-bottom: 10px;
 219 }
 220
 221 #podcastlogo img {
 222     max-height: 128px;
 223     max-width: 128px;
 224 }
 225
 226
 227 .short
 228 {
 229     height: 1.3em;
 230     overflow: hidden;
 231     text-overflow: ellipsis;
 232 }
 233
 234 .URL
 235 {
 236     text-decoration: none;
 237     color: black;
 238 }
 239
 240 .URL:hover
 241 {
 242     text-decoration: underline;
 243 }
 244
 245 img.device_icon
 246 {
 247     padding: 3px;
 248     vertical-align: middle;
 249 }
 250
 251
 252 /******************
 253      Searching
 254 *******************/
 255
 256 form.search input[type="text"]
 257 {
 258     width: 300px;
 259     display: inline;
 260 }
 261
 262 form.search ul
 263 {
 264     display: inline;
 265     margin: 0px;
 266     padding: 0px;
 267 }
 268
 269 form.search ul li
 270 {
 271     list-style: none;
 272     display: inline;
 273 }
 274
 275 form.search input[type="submit"]
 276 {
 277     margin-top: 20px;
 278     display: inline;
 279 }
 280
 281 form.internal
 282 {
 283     display: none;
 284 }
 285
 286 div.result img
 287 {
 288     float: left;
 289 }
 290
 291 div.result a.podcast
 292 {
 293     font-size: 1.2em;
 294     color: black;
 295     padding-top: 2em;
 296     font-weight: bold;
 297     display: block;
 298 }
 299
 300 div.result span.episode
 301 {
 302     display: list-item;
 303     margin-left: 2em;
 304 }
 305
 306 div.result span.episode a
 307 {
 308     color: black;
 309 }
 310
 311
 312 input.url
 313 {
 314     width: 80%;
 315 }
 316
 317 .bar
 318 {
 319     background-color: #777;
 320     color: white;
 321     float: left;
 322     text-align: left;
 323 }
 324
 325 .bar span, .barbg span
 326 {
 327     padding-left: 5px;
 328     padding-right: 5px;
 329 }
 330
 331 .barbg
 332 {
 333     background-color: #aaa;
 334     text-align: right;
 335     color: black;
 336     float: left;
 337     width: 100%;
 338 }
 339
 340
 341 span.from_podcast, span.latest_episode {
 342     font-size: x-small;
 343     color: #666;
 344 }
 345
 346 span.from_podcast a, span.latest_episode a {
 347     color: #333;
 348 }
 349
 350 .time
 351 {
 352     width: 5em;
 353 }
 354
 355
 356 .own-chapter
 357 {
 358     font-weight: bold;
 359 }
 360
 361 div.related-podcasts
 362 {
 363     float: right;
 364 }
 365
 366
 367 .toplist-pos
 368 {
 369     padding-left: 1em;
 370 }
 371
 372 #tagcloud
 373 {
 374     text-align: justify;
 375 }
 376
 377 .sponsoring-podcast
 378 {
 379     padding-top: 1em;
 380     padding-bottom: 1em;
 381 }
 382
 383 .sponsoring-podcast img
 384 {
 385     float: left;
 386 }
 387
 388
 389
 390 iframe.results
 391 {
 392     width: 100%;
 393     border: none;
 394 }
 395
 396 .by-user
 397 {
 398     font-size: 50%;
 399 }
 400
 401
 402
 403 /*****************
 404    Footer
 405 *******************/
 406
 407 footer, footer a
 408 {
 409     color: #777;
 410 }
 411
 412 footer ul
 413 {
 414     list-style-type: none;
 415 }
 416
 417 div.first-episode
 418 {
 419     margin-bottom: 2em;
 420 }
 421
 422
 423
 424 /************************
 425    Episode Lists
 426 *************************/
 427
 428 div.episodes div.episode
 429 {
 430     clear: left;
 431 }
 432
 433 div.episode span.title
 434 {
 435     font-size: 1.5em;
 436     font-family: 'Source Sans Pro';
 437     font-weight: 200;
 438 }
 439
 440 div.episodes div.episode
 441 {
 442     margin: 1.5em 0 1.5em 0;
 443 }
 444
 445 div.episode div.description
 446 {
 447     font-family: 'Source Sans Pro';
 448     font-weight: 300;
 449 }
 450
 451 div.episodes div.description
 452 {
 453     margin-top: 0;
 454     max-height: 2.9em;
 455     overflow: hidden;
 456     text-overflow: ellipsis; /* why doesn't this work?! */
 457 }
 458
 459
 460 div.episode span.number
 461 {
 462     display: inline;
 463     font-size: 1.5em;
 464     font-weight: 300;
 465     font-family: 'Source Sans Pro';
 466 }
 467
 468
 469 div.episode div.listeners
 470 {
 471     width: 8em;
 472     float: right;
 473     font-size: .7em;
 474 }
 475
 476 div.episode span.released,
 477 div.episode span.status
 478 {
 479     font-size: .7em;
 480     font-weight: normal;
 481 }
 482
 483 div.first-episode
 484 {
 485     margin-top: 1.5em;
 486 }
 487
 488 div.first-episode div.header
 489 {
 490     font-size: 1.5em;
 491 }
 492
 493 /*
 494 div.first-episode div.episode div.header a
 495 {
 496     text-decoration: none;
 497     color: black;
 498 }
 499 */
 500
 501
 502
 503
 504 /* Sidebar Navigation */
 505
 506 .sidebar-nav
 507 {
 508     text-align: right;
 509     border-right: thin solid #222;
 510     margin-right: 1em;
 511 }
 512
 513 .sidebar-nav a
 514 {
 515     color: #222;
 516 }
 517
 518 .nav-list > .active > a,
 519 .nav-list > .active > a:hover,
 520 .nav-list > .active > a:focus {
 521   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
 522   background-color: #888;
 523   color: #eee;
 524 }
 525
 526 #content
 527 {
 528     padding-top: 1em;
 529 }
 530
 531 #tag-box form
 532 {
 533     display: inline-block;
 534 }
 535
 536
 537 div.podcasts
 538 {
 539     padding-top: 2em;
 540 }
 541
 542
 543 div.podcasts div.podcast
 544 {
 545     overflow: hidden;
 546     margin-bottom: 2em;
 547     padding: .2em;
 548 }
 549
 550
 551 div.podcasts div.podcast div.logo
 552 {
 553     float: left;
 554     padding-right: .5em;
 555 }
 556
 557 div.podcasts div.podcast div.actions
 558 {
 559     float: right;
 560     padding-left: .5em;
 561     display: box;
 562 }
 563
 564 div.podcasts div.podcast div.title
 565 {
 566     white-space: nowrap;
 567     text-overflow: ellipsis;
 568     overflow: hidden;
 569 }
 570
 571 div.podcasts div.podcast div.title a
 572 {
 573     font-family: 'Source Sans Pro';
 574     font-weight: 300;
 575     font-size: 1.9em;
 576 }
 577
 578 div.podcasts div.podcast div.description
 579 {
 580     text-overflow: ellipsis;
 581     overflow: hidden;
 582     margin-top: .5em;
 583     height: 7em;
 584 }
 585
 586 div.podcasts div.podcast div.actions a.btn,
 587 div.podcasts div.podcast div.actions button.btn
 588
 589 {
 590     display: none;
 591     margin-bottom: 1em;
 592     box-flex: 1;
 593
 594 }
 595
 596 div.podcasts div.podcast:hover div.actions a.btn,
 597 div.podcasts div.podcast:hover div.actions button.btn
 598 {
 599     display: block;
 600 }
 601
 602 /* http://stackoverflow.com/a/18330040/693140 */
 603 .nav > li.disabled.nav-header > a {
 604     cursor: default;
 605     font-size: 12px;
 606     font-weight: bold;
 607     text-transform: uppercase;
 608 }
 609
 610 .tab-pane
 611 {
 612     padding-top: 1em;
 613 }
 614
 615 .centered {
 616     float: none;
 617     margin: 0 auto;
 618 }
 619
 620 .hosting {
 621     text-align: center;
 622 }
 623
 624 .status-success {
 625     background-color: hsla(var(--color-status-success), 100%, 75%, 1);
 626 }
 627
 628
 629 .status-error {
 630     background-color: hsla(var(--color-status-error), 100%, 75%, 1);
 631 }
 632
 633 .status-neutral {
 634     background-color: hsla(var(--color-status-neutral), 16%, 85%, 1);
 635 }