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 {
  70   overflow: hidden;
  71   white-space: nowrap;
  72   text-overflow: ellipsis;
  73   min-width: 0;
  74 }
  75
  76 .infobar .advanced{
  77   flex: 1;
  78   text-align: right;
  79 }
  80
  81 .emoji{
  82 padding: 0 .7em;
  83 cursor:pointer;
  84 background: none;
  85   border: none;
  86   color: white;
  87 }
  88 #submgr .emoji{
  89 margin-right:1em
  90 }
  91 .advanced summary{
  92 margin-bottom: .5em;
  93 white-space: nowrap;
  94 }
  95 summary{
  96 cursor: pointer;
  97 }
  98 details.advanced {
  99 white-space: nowrap;
 100 }
 101 .advanced:not([open]) summary{
 102   margin: 0;
 103 }
 104 .advanced form{
 105 display:inline;
 106 margin:0;
 107 }
 108 .advanced>:last-child {
 109   padding-right: 0
 110 }
 111 ul#submgr{list-style: none}
 112 #submgr form {
 113   margin-bottom: 1em;
 114 }
 115
 116 .video_error {
 117   width: 100%;
 118   background: #ff3333;
 119   padding: 1em 2em;
 120   border:1px solid #700;
 121   border-radius: 8px;
 122   box-sizing: border-box;
 123   margin: 1.5em 0;
 124 }
 125 .video_error::before {
 126   content: '\26A0\fe0e';
 127 }
 128 .video_error a:link, .video_error a:visited {
 129   color:#700;
 130 }
 131 .video_error a:hover, .video_error a:active {
 132   color:#a00;
 133 }
 134
 135 .main-video {
 136   width: 100%;
 137 }
 138 /* https://stackoverflow.com/a/20201563 */
 139 .aspect-ratio {
 140   position: relative;
 141   /* Note: clamping aspect-ratio, to avoid vertical videos going off-screen */
 142   padding-top: calc( 100% / max(var(--aspect-ratio), 4/3) );
 143 }
 144 .aspect-ratio video {
 145   position: absolute;
 146   top: 0; left: 0;
 147   width: 100%;
 148   height: 100%;
 149 }