/* Raindrop Notice Block — shared editor + front-end styles. Served as a file to
every visitor who meets a notice, and parsed by admin.php for the shipped
defaults; see the theming contract in raindrop-notice-block.php before adding
prose here. */
.raindrop-notice {
/* Default size for every piece of text in the callout: the title, the body
and the read-more link all inherit it. 0.875rem is 14px at a 16px root. */
--raindrop-notice-font-size: 0.875rem;
/*
* The title's line box, and the box the icon is centred against — both
* multiples of the text size rather than fixed lengths, so changing the size
* moves the whole callout together instead of leaving a 22px icon beside
* 20px text.
*
* 1.15 is a tight line for a single bold line of text, and at the default
* size it comes to 16.1px — the 16px this used to be, so nothing moves
* unless the size is actually changed.
*
* 1.4 makes the icon a little smaller than the 1.57 it used to be: at 22px
* against 14px text it sat well outside the title's line box and read as a
* badge stuck to the text rather than part of it.
*/
--raindrop-notice-title-line: calc( var( --raindrop-notice-font-size ) * 1.15 );
--raindrop-notice-icon-size: calc( var( --raindrop-notice-font-size ) * 1.4 );
/* The gap above the read-more line. A variable because the settings screen
has to restate it — see the note in admin.css — and the value should exist
in one place. */
--raindrop-notice-more-gap: 0.5rem;
/*
* The gap between two blocks of body text.
*
* One line of the callout's own text, so it scales with the size like every
* other length here. Measured against what a theme supplies: this site's
* `p { margin-bottom: 3rem }` put 48px between two paragraphs inside a box
* whose padding is 16px and whose text sits on a 21px line — three times the
* padding, and more than two lines of air between sentences that belong to
* the same thought. A paragraph margin is written for body copy running the
* full width of a page; a callout is not that.
*/
--raindrop-notice-body-gap: var( --raindrop-notice-font-size );
/*
* How much the bottom padding is pulled in so the box looks even top and
* bottom.
*
* A line box is taller than the letters inside it, and the leftover — the
* half-leading — sits half above the text and half below. The two ends of
* this callout do not get the same amount of it. The title's line is
* deliberately tight (1.15), tighter than the font's own content area, so at
* the top the half-leading is slightly *negative* and the text starts a
* hair sooner than the padding says. The last line is body text on the
* theme's line-height, which is looser, so at the bottom it adds space.
*
* Measured at the shipped size, with the padding an equal 16px at both ends:
* 15.55px of visible space above the title against 18px below the last line.
* The box read as bottom-heavy because it was.
*
* 0.175 of the text size is that 2.45px difference. A multiple of the size
* rather than a length, so it tracks the leading it exists to cancel.
*
* It assumes the last line is body text on a normal line-height, which is
* the case for every notice the editor can produce — the body always holds
* at least one paragraph, and the read-more line sits on the same leading.
*/
--raindrop-notice-bottom-trim: calc( var( --raindrop-notice-font-size ) * 0.175 );
/*
* How much thicker a link's strokes get under the pointer. A length, not a
* font weight, and the reason is below at the rule that uses it. Set it to 0
* to turn the effect off.
*/
--raindrop-notice-link-hover-thickness: 0.015em;
padding: 1rem 1.125rem calc( 1rem - var( --raindrop-notice-bottom-trim ) );
border: 0.0625rem solid var( --raindrop-notice-border );
border-radius: 0.5rem;
background: var( --raindrop-notice-bg );
color: var( --raindrop-notice-accent );
}
.raindrop-notice__row {
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
/*
* The icon is taller than the title's line box, so the row's flex-start
* alignment would hang it below the title's centre. Half the difference as a
* negative top margin lifts it back onto that centre; deriving it from the two
* variables means resizing either one keeps them centred.
*/
.raindrop-notice__icon {
flex-shrink: 0;
width: var( --raindrop-notice-icon-size );
height: var( --raindrop-notice-icon-size );
margin-top: calc( ( var( --raindrop-notice-title-line ) - var( --raindrop-notice-icon-size ) ) / 2 );
background: currentColor;
-webkit-mask: var( --raindrop-notice-icon ) no-repeat center / contain;
mask: var( --raindrop-notice-icon ) no-repeat center / contain;
}
.raindrop-notice__main {
flex: 1;
min-width: 0;
font-size: var( --raindrop-notice-font-size );
}
/* The title is a paragraph, so the theme's paragraph rules have to be
* neutralised: it should read at the callout's own text size with the callout's
* own spacing, not as body copy. Scoped through .raindrop-notice so this
* outranks a theme's `.entry-content p` — one class plus one class beats one
* class plus a type selector. Everything the title looks like is on the class
* rather than on the element, which is what let the element change from an h5
* to this without a visual change. */
.raindrop-notice .raindrop-notice__title {
font-weight: 700;
font-size: inherit;
line-height: var( --raindrop-notice-title-line );
margin: 0 0 0.25rem;
padding: 0;
}
/*
* Every child starts flush and the gap is put back only between siblings, which
* keeps the callout's padding exact at both ends and takes the theme's
* paragraph margin out of the middle.
*
* Two classes deep for the same reason the title rule is: a theme writing
* `.entry-content p` would otherwise outrank a single class. Here the rule it
* has to beat is a bare `p`, but the next theme's may not be.
*/
.raindrop-notice .raindrop-notice__body > * {
margin-top: 0;
margin-bottom: 0;
}
.raindrop-notice .raindrop-notice__body > * + * {
margin-top: var( --raindrop-notice-body-gap );
}
/*
* A list is the exception, and needs one class more to stay it: it continues
* the line that introduces it rather than answering it, so it sits directly
* under that line. A paragraph *after* a list is not an exception — that is a
* new thought and takes the gap like any other.
*/
.raindrop-notice .raindrop-notice__body > ul,
.raindrop-notice .raindrop-notice__body > ol {
margin-top: 0;
}
/*
* A list inside the callout should line up with the text above it rather than
* sit inset from it, and should read as a continuation of the line that
* introduces it rather than as a separate paragraph. Themes do the opposite on
* both counts — GeneratePress uses `ol, ul { margin: 0 0 1.5em 3em }`, which put
* the list 45px to the right of the body text and 22.5px below it.
*
* Paying for the marker with padding instead of the indent makes the bullets
* flush with the body text and hangs wrapped lines under it. 1.5em because a
* marker has to fit: a bullet, or a two-digit number and its dot. Applying it at
* every level keeps nesting legible in a narrow box, where the theme's own
* indent would run away.
*/
.raindrop-notice__body ul,
.raindrop-notice__body ol {
margin: 0;
padding-left: 1.5em;
}
/* Sits after the body inside __main, so the body's own last-child margin is
already zeroed and this margin is the only gap. */
.raindrop-notice__more {
margin: var( --raindrop-notice-more-gap ) 0 0;
}
.raindrop-notice__more-link {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.15em;
}
/*
* The icon after the link — an arrow by default, replaceable per tab from the
* settings screen. Drawn with mask + currentColor like the notice's own icon, so
* it takes the text colour and costs nothing in the markup: the modifier class
* on the link is the only hook the stylesheet needs.
*/
.raindrop-notice__more-link::after {
content: "";
display: inline-block;
width: 0.875rem;
height: 0.875rem;
margin-left: 0.25rem;
vertical-align: -0.1em;
background: currentColor;
-webkit-mask: var( --raindrop-notice-more-icon ) no-repeat center / contain;
mask: var( --raindrop-notice-more-icon ) no-repeat center / contain;
}
/* Two shapes: a link that leaves the tab should not look like one that stays. */
.raindrop-notice__more-link--same {
--raindrop-notice-more-icon: url( "data:image/svg+xml," );
}
.raindrop-notice__more-link--new {
--raindrop-notice-more-icon: url( "data:image/svg+xml," );
}
/*
* Every link in the callout — in a paragraph, in a list, and the read-more line
* — reads a little heavier under the pointer, and under keyboard focus, which is
* the same affordance arriving by a different route. There is nothing else to
* notice one by: measured on this theme, hovering a link inside a notice changed
* no property at all.
*
* Drawn as a shadow of the text on itself rather than as a font weight, because
* a weight change costs width and the rest of the sentence pays it. Measured at
* the shipped size on a 79px link: weight 500 makes it 81.38px and weight 600
* 83.52px, so the words after it jump two to four pixels sideways every time the
* pointer crosses a link. Offsetting the glyphs by a fraction of their own size
* in both directions thickens the strokes and leaves every metric alone — the
* same 79.23px hovered or not, measured.
*
* currentColor rather than a colour, so this stays true whatever the type's
* accent is and whatever a site retints it to.
*
* Three classes deep: a theme's own `.entry-content a:hover` is (0,2,1), and the
* read-more link's rule has to clear the block's own (0,2,0) as well.
*/
.raindrop-notice .raindrop-notice__body a:hover,
.raindrop-notice .raindrop-notice__body a:focus-visible,
.raindrop-notice .raindrop-notice__more-link:hover,
.raindrop-notice .raindrop-notice__more-link:focus-visible {
text-shadow:
var( --raindrop-notice-link-hover-thickness ) 0 0 currentColor,
calc( var( --raindrop-notice-link-hover-thickness ) * -1 ) 0 0 currentColor;
}
/* ---- Per-type palette + icon. Override these variables per site. ---- */
.raindrop-notice--info {
--raindrop-notice-bg: #eff6ff;
--raindrop-notice-border: #bfdbfe;
--raindrop-notice-accent: #1e40af;
--raindrop-notice-icon: url( "data:image/svg+xml," );
}
.raindrop-notice--tip {
--raindrop-notice-bg: #f0fdf4;
--raindrop-notice-border: #bbf7d0;
--raindrop-notice-accent: #166534;
--raindrop-notice-icon: url( "data:image/svg+xml," );
}
.raindrop-notice--caution {
--raindrop-notice-bg: #fffbeb;
--raindrop-notice-border: #fde68a;
--raindrop-notice-accent: #92400e;
--raindrop-notice-icon: url( "data:image/svg+xml," );
}
.raindrop-notice--warning {
--raindrop-notice-bg: #fef2f2;
--raindrop-notice-border: #fecaca;
--raindrop-notice-accent: #991b1b;
--raindrop-notice-icon: url( "data:image/svg+xml," );
}
.raindrop-notice--notice {
--raindrop-notice-bg: #faf5ff;
--raindrop-notice-border: #e9d5ff;
--raindrop-notice-accent: #6b21a8;
--raindrop-notice-icon: url( "data:image/svg+xml," );
}