136 lines
2.9 KiB
CSS
136 lines
2.9 KiB
CSS
@import url('{{ HOST }}:{{ HOST_PORT }}/fonts/weather-icons/weather-icons.css');
|
|
* {
|
|
box-sizing: border-box; /* Include padding and borders in size calculations */
|
|
}
|
|
html, body {
|
|
margin: 0; /* Prevent any default margins */
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
width: 600px;
|
|
height: 800px;
|
|
border: 2px solid red; /* Visual aid */
|
|
}
|
|
|
|
.dashboard {
|
|
border: 2px solid green; /* Visual aid */
|
|
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: column;
|
|
flex-direction: column;
|
|
font-family: sans-serif;
|
|
text-align: left;
|
|
font-size: 17px;
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0 auto; /* Center horizontally */
|
|
}
|
|
|
|
.panel.top {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-webkit-flex-direction: row;
|
|
flex-direction: row;
|
|
-webkit-box-flex: 0;
|
|
-webkit-flex: 0 1 auto;
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
.panel.top .splitpanel {
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.splitpanel.big-text {
|
|
font-size: 60px;
|
|
font-weight: bold;
|
|
vertical-align: top;
|
|
text-align: right;
|
|
}
|
|
|
|
.splitpanel .weather-icon {
|
|
font-size: 180px;
|
|
display: block;
|
|
margin: auto;
|
|
}
|
|
|
|
.panel.bottom {
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
flex: 1;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.panel.bottom.week .row {
|
|
border: 2px solid yellow; /* Visual aid */
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
flex: 1;
|
|
height: 50%;
|
|
align-items: stretch; /* Stretch children to fill the width (optional) */
|
|
|
|
}
|
|
|
|
.panel.bottom.week .row .day {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-orient: vertical; /* Old WebKit property for column layout */
|
|
-webkit-box-direction: column; /* Old WebKit property for forward direction */
|
|
-webkit-flex-direction: column; /* Flexbox column direction for modern WebKit */
|
|
flex-direction: column; /* Standard Flexbox column layout */
|
|
border-style: solid;
|
|
margin: 1px;
|
|
justify-content: flex-start; /* Align children at the top */
|
|
text-align: left;
|
|
flex: 1;
|
|
}
|
|
|
|
.day .day-title {
|
|
background-color: black;
|
|
text-align: center;
|
|
color: white;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.day .day-title.current-day {
|
|
color: black;
|
|
background-color: white;
|
|
border-bottom: solid black;
|
|
}
|
|
|
|
.day .event {
|
|
margin: 3pt;
|
|
background-color: white;
|
|
border-style: solid;
|
|
border-radius: 5px;
|
|
padding: 2px;
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
height: 1em;
|
|
}
|
|
|
|
code {
|
|
font-size: .8em;
|
|
} |