| 1 |
// The single-doc meta row, and the screen-reader utility both of its occupants |
| 2 |
// need. Shared by ai-actions.scss and listen.scss. |
| 3 |
// |
| 4 |
// Partialled rather than left in ai-actions.scss because each of those is a |
| 5 |
// separately registered handle that the shortcode, block and Elementor widget |
| 6 |
// drop onto arbitrary pages — so either one has to be able to lay the row out on |
| 7 |
// its own. The rules are byte-identical in both bundles, which costs ~500 bytes |
| 8 |
// when both load (the usual case on a single doc) and is what keeps either one |
| 9 |
// from depending on the other being enqueued. |
| 10 |
// |
| 11 |
// Imports NOTHING from common/, for the reason ai-actions.scss spells out: |
| 12 |
// `common/_index.scss` pulls in ~1,200 lines of global layout rules, which is why |
| 13 |
// article-summary.css builds to 46 KB and author.css to 1 KB. |
| 14 |
// |
| 15 |
// Logical properties throughout: the repo ships no RTL build step, so physical |
| 16 |
// left/right would simply be wrong on RTL sites with nothing to flip them. |
| 17 |
|
| 18 |
// Screen-reader-only utility. `.screen-reader-text` is NOT defined by this |
| 19 |
// plugin — it comes from core's wp-block-library stylesheet or the theme, both of |
| 20 |
// which a site can legitimately dequeue. Relying on it would render hidden hint |
| 21 |
// text as visible copy next to the doc title. |
| 22 |
.betterdocs-sr-only { |
| 23 |
position: absolute !important; |
| 24 |
width: 1px !important; |
| 25 |
height: 1px !important; |
| 26 |
padding: 0 !important; |
| 27 |
margin: -1px !important; |
| 28 |
overflow: hidden !important; |
| 29 |
clip: rect(0, 0, 0, 0) !important; |
| 30 |
clip-path: inset(50%) !important; |
| 31 |
white-space: nowrap !important; |
| 32 |
border: 0 !important; |
| 33 |
} |
| 34 |
|
| 35 |
// Reading time and Listen on the leading edge, AI Actions on the trailing edge. |
| 36 |
// Rendered by views/templates/parts/doc-meta.php, which omits the wrapper |
| 37 |
// entirely when neither side has anything, so there is no empty-row case to style |
| 38 |
// around. |
| 39 |
.betterdocs-doc-meta { |
| 40 |
display: flex; |
| 41 |
align-items: center; |
| 42 |
justify-content: space-between; |
| 43 |
flex-wrap: wrap; |
| 44 |
gap: 12px 16px; |
| 45 |
margin-bottom: 24px; |
| 46 |
|
| 47 |
@media only screen and (max-width: 1280px) { |
| 48 |
margin-bottom: 18px; |
| 49 |
} |
| 50 |
|
| 51 |
&-start, |
| 52 |
&-end { |
| 53 |
display: flex; |
| 54 |
align-items: center; |
| 55 |
gap: 8px; |
| 56 |
min-width: 0; |
| 57 |
} |
| 58 |
|
| 59 |
// Holds the trailing edge right even when the leading edge is absent. |
| 60 |
&-end { |
| 61 |
margin-inline-start: auto; |
| 62 |
} |
| 63 |
|
| 64 |
// Standing alone, each of these owns the gap to the content below it. Inside |
| 65 |
// the row the row owns it, so their block margins have to go — a leftover |
| 66 |
// bottom margin inflates the flex line and knocks the taller item off centre. |
| 67 |
// |
| 68 |
// `!important` is load-bearing here, not laziness. The Customizer emits |
| 69 |
// `.betterdocs-content-area .betterdocs.reading-time { margin-bottom: 24px }` |
| 70 |
// (0,3,0), which outranks any selector this partial can write without |
| 71 |
// hard-coding the same ancestor chain — and that ancestor differs by layout. |
| 72 |
// That rule is exactly what pushed the button 12px below the reading-time |
| 73 |
// pill (pill centre 351, button centre 363, half of the pill's 24px margin). |
| 74 |
&-start > *, |
| 75 |
&-end > * { |
| 76 |
margin-block: 0 !important; |
| 77 |
} |
| 78 |
} |
| 79 |
|
| 80 |
@media only screen and (max-width: 767px) { |
| 81 |
// The row already wraps; once it does, keep the trailing edge on the leading |
| 82 |
// edge so a dropdown opens over the content rather than off the far edge. |
| 83 |
.betterdocs-doc-meta-end { |
| 84 |
margin-inline-start: 0; |
| 85 |
} |
| 86 |
} |
| 87 |
|
