[#if FORECAST#]
<style>
@import url(
https://fonts.googleapis.com/css?family ... 00,400,700);
@import url(
https://cdnjs.cloudflare.com/ajax/libs/ ... ns.min.css);
/* Vars */
/* Grid System */
.fc-widget-1 * {
box-sizing: border-box;
}
.fc-widget-3 {
max-width: 1520px;
position: relative;
padding: 0 15;
min-width: 1500px;
}
.fc-widget-3:before, .fc-widget-1:after {
content: "";
display: table;
}
.fc-widget-3:after {
clear: both;
}
.fc-widget-3 .row:before, .fc-widget-1 .row:after {
content: "";
display: table;
}
.fc-widget-3 .row:after {
clear: both;
}
.fc-widget-3 .columns {
float: left;
display: block;
margin-bottom: 0px;
vertical-align: top;
padding: 0;
}
.fc-widget-3 .columns.sm-days {
width: 14.28%;
opacity: 0;
}
/* Main Styles */
.fc-widget-3 {
color: #fff;
font-family: "Lato", "Arial", sans-serif;
font-size: 1.5rem;
line-height: 1.6;
transition: all 0.5s;
}
.fc-widget-3 {
background: rgba(64, 165, 188, 0.8);
border-radius: 0.5rem;
box-shadow: inset 0 1.5px 4px rgba(255, 255, 255, 0.25), inset 0 1.5px 6px rgba(255, 255, 255, 0.25);
min-height: 200px;
overflow: hidden;
}
/* Header Section */
.fc-widget-3 header {
font-size: 3rem;
font-weight: 300;
padding: 1rem;
text-align: center;
overflow: hidden;
}
.fc-widget-3 header h2 {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 0px;
margin-bottom: 0px;
}
.fc-widget-3 .current-city-day {
font-size: 1rem;
display: block;
}
.fc-widget-3 sup {
position: relative;
top: -1em;
font-size: 50%;
}
.fc-widget-3 .current-city-weather {
font-size: 4rem;
}
/* Week Days Section */
.fc-widget-3 .week-days {
font-weight: 700;
text-align: center;
}
.fc-widget-3 .day {
background: #55a0b3;
font: 18px Arial, Helvetica, sans-serif;
border: 1px solid #86bdc9;
}
.fc-widget-3 .sm-days {
border-right: 1px solid #86bdc9;
cursor: pointer;
width: 150px;
}
.fc-widget-3 .sm-days:last-child {
border: none;
}
.fc-widget-3 .day-weather-icon,
.fc-widget-3 .day-weather-info {
margin: 1rem 0;
}
.fc-widget-3 .day-weather-info h2{
margin: 0;
}
.day-weather-icon {
font-size: 2.5rem;
}
/* Media Queries */
@media (max-width: 720px) {
.fc-widget-3 {
font-size: 12px;
}
}
@media (max-width: 520px) {
.fc-widget-3 .columns {
float: left;
margin-left: 0;
margin-top: 1rem;
}
.fc-widget-3 .columns:nth-child(odd) {
margin-left: 0;
}
.fc-widget-3 .columns.sm-four,
.fc-widget-3 .columns.sm-days {
width: 100%;
}
.fc-widget-3 .day {
padding: 1rem;
}
.fc-widget-3 .current-city-day {
font-size: 2rem;
}
}
/* Keyframes */
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
transform: none;
}
}
.fc-widget-3 .fadeInUp {
animation-name: fadeInUp;
animation-duration: 1s;
animation-fill-mode: both;
}
@keyframes fadeIn {
0% {
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.fc-widget-3 .fadeIn,
.fc-widget-3 .columns.sm-days {
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: both;
}
.fc-widget-3 .sm-days:nth-child(1) {
animation-delay: 0.2s;
}
.fc-widget-3 .sm-days:nth-child(2) {
animation-delay: 0.4s;
}
.fc-widget-3 .sm-days:nth-child(3) {
animation-delay: 0.6s;
}
.fc-widget-3 .sm-days:nth-child(4) {
animation-delay: 0.8s;
}
.fc-widget-3 .sm-days:nth-child(5) {
animation-delay: 1s;
}
.fc-widget-3 .sm-days:nth-child(6) {
animation-delay: 1.2s;
}
.fc-widget-3 .sm-days:nth-child(7) {
animation-delay: 1.4s;
}
.label-warning {
font-size: 23px;
}
.label-default {
font-size: 23px;
}
</style>
<section class="fc-widget-3">
<!-- Current Weather Details //-->
<header>
<div class="row">
<div class="sm-four columns current-city-name">
<h2>[#W_NAME#]</h2>
</div>
</div>
</header>
<!--// End Current Weather Details -->
<!-- Days //-->
<section class="week-days">
<div class="row">
[#begin FORECAST#]
<div class="sm-days columns">
<div class="day">
[#WEEK_DAY#]  %[#OBJ#].date%
</div>
<img src="/templates_alt/icon/openweather1/%[#OBJ#].image%.png" style="float: left; margin: 15px;">
<div class="day-weather-info">
<ul class="list-unstyled" style="list-style:outside none none;padding-left:2px;top: 5px;position: relative;font-size:14px;">
<li><span class="label label-warning">%[#OBJ#].temp_day%°C </span></li>
<li><br /><br /></li>
<li><span class="label label-default">%[#OBJ#].temp_night%°C </span></li>
<li><br><br></li>
<li><i><span style="font-size: 20px;">%[#OBJ#].weather_type%</span></i></li>
<li><br></li>
<li><span style="text-align: left;margin: 10px;"><#LANG_WIND#>: %[#OBJ#].wind_direction_text% %[#OBJ#].wind_speed% <#LANG_M_S#></span></li>
<li><span style="text-align: left;margin: 10px;"><#LANG_OW_WEATHER_OVERCAST#>: %[#OBJ#].clouds%%</span></li>
<li><span style="text-align: left;margin: 10px;"><#LANG_PRESSURE#>: %[#OBJ#].pressure_mmhg% <#LANG_MMHG#></span></li>
<li><span style="text-align: left;margin: 10px;"><#LANG_HUMIDITY#>: %[#OBJ#].humidity%%</span></li>
<li><span style="text-align: left;margin: 10px;"><#LANG_OW_WEATHER_RAIN#>: %[#OBJ#].rain%mm</span></li>
<li><span style="text-align: left;margin: 10px;"><#LANG_OW_WEATHER_SNOW#>: %[#OBJ#].snow%mm</span></li>
<li><span style="text-align: left;margin: 10px;"><#LANG_OW_SUNINFO_SUNRISE#>: %[#OBJ#].sunrise%</span></li>
<li><span style="text-align: left;margin: 10px;"><#LANG_OW_SUNINFO_SUNSET#>: %[#OBJ#].sunset%</span></li>
<li><span style="text-align: left;margin: 10px;"><#LANG_OW_SUNINFO_DAY_LENGTH#>: %[#OBJ#].day_length%</span></li>
</ul>
</div>
</div>
[#end FORECAST#]
</div>
</section>
<!--// End Days -->
</section>
[#endif FORECAST
