انجمن کدستانMoisrex

p { margin: 0; }

ul { list-style: none; margin: 0; padding: 0;}

/* ---------- GENERAL-CLASSES ---------- */

.container { height: 228px; left: 50%; margin: -124px 0 0 -100px; position: absolute; top: 50%; width: 200px;}

/* ---------- APP ---------- */

.app { text-align: center;}

.app-title { font-size: 24px; font-weight: bold; text-shadow: 0 5px #15181f;}

.clock { background: #1a1d24; border-radius: 35px; -webkit-box-shadow: 0 8px 0 #15181f; box-shadow: 0 8px 0 #15181f; height: 200px; margin-bottom: 24px; position: relative; width: 200px;}

.clock-inner { background: #f9f9f9; border-radius: 50%; height: 160px; left: 50%; margin: -80px 0 0 -80px; position: absolute; top: 50%; width: 160px;}

.clock-center,#clock-seconds,#clock-minutes,#clock-hours { left: 50%; position: absolute; top: 50%;}

.clock-center { background: #1a1d24; border-radius: 50%; height: 12px; margin: -6px 0 0 -6px; width: 12px; z-index: 4;}

#clock-seconds { background: #c40206; border-radius: 2px; height: 60px; margin: -60px 0 0 -1px; -webkit-transform-origin: 1px 60px; -moz-transform-origin: 1px 60px; -ms-transform-origin: 1px 60px; -o-transform-origin: 1px 60px; transform-origin: 1px 60px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); width: 2px; z-index: 3;}

#clock-minutes { background: #aaa; border-radius: 4px; height: 50px; margin: -50px 0 0 -2px; -webkit-transform-origin: 2px 50px; -moz-transform-origin: 2px 50px; -ms-transform-origin: 2px 50px; -o-transform-origin: 2px 50px; transform-origin: 2px 50px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); width: 4px; z-index: 2;}

#clock-hours { background: #1a1d24; border-radius: 4px; height: 40px; margin: -40px 0 0 -2px; -webkit-transform-origin: 2px 40px; -moz-transform-origin: 2px 40px; -ms-transform-origin: 2px 40px; -o-transform-origin: 2px 40px; transform-origin: 2px 40px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); width: 4px; z-index: 1;}

.clock-numbers { color: #888; display: block; font-size: 16px; font-weight: bold; height: 120px; margin: -60px 0 0 -60px; left: 50%; position: absolute; top: 50%; width: 120px;}

.clock-numbers li { height: 20px; line-height: 20px; margin: -10px; position: absolute; text-align: center; width: 20px;}

.clock-numbers li:nth-child(1) { left: 50%; top: 0;}

.clock-numbers li:nth-child(2) { right: 0; top: 50%;}

.clock-numbers li:nth-child(3) { bottom: 0; left: 50%;}