git.cworth.org Git - lmno.games/blob - empires/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     #page {
  32         margin-top: 0;
  33         margin-bottom: 0;
  34         padding-top: 0;
  35         padding-bottom: 0;
  36     }
  37 }
  38
  39 h1 {
  40     color: #333738;
  41     font-size: 150%;
  42     font-weight: bold;
  43 }
  44
  45 h2 {
  46     color: #333738;
  47     font-size: 110%;
  48     font-weight: bold;
  49 }
  50
  51 p,dl,dd {
  52     margin-bottom: 1em;
  53 }
  54
  55 /* Default message severity is "info" but can be overriden. */
  56 .message {
  57     padding: 1em;
  58     background-color: #44c7ef;
  59     color: white;
  60     transition: 0.3s;
  61     margin-bottom: 0.5em;
  62     font-weight: bold;
  63 }
  64
  65 .success {
  66     background-color: #44c7ef;
  67 }
  68
  69 .warning {
  70     background-color: #ffa92a;
  71 }
  72
  73 .danger {
  74     background-color: #f56257
  75 }
  76
  77 .hide-button {
  78     color: white;
  79     font-weight: bold;
  80     float: right;
  81     font-size: 150%;
  82     cursor: pointer;
  83 }
  84
  85 .hide-button:hover {
  86     color: black;
  87 }
  88
  89 .show-state-join {
  90     display:none;
  91 }
  92
  93 .show-state-reveal {
  94     display:none;
  95 }
  96
  97 .show-state-capture {
  98     display:none;
  99 }
 100
 101 .hide-state-join {
 102     display:block;
 103 }
 104
 105 .hide-state-reveal {
 106     display:block;
 107 }
 108
 109 .hide-state-capture {
 110     display:block;
 111 }
 112
 113 /* Players list starts out hidden (until a player is added). */
 114 #players-div {
 115     display:none;
 116 }
 117
 118 #register-form {
 119     max-width: 100%;
 120     display: grid;
 121     grid-template-columns: 49% 49%;
 122     grid-column-gap: 2%;
 123 }
 124
 125 .form-row {
 126     max-width: 100%;
 127     padding-bottom: 0.25em;
 128 }
 129
 130 .form-row.medium.left {
 131     grid-column-start: 1;
 132 }
 133
 134 .form-row.medium.right {
 135     grid-column-start: 2;
 136 }
 137
 138 .form-row.large {
 139     grid-column-start: 1;
 140     grid-column-end: span 2;
 141 }
 142
 143 /* For a narrow screen, use a single-column for medium form rows. */
 144 @media screen and (max-width: 600px) {
 145     .form-row.medium.left,.form-row.medium.right {
 146         grid-column-start: 1;
 147         grid-column-end: span 2
 148     }
 149 }
 150
 151 input {
 152     width: 100%;
 153 }
 154
 155 input {
 156     box-sizing: border-box;
 157
 158     height: 40px;
 159
 160     padding: 10px 12px;
 161
 162     border: 1px solid #287789;
 163     border-radius: 4px;
 164 }
 165
 166 input:focus {
 167     border: 2px solid #44c7ef;
 168 }
 169
 170 button {
 171     display: inline-block;
 172     border-radius: 4px;
 173     background-color: #287789;
 174     border: none;
 175     color: white;
 176     text-align: center;
 177     font-size: 125%;
 178     margin-top: .25em;
 179     padding-top: 0.25em;
 180     padding-bottom: 0.25em;
 181     width: 200px;
 182     transition: all 150ms ease;
 183 }
 184
 185 button:hover {
 186     transform: translateY(-1px);
 187     background-color: #44c7ef;
 188 }
 189
 190 :focus {
 191     outline: none;
 192 }
 193 ::-moz-focus-inner {
 194     border: 0;
 195 }