mirror of
https://github.com/MichMich/MagicMirror.git
synced 2025-08-21 04:45:17 +00:00
Initial commit of V2.
This commit is contained in:
Michael Teeuw
292
css/main.css
292
css/main.css
@@ -1,224 +1,116 @@
|
||||
body,
|
||||
html {
|
||||
background: #000;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "HelveticaNeue-Light", sans-serif;
|
||||
letter-spacing: -2px;
|
||||
color: #fff;
|
||||
font-size: 75px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: geometricprecision;
|
||||
body {
|
||||
margin: 60px;
|
||||
position: relative;
|
||||
background: #000;
|
||||
color: #aaa;
|
||||
font-family: 'roboto_condensedregular', arial;
|
||||
font-size: 2em;
|
||||
line-height: 1.5em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.wi {
|
||||
line-height: 75px;
|
||||
/**
|
||||
* Default styles.
|
||||
*/
|
||||
|
||||
.dimmed {color: #555;}
|
||||
.normal {color: #999;}
|
||||
.bright {color: #fff;}
|
||||
|
||||
.xsmall {font-size: 15px; line-height: 20px;}
|
||||
.small {font-size: 20px; line-height: 25px;}
|
||||
.medium {font-size: 30px; line-height: 35px;}
|
||||
.large {font-size: 60px; line-height: 60px;}
|
||||
.xlarge {font-size: 70px; line-height: 70px; letter-spacing: -3px;}
|
||||
|
||||
.thin {font-family: 'robotothin'; }
|
||||
.light {font-family: 'roboto_condensedlight'; }
|
||||
.regular {font-family: 'roboto_condensedregular';}
|
||||
.bold {font-family: 'roboto_condensedbold';}
|
||||
|
||||
header {
|
||||
margin-top: 50px;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.4em;
|
||||
font-family: 'roboto_condensedregular';
|
||||
border-bottom: 1px solid #333;
|
||||
line-height: 0.35em;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.top {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
sup {
|
||||
font-size: 50%;
|
||||
line-height: 50%;
|
||||
}
|
||||
/**
|
||||
* Region Definitions.
|
||||
*/
|
||||
|
||||
.left {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
.region {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
text-align: right;
|
||||
.region.right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.center-ver {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
height: 200px;
|
||||
margin-top: -100px;
|
||||
line-height: 100px;
|
||||
.region.top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.lower-third {
|
||||
position: absolute;
|
||||
top: 66.666%;
|
||||
height: 200px;
|
||||
margin-top: -100px;
|
||||
line-height: 100px;
|
||||
.region.top .container{
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.center-hor {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
left: 50px;
|
||||
text-align: center;
|
||||
.region.top .container:empty {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
.region.top.center, .region.bottom.center {
|
||||
left: 50%;
|
||||
-moz-transform: translateX(-50%);
|
||||
-o-transform: translateX(-50%);
|
||||
-webkit-transform: translateX(-50%);
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.xxsmall,
|
||||
.xsmall,
|
||||
.small {
|
||||
font-family: "HelveticaNeue-Medium", sans-serif;
|
||||
letter-spacing: 0;
|
||||
.region.top.right, .region.top.left, .region.top.center {
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
.xxsmall {
|
||||
font-size: 15px;
|
||||
.region.bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.xxsmall .wi {
|
||||
line-height: 15px;
|
||||
.region.bottom .container{
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.xsmall {
|
||||
font-size: 20px;
|
||||
.region.bottom .container:empty {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.xsmall .wi {
|
||||
line-height: 20px;
|
||||
.region.bottom.right, .region.bottom.center, .region.bottom.left {
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 25px;
|
||||
.region.bar {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.small .wi {
|
||||
line-height: 25px;
|
||||
.region.third, .region.middle.center {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
-moz-transform: translateY(-50%);
|
||||
-o-transform: translateY(-50%);
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.medium {
|
||||
font-size: 35px;
|
||||
letter-spacing: -1px;
|
||||
font-family: "HelveticaNeue-Light", sans-serif;
|
||||
.region.upper.third {
|
||||
top: 33%;
|
||||
}
|
||||
|
||||
.medium .wi {
|
||||
line-height: 35px;
|
||||
.region.middle.center {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.xdimmed {
|
||||
color: #666;
|
||||
.region.lower.third {
|
||||
top: 66%;
|
||||
}
|
||||
|
||||
.dimmed {
|
||||
color: #aaa;
|
||||
.region.left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.light {
|
||||
font-family: "HelveticaNeue-UltraLight", sans-serif;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
top: -10px;
|
||||
display: inline-block;
|
||||
font-size: 45px;
|
||||
padding-right: 5px;
|
||||
font-weight: 100;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.icon-small {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
padding-left: 10px;
|
||||
padding-right: -10px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.time .sec {
|
||||
font-size: 25px;
|
||||
color: #666;
|
||||
padding-left: 5px;
|
||||
position: relative;
|
||||
top: -35px;
|
||||
}
|
||||
|
||||
.forecast-table {
|
||||
float: right;
|
||||
text-align: right;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.forecast-table .day,
|
||||
.forecast-table .temp-min,
|
||||
.forecast-table .temp-max {
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.forecast-table .temp-max {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.forecast-table .day {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.calendar-table {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.calendar-table .days {
|
||||
padding-left: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dishwasher {
|
||||
background-color: white;
|
||||
color: black;
|
||||
margin: 0 200px;
|
||||
font-size: 60px;
|
||||
border-radius: 1000px;
|
||||
border-radius: 1200px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HelveticaNeue-UltraLight';
|
||||
src: url('font/HelveticaNeue-UltraLight.eot');
|
||||
/* IE9 Compat Modes */
|
||||
src: url('font/HelveticaNeue-UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('font/HelveticaNeue-UltraLight.woff') format('woff'), /* Modern Browsers */
|
||||
url('font/HelveticaNeue-UltraLight.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('font/HelveticaNeue-UltraLight.svg#9453ea8da727d260bcdbfa605bdbb5d2') format('svg');
|
||||
/* Legacy iOS */
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HelveticaNeue-Medium';
|
||||
src: url('font/HelveticaNeue-Medium.eot');
|
||||
/* IE9 Compat Modes */
|
||||
src: url('font/HelveticaNeue-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('font/HelveticaNeue-Medium.woff') format('woff'), /* Modern Browsers */
|
||||
url('font/HelveticaNeue-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('font/HelveticaNeue-Medium.svg#d7af0fd9278f330eed98b60dddea7bd6') format('svg');
|
||||
/* Legacy iOS */
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'HelveticaNeue-Light';
|
||||
src: url('font/HelveticaNeue-Light.eot');
|
||||
/* IE9 Compat Modes */
|
||||
src: url('font/HelveticaNeue-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('font/HelveticaNeue-Light.woff') format('woff'), /* Modern Browsers */
|
||||
url('font/HelveticaNeue-Light.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('font/HelveticaNeue-Light.svg#7384ecabcada72f0e077cd45d8e1c705') format('svg');
|
||||
/* Legacy iOS */
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
.region.right {
|
||||
text-align: right;
|
||||
}
|
||||
@@ -1,327 +0,0 @@
|
||||
/*!
|
||||
* Weather Icons Beta 1
|
||||
* Weather themed icons for Bootstrap
|
||||
* ------------------------------------------------------------------------------
|
||||
* Maintained at http://erikflowers.github.io/weather-icons
|
||||
* http://twitter.com/Erik_UX
|
||||
*
|
||||
* License
|
||||
* ------------------------------------------------------------------------------
|
||||
* - Fpmt licensed under SIL OFL 1.1 -
|
||||
* http://scripts.sil.org/OFL
|
||||
* - CSS and LESS are licensed under MIT License -
|
||||
* http://opensource.org/licenses/mit-license.html
|
||||
* - Documentation licensed under CC BY 3.0 -
|
||||
* http://creativecommons.org/licenses/by/3.0/
|
||||
* - Inspired by and works great as a companion with Font Aweosme
|
||||
* "Font Awesome by Dave Gandy - http://fontawesome.io"
|
||||
*
|
||||
* Weather Icons Bootstrap Package Author - Erik Flowers - erik@helloerik.com
|
||||
* Weather Icons gives full credit for inspiration to Font Awesome and makes no
|
||||
* claim to invention, intellectual property, or ownership of methodology.
|
||||
*
|
||||
* Support Open Source!
|
||||
*
|
||||
* ------------------------------------------------------------------------------
|
||||
* Email: erik@helloerik.com
|
||||
* Twitter: http://twitter.com/Erik_UX
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'weather';
|
||||
src: url('../font/weathericons-regular-webfont.eot');
|
||||
src: url('../font/weathericons-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../font/weathericons-regular-webfont.woff') format('woff'), url('../font/weathericons-regular-webfont.ttf') format('truetype'), url('../font/weathericons-regular-webfont.svg#weathericons-regular-webfontRg') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
[class^="wi-"],
|
||||
[class*=" wi-"] {
|
||||
font-family: weather;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
text-decoration: inherit;
|
||||
text-transform: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
*margin-right: .3em;
|
||||
}
|
||||
[class^="wi-"]:before,
|
||||
[class*=" wi-"]:before {
|
||||
text-decoration: inherit;
|
||||
display: inline-block;
|
||||
speak: none;
|
||||
}
|
||||
.wi-day-cloudy-gusts:before {
|
||||
content: "\f000";
|
||||
}
|
||||
.wi-day-cloudy-windy:before {
|
||||
content: "\f001";
|
||||
}
|
||||
.wi-day-cloudy:before {
|
||||
content: "\f002";
|
||||
}
|
||||
.wi-day-fog:before {
|
||||
content: "\f003";
|
||||
}
|
||||
.wi-day-hail:before {
|
||||
content: "\f004";
|
||||
}
|
||||
.wi-day-lightning:before {
|
||||
content: "\f005";
|
||||
}
|
||||
.wi-day-rain-mix:before {
|
||||
content: "\f006";
|
||||
}
|
||||
.wi-day-rain-wind:before {
|
||||
content: "\f007";
|
||||
}
|
||||
.wi-day-rain:before {
|
||||
content: "\f008";
|
||||
}
|
||||
.wi-day-showers:before {
|
||||
content: "\f009";
|
||||
}
|
||||
.wi-day-snow:before {
|
||||
content: "\f00a";
|
||||
}
|
||||
.wi-day-sprinkle:before {
|
||||
content: "\f00b";
|
||||
}
|
||||
.wi-day-sunny-overcast:before {
|
||||
content: "\f00c";
|
||||
}
|
||||
.wi-day-sunny:before {
|
||||
content: "\f00d";
|
||||
}
|
||||
.wi-day-storm-showers:before {
|
||||
content: "\f00e";
|
||||
}
|
||||
.wi-day-thunderstorm:before {
|
||||
content: "\f010";
|
||||
}
|
||||
.wi-cloudy-gusts:before {
|
||||
content: "\f011";
|
||||
}
|
||||
.wi-cloudy-windy:before {
|
||||
content: "\f012";
|
||||
}
|
||||
.wi-cloudy:before {
|
||||
content: "\f013";
|
||||
}
|
||||
.wi-fog:before {
|
||||
content: "\f014";
|
||||
}
|
||||
.wi-hail:before {
|
||||
content: "\f015";
|
||||
}
|
||||
.wi-lightning:before {
|
||||
content: "\f016";
|
||||
}
|
||||
.wi-rain-mix:before {
|
||||
content: "\f017";
|
||||
}
|
||||
.wi-rain-wind:before {
|
||||
content: "\f018";
|
||||
}
|
||||
.wi-rain:before {
|
||||
content: "\f019";
|
||||
}
|
||||
.wi-showers:before {
|
||||
content: "\f01a";
|
||||
}
|
||||
.wi-snow:before {
|
||||
content: "\f01b";
|
||||
}
|
||||
.wi-sprinkle:before {
|
||||
content: "\f01c";
|
||||
}
|
||||
.wi-storm-showers:before {
|
||||
content: "\f01d";
|
||||
}
|
||||
.wi-thunderstorm:before {
|
||||
content: "\f01e";
|
||||
}
|
||||
.wi-windy:before {
|
||||
content: "\f021";
|
||||
}
|
||||
.wi-night-alt-cloudy-gusts:before {
|
||||
content: "\f022";
|
||||
}
|
||||
.wi-night-alt-cloudy-windy:before {
|
||||
content: "\f023";
|
||||
}
|
||||
.wi-night-alt-hail:before {
|
||||
content: "\f024";
|
||||
}
|
||||
.wi-night-alt-lightning:before {
|
||||
content: "\f025";
|
||||
}
|
||||
.wi-night-alt-rain-mix:before {
|
||||
content: "\f026";
|
||||
}
|
||||
.wi-night-alt-rain-wind:before {
|
||||
content: "\f027";
|
||||
}
|
||||
.wi-night-alt-rain:before {
|
||||
content: "\f028";
|
||||
}
|
||||
.wi-night-alt-showers:before {
|
||||
content: "\f029";
|
||||
}
|
||||
.wi-night-alt-snow:before {
|
||||
content: "\f02a";
|
||||
}
|
||||
.wi-night-alt-sprinkle:before {
|
||||
content: "\f02b";
|
||||
}
|
||||
.wi-night-alt-storm-showers:before {
|
||||
content: "\f02c";
|
||||
}
|
||||
.wi-night-alt-thunderstorm:before {
|
||||
content: "\f02d";
|
||||
}
|
||||
.wi-night-clear:before {
|
||||
content: "\f02e";
|
||||
}
|
||||
.wi-night-cloudy-gusts:before {
|
||||
content: "\f02f";
|
||||
}
|
||||
.wi-night-cloudy-windy:before {
|
||||
content: "\f030";
|
||||
}
|
||||
.wi-night-cloudy:before {
|
||||
content: "\f031";
|
||||
}
|
||||
.wi-night-hail:before {
|
||||
content: "\f032";
|
||||
}
|
||||
.wi-night-lightning:before {
|
||||
content: "\f033";
|
||||
}
|
||||
.wi-night-rain-mix:before {
|
||||
content: "\f034";
|
||||
}
|
||||
.wi-night-rain-wind:before {
|
||||
content: "\f035";
|
||||
}
|
||||
.wi-night-rain:before {
|
||||
content: "\f036";
|
||||
}
|
||||
.wi-night-showers:before {
|
||||
content: "\f037";
|
||||
}
|
||||
.wi-night-snow:before {
|
||||
content: "\f038";
|
||||
}
|
||||
.wi-night-sprinkle:before {
|
||||
content: "\f039";
|
||||
}
|
||||
.wi-night-storm-showers:before {
|
||||
content: "\f03a";
|
||||
}
|
||||
.wi-night-thunderstorm:before {
|
||||
content: "\f03b";
|
||||
}
|
||||
.wi-celcius:before {
|
||||
content: "\f03c";
|
||||
}
|
||||
.wi-cloud-down:before {
|
||||
content: "\f03d";
|
||||
}
|
||||
.wi-cloud-refresh:before {
|
||||
content: "\f03e";
|
||||
}
|
||||
.wi-cloud-up:before {
|
||||
content: "\f040";
|
||||
}
|
||||
.wi-cloud:before {
|
||||
content: "\f041";
|
||||
}
|
||||
.wi-degrees:before {
|
||||
content: "\f042";
|
||||
}
|
||||
.wi-down-left:before {
|
||||
content: "\f043";
|
||||
}
|
||||
.wi-down:before {
|
||||
content: "\f044";
|
||||
}
|
||||
.wi-fahrenheit:before {
|
||||
content: "\f045";
|
||||
}
|
||||
.wi-horizon-alt:before {
|
||||
content: "\f046";
|
||||
}
|
||||
.wi-horizon:before {
|
||||
content: "\f047";
|
||||
}
|
||||
.wi-left:before {
|
||||
content: "\f048";
|
||||
}
|
||||
.wi-lightning:before {
|
||||
content: "\f016";
|
||||
}
|
||||
.wi-night-fog:before {
|
||||
content: "\f04a";
|
||||
}
|
||||
.wi-refresh-alt:before {
|
||||
content: "\f04b";
|
||||
}
|
||||
.wi-refresh:before {
|
||||
content: "\f04c";
|
||||
}
|
||||
.wi-right:before {
|
||||
content: "\f04d";
|
||||
}
|
||||
.wi-sprinkles:before {
|
||||
content: "\f04e";
|
||||
}
|
||||
.wi-strong-wind:before {
|
||||
content: "\f050";
|
||||
}
|
||||
.wi-sunrise:before {
|
||||
content: "\f051";
|
||||
}
|
||||
.wi-sunset:before {
|
||||
content: "\f052";
|
||||
}
|
||||
.wi-thermometer-exterior:before {
|
||||
content: "\f053";
|
||||
}
|
||||
.wi-thermometer-internal:before {
|
||||
content: "\f054";
|
||||
}
|
||||
.wi-thermometer:before {
|
||||
content: "\f055";
|
||||
}
|
||||
.wi-tornado:before {
|
||||
content: "\f056";
|
||||
}
|
||||
.wi-up-right:before {
|
||||
content: "\f057";
|
||||
}
|
||||
.wi-up:before {
|
||||
content: "\f058";
|
||||
}
|
||||
.wi-wind-east:before {
|
||||
content: "\f059";
|
||||
}
|
||||
.wi-wind-north-east:before {
|
||||
content: "\f05a";
|
||||
}
|
||||
.wi-wind-north-west:before {
|
||||
content: "\f05b";
|
||||
}
|
||||
.wi-wind-north:before {
|
||||
content: "\f05c";
|
||||
}
|
||||
.wi-wind-south-east:before {
|
||||
content: "\f05d";
|
||||
}
|
||||
.wi-wind-south-west:before {
|
||||
content: "\f05e";
|
||||
}
|
||||
.wi-wind-south:before {
|
||||
content: "\f060";
|
||||
}
|
||||
.wi-wind-west:before {
|
||||
content: "\f061";
|
||||
}
|
||||
Reference in New Issue
Block a user