Diff: webapp/public/style.css

Revision:

0:7a352727249b

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/webapp/public/style.css	Sun Jun 18 10:14:56 2017 +0000
@@ -0,0 +1,108 @@
+#header { margin-top: 20px; }
+#logo { width: 167px; }
+body {
+  font-family: 'Open Sans', Arial, sans-serif;
+  margin: 0;
+  padding: 0 20px;
+  font-weight: 300;
+  color: rgb(80, 79, 77);
+  font-size: 16px;
+}
+h1 {
+  background-color: #159ab5;
+  background-image: url('/blueband_BG.png');
+  background-position-x: right;
+  background-size: 140%;
+  color: white;
+  font-weight: 400;
+  font-size: 48px;
+  margin: 20px -20px;
+  padding: 30px 20px;
+}
+a {
+  color: rgb(232, 146, 45);
+  text-decoration: none;
+}
+a:hover { color: #008CBA; }
+p, li {
+  line-height: 23px;
+}
+h2 {
+  font-weight: 300;
+}
+#lights { padding: 0; margin-top: -20px; }
+#lights li {
+  display: flex;
+  flex-direction: row;
+  margin: 0;
+  padding: 20px 0;
+  border-bottom: solid 1px lightgray;
+}
+.color {
+  min-width: 25vw;
+  height: 25vw;
+  margin-right: 5vw;
+}
+.right-col {
+  width: 100%;
+  max-width: calc(100% - 30vw);
+}
+.endpoint {
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 400;
+  font-size: 20px;
+  padding-bottom: 2px;
+}
+.timeout {
+  margin: 8px 0;
+}
+.status {
+  display: flex;
+  flex-direction: row;
+  border: solid 1px gray;
+  border-radius: 4px;
+}
+.status div {
+  padding: 6px;
+  flex-grow: 1;
+  width: 33%;
+  text-align: center;
+  border-right: solid 1px gray;
+}
+.status div.selected {
+  background: lightgray;
+}
+.status div:last-child {
+  border-right: none;
+}
+#color-picker-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+#color-picker-overlay h2 {
+  color: white;
+}
+#notification {
+  position: fixed;
+  bottom: 20px;
+  background: rgba(0,0,0,0.6);
+  color: white;
+  border-radius: 10px;
+  display: inline-block;
+  padding: 10px 20px;
+  cursor: pointer;
+  transition: all 0.6s ease-out;
+  left: 50%;
+  transform: translateX(-50%);
+}