diff --git a/manage.html b/manage.html
index e051f8ca..d8b7b4fe 100644
--- a/manage.html
+++ b/manage.html
@@ -6,6 +6,7 @@
+
diff --git a/manage/config-dialog.css b/manage/config-dialog.css
new file mode 100644
index 00000000..73ceee9f
--- /dev/null
+++ b/manage/config-dialog.css
@@ -0,0 +1,102 @@
+/* config dialog */
+.config-dialog .config-heading {
+ float: right;
+ margin: -1.25rem 0 0 0;
+ font-size: 0.9em;
+}
+
+.config-dialog label {
+ display: flex;
+ padding: .75em 0;
+ align-items: center;
+}
+
+.config-dialog .select-resizer {
+ position: static;
+}
+
+.config-dialog label:first-child {
+ padding-top: 0;
+}
+
+.config-dialog label:last-child {
+ padding-bottom: 0;
+}
+
+.config-dialog label:not(:first-child) {
+ border-top: 1px dotted #ccc;
+}
+
+.config-dialog label > :first-child {
+ margin-right: 8px;
+ flex-grow: 1;
+}
+
+.config-dialog label:not([disabled]) > :first-child {
+ cursor: default;
+}
+
+.config-dialog label:not([disabled]):hover > :first-child {
+ text-shadow: 0 0 0.01px rgba(0, 0, 0, .25);
+ cursor: pointer;
+}
+
+.config-dialog input,
+.config-dialog select,
+.config-dialog .onoffswitch {
+ width: var(--onoffswitch-width);
+ margin: 0;
+ height: 2em;
+ box-sizing: border-box;
+ vertical-align: middle;
+}
+
+.config-dialog .select-resizer,
+.config-dialog select {
+ width: auto;
+ min-width: var(--onoffswitch-width);
+ max-width: 124px;
+ left: auto;
+ position: relative;
+}
+
+.config-dialog .onoffswitch {
+ height: auto;
+ margin: calc((2em - 12px) / 2) 0;
+}
+
+.config-dialog input[type="text"] {
+ padding-left: 0.25em;
+}
+
+.config-dialog label > :last-child {
+ box-sizing: border-box;
+ flex-shrink: 0;
+}
+
+.config-dialog label > :last-child:not(.onoffswitch):not(.select-resizer) > :not(:last-child) {
+ margin-right: 4px;
+}
+
+.cm-colorview::before,
+.color-swatch {
+ width: var(--onoffswitch-width) !important;
+ height: 20px !important;
+}
+
+.cm-colorview::before {
+ margin: 1px !important;
+}
+
+.color-swatch {
+ position: absolute;
+ border: 1px solid gray;
+ margin-top: -22px;
+ cursor: pointer;
+}
+
+.colorpicker-popup {
+ z-index: 2147483647 !important;
+ border: none !important;
+ box-shadow: 3px 3px 50px rgba(0,0,0,.5) !important;
+}
diff --git a/manage/manage.css b/manage/manage.css
index 60aa6ad3..c19e7097 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -865,109 +865,6 @@ input[id^="manage.newUI"] {
text-overflow: ellipsis;
}
-/* config dialog */
-.config-dialog .config-heading {
- float: right;
- margin: -1.25rem 0 0 0;
- font-size: 0.9em;
-}
-
-.config-dialog label {
- display: flex;
- padding: .75em 0;
- align-items: center;
-}
-
-.config-dialog .select-resizer {
- position: static;
-}
-
-.config-dialog label:first-child {
- padding-top: 0;
-}
-
-.config-dialog label:last-child {
- padding-bottom: 0;
-}
-
-.config-dialog label:not(:first-child) {
- border-top: 1px dotted #ccc;
-}
-
-.config-dialog label > :first-child {
- margin-right: 8px;
- flex-grow: 1;
-}
-
-.config-dialog label:not([disabled]) > :first-child {
- cursor: default;
-}
-
-.config-dialog label:not([disabled]):hover > :first-child {
- text-shadow: 0 0 0.01px rgba(0, 0, 0, .25);
- cursor: pointer;
-}
-
-.config-dialog input,
-.config-dialog select,
-.config-dialog .onoffswitch {
- width: var(--onoffswitch-width);
- margin: 0;
- height: 2em;
- box-sizing: border-box;
- vertical-align: middle;
-}
-
-.config-dialog .select-resizer,
-.config-dialog select {
- width: auto;
- min-width: var(--onoffswitch-width);
- max-width: 124px;
- left: auto;
- position: relative;
-}
-
-.config-dialog .onoffswitch {
- height: auto;
- margin: calc((2em - 12px) / 2) 0;
-}
-
-.config-dialog input[type="text"] {
- padding-left: 0.25em;
-}
-
-.config-dialog label > :last-child {
- box-sizing: border-box;
- flex-shrink: 0;
-}
-
-.config-dialog label > :last-child:not(.onoffswitch):not(.select-resizer) > :not(:last-child) {
- margin-right: 4px;
-}
-
-.cm-colorview::before,
-.color-swatch {
- width: var(--onoffswitch-width) !important;
- height: 20px !important;
-}
-
-.cm-colorview::before {
- margin: 1px !important;
-}
-
-.color-swatch {
- position: absolute;
- border: 1px solid gray;
- margin-top: -22px;
- cursor: pointer;
-}
-
-.colorpicker-popup {
- z-index: 2147483647 !important;
- border: none !important;
- box-shadow: 3px 3px 50px rgba(0,0,0,.5) !important;
-}
-
@keyframes fadein {
from {
opacity: 0;
diff --git a/msgbox/msgbox.css b/msgbox/msgbox.css
index da232671..1ababb94 100644
--- a/msgbox/msgbox.css
+++ b/msgbox/msgbox.css
@@ -132,6 +132,25 @@
margin: 0 .375rem;
}
+/* popup */
+#message-box.stylus-popup {
+ margin: 0;
+ align-items: center;
+ justify-content: center;
+}
+#message-box.stylus-popup > div {
+ max-width: 90vw;
+ top: auto;
+ right: auto;
+}
+#message-box.calculate-size {
+ white-space: nowrap;
+}
+#message-box.calculate-size > div {
+ max-width: none;
+ max-height: none;
+}
+
@keyframes fadein {
from {
opacity: 0;
diff --git a/msgbox/msgbox.js b/msgbox/msgbox.js
index cbe3b44f..839da3d1 100644
--- a/msgbox/msgbox.js
+++ b/msgbox/msgbox.js
@@ -12,6 +12,25 @@ function messageBox({
bindGlobalListeners();
createElement();
document.body.appendChild(messageBox.element);
+ if (location.href.includes('popup.html')) {
+ messageBox.isPopup = true;
+ messageBox.element.classList.add('stylus-popup');
+
+ // calculate size
+ messageBox.element.classList.add('calculate-size');
+ const {offsetWidth, offsetHeight} = messageBox.element.children[0];
+ messageBox.element.classList.remove('calculate-size');
+
+ // for colorpicker
+ const MIN_WIDTH = 350;
+ const MIN_HEIGHT = 250;
+
+ const width = Math.max(Math.min(offsetWidth / 0.9 + 2, 800), MIN_WIDTH);
+ const height = Math.max(Math.min(offsetHeight / 0.9 + 2, 600), MIN_HEIGHT);
+
+ document.body.style.minWidth = `${width}px`;
+ document.body.style.minHeight = `${height}px`;
+ }
if (onshow) {
onshow(messageBox.element);
}
@@ -96,6 +115,10 @@ function messageBox({
messageBox.element.remove();
messageBox.element = null;
messageBox.resolve = null;
+ if (messageBox.isPopup) {
+ document.body.style.minWidth = '';
+ document.body.style.minHeight = '';
+ }
}
}
diff --git a/popup.html b/popup.html
index f2710b62..c1c725b9 100644
--- a/popup.html
+++ b/popup.html
@@ -4,7 +4,6 @@
-