<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link rel="icon" type="image/png" href="/mixed/img/icon16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/mixed/img/icon19.png" sizes="19x19"> <link rel="icon" type="image/png" href="/mixed/img/icon38.png" sizes="38x38"> <link rel="icon" type="image/png" href="/mixed/img/icon48.png" sizes="48x48"> <link rel="icon" type="image/png" href="/mixed/img/icon64.png" sizes="64x64"> <link rel="icon" type="image/png" href="/mixed/img/icon128.png" sizes="128x128"> <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap-theme.min.css"> <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap-toggle/bootstrap-toggle.min.css"> <style type="text/css"> body { padding: 10px; } h3 { margin-top: 10px; } label { font-weight: normal; } #mini { text-align: center; } #full { display: none; } .btn-group { display: flex; justify-content: center; margin-top: 10px; white-space: nowrap; } html:root[data-mode=full] #mini { display: none; } html:root[data-mode=full] #full { display: initial; } .link-group { display: block; line-height: 1.5em; margin: 0 -10px; padding: 0.5em 10px; cursor: pointer; color: #333; text-decoration: none; background-color: transparent; transition: background-color 0.125s linear 0s; max-width: none; } .link-group:hover, .link-group:active { color: #333; text-decoration: none; } .link-group:hover>.link-group-label, .link-group:active>.link-group-label { text-decoration: underline; } .link-group:hover { background-color: rgba(0, 0, 0, 0.05); } .link-group:active { background-color: rgba(0, 0, 0, 0.1); } .link-group-icon { width: 16px; height: 16px; text-align: center; vertical-align: middle; display: inline-block; margin-right: 0.25em; } .link-group-icon>input { margin: 0; padding: 0; } .link-group-icon>.glyphicon { top: 0; } .link-group-label { vertical-align: middle; } </style> </head> <body> <div id="mini"> <div> <input type="checkbox" id="enable-search"> </div> <div class="btn-group"> <a title="Search (Alt + Insert) (Middle click to open in new tab)" class="btn btn-default btn-xs action-open-search"><span class="glyphicon glyphicon-search"></span></a> <a title="Options (Middle click to open in new tab)" class="btn btn-default btn-xs action-open-options"><span class="glyphicon glyphicon-wrench"></span></a> <a title="Help" class="btn btn-default btn-xs action-open-help"><span class="glyphicon glyphicon-question-sign"></span></a> </div> </div> <div id="full"> <h3 id="extension-info">Yomichan</h3> <label class="link-group"> <span class="link-group-icon"><input type="checkbox" id="enable-search2" /></span><span class="link-group-label">Enable content scanning</span> </label> <a class="link-group action-open-options"> <span class="link-group-icon"><span class="glyphicon glyphicon-chevron-right"></span></span><span class="link-group-label">Options</span> </a> <a class="link-group action-open-search"> <span class="link-group-icon"><span class="glyphicon glyphicon-chevron-right"></span></span><span class="link-group-label">Search</span> </a> <a class="link-group action-open-help"> <span class="link-group-icon"><span class="glyphicon glyphicon-chevron-right"></span></span><span class="link-group-label">Help</span> </a> </div> <script src="/mixed/lib/jquery.min.js"></script> <script src="/mixed/lib/bootstrap-toggle/bootstrap-toggle.min.js"></script> <script src="/mixed/js/extension.js"></script> <script src="/bg/js/api.js"></script> <script src="/bg/js/options.js"></script> <script src="/bg/js/util.js"></script> <script src="/bg/js/context.js"></script> </body> </html>