organize assets like images and stylesheets

src/assets/css/index.css

@@ -0,0 +1,351 @@
+html {
+  font-size: 1rem;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont;
+}
+*,
+a,
+button {
+  cursor: default;
+  user-select: none;
+}
+
+body {
+  color: #6e6c6f;
+  margin: 0px;
+  user-select: none;
+  overflow-x: hidden;
+}
+a {
+  text-decoration: none;
+}
+.red {
+  color: #eb6b5e;
+}
+.green {
+  color: #61c650;
+}
+.left {
+  float: left;
+}
+.right {
+  float: right;
+}
+
+#main {
+  box-sizing: border-box;
+  display: grid;
+  width: 100%;
+  height: 100vh;
+  grid-template-columns: 270px 1fr;
+}
+.col {
+  border-right: rgba(0, 0, 0, 0.5) 1px solid;
+  height: 100vh !important;
+  overflow: hidden;
+  box-sizing: border-box;
+  position: relative;
+}
+
+/* FIRST COL */
+#device-list-col {
+  background-color: transparent;
+  color: #707070;
+}
+#view-buttons-bar {
+  box-sizing: border-box;
+  text-align: right;
+  padding-left: 100px;
+  padding-right: 7px;
+  -webkit-app-region: drag;
+  z-index: 1000;
+}
+#view-buttons-bar .active {
+  background-color: rgba(255, 255, 255, 0.3);
+  color: white;
+  border: #61c650;
+  border-style: solid;
+}
+#view-buttons-bar button {
+  background-color: rgba(255, 255, 255, 0.07);
+  width: 26px;
+  border-radius: 10px;
+  font-size: 0.8rem;
+}
+#view-buttons-bar button:hover {
+  background-color: rgba(255, 255, 255, 0.25);
+}
+
+#device-list {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0px 10px;
+}
+#device-list div {
+  pointer-events: none;
+}
+#device-list .device {
+  box-sizing: border-box;
+  clear: both;
+  display: block;
+  width: 100%;
+  height: 40px;
+  padding: 10px 5px;
+  overflow: hidden;
+  border-radius: 5px;
+}
+#device-list .device.active-device {
+  /*background-color: #0e5ccd;*/
+  /*background-color: #c9961f;*/
+  background-color: rgba(255, 255, 255, 0.2);
+}
+#device-list .status {
+  float: left;
+  width: 25px;
+  font-size: 18px;
+}
+#device-list .type {
+  float: left;
+  width: 30px;
+  color: #f6bd26;
+}
+#device-list .name {
+  position: relative;
+  left: 0px;
+  color: white;
+  font-weight: 600;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+#device-list h3.init {
+  margin: 0px auto;
+  padding-top: 200px;
+  text-align: center;
+  font-weight: 300;
+  font-size: 16px;
+  width: 210px;
+  pointer-events: none;
+}
+#device-inspector {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+}
+#device-tools {
+  /* position: absolute;
+  bottom: 210px;
+  left: 0px;*/
+  width: 262px;
+  height: 30px;
+  padding-right: 10px;
+  /*background: linear-gradient(#2f2f2f 0%, #2c2c2c 100%);*/
+  background-color: rgba(0, 0, 0, 0.2);
+  text-align: center;
+  border-top: rgba(0, 0, 0, 0.3) 1px solid;
+  /*border-bottom: #3a3a3a 1px solid;*/
+}
+#device-tools select {
+  text-align: center;
+}
+
+#device-settings {
+  height: 300px;
+  padding: 5px;
+  color: white;
+  font-weight: 300;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+#device-settings th {
+  text-align: right;
+  padding-right: 3px;
+  color: white;
+  font-weight: normal;
+}
+#device-settings td {
+  padding: 6px;
+}
+#device-settings-table {
+  display: none;
+}
+#device-settings h3 {
+  padding-top: 90px;
+  text-align: center;
+  font-weight: 300;
+}
+#device-settings #device-settings-name,
+#device-settings #device-settings-ip,
+#device-settings #device-settings-plugin-dropdown {
+  width: 170px;
+}
+#device-settings #device-settings-port {
+  width: 70px;
+}
+
+/* SECOND COL */
+#all-devices {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.device-pin {
+  position: absolute;
+  right: 15px;
+  top: 4px;
+  height: 20px;
+  padding: inherit;
+}
+.device-wrapper {
+  box-sizing: border-box;
+  border: black 1px solid;
+  padding: 2px;
+}
+.draw-area {
+  height: 100%;
+  overflow-y: scroll;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+.active-device-outline {
+  padding: 0px;
+  border: #fdea08 3px solid;
+}
+
+input {
+  display: block;
+  box-sizing: content-box;
+  background-color: rgba(0, 0, 0, 0.2);
+  height: 28px;
+  padding: 2px 6px;
+  margin: 0px;
+  border: rgba(255, 255, 255, 0.1) 1px solid;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: text;
+}
+select {
+  display: block;
+  box-sizing: content-box;
+  background-color: rgba(255, 255, 255, 0.15);
+  height: 28px;
+  padding: 2px 6px;
+  margin: 0px;
+  border: rgba(255, 255, 255, 0.1) 1px solid;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
+}
+select option {
+  /* these styles don't affect macOS but are important for Windows! */
+  text-align: left;
+  background-color: #333333;
+}
+input:focus,
+select:focus {
+  outline: #fdea08 2px solid;
+  color: white;
+}
+input[type='checkbox'] {
+  position: relative;
+  height: 14px;
+  width: 14px;
+  padding: 2px;
+  -webkit-appearance: none;
+  cursor: default;
+}
+input[type='checkbox']:checked {
+  background-color: #616064;
+}
+input[type='checkbox']:checked:after {
+  content: '\2713';
+  font-size: 18px;
+  position: absolute;
+  top: -1px;
+  left: 1px;
+  color: white;
+}
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+input:disabled {
+  color: gray;
+  cursor: not-allowed;
+}
+button,
+select.button {
+  box-sizing: content-box;
+  width: 40px;
+  height: 25px;
+  margin-top: 7px;
+  margin-bottom: 7px;
+  margin-left: 4px;
+  border: none;
+  outline: none;
+  padding: 0px;
+
+  color: white;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  font-size: 1rem;
+  user-select: none;
+}
+button:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+button:focus {
+  outline: none;
+}
+button:disabled {
+  background: rgba(255, 255, 255, 0.03);
+}
+button img {
+  height: 18px;
+}
+
+select.button:focus {
+  outline: none;
+}
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons'), local('MaterialIcons-Regular'),
+    url(../font/MaterialIcons-Regular.ttf) format('truetype');
+}
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px; /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}
+
+/* only allow select on input fields */
+body :not(input):not(select):not(textarea) {
+  user-select: none;
+}

src/assets/css/plugin_default.css

@@ -0,0 +1,121 @@
+body {
+  font-family: system-ui;
+  margin: 0px;
+  margin-top: 40px;
+  user-select: none;
+  visibility: visible !important;
+  max-width: 100%;
+  padding: 10px;
+}
+header {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  height: 33px;
+  width: 100%;
+  box-sizing: border-box;
+  padding-right: 34px;
+  overflow: hidden;
+  background-color: #111111;
+  border-bottom: black 1px solid;
+  -webkit-user-select: none;
+  -webkit-app-region: drag;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: white;
+}
+
+header h1,
+header h2 {
+  margin: 4px;
+  margin-left: 20px;
+  font-weight: normal;
+  font-size: 18px;
+  float: left;
+  height: 24px;
+  overflow: hidden;
+}
+header h2 {
+  color: #b6b6b6;
+}
+
+table.cv-table {
+  border: none;
+  table-layout: fixed;
+  border-collapse: collapse;
+  color: #dddddd;
+  font-size: 15px;
+}
+table.cv-table th {
+  padding: 6px 16px;
+  color: #969696;
+  text-align: left;
+  border-bottom: #555 1px solid;
+  border-bottom: #555 1px solid;
+  font-weight: normal;
+  background-color: #1e1e1e;
+}
+table.cv-table tr:nth-child(odd) {
+  background-color: #292929;
+}
+table.cv-table tr td:first-child {
+  padding-left: 10px;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+}
+table.cv-table tr td:last-child {
+  padding-right: 10px;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+table.cv-table td {
+  padding: 7px 16px;
+}
+
+.not-responding {
+  color: white;
+}
+.not-responding em {
+  background-color: #3f3f3f;
+  padding: 2px 10px;
+  display: inline-block;
+  border-radius: 5px;
+}
+.not-responding hr {
+  margin-top: 100px;
+  border-color: #333;
+}
+
+.device-info {
+  color: #aaa;
+}
+.device-info h4,
+.device-info h2 {
+  color: #bbb;
+}
+.device-info em {
+  background-color: #3f3f3f;
+  padding: 2px 5px;
+  display: inline-block;
+  border-radius: 5px;
+  color: #fdea08;
+  margin: 1px;
+}
+button {
+  display: block;
+  box-sizing: content-box;
+  background-color: rgba(255, 255, 255, 0.15);
+  height: 28px;
+  padding: 2px 20px;
+  margin: 0px;
+  border: rgba(255, 255, 255, 0.1) 1px solid;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 500;
+}