| @@ -15,18 +15,28 @@ | ||
| 15 | 15 | --cookieadmin-warning-color: #e9b306; |
| 16 | 16 | --cookieadmin-red-color: #dd2727; |
| 17 | 17 | } |
| 18 | 18 | |
| 19 | -/* Buttons End */ | |
| 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 | +} | |
| 20 | 36 | |
| 21 | 37 | /* Consent page css */ |
| 22 | 38 | |
| 23 | -.cookieadmin-postbox-container { | |
| 24 | - max-width: 92vw; | |
| 25 | - float: unset; | |
| 26 | - margin: 10px; | |
| 27 | -} | |
| 28 | - | |
| 29 | 39 | .cookieadmin_cookie_modal label, .cookieadmin_cookie_modal input { |
| 30 | 40 | padding: 5px; |
| 31 | 41 | margin-right: 5px; |
| 32 | 42 | font-size: 15px; |
| @@ -78,67 +88,9 @@ | ||
| 78 | 88 | } |
| 79 | 89 | |
| 80 | 90 | /* Modal animations Ends */ |
| 81 | 91 | |
| 82 | -.cookieadmin_consent-header{ | |
| 83 | - display: flex; | |
| 84 | - background: #12625f4d; | |
| 85 | - color: black; | |
| 86 | - padding: 12px; | |
| 87 | - box-sizing: border-box; | |
| 88 | - margin: 4px; | |
| 89 | - align-items: center; | |
| 90 | - justify-content: space-between; | |
| 91 | -} | |
| 92 | 92 | |
| 93 | -.cookieadmin_consent-contents { | |
| 94 | - display: flex; | |
| 95 | - margin: 0px 5px; | |
| 96 | -} | |
| 97 | - | |
| 98 | -.cookieadmin_consent_settings { | |
| 99 | - display: flex; | |
| 100 | - width: 100%; | |
| 101 | - flex-direction: column; | |
| 102 | - background: #ffffff; | |
| 103 | - /*margin-left: -3px;*/ | |
| 104 | -} | |
| 105 | - | |
| 106 | - | |
| 107 | - | |
| 108 | -.cookieadmin-contents { | |
| 109 | - width: 100%; | |
| 110 | -} | |
| 111 | - | |
| 112 | -.cookieadmin-setting { | |
| 113 | - display: flex; | |
| 114 | - padding: 6px 0px; | |
| 115 | - justify-content: flex-start; | |
| 116 | -} | |
| 117 | - | |
| 118 | -.cookieadmin-setting-head { | |
| 119 | - width: 100%; | |
| 120 | - padding: 5px; | |
| 121 | - align-content: center; | |
| 122 | -} | |
| 123 | - | |
| 124 | -.cookieadmin-setting-contents { | |
| 125 | - align-items: baseline; | |
| 126 | - padding: 5px; | |
| 127 | - margin: 5px; | |
| 128 | -} | |
| 129 | - | |
| 130 | -.cookieadmin-setting-results { | |
| 131 | - align-items: baseline; | |
| 132 | - padding: 5px; | |
| 133 | - margin: 5px; | |
| 134 | - width: 80%; | |
| 135 | -} | |
| 136 | - | |
| 137 | -.cookieadmin-button{ | |
| 138 | - padding: 5px; | |
| 139 | - row-gap: 5px; | |
| 140 | -} | |
| 141 | 93 | /* Consent page css End*/ |
| 142 | 94 | |
| 143 | 95 | |
| 144 | 96 | /* Website consent box */ |
| @@ -150,19 +102,25 @@ | ||
| 150 | 102 | z-index: 99999; |
| 151 | 103 | display: none; |
| 152 | 104 | } |
| 153 | 105 | |
| 106 | +.cookieadmin_law_container:focus{ | |
| 107 | + outline: none; | |
| 108 | +} | |
| 109 | + | |
| 154 | 110 | .cookieadmin_consent_btns{ |
| 155 | 111 | align-content: center; |
| 156 | 112 | display: flex; |
| 157 | 113 | justify-content: space-evenly; |
| 158 | 114 | flex-wrap: wrap; |
| 159 | - gap: 10px; | |
| 115 | + gap: 8px; | |
| 160 | 116 | } |
| 161 | 117 | |
| 118 | +/* Percentage widths below stay; the cap stops the box growing on very wide screens */ | |
| 162 | 119 | .cookieadmin_box{ |
| 163 | 120 | /*position: fixed;*/ |
| 164 | 121 | width: 25%; |
| 122 | + max-width: 440px; | |
| 165 | 123 | box-sizing: border-box; |
| 166 | 124 | display: none; |
| 167 | 125 | } |
| 168 | 126 | |
| @@ -174,28 +132,43 @@ | ||
| 174 | 132 | } |
| 175 | 133 | |
| 176 | 134 | |
| 177 | 135 | .cookieadmin_consent_inside{ |
| 178 | - color: black; | |
| 179 | - background-color: #FFFFFF; | |
| 180 | - border: 1px solid #f4f4f4; | |
| 136 | + color: #1f2937; | |
| 137 | + background-color: #ffffff; | |
| 138 | + border: 1px solid #ffffff; | |
| 181 | 139 | padding:15px; |
| 182 | 140 | border-radius: 4px; |
| 183 | 141 | box-shadow:1px 3px 10px rgba(0, 0, 0, 0.2); |
| 184 | 142 | } |
| 185 | 143 | |
| 186 | -#cookieadmin_notice_title{ | |
| 187 | - font-weight: 601; | |
| 188 | - margin: 0px; | |
| 189 | - 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; | |
| 190 | 152 | } |
| 191 | 153 | |
| 154 | +.cookieadmin_law_container p#cookieadmin_notice{ | |
| 155 | + margin: 0; | |
| 156 | + padding: 0; | |
| 157 | + font-size: 14px; | |
| 158 | + line-height: 22px; | |
| 159 | +} | |
| 160 | + | |
| 192 | 161 | .cookieadmin_notice_con{ |
| 193 | - font-size: initial; | |
| 194 | - padding: 0px 6px; | |
| 162 | + padding: 0; | |
| 195 | 163 | flex: 1; |
| 196 | 164 | } |
| 197 | 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 | + | |
| 198 | 171 | .cookieadmin_cookie_modal{ |
| 199 | 172 | display: none; |
| 200 | 173 | flex-direction: column; |
| 201 | 174 | position: fixed; |
| @@ -232,8 +205,12 @@ | ||
| 232 | 205 | bottom: 0px; |
| 233 | 206 | animation: 0.5s ease-out forwards cookieadmin_slideUp; |
| 234 | 207 | } |
| 235 | 208 | |
| 209 | +.cookieadmin_cookie_modal:focus{ | |
| 210 | + outline: none; | |
| 211 | +} | |
| 212 | + | |
| 236 | 213 | .cookieadmin_modal_overlay{ |
| 237 | 214 | display: none; |
| 238 | 215 | position: fixed; |
| 239 | 216 | top: 0; |
| @@ -239,57 +216,104 @@ | ||
| 239 | 216 | top: 0; |
| 240 | 217 | left: 0; |
| 241 | 218 | width: 100%; |
| 242 | 219 | height: 100%; |
| 243 | - background-color: rgba(0, 0, 0, 0.5); | |
| 220 | + background-color: rgba(0, 0, 0, 0.4); | |
| 244 | 221 | z-index: 1000; |
| 245 | 222 | } |
| 246 | 223 | |
| 224 | +/* Centered, not baseline: the CSS-drawn close button has no text baseline */ | |
| 247 | 225 | .cookieadmin_mod_head{ |
| 248 | 226 | display: flex; |
| 249 | 227 | justify-content: space-between; |
| 228 | + align-items: center; | |
| 229 | + gap: 12px; | |
| 230 | + padding: 14px 20px; | |
| 231 | + border-bottom: 1px solid #CCCCCC; | |
| 250 | 232 | } |
| 251 | 233 | |
| 252 | -.cookieadmin_mod_head, .cookieadmin_wrapper{ | |
| 253 | - padding: 15px; | |
| 254 | - 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; | |
| 255 | 248 | } |
| 256 | 249 | |
| 257 | -.cookieadmin_close_pref{ | |
| 258 | - background: none; | |
| 259 | - border: none; | |
| 260 | - align-self: baseline; | |
| 261 | - color: gray; | |
| 262 | - cursor: pointer; | |
| 263 | - 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); | |
| 264 | 261 | } |
| 265 | 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 | + | |
| 266 | 277 | .cookieadmin_preference_title{ |
| 278 | + margin: 0; | |
| 267 | 279 | font-size: 20px; |
| 268 | - font-weight: 801; | |
| 269 | - margin: 9px; | |
| 280 | + font-weight: 700; | |
| 281 | + line-height: 1.3; | |
| 270 | 282 | } |
| 271 | 283 | |
| 284 | +/* 5px + the wrapper's 15px lines the intro up with the title's 20px */ | |
| 272 | 285 | .cookieadmin_preference_details{ |
| 273 | - padding: 0px 10px; | |
| 286 | + padding: 0px 5px; | |
| 274 | 287 | } |
| 275 | 288 | |
| 289 | +/* break-word (not overflow:auto) so long URLs wrap instead of adding an inner scrollbar */ | |
| 276 | 290 | .cookieadmin_preference{ |
| 277 | - overflow: hidden; | |
| 278 | - height: 83px; | |
| 279 | - font-size: 15px; | |
| 291 | + padding: 10px 0px; | |
| 292 | + font-size: 14px; | |
| 293 | + line-height: 28px; | |
| 294 | + overflow-wrap: break-word; | |
| 280 | 295 | } |
| 281 | 296 | |
| 282 | -.cookieadmin_showmore{ | |
| 283 | - background: none; | |
| 284 | - border: none; | |
| 285 | - color: #1863dc; | |
| 286 | - padding: 0px; | |
| 287 | - cursor: pointer; | |
| 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; | |
| 288 | 303 | } |
| 289 | 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 | + | |
| 290 | 314 | .cookieadmin_details_wrapper{ |
| 291 | - padding: 15px; | |
| 315 | + padding: 0px 15px; | |
| 292 | 316 | height: calc(100% - 6%); |
| 293 | 317 | overflow: auto; |
| 294 | 318 | scrollbar-width: thin; |
| 295 | 319 | } |
| @@ -303,31 +327,45 @@ | ||
| 303 | 327 | display: flex; |
| 304 | 328 | justify-content: space-between; |
| 305 | 329 | } |
| 306 | 330 | |
| 307 | -.cookieadmin_header > span > label{ | |
| 308 | - cursor:pointer; | |
| 331 | + | |
| 332 | +/* Clickable header text, e.g. Pro's "Override GPC" label */ | |
| 333 | +.cookieadmin_header label[for]{ | |
| 334 | + cursor: pointer; | |
| 309 | 335 | } |
| 310 | 336 | |
| 311 | -.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{ | |
| 312 | 344 | display:none; |
| 313 | 345 | justify-self:right; |
| 314 | 346 | } |
| 315 | 347 | |
| 316 | -.cookieadmin_act{ | |
| 348 | +.cookieadmin_header .cookieadmin_act{ | |
| 317 | 349 | display: inline; |
| 318 | 350 | color: #1863dc; |
| 319 | 351 | } |
| 320 | 352 | |
| 321 | -.cookieadmin-nece-cookies{ | |
| 353 | +/* Lines up with .cookieadmin_desc; the old 4rem right margin squeezed cards on phones */ | |
| 354 | +.cookieadmin-modal-cookies-list{ | |
| 322 | 355 | display:none; |
| 323 | - padding:1px; | |
| 324 | - border-radius: 10px; | |
| 325 | - margin: 0px 20px; | |
| 326 | - margin-right: 4rem; | |
| 327 | - font-size: smaller; | |
| 328 | - 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; | |
| 329 | 366 | text-align: center; |
| 367 | + opacity: 0.7; | |
| 330 | 368 | } |
| 331 | 369 | |
| 332 | 370 | .cookieadmin_desc{ |
| 333 | 371 | padding:5px 20px; |
| @@ -341,97 +379,255 @@ | ||
| 341 | 379 | flex-wrap: wrap; |
| 342 | 380 | width: 100%; |
| 343 | 381 | } |
| 344 | 382 | |
| 383 | +/* Padding matches the header */ | |
| 345 | 384 | .cookieadmin_modal_footer{ |
| 346 | - left: 0px; | |
| 347 | - padding: 15px; | |
| 385 | + display: flex; | |
| 386 | + padding: 14px 20px; | |
| 348 | 387 | flex-wrap: wrap; |
| 388 | + gap: 8px; | |
| 349 | 389 | border-top: 1px solid #CCCCCC; |
| 350 | 390 | } |
| 351 | 391 | |
| 352 | -.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; | |
| 353 | 419 | background-color: transparent; |
| 354 | - 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; | |
| 355 | 424 | color: #1863dc; |
| 356 | - padding: 0.4rem 0.9rem; | |
| 357 | - border-radius: 4px; | |
| 358 | - 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; | |
| 359 | 435 | cursor: pointer; |
| 436 | + transition: filter .15s; | |
| 360 | 437 | } |
| 361 | 438 | |
| 362 | -.cookieadmin_btn:hover{ | |
| 363 | - 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; | |
| 364 | 443 | } |
| 365 | 444 | |
| 366 | -.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; | |
| 367 | 478 | cursor: pointer; |
| 368 | - font-size: 18px; | |
| 369 | 479 | } |
| 370 | 480 | |
| 371 | -.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; | |
| 372 | 509 | display: none; |
| 373 | 510 | position: fixed; |
| 374 | 511 | bottom: 15px; |
| 375 | 512 | left: 15px; |
| 376 | - background: linear-gradient(to left, rgb(0, 51, 204) 0%, rgb(102, 102, 255) 100%); | |
| 513 | + z-index: 99999; | |
| 514 | + box-sizing: border-box; | |
| 515 | + width: 50px; | |
| 377 | 516 | height: 50px; |
| 378 | - width: 50px; | |
| 517 | + padding: 5px; | |
| 379 | 518 | border-radius: 50%; |
| 519 | + background-color: #374FD4; | |
| 520 | + box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4); | |
| 380 | 521 | cursor: pointer; |
| 381 | - border: 0px; | |
| 382 | - z-index: 99999; | |
| 383 | - padding: 5px; | |
| 522 | + transition: filter .15s; | |
| 384 | 523 | } |
| 385 | 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. */ | |
| 386 | 551 | .cookieadmin-cookie-card { |
| 387 | - background: ghostwhite; | |
| 388 | - border-radius: 10px; | |
| 389 | - padding: 16px; | |
| 390 | - font-family: 'Open Sans', 'Segoe UI', sans-serif; | |
| 391 | - box-shadow: 0 2px 6px rgba(0,0,0,0.1); | |
| 392 | - 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; | |
| 393 | 556 | text-align: left; |
| 394 | 557 | } |
| 395 | 558 | |
| 396 | 559 | .cookieadmin-cookie-header { |
| 397 | 560 | display: flex; |
| 561 | + flex-wrap: wrap; | |
| 398 | 562 | justify-content: space-between; |
| 399 | - font-size: 1rem; | |
| 400 | - margin-bottom: 6px; | |
| 563 | + gap: 2px 12px; | |
| 564 | + font-size: 14px; | |
| 401 | 565 | } |
| 402 | 566 | |
| 403 | 567 | .cookieadmin-cookie-name { |
| 404 | - font-weight: bold; | |
| 405 | - color: #333; | |
| 568 | + font-weight: 600; | |
| 569 | + word-break: break-word; | |
| 570 | + overflow-wrap: anywhere; | |
| 406 | 571 | } |
| 407 | 572 | |
| 408 | 573 | .cookieadmin-cookie-duration { |
| 409 | - font-size: 0.85rem; | |
| 574 | + font-size: 13px; | |
| 575 | + opacity: 0.75; | |
| 410 | 576 | } |
| 411 | 577 | |
| 412 | 578 | .cookieadmin-cookie-duration > b { |
| 413 | - font-weight: bold; | |
| 579 | + font-weight: 600; | |
| 414 | 580 | } |
| 415 | 581 | |
| 416 | -.cookieadmin-cookie-description { | |
| 417 | - font-size: 0.9rem; | |
| 418 | - 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; | |
| 419 | 588 | } |
| 420 | 589 | |
| 421 | 590 | .cookieadmin-cookie-tags { |
| 422 | - display: flex; | |
| 423 | - gap: 8px; | |
| 591 | + display: flex; | |
| 592 | + gap: 8px; | |
| 593 | + margin-top: 8px; | |
| 424 | 594 | } |
| 425 | 595 | |
| 426 | 596 | .cookieadmin-tag { |
| 427 | - background: #e0e0e0; | |
| 428 | - padding: 4px 10px; | |
| 429 | - border-radius: 12px; | |
| 430 | - font-size: 0.75rem; | |
| 431 | - color: #333; | |
| 597 | + background: rgba(0, 0, 0, 0.06); | |
| 598 | + padding: 2px 8px; | |
| 599 | + border-radius: 4px; | |
| 600 | + font-size: 12px; | |
| 432 | 601 | } |
| 433 | 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 | + | |
| 434 | 630 | /* Website consent box End*/ |
| 435 | 631 | |
| 436 | 632 | |
| 437 | 633 | |
| @@ -438,20 +634,55 @@ | ||
| 438 | 634 | |
| 439 | 635 | |
| 440 | 636 | /* Checkbox switch Start */ |
| 441 | 637 | |
| 442 | -.cookieadmin_toggle, .cookieadmin_toggle_disabled { | |
| 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 { | |
| 443 | 642 | position: relative; |
| 444 | 643 | display: inline-block; |
| 445 | - width: 24px; | |
| 446 | - height: 11px; | |
| 644 | + flex-shrink: 0; | |
| 645 | + width: 34px; | |
| 646 | + height: 21px; | |
| 647 | + margin: 0; | |
| 648 | + padding: 0; | |
| 447 | 649 | } |
| 448 | 650 | |
| 449 | 651 | /* Hide the checkbox input */ |
| 450 | -.cookieadmin_toggle input, .cookieadmin_toggle_disabled input { | |
| 451 | - 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; | |
| 452 | 661 | } |
| 453 | 662 | |
| 663 | +/* Text for screen readers / a11y checkers only, so toggle labels aren't empty */ | |
| 664 | +.cookieadmin_sr_only { | |
| 665 | + position: absolute; | |
| 666 | + width: 1px; | |
| 667 | + height: 1px; | |
| 668 | + padding: 0; | |
| 669 | + margin: -1px; | |
| 670 | + overflow: hidden; | |
| 671 | + clip: rect(0, 0, 0, 0); | |
| 672 | + white-space: nowrap; | |
| 673 | + border: 0; | |
| 674 | +} | |
| 675 | + | |
| 676 | +/* Keyboard accessibility: When the checkbox is focused, add a visible outline to indicate focus. */ | |
| 677 | +.cookieadmin_show_pref_cookies:focus-visible{ | |
| 678 | + outline: 1px solid #000; | |
| 679 | +} | |
| 680 | +.cookieadmin_toggle input:focus + .cookieadmin_slider { | |
| 681 | + outline: 1px solid #000; | |
| 682 | +} | |
| 683 | +/* end keyboard accessibility */ | |
| 684 | + | |
| 454 | 685 | /* Describe slider's look and position. */ |
| 455 | 686 | .cookieadmin_slider { |
| 456 | 687 | position: absolute; |
| 457 | 688 | cursor: pointer; |
| @@ -491,17 +722,106 @@ | ||
| 491 | 722 | input:checked+.cookieadmin_slider:before { |
| 492 | 723 | transform: translateX(13px); |
| 493 | 724 | } |
| 494 | 725 | |
| 495 | -input:disabled+.cookieadmin_slider { | |
| 496 | - background-color: #3582c4; | |
| 726 | +/* Checkbox switch End */ | |
| 727 | + | |
| 728 | +.cookieadmin_law_container .cookieadmin-poweredby{ | |
| 729 | +margin-top: 10px; | |
| 497 | 730 | } |
| 498 | -input:disabled+.cookieadmin_slider:before { | |
| 499 | - transform: translateX(13px); | |
| 731 | + | |
| 732 | +.cookieadmin_modal_footer_links .cookieadmin-poweredby{ | |
| 733 | +margin-left: auto; | |
| 500 | 734 | } |
| 501 | 735 | |
| 502 | -/* Checkbox switch End */ | |
| 736 | +.cookieadmin-poweredby a img{ | |
| 737 | +height: 15px; | |
| 738 | +} | |
| 503 | 739 | |
| 740 | +.cookieadmin-poweredby a{ | |
| 741 | +color : unset; | |
| 742 | +cursor: pointer; | |
| 743 | +display: flex; | |
| 744 | +justify-content: center; | |
| 745 | +align-items: center; | |
| 746 | +font-size: 11px; | |
| 747 | +gap: 2px; | |
| 748 | +text-decoration: none; | |
| 749 | +} | |
| 750 | + | |
| 751 | +.cookieadmin_modal_footer .cookieadmin-poweredby a{ | |
| 752 | +justify-content: end; | |
| 753 | +} | |
| 754 | + | |
| 755 | +#cookieadmin-gpc-toast{ | |
| 756 | +display:flex; | |
| 757 | +visibility: hidden; | |
| 758 | +position: fixed; | |
| 759 | +bottom: 24px; | |
| 760 | +right: 24px; | |
| 761 | +color: #ffffff; | |
| 762 | +padding: 10px 14px; | |
| 763 | +border-radius: 6px; | |
| 764 | +box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | |
| 765 | +align-items: center; | |
| 766 | +justify-content: space-between; | |
| 767 | +gap: 10px; | |
| 768 | +font-size: 14px; | |
| 769 | +z-index: 99999; | |
| 770 | +opacity: 0; | |
| 771 | +transform: translateY(20px); | |
| 772 | +transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s; | |
| 773 | +line-height:1.5; | |
| 774 | +} | |
| 775 | + | |
| 776 | +#cookieadmin_gpc_override{ | |
| 777 | +padding-bottom:10px; | |
| 778 | +} | |
| 779 | + | |
| 780 | +/* Policy Links */ | |
| 781 | +.cookieadmin_policy_link_box{ | |
| 782 | + display: flex; | |
| 783 | + justify-content: space-around; | |
| 784 | + gap: 4px 16px; | |
| 785 | + margin-top: 8px; | |
| 786 | + font-size: 13px; | |
| 787 | + flex-wrap: wrap; | |
| 788 | +} | |
| 789 | + | |
| 790 | +/* Same treatment as the modal links, so theme link colors don't apply */ | |
| 791 | +.cookieadmin_law_container .cookieadmin_policy_link_box a{ | |
| 792 | + color: inherit; | |
| 793 | + text-decoration: underline; | |
| 794 | +} | |
| 795 | + | |
| 796 | +.cookieadmin_modal_policy_link_box{ | |
| 797 | + display: flex; | |
| 798 | + gap: 4px 16px; | |
| 799 | + font-size: 13px; | |
| 800 | + flex-wrap: wrap; | |
| 801 | +} | |
| 802 | + | |
| 803 | +/* Same treatment as the intro and DPDP links, so theme link colors don't apply */ | |
| 804 | +.cookieadmin_cookie_modal .cookieadmin_modal_policy_link_box a{ | |
| 805 | + color: inherit; | |
| 806 | + text-decoration: underline; | |
| 807 | +} | |
| 808 | + | |
| 809 | +/* Footer gap handles spacing; the old 9px side margins pushed links out of line with the buttons */ | |
| 810 | +.cookieadmin_modal_footer_links{ | |
| 811 | + display:flex; | |
| 812 | + flex-wrap: wrap; | |
| 813 | + align-items: center; | |
| 814 | + justify-content:space-between; | |
| 815 | + gap: 8px 16px; | |
| 816 | + margin-top: 4px; | |
| 817 | +} | |
| 818 | + | |
| 819 | +/* Hidden when there are no policy links and "Powered by" is off (Pro) */ | |
| 820 | +.cookieadmin_modal_footer_links:not(:has(*)){ | |
| 821 | + display: none; | |
| 822 | +} | |
| 823 | + | |
| 504 | 824 | /* CSS for phones only */ |
| 505 | 825 | @media (max-width: 767px) { |
| 506 | 826 | |
| 507 | 827 | .cookieadmin_center{ |
| @@ -513,10 +833,14 @@ | ||
| 513 | 833 | .cookieadmin_show_pref_cookies{ |
| 514 | 834 | font-size: 14px; |
| 515 | 835 | } |
| 516 | 836 | |
| 517 | - .cookieadmin_law_container, .cookieadmin_box{ | |
| 518 | - width: 90%; | |
| 837 | + /* Even 16px on both sides; the footer bar keeps its 100% width */ | |
| 838 | + .cookieadmin_box{ | |
| 839 | + left: 16px; | |
| 840 | + right: 16px; | |
| 841 | + width: auto; | |
| 842 | + max-width: none; | |
| 519 | 843 | } |
| 520 | 844 | |
| 521 | 845 | .cookieadmin_side{ |
| 522 | 846 | width: 100%; |
| @@ -561,16 +885,38 @@ | ||
| 561 | 885 | |
| 562 | 886 | .cookieadmin_consent_btns { |
| 563 | 887 | flex-shrink: 0; |
| 564 | 888 | } |
| 889 | + | |
| 890 | + /* Footer layout: the button group sizes to its content, so equal-width (flex-basis 0) | |
| 891 | + buttons would shrink and wrap their labels. Size them to their labels instead. */ | |
| 892 | + .cookieadmin_footer .cookieadmin_consent_btns button.cookieadmin_btn{ | |
| 893 | + flex: 0 0 auto; | |
| 894 | + } | |
| 565 | 895 | } |
| 566 | 896 | |
| 567 | 897 | @media (max-width:480px){ |
| 568 | - .cookieadmin_consent_inside .cookieadmin_btn { | |
| 569 | - width: 100%; | |
| 570 | - margin: 5px 0; | |
| 898 | + .cookieadmin_preference_title{ | |
| 899 | + font-size: 18px; | |
| 571 | 900 | } |
| 572 | 901 | |
| 902 | + /* 28px leaves no room for the categories on phones */ | |
| 903 | + .cookieadmin_preference{ | |
| 904 | + line-height: 22px; | |
| 905 | + } | |
| 906 | + | |
| 907 | + .cookieadmin_law_container button.cookieadmin_btn, | |
| 908 | + .cookieadmin_cookie_modal button.cookieadmin_btn, | |
| 909 | + .cookieadmin_consent_inside > .cookieadmin_consent_btns button.cookieadmin_btn{ | |
| 910 | + flex-basis: 100%; | |
| 911 | + } | |
| 912 | + | |
| 573 | 913 | .cookieadmin_modal_footer{ |
| 574 | - padding: 8px; | |
| 914 | + padding: 12px 16px; | |
| 575 | 915 | } |
| 576 | -} | |
| 916 | +} | |
| 917 | + | |
| 918 | +@media (prefers-reduced-motion: reduce){ | |
| 919 | + .cookieadmin_law_container *, .cookieadmin_cookie_modal *{ | |
| 920 | + transition: none !important; | |
| 921 | + } | |
| 922 | +} | |
