_lockscreen.scss 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. //
  2. // Pages: Lock Screen
  3. //
  4. // ADD THIS CLASS TO THE <BODY> TAG
  5. .lockscreen {
  6. background-color: $gray-200;
  7. // User name [optional]
  8. .lockscreen-name {
  9. font-weight: 600;
  10. text-align: center;
  11. }
  12. }
  13. .lockscreen-logo {
  14. font-size: 35px;
  15. font-weight: 300;
  16. margin-bottom: 25px;
  17. text-align: center;
  18. a {
  19. color: $gray-700;
  20. }
  21. }
  22. .lockscreen-wrapper {
  23. margin: 0 auto;
  24. margin-top: 10%;
  25. max-width: 400px;
  26. }
  27. // Will contain the image and the sign in form
  28. .lockscreen-item {
  29. @include border-radius(4px);
  30. background-color: $white;
  31. margin: 10px auto 30px;
  32. padding: 0;
  33. position: relative;
  34. width: 290px;
  35. }
  36. // User image
  37. .lockscreen-image {
  38. @include border-radius(50%);
  39. background-color: $white;
  40. left: -10px;
  41. padding: 5px;
  42. position: absolute;
  43. top: -25px;
  44. z-index: 10;
  45. > img {
  46. @include border-radius(50%);
  47. height: 70px;
  48. width: 70px;
  49. }
  50. }
  51. // Contains the password input and the login button
  52. .lockscreen-credentials {
  53. margin-left: 70px;
  54. .form-control {
  55. border: 0;
  56. }
  57. .btn {
  58. background-color: $white;
  59. border: 0;
  60. padding: 0 10px;
  61. }
  62. }
  63. .lockscreen-footer {
  64. margin-top: 10px;
  65. }
  66. @include dark-mode () {
  67. .lockscreen-item {
  68. background-color: $dark;
  69. }
  70. .lockscreen-logo a {
  71. color: $white;
  72. }
  73. .lockscreen-credentials .btn {
  74. background-color: $dark;
  75. }
  76. .lockscreen-image {
  77. background-color: $gray-600;
  78. }
  79. }