Posted By

dirtybegger on 09/01/14


Tagged


Versions (?)

dark login css


 / Published in: CSS
 

dirtyhacker dark login

  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code,
  4. del, dfn, em, img, ins, kbd, q, s, samp,
  5. small, strike, strong, sub, sup, tt, var,
  6. b, u, i, center,
  7. dl, dt, dd, ol, ul, li,
  8. fieldset, form, label, legend,
  9. table, caption, tbody, tfoot, thead, tr, th, td,
  10. article, aside, canvas, details, embed,
  11. figure, figcaption, footer, header, hgroup,
  12. menu, nav, output, ruby, section, summary,
  13. time, mark, audio, video {
  14. margin: 0;
  15. padding: 0;
  16. border: 0;
  17. font-size: 100%;
  18. font: inherit;
  19. vertical-align: baseline;
  20. }
  21.  
  22. article, aside, details, figcaption, figure,
  23. footer, header, hgroup, menu, nav, section {
  24. display: block;
  25. }
  26.  
  27. body {
  28. line-height: 1;
  29. }
  30.  
  31. ol, ul {
  32. list-style: none;
  33. }
  34.  
  35. blockquote, q {
  36. quotes: none;
  37. }
  38.  
  39. blockquote:before, blockquote:after,
  40. q:before, q:after {
  41. content: '';
  42. content: none;
  43. }
  44.  
  45. table {
  46. border-collapse: collapse;
  47. border-spacing: 0;
  48. }
  49.  
  50. .about {
  51. margin: 70px auto 40px;
  52. padding: 8px;
  53. width: 260px;
  54. font: 10px/18px 'Lucida Grande', Arial, sans-serif;
  55. color: #666;
  56. text-align: center;
  57. text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  58. background: #eee;
  59. background: rgba(250, 250, 250, 0.8);
  60. border-radius: 4px;
  61. background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  62. background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  63. background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  64. background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
  65. -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 6px rgba(0, 0, 0, 0.2);
  66. box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 6px rgba(0, 0, 0, 0.2);
  67. }
  68. .about a {
  69. color: #333;
  70. text-decoration: none;
  71. border-radius: 2px;
  72. -webkit-transition: background 0.1s;
  73. -moz-transition: background 0.1s;
  74. -o-transition: background 0.1s;
  75. transition: background 0.1s;
  76. }
  77. .about a:hover {
  78. text-decoration: none;
  79. background: #fafafa;
  80. background: rgba(255, 255, 255, 0.7);
  81. }
  82.  
  83. .about-links {
  84. height: 30px;
  85. }
  86. .about-links > a {
  87. float: left;
  88. width: 50%;
  89. line-height: 30px;
  90. font-size: 12px;
  91. }
  92.  
  93. .about-author {
  94. margin-top: 5px;
  95. }
  96. .about-author > a {
  97. padding: 1px 3px;
  98. margin: 0 -1px;
  99. }
  100.  
  101. /*
  102.  * Copyright (c) 2012-2013 Thibaut Courouble
  103.  * http://www.cssflow.com
  104.  *
  105.  * Licensed under the MIT License:
  106.  * http://www.opensource.org/licenses/mit-license.php
  107.  */
  108. body, .login-submit, .login-submit:before, .login-submit:after {
  109. background: #373737 url("../img/bg.png") 0 0 repeat;
  110. }
  111.  
  112. body {
  113. font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  114. color: #404040;
  115. }
  116.  
  117. a {
  118. color: #00a1d2;
  119. text-decoration: none;
  120. }
  121. a:hover {
  122. text-decoration: underline;
  123. }
  124.  
  125. .login {
  126. position: relative;
  127. margin: 80px auto;
  128. width: 400px;
  129. padding-right: 32px;
  130. font-weight: 300;
  131. color: #a8a7a8;
  132. text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
  133. }
  134. .login p {
  135. margin: 0 0 10px;
  136. }
  137.  
  138. input, button, label {
  139. font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  140. font-size: 15px;
  141. font-weight: 300;
  142. -webkit-box-sizing: border-box;
  143. -moz-box-sizing: border-box;
  144. box-sizing: border-box;
  145. }
  146.  
  147. input[type=text], input[type=password] {
  148. padding: 0 10px;
  149. width: 300px;
  150. height: 40px;
  151. color: #bd110d;
  152. text-shadow: 1px 1px 1px black;
  153. background: rgba(0, 0, 0, 0.16);
  154. border: 0;
  155. border-radius: 5px;
  156. -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06);
  157. box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06);
  158. }
  159. input[type=text]:focus, input[type=password]:focus {
  160. color: #1034a6;
  161. background: rgba(0, 0, 0, 0.1);
  162. outline: 0;
  163. }
  164.  
  165. label {
  166. float: left;
  167. width: 100px;
  168. line-height: 40px;
  169. padding-right: 10px;
  170. font-weight: 100;
  171. text-align: right;
  172. letter-spacing: 1px;
  173. color: #1E91FE;
  174. }
  175.  
  176. .forgot-password {
  177. padding-left: 100px;
  178. font-size: 13px;
  179. font-weight: 100;
  180. letter-spacing: 1px;
  181. }
  182.  
  183. .login-submit {
  184. position: absolute;
  185. top: 12px;
  186. right: 0;
  187. width: 48px;
  188. height: 48px;
  189. padding: 8px;
  190. border-radius: 32px;
  191. -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
  192. box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
  193. }
  194. .login-submit:before, .login-submit:after {
  195. content: '';
  196. z-index: 1;
  197. position: absolute;
  198. }
  199. .login-submit:before {
  200. top: 28px;
  201. left: -4px;
  202. width: 4px;
  203. height: 10px;
  204. -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
  205. box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
  206. }
  207. .login-submit:after {
  208. top: -4px;
  209. bottom: -4px;
  210. right: -4px;
  211. width: 36px;
  212. }
  213.  
  214. .login-button {
  215. position: relative;
  216. z-index: 2;
  217. width: 48px;
  218. height: 48px;
  219. padding: 0 0 48px;
  220. /* Fix wrong positioning in Firefox 9 & older (bug 450418) */
  221. text-indent: 120%;
  222. white-space: nowrap;
  223. overflow: hidden;
  224. background: none;
  225. border: 0;
  226. border-radius: 24px;
  227. cursor: pointer;
  228. -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.1);
  229. box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.1);
  230. /* Must use another pseudo element for the gradient background because Webkit */
  231. /* clips the background incorrectly inside elements with a border-radius. */
  232. }
  233. .login-button:before {
  234. content: '';
  235. position: absolute;
  236. top: 5px;
  237. bottom: 5px;
  238. left: 5px;
  239. right: 5px;
  240. background: #00a2d3;
  241. border-radius: 24px;
  242. background-image: -webkit-linear-gradient(top, #00a2d3, #0d7796);
  243. background-image: -moz-linear-gradient(top, #00a2d3, #0d7796);
  244. background-image: -o-linear-gradient(top, #00a2d3, #0d7796);
  245. background-image: linear-gradient(to bottom, #00a2d3, #0d7796);
  246. -webkit-box-shadow: inset 0 0 0 1px #00a2d3, 0 0 0 5px rgba(0, 0, 0, 0.16);
  247. box-shadow: inset 0 0 0 1px #00a2d3, 0 0 0 5px rgba(0, 0, 0, 0.16);
  248. }
  249. .login-button:active:before {
  250. background: #0591ba;
  251. background-image: -webkit-linear-gradient(top, #0591ba, #00a2d3);
  252. background-image: -moz-linear-gradient(top, #0591ba, #00a2d3);
  253. background-image: -o-linear-gradient(top, #0591ba, #00a2d3);
  254. background-image: linear-gradient(to bottom, #0591ba, #00a2d3);
  255. }
  256. .login-button:after {
  257. content: '';
  258. position: absolute;
  259. top: 15px;
  260. left: 12px;
  261. width: 25px;
  262. height: 19px;
  263. background: url("/images/arrow.png") 0 0 no-repeat;
  264. }
  265.  
  266. ::-moz-focus-inner {
  267. border: 0;
  268. padding: 0;
  269. }
  270.  
  271. .lt-ie9 input[type=text], .lt-ie9 input[type=password] {
  272. line-height: 40px;
  273. background: #282828;
  274. }
  275. .lt-ie9 .login-submit {
  276. position: absolute;
  277. top: 12px;
  278. right: -28px;
  279. padding: 4px;
  280. }
  281. .lt-ie9 .login-submit:before, .lt-ie9 .login-submit:after {
  282. display: none;
  283. }
  284. .lt-ie9 .login-button {
  285. line-height: 48px;
  286. }
  287. .lt-ie9 .about {
  288. background: #313131;
  289. }
  290.  
  291.  
  292. /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
  293.  
  294. @media only screen and (min-width: 481px) {
  295.  
  296. .gridContainer {
  297. width: 90.675%;
  298. padding-left: 1.1625%;
  299. padding-right: 1.1625%;
  300. clear: none;
  301. float: none;
  302. margin-left: auto;
  303. }
  304. #top {
  305. }
  306. #systemnav {
  307. }
  308. #systemnavul {
  309. width: 100%;
  310. }
  311. .systemnavullist {
  312. width: 100%;
  313. clear: both;
  314. margin-left: 0;
  315. }
  316. #formdiv {
  317. }
  318. .hide_tablet {
  319. display: none;
  320. }
  321. .zeroMargin_tablet {
  322. margin-left: 0;
  323. }
  324. }
  325.  
  326. /* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
  327.  
  328. @media only screen and (min-width: 769px) {
  329.  
  330. .gridContainer {
  331. width: 88.5%;
  332. max-width: 1232px;
  333. padding-left: 0.75%;
  334. padding-right: 0.75%;
  335. margin: auto;
  336. clear: none;
  337. float: none;
  338. margin-left: auto;
  339. }
  340. #top {
  341. }
  342. #systemnav {
  343. }
  344. #systemnavul {
  345. display: block;
  346. padding-left: 15%;
  347. width: 83.0508%;
  348. }
  349. .systemnavullist {
  350. width: 18.3673%;
  351. margin-left: 2.0408%;
  352. clear: none;
  353. text-align: center;
  354. display: block;
  355. }

Report this snippet  

You need to login to post a comment.