Add files via upload

Author: flatsiedatsie

css/extension.css

@@ -47,6 +47,25 @@
     cursor:pointer;
 }
 
+.extension-buttoninput-busy-scanning #extension-buttoninput-add-button:before{
+    content: 'PRESS A BUTTON ';
+    position: absolute;
+    right: 5.6rem;
+    top: 1rem;
+    width: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(255, 255, 255, .3);
+    /* padding: 1rem; */
+    height: 3.6rem;
+    border-bottom-left-radius: .5rem;
+    border-top-left-radius: .5rem;
+    color: white;
+	font-size:80%;
+}
+
+
 #extension-buttoninput-save-button{
 	position: fixed;
 	bottom: 2rem;
@@ -500,30 +519,35 @@ span.extension-buttoninput-overview-value{
 
 
 
-.extension-buttoninput-overview-syn:before{
-	content:'🪃';
-	display:inline-block;
-	margin-right:1.5rem;
-}
+
+
+
+#extension-buttoninput-overview h2:before,
 .extension-buttoninput-overview-key:before,
 .extension-buttoninput-overview-btn:before{
 	content:'🔘';
 	display:inline-block;
 	margin-right:1.5rem;
 }
-.extension-buttoninput-overview-abs:before{
+#extension-buttoninput-overview .extension-buttoninput-overview-abs:before{
 	content:'💫';
 	display:inline-block;
 	margin-right:1.5rem;
 }
 
-.extension-buttoninput-overview-msc:before{
+#extension-buttoninput-overview .extension-buttoninput-overview-syn:before{
+	content:'🪃';
+	display:inline-block;
+	margin-right:1.5rem;
+}
+
+#extension-buttoninput-overview .extension-buttoninput-overview-msc:before{
 	content:'🧪';
 	display:inline-block;
 	margin-right:1.5rem;
 }
 
-.extension-buttoninput-overview-ff:before{
+#extension-buttoninput-overview .extension-buttoninput-overview-ff:before{
 	content:'✨';
 	display:inline-block;
 	margin-right:1.5rem;
@@ -535,7 +559,7 @@ span.extension-buttoninput-overview-value{
 .extension-buttoninput-overview-abs,
 .extension-buttoninput-overview-rel,
 .extension-buttoninput-overview-msc{
-	padding-left:.5rem;
+	/*padding-left:.5rem;*/
 }
 
 
@@ -609,7 +633,23 @@ span.extension-buttoninput-overview-value{
 
 
 
+#extension-buttoninput-footer{
+	padding-top:.5rem;
+	display:flex;
+	flex-wrap:wrap;
+	justify-content: center;
+}
 
+#extension-buttoninput-footer > div{
+	flex-basis: 33.3%;
+	min-width:150px;
+}
+
+#extension-buttoninput-footer > div p{
+	padding:0 1.5rem 0 .5rem;
+	opacity:.6;
+	font-style:italic;
+}
 
 
 #extension-buttoninput-not-ready-warning,
@@ -632,6 +672,7 @@ span.extension-buttoninput-overview-value{
 }
 
 
+
 @media screen and (max-width: 800px) {
 
     .extension-buttoninput-item-sentence{

views/content.html

@@ -23,21 +23,23 @@ <h1>Missing permission to read and control devices</h1>
 
 		<div id="extension-buttoninput-overview"></div>
 
-
-        <div id="extension-buttoninput-rescan-button-container">
-            <p>Rescan will clear all recorded input data, and re-detect all currently plugged in devices.</p>
-			<button id="extension-buttoninput-rescan-button" class="text-button">Rescan</button>
-        </div>
+		<div id="extension-buttoninput-footer">
+	        <div id="extension-buttoninput-rescan-button-container">
+	            <button id="extension-buttoninput-rescan-button" class="text-button">Rescan</button>
+				<p>Rescan will clear all recorded input data, and re-detect all currently plugged in devices.</p>
+	        </div>
 
-        <div id="extension-buttoninput-rescan-button-container" class="extension-buttoninput-show-if-developer">
-            <p>Get the latest button presses data</p>
-			<button id="extension-buttoninput-update-button"  class="text-button">Update</button>
-        </div>
+	        <div id="extension-buttoninput-rescan-button-container" class="extension-buttoninput-show-if-developer">
+	            <button id="extension-buttoninput-update-button"  class="text-button">Update</button>
+				<p>Get the latest button presses data</p>
+				
+	        </div>
 
-        <div id="extension-buttoninput-show-all-button-container">
-            <p>Show all potential buttons</p>
-			<button id="extension-buttoninput-show-all-button" class="text-button">Show all</button>
-        </div>
+	        <div id="extension-buttoninput-show-all-button-container">
+				<button id="extension-buttoninput-show-all-button" class="text-button">Show all</button>
+				<p>Show all potential buttons</p>
+	        </div>
+		</div>