| @@ -30,10 +30,17 @@ | ||
| 30 | 30 | } |
| 31 | 31 | |
| 32 | 32 | /* Title */ |
| 33 | 33 | .bkbg-sc-title { |
| 34 | - font-size: var(--bkbg-sc-title-size); | |
| 35 | - font-weight: 700; | |
| 34 | + font-family: var(--bksc-tt-font-family, inherit); | |
| 35 | + font-size: var(--bksc-tt-font-size-d, var(--bkbg-sc-title-size)); | |
| 36 | + font-weight: var(--bksc-tt-font-weight, var(--bkbg-sc-title-wt, 700)); | |
| 37 | + font-style: var(--bksc-tt-font-style, normal); | |
| 38 | + text-decoration: var(--bksc-tt-text-decoration, none); | |
| 39 | + text-transform: var(--bksc-tt-text-transform, none); | |
| 40 | + line-height: var(--bksc-tt-line-height-d, var(--bkbg-sc-title-lh, 1.2)); | |
| 41 | + letter-spacing: var(--bksc-tt-letter-spacing-d, normal); | |
| 42 | + word-spacing: var(--bksc-tt-word-spacing-d, normal); | |
| 36 | 43 | color: var(--bkbg-sc-title-color); |
| 37 | 44 | margin-bottom: 32px; |
| 38 | 45 | text-align: var(--bkbg-sc-text-align); |
| 39 | 46 | } |
| @@ -170,12 +177,18 @@ | ||
| 170 | 177 | } |
| 171 | 178 | |
| 172 | 179 | /* Number */ |
| 173 | 180 | .bkbg-sc-number { |
| 174 | - font-size: var(--bkbg-sc-number-size); | |
| 175 | - font-weight: var(--bkbg-sc-number-weight); | |
| 181 | + font-family: var(--bksc-nm-font-family, inherit); | |
| 182 | + font-size: var(--bksc-nm-font-size-d, var(--bkbg-sc-number-size)); | |
| 183 | + font-weight: var(--bksc-nm-font-weight, var(--bkbg-sc-number-weight)); | |
| 184 | + font-style: var(--bksc-nm-font-style, normal); | |
| 185 | + text-decoration: var(--bksc-nm-text-decoration, none); | |
| 186 | + text-transform: var(--bksc-nm-text-transform, none); | |
| 187 | + line-height: var(--bksc-nm-line-height-d, var(--bkbg-sc-number-lh, 1.1)); | |
| 188 | + letter-spacing: var(--bksc-nm-letter-spacing-d, normal); | |
| 189 | + word-spacing: var(--bksc-nm-word-spacing-d, normal); | |
| 176 | 190 | color: var(--bkbg-sc-number-color); |
| 177 | - line-height: 1.1; | |
| 178 | 191 | font-variant-numeric: tabular-nums; |
| 179 | 192 | } |
| 180 | 193 | |
| 181 | 194 | .bkbg-sc-prefix, |
| @@ -186,14 +199,33 @@ | ||
| 186 | 199 | } |
| 187 | 200 | |
| 188 | 201 | /* Label */ |
| 189 | 202 | .bkbg-sc-label { |
| 190 | - font-size: var(--bkbg-sc-label-size); | |
| 191 | - font-weight: var(--bkbg-sc-label-weight); | |
| 203 | + font-family: var(--bksc-lb-font-family, inherit); | |
| 204 | + font-size: var(--bksc-lb-font-size-d, var(--bkbg-sc-label-size)); | |
| 205 | + font-weight: var(--bksc-lb-font-weight, var(--bkbg-sc-label-weight)); | |
| 206 | + font-style: var(--bksc-lb-font-style, normal); | |
| 207 | + text-decoration: var(--bksc-lb-text-decoration, none); | |
| 208 | + text-transform: var(--bksc-lb-text-transform, none); | |
| 209 | + line-height: var(--bksc-lb-line-height-d, var(--bkbg-sc-label-lh, 1.3)); | |
| 210 | + letter-spacing: var(--bksc-lb-letter-spacing-d, normal); | |
| 211 | + word-spacing: var(--bksc-lb-word-spacing-d, normal); | |
| 192 | 212 | color: var(--bkbg-sc-label-color); |
| 193 | - line-height: 1.4; | |
| 194 | 213 | } |
| 195 | 214 | |
| 215 | +/* ---- Typography responsive — tablet ---- */ | |
| 216 | +@media (max-width: 1024px) { | |
| 217 | + .bkbg-sc-title { font-size: var(--bksc-tt-font-size-t, var(--bksc-tt-font-size-d, var(--bkbg-sc-title-size))); line-height: var(--bksc-tt-line-height-t, var(--bksc-tt-line-height-d, var(--bkbg-sc-title-lh, 1.2))); letter-spacing: var(--bksc-tt-letter-spacing-t, var(--bksc-tt-letter-spacing-d, normal)); word-spacing: var(--bksc-tt-word-spacing-t, var(--bksc-tt-word-spacing-d, normal)); } | |
| 218 | + .bkbg-sc-number { font-size: var(--bksc-nm-font-size-t, var(--bksc-nm-font-size-d, var(--bkbg-sc-number-size))); line-height: var(--bksc-nm-line-height-t, var(--bksc-nm-line-height-d, var(--bkbg-sc-number-lh, 1.1))); letter-spacing: var(--bksc-nm-letter-spacing-t, var(--bksc-nm-letter-spacing-d, normal)); word-spacing: var(--bksc-nm-word-spacing-t, var(--bksc-nm-word-spacing-d, normal)); } | |
| 219 | + .bkbg-sc-label { font-size: var(--bksc-lb-font-size-t, var(--bksc-lb-font-size-d, var(--bkbg-sc-label-size))); line-height: var(--bksc-lb-line-height-t, var(--bksc-lb-line-height-d, var(--bkbg-sc-label-lh, 1.3))); letter-spacing: var(--bksc-lb-letter-spacing-t, var(--bksc-lb-letter-spacing-d, normal)); word-spacing: var(--bksc-lb-word-spacing-t, var(--bksc-lb-word-spacing-d, normal)); } | |
| 220 | +} | |
| 221 | +/* ---- Typography responsive — mobile ---- */ | |
| 222 | +@media (max-width: 767px) { | |
| 223 | + .bkbg-sc-title { font-size: var(--bksc-tt-font-size-m, var(--bksc-tt-font-size-t, var(--bksc-tt-font-size-d, var(--bkbg-sc-title-size)))); line-height: var(--bksc-tt-line-height-m, var(--bksc-tt-line-height-t, var(--bksc-tt-line-height-d, var(--bkbg-sc-title-lh, 1.2)))); letter-spacing: var(--bksc-tt-letter-spacing-m, var(--bksc-tt-letter-spacing-t, var(--bksc-tt-letter-spacing-d, normal))); word-spacing: var(--bksc-tt-word-spacing-m, var(--bksc-tt-word-spacing-t, var(--bksc-tt-word-spacing-d, normal))); } | |
| 224 | + .bkbg-sc-number { font-size: var(--bksc-nm-font-size-m, var(--bksc-nm-font-size-t, var(--bksc-nm-font-size-d, var(--bkbg-sc-number-size)))); line-height: var(--bksc-nm-line-height-m, var(--bksc-nm-line-height-t, var(--bksc-nm-line-height-d, var(--bkbg-sc-number-lh, 1.1)))); letter-spacing: var(--bksc-nm-letter-spacing-m, var(--bksc-nm-letter-spacing-t, var(--bksc-nm-letter-spacing-d, normal))); word-spacing: var(--bksc-nm-word-spacing-m, var(--bksc-nm-word-spacing-t, var(--bksc-nm-word-spacing-d, normal))); } | |
| 225 | + .bkbg-sc-label { font-size: var(--bksc-lb-font-size-m, var(--bksc-lb-font-size-t, var(--bksc-lb-font-size-d, var(--bkbg-sc-label-size)))); line-height: var(--bksc-lb-line-height-m, var(--bksc-lb-line-height-t, var(--bksc-lb-line-height-d, var(--bkbg-sc-label-lh, 1.3)))); letter-spacing: var(--bksc-lb-letter-spacing-m, var(--bksc-lb-letter-spacing-t, var(--bksc-lb-letter-spacing-d, normal))); word-spacing: var(--bksc-lb-word-spacing-m, var(--bksc-lb-word-spacing-t, var(--bksc-lb-word-spacing-d, normal))); } | |
| 226 | +} | |
| 227 | + | |
| 196 | 228 | /* Dividers */ |
| 197 | 229 | .bkbg-sc-divider .bkbg-sc-item:not(:last-child) { |
| 198 | 230 | border-right: 1px solid var(--bkbg-sc-divider-color); |
| 199 | 231 | padding-right: var(--bkbg-sc-gap); |
| @@ -474,9 +506,9 @@ | ||
| 474 | 506 | z-index: 100001; |
| 475 | 507 | } |
| 476 | 508 | |
| 477 | 509 | .bkbg-sc-icon-picker-modal { |
| 478 | - width: 340px; | |
| 510 | + width: 260px; | |
| 479 | 511 | max-height: 450px; |
| 480 | 512 | background: #fff; |
| 481 | 513 | border-radius: 8px; |
| 482 | 514 | box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15); |
| @@ -532,9 +564,9 @@ | ||
| 532 | 564 | } |
| 533 | 565 | |
| 534 | 566 | .bkbg-sc-dashicons-grid { |
| 535 | 567 | display: grid; |
| 536 | - grid-template-columns: repeat(8, 1fr); | |
| 568 | + grid-template-columns: repeat(6, 1fr); | |
| 537 | 569 | gap: 4px; |
| 538 | 570 | max-height: 280px; |
| 539 | 571 | overflow-y: auto; |
| 540 | 572 | padding: 4px; |
