.readmarker-display {
--readmarker-color: #334155;
--readmarker-background: #f1f5f9;
--readmarker-border: #cbd5e1;
--readmarker-radius: 0.65rem;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4em 0.6em;
max-width: 100%;
margin-block: 1.25rem;
color: inherit;
font-family: inherit;
font-size: 0.875em;
font-weight: 400;
line-height: 1.6;
overflow-wrap: anywhere;
}
.readmarker-field { display: inline-flex; align-items: center; gap: 0.4em; min-width: 0; }
.readmarker-icon { flex: 0 0 auto; width: 1.1em; height: 1.1em; }
.readmarker-display--badge {
width: fit-content;
padding: 0.35em 0.85em;
border: 1px solid var(--readmarker-border);
border-radius: 999px;
color: var(--readmarker-color);
background: var(--readmarker-background);
}
.readmarker-display--meta { font-size: 0.8125em; letter-spacing: 0.01em; }
.readmarker-display--card {
width: fit-content;
align-items: flex-start;
flex-direction: column;
gap: 0.3em;
padding: 0.85em 1.1em;
border: 1px solid var(--readmarker-border);
border-radius: var(--readmarker-radius);
color: var(--readmarker-color);
background: var(--readmarker-background);
}
.readmarker-display--card .readmarker-separator { display: none; }
.readmarker-display--card .readmarker-time { font-weight: 600; }
@media (forced-colors: active) {
.readmarker-display { color: CanvasText; }
.readmarker-display--badge, .readmarker-display--card { background: Canvas; border-color: CanvasText; }
}.readmarker-reader-controls {
position: relative;
margin-block: .75rem;
max-inline-size: 100%;
font: 14px/1.5 system-ui, sans-serif;
color: var(--readmarker-color, #334155);
}
.readmarker-reader-controls[hidden], .readmarker-reader-controls [hidden] { display: none; }
.readmarker-reader-controls button {
box-sizing: border-box;
max-inline-size: 100%;
font: inherit;
font-weight: 500;
line-height: 1.5;
text-transform: none;
letter-spacing: normal;
color: inherit;
background: transparent;
border: 1px solid var(--readmarker-border, #cbd5e1);
border-radius: 6px;
padding: .5rem .75rem;
cursor: pointer;
}
.readmarker-reader-controls button:hover:not(:disabled) {
background: var(--readmarker-background, #f1f5f9);
border-color: currentColor;
}
.readmarker-reader-controls button:active:not(:disabled) {
background: var(--readmarker-border, #cbd5e1);
}
.readmarker-reader-controls button:disabled { opacity: .6; cursor: default; }
.readmarker-reader-controls button:focus-visible { outline: 2px solid #2271b1; outline-offset: 3px; }
.readmarker-reader-controls [data-reader-toggle] {
padding: .5rem 1rem;
border-radius: 8px;
background: var(--readmarker-background, #f1f5f9);
white-space: normal;
overflow-wrap: anywhere;
text-align: start;
}
.readmarker-reader-controls [data-reader-toggle][aria-expanded="true"] { border-color: currentColor; }
.readmarker-reader-controls .readmarker-reader-controls-label { font-weight: 600; }
.readmarker-reader-controls .readmarker-reader-controls-summary { font-size: .9em; font-weight: 400; }
.readmarker-reader-controls [data-reader-panel] {
box-sizing: border-box;
inline-size: 26rem;
max-inline-size: 100%;
margin-block-start: .5rem;
padding: 1.25rem;
color: var(--readmarker-color, #334155);
background: var(--readmarker-background, #f1f5f9);
border: 1px solid var(--readmarker-border, #cbd5e1);
border-radius: var(--readmarker-radius, .65rem);
box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}
.readmarker-reader-controls [data-reader-panel] > div {
display: grid;
grid-template-columns: minmax(0, 1fr) 2.75rem 5ch 2.75rem;
align-items: center;
gap: .5rem;
margin-block-end: 1rem;
}
.readmarker-reader-controls [data-reader-panel] > div > span:first-child {
margin-inline-end: .5rem;
overflow-wrap: anywhere;
}
.readmarker-reader-controls [data-reader-step] {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 2.75rem;
min-block-size: 2.75rem;
padding: .25rem;
font-size: 1.125rem;
}
.readmarker-reader-controls [data-reader-value] {
text-align: center;
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.readmarker-reader-controls [data-reader-reset] {
margin-block-start: .25rem;
white-space: normal;
overflow-wrap: anywhere;
}
.readmarker-reader-article { display: flow-root; }
.readmarker-reader-article.readmarker-reader-width-adjusted { max-width: 100%; margin-inline: auto; } @media (width < 782px) {
.readmarker-reader-controls[data-reader-visibility="desktop"] { display: none; }
}
@media (min-width: 782px) {
.readmarker-reader-controls[data-reader-visibility="mobile"] { display: none; }
}
@media (forced-colors: active) {
.readmarker-reader-controls { color: CanvasText; }
.readmarker-reader-controls [data-reader-panel] { color: CanvasText; background: Canvas; border-color: CanvasText; box-shadow: none; }
.readmarker-reader-controls button,
.readmarker-reader-controls [data-reader-toggle] { color: ButtonText; background: ButtonFace; border-color: ButtonText; }
.readmarker-reader-controls button:hover:not(:disabled),
.readmarker-reader-controls button:active:not(:disabled) { color: HighlightText; background: Highlight; border-color: Highlight; }
.readmarker-reader-controls button:disabled { color: GrayText; border-color: GrayText; opacity: 1; }
.readmarker-reader-controls button:focus-visible { outline-color: Highlight; }
}.readmarker-article-content { display: flow-root; }
.readmarker-progress {
position: fixed;
top: var(--readmarker-progress-offset, 0px);
left: 0;
right: 0;
height: var(--readmarker-progress-height, 3px); z-index: 1000;
pointer-events: none;
contain: layout paint;
}
.readmarker-progress[hidden] { display: none; }
.readmarker-progress-fill {
width: 100%;
height: 100%;
background: var(--readmarker-progress-color, #2563eb);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--readmarker-progress-transition, 80ms linear);
}
.readmarker-progress-indicator {
--readmarker-progress-size: 56px;
--readmarker-progress-font-size: 13px;
position: fixed;
right: max(12px, env(safe-area-inset-right, 0px));
bottom: max(12px, env(safe-area-inset-bottom, 0px));
z-index: 1000;
pointer-events: none;
box-sizing: border-box;
display: grid;
place-items: center;
width: var(--readmarker-progress-size);
max-width: calc(100vw - 24px);
height: var(--readmarker-progress-size);
border-radius: 50%;
background: #fff;
color: #1e293b;
font: 600 var(--readmarker-progress-font-size)/1.2 system-ui, sans-serif;
font-variant-numeric: tabular-nums;
}
.readmarker-progress-indicator[hidden] { display: none; }
.readmarker-progress-indicator--percentage {
height: auto;
min-height: 32px;
border: 2px solid var(--readmarker-progress-color, #2563eb);
border-radius: 8px;
padding: 6px 4px;
}
.readmarker-progress-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.readmarker-progress-track, .readmarker-progress-stroke { fill: none; stroke-width: 4; }
.readmarker-progress-track { stroke: #e2e8f0; }
.readmarker-progress-stroke { stroke: var(--readmarker-progress-color, #2563eb); transition: stroke-dashoffset var(--readmarker-progress-transition, 80ms linear); }
.readmarker-progress-value { position: relative; }
.readmarker-progress-indicator--remaining {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 0.25em;
width: max-content;
max-width: min(32rem, calc(100vw - 24px));
height: auto;
padding: 9px 12px;
border: 1px solid var(--readmarker-progress-color, #2563eb);
border-radius: 8px;
line-height: 1.5;
overflow-wrap: anywhere;
}
.readmarker-duration-prefix, .readmarker-duration-value { min-width: 0; }
.readmarker-progress-indicator--remaining [hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
.readmarker-progress-fill, .readmarker-progress-stroke { transition: none; }
}
@media (forced-colors: active) {
.readmarker-progress-fill { background: Highlight; forced-color-adjust: none; }
.readmarker-progress-indicator { background: Canvas; color: CanvasText; border-color: Highlight; }
.readmarker-progress-track { stroke: GrayText; }
.readmarker-progress-stroke { stroke: Highlight; }
} .readmarker-floating-widget {
display: grid;
place-items: stretch;
gap: 6px;
width: 180px;
padding: 12px;
border-color: #cbd5e1;
border-radius: 10px;
box-shadow: 0 2px 12px rgb(15 23 42 / 12%);
pointer-events: none;
}
.readmarker-floating-widget__percentage { font-size: 22px; line-height: 1.2; }
.readmarker-floating-widget__remaining { min-width: 0; font-weight: 400; }
.readmarker-floating-widget .readmarker-duration-check { margin-inline-end: 0.25em; }
.readmarker-floating-widget__progress { height: 4px; overflow: hidden; border-radius: 2px; background: #e2e8f0; }
.readmarker-floating-widget__progress-fill {
display: block;
width: 100%;
height: 100%;
background: var(--readmarker-progress-color, #2563eb);
transform: scaleX(0);
transform-origin: left center; }
@media (max-width: 480px) {
.readmarker-floating-widget { width: 160px; padding: 10px; }
.readmarker-floating-widget__percentage { font-size: 20px; }
}
@media (forced-colors: active) {
.readmarker-floating-widget { border-color: CanvasText; box-shadow: none; }
.readmarker-floating-widget__progress { background: Canvas; outline: 1px solid CanvasText; }
.readmarker-floating-widget__progress-fill { background: Highlight; forced-color-adjust: none; }
} .readmarker-position-prompt {
position: fixed; right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px));
z-index: 1001; box-sizing: border-box; width: 280px; max-width: calc(100vw - 24px);
padding: 16px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #1e293b;
box-shadow: 0 2px 12px rgb(15 23 42 / 12%); font: 14px/1.5 system-ui, sans-serif; overflow-wrap: anywhere; pointer-events: auto;
}
.readmarker-position-prompt[hidden] { display: none; }
.readmarker-position-prompt p { margin: 8px 0; }
.readmarker-position-prompt button { font: inherit; padding: 8px 12px; color: #fff; background: #1e293b; border: 1px solid currentColor; border-radius: 4px; cursor: pointer; }
.readmarker-position-prompt button:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
@media (forced-colors: active) {
.readmarker-position-prompt { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
.readmarker-position-prompt button { background: ButtonFace; color: ButtonText; }
.readmarker-position-prompt button:focus-visible { outline-color: Highlight; }
} .readmarker-inline-progress { display: inline-flex; align-items: center; gap: .5em; max-width: 100%; vertical-align: middle; }
.readmarker-inline-track { display: inline-block; width: 8em; max-width: 40vw; height: 4px; overflow: hidden; background: #e2e8f0; border-radius: 2px; }
.readmarker-inline-track .readmarker-progress-fill { display: block; }
.readmarker-inline-remaining { display: inline; }
.readmarker-inline-progress[hidden], .readmarker-inline-remaining[hidden] { display: none; }
@media (forced-colors: active) {
.readmarker-inline-track { border: 1px solid CanvasText; }
.readmarker-inline-track .readmarker-progress-fill { background: Highlight; forced-color-adjust: none; }
}