| @@ -15,8 +15,26 @@ | ||
| 15 | 15 | --cookieadmin-warning-color: #e9b306; |
| 16 | 16 | --cookieadmin-red-color: #dd2727; |
| 17 | 17 | } |
| 18 | 18 | |
| 19 | +/* Typography baseline for the banner, modal and reconsent button. Everything inside | |
| 20 | + inherits from these roots instead of the theme's body (font, fluid size, line-height, | |
| 21 | + color, letter-spacing). Any explicit value here beats inheritance, whatever the theme's specificity. */ | |
| 22 | +.cookieadmin_law_container, | |
| 23 | +.cookieadmin_cookie_modal, | |
| 24 | +.cookieadmin_reconsent_wrap{ | |
| 25 | + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| 26 | + font-size: 16px; | |
| 27 | + font-weight: 400; | |
| 28 | + font-style: normal; | |
| 29 | + line-height: 1.5; | |
| 30 | + letter-spacing: normal; | |
| 31 | + word-spacing: normal; | |
| 32 | + text-transform: none; | |
| 33 | + text-align: left; | |
| 34 | + color: #1f2937; | |
| 35 | +} | |
| 36 | + | |
| 19 | 37 | /* Consent page css */ |
| 20 | 38 | |
| 21 | 39 | .cookieadmin_cookie_modal label, .cookieadmin_cookie_modal input { |
| 22 | 40 | padding: 5px; |
| @@ -84,18 +102,25 @@ | ||
| 84 | 102 | z-index: 99999; |
| 85 | 103 | display: none; |
| 86 | 104 | } |
| 87 | 105 | |
| 106 | +.cookieadmin_law_container:focus{ | |
| 107 | + outline: none; | |
| 108 | +} | |
| 109 | + | |
| 88 | 110 | .cookieadmin_consent_btns{ |
| 89 | 111 | align-content: center; |
| 90 | 112 | display: flex; |
| 91 | 113 | justify-content: space-evenly; |
| 92 | 114 | flex-wrap: wrap; |
| 115 | + gap: 8px; | |
| 93 | 116 | } |
| 94 | 117 | |
| 118 | +/* Percentage widths below stay; the cap stops the box growing on very wide screens */ | |
| 95 | 119 | .cookieadmin_box{ |
| 96 | 120 | /*position: fixed;*/ |
| 97 | 121 | width: 25%; |
| 122 | + max-width: 440px; | |
| 98 | 123 | box-sizing: border-box; |
| 99 | 124 | display: none; |
| 100 | 125 | } |
| 101 | 126 | |
| @@ -107,28 +132,43 @@ | ||
| 107 | 132 | } |
| 108 | 133 | |
| 109 | 134 | |
| 110 | 135 | .cookieadmin_consent_inside{ |
| 111 | - color: black; | |
| 112 | - background-color: #FFFFFF; | |
| 113 | - border: 1px solid #f4f4f4; | |
| 136 | + color: #1f2937; | |
| 137 | + background-color: #ffffff; | |
| 138 | + border: 1px solid #ffffff; | |
| 114 | 139 | padding:15px; |
| 115 | 140 | border-radius: 4px; |
| 116 | 141 | box-shadow:1px 3px 10px rgba(0, 0, 0, 0.2); |
| 117 | 142 | } |
| 118 | 143 | |
| 119 | -#cookieadmin_notice_title{ | |
| 120 | - font-weight: 601; | |
| 121 | - margin: 0px; | |
| 122 | - padding-left: 5px; | |
| 144 | +/* Title and notice are <p>s: scoped by ID so theme paragraph sizes/margins don't apply. | |
| 145 | + No side padding, so text lines up with the buttons and links. */ | |
| 146 | +.cookieadmin_law_container p#cookieadmin_notice_title{ | |
| 147 | + margin: 0 0 6px; | |
| 148 | + padding: 0; | |
| 149 | + font-size: 16px; | |
| 150 | + font-weight: 700; | |
| 151 | + line-height: 1.4; | |
| 123 | 152 | } |
| 124 | 153 | |
| 154 | +.cookieadmin_law_container p#cookieadmin_notice{ | |
| 155 | + margin: 0; | |
| 156 | + padding: 0; | |
| 157 | + font-size: 14px; | |
| 158 | + line-height: 22px; | |
| 159 | +} | |
| 160 | + | |
| 125 | 161 | .cookieadmin_notice_con{ |
| 126 | - font-size: initial; | |
| 127 | - padding: 0px 6px; | |
| 162 | + padding: 0; | |
| 128 | 163 | flex: 1; |
| 129 | 164 | } |
| 130 | 165 | |
| 166 | +/* Box layout: space between the notice and the buttons (footer layout uses the group's gap) */ | |
| 167 | +.cookieadmin_consent_inside > .cookieadmin_consent_btns{ | |
| 168 | + margin-top: 12px; | |
| 169 | +} | |
| 170 | + | |
| 131 | 171 | .cookieadmin_cookie_modal{ |
| 132 | 172 | display: none; |
| 133 | 173 | flex-direction: column; |
| 134 | 174 | position: fixed; |
| @@ -165,8 +205,12 @@ | ||
| 165 | 205 | bottom: 0px; |
| 166 | 206 | animation: 0.5s ease-out forwards cookieadmin_slideUp; |
| 167 | 207 | } |
| 168 | 208 | |
| 209 | +.cookieadmin_cookie_modal:focus{ | |
| 210 | + outline: none; | |
| 211 | +} | |
| 212 | + | |
| 169 | 213 | .cookieadmin_modal_overlay{ |
| 170 | 214 | display: none; |
| 171 | 215 | position: fixed; |
| 172 | 216 | top: 0; |
| @@ -172,48 +216,102 @@ | ||
| 172 | 216 | top: 0; |
| 173 | 217 | left: 0; |
| 174 | 218 | width: 100%; |
| 175 | 219 | height: 100%; |
| 176 | - background-color: rgba(0, 0, 0, 0.5); | |
| 220 | + background-color: rgba(0, 0, 0, 0.4); | |
| 177 | 221 | z-index: 1000; |
| 178 | 222 | } |
| 179 | 223 | |
| 224 | +/* Centered, not baseline: the CSS-drawn close button has no text baseline */ | |
| 180 | 225 | .cookieadmin_mod_head{ |
| 181 | 226 | display: flex; |
| 182 | 227 | justify-content: space-between; |
| 228 | + align-items: center; | |
| 229 | + gap: 12px; | |
| 230 | + padding: 14px 20px; | |
| 231 | + border-bottom: 1px solid #CCCCCC; | |
| 183 | 232 | } |
| 184 | 233 | |
| 185 | -.cookieadmin_mod_head, .cookieadmin_wrapper{ | |
| 186 | - padding: 15px; | |
| 187 | - border-bottom: 1px solid #CCCCCC; | |
| 234 | +/* Close icon drawn in CSS, font-size 0 hides any glyph left in filtered templates. | |
| 235 | + "all: unset" + (0,3,1) selector keeps theme button/hover styles out, same as the category buttons. */ | |
| 236 | +.cookieadmin_cookie_modal .cookieadmin_mod_head button.cookieadmin_close_pref{ | |
| 237 | + all: unset; | |
| 238 | + display: inline-block; | |
| 239 | + position: relative; | |
| 240 | + flex-shrink: 0; | |
| 241 | + width: 32px; | |
| 242 | + height: 32px; | |
| 243 | + border-radius: 4px; | |
| 244 | + color: #6b7280; | |
| 245 | + font-size: 0; | |
| 246 | + cursor: pointer; | |
| 247 | + transition: color .15s, background-color .15s; | |
| 188 | 248 | } |
| 189 | 249 | |
| 190 | -.cookieadmin_close_pref{ | |
| 191 | - background: none; | |
| 192 | - border: none; | |
| 193 | - align-self: baseline; | |
| 194 | - color: gray; | |
| 195 | - cursor: pointer; | |
| 196 | - padding: 0px; | |
| 250 | +.cookieadmin_cookie_modal .cookieadmin_mod_head button.cookieadmin_close_pref::before, | |
| 251 | +.cookieadmin_cookie_modal .cookieadmin_mod_head button.cookieadmin_close_pref::after{ | |
| 252 | + content: ""; | |
| 253 | + position: absolute; | |
| 254 | + top: 50%; | |
| 255 | + left: 50%; | |
| 256 | + width: 16px; | |
| 257 | + height: 2px; | |
| 258 | + background-color: currentColor; | |
| 259 | + border-radius: 1px; | |
| 260 | + transform: translate(-50%, -50%) rotate(45deg); | |
| 197 | 261 | } |
| 198 | 262 | |
| 263 | +.cookieadmin_cookie_modal .cookieadmin_mod_head button.cookieadmin_close_pref::after{ | |
| 264 | + transform: translate(-50%, -50%) rotate(-45deg); | |
| 265 | +} | |
| 266 | + | |
| 267 | +.cookieadmin_cookie_modal .cookieadmin_mod_head button.cookieadmin_close_pref:hover{ | |
| 268 | + color: #111827; | |
| 269 | + background-color: rgba(0, 0, 0, 0.06); | |
| 270 | +} | |
| 271 | + | |
| 272 | +.cookieadmin_cookie_modal .cookieadmin_mod_head button.cookieadmin_close_pref:focus-visible{ | |
| 273 | + outline: 2px solid var(--cookieadmin-secondary-color); | |
| 274 | + outline-offset: 2px; | |
| 275 | +} | |
| 276 | + | |
| 199 | 277 | .cookieadmin_preference_title{ |
| 278 | + margin: 0; | |
| 200 | 279 | font-size: 20px; |
| 201 | - font-weight: 801; | |
| 202 | - margin: 9px; | |
| 280 | + font-weight: 700; | |
| 281 | + line-height: 1.3; | |
| 203 | 282 | } |
| 204 | 283 | |
| 284 | +/* 5px + the wrapper's 15px lines the intro up with the title's 20px */ | |
| 205 | 285 | .cookieadmin_preference_details{ |
| 206 | - padding: 0px 10px; | |
| 286 | + padding: 0px 5px; | |
| 207 | 287 | } |
| 208 | 288 | |
| 289 | +/* break-word (not overflow:auto) so long URLs wrap instead of adding an inner scrollbar */ | |
| 209 | 290 | .cookieadmin_preference{ |
| 210 | - overflow: auto; | |
| 211 | - font-size: 15px; | |
| 212 | - height: auto; | |
| 213 | 291 | padding: 10px 0px; |
| 292 | + font-size: 14px; | |
| 293 | + line-height: 28px; | |
| 294 | + overflow-wrap: break-word; | |
| 214 | 295 | } |
| 215 | 296 | |
| 297 | +/* Admin-entered HTML: keep theme paragraph margins and link colors out */ | |
| 298 | +.cookieadmin_cookie_modal .cookieadmin_preference p{ | |
| 299 | + margin: 0 0 8px; | |
| 300 | + padding: 0; | |
| 301 | + font-size: inherit; | |
| 302 | + line-height: inherit; | |
| 303 | +} | |
| 304 | + | |
| 305 | +.cookieadmin_cookie_modal .cookieadmin_preference p:last-child{ | |
| 306 | + margin-bottom: 0; | |
| 307 | +} | |
| 308 | + | |
| 309 | +.cookieadmin_cookie_modal .cookieadmin_preference a{ | |
| 310 | + color: inherit; | |
| 311 | + text-decoration: underline; | |
| 312 | +} | |
| 313 | + | |
| 216 | 314 | .cookieadmin_details_wrapper{ |
| 217 | 315 | padding: 0px 15px; |
| 218 | 316 | height: calc(100% - 6%); |
| 219 | 317 | overflow: auto; |
| @@ -229,31 +327,45 @@ | ||
| 229 | 327 | display: flex; |
| 230 | 328 | justify-content: space-between; |
| 231 | 329 | } |
| 232 | 330 | |
| 233 | -.cookieadmin_header > span > label{ | |
| 234 | - cursor:pointer; | |
| 331 | + | |
| 332 | +/* Clickable header text, e.g. Pro's "Override GPC" label */ | |
| 333 | +.cookieadmin_header label[for]{ | |
| 334 | + cursor: pointer; | |
| 235 | 335 | } |
| 236 | 336 | |
| 237 | -.cookieadmin_remark{ | |
| 337 | +/* Header labels get explicit displays scoped to .cookieadmin_header so theme rules | |
| 338 | + like "label { display: block }" can't push them onto their own line */ | |
| 339 | +.cookieadmin_header label.stitle{ | |
| 340 | + display: inline; | |
| 341 | +} | |
| 342 | + | |
| 343 | +.cookieadmin_header .cookieadmin_remark{ | |
| 238 | 344 | display:none; |
| 239 | 345 | justify-self:right; |
| 240 | 346 | } |
| 241 | 347 | |
| 242 | -.cookieadmin_act{ | |
| 348 | +.cookieadmin_header .cookieadmin_act{ | |
| 243 | 349 | display: inline; |
| 244 | 350 | color: #1863dc; |
| 245 | 351 | } |
| 246 | 352 | |
| 353 | +/* Lines up with .cookieadmin_desc; the old 4rem right margin squeezed cards on phones */ | |
| 247 | 354 | .cookieadmin-modal-cookies-list{ |
| 248 | 355 | display:none; |
| 249 | - padding:1px; | |
| 250 | - border-radius: 10px; | |
| 251 | - margin: 0px 20px; | |
| 252 | - margin-right: 4rem; | |
| 253 | - font-size: smaller; | |
| 254 | - font-size: 1rem; | |
| 356 | + margin: 8px 20px 4px; | |
| 357 | + font-size: 14px; | |
| 358 | + text-align: left; | |
| 359 | +} | |
| 360 | + | |
| 361 | +.cookieadmin-modal-cookies-list .cookieadmin-nocookie-cat{ | |
| 362 | + display: block; | |
| 363 | + padding: 4px 0; | |
| 364 | + font-size: 13px; | |
| 365 | + font-weight: 600; | |
| 255 | 366 | text-align: center; |
| 367 | + opacity: 0.7; | |
| 256 | 368 | } |
| 257 | 369 | |
| 258 | 370 | .cookieadmin_desc{ |
| 259 | 371 | padding:5px 20px; |
| @@ -267,103 +379,255 @@ | ||
| 267 | 379 | flex-wrap: wrap; |
| 268 | 380 | width: 100%; |
| 269 | 381 | } |
| 270 | 382 | |
| 383 | +/* Padding matches the header */ | |
| 271 | 384 | .cookieadmin_modal_footer{ |
| 272 | - left: 0px; | |
| 273 | - padding: 15px; | |
| 385 | + display: flex; | |
| 386 | + padding: 14px 20px; | |
| 274 | 387 | flex-wrap: wrap; |
| 388 | + gap: 8px; | |
| 275 | 389 | border-top: 1px solid #CCCCCC; |
| 276 | 390 | } |
| 277 | 391 | |
| 278 | -button.cookieadmin_btn{ | |
| 392 | +/* GPC block and links take their own row above/below the buttons */ | |
| 393 | +.cookieadmin_modal_footer > :not(.cookieadmin_btn){ | |
| 394 | + flex-basis: 100%; | |
| 395 | +} | |
| 396 | + | |
| 397 | +/* Side panel is narrow: stack everything. nowrap matters, a wrapping column | |
| 398 | + overflows into extra columns beside the panel when height is limited. */ | |
| 399 | +.cookieadmin_side .cookieadmin_modal_footer{ | |
| 400 | + flex-direction: column; | |
| 401 | + flex-wrap: nowrap; | |
| 402 | +} | |
| 403 | + | |
| 404 | +.cookieadmin_cookie_modal.cookieadmin_side .cookieadmin_modal_footer > *{ | |
| 405 | + flex: none; | |
| 406 | +} | |
| 407 | + | |
| 408 | +/* Scoped to the containers so common theme rules (e.g. ".elementor-kit-N button") don't win. | |
| 409 | + Colors stay admin-controlled via the inline styles set in consent.js. */ | |
| 410 | +.cookieadmin_law_container button.cookieadmin_btn, | |
| 411 | +.cookieadmin_cookie_modal button.cookieadmin_btn{ | |
| 412 | + display: inline-flex; | |
| 413 | + align-items: center; | |
| 414 | + justify-content: center; | |
| 415 | + flex: 1 1 0; | |
| 416 | + min-height: 40px; | |
| 417 | + margin: 0; | |
| 418 | + padding: 8px 16px; | |
| 279 | 419 | background-color: transparent; |
| 280 | - border: 1px solid gray; | |
| 420 | + background-image: none; | |
| 421 | + border: 1px solid rgba(0, 0, 0, 0.2); | |
| 422 | + border-radius: 4px; | |
| 423 | + box-shadow: none; | |
| 281 | 424 | color: #1863dc; |
| 282 | - padding: 0.4rem 0.9rem; | |
| 283 | - border-radius: 4px; | |
| 284 | - margin: 2px 5px; | |
| 425 | + font-family: inherit; | |
| 426 | + font-size: 14px; | |
| 427 | + font-weight: 600; | |
| 428 | + line-height: 1; | |
| 429 | + letter-spacing: normal; | |
| 430 | + text-align: center; | |
| 431 | + text-decoration: none; | |
| 432 | + text-shadow: none; | |
| 433 | + text-transform: none; | |
| 434 | + text-wrap: auto; | |
| 285 | 435 | cursor: pointer; |
| 286 | - flex: auto; | |
| 287 | - text-wrap: auto; | |
| 436 | + transition: filter .15s; | |
| 288 | 437 | } |
| 289 | 438 | |
| 290 | -.cookieadmin_btn:hover{ | |
| 291 | - opacity: 0.8; | |
| 439 | +/* Footer buttons size to their labels so "Save My Preferences" doesn't wrap; | |
| 440 | + they still fill the row. The banner keeps equal widths. */ | |
| 441 | +.cookieadmin_modal_footer button.cookieadmin_btn{ | |
| 442 | + flex: 1 1 auto; | |
| 292 | 443 | } |
| 293 | 444 | |
| 294 | -.cookieadmin_show_pref_cookies{ | |
| 445 | +/* Banner box is narrow (25% of the screen at 1366px = ~338px): size buttons to their labels | |
| 446 | + with tighter padding so "Accept All" stays on one line; they still fill the row. */ | |
| 447 | +.cookieadmin_consent_inside > .cookieadmin_consent_btns button.cookieadmin_btn{ | |
| 448 | + flex: 1 1 auto; | |
| 449 | + padding-left: 12px; | |
| 450 | + padding-right: 12px; | |
| 451 | +} | |
| 452 | + | |
| 453 | +.cookieadmin_law_container button.cookieadmin_btn:hover, | |
| 454 | +.cookieadmin_cookie_modal button.cookieadmin_btn:hover{ | |
| 455 | + filter: brightness(0.92); | |
| 456 | +} | |
| 457 | + | |
| 458 | +.cookieadmin_law_container button.cookieadmin_btn:focus-visible, | |
| 459 | +.cookieadmin_cookie_modal button.cookieadmin_btn:focus-visible{ | |
| 460 | + outline: 2px solid var(--cookieadmin-secondary-color); | |
| 461 | + outline-offset: 2px; | |
| 462 | +} | |
| 463 | + | |
| 464 | +/* Category name + chevron in one accordion button. "all: unset" drops theme button styles; | |
| 465 | + the selector (0,3,1) outranks state rules like ".elementor-kit-N button:hover". | |
| 466 | + Scoped to .cookieadmin_header: Pro reuses this class for a shortcode button. */ | |
| 467 | +.cookieadmin_types .cookieadmin_header button.cookieadmin_show_pref_cookies{ | |
| 468 | + all: unset; | |
| 469 | + display: inline-flex; | |
| 470 | + align-items: center; | |
| 471 | + gap: 8px; | |
| 472 | + padding: 5px 0; | |
| 473 | + color: inherit; | |
| 474 | + font: inherit; | |
| 475 | + font-size: 15px; | |
| 476 | + font-weight: 700; | |
| 477 | + line-height: 1.4; | |
| 295 | 478 | cursor: pointer; |
| 296 | - font-size: 18px; | |
| 297 | - font-family: initial; | |
| 298 | 479 | } |
| 299 | 480 | |
| 300 | -button.cookieadmin_re_consent{ | |
| 481 | +.cookieadmin_types .cookieadmin_header button.cookieadmin_show_pref_cookies::before{ | |
| 482 | + content: ""; | |
| 483 | + flex-shrink: 0; | |
| 484 | + width: 7px; | |
| 485 | + height: 7px; | |
| 486 | + border-right: 2px solid currentColor; | |
| 487 | + border-bottom: 2px solid currentColor; | |
| 488 | + transform: rotate(-45deg); | |
| 489 | + transition: transform .2s; | |
| 490 | +} | |
| 491 | + | |
| 492 | +.cookieadmin_types .cookieadmin_header button.cookieadmin_show_pref_cookies.dwn::before{ | |
| 493 | + transform: rotate(45deg); | |
| 494 | +} | |
| 495 | + | |
| 496 | +/* all: unset removes the outline, so the focus ring is added back */ | |
| 497 | +.cookieadmin_types .cookieadmin_header button.cookieadmin_show_pref_cookies:focus-visible{ | |
| 498 | + outline: 2px solid var(--cookieadmin-secondary-color); | |
| 499 | + outline-offset: 2px; | |
| 500 | + border-radius: 2px; | |
| 501 | +} | |
| 502 | + | |
| 503 | +/* Reconsent: all:unset drops theme button styles (min-height, hover/focus rules); the | |
| 504 | + wrapper selector (0,2,2) outranks ".elementor-kit-N button:hover". Plain selector kept | |
| 505 | + for templates filtered without the wrapper class. JS toggles display inline (none/block). */ | |
| 506 | +button.cookieadmin_re_consent, | |
| 507 | +body .cookieadmin_reconsent_wrap button.cookieadmin_re_consent{ | |
| 508 | + all: unset; | |
| 301 | 509 | display: none; |
| 302 | 510 | position: fixed; |
| 303 | 511 | bottom: 15px; |
| 304 | 512 | left: 15px; |
| 513 | + z-index: 99999; | |
| 514 | + box-sizing: border-box; | |
| 515 | + width: 50px; | |
| 516 | + height: 50px; | |
| 517 | + padding: 5px; | |
| 518 | + border-radius: 50%; | |
| 305 | 519 | background-color: #374FD4; |
| 306 | - height: 50px; | |
| 307 | - width: 50px; | |
| 308 | - border-radius: 50% !important; | |
| 520 | + box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4); | |
| 309 | 521 | cursor: pointer; |
| 310 | - border: 0px; | |
| 311 | - z-index: 99999; | |
| 312 | - padding: 5px !important; | |
| 313 | - box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4); | |
| 314 | - align-items: center; | |
| 315 | - justify-content: center; | |
| 522 | + transition: filter .15s; | |
| 316 | 523 | } |
| 317 | 524 | |
| 525 | +button.cookieadmin_re_consent:hover, | |
| 526 | +body .cookieadmin_reconsent_wrap button.cookieadmin_re_consent:hover{ | |
| 527 | + filter: brightness(0.92); | |
| 528 | +} | |
| 529 | + | |
| 530 | +button.cookieadmin_re_consent:focus-visible, | |
| 531 | +body .cookieadmin_reconsent_wrap button.cookieadmin_re_consent:focus-visible{ | |
| 532 | + outline: 2px solid var(--cookieadmin-secondary-color); | |
| 533 | + outline-offset: 3px; | |
| 534 | +} | |
| 535 | + | |
| 536 | +/* Block + the button's 5px padding centres the 40px icon; theme img rules kept out */ | |
| 537 | +.cookieadmin_re_consent img.cookieadmin_reconsent_img{ | |
| 538 | + display: block; | |
| 539 | + width: 40px; | |
| 540 | + height: 40px; | |
| 541 | + max-width: none; | |
| 542 | + margin: 0; | |
| 543 | + padding: 0; | |
| 544 | + border: 0; | |
| 545 | + border-radius: 0; | |
| 546 | + box-shadow: none; | |
| 547 | +} | |
| 548 | + | |
| 549 | +/* Flat card: theme font, 4px corners like the buttons. Muted text uses opacity so it | |
| 550 | + works on any admin-chosen modal background. */ | |
| 318 | 551 | .cookieadmin-cookie-card { |
| 319 | - background: ghostwhite; | |
| 320 | - border-radius: 10px; | |
| 321 | - padding: 16px; | |
| 322 | - font-family: 'Open Sans', 'Segoe UI', sans-serif; | |
| 323 | - box-shadow: 0 2px 6px rgba(0,0,0,0.1); | |
| 324 | - margin: 10px auto; | |
| 552 | + margin: 0 0 8px; | |
| 553 | + padding: 12px 14px; | |
| 554 | + border: 1px solid rgb(187 187 187 / 12%); | |
| 555 | + border-radius: 4px; | |
| 325 | 556 | text-align: left; |
| 326 | 557 | } |
| 327 | 558 | |
| 328 | 559 | .cookieadmin-cookie-header { |
| 329 | 560 | display: flex; |
| 561 | + flex-wrap: wrap; | |
| 330 | 562 | justify-content: space-between; |
| 331 | - font-size: 1rem; | |
| 332 | - margin-bottom: 6px; | |
| 563 | + gap: 2px 12px; | |
| 564 | + font-size: 14px; | |
| 333 | 565 | } |
| 334 | 566 | |
| 335 | 567 | .cookieadmin-cookie-name { |
| 336 | - font-weight: bold; | |
| 337 | - color: #333; | |
| 568 | + font-weight: 600; | |
| 569 | + word-break: break-word; | |
| 570 | + overflow-wrap: anywhere; | |
| 338 | 571 | } |
| 339 | 572 | |
| 340 | 573 | .cookieadmin-cookie-duration { |
| 341 | - font-size: 0.85rem; | |
| 574 | + font-size: 13px; | |
| 575 | + opacity: 0.75; | |
| 342 | 576 | } |
| 343 | 577 | |
| 344 | 578 | .cookieadmin-cookie-duration > b { |
| 345 | - font-weight: bold; | |
| 579 | + font-weight: 600; | |
| 346 | 580 | } |
| 347 | 581 | |
| 348 | -.cookieadmin-cookie-description { | |
| 349 | - font-size: 0.9rem; | |
| 350 | - margin-bottom: 12px; | |
| 582 | +/* Scoped so theme paragraph margins/sizes don't apply */ | |
| 583 | +.cookieadmin-cookie-card p.cookieadmin-cookie-description { | |
| 584 | + margin: 6px 0 0; | |
| 585 | + padding: 0; | |
| 586 | + font-size: 13px; | |
| 587 | + line-height: 1.5; | |
| 351 | 588 | } |
| 352 | 589 | |
| 353 | 590 | .cookieadmin-cookie-tags { |
| 354 | - display: flex; | |
| 355 | - gap: 8px; | |
| 591 | + display: flex; | |
| 592 | + gap: 8px; | |
| 593 | + margin-top: 8px; | |
| 356 | 594 | } |
| 357 | 595 | |
| 358 | 596 | .cookieadmin-tag { |
| 359 | - background: #e0e0e0; | |
| 360 | - padding: 4px 10px; | |
| 361 | - border-radius: 12px; | |
| 362 | - font-size: 0.75rem; | |
| 363 | - color: #333; | |
| 597 | + background: rgba(0, 0, 0, 0.06); | |
| 598 | + padding: 2px 8px; | |
| 599 | + border-radius: 4px; | |
| 600 | + font-size: 12px; | |
| 364 | 601 | } |
| 365 | 602 | |
| 603 | +/* Pro DPDP contact box. Keyed on the ID (not a new class) so it also restyles | |
| 604 | + older Pro versions that still output the shared .cookieadmin-cookie-card class. */ | |
| 605 | +#cookieadmin_dpdp_contact { | |
| 606 | + margin: 4px 0 12px; | |
| 607 | + padding: 12px 14px; | |
| 608 | + background: rgba(0, 0, 0, 0.04); | |
| 609 | + border: 1px solid rgba(0, 0, 0, 0.08); | |
| 610 | + border-radius: 4px; | |
| 611 | + box-shadow: none; | |
| 612 | + font-family: inherit; | |
| 613 | + font-size: 14px; | |
| 614 | + line-height: 1.5; | |
| 615 | + text-align: left; | |
| 616 | +} | |
| 617 | + | |
| 618 | +#cookieadmin_dpdp_contact a { | |
| 619 | + color: inherit; | |
| 620 | + text-decoration: underline; | |
| 621 | +} | |
| 622 | + | |
| 623 | +/* "Exercise your rights" link, the card's main action */ | |
| 624 | +#cookieadmin_dpdp_contact > a { | |
| 625 | + display: inline-block; | |
| 626 | + margin-top: 6px; | |
| 627 | + font-weight: 600; | |
| 628 | +} | |
| 629 | + | |
| 366 | 630 | /* Website consent box End*/ |
| 367 | 631 | |
| 368 | 632 | |
| 369 | 633 | |
| @@ -370,20 +634,42 @@ | ||
| 370 | 634 | |
| 371 | 635 | |
| 372 | 636 | /* Checkbox switch Start */ |
| 373 | 637 | |
| 374 | -.cookieadmin_toggle { | |
| 638 | +/* Box matches the 34x21 slider; the modal's generic label/input padding is cancelled | |
| 639 | + so the switch no longer overflows its box */ | |
| 640 | +.cookieadmin_toggle, | |
| 641 | +.cookieadmin_cookie_modal .cookieadmin_toggle { | |
| 375 | 642 | position: relative; |
| 376 | 643 | display: inline-block; |
| 377 | - width: 24px; | |
| 378 | - height: 11px; | |
| 644 | + flex-shrink: 0; | |
| 645 | + width: 34px; | |
| 646 | + height: 21px; | |
| 647 | + margin: 0; | |
| 648 | + padding: 0; | |
| 379 | 649 | } |
| 380 | 650 | |
| 381 | 651 | /* Hide the checkbox input */ |
| 382 | -.cookieadmin_toggle input{ | |
| 383 | - display: none; | |
| 652 | +.cookieadmin_toggle input, | |
| 653 | +.cookieadmin_cookie_modal .cookieadmin_toggle input{ | |
| 654 | + /* display: none; */ | |
| 655 | + position: absolute; | |
| 656 | + opacity: 0; | |
| 657 | + width: 0; | |
| 658 | + height: 0; | |
| 659 | + margin: 0; | |
| 660 | + padding: 0; | |
| 384 | 661 | } |
| 385 | 662 | |
| 663 | +/* Keyboard accessibility: When the checkbox is focused, add a visible outline to indicate focus. */ | |
| 664 | +.cookieadmin_show_pref_cookies:focus-visible{ | |
| 665 | + outline: 1px solid #000; | |
| 666 | +} | |
| 667 | +.cookieadmin_toggle input:focus + .cookieadmin_slider { | |
| 668 | + outline: 1px solid #000; | |
| 669 | +} | |
| 670 | +/* end keyboard accessibility */ | |
| 671 | + | |
| 386 | 672 | /* Describe slider's look and position. */ |
| 387 | 673 | .cookieadmin_slider { |
| 388 | 674 | position: absolute; |
| 389 | 675 | cursor: pointer; |
| @@ -481,25 +767,48 @@ | ||
| 481 | 767 | /* Policy Links */ |
| 482 | 768 | .cookieadmin_policy_link_box{ |
| 483 | 769 | display: flex; |
| 484 | 770 | justify-content: space-around; |
| 771 | + gap: 4px 16px; | |
| 772 | + margin-top: 8px; | |
| 485 | 773 | font-size: 13px; |
| 486 | 774 | flex-wrap: wrap; |
| 487 | 775 | } |
| 488 | 776 | |
| 777 | +/* Same treatment as the modal links, so theme link colors don't apply */ | |
| 778 | +.cookieadmin_law_container .cookieadmin_policy_link_box a{ | |
| 779 | + color: inherit; | |
| 780 | + text-decoration: underline; | |
| 781 | +} | |
| 782 | + | |
| 489 | 783 | .cookieadmin_modal_policy_link_box{ |
| 490 | 784 | display: flex; |
| 491 | - gap: 5px; | |
| 785 | + gap: 4px 16px; | |
| 492 | 786 | font-size: 13px; |
| 493 | 787 | flex-wrap: wrap; |
| 494 | 788 | } |
| 495 | 789 | |
| 790 | +/* Same treatment as the intro and DPDP links, so theme link colors don't apply */ | |
| 791 | +.cookieadmin_cookie_modal .cookieadmin_modal_policy_link_box a{ | |
| 792 | + color: inherit; | |
| 793 | + text-decoration: underline; | |
| 794 | +} | |
| 795 | + | |
| 796 | +/* Footer gap handles spacing; the old 9px side margins pushed links out of line with the buttons */ | |
| 496 | 797 | .cookieadmin_modal_footer_links{ |
| 497 | 798 | display:flex; |
| 799 | + flex-wrap: wrap; | |
| 800 | + align-items: center; | |
| 498 | 801 | justify-content:space-between; |
| 499 | - margin:9px 9px 0 9px; | |
| 802 | + gap: 8px 16px; | |
| 803 | + margin-top: 4px; | |
| 500 | 804 | } |
| 501 | 805 | |
| 806 | +/* Hidden when there are no policy links and "Powered by" is off (Pro) */ | |
| 807 | +.cookieadmin_modal_footer_links:not(:has(*)){ | |
| 808 | + display: none; | |
| 809 | +} | |
| 810 | + | |
| 502 | 811 | /* CSS for phones only */ |
| 503 | 812 | @media (max-width: 767px) { |
| 504 | 813 | |
| 505 | 814 | .cookieadmin_center{ |
| @@ -511,10 +820,14 @@ | ||
| 511 | 820 | .cookieadmin_show_pref_cookies{ |
| 512 | 821 | font-size: 14px; |
| 513 | 822 | } |
| 514 | 823 | |
| 515 | - .cookieadmin_law_container, .cookieadmin_box{ | |
| 516 | - width: 90%; | |
| 824 | + /* Even 16px on both sides; the footer bar keeps its 100% width */ | |
| 825 | + .cookieadmin_box{ | |
| 826 | + left: 16px; | |
| 827 | + right: 16px; | |
| 828 | + width: auto; | |
| 829 | + max-width: none; | |
| 517 | 830 | } |
| 518 | 831 | |
| 519 | 832 | .cookieadmin_side{ |
| 520 | 833 | width: 100%; |
| @@ -559,16 +872,38 @@ | ||
| 559 | 872 | |
| 560 | 873 | .cookieadmin_consent_btns { |
| 561 | 874 | flex-shrink: 0; |
| 562 | 875 | } |
| 876 | + | |
| 877 | + /* Footer layout: the button group sizes to its content, so equal-width (flex-basis 0) | |
| 878 | + buttons would shrink and wrap their labels. Size them to their labels instead. */ | |
| 879 | + .cookieadmin_footer .cookieadmin_consent_btns button.cookieadmin_btn{ | |
| 880 | + flex: 0 0 auto; | |
| 881 | + } | |
| 563 | 882 | } |
| 564 | 883 | |
| 565 | 884 | @media (max-width:480px){ |
| 566 | - .cookieadmin_consent_inside .cookieadmin_btn { | |
| 567 | - width: 100%; | |
| 568 | - margin: 5px 0; | |
| 885 | + .cookieadmin_preference_title{ | |
| 886 | + font-size: 18px; | |
| 569 | 887 | } |
| 570 | 888 | |
| 889 | + /* 28px leaves no room for the categories on phones */ | |
| 890 | + .cookieadmin_preference{ | |
| 891 | + line-height: 22px; | |
| 892 | + } | |
| 893 | + | |
| 894 | + .cookieadmin_law_container button.cookieadmin_btn, | |
| 895 | + .cookieadmin_cookie_modal button.cookieadmin_btn, | |
| 896 | + .cookieadmin_consent_inside > .cookieadmin_consent_btns button.cookieadmin_btn{ | |
| 897 | + flex-basis: 100%; | |
| 898 | + } | |
| 899 | + | |
| 571 | 900 | .cookieadmin_modal_footer{ |
| 572 | - padding: 8px; | |
| 901 | + padding: 12px 16px; | |
| 573 | 902 | } |
| 574 | -} | |
| 903 | +} | |
| 904 | + | |
| 905 | +@media (prefers-reduced-motion: reduce){ | |
| 906 | + .cookieadmin_law_container *, .cookieadmin_cookie_modal *{ | |
| 907 | + transition: none !important; | |
| 908 | + } | |
| 909 | +} | |
