From f4fe883955037ce8718bb3810b817e9a75f8919c Mon Sep 17 00:00:00 2001 From: Davide Bongiovanni Date: Mon, 19 Nov 2018 22:14:19 +0100 Subject: [PATCH] Added CSS for mobile --- parts/static/style-m.css | 213 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 213 insertions(+) create mode 100644 parts/static/style-m.css diff --git a/parts/static/style-m.css b/parts/static/style-m.css new file mode 100644 index 0000000..283fdb2 --- /dev/null +++ b/parts/static/style-m.css @@ -0,0 +1,213 @@ +html { + background-color: #D7E2E2; + color: #000F0F; + font-family: 'Roboto', sans-serif; + text-align: center; +} + +body { + margin: 0; +} + +h1 { + padding: 16px; + margin: 0; + color: #D7E2E2; + background-color: #013A3A; + font-size: 150%; +} + +p { + font-size: 0.6em; +} + +input[type=text].search-bar { + color: #404040; + padding: 6px; + margin-top: 16px; + margin-bottom: 4px; + width: 90%; + font-size: 1.2em; +} + +.filter-container p { + display: none; +} + +.filter-container { + background-color: #226666; + width: 90%; + display: inline-block; + border: 1px #226666 solid; +} + +.filter-container ul { + display: flex; + justify-content: stretch; + list-style: none; + margin: 0; + padding: 0; +} + +.filter-container li { + flex: 1; + font-size: 0.8em; +} + +input[type=checkbox]{ + display: none; +} + +input[type=checkbox] + label.toggle-btn { + padding:6px 0 6px 0; + display: block; + color: rgba(94,146,146, 0.5); + background-color: #D7E2E2; + transition: 0.2s; + -webkit-transition: 0.2s; +} + +input[type=checkbox]:checked + label.toggle-btn { + color: #D7E2E2; + background-color: #226666; +} + +.round-floating-button { + display: flex; + align-items: center; + justify-content: center; + position: fixed; + bottom: 20px; + right: 20px; + width: 56px; + height: 56px; + border-radius: 28px; + background-color: #5E9292; + font-size: 32px; + box-shadow: 2pt 1pt 8pt black; +} + +.round-floating-button a{ + color: #D7E2E2; +} + +#results { + width:100%; + margin-top: 1em; + border-collapse: collapse; + /*table-layout: fixed;*/ +} + +#results th { + background-color: #226666; + color: #D7E2E2; + padding: 4px 0 4px 0; +} + +#results th#location { + width: 20%; +} +#results th#partno { + width: 30%; +} + +#results td { + /*overflow: hidden; + white-space: nowrap;*/ + padding: 5px 0 5px 0; + font-size: 0.7em; +} + +#results tr:nth-child(odd) { + background-color: #5E9292; +} + +.shadow { + background-color: black; + display: none; + height: 100%; + left: 0; + opacity: 0.0; + position: fixed; + top: 0; + width: 100%; + z-index: 200; +} + +.overlay { + opacity: 0.0; + display: none; + background-color: #226666; + color: #D7E2E2; + width: 90%; + position: absolute; + margin:auto; + left:0; + right:0; + top:0; + z-index: 201; +} + +h2 { + background-color: #013A3A; + padding: 8px 0 8px 0; + margin-top: 0; + font-size: 1.2em; +} + +#details { + width: 100%; + margin: 16px 0 16px 0; +} + +.details-header { + color: #013A3A; +} + +.details-content td p{ + font-size: 1em; + margin: 0 0 1em 0; + padding: 0; +} + +.button-container { + display: flex; + justify-content: space-evenly; + margin-bottom: 16px; +} + +.round-button { + display: flex; + align-items: center; + justify-content: center; + width: 56px; + height: 56px; + border-radius: 28pt; + background-color: #5E9292; + font-size: 32px; + box-shadow: 2pt 1pt 8pt black; +} + +.round-button a { + color: #D7E2E2; +} + +#map { + width: 90%; +} + +.small-square-button { + position: absolute; + top: 5px; + right: 10px; + font-size: 24px; +} + +.small-square-button a { + color: #D7E2E2; +} + +.pinfo-input { + width: 90%; + padding: 4px; +} \ No newline at end of file