| 1 |
/* ========================================================================== |
| 2 |
Cool Timeline Free - Design Refresh |
| 3 |
Scoped under .ctl-new-design.ctl-wrapper (same element as .ctl-wrapper). |
| 4 |
|
| 5 |
Ported from Cool Timeline Pro's ctl-design-refresh.css, limited to the |
| 6 |
default design on the vertical, one-side and compact layouts, and limited |
| 7 |
to spacing (padding / margin / gap and the card-to-line gap geometry). |
| 8 |
|
| 9 |
PHP only adds .ctl-new-design when CTL_Helpers::ctl_is_new_install() is |
| 10 |
true, so existing installs keep their current look until they opt in via |
| 11 |
the welcome "Upgrade Design" CTA (ctl_migrate_new_design). |
| 12 |
|
| 13 |
Pro-only settings are deliberately NOT ported: --ctw-story-pad-add |
| 14 |
(story padding), --ctw-story-line-gap-delta (line gap), --ctw-arw-size |
| 15 |
(connector size) and --ctw-arw-align-offset have no Free counterpart, so |
| 16 |
every rule that measured itself against them is either resolved to its |
| 17 |
Pro default here or left out. |
| 18 |
========================================================================== */ |
| 19 |
|
| 20 |
|
| 21 |
/* -------------------------------------------------------------------------- |
| 22 |
1. Spacing tokens |
| 23 |
-------------------------------------------------------------------------- */ |
| 24 |
|
| 25 |
.ctl-new-design.ctl-wrapper { |
| 26 |
--ctw-story-line-gap: 10px; |
| 27 |
--ctw-cbx-bottom-margin: 100px; |
| 28 |
--ctw-cbx-padding: 20px; |
| 29 |
--ctw-cbx-pad: 20px; |
| 30 |
--ctw-cbx-title-padding: 17px 20px 17px 20px; |
| 31 |
--ctw-cbx-des-padding: 0px 0px 0px 0px; |
| 32 |
--ctw-cbx-img-padding: 0; |
| 33 |
--ctw-cbx-img-margin: 0px 0px 20px 0px; |
| 34 |
--ctw-cbx-radius: 20px; |
| 35 |
--ctw-cbx-radius-left: 20px; |
| 36 |
|
| 37 |
/* Hover has to track the radius, not the value it happened to have further |
| 38 |
up the tree. Free declares --ctw-cbx-radius-hover: var(--ctw-cbx-radius) |
| 39 |
on .ctl-wrapper, and a custom property resolves on the element that |
| 40 |
DECLARES it - so a radius re-declared lower down (compact does, below) |
| 41 |
never reached the hover token, and the card snapped from its own corner |
| 42 |
to the wrapper's the moment you moused over it. Same trap as |
| 43 |
--ctw-arw-bd-color in section 1. Re-declare the pair wherever the radius |
| 44 |
is re-declared, and hover follows whatever that level sets. */ |
| 45 |
--ctw-cbx-radius-hover: var(--ctw-cbx-radius); |
| 46 |
--ctw-cbx-radius-left-hover: var(--ctw-cbx-radius-left); |
| 47 |
--ctw-cbx-img-radius: 0px; |
| 48 |
--ctw-read-more-radius: 10px; |
| 49 |
margin: 0px auto 30px; |
| 50 |
|
| 51 |
/* Typography. Each one puts the user's own setting in front of the design |
| 52 |
default, so a value the settings screen wrote still wins - the design |
| 53 |
default only applies where the user never touched it. The settings |
| 54 |
screen writes --ctl-set-* alongside --ctw-cbx-* (see |
| 55 |
CTL_Styles_Generator::render_global_typo_style); without that |
| 56 |
indirection these defaults, being higher-specificity, would silently |
| 57 |
override the Typography panel on every new install. */ |
| 58 |
--ctw-cbx-title-font-size: var(--ctl-set-title-font-size, 20px); |
| 59 |
--ctw-cbx-title-line-height: var(--ctl-set-title-line-height, 30px); |
| 60 |
--ctw-cbx-desc-font-size: var(--ctl-set-desc-font-size, 17px); |
| 61 |
--ctw-cbx-desc-line-height: var(--ctl-set-desc-line-height, 30px); |
| 62 |
--ctw-cbx-date-font-size: var(--ctl-set-date-font-size, 18px); |
| 63 |
--ctw-cbx-date-font-weight: var(--ctl-set-date-font-weight, 600); |
| 64 |
--ctw-lbl-big-size: 20px; |
| 65 |
--ctw-ybx-size: 70px; |
| 66 |
--ctw-ybx-text-size: 20px; |
| 67 |
--ctw-ybx-text-weight: 600; |
| 68 |
} |
| 69 |
|
| 70 |
/* Layout/skin blocks below reset some of the tokens above, so re-state the |
| 71 |
ones the whole refresh depends on at wrapper level too. The border and |
| 72 |
shadow are what turn the story box into a card: Free's legacy defaults are |
| 73 |
0-width borders and no shadow, so without these the padding above just |
| 74 |
moves the copy inwards on a flat, square box. */ |
| 75 |
.ctl-new-design.ctl-wrapper .cool-timeline-wrapper { |
| 76 |
--ctw-cbx-title-padding: 17px 20px 17px 20px; |
| 77 |
--ctw-cbx-padding: 20px; |
| 78 |
--ctw-cbx-pad: 20px; |
| 79 |
--ctw-cbx-img-padding: 0; |
| 80 |
--ctw-cbx-bd-top-width: 1px; |
| 81 |
--ctw-cbx-bd-right-width: 1px; |
| 82 |
--ctw-cbx-bd-bottom-width: 1px; |
| 83 |
--ctw-cbx-bd-left-width: 1px; |
| 84 |
--ctw-cbx-bd-style: solid; |
| 85 |
--ctw-cbx-bd-color: color-mix(in oklch, var(--ctw-cbx-des-color) 20%, white); |
| 86 |
--ctw-cbx-shadow: 0px 0px 30px #e9e9e9d6; |
| 87 |
--ctw-cbx-shadow-left: 0px 0px 30px #e9e9e9d6; |
| 88 |
--ctw-cbx-shadow-hover: none; |
| 89 |
--ctw-cbx-shadow-left-hover: none; |
| 90 |
|
| 91 |
/* The connector must carry the card's outline, not its own colour. The |
| 92 |
legacy sheet declares --ctw-arw-bd-color: var(--ctw-cbx-bd-color) up on |
| 93 |
.ctl-wrapper, where --ctw-cbx-bd-color is still var(--ctw-ibx-bg) - the |
| 94 |
marker's fill. A custom property resolves on the element that declares |
| 95 |
it, so overriding --ctw-cbx-bd-color here never reaches it: the card |
| 96 |
took the mix below while the pointer kept the marker colour. Naming it |
| 97 |
here puts both on the same outline, which is what Pro's pointer does |
| 98 |
when it reads border-color: var(--ctw-cbx-bd-color, --ctw-arw-bd-color). */ |
| 99 |
--ctw-arw-bd-color: color-mix(in oklch, var(--ctw-cbx-des-color) 20%, white); |
| 100 |
|
| 101 |
/* Layout sheets reset these two further down, so re-state them here. */ |
| 102 |
--ctw-cbx-date-font-weight: var(--ctl-set-date-font-weight, 600); |
| 103 |
} |
| 104 |
|
| 105 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper { |
| 106 |
--ctw-cbx-title-padding: 19px 22px 19px 22px; |
| 107 |
--ctw-cbx-padding: 22px; |
| 108 |
--ctw-cbx-pad: 22px; |
| 109 |
--ctw-cbx-img-margin: 0px 0px 20px 0px; |
| 110 |
} |
| 111 |
|
| 112 |
/* Compact: Pro's default recipe - card keeps side/bottom padding so title and |
| 113 |
description sit inset, while the date band (and media) cancel that inset and |
| 114 |
paint edge to edge. Free previously zeroed --ctw-cbx-pad, which made the |
| 115 |
bleed calc a no-op and left the green date strip floating inside the card |
| 116 |
with white gutters (especially obvious on mobile). */ |
| 117 |
.ctl-new-design.ctl-wrapper .ctl-compact-wrapper { |
| 118 |
/* No bottom padding on the title. Compact stacks the title straight above |
| 119 |
the description; the description's own top padding is the separator. */ |
| 120 |
--ctw-cbx-title-padding: 0px 0px 20px 0px; |
| 121 |
--ctw-compact-label-padding: 19px 22px 19px 22px; |
| 122 |
--ctw-cbx-des-padding: 0px; |
| 123 |
--ctw-cbx-padding: 22px; |
| 124 |
--ctw-cbx-pad: 22px; |
| 125 |
--ctw-cbx-img-padding: 0; |
| 126 |
--ctw-cbx-radius-left: 15px; |
| 127 |
--ctw-cbx-radius: 15px; |
| 128 |
/* Keep hover on compact's own 15px - see the wrapper block above. */ |
| 129 |
--ctw-cbx-radius-hover: var(--ctw-cbx-radius); |
| 130 |
--ctw-cbx-radius-left-hover: var(--ctw-cbx-radius-left); |
| 131 |
--ctw-cbx-img-margin: 0px 0px 20px 0px; |
| 132 |
/* Date-band geometry shared by desktop + mobile compact connectors. */ |
| 133 |
--ctw-compact-label-bar-height: calc(38px + var(--ctw-cbx-date-font-size, var(--ctw-lbl-big-size, 20px))); |
| 134 |
--ctw-compact-label-bar-center: calc(var(--ctw-compact-label-bar-height) / 2); |
| 135 |
/* Slightly larger than legacy ibx/2 so the tip reads on the tall date band. */ |
| 136 |
--ctw-compact-arw-size: calc(var(--ctw-ibx-size) * 0.62); |
| 137 |
/* Desktop story gutter toward the line (matches legacy ibx + 10). */ |
| 138 |
--ctw-compact-story-line-pad: calc(var(--ctw-ibx-size) + 10px); |
| 139 |
} |
| 140 |
|
| 141 |
|
| 142 |
/* -------------------------------------------------------------------------- |
| 143 |
1b. Full-bleed title band and media |
| 144 |
|
| 145 |
The card's padding insets the copy, and the title band and the story media |
| 146 |
cancel that inset with a negative margin the width of --ctw-cbx-pad, so |
| 147 |
both still read edge to edge. .ctl-content already has overflow: hidden and |
| 148 |
border-radius in the legacy sheet, so the band's top corners get clipped to |
| 149 |
the card radius without needing a radius of their own. |
| 150 |
|
| 151 |
The bleed also covers the card's 1px border: without the border term the |
| 152 |
band stops at the padding edge and a white fringe shows in the rounded |
| 153 |
corners (the border ring peeks past the fill). |
| 154 |
|
| 155 |
Excluded on the clean skin, which draws no title background - the same way |
| 156 |
Pro excludes its light and dark skins from this treatment. |
| 157 |
-------------------------------------------------------------------------- */ |
| 158 |
|
| 159 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-clean-skin, .ctl-compact-wrapper) .ctl-title, |
| 160 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-clean-skin, .ctl-compact-wrapper) .ctl-content > .ctl-media:not(.small) { |
| 161 |
width: calc(100% + (2 * var(--ctw-cbx-pad, 20px)) + (2 * var(--ctw-cbx-bd-left-width, 1px))) !important; |
| 162 |
max-width: none !important; |
| 163 |
margin-left: calc(-1 * var(--ctw-cbx-pad, 20px) - var(--ctw-cbx-bd-left-width, 1px)) !important; |
| 164 |
margin-right: calc(-1 * var(--ctw-cbx-pad, 20px) - var(--ctw-cbx-bd-right-width, 1px)) !important; |
| 165 |
} |
| 166 |
|
| 167 |
/* Title band is the first thing in the card, so it also cancels the top pad |
| 168 |
and the top border. */ |
| 169 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-clean-skin, .ctl-compact-wrapper) .ctl-title:first-child { |
| 170 |
margin-top: calc(-1 * var(--ctw-cbx-pad, 20px) - var(--ctw-cbx-bd-top-width, 1px)) !important; |
| 171 |
} |
| 172 |
|
| 173 |
/* The mirror of the rule above, at the other end of the card. The bottom |
| 174 |
padding is there to sit under the description; hide the description |
| 175 |
(story-content="hide" emits no .ctl-description) and whatever is last has |
| 176 |
to carry the card's bottom edge instead - and the two things that can be |
| 177 |
last both run edge to edge, so the padding shows as a white strip under |
| 178 |
them. Media last leaves a band below a full-bleed image; title last leaves |
| 179 |
one under the coloured band. Zero it and both reach the card's bottom |
| 180 |
border and take its rounded corners, the way the title band does at the top. |
| 181 |
|
| 182 |
Not compact: its running order puts the plain-text title last, not a |
| 183 |
bleeding block, so zeroing there would pull body text hard against the |
| 184 |
border. Clean skin is out for the matching reason: it neither bleeds its |
| 185 |
media nor paints a title band, so it has no strip to remove. */ |
| 186 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-clean-skin, .ctl-compact-wrapper) .ctl-content:not(:has(> .ctl-description)) { |
| 187 |
padding-bottom: 0 !important; |
| 188 |
} |
| 189 |
|
| 190 |
/* The media itself fills the wrapper the rule above widened. */ |
| 191 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-clean-skin, .ctl-compact-wrapper) .ctl-content > .ctl-media:not(.small) img, |
| 192 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-clean-skin, .ctl-compact-wrapper) .ctl-content > .ctl-media:not(.small) iframe { |
| 193 |
width: 100% !important; |
| 194 |
max-width: none !important; |
| 195 |
padding-left: 0 !important; |
| 196 |
padding-right: 0 !important; |
| 197 |
margin-left: 0 !important; |
| 198 |
margin-right: 0 !important; |
| 199 |
} |
| 200 |
|
| 201 |
|
| 202 |
|
| 203 |
/* Both-side and one-side stack title band -> media -> description. The band |
| 204 |
cancels the card's top padding, so with no featured image the description |
| 205 |
starts flush against the coloured band with nothing between them. Same 17px |
| 206 |
the compact title gets in section 5. */ |
| 207 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-content:not(:has(> .ctl-media)) .ctl-description { |
| 208 |
padding-top: 17px !important; |
| 209 |
} |
| 210 |
|
| 211 |
|
| 212 |
/* Pointer: Pro's Timeline Widget recipe — half-fill gradient diamond centred |
| 213 |
on the card edge. Free previously painted a SOLID diamond so the half under |
| 214 |
the coloured title band disappeared green-on-green; with show-title=hide |
| 215 |
that tucked half sat on the image and read as a full diamond stuck on the |
| 216 |
corner. Pro keeps the inner half transparent, so only the outer triangle |
| 217 |
shows whether the card starts with a title band or with media. |
| 218 |
|
| 219 |
Span is arw-size / 1.5 (Pro default 34 → ~22.67px). Free has no arrow-size |
| 220 |
setting, so the 34px fallback is the shipped size. Seat uses |
| 221 |
--ctw-cbx-edge-inset (0 here — Free's legacy sheet has no 3px content |
| 222 |
margin Pro accounts for) so the flat edge lands on the card border. */ |
| 223 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-story { |
| 224 |
--ctw-arw-span: calc(var(--ctw-arw-size, 34px) / 1.5); |
| 225 |
--ctw-cbx-edge-inset: 0px; |
| 226 |
} |
| 227 |
|
| 228 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-story .ctl-arrow { |
| 229 |
z-index: 4; |
| 230 |
overflow: visible; |
| 231 |
box-sizing: border-box; |
| 232 |
box-shadow: none !important; |
| 233 |
width: var(--ctw-arw-span) !important; |
| 234 |
height: var(--ctw-arw-span) !important; |
| 235 |
clip-path: none !important; |
| 236 |
-webkit-clip-path: none !important; |
| 237 |
transform: rotate(45deg) !important; |
| 238 |
background: linear-gradient(to top right, var(--ctw-arw-bg) 52%, transparent 48%) !important; |
| 239 |
border-style: var(--ctw-cbx-bd-style, solid) !important; |
| 240 |
border-color: var(--ctw-cbx-bd-color, var(--ctw-arw-bd-color)) !important; |
| 241 |
border-width: 0 0 var(--ctw-cbx-bd-left-width, 1px) var(--ctw-cbx-bd-left-width, 1px) !important; |
| 242 |
left: calc(var(--ctw-cbx-edge-inset, 0px) - var(--ctw-arw-span) / 2 + var(--ctw-cbx-bd-left-width, 0px) / 3) !important; |
| 243 |
right: auto !important; |
| 244 |
} |
| 245 |
|
| 246 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-story.ctl-story-left .ctl-arrow { |
| 247 |
background: linear-gradient(to bottom left, var(--ctw-arw-bg) 52%, transparent 48%) !important; |
| 248 |
border-width: var(--ctw-cbx-bd-right-width, 1px) var(--ctw-cbx-bd-right-width, 1px) 0 0 !important; |
| 249 |
left: auto !important; |
| 250 |
right: calc(var(--ctw-cbx-edge-inset, 0px) - var(--ctw-arw-span) / 2 + var(--ctw-cbx-bd-right-width, 0px) / 3) !important; |
| 251 |
} |
| 252 |
|
| 253 |
|
| 254 |
/* -------------------------------------------------------------------------- |
| 255 |
2. Copy, media and Read More spacing |
| 256 |
-------------------------------------------------------------------------- */ |
| 257 |
|
| 258 |
.ctl-new-design.ctl-wrapper .ctl-description p { |
| 259 |
margin: 0px; |
| 260 |
padding: 0px; |
| 261 |
} |
| 262 |
|
| 263 |
/* Beat the block editor theme's paragraph margin on the story description |
| 264 |
(.editor-styles-wrapper .is-root-container p { margin-bottom: 1.6em }). */ |
| 265 |
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container .ctl-new-design.ctl-wrapper .ctl-description p { |
| 266 |
margin: 0; |
| 267 |
margin-bottom: 0; |
| 268 |
} |
| 269 |
|
| 270 |
.ctl-new-design.ctl-wrapper .ctl-media img, |
| 271 |
.ctl-new-design.ctl-wrapper .ctl-media iframe, |
| 272 |
.ctl-new-design.ctl-wrapper .ctl-content :where(img, iframe) { |
| 273 |
padding: 0 !important; |
| 274 |
} |
| 275 |
|
| 276 |
/* No copy under the media - drop the gap the image would otherwise leave. */ |
| 277 |
.ctl-new-design.ctl-wrapper .ctl-story .ctl-content:not(:has(> .ctl-description)) .ctl-media, |
| 278 |
.ctl-new-design.ctl-wrapper .ctl-story .ctl-content:not(:has(> .ctl-description)) .ctl-media img, |
| 279 |
.ctl-new-design.ctl-wrapper .ctl-story .ctl-content:not(:has(> .ctl-description)) .ctl-media iframe { |
| 280 |
margin-bottom: 0 !important; |
| 281 |
} |
| 282 |
|
| 283 |
/* Description embeds must not stretch. |
| 284 |
|
| 285 |
Themes wrap an oEmbed in an aspect-ratio box - Astra's .ast-oembed-container |
| 286 |
is `position: relative; padding-bottom: 56.25%; height: 0` with the iframe |
| 287 |
absolutely filling it - and Astra additionally writes an inline |
| 288 |
`height: 100%` on it. |
| 289 |
|
| 290 |
.ctl-content is a flex container and .ctl-description is a flex item, so it |
| 291 |
stretches and therefore has a DEFINITE height. That is what makes the inline |
| 292 |
`height: 100%` resolve instead of collapsing to auto: the box takes the |
| 293 |
description's full height and then adds its own 56.25% aspect padding on top. |
| 294 |
The surplus overflows the card, .ctl-content clips it at the border box with |
| 295 |
overflow: hidden, and the card's bottom padding disappears with it - which is |
| 296 |
why it only happens on stories whose description carries a video, and why it |
| 297 |
happens in every layout. |
| 298 |
|
| 299 |
Sizing the item from its content instead of stretching it leaves the height |
| 300 |
indefinite, so `height: 100%` falls back to auto and the aspect padding alone |
| 301 |
sizes the box. Theme-agnostic: nothing here names a theme's classes, and the |
| 302 |
description is alone on its flex line at width 100%, so not stretching it |
| 303 |
changes nothing else about the layout. */ |
| 304 |
.ctl-new-design.ctl-wrapper .ctl-content > .ctl-description { |
| 305 |
align-self: flex-start; |
| 306 |
} |
| 307 |
|
| 308 |
.ctl-new-design.ctl-wrapper a.ctl_read_more { |
| 309 |
border: none; |
| 310 |
padding: 12px 20px; |
| 311 |
margin: 22px 0px 0px; |
| 312 |
font-size: 16px; |
| 313 |
font-weight: 500; |
| 314 |
line-height: normal; |
| 315 |
border-radius: var(--ctw-read-more-radius, 10px); |
| 316 |
-webkit-border-radius: var(--ctw-read-more-radius, 10px); |
| 317 |
-moz-border-radius: var(--ctw-read-more-radius, 10px); |
| 318 |
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; |
| 319 |
} |
| 320 |
|
| 321 |
/* The rule above drops Free's 1px outline, which was the only thing making the |
| 322 |
link visible - without a fill it reads as bare text in the middle of the |
| 323 |
copy. Pro's Default design paints it with the story's own colour, alternating |
| 324 |
first/second exactly as the title band does, so take the same pair. |
| 325 |
|
| 326 |
The label is #fff rather than Pro's var(--ctw-cbx-title-color). That variable |
| 327 |
is white at Free's wrapper level, but the compact sheet re-points it at the |
| 328 |
story colour (ctl-compact-style.css:17-32, and #666 at :10) - the same colour |
| 329 |
this button is filled with, so the text was painting itself invisible. The |
| 330 |
fill is always a saturated story colour, so white is the one value that |
| 331 |
works in every layout. */ |
| 332 |
.ctl-new-design.ctl-wrapper .cool-timeline-wrapper:not(.ctl-clean-skin) .ctl-story.odd a.ctl_read_more { |
| 333 |
background-color: var(--ctw-first-story-color); |
| 334 |
color: #fff; |
| 335 |
} |
| 336 |
|
| 337 |
.ctl-new-design.ctl-wrapper .cool-timeline-wrapper:not(.ctl-clean-skin) .ctl-story.even a.ctl_read_more { |
| 338 |
background-color: var(--ctw-second-story-color); |
| 339 |
color: #fff; |
| 340 |
} |
| 341 |
|
| 342 |
.ctl-new-design.ctl-wrapper .cool-timeline-wrapper:not(.ctl-clean-skin) .ctl-story.odd a.ctl_read_more:hover { |
| 343 |
background-color: color-mix(in srgb, var(--ctw-first-story-color) 90%, black); |
| 344 |
color: #fff; |
| 345 |
} |
| 346 |
|
| 347 |
.ctl-new-design.ctl-wrapper .cool-timeline-wrapper:not(.ctl-clean-skin) .ctl-story.even a.ctl_read_more:hover { |
| 348 |
background-color: color-mix(in srgb, var(--ctw-second-story-color) 90%, black); |
| 349 |
color: #fff; |
| 350 |
} |
| 351 |
|
| 352 |
/* Free appends the link inside the excerpt's last paragraph, so it sits inline |
| 353 |
after the trailing ellipsis. Pro's button is a block of its own. */ |
| 354 |
.ctl-new-design.ctl-wrapper .ctl-description a.ctl_read_more { |
| 355 |
display: table; |
| 356 |
filter: none; |
| 357 |
-webkit-filter: none; |
| 358 |
} |
| 359 |
|
| 360 |
|
| 361 |
/* -------------------------------------------------------------------------- |
| 362 |
2b. Editor preview - no theme underline on Read More |
| 363 |
|
| 364 |
Ported from Pro's section 42. The button is drawn as a filled chip and |
| 365 |
ctl-common-styles.css already takes its underline off, at a weight that |
| 366 |
holds on the front end. It does not hold inside the block editor: the |
| 367 |
theme's editor stylesheet is loaded there too, and themes underline content |
| 368 |
links from `.editor-styles-wrapper .is-root-container a` - same 0,2,1 as |
| 369 |
the plugin's `.ctl-wrapper a.ctl_read_more` but later in source order. So |
| 370 |
the chip came out underlined in the preview and nowhere else. |
| 371 |
|
| 372 |
Both class names the loop can emit: class-ctl-helpers.php:177 writes |
| 373 |
`class="read_more ctl_read_more"`. Plus the states a theme usually |
| 374 |
decorates. |
| 375 |
|
| 376 |
Two anchors, because only one of them is guaranteed: .ctl-editor-preview is |
| 377 |
added by the shortcode itself and so depends on the render going through |
| 378 |
the SSR path, while .editor-styles-wrapper is the canvas the block editor |
| 379 |
always puts around its content. Neither exists on a published page, so the |
| 380 |
front end keeps the rule it already had at its original weight and a site |
| 381 |
that deliberately underlines its buttons is unaffected there. |
| 382 |
-------------------------------------------------------------------------- */ |
| 383 |
|
| 384 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview a.ctl_read_more, |
| 385 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview a.read_more, |
| 386 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview a.ctl_read_more:hover, |
| 387 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview a.read_more:hover, |
| 388 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview a.ctl_read_more:focus, |
| 389 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview a.read_more:focus, |
| 390 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper a.ctl_read_more, |
| 391 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper a.read_more, |
| 392 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper a.ctl_read_more:hover, |
| 393 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper a.read_more:hover, |
| 394 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper a.ctl_read_more:focus, |
| 395 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper a.read_more:focus { |
| 396 |
text-decoration: none !important; |
| 397 |
} |
| 398 |
|
| 399 |
/* No rule for .ctl-label-big here on purpose. Pro hard-codes font-weight: 600 |
| 400 |
on it, but Free's .ctl-label-big already reads font-weight from |
| 401 |
var(--ctw-cbx-date-font-weight) (ctl-common-styles.css), and the token block |
| 402 |
above points that at var(--ctl-set-date-font-weight, 600). So the weight is |
| 403 |
600 by default and follows the Date typography setting when one is set - |
| 404 |
restating 600 here would win on specificity and lock the setting out. |
| 405 |
|
| 406 |
.ctl-label-small is not rendered by Free at all, so Pro's rules for it are |
| 407 |
left out rather than shipped dead. */ |
| 408 |
|
| 409 |
|
| 410 |
/* -------------------------------------------------------------------------- |
| 411 |
3. Vertical (both-sided) - card, marker and label gap against the line |
| 412 |
|
| 413 |
Free's legacy sheet has no --ctw-story-line-gap term at all: the card sits |
| 414 |
flush against the marker. These re-state Free's own geometry with the gap |
| 415 |
folded in, so the card, the icon, the dot and the labels all move together. |
| 416 |
|
| 417 |
Desktop only (min-width: 768px). Ungated, the higher-specificity 50% width |
| 418 |
and absolute label offsets beat Free's mobile single-column rules and crush |
| 419 |
both-sided cards to ~half of half the viewport - the same class of bug Pro |
| 420 |
avoids by keeping its gap-aware 50% width at the same specificity as its |
| 421 |
mobile 100% override. Gate here; section 7 restores mobile width explicitly. |
| 422 |
-------------------------------------------------------------------------- */ |
| 423 |
|
| 424 |
@media only screen and (min-width: 768px) { |
| 425 |
|
| 426 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-one-sided, .ctl-compact-wrapper) .ctl-story { |
| 427 |
width: calc(50% - var(--ctw-ibx-size) - var(--ctw-story-line-gap, 0px)); |
| 428 |
} |
| 429 |
|
| 430 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-one-sided, .ctl-compact-wrapper) .ctl-icon { |
| 431 |
left: calc(0px - var(--ctw-ibx-size) - (var(--ctw-ibx-size) - 5px) / 2 - var(--ctw-story-line-gap, 0px)); |
| 432 |
} |
| 433 |
|
| 434 |
/* `left: auto` is load-bearing, not tidiness. The rule above sets `left` on |
| 435 |
every .ctl-icon in the layout, left-hand stories included, and its :not() |
| 436 |
carries two extra classes of specificity - so it outranks the legacy |
| 437 |
`left: auto` that Free's own left-story rule relies on. With both `left` and |
| 438 |
`right` resolved on an absolutely positioned box of known width, `left` wins |
| 439 |
in LTR, and the marker was landing that far OUTSIDE the card's left edge |
| 440 |
instead of on the rail at its right. Cancelling `left` here hands the box |
| 441 |
back to `right`. |
| 442 |
|
| 443 |
Mirror of the right-side formula above, so both markers land on the rail. |
| 444 |
Free (and Pro) leave the left one on an older `ibx/2 - ibx*1.9` expression, |
| 445 |
which is not the mirror of `-ibx - (ibx-5)/2`: it parks the left icon 1.5px |
| 446 |
off centre at the default 40px marker, and further out as the marker grows. |
| 447 |
Solving the same centring for a right-anchored box gives the offset below. */ |
| 448 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-one-sided, .ctl-compact-wrapper) .ctl-story.ctl-story-left .ctl-icon { |
| 449 |
left: auto; |
| 450 |
right: calc(0px - var(--ctw-ibx-size) - (var(--ctw-ibx-size) - 5px) / 2 - var(--ctw-story-line-gap, 0px)); |
| 451 |
} |
| 452 |
|
| 453 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-one-sided, .ctl-compact-wrapper) .ctl-icondot { |
| 454 |
left: calc(0px - var(--ctw-ibx-size) - var(--ctw-ibx-size) / 4 - var(--ctw-line-width) / 6 - var(--ctw-story-line-gap, 0px)); |
| 455 |
} |
| 456 |
|
| 457 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-one-sided, .ctl-compact-wrapper) .ctl-story.ctl-story-left .ctl-icondot { |
| 458 |
left: auto; |
| 459 |
right: calc(0px - var(--ctw-ibx-size) - var(--ctw-ibx-size) / 4 + var(--ctw-line-width) / 4 - var(--ctw-story-line-gap, 0px)); |
| 460 |
} |
| 461 |
|
| 462 |
/* Vertical placement of the labels is set by the title-bar centering in |
| 463 |
section 6 below; these only move them out horizontally. |
| 464 |
|
| 465 |
The gap is counted TWICE on purpose, which is what Pro does. One gap cancels |
| 466 |
the card's own move - the label is positioned off the card's edge, and the |
| 467 |
card has just stepped away from the rail - and the second opens the same gap |
| 468 |
again between the marker and the label. With a single gap the label simply |
| 469 |
travelled with the card and sat as tight to the marker as before. |
| 470 |
|
| 471 |
No +/-10px nudge. Pro carries one, but dropping it is what makes the two |
| 472 |
gaps either side of the marker equal, which is the point of the gap: |
| 473 |
|
| 474 |
marker -> card = (ibx + gap) - (ibx - 5)/2 = ibx/2 + 5/2 + gap |
| 475 |
label -> marker = (ibx*2 + gap*2) - ibx - gap - (ibx - 5)/2 |
| 476 |
|
| 477 |
which reduce to the same length once the nudge is gone - and they stay equal |
| 478 |
for the dot marker too, whose smaller width cancels out of both sides. With |
| 479 |
Pro's +10px the label sat 10px further out than the card, so the marker read |
| 480 |
as off-centre between them. Compact keeps its own label placement. */ |
| 481 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-story .ctl-labels { |
| 482 |
right: calc(100% + var(--ctw-ibx-size) * 2 + (var(--ctw-story-line-gap, 0px) * 2)); |
| 483 |
} |
| 484 |
|
| 485 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-story.ctl-story-dot-icon .ctl-labels { |
| 486 |
right: calc(100% + var(--ctw-ibx-size) * 2 + (var(--ctw-story-line-gap, 0px) * 2)); |
| 487 |
} |
| 488 |
|
| 489 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-story.ctl-story-left .ctl-labels { |
| 490 |
left: calc(100% + var(--ctw-ibx-size) * 2 + (var(--ctw-story-line-gap, 0px) * 2)); |
| 491 |
right: auto; |
| 492 |
} |
| 493 |
|
| 494 |
} |
| 495 |
|
| 496 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper .ctl-year { |
| 497 |
margin: 22px 0 50px 0px; |
| 498 |
} |
| 499 |
|
| 500 |
/* One-side hangs the year badge at left: -115px and joins it to the rail with |
| 501 |
a fixed 37px stub (.ctl-year:after), a width that only reaches when the |
| 502 |
badge is Free's original 80px. The refresh takes Pro's 70px badge, which |
| 503 |
pulls the badge's right edge 10px further from the rail and leaves the stub |
| 504 |
hanging in mid-air. Measure the stub from the badge instead of hard-coding |
| 505 |
it, so it closes the distance at any badge size - the 2px is the overlap |
| 506 |
Free's 37px already carried at 80px, keeping the join solid. */ |
| 507 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-year:after { |
| 508 |
width: calc(115px - var(--ctw-ybx-size) + 2px); |
| 509 |
} |
| 510 |
|
| 511 |
|
| 512 |
/* -------------------------------------------------------------------------- |
| 513 |
4. One-side layout |
| 514 |
|
| 515 |
One-side is not the both-sided layout with one column hidden - it is its own |
| 516 |
coordinate system. Free lays it out with a 300px left gutter on the wrapper |
| 517 |
(.ctl-one-sided { padding-left: 300px }), pins the rail's ends at 297px, |
| 518 |
caps the card at max-width: 600px and centres both markers on the rail with |
| 519 |
transform: translateX(-50%) rather than by offset alone. |
| 520 |
|
| 521 |
Pro's one-side numbers are written against a different base - no gutter, no |
| 522 |
translate, no cap - so porting them lands the card, the rail and the markers |
| 523 |
in three different places at once. Only the line gap is taken here, written |
| 524 |
in Free's own terms: the card moves right by the gap and the markers move |
| 525 |
left by the same amount, so the card clears the rail while the markers stay |
| 526 |
on it. Everything else is left to Free's own rules. |
| 527 |
-------------------------------------------------------------------------- */ |
| 528 |
|
| 529 |
@media only screen and (min-width: 769px) { |
| 530 |
|
| 531 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-story { |
| 532 |
left: calc(31px + var(--ctw-ibx-size) / 4 + var(--ctw-story-line-gap, 0px)); |
| 533 |
} |
| 534 |
|
| 535 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-story.ctl-story-icon { |
| 536 |
left: calc(31px + var(--ctw-ibx-size) / 2 + var(--ctw-story-line-gap, 0px)); |
| 537 |
} |
| 538 |
|
| 539 |
/* Keep Free's translateX(-50%) centring - only take back the gap the card |
| 540 |
just moved, so the marker stays on the rail. */ |
| 541 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-icon { |
| 542 |
left: calc(-30px - var(--ctw-ibx-size) / 2 - var(--ctw-story-line-gap, 0px)); |
| 543 |
} |
| 544 |
|
| 545 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-icondot { |
| 546 |
left: calc(-30px - var(--ctw-ibx-size) / 4 - var(--ctw-story-line-gap, 0px)); |
| 547 |
} |
| 548 |
|
| 549 |
} |
| 550 |
|
| 551 |
|
| 552 |
/* -------------------------------------------------------------------------- |
| 553 |
5. Compact layout |
| 554 |
|
| 555 |
Same recipe Pro gives compact default: content keeps side/bottom padding, |
| 556 |
the date band cancels it (and the border) so the coloured strip is flush |
| 557 |
with the card edge, title is a plain heading (not a second coloured band), |
| 558 |
and media spans the card width. |
| 559 |
-------------------------------------------------------------------------- */ |
| 560 |
|
| 561 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-content { |
| 562 |
padding: 0 var(--ctw-cbx-pad, 22px) var(--ctw-cbx-pad, 22px); |
| 563 |
} |
| 564 |
|
| 565 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-title { |
| 566 |
background: transparent !important; |
| 567 |
background-color: transparent !important; |
| 568 |
width: 100% !important; |
| 569 |
max-width: 100% !important; |
| 570 |
margin-left: 0 !important; |
| 571 |
margin-right: 0 !important; |
| 572 |
margin-top: 0 !important; |
| 573 |
padding: var(--ctw-cbx-title-padding, 0px 0px 20px 0px) !important; |
| 574 |
} |
| 575 |
|
| 576 |
/* Compact stacks date band -> media -> title. The card carries no top padding |
| 577 |
(the band bleeds into it), so with no featured image the title butts |
| 578 |
straight against the coloured band. Give it the gap the media would have |
| 579 |
provided. :has() is unsupported nowhere this sheet already targets, and an |
| 580 |
engine without it simply drops the rule and keeps today's spacing. */ |
| 581 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-content:not(:has(> .ctl-media)) .ctl-title { |
| 582 |
padding-top: 17px !important; |
| 583 |
} |
| 584 |
|
| 585 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-labels { |
| 586 |
width: calc(100% + (2 * var(--ctw-cbx-pad, 22px)) + (2 * var(--ctw-cbx-bd-left-width, 1px))) !important; |
| 587 |
max-width: none; |
| 588 |
margin-left: calc(-1 * var(--ctw-cbx-pad, 22px) - var(--ctw-cbx-bd-left-width, 1px)) !important; |
| 589 |
margin-right: calc(-1 * var(--ctw-cbx-pad, 22px) - var(--ctw-cbx-bd-right-width, 1px)) !important; |
| 590 |
margin-bottom: 0 !important; |
| 591 |
padding: var(--ctw-compact-label-padding, 19px 22px 19px 22px); |
| 592 |
} |
| 593 |
|
| 594 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-content > .ctl-media:not(.small), |
| 595 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-content > .full-width { |
| 596 |
width: calc(100% + (2 * var(--ctw-cbx-pad, 22px))) !important; |
| 597 |
max-width: none !important; |
| 598 |
margin-left: calc(-1 * var(--ctw-cbx-pad, 22px)) !important; |
| 599 |
margin-right: calc(-1 * var(--ctw-cbx-pad, 22px)) !important; |
| 600 |
padding: 0 !important; |
| 601 |
} |
| 602 |
|
| 603 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-content > .ctl-media:not(.small) img, |
| 604 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-content > .ctl-media:not(.small) iframe, |
| 605 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-content > .full-width img, |
| 606 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-content > .full-width iframe { |
| 607 |
width: 100% !important; |
| 608 |
max-width: none !important; |
| 609 |
padding: 0 !important; |
| 610 |
} |
| 611 |
|
| 612 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-right .ctl-icon { |
| 613 |
left: calc(0px - (var(--ctw-ibx-size) - 5px) / 2); |
| 614 |
} |
| 615 |
|
| 616 |
/* Compact desktop: solid diamond seated on the date band (legacy left a |
| 617 |
15px square too high on the 72px band, so only a blunt tip showed). */ |
| 618 |
@media only screen and (min-width: 768px) { |
| 619 |
|
| 620 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-start, |
| 621 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-end { |
| 622 |
/* Circle is 4*line wide; centre on the 50% line. Legacy used 2.1*line |
| 623 |
and sat ~0.3px left of true centre. */ |
| 624 |
left: calc(50% - var(--ctw-line-width) * 2) !important; |
| 625 |
} |
| 626 |
|
| 627 |
/* The editor twins on every compact arrow rule below exist because |
| 628 |
includes/shortcode-blocks/src/style.scss pins the compact pointer to |
| 629 |
Free's LEGACY geometry with !important - seat, half-transparent |
| 630 |
gradient, border rim and drop shadow - and the block assets are |
| 631 |
enqueued after this sheet. Its heaviest compact arrow rule reaches |
| 632 |
0,8,0, so a plain restatement here ties it and loses on source order: |
| 633 |
the preview kept the old wedge while the front end moved. Naming |
| 634 |
.cool-timeline-wrapper alongside .ctl-vertical-wrapper (the same |
| 635 |
element) puts these at 0,9,0 and clear of it. They are appended to the |
| 636 |
existing selector lists rather than restated so the two cannot drift |
| 637 |
apart, and they sit inside the same media queries, so the preview |
| 638 |
follows the canvas width exactly as the front end follows the |
| 639 |
viewport. Every compact story carries a side class, so naming both |
| 640 |
sides covers all of them. */ |
| 641 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-arrow, |
| 642 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-left .ctl-arrow, |
| 643 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-right .ctl-arrow, |
| 644 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-left .ctl-arrow, |
| 645 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-right .ctl-arrow, |
| 646 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-left .ctl-arrow, |
| 647 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-right .ctl-arrow { |
| 648 |
/* -10px matches legacy content margin-top on desktop compact. */ |
| 649 |
top: calc(var(--ctw-compact-label-bar-center) - var(--ctw-compact-arw-size) / 2 - 10px) !important; |
| 650 |
width: var(--ctw-compact-arw-size) !important; |
| 651 |
height: var(--ctw-compact-arw-size) !important; |
| 652 |
z-index: 5 !important; |
| 653 |
background: var(--ctw-arw-bg) !important; |
| 654 |
background-image: none !important; |
| 655 |
border-style: var(--ctw-cbx-bd-style, solid) !important; |
| 656 |
border-color: var(--ctw-cbx-bd-color, var(--ctw-arw-bd-color)) !important; |
| 657 |
/* Left-pointing pair by default; the left-hand rule below flips it. */ |
| 658 |
border-width: 0 0 var(--ctw-cbx-bd-left-width, 1px) var(--ctw-cbx-bd-left-width, 1px) !important; |
| 659 |
box-shadow: none !important; |
| 660 |
transform: rotate(45deg) !important; |
| 661 |
clip-path: none !important; |
| 662 |
-webkit-clip-path: none !important; |
| 663 |
margin-top: 0 !important; |
| 664 |
} |
| 665 |
|
| 666 |
/* Centre the diamond on the content edge - the story's padding toward the |
| 667 |
line is exactly --ctw-compact-story-line-pad, so half the square lands |
| 668 |
inside the card and half outside. |
| 669 |
|
| 670 |
No large tuck term: the old +3px drew ~4px of the arrow's border |
| 671 |
diagonally across the card's face, which read as a notch cut into the |
| 672 |
story. The right-hand side takes 1px, though, and the left-hand side |
| 673 |
none. They are not arbitrary - seated at exactly 0 the two sides land a |
| 674 |
hair either side of the edge (measured: left centre 0.015px inside the |
| 675 |
card, right centre 0.015px outside), so at a device pixel ratio of 1 the |
| 676 |
right-hand arrow can round one pixel clear of the card and show daylight |
| 677 |
while the left one stays covered. 1px inward absorbs that. */ |
| 678 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-right .ctl-arrow, |
| 679 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-right .ctl-arrow, |
| 680 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-right .ctl-arrow { |
| 681 |
left: calc(var(--ctw-compact-story-line-pad) - var(--ctw-compact-arw-size) / 2 + 1px) !important; |
| 682 |
right: auto !important; |
| 683 |
} |
| 684 |
|
| 685 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-left .ctl-arrow, |
| 686 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-left .ctl-arrow, |
| 687 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-left .ctl-arrow { |
| 688 |
right: calc(var(--ctw-compact-story-line-pad) - var(--ctw-compact-arw-size) / 2) !important; |
| 689 |
left: auto !important; |
| 690 |
border-width: var(--ctw-cbx-bd-right-width, 1px) var(--ctw-cbx-bd-right-width, 1px) 0 0 !important; |
| 691 |
} |
| 692 |
|
| 693 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-icondot { |
| 694 |
top: calc(var(--ctw-compact-label-bar-center) - var(--ctw-ibx-size) / 4 - 10px) !important; |
| 695 |
margin-top: 0 !important; |
| 696 |
} |
| 697 |
|
| 698 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-icon { |
| 699 |
top: calc(var(--ctw-compact-label-bar-center) - ((var(--ctw-ibx-size) - 5px) / 2) - 10px) !important; |
| 700 |
transform: none !important; |
| 701 |
margin-top: 0 !important; |
| 702 |
} |
| 703 |
|
| 704 |
/* Labels sit in the content box, which has a negative margin-top on |
| 705 |
desktop compact - so a story-relative top misses the band. Anchor to |
| 706 |
the date strip instead (same recipe as mobile). */ |
| 707 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story { |
| 708 |
anchor-scope: --ctl-compact-label; |
| 709 |
} |
| 710 |
|
| 711 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-labels { |
| 712 |
anchor-name: --ctl-compact-label; |
| 713 |
} |
| 714 |
|
| 715 |
@supports (anchor-name: --ctl-compact-label) { |
| 716 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-arrow, |
| 717 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-left .ctl-arrow, |
| 718 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-right .ctl-arrow, |
| 719 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-left .ctl-arrow, |
| 720 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-right .ctl-arrow, |
| 721 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-left .ctl-arrow, |
| 722 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-right .ctl-arrow { |
| 723 |
position-anchor: --ctl-compact-label; |
| 724 |
top: anchor(center) !important; |
| 725 |
translate: 0 -50%; |
| 726 |
transform: rotate(45deg) !important; |
| 727 |
} |
| 728 |
|
| 729 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-icondot, |
| 730 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-icon { |
| 731 |
position-anchor: --ctl-compact-label; |
| 732 |
top: anchor(center) !important; |
| 733 |
transform: translateY(-50%) !important; |
| 734 |
} |
| 735 |
} |
| 736 |
|
| 737 |
} |
| 738 |
|
| 739 |
|
| 740 |
/* -------------------------------------------------------------------------- |
| 741 |
6. Centre the marker, connector and labels on the title bar |
| 742 |
|
| 743 |
Free's legacy sheet anchors each of these separately off --ctw-ibx-position |
| 744 |
(a fixed 0 on vertical - it is a Pro-only setting, so nothing is lost by |
| 745 |
dropping it here), which leaves them sitting slightly high against the new |
| 746 |
card. Pro measures the title band instead and centres all four on it, so |
| 747 |
the icon, the dot, the connector and the date label line up with the middle |
| 748 |
of the coloured band. Same formulas as Pro, with one substitution: |
| 749 |
|
| 750 |
--ctw-arw-align-offset dropped - Pro's arrow-size setting, absent here |
| 751 |
(span itself is --ctw-arw-span from the pointer block: arw-size/1.5) |
| 752 |
|
| 753 |
--ctw-cbx-title-line-height MUST be a length: Free's legacy default is |
| 754 |
`normal`, and `calc()` with `normal` in it is invalid at computed-value |
| 755 |
time, which would drop every `top` below to auto. |
| 756 |
|
| 757 |
Skips compact, which keeps its own marker positions, exactly as Pro does. |
| 758 |
-------------------------------------------------------------------------- */ |
| 759 |
|
| 760 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) { |
| 761 |
--ctw-title-pad-y: 19px; |
| 762 |
--ctw-title-bar-height: calc((var(--ctw-title-pad-y, 19px) * 2.5) + var(--ctw-cbx-title-line-height, 30px)); |
| 763 |
--ctw-title-bar-center: calc(var(--ctw-title-bar-height) / 2); |
| 764 |
} |
| 765 |
|
| 766 |
/* -------------------------------------------------------------------------- |
| 767 |
6a. Hide title — Pro parity |
| 768 |
|
| 769 |
show-title=hide drops .ctl-title. Pro only zeroes the card's top pad so |
| 770 |
media / copy start on the card edge; markers stay on --ctw-title-bar-center |
| 771 |
(the half-fill wedge from the pointer block above still reads as a clean |
| 772 |
triangle against media). Compact keeps its own seats. |
| 773 |
-------------------------------------------------------------------------- */ |
| 774 |
|
| 775 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-content:not(:has(> .ctl-title)) { |
| 776 |
padding-top: 0; |
| 777 |
} |
| 778 |
|
| 779 |
@media only screen and (min-width: 768px) { |
| 780 |
|
| 781 |
/* The icon box is ibx-size - 5, not ibx-size, so halve the box rather than |
| 782 |
ibx-size or its centre parks 2.5px above the dot and the connector. */ |
| 783 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-icon { |
| 784 |
top: calc(var(--ctw-title-bar-center) - ((var(--ctw-ibx-size) - 5px) / 2)) !important; |
| 785 |
margin-top: 0 !important; |
| 786 |
} |
| 787 |
|
| 788 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-icondot { |
| 789 |
top: calc(var(--ctw-title-bar-center) - (var(--ctw-ibx-size) / 4)) !important; |
| 790 |
margin-top: 0 !important; |
| 791 |
} |
| 792 |
|
| 793 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-arrow { |
| 794 |
top: calc(var(--ctw-title-bar-center) - (var(--ctw-arw-span) / 2)) !important; |
| 795 |
} |
| 796 |
|
| 797 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-labels { |
| 798 |
top: calc(var(--ctw-title-bar-center) - (var(--ctw-lbl-big-size) / 2)) !important; |
| 799 |
} |
| 800 |
|
| 801 |
} |
| 802 |
|
| 803 |
|
| 804 |
/* -------------------------------------------------------------------------- |
| 805 |
6b. Editor preview - the same centring, without the width guard |
| 806 |
|
| 807 |
Section 6 applies from 768px up, which is correct on the front end: below |
| 808 |
that Free switches to its own single-column marker anchors. The block |
| 809 |
editor's canvas is its own viewport though, and with the settings sidebar |
| 810 |
open it is routinely narrower than 768px while still previewing the desktop |
| 811 |
layout - so the guard left the markers on the mobile anchors and the preview |
| 812 |
disagreed with the published page. Anchor on the editor rather than on width. |
| 813 |
|
| 814 |
Two selectors because only one of them is guaranteed: .ctl-editor-preview is |
| 815 |
added by the shortcode on the SSR pass (ctl_config_layouts), while |
| 816 |
.editor-styles-wrapper is the canvas the block editor always wraps its |
| 817 |
content in. Neither exists on a published page, so the front end is |
| 818 |
untouched either way. |
| 819 |
|
| 820 |
IMPORTANT: still gated at 768px. Ungated, these !important tops outrank |
| 821 |
section 7's mobile seat (labels in flow + --ctw-mobile-labels-offset) in |
| 822 |
the editor device preview, so the arrow stayed on the desktop title-bar |
| 823 |
line while the stack had already moved — broken tip next to the rail. |
| 824 |
Above 768 the canvas is wide enough for the desktop geometry these restore. |
| 825 |
-------------------------------------------------------------------------- */ |
| 826 |
|
| 827 |
@media only screen and (min-width: 768px) { |
| 828 |
|
| 829 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-icon, |
| 830 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-icon { |
| 831 |
top: calc(var(--ctw-title-bar-center) - ((var(--ctw-ibx-size) - 5px) / 2)) !important; |
| 832 |
margin-top: 0 !important; |
| 833 |
} |
| 834 |
|
| 835 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-icondot, |
| 836 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-icondot { |
| 837 |
top: calc(var(--ctw-title-bar-center) - (var(--ctw-ibx-size) / 4)) !important; |
| 838 |
margin-top: 0 !important; |
| 839 |
} |
| 840 |
|
| 841 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-arrow, |
| 842 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-arrow { |
| 843 |
top: calc(var(--ctw-title-bar-center) - (var(--ctw-arw-span) / 2)) !important; |
| 844 |
} |
| 845 |
|
| 846 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-labels, |
| 847 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-labels { |
| 848 |
top: calc(var(--ctw-title-bar-center) - (var(--ctw-lbl-big-size) / 2)) !important; |
| 849 |
} |
| 850 |
|
| 851 |
|
| 852 |
/* -------------------------------------------------------------------------- |
| 853 |
6c. Editor preview - outrank the block stylesheet |
| 854 |
|
| 855 |
includes/shortcode-blocks/src/style.scss pins the marker, the label and the |
| 856 |
connector to Free's LEGACY desktop positions with !important, because the |
| 857 |
editor canvas is frequently under 768px and Free's mobile CSS would other- |
| 858 |
wise take over a preview that is meant to show the desktop layout. It was |
| 859 |
written before this sheet existed, so what it restores is the pre-refresh |
| 860 |
geometry: markers anchored off --ctw-ibx-position instead of centred on the |
| 861 |
title bar, and horizontal offsets with no --ctw-story-line-gap term at all. |
| 862 |
|
| 863 |
Its selectors run to 0,7,0 and 0,8,0, so section 6b's !important lost to it |
| 864 |
on specificity and the preview kept the old placement while the front end |
| 865 |
moved. These restate the refreshed geometry one class heavier than the |
| 866 |
heaviest of those rules. Note the marker rules must carry the side class: |
| 867 |
the block sheet writes its icon and dot `top` per side (0,8,0), so a generic |
| 868 |
`.ctl-story .ctl-icon` here ties it and loses on source order - the block |
| 869 |
assets are enqueued after this sheet. Its arrow and label `top` are generic |
| 870 |
(0,7,0), so those two are already outranked. |
| 871 |
|
| 872 |
The real fix is in that stylesheet - it now carries |
| 873 |
a :not(.ctl-new-design) guard - but that only takes effect once the block |
| 874 |
assets are rebuilt, and this sheet ships on its own. |
| 875 |
|
| 876 |
Same 768 gate as 6b: below that the mobile stack must own the markers. |
| 877 |
-------------------------------------------------------------------------- */ |
| 878 |
|
| 879 |
/* The card width has to come first: every marker offset below is measured from |
| 880 |
the story's inner edge, and the block sheet pins that edge with |
| 881 |
`width: calc(50% - var(--ctw-ibx-size))` - the pre-refresh width, with no |
| 882 |
--ctw-story-line-gap term. That leaves the card a gap's width too wide, its |
| 883 |
inner edge a gap closer to the rail, and every marker measured off it lands |
| 884 |
a gap out: the right-hand icon sits --ctw-story-line-gap left of the rail and |
| 885 |
the left-hand dot the same distance right of it. Restoring the width puts the |
| 886 |
edge back where the offsets expect it, and the markers centre on their own. |
| 887 |
Per side as well as bare, because the block sheet names both. */ |
| 888 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story, |
| 889 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story.ctl-story-left, |
| 890 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story.ctl-story-right, |
| 891 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story, |
| 892 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story.ctl-story-left, |
| 893 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story.ctl-story-right { |
| 894 |
width: calc(50% - var(--ctw-ibx-size) - var(--ctw-story-line-gap, 0px)) !important; |
| 895 |
} |
| 896 |
|
| 897 |
/* Per side, not bare. The block sheet's arrow rule carries TWO selectors: |
| 898 |
`.ctl-story .ctl-arrow` at 0,7,0, which a bare rule here outranks, and |
| 899 |
`.ctl-story.ctl-story-left .ctl-arrow` at 0,8,0, which it only ties - and |
| 900 |
loses to on source order. That is why right-hand arrows followed the title |
| 901 |
bar while left-hand ones stayed on the legacy anchor. Naming the side on |
| 902 |
both puts them at 0,9,0 and clear of either. */ |
| 903 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story.ctl-story-right .ctl-arrow, |
| 904 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story.ctl-story-left .ctl-arrow, |
| 905 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story.ctl-story-right .ctl-arrow, |
| 906 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story.ctl-story-left .ctl-arrow { |
| 907 |
top: calc(var(--ctw-title-bar-center) - (var(--ctw-arw-span) / 2)) !important; |
| 908 |
} |
| 909 |
|
| 910 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story .ctl-labels, |
| 911 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story .ctl-labels { |
| 912 |
top: calc(var(--ctw-title-bar-center) - (var(--ctw-lbl-big-size) / 2)) !important; |
| 913 |
} |
| 914 |
|
| 915 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story.ctl-story-right .ctl-icon, |
| 916 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story.ctl-story-right .ctl-icon { |
| 917 |
top: calc(var(--ctw-title-bar-center) - ((var(--ctw-ibx-size) - 5px) / 2)) !important; |
| 918 |
margin-top: 0 !important; |
| 919 |
left: calc(0px - var(--ctw-ibx-size) - (var(--ctw-ibx-size) - 5px) / 2 - var(--ctw-story-line-gap, 0px)) !important; |
| 920 |
right: auto !important; |
| 921 |
} |
| 922 |
|
| 923 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story.ctl-story-left .ctl-icon, |
| 924 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story.ctl-story-left .ctl-icon { |
| 925 |
top: calc(var(--ctw-title-bar-center) - ((var(--ctw-ibx-size) - 5px) / 2)) !important; |
| 926 |
margin-top: 0 !important; |
| 927 |
left: auto !important; |
| 928 |
right: calc(0px - var(--ctw-ibx-size) - (var(--ctw-ibx-size) - 5px) / 2 - var(--ctw-story-line-gap, 0px)) !important; |
| 929 |
} |
| 930 |
|
| 931 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story.ctl-story-right .ctl-icondot, |
| 932 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story.ctl-story-right .ctl-icondot { |
| 933 |
top: calc(var(--ctw-title-bar-center) - (var(--ctw-ibx-size) / 4)) !important; |
| 934 |
margin-top: 0 !important; |
| 935 |
left: calc(0px - var(--ctw-ibx-size) - var(--ctw-ibx-size) / 4 - var(--ctw-line-width) / 6 - var(--ctw-story-line-gap, 0px)) !important; |
| 936 |
right: auto !important; |
| 937 |
} |
| 938 |
|
| 939 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story.ctl-story-left .ctl-icondot, |
| 940 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story.ctl-story-left .ctl-icondot { |
| 941 |
top: calc(var(--ctw-title-bar-center) - (var(--ctw-ibx-size) / 4)) !important; |
| 942 |
margin-top: 0 !important; |
| 943 |
left: auto !important; |
| 944 |
right: calc(0px - var(--ctw-ibx-size) - var(--ctw-ibx-size) / 4 + var(--ctw-line-width) / 4 - var(--ctw-story-line-gap, 0px)) !important; |
| 945 |
} |
| 946 |
|
| 947 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story.ctl-story-right .ctl-labels, |
| 948 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story.ctl-story-right .ctl-labels { |
| 949 |
right: calc(100% + var(--ctw-ibx-size) * 2 + (var(--ctw-story-line-gap, 0px) * 2)) !important; |
| 950 |
left: auto !important; |
| 951 |
} |
| 952 |
|
| 953 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story.ctl-story-left .ctl-labels, |
| 954 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-both-sided:not(.ctl-compact-wrapper) .ctl-story.ctl-story-left .ctl-labels { |
| 955 |
left: calc(100% + var(--ctw-ibx-size) * 2 + (var(--ctw-story-line-gap, 0px) * 2)) !important; |
| 956 |
right: auto !important; |
| 957 |
} |
| 958 |
|
| 959 |
} /* end min-width:768 editor preview 6b/6c */ |
| 960 |
|
| 961 |
|
| 962 |
/* -------------------------------------------------------------------------- |
| 963 |
7. Small screens |
| 964 |
|
| 965 |
Free's mobile geometry is its own self-consistent system (several |
| 966 |
Free-only rules, some !important) and does not line up with Pro's mobile |
| 967 |
constants for every offset, so most positional numbers stay on Free's |
| 968 |
values. Pro's one-side mobile padding-left is left out too: Free |
| 969 |
deliberately zeroes that gutter below 768px. |
| 970 |
|
| 971 |
Width and label flow need an explicit reset (section 3's gap-aware 50% |
| 972 |
width and absolute label seats outrank Free's legacy mobile rules). |
| 973 |
|
| 974 |
Arrow / icon / dot need Pro's mobile title-bar seat: once labels are in |
| 975 |
normal flow above the card, Free's legacy `labels~.ctl-arrow` top formula |
| 976 |
parks the diamond on a fixed offset that no longer matches the coloured |
| 977 |
title band, and left-story `right` is never cleared so the wedge can sit |
| 978 |
in the gutter instead of on the card edge. Same recipe as Pro's |
| 979 |
max-width:767 block - labels offset + title-bar centre, diamond half |
| 980 |
outside the card, z-index above the title fill. |
| 981 |
-------------------------------------------------------------------------- */ |
| 982 |
|
| 983 |
@media only screen and (max-width: 767px) { |
| 984 |
|
| 985 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-one-sided, .ctl-compact-wrapper) .ctl-story { |
| 986 |
width: calc(100% - var(--ctw-ibx-size) * 1.5); |
| 987 |
} |
| 988 |
|
| 989 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-story .ctl-labels, |
| 990 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-story.ctl-story-dot-icon .ctl-labels, |
| 991 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-story.ctl-story-left .ctl-labels { |
| 992 |
position: relative; |
| 993 |
left: 0; |
| 994 |
right: auto; |
| 995 |
top: 0; |
| 996 |
width: 100%; |
| 997 |
text-align: left !important; |
| 998 |
margin: 20px 5px 20px 0px; |
| 999 |
} |
| 1000 |
|
| 1001 |
/* Labels sit in flow above the card (20 + date line + 20). Title-bar |
| 1002 |
tokens already exist from section 6; restate them here so the mobile |
| 1003 |
block does not depend on source order against other sheets. */ |
| 1004 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) { |
| 1005 |
--ctw-title-pad-y: 19px; |
| 1006 |
--ctw-title-bar-height: calc((var(--ctw-title-pad-y, 19px) * 2.5) + var(--ctw-cbx-title-line-height, 30px)); |
| 1007 |
--ctw-title-bar-center: calc(var(--ctw-title-bar-height) / 2); |
| 1008 |
/* Margin-top on in-flow labels collapses against the story, so only |
| 1009 |
the date row height + bottom margin separate the date from the title |
| 1010 |
band. Prefer the rendered date font size over --ctw-lbl-big-size |
| 1011 |
(still 20px here while settings often paint a larger date). */ |
| 1012 |
--ctw-mobile-labels-offset: calc(var(--ctw-cbx-date-font-size, var(--ctw-lbl-big-size, 20px)) + 20px); |
| 1013 |
} |
| 1014 |
|
| 1015 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-story:not(:has(.ctl-labels)) { |
| 1016 |
--ctw-mobile-labels-offset: 0px; |
| 1017 |
} |
| 1018 |
|
| 1019 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-story :is(.ctl-icon, .ctl-icondot, .ctl-arrow) { |
| 1020 |
margin-top: 0 !important; |
| 1021 |
} |
| 1022 |
|
| 1023 |
/* Icon box is ibx-size - 5; top at the centre line, then translate back |
| 1024 |
by half so the box (not its top edge) sits on the title-bar centre. */ |
| 1025 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-story .ctl-icon { |
| 1026 |
top: calc(var(--ctw-mobile-labels-offset) + var(--ctw-title-bar-center)) !important; |
| 1027 |
transform: translateY(-50%) !important; |
| 1028 |
} |
| 1029 |
|
| 1030 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-story .ctl-icondot { |
| 1031 |
top: calc(var(--ctw-mobile-labels-offset) + var(--ctw-title-bar-center)) !important; |
| 1032 |
transform: translateY(-50%) !important; |
| 1033 |
} |
| 1034 |
|
| 1035 |
/* Mobile pointer: Pro half-fill wedge, same as desktop. Only the vertical |
| 1036 |
seat adds --ctw-mobile-labels-offset because the date stacks above the |
| 1037 |
card under 768px. */ |
| 1038 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-story .ctl-arrow, |
| 1039 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-story.ctl-story-left .ctl-arrow { |
| 1040 |
top: calc(var(--ctw-mobile-labels-offset) + var(--ctw-title-bar-center) - (var(--ctw-arw-span) / 2)) !important; |
| 1041 |
left: calc(var(--ctw-cbx-edge-inset, 0px) - var(--ctw-arw-span) / 2 + var(--ctw-cbx-bd-left-width, 0px) / 3) !important; |
| 1042 |
right: auto !important; |
| 1043 |
width: var(--ctw-arw-span) !important; |
| 1044 |
height: var(--ctw-arw-span) !important; |
| 1045 |
z-index: 4 !important; |
| 1046 |
background: linear-gradient(to top right, var(--ctw-arw-bg) 52%, transparent 48%) !important; |
| 1047 |
border-style: var(--ctw-cbx-bd-style, solid) !important; |
| 1048 |
border-color: var(--ctw-cbx-bd-color, var(--ctw-arw-bd-color)) !important; |
| 1049 |
/* Every story is left-aligned under 768px, so both sides point left. */ |
| 1050 |
border-width: 0 0 var(--ctw-cbx-bd-left-width, 1px) var(--ctw-cbx-bd-left-width, 1px) !important; |
| 1051 |
box-shadow: none !important; |
| 1052 |
transform: rotate(45deg) !important; |
| 1053 |
clip-path: none !important; |
| 1054 |
-webkit-clip-path: none !important; |
| 1055 |
} |
| 1056 |
|
| 1057 |
/* Compact mobile: seat the diamond on the date band (not the legacy |
| 1058 |
~8–14px top that parks it inside the card's 20px top-left radius — |
| 1059 |
that is the white fringe and the "top pointer" look). Square the |
| 1060 |
connector-side radii so the tuck stays green-on-green. */ |
| 1061 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper { |
| 1062 |
/* Legacy's `ibx*1.5` gutter. This used to carry an extra +14px to |
| 1063 |
keep the diamond tip off the line marker, but the tip is seated at |
| 1064 |
`pad - arw/2`, so it moves with the gutter and the padding was |
| 1065 |
buying far more room than the marker needs: measured at ibx 30 the |
| 1066 |
tip cleared the icon by 32px, which just read as the card being |
| 1067 |
pushed away from the rail. Without the term the clearance is ~18px, |
| 1068 |
still comfortably clear. */ |
| 1069 |
--ctw-compact-story-pad-left: calc(var(--ctw-ibx-size) * 1.5); |
| 1070 |
} |
| 1071 |
|
| 1072 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-left, |
| 1073 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-right, |
| 1074 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story:nth-child(2) { |
| 1075 |
padding-left: var(--ctw-compact-story-pad-left) !important; |
| 1076 |
} |
| 1077 |
|
| 1078 |
/* Start/end rings live on the wrapper; the line lives inside |
| 1079 |
.ctl-timeline (after the wrapper's 10px side padding). Legacy |
| 1080 |
`4% - line + 1.4*line` ignored that and sat the ring on the line's |
| 1081 |
left edge. Add the padding, subtract the 4% of the 20px side padding |
| 1082 |
(line's 4% is of the timeline width), then centre the 4*line-wide |
| 1083 |
circle on the line. */ |
| 1084 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-start, |
| 1085 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-end { |
| 1086 |
left: calc(10px + 4% - 0.8px - var(--ctw-line-width) * 2.5) !important; |
| 1087 |
} |
| 1088 |
|
| 1089 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story { |
| 1090 |
anchor-scope: --ctl-compact-label; |
| 1091 |
} |
| 1092 |
|
| 1093 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-labels { |
| 1094 |
anchor-name: --ctl-compact-label; |
| 1095 |
} |
| 1096 |
|
| 1097 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-arrow, |
| 1098 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-left .ctl-arrow, |
| 1099 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-right .ctl-arrow, |
| 1100 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-left .ctl-arrow, |
| 1101 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-right .ctl-arrow, |
| 1102 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-left .ctl-arrow, |
| 1103 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-right .ctl-arrow { |
| 1104 |
/* Fallback when anchor positioning is unavailable. */ |
| 1105 |
top: calc(var(--ctw-compact-label-bar-center) - var(--ctw-compact-arw-size) / 2) !important; |
| 1106 |
/* Centre the pre-rotate square ON the padded content edge so half the |
| 1107 |
diamond sticks out and its transverse vertices land on the card's |
| 1108 |
border line. No tuck - see the desktop compact block above. */ |
| 1109 |
left: calc(var(--ctw-compact-story-pad-left) - var(--ctw-compact-arw-size) / 2) !important; |
| 1110 |
right: auto !important; |
| 1111 |
width: var(--ctw-compact-arw-size) !important; |
| 1112 |
height: var(--ctw-compact-arw-size) !important; |
| 1113 |
z-index: 5 !important; |
| 1114 |
background: var(--ctw-arw-bg) !important; |
| 1115 |
background-image: none !important; |
| 1116 |
border-style: var(--ctw-cbx-bd-style, solid) !important; |
| 1117 |
border-color: var(--ctw-cbx-bd-color, var(--ctw-arw-bd-color)) !important; |
| 1118 |
/* Every story is left-aligned under 768px, so both sides point left. */ |
| 1119 |
border-width: 0 0 var(--ctw-cbx-bd-left-width, 1px) var(--ctw-cbx-bd-left-width, 1px) !important; |
| 1120 |
box-shadow: none !important; |
| 1121 |
transform: rotate(45deg) !important; |
| 1122 |
clip-path: none !important; |
| 1123 |
-webkit-clip-path: none !important; |
| 1124 |
margin-top: 0 !important; |
| 1125 |
} |
| 1126 |
|
| 1127 |
|
| 1128 |
@supports (anchor-name: --ctl-compact-label) { |
| 1129 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-arrow, |
| 1130 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-left .ctl-arrow, |
| 1131 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-right .ctl-arrow, |
| 1132 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-left .ctl-arrow, |
| 1133 |
.ctl-new-design.ctl-wrapper.ctl-editor-preview .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-right .ctl-arrow, |
| 1134 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-left .ctl-arrow, |
| 1135 |
.editor-styles-wrapper .ctl-new-design.ctl-wrapper .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story.ctl-story-right .ctl-arrow { |
| 1136 |
position-anchor: --ctl-compact-label; |
| 1137 |
top: anchor(center) !important; |
| 1138 |
/* Individual translate runs before transform, so the -50% is |
| 1139 |
vertical in screen space; then rotate. A single |
| 1140 |
`translateY(-50%) rotate(45deg)` list rotates FIRST and the |
| 1141 |
nudge goes diagonal — that parked the tip at the header top. */ |
| 1142 |
translate: 0 -50%; |
| 1143 |
transform: rotate(45deg) !important; |
| 1144 |
} |
| 1145 |
|
| 1146 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-icondot, |
| 1147 |
.ctl-new-design.ctl-wrapper .ctl-vertical-wrapper.ctl-compact-wrapper .ctl-story .ctl-icon { |
| 1148 |
position-anchor: --ctl-compact-label; |
| 1149 |
top: anchor(center) !important; |
| 1150 |
transform: translateY(-50%) !important; |
| 1151 |
} |
| 1152 |
} |
| 1153 |
|
| 1154 |
} |
| 1155 |
|
