2 background-color: #333738;
3 font-family: sans-serif;
14 background-color: white;
19 /* For a wide screen, just use the center of the window for content. */
20 @media screen and (min-width: 500px) {
28 /* And when the screen is narrow, let's kill the wasted vertical space
30 @media screen and (max-width: 499px) {
32 background-color: white;
58 /* Default message severity is "info" but can be overriden. */
61 background-color: #44c7ef;
69 background-color: #44c7ef;
73 background-color: #ffa92a;
77 background-color: #f56257
100 .show-state-capture {
112 .hide-state-capture {
116 /* Players list starts out hidden (until a player is added). */
124 grid-template-columns: 49% 49%;
130 padding-bottom: 0.25em;
133 .form-row.medium.left {
134 grid-column-start: 1;
137 .form-row.medium.right {
138 grid-column-start: 2;
142 grid-column-start: 1;
143 grid-column-end: span 2;
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
159 box-sizing: border-box;
165 border: 1px solid #287789;
170 border: 2px solid #44c7ef;
174 display: inline-block;
176 background-color: #287789;
183 padding-bottom: 0.25em;
185 transition: all 150ms ease;
189 transform: translateY(-1px);
190 background-color: #44c7ef;