diff options
| author | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2020-06-21 15:57:18 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-06-21 15:57:18 -0400 |
| commit | 4ebee3e17c2d536da7de33d16c2e44c54c4c8e51 (patch) | |
| tree | 73d51b87ce6e4ac1fb1bb6d4f50dc2230835512e /ext/bg/context.html | |
| parent | 0c69e54fde259568ebd89a3c9e8481cf28860ea8 (diff) | |
Context popup update (#594)
* Add link to the help button
* Update context.html to not use bootstrap
Styles moved into a separate file
Update icons
* Update terminology to correspond to new icons
Diffstat (limited to 'ext/bg/context.html')
| -rw-r--r-- | ext/bg/context.html | 244 |
1 files changed, 56 insertions, 188 deletions
diff --git a/ext/bg/context.html b/ext/bg/context.html index 89695d0e..1e7e6155 100644 --- a/ext/bg/context.html +++ b/ext/bg/context.html @@ -1,192 +1,60 @@ <!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/icon32.png" sizes="32x32"> - <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"> - <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; - } - - - .toggle { - width: 60px; - height: 34px; - position: relative; - overflow: hidden; - } - .toggle-group { - position: absolute; - width: 200%; - left: 0; - top: 0; - bottom: 0; - user-select: none; - } - .toggle-group.toggle-group-animated { - transition: transform 0.35s; - } - .toggle-on, - .toggle-off { - position: absolute; - top: 0; - bottom: 0; - margin: 0; - border: 0; - border-radius: 0; - } - .toggle-on { - padding-right: 24px; - left: 0; - right: 50%; - } - .toggle-off { - padding-left: 24px; - left: 50%; - right: 0; - } - .toggle-handle { - position: relative; - margin: 0 auto; - padding-top: 0; - padding-bottom: 0; - height: 100%; - width: 0; - border-width: 0 1px; - } - - .toggle>input[type=checkbox] { - display: none; - } - .toggle>input[type=checkbox]:not(:checked)~.toggle-group { - transform: translateX(-50%); - } - </style> - </head> - <body> - <div id="mini"> - <div> - <label class="btn btn-primary toggle"> - <input type="checkbox" id="enable-search" /> - <div class="toggle-group"> - <span class="btn btn-primary toggle-on">On</span> - <span class="btn btn-default active toggle-off">Off</span> - <span class="btn btn-default toggle-handle"></span> - </div> - </label> - </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> +<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/icon32.png" sizes="32x32"> + <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="/bg/css/context.css"> +</head> +<body> + +<div id="mini"> + <label class="toggle"> + <input type="checkbox" id="enable-search"> + <div class="toggle-group"> + <span class="toggle-on">On</span> + <span class="btnx btn-defaulxt toggle-off">Off</span> + <span class="btnx xbtn-default toggle-handle"></span> </div> - - <script src="/mixed/js/core.js"></script> - <script src="/mixed/js/comm.js"></script> - <script src="/mixed/js/dom.js"></script> - <script src="/mixed/js/api.js"></script> - - <script src="/bg/js/options.js"></script> - <script src="/bg/js/util.js"></script> - - <script src="/bg/js/context-main.js"></script> - </body> + </label> + <div class="nav-button-container"> + <a class="nav-button action-open-search" data-icon="magnifying-glass" title="Search (Alt + Insert) (Middle click to open in new tab)"></a> + <a class="nav-button action-open-options" data-icon="cog" title="Options (Middle click to open in new tab)"></a> + <a class="nav-button action-open-help" data-icon="question-mark" title="Help"></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" data-icon="chevron"></span><span class="link-group-label">Options</span> + </a> + <a class="link-group action-open-search"> + <span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Search</span> + </a> + <a class="link-group action-open-help"> + <span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Help</span> + </a> +</div> + +<script src="/mixed/js/core.js"></script> +<script src="/mixed/js/comm.js"></script> +<script src="/mixed/js/dom.js"></script> +<script src="/mixed/js/api.js"></script> + +<script src="/bg/js/options.js"></script> +<script src="/bg/js/util.js"></script> + +<script src="/bg/js/context-main.js"></script> + +</body> </html> |