← All changes | modules/comments/subscription-modal-on-comment/subscription-modal.css +68 -0 16.2-beta → 16.3 View file →

		@@ -1,0 +1,68 @@
	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;
	16	+}
	17	+
	18	+.jetpack-subscription-modal.open {
	19	+ opacity: 1;
	20	+ background-color: rgba(0, 0, 0, 0.3);
	21	+ visibility: visible;
	22	+}
	23	+
	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;
	36	+}
	37	+
	38	+.jetpack-subscription-modal.open .jetpack-subscription-modal__modal-content {
	39	+ opacity: 1;
	40	+ top: 0;
	41	+ visibility: visible;
	42	+}
	43	+
	44	+/* Hide the modal content when iframe is present */
	45	+.jetpack-subscription-modal.has-iframe .jetpack-subscription-modal__modal-content {
	46	+ background: transparent;
	47	+}
	48	+
	49	+.jetpack-subscription-modal.has-iframe .jetpack-subscription-modal__modal-content-form {
	50	+ visibility: hidden;
	51	+ opacity: 0;
	52	+}
	53	+
	54	+/*
	55	+ * These text-wrap properties still have limited browser
	56	+ * support, but based on feedback still adding them for when
	57	+ * they are supported.
	58	+ */
	59	+.jetpack-subscription-modal__modal-content p {
	60	+ text-wrap: pretty;
	61	+}
	62	+
	63	+@media screen and (max-width: 640px) {
	64	+
	65	+ .jetpack-subscription-modal__modal-content {
	66	+ width: 94%;
	67	+ }
	68	+}