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
 222 .short
 223 {
 224     height: 1.3em;
 225     overflow: hidden;
 226     text-overflow: ellipsis;
 227 }
 228
 229 .URL
 230 {
 231     text-decoration: none;
 232     color: black;
 233 }
 234
 235 .URL:hover
 236 {
 237     text-decoration: underline;
 238 }
 239
 240 img.device_icon
 241 {
 242     padding: 3px;
 243     vertical-align: middle;
 244 }
 245
 246
 247 /******************
 248      Searching
 249 *******************/
 250
 251 form.search input[type="text"]
 252 {
 253     width: 300px;
 254     display: inline;
 255 }
 256
 257 form.search ul
 258 {
 259     display: inline;
 260     margin: 0px;
 261     padding: 0px;
 262 }
 263
 264 form.search ul li
 265 {
 266     list-style: none;
 267     display: inline;
 268 }
 269
 270 form.search input[type="submit"]
 271 {
 272     margin-top: 20px;
 273     display: inline;
 274 }
 275
 276 form.internal
 277 {
 278     display: none;
 279 }
 280
 281 div.result img
 282 {
 283     float: left;
 284 }
 285
 286 div.result a.podcast
 287 {
 288     font-size: 1.2em;
 289     color: black;
 290     padding-top: 2em;
 291     font-weight: bold;
 292     display: block;
 293 }
 294
 295 div.result span.episode
 296 {
 297     display: list-item;
 298     margin-left: 2em;
 299 }
 300
 301 div.result span.episode a
 302 {
 303     color: black;
 304 }
 305
 306
 307 input.url
 308 {
 309     width: 80%;
 310 }
 311
 312 .bar
 313 {
 314     background-color: #777;
 315     color: white;
 316     float: left;
 317     text-align: left;
 318 }
 319
 320 .bar span, .barbg span
 321 {
 322     padding-left: 5px;
 323     padding-right: 5px;
 324 }
 325
 326 .barbg
 327 {
 328     background-color: #aaa;
 329     text-align: right;
 330     color: black;
 331     float: left;
 332     width: 100%;
 333 }
 334
 335
 336 span.from_podcast, span.latest_episode {
 337     font-size: x-small;
 338     color: #666;
 339 }
 340
 341 span.from_podcast a, span.latest_episode a {
 342     color: #333;
 343 }
 344
 345 .time
 346 {
 347     width: 5em;
 348 }
 349
 350
 351 .own-chapter
 352 {
 353     font-weight: bold;
 354 }
 355
 356 div.related-podcasts
 357 {
 358     float: right;
 359 }
 360
 361
 362 .toplist-pos
 363 {
 364     padding-left: 1em;
 365 }
 366
 367 #tagcloud
 368 {
 369     text-align: justify;
 370 }
 371
 372 .sponsoring-podcast
 373 {
 374     padding-top: 1em;
 375     padding-bottom: 1em;
 376 }
 377
 378 .sponsoring-podcast img
 379 {
 380     float: left;
 381 }
 382
 383
 384
 385 iframe.results
 386 {
 387     width: 100%;
 388     border: none;
 389 }
 390
 391 .by-user
 392 {
 393     font-size: 50%;
 394 }
 395
 396
 397
 398 /*****************
 399    Footer
 400 *******************/
 401
 402 footer, footer a
 403 {
 404     color: #777;
 405 }
 406
 407 footer ul
 408 {
 409     list-style-type: none;
 410 }
 411
 412 div.first-episode
 413 {
 414     margin-bottom: 2em;
 415 }
 416
 417
 418
 419 /************************
 420    Episode Lists
 421 *************************/
 422
 423 div.episodes div.episode
 424 {
 425     clear: left;
 426 }
 427
 428 div.episode span.title
 429 {
 430     font-size: 1.5em;
 431     font-family: 'Source Sans Pro';
 432     font-weight: 200;
 433 }
 434
 435 div.episodes div.episode
 436 {
 437     margin: 1.5em 0 1.5em 0;
 438 }
 439
 440 div.episode div.description
 441 {
 442     font-family: 'Source Sans Pro';
 443     font-weight: 300;
 444 }
 445
 446 div.episodes div.description
 447 {
 448     margin-top: 0;
 449     max-height: 2.9em;
 450     overflow: hidden;
 451     text-overflow: ellipsis; /* why doesn't this work?! */
 452 }
 453
 454
 455 div.episode span.number
 456 {
 457     display: inline;
 458     font-size: 1.5em;
 459     font-weight: 300;
 460     font-family: 'Source Sans Pro';
 461 }
 462
 463
 464 div.episode div.listeners
 465 {
 466     width: 8em;
 467     float: right;
 468     font-size: .7em;
 469 }
 470
 471 div.episode span.released,
 472 div.episode span.status
 473 {
 474     font-size: .7em;
 475     font-weight: normal;
 476 }
 477
 478 div.first-episode
 479 {
 480     margin-top: 1.5em;
 481 }
 482
 483 div.first-episode div.header
 484 {
 485     font-size: 1.5em;
 486 }
 487
 488 /*
 489 div.first-episode div.episode div.header a
 490 {
 491     text-decoration: none;
 492     color: black;
 493 }
 494 */
 495
 496
 497
 498
 499 /* Sidebar Navigation */
 500
 501 .sidebar-nav
 502 {
 503     text-align: right;
 504     border-right: thin solid #222;
 505     margin-right: 1em;
 506 }
 507
 508 .sidebar-nav a
 509 {
 510     color: #222;
 511 }
 512
 513 .nav-list > .active > a,
 514 .nav-list > .active > a:hover,
 515 .nav-list > .active > a:focus {
 516   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
 517   background-color: #888;
 518   color: #eee;
 519 }
 520
 521 #content
 522 {
 523     padding-top: 1em;
 524 }
 525
 526 #tag-box form
 527 {
 528     display: inline-block;
 529 }
 530
 531
 532 div.podcasts
 533 {
 534     padding-top: 2em;
 535 }
 536
 537
 538 div.podcasts div.podcast
 539 {
 540     overflow: hidden;
 541     margin-bottom: 2em;
 542     padding: .2em;
 543 }
 544
 545
 546 div.podcasts div.podcast div.logo
 547 {
 548     float: left;
 549     padding-right: .5em;
 550 }
 551
 552 div.podcasts div.podcast div.actions
 553 {
 554     float: right;
 555     padding-left: .5em;
 556     display: box;
 557 }
 558
 559 div.podcasts div.podcast div.title
 560 {
 561     white-space: nowrap;
 562     text-overflow: ellipsis;
 563     overflow: hidden;
 564 }
 565
 566 div.podcasts div.podcast div.title a
 567 {
 568     font-family: 'Source Sans Pro';
 569     font-weight: 300;
 570     font-size: 1.9em;
 571 }
 572
 573 div.podcasts div.podcast div.description
 574 {
 575     text-overflow: ellipsis;
 576     overflow: hidden;
 577     margin-top: .5em;
 578     height: 7em;
 579 }
 580
 581 div.podcasts div.podcast div.actions a.btn,
 582 div.podcasts div.podcast div.actions button.btn
 583
 584 {
 585     display: none;
 586     margin-bottom: 1em;
 587     box-flex: 1;
 588
 589 }
 590
 591 div.podcasts div.podcast:hover div.actions a.btn,
 592 div.podcasts div.podcast:hover div.actions button.btn
 593 {
 594     display: block;
 595 }
 596
 597 /* http://stackoverflow.com/a/18330040/693140 */
 598 .nav > li.disabled.nav-header > a {
 599     cursor: default;
 600     font-size: 12px;
 601     font-weight: bold;
 602     text-transform: uppercase;
 603 }
 604
 605 .tab-pane
 606 {
 607     padding-top: 1em;
 608 }
 609
 610 .centered {
 611     float: none;
 612     margin: 0 auto;
 613 }
 614
 615 .hosting {
 616     text-align: center;
 617 }
 618
 619 .status-success {
 620     background-color: hsla(var(--color-status-success), 100%, 75%, 1);
 621 }
 622
 623
 624 .status-error {
 625     background-color: hsla(var(--color-status-error), 100%, 75%, 1);
 626 }
 627
 628 .status-neutral {
 629     background-color: hsla(var(--color-status-neutral), 16%, 85%, 1);
 630 }