From f8c586f6a7384b2d59e8de24d13685f20041dc66 Mon Sep 17 00:00:00 2001 From: galadril Date: Wed, 23 Sep 2015 18:53:14 +0200 Subject: [PATCH] Added different style sheets Added different style sheets --- css/mainLight.css | 856 ++++++++++++++++++++++++++++++++++++++++++ css/mainPurple.css | 864 +++++++++++++++++++++++++++++++++++++++++++ frontpage.html | 7 +- graph.html | 10 +- js/methods.js | 18 + lights.html | 13 +- logs.html | 6 +- settings/settings.js | 2 + weather.html | 11 +- 9 files changed, 1774 insertions(+), 13 deletions(-) create mode 100644 css/mainLight.css create mode 100644 css/mainPurple.css diff --git a/css/mainLight.css b/css/mainLight.css new file mode 100644 index 0000000..1e19f7a --- /dev/null +++ b/css/mainLight.css @@ -0,0 +1,856 @@ + +body { + background:#FFFFFF; + font-family: 'Open Sans', sans-serif; +} + +h1 { +font-family: 'Raleway', sans-serif;} + +h3,h4 , h5 { + font-family: 'Open Sans', sans-serif; + font-weight:lighter; +} + +.navbar-inverse { + background-color: #F3927F;!important + border-color: #F3927F;!important +} + +.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover { + background-color: #EF806B; + color: #fff; +} + +.navbar-inverse .navbar-brand { + color: #fff; +} + +.navbar-inverse .navbar-nav > li > a { + color: #fff; +} + +h2{ + font-size:22px; +} + +h3 { + font-size:46px; + color:#b2c831 +} + +h5 { + color:#b2c831; + margin-left:5px; +} + +/***********BLOCKS & WRAPS***********/ + +/*--- Dash Unit / Used in Dashboard page ---*/ +.dash-unit { + margin-bottom: 30px; + padding-bottom:10px; + border: 5px solid #EFF0F2; + border-radius:10px; + background-color: #FAFBFD; + color:grey; + height:290px; +} + +.flatWeatherPlugin .wiDetail { + color: #7BCFBB;!important +} + +.dash-unit:hover { + background-color: #F0F3F7; +} + +.dash-unit dtitle { + font-size:11px; + text-transform:uppercase; + color:#828890; + margin:8px; + padding:0px; + height:inherit + } + +.dash-unit hr { + border: 0; + border-top: 1px solid #F0F3F7; + border-top-style: dashed; + margin-top:3px; +} + +.dash-unit h1 { + font-family: 'Raleway', sans-serif; + font-weight:300; + font-size: 20px; + line-height: 2px; + letter-spacing: 0px; + color: #828890; + padding-top:10px; + padding-left:5px; + margin-top:2px; + text-align:center; +} + +.dash-unit h2 { + font-family: 'Open Sans', sans-serif; + font-weight: bold; + font-size: 30px; + line-height: 26px; + letter-spacing: 0px; + color: #828890; + padding-top:10px; + padding-left:5px; + margin-top:2px; + text-align:center; +} + + +.dash-unit h3 { + font-weight:300; + font-size: 15px; + line-height: 2px; + letter-spacing: 0px; + color: #b2c831; + padding-top:10px; + padding-left:5px; + margin-top:2px; + text-align:center; +} + + +.dash-unit p { + font-size: 14px; + font-weight: 200; + line-height: 16px; + color: inherit; + margin: 0 0 10px; + padding:5px; + } + +.dash-unit h4 { + padding-left:5px; + margin-top:2px; + font-size: 13px; + font-weight:lighter; + line-height: 1; + letter-spacing: 0px; + color: #fff; +} + +.dash-unit bold{ + font-family: 'Open Sans', sans-serif; + font-size:26px; + font-weight:bold; + color:#fff; + vertical-align:middle; +} + + +/**********Half-Unit / Used in index.html**********/ +.half-unit { + margin-bottom: 30px; + padding-bottom: 4px; + border: 5px solid #EFF0F2; + border-radius:10px; + background-color: #FAFBFD; + color:grey; + height:130px; +} + +.half-unit:hover { + background-color: #F0F3F7; + +} + +.half-unit dtitle { + font-size:10px; + text-transform:uppercase; + color:#828890; + margin:8px; + padding:0px; + height:inherit + } + +.half-unit hr { + border: 0; + border-top: 1px solid #151515; + border-top-style: dashed; + margin-top:3px; +} + +.half-unit h1 { + font-family: 'Raleway', sans-serif; + font-weight:300; + font-size: 20px; + line-height: 1; + letter-spacing: 0px; + color: #828890; + padding-top:10px; + padding-left:5px; + margin-top:2px; + text-align:center; +} + +.half-unit h4 { + padding-left:5px; + margin-top:2px; + font-size: 13px; + font-weight:lighter; + line-height: 1; + letter-spacing: 0px; + color: #fff; +} + + +.half-unit bold{ + font-family: 'Open Sans', sans-serif; + font-size:26px; + font-weight:bold; + color:#fff; + vertical-align:middle; +} + +/**********Styling Elements**********/ +.cont { + text-align:center; + margin-top:30px; +} + +.cont ok { + color:#b2c831; +} + +.cont bad { + color:#fa1d2d; +} + +.cont2 { + text-align:center; + margin-top:-15px; + font-size:12px; + line-height:7px; +} + +.cont2 bold{ + font-size:10px; + font-weight:bold; + color:#b2c831 +} + +.text p { + font-family: 'Open Sans', sans-serif; + margin-left:8px; + font-size:14px; + line-height:18px; +} + +.text grey { + font-size:11px; + color:silver +} + + +/***********Bootstrap Default Modifications***********/ + +.thumbnail { + border:0px; + text-align:center; + -webkit-box-shadow: 0px; + -moz-box-shadow: 0px; + box-shadow: 0px; + background: none; + text-align: center; + +} + +.modal-header { + + background-color: #4f4f4f; + color:#fff; +} + + +input[type=submit] { + font-family: 'Open Sans', sans-serif; + font-size: 15px; + background: #b2c831; + color: #fff; + border: none; + padding: 8px 28px 10px 26px; + *-webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + +} +input[type=text], textarea { + background: #cdcbcc; + font-size: 13px; + display: block; + width: 100%; + border: none; + box-shadow: none; + height: 30px; + line-height: 18px; + padding: 0; + text-indent: 18px; + margin: 0 0 18px; +} +textarea { + line-height: 18px; + padding: 18px; + width: 100%; + text-indent: 0; +} +.textarea-container { margin: 0 18px; } +.textarea-container textarea { margin-left: -18px; } +#contact textarea { width: 100%; height: 45px; } + + +.progress-bar { + background-color: #b2c831; +} + + + + +/***********LineIcons Styles***********/ + + +.info-user { + text-align:center; + font-size: 24px; + color: #b2c831; + } + +.fs1 { + padding:5px 5px 5px 5px; + position:relative; +} + +.fs1:hover { + position:relative; + color: #fff; + cursor:pointer +} + +.fs2 { + padding:5px 5px 5px 5px; + position:relative; + font-size:35px; + vertical-align: text-bottom +} + +/**********Clock Configuration**********/ + +digiclock { + font-size: 30px; + color: #F3C17F; + text-align: center; + line-height: 60px; + margin-left: auto +} + +.clockcenter { + text-align:center; +} + + +/**********Mail Style Configuration**********/ + +.framemail { + cursor: default; +} +.framemail .window { + font-size: 0; + margin-top: -1px; + overflow: hidden; + margin-left: -18px; +} +.framemail .window .mail li { + background-color:#3d3d3d; + background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)); + background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)); + background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)); + background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)); + background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)); + border-top: 1px solid #888; + position: relative; + margin-left:-18px; +} +.framemail .window .mail li:first-child { + border-top: none; +} +.framemail .window .mail li:hover { + background-color: #5d5b5b; +} +.framemail .window .mail li:after, +.framemail .window .mail li:before { + border-left: 8px solid transparent; + border-top: 8px solid #df6; + content: ''; + height: 0; + position: absolute; + right: 0; + top: 0; + width: 0; +} +.framemail .window .mail li:before { + border-top-color: #bbb; + border-width: 9px; +} +.framemail .window .mail li:nth-child(1):after, +.framemail .window .mail li:nth-child(1):before { + border: none; +} +.framemail .window .mail li:nth-child(2):after { + border-top-color: #fa1d2d; +} +.framemail .window .mail li i { + display: inline-block; + height: 48px; + width: 6px; +} +.framemail .window .mail li .read { + background-color: #ddd; +} +.framemail .window .mail li .unread { + background: #b2c831; +} +.framemail .window .mail li img { + background: #819da2; + border-radius: 2px; + height: 36px; + left: 12px; + position: absolute; + top: 6px; + width: 36px; +} +.framemail .window .mail li p { + font: 13px/24px sans-serif; + left: 56px; + position: absolute; + top: 3px; +} +.framemail .window .mail li .sender { + color: #e9e8e8; + font-weight: bold; + text-shadow: 0 1px 1px hsla(0,0%,100%,.5); +} +.framemail .window .mail li .message { + color: #999; + overflow: hidden; + text-overflow: ellipsis; + top: 21px; + white-space: nowrap; +} +.framemail .window .mail li .message strong { + color: #999; +} +.framemail .window .mail li .actions { + height: 16px; + position: absolute; + right: 19px; + text-align: right; + top: 0; + width: 96px; +} +.framemail .window .mail li .actions img { + background: none; + display: inline-block; + height: 16px; + margin-left: 6px; + opacity: .1; + position: relative; + width: 16px; +} +.framemail .window .mail li:hover .actions img { + opacity: .25; +} +.framemail .window .mail li .actions img:hover { + opacity: .75; +} + + +/**********DONUT CHARTS STYLES**********/ +#load { + width: 11.313em; + height: 11.313em; + -moz-border-radius: 5px; + border-radius: 5px; + margin-bottom: 1.063em; + background-position: center center; + margin:auto; +} + +#space { + width: 11.313em; + height: 11.313em; + -moz-border-radius: 5px; + border-radius: 5px; + margin-bottom: 1.063em; + background-position: center center; + margin:auto; +} + + +/**********LINE AND BARS**********/ + +.section-graph { + position: relative; + height: 130px; + color: #fff; + background-image: linear-gradient(color-stops(#b2c831, #b2c831 50%, #b2c831 50%)); + margin-bottom:20px; +} +.section-graph .graph-info { + z-index: 99; + position: absolute; + font-weight: bold; + margin-top: 12px; + margin-left: 21px; + width: 100px; +} +.section-graph .graph-info .graph-arrow { + width: 0; + height: 0; + margin-top: 18px; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-bottom: 4px solid white; + float: left; +} +.section-graph .graph-info .graph-info-big { + font-size: 24px; + float: left; + margin-left: 3px; +} +.section-graph .graph-info .graph-info-small { + margin-left: 3px; + font-size: 12px; + font-weight: normal; + color: rgba(255, 255, 255, 0.5); + clear: left; + margin-left: 8px; +} +/* + * Info Section + */ +.info-aapl { + text-align: center; + +} +.info-aapl ul { + margin-left:30%; + +} +.info-aapl li { + margin: 0; + display: block; + width: 9px; + height: 40px; + margin-right: 6px; + background-color: #f5f0ec; + float:left; + position: relative; +} +.info-aapl li span { + display: block; + width: 9px; + height: 40px; + position: absolute; + bottom: 0; +} +.info-aapl li span.orange { + background-color: #fa1d2d; +} +.info-aapl li span.green { + background-color: #b2c831; +} + +/**********TWITTER WIDGET **********/ +#jstwitter ul li{ + color:#bdbdbd; + padding:.5em .75em; +} + +#jstwitter ul{ + margin-left:0; + list-style:none +} + +#jstwitter:first-child{ + border-top:0 +} + +ul#jstwitter li a{ + font-size:10px; + font-style:italic; + color:#666; + text-decoration:none +} + +/********** CUSTOMIZED BUTTON **********/ +.btnnew { + display: inline-block; + *border-left: 0 none #707070; + border-right: 0 none #707070; + border-top: 0 none #707070; + border-bottom: 0 none #707070; + display: inline; + padding: 4px 12px; + margin-bottom: 0; + *margin-left: .3em; + font-size: 14px; + line-height: 20px; + color: #b2c831; + text-align: center; + vertical-align: middle; + cursor: pointer; + background-color: #5a5a5a; + *background-color: #5a5a5a; + background-repeat: repeat-x; + *-webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + zoom: 1; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + background-image: linear-gradient(to bottom, #707070, #707070);* +} + +/********** SWITCH BUTTON **********/ +.switch { + position: relative; + margin: 20px auto; + height: 26px; + width: 120px; + background: rgba(0, 0, 0, 0.25); + border-radius: 3px; + -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); +} + +.switch-label { + position: relative; + z-index: 2; + float: left; + width: 58px; + line-height: 26px; + font-size: 11px; + color: rgba(255, 255, 255, 0.35); + text-align: center; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); + cursor: pointer; +} +.switch-label:active { + font-weight: bold; +} + +.switch-label-off { + padding-left: 2px; +} + +.switch-label-on { + padding-right: 2px; +} + +/* + * Note: using adjacent or general sibling selectors combined with + * pseudo classes doesn't work in Safari 5.0 and Chrome 12. + * See this article for more info and a potential fix: + * http://css-tricks.com/webkit-sibling-bug/ + */ +.switch-input { + display: none; +} +.switch-input:checked + .switch-label { + font-weight: bold; + color: rgba(0, 0, 0, 0.65); + text-shadow: 0 1px rgba(255, 255, 255, 0.25); + -webkit-transition: 0.15s ease-out; + -moz-transition: 0.15s ease-out; + -o-transition: 0.15s ease-out; + transition: 0.15s ease-out; +} +.switch-input:checked + .switch-label-on ~ .switch-selection { + left: 60px; + /* Note: left: 50% doesn't transition in WebKit */ +} + +.switch-selection { + display: block; + position: absolute; + z-index: 1; + top: 2px; + left: 2px; + width: 58px; + height: 22px; + background: #b2c831; + border-radius: 3px; + background-image: -webkit-linear-gradient(top, #b6c753, #b2c831); + background-image: -moz-linear-gradient(top, #b6c753, #b2c831); + background-image: -o-linear-gradient(top, #b6c753, #b2c831); + background-image: linear-gradient(to bottom, #b6c753, #b2c831); + -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); + -webkit-transition: left 0.15s ease-out; + -moz-transition: left 0.15s ease-out; + -o-transition: left 0.15s ease-out; + transition: left 0.15s ease-out; +} +.switch-blue .switch-selection { + background: #3aa2d0; + background-image: -webkit-linear-gradient(top, #4fc9ee, #3aa2d0); + background-image: -moz-linear-gradient(top, #4fc9ee, #3aa2d0); + background-image: -o-linear-gradient(top, #4fc9ee, #3aa2d0); + background-image: linear-gradient(to bottom, #4fc9ee, #3aa2d0); +} +.switch-yellow .switch-selection { + background: #fa1d2d; + background-image: -webkit-linear-gradient(top, #f93e4b, #fa1d2d); + background-image: -moz-linear-gradient(top, #f93e4b, #fa1d2d); + background-image: -o-linear-gradient(top, #f93e4b, #fa1d2d); + background-image: linear-gradient(to bottom, #f93e4b, #fa1d2d); +} + + +/**********Gauge Chart**********/ +#canvas { + display: block; + width: 150px; + margin: 30px auto; +} + +/**********Accordion Styling**********/ + +.accordion-group { + border: 1px solid #222; +} +.accordion-heading { + background-color: #5a5a5a; + *background-color: #5a5a5a; + background-repeat: repeat-x; + *-webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + zoom: 1; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + background-image: linear-gradient(to bottom, #707070, #707070);* +} + +/**********Link Styling**********/ +a { + color: #b2c831; + text-decoration: none; +} + +a:hover { + color: #dff948; + text-decoration: none; +} + + + +/**********FooterWrap Section**********/ +#footerwrap { + width: 100%; + background:#262626; + + padding-top:25px; + padding-bottom: 40px; + border-top-style: solid; + border-top-width:8px; + border-top-color:#1d1d1d; + text-align:center + +} + +#footerwrap p { + color:white; + font-size:12px; +} + + +/***********FULLCALENDAR STYLE***********/ + +#external-events { + padding: 0 10px; + border: 1px solid #8b8b8a; + background-color: #8b8b8a; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + text-align: left; + } + +#external-events h4 { + font-size: 16px; + margin-top: 0; + padding-top: 1em; + } + +.external-event { /* try to mimick the look of a real event */ + margin: 10px 0; + padding: 2px 4px; + background: #b2c831; + color: #fff; + font-size: .85em; + cursor: pointer; + } + +#external-events p { + margin: 1.5em 0; + font-size: 11px; + color: #b2c831; + } + +#external-events p input { + margin: 0; + vertical-align: middle; + } + +#calendar { + width:100%; + } + + +/**********Media Styles**********/ + +@media (max-width: 360px){ +/*Calendar Adsjustments*/ +.fc-header {margin-top:15px;} +.fc-header-title h2{font-size:10px; } +.fc-header-right {display:none} + +/* portrait tablet */ +@media (min-width: 767px) and (max-width: 768px) { + .info-aapl ul { + margin-left:10px; + float:left; +} + +#load { + margin-left:5px; + margin-right:10px; +} + +#space { + margin-left:5px; + margin-right:10px; +} + +} + +/* Landscape iphone 5 and samsung galaxy */ +@media (min-width: 560px) and (max-width: 685px) { + .info-aapl ul { + margin-left:40%; +} + +} \ No newline at end of file diff --git a/css/mainPurple.css b/css/mainPurple.css new file mode 100644 index 0000000..ce04b7b --- /dev/null +++ b/css/mainPurple.css @@ -0,0 +1,864 @@ + +body { + background:#1F253D; + font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; +} + +h1 { + + font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; + } + +h3,h4 , h5 { + font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; + font-weight:lighter; +} + +.navbar-inverse .navbar-brand { + color: #8bc34a; +} +.navbar-inverse { + background-color: #394165;!important + border-color: #3469AF;!important +} +.navbar-inverse .navbar-nav > li > a { +text-transform: uppercase; + color: #fff; + font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; +} +.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover { + background-color: #3469AF; + text-transform: uppercase; + color: #fff; + font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; +} + +h2{ + font-size:22px; +} + +h3 { + font-size:46px; + color:#b2c831 +} + +h5 { + color:#b2c831; + margin-left:5px; +} + +/***********BLOCKS & WRAPS***********/ + +/*--- Dash Unit / Used in Dashboard page ---*/ +.dash-unit { + margin-bottom: 30px; + padding-bottom:10px; + border: 5px solid #383E60; + background-color: #394165; + color:white; + height:290px; + border-radius: 10px; +} + +.dash-unit:hover { + background-color: #383E60; + -moz-box-shadow: 3px 3px 2px 0px #151515; + -webkit-box-shadow: 3px 3px 2px 0px #151515; + box-shadow: 3px 3px 2px 0px #151515; + +} + +.dash-unit dtitle { + align-self: center; + color: #ffffff; + font-size: 14px; + height: inherit; + margin: 8px; + padding: 0; +} + +.dash-unit hr { + border: 0; + border-top: 0px solid #151515; + border-top-style: dashed; + margin-top:3px; +} + +.dash-unit h1 { + font-family: 'Raleway', sans-serif; + font-weight:300; + font-size: 20px; + line-height: 2px; + letter-spacing: 0px; + color: #ffffff; + padding-top:10px; + padding-left:5px; + margin-top:2px; + text-align:center; +} + +.dash-unit h2 { + font-family: 'Open Sans', sans-serif; + font-weight: bold; + font-size: 30px; + line-height: 26px; + letter-spacing: 0px; + color: #ffffff; + padding-top:10px; + padding-left:5px; + margin-top:2px; + text-align:center; +} + + +.dash-unit h3 { + font-weight:300; + font-size: 15px; + line-height: 2px; + letter-spacing: 0px; + color: #b2c831; + padding-top:10px; + padding-left:5px; + margin-top:2px; + text-align:center; +} + + +.dash-unit p { + font-size: 14px; + font-weight: 200; + line-height: 14px; + color: inherit; + margin: 0 0 10px; + padding:5px; + } + +.dash-unit h4 { + padding-left:5px; + margin-top:2px; + font-size: 13px; + font-weight:lighter; + line-height: 1; + letter-spacing: 0px; + color: #fff; +} + +.dash-unit bold{ + font-family: 'Open Sans', sans-serif; + font-size:26px; + font-weight:bold; + color:#fff; + vertical-align:middle; +} + +.switch-blue .switch-selection { + background: #383E60 repeat scroll 0 0;!important +} + +/**********Half-Unit / Used in index.html**********/ +.half-unit { + margin-bottom: 30px; + padding-bottom: 4px; + border: 5px solid #383E60; + background-color: #394165; + color:white; + height:130px; + border-radius: 10px; +} + +.half-unit:hover { + background-color: #383E60; + -moz-box-shadow: 3px 3px 2px 0px #151515; + -webkit-box-shadow: 3px 3px 2px 0px #151515; + box-shadow: 3px 3px 2px 0px #151515; + +} + +.half-unit dtitle { + font-size:14px; + color:#ffffff; + margin:8px; + padding:0px; + height:inherit + } + +.half-unit hr { + border: 0; + border-top: 0px solid #151515; + border-top-style: dashed; + margin-top:3px; +} + +.half-unit h1 { + font-family: 'Raleway', sans-serif; + font-weight:300; + font-size: 20px; + line-height: 1; + letter-spacing: 0px; + color: #ffffff; + padding-top:10px; + padding-left:5px; + margin-top:2px; + text-align:center; +} + +.half-unit h4 { + padding-left:5px; + margin-top:2px; + font-size: 13px; + font-weight:lighter; + line-height: 1; + letter-spacing: 0px; + color: #fff; +} + + +.half-unit bold{ + font-family: 'Open Sans', sans-serif; + font-size:26px; + font-weight:bold; + color:#fff; + vertical-align:middle; +} + +/**********Styling Elements**********/ +.cont { + text-align:center; + margin-top:30px; +} + +.cont ok { + color:#b2c831; +} + +.cont bad { + color:#fa1d2d; +} + +.cont2 { + text-align:center; + margin-top:-15px; + font-size:12px; + line-height:7px; +} + +.cont2 bold{ + font-size:10px; + font-weight:bold; + color:#b2c831 +} + +.text p { + font-family: 'Open Sans', sans-serif; + margin-left:8px; + font-size:14px; + line-height:18px; +} + +.text grey { + font-size:11px; + color:silver +} + + +/***********Bootstrap Default Modifications***********/ + +.thumbnail { + border:0px; + text-align:center; + -webkit-box-shadow: 0px; + -moz-box-shadow: 0px; + box-shadow: 0px; + background: none; + text-align: center; + +} + +.modal-header { + + background-color: #4f4f4f; + color:#fff; +} + + +input[type=submit] { + font-family: 'Open Sans', sans-serif; + font-size: 15px; + background: #b2c831; + color: #fff; + border: none; + padding: 8px 28px 10px 26px; + *-webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + +} +input[type=text], textarea { + background: #cdcbcc; + font-size: 13px; + display: block; + width: 100%; + border: none; + box-shadow: none; + height: 30px; + line-height: 18px; + padding: 0; + text-indent: 18px; + margin: 0 0 18px; +} +textarea { + line-height: 18px; + padding: 18px; + width: 100%; + text-indent: 0; +} +.textarea-container { margin: 0 18px; } +.textarea-container textarea { margin-left: -18px; } +#contact textarea { width: 100%; height: 45px; } + + +.progress-bar { + background-color: #b2c831; +} + + + + +/***********LineIcons Styles***********/ + + +.info-user { + text-align:center; + font-size: 24px; + color: #b2c831; + } + +.fs1 { + padding:5px 5px 5px 5px; + position:relative; +} + +.fs1:hover { + position:relative; + color: #fff; + cursor:pointer +} + +.fs2 { + padding:5px 5px 5px 5px; + position:relative; + font-size:35px; + vertical-align: text-bottom +} + +/**********Clock Configuration**********/ + +digiclock { + font-size: 30px; + color: #fff; + text-align: center; + line-height: 60px; + margin-left: auto +} + +.clockcenter { + text-align:center; +} + + +/**********Mail Style Configuration**********/ + +.framemail { + cursor: default; +} +.framemail .window { + font-size: 0; + margin-top: -1px; + overflow: hidden; + margin-left: -18px; +} +.framemail .window .mail li { + background-color:#3d3d3d; + background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)); + background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)); + background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)); + background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)); + background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)); + border-top: 1px solid #888; + position: relative; + margin-left:-18px; +} +.framemail .window .mail li:first-child { + border-top: none; +} +.framemail .window .mail li:hover { + background-color: #5d5b5b; +} +.framemail .window .mail li:after, +.framemail .window .mail li:before { + border-left: 8px solid transparent; + border-top: 8px solid #df6; + content: ''; + height: 0; + position: absolute; + right: 0; + top: 0; + width: 0; +} +.framemail .window .mail li:before { + border-top-color: #bbb; + border-width: 9px; +} +.framemail .window .mail li:nth-child(1):after, +.framemail .window .mail li:nth-child(1):before { + border: none; +} +.framemail .window .mail li:nth-child(2):after { + border-top-color: #fa1d2d; +} +.framemail .window .mail li i { + display: inline-block; + height: 48px; + width: 6px; +} +.framemail .window .mail li .read { + background-color: #ddd; +} +.framemail .window .mail li .unread { + background: #b2c831; +} +.framemail .window .mail li img { + background: #819da2; + border-radius: 2px; + height: 36px; + left: 12px; + position: absolute; + top: 6px; + width: 36px; +} +.framemail .window .mail li p { + font: 13px/24px sans-serif; + left: 56px; + position: absolute; + top: 3px; +} +.framemail .window .mail li .sender { + color: #e9e8e8; + font-weight: bold; + text-shadow: 0 1px 1px hsla(0,0%,100%,.5); +} +.framemail .window .mail li .message { + color: #999; + overflow: hidden; + text-overflow: ellipsis; + top: 21px; + white-space: nowrap; +} +.framemail .window .mail li .message strong { + color: #999; +} +.framemail .window .mail li .actions { + height: 14px; + position: absolute; + right: 19px; + text-align: right; + top: 0; + width: 96px; +} +.framemail .window .mail li .actions img { + background: none; + display: inline-block; + height: 14px; + margin-left: 6px; + opacity: .1; + position: relative; + width: 14px; +} +.framemail .window .mail li:hover .actions img { + opacity: .25; +} +.framemail .window .mail li .actions img:hover { + opacity: .75; +} + + +/**********DONUT CHARTS STYLES**********/ +#load { + width: 11.313em; + height: 11.313em; + -moz-border-radius: 5px; + border-radius: 5px; + margin-bottom: 1.063em; + background-position: center center; + margin:auto; +} + +#space { + width: 11.313em; + height: 11.313em; + -moz-border-radius: 5px; + border-radius: 5px; + margin-bottom: 1.063em; + background-position: center center; + margin:auto; +} + + +/**********LINE AND BARS**********/ + +.section-graph { + position: relative; + height: 130px; + color: #fff; + background-image: linear-gradient(color-stops(#b2c831, #b2c831 50%, #b2c831 50%)); + margin-bottom:20px; +} +.section-graph .graph-info { + z-index: 99; + position: absolute; + font-weight: bold; + margin-top: 12px; + margin-left: 21px; + width: 100px; +} +.section-graph .graph-info .graph-arrow { + width: 0; + height: 0; + margin-top: 18px; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-bottom: 4px solid white; + float: left; +} +.section-graph .graph-info .graph-info-big { + font-size: 24px; + float: left; + margin-left: 3px; +} +.section-graph .graph-info .graph-info-small { + margin-left: 3px; + font-size: 12px; + font-weight: normal; + color: rgba(255, 255, 255, 0.5); + clear: left; + margin-left: 8px; +} +/* + * Info Section + */ +.info-aapl { + text-align: center; + +} +.info-aapl ul { + margin-left:30%; + +} +.info-aapl li { + margin: 0; + display: block; + width: 9px; + height: 40px; + margin-right: 6px; + background-color: #f5f0ec; + float:left; + position: relative; +} +.info-aapl li span { + display: block; + width: 9px; + height: 40px; + position: absolute; + bottom: 0; +} +.info-aapl li span.orange { + background-color: #fa1d2d; +} +.info-aapl li span.green { + background-color: #b2c831; +} + +/**********TWITTER WIDGET **********/ +#jstwitter ul li{ + color:#bdbdbd; + padding:.5em .75em; +} + +#jstwitter ul{ + margin-left:0; + list-style:none +} + +#jstwitter:first-child{ + border-top:0 +} + +ul#jstwitter li a{ + font-size:10px; + font-style:italic; + color:#666; + text-decoration:none +} + +/********** CUSTOMIZED BUTTON **********/ +.btnnew { + display: inline-block; + *border-left: 0 none #707070; + border-right: 0 none #707070; + border-top: 0 none #707070; + border-bottom: 0 none #707070; + display: inline; + padding: 4px 12px; + margin-bottom: 0; + *margin-left: .3em; + font-size: 14px; + line-height: 20px; + color: #b2c831; + text-align: center; + vertical-align: middle; + cursor: pointer; + background-color: #5a5a5a; + *background-color: #5a5a5a; + background-repeat: repeat-x; + *-webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + zoom: 1; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + background-image: linear-gradient(to bottom, #707070, #707070);* +} + +/********** SWITCH BUTTON **********/ +.switch { + position: relative; + margin: 20px auto; + height: 26px; + width: 120px; + background: rgba(0, 0, 0, 0.25); + border-radius: 3px; + -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); +} + +.switch-label { + position: relative; + z-index: 2; + float: left; + width: 58px; + line-height: 26px; + font-size: 11px; + color: rgba(255, 255, 255, 0.35); + text-align: center; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); + cursor: pointer; +} +.switch-label:active { + font-weight: bold; +} + +.switch-label-off { + padding-left: 2px; +} + +.switch-label-on { + padding-right: 2px; +} + +/* + * Note: using adjacent or general sibling selectors combined with + * pseudo classes doesn't work in Safari 5.0 and Chrome 12. + * See this article for more info and a potential fix: + * http://css-tricks.com/webkit-sibling-bug/ + */ +.switch-input { + display: none; +} +.switch-input:checked + .switch-label { + font-weight: bold; + color: rgba(0, 0, 0, 0.65); + text-shadow: 0 1px rgba(255, 255, 255, 0.25); + -webkit-transition: 0.15s ease-out; + -moz-transition: 0.15s ease-out; + -o-transition: 0.15s ease-out; + transition: 0.15s ease-out; +} +.switch-input:checked + .switch-label-on ~ .switch-selection { + left: 60px; + /* Note: left: 50% doesn't transition in WebKit */ +} + +.switch-selection { + display: block; + position: absolute; + z-index: 1; + top: 2px; + left: 2px; + width: 58px; + height: 22px; + background: #b2c831; + border-radius: 3px; + background-image: -webkit-linear-gradient(top, #b6c753, #b2c831); + background-image: -moz-linear-gradient(top, #b6c753, #b2c831); + background-image: -o-linear-gradient(top, #b6c753, #b2c831); + background-image: linear-gradient(to bottom, #b6c753, #b2c831); + -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); + -webkit-transition: left 0.15s ease-out; + -moz-transition: left 0.15s ease-out; + -o-transition: left 0.15s ease-out; + transition: left 0.15s ease-out; +} +.switch-blue .switch-selection { + background: #3aa2d0; + background-image: -webkit-linear-gradient(top, #4fc9ee, #3aa2d0); + background-image: -moz-linear-gradient(top, #4fc9ee, #3aa2d0); + background-image: -o-linear-gradient(top, #4fc9ee, #3aa2d0); + background-image: linear-gradient(to bottom, #4fc9ee, #3aa2d0); +} +.switch-yellow .switch-selection { + background: #fa1d2d; + background-image: -webkit-linear-gradient(top, #f93e4b, #fa1d2d); + background-image: -moz-linear-gradient(top, #f93e4b, #fa1d2d); + background-image: -o-linear-gradient(top, #f93e4b, #fa1d2d); + background-image: linear-gradient(to bottom, #f93e4b, #fa1d2d); +} + + +/**********Gauge Chart**********/ +#canvas { + display: block; + width: 150px; + margin: 30px auto; +} + +/**********Accordion Styling**********/ + +.accordion-group { + border: 1px solid #222; +} +.accordion-heading { + background-color: #5a5a5a; + *background-color: #5a5a5a; + background-repeat: repeat-x; + *-webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + zoom: 1; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + background-image: linear-gradient(to bottom, #707070, #707070);* +} + +/**********Link Styling**********/ +a { + color: #b2c831; + text-decoration: none; +} + +a:hover { + color: #dff948; + text-decoration: none; +} + + + +/**********FooterWrap Section**********/ +#footerwrap { + width: 100%; + background:#262626; + + padding-top:25px; + padding-bottom: 40px; + border-top-style: solid; + border-top-width:8px; + border-top-color:#1d1d1d; + text-align:center + +} + +#footerwrap p { + color:white; + font-size:12px; +} + + +/***********FULLCALENDAR STYLE***********/ + +#external-events { + padding: 0 10px; + border: 1px solid #8b8b8a; + background-color: #8b8b8a; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + text-align: left; + } + +#external-events h4 { + font-size: 14px; + margin-top: 0; + padding-top: 1em; + } + +.external-event { /* try to mimick the look of a real event */ + margin: 10px 0; + padding: 2px 4px; + background: #b2c831; + color: #fff; + font-size: .85em; + cursor: pointer; + } + +#external-events p { + margin: 1.5em 0; + font-size: 11px; + color: #b2c831; + } + +#external-events p input { + margin: 0; + vertical-align: middle; + } + +#calendar { + width:100%; + } + + +/**********Media Styles**********/ + +@media (max-width: 360px){ +/*Calendar Adsjustments*/ +.fc-header {margin-top:15px;} +.fc-header-title h2{font-size:10px; } +.fc-header-right {display:none} + +/* portrait tablet */ +@media (min-width: 767px) and (max-width: 768px) { + .info-aapl ul { + margin-left:10px; + float:left; +} + +#load { + margin-left:5px; + margin-right:10px; +} + +#space { + margin-left:5px; + margin-right:10px; +} + +} + +/* Landscape iphone 5 and samsung galaxy */ +@media (min-width: 560px) and (max-width: 685px) { + .info-aapl ul { + margin-left:40%; +} + +} \ No newline at end of file diff --git a/frontpage.html b/frontpage.html index 077720b..e4bafba 100644 --- a/frontpage.html +++ b/frontpage.html @@ -5,8 +5,8 @@ FlatZ Frontpage - + @@ -197,6 +197,9 @@

\ No newline at end of file diff --git a/graph.html b/graph.html index fda56ff..bdec1f2 100644 --- a/graph.html +++ b/graph.html @@ -5,7 +5,8 @@ FlatZ Frontpage - + + @@ -25,6 +26,7 @@ +
@@ -139,13 +141,17 @@

$(document).ready(function() { - + loadCSS("css/"+$.theme); + + RefreshSwitchData(); RefreshGraphData(); }); + \ No newline at end of file diff --git a/js/methods.js b/js/methods.js index c39c6af..f3ca896 100644 --- a/js/methods.js +++ b/js/methods.js @@ -581,6 +581,24 @@ function RefreshLogData() { $.refreshTimerGraph = setInterval(RefreshLogData, 2000); } + + /** + * function to load a given css file + */ + loadCSS = function(href) { + var cssLink = $(""); + $("head").append(cssLink); + }; + +/** + * function to load a given js file + */ + loadJS = function(src) { + var jsLink = $(" @@ -21,8 +20,7 @@ - - +