1 /* CSS Document 2 Stopwatch blinking lights and LED's 3 ***/ 4 5 /* Red LED Starts Here */ 6 .led-red { 7 margin: 0 auto; 8 /* Let width & height be inherited from parent 9 width: 24px; 10 height: 24px; 11 ***/ 12 background-color: #740000; 13 border-radius: 50%; 14 border: 0px none !important; 15 box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #680000 0 -1px 4px, rgba(255, 0, 0, 0.5) 0 1px 4px; 16 /* Animation reference 17 ***/ 18 } 19 .blink-red { 20 -webkit-animation: blinkRed 1.0s infinite; 21 -moz-animation: blinkRed 1.0s infinite; 22 -ms-animation: blinkRed 1.0s infinite; 23 -o-animation: blinkRed 1.0s infinite; 24 animation: blinkRed 1.0s infinite; 25 } 26 @-webkit-keyframes blinkRed { 27 from { background-color: #740000; } 28 50% { background-color: #FF0000; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #680000 0 -1px 4px, rgba(255, 0, 0, 0.5) 0 1px 0;} 29 to { background-color: #740000; } 30 } 31 @-moz-keyframes blinkRed { 32 from { background-color: #740000; } 33 50% { background-color: #FF0000; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #680000 0 -1px 4px, rgba(255, 0, 0, 0.5) 0 1px 0;} 34 to { background-color: #740000; } 35 } 36 @-ms-keyframes blinkRed { 37 from { background-color: #740000; } 38 50% { background-color: #FF0000; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #680000 0 -1px 4px, rgba(255, 0, 0, 0.5) 0 1px 0;} 39 to { background-color: #740000; } 40 } 41 @-o-keyframes blinkRed { 42 from { background-color: #740000; } 43 50% { background-color: #FF0000; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #680000 0 -1px 4px, rgba(255, 0, 0, 0.5) 0 1px 0;} 44 to { background-color: #740000; } 45 } 46 @keyframes blinkRed { 47 from { background-color: #740000; } 48 50% { background-color: #FF0000; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #680000 0 -1px 4px, rgba(255, 0, 0, 0.5) 0 1px 0;} 49 to { background-color: #740000; } 50 } 51 /* END of Red LED CSS */ 52 53 /* Yellow LED Starts Here */ 54 .led-yellow { 55 margin: 0 auto; 56 /* Let width & height be inherited from parent so 57 we can use a field of any size! 58 width: 24px; 59 height: 24px; 60 ***/ 61 background-color: #808002; 62 border: 0px none !important; 63 border-radius: 50%; 64 box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #747402 0 -1px 4px, #FF0 0 1px 4px; 65 } 66 .blink-yellow { 67 -webkit-animation: blinkYellow 1.0s infinite; 68 -moz-animation: blinkYellow 1.0s infinite; 69 -ms-animation: blinkYellow 1.0s infinite; 70 -o-animation: blinkYellow 1.0s infinite; 71 animation: blinkYellow 1.0s infinite; 72 } 73 @-webkit-keyframes blinkYellow { 74 from { background-color: #808002; } 75 50% { background-color: #E1E104; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #747402 0 -1px 4px, #FFE700 0 1px 0; } 76 to { background-color: #808002; } 77 } 78 @-moz-keyframes blinkYellow { 79 from { background-color: #808002; } 80 50% { background-color: #E1E104; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #747402 0 -1px 4px, #FFE700 0 1px 0; } 81 to { background-color: #808002; } 82 } 83 @-ms-keyframes blinkYellow { 84 from { background-color: #808002; } 85 50% { background-color: #E1E104; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #747402 0 -1px 4px, #FFE700 0 1px 0; } 86 to { background-color: #808002; } 87 } 88 @-o-keyframes blinkYellow { 89 from { background-color: #808002; } 90 50% { background-color: #E1E104; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #747402 0 -1px 4px, #FFE700 0 1px 0; } 91 to { background-color: #808002; } 92 } 93 @keyframes blinkYellow { 94 from { background-color: #808002; } 95 50% { background-color: #E1E104; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #747402 0 -1px 4px, #FFE700 0 1px 0; } 96 to { background-color: #808002; } 97 } 98 /* END of Yellow LED CSS */ 99 100 /* Green LED Starts Here */ 101 .led-green { 102 margin: 0 auto; 103 /* Let width & height be inherited from parent so 104 we can use a field of any size! 105 width: 24px; 106 height: 24px; 107 ***/ 108 background-color: #36670B; 109 border: 0px none !important; 110 border-radius: 50%; 111 box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #304701 0 -1px 4px, #89FF00 0 1px 4px; 112 } 113 .blink-green { 114 -webkit-animation: blinkGreen 1.0s infinite; 115 -moz-animation: blinkGreen 1.0s infinite; 116 -ms-animation: blinkGreen 1.0s infinite; 117 -o-animation: blinkGreen 1.0s infinite; 118 animation: blinkGreen 1.0s infinite; 119 } 120 @-webkit-keyframes blinkGreen { 121 from { background-color: #36670B; } 122 50% { background-color: #ABFF00; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #304701 0 -1px 4px, #89FF00 0 1px 0; } 123 to { background-color: #36670B; } 124 } 125 @-moz-keyframes blinkGreen { 126 from { background-color: #36670B; } 127 50% { background-color: #ABFF00; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #304701 0 -1px 4px, #89FF00 0 1px 0; } 128 to { background-color: #36670B; } 129 } 130 @-ms-keyframes blinkGreen { 131 from { background-color: #36670B; } 132 50% { background-color: #ABFF00; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #304701 0 -1px 4px, #89FF00 0 1px 0; } 133 to { background-color: #36670B; } 134 } 135 @-o-keyframes blinkGreen { 136 from { background-color: #36670B; } 137 50% { background-color: #ABFF00; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #304701 0 -1px 4px, #89FF00 0 1px 0; } 138 to { background-color: #36670B; } 139 } 140 @keyframes blinkGreen { 141 from { background-color: #36670B; } 142 50% { background-color: #ABFF00; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #304701 0 -1px 4px, #89FF00 0 1px 0; } 143 to { background-color: #36670B; } 144 } 145 /* END of Green LED CSS */ 146 147 /* Blue LED Starts Here */ 148 .led-blue { 149 margin: 0 auto; 150 /* Let width & height be inherited from parent so 151 we can use a field of any size! 152 width: 24px; 153 height: 24px; 154 ***/ 155 background-color: #0A6078; 156 border: 0px none !important; 157 border-radius: 50%; 158 box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #006 0 -1px 4px, #3D86F5 0 1px 4px; 159 } 160 .blink-blue { 161 -webkit-animation: blinkBlue 1.0s infinite; 162 -moz-animation: blinkBlue 1.0s infinite; 163 -ms-animation: blinkBlue 1.0s infinite; 164 -o-animation: blinkBlue 1.0s infinite; 165 animation: blinkBlue 1.0s infinite; 166 } 167 @-webkit-keyframes blinkBlue { 168 from { background-color: #0A6078; } 169 50% { background-color: #24E0FF; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #006 0 -1px 4px, #3D86F5 0 1px 0; } 170 to { background-color: #0A6078; } 171 } 172 @-moz-keyframes blinkBlue { 173 from { background-color: #0A6078; } 174 50% { background-color: #24E0FF; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #006 0 -1px 4px, #3D86F5 0 1px 0; } 175 to { background-color: #0A6078; } 176 } 177 @-ms-keyframes blinkBlue { 178 from { background-color: #0A6078; } 179 50% { background-color: #24E0FF; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #006 0 -1px 4px, #3D86F5 0 1px 0; } 180 to { background-color: #0A6078; } 181 } 182 @-o-keyframes blinkBlue { 183 from { background-color: #0A6078; } 184 50% { background-color: #24E0FF; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #006 0 -1px 4px, #3D86F5 0 1px 0; } 185 to { background-color: #0A6078; } 186 } 187 @keyframes blinkBlue { 188 from { background-color: #0A6078; } 189 50% { background-color: #24E0FF; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #006 0 -1px 4px, #3D86F5 0 1px 0; } 190 to { background-color: #0A6078; } 191 } 192 /* END of Blue LED CSS */