markmental/ws4kp-linhanced
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

progress screen progress bar

Browse source
This commit is contained in:
Matt Walsh 2022-08-05 15:40:53 -05:00
commit 8cc6e4a1eb
13 changed files with 148 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

2
server/styles/main.css
View file

File diff suppressed because one or more lines are too long

2
server/styles/main.css.map
View file

File diff suppressed because one or more lines are too long

66
server/styles/scss/_progress.scss
View file

@ -11,7 +11,7 @@
top: 15px;
margin: 0px 10px;
box-sizing: border-box;
height: 280px;
height: 310px;
overflow: hidden;
.item {
@ -82,4 +82,68 @@
}
}
}
#progress-html.weather-display .scroll {
@keyframes progress-scroll {
0% {
background-position: -40px 0;
}
100% {
background-position: 40px 0;
}
}
.progress-bar-container {
border: 2px solid black;
background-color: white;
margin: 20px auto;
width: 524px;
position: relative;
display: none;
&.show {
display: block;
}
.progress-bar {
height: 20px;
margin: 2px;
width: 520px;
background: repeating-linear-gradient(90deg,
c.$gradient-loading-1 0px,
c.$gradient-loading-1 5px,
c.$gradient-loading-2 5px,
c.$gradient-loading-2 10px,
c.$gradient-loading-3 10px,
c.$gradient-loading-3 15px,
c.$gradient-loading-4 15px,
c.$gradient-loading-4 20px,
c.$gradient-loading-3 20px,
c.$gradient-loading-3 25px,
c.$gradient-loading-2 25px,
c.$gradient-loading-2 30px,
c.$gradient-loading-1 30px,
c.$gradient-loading-1 40px,
);
// animation
animation-duration: 2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: progress-scroll;
animation-timing-function: linear;
}
.cover {
position: absolute;
top: 0px;
right: 0px;
background-color: white;
width: 100%;
height: 24px;
}
}
}

21
server/styles/scss/_radar.scss Normal file
View file

@ -0,0 +1,21 @@
@use 'shared/_colors'as c;
@use 'shared/_utils'as u;
#radar-html.weather-display {
background-image: url('../images/BackGround4_1.png');
.header {
.title.dual {
color: white;
font-family: 'Arial', sans-serif;
font-weight: bold;
font-size: 28pt;
.bottom {
top: 30px;
}
}
}
}
.weather-display .main.radar {}

2
server/styles/scss/_weather-display.scss
View file

@ -110,7 +110,7 @@
.scroll {
@include u.text-shadow(3px, 1.5px);
width: 640px;
height: 80px;
height: 70px;
overflow: hidden;
margin-top: 10px;

5
server/styles/scss/main.scss
View file

@ -1,9 +1,10 @@
@import 'page';
@import 'weather-display';
@import 'current-weather';
@import 'extended-forecast';
@import 'hourly';
@import 'latest-observations';
@import 'local-forecast';
@import 'progress';
@import 'regional-forecast';
@import 'weather-display';
@import 'radar';
@import 'regional-forecast';

5
server/styles/scss/shared/_colors.scss
View file

@ -7,6 +7,11 @@ $column-header: rgb(32, 0, 87);
$gradient-main-background-1: #102080;
$gradient-main-background-2: #001040;
$gradient-loading-1: #09246f;
$gradient-loading-2: #364ac0;
$gradient-loading-3: #4f99f9;
$gradient-loading-4: #8ffdfa;
$extended-low: #8080FF;
$blue-box: #26235a;