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) {
55 /* Default message severity is "info" but can be overriden. */
58 background-color: #44c7ef;
66 background-color: #44c7ef;
70 background-color: #ffa92a;
74 background-color: #f56257
109 .hide-state-capture {
113 /* Players list starts out hidden (until a player is added). */
121 grid-template-columns: 49% 49%;
127 padding-bottom: 0.25em;
130 .form-row.medium.left {
131 grid-column-start: 1;
134 .form-row.medium.right {
135 grid-column-start: 2;
139 grid-column-start: 1;
140 grid-column-end: span 2;
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
156 box-sizing: border-box;
162 border: 1px solid #287789;
167 border: 2px solid #44c7ef;
171 display: inline-block;
173 background-color: #287789;
180 padding-bottom: 0.25em;
182 transition: all 150ms ease;
186 transform: translateY(-1px);
187 background-color: #44c7ef;