← All changes
|
includes/extensions/Custom_Code_Manager/assets/admin.css
+1011
-191
51.1.44
→
51.1.87
View file →
| @@ -9,76 +9,455 @@ | ||
| 9 | 9 | |
| 10 | 10 | :root { |
| 11 | 11 | --kng-v3-primary: #0071e3; |
| 12 | 12 | --kng-v3-primary-hover: #0077ed; |
| 13 | + --kng-v3-primary-light: rgba(0, 113, 227, 0.15); | |
| 13 | 14 | --kng-v3-danger: #ff3b30; |
| 15 | + --kng-v3-danger-light: rgba(255, 59, 48, 0.12); | |
| 14 | 16 | --kng-v3-success: #34c759; |
| 17 | + --kng-v3-success-light: rgba(52, 199, 89, 0.12); | |
| 15 | 18 | --kng-v3-warning: #ff9500; |
| 16 | 19 | --kng-v3-accent: #bf5af2; |
| 17 | 20 | |
| 18 | 21 | --kng-v3-bg: #f5f5f7; |
| 22 | + --kng-v3-bg-secondary: #ebebed; | |
| 19 | 23 | --kng-v3-card-bg: #ffffff; |
| 20 | 24 | --kng-v3-text: #1d1d1f; |
| 21 | 25 | --kng-v3-muted: #86868b; |
| 22 | 26 | --kng-v3-border: rgba(0, 0, 0, 0.08); |
| 23 | 27 | --kng-v3-border-hover: rgba(0, 0, 0, 0.16); |
| 28 | + --kng-v3-divider: rgba(0, 0, 0, 0.06); | |
| 24 | 29 | |
| 25 | 30 | --kng-v3-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; |
| 26 | 31 | --kng-v3-font-mono: 'SF Mono', Monaco, Consolas, monospace; |
| 32 | + --kng-v3-mono: 'SF Mono', Monaco, Consolas, monospace; | |
| 27 | 33 | } |
| 28 | 34 | |
| 29 | -/* Dark Mode */ | |
| 30 | -.kng-v3-dark { | |
| 35 | +/* Dark Mode Variables */ | |
| 36 | +.kng-v3-dark, | |
| 37 | +body.ka-v3-dark { | |
| 31 | 38 | --kng-v3-bg: #000000; |
| 39 | + --kng-v3-bg-secondary: #1c1c1e; | |
| 32 | 40 | --kng-v3-card-bg: #1c1c1e; |
| 33 | 41 | --kng-v3-text: #f5f5f7; |
| 34 | 42 | --kng-v3-muted: #98989d; |
| 35 | 43 | --kng-v3-border: rgba(255, 255, 255, 0.12); |
| 36 | 44 | --kng-v3-border-hover: rgba(255, 255, 255, 0.24); |
| 45 | + --kng-v3-divider: rgba(255, 255, 255, 0.08); | |
| 46 | + --kng-v3-primary-light: rgba(0, 113, 227, 0.25); | |
| 47 | + --kng-v3-danger-light: rgba(255, 59, 48, 0.2); | |
| 48 | + --kng-v3-success-light: rgba(52, 199, 89, 0.2); | |
| 37 | 49 | } |
| 38 | 50 | |
| 39 | -@media (prefers-color-scheme: dark) { | |
| 40 | - :root:not(.kng-v3-light) { | |
| 41 | - --kng-v3-bg: #000000; | |
| 42 | - --kng-v3-card-bg: #1c1c1e; | |
| 43 | - --kng-v3-text: #f5f5f7; | |
| 44 | - --kng-v3-muted: #98989d; | |
| 45 | - --kng-v3-border: rgba(255, 255, 255, 0.12); | |
| 46 | - --kng-v3-border-hover: rgba(255, 255, 255, 0.24); | |
| 47 | - } | |
| 48 | - | |
| 49 | - /* Dark mode specific overrides */ | |
| 50 | - .kng-cc-admin .kng-v3-input, | |
| 51 | - .kng-cc-admin .kng-v3-select, | |
| 52 | - .kng-cc-admin .kng-v3-textarea, | |
| 53 | - .kng-cc-admin .kng-cc-title-input, | |
| 54 | - .kng-cc-admin select, | |
| 55 | - .kng-cc-admin input[type="text"], | |
| 56 | - .kng-cc-admin input[type="number"], | |
| 57 | - .kng-cc-admin input[type="url"], | |
| 58 | - .kng-cc-admin textarea { | |
| 59 | - background: #2c2c2e !important; | |
| 60 | - color: #f5f5f7 !important; | |
| 61 | - border-color: rgba(255, 255, 255, 0.12) !important; | |
| 62 | - } | |
| 63 | - | |
| 64 | - .kng-cc-admin .kng-cc-settings-card-header, | |
| 65 | - .kng-cc-admin .kng-cc-sidebar-title { | |
| 66 | - background: rgba(255, 255, 255, 0.04) !important; | |
| 67 | - } | |
| 68 | - | |
| 69 | - .kng-cc-admin .kng-cc-table thead { | |
| 70 | - background: rgba(255, 255, 255, 0.04) !important; | |
| 71 | - } | |
| 51 | +/* ============================================ | |
| 52 | + Segmented Theme Control | |
| 53 | + ============================================ */ | |
| 54 | + | |
| 55 | +.kng-cc-admin .ka-v3-segmented { | |
| 56 | + position: relative; | |
| 57 | + display: grid; | |
| 58 | + grid-template-columns: 1fr 1fr 1fr; | |
| 59 | + align-items: center; | |
| 60 | + padding: 2px; | |
| 61 | + border-radius: 980px; | |
| 62 | + background: rgba(0, 0, 0, 0.06); | |
| 63 | + border: 1px solid rgba(0, 0, 0, 0.06); | |
| 64 | + min-width: 240px; | |
| 65 | + height: 40px; | |
| 66 | + overflow: hidden; | |
| 72 | 67 | } |
| 73 | 68 | |
| 69 | +.kng-cc-admin .ka-v3-segmented-indicator { | |
| 70 | + position: absolute; | |
| 71 | + top: 2px; | |
| 72 | + bottom: 2px; | |
| 73 | + left: 2px; | |
| 74 | + width: calc(33.333% - 2px); | |
| 75 | + border-radius: 980px; | |
| 76 | + background: rgba(255, 255, 255, 0.92); | |
| 77 | + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); | |
| 78 | + transform: translateX(0); | |
| 79 | + transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1); | |
| 80 | + z-index: 0; | |
| 81 | +} | |
| 82 | + | |
| 83 | +.kng-cc-admin .ka-v3-segmented[data-active="dark"] .ka-v3-segmented-indicator { | |
| 84 | + transform: translateX(100%); | |
| 85 | +} | |
| 86 | + | |
| 87 | +.kng-cc-admin .ka-v3-segmented[data-active="auto"] .ka-v3-segmented-indicator { | |
| 88 | + transform: translateX(200%); | |
| 89 | +} | |
| 90 | + | |
| 91 | +.kng-cc-admin .ka-v3-segmented-btn { | |
| 92 | + position: relative; | |
| 93 | + z-index: 1; | |
| 94 | + height: 36px; | |
| 95 | + border: none; | |
| 96 | + background: transparent; | |
| 97 | + border-radius: 980px; | |
| 98 | + padding: 0 12px; | |
| 99 | + display: inline-flex; | |
| 100 | + align-items: center; | |
| 101 | + justify-content: center; | |
| 102 | + gap: 8px; | |
| 103 | + font-size: 13px; | |
| 104 | + font-weight: 500; | |
| 105 | + color: #1d1d1f; | |
| 106 | + cursor: pointer; | |
| 107 | + transition: color 0.25s ease, transform 0.25s ease; | |
| 108 | + user-select: none; | |
| 109 | + white-space: nowrap; | |
| 110 | +} | |
| 111 | + | |
| 112 | +.kng-cc-admin .ka-v3-segmented-btn:active { | |
| 113 | + transform: scale(0.98); | |
| 114 | +} | |
| 115 | + | |
| 116 | +.kng-cc-admin .ka-v3-segmented-icon { | |
| 117 | + font-size: 16px; | |
| 118 | + line-height: 1; | |
| 119 | +} | |
| 120 | + | |
| 121 | +.kng-cc-admin .ka-v3-segmented-btn[aria-pressed="false"] { | |
| 122 | + color: #86868b; | |
| 123 | +} | |
| 124 | + | |
| 74 | 125 | /* ============================================ |
| 126 | + Dark Mode Overrides | |
| 127 | + ============================================ */ | |
| 128 | + | |
| 129 | +/* Segmented control in dark */ | |
| 130 | +body.ka-v3-dark .kng-cc-admin .ka-v3-segmented { | |
| 131 | + background: rgba(255, 255, 255, 0.08); | |
| 132 | + border-color: rgba(255, 255, 255, 0.06); | |
| 133 | +} | |
| 134 | + | |
| 135 | +body.ka-v3-dark .kng-cc-admin .ka-v3-segmented-indicator { | |
| 136 | + background: #636366; | |
| 137 | + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); | |
| 138 | +} | |
| 139 | + | |
| 140 | +body.ka-v3-dark .kng-cc-admin .ka-v3-segmented-btn { | |
| 141 | + color: #f5f5f7; | |
| 142 | +} | |
| 143 | + | |
| 144 | +body.ka-v3-dark .kng-cc-admin .ka-v3-segmented-btn[aria-pressed="false"] { | |
| 145 | + color: #8e8e93; | |
| 146 | +} | |
| 147 | + | |
| 148 | +/* Base page background */ | |
| 149 | +body.ka-v3-dark.toplevel_page_king-addons-custom-code { | |
| 150 | + background: #000000 !important; | |
| 151 | +} | |
| 152 | + | |
| 153 | +body.ka-v3-dark.toplevel_page_king-addons-custom-code #wpcontent, | |
| 154 | +body.ka-v3-dark.toplevel_page_king-addons-custom-code #wpbody, | |
| 155 | +body.ka-v3-dark.toplevel_page_king-addons-custom-code #wpbody-content { | |
| 156 | + background: #000000 !important; | |
| 157 | +} | |
| 158 | + | |
| 159 | +/* Inputs & form elements */ | |
| 160 | +body.ka-v3-dark .kng-cc-admin .kng-v3-input, | |
| 161 | +body.ka-v3-dark .kng-cc-admin .kng-v3-select, | |
| 162 | +body.ka-v3-dark .kng-cc-admin .kng-v3-textarea, | |
| 163 | +body.ka-v3-dark .kng-cc-admin .kng-cc-title-input, | |
| 164 | +body.ka-v3-dark .kng-cc-admin select, | |
| 165 | +body.ka-v3-dark .kng-cc-admin input[type="text"], | |
| 166 | +body.ka-v3-dark .kng-cc-admin input[type="number"], | |
| 167 | +body.ka-v3-dark .kng-cc-admin input[type="url"], | |
| 168 | +body.ka-v3-dark .kng-cc-admin textarea { | |
| 169 | + background-color: #2c2c2e !important; | |
| 170 | + color: #f5f5f7 !important; | |
| 171 | + border-color: transparent !important; | |
| 172 | +} | |
| 173 | + | |
| 174 | +body.ka-v3-dark .kng-cc-admin .kng-v3-input:focus, | |
| 175 | +body.ka-v3-dark .kng-cc-admin .kng-v3-select:focus, | |
| 176 | +body.ka-v3-dark .kng-cc-admin .kng-v3-textarea:focus, | |
| 177 | +body.ka-v3-dark .kng-cc-admin input[type="text"]:focus, | |
| 178 | +body.ka-v3-dark .kng-cc-admin input[type="number"]:focus, | |
| 179 | +body.ka-v3-dark .kng-cc-admin select:focus, | |
| 180 | +body.ka-v3-dark .kng-cc-admin textarea:focus { | |
| 181 | + border-color: var(--kng-v3-primary) !important; | |
| 182 | +} | |
| 183 | + | |
| 184 | +/* Table */ | |
| 185 | +body.ka-v3-dark .kng-cc-admin .kng-cc-table thead { | |
| 186 | + background: rgba(255, 255, 255, 0.04) !important; | |
| 187 | +} | |
| 188 | + | |
| 189 | +body.ka-v3-dark .kng-cc-admin .kng-cc-table tbody tr:hover { | |
| 190 | + background: rgba(255, 255, 255, 0.04); | |
| 191 | +} | |
| 192 | + | |
| 193 | +/* Buttons */ | |
| 194 | +body.ka-v3-dark .kng-cc-admin .kng-v3-btn--secondary { | |
| 195 | + background: rgba(255, 255, 255, 0.1); | |
| 196 | + color: #f5f5f7; | |
| 197 | +} | |
| 198 | + | |
| 199 | +body.ka-v3-dark .kng-cc-admin .kng-v3-btn--secondary:hover { | |
| 200 | + background: rgba(255, 255, 255, 0.16); | |
| 201 | +} | |
| 202 | + | |
| 203 | +body.ka-v3-dark .kng-cc-admin .kng-v3-btn--ghost { | |
| 204 | + color: #64d2ff; | |
| 205 | +} | |
| 206 | + | |
| 207 | +body.ka-v3-dark .kng-cc-admin .kng-v3-btn--ghost:hover { | |
| 208 | + background: rgba(100, 210, 255, 0.1); | |
| 209 | + color: #64d2ff; | |
| 210 | +} | |
| 211 | + | |
| 212 | +/* Edit action button */ | |
| 213 | +body.ka-v3-dark .kng-cc-admin .kng-cc-action-btn--edit { | |
| 214 | + background: var(--kng-v3-primary); | |
| 215 | + color: #fff; | |
| 216 | +} | |
| 217 | + | |
| 218 | +body.ka-v3-dark .kng-cc-admin .kng-cc-action-btn--edit:hover { | |
| 219 | + background: var(--kng-v3-primary-hover); | |
| 220 | + color: #fff; | |
| 221 | +} | |
| 222 | + | |
| 223 | +/* Action buttons */ | |
| 224 | +body.ka-v3-dark .kng-cc-admin .kng-cc-action-btn:hover { | |
| 225 | + background: rgba(255, 255, 255, 0.08); | |
| 226 | +} | |
| 227 | + | |
| 228 | +/* Checkbox */ | |
| 229 | +body.ka-v3-dark .kng-cc-admin .kng-cc-checkbox-custom { | |
| 230 | + background: #2c2c2e; | |
| 231 | + border-color: rgba(255, 255, 255, 0.2); | |
| 232 | +} | |
| 233 | + | |
| 234 | +/* Scope & type badges */ | |
| 235 | +body.ka-v3-dark .kng-cc-admin .kng-cc-scope-badge { | |
| 236 | + background: rgba(255, 255, 255, 0.08); | |
| 237 | + color: #98989d; | |
| 238 | +} | |
| 239 | + | |
| 240 | +body.ka-v3-dark .kng-cc-admin .kng-cc-type-css { | |
| 241 | + background: rgba(0, 113, 227, 0.2); | |
| 242 | +} | |
| 243 | + | |
| 244 | +body.ka-v3-dark .kng-cc-admin .kng-cc-type-js { | |
| 245 | + background: rgba(255, 149, 0, 0.2); | |
| 246 | +} | |
| 247 | + | |
| 248 | +body.ka-v3-dark .kng-cc-admin .kng-cc-type-html { | |
| 249 | + background: rgba(191, 90, 242, 0.2); | |
| 250 | +} | |
| 251 | + | |
| 252 | +/* Code editor */ | |
| 253 | +body.ka-v3-dark .kng-cc-admin .CodeMirror { | |
| 254 | + background: #1c1c1e; | |
| 255 | + color: #f5f5f7; | |
| 256 | +} | |
| 257 | + | |
| 258 | +body.ka-v3-dark .kng-cc-admin .CodeMirror-gutters { | |
| 259 | + background: #1c1c1e; | |
| 260 | + border-color: rgba(255, 255, 255, 0.06); | |
| 261 | +} | |
| 262 | + | |
| 263 | +body.ka-v3-dark .kng-cc-admin .CodeMirror-linenumber { | |
| 264 | + color: #636366; | |
| 265 | +} | |
| 266 | + | |
| 267 | +body.ka-v3-dark .kng-cc-code-editor-wrap .CodeMirror-selected { | |
| 268 | + background: rgba(0, 113, 227, 0.35) !important; | |
| 269 | +} | |
| 270 | + | |
| 271 | +body.ka-v3-dark .kng-cc-code-editor-wrap .CodeMirror-focused .CodeMirror-selected { | |
| 272 | + background: rgba(0, 113, 227, 0.4) !important; | |
| 273 | +} | |
| 274 | + | |
| 275 | +body.ka-v3-dark .kng-cc-admin .CodeMirror-cursor { | |
| 276 | + border-left-color: #f5f5f7; | |
| 277 | +} | |
| 278 | + | |
| 279 | +/* Radio cards */ | |
| 280 | +body.ka-v3-dark .kng-cc-admin .kng-cc-radio-card { | |
| 281 | + background: transparent; | |
| 282 | +} | |
| 283 | + | |
| 284 | +body.ka-v3-dark .kng-cc-admin .kng-cc-radio-card.is-selected { | |
| 285 | + border-color: var(--kng-v3-primary); | |
| 286 | + background: rgba(0, 113, 227, 0.1); | |
| 287 | +} | |
| 288 | + | |
| 289 | +/* Pro upsell */ | |
| 290 | +body.ka-v3-dark .kng-cc-admin .kng-cc-pro-upsell-content { | |
| 291 | + background: linear-gradient(135deg, rgba(191, 90, 242, 0.08) 0%, rgba(0, 113, 227, 0.08) 100%); | |
| 292 | + border-color: rgba(191, 90, 242, 0.2); | |
| 293 | +} | |
| 294 | + | |
| 295 | +body.ka-v3-dark .kng-cc-admin .kng-cc-pro-upsell-content:hover { | |
| 296 | + border-color: rgba(191, 90, 242, 0.35); | |
| 297 | + box-shadow: 0 4px 20px rgba(191, 90, 242, 0.1); | |
| 298 | +} | |
| 299 | + | |
| 300 | +body.ka-v3-dark .kng-cc-admin .kng-cc-pro-upsell-icon { | |
| 301 | + background: rgba(191, 90, 242, 0.15); | |
| 302 | +} | |
| 303 | + | |
| 304 | +/* Import dropzone */ | |
| 305 | +body.ka-v3-dark .kng-cc-admin .kng-cc-import-dropzone { | |
| 306 | + background: #2c2c2e; | |
| 307 | + border-color: rgba(255, 255, 255, 0.12); | |
| 308 | +} | |
| 309 | + | |
| 310 | +body.ka-v3-dark .kng-cc-admin .kng-cc-import-dropzone:hover { | |
| 311 | + border-color: var(--kng-v3-primary); | |
| 312 | + background: rgba(0, 113, 227, 0.06); | |
| 313 | + box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.08); | |
| 314 | +} | |
| 315 | + | |
| 316 | +/* Settings & IE cards */ | |
| 317 | +body.ka-v3-dark .kng-cc-admin .kng-cc-settings-card { | |
| 318 | + border-color: rgba(255, 255, 255, 0.08); | |
| 319 | + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); | |
| 320 | +} | |
| 321 | + | |
| 322 | +body.ka-v3-dark .kng-cc-admin .kng-cc-settings-card:hover { | |
| 323 | + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); | |
| 324 | +} | |
| 325 | + | |
| 326 | +body.ka-v3-dark .kng-cc-admin .kng-cc-ie-card { | |
| 327 | + border-color: rgba(255, 255, 255, 0.08); | |
| 328 | + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); | |
| 329 | +} | |
| 330 | + | |
| 331 | +body.ka-v3-dark .kng-cc-admin .kng-cc-ie-card:hover { | |
| 332 | + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); | |
| 333 | +} | |
| 334 | + | |
| 335 | +body.ka-v3-dark .kng-cc-admin .kng-cc-ie-card-icon { | |
| 336 | + background: rgba(255, 255, 255, 0.06); | |
| 337 | +} | |
| 338 | + | |
| 339 | +body.ka-v3-dark .kng-cc-admin .kng-cc-import-results-content { | |
| 340 | + border-color: rgba(255, 255, 255, 0.08); | |
| 341 | + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); | |
| 342 | +} | |
| 343 | + | |
| 344 | +/* Empty state */ | |
| 345 | +body.ka-v3-dark .kng-cc-admin .kng-cc-empty { | |
| 346 | + border-color: rgba(255, 255, 255, 0.1); | |
| 347 | +} | |
| 348 | + | |
| 349 | +body.ka-v3-dark .kng-cc-admin .kng-cc-empty-icon { | |
| 350 | + background: rgba(255, 255, 255, 0.06); | |
| 351 | +} | |
| 352 | + | |
| 353 | +/* Table wrap, toolbar */ | |
| 354 | +body.ka-v3-dark .kng-cc-admin .kng-cc-table-wrap { | |
| 355 | + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); | |
| 356 | +} | |
| 357 | + | |
| 358 | +body.ka-v3-dark .kng-cc-admin .kng-cc-toolbar { | |
| 359 | + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); | |
| 360 | +} | |
| 361 | + | |
| 362 | +/* Header title gradient */ | |
| 363 | +body.ka-v3-dark .kng-cc-admin .kng-cc-title { | |
| 364 | + background: linear-gradient(135deg, #f5f5f7 0%, #a1a1a6 100%); | |
| 365 | + -webkit-background-clip: text; | |
| 366 | + background-clip: text; | |
| 367 | +} | |
| 368 | + | |
| 369 | +/* Popup dark mode */ | |
| 370 | +body.ka-v3-dark .kng-cc-pro-popup { | |
| 371 | + background: #2c2c2e; | |
| 372 | + box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); | |
| 373 | +} | |
| 374 | + | |
| 375 | +body.ka-v3-dark .kng-cc-pro-popup-close:hover { | |
| 376 | + background: rgba(255, 255, 255, 0.08); | |
| 377 | +} | |
| 378 | + | |
| 379 | +body.ka-v3-dark .kng-cc-pro-popup-features { | |
| 380 | + background: rgba(255, 255, 255, 0.06); | |
| 381 | + border-color: rgba(255, 255, 255, 0.08); | |
| 382 | +} | |
| 383 | + | |
| 384 | +/* Pro section dark */ | |
| 385 | +body.ka-v3-dark .kng-cc-admin .kng-cc-pro-section { | |
| 386 | + background: linear-gradient(135deg, rgba(191, 90, 242, 0.06) 0%, rgba(0, 113, 227, 0.06) 100%); | |
| 387 | + border-color: rgba(191, 90, 242, 0.18); | |
| 388 | +} | |
| 389 | + | |
| 390 | +body.ka-v3-dark .kng-cc-admin .kng-cc-pro-box-icon { | |
| 391 | + background: linear-gradient(135deg, rgba(191, 90, 242, 0.18), rgba(0, 113, 227, 0.18)); | |
| 392 | +} | |
| 393 | + | |
| 394 | +/* Search results dropdown dark */ | |
| 395 | +body.ka-v3-dark .kng-cc-admin .kng-cc-rule-search-results { | |
| 396 | + background: #2c2c2e; | |
| 397 | + border-color: rgba(255, 255, 255, 0.12); | |
| 398 | + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); | |
| 399 | +} | |
| 400 | + | |
| 401 | +body.ka-v3-dark .kng-cc-admin .kng-cc-search-result:hover { | |
| 402 | + background: rgba(0, 113, 227, 0.15); | |
| 403 | +} | |
| 404 | + | |
| 405 | +/* Type tab active in dark */ | |
| 406 | +body.ka-v3-dark .kng-cc-admin .kng-cc-type-tab.is-active { | |
| 407 | + background: rgba(255, 255, 255, 0.1); | |
| 408 | + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); | |
| 409 | +} | |
| 410 | + | |
| 411 | +body.ka-v3-dark .kng-cc-admin .kng-cc-type-tab:hover:not(:disabled) { | |
| 412 | + background: rgba(255, 255, 255, 0.06); | |
| 413 | +} | |
| 414 | + | |
| 415 | +/* Radio card selected glow in dark */ | |
| 416 | +body.ka-v3-dark .kng-cc-admin .kng-cc-radio-card.is-selected .kng-cc-radio-card-content, | |
| 417 | +body.ka-v3-dark .kng-cc-admin .kng-cc-radio-card input:checked + .kng-cc-radio-card-content { | |
| 418 | + box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12); | |
| 419 | +} | |
| 420 | + | |
| 421 | +/* Sidebar section dark */ | |
| 422 | +body.ka-v3-dark .kng-cc-admin .kng-cc-sidebar-section { | |
| 423 | + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); | |
| 424 | +} | |
| 425 | + | |
| 426 | +/* Code section dark */ | |
| 427 | +body.ka-v3-dark .kng-cc-admin .kng-cc-code-section { | |
| 428 | + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); | |
| 429 | +} | |
| 430 | + | |
| 431 | +body.ka-v3-dark .kng-cc-admin .kng-cc-title-section { | |
| 432 | + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); | |
| 433 | +} | |
| 434 | + | |
| 435 | +body.ka-v3-dark .kng-cc-admin .kng-cc-notes-section { | |
| 436 | + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); | |
| 437 | +} | |
| 438 | + | |
| 439 | +/* Back button */ | |
| 440 | +body.ka-v3-dark .kng-cc-admin .kng-cc-back-btn { | |
| 441 | + color: #64d2ff; | |
| 442 | +} | |
| 443 | + | |
| 444 | +/* Toggle */ | |
| 445 | +body.ka-v3-dark .kng-cc-admin .kng-v3-toggle-slider { | |
| 446 | + background: #48484a; | |
| 447 | +} | |
| 448 | + | |
| 449 | +body.ka-v3-dark .kng-cc-admin input:checked + .kng-v3-toggle-slider { | |
| 450 | + background: var(--kng-v3-success); | |
| 451 | +} | |
| 452 | + | |
| 453 | +/* ============================================ | |
| 75 | 454 | Base Reset |
| 76 | 455 | ============================================ */ |
| 77 | 456 | |
| 78 | -body.king-addons_page_king-addons-custom-code #wpcontent, | |
| 79 | -body.king-addons_page_king-addons-custom-code #wpbody, | |
| 80 | -body.king-addons_page_king-addons-custom-code #wpbody-content { | |
| 457 | +body.toplevel_page_king-addons-custom-code #wpcontent, | |
| 458 | +body.toplevel_page_king-addons-custom-code #wpbody, | |
| 459 | +body.toplevel_page_king-addons-custom-code #wpbody-content { | |
| 81 | 460 | background: var(--kng-v3-bg) !important; |
| 82 | 461 | padding: 0 !important; |
| 83 | 462 | } |
| 84 | 463 | |
| @@ -89,9 +468,9 @@ | ||
| 89 | 468 | .kng-cc-admin { |
| 90 | 469 | font-family: var(--kng-v3-font); |
| 91 | 470 | max-width: 1400px; |
| 92 | 471 | margin: 0 auto; |
| 93 | - padding: 60px 40px; | |
| 472 | + padding: 40px 40px 80px; | |
| 94 | 473 | color: var(--kng-v3-text); |
| 95 | 474 | } |
| 96 | 475 | |
| 97 | 476 | .kng-cc-admin * { |
| @@ -103,19 +482,44 @@ | ||
| 103 | 482 | ============================================ */ |
| 104 | 483 | |
| 105 | 484 | .kng-cc-header { |
| 106 | 485 | display: flex; |
| 486 | + flex-wrap: wrap; | |
| 107 | 487 | justify-content: space-between; |
| 108 | 488 | align-items: flex-start; |
| 109 | 489 | margin-bottom: 48px; |
| 490 | + gap: 24px; | |
| 110 | 491 | } |
| 111 | 492 | |
| 112 | 493 | .kng-cc-header-left { |
| 494 | + /* Keep the title readable instead of letting the action group squeeze it; | |
| 495 | + below this width the header wraps onto two rows. */ | |
| 496 | + flex: 1 1 420px; | |
| 497 | + min-width: 0; | |
| 498 | +} | |
| 499 | + | |
| 500 | +.kng-cc-header-left { | |
| 113 | 501 | display: flex; |
| 114 | - flex-direction: column; | |
| 115 | - gap: 8px; | |
| 502 | + align-items: flex-start; | |
| 503 | + gap: 20px; | |
| 116 | 504 | } |
| 117 | 505 | |
| 506 | +.kng-cc-header-icon { | |
| 507 | + width: 64px; | |
| 508 | + height: 64px; | |
| 509 | + background: linear-gradient(135deg, #0071e3 0%, #0077ed 100%); | |
| 510 | + border-radius: 16px; | |
| 511 | + display: flex; | |
| 512 | + align-items: center; | |
| 513 | + justify-content: center; | |
| 514 | + flex-shrink: 0; | |
| 515 | +} | |
| 516 | + | |
| 517 | +.kng-cc-header-icon svg { | |
| 518 | + color: #fff; | |
| 519 | + stroke: #fff; | |
| 520 | +} | |
| 521 | + | |
| 118 | 522 | .kng-cc-header-right { |
| 119 | 523 | display: flex; |
| 120 | 524 | align-items: center; |
| 121 | 525 | gap: 12px; |
| @@ -128,9 +532,9 @@ | ||
| 128 | 532 | color: var(--kng-v3-primary); |
| 129 | 533 | text-decoration: none; |
| 130 | 534 | font-size: 15px; |
| 131 | 535 | font-weight: 400; |
| 132 | - transition: all 0.2s ease; | |
| 536 | + transition: color 0.2s ease; | |
| 133 | 537 | margin-bottom: 8px; |
| 134 | 538 | } |
| 135 | 539 | |
| 136 | 540 | .kng-cc-back-btn:hover { |
| @@ -145,11 +549,14 @@ | ||
| 145 | 549 | .kng-cc-title { |
| 146 | 550 | font-size: 48px; |
| 147 | 551 | font-weight: 700; |
| 148 | 552 | letter-spacing: -0.015em; |
| 149 | - margin: 0; | |
| 553 | + margin: 0 0 8px; | |
| 150 | 554 | line-height: 1.1; |
| 151 | - color: var(--kng-v3-text); | |
| 555 | + background: linear-gradient(135deg, #1d1d1f 0%, #515154 100%); | |
| 556 | + -webkit-background-clip: text; | |
| 557 | + -webkit-text-fill-color: transparent; | |
| 558 | + background-clip: text; | |
| 152 | 559 | } |
| 153 | 560 | |
| 154 | 561 | .kng-cc-subtitle { |
| 155 | 562 | font-size: 19px; |
| @@ -154,31 +561,21 @@ | ||
| 154 | 561 | .kng-cc-subtitle { |
| 155 | 562 | font-size: 19px; |
| 156 | 563 | font-weight: 400; |
| 157 | 564 | color: var(--kng-v3-muted); |
| 158 | - margin: 4px 0 0; | |
| 565 | + margin: 0; | |
| 159 | 566 | line-height: 1.5; |
| 160 | 567 | } |
| 161 | 568 | |
| 162 | -.kng-cc-count { | |
| 163 | - font-size: 19px; | |
| 164 | - font-weight: 400; | |
| 569 | +.kng-cc-meta { | |
| 570 | + font-size: 13px; | |
| 571 | + font-weight: 500; | |
| 165 | 572 | color: var(--kng-v3-muted); |
| 166 | - margin: 4px 0 0; | |
| 167 | - line-height: 1.5; | |
| 573 | + margin: 6px 0 0; | |
| 574 | + line-height: 1.4; | |
| 575 | + opacity: 0.7; | |
| 168 | 576 | } |
| 169 | 577 | |
| 170 | -.kng-cc-limit-badge { | |
| 171 | - display: inline-flex; | |
| 172 | - padding: 6px 12px; | |
| 173 | - font-size: 12px; | |
| 174 | - font-weight: 600; | |
| 175 | - color: var(--kng-v3-warning); | |
| 176 | - background: rgba(255, 149, 0, 0.12); | |
| 177 | - border-radius: 100px; | |
| 178 | - margin-left: 12px; | |
| 179 | -} | |
| 180 | - | |
| 181 | 578 | /* ============================================ |
| 182 | 579 | Theme Switcher |
| 183 | 580 | ============================================ */ |
| 184 | 581 | |
| @@ -202,9 +599,9 @@ | ||
| 202 | 599 | background: transparent; |
| 203 | 600 | border: none; |
| 204 | 601 | color: var(--kng-v3-muted); |
| 205 | 602 | cursor: pointer; |
| 206 | - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| 603 | + transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); | |
| 207 | 604 | position: relative; |
| 208 | 605 | } |
| 209 | 606 | |
| 210 | 607 | .kng-cc-theme-btn:hover { |
| @@ -236,12 +633,8 @@ | ||
| 236 | 633 | .kng-cc-admin { |
| 237 | 634 | transition: background-color 0.3s ease, color 0.3s ease; |
| 238 | 635 | } |
| 239 | 636 | |
| 240 | -.kng-cc-admin * { | |
| 241 | - transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; | |
| 242 | -} | |
| 243 | - | |
| 244 | 637 | /* ============================================ |
| 245 | 638 | Buttons |
| 246 | 639 | ============================================ */ |
| 247 | 640 | |
| @@ -253,9 +646,9 @@ | ||
| 253 | 646 | border-radius: 980px; |
| 254 | 647 | font-size: 15px; |
| 255 | 648 | font-weight: 400; |
| 256 | 649 | text-decoration: none; |
| 257 | - transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); | |
| 650 | + transition: background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1); | |
| 258 | 651 | cursor: pointer; |
| 259 | 652 | border: none; |
| 260 | 653 | white-space: nowrap; |
| 261 | 654 | } |
| @@ -291,8 +684,21 @@ | ||
| 291 | 684 | background: rgba(0, 113, 227, 0.08); |
| 292 | 685 | color: var(--kng-v3-primary-hover); |
| 293 | 686 | } |
| 294 | 687 | |
| 688 | +.kng-v3-btn--accent { | |
| 689 | + background: linear-gradient(135deg, #bf5af2 0%, #8944c6 100%); | |
| 690 | + color: #fff; | |
| 691 | + font-weight: 500; | |
| 692 | +} | |
| 693 | + | |
| 694 | +.kng-v3-btn--accent:hover { | |
| 695 | + background: linear-gradient(135deg, #c96ef5 0%, #9a55d3 100%); | |
| 696 | + color: #fff; | |
| 697 | + transform: scale(1.02); | |
| 698 | + box-shadow: 0 4px 16px rgba(191, 90, 242, 0.3); | |
| 699 | +} | |
| 700 | + | |
| 295 | 701 | .kng-v3-btn--sm { |
| 296 | 702 | padding: 10px 18px; |
| 297 | 703 | font-size: 14px; |
| 298 | 704 | } |
| @@ -309,21 +715,33 @@ | ||
| 309 | 715 | .kng-v3-input, |
| 310 | 716 | .kng-v3-select, |
| 311 | 717 | .kng-v3-textarea { |
| 312 | 718 | width: 100%; |
| 313 | - padding: 12px 16px; | |
| 314 | - font-size: 15px; | |
| 719 | + padding: 10px 14px; | |
| 720 | + font-size: 14px; | |
| 315 | 721 | font-family: var(--kng-v3-font); |
| 316 | 722 | color: var(--kng-v3-text); |
| 317 | - background-color: var(--kng-v3-card-bg); | |
| 318 | - border: 1px solid var(--kng-v3-border); | |
| 319 | - border-radius: 12px; | |
| 320 | - transition: all 0.2s ease; | |
| 723 | + background-color: var(--kng-v3-bg); | |
| 724 | + border: 1px solid transparent; | |
| 725 | + border-radius: 10px; | |
| 726 | + transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background-color 0.2s ease; | |
| 321 | 727 | outline: none; |
| 322 | 728 | -webkit-appearance: none; |
| 323 | 729 | appearance: none; |
| 324 | 730 | } |
| 325 | 731 | |
| 732 | +.kng-cc-admin input[type="text"], | |
| 733 | +.kng-cc-admin input[type="number"], | |
| 734 | +.kng-cc-admin input[type="url"], | |
| 735 | +.kng-cc-admin input[type="email"], | |
| 736 | +.kng-cc-admin select, | |
| 737 | +.kng-cc-admin textarea { | |
| 738 | + border: 1px solid transparent; | |
| 739 | + background-color: var(--kng-v3-bg); | |
| 740 | + border-radius: 10px; | |
| 741 | + box-shadow: none; | |
| 742 | +} | |
| 743 | + | |
| 326 | 744 | /* Ensure select dropdowns work properly */ |
| 327 | 745 | .kng-v3-select { |
| 328 | 746 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398989d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| 329 | 747 | background-repeat: no-repeat; |
| @@ -340,11 +758,22 @@ | ||
| 340 | 758 | .kng-v3-input:focus, |
| 341 | 759 | .kng-v3-select:focus, |
| 342 | 760 | .kng-v3-textarea:focus { |
| 343 | 761 | border-color: var(--kng-v3-primary); |
| 344 | - box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.08); | |
| 762 | + box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.08); | |
| 345 | 763 | } |
| 346 | 764 | |
| 765 | +.kng-cc-admin input[type="text"]:focus, | |
| 766 | +.kng-cc-admin input[type="number"]:focus, | |
| 767 | +.kng-cc-admin input[type="url"]:focus, | |
| 768 | +.kng-cc-admin input[type="email"]:focus, | |
| 769 | +.kng-cc-admin select:focus, | |
| 770 | +.kng-cc-admin textarea:focus { | |
| 771 | + border-color: var(--kng-v3-primary); | |
| 772 | + box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.08); | |
| 773 | + outline: none; | |
| 774 | +} | |
| 775 | + | |
| 347 | 776 | .kng-v3-label { |
| 348 | 777 | display: block; |
| 349 | 778 | font-size: 14px; |
| 350 | 779 | font-weight: 500; |
| @@ -392,9 +821,9 @@ | ||
| 392 | 821 | width: 44px; |
| 393 | 822 | height: 24px; |
| 394 | 823 | background: var(--kng-v3-border); |
| 395 | 824 | border-radius: 12px; |
| 396 | - transition: all 0.3s ease; | |
| 825 | + transition: background-color 0.3s ease; | |
| 397 | 826 | flex-shrink: 0; |
| 398 | 827 | } |
| 399 | 828 | |
| 400 | 829 | .kng-v3-toggle-slider::after { |
| @@ -406,9 +835,9 @@ | ||
| 406 | 835 | height: 20px; |
| 407 | 836 | background: #ffffff; |
| 408 | 837 | border-radius: 50%; |
| 409 | 838 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); |
| 410 | - transition: all 0.3s ease; | |
| 839 | + transition: transform 0.3s ease; | |
| 411 | 840 | } |
| 412 | 841 | |
| 413 | 842 | .kng-v3-toggle-wrap input:checked + .kng-v3-toggle-slider { |
| 414 | 843 | background: var(--kng-v3-success); |
| @@ -436,11 +865,14 @@ | ||
| 436 | 865 | .kng-cc-toolbar { |
| 437 | 866 | display: flex; |
| 438 | 867 | align-items: center; |
| 439 | 868 | justify-content: space-between; |
| 440 | - padding: 16px 32px; | |
| 869 | + padding: 14px 24px; | |
| 441 | 870 | background: var(--kng-v3-card-bg); |
| 442 | - border-bottom: 1px solid var(--kng-v3-divider); | |
| 871 | + border-radius: 12px; | |
| 872 | + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03); | |
| 873 | + border: 1px solid var(--kng-v3-divider); | |
| 874 | + margin-bottom: 16px; | |
| 443 | 875 | } |
| 444 | 876 | |
| 445 | 877 | .kng-cc-toolbar-left, |
| 446 | 878 | .kng-cc-toolbar-right { |
| @@ -507,9 +939,9 @@ | ||
| 507 | 939 | height: 18px; |
| 508 | 940 | background: var(--kng-v3-card-bg); |
| 509 | 941 | border: 2px solid var(--kng-v3-border); |
| 510 | 942 | border-radius: 4px; |
| 511 | - transition: all 0.2s ease; | |
| 943 | + transition: background-color 0.2s ease, border-color 0.2s ease; | |
| 512 | 944 | position: relative; |
| 513 | 945 | } |
| 514 | 946 | |
| 515 | 947 | .kng-cc-checkbox-wrap input:checked + .kng-cc-checkbox-custom { |
| @@ -533,24 +965,19 @@ | ||
| 533 | 965 | Table |
| 534 | 966 | ============================================ */ |
| 535 | 967 | |
| 536 | 968 | .kng-cc-list { |
| 537 | - padding: 24px 32px; | |
| 969 | + padding: 0; | |
| 538 | 970 | } |
| 539 | 971 | |
| 540 | 972 | .kng-cc-table-wrap { |
| 541 | 973 | background: var(--kng-v3-card-bg); |
| 542 | - border-radius: 28px; | |
| 543 | - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04); | |
| 974 | + border-radius: 16px; | |
| 975 | + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03); | |
| 544 | 976 | overflow: hidden; |
| 545 | - border: 1px solid var(--kng-v3-border); | |
| 546 | - transition: box-shadow 0.3s ease; | |
| 977 | + border: 1px solid var(--kng-v3-divider); | |
| 547 | 978 | } |
| 548 | 979 | |
| 549 | -.kng-cc-table-wrap:hover { | |
| 550 | - box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08); | |
| 551 | -} | |
| 552 | - | |
| 553 | 980 | .kng-cc-table { |
| 554 | 981 | width: 100%; |
| 555 | 982 | border-collapse: collapse; |
| 556 | 983 | } |
| @@ -559,23 +986,24 @@ | ||
| 559 | 986 | background: rgba(0, 0, 0, 0.02); |
| 560 | 987 | } |
| 561 | 988 | |
| 562 | 989 | .kng-cc-table th { |
| 563 | - padding: 16px 20px; | |
| 564 | - font-size: 12px; | |
| 990 | + padding: 14px 20px; | |
| 991 | + font-size: 11px; | |
| 565 | 992 | font-weight: 600; |
| 566 | 993 | text-transform: uppercase; |
| 567 | - letter-spacing: 0.06em; | |
| 994 | + letter-spacing: 0.08em; | |
| 568 | 995 | color: var(--kng-v3-muted); |
| 569 | 996 | text-align: left; |
| 570 | 997 | border-bottom: 1px solid var(--kng-v3-border); |
| 998 | + white-space: nowrap; | |
| 571 | 999 | } |
| 572 | 1000 | |
| 573 | 1001 | .kng-cc-table td { |
| 574 | - padding: 18px 20px; | |
| 575 | - font-size: 15px; | |
| 1002 | + padding: 16px 20px; | |
| 1003 | + font-size: 14px; | |
| 576 | 1004 | color: var(--kng-v3-text); |
| 577 | - border-bottom: 1px solid var(--kng-v3-border); | |
| 1005 | + border-bottom: 1px solid var(--kng-v3-divider); | |
| 578 | 1006 | vertical-align: middle; |
| 579 | 1007 | } |
| 580 | 1008 | |
| 581 | 1009 | .kng-cc-table tr:last-child td { |
| @@ -633,14 +1061,17 @@ | ||
| 633 | 1061 | |
| 634 | 1062 | /* Type badges */ |
| 635 | 1063 | .kng-cc-type-badge { |
| 636 | 1064 | display: inline-flex; |
| 637 | - padding: 6px 12px; | |
| 1065 | + align-items: center; | |
| 1066 | + justify-content: center; | |
| 1067 | + padding: 4px 10px; | |
| 638 | 1068 | font-size: 11px; |
| 639 | 1069 | font-weight: 600; |
| 640 | - border-radius: 100px; | |
| 1070 | + border-radius: 6px; | |
| 641 | 1071 | text-transform: uppercase; |
| 642 | 1072 | letter-spacing: 0.06em; |
| 1073 | + min-width: 44px; | |
| 643 | 1074 | } |
| 644 | 1075 | |
| 645 | 1076 | .kng-cc-type-css { |
| 646 | 1077 | background: rgba(0, 113, 227, 0.12); |
| @@ -664,12 +1095,13 @@ | ||
| 664 | 1095 | |
| 665 | 1096 | /* Scope badges */ |
| 666 | 1097 | .kng-cc-scope-badge { |
| 667 | 1098 | display: inline-flex; |
| 668 | - padding: 3px 8px; | |
| 1099 | + align-items: center; | |
| 1100 | + padding: 4px 8px; | |
| 669 | 1101 | font-size: 11px; |
| 670 | - font-weight: 500; | |
| 671 | - border-radius: 4px; | |
| 1102 | + font-weight: 600; | |
| 1103 | + border-radius: 6px; | |
| 672 | 1104 | } |
| 673 | 1105 | |
| 674 | 1106 | .kng-cc-scope-global { |
| 675 | 1107 | background: rgba(48, 209, 88, 0.1); |
| @@ -699,24 +1131,30 @@ | ||
| 699 | 1131 | |
| 700 | 1132 | /* Actions */ |
| 701 | 1133 | .kng-cc-actions { |
| 702 | 1134 | display: flex; |
| 703 | - gap: 4px; | |
| 1135 | + gap: 6px; | |
| 1136 | + align-items: center; | |
| 704 | 1137 | } |
| 705 | 1138 | |
| 706 | 1139 | .kng-cc-action-btn { |
| 707 | - display: flex; | |
| 1140 | + display: inline-flex; | |
| 708 | 1141 | align-items: center; |
| 709 | 1142 | justify-content: center; |
| 710 | 1143 | width: 32px; |
| 711 | 1144 | height: 32px; |
| 712 | 1145 | border: none; |
| 713 | - border-radius: 6px; | |
| 1146 | + border-radius: 8px; | |
| 714 | 1147 | background: transparent; |
| 715 | 1148 | color: var(--kng-v3-muted); |
| 716 | 1149 | cursor: pointer; |
| 717 | - transition: all 0.2s ease; | |
| 1150 | + transition: background-color 0.2s ease, color 0.2s ease; | |
| 718 | 1151 | text-decoration: none; |
| 1152 | + gap: 6px; | |
| 1153 | + font-size: 13px; | |
| 1154 | + font-weight: 500; | |
| 1155 | + font-family: var(--kng-v3-font); | |
| 1156 | + white-space: nowrap; | |
| 719 | 1157 | } |
| 720 | 1158 | |
| 721 | 1159 | .kng-cc-action-btn:hover { |
| 722 | 1160 | background: var(--kng-v3-bg); |
| @@ -722,8 +1160,23 @@ | ||
| 722 | 1160 | background: var(--kng-v3-bg); |
| 723 | 1161 | color: var(--kng-v3-text); |
| 724 | 1162 | } |
| 725 | 1163 | |
| 1164 | +.kng-cc-action-btn--edit { | |
| 1165 | + width: auto; | |
| 1166 | + padding: 6px 14px; | |
| 1167 | + background: var(--kng-v3-primary); | |
| 1168 | + color: #fff; | |
| 1169 | + border-radius: 8px; | |
| 1170 | + font-weight: 500; | |
| 1171 | +} | |
| 1172 | + | |
| 1173 | +.kng-cc-action-btn--edit:hover { | |
| 1174 | + background: var(--kng-v3-primary-hover); | |
| 1175 | + color: #fff; | |
| 1176 | + box-shadow: 0 2px 8px rgba(0, 113, 227, 0.25); | |
| 1177 | +} | |
| 1178 | + | |
| 726 | 1179 | .kng-cc-action-btn--danger:hover { |
| 727 | 1180 | background: rgba(255, 69, 58, 0.1); |
| 728 | 1181 | color: var(--kng-v3-danger); |
| 729 | 1182 | } |
| @@ -735,32 +1188,45 @@ | ||
| 735 | 1188 | .kng-cc-empty { |
| 736 | 1189 | text-align: center; |
| 737 | 1190 | padding: 80px 40px; |
| 738 | 1191 | background: var(--kng-v3-card-bg); |
| 739 | - border-radius: 28px; | |
| 740 | - border: 1px solid var(--kng-v3-border); | |
| 741 | - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04); | |
| 1192 | + border-radius: 20px; | |
| 1193 | + border: 2px dashed var(--kng-v3-border); | |
| 1194 | + box-shadow: none; | |
| 742 | 1195 | } |
| 743 | 1196 | |
| 744 | 1197 | .kng-cc-empty-icon { |
| 745 | - color: var(--kng-v3-border); | |
| 1198 | + display: inline-flex; | |
| 1199 | + align-items: center; | |
| 1200 | + justify-content: center; | |
| 1201 | + width: 80px; | |
| 1202 | + height: 80px; | |
| 1203 | + background: var(--kng-v3-bg); | |
| 1204 | + border-radius: 50%; | |
| 1205 | + color: var(--kng-v3-muted); | |
| 746 | 1206 | margin-bottom: 24px; |
| 747 | 1207 | } |
| 748 | 1208 | |
| 1209 | +.kng-cc-empty-icon svg { | |
| 1210 | + width: 40px; | |
| 1211 | + height: 40px; | |
| 1212 | +} | |
| 1213 | + | |
| 749 | 1214 | .kng-cc-empty h3 { |
| 750 | 1215 | font-size: 20px; |
| 751 | 1216 | font-weight: 600; |
| 752 | 1217 | color: var(--kng-v3-text); |
| 753 | - margin: 0 0 12px; | |
| 1218 | + margin: 0 0 8px; | |
| 754 | 1219 | } |
| 755 | 1220 | |
| 756 | 1221 | .kng-cc-empty p { |
| 757 | 1222 | font-size: 14px; |
| 758 | 1223 | color: var(--kng-v3-muted); |
| 759 | - margin: 0 0 24px; | |
| 1224 | + margin: 0 0 28px; | |
| 760 | 1225 | max-width: 400px; |
| 761 | 1226 | margin-left: auto; |
| 762 | 1227 | margin-right: auto; |
| 1228 | + line-height: 1.6; | |
| 763 | 1229 | } |
| 764 | 1230 | |
| 765 | 1231 | /* ============================================ |
| 766 | 1232 | Pro Upsell |
| @@ -766,9 +1232,9 @@ | ||
| 766 | 1232 | Pro Upsell |
| 767 | 1233 | ============================================ */ |
| 768 | 1234 | |
| 769 | 1235 | .kng-cc-pro-upsell { |
| 770 | - margin: 0 32px 32px; | |
| 1236 | + margin: 24px 0 0; | |
| 771 | 1237 | } |
| 772 | 1238 | |
| 773 | 1239 | .kng-cc-pro-upsell-content { |
| 774 | 1240 | display: flex; |
| @@ -773,16 +1239,30 @@ | ||
| 773 | 1239 | .kng-cc-pro-upsell-content { |
| 774 | 1240 | display: flex; |
| 775 | 1241 | align-items: center; |
| 776 | 1242 | gap: 20px; |
| 777 | - padding: 20px 24px; | |
| 778 | - background: linear-gradient(135deg, rgba(191, 90, 242, 0.1) 0%, rgba(0, 113, 227, 0.1) 100%); | |
| 779 | - border: 1px solid rgba(191, 90, 242, 0.2); | |
| 780 | - border-radius: 28px; | |
| 1243 | + padding: 20px 28px; | |
| 1244 | + background: linear-gradient(135deg, rgba(191, 90, 242, 0.06) 0%, rgba(0, 113, 227, 0.06) 100%); | |
| 1245 | + border: 1px solid rgba(191, 90, 242, 0.12); | |
| 1246 | + border-radius: 16px; | |
| 1247 | + transition: border-color 0.2s ease, box-shadow 0.2s ease; | |
| 781 | 1248 | } |
| 782 | 1249 | |
| 1250 | +.kng-cc-pro-upsell-content:hover { | |
| 1251 | + border-color: rgba(191, 90, 242, 0.24); | |
| 1252 | + box-shadow: 0 4px 20px rgba(191, 90, 242, 0.08); | |
| 1253 | +} | |
| 1254 | + | |
| 783 | 1255 | .kng-cc-pro-upsell-icon { |
| 1256 | + display: flex; | |
| 1257 | + align-items: center; | |
| 1258 | + justify-content: center; | |
| 1259 | + width: 48px; | |
| 1260 | + height: 48px; | |
| 1261 | + background: rgba(191, 90, 242, 0.1); | |
| 1262 | + border-radius: 12px; | |
| 784 | 1263 | color: var(--kng-v3-accent); |
| 1264 | + flex-shrink: 0; | |
| 785 | 1265 | } |
| 786 | 1266 | |
| 787 | 1267 | .kng-cc-pro-upsell-text { |
| 788 | 1268 | flex: 1; |
| @@ -798,25 +1278,146 @@ | ||
| 798 | 1278 | .kng-cc-pro-upsell-text p { |
| 799 | 1279 | font-size: 13px; |
| 800 | 1280 | color: var(--kng-v3-muted); |
| 801 | 1281 | margin: 0; |
| 1282 | + line-height: 1.5; | |
| 802 | 1283 | } |
| 803 | 1284 | |
| 804 | 1285 | /* ============================================ |
| 1286 | + Pro Upgrade Popup | |
| 1287 | + ============================================ */ | |
| 1288 | + | |
| 1289 | +.kng-cc-pro-popup-overlay { | |
| 1290 | + position: fixed; | |
| 1291 | + inset: 0; | |
| 1292 | + z-index: 100000; | |
| 1293 | + background: rgba(0, 0, 0, 0.5); | |
| 1294 | + display: flex; | |
| 1295 | + align-items: center; | |
| 1296 | + justify-content: center; | |
| 1297 | + backdrop-filter: blur(4px); | |
| 1298 | + -webkit-backdrop-filter: blur(4px); | |
| 1299 | + animation: kngPopupFadeIn 0.2s ease; | |
| 1300 | +} | |
| 1301 | + | |
| 1302 | +@keyframes kngPopupFadeIn { | |
| 1303 | + from { opacity: 0; } | |
| 1304 | + to { opacity: 1; } | |
| 1305 | +} | |
| 1306 | + | |
| 1307 | +@keyframes kngPopupSlideIn { | |
| 1308 | + from { opacity: 0; transform: scale(0.95) translateY(10px); } | |
| 1309 | + to { opacity: 1; transform: scale(1) translateY(0); } | |
| 1310 | +} | |
| 1311 | + | |
| 1312 | +.kng-cc-pro-popup { | |
| 1313 | + position: relative; | |
| 1314 | + width: 420px; | |
| 1315 | + max-width: 90vw; | |
| 1316 | + background: var(--kng-v3-card-bg, #ffffff); | |
| 1317 | + border-radius: 20px; | |
| 1318 | + padding: 40px 32px 32px; | |
| 1319 | + text-align: center; | |
| 1320 | + box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2); | |
| 1321 | + animation: kngPopupSlideIn 0.3s ease; | |
| 1322 | +} | |
| 1323 | + | |
| 1324 | +.kng-cc-pro-popup-close { | |
| 1325 | + position: absolute; | |
| 1326 | + top: 12px; | |
| 1327 | + right: 12px; | |
| 1328 | + width: 32px; | |
| 1329 | + height: 32px; | |
| 1330 | + border: none; | |
| 1331 | + background: transparent; | |
| 1332 | + font-size: 20px; | |
| 1333 | + color: var(--kng-v3-muted, #86868b); | |
| 1334 | + cursor: pointer; | |
| 1335 | + border-radius: 8px; | |
| 1336 | + display: flex; | |
| 1337 | + align-items: center; | |
| 1338 | + justify-content: center; | |
| 1339 | + transition: background-color 0.15s ease; | |
| 1340 | +} | |
| 1341 | + | |
| 1342 | +.kng-cc-pro-popup-close:hover { | |
| 1343 | + background: var(--kng-v3-bg, #f5f5f7); | |
| 1344 | +} | |
| 1345 | + | |
| 1346 | +.kng-cc-pro-popup-icon { | |
| 1347 | + display: inline-flex; | |
| 1348 | + align-items: center; | |
| 1349 | + justify-content: center; | |
| 1350 | + width: 56px; | |
| 1351 | + height: 56px; | |
| 1352 | + background: linear-gradient(135deg, rgba(191, 90, 242, 0.15), rgba(0, 113, 227, 0.15)); | |
| 1353 | + border-radius: 50%; | |
| 1354 | + color: var(--kng-v3-accent, #bf5af2); | |
| 1355 | + margin-bottom: 16px; | |
| 1356 | +} | |
| 1357 | + | |
| 1358 | +.kng-cc-pro-popup h3 { | |
| 1359 | + font-size: 20px; | |
| 1360 | + font-weight: 700; | |
| 1361 | + color: var(--kng-v3-text, #1d1d1f); | |
| 1362 | + margin: 0 0 8px; | |
| 1363 | +} | |
| 1364 | + | |
| 1365 | +.kng-cc-pro-popup p { | |
| 1366 | + font-size: 14px; | |
| 1367 | + line-height: 1.5; | |
| 1368 | + color: var(--kng-v3-muted, #86868b); | |
| 1369 | + margin: 0 0 20px; | |
| 1370 | +} | |
| 1371 | + | |
| 1372 | +.kng-cc-pro-popup-features { | |
| 1373 | + display: grid; | |
| 1374 | + grid-template-columns: 1fr 1fr; | |
| 1375 | + gap: 10px 16px; | |
| 1376 | + text-align: left; | |
| 1377 | + margin-bottom: 24px; | |
| 1378 | + padding: 16px 20px; | |
| 1379 | + background: var(--kng-v3-bg, #f5f5f7); | |
| 1380 | + border-radius: 12px; | |
| 1381 | + border: 1px solid var(--kng-v3-divider, rgba(0,0,0,0.06)); | |
| 1382 | +} | |
| 1383 | + | |
| 1384 | +.kng-cc-pro-popup-features span { | |
| 1385 | + font-size: 13px; | |
| 1386 | + color: var(--kng-v3-text, #1d1d1f); | |
| 1387 | + font-weight: 500; | |
| 1388 | + line-height: 1.4; | |
| 1389 | +} | |
| 1390 | + | |
| 1391 | +.kng-cc-pro-popup-actions { | |
| 1392 | + display: flex; | |
| 1393 | + flex-direction: column; | |
| 1394 | + gap: 8px; | |
| 1395 | +} | |
| 1396 | + | |
| 1397 | +.kng-cc-pro-popup-actions .kng-v3-btn--accent { | |
| 1398 | + justify-content: center; | |
| 1399 | +} | |
| 1400 | + | |
| 1401 | +.kng-cc-pro-popup-actions .kng-v3-btn--ghost { | |
| 1402 | + width: 100%; | |
| 1403 | + justify-content: center; | |
| 1404 | +} | |
| 1405 | + | |
| 1406 | +/* ============================================ | |
| 805 | 1407 | Editor Page |
| 806 | 1408 | ============================================ */ |
| 807 | 1409 | |
| 808 | 1410 | .kng-cc-editor-page { |
| 809 | - padding: 60px 40px; | |
| 1411 | + padding-top: 0; | |
| 1412 | + padding-left: 0; | |
| 1413 | + padding-right: 0; | |
| 810 | 1414 | } |
| 811 | 1415 | |
| 812 | 1416 | .kng-cc-editor-page .kng-cc-header { |
| 813 | - position: sticky; | |
| 814 | - top: 32px; | |
| 815 | - z-index: 100; | |
| 816 | - background: var(--kng-v3-bg); | |
| 817 | - padding: 24px 0; | |
| 818 | - margin-bottom: 32px; | |
| 1417 | + background: transparent; | |
| 1418 | + padding: 16px 0; | |
| 1419 | + margin-bottom: 24px; | |
| 819 | 1420 | flex-direction: row; |
| 820 | 1421 | align-items: center; |
| 821 | 1422 | } |
| 822 | 1423 | |
| @@ -822,10 +1423,36 @@ | ||
| 822 | 1423 | |
| 823 | 1424 | .kng-cc-editor-page .kng-cc-header-left { |
| 824 | 1425 | flex-direction: column; |
| 825 | 1426 | align-items: flex-start; |
| 1427 | + gap: 0; | |
| 826 | 1428 | } |
| 827 | 1429 | |
| 1430 | +.kng-cc-editor-page .kng-cc-title { | |
| 1431 | + font-size: 24px; | |
| 1432 | + background: none; | |
| 1433 | + -webkit-text-fill-color: var(--kng-v3-text); | |
| 1434 | + color: var(--kng-v3-text); | |
| 1435 | +} | |
| 1436 | + | |
| 1437 | +/* Sub-pages with back button (settings, import/export) */ | |
| 1438 | +.kng-cc-header-left:has(> .kng-cc-back-btn) { | |
| 1439 | + flex-direction: column; | |
| 1440 | + align-items: flex-start; | |
| 1441 | + gap: 4px; | |
| 1442 | +} | |
| 1443 | + | |
| 1444 | +.kng-cc-header-left:has(> .kng-cc-back-btn) .kng-cc-title { | |
| 1445 | + font-size: 24px; | |
| 1446 | + background: none; | |
| 1447 | + -webkit-text-fill-color: var(--kng-v3-text); | |
| 1448 | + color: var(--kng-v3-text); | |
| 1449 | +} | |
| 1450 | + | |
| 1451 | +.kng-cc-header-left:has(> .kng-cc-back-btn) .kng-cc-subtitle { | |
| 1452 | + font-size: 15px; | |
| 1453 | +} | |
| 1454 | + | |
| 828 | 1455 | .kng-cc-editor-form { |
| 829 | 1456 | display: contents; |
| 830 | 1457 | } |
| 831 | 1458 | |
| @@ -830,37 +1457,37 @@ | ||
| 830 | 1457 | } |
| 831 | 1458 | |
| 832 | 1459 | .kng-cc-editor-layout { |
| 833 | 1460 | display: grid; |
| 834 | - grid-template-columns: 1fr 380px; | |
| 835 | - gap: 32px; | |
| 1461 | + grid-template-columns: 1fr 360px; | |
| 1462 | + gap: 24px; | |
| 836 | 1463 | } |
| 837 | 1464 | |
| 838 | 1465 | .kng-cc-editor-main { |
| 839 | 1466 | display: flex; |
| 840 | 1467 | flex-direction: column; |
| 841 | - gap: 24px; | |
| 1468 | + gap: 20px; | |
| 842 | 1469 | } |
| 843 | 1470 | |
| 844 | 1471 | .kng-cc-editor-sidebar { |
| 845 | 1472 | display: flex; |
| 846 | 1473 | flex-direction: column; |
| 847 | - gap: 24px; | |
| 1474 | + gap: 20px; | |
| 848 | 1475 | } |
| 849 | 1476 | |
| 850 | 1477 | /* Title Section */ |
| 851 | 1478 | .kng-cc-title-section { |
| 852 | 1479 | background: var(--kng-v3-card-bg); |
| 853 | - border-radius: 28px; | |
| 854 | - padding: 8px; | |
| 855 | - border: 1px solid var(--kng-v3-border); | |
| 856 | - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04); | |
| 1480 | + border-radius: 16px; | |
| 1481 | + padding: 4px; | |
| 1482 | + border: 1px solid var(--kng-v3-divider); | |
| 1483 | + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03); | |
| 857 | 1484 | } |
| 858 | 1485 | |
| 859 | 1486 | .kng-cc-title-input { |
| 860 | 1487 | width: 100%; |
| 861 | - padding: 20px 24px; | |
| 862 | - font-size: 24px; | |
| 1488 | + padding: 16px 20px; | |
| 1489 | + font-size: 22px; | |
| 863 | 1490 | font-weight: 600; |
| 864 | 1491 | font-family: var(--kng-v3-font); |
| 865 | 1492 | color: var(--kng-v3-text); |
| 866 | 1493 | background: transparent; |
| @@ -874,11 +1501,11 @@ | ||
| 874 | 1501 | |
| 875 | 1502 | /* Code Section */ |
| 876 | 1503 | .kng-cc-code-section { |
| 877 | 1504 | background: var(--kng-v3-card-bg); |
| 878 | - border-radius: 28px; | |
| 879 | - border: 1px solid var(--kng-v3-border); | |
| 880 | - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04); | |
| 1505 | + border-radius: 16px; | |
| 1506 | + border: 1px solid var(--kng-v3-divider); | |
| 1507 | + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03); | |
| 881 | 1508 | overflow: hidden; |
| 882 | 1509 | flex: 1; |
| 883 | 1510 | display: flex; |
| 884 | 1511 | flex-direction: column; |
| @@ -887,9 +1514,9 @@ | ||
| 887 | 1514 | .kng-cc-code-header { |
| 888 | 1515 | display: flex; |
| 889 | 1516 | align-items: center; |
| 890 | 1517 | justify-content: space-between; |
| 891 | - padding: 12px 16px; | |
| 1518 | + padding: 10px 16px; | |
| 892 | 1519 | border-bottom: 1px solid var(--kng-v3-divider); |
| 893 | 1520 | } |
| 894 | 1521 | |
| 895 | 1522 | .kng-cc-type-tabs { |
| @@ -910,26 +1537,27 @@ | ||
| 910 | 1537 | font-family: var(--kng-v3-font); |
| 911 | 1538 | color: var(--kng-v3-muted); |
| 912 | 1539 | background: transparent; |
| 913 | 1540 | border: none; |
| 914 | - border-radius: 6px; | |
| 1541 | + border-radius: 8px; | |
| 915 | 1542 | cursor: pointer; |
| 916 | - transition: all 0.2s ease; | |
| 1543 | + transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; | |
| 917 | 1544 | } |
| 918 | 1545 | |
| 919 | 1546 | .kng-cc-type-tab:hover:not(:disabled) { |
| 920 | 1547 | color: var(--kng-v3-text); |
| 1548 | + background: rgba(0, 0, 0, 0.03); | |
| 921 | 1549 | } |
| 922 | 1550 | |
| 923 | 1551 | .kng-cc-type-tab.is-active { |
| 924 | 1552 | background: var(--kng-v3-card-bg); |
| 925 | 1553 | color: var(--kng-v3-text); |
| 926 | - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| 1554 | + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); | |
| 1555 | + font-weight: 600; | |
| 927 | 1556 | } |
| 928 | 1557 | |
| 929 | 1558 | .kng-cc-type-tab:disabled { |
| 930 | 1559 | cursor: not-allowed; |
| 931 | - opacity: 0.6; | |
| 932 | 1560 | } |
| 933 | 1561 | |
| 934 | 1562 | .kng-cc-type-tab.is-pro { |
| 935 | 1563 | position: relative; |
| @@ -953,9 +1581,9 @@ | ||
| 953 | 1581 | font-weight: 700; |
| 954 | 1582 | color: var(--kng-v3-accent); |
| 955 | 1583 | background: rgba(191, 90, 242, 0.15); |
| 956 | 1584 | border-radius: 4px; |
| 957 | - margin-left: 6px; | |
| 1585 | + margin-top: 4px; | |
| 958 | 1586 | } |
| 959 | 1587 | |
| 960 | 1588 | .kng-cc-code-actions { |
| 961 | 1589 | display: flex; |
| @@ -972,9 +1600,9 @@ | ||
| 972 | 1600 | border: none; |
| 973 | 1601 | border-radius: 6px; |
| 974 | 1602 | color: var(--kng-v3-muted); |
| 975 | 1603 | cursor: pointer; |
| 976 | - transition: all 0.2s ease; | |
| 1604 | + transition: background-color 0.2s ease, color 0.2s ease; | |
| 977 | 1605 | } |
| 978 | 1606 | |
| 979 | 1607 | .kng-cc-code-action:hover { |
| 980 | 1608 | background: var(--kng-v3-bg); |
| @@ -1034,17 +1662,27 @@ | ||
| 1034 | 1662 | border-left-width: 2px; |
| 1035 | 1663 | } |
| 1036 | 1664 | |
| 1037 | 1665 | .kng-cc-code-editor-wrap .CodeMirror-selected { |
| 1038 | - background: var(--kng-v3-primary-light) !important; | |
| 1666 | + background: rgba(0, 113, 227, 0.2) !important; | |
| 1039 | 1667 | } |
| 1040 | 1668 | |
| 1669 | +.kng-cc-code-editor-wrap .CodeMirror-focused .CodeMirror-selected { | |
| 1670 | + background: rgba(0, 113, 227, 0.25) !important; | |
| 1671 | +} | |
| 1672 | + | |
| 1041 | 1673 | .kng-cc-code-editor-wrap .CodeMirror-line::selection, |
| 1042 | 1674 | .kng-cc-code-editor-wrap .CodeMirror-line > span::selection, |
| 1043 | 1675 | .kng-cc-code-editor-wrap .CodeMirror-line > span > span::selection { |
| 1044 | - background: var(--kng-v3-primary-light); | |
| 1676 | + background: rgba(0, 113, 227, 0.25); | |
| 1045 | 1677 | } |
| 1046 | 1678 | |
| 1679 | +.kng-cc-code-editor-wrap .CodeMirror-line::-moz-selection, | |
| 1680 | +.kng-cc-code-editor-wrap .CodeMirror-line > span::-moz-selection, | |
| 1681 | +.kng-cc-code-editor-wrap .CodeMirror-line > span > span::-moz-selection { | |
| 1682 | + background: rgba(0, 113, 227, 0.25); | |
| 1683 | +} | |
| 1684 | + | |
| 1047 | 1685 | /* Syntax highlighting improvements */ |
| 1048 | 1686 | .kng-cc-code-editor-wrap .cm-s-default .cm-keyword { |
| 1049 | 1687 | color: #c678dd; |
| 1050 | 1688 | font-weight: 500; |
| @@ -1164,11 +1802,11 @@ | ||
| 1164 | 1802 | |
| 1165 | 1803 | /* Notes Section */ |
| 1166 | 1804 | .kng-cc-notes-section { |
| 1167 | 1805 | background: var(--kng-v3-card-bg); |
| 1168 | - border-radius: 28px; | |
| 1169 | - border: 1px solid var(--kng-v3-border); | |
| 1170 | - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04); | |
| 1806 | + border-radius: 16px; | |
| 1807 | + border: 1px solid var(--kng-v3-divider); | |
| 1808 | + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03); | |
| 1171 | 1809 | overflow: hidden; |
| 1172 | 1810 | } |
| 1173 | 1811 | |
| 1174 | 1812 | .kng-cc-section-header { |
| @@ -1176,9 +1814,9 @@ | ||
| 1176 | 1814 | align-items: center; |
| 1177 | 1815 | justify-content: space-between; |
| 1178 | 1816 | padding: 16px 20px; |
| 1179 | 1817 | cursor: pointer; |
| 1180 | - transition: background 0.2s ease; | |
| 1818 | + transition: background-color 0.2s ease; | |
| 1181 | 1819 | } |
| 1182 | 1820 | |
| 1183 | 1821 | .kng-cc-section-header:hover { |
| 1184 | 1822 | background: var(--kng-v3-bg); |
| @@ -1212,12 +1850,11 @@ | ||
| 1212 | 1850 | ============================================ */ |
| 1213 | 1851 | |
| 1214 | 1852 | .kng-cc-sidebar-section { |
| 1215 | 1853 | background: var(--kng-v3-card-bg); |
| 1216 | - border-radius: 28px; | |
| 1217 | - border: 1px solid var(--kng-v3-border); | |
| 1218 | - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04); | |
| 1219 | - overflow: hidden; | |
| 1854 | + border-radius: 16px; | |
| 1855 | + border: 1px solid var(--kng-v3-divider); | |
| 1856 | + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03); | |
| 1220 | 1857 | } |
| 1221 | 1858 | |
| 1222 | 1859 | .kng-cc-sidebar-title { |
| 1223 | 1860 | display: flex; |
| @@ -1222,15 +1859,15 @@ | ||
| 1222 | 1859 | .kng-cc-sidebar-title { |
| 1223 | 1860 | display: flex; |
| 1224 | 1861 | align-items: center; |
| 1225 | 1862 | gap: 10px; |
| 1226 | - padding: 20px 24px; | |
| 1227 | - font-size: 15px; | |
| 1863 | + padding: 16px 20px; | |
| 1864 | + font-size: 14px; | |
| 1228 | 1865 | font-weight: 600; |
| 1229 | 1866 | color: var(--kng-v3-text); |
| 1230 | 1867 | margin: 0; |
| 1231 | - border-bottom: 1px solid var(--kng-v3-border); | |
| 1232 | - background: rgba(0, 0, 0, 0.02); | |
| 1868 | + border-bottom: 1px solid var(--kng-v3-divider); | |
| 1869 | + background: transparent; | |
| 1233 | 1870 | } |
| 1234 | 1871 | |
| 1235 | 1872 | .kng-cc-sidebar-title svg { |
| 1236 | 1873 | color: var(--kng-v3-muted); |
| @@ -1238,9 +1875,9 @@ | ||
| 1238 | 1875 | height: 18px; |
| 1239 | 1876 | } |
| 1240 | 1877 | |
| 1241 | 1878 | .kng-cc-sidebar-content { |
| 1242 | - padding: 24px; | |
| 1879 | + padding: 16px 20px; | |
| 1243 | 1880 | } |
| 1244 | 1881 | |
| 1245 | 1882 | /* Status wrap in header */ |
| 1246 | 1883 | .kng-cc-status-wrap { |
| @@ -1273,8 +1910,9 @@ | ||
| 1273 | 1910 | position: absolute; |
| 1274 | 1911 | opacity: 0; |
| 1275 | 1912 | width: 0; |
| 1276 | 1913 | height: 0; |
| 1914 | + opacity: 0 !important; | |
| 1277 | 1915 | } |
| 1278 | 1916 | |
| 1279 | 1917 | .kng-cc-radio-card-content { |
| 1280 | 1918 | display: flex; |
| @@ -1284,9 +1922,9 @@ | ||
| 1284 | 1922 | padding: 16px 12px; |
| 1285 | 1923 | background: var(--kng-v3-bg); |
| 1286 | 1924 | border: 2px solid transparent; |
| 1287 | 1925 | border-radius: 12px; |
| 1288 | - transition: all 0.2s ease; | |
| 1926 | + transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; | |
| 1289 | 1927 | } |
| 1290 | 1928 | |
| 1291 | 1929 | .kng-cc-radio-card:hover .kng-cc-radio-card-content { |
| 1292 | 1930 | border-color: var(--kng-v3-border); |
| @@ -1293,10 +1931,11 @@ | ||
| 1293 | 1931 | } |
| 1294 | 1932 | |
| 1295 | 1933 | .kng-cc-radio-card.is-selected .kng-cc-radio-card-content, |
| 1296 | 1934 | .kng-cc-radio-card input:checked + .kng-cc-radio-card-content { |
| 1297 | - background: rgba(0, 113, 227, 0.1); | |
| 1935 | + background: rgba(0, 113, 227, 0.06); | |
| 1298 | 1936 | border-color: var(--kng-v3-primary); |
| 1937 | + box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.08); | |
| 1299 | 1938 | } |
| 1300 | 1939 | |
| 1301 | 1940 | .kng-cc-radio-icon { |
| 1302 | 1941 | color: var(--kng-v3-muted); |
| @@ -1310,8 +1949,9 @@ | ||
| 1310 | 1949 | .kng-cc-radio-text { |
| 1311 | 1950 | font-size: 12px; |
| 1312 | 1951 | font-weight: 500; |
| 1313 | 1952 | color: var(--kng-v3-text); |
| 1953 | + text-align: center; | |
| 1314 | 1954 | } |
| 1315 | 1955 | |
| 1316 | 1956 | /* Rules Builder */ |
| 1317 | 1957 | .kng-cc-rules-builder { |
| @@ -1329,9 +1969,9 @@ | ||
| 1329 | 1969 | |
| 1330 | 1970 | .kng-cc-rule { |
| 1331 | 1971 | background: var(--kng-v3-bg); |
| 1332 | 1972 | border-radius: 12px; |
| 1333 | - overflow: hidden; | |
| 1973 | + position: relative; | |
| 1334 | 1974 | } |
| 1335 | 1975 | |
| 1336 | 1976 | .kng-cc-rule-header { |
| 1337 | 1977 | display: flex; |
| @@ -1354,9 +1994,9 @@ | ||
| 1354 | 1994 | border: none; |
| 1355 | 1995 | border-radius: 4px; |
| 1356 | 1996 | color: var(--kng-v3-muted); |
| 1357 | 1997 | cursor: pointer; |
| 1358 | - transition: all 0.2s ease; | |
| 1998 | + transition: background-color 0.2s ease, color 0.2s ease; | |
| 1359 | 1999 | } |
| 1360 | 2000 | |
| 1361 | 2001 | .kng-cc-rule-remove:hover { |
| 1362 | 2002 | background: rgba(255, 69, 58, 0.1); |
| @@ -1366,8 +2006,57 @@ | ||
| 1366 | 2006 | .kng-cc-rule-value { |
| 1367 | 2007 | padding: 0 12px 12px; |
| 1368 | 2008 | } |
| 1369 | 2009 | |
| 2010 | +.kng-cc-rule-search-wrap { | |
| 2011 | + position: relative; | |
| 2012 | +} | |
| 2013 | + | |
| 2014 | +.kng-cc-rule-search-results { | |
| 2015 | + position: absolute; | |
| 2016 | + top: 100%; | |
| 2017 | + left: 0; | |
| 2018 | + right: 0; | |
| 2019 | + z-index: 200; | |
| 2020 | + background: var(--kng-v3-card-bg); | |
| 2021 | + border: 1px solid var(--kng-v3-border); | |
| 2022 | + border-radius: 10px; | |
| 2023 | + margin-top: 4px; | |
| 2024 | + max-height: 200px; | |
| 2025 | + overflow-y: auto; | |
| 2026 | + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); | |
| 2027 | +} | |
| 2028 | + | |
| 2029 | +.kng-cc-search-result { | |
| 2030 | + padding: 10px 14px; | |
| 2031 | + font-size: 14px; | |
| 2032 | + color: var(--kng-v3-text); | |
| 2033 | + cursor: pointer; | |
| 2034 | + transition: background-color 0.15s ease; | |
| 2035 | +} | |
| 2036 | + | |
| 2037 | +.kng-cc-search-result:hover { | |
| 2038 | + background: var(--kng-v3-primary-light); | |
| 2039 | +} | |
| 2040 | + | |
| 2041 | +.kng-cc-search-result:first-child { | |
| 2042 | + border-radius: 10px 10px 0 0; | |
| 2043 | +} | |
| 2044 | + | |
| 2045 | +.kng-cc-search-result:last-child { | |
| 2046 | + border-radius: 0 0 10px 10px; | |
| 2047 | +} | |
| 2048 | + | |
| 2049 | +.kng-cc-search-result:only-child { | |
| 2050 | + border-radius: 10px; | |
| 2051 | +} | |
| 2052 | + | |
| 2053 | +.kng-cc-search-no-results { | |
| 2054 | + padding: 10px 14px; | |
| 2055 | + font-size: 13px; | |
| 2056 | + color: var(--kng-v3-muted); | |
| 2057 | +} | |
| 2058 | + | |
| 1370 | 2059 | .kng-cc-add-rule-btn { |
| 1371 | 2060 | width: 100%; |
| 1372 | 2061 | } |
| 1373 | 2062 | |
| @@ -1372,20 +2061,19 @@ | ||
| 1372 | 2061 | } |
| 1373 | 2062 | |
| 1374 | 2063 | /* Pro field indicator */ |
| 1375 | 2064 | .is-pro-field { |
| 1376 | - opacity: 0.6; | |
| 1377 | 2065 | pointer-events: none; |
| 1378 | 2066 | } |
| 1379 | 2067 | |
| 1380 | 2068 | /* Pro Box */ |
| 1381 | 2069 | .kng-cc-pro-section { |
| 1382 | - background: linear-gradient(135deg, rgba(191, 90, 242, 0.08) 0%, rgba(0, 113, 227, 0.08) 100%); | |
| 1383 | - border: 1px solid rgba(191, 90, 242, 0.15); | |
| 2070 | + background: linear-gradient(135deg, rgba(191, 90, 242, 0.04) 0%, rgba(0, 113, 227, 0.04) 100%); | |
| 2071 | + border: 1px solid rgba(191, 90, 242, 0.12); | |
| 1384 | 2072 | } |
| 1385 | 2073 | |
| 1386 | 2074 | .kng-cc-pro-box { |
| 1387 | - padding: 24px; | |
| 2075 | + padding: 28px 24px; | |
| 1388 | 2076 | text-align: center; |
| 1389 | 2077 | } |
| 1390 | 2078 | |
| 1391 | 2079 | .kng-cc-pro-box-icon { |
| @@ -1391,12 +2079,12 @@ | ||
| 1391 | 2079 | .kng-cc-pro-box-icon { |
| 1392 | 2080 | display: inline-flex; |
| 1393 | 2081 | align-items: center; |
| 1394 | 2082 | justify-content: center; |
| 1395 | - width: 48px; | |
| 1396 | - height: 48px; | |
| 1397 | - background: rgba(191, 90, 242, 0.1); | |
| 1398 | - border-radius: 50%; | |
| 2083 | + width: 52px; | |
| 2084 | + height: 52px; | |
| 2085 | + background: linear-gradient(135deg, rgba(191, 90, 242, 0.12), rgba(0, 113, 227, 0.12)); | |
| 2086 | + border-radius: 16px; | |
| 1399 | 2087 | color: var(--kng-v3-accent); |
| 1400 | 2088 | margin-bottom: 16px; |
| 1401 | 2089 | } |
| 1402 | 2090 | |
| @@ -1415,19 +2103,21 @@ | ||
| 1415 | 2103 | } |
| 1416 | 2104 | |
| 1417 | 2105 | .kng-cc-pro-features-list li { |
| 1418 | 2106 | position: relative; |
| 1419 | - padding: 6px 0 6px 24px; | |
| 2107 | + padding: 6px 0 6px 28px; | |
| 1420 | 2108 | font-size: 13px; |
| 1421 | - color: var(--kng-v3-muted); | |
| 2109 | + color: var(--kng-v3-text); | |
| 2110 | + line-height: 1.5; | |
| 1422 | 2111 | } |
| 1423 | 2112 | |
| 1424 | 2113 | .kng-cc-pro-features-list li::before { |
| 1425 | 2114 | content: '✓'; |
| 1426 | 2115 | position: absolute; |
| 1427 | - left: 0; | |
| 2116 | + left: 4px; | |
| 1428 | 2117 | color: var(--kng-v3-success); |
| 1429 | - font-weight: 600; | |
| 2118 | + font-weight: 700; | |
| 2119 | + font-size: 14px; | |
| 1430 | 2120 | } |
| 1431 | 2121 | |
| 1432 | 2122 | /* ============================================ |
| 1433 | 2123 | Settings Page |
| @@ -1445,18 +2135,23 @@ | ||
| 1445 | 2135 | } |
| 1446 | 2136 | |
| 1447 | 2137 | .kng-cc-settings-card { |
| 1448 | 2138 | background: var(--kng-v3-card-bg); |
| 1449 | - border-radius: 28px; | |
| 1450 | - border: 1px solid var(--kng-v3-border); | |
| 1451 | - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04); | |
| 2139 | + border-radius: 16px; | |
| 2140 | + border: 1px solid var(--kng-v3-divider); | |
| 2141 | + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03); | |
| 1452 | 2142 | overflow: hidden; |
| 2143 | + transition: box-shadow 0.2s ease; | |
| 1453 | 2144 | } |
| 1454 | 2145 | |
| 2146 | +.kng-cc-settings-card:hover { | |
| 2147 | + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); | |
| 2148 | +} | |
| 2149 | + | |
| 1455 | 2150 | .kng-cc-settings-card-header { |
| 1456 | - padding: 20px 28px; | |
| 1457 | - background: rgba(0, 0, 0, 0.02); | |
| 1458 | - border-bottom: 1px solid var(--kng-v3-border); | |
| 2151 | + padding: 16px 24px; | |
| 2152 | + background: transparent; | |
| 2153 | + border-bottom: 1px solid var(--kng-v3-divider); | |
| 1459 | 2154 | } |
| 1460 | 2155 | |
| 1461 | 2156 | .kng-cc-settings-card-header h3 { |
| 1462 | 2157 | display: flex; |
| @@ -1474,9 +2169,9 @@ | ||
| 1474 | 2169 | height: 20px; |
| 1475 | 2170 | } |
| 1476 | 2171 | |
| 1477 | 2172 | .kng-cc-settings-card-content { |
| 1478 | - padding: 28px; | |
| 2173 | + padding: 24px 28px; | |
| 1479 | 2174 | } |
| 1480 | 2175 | |
| 1481 | 2176 | .kng-cc-settings-row { |
| 1482 | 2177 | display: grid; |
| @@ -1509,23 +2204,36 @@ | ||
| 1509 | 2204 | } |
| 1510 | 2205 | |
| 1511 | 2206 | .kng-cc-ie-card { |
| 1512 | 2207 | background: var(--kng-v3-card-bg); |
| 1513 | - border-radius: 28px; | |
| 1514 | - border: 1px solid var(--kng-v3-border); | |
| 1515 | - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04); | |
| 2208 | + border-radius: 20px; | |
| 2209 | + border: 1px solid var(--kng-v3-divider); | |
| 2210 | + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03); | |
| 1516 | 2211 | padding: 40px 32px; |
| 1517 | 2212 | text-align: center; |
| 2213 | + transition: box-shadow 0.3s ease, transform 0.3s ease; | |
| 1518 | 2214 | } |
| 1519 | 2215 | |
| 2216 | +.kng-cc-ie-card:hover { | |
| 2217 | + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); | |
| 2218 | + transform: translateY(-2px); | |
| 2219 | +} | |
| 2220 | + | |
| 1520 | 2221 | .kng-cc-ie-card-icon { |
| 2222 | + display: inline-flex; | |
| 2223 | + align-items: center; | |
| 2224 | + justify-content: center; | |
| 2225 | + width: 72px; | |
| 2226 | + height: 72px; | |
| 2227 | + background: var(--kng-v3-bg); | |
| 2228 | + border-radius: 20px; | |
| 1521 | 2229 | color: var(--kng-v3-muted); |
| 1522 | 2230 | margin-bottom: 20px; |
| 1523 | 2231 | } |
| 1524 | 2232 | |
| 1525 | 2233 | .kng-cc-ie-card-icon svg { |
| 1526 | - width: 48px; | |
| 1527 | - height: 48px; | |
| 2234 | + width: 36px; | |
| 2235 | + height: 36px; | |
| 1528 | 2236 | stroke-width: 1.5; |
| 1529 | 2237 | } |
| 1530 | 2238 | |
| 1531 | 2239 | .kng-cc-ie-card h3 { |
| @@ -1549,19 +2257,20 @@ | ||
| 1549 | 2257 | |
| 1550 | 2258 | /* Dropzone */ |
| 1551 | 2259 | .kng-cc-import-dropzone { |
| 1552 | 2260 | border: 2px dashed var(--kng-v3-border); |
| 1553 | - border-radius: 20px; | |
| 2261 | + border-radius: 16px; | |
| 1554 | 2262 | padding: 32px; |
| 1555 | 2263 | margin-bottom: 20px; |
| 1556 | 2264 | cursor: pointer; |
| 1557 | - transition: all 0.2s ease; | |
| 2265 | + transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; | |
| 1558 | 2266 | } |
| 1559 | 2267 | |
| 1560 | 2268 | .kng-cc-import-dropzone:hover, |
| 1561 | 2269 | .kng-cc-import-dropzone.is-dragover { |
| 1562 | 2270 | border-color: var(--kng-v3-primary); |
| 1563 | - background: rgba(0, 113, 227, 0.05); | |
| 2271 | + background: rgba(0, 113, 227, 0.04); | |
| 2272 | + box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.06); | |
| 1564 | 2273 | } |
| 1565 | 2274 | |
| 1566 | 2275 | .kng-cc-dropzone-content { |
| 1567 | 2276 | display: flex; |
| @@ -1594,9 +2303,9 @@ | ||
| 1594 | 2303 | border: none; |
| 1595 | 2304 | border-radius: 4px; |
| 1596 | 2305 | color: var(--kng-v3-muted); |
| 1597 | 2306 | cursor: pointer; |
| 1598 | - transition: all 0.2s ease; | |
| 2307 | + transition: background-color 0.2s ease, color 0.2s ease; | |
| 1599 | 2308 | } |
| 1600 | 2309 | |
| 1601 | 2310 | .kng-cc-file-remove:hover { |
| 1602 | 2311 | background: rgba(255, 69, 58, 0.1); |
| @@ -1609,11 +2318,11 @@ | ||
| 1609 | 2318 | } |
| 1610 | 2319 | |
| 1611 | 2320 | .kng-cc-import-results-content { |
| 1612 | 2321 | background: var(--kng-v3-card-bg); |
| 1613 | - border-radius: 28px; | |
| 1614 | - border: 1px solid var(--kng-v3-border); | |
| 1615 | - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04); | |
| 2322 | + border-radius: 16px; | |
| 2323 | + border: 1px solid var(--kng-v3-divider); | |
| 2324 | + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03); | |
| 1616 | 2325 | padding: 32px; |
| 1617 | 2326 | text-align: center; |
| 1618 | 2327 | } |
| 1619 | 2328 | |
| @@ -1666,8 +2375,86 @@ | ||
| 1666 | 2375 | } |
| 1667 | 2376 | } |
| 1668 | 2377 | |
| 1669 | 2378 | /* ============================================ |
| 2379 | + Save Button States | |
| 2380 | + ============================================ */ | |
| 2381 | + | |
| 2382 | +#kng-cc-save-btn { | |
| 2383 | + transition: background-color 0.4s cubic-bezier(0.25, 1, 0.5, 1), | |
| 2384 | + transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), | |
| 2385 | + box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1); | |
| 2386 | +} | |
| 2387 | + | |
| 2388 | +.kng-cc-btn-icons { | |
| 2389 | + position: relative; | |
| 2390 | + display: inline-flex; | |
| 2391 | + align-items: center; | |
| 2392 | + justify-content: center; | |
| 2393 | + width: 18px; | |
| 2394 | + height: 18px; | |
| 2395 | + flex-shrink: 0; | |
| 2396 | +} | |
| 2397 | + | |
| 2398 | +.kng-cc-btn-icon { | |
| 2399 | + position: absolute; | |
| 2400 | + top: 0; | |
| 2401 | + left: 0; | |
| 2402 | + transition: opacity 0.3s ease, transform 0.3s ease; | |
| 2403 | +} | |
| 2404 | + | |
| 2405 | +.kng-cc-save-icon { | |
| 2406 | + opacity: 1; | |
| 2407 | + transform: scale(1); | |
| 2408 | +} | |
| 2409 | + | |
| 2410 | +.kng-cc-spinner { | |
| 2411 | + opacity: 0; | |
| 2412 | + transform: scale(0.6); | |
| 2413 | +} | |
| 2414 | + | |
| 2415 | +.kng-cc-check-icon { | |
| 2416 | + opacity: 0; | |
| 2417 | + transform: scale(0.6); | |
| 2418 | +} | |
| 2419 | + | |
| 2420 | +/* Saving state */ | |
| 2421 | +#kng-cc-save-btn.is-saving .kng-cc-save-icon { | |
| 2422 | + opacity: 0; | |
| 2423 | + transform: scale(0.6); | |
| 2424 | +} | |
| 2425 | + | |
| 2426 | +#kng-cc-save-btn.is-saving .kng-cc-spinner { | |
| 2427 | + opacity: 1; | |
| 2428 | + transform: scale(1); | |
| 2429 | +} | |
| 2430 | + | |
| 2431 | +/* Saved (success) state */ | |
| 2432 | +#kng-cc-save-btn.is-saved { | |
| 2433 | + background-color: #30d158; | |
| 2434 | +} | |
| 2435 | + | |
| 2436 | +#kng-cc-save-btn.is-saved:hover { | |
| 2437 | + background-color: #30d158; | |
| 2438 | + transform: none; | |
| 2439 | +} | |
| 2440 | + | |
| 2441 | +#kng-cc-save-btn.is-saved .kng-cc-save-icon { | |
| 2442 | + opacity: 0; | |
| 2443 | + transform: scale(0.6); | |
| 2444 | +} | |
| 2445 | + | |
| 2446 | +#kng-cc-save-btn.is-saved .kng-cc-spinner { | |
| 2447 | + opacity: 0; | |
| 2448 | + transform: scale(0.6); | |
| 2449 | +} | |
| 2450 | + | |
| 2451 | +#kng-cc-save-btn.is-saved .kng-cc-check-icon { | |
| 2452 | + opacity: 1; | |
| 2453 | + transform: scale(1); | |
| 2454 | +} | |
| 2455 | + | |
| 2456 | +/* ============================================ | |
| 1670 | 2457 | Responsive |
| 1671 | 2458 | ============================================ */ |
| 1672 | 2459 | |
| 1673 | 2460 | @media (max-width: 1200px) { |
| @@ -1679,8 +2466,14 @@ | ||
| 1679 | 2466 | order: -1; |
| 1680 | 2467 | } |
| 1681 | 2468 | } |
| 1682 | 2469 | |
| 2470 | +@media (max-width: 960px) { | |
| 2471 | + .kng-cc-title { | |
| 2472 | + font-size: 36px; | |
| 2473 | + } | |
| 2474 | +} | |
| 2475 | + | |
| 1683 | 2476 | @media (max-width: 900px) { |
| 1684 | 2477 | .kng-cc-toolbar { |
| 1685 | 2478 | flex-direction: column; |
| 1686 | 2479 | gap: 16px; |
| @@ -1693,8 +2486,35 @@ | ||
| 1693 | 2486 | } |
| 1694 | 2487 | |
| 1695 | 2488 | .kng-cc-import-export-grid { |
| 1696 | 2489 | grid-template-columns: 1fr; |
| 2490 | + } | |
| 2491 | +} | |
| 2492 | + | |
| 2493 | +@media (max-width: 782px) { | |
| 2494 | + .kng-cc-header { | |
| 2495 | + flex-direction: column; | |
| 2496 | + text-align: center; | |
| 2497 | + } | |
| 2498 | + | |
| 2499 | + .kng-cc-header-left { | |
| 2500 | + flex-direction: column; | |
| 2501 | + align-items: center; | |
| 2502 | + } | |
| 2503 | + | |
| 2504 | + .kng-cc-header-right { | |
| 2505 | + justify-content: center; | |
| 2506 | + } | |
| 2507 | + | |
| 2508 | + .kng-cc-filters { | |
| 2509 | + flex-wrap: wrap; | |
| 2510 | + width: 100%; | |
| 2511 | + max-width: 100%; | |
| 2512 | + } | |
| 2513 | + | |
| 2514 | + .kng-cc-search input { | |
| 2515 | + width: 100%; | |
| 2516 | + max-width: 100%; | |
| 1697 | 2517 | } |
| 1698 | 2518 | } |
| 1699 | 2519 | |
| 1700 | 2520 | @media (max-width: 600px) { |