/* id="jbt-icon-only-actions" */ /* Page toolbar: soft brand-tinted chips with short labels (Share, Listen, Print and Night mode show labels; font-size buttons use tooltips) */ /* Search box */ .page-actions .jbt-search-btn { height: 38px; padding: 0 6px 0 12px; border-radius: 8px; border: 1px solid #d0d7de; background: #ffffff; color: #57606a; box-shadow: none; } .page-actions .jbt-search-btn i { color: #57606a; } .page-actions .jbt-search-btn:hover { border-color: #8c959f; box-shadow: none; color: #1f2328; } .page-actions .jbt-search-btn:focus-visible { border-color: #421983; box-shadow: 0 0 0 3px rgba(66, 25, 131, .15); } .page-actions .jbt-search-btn kbd { border: 1px solid #d0d7de; border-radius: 6px; background: #f6f8fa; color: #57606a; padding: 1px 6px; } /* Chips */ .page-actions .action-group:not(:has(.jbt-search-btn)) { align-items: center; gap: 8px; flex-wrap: nowrap; background: none; border: 0; box-shadow: none; padding: 0; height: auto; } .page-actions .action-btn:not(.jbt-search-btn) { height: 34px; padding: 0 14px; gap: 7px; justify-content: center; border: 0; border-radius: 999px; background: #efeaf8; color: #421983; font: 600 13px/1 Inter, system-ui, sans-serif; box-shadow: none; transition: background-color .15s ease, color .15s ease, transform .1s ease; } .page-actions .action-btn:not(.jbt-search-btn) > i { font-size: 13px; color: inherit; } .page-actions .action-btn:not(.jbt-search-btn) > span { display: inline; } .page-actions .action-btn:not(.jbt-search-btn):hover { background: #421983; color: #ffffff; border: 0; transform: none; } .page-actions .action-btn:not(.jbt-search-btn):active { transform: scale(.96); } .page-actions .action-btn:not(.jbt-search-btn):focus-visible { outline: 2px solid #421983; outline-offset: 2px; box-shadow: none; } .page-actions #shareBtn[aria-expanded="true"] { background: #421983; color: #ffffff; } /* Labelled chips do not need a tooltip */ .page-actions #shareBtn::after, .page-actions #shareBtn::before, .page-actions #textToSpeechBtn::after, .page-actions #textToSpeechBtn::before, .page-actions #printBtn::after, .page-actions #printBtn::before, .page-actions #nightModeBtn::after, .page-actions #nightModeBtn::before { display: none; } /* Font size: one chip holding three round buttons */ .page-actions .font-size-controls { gap: 0; margin: 0; padding: 0 3px; height: 34px; align-items: center; background: #efeaf8; border: 0; border-radius: 999px; } .page-actions .font-size-controls .action-btn { width: 32px; height: 30px; padding: 0; min-width: 0; background: transparent; } .page-actions .font-size-controls .action-btn.active { background: #ffffff; color: #421983; box-shadow: 0 1px 2px rgba(66, 25, 131, .18); } .page-actions .font-size-controls .action-btn.active:hover { background: #421983; color: #ffffff; } .page-actions .fs-glyph { font-family: Inter, system-ui, sans-serif; font-weight: 700; line-height: 1; } .page-actions .action-btn > b.fs-small { font-size: 11px; } .page-actions .action-btn > b.fs-large { font-size: 15px; } .page-actions .font-size-controls .action-btn > i { font-size: 12px; } /* Night mode */ body.night-mode .page-actions .jbt-search-btn { background: #161b22; border-color: #30363d; color: #8b949e; } body.night-mode .page-actions .jbt-search-btn i { color: #8b949e; } body.night-mode .page-actions .jbt-search-btn:hover { border-color: #6e7681; color: #e6edf3; } body.night-mode .page-actions .jbt-search-btn kbd { background: #21262d; border-color: #30363d; color: #8b949e; } body.night-mode .page-actions .action-btn:not(.jbt-search-btn), body.night-mode .page-actions .font-size-controls { background: #2f2645; color: #e3d9f5; } body.night-mode .page-actions .font-size-controls .action-btn { background: transparent; } body.night-mode .page-actions .action-btn:not(.jbt-search-btn):hover, body.night-mode .page-actions #shareBtn[aria-expanded="true"] { background: #6a3fc1; color: #ffffff; } body.night-mode .page-actions .font-size-controls .action-btn.active { background: #4a3a72; color: #ffffff; box-shadow: none; } body.night-mode .page-actions #nightModeBtn > i { color: #f5b301; } body.night-mode .page-actions #nightModeBtn:hover > i { color: #ffffff; } /* Phones: chips become round icon buttons to fit one row */ @media (max-width: 768px) { .page-actions .action-group:not(:has(.jbt-search-btn)) { width: fit-content; max-width: 100%; justify-content: flex-start; gap: 6px; } .page-actions .action-btn:not(.jbt-search-btn) { width: 34px; padding: 0; } .page-actions .action-btn:not(.jbt-search-btn) > span { display: none; } .page-actions .font-size-controls { width: auto; order: 0; } .page-actions .font-size-controls .action-btn { width: 32px; } } /* id="jbt-toolbar-tooltips" */ /* Styled tooltips for the page toolbar (text comes from data-tip) */ .page-actions .action-btn[data-tip] { position: relative; } .page-actions .action-btn[data-tip]::after, .page-actions .action-btn[data-tip]::before { position: absolute; left: 50%; pointer-events: none; opacity: 0; transition: opacity .15s ease, transform .15s ease; z-index: 1000; } .page-actions .action-btn[data-tip]::after { content: attr(data-tip); top: calc(100% + 10px); transform: translate(-50%, -4px); padding: 6px 10px; border-radius: 6px; background: #1f1a2e; color: #ffffff; font: 500 12px/1.2 Inter, system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap; box-shadow: 0 6px 16px rgba(31, 18, 64, .22); } .page-actions .action-btn[data-tip]::before { content: ""; top: calc(100% + 4px); transform: translate(-50%, -4px); border: 6px solid transparent; border-top: 0; border-bottom-color: #1f1a2e; } .page-actions .action-btn[data-tip]:hover::after, .page-actions .action-btn[data-tip]:hover::before, .page-actions .action-btn[data-tip]:focus-visible::after, .page-actions .action-btn[data-tip]:focus-visible::before { opacity: 1; transform: translate(-50%, 0); transition-delay: .25s; } /* Keep the last tooltip inside the screen, and hide Share's tooltip while its menu is open */ .page-actions #nightModeBtn[data-tip]::after { left: auto; right: 0; transform: translateY(-4px); } .page-actions #nightModeBtn[data-tip]:hover::after, .page-actions #nightModeBtn[data-tip]:focus-visible::after { transform: translateY(0); } .page-actions #shareBtn[aria-expanded="true"]::after, .page-actions #shareBtn[aria-expanded="true"]::before { display: none; } body.night-mode .page-actions .action-btn[data-tip]::after { background: #ece8f5; color: #1f1a2e; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); } body.night-mode .page-actions .action-btn[data-tip]::before { border-bottom-color: #ece8f5; } @media (hover: none) { .page-actions .action-btn[data-tip]::after, .page-actions .action-btn[data-tip]::before { display: none; } } /* id="jbt-share-menu" */ /* Share dropdown: card with a heading, brand-coloured icon badges and a separate "Copy link" row */ .page-actions .share-options { left: 0; right: auto; top: calc(100% + 12px); margin-top: 0; min-width: 196px; padding: 6px; background: #ffffff; border: 1px solid #e6e0f0; border-radius: 14px; box-shadow: 0 16px 40px rgba(31, 18, 64, .16), 0 2px 6px rgba(31, 18, 64, .06); } .page-actions .share-options.show { animation: jbtShareIn .16s ease-out; } @keyframes jbtShareIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .page-actions .share-options::before { content: "Share this page"; display: block; padding: 6px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid #efeaf7; font: 700 11px/1 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8a7fa8; } .page-actions .share-option { gap: 12px; padding: 8px 10px; border-radius: 10px; font: 500 14px/1.2 Inter, system-ui, sans-serif; color: #2b2540 !important; transition: background-color .15s ease; } .page-actions .share-option:hover, .page-actions .share-option:focus-visible { background: #f4f0fb; color: #421983 !important; outline: none; } .page-actions .share-option > i, .page-actions .share-option > svg { flex: 0 0 auto; box-sizing: border-box; width: 32px; height: 32px; padding: 8px; border-radius: 9px; color: #ffffff; font-size: 16px; line-height: 16px; text-align: center; } .page-actions .share-option.linkedin > i { background: #0A66C2; } .page-actions .share-option.whatsapp > i { background: #25D366; } .page-actions .share-option.facebook > i { background: #1877F2; } .page-actions .share-option.x > svg { background: #000000; padding: 9px; } .page-actions .share-option.link > i { background: #efe9fa; color: #421983; } .page-actions .share-option.link { margin-top: 4px; position: relative; } .page-actions .share-option.link::before { content: ""; position: absolute; left: 10px; right: 10px; top: -4px; border-top: 1px solid #efeaf7; } /* Night mode */ body.night-mode .page-actions .share-options { background: #221d31; border-color: #3b2f5c; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); } body.night-mode .page-actions .share-options::before { color: #a99cc9; border-bottom-color: #3b2f5c; } body.night-mode .page-actions .share-option { color: #ece8f5 !important; } body.night-mode .page-actions .share-option:hover, body.night-mode .page-actions .share-option:focus-visible { background: #2f2645; color: #ffffff !important; } body.night-mode .page-actions .share-option.x > svg { background: #ffffff; color: #000000; } body.night-mode .page-actions .share-option.link > i { background: #3b2f5c; color: #e3d9f5; } body.night-mode .page-actions .share-option.link::before { border-top-color: #3b2f5c; } /* id="jbt-mobile-header-fix" */ /* Mobile header: the hidden menu's