← All changes | includes/assets/libraries/flipclock/flipclock.css +314 -0 51.1.2 → 51.1.87 View file →

		@@ -1,0 +1,314 @@
	1	+/* Reset */
	2	+.king-addons-flip-clock-wrapper * {
	3	+ box-sizing: border-box;
	4	+ backface-visibility: hidden;
	5	+}
	6	+
	7	+.king-addons-flip-clock-wrapper a {
	8	+ cursor: pointer;
	9	+ text-decoration: none;
	10	+ color: #ccc;
	11	+}
	12	+
	13	+.king-addons-flip-clock-wrapper a:hover {
	14	+ color: #fff;
	15	+}
	16	+
	17	+.king-addons-flip-clock-wrapper ul {
	18	+ list-style: none;
	19	+}
	20	+
	21	+.king-addons-flip-clock-wrapper.clearfix:before,
	22	+.king-addons-flip-clock-wrapper.clearfix:after {
	23	+ display: table;
	24	+ content: " ";
	25	+}
	26	+
	27	+.king-addons-flip-clock-wrapper.clearfix:after {
	28	+ clear: both;
	29	+}
	30	+
	31	+.king-addons-flip-clock-wrapper.clearfix {
	32	+ *zoom: 1;
	33	+}
	34	+
	35	+/* Main */
	36	+.king-addons-flip-clock-wrapper {
	37	+ font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
	38	+ user-select: none;
	39	+}
	40	+
	41	+.king-addons-flip-clock-meridium {
	42	+ font-size: 36px !important;
	43	+ background: none !important;
	44	+ box-shadow: 0 0 0 !important;
	45	+}
	46	+
	47	+.king-addons-flip-clock-meridium a {
	48	+ color: #313333;
	49	+}
	50	+
	51	+.king-addons-flip-clock-wrapper {
	52	+ position: relative;
	53	+ width: 100%;
	54	+ margin: 1em;
	55	+ text-align: center;
	56	+}
	57	+
	58	+.king-addons-flip-clock-wrapper:before,
	59	+.king-addons-flip-clock-wrapper:after {
	60	+ display: table;
	61	+ content: " ";
	62	+}
	63	+
	64	+.king-addons-flip-clock-wrapper:after {
	65	+ clear: both;
	66	+}
	67	+
	68	+.king-addons-flip-clock-wrapper ul {
	69	+ font-size: 80px;
	70	+ font-weight: bold;
	71	+ line-height: 87px;
	72	+ position: relative;
	73	+ float: left;
	74	+ width: 60px;
	75	+ height: 90px;
	76	+ margin: 5px;
	77	+ border-radius: 6px;
	78	+}
	79	+
	80	+.king-addons-flip-clock-wrapper ul li {
	81	+ line-height: 87px;
	82	+ position: absolute;
	83	+ z-index: 1;
	84	+ top: 0;
	85	+ left: 0;
	86	+ width: 100%;
	87	+ height: 100%;
	88	+ text-decoration: none !important;
	89	+ margin: 0;
	90	+ list-style-position: unset;
	91	+}
	92	+
	93	+.king-addons-flip-clock-wrapper ul li:first-child {
	94	+ z-index: 2;
	95	+}
	96	+
	97	+.king-addons-flip-clock-wrapper ul li a {
	98	+ display: block;
	99	+ overflow: visible !important;
	100	+ height: 100%;
	101	+ margin: 0 !important;
	102	+ cursor: default !important;
	103	+ perspective: 200px;
	104	+}
	105	+
	106	+.king-addons-flip-clock-wrapper ul li a div {
	107	+ font-size: 80px;
	108	+ position: absolute;
	109	+ z-index: 1;
	110	+ left: 0;
	111	+ overflow: hidden;
	112	+ width: 100%;
	113	+ height: 50%;
	114	+ outline: 1px solid transparent;
	115	+}
	116	+
	117	+.king-addons-flip-clock-wrapper ul li a div .shadow {
	118	+ position: absolute;
	119	+ z-index: 2;
	120	+ width: 100%;
	121	+ height: 100%;
	122	+}
	123	+
	124	+.king-addons-flip-clock-wrapper ul li a div.up {
	125	+ top: 0;
	126	+ transform-origin: 50% 100%;
	127	+}
	128	+
	129	+.king-addons-flip-clock-wrapper ul li a div.up:after {
	130	+ position: absolute;
	131	+ z-index: 5;
	132	+ top: 44px;
	133	+ left: 0;
	134	+ width: 100%;
	135	+ height: 3px;
	136	+ content: "";
	137	+ background-color: rgba(0, 0, 0, 0.4);
	138	+}
	139	+
	140	+.king-addons-flip-clock-wrapper ul li a div.down {
	141	+ bottom: 0;
	142	+ transform-origin: 50% 0;
	143	+ border-bottom-right-radius: 6px;
	144	+ border-bottom-left-radius: 6px;
	145	+}
	146	+
	147	+.king-addons-flip-clock-wrapper ul li a div div.inn {
	148	+ font-size: 70px;
	149	+ position: absolute;
	150	+ z-index: 1;
	151	+ left: 0;
	152	+ width: 100%;
	153	+ height: 200%;
	154	+ text-align: center;
	155	+ color: #ccc;
	156	+ border-radius: 6px;
	157	+ background-color: #333;
	158	+}
	159	+
	160	+.king-addons-flip-clock-wrapper ul li a div.up div.inn {
	161	+ top: 0;
	162	+}
	163	+
	164	+.king-addons-flip-clock-wrapper ul li a div.down div.inn {
	165	+ bottom: 0;
	166	+}
	167	+
	168	+/* PLAY */
	169	+.king-addons-flip-clock-wrapper ul.king-addons-flip-play li.king-addons-flip-clock-before {
	170	+ z-index: 3;
	171	+}
	172	+
	173	+.king-addons-flip-clock-wrapper .king-addons-flip {
	174	+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
	175	+}
	176	+
	177	+.king-addons-flip-clock-wrapper ul.king-addons-flip-play li.king-addons-flip-clock-active {
	178	+ z-index: 5;
	179	+ animation: king-addons-flip-countdown-animation-asd 0.01s 0.49s linear both;
	180	+}
	181	+
	182	+.king-addons-flip-clock-divider {
	183	+ position: relative;
	184	+ display: inline-block;
	185	+ float: left;
	186	+ width: 20px;
	187	+ height: 100px;
	188	+}
	189	+
	190	+.king-addons-flip-clock-divider:first-child {
	191	+ width: 0;
	192	+}
	193	+
	194	+.king-addons-flip-clock-dot {
	195	+ position: absolute;
	196	+ left: 5px;
	197	+ display: block;
	198	+ width: 10px;
	199	+ height: 10px;
	200	+ border-radius: 50%;
	201	+ background: #323434;
	202	+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	203	+}
	204	+
	205	+.king-addons-flip-clock-divider .king-addons-flip-clock-label {
	206	+ position: absolute;
	207	+ top: -1.5em;
	208	+ right: -86px;
	209	+ color: black;
	210	+ text-shadow: none;
	211	+}
	212	+
	213	+.king-addons-flip-clock-divider.minutes .king-addons-flip-clock-label {
	214	+ right: -88px;
	215	+}
	216	+
	217	+.king-addons-flip-clock-divider.seconds .king-addons-flip-clock-label {
	218	+ right: -91px;
	219	+}
	220	+
	221	+.king-addons-flip-clock-dot.top {
	222	+ top: 30px;
	223	+}
	224	+
	225	+.king-addons-flip-clock-dot.bottom {
	226	+ bottom: 30px;
	227	+}
	228	+
	229	+/* Animations */
	230	+@keyframes king-addons-flip-countdown-animation-asd {
	231	+ 0% {
	232	+ z-index: 2;
	233	+ }
	234	+
	235	+ 100% {
	236	+ z-index: 4;
	237	+ }
	238	+}
	239	+
	240	+.king-addons-flip-clock-wrapper ul.king-addons-flip-play li.king-addons-flip-clock-active .down {
	241	+ z-index: 2;
	242	+ animation: king-addons-flip-countdown-animation-turn 0.5s 0.5s linear both;
	243	+}
	244	+
	245	+@keyframes king-addons-flip-countdown-animation-turn {
	246	+ 0% {
	247	+ transform: rotateX(90deg);
	248	+ }
	249	+
	250	+ 100% {
	251	+ transform: rotateX(0deg);
	252	+ }
	253	+}
	254	+
	255	+.king-addons-flip-clock-wrapper ul.king-addons-flip-play li.king-addons-flip-clock-before .up {
	256	+ z-index: 2;
	257	+ animation: king-addons-flip-countdown-animation-turn2 0.5s linear both;
	258	+}
	259	+
	260	+@keyframes king-addons-flip-countdown-animation-turn2 {
	261	+ 0% {
	262	+ transform: rotateX(0deg);
	263	+ }
	264	+
	265	+ 100% {
	266	+ transform: rotateX(-90deg);
	267	+ }
	268	+}
	269	+
	270	+.king-addons-flip-clock-wrapper ul li.king-addons-flip-clock-active {
	271	+ z-index: 3;
	272	+}
	273	+
	274	+/* SHADOW */
	275	+.king-addons-flip-clock-wrapper ul.king-addons-flip-play li.king-addons-flip-clock-before .up .shadow,
	276	+.king-addons-flip-clock-wrapper ul.king-addons-flip-play li.king-addons-flip-clock-active .up .shadow {
	277	+ animation: king-addons-flip-countdown-animation-show 0.5s linear both;
	278	+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%);
	279	+}
	280	+
	281	+.king-addons-flip-clock-wrapper ul.king-addons-flip-play li.king-addons-flip-clock-active .up .shadow {
	282	+ animation: king-addons-flip-countdown-animation-hide 0.5s 0.3s linear both;
	283	+}
	284	+
	285	+/*DOWN*/
	286	+.king-addons-flip-clock-wrapper ul.king-addons-flip-play li.king-addons-flip-clock-before .down .shadow,
	287	+.king-addons-flip-clock-wrapper ul.king-addons-flip-play li.king-addons-flip-clock-active .down .shadow {
	288	+ animation: king-addons-flip-countdown-animation-show 0.5s linear both;
	289	+ background: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%);
	290	+}
	291	+
	292	+.king-addons-flip-clock-wrapper ul.king-addons-flip-play li.king-addons-flip-clock-active .down .shadow {
	293	+ animation: king-addons-flip-countdown-animation-hide 0.5s 0.2s linear both;
	294	+}
	295	+
	296	+@keyframes king-addons-flip-countdown-animation-show {
	297	+ 0% {
	298	+ opacity: 0;
	299	+ }
	300	+
	301	+ 100% {
	302	+ opacity: 1;
	303	+ }
	304	+}
	305	+
	306	+@keyframes king-addons-flip-countdown-animation-hide {
	307	+ 0% {
	308	+ opacity: 1;
	309	+ }
	310	+
	311	+ 100% {
	312	+ opacity: 0;
	313	+ }
	314	+}