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