Replace?
@@ -205,9 +205,12 @@
-
-
-
+
diff --git a/src/scripts/events.js b/src/scripts/events.js
index 2f42208..39b81d8 100644
--- a/src/scripts/events.js
+++ b/src/scripts/events.js
@@ -3,7 +3,8 @@ getSavedSessionIDs();
document.addEventListener("click", (e) => {
if (e.button == 0) { // Left click
const target = e.target;
- const action = target.name;
+ const action = target.getAttribute("name");
+
// Set selection first before doing any actions...
if (target.tagName == "LI" && target.className.includes("sessionLI")) {
diff --git a/src/scripts/utils.js b/src/scripts/utils.js
index 930454b..4f6ff91 100644
--- a/src/scripts/utils.js
+++ b/src/scripts/utils.js
@@ -60,7 +60,7 @@ const generateSelectionWindow = (json = "", keys = null, keysLength = 0) => {
selAll.addEventListener("click", function (eve) {
toggleSelect(eve.target, "Win" + i);
});
- h2Tag.appendChild(h2Txt);
+ h2Tag.prepend(h2Txt);
store.forEach(tab => {
let liClone = document.importNode(liTemplate.content, true);
diff --git a/src/styles/styles.css b/src/styles/styles.css
index 24b06df..50e5c91 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -4,20 +4,20 @@ body {
overflow: hidden;
}
-ul, li { list-style: none; }
-
-input[type=image] {
- width: 2.5em;
- height: 2.5em;
- padding: 0.4em;
- background-color: #ffffff;
- color: #000000;
+ul, li {
+ list-style: none;
}
-input[type=image]:hover {
- cursor: pointer;
- background-color: #a3b83b;
- color: #ffffff;
+li {
+ margin: 0.5em 0em;
+
+ -webkit-touch-callout: none; /* iOS Safari */
+ -webkit-user-select: none; /* Safari */
+ -khtml-user-select: none; /* Konqueror HTML */
+ -moz-user-select: none; /* Old versions of Firefox */
+ -ms-user-select: none; /* Internet Explorer/Edge */
+ user-select: none; /* Non-prefixed version, currently
+ supported by Chrome, Opera and Firefox */
}
@@ -63,72 +63,19 @@ input[type=image]:hover {
overflow: auto;
}
-#editSelectionContainer {
- width: 100%;
- height: auto;
- white-space: nowrap;
- display: block;
- overflow-x: auto;
-}
-
-#editSelectionContainer > ul {
- display: block;
- overflow: auto;
-}
-
-#editSelectionContainer > ul > li {
- float: left;
-}
-
#inputId {
display: none;
}
-#selectAll {
- margin-bottom: 1.5em;
-}
-
-#lableTag {
- top: 48%;
- margin: 0 auto;
- color: rgba(255, 255, 255, 0.5);
-}
-
/* Classes */
-.modal {
- width: 650px;
- height: auto;
-}
-
-.scroller {
- scrollbar-color: #00000084 #ffffff64;
- scrollbar-width: thin;
-}
-
+/* Plugin page */
.collection {
padding-top: 1em;
padding-bottom: 1em;
}
-.download-container {
- width: 100%;
- height: 100%;
- background-image: url('../images/icons/import.png');
- background-repeat: no-repeat;
- background-position: center;
- text-align: center;
- background-color: rgba(41, 95, 115, 0.85);
- transition: 0.6s;
-}
-
-.download-container:hover {
- transition: 0.6s;
- background-color: rgba(41, 95, 115, 0.65);
- cursor: pointer;
-}
-
.sessionLI {
background-color: #0a1827;
color: #ffffff;
@@ -147,7 +94,33 @@ input[type=image]:hover {
box-shadow: 0px 5px 5px 5px #444444;
}
-.icon {
- width: 25px;
- height: 25px;
+.modal {
+ width: 650px;
+ height: auto;
+}
+
+.scroller {
+ scrollbar-color: #00000084 #ffffff64;
+ scrollbar-width: thin;
+}
+
+
+
+/* Import page */
+
+.import-container {
+ width: 100%;
+ height: 100%;
+ background-image: url('../images/icons/import.png');
+ background-repeat: no-repeat;
+ background-position: center;
+ text-align: center;
+ background-color: rgba(41, 95, 115, 0.85);
+ transition: 0.6s;
+}
+
+.import-container:hover {
+ transition: 0.6s;
+ background-color: rgba(41, 95, 115, 0.65);
+ cursor: pointer;
}