cityuni-webserver/base.css
Captain ALM c807754bea
All checks were successful
continuous-integration/drone/push Build is passing
Add nav resize utility functions.
2022-08-17 18:27:13 +01:00

356 lines
7.3 KiB
CSS

/*
This file is (C) Captain ALM
Under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License
*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#st{
position: absolute;
left: -1080px;
top: -1080px;
font-size: 1em;
visibility: hidden;
white-space: nowrap;
}
main{
padding-top: 70px;
padding-left: 6px;
}
.no-dec{
text-decoration: none;
}
.no-lst-style{
list-style: none;
}
.centered{
text-align: center;
}
.content, .content > *{
word-break: break-word;
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.content > p, .content > h1, .content > h2, .content > h3, .content > h4, .content > h5, .content > h6{
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.header{
position: fixed;
top: 0;
width: 100%;
z-index: 100;
border-style: solid;
border-width: 0 0 2px;
}
.home-button, .sort-button{
display: inline-block;
width: 84px;
height: 66px;
overflow: hidden;
text-align: center;
}
.sort-button{
cursor: pointer;
}
.home-button > div, .sort-button > div{
display: inline;
font-size: 48px;
padding: 10px;
vertical-align: middle;
}
.nav{
width: 100%;
height: 100%;
overflow: hidden;
max-height: 0;
}
.vnav{
max-height: none;
top: 0;
position: relative;
float: right;
width: auto;
height: 100%;
overflow: hidden;
}
.so-pane{
display: none;
overflow: hidden;
position: fixed;
max-height: 0;
}
.so-pane > form > div{
display: table-row;
background-color: transparent;
box-sizing: inherit;
max-width: 100%;
width: 100%;
}
.so-pane > form > div > div, .so-pane > form > div > span{
background-color: transparent;
box-sizing: inherit;
padding: 2px;
text-align: center;
vertical-align: middle;
}
.so-pane > form > div > div{
display: table-cell;
max-width: 50%;
width: 50%;
}
.so-pane > form > div > span{
display: block;
max-width: 100%;
width: 100%;
}
.so-pane-full{
display: table-caption !important;
caption-side: bottom;
}
.so-pane > form > div > * > *{
max-width: 100%;
width: 100%;
vertical-align: middle;
font-size: 16px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.so-pane > form > div > div > *{
text-align: left;
}
.so-pane > form > div > div > label{
background-color: transparent;
text-align: center;
}
.nav-menu, .sort-menu{
display: none;
}
.menu a, .vmenu a{
display: block;
}
.menu a, .vmenu a, #st{
padding: 24px 16px;
font-weight: bold;
}
.vmenu li{
float: left;
}
.vmenu a:hover{
background-color: transparent;
}
.hmb{
cursor: pointer;
float: right;
background-color: transparent;
padding: 32px 20px;
}
.hmb-line{
display: block;
height: 2px;
position: relative;
width: 24px;
}
.hmb-line::before, .hmb-line::after{
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .1s ease-out;
width: 100%;
}
.hmb-line::before{
top: 5px;
}
.hmb-line::after{
top: -5px;
}
.nav-menu:checked ~ #nav, .nav-open{
max-height: 100%;
}
.nav-menu:checked ~ .hmb .hmb-line, .nav-open-hmb .hmb-line{
background: transparent;
}
.nav-menu:checked ~ .hmb .hmb-line::before, .nav-open-hmb .hmb-line::before{
transform: rotate(-45deg);
top:0;
}
.nav-menu:checked ~ .hmb .hmb-line::after, .nav-open-hmb .hmb-line::after{
transform: rotate(45deg);
top:0;
}
.sort-menu:checked ~ .so-pane, .so-pane-open{
display: block;
z-index: 101;
box-sizing: content-box;
position: fixed;
text-align: center;
top: 70px;
left: 20px;
max-height: 100%;
width: 230px;
height: auto;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-bottomleft: 8px;
-moz-border-radius-bottomright: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding: 4px;
border-style: solid;
border-width: 0 2px 2px;
overflow: hidden;
}
.sort-menu:checked ~ .so-pane > form, .so-pane-open > form{
display: table;
box-sizing: inherit;
}
.main-box > div, footer{
max-width: 100%;
margin: 3px 0;
padding: 2px;
box-sizing: content-box;
}
.item-table{
display: table;
box-sizing: content-box;
background-color: transparent;
-webkit-border-radius: 32px;
-moz-border-radius: 32px;
border-radius: 32px;
border-width: 1px;
border-style: solid;
}
.flex-col{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-content: center;
align-content: center;
max-width: 100%;
width: 100%;
overflow: hidden;
}
.item-table > div{
display: table-row;
box-sizing: inherit;
max-width: 100%;
width: 100%;
}
.flex-row, .item-table > div{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
max-width: 100%;
width: 100%;
overflow: hidden;
}
.item-table > div > div > div{
padding: 2px;
}
.item-table-caption, .so-pane-caption{
display: table-caption !important;
caption-side: bottom;
}
.item-table-full, .item-table-360, .item-table-caption, .so-pane-caption{
background-color: transparent;
box-sizing: inherit;
}
.item-table-full{
display: table-cell;
vertical-align: top;
width: 100%;
}
.item-table-360{
display: table-cell;
vertical-align: middle;
max-width: 360px;
width: 360px;
overflow: hidden;
text-align: center;
}
.image-box > a{
border-style: solid;
border-width: 1px;
margin: 2px;
}
@media (min-width: 600px){
.main-box > div{
padding: 12px;
}
footer{
padding: 4px;
}
.item-table > div{
-ms-flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.item-table-full{
max-width: -webkit-calc(100% - 361px);
max-width: -moz-calc(100% - 361px);
max-width: calc(100% - 361px);
width: -webkit-calc(100% - 361px);
width: -moz-calc(100% - 361px);
width: calc(100% - 361px);
}
.image-box > a{
border-width: 4px;
margin: 10px;
}
}
@media (min-width: 680px){
.nav{
max-height: none;
top: 0;
position: relative;
float: right;
width: auto;
}
.vnav{
display: none;
}
.menu li{
float: left;
}
.menu a:hover{
background-color: transparent;
}
.hmb{
display: none;
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.item-table-full, .item-table-360 {
display: block !important;
}
.item-table-caption{
display: block !important;
}
}