diff --git a/app/app.js b/app/app.js index e627ea8..719094e 100644 --- a/app/app.js +++ b/app/app.js @@ -257,7 +257,8 @@ status = (obj.eta == "On Time") ? 'delayed' : 'ontime'; elm.html(output); - elm.prop('class', status); + elm.removeClass('delayed').removeClass('ontime').addClass( status); + //elm.addClass( status); }; var getTrainsCB = function (results) { @@ -384,7 +385,7 @@ var popitout = function (url) { var popitoutSmall = function (url) { var newwindow = window.open(url, 'name', 'height=400,width=520'); if (window.focus) { - newwindow.focus() + newwindow.focus(); } return false; }; diff --git a/app/css/clock.css b/app/css/clock.css index 3a42b07..c802602 100644 --- a/app/css/clock.css +++ b/app/css/clock.css @@ -11,7 +11,8 @@ width: 800px; height: 300px; background-color: #212121; - font-size: 180px; + /*font-size: 180px;*/ + font-size:20vw; text-align: center; vertical-align: middle; color: #fff; @@ -67,7 +68,8 @@ width: 1024px; height: 384px; background-color: #212121; - font-size: 180px; + /*font-size: 180px;*/ + font-size:25vw; text-align: center; vertical-align: middle; color: #fff; @@ -124,7 +126,8 @@ width: 100%; height: 512px; background-color: #212121; - font-size: 300px; + /*font-size: 300px;*/ + font-size:25vw; text-align: center; vertical-align: middle; color: #fff; diff --git a/app/css/custom.css b/app/css/custom.css new file mode 100644 index 0000000..6ea1837 --- /dev/null +++ b/app/css/custom.css @@ -0,0 +1,1951 @@ +/** + * MUI Colors module + */ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS and IE text size adjust after device orientation change, + * without disabling user zoom. + */ +html { + font-family: sans-serif; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/** + * Remove default margin. + */ +body { + margin: 0; } + +/* HTML5 display definitions + ========================================================================== */ +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; } + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ +audio, +canvas, +progress, +video { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ +audio:not([controls]) { + display: none; + height: 0; } + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + */ +[hidden], +template { + display: none; } + +/* Links + ========================================================================== */ +/** + * Remove the gray background color from active links in IE 10. + */ +a { + background-color: transparent; } + +/** + * Improve readability of focused elements when they are also in an + * active/hover state. + */ +a:active, +a:hover { + outline: 0; } + +/* Text-level semantics + ========================================================================== */ +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ +abbr[title] { + border-bottom: 1px dotted; } + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ +b, +strong { + font-weight: bold; } + +/** + * Address styling not present in Safari and Chrome. + */ +dfn { + font-style: italic; } + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } + +/** + * Address styling not present in IE 8/9. + */ +mark { + background: #ff0; + color: #000; } + +/** + * Address inconsistent and variable font size in all browsers. + */ +small { + font-size: 80%; } + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sup { + top: -0.5em; } + +sub { + bottom: -0.25em; } + +/* Embedded content + ========================================================================== */ +/** + * Remove border when inside `a` element in IE 8/9/10. + */ +img { + border: 0; } + +/** + * Correct overflow not hidden in IE 9/10/11. + */ +svg:not(:root) { + overflow: hidden; } + +/* Grouping content + ========================================================================== */ +/** + * Address margin not present in IE 8/9 and Safari. + */ +figure { + margin: 1em 40px; } + +/** + * Address differences between Firefox and other browsers. + */ +hr { + box-sizing: content-box; + height: 0; } + +/** + * Contain overflow in all browsers. + */ +pre { + overflow: auto; } + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; } + +/* Forms + ========================================================================== */ +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ +button, +input, +optgroup, +select, +textarea { + color: inherit; + /* 1 */ + font: inherit; + /* 2 */ + margin: 0; + /* 3 */ } + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ +button { + overflow: visible; } + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ +button, +select { + text-transform: none; } + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + /* 2 */ + cursor: pointer; + /* 3 */ } + +/** + * Re-set default cursor for disabled elements. + */ +button[disabled], +html input[disabled] { + cursor: default; } + +/** + * Remove inner padding and border in Firefox 4+. + */ +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; } + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ +input { + line-height: normal; } + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + */ +input[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + box-sizing: content-box; + /* 2 */ } + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** + * Define consistent border, margin, and padding. + */ +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ +legend { + border: 0; + /* 1 */ + padding: 0; + /* 2 */ } + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ +textarea { + overflow: auto; } + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ +optgroup { + font-weight: bold; } + +/* Tables + ========================================================================== */ +/** + * Remove most spacing between table cells. + */ +table { + border-collapse: collapse; + border-spacing: 0; } + +td, +th { + padding: 0; } + +/** + * MUI Colors module + */ +/** + * MUI Reboot + */ +* { + box-sizing: border-box; } + +*:before, +*:after { + box-sizing: border-box; } + +html { + font-size: 10px; + -webkit-tap-highlight-color: transparent; } + +body { + font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, Verdana, "Trebuchet MS"; + font-size: 14px; + font-weight: 400; + line-height: 1.429; + color: rgba(0, 0, 0, 0.87); + background-color: #FFF; } + +input, +button, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + +a { + color: #009688; + text-decoration: none; } + a:hover, a:focus { + color: #00796B; + text-decoration: underline; } + a:focus { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; } + +p { + margin: 0 0 10px; } + +ul, +ol { + margin-top: 0; + margin-bottom: 10px; } + +figure { + margin: 0; } + +img { + vertical-align: middle; } + +hr { + margin-top: 20px; + margin-bottom: 20px; + border: 0; + height: 1px; + background-color: rgba(0, 0, 0, 0.12); } + +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: 10px; + font-size: 21px; + color: rgba(0, 0, 0, 0.87); + line-height: inherit; + border: 0; } + +input[type="search"] { + box-sizing: border-box; + -webkit-appearance: none; } + +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; } + +input[type="radio"]:disabled, +input[type="checkbox"]:disabled { + cursor: not-allowed; } + +strong { + font-weight: 700; } + +abbr[title] { + cursor: help; + border-bottom: 1px dotted #009688; } + +h1, h2, h3 { + margin-top: 20px; + margin-bottom: 10px; } + +h4, h5, h6 { + margin-top: 10px; + margin-bottom: 10px; } + +/** + * MUI Appbar + */ +.mui--appbar-height { + height: 56px; } + +.mui--appbar-min-height, .mui-appbar { + min-height: 56px; } + +.mui--appbar-line-height { + line-height: 56px; } + +.mui--appbar-top { + top: 56px; } + +@media (orientation: landscape) and (max-height: 480px) { + .mui--appbar-height { + height: 48px; } + .mui--appbar-min-height, .mui-appbar { + min-height: 48px; } + .mui--appbar-line-height { + line-height: 48px; } + .mui--appbar-top { + top: 48px; } } + +@media (min-width: 480px) { + .mui--appbar-height { + height: 64px; } + .mui--appbar-min-height, .mui-appbar { + min-height: 64px; } + .mui--appbar-line-height { + line-height: 64px; } + .mui--appbar-top { + top: 64px; } } + +.mui-appbar { + background-color: #009688; + color: #FFF; } + +/** + * MUI Buttons + */ +.mui-btn { + animation-duration: 0.0001s; + animation-name: mui-node-inserted; + font-weight: 500; + font-size: 14px; + line-height: 18px; + text-transform: uppercase; + color: rgba(0, 0, 0, 0.87); + background-color: #FFF; + transition: all 0.2s ease-in-out; + display: inline-block; + height: 36px; + padding: 0 26px; + margin-top: 6px; + margin-bottom: 6px; + border: none; + border-radius: 2px; + cursor: pointer; + touch-action: manipulation; + background-image: none; + text-align: center; + line-height: 36px; + vertical-align: middle; + white-space: nowrap; + user-select: none; + font-size: 14px; + letter-spacing: 0.03em; + position: relative; + overflow: hidden; } + .mui-btn:hover, .mui-btn:focus, .mui-btn:active { + color: rgba(0, 0, 0, 0.87); + background-color: white; } + .mui-btn[disabled]:hover, .mui-btn[disabled]:focus, .mui-btn[disabled]:active { + color: rgba(0, 0, 0, 0.87); + background-color: #FFF; } + .mui-btn.mui-btn--flat { + color: rgba(0, 0, 0, 0.87); + background-color: transparent; } + .mui-btn.mui-btn--flat:hover, .mui-btn.mui-btn--flat:focus, .mui-btn.mui-btn--flat:active { + color: rgba(0, 0, 0, 0.87); + background-color: #f2f2f2; } + .mui-btn.mui-btn--flat[disabled]:hover, .mui-btn.mui-btn--flat[disabled]:focus, .mui-btn.mui-btn--flat[disabled]:active { + color: rgba(0, 0, 0, 0.87); + background-color: transparent; } + .mui-btn:hover, .mui-btn:focus, .mui-btn:active { + outline: 0; + text-decoration: none; + color: rgba(0, 0, 0, 0.87); } + .mui-btn:hover, .mui-btn:focus { + box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2); } + @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + .mui-btn:hover, .mui-btn:focus { + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.12), -1px 0px 2px rgba(0, 0, 0, 0.12), 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2); } } + .mui-btn:active { + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } + @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + .mui-btn:active { + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.12), -1px 0px 2px rgba(0, 0, 0, 0.12), 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } } + .mui-btn:disabled, .mui-btn.mui--is-disabled { + cursor: not-allowed; + pointer-events: none; + opacity: 0.60; + box-shadow: none; } + +.mui-btn + .mui-btn { + margin-left: 8px; } + +.mui-btn--flat { + background-color: transparent; } + .mui-btn--flat:hover, .mui-btn--flat:focus, .mui-btn--flat:active { + box-shadow: none; + background-color: #f2f2f2; } + +.mui-btn--raised, .mui-btn--fab { + box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2); } + @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + .mui-btn--raised, .mui-btn--fab { + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.12), -1px 0px 2px rgba(0, 0, 0, 0.12), 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2); } } + .mui-btn--raised:active, .mui-btn--fab:active { + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } + @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + .mui-btn--raised:active, .mui-btn--fab:active { + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.12), -1px 0px 2px rgba(0, 0, 0, 0.12), 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } } + +.mui-btn--fab { + position: relative; + padding: 0; + width: 55px; + height: 55px; + line-height: 55px; + border-radius: 50%; + z-index: 1; } + +.mui-btn--primary { + color: #FFF; + background-color: #009688; } + .mui-btn--primary:hover, .mui-btn--primary:focus, .mui-btn--primary:active { + color: #FFF; + background-color: #00b09f; } + .mui-btn--primary[disabled]:hover, .mui-btn--primary[disabled]:focus, .mui-btn--primary[disabled]:active { + color: #FFF; + background-color: #009688; } + .mui-btn--primary.mui-btn--flat { + color: #009688; + background-color: transparent; } + .mui-btn--primary.mui-btn--flat:hover, .mui-btn--primary.mui-btn--flat:focus, .mui-btn--primary.mui-btn--flat:active { + color: #009688; + background-color: #f2f2f2; } + .mui-btn--primary.mui-btn--flat[disabled]:hover, .mui-btn--primary.mui-btn--flat[disabled]:focus, .mui-btn--primary.mui-btn--flat[disabled]:active { + color: #009688; + background-color: transparent; } + +.mui-btn--dark { + color: #FFF; + background-color: #424242; } + .mui-btn--dark:hover, .mui-btn--dark:focus, .mui-btn--dark:active { + color: #FFF; + background-color: #4f4f4f; } + .mui-btn--dark[disabled]:hover, .mui-btn--dark[disabled]:focus, .mui-btn--dark[disabled]:active { + color: #FFF; + background-color: #424242; } + .mui-btn--dark.mui-btn--flat { + color: #424242; + background-color: transparent; } + .mui-btn--dark.mui-btn--flat:hover, .mui-btn--dark.mui-btn--flat:focus, .mui-btn--dark.mui-btn--flat:active { + color: #424242; + background-color: #f2f2f2; } + .mui-btn--dark.mui-btn--flat[disabled]:hover, .mui-btn--dark.mui-btn--flat[disabled]:focus, .mui-btn--dark.mui-btn--flat[disabled]:active { + color: #424242; + background-color: transparent; } + +.mui-btn--danger { + color: #FFF; + background-color: #F44336; } + .mui-btn--danger:hover, .mui-btn--danger:focus, .mui-btn--danger:active { + color: #FFF; + background-color: #f55a4e; } + .mui-btn--danger[disabled]:hover, .mui-btn--danger[disabled]:focus, .mui-btn--danger[disabled]:active { + color: #FFF; + background-color: #F44336; } + .mui-btn--danger.mui-btn--flat { + color: #F44336; + background-color: transparent; } + .mui-btn--danger.mui-btn--flat:hover, .mui-btn--danger.mui-btn--flat:focus, .mui-btn--danger.mui-btn--flat:active { + color: #F44336; + background-color: #f2f2f2; } + .mui-btn--danger.mui-btn--flat[disabled]:hover, .mui-btn--danger.mui-btn--flat[disabled]:focus, .mui-btn--danger.mui-btn--flat[disabled]:active { + color: #F44336; + background-color: transparent; } + +.mui-btn--accent { + color: #FFF; + background-color: #311B92; } + .mui-btn--accent:hover, .mui-btn--accent:focus, .mui-btn--accent:active { + color: #FFF; + background-color: #381fa8; } + .mui-btn--accent[disabled]:hover, .mui-btn--accent[disabled]:focus, .mui-btn--accent[disabled]:active { + color: #FFF; + background-color: #311B92; } + .mui-btn--accent.mui-btn--flat { + color: #311B92; + background-color: transparent; } + .mui-btn--accent.mui-btn--flat:hover, .mui-btn--accent.mui-btn--flat:focus, .mui-btn--accent.mui-btn--flat:active { + color: #311B92; + background-color: #f2f2f2; } + .mui-btn--accent.mui-btn--flat[disabled]:hover, .mui-btn--accent.mui-btn--flat[disabled]:focus, .mui-btn--accent.mui-btn--flat[disabled]:active { + color: #311B92; + background-color: transparent; } + +.mui-btn--small { + height: 30.6px; + line-height: 30.6px; + padding: 0 16px; + font-size: 13px; } + +.mui-btn--large { + height: 54px; + line-height: 54px; + padding: 0 26px; + font-size: 14px; } + +.mui-btn--fab.mui-btn--small { + width: 44px; + height: 44px; + line-height: 44px; } + +.mui-btn--fab.mui-btn--large { + width: 75px; + height: 75px; + line-height: 75px; } + +/** + * MUI Checkboxe and Radio Components + */ +.mui-radio, +.mui-checkbox { + position: relative; + display: block; + margin-top: 10px; + margin-bottom: 10px; } + .mui-radio > label, + .mui-checkbox > label { + min-height: 20px; + padding-left: 20px; + margin-bottom: 0; + font-weight: normal; + cursor: pointer; } + +.mui-radio > label > input[type="radio"], +.mui-radio--inline > label > input[type="radio"], +.mui-checkbox > label > input[type="checkbox"], +.mui-checkbox--inline > label > input[type="checkbox"] { + position: absolute; + margin-left: -20px; + margin-top: 4px; } + +.mui-radio + .mui-radio, +.mui-checkbox + .mui-checkbox { + margin-top: -5px; } + +.mui-radio--inline, +.mui-checkbox--inline { + display: inline-block; + padding-left: 20px; + margin-bottom: 0; + vertical-align: middle; + font-weight: normal; + cursor: pointer; } + .mui-radio--inline > input[type="radio"], + .mui-radio--inline > input[type="checkbox"], + .mui-radio--inline > label > input[type="radio"], + .mui-radio--inline > label > input[type="checkbox"], + .mui-checkbox--inline > input[type="radio"], + .mui-checkbox--inline > input[type="checkbox"], + .mui-checkbox--inline > label > input[type="radio"], + .mui-checkbox--inline > label > input[type="checkbox"] { + margin: 4px 0 0; + line-height: normal; } + +.mui-radio--inline + .mui-radio--inline, +.mui-checkbox--inline + .mui-checkbox--inline { + margin-top: 0; + margin-left: 10px; } + +/** + * MUI Container module + */ +.mui-container { + margin-right: auto; + margin-left: auto; + padding-left: 15px; + padding-right: 15px; } + .mui-container:before, .mui-container:after { + content: " "; + display: table; } + .mui-container:after { + clear: both; } + @media (min-width: 544px) { + .mui-container { + max-width: 570px; } } + @media (min-width: 768px) { + .mui-container { + max-width: 740px; } } + @media (min-width: 992px) { + .mui-container { + max-width: 960px; } } + @media (min-width: 1200px) { + .mui-container { + max-width: 1170px; } } + +.mui-container-fluid { + margin-right: auto; + margin-left: auto; + padding-left: 15px; + padding-right: 15px; } + .mui-container-fluid:before, .mui-container-fluid:after { + content: " "; + display: table; } + .mui-container-fluid:after { + clear: both; } + +/** + * MUI Divider Component and CSS Helpers + */ +.mui-divider { + display: block; + height: 1px; + background-color: rgba(0, 0, 0, 0.12); } + +.mui--divider-top { + border-top: 1px solid rgba(0, 0, 0, 0.12); } + +.mui--divider-bottom { + border-bottom: 1px solid rgba(0, 0, 0, 0.12); } + +.mui--divider-left { + border-left: 1px solid rgba(0, 0, 0, 0.12); } + +.mui--divider-right { + border-right: 1px solid rgba(0, 0, 0, 0.12); } + +/** + * MUI Dropdown module + */ +.mui-dropdown { + display: inline-block; + position: relative; } + +[data-mui-toggle="dropdown"] { + animation-duration: 0.0001s; + animation-name: mui-node-inserted; + outline: 0; } + +.mui-dropdown__menu { + position: absolute; + top: 100%; + left: 0; + display: none; + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; + list-style: none; + font-size: 14px; + text-align: left; + background-color: #FFF; + border-radius: 2px; + z-index: 1; + background-clip: padding-box; } + .mui-dropdown__menu.mui--is-open { + display: block; } + .mui-dropdown__menu > li > a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: 1.429; + color: rgba(0, 0, 0, 0.87); + white-space: nowrap; } + .mui-dropdown__menu > li > a:hover, .mui-dropdown__menu > li > a:focus { + text-decoration: none; + color: rgba(0, 0, 0, 0.87); + background-color: #EEEEEE; } + .mui-dropdown__menu > .mui--is-disabled > a, .mui-dropdown__menu > .mui--is-disabled > a:hover, .mui-dropdown__menu > .mui--is-disabled > a:focus { + color: #EEEEEE; } + .mui-dropdown__menu > .mui--is-disabled > a:hover, .mui-dropdown__menu > .mui--is-disabled > a:focus { + text-decoration: none; + background-color: transparent; + background-image: none; + cursor: not-allowed; } + +.mui-dropdown__menu--right { + left: auto; + right: 0; } + +/** + * MUI Form Component + */ +@media (min-width: 544px) { + .mui-form--inline > .mui-textfield { + display: inline-block; + margin-bottom: 0; } + .mui-form--inline > .mui-radio, + .mui-form--inline > .mui-checkbox { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; } + .mui-form--inline > .mui-radio > label, + .mui-form--inline > .mui-checkbox > label { + padding-left: 0; } + .mui-form--inline > .mui-radio > label > input[type="radio"], + .mui-form--inline > .mui-checkbox > label > input[type="checkbox"] { + position: relative; + margin-left: 0; } + .mui-form--inline > .mui-select { + display: inline-block; } + .mui-form--inline > .mui-btn { + margin-bottom: 0; + margin-top: 0; + vertical-align: bottom; } } + +/** + * MUI Grid module + */ +.mui-row { + margin-left: -15px; + margin-right: -15px; } + .mui-row:before, .mui-row:after { + content: " "; + display: table; } + .mui-row:after { + clear: both; } + +.mui-col-xs-1, .mui-col-sm-1, .mui-col-md-1, .mui-col-lg-1, .mui-col-xs-2, .mui-col-sm-2, .mui-col-md-2, .mui-col-lg-2, .mui-col-xs-3, .mui-col-sm-3, .mui-col-md-3, .mui-col-lg-3, .mui-col-xs-4, .mui-col-sm-4, .mui-col-md-4, .mui-col-lg-4, .mui-col-xs-5, .mui-col-sm-5, .mui-col-md-5, .mui-col-lg-5, .mui-col-xs-6, .mui-col-sm-6, .mui-col-md-6, .mui-col-lg-6, .mui-col-xs-7, .mui-col-sm-7, .mui-col-md-7, .mui-col-lg-7, .mui-col-xs-8, .mui-col-sm-8, .mui-col-md-8, .mui-col-lg-8, .mui-col-xs-9, .mui-col-sm-9, .mui-col-md-9, .mui-col-lg-9, .mui-col-xs-10, .mui-col-sm-10, .mui-col-md-10, .mui-col-lg-10, .mui-col-xs-11, .mui-col-sm-11, .mui-col-md-11, .mui-col-lg-11, .mui-col-xs-12, .mui-col-sm-12, .mui-col-md-12, .mui-col-lg-12 { + min-height: 1px; + padding-left: 15px; + padding-right: 15px; } + +.mui-col-xs-1, .mui-col-xs-2, .mui-col-xs-3, .mui-col-xs-4, .mui-col-xs-5, .mui-col-xs-6, .mui-col-xs-7, .mui-col-xs-8, .mui-col-xs-9, .mui-col-xs-10, .mui-col-xs-11, .mui-col-xs-12 { + float: left; } + +.mui-col-xs-1 { + width: 8.33333%; } + +.mui-col-xs-2 { + width: 16.66667%; } + +.mui-col-xs-3 { + width: 25%; } + +.mui-col-xs-4 { + width: 33.33333%; } + +.mui-col-xs-5 { + width: 41.66667%; } + +.mui-col-xs-6 { + width: 50%; } + +.mui-col-xs-7 { + width: 58.33333%; } + +.mui-col-xs-8 { + width: 66.66667%; } + +.mui-col-xs-9 { + width: 75%; } + +.mui-col-xs-10 { + width: 83.33333%; } + +.mui-col-xs-11 { + width: 91.66667%; } + +.mui-col-xs-12 { + width: 100%; } + +.mui-col-xs-offset-0 { + margin-left: 0%; } + +.mui-col-xs-offset-1 { + margin-left: 8.33333%; } + +.mui-col-xs-offset-2 { + margin-left: 16.66667%; } + +.mui-col-xs-offset-3 { + margin-left: 25%; } + +.mui-col-xs-offset-4 { + margin-left: 33.33333%; } + +.mui-col-xs-offset-5 { + margin-left: 41.66667%; } + +.mui-col-xs-offset-6 { + margin-left: 50%; } + +.mui-col-xs-offset-7 { + margin-left: 58.33333%; } + +.mui-col-xs-offset-8 { + margin-left: 66.66667%; } + +.mui-col-xs-offset-9 { + margin-left: 75%; } + +.mui-col-xs-offset-10 { + margin-left: 83.33333%; } + +.mui-col-xs-offset-11 { + margin-left: 91.66667%; } + +.mui-col-xs-offset-12 { + margin-left: 100%; } + +@media (min-width: 544px) { + .mui-col-sm-1, .mui-col-sm-2, .mui-col-sm-3, .mui-col-sm-4, .mui-col-sm-5, .mui-col-sm-6, .mui-col-sm-7, .mui-col-sm-8, .mui-col-sm-9, .mui-col-sm-10, .mui-col-sm-11, .mui-col-sm-12 { + float: left; } + .mui-col-sm-1 { + width: 8.33333%; } + .mui-col-sm-2 { + width: 16.66667%; } + .mui-col-sm-3 { + width: 25%; } + .mui-col-sm-4 { + width: 33.33333%; } + .mui-col-sm-5 { + width: 41.66667%; } + .mui-col-sm-6 { + width: 50%; } + .mui-col-sm-7 { + width: 58.33333%; } + .mui-col-sm-8 { + width: 66.66667%; } + .mui-col-sm-9 { + width: 75%; } + .mui-col-sm-10 { + width: 83.33333%; } + .mui-col-sm-11 { + width: 91.66667%; } + .mui-col-sm-12 { + width: 100%; } + .mui-col-sm-offset-0 { + margin-left: 0%; } + .mui-col-sm-offset-1 { + margin-left: 8.33333%; } + .mui-col-sm-offset-2 { + margin-left: 16.66667%; } + .mui-col-sm-offset-3 { + margin-left: 25%; } + .mui-col-sm-offset-4 { + margin-left: 33.33333%; } + .mui-col-sm-offset-5 { + margin-left: 41.66667%; } + .mui-col-sm-offset-6 { + margin-left: 50%; } + .mui-col-sm-offset-7 { + margin-left: 58.33333%; } + .mui-col-sm-offset-8 { + margin-left: 66.66667%; } + .mui-col-sm-offset-9 { + margin-left: 75%; } + .mui-col-sm-offset-10 { + margin-left: 83.33333%; } + .mui-col-sm-offset-11 { + margin-left: 91.66667%; } + .mui-col-sm-offset-12 { + margin-left: 100%; } } + +@media (min-width: 768px) { + .mui-col-md-1, .mui-col-md-2, .mui-col-md-3, .mui-col-md-4, .mui-col-md-5, .mui-col-md-6, .mui-col-md-7, .mui-col-md-8, .mui-col-md-9, .mui-col-md-10, .mui-col-md-11, .mui-col-md-12 { + float: left; } + .mui-col-md-1 { + width: 8.33333%; } + .mui-col-md-2 { + width: 16.66667%; } + .mui-col-md-3 { + width: 25%; } + .mui-col-md-4 { + width: 33.33333%; } + .mui-col-md-5 { + width: 41.66667%; } + .mui-col-md-6 { + width: 50%; } + .mui-col-md-7 { + width: 58.33333%; } + .mui-col-md-8 { + width: 66.66667%; } + .mui-col-md-9 { + width: 75%; } + .mui-col-md-10 { + width: 83.33333%; } + .mui-col-md-11 { + width: 91.66667%; } + .mui-col-md-12 { + width: 100%; } + .mui-col-md-offset-0 { + margin-left: 0%; } + .mui-col-md-offset-1 { + margin-left: 8.33333%; } + .mui-col-md-offset-2 { + margin-left: 16.66667%; } + .mui-col-md-offset-3 { + margin-left: 25%; } + .mui-col-md-offset-4 { + margin-left: 33.33333%; } + .mui-col-md-offset-5 { + margin-left: 41.66667%; } + .mui-col-md-offset-6 { + margin-left: 50%; } + .mui-col-md-offset-7 { + margin-left: 58.33333%; } + .mui-col-md-offset-8 { + margin-left: 66.66667%; } + .mui-col-md-offset-9 { + margin-left: 75%; } + .mui-col-md-offset-10 { + margin-left: 83.33333%; } + .mui-col-md-offset-11 { + margin-left: 91.66667%; } + .mui-col-md-offset-12 { + margin-left: 100%; } } + +@media (min-width: 992px) { + .mui-col-lg-1, .mui-col-lg-2, .mui-col-lg-3, .mui-col-lg-4, .mui-col-lg-5, .mui-col-lg-6, .mui-col-lg-7, .mui-col-lg-8, .mui-col-lg-9, .mui-col-lg-10, .mui-col-lg-11, .mui-col-lg-12 { + float: left; } + .mui-col-lg-1 { + width: 8.33333%; } + .mui-col-lg-2 { + width: 16.66667%; } + .mui-col-lg-3 { + width: 25%; } + .mui-col-lg-4 { + width: 33.33333%; } + .mui-col-lg-5 { + width: 41.66667%; } + .mui-col-lg-6 { + width: 50%; } + .mui-col-lg-7 { + width: 58.33333%; } + .mui-col-lg-8 { + width: 66.66667%; } + .mui-col-lg-9 { + width: 75%; } + .mui-col-lg-10 { + width: 83.33333%; } + .mui-col-lg-11 { + width: 91.66667%; } + .mui-col-lg-12 { + width: 100%; } + .mui-col-lg-offset-0 { + margin-left: 0%; } + .mui-col-lg-offset-1 { + margin-left: 8.33333%; } + .mui-col-lg-offset-2 { + margin-left: 16.66667%; } + .mui-col-lg-offset-3 { + margin-left: 25%; } + .mui-col-lg-offset-4 { + margin-left: 33.33333%; } + .mui-col-lg-offset-5 { + margin-left: 41.66667%; } + .mui-col-lg-offset-6 { + margin-left: 50%; } + .mui-col-lg-offset-7 { + margin-left: 58.33333%; } + .mui-col-lg-offset-8 { + margin-left: 66.66667%; } + .mui-col-lg-offset-9 { + margin-left: 75%; } + .mui-col-lg-offset-10 { + margin-left: 83.33333%; } + .mui-col-lg-offset-11 { + margin-left: 91.66667%; } + .mui-col-lg-offset-12 { + margin-left: 100%; } } + +@media (min-width: 1200px) { + .mui-col-xl-1, .mui-col-xl-2, .mui-col-xl-3, .mui-col-xl-4, .mui-col-xl-5, .mui-col-xl-6, .mui-col-xl-7, .mui-col-xl-8, .mui-col-xl-9, .mui-col-xl-10, .mui-col-xl-11, .mui-col-xl-12 { + float: left; } + .mui-col-xl-1 { + width: 8.33333%; } + .mui-col-xl-2 { + width: 16.66667%; } + .mui-col-xl-3 { + width: 25%; } + .mui-col-xl-4 { + width: 33.33333%; } + .mui-col-xl-5 { + width: 41.66667%; } + .mui-col-xl-6 { + width: 50%; } + .mui-col-xl-7 { + width: 58.33333%; } + .mui-col-xl-8 { + width: 66.66667%; } + .mui-col-xl-9 { + width: 75%; } + .mui-col-xl-10 { + width: 83.33333%; } + .mui-col-xl-11 { + width: 91.66667%; } + .mui-col-xl-12 { + width: 100%; } + .mui-col-xl-offset-0 { + margin-left: 0%; } + .mui-col-xl-offset-1 { + margin-left: 8.33333%; } + .mui-col-xl-offset-2 { + margin-left: 16.66667%; } + .mui-col-xl-offset-3 { + margin-left: 25%; } + .mui-col-xl-offset-4 { + margin-left: 33.33333%; } + .mui-col-xl-offset-5 { + margin-left: 41.66667%; } + .mui-col-xl-offset-6 { + margin-left: 50%; } + .mui-col-xl-offset-7 { + margin-left: 58.33333%; } + .mui-col-xl-offset-8 { + margin-left: 66.66667%; } + .mui-col-xl-offset-9 { + margin-left: 75%; } + .mui-col-xl-offset-10 { + margin-left: 83.33333%; } + .mui-col-xl-offset-11 { + margin-left: 91.66667%; } + .mui-col-xl-offset-12 { + margin-left: 100%; } } + +/** + * MUI Panel module + */ +.mui-panel { + padding: 15px; + margin-bottom: 20px; + border-radius: 0; + background-color: #FFF; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0px 2px 0 rgba(0, 0, 0, 0.12); } + .mui-panel:before, .mui-panel:after { + content: " "; + display: table; } + .mui-panel:after { + clear: both; } + @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + .mui-panel { + box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.12), -1px 0px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0px 2px 0 rgba(0, 0, 0, 0.12); } } + +/** + * MUI Select Component + */ +.mui-select { + display: block; + padding-top: 15px; + margin-bottom: 20px; + position: relative; } + .mui-select:focus { + outline: 0; } + .mui-select:focus > select { + height: 33px; + margin-bottom: -1px; + border-color: #009688; + border-width: 2px; } + .mui-select > select { + animation-duration: 0.0001s; + animation-name: mui-node-inserted; + display: block; + height: 32px; + width: 100%; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + outline: none; + border: none; + border-bottom: 1px solid rgba(0, 0, 0, 0.26); + border-radius: 0px; + box-shadow: none; + background-color: transparent; + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNiIgd2lkdGg9IjEwIj48cG9seWdvbiBwb2ludHM9IjAsMCAxMCwwIDUsNiIgc3R5bGU9ImZpbGw6cmdiYSgwLDAsMCwuMjQpOyIvPjwvc3ZnPg=="); + background-repeat: no-repeat; + background-position: right center; + cursor: pointer; + color: rgba(0, 0, 0, 0.87); + font-size: 16px; + padding: 0 25px 0 0; } + .mui-select > select::-ms-expand { + display: none; } + .mui-select > select:focus { + outline: 0; + height: 33px; + margin-bottom: -1px; + border-color: #009688; + border-width: 2px; } + .mui-select > select:disabled { + color: rgba(0, 0, 0, 0.38); + cursor: not-allowed; + background-color: transparent; + opacity: 1; } + +.mui-select__menu { + position: absolute; + z-index: 1; + min-width: 100%; + overflow-y: auto; + padding: 8px 0; + background-color: #FFF; + font-size: 16px; } + @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + .mui-select__menu { + border-left: 1px solid rgba(0, 0, 0, 0.12); + border-top: 1px solid rgba(0, 0, 0, 0.12); } } + .mui-select__menu > div { + padding: 0 22px; + height: 42px; + line-height: 42px; + cursor: pointer; + white-space: nowrap; } + .mui-select__menu > div:hover { + background-color: #E0E0E0; } + .mui-select__menu > div.mui--is-selected { + background-color: #EEEEEE; } + +/** + * MUI Table Component + */ +th { + text-align: left; } + +.mui-table { + width: 100%; + max-width: 100%; + margin-bottom: 20px; } + .mui-table > thead > tr > th, + .mui-table > thead > tr > td, + .mui-table > tbody > tr > th, + .mui-table > tbody > tr > td, + .mui-table > tfoot > tr > th, + .mui-table > tfoot > tr > td { + padding: 10px; + line-height: 1.429; } + .mui-table > thead > tr > th { + border-bottom: 2px solid rgba(0, 0, 0, 0.12); + font-weight: 700; } + .mui-table > tbody + tbody { + border-top: 2px solid rgba(0, 0, 0, 0.12); } + .mui-table.mui-table--bordered > tbody > tr > td { + border-bottom: 1px solid rgba(0, 0, 0, 0.12); } + +/** + * MUI Tabs module + */ +.mui-tabs__bar { + list-style: none; + padding-left: 0; + margin-bottom: 0; + background-color: transparent; + white-space: nowrap; + overflow-x: auto; } + .mui-tabs__bar > li { + display: inline-block; } + .mui-tabs__bar > li > a { + display: block; + white-space: nowrap; + text-transform: uppercase; + font-weight: 500; + font-size: 14px; + color: rgba(0, 0, 0, 0.87); + cursor: default; + height: 48px; + line-height: 48px; + padding-left: 24px; + padding-right: 24px; + user-select: none; } + .mui-tabs__bar > li > a:hover { + text-decoration: none; } + .mui-tabs__bar > li.mui--is-active { + border-bottom: 2px solid #009688; } + .mui-tabs__bar > li.mui--is-active > a { + color: #009688; } + .mui-tabs__bar.mui-tabs__bar--justified { + display: table; + width: 100%; + table-layout: fixed; } + .mui-tabs__bar.mui-tabs__bar--justified > li { + display: table-cell; } + .mui-tabs__bar.mui-tabs__bar--justified > li > a { + text-align: center; + padding-left: 0px; + padding-right: 0px; } + +.mui-tabs__pane { + display: none; } + .mui-tabs__pane.mui--is-active { + display: block; } + +[data-mui-toggle="tab"] { + animation-duration: 0.0001s; + animation-name: mui-node-inserted; } + +/** + * MUI Textfield Component + */ +.mui-textfield { + display: block; + padding-top: 15px; + margin-bottom: 20px; + position: relative; } + .mui-textfield > label { + position: absolute; + top: 0; + display: block; + width: 100%; + color: rgba(0, 0, 0, 0.54); + font-size: 12px; + font-weight: 400; + line-height: 15px; + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + .mui-textfield > textarea { + padding-top: 5px; } + .mui-textfield > input, + .mui-textfield > textarea { + display: block; } + .mui-textfield > input:focus ~ label, + .mui-textfield > textarea:focus ~ label { + color: #009688; } + +.mui-textfield--float-label > label { + position: absolute; + transform: translate(0px, 15px); + font-size: 16px; + line-height: 32px; + color: rgba(0, 0, 0, 0.26); + text-overflow: clip; + cursor: text; + pointer-events: none; } + +.mui-textfield--float-label > input:focus ~ label, +.mui-textfield--float-label > textarea:focus ~ label { + transform: translate(0px, 0px); + font-size: 12px; + line-height: 15px; + text-overflow: ellipsis; } + +.mui-textfield--float-label > input:not(:focus).mui--is-not-empty ~ label, .mui-textfield--float-label > input:not(:focus)[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty) ~ label, .mui-textfield--float-label > input:not(:focus):not(:empty):not(.mui--is-empty):not(.mui--is-not-empty) ~ label, +.mui-textfield--float-label > textarea:not(:focus).mui--is-not-empty ~ label, +.mui-textfield--float-label > textarea:not(:focus)[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty) ~ label, +.mui-textfield--float-label > textarea:not(:focus):not(:empty):not(.mui--is-empty):not(.mui--is-not-empty) ~ label { + color: rgba(0, 0, 0, 0.54); + font-size: 12px; + line-height: 15px; + transform: translate(0px, 0px); + text-overflow: ellipsis; } + +.mui-textfield--wrap-label { + display: table; + width: 100%; + padding-top: 0px; } + .mui-textfield--wrap-label:not(.mui-textfield--float-label) > label { + display: table-header-group; + position: static; + white-space: normal; + overflow-x: visible; } + +.mui-textfield > input, +.mui-textfield > textarea { + animation-duration: 0.0001s; + animation-name: mui-node-inserted; + display: block; + background-color: transparent; + color: rgba(0, 0, 0, 0.87); + border: none; + border-bottom: 1px solid rgba(0, 0, 0, 0.26); + outline: none; + width: 100%; + font-size: 16px; + padding: 0; + box-shadow: none; + border-radius: 0px; + background-image: none; } + .mui-textfield > input:focus, + .mui-textfield > textarea:focus { + border-color: #009688; + border-width: 2px; } + .mui-textfield > input:disabled, .mui-textfield > input:read-only, + .mui-textfield > textarea:disabled, + .mui-textfield > textarea:read-only { + cursor: not-allowed; + background-color: transparent; + opacity: 1; } + .mui-textfield > input::placeholder, + .mui-textfield > textarea::placeholder { + color: rgba(0, 0, 0, 0.26); + opacity: 1; } + +.mui-textfield > input { + height: 32px; } + .mui-textfield > input:focus { + height: 33px; + margin-bottom: -1px; } + +.mui-textfield > textarea { + min-height: 64px; } + .mui-textfield > textarea[rows]:not([rows="2"]):focus { + margin-bottom: -1px; } + +.mui-textfield > input:focus { + height: 33px; + margin-bottom: -1px; } + +.mui-textfield > input:invalid:not(:focus):not(:required), .mui-textfield > input:invalid:not(:focus):required.mui--is-not-empty, .mui-textfield > input:invalid:not(:focus):required.mui--is-empty.mui--is-dirty, .mui-textfield > input:invalid:not(:focus):required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty), .mui-textfield > input:invalid:not(:focus):required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty), +.mui-textfield > textarea:invalid:not(:focus):not(:required), +.mui-textfield > textarea:invalid:not(:focus):required.mui--is-not-empty, +.mui-textfield > textarea:invalid:not(:focus):required.mui--is-empty.mui--is-dirty, +.mui-textfield > textarea:invalid:not(:focus):required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty), +.mui-textfield > textarea:invalid:not(:focus):required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty), +.mui-textfield > input:not(:focus).mui--is-invalid:not(:required), +.mui-textfield > input:not(:focus).mui--is-invalid:required.mui--is-not-empty, +.mui-textfield > input:not(:focus).mui--is-invalid:required.mui--is-empty.mui--is-dirty, +.mui-textfield > input:not(:focus).mui--is-invalid:required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty), +.mui-textfield > input:not(:focus).mui--is-invalid:required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty), +.mui-textfield > textarea:not(:focus).mui--is-invalid:not(:required), +.mui-textfield > textarea:not(:focus).mui--is-invalid:required.mui--is-not-empty, +.mui-textfield > textarea:not(:focus).mui--is-invalid:required.mui--is-empty.mui--is-dirty, +.mui-textfield > textarea:not(:focus).mui--is-invalid:required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty), +.mui-textfield > textarea:not(:focus).mui--is-invalid:required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty) { + border-color: #F44336; + border-width: 2px; } + +.mui-textfield > input:invalid:not(:focus):not(:required), .mui-textfield > input:invalid:not(:focus):required.mui--is-not-empty, .mui-textfield > input:invalid:not(:focus):required.mui--is-empty.mui--is-dirty, .mui-textfield > input:invalid:not(:focus):required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty), .mui-textfield > input:invalid:not(:focus):required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty), +.mui-textfield > input:not(:focus).mui--is-invalid:not(:required), +.mui-textfield > input:not(:focus).mui--is-invalid:required.mui--is-not-empty, +.mui-textfield > input:not(:focus).mui--is-invalid:required.mui--is-empty.mui--is-dirty, +.mui-textfield > input:not(:focus).mui--is-invalid:required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty), +.mui-textfield > input:not(:focus).mui--is-invalid:required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty) { + height: 33px; + margin-bottom: -1px; } + +.mui-textfield > input:invalid:not(:focus):not(:required) ~ label, .mui-textfield > input:invalid:not(:focus):required.mui--is-not-empty ~ label, .mui-textfield > input:invalid:not(:focus):required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty) ~ label, .mui-textfield > input:invalid:not(:focus):required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty) ~ label, +.mui-textfield > textarea:invalid:not(:focus):not(:required) ~ label, +.mui-textfield > textarea:invalid:not(:focus):required.mui--is-not-empty ~ label, +.mui-textfield > textarea:invalid:not(:focus):required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty) ~ label, +.mui-textfield > textarea:invalid:not(:focus):required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty) ~ label, +.mui-textfield > input:not(:focus).mui--is-invalid:not(:required) ~ label, +.mui-textfield > input:not(:focus).mui--is-invalid:required.mui--is-not-empty ~ label, +.mui-textfield > input:not(:focus).mui--is-invalid:required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty) ~ label, +.mui-textfield > input:not(:focus).mui--is-invalid:required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty) ~ label, +.mui-textfield > textarea:not(:focus).mui--is-invalid:not(:required) ~ label, +.mui-textfield > textarea:not(:focus).mui--is-invalid:required.mui--is-not-empty ~ label, +.mui-textfield > textarea:not(:focus).mui--is-invalid:required[value]:not([value=""]):not(.mui--is-empty):not(.mui--is-not-empty) ~ label, +.mui-textfield > textarea:not(:focus).mui--is-invalid:required:not(:empty):not(.mui--is-empty):not(.mui--is-not-empty) ~ label { + color: #F44336; } + +.mui-textfield:not(.mui-textfield--float-label) > input:invalid:not(:focus):required.mui--is-empty.mui--is-dirty ~ label, +.mui-textfield:not(.mui-textfield--float-label) > textarea:invalid:not(:focus):required.mui--is-empty.mui--is-dirty ~ label, +.mui-textfield:not(.mui-textfield--float-label) > input:not(:focus).mui--is-invalid:required.mui--is-empty.mui--is-dirty ~ label, +.mui-textfield:not(.mui-textfield--float-label) > textarea:not(:focus).mui--is-invalid:required.mui--is-empty.mui--is-dirty ~ label { + color: #F44336; } + +/** + * MUI Helpers module + */ +@keyframes mui-node-inserted { + from { + opacity: 0.99; } + to { + opacity: 1; } } + +.mui--no-transition { + transition: none !important; } + +.mui--no-user-select { + user-select: none; } + +.mui-caret { + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: 4px solid; + border-right: 4px solid transparent; + border-left: 4px solid transparent; } + +.mui--text-left { + text-align: left !important; } + +.mui--text-right { + text-align: right !important; } + +.mui--text-center { + text-align: center !important; } + +.mui--text-justify { + text-align: justify !important; } + +.mui--text-nowrap { + white-space: nowrap !important; } + +.mui--align-baseline { + vertical-align: baseline !important; } + +.mui--align-top { + vertical-align: top !important; } + +.mui--align-middle { + vertical-align: middle !important; } + +.mui--align-bottom { + vertical-align: bottom !important; } + +.mui--text-dark { + color: rgba(0, 0, 0, 0.87); } + +.mui--text-dark-secondary { + color: rgba(0, 0, 0, 0.54); } + +.mui--text-dark-hint { + color: rgba(0, 0, 0, 0.38); } + +.mui--text-light { + color: #FFF; } + +.mui--text-light-secondary { + color: rgba(255, 255, 255, 0.7); } + +.mui--text-light-hint { + color: rgba(255, 255, 255, 0.3); } + +.mui--text-accent { + color: rgba(49, 27, 146, 0.87); } + +.mui--text-accent-secondary { + color: rgba(49, 27, 146, 0.54); } + +.mui--text-accent-hint { + color: rgba(49, 27, 146, 0.38); } + +.mui--text-black { + color: #000; } + +.mui--text-white { + color: #FFF; } + +.mui--text-danger { + color: #F44336; } + +.mui-list--unstyled { + padding-left: 0; + list-style: none; } + +.mui-list--inline { + padding-left: 0; + list-style: none; + margin-left: -5px; } + .mui-list--inline > li { + display: inline-block; + padding-left: 5px; + padding-right: 5px; } + +.mui--z1, .mui-dropdown__menu, .mui-select__menu { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); } + +.mui--z2 { + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } + +.mui--z3 { + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); } + +.mui--z4 { + box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); } + +.mui--z5 { + box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); } + +.mui--clearfix:before, .mui--clearfix:after { + content: " "; + display: table; } + +.mui--clearfix:after { + clear: both; } + +.mui--pull-right { + float: right !important; } + +.mui--pull-left { + float: left !important; } + +.mui--hide { + display: none !important; } + +.mui--show { + display: block !important; } + +.mui--invisible { + visibility: hidden; } + +.mui--overflow-hidden { + overflow: hidden !important; } + +.mui--overflow-hidden-x { + overflow-x: hidden !important; } + +.mui--overflow-hidden-y { + overflow-y: hidden !important; } + +.mui--visible-xs-block, +.mui--visible-xs-inline, +.mui--visible-xs-inline-block, +.mui--visible-sm-block, +.mui--visible-sm-inline, +.mui--visible-sm-inline-block, +.mui--visible-md-block, +.mui--visible-md-inline, +.mui--visible-md-inline-block, +.mui--visible-lg-block, +.mui--visible-lg-inline, +.mui--visible-lg-inline-block, +.mui--visible-xl-block, +.mui--visible-xl-inline, +.mui--visible-xl-inline-block { + display: none !important; } + +@media (max-width: 543px) { + .mui-visible-xs { + display: block !important; } + table.mui-visible-xs { + display: table; } + tr.mui-visible-xs { + display: table-row !important; } + th.mui-visible-xs, + td.mui-visible-xs { + display: table-cell !important; } + .mui--visible-xs-block { + display: block !important; } + .mui--visible-xs-inline { + display: inline !important; } + .mui--visible-xs-inline-block { + display: inline-block !important; } } + +@media (min-width: 544px) and (max-width: 767px) { + .mui-visible-sm { + display: block !important; } + table.mui-visible-sm { + display: table; } + tr.mui-visible-sm { + display: table-row !important; } + th.mui-visible-sm, + td.mui-visible-sm { + display: table-cell !important; } + .mui--visible-sm-block { + display: block !important; } + .mui--visible-sm-inline { + display: inline !important; } + .mui--visible-sm-inline-block { + display: inline-block !important; } } + +@media (min-width: 768px) and (max-width: 991px) { + .mui-visible-md { + display: block !important; } + table.mui-visible-md { + display: table; } + tr.mui-visible-md { + display: table-row !important; } + th.mui-visible-md, + td.mui-visible-md { + display: table-cell !important; } + .mui--visible-md-block { + display: block !important; } + .mui--visible-md-inline { + display: inline !important; } + .mui--visible-md-inline-block { + display: inline-block !important; } } + +@media (min-width: 992px) and (max-width: 1199px) { + .mui-visible-lg { + display: block !important; } + table.mui-visible-lg { + display: table; } + tr.mui-visible-lg { + display: table-row !important; } + th.mui-visible-lg, + td.mui-visible-lg { + display: table-cell !important; } + .mui--visible-lg-block { + display: block !important; } + .mui--visible-lg-inline { + display: inline !important; } + .mui--visible-lg-inline-block { + display: inline-block !important; } } + +@media (min-width: 1200px) { + .mui-visible-xl { + display: block !important; } + table.mui-visible-xl { + display: table; } + tr.mui-visible-xl { + display: table-row !important; } + th.mui-visible-xl, + td.mui-visible-xl { + display: table-cell !important; } + .mui--visible-xl-block { + display: block !important; } + .mui--visible-xl-inline { + display: inline !important; } + .mui--visible-xl-inline-block { + display: inline-block !important; } } + +@media (max-width: 543px) { + .mui--hidden-xs { + display: none !important; } } + +@media (min-width: 544px) and (max-width: 767px) { + .mui--hidden-sm { + display: none !important; } } + +@media (min-width: 768px) and (max-width: 991px) { + .mui--hidden-md { + display: none !important; } } + +@media (min-width: 992px) and (max-width: 1199px) { + .mui--hidden-lg { + display: none !important; } } + +@media (min-width: 1200px) { + .mui--hidden-xl { + display: none !important; } } + +body.mui-body--scroll-lock { + overflow: hidden !important; } + +/** + * MUI Overlay module + */ +#mui-overlay { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 99999999; + background-color: rgba(0, 0, 0, 0.2); + overflow: auto; } + +/** + * MUI Ripple module + */ +.mui-ripple-effect { + position: absolute; + border-radius: 50%; + pointer-events: none; + opacity: 0; + animation: mui-ripple-animation 2s; } + +@keyframes mui-ripple-animation { + from { + transform: scale(1); + opacity: 0.4; } + to { + transform: scale(100); + opacity: 0; } } + +.mui-btn > .mui-ripple-effect { + background-color: #a6a6a6; } + +.mui-btn--primary > .mui-ripple-effect { + background-color: #FFF; } + +.mui-btn--dark > .mui-ripple-effect { + background-color: #FFF; } + +.mui-btn--danger > .mui-ripple-effect { + background-color: #FFF; } + +.mui-btn--accent > .mui-ripple-effect { + background-color: #FFF; } + +.mui-btn--flat > .mui-ripple-effect { + background-color: #a6a6a6; } + +/** + * MUI Typography module + */ +.mui--text-display4 { + font-weight: 300; + font-size: 112px; + line-height: 112px; } + +.mui--text-display3 { + font-weight: 400; + font-size: 56px; + line-height: 56px; } + +.mui--text-display2 { + font-weight: 400; + font-size: 45px; + line-height: 48px; } + +.mui--text-display1, h1 { + font-weight: 400; + font-size: 34px; + line-height: 40px; } + +.mui--text-headline, h2 { + font-weight: 400; + font-size: 24px; + line-height: 32px; } + +.mui--text-title, h3 { + font-weight: 400; + font-size: 20px; + line-height: 28px; } + +.mui--text-subhead, h4 { + font-weight: 400; + font-size: 16px; + line-height: 24px; } + +.mui--text-body2, h5 { + font-weight: 500; + font-size: 14px; + line-height: 24px; } + +.mui--text-body1 { + font-weight: 400; + font-size: 14px; + line-height: 20px; } + +.mui--text-caption { + font-weight: 400; + font-size: 12px; + line-height: 16px; } + +.mui--text-menu { + font-weight: 500; + font-size: 13px; + line-height: 17px; } + +.mui--text-button { + font-weight: 500; + font-size: 14px; + line-height: 18px; + text-transform: uppercase; } + +#header { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 2; + transition: left 0.2s; } + +ul { + margin: 0; + padding: 0; } + +li { + display: inline; + margin: 0; + padding: 0 4px 0 0; } + +.dates { + padding: 2px; + border: solid 1px #80007e; + background-color: #ffffff; } + +#btc, #fx { + font-size: 85%; } + +.up, .ontime { + color: #4CAF50 !important; } + +.down, .delayed { + color: #F44336 !important; } + +.nochange { + color: #000000; } + +.password { + border: 1px solid #BDBDBD; + background-color: #EEEEEE; + font-family: monospace; + white-space: pre; } diff --git a/app/css/custom.scss b/app/css/custom.scss new file mode 100644 index 0000000..8d97d12 --- /dev/null +++ b/app/css/custom.scss @@ -0,0 +1,67 @@ +// import MUI colors +@import "../../bower_components/mui/src/sass/mui/colors"; + +// customize MUI variables +$mui-primary-color: mui-color('teal', '500'); +$mui-primary-color-dark: mui-color('teal', '700'); +$mui-primary-color-light: mui-color('teal', '100'); + +$mui-accent-color: mui-color('deep-purple', '900'); +$mui-accent-color-dark: mui-color('indigo', 'A100'); +$mui-accent-color-light: mui-color('indigo', 'A400'); + +$mui-base-font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, Arial, Verdana,"Trebuchet MS"; + +// import MUI SASS +@import "../../bower_components/mui/src/sass/mui"; + +//// + +#header { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 2; + transition: left 0.2s; +} + + +ul { + margin: 0; + padding: 0; +} + +li { + display: inline; + margin: 0; + padding: 0 4px 0 0; +} + +.dates { + padding: 2px; + border: solid 1px #80007e; + background-color: #ffffff; +} + +#btc, #fx { + font-size: 85%; +} + +.up, .ontime { + color: mui-color('green') !important; +} + +.down, .delayed { + color: mui-color('red') !important; +} + +.nochange { + color: #000000; +} +.password { + border: 1px solid mui-color('grey','400'); + background-color: mui-color('grey','200'); + font-family: monospace; + white-space: pre; +} diff --git a/app/js/clock.js b/app/js/clock.js index 891969d..236a34a 100644 --- a/app/js/clock.js +++ b/app/js/clock.js @@ -6,11 +6,13 @@ (function() { var storedData; - var self = this; var weatherCount = 0; var skycons = new Skycons({"color": "white"}); + var refreshTimer = 0; + var viewTimer = 0; + var eventBus = {}; - MicroEvent.mixin(this); + MicroEvent.mixin(eventBus); function getData() { $.ajax({ @@ -76,18 +78,18 @@ // event bus - this.bind('switchWeather', function() { + eventBus.bind('switchWeather', function() { switchWeather(); }); // timers - function startWeather() { + function refreshWeatherView() { + eventBus.trigger('switchWeather'); + var now = new Date(); + var mod = 10000 - (now.getTime() % 10000); - updateWeather(); - setInterval(function() { - self.trigger('switchWeather'); + viewTimer = setTimeout(function() {refreshWeatherView();}, mod + 10); - }, 10000); } function updateClock() { @@ -98,7 +100,7 @@ function clock() { 'use strict'; updateClock(); - var now = new Date; + var now = new Date(); var mod = 60000 - (now.getTime() % 60000); setTimeout(function() {clock();}, mod + 10); @@ -106,14 +108,18 @@ } function refresh() { - setInterval(function() { - getData() - }, 900000); + getData(); + var now = new Date(); + var mod = 600000 - (now.getTime() % 600000); + + refreshTimer = setTimeout(function() {refresh();}, mod + 10); + } clock(); - getData(); +// getData(); refresh(); + refreshWeatherView(); $('#misc').html($(window).width()); })(); diff --git a/lib/today.js b/lib/today.js index 7088378..de0c594 100644 --- a/lib/today.js +++ b/lib/today.js @@ -4,7 +4,7 @@ var http = require('http'), request = require('request'), cheerio = require('cheerio'), util = require('util'), cron = require('node-cron'); var dateFormat = require('dateformat'); var jsonfile = require('jsonfile'), fs = require('fs'); -var nano = require('nano')('http://localhost:5984'); +var nano = require('nano')('http://martind2000:1V3D4m526i@localhost:5984'); var log4js = require('log4js'); var logger = log4js.getLogger(); var calHandler = require('./today/calHandler'); diff --git a/views/pages/slack.ejs b/views/pages/slack.ejs index 5d80cca..bcf2523 100644 --- a/views/pages/slack.ejs +++ b/views/pages/slack.ejs @@ -1,8 +1,15 @@ <% include ../partials/head %> + +
-
-
Slack - I have plenty of talent and vision I just don't give a damn
+
@@ -16,7 +23,7 @@
-
Starting Points/Metasites
+
Starting Points/Metasites
-
Tools
+
Tools
-
Bitcoin
+
Bitcoin
  • Bitstamp
  • Kraken
    • @@ -96,12 +103,12 @@
    -
    Package Tracking
    +
    Package Tracking
    -
    Weather
    +
    Weather
    -
    Free Email WEBpages
    +
    Free Email WEBpages
    • Gmail
      • @@ -170,7 +177,7 @@
      -
      Contracting
      +
      Contracting
      -
      Entertainment
      +
      Entertainment
      • @@ -219,7 +226,7 @@
      -
      Travel
      +
      Travel
      DBEGLQ: GLQDBE: @@ -289,7 +296,7 @@
      -
      Computer Software, etc.
      +
      Computer Software, etc.
      -
      Reference & Special sites
      +
      Reference & Special sites
      -
      Earth and Beyond
      +
      Earth and Beyond
      • ENB Arsenal
        • diff --git a/views/pages/today.ejs b/views/pages/today.ejs index 680bbed..7dc3e84 100644 --- a/views/pages/today.ejs +++ b/views/pages/today.ejs @@ -1,8 +1,15 @@ <% include ../partials/head %> +
        -
        -
        Today
        +
        +
        <% include ../partials/weather %> diff --git a/views/partials/head.ejs b/views/partials/head.ejs index 1508b2a..3becca9 100644 --- a/views/partials/head.ejs +++ b/views/partials/head.ejs @@ -9,54 +9,7 @@ - - +