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 .flashes {
  30   margin: 0 auto;
  31   padding: .5em 1.5em;
  32   box-sizing: border-box;
  33   max-width: 1200px; /* same as .articles */
  34 }
  35
  36 .flashes>li {
  37   display: block;
  38   border-radius: 5px;
  39   width: 100%;
  40   padding: 1em 2em;
  41   box-sizing: border-box;
  42 }
  43
  44 .flashes>.flash-radio:checked ~ li {
  45   display: none;
  46 }
  47 .flashes>li .flash-close {
  48   float:right;
  49   margin-right: -.5em;
  50 }
  51 .flashes>li .flash-close::before {
  52   content: '\1f7ad';
  53   font-size: larger;
  54   cursor: pointer;
  55 }
  56 .flashes>li.message .flash-close::before:hover,
  57 .flashes>li.info .flash-close::before:hover {
  58   color: #333;
  59 }
  60
  61 .flashes>li a {
  62   text-decoration: underline;
  63 }
  64
  65 .flashes>li.info {
  66   background-color: #ace;
  67   border: 1px solid #5ae;
  68   color: #111;
  69 }
  70 .flashes>li.info a {
  71   color: #333;
  72 }
  73
  74 .flashes>li.message {
  75   background-color: #aaa;
  76   border: 1px solid #888;
  77   color: #111;
  78 }
  79 .flashes>li.message a {
  80   color: #333;
  81 }
  82
  83 .flashes>li.welcome {
  84   border: 1px solid white;
  85 }
  86 .flashes>li.welcome h2,
  87 .flashes>li.welcome p {
  88   margin: 0.5em 0;
  89 }
  90 .flashes h2 {
  91   font-size: 1.2em;
  92 }
  93
  94 .cards {
  95   display: flex;
  96   flex-wrap: wrap;
  97   justify-content: center;
  98 }
  99 .cards hr {
 100   width: 100%;
 101 }
 102
 103 .card {
 104   box-shadow: 0 0 5px #222;
 105   border:1px solid #222;
 106   padding: .5em;
 107   margin: 0 .25em .5em .25em;
 108   width: 270px;
 109 }
 110
 111 .card .thumb {
 112   width: 100%;
 113   height: calc(270px / 16 * 9);
 114   object-fit: contain;
 115 }
 116
 117 .card .title {
 118   margin-bottom: .5em;
 119   height: 2.3em;
 120   line-height: 1.2em;
 121   overflow: hidden;
 122 }
 123
 124 .card .card-main {
 125   position: relative;
 126 }
 127
 128 .card .link-main {
 129   position: absolute;
 130   left: 0; top: 0; right: 0; bottom: 0;
 131 }
 132
 133 .card .infobar{
 134   display: flex;
 135 }
 136
 137 .card .info-main, .card .infobar>:first-child {
 138   overflow: hidden;
 139   white-space: nowrap;
 140   text-overflow: ellipsis;
 141   min-width: 0;
 142   flex: 99;
 143 }
 144
 145 .infobar .advanced{
 146   flex: 1;
 147   text-align: right;
 148 }
 149
 150 .card.dummy {
 151   box-shadow: none;
 152   border: transparent;
 153   margin-top: 0;
 154   margin-bottom: 0;
 155   padding-top: 0;
 156   padding-bottom: 0;
 157 }
 158
 159 .emoji {
 160   cursor:pointer;
 161   color: white;
 162 }
 163 .card .emoji, #submgr .emoji {
 164   padding: 0 .7em;
 165 }
 166 .card .details>:last-child .emoji {
 167   padding-right: 0;
 168 }
 169 #submgr .emoji{
 170   margin-right:1em;
 171 }
 172 .advanced summary{
 173 margin-bottom: .5em;
 174 white-space: nowrap;
 175 }
 176 summary{
 177 cursor: pointer;
 178 }
 179 details.advanced {
 180 white-space: nowrap;
 181 }
 182 .advanced:not([open]) summary{
 183   margin: 0;
 184 }
 185 .advanced form{
 186 display:inline;
 187 margin:0;
 188 }
 189 .advanced .details,
 190 details .details {
 191   display: flex;
 192 }
 193 ul#submgr{list-style: none}
 194 #submgr form {
 195   display: inline;
 196 }
 197 #submgr li {
 198   margin: 1em 0;
 199 }
 200
 201 .video_error {
 202   width: 100%;
 203   background: #ff3333;
 204   padding: 1em 2em;
 205   border:1px solid #700;
 206   border-radius: 8px;
 207   box-sizing: border-box;
 208   margin: 1.5em 0;
 209 }
 210 .video_error::before {
 211   content: '\26A0\fe0e';
 212 }
 213 .video_error a:link, .video_error a:visited {
 214   color:#700;
 215 }
 216 .video_error a:hover, .video_error a:active {
 217   color:#a00;
 218 }
 219
 220 .main-video {
 221   width: 100%;
 222 }
 223 /* https://stackoverflow.com/a/20201563 */
 224 .aspect-ratio {
 225   position: relative;
 226   /* Note: clamping aspect-ratio, to avoid vertical videos going off-screen */
 227   padding-top: calc( 100% / max(var(--aspect-ratio), 4/3) );
 228 }
 229 .aspect-ratio video {
 230   position: absolute;
 231   top: 0; left: 0;
 232   width: 100%;
 233   height: 100%;
 234 }
 235
 236 .more-actions .emoji,
 237 .more-actions input[type="checkbox"] {
 238   margin: 0 .7em; /*like input.emoji's padding*/
 239 }
 240
 241 .emoji-form {
 242   display: inline;
 243 }