← All changes | modules/subscriptions/subscribe-overlay/subscribe-overlay.css +86 -0 16.2-beta → 16.3 View file →

		@@ -1,0 +1,86 @@
	1	+body.jetpack-subscribe-overlay-open {
	2	+ overflow: hidden;
	3	+}
	4	+
	5	+.jetpack-subscribe-overlay {
	6	+ --jetpack-subscribe-overlay--background-color: var(--wp--preset--color--background, var(--wp--preset--color--base, var(--wp--preset--color--contrast, #f9f9f9)));
	7	+
	8	+ visibility: hidden;
	9	+ position: fixed;
	10	+ z-index: 50001; /* WP.com Action bar and floating subscribe button are 5000 */
	11	+ left: 0;
	12	+ top: 0;
	13	+ width: 100%;
	14	+ height: 100%;
	15	+ overflow: hidden;
	16	+ background-color: transparent;
	17	+ transition: background-color 0.4s, visibility 0.4s;
	18	+}
	19	+
	20	+.jetpack-subscribe-overlay__content {
	21	+ position: relative;
	22	+ visibility: hidden;
	23	+ overflow: hidden;
	24	+ top: 100%;
	25	+ margin: 15% auto;
	26	+ width: 100%;
	27	+ max-width: 400px;
	28	+ transition: top 0.4s, visibility 0.4s;
	29	+ text-wrap: pretty;
	30	+}
	31	+
	32	+.jetpack-subscribe-overlay__close {
	33	+ display: none;
	34	+ cursor: pointer;
	35	+ position: absolute;
	36	+ top: 32px;
	37	+ right: 32px;
	38	+ width: 24px;
	39	+ height: 24px;
	40	+}
	41	+
	42	+body.admin-bar .jetpack-subscribe-overlay__close {
	43	+ top: 64px;
	44	+}
	45	+
	46	+body.has-marketing-bar .jetpack-subscribe-overlay__close {
	47	+ top: 81px;
	48	+}
	49	+
	50	+body.admin-bar.has-marketing-bar .jetpack-subscribe-overlay__close {
	51	+ top: 114px;
	52	+}
	53	+
	54	+.jetpack-subscribe-overlay__to-content {
	55	+ display: none;
	56	+ position: fixed;
	57	+ bottom: 64px;
	58	+ left: 0;
	59	+ right: 0;
	60	+ margin: 0 auto;
	61	+}
	62	+
	63	+.jetpack-subscribe-overlay.open {
	64	+ background-color: var(--jetpack-subscribe-overlay--background-color);
	65	+ visibility: visible;
	66	+
	67	+ .jetpack-subscribe-overlay__content {
	68	+ top: 0;
	69	+ visibility: visible;
	70	+ }
	71	+
	72	+ .jetpack-subscribe-overlay__close {
	73	+ display: block;
	74	+ }
	75	+
	76	+ .jetpack-subscribe-overlay__to-content {
	77	+ display: block;
	78	+ }
	79	+}
	80	+
	81	+@media screen and (max-width: 640px) {
	82	+
	83	+ .jetpack-subscribe-overlay__content {
	84	+ width: 94%;
	85	+ }
	86	+}