PluginProbe
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant / 2.3.2
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant v2.3.2
2.3.2 2.3.1 2.3.0 2.2.8 2.2.7 trunk 1.10.0 1.10.1 1.10.2 1.10.3 1.10.4 1.10.5 1.11.0 1.11.1 1.11.2 1.6 1.7 1.8 1.8.1 1.8.2 1.8.3 1.9.0 1.9.1 1.9.10 1.9.11 All 60 releases
merchant / assets / css / modules / recent-sales-notifications / admin / preview.css

preview.css in Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant 2.3.2, at assets/css/modules/recent-sales-notifications/admin/preview.css

141 lines 4.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 :root {
2 --merchant-rsn-bg-color: #fff;
3 --merchant-rsn-bg-image: unset;
4 --merchant-rsn-box-width: 420px;
5 --merchant-rsn-border-color: rgba(255, 255, 255, 0);
6 --merchant-rsn-close-btn-bg: #f3f3f3;
7 --merchant-rsn-box-radius: 0px;
8 --merchant-rsn-box-product-image-radius: 5px;
9 }
10
11 .merchant-module-page-setting-field-fields_group {
12 margin-bottom: 0;
13 }
14 .merchant-module-page-setting-field-fields_group > .merchant-module-page-setting-field-title {
15 display: none;
16 }
17
18 .merchant-module-page-preview-browser-inner {
19 min-height: 300px;
20 position: relative;
21 }
22
23 .merchant-module-page-setting-field-image_picker .merchant-image-picker label {
24 max-width: 31%;
25 }
26 .merchant-module-page-setting-field-image_picker .merchant-image-picker img {
27 max-width: 100%;
28 }
29
30 .merchant-recent-sales-notifications-widget {
31 padding: 15px;
32 padding-right: 35px;
33 position: absolute;
34 -webkit-transition: 300ms;
35 transition: 300ms;
36 background-color: var(--merchant-rsn-bg-color);
37 background-image: var(--merchant-rsn-bg-image);
38 background-size: cover;
39 background-position: center;
40 background-repeat: no-repeat;
41 width: var(--merchant-rsn-box-width);
42 max-width: 100%;
43 border: 1px solid var(--merchant-rsn-border-color);
44 border-radius: var(--merchant-rsn-box-radius);
45 z-index: 99999;
46 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
47 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
48 backdrop-filter: blur(8px);
49 top: 50%;
50 left: 50%;
51 -webkit-transform: translate(-50%, -50%);
52 transform: translate(-50%, -50%);
53 }
54 .merchant-recent-sales-notifications-widget .merchant-close-notification {
55 position: absolute;
56 top: 8px;
57 right: 10px;
58 cursor: pointer;
59 background: var(--merchant-rsn-close-btn-bg) !important;
60 border: none !important;
61 outline: none;
62 border-radius: 50% !important;
63 width: 19px;
64 height: 19px !important;
65 padding: 1px !important;
66 -webkit-transition: 300ms;
67 transition: 300ms;
68 }
69 .merchant-recent-sales-notifications-widget .merchant-close-notification svg {
70 line-height: 0;
71 display: block;
72 margin: 0 auto;
73 }
74 .merchant-recent-sales-notifications-widget .merchant-notification-content {
75 display: -webkit-box;
76 display: -ms-flexbox;
77 display: flex;
78 -webkit-box-pack: start;
79 -ms-flex-pack: start;
80 justify-content: flex-start;
81 -webkit-box-align: center;
82 -ms-flex-align: center;
83 align-items: center;
84 gap: 10px;
85 }
86 .merchant-recent-sales-notifications-widget .merchant-notification-content .merchant-notification-image {
87 -webkit-box-flex: 0;
88 -ms-flex: 0 0 77px;
89 flex: 0 0 77px;
90 }
91 .merchant-recent-sales-notifications-widget .merchant-notification-content .merchant-notification-image .image-placeholder {
92 width: 77px;
93 height: 77px;
94 background-color: #dadada;
95 border-radius: var(--merchant-rsn-box-product-image-radius);
96 -webkit-transition: 300ms;
97 transition: 300ms;
98 }
99 .merchant-recent-sales-notifications-widget .merchant-notification-content .merchant-notification-text {
100 -webkit-box-flex: 1;
101 -ms-flex: 1;
102 flex: 1;
103 }
104 .merchant-recent-sales-notifications-widget .merchant-notification-content .merchant-notification-text p {
105 margin: 0;
106 }
107 .merchant-recent-sales-notifications-widget .merchant-notification-content .merchant-notification-text .merchant-notification-message {
108 font-size: 14px;
109 -webkit-transition: 300ms;
110 transition: 300ms;
111 }
112 .merchant-recent-sales-notifications-widget .merchant-notification-content .merchant-notification-text .merchant-notification-title {
113 font-size: 16px;
114 font-weight: bold;
115 -webkit-transition: 300ms;
116 transition: 300ms;
117 }
118 .merchant-recent-sales-notifications-widget .merchant-notification-content .merchant-notification-text .merchant-notification-time {
119 font-size: 12px;
120 color: #919191;
121 -webkit-transition: 300ms;
122 transition: 300ms;
123 }
124 .merchant-recent-sales-notifications-widget.widget-layout-1 .merchant-notification-content .merchant-notification-image .image-placeholder {
125 -webkit-transform: translateY(-35px);
126 transform: translateY(-35px);
127 }
128 .merchant-recent-sales-notifications-widget.widget-layout-4 .merchant-close-notification {
129 top: 50%;
130 -webkit-transform: translateY(-50%);
131 transform: translateY(-50%);
132 }
133 .merchant-recent-sales-notifications-widget.light-text-color-scheme .merchant-notification-content .merchant-notification-text .merchant-notification-message {
134 color: #fff;
135 }
136 .merchant-recent-sales-notifications-widget.light-text-color-scheme .merchant-notification-content .merchant-notification-text .merchant-notification-title {
137 color: #fff;
138 }
139 .merchant-recent-sales-notifications-widget.light-text-color-scheme .merchant-notification-content .merchant-notification-text .merchant-notification-time {
140 color: #dfdfdf;
141 }