diff --git a/devices.css b/devices.css index 6fb0383..db6d72b 100644 --- a/devices.css +++ b/devices.css @@ -14,8 +14,27 @@ h1 { .device { display: flex; flex-direction: column; - margin: 20px 0px; + margin: 10px 0px; font-size: 1rem; + padding: 10px; + position: relative; +} + +.device.selected { + background-color: #3ea03c; +} + +.device.selected::before { + content: "\f00c"; + font-family: "Line Awesome Free"; + font-weight: 900; + position: absolute; + top: 10px; + right: 10px; +} + +.device:hover { + cursor: pointer; } .device-name{ @@ -54,9 +73,50 @@ h1 { and (orientation: portrait) { #devices { width: 100%; + max-width: 100%; } .device-id { text-overflow: ellipsis; overflow: hidden; } +} + + +#sharedDevices { + position: fixed; + bottom: 20px; + width: 80%; + left: 10%; + color: white; + overflow-wrap: anywhere; + background: #141926; + padding: 20px; + box-shadow: 0px 0px 10px 5px #00000047; + border: 1px solid #333c52; +} + +#sharedDevices span { + display: block; + margin-bottom: 10px; +} + +#sharedDevices input { + width: 100%; + padding: 5px; + +} + +span#close { + position: absolute; + top: -10px; + right: -10px; + display: block; + width: 20px; + height: 20px; + background: #457b9d; + text-align: center; + border-radius: 20px; + line-height: 20px; + font-size: 20px; + cursor: pointer; } \ No newline at end of file diff --git a/devices.html b/devices.html index e5fcff8..bcb0331 100644 --- a/devices.html +++ b/devices.html @@ -19,9 +19,15 @@
-
Device IDs are bound to a combination of domain and browser.
If you want to use electron-capture, open this URL on the electron-capture app.
-
Check for browser and camera capabilities here.
-
+
+ Device IDs are bound to a combination of domain and browser.
If + you want to use electron-capture, open this URL on the electron-capture + app. +
+
+ Check for browser and camera capabilities here. +
+

🎤 Audio Inputs

@@ -34,9 +40,16 @@
+