dzura/www/css/main.css
2024-08-10 09:25:23 -07:00

163 lines
2.7 KiB
CSS

*{
box-sizing:border-box;
}
html{
display:block;
position:relative;
width:100%;
height:100%;
padding:0;
margin:0;
overflow:hidden;
}
body{
display:flex;
position:relative;
flex-flow:row nowrap;
align-items:flex-start;
justify-content:flex-start;
width:100%;
height:100%;
padding:0;
margin:0;
overflow:hidden;
font-family:sans-serif;
}
body>nav{
display:flex;
position:relative;
flex-flow:column nowrap;
width:9rem;
height:100%;
background-color:#282828;
}
body>nav>section{
display:block;
position:relative;
width:100%;
height:auto;
}
body>nav>section:first-of-type{
flex-grow:1;
}
body>nav>section>button{
display:block;
position:relative;
width:100%;
height:2.5rem;
padding:0 1rem 0 1rem;
text-align:left;
font-size:1.25rem;
cursor:pointer;
background-color:#282828;
color:#c0c0c0;
border:0;
outline:0;
} body>nav>section>button:hover{
background-color:#383838;
color:#e0e0e0;
}
body>nav>header{
display:block;
position:relative;
width:100%;
height:3rem;
line-height:3rem;
text-align:center;
font-size:1.8rem;
font-weight:bold;
font-variant:small-caps;
color:#d0d0d0;
border-bottom:1px solid #404040;
}
main{
display:flex;
position:relative;
flex-flow:column nowrap;
align-items:flex-start;
justify-content:flex-start;
width:100%;
height:100%;
flex-grow:1;
background-color:#202020;
}
main>nav{
display:flex;
position:relative;
flex-flow:row nowrap;
align-items:flex-start;
justify-content:flex-start;
width:100%;
height:3rem;
background-color:#282828;
border-bottom:1px solid #404040;
}
main>nav>section:first-child{
display:flex;
position:relative;
flex-flow:row nowrap;
align-items:flex-start;
justify-content:flex-start;
height:100%;
}
main>nav>section:last-child{
display:flex;
position:relative;
flex-flow:row nowrap;
align-items:flex-start;
justify-content:flex-end;
height:100%;
flex-grow:1;
}
main>nav>section>button{
display:block;
position:relative;
width:auto;
height:100%;
padding:0 1rem 0 1rem;
text-align:left;
font-size:1.25rem;
cursor:pointer;
background-color:#282828;
color:#c0c0c0;
border:0;
outline:0;
}
main>nav>section>button:hover{
background-color:#383838;
color:#e0e0e0;
}
main>nav>section>div{
display:block;
position:relative;
width:auto;
height:100%;
padding:0 1rem 0 1rem;
line-height:3rem;
text-align:left;
font-size:1.25rem;
color:#e0e0e0;
}