summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ext/action-popup.html19
-rw-r--r--ext/css/action-popup.css61
-rw-r--r--ext/js/pages/action-popup-main.js2
3 files changed, 58 insertions, 24 deletions
diff --git a/ext/action-popup.html b/ext/action-popup.html
index d86fe2ac..bc5bdcb4 100644
--- a/ext/action-popup.html
+++ b/ext/action-popup.html
@@ -18,7 +18,7 @@
<div id="mini">
<label class="toggle">
- <input type="checkbox" id="enable-search">
+ <input type="checkbox" class="enable-search">
<div class="toggle-group">
<span class="toggle-on">On</span>
<span class="toggle-off">Off</span>
@@ -57,28 +57,33 @@
<div id="full">
<h3 id="extension-info">Yomitan</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 class="toggle">
+ <input type="checkbox" class="enable-search">
+ <div class="toggle-group">
+ <span class="toggle-on">On</span>
+ <span class="toggle-off">Off</span>
+ <span class="toggle-handle"></span>
+ </div>
</label>
<a tabindex="0" class="link-group action-open-settings">
- <span class="link-group-icon" data-icon="chevron"></span>
+ <span class="link-group-icon" data-icon="cog"></span>
<span class="link-group-label">Settings</span>
<span class="link-group-badge">
<div class="flex-margin-left warning-badge no-dictionaries-enabled-warning" hidden><span class="icon" data-icon="exclamation-point-short"></span></div>
</span>
</a>
<a tabindex="0" class="link-group action-open-permissions" hidden>
- <span class="link-group-icon" data-icon="chevron"></span>
+ <span class="link-group-icon" data-icon="key"></span>
<span class="link-group-label">Permissions</span>
<span class="link-group-badge">
<div class="flex-margin-left warning-badge permissions-required-warning" hidden><span class="icon" data-icon="exclamation-point-short"></span></div>
</span>
</a>
<a tabindex="0" class="link-group action-open-search">
- <span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Search</span>
+ <span class="link-group-icon" data-icon="magnifying-glass"></span><span class="link-group-label">Search</span>
</a>
<a tabindex="0" class="link-group action-open-info">
- <span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Information</span>
+ <span class="link-group-icon" data-icon="question-mark-circle"></span><span class="link-group-label">Information</span>
</a>
</div>
diff --git a/ext/css/action-popup.css b/ext/css/action-popup.css
index b3f7d5df..8abb23ef 100644
--- a/ext/css/action-popup.css
+++ b/ext/css/action-popup.css
@@ -35,6 +35,7 @@ body {
font-family: 'Segoe UI', Tahoma, sans-serif;
font-size: var(--font-size);
width: max-content;
+ height: max-content;
}
h3 {
@@ -122,27 +123,25 @@ label {
background-color: rgba(0, 0, 0, 0.1);
}
.link-group-icon {
- width: 16px;
- height: 16px;
+ width: 26px;
+ height: 26px;
text-align: center;
vertical-align: middle;
display: inline-block;
margin-right: 0.25em;
+ background-repeat: no-repeat;
+ background-size: contain;
}
.link-group-icon>input {
margin: 0;
padding: 0;
}
-.link-group-icon[data-icon=chevron]::after {
- content: '';
- display: block;
- width: 100%;
- height: 100%;
- background-image: url(/images/right-chevron.svg);
- background-repeat: no-repeat;
- background-position: center center;
- background-size: contain;
-}
+.link-group-icon[data-icon=chevron] { background-image: url(/images/right-chevron.svg); }
+.link-group-icon[data-icon=cog] { background-image: url(/images/cog.svg); }
+.link-group-icon[data-icon=key] { background-image: url(/images/key.svg); }
+.link-group-icon[data-icon=magnifying-glass] { background-image: url(/images/magnifying-glass.svg); }
+.link-group-icon[data-icon=question-mark-circle] { background-image: url(/images/question-mark-circle.svg); }
+
.link-group-label {
vertical-align: middle;
}
@@ -165,14 +164,13 @@ label {
}
.toggle {
box-sizing: border-box;
- width: 60px;
- height: 34px;
+ width: 100%;
+ padding-top: 37.7%;
position: relative;
overflow: hidden;
border: 1px solid #245580;
border-radius: 4px;
display: inline-block;
- padding: 6px 12px;
}
.toggle-group {
position: absolute;
@@ -189,7 +187,9 @@ body[data-loaded=true] .toggle-group {
.toggle-on,
.toggle-off,
.toggle-handle {
- display: block;
+ display: flex;
+ justify-content: center;
+ align-items: center;
padding: 6px 12px;
font-size: var(--font-size);
font-weight: normal;
@@ -464,3 +464,32 @@ select.profile-select {
bottom: 0;
background-color: var(--warning-color);
}
+
+/* Mobile overrides */
+
+/* Treat devices that can't hover as mobile devices */
+@media (hover: none) {
+ #full {
+ display: initial;
+ }
+ #mini {
+ display: none;
+ }
+ body {
+ min-width: 95%;
+ width: max-content;
+ font-size: calc(var(--font-size) * 2);
+ text-align: center;
+ }
+ h3 {
+ font-size: calc(var(--font-size) * 3.4);
+ }
+ .toggle-on, .toggle-off {
+ font-size: calc(var(--font-size) * 4);
+ }
+ .toggle-handle {
+ padding-left: 65px;
+ padding-right: 65px;
+ border-radius: 10px;
+ }
+}
diff --git a/ext/js/pages/action-popup-main.js b/ext/js/pages/action-popup-main.js
index 8dca8934..4125b2d1 100644
--- a/ext/js/pages/action-popup-main.js
+++ b/ext/js/pages/action-popup-main.js
@@ -187,7 +187,7 @@ class DisplayController {
_setupOptions({options}) {
const extensionEnabled = options.general.enable;
const onToggleChanged = () => this._api.commandExec('toggleTextScanning');
- for (const toggle of /** @type {NodeListOf<HTMLInputElement>} */ (document.querySelectorAll('#enable-search,#enable-search2'))) {
+ for (const toggle of /** @type {NodeListOf<HTMLInputElement>} */ (document.querySelectorAll('.enable-search,.enable-search2'))) {
toggle.checked = extensionEnabled;
toggle.addEventListener('change', onToggleChanged, false);
}