preview.css in Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant 2.3.1, at assets/css/modules/inactive-tab-message/admin/preview.css

134 lines 2.8 KB Raw Download Zip

1	@charset "UTF-8";
2	/**
3	* Admin Preview
4	* Inactive Tab Message — Enhanced dual-tab preview.
5	*/
6	.merchant-module-page-preview-browser-inner {
7	display: -webkit-box;
8	display: -ms-flexbox;
9	display: flex;
10	-webkit-box-align: center;
11	-ms-flex-align: center;
12	align-items: center;
13	-webkit-box-pack: center;
14	-ms-flex-pack: center;
15	justify-content: center;
16	-webkit-box-flex: 0;
17	-ms-flex-positive: 0;
18	flex-grow: 0;
19	width: 100%;
20	max-width: 600px;
21	margin: auto;
22	padding: 35px 25px;
23	}
24
25	.mrc-preview-inactive-tab-message {
26	width: 100%;
27	}
28
29	.mrc-inactive-tab-preview-tabs {
30	display: -webkit-box;
31	display: -ms-flexbox;
32	display: flex;
33	gap: 2px;
34	border-bottom: 2px solid #e0e0e0;
35	}
36
37	.mrc-inactive-tab-preview-tab {
38	display: -webkit-box;
39	display: -ms-flexbox;
40	display: flex;
41	-webkit-box-align: center;
42	-ms-flex-align: center;
43	align-items: center;
44	gap: 8px;
45	padding: 10px 16px;
46	border-radius: 8px 8px 0 0;
47	font-size: 12px;
48	line-height: 1.3;
49	min-width: 0;
50	max-width: 220px;
51	overflow: hidden;
52	white-space: nowrap;
53	text-overflow: ellipsis;
54	position: relative;
55	cursor: default;
56	}
57	.mrc-inactive-tab-preview-tab--active {
58	background: #fff;
59	border: 1px solid #e0e0e0;
60	border-bottom-color: #fff;
61	margin-bottom: -2px;
62	z-index: 1;
63	color: #333;
64	}
65	.mrc-inactive-tab-preview-tab--inactive {
66	background: #f0f0f0;
67	border: 1px solid transparent;
68	color: #888;
69	width: 171px;
70	-ms-flex-negative: 0;
71	flex-shrink: 0;
72	}
73	.mrc-inactive-tab-preview-tab--inactive .mrc-inactive-tab-preview-tab__title {
74	color: #555;
75	font-weight: 600;
76	}
77	.mrc-inactive-tab-preview-tab__favicon {
78	-ms-flex-negative: 0;
79	flex-shrink: 0;
80	width: 16px;
81	height: 16px;
82	display: -webkit-box;
83	display: -ms-flexbox;
84	display: flex;
85	-webkit-box-align: center;
86	-ms-flex-align: center;
87	align-items: center;
88	-webkit-box-pack: center;
89	-ms-flex-pack: center;
90	justify-content: center;
91	}
92	.mrc-inactive-tab-preview-tab__favicon img {
93	width: 16px;
94	height: 16px;
95	border-radius: 2px;
96	}
97	.mrc-inactive-tab-preview-tab__title {
98	overflow: hidden;
99	text-overflow: ellipsis;
100	white-space: nowrap;
101	-webkit-box-flex: 1;
102	-ms-flex: 1;
103	flex: 1;
104	min-width: 0;
105	}
106	.mrc-inactive-tab-preview-tab__close {
107	-ms-flex-negative: 0;
108	flex-shrink: 0;
109	font-size: 14px;
110	color: #aaa;
111	margin-left: auto;
112	}
113	.mrc-inactive-tab-preview-tab__close:hover {
114	color: #666;
115	}
116
117	.mrc-inactive-tab-favicon-emoji {
118	font-size: 14px;
119	line-height: 1;
120	}
121
122	.mrc-inactive-tab-preview-label {
123	display: -webkit-box;
124	display: -ms-flexbox;
125	display: flex;
126	-webkit-box-pack: justify;
127	-ms-flex-pack: justify;
128	justify-content: space-between;
129	margin-top: 10px;
130	font-size: 10px;
131	color: #999;
132	text-transform: uppercase;
133	letter-spacing: 0.5px;
134	}