111

WebApp/client/public/css/main.css

@@ -0,0 +1,147 @@
+h1 {
+  border-bottom: 1px solid #ccc;
+  font-weight: 500;
+  margin: 0 0 0.8em 0;
+  padding: 0 0 0.2em 0;
+}
+
+h4 {
+  margin: 0;
+  padding: 0 0 0.2em 0;
+}
+
+body {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 300;
+  margin: 0;
+  padding: 1em;
+  word-break: break-word;
+}
+
+button {
+  margin: 20px 10px 0 0;
+  width: 130px;
+}
+
+button#gather {
+  display: block;
+}
+
+section {
+  border-bottom: 1px solid #eee;
+  margin: 0 0 1.5em 0;
+  padding: 0 0 1.5em 0;
+}
+
+section#iceServers label {
+  display: inline-block;
+  width: 150px;
+}
+
+section#iceServers input {
+  margin: 0 0 10px;
+  width: 260px;
+}
+
+select {
+  margin: 0 1em 1em 0;
+  position: relative;
+  top: -1px;
+}
+
+select#servers {
+  font-size: 1em;
+  padding: 5px;
+  width: 420px;
+}
+
+section:last-child {
+  border-bottom: none;
+  margin: 0;
+  padding: 0;
+}
+
+div#container {
+  margin: 0 auto 0 auto;
+  max-width: 60em;
+  padding: 1em 1.5em 1.3em 1.5em;
+}
+
+code {
+  padding: 0.1em 0.25em;
+  color: #444;
+  background-color: #e7edf3;
+  border-radius: 3px;
+  border: solid 1px #d6dde4;
+  font-weight: 400;
+}
+
+p {
+  color: #444;
+  font-weight: 300;
+}
+
+p#data {
+  border-top: 1px dotted #666;
+  line-height: 1.3em;
+  max-height: 1000px;
+  overflow-y: auto;
+  padding: 1em 0 0 0;
+}
+
+p.borderBelow {
+  border-bottom: 1px solid #aaa;
+  padding: 0 0 20px 0;
+}
+
+video {
+  background: #222;
+  margin: 0 0 20px 0;
+  --width: 100%;
+  width: var(--width);
+  height: calc(var(--width) * 0.75);
+}
+
+div#warning {
+  color: #8a6d3b;
+  background-color: #fcf8e3;
+  border-color: #faebcc;
+  padding: 1em;
+  border: 1px solid transparent;
+}
+
+div.box {
+  margin: 1em;
+}
+
+div#message {
+  border-top: 1px solid #666;
+  margin: 1em;
+  padding: 1em;
+}
+
+@media screen and (max-width: 650px) {
+  .highlight {
+    font-size: 1em;
+    margin: 0 0 20px 0;
+    padding: 0.2em 1em;
+  }
+  h1 {
+    font-size: 24px;
+  }
+}
+
+@media screen and (max-width: 550px) {
+  button:active {
+    background-color: darkRed;
+  }
+  h1 {
+    font-size: 22px;
+  }
+}
+
+@media screen and (max-width: 450px) {
+  h1 {
+    font-size: 20px;
+  }
+}