advent-of-code-15_files/style.css

   1 body {
   2   background: #0f0f23; /*337 x 5*/
   3   color: #cccccc;
   4   font-family: "Source Code Pro", monospace;
   5   font-size: 14pt;
   6   min-width: 48em;
   7 }
   8 img { border:0; }
   9 a { outline:0; }
  10 main, figure, figcaption { display:block; }
  11 pre, code { font-family: "Source Code Pro", monospace; }
  12 header, main {
  13   -webkit-text-size-adjust: none;
  14 }
  15
  16 a {
  17   text-decoration: none;
  18   color: #009900;
  19 }
  20 a:hover {
  21   color: #99ff99;
  22 }
  23 h1, h2 {
  24   font-size: 1em;
  25   font-weight: normal;
  26 }
  27 code {
  28   border: 1px solid #333340;
  29   background: #10101a;
  30   display: inline-block;
  31   margin: 1px -2px 1px -2px;
  32   padding: 0 1px 0 1px;
  33 }
  34
  35 #ad {
  36   float: right;
  37   margin: 0 15px 2em 2em;
  38 }
  39
  40 header {
  41   white-space: nowrap;
  42   cursor: default;
  43   z-index: 100;
  44   margin-bottom: 1em;
  45 }
  46 header h1 {
  47   display: inline-block;
  48   margin: 0;
  49   padding-right: 1em;
  50 }
  51 header h1 a {
  52   display: inline-block;
  53   text-decoration: none;
  54   color: #00cc00;
  55   text-shadow: 0 0 2px #00cc00, 0 0 5px #00cc00;
  56 }
  57 header h1 a:hover {
  58   color: #99ff99;
  59   text-shadow: 0 0 2px #99ff99, 0 0 5px #99ff99;
  60 }
  61 header .user {
  62   display: inline-block;
  63   padding: 0 .5em;
  64 }
  65 header .user .star-count {
  66   color: #ffff66;
  67 }
  68 header nav {
  69   display: inline-block;
  70   margin-bottom: 1em;
  71 }
  72 header nav ul {
  73   list-style-type: none;
  74   padding: 0;
  75   margin: 0;
  76   display: inline-block;
  77 }
  78 header nav li {
  79   display: inline-block;
  80   padding: 0 .5em;
  81 }
  82 header nav a {
  83   display: inline-block;
  84   text-decoration: none;
  85   outline: none;
  86 }
  87
  88 input[type="text"] {
  89   background: transparent;
  90   color: inherit;
  91   border: 1px solid #666666;
  92   background: #10101a;
  93   padding: 0 2px;
  94   font-family: inherit;
  95   font-size: inherit;
  96   margin: 0;
  97 }
  98
  99 input[type="submit"] {
 100   background: transparent;
 101   border: 0;
 102   font-family: inherit;
 103   font-size: inherit;
 104   margin: 0;
 105   padding: 0;
 106   color: #009900;
 107   cursor: pointer;
 108 }
 109 input[type="submit"]:hover {
 110   color: #99ff99;
 111 }
 112 *::-moz-focus-inner {
 113   padding: 0;
 114   border: 0
 115 }
 116
 117 article {
 118   width: 45em;
 119   margin-bottom: 2em;
 120   margin-top: 2em;
 121 }
 122 article:first-child {
 123   margin-top: 0;
 124 }
 125 article h2 {
 126   color: #ffffff;
 127   margin-top: 1em;
 128   margin-bottom: 1em;
 129   white-space: nowrap;
 130 }
 131 article h2 + * {
 132   margin-top: 0;
 133 }
 134 article em {
 135   color: #ffffff;
 136   font-style: normal;
 137   text-shadow: 0 0 5px #ffffff;
 138 }
 139 article em.star {
 140   color: #ffff66;
 141   font-style: normal;
 142   text-shadow: 0 0 5px #ffff66;
 143 }
 144 article a {
 145   white-space: nowrap;
 146 }
 147 article .aside {
 148   opacity: .7;
 149 }
 150 article ul {
 151   list-style-type: none;
 152   padding: 0;
 153 }
 154 article li {
 155   padding-left: 2.5em;
 156   position: relative;
 157 }
 158 article li:before {
 159   content: "\00a0\00a0-\00a0";
 160   position: absolute;
 161   left: 0em;
 162   top: .15em;
 163 }
 164 .day-success {
 165   color: #ffff66;
 166   text-shadow: 0 0 5px #ffff66;
 167 }
 168
 169 form#settings label img {
 170   vertical-align: bottom;
 171   position: relative;
 172   top: -3px;
 173   margin-right: .3em;
 174 }
 175 form#settings input[type="radio"] { display: none; }
 176 form#settings input[type="radio"] ~ span {
 177   cursor: pointer;
 178   display: inline-block;
 179   min-width: 30em;
 180 }
 181 form#settings input[type="radio"] ~ span:before {
 182   content: "( ) ";
 183 }
 184 form#settings input[type="radio"] ~ span:hover {
 185   background-color: #19193b;
 186 }
 187 form#settings input[type="radio"]:checked ~ span {
 188   color: #ffffff;
 189 }
 190 form#settings input[type="radio"]:checked ~ span:before {
 191   content: "(O) ";
 192 }
 193 form#settings input[type="checkbox"] { display: none; }
 194 form#settings input[type="checkbox"] ~ span {
 195   cursor: pointer;
 196   display: inline-block;
 197   min-width: 30em;
 198 }
 199 form#settings input[type="checkbox"] ~ span:before {
 200   content: "[ ] ";
 201 }
 202 form#settings input[type="checkbox"] ~ span:hover {
 203   background-color: #19193b;
 204 }
 205 form#settings input[type="checkbox"]:checked ~ span {
 206   color: #ffffff;
 207 }
 208 form#settings input[type="checkbox"]:checked ~ span:before {
 209   content: "[X] ";
 210 }
 211 form#settings input[type="checkbox"]:disabled ~ span {
 212   opacity: .3;
 213   cursor: default;
 214 }
 215 form#settings input[type="checkbox"]:disabled ~ span:before {
 216   content: "[-] ";
 217 }
 218 form#settings input[type="checkbox"]:disabled ~ span:hover {
 219   background-color: transparent;
 220 }
 221
 222 .share {
 223   color: #009900;
 224   cursor: default;
 225   transition: color .2s 1s;
 226   /*position: relative;*/
 227 }
 228 .share:hover {
 229   color: #aaffaa;
 230   transition: color .2s 0s;
 231 }
 232 .share .share-content {
 233   /*position: absolute; background: #0f0f23;*/
 234   display: inline-block;
 235   vertical-align: text-bottom;
 236   white-space: nowrap;
 237   overflow: hidden;
 238   max-width: 0;
 239   transition: max-width .2s 1s;
 240 }
 241 .share .share-content:before {
 242   content: "\00a0";
 243 }
 244 .share .share-content:after {
 245   /*content: "]";*/
 246 }
 247 .share:hover .share-content {
 248   max-width: 45em;
 249   transition: max-width .2s 0s;
 250 }
 251
 252 .puzzle-input {
 253   border: 1px solid #999999;
 254   background: #333333;
 255   color: #ffffff;
 256   text-shadow: 0 0 5px #ffffff;
 257 }
 258
 259 .tree {
 260   cursor: default;
 261   -webkit-user-select: none;
 262   -khtml-user-select: none;
 263   -moz-user-select: -moz-none;
 264   -o-user-select: none;
 265   user-select: none;
 266 }
 267 .tree span {
 268   color: #333333;
 269 }
 270 .tree .tree-trunk {
 271   color: #cccccc;
 272 }
 273 .tree a {
 274   text-decoration: none;
 275   color: #666666;
 276   outline: none;
 277   cursor: default;
 278 }
 279 .tree a:hover {
 280   background-color: #1e1e46;
 281   background-color: rgba(119,119,165,.2);
 282   cursor: pointer;
 283 }
 284 #tree-countdown {
 285   padding-left: .5em;
 286 }
 287 .tree .tree-day { color: #666666; }
 288 .tree a .tree-day { color: #cccccc; }
 289 .tree a.tree-complete, .tree a.tree-verycomplete {
 290   color: #009900;
 291 }
 292 .tree a .tree-mark-complete,
 293 .tree a .tree-mark-verycomplete { visibility: hidden; }
 294 .tree a.tree-complete .tree-mark-complete,
 295 .tree a.tree-verycomplete .tree-mark-complete { visibility: visible; color: #ffff66; }
 296 .tree a.tree-verycomplete .tree-mark-verycomplete { visibility: visible; color: #ffff66; }
 297 .tree a                   .tree-ornament0 { color: inherit; }
 298 .tree a                   .tree-ornament1 { color: inherit; }
 299 .tree a                   .tree-ornament2 { color: inherit; }
 300 .tree a                   .tree-ornament3 { color: inherit; }
 301 .tree a.tree-verycomplete .tree-ornament0 { color: #0066ff; text-shadow: 0 0 5px #0066ff; }
 302 .tree a.tree-verycomplete .tree-ornament1 { color: #ff9900; text-shadow: 0 0 5px #ff9900; }
 303 .tree a.tree-verycomplete .tree-ornament2 { color: #ff0000; text-shadow: 0 0 5px #ff0000; }
 304 .tree a.tree-verycomplete .tree-ornament3 { color: #ffff66; text-shadow: 0 0 5px #ffff66; }
 305 .tree .tree-lightbeam { visibility: hidden; color: #666666; }
 306 .tree a.tree-day25.tree-complete,
 307 .tree a.tree-day25.tree-verycomplete{ color: #ffff66; }
 308 .tree a.tree-day25.tree-verycomplete{ text-shadow: 0 0 5px #ffff66; }
 309 .tree a.tree-complete .tree-lightbeam,
 310 .tree a.tree-verycomplete .tree-lightbeam { visibility: visible; }
 311 .tree a.tree-verycomplete .tree-lightbeam { color: #ffff66; text-shadow: 0 0 5px #ffff66; }
 312
 313 .tree.tree-beckon .tree-day1  { animation: anim-beckon 3s infinite -2.875s; }
 314 .tree.tree-beckon .tree-day2  { animation: anim-beckon 3s infinite -2.750s; }
 315 .tree.tree-beckon .tree-day3  { animation: anim-beckon 3s infinite -2.625s; }
 316 .tree.tree-beckon .tree-day4  { animation: anim-beckon 3s infinite -2.500s; }
 317 .tree.tree-beckon .tree-day5  { animation: anim-beckon 3s infinite -2.375s; }
 318 .tree.tree-beckon .tree-day6  { animation: anim-beckon 3s infinite -2.250s; }
 319 .tree.tree-beckon .tree-day7  { animation: anim-beckon 3s infinite -2.125s; }
 320 .tree.tree-beckon .tree-day8  { animation: anim-beckon 3s infinite -2.000s; }
 321 .tree.tree-beckon .tree-day9  { animation: anim-beckon 3s infinite -1.875s; }
 322 .tree.tree-beckon .tree-day10 { animation: anim-beckon 3s infinite -1.750s; }
 323 .tree.tree-beckon .tree-day11 { animation: anim-beckon 3s infinite -1.625s; }
 324 .tree.tree-beckon .tree-day12 { animation: anim-beckon 3s infinite -1.500s; }
 325 .tree.tree-beckon .tree-day13 { animation: anim-beckon 3s infinite -1.375s; }
 326 .tree.tree-beckon .tree-day14 { animation: anim-beckon 3s infinite -1.250s; }
 327 .tree.tree-beckon .tree-day15 { animation: anim-beckon 3s infinite -1.125s; }
 328 .tree.tree-beckon .tree-day16 { animation: anim-beckon 3s infinite -1.000s; }
 329 .tree.tree-beckon .tree-day17 { animation: anim-beckon 3s infinite -0.875s; }
 330 .tree.tree-beckon .tree-day18 { animation: anim-beckon 3s infinite -0.750s; }
 331 .tree.tree-beckon .tree-day19 { animation: anim-beckon 3s infinite -0.625s; }
 332 .tree.tree-beckon .tree-day20 { animation: anim-beckon 3s infinite -0.500s; }
 333 .tree.tree-beckon .tree-day21 { animation: anim-beckon 3s infinite -0.375s; }
 334 .tree.tree-beckon .tree-day22 { animation: anim-beckon 3s infinite -0.250s; }
 335 .tree.tree-beckon .tree-day23 { animation: anim-beckon 3s infinite -0.125s; }
 336 .tree.tree-beckon .tree-day24 { animation: anim-beckon 3s infinite -0.000s; }
 337 .tree.tree-beckon > span { animation-name: anim-beckon-dark ! important; }
 338 @keyframes anim-beckon {
 339   0%   { color: #666666; }
 340   80%  { color: #666666; }
 341   90%  { color: #00ff00; }
 342   100% { color: #666666; }
 343 }
 344 @keyframes anim-beckon-dark {
 345   0%   { color: #333333; }
 346   80%  { color: #333333; }
 347   90%  { color: #009900; }
 348   100% { color: #333333; }
 349 }
 350 .tree .tree-day-new { animation: anim-day-new 5s; }
 351 .tree .tree-day-new .tree-day { animation: anim-day-new-day 5s; }
 352 @keyframes anim-day-new {
 353   0%   { color: #333333; text-shadow: 0 0 5px transparent; }
 354   25%  { color: #ffffff; text-shadow: 0 0 5px #ffffff; }
 355   100% { color: #666666; text-shadow: 0 0 5px transparent; }
 356 }
 357 @keyframes anim-day-new-day {
 358   0%   { color: #666666; text-shadow: 0 0 5px transparent; }
 359   25%  { color: #ffffff; text-shadow: 0 0 5px #ffffff; }
 360   100% { color: #cccccc; text-shadow: 0 0 5px transparent; }
 361 }
 362
 363 .tree-bkg {
 364   position: fixed;
 365   left: 0;
 366   right: 0;
 367   bottom: 0;
 368   z-index: -1;
 369   color: #ffffff;
 370   cursor: default;
 371   -webkit-user-select: none;
 372   -khtml-user-select: none;
 373   -moz-user-select: -moz-none;
 374   -o-user-select: none;
 375   user-select: none;
 376 }
 377 .tree-bkg div:nth-child(1) { opacity: .04; }
 378 .tree-bkg div:nth-child(2) { opacity: .08; }
 379 .tree-bkg div:nth-child(3) { opacity: .12; }
 380 .tree-bkg div:nth-child(4) { opacity: .16; }
 381 .tree-bkg div {
 382   text-align: justify;
 383   margin-bottom: -1.2em;
 384 }
 385 .tree-bkg div::after {
 386   content: "_";
 387   display: inline-block;
 388   visibility: hidden;
 389   width: 100%;
 390 }
 391
 392 .stats > span, .stats > span .stats-firstonly, .stats > span .stats-both {
 393   color: #666666;
 394 }
 395 .stats > a {
 396   color: #cccccc;
 397   min-width: 35em;
 398   display: inline-block;
 399 }
 400 .stats > a:hover {
 401   background-color: #1e1e46;
 402 }
 403 .stats-firstonly {
 404   color: #666699;
 405 }
 406 .stats-both {
 407   color: #ffff66;
 408 }
 409
 410 .leaderboard-entry {
 411   white-space: pre;
 412 }
 413 .leaderboard-entry .star-count {
 414   color: #ffff66;
 415 }
 416 .leaderboard-anon {
 417   opacity: .6;
 418 }
 419 .leaderboard-userphoto {
 420   display: inline-block;
 421   height: 20px;
 422   width: 20px;
 423   margin: 0 .5em;
 424   text-align: center;
 425 }
 426 .leaderboard-userphoto img {
 427   height: 20px;
 428   max-width: 20px;
 429   vertical-align: middle;
 430   position: relative;
 431   top: -2px;
 432 }
 433 .leaderboard-time {
 434   opacity: .5;
 435 }
 436
 437 .privboard-row {
 438   white-space: pre;
 439 }
 440 .privboard-row .star-count {
 441   color: #ffff66;
 442 }
 443 .privboard-name {
 444   display: inline-block;
 445   overflow-x: hidden;
 446   vertical-align: text-bottom;
 447   width: 14em;
 448 }
 449 .privboard-day-locked     { color: #333333; }
 450 .privboard-star-locked    { visibility: hidden; }
 451 .privboard-star-unlocked  { color: #333333; }
 452 .privboard-star-firstonly { color: #666699; }
 453 .privboard-star-both      { color: #ffff66; }