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