├── README.md ├── barebones ├── css │ └── style.css ├── img │ ├── logo.png │ ├── logo_big.png │ └── logo_med.png ├── index.html └── js │ ├── phone.js │ └── sip-0.5.0.js ├── demo-phone ├── css │ └── style.css ├── img │ ├── logo.png │ ├── logo_big.png │ └── logo_med.png ├── index.html └── js │ ├── sip-0.5.0.js │ └── ua.js ├── instacall ├── README.md ├── css │ ├── button.css │ ├── help-overlay.css │ ├── layout.css │ ├── main.css │ ├── normalize.css │ ├── onsipbutton.css │ ├── sidebar.css │ ├── theme.css │ ├── theme │ │ ├── flat-light.css │ │ └── skeu-light.css │ └── vendor │ │ └── jquery-ui-1.10.3.custom.css ├── favicon.ico ├── img │ ├── call_audio.png │ ├── call_video.png │ ├── instacall_chrome_allow_icon.png │ ├── instacall_firefox_share_icon.png │ ├── no-video.png │ ├── nodevices │ │ ├── no_camera_icon.png │ │ ├── no_mic_icon.png │ │ ├── okay_camera_icon.png │ │ └── okay_microphone_icon.png │ ├── onsip_white.png │ ├── sprite │ │ ├── mute-s32d676cfb8.png │ │ └── video-s93a39489c6.png │ ├── video-large.png │ ├── video-small.png │ ├── volume.png │ ├── white-phone-icon.png │ ├── white-video-icon.png │ ├── x-000000.png │ └── x-666666.png ├── index.html ├── js │ ├── detect-silence.js │ ├── detect-video-freeze.js │ ├── help-overlay.js │ ├── media-stream.js │ ├── parse-query.js │ ├── popup.js │ ├── preview.js │ ├── support.js │ ├── ua.js │ └── vendor │ │ ├── modernizr-2.6.2.min.js │ │ ├── sip-devel.js │ │ └── yepnope.1.5.4-min.js ├── phone.html └── wav │ └── ringback.wav └── siproulette ├── css └── style.css ├── index.html └── js ├── script.js └── sip-0.5.0.js /README.md: -------------------------------------------------------------------------------- 1 | Note: These sample applications are outdated, please see https://gitlab.com/onsip/sipjs.com/tree/master/static/demo-phone. You can see this live at https://sipjs.com/demo-phone. 2 | 3 | Sample applications using [SIP.js](sipjs.com) 4 | -------------------------------------------------------------------------------- /barebones/css/style.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | display: block; 3 | text-align: center; 4 | } 5 | 6 | body { 7 | background: #f5f7f7; 8 | font-family: sans-serif; 9 | } 10 | 11 | #target { 12 | width: 25em; 13 | } 14 | 15 | #hangup { 16 | background-color: red; 17 | } 18 | 19 | .call-control { 20 | height: 3em; 21 | } 22 | 23 | #dtmf-buttons button { 24 | display: inline-block; 25 | margin: 1em 0 0 0; 26 | height: 3.8em; 27 | width: 3.8em; 28 | background-color: white; 29 | border: 1px solid black; 30 | border-radius: 2px; 31 | font-size: 1em; 32 | } 33 | 34 | input { 35 | border-radius: 2px; 36 | border: 0px; 37 | height: 3em; 38 | } 39 | 40 | input[type=submit] { 41 | background-color: #35f659; 42 | border: 0px; 43 | } 44 | 45 | input[type=checkbox] { 46 | height: auto; 47 | } 48 | 49 | #chat-box { 50 | position: relative; 51 | border-radius: 2px; 52 | border: 1px solid black; 53 | width: 50em; 54 | height: 40em; 55 | } 56 | 57 | #message-input { 58 | width: 100%; 59 | position: absolute; 60 | bottom: 1em; 61 | border-top: 1px solid black; 62 | padding-top: 1em; 63 | } 64 | 65 | #message, #message-submit { 66 | display: inline-block; 67 | margin: 0px 0px 0px 0px; 68 | padding: 1px 1px 1px 1px; 69 | } 70 | 71 | #message { 72 | width: 80%; 73 | margin-left: 5em; 74 | border-top-right-radius: 0px; 75 | border-bottom-right-radius: 0px; 76 | } 77 | 78 | #message-submit { 79 | margin-left: -4px; 80 | border-top-left-radius: 0px; 81 | border-bottom-left-radius: 0px; 82 | padding-left: 5px; 83 | padding-right: 5px; 84 | } 85 | 86 | #log-container { 87 | height: 35em; 88 | overflow: scroll; 89 | } 90 | 91 | #remote-media { 92 | border-radius: 2px; 93 | border: 1px black solid; 94 | } -------------------------------------------------------------------------------- /barebones/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/barebones/img/logo.png -------------------------------------------------------------------------------- /barebones/img/logo_big.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/barebones/img/logo_big.png -------------------------------------------------------------------------------- /barebones/img/logo_med.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/barebones/img/logo_med.png -------------------------------------------------------------------------------- /barebones/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | SIP.js Barebones Demo 4 | 5 | 6 | 7 | 8 |

sipjs

9 | 10 |
11 | 12 | 13 | 14 | 15 |
16 | 17 |

Remote Video:

18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | 36 | 37 |

Chat:

38 |
39 |
40 |

41 |       
42 |
43 |
44 | 45 | 46 |
47 |
48 |
49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /barebones/js/phone.js: -------------------------------------------------------------------------------- 1 | // FILL IN THESE VALUES 2 | // for details, see http://sipjs.com/api/0.5.0/ua_configuration_parameters/ 3 | var config = { 4 | // EXAMPLE wsServers: "wss://my.websocketserver.com", 5 | wsServers: null, 6 | uri: null, 7 | authorizationUser: null, 8 | password: null, 9 | // FILL IN THOSE VALUES ^ 10 | 11 | userAgentString: 'SIP.js/0.5.0-devel BAREBONES DEMO', 12 | traceSip: true, 13 | }; 14 | 15 | var $ = document.getElementById.bind(document); 16 | 17 | // ensure config values are provided 18 | var requiredParams = ['wsServers', 'uri', 'authorizationUser', 'password']; 19 | requiredParams.some(function checkParam (param) { 20 | if (config[param]) { 21 | return false; 22 | } 23 | 24 | alert('config.' + param + ' is not set! Please open phone.js and set each of the following:\n\n\t* config.' + requiredParams.join('\n\t* config.')); 25 | return true; 26 | }); 27 | 28 | var ua = new SIP.UA(config); 29 | 30 | ua.on('invite', handleInvite); 31 | ua.on('message', receiveMessage); 32 | 33 | function handleInvite (s) { 34 | var text = s.remoteIdentity.uri.toString() + ' is calling you. Accept?'; 35 | var accept = confirm(text); 36 | if (accept) { 37 | s.accept(getSessionOptions()); 38 | setupSession(s); 39 | } 40 | else { 41 | s.reject(); 42 | } 43 | } 44 | 45 | function receiveMessage (e) { 46 | var remoteUri = e.remoteIdentity.uri.toString(); 47 | showMessage(remoteUri, e.body); 48 | } 49 | 50 | function showMessage (from, body) { 51 | $('chat-log').textContent += from + ': ' + body + '\n' 52 | $('log-container').scrollTop = $('log-container').scrollHeight; 53 | } 54 | 55 | function sendMessage () { 56 | var target = $('target').value || (session && session.remoteIdentity.uri.toString()); 57 | if (!target) { 58 | return; 59 | } 60 | 61 | var body = $('message').value; 62 | $('message').value = ''; 63 | ua.message(target, body); 64 | showMessage(ua.configuration.uri.toString(), body); 65 | } 66 | 67 | function sendDtmf (value) { 68 | if (session && /[1234567890#*]/.test(value)) { 69 | session.dtmf(value); 70 | } 71 | } 72 | 73 | var session; 74 | 75 | function getSessionOptions () { 76 | return { 77 | media: { 78 | audio: true, 79 | video: $('video-enabled').checked 80 | } 81 | }; 82 | } 83 | 84 | function dial () { 85 | if (!$('target').value) { 86 | return; 87 | } 88 | 89 | setupSession( ua.invite($('target').value, getSessionOptions()) ); 90 | } 91 | 92 | function endSession () { 93 | if (session) { 94 | session.terminate(); 95 | } 96 | } 97 | 98 | function setupSession (s) { 99 | endSession(); 100 | session = s; 101 | 102 | session.on('accepted', onAccepted.bind(session)); 103 | session.once('bye', onTerminated.bind(session)); 104 | session.once('failed', onTerminated.bind(session)); 105 | session.once('cancel', onTerminated.bind(session)); 106 | } 107 | 108 | function onTerminated () { 109 | session = null; 110 | attachMediaStream($('remote-media'), null); 111 | } 112 | 113 | function onAccepted () { 114 | this.mediaHandler.getRemoteStreams().forEach( 115 | attachMediaStream.bind(null, $('remote-media')) 116 | ); 117 | } 118 | 119 | function attachMediaStream (element, stream) { 120 | if (typeof element.src !== 'undefined') { 121 | URL.revokeObjectURL(element.src); 122 | element.src = URL.createObjectURL(stream); 123 | } else if (typeof element.srcObject !== 'undefined' 124 | || typeof element.mozSrcObject !== 'undefined') { 125 | element.srcObject = element.mozSrcObject = stream; 126 | } else { 127 | console.log('Error attaching stream to element.'); 128 | return false; 129 | } 130 | 131 | ensureMediaPlaying(element); 132 | return true; 133 | } 134 | 135 | function ensureMediaPlaying (mediaElement) { 136 | var interval = 100; 137 | mediaElement.ensurePlayingIntervalId = setInterval(function () { 138 | if (mediaElement.paused) { 139 | mediaElement.play() 140 | } 141 | else { 142 | clearInterval(mediaElement.ensurePlayingIntervalId); 143 | } 144 | }, interval); 145 | } 146 | -------------------------------------------------------------------------------- /demo-phone/css/style.css: -------------------------------------------------------------------------------- 1 | /*** COMPONENT STYLES ***/ 2 | input[type=submit], button, button.green { 3 | background-color: #35f659; 4 | border: 0px; 5 | height: 3em; 6 | cursor: pointer; 7 | } 8 | 9 | input[type=text], input[type=password] { 10 | min-width: 15em; 11 | } 12 | 13 | button.red { 14 | background-color: #ea4b35; 15 | } 16 | 17 | label { 18 | display: block; 19 | text-align: right; 20 | margin: 0.5em 0; 21 | } 22 | 23 | ul, li { 24 | list-style: none; 25 | padding: 0; 26 | } 27 | 28 | /*** STRUCTURE STYLES ***/ 29 | h1 { 30 | display: block; 31 | text-align: center; 32 | width: 45%; 33 | float: left; 34 | padding: 0 4px; 35 | } 36 | 37 | body { 38 | background: #f5f7f7; 39 | font-family: sans-serif; 40 | } 41 | 42 | #config-form, #ua { 43 | float: left; 44 | clear: left; 45 | width: 30%; 46 | padding-right: 15%; 47 | text-align: right; 48 | border-radius: 1em; 49 | border: 4px solid #3F4446; 50 | } 51 | 52 | #session-list { 53 | float: left; 54 | width: 45%; 55 | margin: 0 0 0 4%; 56 | } 57 | 58 | .session { 59 | clear: both; 60 | display: block; 61 | border: 1px solid red; 62 | border-radius: 1em; 63 | border: 4px solid #ea4b35; 64 | text-align: center; 65 | } 66 | 67 | .session h2 { 68 | font-weight: normal; 69 | } 70 | 71 | .session h2 strong { 72 | font-weight: bold; 73 | } 74 | 75 | .session .dtmf, .session .dtmf *{ 76 | display: inline-block; 77 | } 78 | 79 | .session .dtmf input[type="text"] { 80 | width: 2em; 81 | min-width: 0em; 82 | text-align: center; 83 | } 84 | 85 | .session video { 86 | display: block; 87 | visibility: none; 88 | height: 0; 89 | max-width: 100%; 90 | } 91 | 92 | .session video.on { 93 | visiblity: visible; 94 | height: auto; 95 | } 96 | 97 | .session .messages { 98 | max-height: 10em; 99 | min-height: 2em; 100 | overflow: auto; 101 | } 102 | 103 | .session .messages .local { 104 | color: #5f7ee0; 105 | clear: left; 106 | float: right; 107 | width: 60%; 108 | text-align: right; 109 | margin-right: 10%; 110 | } 111 | 112 | .session .messages .remote, .session .messages .error { 113 | color: #00a53b; 114 | clear: right; 115 | float: left; 116 | width: 60%; 117 | text-align: left; 118 | margin-left: 10%; 119 | } 120 | 121 | .session .messages .error { 122 | color: #ea4b35; 123 | } 124 | 125 | 126 | /*** FLOW STYLES ***/ 127 | #ua, .started #config-form { 128 | display: none; 129 | } 130 | 131 | #config-form, .started #ua { 132 | display: block; 133 | } 134 | 135 | #templates { 136 | display: none; 137 | } 138 | 139 | 140 | /*** Old styles ***/ 141 | 142 | #target { 143 | width: 25em; 144 | } 145 | 146 | #hangup { 147 | background-color: red; 148 | } 149 | 150 | .call-control { 151 | height: 3em; 152 | } 153 | 154 | #dtmf-buttons button { 155 | display: inline-block; 156 | margin: 1em 0 0 0; 157 | height: 3.8em; 158 | width: 3.8em; 159 | background-color: white; 160 | border: 1px solid black; 161 | border-radius: 2px; 162 | font-size: 1em; 163 | } 164 | 165 | input { 166 | border-radius: 2px; 167 | border: 0px; 168 | height: 3em; 169 | } 170 | 171 | input[type=submit] { 172 | background-color: #35f659; 173 | border: 0px; 174 | } 175 | 176 | input[type=checkbox] { 177 | height: auto; 178 | } 179 | 180 | #chat-box { 181 | position: relative; 182 | border-radius: 2px; 183 | border: 1px solid black; 184 | width: 50em; 185 | height: 40em; 186 | } 187 | 188 | #message-input { 189 | width: 100%; 190 | position: absolute; 191 | bottom: 1em; 192 | border-top: 1px solid black; 193 | padding-top: 1em; 194 | } 195 | 196 | #message, #message-submit { 197 | display: inline-block; 198 | margin: 0px 0px 0px 0px; 199 | padding: 1px 1px 1px 1px; 200 | } 201 | 202 | #message { 203 | width: 80%; 204 | margin-left: 5em; 205 | border-top-right-radius: 0px; 206 | border-bottom-right-radius: 0px; 207 | } 208 | 209 | #message-submit { 210 | margin-left: -4px; 211 | border-top-left-radius: 0px; 212 | border-bottom-left-radius: 0px; 213 | padding-left: 5px; 214 | padding-right: 5px; 215 | } 216 | 217 | #log-container { 218 | height: 35em; 219 | overflow: scroll; 220 | } 221 | 222 | #remote-media { 223 | border-radius: 2px; 224 | border: 1px black solid; 225 | } 226 | -------------------------------------------------------------------------------- /demo-phone/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/demo-phone/img/logo.png -------------------------------------------------------------------------------- /demo-phone/img/logo_big.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/demo-phone/img/logo_big.png -------------------------------------------------------------------------------- /demo-phone/img/logo_med.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/demo-phone/img/logo_med.png -------------------------------------------------------------------------------- /demo-phone/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | SIP.js Demo Phone 4 | 5 | 6 | 7 | 8 |

sip.js

9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 |
22 |
Disconnected
23 | 24 |
25 | 26 | 27 | 28 | 29 |
30 |
31 | 32 | 33 | 34 | 35 | 36 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /demo-phone/js/ua.js: -------------------------------------------------------------------------------- 1 | var elements = { 2 | configForm: document.getElementById('config-form'), 3 | uaStatus: document.getElementById('ua-status'), 4 | registerButton: document.getElementById('ua-register'), 5 | newSessionForm: document.getElementById('new-session-form'), 6 | inviteButton: document.getElementById('ua-invite-submit'), 7 | messageButton: document.getElementById('ua-message-submit'), 8 | uaVideo: document.getElementById('ua-video'), 9 | uaURI: document.getElementById('ua-uri'), 10 | sessionList: document.getElementById('session-list'), 11 | sessionTemplate: document.getElementById('session-template'), 12 | messageTemplate: document.getElementById('message-template') 13 | }; 14 | 15 | var config = { 16 | userAgentString: 'SIP.js/0.5.0-devel BB', 17 | traceSip: true, 18 | register: false 19 | }; 20 | 21 | var ua; 22 | 23 | var sessionUIs = {}; 24 | 25 | elements.configForm.addEventListener('submit', function (e) { 26 | var form, i, l, name, value; 27 | e.preventDefault(); 28 | 29 | form = elements.configForm; 30 | 31 | for (i = 0, l = form.length; i < l; i++) { 32 | name = form[i].name; 33 | value = form[i].value; 34 | if (name !== 'configSubmit' && value !== '') { 35 | config[name] = value; 36 | } 37 | } 38 | 39 | elements.uaStatus.innerHTML = 'Connecting...'; 40 | 41 | ua = new SIP.UA(config); 42 | 43 | ua.on('connected', function () { 44 | elements.uaStatus.innerHTML = 'Connected (Unregistered)'; 45 | }); 46 | 47 | ua.on('registered', function () { 48 | elements.registerButton.innerHTML = 'Unregister'; 49 | elements.uaStatus.innerHTML = 'Connected (Registered)'; 50 | }); 51 | 52 | ua.on('unregistered', function () { 53 | elements.registerButton.innerHTML = 'Register'; 54 | elements.uaStatus.innerHTML = 'Connected (Unregistered)'; 55 | }); 56 | 57 | ua.on('invite', function (session) { 58 | createNewSessionUI(session.remoteIdentity.uri, session); 59 | }); 60 | 61 | ua.on('message', function (message) { 62 | if (!sessionUIs[message.remoteIdentity.uri]) { 63 | createNewSessionUI(message.remoteIdentity.uri, null, message); 64 | } 65 | }); 66 | 67 | document.body.className = 'started'; 68 | }, false); 69 | 70 | elements.registerButton.addEventListener('click', function () { 71 | if (!ua) return; 72 | 73 | if (ua.isRegistered()) { 74 | ua.unregister(); 75 | } else { 76 | ua.register(); 77 | } 78 | }, false); 79 | 80 | function inviteSubmit(e) { 81 | e.preventDefault(); 82 | e.stopPropagation(); 83 | 84 | // Parse config options 85 | var video = elements.uaVideo.checked; 86 | var uri = elements.uaURI.value; 87 | elements.uaURI.value = ''; 88 | 89 | if (!uri) return; 90 | 91 | // Send invite 92 | var session = ua.invite(uri, { 93 | mediaConstraints: { 94 | audio: true, 95 | video: video 96 | } 97 | }); 98 | 99 | // Create new Session and append it to list 100 | var ui = createNewSessionUI(uri, session); 101 | } 102 | elements.inviteButton.addEventListener('click', inviteSubmit, false); 103 | elements.newSessionForm.addEventListener('submit', inviteSubmit, false); 104 | 105 | elements.messageButton.addEventListener('click', function (e) { 106 | e.preventDefault(); 107 | e.stopPropagation(); 108 | 109 | // Create new Session and append it to list 110 | var uri = elements.uaURI.value; 111 | elements.uaURI.value = ''; 112 | var ui = createNewSessionUI(uri); 113 | }, false); 114 | 115 | function createNewSessionUI(uri, session, message) { 116 | var tpl = elements.sessionTemplate; 117 | var node = tpl.cloneNode(true); 118 | var sessionUI = {}; 119 | var messageNode; 120 | 121 | uri = session ? 122 | session.remoteIdentity.uri : 123 | SIP.Utils.normalizeTarget(uri, ua.configuration.hostport_params); 124 | var displayName = (session && session.remoteIdentity.displayName) || uri.user; 125 | 126 | if (!uri) { return; } 127 | 128 | // Save a bunch of data on the sessionUI for later access 129 | sessionUI.session = session; 130 | sessionUI.node = node; 131 | sessionUI.displayName = node.querySelector('.display-name'); 132 | sessionUI.uri = node.querySelector('.uri'); 133 | sessionUI.green = node.querySelector('.green'); 134 | sessionUI.red = node.querySelector('.red'); 135 | sessionUI.dtmf = node.querySelector('.dtmf'); 136 | sessionUI.dtmfInput = node.querySelector('.dtmf input[type="text"]'); 137 | sessionUI.video = node.querySelector('video'); 138 | sessionUI.messages = node.querySelector('.messages'); 139 | sessionUI.messageForm = node.querySelector('.message-form'); 140 | sessionUI.messageInput = node.querySelector('.message-form input[type="text"]'); 141 | 142 | sessionUIs[uri] = sessionUI; 143 | 144 | // Update template 145 | node.classList.remove('template'); 146 | sessionUI.displayName.textContent = displayName || uri.user; 147 | sessionUI.uri.textContent = '<' + uri + '>'; 148 | 149 | // DOM event listeners 150 | sessionUI.green.addEventListener('click', function () { 151 | var session = sessionUI.session; 152 | if (!session) { 153 | /* TODO - Invite new session */ 154 | /* Don't forget to enable buttons */ 155 | session = sessionUI.session = ua.invite(uri, { 156 | mediaConstraints: { 157 | audio: true, 158 | video: elements.uaVideo.checked 159 | } 160 | }); 161 | 162 | setUpListeners(session); 163 | } else if (session.accept && !session.startTime) { // Incoming, not connected 164 | session.accept({ 165 | mediaConstraints: { 166 | audio: true, 167 | video: elements.uaVideo.checked 168 | } 169 | }); 170 | } 171 | }, false); 172 | 173 | sessionUI.red.addEventListener('click', function () { 174 | var session = sessionUI.session; 175 | if (!session) { 176 | return; 177 | } else if (session.startTime) { // Connected 178 | session.bye(); 179 | } else if (session.reject) { // Incoming 180 | session.reject(); 181 | } else if (session.cancel) { // Outbound 182 | session.cancel(); 183 | } 184 | }, false); 185 | 186 | sessionUI.dtmf.addEventListener('submit', function (e) { 187 | e.preventDefault(); 188 | 189 | var value = sessionUI.dtmfInput.value; 190 | if (value === '' || !session) return; 191 | 192 | sessionUI.dtmfInput.value = ''; 193 | 194 | if (['0','1','2','3','4','5','6','7','8','9','*','#'].indexOf(value) > -1) { 195 | session.dtmf(value); 196 | } 197 | }); 198 | 199 | // Initial DOM state 200 | if (session && !session.accept) { 201 | sessionUI.green.disabled = true; 202 | sessionUI.green.innerHTML = '...'; 203 | sessionUI.red.innerHTML = 'Cancel'; 204 | } else if (!session) { 205 | sessionUI.red.disabled = true; 206 | sessionUI.green.innerHTML = 'Invite'; 207 | sessionUI.red.innerHTML = '...'; 208 | } else { 209 | sessionUI.green.innerHTML = 'Accept'; 210 | sessionUI.red.innerHTML = 'Reject'; 211 | } 212 | sessionUI.dtmfInput.disabled = true; 213 | 214 | // SIP.js event listeners 215 | function setUpListeners(session) { 216 | sessionUI.red.disabled = false; 217 | 218 | if (session.accept) { 219 | sessionUI.green.disabled = false; 220 | sessionUI.green.innerHTML = 'Accept'; 221 | sessionUI.red.innerHTML = 'Reject'; 222 | } else { 223 | sessionUI.green.innerHMTL = '...'; 224 | sessionUI.red.innerHTML = 'Cancel'; 225 | } 226 | 227 | session.on('accepted', function () { 228 | sessionUI.green.disabled = true; 229 | sessionUI.green.innerHTML = '...'; 230 | sessionUI.red.innerHTML = 'Bye'; 231 | sessionUI.dtmfInput.disabled = false; 232 | sessionUI.video.className = 'on'; 233 | 234 | var element = sessionUI.video; 235 | var stream = this.mediaHandler.getRemoteStreams()[0]; 236 | 237 | if (typeof element.srcObject !== 'undefined') { 238 | element.srcObject = stream; 239 | } else if (typeof element.mozSrcObject !== 'undefined') { 240 | element.mozSrcObject = stream; 241 | } else if (typeof element.src !== 'undefined') { 242 | element.src = URL.createObjectURL(stream); 243 | } else { 244 | console.log('Error attaching stream to element.'); 245 | } 246 | }); 247 | 248 | session.on('bye', function () { 249 | sessionUI.green.disabled = false; 250 | sessionUI.red.disabled = true; 251 | sessionUI.dtmfInput.disable = true; 252 | sessionUI.green.innerHTML = 'Invite'; 253 | sessionUI.red.innerHTML = '...'; 254 | sessionUI.video.className = ''; 255 | delete sessionUI.session; 256 | }); 257 | 258 | session.on('failed', function () { 259 | sessionUI.green.disabled = false; 260 | sessionUI.red.disabled = true; 261 | sessionUI.dtmfInput.disable = true; 262 | sessionUI.green.innerHTML = 'Invite'; 263 | sessionUI.red.innerHTML = '...'; 264 | sessionUI.video.className = ''; 265 | delete sessionUI.session; 266 | }); 267 | 268 | session.on('refer', function (target) { 269 | session.bye(); 270 | 271 | createNewSessionUI(target, ua.invite(target, { 272 | mediaConstraints: { 273 | audio: true, 274 | video: elements.uaVideo.checked 275 | } 276 | })); 277 | }); 278 | } 279 | 280 | if (session) { 281 | setUpListeners(session); 282 | } 283 | 284 | // Messages 285 | function appendMessage(body, className) { 286 | messageNode = document.createElement('li'); 287 | messageNode.className = className; 288 | messageNode.textContent = body; 289 | sessionUI.messages.appendChild(messageNode); 290 | sessionUI.messages.scrollTop = sessionUI.messages.scrollHeight; 291 | } 292 | if (message) { 293 | appendMessage(message.body, 'remote'); 294 | } 295 | 296 | ua.on('message', function (message) { 297 | if (message.remoteIdentity.uri !== uri) { 298 | console.warn('unmatched message: ', message.remoteIdentity.uri, uri); 299 | } 300 | 301 | appendMessage(message.body, 'remote'); 302 | }); 303 | 304 | sessionUI.messageForm.addEventListener('submit', function (e) { 305 | e.preventDefault(); 306 | 307 | var body = sessionUI.messageInput.value; 308 | sessionUI.messageInput.value = ''; 309 | 310 | ua.message(uri, body).on('failed', function (response, cause) { 311 | appendMessage('Error sending message: ' + (cause || 'Unknown Error'), 'error'); 312 | }); 313 | 314 | appendMessage(body, 'local'); 315 | }, false); 316 | 317 | // Add node to live session list 318 | elements.sessionList.appendChild(node); 319 | } -------------------------------------------------------------------------------- /instacall/README.md: -------------------------------------------------------------------------------- 1 | # OnSIP InstaCall 2 | 3 | Full code of the OnSIP InstaCall for White Label use. 4 | 5 | See the [Developer Guide](http://developer.onsip.com/guides/sample-applications/instacall/) for more information. 6 | -------------------------------------------------------------------------------- /instacall/css/button.css: -------------------------------------------------------------------------------- 1 | /* line 1, /Users/will/work/web/webrtc-phone/instacall/compile/sass/sidebar.sass */ 2 | html.ic-shift { 3 | position: relative !important; 4 | top: 0 !important; 5 | left: 320px !important; 6 | width: 100% !important; 7 | } 8 | 9 | /* line 7, /Users/will/work/web/webrtc-phone/instacall/compile/sass/sidebar.sass */ 10 | #ic-frame { 11 | position: absolute; 12 | top: 0; 13 | left: -320px; 14 | width: 320px; 15 | height: 100%; 16 | border: none; 17 | border-right: 1px solid #cccccc; 18 | } 19 | 20 | /* line 16, /Users/will/work/web/webrtc-phone/instacall/compile/sass/sidebar.sass */ 21 | #ic-frame-close { 22 | position: absolute; 23 | top: 0; 24 | left: -25px; 25 | height: 20px; 26 | width: 20px; 27 | z-index: 1000; 28 | background: url("../img/x-666666.png") no-repeat center; 29 | background-size: 9px; 30 | border: none; 31 | padding: 0; 32 | margin: 0; 33 | color: transparent; 34 | cursor: pointer; 35 | } 36 | /* line 31, /Users/will/work/web/webrtc-phone/instacall/compile/sass/sidebar.sass */ 37 | #ic-frame-close:hover { 38 | background-image: url("../img/x-000000.png"); 39 | } 40 | 41 | /* line 6, /Users/will/work/web/webrtc-phone/instacall/compile/sass/button.sass */ 42 | .ic-button { 43 | border: none; 44 | overflow: visible; 45 | display: inline-block; 46 | box-sizing: content-box; 47 | -moz-box-sizing: content-box; 48 | height: 10px; 49 | padding: 11px; 50 | -webkit-font-smoothing: antialiased; 51 | font: 14px/10px "Helvetica Neue", Arial, sans-serif; 52 | /* Disabled by default */ 53 | background: #eeeeee; 54 | color: #7e8a8e; 55 | } 56 | /* line 9, /Users/will/work/web/webrtc-phone/instacall/compile/sass/button.sass */ 57 | .ic-button::-moz-focus-inner { 58 | border: none; 59 | padding: 0; 60 | } 61 | /* line 26, /Users/will/work/web/webrtc-phone/instacall/compile/sass/button.sass */ 62 | .ic-button[data-theme=skeu-light], .ic-button[data-theme=skeu-dark] { 63 | border-radius: 0; 64 | } 65 | /* line 29, /Users/will/work/web/webrtc-phone/instacall/compile/sass/button.sass */ 66 | .ic-button[data-theme=skeu-light]:not([disabled]), .ic-button[data-theme=skeu-dark]:not([disabled]) { 67 | background-color: #295c29; 68 | border: 1px solid black; 69 | background-image: -webkit-linear-gradient(top, #3f6d3f, #295c29 30%, #295c29 60%, #245124); 70 | background-image: -moz-linear-gradient(top, #3f6d3f, #295c29 30%, #295c29 60%, #245124); 71 | background-image: -ms-linear-gradient(top, #3f6d3f, #295c29 30%, #295c29 60%, #245124); 72 | background-image: -o-linear-gradient(top, #3f6d3f, #295c29 30%, #295c29 60%, #245124); 73 | background-image: linear-gradient(to bottom, #3f6d3f, #295c29 30%, #295c29 60%, #245124); 74 | -webkit-box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 75 | -moz-box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 76 | box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 77 | color: white; 78 | } 79 | /* line 42, /Users/will/work/web/webrtc-phone/instacall/compile/sass/button.sass */ 80 | .ic-button[data-theme=skeu-light]:not([disabled]):active, .ic-button[data-theme=skeu-dark]:not([disabled]):active { 81 | padding-top: 12px; 82 | padding-bottom: 10px; 83 | background-image: -webkit-linear-gradient(top, #245124, #295c29 30%, #295c29 60%, #3f6d3f); 84 | background-image: -moz-linear-gradient(top, #245124, #295c29 30%, #295c29 60%, #3f6d3f); 85 | background-image: -ms-linear-gradient(top, #245124, #295c29 30%, #295c29 60%, #3f6d3f); 86 | background-image: -o-linear-gradient(top, #245124, #295c29 30%, #295c29 60%, #3f6d3f); 87 | background-image: linear-gradient(to bottom, #245124, #295c29 30%, #295c29 60%, #3f6d3f); 88 | } 89 | /* line 51, /Users/will/work/web/webrtc-phone/instacall/compile/sass/button.sass */ 90 | .ic-button[data-theme=flat-light] { 91 | border-radius: 3px; 92 | } 93 | /* line 54, /Users/will/work/web/webrtc-phone/instacall/compile/sass/button.sass */ 94 | .ic-button[data-theme=flat-light]:not([disabled]) { 95 | background: #2ac56c; 96 | color: white; 97 | } 98 | /* line 58, /Users/will/work/web/webrtc-phone/instacall/compile/sass/button.sass */ 99 | .ic-button[data-theme=flat-light]:not([disabled]):hover { 100 | background-color: #17aa56; 101 | } 102 | /* line 61, /Users/will/work/web/webrtc-phone/instacall/compile/sass/button.sass */ 103 | .ic-button[data-theme=flat-light]:not([disabled]):active { 104 | background-color: #0b8b42; 105 | } 106 | /* line 64, /Users/will/work/web/webrtc-phone/instacall/compile/sass/button.sass */ 107 | .ic-button[data-theme=flat-dark] { 108 | border-radius: 3px; 109 | } 110 | /* line 67, /Users/will/work/web/webrtc-phone/instacall/compile/sass/button.sass */ 111 | .ic-button[data-theme=flat-dark]:not([disabled]) { 112 | background: #2ac56c; 113 | color: white; 114 | border: 2px solid #0b8b42; 115 | } 116 | /* line 72, /Users/will/work/web/webrtc-phone/instacall/compile/sass/button.sass */ 117 | .ic-button[data-theme=flat-dark]:not([disabled]):hover { 118 | background-color: #289456; 119 | } 120 | /* line 75, /Users/will/work/web/webrtc-phone/instacall/compile/sass/button.sass */ 121 | .ic-button[data-theme=flat-dark]:not([disabled]):active { 122 | background-color: #1d8a4c; 123 | } 124 | /* line 79, /Users/will/work/web/webrtc-phone/instacall/compile/sass/button.sass */ 125 | .ic-button.ic-button.ic-text, .ic-button.ic-button.ic-text:hover, .ic-button.ic-button.ic-text:active, .ic-button.ic-button.ic-img, .ic-button.ic-button.ic-img:hover, .ic-button.ic-button.ic-img { 126 | background: none; 127 | border: none; 128 | color: #379144; 129 | padding: 0; 130 | height: auto; 131 | -webkit-box-shadow: none; 132 | -moz-box-shadow: none; 133 | box-shadow: none; 134 | } 135 | -------------------------------------------------------------------------------- /instacall/css/help-overlay.css: -------------------------------------------------------------------------------- 1 | /* line 1, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 2 | html:not(.help-overlay) #help-overlay { 3 | display: block; 4 | visibility: hidden; 5 | opacity: 0; 6 | -webkit-transition: visibility 0s linear 0.5s, opacity 0.5s ease-out; 7 | transition: visibility 0s linear 0.5s, opacity 0.5s ease-out; 8 | } 9 | 10 | /* line 9, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 11 | html.help-overlay.help-first #help-overlay .help-first, html.help-overlay.help-second #help-overlay .help-second, html.help-overlay:not(.audio-device):not(.video-device) #help-overlay .no-devices, html.help-overlay.no-js #help-overlay .no-js, html.help-overlay.no-browser-support #help-overlay .no-browser-support, html.help-overlay.no-modern #help-overlay .no-modern, html.help-overlay.lost-local-media #help-overlay .lost-local-media, html.help-overlay.missing-params #help-overlay .missing-params, html.help-overlay.call-complete #help-overlay .call-complete, html.help-overlay.call-error #help-overlay .call-error { 12 | visibility: visible; 13 | opacity: 1; 14 | -webkit-transition: opacity 0.5s ease-out; 15 | transition: opacity 0.5s ease-out; 16 | } 17 | 18 | /* line 25, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 19 | #help-overlay .lost-local-media ul { 20 | list-style-type: none; 21 | } 22 | 23 | /* line 31, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 24 | html:not(.lost-local-audio) #help-overlay p span.not-lost-both, 25 | html:not(.lost-local-video) #help-overlay p span.not-lost-both { 26 | display: inline; 27 | } 28 | /* line 34, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 29 | html:not(.lost-local-audio) #help-overlay p span.lost-both, 30 | html:not(.lost-local-video) #help-overlay p span.lost-both { 31 | display: none; 32 | } 33 | 34 | /* line 37, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 35 | html:not(.lost-local-audio) #help-overlay p span.lost-local-audio, 36 | html:not(.lost-local-video) #help-overlay p span.lost-local-video { 37 | display: none; 38 | } 39 | 40 | /* line 42, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 41 | html.lost-local-video.lost-local-audio #help-overlay p span.not-lost-both { 42 | display: none; 43 | } 44 | /* line 45, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 45 | html.lost-local-video.lost-local-audio #help-overlay p span.lost-both { 46 | display: inline; 47 | } 48 | 49 | /* line 48, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 50 | html:not(.lost-local-video) #help-overlay .lost-local-media li.camera { 51 | background: url("../img/nodevices/okay_camera_icon.png") left center no-repeat; 52 | } 53 | /* line 50, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 54 | html:not(.lost-local-video) #help-overlay .lost-local-media li.camera .lost-local-video { 55 | display: none; 56 | } 57 | /* line 52, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 58 | html:not(.lost-local-video) #help-overlay .lost-local-media li.camera .lost-local-video + span { 59 | display: inline; 60 | } 61 | 62 | /* line 55, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 63 | html:not(.lost-local-audio) #help-overlay .lost-local-media li.microphone { 64 | background: url("../img/nodevices/okay_microphone_icon.png") 4px center no-repeat; 65 | } 66 | /* line 57, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 67 | html:not(.lost-local-audio) #help-overlay .lost-local-media li.microphone .lost-local-audio { 68 | display: none; 69 | } 70 | /* line 59, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 71 | html:not(.lost-local-audio) #help-overlay .lost-local-media li.microphone .lost-local-audio + span { 72 | display: inline; 73 | } 74 | 75 | /* line 62, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 76 | html.lost-local-audio #help-overlay .lost-local-media li.microphone span:not(.lost-local-audio), 77 | html.lost-local-video #help-overlay .lost-local-media li.camera span:not(.lost-local-video) { 78 | display: none; 79 | } 80 | 81 | /* line 67, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 82 | html:not(.mozilla) #help-overlay .mozilla, 83 | html:not(.chrome) #help-overlay .chrome, 84 | html:not(.mac) #help-overlay .mac, 85 | html:not(.win) #help-overlay .win, 86 | html:not(.no-js) #help-overlay p.no-js, 87 | html:not(.no-browser-support) #help-overlay p.no-browser-support, 88 | html:not(.no-modern) #help-overlay p.no-modern, 89 | html:not(.missing-params) #help-overlay .missing-params, 90 | html:not(.call-complete) #help-overlay p.call-complete, 91 | html:not(.call-complete) #help-overlay button.call-complete, 92 | html:not(.call-error) #help-overlay p.call-error, 93 | html.no-js .alternate-info, 94 | html.no-alts .alternate-info { 95 | display: none; 96 | } 97 | 98 | /* line 82, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 99 | .disableable { 100 | position: relative; 101 | } 102 | /* line 84, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 103 | .disableable:after { 104 | visibility: hidden; 105 | opacity: 0; 106 | -webkit-transition: visibility 0s linear 0.5s, opacity 0.5s ease-out; 107 | transition: visibility 0s linear 0.5s, opacity 0.5s ease-out; 108 | position: absolute; 109 | content: " "; 110 | top: 0; 111 | left: 0; 112 | z-index: 9; 113 | } 114 | 115 | /* line 95, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 116 | html.allow-media:not(.help-overlay) .disableable:after { 117 | visibility: visible; 118 | opacity: 1; 119 | -webkit-transition: opacity 0.5s ease-out; 120 | transition: opacity 0.5s ease-out; 121 | } 122 | 123 | /* line 100, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 124 | html.allow-media:not(.help-overlay) #stream-allow { 125 | display: inline-block; 126 | } 127 | 128 | /* line 103, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 129 | html:not(.callme) #phone.disableable:after { 130 | border-right: 1px solid rgba(153, 153, 153, 0.75); 131 | } 132 | 133 | /* line 106, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 134 | #help-overlay { 135 | position: fixed; 136 | top: 0; 137 | left: 0; 138 | font: 14px "Helvetica Neue"; 139 | z-index: 99; 140 | visibility: visible; 141 | opacity: 1; 142 | -webkit-transition: opacity 0.5s ease-in; 143 | transition: opacity 0.5s ease-in; 144 | } 145 | /* line 118, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 146 | #help-overlay > * { 147 | width: 320px; 148 | height: 100%; 149 | position: fixed; 150 | left: 50%; 151 | margin: 0px 0 0 -160px; 152 | background: rgba(20, 20, 20, 0.9); 153 | visibility: hidden; 154 | opacity: 0; 155 | -webkit-transition: visibility 0s linear 0.5s, opacity 0.5s ease-in; 156 | transition: visibility 0s linear 0.5s, opacity 0.5s ease-in; 157 | text-align: center; 158 | } 159 | /* line 132, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 160 | #help-overlay > *.chrome.help-first img { 161 | max-height: 40px; 162 | } 163 | /* line 137, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 164 | #help-overlay > *:before { 165 | content: ""; 166 | display: inline-block; 167 | height: 100%; 168 | vertical-align: middle; 169 | margin-right: -0.25em; 170 | } 171 | /* line 145, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 172 | #help-overlay a[class] { 173 | line-height: 1.3em; 174 | font-size: 14px; 175 | letter-spacing: normal; 176 | text-decoration: underline; 177 | } 178 | /* line 152, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 179 | #help-overlay button { 180 | top: initial; 181 | left: initial; 182 | right: initial; 183 | background: none; 184 | box-shadow: none; 185 | padding: 0; 186 | margin: 0; 187 | color: white; 188 | display: block; 189 | font-size: 14px; 190 | font-weight: bold; 191 | position: absolute; 192 | bottom: 11px; 193 | line-height: 1.3em; 194 | letter-spacing: normal; 195 | text-decoration: underline; 196 | } 197 | /* line 170, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 198 | #help-overlay button.help-done { 199 | bottom: 3em; 200 | left: 1em; 201 | } 202 | /* line 173, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 203 | #help-overlay button.help-prev, #help-overlay button.help-next, #help-overlay button.help-done.call-complete { 204 | right: 11px; 205 | left: initial; 206 | bottom: 11px; 207 | } 208 | /* line 178, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 209 | #help-overlay .help-content { 210 | text-align: left; 211 | display: inline-block; 212 | vertical-align: middle; 213 | /* 1.65 = (1 + 1.3 + 1) / 2, to center content in the space above the buttons */ 214 | font-size: 14px; 215 | padding-bottom: 1.65em; 216 | } 217 | /* line 189, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 218 | #help-overlay .help-content img { 219 | margin-left: 130px; 220 | } 221 | /* line 192, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 222 | #help-overlay .help-content p { 223 | width: 280px; 224 | color: white; 225 | } 226 | /* line 196, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 227 | #help-overlay .help-content ol { 228 | padding: 0 0 0 0em; 229 | list-style-position: outside; 230 | font-size: 14px; 231 | } 232 | /* line 201, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 233 | #help-overlay .help-content ol img { 234 | position: relative; 235 | left: -15px; 236 | display: block; 237 | margin: 22px auto 22px auto; 238 | max-width: 100%; 239 | } 240 | /* line 208, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 241 | #help-overlay .help-content div { 242 | color: white; 243 | border-top: 2px solid white; 244 | padding: 1em 0; 245 | } 246 | /* line 213, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 247 | #help-overlay .help-content ul { 248 | padding: 0; 249 | margin: 22px 0; 250 | } 251 | /* line 217, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 252 | #help-overlay .help-content li { 253 | list-style: none; 254 | padding: 0; 255 | margin: 0; 256 | } 257 | /* line 222, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 258 | #help-overlay .help-content li span:first-child { 259 | display: inline-block; 260 | width: 25%; 261 | } 262 | /* line 226, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 263 | #help-overlay .help-content li span:not(:first-child) { 264 | display: inline-block; 265 | width: 70%; 266 | } 267 | /* line 230, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 268 | #help-overlay .help-content a { 269 | color: white; 270 | display: inline-block; 271 | max-width: 210px; 272 | } 273 | /* line 235, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 274 | #help-overlay .help-content li.camera { 275 | background: url("../img/nodevices/no_camera_icon.png") left center no-repeat; 276 | padding: 1.5em 5em; 277 | } 278 | /* line 239, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 279 | #help-overlay .help-content li.microphone { 280 | background: url("../img/nodevices/no_mic_icon.png") 4px center no-repeat; 281 | padding: 1.5em 5em; 282 | } 283 | /* line 246, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 284 | #help-overlay .no-devices ul { 285 | list-style-type: none; 286 | padding-left: 25%; 287 | border-bottom: 1px solid #cccccc; 288 | } 289 | /* line 250, /Users/will/work/web/webrtc-phone/instacall/compile/sass/help-overlay.sass */ 290 | #help-overlay .no-devices p { 291 | clear: both; 292 | } 293 | -------------------------------------------------------------------------------- /instacall/css/main.css: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | * HTML5 Boilerplate styles - h5bp.com (generated via initializr.com) 3 | * ========================================================================== */ 4 | /* line 5, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 5 | html, button, input, select, textarea { 6 | color: #222222; 7 | } 8 | 9 | /* line 8, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 10 | body { 11 | font-size: 1em; 12 | line-height: 1.4; 13 | } 14 | 15 | /* line 12, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 16 | ::-moz-selection, ::selection { 17 | background: #b3d4fc; 18 | text-shadow: none; 19 | } 20 | 21 | /* line 16, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 22 | hr { 23 | display: block; 24 | height: 1px; 25 | border: 0; 26 | border-top: 1px solid #cccccc; 27 | margin: 1em 0; 28 | padding: 0; 29 | } 30 | 31 | /* line 24, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 32 | img { 33 | vertical-align: middle; 34 | } 35 | 36 | /* line 27, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 37 | fieldset { 38 | border: 0; 39 | margin: 0; 40 | padding: 0; 41 | } 42 | 43 | /* line 32, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 44 | textarea { 45 | resize: vertical; 46 | } 47 | 48 | /* line 35, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 49 | .chromeframe { 50 | margin: 0.2em 0; 51 | background: #cccccc; 52 | color: black; 53 | padding: 0.2em 0; 54 | } 55 | 56 | /* ========================================================================== 57 | * Common Functionality 58 | * ========================================================================== */ 59 | /* line 45, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 60 | button { 61 | display: inline-block; 62 | position: relative; 63 | padding: 0 1.5em; 64 | background: #47527a; 65 | border-radius: 0.25em; 66 | border: none; 67 | outline: none; 68 | top: 0; 69 | left: 0; 70 | color: white; 71 | font-family: inherit; 72 | font-size: inherit; 73 | line-height: 2em; 74 | cursor: pointer; 75 | letter-spacing: 1px; 76 | margin: -4px 0 4px 4px; 77 | vertical-align: top; 78 | } 79 | /* line 63, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 80 | button:hover { 81 | background-color: #753d5d; 82 | } 83 | /* line 65, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 84 | button:active { 85 | box-shadow: none; 86 | border-top: 4px solid transparent; 87 | border-top-left-radius: 6px; 88 | border-top-right-radius: 6px; 89 | background-clip: padding-box; 90 | margin-bottom: 0px; 91 | } 92 | /* line 72, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 93 | button:disabled { 94 | box-shadow: 0 4px #666666; 95 | background: darkgrey; 96 | border-radius: 0.25em; 97 | border: none; 98 | margin-bottom: 4px; 99 | } 100 | /* line 78, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 101 | button:disabled:hover, button:disabled:active { 102 | box-shadow: 0 4px #666666; 103 | background: darkgrey; 104 | border-radius: 0.25em; 105 | border: none; 106 | margin-bottom: 4px; 107 | } 108 | 109 | /* ========================================================================== 110 | * Author's custom styles 111 | * ========================================================================== */ 112 | /* line 89, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 113 | html { 114 | background-color: #e0e2ec; 115 | font-size: 12px; 116 | } 117 | 118 | /* line 93, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 119 | body { 120 | width: 960px; 121 | margin: 0 auto; 122 | font: 1em "Helvetica Neue", Helvetica, Arial, sans-serif; 123 | color: #444444; 124 | } 125 | 126 | /* line 99, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 127 | .callme body { 128 | width: 700px; 129 | } 130 | 131 | /* line 102, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 132 | header { 133 | overflow: hidden; 134 | } 135 | /* line 105, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 136 | header > a { 137 | float: right; 138 | margin: 3em 1em 0 1em; 139 | text-decoration: none; 140 | color: #454545; 141 | } 142 | /* line 110, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 143 | header > h1 { 144 | float: left; 145 | } 146 | 147 | /* line 113, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 148 | main { 149 | display: block; 150 | width: 100%; 151 | overflow: hidden; 152 | background-color: white; 153 | border: 1px solid #d0d0d0; 154 | border-radius: 0.5em; 155 | box-shadow: 0 0.05em 0.2em rgba(0, 0, 0, 0.2); 156 | } 157 | 158 | /* line 123, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 159 | input[type='text'], input[type='password'] { 160 | border-radius: 0.25em; 161 | padding-left: 5px; 162 | height: 2em; 163 | line-height: 2em; 164 | border: 1px solid #999999; 165 | } 166 | /* line 129, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 167 | input[type='submit'] { 168 | position: absolute; 169 | left: -9999px; 170 | } 171 | 172 | /* line 133, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 173 | h2, a.h2 { 174 | font-size: 1.167em; 175 | font-weight: normal; 176 | line-height: 4em; 177 | margin: 0; 178 | display: block; 179 | text-decoration: none; 180 | } 181 | 182 | /* line 141, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 183 | #phone { 184 | float: left; 185 | width: 585px; 186 | width: calc(66% - 1px - 4em); 187 | padding: 0 2em 2em 2em; 188 | border-right: 1px solid #d0d0d0; 189 | } 190 | 191 | /* line 148, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 192 | .callme #phone { 193 | width: 652px; 194 | width: calc(100% - 4em); 195 | border: none; 196 | } 197 | 198 | /* line 153, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 199 | #phone h2 { 200 | border-bottom: 1px solid #d0d0d0; 201 | background: url("../img/icon-outbound-purple.png") no-repeat left center; 202 | padding-left: 4em; 203 | } 204 | 205 | /* line 158, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 206 | #buttonContent { 207 | width: 50%; 208 | margin: 0 auto; 209 | } 210 | 211 | /* line 162, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 212 | .verticalLine { 213 | border-left: 1px solid lightgrey; 214 | border-right: 1px solid lightgrey; 215 | } 216 | 217 | /* line 166, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 218 | .blueButton { 219 | -moz-box-shadow: inset 0px 1px 0px 0px black; 220 | -webkit-box-shadow: inset 0px 1px 0px 0px black; 221 | box-shadow: inset 0px 1px 0px 0px black; 222 | background-color: #47527a; 223 | text-indent: 0; 224 | border: 1px solid gainsboro; 225 | display: inline-block; 226 | color: #e6e6e6; 227 | font-family: arial; 228 | font-size: 15px; 229 | font-weight: bold; 230 | font-style: normal; 231 | height: 50px; 232 | line-height: 50px; 233 | width: 100px; 234 | text-decoration: none; 235 | text-align: center; 236 | text-shadow: 1px 1px 0px black; 237 | margin-top: 0px; 238 | margin-bottom: 0px; 239 | margin-right: 0px; 240 | margin-left: 0px; 241 | } 242 | /* line 189, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 243 | .blueButton:hover { 244 | background-color: #753d5d; 245 | } 246 | /* line 191, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 247 | .blueButton:active { 248 | position: relative; 249 | top: 1px; 250 | } 251 | 252 | /* line 195, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 253 | #audio-only:active, #audio-video:active { 254 | box-shadow: none; 255 | border: none; 256 | margin-bottom: 4px; 257 | } 258 | 259 | /* line 200, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 260 | #overlayreject { 261 | background: #999999; 262 | box-shadow: 0 4px #666666; 263 | margin-left: 0em; 264 | } 265 | /* line 204, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 266 | #overlayreject:hover { 267 | box-shadow: 0 3px grey; 268 | border-top: 1px solid transparent; 269 | background-clip: padding-box; 270 | } 271 | 272 | /* line 209, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 273 | #dial { 274 | margin: 1.5em 0 1em 0; 275 | } 276 | /* line 211, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 277 | #dial label { 278 | line-height: 2em; 279 | } 280 | 281 | /* line 214, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 282 | #dial-uri { 283 | margin: -0.25em 1.5em 0 0; 284 | float: right; 285 | width: 24em; 286 | } 287 | 288 | /* line 219, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 289 | #last-name { 290 | margin-left: 0.5em; 291 | } 292 | 293 | /* line 222, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 294 | #invite-container { 295 | position: relative; 296 | top: 0; 297 | left: 0; 298 | display: inline-block; 299 | float: right; 300 | z-index: 3; 301 | } 302 | 303 | /* line 230, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 304 | .callme #invite-container { 305 | float: none; 306 | top: -4px; 307 | left: 1em; 308 | } 309 | 310 | /* line 235, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 311 | #invite .ir { 312 | display: inline-block; 313 | background: url("../img/dropdown-icon.png") no-repeat right; 314 | width: 1em; 315 | height: 1em; 316 | margin: 0 -0.25em -0.25em 0.25em; 317 | } 318 | 319 | /* line 242, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 320 | #audio-video, #audio-only { 321 | left: 0; 322 | display: none; 323 | position: absolute; 324 | z-index: 2; 325 | width: 6.9em; 326 | box-shadow: 0 0 0; 327 | border-radius: 0; 328 | } 329 | 330 | /* line 251, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 331 | #audio-video:hover, #audio-only:hover { 332 | background-color: #ff5700; 333 | background-clip: none; 334 | border: none; 335 | } 336 | 337 | /* line 256, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 338 | #audio-video { 339 | top: 2em; 340 | } 341 | /* line 258, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 342 | #audio-video + #audio-only { 343 | top: 4em; 344 | } 345 | 346 | /* line 261, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 347 | #audio-only { 348 | top: 2em; 349 | border-radius: 0em 0em 0.25em 0.25em; 350 | } 351 | 352 | /* line 265, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 353 | video { 354 | background: #e0e2ec; 355 | } 356 | 357 | /* line 268, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 358 | #streams { 359 | position: relative; 360 | top: 0; 361 | left: 0; 362 | width: 100%; 363 | } 364 | /* line 274, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 365 | #streams.got-media #stream-local { 366 | position: relative; 367 | bottom: 0; 368 | left: 0; 369 | width: 100%; 370 | } 371 | /* line 279, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 372 | #streams.got-media #stream-remote { 373 | position: absolute; 374 | } 375 | 376 | /* line 282, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 377 | #stream-remote { 378 | width: 100%; 379 | position: relative; 380 | z-index: 1; 381 | background: transparent; 382 | /* since this is displayed on top #novideo during audio calls, we need to 383 | * let clicks pass through to the social links */ 384 | pointer-events: none; 385 | } 386 | 387 | /* line 291, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 388 | .shadow-text { 389 | color: rgba(144, 144, 144, 0.6); 390 | text-shadow: 1px 4px 6px #e0e2ec, 0 0 0 black, 1px 4px 6px #e0e2ec; 391 | } 392 | 393 | /* line 295, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 394 | #stream-novideo { 395 | position: absolute; 396 | top: 0; 397 | left: 0; 398 | height: 100%; 399 | width: 100%; 400 | background: #e0e2ec url("../img/no_video_icon.png") no-repeat center 7.5em; 401 | text-align: center; 402 | } 403 | /* line 303, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 404 | #stream-novideo #video-disabled { 405 | margin-top: 250px; 406 | /* 7.5*12px + img size + 2*12px */ 407 | margin-top: calc(4.75em + 135px); 408 | font-size: 2em; 409 | } 410 | /* line 309, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 411 | #stream-novideo #social dt { 412 | position: absolute; 413 | bottom: 1.25em; 414 | right: 5.17em; 415 | margin: 0; 416 | color: #666666; 417 | } 418 | /* line 315, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 419 | #stream-novideo #social dd { 420 | position: absolute; 421 | bottom: 0.83em; 422 | } 423 | /* line 318, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 424 | #stream-novideo #social dd:nth-of-type(1) { 425 | right: 3em; 426 | } 427 | /* line 320, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 428 | #stream-novideo #social dd:nth-of-type(2) { 429 | right: 0.83em; 430 | } 431 | 432 | /* line 323, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 433 | #stream-local { 434 | position: absolute; 435 | z-index: 2; 436 | bottom: 1em; 437 | left: 1em; 438 | width: 25%; 439 | -webkit-transform: scaleX(-1); 440 | -moz-transform: scaleX(-1); 441 | transform: scaleX(-1); 442 | } 443 | 444 | /* line 334, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 445 | #streams:-webkit-full-screen, #streams:-moz-full-screen, #streams:full-screen { 446 | position: absolute; 447 | width: 100%; 448 | height: 100%; 449 | } 450 | /* line 338, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 451 | #streams:-webkit-full-screen #stream-remote, #streams:-moz-full-screen #stream-remote, #streams:full-screen #stream-remote { 452 | height: 100%; 453 | } 454 | 455 | /* line 341, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 456 | .no-webrtc #stream-alternate, .allow-media #stream-allow, .signup #stream-signup { 457 | display: block; 458 | font-size: 2em; 459 | padding: 5em; 460 | height: 6em; 461 | background: #e0e2ec; 462 | border: 1px solid #cccccc; 463 | text-align: center; 464 | } 465 | 466 | /* line 350, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 467 | .hide { 468 | display: none; 469 | visibility: hidden; 470 | } 471 | 472 | /* line 354, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 473 | #stream-signup > a { 474 | color: #a486ba; 475 | } 476 | 477 | /* line 358, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 478 | .no-webrtc #stream-local, .no-webrtc #stream-remote { 479 | display: none; 480 | } 481 | 482 | /* line 362, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 483 | .allow-media #stream-remote, .allow-media #stream-local { 484 | display: none; 485 | } 486 | 487 | /* line 366, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 488 | .signup #stream-remote, .signup #stream-local { 489 | display: none; 490 | } 491 | 492 | /* line 369, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 493 | #stream-allow, #stream-alternate, #stream-signup, .no-webrtc #stream-signup { 494 | display: none; 495 | } 496 | 497 | /* line 372, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 498 | #controls { 499 | margin-top: 1em; 500 | padding: 1em 0.5em; 501 | border: 1px solid #dedede; 502 | border-radius: 0.25em; 503 | height: 2em; 504 | opacity: 0; 505 | transition: all 1s; 506 | visibility: hidden; 507 | } 508 | 509 | /* line 382, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 510 | .active-call #controls { 511 | opacity: 1; 512 | visibility: visible; 513 | } 514 | 515 | /* line 386, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 516 | .img { 517 | padding: 0; 518 | } 519 | 520 | /* line 390, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 521 | #controls > * { 522 | margin-left: 1em; 523 | } 524 | /* line 392, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 525 | #controls button .ir { 526 | width: 2.5em; 527 | height: 2em; 528 | } 529 | 530 | /* line 396, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 531 | #mute { 532 | display: none; 533 | margin-left: 0em; 534 | } 535 | /* line 397, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 536 | #mute .ir { 537 | background: url("../img/callcontrol-icon-mute.png") no-repeat center; 538 | } 539 | 540 | /* This property is only here until the mute function is fixed */ 541 | /* line 404, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 542 | #volume .ir { 543 | background: url("../img/callcontrol-icon-volume.png") no-repeat center; 544 | } 545 | 546 | /* line 407, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 547 | #volume-hover { 548 | display: inline-block; 549 | padding: 1em 0; 550 | margin: -1em 0 -1em 1em; 551 | } 552 | 553 | /* line 412, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 554 | #volume-slider { 555 | -webkit-appearance: none !important; 556 | background: #fd8224; 557 | height: 0.5em; 558 | display: none; 559 | } 560 | /* line 417, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 561 | #volume-slider::-moz-range-track { 562 | visibility: hidden; 563 | } 564 | /* line 419, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 565 | #volume-slider::-moz-range-thumb, #volume-slider::-webkit-slider-thumb { 566 | -webkit-appearance: none !important; 567 | background: #ff5700; 568 | height: 1em; 569 | width: 1em; 570 | } 571 | 572 | /* line 425, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 573 | #fullscreen .ir { 574 | background: url("../img/callcontrol-icon-fullscreen.png") no-repeat center; 575 | } 576 | 577 | /* line 428, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 578 | #controls > .terminate { 579 | float: right; 580 | margin-right: 0.5em; 581 | } 582 | 583 | /* line 432, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 584 | .overlay { 585 | position: absolute; 586 | width: 100%; 587 | background: #e2eae6 50% 50% repeat-x; 588 | font-size: 1em; 589 | font-weight: bold; 590 | text-align: center; 591 | z-index: 3; 592 | opacity: 0.85; 593 | overflow: hidden; 594 | transition: all 0.8s; 595 | max-height: 0; 596 | } 597 | /* line 445, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 598 | .overlay > p { 599 | display: inline; 600 | vertical-align: middle; 601 | } 602 | /* line 448, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 603 | .overlay > button { 604 | margin: -4px 1em 4px 1em; 605 | } 606 | 607 | /* line 451, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 608 | .appear { 609 | padding: 1.5em 0; 610 | max-height: 2em; 611 | } 612 | 613 | /* ========================================================================== 614 | * Helper classes 615 | * ========================================================================== */ 616 | /* line 459, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 617 | .ir { 618 | background-color: transparent; 619 | border: 0; 620 | overflow: hidden; 621 | *text-indent: -9999px; 622 | } 623 | /* line 464, /Users/will/work/web/webrtc-phone/instacall/compile/sass/main.sass */ 624 | .ir:before { 625 | content: ""; 626 | display: block; 627 | width: 0; 628 | height: 150%; 629 | } 630 | -------------------------------------------------------------------------------- /instacall/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v1.1.0 | MIT License | git.io/normalize */ 2 | /* line 3, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 3 | article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { 4 | display: block; 5 | } 6 | 7 | /* line 6, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 8 | audio, canvas, video { 9 | display: inline-block; 10 | *display: inline; 11 | *zoom: 1; 12 | } 13 | 14 | /* line 11, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 15 | audio:not([controls]) { 16 | display: none; 17 | height: 0; 18 | } 19 | 20 | /* line 15, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 21 | [hidden] { 22 | display: none; 23 | } 24 | 25 | /* line 18, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 26 | html { 27 | font-size: 100%; 28 | -webkit-text-size-adjust: 100%; 29 | -ms-text-size-adjust: 100%; 30 | font-family: sans-serif; 31 | } 32 | 33 | /* line 24, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 34 | button, input, select, textarea { 35 | font-family: sans-serif; 36 | } 37 | 38 | /* line 27, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 39 | body { 40 | margin: 0; 41 | } 42 | 43 | /* line 31, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 44 | a:focus { 45 | outline: thin dotted; 46 | } 47 | /* line 33, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 48 | a:active, a:hover { 49 | outline: 0; 50 | } 51 | 52 | /* line 36, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 53 | h1 { 54 | font-size: 2em; 55 | margin: 0.67em 0; 56 | } 57 | 58 | /* line 40, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 59 | h2 { 60 | font-size: 1.5em; 61 | margin: 0.83em 0; 62 | } 63 | 64 | /* line 44, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 65 | h3 { 66 | font-size: 1.17em; 67 | margin: 1em 0; 68 | } 69 | 70 | /* line 48, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 71 | h4 { 72 | font-size: 1em; 73 | margin: 1.33em 0; 74 | } 75 | 76 | /* line 52, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 77 | h5 { 78 | font-size: 0.83em; 79 | margin: 1.67em 0; 80 | } 81 | 82 | /* line 56, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 83 | h6 { 84 | font-size: 0.67em; 85 | margin: 2.33em 0; 86 | } 87 | 88 | /* line 60, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 89 | abbr[title] { 90 | border-bottom: 1px dotted; 91 | } 92 | 93 | /* line 63, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 94 | b, strong { 95 | font-weight: bold; 96 | } 97 | 98 | /* line 66, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 99 | blockquote { 100 | margin: 1em 40px; 101 | } 102 | 103 | /* line 69, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 104 | dfn { 105 | font-style: italic; 106 | } 107 | 108 | /* line 72, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 109 | hr { 110 | -moz-box-sizing: content-box; 111 | box-sizing: content-box; 112 | height: 0; 113 | } 114 | 115 | /* line 77, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 116 | mark { 117 | background: yellow; 118 | color: black; 119 | } 120 | 121 | /* line 81, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 122 | p, pre { 123 | margin: 1em 0; 124 | } 125 | 126 | /* line 84, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 127 | code, kbd, pre, samp { 128 | font-family: monospace, serif; 129 | _font-family: "courier new", monospace; 130 | font-size: 1em; 131 | } 132 | 133 | /* line 89, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 134 | pre { 135 | white-space: pre; 136 | white-space: pre-wrap; 137 | word-wrap: break-word; 138 | } 139 | 140 | /* line 94, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 141 | q { 142 | quotes: none; 143 | } 144 | /* line 96, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 145 | q:before, q:after { 146 | content: ""; 147 | content: none; 148 | } 149 | 150 | /* line 100, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 151 | small { 152 | font-size: 80%; 153 | } 154 | 155 | /* line 103, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 156 | sub { 157 | font-size: 75%; 158 | line-height: 0; 159 | position: relative; 160 | vertical-align: baseline; 161 | } 162 | 163 | /* line 109, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 164 | sup { 165 | font-size: 75%; 166 | line-height: 0; 167 | position: relative; 168 | vertical-align: baseline; 169 | top: -0.5em; 170 | } 171 | 172 | /* line 116, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 173 | sub { 174 | bottom: -0.25em; 175 | } 176 | 177 | /* line 119, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 178 | dl, menu, ol, ul { 179 | margin: 1em 0; 180 | } 181 | 182 | /* line 122, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 183 | dd { 184 | margin: 0 0 0 40px; 185 | } 186 | 187 | /* line 125, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 188 | menu, ol, ul { 189 | padding: 0 0 0 40px; 190 | } 191 | 192 | /* line 129, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 193 | nav ul, nav ol { 194 | list-style: none; 195 | list-style-image: none; 196 | } 197 | 198 | /* line 133, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 199 | img { 200 | border: 0; 201 | -ms-interpolation-mode: bicubic; 202 | } 203 | 204 | /* line 137, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 205 | svg:not(:root) { 206 | overflow: hidden; 207 | } 208 | 209 | /* line 140, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 210 | figure, form { 211 | margin: 0; 212 | } 213 | 214 | /* line 143, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 215 | fieldset { 216 | border: 1px solid silver; 217 | margin: 0 2px; 218 | padding: 0.35em 0.625em 0.75em; 219 | } 220 | 221 | /* line 148, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 222 | legend { 223 | border: 0; 224 | padding: 0; 225 | white-space: normal; 226 | *margin-left: -7px; 227 | } 228 | 229 | /* line 154, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 230 | button, input, select, textarea { 231 | font-size: 100%; 232 | margin: 0; 233 | vertical-align: baseline; 234 | *vertical-align: middle; 235 | } 236 | 237 | /* line 160, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 238 | button, input { 239 | line-height: normal; 240 | } 241 | 242 | /* line 163, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 243 | button, select { 244 | text-transform: none; 245 | } 246 | 247 | /* line 166, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 248 | button, html input[type="button"] { 249 | -webkit-appearance: button; 250 | cursor: pointer; 251 | *overflow: visible; 252 | } 253 | 254 | /* line 172, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 255 | input[type="reset"], input[type="submit"] { 256 | -webkit-appearance: button; 257 | cursor: pointer; 258 | *overflow: visible; 259 | } 260 | 261 | /* line 177, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 262 | button[disabled], html input[disabled] { 263 | cursor: default; 264 | } 265 | 266 | /* line 181, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 267 | input[type="checkbox"], input[type="radio"] { 268 | -moz-box-sizing: border-box; 269 | box-sizing: border-box; 270 | padding: 0; 271 | *height: 13px; 272 | *width: 13px; 273 | } 274 | /* line 187, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 275 | input[type="search"] { 276 | -webkit-appearance: textfield; 277 | -moz-box-sizing: content-box; 278 | -webkit-box-sizing: content-box; 279 | box-sizing: content-box; 280 | } 281 | /* line 192, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 282 | input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { 283 | -webkit-appearance: none; 284 | } 285 | 286 | /* line 195, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 287 | button::-moz-focus-inner, input::-moz-focus-inner { 288 | border: 0; 289 | padding: 0; 290 | } 291 | 292 | /* line 199, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 293 | textarea { 294 | overflow: auto; 295 | vertical-align: top; 296 | } 297 | 298 | /* line 203, /Users/will/work/web/webrtc-phone/instacall/compile/sass/normalize.sass */ 299 | table { 300 | border-collapse: collapse; 301 | border-spacing: 0; 302 | } 303 | -------------------------------------------------------------------------------- /instacall/css/onsipbutton.css: -------------------------------------------------------------------------------- 1 | /* line 1, /Users/will/work/web/webrtc-phone/instacall/compile/sass/sidebar.sass */ 2 | html.ic-shift { 3 | position: relative !important; 4 | top: 0 !important; 5 | left: 320px !important; 6 | width: 100% !important; 7 | } 8 | 9 | /* line 7, /Users/will/work/web/webrtc-phone/instacall/compile/sass/sidebar.sass */ 10 | #ic-frame { 11 | position: absolute; 12 | top: 0; 13 | left: -320px; 14 | width: 320px; 15 | height: 100%; 16 | border: none; 17 | border-right: 1px solid #cccccc; 18 | } 19 | 20 | /* line 16, /Users/will/work/web/webrtc-phone/instacall/compile/sass/sidebar.sass */ 21 | #ic-frame-close { 22 | position: absolute; 23 | top: 0; 24 | left: -25px; 25 | height: 20px; 26 | width: 20px; 27 | z-index: 1000; 28 | background: url("../img/x-666666.png") no-repeat center; 29 | background-size: 9px; 30 | border: none; 31 | padding: 0; 32 | margin: 0; 33 | color: transparent; 34 | cursor: pointer; 35 | } 36 | /* line 31, /Users/will/work/web/webrtc-phone/instacall/compile/sass/sidebar.sass */ 37 | #ic-frame-close:hover { 38 | background-image: url("../img/x-000000.png"); 39 | } 40 | 41 | /* line 10, /Users/will/work/web/webrtc-phone/instacall/compile/sass/onsipbutton.sass */ 42 | body { 43 | position: absolute; 44 | top: 5px; 45 | left: 500px; 46 | padding: 0 !important; 47 | } 48 | 49 | /* line 16, /Users/will/work/web/webrtc-phone/instacall/compile/sass/onsipbutton.sass */ 50 | #header .top-nav .onsipInstacall li { 51 | padding: 11px; 52 | margin: 0; 53 | float: none; 54 | } 55 | 56 | /* line 21, /Users/will/work/web/webrtc-phone/instacall/compile/sass/onsipbutton.sass */ 57 | a.onsipInstacall { 58 | background-image: linear-gradient(to top, #ff8200, #ff5700); 59 | height: 16px !important; 60 | padding-left: 8px; 61 | padding-bottom: 4px; 62 | padding-top: 4px; 63 | font: 16px/16px "Kepler Regular", Times, serif; 64 | } 65 | /* line 29, /Users/will/work/web/webrtc-phone/instacall/compile/sass/onsipbutton.sass */ 66 | a.onsipInstacall .phonenum a { 67 | color: white; 68 | } 69 | /* line 32, /Users/will/work/web/webrtc-phone/instacall/compile/sass/onsipbutton.sass */ 70 | a.onsipInstacall:hover { 71 | background-image: none; 72 | } 73 | 74 | /* line 35, /Users/will/work/web/webrtc-phone/instacall/compile/sass/onsipbutton.sass */ 75 | .ic-color { 76 | background-color: #ff8200; 77 | border-right-color: #ff8200; 78 | border-bottom-color: #ff8200; 79 | } 80 | 81 | /* line 40, /Users/will/work/web/webrtc-phone/instacall/compile/sass/onsipbutton.sass */ 82 | .ic-color:hover, .ic-li:hover > .ic-color { 83 | background-color: #ff5700; 84 | border-bottom-color: #ff5700; 85 | border-right-color: #ff5700; 86 | } 87 | 88 | /* line 45, /Users/will/work/web/webrtc-phone/instacall/compile/sass/onsipbutton.sass */ 89 | li.ic-li { 90 | font-family: "Kepler Regular"; 91 | font-size: 16px; 92 | } 93 | 94 | /* line 49, /Users/will/work/web/webrtc-phone/instacall/compile/sass/onsipbutton.sass */ 95 | li.ic-li-video { 96 | position: relative; 97 | top: 0; 98 | left: 0; 99 | cursor: default; 100 | color: transparent; 101 | } 102 | /* line 56, /Users/will/work/web/webrtc-phone/instacall/compile/sass/onsipbutton.sass */ 103 | li.ic-li-video:before, li.ic-li-video:after { 104 | transition: opacity 1s; 105 | position: absolute; 106 | top: 11px; 107 | left: 11px; 108 | border: none; 109 | color: white; 110 | } 111 | /* line 64, /Users/will/work/web/webrtc-phone/instacall/compile/sass/onsipbutton.sass */ 112 | li.ic-li-video:after { 113 | content: "Call with video"; 114 | opacity: 1; 115 | } 116 | /* line 68, /Users/will/work/web/webrtc-phone/instacall/compile/sass/onsipbutton.sass */ 117 | li.ic-li-video:before { 118 | content: "Coming Soon"; 119 | opacity: 0; 120 | } 121 | /* line 73, /Users/will/work/web/webrtc-phone/instacall/compile/sass/onsipbutton.sass */ 122 | li.ic-li-video:hover:after { 123 | opacity: 0; 124 | } 125 | /* line 76, /Users/will/work/web/webrtc-phone/instacall/compile/sass/onsipbutton.sass */ 126 | li.ic-li-video:hover:before { 127 | opacity: 1; 128 | } 129 | -------------------------------------------------------------------------------- /instacall/css/sidebar.css: -------------------------------------------------------------------------------- 1 | /* line 1, /Users/will/work/web/webrtc-phone/instacall/compile/sass/sidebar.sass */ 2 | html.ic-shift { 3 | position: relative !important; 4 | top: 0 !important; 5 | left: 320px !important; 6 | width: 100% !important; 7 | } 8 | 9 | /* line 7, /Users/will/work/web/webrtc-phone/instacall/compile/sass/sidebar.sass */ 10 | #ic-frame { 11 | position: absolute; 12 | top: 0; 13 | left: -320px; 14 | width: 320px; 15 | height: 100%; 16 | border: none; 17 | border-right: 1px solid #cccccc; 18 | } 19 | 20 | /* line 16, /Users/will/work/web/webrtc-phone/instacall/compile/sass/sidebar.sass */ 21 | #ic-frame-close { 22 | position: absolute; 23 | top: 0; 24 | left: -25px; 25 | height: 20px; 26 | width: 20px; 27 | z-index: 1000; 28 | background: url("../img/x-666666.png") no-repeat center; 29 | background-size: 9px; 30 | border: none; 31 | padding: 0; 32 | margin: 0; 33 | color: transparent; 34 | cursor: pointer; 35 | } 36 | /* line 31, /Users/will/work/web/webrtc-phone/instacall/compile/sass/sidebar.sass */ 37 | #ic-frame-close:hover { 38 | background-image: url("../img/x-000000.png"); 39 | } 40 | -------------------------------------------------------------------------------- /instacall/css/theme.css: -------------------------------------------------------------------------------- 1 | /* line 66, ../../sprite/mute/*.png */ 2 | .mute-sprite, html.theme-flat-dark #mute-box + span:not(:last-child), html.theme-flat-dark #mute-box:checked + span:not(:last-child), html.theme-skeu-dark #mute-box + span:not(:last-child), html.theme-skeu-dark #mute-box:checked + span:not(:last-child) { 3 | background: url('../img/sprite/mute-s32d676cfb8.png') no-repeat; 4 | } 5 | 6 | /* line 3, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 7 | html.theme-flat-light #multi-button:not(.foreground), html.theme-flat-light #audio-dial-button, html.theme-flat-light #video-dial-button { 8 | background-color: #2ac56c; 9 | border-radius: 6px; 10 | } 11 | /* line 6, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 12 | html.theme-flat-light #multi-button:not(.foreground):hover, html.theme-flat-light #audio-dial-button:hover, html.theme-flat-light #video-dial-button:hover { 13 | background-color: #17aa56; 14 | } 15 | /* line 8, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 16 | html.theme-flat-light #multi-button:not(.foreground):active, html.theme-flat-light #audio-dial-button:active, html.theme-flat-light #video-dial-button:active { 17 | background-color: #0a833d; 18 | } 19 | /* line 12, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 20 | html.theme-flat-light #multi-button.foreground { 21 | background-color: #f06060; 22 | border-radius: 6px; 23 | } 24 | /* line 15, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 25 | html.theme-flat-light #multi-button.foreground:hover { 26 | background-color: #cb4e4e; 27 | } 28 | /* line 17, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 29 | html.theme-flat-light #multi-button.foreground:active { 30 | background-color: #ab3c3c; 31 | } 32 | /* line 20, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 33 | html.theme-flat-light.has-dtmf #multi-button { 34 | border-top-left-radius: 0; 35 | border-top-right-radius: 0; 36 | } 37 | /* line 24, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 38 | html.theme-flat-light .dtmf { 39 | background-color: white; 40 | border: 1px solid #9b9b9b; 41 | color: gray; 42 | -webkit-transition: all 0.2s ease-in; 43 | -moz-transition: all0 0.2s ease-in; 44 | -o-transition: all 0.2s ease-in; 45 | transition: all 0.2s ease-in; 46 | } 47 | /* line 32, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 48 | html.theme-flat-light .dtmf:hover { 49 | background-color: lightgrey; 50 | } 51 | /* line 34, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 52 | html.theme-flat-light .dtmf:active, html.theme-flat-light .dtmf.dtmf-active { 53 | color: white; 54 | background-color: gray; 55 | -webkit-transition: 0; 56 | -moz-transition: 0; 57 | -o-transition: 0; 58 | transition: 0; 59 | } 60 | /* line 43, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 61 | html.theme-flat-light #dtmfButtons .row:nth-of-type(1) button:nth-of-type(1) { 62 | border-top-left-radius: 6px; 63 | } 64 | /* line 47, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 65 | html.theme-flat-light #dtmfButtons .row:nth-of-type(1) button:nth-of-type(3) { 66 | border-top-right-radius: 6px; 67 | } 68 | 69 | /* line 3, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 70 | html.theme-flat-dark body { 71 | font: 1em "Helvetica Neue"; 72 | } 73 | /* line 6, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 74 | html.theme-flat-dark main, html.theme-flat-dark #multi-box { 75 | background-color: #dddddd; 76 | } 77 | /* line 9, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 78 | html.theme-flat-dark input { 79 | background-color: #f1f1f1; 80 | } 81 | /* line 12, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 82 | html.theme-flat-dark #status, html.theme-flat-dark #controls { 83 | border-bottom: 1px solid darkgrey; 84 | } 85 | /* line 16, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 86 | html.theme-flat-dark #volume-pic:after { 87 | background-color: #dddddd; 88 | } 89 | /* line 19, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 90 | html.theme-flat-dark #volume-slider { 91 | background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #444444), color-stop(80%, #444444), color-stop(81%, #666666), color-stop(100%, #666666)); 92 | background-image: -moz-linear-gradient(left, #444444 0%, #444444 80%, #666666 81%, #666666 100%); 93 | } 94 | /* line 23, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 95 | html.theme-flat-dark #mute-box { 96 | display: none; 97 | } 98 | /* line 25, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 99 | html.theme-flat-dark #mute-box + span:not(:last-child) { 100 | background-position: 0 -60px; 101 | float: left; 102 | margin-bottom: 1em; 103 | padding-right: 0.49em; 104 | } 105 | /* line 30, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 106 | html.theme-flat-dark #mute-box:checked + span:not(:last-child) { 107 | background-position: 0 0; 108 | } 109 | /* line 34, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 110 | html.theme-flat-dark #multi-button.foreground { 111 | background-color: #862c2c; 112 | border-radius: 6px; 113 | } 114 | /* line 37, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 115 | html.theme-flat-dark #multi-button.foreground:hover { 116 | background-color: #7c2222; 117 | } 118 | /* line 39, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 119 | html.theme-flat-dark #multi-button.foreground:active { 120 | background-color: #511111; 121 | } 122 | /* line 44, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 123 | html.theme-flat-dark #multi-button:not(.foreground), html.theme-flat-dark #audio-dial-button, html.theme-flat-dark #video-dial-button { 124 | background-color: #2ac56c; 125 | border-radius: 6px; 126 | border: 2px solid #0b8b42; 127 | } 128 | /* line 48, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 129 | html.theme-flat-dark #multi-button:not(.foreground):hover, html.theme-flat-dark #audio-dial-button:hover, html.theme-flat-dark #video-dial-button:hover { 130 | background-color: #289456; 131 | } 132 | /* line 50, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 133 | html.theme-flat-dark #multi-button:not(.foreground):active, html.theme-flat-dark #audio-dial-button:active, html.theme-flat-dark #video-dial-button:active { 134 | background-color: #1d8a4c; 135 | } 136 | /* line 53, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 137 | html.theme-flat-dark.has-dtmf #multi-button { 138 | border-top-left-radius: 0; 139 | border-top-right-radius: 0; 140 | } 141 | /* line 57, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 142 | html.theme-flat-dark .dtmf { 143 | background-color: #444444; 144 | color: white; 145 | border: 1px solid black; 146 | -webkit-transition: all 0.2s ease-in; 147 | -moz-transition: all0 0.2s ease-in; 148 | -o-transition: all 0.2s ease-in; 149 | transition: all 0.2s ease-in; 150 | } 151 | /* line 65, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 152 | html.theme-flat-dark .dtmf:hover { 153 | background-color: #333333; 154 | } 155 | /* line 67, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 156 | html.theme-flat-dark .dtmf:active { 157 | color: gray; 158 | background-color: #222222; 159 | -webkit-transition: 0; 160 | -moz-transition: 0; 161 | -o-transition: 0; 162 | transition: 0; 163 | } 164 | /* line 77, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 165 | html.theme-flat-dark #dtmfButtons .row:nth-of-type(1) button:nth-of-type(1) { 166 | border-top-left-radius: 6px; 167 | } 168 | /* line 81, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_flat-dark.sass */ 169 | html.theme-flat-dark #dtmfButtons .row:nth-of-type(1) button:nth-of-type(3) { 170 | border-top-right-radius: 6px; 171 | } 172 | 173 | /* line 3, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/skeu-light.sass */ 174 | html.theme-skeu-light body { 175 | font: 1em "Lucida"; 176 | } 177 | /* line 6, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/skeu-light.sass */ 178 | html.theme-skeu-light .dtmf { 179 | background: #444444; 180 | border-top: 1px solid black; 181 | border-left: 1px solid black; 182 | color: white; 183 | text-shadow: -1px -1px 0 #676767; 184 | background-image: -webkit-linear-gradient(top, #626262, #444444 30%, #444444 60%, #3a3a3a); 185 | background-image: -moz-linear-gradient(top, #626262, #444444 30%, #444444 60%, #3a3a3a); 186 | background-image: -ms-linear-gradient(top, #626262, #444444 30%, #444444 60%, #3a3a3a); 187 | background-image: -o-linear-gradient(top, #626262, #444444 30%, #444444 60%, #3a3a3a); 188 | background-image: linear-gradient(to bottom, #626262, #444444 30%, #444444 60%, #3a3a3a); 189 | -webkit-box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 190 | -moz-box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 191 | box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 192 | } 193 | /* line 23, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/skeu-light.sass */ 194 | html.theme-skeu-light .dtmf:active, html.theme-skeu-light .dtmf.dtmf-active { 195 | padding-top: 5px; 196 | background-image: -webkit-linear-gradient(top, #3a3a3a, #444444 30%, #444444 60%, #626262); 197 | background-image: -moz-linear-gradient(top, #3a3a3a, #444444 30%, #444444 60%, #626262); 198 | background-image: -ms-linear-gradient(top, #3a3a3a, #444444 30%, #444444 60%, #626262); 199 | background-image: -o-linear-gradient(top, #3a3a3a, #444444 30%, #444444 60%, #626262); 200 | background-image: linear-gradient(to bottom, #3a3a3a, #444444 30%, #444444 60%, #626262); 201 | } 202 | /* line 32, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/skeu-light.sass */ 203 | html.theme-skeu-light #multi-button.foreground { 204 | background-color: #5c2929; 205 | border: 1px solid black; 206 | background-image: -webkit-linear-gradient(top, #6d3f3f, #5c2929 30%, #5c2929 60%, #512424); 207 | background-image: -moz-linear-gradient(top, #6d3f3f, #5c2929 30%, #5c2929 60%, #512424); 208 | background-image: -ms-linear-gradient(top, #6d3f3f, #5c2929 30%, #5c2929 60%, #512424); 209 | background-image: -o-linear-gradient(top, #6d3f3f, #5c2929 30%, #5c2929 60%, #512424); 210 | background-image: linear-gradient(to bottom, #6d3f3f, #5c2929 30%, #5c2929 60%, #512424); 211 | -webkit-box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 212 | -moz-box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 213 | box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 214 | } 215 | /* line 46, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/skeu-light.sass */ 216 | html.theme-skeu-light #multi-button.foreground:active { 217 | padding-top: 5px; 218 | background-image: -webkit-linear-gradient(top, #512424, #5c2929 30%, #5c2929 60%, #6d3f3f); 219 | background-image: -moz-linear-gradient(top, #512424, #5c2929 30%, #5c2929 60%, #6d3f3f); 220 | background-image: -ms-linear-gradient(top, #512424, #5c2929 30%, #5c2929 60%, #6d3f3f); 221 | background-image: -o-linear-gradient(top, #512424, #5c2929 30%, #5c2929 60%, #6d3f3f); 222 | background-image: linear-gradient(to bottom, #512424, #5c2929 30%, #5c2929 60%, #6d3f3f); 223 | } 224 | /* line 55, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/skeu-light.sass */ 225 | html.theme-skeu-light #multi-button:not(.foreground), html.theme-skeu-light #audio-dial-button, html.theme-skeu-light #video-dial-button { 226 | background-color: #295c29; 227 | border: 1px solid black; 228 | background-image: -webkit-linear-gradient(top, #3f6d3f, #295c29 30%, #295c29 60%, #245124); 229 | background-image: -moz-linear-gradient(top, #3f6d3f, #295c29 30%, #295c29 60%, #245124); 230 | background-image: -ms-linear-gradient(top, #3f6d3f, #295c29 30%, #295c29 60%, #245124); 231 | background-image: -o-linear-gradient(top, #3f6d3f, #295c29 30%, #295c29 60%, #245124); 232 | background-image: linear-gradient(to bottom, #3f6d3f, #295c29 30%, #295c29 60%, #245124); 233 | -webkit-box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 234 | -moz-box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 235 | box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 236 | } 237 | /* line 69, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/skeu-light.sass */ 238 | html.theme-skeu-light #multi-button:not(.foreground):active, html.theme-skeu-light #audio-dial-button:active, html.theme-skeu-light #video-dial-button:active { 239 | padding-top: 5px; 240 | background-image: -webkit-linear-gradient(top, #245124, #295c29 30%, #295c29 60%, #3f6d3f); 241 | background-image: -moz-linear-gradient(top, #245124, #295c29 30%, #295c29 60%, #3f6d3f); 242 | background-image: -ms-linear-gradient(top, #245124, #295c29 30%, #295c29 60%, #3f6d3f); 243 | background-image: -o-linear-gradient(top, #245124, #295c29 30%, #295c29 60%, #3f6d3f); 244 | background-image: linear-gradient(to bottom, #245124, #295c29 30%, #295c29 60%, #3f6d3f); 245 | } 246 | 247 | /* line 3, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_skeu-dark.sass */ 248 | html.theme-skeu-dark body { 249 | font: 1em "Lucida"; 250 | } 251 | /* line 6, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_skeu-dark.sass */ 252 | html.theme-skeu-dark main, html.theme-skeu-dark #multi-box { 253 | background-color: #dddddd; 254 | } 255 | /* line 9, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_skeu-dark.sass */ 256 | html.theme-skeu-dark input { 257 | background-color: #f1f1f1; 258 | } 259 | /* line 12, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_skeu-dark.sass */ 260 | html.theme-skeu-dark #status, html.theme-skeu-dark #controls { 261 | border-bottom: 1px solid darkgrey; 262 | } 263 | /* line 16, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_skeu-dark.sass */ 264 | html.theme-skeu-dark #volume-pic:after { 265 | background-color: #dddddd; 266 | } 267 | /* line 19, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_skeu-dark.sass */ 268 | html.theme-skeu-dark #volume-slider { 269 | background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #444444), color-stop(80%, #444444), color-stop(81%, #666666), color-stop(100%, #666666)); 270 | background-image: -moz-linear-gradient(left, #444444 0%, #444444 80%, #666666 81%, #666666 100%); 271 | } 272 | /* line 23, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_skeu-dark.sass */ 273 | html.theme-skeu-dark #mute-box { 274 | display: none; 275 | } 276 | /* line 25, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_skeu-dark.sass */ 277 | html.theme-skeu-dark #mute-box + span:not(:last-child) { 278 | background-position: 0 -60px; 279 | float: left; 280 | margin-bottom: 1em; 281 | padding-right: 0.49em; 282 | } 283 | /* line 30, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_skeu-dark.sass */ 284 | html.theme-skeu-dark #mute-box:checked + span:not(:last-child) { 285 | background-position: 0 0; 286 | } 287 | /* line 33, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_skeu-dark.sass */ 288 | html.theme-skeu-dark .dtmf { 289 | background: #444444; 290 | border-top: 1px solid black; 291 | border-left: 1px solid black; 292 | color: white; 293 | text-shadow: -1px -1px 0 #676767; 294 | background-image: -webkit-linear-gradient(top, #626262, #444444 30%, #444444 60%, #3a3a3a); 295 | background-image: -moz-linear-gradient(top, #626262, #444444 30%, #444444 60%, #3a3a3a); 296 | background-image: -ms-linear-gradient(top, #626262, #444444 30%, #444444 60%, #3a3a3a); 297 | background-image: -o-linear-gradient(top, #626262, #444444 30%, #444444 60%, #3a3a3a); 298 | background-image: linear-gradient(to bottom, #626262, #444444 30%, #444444 60%, #3a3a3a); 299 | -webkit-box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 300 | -moz-box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 301 | box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 302 | } 303 | /* line 50, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_skeu-dark.sass */ 304 | html.theme-skeu-dark .dtmf:active, html.theme-skeu-dark .dtmf.dtmf-active { 305 | padding-top: 5px; 306 | background-image: -webkit-linear-gradient(top, #3a3a3a, #444444 30%, #444444 60%, #626262); 307 | background-image: -moz-linear-gradient(top, #3a3a3a, #444444 30%, #444444 60%, #626262); 308 | background-image: -ms-linear-gradient(top, #3a3a3a, #444444 30%, #444444 60%, #626262); 309 | background-image: -o-linear-gradient(top, #3a3a3a, #444444 30%, #444444 60%, #626262); 310 | background-image: linear-gradient(to bottom, #3a3a3a, #444444 30%, #444444 60%, #626262); 311 | } 312 | /* line 59, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_skeu-dark.sass */ 313 | html.theme-skeu-dark #multi-button.foreground { 314 | background-color: #862c2c; 315 | border: 1px solid black; 316 | background-image: -webkit-linear-gradient(top, #6d3f3f, #862c2c 30%, #862c2c 60%, #512424); 317 | background-image: -moz-linear-gradient(top, #6d3f3f, #862c2c 30%, #862c2c 60%, #512424); 318 | background-image: -ms-linear-gradient(top, #6d3f3f, #862c2c 30%, #862c2c 60%, #512424); 319 | background-image: -o-linear-gradient(top, #6d3f3f, #862c2c 30%, #862c2c 60%, #512424); 320 | background-image: linear-gradient(to bottom, #6d3f3f, #862c2c 30%, #862c2c 60%, #512424); 321 | -webkit-box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 322 | -moz-box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 323 | box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 324 | } 325 | /* line 73, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_skeu-dark.sass */ 326 | html.theme-skeu-dark #multi-button.foreground:active { 327 | padding-top: 5px; 328 | background-image: -webkit-linear-gradient(top, #512424, #862c2c 30%, #862c2c 60%, #6d3f3f); 329 | background-image: -moz-linear-gradient(top, #512424, #862c2c 30%, #862c2c 60%, #6d3f3f); 330 | background-image: -ms-linear-gradient(top, #512424, #862c2c 30%, #862c2c 60%, #6d3f3f); 331 | background-image: -o-linear-gradient(top, #512424, #862c2c 30%, #862c2c 60%, #6d3f3f); 332 | background-image: linear-gradient(to bottom, #512424, #862c2c 30%, #862c2c 60%, #6d3f3f); 333 | } 334 | /* line 82, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_skeu-dark.sass */ 335 | html.theme-skeu-dark #multi-button:not(.foreground), html.theme-skeu-dark #audio-dial-button, html.theme-skeu-dark #video-dial-button { 336 | background-color: #295c29; 337 | border: 1px solid black; 338 | background-image: -webkit-linear-gradient(top, #3f6d3f, #295c29 30%, #295c29 60%, #245124); 339 | background-image: -moz-linear-gradient(top, #3f6d3f, #295c29 30%, #295c29 60%, #245124); 340 | background-image: -ms-linear-gradient(top, #3f6d3f, #295c29 30%, #295c29 60%, #245124); 341 | background-image: -o-linear-gradient(top, #3f6d3f, #295c29 30%, #295c29 60%, #245124); 342 | background-image: linear-gradient(to bottom, #3f6d3f, #295c29 30%, #295c29 60%, #245124); 343 | -webkit-box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 344 | -moz-box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 345 | box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 346 | } 347 | /* line 96, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/_skeu-dark.sass */ 348 | html.theme-skeu-dark #multi-button:not(.foreground):active, html.theme-skeu-dark #audio-dial-button:active, html.theme-skeu-dark #video-dial-button:active { 349 | padding-top: 5px; 350 | background-image: -webkit-linear-gradient(top, #245124, #295c29 30%, #295c29 60%, #3f6d3f); 351 | background-image: -moz-linear-gradient(top, #245124, #295c29 30%, #295c29 60%, #3f6d3f); 352 | background-image: -ms-linear-gradient(top, #245124, #295c29 30%, #295c29 60%, #3f6d3f); 353 | background-image: -o-linear-gradient(top, #245124, #295c29 30%, #295c29 60%, #3f6d3f); 354 | background-image: linear-gradient(to bottom, #245124, #295c29 30%, #295c29 60%, #3f6d3f); 355 | } 356 | -------------------------------------------------------------------------------- /instacall/css/theme/flat-light.css: -------------------------------------------------------------------------------- 1 | /* line 3, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 2 | html.theme-flat-light #multi-button:not(.foreground), html.theme-flat-light #audio-dial-button, html.theme-flat-light #video-dial-button { 3 | background-color: #2ac56c; 4 | border-radius: 6px; 5 | } 6 | /* line 6, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 7 | html.theme-flat-light #multi-button:not(.foreground):hover, html.theme-flat-light #audio-dial-button:hover, html.theme-flat-light #video-dial-button:hover { 8 | background-color: #17aa56; 9 | } 10 | /* line 8, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 11 | html.theme-flat-light #multi-button:not(.foreground):active, html.theme-flat-light #audio-dial-button:active, html.theme-flat-light #video-dial-button:active { 12 | background-color: #0a833d; 13 | } 14 | /* line 12, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 15 | html.theme-flat-light #multi-button.foreground { 16 | background-color: #f06060; 17 | border-radius: 6px; 18 | } 19 | /* line 15, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 20 | html.theme-flat-light #multi-button.foreground:hover { 21 | background-color: #cb4e4e; 22 | } 23 | /* line 17, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 24 | html.theme-flat-light #multi-button.foreground:active { 25 | background-color: #ab3c3c; 26 | } 27 | /* line 20, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 28 | html.theme-flat-light.has-dtmf #multi-button { 29 | border-top-left-radius: 0; 30 | border-top-right-radius: 0; 31 | } 32 | /* line 24, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 33 | html.theme-flat-light .dtmf { 34 | background-color: white; 35 | border: 1px solid #9b9b9b; 36 | color: gray; 37 | -webkit-transition: all 0.2s ease-in; 38 | -moz-transition: all0 0.2s ease-in; 39 | -o-transition: all 0.2s ease-in; 40 | transition: all 0.2s ease-in; 41 | } 42 | /* line 32, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 43 | html.theme-flat-light .dtmf:hover { 44 | background-color: lightgrey; 45 | } 46 | /* line 34, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 47 | html.theme-flat-light .dtmf:active, html.theme-flat-light .dtmf.dtmf-active { 48 | color: white; 49 | background-color: gray; 50 | -webkit-transition: 0; 51 | -moz-transition: 0; 52 | -o-transition: 0; 53 | transition: 0; 54 | } 55 | /* line 43, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 56 | html.theme-flat-light #dtmfButtons .row:nth-of-type(1) button:nth-of-type(1) { 57 | border-top-left-radius: 6px; 58 | } 59 | /* line 47, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/flat-light.sass */ 60 | html.theme-flat-light #dtmfButtons .row:nth-of-type(1) button:nth-of-type(3) { 61 | border-top-right-radius: 6px; 62 | } 63 | -------------------------------------------------------------------------------- /instacall/css/theme/skeu-light.css: -------------------------------------------------------------------------------- 1 | /* line 3, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/skeu-light.sass */ 2 | html.theme-skeu-light body { 3 | font: 1em "Lucida"; 4 | } 5 | /* line 6, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/skeu-light.sass */ 6 | html.theme-skeu-light .dtmf { 7 | background: #444444; 8 | border-top: 1px solid black; 9 | border-left: 1px solid black; 10 | color: white; 11 | text-shadow: -1px -1px 0 #676767; 12 | background-image: -webkit-linear-gradient(top, #626262, #444444 30%, #444444 60%, #3a3a3a); 13 | background-image: -moz-linear-gradient(top, #626262, #444444 30%, #444444 60%, #3a3a3a); 14 | background-image: -ms-linear-gradient(top, #626262, #444444 30%, #444444 60%, #3a3a3a); 15 | background-image: -o-linear-gradient(top, #626262, #444444 30%, #444444 60%, #3a3a3a); 16 | background-image: linear-gradient(to bottom, #626262, #444444 30%, #444444 60%, #3a3a3a); 17 | -webkit-box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 18 | -moz-box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 19 | box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 20 | } 21 | /* line 23, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/skeu-light.sass */ 22 | html.theme-skeu-light .dtmf:active, html.theme-skeu-light .dtmf.dtmf-active { 23 | padding-top: 5px; 24 | background-image: -webkit-linear-gradient(top, #3a3a3a, #444444 30%, #444444 60%, #626262); 25 | background-image: -moz-linear-gradient(top, #3a3a3a, #444444 30%, #444444 60%, #626262); 26 | background-image: -ms-linear-gradient(top, #3a3a3a, #444444 30%, #444444 60%, #626262); 27 | background-image: -o-linear-gradient(top, #3a3a3a, #444444 30%, #444444 60%, #626262); 28 | background-image: linear-gradient(to bottom, #3a3a3a, #444444 30%, #444444 60%, #626262); 29 | } 30 | /* line 32, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/skeu-light.sass */ 31 | html.theme-skeu-light #multi-button.foreground { 32 | background-color: #5c2929; 33 | border: 1px solid black; 34 | background-image: -webkit-linear-gradient(top, #6d3f3f, #5c2929 30%, #5c2929 60%, #512424); 35 | background-image: -moz-linear-gradient(top, #6d3f3f, #5c2929 30%, #5c2929 60%, #512424); 36 | background-image: -ms-linear-gradient(top, #6d3f3f, #5c2929 30%, #5c2929 60%, #512424); 37 | background-image: -o-linear-gradient(top, #6d3f3f, #5c2929 30%, #5c2929 60%, #512424); 38 | background-image: linear-gradient(to bottom, #6d3f3f, #5c2929 30%, #5c2929 60%, #512424); 39 | -webkit-box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 40 | -moz-box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 41 | box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 42 | } 43 | /* line 46, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/skeu-light.sass */ 44 | html.theme-skeu-light #multi-button.foreground:active { 45 | padding-top: 5px; 46 | background-image: -webkit-linear-gradient(top, #512424, #5c2929 30%, #5c2929 60%, #6d3f3f); 47 | background-image: -moz-linear-gradient(top, #512424, #5c2929 30%, #5c2929 60%, #6d3f3f); 48 | background-image: -ms-linear-gradient(top, #512424, #5c2929 30%, #5c2929 60%, #6d3f3f); 49 | background-image: -o-linear-gradient(top, #512424, #5c2929 30%, #5c2929 60%, #6d3f3f); 50 | background-image: linear-gradient(to bottom, #512424, #5c2929 30%, #5c2929 60%, #6d3f3f); 51 | } 52 | /* line 55, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/skeu-light.sass */ 53 | html.theme-skeu-light #multi-button:not(.foreground), html.theme-skeu-light #audio-dial-button, html.theme-skeu-light #video-dial-button { 54 | background-color: #295c29; 55 | border: 1px solid black; 56 | background-image: -webkit-linear-gradient(top, #3f6d3f, #295c29 30%, #295c29 60%, #245124); 57 | background-image: -moz-linear-gradient(top, #3f6d3f, #295c29 30%, #295c29 60%, #245124); 58 | background-image: -ms-linear-gradient(top, #3f6d3f, #295c29 30%, #295c29 60%, #245124); 59 | background-image: -o-linear-gradient(top, #3f6d3f, #295c29 30%, #295c29 60%, #245124); 60 | background-image: linear-gradient(to bottom, #3f6d3f, #295c29 30%, #295c29 60%, #245124); 61 | -webkit-box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 62 | -moz-box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 63 | box-shadow: 1px 1px 0 rgba(155, 155, 155, 0.2) inset; 64 | } 65 | /* line 69, /Users/will/work/web/webrtc-phone/instacall/compile/sass/theme/skeu-light.sass */ 66 | html.theme-skeu-light #multi-button:not(.foreground):active, html.theme-skeu-light #audio-dial-button:active, html.theme-skeu-light #video-dial-button:active { 67 | padding-top: 5px; 68 | background-image: -webkit-linear-gradient(top, #245124, #295c29 30%, #295c29 60%, #3f6d3f); 69 | background-image: -moz-linear-gradient(top, #245124, #295c29 30%, #295c29 60%, #3f6d3f); 70 | background-image: -ms-linear-gradient(top, #245124, #295c29 30%, #295c29 60%, #3f6d3f); 71 | background-image: -o-linear-gradient(top, #245124, #295c29 30%, #295c29 60%, #3f6d3f); 72 | background-image: linear-gradient(to bottom, #245124, #295c29 30%, #295c29 60%, #3f6d3f); 73 | } 74 | -------------------------------------------------------------------------------- /instacall/css/vendor/jquery-ui-1.10.3.custom.css: -------------------------------------------------------------------------------- 1 | /*! jQuery UI - v1.10.3 - 2013-07-17 2 | ** http://jqueryui.com 3 | ** Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.accordion.css, jquery.ui.button.css, jquery.ui.dialog.css, jquery.ui.slider.css 4 | ** Copyright 2013 jQuery Foundation and other contributors Licensed MIT */ 5 | /* Layout helpers 6 | *---------------------------------- */ 7 | /* line 9, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 8 | .ui-helper-hidden { 9 | display: none; 10 | } 11 | 12 | /* line 12, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 13 | .ui-helper-hidden-accessible { 14 | border: 0; 15 | clip: rect(0 0 0 0); 16 | height: 1px; 17 | margin: -1px; 18 | overflow: hidden; 19 | padding: 0; 20 | position: absolute; 21 | width: 1px; 22 | } 23 | 24 | /* line 22, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 25 | .ui-helper-reset { 26 | margin: 0; 27 | padding: 0; 28 | border: 0; 29 | outline: 0; 30 | line-height: 1.3; 31 | text-decoration: none; 32 | font-size: 100%; 33 | list-style: none; 34 | } 35 | 36 | /* line 32, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 37 | .ui-helper-clearfix { 38 | min-height: 0; 39 | /* support: IE7 */ 40 | } 41 | /* line 33, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 42 | .ui-helper-clearfix:before { 43 | content: ""; 44 | display: table; 45 | border-collapse: collapse; 46 | } 47 | /* line 37, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 48 | .ui-helper-clearfix:after { 49 | content: ""; 50 | display: table; 51 | border-collapse: collapse; 52 | clear: both; 53 | } 54 | 55 | /* line 45, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 56 | .ui-helper-zfix { 57 | width: 100%; 58 | height: 100%; 59 | top: 0; 60 | left: 0; 61 | position: absolute; 62 | opacity: 0; 63 | filter: Alpha(Opacity=0); 64 | } 65 | 66 | /* line 54, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 67 | .ui-front { 68 | z-index: 100; 69 | } 70 | 71 | /* Interaction Cues 72 | *---------------------------------- */ 73 | /* line 60, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 74 | .ui-state-disabled { 75 | cursor: default !important; 76 | } 77 | 78 | /* Icons 79 | *---------------------------------- */ 80 | /* states and images */ 81 | /* line 68, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 82 | .ui-icon { 83 | width: 10px; 84 | height: 6px; 85 | background-image: url(../../img/dropdown-icon-reversed.png); 86 | } 87 | 88 | /* line 73, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 89 | .ui-widget-content .ui-icon, .ui-widget-header .ui-icon { 90 | background-image: url(../../img/dropdown-icon-reversed.png); 91 | } 92 | 93 | /* line 76, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 94 | .ui-state-hover .ui-icon, .ui-state-focus .ui-icon { 95 | background-image: url(../../img/dropdown-icon.png); 96 | } 97 | 98 | /* line 79, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 99 | .ui-state-active .ui-icon, .ui-state-highlight .ui-icon, .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { 100 | background-image: url(../../img/dropdown-icon-reversed.png); 101 | } 102 | 103 | /* positioning */ 104 | /* line 84, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 105 | .ui-icon-blank, .ui-icon-carat-1-n { 106 | background-position: 0 0; 107 | } 108 | 109 | /* line 87, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 110 | .ui-icon-carat-1-ne { 111 | background-position: -16px 0; 112 | } 113 | 114 | /* line 90, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 115 | .ui-icon-carat-1-e { 116 | background-position: 0 0; 117 | } 118 | 119 | /* line 93, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 120 | .ui-icon-carat-1-se { 121 | background-position: -48px 0; 122 | } 123 | 124 | /* line 96, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 125 | .ui-icon-carat-1-s { 126 | background-position: 0 0; 127 | } 128 | 129 | /* line 99, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 130 | .ui-icon-carat-1-sw { 131 | background-position: -80px 0; 132 | } 133 | 134 | /* line 102, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 135 | .ui-icon-carat-1-w { 136 | background-position: -96px 0; 137 | } 138 | 139 | /* line 105, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 140 | .ui-icon-carat-1-nw { 141 | background-position: -112px 0; 142 | } 143 | 144 | /* Misc visuals 145 | *---------------------------------- */ 146 | /* Overlays */ 147 | /* line 113, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 148 | .ui-widget-overlay { 149 | position: fixed; 150 | top: 0; 151 | left: 0; 152 | width: 100%; 153 | height: 100%; 154 | } 155 | 156 | /* line 120, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 157 | .ui-resizable { 158 | position: relative; 159 | } 160 | 161 | /* line 123, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 162 | .ui-resizable-handle { 163 | position: absolute; 164 | font-size: 0.1px; 165 | display: block; 166 | } 167 | 168 | /* line 128, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 169 | .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { 170 | display: none; 171 | } 172 | 173 | /* line 131, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 174 | .ui-resizable-n { 175 | cursor: n-resize; 176 | height: 7px; 177 | width: 100%; 178 | top: -5px; 179 | left: 0; 180 | } 181 | 182 | /* line 138, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 183 | .ui-resizable-s { 184 | cursor: s-resize; 185 | height: 7px; 186 | width: 100%; 187 | bottom: -5px; 188 | left: 0; 189 | } 190 | 191 | /* line 145, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 192 | .ui-resizable-e { 193 | cursor: e-resize; 194 | width: 7px; 195 | right: -5px; 196 | top: 0; 197 | height: 100%; 198 | } 199 | 200 | /* line 152, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 201 | .ui-resizable-w { 202 | cursor: w-resize; 203 | width: 7px; 204 | left: -5px; 205 | top: 0; 206 | height: 100%; 207 | } 208 | 209 | /* line 159, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 210 | .ui-resizable-se { 211 | cursor: se-resize; 212 | width: 12px; 213 | height: 12px; 214 | right: 1px; 215 | bottom: 1px; 216 | } 217 | 218 | /* line 166, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 219 | .ui-resizable-sw { 220 | cursor: sw-resize; 221 | width: 9px; 222 | height: 9px; 223 | left: -5px; 224 | bottom: -5px; 225 | } 226 | 227 | /* line 173, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 228 | .ui-resizable-nw { 229 | cursor: nw-resize; 230 | width: 9px; 231 | height: 9px; 232 | left: -5px; 233 | top: -5px; 234 | } 235 | 236 | /* line 180, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 237 | .ui-resizable-ne { 238 | cursor: ne-resize; 239 | width: 9px; 240 | height: 9px; 241 | right: -5px; 242 | top: -5px; 243 | } 244 | 245 | /* line 188, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 246 | .ui-accordion .ui-accordion-header { 247 | display: block; 248 | cursor: pointer; 249 | position: relative; 250 | margin-top: 2px; 251 | padding: 0.5em 0.5em 0.5em 0.7em; 252 | min-height: 0; 253 | /* support: IE7 */ 254 | } 255 | /* line 196, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 256 | .ui-accordion .ui-accordion-icons { 257 | padding-left: 2.2em; 258 | } 259 | /* line 198, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 260 | .ui-accordion .ui-accordion-noicons { 261 | padding-left: 0.7em; 262 | } 263 | /* line 200, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 264 | .ui-accordion .ui-accordion-icons .ui-accordion-icons { 265 | padding-left: 2.2em; 266 | } 267 | /* line 202, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 268 | .ui-accordion .ui-accordion-header .ui-accordion-header-icon { 269 | position: absolute; 270 | left: 0.5em; 271 | top: 50%; 272 | margin-top: -8px; 273 | } 274 | /* line 207, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 275 | .ui-accordion .ui-accordion-content { 276 | padding: 1em 2.2em; 277 | border-top: 0; 278 | overflow: auto; 279 | } 280 | 281 | /* line 212, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 282 | .ui-button { 283 | display: inline-block; 284 | position: relative; 285 | padding: 0; 286 | line-height: normal; 287 | margin-right: 0.1em; 288 | cursor: pointer; 289 | vertical-align: middle; 290 | text-align: center; 291 | overflow: visible; 292 | /* removes extra width in IE */ 293 | text-decoration: none; 294 | } 295 | /* line 224, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 296 | .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active { 297 | text-decoration: none; 298 | } 299 | 300 | /* to make room for the icon, a width needs to be set here */ 301 | /* line 229, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 302 | .ui-button-icon-only { 303 | width: 2.2em; 304 | } 305 | 306 | /* button elements seem to need a little more width */ 307 | /* line 234, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 308 | button.ui-button-icon-only { 309 | width: 2.4em; 310 | } 311 | 312 | /* line 237, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 313 | .ui-button-icons-only { 314 | width: 3.4em; 315 | } 316 | 317 | /* line 240, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 318 | button.ui-button-icons-only { 319 | width: 3.7em; 320 | } 321 | 322 | /* button text element */ 323 | /* line 245, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 324 | .ui-button .ui-button-text { 325 | display: block; 326 | line-height: normal; 327 | } 328 | 329 | /* line 249, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 330 | .ui-button-text-only .ui-button-text { 331 | padding: 0.4em 1em; 332 | } 333 | 334 | /* line 252, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 335 | .ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { 336 | padding: 0.4em; 337 | text-indent: -9999999px; 338 | } 339 | 340 | /* line 256, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 341 | .ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { 342 | padding: 0.4em 1em 0.4em 2.1em; 343 | } 344 | 345 | /* line 259, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 346 | .ui-button-text-icon-secondary .ui-button-text { 347 | padding: 0.4em 2.1em 0.4em 1em; 348 | } 349 | 350 | /* line 262, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 351 | .ui-button-text-icons .ui-button-text { 352 | padding: 0.4em 2.1em 0.4em 1em; 353 | padding-left: 2.1em; 354 | padding-right: 2.1em; 355 | } 356 | 357 | /* no icon support for input elements, provide padding by default */ 358 | /* line 269, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 359 | input.ui-button { 360 | padding: 0.4em 1em; 361 | } 362 | 363 | /* button icon element(s) */ 364 | /* line 274, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 365 | .ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { 366 | position: absolute; 367 | top: 50%; 368 | margin-top: -8px; 369 | } 370 | 371 | /* line 279, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 372 | .ui-button-icon-only .ui-icon { 373 | left: 50%; 374 | margin-left: -8px; 375 | } 376 | 377 | /* line 283, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 378 | .ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { 379 | left: 0.5em; 380 | } 381 | 382 | /* line 286, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 383 | .ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { 384 | right: 0.5em; 385 | } 386 | 387 | /* button sets */ 388 | /* line 291, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 389 | .ui-buttonset { 390 | margin-right: 7px; 391 | } 392 | /* line 293, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 393 | .ui-buttonset .ui-button { 394 | margin-left: 0; 395 | margin-right: -0.3em; 396 | } 397 | 398 | /* workarounds */ 399 | /* reset extra padding in Firefox, see h5bp.com/l */ 400 | /* line 300, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 401 | input.ui-button::-moz-focus-inner, button.ui-button::-moz-focus-inner { 402 | border: 0; 403 | padding: 0; 404 | } 405 | 406 | /* line 304, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 407 | .ui-dialog { 408 | position: absolute; 409 | top: 0; 410 | left: 0; 411 | padding: 0.2em; 412 | outline: 0; 413 | } 414 | /* line 310, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 415 | .ui-dialog .ui-dialog-titlebar { 416 | padding: 0.4em 1em; 417 | position: relative; 418 | } 419 | /* line 313, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 420 | .ui-dialog .ui-dialog-title { 421 | float: left; 422 | margin: 0.1em 0; 423 | white-space: nowrap; 424 | width: 90%; 425 | overflow: hidden; 426 | text-overflow: ellipsis; 427 | } 428 | /* line 320, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 429 | .ui-dialog .ui-dialog-titlebar-close { 430 | position: absolute; 431 | right: 0.3em; 432 | top: 50%; 433 | width: 21px; 434 | margin: -10px 0 0 0; 435 | padding: 1px; 436 | height: 20px; 437 | } 438 | /* line 328, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 439 | .ui-dialog .ui-dialog-content { 440 | position: relative; 441 | border: 0; 442 | padding: 0.5em 1em; 443 | background: none; 444 | overflow: auto; 445 | } 446 | /* line 334, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 447 | .ui-dialog .ui-dialog-buttonpane { 448 | text-align: left; 449 | border-width: 1px 0 0 0; 450 | background-image: none; 451 | margin-top: 0.5em; 452 | padding: 0.3em 1em 0.5em 0.4em; 453 | } 454 | /* line 340, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 455 | .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { 456 | float: right; 457 | } 458 | /* line 342, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 459 | .ui-dialog .ui-dialog-buttonpane button { 460 | margin: 0.5em 0.4em 0.5em 0; 461 | cursor: pointer; 462 | } 463 | /* line 345, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 464 | .ui-dialog .ui-resizable-se { 465 | width: 12px; 466 | height: 12px; 467 | right: -5px; 468 | bottom: -5px; 469 | background-position: 16px 16px; 470 | } 471 | 472 | /* line 352, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 473 | .ui-draggable .ui-dialog-titlebar { 474 | cursor: move; 475 | } 476 | 477 | /* line 355, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 478 | .ui-slider { 479 | position: relative; 480 | text-align: left; 481 | } 482 | /* line 358, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 483 | .ui-slider .ui-slider-handle { 484 | position: absolute; 485 | z-index: 2; 486 | width: 1.2em; 487 | height: 1.2em; 488 | cursor: default; 489 | } 490 | /* line 364, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 491 | .ui-slider .ui-slider-range { 492 | position: absolute; 493 | z-index: 1; 494 | font-size: 0.7em; 495 | display: block; 496 | border: 0; 497 | background-position: 0 0; 498 | } 499 | /* line 372, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 500 | .ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range { 501 | filter: inherit; 502 | } 503 | 504 | /* For IE8 - See #6727 */ 505 | /* line 377, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 506 | .ui-slider-horizontal { 507 | height: 0.8em; 508 | } 509 | /* line 379, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 510 | .ui-slider-horizontal .ui-slider-handle { 511 | top: -0.3em; 512 | margin-left: -0.6em; 513 | } 514 | /* line 382, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 515 | .ui-slider-horizontal .ui-slider-range { 516 | top: 0; 517 | height: 100%; 518 | } 519 | /* line 385, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 520 | .ui-slider-horizontal .ui-slider-range-min { 521 | left: 0; 522 | } 523 | /* line 387, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 524 | .ui-slider-horizontal .ui-slider-range-max { 525 | right: 0; 526 | } 527 | 528 | /* line 390, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 529 | .ui-slider-vertical { 530 | width: 0.8em; 531 | height: 100px; 532 | } 533 | /* line 393, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 534 | .ui-slider-vertical .ui-slider-handle { 535 | left: -0.3em; 536 | margin-left: 0; 537 | margin-bottom: -0.6em; 538 | } 539 | /* line 397, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 540 | .ui-slider-vertical .ui-slider-range { 541 | left: 0; 542 | width: 100%; 543 | } 544 | /* line 400, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 545 | .ui-slider-vertical .ui-slider-range-min { 546 | bottom: 0; 547 | } 548 | /* line 402, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 549 | .ui-slider-vertical .ui-slider-range-max { 550 | top: 0; 551 | } 552 | 553 | /* Component containers 554 | *---------------------------------- */ 555 | /* line 409, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 556 | .ui-dialog.ui-widget { 557 | font-family: Verdana, Arial, sans-serif; 558 | font-size: 1.1em; 559 | } 560 | /* line 412, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 561 | .ui-dialog.ui-widget .ui-widget { 562 | font-size: 1em; 563 | } 564 | /* line 414, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 565 | .ui-dialog.ui-widget input, .ui-dialog.ui-widget select, .ui-dialog.ui-widget textarea, .ui-dialog.ui-widget button { 566 | font-family: Verdana, Arial, sans-serif; 567 | font-size: 1em; 568 | } 569 | /* line 417, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 570 | .ui-dialog.ui-widget-content { 571 | border: 1px solid #aaaaaa; 572 | background: white 50% 50% repeat-x; 573 | color: #222222; 574 | } 575 | 576 | /* Overlays */ 577 | /* line 424, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 578 | .ui-widget-overlay { 579 | background: #aaaaaa 50% 50% repeat-x; 580 | opacity: 0.3; 581 | filter: Alpha(Opacity=30); 582 | } 583 | 584 | /* line 429, /Users/will/work/web/webrtc-phone/instacall/compile/sass/vendor/jquery-ui-1.10.3.custom.sass */ 585 | .ui-widget-shadow { 586 | margin: -8px 0 0 -8px; 587 | padding: 8px; 588 | background: #aaaaaa 50% 50% repeat-x; 589 | opacity: 0.3; 590 | filter: Alpha(Opacity=30); 591 | border-radius: 8px; 592 | } 593 | -------------------------------------------------------------------------------- /instacall/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/instacall/favicon.ico -------------------------------------------------------------------------------- /instacall/img/call_audio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/instacall/img/call_audio.png -------------------------------------------------------------------------------- /instacall/img/call_video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/instacall/img/call_video.png -------------------------------------------------------------------------------- /instacall/img/instacall_chrome_allow_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/instacall/img/instacall_chrome_allow_icon.png -------------------------------------------------------------------------------- /instacall/img/instacall_firefox_share_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/instacall/img/instacall_firefox_share_icon.png -------------------------------------------------------------------------------- /instacall/img/no-video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/instacall/img/no-video.png -------------------------------------------------------------------------------- /instacall/img/nodevices/no_camera_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/instacall/img/nodevices/no_camera_icon.png -------------------------------------------------------------------------------- /instacall/img/nodevices/no_mic_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/instacall/img/nodevices/no_mic_icon.png -------------------------------------------------------------------------------- /instacall/img/nodevices/okay_camera_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/instacall/img/nodevices/okay_camera_icon.png -------------------------------------------------------------------------------- /instacall/img/nodevices/okay_microphone_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/instacall/img/nodevices/okay_microphone_icon.png -------------------------------------------------------------------------------- /instacall/img/onsip_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/instacall/img/onsip_white.png -------------------------------------------------------------------------------- /instacall/img/sprite/mute-s32d676cfb8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/instacall/img/sprite/mute-s32d676cfb8.png -------------------------------------------------------------------------------- /instacall/img/sprite/video-s93a39489c6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/instacall/img/sprite/video-s93a39489c6.png -------------------------------------------------------------------------------- /instacall/img/video-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/instacall/img/video-large.png -------------------------------------------------------------------------------- /instacall/img/video-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/instacall/img/video-small.png -------------------------------------------------------------------------------- /instacall/img/volume.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/instacall/img/volume.png -------------------------------------------------------------------------------- /instacall/img/white-phone-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/instacall/img/white-phone-icon.png -------------------------------------------------------------------------------- /instacall/img/white-video-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/instacall/img/white-video-icon.png -------------------------------------------------------------------------------- /instacall/img/x-000000.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/instacall/img/x-000000.png -------------------------------------------------------------------------------- /instacall/img/x-666666.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onsip/sipjs-examples/adb0e4f39cc127b5d5f98900a0bb16330131c6d0/instacall/img/x-666666.png -------------------------------------------------------------------------------- /instacall/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 22 | 23 | 24 | 49 | 50 | 77 |





78 | 97 |





98 | 117 |





118 | 137 | 138 | 139 | 140 | -------------------------------------------------------------------------------- /instacall/js/detect-silence.js: -------------------------------------------------------------------------------- 1 | window.instacall || (window.instacall = {}); 2 | (function () { 3 | 4 | // adapted from https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC 5 | function detectSilence (mediaStream, duration, onSilence) { 6 | // creates the audio context 7 | var audioContext = window.AudioContext || window.webkitAudioContext; 8 | 9 | if (!audioContext) { 10 | return; 11 | } 12 | 13 | var context = new audioContext(); 14 | 15 | if (!context || !context.createGain || !context.createMediaStreamSource || !context.createScriptProcessor) { 16 | return; 17 | } 18 | 19 | // creates a gain node 20 | var volume = context.createGain(); 21 | 22 | // creates an audio node from the microphone incoming stream 23 | var audioInput = context.createMediaStreamSource(mediaStream); 24 | 25 | // connect the stream to the gain node 26 | audioInput.connect(volume); 27 | 28 | // From the spec: This value controls how frequently the audioprocess event is 29 | // dispatched and how many sample-frames need to be processed each call. 30 | // Lower values for buffer size will result in a lower (better) latency. 31 | // Higher values will be necessary to avoid audio breakup and glitches 32 | 33 | // bug: how to minimize wav size? 34 | 35 | // The size of the buffer (in sample-frames) which needs to 36 | // be processed each time onprocessaudio is called. 37 | // Legal values are (256, 512, 1024, 2048, 4096, 8192, 16384). 38 | var legalBufferValues = [256, 512, 1024, 2048, 4096, 8192, 16384]; 39 | var bufferSize = 2048; 40 | 41 | if (legalBufferValues.indexOf(bufferSize) == -1) { 42 | throw 'Legal values for buffer-size are ' + JSON.stringify(legalBufferValues, null, '\t'); 43 | } 44 | 45 | // The sample rate (in sample-frames per second) at which the 46 | // AudioContext handles audio. It is assumed that all AudioNodes 47 | // in the context run at this rate. In making this assumption, 48 | // sample-rate converters or "varispeed" processors are not supported 49 | // in real-time processing. 50 | 51 | // The sampleRate parameter describes the sample-rate of the 52 | // linear PCM audio data in the buffer in sample-frames per second. 53 | // An implementation must support sample-rates in at least 54 | // the range 22050 to 96000. 55 | var sampleRate = context.sampleRate || 44100; 56 | 57 | if (sampleRate < 22050 || sampleRate > 96000) { 58 | throw 'sample-rate must be under range 22050 and 96000.'; 59 | } 60 | 61 | console.log('sample-rate', sampleRate); 62 | console.log('buffer-size', bufferSize); 63 | 64 | var recorder = context.createScriptProcessor(bufferSize, 2, 2); 65 | 66 | var lastHeard = new Date().getTime(); 67 | 68 | recorder.onaudioprocess = function(e) { 69 | if (mediaStream.ended) { 70 | recorder.onaudioprocess = function () {}; 71 | return; 72 | } 73 | var time = new Date().getTime(); 74 | var left = e.inputBuffer.getChannelData(0); 75 | var allzeros = true; 76 | for (var i = 0; i < left.length; i++) { 77 | if (left[i] != 0) { 78 | allzeros = false; 79 | break; 80 | } 81 | } 82 | // assume disabled streams aren't broken 83 | if (!allzeros || !mediaStream.getAudioTracks()[0].enabled) { 84 | lastHeard = time; 85 | } 86 | else if ((time - lastHeard) > duration && !onSilence(mediaStream)) { 87 | recorder.onaudioprocess = function () {}; 88 | } 89 | }; 90 | 91 | // we connect the recorder 92 | volume.connect(recorder); 93 | recorder.connect(context.destination); 94 | } 95 | 96 | // Export function for global access 97 | instacall.Detector || (instacall.Detector = {}); 98 | instacall.Detector.detectSilence = detectSilence; 99 | 100 | }()); -------------------------------------------------------------------------------- /instacall/js/detect-video-freeze.js: -------------------------------------------------------------------------------- 1 | window.instacall || (window.instacall = {}); 2 | 3 | (function () { 4 | 5 | /* 6 | Call a function whenever this video freezes. Uses two offscreen canvases to compare video frames. 7 | The