-
-
Save mightypanders/5bec35774d4f0cd391d5c9cb22b5278c to your computer and use it in GitHub Desktop.
Lightdm Webkit 2 theme
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="author" content="Pedro Penna - @pedropenna"> | |
| <title>Musfealle - Lightdm Webkit Greeter Theme</title> | |
| <script src="js/jquery-1.10.2.js"></script> | |
| <script src="js/mock.js"></script> | |
| <script src="js/main.js"></script> | |
| <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" /> | |
| <style type="text/css"> | |
| html, | |
| body { | |
| height: 100%; | |
| width: 100%; | |
| background-color: #000000; | |
| background: url("img/sddm-lain-wired-theme/bgN5.gif") repeat repeat; | |
| font-family: "Lato", "Open Sans", sans-serif; | |
| overflow: hidden; | |
| } | |
| #motherOfAllContainers { | |
| width:100%; | |
| height:100%; | |
| font-family: sans-serif; | |
| } | |
| img { | |
| padding-top: 50px; | |
| } | |
| div { | |
| padding: 3px; | |
| } | |
| #sessionDisplay { | |
| /* background-color: rgba(230, 230, 150, 0.6); */ | |
| border-radius: 4px; | |
| /* color: #000000; */ | |
| color: #d2738a; | |
| display:none; | |
| font-weight: bold; | |
| padding: 3px 16px 3px 16px; | |
| margin-top: 16px; | |
| margin: 17px 3px 0px 3px; | |
| } | |
| #inputBoxesContainer { | |
| font-size: 16px; | |
| width: 20%; | |
| } | |
| a:link {color:#d2738a;} | |
| a:visited {color:#d2738a;} | |
| a:hover {color:#c1b492;} | |
| a:active {color:#d2738a;} | |
| .glitch{ | |
| position: relative; | |
| font-size: 44px; | |
| color: #c1b492; | |
| } | |
| .glitch::before, | |
| .glitch::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .glitch::before { | |
| left: 1px; | |
| text-shadow: -1px 0 red; | |
| /* important: opaque background masks the original */ | |
| background: black; | |
| clip: rect(24px, 450px, 36px, 0); | |
| animation: glitch-anim-1 1s infinite linear alternate-reverse; | |
| } | |
| .glitch::after { | |
| left: -1px; | |
| text-shadow: -1px 0 blue; | |
| /* important: opaque background masks the original */ | |
| background: black; | |
| clip: rect(35px, 500px, 56px, 0); | |
| animation: glitch-anim-2 2s infinite linear alternate-reverse; | |
| } | |
| @keyframes glitch-anim-1 { | |
| 0% { | |
| clip: rect(70px, 2000px, 76px, 0); | |
| } | |
| 20% { | |
| clip: rect(29px, 2000px, 16px, 0); | |
| } | |
| 40% { | |
| clip: rect(76px, 2000px, 3px, 0); | |
| } | |
| 60% { | |
| clip: rect(42px, 2000px, 78px, 0); | |
| } | |
| 80% { | |
| clip: rect(15px, 2000px, 13px, 0); | |
| } | |
| 100% { | |
| clip: rect(53px, 2000px, 5px, 0); | |
| } | |
| } | |
| @keyframes glitch-anim-2 { | |
| 0% { | |
| clip: rect(-10px, 2000px, 10px, 0); | |
| } | |
| 20% { | |
| clip: rect(29px, 2000px, 16px, 0); | |
| } | |
| 40% { | |
| clip: rect(76px, 2000px, 3px, 0); | |
| } | |
| 60% { | |
| clip: rect(42px, 2000px, 78px, 0); | |
| } | |
| 80% { | |
| clip: rect(15px, 2000px, 13px, 0); | |
| } | |
| 100% { | |
| clip: rect(53px, 2000px, 5px, 0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="motherOfAllContainers" align="center"> | |
| <img draggable="false" src="img/sddm-lain-wired-theme/WiredLogIn.gif" > | |
| <div class="glitch" data-text="W̡̟̤̳̘͈͓͌̊͂̅̀͠ͅh̷̛̘̦̥̻̞̍̔̉̓͗ͤ͊̚ò̢̫͕̞̝͑ͮ͒ ̝̪̼ͧ̏̓͗ͫ͛ͮ́͝i̻̰̼̯̳̜̓͒ͫ͛́̀ͅs̵̭͉̞̜̈́̀̾̐̂́͠ ̩͍̬̩̖̀ͪ̋͒͐t̖̘ͫ̕h̦̲͔ͧͭͨ̋̅̄͆̌͟e̖̘̣̩̯̲̬̝͔̎̓͠ ̜̦̥̟͈̉ͩ͗ͭ͊͘Ư̟͎̓͑̈̅͌̽͋͢s̐͆ͨ̍̽ͤ́ͫ͏̮͕̺̥̻̯͙̠e̵̢͉͓̥̰͉͔̼͎̓ͮ̌̃͐ͦr͙͙̳̼̣̆͌̓ͨ̅́ͫ̑̕?̘͍̪̺̻̤̣̈͑̇̌͑"> | |
| <!-- <div class="glitch" data-text="Who is the User?"> --> | |
| <!-- Who is the User? --> | |
| W̡̟̤̳̘͈͓͌̊͂̅̀͠ͅh̷̛̘̦̥̻̞̍̔̉̓͗ͤ͊̚ò̢̫͕̞̝͑ͮ͒ ̝̪̼ͧ̏̓͗ͫ͛ͮ́͝i̻̰̼̯̳̜̓͒ͫ͛́̀ͅs̵̭͉̞̜̈́̀̾̐̂́͠ ̩͍̬̩̖̀ͪ̋͒͐t̖̘ͫ̕h̦̲͔ͧͭͨ̋̅̄͆̌͟e̖̘̣̩̯̲̬̝͔̎̓͠ ̜̦̥̟͈̉ͩ͗ͭ͊͘Ư̟͎̓͑̈̅͌̽͋͢s̐͆ͨ̍̽ͤ́ͫ͏̮͕̺̥̻̯͙̠e̵̢͉͓̥̰͉͔̼͎̓ͮ̌̃͐ͦr͙͙̳̼̣̆͌̓ͨ̅́ͫ̑̕?̘͍̪̺̻̤̣̈͑̇̌͑ | |
| </div> | |
| <br/> | |
| <div id="inputBoxesContainer" style="display:none"> | |
| <div> | |
| <font font color="#c1b492">Ｕｓｅｒ ＩＤ：</font> | |
| <input type="text" name="username" id="username" class="form-control" size="6"> | |
| </div> | |
| <div> | |
| <font font color="#c1b492">ＰａｓｓＷｏｒｄ：</font><br> | |
| <input type="password" name="password" id="password" class="form-control" size="16"> | |
| </div> | |
| <div id="sessionDisplay"> | |
| Session: <span id="sessionNameContainer" style="" ></span> | |
| </div> | |
| </div> | |
| <br><br><br><font font color="#c1b492", font size="1">Don't beleive her lies<font> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment