/*!Don't remove this! * jQuery MDTimePicker v1.0 plugin * * Author: Dionlee Uy * Email: dionleeuy@gmail.com * * Date: Tuesday, August 28 2017 */ @import url('https://fonts.googleapis.com/css?family=Roboto'); body[mdtimepicker-display='on'] { overflow: hidden; } .mdtimepicker { position: fixed; top: 0; left: 0; right: 0; bottom: 0; font-family: Roboto, sans-serif; font-size: 14px; background-color: rgba(10,10,10,.7); transition: background-color .28s ease; z-index: 100001; } .mdtimepicker.hidden { display: none; } .mdtimepicker.animate { background-color: transparent; } .mdtp__wrapper { position: absolute; display: flex; flex-direction: column; left: 50%; bottom: 24px; min-width: 280px; opacity: 1; user-select: none; border-radius: 2px; transform: translateX(-50%) scale(1); box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); transition: transform .28s ease, opacity .28s ease; overflow: hidden; } .mdtp__wrapper.animate { transform: translateX(-50%) scale(1.05); opacity: 0; } .mdtp__time_holder { display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: 46px; padding: 20px 24px; color: rgba(255,255,255,.5); text-align: center; background-color: #1565c0; } .mdtp__time_holder > span { display: inline-block; line-height: 48px; cursor: default; } .mdtp__time_holder > span:not(.mdtp__timedots):not(.mdtp__ampm) { cursor: pointer; margin: 0 4px; } .mdtp__time_holder .mdtp__time_h.active, .mdtp__time_holder .mdtp__time_m.active { color: #fafafa; } .mdtp__time_holder .mdtp__ampm { font-size: 18px; } .mdtp__clock_holder { position: relative; padding: 20px; background-color: #fff; } .mdtp__clock_holder .mdtp__clock { position: relative; width: 250px; height: 250px; margin-bottom: 20px; border-radius: 50%; background-color: #eee; } .mdtp__clock .mdtp__am, .mdtp__clock .mdtp__pm { display: block; position: absolute; bottom: -8px; width: 36px; height: 36px; line-height: 36px; text-align: center; cursor: pointer; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); background: rgba(0,0,0,.05); transition: background-color .2s ease, color .2s; z-index: 3; } .mdtp__clock .mdtp__am { left: -8px; } .mdtp__clock .mdtp__pm { right: -8px; } .mdtp__clock .mdtp__am:hover, .mdtp__clock .mdtp__pm:hover { background-color: rgba(0,0,0,.1); } .mdtp__clock .mdtp__am.active, .mdtp__clock .mdtp__pm.active { color: #fafafa; background-color: #1565c0; } .mdtp__clock .mdtp__clock_dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 4px; background-color: #1565c0; border-radius: 50%; } .mdtp__clock .mdtp__hour_holder, .mdtp__clock .mdtp__minute_holder { position: absolute; top: 0; width: 100%; height: 100%; opacity: 1; transform: scale(1); transition: transform .35s cubic-bezier(0.4, 0.0, 0.2, 1), opacity .35s ease; overflow: hidden; } .mdtp__clock .mdtp__hour_holder.animate { transform: scale(1.2); opacity: 0; } .mdtp__clock .mdtp__minute_holder.animate { transform: scale(.8); opacity: 0; } .mdtp__clock .mdtp__hour_holder.hidden, .mdtp__clock .mdtp__minute_holder.hidden { display: none; } .mdtp__clock .mdtp__digit { position: absolute; width: 50%; top: 50%; left: 0; margin-top: -16px; transform-origin: right center; z-index: 1; } .mdtp__clock .mdtp__digit span { display: inline-block; width: 32px; height: 32px; line-height: 32px; margin-left: 8px; text-align: center; border-radius: 50%; cursor: pointer; transition: background-color .28s, color .14s; } .mdtp__digit.active span, .mdtp__clock .mdtp__digit span:hover { background-color: #1565c0 !important; color: #fff; z-index: 2; } .mdtp__digit.active:before { content: ''; display: block; position: absolute; top: calc(50% - 1px); right: 0; height: 2px; width: calc(100% - 40px); background-color: #1565c0; } .mdtp__clock .mdtp__minute_holder .mdtp__digit { font-size: 13px; } .mdtp__clock .mdtp__minute_holder .mdtp__digit:not(.marker) { margin-top: -6px; height: 12px; } .mdtp__clock .mdtp__minute_holder .mdtp__digit:not(.marker).active:before { width: calc(100% - 26px); } .mdtp__clock .mdtp__minute_holder .mdtp__digit:not(.marker) span { width: 12px; height: 12px; line-height: 12px; margin-left: 14px; } .mdtp__clock .mdtp__minute_holder .mdtp__digit.marker { margin-top: -12px; } .mdtp__clock .mdtp__minute_holder .mdtp__digit.marker.active:before { width: calc(100% - 34px); } .mdtp__clock .mdtp__minute_holder .mdtp__digit.marker span { width: 24px; height: 24px; line-height: 24px; margin-left: 10px; } .mdtp__digit.rotate-6 { transform: rotate(6deg); } .mdtp__digit.rotate-6 span { transform: rotate(-6deg); } .mdtp__digit.rotate-12 { transform: rotate(12deg); } .mdtp__digit.rotate-12 span { transform: rotate(-12deg); } .mdtp__digit.rotate-18 { transform: rotate(18deg); } .mdtp__digit.rotate-18 span { transform: rotate(-18deg); } .mdtp__digit.rotate-24 { transform: rotate(24deg); } .mdtp__digit.rotate-24 span { transform: rotate(-24deg); } .mdtp__digit.rotate-30 { transform: rotate(30deg); } .mdtp__digit.rotate-30 span { transform: rotate(-30deg); } .mdtp__digit.rotate-36 { transform: rotate(36deg); } .mdtp__digit.rotate-36 span { transform: rotate(-36deg); } .mdtp__digit.rotate-42 { transform: rotate(42deg); } .mdtp__digit.rotate-42 span { transform: rotate(-42deg); } .mdtp__digit.rotate-48 { transform: rotate(48deg); } .mdtp__digit.rotate-48 span { transform: rotate(-48deg); } .mdtp__digit.rotate-54 { transform: rotate(54deg); } .mdtp__digit.rotate-54 span { transform: rotate(-54deg); } .mdtp__digit.rotate-60 { transform: rotate(60deg); } .mdtp__digit.rotate-60 span { transform: rotate(-60deg); } .mdtp__digit.rotate-66 { transform: rotate(66deg); } .mdtp__digit.rotate-66 span { transform: rotate(-66deg); } .mdtp__digit.rotate-72 { transform: rotate(72deg); } .mdtp__digit.rotate-72 span { transform: rotate(-72deg); } .mdtp__digit.rotate-78 { transform: rotate(78deg); } .mdtp__digit.rotate-78 span { transform: rotate(-78deg); } .mdtp__digit.rotate-84 { transform: rotate(84deg); } .mdtp__digit.rotate-84 span { transform: rotate(-84deg); } .mdtp__digit.rotate-90 { transform: rotate(90deg); } .mdtp__digit.rotate-90 span { transform: rotate(-90deg); } .mdtp__digit.rotate-96 { transform: rotate(96deg); } .mdtp__digit.rotate-96 span { transform: rotate(-96deg); } .mdtp__digit.rotate-102 { transform: rotate(102deg); } .mdtp__digit.rotate-102 span { transform: rotate(-102deg); } .mdtp__digit.rotate-108 { transform: rotate(108deg); } .mdtp__digit.rotate-108 span { transform: rotate(-108deg); } .mdtp__digit.rotate-114 { transform: rotate(114deg); } .mdtp__digit.rotate-114 span { transform: rotate(-114deg); } .mdtp__digit.rotate-120 { transform: rotate(120deg); } .mdtp__digit.rotate-120 span { transform: rotate(-120deg); } .mdtp__digit.rotate-126 { transform: rotate(126deg); } .mdtp__digit.rotate-126 span { transform: rotate(-126deg); } .mdtp__digit.rotate-132 { transform: rotate(132deg); } .mdtp__digit.rotate-132 span { transform: rotate(-132deg); } .mdtp__digit.rotate-138 { transform: rotate(138deg); } .mdtp__digit.rotate-138 span { transform: rotate(-138deg); } .mdtp__digit.rotate-144 { transform: rotate(144deg); } .mdtp__digit.rotate-144 span { transform: rotate(-144deg); } .mdtp__digit.rotate-150 { transform: rotate(150deg); } .mdtp__digit.rotate-150 span { transform: rotate(-150deg); } .mdtp__digit.rotate-156 { transform: rotate(156deg); } .mdtp__digit.rotate-156 span { transform: rotate(-156deg); } .mdtp__digit.rotate-162 { transform: rotate(162deg); } .mdtp__digit.rotate-162 span { transform: rotate(-162deg); } .mdtp__digit.rotate-168 { transform: rotate(168deg); } .mdtp__digit.rotate-168 span { transform: rotate(-168deg); } .mdtp__digit.rotate-174 { transform: rotate(174deg); } .mdtp__digit.rotate-174 span { transform: rotate(-174deg); } .mdtp__digit.rotate-180 { transform: rotate(180deg); } .mdtp__digit.rotate-180 span { transform: rotate(-180deg); } .mdtp__digit.rotate-186 { transform: rotate(186deg); } .mdtp__digit.rotate-186 span { transform: rotate(-186deg); } .mdtp__digit.rotate-192 { transform: rotate(192deg); } .mdtp__digit.rotate-192 span { transform: rotate(-192deg); } .mdtp__digit.rotate-198 { transform: rotate(198deg); } .mdtp__digit.rotate-198 span { transform: rotate(-198deg); } .mdtp__digit.rotate-204 { transform: rotate(204deg); } .mdtp__digit.rotate-204 span { transform: rotate(-204deg); } .mdtp__digit.rotate-210 { transform: rotate(210deg); } .mdtp__digit.rotate-210 span { transform: rotate(-210deg); } .mdtp__digit.rotate-216 { transform: rotate(216deg); } .mdtp__digit.rotate-216 span { transform: rotate(-216deg); } .mdtp__digit.rotate-222 { transform: rotate(222deg); } .mdtp__digit.rotate-222 span { transform: rotate(-222deg); } .mdtp__digit.rotate-228 { transform: rotate(228deg); } .mdtp__digit.rotate-228 span { transform: rotate(-228deg); } .mdtp__digit.rotate-234 { transform: rotate(234deg); } .mdtp__digit.rotate-234 span { transform: rotate(-234deg); } .mdtp__digit.rotate-240 { transform: rotate(240deg); } .mdtp__digit.rotate-240 span { transform: rotate(-240deg); } .mdtp__digit.rotate-246 { transform: rotate(246deg); } .mdtp__digit.rotate-246 span { transform: rotate(-246deg); } .mdtp__digit.rotate-252 { transform: rotate(252deg); } .mdtp__digit.rotate-252 span { transform: rotate(-252deg); } .mdtp__digit.rotate-258 { transform: rotate(258deg); } .mdtp__digit.rotate-258 span { transform: rotate(-258deg); } .mdtp__digit.rotate-264 { transform: rotate(264deg); } .mdtp__digit.rotate-264 span { transform: rotate(-264deg); } .mdtp__digit.rotate-270 { transform: rotate(270deg); } .mdtp__digit.rotate-270 span { transform: rotate(-270deg); } .mdtp__digit.rotate-276 { transform: rotate(276deg); } .mdtp__digit.rotate-276 span { transform: rotate(-276deg); } .mdtp__digit.rotate-282 { transform: rotate(282deg); } .mdtp__digit.rotate-282 span { transform: rotate(-282deg); } .mdtp__digit.rotate-288 { transform: rotate(288deg); } .mdtp__digit.rotate-288 span { transform: rotate(-288deg); } .mdtp__digit.rotate-294 { transform: rotate(294deg); } .mdtp__digit.rotate-294 span { transform: rotate(-294deg); } .mdtp__digit.rotate-300 { transform: rotate(300deg); } .mdtp__digit.rotate-300 span { transform: rotate(-300deg); } .mdtp__digit.rotate-306 { transform: rotate(306deg); } .mdtp__digit.rotate-306 span { transform: rotate(-306deg); } .mdtp__digit.rotate-312 { transform: rotate(312deg); } .mdtp__digit.rotate-312 span { transform: rotate(-312deg); } .mdtp__digit.rotate-318 { transform: rotate(318deg); } .mdtp__digit.rotate-318 span { transform: rotate(-318deg); } .mdtp__digit.rotate-324 { transform: rotate(324deg); } .mdtp__digit.rotate-324 span { transform: rotate(-324deg); } .mdtp__digit.rotate-330 { transform: rotate(330deg); } .mdtp__digit.rotate-330 span { transform: rotate(-330deg); } .mdtp__digit.rotate-336 { transform: rotate(336deg); } .mdtp__digit.rotate-336 span { transform: rotate(-336deg); } .mdtp__digit.rotate-342 { transform: rotate(342deg); } .mdtp__digit.rotate-342 span { transform: rotate(-342deg); } .mdtp__digit.rotate-348 { transform: rotate(348deg); } .mdtp__digit.rotate-348 span { transform: rotate(-348deg); } .mdtp__digit.rotate-354 { transform: rotate(354deg); } .mdtp__digit.rotate-354 span { transform: rotate(-354deg); } .mdtp__digit.rotate-360 { transform: rotate(360deg); } .mdtp__digit.rotate-360 span { transform: rotate(-360deg); } .mdtp__buttons { margin: 0 -10px -10px; text-align: right; } .mdtp__button { display: inline-block; padding: 0 16px; min-width: 50px; text-align: center; text-transform: uppercase; line-height: 32px; font-weight: 500; cursor: pointer; color: #1565c0; } .mdtp__button:hover { background-color: #e0e0e0; } /* Color themes */ .mdtp__wrapper[data-theme='blue'] .mdtp__time_holder { background-color: #1565c0; } .mdtp__wrapper[data-theme='blue'] .mdtp__clock .mdtp__am.active, .mdtp__wrapper[data-theme='blue'] .mdtp__clock .mdtp__pm.active { background-color: #1565c0; } .mdtp__wrapper[data-theme='blue'] .mdtp__clock .mdtp__clock_dot { background-color: #1565c0; } .mdtp__wrapper[data-theme='blue'] .mdtp__digit.active span, .mdtp__wrapper[data-theme='blue'] .mdtp__clock .mdtp__digit span:hover { background-color: #1565c0 !important; } .mdtp__wrapper[data-theme='blue'] .mdtp__digit.active:before { background-color: #1565c0; } .mdtp__wrapper[data-theme='blue'] .mdtp__button { color: #1565c0; } .mdtp__wrapper[data-theme='red'] .mdtp__time_holder { background-color: #c62828; } .mdtp__wrapper[data-theme='red'] .mdtp__clock .mdtp__am.active, .mdtp__wrapper[data-theme='red'] .mdtp__clock .mdtp__pm.active { background-color: #c62828; } .mdtp__wrapper[data-theme='red'] .mdtp__clock .mdtp__clock_dot { background-color: #c62828; } .mdtp__wrapper[data-theme='red'] .mdtp__digit.active span, .mdtp__wrapper[data-theme='red'] .mdtp__clock .mdtp__digit span:hover { background-color: #c62828 !important; } .mdtp__wrapper[data-theme='red'] .mdtp__digit.active:before { background-color: #c62828; } .mdtp__wrapper[data-theme='red'] .mdtp__button { color: #c62828; } .mdtp__wrapper[data-theme='purple'] .mdtp__time_holder { background-color: #6a1b9a; } .mdtp__wrapper[data-theme='purple'] .mdtp__clock .mdtp__am.active, .mdtp__wrapper[data-theme='purple'] .mdtp__clock .mdtp__pm.active { background-color: #6a1b9a; } .mdtp__wrapper[data-theme='purple'] .mdtp__clock .mdtp__clock_dot { background-color: #6a1b9a; } .mdtp__wrapper[data-theme='purple'] .mdtp__digit.active span, .mdtp__wrapper[data-theme='purple'] .mdtp__clock .mdtp__digit span:hover { background-color: #6a1b9a !important; } .mdtp__wrapper[data-theme='purple'] .mdtp__digit.active:before { background-color: #6a1b9a; } .mdtp__wrapper[data-theme='purple'] .mdtp__button { color: #6a1b9a; } .mdtp__wrapper[data-theme='indigo'] .mdtp__time_holder { background-color: #283593; } .mdtp__wrapper[data-theme='indigo'] .mdtp__clock .mdtp__am.active, .mdtp__wrapper[data-theme='indigo'] .mdtp__clock .mdtp__pm.active { background-color: #283593; } .mdtp__wrapper[data-theme='indigo'] .mdtp__clock .mdtp__clock_dot { background-color: #283593; } .mdtp__wrapper[data-theme='indigo'] .mdtp__digit.active span, .mdtp__wrapper[data-theme='indigo'] .mdtp__clock .mdtp__digit span:hover { background-color: #283593 !important; } .mdtp__wrapper[data-theme='indigo'] .mdtp__digit.active:before { background-color: #283593; } .mdtp__wrapper[data-theme='indigo'] .mdtp__button { color: #283593; } .mdtp__wrapper[data-theme='teal'] .mdtp__time_holder { background-color: #00695c; } .mdtp__wrapper[data-theme='teal'] .mdtp__clock .mdtp__am.active, .mdtp__wrapper[data-theme='teal'] .mdtp__clock .mdtp__pm.active { background-color: #00695c; } .mdtp__wrapper[data-theme='teal'] .mdtp__clock .mdtp__clock_dot { background-color: #00695c; } .mdtp__wrapper[data-theme='teal'] .mdtp__digit.active span, .mdtp__wrapper[data-theme='teal'] .mdtp__clock .mdtp__digit span:hover { background-color: #00695c !important; } .mdtp__wrapper[data-theme='teal'] .mdtp__digit.active:before { background-color: #00695c; } .mdtp__wrapper[data-theme='teal'] .mdtp__button { color: #00695c; } .mdtp__wrapper[data-theme='green'] .mdtp__time_holder { background-color: #2e7d32; } .mdtp__wrapper[data-theme='green'] .mdtp__clock .mdtp__am.active, .mdtp__wrapper[data-theme='green'] .mdtp__clock .mdtp__pm.active { background-color: #2e7d32; } .mdtp__wrapper[data-theme='green'] .mdtp__clock .mdtp__clock_dot { background-color: #2e7d32; } .mdtp__wrapper[data-theme='green'] .mdtp__digit.active span, .mdtp__wrapper[data-theme='green'] .mdtp__clock .mdtp__digit span:hover { background-color: #2e7d32 !important; } .mdtp__wrapper[data-theme='green'] .mdtp__digit.active:before { background-color: #2e7d32; } .mdtp__wrapper[data-theme='green'] .mdtp__button { color: #2e7d32; } @media (max-height: 360px) { .mdtp__wrapper { flex-direction: row; bottom: 8px; } .mdtp__time_holder { width: 160px; padding: 20px; } .mdtp__clock_holder { padding: 16px; } .mdtp__clock .mdtp__am, .mdtp__clock .mdtp__pm { bottom: -4px; } .mdtp__clock .mdtp__am { left: -4px; } .mdtp__clock .mdtp__pm { right: -4px; } } @media (max-height: 320px) { .mdtp__wrapper { bottom: 0; } }