app/static/style.css

   1 body {
   2   font-family: sans-serif;
   3   background: #333;
   4   color: #eee;
   5 }
   6
   7 a:link, a:visited ,
   8 summary {
   9   color: #ccc;
  10   text-decoration: none;
  11 }
  12
  13 a:active, a:hover ,
  14 summary:active, summary:hover {
  15   color: #fff;
  16   text-decoration: none;
  17 }
  18
  19 .card {
  20   box-shadow: 0 0 5px #222;
  21   border:1px solid #222;
  22   padding: .5em;
  23   margin-bottom: .5em;
  24     margin-left: .25em;margin-right: .25em;
  25   x-width: 320px;
  26   width: 270px;
  27   display: inline-block;
  28 }
  29
  30 .card img {
  31   width: 100%;
  32   height: calc(270px / 16 * 9);
  33   object-fit: contain;
  34 }
  35
  36 .title {
  37   margin-bottom: .5em;
  38   height: 2.3em;
  39   line-height: 1.2em;
  40   overflow: hidden;
  41 }
  42
  43 #main {
  44   max-width: 1200px;
  45 }
  46 #main .card {text-align: left}
  47 .infobar{
  48 display:flex;
  49 }
  50 .infobar .advanced{
  51 flex:1;
  52 text-align:right;
  53 }
  54 .infobar a{
  55 overflow: hidden;
  56 white-space: nowrap;
  57 text-overflow:ellipsis;
  58 min-width:0;
  59 }
  60
  61 .emoji{
  62 padding: 0 .7em;
  63 cursor:pointer;
  64 background: none;
  65   border: none;
  66   color: white;
  67 }
  68 #submgr .emoji{
  69 margin-right:1em
  70 }
  71 .advanced summary{
  72 margin-bottom: .5em;
  73 white-space: nowrap;
  74 }
  75 summary{
  76 cursor: pointer;
  77 }
  78 details.advanced {
  79 white-space: nowrap;
  80 }
  81 .advanced:not([open]) summary{
  82   margin: 0;
  83 }
  84 .advanced form{
  85 display:inline;
  86 margin:0;
  87 }
  88 .advanced>:last-child {
  89   padding-right: 0
  90 }
  91 ul#submgr{list-style: none}
  92 #submgr form {
  93   margin-bottom: 1em;
  94 }
  95
  96 .video_error {
  97   width: 100%;
  98   background: #ff3333;
  99   padding: 1em 2em;
 100   border:1px solid #700;
 101   border-radius: 8px;
 102   box-sizing: border-box;
 103   margin: 1.5em 0;
 104 }
 105 .video_error::before {
 106   content: '\26A0\fe0e';
 107 }
 108 .video_error a:link, .video_error a:visited {
 109   color:#700;
 110 }
 111 .video_error a:hover, .video_error a:active {
 112   color:#a00;
 113 }
 114
 115 .main-video {
 116   width: 100%;
 117 }
 118 /* https://stackoverflow.com/a/20201563 */
 119 .aspect-ratio {
 120   position: relative;
 121   /* Note: clamping aspect-ratio, to avoid vertical videos going off-screen */
 122   padding-top: calc( 100% / max(var(--aspect-ratio), 4/3) );
 123 }
 124 .aspect-ratio video {
 125   position: absolute;
 126   top: 0; left: 0;
 127   width: 100%;
 128   height: 100%;
 129 }