From 285b5ce062c60813343326daa7d1c82c183330e6 Mon Sep 17 00:00:00 2001 From: lilia Date: Thu, 30 Mar 2017 18:11:13 -0700 Subject: [PATCH] Get install flow working in main window // FREEBIE --- background.html | 9 +- js/background.js | 7 + js/chromium.js | 24 +- stylesheets/manifest.css | 1132 +++++++++++++++++++++++++++++++++++++ stylesheets/manifest.scss | 3 + stylesheets/options.css | 1 - stylesheets/options.scss | 1 - 7 files changed, 1159 insertions(+), 18 deletions(-) diff --git a/background.html b/background.html index 5937aad1cdfb..f4ac3c0e4257 100644 --- a/background.html +++ b/background.html @@ -623,7 +623,7 @@
- +

{{ installWelcome }}

{{ installTagline }}

@@ -639,7 +639,7 @@
- +

{{{ installSignalLink }}}

@@ -670,7 +670,7 @@

{{ installLinkingWithNumber }}

- +

{{ installComputerName }}

@@ -687,7 +687,7 @@
- +

@@ -765,6 +765,7 @@ + diff --git a/js/background.js b/js/background.js index 6d3f1b7a527a..a98388f02e77 100644 --- a/js/background.js +++ b/js/background.js @@ -96,6 +96,13 @@ Whisper.WallClockListener.init(Whisper.events); Whisper.RotateSignedPreKeyListener.init(Whisper.events); Whisper.ExpiringMessagesListener.init(Whisper.events); + + if (Whisper.Registration.everDone()) { + openInbox(); + } + if (!Whisper.Registration.isDone()) { + extension.install(); + } }); window.getSyncRequest = function() { diff --git a/js/chromium.js b/js/chromium.js index 02ced0861903..bfb57b32eea4 100644 --- a/js/chromium.js +++ b/js/chromium.js @@ -166,21 +166,21 @@ }; extension.install = function(mode) { - var id = 'installer'; - var url = 'options.html'; if (mode === 'standalone') { - id = 'standalone-installer'; - url = 'register.html'; + return; // TODO } - if (!chrome.app.window.get(id)) { - extension.windows.open({ - id: id, - url: url, - bounds: { width: 800, height: 666, }, - minWidth: 800, - minHeight: 666 - }); + var installView = new Whisper.InstallView({ + el: $('body').empty() + }); + if (Whisper.Registration.everDone()) { + installView.selectStep(3); + installView.hideDots(); } + installView.$el.show(); + Whisper.events.once('contactsync', function() { + openInbox(); + installView.remove(); + }); }; var notification_pending = Promise.resolve(); diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css index d7c7031c88b3..5bf887bd41d4 100644 --- a/stylesheets/manifest.css +++ b/stylesheets/manifest.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; @font-face { font-family: 'Roboto-Light'; src: url("../fonts/Roboto-Light.ttf") format("truetype"); } @@ -2437,4 +2438,1135 @@ li.entry .error-icon-container { .android-dark .capture-audio button:hover { background-color: #333333; } +@font-face { + font-family: 'Roboto-Light'; + src: url("../fonts/Roboto-Light.ttf") format("truetype"); } +@font-face { + font-family: 'Roboto'; + src: url("../fonts/Roboto-Regular.ttf") format("truetype"); } +@font-face { + font-family: 'Roboto'; + src: url("../fonts/Roboto-Italic.ttf") format("truetype"); + font-style: italic; } +@font-face { + font-family: 'Roboto'; + src: url("../fonts/Roboto-Bold.ttf") format("truetype"); + font-weight: bold; } +.iti-flag { + width: 16px; + height: 11px; + background: url("../img/flags.png"); } + +.iti-flag.ad { + background-position: -16px 0; } + +.iti-flag.ae { + background-position: -32px 0; } + +.iti-flag.af { + background-position: -48px 0; } + +.iti-flag.ag { + background-position: -64px 0; } + +.iti-flag.ai { + background-position: -80px 0; } + +.iti-flag.al { + background-position: -96px 0; } + +.iti-flag.am { + background-position: -112px 0; } + +.iti-flag.ao { + background-position: -128px 0; } + +.iti-flag.ar { + background-position: -144px 0; } + +.iti-flag.as { + background-position: -160px 0; } + +.iti-flag.at { + background-position: -176px 0; } + +.iti-flag.au { + background-position: -192px 0; } + +.iti-flag.aw { + background-position: -208px 0; } + +.iti-flag.az { + background-position: -224px 0; } + +.iti-flag.ba { + background-position: -240px 0; } + +.iti-flag.bb { + background-position: 0 -11px; } + +.iti-flag.bd { + background-position: -16px -11px; } + +.iti-flag.be { + background-position: -32px -11px; } + +.iti-flag.bf { + background-position: -48px -11px; } + +.iti-flag.bg { + background-position: -64px -11px; } + +.iti-flag.bh { + background-position: -80px -11px; } + +.iti-flag.bi { + background-position: -96px -11px; } + +.iti-flag.bj { + background-position: -112px -11px; } + +.iti-flag.bm { + background-position: -128px -11px; } + +.iti-flag.bn { + background-position: -144px -11px; } + +.iti-flag.bo { + background-position: -160px -11px; } + +.iti-flag.br { + background-position: -176px -11px; } + +.iti-flag.bs { + background-position: -192px -11px; } + +.iti-flag.bt { + background-position: -208px -11px; } + +.iti-flag.bw { + background-position: -224px -11px; } + +.iti-flag.by { + background-position: -240px -11px; } + +.iti-flag.bz { + background-position: 0 -22px; } + +.iti-flag.ca { + background-position: -16px -22px; } + +.iti-flag.cd { + background-position: -32px -22px; } + +.iti-flag.cf { + background-position: -48px -22px; } + +.iti-flag.cg { + background-position: -64px -22px; } + +.iti-flag.ch { + background-position: -80px -22px; } + +.iti-flag.ci { + background-position: -96px -22px; } + +.iti-flag.ck { + background-position: -112px -22px; } + +.iti-flag.cl { + background-position: -128px -22px; } + +.iti-flag.cm { + background-position: -144px -22px; } + +.iti-flag.cn { + background-position: -160px -22px; } + +.iti-flag.co { + background-position: -176px -22px; } + +.iti-flag.cr { + background-position: -192px -22px; } + +.iti-flag.cu { + background-position: -208px -22px; } + +.iti-flag.cv { + background-position: -224px -22px; } + +.iti-flag.cw { + background-position: -240px -22px; } + +.iti-flag.cy { + background-position: 0 -33px; } + +.iti-flag.cz { + background-position: -16px -33px; } + +.iti-flag.de { + background-position: -32px -33px; } + +.iti-flag.dj { + background-position: -48px -33px; } + +.iti-flag.dk { + background-position: -64px -33px; } + +.iti-flag.dm { + background-position: -80px -33px; } + +.iti-flag.do { + background-position: -96px -33px; } + +.iti-flag.dz { + background-position: -112px -33px; } + +.iti-flag.ec { + background-position: -128px -33px; } + +.iti-flag.ee { + background-position: -144px -33px; } + +.iti-flag.eg { + background-position: -160px -33px; } + +.iti-flag.er { + background-position: -176px -33px; } + +.iti-flag.es { + background-position: -192px -33px; } + +.iti-flag.et { + background-position: -208px -33px; } + +.iti-flag.fi { + background-position: -224px -33px; } + +.iti-flag.fj { + background-position: -240px -33px; } + +.iti-flag.fk { + background-position: 0 -44px; } + +.iti-flag.fm { + background-position: -16px -44px; } + +.iti-flag.fo { + background-position: -32px -44px; } + +.iti-flag.fr, .iti-flag.bl, .iti-flag.mf { + background-position: -48px -44px; } + +.iti-flag.ga { + background-position: -64px -44px; } + +.iti-flag.gb { + background-position: -80px -44px; } + +.iti-flag.gd { + background-position: -96px -44px; } + +.iti-flag.ge { + background-position: -112px -44px; } + +.iti-flag.gf { + background-position: -128px -44px; } + +.iti-flag.gh { + background-position: -144px -44px; } + +.iti-flag.gi { + background-position: -160px -44px; } + +.iti-flag.gl { + background-position: -176px -44px; } + +.iti-flag.gm { + background-position: -192px -44px; } + +.iti-flag.gn { + background-position: -208px -44px; } + +.iti-flag.gp { + background-position: -224px -44px; } + +.iti-flag.gq { + background-position: -240px -44px; } + +.iti-flag.gr { + background-position: 0 -55px; } + +.iti-flag.gt { + background-position: -16px -55px; } + +.iti-flag.gu { + background-position: -32px -55px; } + +.iti-flag.gw { + background-position: -48px -55px; } + +.iti-flag.gy { + background-position: -64px -55px; } + +.iti-flag.hk { + background-position: -80px -55px; } + +.iti-flag.hn { + background-position: -96px -55px; } + +.iti-flag.hr { + background-position: -112px -55px; } + +.iti-flag.ht { + background-position: -128px -55px; } + +.iti-flag.hu { + background-position: -144px -55px; } + +.iti-flag.id { + background-position: -160px -55px; } + +.iti-flag.ie { + background-position: -176px -55px; } + +.iti-flag.il { + background-position: -192px -55px; } + +.iti-flag.in { + background-position: -208px -55px; } + +.iti-flag.io { + background-position: -224px -55px; } + +.iti-flag.iq { + background-position: -240px -55px; } + +.iti-flag.ir { + background-position: 0 -66px; } + +.iti-flag.is { + background-position: -16px -66px; } + +.iti-flag.it { + background-position: -32px -66px; } + +.iti-flag.jm { + background-position: -48px -66px; } + +.iti-flag.jo { + background-position: -64px -66px; } + +.iti-flag.jp { + background-position: -80px -66px; } + +.iti-flag.ke { + background-position: -96px -66px; } + +.iti-flag.kg { + background-position: -112px -66px; } + +.iti-flag.kh { + background-position: -128px -66px; } + +.iti-flag.ki { + background-position: -144px -66px; } + +.iti-flag.km { + background-position: -160px -66px; } + +.iti-flag.kn { + background-position: -176px -66px; } + +.iti-flag.kp { + background-position: -192px -66px; } + +.iti-flag.kr { + background-position: -208px -66px; } + +.iti-flag.kw { + background-position: -224px -66px; } + +.iti-flag.ky { + background-position: -240px -66px; } + +.iti-flag.kz { + background-position: 0 -77px; } + +.iti-flag.la { + background-position: -16px -77px; } + +.iti-flag.lb { + background-position: -32px -77px; } + +.iti-flag.lc { + background-position: -48px -77px; } + +.iti-flag.li { + background-position: -64px -77px; } + +.iti-flag.lk { + background-position: -80px -77px; } + +.iti-flag.lr { + background-position: -96px -77px; } + +.iti-flag.ls { + background-position: -112px -77px; } + +.iti-flag.lt { + background-position: -128px -77px; } + +.iti-flag.lu { + background-position: -144px -77px; } + +.iti-flag.lv { + background-position: -160px -77px; } + +.iti-flag.ly { + background-position: -176px -77px; } + +.iti-flag.ma { + background-position: -192px -77px; } + +.iti-flag.mc { + background-position: -208px -77px; } + +.iti-flag.md { + background-position: -224px -77px; } + +.iti-flag.me { + background-position: -112px -154px; + height: 12px; } + +.iti-flag.mg { + background-position: 0 -88px; } + +.iti-flag.mh { + background-position: -16px -88px; } + +.iti-flag.mk { + background-position: -32px -88px; } + +.iti-flag.ml { + background-position: -48px -88px; } + +.iti-flag.mm { + background-position: -64px -88px; } + +.iti-flag.mn { + background-position: -80px -88px; } + +.iti-flag.mo { + background-position: -96px -88px; } + +.iti-flag.mp { + background-position: -112px -88px; } + +.iti-flag.mq { + background-position: -128px -88px; } + +.iti-flag.mr { + background-position: -144px -88px; } + +.iti-flag.ms { + background-position: -160px -88px; } + +.iti-flag.mt { + background-position: -176px -88px; } + +.iti-flag.mu { + background-position: -192px -88px; } + +.iti-flag.mv { + background-position: -208px -88px; } + +.iti-flag.mw { + background-position: -224px -88px; } + +.iti-flag.mx { + background-position: -240px -88px; } + +.iti-flag.my { + background-position: 0 -99px; } + +.iti-flag.mz { + background-position: -16px -99px; } + +.iti-flag.na { + background-position: -32px -99px; } + +.iti-flag.nc { + background-position: -48px -99px; } + +.iti-flag.ne { + background-position: -64px -99px; } + +.iti-flag.nf { + background-position: -80px -99px; } + +.iti-flag.ng { + background-position: -96px -99px; } + +.iti-flag.ni { + background-position: -112px -99px; } + +.iti-flag.nl, .iti-flag.bq { + background-position: -128px -99px; } + +.iti-flag.no { + background-position: -144px -99px; } + +.iti-flag.np { + background-position: -160px -99px; } + +.iti-flag.nr { + background-position: -176px -99px; } + +.iti-flag.nu { + background-position: -192px -99px; } + +.iti-flag.nz { + background-position: -208px -99px; } + +.iti-flag.om { + background-position: -224px -99px; } + +.iti-flag.pa { + background-position: -240px -99px; } + +.iti-flag.pe { + background-position: 0 -110px; } + +.iti-flag.pf { + background-position: -16px -110px; } + +.iti-flag.pg { + background-position: -32px -110px; } + +.iti-flag.ph { + background-position: -48px -110px; } + +.iti-flag.pk { + background-position: -64px -110px; } + +.iti-flag.pl { + background-position: -80px -110px; } + +.iti-flag.pm { + background-position: -96px -110px; } + +.iti-flag.pr { + background-position: -112px -110px; } + +.iti-flag.ps { + background-position: -128px -110px; } + +.iti-flag.pt { + background-position: -144px -110px; } + +.iti-flag.pw { + background-position: -160px -110px; } + +.iti-flag.py { + background-position: -176px -110px; } + +.iti-flag.qa { + background-position: -192px -110px; } + +.iti-flag.re { + background-position: -208px -110px; } + +.iti-flag.ro { + background-position: -224px -110px; } + +.iti-flag.rs { + background-position: -240px -110px; } + +.iti-flag.ru { + background-position: 0 -121px; } + +.iti-flag.rw { + background-position: -16px -121px; } + +.iti-flag.sa { + background-position: -32px -121px; } + +.iti-flag.sb { + background-position: -48px -121px; } + +.iti-flag.sc { + background-position: -64px -121px; } + +.iti-flag.sd { + background-position: -80px -121px; } + +.iti-flag.se { + background-position: -96px -121px; } + +.iti-flag.sg { + background-position: -112px -121px; } + +.iti-flag.sh { + background-position: -128px -121px; } + +.iti-flag.si { + background-position: -144px -121px; } + +.iti-flag.sk { + background-position: -160px -121px; } + +.iti-flag.sl { + background-position: -176px -121px; } + +.iti-flag.sm { + background-position: -192px -121px; } + +.iti-flag.sn { + background-position: -208px -121px; } + +.iti-flag.so { + background-position: -224px -121px; } + +.iti-flag.sr { + background-position: -240px -121px; } + +.iti-flag.ss { + background-position: 0 -132px; } + +.iti-flag.st { + background-position: -16px -132px; } + +.iti-flag.sv { + background-position: -32px -132px; } + +.iti-flag.sx { + background-position: -48px -132px; } + +.iti-flag.sy { + background-position: -64px -132px; } + +.iti-flag.sz { + background-position: -80px -132px; } + +.iti-flag.tc { + background-position: -96px -132px; } + +.iti-flag.td { + background-position: -112px -132px; } + +.iti-flag.tg { + background-position: -128px -132px; } + +.iti-flag.th { + background-position: -144px -132px; } + +.iti-flag.tj { + background-position: -160px -132px; } + +.iti-flag.tk { + background-position: -176px -132px; } + +.iti-flag.tl { + background-position: -192px -132px; } + +.iti-flag.tm { + background-position: -208px -132px; } + +.iti-flag.tn { + background-position: -224px -132px; } + +.iti-flag.to { + background-position: -240px -132px; } + +.iti-flag.tr { + background-position: 0 -143px; } + +.iti-flag.tt { + background-position: -16px -143px; } + +.iti-flag.tv { + background-position: -32px -143px; } + +.iti-flag.tw { + background-position: -48px -143px; } + +.iti-flag.tz { + background-position: -64px -143px; } + +.iti-flag.ua { + background-position: -80px -143px; } + +.iti-flag.ug { + background-position: -96px -143px; } + +.iti-flag.us { + background-position: -112px -143px; } + +.iti-flag.uy { + background-position: -128px -143px; } + +.iti-flag.uz { + background-position: -144px -143px; } + +.iti-flag.va { + background-position: -160px -143px; } + +.iti-flag.vc { + background-position: -176px -143px; } + +.iti-flag.ve { + background-position: -192px -143px; } + +.iti-flag.vg { + background-position: -208px -143px; } + +.iti-flag.vi { + background-position: -224px -143px; } + +.iti-flag.vn { + background-position: -240px -143px; } + +.iti-flag.vu { + background-position: 0 -154px; } + +.iti-flag.wf { + background-position: -16px -154px; } + +.iti-flag.ws { + background-position: -32px -154px; } + +.iti-flag.ye { + background-position: -48px -154px; } + +.iti-flag.za { + background-position: -64px -154px; } + +.iti-flag.zm { + background-position: -80px -154px; } + +.iti-flag.zw { + background-position: -96px -154px; } + +.intl-tel-input { + position: relative; + display: inline-block; } + +.intl-tel-input * { + box-sizing: border-box; + -moz-box-sizing: border-box; } + +.intl-tel-input .hide { + display: none; } + +.intl-tel-input .v-hide { + visibility: hidden; } + +.intl-tel-input input, .intl-tel-input input[type=text], .intl-tel-input input[type=tel] { + position: relative; + z-index: 0; + margin-top: 0 !important; + margin-bottom: 0 !important; + padding-left: 44px; + margin-left: 0; } + +.intl-tel-input .flag-dropdown { + position: absolute; + top: 0; + bottom: 0; + padding: 1px; } + +.intl-tel-input .flag-dropdown:hover { + cursor: pointer; } + +.intl-tel-input .flag-dropdown:hover .selected-flag { + background-color: rgba(0, 0, 0, 0.05); } + +.intl-tel-input input[disabled] + .flag-dropdown:hover, .intl-tel-input input[readonly] + .flag-dropdown:hover { + cursor: default; } + +.intl-tel-input input[disabled] + .flag-dropdown:hover .selected-flag, .intl-tel-input input[readonly] + .flag-dropdown:hover .selected-flag { + background-color: transparent; } + +.intl-tel-input .selected-flag { + z-index: 1; + position: relative; + width: 38px; + height: 100%; + padding: 0 0 0 8px; } + +.intl-tel-input .selected-flag .iti-flag { + position: absolute; + top: 50%; + margin-top: -5px; } + +.intl-tel-input .selected-flag .arrow { + position: relative; + top: 50%; + margin-top: -2px; + left: 20px; + width: 0; + height: 0; + border-left: 3px solid transparent; + border-right: 3px solid transparent; + border-top: 4px solid #555; } + +.intl-tel-input .selected-flag .arrow.up { + border-top: none; + border-bottom: 4px solid #555; } + +.intl-tel-input .country-list { + list-style: none; + position: absolute; + z-index: 2; + padding: 0; + margin: 0 0 0 -1px; + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); + background-color: white; + border: 1px solid #CCC; + width: 430px; + max-height: 200px; + overflow-y: scroll; } + +.intl-tel-input .country-list .iti-flag { + display: inline-block; } + +.intl-tel-input .country-list .divider { + padding-bottom: 5px; + margin-bottom: 5px; + border-bottom: 1px solid #CCC; } + +.intl-tel-input .country-list .country { + padding: 5px 10px; } + +.intl-tel-input .country-list .country .dial-code { + color: #999; } + +.intl-tel-input .country-list .country.highlight { + background-color: rgba(0, 0, 0, 0.05); } + +.intl-tel-input .country-list .iti-flag, .intl-tel-input .country-list .country-name { + margin-right: 6px; } + +@keyframes progress-bar-stripes { + from { + background-position: 40px 0; } + to { + background-position: 0 0; } } +.progress-bar-striped { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent); + -webkit-background-size: 40px 40px; + background-size: 40px 40px; } + +.progress-bar-striped { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.75) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.75) 75%, transparent 75%, transparent); } + +.progress-bar.active { + -webkit-animation: progress-bar-stripes 2s linear infinite; + -o-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; } + +.bar-container { + background: #a2d2f4; } + .bar-container .progress-bar { + height: 100%; } + +.iti-flag { + background: url("../images/flags.png"); } + +* { + box-sizing: border-box; } + +html, body { + height: 100%; } + +body { + margin: 0; + font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif; + position: relative; + background: #2090ea; + color: white; + text-align: center; + font-size: 16px; + overflow: auto; } + +.clearfix:before, +.clearfix:after { + display: table; + content: " "; } + +.clearfix:after { + clear: both; } + +input, button, select, textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } + +#install { + height: 100%; } + @media screen and (max-height: 665px) { + #install { + height: 666px; } } + +.main { + padding: 70px 0 50px; } + +.step { + display: none; + height: 100%; } + +.inner { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 100%; } + .inner .step-body { + margin-top: auto; + width: 100%; + max-width: 600px; } + +#signal-computer, +#signal-phone { + max-width: 50%; + max-height: 250px; } + +p { + max-width: 35em; + margin: 1em auto; + line-height: 1.5em; + font-size: 1.2em; + font-weight: bold; } + +a { + cursor: pointer; } + a, a:visited, a:hover { + text-decoration: none; } + +.button { + display: inline-block; + text-transform: uppercase; + border: none; + font-weight: bold; + min-width: 300px; + padding: 0.5em; + margin: 0.5em 0; + background: white; + color: #2090ea; } + +.nav { + width: 100%; + bottom: 50px; + margin-top: auto; + padding: 0 20px; } + .nav .button { + margin-bottom: 3em; } + .nav .dot { + display: inline-block; + cursor: pointer; + margin: 10px; + width: 20px; + height: 20px; + border-radius: 10px; + background: white; + border: solid 5px #2090ea; } + .nav .dot.selected { + background: #a2d2f4; } + +.link:hover, .link:focus { + background: rgba(255, 255, 255, 0.3); + outline: none; } +.link, .link:visited, .link:hover { + padding: 0 3px; + color: white; + font-weight: bold; + border-bottom: dashed 2px white; + text-decoration: none; } + +.container { + min-width: 650px; } + +h1 { + font-size: 30pt; + font-weight: normal; + padding-bottom: 10px; } + +h3.step { + margin-top: 0; + font-weight: bold; } + +.help { + border-top: 2px solid #f3f3f3; + padding: 1.5em 0.1em; } + +.install { + display: inline-block; + margin-top: 90px; } + +#qr { + display: inline-block; + min-height: 266px; } + #qr img { + border: 5px solid white; } + #qr canvas { + display: none; } + +#device-name { + border: none; + border-bottom: 1px solid white; + padding: 8px; + background: transparent; + color: white; + font-weight: bold; + text-align: center; } + #device-name::selection, #device-name a::selection { + color: #454545; + background: white; } + #device-name::-moz-selection, #device-name a::-moz-selection { + color: #454545; + background: white; } + #device-name:focus { + outline: none; } + #device-name:hover, #device-name:focus { + background: rgba(255, 255, 255, 0.1); } + +#verifyCode, +#code, +#number { + box-sizing: border-box; + width: 100%; + display: block; + margin-bottom: 0.5em; + text-align: center; } + +#request-voice, +#request-sms { + box-sizing: border-box; } + +#request-sms { + width: 57%; + float: right; } + +#request-voice { + width: 40%; + float: left; } + +.number-container { + position: relative; + margin-bottom: 0.5em; } + +.number-container .intl-tel-input, +.number-container .number { + width: 100%; } + +.number-container::after { + visibility: hidden; + content: ' '; + display: inline-block; + border-radius: 1.5em; + width: 1.5em; + height: 1.5em; + line-height: 1.5em; + color: #ffffff; + position: absolute; + top: 0; + left: 100%; + margin: 3px 8px; + text-align: center; } + +.number-container.valid::after { + visibility: visible; + content: '✓'; + background-color: #0f9d58; + color: #ffffff; } + +.number-container.invalid::after { + visibility: visible; + content: '!'; + background-color: #f44336; + color: #ffffff; } + +#error { + color: white; + font-weight: bold; + padding: 0.5em; + text-align: center; } + +#error { + background-color: #f44336; } + +#error:before { + content: '\26a0'; + padding-right: 0.5em; } + +.narrow { + margin: auto; + box-sizing: border-box; + width: 275px; + max-width: 100%; } + +ul.country-list { + min-width: 197px !important; } + +.confirmation-dialog, .progress-dialog, .error-dialog { + padding: 1em; + text-align: left; } + +.number { + text-align: center; } + +.confirmation-dialog button, .error-dialog button { + float: right; + margin-left: 10px; } + +.progress-dialog { + text-align: center; + padding: 1em; + width: 100%; + max-width: 600px; + margin: auto; } + .progress-dialog .status { + padding: 1em; } + .progress-dialog .bar-container { + height: 1em; + background-color: #f3f3f3; + border: solid 1px white; } + .progress-dialog .bar { + width: 0; + height: 100%; + background-color: #a2d2f4; + transition: width 0.25s; } + +.error-dialog { + display: none; } + +.modal-container { + display: none; + position: absolute; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.1); + top: 0; + padding-top: 10em; + text-align: center; } + .modal-container .modal-main { + display: inline-block; + width: 80%; + max-width: 500px; + border: solid 2px #2090ea; + background: white; + margin: 10% auto; + box-shadow: 0 0 5px 3px rgba(10, 62, 103, 0.2); } + .modal-container .modal-main h4 { + background-color: #2090ea; + color: white; + padding: 1em; + margin: 0; + text-align: left; } + /*# sourceMappingURL=manifest.css.map */ diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss index 65946d3124a0..6b20471ce18e 100644 --- a/stylesheets/manifest.scss +++ b/stylesheets/manifest.scss @@ -19,3 +19,6 @@ @import 'ios'; @import 'android'; @import 'android-dark'; + +// Installer + @import 'options'; diff --git a/stylesheets/options.css b/stylesheets/options.css index 61795868c783..190b49f76a7f 100644 --- a/stylesheets/options.css +++ b/stylesheets/options.css @@ -869,7 +869,6 @@ input, button, select, textarea { line-height: inherit; } #install { - display: none; height: 100%; } @media screen and (max-height: 665px) { #install { diff --git a/stylesheets/options.scss b/stylesheets/options.scss index 9cd29dfe9c8d..fd2eea8cfa4d 100644 --- a/stylesheets/options.scss +++ b/stylesheets/options.scss @@ -40,7 +40,6 @@ input, button, select, textarea { } #install { - display: none; height: 100%; // 666px is the minimum window height in chromium.js