← All changes | modules/comments/subscription-modal-on-comment/subscription-modal.css +39 -124 13.0.2 → 16.3-beta View file →

		@@ -1,95 +1,57 @@
1	1	.jetpack-subscription-modal {
2		- visibility: hidden;
3		- position: fixed;
4		- z-index: 50000;
5		- left: 0;
6		- top: 0;
7		- width: 100%;
8		- height: 100%;
9		- overflow: auto;
10		- opacity: 0;
11		- transition: visibility 0s, opacity 0.5s ease;
12		- display: flex;
13		- justify-content: space-evenly;
14		- align-content: center;
15		- flex-wrap: wrap;
	2	+ visibility: hidden;
	3	+ position: fixed;
	4	+ z-index: 50000;
	5	+ left: 0;
	6	+ top: 0;
	7	+ width: 100%;
	8	+ height: 100%;
	9	+ overflow: auto;
	10	+ opacity: 0;
	11	+ transition: visibility 0s, opacity 0.5s ease;
	12	+ display: flex;
	13	+ justify-content: space-evenly;
	14	+ align-content: center;
	15	+ flex-wrap: wrap;
16	16	}
17	17
18	18	.jetpack-subscription-modal.open {
19		- opacity: 1;
20		- background-color: rgba(0,0,0,0.3);
21		- visibility: visible;
	19	+ opacity: 1;
	20	+ background-color: rgba(0, 0, 0, 0.3);
	21	+ visibility: visible;
22	22	}
23	23
24	24	.jetpack-subscription-modal__modal-content {
25		- text-align: center;
26		- background-color: #fefefe;
27		- width: 100%;
28		- max-width: 650px;
29		- box-sizing: border-box;
30		- transition: visibility 0s, opacity 0.3s linear;
31		- opacity: 0;
32		- display: flex;
33		- flex-direction: column;
34		- gap: 5px;
35		- justify-content: center;
	25	+ text-align: center;
	26	+ background-color: #fefefe;
	27	+ width: 100%;
	28	+ max-width: 650px;
	29	+ box-sizing: border-box;
	30	+ transition: visibility 0s, opacity 0.3s linear;
	31	+ opacity: 0;
	32	+ display: flex;
	33	+ flex-direction: column;
	34	+ gap: 5px;
	35	+ justify-content: center;
36	36	}
37	37
38	38	.jetpack-subscription-modal.open .jetpack-subscription-modal__modal-content {
39		- opacity: 1;
40		- top: 0;
41		- visibility: visible;
	39	+ opacity: 1;
	40	+ top: 0;
	41	+ visibility: visible;
42	42	}
43	43
44	44	/* Hide the modal content when iframe is present */
45	45	.jetpack-subscription-modal.has-iframe .jetpack-subscription-modal__modal-content {
46		- background: transparent;
	46	+ background: transparent;
47	47	}
48	48
49	49	.jetpack-subscription-modal.has-iframe .jetpack-subscription-modal__modal-content-form {
50		- visibility: hidden;
51		- opacity: 0;
	50	+ visibility: hidden;
	51	+ opacity: 0;
52	52	}
53	53
54		-.jetpack-subscription-modal__modal-content .jetpack-subscription-modal__iframe-container {
55		- visibility: hidden;
56		- opacity: 0;
57		- background-image: url( 'https://s0.wp.com/i/loading/dark-200.gif' );
58		- background-size: 50px;
59		- background-repeat: no-repeat;
60		- background-position: center 150px;
61		- margin: 0 !important;
62		- box-shadow: none;
63		- -webkit-box-shadow: none;
64		- -moz-box-shadow: none;
65		- border: none;
66		- bottom: 0;
67		- left: 0;
68		- right: 0;
69		- top: 0;
70		- width: 100% !important;
71		- height: 100%;
72		- position: absolute;
73		-}
74		-
75		-.jetpack-subscription-modal.has-iframe .jetpack-subscription-modal__iframe-container {
76		- opacity: 1;
77		- visibility: visible;
78		-
79		-}
80		-
81		-.jetpack-subscription-modal__iframe {
82		- margin: 0 !important;
83		- height: 100% !important;
84		- width: 100% !important;
85		- position: absolute;
86		- top: 0;
87		- left: 0;
88		- right: 0;
89		- bottom: 0;
90		-}
91		-
92	54	/*
93	55	* These text-wrap properties still have limited browser
94	56	* support, but based on feedback still adding them for when
95	57	* they are supported.
		@@ -94,60 +56,13 @@
94	56	* support, but based on feedback still adding them for when
95	57	* they are supported.
96	58	*/
97	59	.jetpack-subscription-modal__modal-content p {
98		- text-wrap: pretty;
99		- text-wrap: pretty;
	60	+ text-wrap: pretty;
100	61	}
101	62
102		-.jetpack-subscription-modal__form {
103		- margin-top: 20px;
104		- align-items: flex-start;
105		- display: flex;
106		-}
	63	+@media screen and (max-width: 640px) {
107	64
108		-.jetpack-subscription-modal__form-email {
109		- flex: 1;
110		- font-size: 16px;
111		- line-height: 28px;
112		- padding: 15px 23px 15px 23px !important;
113		- border-radius: 50px !important;
114		- border-width: 1px !important;
115		- border-color: #113AF5 !important;
116		- border-end-end-radius: 0 !important;
117		- border-start-end-radius: 0 !important;
118		- border-style: solid !important;
119		- outline: none;
120		-}
121		-.jetpack-subscription-modal__form-email:focus {
122		- outline: none !important;
123		-}
124		-.jetpack-subscription-modal__form-submit {
125		- font-size: 16px;
126		- line-height: 28px;
127		- padding: 15px 23px 15px 23px;
128		- margin: 0px;
129		- margin-left: 10px;
130		- border-radius: 50px;
131		- border-width: 1px;
132		- border-end-start-radius: 0;
133		- border-start-start-radius: 0;
134		- margin-inline-start: 0;
135		- background-color: #113AF5;
136		- border-color: #113AF5;
137		- border-style: solid;
138		- color: #FFFFFF;
139		-}
140		-.jetpack-subscription-modal__form-submit:hover {
141		- opacity: .9;
142		- cursor: pointer;
143		-}
144		-.jetpack-subscription-modal__form-submit:disabled {
145		- opacity: .7 !important;
146		- cursor: not-allowed;
147		-}
148		-
149		-@media screen and (max-width: 640px) {
150		- .jetpack-subscription-modal__modal-content {
151		- width: 94%;
152		- }
	65	+ .jetpack-subscription-modal__modal-content {
	66	+ width: 94%;
	67	+ }
153	68	}