github.com/ghodss/etcd@v0.3.1-0.20140417172404-cc329bfa55cb/mod/dashboard/app/styles/stats.css (about) 1 .etcd-container.etcd-stats { 2 width: 100%; 3 height: 500px; 4 } 5 6 .home-container .etcd-container.etcd-stats { 7 height: 400px; 8 } 9 10 .etcd-container.etcd-stats h2 { 11 margin-top: -7px; 12 } 13 14 .etcd-container.etcd-stats table .etcd-latency { 15 width: 50%; 16 } 17 18 .etcd-container.etcd-stats .etcd-list { 19 position: absolute; 20 left: 100%; 21 min-height: 100%; 22 overflow-y: auto; 23 overflow-x: hidden; 24 top: 0px; 25 box-sizing: border-box; 26 -moz-box-sizing: border-box; 27 background-color: #fff; 28 width: 100%; 29 border-left: 1px solid #ddd; 30 } 31 32 .etcd-container.etcd-stats .etcd-list .etcd-square { 33 height: 10px; 34 width: 10px; 35 display: inline-block; 36 margin-right: 5px; 37 } 38 39 .etcd-container.etcd-stats .etcd-list .etcd-square-red { 40 background-color: #c40022; 41 } 42 43 .etcd-container.etcd-stats .etcd-list .etcd-square-orange { 44 background-color: #FFC000; 45 } 46 47 .etcd-container.etcd-stats .etcd-list .etcd-square-green { 48 background-color: #00DB24; 49 } 50 51 .etcd-container.etcd-stats .etcd-list .etcd-peer-type { 52 color: #999; 53 padding-left: 3px; 54 font-size: 13px; 55 line-height: 100%; 56 } 57 58 .etcd-container.etcd-stats .etcd-list .etcd-latency-value { 59 display: inline-block; 60 } 61 62 .etcd-container.etcd-stats .etcd-graph { 63 box-sizing: border-box; 64 -moz-box-sizing: border-box; 65 position: absolute; 66 top: 0px; 67 bottom: 0px; 68 left: 0px; 69 right: 0px; 70 padding: 20px; 71 } 72 73 .etcd-container.etcd-stats .etcd-graph .etcd-graph-container { 74 position: absolute; 75 top: 60px; 76 bottom: 20px; 77 left: 20px; 78 right: 20px; 79 box-sizing: border-box; 80 -moz-box-sizing: border-box; 81 } 82 83 84 /* Single Column Positioning */ 85 @media (max-width: 700px) { 86 .etcd-container.etcd-stats .etcd-list { 87 width: 100%; 88 left: 100%; 89 } 90 91 .etcd-container.etcd-stats .etcd-graph { 92 left: 0%; 93 } 94 95 .etcd-container.etcd-stats.etcd-table-reveal .etcd-graph { 96 left: -100%; 97 transition-property: all; 98 transition-duration: 250ms; 99 transition-timing-function: ease-in-out; 100 } 101 .etcd-container.etcd-stats.etcd-table-hide .etcd-graph { 102 left: 0%; 103 transition-property: all; 104 transition-duration: 250ms; 105 transition-timing-function: ease-in-out; 106 107 } 108 .etcd-container.etcd-stats.etcd-table-hide .etcd-format-selector .etcd-selector-graph svg * { 109 fill: #428bca; 110 } 111 112 .etcd-container.etcd-stats.etcd-table-hide .etcd-list { 113 left: 100%; 114 transition-property: all; 115 transition-duration: 250ms; 116 transition-timing-function: ease-in-out; 117 } 118 .etcd-container.etcd-stats.etcd-table-reveal .etcd-list { 119 left: 0%; 120 transition-property: all; 121 transition-duration: 250ms; 122 transition-timing-function: ease-in-out; 123 } 124 .etcd-container.etcd-stats.etcd-table-reveal .etcd-format-selector .etcd-selector-table svg * { 125 fill: #428bca; 126 } 127 } 128 129 /* Double Column Positioning */ 130 @media (min-width: 700px) { 131 .etcd-container.etcd-stats .etcd-list { 132 width: 50%; 133 left: 50%; 134 } 135 136 .etcd-container.etcd-stats .etcd-graph { 137 left: 0%; 138 width: 50%; 139 } 140 141 .etcd-container.etcd-stats .etcd-format-selector { 142 display: none; 143 } 144 }