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 article {
  44   max-width: 1200px;
  45   margin: auto;
  46 }
  47
  48 .infobar{
  49 display:flex;
  50 }
  51 .infobar .advanced{
  52 flex:1;
  53 text-align:right;
  54 }
  55 .infobar a{
  56 overflow: hidden;
  57 white-space: nowrap;
  58 text-overflow:ellipsis;
  59 min-width:0;
  60 }
  61
  62 .emoji{
  63 padding: 0 .7em;
  64 cursor:pointer;
  65 background: none;
  66   border: none;
  67   color: white;
  68 }
  69 #submgr .emoji{
  70 margin-right:1em
  71 }
  72 .advanced summary{
  73 margin-bottom: .5em;
  74 white-space: nowrap;
  75 }
  76 summary{
  77 cursor: pointer;
  78 }
  79 details.advanced {
  80 white-space: nowrap;
  81 }
  82 .advanced:not([open]) summary{
  83   margin: 0;
  84 }
  85 .advanced form{
  86 display:inline;
  87 margin:0;
  88 }
  89 .advanced>:last-child {
  90   padding-right: 0
  91 }
  92 ul#submgr{list-style: none}
  93 #submgr form {
  94   margin-bottom: 1em;
  95 }
  96
  97 .video_error {
  98   width: 100%;
  99   background: #ff3333;
 100   padding: 1em 2em;
 101   border:1px solid #700;
 102   border-radius: 8px;
 103   box-sizing: border-box;
 104   margin: 1.5em 0;
 105 }
 106 .video_error::before {
 107   content: '\26A0\fe0e';
 108 }
 109 .video_error a:link, .video_error a:visited {
 110   color:#700;
 111 }
 112 .video_error a:hover, .video_error a:active {
 113   color:#a00;
 114 }
 115
 116 .main-video {
 117   width: 100%;
 118 }
 119 .main-video video {
 120   object-fit: cover;
 121   /* affects both placeholder and src. To avoid cropping the video itself, we
 122      assume the video element's aspect ratio exactly matches the video file. */
 123 }
 124 /* https://stackoverflow.com/a/20201563 */
 125 .aspect-ratio {
 126   position: relative;
 127   /* Note: clamping aspect-ratio, to avoid vertical videos going off-screen */
 128   padding-top: calc( 100% / max(var(--aspect-ratio), 4/3) );
 129 }
 130 .aspect-ratio video {
 131   position: absolute;
 132   top: 0; left: 0;
 133   width: 100%;
 134   height: 100%;
 135 }