app/static/style.css

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