83 lines
1.0 KiB
CSS
83 lines
1.0 KiB
CSS
html,body
|
|
{
|
|
height: 100vh;
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
body
|
|
{
|
|
flex-direction: column;
|
|
display: flex;
|
|
}
|
|
|
|
main
|
|
{
|
|
position: relative;
|
|
width:80vw;
|
|
margin: auto;
|
|
flex:1;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
#tabs
|
|
{
|
|
display: flex;
|
|
padding: 1em;
|
|
|
|
}
|
|
|
|
#tabs .tab {
|
|
flex:1;
|
|
text-align: center;
|
|
border-bottom: 3px solid lightgray;
|
|
margin: 1em;
|
|
padding-bottom: 0.5em;
|
|
font-variant: small-caps;
|
|
color: black;
|
|
font-size: 1.2rem;
|
|
text-decoration: none;
|
|
max-width: calc(33.333% - 2em);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#tabs .tab.selected.air_quality {
|
|
border-color:green;
|
|
}
|
|
|
|
#tabs .tab.air_quality:hover {
|
|
border-color:#0080008a;
|
|
}
|
|
/****/
|
|
#tabs .tab.selected.co2 {
|
|
border-color:blueviolet;
|
|
}
|
|
|
|
#tabs .tab.co2:hover {
|
|
border-color:#8a2be28a;
|
|
}
|
|
/***/
|
|
#tabs .tab.selected.humidity {
|
|
border-color:cornflowerblue;
|
|
}
|
|
|
|
#tabs .tab.humidity:hover {
|
|
border-color:#6495ed8a;
|
|
}
|
|
|
|
|
|
@media all and (max-width:600px) {
|
|
main
|
|
{
|
|
width: 95vw;
|
|
}
|
|
|
|
#tabs .tab
|
|
{
|
|
font-size: 1rem;
|
|
margin: 0.5em;
|
|
max-width: calc(33.333% - 1em);
|
|
}
|
|
}
|