/* ========================================================================== ReadSpeaker webReader — Skin "MMP" (Museus e Monumentos de Portugal) -------------------------------------------------------------------------- Skin oficial sobre o skin default do ReadSpeaker (abordagem recomendada no "webReader 3.8 Skinning Guide": só definimos as regras que queremos mudar). ESPECIFICIDADE: o container do botão tem a classe `.MMP` (adicionada pelo nosso componente Svelte). Prefixar com `.rsbtn.MMP` dá +1 classe de especificidade face ao skin default (que usa `.rsbtn …`), por isso as overrides ganham SEM `!important`. Exceções em que `!important` é mesmo necessário: • #rs-controlpanel — fica no , fora do `.rsbtn`, logo a classe .MMP não o alcança e a regra do default (mesmo ID) carrega depois. • .toolsopen z-index — o SDK mete o valor INLINE; só !important o vence. ⚠️ WCAG: o ReadSpeaker só garante conformidade com o skin default. Qualquer alteração de cor tem de ser verificada quanto a contraste (WCAG AA). SELETORES ÚTEIS (confirmados nesta versão / no guia): .rsbtn.MMP .rsbtn_play .................. botão "Ouvir esta página" .rsbtn.MMP .rsbtn_text span ............. label do botão .rsbtn.MMP .rsbtn_text::before .......... ícone de coluna .rsbtn.MMP .rsbtn_tooltoggle ............ botão do menu (hambúrguer) .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .. barra do player expandido .rsbtn.MMP .rsbtn_toolpanel … .rsbtn_tools fundo do menu de ferramentas .rsbtn.MMP .rsbtn_toollist .rsbtn_tool .. itens do menu .rs_minitoggler / .rsbtn_tool.active .... toggles (Click&Listen, Enlarge) #rs-controlpanel ........................ barra flutuante (scroll) #rs-controlpanel button ................. ícones da barra flutuante #rs-controlpanel .rs-controlpanel-scroll-state estado On/Off #rs_overlay ............................. overlay do lightbox ========================================================================== */ :root { --rs-bg: #E0DFDF; /* fundo das caixas/menus — equivalente opaco de Tuatara a 15% sobre branco */ --rs-text: #2c3538; /* cor de texto/itens — lettering do site (gunmetal) */ --rs-accent: #288144; /* cor de destaque — play / estado "On" */ --rs-border: #2D2C2A; /* cor dos borders ———› Tuatara */ --rs-slider-track: #B7B1AA; /* Natural Gray claro */ --rs-slider-thumb: #2D2C2A; /* Tuatara */ } /* -------------------------------------------------------------------------- Container do botão + alturas -------------------------------------------------------------------------- */ .rsbtn.MMP { height: 29px; } .rsbtn.MMP.mega_toggle { min-width: 270px; } /* Player expandido com a mesma altura do lado esquerdo (.rsbtn_play, 29px, border-box) — senão fica 1px mais alto e desalinha a linha de baixo. */ .rsbtn.MMP.rsexpanded .rsbtn_exp .rsbtn_exp_inner { height: 29px; box-sizing: border-box; } /* Ao abrir o menu, o SDK mete z-index:2147483647 INLINE no .rsbtn e esse valor FICA mesmo depois de fechar o menu — ficando por cima do header fixo (z-index 11) no scroll. Capamos SEMPRE para baixo do header (não só com .toolsopen). Só !important sobrepõe o estilo inline. O menu continua acima do conteúdo da página (z-index ~0). */ .rsbtn.MMP { z-index: 10 !important; } /* -------------------------------------------------------------------------- Fundos sólidos (o SDK entrega-os transparentes: #f6f9fc00 = alpha 0) -------------------------------------------------------------------------- */ .rsbtn.MMP .rsbtn_toolpanel.vertical .rsbtn_tools, .rsbtn.MMP .rsbtn_toolpanel.horizontal .rsbtn_tools { background-color: var(--rs-bg); } /* Barra flutuante "Automatic Scrolling" — ID no , precisa de !important */ #rs-controlpanel { background-color: var(--rs-bg) !important; } /* -------------------------------------------------------------------------- Borders, contornos -------------------------------------------------------------------------- */ /* ReadSpeaker: borders MMP */ .rsbtn.MMP .rsbtn_play, .rsbtn.MMP .rsbtn_tooltoggle, .rsbtn.MMP.zoom-tooltoggler .rsbtn_tooltoggle, .rsbtn.MMP.rsexpanded .rsbtn_exp .rsbtn_exp_inner, .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item, .rsbtn.MMP .rsbtn_toolpanel.vertical .rsbtn_tools, .rsbtn.MMP .rsbtn_toolpanel.horizontal .rsbtn_tools, .rsbtn.MMP .rsbtn_toolpanel.vertical .rsbtn_toollist li, .rsbtn.MMP .rsbtn_toolpanel.horizontal .rsbtn_toollist li .rsbtn_tool, .rsbtn.MMP .rsbtn_toollist .rs-contextmenu, .rsbtn.MMP .rsbtn_toollist .rs-contextmenu .rs-contextmenu-item, .rsbtn.MMP .rsbtn_toollist .rs-contextmenu .rs-contextmenu-item-placeholder { border-radius: 0; border-width: 0.5px; } #rs-controlpanel, #rs-controlpanel button, .rspopup, .rspopup .rspopup_btn, .rspopup .rs-contextmenu, .rspopup .rs-contextmenu .rs-contextmenu-item, .rspopup .rs-contextmenu .rs-contextmenu-item-placeholder { border-radius: 0 !important; border-width: 0.5px !important; } .rsbtn.MMP .rsbtn_play, .rsbtn.MMP .rsbtn_tooltoggle, .rsbtn.MMP.zoom-tooltoggler .rsbtn_tooltoggle, .rsbtn.MMP.rsexpanded .rsbtn_exp .rsbtn_exp_inner, .rsbtn.MMP .rsbtn_toolpanel.vertical .rsbtn_tools, .rsbtn.MMP .rsbtn_toolpanel.horizontal .rsbtn_tools, .rsbtn.MMP .rsbtn_toollist .rs-contextmenu, .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_dropdown { border: 1.2px solid var(--rs-border); } #rs-controlpanel { border: 1.2px solid var(--rs-border) !important; } /* -------------------------------------------------------------------------- Posicionamento opcional do botão (props position="fixed" | "floating") -------------------------------------------------------------------------- */ .rsbtn.MMP.rs-fixed { position: fixed; top: 100px; right: 20px; z-index: 1000; } .rsbtn.MMP.rs-floating { position: fixed; bottom: 80px; right: 20px; z-index: 1000; } @media (max-width: 768px) { .rsbtn.MMP.rs-fixed { top: 80px; right: 10px; } .rsbtn.MMP.rs-floating { bottom: 60px; right: 10px; } } /* Esconder o indicador de loading antigo, se aparecer */ .rs-player-loadindicator { display: none !important; } /* O lightbox usa um player próprio para ler o seu conteúdo; escondê-lo (recomendação do Skinning Guide). */ #rslightbox_contentcontainer #rs_lightboxplayer { display: none; } /* -------------------------------------------------------------------------- EXTRAS de cor/fonte — descomentar para alinhar com a identidade. (#rs-controlpanel precisa de !important; os .rsbtn.MMP … não.) -------------------------------------------------------------------------- */ /* .rsbtn.MMP .rsbtn_text span, .rsbtn.MMP .rsbtn_text::before { font-family: var(--font-ibm), "IBM Plex Serif", serif; color: var(--rs-text); } */ .rsbtn.MMP .rsbtn_text span, .rsbtn.MMP .rsbtn_toollist .rsbtn_tool, #rs-controlpanel, #rs-controlpanel button { font-family: var(--font-body); font-weight: 500; } /* .rsbtn.MMP .rsbtn_toollist .rsbtn_tool { color: var(--rs-text); } */ .rsbtn.MMP .rsbtn_toollist .rsbtn_tool, .rsbtn.MMP .rsbtn_toollist .rsbtn_tool span.rsbtn_btnlabel, .rsbtn.MMP .rsbtn_toollist .rs-contextmenu .rs-contextmenu-item, .rsbtn.MMP .rsbtn_toollist .rs-contextmenu .rs-contextmenu-item span.rsbtn_btnlabel { font-family: var(--font-body); font-weight: 500; color: var(--rs-text); } .rsbtn.MMP .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool span.rsbtn_btnlabel, .rsbtn.MMP .rsbtn_toolpanel.horizontal .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer .rsbtn_toollist li .rsbtn_tool span.rsbtn_btnlabel { font-family: var(--font-body); font-weight: 500; color: var(--rs-text); } .rsbtn.MMP .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool:hover, .rsbtn.MMP .rsbtn_toolpanel.horizontal .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer .rsbtn_toollist li .rsbtn_tool:hover, .rsbtn.MMP .rsbtn_toollist .rsbtn_tool:hover, .rsbtn.MMP .rsbtn_toollist .rs-contextmenu .rs-contextmenu-item:hover, .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:hover { background-color: #fff; } html #rs-controlpanel button:hover { background-color: #fff !important; } /* altera o fundo do widget principal. */ .rsbtn.MMP .rsbtn_play, .rsbtn.MMP .rsbtn_tooltoggle, .rsbtn.MMP.rsexpanded .rsbtn_exp .rsbtn_exp_inner { background-color: var(--rs-bg); } .rsbtn.MMP .rsbtn_tooltoggle:hover, .rsbtn.MMP.zoom-tooltoggler .rsbtn_tooltoggle:hover { background-color: var(--rs-bg); } .rsbtn.MMP.toolsopen .rsbtn_tooltoggle:hover, .rsbtn.MMP.toolsopen.zoom-tooltoggler .rsbtn_tooltoggle:hover { background-color: #fff; } .rsbtn.MMP.toolsopen .rsbtn_tooltoggle:hover span.rsicn, .rsbtn.MMP.toolsopen.zoom-tooltoggler .rsbtn_tooltoggle:hover span.rsicn { color: var(--rs-slider-thumb); } /* icon do botão principal */ .rsbtn.MMP .rsbtn_play .rsbtn_left .rsbtn_text::before { content: ""; width: 18px; height: 18px; top: 50%; left: 0; transform: translateY(-50%); background: url("/assets/icons/listen-speaker.svg") center / contain no-repeat; } .rsbtn.MMP .rsbtn_play .rsbtn_left .rsbtn_text::after { content: none; } /* icon hamburger */ .rsbtn.MMP .rsbtn_tooltoggle span.rsicn { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 0; line-height: 1; color: var(--rs-text); } .rsbtn.MMP .rsbtn_tooltoggle span.rsicn::before { content: ""; display: block; width: 18px; height: 2px; background-color: currentColor; border-radius: 2px; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; } /* .rsbtn.MMP.zoom-tooltoggler .rsbtn_tooltoggle, .rsbtn.MMP.zoom-tooltoggler .rsbtn_tooltoggle:hover { background: var(--rs-bg); } */ /* icons do menu */ .rsbtn.MMP .rsicn-click-listen::before, .rsbtn.MMP .rsicn-download::before, .rsbtn.MMP .rsicn-enlarged-text::before, .rsbtn.MMP .rsicn-help::before, .rsbtn.MMP .rsicn-keyboard::before, .rsbtn.MMP .rsicn-pagemask::before, .rsbtn.MMP .rsicn-settings::before, .rsbtn.MMP .rsicn-text-settings::before, .rsbtn.MMP .rsicn-textmode::before { content: ""; display: inline-block; width: 20px; height: 24px; line-height: 1; vertical-align: middle; background-color: currentColor; } .rsbtn.MMP .rsicn-click-listen::before { -webkit-mask: url("/assets/icons/clicklisten.svg") center / contain no-repeat; mask: url("/assets/icons/clicklisten.svg") center / contain no-repeat; } .rsbtn.MMP .rsicn-download::before { -webkit-mask: url("/assets/icons/download.svg") center / contain no-repeat; mask: url("/assets/icons/download.svg") center / contain no-repeat; } .rsbtn.MMP .rsicn-enlarged-text::before { -webkit-mask: url("/assets/icons/text.svg") center / contain no-repeat; mask: url("/assets/icons/text.svg") center / contain no-repeat; } .rsbtn.MMP .rsicn-help::before { -webkit-mask: url("/assets/icons/help.svg") center / contain no-repeat; mask: url("/assets/icons/help.svg") center / contain no-repeat; } .rsbtn.MMP .rsicn-keyboard::before { -webkit-mask: url("/assets/icons/keyboard.svg") center / contain no-repeat; mask: url("/assets/icons/keyboard.svg") center / contain no-repeat; } .rsbtn.MMP .rsicn-pagemask::before { -webkit-mask: url("/assets/icons/pagemask.svg") center / contain no-repeat; mask: url("/assets/icons/pagemask.svg") center / contain no-repeat; } .rsbtn.MMP .rsicn-settings::before, .rsbtn.MMP .rsicn-text-settings::before { -webkit-mask: url("/assets/icons/settings.svg") center / contain no-repeat; mask: url("/assets/icons/settings.svg") center / contain no-repeat; } .rsbtn.MMP .rsicn-textmode::before { -webkit-mask: url("/assets/icons/textmode.svg") center / contain no-repeat; mask: url("/assets/icons/textmode.svg") center / contain no-repeat; } .rsbtn.MMP .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool span.rsicn { display: inline-flex; align-items: center; height: 30px; line-height: 1; vertical-align: middle; } .rsbtn.MMP .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool span.rsicn::before { line-height: 1; } /* icons de rewind/forward no toolpanel */ .rsbtn.MMP .rsbtn_toolpanel .rsicn-backwards::before, .rsbtn.MMP .rsbtn_toolpanel .rsicn-forwards::before { content: ""; display: inline-block; width: 20px; height: 24px; line-height: 1; vertical-align: middle; background-position: center; background-repeat: no-repeat; background-size: contain; } .rsbtn.MMP .rsbtn_toolpanel .rsicn-backwards::before { background-image: url("/assets/icons/player-rewind.svg"); } .rsbtn.MMP .rsbtn_toolpanel .rsicn-forwards::before { background-image: url("/assets/icons/player-forward.svg"); } /* icon de volume no player expandido */ .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_volume span.rsicn, .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item span.rsicn-volume { display: inline-flex; align-items: center; justify-content: center; height: 28px; line-height: 1; } .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_volume span.rsicn::before, .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item span.rsicn-volume::before { content: ""; display: inline-block; width: 20px; height: 20px; line-height: 1; vertical-align: middle; background: url("/assets/icons/listen-speaker.svg") center / contain no-repeat; } /* icon de velocidade no player expandido */ .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_speed span.rsicn, .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item span.rsicn-speed { display: inline-flex; align-items: center; justify-content: center; height: 28px; line-height: 1; top: 0; } .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_speed span.rsicn::before, .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item span.rsicn-speed::before { content: ""; display: inline-block; width: 20px; height: 20px; line-height: 1; vertical-align: middle; background: url("/assets/icons/player-speed.svg") center / contain no-repeat; } .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_speed:focus, .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:focus:has(span.rsicn-speed) { background-color: var(--rs-slider-thumb); } .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_speed:focus span.rsicn::before, .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:focus span.rsicn-speed::before { background: #fff; -webkit-mask: url("/assets/icons/player-speed.svg") center / contain no-repeat; mask: url("/assets/icons/player-speed.svg") center / contain no-repeat; } /* dropdowns com slider, ex. velocidade e volume */ .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_dropdown { background-color: var(--rs-bg); border-color: var(--rs-border); } .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_dropdown:focus-within { outline: 0; } .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_dropdown input.rs-slider[type="range"] { accent-color: var(--rs-slider-track); } .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_dropdown input.rs-slider[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--rs-slider-track); } .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_dropdown input.rs-slider[type="range"]::-moz-range-track { height: 4px; background: var(--rs-slider-track); } .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_dropdown input.rs-slider[type="range"]::-webkit-slider-thumb { height: 14px; width: 14px; background-color: var(--rs-slider-thumb); border: 0; box-shadow: none; margin-top: -5px; } .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_dropdown input.rs-slider[type="range"]::-moz-range-thumb { height: 14px; width: 14px; background-color: var(--rs-slider-thumb); border: 0; box-shadow: none; } /* icon de pausa no player expandido */ .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause span.rsicn, .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item span.rsicn-pause { display: inline-flex; align-items: center; justify-content: center; height: 28px; line-height: 1; } .rsbtn.MMP:not(.rsidle):not(.rspaused):not(.rsstopped) .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause span.rsicn::before, .rsbtn.MMP:not(.rsidle):not(.rspaused):not(.rsstopped) .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item span.rsicn-pause::before { content: ""; display: inline-block; width: 20px; height: 20px; line-height: 1; vertical-align: middle; background: url("/assets/icons/player-pause.svg") center / contain no-repeat; } /* icons de rewind/forward no player expandido */ .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_rewind span.rsicn, .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_forward span.rsicn, .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item span.rsicn-backwards, .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item span.rsicn-forwards { display: inline-flex; align-items: center; justify-content: center; height: 28px; line-height: 1; left: 0; } .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_rewind span.rsicn::before, .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item span.rsicn-backwards::before { content: ""; display: inline-block; width: 20px; height: 20px; line-height: 1; vertical-align: middle; background: url("/assets/icons/player-rewind.svg") center / contain no-repeat; } .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_forward span.rsicn::before, .rsbtn.MMP .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item span.rsicn-forwards::before { content: ""; display: inline-block; width: 20px; height: 20px; line-height: 1; vertical-align: middle; background: url("/assets/icons/player-forward.svg") center / contain no-repeat; } .rsbtn.MMP.rswrapped .rsbtn_toolpanel.vertical { width: 100%; } .rsbtn.MMP .rsbtn_toolpanel.vertical .rsbtn_tools { width: 100%; box-sizing: border-box; } .rsbtn.MMP .rsbtn_toolpanel.vertical .rsbtn_tools_inner, .rsbtn.MMP .rsbtn_toolpanel.vertical .rsbtn_toolcontainer, .rsbtn.MMP .rsbtn_toolpanel.vertical .rsbtn_toollist { width: 100%; } /* controlpanel é a barra flutuante de "Automatic Scrolling" que aparece no scroll. O SDK entrega-a com um background transparente, mas podemos dar-lhe uma cor sólida para melhor contraste. Precisa de !important porque o SDK aplica um estilo INLINE (que tem mais peso que o nosso CSS) e esse estilo INLINE FICA mesmo depois de fechar o menu (quando a barra desaparece), ficando por cima do header fixo no scroll. Capamos SEMPRE para baixo do header (não só com .toolsopen). O menu continua acima do conteúdo da página (z-index ~0). */ #rs-controlpanel { box-shadow: 0 0 0px #777 !important; padding: 0 !important; /* background-color: red !important; */ } html #rs-controlpanel button { height: 29px; min-height: 29px; max-height: 29px; margin: 0 !important; box-sizing: border-box; } html #rs-controlpanel button.rs-controlpanel-btn, html #rs-controlpanel button.rs-controlpanel-scroll-toggler { margin-right: 0 !important; } /* icon do altifalante na barra flutuante */ html #rs-controlpanel .rsicn-logo { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; top: 0; margin: 0; box-sizing: border-box; } html #rs-controlpanel .rsicn-logo::before { content: ""; position: static; display: block; width: 20px; height: 20px; transform: none; background: url("/assets/icons/listen-speaker.svg") center / contain no-repeat; } html #rs-controlpanel .rsicn-logo::after { content: none; } /* icons de rewind/forward na barra flutuante */ html #rs-controlpanel button.rs-controlpanel-btn .rsicn-backwards, html #rs-controlpanel button.rs-controlpanel-btn .rsicn-forwards, html #rs-controlpanel button.rs-controlpanel-btn .rsicn-pause { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; left: 0; line-height: 1; } html #rs-controlpanel button.rs-controlpanel-btn .rsicn-backwards::before, html #rs-controlpanel button.rs-controlpanel-btn .rsicn-forwards::before, html #rs-controlpanel button.rs-controlpanel-btn .rsicn-pause::before { content: ""; display: inline-block; width: 20px; height: 20px; line-height: 1; vertical-align: middle; background-position: center; background-repeat: no-repeat; background-size: contain; } html #rs-controlpanel button.rs-controlpanel-btn .rsicn-backwards::before { background-image: url("/assets/icons/player-rewind.svg"); } html #rs-controlpanel button.rs-controlpanel-btn .rsicn-forwards::before { background-image: url("/assets/icons/player-forward.svg"); } html #rs-controlpanel button.rs-controlpanel-btn .rsicn-pause::before { background-image: url("/assets/icons/player-pause.svg"); } /* #rs-controlpanel, #rs-controlpanel button { color: var(--rs-text) !important; } #rs-controlpanel .rs-controlpanel-scroll-state { color: var(--rs-accent) !important; } .rsbtn.MMP .rsbtn_play, .rsbtn.MMP .rsbtn_tools { border-color: var(--rs-border); } #rs-controlpanel { border-color: var(--rs-border) !important; } */ /* -------------------------------------------------------------------------- Print — esconder a UI do ReadSpeaker -------------------------------------------------------------------------- */ @media print { .rsbtn, #rs-controlpanel, #rs_overlay { display: none !important; } }