X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=blobdiff_plain;f=empires%2Fstyle.css;h=8b0035648f0b19dcdcac8bb89e4ea892658ceec0;hp=9beda3e89e2408d90645bb91d5fee21f4f67fa47;hb=0d3b2c75ae2fed4783121c1f9a390d1d8526e79c;hpb=cb1b69c3466b7ed486cfe32627eff099877d5b44 diff --git a/empires/style.css b/empires/style.css index 9beda3e..8b00356 100644 --- a/empires/style.css +++ b/empires/style.css @@ -1,91 +1,3 @@ -body { - background-color: #333738; - font-family: sans-serif; - line-height: 1.5; -} - -#page { - margin-top: 36px; - margin-bottom: 36px; - padding-top: 30px; - padding-bottom: 30px; - padding-left: 10px; - padding-right: 10px; - background-color: white; - margin-left: auto; - margin-right: auto; -} - -/* For a wide screen, just use the center of the window for content. */ -@media screen and (min-width: 500px) { - #page { - max-width: 720px; - padding-left: 50px; - padding-right: 50px; - } -} - -/* And when the screen is narrow, let's kill the wasted vertical space - above it too. */ -@media screen and (max-width: 499px) { - #page { - margin-top: 0; - margin-bottom: 0; - padding-top: 0; - padding-bottom: 0; - } -} - -h1 { - color: #333738; - font-size: 150%; - font-weight: bold; -} - -h2 { - color: #333738; - font-size: 110%; - font-weight: bold; -} - -p,dl,dd { - margin-bottom: 1em; -} - -/* Default message severity is "info" but can be overriden. */ -.message { - padding: 1em; - background-color: #44c7ef; - color: white; - transition: 0.3s; - margin-bottom: 0.5em; - font-weight: bold; -} - -.success { - background-color: #44c7ef; -} - -.warning { - background-color: #ffa92a; -} - -.danger { - background-color: #f56257 -} - -.hide-button { - color: white; - font-weight: bold; - float: right; - font-size: 150%; - cursor: pointer; -} - -.hide-button:hover { - color: black; -} - .show-state-join { display:none; } @@ -115,81 +27,17 @@ p,dl,dd { display:none; } -#register-form { - max-width: 100%; - display: grid; - grid-template-columns: 49% 49%; - grid-column-gap: 2%; -} - -.form-row { - max-width: 100%; - padding-bottom: 0.25em; -} - -.form-row.medium.left { - grid-column-start: 1; -} - -.form-row.medium.right { - grid-column-start: 2; -} - -.form-row.large { - grid-column-start: 1; - grid-column-end: span 2; -} - -/* For a narrow screen, use a single-column for medium form rows. */ -@media screen and (max-width: 600px) { - .form-row.medium.left,.form-row.medium.right { - grid-column-start: 1; - grid-column-end: span 2 - } -} - -input { - width: 100%; +/* Host tools start out hidden. */ +#host-tools { + display: none; } input { - box-sizing: border-box; - height: 40px; - - padding: 10px 12px; - - border: 1px solid #287789; - border-radius: 4px; -} - -input:focus { - border: 2px solid #44c7ef; } -button { - display: inline-block; - border-radius: 4px; - background-color: #287789; - border: none; - color: white; - text-align: center; - font-size: 125%; - margin-top: .25em; - padding-top: 0.25em; - padding-bottom: 0.25em; - width: 200px; - transition: all 150ms ease; -} - -button:hover { - transform: translateY(-1px); - background-color: #44c7ef; -} - -:focus { - outline: none; -} -::-moz-focus-inner { - border: 0; +#character-reveal { + color: #333738; + font-size: 300%; + font-weight: bold; }