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). */
121 /* Host tools start out hidden. */
129 grid-template-columns: 49% 49%;
135 padding-bottom: 0.25em;
138 .form-row.medium.left {
139 grid-column-start: 1;
142 .form-row.medium.right {
143 grid-column-start: 2;
147 grid-column-start: 1;
148 grid-column-end: span 2;
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
164 box-sizing: border-box;
170 border: 1px solid #287789;
175 border: 2px solid #44c7ef;
179 display: inline-block;
181 background-color: #287789;
188 padding-bottom: 0.25em;
190 transition: all 150ms ease;
194 transform: translateY(-1px);
195 background-color: #44c7ef;