1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162 |
- page-home {
- }
- .grid-container {
- display: grid;
- height: 100%;
- width: 100%;
- grid-template-columns: 5% 1fr 10% 1fr 5%;
- grid-template-rows: 10% 1fr 1fr 1fr 1fr 10%;
- grid-gap: 1px 1px;
- }
- h2 {
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
- font-weight: 700;
- }
- .header { grid-area: 1 / 2 / 2 / 5; }
- .graph { grid-area: 2 / 2 / 4 / 5; }
- .temperature_label { grid-area: 4 / 2 / 5 / 4; }
- .temperature_value { grid-area: 4 / 4 / 5 / 5; text-align: right; }
- .temperature_label, .temperature_value {
- font-size: 1.2em;
- }
- .gauge-1 { grid-area: 5 / 2 / 6 / 3; }
- .gauge-2 { grid-area: 5 / 4 / 6 / 5; }
- .error { grid-area: 3 / 2 / 4 / 5; text-align: center }
- .gauge-container {
- /* width: 150px;
- height: 150px; */
- display: block;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
- /* padding: 10px; */
- }
- .gauge-container > .gauge > .dial {
- stroke: #eee;
- stroke-width: 5;
- fill: rgba(0,0,0,0);
- }
- .gauge-container > .gauge > .value {
- stroke: #999;
- stroke-width: 5;
- fill: rgba(0,0,0,0);
- }
- .gauge-container > .gauge > .value-text {
- fill: #ffc107;
- font-size: 1em;
- }
- .gauge-container > .gauge > .title {
- fill: #ffc107;
- font-size: 1em;
- }
|