You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
267 lines
4.5 KiB
267 lines
4.5 KiB
|
|
#lastUpdated {
|
|
color: #fff;
|
|
padding: 5% 0;
|
|
}
|
|
#lastUpdated:before {
|
|
content: '-- ';
|
|
}
|
|
#lastUpdated:after {
|
|
content: ' --';
|
|
}
|
|
|
|
/*----------------
|
|
Containers
|
|
-----------------*/
|
|
.wrapper {
|
|
color: #fff;
|
|
overflow: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
/*----------------
|
|
Status Bar
|
|
-----------------*/
|
|
#status {
|
|
background-color: #FFECAE;
|
|
color: rgba(0,0,0,0.5);
|
|
display: none;
|
|
font-size: 1rem;
|
|
width: 100%;
|
|
z-index: 100;
|
|
}
|
|
#status p {
|
|
display: inline-block;
|
|
padding: 10px 40px 6px;
|
|
}
|
|
#status a {
|
|
color: #fff;
|
|
}
|
|
#status .close {
|
|
background: none;
|
|
color: rgba(0,0,0,0.5);
|
|
float: right;
|
|
height: 40px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 40px;
|
|
}
|
|
/*** Error & Success Messages ***/
|
|
#status.error {
|
|
background-color: #EE9797;
|
|
}
|
|
#status.success {
|
|
background-color: #82C886;
|
|
}
|
|
#status.error, #status.error .close,
|
|
#status.success, #status.success .close {
|
|
color: #fff;
|
|
}
|
|
#status.error .fa-exclamation-triangle,
|
|
#status.success .fa-check-circle {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/*----------------
|
|
Buttons
|
|
-----------------*/
|
|
button {
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
#locateBtn, #unitBtn {
|
|
background: none;
|
|
border: 1px solid rgba(255,255,255,0.25);
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
height: 40px;
|
|
transition: background 1s ease-in-out, border 0.2s ease-in-out;
|
|
width: 40px;
|
|
}
|
|
#locateBtn.on, #unitBtn.on {
|
|
background: rgba(255,255,255,0.25);
|
|
}
|
|
#locateBtn:focus, #locateBtn:hover, #unitBtn:focus, #unitBtn:hover {
|
|
border: 1px solid rgba(255,255,255,0.75);
|
|
}
|
|
#locateBtn {
|
|
margin-right: 10px;
|
|
}
|
|
#unitBtn {
|
|
font-weight: 300;
|
|
padding-right: 3px;
|
|
padding-top: 2px;
|
|
text-transform: uppercase;
|
|
}
|
|
#unitBtn:before {
|
|
content: '\00b0'; /* Degree symbol */
|
|
padding: 1px;
|
|
}
|
|
/* locateBtn Pulse Animation */
|
|
#locateBtn.pulse {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
@keyframes pulse {
|
|
20% { background: rgba(255,255,255,0.25); }
|
|
}
|
|
|
|
/*----------------
|
|
Current Weather
|
|
-----------------*/
|
|
#current {
|
|
padding: 10% 5% 20%;
|
|
position: relative;
|
|
}
|
|
.location {
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
padding-top: 30px;
|
|
}
|
|
.date {
|
|
font-size: 1em;
|
|
font-weight: 300;
|
|
text-transform: uppercase;
|
|
}
|
|
#current .weatherIcon {
|
|
height: 100px;
|
|
margin: 10% auto 7%;
|
|
width: 100px;
|
|
}
|
|
.temp:after {
|
|
content: '\00b0';
|
|
margin-right: -0.3em;
|
|
font-size: 30px;
|
|
top: -10px;
|
|
position: relative;
|
|
}
|
|
#current .conditions {
|
|
font-size: 1.2em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/*----------------
|
|
Future Forecast
|
|
-----------------*/
|
|
#future {
|
|
margin-bottom: 10%;
|
|
padding: 0 10%;
|
|
}
|
|
#future > .container {
|
|
border-bottom: 1px solid rgba(255,255,255,0.25);
|
|
margin: 0;
|
|
padding: 5% 10%;
|
|
width: 100%;
|
|
}
|
|
#future > .container:first-child {
|
|
border-top: 1px solid rgba(255,255,255,0.25);
|
|
}
|
|
#future .day {
|
|
padding: 0;
|
|
text-align: left;
|
|
text-transform: uppercase;
|
|
}
|
|
#future .weatherIcon {
|
|
float: right;
|
|
font-size: 0.5em;
|
|
height: 50px;
|
|
margin-left: 10%;
|
|
margin-top: -5%;
|
|
width: 50px;
|
|
}
|
|
#future p { text-align: left; }
|
|
.high:after, .low:after {
|
|
content: '\00b0';
|
|
padding: 1px;
|
|
}
|
|
|
|
/*----------------
|
|
Media Queries
|
|
-----------------*/
|
|
@media (min-width: 375px) {
|
|
#locateBtn, #unitBtn {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
}
|
|
#current {
|
|
padding-bottom: 15%;
|
|
padding-top: 15%;
|
|
}
|
|
}
|
|
@media (min-width: 550px) {
|
|
/* Current Weather */
|
|
#current {
|
|
font-size: 1.3rem;
|
|
padding-bottom: 10%;
|
|
padding-top: 10%;
|
|
}
|
|
.date, #current .conditions {
|
|
font-size: 16px; color:#797979;
|
|
padding-top:10px;
|
|
text-transform:capitalize;
|
|
font-family: 'Open Sans', sans-serif;
|
|
}
|
|
#current .weatherIcon {
|
|
font-size: 0.95em;
|
|
height: 120px;
|
|
margin: 7% auto 3%;
|
|
width: 120px;
|
|
}
|
|
/* Future Forecast */
|
|
#future {
|
|
font-size: 1.1rem;
|
|
padding: 0;
|
|
margin-bottom: 3%;
|
|
}
|
|
#future > .container {
|
|
border-bottom: none;
|
|
float: left;
|
|
padding: 20px;
|
|
width: 33.33%;
|
|
}
|
|
#future > .container:first-child { border-top: none; }
|
|
#future > .container:not(:last-child) { border-right: 1px solid rgba(0, 0, 0, 0.08); }
|
|
#future .day, #future p { text-align: center; color:#000;}
|
|
#future .day{
|
|
font-weight:600;
|
|
}
|
|
#future .weatherIcon {
|
|
font-size: 0.56em;
|
|
float: none;
|
|
height: 60px;
|
|
margin: 10% auto 5%;
|
|
width: 60px;
|
|
}
|
|
footer { font-size: 0.9rem; }
|
|
}
|
|
@media (min-width: 880px) {
|
|
#current {
|
|
font-size: 1.5rem;
|
|
padding-bottom: 7%;
|
|
padding-top: 7%;
|
|
}
|
|
#current .weatherIcon {
|
|
font-size: 0.82em;
|
|
margin: 5% auto 2%;
|
|
}
|
|
#lastUpdated {
|
|
padding: 3%;
|
|
}
|
|
}
|
|
.weather_img{
|
|
margin-top:30px;
|
|
}
|
|
.weather_img2{
|
|
margin-top:10px;
|
|
margin-bottom:10px;
|
|
}
|
|
.high{
|
|
font-size:12px;
|
|
color:#000000;
|
|
}
|
|
.low{
|
|
font-size:12px;
|
|
margin-left: 5px;
|
|
color:#000000;
|
|
} |