Added CSS for mobile

master
Davide Bongiovanni 6 years ago
parent d70c5dbde3
commit f4fe883955

@ -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;
}
Loading…
Cancel
Save