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