iv123 lin / Mbed OS connected-lights

sample_pir-lights_rgb

Dependencies:   ChainableLED

webapp/public/style.css@0:7a352727249b, 2017-06-18 (annotated)

Committer:
iv123
Date:
Sun Jun 18 10:14:56 2017 +0000
Revision:
0:7a352727249b
Initial commit

Who changed what in which revision?

UserRevisionLine numberNew contents of line
iv123 0:7a352727249b 1 #header { margin-top: 20px; }
iv123 0:7a352727249b 2 #logo { width: 167px; }
iv123 0:7a352727249b 3 body {
iv123 0:7a352727249b 4 font-family: 'Open Sans', Arial, sans-serif;
iv123 0:7a352727249b 5 margin: 0;
iv123 0:7a352727249b 6 padding: 0 20px;
iv123 0:7a352727249b 7 font-weight: 300;
iv123 0:7a352727249b 8 color: rgb(80, 79, 77);
iv123 0:7a352727249b 9 font-size: 16px;
iv123 0:7a352727249b 10 }
iv123 0:7a352727249b 11 h1 {
iv123 0:7a352727249b 12 background-color: #159ab5;
iv123 0:7a352727249b 13 background-image: url('/blueband_BG.png');
iv123 0:7a352727249b 14 background-position-x: right;
iv123 0:7a352727249b 15 background-size: 140%;
iv123 0:7a352727249b 16 color: white;
iv123 0:7a352727249b 17 font-weight: 400;
iv123 0:7a352727249b 18 font-size: 48px;
iv123 0:7a352727249b 19 margin: 20px -20px;
iv123 0:7a352727249b 20 padding: 30px 20px;
iv123 0:7a352727249b 21 }
iv123 0:7a352727249b 22 a {
iv123 0:7a352727249b 23 color: rgb(232, 146, 45);
iv123 0:7a352727249b 24 text-decoration: none;
iv123 0:7a352727249b 25 }
iv123 0:7a352727249b 26 a:hover { color: #008CBA; }
iv123 0:7a352727249b 27 p, li {
iv123 0:7a352727249b 28 line-height: 23px;
iv123 0:7a352727249b 29 }
iv123 0:7a352727249b 30 h2 {
iv123 0:7a352727249b 31 font-weight: 300;
iv123 0:7a352727249b 32 }
iv123 0:7a352727249b 33 #lights { padding: 0; margin-top: -20px; }
iv123 0:7a352727249b 34 #lights li {
iv123 0:7a352727249b 35 display: flex;
iv123 0:7a352727249b 36 flex-direction: row;
iv123 0:7a352727249b 37 margin: 0;
iv123 0:7a352727249b 38 padding: 20px 0;
iv123 0:7a352727249b 39 border-bottom: solid 1px lightgray;
iv123 0:7a352727249b 40 }
iv123 0:7a352727249b 41 .color {
iv123 0:7a352727249b 42 min-width: 25vw;
iv123 0:7a352727249b 43 height: 25vw;
iv123 0:7a352727249b 44 margin-right: 5vw;
iv123 0:7a352727249b 45 }
iv123 0:7a352727249b 46 .right-col {
iv123 0:7a352727249b 47 width: 100%;
iv123 0:7a352727249b 48 max-width: calc(100% - 30vw);
iv123 0:7a352727249b 49 }
iv123 0:7a352727249b 50 .endpoint {
iv123 0:7a352727249b 51 margin: 0;
iv123 0:7a352727249b 52 white-space: nowrap;
iv123 0:7a352727249b 53 overflow: hidden;
iv123 0:7a352727249b 54 text-overflow: ellipsis;
iv123 0:7a352727249b 55 font-weight: 400;
iv123 0:7a352727249b 56 font-size: 20px;
iv123 0:7a352727249b 57 padding-bottom: 2px;
iv123 0:7a352727249b 58 }
iv123 0:7a352727249b 59 .timeout {
iv123 0:7a352727249b 60 margin: 8px 0;
iv123 0:7a352727249b 61 }
iv123 0:7a352727249b 62 .status {
iv123 0:7a352727249b 63 display: flex;
iv123 0:7a352727249b 64 flex-direction: row;
iv123 0:7a352727249b 65 border: solid 1px gray;
iv123 0:7a352727249b 66 border-radius: 4px;
iv123 0:7a352727249b 67 }
iv123 0:7a352727249b 68 .status div {
iv123 0:7a352727249b 69 padding: 6px;
iv123 0:7a352727249b 70 flex-grow: 1;
iv123 0:7a352727249b 71 width: 33%;
iv123 0:7a352727249b 72 text-align: center;
iv123 0:7a352727249b 73 border-right: solid 1px gray;
iv123 0:7a352727249b 74 }
iv123 0:7a352727249b 75 .status div.selected {
iv123 0:7a352727249b 76 background: lightgray;
iv123 0:7a352727249b 77 }
iv123 0:7a352727249b 78 .status div:last-child {
iv123 0:7a352727249b 79 border-right: none;
iv123 0:7a352727249b 80 }
iv123 0:7a352727249b 81 #color-picker-overlay {
iv123 0:7a352727249b 82 position: absolute;
iv123 0:7a352727249b 83 top: 0;
iv123 0:7a352727249b 84 left: 0;
iv123 0:7a352727249b 85 height: 100%;
iv123 0:7a352727249b 86 width: 100%;
iv123 0:7a352727249b 87 background: rgba(0, 0, 0, 0.7);
iv123 0:7a352727249b 88 display: flex;
iv123 0:7a352727249b 89 align-items: center;
iv123 0:7a352727249b 90 justify-content: center;
iv123 0:7a352727249b 91 flex-direction: column;
iv123 0:7a352727249b 92 }
iv123 0:7a352727249b 93 #color-picker-overlay h2 {
iv123 0:7a352727249b 94 color: white;
iv123 0:7a352727249b 95 }
iv123 0:7a352727249b 96 #notification {
iv123 0:7a352727249b 97 position: fixed;
iv123 0:7a352727249b 98 bottom: 20px;
iv123 0:7a352727249b 99 background: rgba(0,0,0,0.6);
iv123 0:7a352727249b 100 color: white;
iv123 0:7a352727249b 101 border-radius: 10px;
iv123 0:7a352727249b 102 display: inline-block;
iv123 0:7a352727249b 103 padding: 10px 20px;
iv123 0:7a352727249b 104 cursor: pointer;
iv123 0:7a352727249b 105 transition: all 0.6s ease-out;
iv123 0:7a352727249b 106 left: 50%;
iv123 0:7a352727249b 107 transform: translateX(-50%);
iv123 0:7a352727249b 108 }