diff --git a/browserAction/browserAction.css b/browserAction/browserAction.css
index 64b6894..d2288e1 100644
--- a/browserAction/browserAction.css
+++ b/browserAction/browserAction.css
@@ -7,39 +7,6 @@ div {
display: block;
}
-.action {
- display: block;
- padding: 0.5em;
- margin: 0;
- background-color: transparent;
- background-image: none;
- border: 1px solid currentColor;
- cursor: pointer;
- width: 100%;
- text-align: left;
- height: auto;
- z-index: 1;
- position: relative;
- white-space: nowrap;
- color: currentColor;
-}
-
-.action + .action {
- border-top-width: 0;
-}
-
-.action:first-child {
- border-radius: 3px 3px 0 0;
-}
-
-.action:last-child {
- border-radius: 0 0 3px 3px;
-}
-
-.action:active, .action:hover, .action:focus {
- z-index: 10;
-}
-
.action .icon {
vertical-align: text-bottom;
height: 19px;
@@ -50,8 +17,6 @@ div {
display: inline-block;
}
-.search {
- box-sizing: border-box;
+.action.search {
padding-left: calc(0.5em + 19px + 0.25em);
- cursor: initial;
}
\ No newline at end of file
diff --git a/browserAction/browserAction.html b/browserAction/browserAction.html
index 9770270..f4065dd 100644
--- a/browserAction/browserAction.html
+++ b/browserAction/browserAction.html
@@ -6,7 +6,7 @@
-
+
diff --git a/browserAction/browserAction.js b/browserAction/browserAction.js
index 59b7dee..20169f2 100644
--- a/browserAction/browserAction.js
+++ b/browserAction/browserAction.js
@@ -7,7 +7,7 @@
const extension = require("../lib/extension");
const logging = require("../lib/logging");
const settings = require("../lib/settings");
- require("../lib/theme").init("browserAction");
+ require("../lib/theme").init();
logging.message("Opened browser action");
settings.onloaded(function(){
diff --git a/lib/theme.js b/lib/theme.js
index 1f65bf5..08ada55 100644
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -19,7 +19,7 @@
var baseLink = document.createElement("link");
baseLink.href = `${basePath}/base/layout.css`;
- baseLink.rel = "alternative";
+ baseLink.rel = "stylesheet";
baseLink.type = "text/css";
document.head.appendChild(baseLink);
const links = ["layout", page].filter(function(file){
diff --git a/pageAction/gui.js b/pageAction/gui.js
index 5204a08..a4a51ce 100644
--- a/pageAction/gui.js
+++ b/pageAction/gui.js
@@ -71,6 +71,8 @@
document.body.innerHTML = "";
document.body.className = "modal";
document.body.appendChild(document.createTextNode(messageText));
+ const stack = document.createElement("div");
+ stack.className = "stackedInputs";
choices.forEach(function(choice){
const button = document.createElement("button");
button.addEventListener("click", function(){
@@ -78,8 +80,9 @@
message("modal choice closed with value", choice.value || choice);
});
button.appendChild(document.createTextNode(choice.text || choice));
- document.body.appendChild(button);
+ stack.appendChild(button);
});
+ document.body.append(stack);
});
};
@@ -89,16 +92,19 @@
document.body.innerHTML = "";
document.body.className = "modal";
document.body.appendChild(document.createTextNode(messageText));
- var input = document.createElement("input");
+ const stack = document.createElement("div");
+ stack.className = "stackedInputs";
+ const input = document.createElement("input");
input.value = defaultValue;
- document.body.appendChild(input);
- var button = document.createElement("button");
+ stack.appendChild(input);
+ const button = document.createElement("button");
button.textContent = "OK";
button.addEventListener("click", function(){
resolve(input.value);
message("modal prompt closed with value", input.value);
});
- document.body.appendChild(button);
+ stack.appendChild(button);
+ document.body.append(stack);
});
};
}());
\ No newline at end of file
diff --git a/pageAction/pageAction.css b/pageAction/pageAction.css
index 2b24c3e..7a97c6c 100644
--- a/pageAction/pageAction.css
+++ b/pageAction/pageAction.css
@@ -5,7 +5,6 @@
body {
margin: 0.5em;
padding: 2px;
- padding-right: 23px;
padding-bottom: 1.5em;
white-space: nowrap;
position: relative;
@@ -15,6 +14,7 @@ body {
list-style: none;
padding: 0;
margin: 0;
+ float: left;
}
button.action.isIcon {
@@ -60,9 +60,7 @@ button.action img {
#globalActions {
- position: absolute;
- right: 0;
- top: 0;
+ float: right;
width: 23px;
text-align: right;
line-height: 0;
@@ -134,39 +132,6 @@ body.modal {
padding: 2px;
}
-.modal input {
- display: block;
- box-sizing: border-box;
- width: 100%;
-}
-
-.modal button {
- display: block;
- padding: 0.5em;
- background-color: transparent;
- border: 1px solid currentColor;
- cursor: pointer;
- width: 100%;
- text-align: left;
- height: auto;
- z-index: 1;
- position: relative;
- white-space: nowrap;
- color: currentColor;
-}
-
-.modal button + .modal button {
- border-top-width: 0;
-}
-
-.modal button:first-child {
- border-radius: 3px 3px 0 0;
-}
-
-.modal button:last-child {
- border-radius: 0 0 3px 3px;
-}
-
-.modal button:active, .modal button:hover, .modal button:focus {
- z-index: 10;
+body.modal .stackedInputs {
+ margin-top: 0.5em;
}
\ No newline at end of file
diff --git a/themes/base/layout.css b/themes/base/layout.css
index a4a9ef5..783340a 100644
--- a/themes/base/layout.css
+++ b/themes/base/layout.css
@@ -62,4 +62,46 @@ input[type=checkbox]:checked::before {
height: 100%;
width: 100%;
vertical-align: top;
+}
+
+/* Input stack */
+
+.stackedInputs > * {
+ display: block;
+ padding: 0.5em;
+ margin: 0;
+ background-color: transparent;
+ background-image: none;
+ border: 1px solid var(--stacked-inputs-border-color);
+ cursor: pointer;
+ width: 100%;
+ text-align: left;
+ height: auto;
+ z-index: 1;
+ position: relative;
+ white-space: nowrap;
+ color: currentColor;
+}
+
+.stackedInputs > * + * {
+ border-top-width: 0;
+}
+
+.stackedInputs > *:first-child {
+ border-radius: 3px 3px 0 0;
+}
+
+.stackedInputs > *:last-child {
+ border-radius: 0 0 3px 3px;
+}
+
+.stackedInputs > *:active, .stackedInputs > *:hover, .stackedInputs > *:focus {
+ z-index: 10;
+ background-color: var(--stacked-inputs-focus-color);
+}
+
+.stackedInputs > input {
+ box-sizing: border-box;
+ cursor: initial;
+ background-color: var(--input-background-color);
}
\ No newline at end of file
diff --git a/themes/colorful/browserAction.css b/themes/colorful/browserAction.css
deleted file mode 100644
index 9c77803..0000000
--- a/themes/colorful/browserAction.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.action {
- border-color: rgb(255, 0, 255);
-}
-
-.action:active, .action:hover, .action:focus {
- background-color: rgb(255, 196, 0);
-}
\ No newline at end of file
diff --git a/themes/colorful/layout.css b/themes/colorful/layout.css
index a8ac47e..0939cd5 100644
--- a/themes/colorful/layout.css
+++ b/themes/colorful/layout.css
@@ -4,4 +4,6 @@ body {
--text-color: rgb(102, 42, 34);
--link-color: rgb(5, 197, 188);
--button-background-image: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 100%);
+ --stacked-inputs-border-color: rgb(255, 0, 255);
+ --stacked-inputs-focus-color: rgb(255, 196, 0);
}
\ No newline at end of file
diff --git a/themes/colorful/pageAction.css b/themes/colorful/pageAction.css
index 29785da..2a39fce 100644
--- a/themes/colorful/pageAction.css
+++ b/themes/colorful/pageAction.css
@@ -8,12 +8,4 @@
.hasHiddenActions:hover, .hasHiddenActions .actions {
background-color: rgb(208, 255, 0);
-}
-
-.modal button {
- border-color: rgb(208, 255, 0);
-}
-
-.modal button:active, .modal button:hover, .modal button:focus {
- background-color: rgb(208, 255, 0);
}
\ No newline at end of file
diff --git a/themes/dark/browserAction.css b/themes/dark/browserAction.css
deleted file mode 100644
index 638b341..0000000
--- a/themes/dark/browserAction.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.action {
- border-color: rgb(92, 92, 97);
-}
-
-.action:active, .action:hover, .action:focus {
- background-color: rgb(92, 92, 97);
-}
\ No newline at end of file
diff --git a/themes/dark/layout.css b/themes/dark/layout.css
index ac151c4..10c54cd 100644
--- a/themes/dark/layout.css
+++ b/themes/dark/layout.css
@@ -4,4 +4,6 @@ body {
--text-color: rgb(249, 249, 250);
--link-color: lightblue;
--button-background-image: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.1) 100%);
+ --stacked-inputs-border-color: rgb(92, 92, 97);
+ --stacked-inputs-focus-color: rgb(92, 92, 97);
}
\ No newline at end of file
diff --git a/themes/dark/pageAction.css b/themes/dark/pageAction.css
index 9d64fb8..20eac3e 100644
--- a/themes/dark/pageAction.css
+++ b/themes/dark/pageAction.css
@@ -8,12 +8,4 @@
.hasHiddenActions:hover, .hasHiddenActions .actions {
background-color: rgb(92, 92, 97);
-}
-
-.modal button {
- border-color: rgb(92, 92, 97);
-}
-
-.modal button:active, .modal button:hover, .modal button:focus {
- background-color: rgb(92, 92, 97);
}
\ No newline at end of file
diff --git a/themes/default/browserAction.css b/themes/default/browserAction.css
deleted file mode 100644
index 5eff920..0000000
--- a/themes/default/browserAction.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.action {
- border-color: rgb(185, 185, 185);
-}
-
-.action:active, .action:hover, .action:focus {
- background-color: rgb(236, 237, 236);
-}
\ No newline at end of file
diff --git a/themes/default/layout.css b/themes/default/layout.css
index 53aefa2..5e44443 100644
--- a/themes/default/layout.css
+++ b/themes/default/layout.css
@@ -4,4 +4,6 @@ body {
--link-color: blue;
--input-background-color: rgb(255, 255, 255);
--button-background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.1) 100%);
+ --stacked-inputs-border-color: rgb(185, 185, 185);
+ --stacked-inputs-focus-color: rgb(236, 237, 236);
}
\ No newline at end of file
diff --git a/themes/default/pageAction.css b/themes/default/pageAction.css
index e2a47ab..33bf76e 100644
--- a/themes/default/pageAction.css
+++ b/themes/default/pageAction.css
@@ -8,12 +8,4 @@
.hasHiddenActions:hover, .hasHiddenActions .actions {
background-color: rgb(236, 237, 236);
-}
-
-.modal button {
- border-color: rgb(236, 237, 236);
-}
-
-.modal button:active, .modal button:hover, .modal button:focus {
- background-color: rgb(236, 237, 236);
}
\ No newline at end of file
diff --git a/themes/light/browserAction.css b/themes/light/browserAction.css
deleted file mode 100644
index f0e4f60..0000000
--- a/themes/light/browserAction.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.action {
- border-color: rgb(222, 222, 222);
-}
-
-.action:active, .action:hover, .action:focus {
- background-color: rgb(240, 240, 240);
-}
\ No newline at end of file
diff --git a/themes/light/layout.css b/themes/light/layout.css
index 01fa1ca..7c9a91a 100644
--- a/themes/light/layout.css
+++ b/themes/light/layout.css
@@ -4,4 +4,6 @@ body {
--text-color: rgb(12, 12, 13);
--link-color: blue;
--button-background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.1) 100%);
+ --stacked-inputs-border-color: rgb(222, 222, 222);
+ --stacked-inputs-focus-color: rgb(240, 240, 240);
}
\ No newline at end of file
diff --git a/themes/light/pageAction.css b/themes/light/pageAction.css
index 4ae3885..524e42a 100644
--- a/themes/light/pageAction.css
+++ b/themes/light/pageAction.css
@@ -8,12 +8,4 @@
.hasHiddenActions:hover, .hasHiddenActions .actions {
background-color: rgb(240, 240, 240);
-}
-
-.modal button {
- border-color: rgb(240, 240, 240);
-}
-
-.modal button:active, .modal button:hover, .modal button:focus {
- background-color: rgb(240, 240, 240);
}
\ No newline at end of file