← All changes | includes/widgets/Video_Popup/style.css +150 -0 51.1.2 → 51.1.86 View file →

		@@ -1,0 +1,150 @@
	1	+body,
	2	+main {
	3	+ /* hidden first as a fallback; clip does the same job without turning body
	4	+ into a scroll container, which would break position: sticky above it. */
	5	+ overflow-x: hidden;
	6	+ overflow-x: clip;
	7	+}
	8	+
	9	+/*noinspection CssOverwrittenProperties*/
	10	+.king-addons-video-popup {
	11	+ position: fixed;
	12	+ overflow: auto;
	13	+ transition: all 500ms ease;
	14	+ width: 100%;
	15	+ max-width: 100%;
	16	+ max-height: 100vh;
	17	+ /* Safari fix */
	18	+ max-height: 100svh;
	19	+ max-width: 965px;
	20	+}
	21	+
	22	+/* Hide scrollbar */
	23	+.king-addons-video-popup::-webkit-scrollbar {
	24	+ display: none;
	25	+}
	26	+
	27	+.king-addons-video-popup-overlay {
	28	+ position: fixed;
	29	+ top: 0;
	30	+ left: 0;
	31	+ display: none;
	32	+ width: 100%;
	33	+ height: 100%;
	34	+ transition: opacity 500ms ease;
	35	+ opacity: 0;
	36	+}
	37	+
	38	+.king-addons-video-popup-animation-fade {
	39	+ opacity: 0;
	40	+}
	41	+
	42	+.king-addons-video-popup-animation-fade.king-addons-video-popup-active {
	43	+ opacity: 1;
	44	+}
	45	+
	46	+.king-addons-video-popup-position-top {
	47	+ top: -100%;
	48	+ left: 50%;
	49	+ transform: translateX(-50%);
	50	+ transition: top 500ms ease, transform 500ms ease;
	51	+}
	52	+
	53	+.king-addons-video-popup-position-right {
	54	+ top: 50%;
	55	+ right: -100%;
	56	+ transform: translateY(-50%);
	57	+ transition: right 500ms ease, transform 500ms ease;
	58	+}
	59	+
	60	+.king-addons-video-popup-position-bottom {
	61	+ bottom: -100%;
	62	+ left: 50%;
	63	+ transform: translateX(-50%);
	64	+ transition: bottom 500ms ease, transform 500ms ease;
	65	+}
	66	+
	67	+.king-addons-video-popup-position-left {
	68	+ top: 50%;
	69	+ left: -100%;
	70	+ transform: translateY(-50%);
	71	+ transition: left 500ms ease, transform 500ms ease;
	72	+}
	73	+
	74	+.king-addons-video-popup-position-top.king-addons-video-popup-animation-slide.king-addons-video-popup-active {
	75	+ top: 50%;
	76	+ transform: translate(-50%, -50%);
	77	+}
	78	+
	79	+.king-addons-video-popup-position-right.king-addons-video-popup-animation-slide.king-addons-video-popup-active {
	80	+ right: 50%;
	81	+ transform: translate(50%, -50%);
	82	+}
	83	+
	84	+.king-addons-video-popup-position-bottom.king-addons-video-popup-animation-slide.king-addons-video-popup-active {
	85	+ bottom: 50%;
	86	+ transform: translate(-50%, 50%);
	87	+}
	88	+
	89	+.king-addons-video-popup-position-left.king-addons-video-popup-animation-slide.king-addons-video-popup-active {
	90	+ left: 50%;
	91	+ transform: translate(-50%, -50%);
	92	+}
	93	+
	94	+/* Video */
	95	+.king-addons-video-popup-container {
	96	+ position: relative;
	97	+ width: 100%;
	98	+ padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
	99	+ height: 0;
	100	+ overflow: hidden;
	101	+}
	102	+
	103	+.king-addons-video-popup-container iframe,
	104	+.king-addons-video-popup-container video {
	105	+ position: absolute;
	106	+ top: 0;
	107	+ left: 0;
	108	+ width: 100%;
	109	+ height: 100%;
	110	+ border: 0;
	111	+ object-fit: contain;
	112	+}
	113	+
	114	+/* Button */
	115	+.king-addons-video-popup-button {
	116	+ display: inline-flex;
	117	+ position: relative;
	118	+ transition: all .3s;
	119	+}
	120	+
	121	+.king-addons-video-popup-button-effect-ripple:before {
	122	+ content: '';
	123	+ display: inline-block;
	124	+ position: absolute;
	125	+ top: -2px;
	126	+ left: -2px;
	127	+ bottom: -2px;
	128	+ right: -2px;
	129	+ border-radius: inherit;
	130	+ border: 1px solid #000000;
	131	+ animation: king-addons-video-popup-ripple 2s cubic-bezier(0.23, 1, 0.32, 1) both infinite;
	132	+}
	133	+
	134	+@keyframes king-addons-video-popup-ripple {
	135	+ 0% {
	136	+ border-width: 4px;
	137	+ transform: scale(1);
	138	+ }
	139	+ 80% {
	140	+ border-width: 1px;
	141	+ transform: scale(1.35);
	142	+ }
	143	+ 100% {
	144	+ opacity: 0;
	145	+ }
	146	+}
	147	+
	148	+.king-addons-video-popup-button-wrap {
	149	+ display: inline-flex;
	150	+}