git.cworth.org Git - empires-html/blob - style.css

   1 body {
   2     background-color: #333738;
   3     font-family: sans-serif;
   4     line-height: 1.5;
   5 }
   6
   7 #page {
   8     margin-top: 36px;
   9     margin-bottom: 36px;
  10     padding-top: 30px;
  11     padding-bottom: 30px;
  12     padding-left: 10px;
  13     padding-right: 10px;
  14     background-color: white;
  15     margin-left: auto;
  16     margin-right: auto;
  17 }
  18
  19 /* For a wide screen, just use the center of the window for content. */
  20 @media screen and (min-width: 500px) {
  21   #page {
  22       max-width: 720px;
  23       padding-left: 50px;
  24       padding-right: 50px;
  25   }
  26 }
  27
  28 /* And when the screen is narrow, let's kill the wasted vertical space
  29    above it too. */
  30 @media screen and (max-width: 499px) {
  31     body {
  32         background-color: white;
  33     }
  34     #page {
  35         margin-top: 0;
  36         margin-bottom: 0;
  37         padding-top: 0;
  38         padding-bottom: 0;
  39     }
  40 }
  41
  42 h1 {
  43     color: #333738;
  44     font-size: 150%;
  45     font-weight: bold;
  46 }
  47
  48 h2 {
  49     color: #333738;
  50     font-size: 110%;
  51     font-weight: bold;
  52 }
  53
  54 p,dl,dd {
  55     margin-bottom: 1em;
  56 }
  57
  58 /* Default message severity is "info" but can be overriden. */
  59 .message {
  60     padding: 1em;
  61     background-color: #44c7ef;
  62     color: white;
  63     transition: 0.3s;
  64     margin-bottom: 0.5em;
  65     font-weight: bold;
  66 }
  67
  68 .success {
  69     background-color: #44c7ef;
  70 }
  71
  72 .warning {
  73     background-color: #ffa92a;
  74 }
  75
  76 .danger {
  77     background-color: #f56257
  78 }
  79
  80 .hide-button {
  81     color: white;
  82     font-weight: bold;
  83     float: right;
  84     font-size: 150%;
  85     cursor: pointer;
  86 }
  87
  88 .hide-button:hover {
  89     color: black;
  90 }
  91
  92 .show-state-join {
  93     display:none;
  94 }
  95
  96 .show-state-reveal {
  97     display:none;
  98 }
  99
 100 .show-state-capture {
 101     display:none;
 102 }
 103
 104 .hide-state-join {
 105     display:block;
 106 }
 107
 108 .hide-state-reveal {
 109     display:block;
 110 }
 111
 112 .hide-state-capture {
 113     display:block;
 114 }
 115
 116 /* Players list starts out hidden (until a player is added). */
 117 #players-div {
 118     display:none;
 119 }
 120
 121 /* Host tools start out hidden. */
 122 #host-tools {
 123     display: none;
 124 }
 125
 126 #register-form {
 127     max-width: 100%;
 128     display: grid;
 129     grid-template-columns: 49% 49%;
 130     grid-column-gap: 2%;
 131 }
 132
 133 .form-row {
 134     max-width: 100%;
 135     padding-bottom: 0.25em;
 136 }
 137
 138 .form-row.medium.left {
 139     grid-column-start: 1;
 140 }
 141
 142 .form-row.medium.right {
 143     grid-column-start: 2;
 144 }
 145
 146 .form-row.large {
 147     grid-column-start: 1;
 148     grid-column-end: span 2;
 149 }
 150
 151 /* For a narrow screen, use a single-column for medium form rows. */
 152 @media screen and (max-width: 600px) {
 153     .form-row.medium.left,.form-row.medium.right {
 154         grid-column-start: 1;
 155         grid-column-end: span 2
 156     }
 157 }
 158
 159 input {
 160     width: 100%;
 161 }
 162
 163 input {
 164     box-sizing: border-box;
 165
 166     height: 40px;
 167
 168     padding: 10px 12px;
 169
 170     border: 1px solid #287789;
 171     border-radius: 4px;
 172 }
 173
 174 input:focus {
 175     border: 2px solid #44c7ef;
 176 }
 177
 178 button {
 179     display: inline-block;
 180     border-radius: 4px;
 181     background-color: #287789;
 182     border: none;
 183     color: white;
 184     text-align: center;
 185     font-size: 125%;
 186     margin-top: .25em;
 187     padding-top: 0.25em;
 188     padding-bottom: 0.25em;
 189     width: 200px;
 190     transition: all 150ms ease;
 191 }
 192
 193 button:hover {
 194     transform: translateY(-1px);
 195     background-color: #44c7ef;
 196 }
 197
 198 :focus {
 199     outline: none;
 200 }
 201 ::-moz-focus-inner {
 202     border: 0;
 203 }
 204
 205 #character-reveal {
 206     color: #333738;
 207     font-size: 300%;
 208     font-weight: bold;
 209 }