RustBox/tests/theme_fixture.html

<!doctype html><html lang="en" data-theme="light" data-interface-skin="roundcube-elastic" data-density="compact" data-preview="right" data-scale="normal" data-color-preset="sage" data-font-family="system" data-contrast="normal" data-show-borders="true" data-toolbar-density="normal" data-unread-badge="dot" data-scrollbar-density="thin">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="../src/web/css/00-tokens.css"><link rel="stylesheet" href="../src/web/css/10-base.css"><link rel="stylesheet" href="../src/web/css/20-shell.css"><link rel="stylesheet" href="../src/web/css/30-mail.css"><link rel="stylesheet" href="../src/web/css/40-compose.css"><link rel="stylesheet" href="../src/web/css/50-settings.css"><link rel="stylesheet" href="../src/web/css/55-roundcube-skins.css"><link rel="stylesheet" href="../src/web/css/56-interface-styles.css"><link rel="stylesheet" href="../src/web/css/60-responsive.css"><style>:root{--folder-pane-width:238px;--message-pane-width:430px;--row-height:52px;--sidebar-item-height:35px;--ui-size:14px;--control-height:30px;--appbar-height:44px;--icon-size:18px;--button-pad-x:10px;--button-pad-y:5px;--field-pad-x:8px;--field-pad-y:5px} .fixture-icon{width:18px;height:18px}</style></head>
<body><div class="app-view">
<header class="appbar"><div class="app-brand"><span class="brand-icon">✉</span><strong>RustBox</strong></div><div class="search-field"><span>⌕</span><input value="Search mail"><span></span><span>☷</span></div><div class="appbar-actions"><button class="icon-button">⚙</button><div class="account-summary"><span>linuxiarz@linuxiarz.pl</span><span>Connected</span></div></div></header>
<div class="mail-shell"><button class="folder-drawer-scrim open"></button><aside class="folder-pane open">
<div class="folder-drawer-header mobile-only"><button class="icon-button folder-drawer-close" aria-label="Back to messages"><svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg></button><strong>Folders</strong></div>
<button class="button primary compose-button">✎ <span>Compose</span></button><div class="section-heading"><span>Folders</span><span>＋</span></div>
<nav class="folder-list"><button class="folder-button active"><span>▣</span><span class="folder-name">INBOX</span><span class="folder-count unread">1424</span></button><button class="folder-button"><span>□</span><span class="folder-name">Archive</span><span></span></button><button class="folder-button"><span>□</span><span class="folder-name">Drafts</span><span></span></button><button class="folder-button"><span>□</span><span class="folder-name">Sent</span><span></span></button><button class="folder-button"><span>□</span><span class="folder-name">Spam</span><span></span></button><button class="folder-button"><span>□</span><span class="folder-name">Trash</span><span></span></button></nav>
<div class="section-heading"><span>Labels</span><span>＋</span></div><div class="folder-pane-footer"><span>IMAP</span><span>RustBox</span></div></aside>
<section class="message-pane"><div class="pane-toolbar"><div class="pane-title"><div><strong>Inbox</strong><span>1,424 messages</span></div></div><div class="toolbar-actions"><button class="icon-button">↻</button></div></div><div class="message-list"><button class="message-row unread"><span class="message-state"></span><span class="message-main"><strong class="message-from">Roundcube Team</strong><span class="message-date">16:42</span></span><span class="message-subject-line"><span class="message-subject">Welcome to your inbox</span></span></button><button class="message-row active"><span class="message-state"></span><span class="message-main"><strong class="message-from">Example sender</strong><span class="message-date">15:17</span></span><span class="message-subject-line"><span class="message-subject">Selected message</span></span></button><button class="message-row"><span class="message-state"></span><span class="message-main"><strong class="message-from">Newsletter</strong><span class="message-date">Yesterday</span></span><span class="message-subject-line"><span class="message-subject">A regular message row</span></span></button></div></section>
<section class="reader-pane"><div class="reader-toolbar"><button class="button quiet">Reply</button><button class="button quiet">Forward</button></div><article class="message-content"><header class="message-header"><h1>Selected message</h1><div class="message-meta"><div class="avatar">E</div><div class="sender"><strong>Example sender</strong><span>to linuxiarz</span></div></div></header><div class="message-body"><p>This fixture uses the real RustBox CSS bundle and component classes.</p><p><a href="#">Roundcube accent link</a></p><button class="button primary">Primary action</button></div></article></section>
</div></div><script>const q=new URLSearchParams(location.search);document.documentElement.dataset.interfaceSkin=q.get('skin')||'roundcube-elastic';document.documentElement.dataset.theme=q.get('theme')||'light';</script></body></html>