Facebook
From RAERAY BAGER, 2 Years ago, written in HTML5.
Embed
Download Paste or View Raw
Hits: 33
  1.         @font-face {
  2.             font-family: "Roboto";
  3.             font-weight: 400;
  4.             font-style: normal;
  5.             /* Because China can't load GFonts */
  6.             src: local("Roboto"), local("Roboto-Regular"),
  7.                  url("font/roboto-v16-latin-regular.woff2") format("woff2"),
  8.                  url("font/roboto-v16-latin-regular.woff") format("woff");
  9.             /* <=IE9? Sucks for you */
  10.        }
  11.        html, body {
  12.            height: 100%;
  13.            width: 100%;
  14.  
  15.            margin: 0;
  16.            outline: 0;
  17.            padding: 0;
  18.  
  19.            font-family: "Roboto", sans-serif;
  20.            font-size: 16px;
  21.        }
  22.        body {
  23.            background-color: #2C2F33;
  24.            color: #DDD;
  25.        }
  26.        h3 {
  27.            color: #FFF;
  28.            font-weight: normal;
  29.        }
  30.        a.disabled {
  31.            color: #999;
  32.            cursor: not-allowed;
  33.        }
  34.        a {
  35.            color: #FFF;
  36.        }
  37.        .light {
  38.            background-color: #FFF;
  39.            color: #2C2F33;
  40.        }
  41.        .light h3 {
  42.            color: #000;
  43.            font-weight: normal;
  44.        }
  45.        .light a {
  46.            color: blue;
  47.        }
  48.        .light .eyes {
  49.            filter: invert(1);
  50.        }
  51.        input[type="text"] {
  52.            background-color: transparent;
  53.            border: none;
  54.            border-bottom: 2px solid #7289DA;
  55.            color: #FFF;
  56.            outline: none;
  57.            padding: .25em;
  58.        }
  59.        input[type="text"].error {
  60.            border-bottom: 2px solid #F00;
  61.        }
  62.        input[type="text"].success {
  63.            border-bottom: 2px solid #2F2;
  64.        }
  65.        .small {
  66.            font-size: .8em;
  67.        }
  68.        .container {
  69.            margin: 0 auto;
  70.            max-width: 1280px;
  71.            padding: .5em;
  72.        }
  73.        .header, .footer {
  74.            background-color: #7289DA;
  75.            color: #FFF;
  76.        }
  77.        .header {
  78.            max-height: 3rem;
  79.  
  80.            text-align: center;
  81.  
  82.            z-index: 1;
  83.        }
  84.        .header .logo {
  85.            height: 100%;
  86.            width: auto;
  87.  
  88.            max-height: 2.5rem;
  89.            max-width: 100%;
  90.  
  91.            object-fit: contain;
  92.  
  93.            vertical-align: middle;
  94.        }
  95.        .header .right-link {
  96.            float: right;
  97.            padding: .75em 1em;
  98.            text-decoration: none;
  99.            z-index: 1;
  100.        }
  101.        .header .right-link.eyes {
  102.            padding: 0 .5em;
  103.        }
  104.        .header .eyes img {
  105.            height: 100%;
  106.            width: auto;
  107.  
  108.            max-height: 3rem;
  109.            max-width: 100%;
  110.  
  111.            object-fit: contain;
  112.  
  113.            vertical-align: middle;
  114.        }
  115.        .header .title {
  116.            font-size: 1.5rem;
  117.            line-height: 3rem;
  118.  
  119.            height: 100%;
  120.  
  121.            vertical-align: middle;
  122.        }
  123.        .result .equation {
  124.            font-size: .8em;
  125.        }
  126.        .result .permissions {
  127.            font-size: 1.5em;
  128.        }
  129.        .selector {
  130.            margin-bottom: 1em;
  131.            overflow: auto;
  132.            margin-left: -.5em;
  133.            margin-right: -.5em;
  134.        }
  135.        .selector .col-me-maybe {
  136.            float: left;
  137.            margin: 0 auto;
  138.            min-height: 1px;
  139.            box-sizing: border-box;
  140.            padding: 0 .5em;
  141.            /* More 3s than AP season */
  142.            width: 100%;
  143.        }
  144.        ul {
  145.            display: inline-block;
  146.            list-style: none;
  147.            margin: 0;
  148.            padding: 0;
  149.        }
  150.        input[type="checkbox" i] {
  151.            box-sizing: border-box;
  152.            color: inherit;
  153.            margin: 0;
  154.            padding: 0;
  155.        }
  156.        input[type="checkbox" i]:not(:checked), input[type="checkbox" i]:checked {
  157.            position: absolute;
  158.            left: -9999em;
  159.            opacity: 0;
  160.        }
  161.        input[type="checkbox" i]+label {
  162.            position: relative;
  163.            padding-left: 1.75em;
  164.            cursor: pointer;
  165.            display: inline-block;
  166.            height: 2em;
  167.            line-height: 1.375em;
  168.        }
  169.        input[type="checkbox" i]+label:after, input[type="checkbox" i]+label:before {
  170.            content: '';
  171.            position: absolute;
  172.            top: 0;
  173.            left: 0;
  174.            width: 1em;
  175.            height: 1em;
  176.            border: 2px solid #888;
  177.            border-radius: 2px;
  178.            transition: .2s;
  179.            z-index: 0;
  180.        }
  181.        input[type="checkbox" i]+label:before {
  182.            border: 2px solid transparent;
  183.        }
  184.        input[type="checkbox" i]:checked+label:after, input[type="checkbox" i]:checked+label:before {
  185.            content: "";
  186.            left: 0;
  187.            position: absolute;
  188.        }
  189.        input[type="checkbox" i]:checked+label:after {
  190.            background-color: #7289DA;
  191.            border-color: #7289DA;
  192.        }
  193.        input[type="checkbox" i]:checked+label:before {
  194.            top: 0;
  195.            left: -.1em;
  196.            width: .2em;
  197.            height: .6em;
  198.            border-top: .2em solid transparent;
  199.            border-right: .2em solid #FFF;
  200.            border-bottom: .2em solid #FFF;
  201.            border-left: .2em solid transparent;
  202.            transform: rotateZ(45deg);
  203.            transform-origin: 100% 100%;
  204.            z-index: 1;
  205.        }
  206.        .footer {
  207.            box-sizing: border-box;
  208.            height: 3em;
  209.            max-height: 3em;
  210.            font-size: .8em;
  211.            margin: 0;
  212.            padding: 1em;
  213.        }
  214.        .large-only {
  215.            display: none;
  216.        }
  217.        .oauth a {
  218.            display: inline-block;
  219.            max-width: 100%;
  220.            overflow: hidden;
  221.            text-overflow: ellipsis;
  222.            vertical-align: bottom;
  223.            white-space: initial;
  224.            word-wrap: break-word;
  225.        }
  226.        .orangutan-not-orange {
  227.            color: #FAA61A;
  228.        }
  229.        .light .orangutan-not-orange {
  230.            color: #C88414;
  231.        }
  232.        .container.stacky-footer {
  233.            box-sizing: border-box;
  234.            z-index: 0;
  235.            min-height: calc(100vh - 3em - 3em);
  236.        }
  237.        @media only screen and (min-width: 640px) {
  238.            .footer {
  239.                font-size: 1em;
  240.            }
  241.            .large-only {
  242.                display: inline-block;
  243.            }
  244.            span.large-only {
  245.                display: inline;
  246.            }
  247.            .selector .col-me-maybe {
  248.                /* More 3s than AP season */
  249.                width: 33.3333333333%;
  250.            }
  251.        }
  252.    </style>