diff options
Diffstat (limited to 'www/css/index.scss')
| -rw-r--r-- | www/css/index.scss | 213 |
1 files changed, 170 insertions, 43 deletions
diff --git a/www/css/index.scss b/www/css/index.scss index 81d5a1a..ccacc30 100644 --- a/www/css/index.scss +++ b/www/css/index.scss @@ -1,61 +1,188 @@ $yellow: #E5B217; $red: #80181A; -html, body, table { +* { + box-sizing: border-box; +} + +html { height: 100%; - padding: 0; - margin: 0; + body { + margin: 0; + padding: 0; + + background-color: $red; + color: $yellow; + font-family: sans-serif; + font-weight: bolder; + h1 { + text-align: center; + } + a { + text-decoration: none; + color: $yellow; + /* no :hover or :focus because touch screens */ + &:active { + text-decoration: underline; + background-color: $yellow; + color: $red; + } + } + input[type=text], input[type=password], input[type=email], select { + padding: 0 0.25em; + border: none; + background: bottom left linear-gradient(#a9a9a9, #a9a9a9) no-repeat, + bottom center linear-gradient(#a9a9a9, #a9a9a9) repeat-x, + bottom right linear-gradient(#a9a9a9, #a9a9a9) no-repeat; + background-size: 1px 6px, 1px 1px, 1px 6px; + color: $yellow; + &:hover, &:active, &:focus { + background: bottom left linear-gradient($yellow, $yellow) no-repeat, + bottom center linear-gradient($yellow, $yellow) repeat-x, + bottom right linear-gradient($yellow, $yellow) no-repeat; + background-size: 1px 6px, 1px 1px, 1px 6px; + color: $yellow; + } + } + option[disabled] { display: none; } + } +} +body#index { + height: 100%; + table { + height: 100%; + padding: 0; + margin: 0; - background-color: $red; - color: $yellow; + width: 100%; + border-collapse: collapse; + td, th { + border: solid 1px $yellow; + } + td { + text-align: center; + vertical-align: middle; + } - font-family: sans-serif; - font-weight: bolder; + thead { + height: 10%; + background-color: $yellow; + color: $red; + } + tbody { + td { + width: 33%; + max-width: 33%; + height: 30%; + div { + /* A wrapper round cell contents allowing us to use fancy + table-positioning inside of the cell */ + display: table; + width: 100%; + height: 100%; + a { + display: table-cell; + height: 100%; + width: 100%; + vertical-align: middle; + } + &.logo { + background-image: url("../img/logo.png"); + background-size: auto 100%; + background-position: center center; + background-repeat: no-repeat; + } + } + } + } + } } -table { - width: 100%; - border-collapse: collapse; - td, th { - border: solid 1px $yellow; +body#report { + margin: 0.5em; + form { + width: 100%; + label { + display: table; + //border: solid 1px #0000FF; + width: 100%; + margin-bottom: 0.25em; + span { + display: table-cell; + width: 8em; + } + input, select { + display: table-cell; + width: 100%; + } + textarea { + display: inline-block; + width: 100%; + height: 3em; + border: 0; + } + } + input[type=submit] { + width: 100%; + height: 3em; + } } - td { + #camera-ui { + border: solid 1px $yellow; text-align: center; - vertical-align: middle; + button { + display: block; + margin-left: auto; + margin-right: auto; + } + img { + display: block; + margin-left: auto; + margin-right: auto; + max-width: 50%; + height: auto; + } } + & > video { + /* Camera feed for browser */ + position: absolute; + left: 0; + width: 100%; - thead { - height: 10%; - background-color: $yellow; - color: $red; + top: 0; + height: auto; + max-height: 100%; + display: block; } - tbody { - td { - width: 33%; - height: 30%; - div { - /* A wrapper round cell contents allowing us to use fancy - table-positioning inside of the cell */ - display: table; - width: 100%; - height: 100%; - a { - display: table-cell; - height: 100%; - width: 100%; - vertical-align: middle; - } - } - } + & > button { + /* Camera capture button for browser */ + position: absolute; + left: 0; + width: 100%; + + bottom: 0; + height: 3em; } } -a { - text-decoration: none; - color: $yellow; - &:hover, &:active, &:focus { - text-decoration: underline; - background-color: $yellow; - color: $red; +body#msds, body#alert { + a { + display: inline-block; + width: 100%; + padding-left: 1em; + line-height: 3em; + border: solid 1px #a9a9a9; + margin-top: -1px; } } + +body#ppe { + margin: 1em; +} + +body#emergency { + img { + width: 100%; + height: auto; + } +}
\ No newline at end of file |