| @@ -18,15 +18,10 @@ | ||
| 18 | 18 | --bkbg-tl-card-border-w: 1px; |
| 19 | 19 | --bkbg-tl-card-radius: 12px; |
| 20 | 20 | --bkbg-tl-card-padding: 24px; |
| 21 | 21 | --bkbg-tl-date-color: #3b82f6; |
| 22 | - --bkbg-tl-date-size: 14px; | |
| 23 | - --bkbg-tl-date-weight: 600; | |
| 24 | 22 | --bkbg-tl-title-color: #1f2937; |
| 25 | - --bkbg-tl-title-size: 20px; | |
| 26 | - --bkbg-tl-title-weight: 600; | |
| 27 | 23 | --bkbg-tl-content-color: #6b7280; |
| 28 | - --bkbg-tl-content-size: 15px; | |
| 29 | 24 | --bkbg-tl-spacing: 40px; |
| 30 | 25 | |
| 31 | 26 | position: relative; |
| 32 | 27 | width: 100%; |
| @@ -166,30 +161,61 @@ | ||
| 166 | 161 | |
| 167 | 162 | /* Date */ |
| 168 | 163 | .bkbg-tl-date { |
| 169 | 164 | color: var(--bkbg-tl-date-color); |
| 170 | - font-size: var(--bkbg-tl-date-size); | |
| 171 | - font-weight: var(--bkbg-tl-date-weight); | |
| 165 | + font-family: var(--bktl-dt-font-family, inherit); | |
| 166 | + font-size: var(--bktl-dt-font-size-d, 14px); | |
| 167 | + font-weight: var(--bktl-dt-font-weight, 600); | |
| 168 | + font-style: var(--bktl-dt-font-style, normal); | |
| 169 | + line-height: var(--bktl-dt-line-height-d, 1.3); | |
| 170 | + text-decoration: var(--bktl-dt-text-decoration, none); | |
| 171 | + text-transform: var(--bktl-dt-text-transform, uppercase); | |
| 172 | + letter-spacing: var(--bktl-dt-letter-spacing-d, 0.5px); | |
| 173 | + word-spacing: var(--bktl-dt-word-spacing-d, normal); | |
| 172 | 174 | margin-bottom: 8px; |
| 173 | - text-transform: uppercase; | |
| 174 | - letter-spacing: 0.5px; | |
| 175 | 175 | } |
| 176 | 176 | |
| 177 | 177 | /* Title */ |
| 178 | 178 | .bkbg-tl-title { |
| 179 | 179 | color: var(--bkbg-tl-title-color); |
| 180 | - font-size: var(--bkbg-tl-title-size); | |
| 181 | - font-weight: var(--bkbg-tl-title-weight); | |
| 180 | + font-family: var(--bktl-tt-font-family, inherit); | |
| 181 | + font-size: var(--bktl-tt-font-size-d, 20px); | |
| 182 | + font-weight: var(--bktl-tt-font-weight, 600); | |
| 183 | + font-style: var(--bktl-tt-font-style, normal); | |
| 184 | + line-height: var(--bktl-tt-line-height-d, 1.3); | |
| 185 | + text-decoration: var(--bktl-tt-text-decoration, none); | |
| 186 | + text-transform: var(--bktl-tt-text-transform, none); | |
| 187 | + letter-spacing: var(--bktl-tt-letter-spacing-d, normal); | |
| 188 | + word-spacing: var(--bktl-tt-word-spacing-d, normal); | |
| 182 | 189 | margin: 0 0 12px 0; |
| 183 | - line-height: 1.3; | |
| 184 | 190 | } |
| 185 | 191 | |
| 192 | +/* Rule 7: heading specificity */ | |
| 193 | +.bkbg-tl-card h4.bkbg-tl-title { | |
| 194 | + font-family: var(--bktl-tt-font-family, inherit); | |
| 195 | + font-size: var(--bktl-tt-font-size-d, 20px); | |
| 196 | + font-weight: var(--bktl-tt-font-weight, 600); | |
| 197 | + font-style: var(--bktl-tt-font-style, normal); | |
| 198 | + line-height: var(--bktl-tt-line-height-d, 1.3); | |
| 199 | + text-decoration: var(--bktl-tt-text-decoration, none); | |
| 200 | + text-transform: var(--bktl-tt-text-transform, none); | |
| 201 | + letter-spacing: var(--bktl-tt-letter-spacing-d, normal); | |
| 202 | + word-spacing: var(--bktl-tt-word-spacing-d, normal); | |
| 203 | +} | |
| 204 | + | |
| 186 | 205 | /* Content */ |
| 187 | 206 | .bkbg-tl-content { |
| 188 | 207 | color: var(--bkbg-tl-content-color); |
| 189 | - font-size: var(--bkbg-tl-content-size); | |
| 208 | + font-family: var(--bktl-ct-font-family, inherit); | |
| 209 | + font-size: var(--bktl-ct-font-size-d, 15px); | |
| 210 | + font-weight: var(--bktl-ct-font-weight, normal); | |
| 211 | + font-style: var(--bktl-ct-font-style, normal); | |
| 212 | + line-height: var(--bktl-ct-line-height-d, 1.6); | |
| 213 | + text-decoration: var(--bktl-ct-text-decoration, none); | |
| 214 | + text-transform: var(--bktl-ct-text-transform, none); | |
| 215 | + letter-spacing: var(--bktl-ct-letter-spacing-d, normal); | |
| 216 | + word-spacing: var(--bktl-ct-word-spacing-d, normal); | |
| 190 | 217 | margin: 0; |
| 191 | - line-height: 1.6; | |
| 192 | 218 | } |
| 193 | 219 | |
| 194 | 220 | /* ======================================== |
| 195 | 221 | Alternating Layout (Vertical) |
| @@ -627,27 +653,10 @@ | ||
| 627 | 653 | background: #fef2f2; |
| 628 | 654 | color: #dc2626; |
| 629 | 655 | } |
| 630 | 656 | |
| 631 | -/* Add button - only show when block is selected */ | |
| 632 | -.bkbg-tl-add-floating { | |
| 633 | - display: none; | |
| 634 | - justify-content: center; | |
| 635 | - margin-top: 24px; | |
| 636 | - padding-top: 24px; | |
| 637 | - border-top: 2px dashed #e5e7eb; | |
| 638 | -} | |
| 657 | +/* Add button UI is standardized via assets/css/editor.css (.bkbg-editor-actions) */ | |
| 639 | 658 | |
| 640 | -.bkbg-tl-add-floating .components-button { | |
| 641 | - gap: 6px; | |
| 642 | -} | |
| 643 | - | |
| 644 | -/* Show add button only when block is selected */ | |
| 645 | -.bkbg-tl-wrap.is-selected .bkbg-tl-add-floating, | |
| 646 | -.bkbg-tl-wrap:focus-within .bkbg-tl-add-floating { | |
| 647 | - display: flex; | |
| 648 | -} | |
| 649 | - | |
| 650 | 659 | /* Alternating in editor - adjust actions position */ |
| 651 | 660 | .bkbg-tl-alternating .bkbg-tl-item-left .bkbg-tl-item-actions { |
| 652 | 661 | right: auto; |
| 653 | 662 | left: -44px; |
| @@ -666,8 +675,19 @@ | ||
| 666 | 675 | |
| 667 | 676 | /* ======================================== |
| 668 | 677 | Responsive |
| 669 | 678 | ======================================== */ |
| 679 | + | |
| 680 | +@media (max-width: 1024px) { | |
| 681 | + .bkbg-tl-date{font-size:var(--bktl-dt-font-size-t,var(--bktl-dt-font-size-d,14px));line-height:var(--bktl-dt-line-height-t,var(--bktl-dt-line-height-d,1.3));letter-spacing:var(--bktl-dt-letter-spacing-t,var(--bktl-dt-letter-spacing-d,0.5px));word-spacing:var(--bktl-dt-word-spacing-t,var(--bktl-dt-word-spacing-d,normal))} | |
| 682 | + .bkbg-tl-card .bkbg-tl-title{font-size:var(--bktl-tt-font-size-t,var(--bktl-tt-font-size-d,20px));line-height:var(--bktl-tt-line-height-t,var(--bktl-tt-line-height-d,1.3));letter-spacing:var(--bktl-tt-letter-spacing-t,var(--bktl-tt-letter-spacing-d,normal));word-spacing:var(--bktl-tt-word-spacing-t,var(--bktl-tt-word-spacing-d,normal))} | |
| 683 | + .bkbg-tl-content{font-size:var(--bktl-ct-font-size-t,var(--bktl-ct-font-size-d,15px));line-height:var(--bktl-ct-line-height-t,var(--bktl-ct-line-height-d,1.6));letter-spacing:var(--bktl-ct-letter-spacing-t,var(--bktl-ct-letter-spacing-d,normal));word-spacing:var(--bktl-ct-word-spacing-t,var(--bktl-ct-word-spacing-d,normal))} | |
| 684 | +} | |
| 685 | +@media (max-width: 767px) { | |
| 686 | + .bkbg-tl-date{font-size:var(--bktl-dt-font-size-m,var(--bktl-dt-font-size-t,var(--bktl-dt-font-size-d,14px)));line-height:var(--bktl-dt-line-height-m,var(--bktl-dt-line-height-t,var(--bktl-dt-line-height-d,1.3)));letter-spacing:var(--bktl-dt-letter-spacing-m,var(--bktl-dt-letter-spacing-t,var(--bktl-dt-letter-spacing-d,0.5px)));word-spacing:var(--bktl-dt-word-spacing-m,var(--bktl-dt-word-spacing-t,var(--bktl-dt-word-spacing-d,normal)))} | |
| 687 | + .bkbg-tl-card .bkbg-tl-title{font-size:var(--bktl-tt-font-size-m,var(--bktl-tt-font-size-t,var(--bktl-tt-font-size-d,20px)));line-height:var(--bktl-tt-line-height-m,var(--bktl-tt-line-height-t,var(--bktl-tt-line-height-d,1.3)));letter-spacing:var(--bktl-tt-letter-spacing-m,var(--bktl-tt-letter-spacing-t,var(--bktl-tt-letter-spacing-d,normal)));word-spacing:var(--bktl-tt-word-spacing-m,var(--bktl-tt-word-spacing-t,var(--bktl-tt-word-spacing-d,normal)))} | |
| 688 | + .bkbg-tl-content{font-size:var(--bktl-ct-font-size-m,var(--bktl-ct-font-size-t,var(--bktl-ct-font-size-d,15px)));line-height:var(--bktl-ct-line-height-m,var(--bktl-ct-line-height-t,var(--bktl-ct-line-height-d,1.6)));letter-spacing:var(--bktl-ct-letter-spacing-m,var(--bktl-ct-letter-spacing-t,var(--bktl-ct-letter-spacing-d,normal)));word-spacing:var(--bktl-ct-word-spacing-m,var(--bktl-ct-word-spacing-t,var(--bktl-ct-word-spacing-d,normal)))} | |
| 689 | +} | |
| 670 | 690 | |
| 671 | 691 | @media (max-width: 768px) { |
| 672 | 692 | /* Disable alternating on mobile */ |
| 673 | 693 | .bkbg-tl-vertical.bkbg-tl-alternating .bkbg-tl-items::before { |
