PerformanceTests/Speedometer/resources/main.css

   1 body {
   2     background-color: rgb(46, 51, 55);
   3     color: rgb(235, 235, 235);
   4     font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
   5 }
   6
   7 ::selection {
   8     color: rgb(46, 51, 55);
   9     background-color: rgb(235, 235, 235);
  10 }
  11
  12 h1,
  13 button {
  14     font-family: "Futura-Medium", Futura, "Helvetica Neue", Helvetica, Verdana, sans-serif;
  15 }
  16
  17 code {
  18     font-family: Menlo, Monaco, monospace;
  19     font-size: smaller;
  20 }
  21
  22 button {
  23     cursor: pointer;
  24 }
  25
  26 hr {
  27     border: 1px solid rgb(235, 235, 235);
  28     width: 50%;
  29     margin: 40px auto;
  30 }
  31
  32 img {
  33     -webkit-user-select: none;
  34     -webkit-user-drag: none;
  35 }
  36
  37 main {
  38     display: block;
  39     position: absolute;
  40     width: 800px;
  41     height: 600px;
  42     top: 50%;
  43     left: 50%;
  44     margin-top: -321px;
  45     margin-left: -421px;
  46     padding: 15px;
  47     border: 6px solid rgb(235, 235, 235);
  48     border-radius: 20px;
  49 }
  50
  51 #logo {
  52     position: absolute;
  53     left: -70px;
  54     top: 115px;
  55     width: 75px;
  56     height: 406px;
  57 }
  58
  59 h1 {
  60     margin-top: 30px;
  61     font-size: 40px;
  62     font-weight: normal;
  63     color: rgb(235, 235, 235);
  64     text-align: center;
  65 }
  66
  67 p {
  68     font-size: 16px;
  69     line-height: 21px;
  70 }
  71
  72 a {
  73     color: inherit;
  74 }
  75
  76 .buttons {
  77     margin-top: 30px;
  78     text-align: center;
  79 }
  80
  81 button {
  82     -webkit-appearance: none;
  83     border: 3px solid rgb(235, 235, 235);
  84     border-radius: 10px;
  85     min-width: 200px;
  86     padding: 5px 20px;
  87     margin: 0 40px;
  88     font-size: 25px;
  89     color: rgb(235, 235, 235);
  90     background-color: transparent;
  91
  92     -webkit-user-select: none;
  93 }
  94
  95 button:active {
  96     background-color: rgb(235, 235, 235);
  97     color: rgb(46, 51, 55);
  98     border-color: rgb(235, 235, 235) !important;
  99 }
 100
 101 button:focus {
 102     outline: none;
 103     border-color: rgb(232, 79, 79);
 104 }
 105
 106 section {
 107     display: none;
 108 }
 109
 110 section > p {
 111     margin: 10px 20px;
 112 }
 113
 114 section.selected {
 115     display: block;
 116 }
 117
 118 #testContainer {
 119     position: absolute;
 120     top: 15px;
 121     left: 15px;
 122     width: 800px;
 123     height: 600px;
 124 }
 125
 126 section#home > p {
 127     margin: 0 auto;
 128     width: 70%;
 129     text-align: center;
 130 }
 131
 132 section#home > p:first-child {
 133     margin-top: 160px;
 134     text-align: center;
 135 }
 136
 137 section#home > .show-about {
 138     margin-top: 100px;
 139 }
 140
 141 section#home > .buttons {
 142     margin-top: 80px;
 143 }
 144
 145 section#running > #progress {
 146     position: absolute;
 147     bottom: -6px;
 148     left: 60px;
 149     right: 60px;
 150     height: 6px;
 151     background-color: rgb(128, 128, 128);
 152     border-left: 6px solid rgb(46, 51, 55);
 153     border-right: 6px solid rgb(46, 51, 55);
 154 }
 155
 156 section#running #progress-completed {
 157     position: absolute;
 158     top: 0;
 159     left: 0;
 160     height: 6px;
 161     width: 0;
 162     background-color: rgb(235, 235, 235);
 163 }
 164
 165 section#running > #info {
 166     position: absolute;
 167     bottom: -25px;
 168     left: 60px;
 169     right: 60px;
 170     height: 12px;
 171     color: rgb(128, 128, 128);
 172     text-align: center;
 173     font-size: 12px;
 174 }
 175
 176 section#summarized-results > #result-number,
 177 section#summarized-results > #confidence-number {
 178     font-family: "Futura-CondensedMedium", Futura, "Helvetica Neue", Helvetica, Verdana, sans-serif;
 179 }
 180
 181 section#summarized-results > #result-number {
 182     text-align: center;
 183     font-size: 145px;
 184     line-height: 145px;
 185 }
 186
 187 section#summarized-results > #confidence-number {
 188     text-align: center;
 189     font-size: 36px;
 190     line-height: 36px;
 191     color: rgb(128, 128, 128);
 192 }
 193
 194 section#detailed-results > table {
 195     float: left;
 196     width: 50%;
 197 }
 198
 199 section#detailed-results > .arithmetic-mean {
 200     clear: both;
 201     padding-top: 32px;
 202     text-align: center;
 203 }
 204
 205 section#detailed-results > .arithmetic-mean > label {
 206     font-weight: bold;
 207     margin-right: 10px;
 208     color: rgb(128, 128, 128);
 209 }
 210
 211 section#detailed-results > .show-about {
 212     margin-top: 30px;
 213     text-align: center;
 214 }
 215
 216 section#about h1 {
 217     margin-top: 20px;
 218     font-size: 30px;
 219 }
 220
 221 section#about .note {
 222     color: rgb(128, 128, 128);
 223 }
 224
 225 table {
 226     border-spacing: 0;
 227     border-collapse: collapse;
 228 }
 229
 230 th,
 231 td {
 232     padding: 5px;
 233 }
 234
 235 th {
 236     text-align: right;
 237     color: rgb(128, 128, 128);
 238 }
 239
 240 .gauge {
 241     position: relative;
 242     width: 738px;
 243     height: 78px;
 244     background-image: url(gauge.png);
 245     background-size: 100% 100%;
 246     background-repat: no-repeat;
 247     margin: 0 auto;
 248 }
 249
 250 .gauge > .window {
 251     position: absolute;
 252     left: 0;
 253     top: 33px;
 254     bottom: 0;
 255     right: 0;
 256     overflow: hidden;
 257 }
 258
 259 .gauge > .window > .needle {
 260     position: absolute;
 261     left: 363px;
 262     bottom: -88px;
 263     width: 4px;
 264     height: 400px;
 265     background-color: rgb(247, 148, 29);
 266
 267     -webkit-transform: rotate(-70deg);
 268     -webkit-transform-origin: 2px 400px;
 269
 270     -moz-transform: rotate(-70deg);
 271     -moz-transform-origin: 2px 400px;
 272
 273     transform: rotate(-70deg);
 274     transform-origin: 2px 400px;
 275 }
 276
 277 @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-resolution: 192dpi) {
 278     #logo {
 279         content: url(logo@2x.png); /* FIXME: This does not work in Firefox. */
 280     }
 281
 282     .gauge {
 283         background-image: url(gauge@2x.png);
 284     }
 285 }