Login.less 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. @import "~assets/less/variable";
  2. .window {
  3. width: 320px;
  4. background-color: fade(@secondary-color, 50%);
  5. padding-top: 64px;
  6. margin-bottom: 180px;
  7. display: flex;
  8. flex-direction: column;
  9. align-items: center;
  10. position: relative;
  11. z-index: 1;
  12. }
  13. .form {
  14. width: 320px;
  15. text-align: center;
  16. }
  17. .input {
  18. height: 45px;
  19. border-bottom: 1px solid @white;
  20. display: flex;
  21. flex-direction: row;
  22. align-items: center;
  23. &:last-of-type {
  24. border-bottom: 0;
  25. }
  26. i {
  27. color: @white;
  28. font-size: 24px;
  29. flex-shrink: 0;
  30. }
  31. input {
  32. flex: 1;
  33. background-color: transparent;
  34. padding: 0 8px;
  35. border: 0;
  36. outline: none;
  37. color: @white;
  38. font-size: 1.15em;
  39. &::-webkit-input-placeholder {
  40. color: fade(@white, 75);
  41. }
  42. &::-moz-placeholder {
  43. color: fade(@white, 75);
  44. }
  45. &:-ms-input-placeholder {
  46. color: fade(@white, 75);
  47. }
  48. &:-moz-placeholder {
  49. color: fade(@white, 75);
  50. }
  51. &:-webkit-autofill {
  52. -webkit-text-fill-color: @white;
  53. transition: background-color 9999s ease-in-out 0s;
  54. }
  55. }
  56. }
  57. .submit {
  58. width: 75%;
  59. height: 36px;
  60. background-color: transparent;
  61. margin-top: 16px;
  62. border: 1px solid @white;
  63. border-radius: 3px;
  64. color: @white;
  65. font-size: 1.15em;
  66. outline: none;
  67. &[disabled] {
  68. background-color: fade(@white, 20);
  69. }
  70. i {
  71. margin-right: 8px;
  72. }
  73. }
  74. .tips {
  75. width: 75%;
  76. margin-top: 16px;
  77. text-align: center;
  78. span {
  79. color: @light-bg;
  80. }
  81. a {
  82. font-weight: bold;
  83. &.register {
  84. float: left;
  85. }
  86. &.forgetPassword {
  87. float: right;
  88. }
  89. }
  90. }
  91. .joinOrganizationLoadingContent {
  92. padding: 20px 0;
  93. color: @white;
  94. }