ogre.css

   1 @font-face {
   2     font-family: Digital;
   3     font-style: normal;
   4     font-weight: 400;
   5     src: url('Checkbook.woff') format('woff');
   6 }
   7
   8 @font-face {
   9     font-family: Sans;
  10     font-style: normal;
  11     font-weight: 400;
  12     src: url('FiraSans-Regular.woff') format('woff');
  13 }
  14
  15 @font-face {
  16     font-family: Mono;
  17     font-style: normal;
  18     font-weight: 400;
  19     src: url('DejaVuSansMono.woff') format('woff');
  20 }
  21
  22 * {
  23     margin: 0;
  24     padding: 0;
  25     font-weight: normal;
  26     text-decoration: none;
  27     list-style-type: none;
  28     font-style: normal;
  29     cursor: default;
  30 }
  31
  32 html {
  33     font-size: 18px;
  34     font-family: Sans, sans-serif;
  35     text-align: center;
  36     color: black;
  37     background-color: white;
  38 }
  39
  40 header, nav, main, section {
  41     display: block;
  42 }
  43
  44 body, nav, .tray {
  45     user-select: none;
  46     -moz-user-select: none;
  47     -webkit-touch-callout: none;
  48     -webkit-user-select: none;
  49 }
  50
  51 h1 {
  52     font-family: Digital, Sans, sans-serif;
  53     font-size: 2em;
  54     white-space: nowrap;
  55 }
  56
  57 body [href], body [onclick], .ticks, input, label {
  58     cursor: pointer;
  59 }
  60
  61 a[href] {
  62     color: red;
  63     text-decoration: underline;
  64 }
  65
  66 header {
  67     top: 0;
  68     position: fixed;
  69     left: 0;
  70     right: 0;
  71     display: block;
  72     background-color: black;
  73     font-family: Digital, Sans, sans-serif;
  74     color: white;
  75     z-index: 2;
  76     height: 1em;
  77     line-height: 1em;
  78     font-size: 2.5em;
  79 }
  80
  81 header h1 {
  82     font-size: 0.75em;
  83 }
  84
  85 nav {
  86     padding: 0 8px;
  87 }
  88
  89 body { padding-top: 2.5em; }
  90 .standalone header { padding-top: 20px; }
  91 .standalone { margin-top: 20px; }
  92
  93
  94 body [onclick]:hover, body [onclick]:active,
  95 body [data-tray]:hover, body [data-tray]:active,
  96 label:hover, label:active,
  97 #addUnit li:hover {
  98     color: red;
  99     cursor: pointer;
 100 }
 101
 102 section {
 103     border: solid black 1px;
 104     margin: 2em 3em;
 105     padding: 0.25em 2em;
 106     position: relative;
 107 }
 108
 109 .close {
 110     font-family: Mono, monospace;
 111     line-height: 1em;
 112     position: absolute;
 113     font-size: 2.5em;
 114     width: 1em;
 115     height: 1em;
 116     top: 0;
 117     left: 0;
 118 }
 119
 120 .close:after { content: "✕"; }
 121
 122 section > .name {
 123     line-height: 1em;
 124     font-family: Digital, Sans, sans-serif;
 125     font-size: 1.5em;
 126     white-space: nowrap;
 127 }
 128
 129 section > .aside {
 130     display: block;
 131     font-size: 0.75em;
 132     padding-top: 0.5em;
 133     font-family: Sans, sans-serif;
 134
 135 }
 136
 137 .weapons > li:before {
 138     content: attr(data-remaining) " " attr(data-name);
 139     display: block;
 140     width: 100%;
 141     text-align: center;
 142     font-size: 0.9em;
 143     font-family: Mono, monospace;
 144 }
 145
 146 .weapons > li[data-count="1"]:before {
 147     content: attr(data-name);
 148 }
 149
 150 section > .type {
 151     font-family: Mono, monospace;
 152     font-variant: small-caps;
 153 }
 154
 155 .stats { font-variant: small-caps; }
 156 .stats > li {
 157     display: inline-block;
 158     padding: 0 0.25em;
 159     font-family: Mono, monospace;
 160 }
 161 .stats > li:before { font-size: 0.75em; font-family: Sans, sans-serif; }
 162 .stats > .attack:before { content: "Atk "; }
 163 .stats > .defense:before { content: "Def "; }
 164 .stats > .range:before { content: "Rng "; }
 165 .stats > .aside {
 166     display: block;
 167     font-variant: normal;
 168     text-transform: none;
 169     font-size: 0.75em;
 170     font-family: Sans, sans-serif;
 171 }
 172
 173 .weapons {
 174     display: -webkit-flex;
 175     display: flex;
 176     flex-wrap: wrap;
 177     -webkit-flex-wrap: wrap;
 178     flex-direction: row;
 179     -webkit-flex-direction: row;
 180     justify-content: space-around;
 181     -webkit-justify-content: space-around;
 182     align-items: flex-end;
 183     -webkit-align-items: flex-end;
 184     align-content: center;
 185     -webkit-align-content: center;
 186 }
 187
 188 .weapons > li {
 189     display: inline-block;
 190     margin: 1em 0.75em;
 191     margin-bottom: 0em;
 192     flex-grow: 1;
 193     -webkit-box-flex: 1;
 194     -webkit-flex-grow: 1;
 195 }
 196
 197 .ticks {
 198     display: inline-block;
 199     font-size: 2em;
 200     font-family: Mono, monospace;
 201     line-height: 0.75em;
 202 }
 203
 204 [data-remaining="0"] .ticks {
 205     color: red;
 206 }
 207
 208 .treads {
 209     margin: 0.5em auto;
 210     padding: 0 1em;
 211     padding-right: 1.5em;
 212     list-style-type: none;
 213     display: inline-block;
 214 }
 215
 216 [data-remaining="0"]:before {
 217     text-decoration: line-through;
 218     color: red;
 219 }
 220
 221 .treads:before {
 222     content: attr(data-remaining) " Tread Units";
 223     font-family: Mono, monospace;
 224     display: block;
 225     margin-top: 0.7em;
 226     text-align: center;
 227     margin-right: -1.25em;
 228 }
 229
 230 .treads.propulsion:before {
 231     content: attr(data-remaining) " Prop. Units";
 232 }
 233
 234 .treads > li {
 235     text-align: right;
 236     display: block;
 237     line-height: 0.75em;
 238 }
 239
 240 .treads > li:after {
 241     margin-right: -1em;
 242     font-size: 0.5em;
 243     width: 1em;
 244     display: inline-block;
 245     font-family: Mono, monospace;
 246     vertical-align: 0.125em;
 247 }
 248
 249 .ticks > span {
 250     display: inline-block;
 251     padding: 0 0.111em;
 252     height: 0.75em;
 253     overflow: hidden;
 254     cursor: pointer;
 255 }
 256
 257 .treads > li:first-child:before {
 258     content: "Move starts at";
 259     font-family: Sans, sans-serif;
 260     font-size: 0.75em;
 261     display: inline-block;
 262     font-variant: small-caps;
 263     vertical-align: 0.25em;
 264     margin-right: -0.125em;
 265 }
 266 .treads.propulsion > li:first-child:before {
 267     content: "Must move";
 268 }
 269 .treads > li:first-child:after { font-size: 1em; }
 270
 271 .treads > li:first-child:nth-last-child(n+1) { counter-reset: i 1; }
 272 .treads > li:first-child:nth-last-child(n+2) { counter-reset: i 2; }
 273 .treads > li:first-child:nth-last-child(n+3) { counter-reset: i 3; }
 274 .treads > li:first-child:nth-last-child(n+4) { counter-reset: i 4; }
 275 .treads > li:first-child:nth-last-child(n+5) { counter-reset: i 5; }
 276 .treads > li:first-child:nth-last-child(n+6) { counter-reset: i 6; }
 277 .treads > li:after { content: counter(i); counter-increment: i -1; }
 278
 279 #unit-template { display: none; }
 280
 281 .tray {
 282     position: fixed;
 283     border: solid black 1px;
 284     border-top-width: 0;
 285     z-index: 1;
 286     transition: transform 0.3s;
 287     -webkit-transition: -webkit-transform 0.3s;
 288     background-color: rgba(255, 255, 255, 0.9412);
 289     overflow: auto;
 290     max-height: 80%;
 291     -webkit-overflow-scrolling: touch;
 292 }
 293
 294 .tray.visible {
 295     transform: translate(0, 0) !important;
 296     -webkit-transform: translate(0, 0) !important;
 297     transition: transform 0.3s;
 298     -webkit-transition: -webkit-transform 0.3s;
 299 }
 300
 301 #addUnit {
 302     transform: translateX(-100%);
 303     -webkit-transform: translateX(-100%);
 304     font-size: 2em;
 305     display: block;
 306 }
 307
 308 #addUnit > li {
 309     display: block;
 310     padding: 0.25em;
 311     text-align: left;
 312     font-family: Digital, Sans, sans-serif;
 313     white-space: nowrap;
 314     cursor: pointer;
 315 }
 316
 317 #legal {
 318     font-size: 0.8em;
 319     left: 40%;
 320     right: 0%;
 321     transform: translateX(100%);
 322     -webkit-transform: translateX(100%);
 323     text-align: center;
 324     padding-top: 1em;
 325 }
 326
 327 #legal p {
 328     padding: 1em;
 329     text-align: justify;
 330     text-align-last: center;
 331     -moz-text-align-last: center;
 332     -webkit-text-align-last: center;
 333 }
 334
 335 .stats { margin-top: -0.3333em; }
 336
 337 .colophon {
 338     font-size: 1.5em;
 339     font-family: Digital, Sans, sans-serif;
 340     margin-top: 0.25em;
 341 }
 342
 343 #brain {
 344     right: 0em;
 345     transform: translateX(100%);
 346     -webkit-transform: translateX(100%);
 347     padding: 0.5em;
 348     text-align: left;
 349     overflow: hidden;
 350 }
 351
 352 #report {
 353     font-family: Mono, monospace;
 354     white-space: pre;
 355 }
 356
 357 #howto {
 358     left: 25%;
 359     right: 25%;
 360     max-height: 50%;
 361     overflow-y: auto;
 362     transform: translateY(-100%);
 363     -webkit-transform: translateY(-100%);
 364     padding: 0.5em;
 365     text-align: left;
 366     overflow-y: auto;
 367 }
 368
 369 @media (max-width: 1023px) {
 370     html { font-size: 16px; }
 371 }
 372
 373 @media (max-width: 768px) {
 374     html { font-size: 13px; }
 375 }
 376
 377 @media (max-width: 640px) {
 378     section { margin: 1em; padding: 0.333em; }
 379     .weapons > li:before { content: attr(data-name); }
 380     .weapons > li { margin: 0.5em 0.5em; margin-bottom: 0; }
 381     .stats > .attack:before { content: ""; }
 382     .stats > .defense { padding: 0 0.5em; }
 383     .stats > .defense:before {
 384         content: "D";
 385         font-family: Mono, monospace;
 386         font-size: 1em;
 387     }
 388     .weapons .ticks {
 389         margin-top: -0.125em;
 390     }
 391     .stats > .range:before {
 392         content: "/";
 393         font-family: Mono, monospace;
 394         font-size: 1em;
 395     }
 396     .stats > .aside { display: none; }
 397     .stats > li { padding: 0; }
 398     .treads { margin: 0 1.5em; min-width: 12em; }
 399     .treads:before { margin-bottom: -0.75em; }
 400     .treads > li:first-child:before {
 401         content: "M";
 402         font-family: Mono, monospace;
 403         font-size: 1em;
 404         vertical-align: 0.125em;
 405     }
 406 }
 407
 408 @media (max-width: 480px) {
 409     html { font-size: 11px; }
 410     section > .type, section > .aside { display: none; }
 411 }
 412