/* * Copyright (c) 2016 by Josh Bader (http://codepen.io/joshbader/pen/EjXgqr) * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is furnished * to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in all * copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A * PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE * OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ /* Modified 2016-05-01 (set color via variable) by PatharaNor */ :root{ --weather-border-color: #bbbbbb; --weather-bg-color: white; }.icon{ vertical-align:top; position: relative; display: inline-block; display:table; width:100%; padding:2em; height:4em; font-size: 1.1em; /* control icon size here */ }@media only screen and (max-width:790px){ .icon{font-size:1em}}.cloud{ position: absolute; z-index: 1; top: 50%; left: 50%; width: 1.84375em; height: 1.84375em; margin: -0.92187em; margin-left: -0.82187em; background: #ffffff; border-radius: 50%; box-shadow: -1.09375em 0.34375em 0 -0.34375em #ffffff, 1.03125em 0.46875em 0 -0.46875em #ffffff, 0 0 0 0.1875em #bbbbbb, -1.09375em 0.34375em 0 -0.15625em #bbbbbb, 1.03125em 0.46875em 0 -0.28125em #bbbbbb; }.cloud:after{ content: ''; position: absolute; bottom: 0; left: -0.25em; display: block; width: 2.28125em; height: 0.5em; background: #ffffff; box-shadow: 0 0.21875em 0 -0.03125em #bbbbbb; }.cloud:nth-child(2){ z-index: 0; background: #bbbbbb; box-shadow: -1.09375em 0.34375em 0 -0.34375em #bbbbbb, 1.03125em 0.46875em 0 -0.46875em #bbbbbb, 0 0 0 0.1875em #bbbbbb, -1.09375em 0.34375em 0 -0.15625em #bbbbbb, 1.03125em 0.46875em 0 -0.28125em #bbbbbb; opacity: 0.3; transform: scale(0.5) translate(6em, -1.5em); animation: cloud 4s linear infinite; }.cloud:nth-child(2):after{ background: #bbbbbb; }.sun{ position: absolute; top: 50%; left: 50%; width: 1.25em; height: 1.25em; margin: -0.625em; background: #ffc000; border-radius: 50%; box-shadow: 0 0 0 0.1875em #bbbbbb; animation: spin 12s infinite linear; }.rays{ position: absolute; top: -1em; left: 50%; display: block; width: 0.1875em; height: 0.5625em; margin-left: -0.09375em; background: #bbbbbb; border-radius: 0.125em; box-shadow: 0 2.6875em #bbbbbb; }.rays:before, .rays:after{ content: ''; position: absolute; top: 0em; left: 0em; display: block; width: 0.1875em; height: 0.5625em; transform: rotate(60deg); transform-origin: 50% 1.625em; background: #bbbbbb; border-radius: 0.125em; box-shadow: 0 2.6875em #bbbbbb; }.rays:before{ transform: rotate(120deg); }.cloud + .sun{ margin: -1em 0.5em; }.cloud + .rain + .rain + .sun{ margin: -1em 0.5em; }.cloud + .snow + .sun{ margin: -1em 0.5em; }.cloud + .lightning + .sun{ margin: -1em 0.5em; }.rain, .lightning, .snow{ position: absolute; z-index: 2; top: 50%; left: 50%; width: 1.875em; height: 1.875em; margin: 0.1875em 0 0 -1em; background: #ffffff; }.rain:after{ content: ''; position: absolute; z-index: 2; top: 50%; left: 50%; width: 0.5625em; height: 0.5625em; margin: -0.5em 0 0 -0.125em; background: #0cf; border-radius: 100% 0 60% 50% / 60% 0 100% 50%; box-shadow: 0.3125em 0.4375em 0 -0.0625em rgba(255,255,255,0.2), -0.4375em 0.5625em 0 -0.0625em rgba(255,255,255,0.2), -0.6875em -0.0625em 0 rgba(255,255,255,0.2); transform: rotate(-28deg); animation: rain 3s linear infinite; }.bolt{ position: absolute; top: 50%; left: 50%; margin: -0.125em 0 0 -0.0625em; color: #bbbbbb; opacity: 0.3; animation: lightning 2s linear infinite; }.bolt:nth-child(2){ width: 0.25em; height: 0.125em; margin: -0.875em 0 0 -0.9375em; transform: translate(2.5em, 1.125em); opacity: 0.2; animation: lightning 1.5s linear infinite; }.bolt:before, .bolt:after{ content: ''; position: absolute; z-index: 2; top: 50%; left: 50%; margin: -0.8125em 0 0 -0.50625em; border-top: 0.625em solid transparent; border-right: 0.375em solid; border-bottom: 0.375em solid; border-left: 0.25em solid transparent; transform: skewX(-10deg); }.bolt:after{ margin: -0.125em 0 0 -0.125em; border-top: 0.375em solid; border-right: 0.25em solid transparent; border-bottom: 0.625em solid transparent; border-left: 0.375em solid; transform: skewX(-10deg); }.bolt:nth-child(2):before{ margin: -0.375em 0 0 -0.25em; border-top: 0.3125em solid transparent; border-right: 0.1875em solid; border-bottom: 0.1875em solid; border-left: 0.125em solid transparent; }.bolt:nth-child(2):after{ margin: -0.0625em 0 0 -0.0625em; border-top: 0.1875em solid; border-right: 0.125em solid transparent; border-bottom: 0.3125em solid transparent; border-left: 0.1875em solid; }.flake:before, .flake:after{ content: '\2744'; position: absolute; top: 50%; left: 50%; margin: -0.51249em 0 0 -0.50625em; color: #bbbbbb; list-height: 0.5em; opacity: 0.2; animation: spin 8s linear infinite reverse; }.flake:after{ margin: 0.0625em 0 0 -0.5em; font-size: 0.75em; opacity: 0.4; animation: spin 14s linear infinite; }.flake:nth-child(2):before{ margin: -0.25em 0 0 0.125em; font-size: 0.625em; opacity: 0.2; animation: spin 10s linear infinite; }.flake:nth-child(2):after{ margin: 0.1875em 0 0 0.0625em; font-size: 1em; opacity: 0.4; animation: spin 16s linear infinite reverse; }/* Animations */ @keyframes spin{ 100%{ transform: rotate(360deg); }}@keyframes cloud{ 0%{ opacity: 0; }50%{ opacity: 0.3; }100%{ opacity: 0; transform: scale(0.5) translate(-200%, -1.5em); }}@keyframes rain{ 0%{ background: #0cf; box-shadow: 0.3125em 0.4375em 0 -0.0625em rgba(255,255,255,0.2), -0.4375em 0.5625em 0 -0.0625em rgba(255,255,255,0.2), -0.6875em -0.0625em 0 #0cf; }25%{ box-shadow: 0.3125em 0.4375em 0 -0.0625em rgba(255,255,255,0.2), -0.4375em 0.5625em 0 -0.0625em #0cf, -0.6875em -0.0625em 0 rgba(255,255,255,0.2); }50%{ background: rgba(255,255,255,0.3); box-shadow: 0.3125em 0.4375em 0 -0.0625em #0cf, -0.4375em 0.5625em 0 -0.0625em rgba(255,255,255,0.2), -0.6875em -0.0625em 0 rgba(255,255,255,0.2); }100%{ box-shadow: 0.3125em 0.4375em 0 -0.0625em rgba(255,255,255,0.2), -0.4375em 0.5625em 0 -0.0625em rgba(255,255,255,0.2), -0.6875em -0.0625em 0 #0cf; }}@keyframes lightning{ 45%{ color: #bbbbbb; background: #bbbbbb; opacity: 0.2; }50%{ color: #0cf; background: #0cf; opacity: 1; }55%{ color: #bbbbbb; background: #bbbbbb; opacity: 0.2; }}