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