├── .gitignore ├── Gruntfile.coffee ├── LICENSE ├── README.md ├── bower.json ├── coffee └── simulate-ui.coffee ├── css └── styles.css ├── index.html ├── js └── simulate-ui.js ├── lib ├── offline.min.js └── themes │ ├── offline-language-english-indicator.css │ ├── offline-language-english.css │ ├── offline-language-french-indicator.css │ ├── offline-language-french.css │ ├── offline-theme-chrome-indicator.css │ ├── offline-theme-chrome.css │ ├── offline-theme-dark-indicator.css │ ├── offline-theme-dark.css │ ├── offline-theme-default-indicator.css │ ├── offline-theme-default.css │ ├── offline-theme-hubspot.css │ ├── offline-theme-slide-indicator.css │ └── offline-theme-slide.css ├── notification.html ├── offline-simulate-ui.min.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | lib-cov 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | 10 | pids 11 | logs 12 | results 13 | 14 | npm-debug.log 15 | node_modules 16 | -------------------------------------------------------------------------------- /Gruntfile.coffee: -------------------------------------------------------------------------------- 1 | Path = require('path') 2 | fs = require('fs') 3 | 4 | module.exports = (grunt) -> 5 | grunt.initConfig 6 | pkg: grunt.file.readJSON("package.json") 7 | 8 | coffee: 9 | compile: 10 | expand: true 11 | flatten: true 12 | src: ['coffee/*.coffee'] 13 | dest: 'js/' 14 | ext: '.js' 15 | 16 | watch: 17 | options: 18 | atBegin: 19 | true 20 | coffee: 21 | files: ['coffee/*'] 22 | tasks: ["coffee", "uglify"] 23 | 24 | uglify: 25 | options: 26 | banner: "/*! <%= pkg.name %> <%= pkg.version %> */\n" 27 | 28 | dist: 29 | src: ['js/*'] 30 | dest: 'offline-simulate-ui.min.js' 31 | 32 | grunt.loadNpmTasks 'grunt-contrib-watch' 33 | grunt.loadNpmTasks 'grunt-contrib-uglify' 34 | grunt.loadNpmTasks 'grunt-contrib-coffee' 35 | 36 | grunt.registerTask 'default', ['coffee', 'uglify'] -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Craig Shoemaker 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Offline.js Simulate UI Plug-In 2 | 3 | [Offline.js](https://github.com/hubspot/offline) plug-in that allows you to test how your pages respond to different connectivity states without having to use brute-force methods to disable your actual connectivity. 4 | 5 | For installation and usage instructions as well as a working demo, please visit [the website](http://craigshoemaker.github.io/offlinejs-simulate-ui/). 6 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "offlinejs-simulate-ui", 3 | "version": "0.1.3", 4 | "homepage": "https://github.com/craigshoemaker/offlinejs-simulate-ui", 5 | "authors": [ 6 | "Craig Shoemaker " 7 | ], 8 | "description": "Offline.js plug-in that allows you to test how your pages respond to different connectivity states without having to use brute-force methods to disable your actual connectivity.", 9 | "main": "offline-simulate-ui.min.js", 10 | "keywords": [ 11 | "offline", 12 | "online", 13 | "internet", 14 | "network", 15 | "ajax", 16 | "notification", 17 | "javascript", 18 | "client-side" 19 | ], 20 | "dependencies": { 21 | "offline": ">= 0.7.2" 22 | }, 23 | "license": "MIT", 24 | "ignore": [ 25 | "**/.*", 26 | "node_modules", 27 | "bower_components", 28 | "coffee", 29 | "docs", 30 | "js", 31 | "test", 32 | "lib", 33 | "bower.json", 34 | "package.json", 35 | "css", 36 | "*.coffee", 37 | "*.html", 38 | "*.json", 39 | "license" 40 | ] 41 | } 42 | -------------------------------------------------------------------------------- /coffee/simulate-ui.coffee: -------------------------------------------------------------------------------- 1 | throw new Error("Offline simulate UI brought in without Offline.js") unless Offline? 2 | 3 | console.info "The offline.simulate.ui.js module is a development-only resource. Make sure to remove offline.simulate.ui.js in production." 4 | 5 | Offline.options.reconnect = 6 | initialDelay: 60 7 | 8 | load = -> 9 | # I wouldn't normally add style rules 10 | # in a script file, but this saves devs 11 | # from having to add any extra stylesheets 12 | # or polluting the main Offline stylesheets. 13 | STYLE = """ 14 | 35 | """ 36 | 37 | styleElement = document.createElement("div") 38 | styleElement.innerHTML = STYLE 39 | document.body.appendChild styleElement 40 | 41 | TEMPLATE = "" 42 | 43 | container = document.createElement("div") 44 | container.className = "offline-simulate-ui" 45 | container.innerHTML = TEMPLATE 46 | document.body.appendChild container 47 | 48 | document.getElementById("offline-simulate-check").addEventListener "click", -> 49 | Offline.options.checks ?= {} 50 | 51 | if @checked 52 | Offline.options.checks.active = 'down' 53 | else 54 | Offline.options.checks.active = 'up' 55 | 56 | Offline.check() 57 | 58 | if document.readyState in ['interactive', 'complete'] 59 | load() 60 | else 61 | document.addEventListener "DOMContentLoaded", load 62 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | .none { 2 | display:none; 3 | } 4 | 5 | .full { 6 | width:100%; 7 | } 8 | 9 | .form-group{ 10 | padding-left:25px; 11 | padding-right:25px; 12 | } 13 | 14 | .push-top-down-lg { 15 | margin-top: 4em; 16 | } 17 | 18 | .push-top-down-md { 19 | margin-top: 2em; 20 | } 21 | 22 | .push-top-down-sm { 23 | margin-top: 1em; 24 | } 25 | 26 | .push-bottom-down-lg{ 27 | margin-bottom: 4em; 28 | } 29 | 30 | ul li { 31 | margin-top:1.5em; 32 | margin-bottom:1.5em; 33 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Offline.js Simulate UI 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

Offline.js Simulate UI

17 |

Offline Simulate UI is an Offline.js 18 | plug-in that allows you to test how your pages respond to different connectivity 19 | states without having to use brute-force methods to disable your actual connectivity.

20 |
21 |
22 |
23 | Try It Out! 24 |

Click on the checkbox on the left-hand side of the window and see how the page responds.

25 |

Notice that this page uses the Offline.js Chrome theme which you can see at the top of the page.

26 |
27 |
28 | Try with the Offline.js Chrome notification 29 | View on GitHub 30 |
31 |
32 |
33 |
34 |
35 |

Demo

36 |
37 |
38 |
39 | 40 | 41 |
Have an account? Sign In
 42 | 43 | 44 |
45 | 46 |
47 | 48 |
49 |
50 | 51 | 52 |
53 | 54 |
55 | 56 |
57 |
58 | 59 | 60 |
61 | 62 |
63 | Login 64 |
65 |
66 | I forgot my password
67 |
68 |
69 |
70 |
71 |
You can only sign in when you have an active internet connection.
72 |
73 |
74 |

Notes

75 |

When you include offline-simulate-ui.min.js on your page the following configuration settings 76 | are applied:

77 | 78 |
    79 |
  • The initial reconnect delay is set to 1 minute.
    • 80 |
  • When you check the checkbox to simulate being offline, the simulation module 81 | takes control of the Offline.js 82 | checks and makes them all appear as if there is no internet connection available.
    • 83 |
84 | 85 |

Usage

86 |

Install with Bower (or download from GitHub)

87 | 88 |

Add the Script to Your Page

89 |

Note: Make sure you reference Offline.js before this script. If you install with Bower, it will pull in Offline.js as a dependency.

90 | 91 |

Respond to Offline.js Events

92 | 
<script>
 93 |     $(function(){
 94 | 
 95 |         var 
 96 |             $online = $('.online'),
 97 |             $offline = $('.offline');
 98 | 
 99 |         Offline.on('confirmed-down', function () {
100 |             $online.fadeOut(function () {
101 |                 $offline.fadeIn();
102 |             });
103 |         });
104 | 
105 |         Offline.on('confirmed-up', function () {
106 |             $offline.fadeOut(function () {
107 |                 $online.fadeIn();
108 |             });
109 |         });
110 | 
111 |     });
112 | </script>
113 |
114 |
115 | 118 | 119 | 140 | 141 | -------------------------------------------------------------------------------- /js/simulate-ui.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var load, _ref; 3 | 4 | if (typeof Offline === "undefined" || Offline === null) { 5 | throw new Error("Offline simulate UI brought in without Offline.js"); 6 | } 7 | 8 | console.info("The offline.simulate.ui.js module is a development-only resource. Make sure to remove offline.simulate.ui.js in production."); 9 | 10 | Offline.options.reconnect = { 11 | initialDelay: 60 12 | }; 13 | 14 | load = function() { 15 | var STYLE, TEMPLATE, container, styleElement; 16 | STYLE = ""; 17 | styleElement = document.createElement("div"); 18 | styleElement.innerHTML = STYLE; 19 | document.body.appendChild(styleElement); 20 | TEMPLATE = ""; 21 | container = document.createElement("div"); 22 | container.className = "offline-simulate-ui"; 23 | container.innerHTML = TEMPLATE; 24 | document.body.appendChild(container); 25 | return document.getElementById("offline-simulate-check").addEventListener("click", function() { 26 | var _base; 27 | if ((_base = Offline.options).checks == null) { 28 | _base.checks = {}; 29 | } 30 | if (this.checked) { 31 | Offline.options.checks.active = 'down'; 32 | } else { 33 | Offline.options.checks.active = 'up'; 34 | } 35 | return Offline.check(); 36 | }); 37 | }; 38 | 39 | if ((_ref = document.readyState) === 'interactive' || _ref === 'complete') { 40 | load(); 41 | } else { 42 | document.addEventListener("DOMContentLoaded", load); 43 | } 44 | 45 | }).call(this); 46 | -------------------------------------------------------------------------------- /lib/offline.min.js: -------------------------------------------------------------------------------- 1 | /*! offline 0.7.1 */ 2 | (function(){var a,b,c,d,e,f,g;d=function(a,b){var c,d,e,f;f=[];for(d in b.prototype)try{e=b.prototype[d],f.push(null==a[d]&&"function"!=typeof e?a[d]=e:void 0)}catch(g){c=g}return f},a={},null==a.options&&(a.options={}),c={checks:{xhr:{url:function(){return"/favicon.ico?_="+Math.floor(1e9*Math.random())}},image:{url:function(){return"/favicon.ico?_="+Math.floor(1e9*Math.random())}},active:"xhr"},checkOnLoad:!1,interceptRequests:!0,reconnect:!0},e=function(a,b){var c,d,e,f,g,h;for(c=a,f=b.split("."),d=g=0,h=f.length;h>g&&(e=f[d],c=c[e],"object"==typeof c);d=++g);return d===f.length-1?c:void 0},a.getOption=function(b){var d,f;return d=null!=(f=e(a.options,b))?f:e(c,b),"function"==typeof d?d():d},"function"==typeof window.addEventListener&&window.addEventListener("online",function(){return setTimeout(a.confirmUp,100)},!1),"function"==typeof window.addEventListener&&window.addEventListener("offline",function(){return a.confirmDown()},!1),a.state="up",a.markUp=function(){return a.trigger("confirmed-up"),"up"!==a.state?(a.state="up",a.trigger("up")):void 0},a.markDown=function(){return a.trigger("confirmed-down"),"down"!==a.state?(a.state="down",a.trigger("down")):void 0},f={},a.on=function(b,c,d){var e,g,h,i,j;if(g=b.split(" "),g.length>1){for(j=[],h=0,i=g.length;i>h;h++)e=g[h],j.push(a.on(e,c,d));return j}return null==f[b]&&(f[b]=[]),f[b].push([d,c])},a.off=function(a,b){var c,d,e,g,h;if(null!=f[a]){if(b){for(d=0,h=[];dd;d++)h=g[d],b=h[0],c=h[1],i.push(c.call(b));return i}},b=function(a,b,c){var d,e;return d=function(){return a.status&&a.status<12e3?b():c()},null===a.onprogress?(a.addEventListener("error",c,!1),a.addEventListener("timeout",c,!1),a.addEventListener("load",d,!1)):(e=a.onreadystatechange,a.onreadystatechange=function(){return 4===a.readyState?d():0===a.readyState&&c(),"function"==typeof e?e.apply(null,arguments):void 0})},a.checks={},a.checks.xhr=function(){var c,d;d=new XMLHttpRequest,d.offline=!1,d.open("HEAD",a.getOption("checks.xhr.url"),!0),b(d,a.markUp,a.markDown);try{d.send()}catch(e){c=e,a.markDown()}return d},a.checks.image=function(){var b;return b=document.createElement("img"),b.onerror=a.markDown,b.onload=a.markUp,void(b.src=a.getOption("checks.image.url"))},a.checks.down=a.markDown,a.checks.up=a.markUp,a.check=function(){return a.trigger("checking"),a.checks[a.getOption("checks.active")]()},a.confirmUp=a.confirmDown=a.check,a.onXHR=function(a){var b,c,e;return b=function(b,c){var d;return d=b.open,b.open=function(e,f,g,h,i){return a({type:e,url:f,async:g,flags:c,user:h,password:i,xhr:b}),d.apply(b,arguments)}},e=window.XMLHttpRequest,window.XMLHttpRequest=function(a){var c,d,f;return c=new e(a),b(c,a),f=c.setRequestHeader,c.headers={},c.setRequestHeader=function(a,b){return c.headers[a]=b,f.call(c,a,b)},d=c.overrideMimeType,c.overrideMimeType=function(a){return c.mimeType=a,d.call(c,a)},c},d(window.XMLHttpRequest,e),null!=window.XDomainRequest?(c=window.XDomainRequest,window.XDomainRequest=function(){var a;return a=new c,b(a),a},d(window.XDomainRequest,c)):void 0},g=function(){return a.getOption("interceptRequests")&&a.onXHR(function(c){var d;return d=c.xhr,d.offline!==!1?b(d,a.confirmUp,a.confirmDown):void 0}),a.getOption("checkOnLoad")?a.check():void 0},setTimeout(g,0),window.Offline=a}).call(this),function(){var a,b,c,d,e,f,g,h,i;if(!window.Offline)throw new Error("Offline Reconnect brought in without offline.js");d=Offline.reconnect={},f=null,e=function(){var a;return null!=d.state&&"inactive"!==d.state&&Offline.trigger("reconnect:stopped"),d.state="inactive",d.remaining=d.delay=null!=(a=Offline.getOption("reconnect.initialDelay"))?a:3},b=function(){var a,b;return a=null!=(b=Offline.getOption("reconnect.delay"))?b:Math.min(Math.ceil(1.5*d.delay),3600),d.remaining=d.delay=a},g=function(){return"connecting"!==d.state?(d.remaining-=1,Offline.trigger("reconnect:tick"),0===d.remaining?h():void 0):void 0},h=function(){return"waiting"===d.state?(Offline.trigger("reconnect:connecting"),d.state="connecting",Offline.check()):void 0},a=function(){return Offline.getOption("reconnect")?(e(),d.state="waiting",Offline.trigger("reconnect:started"),f=setInterval(g,1e3)):void 0},i=function(){return null!=f&&clearInterval(f),e()},c=function(){return Offline.getOption("reconnect")?"connecting"===d.state?(Offline.trigger("reconnect:failure"),d.state="waiting",b()):void 0:void 0},d.tryNow=h,e(),Offline.on("down",a),Offline.on("confirmed-down",c),Offline.on("up",i)}.call(this),function(){var a,b,c,d,e,f;if(!window.Offline)throw new Error("Requests module brought in without offline.js");c=[],f=!1,d=function(a){return Offline.trigger("requests:capture"),"down"!==Offline.state&&(f=!0),c.push(a)},e=function(a){var b,c,d,e,f,g,h,i,j;i=a.xhr,f=a.url,e=a.type,g=a.user,d=a.password,b=a.body,i.abort(),i.open(e,f,!0,g,d),j=i.headers;for(c in j)h=j[c],i.setRequestHeader(c,h);return i.mimeType&&i.overrideMimeType(i.mimeType),i.send(b)},a=function(){return c=[]},b=function(){var b,d,f,g,h,i;for(Offline.trigger("requests:flush"),f={},h=0,i=c.length;i>h;h++)d=c[h],g=d.url.replace(/(\?|&)_=[0-9]+/,function(a,b){return"?"===b?b:""}),f[""+d.type.toUpperCase()+" - "+g]=d;for(b in f)d=f[b],e(d);return a()},setTimeout(function(){return Offline.getOption("requests")!==!1?(Offline.on("confirmed-up",function(){return f?(f=!1,a()):void 0}),Offline.on("up",b),Offline.on("down",function(){return f=!1}),Offline.onXHR(function(a){var b,c,e,f,g;return e=a.xhr,b=a.async,e.offline!==!1&&(c=function(){return d(a)},g=e.send,e.send=function(b){return a.body=b,g.apply(e,arguments)},b)?null===e.onprogress?(e.addEventListener("error",c,!1),e.addEventListener("timeout",c,!1)):(f=e.onreadystatechange,e.onreadystatechange=function(){return 0===e.readyState?c():4===e.readyState&&(0===e.status||e.status>=12e3)&&c(),"function"==typeof f?f.apply(null,arguments):void 0}):void 0}),Offline.requests={flush:b,clear:a}):void 0},0)}.call(this),function(){var a,b,c,d,e;if(!Offline)throw new Error("Offline simulate brought in without offline.js");for(e=["up","down"],c=0,d=e.length;d>c;c++)a=e[c],(document.querySelector("script[data-simulate='"+a+"']")||localStorage.OFFLINE_SIMULATE===a)&&(null==Offline.options&&(Offline.options={}),null==(b=Offline.options).checks&&(b.checks={}),Offline.options.checks.active=a)}.call(this),function(){var a,b,c,d,e,f,g,h,i,j,k,l,m;if(!window.Offline)throw new Error("Offline UI brought in without offline.js");b='
',a='',e=function(a){var b;return b=document.createElement("div"),b.innerHTML=a,b.children[0]},f=d=null,c=function(a){return j(a),f.className+=" "+a},j=function(a){return f.className=f.className.replace(new RegExp("(^| )"+a.split(" ").join("|")+"( |$)","gi")," ")},h={},g=function(a,b){return c(a),null!=h[a]&&clearTimeout(h[a]),h[a]=setTimeout(function(){return j(a),delete h[a]},1e3*b)},l=function(a){var b,c,d,e;d={day:86400,hour:3600,minute:60,second:1};for(c in d)if(b=d[c],a>=b)return e=Math.floor(a/b),[e,c];return["now",""]},k=function(){var g,h;return f=e(b),document.body.appendChild(f),null!=Offline.reconnect&&Offline.getOption("reconnect")&&(f.appendChild(e(a)),g=f.querySelector(".offline-ui-retry"),h=function(a){return a.preventDefault(),Offline.reconnect.tryNow()},null!=g.addEventListener?g.addEventListener("click",h,!1):g.attachEvent("click",h)),c("offline-ui-"+Offline.state),d=f.querySelector(".offline-ui-content")},i=function(){return k(),Offline.on("up",function(){return j("offline-ui-down"),c("offline-ui-up"),g("offline-ui-up-2s",2),g("offline-ui-up-5s",5)}),Offline.on("down",function(){return j("offline-ui-up"),c("offline-ui-down"),g("offline-ui-down-2s",2),g("offline-ui-down-5s",5)}),Offline.on("reconnect:connecting",function(){return c("offline-ui-connecting"),j("offline-ui-waiting")}),Offline.on("reconnect:tick",function(){var a,b,e;return c("offline-ui-waiting"),j("offline-ui-connecting"),e=l(Offline.reconnect.remaining),a=e[0],b=e[1],d.setAttribute("data-retry-in-value",a),d.setAttribute("data-retry-in-unit",b)}),Offline.on("reconnect:stopped",function(){return j("offline-ui-connecting offline-ui-waiting"),d.setAttribute("data-retry-in-value",null),d.setAttribute("data-retry-in-unit",null)}),Offline.on("reconnect:failure",function(){return g("offline-ui-reconnect-failed-2s",2),g("offline-ui-reconnect-failed-5s",5)}),Offline.on("reconnect:success",function(){return g("offline-ui-reconnect-succeeded-2s",2),g("offline-ui-reconnect-succeeded-5s",5)})},"complete"===document.readyState?i():null!=document.addEventListener?document.addEventListener("DOMContentLoaded",i,!1):(m=document.onreadystatechange,document.onreadystatechange=function(){return"complete"===document.readyState&&i(),"function"==typeof m?m.apply(null,arguments):void 0})}.call(this); -------------------------------------------------------------------------------- /lib/themes/offline-language-english-indicator.css: -------------------------------------------------------------------------------- 1 | /* line 5, ../sass/offline-language-english-indicator.sass */ 2 | .offline-ui.offline-ui-up .offline-ui-content:before { 3 | content: "Online"; 4 | } 5 | /* line 10, ../sass/offline-language-english-indicator.sass */ 6 | .offline-ui.offline-ui-down .offline-ui-content:before { 7 | content: "Offline"; 8 | } 9 | -------------------------------------------------------------------------------- /lib/themes/offline-language-english.css: -------------------------------------------------------------------------------- 1 | /* line 6, ../sass/_content.sass */ 2 | .offline-ui .offline-ui-retry:before { 3 | content: "Reconnect"; 4 | } 5 | /* line 11, ../sass/_content.sass */ 6 | .offline-ui.offline-ui-up .offline-ui-content:before { 7 | content: "Your computer is connected to the internet."; 8 | } 9 | @media (max-width: 1024px) { 10 | /* line 11, ../sass/_content.sass */ 11 | .offline-ui.offline-ui-up .offline-ui-content:before { 12 | content: "Your device is connected to the internet."; 13 | } 14 | } 15 | @media (max-width: 568px) { 16 | /* line 11, ../sass/_content.sass */ 17 | .offline-ui.offline-ui-up .offline-ui-content:before { 18 | content: "Your device is connected."; 19 | } 20 | } 21 | /* line 22, ../sass/_content.sass */ 22 | .offline-ui.offline-ui-down .offline-ui-content:before { 23 | content: "Your computer lost its internet connection."; 24 | } 25 | @media (max-width: 1024px) { 26 | /* line 22, ../sass/_content.sass */ 27 | .offline-ui.offline-ui-down .offline-ui-content:before { 28 | content: "Your device lost its internet connection."; 29 | } 30 | } 31 | @media (max-width: 568px) { 32 | /* line 22, ../sass/_content.sass */ 33 | .offline-ui.offline-ui-down .offline-ui-content:before { 34 | content: "Your device isn't connected."; 35 | } 36 | } 37 | /* line 33, ../sass/_content.sass */ 38 | .offline-ui.offline-ui-down.offline-ui-connecting .offline-ui-content:before, .offline-ui.offline-ui-down.offline-ui-connecting-2s .offline-ui-content:before { 39 | content: "Attempting to reconnect..."; 40 | } 41 | /* line 42, ../sass/_content.sass */ 42 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="second"]:before { 43 | content: "Connection lost. Reconnecting in " attr(data-retry-in-value) " seconds..."; 44 | } 45 | @media (max-width: 568px) { 46 | /* line 42, ../sass/_content.sass */ 47 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="second"]:before { 48 | content: "Reconnecting in " attr(data-retry-in-value) "s..."; 49 | } 50 | } 51 | /* line 50, ../sass/_content.sass */ 52 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="second"][data-retry-in-value="1"]:before { 53 | content: "Connection lost. Reconnecting in " attr(data-retry-in-value) " second..."; 54 | } 55 | @media (max-width: 568px) { 56 | /* line 50, ../sass/_content.sass */ 57 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="second"][data-retry-in-value="1"]:before { 58 | content: "Reconnecting in " attr(data-retry-in-value) "s..."; 59 | } 60 | } 61 | /* line 58, ../sass/_content.sass */ 62 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="minute"]:before { 63 | content: "Connection lost. Reconnecting in " attr(data-retry-in-value) " minutes..."; 64 | } 65 | @media (max-width: 568px) { 66 | /* line 58, ../sass/_content.sass */ 67 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="minute"]:before { 68 | content: "Reconnecting in " attr(data-retry-in-value) "m..."; 69 | } 70 | } 71 | /* line 66, ../sass/_content.sass */ 72 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="minute"][data-retry-in-value="1"]:before { 73 | content: "Connection lost. Reconnecting in " attr(data-retry-in-value) " minute..."; 74 | } 75 | @media (max-width: 568px) { 76 | /* line 66, ../sass/_content.sass */ 77 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="minute"][data-retry-in-value="1"]:before { 78 | content: "Reconnecting in " attr(data-retry-in-value) "m..."; 79 | } 80 | } 81 | /* line 74, ../sass/_content.sass */ 82 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="hour"]:before { 83 | content: "Connection lost. Reconnecting in " attr(data-retry-in-value) " hours..."; 84 | } 85 | @media (max-width: 568px) { 86 | /* line 74, ../sass/_content.sass */ 87 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="hour"]:before { 88 | content: "Reconnecting in " attr(data-retry-in-value) "h..."; 89 | } 90 | } 91 | /* line 82, ../sass/_content.sass */ 92 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="hour"][data-retry-in-value="1"]:before { 93 | content: "Connection lost. Reconnecting in " attr(data-retry-in-value) " hour..."; 94 | } 95 | @media (max-width: 568px) { 96 | /* line 82, ../sass/_content.sass */ 97 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="hour"][data-retry-in-value="1"]:before { 98 | content: "Reconnecting in " attr(data-retry-in-value) "h..."; 99 | } 100 | } 101 | /* line 90, ../sass/_content.sass */ 102 | .offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry { 103 | display: none; 104 | } 105 | /* line 93, ../sass/_content.sass */ 106 | .offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s .offline-ui-content:before { 107 | content: "Connection attempt failed."; 108 | } 109 | -------------------------------------------------------------------------------- /lib/themes/offline-language-french-indicator.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* line 5, ../sass/offline-language-french-indicator.sass */ 3 | .offline-ui.offline-ui-up .offline-ui-content:before { 4 | content: "Connecté"; 5 | } 6 | /* line 10, ../sass/offline-language-french-indicator.sass */ 7 | .offline-ui.offline-ui-down .offline-ui-content:before { 8 | content: "Pas connecté"; 9 | } 10 | -------------------------------------------------------------------------------- /lib/themes/offline-language-french.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* line 6, ../sass/_content.sass */ 3 | .offline-ui .offline-ui-retry:before { 4 | content: "Rebranchez"; 5 | } 6 | /* line 11, ../sass/_content.sass */ 7 | .offline-ui.offline-ui-up .offline-ui-content:before { 8 | content: "L'ordinateur est connecté à l'Internet."; 9 | } 10 | @media (max-width: 1024px) { 11 | /* line 11, ../sass/_content.sass */ 12 | .offline-ui.offline-ui-up .offline-ui-content:before { 13 | content: "Votre appareil est connecté à l'internet."; 14 | } 15 | } 16 | @media (max-width: 568px) { 17 | /* line 11, ../sass/_content.sass */ 18 | .offline-ui.offline-ui-up .offline-ui-content:before { 19 | content: "Votre appareil est connecté."; 20 | } 21 | } 22 | /* line 22, ../sass/_content.sass */ 23 | .offline-ui.offline-ui-down .offline-ui-content:before { 24 | content: "Votre ordinateur a perdu sa connexion internet."; 25 | } 26 | @media (max-width: 1024px) { 27 | /* line 22, ../sass/_content.sass */ 28 | .offline-ui.offline-ui-down .offline-ui-content:before { 29 | content: "Votre appareil a perdu sa connexion internet."; 30 | } 31 | } 32 | @media (max-width: 568px) { 33 | /* line 22, ../sass/_content.sass */ 34 | .offline-ui.offline-ui-down .offline-ui-content:before { 35 | content: "Votre appareil n'est pas branché."; 36 | } 37 | } 38 | /* line 33, ../sass/_content.sass */ 39 | .offline-ui.offline-ui-down.offline-ui-connecting .offline-ui-content:before, .offline-ui.offline-ui-down.offline-ui-connecting-2s .offline-ui-content:before { 40 | content: "Une tentative de reconnexion..."; 41 | } 42 | /* line 42, ../sass/_content.sass */ 43 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="second"]:before { 44 | content: "Connexion perdue. Reconnexion en " attr(data-retry-in-value) " secondes..."; 45 | } 46 | @media (max-width: 568px) { 47 | /* line 42, ../sass/_content.sass */ 48 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="second"]:before { 49 | content: "Reconnexion en " attr(data-retry-in-value) "s..."; 50 | } 51 | } 52 | /* line 50, ../sass/_content.sass */ 53 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="second"][data-retry-in-value="1"]:before { 54 | content: "Connexion perdue. Reconnexion en " attr(data-retry-in-value) " seconde..."; 55 | } 56 | @media (max-width: 568px) { 57 | /* line 50, ../sass/_content.sass */ 58 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="second"][data-retry-in-value="1"]:before { 59 | content: "Reconnexion en " attr(data-retry-in-value) "s..."; 60 | } 61 | } 62 | /* line 58, ../sass/_content.sass */ 63 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="minute"]:before { 64 | content: "Connexion perdue. Reconnexion en " attr(data-retry-in-value) " minutes..."; 65 | } 66 | @media (max-width: 568px) { 67 | /* line 58, ../sass/_content.sass */ 68 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="minute"]:before { 69 | content: "Reconnexion en " attr(data-retry-in-value) "m..."; 70 | } 71 | } 72 | /* line 66, ../sass/_content.sass */ 73 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="minute"][data-retry-in-value="1"]:before { 74 | content: "Connexion perdue. Reconnexion en " attr(data-retry-in-value) " minute..."; 75 | } 76 | @media (max-width: 568px) { 77 | /* line 66, ../sass/_content.sass */ 78 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="minute"][data-retry-in-value="1"]:before { 79 | content: "Reconnexion en " attr(data-retry-in-value) "m..."; 80 | } 81 | } 82 | /* line 74, ../sass/_content.sass */ 83 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="hour"]:before { 84 | content: "Connexion perdue. Reconnexion en " attr(data-retry-in-value) " heures..."; 85 | } 86 | @media (max-width: 568px) { 87 | /* line 74, ../sass/_content.sass */ 88 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="hour"]:before { 89 | content: "Reconnexion en " attr(data-retry-in-value) "h..."; 90 | } 91 | } 92 | /* line 82, ../sass/_content.sass */ 93 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="hour"][data-retry-in-value="1"]:before { 94 | content: "Connexion perdue. Reconnexion en " attr(data-retry-in-value) " heure..."; 95 | } 96 | @media (max-width: 568px) { 97 | /* line 82, ../sass/_content.sass */ 98 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="hour"][data-retry-in-value="1"]:before { 99 | content: "Reconnexion en " attr(data-retry-in-value) "h..."; 100 | } 101 | } 102 | /* line 90, ../sass/_content.sass */ 103 | .offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry { 104 | display: none; 105 | } 106 | /* line 93, ../sass/_content.sass */ 107 | .offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s .offline-ui-content:before { 108 | content: "La tentative de connexion a échoué."; 109 | } 110 | -------------------------------------------------------------------------------- /lib/themes/offline-theme-chrome-indicator.css: -------------------------------------------------------------------------------- 1 | /* line 3, ../sass/_offline-theme-base-indicator.sass */ 2 | .offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after { 3 | -webkit-box-sizing: border-box; 4 | -moz-box-sizing: border-box; 5 | box-sizing: border-box; 6 | } 7 | 8 | /* line 6, ../sass/_offline-theme-base-indicator.sass */ 9 | .offline-ui { 10 | display: none; 11 | position: fixed; 12 | background: white; 13 | z-index: 800; 14 | display: inline-block; 15 | } 16 | /* line 13, ../sass/_offline-theme-base-indicator.sass */ 17 | .offline-ui .offline-ui-retry { 18 | display: none; 19 | } 20 | /* line 16, ../sass/_offline-theme-base-indicator.sass */ 21 | .offline-ui.offline-ui-up { 22 | display: block; 23 | } 24 | /* line 19, ../sass/_offline-theme-base-indicator.sass */ 25 | .offline-ui.offline-ui-down { 26 | display: block; 27 | } 28 | 29 | /* line 8, ../sass/offline-theme-chrome-indicator.sass */ 30 | .offline-ui { 31 | -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); 32 | -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); 33 | box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); 34 | -webkit-border-radius: 4px 4px 0 0; 35 | -moz-border-radius: 4px 4px 0 0; 36 | -ms-border-radius: 4px 4px 0 0; 37 | -o-border-radius: 4px 4px 0 0; 38 | border-radius: 4px 4px 0 0; 39 | font-family: "Lucida Grande", sans-serif; 40 | font-size: 12px; 41 | padding: 7px; 42 | width: 69px; 43 | background: #f6f6f6; 44 | color: #888888; 45 | bottom: 0; 46 | left: 20px; 47 | } 48 | /* line 20, ../sass/offline-theme-chrome-indicator.sass */ 49 | .offline-ui .offline-ui-content { 50 | padding-left: 16px; 51 | } 52 | /* line 23, ../sass/offline-theme-chrome-indicator.sass */ 53 | .offline-ui .offline-ui-content:after { 54 | -webkit-border-radius: 50%; 55 | -moz-border-radius: 50%; 56 | -ms-border-radius: 50%; 57 | -o-border-radius: 50%; 58 | border-radius: 50%; 59 | content: " "; 60 | display: block; 61 | position: absolute; 62 | top: 0; 63 | bottom: 1px; 64 | left: 8px; 65 | margin: auto; 66 | height: 9px; 67 | width: 9px; 68 | } 69 | /* line 37, ../sass/offline-theme-chrome-indicator.sass */ 70 | .offline-ui.offline-ui-up .offline-ui-content:after { 71 | background: #80d580; 72 | } 73 | /* line 42, ../sass/offline-theme-chrome-indicator.sass */ 74 | .offline-ui.offline-ui-down .offline-ui-content:after { 75 | background: #ec8787; 76 | } 77 | -------------------------------------------------------------------------------- /lib/themes/offline-theme-chrome.css: -------------------------------------------------------------------------------- 1 | /* line 4, ../sass/_offline-theme-base.sass */ 2 | .offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after { 3 | -webkit-box-sizing: border-box; 4 | -moz-box-sizing: border-box; 5 | box-sizing: border-box; 6 | } 7 | 8 | /* line 7, ../sass/_offline-theme-base.sass */ 9 | .offline-ui { 10 | display: none; 11 | position: fixed; 12 | background: white; 13 | z-index: 800; 14 | margin: auto; 15 | top: 0; 16 | left: 0; 17 | right: 0; 18 | } 19 | /* line 17, ../sass/_offline-theme-base.sass */ 20 | .offline-ui .offline-ui-content:before { 21 | display: inline; 22 | } 23 | /* line 20, ../sass/_offline-theme-base.sass */ 24 | .offline-ui .offline-ui-retry { 25 | -webkit-user-select: none; 26 | -moz-user-select: none; 27 | user-select: none; 28 | display: none; 29 | } 30 | /* line 24, ../sass/_offline-theme-base.sass */ 31 | .offline-ui .offline-ui-retry:before { 32 | display: inline; 33 | } 34 | /* line 29, ../sass/_offline-theme-base.sass */ 35 | .offline-ui.offline-ui-up.offline-ui-up-5s { 36 | display: block; 37 | } 38 | /* line 32, ../sass/_offline-theme-base.sass */ 39 | .offline-ui.offline-ui-down { 40 | display: block; 41 | } 42 | /* line 37, ../sass/_offline-theme-base.sass */ 43 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry { 44 | display: block; 45 | } 46 | /* line 42, ../sass/_offline-theme-base.sass */ 47 | .offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry { 48 | display: none; 49 | } 50 | 51 | @-webkit-keyframes offline-dropin { 52 | /* line 40, ../sass/_keyframes.sass */ 53 | 0% { 54 | transform: translateY(0); 55 | -webkit-transform: translateY(0); 56 | -moz-transform: translateY(0); 57 | -ms-transform: translateY(0); 58 | -o-transform: translateY(0); 59 | opacity: 0; 60 | } 61 | 62 | /* line 43, ../sass/_keyframes.sass */ 63 | 1% { 64 | transform: translateY(-800px); 65 | -webkit-transform: translateY(-800px); 66 | -moz-transform: translateY(-800px); 67 | -ms-transform: translateY(-800px); 68 | -o-transform: translateY(-800px); 69 | opacity: 0; 70 | } 71 | 72 | /* line 48, ../sass/_keyframes.sass */ 73 | 2% { 74 | transform: translateY(-800px); 75 | -webkit-transform: translateY(-800px); 76 | -moz-transform: translateY(-800px); 77 | -ms-transform: translateY(-800px); 78 | -o-transform: translateY(-800px); 79 | opacity: 1; 80 | } 81 | 82 | /* line 51, ../sass/_keyframes.sass */ 83 | 100% { 84 | transform: translateY(0); 85 | -webkit-transform: translateY(0); 86 | -moz-transform: translateY(0); 87 | -ms-transform: translateY(0); 88 | -o-transform: translateY(0); 89 | opacity: 1; 90 | } 91 | } 92 | 93 | @-moz-keyframes offline-dropin { 94 | /* line 40, ../sass/_keyframes.sass */ 95 | 0% { 96 | transform: translateY(0); 97 | -webkit-transform: translateY(0); 98 | -moz-transform: translateY(0); 99 | -ms-transform: translateY(0); 100 | -o-transform: translateY(0); 101 | opacity: 0; 102 | } 103 | 104 | /* line 43, ../sass/_keyframes.sass */ 105 | 1% { 106 | transform: translateY(-800px); 107 | -webkit-transform: translateY(-800px); 108 | -moz-transform: translateY(-800px); 109 | -ms-transform: translateY(-800px); 110 | -o-transform: translateY(-800px); 111 | opacity: 0; 112 | } 113 | 114 | /* line 48, ../sass/_keyframes.sass */ 115 | 2% { 116 | transform: translateY(-800px); 117 | -webkit-transform: translateY(-800px); 118 | -moz-transform: translateY(-800px); 119 | -ms-transform: translateY(-800px); 120 | -o-transform: translateY(-800px); 121 | opacity: 1; 122 | } 123 | 124 | /* line 51, ../sass/_keyframes.sass */ 125 | 100% { 126 | transform: translateY(0); 127 | -webkit-transform: translateY(0); 128 | -moz-transform: translateY(0); 129 | -ms-transform: translateY(0); 130 | -o-transform: translateY(0); 131 | opacity: 1; 132 | } 133 | } 134 | 135 | @-ms-keyframes offline-dropin { 136 | /* line 40, ../sass/_keyframes.sass */ 137 | 0% { 138 | transform: translateY(0); 139 | -webkit-transform: translateY(0); 140 | -moz-transform: translateY(0); 141 | -ms-transform: translateY(0); 142 | -o-transform: translateY(0); 143 | opacity: 0; 144 | } 145 | 146 | /* line 43, ../sass/_keyframes.sass */ 147 | 1% { 148 | transform: translateY(-800px); 149 | -webkit-transform: translateY(-800px); 150 | -moz-transform: translateY(-800px); 151 | -ms-transform: translateY(-800px); 152 | -o-transform: translateY(-800px); 153 | opacity: 0; 154 | } 155 | 156 | /* line 48, ../sass/_keyframes.sass */ 157 | 2% { 158 | transform: translateY(-800px); 159 | -webkit-transform: translateY(-800px); 160 | -moz-transform: translateY(-800px); 161 | -ms-transform: translateY(-800px); 162 | -o-transform: translateY(-800px); 163 | opacity: 1; 164 | } 165 | 166 | /* line 51, ../sass/_keyframes.sass */ 167 | 100% { 168 | transform: translateY(0); 169 | -webkit-transform: translateY(0); 170 | -moz-transform: translateY(0); 171 | -ms-transform: translateY(0); 172 | -o-transform: translateY(0); 173 | opacity: 1; 174 | } 175 | } 176 | 177 | @-o-keyframes offline-dropin { 178 | /* line 40, ../sass/_keyframes.sass */ 179 | 0% { 180 | transform: translateY(0); 181 | -webkit-transform: translateY(0); 182 | -moz-transform: translateY(0); 183 | -ms-transform: translateY(0); 184 | -o-transform: translateY(0); 185 | opacity: 0; 186 | } 187 | 188 | /* line 43, ../sass/_keyframes.sass */ 189 | 1% { 190 | transform: translateY(-800px); 191 | -webkit-transform: translateY(-800px); 192 | -moz-transform: translateY(-800px); 193 | -ms-transform: translateY(-800px); 194 | -o-transform: translateY(-800px); 195 | opacity: 0; 196 | } 197 | 198 | /* line 48, ../sass/_keyframes.sass */ 199 | 2% { 200 | transform: translateY(-800px); 201 | -webkit-transform: translateY(-800px); 202 | -moz-transform: translateY(-800px); 203 | -ms-transform: translateY(-800px); 204 | -o-transform: translateY(-800px); 205 | opacity: 1; 206 | } 207 | 208 | /* line 51, ../sass/_keyframes.sass */ 209 | 100% { 210 | transform: translateY(0); 211 | -webkit-transform: translateY(0); 212 | -moz-transform: translateY(0); 213 | -ms-transform: translateY(0); 214 | -o-transform: translateY(0); 215 | opacity: 1; 216 | } 217 | } 218 | 219 | @keyframes offline-dropin { 220 | /* line 40, ../sass/_keyframes.sass */ 221 | 0% { 222 | transform: translateY(0); 223 | -webkit-transform: translateY(0); 224 | -moz-transform: translateY(0); 225 | -ms-transform: translateY(0); 226 | -o-transform: translateY(0); 227 | opacity: 0; 228 | } 229 | 230 | /* line 43, ../sass/_keyframes.sass */ 231 | 1% { 232 | transform: translateY(-800px); 233 | -webkit-transform: translateY(-800px); 234 | -moz-transform: translateY(-800px); 235 | -ms-transform: translateY(-800px); 236 | -o-transform: translateY(-800px); 237 | opacity: 0; 238 | } 239 | 240 | /* line 48, ../sass/_keyframes.sass */ 241 | 2% { 242 | transform: translateY(-800px); 243 | -webkit-transform: translateY(-800px); 244 | -moz-transform: translateY(-800px); 245 | -ms-transform: translateY(-800px); 246 | -o-transform: translateY(-800px); 247 | opacity: 1; 248 | } 249 | 250 | /* line 51, ../sass/_keyframes.sass */ 251 | 100% { 252 | transform: translateY(0); 253 | -webkit-transform: translateY(0); 254 | -moz-transform: translateY(0); 255 | -ms-transform: translateY(0); 256 | -o-transform: translateY(0); 257 | opacity: 1; 258 | } 259 | } 260 | 261 | @-webkit-keyframes offline-dropout { 262 | /* line 57, ../sass/_keyframes.sass */ 263 | 0% { 264 | transform: translateY(0); 265 | -webkit-transform: translateY(0); 266 | -moz-transform: translateY(0); 267 | -ms-transform: translateY(0); 268 | -o-transform: translateY(0); 269 | } 270 | 271 | /* line 59, ../sass/_keyframes.sass */ 272 | 100% { 273 | transform: translateY(-800px); 274 | -webkit-transform: translateY(-800px); 275 | -moz-transform: translateY(-800px); 276 | -ms-transform: translateY(-800px); 277 | -o-transform: translateY(-800px); 278 | } 279 | } 280 | 281 | @-moz-keyframes offline-dropout { 282 | /* line 57, ../sass/_keyframes.sass */ 283 | 0% { 284 | transform: translateY(0); 285 | -webkit-transform: translateY(0); 286 | -moz-transform: translateY(0); 287 | -ms-transform: translateY(0); 288 | -o-transform: translateY(0); 289 | } 290 | 291 | /* line 59, ../sass/_keyframes.sass */ 292 | 100% { 293 | transform: translateY(-800px); 294 | -webkit-transform: translateY(-800px); 295 | -moz-transform: translateY(-800px); 296 | -ms-transform: translateY(-800px); 297 | -o-transform: translateY(-800px); 298 | } 299 | } 300 | 301 | @-ms-keyframes offline-dropout { 302 | /* line 57, ../sass/_keyframes.sass */ 303 | 0% { 304 | transform: translateY(0); 305 | -webkit-transform: translateY(0); 306 | -moz-transform: translateY(0); 307 | -ms-transform: translateY(0); 308 | -o-transform: translateY(0); 309 | } 310 | 311 | /* line 59, ../sass/_keyframes.sass */ 312 | 100% { 313 | transform: translateY(-800px); 314 | -webkit-transform: translateY(-800px); 315 | -moz-transform: translateY(-800px); 316 | -ms-transform: translateY(-800px); 317 | -o-transform: translateY(-800px); 318 | } 319 | } 320 | 321 | @-o-keyframes offline-dropout { 322 | /* line 57, ../sass/_keyframes.sass */ 323 | 0% { 324 | transform: translateY(0); 325 | -webkit-transform: translateY(0); 326 | -moz-transform: translateY(0); 327 | -ms-transform: translateY(0); 328 | -o-transform: translateY(0); 329 | } 330 | 331 | /* line 59, ../sass/_keyframes.sass */ 332 | 100% { 333 | transform: translateY(-800px); 334 | -webkit-transform: translateY(-800px); 335 | -moz-transform: translateY(-800px); 336 | -ms-transform: translateY(-800px); 337 | -o-transform: translateY(-800px); 338 | } 339 | } 340 | 341 | @keyframes offline-dropout { 342 | /* line 57, ../sass/_keyframes.sass */ 343 | 0% { 344 | transform: translateY(0); 345 | -webkit-transform: translateY(0); 346 | -moz-transform: translateY(0); 347 | -ms-transform: translateY(0); 348 | -o-transform: translateY(0); 349 | } 350 | 351 | /* line 59, ../sass/_keyframes.sass */ 352 | 100% { 353 | transform: translateY(-800px); 354 | -webkit-transform: translateY(-800px); 355 | -moz-transform: translateY(-800px); 356 | -ms-transform: translateY(-800px); 357 | -o-transform: translateY(-800px); 358 | } 359 | } 360 | 361 | @-webkit-keyframes offline-rotation { 362 | /* line 64, ../sass/_keyframes.sass */ 363 | 0% { 364 | transform: rotate(0deg); 365 | -webkit-transform: rotate(0deg); 366 | -moz-transform: rotate(0deg); 367 | -ms-transform: rotate(0deg); 368 | -o-transform: rotate(0deg); 369 | } 370 | 371 | /* line 66, ../sass/_keyframes.sass */ 372 | 100% { 373 | transform: rotate(359deg); 374 | -webkit-transform: rotate(359deg); 375 | -moz-transform: rotate(359deg); 376 | -ms-transform: rotate(359deg); 377 | -o-transform: rotate(359deg); 378 | } 379 | } 380 | 381 | @-moz-keyframes offline-rotation { 382 | /* line 64, ../sass/_keyframes.sass */ 383 | 0% { 384 | transform: rotate(0deg); 385 | -webkit-transform: rotate(0deg); 386 | -moz-transform: rotate(0deg); 387 | -ms-transform: rotate(0deg); 388 | -o-transform: rotate(0deg); 389 | } 390 | 391 | /* line 66, ../sass/_keyframes.sass */ 392 | 100% { 393 | transform: rotate(359deg); 394 | -webkit-transform: rotate(359deg); 395 | -moz-transform: rotate(359deg); 396 | -ms-transform: rotate(359deg); 397 | -o-transform: rotate(359deg); 398 | } 399 | } 400 | 401 | @-ms-keyframes offline-rotation { 402 | /* line 64, ../sass/_keyframes.sass */ 403 | 0% { 404 | transform: rotate(0deg); 405 | -webkit-transform: rotate(0deg); 406 | -moz-transform: rotate(0deg); 407 | -ms-transform: rotate(0deg); 408 | -o-transform: rotate(0deg); 409 | } 410 | 411 | /* line 66, ../sass/_keyframes.sass */ 412 | 100% { 413 | transform: rotate(359deg); 414 | -webkit-transform: rotate(359deg); 415 | -moz-transform: rotate(359deg); 416 | -ms-transform: rotate(359deg); 417 | -o-transform: rotate(359deg); 418 | } 419 | } 420 | 421 | @-o-keyframes offline-rotation { 422 | /* line 64, ../sass/_keyframes.sass */ 423 | 0% { 424 | transform: rotate(0deg); 425 | -webkit-transform: rotate(0deg); 426 | -moz-transform: rotate(0deg); 427 | -ms-transform: rotate(0deg); 428 | -o-transform: rotate(0deg); 429 | } 430 | 431 | /* line 66, ../sass/_keyframes.sass */ 432 | 100% { 433 | transform: rotate(359deg); 434 | -webkit-transform: rotate(359deg); 435 | -moz-transform: rotate(359deg); 436 | -ms-transform: rotate(359deg); 437 | -o-transform: rotate(359deg); 438 | } 439 | } 440 | 441 | @keyframes offline-rotation { 442 | /* line 64, ../sass/_keyframes.sass */ 443 | 0% { 444 | transform: rotate(0deg); 445 | -webkit-transform: rotate(0deg); 446 | -moz-transform: rotate(0deg); 447 | -ms-transform: rotate(0deg); 448 | -o-transform: rotate(0deg); 449 | } 450 | 451 | /* line 66, ../sass/_keyframes.sass */ 452 | 100% { 453 | transform: rotate(359deg); 454 | -webkit-transform: rotate(359deg); 455 | -moz-transform: rotate(359deg); 456 | -ms-transform: rotate(359deg); 457 | -o-transform: rotate(359deg); 458 | } 459 | } 460 | 461 | /* line 16, ../sass/offline-theme-chrome.sass */ 462 | .offline-ui { 463 | -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 1em rgba(0, 0, 0, 0.3); 464 | -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 1em rgba(0, 0, 0, 0.3); 465 | box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 1em rgba(0, 0, 0, 0.3); 466 | font-family: "Lucida Grande", sans-serif; 467 | font-size: 14px; 468 | padding: 1em; 469 | width: 38em; 470 | max-width: 100%; 471 | background: #f6f6f6; 472 | color: #444444; 473 | overflow: hidden; 474 | } 475 | /* line 27, ../sass/offline-theme-chrome.sass */ 476 | .offline-ui .offline-ui-content { 477 | padding-left: 2em; 478 | } 479 | /* line 30, ../sass/offline-theme-chrome.sass */ 480 | .offline-ui .offline-ui-content:before { 481 | line-height: 1.25em; 482 | } 483 | /* line 33, ../sass/offline-theme-chrome.sass */ 484 | .offline-ui .offline-ui-content:after { 485 | -webkit-border-radius: 50%; 486 | -moz-border-radius: 50%; 487 | -ms-border-radius: 50%; 488 | -o-border-radius: 50%; 489 | border-radius: 50%; 490 | content: " "; 491 | display: block; 492 | position: absolute; 493 | top: 0; 494 | bottom: 0; 495 | left: 1em; 496 | margin: auto; 497 | height: 1em; 498 | width: 1em; 499 | } 500 | /* line 45, ../sass/offline-theme-chrome.sass */ 501 | .offline-ui .offline-ui-retry { 502 | -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75); 503 | -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75); 504 | box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75); 505 | -webkit-border-radius: 2px; 506 | -moz-border-radius: 2px; 507 | -ms-border-radius: 2px; 508 | -o-border-radius: 2px; 509 | border-radius: 2px; 510 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ededed), color-stop(38%, #ededed), color-stop(100%, #dedede)); 511 | background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); 512 | background-image: -moz-linear-gradient(#ededed, #ededed 38%, #dedede); 513 | background-image: -o-linear-gradient(#ededed, #ededed 38%, #dedede); 514 | background-image: linear-gradient(#ededed, #ededed 38%, #dedede); 515 | position: absolute; 516 | right: 4em; 517 | top: 1em; 518 | bottom: 1em; 519 | border: 1px solid rgba(0, 0, 0, 0.25); 520 | text-shadow: 0 1px 0 #f0f0f0; 521 | padding: 0 1em; 522 | line-height: 1.6em; 523 | height: 1.7em; 524 | margin: auto; 525 | font-size: 12px; 526 | text-decoration: none; 527 | color: inherit; 528 | } 529 | /* line 63, ../sass/offline-theme-chrome.sass */ 530 | .offline-ui.offline-ui-up { 531 | -webkit-animation: offline-dropout forwards 0.5s 2s; 532 | -moz-animation: offline-dropout forwards 0.5s 2s; 533 | -ms-animation: offline-dropout forwards 0.5s 2s; 534 | -o-animation: offline-dropout forwards 0.5s 2s; 535 | animation: offline-dropout forwards 0.5s 2s; 536 | -webkit-backface-visibility: hidden; 537 | } 538 | /* line 66, ../sass/offline-theme-chrome.sass */ 539 | .offline-ui.offline-ui-up .offline-ui-content:after { 540 | background: #80d580; 541 | } 542 | /* line 69, ../sass/offline-theme-chrome.sass */ 543 | .offline-ui.offline-ui-down { 544 | -webkit-animation: offline-dropin 0.5s; 545 | -moz-animation: offline-dropin 0.5s; 546 | -ms-animation: offline-dropin 0.5s; 547 | -o-animation: offline-dropin 0.5s; 548 | animation: offline-dropin 0.5s; 549 | -webkit-backface-visibility: hidden; 550 | } 551 | /* line 72, ../sass/offline-theme-chrome.sass */ 552 | .offline-ui.offline-ui-down .offline-ui-content:after { 553 | background: #ec8787; 554 | } 555 | /* line 75, ../sass/offline-theme-chrome.sass */ 556 | .offline-ui.offline-ui-down.offline-ui-connecting, .offline-ui.offline-ui-down.offline-ui-waiting { 557 | padding-right: 3em; 558 | } 559 | /* line 78, ../sass/offline-theme-chrome.sass */ 560 | .offline-ui.offline-ui-down.offline-ui-connecting .offline-ui-content:after, .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content:after { 561 | background: #ec8787; 562 | } 563 | /* line 81, ../sass/offline-theme-chrome.sass */ 564 | .offline-ui.offline-ui-down.offline-ui-connecting:after, .offline-ui.offline-ui-down.offline-ui-waiting:after { 565 | -webkit-animation: offline-rotation 0.7s linear infinite; 566 | -moz-animation: offline-rotation 0.7s linear infinite; 567 | -ms-animation: offline-rotation 0.7s linear infinite; 568 | -o-animation: offline-rotation 0.7s linear infinite; 569 | animation: offline-rotation 0.7s linear infinite; 570 | -webkit-backface-visibility: hidden; 571 | -webkit-border-radius: 50%; 572 | -moz-border-radius: 50%; 573 | -ms-border-radius: 50%; 574 | -o-border-radius: 50%; 575 | border-radius: 50%; 576 | content: " "; 577 | display: block; 578 | position: absolute; 579 | right: 1em; 580 | top: 0; 581 | bottom: 0; 582 | margin: auto; 583 | height: 1em; 584 | width: 1em; 585 | border: 2px solid rgba(0, 0, 0, 0); 586 | border-top-color: rgba(0, 0, 0, 0.5); 587 | border-left-color: rgba(0, 0, 0, 0.5); 588 | opacity: 0.7; 589 | } 590 | /* line 98, ../sass/offline-theme-chrome.sass */ 591 | .offline-ui.offline-ui-down.offline-ui-waiting { 592 | padding-right: 11em; 593 | } 594 | /* line 101, ../sass/offline-theme-chrome.sass */ 595 | .offline-ui.offline-ui-down.offline-ui-waiting.offline-ui-reconnect-failed-2s { 596 | padding-right: 0; 597 | } 598 | -------------------------------------------------------------------------------- /lib/themes/offline-theme-dark-indicator.css: -------------------------------------------------------------------------------- 1 | /* line 3, ../sass/_offline-theme-base-indicator.sass */ 2 | .offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after { 3 | -webkit-box-sizing: border-box; 4 | -moz-box-sizing: border-box; 5 | box-sizing: border-box; 6 | } 7 | 8 | /* line 6, ../sass/_offline-theme-base-indicator.sass */ 9 | .offline-ui { 10 | display: none; 11 | position: fixed; 12 | background: white; 13 | z-index: 800; 14 | display: inline-block; 15 | } 16 | /* line 13, ../sass/_offline-theme-base-indicator.sass */ 17 | .offline-ui .offline-ui-retry { 18 | display: none; 19 | } 20 | /* line 16, ../sass/_offline-theme-base-indicator.sass */ 21 | .offline-ui.offline-ui-up { 22 | display: block; 23 | } 24 | /* line 19, ../sass/_offline-theme-base-indicator.sass */ 25 | .offline-ui.offline-ui-down { 26 | display: block; 27 | } 28 | 29 | /* line 8, ../sass/offline-theme-dark-indicator.sass */ 30 | .offline-ui { 31 | -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); 32 | -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); 33 | box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); 34 | -webkit-border-radius: 4px 4px 0 0; 35 | -moz-border-radius: 4px 4px 0 0; 36 | -ms-border-radius: 4px 4px 0 0; 37 | -o-border-radius: 4px 4px 0 0; 38 | border-radius: 4px 4px 0 0; 39 | font-family: "Helvetica Neue", sans-serif; 40 | font-weight: 300; 41 | padding: 1em; 42 | width: 6.3em; 43 | background: black; 44 | color: #cccccc; 45 | bottom: 0; 46 | left: 20px; 47 | } 48 | /* line 20, ../sass/offline-theme-dark-indicator.sass */ 49 | .offline-ui .offline-ui-content { 50 | padding-left: 1.5em; 51 | } 52 | /* line 23, ../sass/offline-theme-dark-indicator.sass */ 53 | .offline-ui .offline-ui-content:after { 54 | -webkit-border-radius: 50%; 55 | -moz-border-radius: 50%; 56 | -ms-border-radius: 50%; 57 | -o-border-radius: 50%; 58 | border-radius: 50%; 59 | content: " "; 60 | display: block; 61 | position: absolute; 62 | top: 0; 63 | bottom: 0; 64 | left: 1em; 65 | margin: auto; 66 | height: 0.8em; 67 | width: 0.8em; 68 | } 69 | /* line 37, ../sass/offline-theme-dark-indicator.sass */ 70 | .offline-ui.offline-ui-up .offline-ui-content:after { 71 | background: #80d580; 72 | } 73 | /* line 42, ../sass/offline-theme-dark-indicator.sass */ 74 | .offline-ui.offline-ui-down .offline-ui-content:after { 75 | background: #e24949; 76 | } 77 | -------------------------------------------------------------------------------- /lib/themes/offline-theme-dark.css: -------------------------------------------------------------------------------- 1 | /* line 4, ../sass/_offline-theme-base.sass */ 2 | .offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after { 3 | -webkit-box-sizing: border-box; 4 | -moz-box-sizing: border-box; 5 | box-sizing: border-box; 6 | } 7 | 8 | /* line 7, ../sass/_offline-theme-base.sass */ 9 | .offline-ui { 10 | display: none; 11 | position: fixed; 12 | background: white; 13 | z-index: 800; 14 | margin: auto; 15 | top: 0; 16 | left: 0; 17 | right: 0; 18 | } 19 | /* line 17, ../sass/_offline-theme-base.sass */ 20 | .offline-ui .offline-ui-content:before { 21 | display: inline; 22 | } 23 | /* line 20, ../sass/_offline-theme-base.sass */ 24 | .offline-ui .offline-ui-retry { 25 | -webkit-user-select: none; 26 | -moz-user-select: none; 27 | user-select: none; 28 | display: none; 29 | } 30 | /* line 24, ../sass/_offline-theme-base.sass */ 31 | .offline-ui .offline-ui-retry:before { 32 | display: inline; 33 | } 34 | /* line 29, ../sass/_offline-theme-base.sass */ 35 | .offline-ui.offline-ui-up.offline-ui-up-5s { 36 | display: block; 37 | } 38 | /* line 32, ../sass/_offline-theme-base.sass */ 39 | .offline-ui.offline-ui-down { 40 | display: block; 41 | } 42 | /* line 37, ../sass/_offline-theme-base.sass */ 43 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry { 44 | display: block; 45 | } 46 | /* line 42, ../sass/_offline-theme-base.sass */ 47 | .offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry { 48 | display: none; 49 | } 50 | 51 | @-webkit-keyframes offline-dropin { 52 | /* line 40, ../sass/_keyframes.sass */ 53 | 0% { 54 | transform: translateY(0); 55 | -webkit-transform: translateY(0); 56 | -moz-transform: translateY(0); 57 | -ms-transform: translateY(0); 58 | -o-transform: translateY(0); 59 | opacity: 0; 60 | } 61 | 62 | /* line 43, ../sass/_keyframes.sass */ 63 | 1% { 64 | transform: translateY(-800px); 65 | -webkit-transform: translateY(-800px); 66 | -moz-transform: translateY(-800px); 67 | -ms-transform: translateY(-800px); 68 | -o-transform: translateY(-800px); 69 | opacity: 0; 70 | } 71 | 72 | /* line 48, ../sass/_keyframes.sass */ 73 | 2% { 74 | transform: translateY(-800px); 75 | -webkit-transform: translateY(-800px); 76 | -moz-transform: translateY(-800px); 77 | -ms-transform: translateY(-800px); 78 | -o-transform: translateY(-800px); 79 | opacity: 1; 80 | } 81 | 82 | /* line 51, ../sass/_keyframes.sass */ 83 | 100% { 84 | transform: translateY(0); 85 | -webkit-transform: translateY(0); 86 | -moz-transform: translateY(0); 87 | -ms-transform: translateY(0); 88 | -o-transform: translateY(0); 89 | opacity: 1; 90 | } 91 | } 92 | 93 | @-moz-keyframes offline-dropin { 94 | /* line 40, ../sass/_keyframes.sass */ 95 | 0% { 96 | transform: translateY(0); 97 | -webkit-transform: translateY(0); 98 | -moz-transform: translateY(0); 99 | -ms-transform: translateY(0); 100 | -o-transform: translateY(0); 101 | opacity: 0; 102 | } 103 | 104 | /* line 43, ../sass/_keyframes.sass */ 105 | 1% { 106 | transform: translateY(-800px); 107 | -webkit-transform: translateY(-800px); 108 | -moz-transform: translateY(-800px); 109 | -ms-transform: translateY(-800px); 110 | -o-transform: translateY(-800px); 111 | opacity: 0; 112 | } 113 | 114 | /* line 48, ../sass/_keyframes.sass */ 115 | 2% { 116 | transform: translateY(-800px); 117 | -webkit-transform: translateY(-800px); 118 | -moz-transform: translateY(-800px); 119 | -ms-transform: translateY(-800px); 120 | -o-transform: translateY(-800px); 121 | opacity: 1; 122 | } 123 | 124 | /* line 51, ../sass/_keyframes.sass */ 125 | 100% { 126 | transform: translateY(0); 127 | -webkit-transform: translateY(0); 128 | -moz-transform: translateY(0); 129 | -ms-transform: translateY(0); 130 | -o-transform: translateY(0); 131 | opacity: 1; 132 | } 133 | } 134 | 135 | @-ms-keyframes offline-dropin { 136 | /* line 40, ../sass/_keyframes.sass */ 137 | 0% { 138 | transform: translateY(0); 139 | -webkit-transform: translateY(0); 140 | -moz-transform: translateY(0); 141 | -ms-transform: translateY(0); 142 | -o-transform: translateY(0); 143 | opacity: 0; 144 | } 145 | 146 | /* line 43, ../sass/_keyframes.sass */ 147 | 1% { 148 | transform: translateY(-800px); 149 | -webkit-transform: translateY(-800px); 150 | -moz-transform: translateY(-800px); 151 | -ms-transform: translateY(-800px); 152 | -o-transform: translateY(-800px); 153 | opacity: 0; 154 | } 155 | 156 | /* line 48, ../sass/_keyframes.sass */ 157 | 2% { 158 | transform: translateY(-800px); 159 | -webkit-transform: translateY(-800px); 160 | -moz-transform: translateY(-800px); 161 | -ms-transform: translateY(-800px); 162 | -o-transform: translateY(-800px); 163 | opacity: 1; 164 | } 165 | 166 | /* line 51, ../sass/_keyframes.sass */ 167 | 100% { 168 | transform: translateY(0); 169 | -webkit-transform: translateY(0); 170 | -moz-transform: translateY(0); 171 | -ms-transform: translateY(0); 172 | -o-transform: translateY(0); 173 | opacity: 1; 174 | } 175 | } 176 | 177 | @-o-keyframes offline-dropin { 178 | /* line 40, ../sass/_keyframes.sass */ 179 | 0% { 180 | transform: translateY(0); 181 | -webkit-transform: translateY(0); 182 | -moz-transform: translateY(0); 183 | -ms-transform: translateY(0); 184 | -o-transform: translateY(0); 185 | opacity: 0; 186 | } 187 | 188 | /* line 43, ../sass/_keyframes.sass */ 189 | 1% { 190 | transform: translateY(-800px); 191 | -webkit-transform: translateY(-800px); 192 | -moz-transform: translateY(-800px); 193 | -ms-transform: translateY(-800px); 194 | -o-transform: translateY(-800px); 195 | opacity: 0; 196 | } 197 | 198 | /* line 48, ../sass/_keyframes.sass */ 199 | 2% { 200 | transform: translateY(-800px); 201 | -webkit-transform: translateY(-800px); 202 | -moz-transform: translateY(-800px); 203 | -ms-transform: translateY(-800px); 204 | -o-transform: translateY(-800px); 205 | opacity: 1; 206 | } 207 | 208 | /* line 51, ../sass/_keyframes.sass */ 209 | 100% { 210 | transform: translateY(0); 211 | -webkit-transform: translateY(0); 212 | -moz-transform: translateY(0); 213 | -ms-transform: translateY(0); 214 | -o-transform: translateY(0); 215 | opacity: 1; 216 | } 217 | } 218 | 219 | @keyframes offline-dropin { 220 | /* line 40, ../sass/_keyframes.sass */ 221 | 0% { 222 | transform: translateY(0); 223 | -webkit-transform: translateY(0); 224 | -moz-transform: translateY(0); 225 | -ms-transform: translateY(0); 226 | -o-transform: translateY(0); 227 | opacity: 0; 228 | } 229 | 230 | /* line 43, ../sass/_keyframes.sass */ 231 | 1% { 232 | transform: translateY(-800px); 233 | -webkit-transform: translateY(-800px); 234 | -moz-transform: translateY(-800px); 235 | -ms-transform: translateY(-800px); 236 | -o-transform: translateY(-800px); 237 | opacity: 0; 238 | } 239 | 240 | /* line 48, ../sass/_keyframes.sass */ 241 | 2% { 242 | transform: translateY(-800px); 243 | -webkit-transform: translateY(-800px); 244 | -moz-transform: translateY(-800px); 245 | -ms-transform: translateY(-800px); 246 | -o-transform: translateY(-800px); 247 | opacity: 1; 248 | } 249 | 250 | /* line 51, ../sass/_keyframes.sass */ 251 | 100% { 252 | transform: translateY(0); 253 | -webkit-transform: translateY(0); 254 | -moz-transform: translateY(0); 255 | -ms-transform: translateY(0); 256 | -o-transform: translateY(0); 257 | opacity: 1; 258 | } 259 | } 260 | 261 | @-webkit-keyframes offline-dropout { 262 | /* line 57, ../sass/_keyframes.sass */ 263 | 0% { 264 | transform: translateY(0); 265 | -webkit-transform: translateY(0); 266 | -moz-transform: translateY(0); 267 | -ms-transform: translateY(0); 268 | -o-transform: translateY(0); 269 | } 270 | 271 | /* line 59, ../sass/_keyframes.sass */ 272 | 100% { 273 | transform: translateY(-800px); 274 | -webkit-transform: translateY(-800px); 275 | -moz-transform: translateY(-800px); 276 | -ms-transform: translateY(-800px); 277 | -o-transform: translateY(-800px); 278 | } 279 | } 280 | 281 | @-moz-keyframes offline-dropout { 282 | /* line 57, ../sass/_keyframes.sass */ 283 | 0% { 284 | transform: translateY(0); 285 | -webkit-transform: translateY(0); 286 | -moz-transform: translateY(0); 287 | -ms-transform: translateY(0); 288 | -o-transform: translateY(0); 289 | } 290 | 291 | /* line 59, ../sass/_keyframes.sass */ 292 | 100% { 293 | transform: translateY(-800px); 294 | -webkit-transform: translateY(-800px); 295 | -moz-transform: translateY(-800px); 296 | -ms-transform: translateY(-800px); 297 | -o-transform: translateY(-800px); 298 | } 299 | } 300 | 301 | @-ms-keyframes offline-dropout { 302 | /* line 57, ../sass/_keyframes.sass */ 303 | 0% { 304 | transform: translateY(0); 305 | -webkit-transform: translateY(0); 306 | -moz-transform: translateY(0); 307 | -ms-transform: translateY(0); 308 | -o-transform: translateY(0); 309 | } 310 | 311 | /* line 59, ../sass/_keyframes.sass */ 312 | 100% { 313 | transform: translateY(-800px); 314 | -webkit-transform: translateY(-800px); 315 | -moz-transform: translateY(-800px); 316 | -ms-transform: translateY(-800px); 317 | -o-transform: translateY(-800px); 318 | } 319 | } 320 | 321 | @-o-keyframes offline-dropout { 322 | /* line 57, ../sass/_keyframes.sass */ 323 | 0% { 324 | transform: translateY(0); 325 | -webkit-transform: translateY(0); 326 | -moz-transform: translateY(0); 327 | -ms-transform: translateY(0); 328 | -o-transform: translateY(0); 329 | } 330 | 331 | /* line 59, ../sass/_keyframes.sass */ 332 | 100% { 333 | transform: translateY(-800px); 334 | -webkit-transform: translateY(-800px); 335 | -moz-transform: translateY(-800px); 336 | -ms-transform: translateY(-800px); 337 | -o-transform: translateY(-800px); 338 | } 339 | } 340 | 341 | @keyframes offline-dropout { 342 | /* line 57, ../sass/_keyframes.sass */ 343 | 0% { 344 | transform: translateY(0); 345 | -webkit-transform: translateY(0); 346 | -moz-transform: translateY(0); 347 | -ms-transform: translateY(0); 348 | -o-transform: translateY(0); 349 | } 350 | 351 | /* line 59, ../sass/_keyframes.sass */ 352 | 100% { 353 | transform: translateY(-800px); 354 | -webkit-transform: translateY(-800px); 355 | -moz-transform: translateY(-800px); 356 | -ms-transform: translateY(-800px); 357 | -o-transform: translateY(-800px); 358 | } 359 | } 360 | 361 | @-webkit-keyframes offline-rotation { 362 | /* line 64, ../sass/_keyframes.sass */ 363 | 0% { 364 | transform: rotate(0deg); 365 | -webkit-transform: rotate(0deg); 366 | -moz-transform: rotate(0deg); 367 | -ms-transform: rotate(0deg); 368 | -o-transform: rotate(0deg); 369 | } 370 | 371 | /* line 66, ../sass/_keyframes.sass */ 372 | 100% { 373 | transform: rotate(359deg); 374 | -webkit-transform: rotate(359deg); 375 | -moz-transform: rotate(359deg); 376 | -ms-transform: rotate(359deg); 377 | -o-transform: rotate(359deg); 378 | } 379 | } 380 | 381 | @-moz-keyframes offline-rotation { 382 | /* line 64, ../sass/_keyframes.sass */ 383 | 0% { 384 | transform: rotate(0deg); 385 | -webkit-transform: rotate(0deg); 386 | -moz-transform: rotate(0deg); 387 | -ms-transform: rotate(0deg); 388 | -o-transform: rotate(0deg); 389 | } 390 | 391 | /* line 66, ../sass/_keyframes.sass */ 392 | 100% { 393 | transform: rotate(359deg); 394 | -webkit-transform: rotate(359deg); 395 | -moz-transform: rotate(359deg); 396 | -ms-transform: rotate(359deg); 397 | -o-transform: rotate(359deg); 398 | } 399 | } 400 | 401 | @-ms-keyframes offline-rotation { 402 | /* line 64, ../sass/_keyframes.sass */ 403 | 0% { 404 | transform: rotate(0deg); 405 | -webkit-transform: rotate(0deg); 406 | -moz-transform: rotate(0deg); 407 | -ms-transform: rotate(0deg); 408 | -o-transform: rotate(0deg); 409 | } 410 | 411 | /* line 66, ../sass/_keyframes.sass */ 412 | 100% { 413 | transform: rotate(359deg); 414 | -webkit-transform: rotate(359deg); 415 | -moz-transform: rotate(359deg); 416 | -ms-transform: rotate(359deg); 417 | -o-transform: rotate(359deg); 418 | } 419 | } 420 | 421 | @-o-keyframes offline-rotation { 422 | /* line 64, ../sass/_keyframes.sass */ 423 | 0% { 424 | transform: rotate(0deg); 425 | -webkit-transform: rotate(0deg); 426 | -moz-transform: rotate(0deg); 427 | -ms-transform: rotate(0deg); 428 | -o-transform: rotate(0deg); 429 | } 430 | 431 | /* line 66, ../sass/_keyframes.sass */ 432 | 100% { 433 | transform: rotate(359deg); 434 | -webkit-transform: rotate(359deg); 435 | -moz-transform: rotate(359deg); 436 | -ms-transform: rotate(359deg); 437 | -o-transform: rotate(359deg); 438 | } 439 | } 440 | 441 | @keyframes offline-rotation { 442 | /* line 64, ../sass/_keyframes.sass */ 443 | 0% { 444 | transform: rotate(0deg); 445 | -webkit-transform: rotate(0deg); 446 | -moz-transform: rotate(0deg); 447 | -ms-transform: rotate(0deg); 448 | -o-transform: rotate(0deg); 449 | } 450 | 451 | /* line 66, ../sass/_keyframes.sass */ 452 | 100% { 453 | transform: rotate(359deg); 454 | -webkit-transform: rotate(359deg); 455 | -moz-transform: rotate(359deg); 456 | -ms-transform: rotate(359deg); 457 | -o-transform: rotate(359deg); 458 | } 459 | } 460 | 461 | /* line 16, ../sass/offline-theme-dark.sass */ 462 | .offline-ui { 463 | -webkit-border-radius: 0 0 4px 4px; 464 | -moz-border-radius: 0 0 4px 4px; 465 | -ms-border-radius: 0 0 4px 4px; 466 | -o-border-radius: 0 0 4px 4px; 467 | border-radius: 0 0 4px 4px; 468 | font-family: "Helvetica Neue", sans-serif; 469 | font-weight: 300; 470 | padding: 1em; 471 | width: 38em; 472 | max-width: 100%; 473 | background: black; 474 | color: #cccccc; 475 | overflow: hidden; 476 | } 477 | @media (max-width: 38em) { 478 | /* line 16, ../sass/offline-theme-dark.sass */ 479 | .offline-ui { 480 | -webkit-border-radius: 0; 481 | -moz-border-radius: 0; 482 | -ms-border-radius: 0; 483 | -o-border-radius: 0; 484 | border-radius: 0; 485 | } 486 | } 487 | /* line 30, ../sass/offline-theme-dark.sass */ 488 | .offline-ui .offline-ui-content { 489 | padding-left: 2em; 490 | } 491 | /* line 33, ../sass/offline-theme-dark.sass */ 492 | .offline-ui .offline-ui-content:before { 493 | line-height: 1.25em; 494 | } 495 | /* line 36, ../sass/offline-theme-dark.sass */ 496 | .offline-ui .offline-ui-content:after { 497 | -webkit-border-radius: 50%; 498 | -moz-border-radius: 50%; 499 | -ms-border-radius: 50%; 500 | -o-border-radius: 50%; 501 | border-radius: 50%; 502 | content: " "; 503 | display: block; 504 | position: absolute; 505 | top: 0; 506 | bottom: 0; 507 | left: 1em; 508 | margin: auto; 509 | height: 1em; 510 | width: 1em; 511 | } 512 | /* line 48, ../sass/offline-theme-dark.sass */ 513 | .offline-ui .offline-ui-retry { 514 | position: absolute; 515 | right: 3em; 516 | top: 0; 517 | bottom: 0; 518 | background: rgba(255, 255, 255, 0.2); 519 | text-decoration: none; 520 | color: inherit; 521 | line-height: 3.5em; 522 | height: 3.5em; 523 | margin: auto; 524 | padding: 0 1em; 525 | } 526 | /* line 61, ../sass/offline-theme-dark.sass */ 527 | .offline-ui.offline-ui-up { 528 | -webkit-animation: offline-dropout forwards 0.5s 2s; 529 | -moz-animation: offline-dropout forwards 0.5s 2s; 530 | -ms-animation: offline-dropout forwards 0.5s 2s; 531 | -o-animation: offline-dropout forwards 0.5s 2s; 532 | animation: offline-dropout forwards 0.5s 2s; 533 | -webkit-backface-visibility: hidden; 534 | } 535 | /* line 64, ../sass/offline-theme-dark.sass */ 536 | .offline-ui.offline-ui-up .offline-ui-content:after { 537 | background: #80d580; 538 | } 539 | /* line 67, ../sass/offline-theme-dark.sass */ 540 | .offline-ui.offline-ui-down { 541 | -webkit-animation: offline-dropin 0.5s; 542 | -moz-animation: offline-dropin 0.5s; 543 | -ms-animation: offline-dropin 0.5s; 544 | -o-animation: offline-dropin 0.5s; 545 | animation: offline-dropin 0.5s; 546 | -webkit-backface-visibility: hidden; 547 | } 548 | /* line 70, ../sass/offline-theme-dark.sass */ 549 | .offline-ui.offline-ui-down .offline-ui-content:after { 550 | background: #e24949; 551 | } 552 | /* line 73, ../sass/offline-theme-dark.sass */ 553 | .offline-ui.offline-ui-down.offline-ui-connecting, .offline-ui.offline-ui-down.offline-ui-waiting { 554 | padding-right: 3em; 555 | } 556 | /* line 76, ../sass/offline-theme-dark.sass */ 557 | .offline-ui.offline-ui-down.offline-ui-connecting .offline-ui-content:after, .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content:after { 558 | background: #e24949; 559 | } 560 | /* line 79, ../sass/offline-theme-dark.sass */ 561 | .offline-ui.offline-ui-down.offline-ui-connecting:after, .offline-ui.offline-ui-down.offline-ui-waiting:after { 562 | -webkit-animation: offline-rotation 0.7s linear infinite; 563 | -moz-animation: offline-rotation 0.7s linear infinite; 564 | -ms-animation: offline-rotation 0.7s linear infinite; 565 | -o-animation: offline-rotation 0.7s linear infinite; 566 | animation: offline-rotation 0.7s linear infinite; 567 | -webkit-backface-visibility: hidden; 568 | -webkit-border-radius: 50%; 569 | -moz-border-radius: 50%; 570 | -ms-border-radius: 50%; 571 | -o-border-radius: 50%; 572 | border-radius: 50%; 573 | content: " "; 574 | display: block; 575 | position: absolute; 576 | right: 1em; 577 | top: 0; 578 | bottom: 0; 579 | margin: auto; 580 | height: 1em; 581 | width: 1em; 582 | border: 2px solid transparent; 583 | border-top-color: rgba(255, 255, 255, 0.5); 584 | border-left-color: rgba(255, 255, 255, 0.5); 585 | opacity: 0.7; 586 | } 587 | /* line 96, ../sass/offline-theme-dark.sass */ 588 | .offline-ui.offline-ui-down.offline-ui-waiting { 589 | padding-right: 11em; 590 | } 591 | /* line 99, ../sass/offline-theme-dark.sass */ 592 | .offline-ui.offline-ui-down.offline-ui-waiting.offline-ui-reconnect-failed-2s { 593 | padding-right: 0; 594 | } 595 | -------------------------------------------------------------------------------- /lib/themes/offline-theme-default-indicator.css: -------------------------------------------------------------------------------- 1 | /* line 3, ../sass/_offline-theme-base-indicator.sass */ 2 | .offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after { 3 | -webkit-box-sizing: border-box; 4 | -moz-box-sizing: border-box; 5 | box-sizing: border-box; 6 | } 7 | 8 | /* line 6, ../sass/_offline-theme-base-indicator.sass */ 9 | .offline-ui { 10 | display: none; 11 | position: fixed; 12 | background: white; 13 | z-index: 800; 14 | display: inline-block; 15 | } 16 | /* line 13, ../sass/_offline-theme-base-indicator.sass */ 17 | .offline-ui .offline-ui-retry { 18 | display: none; 19 | } 20 | /* line 16, ../sass/_offline-theme-base-indicator.sass */ 21 | .offline-ui.offline-ui-up { 22 | display: block; 23 | } 24 | /* line 19, ../sass/_offline-theme-base-indicator.sass */ 25 | .offline-ui.offline-ui-down { 26 | display: block; 27 | } 28 | 29 | /* line 11, ../sass/offline-theme-default-indicator.sass */ 30 | .offline-ui { 31 | -webkit-border-radius: 4px; 32 | -moz-border-radius: 4px; 33 | -ms-border-radius: 4px; 34 | -o-border-radius: 4px; 35 | border-radius: 4px; 36 | font-family: "Helvetica Neue", sans-serif; 37 | padding: 1em; 38 | width: 5em; 39 | max-width: 100%; 40 | bottom: 1em; 41 | left: 1em; 42 | } 43 | /* line 20, ../sass/offline-theme-default-indicator.sass */ 44 | .offline-ui.offline-ui-up { 45 | background: #d6e9c6; 46 | color: #468847; 47 | } 48 | /* line 24, ../sass/offline-theme-default-indicator.sass */ 49 | .offline-ui.offline-ui-down { 50 | background: #ec8787; 51 | color: #551313; 52 | } 53 | -------------------------------------------------------------------------------- /lib/themes/offline-theme-default.css: -------------------------------------------------------------------------------- 1 | /* line 4, ../sass/_offline-theme-base.sass */ 2 | .offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after { 3 | -webkit-box-sizing: border-box; 4 | -moz-box-sizing: border-box; 5 | box-sizing: border-box; 6 | } 7 | 8 | /* line 7, ../sass/_offline-theme-base.sass */ 9 | .offline-ui { 10 | display: none; 11 | position: fixed; 12 | background: white; 13 | z-index: 800; 14 | margin: auto; 15 | top: 0; 16 | left: 0; 17 | right: 0; 18 | } 19 | /* line 17, ../sass/_offline-theme-base.sass */ 20 | .offline-ui .offline-ui-content:before { 21 | display: inline; 22 | } 23 | /* line 20, ../sass/_offline-theme-base.sass */ 24 | .offline-ui .offline-ui-retry { 25 | -webkit-user-select: none; 26 | -moz-user-select: none; 27 | user-select: none; 28 | display: none; 29 | } 30 | /* line 24, ../sass/_offline-theme-base.sass */ 31 | .offline-ui .offline-ui-retry:before { 32 | display: inline; 33 | } 34 | /* line 29, ../sass/_offline-theme-base.sass */ 35 | .offline-ui.offline-ui-up.offline-ui-up-5s { 36 | display: block; 37 | } 38 | /* line 32, ../sass/_offline-theme-base.sass */ 39 | .offline-ui.offline-ui-down { 40 | display: block; 41 | } 42 | /* line 37, ../sass/_offline-theme-base.sass */ 43 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry { 44 | display: block; 45 | } 46 | /* line 42, ../sass/_offline-theme-base.sass */ 47 | .offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry { 48 | display: none; 49 | } 50 | 51 | @-webkit-keyframes offline-fadein { 52 | /* line 6, ../sass/_keyframes.sass */ 53 | 0% { 54 | opacity: 0; 55 | } 56 | 57 | /* line 8, ../sass/_keyframes.sass */ 58 | 100% { 59 | opacity: 1; 60 | } 61 | } 62 | 63 | @-moz-keyframes offline-fadein { 64 | /* line 6, ../sass/_keyframes.sass */ 65 | 0% { 66 | opacity: 0; 67 | } 68 | 69 | /* line 8, ../sass/_keyframes.sass */ 70 | 100% { 71 | opacity: 1; 72 | } 73 | } 74 | 75 | @-ms-keyframes offline-fadein { 76 | /* line 6, ../sass/_keyframes.sass */ 77 | 0% { 78 | opacity: 0; 79 | } 80 | 81 | /* line 8, ../sass/_keyframes.sass */ 82 | 100% { 83 | opacity: 1; 84 | } 85 | } 86 | 87 | @-o-keyframes offline-fadein { 88 | /* line 6, ../sass/_keyframes.sass */ 89 | 0% { 90 | opacity: 0; 91 | } 92 | 93 | /* line 8, ../sass/_keyframes.sass */ 94 | 100% { 95 | opacity: 1; 96 | } 97 | } 98 | 99 | @keyframes offline-fadein { 100 | /* line 6, ../sass/_keyframes.sass */ 101 | 0% { 102 | opacity: 0; 103 | } 104 | 105 | /* line 8, ../sass/_keyframes.sass */ 106 | 100% { 107 | opacity: 1; 108 | } 109 | } 110 | 111 | @-webkit-keyframes offline-fadeout-and-hide { 112 | /* line 20, ../sass/_keyframes.sass */ 113 | 0% { 114 | opacity: 1; 115 | display: block; 116 | } 117 | 118 | /* line 23, ../sass/_keyframes.sass */ 119 | 99% { 120 | opacity: 0; 121 | display: block; 122 | } 123 | 124 | /* line 26, ../sass/_keyframes.sass */ 125 | 100% { 126 | opacity: 0; 127 | display: none; 128 | } 129 | } 130 | 131 | @-moz-keyframes offline-fadeout-and-hide { 132 | /* line 20, ../sass/_keyframes.sass */ 133 | 0% { 134 | opacity: 1; 135 | display: block; 136 | } 137 | 138 | /* line 23, ../sass/_keyframes.sass */ 139 | 99% { 140 | opacity: 0; 141 | display: block; 142 | } 143 | 144 | /* line 26, ../sass/_keyframes.sass */ 145 | 100% { 146 | opacity: 0; 147 | display: none; 148 | } 149 | } 150 | 151 | @-ms-keyframes offline-fadeout-and-hide { 152 | /* line 20, ../sass/_keyframes.sass */ 153 | 0% { 154 | opacity: 1; 155 | display: block; 156 | } 157 | 158 | /* line 23, ../sass/_keyframes.sass */ 159 | 99% { 160 | opacity: 0; 161 | display: block; 162 | } 163 | 164 | /* line 26, ../sass/_keyframes.sass */ 165 | 100% { 166 | opacity: 0; 167 | display: none; 168 | } 169 | } 170 | 171 | @-o-keyframes offline-fadeout-and-hide { 172 | /* line 20, ../sass/_keyframes.sass */ 173 | 0% { 174 | opacity: 1; 175 | display: block; 176 | } 177 | 178 | /* line 23, ../sass/_keyframes.sass */ 179 | 99% { 180 | opacity: 0; 181 | display: block; 182 | } 183 | 184 | /* line 26, ../sass/_keyframes.sass */ 185 | 100% { 186 | opacity: 0; 187 | display: none; 188 | } 189 | } 190 | 191 | @keyframes offline-fadeout-and-hide { 192 | /* line 20, ../sass/_keyframes.sass */ 193 | 0% { 194 | opacity: 1; 195 | display: block; 196 | } 197 | 198 | /* line 23, ../sass/_keyframes.sass */ 199 | 99% { 200 | opacity: 0; 201 | display: block; 202 | } 203 | 204 | /* line 26, ../sass/_keyframes.sass */ 205 | 100% { 206 | opacity: 0; 207 | display: none; 208 | } 209 | } 210 | 211 | @-webkit-keyframes offline-rotation { 212 | /* line 64, ../sass/_keyframes.sass */ 213 | 0% { 214 | transform: rotate(0deg); 215 | -webkit-transform: rotate(0deg); 216 | -moz-transform: rotate(0deg); 217 | -ms-transform: rotate(0deg); 218 | -o-transform: rotate(0deg); 219 | } 220 | 221 | /* line 66, ../sass/_keyframes.sass */ 222 | 100% { 223 | transform: rotate(359deg); 224 | -webkit-transform: rotate(359deg); 225 | -moz-transform: rotate(359deg); 226 | -ms-transform: rotate(359deg); 227 | -o-transform: rotate(359deg); 228 | } 229 | } 230 | 231 | @-moz-keyframes offline-rotation { 232 | /* line 64, ../sass/_keyframes.sass */ 233 | 0% { 234 | transform: rotate(0deg); 235 | -webkit-transform: rotate(0deg); 236 | -moz-transform: rotate(0deg); 237 | -ms-transform: rotate(0deg); 238 | -o-transform: rotate(0deg); 239 | } 240 | 241 | /* line 66, ../sass/_keyframes.sass */ 242 | 100% { 243 | transform: rotate(359deg); 244 | -webkit-transform: rotate(359deg); 245 | -moz-transform: rotate(359deg); 246 | -ms-transform: rotate(359deg); 247 | -o-transform: rotate(359deg); 248 | } 249 | } 250 | 251 | @-ms-keyframes offline-rotation { 252 | /* line 64, ../sass/_keyframes.sass */ 253 | 0% { 254 | transform: rotate(0deg); 255 | -webkit-transform: rotate(0deg); 256 | -moz-transform: rotate(0deg); 257 | -ms-transform: rotate(0deg); 258 | -o-transform: rotate(0deg); 259 | } 260 | 261 | /* line 66, ../sass/_keyframes.sass */ 262 | 100% { 263 | transform: rotate(359deg); 264 | -webkit-transform: rotate(359deg); 265 | -moz-transform: rotate(359deg); 266 | -ms-transform: rotate(359deg); 267 | -o-transform: rotate(359deg); 268 | } 269 | } 270 | 271 | @-o-keyframes offline-rotation { 272 | /* line 64, ../sass/_keyframes.sass */ 273 | 0% { 274 | transform: rotate(0deg); 275 | -webkit-transform: rotate(0deg); 276 | -moz-transform: rotate(0deg); 277 | -ms-transform: rotate(0deg); 278 | -o-transform: rotate(0deg); 279 | } 280 | 281 | /* line 66, ../sass/_keyframes.sass */ 282 | 100% { 283 | transform: rotate(359deg); 284 | -webkit-transform: rotate(359deg); 285 | -moz-transform: rotate(359deg); 286 | -ms-transform: rotate(359deg); 287 | -o-transform: rotate(359deg); 288 | } 289 | } 290 | 291 | @keyframes offline-rotation { 292 | /* line 64, ../sass/_keyframes.sass */ 293 | 0% { 294 | transform: rotate(0deg); 295 | -webkit-transform: rotate(0deg); 296 | -moz-transform: rotate(0deg); 297 | -ms-transform: rotate(0deg); 298 | -o-transform: rotate(0deg); 299 | } 300 | 301 | /* line 66, ../sass/_keyframes.sass */ 302 | 100% { 303 | transform: rotate(359deg); 304 | -webkit-transform: rotate(359deg); 305 | -moz-transform: rotate(359deg); 306 | -ms-transform: rotate(359deg); 307 | -o-transform: rotate(359deg); 308 | } 309 | } 310 | 311 | /* line 21, ../sass/offline-theme-default.sass */ 312 | .offline-ui { 313 | -webkit-border-radius: 4px; 314 | -moz-border-radius: 4px; 315 | -ms-border-radius: 4px; 316 | -o-border-radius: 4px; 317 | border-radius: 4px; 318 | font-family: "Helvetica Neue", sans-serif; 319 | padding: 1em; 320 | top: 1em; 321 | width: 38em; 322 | max-width: 100%; 323 | overflow: hidden; 324 | } 325 | @media (max-width: 38em) { 326 | /* line 21, ../sass/offline-theme-default.sass */ 327 | .offline-ui { 328 | -webkit-border-radius: 0; 329 | -moz-border-radius: 0; 330 | -ms-border-radius: 0; 331 | -o-border-radius: 0; 332 | border-radius: 0; 333 | top: 0; 334 | } 335 | } 336 | /* line 34, ../sass/offline-theme-default.sass */ 337 | .offline-ui .offline-ui-content:before { 338 | line-height: 1.25em; 339 | } 340 | /* line 37, ../sass/offline-theme-default.sass */ 341 | .offline-ui .offline-ui-retry { 342 | position: absolute; 343 | right: 3em; 344 | top: 0; 345 | bottom: 0; 346 | background: rgba(0, 0, 0, 0.1); 347 | text-decoration: none; 348 | color: inherit; 349 | line-height: 3.5em; 350 | height: 3.5em; 351 | margin: auto; 352 | padding: 0 1em; 353 | } 354 | /* line 50, ../sass/offline-theme-default.sass */ 355 | .offline-ui.offline-ui-up { 356 | -webkit-animation: offline-fadeout-and-hide forwards 0.5s 2s; 357 | -moz-animation: offline-fadeout-and-hide forwards 0.5s 2s; 358 | -ms-animation: offline-fadeout-and-hide forwards 0.5s 2s; 359 | -o-animation: offline-fadeout-and-hide forwards 0.5s 2s; 360 | animation: offline-fadeout-and-hide forwards 0.5s 2s; 361 | -webkit-backface-visibility: hidden; 362 | background: #d6e9c6; 363 | color: #468847; 364 | } 365 | /* line 55, ../sass/offline-theme-default.sass */ 366 | .offline-ui.offline-ui-down { 367 | -webkit-animation: offline-fadein 0.5s; 368 | -moz-animation: offline-fadein 0.5s; 369 | -ms-animation: offline-fadein 0.5s; 370 | -o-animation: offline-fadein 0.5s; 371 | animation: offline-fadein 0.5s; 372 | -webkit-backface-visibility: hidden; 373 | background: #ec8787; 374 | color: #551313; 375 | } 376 | /* line 60, ../sass/offline-theme-default.sass */ 377 | .offline-ui.offline-ui-down.offline-ui-connecting, .offline-ui.offline-ui-down.offline-ui-waiting { 378 | background: #f8ecad; 379 | color: #7c6d1f; 380 | padding-right: 3em; 381 | } 382 | /* line 65, ../sass/offline-theme-default.sass */ 383 | .offline-ui.offline-ui-down.offline-ui-connecting:after, .offline-ui.offline-ui-down.offline-ui-waiting:after { 384 | -webkit-animation: offline-rotation 0.7s linear infinite; 385 | -moz-animation: offline-rotation 0.7s linear infinite; 386 | -ms-animation: offline-rotation 0.7s linear infinite; 387 | -o-animation: offline-rotation 0.7s linear infinite; 388 | animation: offline-rotation 0.7s linear infinite; 389 | -webkit-backface-visibility: hidden; 390 | -webkit-border-radius: 50%; 391 | -moz-border-radius: 50%; 392 | -ms-border-radius: 50%; 393 | -o-border-radius: 50%; 394 | border-radius: 50%; 395 | content: " "; 396 | display: block; 397 | position: absolute; 398 | right: 1em; 399 | top: 0; 400 | bottom: 0; 401 | margin: auto; 402 | height: 1em; 403 | width: 1em; 404 | border: 2px solid rgba(0, 0, 0, 0); 405 | border-top-color: #7c6d1f; 406 | border-left-color: #7c6d1f; 407 | opacity: 0.7; 408 | } 409 | /* line 82, ../sass/offline-theme-default.sass */ 410 | .offline-ui.offline-ui-down.offline-ui-waiting { 411 | padding-right: 11em; 412 | } 413 | /* line 85, ../sass/offline-theme-default.sass */ 414 | .offline-ui.offline-ui-down.offline-ui-waiting.offline-ui-reconnect-failed-2s { 415 | padding-right: 0; 416 | } 417 | -------------------------------------------------------------------------------- /lib/themes/offline-theme-hubspot.css: -------------------------------------------------------------------------------- 1 | /* line 4, ../sass/_offline-theme-base.sass */ 2 | .offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after { 3 | -webkit-box-sizing: border-box; 4 | -moz-box-sizing: border-box; 5 | box-sizing: border-box; 6 | } 7 | 8 | /* line 7, ../sass/_offline-theme-base.sass */ 9 | .offline-ui { 10 | display: none; 11 | position: fixed; 12 | background: white; 13 | z-index: 800; 14 | margin: auto; 15 | top: 0; 16 | left: 0; 17 | right: 0; 18 | } 19 | /* line 17, ../sass/_offline-theme-base.sass */ 20 | .offline-ui .offline-ui-content:before { 21 | display: inline; 22 | } 23 | /* line 20, ../sass/_offline-theme-base.sass */ 24 | .offline-ui .offline-ui-retry { 25 | -webkit-user-select: none; 26 | -moz-user-select: none; 27 | user-select: none; 28 | display: none; 29 | } 30 | /* line 24, ../sass/_offline-theme-base.sass */ 31 | .offline-ui .offline-ui-retry:before { 32 | display: inline; 33 | } 34 | /* line 29, ../sass/_offline-theme-base.sass */ 35 | .offline-ui.offline-ui-up.offline-ui-up-5s { 36 | display: block; 37 | } 38 | /* line 32, ../sass/_offline-theme-base.sass */ 39 | .offline-ui.offline-ui-down { 40 | display: block; 41 | } 42 | /* line 37, ../sass/_offline-theme-base.sass */ 43 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry { 44 | display: block; 45 | } 46 | /* line 42, ../sass/_offline-theme-base.sass */ 47 | .offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry { 48 | display: none; 49 | } 50 | 51 | @-webkit-keyframes offline-fadein { 52 | /* line 6, ../sass/_keyframes.sass */ 53 | 0% { 54 | opacity: 0; 55 | } 56 | 57 | /* line 8, ../sass/_keyframes.sass */ 58 | 100% { 59 | opacity: 1; 60 | } 61 | } 62 | 63 | @-moz-keyframes offline-fadein { 64 | /* line 6, ../sass/_keyframes.sass */ 65 | 0% { 66 | opacity: 0; 67 | } 68 | 69 | /* line 8, ../sass/_keyframes.sass */ 70 | 100% { 71 | opacity: 1; 72 | } 73 | } 74 | 75 | @-ms-keyframes offline-fadein { 76 | /* line 6, ../sass/_keyframes.sass */ 77 | 0% { 78 | opacity: 0; 79 | } 80 | 81 | /* line 8, ../sass/_keyframes.sass */ 82 | 100% { 83 | opacity: 1; 84 | } 85 | } 86 | 87 | @-o-keyframes offline-fadein { 88 | /* line 6, ../sass/_keyframes.sass */ 89 | 0% { 90 | opacity: 0; 91 | } 92 | 93 | /* line 8, ../sass/_keyframes.sass */ 94 | 100% { 95 | opacity: 1; 96 | } 97 | } 98 | 99 | @keyframes offline-fadein { 100 | /* line 6, ../sass/_keyframes.sass */ 101 | 0% { 102 | opacity: 0; 103 | } 104 | 105 | /* line 8, ../sass/_keyframes.sass */ 106 | 100% { 107 | opacity: 1; 108 | } 109 | } 110 | 111 | @-webkit-keyframes offline-fadeout-and-hide { 112 | /* line 20, ../sass/_keyframes.sass */ 113 | 0% { 114 | opacity: 1; 115 | display: block; 116 | } 117 | 118 | /* line 23, ../sass/_keyframes.sass */ 119 | 99% { 120 | opacity: 0; 121 | display: block; 122 | } 123 | 124 | /* line 26, ../sass/_keyframes.sass */ 125 | 100% { 126 | opacity: 0; 127 | display: none; 128 | } 129 | } 130 | 131 | @-moz-keyframes offline-fadeout-and-hide { 132 | /* line 20, ../sass/_keyframes.sass */ 133 | 0% { 134 | opacity: 1; 135 | display: block; 136 | } 137 | 138 | /* line 23, ../sass/_keyframes.sass */ 139 | 99% { 140 | opacity: 0; 141 | display: block; 142 | } 143 | 144 | /* line 26, ../sass/_keyframes.sass */ 145 | 100% { 146 | opacity: 0; 147 | display: none; 148 | } 149 | } 150 | 151 | @-ms-keyframes offline-fadeout-and-hide { 152 | /* line 20, ../sass/_keyframes.sass */ 153 | 0% { 154 | opacity: 1; 155 | display: block; 156 | } 157 | 158 | /* line 23, ../sass/_keyframes.sass */ 159 | 99% { 160 | opacity: 0; 161 | display: block; 162 | } 163 | 164 | /* line 26, ../sass/_keyframes.sass */ 165 | 100% { 166 | opacity: 0; 167 | display: none; 168 | } 169 | } 170 | 171 | @-o-keyframes offline-fadeout-and-hide { 172 | /* line 20, ../sass/_keyframes.sass */ 173 | 0% { 174 | opacity: 1; 175 | display: block; 176 | } 177 | 178 | /* line 23, ../sass/_keyframes.sass */ 179 | 99% { 180 | opacity: 0; 181 | display: block; 182 | } 183 | 184 | /* line 26, ../sass/_keyframes.sass */ 185 | 100% { 186 | opacity: 0; 187 | display: none; 188 | } 189 | } 190 | 191 | @keyframes offline-fadeout-and-hide { 192 | /* line 20, ../sass/_keyframes.sass */ 193 | 0% { 194 | opacity: 1; 195 | display: block; 196 | } 197 | 198 | /* line 23, ../sass/_keyframes.sass */ 199 | 99% { 200 | opacity: 0; 201 | display: block; 202 | } 203 | 204 | /* line 26, ../sass/_keyframes.sass */ 205 | 100% { 206 | opacity: 0; 207 | display: none; 208 | } 209 | } 210 | 211 | @-webkit-keyframes offline-rotation { 212 | /* line 64, ../sass/_keyframes.sass */ 213 | 0% { 214 | transform: rotate(0deg); 215 | -webkit-transform: rotate(0deg); 216 | -moz-transform: rotate(0deg); 217 | -ms-transform: rotate(0deg); 218 | -o-transform: rotate(0deg); 219 | } 220 | 221 | /* line 66, ../sass/_keyframes.sass */ 222 | 100% { 223 | transform: rotate(359deg); 224 | -webkit-transform: rotate(359deg); 225 | -moz-transform: rotate(359deg); 226 | -ms-transform: rotate(359deg); 227 | -o-transform: rotate(359deg); 228 | } 229 | } 230 | 231 | @-moz-keyframes offline-rotation { 232 | /* line 64, ../sass/_keyframes.sass */ 233 | 0% { 234 | transform: rotate(0deg); 235 | -webkit-transform: rotate(0deg); 236 | -moz-transform: rotate(0deg); 237 | -ms-transform: rotate(0deg); 238 | -o-transform: rotate(0deg); 239 | } 240 | 241 | /* line 66, ../sass/_keyframes.sass */ 242 | 100% { 243 | transform: rotate(359deg); 244 | -webkit-transform: rotate(359deg); 245 | -moz-transform: rotate(359deg); 246 | -ms-transform: rotate(359deg); 247 | -o-transform: rotate(359deg); 248 | } 249 | } 250 | 251 | @-ms-keyframes offline-rotation { 252 | /* line 64, ../sass/_keyframes.sass */ 253 | 0% { 254 | transform: rotate(0deg); 255 | -webkit-transform: rotate(0deg); 256 | -moz-transform: rotate(0deg); 257 | -ms-transform: rotate(0deg); 258 | -o-transform: rotate(0deg); 259 | } 260 | 261 | /* line 66, ../sass/_keyframes.sass */ 262 | 100% { 263 | transform: rotate(359deg); 264 | -webkit-transform: rotate(359deg); 265 | -moz-transform: rotate(359deg); 266 | -ms-transform: rotate(359deg); 267 | -o-transform: rotate(359deg); 268 | } 269 | } 270 | 271 | @-o-keyframes offline-rotation { 272 | /* line 64, ../sass/_keyframes.sass */ 273 | 0% { 274 | transform: rotate(0deg); 275 | -webkit-transform: rotate(0deg); 276 | -moz-transform: rotate(0deg); 277 | -ms-transform: rotate(0deg); 278 | -o-transform: rotate(0deg); 279 | } 280 | 281 | /* line 66, ../sass/_keyframes.sass */ 282 | 100% { 283 | transform: rotate(359deg); 284 | -webkit-transform: rotate(359deg); 285 | -moz-transform: rotate(359deg); 286 | -ms-transform: rotate(359deg); 287 | -o-transform: rotate(359deg); 288 | } 289 | } 290 | 291 | @keyframes offline-rotation { 292 | /* line 64, ../sass/_keyframes.sass */ 293 | 0% { 294 | transform: rotate(0deg); 295 | -webkit-transform: rotate(0deg); 296 | -moz-transform: rotate(0deg); 297 | -ms-transform: rotate(0deg); 298 | -o-transform: rotate(0deg); 299 | } 300 | 301 | /* line 66, ../sass/_keyframes.sass */ 302 | 100% { 303 | transform: rotate(359deg); 304 | -webkit-transform: rotate(359deg); 305 | -moz-transform: rotate(359deg); 306 | -ms-transform: rotate(359deg); 307 | -o-transform: rotate(359deg); 308 | } 309 | } 310 | 311 | /* line 21, ../sass/offline-theme-default.sass */ 312 | .offline-ui { 313 | -webkit-border-radius: 4px; 314 | -moz-border-radius: 4px; 315 | -ms-border-radius: 4px; 316 | -o-border-radius: 4px; 317 | border-radius: 4px; 318 | font-family: "Helvetica Neue", sans-serif; 319 | padding: 1em; 320 | top: 1em; 321 | width: 38em; 322 | max-width: 100%; 323 | overflow: hidden; 324 | } 325 | @media (max-width: 38em) { 326 | /* line 21, ../sass/offline-theme-default.sass */ 327 | .offline-ui { 328 | -webkit-border-radius: 0; 329 | -moz-border-radius: 0; 330 | -ms-border-radius: 0; 331 | -o-border-radius: 0; 332 | border-radius: 0; 333 | top: 0; 334 | } 335 | } 336 | /* line 34, ../sass/offline-theme-default.sass */ 337 | .offline-ui .offline-ui-content:before { 338 | line-height: 1.25em; 339 | } 340 | /* line 37, ../sass/offline-theme-default.sass */ 341 | .offline-ui .offline-ui-retry { 342 | position: absolute; 343 | right: 3em; 344 | top: 0; 345 | bottom: 0; 346 | background: rgba(0, 0, 0, 0.1); 347 | text-decoration: none; 348 | color: inherit; 349 | line-height: 3.5em; 350 | height: 3.5em; 351 | margin: auto; 352 | padding: 0 1em; 353 | } 354 | /* line 50, ../sass/offline-theme-default.sass */ 355 | .offline-ui.offline-ui-up { 356 | -webkit-animation: offline-fadeout-and-hide forwards 0.5s 2s; 357 | -moz-animation: offline-fadeout-and-hide forwards 0.5s 2s; 358 | -ms-animation: offline-fadeout-and-hide forwards 0.5s 2s; 359 | -o-animation: offline-fadeout-and-hide forwards 0.5s 2s; 360 | animation: offline-fadeout-and-hide forwards 0.5s 2s; 361 | -webkit-backface-visibility: hidden; 362 | background: #d6e9c6; 363 | color: #468847; 364 | } 365 | /* line 55, ../sass/offline-theme-default.sass */ 366 | .offline-ui.offline-ui-down { 367 | -webkit-animation: offline-fadein 0.5s; 368 | -moz-animation: offline-fadein 0.5s; 369 | -ms-animation: offline-fadein 0.5s; 370 | -o-animation: offline-fadein 0.5s; 371 | animation: offline-fadein 0.5s; 372 | -webkit-backface-visibility: hidden; 373 | background: #ec8787; 374 | color: #551313; 375 | } 376 | /* line 60, ../sass/offline-theme-default.sass */ 377 | .offline-ui.offline-ui-down.offline-ui-connecting, .offline-ui.offline-ui-down.offline-ui-waiting { 378 | background: #f8ecad; 379 | color: #7c6d1f; 380 | padding-right: 3em; 381 | } 382 | /* line 65, ../sass/offline-theme-default.sass */ 383 | .offline-ui.offline-ui-down.offline-ui-connecting:after, .offline-ui.offline-ui-down.offline-ui-waiting:after { 384 | -webkit-animation: offline-rotation 0.7s linear infinite; 385 | -moz-animation: offline-rotation 0.7s linear infinite; 386 | -ms-animation: offline-rotation 0.7s linear infinite; 387 | -o-animation: offline-rotation 0.7s linear infinite; 388 | animation: offline-rotation 0.7s linear infinite; 389 | -webkit-backface-visibility: hidden; 390 | -webkit-border-radius: 50%; 391 | -moz-border-radius: 50%; 392 | -ms-border-radius: 50%; 393 | -o-border-radius: 50%; 394 | border-radius: 50%; 395 | content: " "; 396 | display: block; 397 | position: absolute; 398 | right: 1em; 399 | top: 0; 400 | bottom: 0; 401 | margin: auto; 402 | height: 1em; 403 | width: 1em; 404 | border: 2px solid rgba(0, 0, 0, 0); 405 | border-top-color: #7c6d1f; 406 | border-left-color: #7c6d1f; 407 | opacity: 0.7; 408 | } 409 | /* line 82, ../sass/offline-theme-default.sass */ 410 | .offline-ui.offline-ui-down.offline-ui-waiting { 411 | padding-right: 11em; 412 | } 413 | /* line 85, ../sass/offline-theme-default.sass */ 414 | .offline-ui.offline-ui-down.offline-ui-waiting.offline-ui-reconnect-failed-2s { 415 | padding-right: 0; 416 | } 417 | 418 | /* line 5, ../sass/offline-theme-hubspot.sass */ 419 | .offline-ui { 420 | -webkit-border-radius: 0 0 4px 4px; 421 | -moz-border-radius: 0 0 4px 4px; 422 | -ms-border-radius: 0 0 4px 4px; 423 | -o-border-radius: 0 0 4px 4px; 424 | border-radius: 0 0 4px 4px; 425 | -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1); 426 | -moz-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1); 427 | box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1); 428 | font-family: "Helvetica Neue", Helvetica, sans-serif, sans-serif; 429 | font-size: 13px; 430 | top: 42px; 431 | } 432 | -------------------------------------------------------------------------------- /lib/themes/offline-theme-slide-indicator.css: -------------------------------------------------------------------------------- 1 | /* line 3, ../sass/_offline-theme-base-indicator.sass */ 2 | .offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after { 3 | -webkit-box-sizing: border-box; 4 | -moz-box-sizing: border-box; 5 | box-sizing: border-box; 6 | } 7 | 8 | /* line 6, ../sass/_offline-theme-base-indicator.sass */ 9 | .offline-ui { 10 | display: none; 11 | position: fixed; 12 | background: white; 13 | z-index: 800; 14 | display: inline-block; 15 | } 16 | /* line 13, ../sass/_offline-theme-base-indicator.sass */ 17 | .offline-ui .offline-ui-retry { 18 | display: none; 19 | } 20 | /* line 16, ../sass/_offline-theme-base-indicator.sass */ 21 | .offline-ui.offline-ui-up { 22 | display: block; 23 | } 24 | /* line 19, ../sass/_offline-theme-base-indicator.sass */ 25 | .offline-ui.offline-ui-down { 26 | display: block; 27 | } 28 | 29 | /* line 11, ../sass/offline-theme-slide-indicator.sass */ 30 | .offline-ui { 31 | -webkit-border-radius: 4px 4px 0 0; 32 | -moz-border-radius: 4px 4px 0 0; 33 | -ms-border-radius: 4px 4px 0 0; 34 | -o-border-radius: 4px 4px 0 0; 35 | border-radius: 4px 4px 0 0; 36 | font-family: "Helvetica Neue", sans-serif; 37 | padding: 1em; 38 | width: 5em; 39 | max-width: 100%; 40 | bottom: 0; 41 | left: 1em; 42 | } 43 | /* line 20, ../sass/offline-theme-slide-indicator.sass */ 44 | .offline-ui.offline-ui-up { 45 | background: #d6e9c6; 46 | color: #468847; 47 | } 48 | /* line 24, ../sass/offline-theme-slide-indicator.sass */ 49 | .offline-ui.offline-ui-down { 50 | background: #ec8787; 51 | color: #551313; 52 | } 53 | -------------------------------------------------------------------------------- /lib/themes/offline-theme-slide.css: -------------------------------------------------------------------------------- 1 | /* line 4, ../sass/_offline-theme-base.sass */ 2 | .offline-ui, .offline-ui *, .offline-ui:before, .offline-ui:after, .offline-ui *:before, .offline-ui *:after { 3 | -webkit-box-sizing: border-box; 4 | -moz-box-sizing: border-box; 5 | box-sizing: border-box; 6 | } 7 | 8 | /* line 7, ../sass/_offline-theme-base.sass */ 9 | .offline-ui { 10 | display: none; 11 | position: fixed; 12 | background: white; 13 | z-index: 800; 14 | margin: auto; 15 | top: 0; 16 | left: 0; 17 | right: 0; 18 | } 19 | /* line 17, ../sass/_offline-theme-base.sass */ 20 | .offline-ui .offline-ui-content:before { 21 | display: inline; 22 | } 23 | /* line 20, ../sass/_offline-theme-base.sass */ 24 | .offline-ui .offline-ui-retry { 25 | -webkit-user-select: none; 26 | -moz-user-select: none; 27 | user-select: none; 28 | display: none; 29 | } 30 | /* line 24, ../sass/_offline-theme-base.sass */ 31 | .offline-ui .offline-ui-retry:before { 32 | display: inline; 33 | } 34 | /* line 29, ../sass/_offline-theme-base.sass */ 35 | .offline-ui.offline-ui-up.offline-ui-up-5s { 36 | display: block; 37 | } 38 | /* line 32, ../sass/_offline-theme-base.sass */ 39 | .offline-ui.offline-ui-down { 40 | display: block; 41 | } 42 | /* line 37, ../sass/_offline-theme-base.sass */ 43 | .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry { 44 | display: block; 45 | } 46 | /* line 42, ../sass/_offline-theme-base.sass */ 47 | .offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry { 48 | display: none; 49 | } 50 | 51 | @-webkit-keyframes offline-dropin { 52 | /* line 40, ../sass/_keyframes.sass */ 53 | 0% { 54 | transform: translateY(0); 55 | -webkit-transform: translateY(0); 56 | -moz-transform: translateY(0); 57 | -ms-transform: translateY(0); 58 | -o-transform: translateY(0); 59 | opacity: 0; 60 | } 61 | 62 | /* line 43, ../sass/_keyframes.sass */ 63 | 1% { 64 | transform: translateY(-800px); 65 | -webkit-transform: translateY(-800px); 66 | -moz-transform: translateY(-800px); 67 | -ms-transform: translateY(-800px); 68 | -o-transform: translateY(-800px); 69 | opacity: 0; 70 | } 71 | 72 | /* line 48, ../sass/_keyframes.sass */ 73 | 2% { 74 | transform: translateY(-800px); 75 | -webkit-transform: translateY(-800px); 76 | -moz-transform: translateY(-800px); 77 | -ms-transform: translateY(-800px); 78 | -o-transform: translateY(-800px); 79 | opacity: 1; 80 | } 81 | 82 | /* line 51, ../sass/_keyframes.sass */ 83 | 100% { 84 | transform: translateY(0); 85 | -webkit-transform: translateY(0); 86 | -moz-transform: translateY(0); 87 | -ms-transform: translateY(0); 88 | -o-transform: translateY(0); 89 | opacity: 1; 90 | } 91 | } 92 | 93 | @-moz-keyframes offline-dropin { 94 | /* line 40, ../sass/_keyframes.sass */ 95 | 0% { 96 | transform: translateY(0); 97 | -webkit-transform: translateY(0); 98 | -moz-transform: translateY(0); 99 | -ms-transform: translateY(0); 100 | -o-transform: translateY(0); 101 | opacity: 0; 102 | } 103 | 104 | /* line 43, ../sass/_keyframes.sass */ 105 | 1% { 106 | transform: translateY(-800px); 107 | -webkit-transform: translateY(-800px); 108 | -moz-transform: translateY(-800px); 109 | -ms-transform: translateY(-800px); 110 | -o-transform: translateY(-800px); 111 | opacity: 0; 112 | } 113 | 114 | /* line 48, ../sass/_keyframes.sass */ 115 | 2% { 116 | transform: translateY(-800px); 117 | -webkit-transform: translateY(-800px); 118 | -moz-transform: translateY(-800px); 119 | -ms-transform: translateY(-800px); 120 | -o-transform: translateY(-800px); 121 | opacity: 1; 122 | } 123 | 124 | /* line 51, ../sass/_keyframes.sass */ 125 | 100% { 126 | transform: translateY(0); 127 | -webkit-transform: translateY(0); 128 | -moz-transform: translateY(0); 129 | -ms-transform: translateY(0); 130 | -o-transform: translateY(0); 131 | opacity: 1; 132 | } 133 | } 134 | 135 | @-ms-keyframes offline-dropin { 136 | /* line 40, ../sass/_keyframes.sass */ 137 | 0% { 138 | transform: translateY(0); 139 | -webkit-transform: translateY(0); 140 | -moz-transform: translateY(0); 141 | -ms-transform: translateY(0); 142 | -o-transform: translateY(0); 143 | opacity: 0; 144 | } 145 | 146 | /* line 43, ../sass/_keyframes.sass */ 147 | 1% { 148 | transform: translateY(-800px); 149 | -webkit-transform: translateY(-800px); 150 | -moz-transform: translateY(-800px); 151 | -ms-transform: translateY(-800px); 152 | -o-transform: translateY(-800px); 153 | opacity: 0; 154 | } 155 | 156 | /* line 48, ../sass/_keyframes.sass */ 157 | 2% { 158 | transform: translateY(-800px); 159 | -webkit-transform: translateY(-800px); 160 | -moz-transform: translateY(-800px); 161 | -ms-transform: translateY(-800px); 162 | -o-transform: translateY(-800px); 163 | opacity: 1; 164 | } 165 | 166 | /* line 51, ../sass/_keyframes.sass */ 167 | 100% { 168 | transform: translateY(0); 169 | -webkit-transform: translateY(0); 170 | -moz-transform: translateY(0); 171 | -ms-transform: translateY(0); 172 | -o-transform: translateY(0); 173 | opacity: 1; 174 | } 175 | } 176 | 177 | @-o-keyframes offline-dropin { 178 | /* line 40, ../sass/_keyframes.sass */ 179 | 0% { 180 | transform: translateY(0); 181 | -webkit-transform: translateY(0); 182 | -moz-transform: translateY(0); 183 | -ms-transform: translateY(0); 184 | -o-transform: translateY(0); 185 | opacity: 0; 186 | } 187 | 188 | /* line 43, ../sass/_keyframes.sass */ 189 | 1% { 190 | transform: translateY(-800px); 191 | -webkit-transform: translateY(-800px); 192 | -moz-transform: translateY(-800px); 193 | -ms-transform: translateY(-800px); 194 | -o-transform: translateY(-800px); 195 | opacity: 0; 196 | } 197 | 198 | /* line 48, ../sass/_keyframes.sass */ 199 | 2% { 200 | transform: translateY(-800px); 201 | -webkit-transform: translateY(-800px); 202 | -moz-transform: translateY(-800px); 203 | -ms-transform: translateY(-800px); 204 | -o-transform: translateY(-800px); 205 | opacity: 1; 206 | } 207 | 208 | /* line 51, ../sass/_keyframes.sass */ 209 | 100% { 210 | transform: translateY(0); 211 | -webkit-transform: translateY(0); 212 | -moz-transform: translateY(0); 213 | -ms-transform: translateY(0); 214 | -o-transform: translateY(0); 215 | opacity: 1; 216 | } 217 | } 218 | 219 | @keyframes offline-dropin { 220 | /* line 40, ../sass/_keyframes.sass */ 221 | 0% { 222 | transform: translateY(0); 223 | -webkit-transform: translateY(0); 224 | -moz-transform: translateY(0); 225 | -ms-transform: translateY(0); 226 | -o-transform: translateY(0); 227 | opacity: 0; 228 | } 229 | 230 | /* line 43, ../sass/_keyframes.sass */ 231 | 1% { 232 | transform: translateY(-800px); 233 | -webkit-transform: translateY(-800px); 234 | -moz-transform: translateY(-800px); 235 | -ms-transform: translateY(-800px); 236 | -o-transform: translateY(-800px); 237 | opacity: 0; 238 | } 239 | 240 | /* line 48, ../sass/_keyframes.sass */ 241 | 2% { 242 | transform: translateY(-800px); 243 | -webkit-transform: translateY(-800px); 244 | -moz-transform: translateY(-800px); 245 | -ms-transform: translateY(-800px); 246 | -o-transform: translateY(-800px); 247 | opacity: 1; 248 | } 249 | 250 | /* line 51, ../sass/_keyframes.sass */ 251 | 100% { 252 | transform: translateY(0); 253 | -webkit-transform: translateY(0); 254 | -moz-transform: translateY(0); 255 | -ms-transform: translateY(0); 256 | -o-transform: translateY(0); 257 | opacity: 1; 258 | } 259 | } 260 | 261 | @-webkit-keyframes offline-dropout { 262 | /* line 57, ../sass/_keyframes.sass */ 263 | 0% { 264 | transform: translateY(0); 265 | -webkit-transform: translateY(0); 266 | -moz-transform: translateY(0); 267 | -ms-transform: translateY(0); 268 | -o-transform: translateY(0); 269 | } 270 | 271 | /* line 59, ../sass/_keyframes.sass */ 272 | 100% { 273 | transform: translateY(-800px); 274 | -webkit-transform: translateY(-800px); 275 | -moz-transform: translateY(-800px); 276 | -ms-transform: translateY(-800px); 277 | -o-transform: translateY(-800px); 278 | } 279 | } 280 | 281 | @-moz-keyframes offline-dropout { 282 | /* line 57, ../sass/_keyframes.sass */ 283 | 0% { 284 | transform: translateY(0); 285 | -webkit-transform: translateY(0); 286 | -moz-transform: translateY(0); 287 | -ms-transform: translateY(0); 288 | -o-transform: translateY(0); 289 | } 290 | 291 | /* line 59, ../sass/_keyframes.sass */ 292 | 100% { 293 | transform: translateY(-800px); 294 | -webkit-transform: translateY(-800px); 295 | -moz-transform: translateY(-800px); 296 | -ms-transform: translateY(-800px); 297 | -o-transform: translateY(-800px); 298 | } 299 | } 300 | 301 | @-ms-keyframes offline-dropout { 302 | /* line 57, ../sass/_keyframes.sass */ 303 | 0% { 304 | transform: translateY(0); 305 | -webkit-transform: translateY(0); 306 | -moz-transform: translateY(0); 307 | -ms-transform: translateY(0); 308 | -o-transform: translateY(0); 309 | } 310 | 311 | /* line 59, ../sass/_keyframes.sass */ 312 | 100% { 313 | transform: translateY(-800px); 314 | -webkit-transform: translateY(-800px); 315 | -moz-transform: translateY(-800px); 316 | -ms-transform: translateY(-800px); 317 | -o-transform: translateY(-800px); 318 | } 319 | } 320 | 321 | @-o-keyframes offline-dropout { 322 | /* line 57, ../sass/_keyframes.sass */ 323 | 0% { 324 | transform: translateY(0); 325 | -webkit-transform: translateY(0); 326 | -moz-transform: translateY(0); 327 | -ms-transform: translateY(0); 328 | -o-transform: translateY(0); 329 | } 330 | 331 | /* line 59, ../sass/_keyframes.sass */ 332 | 100% { 333 | transform: translateY(-800px); 334 | -webkit-transform: translateY(-800px); 335 | -moz-transform: translateY(-800px); 336 | -ms-transform: translateY(-800px); 337 | -o-transform: translateY(-800px); 338 | } 339 | } 340 | 341 | @keyframes offline-dropout { 342 | /* line 57, ../sass/_keyframes.sass */ 343 | 0% { 344 | transform: translateY(0); 345 | -webkit-transform: translateY(0); 346 | -moz-transform: translateY(0); 347 | -ms-transform: translateY(0); 348 | -o-transform: translateY(0); 349 | } 350 | 351 | /* line 59, ../sass/_keyframes.sass */ 352 | 100% { 353 | transform: translateY(-800px); 354 | -webkit-transform: translateY(-800px); 355 | -moz-transform: translateY(-800px); 356 | -ms-transform: translateY(-800px); 357 | -o-transform: translateY(-800px); 358 | } 359 | } 360 | 361 | @-webkit-keyframes offline-rotation { 362 | /* line 64, ../sass/_keyframes.sass */ 363 | 0% { 364 | transform: rotate(0deg); 365 | -webkit-transform: rotate(0deg); 366 | -moz-transform: rotate(0deg); 367 | -ms-transform: rotate(0deg); 368 | -o-transform: rotate(0deg); 369 | } 370 | 371 | /* line 66, ../sass/_keyframes.sass */ 372 | 100% { 373 | transform: rotate(359deg); 374 | -webkit-transform: rotate(359deg); 375 | -moz-transform: rotate(359deg); 376 | -ms-transform: rotate(359deg); 377 | -o-transform: rotate(359deg); 378 | } 379 | } 380 | 381 | @-moz-keyframes offline-rotation { 382 | /* line 64, ../sass/_keyframes.sass */ 383 | 0% { 384 | transform: rotate(0deg); 385 | -webkit-transform: rotate(0deg); 386 | -moz-transform: rotate(0deg); 387 | -ms-transform: rotate(0deg); 388 | -o-transform: rotate(0deg); 389 | } 390 | 391 | /* line 66, ../sass/_keyframes.sass */ 392 | 100% { 393 | transform: rotate(359deg); 394 | -webkit-transform: rotate(359deg); 395 | -moz-transform: rotate(359deg); 396 | -ms-transform: rotate(359deg); 397 | -o-transform: rotate(359deg); 398 | } 399 | } 400 | 401 | @-ms-keyframes offline-rotation { 402 | /* line 64, ../sass/_keyframes.sass */ 403 | 0% { 404 | transform: rotate(0deg); 405 | -webkit-transform: rotate(0deg); 406 | -moz-transform: rotate(0deg); 407 | -ms-transform: rotate(0deg); 408 | -o-transform: rotate(0deg); 409 | } 410 | 411 | /* line 66, ../sass/_keyframes.sass */ 412 | 100% { 413 | transform: rotate(359deg); 414 | -webkit-transform: rotate(359deg); 415 | -moz-transform: rotate(359deg); 416 | -ms-transform: rotate(359deg); 417 | -o-transform: rotate(359deg); 418 | } 419 | } 420 | 421 | @-o-keyframes offline-rotation { 422 | /* line 64, ../sass/_keyframes.sass */ 423 | 0% { 424 | transform: rotate(0deg); 425 | -webkit-transform: rotate(0deg); 426 | -moz-transform: rotate(0deg); 427 | -ms-transform: rotate(0deg); 428 | -o-transform: rotate(0deg); 429 | } 430 | 431 | /* line 66, ../sass/_keyframes.sass */ 432 | 100% { 433 | transform: rotate(359deg); 434 | -webkit-transform: rotate(359deg); 435 | -moz-transform: rotate(359deg); 436 | -ms-transform: rotate(359deg); 437 | -o-transform: rotate(359deg); 438 | } 439 | } 440 | 441 | @keyframes offline-rotation { 442 | /* line 64, ../sass/_keyframes.sass */ 443 | 0% { 444 | transform: rotate(0deg); 445 | -webkit-transform: rotate(0deg); 446 | -moz-transform: rotate(0deg); 447 | -ms-transform: rotate(0deg); 448 | -o-transform: rotate(0deg); 449 | } 450 | 451 | /* line 66, ../sass/_keyframes.sass */ 452 | 100% { 453 | transform: rotate(359deg); 454 | -webkit-transform: rotate(359deg); 455 | -moz-transform: rotate(359deg); 456 | -ms-transform: rotate(359deg); 457 | -o-transform: rotate(359deg); 458 | } 459 | } 460 | 461 | /* line 21, ../sass/offline-theme-slide.sass */ 462 | .offline-ui { 463 | -webkit-border-radius: 0 0 4px 4px; 464 | -moz-border-radius: 0 0 4px 4px; 465 | -ms-border-radius: 0 0 4px 4px; 466 | -o-border-radius: 0 0 4px 4px; 467 | border-radius: 0 0 4px 4px; 468 | font-family: "Helvetica Neue", sans-serif; 469 | padding: 1em; 470 | width: 38em; 471 | max-width: 100%; 472 | overflow: hidden; 473 | } 474 | @media (max-width: 38em) { 475 | /* line 21, ../sass/offline-theme-slide.sass */ 476 | .offline-ui { 477 | -webkit-border-radius: 0; 478 | -moz-border-radius: 0; 479 | -ms-border-radius: 0; 480 | -o-border-radius: 0; 481 | border-radius: 0; 482 | } 483 | } 484 | /* line 32, ../sass/offline-theme-slide.sass */ 485 | .offline-ui .offline-ui-retry { 486 | position: absolute; 487 | right: 3em; 488 | top: 0; 489 | bottom: 0; 490 | background: rgba(0, 0, 0, 0.1); 491 | text-decoration: none; 492 | color: inherit; 493 | line-height: 3.5em; 494 | height: 3.5em; 495 | margin: auto; 496 | padding: 0 1em; 497 | } 498 | /* line 45, ../sass/offline-theme-slide.sass */ 499 | .offline-ui.offline-ui-up { 500 | -webkit-animation: offline-dropout forwards 0.5s 2s; 501 | -moz-animation: offline-dropout forwards 0.5s 2s; 502 | -ms-animation: offline-dropout forwards 0.5s 2s; 503 | -o-animation: offline-dropout forwards 0.5s 2s; 504 | animation: offline-dropout forwards 0.5s 2s; 505 | -webkit-backface-visibility: hidden; 506 | background: #d6e9c6; 507 | color: #468847; 508 | } 509 | /* line 50, ../sass/offline-theme-slide.sass */ 510 | .offline-ui.offline-ui-down { 511 | -webkit-animation: offline-dropin 0.5s; 512 | -moz-animation: offline-dropin 0.5s; 513 | -ms-animation: offline-dropin 0.5s; 514 | -o-animation: offline-dropin 0.5s; 515 | animation: offline-dropin 0.5s; 516 | -webkit-backface-visibility: hidden; 517 | background: #ec8787; 518 | color: #551313; 519 | } 520 | /* line 55, ../sass/offline-theme-slide.sass */ 521 | .offline-ui.offline-ui-down.offline-ui-connecting, .offline-ui.offline-ui-down.offline-ui-waiting { 522 | background: #f8ecad; 523 | color: #7c6d1f; 524 | padding-right: 3em; 525 | } 526 | /* line 60, ../sass/offline-theme-slide.sass */ 527 | .offline-ui.offline-ui-down.offline-ui-connecting:after, .offline-ui.offline-ui-down.offline-ui-waiting:after { 528 | -webkit-animation: offline-rotation 0.7s linear infinite; 529 | -moz-animation: offline-rotation 0.7s linear infinite; 530 | -ms-animation: offline-rotation 0.7s linear infinite; 531 | -o-animation: offline-rotation 0.7s linear infinite; 532 | animation: offline-rotation 0.7s linear infinite; 533 | -webkit-backface-visibility: hidden; 534 | -webkit-border-radius: 50%; 535 | -moz-border-radius: 50%; 536 | -ms-border-radius: 50%; 537 | -o-border-radius: 50%; 538 | border-radius: 50%; 539 | content: " "; 540 | display: block; 541 | position: absolute; 542 | right: 1em; 543 | top: 0; 544 | bottom: 0; 545 | margin: auto; 546 | height: 1em; 547 | width: 1em; 548 | border: 2px solid rgba(0, 0, 0, 0); 549 | border-top-color: #7c6d1f; 550 | border-left-color: #7c6d1f; 551 | opacity: 0.7; 552 | } 553 | /* line 77, ../sass/offline-theme-slide.sass */ 554 | .offline-ui.offline-ui-down.offline-ui-waiting { 555 | padding-right: 11em; 556 | } 557 | /* line 80, ../sass/offline-theme-slide.sass */ 558 | .offline-ui.offline-ui-down.offline-ui-waiting.offline-ui-reconnect-failed-2s { 559 | padding-right: 0; 560 | } 561 | -------------------------------------------------------------------------------- /notification.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Offline.js Simulate UI - Notification 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

Offline.js Simulate UI

17 |

Offline Simulate UI is an Offline.js 18 | plug-in that allows you to test how your pages respond to different connectivity 19 | states without having to use brute-force methods to disable your actual connectivity.

20 |
21 |
22 |
23 | Try It Out! 24 |

Click on the checkbox on the left-hand side of the window and see how the page responds.

25 |

Notice that this page uses the Offline.js Chrome theme notification which is found at the bottom left of the page.

26 |
27 |
28 | Try with the Offline.js base Chrome theme 29 | View on GitHub 30 |
31 |
32 |
33 |
34 |
35 |

Demo

36 |
37 |
38 |
39 | 40 | 41 |
Have an account? Sign In
 42 | 43 | 44 |
45 | 46 |
47 | 48 |
49 |
50 | 51 | 52 |
53 | 54 |
55 | 56 |
57 |
58 | 59 | 60 |
61 | 62 |
63 | Login 64 |
65 |
66 | I forgot my password
67 |
68 |
69 |
70 |
71 |
You can only sign in when you have an active internet connection.
72 |
73 |
74 |

Notes

75 |

When you include offline-simulate-ui.min.js on your page the following configuration settings 76 | are applied:

77 | 78 |
    79 |
  • The initial reconnect delay is set to 1 minute.
    • 80 |
  • When you check the checkbox to simulate being offline, the simulation module 81 | takes control of the Offline.js 82 | checks and makes them all appear as if there is no internet connection available.
    • 83 |
84 | 85 |

Usage

86 |

Install with Bower (or download from GitHub)

87 | 88 |

Add the Script to Your Page

89 |

Note: Make sure you reference Offline.js before this script. If you install with Bower, it will pull in Offline.js as a dependency.

90 | 91 |

Respond to Offline.js Events

92 | 
<script>
 93 |     $(function(){
 94 | 
 95 |         var 
 96 |             $online = $('.online'),
 97 |             $offline = $('.offline');
 98 | 
 99 |         Offline.on('confirmed-down', function () {
100 |             $online.fadeOut(function () {
101 |                 $offline.fadeIn();
102 |             });
103 |         });
104 | 
105 |         Offline.on('confirmed-up', function () {
106 |             $offline.fadeOut(function () {
107 |                 $online.fadeIn();
108 |             });
109 |         });
110 | 
111 |     });
112 | </script>
113 |
114 |
115 | 118 | 119 | 140 | 141 | -------------------------------------------------------------------------------- /offline-simulate-ui.min.js: -------------------------------------------------------------------------------- 1 | /*! offline-simulate-ui 0.1.0 */ 2 | (function(){var a,b;if("undefined"==typeof Offline||null===Offline)throw new Error("Offline simulate UI brought in without Offline.js");console.info("The offline.simulate.ui.js module is a development-only resource. Make sure to remove offline.simulate.ui.js in production."),Offline.options.reconnect={initialDelay:60},a=function(){var a,b,c,d;return a='',d=document.createElement("div"),d.innerHTML=a,document.body.appendChild(d),b='',c=document.createElement("div"),c.className="offline-simulate-ui",c.innerHTML=b,document.body.appendChild(c),document.getElementById("offline-simulate-check").addEventListener("click",function(){var a;return null==(a=Offline.options).checks&&(a.checks={}),Offline.options.checks.active=this.checked?"down":"up",Offline.check()})},"interactive"===(b=document.readyState)||"complete"===b?a():document.addEventListener("DOMContentLoaded",a)}).call(this); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "offline-simulate-ui", 3 | "version": "0.1.0", 4 | "description": "Easily simulate an offline state with Offline.js with a check of a box.", 5 | "authors": [ 6 | "Craig Shoemaker " 7 | ], 8 | "license": "MIT", 9 | "devDependencies": { 10 | "grunt-contrib-coffee": "~0.7.0", 11 | "coffee-script": "~1.6.3", 12 | "grunt-contrib-uglify": "~0.2.4", 13 | "grunt-cli": "^0.1.13", 14 | "grunt": "~0.4.1", 15 | "grunt-contrib-watch": "~0.5.3", 16 | "grunt-contrib-copy": "^0.5.0" 17 | } 18 | } 19 | --------------------------------------------------------------------------------