backup
This commit is contained in:
148
www/community/kiosk-mode/kiosk-mode.js
Normal file
148
www/community/kiosk-mode/kiosk-mode.js
Normal file
@@ -0,0 +1,148 @@
|
||||
!function n(o,i,a){function s(t,e){if(!i[t]){if(!o[t]){var r="function"==typeof require&&require;if(!e&&r)return r(t,!0);if(u)return u(t,!0);throw(
|
||||
e=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",e}r=i[t]={exports:{}},o[t][0].call(r.exports,function(e){return s(o[t][1][e]||e)},r
|
||||
,r.exports,n,o,i,a)}return i[t].exports}for(var u="function"==typeof require&&require,e=0;e<a.length;e++)s(a[e]);return s}({1:[function(e,t,r){
|
||||
"use strict";var n=e("@babel/runtime/helpers/interopRequireDefault"),o=n(e("@babel/runtime/regenerator")),i=n(e("@babel/runtime/helpers/slicedToArray"
|
||||
)),a=n(e("@babel/runtime/helpers/toConsumableArray")),s=n(e("@babel/runtime/helpers/asyncToGenerator")),u=n(e("@babel/runtime/helpers/classCallCheck")
|
||||
),l=n(e("@babel/runtime/helpers/createClass"));function f(e,t){var r,n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!n){if(
|
||||
Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return h(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Map"===(
|
||||
r="Object"===r&&e.constructor?e.constructor.name:r)||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?h(e,t
|
||||
):void 0}}(e))||t&&e&&"number"==typeof e.length)return n&&(e=n),r=0,{s:t=function(){},n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}
|
||||
},e:function(e){throw e},f:t};throw new TypeError(
|
||||
"Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,i=!0,
|
||||
a=!1;return{s:function(){n=n.call(e)},n:function(){var e=n.next();return i=e.done,e},e:function(e){a=!0,o=e},f:function(){try{
|
||||
i||null==n.return||n.return()}finally{if(a)throw o}}}}function h(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r]
|
||||
return n}for(var c=function(){function e(){(0,u.default)(this,e),window.kioskModeEntities={},this.queryString("clear_km_cache")&&this.setCache([
|
||||
"kmHeader","kmSidebar","kmOverflow","kmMenuButton"],"false"),this.ha=document.querySelector("home-assistant"),
|
||||
this.main=this.ha.shadowRoot.querySelector("home-assistant-main").shadowRoot,this.user=this.ha.hass.user,this.llAttempts=0,this.run(),
|
||||
this.entityWatch(),new MutationObserver(this.watchDashboards).observe(this.main.querySelector("partial-panel-resolver"),{childList:!0})}var t;return(0
|
||||
,l.default)(e,[{key:"run",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.main.querySelector("ha-panel-lovelace");
|
||||
!this.queryString("disable_km")&&e&&this.getConfig(e)}},{key:"getConfig",value:function(t){var r=this;this.llAttempts++;try{
|
||||
var e=t.lovelace.config.kiosk_mode||{};this.processConfig(t,e)}catch(e){this.llAttempts<200?setTimeout(function(){return r.getConfig(t)},50):(
|
||||
console.log("Lovelace config not found, continuing with default configuration."),console.log(e),this.processConfig(t,{}))}}},{key:"processConfig",
|
||||
value:function(e,t){var r=this,n=this.ha.hass.panelUrl,o=(window.kioskModeEntities[n]||(window.kioskModeEntities[n]=[]),
|
||||
this.hideHeader=this.hideSidebar=this.hideOverflow=this.ignoreEntity=this.ignoreMobile=!1,this.cached(["kmHeader","kmSidebar","kmOverflow",
|
||||
"kmMenuButton"])||this.queryString(["kiosk","hide_sidebar","hide_header","hide_overflow","hide_menubutton"])),o=(o&&(this.hideHeader=this.cached(
|
||||
"kmHeader")||this.queryString(["kiosk","hide_header"]),this.hideSidebar=this.cached("kmSidebar")||this.queryString(["kiosk","hide_sidebar"]),
|
||||
this.hideOverflow=this.cached("kmOverflow")||this.queryString(["kiosk","hide_overflow"]),this.hideMenuButton=this.cached("kmMenuButton"
|
||||
)||this.queryString(["kiosk","hide_menubutton"])),this.hideHeader=o?this.hideHeader:t.kiosk||t.hide_header,
|
||||
this.hideSidebar=o?this.hideSidebar:t.kiosk||t.hide_sidebar,this.hideOverflow=o?this.hideOverflow:t.kiosk||t.hide_overflow,
|
||||
this.hideMenuButton=o?this.hideMenuButton:t.kiosk||t.hide_menubutton,this.user.is_admin?t.admin_settings:t.non_admin_settings);if(o&&this.setOptions(o
|
||||
),t.user_settings){var i,a=f(this.array(t.user_settings));try{for(a.s();!(i=a.n()).done;){var s=i.value;this.array(s.users).some(function(e){
|
||||
return e.toLowerCase()==r.user.name.toLowerCase()})&&this.setOptions(s)}}catch(e){a.e(e)}finally{a.f()}}var o=this.ignoreMobile?null:t.mobile_settings
|
||||
,u=(o&&(u=o.custom_width||812,window.innerWidth<=u&&this.setOptions(o)),this.ignoreEntity?null:t.entity_settings);if(u){var l,h=f(u);try{for(h.s();!(
|
||||
l=h.n()).done;){var c=l.value,d=Object.keys(c.entity)[0];window.kioskModeEntities[n].includes(d)||window.kioskModeEntities[n].push(d),
|
||||
this.ha.hass.states[d].state==c.entity[d]&&("hide_header"in c&&(this.hideHeader=c.hide_header),"hide_sidebar"in c&&(this.hideSidebar=c.hide_sidebar),
|
||||
"hide_overflow"in c&&(this.hideOverflow=c.hide_overflow),"hide_menubutton"in c&&(this.hideMenuButton=c.hide_menubutton),"kiosk"in c&&(
|
||||
this.hideHeader=this.hideSidebar=c.kiosk))}}catch(e){h.e(e)}finally{h.f()}}this.insertStyles(e)}},{key:"insertStyles",value:function(e){
|
||||
var e=e.shadowRoot.querySelector("hui-root").shadowRoot,t=this.main.querySelector("app-drawer-layout"),r=e.querySelector("app-toolbar");
|
||||
this.hideHeader||this.hideOverflow?(this.addStyle("".concat(
|
||||
this.hideHeader?"#view{min-height:100vh !important;--header-height:0;}app-header{display:none;}":"").concat(
|
||||
this.hideOverflow?"ha-button-menu{display:none !important;}":""),e),this.queryString("cache")&&(this.hideHeader&&this.setCache("kmHeader","true"),
|
||||
this.hideOverflow&&this.setCache("kmOverflow","true"))):this.removeStyle(e),this.hideSidebar?(this.addStyle(
|
||||
":host{--app-drawer-width:0 !important;}#drawer{display:none;}",t),this.addStyle("ha-menu-button{display:none !important;}",r),this.queryString(
|
||||
"cache")&&this.setCache("kmSidebar","true")):this.removeStyle([r,t]),this.hideMenuButton?(this.addStyle("ha-menu-button{display:none !important;}",r),
|
||||
this.queryString("cache")&&this.setCache("kmMenuButton","true")):this.removeStyle(r),window.dispatchEvent(new Event("resize")),this.llAttempts=0}},{
|
||||
key:"watchDashboards",value:function(e){e.forEach(function(e){var t,r=f(e.addedNodes);try{for(r.s();!(t=r.n()).done;){var n=t.value;
|
||||
"ha-panel-lovelace"==n.localName&&window.KioskMode.run(n)}}catch(e){r.e(e)}finally{r.f()}})}},{key:"entityWatch",value:(t=(0,s.default)(
|
||||
o.default.mark(function e(){var t=this;return o.default.wrap(function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,window.hassConnection;
|
||||
case 2:e.sent.conn.subscribeMessage(function(e){return t.entityWatchCallback(e)},{type:"subscribe_events",event_type:"state_changed"});case 3:
|
||||
case"end":return e.stop()}},e)})),function(){return t.apply(this,arguments)})},{key:"entityWatchCallback",value:function(e){
|
||||
var t=window.kioskModeEntities[this.ha.hass.panelUrl]||[];!t.length||"state_changed"!=e.event_type||!t.includes(e.data.entity_id
|
||||
)||e.data.old_state&&e.data.new_state.state==e.data.old_state.state||this.run()}},{key:"setOptions",value:function(e){
|
||||
this.hideHeader=e.kiosk||e.hide_header,this.hideSidebar=e.kiosk||e.hide_sidebar,this.hideOverflow=e.kiosk||e.hide_overflow,
|
||||
this.hideMenuButton=e.kiosk||e.hide_menubutton,this.ignoreEntity=e.ignore_entity_settings,this.ignoreMobile=e.ignore_mobile_settings}},{key:"array",
|
||||
value:function(e){return Array.isArray(e)?e:[e]}},{key:"queryString",value:function(e){return this.array(e).some(function(e){
|
||||
return window.location.search.includes(e)})}},{key:"setCache",value:function(e,t){this.array(e).forEach(function(e){
|
||||
return window.localStorage.setItem(e,t)})}},{key:"cached",value:function(e){return this.array(e).some(function(e){
|
||||
return"true"==window.localStorage.getItem(e)})}},{key:"styleExists",value:function(e){return e.querySelector("#kiosk_mode_".concat(e.localName))}},{
|
||||
key:"addStyle",value:function(e,t){var r;this.styleExists(t)||((r=document.createElement("style")).setAttribute("id","kiosk_mode_".concat(t.localName)
|
||||
),r.innerHTML=e,t.appendChild(r))}},{key:"removeStyle",value:function(e){var t=this;this.array(e).forEach(function(e){t.styleExists(e
|
||||
)&&e.querySelector("#kiosk_mode_".concat(e.localName)).remove()})}}]),e}(),d={header:"%c≡ kiosk-mode".padEnd(27),ver:"%cversion 1.7.3 "},
|
||||
p=Math.max.apply(Math,(0,a.default)(Object.values(d).map(function(e){return e.length}))),y=0,m=Object.entries(d);y<m.length;y++){var v=(0,i.default)(
|
||||
m[y],1)[0];d[v].length<=p&&(d[v]=d[v].padEnd(p)),"header"==v&&(d[v]="".concat(d[v].slice(0,-1),"⋮ "))}
|
||||
n="display:inline-block;border-width:1px 1px 0 1px;border-style:solid;border-color:#424242;color:white;background:#03a9f4;font-size:12px;padding:4px 4.5px 5px 6px;"
|
||||
console.info(d.header+"%c\n"+d.ver,n,"","".concat(n," ").concat(
|
||||
"border-width:0px 1px 1px 1px;padding:7px;background:white;color:#424242;line-height:0.7;")),Promise.resolve(customElements.whenDefined("hui-view")
|
||||
).then(function(){window.KioskMode=new c})},{"@babel/runtime/helpers/asyncToGenerator":5,"@babel/runtime/helpers/classCallCheck":6,
|
||||
"@babel/runtime/helpers/createClass":7,"@babel/runtime/helpers/interopRequireDefault":8,"@babel/runtime/helpers/slicedToArray":14,
|
||||
"@babel/runtime/helpers/toConsumableArray":15,"@babel/runtime/regenerator":18}],2:[function(e,t,r){t.exports=function(e,t){(null==t||t>e.length)&&(
|
||||
t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n},t.exports.__esModule=!0,t.exports.default=t.exports},{}],3:[function(e,t,r){
|
||||
t.exports=function(e){if(Array.isArray(e))return e},t.exports.__esModule=!0,t.exports.default=t.exports},{}],4:[function(e,t,r){var n=e(
|
||||
"./arrayLikeToArray.js");t.exports=function(e){if(Array.isArray(e))return n(e)},t.exports.__esModule=!0,t.exports.default=t.exports},{
|
||||
"./arrayLikeToArray.js":2}],5:[function(e,t,r){function u(e,t,r,n,o,i,a){try{var s=e[i](a),u=s.value}catch(e){return void r(e)}s.done?t(u
|
||||
):Promise.resolve(u).then(n,o)}t.exports=function(s){return function(){var e=this,a=arguments;return new Promise(function(t,r){var n=s.apply(e,a);
|
||||
function o(e){u(n,t,r,o,i,"next",e)}function i(e){u(n,t,r,o,i,"throw",e)}o(void 0)})}},t.exports.__esModule=!0,t.exports.default=t.exports},{}],6:[
|
||||
function(e,t,r){t.exports=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},t.exports.__esModule=!0,
|
||||
t.exports.default=t.exports},{}],7:[function(e,t,r){function n(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,
|
||||
n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}t.exports=function(e,t,r){return t&&n(e.prototype,t),r&&n(e,r),
|
||||
Object.defineProperty(e,"prototype",{writable:!1}),e},t.exports.__esModule=!0,t.exports.default=t.exports},{}],8:[function(e,t,r){t.exports=function(e
|
||||
){return e&&e.__esModule?e:{default:e}},t.exports.__esModule=!0,t.exports.default=t.exports},{}],9:[function(e,t,r){t.exports=function(e){if(
|
||||
"undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)},t.exports.__esModule=!0,t.exports.default=t.exports}
|
||||
,{}],10:[function(e,t,r){t.exports=function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,
|
||||
o,i=[],a=!0,s=!1;try{for(r=r.call(e);!(a=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);a=!0);}catch(e){s=!0,o=e}finally{try{
|
||||
a||null==r.return||r.return()}finally{if(s)throw o}}return i}},t.exports.__esModule=!0,t.exports.default=t.exports},{}],11:[function(e,t,r){
|
||||
t.exports=function(){throw new TypeError(
|
||||
"Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")},
|
||||
t.exports.__esModule=!0,t.exports.default=t.exports},{}],12:[function(e,t,r){t.exports=function(){throw new TypeError(
|
||||
"Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")},
|
||||
t.exports.__esModule=!0,t.exports.default=t.exports},{}],13:[function(e,k,t){var S=e("./typeof.js").default;function r(){"use strict";
|
||||
k.exports=function(){return a},k.exports.__esModule=!0,k.exports.default=k.exports;var a={},e=Object.prototype,u=e.hasOwnProperty,
|
||||
t="function"==typeof Symbol?Symbol:{},n=t.iterator||"@@iterator",r=t.asyncIterator||"@@asyncIterator",o=t.toStringTag||"@@toStringTag";function i(e,t,
|
||||
r){return Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{i({},"")}catch(e){i=function(e,t,r){return e[t]=r}}
|
||||
function s(e,t,r,n){var o,i,a,s,t=t&&t.prototype instanceof c?t:c,t=Object.create(t.prototype),n=new w(n||[]);return t._invoke=(o=e,i=r,a=n,
|
||||
s="suspendedStart",function(e,t){if("executing"===s)throw new Error("Generator is already running");if("completed"===s){if("throw"===e)throw t;
|
||||
return _()}for(a.method=e,a.arg=t;;){var r=a.delegate;if(r){r=function e(t,r){var n=t.iterator[r.method];if(void 0===n){if(r.delegate=null,
|
||||
"throw"===r.method){if(t.iterator.return&&(r.method="return",r.arg=void 0,e(t,r),"throw"===r.method))return h;r.method="throw",r.arg=new TypeError(
|
||||
"The iterator does not provide a 'throw' method")}return h}n=l(n,t.iterator,r.arg);if("throw"===n.type)return r.method="throw",r.arg=n.arg,
|
||||
r.delegate=null,h;n=n.arg;return n?n.done?(r[t.resultName]=n.value,r.next=t.nextLoc,"return"!==r.method&&(r.method="next",r.arg=void 0),
|
||||
r.delegate=null,h):n:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,h)}(r,a);if(r){if(r===h)continue;
|
||||
return r}}if("next"===a.method)a.sent=a._sent=a.arg;else if("throw"===a.method){if("suspendedStart"===s)throw s="completed",a.arg;a.dispatchException(
|
||||
a.arg)}else"return"===a.method&&a.abrupt("return",a.arg);s="executing";r=l(o,i,a);if("normal"===r.type){if(s=a.done?"completed":"suspendedYield",
|
||||
r.arg===h)continue;return{value:r.arg,done:a.done}}"throw"===r.type&&(s="completed",a.method="throw",a.arg=r.arg)}}),t}function l(e,t,r){try{return{
|
||||
type:"normal",arg:e.call(t,r)}}catch(e){return{type:"throw",arg:e}}}a.wrap=s;var h={};function c(){}function d(){}function f(){}var t={},p=(i(t,n,
|
||||
function(){return this}),Object.getPrototypeOf),p=p&&p(p(x([]))),y=(p&&p!==e&&u.call(p,n)&&(t=p),f.prototype=c.prototype=Object.create(t));function m(
|
||||
e){["next","throw","return"].forEach(function(t){i(e,t,function(e){return this._invoke(t,e)})})}function v(a,s){var t;this._invoke=function(r,n){
|
||||
function e(){return new s(function(e,t){!function t(e,r,n,o){var i,e=l(a[e],a,r);if("throw"!==e.type)return(r=(i=e.arg).value)&&"object"==S(r
|
||||
)&&u.call(r,"__await")?s.resolve(r.__await).then(function(e){t("next",e,n,o)},function(e){t("throw",e,n,o)}):s.resolve(r).then(function(e){i.value=e,
|
||||
n(i)},function(e){return t("throw",e,n,o)});o(e.arg)}(r,n,e,t)})}return t=t?t.then(e,e):e()}}function b(e){var t={tryLoc:e[0]};1 in e&&(
|
||||
t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function g(e){var t=e.completion||{};t.type="normal",delete t.arg
|
||||
,e.completion=t}function w(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(b,this),this.reset(!0)}function x(t){if(t){var r,e=t[n];if(e)return e.call(t
|
||||
);if("function"==typeof t.next)return t;if(!isNaN(t.length))return r=-1,(e=function e(){for(;++r<t.length;)if(u.call(t,r))return e.value=t[r],
|
||||
e.done=!1,e;return e.value=void 0,e.done=!0,e}).next=e}return{next:_}}function _(){return{value:void 0,done:!0}}return i(y,"constructor",d.prototype=f
|
||||
),i(f,"constructor",d),d.displayName=i(f,o,"GeneratorFunction"),a.isGeneratorFunction=function(e){e="function"==typeof e&&e.constructor;return!!e&&(
|
||||
e===d||"GeneratorFunction"===(e.displayName||e.name))},a.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,f):(e.__proto__=f,i(e,o
|
||||
,"GeneratorFunction")),e.prototype=Object.create(y),e},a.awrap=function(e){return{__await:e}},m(v.prototype),i(v.prototype,r,function(){return this}),
|
||||
a.AsyncIterator=v,a.async=function(e,t,r,n,o){void 0===o&&(o=Promise);var i=new v(s(e,t,r,n),o);return a.isGeneratorFunction(t)?i:i.next().then(
|
||||
function(e){return e.done?e.value:i.next()})},m(y),i(y,o,"Generator"),i(y,n,function(){return this}),i(y,"toString",function(){
|
||||
return"[object Generator]"}),a.keys=function(r){var e,n=[];for(e in r)n.push(e);return n.reverse(),function e(){for(;n.length;){var t=n.pop();if(
|
||||
t in r)return e.value=t,e.done=!1,e}return e.done=!0,e}},a.values=x,w.prototype={constructor:w,reset:function(e){if(this.prev=0,this.next=0,
|
||||
this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(g),!e)for(var t in this
|
||||
)"t"===t.charAt(0)&&u.call(this,t)&&!isNaN(+t.slice(1))&&(this[t]=void 0)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if(
|
||||
"throw"===e.type)throw e.arg;return this.rval},dispatchException:function(r){if(this.done)throw r;var n=this;function e(e,t){return i.type="throw",
|
||||
i.arg=r,n.next=e,t&&(n.method="next",n.arg=void 0),!!t}for(var t=this.tryEntries.length-1;0<=t;--t){var o=this.tryEntries[t],i=o.completion;if(
|
||||
"root"===o.tryLoc)return e("end");if(o.tryLoc<=this.prev){var a=u.call(o,"catchLoc"),s=u.call(o,"finallyLoc");if(a&&s){if(this.prev<o.catchLoc
|
||||
)return e(o.catchLoc,!0);if(this.prev<o.finallyLoc)return e(o.finallyLoc)}else if(a){if(this.prev<o.catchLoc)return e(o.catchLoc,!0)}else{if(!s
|
||||
)throw new Error("try statement without catch or finally");if(this.prev<o.finallyLoc)return e(o.finallyLoc)}}}},abrupt:function(e,t){for(
|
||||
var r=this.tryEntries.length-1;0<=r;--r){var n=this.tryEntries[r];if(n.tryLoc<=this.prev&&u.call(n,"finallyLoc")&&this.prev<n.finallyLoc){var o=n;
|
||||
break}}var i=(o=o&&("break"===e||"continue"===e)&&o.tryLoc<=t&&t<=o.finallyLoc?null:o)?o.completion:{};return i.type=e,i.arg=t,o?(this.method="next",
|
||||
this.next=o.finallyLoc,h):this.complete(i)},complete:function(e,t){if("throw"===e.type)throw e.arg;
|
||||
return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"
|
||||
):"normal"===e.type&&t&&(this.next=t),h},finish:function(e){for(var t=this.tryEntries.length-1;0<=t;--t){var r=this.tryEntries[t];if(r.finallyLoc===e
|
||||
)return this.complete(r.completion,r.afterLoc),g(r),h}},catch:function(e){for(var t=this.tryEntries.length-1;0<=t;--t){var r,n,o=this.tryEntries[t];
|
||||
if(o.tryLoc===e)return"throw"===(r=o.completion).type&&(n=r.arg,g(o)),n}throw new Error("illegal catch attempt")},delegateYield:function(e,t,r){
|
||||
return this.delegate={iterator:x(e),resultName:t,nextLoc:r},"next"===this.method&&(this.arg=void 0),h}},a}k.exports=r,k.exports.__esModule=!0,
|
||||
k.exports.default=k.exports},{"./typeof.js":16}],14:[function(e,t,r){var n=e("./arrayWithHoles.js"),o=e("./iterableToArrayLimit.js"),i=e(
|
||||
"./unsupportedIterableToArray.js"),a=e("./nonIterableRest.js");t.exports=function(e,t){return n(e)||o(e,t)||i(e,t)||a()},t.exports.__esModule=!0,
|
||||
t.exports.default=t.exports},{"./arrayWithHoles.js":3,"./iterableToArrayLimit.js":10,"./nonIterableRest.js":11,"./unsupportedIterableToArray.js":17}],
|
||||
15:[function(e,t,r){var n=e("./arrayWithoutHoles.js"),o=e("./iterableToArray.js"),i=e("./unsupportedIterableToArray.js"),a=e("./nonIterableSpread.js")
|
||||
t.exports=function(e){return n(e)||o(e)||i(e)||a()},t.exports.__esModule=!0,t.exports.default=t.exports},{"./arrayWithoutHoles.js":4,
|
||||
"./iterableToArray.js":9,"./nonIterableSpread.js":12,"./unsupportedIterableToArray.js":17}],16:[function(e,t,r){function n(e){
|
||||
return t.exports=n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){
|
||||
return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},t.exports.__esModule=!0,
|
||||
t.exports.default=t.exports,n(e)}t.exports=n,t.exports.__esModule=!0,t.exports.default=t.exports},{}],17:[function(e,t,r){var n=e(
|
||||
"./arrayLikeToArray.js");t.exports=function(e,t){if(e){if("string"==typeof e)return n(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);
|
||||
return"Map"===(r="Object"===r&&e.constructor?e.constructor.name:r)||"Set"===r?Array.from(e
|
||||
):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?n(e,t):void 0}},t.exports.__esModule=!0,t.exports.default=t.exports},{
|
||||
"./arrayLikeToArray.js":2}],18:[function(t,e,r){t=t("../helpers/regeneratorRuntime")();e.exports=t;try{regeneratorRuntime=t}catch(e){
|
||||
"object"==typeof globalThis?globalThis.regeneratorRuntime=t:Function("r","regeneratorRuntime = r")(t)}},{"../helpers/regeneratorRuntime":13}]},{},[1]
|
||||
);
|
||||
BIN
www/community/kiosk-mode/kiosk-mode.js.gz
Normal file
BIN
www/community/kiosk-mode/kiosk-mode.js.gz
Normal file
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
24
www/community/lovelace-slider-entity-row/rollup.config.js
Normal file
24
www/community/lovelace-slider-entity-row/rollup.config.js
Normal file
@@ -0,0 +1,24 @@
|
||||
import nodeResolve from "@rollup/plugin-node-resolve";
|
||||
import json from "@rollup/plugin-json";
|
||||
import typescript from "rollup-plugin-typescript2";
|
||||
import { terser } from "rollup-plugin-terser";
|
||||
import babel from "@rollup/plugin-babel";
|
||||
|
||||
const dev = process.env.ROLLUP_WATCH;
|
||||
|
||||
export default {
|
||||
input: "src/main.ts",
|
||||
output: {
|
||||
file: "slider-entity-row.js",
|
||||
format: "es",
|
||||
},
|
||||
plugins: [
|
||||
nodeResolve(),
|
||||
json(),
|
||||
typescript(),
|
||||
babel({
|
||||
exclude: "node_modules/**",
|
||||
}),
|
||||
!dev && terser({ format: { comments: false } }),
|
||||
],
|
||||
};
|
||||
BIN
www/community/lovelace-slider-entity-row/rollup.config.js.gz
Normal file
BIN
www/community/lovelace-slider-entity-row/rollup.config.js.gz
Normal file
Binary file not shown.
File diff suppressed because one or more lines are too long
BIN
www/community/lovelace-slider-entity-row/slider-entity-row.js.gz
Normal file
BIN
www/community/lovelace-slider-entity-row/slider-entity-row.js.gz
Normal file
Binary file not shown.
158
www/community/lovelace-thermostat-card/main.js
Normal file
158
www/community/lovelace-thermostat-card/main.js
Normal file
@@ -0,0 +1,158 @@
|
||||
import {cssData} from './styles.js?v=1.3.0';
|
||||
import ThermostatUI from './thermostat_card.lib.js?v=1.3.0';
|
||||
console.info("%c Thermostat Card \n%c Version 1.3.0 ", "color: orange; font-weight: bold; background: black", "color: white; font-weight: bold; background: dimgray");
|
||||
class ThermostatCard extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
}
|
||||
set hass(hass) {
|
||||
const config = this._config;
|
||||
const entity = hass.states[config.entity];
|
||||
if(!entity)return;
|
||||
let ambient_temperature = entity.attributes.current_temperature || 0;
|
||||
if (config.ambient_temperature && hass.states[config.ambient_temperature])
|
||||
ambient_temperature = hass.states[config.ambient_temperature].state;
|
||||
let hvac_state = entity.state;
|
||||
|
||||
const new_state = {
|
||||
entity: entity,
|
||||
min_value: entity.attributes.min_temp,
|
||||
max_value: entity.attributes.max_temp,
|
||||
ambient_temperature: ambient_temperature,
|
||||
target_temperature: entity.attributes.temperature,
|
||||
target_temperature_low: entity.attributes.target_temp_low,
|
||||
target_temperature_high: entity.attributes.target_temp_high,
|
||||
hvac_state: entity.state,
|
||||
hvac_modes:entity.attributes.hvac_modes,
|
||||
preset_mode: entity.attributes.preset_mode,
|
||||
away: (entity.attributes.away_mode == 'on' ? true : false)
|
||||
}
|
||||
|
||||
if (!this._saved_state ||
|
||||
(this._saved_state.min_value != new_state.min_value ||
|
||||
this._saved_state.max_value != new_state.max_value ||
|
||||
this._saved_state.ambient_temperature != new_state.ambient_temperature ||
|
||||
this._saved_state.target_temperature != new_state.target_temperature ||
|
||||
this._saved_state.target_temperature_low != new_state.target_temperature_low ||
|
||||
this._saved_state.target_temperature_high != new_state.target_temperature_high ||
|
||||
this._saved_state.hvac_state != new_state.hvac_state ||
|
||||
this._saved_state.preset_mode != new_state.preset_mode ||
|
||||
this._saved_state.away != new_state.away)) {
|
||||
this._saved_state = new_state;
|
||||
this.thermostat.updateState(new_state,hass);
|
||||
}
|
||||
this._hass = hass;
|
||||
}
|
||||
|
||||
openProp(entityId) {
|
||||
this.fire('hass-more-info', { entityId });
|
||||
}
|
||||
fire(type, detail, options) {
|
||||
|
||||
options = options || {}
|
||||
detail = detail === null || detail === undefined ? {} : detail
|
||||
const e = new Event(type, {
|
||||
bubbles: options.bubbles === undefined ? true : options.bubbles,
|
||||
cancelable: Boolean(options.cancelable),
|
||||
composed: options.composed === undefined ? true : options.composed,
|
||||
})
|
||||
|
||||
e.detail = detail
|
||||
this.dispatchEvent(e)
|
||||
return e
|
||||
}
|
||||
|
||||
_controlSetPoints() {
|
||||
|
||||
if (this.thermostat.dual) {
|
||||
if (this.thermostat.temperature.high != this._saved_state.target_temperature_high ||
|
||||
this.thermostat.temperature.low != this._saved_state.target_temperature_low)
|
||||
this._hass.callService('climate', 'set_temperature', {
|
||||
entity_id: this._config.entity,
|
||||
target_temp_high: this.thermostat.temperature.high,
|
||||
target_temp_low: this.thermostat.temperature.low,
|
||||
});
|
||||
} else {
|
||||
if (this.thermostat.temperature.target != this._saved_state.target_temperature)
|
||||
this._hass.callService('climate', 'set_temperature', {
|
||||
entity_id: this._config.entity,
|
||||
temperature: this.thermostat.temperature.target,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setConfig(config) {
|
||||
// Check config
|
||||
if (!config.entity && config.entity.split(".")[0] === 'climate') {
|
||||
throw new Error('Please define an entity');
|
||||
}
|
||||
|
||||
// Cleanup DOM
|
||||
const root = this.shadowRoot;
|
||||
|
||||
if (root.lastChild) root.removeChild(root.lastChild);
|
||||
|
||||
// Prepare config defaults
|
||||
const cardConfig = deepClone(config);
|
||||
// cardConfig.hvac = Object.assign({}, config.hvac);
|
||||
|
||||
if (!cardConfig.diameter) cardConfig.diameter = 400;
|
||||
if (!cardConfig.pending) cardConfig.pending = 3;
|
||||
if (!cardConfig.idle_zone) cardConfig.idle_zone = 2;
|
||||
if (!cardConfig.step) cardConfig.step = 0.5;
|
||||
if (!cardConfig.highlight_tap) cardConfig.highlight_tap = false;
|
||||
if (!cardConfig.no_card) cardConfig.no_card = false;
|
||||
if (!cardConfig.chevron_size) cardConfig.chevron_size = 50;
|
||||
if (!cardConfig.num_ticks) cardConfig.num_ticks = 150;
|
||||
if (!cardConfig.tick_degrees) cardConfig.tick_degrees = 300;
|
||||
|
||||
// Extra config values generated for simplicity of updates
|
||||
cardConfig.radius = cardConfig.diameter / 2;
|
||||
cardConfig.ticks_outer_radius = cardConfig.diameter / 30;
|
||||
cardConfig.ticks_inner_radius = cardConfig.diameter / 8;
|
||||
cardConfig.offset_degrees = 180 - (360 - cardConfig.tick_degrees) / 2;
|
||||
cardConfig.control = this._controlSetPoints.bind(this);
|
||||
cardConfig.propWin = this.openProp.bind(this);
|
||||
this.thermostat = new ThermostatUI(cardConfig);
|
||||
|
||||
if (cardConfig.no_card === true) {
|
||||
|
||||
const card = document.createElement('ha-card');
|
||||
card.className = "no_card";
|
||||
const style = document.createElement('style');
|
||||
style.textContent = cssData();
|
||||
card.appendChild(style);
|
||||
card.appendChild(this.thermostat.container);
|
||||
root.appendChild(card);
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
const card = document.createElement('ha-card');
|
||||
const style = document.createElement('style');
|
||||
style.textContent = cssData();
|
||||
card.appendChild(style);
|
||||
card.appendChild(this.thermostat.container);
|
||||
root.appendChild(card);
|
||||
}
|
||||
this._config = cardConfig;
|
||||
}
|
||||
}
|
||||
customElements.define('thermostat-card', ThermostatCard);
|
||||
|
||||
function deepClone(value) {
|
||||
if (!(!!value && typeof value == 'object')) {
|
||||
return value;
|
||||
}
|
||||
if (Object.prototype.toString.call(value) == '[object Date]') {
|
||||
return new Date(value.getTime());
|
||||
}
|
||||
if (Array.isArray(value)) {
|
||||
return value.map(deepClone);
|
||||
}
|
||||
var result = {};
|
||||
Object.keys(value).forEach(
|
||||
function(key) { result[key] = deepClone(value[key]); });
|
||||
return result;
|
||||
}
|
||||
BIN
www/community/lovelace-thermostat-card/main.js.gz
Normal file
BIN
www/community/lovelace-thermostat-card/main.js.gz
Normal file
Binary file not shown.
303
www/community/lovelace-thermostat-card/styles.js
Normal file
303
www/community/lovelace-thermostat-card/styles.js
Normal file
@@ -0,0 +1,303 @@
|
||||
export function cssData(user) {
|
||||
var css =`
|
||||
|
||||
ha-card {
|
||||
overflow: hidden;
|
||||
--rail_border_color: transparent;
|
||||
--auto_color: rgb(227, 99, 4, 1);
|
||||
--cool_color: rgba(0, 122, 241, 0.6);
|
||||
--cool_colorc: rgba(0, 122, 241, 1);
|
||||
--heat_color: #ff8100;
|
||||
--heat_colorc: rgb(227, 99, 4, 1);
|
||||
--manual_color: #44739e;
|
||||
--off_color: #8a8a8a;
|
||||
--fan_only_color: #D7DBDD;
|
||||
--dry_color: #efbd07;
|
||||
--idle_color: #808080;
|
||||
--unknown_color: #bac;
|
||||
--text-color: white;
|
||||
}
|
||||
ha-card.no_card{
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
ha-card.no_card .prop{
|
||||
display: none;
|
||||
}
|
||||
.auto, .heat_cool {
|
||||
--mode_color: var(--auto_color);
|
||||
}
|
||||
|
||||
.cool {
|
||||
--mode_color: var(--cool_color);
|
||||
}
|
||||
|
||||
.heat {
|
||||
--mode_color: var(--heat_color);
|
||||
}
|
||||
|
||||
.manual {
|
||||
--mode_color: var(--manual_color);
|
||||
}
|
||||
|
||||
.off {
|
||||
--mode_color: var(--off_color);
|
||||
}
|
||||
.more {
|
||||
--mode_color: var(--off_color);
|
||||
}
|
||||
.fan_only {
|
||||
--mode_color: var(--fan_only_color);
|
||||
}
|
||||
|
||||
.eco {
|
||||
--mode_color: var(--auto_color);
|
||||
}
|
||||
|
||||
.dry {
|
||||
--mode_color: var(--dry_color);
|
||||
}
|
||||
|
||||
.idle {
|
||||
--mode_color: var(--idle_color);
|
||||
}
|
||||
|
||||
.unknown-mode {
|
||||
--mode_color: var(--unknown_color);
|
||||
}
|
||||
.c_body {
|
||||
padding: 5% 5% 5% 5%;
|
||||
}
|
||||
.c_icon{
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 25;
|
||||
}
|
||||
.climate_info {
|
||||
position: absolute;
|
||||
top: 82%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 14%;
|
||||
height: 14%;
|
||||
--background-color: white;
|
||||
}
|
||||
.modes, .mode_color{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.modes ha-icon {
|
||||
color: var(--mode_color);
|
||||
--mdc-icon-size: 100%;
|
||||
}
|
||||
.dialog{
|
||||
background-color:#0000008c;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
margin: 5%;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
top: 45%;
|
||||
left: 45%;
|
||||
backdrop-filter: blur(6px) grayscale(50%);
|
||||
box-shadow: 0px 0px 10px 0px #696969;
|
||||
border: 1px solid #ffffff;
|
||||
}
|
||||
.dialog span {
|
||||
width:33%;
|
||||
margin: 3% 0;
|
||||
}
|
||||
.dialog ha-icon {
|
||||
color: var(--mode_color);
|
||||
--mdc-icon-size: 70%;
|
||||
margin: 15%;
|
||||
}
|
||||
.dialog.hide{
|
||||
display: none;
|
||||
}
|
||||
.dialog.pending{
|
||||
border: 1px solid var(--mode_color);
|
||||
box-shadow: 0px 0px 10px 0px var(--mode_color);
|
||||
animation: dialog-pending .8s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes dialog-pending
|
||||
{
|
||||
from {box-shadow: 0px 0px 10px 0px var(--mode_color);}
|
||||
to {box-shadow: 0px 0px 0px 0px var(--mode_color);}
|
||||
}
|
||||
|
||||
.dot_r{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
opacity: 0.1;
|
||||
}
|
||||
.dot_h{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.dial {
|
||||
user-select: none;
|
||||
|
||||
--thermostat-off-fill: #000000c2;
|
||||
--thermostat-path-color: rgba(255, 255, 255, 0.3);
|
||||
--thermostat-path-active-color: rgba(255, 255, 255, 0.8);
|
||||
--thermostat-path-active-color-large: rgba(255, 255, 255, 1);
|
||||
--thermostat-text-color: white;
|
||||
}
|
||||
|
||||
.dial.has-thermo .dial__ico__leaf {
|
||||
visibility: hidden;
|
||||
}
|
||||
.dial .dial__shape {
|
||||
transition: fill 0.5s;
|
||||
fill: var(--thermostat-off-fill);
|
||||
}
|
||||
|
||||
.dial__ico__thermo {
|
||||
fill: var(--thermostat-path-active-color);
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s;
|
||||
pointer-events: none;
|
||||
}
|
||||
.dial.has-thermo .dial__ico__thermo {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
pointer-events: initial;
|
||||
}
|
||||
.dial__editableIndicator {
|
||||
fill: white;
|
||||
fill-rule: evenodd;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
.dial__temperatureControl {
|
||||
fill: white;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.dial__temperatureControl.control-visible {
|
||||
opacity: 0.2;
|
||||
}
|
||||
.dial--edit .dial__editableIndicator {
|
||||
opacity: 1;
|
||||
}
|
||||
.dial--state--off .dial__shape {
|
||||
fill: var(--thermostat-off-fill);
|
||||
}
|
||||
.dial--state--heat .dial__shape {
|
||||
fill: var(--heat_colorc);
|
||||
}
|
||||
.dial--state--cool .dial__shape {
|
||||
fill: var(--cool_colorc);
|
||||
}
|
||||
.dial--state--auto .dial__shape {
|
||||
fill: var(--auto_color);
|
||||
}
|
||||
.dial--state--fan_only .dial__shape {
|
||||
fill: var(--fan_only_color);
|
||||
}
|
||||
.dial--state--dry .dial__shape {
|
||||
fill: var(--dry_color);
|
||||
}
|
||||
.dial--state--idle .dial__shape {
|
||||
fill: var(--idle_color);
|
||||
}
|
||||
.dial__ticks path {
|
||||
fill: var(--thermostat-path-color);
|
||||
}
|
||||
.dial__ticks path.active {
|
||||
fill: var(--mode_color);
|
||||
}
|
||||
.dial__ticks path.active.large {
|
||||
fill: var(--mode_color);
|
||||
}
|
||||
.dial text, .dial text tspan {
|
||||
fill: var(--thermostat-text-color);
|
||||
text-anchor: middle;
|
||||
font-family: Helvetica, sans-serif;
|
||||
alignment-baseline: central;
|
||||
dominant-baseline: central;
|
||||
}
|
||||
.dial__lbl--target {
|
||||
font-size: 120px;
|
||||
font-weight: bold;
|
||||
visibility: hidden;
|
||||
}
|
||||
.dial__lbl--low, .dial__lbl--high {
|
||||
font-size: 90px;
|
||||
font-weight: bold;
|
||||
visibility: hidden;
|
||||
}
|
||||
.dial.in_control .dial__lbl--target {
|
||||
visibility: visible;
|
||||
}
|
||||
.dial.in_control .dial__lbl--low {
|
||||
visibility: visible;
|
||||
}
|
||||
.dial.in_control .dial__lbl--high {
|
||||
visibility: visible;
|
||||
}
|
||||
.dial__lbl--ambient {
|
||||
font-size: 120px;
|
||||
font-weight: bold;
|
||||
visibility: visible;
|
||||
}
|
||||
.dial.in_control.has_dual .dial__chevron--low,
|
||||
.dial.in_control.has_dual .dial__chevron--high {
|
||||
visibility: visible;
|
||||
}
|
||||
.dial.in_control .dial__chevron--target {
|
||||
visibility: visible;
|
||||
}
|
||||
.dial.in_control.has_dual .dial__chevron--target {
|
||||
visibility: hidden;
|
||||
}
|
||||
.dial .dial__chevron {
|
||||
visibility: hidden;
|
||||
fill: none;
|
||||
stroke: var(--thermostat-text-color);
|
||||
stroke-width: 4px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.dial .dial__chevron.pressed {
|
||||
opacity: 1;
|
||||
}
|
||||
.dial.in_control .dial__lbl--ambient {
|
||||
visibility: hidden;
|
||||
}
|
||||
.dial__lbl--super--ambient, .dial__lbl--super--target {
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.dial__lbl--super--high, .dial__lbl--super--low {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.dial__lbl--ring {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.dial__lbl--title {
|
||||
font-size: 24px;
|
||||
}
|
||||
`
|
||||
return css;
|
||||
}
|
||||
|
||||
BIN
www/community/lovelace-thermostat-card/styles.js.gz
Normal file
BIN
www/community/lovelace-thermostat-card/styles.js.gz
Normal file
Binary file not shown.
659
www/community/lovelace-thermostat-card/thermostat_card.lib.js
Normal file
659
www/community/lovelace-thermostat-card/thermostat_card.lib.js
Normal file
@@ -0,0 +1,659 @@
|
||||
export default class ThermostatUI {
|
||||
get container() {
|
||||
return this._container
|
||||
}
|
||||
set dual(val) {
|
||||
this._dual = val
|
||||
}
|
||||
get dual() {
|
||||
return this._dual;
|
||||
}
|
||||
get in_control() {
|
||||
return this._in_control;
|
||||
}
|
||||
get temperature() {
|
||||
return {
|
||||
low: this._low,
|
||||
high: this._high,
|
||||
target: this._target,
|
||||
}
|
||||
}
|
||||
get ambient() {
|
||||
return this._ambient;
|
||||
}
|
||||
set temperature(val) {
|
||||
this._ambient = val.ambient;
|
||||
this._low = val.low;
|
||||
this._high = val.high;
|
||||
this._target = val.target;
|
||||
if (this._low && this._high) this.dual = true;
|
||||
}
|
||||
constructor(config) {
|
||||
|
||||
this._config = config; // need certain options for updates
|
||||
this._ticks = []; // need for dynamic tick updates
|
||||
this._controls = []; // need for managing highlight and clicks
|
||||
this._dual = false; // by default is single temperature
|
||||
this._container = document.createElement('div');
|
||||
this._main_icon = document.createElement('div');
|
||||
this._modes_dialog = document.createElement('div');
|
||||
config.title = config.title === null || config.title === undefined ? 'Title' : config.title
|
||||
|
||||
this._ic = document.createElement('div');
|
||||
this._ic.className = "prop";
|
||||
this._ic.innerHTML = `<ha-icon-button id="more" icon="mdi:dots-vertical" class="c_icon" role="button" tabindex="0" aria-disabled="false"></ha-icon-button>`;
|
||||
this._container.appendChild(this._ic)
|
||||
|
||||
// this._container.appendChild(this._buildTitle(config.title));
|
||||
this._ic.addEventListener('click', () => this.openProp());
|
||||
this._container.appendChild(this._load_icon('',''));
|
||||
this.c_body = document.createElement('div');
|
||||
this.c_body.className = 'c_body';
|
||||
const root = this._buildCore(config.diameter);
|
||||
root.appendChild(this._buildDial(config.radius));
|
||||
root.appendChild(this._buildTicks(config.num_ticks));
|
||||
root.appendChild(this._buildRing(config.radius));
|
||||
root.appendChild(this._buildThermoIcon(config.radius));
|
||||
root.appendChild(this._buildDialSlot(1));
|
||||
root.appendChild(this._buildDialSlot(2));
|
||||
root.appendChild(this._buildDialSlot(3));
|
||||
|
||||
root.appendChild(this._buildText(config.radius, 'title', 0));
|
||||
root.appendChild(this._buildText(config.radius, 'ambient', 0));
|
||||
root.appendChild(this._buildText(config.radius, 'target', 0));
|
||||
root.appendChild(this._buildText(config.radius, 'low', -config.radius / 2.5));
|
||||
root.appendChild(this._buildText(config.radius, 'high', config.radius / 3));
|
||||
root.appendChild(this._buildChevrons(config.radius, 0, 'low', 0.7, -config.radius / 2.5));
|
||||
root.appendChild(this._buildChevrons(config.radius, 0, 'high', 0.7, config.radius / 3));
|
||||
root.appendChild(this._buildChevrons(config.radius, 0, 'target', 1, 0));
|
||||
root.appendChild(this._buildChevrons(config.radius, 180, 'low', 0.7, -config.radius / 2.5));
|
||||
root.appendChild(this._buildChevrons(config.radius, 180, 'high', 0.7, config.radius / 3));
|
||||
root.appendChild(this._buildChevrons(config.radius, 180, 'target', 1, 0));
|
||||
|
||||
|
||||
this.c_body.appendChild(root);
|
||||
this._container.appendChild(this.c_body);
|
||||
this._root = root;
|
||||
this._buildControls(config.radius);
|
||||
this._root.addEventListener('click', () => this._enableControls());
|
||||
this._container.appendChild(this._buildDialog());
|
||||
this._main_icon.addEventListener('click', () => this._openDialog());
|
||||
this._modes_dialog.addEventListener('click', () => this._hideDialog());
|
||||
this._updateText('title', config.title);
|
||||
}
|
||||
|
||||
updateState(options,hass) {
|
||||
|
||||
const config = this._config;
|
||||
const away = options.away || false;
|
||||
this.entity = options.entity;
|
||||
this.min_value = options.min_value;
|
||||
this.max_value = options.max_value;
|
||||
this.hvac_state = options.hvac_state;
|
||||
this.preset_mode = options.preset_mode;
|
||||
this.hvac_modes = options.hvac_modes;
|
||||
this.temperature = {
|
||||
low: options.target_temperature_low,
|
||||
high: options.target_temperature_high,
|
||||
target: options.target_temperature,
|
||||
ambient: options.ambient_temperature,
|
||||
}
|
||||
|
||||
this._updateClass('has_dual', this.dual);
|
||||
let tick_label, from, to;
|
||||
const tick_indexes = [];
|
||||
const ambient_index = SvgUtil.restrictToRange(Math.round((this.ambient - this.min_value) / (this.max_value - this.min_value) * config.num_ticks), 0, config.num_ticks - 1);
|
||||
const target_index = SvgUtil.restrictToRange(Math.round((this._target - this.min_value) / (this.max_value - this.min_value) * config.num_ticks), 0, config.num_ticks - 1);
|
||||
const high_index = SvgUtil.restrictToRange(Math.round((this._high - this.min_value) / (this.max_value - this.min_value) * config.num_ticks), 0, config.num_ticks - 1);
|
||||
const low_index = SvgUtil.restrictToRange(Math.round((this._low - this.min_value) / (this.max_value - this.min_value) * config.num_ticks), 0, config.num_ticks - 1);
|
||||
|
||||
if (!this.dual) {
|
||||
tick_label = [this._target, this.ambient].sort();
|
||||
this._updateTemperatureSlot(tick_label[0], -8, `temperature_slot_1`);
|
||||
this._updateTemperatureSlot(tick_label[1], 8, `temperature_slot_2`);
|
||||
|
||||
switch (this.hvac_state) {
|
||||
case 'dry':
|
||||
this._load_icon(this.hvac_state, 'water-percent');
|
||||
break;
|
||||
case 'fan_only':
|
||||
this._load_icon(this.hvac_state, 'fan');
|
||||
break;
|
||||
case 'cool':
|
||||
this._load_icon(this.hvac_state, 'snowflake');
|
||||
|
||||
if (target_index <= ambient_index) {
|
||||
from = target_index;
|
||||
to = ambient_index;
|
||||
}
|
||||
break;
|
||||
case 'heat':
|
||||
this._load_icon(this.hvac_state, 'fire');
|
||||
|
||||
if (target_index >= ambient_index) {
|
||||
from = ambient_index;
|
||||
to = target_index;
|
||||
}
|
||||
break;
|
||||
case 'auto':
|
||||
this._load_icon(this.hvac_state, 'atom');
|
||||
|
||||
if (target_index >= ambient_index) {
|
||||
from = ambient_index;
|
||||
to = target_index;
|
||||
}
|
||||
break;
|
||||
case 'off':
|
||||
this._load_icon(this.hvac_state, 'power');
|
||||
break;
|
||||
default:
|
||||
this._load_icon('more', 'dots-horizontal');
|
||||
}
|
||||
} else {
|
||||
tick_label = [this._low, this._high, this.ambient].sort();
|
||||
this._updateTemperatureSlot(null, 0, `temperature_slot_1`);
|
||||
this._updateTemperatureSlot(null, 0, `temperature_slot_2`);
|
||||
this._updateTemperatureSlot(null, 0, `temperature_slot_3`);
|
||||
|
||||
switch (this.hvac_state) {
|
||||
case 'cool':
|
||||
if (high_index < ambient_index) {
|
||||
from = high_index;
|
||||
to = ambient_index;
|
||||
this._updateTemperatureSlot(this.ambient, 8, `temperature_slot_3`);
|
||||
this._updateTemperatureSlot(this._high, -8, `temperature_slot_2`);
|
||||
}
|
||||
break;
|
||||
case 'heat':
|
||||
if (low_index > ambient_index) {
|
||||
from = ambient_index;
|
||||
to = low_index;
|
||||
this._updateTemperatureSlot(this.ambient, -8, `temperature_slot_1`);
|
||||
this._updateTemperatureSlot(this._low, 8, `temperature_slot_2`);
|
||||
}
|
||||
break;
|
||||
case 'off':
|
||||
if (high_index < ambient_index) {
|
||||
from = high_index;
|
||||
to = ambient_index;
|
||||
this._updateTemperatureSlot(this.ambient, 8, `temperature_slot_3`);
|
||||
this._updateTemperatureSlot(this._high, -8, `temperature_slot_2`);
|
||||
}
|
||||
if (low_index > ambient_index) {
|
||||
from = ambient_index;
|
||||
to = low_index;
|
||||
this._updateTemperatureSlot(this.ambient, -8, `temperature_slot_1`);
|
||||
this._updateTemperatureSlot(this._low, 8, `temperature_slot_2`);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
tick_label.forEach(item => tick_indexes.push(SvgUtil.restrictToRange(Math.round((item - this.min_value) / (this.max_value - this.min_value) * config.num_ticks), 0, config.num_ticks - 1)));
|
||||
this._updateTicks(from, to, tick_indexes, this.hvac_state);
|
||||
// this._updateColor(this.hvac_state, this.preset_mode);
|
||||
this._updateText('ambient', this.ambient);
|
||||
this._updateEdit(false);
|
||||
this._updateDialog(this.hvac_modes,hass);
|
||||
}
|
||||
|
||||
_temperatureControlClicked(index) {
|
||||
const config = this._config;
|
||||
let chevron;
|
||||
this._root.querySelectorAll('path.dial__chevron').forEach(el => SvgUtil.setClass(el, 'pressed', false));
|
||||
if (this.in_control) {
|
||||
if (this.dual) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
// clicked top left
|
||||
chevron = this._root.querySelectorAll('path.dial__chevron--low')[1];
|
||||
this._low = this._low + config.step;
|
||||
if ((this._low + config.idle_zone) >= this._high) this._low = this._high - config.idle_zone;
|
||||
break;
|
||||
case 1:
|
||||
// clicked top right
|
||||
chevron = this._root.querySelectorAll('path.dial__chevron--high')[1];
|
||||
this._high = this._high + config.step;
|
||||
if (this._high > this.max_value) this._high = this.max_value;
|
||||
break;
|
||||
case 2:
|
||||
// clicked bottom right
|
||||
chevron = this._root.querySelectorAll('path.dial__chevron--high')[0];
|
||||
this._high = this._high - config.step;
|
||||
if ((this._high - config.idle_zone) <= this._low) this._high = this._low + config.idle_zone;
|
||||
break;
|
||||
case 3:
|
||||
// clicked bottom left
|
||||
chevron = this._root.querySelectorAll('path.dial__chevron--low')[0];
|
||||
this._low = this._low - config.step;
|
||||
if (this._low < this.min_value) this._low = this.min_value;
|
||||
break;
|
||||
}
|
||||
SvgUtil.setClass(chevron, 'pressed', true);
|
||||
setTimeout(() => SvgUtil.setClass(chevron, 'pressed', false), 200);
|
||||
if (config.highlight_tap)
|
||||
SvgUtil.setClass(this._controls[index], 'control-visible', true);
|
||||
}
|
||||
else {
|
||||
if (index < 2) {
|
||||
// clicked top
|
||||
chevron = this._root.querySelectorAll('path.dial__chevron--target')[1];
|
||||
this._target = this._target + config.step;
|
||||
if (this._target > this.max_value) this._target = this.max_value;
|
||||
if (config.highlight_tap) {
|
||||
SvgUtil.setClass(this._controls[0], 'control-visible', true);
|
||||
SvgUtil.setClass(this._controls[1], 'control-visible', true);
|
||||
}
|
||||
} else {
|
||||
// clicked bottom
|
||||
chevron = this._root.querySelectorAll('path.dial__chevron--target')[0];
|
||||
this._target = this._target - config.step;
|
||||
if (this._target < this.min_value) this._target = this.min_value;
|
||||
if (config.highlight_tap) {
|
||||
SvgUtil.setClass(this._controls[2], 'control-visible', true);
|
||||
SvgUtil.setClass(this._controls[3], 'control-visible', true);
|
||||
}
|
||||
}
|
||||
SvgUtil.setClass(chevron, 'pressed', true);
|
||||
setTimeout(() => SvgUtil.setClass(chevron, 'pressed', false), 200);
|
||||
}
|
||||
if (config.highlight_tap) {
|
||||
setTimeout(() => {
|
||||
SvgUtil.setClass(this._controls[0], 'control-visible', false);
|
||||
SvgUtil.setClass(this._controls[1], 'control-visible', false);
|
||||
SvgUtil.setClass(this._controls[2], 'control-visible', false);
|
||||
SvgUtil.setClass(this._controls[3], 'control-visible', false);
|
||||
}, 200);
|
||||
}
|
||||
} else {
|
||||
this._enableControls();
|
||||
}
|
||||
}
|
||||
|
||||
_updateEdit(show_edit) {
|
||||
SvgUtil.setClass(this._root, 'dial--edit', show_edit);
|
||||
}
|
||||
|
||||
_enableControls() {
|
||||
const config = this._config;
|
||||
this._in_control = true;
|
||||
this._updateClass('in_control', this.in_control);
|
||||
if (this._timeoutHandler) clearTimeout(this._timeoutHandler);
|
||||
this._updateEdit(true);
|
||||
//this._updateClass('has-thermo', true);
|
||||
this._updateText('target', this.temperature.target);
|
||||
this._updateText('low', this.temperature.low);
|
||||
this._updateText('high', this.temperature.high);
|
||||
this._timeoutHandler = setTimeout(() => {
|
||||
this._updateText('ambient', this.ambient);
|
||||
this._updateEdit(false);
|
||||
//this._updateClass('has-thermo', false);
|
||||
this._in_control = false;
|
||||
this._updateClass('in_control', this.in_control);
|
||||
config.control();
|
||||
}, config.pending * 1000);
|
||||
}
|
||||
|
||||
_updateClass(class_name, flag) {
|
||||
SvgUtil.setClass(this._root, class_name, flag);
|
||||
}
|
||||
|
||||
_updateText(id, value) {
|
||||
const lblTarget = this._root.querySelector(`#${id}`).querySelectorAll('tspan');
|
||||
const text = Math.floor(value);
|
||||
if (value) {
|
||||
lblTarget[0].textContent = text;
|
||||
if (value % 1 != 0) {
|
||||
lblTarget[1].textContent = Math.round(value % 1 * 10);
|
||||
} else {
|
||||
lblTarget[1].textContent = '';
|
||||
}
|
||||
}
|
||||
|
||||
if (this.in_control && id == 'target' && this.dual) {
|
||||
lblTarget[0].textContent = '·';
|
||||
}
|
||||
|
||||
if(id =='title'){
|
||||
lblTarget[0].textContent = value;
|
||||
lblTarget[1].textContent = '';
|
||||
}
|
||||
}
|
||||
|
||||
_updateTemperatureSlot(value, offset, slot) {
|
||||
|
||||
const config = this._config;
|
||||
const lblSlot1 = this._root.querySelector(`#${slot}`)
|
||||
lblSlot1.textContent = value != null ? SvgUtil.superscript(value) : '';
|
||||
|
||||
const peggedValue = SvgUtil.restrictToRange(value, this.min_value, this.max_value);
|
||||
const position = [config.radius, config.ticks_outer_radius - (config.ticks_outer_radius - config.ticks_inner_radius) / 2];
|
||||
let degs = config.tick_degrees * (peggedValue - this.min_value) / (this.max_value - this.min_value) - config.offset_degrees + offset;
|
||||
const pos = SvgUtil.rotatePoint(position, degs, [config.radius, config.radius]);
|
||||
SvgUtil.attributes(lblSlot1, {
|
||||
x: pos[0],
|
||||
y: pos[1]
|
||||
});
|
||||
}
|
||||
|
||||
_updateColor(state, preset_mode) {
|
||||
|
||||
if(Object.prototype.toString.call(preset_mode) === "[object String]"){
|
||||
|
||||
if(state != 'off' && preset_mode.toLowerCase() == 'idle')
|
||||
state = 'idle'
|
||||
this._root.classList.forEach(c => {
|
||||
if (c.indexOf('dial--state--') != -1)
|
||||
this._root.classList.remove(c);
|
||||
});
|
||||
this._root.classList.add('dial--state--' + state);
|
||||
}
|
||||
}
|
||||
|
||||
_updateTicks(from, to, large_ticks, hvac_state) {
|
||||
const config = this._config;
|
||||
|
||||
const tickPoints = [
|
||||
[config.radius - 1, config.ticks_outer_radius],
|
||||
[config.radius + 1, config.ticks_outer_radius],
|
||||
[config.radius + 1, config.ticks_inner_radius],
|
||||
[config.radius - 1, config.ticks_inner_radius]
|
||||
];
|
||||
const tickPointsLarge = [
|
||||
[config.radius - 1.5, config.ticks_outer_radius],
|
||||
[config.radius + 1.5, config.ticks_outer_radius],
|
||||
[config.radius + 1.5, config.ticks_inner_radius + 20],
|
||||
[config.radius - 1.5, config.ticks_inner_radius + 20]
|
||||
];
|
||||
|
||||
this._ticks.forEach((tick, index) => {
|
||||
let isLarge = false;
|
||||
let isActive = (index >= from && index <= to) ? 'active '+hvac_state : '';
|
||||
large_ticks.forEach(i => isLarge = isLarge || (index == i));
|
||||
if (isLarge) isActive += ' large';
|
||||
const theta = config.tick_degrees / config.num_ticks;
|
||||
SvgUtil.attributes(tick, {
|
||||
d: SvgUtil.pointsToPath(SvgUtil.rotatePoints(isLarge ? tickPointsLarge : tickPoints, index * theta - config.offset_degrees, [config.radius, config.radius])),
|
||||
class: isActive
|
||||
});
|
||||
});
|
||||
}
|
||||
_updateDialog(modes,hass){
|
||||
this._modes_dialog.innerHTML = "";
|
||||
for(var i=0;i<modes.length;i++){
|
||||
let icon;
|
||||
let mode = modes[i];
|
||||
switch (mode) {
|
||||
case 'dry':
|
||||
icon = 'water-percent';
|
||||
break;
|
||||
case 'fan_only':
|
||||
icon = 'fan';
|
||||
break;
|
||||
case 'cool':
|
||||
icon = 'snowflake';
|
||||
break;
|
||||
case 'heat':
|
||||
icon = 'fire';
|
||||
break;
|
||||
case 'auto':
|
||||
icon = 'atom';
|
||||
break;
|
||||
case 'off':
|
||||
icon = 'power';
|
||||
break;
|
||||
}
|
||||
let d = document.createElement('span');
|
||||
d.innerHTML = `<ha-icon class="modeicon ${mode}" icon="mdi:${icon}"></ha-icon>`
|
||||
d.addEventListener('click', (e) => this._setMode(e,mode,hass));
|
||||
//this._modes[i].push(d);
|
||||
this._modes_dialog.appendChild(d)
|
||||
}
|
||||
}
|
||||
_buildCore(diameter) {
|
||||
return SvgUtil.createSVGElement('svg', {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
viewBox: '0 0 ' + diameter + ' ' + diameter,
|
||||
class: 'dial'
|
||||
})
|
||||
}
|
||||
|
||||
openProp() {
|
||||
this._config.propWin(this.entity.entity_id)
|
||||
}
|
||||
_openDialog(){
|
||||
this._modes_dialog.className = "dialog modes";
|
||||
}
|
||||
_hideDialog(){
|
||||
this._modes_dialog.className = "dialog modes hide";
|
||||
}
|
||||
_setMode(e, mode,hass){
|
||||
console.log(mode);
|
||||
let config = this._config;
|
||||
if (this._timeoutHandlerMode) clearTimeout(this._timeoutHandlerMode);
|
||||
hass.callService('climate', 'set_hvac_mode', {
|
||||
entity_id: this._config.entity,
|
||||
hvac_mode: mode,
|
||||
});
|
||||
this._modes_dialog.className = "dialog modes "+mode+" pending";
|
||||
this._timeoutHandlerMode = setTimeout(() => {
|
||||
this._modes_dialog.className = "dialog modes hide";
|
||||
}, config.pending * 1000);
|
||||
e.stopPropagation();
|
||||
}
|
||||
_load_icon(state, ic_name){
|
||||
|
||||
let ic_dot = 'dot_r'
|
||||
if(ic_name == ''){
|
||||
ic_dot = 'dot_h'
|
||||
}
|
||||
|
||||
this._main_icon.innerHTML = `
|
||||
<div class="climate_info">
|
||||
<div class="mode_color"><span class="${ic_dot}"></span></div>
|
||||
<div class="modes"><ha-icon class="${state}" icon="mdi:${ic_name}"></ha-icon></div>
|
||||
</div>
|
||||
`;
|
||||
return this._main_icon;
|
||||
}
|
||||
_buildDialog(){
|
||||
this._modes_dialog.className = "dialog modes hide";
|
||||
return this._modes_dialog;
|
||||
}
|
||||
// build black dial
|
||||
_buildDial(radius) {
|
||||
return SvgUtil.createSVGElement('circle', {
|
||||
cx: radius,
|
||||
cy: radius,
|
||||
r: radius,
|
||||
class: 'dial__shape'
|
||||
})
|
||||
}
|
||||
// build circle around
|
||||
_buildRing(radius) {
|
||||
return SvgUtil.createSVGElement('path', {
|
||||
d: SvgUtil.donutPath(radius, radius, radius - 4, radius - 8),
|
||||
class: 'dial__editableIndicator',
|
||||
})
|
||||
}
|
||||
|
||||
_buildTicks(num_ticks) {
|
||||
const tick_element = SvgUtil.createSVGElement('g', {
|
||||
class: 'dial__ticks'
|
||||
});
|
||||
for (let i = 0; i < num_ticks; i++) {
|
||||
const tick = SvgUtil.createSVGElement('path', {})
|
||||
this._ticks.push(tick);
|
||||
tick_element.appendChild(tick);
|
||||
}
|
||||
return tick_element;
|
||||
}
|
||||
|
||||
_buildChevrons(radius, rotation, id, scale, offset) {
|
||||
const config = this._config;
|
||||
const translation = rotation > 0 ? -1 : 1;
|
||||
const width = config.chevron_size;
|
||||
const chevron_def = ["M", 0, 0, "L", width / 2, width * 0.3, "L", width, 0].map((x) => isNaN(x) ? x : x * scale).join(' ');
|
||||
const translate = [radius - width / 2 * scale * translation + offset, radius + 70 * scale * 1.1 * translation];
|
||||
const chevron = SvgUtil.createSVGElement('path', {
|
||||
class: `dial__chevron dial__chevron--${id}`,
|
||||
d: chevron_def,
|
||||
transform: `translate(${translate[0]},${translate[1]}) rotate(${rotation})`
|
||||
});
|
||||
return chevron;
|
||||
}
|
||||
|
||||
_buildThermoIcon(radius) {
|
||||
const thermoScale = radius / 3 / 100;
|
||||
const thermoDef = 'M 37.999 38.261 V 7 c 0 -3.859 -3.141 -7 -7 -7 s -7 3.141 -7 7 v 31.261 c -3.545 2.547 -5.421 6.769 -4.919 11.151 c 0.629 5.482 5.066 9.903 10.551 10.512 c 0.447 0.05 0.895 0.074 1.339 0.074 c 2.956 0 5.824 -1.08 8.03 -3.055 c 2.542 -2.275 3.999 -5.535 3.999 -8.943 C 42.999 44.118 41.14 40.518 37.999 38.261 Z M 37.666 55.453 c -2.146 1.921 -4.929 2.8 -7.814 2.482 c -4.566 -0.506 -8.261 -4.187 -8.785 -8.752 c -0.436 -3.808 1.28 -7.471 4.479 -9.56 l 0.453 -0.296 V 38 h 1 c 0.553 0 1 -0.447 1 -1 s -0.447 -1 -1 -1 h -1 v -3 h 1 c 0.553 0 1 -0.447 1 -1 s -0.447 -1 -1 -1 h -1 v -3 h 1 c 0.553 0 1 -0.447 1 -1 s -0.447 -1 -1 -1 h -1 v -3 h 1 c 0.553 0 1 -0.447 1 -1 s -0.447 -1 -1 -1 h -1 v -3 h 1 c 0.553 0 1 -0.447 1 -1 s -0.447 -1 -1 -1 h -1 v -3 h 1 c 0.553 0 1 -0.447 1 -1 s -0.447 -1 -1 -1 h -1 V 8 h 1 c 0.553 0 1 -0.447 1 -1 s -0.447 -1 -1 -1 H 26.1 c 0.465 -2.279 2.484 -4 4.899 -4 c 2.757 0 5 2.243 5 5 v 1 h -1 c -0.553 0 -1 0.447 -1 1 s 0.447 1 1 1 h 1 v 3 h -1 c -0.553 0 -1 0.447 -1 1 s 0.447 1 1 1 h 1 v 3 h -1 c -0.553 0 -1 0.447 -1 1 s 0.447 1 1 1 h 1 v 3 h -1 c -0.553 0 -1 0.447 -1 1 s 0.447 1 1 1 h 1 v 3 h -1 c -0.553 0 -1 0.447 -1 1 s 0.447 1 1 1 h 1 v 3 h -1 c -0.553 0 -1 0.447 -1 1 s 0.447 1 1 1 h 1 v 4.329 l 0.453 0.296 c 2.848 1.857 4.547 4.988 4.547 8.375 C 40.999 50.841 39.784 53.557 37.666 55.453 Z'.split(' ').map((x) => isNaN(x) ? x : x * thermoScale).join(' ');
|
||||
const translate = [radius - (thermoScale * 100 * 0.3), radius * 1.65]
|
||||
return SvgUtil.createSVGElement('path', {
|
||||
class: 'dial__ico__thermo',
|
||||
d: thermoDef,
|
||||
transform: 'translate(' + translate[0] + ',' + translate[1] + ')'
|
||||
});
|
||||
}
|
||||
|
||||
_buildDialSlot(index) {
|
||||
return SvgUtil.createSVGElement('text', {
|
||||
class: 'dial__lbl dial__lbl--ring',
|
||||
id: `temperature_slot_${index}`
|
||||
})
|
||||
}
|
||||
|
||||
_buildText(radius, name, offset) {
|
||||
const target = SvgUtil.createSVGElement('text', {
|
||||
x: radius + offset,
|
||||
y: radius-(name=='title'?radius/2:0),
|
||||
class: `dial__lbl dial__lbl--${name}`,
|
||||
id: name
|
||||
});
|
||||
const text = SvgUtil.createSVGElement('tspan', {
|
||||
});
|
||||
// hack
|
||||
if (name == 'target' || name == 'ambient') offset += 20;
|
||||
const superscript = SvgUtil.createSVGElement('tspan', {
|
||||
x: radius + radius / 3.1 + offset,
|
||||
y: radius - radius / 6,
|
||||
class: `dial__lbl--super--${name}`
|
||||
});
|
||||
target.appendChild(text);
|
||||
target.appendChild(superscript);
|
||||
return target;
|
||||
}
|
||||
|
||||
_buildControls(radius) {
|
||||
let startAngle = 270;
|
||||
let loop = 4;
|
||||
for (let index = 0; index < loop; index++) {
|
||||
const angle = 360 / loop;
|
||||
const sector = SvgUtil.anglesToSectors(radius, startAngle, angle);
|
||||
const controlsDef = 'M' + sector.L + ',' + sector.L + ' L' + sector.L + ',0 A' + sector.L + ',' + sector.L + ' 1 0,1 ' + sector.X + ', ' + sector.Y + ' z';
|
||||
const path = SvgUtil.createSVGElement('path', {
|
||||
class: 'dial__temperatureControl',
|
||||
fill: 'blue',
|
||||
d: controlsDef,
|
||||
transform: 'rotate(' + sector.R + ', ' + sector.L + ', ' + sector.L + ')'
|
||||
});
|
||||
this._controls.push(path);
|
||||
path.addEventListener('click', () => this._temperatureControlClicked(index));
|
||||
this._root.appendChild(path);
|
||||
startAngle = startAngle + angle;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class SvgUtil {
|
||||
static createSVGElement(tag, attributes) {
|
||||
const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
|
||||
this.attributes(element, attributes)
|
||||
return element;
|
||||
}
|
||||
static attributes(element, attrs) {
|
||||
for (let i in attrs) {
|
||||
element.setAttribute(i, attrs[i]);
|
||||
}
|
||||
}
|
||||
// Rotate a cartesian point about given origin by X degrees
|
||||
static rotatePoint(point, angle, origin) {
|
||||
const radians = angle * Math.PI / 180;
|
||||
const x = point[0] - origin[0];
|
||||
const y = point[1] - origin[1];
|
||||
const x1 = x * Math.cos(radians) - y * Math.sin(radians) + origin[0];
|
||||
const y1 = x * Math.sin(radians) + y * Math.cos(radians) + origin[1];
|
||||
return [x1, y1];
|
||||
}
|
||||
// Rotate an array of cartesian points about a given origin by X degrees
|
||||
static rotatePoints(points, angle, origin) {
|
||||
return points.map((point) => this.rotatePoint(point, angle, origin));
|
||||
}
|
||||
// Given an array of points, return an SVG path string representing the shape they define
|
||||
static pointsToPath(points) {
|
||||
return points.map((point, iPoint) => (iPoint > 0 ? 'L' : 'M') + point[0] + ' ' + point[1]).join(' ') + 'Z';
|
||||
}
|
||||
static circleToPath(cx, cy, r) {
|
||||
return [
|
||||
"M", cx, ",", cy,
|
||||
"m", 0 - r, ",", 0,
|
||||
"a", r, ",", r, 0, 1, ",", 0, r * 2, ",", 0,
|
||||
"a", r, ",", r, 0, 1, ",", 0, 0 - r * 2, ",", 0,
|
||||
"z"
|
||||
].join(' ').replace(/\s,\s/g, ",");
|
||||
}
|
||||
static donutPath(cx, cy, rOuter, rInner) {
|
||||
return this.circleToPath(cx, cy, rOuter) + " " + this.circleToPath(cx, cy, rInner);
|
||||
}
|
||||
|
||||
static superscript(n) {
|
||||
|
||||
if ((n - Math.floor(n)) !== 0)
|
||||
n = Number(n).toFixed(1);;
|
||||
const x = `${n}${n == 0 ? '' : ''}`;
|
||||
return x;
|
||||
}
|
||||
|
||||
// Restrict a number to a min + max range
|
||||
static restrictToRange(val, min, max) {
|
||||
if (val < min) return min;
|
||||
if (val > max) return max;
|
||||
return val;
|
||||
}
|
||||
static setClass(el, className, state) {
|
||||
|
||||
|
||||
el.classList[state ? 'add' : 'remove'](className);
|
||||
}
|
||||
|
||||
static anglesToSectors(radius, startAngle, angle) {
|
||||
let aRad = 0 // Angle in Rad
|
||||
let z = 0 // Size z
|
||||
let x = 0 // Side x
|
||||
let X = 0 // SVG X coordinate
|
||||
let Y = 0 // SVG Y coordinate
|
||||
const aCalc = (angle > 180) ? 360 - angle : angle;
|
||||
aRad = aCalc * Math.PI / 180;
|
||||
z = Math.sqrt(2 * radius * radius - (2 * radius * radius * Math.cos(aRad)));
|
||||
if (aCalc <= 90) {
|
||||
x = radius * Math.sin(aRad);
|
||||
}
|
||||
else {
|
||||
x = radius * Math.sin((180 - aCalc) * Math.PI / 180);
|
||||
}
|
||||
Y = Math.sqrt(z * z - x * x);
|
||||
if (angle <= 180) {
|
||||
X = radius + x;
|
||||
}
|
||||
else {
|
||||
X = radius - x;
|
||||
}
|
||||
return {
|
||||
L: radius,
|
||||
X: X,
|
||||
Y: Y,
|
||||
R: startAngle
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
www/community/lovelace-thermostat-card/thermostat_card.lib.js.gz
Normal file
BIN
www/community/lovelace-thermostat-card/thermostat_card.lib.js.gz
Normal file
Binary file not shown.
@@ -0,0 +1,590 @@
|
||||
/*
|
||||
* Author : duytruong
|
||||
* Github : https://github.com/konnectedvn
|
||||
* Description :
|
||||
* Date : 01 Feb 2021 08:44:30+07:00
|
||||
* Based on : github.com/DBuit/hass-smart-home-panel-card (Thanks to DBuit!)
|
||||
*/
|
||||
console.info("%c [konnected.vn] Vertical Slider Cover Card \n%c Version v0.1.5","color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: dimgray");
|
||||
import {
|
||||
LitElement,
|
||||
html,
|
||||
css
|
||||
} from "https://unpkg.com/lit-element@2.0.1/lit-element.js?module";
|
||||
class VerticalSliderCoverCard extends LitElement {
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
hass: {},
|
||||
config: {},
|
||||
active: {},
|
||||
sliderVal: { type: Array }
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.sliderVal = [];
|
||||
}
|
||||
|
||||
render() {
|
||||
var primaryTextColor = "var(--primary-text-color)";
|
||||
var icon = this.config.icon ? this.config.icon : "mdi:blinds";
|
||||
var iconSize = this.config.iconSize ? this.config.iconSize: "28px";
|
||||
var iconColor = this.config.iconColor ? this.config.iconColor : primaryTextColor;
|
||||
|
||||
var positionWidth = this.config.positionWidth ? this.config.positionWidth : "100px";
|
||||
var positionHeight = this.config.positionHeight ? this.config.positionHeight : "300px";
|
||||
var showName = this.config.showName ? this.config.showName : true;
|
||||
var showPosition = this.config.showPosition ? this.config.showPosition : true;
|
||||
var switchWidth = this.config.switchWidth ? this.config.switchWidth : positionWidth;
|
||||
var switchHeight = this.config.switchHeight ? this.config.switchHeight : switchWidth;
|
||||
var showSwitch = this.config.showSwitch;
|
||||
var switchFontColor = this.config.switchFontColor ? this.config.switchFontColor : primaryTextColor;
|
||||
var gapWidth = this.config.gapWidth ? this.config.gapWidth : "50px";
|
||||
|
||||
var countText = this.config.countText ? this.config.countText : "covers open";
|
||||
var countTextFontColor = this.config.countTextFontColor ? this.config.countTextFontColor : primaryTextColor;
|
||||
var openBaseline = this.config.closedBaseline ? this.config.closedBaseline : 0;
|
||||
var entityCounter = 0;
|
||||
|
||||
var showButton = this.config.showButton ? this.config.showButton : false;
|
||||
var buttonText = this.config.buttonText ? this.config.buttonText : "Home";
|
||||
var buttonPath = this.config.buttonPath ? this.config.buttonPath : "/lovelace/0";
|
||||
var buttonService = this.config.buttonService ? this.config.buttonService: "";
|
||||
var buttonData = this.config.buttonData ? this.config.buttonData : "";
|
||||
var buttonFontColor = this.config.buttonFontColor ? this.config.buttonFontColor : primaryTextColor;
|
||||
|
||||
var background = this.config.background ? this.config.background : "transparent";
|
||||
var sideColor1 = this.config.sideColor1 ? this.config.sideColor1 : "#ffcccc";
|
||||
var sideColor2 = this.config.sideColor2 ? this.config.sideColor2 : '#b30000';
|
||||
var switchColor = this.config.switchColor ? this.config.switchColor : sideColor2;
|
||||
var closedColor = this.config.closedColor ? this.config.closedColor : "hsl(0, 0%, 20%)";
|
||||
var openColor = this.config.openColor ? this.config.openColor : "hsl(0, 0%, 90%, 0.6)";
|
||||
var panelType = this.config.panelType;
|
||||
var showSidebar = this.config.showSidebar;
|
||||
var titleSize = this.config.titleSize ? this.config.titleSize : "40px";
|
||||
var titleFontColor = this.config.titleFontColor ? this.config.titleFontColor : primaryTextColor;
|
||||
|
||||
return html`
|
||||
<ha-card>
|
||||
<div class="page" style="background:${background};">
|
||||
|
||||
<div class="side" style="${this._panelSize(panelType)};--show-sidebar:${this._showFlex(showSidebar)};--sideColor-1:${sideColor1};--sideColor-2:${sideColor2};">
|
||||
<div class="header">
|
||||
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="icon">
|
||||
<ha-icon style="--mdc-icon-size:${iconSize};--icon-color:${iconColor};" icon="${icon}" />
|
||||
</div>
|
||||
<h1 style="--title-size:${titleSize};--title-font-color:${titleFontColor};">${this.config.title}</h1>
|
||||
<h3 style="--count-font-color:${countTextFontColor};">${this._stateCount(openBaseline)} ${countText}</h3>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
${showButton ? html`<button class="back-btn" style="--button-size:${this._buttonFont(titleSize,buttonText)}px;--button-font-color:${buttonFontColor};" @click=${e => this._navigate(buttonPath,buttonService,buttonData)}>${buttonText}</button>` : html``}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<div class="inner-main">
|
||||
${this.config.entities.map(ent => {
|
||||
entityCounter++;
|
||||
var switchValue = 0;
|
||||
const stateObj = this.hass.states[ent.entity];
|
||||
switch(stateObj.state) {
|
||||
case 'open':
|
||||
switchValue = 100;
|
||||
break;
|
||||
case 'closed':
|
||||
switchValue = 0;
|
||||
break;
|
||||
default:
|
||||
switchValue = 0;
|
||||
}
|
||||
return stateObj ? html`
|
||||
<div class="cover" style="--cover-width:${this._coverSize(positionWidth,gapWidth,panelType)};--center-slider:${this._centerSliders(panelType)};">
|
||||
<div class="cover-slider">
|
||||
<p class="cover-name" style="--show-name: ${this._showBlock(showName)};--cover-fontSize: ${this._coverNameFont(positionWidth,gapWidth)}px;">${ent.name || stateObj.attributes.friendly_name}</p>
|
||||
${stateObj.attributes.supported_features > 6 ? html`
|
||||
<p class="cover-position" style="--show-position: ${this._showBlock(showPosition)};--cover-fontSize: ${parseInt(positionWidth.replace(/px/,"")) / 4 - (parseInt(positionWidth.replace(/px/,"")) - 60) / 4}px;">${this._coverPosition(stateObj.state, stateObj.attributes.current_position, stateObj.entity_id)}</p>
|
||||
<div class="range-holder" style="--slider-height: ${positionHeight};--closed-color: ${closedColor};">
|
||||
<input type="range" class="${stateObj.state}" style="--slider-width: ${positionWidth};--slider-height: ${positionHeight};--closed-color: ${closedColor};--open-color: ${openColor};" .value="${stateObj.state === "closed" ? 0 : Math.round(stateObj.attributes.current_position)}" @input=${e => this._sliderChange(e.target.value, stateObj.entity_id)}} @change=${e => this._setPosition(stateObj.entity_id, e.target.value, ent.script)}>
|
||||
</div>
|
||||
` : html`
|
||||
<h4>${stateObj.state}</h4>
|
||||
<div class="switch-holder" style="--switch-height: ${switchHeight};">
|
||||
<input type="range" class="${stateObj.state}" style="--switch-width: ${switchWidth};--switch-height: ${switchHeight};" value="0" min="0" max="1" .value="${switchValue}" @change=${e => this._switch(stateObj)}>
|
||||
</div>
|
||||
`}
|
||||
<div class="toggle" style="--show-switch: ${this._showFlex(showSwitch)};">
|
||||
<input ?checked=${stateObj.state == "open"} type="checkbox" id="toggle${entityCounter}" class="toggle-btn" @change=${e => this._switch(stateObj)} />
|
||||
<label for="toggle${entityCounter}" style="--switch-width: ${switchWidth};--switch-height: ${switchHeight};--switch-font-color: ${switchFontColor};--switch-color: ${switchColor};--switch-labelSize: ${parseInt(switchWidth.replace(/px/,"")) / 5}px;"><span></span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`: html``;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
updated() {}
|
||||
|
||||
_sliderChange(value, entity_id){
|
||||
this.sliderVal[entity_id] = {val: value, active: true};
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
_coverPosition(coverState, coverPos, entity_id){
|
||||
if (coverState === "closed") {
|
||||
return '0';
|
||||
} else if (typeof this.sliderVal[entity_id] === 'undefined' || !this.sliderVal[entity_id]['active']) {
|
||||
return Math.round(coverPos);
|
||||
} else {
|
||||
return this.sliderVal[entity_id]['val'];
|
||||
}
|
||||
}
|
||||
|
||||
_setPosition(entity_id, value, script) {
|
||||
if (this.hass.states[entity_id].attributes.current_position === value) {
|
||||
return;
|
||||
}
|
||||
this.hass.callService("cover", "set_cover_position", {
|
||||
entity_id: entity_id,
|
||||
position: value
|
||||
});
|
||||
this.sliderVal[entity_id]['active'] = false;
|
||||
if (script) {
|
||||
this.hass.callService("script", "turn_on", {
|
||||
entity_id: script
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
_stateCount(baseline) {
|
||||
let count = 0;
|
||||
this.config.entities.map(ent => {
|
||||
const stateObj = this.hass.states[ent.entity];
|
||||
if(stateObj.state === "open" && baseline === 0) {
|
||||
count++;
|
||||
} else if (stateObj.attributes.current_position >= baseline && baseline > 0) {
|
||||
count++;
|
||||
}
|
||||
})
|
||||
return count;
|
||||
}
|
||||
|
||||
_panelSize(panelType) {
|
||||
let sideWidth = 40;
|
||||
if (panelType === true) {
|
||||
sideWidth = 30;
|
||||
}
|
||||
return "--side-width:" + sideWidth + "px";
|
||||
}
|
||||
|
||||
_showFlex(showSidebar) {
|
||||
if (showSidebar === false) {
|
||||
return "none";
|
||||
}
|
||||
return "flex";
|
||||
}
|
||||
|
||||
_showBlock(confValue) {
|
||||
if(confValue === false) {
|
||||
return "none";
|
||||
}
|
||||
return "block";
|
||||
}
|
||||
|
||||
_coverSize(positionWidth, gapWidth, panelType) {
|
||||
if (panelType === false) {
|
||||
return (parseInt(positionWidth.replace(/px/,"")) + parseInt(gapWidth.replace(/px/,""))) + "px";
|
||||
} else {
|
||||
return "50%";
|
||||
}
|
||||
}
|
||||
|
||||
_buttonFont(titleSize,buttonText) {
|
||||
let fieldSize = parseInt(titleSize.replace(/px/,"")) * this.config.title.length;
|
||||
let buttonSize = fieldSize / buttonText.length;
|
||||
return buttonSize * 0.5;
|
||||
}
|
||||
|
||||
_centerSliders(panelType) {
|
||||
if (panelType === true) {
|
||||
return "0 auto";
|
||||
} else {
|
||||
return "0";
|
||||
}
|
||||
}
|
||||
|
||||
_coverNameFont(positionWidth, gapWidth) {
|
||||
let maxLength = 0;
|
||||
this.config.entities.map(ent => {
|
||||
const stateObj = this.hass.states[ent.entity];
|
||||
let name = ent.name || stateObj.attributes.friendly_name;
|
||||
if(name.length > maxLength) {
|
||||
maxLength = name.length;
|
||||
}
|
||||
})
|
||||
let fontsize = parseInt(positionWidth.replace(/px/,""));
|
||||
if (parseInt(gapWidth.replace(/px/,"")) > 50) {
|
||||
fontsize = fontsize + (parseInt(gapWidth.replace(/px/,"")) / 2);
|
||||
} else {
|
||||
fontsize = fontsize + parseInt(gapWidth.replace(/px/,""));
|
||||
}
|
||||
return ((( fontsize - 4 ) / maxLength) * 1.8) | 0;
|
||||
}
|
||||
|
||||
_switch(state) {
|
||||
this.hass.callService("cover", "stop_cover", {
|
||||
entity_id: state.entity_id
|
||||
});
|
||||
}
|
||||
|
||||
_navigate(path,service,data) {
|
||||
if (service.length === 0) {
|
||||
window.location.href = path;
|
||||
} else {
|
||||
let domain = service.split(".",2)[0];
|
||||
let ser = service.split(".",2)[1];
|
||||
this.hass.callService(domain,ser, {
|
||||
entity_id: data
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setConfig(config) {
|
||||
if (!config.entities) {
|
||||
throw new Error("You need to define entities");
|
||||
}
|
||||
if (!config.title) {
|
||||
throw new Error("You need to define a title");
|
||||
}
|
||||
for (var i = 0, len = config.entities.length; i < len; i++) {
|
||||
if (config.entities[i].entity === undefined) {
|
||||
throw new Error(config.entities[i] + " is INVALID! Should be object: - entity: " + config.entities[i] + ".");
|
||||
}
|
||||
}
|
||||
this.config = config;
|
||||
}
|
||||
getCardSize() {
|
||||
return this.config.entities.length + 1;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
:host([is-panel]) ha-card {
|
||||
left: 50;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
ha-card {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.page {
|
||||
width:100%;
|
||||
height:100%;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.page > .side {
|
||||
padding: 10px;
|
||||
width: var(--side-width)%;
|
||||
display:var(--show-sidebar);
|
||||
flex-direction:column;
|
||||
background: rgb(28,122,226);
|
||||
background: linear-gradient(145deg, var(--sideColor-1) 0%, var(--sideColor-2) 90%);
|
||||
justify-content:space-between;
|
||||
}
|
||||
.side .header {
|
||||
}
|
||||
.side .center {
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
}
|
||||
.side .center .icon {
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
text-align:center;
|
||||
}
|
||||
.side .center .icon ha-icon {
|
||||
color:var(--icon-color);
|
||||
}
|
||||
.side .center h1 {
|
||||
color:var(--title-font-color);
|
||||
margin:10px 0 0 5px;
|
||||
font-weight:400;
|
||||
font-size: var(--title-size);
|
||||
line-height: var(--title-size);
|
||||
text-align: center;
|
||||
}
|
||||
.side .center h3 {
|
||||
color:var(--count-font-color);
|
||||
margin:5px 0 5px 0;
|
||||
font-size: 120%;
|
||||
font-weight: 400;
|
||||
line-height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.side .bottom {
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
border:2px solid var(--button-font-color);
|
||||
color:var(--button-font-color);
|
||||
background:transparent;
|
||||
font-size:var(--button-size);
|
||||
border-radius: 4px;
|
||||
width:100%;
|
||||
display:block;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.page > .main {
|
||||
width:100%;
|
||||
overflow-x:scroll;
|
||||
padding-bottom: 0px;
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.page > .main::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.page > .main > .inner-main {
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
height:100%;
|
||||
margin: auto;
|
||||
padding-right: 0px;
|
||||
}
|
||||
.page > .main > .inner-main > .cover {
|
||||
width: var(--cover-width);
|
||||
display:inline-block;
|
||||
margin: var(--center-slider);
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.cover .icon {
|
||||
margin: 0 auto;
|
||||
text-align:center;
|
||||
display:block;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
color: rgba(255,255,255,0.3);
|
||||
font-size: 30px;
|
||||
padding-top:5px;
|
||||
}
|
||||
.cover .icon ha-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align:center;
|
||||
}
|
||||
.cover .icon.on ha-icon {
|
||||
fill: #f7d959;
|
||||
}
|
||||
h2 {
|
||||
color: #FFF;
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
font-size:20px;
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #FFF;
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
text-align: center;
|
||||
font-size:18px;
|
||||
}
|
||||
|
||||
.cover-name {
|
||||
display: var(--show-name);
|
||||
font-weight: 300;
|
||||
margin-top: calc(var(--cover-fontSize) / 3);
|
||||
margin-bottom: calc(var(--cover-fontSize) / 2);
|
||||
text-align: center;
|
||||
font-size: var(--cover-fontSize);
|
||||
}
|
||||
.cover-position {
|
||||
display: var(--show-position);
|
||||
font-weight: 300;
|
||||
margin-top: calc(var(--cover-fontsize) / 2);
|
||||
margin-bottom: var(--cover-fontsize);
|
||||
text-align: center;
|
||||
font-size: var(--cover-fontSize);
|
||||
}
|
||||
.cover-slider .cover-name, .cover-position {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: var(--primary-text-color);
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
font-size:16px;
|
||||
margin-top:0;
|
||||
}
|
||||
.cover-position:after {
|
||||
content: "%";
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
.range-holder {
|
||||
height: var(--slider-height);
|
||||
position:relative;
|
||||
display: block;
|
||||
}
|
||||
.range-holder input[type="range"] {
|
||||
outline: 0;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
width: var(--slider-height);
|
||||
margin: 0;
|
||||
transition: box-shadow 0.2s ease-in-out;
|
||||
-webkit-transform:rotate(270deg);
|
||||
-moz-transform:rotate(270deg);
|
||||
-o-transform:rotate(270deg);
|
||||
-ms-transform:rotate(270deg);
|
||||
transform:rotate(270deg);
|
||||
overflow: hidden;
|
||||
height: var(--slider-width);
|
||||
-webkit-appearance: none;
|
||||
background-color: var(--closed-color);
|
||||
position: absolute;
|
||||
top: calc(50% - (var(--slider-width) / 2));
|
||||
right: calc(50% - (var(--slider-height) / 2));
|
||||
}
|
||||
.range-holder input[type="range"]::-webkit-slider-runnable-track {
|
||||
height: var(--slider-width);
|
||||
-webkit-appearance: none;
|
||||
color: var(--open-color);
|
||||
margin-top: 0px;
|
||||
transition: box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
.range-holder input[type="range"]::-webkit-slider-thumb {
|
||||
width: calc((var(--slider-width) / 5) + 2px);
|
||||
border-right:8px solid var(--closed-color);
|
||||
border-left:8px solid var(--closed-color);
|
||||
border-top:20px solid var(--closed-color);
|
||||
border-bottom:20px solid var(--closed-color);
|
||||
-webkit-appearance: none;
|
||||
height: var(--slider-width);
|
||||
cursor: ew-resize;
|
||||
background: var(--closed-color);
|
||||
box-shadow: -350px 0 0 350px var(--open-color), inset 0 0 0 80px var(--open-color);
|
||||
border-radius: 0;
|
||||
transition: box-shadow 0.2s ease-in-out;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
// .range-holder input[type="range"].on::-webkit-slider-thumb {
|
||||
// border-color: #1c7ae2;
|
||||
// box-shadow: -350px 0 0 350px #1c7ae2, inset 0 0 0 80px #FFF;
|
||||
// }
|
||||
|
||||
.switch-holder {
|
||||
height: var(--switch-height);
|
||||
position:relative;
|
||||
display: block;
|
||||
}
|
||||
.switch-holder input[type="range"] {
|
||||
outline: 0;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
width: calc(var(--switch-height) - 20px);
|
||||
margin: 0;
|
||||
transition: box-shadow 0.2s ease-in-out;
|
||||
-webkit-transform: rotate(270deg);
|
||||
-moz-transform: rotate(270deg);
|
||||
-o-transform: rotate(270deg);
|
||||
-ms-transform: rotate(270deg);
|
||||
transform: rotate(270deg);
|
||||
overflow: hidden;
|
||||
height: calc(var(--switch-width) - 20px);
|
||||
-webkit-appearance: none;
|
||||
background-color: var(--switch-color);
|
||||
color: var(--switch-font-color);
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
top: calc(50% - (var(--switch-width) / 2));
|
||||
right: calc(50% - (var(--switch-height) / 2));
|
||||
}
|
||||
.switch-holder input[type="range"]::-webkit-slider-runnable-track {
|
||||
height: calc(var(--switch-width) - 20px);
|
||||
-webkit-appearance: none;
|
||||
color: var(--switch-color);
|
||||
margin-top: -1px;
|
||||
transition: box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
.switch-holder input[type="range"]::-webkit-slider-thumb {
|
||||
width: calc(var(--switch-height) / 2);
|
||||
-webkit-appearance: none;
|
||||
height: calc(var(--switch-width) - 20px);
|
||||
cursor: ew-resize;
|
||||
background: var(--switch-color);
|
||||
color: var(--switch-font-color);
|
||||
transition: box-shadow 0.2s ease-in-out;
|
||||
box-shadow: -340px 0 0 350px #4d4d4d, inset 0 0 0 80px #969696;
|
||||
position: relative;
|
||||
top: 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
// .switch-holder input[type="range"].on::-webkit-slider-thumb {
|
||||
// box-shadow: -340px 0 0 350px #4d4d4d, inset 0 0 0 80px #1c7ae2;
|
||||
// }
|
||||
.toggle {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
display: var(--show-switch);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.toggle > input.toggle-btn {
|
||||
display: none;
|
||||
}
|
||||
.toggle > input.toggle-btn + label {
|
||||
border: 1px solid #FFF;
|
||||
background: transparent;
|
||||
width: var(--switch-width);
|
||||
height: var(--switch-height);
|
||||
text-align:center;
|
||||
line-height: var(--switch-height);
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
color: var(--switch-font-color);
|
||||
display:block;
|
||||
font-size:var(--switch-labelSize);
|
||||
}
|
||||
.toggle > input.toggle-btn + label:active,
|
||||
.toggle > input.toggle-btn + label {
|
||||
background: var(--switch-color);
|
||||
border-color: var(--switch-color);
|
||||
}
|
||||
.toggle > input.toggle-btn + label> span:before {
|
||||
content: 'STOP';
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
}
|
||||
customElements.define('vertical-slider-cover-card', VerticalSliderCoverCard);
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
175
www/community/weather-card/icons/cloudy-day-1.svg
Normal file
175
www/community/weather-card/icons/cloudy-day-1.svg
Normal file
@@ -0,0 +1,175 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** CLOUDS
|
||||
*/
|
||||
@keyframes am-weather-cloud-2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(2px,0px);
|
||||
-moz-transform: translate(2px,0px);
|
||||
-ms-transform: translate(2px,0px);
|
||||
transform: translate(2px,0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-cloud-2 {
|
||||
-webkit-animation-name: am-weather-cloud-2;
|
||||
-moz-animation-name: am-weather-cloud-2;
|
||||
animation-name: am-weather-cloud-2;
|
||||
-webkit-animation-duration: 3s;
|
||||
-moz-animation-duration: 3s;
|
||||
animation-duration: 3s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** SUN
|
||||
*/
|
||||
@keyframes am-weather-sun {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-moz-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun {
|
||||
-webkit-animation-name: am-weather-sun;
|
||||
-moz-animation-name: am-weather-sun;
|
||||
-ms-animation-name: am-weather-sun;
|
||||
animation-name: am-weather-sun;
|
||||
-webkit-animation-duration: 9s;
|
||||
-moz-animation-duration: 9s;
|
||||
-ms-animation-duration: 9s;
|
||||
animation-duration: 9s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes am-weather-sun-shiny {
|
||||
0% {
|
||||
stroke-dasharray: 3px 10px;
|
||||
stroke-dashoffset: 0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 0.1px 10px;
|
||||
stroke-dashoffset: -1px;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dasharray: 3px 10px;
|
||||
stroke-dashoffset: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun-shiny line {
|
||||
-webkit-animation-name: am-weather-sun-shiny;
|
||||
-moz-animation-name: am-weather-sun-shiny;
|
||||
-ms-animation-name: am-weather-sun-shiny;
|
||||
animation-name: am-weather-sun-shiny;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="cloudy-day-1">
|
||||
<g transform="translate(20,10)">
|
||||
<g transform="translate(0,16)">
|
||||
<g class="am-weather-sun">
|
||||
<g>
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(45)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(90)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(135)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(180)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(225)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(270)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(315)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle cx="0" cy="0" fill="orange" r="5" stroke="orange" stroke-width="2"/>
|
||||
</g>
|
||||
<g class="am-weather-cloud-2">
|
||||
<path d="M47.7,35.4c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#C6DEFF" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.4 KiB |
176
www/community/weather-card/icons/cloudy-day-2.svg
Normal file
176
www/community/weather-card/icons/cloudy-day-2.svg
Normal file
@@ -0,0 +1,176 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** CLOUDS
|
||||
*/
|
||||
@keyframes am-weather-cloud-2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(2px,0px);
|
||||
-moz-transform: translate(2px,0px);
|
||||
-ms-transform: translate(2px,0px);
|
||||
transform: translate(2px,0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-cloud-2 {
|
||||
-webkit-animation-name: am-weather-cloud-2;
|
||||
-moz-animation-name: am-weather-cloud-2;
|
||||
animation-name: am-weather-cloud-2;
|
||||
-webkit-animation-duration: 3s;
|
||||
-moz-animation-duration: 3s;
|
||||
animation-duration: 3s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** SUN
|
||||
*/
|
||||
@keyframes am-weather-sun {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-moz-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun {
|
||||
-webkit-animation-name: am-weather-sun;
|
||||
-moz-animation-name: am-weather-sun;
|
||||
-ms-animation-name: am-weather-sun;
|
||||
animation-name: am-weather-sun;
|
||||
-webkit-animation-duration: 9s;
|
||||
-moz-animation-duration: 9s;
|
||||
-ms-animation-duration: 9s;
|
||||
animation-duration: 9s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes am-weather-sun-shiny {
|
||||
0% {
|
||||
stroke-dasharray: 3px 10px;
|
||||
stroke-dashoffset: 0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 0.1px 10px;
|
||||
stroke-dashoffset: -1px;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dasharray: 3px 10px;
|
||||
stroke-dashoffset: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun-shiny line {
|
||||
-webkit-animation-name: am-weather-sun-shiny;
|
||||
-moz-animation-name: am-weather-sun-shiny;
|
||||
-ms-animation-name: am-weather-sun-shiny;
|
||||
animation-name: am-weather-sun-shiny;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="cloudy-day-2">
|
||||
<g transform="translate(20,10)">
|
||||
<g transform="translate(0,16)">
|
||||
<g class="am-weather-sun">
|
||||
<g>
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(45)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(90)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(135)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(180)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(225)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(270)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(315)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle cx="0" cy="0" fill="orange" r="5" stroke="orange" stroke-width="2"/>
|
||||
</g>
|
||||
<g class="am-weather-cloud-2">
|
||||
<path d="M47.7,35.4c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#91C0F8" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.4 KiB |
175
www/community/weather-card/icons/cloudy-day-3.svg
Normal file
175
www/community/weather-card/icons/cloudy-day-3.svg
Normal file
@@ -0,0 +1,175 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** CLOUDS
|
||||
*/
|
||||
@keyframes am-weather-cloud-2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(2px,0px);
|
||||
-moz-transform: translate(2px,0px);
|
||||
-ms-transform: translate(2px,0px);
|
||||
transform: translate(2px,0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-cloud-2 {
|
||||
-webkit-animation-name: am-weather-cloud-2;
|
||||
-moz-animation-name: am-weather-cloud-2;
|
||||
animation-name: am-weather-cloud-2;
|
||||
-webkit-animation-duration: 3s;
|
||||
-moz-animation-duration: 3s;
|
||||
animation-duration: 3s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** SUN
|
||||
*/
|
||||
@keyframes am-weather-sun {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-moz-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun {
|
||||
-webkit-animation-name: am-weather-sun;
|
||||
-moz-animation-name: am-weather-sun;
|
||||
-ms-animation-name: am-weather-sun;
|
||||
animation-name: am-weather-sun;
|
||||
-webkit-animation-duration: 9s;
|
||||
-moz-animation-duration: 9s;
|
||||
-ms-animation-duration: 9s;
|
||||
animation-duration: 9s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes am-weather-sun-shiny {
|
||||
0% {
|
||||
stroke-dasharray: 3px 10px;
|
||||
stroke-dashoffset: 0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 0.1px 10px;
|
||||
stroke-dashoffset: -1px;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dasharray: 3px 10px;
|
||||
stroke-dashoffset: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun-shiny line {
|
||||
-webkit-animation-name: am-weather-sun-shiny;
|
||||
-moz-animation-name: am-weather-sun-shiny;
|
||||
-ms-animation-name: am-weather-sun-shiny;
|
||||
animation-name: am-weather-sun-shiny;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="cloudy-day-3">
|
||||
<g transform="translate(20,10)">
|
||||
<g transform="translate(0,16)">
|
||||
<g class="am-weather-sun">
|
||||
<g>
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(45)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(90)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(135)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(180)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(225)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(270)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(315)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle cx="0" cy="0" fill="orange" r="5" stroke="orange" stroke-width="2"/>
|
||||
</g>
|
||||
<g class="am-weather-cloud-2">
|
||||
<path d="M47.7,35.4c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#57A0EE" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.4 KiB |
198
www/community/weather-card/icons/cloudy-night-1.svg
Normal file
198
www/community/weather-card/icons/cloudy-night-1.svg
Normal file
@@ -0,0 +1,198 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** CLOUDS
|
||||
*/
|
||||
@keyframes am-weather-cloud-2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(2px,0px);
|
||||
-moz-transform: translate(2px,0px);
|
||||
-ms-transform: translate(2px,0px);
|
||||
transform: translate(2px,0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-cloud-2 {
|
||||
-webkit-animation-name: am-weather-cloud-2;
|
||||
-moz-animation-name: am-weather-cloud-2;
|
||||
animation-name: am-weather-cloud-2;
|
||||
-webkit-animation-duration: 3s;
|
||||
-moz-animation-duration: 3s;
|
||||
animation-duration: 3s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** MOON
|
||||
*/
|
||||
@keyframes am-weather-moon {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: rotate(15deg);
|
||||
-moz-transform: rotate(15deg);
|
||||
-ms-transform: rotate(15deg);
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-moon {
|
||||
-webkit-animation-name: am-weather-moon;
|
||||
-moz-animation-name: am-weather-moon;
|
||||
-ms-animation-name: am-weather-moon;
|
||||
animation-name: am-weather-moon;
|
||||
-webkit-animation-duration: 6s;
|
||||
-moz-animation-duration: 6s;
|
||||
-ms-animation-duration: 6s;
|
||||
animation-duration: 6s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
-moz-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
-ms-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
}
|
||||
|
||||
@keyframes am-weather-moon-star-1 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-moon-star-1 {
|
||||
-webkit-animation-name: am-weather-moon-star-1;
|
||||
-moz-animation-name: am-weather-moon-star-1;
|
||||
-ms-animation-name: am-weather-moon-star-1;
|
||||
animation-name: am-weather-moon-star-1;
|
||||
-webkit-animation-delay: 3s;
|
||||
-moz-animation-delay: 3s;
|
||||
-ms-animation-delay: 3s;
|
||||
animation-delay: 3s;
|
||||
-webkit-animation-duration: 5s;
|
||||
-moz-animation-duration: 5s;
|
||||
-ms-animation-duration: 5s;
|
||||
animation-duration: 5s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
-moz-animation-iteration-count: 1;
|
||||
-ms-animation-iteration-count: 1;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
@keyframes am-weather-moon-star-2 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-moon-star-2 {
|
||||
-webkit-animation-name: am-weather-moon-star-2;
|
||||
-moz-animation-name: am-weather-moon-star-2;
|
||||
-ms-animation-name: am-weather-moon-star-2;
|
||||
animation-name: am-weather-moon-star-2;
|
||||
-webkit-animation-delay: 5s;
|
||||
-moz-animation-delay: 5s;
|
||||
-ms-animation-delay: 5s;
|
||||
animation-delay: 5s;
|
||||
-webkit-animation-duration: 4s;
|
||||
-moz-animation-duration: 4s;
|
||||
-ms-animation-duration: 4s;
|
||||
animation-duration: 4s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
-moz-animation-iteration-count: 1;
|
||||
-ms-animation-iteration-count: 1;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="cloudy-night-1">
|
||||
<g transform="translate(20,10)">
|
||||
<g transform="translate(16,4), scale(0.8)">
|
||||
<g class="am-weather-moon-star-1">
|
||||
<polygon fill="orange" points="3.3,1.5 4,2.7 5.2,3.3 4,4 3.3,5.2 2.7,4 1.5,3.3 2.7,2.7" stroke="none" stroke-miterlimit="10"/>
|
||||
</g>
|
||||
<g class="am-weather-moon-star-2">
|
||||
<polygon fill="orange" points="3.3,1.5 4,2.7 5.2,3.3 4,4 3.3,5.2 2.7,4 1.5,3.3 2.7,2.7" stroke="none" stroke-miterlimit="10" transform="translate(20,10)"/>
|
||||
</g>
|
||||
<g class="am-weather-moon">
|
||||
<path d="M14.5,13.2c0-3.7,2-6.9,5-8.7 c-1.5-0.9-3.2-1.3-5-1.3c-5.5,0-10,4.5-10,10s4.5,10,10,10c1.8,0,3.5-0.5,5-1.3C16.5,20.2,14.5,16.9,14.5,13.2z" fill="orange" stroke="orange" stroke-linejoin="round" stroke-width="2"/>
|
||||
</g>
|
||||
</g>
|
||||
<g class="am-weather-cloud-2">
|
||||
<path d="M47.7,35.4 c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#C6DEFF" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.5 KiB |
198
www/community/weather-card/icons/cloudy-night-2.svg
Normal file
198
www/community/weather-card/icons/cloudy-night-2.svg
Normal file
@@ -0,0 +1,198 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** CLOUDS
|
||||
*/
|
||||
@keyframes am-weather-cloud-2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(2px,0px);
|
||||
-moz-transform: translate(2px,0px);
|
||||
-ms-transform: translate(2px,0px);
|
||||
transform: translate(2px,0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-cloud-2 {
|
||||
-webkit-animation-name: am-weather-cloud-2;
|
||||
-moz-animation-name: am-weather-cloud-2;
|
||||
animation-name: am-weather-cloud-2;
|
||||
-webkit-animation-duration: 3s;
|
||||
-moz-animation-duration: 3s;
|
||||
animation-duration: 3s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** MOON
|
||||
*/
|
||||
@keyframes am-weather-moon {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: rotate(15deg);
|
||||
-moz-transform: rotate(15deg);
|
||||
-ms-transform: rotate(15deg);
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-moon {
|
||||
-webkit-animation-name: am-weather-moon;
|
||||
-moz-animation-name: am-weather-moon;
|
||||
-ms-animation-name: am-weather-moon;
|
||||
animation-name: am-weather-moon;
|
||||
-webkit-animation-duration: 6s;
|
||||
-moz-animation-duration: 6s;
|
||||
-ms-animation-duration: 6s;
|
||||
animation-duration: 6s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
-moz-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
-ms-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
}
|
||||
|
||||
@keyframes am-weather-moon-star-1 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-moon-star-1 {
|
||||
-webkit-animation-name: am-weather-moon-star-1;
|
||||
-moz-animation-name: am-weather-moon-star-1;
|
||||
-ms-animation-name: am-weather-moon-star-1;
|
||||
animation-name: am-weather-moon-star-1;
|
||||
-webkit-animation-delay: 3s;
|
||||
-moz-animation-delay: 3s;
|
||||
-ms-animation-delay: 3s;
|
||||
animation-delay: 3s;
|
||||
-webkit-animation-duration: 5s;
|
||||
-moz-animation-duration: 5s;
|
||||
-ms-animation-duration: 5s;
|
||||
animation-duration: 5s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
-moz-animation-iteration-count: 1;
|
||||
-ms-animation-iteration-count: 1;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
@keyframes am-weather-moon-star-2 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-moon-star-2 {
|
||||
-webkit-animation-name: am-weather-moon-star-2;
|
||||
-moz-animation-name: am-weather-moon-star-2;
|
||||
-ms-animation-name: am-weather-moon-star-2;
|
||||
animation-name: am-weather-moon-star-2;
|
||||
-webkit-animation-delay: 5s;
|
||||
-moz-animation-delay: 5s;
|
||||
-ms-animation-delay: 5s;
|
||||
animation-delay: 5s;
|
||||
-webkit-animation-duration: 4s;
|
||||
-moz-animation-duration: 4s;
|
||||
-ms-animation-duration: 4s;
|
||||
animation-duration: 4s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
-moz-animation-iteration-count: 1;
|
||||
-ms-animation-iteration-count: 1;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="cloudy-night-2">
|
||||
<g transform="translate(20,10)">
|
||||
<g transform="translate(16,4), scale(0.8)">
|
||||
<g class="am-weather-moon-star-1">
|
||||
<polygon fill="orange" points="3.3,1.5 4,2.7 5.2,3.3 4,4 3.3,5.2 2.7,4 1.5,3.3 2.7,2.7" stroke="none" stroke-miterlimit="10"/>
|
||||
</g>
|
||||
<g class="am-weather-moon-star-2">
|
||||
<polygon fill="orange" points="3.3,1.5 4,2.7 5.2,3.3 4,4 3.3,5.2 2.7,4 1.5,3.3 2.7,2.7" stroke="none" stroke-miterlimit="10" transform="translate(20,10)"/>
|
||||
</g>
|
||||
<g class="am-weather-moon">
|
||||
<path d="M14.5,13.2c0-3.7,2-6.9,5-8.7 c-1.5-0.9-3.2-1.3-5-1.3c-5.5,0-10,4.5-10,10s4.5,10,10,10c1.8,0,3.5-0.5,5-1.3C16.5,20.2,14.5,16.9,14.5,13.2z" fill="orange" stroke="orange" stroke-linejoin="round" stroke-width="2"/>
|
||||
</g>
|
||||
</g>
|
||||
<g class="am-weather-cloud-2">
|
||||
<path d="M47.7,35.4 c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#91C0F8" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.5 KiB |
198
www/community/weather-card/icons/cloudy-night-3.svg
Normal file
198
www/community/weather-card/icons/cloudy-night-3.svg
Normal file
@@ -0,0 +1,198 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** CLOUDS
|
||||
*/
|
||||
@keyframes am-weather-cloud-2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(2px,0px);
|
||||
-moz-transform: translate(2px,0px);
|
||||
-ms-transform: translate(2px,0px);
|
||||
transform: translate(2px,0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-cloud-2 {
|
||||
-webkit-animation-name: am-weather-cloud-2;
|
||||
-moz-animation-name: am-weather-cloud-2;
|
||||
animation-name: am-weather-cloud-2;
|
||||
-webkit-animation-duration: 3s;
|
||||
-moz-animation-duration: 3s;
|
||||
animation-duration: 3s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** MOON
|
||||
*/
|
||||
@keyframes am-weather-moon {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: rotate(15deg);
|
||||
-moz-transform: rotate(15deg);
|
||||
-ms-transform: rotate(15deg);
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-moon {
|
||||
-webkit-animation-name: am-weather-moon;
|
||||
-moz-animation-name: am-weather-moon;
|
||||
-ms-animation-name: am-weather-moon;
|
||||
animation-name: am-weather-moon;
|
||||
-webkit-animation-duration: 6s;
|
||||
-moz-animation-duration: 6s;
|
||||
-ms-animation-duration: 6s;
|
||||
animation-duration: 6s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
-moz-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
-ms-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
}
|
||||
|
||||
@keyframes am-weather-moon-star-1 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-moon-star-1 {
|
||||
-webkit-animation-name: am-weather-moon-star-1;
|
||||
-moz-animation-name: am-weather-moon-star-1;
|
||||
-ms-animation-name: am-weather-moon-star-1;
|
||||
animation-name: am-weather-moon-star-1;
|
||||
-webkit-animation-delay: 3s;
|
||||
-moz-animation-delay: 3s;
|
||||
-ms-animation-delay: 3s;
|
||||
animation-delay: 3s;
|
||||
-webkit-animation-duration: 5s;
|
||||
-moz-animation-duration: 5s;
|
||||
-ms-animation-duration: 5s;
|
||||
animation-duration: 5s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
-moz-animation-iteration-count: 1;
|
||||
-ms-animation-iteration-count: 1;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
@keyframes am-weather-moon-star-2 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-moon-star-2 {
|
||||
-webkit-animation-name: am-weather-moon-star-2;
|
||||
-moz-animation-name: am-weather-moon-star-2;
|
||||
-ms-animation-name: am-weather-moon-star-2;
|
||||
animation-name: am-weather-moon-star-2;
|
||||
-webkit-animation-delay: 5s;
|
||||
-moz-animation-delay: 5s;
|
||||
-ms-animation-delay: 5s;
|
||||
animation-delay: 5s;
|
||||
-webkit-animation-duration: 4s;
|
||||
-moz-animation-duration: 4s;
|
||||
-ms-animation-duration: 4s;
|
||||
animation-duration: 4s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
-moz-animation-iteration-count: 1;
|
||||
-ms-animation-iteration-count: 1;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="cloudy-night-3">
|
||||
<g transform="translate(20,10)">
|
||||
<g transform="translate(16,4), scale(0.8)">
|
||||
<g class="am-weather-moon-star-1">
|
||||
<polygon fill="orange" points="3.3,1.5 4,2.7 5.2,3.3 4,4 3.3,5.2 2.7,4 1.5,3.3 2.7,2.7" stroke="none" stroke-miterlimit="10"/>
|
||||
</g>
|
||||
<g class="am-weather-moon-star-2">
|
||||
<polygon fill="orange" points="3.3,1.5 4,2.7 5.2,3.3 4,4 3.3,5.2 2.7,4 1.5,3.3 2.7,2.7" stroke="none" stroke-miterlimit="10" transform="translate(20,10)"/>
|
||||
</g>
|
||||
<g class="am-weather-moon">
|
||||
<path d="M14.5,13.2c0-3.7,2-6.9,5-8.7 c-1.5-0.9-3.2-1.3-5-1.3c-5.5,0-10,4.5-10,10s4.5,10,10,10c1.8,0,3.5-0.5,5-1.3C16.5,20.2,14.5,16.9,14.5,13.2z" fill="orange" stroke="orange" stroke-linejoin="round" stroke-width="2"/>
|
||||
</g>
|
||||
</g>
|
||||
<g class="am-weather-cloud-2">
|
||||
<path d="M47.7,35.4 c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#57A0EE" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.5 KiB |
500
www/community/weather-card/icons/cloudy.svg
Normal file
500
www/community/weather-card/icons/cloudy.svg
Normal file
@@ -0,0 +1,500 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** CLOUDS
|
||||
*/
|
||||
@keyframes am-weather-cloud-1 {
|
||||
0% {
|
||||
-webkit-transform: translate(-5px,0px);
|
||||
-moz-transform: translate(-5px,0px);
|
||||
-ms-transform: translate(-5px,0px);
|
||||
transform: translate(-5px,0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(10px,0px);
|
||||
-moz-transform: translate(10px,0px);
|
||||
-ms-transform: translate(10px,0px);
|
||||
transform: translate(10px,0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(-5px,0px);
|
||||
-moz-transform: translate(-5px,0px);
|
||||
-ms-transform: translate(-5px,0px);
|
||||
transform: translate(-5px,0px);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-cloud-1 {
|
||||
-webkit-animation-name: am-weather-cloud-1;
|
||||
-moz-animation-name: am-weather-cloud-1;
|
||||
animation-name: am-weather-cloud-1;
|
||||
-webkit-animation-duration: 7s;
|
||||
-moz-animation-duration: 7s;
|
||||
animation-duration: 7s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes am-weather-cloud-2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(2px,0px);
|
||||
-moz-transform: translate(2px,0px);
|
||||
-ms-transform: translate(2px,0px);
|
||||
transform: translate(2px,0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-cloud-2 {
|
||||
-webkit-animation-name: am-weather-cloud-2;
|
||||
-moz-animation-name: am-weather-cloud-2;
|
||||
animation-name: am-weather-cloud-2;
|
||||
-webkit-animation-duration: 3s;
|
||||
-moz-animation-duration: 3s;
|
||||
animation-duration: 3s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** SUN
|
||||
*/
|
||||
@keyframes am-weather-sun {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-moz-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun {
|
||||
-webkit-animation-name: am-weather-sun;
|
||||
-moz-animation-name: am-weather-sun;
|
||||
-ms-animation-name: am-weather-sun;
|
||||
animation-name: am-weather-sun;
|
||||
-webkit-animation-duration: 9s;
|
||||
-moz-animation-duration: 9s;
|
||||
-ms-animation-duration: 9s;
|
||||
animation-duration: 9s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes am-weather-sun-shiny {
|
||||
0% {
|
||||
stroke-dasharray: 3px 10px;
|
||||
stroke-dashoffset: 0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 0.1px 10px;
|
||||
stroke-dashoffset: -1px;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dasharray: 3px 10px;
|
||||
stroke-dashoffset: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun-shiny line {
|
||||
-webkit-animation-name: am-weather-sun-shiny;
|
||||
-moz-animation-name: am-weather-sun-shiny;
|
||||
-ms-animation-name: am-weather-sun-shiny;
|
||||
animation-name: am-weather-sun-shiny;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
** MOON
|
||||
*/
|
||||
@keyframes am-weather-moon {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: rotate(15deg);
|
||||
-moz-transform: rotate(15deg);
|
||||
-ms-transform: rotate(15deg);
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-moon {
|
||||
-webkit-animation-name: am-weather-moon;
|
||||
-moz-animation-name: am-weather-moon;
|
||||
-ms-animation-name: am-weather-moon;
|
||||
animation-name: am-weather-moon;
|
||||
-webkit-animation-duration: 6s;
|
||||
-moz-animation-duration: 6s;
|
||||
-ms-animation-duration: 6s;
|
||||
animation-duration: 6s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
-moz-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
-ms-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
}
|
||||
|
||||
@keyframes am-weather-moon-star-1 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-moon-star-1 {
|
||||
-webkit-animation-name: am-weather-moon-star-1;
|
||||
-moz-animation-name: am-weather-moon-star-1;
|
||||
-ms-animation-name: am-weather-moon-star-1;
|
||||
animation-name: am-weather-moon-star-1;
|
||||
-webkit-animation-delay: 3s;
|
||||
-moz-animation-delay: 3s;
|
||||
-ms-animation-delay: 3s;
|
||||
animation-delay: 3s;
|
||||
-webkit-animation-duration: 5s;
|
||||
-moz-animation-duration: 5s;
|
||||
-ms-animation-duration: 5s;
|
||||
animation-duration: 5s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
-moz-animation-iteration-count: 1;
|
||||
-ms-animation-iteration-count: 1;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
@keyframes am-weather-moon-star-2 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-moon-star-2 {
|
||||
-webkit-animation-name: am-weather-moon-star-2;
|
||||
-moz-animation-name: am-weather-moon-star-2;
|
||||
-ms-animation-name: am-weather-moon-star-2;
|
||||
animation-name: am-weather-moon-star-2;
|
||||
-webkit-animation-delay: 5s;
|
||||
-moz-animation-delay: 5s;
|
||||
-ms-animation-delay: 5s;
|
||||
animation-delay: 5s;
|
||||
-webkit-animation-duration: 4s;
|
||||
-moz-animation-duration: 4s;
|
||||
-ms-animation-duration: 4s;
|
||||
animation-duration: 4s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
-moz-animation-iteration-count: 1;
|
||||
-ms-animation-iteration-count: 1;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
** RAIN
|
||||
*/
|
||||
@keyframes am-weather-rain {
|
||||
0% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dashoffset: -100;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-rain-1 {
|
||||
-webkit-animation-name: am-weather-rain;
|
||||
-moz-animation-name: am-weather-rain;
|
||||
-ms-animation-name: am-weather-rain;
|
||||
animation-name: am-weather-rain;
|
||||
-webkit-animation-duration: 8s;
|
||||
-moz-animation-duration: 8s;
|
||||
-ms-animation-duration: 8s;
|
||||
animation-duration: 8s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.am-weather-rain-2 {
|
||||
-webkit-animation-name: am-weather-rain;
|
||||
-moz-animation-name: am-weather-rain;
|
||||
-ms-animation-name: am-weather-rain;
|
||||
animation-name: am-weather-rain;
|
||||
-webkit-animation-delay: 0.25s;
|
||||
-moz-animation-delay: 0.25s;
|
||||
-ms-animation-delay: 0.25s;
|
||||
animation-delay: 0.25s;
|
||||
-webkit-animation-duration: 8s;
|
||||
-moz-animation-duration: 8s;
|
||||
-ms-animation-duration: 8s;
|
||||
animation-duration: 8s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** SNOW
|
||||
*/
|
||||
@keyframes am-weather-snow {
|
||||
0% {
|
||||
-webkit-transform: translateX(0) translateY(0);
|
||||
-moz-transform: translateX(0) translateY(0);
|
||||
-ms-transform: translateX(0) translateY(0);
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
|
||||
33.33% {
|
||||
-webkit-transform: translateX(-1.2px) translateY(2px);
|
||||
-moz-transform: translateX(-1.2px) translateY(2px);
|
||||
-ms-transform: translateX(-1.2px) translateY(2px);
|
||||
transform: translateX(-1.2px) translateY(2px);
|
||||
}
|
||||
|
||||
66.66% {
|
||||
-webkit-transform: translateX(1.4px) translateY(4px);
|
||||
-moz-transform: translateX(1.4px) translateY(4px);
|
||||
-ms-transform: translateX(1.4px) translateY(4px);
|
||||
transform: translateX(1.4px) translateY(4px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(-1.6px) translateY(6px);
|
||||
-moz-transform: translateX(-1.6px) translateY(6px);
|
||||
-ms-transform: translateX(-1.6px) translateY(6px);
|
||||
transform: translateX(-1.6px) translateY(6px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes am-weather-snow-reverse {
|
||||
0% {
|
||||
-webkit-transform: translateX(0) translateY(0);
|
||||
-moz-transform: translateX(0) translateY(0);
|
||||
-ms-transform: translateX(0) translateY(0);
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
|
||||
33.33% {
|
||||
-webkit-transform: translateX(1.2px) translateY(2px);
|
||||
-moz-transform: translateX(1.2px) translateY(2px);
|
||||
-ms-transform: translateX(1.2px) translateY(2px);
|
||||
transform: translateX(1.2px) translateY(2px);
|
||||
}
|
||||
|
||||
66.66% {
|
||||
-webkit-transform: translateX(-1.4px) translateY(4px);
|
||||
-moz-transform: translateX(-1.4px) translateY(4px);
|
||||
-ms-transform: translateX(-1.4px) translateY(4px);
|
||||
transform: translateX(-1.4px) translateY(4px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(1.6px) translateY(6px);
|
||||
-moz-transform: translateX(1.6px) translateY(6px);
|
||||
-ms-transform: translateX(1.6px) translateY(6px);
|
||||
transform: translateX(1.6px) translateY(6px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-snow-1 {
|
||||
-webkit-animation-name: am-weather-snow;
|
||||
-moz-animation-name: am-weather-snow;
|
||||
-ms-animation-name: am-weather-snow;
|
||||
animation-name: am-weather-snow;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.am-weather-snow-2 {
|
||||
-webkit-animation-name: am-weather-snow;
|
||||
-moz-animation-name: am-weather-snow;
|
||||
-ms-animation-name: am-weather-snow;
|
||||
animation-name: am-weather-snow;
|
||||
-webkit-animation-delay: 1.2s;
|
||||
-moz-animation-delay: 1.2s;
|
||||
-ms-animation-delay: 1.2s;
|
||||
animation-delay: 1.2s;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.am-weather-snow-3 {
|
||||
-webkit-animation-name: am-weather-snow-reverse;
|
||||
-moz-animation-name: am-weather-snow-reverse;
|
||||
-ms-animation-name: am-weather-snow-reverse;
|
||||
animation-name: am-weather-snow-reverse;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** EASING
|
||||
*/
|
||||
.am-weather-easing-ease-in-out {
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
-moz-animation-timing-function: ease-in-out;
|
||||
-ms-animation-timing-function: ease-in-out;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="cloudy">
|
||||
<g transform="translate(20,10)">
|
||||
<g class="am-weather-cloud-1">
|
||||
<path d="M47.7,35.4 c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#91C0F8" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-10,-8), scale(0.6)"/>
|
||||
</g>
|
||||
<g class="am-weather-cloud-2">
|
||||
<path d="M47.7,35.4 c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#57A0EE" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 15 KiB |
521
www/community/weather-card/icons/day.svg
Normal file
521
www/community/weather-card/icons/day.svg
Normal file
@@ -0,0 +1,521 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** CLOUDS
|
||||
*/
|
||||
@keyframes am-weather-cloud-1 {
|
||||
0% {
|
||||
-webkit-transform: translate(-5px,0px);
|
||||
-moz-transform: translate(-5px,0px);
|
||||
-ms-transform: translate(-5px,0px);
|
||||
transform: translate(-5px,0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(10px,0px);
|
||||
-moz-transform: translate(10px,0px);
|
||||
-ms-transform: translate(10px,0px);
|
||||
transform: translate(10px,0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(-5px,0px);
|
||||
-moz-transform: translate(-5px,0px);
|
||||
-ms-transform: translate(-5px,0px);
|
||||
transform: translate(-5px,0px);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-cloud-1 {
|
||||
-webkit-animation-name: am-weather-cloud-1;
|
||||
-moz-animation-name: am-weather-cloud-1;
|
||||
animation-name: am-weather-cloud-1;
|
||||
-webkit-animation-duration: 7s;
|
||||
-moz-animation-duration: 7s;
|
||||
animation-duration: 7s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes am-weather-cloud-2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(2px,0px);
|
||||
-moz-transform: translate(2px,0px);
|
||||
-ms-transform: translate(2px,0px);
|
||||
transform: translate(2px,0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-cloud-2 {
|
||||
-webkit-animation-name: am-weather-cloud-2;
|
||||
-moz-animation-name: am-weather-cloud-2;
|
||||
animation-name: am-weather-cloud-2;
|
||||
-webkit-animation-duration: 3s;
|
||||
-moz-animation-duration: 3s;
|
||||
animation-duration: 3s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** SUN
|
||||
*/
|
||||
@keyframes am-weather-sun {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-moz-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun {
|
||||
-webkit-animation-name: am-weather-sun;
|
||||
-moz-animation-name: am-weather-sun;
|
||||
-ms-animation-name: am-weather-sun;
|
||||
animation-name: am-weather-sun;
|
||||
-webkit-animation-duration: 9s;
|
||||
-moz-animation-duration: 9s;
|
||||
-ms-animation-duration: 9s;
|
||||
animation-duration: 9s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes am-weather-sun-shiny {
|
||||
0% {
|
||||
stroke-dasharray: 3px 10px;
|
||||
stroke-dashoffset: 0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 0.1px 10px;
|
||||
stroke-dashoffset: -1px;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dasharray: 3px 10px;
|
||||
stroke-dashoffset: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun-shiny line {
|
||||
-webkit-animation-name: am-weather-sun-shiny;
|
||||
-moz-animation-name: am-weather-sun-shiny;
|
||||
-ms-animation-name: am-weather-sun-shiny;
|
||||
animation-name: am-weather-sun-shiny;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
** MOON
|
||||
*/
|
||||
@keyframes am-weather-moon {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: rotate(15deg);
|
||||
-moz-transform: rotate(15deg);
|
||||
-ms-transform: rotate(15deg);
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-moon {
|
||||
-webkit-animation-name: am-weather-moon;
|
||||
-moz-animation-name: am-weather-moon;
|
||||
-ms-animation-name: am-weather-moon;
|
||||
animation-name: am-weather-moon;
|
||||
-webkit-animation-duration: 6s;
|
||||
-moz-animation-duration: 6s;
|
||||
-ms-animation-duration: 6s;
|
||||
animation-duration: 6s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
-moz-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
-ms-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
}
|
||||
|
||||
@keyframes am-weather-moon-star-1 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-moon-star-1 {
|
||||
-webkit-animation-name: am-weather-moon-star-1;
|
||||
-moz-animation-name: am-weather-moon-star-1;
|
||||
-ms-animation-name: am-weather-moon-star-1;
|
||||
animation-name: am-weather-moon-star-1;
|
||||
-webkit-animation-delay: 3s;
|
||||
-moz-animation-delay: 3s;
|
||||
-ms-animation-delay: 3s;
|
||||
animation-delay: 3s;
|
||||
-webkit-animation-duration: 5s;
|
||||
-moz-animation-duration: 5s;
|
||||
-ms-animation-duration: 5s;
|
||||
animation-duration: 5s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
-moz-animation-iteration-count: 1;
|
||||
-ms-animation-iteration-count: 1;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
@keyframes am-weather-moon-star-2 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-moon-star-2 {
|
||||
-webkit-animation-name: am-weather-moon-star-2;
|
||||
-moz-animation-name: am-weather-moon-star-2;
|
||||
-ms-animation-name: am-weather-moon-star-2;
|
||||
animation-name: am-weather-moon-star-2;
|
||||
-webkit-animation-delay: 5s;
|
||||
-moz-animation-delay: 5s;
|
||||
-ms-animation-delay: 5s;
|
||||
animation-delay: 5s;
|
||||
-webkit-animation-duration: 4s;
|
||||
-moz-animation-duration: 4s;
|
||||
-ms-animation-duration: 4s;
|
||||
animation-duration: 4s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
-moz-animation-iteration-count: 1;
|
||||
-ms-animation-iteration-count: 1;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
** RAIN
|
||||
*/
|
||||
@keyframes am-weather-rain {
|
||||
0% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dashoffset: -100;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-rain-1 {
|
||||
-webkit-animation-name: am-weather-rain;
|
||||
-moz-animation-name: am-weather-rain;
|
||||
-ms-animation-name: am-weather-rain;
|
||||
animation-name: am-weather-rain;
|
||||
-webkit-animation-duration: 8s;
|
||||
-moz-animation-duration: 8s;
|
||||
-ms-animation-duration: 8s;
|
||||
animation-duration: 8s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.am-weather-rain-2 {
|
||||
-webkit-animation-name: am-weather-rain;
|
||||
-moz-animation-name: am-weather-rain;
|
||||
-ms-animation-name: am-weather-rain;
|
||||
animation-name: am-weather-rain;
|
||||
-webkit-animation-delay: 0.25s;
|
||||
-moz-animation-delay: 0.25s;
|
||||
-ms-animation-delay: 0.25s;
|
||||
animation-delay: 0.25s;
|
||||
-webkit-animation-duration: 8s;
|
||||
-moz-animation-duration: 8s;
|
||||
-ms-animation-duration: 8s;
|
||||
animation-duration: 8s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** SNOW
|
||||
*/
|
||||
@keyframes am-weather-snow {
|
||||
0% {
|
||||
-webkit-transform: translateX(0) translateY(0);
|
||||
-moz-transform: translateX(0) translateY(0);
|
||||
-ms-transform: translateX(0) translateY(0);
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
|
||||
33.33% {
|
||||
-webkit-transform: translateX(-1.2px) translateY(2px);
|
||||
-moz-transform: translateX(-1.2px) translateY(2px);
|
||||
-ms-transform: translateX(-1.2px) translateY(2px);
|
||||
transform: translateX(-1.2px) translateY(2px);
|
||||
}
|
||||
|
||||
66.66% {
|
||||
-webkit-transform: translateX(1.4px) translateY(4px);
|
||||
-moz-transform: translateX(1.4px) translateY(4px);
|
||||
-ms-transform: translateX(1.4px) translateY(4px);
|
||||
transform: translateX(1.4px) translateY(4px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(-1.6px) translateY(6px);
|
||||
-moz-transform: translateX(-1.6px) translateY(6px);
|
||||
-ms-transform: translateX(-1.6px) translateY(6px);
|
||||
transform: translateX(-1.6px) translateY(6px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes am-weather-snow-reverse {
|
||||
0% {
|
||||
-webkit-transform: translateX(0) translateY(0);
|
||||
-moz-transform: translateX(0) translateY(0);
|
||||
-ms-transform: translateX(0) translateY(0);
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
|
||||
33.33% {
|
||||
-webkit-transform: translateX(1.2px) translateY(2px);
|
||||
-moz-transform: translateX(1.2px) translateY(2px);
|
||||
-ms-transform: translateX(1.2px) translateY(2px);
|
||||
transform: translateX(1.2px) translateY(2px);
|
||||
}
|
||||
|
||||
66.66% {
|
||||
-webkit-transform: translateX(-1.4px) translateY(4px);
|
||||
-moz-transform: translateX(-1.4px) translateY(4px);
|
||||
-ms-transform: translateX(-1.4px) translateY(4px);
|
||||
transform: translateX(-1.4px) translateY(4px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(1.6px) translateY(6px);
|
||||
-moz-transform: translateX(1.6px) translateY(6px);
|
||||
-ms-transform: translateX(1.6px) translateY(6px);
|
||||
transform: translateX(1.6px) translateY(6px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-snow-1 {
|
||||
-webkit-animation-name: am-weather-snow;
|
||||
-moz-animation-name: am-weather-snow;
|
||||
-ms-animation-name: am-weather-snow;
|
||||
animation-name: am-weather-snow;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.am-weather-snow-2 {
|
||||
-webkit-animation-name: am-weather-snow;
|
||||
-moz-animation-name: am-weather-snow;
|
||||
-ms-animation-name: am-weather-snow;
|
||||
animation-name: am-weather-snow;
|
||||
-webkit-animation-delay: 1.2s;
|
||||
-moz-animation-delay: 1.2s;
|
||||
-ms-animation-delay: 1.2s;
|
||||
animation-delay: 1.2s;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.am-weather-snow-3 {
|
||||
-webkit-animation-name: am-weather-snow-reverse;
|
||||
-moz-animation-name: am-weather-snow-reverse;
|
||||
-ms-animation-name: am-weather-snow-reverse;
|
||||
animation-name: am-weather-snow-reverse;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** EASING
|
||||
*/
|
||||
.am-weather-easing-ease-in-out {
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
-moz-animation-timing-function: ease-in-out;
|
||||
-ms-animation-timing-function: ease-in-out;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="day">
|
||||
<g transform="translate(32,32)">
|
||||
<g class="am-weather-sun am-weather-sun-shiny am-weather-easing-ease-in-out">
|
||||
<g>
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
|
||||
</g>
|
||||
<g transform="rotate(45)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
|
||||
</g>
|
||||
<g transform="rotate(90)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
|
||||
</g>
|
||||
<g transform="rotate(135)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
|
||||
</g>
|
||||
<g transform="rotate(180)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
|
||||
</g>
|
||||
<g transform="rotate(225)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
|
||||
</g>
|
||||
<g transform="rotate(270)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
|
||||
</g>
|
||||
<g transform="rotate(315)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3" />
|
||||
</g>
|
||||
</g>
|
||||
<circle cx="0" cy="0" fill="orange" r="5" stroke="orange" stroke-width="2"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 16 KiB |
503
www/community/weather-card/icons/night.svg
Normal file
503
www/community/weather-card/icons/night.svg
Normal file
@@ -0,0 +1,503 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** CLOUDS
|
||||
*/
|
||||
@keyframes am-weather-cloud-1 {
|
||||
0% {
|
||||
-webkit-transform: translate(-5px,0px);
|
||||
-moz-transform: translate(-5px,0px);
|
||||
-ms-transform: translate(-5px,0px);
|
||||
transform: translate(-5px,0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(10px,0px);
|
||||
-moz-transform: translate(10px,0px);
|
||||
-ms-transform: translate(10px,0px);
|
||||
transform: translate(10px,0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(-5px,0px);
|
||||
-moz-transform: translate(-5px,0px);
|
||||
-ms-transform: translate(-5px,0px);
|
||||
transform: translate(-5px,0px);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-cloud-1 {
|
||||
-webkit-animation-name: am-weather-cloud-1;
|
||||
-moz-animation-name: am-weather-cloud-1;
|
||||
animation-name: am-weather-cloud-1;
|
||||
-webkit-animation-duration: 7s;
|
||||
-moz-animation-duration: 7s;
|
||||
animation-duration: 7s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes am-weather-cloud-2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(2px,0px);
|
||||
-moz-transform: translate(2px,0px);
|
||||
-ms-transform: translate(2px,0px);
|
||||
transform: translate(2px,0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-cloud-2 {
|
||||
-webkit-animation-name: am-weather-cloud-2;
|
||||
-moz-animation-name: am-weather-cloud-2;
|
||||
animation-name: am-weather-cloud-2;
|
||||
-webkit-animation-duration: 3s;
|
||||
-moz-animation-duration: 3s;
|
||||
animation-duration: 3s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** SUN
|
||||
*/
|
||||
@keyframes am-weather-sun {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-moz-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun {
|
||||
-webkit-animation-name: am-weather-sun;
|
||||
-moz-animation-name: am-weather-sun;
|
||||
-ms-animation-name: am-weather-sun;
|
||||
animation-name: am-weather-sun;
|
||||
-webkit-animation-duration: 9s;
|
||||
-moz-animation-duration: 9s;
|
||||
-ms-animation-duration: 9s;
|
||||
animation-duration: 9s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes am-weather-sun-shiny {
|
||||
0% {
|
||||
stroke-dasharray: 3px 10px;
|
||||
stroke-dashoffset: 0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 0.1px 10px;
|
||||
stroke-dashoffset: -1px;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dasharray: 3px 10px;
|
||||
stroke-dashoffset: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun-shiny line {
|
||||
-webkit-animation-name: am-weather-sun-shiny;
|
||||
-moz-animation-name: am-weather-sun-shiny;
|
||||
-ms-animation-name: am-weather-sun-shiny;
|
||||
animation-name: am-weather-sun-shiny;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
** MOON
|
||||
*/
|
||||
@keyframes am-weather-moon {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: rotate(15deg);
|
||||
-moz-transform: rotate(15deg);
|
||||
-ms-transform: rotate(15deg);
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-moon {
|
||||
-webkit-animation-name: am-weather-moon;
|
||||
-moz-animation-name: am-weather-moon;
|
||||
-ms-animation-name: am-weather-moon;
|
||||
animation-name: am-weather-moon;
|
||||
-webkit-animation-duration: 6s;
|
||||
-moz-animation-duration: 6s;
|
||||
-ms-animation-duration: 6s;
|
||||
animation-duration: 6s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
-moz-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
-ms-transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
transform-origin: 12.5px 15.15px 0; /* TODO FF CENTER ISSUE */
|
||||
}
|
||||
|
||||
@keyframes am-weather-moon-star-1 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-moon-star-1 {
|
||||
-webkit-animation-name: am-weather-moon-star-1;
|
||||
-moz-animation-name: am-weather-moon-star-1;
|
||||
-ms-animation-name: am-weather-moon-star-1;
|
||||
animation-name: am-weather-moon-star-1;
|
||||
-webkit-animation-delay: 3s;
|
||||
-moz-animation-delay: 3s;
|
||||
-ms-animation-delay: 3s;
|
||||
animation-delay: 3s;
|
||||
-webkit-animation-duration: 5s;
|
||||
-moz-animation-duration: 5s;
|
||||
-ms-animation-duration: 5s;
|
||||
animation-duration: 5s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
-moz-animation-iteration-count: 1;
|
||||
-ms-animation-iteration-count: 1;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
@keyframes am-weather-moon-star-2 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-moon-star-2 {
|
||||
-webkit-animation-name: am-weather-moon-star-2;
|
||||
-moz-animation-name: am-weather-moon-star-2;
|
||||
-ms-animation-name: am-weather-moon-star-2;
|
||||
animation-name: am-weather-moon-star-2;
|
||||
-webkit-animation-delay: 5s;
|
||||
-moz-animation-delay: 5s;
|
||||
-ms-animation-delay: 5s;
|
||||
animation-delay: 5s;
|
||||
-webkit-animation-duration: 4s;
|
||||
-moz-animation-duration: 4s;
|
||||
-ms-animation-duration: 4s;
|
||||
animation-duration: 4s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
-moz-animation-iteration-count: 1;
|
||||
-ms-animation-iteration-count: 1;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
** RAIN
|
||||
*/
|
||||
@keyframes am-weather-rain {
|
||||
0% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dashoffset: -100;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-rain-1 {
|
||||
-webkit-animation-name: am-weather-rain;
|
||||
-moz-animation-name: am-weather-rain;
|
||||
-ms-animation-name: am-weather-rain;
|
||||
animation-name: am-weather-rain;
|
||||
-webkit-animation-duration: 8s;
|
||||
-moz-animation-duration: 8s;
|
||||
-ms-animation-duration: 8s;
|
||||
animation-duration: 8s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.am-weather-rain-2 {
|
||||
-webkit-animation-name: am-weather-rain;
|
||||
-moz-animation-name: am-weather-rain;
|
||||
-ms-animation-name: am-weather-rain;
|
||||
animation-name: am-weather-rain;
|
||||
-webkit-animation-delay: 0.25s;
|
||||
-moz-animation-delay: 0.25s;
|
||||
-ms-animation-delay: 0.25s;
|
||||
animation-delay: 0.25s;
|
||||
-webkit-animation-duration: 8s;
|
||||
-moz-animation-duration: 8s;
|
||||
-ms-animation-duration: 8s;
|
||||
animation-duration: 8s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** SNOW
|
||||
*/
|
||||
@keyframes am-weather-snow {
|
||||
0% {
|
||||
-webkit-transform: translateX(0) translateY(0);
|
||||
-moz-transform: translateX(0) translateY(0);
|
||||
-ms-transform: translateX(0) translateY(0);
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
|
||||
33.33% {
|
||||
-webkit-transform: translateX(-1.2px) translateY(2px);
|
||||
-moz-transform: translateX(-1.2px) translateY(2px);
|
||||
-ms-transform: translateX(-1.2px) translateY(2px);
|
||||
transform: translateX(-1.2px) translateY(2px);
|
||||
}
|
||||
|
||||
66.66% {
|
||||
-webkit-transform: translateX(1.4px) translateY(4px);
|
||||
-moz-transform: translateX(1.4px) translateY(4px);
|
||||
-ms-transform: translateX(1.4px) translateY(4px);
|
||||
transform: translateX(1.4px) translateY(4px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(-1.6px) translateY(6px);
|
||||
-moz-transform: translateX(-1.6px) translateY(6px);
|
||||
-ms-transform: translateX(-1.6px) translateY(6px);
|
||||
transform: translateX(-1.6px) translateY(6px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes am-weather-snow-reverse {
|
||||
0% {
|
||||
-webkit-transform: translateX(0) translateY(0);
|
||||
-moz-transform: translateX(0) translateY(0);
|
||||
-ms-transform: translateX(0) translateY(0);
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
|
||||
33.33% {
|
||||
-webkit-transform: translateX(1.2px) translateY(2px);
|
||||
-moz-transform: translateX(1.2px) translateY(2px);
|
||||
-ms-transform: translateX(1.2px) translateY(2px);
|
||||
transform: translateX(1.2px) translateY(2px);
|
||||
}
|
||||
|
||||
66.66% {
|
||||
-webkit-transform: translateX(-1.4px) translateY(4px);
|
||||
-moz-transform: translateX(-1.4px) translateY(4px);
|
||||
-ms-transform: translateX(-1.4px) translateY(4px);
|
||||
transform: translateX(-1.4px) translateY(4px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(1.6px) translateY(6px);
|
||||
-moz-transform: translateX(1.6px) translateY(6px);
|
||||
-ms-transform: translateX(1.6px) translateY(6px);
|
||||
transform: translateX(1.6px) translateY(6px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-snow-1 {
|
||||
-webkit-animation-name: am-weather-snow;
|
||||
-moz-animation-name: am-weather-snow;
|
||||
-ms-animation-name: am-weather-snow;
|
||||
animation-name: am-weather-snow;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.am-weather-snow-2 {
|
||||
-webkit-animation-name: am-weather-snow;
|
||||
-moz-animation-name: am-weather-snow;
|
||||
-ms-animation-name: am-weather-snow;
|
||||
animation-name: am-weather-snow;
|
||||
-webkit-animation-delay: 1.2s;
|
||||
-moz-animation-delay: 1.2s;
|
||||
-ms-animation-delay: 1.2s;
|
||||
animation-delay: 1.2s;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.am-weather-snow-3 {
|
||||
-webkit-animation-name: am-weather-snow-reverse;
|
||||
-moz-animation-name: am-weather-snow-reverse;
|
||||
-ms-animation-name: am-weather-snow-reverse;
|
||||
animation-name: am-weather-snow-reverse;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** EASING
|
||||
*/
|
||||
.am-weather-easing-ease-in-out {
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
-moz-animation-timing-function: ease-in-out;
|
||||
-ms-animation-timing-function: ease-in-out;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="night">
|
||||
<g transform="translate(20,20)">
|
||||
<g class="am-weather-moon-star-1">
|
||||
<polygon fill="orange" points="3.3,1.5 4,2.7 5.2,3.3 4,4 3.3,5.2 2.7,4 1.5,3.3 2.7,2.7" stroke="none" stroke-miterlimit="10"/>
|
||||
</g>
|
||||
<g class="am-weather-moon-star-2">
|
||||
<polygon fill="orange" points="3.3,1.5 4,2.7 5.2,3.3 4,4 3.3,5.2 2.7,4 1.5,3.3 2.7,2.7" stroke="none" stroke-miterlimit="10" transform="translate(20,10)"/>
|
||||
</g>
|
||||
<g class="am-weather-moon">
|
||||
<path d="M14.5,13.2c0-3.7,2-6.9,5-8.7 c-1.5-0.9-3.2-1.3-5-1.3c-5.5,0-10,4.5-10,10s4.5,10,10,10c1.8,0,3.5-0.5,5-1.3C16.5,20.2,14.5,16.9,14.5,13.2z" fill="orange" stroke="orange" stroke-linejoin="round" stroke-width="2"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 15 KiB |
157
www/community/weather-card/icons/rainy-1.svg
Normal file
157
www/community/weather-card/icons/rainy-1.svg
Normal file
@@ -0,0 +1,157 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** SUN
|
||||
*/
|
||||
@keyframes am-weather-sun {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-moz-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun {
|
||||
-webkit-animation-name: am-weather-sun;
|
||||
-moz-animation-name: am-weather-sun;
|
||||
-ms-animation-name: am-weather-sun;
|
||||
animation-name: am-weather-sun;
|
||||
-webkit-animation-duration: 9s;
|
||||
-moz-animation-duration: 9s;
|
||||
-ms-animation-duration: 9s;
|
||||
animation-duration: 9s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** RAIN
|
||||
*/
|
||||
@keyframes am-weather-rain {
|
||||
0% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dashoffset: -100;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-rain-1 {
|
||||
-webkit-animation-name: am-weather-rain;
|
||||
-moz-animation-name: am-weather-rain;
|
||||
-ms-animation-name: am-weather-rain;
|
||||
animation-name: am-weather-rain;
|
||||
-webkit-animation-duration: 8s;
|
||||
-moz-animation-duration: 8s;
|
||||
-ms-animation-duration: 8s;
|
||||
animation-duration: 8s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.am-weather-rain-2 {
|
||||
-webkit-animation-name: am-weather-rain;
|
||||
-moz-animation-name: am-weather-rain;
|
||||
-ms-animation-name: am-weather-rain;
|
||||
animation-name: am-weather-rain;
|
||||
-webkit-animation-delay: 0.25s;
|
||||
-moz-animation-delay: 0.25s;
|
||||
-ms-animation-delay: 0.25s;
|
||||
animation-delay: 0.25s;
|
||||
-webkit-animation-duration: 8s;
|
||||
-moz-animation-duration: 8s;
|
||||
-ms-animation-duration: 8s;
|
||||
animation-duration: 8s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="rainy-1">
|
||||
<g transform="translate(20,10)">
|
||||
<g transform="translate(0,16), scale(1.2)">
|
||||
<g class="am-weather-sun">
|
||||
<g>
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(45)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(90)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(135)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(180)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(225)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(270)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(315)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle cx="0" cy="0" fill="orange" r="5" stroke="orange" stroke-width="2"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M47.7,35.4c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#57A0EE" stroke="white" stroke-linejoin="round" stroke-width="1.5" transform="translate(-15,-5), scale(0.85)"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(34,46), rotate(10)">
|
||||
<line class="am-weather-rain-1" fill="none" stroke="#91C0F8" stroke-dasharray="4,7" stroke-linecap="round" stroke-width="2" transform="translate(-6,1)" x1="0" x2="0" y1="0" y2="8" />
|
||||
<line class="am-weather-rain-2" fill="none" stroke="#91C0F8" stroke-dasharray="4,7" stroke-linecap="round" stroke-width="2" transform="translate(0,-1)" x1="0" x2="0" y1="0" y2="8" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.4 KiB |
133
www/community/weather-card/icons/rainy-2.svg
Normal file
133
www/community/weather-card/icons/rainy-2.svg
Normal file
@@ -0,0 +1,133 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** SUN
|
||||
*/
|
||||
@keyframes am-weather-sun {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-moz-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun {
|
||||
-webkit-animation-name: am-weather-sun;
|
||||
-moz-animation-name: am-weather-sun;
|
||||
-ms-animation-name: am-weather-sun;
|
||||
animation-name: am-weather-sun;
|
||||
-webkit-animation-duration: 9s;
|
||||
-moz-animation-duration: 9s;
|
||||
-ms-animation-duration: 9s;
|
||||
animation-duration: 9s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** RAIN
|
||||
*/
|
||||
@keyframes am-weather-rain {
|
||||
0% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dashoffset: -100;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-rain-1 {
|
||||
-webkit-animation-name: am-weather-rain;
|
||||
-moz-animation-name: am-weather-rain;
|
||||
-ms-animation-name: am-weather-rain;
|
||||
animation-name: am-weather-rain;
|
||||
-webkit-animation-duration: 8s;
|
||||
-moz-animation-duration: 8s;
|
||||
-ms-animation-duration: 8s;
|
||||
animation-duration: 8s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="rainy-2">
|
||||
<g transform="translate(20,10)">
|
||||
<g transform="translate(0,16)">
|
||||
<g class="am-weather-sun">
|
||||
<g>
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(45)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(90)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(135)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(180)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(225)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(270)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(315)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle cx="0" cy="0" fill="orange" r="5" stroke="orange" stroke-width="2"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M47.7,35.4c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#57A0EE" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(37,45), rotate(10)">
|
||||
<line class="am-weather-rain-1" fill="none" stroke="#91C0F8" stroke-dasharray="4,7" stroke-linecap="round" stroke-width="2" transform="translate(-6,1)" x1="0" x2="0" y1="0" y2="8" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.3 KiB |
157
www/community/weather-card/icons/rainy-3.svg
Normal file
157
www/community/weather-card/icons/rainy-3.svg
Normal file
@@ -0,0 +1,157 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** SUN
|
||||
*/
|
||||
@keyframes am-weather-sun {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-moz-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun {
|
||||
-webkit-animation-name: am-weather-sun;
|
||||
-moz-animation-name: am-weather-sun;
|
||||
-ms-animation-name: am-weather-sun;
|
||||
animation-name: am-weather-sun;
|
||||
-webkit-animation-duration: 9s;
|
||||
-moz-animation-duration: 9s;
|
||||
-ms-animation-duration: 9s;
|
||||
animation-duration: 9s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** RAIN
|
||||
*/
|
||||
@keyframes am-weather-rain {
|
||||
0% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dashoffset: -100;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-rain-1 {
|
||||
-webkit-animation-name: am-weather-rain;
|
||||
-moz-animation-name: am-weather-rain;
|
||||
-ms-animation-name: am-weather-rain;
|
||||
animation-name: am-weather-rain;
|
||||
-webkit-animation-duration: 8s;
|
||||
-moz-animation-duration: 8s;
|
||||
-ms-animation-duration: 8s;
|
||||
animation-duration: 8s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.am-weather-rain-2 {
|
||||
-webkit-animation-name: am-weather-rain;
|
||||
-moz-animation-name: am-weather-rain;
|
||||
-ms-animation-name: am-weather-rain;
|
||||
animation-name: am-weather-rain;
|
||||
-webkit-animation-delay: 0.25s;
|
||||
-moz-animation-delay: 0.25s;
|
||||
-ms-animation-delay: 0.25s;
|
||||
animation-delay: 0.25s;
|
||||
-webkit-animation-duration: 8s;
|
||||
-moz-animation-duration: 8s;
|
||||
-ms-animation-duration: 8s;
|
||||
animation-duration: 8s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="rainy-3">
|
||||
<g transform="translate(20,10)">
|
||||
<g transform="translate(0,16)">
|
||||
<g class="am-weather-sun">
|
||||
<g>
|
||||
<line fifll="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(45)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(90)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(135)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(180)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(225)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(270)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(315)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle cx="0" cy="0" fill="orange" r="5" stroke="orange" stroke-width="2"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M47.7,35.4c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#57A0EE" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(34,46), rotate(10)">
|
||||
<line class="am-weather-rain-1" fill="none" stroke="#91C0F8" stroke-dasharray="4,7" stroke-linecap="round" stroke-width="2" transform="translate(-6,1)" x1="0" x2="0" y1="0" y2="8" />
|
||||
<line class="am-weather-rain-2" fill="none" stroke="#91C0F8" stroke-dasharray="4,7" stroke-linecap="round" stroke-width="2" transform="translate(0,-1)" x1="0" x2="0" y1="0" y2="8" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.3 KiB |
66
www/community/weather-card/icons/rainy-4.svg
Normal file
66
www/community/weather-card/icons/rainy-4.svg
Normal file
@@ -0,0 +1,66 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** RAIN
|
||||
*/
|
||||
@keyframes am-weather-rain {
|
||||
0% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dashoffset: -100;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-rain-1 {
|
||||
-webkit-animation-name: am-weather-rain;
|
||||
-moz-animation-name: am-weather-rain;
|
||||
-ms-animation-name: am-weather-rain;
|
||||
animation-name: am-weather-rain;
|
||||
-webkit-animation-duration: 8s;
|
||||
-moz-animation-duration: 8s;
|
||||
-ms-animation-duration: 8s;
|
||||
animation-duration: 8s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="rainy-4">
|
||||
<g transform="translate(20,10)">
|
||||
<g>
|
||||
<path d="M47.7,35.4c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#57A0EE" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(37,45), rotate(10)">
|
||||
<line class="am-weather-rain-1" fill="none" stroke="#91C0F8" stroke-dasharray="4,7" stroke-linecap="round" stroke-width="2" transform="translate(-6,1)" x1="0" x2="0" y1="0" y2="8" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
90
www/community/weather-card/icons/rainy-5.svg
Normal file
90
www/community/weather-card/icons/rainy-5.svg
Normal file
@@ -0,0 +1,90 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** RAIN
|
||||
*/
|
||||
@keyframes am-weather-rain {
|
||||
0% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dashoffset: -100;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-rain-1 {
|
||||
-webkit-animation-name: am-weather-rain;
|
||||
-moz-animation-name: am-weather-rain;
|
||||
-ms-animation-name: am-weather-rain;
|
||||
animation-name: am-weather-rain;
|
||||
-webkit-animation-duration: 8s;
|
||||
-moz-animation-duration: 8s;
|
||||
-ms-animation-duration: 8s;
|
||||
animation-duration: 8s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.am-weather-rain-2 {
|
||||
-webkit-animation-name: am-weather-rain;
|
||||
-moz-animation-name: am-weather-rain;
|
||||
-ms-animation-name: am-weather-rain;
|
||||
animation-name: am-weather-rain;
|
||||
-webkit-animation-delay: 0.25s;
|
||||
-moz-animation-delay: 0.25s;
|
||||
-ms-animation-delay: 0.25s;
|
||||
animation-delay: 0.25s;
|
||||
-webkit-animation-duration: 8s;
|
||||
-moz-animation-duration: 8s;
|
||||
-ms-animation-duration: 8s;
|
||||
animation-duration: 8s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="rainy-5">
|
||||
<g transform="translate(20,10)">
|
||||
<g>
|
||||
<path d="M47.7,35.4c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#57A0EE" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(34,46), rotate(10)">
|
||||
<line class="am-weather-rain-1" fill="none" stroke="#91C0F8" stroke-dasharray="4,7" stroke-linecap="round" stroke-width="2" transform="translate(-6,1)" x1="0" x2="0" y1="0" y2="8" />
|
||||
<line class="am-weather-rain-2" fill="none" stroke="#91C0F8" stroke-dasharray="4,7" stroke-linecap="round" stroke-width="2" transform="translate(0,-1)" x1="0" x2="0" y1="0" y2="8" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
91
www/community/weather-card/icons/rainy-6.svg
Normal file
91
www/community/weather-card/icons/rainy-6.svg
Normal file
@@ -0,0 +1,91 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** RAIN
|
||||
*/
|
||||
@keyframes am-weather-rain {
|
||||
0% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dashoffset: -100;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-rain-1 {
|
||||
-webkit-animation-name: am-weather-rain;
|
||||
-moz-animation-name: am-weather-rain;
|
||||
-ms-animation-name: am-weather-rain;
|
||||
animation-name: am-weather-rain;
|
||||
-webkit-animation-duration: 8s;
|
||||
-moz-animation-duration: 8s;
|
||||
-ms-animation-duration: 8s;
|
||||
animation-duration: 8s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.am-weather-rain-2 {
|
||||
-webkit-animation-name: am-weather-rain;
|
||||
-moz-animation-name: am-weather-rain;
|
||||
-ms-animation-name: am-weather-rain;
|
||||
animation-name: am-weather-rain;
|
||||
-webkit-animation-delay: 0.25s;
|
||||
-moz-animation-delay: 0.25s;
|
||||
-ms-animation-delay: 0.25s;
|
||||
animation-delay: 0.25s;
|
||||
-webkit-animation-duration: 8s;
|
||||
-moz-animation-duration: 8s;
|
||||
-ms-animation-duration: 8s;
|
||||
animation-duration: 8s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="rainy-6">
|
||||
<g transform="translate(20,10)">
|
||||
<g>
|
||||
<path d="M47.7,35.4c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#57A0EE" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(31,46), rotate(10)">
|
||||
<line class="am-weather-rain-1" fill="none" stroke="#91C0F8" stroke-dasharray="4,4" stroke-linecap="round" stroke-width="2" transform="translate(-4,1)" x1="0" x2="0" y1="0" y2="8" />
|
||||
<line class="am-weather-rain-2" fill="none" stroke="#91C0F8" stroke-dasharray="4,4" stroke-linecap="round" stroke-width="2" transform="translate(0,-1)" x1="0" x2="0" y1="0" y2="8" />
|
||||
<line class="am-weather-rain-1" fill="none" stroke="#91C0F8" stroke-dasharray="4,4" stroke-linecap="round" stroke-width="2" transform="translate(4,0)" x1="0" x2="0" y1="0" y2="8" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
91
www/community/weather-card/icons/rainy-7.svg
Normal file
91
www/community/weather-card/icons/rainy-7.svg
Normal file
@@ -0,0 +1,91 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** RAIN
|
||||
*/
|
||||
@keyframes am-weather-rain {
|
||||
0% {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dashoffset: -100;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-rain-1 {
|
||||
-webkit-animation-name: am-weather-rain;
|
||||
-moz-animation-name: am-weather-rain;
|
||||
-ms-animation-name: am-weather-rain;
|
||||
animation-name: am-weather-rain;
|
||||
-webkit-animation-duration: 8s;
|
||||
-moz-animation-duration: 8s;
|
||||
-ms-animation-duration: 8s;
|
||||
animation-duration: 8s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.am-weather-rain-2 {
|
||||
-webkit-animation-name: am-weather-rain;
|
||||
-moz-animation-name: am-weather-rain;
|
||||
-ms-animation-name: am-weather-rain;
|
||||
animation-name: am-weather-rain;
|
||||
-webkit-animation-delay: 0.25s;
|
||||
-moz-animation-delay: 0.25s;
|
||||
-ms-animation-delay: 0.25s;
|
||||
animation-delay: 0.25s;
|
||||
-webkit-animation-duration: 8s;
|
||||
-moz-animation-duration: 8s;
|
||||
-ms-animation-duration: 8s;
|
||||
animation-duration: 8s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="rainy-7">
|
||||
<g transform="translate(20,10)">
|
||||
<g>
|
||||
<path d="M47.7,35.4c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#57A0EE" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(31,46), rotate(10)">
|
||||
<line class="am-weather-rain-1" fill="none" stroke="#91C0F8" stroke-dasharray="0.1,7" stroke-linecap="round" stroke-width="3" transform="translate(-5,1)" x1="0" x2="0" y1="0" y2="8" />
|
||||
<line class="am-weather-rain-2" fill="none" stroke="#91C0F8" stroke-dasharray="0.1,7" stroke-linecap="round" stroke-width="3" transform="translate(0,-1)" x1="0" x2="0" y1="0" y2="8" />
|
||||
<line class="am-weather-rain-1" fill="none" stroke="#91C0F8" stroke-dasharray="0.1,7" stroke-linecap="round" stroke-width="3" transform="translate(5,0)" x1="0" x2="0" y1="0" y2="8" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
230
www/community/weather-card/icons/snowy-1.svg
Normal file
230
www/community/weather-card/icons/snowy-1.svg
Normal file
@@ -0,0 +1,230 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** SUN
|
||||
*/
|
||||
@keyframes am-weather-sun {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-moz-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun {
|
||||
-webkit-animation-name: am-weather-sun;
|
||||
-moz-animation-name: am-weather-sun;
|
||||
-ms-animation-name: am-weather-sun;
|
||||
animation-name: am-weather-sun;
|
||||
-webkit-animation-duration: 9s;
|
||||
-moz-animation-duration: 9s;
|
||||
-ms-animation-duration: 9s;
|
||||
animation-duration: 9s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes am-weather-sun-shiny {
|
||||
0% {
|
||||
stroke-dasharray: 3px 10px;
|
||||
stroke-dashoffset: 0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 0.1px 10px;
|
||||
stroke-dashoffset: -1px;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dasharray: 3px 10px;
|
||||
stroke-dashoffset: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun-shiny line {
|
||||
-webkit-animation-name: am-weather-sun-shiny;
|
||||
-moz-animation-name: am-weather-sun-shiny;
|
||||
-ms-animation-name: am-weather-sun-shiny;
|
||||
animation-name: am-weather-sun-shiny;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** SNOW
|
||||
*/
|
||||
@keyframes am-weather-snow {
|
||||
0% {
|
||||
-webkit-transform: translateX(0) translateY(0);
|
||||
-moz-transform: translateX(0) translateY(0);
|
||||
-ms-transform: translateX(0) translateY(0);
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
|
||||
33.33% {
|
||||
-webkit-transform: translateX(-1.2px) translateY(2px);
|
||||
-moz-transform: translateX(-1.2px) translateY(2px);
|
||||
-ms-transform: translateX(-1.2px) translateY(2px);
|
||||
transform: translateX(-1.2px) translateY(2px);
|
||||
}
|
||||
|
||||
66.66% {
|
||||
-webkit-transform: translateX(1.4px) translateY(4px);
|
||||
-moz-transform: translateX(1.4px) translateY(4px);
|
||||
-ms-transform: translateX(1.4px) translateY(4px);
|
||||
transform: translateX(1.4px) translateY(4px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(-1.6px) translateY(6px);
|
||||
-moz-transform: translateX(-1.6px) translateY(6px);
|
||||
-ms-transform: translateX(-1.6px) translateY(6px);
|
||||
transform: translateX(-1.6px) translateY(6px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-snow-1 {
|
||||
-webkit-animation-name: am-weather-snow;
|
||||
-moz-animation-name: am-weather-snow;
|
||||
-ms-animation-name: am-weather-snow;
|
||||
animation-name: am-weather-snow;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.am-weather-snow-2 {
|
||||
-webkit-animation-name: am-weather-snow;
|
||||
-moz-animation-name: am-weather-snow;
|
||||
-ms-animation-name: am-weather-snow;
|
||||
animation-name: am-weather-snow;
|
||||
-webkit-animation-delay: 1.2s;
|
||||
-moz-animation-delay: 1.2s;
|
||||
-ms-animation-delay: 1.2s;
|
||||
animation-delay: 1.2s;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="snowy-1">
|
||||
<g transform="translate(20,10)">
|
||||
<g transform="translate(0,16), scale(1.2)">
|
||||
<g class="am-weather-sun">
|
||||
<g>
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(45)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(90)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(135)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(180)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(225)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(270)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(315)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle cx="0" cy="0" fill="orange" r="5" stroke="orange" stroke-width="2"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M47.7,35.4c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#57A0EE" stroke="white" stroke-linejoin="round" stroke-width="1.5" transform="translate(-15,-5), scale(0.85)"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="translate(20,9)">
|
||||
<g class="am-weather-snow-1">
|
||||
<g transform="translate(7,28)">
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1.2" transform="translate(0,9), rotate(0)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(45)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(90)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(135)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
</g>
|
||||
</g>
|
||||
<g class="am-weather-snow-2">
|
||||
<g transform="translate(16,28)">
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1.2" transform="translate(0,9), rotate(0)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(45)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(90)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(135)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.4 KiB |
237
www/community/weather-card/icons/snowy-2.svg
Normal file
237
www/community/weather-card/icons/snowy-2.svg
Normal file
@@ -0,0 +1,237 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** CLOUDS
|
||||
*/
|
||||
@keyframes am-weather-cloud-2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(2px,0px);
|
||||
-moz-transform: translate(2px,0px);
|
||||
-ms-transform: translate(2px,0px);
|
||||
transform: translate(2px,0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-cloud-2 {
|
||||
-webkit-animation-name: am-weather-cloud-2;
|
||||
-moz-animation-name: am-weather-cloud-2;
|
||||
animation-name: am-weather-cloud-2;
|
||||
-webkit-animation-duration: 3s;
|
||||
-moz-animation-duration: 3s;
|
||||
animation-duration: 3s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** SUN
|
||||
*/
|
||||
@keyframes am-weather-sun {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-moz-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun {
|
||||
-webkit-animation-name: am-weather-sun;
|
||||
-moz-animation-name: am-weather-sun;
|
||||
-ms-animation-name: am-weather-sun;
|
||||
animation-name: am-weather-sun;
|
||||
-webkit-animation-duration: 9s;
|
||||
-moz-animation-duration: 9s;
|
||||
-ms-animation-duration: 9s;
|
||||
animation-duration: 9s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes am-weather-sun-shiny {
|
||||
0% {
|
||||
stroke-dasharray: 3px 10px;
|
||||
stroke-dashoffset: 0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 0.1px 10px;
|
||||
stroke-dashoffset: -1px;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dasharray: 3px 10px;
|
||||
stroke-dashoffset: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun-shiny line {
|
||||
-webkit-animation-name: am-weather-sun-shiny;
|
||||
-moz-animation-name: am-weather-sun-shiny;
|
||||
-ms-animation-name: am-weather-sun-shiny;
|
||||
animation-name: am-weather-sun-shiny;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** SNOW
|
||||
*/
|
||||
@keyframes am-weather-snow {
|
||||
0% {
|
||||
-webkit-transform: translateX(0) translateY(0);
|
||||
-moz-transform: translateX(0) translateY(0);
|
||||
-ms-transform: translateX(0) translateY(0);
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
|
||||
33.33% {
|
||||
-webkit-transform: translateX(-1.2px) translateY(2px);
|
||||
-moz-transform: translateX(-1.2px) translateY(2px);
|
||||
-ms-transform: translateX(-1.2px) translateY(2px);
|
||||
transform: translateX(-1.2px) translateY(2px);
|
||||
}
|
||||
|
||||
66.66% {
|
||||
-webkit-transform: translateX(1.4px) translateY(4px);
|
||||
-moz-transform: translateX(1.4px) translateY(4px);
|
||||
-ms-transform: translateX(1.4px) translateY(4px);
|
||||
transform: translateX(1.4px) translateY(4px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(-1.6px) translateY(6px);
|
||||
-moz-transform: translateX(-1.6px) translateY(6px);
|
||||
-ms-transform: translateX(-1.6px) translateY(6px);
|
||||
transform: translateX(-1.6px) translateY(6px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-snow-1 {
|
||||
-webkit-animation-name: am-weather-snow;
|
||||
-moz-animation-name: am-weather-snow;
|
||||
-ms-animation-name: am-weather-snow;
|
||||
animation-name: am-weather-snow;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="snowy-2">
|
||||
<g transform="translate(20,10)">
|
||||
<g transform="translate(0,16)">
|
||||
<g class="am-weather-sun">
|
||||
<g>
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(45)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(90)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(135)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(180)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(225)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(270)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(315)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle cx="0" cy="0" fill="orange" r="5" stroke="orange" stroke-width="2"/>
|
||||
</g>
|
||||
<g class="am-weather-cloud-2">
|
||||
<path d="M47.7,35.4c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#57A0EE" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)"/>
|
||||
</g>
|
||||
</g>
|
||||
<g class="am-weather-snow-1">
|
||||
<g transform="translate(32,38)">
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1.2" transform="translate(0,9), rotate(0)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(45)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(90)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(135)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.8 KiB |
268
www/community/weather-card/icons/snowy-3.svg
Normal file
268
www/community/weather-card/icons/snowy-3.svg
Normal file
@@ -0,0 +1,268 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** CLOUDS
|
||||
*/
|
||||
@keyframes am-weather-cloud-2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(2px,0px);
|
||||
-moz-transform: translate(2px,0px);
|
||||
-ms-transform: translate(2px,0px);
|
||||
transform: translate(2px,0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-cloud-2 {
|
||||
-webkit-animation-name: am-weather-cloud-2;
|
||||
-moz-animation-name: am-weather-cloud-2;
|
||||
animation-name: am-weather-cloud-2;
|
||||
-webkit-animation-duration: 3s;
|
||||
-moz-animation-duration: 3s;
|
||||
animation-duration: 3s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** SUN
|
||||
*/
|
||||
@keyframes am-weather-sun {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-moz-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun {
|
||||
-webkit-animation-name: am-weather-sun;
|
||||
-moz-animation-name: am-weather-sun;
|
||||
-ms-animation-name: am-weather-sun;
|
||||
animation-name: am-weather-sun;
|
||||
-webkit-animation-duration: 9s;
|
||||
-moz-animation-duration: 9s;
|
||||
-ms-animation-duration: 9s;
|
||||
animation-duration: 9s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes am-weather-sun-shiny {
|
||||
0% {
|
||||
stroke-dasharray: 3px 10px;
|
||||
stroke-dashoffset: 0px;
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 0.1px 10px;
|
||||
stroke-dashoffset: -1px;
|
||||
}
|
||||
|
||||
100% {
|
||||
stroke-dasharray: 3px 10px;
|
||||
stroke-dashoffset: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-sun-shiny line {
|
||||
-webkit-animation-name: am-weather-sun-shiny;
|
||||
-moz-animation-name: am-weather-sun-shiny;
|
||||
-ms-animation-name: am-weather-sun-shiny;
|
||||
animation-name: am-weather-sun-shiny;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** SNOW
|
||||
*/
|
||||
@keyframes am-weather-snow {
|
||||
0% {
|
||||
-webkit-transform: translateX(0) translateY(0);
|
||||
-moz-transform: translateX(0) translateY(0);
|
||||
-ms-transform: translateX(0) translateY(0);
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
|
||||
33.33% {
|
||||
-webkit-transform: translateX(-1.2px) translateY(2px);
|
||||
-moz-transform: translateX(-1.2px) translateY(2px);
|
||||
-ms-transform: translateX(-1.2px) translateY(2px);
|
||||
transform: translateX(-1.2px) translateY(2px);
|
||||
}
|
||||
|
||||
66.66% {
|
||||
-webkit-transform: translateX(1.4px) translateY(4px);
|
||||
-moz-transform: translateX(1.4px) translateY(4px);
|
||||
-ms-transform: translateX(1.4px) translateY(4px);
|
||||
transform: translateX(1.4px) translateY(4px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(-1.6px) translateY(6px);
|
||||
-moz-transform: translateX(-1.6px) translateY(6px);
|
||||
-ms-transform: translateX(-1.6px) translateY(6px);
|
||||
transform: translateX(-1.6px) translateY(6px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-snow-1 {
|
||||
-webkit-animation-name: am-weather-snow;
|
||||
-moz-animation-name: am-weather-snow;
|
||||
-ms-animation-name: am-weather-snow;
|
||||
animation-name: am-weather-snow;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.am-weather-snow-2 {
|
||||
-webkit-animation-name: am-weather-snow;
|
||||
-moz-animation-name: am-weather-snow;
|
||||
-ms-animation-name: am-weather-snow;
|
||||
animation-name: am-weather-snow;
|
||||
-webkit-animation-delay: 1.2s;
|
||||
-moz-animation-delay: 1.2s;
|
||||
-ms-animation-delay: 1.2s;
|
||||
animation-delay: 1.2s;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="snowy-3">
|
||||
<g transform="translate(20,10)">
|
||||
<g transform="translate(0,16)">
|
||||
<g class="am-weather-sun">
|
||||
<g>
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(45)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(90)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(135)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(180)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(225)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(270)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
<g transform="rotate(315)">
|
||||
<line fill="none" stroke="orange" stroke-linecap="round" stroke-width="2" transform="translate(0,9)" x1="0" x2="0" y1="0" y2="3"/>
|
||||
</g>
|
||||
</g>
|
||||
<circle cx="0" cy="0" fill="orange" r="5" stroke="orange" stroke-width="2"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M47.7,35.4c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#57A0EE" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)"/>
|
||||
</g>
|
||||
<g class="am-weather-snow-1">
|
||||
<g transform="translate(7,28)">
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1.2" transform="translate(0,9), rotate(0)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(45)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(90)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(135)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
</g>
|
||||
</g>
|
||||
<g class="am-weather-snow-2">
|
||||
<g transform="translate(16,28)">
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1.2" transform="translate(0,9), rotate(0)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(45)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(90)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(135)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
94
www/community/weather-card/icons/snowy-4.svg
Normal file
94
www/community/weather-card/icons/snowy-4.svg
Normal file
@@ -0,0 +1,94 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** SNOW
|
||||
*/
|
||||
@keyframes am-weather-snow {
|
||||
0% {
|
||||
-webkit-transform: translate(0.0px,0);
|
||||
-moz-transform: translate(0.0px,0);
|
||||
-ms-transform: translate(0.0px,0);
|
||||
transform: translate(0.0px,0);
|
||||
}
|
||||
|
||||
33.33% {
|
||||
-webkit-transform: translate(-1.2px,2px);
|
||||
-moz-transform: translate(-1.2px,2px);
|
||||
-ms-transform: translate(-1.2px,2px);
|
||||
transform: translate(-1.2px,2px);
|
||||
}
|
||||
|
||||
66.66% {
|
||||
-webkit-transform: translate(1.4px,4px);
|
||||
-moz-transform: translate(1.4px,4px);
|
||||
-ms-transform: translate(1.4px,4px);
|
||||
transform: translate(1.4px,4px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(-1.6px,6px);
|
||||
-moz-transform: translate(-1.6px,6px);
|
||||
-ms-transform: translate(-1.6px,6px);
|
||||
transform: translate(-1.6px,6px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-snow-1 {
|
||||
-webkit-animation-name: am-weather-snow;
|
||||
-moz-animation-name: am-weather-snow;
|
||||
-ms-animation-name: am-weather-snow;
|
||||
animation-name: am-weather-snow;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="snowy-4">
|
||||
<g transform="translate(20,10)">
|
||||
<g>
|
||||
<path d="M47.7,35.4c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#57A0EE" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)"/>
|
||||
</g>
|
||||
<g class="am-weather-snow-1">
|
||||
<g transform="translate(11,28)">
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1.2" transform="translate(0,9), rotate(0)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(45)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(90)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(135)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
166
www/community/weather-card/icons/snowy-5.svg
Normal file
166
www/community/weather-card/icons/snowy-5.svg
Normal file
@@ -0,0 +1,166 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** CLOUDS
|
||||
*/
|
||||
@keyframes am-weather-cloud-2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(2px,0px);
|
||||
-moz-transform: translate(2px,0px);
|
||||
-ms-transform: translate(2px,0px);
|
||||
transform: translate(2px,0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-cloud-2 {
|
||||
-webkit-animation-name: am-weather-cloud-2;
|
||||
-moz-animation-name: am-weather-cloud-2;
|
||||
animation-name: am-weather-cloud-2;
|
||||
-webkit-animation-duration: 3s;
|
||||
-moz-animation-duration: 3s;
|
||||
animation-duration: 3s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** SNOW
|
||||
*/
|
||||
@keyframes am-weather-snow {
|
||||
0% {
|
||||
-webkit-transform: translateX(0) translateY(0);
|
||||
-moz-transform: translateX(0) translateY(0);
|
||||
-ms-transform: translateX(0) translateY(0);
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
|
||||
33.33% {
|
||||
-webkit-transform: translateX(-1.2px) translateY(2px);
|
||||
-moz-transform: translateX(-1.2px) translateY(2px);
|
||||
-ms-transform: translateX(-1.2px) translateY(2px);
|
||||
transform: translateX(-1.2px) translateY(2px);
|
||||
}
|
||||
|
||||
66.66% {
|
||||
-webkit-transform: translateX(1.4px) translateY(4px);
|
||||
-moz-transform: translateX(1.4px) translateY(4px);
|
||||
-ms-transform: translateX(1.4px) translateY(4px);
|
||||
transform: translateX(1.4px) translateY(4px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(-1.6px) translateY(6px);
|
||||
-moz-transform: translateX(-1.6px) translateY(6px);
|
||||
-ms-transform: translateX(-1.6px) translateY(6px);
|
||||
transform: translateX(-1.6px) translateY(6px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-snow-1 {
|
||||
-webkit-animation-name: am-weather-snow;
|
||||
-moz-animation-name: am-weather-snow;
|
||||
-ms-animation-name: am-weather-snow;
|
||||
animation-name: am-weather-snow;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.am-weather-snow-2 {
|
||||
-webkit-animation-name: am-weather-snow;
|
||||
-moz-animation-name: am-weather-snow;
|
||||
-ms-animation-name: am-weather-snow;
|
||||
animation-name: am-weather-snow;
|
||||
-webkit-animation-delay: 1.2s;
|
||||
-moz-animation-delay: 1.2s;
|
||||
-ms-animation-delay: 1.2s;
|
||||
animation-delay: 1.2s;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="snowy-5">
|
||||
<g transform="translate(20,10)">
|
||||
<g class="am-weather-cloud-2">
|
||||
<path d="M47.7,35.4c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#57A0EE" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)"/>
|
||||
</g>
|
||||
<g class="am-weather-snow-1">
|
||||
<g transform="translate(7,28)">
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1.2" transform="translate(0,9), rotate(0)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(45)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(90)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(135)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
</g>
|
||||
</g>
|
||||
<g class="am-weather-snow-2">
|
||||
<g transform="translate(16,28)">
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1.2" transform="translate(0,9), rotate(0)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(45)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(90)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(135)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.5 KiB |
225
www/community/weather-card/icons/snowy-6.svg
Normal file
225
www/community/weather-card/icons/snowy-6.svg
Normal file
@@ -0,0 +1,225 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** CLOUDS
|
||||
*/
|
||||
@keyframes am-weather-cloud-2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(2px,0px);
|
||||
-moz-transform: translate(2px,0px);
|
||||
-ms-transform: translate(2px,0px);
|
||||
transform: translate(2px,0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-cloud-2 {
|
||||
-webkit-animation-name: am-weather-cloud-2;
|
||||
-moz-animation-name: am-weather-cloud-2;
|
||||
animation-name: am-weather-cloud-2;
|
||||
-webkit-animation-duration: 3s;
|
||||
-moz-animation-duration: 3s;
|
||||
animation-duration: 3s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** SNOW
|
||||
*/
|
||||
@keyframes am-weather-snow {
|
||||
0% {
|
||||
-webkit-transform: translateX(0) translateY(0);
|
||||
-moz-transform: translateX(0) translateY(0);
|
||||
-ms-transform: translateX(0) translateY(0);
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
|
||||
33.33% {
|
||||
-webkit-transform: translateX(-1.2px) translateY(2px);
|
||||
-moz-transform: translateX(-1.2px) translateY(2px);
|
||||
-ms-transform: translateX(-1.2px) translateY(2px);
|
||||
transform: translateX(-1.2px) translateY(2px);
|
||||
}
|
||||
|
||||
66.66% {
|
||||
-webkit-transform: translateX(1.4px) translateY(4px);
|
||||
-moz-transform: translateX(1.4px) translateY(4px);
|
||||
-ms-transform: translateX(1.4px) translateY(4px);
|
||||
transform: translateX(1.4px) translateY(4px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(-1.6px) translateY(6px);
|
||||
-moz-transform: translateX(-1.6px) translateY(6px);
|
||||
-ms-transform: translateX(-1.6px) translateY(6px);
|
||||
transform: translateX(-1.6px) translateY(6px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes am-weather-snow-reverse {
|
||||
0% {
|
||||
-webkit-transform: translateX(0) translateY(0);
|
||||
-moz-transform: translateX(0) translateY(0);
|
||||
-ms-transform: translateX(0) translateY(0);
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
|
||||
33.33% {
|
||||
-webkit-transform: translateX(1.2px) translateY(2px);
|
||||
-moz-transform: translateX(1.2px) translateY(2px);
|
||||
-ms-transform: translateX(1.2px) translateY(2px);
|
||||
transform: translateX(1.2px) translateY(2px);
|
||||
}
|
||||
|
||||
66.66% {
|
||||
-webkit-transform: translateX(-1.4px) translateY(4px);
|
||||
-moz-transform: translateX(-1.4px) translateY(4px);
|
||||
-ms-transform: translateX(-1.4px) translateY(4px);
|
||||
transform: translateX(-1.4px) translateY(4px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(1.6px) translateY(6px);
|
||||
-moz-transform: translateX(1.6px) translateY(6px);
|
||||
-ms-transform: translateX(1.6px) translateY(6px);
|
||||
transform: translateX(1.6px) translateY(6px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-snow-1 {
|
||||
-webkit-animation-name: am-weather-snow;
|
||||
-moz-animation-name: am-weather-snow;
|
||||
-ms-animation-name: am-weather-snow;
|
||||
animation-name: am-weather-snow;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.am-weather-snow-2 {
|
||||
-webkit-animation-name: am-weather-snow;
|
||||
-moz-animation-name: am-weather-snow;
|
||||
-ms-animation-name: am-weather-snow;
|
||||
animation-name: am-weather-snow;
|
||||
-webkit-animation-delay: 1.2s;
|
||||
-moz-animation-delay: 1.2s;
|
||||
-ms-animation-delay: 1.2s;
|
||||
animation-delay: 1.2s;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.am-weather-snow-3 {
|
||||
-webkit-animation-name: am-weather-snow-reverse;
|
||||
-moz-animation-name: am-weather-snow-reverse;
|
||||
-ms-animation-name: am-weather-snow-reverse;
|
||||
animation-name: am-weather-snow-reverse;
|
||||
-webkit-animation-duration: 2s;
|
||||
-moz-animation-duration: 2s;
|
||||
-ms-animation-duration: 2s;
|
||||
animation-duration: 2s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
-ms-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
-ms-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="snowy-6">
|
||||
<g transform="translate(20,10)">
|
||||
<g class="am-weather-cloud-2">
|
||||
<path d="M47.7,35.4c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#57A0EE" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)"/>
|
||||
</g>
|
||||
<g class="am-weather-snow-1">
|
||||
<g transform="translate(3,28)">
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1.2" transform="translate(0,9), rotate(0)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(45)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(90)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(135)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
</g>
|
||||
</g>
|
||||
<g class="am-weather-snow-2">
|
||||
<g transform="translate(11,28)">
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1.2" transform="translate(0,9), rotate(0)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(45)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(90)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(135)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
</g>
|
||||
</g>
|
||||
<g class="am-weather-snow-3">
|
||||
<g transform="translate(20,28)">
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1.2" transform="translate(0,9), rotate(0)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(45)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(90)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
<line fill="none" stroke="#57A0EE" stroke-linecap="round" stroke-width="1" transform="translate(0,9), rotate(135)" x1="0" x2="0" y1="-2.5" y2="2.5" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.0 KiB |
268
www/community/weather-card/icons/thunder.svg
Normal file
268
www/community/weather-card/icons/thunder.svg
Normal file
@@ -0,0 +1,268 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- (c) ammap.com | SVG weather icons -->
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="64"
|
||||
height="64"
|
||||
viewbox="0 0 64 64">
|
||||
<defs>
|
||||
<filter id="blur" width="200%" height="200%">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="0" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.05"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
<style type="text/css"><![CDATA[
|
||||
/*
|
||||
** CLOUDS
|
||||
*/
|
||||
@keyframes am-weather-cloud-1 {
|
||||
0% {
|
||||
-webkit-transform: translate(-5px,0px);
|
||||
-moz-transform: translate(-5px,0px);
|
||||
-ms-transform: translate(-5px,0px);
|
||||
transform: translate(-5px,0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(10px,0px);
|
||||
-moz-transform: translate(10px,0px);
|
||||
-ms-transform: translate(10px,0px);
|
||||
transform: translate(10px,0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(-5px,0px);
|
||||
-moz-transform: translate(-5px,0px);
|
||||
-ms-transform: translate(-5px,0px);
|
||||
transform: translate(-5px,0px);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-cloud-1 {
|
||||
-webkit-animation-name: am-weather-cloud-1;
|
||||
-moz-animation-name: am-weather-cloud-1;
|
||||
animation-name: am-weather-cloud-1;
|
||||
-webkit-animation-duration: 7s;
|
||||
-moz-animation-duration: 7s;
|
||||
animation-duration: 7s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes am-weather-cloud-2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: translate(2px,0px);
|
||||
-moz-transform: translate(2px,0px);
|
||||
-ms-transform: translate(2px,0px);
|
||||
transform: translate(2px,0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(0px,0px);
|
||||
-moz-transform: translate(0px,0px);
|
||||
-ms-transform: translate(0px,0px);
|
||||
transform: translate(0px,0px);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-cloud-2 {
|
||||
-webkit-animation-name: am-weather-cloud-2;
|
||||
-moz-animation-name: am-weather-cloud-2;
|
||||
animation-name: am-weather-cloud-2;
|
||||
-webkit-animation-duration: 3s;
|
||||
-moz-animation-duration: 3s;
|
||||
animation-duration: 3s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
** STROKE
|
||||
*/
|
||||
@keyframes am-weather-stroke {
|
||||
0% {
|
||||
-webkit-transform: translate(0.0px,0.0px);
|
||||
-moz-transform: translate(0.0px,0.0px);
|
||||
-ms-transform: translate(0.0px,0.0px);
|
||||
transform: translate(0.0px,0.0px);
|
||||
}
|
||||
|
||||
2% {
|
||||
-webkit-transform: translate(0.3px,0.0px);
|
||||
-moz-transform: translate(0.3px,0.0px);
|
||||
-ms-transform: translate(0.3px,0.0px);
|
||||
transform: translate(0.3px,0.0px);
|
||||
}
|
||||
|
||||
4% {
|
||||
-webkit-transform: translate(0.0px,0.0px);
|
||||
-moz-transform: translate(0.0px,0.0px);
|
||||
-ms-transform: translate(0.0px,0.0px);
|
||||
transform: translate(0.0px,0.0px);
|
||||
}
|
||||
|
||||
6% {
|
||||
-webkit-transform: translate(0.5px,0.4px);
|
||||
-moz-transform: translate(0.5px,0.4px);
|
||||
-ms-transform: translate(0.5px,0.4px);
|
||||
transform: translate(0.5px,0.4px);
|
||||
}
|
||||
|
||||
8% {
|
||||
-webkit-transform: translate(0.0px,0.0px);
|
||||
-moz-transform: translate(0.0px,0.0px);
|
||||
-ms-transform: translate(0.0px,0.0px);
|
||||
transform: translate(0.0px,0.0px);
|
||||
}
|
||||
|
||||
10% {
|
||||
-webkit-transform: translate(0.3px,0.0px);
|
||||
-moz-transform: translate(0.3px,0.0px);
|
||||
-ms-transform: translate(0.3px,0.0px);
|
||||
transform: translate(0.3px,0.0px);
|
||||
}
|
||||
|
||||
12% {
|
||||
-webkit-transform: translate(0.0px,0.0px);
|
||||
-moz-transform: translate(0.0px,0.0px);
|
||||
-ms-transform: translate(0.0px,0.0px);
|
||||
transform: translate(0.0px,0.0px);
|
||||
}
|
||||
|
||||
14% {
|
||||
-webkit-transform: translate(0.3px,0.0px);
|
||||
-moz-transform: translate(0.3px,0.0px);
|
||||
-ms-transform: translate(0.3px,0.0px);
|
||||
transform: translate(0.3px,0.0px);
|
||||
}
|
||||
|
||||
16% {
|
||||
-webkit-transform: translate(0.0px,0.0px);
|
||||
-moz-transform: translate(0.0px,0.0px);
|
||||
-ms-transform: translate(0.0px,0.0px);
|
||||
transform: translate(0.0px,0.0px);
|
||||
}
|
||||
|
||||
18% {
|
||||
-webkit-transform: translate(0.3px,0.0px);
|
||||
-moz-transform: translate(0.3px,0.0px);
|
||||
-ms-transform: translate(0.3px,0.0px);
|
||||
transform: translate(0.3px,0.0px);
|
||||
}
|
||||
|
||||
20% {
|
||||
-webkit-transform: translate(0.0px,0.0px);
|
||||
-moz-transform: translate(0.0px,0.0px);
|
||||
-ms-transform: translate(0.0px,0.0px);
|
||||
transform: translate(0.0px,0.0px);
|
||||
}
|
||||
|
||||
22% {
|
||||
-webkit-transform: translate(1px,0.0px);
|
||||
-moz-transform: translate(1px,0.0px);
|
||||
-ms-transform: translate(1px,0.0px);
|
||||
transform: translate(1px,0.0px);
|
||||
}
|
||||
|
||||
24% {
|
||||
-webkit-transform: translate(0.0px,0.0px);
|
||||
-moz-transform: translate(0.0px,0.0px);
|
||||
-ms-transform: translate(0.0px,0.0px);
|
||||
transform: translate(0.0px,0.0px);
|
||||
}
|
||||
|
||||
26% {
|
||||
-webkit-transform: translate(-1px,0.0px);
|
||||
-moz-transform: translate(-1px,0.0px);
|
||||
-ms-transform: translate(-1px,0.0px);
|
||||
transform: translate(-1px,0.0px);
|
||||
|
||||
}
|
||||
|
||||
28% {
|
||||
-webkit-transform: translate(0.0px,0.0px);
|
||||
-moz-transform: translate(0.0px,0.0px);
|
||||
-ms-transform: translate(0.0px,0.0px);
|
||||
transform: translate(0.0px,0.0px);
|
||||
}
|
||||
|
||||
40% {
|
||||
fill: orange;
|
||||
-webkit-transform: translate(0.0px,0.0px);
|
||||
-moz-transform: translate(0.0px,0.0px);
|
||||
-ms-transform: translate(0.0px,0.0px);
|
||||
transform: translate(0.0px,0.0px);
|
||||
}
|
||||
|
||||
65% {
|
||||
fill: white;
|
||||
-webkit-transform: translate(-1px,5.0px);
|
||||
-moz-transform: translate(-1px,5.0px);
|
||||
-ms-transform: translate(-1px,5.0px);
|
||||
transform: translate(-1px,5.0px);
|
||||
}
|
||||
61% {
|
||||
fill: orange;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translate(0.0px,0.0px);
|
||||
-moz-transform: translate(0.0px,0.0px);
|
||||
-ms-transform: translate(0.0px,0.0px);
|
||||
transform: translate(0.0px,0.0px);
|
||||
}
|
||||
}
|
||||
|
||||
.am-weather-stroke {
|
||||
-webkit-animation-name: am-weather-stroke;
|
||||
-moz-animation-name: am-weather-stroke;
|
||||
animation-name: am-weather-stroke;
|
||||
-webkit-animation-duration: 1.11s;
|
||||
-moz-animation-duration: 1.11s;
|
||||
animation-duration: 1.11s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
-moz-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
]]></style>
|
||||
</defs>
|
||||
<g filter="url(#blur)" id="thunder">
|
||||
<g transform="translate(20,10)">
|
||||
<g class="am-weather-cloud-1">
|
||||
<path d="M47.7,35.4 c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#91C0F8" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-10,-6), scale(0.6)" />
|
||||
</g>
|
||||
<g>
|
||||
<path d="M47.7,35.4 c0-4.6-3.7-8.2-8.2-8.2c-1,0-1.9,0.2-2.8,0.5c-0.3-3.4-3.1-6.2-6.6-6.2c-3.7,0-6.7,3-6.7,6.7c0,0.8,0.2,1.6,0.4,2.3 c-0.3-0.1-0.7-0.1-1-0.1c-3.7,0-6.7,3-6.7,6.7c0,3.6,2.9,6.6,6.5,6.7l17.2,0C44.2,43.3,47.7,39.8,47.7,35.4z" fill="#57A0EE" stroke="white" stroke-linejoin="round" stroke-width="1.2" transform="translate(-20,-11)" />
|
||||
</g>
|
||||
<g transform="translate(-9,28), scale(1.2)">
|
||||
<polygon class="am-weather-stroke" fill="orange" stroke="white" stroke-width="1" points="14.3,-2.9 20.5,-2.9 16.4,4.3 20.3,4.3 11.5,14.6 14.9,6.9 11.1,6.9" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.3 KiB |
1245
www/community/weather-card/icons/weather-sprite.svg
Normal file
1245
www/community/weather-card/icons/weather-sprite.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 65 KiB |
1245
www/community/weather-card/icons/weather.svg
Normal file
1245
www/community/weather-card/icons/weather.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 64 KiB |
9
www/community/weather-card/icons/weather_sagittarius.svg
Normal file
9
www/community/weather-card/icons/weather_sagittarius.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<svg width="21px" height="17px" viewBox="187 110 21 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Wind" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(197.611216, 118.415064) rotate(-30.000000) translate(-197.611216, -118.415064) translate(189.111216, 115.915064)" stroke-linecap="round">
|
||||
<path d="M0.5,2.5 L13,2.5" id="Line" stroke="#000000"></path>
|
||||
<polygon id="Triangle-1" stroke="#000000" stroke-linejoin="round" fill="#000000" points="13 5 13 1.13686838e-13 17 2.5"></polygon>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 752 B |
14
www/community/weather-card/icons/weather_sunset.svg
Normal file
14
www/community/weather-card/icons/weather_sunset.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
|
||||
<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="0" y1="47" x2="64" y2="47"/>
|
||||
<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="10" y1="37" x2="0" y2="37"/>
|
||||
<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="64" y1="37" x2="54" y2="37"/>
|
||||
<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="32" y1="15" x2="32" y2="4"/>
|
||||
<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="14" y1="23" x2="6" y2="15"/>
|
||||
<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="50" y1="23" x2="58" y2="15"/>
|
||||
<path fill="#000000" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M48.159,47C49.96,44.096,51,40.669,51,37
|
||||
c0-10.493-8.506-19-19-19s-19,8.507-19,19c0,3.668,1.04,7.094,2.841,9.998"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
216
www/community/weather-card/weather-card-editor.js
Normal file
216
www/community/weather-card/weather-card-editor.js
Normal file
@@ -0,0 +1,216 @@
|
||||
const fireEvent = (node, type, detail, options) => {
|
||||
options = options || {};
|
||||
detail = detail === null || detail === undefined ? {} : detail;
|
||||
const event = new Event(type, {
|
||||
bubbles: options.bubbles === undefined ? true : options.bubbles,
|
||||
cancelable: Boolean(options.cancelable),
|
||||
composed: options.composed === undefined ? true : options.composed,
|
||||
});
|
||||
event.detail = detail;
|
||||
node.dispatchEvent(event);
|
||||
return event;
|
||||
};
|
||||
|
||||
if (
|
||||
!customElements.get("ha-switch") &&
|
||||
customElements.get("paper-toggle-button")
|
||||
) {
|
||||
customElements.define("ha-switch", customElements.get("paper-toggle-button"));
|
||||
}
|
||||
|
||||
const LitElement = customElements.get("hui-masonry-view") ? Object.getPrototypeOf(customElements.get("hui-masonry-view")) : Object.getPrototypeOf(customElements.get("hui-view"));
|
||||
const html = LitElement.prototype.html;
|
||||
const css = LitElement.prototype.css;
|
||||
|
||||
const HELPERS = window.loadCardHelpers();
|
||||
|
||||
export class WeatherCardEditor extends LitElement {
|
||||
setConfig(config) {
|
||||
this._config = { ...config };
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return { hass: {}, _config: {} };
|
||||
}
|
||||
|
||||
get _entity() {
|
||||
return this._config.entity || "";
|
||||
}
|
||||
|
||||
get _name() {
|
||||
return this._config.name || "";
|
||||
}
|
||||
|
||||
get _icons() {
|
||||
return this._config.icons || "";
|
||||
}
|
||||
|
||||
get _current() {
|
||||
return this._config.current !== false;
|
||||
}
|
||||
|
||||
get _details() {
|
||||
return this._config.details !== false;
|
||||
}
|
||||
|
||||
get _forecast() {
|
||||
return this._config.forecast !== false;
|
||||
}
|
||||
|
||||
get _hourly_forecast() {
|
||||
return this._config.hourly_forecast !== false;
|
||||
}
|
||||
|
||||
get _number_of_forecasts() {
|
||||
return this._config.number_of_forecasts || 5;
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
HELPERS.then(help => {
|
||||
if (help.importMoreInfoControl) {
|
||||
help.importMoreInfoControl("fan");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.hass) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
const entities = Object.keys(this.hass.states).filter(
|
||||
(eid) => eid.substr(0, eid.indexOf(".")) === "weather"
|
||||
);
|
||||
|
||||
return html`
|
||||
<div class="card-config">
|
||||
<div>
|
||||
<paper-input
|
||||
label="Name"
|
||||
.value="${this._name}"
|
||||
.configValue="${"name"}"
|
||||
@value-changed="${this._valueChanged}"
|
||||
></paper-input>
|
||||
<paper-input
|
||||
label="Icons location"
|
||||
.value="${this._icons}"
|
||||
.configValue="${"icons"}"
|
||||
@value-changed="${this._valueChanged}"
|
||||
></paper-input>
|
||||
${customElements.get("ha-entity-picker")
|
||||
? html`
|
||||
<ha-entity-picker
|
||||
.hass="${this.hass}"
|
||||
.value="${this._entity}"
|
||||
.configValue=${"entity"}
|
||||
domain-filter="weather"
|
||||
@change="${this._valueChanged}"
|
||||
allow-custom-entity
|
||||
></ha-entity-picker>
|
||||
`
|
||||
: html`
|
||||
<paper-dropdown-menu
|
||||
label="Entity"
|
||||
@value-changed="${this._valueChanged}"
|
||||
.configValue="${"entity"}"
|
||||
>
|
||||
<paper-listbox
|
||||
slot="dropdown-content"
|
||||
.selected="${entities.indexOf(this._entity)}"
|
||||
>
|
||||
${entities.map((entity) => {
|
||||
return html` <paper-item>${entity}</paper-item> `;
|
||||
})}
|
||||
</paper-listbox>
|
||||
</paper-dropdown-menu>
|
||||
`}
|
||||
<div class="switches">
|
||||
<div class="switch">
|
||||
<ha-switch
|
||||
.checked=${this._current}
|
||||
.configValue="${"current"}"
|
||||
@change="${this._valueChanged}"
|
||||
></ha-switch
|
||||
><span>Show current</span>
|
||||
</div>
|
||||
<div class="switch">
|
||||
<ha-switch
|
||||
.checked=${this._details}
|
||||
.configValue="${"details"}"
|
||||
@change="${this._valueChanged}"
|
||||
></ha-switch
|
||||
><span>Show details</span>
|
||||
</div>
|
||||
<div class="switch">
|
||||
<ha-switch
|
||||
.checked=${this._forecast}
|
||||
.configValue="${"forecast"}"
|
||||
@change="${this._valueChanged}"
|
||||
></ha-switch
|
||||
><span>Show forecast</span>
|
||||
</div>
|
||||
<div class="switch">
|
||||
<ha-switch
|
||||
.checked=${this._hourly_forecast}
|
||||
.configValue="${"hourly_forecast"}"
|
||||
@change="${this._valueChanged}"
|
||||
></ha-switch
|
||||
><span>Show hourly forecast</span>
|
||||
</div>
|
||||
</div>
|
||||
<paper-input
|
||||
label="Number of future forcasts"
|
||||
type="number"
|
||||
min="1"
|
||||
max="8"
|
||||
value=${this._number_of_forecasts}
|
||||
.configValue="${"number_of_forecasts"}"
|
||||
@value-changed="${this._valueChanged}"
|
||||
></paper-input>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
_valueChanged(ev) {
|
||||
if (!this._config || !this.hass) {
|
||||
return;
|
||||
}
|
||||
const target = ev.target;
|
||||
if (this[`_${target.configValue}`] === target.value) {
|
||||
return;
|
||||
}
|
||||
if (target.configValue) {
|
||||
if (target.value === "") {
|
||||
delete this._config[target.configValue];
|
||||
} else {
|
||||
this._config = {
|
||||
...this._config,
|
||||
[target.configValue]:
|
||||
target.checked !== undefined ? target.checked : target.value,
|
||||
};
|
||||
}
|
||||
}
|
||||
fireEvent(this, "config-changed", { config: this._config });
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
.switches {
|
||||
margin: 8px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
.switches span {
|
||||
padding: 0 16px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("weather-card-editor", WeatherCardEditor);
|
||||
BIN
www/community/weather-card/weather-card-editor.js.gz
Normal file
BIN
www/community/weather-card/weather-card-editor.js.gz
Normal file
Binary file not shown.
530
www/community/weather-card/weather-card.js
Normal file
530
www/community/weather-card/weather-card.js
Normal file
@@ -0,0 +1,530 @@
|
||||
const LitElement = customElements.get("hui-masonry-view") ? Object.getPrototypeOf(customElements.get("hui-masonry-view")) : Object.getPrototypeOf(customElements.get("hui-view"));
|
||||
const html = LitElement.prototype.html;
|
||||
const css = LitElement.prototype.css;
|
||||
|
||||
const weatherIconsDay = {
|
||||
clear: "day",
|
||||
"clear-night": "night",
|
||||
cloudy: "cloudy",
|
||||
fog: "cloudy",
|
||||
hail: "rainy-7",
|
||||
lightning: "thunder",
|
||||
"lightning-rainy": "thunder",
|
||||
partlycloudy: "cloudy-day-3",
|
||||
pouring: "rainy-6",
|
||||
rainy: "rainy-5",
|
||||
snowy: "snowy-6",
|
||||
"snowy-rainy": "rainy-7",
|
||||
sunny: "day",
|
||||
windy: "cloudy",
|
||||
"windy-variant": "cloudy-day-3",
|
||||
exceptional: "!!",
|
||||
};
|
||||
|
||||
const weatherIconsNight = {
|
||||
...weatherIconsDay,
|
||||
clear: "night",
|
||||
sunny: "night",
|
||||
partlycloudy: "cloudy-night-3",
|
||||
"windy-variant": "cloudy-night-3",
|
||||
};
|
||||
|
||||
const windDirections = [
|
||||
"N",
|
||||
"NNE",
|
||||
"NE",
|
||||
"ENE",
|
||||
"E",
|
||||
"ESE",
|
||||
"SE",
|
||||
"SSE",
|
||||
"S",
|
||||
"SSW",
|
||||
"SW",
|
||||
"WSW",
|
||||
"W",
|
||||
"WNW",
|
||||
"NW",
|
||||
"NNW",
|
||||
"N",
|
||||
];
|
||||
|
||||
window.customCards = window.customCards || [];
|
||||
window.customCards.push({
|
||||
type: "weather-card",
|
||||
name: "Weather Card",
|
||||
description: "A custom weather card with animated icons.",
|
||||
preview: true,
|
||||
documentationURL: "https://github.com/bramkragten/weather-card",
|
||||
});
|
||||
|
||||
const fireEvent = (node, type, detail, options) => {
|
||||
options = options || {};
|
||||
detail = detail === null || detail === undefined ? {} : detail;
|
||||
const event = new Event(type, {
|
||||
bubbles: options.bubbles === undefined ? true : options.bubbles,
|
||||
cancelable: Boolean(options.cancelable),
|
||||
composed: options.composed === undefined ? true : options.composed,
|
||||
});
|
||||
event.detail = detail;
|
||||
node.dispatchEvent(event);
|
||||
return event;
|
||||
};
|
||||
|
||||
function hasConfigOrEntityChanged(element, changedProps) {
|
||||
if (changedProps.has("_config")) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const oldHass = changedProps.get("hass");
|
||||
if (oldHass) {
|
||||
return (
|
||||
oldHass.states[element._config.entity] !==
|
||||
element.hass.states[element._config.entity] ||
|
||||
oldHass.states["sun.sun"] !== element.hass.states["sun.sun"]
|
||||
);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
class WeatherCard extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
_config: {},
|
||||
hass: {},
|
||||
};
|
||||
}
|
||||
|
||||
static async getConfigElement() {
|
||||
await import("./weather-card-editor.js");
|
||||
return document.createElement("weather-card-editor");
|
||||
}
|
||||
|
||||
static getStubConfig(hass, unusedEntities, allEntities) {
|
||||
let entity = unusedEntities.find((eid) => eid.split(".")[0] === "weather");
|
||||
if (!entity) {
|
||||
entity = allEntities.find((eid) => eid.split(".")[0] === "weather");
|
||||
}
|
||||
return { entity };
|
||||
}
|
||||
|
||||
setConfig(config) {
|
||||
if (!config.entity) {
|
||||
throw new Error("Please define a weather entity");
|
||||
}
|
||||
this._config = config;
|
||||
}
|
||||
|
||||
shouldUpdate(changedProps) {
|
||||
return hasConfigOrEntityChanged(this, changedProps);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this._config || !this.hass) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
this.numberElements = 0;
|
||||
|
||||
const stateObj = this.hass.states[this._config.entity];
|
||||
|
||||
if (!stateObj) {
|
||||
return html`
|
||||
<style>
|
||||
.not-found {
|
||||
flex: 1;
|
||||
background-color: yellow;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
<ha-card>
|
||||
<div class="not-found">
|
||||
Entity not available: ${this._config.entity}
|
||||
</div>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<ha-card @click="${this._handleClick}">
|
||||
${this._config.current !== false ? this.renderCurrent(stateObj) : ""}
|
||||
${this._config.details !== false ? this.renderDetails(stateObj) : ""}
|
||||
${this._config.forecast !== false
|
||||
? this.renderForecast(stateObj.attributes.forecast)
|
||||
: ""}
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
renderCurrent(stateObj) {
|
||||
this.numberElements++;
|
||||
|
||||
return html`
|
||||
<div class="current ${this.numberElements > 1 ? "spacer" : ""}">
|
||||
<span
|
||||
class="icon bigger"
|
||||
style="background: none, url('${this.getWeatherIcon(
|
||||
stateObj.state.toLowerCase(),
|
||||
this.hass.states["sun.sun"]
|
||||
)}') no-repeat; background-size: contain;"
|
||||
>${stateObj.state}
|
||||
</span>
|
||||
${this._config.name
|
||||
? html` <span class="title"> ${this._config.name} </span> `
|
||||
: ""}
|
||||
<span class="temp"
|
||||
>${this.getUnit("temperature") == "°F"
|
||||
? Math.round(stateObj.attributes.temperature)
|
||||
: stateObj.attributes.temperature}</span
|
||||
>
|
||||
<span class="tempc"> ${this.getUnit("temperature")}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
renderDetails(stateObj) {
|
||||
const sun = this.hass.states["sun.sun"];
|
||||
let next_rising;
|
||||
let next_setting;
|
||||
|
||||
if (sun) {
|
||||
next_rising = new Date(sun.attributes.next_rising);
|
||||
next_setting = new Date(sun.attributes.next_setting);
|
||||
}
|
||||
|
||||
this.numberElements++;
|
||||
|
||||
return html`
|
||||
<ul class="variations ${this.numberElements > 1 ? "spacer" : ""}">
|
||||
<li>
|
||||
<ha-icon icon="mdi:water-percent"></ha-icon>
|
||||
${stateObj.attributes.humidity}<span class="unit"> % </span>
|
||||
</li>
|
||||
<li>
|
||||
<ha-icon icon="mdi:weather-windy"></ha-icon> ${windDirections[
|
||||
parseInt((stateObj.attributes.wind_bearing + 11.25) / 22.5)
|
||||
]}
|
||||
${stateObj.attributes.wind_speed}<span class="unit">
|
||||
${this.getUnit("length")}/h
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<ha-icon icon="mdi:gauge"></ha-icon>
|
||||
${stateObj.attributes.pressure}
|
||||
<span class="unit">
|
||||
${this.getUnit("air_pressure")}
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<ha-icon icon="mdi:weather-fog"></ha-icon> ${stateObj.attributes
|
||||
.visibility}<span class="unit">
|
||||
${this.getUnit("length")}
|
||||
</span>
|
||||
</li>
|
||||
${next_rising
|
||||
? html`
|
||||
<li>
|
||||
<ha-icon icon="mdi:weather-sunset-up"></ha-icon>
|
||||
${next_rising.toLocaleTimeString()}
|
||||
</li>
|
||||
`
|
||||
: ""}
|
||||
${next_setting
|
||||
? html`
|
||||
<li>
|
||||
<ha-icon icon="mdi:weather-sunset-down"></ha-icon>
|
||||
${next_setting.toLocaleTimeString()}
|
||||
</li>
|
||||
`
|
||||
: ""}
|
||||
</ul>
|
||||
`;
|
||||
}
|
||||
|
||||
renderForecast(forecast) {
|
||||
if (!forecast || forecast.length === 0) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
const lang = this.hass.selectedLanguage || this.hass.language;
|
||||
|
||||
this.numberElements++;
|
||||
return html`
|
||||
<div class="forecast clear ${this.numberElements > 1 ? "spacer" : ""}">
|
||||
${forecast
|
||||
.slice(
|
||||
0,
|
||||
this._config.number_of_forecasts
|
||||
? this._config.number_of_forecasts
|
||||
: 5
|
||||
)
|
||||
.map(
|
||||
(daily) => html`
|
||||
<div class="day">
|
||||
<div class="dayname">
|
||||
${this._config.hourly_forecast
|
||||
? new Date(daily.datetime).toLocaleTimeString(lang, {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})
|
||||
: new Date(daily.datetime).toLocaleDateString(lang, {
|
||||
weekday: "short",
|
||||
})}
|
||||
</div>
|
||||
<i
|
||||
class="icon"
|
||||
style="background: none, url('${this.getWeatherIcon(
|
||||
daily.condition.toLowerCase()
|
||||
)}') no-repeat; background-size: contain"
|
||||
></i>
|
||||
<div class="highTemp">
|
||||
${daily.temperature}${this.getUnit("temperature")}
|
||||
</div>
|
||||
${daily.templow !== undefined
|
||||
? html`
|
||||
<div class="lowTemp">
|
||||
${daily.templow}${this.getUnit("temperature")}
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
${!this._config.hide_precipitation &&
|
||||
daily.precipitation !== undefined &&
|
||||
daily.precipitation !== null
|
||||
? html`
|
||||
<div class="precipitation">
|
||||
${Math.round(daily.precipitation*10)/10} ${this.getUnit("precipitation")}
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
${!this._config.hide_precipitation &&
|
||||
daily.precipitation_probability !== undefined &&
|
||||
daily.precipitation_probability !== null
|
||||
? html`
|
||||
<div class="precipitation_probability">
|
||||
${Math.round(daily.precipitation_probability)} ${this.getUnit("precipitation_probability")}
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
getWeatherIcon(condition, sun) {
|
||||
return `${
|
||||
this._config.icons
|
||||
? this._config.icons
|
||||
: "https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/icons/"
|
||||
}${
|
||||
sun && sun.state == "below_horizon"
|
||||
? weatherIconsNight[condition]
|
||||
: weatherIconsDay[condition]
|
||||
}.svg`;
|
||||
}
|
||||
|
||||
getUnit(measure) {
|
||||
const lengthUnit = this.hass.config.unit_system.length;
|
||||
switch (measure) {
|
||||
case "air_pressure":
|
||||
return lengthUnit === "km" ? "hPa" : "inHg";
|
||||
case "length":
|
||||
return lengthUnit;
|
||||
case "precipitation":
|
||||
return lengthUnit === "km" ? "mm" : "in";
|
||||
case "precipitation_probability":
|
||||
return "%";
|
||||
default:
|
||||
return this.hass.config.unit_system[measure] || "";
|
||||
}
|
||||
}
|
||||
|
||||
_handleClick() {
|
||||
fireEvent(this, "hass-more-info", { entityId: this._config.entity });
|
||||
}
|
||||
|
||||
getCardSize() {
|
||||
return 3;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
ha-card {
|
||||
cursor: pointer;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
padding-top: 1.3em;
|
||||
padding-bottom: 1.3em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
left: 3em;
|
||||
font-weight: 300;
|
||||
font-size: 3em;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
.temp {
|
||||
font-weight: 300;
|
||||
font-size: 4em;
|
||||
color: var(--primary-text-color);
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
}
|
||||
|
||||
.tempc {
|
||||
font-weight: 300;
|
||||
font-size: 1.5em;
|
||||
vertical-align: super;
|
||||
color: var(--primary-text-color);
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
margin-top: -14px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
@media (max-width: 460px) {
|
||||
.title {
|
||||
font-size: 2.2em;
|
||||
left: 4em;
|
||||
}
|
||||
.temp {
|
||||
font-size: 3em;
|
||||
}
|
||||
.tempc {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.current {
|
||||
padding: 1.2em 0;
|
||||
margin-bottom: 3.5em;
|
||||
}
|
||||
|
||||
.variations {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
font-weight: 300;
|
||||
color: var(--primary-text-color);
|
||||
list-style: none;
|
||||
padding: 0 1em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.variations ha-icon {
|
||||
height: 22px;
|
||||
margin-right: 5px;
|
||||
color: var(--paper-item-icon-color);
|
||||
}
|
||||
|
||||
.variations li {
|
||||
flex-basis: auto;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.variations li:nth-child(2n) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.variations li:nth-child(2n) ha-icon {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.forecast {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.day {
|
||||
flex: 1;
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: var(--primary-text-color);
|
||||
border-right: 0.1em solid #d9d9d9;
|
||||
line-height: 2;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dayname {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.forecast .day:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.forecast .day:nth-last-child(1) {
|
||||
border-right: none;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.highTemp {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.lowTemp {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
.precipitation {
|
||||
color: var(--primary-text-color);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.icon.bigger {
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
margin-top: -4em;
|
||||
position: absolute;
|
||||
left: 0em;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 5px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
background-size: contain;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
|
||||
.weather {
|
||||
font-weight: 300;
|
||||
font-size: 1.5em;
|
||||
color: var(--primary-text-color);
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
top: -0.5em;
|
||||
left: 6em;
|
||||
word-wrap: break-word;
|
||||
width: 30%;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
customElements.define("weather-card", WeatherCard);
|
||||
BIN
www/community/weather-card/weather-card.js.gz
Normal file
BIN
www/community/weather-card/weather-card.js.gz
Normal file
Binary file not shown.
Reference in New Issue
Block a user