Some bulletin and introslide design fixes
This commit is contained in:
parent
e438ab25ca
commit
557680146b
|
@ -3470,26 +3470,30 @@ flex-direction: row;
|
||||||
transform: translate(0,0);
|
transform: translate(0,0);
|
||||||
}
|
}
|
||||||
.bulletin .frost-pane {
|
.bulletin .frost-pane {
|
||||||
background: linear-gradient(to right, rgba(252, 85, 18, 1) 0, rgba(252, 85, 18, .45) 100%);
|
background: linear-gradient(to right, rgba(224, 97, 47, .85) 0, rgba(252, 97, 47, .45) 100%);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
}
|
}
|
||||||
.bulletin .cityname {
|
.bulletin .cityname {
|
||||||
font-family: Frutiger;
|
font-family: Frutiger;
|
||||||
color: #d8c422;
|
color: #d8c422;
|
||||||
font-size: 35px;
|
font-size: 36px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 45px;
|
left: 50px;
|
||||||
top: 15px;
|
top: 16px;
|
||||||
|
transform: scale(105%,100%);
|
||||||
|
transform-origin: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bulletin .warnings {
|
.bulletin .warnings {
|
||||||
font-family: 'Frutiger Bold Cn'
|
font-family: 'Frutiger 57 condensed';
|
||||||
|
transform: scale(112.5%,100%);
|
||||||
|
transform-origin: left;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 38px;
|
font-size: 40px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 45px;
|
left: 50px;
|
||||||
top: 66.5px;
|
top: 62.5px;
|
||||||
line-height: 125%;
|
line-height: 125%;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
font-stretch: condensed;
|
font-stretch: condensed;
|
||||||
|
@ -3502,7 +3506,8 @@ a, body, div, h1, html, p {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-family: Frutiger;
|
font-family: Frutiger;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: subpixel-antialiased;
|
||||||
}
|
}
|
||||||
|
|
||||||
html * {
|
html * {
|
||||||
|
@ -3973,6 +3978,8 @@ label{
|
||||||
text-shadow: 2px 2px 5px #000;
|
text-shadow: 2px 2px 5px #000;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
min-width: 20%;
|
min-width: 20%;
|
||||||
|
transform: scale(102.5%,100%);
|
||||||
|
transform-origin: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-slide .info-subheader span {
|
.info-slide .info-subheader span {
|
||||||
|
@ -4326,19 +4333,6 @@ label{
|
||||||
right: 98px;
|
right: 98px;
|
||||||
font-stretch: semi-expanded;
|
font-stretch: semi-expanded;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bulletin #subhead-noaa {
|
|
||||||
font-size: 21.5px;
|
|
||||||
font-weight: 700;
|
|
||||||
right: 98px;
|
|
||||||
font-stretch: semi-expanded;
|
|
||||||
font-style: italic;
|
|
||||||
color: #f6a67a;
|
|
||||||
font-family: Frutiger;
|
|
||||||
text-shadow: 0px 0px 0px #000;
|
|
||||||
line-height: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-slide-content {
|
.info-slide-content {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
|
@ -4710,12 +4704,14 @@ label{
|
||||||
.city-slide-intro .segment {
|
.city-slide-intro .segment {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-family: Frutiger;
|
font-family: Frutiger;
|
||||||
font-size: 52px;
|
font-size: 57.5px;
|
||||||
text-shadow: #000 0px 0px 0px;
|
text-shadow: #000 0px 0px 0px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
left: 130px;
|
left: 140px;
|
||||||
bottom: 40px
|
bottom: 38px;
|
||||||
|
transform: scale(106.5%,100%);
|
||||||
|
transform-origin: left;
|
||||||
}
|
}
|
||||||
@keyframes citymarqueeweatherscan {
|
@keyframes citymarqueeweatherscan {
|
||||||
0% {transform: translate(0, 0);}
|
0% {transform: translate(0, 0);}
|
||||||
|
@ -4725,11 +4721,11 @@ label{
|
||||||
.city-slide-intro .cityweatherscanmarquee {
|
.city-slide-intro .cityweatherscanmarquee {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-family: Frutiger;
|
font-family: Frutiger;
|
||||||
font-size: 24px;
|
font-size: 25px;
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
bottom: 15px;
|
bottom: 12.5px;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
@ -4738,6 +4734,10 @@ label{
|
||||||
word-spacing: 15px;
|
word-spacing: 15px;
|
||||||
animation: citymarqueeweatherscan 10.5s linear normal forwards;
|
animation: citymarqueeweatherscan 10.5s linear normal forwards;
|
||||||
}
|
}
|
||||||
|
.city-slide-intro .cityweatherscanmarquee span {
|
||||||
|
display: block;
|
||||||
|
transform: scale(106%,100%);
|
||||||
|
}
|
||||||
.city-slide-intro {
|
.city-slide-intro {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: transparent url(/images/city1.jpg) no-repeat bottom;
|
background: transparent url(/images/city1.jpg) no-repeat bottom;
|
||||||
|
@ -4753,12 +4753,19 @@ label{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-left: 12.5px;
|
padding-left: 11px;
|
||||||
line-height: 2.5px;
|
padding-top: 10px;
|
||||||
|
line-height: 110%;
|
||||||
z-index: 101
|
z-index: 101
|
||||||
}
|
}
|
||||||
|
.city-slide-intro .weatherscancopyright span{
|
||||||
|
display: block;
|
||||||
|
transform: scale(107%,100%);
|
||||||
|
transform-origin: left;
|
||||||
|
}
|
||||||
@keyframes cityaccentmovei {
|
@keyframes cityaccentmovei {
|
||||||
35% {transform: translate(-.75%, -4.5%) scaleY(1.03);}
|
35% {transform: translate(-.75%, -4.5%) scaleY(1.03);}
|
||||||
100% {transform: translate(-8.75%, -12%) scale(1.15, 1.2);}
|
100% {transform: translate(-8.75%, -12%) scale(1.15, 1.2);}
|
||||||
|
@ -6180,29 +6187,33 @@ label{
|
||||||
}
|
}
|
||||||
|
|
||||||
.bulletin .blue.left {
|
.bulletin .blue.left {
|
||||||
background-image: url(/images/red-curve-dark.svg);
|
-webkit-mask-image: url(/images/red-curve-dark.svg);
|
||||||
background-size: 200% 100%;
|
-webkit-mask-size: 200% 100%;
|
||||||
|
background-image: url(/images/warning.png);
|
||||||
|
background-size: 470% 60.4%;
|
||||||
|
background-position: -8.8% 7.7%;
|
||||||
width: 22%;
|
width: 22%;
|
||||||
height: 150%;
|
height: 150%;
|
||||||
top: 6%;
|
top: 6%;
|
||||||
left: -8%;
|
left: -8%;
|
||||||
opacity: .7;
|
opacity: 1;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.bulletin .blue.bottom {
|
.bulletin .blue.bottom {
|
||||||
background: transparent url(/images/warning.png) no-repeat;
|
background-image: url(/images/warning.png);
|
||||||
background-position: -6.1% -30%;
|
background-size: 470% 60.4%;
|
||||||
|
background-position: -10.5% 80%;
|
||||||
width: 22%;
|
width: 22%;
|
||||||
height: 150%;
|
height: 150%;
|
||||||
top: -37.5%;
|
top: -37.5%;
|
||||||
left: -9.25%;
|
left: -9.25%;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
-webkit-mask-image: url(/images/red-curve-dark.svg);
|
/*-webkit-mask-image: url(/images/red-curve-dark.svg);
|
||||||
mask-image: url(/images/red-curve-dark.svg);
|
mask-image: url(/images/red-curve-dark.svg);
|
||||||
-webkit-mask-size: 200% 100%;
|
-webkit-mask-size: 200% 100%;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -6235,8 +6246,8 @@ label{
|
||||||
.bulletin {
|
.bulletin {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: transparent url(/images/warning.png) no-repeat;
|
background: transparent url(/images/warning.png) no-repeat;
|
||||||
background-position: 70% 100%;
|
background-position: 70% 105%;
|
||||||
background-size: 101%;
|
background-size: 101% 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -6292,15 +6303,17 @@ label{
|
||||||
|
|
||||||
|
|
||||||
.bulletin #subhead-noaa {
|
.bulletin #subhead-noaa {
|
||||||
font-size: 21.5px;
|
font-size: 22.5px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
right: 98px;
|
right: 105px;
|
||||||
font-stretch: semi-expanded;
|
font-stretch: semi-expanded;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
color: #f6a67a;
|
color: #f6a67a;
|
||||||
font-family: Frutiger;
|
font-family: Frutiger;
|
||||||
text-shadow: 0px 0px 0px #000;
|
text-shadow: 0px 0px 0px #000;
|
||||||
line-height: 35px;
|
line-height: 35px;
|
||||||
|
transform: scale(101%,100%) translateY(-42.5%);
|
||||||
|
transform-origin: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
#marqueeSevere {
|
#marqueeSevere {
|
||||||
|
|
|
@ -511,12 +511,15 @@
|
||||||
<div class='yellow curve right'></div>
|
<div class='yellow curve right'></div>
|
||||||
<div class='white curve right'></div>
|
<div class='white curve right'></div>
|
||||||
<div class='white curve bottom'></div>
|
<div class='white curve bottom'></div>
|
||||||
<div class='frost-pane' style="display:">
|
<div class='frost-pane' style="display:None">
|
||||||
<div class='cityname'>Gainesville Area</div>
|
<div class='cityname'>Frankfort Area</div>
|
||||||
<div id="warningbulletin" class='warnings'>Severe Thunderstorm Watch 720 in effect until 4:30 PM EST Tuesday.
|
<div id="warningbulletin" class='warnings'>Flash Flood Watch in effect until 4:30 PM EST Tuesday.
|
||||||
|
Monday morning.
|
||||||
</br>
|
</br>
|
||||||
</br>
|
</br>
|
||||||
Severe Thunderstorm Watch 720 in effect until 4:30 PM EST Tuesday.
|
Severe Thunderstorm Watch 720 in effect until 4:30 PM EST Tuesday.
|
||||||
|
Monday
|
||||||
|
Monday morning.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -957,7 +960,7 @@
|
||||||
|
|
||||||
<!-- Intros -->
|
<!-- Intros -->
|
||||||
<div class="info-slide city-slide-intro" style="display:none">
|
<div class="info-slide city-slide-intro" style="display:none">
|
||||||
<div class="weatherscancopyright" style="display:none"> <span class="copyrighttext"> Weatherscan is brought to you by The Weather Channel® and MIDCO </span></div>
|
<div class="weatherscancopyright" style="display:none"> <span class="copyrighttext"> Weatherscan is brought to you by The Weather Channel®<br> and MIDCO </span></div>
|
||||||
<div class='cityaccent viii curve' style="display:none"></div>
|
<div class='cityaccent viii curve' style="display:none"></div>
|
||||||
<div class='cityaccent ii curve' style="display:none"></div>
|
<div class='cityaccent ii curve' style="display:none"></div>
|
||||||
<div class='cityaccent i curve' style="display:none"></div>
|
<div class='cityaccent i curve' style="display:none"></div>
|
||||||
|
@ -967,7 +970,7 @@
|
||||||
<div class='cityaccentviishadow curve'></div>
|
<div class='cityaccentviishadow curve'></div>
|
||||||
<div class='cityaccentvii curve'></div>
|
<div class='cityaccentvii curve'></div>
|
||||||
<div class='cityaccent ix curve' style="display:none"></div>
|
<div class='cityaccent ix curve' style="display:none"></div>
|
||||||
<div class='cityweatherscanmarquee' style="display:none">weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan</div>
|
<div class='cityweatherscanmarquee' style="display:none"><span>weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan weatherscan</span></div>
|
||||||
<div class='segment' style="display:none">Airport Conditions</div>
|
<div class='segment' style="display:none">Airport Conditions</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-slide airport-slide-intro" style="display:none">
|
<div class="info-slide airport-slide-intro" style="display:none">
|
||||||
|
|
|
@ -1216,7 +1216,7 @@ var mainMap
|
||||||
}, 1000);
|
}, 1000);
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
$('.city-slide-intro .weatherscancopyright .copyrighttext').fadeOut(500, function(){
|
$('.city-slide-intro .weatherscancopyright .copyrighttext').fadeOut(500, function(){
|
||||||
$('.city-slide-intro .weatherscancopyright .copyrighttext').css('font-size','10px')
|
$('.city-slide-intro .weatherscancopyright .copyrighttext').css('font-size','15px')
|
||||||
$('.city-slide-intro .weatherscancopyright .copyrighttext').text("© 2021 Weather Group Television LLC All Rights Reserved")
|
$('.city-slide-intro .weatherscancopyright .copyrighttext').text("© 2021 Weather Group Television LLC All Rights Reserved")
|
||||||
});
|
});
|
||||||
$('.city-slide-intro .weatherscancopyright .copyrighttext').fadeIn(500);
|
$('.city-slide-intro .weatherscancopyright .copyrighttext').fadeIn(500);
|
||||||
|
|
Loading…
Reference in New Issue