478 lines
7.4 KiB
SCSS
478 lines
7.4 KiB
SCSS
// import MUI colors
|
|
@import "./node_modules/muicss/lib/sass/mui/colors";
|
|
|
|
// customize MUI variables
|
|
$mui-primary-color: mui-color('yellow', '500');
|
|
$mui-primary-color-dark: mui-color('blue-grey', '700');
|
|
$mui-primary-color-light: mui-color('blue-grey', '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', "Helvetica Neue", Helvetica, Arial, Verdana, "Trebuchet MS";
|
|
$mui-base-font-weight: 300;
|
|
|
|
$mui-appbar-font-color: mui-color('black') !default;
|
|
|
|
$mui-link-font-color: mui-color('yellow', '900') !default;
|
|
|
|
// import MUI SASS
|
|
@import "./node_modules/muicss/lib/sass/mui";
|
|
@import "./src/css/horscroll";
|
|
////
|
|
|
|
body {
|
|
background-color: mui-color('grey', '100');
|
|
}
|
|
|
|
#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, #trend {
|
|
font-size: 85%;
|
|
}
|
|
|
|
.up, .ontime, .trendUp {
|
|
color: mui-color('green') !important;
|
|
}
|
|
|
|
.down, .delayed, .trendDown {
|
|
color: $mui-text-danger !important;
|
|
}
|
|
|
|
.nochange {
|
|
color: #000000;
|
|
}
|
|
|
|
.password {
|
|
border: 1px solid mui-color('grey', '400');
|
|
background-color: mui-color('grey', '200');
|
|
font-family: monospace;
|
|
white-space: pre;
|
|
}
|
|
|
|
.trendUp:before {
|
|
content: "▲";
|
|
}
|
|
|
|
.trendDown:before {
|
|
content: '▼'
|
|
}
|
|
|
|
.card {
|
|
position: relative;
|
|
background-color: #fff;
|
|
min-height: 48px;
|
|
margin: 8px;
|
|
border-bottom-color: #666666;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.itemRow {
|
|
background-color: #fff;
|
|
min-height: 48px;
|
|
border-bottom-color: mui-color('grey', '200');
|
|
border-bottom-width: 1px;
|
|
border-bottom-style: solid;
|
|
line-height: 48px;
|
|
}
|
|
|
|
.cardTitle {
|
|
border-bottom-color: mui-color('grey', '200');
|
|
border-bottom-width: 1px;
|
|
border-bottom-style: solid;
|
|
}
|
|
|
|
.entry {
|
|
height: 36px;
|
|
margin: 6px 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.time {
|
|
font-family: 'Roboto';
|
|
}
|
|
|
|
.titleBar {
|
|
font-family: 'Gotham Light';
|
|
font-size: 125%;
|
|
}
|
|
|
|
#trains, #trainResults {
|
|
overflow-y: auto;
|
|
transition: all 0.5s;
|
|
-webkit-transition: all 0.5s;
|
|
|
|
}
|
|
|
|
.tableBody {
|
|
transition: all 0.5s;
|
|
-webkit-transition: all 0.5s;
|
|
|
|
}
|
|
|
|
.unsliced {
|
|
height: 455px;
|
|
}
|
|
|
|
.sliced {
|
|
height: 300px;
|
|
|
|
}
|
|
|
|
/* The snackbar - position it at the bottom and in the middle of the screen */
|
|
#snackbar {
|
|
visibility: hidden; /* Hidden by default. Visible on click */
|
|
min-width: 250px; /* Set a default minimum width */
|
|
margin-left: -125px; /* Divide value of min-width by 2 */
|
|
background-color: #333; /* Black background color */
|
|
color: #fff; /* White text color */
|
|
text-align: center; /* Centered text */
|
|
border-radius: 2px; /* Rounded borders */
|
|
padding: 16px; /* Padding */
|
|
position: fixed; /* Sit on top of the screen */
|
|
z-index: 1; /* Add a z-index if needed */
|
|
left: 50%; /* Center the snackbar */
|
|
bottom: 30px; /* 30px from the bottom */
|
|
}
|
|
|
|
/* Show the snackbar when clicking on a button (class added with JavaScript) */
|
|
#snackbar.show {
|
|
visibility: visible; /* Show the snackbar */
|
|
|
|
/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
|
|
However, delay the fade out process for 2.5 seconds */
|
|
/* -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
|
animation: fadein 0.5s, fadeout 0.5s 2.5s;*/
|
|
|
|
-webkit-animation: fadein 0.5s;
|
|
animation: fadein 0.5s;
|
|
}
|
|
|
|
/* Animations to fade the snackbar in and out */
|
|
@-webkit-keyframes fadein {
|
|
from {
|
|
bottom: 0;
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
bottom: 30px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadein {
|
|
from {
|
|
bottom: 0;
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
bottom: 30px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeout {
|
|
from {
|
|
bottom: 30px;
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
bottom: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeout {
|
|
from {
|
|
bottom: 30px;
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
bottom: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.temp0, .temp1, .temp2, .temp3, .temp4, .temp5 {
|
|
color: rgb(80, 181, 221)
|
|
}
|
|
|
|
.temp6 {
|
|
color: rgb(78, 178, 206)
|
|
}
|
|
|
|
.temp7 {
|
|
color: rgb(76, 176, 190)
|
|
}
|
|
|
|
.temp8 {
|
|
color: rgb(73, 173, 175)
|
|
}
|
|
|
|
.temp9 {
|
|
color: rgb(72, 171, 159)
|
|
}
|
|
|
|
.temp10 {
|
|
color: rgb(70, 168, 142)
|
|
}
|
|
|
|
.temp11 {
|
|
color: rgb(68, 166, 125)
|
|
}
|
|
|
|
.temp12 {
|
|
color: rgb(66, 164, 108)
|
|
}
|
|
|
|
.temp13 {
|
|
color: rgb(102, 173, 94)
|
|
}
|
|
|
|
.temp14 {
|
|
color: rgb(135, 190, 64)
|
|
}
|
|
|
|
.temp15 {
|
|
color: rgb(179, 204, 26)
|
|
}
|
|
|
|
.temp16 {
|
|
color: rgb(214, 213, 28)
|
|
}
|
|
|
|
.temp17 {
|
|
color: rgb(249, 202, 3)
|
|
}
|
|
|
|
.temp18 {
|
|
color: rgb(246, 181, 3)
|
|
}
|
|
|
|
.temp19 {
|
|
color: rgb(244, 150, 26)
|
|
}
|
|
|
|
.temp20 {
|
|
color: rgb(236, 110, 5)
|
|
}
|
|
|
|
.day {
|
|
font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.summary::first-letter {
|
|
text-transform: capitalize
|
|
}
|
|
|
|
#weather{
|
|
margin-top: 15px;
|
|
transition: all 0.5s;
|
|
-webkit-transition: all 0.5s;
|
|
}
|
|
|
|
#newsShell {
|
|
height:225px;
|
|
}
|
|
#news{
|
|
height: 275px;
|
|
margin-top:15px;
|
|
}
|
|
|
|
#byme, #bymeYelp {
|
|
margin-top:5px;
|
|
}
|
|
|
|
#bymeYelp img {
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.stop-scrolling {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.fullscreen {
|
|
position: absolute;
|
|
z-index: 5000;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
background-color: mui-color('grey','300');
|
|
background-repeat: no-repeat;
|
|
background-position: center top;
|
|
}
|
|
|
|
.fillpanel {
|
|
width:100%;
|
|
height:100%;
|
|
background-color: mui-color('amber', '50');
|
|
}
|
|
|
|
.fullscreen .header {
|
|
/*position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: +1;
|
|
transition: left 0.2s;*/
|
|
|
|
position:sticky;
|
|
}
|
|
|
|
.box {
|
|
display: flex;
|
|
flex-flow: column;
|
|
height:100%;
|
|
// overflow:auto;
|
|
}
|
|
|
|
.box .headerSpacer {
|
|
flex: 0 1 66px;
|
|
}
|
|
|
|
.box .content {
|
|
flex: 1 1 auto;
|
|
background-color: mui-color('white');
|
|
overflow: auto;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.newsarticle img {
|
|
max-height:100%;
|
|
max-width:100%;
|
|
}
|
|
|
|
.tiny {
|
|
font-size:1rem;
|
|
}
|
|
|
|
.small {
|
|
font-size:2rem;
|
|
}
|
|
|
|
.medium {
|
|
font-size:4rem;
|
|
}
|
|
|
|
.large {
|
|
font-size:6rem;
|
|
}
|
|
|
|
.cardLink {
|
|
color: mui-color('blue', '500')
|
|
}
|
|
|
|
.endbumper {
|
|
height:66px;
|
|
}
|
|
|
|
|
|
#weatherP {
|
|
background-size: cover;
|
|
color:white;
|
|
font-family: 'Roboto';
|
|
font-weight: 100;
|
|
}
|
|
|
|
.weatherDay {
|
|
background-image: url(../gfx/bg_morning.jpg);
|
|
}
|
|
|
|
.weatherEvening {
|
|
background-image: url(../gfx/bg_evening.jpg);
|
|
}
|
|
|
|
.cloudy_n {
|
|
background-image: url(../gfx/cloudy_n.jpg);
|
|
}
|
|
|
|
.cloudy_d {
|
|
background-image: url(../gfx/cloudy_d.jpg);
|
|
}
|
|
|
|
.clear_d {
|
|
background-image: url(../gfx/clear_d.jpg);
|
|
}
|
|
|
|
.clear_n {
|
|
background-image: url(../gfx/clear_n.jpg);
|
|
}
|
|
|
|
.foggy_d {
|
|
background-image: url(../gfx/foggy_d.jpg);
|
|
}
|
|
|
|
.foggy_n {
|
|
background-image: url(../gfx/foggy_n.jpg);
|
|
}
|
|
|
|
.rain_d {
|
|
background-image: url(../gfx/rain_d.jpg);
|
|
}
|
|
|
|
.rain_n {
|
|
background-image: url(../gfx/rain_n.jpg);
|
|
}
|
|
|
|
.snow_d {
|
|
background-image: url(../gfx/snow_d.jpg);
|
|
}
|
|
|
|
.snow_n {
|
|
background-image: url(../gfx/snow_n.jpg);
|
|
}
|
|
|
|
.storm_d {
|
|
background-image: url(../gfx/storm_d.jpg);
|
|
}
|
|
|
|
.storm_n {
|
|
background-image: url(../gfx/storm_n.jpg);
|
|
}
|
|
|
|
|
|
|
|
|
|
.glassy {
|
|
background-color: rgba(0,0,0, 0.4);
|
|
-webkit-backdrop-filter: blur(5px);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.animTrans {
|
|
-webkit-transition: all 1s linear;
|
|
transition : all 1s linear;
|
|
-moz-transition : all 1s linear;
|
|
-webkit-transition: all 1s linear;
|
|
-o-transition : all 1s linear;
|
|
}
|