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 .fake-link,
  10 a:link, a:visited ,
  11 summary {
  12   color: #ccc;
  13   text-decoration: none;
  14   cursor: pointer;
  15 }
  16
  17 .card-main:hover .title, .card-main:active .title,
  18 .more-actions label:hover, .more-actions label:active,
  19 .fake-link:active, .fake-link:hover,
  20 a:active, a:hover ,
  21 summary:active, summary:hover {
  22   color: #fff;
  23   text-decoration: none;
  24 }
  25
  26 article {
  27   max-width: 1200px;
  28   margin: auto;
  29 }
  30
  31 .flashes {
  32   margin: 1.5em auto 0;
  33   padding: 0;
  34   box-sizing: border-box;
  35   max-width: 1200px; /* same as .articles */
  36 }
  37
  38 .flashes>li {
  39   margin: .75em 0;
  40   display: block;
  41   border-radius: 5px;
  42   width: 100%;
  43   padding: 1em 2em;
  44   box-sizing: border-box;
  45 }
  46
  47 .flashes>.flash-radio:checked + li {
  48   display: none;
  49 }
  50 .flashes>li .flash-close {
  51   float:right;
  52   margin-right: -.5em;
  53 }
  54 .flashes>li .flash-close::before {
  55   content: '\1f7ad';
  56   font-size: larger;
  57   cursor: pointer;
  58 }
  59 .flashes>li.message .flash-close::before:hover,
  60 .flashes>li.info .flash-close::before:hover {
  61   color: #333;
  62 }
  63
  64 .flashes>li a {
  65   text-decoration: underline;
  66 }
  67
  68 .flashes>li.info {
  69   background-color: #ace;
  70   border: 1px solid #5ae;
  71   color: #111;
  72 }
  73 .flashes>li.info a {
  74   color: #333;
  75 }
  76
  77 .flashes>li.message {
  78   background-color: #aaa;
  79   border: 1px solid #888;
  80   color: #111;
  81 }
  82 .flashes>li.message a {
  83   color: #333;
  84 }
  85
  86 .flashes>li.error {
  87   background-color: #f33;
  88   border: 1px solid #700;
  89   color: #eee;
  90 }
  91 .flashes>li.error a {
  92   color:#700;
  93 }
  94
  95 .flashes>li.welcome {
  96   border: 1px solid white;
  97 }
  98 .flashes>li.welcome h2,
  99 .flashes>li.welcome p {
 100   margin: 0.5em 0;
 101 }
 102 .flashes h2 {
 103   font-size: 1.2em;
 104 }
 105
 106 .cards {
 107   display: flex;
 108   flex-wrap: wrap;
 109   justify-content: center;
 110 }
 111 .cards hr {
 112   width: 100%;
 113 }
 114
 115 .card {
 116   box-shadow: 0 0 5px #222;
 117   border:1px solid #222;
 118   padding: .5em;
 119   margin: 0 .25em .5em .25em;
 120   width: 270px;
 121 }
 122
 123 .card .thumb {
 124   width: 100%;
 125   height: calc(270px / 16 * 9);
 126   position: relative;
 127 }
 128 .card .thumb img {
 129   width: 100%; height: 100%;
 130   object-fit: contain;
 131 }
 132 .card .thumb .badge {
 133   position: absolute;
 134   right: 0;
 135   bottom: 0;
 136   background: rgba(16,16,16,.8);
 137   margin: .2em;
 138   padding: .2em;
 139   border-radius: 6px;
 140   font-size: smaller;
 141 }
 142
 143 .card .title {
 144   margin-top: .25em;
 145   margin-bottom: .5em;
 146   height: 2.3em;
 147   line-height: 1.2em;
 148   overflow: hidden;
 149   /* display ellipsis: */
 150   display: -webkit-box;
 151   -webkit-box-orient: vertical;
 152   -webkit-line-clamp: 2;
 153 }
 154
 155 .card .card-main {
 156   position: relative;
 157 }
 158
 159 .card .link-main {
 160   display: block;
 161   left: 0; top: 0; right: 0; bottom: 0;
 162 }
 163
 164 .card.pinned {
 165   background: rgba(255,0,0,.1);
 166 }
 167 .card.pinned .infobar details.advanced>summary::after,
 168 .card.pinned .infobar :not(details).advanced::after {
 169   content: ' \1f4cc\FE0F';
 170 }
 171
 172 .card .infobar{
 173   display: flex;
 174 }
 175
 176 .card .info-main, .card .infobar>:first-child {
 177   overflow: hidden;
 178   white-space: nowrap;
 179   text-overflow: ellipsis;
 180   min-width: 0;
 181   flex: 99;
 182 }
 183
 184 .infobar .advanced{
 185   flex: 1;
 186   white-space: nowrap;
 187   text-align: right;
 188 }
 189
 190 .card.dummy {
 191   box-shadow: none;
 192   border-color: transparent;
 193   margin-top: 0;
 194   margin-bottom: 0;
 195   padding-top: 0;
 196   padding-bottom: 0;
 197 }
 198
 199 .emoji {
 200   cursor:pointer;
 201   color: white;
 202 }
 203 .card .emoji, #submgr .emoji {
 204   padding: 0 .7em;
 205 }
 206 .card .details>:last-child .emoji {
 207   padding-right: 0;
 208 }
 209 #submgr .emoji{
 210   margin-right:1em;
 211 }
 212 .advanced summary{
 213 margin-bottom: .5em;
 214 white-space: nowrap;
 215 }
 216 summary{
 217 cursor: pointer;
 218 }
 219 details.advanced {
 220 white-space: nowrap;
 221 }
 222 .advanced:not([open]) summary{
 223   margin: 0;
 224 }
 225 .advanced form{
 226 display:inline;
 227 margin:0;
 228 }
 229 .advanced .details,
 230 details .details {
 231   display: flex;
 232 }
 233 ul#submgr{list-style: none}
 234 #submgr form {
 235   display: inline;
 236 }
 237 #submgr li {
 238   margin: 1em 0;
 239 }
 240
 241 details[open]:not(.advanced):not(#filters) {
 242   border: 1px solid #444;
 243   border-radius: 3px 3px 0 0;
 244   border-top: none
 245 }
 246 details:not(.advanced):not(#filters)>summary {
 247   border-radius: 3px 3px 0 0;
 248   padding: .25em;
 249 }
 250 details[open]:not(.advanced):not(#filters)>summary {
 251   background: #444;
 252 }
 253 details[open]:not(.advanced):not(#filters)>summary:hover,
 254 details[open]:not(.advanced):not(#filters)>summary:active {
 255   background: #555;
 256 }
 257 details:not(.advanced):not(#filters)>*:not(:first-child) {
 258   margin: 1em;
 259 }
 260
 261 .video_error {
 262   width: 100%;
 263   background: #ff3333;
 264   padding: 1em 2em;
 265   border:1px solid #700;
 266   border-radius: 8px;
 267   box-sizing: border-box;
 268   margin: 1.5em 0;
 269 }
 270 .video_error::before {
 271   content: '\26A0\fe0e';
 272 }
 273 .video_error a:link, .video_error a:visited {
 274   color:#700;
 275 }
 276 .video_error a:hover, .video_error a:active {
 277   color:#a00;
 278 }
 279
 280 .main-video {
 281   width: 100%;
 282 }
 283 /* https://stackoverflow.com/a/20201563 */
 284 .aspect-ratio {
 285   position: relative;
 286   padding-top: calc( 100% / var(--aspect-ratio) );
 287 }
 288 /* Note: clamping aspect-ratio to avoid vertical videos going
 289 off-screen, but only on browsers that support nesting calc/max: */
 290 @supports (padding:calc(100%/max(1))) {
 291   .aspect-ratio {
 292     padding-top: min(
 293       calc(100vh - 3em), /* make sure the header(~3em) and video element fit above the fold */
 294       calc( 100% / max(var(--aspect-ratio), 4/3) )
 295     );
 296   }
 297 }
 298 .aspect-ratio video {
 299   position: absolute;
 300   top: 0; left: 0;
 301   width: 100%;
 302   height: 100%;
 303 }
 304
 305 .more-actions .emoji,
 306 .more-actions input[type="checkbox"] {
 307   margin: 0 .7em; /*like input.emoji's padding*/
 308 }
 309
 310 .emoji-form {
 311   display: inline;
 312 }
 313
 314 .header-left:not(:first-of-type) {
 315   margin-left: 1em;
 316 }
 317 .bold {
 318   font-weight: bold;
 319 }
 320 .header-left.large {
 321   font-size: large;
 322 }
 323
 324 .pagination-container {
 325   display: flex;
 326   padding: 0 1em;
 327 }
 328 .pagination {
 329   border: 1px solid #aaa;
 330   background: #222;
 331   padding: .5em;
 332   flex: 1;
 333   margin: 0 1em;
 334 }
 335 .pagination.prev::before {
 336   content: '\2b9c';
 337   padding-right: .25em;
 338 }
 339 .pagination.next {
 340   text-align: right;
 341 }
 342 .pagination.next::after {
 343   content: '\2b9e';
 344   padding-left: .25em;
 345 }