#e8e8e8
1.form-container { 2 width: 320px; 3 border-radius: 0.75rem; 4 background-color: rgba(17, 24, 39, 1); 5 padding: 2rem; 6 color: rgba(243, 244, 246, 1); 7} 8 9.title { 10 text-align: center; 11 font-size: 1.5rem; 12 line-height: 2rem; 13 font-weight: 700; 14} 15 16.form { 17 margin-top: 1.5rem; 18} 19 20.input-group { 21 margin-top: 0.25rem; 22 font-size: 0.875rem; 23 line-height: 1.25rem; 24} 25 26.input-group label { 27 display: block; 28 color: rgba(156, 163, 175, 1); 29 margin-bottom: 4px; 30} 31 32.input-group input { 33 width: 100%; 34 border-radius: 0.375rem; 35 border: 1px solid rgba(55, 65, 81, 1); 36 outline: 0; 37 background-color: rgba(17, 24, 39, 1); 38 padding: 0.75rem 1rem; 39 color: rgba(243, 244, 246, 1); 40} 41 42.input-group input:focus { 43 border-color: rgba(167, 139, 250); 44} 45 46.forgot { 47 display: flex; 48 justify-content: flex-end; 49 font-size: 0.75rem; 50 line-height: 1rem; 51 color: rgba(156, 163, 175,1); 52 margin: 8px 0 14px 0; 53} 54 55.forgot a,.signup a { 56 color: rgba(243, 244, 246, 1); 57 text-decoration: none; 58 font-size: 14px; 59} 60 61.forgot a:hover, .signup a:hover { 62 text-decoration: underline rgba(167, 139, 250, 1); 63} 64 65.sign { 66 display: block; 67 width: 100%; 68 background-color: rgba(167, 139, 250, 1); 69 padding: 0.75rem; 70 text-align: center; 71 color: rgba(17, 24, 39, 1); 72 border: none; 73 border-radius: 0.375rem; 74 font-weight: 600; 75} 76 77.social-message { 78 display: flex; 79 align-items: center; 80 padding-top: 1rem; 81} 82 83.line { 84 height: 1px; 85 flex: 1 1 0%; 86 background-color: rgba(55, 65, 81, 1); 87} 88 89.social-message .message { 90 padding-left: 0.75rem; 91 padding-right: 0.75rem; 92 font-size: 0.875rem; 93 line-height: 1.25rem; 94 color: rgba(156, 163, 175, 1); 95} 96 97.social-icons { 98 display: flex; 99 justify-content: center; 100} 101 102.social-icons .icon { 103 border-radius: 0.125rem; 104 padding: 0.75rem; 105 border: none; 106 background-color: transparent; 107 margin-left: 8px; 108} 109 110.social-icons .icon svg { 111 height: 1.25rem; 112 width: 1.25rem; 113 fill: #fff; 114} 115 116.signup { 117 text-align: center; 118 font-size: 0.75rem; 119 line-height: 1rem; 120 color: rgba(156, 163, 175, 1); 121} 122
Comments
1Satrap18 27. September at 12:38
27. September at 12:38
is very nice :)
MIT License