git.cworth.org Git - lmno.games/blob - style.css

   1 /* Because this is the only sizing that is sane, make it global. */
   2 * {
   3     box-sizing: border-box;
   4 }
   5
   6 /*\
   7 |*|
   8 |*| Properties for the page: colors, etc.
   9 |*|
  10 |*| This is intended to be the easiest section to edit
  11 |*| some easy custom theming, (a custom color scheme, etc.).
  12 |*|
  13 \*/
  14
  15 :root {
  16     /* Standard colors for text. */
  17     --text-fg-color: #333738;
  18     --text-fg-color-max-contrast: black;
  19     --text-bg-color: white;
  20     --outside-page-bg-color: #333738;
  21
  22     /* A little color to avoid a fully monochromatic theme. */
  23     --accent-color: #287789;
  24     --accent-color-bright: #44c7ef;
  25     --text-fg-on-accent: white;
  26     --text-fg-on-accent-bright: #333738;
  27
  28     /* Some colors intended to convey semnatics. */
  29     --warning-color: #ffa92a;
  30     --danger-color: #f56257;
  31     --danger-color-dark: #bc2822;
  32
  33     /* Page layout */
  34     --page-max-width: 720px;
  35     --page-max-pad: 50px;
  36     --page-max-width-padded: calc(var(--page-max-width) + 2 * var(--page-max-pad));
  37 }
  38
  39 /*\
  40 |*|
  41 |*| Core elements: Sizing, padding, and application of theme colors
  42 |*|
  43 \*/
  44
  45 body {
  46     line-height: 1.25;
  47     font-family: sans-serif;
  48     color: var(--text-fg-color-max-contrast);
  49 }
  50
  51 h1,h2 {
  52     color: var(--text-fg-color);
  53     font-weight: bold;
  54     margin-top: 0.5em;
  55 }
  56
  57 h1 {
  58     font-size: 150%;
  59 }
  60
  61 h2 {
  62     font-size: 110%;
  63 }
  64
  65 /* Don't underline links in headers */
  66 h1 a {
  67     text-decoration: none;
  68 }
  69
  70 p,dl,dd,form {
  71     margin-bottom: 1em;
  72 }
  73
  74 ul li {
  75     margin-left: 1em;
  76     list-style-type: disc;
  77     margin-bottom: 0.5em;
  78 }
  79
  80 a:link    {
  81     color: var(--accent-color);
  82 }
  83 a:visited {
  84     color: var(--accent-color);
  85 }
  86 @media (hover:hover) {
  87     a:hover   {
  88         color: var(--accent-color-bright);
  89     }
  90 }
  91 a:active  {
  92     color: var(--accent-color-bright);
  93 }
  94
  95 /*\
  96 |*|
  97 |*| Overall page layout
  98 |*|
  99 |*| Assumes: Top-level div with id="page" for all content
 100 |*|
 101 \*/
 102
 103 /* Mobile-first: At small sized we have a white background and use the
 104  * entire screen width for the page (so the background color of the
 105  * body is not visible anywhere). */
 106 body {
 107     background-color: var(--outside-page-bg-color);
 108 }
 109
 110 #page {
 111     background-color: var(--text-bg-color);
 112 }
 113
 114 /* For a small screen (in either width or height) change the
 115  * background of the body element to white so the application always
 116  * appears as if it is "full screen".
 117  */
 118 @media screen and (max-width: 500px) and (max-height: 860px) {
 119     body {
 120         background-color: var(--text-bg-color);
 121     }
 122 }
 123
 124 /* We never let the page content get larger than a large fixed width.
 125  *
 126  * And when the screen is wide enough, we can afford some "wasted"
 127  * space on either side of the page content, (up to --page-max-pad).
 128  *
 129  * Note: This --page-max-width-padded for the page includes the
 130  * padding so the actual content is only ever as wide as
 131  * --page-max-width.
 132  *
 133  * Wider than that and we start to see the background on either side
 134  * of the page content.
 135  */
 136 #page {
 137     max-width: var(--page-max-width-padded);
 138     margin-left: auto;
 139     margin-right: auto;
 140     padding-top: 0;
 141     padding-bottom: 2em;
 142     padding-left: 1em;
 143     padding-right: 1em;
 144 }
 145
 146 @media screen and (min-width: var(--page-max-width)) and (max-width: var(--page-max-width-padded)) {
 147     #page {
 148         padding-left: calc(1em + (100% - var(--page-max-width))/2);
 149         padding-right: calc(1em + (100% - var(--page-pax-width))/2);
 150     }
 151 }
 152
 153 @media screen and (min-width: var(--page-pax-width-padded)) {
 154     #page {
 155         padding-left: calc(1em + var(--page-max-pad));
 156         padding-right: calc(1em + var(--page-max-pad));
 157     }
 158 }
 159
 160 /* The calculations for height are different. We don't have any
 161  * vertical centering, so instead we have only some fixed padding on
 162  * the top. Then, the margin which allows the background to be visible
 163  * on the top and bottom starts appearing at a viewport height of 648
 164  * and tops out at a size of 36px.
 165  */
 166 #page {
 167     min-height: 500px;
 168     padding-top: 1em;
 169 }
 170
 171 @media screen and (min-height: 648px) and (max-height: 720px) {
 172     #page {
 173         margin-top: calc((100vh - 648px)/2);
 174         margin-bottom: calc((100vh - 648px)/2);
 175     }
 176 }
 177
 178 @media screen and (min-height: 720px) {
 179     #page {
 180         margin-top: 36px;
 181         margin-bottom: 36px;
 182     }
 183 }
 184
 185 /*\
 186 |*|
 187 |*| Responsive form layout
 188 |*|
 189 \*/
 190
 191 /*
 192  *
 193  * Within the form, fields can be placed in <div> elements with
 194  * class "form-field". Each can also have an additional class of one
 195  * of "small", "medium", or "large". These classes will be used to
 196  * select either a 1- or 2-column layout for each row depending on the
 197  * width of the screen.
 198  *
 199  * Expected layout is as follows:
 200  *
 201  *   "large"   rows: 1-column on all devices
 202  *
 203  *   "medium"  rows: 2-column on wide displays (laptop/desktop/tablet)
 204  *                   1-column on small display (phones)
 205  *
 206  *   "small"   rows: 2-column on all devices
 207  *
 208  * Finally, a class of either "left" or "right" will select which
 209  * column the field should appear in for fields that end up in 2
 210  * columns.
 211  */
 212 form {
 213     max-width: 100%;
 214     display: grid;
 215     grid-template-columns: 1fr 1fr;
 216     grid-column-gap: 1em;
 217 }
 218
 219 .form-field {
 220     margin-top: 0.25em;
 221     margin-bottom: 0.25em;
 222 }
 223
 224 .form-field.small.left,.form-field.medium.left {
 225     grid-column-start: 1;
 226 }
 227
 228 .form-field.small.right,.form-field.medium.right {
 229     grid-column-start: 2;
 230 }
 231
 232 .form-field.large {
 233     grid-column-start: 1;
 234     grid-column-end: span 2;
 235 }
 236
 237 /* For a narrow screen, use a single-column for medium form fields. */
 238 @media screen and (max-width: 600px) {
 239     .form-field.medium.left,.form-field.medium.right {
 240         grid-column-start: 1;
 241         grid-column-end: span 2
 242     }
 243 }
 244
 245 /*\
 246 |*|
 247 |*| Styling for form input fields
 248 |*|
 249 \*/
 250
 251 label {
 252     font-size: 125%;
 253 }
 254
 255 input {
 256     box-sizing: border-box;
 257     font-size: 125%;
 258     height: 40px;
 259     padding: 0.5em;
 260     width: 100%;
 261     border: 1px solid var(--accent-color);
 262     border-radius: 4px;
 263 }
 264
 265 input:focus {
 266     border: 2px solid var(--accent-color-bright);
 267 }
 268
 269 button {
 270     display: inline-block;
 271     border-radius: 4px;
 272     background-color: var(--accent-color);
 273     border: none;
 274     color: var(--text-fg-on-accent);
 275     text-align: center;
 276     font-size: 125%;
 277     margin-top: .25em;
 278     padding-top: 0.25em;
 279     padding-bottom: 0.25em;
 280     width: 200px;
 281     cursor: pointer;
 282 }
 283
 284 button.inline {
 285     font-size: 72%;
 286     font-weight: bold;
 287     width: auto;
 288 }
 289
 290 @media (hover:hover) {
 291     button:hover {
 292         transform: translateY(-1px);
 293         background-color: var(--accent-color-bright);
 294     }
 295 }
 296
 297 :focus {
 298     outline: none;
 299 }
 300
 301 ::-moz-focus-inner {
 302     border: 0;
 303 }
 304
 305 /*\
 306 |*|
 307 |*| Styling for a message area
 308 |*|
 309 \*/
 310
 311 /* Default message severity is "info" but can be overriden. */
 312 .message {
 313     padding: 1em;
 314     background-color: var(--accent-color-bright);
 315     color: white;
 316     transition: 0.3s;
 317     margin-bottom: 0.5em;
 318     font-weight: bold;
 319     border-radius: 4px;
 320     position: relative;
 321 }
 322
 323 .success {
 324     background-color: var(--accent-color-bright);
 325 }
 326
 327 .warning {
 328     background-color: var(--warning-color);
 329 }
 330
 331 .danger {
 332     background-color: var(--danger-color);
 333 }
 334
 335 .hide-button {
 336     color: white;
 337     font-size: 125%;
 338     font-weight: bold;
 339     cursor: pointer;
 340     position: absolute;
 341     right: 0.5em;
 342     top: 0;
 343 }
 344
 345 @media (hover:hover) {
 346     .hide-button:hover {
 347         color: var(--danger-color-dark);
 348     }
 349 }
 350
 351 /*\
 352 |*|
 353 |*| Game-specific markup
 354 |*|
 355 \*/
 356
 357 .game-id, .players-header {
 358     font-size: 110%;
 359     font-weight: bold;
 360 }