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

#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;
}