htdocs/media/screen.css

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