app/static/style.css

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