matebeamter/static/css/style.css

93 lines
1.4 KiB
CSS
Raw Normal View History

:root {
--tile-color: #36c30023;
--function-tile-color: #c300d223;
2019-12-24 12:17:45 +00:00
}
body {
margin: 30px;
2019-12-24 12:17:45 +00:00
}
form button, nav ul > li {
margin: 5px;
}
.tile-list, nav ul {
list-style: none;
padding: 0;
}
nav ul > li {
display: inline-block;
border-radius: 6px;
background-color: var(--function-tile-color);
padding : 10px;
2019-12-24 12:17:45 +00:00
}
2019-12-23 13:09:49 +00:00
.tile {
2019-12-24 12:17:45 +00:00
display: inline-flex;
flex-direction: column;
align-content: stretch;
align-items: stretch;
justify-content: center;
2019-12-23 13:09:49 +00:00
border-radius: 6px;
background-color: var(--tile-color);
2019-12-23 13:09:49 +00:00
box-shadow: 0 0 3px #c3c3c3;
margin: 30px 30px 0 5px;
2019-12-24 12:17:45 +00:00
width: 200px;
height: 200px;
text-align: center;
}
.tile > label, .tile > * {
flex: 1 1 auto;
}
.tile-content {
flex: 1 1 auto;
display: flex;
justify-content: center;
flex-direction: column;
align-content: stretch;
align-items: stretch;
}
.tile-content * {
flex: 1 1 auto;
display: inline-block;
width: 100%;
justify-content: center;
flex-direction: column;
align-content: stretch;
align-items: stretch;
margin: 0;
padding: 0;
}
.tile input[type="checkbox"] {
display: none;
}
.tile input[type="checkbox"] + * {
display: none;
opacity: 0;
transition: opacity 0.5s;
}
.tile input[type="checkbox"]:checked + * {
display: inline-block;
opacity: 1;
transition: opacity 0.5s;
}
2019-12-24 12:17:45 +00:00
.function {
background-color: var(--function-tile-color);
2019-12-23 13:09:49 +00:00
}
.tile-list + * {
margin-top: 30px;
2019-12-23 13:09:49 +00:00
}
2019-12-24 12:17:45 +00:00
hr {
margin-top: 30px;
2019-12-23 13:09:49 +00:00
}