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 #register-form {
 122     max-width: 100%;
 123     display: grid;
 124     grid-template-columns: 49% 49%;
 125     grid-column-gap: 2%;
 126 }
 127
 128 .form-row {
 129     max-width: 100%;
 130     padding-bottom: 0.25em;
 131 }
 132
 133 .form-row.medium.left {
 134     grid-column-start: 1;
 135 }
 136
 137 .form-row.medium.right {
 138     grid-column-start: 2;
 139 }
 140
 141 .form-row.large {
 142     grid-column-start: 1;
 143     grid-column-end: span 2;
 144 }
 145
 146 /* For a narrow screen, use a single-column for medium form rows. */
 147 @media screen and (max-width: 600px) {
 148     .form-row.medium.left,.form-row.medium.right {
 149         grid-column-start: 1;
 150         grid-column-end: span 2
 151     }
 152 }
 153
 154 input {
 155     width: 100%;
 156 }
 157
 158 input {
 159     box-sizing: border-box;
 160
 161     height: 40px;
 162
 163     padding: 10px 12px;
 164
 165     border: 1px solid #287789;
 166     border-radius: 4px;
 167 }
 168
 169 input:focus {
 170     border: 2px solid #44c7ef;
 171 }
 172
 173 button {
 174     display: inline-block;
 175     border-radius: 4px;
 176     background-color: #287789;
 177     border: none;
 178     color: white;
 179     text-align: center;
 180     font-size: 125%;
 181     margin-top: .25em;
 182     padding-top: 0.25em;
 183     padding-bottom: 0.25em;
 184     width: 200px;
 185     transition: all 150ms ease;
 186 }
 187
 188 button:hover {
 189     transform: translateY(-1px);
 190     background-color: #44c7ef;
 191 }
 192
 193 :focus {
 194     outline: none;
 195 }
 196 ::-moz-focus-inner {
 197     border: 0;
 198 }
 199
 200 #character-reveal {
 201     color: #333738;
 202     font-size: 300%;
 203     font-weight: bold;
 204 }