PluginProbe
WP Coder – Insert & Manage Code Snippets / 3.4
WP Coder – Insert & Manage Code Snippets v3.4
4.5.1 1.1 2.3.1 2.3.2 2.4.1 2.5.1 2.5.2 2.5.3 2.5.4 2.5.5 2.5.6 3.0 3.0.1 3.0.2 3.0.3 3.0.4 3.0.5 3.1 3.1.1 3.2 3.2.1 3.3 3.4 3.5 3.5.1 All 39 releases
← All changes | assets/css/admin.css +824 -941 4.5.13.4 View file →
@@ -1,708 +1,700 @@
1 1 @charset "UTF-8";
2 2 :root {
3 - --wowp-border: #E4E4E7;
4 - --wowp-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
5 - --wowp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
6 - --wowp-gray-500: #6a7282;
7 - --wowp-gray-400: #99a1af;
8 - --wowp-gray-100: #f3f4f6;
9 - --wowp-gray-200: #e5e7eb;
10 - --wowp-gray-900: #101828;
11 - --wowp-gray-700: #364153;
12 - --wowp-color-blue: #2b7fff;
13 - --wowp-color-yellow: #f0b100;
14 - --wowp-color-red: #fb2c36;
15 - --wowp-color-green: #00c950;
3 + --wowp-blue: #005BBF;
4 + --wowp-yellow: #FFD500;
5 + --wowp-border: #cccccc;
6 + --wowp-dark: #14102C;
7 + --wowp-orange: #E86E2C;
8 + --wowp-bg: #EEF3EB;
9 + --wowp-success: #00BF04;
10 + --wowp-danger: #BF0400;
16 11 }
17 12
18 -.wowp {
19 - width: calc(100% - 20px);
13 +.wowp-box {
14 + padding: 1.5rem 1.25rem;
15 + margin-top: 50px;
16 + position: relative;
17 + box-sizing: border-box;
18 + background: #ffffff;
19 + background-clip: padding-box;
20 + border: solid 2px transparent;
21 + border-radius: 4px;
20 22 }
21 -.wowp .wowp-header {
22 - display: grid;
23 - grid-template-areas: "logo title" "logo links";
24 - grid-template-columns: auto 1fr;
25 - align-items: center;
26 - column-gap: 1rem;
27 - margin-block: 1rem;
28 - row-gap: 0.5rem;
23 +.wowp-box::before {
24 + content: "";
25 + position: absolute;
26 + top: 0;
27 + right: 0;
28 + bottom: 0;
29 + left: 0;
30 + z-index: -1;
31 + margin: -2px;
32 + border-radius: inherit;
33 + background: linear-gradient(to bottom, var(--wowp-blue), var(--wowp-yellow));
29 34 }
30 -.wowp .wowp-header__logo {
31 - grid-area: logo;
35 +
36 +.wowp-header-border {
37 + height: 5px;
38 + background: linear-gradient(to right, var(--wowp-blue), var(--wowp-yellow));
39 + margin-left: -20px;
32 40 }
33 -.wowp .wowp-header__title {
34 - all: unset;
35 - grid-area: title;
36 - font-size: 1.75rem;
37 - font-weight: 700;
38 - line-height: 1.3;
39 - color: var(--wowp-gray-900);
40 -}
41 -.wowp .wowp-header__title-version {
42 - font-size: 0.75rem;
43 - font-weight: normal;
44 - color: var(--wowp-color-blue);
45 - margin-left: 0.5rem;
46 -}
47 -.wowp .wowp-header__links {
48 - grid-area: links;
41 +
42 +.wowp-header {
43 + position: relative;
44 + padding: 32px 36px;
45 + margin-left: -20px;
49 46 display: flex;
47 + align-items: center;
48 + gap: 1rem;
50 49 flex-wrap: wrap;
51 - gap: 0.5rem;
52 50 }
53 -.wowp .wowp-page-header {
51 +
52 +.wowp-header-title {
54 53 display: flex;
55 54 align-items: center;
56 55 background: #ffffff;
57 - margin-inline: -20px;
58 - padding-inline: 20px;
59 - padding-block: 0.75rem;
60 - border-top: 1px solid var(--wowp-border);
61 - border-bottom: 1px solid var(--wowp-border);
62 - gap: 1rem;
56 + padding: 22px 36px;
57 + margin-left: -20px;
58 + border-top: 1px solid #dcdcdc;
59 + border-bottom: 1px solid #dcdcdc;
63 60 }
64 -.wowp .wowp-page-header__title {
65 - font-size: 1.25rem;
66 - line-height: 1.75rem;
67 - font-weight: 700;
61 +.wowp-header-title h2 {
62 + font-size: 22px;
63 + font-weight: 600;
68 64 margin: 0;
69 65 }
70 -.wowp .wowp-settings {
71 - background-color: white;
72 - margin-inline-end: 20px;
73 - margin-block: 1.5rem;
74 - border: 1px solid var(--wowp-gray-100);
75 - border-radius: 0.5rem;
76 - box-shadow: var(--wowp-shadow);
77 - padding: 1rem;
66 +.wowp-header-title .button {
67 + margin-left: 20px;
78 68 }
79 -@media (width >= 48rem) {
80 - .wowp .wowp-settins__tabs > .popover-container {
81 - margin-inline-start: auto;
82 - }
69 +.wowp-header-title .wowp-notice-license {
70 + margin-left: 20px;
83 71 }
84 -.wowp .wowp-page-box {
85 - max-width: 1400px;
86 - margin-inline: auto;
87 -}
88 -.wowp .wowp-settings__header {
89 - margin-block: 1.5rem;
90 - margin-inline-end: 20px;
91 - padding: 1rem;
92 - background-color: #ffffff;
93 - border: 1px solid var(--wowp-gray-100);
94 - border-radius: 0.5rem;
95 - box-shadow: var(--wowp-shadow);
96 -}
97 -.wowp .wowp-settings__title {
72 +
73 +.wowp-logo {
98 74 display: flex;
99 75 align-items: center;
100 - flex-wrap: wrap;
101 - position: relative;
102 76 }
103 -.wowp .wowp-settings__title #title {
104 - flex: 1;
105 - padding-inline-end: 80px;
77 +
78 +.wowp-logo img {
79 + width: 40px;
106 80 }
107 -.wowp .wowp-settings__title input {
108 - height: 40px;
109 - font-size: 16px;
110 - line-height: 1;
81 +
82 +.wowp-header h1 {
83 + position: relative;
84 + margin: 0 35px 0 0;
111 85 }
112 -.wowp .wowp-settings__title #plugin-activate,
113 -.wowp .wowp-settings__title #submit_settings {
86 +
87 +.wowp-version {
114 88 position: absolute;
115 - min-height: 32px;
116 - height: 32px;
117 - right: 8px;
118 - margin: 0;
89 + transform: translateY(-50%) translateX(50%);
90 + font-size: 12px;
91 + font-weight: normal;
119 92 }
120 -.wowp .wowp-settings__publish {
121 - margin-inline: -1rem;
122 - padding-inline: 1rem;
123 - margin-block: 1rem;
124 - padding-block: 1rem;
125 - border-block: 1px solid var(--wowp-gray-100);
93 +
94 +.wowp-links {
95 + position: absolute;
96 + bottom: 0;
97 + left: 36px;
126 98 display: flex;
127 - flex-direction: column;
128 - flex-wrap: wrap;
129 - gap: 0.5rem;
130 99 }
131 -.wowp .wowp-settings__publish .wowp-settings__publish-hide,
132 -.wowp .wowp-settings__publish .wowp-settings__publish-info,
133 -.wowp .wowp-settings__publish .wowp-settings__publish-status {
134 - display: flex;
135 - gap: 0.5rem;
100 +@media screen and (max-width: 850px) {
101 + .wowp-links {
102 + display: none;
103 + }
136 104 }
137 -.wowp .wowp-settings__publish .wowp-settings__publish-hide {
138 - order: 3;
139 - width: 100%;
105 +.wowp-links img {
106 + width: 15px;
107 + height: 15px;
140 108 }
141 -.wowp .wowp-settings__publish .wowp-settings__publish-info {
109 +
110 +.wowp-links a {
111 + text-decoration: none;
112 + display: flex;
142 113 flex-direction: column;
114 + font-size: 12px;
115 + align-items: center;
116 + padding: 5px;
117 + transition: all 0.15s linear;
143 118 }
144 -@media (width >= 48rem) {
145 - .wowp .wowp-settings__publish .wowp-settings__publish-info {
146 - flex-direction: row;
147 - }
119 +
120 +.wowp-links a:hover {
121 + color: #14102C;
148 122 }
149 -@media (width >= 80rem) {
150 - .wowp .wowp-settings__publish {
151 - flex-direction: row;
152 - justify-content: space-between;
153 - }
154 - .wowp .wowp-settings__publish .wowp-settings__publish-status {
155 - order: 2;
156 - }
123 +
124 +.wowp-links .codericon,
125 +.wowp-links .dashicons {
126 + width: 15px;
127 + height: 15px;
128 + font-size: 15px;
129 + color: #596FF9;
130 + display: none;
157 131 }
158 -.wowp .wowp-settins__tabs {
159 - display: flex;
160 - flex-wrap: wrap;
161 - flex-direction: column;
162 - gap: 0.5rem;
132 +
133 +.wowp-wrap .nav-tab-wrapper .nav-tab-active {
134 + color: var(--wowp-blue);
163 135 }
164 -@media (width >= 48rem) {
165 - .wowp .wowp-settins__tabs {
166 - gap: unset;
167 - flex-direction: row;
168 - align-items: center;
136 +
137 +.wowp-list {
138 + padding: 50px 36px 50px 16px;
139 +}
140 +
141 +@media screen and (max-width: 782px) {
142 + .wowp-list td.column-mode span:first-child {
143 + margin-left: 0;
169 144 }
170 145 }
171 -.wowp .wowp-settins__tabs-radio {
172 - display: none;
146 +.wowp-list .row-actions .duplicate a {
147 + color: green;
173 148 }
174 -.wowp .wowp-settins__tabs-radio:checked + .wowp-settins__tabs-tab {
175 - color: var(--wowp-gray-700);
176 - position: relative;
149 +.wowp-list .row-actions .export a {
150 + color: orange;
177 151 }
178 -.wowp .wowp-settins__tabs-radio:checked + .wowp-settins__tabs-tab:before {
179 - position: absolute;
180 - content: "";
181 - display: block;
182 - width: 100%;
183 - height: 3px;
184 - background-color: var(--wowp-gray-900);
185 - bottom: -9px;
186 - left: 0;
152 +
153 +.wowp-status-on,
154 +.wowp-status-off {
155 + display: inline-block;
156 + width: 14px;
157 + height: 14px;
158 + border-radius: 50%;
187 159 }
188 -.wowp .wowp-settins__tabs-tab {
189 - padding: 0.5rem 1rem;
190 - color: var(--wowp-gray-400);
191 - cursor: pointer;
192 - border-radius: 0.25rem;
193 - font-size: 14px;
160 +
161 +.wowp-status-on {
162 + background-color: green;
194 163 }
195 -.wowp .wowp-settins__tabs-tab:hover {
196 - color: var(--wowp-gray-700);
197 - background-color: var(--wowp-gray-100);
164 +
165 +.wowp-status-off {
166 + background-color: red;
198 167 }
199 -.wowp .wowp-settins__tabs-content {
200 - position: absolute;
201 - top: -99999px;
202 - left: -99999px;
168 +
169 +.wowp-settings #titlewrap input {
170 + padding: 3px 8px;
171 + font-size: 1.7em;
172 + line-height: 100%;
173 + height: 1.7em;
203 174 width: 100%;
204 - border-top: 1px solid var(--wowp-gray-100);
205 - margin-block-start: 0.5rem;
206 - margin-inline: -1rem;
207 - padding-inline: 1rem;
175 + outline: none;
176 + margin: 0 0 3px;
177 + background-color: #fff;
178 + border-radius: 0;
208 179 }
209 -.wowp #wowp-tab-html-code:checked ~ [data-content=wowp-tab-html-code],
210 -.wowp #wowp-tab-css-code:checked ~ [data-content=wowp-tab-css-code],
211 -.wowp #wowp-tab-js-code:checked ~ [data-content=wowp-tab-js-code],
212 -.wowp #wowp-tab-php-code:checked ~ [data-content=wowp-tab-php-code],
213 -.wowp #wowp-tab-include:checked ~ [data-content=wowp-tab-include],
214 -.wowp #wowp-tab-settings:checked ~ [data-content=wowp-tab-settings],
215 -.wowp #wowp-tab-attributes:checked ~ [data-content=wowp-tab-attributes],
216 -.wowp #wowp-tab-pro:checked ~ [data-content=wowp-tab-pro] {
217 - position: static;
218 -}
219 -.wowp .wowp-settings__page {
180 +
181 +.wowp-wrap fieldset {
182 + border: 2px solid var(--wowp-border);
183 + padding: 20px;
220 184 display: flex;
221 - flex-direction: column;
222 185 flex-wrap: wrap;
223 - padding-block: 1.5rem 0;
224 - gap: 1.5rem;
186 + gap: 15px;
187 + margin-bottom: 24px;
225 188 }
226 -@media (width >= 48rem) {
227 - .wowp .wowp-settings__page {
228 - flex-direction: row;
229 - }
189 +.wowp-wrap legend {
190 + font-weight: bold;
191 + color: var(--wowp-dark);
192 + padding: 0 8px;
193 + font-size: 15px;
230 194 }
231 -.wowp .wowp-settings__page-content {
232 - order: 1;
233 - flex: 1;
234 -}
235 -.wowp .wowp-settings__page-sidebar {
195 +
196 +.wowp-field {
236 197 position: relative;
237 - display: flex;
238 - flex-direction: column;
239 - gap: 1rem;
240 - order: -1;
198 + box-sizing: border-box;
241 199 }
242 -@media (width >= 48rem) {
243 - .wowp .wowp-settings__page-sidebar {
244 - order: 2;
245 - width: 200px;
246 - }
200 +.wowp-field input:not([type=checkbox], [type=radio], .wp-color-picker, .wp-picker-clear, .button),
201 +.wowp-field select {
202 + height: 40px;
203 + line-height: 40px;
204 + width: 100%;
205 + border: 1px solid var(--wowp-blue);
206 + max-width: 100%;
247 207 }
248 -.wowp .wowp-settings__page-sidebar .wowp-fields__group {
249 - flex-direction: column;
250 - gap: 1rem;
251 - align-items: initial;
208 +.wowp-field textarea {
209 + width: 100%;
210 + min-height: 350px;
252 211 }
253 -.wowp .wowp-settings__page-sidebar-title {
254 - color: var(--wowp-gray-500);
255 - font-weight: 500;
212 +.wowp-field .label {
213 + position: absolute;
214 + top: 0;
215 + left: 10px;
216 + transform: translateY(-50%);
217 + font-size: 12px;
218 + font-weight: 700;
219 + padding: 0 5px;
220 + color: #004A9B;
221 + z-index: 9;
256 222 }
257 -.wowp .wowp-settings__page-footer {
258 - border-top: 1px solid var(--wowp-gray-100);
259 - padding-block-start: 1rem;
260 - margin-inline: -1rem;
261 - padding-inline: 1rem;
262 - order: 3;
223 +.wowp-field .label:after {
224 + position: absolute;
225 + content: " ";
226 + height: 4px;
227 + background: #fff;
263 228 width: 100%;
264 - display: flex;
265 - flex-direction: column;
266 - gap: 1rem;
229 + top: 50%;
230 + left: 0;
231 + z-index: -1;
232 + transform: translateY(-50%);
267 233 }
268 -@media (width >= 64rem) {
269 - .wowp .wowp-settings__page-footer {
270 - flex-direction: row;
271 - align-items: center;
272 - justify-content: space-between;
273 - }
234 +.wowp-field .label.wowp-info:before {
235 + position: absolute;
236 + content: "?";
237 + top: 0;
238 + left: calc(100% - 5px);
239 + font-size: 10px;
240 + color: var(--wowp-dark);
241 + transform: translateY(calc(-50% ));
242 + font-weight: bold;
274 243 }
275 -.wowp .CodeMirror {
276 - min-height: 700px;
277 - font-size: 0.875rem;
278 - line-height: 1.25rem;
279 - box-shadow: var(--wowp-shadow-sm);
280 - border: 1px solid var(--wowp-gray-100);
281 - border-radius: 0.5rem;
282 -}
283 -.wowp .wowp-php-nav-menu {
284 - position: sticky;
244 +.wowp-field .label.wowp-info:hover:before {
245 + position: absolute;
285 246 top: 0;
286 - margin: 0;
287 - padding-left: 1rem;
247 + left: 0;
248 + background-color: #2B222A;
249 + border-radius: 5px;
250 + color: #fff;
251 + content: attr(data-info);
252 + padding: 5px 10px;
253 + text-transform: none;
254 + width: 160px;
255 + transform: translateY(calc(-100% - 7px));
256 + word-wrap: break-word;
257 + white-space: break-spaces;
258 + line-height: 1.1;
259 + font-weight: normal;
260 + font-size: 12px;
288 261 }
289 -.wowp .wowp-php-nav-menu li {
290 - position: relative;
291 -}
292 -.wowp .wowp-php-nav-menu li:first-child {
293 - padding-top: 0.5rem;
294 -}
295 -.wowp .wowp-php-nav-menu li:first-child:before {
296 - content: "";
262 +.wowp-field .wowp-download-img {
297 263 position: absolute;
298 - width: calc(100% + 1rem);
299 - height: 1px;
300 264 top: 0;
301 - left: -1rem;
302 - background-color: var(--wowp-gray-100);
265 + right: 5px;
266 + transform: translateY(-100%);
267 + font-weight: 600;
268 + font-size: 8px;
269 + cursor: pointer;
270 + color: var(--wowp-dark);
303 271 }
304 -.wowp .wowp-php-nav-menu li:last-child {
305 - padding-bottom: 0.5rem;
272 +
273 +.wowp-field {
274 + width: calc(100%/3 - 15px/2 - 2.5px);
306 275 }
307 -.wowp .wowp-php-nav-menu li:last-child:after {
308 - content: "";
309 - position: absolute;
310 - width: calc(100% + 1rem);
311 - height: 1px;
312 - bottom: 0;
313 - left: -1rem;
314 - background-color: var(--wowp-gray-100);
276 +@media screen and (max-width: 1024px) {
277 + .wowp-field {
278 + width: 100%;
279 + }
315 280 }
316 -.wowp .wowp-php-nav-menu a {
317 - color: var(--wowp-gray-700);
281 +
282 +.wowp-field.has-checkbox {
283 + display: flex;
284 + padding: 0 8px;
285 + align-items: center;
286 + border: 1px solid var(--wowp-blue);
287 + border-radius: 3px;
288 + height: 40px;
289 + line-height: 40px;
290 + gap: 8px;
291 + width: calc(100%/3 - 15px/2 - 2.5px - 2.5px);
318 292 }
319 -.wowp .wowp-preview {
320 - margin-block: 1.5rem;
321 - margin-inline-end: 20px;
322 - background-color: #ffffff;
323 - border: 1px solid var(--wowp-gray-100);
324 - border-radius: 0.5rem;
325 - box-shadow: var(--wowp-shadow);
293 +@media screen and (max-width: 1024px) {
294 + .wowp-field.has-checkbox {
295 + width: 100%;
296 + }
326 297 }
327 -.wowp .wowp-preview__title {
328 - margin: 0;
329 - padding: 1rem 1rem 0 1rem;
330 - color: var(--wowp-gray-900);
298 +.wowp-field.has-checkbox input[type=checkbox] {
299 + margin: 0 8px 0 0;
331 300 }
332 -.wowp .wowp-preview__subtitle {
333 - margin: 0;
334 - color: var(--wowp-gray-500);
335 - padding-inline: 1rem;
301 +.wowp-field.has-checkbox .label {
302 + line-height: initial;
336 303 }
337 -.wowp .wowp-preview__iframe {
338 - resize: both;
339 - overflow: auto;
340 - min-height: 450px;
341 - max-width: calc(100% - 1.5rem);
342 - margin: 0.5rem 0.5rem 1rem 0.5rem;
343 - scrollbar-gutter: stable;
344 - scrollbar-width: none;
345 - border: 3px solid #f1f1f1;
346 - border-top-left-radius: 4px;
347 - border-top-right-radius: 4px;
304 +
305 +.wowp-field.has-addon {
306 + display: flex;
307 + align-items: center;
348 308 }
349 -.wowp .wowp-preview__iframe.is-toggled {
350 - min-height: auto;
351 - resize: none;
309 +.wowp-field.has-addon .is-addon {
310 + order: -1;
311 + box-sizing: border-box;
312 + height: 40px;
313 + line-height: 40px;
314 + padding: 0 8px;
315 + background-color: #ffffff;
316 + color: var(--wowp-dark);
317 + border: 1px solid var(--wowp-blue);
318 + border-radius: 3px 0 0 3px;
319 + border-right: none;
320 + margin-right: -2px;
352 321 }
353 -.wowp .wowp-preview__iframe #wowp-preview {
354 - width: 100%;
355 - height: calc(100% - 50px);
356 - min-height: 400px;
322 +.wowp-field.has-addon select,
323 +.wowp-field.has-addon input:not([type=checkbox], [type=radio]) {
357 324 box-sizing: border-box;
325 + border-radius: 0 3px 3px 0;
326 + border-left: none;
358 327 }
359 -.wowp .wowp-preview__top {
360 - padding: 10px;
361 - background: #f1f1f1;
362 - border-top-left-radius: 4px;
363 - border-top-right-radius: 4px;
364 - display: flex;
365 - gap: 0.5rem;
328 +.wowp-field.has-addon select[readonly] + .is-addon,
329 +.wowp-field.has-addon input:not([type=checkbox], [type=radio])[readonly] + .is-addon {
330 + background-color: #f0f0f1;
366 331 }
367 -.wowp .wowp-preview__top .wowp-preview__size {
368 - margin-left: auto;
369 - font-size: 11px;
332 +.wowp-field.has-addon select:focus,
333 +.wowp-field.has-addon input:not([type=checkbox], [type=radio]):focus {
334 + box-shadow: none;
370 335 }
371 -.wowp .wowp-preview__dot {
372 - height: 16px;
373 - width: 16px;
374 - background-color: #bbb;
375 - border-radius: 50%;
376 - display: flex;
377 - align-items: center;
378 - justify-content: center;
379 - cursor: pointer;
380 - transition: background-color 0.2s ease-in-out;
336 +.wowp-field.has-addon:has(input:focus) {
337 + box-shadow: 0 0 0 1px #2271b1;
338 + border-radius: 3px;
381 339 }
382 -.wowp .wowp-preview__dot .dashicons {
383 - font-size: 10px;
340 +.wowp-field.has-addon.has-background .is-addon {
341 + background-color: #DFE2FC;
342 +}
343 +
344 +.wowp-field.has-addon-right label {
384 345 display: flex;
385 346 align-items: center;
386 - justify-content: center;
387 347 }
388 -.wowp .wowp-preview__dot .dashicons.is-hidden {
389 - display: none;
348 +.wowp-field.has-addon-right label .is-addon {
349 + order: 1;
350 + box-sizing: border-box;
351 + height: 40px;
352 + line-height: 40px;
353 + padding: 0 8px;
354 + background-color: #ffffff;
355 + color: var(--wowp-dark);
356 + border: 1px solid var(--wowp-blue);
357 + border-radius: 0 3px 3px 0;
358 + border-left: none;
359 + margin-left: -2px;
390 360 }
391 -.wowp .wowp-preview__dot.is-close:hover {
392 - background-color: #ff5f57;
361 +.wowp-field.has-addon-right label select,
362 +.wowp-field.has-addon-right label input:not([type=checkbox], [type=radio]) {
363 + border-radius: 3px 0 0 3px;
393 364 }
394 -.wowp .wowp-preview__dot.is-toggle:hover, .wowp .wowp-preview__dot.is-toggle.is-active {
395 - background-color: #ffbd2e;
365 +.wowp-field.has-addon-right label select:focus + .is-addon,
366 +.wowp-field.has-addon-right label input:not([type=checkbox], [type=radio]):focus + .is-addon {
367 + box-shadow: 0 0 0 1px #2271b1;
396 368 }
397 -.wowp .wowp-preview__dot.is-reset:hover {
398 - background-color: #28c840;
369 +.wowp-field.has-addon-right:has(input:focus) {
370 + box-shadow: 0 0 0 1px #2271b1;
371 + border-radius: 3px;
399 372 }
400 -.wowp .wowp-field {
401 - position: relative;
402 - box-sizing: border-box;
403 - display: flex;
373 +.wowp-field.has-addon-right.has-background .is-addon {
374 + background-color: #DFE2FC;
404 375 }
405 -.wowp .wowp-field.has-addon {
406 - align-items: center;
376 +
377 +.wowp-field.has-addon .is-addon .dashicons {
378 + line-height: 40px;
407 379 }
408 -.wowp .wowp-field.has-addon label {
409 - background-color: transparent;
380 +
381 +.wowp-field.border-default .is-addon {
382 + background-color: #dcdcde;
383 + color: #50575e;
384 + border-color: #8c8f94;
410 385 }
411 -.wowp .wowp-field.is-column {
412 - flex-direction: column;
413 - gap: 0.5rem;
386 +.wowp-field.border-default input:not([type=checkbox], [type=radio]) {
387 + border: 1px solid #8c8f94;
414 388 }
415 -.wowp .wowp-field input[type=text],
416 -.wowp .wowp-field input[type=url],
417 -.wowp .wowp-field input[type=time],
418 -.wowp .wowp-field input[type=number],
419 -.wowp .wowp-field input[type=datetime],
420 -.wowp .wowp-field input[type=date],
421 -.wowp .wowp-field select {
422 - height: 40px;
423 - line-height: 40px;
389 +
390 +.wowp-field.is-full {
424 391 width: 100%;
425 - max-width: 100%;
426 - min-width: 200px;
427 - padding-inline-start: 12px;
428 392 }
429 -.wowp .wowp-field textarea {
393 +
394 +.wowp-fields-group {
395 + position: relative;
396 + display: flex;
397 + gap: 15px;
398 + flex-wrap: wrap;
430 399 width: 100%;
431 - min-height: 400px;
432 - padding: 12px;
433 - resize: vertical;
434 - font-size: 0.875rem;
435 - line-height: 1.25rem;
436 - box-shadow: var(--wowp-shadow-sm);
437 - border: 1px solid var(--wowp-gray-100);
438 - border-radius: 0.5rem;
400 + box-sizing: border-box;
439 401 }
440 -.wowp .wowp-field textarea[readonly] {
441 - color: var(--wowp-gray-400);
442 - background-color: #ffffff;
443 -}
444 -.wowp .wowp-field .label {
445 - position: absolute;
446 - top: 0;
447 - left: 8px;
448 - transform: translateY(-50%);
402 +
403 +.wowp-wrap .large-text.code {
404 + background: #32373c;
405 + color: rgba(240, 245, 250, 0.7);
449 406 font-size: 12px;
450 - font-weight: 700;
451 - padding-inline: 4px 5px;
452 - color: var(--wowp-gray-900);
453 - z-index: 9;
454 - background-color: #ffffff;
407 + font-family: Menlo, Monaco, monospace;
408 + display: block;
409 + overflow: auto;
410 + white-space: pre;
411 + width: 100%;
412 + height: 450px;
413 + padding: 10px;
414 + outline: none;
455 415 }
456 -.wowp .wowp-field label {
457 - width: 100%;
416 +
417 +.wowp-code-nav {
418 + position: relative;
419 + min-height: 30px;
458 420 }
459 -.wowp .wowp-field.has-checkbox {
460 - align-items: center;
461 - gap: 0.5rem;
462 - border: 1px solid var(--wowp-gray-100);
463 - border-radius: 0.25rem;
464 - padding: 0.5rem;
421 +
422 +.wowp-snippet__list dt {
423 + padding-top: 0.5rem;
465 424 }
466 -.wowp .wowp-field.has-checkbox.is-reverse {
467 - flex-direction: row-reverse;
468 - justify-content: left;
425 +.wowp-snippet__list dt:has(input:checked) {
426 + background-color: #f0f0f1;
427 + margin-inline: -1.25rem;
428 + padding-inline: 1.25rem;
429 + transition: background-color 0.2s ease-out;
469 430 }
470 -.wowp .wowp-field.has-checkbox .label {
471 - left: 0;
472 - padding-inline: 0;
473 - position: static;
474 - transform: unset;
431 +.wowp-snippet__list dt:has(input:checked) + dd {
432 + background-color: #f0f0f1;
433 + margin-inline: -1.25rem;
434 + padding-inline: calc(1.25rem + 24px) 1.25rem;
435 + transition: background-color 0.2s ease-out;
475 436 }
476 -.wowp .wowp-field.has-checkbox .switch {
477 - position: relative;
478 - top: 0;
479 - left: auto;
480 - display: inline-block;
481 - width: 36px;
482 - height: 20px;
483 - transform: unset;
437 +.wowp-snippet__list dt label {
438 + font-weight: 700;
439 + font-size: 16px;
484 440 }
485 -.wowp .wowp-field.has-checkbox .switch input {
486 - opacity: 0;
487 - width: 0;
488 - height: 0;
441 +.wowp-snippet__list dt input {
442 + margin-right: 8px;
489 443 }
490 -.wowp .wowp-field.has-checkbox .slider {
491 - position: absolute;
492 - cursor: pointer;
493 - top: 0;
494 - left: 0;
495 - right: 0;
496 - bottom: 0;
497 - background-color: var(--wowp-gray-400);
498 - -webkit-transition: 0.4s;
499 - transition: 0.4s;
500 - border-radius: 34px;
444 +.wowp-snippet__list dd {
445 + padding-top: 8px;
446 + margin-left: 0;
447 + padding-left: 24px;
501 448 }
502 -.wowp .wowp-field.has-checkbox .slider:before {
503 - position: absolute;
504 - content: "";
505 - height: 16px;
506 - width: 16px;
507 - left: 2px;
508 - bottom: 2px;
509 - background-color: white;
510 - -webkit-transition: 0.4s;
511 - transition: 0.4s;
512 - border-radius: 50%;
449 +.wowp-snippet__list dd:not(:last-child) {
450 + padding-bottom: 8px;
451 + margin-bottom: 0;
452 + border-bottom: 1px dashed #8c8f94;
513 453 }
514 -.wowp .wowp-field.has-checkbox input:checked ~ .slider {
515 - background-color: var(--wowp-gray-700);
454 +
455 +.wowp-notice {
456 + padding: 22px;
457 + border-right: none;
458 + border-top: none;
459 + border-bottom: none;
516 460 }
517 -.wowp .wowp-field.has-checkbox input:focus ~ .slider {
518 - box-shadow: var(--wowp-shadow-sm);
461 +
462 +.wowp-error {
463 + background: #FAD0D0;
464 + color: #14102C;
465 + border-left: 6px solid #E82C2C;
519 466 }
520 -.wowp .wowp-field.has-checkbox input:checked ~ .slider:before {
521 - transform: translateX(16px);
467 +
468 +.wowp-success {
469 + padding: 1.25rem;
470 + background: #D0FAD0;
471 + color: #14102C;
472 + border-left: 6px solid #109610;
522 473 }
523 -.wowp .wowp-field.has-addon {
474 +
475 +.wowp-notice {
476 + --notification-color: var(--wowp-success);
524 477 position: relative;
478 + background-color: color-mix(in srgb, var(--notification-color) 7%, white);
479 + border-width: 1px;
480 + border-style: solid;
481 + border-color: var(--notification-color);
482 + padding-block: 1.25rem;
483 + padding-inline: 3rem 1.25rem;
484 + border-radius: 4px;
485 + margin-block: 15px;
525 486 }
526 -.wowp .wowp-field.has-addon label {
487 +.wowp-notice:before {
488 + position: absolute;
489 + left: 0.5rem;
527 490 top: 50%;
528 - left: 5px;
529 - padding: 0;
530 - height: 32px;
531 - background-color: var(--wowp-gray-200);
491 + transform: translateY(-50%);
492 + content: "";
493 + font-family: dashicons;
494 + font-size: 1.5rem;
495 + width: 2rem;
496 + height: 2rem;
532 497 display: flex;
533 498 align-items: center;
534 499 justify-content: center;
535 - width: 32px;
500 + color: var(--notification-color);
501 +}
502 +.wowp-notice:after {
503 + position: absolute;
504 + content: "";
505 + left: 0;
506 + top: 50%;
507 + transform: translateY(-50%);
508 + height: 2rem;
509 + width: 3px;
510 + border-radius: 0 3px 3px 0;
511 + background-color: var(--notification-color);
512 +}
513 +
514 +.wowp-file input::file-selector-button {
515 + color: #14102C;
516 + padding: 0.5em;
517 + border: thin solid var(--wowp-yellow);
536 518 border-radius: 4px;
537 - transform: translateY(-50%);
538 - z-index: 2;
539 519 }
540 -.wowp .wowp-field.has-addon input[type=text],
541 -.wowp .wowp-field.has-addon input[type=url] {
542 - padding-inline-start: 42px;
520 +
521 +.wowp-file input[type=file]:valid {
522 + color: var(--wowp-orange);
543 523 }
544 -.wowp .wowp-settings__publish-template {
524 +
525 +.wowp-settings #poststuff {
526 + padding-top: 0;
527 + margin-top: 15px;
528 +}
529 +.wowp-settings h4 {
545 530 display: flex;
546 - gap: 0.5rem;
531 + width: max-content;
532 + gap: 8px;
533 + align-items: center;
534 + margin: 0 0 1.5rem 0;
535 + font-weight: 800;
536 + box-sizing: border-box;
537 + color: var(--wowp-blue);
538 + font-size: 16px;
539 + letter-spacing: -1.08px;
540 + line-height: 18px;
541 + text-align: left;
542 + -webkit-font-smoothing: antialiased;
543 + background-color: var(--wowp-bg);
544 + padding: 4px 8px;
545 + border-radius: 25px;
547 546 }
548 -.wowp .wowp-settings__publish-template select {
549 - width: auto;
550 - min-width: 200px;
547 +
548 +.codericon {
549 + color: var(--wowp-orange);
551 550 }
552 -.wowp .wowp-field__title {
553 - color: var(--wowp-gray-900);
554 - font-size: 1rem;
555 - font-weight: 600;
551 +
552 +.nav-tab-wrapper.wowp-tab {
553 + cursor: pointer;
556 554 }
557 -.wowp .wowp-fieldset {
558 - border: 1px solid var(--wowp-gray-100);
559 - padding: 1rem;
560 - border-radius: 0.5rem;
561 - box-shadow: var(--wowp-shadow-sm);
562 - margin-block: 1.5rem;
555 +
556 +.wowp-tab .nav-tab-active {
557 + background-color: #ffffff;
558 + border-bottom: 1px solid #ffffff;
563 559 }
564 -.wowp .wowp-fieldset__header {
565 - margin-inline: -1rem;
566 - padding-inline: 1rem;
567 - display: flex;
568 - flex-direction: column;
569 - gap: 1rem;
560 +
561 +.wowp-tab-content {
562 + position: relative;
563 + padding: 1.5rem 1.25rem;
564 + background-color: #ffffff;
565 + border-width: 1px;
566 + border-style: solid;
567 + border-image: linear-gradient(to bottom, var(--wowp-blue), var(--wowp-yellow)) 1 100%;
570 568 }
571 -@media (width >= 48rem) {
572 - .wowp .wowp-fieldset__header {
573 - flex-direction: row;
574 - justify-content: space-between;
575 - align-items: center;
576 - }
569 +.wowp-tab-content .tab-content {
570 + position: absolute;
571 + left: -9999%;
577 572 }
578 -.wowp .wowp-fieldset__header + .wowp-fields__group {
579 - margin-top: 1rem;
580 - margin-inline: -1rem;
581 - padding-inline: 1rem;
582 - border-top: 1px solid var(--wowp-gray-100);
573 +.wowp-tab-content .tab-content.tab-content-active {
574 + position: relative;
575 + left: 0;
583 576 }
584 -.wowp .wowp-fieldset__header-title {
585 - font-size: 1.125rem;
586 - line-height: 1.75;
587 - font-weight: 500;
588 - color: var(--wowp-gray-700);
577 +
578 +.wowp-text-helper {
579 + width: 100%;
589 580 }
590 -.wowp .wowp-fieldset__header-title p {
591 - font-size: 0.875rem;
592 - line-height: 1.25rem;
593 - color: var(--wowp-gray-400);
594 - margin: 0;
595 - font-weight: 400;
581 +
582 +.wowp-sidebar-pub-section {
583 + display: flex;
584 + flex-direction: column;
585 + gap: 15px;
596 586 }
597 -.wowp .wowp-fields__group {
598 - padding-top: 1rem;
599 - display: flex;
600 - gap: 1rem;
601 - align-items: center;
602 - flex-wrap: wrap;
587 +
588 +.wowp-sidebar-pub-section .wowp-field {
589 + width: 100%;
603 590 }
604 -.wowp .wowp-fields__group.column-3 > *:not(.is-full) {
605 - flex: 1 1 calc(33.333% - 1rem);
606 - min-width: 200px;
591 +
592 +.wowp-sidebar-pub-section .wowp-field .is-addon {
593 + height: 32px;
594 + line-height: 32px;
607 595 }
608 -.wowp #wp-support-message-wrap {
609 - width: 100%;
596 +.wowp-sidebar-pub-section .wowp-field .is-addon .dashicons {
597 + line-height: 32px;
610 598 }
611 -.wowp .wowp-button__icon {
612 - --_color: var(--wowp-gray-700);
613 - display: flex;
614 - justify-content: center;
615 - align-items: center;
616 - width: 40px;
617 - height: 40px;
618 - cursor: pointer;
619 - appearance: button;
620 - background-color: color-mix(in srgb, var(--_color) 7%, white);
621 - border-color: var(--_color);
622 - border-width: 1px;
623 - border-style: solid;
624 - border-radius: 0.25rem;
625 - color: var(--_color);
599 +.wowp-sidebar-pub-section .wowp-field .is-addon a {
600 + text-decoration: none;
626 601 }
627 -.wowp .wowp-button__icon:hover {
628 - background-color: color-mix(in srgb, var(--_color) 15%, white);
602 +.wowp-sidebar-pub-section .wowp-field input:not([type=checkbox], [type=radio]) {
603 + height: 32px;
604 + line-height: 32px;
629 605 }
630 -.wowp .wowp-button__icon.is-remove {
631 - --_color: var(--wowp-color-red);
606 +
607 +.wowp-sidebar-pub-section [list]::-webkit-calendar-picker-indicator {
608 + display: none !important;
632 609 }
633 -.wowp .wowp-button {
634 - display: inline-flex;
635 - align-items: center;
636 - gap: 0.5rem;
610 +
611 +.wowp-sidebar #major-publishing-actions {
612 + margin: 0 -12px -12px -12px;
613 + padding: 12px 24px;
637 614 }
638 -.wowp .wowp-button.button-secondary {
639 - border-color: transparent;
640 - color: var(--wowp-gray-900);
641 - font-weight: 500;
615 +
616 +.wowp-sidebar #minor-publishing-actions {
617 + padding: 0;
642 618 }
643 -.wowp .wowp-button.button-primary {
644 - font-weight: 500;
619 +
620 +.button._is-success {
621 + background-color: var(--wowp-success);
622 + border-color: var(--wowp-success);
623 + color: #ffffff;
645 624 }
646 -.wowp .wowp-button.button-dark {
647 - font-weight: 500;
648 - border-color: transparent;
649 - background-color: var(--wowp-gray-900);
625 +.button._is-success:focus, .button._is-success:hover {
626 + background-color: #007602;
627 + border-color: #007602;
650 628 color: #ffffff;
651 629 }
652 -.wowp .wowp-button.button-dark:hover {
653 - background-color: var(--wowp-gray-700);
630 +
631 +.button._is-danger {
632 + background-color: var(--wowp-danger);
633 + border-color: var(--wowp-danger);
634 + color: #ffffff;
654 635 }
655 -.wowp .wowp-button.button-red {
656 - font-weight: 500;
657 - border-color: transparent;
658 - background-color: var(--wowp-color-red);
636 +.button._is-danger:focus, .button._is-danger:hover {
637 + background-color: #760200;
638 + border-color: #760200;
659 639 color: #ffffff;
660 640 }
661 -.wowp .wowp-button.button-red:hover {
662 - background-color: color-mix(in srgb, var(--wowp-color-red) 61.54%, black);
641 +
642 +.button-editor {
643 + right: 0;
644 + bottom: 2px;
645 + cursor: pointer;
646 + padding: 5px 10px;
647 + background-color: var(--wowp-border);
648 + color: var(--wowp-dark);
649 + border-radius: 4px;
650 + display: block;
663 651 }
664 -.wowp .wowp-tooltip {
652 +.button-editor:focus, .button-editor:hover {
653 + background-color: var(--wowp-yellow);
654 +}
655 +
656 +.add-img-btn {
657 + align-self: flex-end;
658 + text-align: right;
659 +}
660 +
661 +.has-tooltip {
665 662 position: relative;
666 - font-weight: 400;
667 663 cursor: help;
668 664 }
669 -.wowp .wowp-tooltip.is-pointer {
670 - cursor: pointer;
671 -}
672 -.wowp .wowp-tooltip::before, .wowp .wowp-tooltip::after {
665 +.has-tooltip::before, .has-tooltip::after {
673 666 color: #efefef;
667 + font-family: monospace;
674 668 font-size: 12px;
675 669 opacity: 0;
676 670 pointer-events: none;
677 671 text-align: center;
678 672 }
679 -.wowp .wowp-tooltip::before {
673 +.has-tooltip::before {
680 674 position: absolute;
681 675 top: 0;
682 676 left: 50%;
683 - background-color: rgba(0, 0, 0, 0.85);
684 - border-radius: 2px;
685 - color: #ffffff;
677 + background-color: #2B222A;
678 + border-radius: 5px;
679 + color: #fff;
686 680 content: attr(data-tooltip);
687 - padding: 10px;
681 + padding: 5px 10px;
688 682 text-transform: none;
689 683 transition: all 0.5s ease;
690 - max-width: 200px;
691 - width: max-content;
684 + width: 160px;
692 685 transform: translateY(calc(-100% - 7px)) translateX(-50%);
693 686 word-wrap: break-word;
694 687 white-space: break-spaces;
695 - line-height: 1.5;
696 - text-align: left;
688 + line-height: 1.1;
697 689 }
698 -.wowp .wowp-tooltip::after {
690 +.has-tooltip::after {
699 691 position: absolute;
700 692 top: -7px;
701 693 left: 50%;
702 694 border-left: 5px solid transparent;
703 695 border-right: 5px solid transparent;
704 - border-top: 5px solid var(--wowp-gray-900);
696 + border-top: 5px solid #2B222A;
705 697 content: " ";
706 698 font-size: 0;
707 699 line-height: 0;
708 700 margin-left: -5px;
@@ -708,428 +700,375 @@
708 700 margin-left: -5px;
709 701 width: 0;
710 702 transform: translateX(-50%);
711 703 }
712 -.wowp .wowp-tooltip:focus-visible::before, .wowp .wowp-tooltip:focus-visible::after, .wowp .wowp-tooltip:focus::before, .wowp .wowp-tooltip:focus::after, .wowp .wowp-tooltip:hover::before, .wowp .wowp-tooltip:hover::after {
704 +.has-tooltip:focus::before, .has-tooltip:focus::after, .has-tooltip:hover::before, .has-tooltip:hover::after {
713 705 opacity: 1;
714 706 transition: all 0.75s ease;
715 707 }
716 -.wowp .wowp-tooltip.on-right::before {
708 +.has-tooltip.on-right::before {
717 709 top: 50%;
718 710 left: 100%;
719 711 transform: translateY(-50%) translateX(4px);
720 712 }
721 -.wowp .wowp-tooltip.on-right::after {
713 +.has-tooltip.on-right::after {
722 714 top: 50%;
723 715 left: calc(100% + 2px);
724 716 rotate: 90deg;
725 717 transform: translateX(calc(-50% + 2.5px));
726 718 }
727 -.wowp .wowp-tooltip.on-left::before {
719 +.has-tooltip.on-left::before {
728 720 top: 50%;
729 721 left: -2px;
730 722 transform: translateY(-50%) translateX(-100%);
731 723 }
732 -.wowp .wowp-tooltip.on-left::after {
724 +.has-tooltip.on-left::after {
733 725 top: 50%;
734 726 left: 0;
735 727 rotate: -90deg;
736 728 transform: translateX(calc(-50% + 7px));
737 729 }
738 -.wowp .wowp-tooltip.on-bottom::before {
739 - top: unset;
740 - bottom: 0;
741 - transform: translateY(calc(100% + 7px)) translateX(-50%);
730 +
731 +.wowp-toogle {
732 + display: flex;
733 + align-items: center;
734 + position: relative;
735 + text-decoration: none;
736 + color: #ffffff;
737 + width: 40px;
738 + height: 28px;
739 + border-radius: 50px;
740 + padding: 0 4px;
742 741 }
743 -.wowp .wowp-tooltip.on-bottom::after {
744 - top: unset;
745 - bottom: -7px;
746 - rotate: 180deg;
742 +.wowp-toogle:focus, .wowp-toogle:hover {
743 + color: #ffffff;
747 744 }
748 -.wowp .is-hidden {
749 - display: none;
745 +
746 +.wowp-toogle span {
747 + height: 20px;
748 + width: 20px;
749 + display: flex;
750 + align-items: center;
751 + justify-content: center;
752 + border-radius: 50%;
753 + font-size: 8px;
750 754 }
751 -.wowp .wowp-color-blue {
752 - color: var(--wowp-color-blue);
755 +
756 +.wowp-toogle.is-on {
757 + background-color: #BFFFC0;
753 758 }
754 -.wowp .wowp-color-yellow {
755 - color: var(--wowp-color-yellow);
759 +
760 +.wowp-toogle.is-on span {
761 + background-color: #00BF04;
756 762 }
757 -.wowp .wowp-color-red {
758 - color: var(--wowp-color-red);
763 +.wowp-toogle.is-on:focus span, .wowp-toogle.is-on:hover span {
764 + background-color: #007602;
759 765 }
760 -.wowp .wowp-color-green {
761 - color: var(--wowp-color-green);
766 +
767 +.wowp-toogle.is-off {
768 + flex-direction: row-reverse;
769 + background-color: #FFC0BF;
762 770 }
763 -.wowp .is-italic {
764 - font-style: italic;
771 +
772 +.wowp-toogle.is-off span {
773 + background-color: #BF0400;
765 774 }
766 -.wowp .is-full {
767 - width: 100%;
775 +.wowp-toogle.is-off:focus span, .wowp-toogle.is-off:hover span {
776 + background-color: #760200;
768 777 }
769 -.wowp .m-w-48 {
770 - max-width: 48rem;
771 - margin-inline: auto;
778 +
779 +.wowp-input-group {
780 + position: relative;
781 + display: flex;
772 782 }
773 -.wowp .m-top {
774 - margin-top: 1.5rem;
783 +.wowp-input-group .wowp-copy {
784 + display: flex;
785 + align-items: center;
786 + padding: 0 5px;
787 + cursor: pointer;
788 + color: var(--wowp-blue);
789 + transform: translateX(-100%);
775 790 }
776 -.wowp .wowp-command {
777 - max-width: 450px;
778 - width: 100%;
779 - max-height: 380px;
780 - height: 100%;
781 - border: none;
782 - border-radius: 0.5rem;
783 - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
784 - border-color: var(--wowp-gray-100);
785 - padding: 0;
791 +.wowp-input-group .wowp-copy:hover {
792 + color: var(--wowp-dark);
786 793 }
787 -.wowp .wowp-command .wowp-field {
788 - position: sticky;
789 - top: 0;
790 - background: #fff;
791 - z-index: 10;
792 - padding: 8px;
793 - border-bottom: 1px solid #ddd;
794 +.wowp-input-group input {
795 + padding-right: 21px;
794 796 }
795 -.wowp .wowp-quickcodes-search {
796 - width: 100%;
797 - border: none;
798 - border-radius: 0;
797 +
798 +.wpcoder-expand {
799 + margin-top: 8px;
799 800 }
800 -.wowp .wowp-quickcodes-search:focus {
801 - outline: none;
802 - box-shadow: none;
803 - border-color: var(--wowp-gray-100);
801 +
802 +.wpcoder-expand__title {
803 + color: var(--wowp-blue);
804 + font-weight: 600;
805 + font-size: 14px;
806 + cursor: pointer;
804 807 }
805 -.wowp .wowp-qc-list {
806 - margin: 0;
807 - padding: 4px;
808 - max-height: 300px;
809 - /* або інше значення */
810 - overflow-y: auto;
811 - scrollbar-width: thin;
812 - /* Firefox */
813 - scrollbar-color: #ccc transparent;
814 - /* Firefox */
808 +
809 +.wpcoder-expand__content {
810 + padding-block: 8px;
815 811 }
816 -.wowp .wowp-qc-list li {
817 - padding: 0.375rem 0.75rem;
818 - margin: 0;
819 - color: var(--wowp-gray-900);
820 - font-weight: 500;
821 - display: flex;
822 - flex-direction: column;
812 +
813 +.wowp-wrap {
814 + padding: 22px 16px 50px 16px;
823 815 }
824 -.wowp .wowp-qc-list li .description {
825 - font-weight: normal;
826 - color: var(--wowp-gray-700);
816 +.wowp-wrap .has-shadow {
817 + box-shadow: 0 0 10px 3px rgba(0, 91, 191, 0.1);
827 818 }
828 -.wowp .wowp-qc-list li .description code {
829 - font-size: 0.75rem;
819 +.wowp-wrap .has-padding {
820 + padding: 10px;
821 + margin: 0 -10px;
830 822 }
831 -.wowp .wowp-qc-list li.is-active {
832 - background-color: #f0f0f0;
833 - outline: 1px solid #007cba;
823 +.wowp-wrap .is-hidden {
824 + display: none;
834 825 }
835 -.wowp .wowp-qc-list .qc-title {
836 - color: var(--wowp-gray-400);
837 - font-weight: 500;
838 - font-size: 0.75rem;
839 - line-height: 1rem;
826 +.wowp-wrap .has-radius {
827 + border-radius: 4px;
840 828 }
841 -.wowp .wowp-qc-list .quickcode {
842 - cursor: pointer;
843 - border-radius: 0.25rem;
829 +.wowp-wrap .w_has-border {
830 + border: 2px solid;
831 + border-image: linear-gradient(to bottom, var(--wowp-blue), var(--wowp-yellow)) 1;
844 832 }
845 -.wowp .wowp-qc-list .quickcode:hover {
846 - background-color: var(--wowp-gray-100);
833 +.wowp-wrap .w_width-750 {
834 + max-width: 750px;
847 835 }
848 -.wowp .wowp-qc-list::-webkit-scrollbar {
849 - width: 6px;
836 +.wowp-wrap .has-mt {
837 + margin-top: 24px;
850 838 }
851 -.wowp .wowp-qc-list::-webkit-scrollbar-thumb {
852 - background-color: #ccc;
853 - border-radius: 4px;
839 +.wowp-wrap .color-red {
840 + color: #760200;
854 841 }
855 -.wowp .wowp-qc-list::-webkit-scrollbar-track {
856 - background: transparent;
842 +.wowp-wrap .color-green {
843 + color: #109610;
857 844 }
858 -.wowp .wowp-tools {
859 - max-width: 64rem;
860 - width: 100%;
845 +.wowp-wrap .is-relative {
846 + position: relative;
861 847 }
862 -.wowp .wowp-tools .wowp-button {
863 - margin-top: 1rem;
848 +.wowp-wrap ._m-is-auto {
849 + margin-inline-start: auto;
864 850 }
865 -.wowp .wowp-snippets {
866 - max-width: 64rem;
867 - width: 100%;
851 +
852 +.w_block {
853 + background-color: #ebf3ff;
854 + padding: 50px 32px;
855 + max-width: 1200px;
856 + margin: 50px auto;
868 857 }
869 -.wowp .wowp-snippets__header {
870 - padding-bottom: 0.75rem;
871 - border-bottom: 1px solid var(--wowp-gray-100);
858 +.w_block-titles {
859 + position: relative;
860 + width: max-content;
861 + margin: 0 auto;
862 + display: flex;
863 + flex-direction: column;
864 + gap: 15px;
872 865 }
873 -.wowp .wowp-snippets__header-title {
866 +.w_block-subtitle {
867 + color: #f16046;
868 + font-size: 16px;
869 + font-weight: 700;
870 + line-height: 20px;
874 871 margin: 0;
875 872 }
876 -.wowp .wowp-snippets__header-description {
877 - font-size: 0.875rem;
878 - line-height: 1.25rem;
879 - color: var(--wowp-gray-400);
873 +.w_block-title {
874 + position: relative;
875 + font-size: 40px;
876 + font-weight: 600;
877 + line-height: 45px;
880 878 margin: 0;
879 + background: linear-gradient(to right, #14102C 0%, #14102C 30%, #E86E2C 81%, #14102C 100%);
880 + -webkit-background-clip: text;
881 + -webkit-text-fill-color: transparent;
882 + color: #14102C;
881 883 }
882 -.wowp .wowp-snippet__list {
884 +.w_block-btns {
885 + width: max-content;
886 + margin: 48px auto 68px;
883 887 display: flex;
884 - flex-direction: column;
885 - gap: 0.75rem;
886 - margin-top: 0.75rem;
888 + gap: 25px;
887 889 }
888 -.wowp .wowp-snippet__item {
889 - position: relative;
890 - display: flex;
891 - justify-content: space-between;
892 - gap: 1rem;
893 - border: 1px solid var(--wowp-gray-100);
894 - border-radius: 0.5rem;
895 - padding: 1rem;
896 - flex-wrap: wrap;
897 - overflow: hidden;
890 +@media screen and (max-width: 768px) {
891 + .w_block-btns {
892 + flex-direction: column;
893 + }
898 894 }
899 -.wowp .wowp-snippet__item > .wowp-field.has-checkbox {
900 - border: none;
895 +.w_block-btns [class^=w_btn] {
896 + display: inline-block;
897 + width: 220px;
898 + height: 50px;
899 + margin: 0 15px;
900 + line-height: 50px;
901 + font-size: 20px;
902 + text-decoration: none;
903 + color: #fff;
904 + border-width: 1px;
905 + border-style: solid;
906 + text-align: center;
907 + border-radius: 8px;
908 + text-transform: uppercase;
909 + transition: 0.5s;
910 + background-size: 200% auto;
901 911 }
902 -.wowp .wowp-snippet__item:has(> .wowp-field.has-checkbox input[type=checkbox]:checked):before {
903 - content: "";
904 - position: absolute;
905 - top: 0;
906 - left: 0;
907 - height: 100%;
908 - width: 4px;
909 - background-color: var(--wowp-color-blue);
912 +.w_block-btns [class^=w_btn]:hover {
913 + background-position: right center;
910 914 }
911 -.wowp .wowp-snippet__item-header {
912 - flex: 1;
915 +.w_block-btns .w_btn-pro {
916 + background-image: linear-gradient(to right, #FFD500 0%, #E86E2C 51%, #FFD500 100%);
913 917 }
914 -.wowp .wowp-snippet__item-header label {
918 +.w_block-btns .w_btn-demo {
919 + background-image: linear-gradient(to right, #005BBF 0%, #800080 51%, #005BBF 100%);
920 +}
921 +
922 +h4.wowp-title {
923 + font-size: 32px;
915 924 font-weight: 600;
916 - font-size: 1rem;
917 - line-height: 1.5rem;
918 - color: var(--wowp-gray-900);
925 + line-height: 1.125;
926 + margin: 0 0 48px;
927 + padding: 0;
928 + color: var(--wowp-dark);
919 929 }
920 -.wowp .wowp-snippet__item-description {
921 - font-size: 0.8rem;
922 - margin-top: 0.25rem;
923 - margin-bottom: 0;
924 - color: var(--wowp-gray-500);
930 +
931 +.w_card {
932 + position: relative;
933 + background-color: #fff;
934 + border-radius: 6px;
935 + box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
936 + padding: 15px;
937 + text-decoration: none;
938 + color: #363636;
925 939 }
926 -.wowp .wowp-snippet__item-expand {
927 - width: 100%;
928 - border-top: 1px solid var(--wowp-gray-100);
929 - padding-top: 1rem;
930 -}
931 -.wowp .wowp-snippet__expand-title {
932 - font-weight: 500;
933 - font-size: 0.875rem;
940 +.w_card-media {
941 + position: absolute;
942 + top: -6px;
943 + left: -12px;
944 + background-color: #fdf2ed;
945 + width: 56px;
946 + height: 56px;
947 + border-radius: 6px;
948 + display: flex;
949 + align-items: center;
950 + color: orange;
951 + font-size: 32px;
952 + justify-content: center;
934 953 margin: 0;
935 954 }
936 -.wowp .wowp-snippets__tabs {
955 +.w_card-content {
937 956 display: flex;
938 - gap: 2.5rem;
939 - margin-top: 0.75rem;
957 + gap: 28px;
958 + flex-direction: column;
940 959 }
941 -.wowp .wowp-snippets__tabs-radio {
942 - display: none;
960 +.w_card-title {
961 + font-size: 22px;
962 + font-weight: 700;
963 + margin: 0 0 0 44px;
943 964 }
944 -.wowp .wowp-snippets__tabs-labels {
945 - display: flex;
946 - flex-direction: column;
947 - gap: 0.5rem;
948 - width: 15rem;
949 -}
950 -.wowp .wowp-snippets__tabs-tab {
951 - font-weight: 500;
952 - font-size: 0.875rem;
953 - line-height: 1.25rem;
954 - padding: 0.5rem 1rem;
965 +.w_card-description {
966 + font-size: 16px;
967 + display: -webkit-box;
968 + -webkit-line-clamp: 2;
969 + -webkit-box-orient: vertical;
970 + overflow: hidden;
971 + text-overflow: ellipsis;
955 972 cursor: pointer;
956 - border-radius: 0.25rem;
957 - color: var(--wowp-gray-900);
958 - display: flex;
959 - align-items: center;
960 - gap: 0.75rem;
973 + margin: 0;
961 974 }
962 -.wowp .wowp-snippets__tabs-tab .icon {
963 - font-size: 1rem;
975 +.w_card-description.is-open {
976 + overflow: visible;
977 + display: block;
978 + -webkit-line-clamp: unset;
964 979 }
965 -.wowp .wowp-snippets__tabs-tab:hover {
966 - color: var(--wowp-color-blue);
980 +
981 +[class^=w_boxes] {
982 + display: grid;
983 + gap: 22px;
967 984 }
968 -.wowp .wowp-snippets__tabs-content {
969 - position: absolute;
970 - top: -99999px;
971 - left: -99999px;
972 - max-width: 42rem;
973 - width: 100%;
985 +
986 +.w_boxes__3-col {
987 + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
974 988 }
975 -.wowp .wowp-snippets__tabs-content > .wowp-button {
976 - margin-top: 1rem;
989 +
990 +.changelog-list {
991 + max-width: 750px;
992 + margin-inline: auto;
977 993 }
978 -.wowp #wowp-tab-content:checked ~ [data-content=wowp-tab-content] {
979 - position: static;
994 +.changelog-list h4 {
995 + font-size: 22px;
996 + padding-bottom: 0.75rem;
997 + border-bottom: 2px solid #FADFD0;
998 + margin-bottom: 1rem;
999 + display: inline-block;
980 1000 }
981 -.wowp #wowp-tab-content:checked ~ .wowp-snippets__tabs-labels [for=wowp-tab-content] {
982 - background-color: var(--wowp-gray-100);
1001 +.changelog-list ul li {
1002 + font-size: 16px;
1003 + line-height: 1.5;
1004 + padding-left: 8px;
983 1005 }
984 -.wowp #wowp-tab-admin:checked ~ [data-content=wowp-tab-admin] {
985 - position: static;
1006 +.changelog-list ul li::marker {
1007 + font-size: 12px;
986 1008 }
987 -.wowp #wowp-tab-admin:checked ~ .wowp-snippets__tabs-labels [for=wowp-tab-admin] {
988 - background-color: var(--wowp-gray-100);
1009 +.changelog-list ul li.added::marker {
1010 + content: "✅";
989 1011 }
990 -.wowp #wowp-tab-login:checked ~ [data-content=wowp-tab-login] {
991 - position: static;
1012 +.changelog-list ul li.fixed::marker {
1013 + content: "🛠";
992 1014 }
993 -.wowp #wowp-tab-login:checked ~ .wowp-snippets__tabs-labels [for=wowp-tab-login] {
994 - background-color: var(--wowp-gray-100);
1015 +.changelog-list ul li.initial::marker {
1016 + content: "📢";
995 1017 }
996 -.wowp #wowp-tab-media:checked ~ [data-content=wowp-tab-media] {
997 - position: static;
998 -}
999 -.wowp #wowp-tab-media:checked ~ .wowp-snippets__tabs-labels [for=wowp-tab-media] {
1000 - background-color: var(--wowp-gray-100);
1001 -}
1002 -.wowp #wowp-tab-core:checked ~ [data-content=wowp-tab-core] {
1003 - position: static;
1004 -}
1005 -.wowp #wowp-tab-core:checked ~ .wowp-snippets__tabs-labels [for=wowp-tab-core] {
1006 - background-color: var(--wowp-gray-100);
1007 -}
1008 -.wowp #wowp-tab-comments:checked ~ [data-content=wowp-tab-comments] {
1009 - position: static;
1010 -}
1011 -.wowp #wowp-tab-comments:checked ~ .wowp-snippets__tabs-labels [for=wowp-tab-comments] {
1012 - background-color: var(--wowp-gray-100);
1013 -}
1014 -.wowp #wowp-tab-optimization:checked ~ [data-content=wowp-tab-optimization] {
1015 - position: static;
1016 -}
1017 -.wowp #wowp-tab-optimization:checked ~ .wowp-snippets__tabs-labels [for=wowp-tab-optimization] {
1018 - background-color: var(--wowp-gray-100);
1019 -}
1020 -.wowp #wowp-tab-contenttools:checked ~ [data-content=wowp-tab-contenttools] {
1021 - position: static;
1022 -}
1023 -.wowp #wowp-tab-contenttools:checked ~ .wowp-snippets__tabs-labels [for=wowp-tab-contenttools] {
1024 - background-color: var(--wowp-gray-100);
1025 -}
1026 -.wowp #wowp-tab-site-tools:checked ~ [data-content=wowp-tab-site-tools] {
1027 - position: static;
1028 -}
1029 -.wowp #wowp-tab-site-tools:checked ~ .wowp-snippets__tabs-labels [for=wowp-tab-site-tools] {
1030 - background-color: var(--wowp-gray-100);
1031 -}
1032 -.wowp #wowp-tab-integrations:checked ~ [data-content=wowp-tab-integrations] {
1033 - position: static;
1034 -}
1035 -.wowp #wowp-tab-integrations:checked ~ .wowp-snippets__tabs-labels [for=wowp-tab-integrations] {
1036 - background-color: var(--wowp-gray-100);
1037 -}
1038 -.wowp #wowp-tab-developer:checked ~ [data-content=wowp-tab-developer] {
1039 - position: static;
1040 -}
1041 -.wowp #wowp-tab-developer:checked ~ .wowp-snippets__tabs-labels [for=wowp-tab-developer] {
1042 - background-color: var(--wowp-gray-100);
1043 -}
1044 -.wowp .popover-container {
1045 - position: relative;
1046 - display: inline-block;
1047 -}
1048 -.wowp .popover {
1018 +
1019 +#code-attributes .dashicons,
1020 +#dequeue .dashicons,
1021 +#includes-files .dashicons,
1022 +#schedule .dashicons,
1023 +#display-rules .dashicons {
1024 + color: var(--wowp-danger);
1025 + cursor: pointer;
1049 1026 position: absolute;
1050 - top: calc(100% + 0.75rem);
1051 1027 right: 0;
1052 - background: white;
1053 - border: 1px solid var(--wowp-gray-100);
1054 - padding: 10px;
1055 - border-radius: 6px;
1056 - box-shadow: var(--wowp-shadow);
1057 - display: none;
1058 - z-index: 1000;
1059 - width: 160px;
1028 + top: 0;
1029 + transform: translateX(calc(100% + 5px));
1060 1030 }
1061 -.wowp .wowp-pro {
1062 - margin-block: 1.5rem;
1063 -}
1064 -.wowp .wowp-pro + input[type=submit] {
1065 - display: none;
1066 -}
1067 -.wowp .wowp-pro .wowp-fieldset__header {
1068 - padding-inline: 1.5rem;
1069 -}
1070 -.wowp .wowp-pro__features {
1071 - display: grid;
1072 - grid-template-columns: repeat(1, minmax(0, 1fr));
1073 - margin-top: 2.5rem;
1074 - max-width: 96rem;
1031 +
1032 +.CodeMirror {
1033 + border: 1px solid var(--wowp-border);
1034 + font-size: 13px;
1075 1035 width: 100%;
1076 - margin-inline: auto;
1077 - gap: 2rem;
1078 - padding-inline: 0.5rem;
1036 + min-height: 60vh !important;
1037 + height: calc(100vh - 295px) !important;
1038 + box-sizing: border-box;
1079 1039 }
1080 -@media (width >= 80rem) {
1081 - .wowp .wowp-pro__features {
1082 - grid-template-columns: repeat(2, minmax(0, 1fr));
1083 - }
1040 +
1041 +.wpcoder-global-php .CodeMirror-sizer:before {
1042 + content: "<?php\a defined( 'ABSPATH' ) || exit;\a\a";
1043 + white-space: pre;
1084 1044 }
1085 -.wowp .wowp-pro__feature {
1086 - display: flex;
1087 - gap: 1rem;
1045 +
1046 +.wpcoder-global-php .CodeMirror-sizer:before {
1047 + color: #848A8A;
1048 + position: absolute;
1088 1049 }
1089 -.wowp .wowp-pro-feature__icon {
1090 - width: 3rem;
1091 - height: 3rem;
1092 - display: flex;
1093 - align-items: center;
1094 - justify-content: center;
1095 - box-shadow: var(--wowp-shadow);
1096 - border-radius: 0.25rem;
1050 +
1051 +.wpcoder-global-php .CodeMirror-lines {
1052 + padding-top: 50px;
1097 1053 }
1098 -.wowp .wowp-pro-feature__icon span {
1099 - font-size: 1.5rem;
1100 - color: var(--wowp-gray-900);
1054 +
1055 +.highlighted-gutter {
1056 + background-color: #e8f2ff;
1057 + border-left: 5px solid var(--wowp-orange);
1101 1058 }
1102 -.wowp .wowp-pro-feature__content {
1103 - display: flex;
1104 - flex-direction: column;
1105 - gap: 0.25rem;
1106 - flex: 1;
1107 -}
1108 -.wowp .wowp-pro-feature__title {
1109 - color: var(--wowp-gray-900);
1110 - font-weight: 700;
1111 - font-size: 1.25rem;
1112 - line-height: 1.75rem;
1113 -}
1114 -.wowp .wowp-pro-feature__desc {
1115 - color: var(--wowp-gray-500);
1116 - font-weight: 300;
1117 - font-size: 1.25rem;
1118 - line-height: 1.75rem;
1119 -}
1120 1059
1121 1060 .wowp-notification {
1122 - --_color: var(--wowp-gray-900);
1061 + --notification-color: var(--wowp-dark);
1123 1062 position: relative;
1124 - background-color: color-mix(in srgb, var(--_color) 7%, white);
1063 + background-color: color-mix(in srgb, var(--notification-color) 7%, white);
1125 1064 border-width: 1px;
1126 1065 border-style: solid;
1127 - border-color: var(--_color);
1066 + border-color: var(--notification-color);
1128 1067 padding-block: 1.25rem;
1129 1068 padding-inline: 3rem 1.25rem;
1130 1069 border-radius: 4px;
1131 - margin-block: 1rem;
1070 + margin-block: 15px;
1132 1071 }
1133 1072 .wowp-notification:before {
1134 1073 position: absolute;
1135 1074 left: 0.5rem;
@@ -1134,9 +1073,9 @@
1134 1073 position: absolute;
1135 1074 left: 0.5rem;
1136 1075 top: 50%;
1137 1076 transform: translateY(-50%);
1138 - content: "";
1077 + content: "";
1139 1078 font-family: dashicons;
1140 1079 font-size: 1.5rem;
1141 1080 width: 2rem;
1142 1081 height: 2rem;
@@ -1142,9 +1081,9 @@
1142 1081 height: 2rem;
1143 1082 display: flex;
1144 1083 align-items: center;
1145 1084 justify-content: center;
1146 - color: var(--_color);
1085 + color: var(--notification-color);
1147 1086 }
1148 1087 .wowp-notification:after {
1149 1088 position: absolute;
1150 1089 content: "";
@@ -1153,92 +1092,36 @@
1153 1092 transform: translateY(-50%);
1154 1093 height: 2rem;
1155 1094 width: 3px;
1156 1095 border-radius: 0 3px 3px 0;
1157 - background-color: var(--_color);
1096 + background-color: var(--notification-color);
1158 1097 }
1159 -.wowp-notification.notification-info {
1160 - --_color: var(--wowp-color-blue);
1098 +.wowp-notification.-info {
1099 + --notification-color: var(--wowp-blue);
1161 1100 }
1162 -.wowp-notification.notification-info:before {
1101 +.wowp-notification.-info:before {
1163 1102 content: "";
1164 1103 }
1165 -.wowp-notification.notification-warning {
1166 - --_color: var(--wowp-color-yellow);
1104 +.wowp-notification.-warning {
1105 + --notification-color: var(--wowp-yellow);
1167 1106 }
1168 -.wowp-notification.notification-warning:before {
1107 +.wowp-notification.-warning:before {
1169 1108 content: "";
1170 1109 }
1171 -.wowp-notification.notification-error {
1172 - --_color: var(--wowp-color-red);
1110 +.wowp-notification.-error {
1111 + --notification-color: var(--wowp-danger);
1173 1112 }
1174 -.wowp-notification.notification-error:before {
1113 +.wowp-notification.-error:before {
1175 1114 content: "";
1176 1115 }
1177 -.wowp-notification.notification-lock {
1178 - --_color: var(--wowp-color-red);
1116 +.wowp-notification.-lock {
1117 + --notification-color: var(--wowp-danger);
1179 1118 }
1180 -.wowp-notification.notification-lock:before {
1119 +.wowp-notification.-lock:before {
1181 1120 content: "";
1182 1121 }
1183 -.wowp-notification.notification-success {
1184 - --_color: var(--wowp-color-green);
1122 +.wowp-notification.-success {
1123 + --notification-color: var(--wowp-success);
1185 1124 }
1186 -.wowp-notification.notification-success:before {
1125 +.wowp-notification.-success:before {
1187 1126 content: "";
1188 -}
1189 -
1190 -.wowp-list {
1191 - padding: 50px 46px 50px 16px;
1192 -}
1193 -.wowp-list .wowp-field input[type=text] {
1194 - min-width: unset;
1195 - width: auto;
1196 -}
1197 -
1198 -.wowp-toogle {
1199 - display: flex;
1200 - align-items: center;
1201 - position: relative;
1202 - text-decoration: none;
1203 - color: #ffffff;
1204 - width: 40px;
1205 - height: 28px;
1206 - border-radius: 50px;
1207 - padding: 0 4px;
1208 -}
1209 -.wowp-toogle:focus, .wowp-toogle:hover {
1210 - color: #ffffff;
1211 -}
1212 -
1213 -.wowp-toogle span {
1214 - height: 20px;
1215 - width: 20px;
1216 - display: flex;
1217 - align-items: center;
1218 - justify-content: center;
1219 - border-radius: 50%;
1220 - font-size: 8px;
1221 -}
1222 -
1223 -.wowp-toogle.is-on {
1224 - background-color: color-mix(in srgb, var(--wowp-color-green) 20%, white);
1225 -}
1226 -
1227 -.wowp-toogle.is-on span {
1228 - background-color: var(--wowp-color-green);
1229 -}
1230 -.wowp-toogle.is-on:focus span, .wowp-toogle.is-on:hover span {
1231 - background-color: color-mix(in srgb, var(--wowp-color-green) 90%, black);
1232 -}
1233 -
1234 -.wowp-toogle.is-off {
1235 - flex-direction: row-reverse;
1236 - background-color: color-mix(in srgb, var(--wowp-color-red) 20%, white);
1237 -}
1238 -
1239 -.wowp-toogle.is-off span {
1240 - background-color: var(--wowp-color-red);
1241 -}
1242 -.wowp-toogle.is-off:focus span, .wowp-toogle.is-off:hover span {
1243 - background-color: color-mix(in srgb, var(--wowp-color-red) 90%, black);
1244 1127 }