authkey.css (3189B)
1 .auth_key_window { 2 display: block; 3 width: 100%; 4 text-align: center; 5 } 6 7 .auth_key_window > .head_text { 8 display: block; 9 margin-bottom: 10px; 10 font-size: 18px; 11 } 12 13 .auth_key_window > .key_wrap { 14 display: block; 15 height: 50px; 16 line-height: 50px; 17 width: 100%; 18 text-align: center; 19 border: 1px solid transparent; 20 font-size: 0; 21 max-width: 380px; 22 margin: 0 auto 20px auto; 23 overflow: hidden; 24 } 25 26 .auth_key_window > .key_wrap:hover { 27 border-color: #9b59b6; 28 } 29 30 .auth_key_window > .key_wrap > .output { 31 height: 50px; 32 line-height: 50px; 33 font-size: 18px; 34 font-weight: bold; 35 text-align: center; 36 display: inline-block; 37 vertical-align: top; 38 padding: 0 20px; 39 animation: timer-expire 1s 1; 40 animation-fill-mode: forwards; 41 animation-delay: 60s; 42 background: #efefed; 43 width: calc(100% - 100px); 44 } 45 46 .auth_key_window > .key_wrap > .expire { 47 display: inline-block; 48 vertical-align: top; 49 width: 100px; 50 height: 50px; 51 position: relative; 52 background: #888; 53 animation: timer-warning 1s 1; 54 animation-fill-mode: forwards; 55 animation-delay: 50s; 56 } 57 58 .auth_key_window > .key_wrap > .expire > .timer { 59 position: absolute; 60 top: 0; 61 left: 0; 62 width: 100px; 63 overflow: hidden; 64 } 65 66 .auth_key_window > .key_wrap > .expire > .timer > .time-part-wrapper { 67 display: inline-block; 68 vertical-align: top; 69 height: 50px; 70 line-height: 50px; 71 color: #fff; 72 } 73 74 .auth_key_window 75 > .key_wrap 76 > .expire 77 > .timer 78 > .time-part-wrapper:first-child:after { 79 content: ":"; 80 display: inline-block; 81 vertical-align: top; 82 width: 15px; 83 height: 50px; 84 line-height: 50px; 85 text-align: center; 86 font-size: 22px; 87 } 88 89 .auth_key_window 90 > .key_wrap 91 > .expire 92 > .timer 93 > .time-part-wrapper 94 > .time-part { 95 display: inline-block; 96 vertical-align: top; 97 width: 15px; 98 position: relative; 99 } 100 101 .auth_key_window 102 > .key_wrap 103 > .expire 104 > .timer 105 > .time-part-wrapper 106 > .time-part 107 > .digit-wrapper { 108 position: absolute; 109 top: 0; 110 left: 0; 111 width: 15px; 112 text-align: center; 113 } 114 115 .auth_key_window 116 > .key_wrap 117 > .expire 118 > .timer 119 > .time-part-wrapper 120 > .time-part 121 > .digit-wrapper 122 > .digit { 123 display: block; 124 width: 100%; 125 text-align: center; 126 height: 50px; 127 line-height: 50px; 128 font-size: 22px; 129 } 130 131 .auth_key_window 132 > .key_wrap 133 > .expire 134 > .timer 135 > .time-part-wrapper 136 > .time-part.seconds.tens 137 > .digit-wrapper { 138 top: -50px; 139 animation: timer-seconds-tens 50s 1; 140 animation-fill-mode: forwards; 141 animation-delay: 1s; 142 } 143 144 .auth_key_window 145 > .key_wrap 146 > .expire 147 > .timer 148 > .time-part-wrapper 149 > .time-part.seconds.ones 150 > .digit-wrapper { 151 animation: timer-seconds-ones 10s 6; 152 } 153 154 .auth_key_window 155 > .key_wrap 156 > .expire 157 > .timer 158 > .time-part-wrapper 159 > .time-part.hundredths.tens 160 > .digit-wrapper { 161 animation: timer-seconds-ones 1s 60; 162 } 163 164 .auth_key_window 165 > .key_wrap 166 > .expire 167 > .timer 168 > .time-part-wrapper 169 > .time-part.hundredths.ones 170 > .digit-wrapper { 171 animation: timer-seconds-ones 500ms 120; 172 }