diff --git a/.gitignore b/.gitignore index 44173f41..6ff2d86f 100644 --- a/.gitignore +++ b/.gitignore @@ -46,6 +46,8 @@ build/Release node_modules/ jspm_packages/ +ignore/ + # Snowpack dependency directory (https://snowpack.dev/) web_modules/ diff --git a/index.ts b/index.ts index cf5bcc5c..1f6b83b5 100644 --- a/index.ts +++ b/index.ts @@ -1,4 +1,4 @@ -import { app, protocol, BrowserWindow, shell, ipcMain, session } from "electron" +import { app, protocol, BrowserWindow, shell, ipcMain, session, dialog } from "electron" const path = require("path") const fs = require('fs') const rename = require('deep-rename-keys') @@ -71,7 +71,7 @@ function lookupResource(pathName: string, resourceMap: Map, propert if (resourceMap.has(key)) { var data = resourceMap.get(key); - if ((resource = lookupInJson(data, subsplits, name)) !== null) + if ((resource = lookupInJson(data, subsplits, name))) return resource; } } @@ -79,7 +79,7 @@ function lookupResource(pathName: string, resourceMap: Map, propert for (const language of resourceMap) { let json = language[1]; - if ((resource = lookupInJson(json, subsplits, name)) !== null) + if ((resource = lookupInJson(json, subsplits, name))) return resource; } } @@ -160,11 +160,26 @@ app.whenReady().then(() => { callback(pathname); }); - session.defaultSession.webRequest.onBeforeSendHeaders({ urls: ["*://*.discord.com/", "*://*.discord.gg/"] }, (details, callback) => { + session.defaultSession.webRequest.onBeforeSendHeaders({ urls: ["*://*.discord.com/*", "*://*.discord.gg/*", "*://discord.com/*"] }, (details, callback) => { details.requestHeaders['User-Agent'] = 'DiscordBot (https://github.com/WamWooWam/WinRTElectron, 1.0.0)'; callback({ cancel: false, requestHeaders: details.requestHeaders }); }); + app.on('session-created', (session) => { + console.log(session) + + session.protocol.registerFileProtocol("ms-appx", appxUriHandler); + session.protocol.registerFileProtocol("ms-appx-web", appxUriHandler); + session.protocol.registerFileProtocol('file', (request, callback) => { + const pathname = decodeURIComponent(request.url.replace('file:///', '')); + callback(pathname); + }); + session.webRequest.onBeforeSendHeaders({ urls: ["*://*.discord.com/*", "*://*.discord.gg/*", "*://discord.com/*"] }, (details, callback) => { + details.requestHeaders['User-Agent'] = 'DiscordBot (https://github.com/WamWooWam/WinRTElectron, 1.0.0)'; + callback({ cancel: false, requestHeaders: details.requestHeaders }); + }); + }) + let win = new BrowserWindow({ width: 1440, @@ -172,6 +187,7 @@ app.whenReady().then(() => { webPreferences: { nodeIntegration: true, nodeIntegrationInWorker: true, + nodeIntegrationInSubFrames: true, webviewTag: true, webSecurity: false, // fuck you. contextIsolation: false, @@ -180,6 +196,25 @@ app.whenReady().then(() => { autoHideMenuBar: true, }); + ipcMain.on("windows.storage.pickers.fileopenpicker", async (e, arg) => { + let properties = ["dontAddToRecent"]; + if (arg.data.mode != 'single-file') + properties.push("multiSelections"); + + let filters: Electron.FileFilter[] = [{ + name: 'Selected Files', + extensions: [...(arg.data.fileTypeFilter).map(x => x.length > 1 ? x.substr(1) : x)] + }]; + + let result = await dialog.showOpenDialog(win, { + buttonLabel: arg.data.commitButtonText, + properties: properties, + filters: filters + }) + + e.reply(arg.responseChannel, result.filePaths); + }); + win.webContents.on("will-navigate", (event: Electron.Event, url: string) => { var uri = new URL(url); if (uri.protocol !== "ms-appx") { @@ -188,5 +223,5 @@ app.whenReady().then(() => { } }); - win.loadURL("ms-appx://wankerr.desktop1/index.html") + win.loadURL("ms-appx://wankerr.desktop/index.html") }); diff --git a/packages/microsoft.bingnews/Common/js/articlereader.js b/packages/microsoft.bingnews/Common/js/articlereader.js index b56a38e0..ceb9abb8 100644 --- a/packages/microsoft.bingnews/Common/js/articlereader.js +++ b/packages/microsoft.bingnews/Common/js/articlereader.js @@ -7299,47 +7299,6 @@ WinJS.Namespace.define('CommonJS', { Version: 'latest' }); else { return defaultImpressionContext } - }, getPageImpressionPartnerCodeAndAttributes: function getPageImpressionPartnerCodeAndAttributes() { - var state = this._state; - var results = {}; - if (state && state.entryPoint === Platform.Instrumentation.InstrumentationArticleEntryPoint.partnerPano) { - results.partnerCode = state.instrumentationId - } - if (state && state.pageId) { - var attributes = {}; - attributes.pageId = state.pageId; - if (state.clusterId) { - attributes.clusterId = state.clusterId - } - if (state.pageType) { - attributes.pageType = state.pageType - } - results.attributes = attributes - } - return results - }, _defaultArticleChanged: function _defaultArticleChanged(event) { - var state = this._state; - var clientArticleId = event.detail.clientArticleId; - state.initialArticleId = clientArticleId; - var instrumentationData = event.detail.instrumentationData; - if (instrumentationData) { - this._recordArticleView(instrumentationData) - } - }, _defaultArticleError: function _defaultArticleError(event) { - var error = event.detail; - var message = error ? error.message : ""; - if (!message && error.webErrorStatus) { - message = "webErrorStatus = " + error.webErrorStatus; - if (error.uri) { - message += (" when visiting " + error.uri) - } - } - var stack = error ? error.stack : ""; - Microsoft.Bing.AppEx.Telemetry.FlightRecorder.logCodeError(Microsoft.Bing.AppEx.Telemetry.LogLevel.normal, Microsoft.Bing.AppEx.Telemetry.RuntimeEnvironment.javascript, message, stack) - }, _getSettingsContainer: function _getSettingsContainer() { - var localSettings = Windows.Storage.ApplicationData.current.localSettings; - var container = localSettings.createContainer("articleReaderSettings", Windows.Storage.ApplicationDataCreateDisposition.always); - return container }, _writeSettings: function _writeSettings() { var container = this._getSettingsContainer(); var settings = this._settings; @@ -7390,6 +7349,47 @@ WinJS.Namespace.define('CommonJS', { Version: 'latest' }); textSize: containerTextSize || optimalTextSize || sizeDefault, textStyle: containerTextStyle || styleDefault }; this._settings = settings + }, getPageImpressionPartnerCodeAndAttributes: function getPageImpressionPartnerCodeAndAttributes() { + var state = this._state; + var results = {}; + if (state && state.entryPoint === Platform.Instrumentation.InstrumentationArticleEntryPoint.partnerPano) { + results.partnerCode = state.instrumentationId + } + if (state && state.pageId) { + var attributes = {}; + attributes.pageId = state.pageId; + if (state.clusterId) { + attributes.clusterId = state.clusterId + } + if (state.pageType) { + attributes.pageType = state.pageType + } + results.attributes = attributes + } + return results + }, _defaultArticleChanged: function _defaultArticleChanged(event) { + var state = this._state; + var clientArticleId = event.detail.clientArticleId; + state.initialArticleId = clientArticleId; + var instrumentationData = event.detail.instrumentationData; + if (instrumentationData) { + this._recordArticleView(instrumentationData) + } + }, _defaultArticleError: function _defaultArticleError(event) { + var error = event.detail; + var message = error ? error.message : ""; + if (!message && error.webErrorStatus) { + message = "webErrorStatus = " + error.webErrorStatus; + if (error.uri) { + message += (" when visiting " + error.uri) + } + } + var stack = error ? error.stack : ""; + Microsoft.Bing.AppEx.Telemetry.FlightRecorder.logCodeError(Microsoft.Bing.AppEx.Telemetry.LogLevel.normal, Microsoft.Bing.AppEx.Telemetry.RuntimeEnvironment.javascript, message, stack) + }, _getSettingsContainer: function _getSettingsContainer() { + var localSettings = Windows.Storage.ApplicationData.current.localSettings; + var container = localSettings.createContainer("articleReaderSettings", Windows.Storage.ApplicationDataCreateDisposition.always); + return container }, _updateDefaultTextSize: function _updateDefaultTextSize(relayout) { var container = this._getSettingsContainer(); var containerTextSize = container.values["textSize"]; diff --git a/packages/microsoft.bingnews/cannedData/FREOfflineClustersDefinition.json b/packages/microsoft.bingnews/cannedData/FREOfflineClustersDefinition.json index 7a0b4f3e..c4d03119 100644 --- a/packages/microsoft.bingnews/cannedData/FREOfflineClustersDefinition.json +++ b/packages/microsoft.bingnews/cannedData/FREOfflineClustersDefinition.json @@ -1 +1,17 @@ -{"clustersDefinition":[{"isFREOffline":1,"editorial":true,"pinned":true,"title":"_TopStory_","guid":"hero","clusterType":"NewsApp.Controls.HeroControl","providerConfiguration":{"providerType":"NewsApp.DataProviders.CMS.DataProvider","categoryKey":"hero","strategy":"hero"}}]} +{ + "clustersDefinition": [ + { + "isFREOffline": 1, + "editorial": true, + "pinned": true, + "title": "_TopStory_", + "guid": "hero", + "clusterType": "NewsApp.Controls.HeroControl", + "providerConfiguration": { + "providerType": "NewsApp.DataProviders.CMS.DataProvider", + "categoryKey": "hero", + "strategy": "hero" + } + } + ] +} \ No newline at end of file diff --git a/packages/microsoft.bingweather/photosynth/js/jspanoviewer.js b/packages/microsoft.bingweather/photosynth/js/jspanoviewer.js index c7b3ef48..e15c800e 100644 --- a/packages/microsoft.bingweather/photosynth/js/jspanoviewer.js +++ b/packages/microsoft.bingweather/photosynth/js/jspanoviewer.js @@ -1,2438 +1,2549 @@ /* © Microsoft. All rights reserved. */ "use strict"; -var quirks=new function() { -var _ua=navigator.userAgent; -var _isSafari=(navigator.vendor === 'Apple Computer, Inc.'); -var _isWebkit=_ua.indexOf('Webkit'); -var _chromeIndex=_ua.indexOf('Chrome'); -var _isChrome=_chromeIndex !== -1; -var _firefoxIndex=_ua.indexOf('Firefox'); -var _isFirefox=_firefoxIndex !== -1; -var _chromeVersion=_isChrome ? parseInt(_ua.substring(_chromeIndex + 7)) : -1; -var _firefoxVersion=_isFirefox ? parseInt(_ua.substring(_firefoxIndex + 8)) : -1; -var _isTrident=_ua.indexOf('Trident') !== -1; -this.isWebGLCORSSupported = (_isChrome && _chromeVersion >= 13) || (_isFirefox && _firefoxVersion >= 8); -this.failsToRenderItemsNearContainerBorder = (_isChrome && _chromeVersion <= 19); -this.isWebGLCORSRequired = (_isFirefox && _firefoxVersion > 4) || (_isChrome && _chromeVersion >= 13); -this.useImageDisposer = _isSafari; -this.supportsPreserve3D = !_isTrident && !_isFirefox +var quirks = new function() { + var _ua = navigator.userAgent; + var _isSafari = (navigator.vendor === 'Apple Computer, Inc.'); + var _isWebkit = _ua.indexOf('Webkit'); + var _chromeIndex = _ua.indexOf('Chrome'); + var _isChrome = _chromeIndex !== -1; + var _firefoxIndex = _ua.indexOf('Firefox'); + var _isFirefox = _firefoxIndex !== -1; + var _chromeVersion = _isChrome ? parseInt(_ua.substring(_chromeIndex + 7)) : -1; + var _firefoxVersion = _isFirefox ? parseInt(_ua.substring(_firefoxIndex + 8)) : -1; + var _isTrident = _ua.indexOf('Trident') !== -1; + this.isWebGLCORSSupported = (_isChrome && _chromeVersion >= 13) || (_isFirefox && _firefoxVersion >= 8); + this.failsToRenderItemsNearContainerBorder = (_isChrome && _chromeVersion <= 19); + this.isWebGLCORSRequired = (_isFirefox && _firefoxVersion > 4) || (_isChrome && _chromeVersion >= 13); + this.useImageDisposer = _isSafari; + this.supportsPreserve3D = !_isTrident && !_isFirefox }; "use strict"; -var RendererCheckCSS3D={}; +var RendererCheckCSS3D = {}; RendererCheckCSS3D.isValidBrowser = function() { -var CSSMatrix=window.CSSMatrix || window.WebKitCSSMatrix || window.MSCSSMatrix || window.MozCSSMatrix; -if (CSSMatrix == null || quirks.failsToRenderItemsNearContainerBorder) { -RendererCheckCSS3D.isValidBrowser = function() { -return false -}; -return false -} -var matrix=new CSSMatrix; -if (!matrix) { -RendererCheckCSS3D.isValidBrowser = function() { -return false -}; -return false -} -var div=document.createElement('div'); -var style=div.style; -if ((style.webkitTransform === undefined) && (style.msTransform === undefined) && (style.mozTransform === undefined)) { -RendererCheckCSS3D.isValidBrowser = function() { -return false -}; -return false -} -if (quirks.supportsPreserve3D) { -var testElem=document.createElement('div'); -var testElemStyle=testElem.style; -testElemStyle.width = '0px'; -testElemStyle.height = '0px'; -testElemStyle.position = 'absolute'; -testElemStyle.overflowX = 'hidden'; -testElemStyle.overflowY = 'hidden'; -testElemStyle.backgroundColor = 'rgb(0, 0, 0)'; -testElem.innerHTML = '
'; -document.body.appendChild(testElem); -var size=document.getElementById('_rwwviewer_cssrenderer_test_id').getClientRects()[0]; -document.body.removeChild(testElem); -if (Math.abs(size.width - 377) <= 1 && Math.abs(size.height - 377) <= 1) { -RendererCheckCSS3D.isValidBrowser = function() { -return true -}; -return true -} -else { -RendererCheckCSS3D.isValidBrowser = function() { -return false -}; -return false -} -} -else { -RendererCheckCSS3D.isValidBrowser = function() { -return true -}; -return true -} + var CSSMatrix = window.CSSMatrix || window.WebKitCSSMatrix || window.MSCSSMatrix || window.MozCSSMatrix; + if (CSSMatrix == null || quirks.failsToRenderItemsNearContainerBorder) { + RendererCheckCSS3D.isValidBrowser = function() { + return false + }; + return false + } + var matrix = new CSSMatrix; + if (!matrix) { + RendererCheckCSS3D.isValidBrowser = function() { + return false + }; + return false + } + var div = document.createElement('div'); + var style = div.style; + if ((style.webkitTransform === undefined) && (style.msTransform === undefined) && (style.mozTransform === undefined)) { + RendererCheckCSS3D.isValidBrowser = function() { + return false + }; + return false + } + if (quirks.supportsPreserve3D) { + var testElem = document.createElement('div'); + var testElemStyle = testElem.style; + testElemStyle.width = '0px'; + testElemStyle.height = '0px'; + testElemStyle.position = 'absolute'; + testElemStyle.overflowX = 'hidden'; + testElemStyle.overflowY = 'hidden'; + testElemStyle.backgroundColor = 'rgb(0, 0, 0)'; + testElem.innerHTML = '
'; + document.body.appendChild(testElem); + var size = document.getElementById('_rwwviewer_cssrenderer_test_id').getClientRects()[0]; + document.body.removeChild(testElem); + if (Math.abs(size.width - 377) <= 1 && Math.abs(size.height - 377) <= 1) { + RendererCheckCSS3D.isValidBrowser = function() { + return true + }; + return true + } else { + RendererCheckCSS3D.isValidBrowser = function() { + return false + }; + return false + } + } else { + RendererCheckCSS3D.isValidBrowser = function() { + return true + }; + return true + } }; "use strict"; -var RendererCheckWebGL={}; +var RendererCheckWebGL = {}; RendererCheckWebGL.getWebGLContext = function(win) { -if (win.getContext) { -var possibleNames=["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; -for (var i=0; i < possibleNames.length; ++i) { -try { -var context=win.getContext(possibleNames[i], {antialias: true}); -if (context != null) -return context -} -catch(ex) {} -} -} -return null -}; -RendererCheckWebGL.isValidBrowser = function() { -var canvas=document.createElement('canvas'); -var gl=RendererCheckWebGL.getWebGLContext(canvas); -if (!gl) { -console.log("WebGL is not supported."); -RendererCheckWebGL.isValidBrowser = function() { -return false -}; -return false -} -else if (quirks.isWebGLCORSRequired && !quirks.isWebGLCORSSupported) { -console.log('CORS image textures are not supported in this browser'); -RendererCheckWebGL.isValidBrowser = function() { -return false + if (win.getContext) { + var possibleNames = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; + for (var i = 0; i < possibleNames.length; ++i) { + try { + var context = win.getContext(possibleNames[i], { antialias: true }); + if (context != null) + return context + } catch (ex) {} + } + } + return null }; -return false -} RendererCheckWebGL.isValidBrowser = function() { -return true -}; -return true -}; -var convexPolygonClipper={ -clip: function clip(lowerClipBound, upperClipBound, polygon) { -if (upperClipBound.x < lowerClipBound.x || upperClipBound.y < lowerClipBound.y || upperClipBound.z < lowerClipBound.z) { -throw'clip bounds should have positive volume'; -} -var options={ -clipBounds: { -x: lowerClipBound.x, y: lowerClipBound.y, z: lowerClipBound.z, sizeX: upperClipBound.x - lowerClipBound.x, sizeY: upperClipBound.y - lowerClipBound.y, sizeZ: upperClipBound.z - lowerClipBound.z -}, poly: polygon, polyTextureCoords: null, polyVertexCount: polygon.length, clippedPoly: new Array(polygon.length + 6), clippedPolyTextureCoords: null, clippedPolyVertexCount: 0, tempVertexBuffer: new Array(polygon.length + 6), tempTextureCoordBuffer: null -}; -convexPolygonClipper.clipConvexPolygonGeneral(options); -options.clippedPoly.length = options.clippedPolyVertexCount; -return options.clippedPoly -}, clipConvexPolygonGeneral: function clipConvexPolygonGeneral(options) { -if (!options.clipBounds) { -throw'expected clip bounds option'; -} -if (options.polyVertexCount < 3 || options.poly == null || options.poly.length < options.polyVertexCount || options.clippedPoly == null || options.clippedPoly.length < options.polyVertexCount + 6 || options.tempVertexBuffer == null || options.tempVertexBuffer.length < options.polyVertexCount + 6) { -throw'polygon arrays must have sufficient capacity'; -} -if (options.polyTextureCoords != null) { -if (options.polyTextureCoords.Length < options.polyVertexCount || options.clippedPolyTextureCoords == null || options.clippedPolyTextureCoords.Length < options.polyVertexCount + 6 || options.tempTextureCoordBuffer == null || options.tempTextureCoordBuffer.Length < options.polyVertexCount + 6) { -throw'polygon arrays must have sufficient capacity'; -} -} -var t; -t = options.tempVertexBuffer; -options.tempVertexBuffer = options.clippedPoly; -options.clippedPoly = t; -t = null; -t = options.tempTextureCoordBuffer; -options.tempTextureCoordBuffer = options.clippedPolyTextureCoords; -options.clippedPolyTextureCoords = t; -t = null; -var clippedPolyCurrent=options.tempVertexBuffer; -var clippedPolyTextureCoordsCurrent=options.tempTextureCoordBuffer; -var clippedPolyVertexCountCurrent=options.polyVertexCount; -var p0Idx, -p1Idx, -BC0, -BC1; -var clipBounds=options.clipBounds; -{ -options.clippedPolyVertexCount = 0; -p0Idx = clippedPolyVertexCountCurrent - 1; -for (p1Idx = 0; p1Idx < clippedPolyVertexCountCurrent; p1Idx++) { -BC0 = options.poly[p0Idx].x - clipBounds.x * options.poly[p0Idx].w; -BC1 = options.poly[p1Idx].x - clipBounds.x * options.poly[p1Idx].w; -options.BC0 = BC0; -options.BC1 = BC1; -options.p0Idx = p0Idx; -options.p1Idx = p1Idx; -options.clippedPolyCurrent = options.poly; -options.clippedPolyTextureCoordsCurrent = options.polyTextureCoords; -convexPolygonClipper.genericClipAgainstPlane(options); -p0Idx = p1Idx -} -if (options.clippedPolyVertexCount == 0) { -return -} -t = clippedPolyCurrent; -clippedPolyCurrent = options.clippedPoly; -options.clippedPoly = t; -t = null; -t = clippedPolyTextureCoordsCurrent; -clippedPolyTextureCoordsCurrent = options.clippedPolyTextureCoords; -options.clippedPolyTextureCoords = t; -t = null; -clippedPolyVertexCountCurrent = options.clippedPolyVertexCount -} -{ -options.clippedPolyVertexCount = 0; -p0Idx = clippedPolyVertexCountCurrent - 1; -for (p1Idx = 0; p1Idx < clippedPolyVertexCountCurrent; p1Idx++) { -BC0 = (clipBounds.x + clipBounds.sizeX) * clippedPolyCurrent[p0Idx].w - clippedPolyCurrent[p0Idx].x; -BC1 = (clipBounds.x + clipBounds.sizeX) * clippedPolyCurrent[p1Idx].w - clippedPolyCurrent[p1Idx].x; -options.BC0 = BC0; -options.BC1 = BC1; -options.p0Idx = p0Idx; -options.p1Idx = p1Idx; -options.clippedPolyCurrent = clippedPolyCurrent; -options.clippedPolyTextureCoordsCurrent = clippedPolyTextureCoordsCurrent; -convexPolygonClipper.genericClipAgainstPlane(options); -p0Idx = p1Idx -} -if (options.clippedPolyVertexCount == 0) { -return -} -t = clippedPolyCurrent; -clippedPolyCurrent = options.clippedPoly; -options.clippedPoly = t; -t = null; -t = clippedPolyTextureCoordsCurrent; -clippedPolyTextureCoordsCurrent = options.clippedPolyTextureCoords; -options.clippedPolyTextureCoords = t; -t = null; -clippedPolyVertexCountCurrent = options.clippedPolyVertexCount -} -{ -options.clippedPolyVertexCount = 0; -p0Idx = clippedPolyVertexCountCurrent - 1; -for (p1Idx = 0; p1Idx < clippedPolyVertexCountCurrent; p1Idx++) { -BC0 = clippedPolyCurrent[p0Idx].y - clipBounds.y * clippedPolyCurrent[p0Idx].w; -BC1 = clippedPolyCurrent[p1Idx].y - clipBounds.y * clippedPolyCurrent[p1Idx].w; -options.BC0 = BC0; -options.BC1 = BC1; -options.p0Idx = p0Idx; -options.p1Idx = p1Idx; -options.clippedPolyCurrent = clippedPolyCurrent; -options.clippedPolyTextureCoordsCurrent = clippedPolyTextureCoordsCurrent; -convexPolygonClipper.genericClipAgainstPlane(options); -p0Idx = p1Idx -} -if (options.clippedPolyVertexCount == 0) { -return -} -t = clippedPolyCurrent; -clippedPolyCurrent = options.clippedPoly; -options.clippedPoly = t; -t = null; -t = clippedPolyTextureCoordsCurrent; -clippedPolyTextureCoordsCurrent = options.clippedPolyTextureCoords; -options.clippedPolyTextureCoords = t; -t = null; -clippedPolyVertexCountCurrent = options.clippedPolyVertexCount -} -{ -options.clippedPolyVertexCount = 0; -p0Idx = clippedPolyVertexCountCurrent - 1; -for (p1Idx = 0; p1Idx < clippedPolyVertexCountCurrent; p1Idx++) { -BC0 = (options.clipBounds.y + clipBounds.sizeY) * clippedPolyCurrent[p0Idx].w - clippedPolyCurrent[p0Idx].y; -BC1 = (options.clipBounds.y + clipBounds.sizeY) * clippedPolyCurrent[p1Idx].w - clippedPolyCurrent[p1Idx].y; -options.BC0 = BC0; -options.BC1 = BC1; -options.p0Idx = p0Idx; -options.p1Idx = p1Idx; -options.clippedPolyCurrent = clippedPolyCurrent; -options.clippedPolyTextureCoordsCurrent = clippedPolyTextureCoordsCurrent; -convexPolygonClipper.genericClipAgainstPlane(options); -p0Idx = p1Idx -} -if (options.clippedPolyVertexCount == 0) { -return -} -t = clippedPolyCurrent; -clippedPolyCurrent = options.clippedPoly; -options.clippedPoly = t; -t = null; -t = clippedPolyTextureCoordsCurrent; -clippedPolyTextureCoordsCurrent = options.clippedPolyTextureCoords; -options.clippedPolyTextureCoords = t; -t = null; -clippedPolyVertexCountCurrent = options.clippedPolyVertexCount -} -{ -options.clippedPolyVertexCount = 0; -p0Idx = clippedPolyVertexCountCurrent - 1; -for (p1Idx = 0; p1Idx < clippedPolyVertexCountCurrent; p1Idx++) { -BC0 = clippedPolyCurrent[p0Idx].z - clipBounds.z * clippedPolyCurrent[p0Idx].w; -BC1 = clippedPolyCurrent[p1Idx].z - clipBounds.z * clippedPolyCurrent[p1Idx].w; -options.BC0 = BC0; -options.BC1 = BC1; -options.p0Idx = p0Idx; -options.p1Idx = p1Idx; -options.clippedPolyCurrent = clippedPolyCurrent; -options.clippedPolyTextureCoordsCurrent = clippedPolyTextureCoordsCurrent; -convexPolygonClipper.genericClipAgainstPlane(options); -p0Idx = p1Idx -} -if (options.clippedPolyVertexCount == 0) { -return -} -t = clippedPolyCurrent; -clippedPolyCurrent = options.clippedPoly; -options.clippedPoly = t; -t = null; -t = clippedPolyTextureCoordsCurrent; -clippedPolyTextureCoordsCurrent = options.clippedPolyTextureCoords; -options.clippedPolyTextureCoords = t; -t = null; -clippedPolyVertexCountCurrent = options.clippedPolyVertexCount -} -{ -options.clippedPolyVertexCount = 0; -p0Idx = clippedPolyVertexCountCurrent - 1; -for (p1Idx = 0; p1Idx < clippedPolyVertexCountCurrent; p1Idx++) { -BC0 = (options.clipBounds.z + clipBounds.sizeZ) * clippedPolyCurrent[p0Idx].w - clippedPolyCurrent[p0Idx].z; -BC1 = (options.clipBounds.z + clipBounds.sizeZ) * clippedPolyCurrent[p1Idx].w - clippedPolyCurrent[p1Idx].z; -options.BC0 = BC0; -options.BC1 = BC1; -options.p0Idx = p0Idx; -options.p1Idx = p1Idx; -options.clippedPolyCurrent = clippedPolyCurrent; -options.clippedPolyTextureCoordsCurrent = clippedPolyTextureCoordsCurrent; -convexPolygonClipper.genericClipAgainstPlane(options); -p0Idx = p1Idx -} -options.clippedPolyCurrent = null; -options.clippedPolyTextureCurrent = null -} -}, genericClipAgainstPlane: function genericClipAgainstPlane(options) { -var alpha; -if (options.BC1 >= 0) { -if (options.BC0 < 0) { -alpha = options.BC0 / (options.BC0 - options.BC1); -options.clippedPoly[options.clippedPolyVertexCount] = options.clippedPolyCurrent[options.p0Idx].lerp(options.clippedPolyCurrent[options.p1Idx], alpha); -if (options.clippedPolyTextureCoords != null) { -options.clippedPolyTextureCoords[options.clippedPolyVertexCount] = options.clippedPolyTextureCoordsCurrent[options.p0Idx].lerp(options.clippedPolyTextureCoordsCurrent[options.p1Idx], alpha) -} -options.clippedPolyVertexCount++ -} -options.clippedPoly[options.clippedPolyVertexCount] = options.clippedPolyCurrent[options.p1Idx]; -if (options.clippedPolyTextureCoords != null) { -options.clippedPolyTextureCoords[options.clippedPolyVertexCount] = options.clippedPolyTextureCoordsCurrent[options.p1Idx] -} -options.clippedPolyVertexCount++ -} -else if (options.BC0 >= 0) { -alpha = options.BC0 / (options.BC0 - options.BC1); -options.clippedPoly[options.clippedPolyVertexCount] = options.clippedPolyCurrent[options.p0Idx].lerp(options.clippedPolyCurrent[options.p1Idx], alpha); -if (options.clippedPolyTextureCoords != null) { -options.clippedPolyTextureCoords[options.clippedPolyVertexCount] = options.clippedPolyTextureCoordsCurrent[options.p0Idx].lerp(options.clippedPolyTextureCoordsCurrent[options.p1Idx], alpha) -} -options.clippedPolyVertexCount++ -} -} -}; -var GraphicsHelper={}; + var canvas = document.createElement('canvas'); + var gl = RendererCheckWebGL.getWebGLContext(canvas); + if (!gl) { + console.log("WebGL is not supported."); + RendererCheckWebGL.isValidBrowser = function() { + return false + }; + return false + } else if (quirks.isWebGLCORSRequired && !quirks.isWebGLCORSSupported) { + console.log('CORS image textures are not supported in this browser'); + RendererCheckWebGL.isValidBrowser = function() { + return false + }; + return false + } + RendererCheckWebGL.isValidBrowser = function() { + return true + }; + return true +}; +var convexPolygonClipper = { + clip: function clip(lowerClipBound, upperClipBound, polygon) { + if (upperClipBound.x < lowerClipBound.x || upperClipBound.y < lowerClipBound.y || upperClipBound.z < lowerClipBound.z) { + throw 'clip bounds should have positive volume'; + } + var options = { + clipBounds: { + x: lowerClipBound.x, + y: lowerClipBound.y, + z: lowerClipBound.z, + sizeX: upperClipBound.x - lowerClipBound.x, + sizeY: upperClipBound.y - lowerClipBound.y, + sizeZ: upperClipBound.z - lowerClipBound.z + }, + poly: polygon, + polyTextureCoords: null, + polyVertexCount: polygon.length, + clippedPoly: new Array(polygon.length + 6), + clippedPolyTextureCoords: null, + clippedPolyVertexCount: 0, + tempVertexBuffer: new Array(polygon.length + 6), + tempTextureCoordBuffer: null + }; + convexPolygonClipper.clipConvexPolygonGeneral(options); + options.clippedPoly.length = options.clippedPolyVertexCount; + return options.clippedPoly + }, + clipConvexPolygonGeneral: function clipConvexPolygonGeneral(options) { + if (!options.clipBounds) { + throw 'expected clip bounds option'; + } + if (options.polyVertexCount < 3 || options.poly == null || options.poly.length < options.polyVertexCount || options.clippedPoly == null || options.clippedPoly.length < options.polyVertexCount + 6 || options.tempVertexBuffer == null || options.tempVertexBuffer.length < options.polyVertexCount + 6) { + throw 'polygon arrays must have sufficient capacity'; + } + if (options.polyTextureCoords != null) { + if (options.polyTextureCoords.Length < options.polyVertexCount || options.clippedPolyTextureCoords == null || options.clippedPolyTextureCoords.Length < options.polyVertexCount + 6 || options.tempTextureCoordBuffer == null || options.tempTextureCoordBuffer.Length < options.polyVertexCount + 6) { + throw 'polygon arrays must have sufficient capacity'; + } + } + var t; + t = options.tempVertexBuffer; + options.tempVertexBuffer = options.clippedPoly; + options.clippedPoly = t; + t = null; + t = options.tempTextureCoordBuffer; + options.tempTextureCoordBuffer = options.clippedPolyTextureCoords; + options.clippedPolyTextureCoords = t; + t = null; + var clippedPolyCurrent = options.tempVertexBuffer; + var clippedPolyTextureCoordsCurrent = options.tempTextureCoordBuffer; + var clippedPolyVertexCountCurrent = options.polyVertexCount; + var p0Idx, + p1Idx, + BC0, + BC1; + var clipBounds = options.clipBounds; { + options.clippedPolyVertexCount = 0; + p0Idx = clippedPolyVertexCountCurrent - 1; + for (p1Idx = 0; p1Idx < clippedPolyVertexCountCurrent; p1Idx++) { + BC0 = options.poly[p0Idx].x - clipBounds.x * options.poly[p0Idx].w; + BC1 = options.poly[p1Idx].x - clipBounds.x * options.poly[p1Idx].w; + options.BC0 = BC0; + options.BC1 = BC1; + options.p0Idx = p0Idx; + options.p1Idx = p1Idx; + options.clippedPolyCurrent = options.poly; + options.clippedPolyTextureCoordsCurrent = options.polyTextureCoords; + convexPolygonClipper.genericClipAgainstPlane(options); + p0Idx = p1Idx + } + if (options.clippedPolyVertexCount == 0) { + return + } + t = clippedPolyCurrent; + clippedPolyCurrent = options.clippedPoly; + options.clippedPoly = t; + t = null; + t = clippedPolyTextureCoordsCurrent; + clippedPolyTextureCoordsCurrent = options.clippedPolyTextureCoords; + options.clippedPolyTextureCoords = t; + t = null; + clippedPolyVertexCountCurrent = options.clippedPolyVertexCount + } { + options.clippedPolyVertexCount = 0; + p0Idx = clippedPolyVertexCountCurrent - 1; + for (p1Idx = 0; p1Idx < clippedPolyVertexCountCurrent; p1Idx++) { + BC0 = (clipBounds.x + clipBounds.sizeX) * clippedPolyCurrent[p0Idx].w - clippedPolyCurrent[p0Idx].x; + BC1 = (clipBounds.x + clipBounds.sizeX) * clippedPolyCurrent[p1Idx].w - clippedPolyCurrent[p1Idx].x; + options.BC0 = BC0; + options.BC1 = BC1; + options.p0Idx = p0Idx; + options.p1Idx = p1Idx; + options.clippedPolyCurrent = clippedPolyCurrent; + options.clippedPolyTextureCoordsCurrent = clippedPolyTextureCoordsCurrent; + convexPolygonClipper.genericClipAgainstPlane(options); + p0Idx = p1Idx + } + if (options.clippedPolyVertexCount == 0) { + return + } + t = clippedPolyCurrent; + clippedPolyCurrent = options.clippedPoly; + options.clippedPoly = t; + t = null; + t = clippedPolyTextureCoordsCurrent; + clippedPolyTextureCoordsCurrent = options.clippedPolyTextureCoords; + options.clippedPolyTextureCoords = t; + t = null; + clippedPolyVertexCountCurrent = options.clippedPolyVertexCount + } { + options.clippedPolyVertexCount = 0; + p0Idx = clippedPolyVertexCountCurrent - 1; + for (p1Idx = 0; p1Idx < clippedPolyVertexCountCurrent; p1Idx++) { + BC0 = clippedPolyCurrent[p0Idx].y - clipBounds.y * clippedPolyCurrent[p0Idx].w; + BC1 = clippedPolyCurrent[p1Idx].y - clipBounds.y * clippedPolyCurrent[p1Idx].w; + options.BC0 = BC0; + options.BC1 = BC1; + options.p0Idx = p0Idx; + options.p1Idx = p1Idx; + options.clippedPolyCurrent = clippedPolyCurrent; + options.clippedPolyTextureCoordsCurrent = clippedPolyTextureCoordsCurrent; + convexPolygonClipper.genericClipAgainstPlane(options); + p0Idx = p1Idx + } + if (options.clippedPolyVertexCount == 0) { + return + } + t = clippedPolyCurrent; + clippedPolyCurrent = options.clippedPoly; + options.clippedPoly = t; + t = null; + t = clippedPolyTextureCoordsCurrent; + clippedPolyTextureCoordsCurrent = options.clippedPolyTextureCoords; + options.clippedPolyTextureCoords = t; + t = null; + clippedPolyVertexCountCurrent = options.clippedPolyVertexCount + } { + options.clippedPolyVertexCount = 0; + p0Idx = clippedPolyVertexCountCurrent - 1; + for (p1Idx = 0; p1Idx < clippedPolyVertexCountCurrent; p1Idx++) { + BC0 = (options.clipBounds.y + clipBounds.sizeY) * clippedPolyCurrent[p0Idx].w - clippedPolyCurrent[p0Idx].y; + BC1 = (options.clipBounds.y + clipBounds.sizeY) * clippedPolyCurrent[p1Idx].w - clippedPolyCurrent[p1Idx].y; + options.BC0 = BC0; + options.BC1 = BC1; + options.p0Idx = p0Idx; + options.p1Idx = p1Idx; + options.clippedPolyCurrent = clippedPolyCurrent; + options.clippedPolyTextureCoordsCurrent = clippedPolyTextureCoordsCurrent; + convexPolygonClipper.genericClipAgainstPlane(options); + p0Idx = p1Idx + } + if (options.clippedPolyVertexCount == 0) { + return + } + t = clippedPolyCurrent; + clippedPolyCurrent = options.clippedPoly; + options.clippedPoly = t; + t = null; + t = clippedPolyTextureCoordsCurrent; + clippedPolyTextureCoordsCurrent = options.clippedPolyTextureCoords; + options.clippedPolyTextureCoords = t; + t = null; + clippedPolyVertexCountCurrent = options.clippedPolyVertexCount + } { + options.clippedPolyVertexCount = 0; + p0Idx = clippedPolyVertexCountCurrent - 1; + for (p1Idx = 0; p1Idx < clippedPolyVertexCountCurrent; p1Idx++) { + BC0 = clippedPolyCurrent[p0Idx].z - clipBounds.z * clippedPolyCurrent[p0Idx].w; + BC1 = clippedPolyCurrent[p1Idx].z - clipBounds.z * clippedPolyCurrent[p1Idx].w; + options.BC0 = BC0; + options.BC1 = BC1; + options.p0Idx = p0Idx; + options.p1Idx = p1Idx; + options.clippedPolyCurrent = clippedPolyCurrent; + options.clippedPolyTextureCoordsCurrent = clippedPolyTextureCoordsCurrent; + convexPolygonClipper.genericClipAgainstPlane(options); + p0Idx = p1Idx + } + if (options.clippedPolyVertexCount == 0) { + return + } + t = clippedPolyCurrent; + clippedPolyCurrent = options.clippedPoly; + options.clippedPoly = t; + t = null; + t = clippedPolyTextureCoordsCurrent; + clippedPolyTextureCoordsCurrent = options.clippedPolyTextureCoords; + options.clippedPolyTextureCoords = t; + t = null; + clippedPolyVertexCountCurrent = options.clippedPolyVertexCount + } { + options.clippedPolyVertexCount = 0; + p0Idx = clippedPolyVertexCountCurrent - 1; + for (p1Idx = 0; p1Idx < clippedPolyVertexCountCurrent; p1Idx++) { + BC0 = (options.clipBounds.z + clipBounds.sizeZ) * clippedPolyCurrent[p0Idx].w - clippedPolyCurrent[p0Idx].z; + BC1 = (options.clipBounds.z + clipBounds.sizeZ) * clippedPolyCurrent[p1Idx].w - clippedPolyCurrent[p1Idx].z; + options.BC0 = BC0; + options.BC1 = BC1; + options.p0Idx = p0Idx; + options.p1Idx = p1Idx; + options.clippedPolyCurrent = clippedPolyCurrent; + options.clippedPolyTextureCoordsCurrent = clippedPolyTextureCoordsCurrent; + convexPolygonClipper.genericClipAgainstPlane(options); + p0Idx = p1Idx + } + options.clippedPolyCurrent = null; + options.clippedPolyTextureCurrent = null + } + }, + genericClipAgainstPlane: function genericClipAgainstPlane(options) { + var alpha; + if (options.BC1 >= 0) { + if (options.BC0 < 0) { + alpha = options.BC0 / (options.BC0 - options.BC1); + options.clippedPoly[options.clippedPolyVertexCount] = options.clippedPolyCurrent[options.p0Idx].lerp(options.clippedPolyCurrent[options.p1Idx], alpha); + if (options.clippedPolyTextureCoords != null) { + options.clippedPolyTextureCoords[options.clippedPolyVertexCount] = options.clippedPolyTextureCoordsCurrent[options.p0Idx].lerp(options.clippedPolyTextureCoordsCurrent[options.p1Idx], alpha) + } + options.clippedPolyVertexCount++ + } + options.clippedPoly[options.clippedPolyVertexCount] = options.clippedPolyCurrent[options.p1Idx]; + if (options.clippedPolyTextureCoords != null) { + options.clippedPolyTextureCoords[options.clippedPolyVertexCount] = options.clippedPolyTextureCoordsCurrent[options.p1Idx] + } + options.clippedPolyVertexCount++ + } else if (options.BC0 >= 0) { + alpha = options.BC0 / (options.BC0 - options.BC1); + options.clippedPoly[options.clippedPolyVertexCount] = options.clippedPolyCurrent[options.p0Idx].lerp(options.clippedPolyCurrent[options.p1Idx], alpha); + if (options.clippedPolyTextureCoords != null) { + options.clippedPolyTextureCoords[options.clippedPolyVertexCount] = options.clippedPolyTextureCoordsCurrent[options.p0Idx].lerp(options.clippedPolyTextureCoordsCurrent[options.p1Idx], alpha) + } + options.clippedPolyVertexCount++ + } + } +}; +var GraphicsHelper = {}; GraphicsHelper.createLookAtRH = function(position, look, up) { -var rotatedPos, -viewSide, -viewUp, -result; -look = look.normalize(); -up = up.normalize(); -viewUp = up.subtract(look.multiplyScalar(up.dot(look))).normalize(); -viewSide = look.cross(viewUp); -result = Matrix4x4.createIdentity(); -result.m11 = viewSide.x; -result.m12 = viewSide.y; -result.m13 = viewSide.z; -result.m21 = viewUp.x; -result.m22 = viewUp.y; -result.m23 = viewUp.z; -result.m31 = -look.x; -result.m32 = -look.y; -result.m33 = -look.z; -rotatedPos = result.transformVector3(position); -result.m14 = -rotatedPos.x; -result.m24 = -rotatedPos.y; -result.m34 = -rotatedPos.z; -return result + var rotatedPos, + viewSide, + viewUp, + result; + look = look.normalize(); + up = up.normalize(); + viewUp = up.subtract(look.multiplyScalar(up.dot(look))).normalize(); + viewSide = look.cross(viewUp); + result = Matrix4x4.createIdentity(); + result.m11 = viewSide.x; + result.m12 = viewSide.y; + result.m13 = viewSide.z; + result.m21 = viewUp.x; + result.m22 = viewUp.y; + result.m23 = viewUp.z; + result.m31 = -look.x; + result.m32 = -look.y; + result.m33 = -look.z; + rotatedPos = result.transformVector3(position); + result.m14 = -rotatedPos.x; + result.m24 = -rotatedPos.y; + result.m34 = -rotatedPos.z; + return result }; GraphicsHelper.createPerspective = function(verticalFov, aspectRatio, near, far, digitalPan) { -var d; -d = 1.0 / Math.tan(verticalFov * 0.5); -var projection=new Matrix4x4(d / aspectRatio, 0, digitalPan.x * 2, 0, 0, d, digitalPan.y * 2, 0, 0, 0, far / (far - near), -(near * far) / (far - near), 0, 0, -1, 0); -return projection + var d; + d = 1.0 / Math.tan(verticalFov * 0.5); + var projection = new Matrix4x4(d / aspectRatio, 0, digitalPan.x * 2, 0, 0, d, digitalPan.y * 2, 0, 0, 0, far / (far - near), -(near * far) / (far - near), 0, 0, -1, 0); + return projection }; GraphicsHelper.createPerspectiveFromFrustum = function(l, r, b, t, n, f) { -return new Matrix4x4((2.0 * n) / (r - l), 0.0, (r + l) / (r - l), 0.0, 0.0, (2.0 * n) / (t - b), (t + b) / (t - b), 0.0, 0.0, 0.0, (-1.0 * (f + n)) / (f - n), (-2.0 * f * n) / (f - n), 0.0, 0.0, -1.0, 0.0) + return new Matrix4x4((2.0 * n) / (r - l), 0.0, (r + l) / (r - l), 0.0, 0.0, (2.0 * n) / (t - b), (t + b) / (t - b), 0.0, 0.0, 0.0, (-1.0 * (f + n)) / (f - n), (-2.0 * f * n) / (f - n), 0.0, 0.0, -1.0, 0.0) }; GraphicsHelper.createPerspectiveOGL = function(verticalFov, aspectRatio, near, far) { -var yMax=near * Math.tan(verticalFov * 0.5), -yMin=-yMax, -xMin=yMin * aspectRatio, -xMax=yMax * aspectRatio, -zMin=near, -zMax=far; -return GraphicsHelper.createPerspectiveFromFrustum(xMin, xMax, yMin, yMax, zMin, zMax) + var yMax = near * Math.tan(verticalFov * 0.5), + yMin = -yMax, + xMin = yMin * aspectRatio, + xMax = yMax * aspectRatio, + zMin = near, + zMax = far; + return GraphicsHelper.createPerspectiveFromFrustum(xMin, xMax, yMin, yMax, zMin, zMax) }; GraphicsHelper.projectOntoPlane = function(position, plane) { -var l=position; -var n=plane.normal; -var d=plane.d; -var nDotL=n.dot(l); -var m11=nDotL + d - l.x * n.x; -var m12=-l.x * n.y; -var m13=-l.x * n.z; -var m14=-l.x * d; -var m21=-l.y * n.x; -var m22=nDotL + d - l.y * n.y; -var m23=-l.y * n.z; -var m24=-l.y * d; -var m31=-l.z * n.x; -var m32=-l.z * n.y; -var m33=nDotL + d - l.z * n.z; -var m34=-l.z * d; -var m41=-n.x; -var m42=-n.y; -var m43=-n.z; -var m44=nDotL; -return new Matrix4x4(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44) + var l = position; + var n = plane.normal; + var d = plane.d; + var nDotL = n.dot(l); + var m11 = nDotL + d - l.x * n.x; + var m12 = -l.x * n.y; + var m13 = -l.x * n.z; + var m14 = -l.x * d; + var m21 = -l.y * n.x; + var m22 = nDotL + d - l.y * n.y; + var m23 = -l.y * n.z; + var m24 = -l.y * d; + var m31 = -l.z * n.x; + var m32 = -l.z * n.y; + var m33 = nDotL + d - l.z * n.z; + var m34 = -l.z * d; + var m41 = -n.x; + var m42 = -n.y; + var m43 = -n.z; + var m44 = nDotL; + return new Matrix4x4(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44) }; GraphicsHelper.createViewportToScreen = function(width, height) { -var n=Matrix4x4.createIdentity(); -n.m11 = width * 0.5; -n.m12 = 0; -n.m13 = 0; -n.m14 = 0; -n.m21 = 0; -n.m22 = -1 * height * 0.5; -n.m23 = 0; -n.m24 = 0; -n.m31 = 0; -n.m32 = 0; -n.m33 = 1; -n.m34 = 0; -n.m41 = width * 0.5; -n.m42 = height * 0.5; -n.m43 = 0; -n.m44 = 1; -n = n.transpose(); -return n -}; -var MathHelper={}; + var n = Matrix4x4.createIdentity(); + n.m11 = width * 0.5; + n.m12 = 0; + n.m13 = 0; + n.m14 = 0; + n.m21 = 0; + n.m22 = -1 * height * 0.5; + n.m23 = 0; + n.m24 = 0; + n.m31 = 0; + n.m32 = 0; + n.m33 = 1; + n.m34 = 0; + n.m41 = width * 0.5; + n.m42 = height * 0.5; + n.m43 = 0; + n.m44 = 1; + n = n.transpose(); + return n +}; +var MathHelper = {}; MathHelper.zeroTolerance = 1e-12; MathHelper.halfPI = Math.PI * 0.5; MathHelper.twoPI = 2 * Math.PI; MathHelper.oneEightyOverPI = 180.0 / Math.PI; MathHelper.piOverOneEighty = Math.PI / 180.0; MathHelper.isZero = function(value) { -return Math.abs(value) < MathHelper.zeroTolerance + return Math.abs(value) < MathHelper.zeroTolerance }; MathHelper.degreesToRadians = function(angle) { -return angle * MathHelper.piOverOneEighty + return angle * MathHelper.piOverOneEighty }; MathHelper.radiansToDegrees = function(angle) { -return angle * MathHelper.oneEightyOverPI + return angle * MathHelper.oneEightyOverPI }; MathHelper.normalizeRadian = function(angle) { -while (angle < 0) { -angle += MathHelper.twoPI -} -while (angle >= MathHelper.twoPI) { -angle -= MathHelper.twoPI -} -return angle + while (angle < 0) { + angle += MathHelper.twoPI + } + while (angle >= MathHelper.twoPI) { + angle -= MathHelper.twoPI + } + return angle }; MathHelper.pickStartHeadingToTakeShortestPath = function(source, target) { -if (Math.abs(target - source) > Math.PI) { -if (source < target) { -return source + MathHelper.twoPI -} -else { -return source - MathHelper.twoPI -} -} -else { -return source -} + if (Math.abs(target - source) > Math.PI) { + if (source < target) { + return source + MathHelper.twoPI + } else { + return source - MathHelper.twoPI + } + } else { + return source + } }; MathHelper.invSqrt = function(v) { -return 1.0 / Math.sqrt(v) + return 1.0 / Math.sqrt(v) }; MathHelper.isFinite = function(v) { -return v > Number.NEGATIVE_INFINITY && v < Number.POSITIVE_INFINITY + return v > Number.NEGATIVE_INFINITY && v < Number.POSITIVE_INFINITY }; MathHelper.clamp = function(v, min, max) { -return (Math.min(Math.max(v, min), max)) + return (Math.min(Math.max(v, min), max)) }; MathHelper.logBase = function(x, base) { -return Math.log(x) / Math.log(base) + return Math.log(x) / Math.log(base) }; MathHelper.ceilLog2 = function(value) { -return Math.ceil(MathHelper.logBase(value, 2)) + return Math.ceil(MathHelper.logBase(value, 2)) }; MathHelper.compareTo = function(v1, v2) { -if (v1 < v2) { -return -1 -} -else if (v1 === v2) { -return 0 -} -else { -return 1 -} + if (v1 < v2) { + return -1 + } else if (v1 === v2) { + return 0 + } else { + return 1 + } }; MathHelper.divPow2RoundUp = function(value, power) { -return MathHelper.divRoundUp(value, 1 << power) + return MathHelper.divRoundUp(value, 1 << power) }; MathHelper.divRoundUp = function(value, denominator) { -return Math.ceil(value / denominator) + return Math.ceil(value / denominator) }; + function Matrix4x4(m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44) { -this.m11 = m11; -this.m12 = m12; -this.m13 = m13; -this.m14 = m14; -this.m21 = m21; -this.m22 = m22; -this.m23 = m23; -this.m24 = m24; -this.m31 = m31; -this.m32 = m32; -this.m33 = m33; -this.m34 = m34; -this.m41 = m41; -this.m42 = m42; -this.m43 = m43; -this.m44 = m44 + this.m11 = m11; + this.m12 = m12; + this.m13 = m13; + this.m14 = m14; + this.m21 = m21; + this.m22 = m22; + this.m23 = m23; + this.m24 = m24; + this.m31 = m31; + this.m32 = m32; + this.m33 = m33; + this.m34 = m34; + this.m41 = m41; + this.m42 = m42; + this.m43 = m43; + this.m44 = m44 } Matrix4x4.createCopy = function(m) { -return new Matrix4x4(m.m11, m.m12, m.m13, m.m14, m.m21, m.m22, m.m23, m.m24, m.m31, m.m32, m.m33, m.m34, m.m41, m.m42, m.m43, m.m44) + return new Matrix4x4(m.m11, m.m12, m.m13, m.m14, m.m21, m.m22, m.m23, m.m24, m.m31, m.m32, m.m33, m.m34, m.m41, m.m42, m.m43, m.m44) }; Matrix4x4.createIdentity = function() { -return new Matrix4x4(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) + return new Matrix4x4(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }; Matrix4x4.createScale = function(sx, sy, sz) { -return new Matrix4x4(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1) + return new Matrix4x4(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1) }; Matrix4x4.createTranslation = function(tx, ty, tz) { -return new Matrix4x4(1, 0, 0, tx, 0, 1, 0, ty, 0, 0, 1, tz, 0, 0, 0, 1) + return new Matrix4x4(1, 0, 0, tx, 0, 1, 0, ty, 0, 0, 1, tz, 0, 0, 0, 1) }; Matrix4x4.createRotationX = function(angle) { -return new Matrix4x4(1, 0, 0, 0, 0, Math.cos(angle), -Math.sin(angle), 0, 0, Math.sin(angle), Math.cos(angle), 0, 0, 0, 0, 1) + return new Matrix4x4(1, 0, 0, 0, 0, Math.cos(angle), -Math.sin(angle), 0, 0, Math.sin(angle), Math.cos(angle), 0, 0, 0, 0, 1) }; Matrix4x4.createRotationY = function(angle) { -return new Matrix4x4(Math.cos(angle), 0, Math.sin(angle), 0, 0, 1, 0, 0, -Math.sin(angle), 0, Math.cos(angle), 0, 0, 0, 0, 1) + return new Matrix4x4(Math.cos(angle), 0, Math.sin(angle), 0, 0, 1, 0, 0, -Math.sin(angle), 0, Math.cos(angle), 0, 0, 0, 0, 1) }; Matrix4x4.createRotationZ = function(angle) { -return new Matrix4x4(Math.cos(angle), -Math.sin(angle), 0, 0, Math.sin(angle), Math.cos(angle), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) + return new Matrix4x4(Math.cos(angle), -Math.sin(angle), 0, 0, Math.sin(angle), Math.cos(angle), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }; Matrix4x4.prototype = { -add: function add(m) { -return new Matrix4x4(this.m11 + m.m11, this.m12 + m.m12, this.m13 + m.m13, this.m14 + m.m14, this.m21 + m.m21, this.m22 + m.m22, this.m23 + m.m23, this.m24 + m.m24, this.m31 + m.m31, this.m32 + m.m32, this.m33 + m.m33, this.m34 + m.m34, this.m41 + m.m41, this.m42 + m.m42, this.m43 + m.m43, this.m44 + m.m44) -}, subtract: function subtract(m) { -return new Matrix4x4(this.m11 - m.m11, this.m12 - m.m12, this.m13 - m.m13, this.m14 - m.m14, this.m21 - m.m21, this.m22 - m.m22, this.m23 - m.m23, this.m24 - m.m24, this.m31 - m.m31, this.m32 - m.m32, this.m33 - m.m33, this.m34 - m.m34, this.m41 - m.m41, this.m42 - m.m42, this.m43 - m.m43, this.m44 - m.m44) -}, multiply: function multiply(m) { -return new Matrix4x4(this.m11 * m.m11 + this.m12 * m.m21 + this.m13 * m.m31 + this.m14 * m.m41, this.m11 * m.m12 + this.m12 * m.m22 + this.m13 * m.m32 + this.m14 * m.m42, this.m11 * m.m13 + this.m12 * m.m23 + this.m13 * m.m33 + this.m14 * m.m43, this.m11 * m.m14 + this.m12 * m.m24 + this.m13 * m.m34 + this.m14 * m.m44, this.m21 * m.m11 + this.m22 * m.m21 + this.m23 * m.m31 + this.m24 * m.m41, this.m21 * m.m12 + this.m22 * m.m22 + this.m23 * m.m32 + this.m24 * m.m42, this.m21 * m.m13 + this.m22 * m.m23 + this.m23 * m.m33 + this.m24 * m.m43, this.m21 * m.m14 + this.m22 * m.m24 + this.m23 * m.m34 + this.m24 * m.m44, this.m31 * m.m11 + this.m32 * m.m21 + this.m33 * m.m31 + this.m34 * m.m41, this.m31 * m.m12 + this.m32 * m.m22 + this.m33 * m.m32 + this.m34 * m.m42, this.m31 * m.m13 + this.m32 * m.m23 + this.m33 * m.m33 + this.m34 * m.m43, this.m31 * m.m14 + this.m32 * m.m24 + this.m33 * m.m34 + this.m34 * m.m44, this.m41 * m.m11 + this.m42 * m.m21 + this.m43 * m.m31 + this.m44 * m.m41, this.m41 * m.m12 + this.m42 * m.m22 + this.m43 * m.m32 + this.m44 * m.m42, this.m41 * m.m13 + this.m42 * m.m23 + this.m43 * m.m33 + this.m44 * m.m43, this.m41 * m.m14 + this.m42 * m.m24 + this.m43 * m.m34 + this.m44 * m.m44) -}, multiplyScalar: function multiplyScalar(f) { -return new Matrix4x4(this.m11 * f, this.m12 * f, this.m13 * f, this.m14 * f, this.m21 * f, this.m22 * f, this.m23 * f, this.m24 * f, this.m31 * f, this.m32 * f, this.m33 * f, this.m34 * f, this.m41 * f, this.m42 * f, this.m43 * f, this.m44 * f) -}, transpose: function transpose() { -return new Matrix4x4(this.m11, this.m21, this.m31, this.m41, this.m12, this.m22, this.m32, this.m42, this.m13, this.m23, this.m33, this.m43, this.m14, this.m24, this.m34, this.m44) -}, transformVector4: function transformVector4(v) { -return new Vector4(this.m11 * v.x + this.m12 * v.y + this.m13 * v.z + this.m14 * v.w, this.m21 * v.x + this.m22 * v.y + this.m23 * v.z + this.m24 * v.w, this.m31 * v.x + this.m32 * v.y + this.m33 * v.z + this.m34 * v.w, this.m41 * v.x + this.m42 * v.y + this.m43 * v.z + this.m44 * v.w) -}, transformVector3: function transformVector3(v) { -return new Vector3(this.m11 * v.x + this.m12 * v.y + this.m13 * v.z, this.m21 * v.x + this.m22 * v.y + this.m23 * v.z, this.m31 * v.x + this.m32 * v.y + this.m33 * v.z) -}, determinant: function determinant() { -var a, -b, -c, -d, -e, -f, -g, -h, -i, -j, -k, -l; -a = this.m11 * this.m22 - this.m12 * this.m21; -b = this.m11 * this.m23 - this.m13 * this.m21; -c = this.m11 * this.m24 - this.m14 * this.m21; -d = this.m12 * this.m23 - this.m13 * this.m22; -e = this.m12 * this.m24 - this.m14 * this.m22; -f = this.m13 * this.m24 - this.m14 * this.m23; -g = this.m31 * this.m42 - this.m32 * this.m41; -h = this.m31 * this.m43 - this.m33 * this.m41; -i = this.m31 * this.m44 - this.m34 * this.m41; -j = this.m32 * this.m43 - this.m33 * this.m42; -k = this.m32 * this.m44 - this.m34 * this.m42; -l = this.m33 * this.m44 - this.m34 * this.m43; -return a * l - b * k + c * j + d * i - e * h + f * g -}, inverse: function inverse() { -var a, -b, -c, -d, -e, -f, -g, -h, -i, -j, -k, -l, -determinant, -invD, -m11, -m12, -m13, -m14, -m21, -m22, -m23, -m24, -m31, -m32, -m33, -m34, -m41, -m42, -m43, -m44; -a = this.m11 * this.m22 - this.m12 * this.m21; -b = this.m11 * this.m23 - this.m13 * this.m21; -c = this.m11 * this.m24 - this.m14 * this.m21; -d = this.m12 * this.m23 - this.m13 * this.m22; -e = this.m12 * this.m24 - this.m14 * this.m22; -f = this.m13 * this.m24 - this.m14 * this.m23; -g = this.m31 * this.m42 - this.m32 * this.m41; -h = this.m31 * this.m43 - this.m33 * this.m41; -i = this.m31 * this.m44 - this.m34 * this.m41; -j = this.m32 * this.m43 - this.m33 * this.m42; -k = this.m32 * this.m44 - this.m34 * this.m42; -l = this.m33 * this.m44 - this.m34 * this.m43; -determinant = a * l - b * k + c * j + d * i - e * h + f * g; -if (Math.abs(determinant) < MathHelper.zeroTolerance) { -return Matrix4x4.createIdentity() -} -m11 = this.m22 * l - this.m23 * k + this.m24 * j; -m12 = -this.m12 * l + this.m13 * k - this.m14 * j; -m13 = this.m42 * f - this.m43 * e + this.m44 * d; -m14 = -this.m32 * f + this.m33 * e - this.m34 * d; -m21 = -this.m21 * l + this.m23 * i - this.m24 * h; -m22 = this.m11 * l - this.m13 * i + this.m14 * h; -m23 = -this.m41 * f + this.m43 * c - this.m44 * b; -m24 = this.m31 * f - this.m33 * c + this.m34 * b; -m31 = this.m21 * k - this.m22 * i + this.m24 * g; -m32 = -this.m11 * k + this.m12 * i - this.m14 * g; -m33 = this.m41 * e - this.m42 * c + this.m44 * a; -m34 = -this.m31 * e + this.m32 * c - this.m34 * a; -m41 = -this.m21 * j + this.m22 * h - this.m23 * g; -m42 = this.m11 * j - this.m12 * h + this.m13 * g; -m43 = -this.m41 * d + this.m42 * b - this.m43 * a; -m44 = this.m31 * d - this.m32 * b + this.m33 * a; -invD = 1.0 / determinant; -return new Matrix4x4(m11 * invD, m12 * invD, m13 * invD, m14 * invD, m21 * invD, m22 * invD, m23 * invD, m24 * invD, m31 * invD, m32 * invD, m33 * invD, m34 * invD, m41 * invD, m42 * invD, m43 * invD, m44 * invD) -}, toString: function toString() { -return this.m11 + ", " + this.m12 + ", " + this.m13 + ", " + this.m14 + "\n" + this.m21 + ", " + this.m22 + ", " + this.m23 + ", " + this.m24 + "\n" + this.m31 + ", " + this.m32 + ", " + this.m33 + ", " + this.m34 + "\n" + this.m41 + ", " + this.m42 + ", " + this.m43 + ", " + this.m44 + "\n" -}, pullToZero: function pullToZero() { -if (Math.abs(this.m11) < MathHelper.zeroTolerance) { -this.m11 = 0.0 -} -if (Math.abs(this.m12) < MathHelper.zeroTolerance) { -this.m12 = 0.0 -} -if (Math.abs(this.m13) < MathHelper.zeroTolerance) { -this.m13 = 0.0 -} -if (Math.abs(this.m14) < MathHelper.zeroTolerance) { -this.m14 = 0.0 -} -if (Math.abs(this.m21) < MathHelper.zeroTolerance) { -this.m21 = 0.0 -} -if (Math.abs(this.m22) < MathHelper.zeroTolerance) { -this.m22 = 0.0 -} -if (Math.abs(this.m23) < MathHelper.zeroTolerance) { -this.m23 = 0.0 -} -if (Math.abs(this.m24) < MathHelper.zeroTolerance) { -this.m24 = 0.0 -} -if (Math.abs(this.m31) < MathHelper.zeroTolerance) { -this.m31 = 0.0 -} -if (Math.abs(this.m32) < MathHelper.zeroTolerance) { -this.m32 = 0.0 -} -if (Math.abs(this.m33) < MathHelper.zeroTolerance) { -this.m33 = 0.0 -} -if (Math.abs(this.m34) < MathHelper.zeroTolerance) { -this.m34 = 0.0 -} -if (Math.abs(this.m41) < MathHelper.zeroTolerance) { -this.m41 = 0.0 -} -if (Math.abs(this.m42) < MathHelper.zeroTolerance) { -this.m42 = 0.0 -} -if (Math.abs(this.m43) < MathHelper.zeroTolerance) { -this.m43 = 0.0 -} -if (Math.abs(this.m44) < MathHelper.zeroTolerance) { -this.m44 = 0.0 -} -}, flattenColumnMajor: function flattenColumnMajor() { -return [this.m11, this.m21, this.m31, this.m41, this.m12, this.m22, this.m32, this.m42, this.m13, this.m23, this.m33, this.m43, this.m14, this.m24, this.m34, this.m44] -}, flattenRowMajor: function flattenRowMajor() { -return [this.m11, this.m12, this.m13, this.m14, this.m21, this.m22, this.m23, this.m24, this.m31, this.m32, this.m33, this.m34, this.m41, this.m42, this.m43, this.m44] -} -}; + add: function add(m) { + return new Matrix4x4(this.m11 + m.m11, this.m12 + m.m12, this.m13 + m.m13, this.m14 + m.m14, this.m21 + m.m21, this.m22 + m.m22, this.m23 + m.m23, this.m24 + m.m24, this.m31 + m.m31, this.m32 + m.m32, this.m33 + m.m33, this.m34 + m.m34, this.m41 + m.m41, this.m42 + m.m42, this.m43 + m.m43, this.m44 + m.m44) + }, + subtract: function subtract(m) { + return new Matrix4x4(this.m11 - m.m11, this.m12 - m.m12, this.m13 - m.m13, this.m14 - m.m14, this.m21 - m.m21, this.m22 - m.m22, this.m23 - m.m23, this.m24 - m.m24, this.m31 - m.m31, this.m32 - m.m32, this.m33 - m.m33, this.m34 - m.m34, this.m41 - m.m41, this.m42 - m.m42, this.m43 - m.m43, this.m44 - m.m44) + }, + multiply: function multiply(m) { + return new Matrix4x4(this.m11 * m.m11 + this.m12 * m.m21 + this.m13 * m.m31 + this.m14 * m.m41, this.m11 * m.m12 + this.m12 * m.m22 + this.m13 * m.m32 + this.m14 * m.m42, this.m11 * m.m13 + this.m12 * m.m23 + this.m13 * m.m33 + this.m14 * m.m43, this.m11 * m.m14 + this.m12 * m.m24 + this.m13 * m.m34 + this.m14 * m.m44, this.m21 * m.m11 + this.m22 * m.m21 + this.m23 * m.m31 + this.m24 * m.m41, this.m21 * m.m12 + this.m22 * m.m22 + this.m23 * m.m32 + this.m24 * m.m42, this.m21 * m.m13 + this.m22 * m.m23 + this.m23 * m.m33 + this.m24 * m.m43, this.m21 * m.m14 + this.m22 * m.m24 + this.m23 * m.m34 + this.m24 * m.m44, this.m31 * m.m11 + this.m32 * m.m21 + this.m33 * m.m31 + this.m34 * m.m41, this.m31 * m.m12 + this.m32 * m.m22 + this.m33 * m.m32 + this.m34 * m.m42, this.m31 * m.m13 + this.m32 * m.m23 + this.m33 * m.m33 + this.m34 * m.m43, this.m31 * m.m14 + this.m32 * m.m24 + this.m33 * m.m34 + this.m34 * m.m44, this.m41 * m.m11 + this.m42 * m.m21 + this.m43 * m.m31 + this.m44 * m.m41, this.m41 * m.m12 + this.m42 * m.m22 + this.m43 * m.m32 + this.m44 * m.m42, this.m41 * m.m13 + this.m42 * m.m23 + this.m43 * m.m33 + this.m44 * m.m43, this.m41 * m.m14 + this.m42 * m.m24 + this.m43 * m.m34 + this.m44 * m.m44) + }, + multiplyScalar: function multiplyScalar(f) { + return new Matrix4x4(this.m11 * f, this.m12 * f, this.m13 * f, this.m14 * f, this.m21 * f, this.m22 * f, this.m23 * f, this.m24 * f, this.m31 * f, this.m32 * f, this.m33 * f, this.m34 * f, this.m41 * f, this.m42 * f, this.m43 * f, this.m44 * f) + }, + transpose: function transpose() { + return new Matrix4x4(this.m11, this.m21, this.m31, this.m41, this.m12, this.m22, this.m32, this.m42, this.m13, this.m23, this.m33, this.m43, this.m14, this.m24, this.m34, this.m44) + }, + transformVector4: function transformVector4(v) { + return new Vector4(this.m11 * v.x + this.m12 * v.y + this.m13 * v.z + this.m14 * v.w, this.m21 * v.x + this.m22 * v.y + this.m23 * v.z + this.m24 * v.w, this.m31 * v.x + this.m32 * v.y + this.m33 * v.z + this.m34 * v.w, this.m41 * v.x + this.m42 * v.y + this.m43 * v.z + this.m44 * v.w) + }, + transformVector3: function transformVector3(v) { + return new Vector3(this.m11 * v.x + this.m12 * v.y + this.m13 * v.z, this.m21 * v.x + this.m22 * v.y + this.m23 * v.z, this.m31 * v.x + this.m32 * v.y + this.m33 * v.z) + }, + determinant: function determinant() { + var a, + b, + c, + d, + e, + f, + g, + h, + i, + j, + k, + l; + a = this.m11 * this.m22 - this.m12 * this.m21; + b = this.m11 * this.m23 - this.m13 * this.m21; + c = this.m11 * this.m24 - this.m14 * this.m21; + d = this.m12 * this.m23 - this.m13 * this.m22; + e = this.m12 * this.m24 - this.m14 * this.m22; + f = this.m13 * this.m24 - this.m14 * this.m23; + g = this.m31 * this.m42 - this.m32 * this.m41; + h = this.m31 * this.m43 - this.m33 * this.m41; + i = this.m31 * this.m44 - this.m34 * this.m41; + j = this.m32 * this.m43 - this.m33 * this.m42; + k = this.m32 * this.m44 - this.m34 * this.m42; + l = this.m33 * this.m44 - this.m34 * this.m43; + return a * l - b * k + c * j + d * i - e * h + f * g + }, + inverse: function inverse() { + var a, + b, + c, + d, + e, + f, + g, + h, + i, + j, + k, + l, + determinant, + invD, + m11, + m12, + m13, + m14, + m21, + m22, + m23, + m24, + m31, + m32, + m33, + m34, + m41, + m42, + m43, + m44; + a = this.m11 * this.m22 - this.m12 * this.m21; + b = this.m11 * this.m23 - this.m13 * this.m21; + c = this.m11 * this.m24 - this.m14 * this.m21; + d = this.m12 * this.m23 - this.m13 * this.m22; + e = this.m12 * this.m24 - this.m14 * this.m22; + f = this.m13 * this.m24 - this.m14 * this.m23; + g = this.m31 * this.m42 - this.m32 * this.m41; + h = this.m31 * this.m43 - this.m33 * this.m41; + i = this.m31 * this.m44 - this.m34 * this.m41; + j = this.m32 * this.m43 - this.m33 * this.m42; + k = this.m32 * this.m44 - this.m34 * this.m42; + l = this.m33 * this.m44 - this.m34 * this.m43; + determinant = a * l - b * k + c * j + d * i - e * h + f * g; + if (Math.abs(determinant) < MathHelper.zeroTolerance) { + return Matrix4x4.createIdentity() + } + m11 = this.m22 * l - this.m23 * k + this.m24 * j; + m12 = -this.m12 * l + this.m13 * k - this.m14 * j; + m13 = this.m42 * f - this.m43 * e + this.m44 * d; + m14 = -this.m32 * f + this.m33 * e - this.m34 * d; + m21 = -this.m21 * l + this.m23 * i - this.m24 * h; + m22 = this.m11 * l - this.m13 * i + this.m14 * h; + m23 = -this.m41 * f + this.m43 * c - this.m44 * b; + m24 = this.m31 * f - this.m33 * c + this.m34 * b; + m31 = this.m21 * k - this.m22 * i + this.m24 * g; + m32 = -this.m11 * k + this.m12 * i - this.m14 * g; + m33 = this.m41 * e - this.m42 * c + this.m44 * a; + m34 = -this.m31 * e + this.m32 * c - this.m34 * a; + m41 = -this.m21 * j + this.m22 * h - this.m23 * g; + m42 = this.m11 * j - this.m12 * h + this.m13 * g; + m43 = -this.m41 * d + this.m42 * b - this.m43 * a; + m44 = this.m31 * d - this.m32 * b + this.m33 * a; + invD = 1.0 / determinant; + return new Matrix4x4(m11 * invD, m12 * invD, m13 * invD, m14 * invD, m21 * invD, m22 * invD, m23 * invD, m24 * invD, m31 * invD, m32 * invD, m33 * invD, m34 * invD, m41 * invD, m42 * invD, m43 * invD, m44 * invD) + }, + toString: function toString() { + return this.m11 + ", " + this.m12 + ", " + this.m13 + ", " + this.m14 + "\n" + this.m21 + ", " + this.m22 + ", " + this.m23 + ", " + this.m24 + "\n" + this.m31 + ", " + this.m32 + ", " + this.m33 + ", " + this.m34 + "\n" + this.m41 + ", " + this.m42 + ", " + this.m43 + ", " + this.m44 + "\n" + }, + pullToZero: function pullToZero() { + if (Math.abs(this.m11) < MathHelper.zeroTolerance) { + this.m11 = 0.0 + } + if (Math.abs(this.m12) < MathHelper.zeroTolerance) { + this.m12 = 0.0 + } + if (Math.abs(this.m13) < MathHelper.zeroTolerance) { + this.m13 = 0.0 + } + if (Math.abs(this.m14) < MathHelper.zeroTolerance) { + this.m14 = 0.0 + } + if (Math.abs(this.m21) < MathHelper.zeroTolerance) { + this.m21 = 0.0 + } + if (Math.abs(this.m22) < MathHelper.zeroTolerance) { + this.m22 = 0.0 + } + if (Math.abs(this.m23) < MathHelper.zeroTolerance) { + this.m23 = 0.0 + } + if (Math.abs(this.m24) < MathHelper.zeroTolerance) { + this.m24 = 0.0 + } + if (Math.abs(this.m31) < MathHelper.zeroTolerance) { + this.m31 = 0.0 + } + if (Math.abs(this.m32) < MathHelper.zeroTolerance) { + this.m32 = 0.0 + } + if (Math.abs(this.m33) < MathHelper.zeroTolerance) { + this.m33 = 0.0 + } + if (Math.abs(this.m34) < MathHelper.zeroTolerance) { + this.m34 = 0.0 + } + if (Math.abs(this.m41) < MathHelper.zeroTolerance) { + this.m41 = 0.0 + } + if (Math.abs(this.m42) < MathHelper.zeroTolerance) { + this.m42 = 0.0 + } + if (Math.abs(this.m43) < MathHelper.zeroTolerance) { + this.m43 = 0.0 + } + if (Math.abs(this.m44) < MathHelper.zeroTolerance) { + this.m44 = 0.0 + } + }, + flattenColumnMajor: function flattenColumnMajor() { + return [this.m11, this.m21, this.m31, this.m41, this.m12, this.m22, this.m32, this.m42, this.m13, this.m23, this.m33, this.m43, this.m14, this.m24, this.m34, this.m44] + }, + flattenRowMajor: function flattenRowMajor() { + return [this.m11, this.m12, this.m13, this.m14, this.m21, this.m22, this.m23, this.m24, this.m31, this.m32, this.m33, this.m34, this.m41, this.m42, this.m43, this.m44] + } +}; + function Plane(a, b, c, d, point) { -this.a = a; -this.b = b; -this.c = c; -this.d = d; -this.normal = new Vector3(this.a, this.b, this.c); -this.point = point -} -; + this.a = a; + this.b = b; + this.c = c; + this.d = d; + this.normal = new Vector3(this.a, this.b, this.c); + this.point = point +}; Plane.createFromPoints = function(p0, p1, p2) { -var u=p1.subtract(p0); -var v=p2.subtract(p0); -var n=u.cross(v); -n = n.normalize(); -var d=-1 * (n.x * p0.x + n.y * p0.y + n.z * p0.z); -return new Plane(n.x, n.y, n.z, d, null) + var u = p1.subtract(p0); + var v = p2.subtract(p0); + var n = u.cross(v); + n = n.normalize(); + var d = -1 * (n.x * p0.x + n.y * p0.y + n.z * p0.z); + return new Plane(n.x, n.y, n.z, d, null) }; Plane.createFromPointAndNormal = function(point, normal) { -var d=-1 * (normal.x * point.x + normal.y * point.y + normal.z * point.z); -return new Plane(normal.x, normal.y, normal.z, d, point) + var d = -1 * (normal.x * point.x + normal.y * point.y + normal.z * point.z); + return new Plane(normal.x, normal.y, normal.z, d, point) }; Plane.intersectWithRay = function(ray, plane) { -if (plane.point === null) { -throw'requires plane.point to not equal null'; -} -var dDotn=ray.direction.dot(plane.normal); -if (MathHelper.isZero(dDotn)) { -return null -} -var distance=plane.point.subtract(ray.origin).dot(plane.normal) / ray.direction.dot(plane.normal); -if (distance <= 0) { -return null -} -return ray.origin.add(ray.direction.multiplyScalar(distance)) + if (plane.point === null) { + throw 'requires plane.point to not equal null'; + } + var dDotn = ray.direction.dot(plane.normal); + if (MathHelper.isZero(dDotn)) { + return null + } + var distance = plane.point.subtract(ray.origin).dot(plane.normal) / ray.direction.dot(plane.normal); + if (distance <= 0) { + return null + } + return ray.origin.add(ray.direction.multiplyScalar(distance)) }; Plane.prototype = { -transformNormal: function transformNormal(transform) { -var m=transform.inverse().transpose(); -var n=m.transformVector3(this.normal); -return new Vector3(n.x, n.y, n.z) -}, toString: function toString() { -return 'A:' + this.a + ', B:' + this.b + ', C:' + this.c + ', D:' + this.d -} -}; + transformNormal: function transformNormal(transform) { + var m = transform.inverse().transpose(); + var n = m.transformVector3(this.normal); + return new Vector3(n.x, n.y, n.z) + }, + toString: function toString() { + return 'A:' + this.a + ', B:' + this.b + ', C:' + this.c + ', D:' + this.d + } +}; + function Quaternion(w, x, y, z) { -this.w = w; -this.x = x; -this.y = y; -this.z = z + this.w = w; + this.x = x; + this.y = y; + this.z = z } Quaternion.createIdentity = function() { -return new Quaternion(1, 0, 0, 0) + return new Quaternion(1, 0, 0, 0) }; Quaternion.fromRotationMatrix = function(m) { -var trace; -var temp; -var result; -var largestIndex; -result = new Quaternion(0, 0, 0, 0); -trace = m.m11 + m.m22 + m.m33; -if (trace > MathHelper.zeroTolerance) { -result.w = Math.sqrt(trace + 1) * 0.5; -temp = 1.0 / (4 * result.w); -result.x = (m.m32 - m.m23) * temp; -result.y = (m.m13 - m.m31) * temp; -result.z = (m.m21 - m.m12) * temp -} -else { -largestIndex = 0; -if (m.m22 > m.m11) { -largestIndex = 1; -if (m.m33 > m.m22) { -largestIndex = 2 -} -} -else if (m.m33 > m.m11) { -largestIndex = 2 -} -switch (largestIndex) { -case 0: -result.x = 0.5 * Math.sqrt(m.m11 - m.m22 - m.m33 + 1); -temp = 1.0 / (4 * result.x); -result.w = (m.m32 - m.m23) * temp; -result.y = (m.m12 + m.m21) * temp; -result.z = (m.m13 + m.m31) * temp; -break; -case 1: -result.y = 0.5 * Math.sqrt(m.m22 - m.m11 - m.m33 + 1); -temp = 1.0 / (4 * result.y); -result.w = (m.m13 - m.m31) * temp; -result.x = (m.m12 + m.m21) * temp; -result.z = (m.m23 + m.m32) * temp; -break; -case 2: -result.z = 0.5 * Math.sqrt(m.m33 - m.m11 - m.m22 + 1); -temp = 1.0 / (4 * result.z); -result.w = (m.m21 - m.m12) * temp; -result.x = (m.m13 + m.m31) * temp; -result.y = (m.m32 + m.m23) * temp; -break -} -} -return result + var trace; + var temp; + var result; + var largestIndex; + result = new Quaternion(0, 0, 0, 0); + trace = m.m11 + m.m22 + m.m33; + if (trace > MathHelper.zeroTolerance) { + result.w = Math.sqrt(trace + 1) * 0.5; + temp = 1.0 / (4 * result.w); + result.x = (m.m32 - m.m23) * temp; + result.y = (m.m13 - m.m31) * temp; + result.z = (m.m21 - m.m12) * temp + } else { + largestIndex = 0; + if (m.m22 > m.m11) { + largestIndex = 1; + if (m.m33 > m.m22) { + largestIndex = 2 + } + } else if (m.m33 > m.m11) { + largestIndex = 2 + } + switch (largestIndex) { + case 0: + result.x = 0.5 * Math.sqrt(m.m11 - m.m22 - m.m33 + 1); + temp = 1.0 / (4 * result.x); + result.w = (m.m32 - m.m23) * temp; + result.y = (m.m12 + m.m21) * temp; + result.z = (m.m13 + m.m31) * temp; + break; + case 1: + result.y = 0.5 * Math.sqrt(m.m22 - m.m11 - m.m33 + 1); + temp = 1.0 / (4 * result.y); + result.w = (m.m13 - m.m31) * temp; + result.x = (m.m12 + m.m21) * temp; + result.z = (m.m23 + m.m32) * temp; + break; + case 2: + result.z = 0.5 * Math.sqrt(m.m33 - m.m11 - m.m22 + 1); + temp = 1.0 / (4 * result.z); + result.w = (m.m21 - m.m12) * temp; + result.x = (m.m13 + m.m31) * temp; + result.y = (m.m32 + m.m23) * temp; + break + } + } + return result }; Quaternion.fromAxisAngle = function(axis, angle) { -var halfAngle, -s; -halfAngle = 0.5 * angle; -s = Math.sin(halfAngle); -return new Quaternion(Math.cos(halfAngle), axis.x * s, axis.y * s, axis.z * s) + var halfAngle, + s; + halfAngle = 0.5 * angle; + s = Math.sin(halfAngle); + return new Quaternion(Math.cos(halfAngle), axis.x * s, axis.y * s, axis.z * s) }; Quaternion.slerp = function(t, source, target) { -var cos, -angle, -sin, -invSin, -a, -b; -if (t === 0.0) { -return source -} -if (t >= 1.0) { -return target -} -cos = source.dot(target); -angle = Math.acos(cos); -if (Math.abs(angle) >= MathHelper.zeroTolerance) { -sin = Math.sin(angle); -invSin = 1.0 / sin; -a = Math.sin((1.0 - t) * angle) * invSin; -b = Math.sin(t * angle) * invSin; -return source.multiplyScalar(a).add(target.multiplyScalar(b)) -} -return source + var cos, + angle, + sin, + invSin, + a, + b; + if (t === 0.0) { + return source + } + if (t >= 1.0) { + return target + } + cos = source.dot(target); + angle = Math.acos(cos); + if (Math.abs(angle) >= MathHelper.zeroTolerance) { + sin = Math.sin(angle); + invSin = 1.0 / sin; + a = Math.sin((1.0 - t) * angle) * invSin; + b = Math.sin(t * angle) * invSin; + return source.multiplyScalar(a).add(target.multiplyScalar(b)) + } + return source }; Quaternion.prototype = { -dot: function dot(q) { -return this.w * q.w + this.x * q.x + this.y * q.y + this.z * q.z -}, length: function length() { -return Math.sqrt(this.w * this.w + this.x * this.x + this.y * this.y + this.z * this.z) -}, normalize: function normalize() { -var length, -inverseLength; -length = this.length(); -if (length < MathHelper.zeroTolerance) { -return new Quaternion(0.0, 0.0, 0.0, 0.0) -} -inverseLength = 1.0 / length; -return new Quaternion(this.w * inverseLength, this.x * inverseLength, this.y * inverseLength, this.z * inverseLength) -}, inverse: function inverse() { -var norm, -invNorm; -norm = this.w * this.w + this.x * this.x + this.y * this.y * this.z * this.z; -if (Math.abs(norm) > MathHelper.zeroTolerance) { -invNorm = 1.0 / norm; -return new Quaternion(this.w * invNorm, -this.x * invNorm, -this.y * invNorm, -this.z * invNorm) -} -return new Quaternion(0.0, 0.0, 0.0, 0.0) -}, conjugate: function conjugate() { -return new Quaternion(this.w, -this.x, -this.y, -this.z) -}, transform: function transform(v) { -var p, -d, -c; -d = 2.0 * (this.x * v.x + this.y * v.y + this.z * v.z); -c = 2.0 * this.w; -p = c * this.w - 1.0; -return new Vector3(p * v.x + d * this.x + c * (this.y * v.z - this.z * v.y), p * v.y + d * this.y + c * (this.z * v.x - this.x * v.z), p * v.z + d * this.z + c * (this.x * v.y - this.y * v.x)) -}, add: function add(q) { -return new Quaternion(this.w + q.w, this.x + q.x, this.y + q.y, this.z + q.z) -}, multiply: function multiply(q) { -return new Quaternion(this.w * q.w - this.x * q.x - this.y * q.y - this.z * q.z, this.y * q.z - this.z * q.y + this.w * q.x + q.w * this.x, this.z * q.x - this.x * q.z + this.w * q.y + q.w * this.y, this.x * q.y - this.y * q.x + this.w * q.z + q.w * this.z) -}, multiplyScalar: function multiplyScalar(f) { -return new Quaternion(this.w * f, this.x * f, this.y * f, this.z * f) -}, toRotationMatrix: function toRotationMatrix() { -var x, -y, -z, -wx, -wy, -wz, -xx, -xy, -xz, -yy, -yz, -zz; -x = 2.0 * this.x; -y = 2.0 * this.y; -z = 2.0 * this.z; -wx = x * this.w; -wy = y * this.w; -wz = z * this.w; -xx = x * this.x; -xy = y * this.x; -xz = z * this.x; -yy = y * this.y; -yz = z * this.y; -zz = z * this.z; -return new Matrix4x4(1.0 - (yy + zz), xy - wz, xz + wy, 0, xy + wz, 1.0 - (xx + zz), yz - wx, 0, xz - wy, yz + wx, 1.0 - (xx + yy), 0, 0, 0, 0, 1) -}, toAxisAngle: function toAxisAngle() { -var lengthSquared, -inverseLength; -lengthSquared = this.x * this.x + this.y * this.y + this.z * this.z; -if (lengthSquared > MathHelper.zeroTolerance) { -inverseLength = MathHelper.invSqrt(lengthSquared); -return new Vector4(this.x * inverseLength, this.y * inverseLength, this.z * inverseLength, 2.0 * Math.acos(this.w)) -} -return new Vector4(1, 0, 0, 0) -}, toString: function toString() { -return '[' + this.w + ', ' + this.x + ', ' + this.y + ', ' + this.z + ']' -} -}; + dot: function dot(q) { + return this.w * q.w + this.x * q.x + this.y * q.y + this.z * q.z + }, + length: function length() { + return Math.sqrt(this.w * this.w + this.x * this.x + this.y * this.y + this.z * this.z) + }, + normalize: function normalize() { + var length, + inverseLength; + length = this.length(); + if (length < MathHelper.zeroTolerance) { + return new Quaternion(0.0, 0.0, 0.0, 0.0) + } + inverseLength = 1.0 / length; + return new Quaternion(this.w * inverseLength, this.x * inverseLength, this.y * inverseLength, this.z * inverseLength) + }, + inverse: function inverse() { + var norm, + invNorm; + norm = this.w * this.w + this.x * this.x + this.y * this.y * this.z * this.z; + if (Math.abs(norm) > MathHelper.zeroTolerance) { + invNorm = 1.0 / norm; + return new Quaternion(this.w * invNorm, -this.x * invNorm, -this.y * invNorm, -this.z * invNorm) + } + return new Quaternion(0.0, 0.0, 0.0, 0.0) + }, + conjugate: function conjugate() { + return new Quaternion(this.w, -this.x, -this.y, -this.z) + }, + transform: function transform(v) { + var p, + d, + c; + d = 2.0 * (this.x * v.x + this.y * v.y + this.z * v.z); + c = 2.0 * this.w; + p = c * this.w - 1.0; + return new Vector3(p * v.x + d * this.x + c * (this.y * v.z - this.z * v.y), p * v.y + d * this.y + c * (this.z * v.x - this.x * v.z), p * v.z + d * this.z + c * (this.x * v.y - this.y * v.x)) + }, + add: function add(q) { + return new Quaternion(this.w + q.w, this.x + q.x, this.y + q.y, this.z + q.z) + }, + multiply: function multiply(q) { + return new Quaternion(this.w * q.w - this.x * q.x - this.y * q.y - this.z * q.z, this.y * q.z - this.z * q.y + this.w * q.x + q.w * this.x, this.z * q.x - this.x * q.z + this.w * q.y + q.w * this.y, this.x * q.y - this.y * q.x + this.w * q.z + q.w * this.z) + }, + multiplyScalar: function multiplyScalar(f) { + return new Quaternion(this.w * f, this.x * f, this.y * f, this.z * f) + }, + toRotationMatrix: function toRotationMatrix() { + var x, + y, + z, + wx, + wy, + wz, + xx, + xy, + xz, + yy, + yz, + zz; + x = 2.0 * this.x; + y = 2.0 * this.y; + z = 2.0 * this.z; + wx = x * this.w; + wy = y * this.w; + wz = z * this.w; + xx = x * this.x; + xy = y * this.x; + xz = z * this.x; + yy = y * this.y; + yz = z * this.y; + zz = z * this.z; + return new Matrix4x4(1.0 - (yy + zz), xy - wz, xz + wy, 0, xy + wz, 1.0 - (xx + zz), yz - wx, 0, xz - wy, yz + wx, 1.0 - (xx + yy), 0, 0, 0, 0, 1) + }, + toAxisAngle: function toAxisAngle() { + var lengthSquared, + inverseLength; + lengthSquared = this.x * this.x + this.y * this.y + this.z * this.z; + if (lengthSquared > MathHelper.zeroTolerance) { + inverseLength = MathHelper.invSqrt(lengthSquared); + return new Vector4(this.x * inverseLength, this.y * inverseLength, this.z * inverseLength, 2.0 * Math.acos(this.w)) + } + return new Vector4(1, 0, 0, 0) + }, + toString: function toString() { + return '[' + this.w + ', ' + this.x + ', ' + this.y + ', ' + this.z + ']' + } +}; + function Ray(origin, direction) { -this.origin = origin; -this.direction = direction -} -; + this.origin = origin; + this.direction = direction +}; + function Rectangle(x, y, width, height) { -this.x = x; -this.y = y; -this.width = width; -this.height = height + this.x = x; + this.y = y; + this.width = width; + this.height = height } Rectangle.prototype = { -intersect: function intersect(rect) { -if (!this.intersectsWith(rect)) { -this.x = this.y = this.width = this.height = 0 -} -else { -var num=Math.max(this.x, rect.x); -var num2=Math.max(this.y, rect.y); -this.width = Math.max((Math.min((this.x + this.width), (rect.x + rect.width)) - num), 0.0); -this.height = Math.max((Math.min((this.y + this.height), (rect.y + rect.height)) - num2), 0.0); -this.x = num; -this.y = num2 -} -}, intersectsWith: function intersectsWith(rect) { -if ((this.width < 0.0) || (rect.width < 0.0)) { -return false -} -return ((((rect.x <= (this.x + this.width)) && ((rect.x + rect.width) >= this.x)) && (rect.y <= (this.y + this.height))) && ((rect.y + rect.height) >= this.y)) -}, getLeft: function getLeft() { -return this.x -}, getRight: function getRight() { -return this.x + this.width -}, getTop: function getTop() { -return this.y -}, getBottom: function getBottom() { -return this.y + this.height -} -}; + intersect: function intersect(rect) { + if (!this.intersectsWith(rect)) { + this.x = this.y = this.width = this.height = 0 + } else { + var num = Math.max(this.x, rect.x); + var num2 = Math.max(this.y, rect.y); + this.width = Math.max((Math.min((this.x + this.width), (rect.x + rect.width)) - num), 0.0); + this.height = Math.max((Math.min((this.y + this.height), (rect.y + rect.height)) - num2), 0.0); + this.x = num; + this.y = num2 + } + }, + intersectsWith: function intersectsWith(rect) { + if ((this.width < 0.0) || (rect.width < 0.0)) { + return false + } + return ((((rect.x <= (this.x + this.width)) && ((rect.x + rect.width) >= this.x)) && (rect.y <= (this.y + this.height))) && ((rect.y + rect.height) >= this.y)) + }, + getLeft: function getLeft() { + return this.x + }, + getRight: function getRight() { + return this.x + this.width + }, + getTop: function getTop() { + return this.y + }, + getBottom: function getBottom() { + return this.y + this.height + } +}; + function Vector2(x, y) { -this.x = x; -this.y = y + this.x = x; + this.y = y } Vector2.clone = function(v) { -return new Vector2(v.x, v.y) + return new Vector2(v.x, v.y) }; Vector2.prototype = { -dot: function dot(v) { -return this.x * v.x + this.y * v.y -}, perp: function perp() { -return new Vector2(this.y, -this.x) -}, normalize: function normalize() { -var length, -inverseLength; -length = this.length(); -if (length < MathHelper.zeroTolerance) { -return new Vector2(0.0, 0.0) -} -inverseLength = 1.0 / length; -return new Vector2(this.x * inverseLength, this.y * inverseLength) -}, length: function length() { -return Math.sqrt(this.x * this.x + this.y * this.y) -}, lengthSquared: function lengthSquared() { -return this.x * this.x + this.y * this.y -}, add: function add(v) { -return new Vector2(this.x + v.x, this.y + v.y) -}, subtract: function subtract(v) { -return new Vector2(this.x - v.x, this.y - v.y) -}, multiplyScalar: function multiplyScalar(f) { -return new Vector2(this.x * f, this.y * f) -}, equals: function equals(v) { -return this.x === v.x && this.y === v.y -}, lerp: function lerp(other, alpha) { -return new Vector2(this.x + alpha * (other.x - this.x), this.y + alpha * (other.y - this.y)) -}, toString: function toString() { -return '[' + this.x + ', ' + this.y + ']' -} -}; + dot: function dot(v) { + return this.x * v.x + this.y * v.y + }, + perp: function perp() { + return new Vector2(this.y, -this.x) + }, + normalize: function normalize() { + var length, + inverseLength; + length = this.length(); + if (length < MathHelper.zeroTolerance) { + return new Vector2(0.0, 0.0) + } + inverseLength = 1.0 / length; + return new Vector2(this.x * inverseLength, this.y * inverseLength) + }, + length: function length() { + return Math.sqrt(this.x * this.x + this.y * this.y) + }, + lengthSquared: function lengthSquared() { + return this.x * this.x + this.y * this.y + }, + add: function add(v) { + return new Vector2(this.x + v.x, this.y + v.y) + }, + subtract: function subtract(v) { + return new Vector2(this.x - v.x, this.y - v.y) + }, + multiplyScalar: function multiplyScalar(f) { + return new Vector2(this.x * f, this.y * f) + }, + equals: function equals(v) { + return this.x === v.x && this.y === v.y + }, + lerp: function lerp(other, alpha) { + return new Vector2(this.x + alpha * (other.x - this.x), this.y + alpha * (other.y - this.y)) + }, + toString: function toString() { + return '[' + this.x + ', ' + this.y + ']' + } +}; + function Vector3(x, y, z) { -this.x = x; -this.y = y; -this.z = z + this.x = x; + this.y = y; + this.z = z } Vector3.createFromVector2 = function(v, z) { -return new Vector3(v.x, v.y, z) + return new Vector3(v.x, v.y, z) }; Vector3.clone = function(v) { -return new Vector3(v.x, v.y, v.z) + return new Vector3(v.x, v.y, v.z) }; Vector3.prototype = { -dot: function dot(v) { -return this.x * v.x + this.y * v.y + this.z * v.z -}, normalize: function normalize() { -var length, -inverseLength; -length = this.length(); -if (length < MathHelper.zeroTolerance) { -return new Vector3(0.0, 0.0, 0.0) -} -inverseLength = 1.0 / length; -return new Vector3(this.x * inverseLength, this.y * inverseLength, this.z * inverseLength) -}, cross: function cross(v) { -return new Vector3(this.y * v.z - this.z * v.y, this.z * v.x - this.x * v.z, this.x * v.y - this.y * v.x) -}, length: function length() { -return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z) -}, lengthSquared: function lengthSquared() { -return this.x * this.x + this.y * this.y + this.z * this.z -}, add: function add(v) { -return new Vector3(this.x + v.x, this.y + v.y, this.z + v.z) -}, subtract: function subtract(v) { -return new Vector3(this.x - v.x, this.y - v.y, this.z - v.z) -}, multiplyScalar: function multiplyScalar(f) { -return new Vector3(this.x * f, this.y * f, this.z * f) -}, equals: function equals(v) { -return this.x === v.x && this.y === v.y && this.z === v.z -}, lerp: function lerp(other, alpha) { -return new Vector3(this.x + alpha * (other.x - this.x), this.y + alpha * (other.y - this.y), this.z + alpha * (other.z - this.z)) -}, toString: function toString() { -return '[' + this.x + ', ' + this.y + ', ' + this.z + ']' -} -}; + dot: function dot(v) { + return this.x * v.x + this.y * v.y + this.z * v.z + }, + normalize: function normalize() { + var length, + inverseLength; + length = this.length(); + if (length < MathHelper.zeroTolerance) { + return new Vector3(0.0, 0.0, 0.0) + } + inverseLength = 1.0 / length; + return new Vector3(this.x * inverseLength, this.y * inverseLength, this.z * inverseLength) + }, + cross: function cross(v) { + return new Vector3(this.y * v.z - this.z * v.y, this.z * v.x - this.x * v.z, this.x * v.y - this.y * v.x) + }, + length: function length() { + return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z) + }, + lengthSquared: function lengthSquared() { + return this.x * this.x + this.y * this.y + this.z * this.z + }, + add: function add(v) { + return new Vector3(this.x + v.x, this.y + v.y, this.z + v.z) + }, + subtract: function subtract(v) { + return new Vector3(this.x - v.x, this.y - v.y, this.z - v.z) + }, + multiplyScalar: function multiplyScalar(f) { + return new Vector3(this.x * f, this.y * f, this.z * f) + }, + equals: function equals(v) { + return this.x === v.x && this.y === v.y && this.z === v.z + }, + lerp: function lerp(other, alpha) { + return new Vector3(this.x + alpha * (other.x - this.x), this.y + alpha * (other.y - this.y), this.z + alpha * (other.z - this.z)) + }, + toString: function toString() { + return '[' + this.x + ', ' + this.y + ', ' + this.z + ']' + } +}; + function Vector4(x, y, z, w) { -this.x = x; -this.y = y; -this.z = z; -this.w = w + this.x = x; + this.y = y; + this.z = z; + this.w = w } Vector4.createFromVector3 = function(v) { -return new Vector4(v.x, v.y, v.z, 1) + return new Vector4(v.x, v.y, v.z, 1) }; Vector4.prototype = { -dot: function dot(v) { -return this.x * v.x + this.y * v.y + this.z * v.z + this.w * v.w -}, normalize: function normalize() { -var length, -inverseLength; -length = this.length(); -if (length < MathHelper.zeroTolerance) { -return new Vector4(0.0, 0.0, 0.0, 0.0) -} -inverseLength = 1.0 / length; -return new Vector4(this.x * inverseLength, this.y * inverseLength, this.z * inverseLength, this.w * inverseLength) -}, length: function length() { -return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z + this.w * this.w) -}, lengthSquared: function lengthSquared() { -return this.x * this.x + this.y * this.y + this.z * this.z + this.w * this.w -}, add: function add(v) { -return new Vector4(this.x + v.x, this.y + v.y, this.z + v.z, this.w + v.w) -}, subtract: function subtract(v) { -return new Vector4(this.x - v.x, this.y - v.y, this.z - v.z, this.w - v.w) -}, multiplyScalar: function multiplyScalar(f) { -return new Vector4(this.x * f, this.y * f, this.z * f, this.w * f) -}, equals: function equals(v) { -return this.x === v.x && this.y === v.y && this.z === v.z && this.w === v.w -}, lerp: function lerp(other, alpha) { -return new Vector4(this.x + alpha * (other.x - this.x), this.y + alpha * (other.y - this.y), this.z + alpha * (other.z - this.z), this.w + alpha * (other.w - this.w)) -}, toString: function toString() { -return '[' + this.x + ', ' + this.y + ', ' + this.z + ', ' + this.w + ']' -} + dot: function dot(v) { + return this.x * v.x + this.y * v.y + this.z * v.z + this.w * v.w + }, + normalize: function normalize() { + var length, + inverseLength; + length = this.length(); + if (length < MathHelper.zeroTolerance) { + return new Vector4(0.0, 0.0, 0.0, 0.0) + } + inverseLength = 1.0 / length; + return new Vector4(this.x * inverseLength, this.y * inverseLength, this.z * inverseLength, this.w * inverseLength) + }, + length: function length() { + return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z + this.w * this.w) + }, + lengthSquared: function lengthSquared() { + return this.x * this.x + this.y * this.y + this.z * this.z + this.w * this.w + }, + add: function add(v) { + return new Vector4(this.x + v.x, this.y + v.y, this.z + v.z, this.w + v.w) + }, + subtract: function subtract(v) { + return new Vector4(this.x - v.x, this.y - v.y, this.z - v.z, this.w - v.w) + }, + multiplyScalar: function multiplyScalar(f) { + return new Vector4(this.x * f, this.y * f, this.z * f, this.w * f) + }, + equals: function equals(v) { + return this.x === v.x && this.y === v.y && this.z === v.z && this.w === v.w + }, + lerp: function lerp(other, alpha) { + return new Vector4(this.x + alpha * (other.x - this.x), this.y + alpha * (other.y - this.y), this.z + alpha * (other.z - this.z), this.w + alpha * (other.w - this.w)) + }, + toString: function toString() { + return '[' + this.x + ', ' + this.y + ', ' + this.z + ', ' + this.w + ']' + } }; "use strict"; -var Config={ -debug: false, forceIERenderPath: true, outputMultiLODTiles: true, scanConvertSize: 40, polyInflate: 0.05 +var Config = { + debug: false, + forceIERenderPath: true, + outputMultiLODTiles: true, + scanConvertSize: 40, + polyInflate: 0.05 }; "use strict"; -var Utils={ -log: function log() { -if (window.console && Config.debug) { -console.log.apply(console, arguments) -} -}, extend: function extend(derived, base) { -function Inheritance(){} -Inheritance.prototype = base.prototype; -derived.prototype = new Inheritance; -derived.prototype.constructor = derived; -derived.baseConstructor = base; -derived.superClass = base.prototype -}, _eventListeners: {}, bind: function bind(element, eventName, handler, useCapture) { -var i, -eventNames=eventName.split(' '); -for (i = 0; i < eventNames.length; ++i) { -eventName = eventNames[i]; -if (!Utils._eventListeners[element]) { -Utils._eventListeners[element] = {} -} -if (!Utils._eventListeners[element][eventName]) { -Utils._eventListeners[element][eventName] = [] -} -if (element.addEventListener) { -if (eventName == 'mousewheel') { -element.addEventListener('DOMMouseScroll', handler, useCapture) -} -element.addEventListener(eventName, handler, useCapture) -} -else if (element.attachEvent) { -element.attachEvent('on' + eventName, handler); -if (useCapture && element.setCapture) { -element.setCapture() -} -} -Utils._eventListeners[element][eventName].push([handler, useCapture]) -} -}, _unbindAll: function _unbindAll(element) { -var k, -eventListeners, -i; -if (Utils._eventListeners[element]) { -for (k in Utils._eventListeners[element]) { -for (i = 0; i < Utils._eventListeners[element][k].length; ++i) { -Utils.unbind(element, k, Utils._eventListeners[element][k][i][0], Utils._eventListeners[element][k][i][1]) -} -} -} -}, unbind: function unbind(element, eventName, handler, useCapture) { -if (element && !eventName) { -Utils._unbindAll(element) -} -else { -var i, -j, -k, -count, -eventNames=eventName.split(' '); -for (i = 0; i < eventNames.length; ++i) { -eventName = eventNames[i]; -if (element.removeEventListener) { -if (eventName == 'mousewheel') { -element.removeEventListener('DOMMouseScroll', handler, useCapture) -} -element.removeEventListener(eventName, handler, useCapture) -} -else if (element.detachEvent) { -element.detachEvent('on' + eventName, handler); -if (useCapture && element.releaseCapture) { -element.releaseCapture() -} -} -if (Utils._eventListeners[element] && Utils._eventListeners[element][eventName]) { -for (j = 0; j < Utils._eventListeners[element][eventName].length; ++j) { -if (Utils._eventListeners[element][eventName][j][0] === handler) { -Utils._eventListeners[element][eventName][j].splice(j, 1) -} -} -if (Utils._eventListeners[element][eventName].length === 0) { -delete Utils._eventListeners[element][eventName] -} -} -} -count = 0; -if (Utils._eventListeners[element]) { -for (k in Utils._eventListeners[element]) { -++count -} -if (count === 0) { -delete Utils._eventListeners[element] -} -} -} -}, setOpacity: function setOpacity() { -function w3c(elem, opacity) { -elem.style.opacity = opacity -} -function ie(elem, opacity) { -opacity *= 100; -var filter; -try { -filter = elem.filters.item('DXImageTransform.Microsoft.Alpha'); -if (opacity < 100) { -filter.Opacity = opacity; -if (!filter.enabled) { -filter.enabled = true -} -} -else { -filter.enabled = false -} -} -catch(ex) { -if (opacity < 100) { -elem.style.filter = (elem.currentStyle || elem.runtimeStyle).filter + ' progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')' -} -} -} -var d=document.createElement('div'); -return typeof d.style.opacity !== 'undefined' && w3c || typeof d.style.filter !== 'undefined' && ie || function(){} -}(), css: function css(element, obj) { -var k; -for (k in obj) { -if (obj.hasOwnProperty(k)) { -if (k === 'opacity') { -Utils.setOpacity(element, obj[k]) -} -else { -element.style[k] = obj[k] -} -} -} -}, getWheelDelta: function getWheelDelta(e) { -return e.detail ? e.detail * -1 : e.wheelDelta / 40 -}, isDataUrl: function isDataUrl(url) { -return /^data:/.test(url) -}, isRelativeUrl: function isRelativeUrl(url) { -var hasProtocol=/^ftp:\/\//.test(url) || /^http:\/\//.test(url) || /^https:\/\//.test(url) || /^file:\/\//.test(url); -return !hasProtocol -}, hostnameRegexp: new RegExp('^(?:f|ht)tp(?:s)?\://([^/]+)', 'im'), filehostnameRegexp: new RegExp('^file\://([^/]+)', 'im'), getHostname: function getHostname(url) { -var result=Utils.hostnameRegexp.exec(url); -if (!result || result.length !== 2) { -result = Utils.filehostnameRegexp.exec(url) -} -if (!result || result.length !== 2) { -return '' -} -else { -return result[1].toString() -} -}, areSameDomain: function areSameDomain(url1, url2) { -var host1=Utils.getHostname(url1).toLowerCase(), -host2=Utils.getHostname(url2).toLowerCase(); -return host1 === host2 -} +var Utils = { + log: function log() { + if (window.console && Config.debug) { + console.log.apply(console, arguments) + } + }, + extend: function extend(derived, base) { + function Inheritance() {} + Inheritance.prototype = base.prototype; + derived.prototype = new Inheritance; + derived.prototype.constructor = derived; + derived.baseConstructor = base; + derived.superClass = base.prototype + }, + _eventListeners: {}, + bind: function bind(element, eventName, handler, useCapture) { + var i, + eventNames = eventName.split(' '); + for (i = 0; i < eventNames.length; ++i) { + eventName = eventNames[i]; + if (!Utils._eventListeners[element]) { + Utils._eventListeners[element] = {} + } + if (!Utils._eventListeners[element][eventName]) { + Utils._eventListeners[element][eventName] = [] + } + if (element.addEventListener) { + if (eventName == 'mousewheel') { + element.addEventListener('DOMMouseScroll', handler, useCapture) + } + element.addEventListener(eventName, handler, useCapture) + } else if (element.attachEvent) { + element.attachEvent('on' + eventName, handler); + if (useCapture && element.setCapture) { + element.setCapture() + } + } + Utils._eventListeners[element][eventName].push([handler, useCapture]) + } + }, + _unbindAll: function _unbindAll(element) { + var k, + eventListeners, + i; + if (Utils._eventListeners[element]) { + for (k in Utils._eventListeners[element]) { + for (i = 0; i < Utils._eventListeners[element][k].length; ++i) { + Utils.unbind(element, k, Utils._eventListeners[element][k][i][0], Utils._eventListeners[element][k][i][1]) + } + } + } + }, + unbind: function unbind(element, eventName, handler, useCapture) { + if (element && !eventName) { + Utils._unbindAll(element) + } else { + var i, + j, + k, + count, + eventNames = eventName.split(' '); + for (i = 0; i < eventNames.length; ++i) { + eventName = eventNames[i]; + if (element.removeEventListener) { + if (eventName == 'mousewheel') { + element.removeEventListener('DOMMouseScroll', handler, useCapture) + } + element.removeEventListener(eventName, handler, useCapture) + } else if (element.detachEvent) { + element.detachEvent('on' + eventName, handler); + if (useCapture && element.releaseCapture) { + element.releaseCapture() + } + } + if (Utils._eventListeners[element] && Utils._eventListeners[element][eventName]) { + for (j = 0; j < Utils._eventListeners[element][eventName].length; ++j) { + if (Utils._eventListeners[element][eventName][j][0] === handler) { + Utils._eventListeners[element][eventName][j].splice(j, 1) + } + } + if (Utils._eventListeners[element][eventName].length === 0) { + delete Utils._eventListeners[element][eventName] + } + } + } + count = 0; + if (Utils._eventListeners[element]) { + for (k in Utils._eventListeners[element]) { + ++count + } + if (count === 0) { + delete Utils._eventListeners[element] + } + } + } + }, + setOpacity: function setOpacity() { + function w3c(elem, opacity) { + elem.style.opacity = opacity + } + + function ie(elem, opacity) { + opacity *= 100; + var filter; + try { + filter = elem.filters.item('DXImageTransform.Microsoft.Alpha'); + if (opacity < 100) { + filter.Opacity = opacity; + if (!filter.enabled) { + filter.enabled = true + } + } else { + filter.enabled = false + } + } catch (ex) { + if (opacity < 100) { + elem.style.filter = (elem.currentStyle || elem.runtimeStyle).filter + ' progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')' + } + } + } + var d = document.createElement('div'); + return typeof d.style.opacity !== 'undefined' && w3c || typeof d.style.filter !== 'undefined' && ie || function() {} + }(), + css: function css(element, obj) { + var k; + for (k in obj) { + if (obj.hasOwnProperty(k)) { + if (k === 'opacity') { + Utils.setOpacity(element, obj[k]) + } else { + element.style[k] = obj[k] + } + } + } + }, + getWheelDelta: function getWheelDelta(e) { + return e.detail ? e.detail * -1 : e.wheelDelta / 40 + }, + isDataUrl: function isDataUrl(url) { + return /^data:/.test(url) + }, + isRelativeUrl: function isRelativeUrl(url) { + var hasProtocol = /^ftp:\/\//.test(url) || /^http:\/\//.test(url) || /^https:\/\//.test(url) || /^file:\/\//.test(url); + return !hasProtocol + }, + hostnameRegexp: new RegExp('^(?:f|ht)tp(?:s)?\://([^/]+)', 'im'), + filehostnameRegexp: new RegExp('^file\://([^/]+)', 'im'), + getHostname: function getHostname(url) { + var result = Utils.hostnameRegexp.exec(url); + if (!result || result.length !== 2) { + result = Utils.filehostnameRegexp.exec(url) + } + if (!result || result.length !== 2) { + return '' + } else { + return result[1].toString() + } + }, + areSameDomain: function areSameDomain(url1, url2) { + var host1 = Utils.getHostname(url1).toLowerCase(), + host2 = Utils.getHostname(url2).toLowerCase(); + return host1 === host2 + } }; "use strict"; + function extend(subclass, base) { -function f(){} -f.prototype = base.prototype; -subclass.prototype = new f; -subclass.prototype.constructor = subclass; -subclass.__super = base -} -; + function f() {} + f.prototype = base.prototype; + subclass.prototype = new f; + subclass.prototype.constructor = subclass; + subclass.__super = base +}; + function Geometry(params) { -Geometry.__super.call(this); -this._isDirty = true; -this._vertices = params.vertices || []; -this._vertexSize = params.vertexSize || 0; -this._texCoords = params.texCoords || []; -this._texCoordSize = params.texCoordSize || 0; -this._indices = params.indices || []; -this._primitiveType = params.primType || "invalid"; -this._primitiveLength = params.primLength || 0 + Geometry.__super.call(this); + this._isDirty = true; + this._vertices = params.vertices || []; + this._vertexSize = params.vertexSize || 0; + this._texCoords = params.texCoords || []; + this._texCoordSize = params.texCoordSize || 0; + this._indices = params.indices || []; + this._primitiveType = params.primType || "invalid"; + this._primitiveLength = params.primLength || 0 } Geometry.QUADS = 1; Geometry.TRIANGLES = 2; extend(Geometry, Object); + function Texture(url, loadCallback, loadCallbackInfo, wrapS, wrapT, minFilter, magFilter, offsetX, offsetY, width, height) { -Texture.__super.call(this); -this._url = url; -this._loadCallback = loadCallback; -this._loadCallbackInfo = loadCallbackInfo; -this._image = null; -this._offsetX = offsetX; -this._offsetY = offsetY; -this._width = width; -this._height = height; -this._wrapS = wrapS != null ? wrapS : Texture.Wrap.CLAMP_TO_EDGE; -this._wrapT = wrapT != null ? wrapT : Texture.Wrap.CLAMP_TO_EDGE; -this._minFilter = minFilter != null ? minFilter : Texture.Filter.LINEAR_MIPMAP_LINEAR; -this._magFilter = magFilter != null ? magFilter : Texture.Filter.LINEAR; -this._isReady = false; -this._isDirty = false + Texture.__super.call(this); + this._url = url; + this._loadCallback = loadCallback; + this._loadCallbackInfo = loadCallbackInfo; + this._image = null; + this._offsetX = offsetX; + this._offsetY = offsetY; + this._width = width; + this._height = height; + this._wrapS = wrapS != null ? wrapS : Texture.Wrap.CLAMP_TO_EDGE; + this._wrapT = wrapT != null ? wrapT : Texture.Wrap.CLAMP_TO_EDGE; + this._minFilter = minFilter != null ? minFilter : Texture.Filter.LINEAR_MIPMAP_LINEAR; + this._magFilter = magFilter != null ? magFilter : Texture.Filter.LINEAR; + this._isReady = false; + this._isDirty = false } Texture.Wrap = { -CLAMP_TO_EDGE: 1, REPEAT: 2 + CLAMP_TO_EDGE: 1, + REPEAT: 2 }; Texture.Filter = { -NEAREST: 0, LINEAR: 1, LINEAR_MIPMAP_LINEAR: 2 + NEAREST: 0, + LINEAR: 1, + LINEAR_MIPMAP_LINEAR: 2 }; extend(Texture, Object); Texture.prototype.loadImageInDOM = function() { -this._image = new Image; -var tex=this; -this._image.onload = function() { -if (tex._loadCallback) { -tex._loadCallback(tex._url, tex._loadCallbackInfo, tex) -} -tex._isReady = true; -tex._isDirty = true -}; -this._image.crossOrigin = ''; -this._image.src = this._url -}; + this._image = new Image; + var tex = this; + this._image.onload = function() { + if (tex._loadCallback) { + tex._loadCallback(tex._url, tex._loadCallbackInfo, tex) + } + tex._isReady = true; + tex._isDirty = true + }; + this._image.crossOrigin = ''; + this._image.src = this._url +}; + function AnimationBeginEndValues(begin, end) { -this.begin = begin; -this.end = end; -AnimationBeginEndValues.__super.call(this) + this.begin = begin; + this.end = end; + AnimationBeginEndValues.__super.call(this) } extend(AnimationBeginEndValues, Object); + function Animation() { -Animation.__super.call(this); -this.opacity = new AnimationBeginEndValues(1, 1); -this.x = new AnimationBeginEndValues(0, 0); -this.y = new AnimationBeginEndValues(0, 0); -this.sx = new AnimationBeginEndValues(1, 1); -this.sy = new AnimationBeginEndValues(1, 1); -this.rotate = new AnimationBeginEndValues(0, 0); -this._duration = 0; -this._startT = 0; -this._easingMode = "linear"; -this._ended = false; -this._endCallbackInfo = null; -this._endCallback = null + Animation.__super.call(this); + this.opacity = new AnimationBeginEndValues(1, 1); + this.x = new AnimationBeginEndValues(0, 0); + this.y = new AnimationBeginEndValues(0, 0); + this.sx = new AnimationBeginEndValues(1, 1); + this.sy = new AnimationBeginEndValues(1, 1); + this.rotate = new AnimationBeginEndValues(0, 0); + this._duration = 0; + this._startT = 0; + this._easingMode = "linear"; + this._ended = false; + this._endCallbackInfo = null; + this._endCallback = null } extend(Animation, Object); Animation.prototype.initStates = function(params) { -for (var prop in params) { -this[prop] = [params[prop], params[prop]] -} + for (var prop in params) { + this[prop] = [params[prop], params[prop]] + } }; Animation.prototype.getEndStates = function() { -var ret={}; -for (var prop in this) { -if (this[prop] instanceof AnimationBeginEndValues) -ret[prop] = this[prop].end -} -return ret -}; + var ret = {}; + for (var prop in this) { + if (this[prop] instanceof AnimationBeginEndValues) + ret[prop] = this[prop].end + } + return ret +}; + function Material() { -Material.__super.call(this); -Material._animation = null; -Material._animationEndStates = null + Material.__super.call(this); + Material._animation = null; + Material._animationEndStates = null } extend(Material, Object); Material.prototype.apply = function(context) { -throw"You should not have reached base Material.apply()."; + throw "You should not have reached base Material.apply()."; }; + function SingleTextureMaterial(tex) { -this._texture = tex; -SingleTextureMaterial.__super.call(this) + this._texture = tex; + SingleTextureMaterial.__super.call(this) } extend(SingleTextureMaterial, Material); + function Transform() { -this._rotX = this._rotY = this._rotZ = 0; -this._translateX = this._translateY = this._translateZ = 0; -this._scaleX = this._scaleY = this._scaleZ = 0; -Transform.__super.call(this) + this._rotX = this._rotY = this._rotZ = 0; + this._translateX = this._translateY = this._translateZ = 0; + this._scaleX = this._scaleY = this._scaleZ = 0; + Transform.__super.call(this) } extend(Transform, Matrix4x4); Transform.prototype.apply = function(context) { -throw"You should not have reached base Transform.apply()."; + throw "You should not have reached base Transform.apply()."; }; + function Renderable(params) { -this._geometry = params.geometry || null; -this._material = params.material || null; -this._transform = params.transform || null + this._geometry = params.geometry || null; + this._material = params.material || null; + this._transform = params.transform || null } extend(Renderable, Object); -var uniqueId=(function() { -var count=(new Date).getTime(); -return function() { -++count; -return count -} +var uniqueId = (function() { + var count = (new Date).getTime(); + return function() { + ++count; + return count + } })(); + function Renderer(win) { -Renderer.__super.constructor.call(this); -this._name = 'BaseRenderer'; -this._renderables = {}; -this._removedRenderables = {}; -this._nodes = {}; -this._window = win; -this._rootElement = null; -this._viewProjMatrix = Matrix4x4.createIdentity(); -this._clearColor = { -r: 0.0, g: 0.0, b: 0.0, a: 1.0 -} + Renderer.__super.constructor.call(this); + this._name = 'BaseRenderer'; + this._renderables = {}; + this._removedRenderables = {}; + this._nodes = {}; + this._window = win; + this._rootElement = null; + this._viewProjMatrix = Matrix4x4.createIdentity(); + this._clearColor = { + r: 0.0, + g: 0.0, + b: 0.0, + a: 1.0 + } } extend(Renderer, Object); Renderer.prototype.render = function() { -throw'The renderer you are using does not implement the render() method.'; + throw 'The renderer you are using does not implement the render() method.'; }; Renderer.prototype.addRenderable = function(renderableArray, idArray) { -var i, -uid, -ids=[]; -for (i = 0; i < renderableArray.length; ++i) { -uid = (idArray != undefined && idArray[i] != undefined) ? idArray[i] : uniqueId(); -if (!renderableArray[i]) { -throw'Expected valid renderable'; -} -this._renderables[uid] = renderableArray[i]; -ids.push(uid) -} -return ids + var i, + uid, + ids = []; + for (i = 0; i < renderableArray.length; ++i) { + uid = (idArray != undefined && idArray[i] != undefined) ? idArray[i] : uniqueId(); + if (!renderableArray[i]) { + throw 'Expected valid renderable'; + } + this._renderables[uid] = renderableArray[i]; + ids.push(uid) + } + return ids }; Renderer.prototype._checkClearColor = function(color) { -if (!color || color.r == null || color.g == null || color.b == null || color.a == null) { -throw'Color must include r,g,b,a numeric properties.'; -} + if (!color || color.r == null || color.g == null || color.b == null || color.a == null) { + throw 'Color must include r,g,b,a numeric properties.'; + } }; Renderer.prototype.setClearColor = function(color) { -throw'setClearColor is not implemented'; + throw 'setClearColor is not implemented'; }; Renderer.prototype._error = function(msg) { -if (Config.debug) { -throw new Error(msg); -debugger -} + if (Config.debug) { + throw new Error(msg); + debugger + } }; Renderer.prototype.remove = function(idArray) { -var i, -id; -for (i = 0; i < idArray.length; ++i) { -id = idArray[i]; -if (this._renderables[id] != undefined) { -this._removedRenderables[id] = this._renderables[id]; -delete this._renderables[id] -} -else if (this._nodes[id] != undefined) { -delete this._nodes[id] -} -else { -this._error('Object ' + id + ' not found.') -} -} + var i, + id; + for (i = 0; i < idArray.length; ++i) { + id = idArray[i]; + if (this._renderables[id] != undefined) { + this._removedRenderables[id] = this._renderables[id]; + delete this._renderables[id] + } else if (this._nodes[id] != undefined) { + delete this._nodes[id] + } else { + this._error('Object ' + id + ' not found.') + } + } }; Renderer.prototype.animate = function(renderable, startProperties, endProperties, duration, easing, completeCallback, completeCallbackInfo) { -throw'The renderer does not implement animate function'; + throw 'The renderer does not implement animate function'; }; Renderer.prototype.setViewProjectionMatrix = function(mat) { -this._viewProjMatrix = mat + this._viewProjMatrix = mat }; "use strict"; + function GridGeometry(width, height, nSegX, nSegY, useTris) { -GridGeometry.__super.call(this, {}); -var x, -y, -w2=width * 0.5, -h2=height * 0.5, -gridX=nSegX || 1, -gridY=nSegY || 1, -gridX1=gridX + 1, -gridY1=gridY + 1, -stepX=width / gridX, -stepY=height / gridY; -for (y = 0; y < gridY1; y++) { -for (x = 0; x < gridX1; x++) { -var xx=x * stepX; -var yy=y * stepY; -this._vertices.push(xx, yy, 0) -} -} -for (y = 0; y < gridY; y++) { -for (x = 0; x < gridX; x++) { -var a=x + gridX1 * y, -b=x + gridX1 * (y + 1), -c=(x + 1) + gridX1 * (y + 1), -d=(x + 1) + gridX1 * y; -if (!useTris) { -this._indices.push(a, b, c, d); -this._texCoords.push(x / gridX, y / gridY, x / gridX, (y + 1) / gridY, (x + 1) / gridX, (y + 1) / gridY, (x + 1) / gridX, y / gridY) -} -else { -this._indices.push(a, b, c); -this._indices.push(a, c, d); -this._texCoords.push(x / gridX, y / gridY, x / gridX, (y + 1) / gridY, (x + 1) / gridX, (y + 1) / gridY); -this._texCoords.push(x / gridX, y / gridY, (x + 1) / gridX, (y + 1) / gridY, (x + 1) / gridX, y / gridY) -} -} -} -this._texCoordSize = 2; -this._primitiveType = useTris ? Geometry.TRIANGLES : Geometry.QUADS; -this._primitiveLength = gridX * gridY * (useTris ? 2 : 1); -this._isDirty = true -} -; + GridGeometry.__super.call(this, {}); + var x, + y, + w2 = width * 0.5, + h2 = height * 0.5, + gridX = nSegX || 1, + gridY = nSegY || 1, + gridX1 = gridX + 1, + gridY1 = gridY + 1, + stepX = width / gridX, + stepY = height / gridY; + for (y = 0; y < gridY1; y++) { + for (x = 0; x < gridX1; x++) { + var xx = x * stepX; + var yy = y * stepY; + this._vertices.push(xx, yy, 0) + } + } + for (y = 0; y < gridY; y++) { + for (x = 0; x < gridX; x++) { + var a = x + gridX1 * y, + b = x + gridX1 * (y + 1), + c = (x + 1) + gridX1 * (y + 1), + d = (x + 1) + gridX1 * y; + if (!useTris) { + this._indices.push(a, b, c, d); + this._texCoords.push(x / gridX, y / gridY, x / gridX, (y + 1) / gridY, (x + 1) / gridX, (y + 1) / gridY, (x + 1) / gridX, y / gridY) + } else { + this._indices.push(a, b, c); + this._indices.push(a, c, d); + this._texCoords.push(x / gridX, y / gridY, x / gridX, (y + 1) / gridY, (x + 1) / gridX, (y + 1) / gridY); + this._texCoords.push(x / gridX, y / gridY, (x + 1) / gridX, (y + 1) / gridY, (x + 1) / gridX, y / gridY) + } + } + } + this._texCoordSize = 2; + this._primitiveType = useTris ? Geometry.TRIANGLES : Geometry.QUADS; + this._primitiveLength = gridX * gridY * (useTris ? 2 : 1); + this._isDirty = true +}; extend(GridGeometry, Geometry); + function QuadGeometry(width, height) { -this._vertices = [width, height, 0, 0, height, 0, 0, 0, 0, width, 0, 0]; -this._texCoords = [1, 1, 0, 1, 0, 0, 1, 0]; -this._indices = [0, 1, 2, 0, 2, 3]; -this._texCoordSize = 2; -this._primitiveType = Geometry.TRIANGLES; -this._primitiveLength = 2; -this._isDirty = true -} + this._vertices = [width, height, 0, 0, height, 0, 0, 0, 0, width, 0, 0]; + this._texCoords = [1, 1, 0, 1, 0, 0, 1, 0]; + this._indices = [0, 1, 2, 0, 2, 3]; + this._texCoordSize = 2; + this._primitiveType = Geometry.TRIANGLES; + this._primitiveLength = 2; + this._isDirty = true +} + function QuadGeometryWireframe(width, height) { -this._vertices = [width, height, 0, 0, height, 0, 0, 0, 0, width, 0, 0]; -this._texCoords = [1, 1, 0, 1, 0, 0, 1, 0]; -this._indices = [0, 1, 1, 2, 2, 3, 3, 0, 0, 2, 1, 3]; -this._texCoordSize = 2; -this._primitiveType = Geometry.TRIANGLES; -this._primitiveLength = 2; -this._isDirty = true + this._vertices = [width, height, 0, 0, height, 0, 0, 0, 0, width, 0, 0]; + this._texCoords = [1, 1, 0, 1, 0, 0, 1, 0]; + this._indices = [0, 1, 1, 2, 2, 3, 3, 0, 0, 2, 1, 3]; + this._texCoordSize = 2; + this._primitiveType = Geometry.TRIANGLES; + this._primitiveLength = 2; + this._isDirty = true } extend(QuadGeometry, Geometry); + function TexturedQuadRenderable(width, height, transform, textureURL, loadCallback, loadCallbackInfo, loadTextureInDOM, offsetX, offsetY) { -TexturedQuadRenderable.__super.call(this, {}); -var self=this; -this._geometry = new QuadGeometry(width, height); -this._transform = transform ? transform : Matrix4x4.createIdentity(); -if (textureURL) { -var texture=new Texture(textureURL, null, loadCallbackInfo, null, null, null, null, offsetX, offsetY, width, height); -this._material = new SingleTextureMaterial(texture); -if (loadTextureInDOM) { -texture.loadImageInDOM() -} -} + TexturedQuadRenderable.__super.call(this, {}); + var self = this; + this._geometry = new QuadGeometry(width, height); + this._transform = transform ? transform : Matrix4x4.createIdentity(); + if (textureURL) { + var texture = new Texture(textureURL, null, loadCallbackInfo, null, null, null, null, offsetX, offsetY, width, height); + this._material = new SingleTextureMaterial(texture); + if (loadTextureInDOM) { + texture.loadImageInDOM() + } + } } extend(TexturedQuadRenderable, Renderable); + function UntexturedQuadRenderable(width, height, transform, textureURL, loadCallback, loadCallbackInfo, loadTextureInDOM) { -UntexturedQuadRenderable.__super.call(this, {}); -var self=this; -this._geometry = new QuadGeometry(width, height); -this._material = null; -this._transform = transform ? transform : Matrix4x4.createIdentity() + UntexturedQuadRenderable.__super.call(this, {}); + var self = this; + this._geometry = new QuadGeometry(width, height); + this._material = null; + this._transform = transform ? transform : Matrix4x4.createIdentity() } extend(UntexturedQuadRenderable, Renderable); + function TestQuadRenderable(width, height, transform, backgroundColor, text, loadTexture) { -TexturedQuadRenderable.__super.call(this, {}); -var self=this; -var buffer=document.createElement('canvas'); -buffer.width = width; -buffer.height = height; -var context=buffer.getContext('2d'); -context.clearRect(0, 0, width, height); -context.fillStyle = backgroundColor || 'gray'; -context.fillRect(0, 0, width, height); -context.fillStyle = 'black'; -context.font = '12pt Segoe UI,sans-serif'; -context.fillText(text, width * 0.3, height * 0.3); -var textureURL=buffer.toDataURL(); -var texture=new Texture(textureURL); -if (loadTexture) { -texture.loadImageInDOM() -} -self._material = new SingleTextureMaterial(texture); -self._transform = transform ? transform : Matrix4x4.createIdentity(); -self._geometry = new QuadGeometry(width, height) + TexturedQuadRenderable.__super.call(this, {}); + var self = this; + var buffer = document.createElement('canvas'); + buffer.width = width; + buffer.height = height; + var context = buffer.getContext('2d'); + context.clearRect(0, 0, width, height); + context.fillStyle = backgroundColor || 'gray'; + context.fillRect(0, 0, width, height); + context.fillStyle = 'black'; + context.font = '12pt Segoe UI,sans-serif'; + context.fillText(text, width * 0.3, height * 0.3); + var textureURL = buffer.toDataURL(); + var texture = new Texture(textureURL); + if (loadTexture) { + texture.loadImageInDOM() + } + self._material = new SingleTextureMaterial(texture); + self._transform = transform ? transform : Matrix4x4.createIdentity(); + self._geometry = new QuadGeometry(width, height) } extend(TexturedQuadRenderable, Renderable); "use strict"; -var MemoryCache=function(minEntries) { -var self=this; -var attributePrefix='$$'; -var Debug={}; -Debug.assert = function(a, b){}; -var _maxEntries=minEntries; -var _maxHashtables=3; -var _countKey=attributePrefix + 'count'; -var _cache=[{}]; -_cache[0][_countKey] = 0; -var _disposer; -self.get = function(key, refresh) { -Debug.assert(typeof key === 'string', 'Argument: key'); -var value; -var i=_cache.length; -var latest=true; -while (i--) { -value = _cache[i][key]; -if (value !== undefined) { -if (refresh && !latest) { -self.insert(key, value) -} -return value -} -latest = false -} -}; -self.insert = function(key, value) { -Debug.assert(typeof key === 'string', 'Argument: key'); -Debug.assert(value !== undefined, 'Argument: value'); -var hashtable=_cache[_cache.length - 1]; -if (hashtable[key] === undefined) { -if (hashtable[_countKey] < _maxEntries) { -hashtable[_countKey]++ -} -else { -hashtable = {}; -hashtable[_countKey] = 1; -_cache.push(hashtable); -if (_cache.length > _maxHashtables) { -var oldHashtable=_cache.shift(); -if (_disposer) { -for (var k in oldHashtable) { -if (k !== _countKey && oldHashtable.hasOwnProperty(k)) { -var oldObject=oldHashtable[k]; -if (oldObject !== self.get(k)) { -_disposer(oldObject) -} -} -} -} -} -} -} -hashtable[key] = value +var MemoryCache = function(minEntries) { + var self = this; + var attributePrefix = '$$'; + var Debug = {}; + Debug.assert = function(a, b) {}; + var _maxEntries = minEntries; + var _maxHashtables = 3; + var _countKey = attributePrefix + 'count'; + var _cache = [{}]; + _cache[0][_countKey] = 0; + var _disposer; + self.get = function(key, refresh) { + Debug.assert(typeof key === 'string', 'Argument: key'); + var value; + var i = _cache.length; + var latest = true; + while (i--) { + value = _cache[i][key]; + if (value !== undefined) { + if (refresh && !latest) { + self.insert(key, value) + } + return value + } + latest = false + } + }; + self.insert = function(key, value) { + Debug.assert(typeof key === 'string', 'Argument: key'); + Debug.assert(value !== undefined, 'Argument: value'); + var hashtable = _cache[_cache.length - 1]; + if (hashtable[key] === undefined) { + if (hashtable[_countKey] < _maxEntries) { + hashtable[_countKey]++ + } else { + hashtable = {}; + hashtable[_countKey] = 1; + _cache.push(hashtable); + if (_cache.length > _maxHashtables) { + var oldHashtable = _cache.shift(); + if (_disposer) { + for (var k in oldHashtable) { + if (k !== _countKey && oldHashtable.hasOwnProperty(k)) { + var oldObject = oldHashtable[k]; + if (oldObject !== self.get(k)) { + _disposer(oldObject) + } + } + } + } + } + } + } + hashtable[key] = value + }; + self.useDisposer = function(disposer) { + _disposer = disposer + }; + self.size = function() { + var i, + k, + count = 0; + for (i = 0; i < _cache.length; ++i) { + if (_cache[i]) { + for (k in _cache[i]) { + if (_cache[i].hasOwnProperty(k) && k !== _countKey) { + ++count + } + } + } + } + return count + } }; -self.useDisposer = function(disposer) { -_disposer = disposer +"use strict"; +var PriorityNetworkDownloader = function(useCORS, tileDownloadFailedCallback, tileDownloadSucceededCallback, tileCacheId) { + var self = this; + self.useCORS = (useCORS || false); + var _spacerImageUrl = 'data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='; + var _downloadTimeout = 10000; + var _maxConcurrentTileDownloads = 6; + var _queue = []; + var _activeDownloadsCount = 0; + var _activeDownloads = {}; + var _downloaded = new MemoryCache(8); + var _failed = new MemoryCache(1); + var _allDownloadedUrls = new MemoryCache(200); + var _succeedCount = 0; + var _failCount = 0; + tileDownloadFailedCallback = tileDownloadFailedCallback || function() {}; + tileDownloadSucceededCallback = tileDownloadSucceededCallback || function() {}; + if (quirks.useImageDisposer) { + _downloaded.useDisposer(function(o) { + if (o && o.src) { + o.src = _spacerImageUrl + } + }) + } + var attributePrefix = '$$'; + var _downloadRequestKey = attributePrefix + 'downloadRequest'; + var _timeoutIdKey = attributePrefix + 'timeoutid'; + var _processedKey = attributePrefix + 'processed'; + var _tokenKey = 'token'; + self.completed = []; + self.getState = function(url) { + if (_downloaded.get(url)) { + return TileDownloadState.ready + } + if (_allDownloadedUrls.get(url)) { + return TileDownloadState.cacheExpired + } + var failedState = _failed.get(url); + if (failedState !== undefined) { + return failedState + } + if (_activeDownloads[url]) { + return TileDownloadState.downloading + } + return TileDownloadState.none + }; + self.downloadImage = function(url, priority, token) { + if (self.getState(url) === TileDownloadState.ready) { + self.completed.push(_downloaded.get(url)) + } else { + _queue.push({ + url: url, + priority: priority, + token: token + }) + } + }; + self.updatePriority = function(url, priority) { + var i, + found = false; + for (i = 0; i < _queue.length; ++i) { + if (_queue.url === url) { + found = true; + _queue.priority = priority; + break + } + } + if (!found) { + throw 'Expected item to be in queue.'; + } + }; + self.cancel = function(url) { + var i; + if (_activeDownloads[url]) { + _endDownload(_activeDownloads[url], url) + } + i = self.completed.length; + while (i--) { + if (self.completed[i].src === url) { + self.completed[i].splice(i, 1) + } + } + }; + self.getCacheSize = function() { + return _downloaded.size() + }; + self.currentlyDownloading = function() { + return _activeDownloadsCount != 0 + }; + self.update = function() { + self.completed = []; + _queue.sort(function(l, r) { + return r.priority - l.priority + }); + for (var i = 0; i < _queue.length; i++) { + var downloadRequest = _queue[i]; + var url = downloadRequest.url; + var downloadState = self.getState(url); + switch (downloadState) { + case TileDownloadState.none: + case TileDownloadState.timedout: + case TileDownloadState.cacheExpired: + if (_activeDownloadsCount < _maxConcurrentTileDownloads) { + if (!_activeDownloads[url]) { + _activeDownloadsCount++; + var img = document.createElement('img'); + _activeDownloads[url] = img; + img[_downloadRequestKey] = downloadRequest; + if (tileCacheId && PlatformJS && PlatformJS.Utilities) { + (function(img) { + var onDownloadFailedBinding = _onDownloadFailed.bind(img); + PlatformJS.Utilities.fetchImage(tileCacheId, url, null).then(function jspanoviewer_fetchImageComplete(url) { + if (url) { + img.src = url; + img.onload = _onDownloadComplete; + img.onerror = _onDownloadFailed; + img.onabort = _onDownloadFailed + } else { + onDownloadFailedBinding() + } + }, onDownloadFailedBinding) + })(img) + } else { + img.src = url; + img.onload = _onDownloadComplete; + img.onerror = _onDownloadFailed; + img.onabort = _onDownloadFailed + } + img[_timeoutIdKey] = window.setTimeout((function() { + var closureImg = img; + return function() { + _onDownloadTimeout.call(closureImg) + } + })(), _downloadTimeout); + var useCORS = false; + if (self.useCORS) { + useCORS = !Utils.isDataUrl(url) && !Utils.isRelativeUrl(url) && !Utils.areSameDomain(url, window.location.toString()) + } + if (useCORS) { + img.crossOrigin = '' + } + } + } + break; + case TileDownloadState.downloading: + break; + default: + break + } + } + }; + + function _onDownloadComplete() { + if (!this[_processedKey]) { + var url = this[_downloadRequestKey].url; + _endDownload(this, url); + _allDownloadedUrls.insert(url, true); + self.completed.push(this); + this[_tokenKey] = this[_downloadRequestKey].token; + _downloaded.insert(url, this); + _succeedCount++; + tileDownloadSucceededCallback(_failCount, _succeedCount) + } + } + + function _onDownloadFailed() { + if (!this[_processedKey]) { + var url = this[_downloadRequestKey].url; + _endDownload(this, url); + if (quirks.useImageDisposer) { + this.src = _spacerImageUrl + } + _failed.insert(url, TileDownloadState.failed); + _failCount++; + tileDownloadFailedCallback(_failCount, _succeedCount) + } + } + + function _onDownloadTimeout() { + if (!this[_processedKey]) { + var url = this[_downloadRequestKey].url; + _endDownload(this, url); + if (quirks.useImageDisposer) { + this.src = _spacerImageUrl + } + _failed.insert(url, TileDownloadState.timedout); + _failCount++; + tileDownloadFailedCallback(_failCount, _succeedCount) + } + } + + function _endDownload(img, url) { + img[_processedKey] = true; + img.onload = null; + img.onerror = null; + img.onabort = null; + window.clearTimeout(img[_timeoutIdKey]); + var downloadRequest = img[_downloadRequestKey]; + var i = _queue.length; + while (i--) { + if (_queue[i] === downloadRequest) { + _queue.splice(i, 1) + } + } + _activeDownloadsCount--; + delete _activeDownloads[url]; + i = self.completed.length + } +}; +var TileDownloadState = { + none: 0, + downloading: 1, + ready: 2, + failed: 3, + timedout: 4, + cacheExpired: 5 }; -self.size = function() { -var i, -k, -count=0; -for (i = 0; i < _cache.length; ++i) { -if (_cache[i]) { -for (k in _cache[i]) { -if (_cache[i].hasOwnProperty(k) && k !== _countKey) { -++count -} -} -} -} -return count -} +"use strict"; +var PolygonTileFloodFiller = { + floodFill: function floodFill(gridWidth, gridHeight, polygon, startingTile) { + this.cachedCrossings = {}; + if (startingTile == null) { + if (polygon.length == 0) { + return [] + } + startingTile = this.calculateStartingTile(gridWidth, gridHeight, polygon) + } + var tileQueue = [startingTile]; + var tilesEnqueued = new Array(gridWidth * gridHeight); + tilesEnqueued[startingTile.y * gridWidth + startingTile.x] = true; + var result = []; + while (tileQueue.length > 0) { + var tile = tileQueue.shift(); + result.push(tile); + var neighbors = []; + if (this.tileCenterInPolygon(tile, polygon) || this.gridCrossesPolygon(tile, polygon)) { + neighbors.push(this.getLeftNeighbor(tile)); + neighbors.push(this.getRightNeighbor(tile)); + neighbors.push(this.getTopNeighbor(tile)); + neighbors.push(this.getBottomNeighbor(tile)) + } + for (var i = 0; i < neighbors.length; i++) { + var neighbor = neighbors[i]; + if (this.isValidTile(neighbor, gridWidth, gridHeight) && !tilesEnqueued[neighbor.y * gridWidth + neighbor.x]) { + tileQueue.push(neighbor); + tilesEnqueued[neighbor.y * gridWidth + neighbor.x] = true + } + } + } + this.cachedCrossings = null; + return result + }, + calculateStartingTile: function calculateStartingTile(gridWidth, gridHeight, polygon) { + var center = { + x: 0, + y: 0 + }; + for (var i = 0; i < polygon.length; i++) { + center.x += polygon[i].x; + center.y += polygon[i].y + } + var invLength = 1.0 / polygon.length; + center.x *= invLength; + center.y *= invLength; + center.x = Math.floor(center.x); + center.y = Math.floor(center.y); + center.x = Math.max(0, center.x); + center.y = Math.max(0, center.y); + center.x = Math.min(gridWidth - 1, center.x); + center.y = Math.min(gridHeight - 1, center.y); + return center + }, + getLeftNeighbor: function getLeftNeighbor(tile) { + return { + x: tile.x - 1, + y: tile.y + } + }, + getRightNeighbor: function getRightNeighbor(tile) { + return { + x: tile.x + 1, + y: tile.y + } + }, + getTopNeighbor: function getTopNeighbor(tile) { + return { + x: tile.x, + y: tile.y - 1 + } + }, + getBottomNeighbor: function getBottomNeighbor(tile) { + return { + x: tile.x, + y: tile.y + 1 + } + }, + tileCenterInPolygon: function tileCenterInPolygon(tile, polygon) { + return this.pointInPolygon({ + x: tile.x + 0.5, + y: tile.y + 0.5 + }, polygon) + }, + isValidTile: function isValidTile(tile, gridWidth, gridHeight) { + if (isNaN(tile.x) || isNaN(tile.y) || tile.x < 0 || tile.y < 0 || tile.x >= gridWidth || tile.y >= gridHeight) { + return false + } + return true + }, + normalizeNumber: function normalizeNumber(number) { + if (number >= 0) { + return 1 + } + return -1 + }, + gridCrossesPolygon: function gridCrossesPolygon(gridUpperLeftPoint, polygon) { + var gridUpperRightPoint = { + x: gridUpperLeftPoint.x + 1, + y: gridUpperLeftPoint.y + }; + var gridLowerRightPoint = { + x: gridUpperLeftPoint.x + 1, + y: gridUpperLeftPoint.y + 1 + }; + var gridLowerLeftPoint = { + x: gridUpperLeftPoint.x, + y: gridUpperLeftPoint.y + 1 + }; + if (this.countCrossings(gridUpperLeftPoint, polygon) !== this.countCrossings(gridUpperRightPoint, polygon)) { + return true + } else if (this.countCrossings(gridLowerLeftPoint, polygon) !== this.countCrossings(gridLowerRightPoint, polygon)) { + return true + } else if (this.countCrossings(gridUpperLeftPoint, polygon, true) !== this.countCrossings(gridLowerLeftPoint, polygon, true)) { + return true + } else if (this.countCrossings(gridUpperRightPoint, polygon, true) !== this.countCrossings(gridLowerRightPoint, polygon, true)) { + return true + } else { + return false + } + }, + pointInPolygon: function pointInPolygon(point, polygon) { + var crossCount = this.countCrossings(point, polygon); + return (crossCount % 2 === 1) + }, + cachedCrossings: {}, + countCrossings: function countCrossings(point, polygon, castRayDown) { + var adjustedPolygon = []; + var i, + j; + var crossCount = 0; + var hash = point.x + ',' + point.y + ((castRayDown) ? ',down' : ',right'); + if (this.cachedCrossings[hash] != null) { + return this.cachedCrossings[hash] + } + if (castRayDown) { + for (i = 0; i < polygon.length; i++) { + adjustedPolygon.push({ + x: polygon[i].y - point.y, + y: polygon[i].x - point.x + }) + } + } else { + for (i = 0; i < polygon.length; i++) { + adjustedPolygon.push({ + x: polygon[i].x - point.x, + y: polygon[i].y - point.y + }) + } + } + for (i = 0; i < adjustedPolygon.length; i++) { + j = i + 1; + if (j >= adjustedPolygon.length) { + j = 0 + } + var y0 = adjustedPolygon[i].y; + var y1 = adjustedPolygon[j].y; + var x0 = adjustedPolygon[i].x; + var x1 = adjustedPolygon[j].x; + var ySign0 = this.normalizeNumber(y0); + var ySign1 = this.normalizeNumber(y1); + var xSign0 = this.normalizeNumber(x0); + var xSign1 = this.normalizeNumber(x1); + if (ySign0 != ySign1) { + if (xSign0 === 1 && xSign1 === 1) { + crossCount++ + } else if (xSign0 !== xSign1) { + var m = (y0 - y1) / (x0 - x1); + var b = y0 - (m * x0); + if (b >= 0) { + crossCount++ + } + } + } + } + this.cachedCrossings[hash] = crossCount; + return crossCount + } }; "use strict"; -var PriorityNetworkDownloader=function(useCORS, tileDownloadFailedCallback, tileDownloadSucceededCallback, tileCacheId) { -var self=this; -self.useCORS = (useCORS || false); -var _spacerImageUrl='data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='; -var _downloadTimeout=10000; -var _maxConcurrentTileDownloads=6; -var _queue=[]; -var _activeDownloadsCount=0; -var _activeDownloads={}; -var _downloaded=new MemoryCache(8); -var _failed=new MemoryCache(1); -var _allDownloadedUrls=new MemoryCache(200); -var _succeedCount=0; -var _failCount=0; -tileDownloadFailedCallback = tileDownloadFailedCallback || function(){}; -tileDownloadSucceededCallback = tileDownloadSucceededCallback || function(){}; -if (quirks.useImageDisposer) { -_downloaded.useDisposer(function(o) { -if (o && o.src) { -o.src = _spacerImageUrl -} -}) -} -var attributePrefix='$$'; -var _downloadRequestKey=attributePrefix + 'downloadRequest'; -var _timeoutIdKey=attributePrefix + 'timeoutid'; -var _processedKey=attributePrefix + 'processed'; -var _tokenKey='token'; -self.completed = []; -self.getState = function(url) { -if (_downloaded.get(url)) { -return TileDownloadState.ready -} -if (_allDownloadedUrls.get(url)) { -return TileDownloadState.cacheExpired -} -var failedState=_failed.get(url); -if (failedState !== undefined) { -return failedState -} -if (_activeDownloads[url]) { -return TileDownloadState.downloading -} -return TileDownloadState.none +var CSSMatrix = window.CSSMatrix || window.WebKitCSSMatrix || window.MSCSSMatrix || window.MozCSSMatrix; + +function RendererCSS3D(win, width, height) { + RendererCSS3D.__super.call(this, win); + this._width = width; + this._height = height; + if (!RendererCheckCSS3D.isValidBrowser()) { + throw 'css3d is not supported'; + } + this._rootElement = document.createElement('div'); + this._rootElement.width = this._width; + this._rootElement.height = this._height; + this._flatten3D = document.createElement('div'); + this._flatten3D.style.width = this._width + 'px'; + this._flatten3D.style.height = this._height + 'px'; + this._flatten3D.style.position = 'absolute'; + this._flatten3D.style.webkitTransformStyle = 'flat'; + this._flatten3D.style.msTransformStyle = 'flat'; + this._flatten3D.style.mozTransformStyle = 'flat'; + this._flatten3D.style.backgroundColor = 'rgba(' + this._clearColor.r * 255.0 + ',' + this._clearColor.g * 255.0 + ',' + this._clearColor.b * 255.0 + ',' + this._clearColor.a + ')'; + this._3dViewportDiv = document.createElement('div'); + this._3dViewportDiv.width = this._width; + this._3dViewportDiv.height = this._height; + this._3dViewportDiv.style.position = 'absolute'; + this._flatten3D.appendChild(this._3dViewportDiv); + this._rootElement.appendChild(this._flatten3D); + if (quirks.supportsPreserve3D && !Config.forceIERenderPath) { + this._3dViewportDiv.style.webkitTransformStyle = 'preserve-3d'; + this._3dViewportDiv.style.webkitTransform = 'matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1)'; + this._3dViewportDiv.style.mozTransformStyle = 'preserve-3d'; + this._3dViewportDiv.style.mozTransform = 'matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1)' + } + win.appendChild(this._rootElement) }; -self.downloadImage = function(url, priority, token) { -if (self.getState(url) === TileDownloadState.ready) { -self.completed.push(_downloaded.get(url)) -} -else { -_queue.push({ -url: url, priority: priority, token: token -}) -} +extend(RendererCSS3D, Renderer); +RendererCSS3D.prototype.ignoreEvent = function() { + return false }; -self.updatePriority = function(url, priority) { -var i, -found=false; -for (i = 0; i < _queue.length; ++i) { -if (_queue.url === url) { -found = true; -_queue.priority = priority; -break -} -} -if (!found) { -throw'Expected item to be in queue.'; -} +RendererCSS3D.prototype.setStyleProperties = function(element) { + if (quirks.supportsPreserve3D && !Config.forceIERenderPath) { + element.style.webkitTransformStyle = 'preserve-3d'; + element.style.mozTransformStyle = 'preserve-3d' + } + element.style.position = 'absolute' }; -self.cancel = function(url) { -var i; -if (_activeDownloads[url]) { -_endDownload(_activeDownloads[url], url) -} -i = self.completed.length; -while (i--) { -if (self.completed[i].src === url) { -self.completed[i].splice(i, 1) -} -} +RendererCSS3D.prototype.clearStyleProperties = function(element) { + element.style.webkitTransformStyle = ''; + element.style.msTransformStyle = ''; + element.style.mozTransformStyle = ''; + element.style.position = '' }; -self.getCacheSize = function() { -return _downloaded.size() +RendererCSS3D.prototype.setViewportSize = function(width, height) { + this._width = width; + this._height = height; + this._rootElement.width = this._width; + this._rootElement.height = this._height; + this._flatten3D.style.width = this._width; + this._flatten3D.style.height = this._height; + this._3dViewportDiv.width = this._width; + this._3dViewportDiv.height = this._height +}; +var updateCSS = function(e, t) { + e.style.webkitTransform = t; + e.style.msTransform = t; + e.style.mozTransform = t }; -self.currentlyDownloading = function() { -return _activeDownloadsCount != 0 +RendererCSS3D.prototype.updateTransforms = function(node, transform) { + var node, + current, + transform, + i, + identity, + q = []; + identity = new CSSMatrix; + identity.m11 = 1.0; + identity.m12 = 0.0; + identity.m13 = 0.0; + identity.m14 = 0.0; + identity.m21 = 0.0; + identity.m22 = 1.0; + identity.m23 = 0.0; + identity.m24 = 0.0; + identity.m31 = 0.0; + identity.m32 = 0.0; + identity.m33 = 1.0; + identity.m34 = 0.0; + identity.m41 = 0.0; + identity.m42 = 0.0; + identity.m43 = 0.0; + identity.m44 = 1.0; + if (!node) { + node = this._rootElement + } + if (!transform) { + transform = identity + } + if (node['$$matrixTransform']) { + transform = transform.multiply(node['$$matrixTransform']) + } + if (node.childNodes.length === 0 || node['$$isLeaf']) { + updateCSS(node, transform) + } else { + updateCSS(node, identity); + for (i = 0; i < node.childNodes.length; ++i) { + this.updateTransforms(node.childNodes[i], transform) + } + } }; -self.update = function() { -self.completed = []; -_queue.sort(function(l, r) { -return r.priority - l.priority -}); -for (var i=0; i < _queue.length; i++) { -var downloadRequest=_queue[i]; -var url=downloadRequest.url; -var downloadState=self.getState(url); -switch (downloadState) { -case TileDownloadState.none: -case TileDownloadState.timedout: -case TileDownloadState.cacheExpired: -if (_activeDownloadsCount < _maxConcurrentTileDownloads) { -if (!_activeDownloads[url]) { -_activeDownloadsCount++; -var img=document.createElement('img'); -_activeDownloads[url] = img; -img[_downloadRequestKey] = downloadRequest; -if (tileCacheId && PlatformJS && PlatformJS.Utilities) { -(function(img) { -var onDownloadFailedBinding=_onDownloadFailed.bind(img); -PlatformJS.Utilities.fetchImage(tileCacheId, url, null).then(function jspanoviewer_fetchImageComplete(url) { -if (url) { -img.src = url; -img.onload = _onDownloadComplete; -img.onerror = _onDownloadFailed; -img.onabort = _onDownloadFailed -} -else { -onDownloadFailedBinding() -} -}, onDownloadFailedBinding) -})(img) -} -else { -img.src = url; -img.onload = _onDownloadComplete; -img.onerror = _onDownloadFailed; -img.onabort = _onDownloadFailed -} -img[_timeoutIdKey] = window.setTimeout((function() { -var closureImg=img; -return function() { -_onDownloadTimeout.call(closureImg) -} -})(), _downloadTimeout); -var useCORS=false; -if (self.useCORS) { -useCORS = !Utils.isDataUrl(url) && !Utils.isRelativeUrl(url) && !Utils.areSameDomain(url, window.location.toString()) -} -if (useCORS) { -img.crossOrigin = '' -} -} -} -break; -case TileDownloadState.downloading: -break; -default: -break -} -} +RendererCSS3D.prototype.render = function() { + var invertYAxisMatrix = Matrix4x4.createScale(1, -1, 1); + var viewportToScreenTransform = GraphicsHelper.createViewportToScreen(this._width, this._height); + var cssScreenSpaceViewProjectionTransform = viewportToScreenTransform.multiply(this._viewProjMatrix.multiply(invertYAxisMatrix)); + this.setCSS3DViewProjection(cssScreenSpaceViewProjectionTransform); + var i, + j, + added; + var imageElement, + texture; + for (var id in this._removedRenderables) { + var imgElement, + divElement = document.getElementById(id); + if (divElement) { + imgElement = divElement.firstChild; + if (imgElement) { + this.clearStyleProperties(imgElement); + if (imgElement.parentNode) { + imgElement.parentNode.removeChild(imgElement) + } + } else { + this._error('Expected imgElement') + } + if (divElement.parentNode) { + divElement.parentNode.removeChild(divElement) + } + } else { + Utils.log('Cannot find and remove element') + } + } + this._removedRenderables = {}; + for (var renderableId in this._renderables) { + if (this._renderables.hasOwnProperty(renderableId)) { + var renderable = this._renderables[renderableId]; + added = false; + imageElement = null; + texture = null; + if (renderable._material && renderable._material._texture) { + texture = renderable._material._texture; + if (texture._isReady && texture._isDirty) { + imageElement = renderable._material._texture._image + } else if (renderable.transformUpdated) { + var img = renderable._material._texture._image; + if (img.parentNode) { + this.setCSS3DTransform(img.parentNode, img, renderable._transform, renderable._order); + renderable.transformUpdated = false + } + } + } + if (imageElement == null) { + continue + } + imageElement._order = renderable._order; + imageElement.style.zIndex = renderable._order; + if (imageElement.parentNode) { + this._error('Expected imageElement with no parent') + } + this.setStyleProperties(imageElement); + var xformNode = document.createElement('div'); + xformNode.id = renderableId; + xformNode.style.position = 'absolute'; + xformNode.style.zIndex = imageElement.style.zIndex; + if (quirks.supportsPreserve3D && !Config.forceIERenderPath) { + xformNode.style.webkitTransformOrigin = '0px 0px 0'; + xformNode.style.webkitTransformStyle = 'preserve-3d'; + xformNode.style.mozTransformOrigin = '0px 0px 0'; + xformNode.style.mozTransformStyle = 'preserve-3d' + } else { + xformNode['$$isLeaf'] = true + } + xformNode.appendChild(imageElement); + this.setCSS3DTransform(xformNode, imageElement, renderable._transform, renderable._order); + for (j = 0; j < this._3dViewportDiv.childNodes.length; ++j) { + var img = this._3dViewportDiv.childNodes[j].childNodes[0]; + if (img == undefined || img == imageElement) { + this._error('object state inconsistency') + } + if (img && imageElement._order && img._order > imageElement._order) { + added = true; + this._3dViewportDiv.insertBefore(xformNode, this._3dViewportDiv.childNodes[j]); + texture._isDirty = false; + break + } + } + if (!added) { + this._3dViewportDiv.appendChild(xformNode); + texture._isDirty = false + } + } + } + if (!quirks.supportsPreserve3D || Config.forceIERenderPath) { + this.updateTransforms() + } + var callbackRemaining = false; + if (this._frameCallbacks) { + for (var i = 0; i < this._frameCallbacks.length; i++) { + if (this._frameCallbacks[i].count > 0) { + callbackRemaining = true + } else if (this._frameCallbacks[i].count == 0) { + this._frameCallbacks[i].cb() + } + this._frameCallbacks[i].count-- + } + if (!callbackRemaining) { + this._frameCallbacks = [] + } + } +}; + +function createKeyFrames(name, keyframeprefix) { + var keyframes = '@' + keyframeprefix + 'keyframes ' + name + ' { ' + 'from {' + printObj(startProps) + ' } '; + 'to {' + printObj(endProps) + ' } ' + '}'; + if (document.styleSheets && document.styleSheets.length) { + document.styleSheets[0].insertRule(keyframes, 0) + } else { + this._error('Page must have style sheet') + } }; -function _onDownloadComplete() { -if (!this[_processedKey]) { -var url=this[_downloadRequestKey].url; -_endDownload(this, url); -_allDownloadedUrls.insert(url, true); -self.completed.push(this); -this[_tokenKey] = this[_downloadRequestKey].token; -_downloaded.insert(url, this); -_succeedCount++; -tileDownloadSucceededCallback(_failCount, _succeedCount) -} -} -function _onDownloadFailed() { -if (!this[_processedKey]) { -var url=this[_downloadRequestKey].url; -_endDownload(this, url); -if (quirks.useImageDisposer) { -this.src = _spacerImageUrl -} -_failed.insert(url, TileDownloadState.failed); -_failCount++; -tileDownloadFailedCallback(_failCount, _succeedCount) -} -} -function _onDownloadTimeout() { -if (!this[_processedKey]) { -var url=this[_downloadRequestKey].url; -_endDownload(this, url); -if (quirks.useImageDisposer) { -this.src = _spacerImageUrl -} -_failed.insert(url, TileDownloadState.timedout); -_failCount++; -tileDownloadFailedCallback(_failCount, _succeedCount) -} -} -function _endDownload(img, url) { -img[_processedKey] = true; -img.onload = null; -img.onerror = null; -img.onabort = null; -window.clearTimeout(img[_timeoutIdKey]); -var downloadRequest=img[_downloadRequestKey]; -var i=_queue.length; -while (i--) { -if (_queue[i] === downloadRequest) { -_queue.splice(i, 1) -} -} -_activeDownloadsCount--; -delete _activeDownloads[url]; -i = self.completed.length -} -}; -var TileDownloadState={ -none: 0, downloading: 1, ready: 2, failed: 3, timedout: 4, cacheExpired: 5 -}; -"use strict"; -var PolygonTileFloodFiller={ -floodFill: function floodFill(gridWidth, gridHeight, polygon, startingTile) { -this.cachedCrossings = {}; -if (startingTile == null) { -if (polygon.length == 0) { -return [] -} -startingTile = this.calculateStartingTile(gridWidth, gridHeight, polygon) -} -var tileQueue=[startingTile]; -var tilesEnqueued=new Array(gridWidth * gridHeight); -tilesEnqueued[startingTile.y * gridWidth + startingTile.x] = true; -var result=[]; -while (tileQueue.length > 0) { -var tile=tileQueue.shift(); -result.push(tile); -var neighbors=[]; -if (this.tileCenterInPolygon(tile, polygon) || this.gridCrossesPolygon(tile, polygon)) { -neighbors.push(this.getLeftNeighbor(tile)); -neighbors.push(this.getRightNeighbor(tile)); -neighbors.push(this.getTopNeighbor(tile)); -neighbors.push(this.getBottomNeighbor(tile)) -} -for (var i=0; i < neighbors.length; i++) { -var neighbor=neighbors[i]; -if (this.isValidTile(neighbor, gridWidth, gridHeight) && !tilesEnqueued[neighbor.y * gridWidth + neighbor.x]) { -tileQueue.push(neighbor); -tilesEnqueued[neighbor.y * gridWidth + neighbor.x] = true -} -} -} -this.cachedCrossings = null; -return result -}, calculateStartingTile: function calculateStartingTile(gridWidth, gridHeight, polygon) { -var center={ -x: 0, y: 0 -}; -for (var i=0; i < polygon.length; i++) { -center.x += polygon[i].x; -center.y += polygon[i].y -} -var invLength=1.0 / polygon.length; -center.x *= invLength; -center.y *= invLength; -center.x = Math.floor(center.x); -center.y = Math.floor(center.y); -center.x = Math.max(0, center.x); -center.y = Math.max(0, center.y); -center.x = Math.min(gridWidth - 1, center.x); -center.y = Math.min(gridHeight - 1, center.y); -return center -}, getLeftNeighbor: function getLeftNeighbor(tile) { -return { -x: tile.x - 1, y: tile.y -} -}, getRightNeighbor: function getRightNeighbor(tile) { -return { -x: tile.x + 1, y: tile.y -} -}, getTopNeighbor: function getTopNeighbor(tile) { -return { -x: tile.x, y: tile.y - 1 -} -}, getBottomNeighbor: function getBottomNeighbor(tile) { -return { -x: tile.x, y: tile.y + 1 -} -}, tileCenterInPolygon: function tileCenterInPolygon(tile, polygon) { -return this.pointInPolygon({ -x: tile.x + 0.5, y: tile.y + 0.5 -}, polygon) -}, isValidTile: function isValidTile(tile, gridWidth, gridHeight) { -if (isNaN(tile.x) || isNaN(tile.y) || tile.x < 0 || tile.y < 0 || tile.x >= gridWidth || tile.y >= gridHeight) { -return false -} -return true -}, normalizeNumber: function normalizeNumber(number) { -if (number >= 0) { -return 1 -} -return -1 -}, gridCrossesPolygon: function gridCrossesPolygon(gridUpperLeftPoint, polygon) { -var gridUpperRightPoint={ -x: gridUpperLeftPoint.x + 1, y: gridUpperLeftPoint.y -}; -var gridLowerRightPoint={ -x: gridUpperLeftPoint.x + 1, y: gridUpperLeftPoint.y + 1 -}; -var gridLowerLeftPoint={ -x: gridUpperLeftPoint.x, y: gridUpperLeftPoint.y + 1 -}; -if (this.countCrossings(gridUpperLeftPoint, polygon) !== this.countCrossings(gridUpperRightPoint, polygon)) { -return true -} -else if (this.countCrossings(gridLowerLeftPoint, polygon) !== this.countCrossings(gridLowerRightPoint, polygon)) { -return true -} -else if (this.countCrossings(gridUpperLeftPoint, polygon, true) !== this.countCrossings(gridLowerLeftPoint, polygon, true)) { -return true -} -else if (this.countCrossings(gridUpperRightPoint, polygon, true) !== this.countCrossings(gridLowerRightPoint, polygon, true)) { -return true -} -else { -return false -} -}, pointInPolygon: function pointInPolygon(point, polygon) { -var crossCount=this.countCrossings(point, polygon); -return (crossCount % 2 === 1) -}, cachedCrossings: {}, countCrossings: function countCrossings(point, polygon, castRayDown) { -var adjustedPolygon=[]; -var i, -j; -var crossCount=0; -var hash=point.x + ',' + point.y + ((castRayDown) ? ',down' : ',right'); -if (this.cachedCrossings[hash] != null) { -return this.cachedCrossings[hash] -} -if (castRayDown) { -for (i = 0; i < polygon.length; i++) { -adjustedPolygon.push({ -x: polygon[i].y - point.y, y: polygon[i].x - point.x -}) -} -} -else { -for (i = 0; i < polygon.length; i++) { -adjustedPolygon.push({ -x: polygon[i].x - point.x, y: polygon[i].y - point.y -}) -} -} -for (i = 0; i < adjustedPolygon.length; i++) { -j = i + 1; -if (j >= adjustedPolygon.length) { -j = 0 -} -var y0=adjustedPolygon[i].y; -var y1=adjustedPolygon[j].y; -var x0=adjustedPolygon[i].x; -var x1=adjustedPolygon[j].x; -var ySign0=this.normalizeNumber(y0); -var ySign1=this.normalizeNumber(y1); -var xSign0=this.normalizeNumber(x0); -var xSign1=this.normalizeNumber(x1); -if (ySign0 != ySign1) { -if (xSign0 === 1 && xSign1 === 1) { -crossCount++ -} -else if (xSign0 !== xSign1) { -var m=(y0 - y1) / (x0 - x1); -var b=y0 - (m * x0); -if (b >= 0) { -crossCount++ -} -} -} -} -this.cachedCrossings[hash] = crossCount; -return crossCount -} -}; -"use strict"; -var CSSMatrix=window.CSSMatrix || window.WebKitCSSMatrix || window.MSCSSMatrix || window.MozCSSMatrix; -function RendererCSS3D(win, width, height) { -RendererCSS3D.__super.call(this, win); -this._width = width; -this._height = height; -if (!RendererCheckCSS3D.isValidBrowser()) { -throw'css3d is not supported'; -} -this._rootElement = document.createElement('div'); -this._rootElement.width = this._width; -this._rootElement.height = this._height; -this._flatten3D = document.createElement('div'); -this._flatten3D.style.width = this._width + 'px'; -this._flatten3D.style.height = this._height + 'px'; -this._flatten3D.style.position = 'absolute'; -this._flatten3D.style.webkitTransformStyle = 'flat'; -this._flatten3D.style.msTransformStyle = 'flat'; -this._flatten3D.style.mozTransformStyle = 'flat'; -this._flatten3D.style.backgroundColor = 'rgba(' + this._clearColor.r * 255.0 + ',' + this._clearColor.g * 255.0 + ',' + this._clearColor.b * 255.0 + ',' + this._clearColor.a + ')'; -this._3dViewportDiv = document.createElement('div'); -this._3dViewportDiv.width = this._width; -this._3dViewportDiv.height = this._height; -this._3dViewportDiv.style.position = 'absolute'; -this._flatten3D.appendChild(this._3dViewportDiv); -this._rootElement.appendChild(this._flatten3D); -if (quirks.supportsPreserve3D && !Config.forceIERenderPath) { -this._3dViewportDiv.style.webkitTransformStyle = 'preserve-3d'; -this._3dViewportDiv.style.webkitTransform = 'matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1)'; -this._3dViewportDiv.style.mozTransformStyle = 'preserve-3d'; -this._3dViewportDiv.style.mozTransform = 'matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1)' -} -win.appendChild(this._rootElement) -} -; -extend(RendererCSS3D, Renderer); -RendererCSS3D.prototype.ignoreEvent = function() { -return false -}; -RendererCSS3D.prototype.setStyleProperties = function(element) { -if (quirks.supportsPreserve3D && !Config.forceIERenderPath) { -element.style.webkitTransformStyle = 'preserve-3d'; -element.style.mozTransformStyle = 'preserve-3d' -} -element.style.position = 'absolute' -}; -RendererCSS3D.prototype.clearStyleProperties = function(element) { -element.style.webkitTransformStyle = ''; -element.style.msTransformStyle = ''; -element.style.mozTransformStyle = ''; -element.style.position = '' -}; -RendererCSS3D.prototype.setViewportSize = function(width, height) { -this._width = width; -this._height = height; -this._rootElement.width = this._width; -this._rootElement.height = this._height; -this._flatten3D.style.width = this._width; -this._flatten3D.style.height = this._height; -this._3dViewportDiv.width = this._width; -this._3dViewportDiv.height = this._height -}; -var updateCSS=function(e, t) { -e.style.webkitTransform = t; -e.style.msTransform = t; -e.style.mozTransform = t -}; -RendererCSS3D.prototype.updateTransforms = function(node, transform) { -var node, -current, -transform, -i, -identity, -q=[]; -identity = new CSSMatrix; -identity.m11 = 1.0; -identity.m12 = 0.0; -identity.m13 = 0.0; -identity.m14 = 0.0; -identity.m21 = 0.0; -identity.m22 = 1.0; -identity.m23 = 0.0; -identity.m24 = 0.0; -identity.m31 = 0.0; -identity.m32 = 0.0; -identity.m33 = 1.0; -identity.m34 = 0.0; -identity.m41 = 0.0; -identity.m42 = 0.0; -identity.m43 = 0.0; -identity.m44 = 1.0; -if (!node) { -node = this._rootElement -} -if (!transform) { -transform = identity -} -if (node['$$matrixTransform']) { -transform = transform.multiply(node['$$matrixTransform']) -} -if (node.childNodes.length === 0 || node['$$isLeaf']) { -updateCSS(node, transform) -} -else { -updateCSS(node, identity); -for (i = 0; i < node.childNodes.length; ++i) { -this.updateTransforms(node.childNodes[i], transform) -} -} -}; -RendererCSS3D.prototype.render = function() { -var invertYAxisMatrix=Matrix4x4.createScale(1, -1, 1); -var viewportToScreenTransform=GraphicsHelper.createViewportToScreen(this._width, this._height); -var cssScreenSpaceViewProjectionTransform=viewportToScreenTransform.multiply(this._viewProjMatrix.multiply(invertYAxisMatrix)); -this.setCSS3DViewProjection(cssScreenSpaceViewProjectionTransform); -var i, -j, -added; -var imageElement, -texture; -for (var id in this._removedRenderables) { -var imgElement, -divElement=document.getElementById(id); -if (divElement) { -imgElement = divElement.firstChild; -if (imgElement) { -this.clearStyleProperties(imgElement); -if (imgElement.parentNode) { -imgElement.parentNode.removeChild(imgElement) -} -} -else { -this._error('Expected imgElement') -} -if (divElement.parentNode) { -divElement.parentNode.removeChild(divElement) -} -} -else { -Utils.log('Cannot find and remove element') -} -} -this._removedRenderables = {}; -for (var renderableId in this._renderables) { -if (this._renderables.hasOwnProperty(renderableId)) { -var renderable=this._renderables[renderableId]; -added = false; -imageElement = null; -texture = null; -if (renderable._material && renderable._material._texture) { -texture = renderable._material._texture; -if (texture._isReady && texture._isDirty) { -imageElement = renderable._material._texture._image -} -else if (renderable.transformUpdated) { -var img=renderable._material._texture._image; -if (img.parentNode) { -this.setCSS3DTransform(img.parentNode, img, renderable._transform, renderable._order); -renderable.transformUpdated = false -} -} -} -if (imageElement == null) { -continue -} -imageElement._order = renderable._order; -imageElement.style.zIndex = renderable._order; -if (imageElement.parentNode) { -this._error('Expected imageElement with no parent') -} -this.setStyleProperties(imageElement); -var xformNode=document.createElement('div'); -xformNode.id = renderableId; -xformNode.style.position = 'absolute'; -xformNode.style.zIndex = imageElement.style.zIndex; -if (quirks.supportsPreserve3D && !Config.forceIERenderPath) { -xformNode.style.webkitTransformOrigin = '0px 0px 0'; -xformNode.style.webkitTransformStyle = 'preserve-3d'; -xformNode.style.mozTransformOrigin = '0px 0px 0'; -xformNode.style.mozTransformStyle = 'preserve-3d' -} -else { -xformNode['$$isLeaf'] = true -} -xformNode.appendChild(imageElement); -this.setCSS3DTransform(xformNode, imageElement, renderable._transform, renderable._order); -for (j = 0; j < this._3dViewportDiv.childNodes.length; ++j) { -var img=this._3dViewportDiv.childNodes[j].childNodes[0]; -if (img == undefined || img == imageElement) { -this._error('object state inconsistency') -} -if (img && imageElement._order && img._order > imageElement._order) { -added = true; -this._3dViewportDiv.insertBefore(xformNode, this._3dViewportDiv.childNodes[j]); -texture._isDirty = false; -break -} -} -if (!added) { -this._3dViewportDiv.appendChild(xformNode); -texture._isDirty = false -} -} -} -if (!quirks.supportsPreserve3D || Config.forceIERenderPath) { -this.updateTransforms() -} -var callbackRemaining=false; -if (this._frameCallbacks) { -for (var i=0; i < this._frameCallbacks.length; i++) { -if (this._frameCallbacks[i].count > 0) { -callbackRemaining = true -} -else if (this._frameCallbacks[i].count == 0) { -this._frameCallbacks[i].cb() -} -this._frameCallbacks[i].count-- -} -if (!callbackRemaining) { -this._frameCallbacks = [] -} -} -}; -function createKeyFrames(name, keyframeprefix) { -var keyframes='@' + keyframeprefix + 'keyframes ' + name + ' { ' + 'from {' + printObj(startProps) + ' } '; -'to {' + printObj(endProps) + ' } ' + '}'; -if (document.styleSheets && document.styleSheets.length) { -document.styleSheets[0].insertRule(keyframes, 0) -} -else { -this._error('Page must have style sheet') -} -} -; RendererCSS3D.prototype.transitionEndCallback = function(event) { -if (this.completeCallback) { -this.completeCallback(this.material, this.callbackInfo) -} -this.material._animation = {_ended: true}; -delete this.material; -delete this.completeCallback; -delete this.callbackInfo; -this.removeEventListener('webkitTransitionEnd', RendererCSS3D.prototype.transitionEndCallback, false); -this.removeEventListener('mozTransitionEnd', RendererCSS3D.prototype.transitionEndCallback, false); -this.removeEventListener('MSTransitionEnd', RendererCSS3D.prototype.transitionEndCallback, false) + if (this.completeCallback) { + this.completeCallback(this.material, this.callbackInfo) + } + this.material._animation = { _ended: true }; + delete this.material; + delete this.completeCallback; + delete this.callbackInfo; + this.removeEventListener('webkitTransitionEnd', RendererCSS3D.prototype.transitionEndCallback, false); + this.removeEventListener('mozTransitionEnd', RendererCSS3D.prototype.transitionEndCallback, false); + this.removeEventListener('MSTransitionEnd', RendererCSS3D.prototype.transitionEndCallback, false) }; RendererCSS3D.prototype.animate = function(renderable, startProperties, endProperties, duration, easing, completeCallback, completeCallbackInfo) { -function FrameCallback(cb, count) { -this.cb = cb; -this.count = count -} -if (renderable && renderable._material && renderable._material._texture && renderable._material._texture._image) { -var material=renderable._material; -var cssStartProps={}, -cssEndProps={}; -for (var j=0; j < 2; j++) { -var fromProps=j == 0 ? startProperties : endProperties; -var toProps=j == 0 ? cssStartProps : cssEndProps; -var transformStr=''; -for (var prop in fromProps) { -if (fromProps.hasOwnProperty(prop)) { -switch (prop) { -case'opacity': -toProps['opacity'] = fromProps['opacity']; -break; -case'x': -transformStr += 'translateX(-' + fromProps['x'] + 'px) '; -break; -case'y': -transformStr += 'translateY(' + fromProps['y'] + 'px) '; -break; -case'sx': -transformStr += 'scaleX(' + fromProps['sx'] + ') '; -break; -case'sy': -transformStr += 'scaleY(' + fromProps['sy'] + ') '; -break; -case'rotate': -transformStr += 'rotate(-' + fromProps['rotate'] + 'deg) '; -break -} -} -} -if (transformStr != '') { -toProps['-webkit-transform'] = transformStr; -toProps['-ms-transform'] = transformStr; -toProps['-moz-transform'] = transformStr -} -} -if (startProperties) { -Utils.css(material._texture._image, { -'-webkit-transition-duration': duration + 'ms', '-webkit-transition-timing-function': easing, '-ms-transition-duration': duration + 'ms', '-ms-transition-timing-function': easing, '-moz-transition-duration': duration + 'ms', '-moz-transition-timing-function': easing -}); -Utils.css(material._texture._image, cssStartProps) -} -material._texture._image.material = material; -material._texture._image.callbackInfo = completeCallbackInfo; -material._texture._image.completeCallback = completeCallback; -material._texture._image.addEventListener('webkitTransitionEnd', RendererCSS3D.prototype.transitionEndCallback, false); -material._texture._image.addEventListener('MSTransitionEnd', RendererCSS3D.prototype.transitionEndCallback, false); -material._texture._image.addEventListener('mozTransitionEnd', RendererCSS3D.prototype.transitionEndCallback, false); -var renderer=this; -var startTransition=function() { -Utils.css(material._texture._image, cssEndProps) -}; -if (this._frameCallbacks == undefined) { -this._frameCallbacks = [] -} -this._frameCallbacks.push(new FrameCallback(startTransition, 1)); -material._animation = {_ended: false} -} + function FrameCallback(cb, count) { + this.cb = cb; + this.count = count + } + if (renderable && renderable._material && renderable._material._texture && renderable._material._texture._image) { + var material = renderable._material; + var cssStartProps = {}, + cssEndProps = {}; + for (var j = 0; j < 2; j++) { + var fromProps = j == 0 ? startProperties : endProperties; + var toProps = j == 0 ? cssStartProps : cssEndProps; + var transformStr = ''; + for (var prop in fromProps) { + if (fromProps.hasOwnProperty(prop)) { + switch (prop) { + case 'opacity': + toProps['opacity'] = fromProps['opacity']; + break; + case 'x': + transformStr += 'translateX(-' + fromProps['x'] + 'px) '; + break; + case 'y': + transformStr += 'translateY(' + fromProps['y'] + 'px) '; + break; + case 'sx': + transformStr += 'scaleX(' + fromProps['sx'] + ') '; + break; + case 'sy': + transformStr += 'scaleY(' + fromProps['sy'] + ') '; + break; + case 'rotate': + transformStr += 'rotate(-' + fromProps['rotate'] + 'deg) '; + break + } + } + } + if (transformStr != '') { + toProps['-webkit-transform'] = transformStr; + toProps['-ms-transform'] = transformStr; + toProps['-moz-transform'] = transformStr + } + } + if (startProperties) { + Utils.css(material._texture._image, { + '-webkit-transition-duration': duration + 'ms', + '-webkit-transition-timing-function': easing, + '-ms-transition-duration': duration + 'ms', + '-ms-transition-timing-function': easing, + '-moz-transition-duration': duration + 'ms', + '-moz-transition-timing-function': easing + }); + Utils.css(material._texture._image, cssStartProps) + } + material._texture._image.material = material; + material._texture._image.callbackInfo = completeCallbackInfo; + material._texture._image.completeCallback = completeCallback; + material._texture._image.addEventListener('webkitTransitionEnd', RendererCSS3D.prototype.transitionEndCallback, false); + material._texture._image.addEventListener('MSTransitionEnd', RendererCSS3D.prototype.transitionEndCallback, false); + material._texture._image.addEventListener('mozTransitionEnd', RendererCSS3D.prototype.transitionEndCallback, false); + var renderer = this; + var startTransition = function() { + Utils.css(material._texture._image, cssEndProps) + }; + if (this._frameCallbacks == undefined) { + this._frameCallbacks = [] + } + this._frameCallbacks.push(new FrameCallback(startTransition, 1)); + material._animation = { _ended: false } + } }; RendererCSS3D.prototype.setCSS3DTransform = function(elem, image, transform, order) { -var invertY=Matrix4x4.createScale(1, -1, 1); -var height=Math.max(image.height || 0, image.naturalHeight || 0); -var t=Matrix4x4.createTranslation(0, -height, 0); -var preTransform=invertY.multiply(t); -var postTransform=invertY; -var invertY=Matrix4x4.createScale(1, -1, 1); -var t=Matrix4x4.createTranslation(0, -height, 0); -var m=invertY.multiply(transform.multiply(invertY.multiply(t))); -m = postTransform.multiply(transform.multiply(preTransform)); -m = m.transpose(); -var mCss=new CSSMatrix; -mCss.m11 = m.m11; -mCss.m12 = m.m12; -mCss.m13 = m.m13; -mCss.m14 = m.m14; -mCss.m21 = m.m21; -mCss.m22 = m.m22; -mCss.m23 = m.m23; -mCss.m24 = m.m24; -mCss.m31 = m.m31; -mCss.m32 = m.m32; -mCss.m33 = m.m33; -mCss.m34 = m.m34; -mCss.m41 = m.m41; -mCss.m42 = m.m42; -mCss.m43 = m.m43; -mCss.m44 = m.m44; -if (quirks.supportsPreserve3D && !Config.forceIERenderPath) { -elem.style.webkitTransform = mCss; -elem.style.mozTransform = mCss; -elem.style.msTransform = mCss -} -else { -elem['$$matrixTransform'] = mCss -} + var invertY = Matrix4x4.createScale(1, -1, 1); + var height = Math.max(image.height || 0, image.naturalHeight || 0); + var t = Matrix4x4.createTranslation(0, -height, 0); + var preTransform = invertY.multiply(t); + var postTransform = invertY; + var invertY = Matrix4x4.createScale(1, -1, 1); + var t = Matrix4x4.createTranslation(0, -height, 0); + var m = invertY.multiply(transform.multiply(invertY.multiply(t))); + m = postTransform.multiply(transform.multiply(preTransform)); + m = m.transpose(); + var mCss = new CSSMatrix; + mCss.m11 = m.m11; + mCss.m12 = m.m12; + mCss.m13 = m.m13; + mCss.m14 = m.m14; + mCss.m21 = m.m21; + mCss.m22 = m.m22; + mCss.m23 = m.m23; + mCss.m24 = m.m24; + mCss.m31 = m.m31; + mCss.m32 = m.m32; + mCss.m33 = m.m33; + mCss.m34 = m.m34; + mCss.m41 = m.m41; + mCss.m42 = m.m42; + mCss.m43 = m.m43; + mCss.m44 = m.m44; + if (quirks.supportsPreserve3D && !Config.forceIERenderPath) { + elem.style.webkitTransform = mCss; + elem.style.mozTransform = mCss; + elem.style.msTransform = mCss + } else { + elem['$$matrixTransform'] = mCss + } }; RendererCSS3D.prototype.setCSS3DViewProjection = function(viewProjection) { -var m=viewProjection.transpose(); -var mCss=new CSSMatrix; -mCss.m11 = m.m11; -mCss.m12 = m.m12; -mCss.m13 = m.m13; -mCss.m14 = m.m14; -mCss.m21 = m.m21; -mCss.m22 = m.m22; -mCss.m23 = m.m23; -mCss.m24 = m.m24; -mCss.m31 = m.m31; -mCss.m32 = m.m32; -mCss.m33 = m.m33; -mCss.m34 = m.m34; -mCss.m41 = m.m41; -mCss.m42 = m.m42; -mCss.m43 = m.m43; -mCss.m44 = m.m44; -if (quirks.supportsPreserve3D && !Config.forceIERenderPath) { -this._3dViewportDiv.style.webkitTransform = mCss; -this._3dViewportDiv.style.mozTransform = mCss; -this._3dViewportDiv.style.msTransform = mCss -} -else { -this._3dViewportDiv['$$matrixTransform'] = mCss -} + var m = viewProjection.transpose(); + var mCss = new CSSMatrix; + mCss.m11 = m.m11; + mCss.m12 = m.m12; + mCss.m13 = m.m13; + mCss.m14 = m.m14; + mCss.m21 = m.m21; + mCss.m22 = m.m22; + mCss.m23 = m.m23; + mCss.m24 = m.m24; + mCss.m31 = m.m31; + mCss.m32 = m.m32; + mCss.m33 = m.m33; + mCss.m34 = m.m34; + mCss.m41 = m.m41; + mCss.m42 = m.m42; + mCss.m43 = m.m43; + mCss.m44 = m.m44; + if (quirks.supportsPreserve3D && !Config.forceIERenderPath) { + this._3dViewportDiv.style.webkitTransform = mCss; + this._3dViewportDiv.style.mozTransform = mCss; + this._3dViewportDiv.style.msTransform = mCss + } else { + this._3dViewportDiv['$$matrixTransform'] = mCss + } }; RendererCSS3D.prototype.setCSS3DOpacity = function(elem, opacity, duration) { -elem.style.webkitTransition = 'opacity ' + duration + 's linear'; -elem.style.mozTransition = 'opacity ' + duration + 's linear'; -elem.style.msTransition = 'opacity ' + duration + 's linear'; -elem.style.opacity = opacity + elem.style.webkitTransition = 'opacity ' + duration + 's linear'; + elem.style.mozTransition = 'opacity ' + duration + 's linear'; + elem.style.msTransition = 'opacity ' + duration + 's linear'; + elem.style.opacity = opacity }; RendererCSS3D.prototype.setClearColor = function(color) { -this._checkClearColor(color); -this._clearColor = color; -this._flatten3D.style.backgroundColor = 'rgba(' + this._clearColor.r * 255.0 + ',' + this._clearColor.g * 255.0 + ',' + this._clearColor.b * 255.0 + ',' + this._clearColor.a + ')' + this._checkClearColor(color); + this._clearColor = color; + this._flatten3D.style.backgroundColor = 'rgba(' + this._clearColor.r * 255.0 + ',' + this._clearColor.g * 255.0 + ',' + this._clearColor.b * 255.0 + ',' + this._clearColor.a + ')' }; "use strict"; + function RendererWebGL(win, width, height) { -RendererWebGL.__super.call(this, win); -this._width = width; -this._height = height; -var canvas=document.createElement('canvas'); -this._rootElement = canvas; -this._rootElement.width = this._width; -this._rootElement.height = this._height; -this._textureCache = new MemoryCache(300); -this._gl = RendererCheckWebGL.getWebGLContext(this._rootElement); -if (!this._gl) { -throw"WebGL is not supported."; -} -else if (quirks.isWebGLCORSRequired && !quirks.isWebGLCORSSupported) { -throw'CORS image textures are not supported in this browser'; -} -function throwOnGLError(err, funcName, args) { -throw WebGLDebugUtils.glEnumToString(err) + " was caused by call to" + funcName; -} -; -var gl=this._gl; -gl.viewportWidth = this._width; -gl.viewportHeight = this._height; -gl.viewport(0, 0, this._gl.viewportWidth, this._gl.viewportHeight); -gl.clearColor(this._clearColor.r, this._clearColor.g, this._clearColor.b, this._clearColor.a); -this._gl.clearDepth(1.0); -gl.disable(gl.DEPTH_TEST); -gl.disable(gl.CULL_FACE); -this._textureFilterTypeMap = []; -this._textureFilterTypeMap[Texture.Filter.NEAREST] = gl.NEAREST; -this._textureFilterTypeMap[Texture.Filter.LINEAR] = gl.LINEAR; -this._textureFilterTypeMap[Texture.Filter.LINEAR_MIPMAP_LINEAR] = gl.LINEAR_MIPMAP_LINEAR; -this._textureWrapTypeMap = []; -this._textureWrapTypeMap[Texture.Wrap.CLAMP_TO_EDGE] = gl.CLAMP_TO_EDGE; -this._textureWrapTypeMap[Texture.Wrap.REPEAT] = gl.REPEAT; -this.init(); -win.appendChild(this._rootElement) + RendererWebGL.__super.call(this, win); + this._width = width; + this._height = height; + var canvas = document.createElement('canvas'); + this._rootElement = canvas; + this._rootElement.width = this._width; + this._rootElement.height = this._height; + this._textureCache = new MemoryCache(300); + this._gl = RendererCheckWebGL.getWebGLContext(this._rootElement); + if (!this._gl) { + throw "WebGL is not supported."; + } else if (quirks.isWebGLCORSRequired && !quirks.isWebGLCORSSupported) { + throw 'CORS image textures are not supported in this browser'; + } + + function throwOnGLError(err, funcName, args) { + throw WebGLDebugUtils.glEnumToString(err) + " was caused by call to" + funcName; + }; + var gl = this._gl; + gl.viewportWidth = this._width; + gl.viewportHeight = this._height; + gl.viewport(0, 0, this._gl.viewportWidth, this._gl.viewportHeight); + gl.clearColor(this._clearColor.r, this._clearColor.g, this._clearColor.b, this._clearColor.a); + this._gl.clearDepth(1.0); + gl.disable(gl.DEPTH_TEST); + gl.disable(gl.CULL_FACE); + this._textureFilterTypeMap = []; + this._textureFilterTypeMap[Texture.Filter.NEAREST] = gl.NEAREST; + this._textureFilterTypeMap[Texture.Filter.LINEAR] = gl.LINEAR; + this._textureFilterTypeMap[Texture.Filter.LINEAR_MIPMAP_LINEAR] = gl.LINEAR_MIPMAP_LINEAR; + this._textureWrapTypeMap = []; + this._textureWrapTypeMap[Texture.Wrap.CLAMP_TO_EDGE] = gl.CLAMP_TO_EDGE; + this._textureWrapTypeMap[Texture.Wrap.REPEAT] = gl.REPEAT; + this.init(); + win.appendChild(this._rootElement) } extend(RendererWebGL, Renderer); + function createShader(gl, shaderType, shaderText) { -var shader; -shader = gl.createShader(shaderType); -gl.shaderSource(shader, shaderText); -gl.compileShader(shader); -if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { -error = gl.getShaderInfoLog(shader); -Utils.log("Shader compiling error: " + error); -gl.deleteShader(shader); -return null -} -return shader + var shader; + shader = gl.createShader(shaderType); + gl.shaderSource(shader, shaderText); + gl.compileShader(shader); + if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { + error = gl.getShaderInfoLog(shader); + Utils.log("Shader compiling error: " + error); + gl.deleteShader(shader); + return null + } + return shader } RendererWebGL.prototype.init = function() { -var vsText='\ + var vsText = '\ uniform mat4 u_modelViewProjMat; \ uniform mat4 u_localMat; \ uniform float u_t, u_duration; \ @@ -2486,7 +2597,7 @@ var vsText='\ v_opacity = opacity; \ gl_Position = pos; \ }'; -var psText='\ + var psText = '\ precision mediump float; \n\ #define KERNEL_SIZE 9 \n\ uniform sampler2D u_diffuseTex; \n\ @@ -2505,3577 +2616,3892 @@ void main() { \n\ } \n\ gl_FragColor = color * vec4(1,1,1,v_opacity); \n\ }'; -var gl=this._gl; -this._vs = createShader(gl, gl.VERTEX_SHADER, vsText); -this._ps = createShader(gl, gl.FRAGMENT_SHADER, psText); -if (this._vs == null || this._ps == null) -throw"Failure initializing webgl: shader"; -this._shaderProgram = gl.createProgram(); -gl.attachShader(this._shaderProgram, this._vs); -gl.attachShader(this._shaderProgram, this._ps); -gl.linkProgram(this._shaderProgram); -if (!gl.getProgramParameter(this._shaderProgram, gl.LINK_STATUS)) { -gl.deleteProgram(this._shaderProgram); -gl.deleteShader(this._vs); -gl.deleteShader(this._ps); -return null -} -var numAttribs=gl.getProgramParameter(this._shaderProgram, gl.ACTIVE_ATTRIBUTES); -this._attribs = new Array(numAttribs); -this._attribLocations = {}; -for (var i=0; i < numAttribs; i++) { -var activeattrib=gl.getActiveAttrib(this._shaderProgram, i); -this._attribs[i] = activeattrib; -this._attribLocations[activeattrib.name] = gl.getAttribLocation(this._shaderProgram, activeattrib.name) -} -var numUniforms=gl.getProgramParameter(this._shaderProgram, gl.ACTIVE_UNIFORMS); -this._uniforms = new Array(numUniforms); -this._uniformLocations = {}; -for (var j=0; j < numUniforms; j++) { -var activeuniform=gl.getActiveUniform(this._shaderProgram, j); -this._uniforms[j] = activeuniform; -this._uniformLocations[activeuniform.name] = gl.getUniformLocation(this._shaderProgram, activeuniform.name) -} + var gl = this._gl; + this._vs = createShader(gl, gl.VERTEX_SHADER, vsText); + this._ps = createShader(gl, gl.FRAGMENT_SHADER, psText); + if (this._vs == null || this._ps == null) + throw "Failure initializing webgl: shader"; + this._shaderProgram = gl.createProgram(); + gl.attachShader(this._shaderProgram, this._vs); + gl.attachShader(this._shaderProgram, this._ps); + gl.linkProgram(this._shaderProgram); + if (!gl.getProgramParameter(this._shaderProgram, gl.LINK_STATUS)) { + gl.deleteProgram(this._shaderProgram); + gl.deleteShader(this._vs); + gl.deleteShader(this._ps); + return null + } + var numAttribs = gl.getProgramParameter(this._shaderProgram, gl.ACTIVE_ATTRIBUTES); + this._attribs = new Array(numAttribs); + this._attribLocations = {}; + for (var i = 0; i < numAttribs; i++) { + var activeattrib = gl.getActiveAttrib(this._shaderProgram, i); + this._attribs[i] = activeattrib; + this._attribLocations[activeattrib.name] = gl.getAttribLocation(this._shaderProgram, activeattrib.name) + } + var numUniforms = gl.getProgramParameter(this._shaderProgram, gl.ACTIVE_UNIFORMS); + this._uniforms = new Array(numUniforms); + this._uniformLocations = {}; + for (var j = 0; j < numUniforms; j++) { + var activeuniform = gl.getActiveUniform(this._shaderProgram, j); + this._uniforms[j] = activeuniform; + this._uniformLocations[activeuniform.name] = gl.getUniformLocation(this._shaderProgram, activeuniform.name) + } }; RendererWebGL.prototype.isPowerOfTwo = function(x) { -return (x & (x - 1)) == 0 + return (x & (x - 1)) == 0 }; RendererWebGL.prototype.nextHighestPowerOfTwo = function(x) { ---x; -for (var i=1; i < 32; i <<= 1) { -x = x | x >> i -} -return x + 1 + --x; + for (var i = 1; i < 32; i <<= 1) { + x = x | x >> i + } + return x + 1 }; RendererWebGL.prototype.setViewportSize = function(width, height) { -this._width = width; -this._height = height; -this._rootElement.width = this._width; -this._rootElement.height = this._height; -this._gl.viewportWidth = this._width; -this._gl.viewportHeight = this._height; -this._gl.viewport(0, 0, this._gl.viewportWidth, this._gl.viewportHeight) + this._width = width; + this._height = height; + this._rootElement.width = this._width; + this._rootElement.height = this._height; + this._gl.viewportWidth = this._width; + this._gl.viewportHeight = this._height; + this._gl.viewport(0, 0, this._gl.viewportWidth, this._gl.viewportHeight) }; var prevOrderedRenderables; RendererWebGL.prototype.render = function() { -var imageElement, -material, -texture; -var gl=this._gl; -var glIdentityMat=Matrix4x4.createIdentity().flattenColumnMajor(); -var self=this; -for (var id in this._removedRenderables) { -var r=this._removedRenderables[id]; -if (r._geometry.__gl_posBuffer) -gl.deleteBuffer(r._geometry.__gl_posBuffer); -if (r._geometry.__gl_indexBuffer) -gl.deleteBuffer(r._geometry.__gl_indexBuffer); -if (r._material._texture.__gl_texture) -gl.deleteTexture(r._material._texture.__gl_texture); -if (r._geometry.__gl_texCoordBuffer) -gl.deleteBuffer(r._geometry.__gl_texCoordBuffer) -} -this._removedRenderables = {}; -gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); -gl.useProgram(this._shaderProgram); -var _kernel=[0, 0, 0, 0, 1, 0, 0, 0, 0]; -var kernel=new Float32Array(_kernel); -var orderedRenderables=[]; -for (var renderableId in this._renderables) { -orderedRenderables.push(this._renderables[renderableId]) -} -orderedRenderables.sort(function(a, b) { -if (a._order && b._order) -return a._order - b._order; -else if (!a._order && !b._order) -return 0; -else if (!a._order) -return -1; -else -return 1 -}); -if (prevOrderedRenderables) { -if (prevOrderedRenderables.length != orderedRenderables.length) { -for (var i=0; i < prevOrderedRenderables.length; i++) { -var j; -for (j = 0; j < orderedRenderables.length; j++) { -if (prevOrderedRenderables[i].entityId == orderedRenderables[j].entityId) -break -} -} -for (var i=0; i < orderedRenderables.length; i++) { -var j; -for (j = 0; j < prevOrderedRenderables.length; j++) { -if (orderedRenderables[i].entityId == prevOrderedRenderables[j].entityId) -break -} -} -} -else -for (var i=0; i < orderedRenderables.length; i++) {} -} -prevOrderedRenderables = orderedRenderables; -for (var pass=0; pass < 2; pass++) { -if (pass == 1) { -gl.enable(gl.BLEND); -gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA) -} -else -gl.disable(gl.BLEND); -for (var i=0; i < orderedRenderables.length; i++) { -var renderable=orderedRenderables[i]; -imageElement = null; -texture = null; -if (renderable._material && renderable._material._texture && renderable._material._texture) { -material = renderable._material; -texture = renderable._material._texture; -if (texture._isReady) -imageElement = renderable._material._texture._image -} -if (imageElement == null || renderable._geometry == null) -continue; -var isOpaque=true; -if (material._animation && !material._animation._ended) { -var opq=material._animation.opacity; -if ((opq.begin != 1 || opq.end != 1)) -isOpaque = false -} -else if (material._animatableStates) { -if (material._animatableStates.opacity < 1) -isOpaque = false -} -if (pass == 0 && !isOpaque) -continue; -if (pass == 1 && isOpaque) -continue; -if (renderable._geometry._isDirty) { -if (renderable._geometry.__gl_posBuffer) -gl.deleteBuffer(renderable._geometry.__gl_posBuffer); -renderable._geometry.__gl_posBuffer = gl.createBuffer(); -gl.bindBuffer(gl.ARRAY_BUFFER, renderable._geometry.__gl_posBuffer); -gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(renderable._geometry._vertices), gl.STATIC_DRAW); -if (renderable._geometry.__gl_texCoordBuffer) -gl.deleteBuffer(renderable._geometry.__gl_texCoordBuffer); -renderable._geometry.__gl_texCoordBuffer = gl.createBuffer(); -gl.bindBuffer(gl.ARRAY_BUFFER, renderable._geometry.__gl_texCoordBuffer); -gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(renderable._geometry._texCoords), gl.STATIC_DRAW); -if (renderable._geometry._indices) { -if (renderable._geometry.__gl_indexBuffer) -gl.deleteBuffer(renderable._geometry.__gl_indexBuffer); -renderable._geometry.__gl_indexBuffer = gl.createBuffer(); -gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, renderable._geometry.__gl_indexBuffer); -gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(renderable._geometry._indices), gl.STATIC_DRAW) -} -renderable._geometry._isDirty = false -} -if (renderable._material._texture._isDirty) { -if (renderable._material._texture.__gl_texture) -gl.deleteTexture(renderable._material._texture.__gl_texture); -renderable._material._texture.__gl_texture = gl.createTexture(); -gl.bindTexture(gl.TEXTURE_2D, renderable._material._texture.__gl_texture); -gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, this._textureFilterTypeMap[renderable._material._texture._magFilter]); -gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, this._textureFilterTypeMap[renderable._material._texture._minFilter]); -gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, this._textureWrapTypeMap[renderable._material._texture._wrapS]); -gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, this._textureWrapTypeMap[renderable._material._texture._wrapT]); -try { -if (!this.isPowerOfTwo(imageElement.width) || !this.isPowerOfTwo(imageElement.height)) { -var canvas=this._textureCache.get(renderable.entityId); -if (canvas == null) { -canvas = document.createElement("canvas"); -canvas.width = this.nextHighestPowerOfTwo(imageElement.width); -canvas.height = this.nextHighestPowerOfTwo(imageElement.height); -var ctx=canvas.getContext("2d"); -ctx.drawImage(imageElement, 0, 0, imageElement.width, imageElement.height, 0, 0, canvas.width, canvas.height); -this._textureCache.insert(renderable.entityId, canvas) -} -gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas) -} -else { -gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imageElement) -} -} -catch(e) { -continue -} -gl.generateMipmap(gl.TEXTURE_2D); -renderable._material._texture._isDirty = false -} -var finalMat=this._viewProjMatrix.multiply(renderable._transform); -var glFinalMat=new Float32Array(finalMat.flattenColumnMajor()); -gl.uniformMatrix4fv(this._uniformLocations["u_modelViewProjMat"], false, glFinalMat); -var stepW=1.0 / imageElement.width; -var stepH=1.0 / imageElement.height; -var _offsets=[-stepW, -stepH, 0.0, -stepH, stepW, -stepH, -stepW, 0.0, 0.0, 0.0, stepW, 0.0, -stepW, stepH, 0.0, stepH, stepW, stepH]; -var offsets=new Float32Array(_offsets); -gl.uniform2fv(this._uniformLocations["u_kernelOffsets[0]"], offsets); -gl.uniform1fv(this._uniformLocations["u_kernel[0]"], kernel); -if (material._animation && !material._animation._ended) { -var anim=material._animation; -gl.uniform2f(this._uniformLocations["u_opacityBE"], anim["opacity"].begin, anim["opacity"].end); -gl.uniform2f(this._uniformLocations["u_xBE"], anim["x"].begin, anim["x"].end); -gl.uniform2f(this._uniformLocations["u_yBE"], anim["y"].begin, anim["y"].end); -gl.uniform2f(this._uniformLocations["u_sxBE"], anim["sx"].begin, anim["sx"].end); -gl.uniform2f(this._uniformLocations["u_syBE"], anim["sy"].begin, anim["sy"].end); -gl.uniform2f(this._uniformLocations["u_rotateBE"], anim["rotate"].begin, anim["rotate"].end); -gl.uniform1f(this._uniformLocations["u_texW"], imageElement.width); -gl.uniform1f(this._uniformLocations["u_texH"], imageElement.height); -var d=new Date; -if (anim._startT == -1) -anim._startT = d.getTime(); -var t=d.getTime() - anim._startT; -if (t >= anim._duration) { -t = anim._duration; -material._animatableStates = anim.getEndStates(); -if (anim._endCallback) { -anim._endCallback(material, anim._endCallbackInfo) -} -material._animation._ended = true -} -var t_ease=t / anim._duration; -gl.uniform1f(this._uniformLocations["u_t"], t_ease) -} -else if (material._animatableStates) { -var as=material._animatableStates; -gl.uniform2f(this._uniformLocations["u_opacityBE"], as["opacity"], as["opacity"]); -gl.uniform2f(this._uniformLocations["u_xBE"], as["x"], as["x"]); -gl.uniform2f(this._uniformLocations["u_yBE"], as["y"], as["y"]); -gl.uniform2f(this._uniformLocations["u_sxBE"], as["sx"], as["sx"]); -gl.uniform2f(this._uniformLocations["u_syBE"], as["sy"], as["sy"]); -gl.uniform2f(this._uniformLocations["u_rotateBE"], as["rotate"], as["rotate"]); -gl.uniform1f(this._uniformLocations["u_texW"], imageElement.width); -gl.uniform1f(this._uniformLocations["u_texH"], imageElement.height); -gl.uniform1f(this._uniformLocations["u_t"], 1) -} -else { -var as=material._animatableStates || {opacity: 1.0}; -var o=as["opacity"]; -gl.uniform2f(this._uniformLocations["u_opacityBE"], o, o); -gl.uniform1f(this._uniformLocations["u_t"], -1) -} -gl.enableVertexAttribArray(this._attribLocations["a_pos"]); -gl.enableVertexAttribArray(this._attribLocations["a_texCoord"]); -gl.bindBuffer(gl.ARRAY_BUFFER, renderable._geometry.__gl_posBuffer); -gl.vertexAttribPointer(this._attribLocations["a_pos"], 3, gl.FLOAT, false, 0, 0); -gl.bindBuffer(gl.ARRAY_BUFFER, renderable._geometry.__gl_texCoordBuffer); -gl.vertexAttribPointer(this._attribLocations["a_texCoord"], renderable._geometry._texCoordSize, gl.FLOAT, false, 0, 0); -if (renderable._geometry._indices) -gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, renderable._geometry.__gl_indexBuffer); -gl.activeTexture(gl.TEXTURE0); -gl.bindTexture(gl.TEXTURE_2D, renderable._material._texture.__gl_texture); -gl.uniform1i(this._uniformLocations["u_diffuseTex"], 0); -gl.drawElements(gl.TRIANGLES, renderable._geometry._indices.length, gl.UNSIGNED_SHORT, 0) -} -} -}; -var reqAnimStep=(function() { -return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback, element) { -window.setTimeout(callback, 1000 / 60) -} + var imageElement, + material, + texture; + var gl = this._gl; + var glIdentityMat = Matrix4x4.createIdentity().flattenColumnMajor(); + var self = this; + for (var id in this._removedRenderables) { + var r = this._removedRenderables[id]; + if (r._geometry.__gl_posBuffer) + gl.deleteBuffer(r._geometry.__gl_posBuffer); + if (r._geometry.__gl_indexBuffer) + gl.deleteBuffer(r._geometry.__gl_indexBuffer); + if (r._material._texture.__gl_texture) + gl.deleteTexture(r._material._texture.__gl_texture); + if (r._geometry.__gl_texCoordBuffer) + gl.deleteBuffer(r._geometry.__gl_texCoordBuffer) + } + this._removedRenderables = {}; + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); + gl.useProgram(this._shaderProgram); + var _kernel = [0, 0, 0, 0, 1, 0, 0, 0, 0]; + var kernel = new Float32Array(_kernel); + var orderedRenderables = []; + for (var renderableId in this._renderables) { + orderedRenderables.push(this._renderables[renderableId]) + } + orderedRenderables.sort(function(a, b) { + if (a._order && b._order) + return a._order - b._order; + else if (!a._order && !b._order) + return 0; + else if (!a._order) + return -1; + else + return 1 + }); + if (prevOrderedRenderables) { + if (prevOrderedRenderables.length != orderedRenderables.length) { + for (var i = 0; i < prevOrderedRenderables.length; i++) { + var j; + for (j = 0; j < orderedRenderables.length; j++) { + if (prevOrderedRenderables[i].entityId == orderedRenderables[j].entityId) + break + } + } + for (var i = 0; i < orderedRenderables.length; i++) { + var j; + for (j = 0; j < prevOrderedRenderables.length; j++) { + if (orderedRenderables[i].entityId == prevOrderedRenderables[j].entityId) + break + } + } + } else + for (var i = 0; i < orderedRenderables.length; i++) {} + } + prevOrderedRenderables = orderedRenderables; + for (var pass = 0; pass < 2; pass++) { + if (pass == 1) { + gl.enable(gl.BLEND); + gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA) + } else + gl.disable(gl.BLEND); + for (var i = 0; i < orderedRenderables.length; i++) { + var renderable = orderedRenderables[i]; + imageElement = null; + texture = null; + if (renderable._material && renderable._material._texture && renderable._material._texture) { + material = renderable._material; + texture = renderable._material._texture; + if (texture._isReady) + imageElement = renderable._material._texture._image + } + if (imageElement == null || renderable._geometry == null) + continue; + var isOpaque = true; + if (material._animation && !material._animation._ended) { + var opq = material._animation.opacity; + if ((opq.begin != 1 || opq.end != 1)) + isOpaque = false + } else if (material._animatableStates) { + if (material._animatableStates.opacity < 1) + isOpaque = false + } + if (pass == 0 && !isOpaque) + continue; + if (pass == 1 && isOpaque) + continue; + if (renderable._geometry._isDirty) { + if (renderable._geometry.__gl_posBuffer) + gl.deleteBuffer(renderable._geometry.__gl_posBuffer); + renderable._geometry.__gl_posBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, renderable._geometry.__gl_posBuffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(renderable._geometry._vertices), gl.STATIC_DRAW); + if (renderable._geometry.__gl_texCoordBuffer) + gl.deleteBuffer(renderable._geometry.__gl_texCoordBuffer); + renderable._geometry.__gl_texCoordBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, renderable._geometry.__gl_texCoordBuffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(renderable._geometry._texCoords), gl.STATIC_DRAW); + if (renderable._geometry._indices) { + if (renderable._geometry.__gl_indexBuffer) + gl.deleteBuffer(renderable._geometry.__gl_indexBuffer); + renderable._geometry.__gl_indexBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, renderable._geometry.__gl_indexBuffer); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(renderable._geometry._indices), gl.STATIC_DRAW) + } + renderable._geometry._isDirty = false + } + if (renderable._material._texture._isDirty) { + if (renderable._material._texture.__gl_texture) + gl.deleteTexture(renderable._material._texture.__gl_texture); + renderable._material._texture.__gl_texture = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, renderable._material._texture.__gl_texture); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, this._textureFilterTypeMap[renderable._material._texture._magFilter]); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, this._textureFilterTypeMap[renderable._material._texture._minFilter]); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, this._textureWrapTypeMap[renderable._material._texture._wrapS]); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, this._textureWrapTypeMap[renderable._material._texture._wrapT]); + try { + if (!this.isPowerOfTwo(imageElement.width) || !this.isPowerOfTwo(imageElement.height)) { + var canvas = this._textureCache.get(renderable.entityId); + if (canvas == null) { + canvas = document.createElement("canvas"); + canvas.width = this.nextHighestPowerOfTwo(imageElement.width); + canvas.height = this.nextHighestPowerOfTwo(imageElement.height); + var ctx = canvas.getContext("2d"); + ctx.drawImage(imageElement, 0, 0, imageElement.width, imageElement.height, 0, 0, canvas.width, canvas.height); + this._textureCache.insert(renderable.entityId, canvas) + } + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas) + } else { + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imageElement) + } + } catch (e) { + continue + } + gl.generateMipmap(gl.TEXTURE_2D); + renderable._material._texture._isDirty = false + } + var finalMat = this._viewProjMatrix.multiply(renderable._transform); + var glFinalMat = new Float32Array(finalMat.flattenColumnMajor()); + gl.uniformMatrix4fv(this._uniformLocations["u_modelViewProjMat"], false, glFinalMat); + var stepW = 1.0 / imageElement.width; + var stepH = 1.0 / imageElement.height; + var _offsets = [-stepW, -stepH, 0.0, -stepH, stepW, -stepH, -stepW, 0.0, 0.0, 0.0, stepW, 0.0, -stepW, stepH, 0.0, stepH, stepW, stepH]; + var offsets = new Float32Array(_offsets); + gl.uniform2fv(this._uniformLocations["u_kernelOffsets[0]"], offsets); + gl.uniform1fv(this._uniformLocations["u_kernel[0]"], kernel); + if (material._animation && !material._animation._ended) { + var anim = material._animation; + gl.uniform2f(this._uniformLocations["u_opacityBE"], anim["opacity"].begin, anim["opacity"].end); + gl.uniform2f(this._uniformLocations["u_xBE"], anim["x"].begin, anim["x"].end); + gl.uniform2f(this._uniformLocations["u_yBE"], anim["y"].begin, anim["y"].end); + gl.uniform2f(this._uniformLocations["u_sxBE"], anim["sx"].begin, anim["sx"].end); + gl.uniform2f(this._uniformLocations["u_syBE"], anim["sy"].begin, anim["sy"].end); + gl.uniform2f(this._uniformLocations["u_rotateBE"], anim["rotate"].begin, anim["rotate"].end); + gl.uniform1f(this._uniformLocations["u_texW"], imageElement.width); + gl.uniform1f(this._uniformLocations["u_texH"], imageElement.height); + var d = new Date; + if (anim._startT == -1) + anim._startT = d.getTime(); + var t = d.getTime() - anim._startT; + if (t >= anim._duration) { + t = anim._duration; + material._animatableStates = anim.getEndStates(); + if (anim._endCallback) { + anim._endCallback(material, anim._endCallbackInfo) + } + material._animation._ended = true + } + var t_ease = t / anim._duration; + gl.uniform1f(this._uniformLocations["u_t"], t_ease) + } else if (material._animatableStates) { + var as = material._animatableStates; + gl.uniform2f(this._uniformLocations["u_opacityBE"], as["opacity"], as["opacity"]); + gl.uniform2f(this._uniformLocations["u_xBE"], as["x"], as["x"]); + gl.uniform2f(this._uniformLocations["u_yBE"], as["y"], as["y"]); + gl.uniform2f(this._uniformLocations["u_sxBE"], as["sx"], as["sx"]); + gl.uniform2f(this._uniformLocations["u_syBE"], as["sy"], as["sy"]); + gl.uniform2f(this._uniformLocations["u_rotateBE"], as["rotate"], as["rotate"]); + gl.uniform1f(this._uniformLocations["u_texW"], imageElement.width); + gl.uniform1f(this._uniformLocations["u_texH"], imageElement.height); + gl.uniform1f(this._uniformLocations["u_t"], 1) + } else { + var as = material._animatableStates || { opacity: 1.0 }; + var o = as["opacity"]; + gl.uniform2f(this._uniformLocations["u_opacityBE"], o, o); + gl.uniform1f(this._uniformLocations["u_t"], -1) + } + gl.enableVertexAttribArray(this._attribLocations["a_pos"]); + gl.enableVertexAttribArray(this._attribLocations["a_texCoord"]); + gl.bindBuffer(gl.ARRAY_BUFFER, renderable._geometry.__gl_posBuffer); + gl.vertexAttribPointer(this._attribLocations["a_pos"], 3, gl.FLOAT, false, 0, 0); + gl.bindBuffer(gl.ARRAY_BUFFER, renderable._geometry.__gl_texCoordBuffer); + gl.vertexAttribPointer(this._attribLocations["a_texCoord"], renderable._geometry._texCoordSize, gl.FLOAT, false, 0, 0); + if (renderable._geometry._indices) + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, renderable._geometry.__gl_indexBuffer); + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, renderable._material._texture.__gl_texture); + gl.uniform1i(this._uniformLocations["u_diffuseTex"], 0); + gl.drawElements(gl.TRIANGLES, renderable._geometry._indices.length, gl.UNSIGNED_SHORT, 0) + } + } +}; +var reqAnimStep = (function() { + return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback, element) { + window.setTimeout(callback, 1000 / 60) + } })(); + function requestAnimation(duration, callback, element) { -var startTime; -if (window.mozAnimationStartTime) { -startTime = window.mozAnimationStartTime -} -else if (window.webkitAnimationStartTime) { -startTime = window.webkitAnimationStartTime -} -else { -startTime = (new Date).getTime() -} -var lastTimestamp=startTime; -function timerProc(timestamp) { -if (!timestamp) { -timestamp = (new Date).getTime() -} -if (callback({ -startTime: startTime, curTime: timestamp, duration: duration -}) !== false) { -window.setTimeout(timerProc, 1000 / 60) -} -} -; -timerProc(startTime) -} -; + var startTime; + if (window.mozAnimationStartTime) { + startTime = window.mozAnimationStartTime + } else if (window.webkitAnimationStartTime) { + startTime = window.webkitAnimationStartTime + } else { + startTime = (new Date).getTime() + } + var lastTimestamp = startTime; + + function timerProc(timestamp) { + if (!timestamp) { + timestamp = (new Date).getTime() + } + if (callback({ + startTime: startTime, + curTime: timestamp, + duration: duration + }) !== false) { + window.setTimeout(timerProc, 1000 / 60) + } + }; + timerProc(startTime) +}; RendererWebGL.prototype.animate1 = function(material, startProperties, endProperties, duration, easing) { -function step(params) { -x = (params.curTime - params.startTime) / params.duration; -x = x > 1 ? 1 : (x < 0 ? 0 : x); -material._opacity = startProperties.opacity * (1 - x) + endProperties.opacity * x; -if (x >= 1) -return false; -else -return true -} -if (material && material._texture && material._texture._image) { -material._opacity = startProperties.opacity; -requestAnimation(duration, step, material._texture._image) -} + function step(params) { + x = (params.curTime - params.startTime) / params.duration; + x = x > 1 ? 1 : (x < 0 ? 0 : x); + material._opacity = startProperties.opacity * (1 - x) + endProperties.opacity * x; + if (x >= 1) + return false; + else + return true + } + if (material && material._texture && material._texture._image) { + material._opacity = startProperties.opacity; + requestAnimation(duration, step, material._texture._image) + } }; RendererWebGL.prototype.animate = function(renderable, startProperties, endProperties, duration, easing, endCallback, endCallbackInfo) { -if (renderable && renderable._material && renderable._material._texture && renderable._material._texture._image) { -var material=renderable._material; -var anim=material._animation = new Animation; -if (material._animatableStates) -anim.initStates(material._animatableStates); -else -material._animatableStates = anim.getEndStates(); -for (var prop in startProperties) { -if (startProperties.hasOwnProperty(prop)) { -if (prop in anim) { -anim[prop].begin = startProperties[prop] -} -} -} -for (var prop in endProperties) { -if (endProperties.hasOwnProperty(prop)) { -if (prop in anim) { -anim[prop].end = endProperties[prop] -} -} -} -var d=new Date; -if (material._texture._isReady) -anim._startT = d.getTime(); -else -anim._startT = -1; -anim._duration = duration; -anim._easingMode = easing; -if (endCallback) -anim._endCallback = endCallback; -if (endCallbackInfo) -anim._endCallbackInfo = endCallbackInfo -} + if (renderable && renderable._material && renderable._material._texture && renderable._material._texture._image) { + var material = renderable._material; + var anim = material._animation = new Animation; + if (material._animatableStates) + anim.initStates(material._animatableStates); + else + material._animatableStates = anim.getEndStates(); + for (var prop in startProperties) { + if (startProperties.hasOwnProperty(prop)) { + if (prop in anim) { + anim[prop].begin = startProperties[prop] + } + } + } + for (var prop in endProperties) { + if (endProperties.hasOwnProperty(prop)) { + if (prop in anim) { + anim[prop].end = endProperties[prop] + } + } + } + var d = new Date; + if (material._texture._isReady) + anim._startT = d.getTime(); + else + anim._startT = -1; + anim._duration = duration; + anim._easingMode = easing; + if (endCallback) + anim._endCallback = endCallback; + if (endCallbackInfo) + anim._endCallbackInfo = endCallbackInfo + } }; RendererWebGL.prototype.CSSMatrixToMatrix4x4 = function(cssMat, image) { -var m=new Matrix4x4(cssMat.m11, cssMat.m12, cssMat.m13, cssMat.m14, cssMat.m21, cssMat.m22, cssMat.m23, cssMat.m24, cssMat.m31, cssMat.m32, cssMat.m33, cssMat.m34, cssMat.m41, cssMat.m42, cssMat.m43, cssMat.m44); -var invertY_inv=Matrix4x4.createScale(1, -1, 1); -var t_inv=Matrix4x4.createTranslation(0, image.height, 0); -var preTransform_inv=t_inv.multiply(invertY_inv); -var postTransform_inv=invertY_inv; -var m4x4=postTransform_inv.multiply(m.transpose()).multiply(preTransform_inv); -return m4x4 + var m = new Matrix4x4(cssMat.m11, cssMat.m12, cssMat.m13, cssMat.m14, cssMat.m21, cssMat.m22, cssMat.m23, cssMat.m24, cssMat.m31, cssMat.m32, cssMat.m33, cssMat.m34, cssMat.m41, cssMat.m42, cssMat.m43, cssMat.m44); + var invertY_inv = Matrix4x4.createScale(1, -1, 1); + var t_inv = Matrix4x4.createTranslation(0, image.height, 0); + var preTransform_inv = t_inv.multiply(invertY_inv); + var postTransform_inv = invertY_inv; + var m4x4 = postTransform_inv.multiply(m.transpose()).multiply(preTransform_inv); + return m4x4 }; RendererWebGL.prototype.setClearColor = function(color) { -this._checkClearColor(color); -this._clearColor = color; -this._gl.clearColor(this._clearColor.r, this._clearColor.g, this._clearColor.b, this._clearColor.a) + this._checkClearColor(color); + this._clearColor = color; + this._gl.clearColor(this._clearColor.r, this._clearColor.g, this._clearColor.b, this._clearColor.a) }; "use strict"; + function Viewport(width, height, nearDistance, farDistance) { -this._width = width; -this._height = height; -this._aspectRatio = this._width / this._height; -this._nearDistance = nearDistance; -this._farDistance = farDistance + this._width = width; + this._height = height; + this._aspectRatio = this._width / this._height; + this._nearDistance = nearDistance; + this._farDistance = farDistance } Viewport.convertHorizontalToVerticalFieldOfView = function(aspectRatio, fov) { -var focalLength=0.5 / Math.tan(fov * 0.5); -return 2 * Math.atan((0.5 * 1.0 / aspectRatio) / focalLength) + var focalLength = 0.5 / Math.tan(fov * 0.5); + return 2 * Math.atan((0.5 * 1.0 / aspectRatio) / focalLength) }; Viewport.convertVerticalToHorizontalFieldOfView = function(aspectRatio, fov) { -var focalLength=(0.5 * 1.0 / aspectRatio) / Math.tan(fov * 0.5); -return 2 * Math.atan(0.5 / focalLength) + var focalLength = (0.5 * 1.0 / aspectRatio) / Math.tan(fov * 0.5); + return 2 * Math.atan(0.5 / focalLength) }; Viewport.prototype = { -getWidth: function getWidth() { -return this._width -}, getHeight: function getHeight() { -return this._height -}, getAspectRatio: function getAspectRatio() { -return this._aspectRatio -}, getNearDistance: function getNearDistance() { -return this._nearDistance -}, getFarDistance: function getFarDistance() { -return this._farDistance -} + getWidth: function getWidth() { + return this._width + }, + getHeight: function getHeight() { + return this._height + }, + getAspectRatio: function getAspectRatio() { + return this._aspectRatio + }, + getNearDistance: function getNearDistance() { + return this._nearDistance + }, + getFarDistance: function getFarDistance() { + return this._farDistance + } }; "use strict"; + function PerspectiveCameraPose(viewport, digitalPan, position, up, look, fieldOfView) { -this.width = (viewport) ? viewport.getWidth() : 0; -this.height = (viewport) ? viewport.getHeight() : 0; -this.up = Vector3.clone(up); -this.look = Vector3.clone(look); -this.fieldOfView = fieldOfView; -var fuzzyEquals=function(v1, v2, tolerance) { -var dotProduct=v1.dot(v2); -if (dotProduct > 1.0) { -dotProduct = 1.0 -} -else if (dotProduct < -1.0) { -dotProduct = -1.0 -} -var difference=Math.acos(dotProduct); -return difference < tolerance -}; -this.isFuzzyEqualTo = function(pose, toleranceInPixels) { -if (this.width !== pose.width || this.height !== pose.height) { -return false -} -var tolerance=toleranceInPixels * this.fieldOfView / this.height; -if (Math.abs(this.fieldOfView - pose.fieldOfView) > tolerance) { -return false -} -if (!fuzzyEquals(this.up, pose.up, tolerance)) { -return false -} -if (!fuzzyEquals(this.look, pose.look, tolerance)) { -return false -} -return true -} -} + this.width = (viewport) ? viewport.getWidth() : 0; + this.height = (viewport) ? viewport.getHeight() : 0; + this.up = Vector3.clone(up); + this.look = Vector3.clone(look); + this.fieldOfView = fieldOfView; + var fuzzyEquals = function(v1, v2, tolerance) { + var dotProduct = v1.dot(v2); + if (dotProduct > 1.0) { + dotProduct = 1.0 + } else if (dotProduct < -1.0) { + dotProduct = -1.0 + } + var difference = Math.acos(dotProduct); + return difference < tolerance + }; + this.isFuzzyEqualTo = function(pose, toleranceInPixels) { + if (this.width !== pose.width || this.height !== pose.height) { + return false + } + var tolerance = toleranceInPixels * this.fieldOfView / this.height; + if (Math.abs(this.fieldOfView - pose.fieldOfView) > tolerance) { + return false + } + if (!fuzzyEquals(this.up, pose.up, tolerance)) { + return false + } + if (!fuzzyEquals(this.look, pose.look, tolerance)) { + return false + } + return true + } +} + function PerspectiveCamera() { -this._viewport = null; -this._digitalPan = new Vector2(0, 0); -this._position = new Vector3(0, 0, 0); -this._up = new Vector3(0, 1, 0); -this._look = new Vector3(0, 0, -1); -this._fieldOfView = Math.PI * 0.5; -this._focalLength = -1; -this._viewTransform = Matrix4x4.createIdentity(); -this._projectionTransform = Matrix4x4.createIdentity(); -this._isDirty = true + this._viewport = null; + this._digitalPan = new Vector2(0, 0); + this._position = new Vector3(0, 0, 0); + this._up = new Vector3(0, 1, 0); + this._look = new Vector3(0, 0, -1); + this._fieldOfView = Math.PI * 0.5; + this._focalLength = -1; + this._viewTransform = Matrix4x4.createIdentity(); + this._projectionTransform = Matrix4x4.createIdentity(); + this._isDirty = true } PerspectiveCamera.prototype = { -getPose: function getPose() { -return new PerspectiveCameraPose(this._viewport, this._digitalPan, this._position, this._up, this._look, this._fieldOfView) -}, _setDirty: function _setDirty() { -this._isDirty = true -}, setViewport: function setViewport(viewport) { -this._viewport = viewport; -this._setDirty() -}, getViewport: function getViewport() { -return this._viewport -}, setPosition: function setPosition(position) { -this._position = position; -this._setDirty() -}, getPosition: function getPosition() { -return this._position -}, setVerticalFov: function setVerticalFov(fieldOfView) { -this._fieldOfView = fieldOfView; -this._setDirty() -}, getVerticalFov: function getVerticalFov() { -return this._fieldOfView -}, getFocalLength: function getFocalLength() { -if (this._isDirty) { -this._updateTransforms() -} -return this._focalLength -}, setLook: function setLook(look) { -this._look = look; -this._setDirty() -}, getLook: function getLook() { -return this._look -}, setUp: function setUp(up) { -this._up = up; -this._setDirty() -}, getUp: function getUp() { -return this._up -}, setDigitalPan: function setDigitalPan(pan) { -this._digitalPan = pan; -this._setDirty() -}, getDigitalPan: function getDigitalPan() { -return this._digitalPan -}, getViewTransform: function getViewTransform() { -if (this._isDirty) { -this._updateTransforms() -} -return this._viewTransform -}, getProjectionTransform: function getProjectionTransform() { -if (this._isDirty) { -this._updateTransforms() -} -return this._projectionTransform -}, getViewProjectionTransform: function getViewProjectionTransform() { -if (this._isDirty) { -this._updateTransforms() -} -return this._projectionTransform.multiply(this._viewTransform) -}, projectTo2D: function projectTo2D(point) { -if (this._isDirty) { -this._updateTransforms() -} -var halfWidth=this._viewport.getWidth() * 0.5; -var halfHeight=this._viewport.getHeight() * 0.5; -var projected=this._projectionTransform.multiply(this._viewTransform).transformVector4(Vector4.createFromVector3(point)); -var invW=1.0 / projected.w; -projected.x *= invW; -projected.y *= invW; -projected.z = projected.w = 1; -return (new Matrix4x4(halfWidth, 0, halfWidth, 0, 0, -halfHeight, halfHeight, 0, 0, 0, 1, 0, 0, 0, 0, 1)).transformVector4(projected) -}, _updateTransforms: function _updateTransforms() { -var denom=Math.tan(0.5 * this._fieldOfView); -if (denom === 0.0) { -this._focalLength = 1.0 -} -else { -this._focalLength = 1.0 / denom -} -this._viewTransform = GraphicsHelper.createLookAtRH(this._position, this._look, this._up); -this._projectionTransform = GraphicsHelper.createPerspectiveOGL(this._fieldOfView, this._viewport.getAspectRatio(), this._viewport.getNearDistance(), this._viewport.getFarDistance(), this._digitalPan); -this._isDirty = false -} + getPose: function getPose() { + return new PerspectiveCameraPose(this._viewport, this._digitalPan, this._position, this._up, this._look, this._fieldOfView) + }, + _setDirty: function _setDirty() { + this._isDirty = true + }, + setViewport: function setViewport(viewport) { + this._viewport = viewport; + this._setDirty() + }, + getViewport: function getViewport() { + return this._viewport + }, + setPosition: function setPosition(position) { + this._position = position; + this._setDirty() + }, + getPosition: function getPosition() { + return this._position + }, + setVerticalFov: function setVerticalFov(fieldOfView) { + this._fieldOfView = fieldOfView; + this._setDirty() + }, + getVerticalFov: function getVerticalFov() { + return this._fieldOfView + }, + getFocalLength: function getFocalLength() { + if (this._isDirty) { + this._updateTransforms() + } + return this._focalLength + }, + setLook: function setLook(look) { + this._look = look; + this._setDirty() + }, + getLook: function getLook() { + return this._look + }, + setUp: function setUp(up) { + this._up = up; + this._setDirty() + }, + getUp: function getUp() { + return this._up + }, + setDigitalPan: function setDigitalPan(pan) { + this._digitalPan = pan; + this._setDirty() + }, + getDigitalPan: function getDigitalPan() { + return this._digitalPan + }, + getViewTransform: function getViewTransform() { + if (this._isDirty) { + this._updateTransforms() + } + return this._viewTransform + }, + getProjectionTransform: function getProjectionTransform() { + if (this._isDirty) { + this._updateTransforms() + } + return this._projectionTransform + }, + getViewProjectionTransform: function getViewProjectionTransform() { + if (this._isDirty) { + this._updateTransforms() + } + return this._projectionTransform.multiply(this._viewTransform) + }, + projectTo2D: function projectTo2D(point) { + if (this._isDirty) { + this._updateTransforms() + } + var halfWidth = this._viewport.getWidth() * 0.5; + var halfHeight = this._viewport.getHeight() * 0.5; + var projected = this._projectionTransform.multiply(this._viewTransform).transformVector4(Vector4.createFromVector3(point)); + var invW = 1.0 / projected.w; + projected.x *= invW; + projected.y *= invW; + projected.z = projected.w = 1; + return (new Matrix4x4(halfWidth, 0, halfWidth, 0, 0, -halfHeight, halfHeight, 0, 0, 0, 1, 0, 0, 0, 0, 1)).transformVector4(projected) + }, + _updateTransforms: function _updateTransforms() { + var denom = Math.tan(0.5 * this._fieldOfView); + if (denom === 0.0) { + this._focalLength = 1.0 + } else { + this._focalLength = 1.0 / denom + } + this._viewTransform = GraphicsHelper.createLookAtRH(this._position, this._look, this._up); + this._projectionTransform = GraphicsHelper.createPerspectiveOGL(this._fieldOfView, this._viewport.getAspectRatio(), this._viewport.getNearDistance(), this._viewport.getFarDistance(), this._digitalPan); + this._isDirty = false + } }; "use strict"; + function ClassicSpring(springConstant, damperConstant, allowOvershoot) { -this._springConstant = springConstant; -this._damperConstant = damperConstant; -this._allowOvershoot = allowOvershoot; -this._current = 0; -this._target = 0; -this._velocity = 0; -this._t = -1; -this._isSettled = false + this._springConstant = springConstant; + this._damperConstant = damperConstant; + this._allowOvershoot = allowOvershoot; + this._current = 0; + this._target = 0; + this._velocity = 0; + this._t = -1; + this._isSettled = false } ClassicSpring.prototype = { -step: function step(elapsedMilliseconds) { -if (this._isSettled) { -return true -} -var delta=0.0, -curTargDiff, -isSettled, -dt, -maxDelta, -epsilon; -if (this._t >= 0) { -dt = elapsedMilliseconds - this._t; -if (dt > 0) { -curTargDiff = this._current - this._target; -this._velocity += -this._springConstant * curTargDiff - this._damperConstant * this._velocity; -delta = this._velocity * dt; -if (!this._allowOvershoot) { -maxDelta = -curTargDiff; -if ((delta > 0.0 && maxDelta > 0.0 && maxDelta < delta) || (delta < 0.0 && maxDelta < 0.0 && maxDelta > delta)) { -delta = maxDelta; -this._velocity = 0.0 -} -} -this._current += delta -} -} -curTargDiff = this._current - this._target; -epsilon = 0.0000001; -if ((curTargDiff < epsilon && curTargDiff > -epsilon) && (delta < epsilon && delta > -epsilon)) { -isSettled = true; -this.setCurrentToTarget() -} -else { -isSettled = false; -this._t = elapsedMilliseconds -} -this._isSettled = isSettled; -return isSettled -}, isSettled: function isSettled() { -return this._isSettled -}, setTarget: function setTarget(target) { -if (this.target == target) { -return -} -this._target = target; -this._isSettled = false -}, setCurrent: function setCurrent(current) { -this._current = current; -this._isSettled = false -}, setCurrentAndTarget: function setCurrentAndTarget(target) { -this._target = target; -this.setCurrentToTarget() -}, setCurrentToTarget: function setCurrentToTarget() { -this._current = this._target; -this._velocity = 0.0; -this._isSettled = true; -this._t = -1 -}, getTarget: function getTarget() { -return this._target -}, getCurrent: function getCurrent() { -return this._current -} + step: function step(elapsedMilliseconds) { + if (this._isSettled) { + return true + } + var delta = 0.0, + curTargDiff, + isSettled, + dt, + maxDelta, + epsilon; + if (this._t >= 0) { + dt = elapsedMilliseconds - this._t; + if (dt > 0) { + curTargDiff = this._current - this._target; + this._velocity += -this._springConstant * curTargDiff - this._damperConstant * this._velocity; + delta = this._velocity * dt; + if (!this._allowOvershoot) { + maxDelta = -curTargDiff; + if ((delta > 0.0 && maxDelta > 0.0 && maxDelta < delta) || (delta < 0.0 && maxDelta < 0.0 && maxDelta > delta)) { + delta = maxDelta; + this._velocity = 0.0 + } + } + this._current += delta + } + } + curTargDiff = this._current - this._target; + epsilon = 0.0000001; + if ((curTargDiff < epsilon && curTargDiff > -epsilon) && (delta < epsilon && delta > -epsilon)) { + isSettled = true; + this.setCurrentToTarget() + } else { + isSettled = false; + this._t = elapsedMilliseconds + } + this._isSettled = isSettled; + return isSettled + }, + isSettled: function isSettled() { + return this._isSettled + }, + setTarget: function setTarget(target) { + if (this.target == target) { + return + } + this._target = target; + this._isSettled = false + }, + setCurrent: function setCurrent(current) { + this._current = current; + this._isSettled = false + }, + setCurrentAndTarget: function setCurrentAndTarget(target) { + this._target = target; + this.setCurrentToTarget() + }, + setCurrentToTarget: function setCurrentToTarget() { + this._current = this._target; + this._velocity = 0.0; + this._isSettled = true; + this._t = -1 + }, + getTarget: function getTarget() { + return this._target + }, + getCurrent: function getCurrent() { + return this._current + } }; "use strict"; + function SimpleSpline(x1, x2, y1, y2, k1, k2) { -var x2MinusX1=x2 - x1; -var y2MinusY1=y2 - y1; -var a=(k1 * x2MinusX1) - y2MinusY1; -var b=y2MinusY1 - (k2 * x2MinusX1); -this.getValue = function(x) { -var t=(x - x1) / x2MinusX1; -var oneMinusT=1 - t; -var result=(oneMinusT * y1) + (t * y2) + (t * oneMinusT * ((a * oneMinusT) + (b * t))); -return result -} -} + var x2MinusX1 = x2 - x1; + var y2MinusY1 = y2 - y1; + var a = (k1 * x2MinusX1) - y2MinusY1; + var b = y2MinusY1 - (k2 * x2MinusX1); + this.getValue = function(x) { + var t = (x - x1) / x2MinusX1; + var oneMinusT = 1 - t; + var result = (oneMinusT * y1) + (t * y2) + (t * oneMinusT * ((a * oneMinusT) + (b * t))); + return result + } +} + function CompositeSpline(xArray, yArray, kArray) { -if (xArray.length !== yArray.length || xArray.length !== kArray.length || xArray.length < 2) { -throw"CompositeSpline constructor requires three arrays of identical length of 2 or greater."; -} -var splines=[]; -var i; -for (i = 0; i < xArray.length - 1; i++) { -var iPlusOne=i + 1; -splines.push(new SimpleSpline(xArray[i], xArray[iPlusOne], yArray[i], yArray[iPlusOne], kArray[i], kArray[iPlusOne])) -} -this.getValue = function(x) { -i = 0; -while (i < xArray.length - 2 && x > xArray[i + 1]) { -i++ -} -return splines[i].getValue(x) -} + if (xArray.length !== yArray.length || xArray.length !== kArray.length || xArray.length < 2) { + throw "CompositeSpline constructor requires three arrays of identical length of 2 or greater."; + } + var splines = []; + var i; + for (i = 0; i < xArray.length - 1; i++) { + var iPlusOne = i + 1; + splines.push(new SimpleSpline(xArray[i], xArray[iPlusOne], yArray[i], yArray[iPlusOne], kArray[i], kArray[iPlusOne])) + } + this.getValue = function(x) { + i = 0; + while (i < xArray.length - 2 && x > xArray[i + 1]) { + i++ + } + return splines[i].getValue(x) + } } "use strict"; -var objectCollection={ -loop: function loop(obj, propertyName, keyCollectionFunction) { -var k; -for (k in obj[propertyName]) { -if (obj[propertyName].hasOwnProperty(k)) { -keyCollectionFunction(k, obj[propertyName][k]) -} -} -}, loopByType: function loopByType(obj, keyCollectionFunction) { -objectCollection.loop(obj, 'byType', keyCollectionFunction) -} +var objectCollection = { + loop: function loop(obj, propertyName, keyCollectionFunction) { + var k; + for (k in obj[propertyName]) { + if (obj[propertyName].hasOwnProperty(k)) { + keyCollectionFunction(k, obj[propertyName][k]) + } + } + }, + loopByType: function loopByType(obj, keyCollectionFunction) { + objectCollection.loop(obj, 'byType', keyCollectionFunction) + } +}; +var RMLStore = function() { + var self = this; + self.byId = {}; + self.byType = {}; + self.add = function(itemToAdd) { + if (itemToAdd.id == null) { + throw 'expected id property on the item'; + } + if (!itemToAdd.type) { + throw 'expected type property on the item'; + } + self.byId[itemToAdd.id] = itemToAdd; + self.byType[itemToAdd.type] = self.byType[itemToAdd.type] || []; + self.byType[itemToAdd.type].push(itemToAdd) + }; + self.remove = function(itemToRemoveId) { + var obj; + if (typeof(item) === 'number') { + obj = self.byId[itemToRemoveId]; + self.byType[obj.type].remove(obj); + if (self.byType[obj.type].length === 0) { + delete self.byType[obj.type] + } + delete self.byId[itemToRemoveId] + } else { + throw 'Expected a single ID'; + } + }; + self.update = function(delta) { + var i; + if (delta.added) { + for (i = 0; i < delta.added.length; ++i) { + self.add(delta.added[i]) + } + } + if (delta.removed) { + for (i = 0; i < delta.removed.length; ++i) { + self.remove(delta.removed[i]) + } + } + } }; -var RMLStore=function() { -var self=this; -self.byId = {}; -self.byType = {}; -self.add = function(itemToAdd) { -if (itemToAdd.id == null) { -throw'expected id property on the item'; +"use strict"; + +function BallisticPath(pitch1, heading1, fov1, pitch2, heading2, fov2, maxAllowedFov) { + var middleFov = Math.abs(pitch1 - pitch2) + Math.abs(heading1 - heading2); + var minFov = Math.min(fov1, fov2); + var maxFov = Math.max(fov1, fov2); + var minDuration = 0.5; + var pitchSpline, + headingSpline, + fovSpline; + if (middleFov > maxFov) { + middleFov = Math.min(middleFov, maxAllowedFov); + var fovDelta = (middleFov / maxFov) + (middleFov / minFov); + var duration = (minDuration + Math.log(fovDelta)) * 700; + pitchSpline = new SimpleSpline(0, duration, pitch1, pitch2, 0, 0); + headingSpline = new SimpleSpline(0, duration, heading1, heading2, 0, 0); + fovSpline = new CompositeSpline([0, duration / 2, duration], [fov1, middleFov, fov2], [0, 0, 0]) + } else { + var fovDelta = maxFov / minFov; + var duration = (minDuration + Math.log(fovDelta)) * 700; + pitchSpline = new SimpleSpline(0, duration, pitch1, pitch2, 0, 0); + headingSpline = new SimpleSpline(0, duration, heading1, heading2, 0, 0); + fovSpline = new SimpleSpline(0, duration, fov1, fov2, 0, 0) + } + this.getDuration = function() { + return duration + }; + this.getCurrentPitch = function(time) { + return pitchSpline.getValue(time) + }; + this.getCurrentHeading = function(time) { + return headingSpline.getValue(time) + }; + this.getCurrentFov = function(time) { + return fovSpline.getValue(time) + } } -if (!itemToAdd.type) { -throw'expected type property on the item'; +"use strict"; + +function RotationalFixedPositionCameraController(camera, upperPitchLimit, lowerPitchLimit, upperHeadingLimit, lowerHeadingLimit, dimension) { + this._camera = camera; + this._upperPitchLimit = (upperPitchLimit == null) ? MathHelper.degreesToRadians(90) : upperPitchLimit; + this._lowerPitchLimit = (lowerPitchLimit == null) ? MathHelper.degreesToRadians(-90) : lowerPitchLimit; + this._upperHeadingLimit = (upperHeadingLimit == null) ? MathHelper.degreesToRadians(360) : MathHelper.normalizeRadian(upperHeadingLimit); + this._lowerHeadingLimit = (lowerHeadingLimit == null) ? MathHelper.degreesToRadians(0) : MathHelper.normalizeRadian(lowerHeadingLimit); + this._pitchSpring = new ClassicSpring(0.01, 0.6, false); + this._headingSpring = new ClassicSpring(0.01, 0.6, false); + this._fieldOfViewSpring = new ClassicSpring(0.0033, 0.6, false); + this._sourcePitch = 0; + this._sourceHeading = 0; + this._targetPitch = 0; + this._targetHeading = 0; + this.panoramaWorldTransform = Matrix4x4.createIdentity(); + this.panoramaLocalTransform = Matrix4x4.createIdentity(); + this.deviceRotation = Matrix4x4.createIdentity(); + this.initInverseDeviceRotation = Matrix4x4.createIdentity(); + this._targetUp = new Vector3(0, 1, 0); + var pitchAndHeading = this.getPitchAndHeading(); + this._pitchSpring.setCurrentAndTarget(pitchAndHeading[0]); + this._headingSpring.setCurrentAndTarget(pitchAndHeading[1]); + this._fieldOfViewSpring.setCurrentAndTarget(this._camera.getVerticalFov()); + this._maxPixelScaleFactor = 2; + this._dimension = dimension; + this._minFieldOfView = MathHelper.degreesToRadians(20); + this._maxFieldOfView = MathHelper.degreesToRadians(80); + this.setViewportSize(this._camera.getViewport().getWidth(), this._camera.getViewport().getHeight()); + this._startingPitchandHeading = null; + this._startingPosition = null; + this._isRotating = false; + this._lastMovePoint = null; + this._lastGestureScale = null } -self.byId[itemToAdd.id] = itemToAdd; -self.byType[itemToAdd.type] = self.byType[itemToAdd.type] || []; -self.byType[itemToAdd.type].push(itemToAdd) +RotationalFixedPositionCameraController.calculatePitchAndHeading = function(currentLook, worldToLocalTransform) { + var transformedLook = worldToLocalTransform.transformVector3(currentLook); + var pitch = this._pitchSpring.getCurrent(); + var heading = MathHelper.normalizeRadian(this._headingSpring.getCurrent()); + return [pitch, heading] }; -self.remove = function(itemToRemoveId) { -var obj; -if (typeof(item) === 'number') { -obj = self.byId[itemToRemoveId]; -self.byType[obj.type].remove(obj); -if (self.byType[obj.type].length === 0) { -delete self.byType[obj.type] -} -delete self.byId[itemToRemoveId] -} -else { -throw'Expected a single ID'; -} +RotationalFixedPositionCameraController.prototype = { + hasCompleted: function hasCompleted() { + return this._pitchSpring.isSettled() && this._headingSpring.isSettled() && this._fieldOfViewSpring.isSettled() && this._ballisticPath == null + }, + calculatePitchAndHeadingDelta: function calculatePitchAndHeadingDelta(dx, dy, viewportWidth, viewportHeight, focalLength) { + var pitch, + heading; + var aspectRatio = viewportWidth / viewportHeight; + if (dx === 0) { + heading = 0 + } else { + heading = 2 * Math.atan((aspectRatio * (dx / viewportWidth)) / focalLength) + } + if (dy === 0) { + pitch = 0 + } else { + pitch = 2 * Math.atan((-dy / viewportHeight) / focalLength) + } + return [pitch, heading] + }, + animateToPose: function animateToPose(pitch, heading, fov, callback) { + if (this._ballisticPathCallback) { + this._ballisticPathCallback(false) + } + var sourceHeading = MathHelper.pickStartHeadingToTakeShortestPath(this._headingSpring.getCurrent(), heading); + this._ballisticPath = new BallisticPath(this._pitchSpring.getCurrent(), sourceHeading, this._fieldOfViewSpring.getCurrent(), pitch, heading, fov, this._maxFieldOfView); + this._ballisticStartTime = (new Date).getTime(); + this._ballisticDuration = this._ballisticPath.getDuration(); + this._ballisticEasingSpline = new SimpleSpline(0, this._ballisticDuration, 0, this._ballisticDuration, 0.5, 0); + this._ballisticPathCallback = callback + }, + _cancelBallisticPath: function _cancelBallisticPath(reachedDestination) { + if (this._ballisticPathCallback) { + this._ballisticPathCallback(reachedDestination) + } + this._ballisticPath = null; + this._ballisticStartTime = null; + this._ballisticDuration = null; + this._ballisticEasingSpline = null; + this._ballisticPathCallback = null + }, + _constrainHeading: function _constrainHeading(heading) { + var constrainedHeading = MathHelper.normalizeRadian(heading); + if (MathHelper.isZero(this._upperHeadingLimit - this._lowerHeadingLimit)) { + return constrainedHeading + } + var distToLower, + distToUpper; + if (this._lowerHeadingLimit > this._upperHeadingLimit) { + if (constrainedHeading >= this._lowerHeadingLimit || constrainedHeading <= this._upperHeadingLimit) { + return constrainedHeading + } else { + distToLower = this._lowerHeadingLimit - constrainedHeading; + distToUpper = constrainedHeading - this._upperHeadingLimit + } + } else { + if (constrainedHeading >= this._lowerHeadingLimit && constrainedHeading <= this._upperHeadingLimit) { + return constrainedHeading + } else if (constrainedHeading < this._lowerHeadingLimit) { + distToLower = this._lowerHeadingLimit - constrainedHeading; + distToUpper = constrainedHeading + MathHelper.twoPI - this._upperHeadingLimit + } else { + distToLower = this._lowerHeadingLimit - (constrainedHeading + MathHelper.twoPI); + distToUpper = constrainedHeading - this._upperHeadingLimit + } + } + return (distToLower < distToUpper) ? this._lowerHeadingLimit : this._upperHeadingLimit + }, + setPitchAndHeading: function setPitchAndHeading(pitch, heading, animate) { + this._cancelBallisticPath(false); + var constrainedPitch = pitch; + if (constrainedPitch > this._upperPitchLimit) { + constrainedPitch = this._upperPitchLimit - 0.0001 + } + if (constrainedPitch < this._lowerPitchLimit) { + constrainedPitch = this._lowerPitchLimit + 0.0001 + } + var constrainedHeading = this._constrainHeading(heading); + if (animate) { + this._pitchSpring.setTarget(constrainedPitch); + var currentHeading = this._headingSpring.getCurrent(); + currentHeading = MathHelper.pickStartHeadingToTakeShortestPath(currentHeading, constrainedHeading); + this._headingSpring.setCurrent(currentHeading); + this._headingSpring.setTarget(constrainedHeading) + } else { + this._pitchSpring.setCurrentAndTarget(constrainedPitch); + this._headingSpring.setCurrentAndTarget(constrainedHeading); + this.updateCameraProperties() + } + }, + getPitchAndHeading: function getPitchAndHeading() { + var pitchAndHeading = [this._pitchSpring.getCurrent(), this._headingSpring.getCurrent()]; + return pitchAndHeading + }, + getTargetPitchAndHeading: function getTargetPitchAndHeading() { + return [this._pitchSpring.getTarget(), this._headingSpring.getTarget()] + }, + getVerticalFovLimits: function getVerticalFovLimits() { + return { + minimum: this._minFieldOfView, + maximum: this._maxFieldOfView + } + }, + setVerticalFov: function setVerticalFov(fov, animate) { + this._cancelBallisticPath(false); + var clampedFov = MathHelper.clamp(fov, this._minFieldOfView, this._maxFieldOfView); + if (animate) { + this._fieldOfViewSpring.setTarget(clampedFov) + } else { + this._fieldOfViewSpring.setCurrentAndTarget(clampedFov) + } + this.updateCameraProperties() + }, + getVerticalFov: function getVerticalFov() { + return this._fieldOfViewSpring.getCurrent() + }, + getRelativeTarget: function getRelativeTarget(startingPitch, startingHeading, dx, dy, viewportWidth, viewportHeight, deltaMultiplier) { + dx *= deltaMultiplier; + dy *= deltaMultiplier; + var focalLength = this._camera.getFocalLength(); + var relativePitch; + var relativeHeading; + var pitchAndHeading = this.calculatePitchAndHeadingDelta(dx, dy, viewportWidth, viewportHeight, focalLength); + relativePitch = pitchAndHeading[0]; + relativeHeading = pitchAndHeading[1]; + var targetHeading = MathHelper.normalizeRadian(startingHeading - relativeHeading); + var targetPitch = startingPitch - relativePitch; + var worldToLocalTransform = this.deviceRotation.inverse().multiply(this.panoramaLocalTransform.multiply(this.panoramaWorldTransform.inverse())); + var sourcePitchAndHeading = [this._pitchSpring.getCurrent(), this._headingSpring.getCurrent()]; + var sourceHeading = sourcePitchAndHeading[1]; + sourceHeading = MathHelper.pickStartHeadingToTakeShortestPath(sourceHeading, targetHeading); + return { + fromPitch: sourcePitchAndHeading[0], + fromHeading: sourceHeading, + toPitch: targetPitch, + toHeading: targetHeading + } + }, + setRelativeTarget: function setRelativeTarget(startingPitch, startingHeading, dx, dy, viewportWidth, viewportHeight, deltaMultiplier) { + dx *= deltaMultiplier; + dy *= deltaMultiplier; + var focalLength = this._camera.getFocalLength(); + var relativePitch; + var relativeHeading; + var pitchAndHeading = this.calculatePitchAndHeadingDelta(dx, dy, viewportWidth, viewportHeight, focalLength); + relativePitch = pitchAndHeading[0]; + relativeHeading = pitchAndHeading[1]; + this._targetHeading = this._constrainHeading(startingHeading - relativeHeading); + this._targetPitch = startingPitch - relativePitch; + if (this._targetPitch > this._upperPitchLimit) { + this._targetPitch = this._upperPitchLimit - 0.0001 + } + if (this._targetPitch < this._lowerPitchLimit) { + this._targetPitch = this._lowerPitchLimit + 0.0001 + } + var worldToLocalTransform = this.deviceRotation.inverse().multiply(this.panoramaLocalTransform.multiply(this.panoramaWorldTransform.inverse())); + var sourcePitchAndHeading = [this._pitchSpring.getCurrent(), this._headingSpring.getCurrent()]; + this._sourcePitch = sourcePitchAndHeading[0]; + this._sourceHeading = sourcePitchAndHeading[1]; + this._sourceHeading = MathHelper.pickStartHeadingToTakeShortestPath(this._sourceHeading, this._targetHeading); + this._pitchSpring.setCurrent(this._sourcePitch); + this._pitchSpring.setTarget(this._targetPitch); + this._headingSpring.setCurrent(this._sourceHeading); + this._headingSpring.setTarget(this._targetHeading) + }, + calculateLookFromPitchAndHeading: function calculateLookFromPitchAndHeading(pitch, heading, worldLook, worldUp, worldSide, applyHeadingBeforePitch) { + var pitchRotation = Quaternion.fromAxisAngle(worldSide, pitch); + var headingRotation = Quaternion.fromAxisAngle(worldUp, -heading); + if (applyHeadingBeforePitch) { + return pitchRotation.multiply(headingRotation).transform(worldLook) + } else { + return headingRotation.multiply(pitchRotation).transform(worldLook) + } + }, + tryPitchHeadingToPixel: function tryPitchHeadingToPixel(pitch, heading) { + var look = this.calculateLookFromPitchAndHeading(pitch, heading, this._worldLook, this._worldUp, this._worldSide); + if (this._camera.getLook().dot(look) <= 0) { + return null + } + var projectedPoint = this._camera.projectTo2D(look); + return new Vector2(projectedPoint.x, projectedPoint.y) + }, + tryPixelToPitchHeading: function tryPixelToPitchHeading(pixel) { + var viewport = this._camera.getViewport(); + var focalLength = this._camera.getFocalLength(); + var halfWidth = viewport.getWidth() * 0.5; + var halfHeight = viewport.getHeight() * 0.5; + var adjustedFocalLength = focalLength * halfHeight; + var x = pixel.x - halfWidth; + var y = pixel.y - halfHeight; + var pitchDelta = -Math.atan2(y, adjustedFocalLength); + var headingDelta = Math.atan2(x, adjustedFocalLength); + var look = this.calculateLookFromPitchAndHeading(pitchDelta, headingDelta, this._look, this._up, this._side, true); + var upComponent = look.dot(this._worldUp); + var sideComponent = look.dot(this._worldSide); + var forwardComponent = look.dot(this._worldLook); + var pitch = Math.atan2(upComponent, Math.max(0, Math.sqrt(1 - upComponent * upComponent))); + var heading = MathHelper.normalizeRadian(Math.atan2(sideComponent, forwardComponent)); + if (isNaN(pitch) || isNaN(heading)) { + return null + } + return { + pitch: pitch, + heading: heading + } + }, + update: function update() { + if (this.hasCompleted()) { + return + } + var t = (new Date).getTime(); + if (this._ballisticPath) { + var timeDelta = t - this._ballisticStartTime; + if (timeDelta > this._ballisticDuration) { + this._cancelBallisticPath(true) + } else { + var easedTimeDelta = this._ballisticEasingSpline.getValue(timeDelta); + this._pitchSpring.setCurrentAndTarget(this._ballisticPath.getCurrentPitch(easedTimeDelta)); + this._headingSpring.setCurrentAndTarget(this._ballisticPath.getCurrentHeading(easedTimeDelta)); + this._fieldOfViewSpring.setCurrentAndTarget(Math.min(this._ballisticPath.getCurrentFov(easedTimeDelta), this._maxFieldOfView)) + } + } + this._pitchSpring.step(t); + this._headingSpring.step(t); + this._fieldOfViewSpring.step(t); + this.updateCameraProperties() + }, + zoom: function zoom(scaleFactor, fromTarget) { + this._cancelBallisticPath(false); + var proposedFov = (fromTarget) ? this._fieldOfViewSpring.getTarget() : this._fieldOfViewSpring.getCurrent(); + proposedFov *= scaleFactor; + var targetFov = MathHelper.clamp(proposedFov, this._minFieldOfView, this._maxFieldOfView); + this._fieldOfViewSpring.setTarget(targetFov) + }, + zoomToggle: function zoomToggle() { + var mid = (this._minFieldOfView + this._maxFieldOfView) * 0.5; + if (this._camera.getVerticalFov() > mid) { + this._fieldOfViewSpring.setTarget(this._minFieldOfView) + } else { + this._fieldOfViewSpring.setTarget(this._maxFieldOfView) + } + }, + discreteZoomFactor: 0.7, + zoomIn: function zoomIn() { + this._cancelBallisticPath(false); + this._fieldOfViewSpring.setTarget(Math.max(this._minFieldOfView, this._camera.getVerticalFov() * this.discreteZoomFactor)) + }, + zoomOut: function zoomOut() { + this._cancelBallisticPath(false); + this._fieldOfViewSpring.setTarget(Math.min(this._maxFieldOfView, this._camera.getVerticalFov() / this.discreteZoomFactor)) + }, + updateCameraProperties: function updateCameraProperties() { + var pitch = this._pitchSpring.getCurrent(); + if (pitch > this._upperPitchLimit) { + pitch = this._upperPitchLimit - 0.0001 + } + if (pitch < this._lowerPitchLimit) { + pitch = this._lowerPitchLimit + 0.0001 + } + var heading = this._constrainHeading(this._headingSpring.getCurrent()); + var pitchRotation; + var headingRotation; + var bubbleLook = new Vector3(0, 0, -1); + var bubbleUp = new Vector3(0, 1, 0); + var bubbleSide = new Vector3(1, 0, 0); + var worldTransform = Matrix4x4.createIdentity(); + this._worldLook = worldTransform.transformVector3(bubbleLook); + this._worldUp = worldTransform.transformVector3(bubbleUp); + this._worldSide = worldTransform.transformVector3(bubbleSide); + pitchRotation = Matrix4x4.createRotationX(pitch); + headingRotation = Matrix4x4.createRotationY(-heading); + var rotation = headingRotation.multiply(pitchRotation); + this._look = rotation.transformVector3(this._worldLook); + this._up = rotation.transformVector3(this._worldUp); + this._side = rotation.transformVector3(this._worldSide); + var bubbleOrigin = new Vector3(0, 0, 0); + var worldPosition = bubbleOrigin; + this._camera.setPosition(worldPosition); + this._camera.setLook(this._look); + this._camera.setUp(this._up); + this._camera.setVerticalFov(this._fieldOfViewSpring.getCurrent()); + if (this.viewChangeCallback != null) { + this.viewChangeCallback() + } + }, + onDiscreteZoom: function onDiscreteZoom(e) { + var zoomPoint = new Vector2(this._camera.getViewport().getWidth() * 0.5, this._camera.getViewport().getHeight() * 0.5); + if (e.direction > 0) { + this.zoomIn(zoomPoint) + } else { + this.zoomOut(zoomPoint) + } + }, + onGestureStart: function onGestureStart(e) { + this._lastGestureScale = 1; + this.beginRotation(e.screenX, e.screenY); + this._gestureChanged = false + }, + onGestureEnd: function onGestureEnd(e) { + if (this._isRotating) { + this._lastGestureScale = null; + this.endRotation(); + if (!this._gestureChanged || (this._startingPosition[0] == e.screenX && this._startingPosition[1] == e.screenY)) { + this.pick(e) + } + } + }, + onGestureChange: function onGestureChange(e) { + if (this._isRotating) { + this._gestureChanged = true; + var scaleDelta = this._lastGestureScale / e.scale; + if (scaleDelta !== 1) { + this.zoom(scaleDelta, true) + } + this._lastGestureScale = e.scale; + this._lastMovePoint = new Vector2(this._startingPosition[0] + e.translationX, this._startingPosition[1] + e.translationY) + } + }, + beginRotation: function beginRotation(x, y) { + this._isRotating = true; + this._startingPosition = [x, y]; + this._startingPitchandHeading = this.getPitchAndHeading() + }, + endRotation: function endRotation() { + this._isRotating = false; + this._lastMovePoint = null + }, + updateRotation: function updateRotation() { + if (this._camera === null) { + return + } + if (this._lastMovePoint == null) { + return + } + if (!this._isRotating) { + return + } + var sx = this._lastMovePoint.x; + var sy = this._lastMovePoint.y; + var viewport = this._camera.getViewport(); + var deltaMultiplier = 1.1; + var dx = sx - this._startingPosition[0]; + var dy = sy - this._startingPosition[1]; + this.setRelativeTarget(this._startingPitchandHeading[0], this._startingPitchandHeading[1], dx, dy, viewport.getWidth(), viewport.getHeight(), deltaMultiplier) + }, + pick: function pick(e) { + var w = this._camera.getViewport().getWidth(), + h = this._camera.getViewport().getHeight(), + camFov = this._camera.getVerticalFov(), + camAspect = this._camera.getViewport().getAspectRatio(); + var w2 = w / 2, + h2 = h / 2; + e.clientX -= 8; + e.clientY -= 8; + if (e.clientX < 0 || e.clientY < 0) + console.log("bad"); + var dx = e.clientX - w * 0.5, + dy = (h - 1 - e.clientY) - h * 0.5; + var deltaPitch = Math.atan(dy / h2 * Math.tan(camFov * 0.5)); + var deltaHeading = Math.atan(dx / w2 * Math.tan(camFov * 0.5 * camAspect)); + var targetPitch = this._pitchSpring.getCurrent() + deltaPitch; + var targetHeading = MathHelper.normalizeRadian(this._headingSpring.getCurrent() + deltaHeading); + var ph = this.getRelativeTarget(this._startingPitchandHeading[0], this._startingPitchandHeading[1], -(e.clientX - w * 0.5), (h - 1 - e.clientY) - h * 0.5, w, h, 1); + ph.toHeading = MathHelper.normalizeRadian(ph.toHeading) + }, + deltaAngles: function deltaAngles(a1, a2) { + var value = a1 - a2; + while (value < -Math.PI) { + value += 2 * Math.PI + } + while (value >= Math.PI) { + value -= 2 * Math.PI + } + return value + }, + deltaThreshold: 0.01 * 0.01 + 0.01 * 0.01, + isLargeChange: function isLargeChange(d1, d2) { + return d1 * d1 + d2 * d2 > this.deltaThreshold + }, + userInputing: false, + _userInteracted: function _userInteracted() { + if (this.userInteractionCallback) { + this.userInteractionCallback() + } + }, + control: function control(originalCamera, unprocessedEvents) { + var now = new Date; + var i, + e; + for (i = 0; i < unprocessedEvents.length; ++i) { + e = unprocessedEvents[i]; + switch (e.type) { + case 'gestureStart': + this.userInputing = true; + this._cancelBallisticPath(false); + this._userInteracted(); + this.stopMovingCamera(); + this.onGestureStart(e); + break; + case 'gestureChange': + this.onGestureChange(e); + break; + case 'gestureEnd': + this.userInputing = false; + this.onGestureEnd(e); + break; + case 'discreteZoom': + this._cancelBallisticPath(false); + this._userInteracted(); + this.onDiscreteZoom(e); + break; + case 'keydown': + this.userInputing = true; + this._cancelBallisticPath(false); + this._userInteracted(); + this.onKeyDown(e); + break; + case 'keyup': + this.userInputing = false; + this.onKeyUp(e); + break; + default: + break + } + } + if (this._gyrometer) { + var gyroReading = this._gyrometer.getCurrentReading(); + if (gyroReading && this.prevGyroReading && gyroReading.timestamp != this.prevGyroReading.timestamp && !this.userInputing && this._ballisticPath == null && this.prevFrameTime) { + var pitchHeadingDelta = this.processGyrometerReading(gyroReading, now - this.prevFrameTime); + if (pitchHeadingDelta[0] !== 0 || pitchHeadingDelta[1] !== 0) { + var pitchHeadingTarget = this.getTargetPitchAndHeading(); + var pitch = pitchHeadingTarget[0] + pitchHeadingDelta[0]; + var heading = pitchHeadingTarget[1] - pitchHeadingDelta[1]; + this.setPitchAndHeading(pitch, heading, true) + } + } + this.prevGyroReading = gyroReading + } + this.update(); + this.updateRotation(); + this.prevFrameTime = now; + return this._camera + }, + setGyrometer: function setGyrometer(gyrometer) { + this._gyrometer = gyrometer + }, + processGyrometerReading: function processGyrometerReading(reading, timeDelta) { + var threshold = (this.prevGyrometerReadingNonZero) ? 1 : 2; + if (reading == null) { + this.prevGyrometerReadingNonZero = false; + return [0, 0] + } + if (Math.abs(reading.angularVelocityX) < threshold && Math.abs(reading.angularVelocityY) < threshold && Math.abs(reading.angularVelocityZ) < threshold) { + this.prevGyrometerReadingNonZero = false; + return [0, 0] + } + this.prevGyrometerReadingNonZero = true; + var multiplier = 1.5 * MathHelper.degreesToRadians(timeDelta * 0.001) * Math.sin(this.getVerticalFov()); + var headingDelta = reading.angularVelocityY * multiplier; + var pitchDelta = reading.angularVelocityX * multiplier; + var currentOrientation = null; + if (Windows && Windows.Graphics && Windows.Graphics.Display && Windows.Graphics.Display.DisplayProperties) { + currentOrientation = Windows.Graphics.Display.DisplayProperties.currentOrientation + } + if (Windows.Graphics.Display.DisplayProperties.nativeOrientation == Windows.Graphics.Display.DisplayOrientations.landscape) { + if (currentOrientation == null || currentOrientation === Windows.Graphics.Display.DisplayOrientations.none || currentOrientation === Windows.Graphics.Display.DisplayOrientations.landscape) { + return [pitchDelta, headingDelta] + } else if (currentOrientation === Windows.Graphics.Display.DisplayOrientations.portrait) { + return [headingDelta, -pitchDelta] + } else if (currentOrientation === Windows.Graphics.Display.DisplayOrientations.landscapeFlipped) { + return [-pitchDelta, -headingDelta] + } else if (currentOrientation === Windows.Graphics.Display.DisplayOrientations.portraitFlipped) { + return [-headingDelta, pitchDelta] + } + } else { + if (currentOrientation == null || currentOrientation === Windows.Graphics.Display.DisplayOrientations.none || currentOrientation === Windows.Graphics.Display.DisplayOrientations.portrait) { + return [pitchDelta, headingDelta] + } else if (currentOrientation === Windows.Graphics.Display.DisplayOrientations.landscapeFlipped) { + return [headingDelta, -pitchDelta] + } else if (currentOrientation === Windows.Graphics.Display.DisplayOrientations.portraitFlipped) { + return [-pitchDelta, -headingDelta] + } else if (currentOrientation === Windows.Graphics.Display.DisplayOrientations.landscape) { + return [-headingDelta, pitchDelta] + } + } + }, + _updateMinFov: function _updateMinFov() { + if (this._dimension) { + this._minFieldOfView = this._height * MathHelper.degreesToRadians(90) / (this._dimension * this._maxPixelScaleFactor) + } + }, + setMaxPixelScaleFactor: function setMaxPixelScaleFactor(factor) { + if (factor < 1) { + throw "Max pixel scale factor must be 1 or greater"; + } + this._maxPixelScaleFactor = factor; + this._updateMinFov() + }, + setViewportSize: function setViewportSize(width, height) { + this._height = height; + this._updateMinFov() + }, + scrollSpeedX: 0, + scrollSpeedY: 0, + scrollAccX: 0, + scrollAccY: 0, + motionHandle: 0, + onKeyDown: function onKeyDown(e) { + if (e.keyCode == '37') + this.startRotateHeading(-1); + else if (e.keyCode == '38') + this.startRotatePitch(1); + else if (e.keyCode == '39') + this.startRotateHeading(1); + else if (e.keyCode == '40') + this.startRotatePitch(-1); + else if (e.keyCode == '107' || e.keyCode == '187') + this.zoomIn(); + else if (e.keyCode == '109' || e.keyCode == '189') + this.zoomOut() + }, + onKeyUp: function onKeyUp(e) { + if (e.keyCode == '37' || e.keyCode == '39') + this.stopRotateHeading(); + else if (e.keyCode == '38' || e.keyCode == '40') + this.stopRotatePitch() + }, + startRotatePitch: function startRotatePitch(acc) { + this.scrollAccY = acc; + this.moveCamera() + }, + stopRotatePitch: function stopRotatePitch() { + this.scrollAccY = 0 + }, + startRotateHeading: function startRotateHeading(acc) { + this.scrollAccX = acc; + this.moveCamera() + }, + stopRotateHeading: function stopRotateHeading() { + this.scrollAccX = 0 + }, + moveCamera: function moveCamera() { + var that = this; + if (!this.motionHandle) { + this.motionHandle = setInterval(function() { + that.scrollSpeedX += that.scrollAccX; + that.scrollSpeedY += that.scrollAccY; + that.scrollSpeedX *= 0.9; + that.scrollSpeedY *= 0.9; + var ph = that.getPitchAndHeading(); + ph[0] += that.scrollSpeedY * 0.005; + ph[1] += that.scrollSpeedX * 0.005; + that.setPitchAndHeading(ph[0], ph[1]); + if (Math.abs(that.scrollSpeedX) < 0.1 && Math.abs(that.scrollSpeedY) < 0.1) { + that.stopMovingCamera(); + return + } + }, 33) + } + }, + stopMovingCamera: function stopMovingCamera() { + if (this.motionHandle) { + clearInterval(this.motionHandle); + this.motionHandle = 0 + } + } }; -self.update = function(delta) { -var i; -if (delta.added) { -for (i = 0; i < delta.added.length; ++i) { -self.add(delta.added[i]) -} -} -if (delta.removed) { -for (i = 0; i < delta.removed.length; ++i) { -self.remove(delta.removed[i]) -} -} -} +"use strict"; +var TileId = function(levelOfDetail, x, y) { + var self = this; + self.x = Math.floor(x); + self.y = Math.floor(y); + self.levelOfDetail = Math.floor(levelOfDetail) +}; +TileId.prototype = { + hasParent: function hasParent() { + return this.levelOfDetail > 0 + }, + getParent: function getParent() { + if (!this.hasParent()) { + throw '0 level does not have a parent'; + } + return new TileId(this.levelOfDetail - 1, this.x >> 1, this.y >> 1) + }, + getChildren: function getChildren() { + var childX = this.x << 1, + childY = this.y << 1; + return [new TileId(this.levelOfDetail + 1, childX, childY), new TileId(this.levelOfDetail + 1, childX + 1, childY), new TileId(this.levelOfDetail + 1, childX, childY + 1), new TileId(this.levelOfDetail + 1, childX + 1, childY + 1)] + }, + isChildOf: function isChildOf(other) { + if (this.levelOfDetail < other.levelOfDetail) { + return false + } + var lodDifference = this.levelOfDetail - other.levelOfDetail; + return (this.x >> this.levelOfDetail) === other.x && (this.y >> this.levelOfDetail) === other.y + }, + equals: function equals(other) { + return this.x === other.x && this.y === other.y && this.levelOfDetail === this.levelOfDetail + }, + toString: function toString() { + return '(' + this.x + ',' + this.y + ',' + this.levelOfDetail + ')' + } +}; +var TiledImagePyramid = function(name, baseImageWidth, baseImageHeight, tileWidth, tileHeight, minimumLod, tileOverlap, tileBorder, atlasImage) { + if (!baseImageWidth || !baseImageHeight || !tileWidth || !tileHeight) { + throw 'Expected baseImageWidth baseImageHeight tileWidth tileHeight as positive integer arguments'; + } + this.baseImageWidth = baseImageWidth; + this.baseImageHeight = baseImageHeight; + this.tileWidth = tileWidth; + this.tileHeight = tileHeight; + this.minimumLod = minimumLod || 0; + this.finestLod = MathHelper.ceilLog2(Math.max(baseImageWidth, baseImageHeight)); + this.tileOverlap = tileOverlap || 0; + this.tileBorder = tileBorder || 0; + this.atlasImage = atlasImage; + this.name = name; + this.lodHistory = {}; + this.callCount = 0 +}; +var debugReturnedTiles = false; +var prevReturnedTiles = {}; +TiledImagePyramid.prototype = { + isAtlasTile: function isAtlasTile(tileId) { + return (this.atlasImage && tileId.levelOfDetail == this.minimumLod && tileId.x == 0 && tileId.y == 0) + }, + getLodWidthInTiles: function getLodWidthInTiles(lod) { + return MathHelper.divRoundUp(MathHelper.divPow2RoundUp(this.baseImageWidth, this.finestLod - lod), this.tileWidth) + }, + getLodHeightInTiles: function getLodHeightInTiles(lod) { + return MathHelper.divRoundUp(MathHelper.divPow2RoundUp(this.baseImageHeight, this.finestLod - lod), this.tileHeight) + }, + getLodWidth: function getLodWidth(lod) { + return MathHelper.divPow2RoundUp(this.baseImageWidth, this.finestLod - lod) + }, + getLodHeight: function getLodHeight(lod) { + return MathHelper.divPow2RoundUp(this.baseImageHeight, this.finestLod - lod) + }, + getEdgeFlags: function getEdgeFlags(tileId) { + return { + isLeft: tileId.x === 0, + isRight: tileId.x === this.getLodWidthInTiles(tileId.levelOfDetail) - 1, + isTop: tileId.y === 0, + isBottom: tileId.y === this.getLodHeightInTiles(tileId.levelOfDetail) - 1 + } + }, + getTileDimensions: function getTileDimensions(tileId) { + var lodWidth = this.getLodWidth(tileId.levelOfDetail); + var lodHeight = this.getLodHeight(tileId.levelOfDetail); + var width, + height; + if (this.isAtlasTile(tileId)) { + width = lodWidth + (2 * this.tileBorder); + height = lodHeight + (2 * this.tileBorder) + } else { + var edgeFlags = this.getEdgeFlags(tileId); + var xMax = tileId.x * this.tileWidth + this.tileWidth - 1; + width = (xMax < lodWidth) ? this.tileWidth : this.tileWidth - (xMax - lodWidth); + if (edgeFlags.isLeft || edgeFlags.isRight) { + width += this.tileOverlap; + width += this.tileBorder + } else { + width += 2 * this.tileOverlap + } + var yMax = tileId.y * this.tileHeight + this.tileHeight - 1; + height = (yMax < lodHeight) ? this.tileHeight : this.tileHeight - (yMax - lodHeight); + if (edgeFlags.isTop || edgeFlags.isBottom) { + height += this.tileOverlap; + height += this.tileBorder + } else { + height += 2 * this.tileOverlap + } + } + var tileDimension = new Vector2(width, height); + return tileDimension + }, + getTileTransform: function getTileTransform(tileId) { + var scale = 1 << (this.finestLod - tileId.levelOfDetail); + var edgeFlags = this.getEdgeFlags(tileId); + var scaleTransform = Matrix4x4.createScale(scale, scale, 1.0); + var xPos = tileId.x * this.tileWidth; + var lodHeight = this.getLodHeight(tileId.levelOfDetail); + var yMax = tileId.y * this.tileHeight + this.tileHeight; + var height = (yMax < lodHeight) ? this.tileHeight : this.tileHeight - (yMax - lodHeight); + var yPos = lodHeight - (height + tileId.y * this.tileHeight); + var overlapTransform = Matrix4x4.createTranslation(edgeFlags.isLeft ? -this.tileBorder : -this.tileOverlap, edgeFlags.isTop ? -this.tileBorder : -this.tileOverlap, 0.0); + var translation = Matrix4x4.createTranslation(xPos, yPos, 0.0); + return scaleTransform.multiply(translation.multiply(overlapTransform)) + }, + getLodFromTexelToPixelRatio: function getLodFromTexelToPixelRatio(texelToPixelRatio) { + return this.finestLod - MathHelper.logBase(texelToPixelRatio, 2) + }, + getDiscreteLod: function getDiscreteLod(lod) { + var renderLod = (lod - Math.floor(lod) < 0.5849625) ? Math.floor(lod) : Math.ceil(lod); + return MathHelper.clamp(renderLod, this.minimumLod, this.finestLod) + }, + getTexelRatio: function getTexelRatio(screenSpacePolygon, textureSpacePolygon) { + if (screenSpacePolygon.length !== textureSpacePolygon.length) { + throw 'expected two equal length arrays'; + } + var v0Idx = screenSpacePolygon.length - 1; + var minTexelToPixelRatio = Number.MAX_VALUE; + var maxTexelToPixelRatio = -Number.MAX_VALUE; + var numberOfSegments = 0; + var totalTexelToPixelRatio = 0; + var texelLengths = []; + var pixelLengths = []; + for (var v1Idx = 0; v1Idx < screenSpacePolygon.length; ++v1Idx) { + var baseImageSpaceV0X = textureSpacePolygon[v0Idx].x; + var baseImageSpaceV0Y = textureSpacePolygon[v0Idx].y; + var baseImageSpaceV1X = textureSpacePolygon[v1Idx].x; + var baseImageSpaceV1Y = textureSpacePolygon[v1Idx].y; + var screenSpaceV0X = screenSpacePolygon[v0Idx].x; + var screenSpaceV0Y = screenSpacePolygon[v0Idx].y; + var screenSpaceV1X = screenSpacePolygon[v1Idx].x; + var screenSpaceV1Y = screenSpacePolygon[v1Idx].y; + var dx = screenSpaceV1X - screenSpaceV0X; + var dy = screenSpaceV1Y - screenSpaceV0Y; + var du = baseImageSpaceV1X - baseImageSpaceV0X; + var dv = baseImageSpaceV1Y - baseImageSpaceV0Y; + var texelLength = Math.sqrt(du * du + dv * dv); + var pixelLength = Math.sqrt(dx * dx + dy * dy); + if (pixelLength != 0) { + var texelToPixelRatio = texelLength / pixelLength; + minTexelToPixelRatio = Math.min(minTexelToPixelRatio, texelToPixelRatio); + maxTexelToPixelRatio = Math.max(maxTexelToPixelRatio, texelToPixelRatio); + totalTexelToPixelRatio += texelToPixelRatio; + ++numberOfSegments + } + texelLengths.push(texelLength); + pixelLengths.push(pixelLength); + v0Idx = v1Idx + } + return { + meanTexelToPixelRatio: totalTexelToPixelRatio / numberOfSegments, + minTexelToPixelRatio: minTexelToPixelRatio, + maxTexelToPixelRatio: maxTexelToPixelRatio, + texelLengths: texelLengths, + pixelLengths: pixelLengths + } + }, + _isInvalidNdcSpacePolygon: function _isInvalidNdcSpacePolygon(poly) { + if (poly.length < 3) { + return true + } + if (!poly[0].equals) { + return true + } + for (var i = 1; i < poly.length; i++) { + if (!poly[0].equals(poly[1])) { + return false + } + } + return true + }, + getVisibleTiles: function getVisibleTiles(getModelTransform, viewProjectionTransform, viewportWidth, viewportHeight, textureSpaceClipRect, useLowerLod) { + var viewportTransform = GraphicsHelper.createViewportToScreen(viewportWidth, viewportHeight); + var visibleTiles = []; + var clippedPolygon = this.getClippedPolygon(getModelTransform, viewProjectionTransform); + if (this._isInvalidNdcSpacePolygon(clippedPolygon.ndcSpacePolygon)) { + return { + visibleTiles: visibleTiles, + textureSpacePolygon: clippedPolygon.textureSpacePolygon + } + } + var textureSpacePolygon = []; + var screenSpacePolygon = []; + for (var i = 0; i < clippedPolygon.ndcSpacePolygon.length; ++i) { + var invTextureW = 1.0 / clippedPolygon.textureSpacePolygon[i].w; + clippedPolygon.textureSpacePolygon[i].x *= invTextureW; + clippedPolygon.textureSpacePolygon[i].y *= invTextureW; + clippedPolygon.textureSpacePolygon[i].z *= invTextureW; + clippedPolygon.textureSpacePolygon[i].z = 0.0; + clippedPolygon.textureSpacePolygon[i].w = 1.0; + textureSpacePolygon.push(new Vector2(clippedPolygon.textureSpacePolygon[i].x, clippedPolygon.textureSpacePolygon[i].y)); + var invSpaceW = 1.0 / clippedPolygon.ndcSpacePolygon[i].w; + clippedPolygon.ndcSpacePolygon[i].x *= invSpaceW; + clippedPolygon.ndcSpacePolygon[i].y *= invSpaceW; + clippedPolygon.ndcSpacePolygon[i].z *= invSpaceW; + clippedPolygon.ndcSpacePolygon[i].w = 1.0; + var screenSpacePoint = viewportTransform.transformVector4(clippedPolygon.ndcSpacePolygon[i]); + screenSpacePolygon.push(new Vector2(screenSpacePoint.x, screenSpacePoint.y)) + } + if (textureSpaceClipRect) { + var poly = convexPolygonClipper.clip(new Vector4(textureSpaceClipRect.getLeft(), textureSpaceClipRect.getTop(), 0), new Vector4(textureSpaceClipRect.getRight(), textureSpaceClipRect.getBottom(), 0), clippedPolygon.textureSpacePolygon); + textureSpacePolygon = []; + for (var i = 0; i < poly.length; ++i) { + textureSpacePolygon.push(poly[i]) + } + } else { + textureSpacePolygon = clippedPolygon.textureSpacePolygon + } + var texelRatio = this.getTexelRatio(screenSpacePolygon, clippedPolygon.textureSpacePolygon); + var preciseLod = this.getLodFromTexelToPixelRatio(texelRatio.meanTexelToPixelRatio); + if (useLowerLod) { + preciseLod -= 1.0 + } + var renderedLod = this.getDiscreteLod(preciseLod); + var tileGridWidth = this.getLodWidthInTiles(renderedLod); + var tileGridHeight = this.getLodWidthInTiles(renderedLod); + if (tileGridWidth === 1 && tileGridHeight === 1) { + visibleTiles.push(new TileId(renderedLod, 0, 0)) + } else { + var modelTransform = getModelTransform(this.baseImageWidth, this.name); + var modelViewProjection = viewProjectionTransform.multiply(modelTransform); + var visibleTiles; + if (Config.outputMultiLODTiles) { + visibleTiles = this.intersectClippedPolyWithTileGrid_multiLOD2(modelViewProjection, viewportWidth, viewportHeight, textureSpacePolygon, screenSpacePolygon, tileGridWidth, tileGridHeight, this.tileWidth, this.tileHeight) + } else { + visibleTiles = this.intersectClippedPolyWithTileGrid(modelViewProjection, textureSpacePolygon, textureSpacePolygon.length, this.finestLod, renderedLod, tileGridWidth, tileGridHeight, this.tileWidth, this.tileHeight) + } + } + return { + visibleTiles: visibleTiles, + lod: renderedLod, + preciseLod: preciseLod, + finestRenderedLod: this.getLodFromTexelToPixelRatio(texelRatio.minTexelToPixelRatio), + textureSpacePolygon: clippedPolygon.textureSpacePolygon + } + }, + projectPolygonFromNDCToTexture: function projectPolygonFromNDCToTexture(imageSpaceEye, modelViewProjection, ndcPolygon, imageDim) { + var inverseModelViewProjection = modelViewProjection.inverse(); + var polygonProjectedOntoImage = []; + for (var i = 0; i < ndcPolygon.length; ++i) { + var vImageSpace = inverseModelViewProjection.transformVector4(ndcPolygon[i]); + var invImageSpaceW = 1.0 / vImageSpace.w; + vImageSpace.x *= invImageSpaceW; + vImageSpace.y *= invImageSpaceW; + vImageSpace.z *= invImageSpaceW; + vImageSpace.w = 1.0; + vImageSpace.y = imageDim - 1 - vImageSpace.y; + polygonProjectedOntoImage.push(vImageSpace) + } + return polygonProjectedOntoImage + }, + getClippedPolygon: function getClippedPolygon(getModelTransform, viewProjectionTransform) { + var clipDim = 1024; + var clipModelTransform = getModelTransform(clipDim, this.name); + var ndcPolygon = [], + i, + clippedNDCPolygon, + backProjectedPolygon, + inverseModelTransform = clipModelTransform.inverse(), + projectorPosition = inverseModelTransform.transformVector4(new Vector4(0, 0, 0, 1)), + modelViewProjection = viewProjectionTransform.multiply(clipModelTransform), + imageCorners = [new Vector4(0, 0, 0, 1), new Vector4(0, clipDim, 0, 1), new Vector4(clipDim, clipDim, 0, 1), new Vector4(clipDim, 0, 0, 1), ]; + for (i = 0; i < imageCorners.length; ++i) { + ndcPolygon.push(modelViewProjection.transformVector4(imageCorners[i])) + } + var clippedNDCPolygon = convexPolygonClipper.clip(new Vector4(-1, -1, -1), new Vector4(1, 1, 1), ndcPolygon); + var backProjectedPolygon = this.projectPolygonFromNDCToTexture(projectorPosition, modelViewProjection, clippedNDCPolygon, clipDim); + var ratio = this.baseImageHeight / clipDim; + for (var i = 0; i < backProjectedPolygon.length; ++i) { + backProjectedPolygon[i].x *= ratio; + backProjectedPolygon[i].y = this.baseImageHeight - 1 - (clipDim - 1 - backProjectedPolygon[i].y) * ratio + } + return { + ndcSpacePolygon: clippedNDCPolygon, + textureSpacePolygon: backProjectedPolygon + } + }, + orientedBoundingBoxRectIntersecion: function orientedBoundingBoxRectIntersecion(orientedBBox0, orientedBBox1, orientedBBoxWidth, axisAlignedBBox) { + if (orientedBBoxWidth <= 0) { + throw 'box must have positive width'; + } + var norm = orientedBBox1.subtract(orientedBBox0).normalize(); + norm = norm.multiplyScalar(orientedBBoxWidth * 0.5); + var perp = new Vector2(-norm.y, norm.x); + var boxCorners = [ + [orientedBBox0.add(perp).subtract(norm), orientedBBox1.add(perp).add(norm), orientedBBox1.subtract(perp).add(norm), orientedBBox0.subtract(perp).subtract(norm)], + [new Vector2(axisAlignedBBox.getLeft(), axisAlignedBBox.getTop()), new Vector2(axisAlignedBBox.getRight(), axisAlignedBBox.getTop()), new Vector2(axisAlignedBBox.getRight(), axisAlignedBBox.getBottom()), new Vector2(axisAlignedBBox.getLeft(), axisAlignedBBox.getBottom())] + ]; + var boxCorners0 = boxCorners[0]; + var boxCorners1 = boxCorners[1]; + for (var direction = 0; direction < 1; direction++) { + var axis1 = boxCorners0[1].subtract(boxCorners0[0]); + var axis2 = boxCorners0[3].subtract(boxCorners0[0]); + axis1 = axis1.multiplyScalar((1.0 / axis1.lengthSquared())); + axis2 = axis2.multiplyScalar((1.0 / axis2.lengthSquared())); + var origin1 = boxCorners0[0].dot(axis1); + var origin2 = boxCorners0[0].dot(axis2); + for (var a = 0; a < 2; a++) { + var axis = ((a == 0) ? axis1 : axis2); + var origin = ((a == 0) ? origin1 : origin2); + var tMin = Number.MAX_VALUE; + var tMax = Number.MIN_VALUE; + var t = boxCorners1[0].dot(axis); + if (t < tMin) + tMin = t; + if (t > tMax) + tMax = t; + t = boxCorners1[1].dot(axis); + if (t < tMin) + tMin = t; + if (t > tMax) + tMax = t; + t = boxCorners1[2].dot(axis); + if (t < tMin) + tMin = t; + if (t > tMax) + tMax = t; + t = boxCorners1[3].dot(axis); + if (t < tMin) + tMin = t; + if (t > tMax) + tMax = t; + if ((tMin - origin) > 1.0 || (tMax - origin) < 0.0) + return false + } + var tmp = boxCorners0; + boxCorners0 = boxCorners1; + boxCorners1 = tmp + } + return true + }, + linePointDistanceSquared: function linePointDistanceSquared(line0, line1, point) { + var distanceSquared = line0.subtract(line1).lengthSquared(); + var alpha = ((point.x - line0.x) * (line1.x - line0.x) + (point.y - line0.y) * (line1.y - line0.y)) / distanceSquared; + var inLineSegment = alpha >= 0.0 && alpha <= 1.0; + var pIntersection = line0.lerp(line1, alpha); + return { + distanceSquared: pIntersection.subtract(point).lengthSquared(), + inLineSegment: inLineSegment + } + }, + pointInPoly: function pointInPoly(points, x, y) { + var i, + j, + c = false; + for (i = 0, j = points.length - 1; i < points.length; j = i++) { + if ((((points[i].y <= y) && (y < points[j].y)) || ((points[j].y <= y) && (y < points[i].y))) && (x < (points[j].x - points[i].x) * (y - points[i].y) / (points[j].y - points[i].y) + points[i].x)) + c = !c + } + return c + }, + intersectClippedPolyWithTileGrid_multiLOD2: function intersectClippedPolyWithTileGrid_multiLOD2(modelViewProjection, viewportWidth, viewportHeight, texSpacePoly, scrSpacePoly) { + if (scrSpacePoly.length != texSpacePoly.length) { + scrSpacePoly = []; + for (var k = 0; k < texSpacePoly.length; k++) { + var vert = new Vector4(texSpacePoly[k].x, this.baseImageHeight - 1 - texSpacePoly[k].y, 0, 1); + scrVert = modelViewProjection.transformVector4(vert); + scrVert.x /= scrVert.w; + scrVert.y /= scrVert.w; + scrVert.x = (scrVert.x + 1) * 0.5 * viewportWidth; + scrVert.y = (scrVert.y + 1) * 0.5 * viewportHeight; + scrSpacePoly.push(scrVert) + } + } + var texelRatio = this.getTexelRatio(scrSpacePoly, texSpacePoly); + var preciseLod = this.getLodFromTexelToPixelRatio(texelRatio.meanTexelToPixelRatio); + var renderedLod = this.getDiscreteLod(preciseLod); + var tileGridWidth = this.getLodWidthInTiles(renderedLod); + var tileGridHeight = this.getLodWidthInTiles(renderedLod); + var tiles = this.intersectClippedPolyWithTileGrid(modelViewProjection, texSpacePoly, texSpacePoly.length, this.finestLod, renderedLod, tileGridWidth, tileGridHeight, this.tileWidth, this.tileHeight); + var maxTexToPixRatio = MathHelper.logBase(this.baseImageWidth / viewportWidth); + var changed = true; + var newTiles; + while (changed) { + changed = false; + var newTiles = []; + for (var i = 0; i < tiles.length; i++) { + var tileId = tiles[i]; + var texSpaceClippedQuad; + lodDiff = this.finestLod - tileId.levelOfDetail; + texX = (tileId.x << lodDiff) * this.tileWidth; + texY = (tileId.y << lodDiff) * this.tileHeight; + width = this.tileWidth << lodDiff; + height = this.tileWidth << lodDiff; + texSpaceClippedQuad = convexPolygonClipper.clip(new Vector4(texX, texY, 0), new Vector4(texX + width, texY + height, 0), texSpacePoly); + if (!texSpaceClippedQuad.length) { + continue + } + if (tileId.noSubdiv || tileId.levelOfDetail == this.finestLod) { + newTiles.push(tileId); + continue + } + var children = tileId.getChildren(); + var numNewLod = 0, + numClippedOut = 0; + for (var c = 0; c < children.length; c++) { + var childTileId = children[c]; + lodDiff = this.finestLod - childTileId.levelOfDetail; + texX = (childTileId.x << lodDiff) * this.tileWidth; + texY = (childTileId.y << lodDiff) * this.tileHeight; + width = this.tileWidth << lodDiff; + height = this.tileWidth << lodDiff; + var tolerance = 0.01; + texX += tolerance; + texY += tolerance; + width -= tolerance; + height -= tolerance; + var w2 = width / 2, + h2 = height / 2; + var fullyContained = true; + for (var m = 0; m <= 1 && fullyContained; m++) + for (var n = 0; n <= 1 && fullyContained; n++) { + if (!this.pointInPoly(texSpacePoly, texX + m * width, texY + n * height)) + fullyContained = false + } + texSpaceClippedQuad = []; + if (!fullyContained) { + texSpaceClippedQuad = convexPolygonClipper.clip(new Vector4(texX, texY, 0), new Vector4(texX + width, texY + height, 0), texSpacePoly) + } else { + texSpaceClippedQuad.push(new Vector4(texX, texY, 0, 1)); + texSpaceClippedQuad.push(new Vector4(texX + width, texY, 0, 1)); + texSpaceClippedQuad.push(new Vector4(texX + width, texY + height, 0, 1)); + texSpaceClippedQuad.push(new Vector4(texX, texY + height, 0, 1)) + } + if (texSpaceClippedQuad.length > 0) { + var scrSpaceClippedQuad = []; + for (var v = 0; v < texSpaceClippedQuad.length; v++) { + var vert = new Vector4(texSpaceClippedQuad[v].x, this.baseImageHeight - 1 - texSpaceClippedQuad[v].y, 0, 1); + scrVert = modelViewProjection.transformVector4(vert); + var tempW = 1.0 / scrVert.w; + scrVert.x *= tempW; + scrVert.y *= tempW; + scrVert.x = (scrVert.x + 1) * 0.5 * viewportWidth; + scrVert.y = (scrVert.y + 1) * 0.5 * viewportHeight; + scrSpaceClippedQuad.push(scrVert) + } + var texelRatio = this.getTexelRatio(scrSpaceClippedQuad, texSpaceClippedQuad); + var preciseLod = this.getLodFromTexelToPixelRatio(texelRatio.meanTexelToPixelRatio); + var renderedLod = this.getDiscreteLod(preciseLod); + var maxPixelLengths = 0; + for (var l = 0; l < texelRatio.pixelLengths.length; l++) { + if (texelRatio.pixelLengths[l] > maxPixelLengths) + maxPixelLengths = texelRatio.pixelLengths[l] + } + if (renderedLod > tileId.levelOfDetail || maxPixelLengths > this.tileWidth) { + newTiles.push(childTileId); + numNewLod++; + changed = true + } + } else + numClippedOut++ + } + if (numNewLod < children.length - numClippedOut) { + tileId.noSubdiv = true; + newTiles.push(tileId) + } + } + if (changed) + tiles = newTiles + } + return tiles + }, + intersectClippedPolyWithTileGrid: function intersectClippedPolyWithTileGrid(modelViewProjection, clippedVerticesSSTexCoords, nClippedVerticesSS, finestLod, lod, tileGridWidth, tileGridHeight, tileWidth, tileHeight) { + var xScale = (1.0 / ((1) << (finestLod - lod))) / tileWidth; + var yScale = (1.0 / ((1) << (finestLod - lod))) / tileHeight; + var tileIdCoords = new Array(nClippedVerticesSS); + for (var i = 0; i < nClippedVerticesSS; i++) { + tileIdCoords[i] = { + x: clippedVerticesSSTexCoords[i].x * xScale, + y: clippedVerticesSSTexCoords[i].y * yScale + } + } + var tileOffsets = PolygonTileFloodFiller.floodFill(tileGridWidth, tileGridHeight, tileIdCoords); + var tiles = []; + for (var i = 0; i < tileOffsets.length; i++) { + tiles.push(new TileId(lod, tileOffsets[i].x, tileOffsets[i].y)) + } + return tiles + } }; "use strict"; -function BallisticPath(pitch1, heading1, fov1, pitch2, heading2, fov2, maxAllowedFov) { -var middleFov=Math.abs(pitch1 - pitch2) + Math.abs(heading1 - heading2); -var minFov=Math.min(fov1, fov2); -var maxFov=Math.max(fov1, fov2); -var minDuration=0.5; -var pitchSpline, -headingSpline, -fovSpline; -if (middleFov > maxFov) { -middleFov = Math.min(middleFov, maxAllowedFov); -var fovDelta=(middleFov / maxFov) + (middleFov / minFov); -var duration=(minDuration + Math.log(fovDelta)) * 700; -pitchSpline = new SimpleSpline(0, duration, pitch1, pitch2, 0, 0); -headingSpline = new SimpleSpline(0, duration, heading1, heading2, 0, 0); -fovSpline = new CompositeSpline([0, duration / 2, duration], [fov1, middleFov, fov2], [0, 0, 0]) -} -else { -var fovDelta=maxFov / minFov; -var duration=(minDuration + Math.log(fovDelta)) * 700; -pitchSpline = new SimpleSpline(0, duration, pitch1, pitch2, 0, 0); -headingSpline = new SimpleSpline(0, duration, heading1, heading2, 0, 0); -fovSpline = new SimpleSpline(0, duration, fov1, fov2, 0, 0) -} -this.getDuration = function() { -return duration +var TiledImagePyramidCoverageMap = function(minimumLevelOfDetail, maximumLevelOfDetail) { + var self = this, + lod; + if (minimumLevelOfDetail < 0) { + throw 'minimumLevelOfDetail needs to be non negative'; + } + if (maximumLevelOfDetail < 0) { + throw 'maximimLevelOfDetail needs to be non negative'; + } + if (!(minimumLevelOfDetail <= maximumLevelOfDetail)) { + throw 'min should be less than or equal max lod'; + } + self.x0 = -1; + self.y0 = -1; + self.x1 = -1; + self.y1 = -1; + self.levelOfDetail = maximumLevelOfDetail; + self.minimumLevelOfDetail = minimumLevelOfDetail; + self.occluderFlags = []; + self.occludedFlags = []; + for (lod = 0; lod <= self.levelOfDetail; ++lod) { + self.occluderFlags.push({}); + self.occludedFlags.push({}) + } }; -this.getCurrentPitch = function(time) { -return pitchSpline.getValue(time) +TiledImagePyramidCoverageMap.prototype = { + initialize: function initialize(levelOfDetail, x0, y0, x1, y1) { + if (!(levelOfDetail >= 0)) { + throw 'Expected ' + '(levelOfDetail >= 0)'; + } + if (!(levelOfDetail <= this.occluderFlags.length - 1)) { + throw 'Expected ' + '(levelOfDetail <= occluderFlags.length - 1)'; + } + if (!(x0 < x1)) { + throw 'Expected ' + '(x0 < x1)'; + } + if (!(y0 < y1)) { + throw 'Expected ' + '(y0 < y1)'; + } + this.levelOfDetail = levelOfDetail; + this.x0 = x0; + this.y0 = y0; + this.x1 = x1; + this.y1 = y1 + }, + markAsOccluder: function markAsOccluder(tileId, occluder) { + this.setOccluderFlag(tileId.toString(), occluder) + }, + calculateOcclusions: function calculateOcclusions() { + var lod, + x, + y, + bounds, + occluded, + tileId; + for (lod = this.levelOfDetail; lod >= this.minimumLevelOfDetail; lod--) { + if (lod != this.levelOfDetail) { + bounds = this.getTileBoundsAtLod(lod); + for (y = bounds.lodY0; y < bounds.lodY1; y++) { + for (x = bounds.lodX0; x < bounds.lodX1; x++) { + tileId = new TileId(lod, x, y); + if (this.getOccluderFlag(tileId) !== undefined) { + occluded = this.isChildIrrelevantOrOccluder(tileId, 0) && this.isChildIrrelevantOrOccluder(tileId, 1) && this.isChildIrrelevantOrOccluder(tileId, 2) && this.isChildIrrelevantOrOccluder(tileId, 3); + if (occluded) { + this.setOccludedFlag(tileId, true); + this.setOccluderFlag(tileId, true) + } else { + this.setOccludedFlag(tileId, false); + this.setOccluderFlag(tileId, false) + } + } + } + } + } + } + }, + isChildIrrelevantOrOccluder: function isChildIrrelevantOrOccluder(tileId, childIdx) { + if (!((childIdx >= 0 && childIdx < 4))) { + throw 'Expected ' + '(childIdx >= 0 && childIdx < 4)'; + } + var childTileId = new TileId(tileId.levelOfDetail + 1, (tileId.x << 1) + childIdx % 2, (tileId.y << 1) + childIdx / 2); + var bounds = this.getTileBoundsAtLod(childTileId.levelOfDetail); + if (childTileId.x >= bounds.lodX0 && childTileId.x < bounds.lodX1 && childTileId.y >= bounds.lodY0 && childTileId.y < bounds.lodY1) { + var occluderFlag = this.getOccluderFlag(childTileId); + return (occluderFlag === undefined) || occluderFlag + } else { + return true + } + }, + getOccluderFlag: function getOccluderFlag(tileId) { + return this.occluderFlags[tileId.levelOfDetail][tileId] + }, + setOccluderFlag: function setOccluderFlag(tileId, occluderFlag) { + this.occluderFlags[tileId.levelOfDetail][tileId] = occluderFlag + }, + getOccludedFlag: function getOccludedFlag(tileId) { + return this.occludedFlags[tileId.levelOfDetail][tileId] + }, + setOccludedFlag: function setOccludedFlag(tileId, occludedFlag) { + this.occludedFlags[tileId.levelOfDetail][tileId] = occludedFlag + }, + getTileBoundsAtLod: function getTileBoundsAtLod(lod) { + var lodDiff = this.levelOfDetail - lod; + return { + lodX0: this.x0 >> lodDiff, + lodY0: this.y0 >> lodDiff, + lodX1: MathHelper.divPow2RoundUp(this.x1, lodDiff), + lodY1: MathHelper.divPow2RoundUp(this.y1, lodDiff) + } + }, + getDescendents: function getDescendents(tileId, filter) { + var lod, + x, + y, + bounds, + occluded, + tileId, + result = []; + for (lod = tileId.levelOfDetail + 1; lod <= this.levelOfDetail; lod++) { + bounds = this.getTileBoundsAtLod(lod); + for (tileid in this.occluderFlags[lod]) { + if (bounds.lodX0 <= tileid.x && tileid.x <= bounds.lodX1 && bounds.lodY0 <= tileid.y && tileid.y <= bounds.lodY1) + result.push(tileId.toString()) + } + } + return result + } }; -this.getCurrentHeading = function(time) { -return headingSpline.getValue(time) +"use strict"; +var TiledImagePyramidCuller = function() {}; +var tileDebugPrint = false; +var prevVisibleTiles = {}; +TiledImagePyramidCuller.prototype = { + cull: function cull(tilePyramid, tileCoverage, getModelTransform, viewProjection, viewportWidth, viewportHeight, clip, visibleSet, prefix, tileSource, isTileAvailable, frameCount, useLowerLod) { + var delta = { + added: [], + updated: [], + removed: [] + }; + var tileResult = tilePyramid.getVisibleTiles(getModelTransform, viewProjection, viewportWidth, viewportHeight, clip, useLowerLod); + if (tileDebugPrint) { + if (prevVisibleTiles && prevVisibleTiles[prefix]) { + for (var i = 0; i < prevVisibleTiles[prefix].length; i++) { + var j; + for (j = 0; j < tileResult.visibleTiles.length; j++) + if (tileResult.visibleTiles[j].toString() == prevVisibleTiles[prefix][i].toString()) + break; + if (j == tileResult.visibleTiles.length) + Utils.log("frame=" + frameCount + " getVisibleTiles remove " + prefix + ":" + prevVisibleTiles[prefix][i]) + } + for (var i = 0; i < tileResult.visibleTiles.length; i++) { + var j; + for (j = 0; j < prevVisibleTiles[prefix].length; j++) + if (tileResult.visibleTiles[i].toString() == prevVisibleTiles[prefix][j].toString()) + break; + if (j == prevVisibleTiles[prefix].length) + Utils.log("frame=" + frameCount + " getVisibleTiles added " + prefix + ":" + tileResult.visibleTiles[i]) + } + } + prevVisibleTiles[prefix] = tileResult.visibleTiles.slice() + } + if (tileResult.visibleTiles.length === 0) { + for (var i = 0; i < visibleSet.length; ++i) { + var tile = visibleSet[i]; + if (tile.lastTouched !== frameCount && tile.tilePyramid === tilePyramid) { + delta.removed.push({ id: visibleSet[i].id }) + } + } + return delta + } + var viewportTransform = GraphicsHelper.createViewportToScreen(viewportWidth, viewportHeight); + var modelTransform = getModelTransform(tilePyramid.baseImageWidth, tilePyramid.name); + var modelToScreen = viewportTransform.multiply(viewProjection.multiply(modelTransform)); + var visibleTiles = []; + visibleTiles.byId = {}; + for (var i = 0; i < tileResult.visibleTiles.length; ++i) { + var tileId = tileResult.visibleTiles[i]; + tileId.isTemp = false; + tileId.isLowerLod = useLowerLod; + tileId.cached = isTileAvailable(tileId.x, tileId.y, tileId.levelOfDetail); + var priority = 0; + visibleTiles.push(tileId); + visibleTiles[visibleTiles.length - 1].priority = priority; + visibleTiles.byId[tileId.toString()] = true; + if (!visibleSet.byId[prefix + tileId.toString()]) { + var ancestorId = tileId; + var maxDepth = 1, + depth = 1; + while (ancestorId.levelOfDetail > tilePyramid.minimumLod && depth++ <= maxDepth) { + ancestorId = ancestorId.getParent(); + if (!visibleTiles.byId[ancestorId.toString()]) { + ancestorId.isTemp = true; + visibleTiles.push(ancestorId); + visibleTiles.byId[ancestorId.toString()] = true; + visibleTiles[visibleTiles.length - 1].priority = priority; + ancestorId.cached = isTileAvailable(ancestorId.x, ancestorId.y, ancestorId.levelOfDetail) + } + } + } + } + visibleTiles.byId = null; + for (var i = 0; i < visibleTiles.length; ++i) { + var tileId = visibleTiles[i]; + var id = prefix + tileId.toString(); + if (!visibleSet.byId[id]) { + var tileDimension = tilePyramid.getTileDimensions(tileId); + var tileTransform = tilePyramid.getTileTransform(tileId); + var tileTransformModelSpace = modelTransform.multiply(tileTransform); + var tileUrl = tileSource(tileId.x, tileId.y, tileId.levelOfDetail); + delta.added.push({ + type: 'tile', + id: id, + tileWidth: tileDimension.x, + tileHeight: tileDimension.y, + tileId: tileId, + transform: tileTransformModelSpace, + tilePyramid: tilePyramid, + lastTouched: tileId.isTemp ? -1 : frameCount, + face: prefix, + priority: priority, + url: tileUrl + }) + } else { + visibleSet.byId[id].lastTouched = tileId.isTemp ? -1 : frameCount; + visibleSet.byId[id].priority = Math.max(tileId.priority, visibleSet.byId[id].priority); + delta.updated.push(id) + } + } + var old_and_new = (delta.added || []).concat(visibleSet || []); + var boundAtLod = []; + var maxLOD = Number.MIN_VALUE; + var minLOD = Number.MAX_VALUE; + for (var i = 0; i < old_and_new.length; ++i) { + if (old_and_new[i].tilePyramid === tilePyramid) { + var tileId = old_and_new[i].tileId; + var lod = tileId.levelOfDetail; + if (!boundAtLod[lod]) { + boundAtLod[lod] = {}; + boundAtLod[lod].x0 = Number.MAX_VALUE; + boundAtLod[lod].y0 = Number.MAX_VALUE; + boundAtLod[lod].x1 = Number.MIN_VALUE; + boundAtLod[lod].y1 = Number.MIN_VALUE + } + var b = boundAtLod[lod]; + b.x0 = Math.min(b.x0, tileId.x); + b.y0 = Math.min(b.y0, tileId.y); + b.x1 = Math.max(b.x1, tileId.x + 1); + b.y1 = Math.max(b.y1, tileId.y + 1); + maxLOD = Math.max(maxLOD, tileId.levelOfDetail); + minLOD = Math.min(minLOD, tileId.levelOfDetail); + if (Math.abs(b.x0 - b.x1) > 100) + debugger + } + } + var x0 = Number.MAX_VALUE; + var y0 = Number.MAX_VALUE; + var x1 = Number.MIN_VALUE; + var y1 = Number.MIN_VALUE; + for (var l = minLOD; l <= maxLOD; l++) { + if (boundAtLod[l]) { + var b = boundAtLod[l]; + var diff = maxLOD - l; + x0 = Math.min(b.x0 << diff, x0); + y0 = Math.min(b.y0 << diff, y0); + x1 = Math.max(b.x1 << diff, x1); + y1 = Math.max(b.y1 << diff, y1) + } + } + tileCoverage.initialize(maxLOD, x0, y0, x1, y1); + for (var i = 0; i < old_and_new.length; ++i) { + var tile = old_and_new[i]; + if (tile.tilePyramid === tilePyramid && tile.lastTouched === frameCount) { + if (!tile.fullyOpaque && !tile.tileId.isTemp) { + var descendents = tileCoverage.getDescendents(tile.tileId, function(tileIdStr) { + return visibleSet.byId[prefix + tileIdStr] == undefined ? false : true + }); + for (var k = 0; k < descendents.length; k++) { + visibleSet.byId[prefix + descendents[k]].keep = true + } + var ancestorId = tile.tileId; + while (ancestorId.levelOfDetail > tilePyramid.minimumLod) { + ancestorId = ancestorId.getParent(); + if (visibleSet.byId[prefix + ancestorId] != undefined) { + visibleSet.byId[prefix + ancestorId].keep = true + } + } + } + } + } + for (var idStr in visibleSet.byId) { + var tile = visibleSet.byId[idStr]; + if (!tile.keep && tile.lastTouched !== frameCount && tile.tilePyramid === tilePyramid) { + var justAdded = false; + for (var j = 0; j < delta.added.length; ++j) { + if (delta.added[j] === idStr) { + delete delta.added[j]; + justAdded = true; + break + } + } + if (!justAdded) { + delta.removed.push({ id: idStr }); + for (var u = 0; u < delta.updated.length; u++) { + if (idStr == delta.updated[i]) + debugger + } + } + } + if (tile.keep) { + tile.keep = false + } + } + return delta + } }; -this.getCurrentFov = function(time) { -return fovSpline.getValue(time) -} -} "use strict"; -function RotationalFixedPositionCameraController(camera, upperPitchLimit, lowerPitchLimit, upperHeadingLimit, lowerHeadingLimit, dimension) { -this._camera = camera; -this._upperPitchLimit = (upperPitchLimit == null) ? MathHelper.degreesToRadians(90) : upperPitchLimit; -this._lowerPitchLimit = (lowerPitchLimit == null) ? MathHelper.degreesToRadians(-90) : lowerPitchLimit; -this._upperHeadingLimit = (upperHeadingLimit == null) ? MathHelper.degreesToRadians(360) : MathHelper.normalizeRadian(upperHeadingLimit); -this._lowerHeadingLimit = (lowerHeadingLimit == null) ? MathHelper.degreesToRadians(0) : MathHelper.normalizeRadian(lowerHeadingLimit); -this._pitchSpring = new ClassicSpring(0.01, 0.6, false); -this._headingSpring = new ClassicSpring(0.01, 0.6, false); -this._fieldOfViewSpring = new ClassicSpring(0.0033, 0.6, false); -this._sourcePitch = 0; -this._sourceHeading = 0; -this._targetPitch = 0; -this._targetHeading = 0; -this.panoramaWorldTransform = Matrix4x4.createIdentity(); -this.panoramaLocalTransform = Matrix4x4.createIdentity(); -this.deviceRotation = Matrix4x4.createIdentity(); -this.initInverseDeviceRotation = Matrix4x4.createIdentity(); -this._targetUp = new Vector3(0, 1, 0); -var pitchAndHeading=this.getPitchAndHeading(); -this._pitchSpring.setCurrentAndTarget(pitchAndHeading[0]); -this._headingSpring.setCurrentAndTarget(pitchAndHeading[1]); -this._fieldOfViewSpring.setCurrentAndTarget(this._camera.getVerticalFov()); -this._maxPixelScaleFactor = 2; -this._dimension = dimension; -this._minFieldOfView = MathHelper.degreesToRadians(20); -this._maxFieldOfView = MathHelper.degreesToRadians(80); -this.setViewportSize(this._camera.getViewport().getWidth(), this._camera.getViewport().getHeight()); -this._startingPitchandHeading = null; -this._startingPosition = null; -this._isRotating = false; -this._lastMovePoint = null; -this._lastGestureScale = null + +function JsonDownloadFailedError(message, innerException) { + this.message = message; + this.innerException = innerException } -RotationalFixedPositionCameraController.calculatePitchAndHeading = function(currentLook, worldToLocalTransform) { -var transformedLook=worldToLocalTransform.transformVector3(currentLook); -var pitch=this._pitchSpring.getCurrent(); -var heading=MathHelper.normalizeRadian(this._headingSpring.getCurrent()); -return [pitch, heading] + +function JsonMalformedError(message, innerException) { + this.message = message; + this.innerException = innerException +} +var PhotosynthTileSource = function(baseUrl, atlasImage) { + this.getTileUrl = function(x, y, lod) { + if (lod === 7 && x === 0 && y === 0) { + return atlasImage + } + return baseUrl + lod + '/' + x + '_' + y + '.jpg' + } +}; +var PartnerPanoramaTileSource = function(tileImageUriFormatString, width, height, tileSize, finestLod, numberOfLods, atlasImage) { + var defaultFinestLod = Math.ceil(Math.log(Math.max(width, height)) / Math.LN2); + var lodDelta = defaultFinestLod - finestLod; + var singleTileLod = Math.ceil(Math.log(tileSize) / Math.LN2); + var minLod = finestLod - numberOfLods; + var tempFinestLodFactor = 1.0 / Math.pow(2, defaultFinestLod); + var horizontalTileCountMultiplier = width * tempFinestLodFactor; + var verticalTileCountMultiplier = height * tempFinestLodFactor; + this.getTileUrl = function(x, y, lod) { + var normalizedLod = lod - lodDelta; + if (normalizedLod == minLod && atlasImage && x == 0 && y == 0) { + return atlasImage + } + if (normalizedLod > finestLod || normalizedLod <= minLod) { + return null + } + var numHorizontalTilesAtLod = Math.ceil(Math.pow(2, lod - singleTileLod) * horizontalTileCountMultiplier); + var numVerticalTilesAtLod = Math.ceil(Math.pow(2, lod - singleTileLod) * verticalTileCountMultiplier); + return PhotosynthRml.partialDotNetStringFormat(tileImageUriFormatString, normalizedLod, x, y) + } +}; +var PhotosynthRml = { + faceNames: ['front', 'right', 'back', 'left', 'top', 'bottom'], + jsonWrapper: 'http://photosynthjsonpwrapper.cloudapp.net/Wrap.aspx?jsonUrl={0}', + jsonWrapperCid: 'http://photosynthjsonpwrapper.cloudapp.net/Wrap.aspx?cid={0}', + jsonpWrapperParam: '&jsCallback={0}', + addScriptElement: function addScriptElement(url) { + var scriptElement = document.createElement('script'); + scriptElement.type = 'text/javascript'; + scriptElement.language = 'javascript'; + scriptElement.src = url; + document.getElementsByTagName('head')[0].appendChild(scriptElement) + }, + createFromCid: function createFromCid(cid, callback) { + throw "createFromCid() has been deprecated"; + }, + createFromJsonUri: function createFromJsonUri(jsonUri, callback, cacheId) { + if (window.WinJS) { + PhotosynthRml.createFromFullUrl(jsonUri, callback, null, cacheId) + } else { + PhotosynthRml.createFromFullUrl(PhotosynthRml.jsonWrapper.replace('{0}', encodeURIComponent(jsonUri)), callback, jsonUri, cacheId) + } + }, + createFromSameDomainJsonUri: function createFromSameDomainJsonUri(jsonUri, callback) { + var request = new XMLHttpRequest; + request.open("GET", jsonUri, true); + request.onreadystatechange = function() { + if (request.readyState == 4) { + if (request.status == 200) { + PhotosynthRml.createFromJsonString(request.responseText, callback, jsonUri) + } else { + callback(null, new JsonDownloadFailedError("Response status is not 200")) + } + } + }; + request.send() + }, + createFromJsonString: function createFromJsonString(jsonString, callback, jsonUri) { + var json = null; + try { + json = JSON.parse(jsonString) + } catch (ex) { + callback(null, new JsonMalformedError("The data returned for the pano is not valid json", ex)); + return + } + var rml = PhotosynthRml.createFromJson(json, jsonUri); + if (rml == null) { + callback(null, new JsonMalformedError("The data returned for the pano is valid json but is not valid panorama data")) + } else { + callback(rml) + } + }, + createFromFullUrl: function createFromFullUrl(url, callback, originalJsonUri, cacheId) { + if (window.WinJS) { + var createFromFullUrlWinApp = function(url, callback, originalJsonUri) { + WinJS.xhr({ url: url }).then(function(response) { + if (response.status === 200) { + PhotosynthRml.createFromJsonString(response.responseText, callback, originalJsonUri || url) + } else { + callback(null, new JsonDownloadFailedError("Response status is not 200")) + } + }, function(error) { + callback(null, new JsonDownloadFailedError("The url specified for the pano json data did not return a 200 success", error)) + }) + }; + if (!(cacheId && PlatformJS && PlatformJS.Utilities)) { + createFromFullUrlWinApp(url, callback, originalJsonUri) + } else { + PlatformJS.Utilities.downloadFile(cacheId, url).then(function(response) { + createFromFullUrlWinApp(response, callback, url) + }, function(error) { + callback(null, new JsonDownloadFailedError("The url specified for the pano json data did not return a 200 success", error)) + }) + } + } else { + var globalCallbackName = 'PhotosynthCallback'; + var i = 0; + while (window[globalCallbackName + i] != null) { + i++ + } + globalCallbackName = globalCallbackName + i; + window[globalCallbackName] = function(json) { + callback(PhotosynthRml.createFromJson(json, originalJsonUri || url)); + delete window[globalCallbackName] + }; + PhotosynthRml.addScriptElement(url + PhotosynthRml.jsonpWrapperParam.replace('{0}', globalCallbackName)) + } + }, + createFromJson: function createFromJson(json, jsonUri) { + var rml; + try { + if (json._json_synth && json._json_synth >= 1.01) { + var root, + propertyName; + for (propertyName in json.l) { + if (json.l.hasOwnProperty(propertyName)) { + root = json.l[propertyName]; + break + } + } + var coordSystem = root.x[0]; + var cubemap = coordSystem.cubemaps[0]; + var bounds = cubemap.field_of_view_bounds; + var projector = coordSystem.r[0]; + var rotationNode = projector.j; + var startRotationNode = projector.start_relative_rotation; + var startingPitch = 0; + var startingHeading = 0; + var author = root.b; + var attributionUrl = root.attribution_url; + var licenseUrl = root.c; + if (startRotationNode != null) { + var lookVector = new Vector3(0, 0, 1); + var rotation = PhotosynthRml.parseQuaternion(rotationNode[4], rotationNode[5], rotationNode[6]); + var startRelativeRotation = PhotosynthRml.parseQuaternion(startRotationNode[0], startRotationNode[1], startRotationNode[2]); + var combinedRotations = rotation.multiply(startRelativeRotation); + var startVector = combinedRotations.transform(lookVector); + startingPitch = MathHelper.halfPI - Math.acos(startVector.y); + startingHeading = Math.atan2(startVector.z, startVector.x) + } + var highlights = null; + if (root.highlight_map && root.highlight_map.default_highlight) { + highlights = root.highlight_map.default_highlight + } + var atlasImage = null; + if (cubemap.u && jsonUri) { + var baseUrl = jsonUri.substring(0, jsonUri.length - 6); + atlasImage = baseUrl + cubemap.u + } + rml = { + id: 'panorama' + propertyName, + type: 'panorama', + source: { + attribution: { + author: author, + attributionUrl: attributionUrl, + licenseUrl: licenseUrl + }, + dimension: 0, + tileSize: 254, + tileOverlap: 1, + tileBorder: 1, + minimumLod: (atlasImage != null) ? 7 : 8, + bounds: { + left: MathHelper.degreesToRadians(bounds[0]), + right: MathHelper.degreesToRadians(bounds[1]), + top: MathHelper.degreesToRadians(bounds[2]), + bottom: MathHelper.degreesToRadians(bounds[3]) + }, + startingPitch: startingPitch, + startingHeading: startingHeading, + projectorAspectRatio: 1, + projectorFocalLength: 0.5, + highlights: highlights, + atlasImage: atlasImage + } + }; + for (var i = 0; i < PhotosynthRml.faceNames.length; i++) { + var faceName = PhotosynthRml.faceNames[i]; + var face = cubemap[faceName]; + if (face != null) { + rml.source[faceName + 'Face'] = { + tileSource: (new PhotosynthTileSource(face.u, atlasImage)).getTileUrl, + clip: face.clip.vertices + }; + rml.source.dimension = Math.max(rml.source.dimension, face.d[0], face.d[1]) + } + } + } else if (json.json_pano) { + var tileOverlap = (json.tile_overlap_borders === false) ? 0 : 1; + var author = json.author; + var attributionUrl = PhotosynthRml.partialDotNetStringFormat(json.attribution_uri_format_string, 0, 0); + var licenseUrl = null; + var publisher = json.publisher; + rml = { + id: 'panorama' + propertyName, + type: 'panorama', + source: { + attribution: { + author: author, + attributionUrl: attributionUrl, + licenseUrl: licenseUrl, + publisher: publisher + }, + dimension: 0, + tileSize: json.tile_size, + tileOverlap: tileOverlap, + tileBorder: tileOverlap, + minimumLod: Math.ceil(Math.log(json.tile_size / Math.LN2)), + bounds: { + left: 0, + right: MathHelper.twoPI, + top: -MathHelper.halfPI, + bottom: MathHelper.halfPI + }, + startingPitch: 0, + startingHeading: 0, + projectorAspectRatio: 1, + projectorFocalLength: 0.5, + atlasImage: json.atlas_image + } + }; + if (json.field_of_view_bounds) { + rml.source.bounds = { + left: MathHelper.degreesToRadians(json.field_of_view_bounds[0]), + right: MathHelper.degreesToRadians(json.field_of_view_bounds[1]), + top: MathHelper.degreesToRadians(json.field_of_view_bounds[2]), + bottom: MathHelper.degreesToRadians(json.field_of_view_bounds[3]) + } + } + if (json.initial_look_direction) { + rml.source.startingPitch = MathHelper.degreesToRadians(json.initial_look_direction[0]); + rml.source.startingHeading = MathHelper.degreesToRadians(json.initial_look_direction[1]) + } + for (var i = 0; i < PhotosynthRml.faceNames.length; i++) { + var faceName = PhotosynthRml.faceNames[i]; + var face = json[faceName]; + if (face != null) { + var clip; + if (face.clip && face.clip.vertices) { + clip = face.clip.vertices + } else { + clip = [0, 0, 0, face.dimensions[1], face.dimensions[0], face.dimensions[1], face.dimensions[0], 0] + } + rml.source[faceName + 'Face'] = { + tileSource: (new PartnerPanoramaTileSource(face.tile_image_uri_format_string, face.dimensions[0], face.dimensions[1], json.tile_size, face.finest_lod, face.number_of_lods, rml.source.atlasImage)).getTileUrl, + clip: clip + }; + rml.source.dimension = Math.max(rml.source.dimension, face.dimensions[0], face.dimensions[1]); + if (face.finest_lod != null && face.number_of_lods != null) { + var defaultFinestLod = Math.ceil(Math.log(rml.source.dimension) / Math.LN2); + rml.source.minimumLod = defaultFinestLod - face.number_of_lods + 1 + } + } + } + if (rml.source.atlasImage != null) { + rml.source.minimumLod-- + } + } else { + return null + } + } catch (e) { + if (window.console) { + Utils.log(e) + } + return null + } + return rml + }, + parseQuaternion: function parseQuaternion(qx, qy, qz) { + var wSquared = 1.0 - (qx * qx + qy * qy + qz * qz); + if (wSquared < MathHelper.zeroTolerance) { + wSquared = 0.0 + } + return new Quaternion(Math.sqrt(wSquared), qx, qy, qz) + }, + partialDotNetStringFormat: function partialDotNetStringFormat(formatString) { + if (arguments.length === 0) { + return "" + } + if (arguments.length === 1) { + return formatString + } + var result = ""; + var i = 0; + while (i < formatString.length) { + var leftBrace = formatString.indexOf('{'); + if (leftBrace === -1) { + return result + formatString + } + result += formatString.substr(0, leftBrace); + formatString = formatString.substr(leftBrace); + var rightBrace = formatString.indexOf('}'); + if (rightBrace < 2) {} + var numberFormat = formatString.substr(1, rightBrace - 1); + formatString = formatString.substr(rightBrace + 1); + var numberFormatParts = numberFormat.split(':'); + var arg = arguments[parseInt(numberFormatParts[0]) + 1]; + if (numberFormatParts.length === 1) { + result += arg.toString() + } else if (numberFormatParts[1] === 'X') { + result += arg.toString(16).toUpperCase() + } else { + var out = arg.toString(); + while (out.length < numberFormatParts[1].length) { + out = '0' + out + } + result += out + } + } + return result + } }; -RotationalFixedPositionCameraController.prototype = { -hasCompleted: function hasCompleted() { -return this._pitchSpring.isSettled() && this._headingSpring.isSettled() && this._fieldOfViewSpring.isSettled() && this._ballisticPath == null -}, calculatePitchAndHeadingDelta: function calculatePitchAndHeadingDelta(dx, dy, viewportWidth, viewportHeight, focalLength) { -var pitch, -heading; -var aspectRatio=viewportWidth / viewportHeight; -if (dx === 0) { -heading = 0 -} -else { -heading = 2 * Math.atan((aspectRatio * (dx / viewportWidth)) / focalLength) -} -if (dy === 0) { -pitch = 0 -} -else { -pitch = 2 * Math.atan((-dy / viewportHeight) / focalLength) -} -return [pitch, heading] -}, animateToPose: function animateToPose(pitch, heading, fov, callback) { -if (this._ballisticPathCallback) { -this._ballisticPathCallback(false) -} -var sourceHeading=MathHelper.pickStartHeadingToTakeShortestPath(this._headingSpring.getCurrent(), heading); -this._ballisticPath = new BallisticPath(this._pitchSpring.getCurrent(), sourceHeading, this._fieldOfViewSpring.getCurrent(), pitch, heading, fov, this._maxFieldOfView); -this._ballisticStartTime = (new Date).getTime(); -this._ballisticDuration = this._ballisticPath.getDuration(); -this._ballisticEasingSpline = new SimpleSpline(0, this._ballisticDuration, 0, this._ballisticDuration, 0.5, 0); -this._ballisticPathCallback = callback -}, _cancelBallisticPath: function _cancelBallisticPath(reachedDestination) { -if (this._ballisticPathCallback) { -this._ballisticPathCallback(reachedDestination) -} -this._ballisticPath = null; -this._ballisticStartTime = null; -this._ballisticDuration = null; -this._ballisticEasingSpline = null; -this._ballisticPathCallback = null -}, _constrainHeading: function _constrainHeading(heading) { -var constrainedHeading=MathHelper.normalizeRadian(heading); -if (MathHelper.isZero(this._upperHeadingLimit - this._lowerHeadingLimit)) { -return constrainedHeading -} -var distToLower, -distToUpper; -if (this._lowerHeadingLimit > this._upperHeadingLimit) { -if (constrainedHeading >= this._lowerHeadingLimit || constrainedHeading <= this._upperHeadingLimit) { -return constrainedHeading -} -else { -distToLower = this._lowerHeadingLimit - constrainedHeading; -distToUpper = constrainedHeading - this._upperHeadingLimit -} -} -else { -if (constrainedHeading >= this._lowerHeadingLimit && constrainedHeading <= this._upperHeadingLimit) { -return constrainedHeading -} -else if (constrainedHeading < this._lowerHeadingLimit) { -distToLower = this._lowerHeadingLimit - constrainedHeading; -distToUpper = constrainedHeading + MathHelper.twoPI - this._upperHeadingLimit -} -else { -distToLower = this._lowerHeadingLimit - (constrainedHeading + MathHelper.twoPI); -distToUpper = constrainedHeading - this._upperHeadingLimit -} -} -return (distToLower < distToUpper) ? this._lowerHeadingLimit : this._upperHeadingLimit -}, setPitchAndHeading: function setPitchAndHeading(pitch, heading, animate) { -this._cancelBallisticPath(false); -var constrainedPitch=pitch; -if (constrainedPitch > this._upperPitchLimit) { -constrainedPitch = this._upperPitchLimit - 0.0001 -} -if (constrainedPitch < this._lowerPitchLimit) { -constrainedPitch = this._lowerPitchLimit + 0.0001 -} -var constrainedHeading=this._constrainHeading(heading); -if (animate) { -this._pitchSpring.setTarget(constrainedPitch); -var currentHeading=this._headingSpring.getCurrent(); -currentHeading = MathHelper.pickStartHeadingToTakeShortestPath(currentHeading, constrainedHeading); -this._headingSpring.setCurrent(currentHeading); -this._headingSpring.setTarget(constrainedHeading) -} -else { -this._pitchSpring.setCurrentAndTarget(constrainedPitch); -this._headingSpring.setCurrentAndTarget(constrainedHeading); -this.updateCameraProperties() -} -}, getPitchAndHeading: function getPitchAndHeading() { -var pitchAndHeading=[this._pitchSpring.getCurrent(), this._headingSpring.getCurrent()]; -return pitchAndHeading -}, getTargetPitchAndHeading: function getTargetPitchAndHeading() { -return [this._pitchSpring.getTarget(), this._headingSpring.getTarget()] -}, getVerticalFovLimits: function getVerticalFovLimits() { -return { -minimum: this._minFieldOfView, maximum: this._maxFieldOfView -} -}, setVerticalFov: function setVerticalFov(fov, animate) { -this._cancelBallisticPath(false); -var clampedFov=MathHelper.clamp(fov, this._minFieldOfView, this._maxFieldOfView); -if (animate) { -this._fieldOfViewSpring.setTarget(clampedFov) -} -else { -this._fieldOfViewSpring.setCurrentAndTarget(clampedFov) -} -this.updateCameraProperties() -}, getVerticalFov: function getVerticalFov() { -return this._fieldOfViewSpring.getCurrent() -}, getRelativeTarget: function getRelativeTarget(startingPitch, startingHeading, dx, dy, viewportWidth, viewportHeight, deltaMultiplier) { -dx *= deltaMultiplier; -dy *= deltaMultiplier; -var focalLength=this._camera.getFocalLength(); -var relativePitch; -var relativeHeading; -var pitchAndHeading=this.calculatePitchAndHeadingDelta(dx, dy, viewportWidth, viewportHeight, focalLength); -relativePitch = pitchAndHeading[0]; -relativeHeading = pitchAndHeading[1]; -var targetHeading=MathHelper.normalizeRadian(startingHeading - relativeHeading); -var targetPitch=startingPitch - relativePitch; -var worldToLocalTransform=this.deviceRotation.inverse().multiply(this.panoramaLocalTransform.multiply(this.panoramaWorldTransform.inverse())); -var sourcePitchAndHeading=[this._pitchSpring.getCurrent(), this._headingSpring.getCurrent()]; -var sourceHeading=sourcePitchAndHeading[1]; -sourceHeading = MathHelper.pickStartHeadingToTakeShortestPath(sourceHeading, targetHeading); -return { -fromPitch: sourcePitchAndHeading[0], fromHeading: sourceHeading, toPitch: targetPitch, toHeading: targetHeading -} -}, setRelativeTarget: function setRelativeTarget(startingPitch, startingHeading, dx, dy, viewportWidth, viewportHeight, deltaMultiplier) { -dx *= deltaMultiplier; -dy *= deltaMultiplier; -var focalLength=this._camera.getFocalLength(); -var relativePitch; -var relativeHeading; -var pitchAndHeading=this.calculatePitchAndHeadingDelta(dx, dy, viewportWidth, viewportHeight, focalLength); -relativePitch = pitchAndHeading[0]; -relativeHeading = pitchAndHeading[1]; -this._targetHeading = this._constrainHeading(startingHeading - relativeHeading); -this._targetPitch = startingPitch - relativePitch; -if (this._targetPitch > this._upperPitchLimit) { -this._targetPitch = this._upperPitchLimit - 0.0001 -} -if (this._targetPitch < this._lowerPitchLimit) { -this._targetPitch = this._lowerPitchLimit + 0.0001 -} -var worldToLocalTransform=this.deviceRotation.inverse().multiply(this.panoramaLocalTransform.multiply(this.panoramaWorldTransform.inverse())); -var sourcePitchAndHeading=[this._pitchSpring.getCurrent(), this._headingSpring.getCurrent()]; -this._sourcePitch = sourcePitchAndHeading[0]; -this._sourceHeading = sourcePitchAndHeading[1]; -this._sourceHeading = MathHelper.pickStartHeadingToTakeShortestPath(this._sourceHeading, this._targetHeading); -this._pitchSpring.setCurrent(this._sourcePitch); -this._pitchSpring.setTarget(this._targetPitch); -this._headingSpring.setCurrent(this._sourceHeading); -this._headingSpring.setTarget(this._targetHeading) -}, calculateLookFromPitchAndHeading: function calculateLookFromPitchAndHeading(pitch, heading, worldLook, worldUp, worldSide, applyHeadingBeforePitch) { -var pitchRotation=Quaternion.fromAxisAngle(worldSide, pitch); -var headingRotation=Quaternion.fromAxisAngle(worldUp, -heading); -if (applyHeadingBeforePitch) { -return pitchRotation.multiply(headingRotation).transform(worldLook) -} -else { -return headingRotation.multiply(pitchRotation).transform(worldLook) -} -}, tryPitchHeadingToPixel: function tryPitchHeadingToPixel(pitch, heading) { -var look=this.calculateLookFromPitchAndHeading(pitch, heading, this._worldLook, this._worldUp, this._worldSide); -if (this._camera.getLook().dot(look) <= 0) { -return null -} -var projectedPoint=this._camera.projectTo2D(look); -return new Vector2(projectedPoint.x, projectedPoint.y) -}, tryPixelToPitchHeading: function tryPixelToPitchHeading(pixel) { -var viewport=this._camera.getViewport(); -var focalLength=this._camera.getFocalLength(); -var halfWidth=viewport.getWidth() * 0.5; -var halfHeight=viewport.getHeight() * 0.5; -var adjustedFocalLength=focalLength * halfHeight; -var x=pixel.x - halfWidth; -var y=pixel.y - halfHeight; -var pitchDelta=-Math.atan2(y, adjustedFocalLength); -var headingDelta=Math.atan2(x, adjustedFocalLength); -var look=this.calculateLookFromPitchAndHeading(pitchDelta, headingDelta, this._look, this._up, this._side, true); -var upComponent=look.dot(this._worldUp); -var sideComponent=look.dot(this._worldSide); -var forwardComponent=look.dot(this._worldLook); -var pitch=Math.atan2(upComponent, Math.max(0, Math.sqrt(1 - upComponent * upComponent))); -var heading=MathHelper.normalizeRadian(Math.atan2(sideComponent, forwardComponent)); -if (isNaN(pitch) || isNaN(heading)) { -return null -} -return { -pitch: pitch, heading: heading -} -}, update: function update() { -if (this.hasCompleted()) { -return -} -var t=(new Date).getTime(); -if (this._ballisticPath) { -var timeDelta=t - this._ballisticStartTime; -if (timeDelta > this._ballisticDuration) { -this._cancelBallisticPath(true) -} -else { -var easedTimeDelta=this._ballisticEasingSpline.getValue(timeDelta); -this._pitchSpring.setCurrentAndTarget(this._ballisticPath.getCurrentPitch(easedTimeDelta)); -this._headingSpring.setCurrentAndTarget(this._ballisticPath.getCurrentHeading(easedTimeDelta)); -this._fieldOfViewSpring.setCurrentAndTarget(Math.min(this._ballisticPath.getCurrentFov(easedTimeDelta), this._maxFieldOfView)) -} -} -this._pitchSpring.step(t); -this._headingSpring.step(t); -this._fieldOfViewSpring.step(t); -this.updateCameraProperties() -}, zoom: function zoom(scaleFactor, fromTarget) { -this._cancelBallisticPath(false); -var proposedFov=(fromTarget) ? this._fieldOfViewSpring.getTarget() : this._fieldOfViewSpring.getCurrent(); -proposedFov *= scaleFactor; -var targetFov=MathHelper.clamp(proposedFov, this._minFieldOfView, this._maxFieldOfView); -this._fieldOfViewSpring.setTarget(targetFov) -}, zoomToggle: function zoomToggle() { -var mid=(this._minFieldOfView + this._maxFieldOfView) * 0.5; -if (this._camera.getVerticalFov() > mid) { -this._fieldOfViewSpring.setTarget(this._minFieldOfView) -} -else { -this._fieldOfViewSpring.setTarget(this._maxFieldOfView) -} -}, discreteZoomFactor: 0.7, zoomIn: function zoomIn() { -this._cancelBallisticPath(false); -this._fieldOfViewSpring.setTarget(Math.max(this._minFieldOfView, this._camera.getVerticalFov() * this.discreteZoomFactor)) -}, zoomOut: function zoomOut() { -this._cancelBallisticPath(false); -this._fieldOfViewSpring.setTarget(Math.min(this._maxFieldOfView, this._camera.getVerticalFov() / this.discreteZoomFactor)) -}, updateCameraProperties: function updateCameraProperties() { -var pitch=this._pitchSpring.getCurrent(); -if (pitch > this._upperPitchLimit) { -pitch = this._upperPitchLimit - 0.0001 -} -if (pitch < this._lowerPitchLimit) { -pitch = this._lowerPitchLimit + 0.0001 -} -var heading=this._constrainHeading(this._headingSpring.getCurrent()); -var pitchRotation; -var headingRotation; -var bubbleLook=new Vector3(0, 0, -1); -var bubbleUp=new Vector3(0, 1, 0); -var bubbleSide=new Vector3(1, 0, 0); -var worldTransform=Matrix4x4.createIdentity(); -this._worldLook = worldTransform.transformVector3(bubbleLook); -this._worldUp = worldTransform.transformVector3(bubbleUp); -this._worldSide = worldTransform.transformVector3(bubbleSide); -pitchRotation = Matrix4x4.createRotationX(pitch); -headingRotation = Matrix4x4.createRotationY(-heading); -var rotation=headingRotation.multiply(pitchRotation); -this._look = rotation.transformVector3(this._worldLook); -this._up = rotation.transformVector3(this._worldUp); -this._side = rotation.transformVector3(this._worldSide); -var bubbleOrigin=new Vector3(0, 0, 0); -var worldPosition=bubbleOrigin; -this._camera.setPosition(worldPosition); -this._camera.setLook(this._look); -this._camera.setUp(this._up); -this._camera.setVerticalFov(this._fieldOfViewSpring.getCurrent()); -if (this.viewChangeCallback != null) { -this.viewChangeCallback() -} -}, onDiscreteZoom: function onDiscreteZoom(e) { -var zoomPoint=new Vector2(this._camera.getViewport().getWidth() * 0.5, this._camera.getViewport().getHeight() * 0.5); -if (e.direction > 0) { -this.zoomIn(zoomPoint) -} -else { -this.zoomOut(zoomPoint) -} -}, onGestureStart: function onGestureStart(e) { -this._lastGestureScale = 1; -this.beginRotation(e.screenX, e.screenY); -this._gestureChanged = false -}, onGestureEnd: function onGestureEnd(e) { -if (this._isRotating) { -this._lastGestureScale = null; -this.endRotation(); -if (!this._gestureChanged || (this._startingPosition[0] == e.screenX && this._startingPosition[1] == e.screenY)) { -this.pick(e) -} -} -}, onGestureChange: function onGestureChange(e) { -if (this._isRotating) { -this._gestureChanged = true; -var scaleDelta=this._lastGestureScale / e.scale; -if (scaleDelta !== 1) { -this.zoom(scaleDelta, true) -} -this._lastGestureScale = e.scale; -this._lastMovePoint = new Vector2(this._startingPosition[0] + e.translationX, this._startingPosition[1] + e.translationY) -} -}, beginRotation: function beginRotation(x, y) { -this._isRotating = true; -this._startingPosition = [x, y]; -this._startingPitchandHeading = this.getPitchAndHeading() -}, endRotation: function endRotation() { -this._isRotating = false; -this._lastMovePoint = null -}, updateRotation: function updateRotation() { -if (this._camera === null) { -return -} -if (this._lastMovePoint == null) { -return -} -if (!this._isRotating) { -return -} -var sx=this._lastMovePoint.x; -var sy=this._lastMovePoint.y; -var viewport=this._camera.getViewport(); -var deltaMultiplier=1.1; -var dx=sx - this._startingPosition[0]; -var dy=sy - this._startingPosition[1]; -this.setRelativeTarget(this._startingPitchandHeading[0], this._startingPitchandHeading[1], dx, dy, viewport.getWidth(), viewport.getHeight(), deltaMultiplier) -}, pick: function pick(e) { -var w=this._camera.getViewport().getWidth(), -h=this._camera.getViewport().getHeight(), -camFov=this._camera.getVerticalFov(), -camAspect=this._camera.getViewport().getAspectRatio(); -var w2=w / 2, -h2=h / 2; -e.clientX -= 8; -e.clientY -= 8; -if (e.clientX < 0 || e.clientY < 0) -console.log("bad"); -var dx=e.clientX - w * 0.5, -dy=(h - 1 - e.clientY) - h * 0.5; -var deltaPitch=Math.atan(dy / h2 * Math.tan(camFov * 0.5)); -var deltaHeading=Math.atan(dx / w2 * Math.tan(camFov * 0.5 * camAspect)); -var targetPitch=this._pitchSpring.getCurrent() + deltaPitch; -var targetHeading=MathHelper.normalizeRadian(this._headingSpring.getCurrent() + deltaHeading); -var ph=this.getRelativeTarget(this._startingPitchandHeading[0], this._startingPitchandHeading[1], -(e.clientX - w * 0.5), (h - 1 - e.clientY) - h * 0.5, w, h, 1); -ph.toHeading = MathHelper.normalizeRadian(ph.toHeading) -}, deltaAngles: function deltaAngles(a1, a2) { -var value=a1 - a2; -while (value < -Math.PI) { -value += 2 * Math.PI -} -while (value >= Math.PI) { -value -= 2 * Math.PI -} -return value -}, deltaThreshold: 0.01 * 0.01 + 0.01 * 0.01, isLargeChange: function isLargeChange(d1, d2) { -return d1 * d1 + d2 * d2 > this.deltaThreshold -}, userInputing: false, _userInteracted: function _userInteracted() { -if (this.userInteractionCallback) { -this.userInteractionCallback() -} -}, control: function control(originalCamera, unprocessedEvents) { -var now=new Date; -var i, -e; -for (i = 0; i < unprocessedEvents.length; ++i) { -e = unprocessedEvents[i]; -switch (e.type) { -case'gestureStart': -this.userInputing = true; -this._cancelBallisticPath(false); -this._userInteracted(); -this.stopMovingCamera(); -this.onGestureStart(e); -break; -case'gestureChange': -this.onGestureChange(e); -break; -case'gestureEnd': -this.userInputing = false; -this.onGestureEnd(e); -break; -case'discreteZoom': -this._cancelBallisticPath(false); -this._userInteracted(); -this.onDiscreteZoom(e); -break; -case'keydown': -this.userInputing = true; -this._cancelBallisticPath(false); -this._userInteracted(); -this.onKeyDown(e); -break; -case'keyup': -this.userInputing = false; -this.onKeyUp(e); -break; -default: -break -} -} -if (this._gyrometer) { -var gyroReading=this._gyrometer.getCurrentReading(); -if (gyroReading && this.prevGyroReading && gyroReading.timestamp != this.prevGyroReading.timestamp && !this.userInputing && this._ballisticPath == null && this.prevFrameTime) { -var pitchHeadingDelta=this.processGyrometerReading(gyroReading, now - this.prevFrameTime); -if (pitchHeadingDelta[0] !== 0 || pitchHeadingDelta[1] !== 0) { -var pitchHeadingTarget=this.getTargetPitchAndHeading(); -var pitch=pitchHeadingTarget[0] + pitchHeadingDelta[0]; -var heading=pitchHeadingTarget[1] - pitchHeadingDelta[1]; -this.setPitchAndHeading(pitch, heading, true) -} -} -this.prevGyroReading = gyroReading -} -this.update(); -this.updateRotation(); -this.prevFrameTime = now; -return this._camera -}, setGyrometer: function setGyrometer(gyrometer) { -this._gyrometer = gyrometer -}, processGyrometerReading: function processGyrometerReading(reading, timeDelta) { -var threshold=(this.prevGyrometerReadingNonZero) ? 1 : 2; -if (reading == null) { -this.prevGyrometerReadingNonZero = false; -return [0, 0] -} -if (Math.abs(reading.angularVelocityX) < threshold && Math.abs(reading.angularVelocityY) < threshold && Math.abs(reading.angularVelocityZ) < threshold) { -this.prevGyrometerReadingNonZero = false; -return [0, 0] -} -this.prevGyrometerReadingNonZero = true; -var multiplier=1.5 * MathHelper.degreesToRadians(timeDelta * 0.001) * Math.sin(this.getVerticalFov()); -var headingDelta=reading.angularVelocityY * multiplier; -var pitchDelta=reading.angularVelocityX * multiplier; -var currentOrientation=null; -if (Windows && Windows.Graphics && Windows.Graphics.Display && Windows.Graphics.Display.DisplayProperties) { -currentOrientation = Windows.Graphics.Display.DisplayProperties.currentOrientation -} -if (Windows.Graphics.Display.DisplayProperties.nativeOrientation == Windows.Graphics.Display.DisplayOrientations.landscape) { -if (currentOrientation == null || currentOrientation === Windows.Graphics.Display.DisplayOrientations.none || currentOrientation === Windows.Graphics.Display.DisplayOrientations.landscape) { -return [pitchDelta, headingDelta] -} -else if (currentOrientation === Windows.Graphics.Display.DisplayOrientations.portrait) { -return [headingDelta, -pitchDelta] -} -else if (currentOrientation === Windows.Graphics.Display.DisplayOrientations.landscapeFlipped) { -return [-pitchDelta, -headingDelta] -} -else if (currentOrientation === Windows.Graphics.Display.DisplayOrientations.portraitFlipped) { -return [-headingDelta, pitchDelta] -} -} -else { -if (currentOrientation == null || currentOrientation === Windows.Graphics.Display.DisplayOrientations.none || currentOrientation === Windows.Graphics.Display.DisplayOrientations.portrait) { -return [pitchDelta, headingDelta] -} -else if (currentOrientation === Windows.Graphics.Display.DisplayOrientations.landscapeFlipped) { -return [headingDelta, -pitchDelta] -} -else if (currentOrientation === Windows.Graphics.Display.DisplayOrientations.portraitFlipped) { -return [-pitchDelta, -headingDelta] -} -else if (currentOrientation === Windows.Graphics.Display.DisplayOrientations.landscape) { -return [-headingDelta, pitchDelta] -} -} -}, _updateMinFov: function _updateMinFov() { -if (this._dimension) { -this._minFieldOfView = this._height * MathHelper.degreesToRadians(90) / (this._dimension * this._maxPixelScaleFactor) -} -}, setMaxPixelScaleFactor: function setMaxPixelScaleFactor(factor) { -if (factor < 1) { -throw"Max pixel scale factor must be 1 or greater"; -} -this._maxPixelScaleFactor = factor; -this._updateMinFov() -}, setViewportSize: function setViewportSize(width, height) { -this._height = height; -this._updateMinFov() -}, scrollSpeedX: 0, scrollSpeedY: 0, scrollAccX: 0, scrollAccY: 0, motionHandle: 0, onKeyDown: function onKeyDown(e) { -if (e.keyCode == '37') -this.startRotateHeading(-1); -else if (e.keyCode == '38') -this.startRotatePitch(1); -else if (e.keyCode == '39') -this.startRotateHeading(1); -else if (e.keyCode == '40') -this.startRotatePitch(-1); -else if (e.keyCode == '107' || e.keyCode == '187') -this.zoomIn(); -else if (e.keyCode == '109' || e.keyCode == '189') -this.zoomOut() -}, onKeyUp: function onKeyUp(e) { -if (e.keyCode == '37' || e.keyCode == '39') -this.stopRotateHeading(); -else if (e.keyCode == '38' || e.keyCode == '40') -this.stopRotatePitch() -}, startRotatePitch: function startRotatePitch(acc) { -this.scrollAccY = acc; -this.moveCamera() -}, stopRotatePitch: function stopRotatePitch() { -this.scrollAccY = 0 -}, startRotateHeading: function startRotateHeading(acc) { -this.scrollAccX = acc; -this.moveCamera() -}, stopRotateHeading: function stopRotateHeading() { -this.scrollAccX = 0 -}, moveCamera: function moveCamera() { -var that=this; -if (!this.motionHandle) { -this.motionHandle = setInterval(function() { -that.scrollSpeedX += that.scrollAccX; -that.scrollSpeedY += that.scrollAccY; -that.scrollSpeedX *= 0.9; -that.scrollSpeedY *= 0.9; -var ph=that.getPitchAndHeading(); -ph[0] += that.scrollSpeedY * 0.005; -ph[1] += that.scrollSpeedX * 0.005; -that.setPitchAndHeading(ph[0], ph[1]); -if (Math.abs(that.scrollSpeedX) < 0.1 && Math.abs(that.scrollSpeedY) < 0.1) { -that.stopMovingCamera(); -return -} -}, 33) -} -}, stopMovingCamera: function stopMovingCamera() { -if (this.motionHandle) { -clearInterval(this.motionHandle); -this.motionHandle = 0 -} -} -}; -"use strict"; -var TileId=function(levelOfDetail, x, y) { -var self=this; -self.x = Math.floor(x); -self.y = Math.floor(y); -self.levelOfDetail = Math.floor(levelOfDetail) -}; -TileId.prototype = { -hasParent: function hasParent() { -return this.levelOfDetail > 0 -}, getParent: function getParent() { -if (!this.hasParent()) { -throw'0 level does not have a parent'; -} -return new TileId(this.levelOfDetail - 1, this.x >> 1, this.y >> 1) -}, getChildren: function getChildren() { -var childX=this.x << 1, -childY=this.y << 1; -return [new TileId(this.levelOfDetail + 1, childX, childY), new TileId(this.levelOfDetail + 1, childX + 1, childY), new TileId(this.levelOfDetail + 1, childX, childY + 1), new TileId(this.levelOfDetail + 1, childX + 1, childY + 1)] -}, isChildOf: function isChildOf(other) { -if (this.levelOfDetail < other.levelOfDetail) { -return false -} -var lodDifference=this.levelOfDetail - other.levelOfDetail; -return (this.x >> this.levelOfDetail) === other.x && (this.y >> this.levelOfDetail) === other.y -}, equals: function equals(other) { -return this.x === other.x && this.y === other.y && this.levelOfDetail === this.levelOfDetail -}, toString: function toString() { -return '(' + this.x + ',' + this.y + ',' + this.levelOfDetail + ')' -} -}; -var TiledImagePyramid=function(name, baseImageWidth, baseImageHeight, tileWidth, tileHeight, minimumLod, tileOverlap, tileBorder, atlasImage) { -if (!baseImageWidth || !baseImageHeight || !tileWidth || !tileHeight) { -throw'Expected baseImageWidth baseImageHeight tileWidth tileHeight as positive integer arguments'; -} -this.baseImageWidth = baseImageWidth; -this.baseImageHeight = baseImageHeight; -this.tileWidth = tileWidth; -this.tileHeight = tileHeight; -this.minimumLod = minimumLod || 0; -this.finestLod = MathHelper.ceilLog2(Math.max(baseImageWidth, baseImageHeight)); -this.tileOverlap = tileOverlap || 0; -this.tileBorder = tileBorder || 0; -this.atlasImage = atlasImage; -this.name = name; -this.lodHistory = {}; -this.callCount = 0 -}; -var debugReturnedTiles=false; -var prevReturnedTiles={}; -TiledImagePyramid.prototype = { -isAtlasTile: function isAtlasTile(tileId) { -return (this.atlasImage && tileId.levelOfDetail == this.minimumLod && tileId.x == 0 && tileId.y == 0) -}, getLodWidthInTiles: function getLodWidthInTiles(lod) { -return MathHelper.divRoundUp(MathHelper.divPow2RoundUp(this.baseImageWidth, this.finestLod - lod), this.tileWidth) -}, getLodHeightInTiles: function getLodHeightInTiles(lod) { -return MathHelper.divRoundUp(MathHelper.divPow2RoundUp(this.baseImageHeight, this.finestLod - lod), this.tileHeight) -}, getLodWidth: function getLodWidth(lod) { -return MathHelper.divPow2RoundUp(this.baseImageWidth, this.finestLod - lod) -}, getLodHeight: function getLodHeight(lod) { -return MathHelper.divPow2RoundUp(this.baseImageHeight, this.finestLod - lod) -}, getEdgeFlags: function getEdgeFlags(tileId) { -return { -isLeft: tileId.x === 0, isRight: tileId.x === this.getLodWidthInTiles(tileId.levelOfDetail) - 1, isTop: tileId.y === 0, isBottom: tileId.y === this.getLodHeightInTiles(tileId.levelOfDetail) - 1 -} -}, getTileDimensions: function getTileDimensions(tileId) { -var lodWidth=this.getLodWidth(tileId.levelOfDetail); -var lodHeight=this.getLodHeight(tileId.levelOfDetail); -var width, -height; -if (this.isAtlasTile(tileId)) { -width = lodWidth + (2 * this.tileBorder); -height = lodHeight + (2 * this.tileBorder) -} -else { -var edgeFlags=this.getEdgeFlags(tileId); -var xMax=tileId.x * this.tileWidth + this.tileWidth - 1; -width = (xMax < lodWidth) ? this.tileWidth : this.tileWidth - (xMax - lodWidth); -if (edgeFlags.isLeft || edgeFlags.isRight) { -width += this.tileOverlap; -width += this.tileBorder -} -else { -width += 2 * this.tileOverlap -} -var yMax=tileId.y * this.tileHeight + this.tileHeight - 1; -height = (yMax < lodHeight) ? this.tileHeight : this.tileHeight - (yMax - lodHeight); -if (edgeFlags.isTop || edgeFlags.isBottom) { -height += this.tileOverlap; -height += this.tileBorder -} -else { -height += 2 * this.tileOverlap -} -} -var tileDimension=new Vector2(width, height); -return tileDimension -}, getTileTransform: function getTileTransform(tileId) { -var scale=1 << (this.finestLod - tileId.levelOfDetail); -var edgeFlags=this.getEdgeFlags(tileId); -var scaleTransform=Matrix4x4.createScale(scale, scale, 1.0); -var xPos=tileId.x * this.tileWidth; -var lodHeight=this.getLodHeight(tileId.levelOfDetail); -var yMax=tileId.y * this.tileHeight + this.tileHeight; -var height=(yMax < lodHeight) ? this.tileHeight : this.tileHeight - (yMax - lodHeight); -var yPos=lodHeight - (height + tileId.y * this.tileHeight); -var overlapTransform=Matrix4x4.createTranslation(edgeFlags.isLeft ? -this.tileBorder : -this.tileOverlap, edgeFlags.isTop ? -this.tileBorder : -this.tileOverlap, 0.0); -var translation=Matrix4x4.createTranslation(xPos, yPos, 0.0); -return scaleTransform.multiply(translation.multiply(overlapTransform)) -}, getLodFromTexelToPixelRatio: function getLodFromTexelToPixelRatio(texelToPixelRatio) { -return this.finestLod - MathHelper.logBase(texelToPixelRatio, 2) -}, getDiscreteLod: function getDiscreteLod(lod) { -var renderLod=(lod - Math.floor(lod) < 0.5849625) ? Math.floor(lod) : Math.ceil(lod); -return MathHelper.clamp(renderLod, this.minimumLod, this.finestLod) -}, getTexelRatio: function getTexelRatio(screenSpacePolygon, textureSpacePolygon) { -if (screenSpacePolygon.length !== textureSpacePolygon.length) { -throw'expected two equal length arrays'; -} -var v0Idx=screenSpacePolygon.length - 1; -var minTexelToPixelRatio=Number.MAX_VALUE; -var maxTexelToPixelRatio=-Number.MAX_VALUE; -var numberOfSegments=0; -var totalTexelToPixelRatio=0; -var texelLengths=[]; -var pixelLengths=[]; -for (var v1Idx=0; v1Idx < screenSpacePolygon.length; ++v1Idx) { -var baseImageSpaceV0X=textureSpacePolygon[v0Idx].x; -var baseImageSpaceV0Y=textureSpacePolygon[v0Idx].y; -var baseImageSpaceV1X=textureSpacePolygon[v1Idx].x; -var baseImageSpaceV1Y=textureSpacePolygon[v1Idx].y; -var screenSpaceV0X=screenSpacePolygon[v0Idx].x; -var screenSpaceV0Y=screenSpacePolygon[v0Idx].y; -var screenSpaceV1X=screenSpacePolygon[v1Idx].x; -var screenSpaceV1Y=screenSpacePolygon[v1Idx].y; -var dx=screenSpaceV1X - screenSpaceV0X; -var dy=screenSpaceV1Y - screenSpaceV0Y; -var du=baseImageSpaceV1X - baseImageSpaceV0X; -var dv=baseImageSpaceV1Y - baseImageSpaceV0Y; -var texelLength=Math.sqrt(du * du + dv * dv); -var pixelLength=Math.sqrt(dx * dx + dy * dy); -if (pixelLength != 0) { -var texelToPixelRatio=texelLength / pixelLength; -minTexelToPixelRatio = Math.min(minTexelToPixelRatio, texelToPixelRatio); -maxTexelToPixelRatio = Math.max(maxTexelToPixelRatio, texelToPixelRatio); -totalTexelToPixelRatio += texelToPixelRatio; -++numberOfSegments -} -texelLengths.push(texelLength); -pixelLengths.push(pixelLength); -v0Idx = v1Idx -} -return { -meanTexelToPixelRatio: totalTexelToPixelRatio / numberOfSegments, minTexelToPixelRatio: minTexelToPixelRatio, maxTexelToPixelRatio: maxTexelToPixelRatio, texelLengths: texelLengths, pixelLengths: pixelLengths -} -}, _isInvalidNdcSpacePolygon: function _isInvalidNdcSpacePolygon(poly) { -if (poly.length < 3) { -return true -} -if (!poly[0].equals) { -return true -} -for (var i=1; i < poly.length; i++) { -if (!poly[0].equals(poly[1])) { -return false -} -} -return true -}, getVisibleTiles: function getVisibleTiles(getModelTransform, viewProjectionTransform, viewportWidth, viewportHeight, textureSpaceClipRect, useLowerLod) { -var viewportTransform=GraphicsHelper.createViewportToScreen(viewportWidth, viewportHeight); -var visibleTiles=[]; -var clippedPolygon=this.getClippedPolygon(getModelTransform, viewProjectionTransform); -if (this._isInvalidNdcSpacePolygon(clippedPolygon.ndcSpacePolygon)) { -return { -visibleTiles: visibleTiles, textureSpacePolygon: clippedPolygon.textureSpacePolygon -} -} -var textureSpacePolygon=[]; -var screenSpacePolygon=[]; -for (var i=0; i < clippedPolygon.ndcSpacePolygon.length; ++i) { -var invTextureW=1.0 / clippedPolygon.textureSpacePolygon[i].w; -clippedPolygon.textureSpacePolygon[i].x *= invTextureW; -clippedPolygon.textureSpacePolygon[i].y *= invTextureW; -clippedPolygon.textureSpacePolygon[i].z *= invTextureW; -clippedPolygon.textureSpacePolygon[i].z = 0.0; -clippedPolygon.textureSpacePolygon[i].w = 1.0; -textureSpacePolygon.push(new Vector2(clippedPolygon.textureSpacePolygon[i].x, clippedPolygon.textureSpacePolygon[i].y)); -var invSpaceW=1.0 / clippedPolygon.ndcSpacePolygon[i].w; -clippedPolygon.ndcSpacePolygon[i].x *= invSpaceW; -clippedPolygon.ndcSpacePolygon[i].y *= invSpaceW; -clippedPolygon.ndcSpacePolygon[i].z *= invSpaceW; -clippedPolygon.ndcSpacePolygon[i].w = 1.0; -var screenSpacePoint=viewportTransform.transformVector4(clippedPolygon.ndcSpacePolygon[i]); -screenSpacePolygon.push(new Vector2(screenSpacePoint.x, screenSpacePoint.y)) -} -if (textureSpaceClipRect) { -var poly=convexPolygonClipper.clip(new Vector4(textureSpaceClipRect.getLeft(), textureSpaceClipRect.getTop(), 0), new Vector4(textureSpaceClipRect.getRight(), textureSpaceClipRect.getBottom(), 0), clippedPolygon.textureSpacePolygon); -textureSpacePolygon = []; -for (var i=0; i < poly.length; ++i) { -textureSpacePolygon.push(poly[i]) -} -} -else { -textureSpacePolygon = clippedPolygon.textureSpacePolygon -} -var texelRatio=this.getTexelRatio(screenSpacePolygon, clippedPolygon.textureSpacePolygon); -var preciseLod=this.getLodFromTexelToPixelRatio(texelRatio.meanTexelToPixelRatio); -if (useLowerLod) { -preciseLod -= 1.0 -} -var renderedLod=this.getDiscreteLod(preciseLod); -var tileGridWidth=this.getLodWidthInTiles(renderedLod); -var tileGridHeight=this.getLodWidthInTiles(renderedLod); -if (tileGridWidth === 1 && tileGridHeight === 1) { -visibleTiles.push(new TileId(renderedLod, 0, 0)) -} -else { -var modelTransform=getModelTransform(this.baseImageWidth, this.name); -var modelViewProjection=viewProjectionTransform.multiply(modelTransform); -var visibleTiles; -if (Config.outputMultiLODTiles) { -visibleTiles = this.intersectClippedPolyWithTileGrid_multiLOD2(modelViewProjection, viewportWidth, viewportHeight, textureSpacePolygon, screenSpacePolygon, tileGridWidth, tileGridHeight, this.tileWidth, this.tileHeight) -} -else { -visibleTiles = this.intersectClippedPolyWithTileGrid(modelViewProjection, textureSpacePolygon, textureSpacePolygon.length, this.finestLod, renderedLod, tileGridWidth, tileGridHeight, this.tileWidth, this.tileHeight) -} -} -return { -visibleTiles: visibleTiles, lod: renderedLod, preciseLod: preciseLod, finestRenderedLod: this.getLodFromTexelToPixelRatio(texelRatio.minTexelToPixelRatio), textureSpacePolygon: clippedPolygon.textureSpacePolygon -} -}, projectPolygonFromNDCToTexture: function projectPolygonFromNDCToTexture(imageSpaceEye, modelViewProjection, ndcPolygon, imageDim) { -var inverseModelViewProjection=modelViewProjection.inverse(); -var polygonProjectedOntoImage=[]; -for (var i=0; i < ndcPolygon.length; ++i) { -var vImageSpace=inverseModelViewProjection.transformVector4(ndcPolygon[i]); -var invImageSpaceW=1.0 / vImageSpace.w; -vImageSpace.x *= invImageSpaceW; -vImageSpace.y *= invImageSpaceW; -vImageSpace.z *= invImageSpaceW; -vImageSpace.w = 1.0; -vImageSpace.y = imageDim - 1 - vImageSpace.y; -polygonProjectedOntoImage.push(vImageSpace) -} -return polygonProjectedOntoImage -}, getClippedPolygon: function getClippedPolygon(getModelTransform, viewProjectionTransform) { -var clipDim=1024; -var clipModelTransform=getModelTransform(clipDim, this.name); -var ndcPolygon=[], -i, -clippedNDCPolygon, -backProjectedPolygon, -inverseModelTransform=clipModelTransform.inverse(), -projectorPosition=inverseModelTransform.transformVector4(new Vector4(0, 0, 0, 1)), -modelViewProjection=viewProjectionTransform.multiply(clipModelTransform), -imageCorners=[new Vector4(0, 0, 0, 1), new Vector4(0, clipDim, 0, 1), new Vector4(clipDim, clipDim, 0, 1), new Vector4(clipDim, 0, 0, 1), ]; -for (i = 0; i < imageCorners.length; ++i) { -ndcPolygon.push(modelViewProjection.transformVector4(imageCorners[i])) -} -var clippedNDCPolygon=convexPolygonClipper.clip(new Vector4(-1, -1, -1), new Vector4(1, 1, 1), ndcPolygon); -var backProjectedPolygon=this.projectPolygonFromNDCToTexture(projectorPosition, modelViewProjection, clippedNDCPolygon, clipDim); -var ratio=this.baseImageHeight / clipDim; -for (var i=0; i < backProjectedPolygon.length; ++i) { -backProjectedPolygon[i].x *= ratio; -backProjectedPolygon[i].y = this.baseImageHeight - 1 - (clipDim - 1 - backProjectedPolygon[i].y) * ratio -} -return { -ndcSpacePolygon: clippedNDCPolygon, textureSpacePolygon: backProjectedPolygon -} -}, orientedBoundingBoxRectIntersecion: function orientedBoundingBoxRectIntersecion(orientedBBox0, orientedBBox1, orientedBBoxWidth, axisAlignedBBox) { -if (orientedBBoxWidth <= 0) { -throw'box must have positive width'; -} -var norm=orientedBBox1.subtract(orientedBBox0).normalize(); -norm = norm.multiplyScalar(orientedBBoxWidth * 0.5); -var perp=new Vector2(-norm.y, norm.x); -var boxCorners=[[orientedBBox0.add(perp).subtract(norm), orientedBBox1.add(perp).add(norm), orientedBBox1.subtract(perp).add(norm), orientedBBox0.subtract(perp).subtract(norm)], [new Vector2(axisAlignedBBox.getLeft(), axisAlignedBBox.getTop()), new Vector2(axisAlignedBBox.getRight(), axisAlignedBBox.getTop()), new Vector2(axisAlignedBBox.getRight(), axisAlignedBBox.getBottom()), new Vector2(axisAlignedBBox.getLeft(), axisAlignedBBox.getBottom())]]; -var boxCorners0=boxCorners[0]; -var boxCorners1=boxCorners[1]; -for (var direction=0; direction < 1; direction++) { -var axis1=boxCorners0[1].subtract(boxCorners0[0]); -var axis2=boxCorners0[3].subtract(boxCorners0[0]); -axis1 = axis1.multiplyScalar((1.0 / axis1.lengthSquared())); -axis2 = axis2.multiplyScalar((1.0 / axis2.lengthSquared())); -var origin1=boxCorners0[0].dot(axis1); -var origin2=boxCorners0[0].dot(axis2); -for (var a=0; a < 2; a++) { -var axis=((a == 0) ? axis1 : axis2); -var origin=((a == 0) ? origin1 : origin2); -var tMin=Number.MAX_VALUE; -var tMax=Number.MIN_VALUE; -var t=boxCorners1[0].dot(axis); -if (t < tMin) -tMin = t; -if (t > tMax) -tMax = t; -t = boxCorners1[1].dot(axis); -if (t < tMin) -tMin = t; -if (t > tMax) -tMax = t; -t = boxCorners1[2].dot(axis); -if (t < tMin) -tMin = t; -if (t > tMax) -tMax = t; -t = boxCorners1[3].dot(axis); -if (t < tMin) -tMin = t; -if (t > tMax) -tMax = t; -if ((tMin - origin) > 1.0 || (tMax - origin) < 0.0) -return false -} -var tmp=boxCorners0; -boxCorners0 = boxCorners1; -boxCorners1 = tmp -} -return true -}, linePointDistanceSquared: function linePointDistanceSquared(line0, line1, point) { -var distanceSquared=line0.subtract(line1).lengthSquared(); -var alpha=((point.x - line0.x) * (line1.x - line0.x) + (point.y - line0.y) * (line1.y - line0.y)) / distanceSquared; -var inLineSegment=alpha >= 0.0 && alpha <= 1.0; -var pIntersection=line0.lerp(line1, alpha); -return { -distanceSquared: pIntersection.subtract(point).lengthSquared(), inLineSegment: inLineSegment -} -}, pointInPoly: function pointInPoly(points, x, y) { -var i, -j, -c=false; -for (i = 0, j = points.length - 1; i < points.length; j = i++) { -if ((((points[i].y <= y) && (y < points[j].y)) || ((points[j].y <= y) && (y < points[i].y))) && (x < (points[j].x - points[i].x) * (y - points[i].y) / (points[j].y - points[i].y) + points[i].x)) -c = !c -} -return c -}, intersectClippedPolyWithTileGrid_multiLOD2: function intersectClippedPolyWithTileGrid_multiLOD2(modelViewProjection, viewportWidth, viewportHeight, texSpacePoly, scrSpacePoly) { -if (scrSpacePoly.length != texSpacePoly.length) { -scrSpacePoly = []; -for (var k=0; k < texSpacePoly.length; k++) { -var vert=new Vector4(texSpacePoly[k].x, this.baseImageHeight - 1 - texSpacePoly[k].y, 0, 1); -scrVert = modelViewProjection.transformVector4(vert); -scrVert.x /= scrVert.w; -scrVert.y /= scrVert.w; -scrVert.x = (scrVert.x + 1) * 0.5 * viewportWidth; -scrVert.y = (scrVert.y + 1) * 0.5 * viewportHeight; -scrSpacePoly.push(scrVert) -} -} -var texelRatio=this.getTexelRatio(scrSpacePoly, texSpacePoly); -var preciseLod=this.getLodFromTexelToPixelRatio(texelRatio.meanTexelToPixelRatio); -var renderedLod=this.getDiscreteLod(preciseLod); -var tileGridWidth=this.getLodWidthInTiles(renderedLod); -var tileGridHeight=this.getLodWidthInTiles(renderedLod); -var tiles=this.intersectClippedPolyWithTileGrid(modelViewProjection, texSpacePoly, texSpacePoly.length, this.finestLod, renderedLod, tileGridWidth, tileGridHeight, this.tileWidth, this.tileHeight); -var maxTexToPixRatio=MathHelper.logBase(this.baseImageWidth / viewportWidth); -var changed=true; -var newTiles; -while (changed) { -changed = false; -var newTiles=[]; -for (var i=0; i < tiles.length; i++) { -var tileId=tiles[i]; -var texSpaceClippedQuad; -lodDiff = this.finestLod - tileId.levelOfDetail; -texX = (tileId.x << lodDiff) * this.tileWidth; -texY = (tileId.y << lodDiff) * this.tileHeight; -width = this.tileWidth << lodDiff; -height = this.tileWidth << lodDiff; -texSpaceClippedQuad = convexPolygonClipper.clip(new Vector4(texX, texY, 0), new Vector4(texX + width, texY + height, 0), texSpacePoly); -if (!texSpaceClippedQuad.length) { -continue -} -if (tileId.noSubdiv || tileId.levelOfDetail == this.finestLod) { -newTiles.push(tileId); -continue -} -var children=tileId.getChildren(); -var numNewLod=0, -numClippedOut=0; -for (var c=0; c < children.length; c++) { -var childTileId=children[c]; -lodDiff = this.finestLod - childTileId.levelOfDetail; -texX = (childTileId.x << lodDiff) * this.tileWidth; -texY = (childTileId.y << lodDiff) * this.tileHeight; -width = this.tileWidth << lodDiff; -height = this.tileWidth << lodDiff; -var tolerance=0.01; -texX += tolerance; -texY += tolerance; -width -= tolerance; -height -= tolerance; -var w2=width / 2, -h2=height / 2; -var fullyContained=true; -for (var m=0; m <= 1 && fullyContained; m++) -for (var n=0; n <= 1 && fullyContained; n++) { -if (!this.pointInPoly(texSpacePoly, texX + m * width, texY + n * height)) -fullyContained = false -} -texSpaceClippedQuad = []; -if (!fullyContained) { -texSpaceClippedQuad = convexPolygonClipper.clip(new Vector4(texX, texY, 0), new Vector4(texX + width, texY + height, 0), texSpacePoly) -} -else { -texSpaceClippedQuad.push(new Vector4(texX, texY, 0, 1)); -texSpaceClippedQuad.push(new Vector4(texX + width, texY, 0, 1)); -texSpaceClippedQuad.push(new Vector4(texX + width, texY + height, 0, 1)); -texSpaceClippedQuad.push(new Vector4(texX, texY + height, 0, 1)) -} -if (texSpaceClippedQuad.length > 0) { -var scrSpaceClippedQuad=[]; -for (var v=0; v < texSpaceClippedQuad.length; v++) { -var vert=new Vector4(texSpaceClippedQuad[v].x, this.baseImageHeight - 1 - texSpaceClippedQuad[v].y, 0, 1); -scrVert = modelViewProjection.transformVector4(vert); -var tempW=1.0 / scrVert.w; -scrVert.x *= tempW; -scrVert.y *= tempW; -scrVert.x = (scrVert.x + 1) * 0.5 * viewportWidth; -scrVert.y = (scrVert.y + 1) * 0.5 * viewportHeight; -scrSpaceClippedQuad.push(scrVert) -} -var texelRatio=this.getTexelRatio(scrSpaceClippedQuad, texSpaceClippedQuad); -var preciseLod=this.getLodFromTexelToPixelRatio(texelRatio.meanTexelToPixelRatio); -var renderedLod=this.getDiscreteLod(preciseLod); -var maxPixelLengths=0; -for (var l=0; l < texelRatio.pixelLengths.length; l++) { -if (texelRatio.pixelLengths[l] > maxPixelLengths) -maxPixelLengths = texelRatio.pixelLengths[l] -} -if (renderedLod > tileId.levelOfDetail || maxPixelLengths > this.tileWidth) { -newTiles.push(childTileId); -numNewLod++; -changed = true -} -} -else -numClippedOut++ -} -if (numNewLod < children.length - numClippedOut) { -tileId.noSubdiv = true; -newTiles.push(tileId) -} -} -if (changed) -tiles = newTiles -} -return tiles -}, intersectClippedPolyWithTileGrid: function intersectClippedPolyWithTileGrid(modelViewProjection, clippedVerticesSSTexCoords, nClippedVerticesSS, finestLod, lod, tileGridWidth, tileGridHeight, tileWidth, tileHeight) { -var xScale=(1.0 / ((1) << (finestLod - lod))) / tileWidth; -var yScale=(1.0 / ((1) << (finestLod - lod))) / tileHeight; -var tileIdCoords=new Array(nClippedVerticesSS); -for (var i=0; i < nClippedVerticesSS; i++) { -tileIdCoords[i] = { -x: clippedVerticesSSTexCoords[i].x * xScale, y: clippedVerticesSSTexCoords[i].y * yScale -} -} -var tileOffsets=PolygonTileFloodFiller.floodFill(tileGridWidth, tileGridHeight, tileIdCoords); -var tiles=[]; -for (var i=0; i < tileOffsets.length; i++) { -tiles.push(new TileId(lod, tileOffsets[i].x, tileOffsets[i].y)) -} -return tiles -} -}; -"use strict"; -var TiledImagePyramidCoverageMap=function(minimumLevelOfDetail, maximumLevelOfDetail) { -var self=this, -lod; -if (minimumLevelOfDetail < 0) { -throw'minimumLevelOfDetail needs to be non negative'; -} -if (maximumLevelOfDetail < 0) { -throw'maximimLevelOfDetail needs to be non negative'; -} -if (!(minimumLevelOfDetail <= maximumLevelOfDetail)) { -throw'min should be less than or equal max lod'; -} -self.x0 = -1; -self.y0 = -1; -self.x1 = -1; -self.y1 = -1; -self.levelOfDetail = maximumLevelOfDetail; -self.minimumLevelOfDetail = minimumLevelOfDetail; -self.occluderFlags = []; -self.occludedFlags = []; -for (lod = 0; lod <= self.levelOfDetail; ++lod) { -self.occluderFlags.push({}); -self.occludedFlags.push({}) -} -}; -TiledImagePyramidCoverageMap.prototype = { -initialize: function initialize(levelOfDetail, x0, y0, x1, y1) { -if (!(levelOfDetail >= 0)) { -throw'Expected ' + '(levelOfDetail >= 0)'; -} -if (!(levelOfDetail <= this.occluderFlags.length - 1)) { -throw'Expected ' + '(levelOfDetail <= occluderFlags.length - 1)'; -} -if (!(x0 < x1)) { -throw'Expected ' + '(x0 < x1)'; -} -if (!(y0 < y1)) { -throw'Expected ' + '(y0 < y1)'; -} -this.levelOfDetail = levelOfDetail; -this.x0 = x0; -this.y0 = y0; -this.x1 = x1; -this.y1 = y1 -}, markAsOccluder: function markAsOccluder(tileId, occluder) { -this.setOccluderFlag(tileId.toString(), occluder) -}, calculateOcclusions: function calculateOcclusions() { -var lod, -x, -y, -bounds, -occluded, -tileId; -for (lod = this.levelOfDetail; lod >= this.minimumLevelOfDetail; lod--) { -if (lod != this.levelOfDetail) { -bounds = this.getTileBoundsAtLod(lod); -for (y = bounds.lodY0; y < bounds.lodY1; y++) { -for (x = bounds.lodX0; x < bounds.lodX1; x++) { -tileId = new TileId(lod, x, y); -if (this.getOccluderFlag(tileId) !== undefined) { -occluded = this.isChildIrrelevantOrOccluder(tileId, 0) && this.isChildIrrelevantOrOccluder(tileId, 1) && this.isChildIrrelevantOrOccluder(tileId, 2) && this.isChildIrrelevantOrOccluder(tileId, 3); -if (occluded) { -this.setOccludedFlag(tileId, true); -this.setOccluderFlag(tileId, true) -} -else { -this.setOccludedFlag(tileId, false); -this.setOccluderFlag(tileId, false) -} -} -} -} -} -} -}, isChildIrrelevantOrOccluder: function isChildIrrelevantOrOccluder(tileId, childIdx) { -if (!((childIdx >= 0 && childIdx < 4))) { -throw'Expected ' + '(childIdx >= 0 && childIdx < 4)'; -} -var childTileId=new TileId(tileId.levelOfDetail + 1, (tileId.x << 1) + childIdx % 2, (tileId.y << 1) + childIdx / 2); -var bounds=this.getTileBoundsAtLod(childTileId.levelOfDetail); -if (childTileId.x >= bounds.lodX0 && childTileId.x < bounds.lodX1 && childTileId.y >= bounds.lodY0 && childTileId.y < bounds.lodY1) { -var occluderFlag=this.getOccluderFlag(childTileId); -return (occluderFlag === undefined) || occluderFlag -} -else { -return true -} -}, getOccluderFlag: function getOccluderFlag(tileId) { -return this.occluderFlags[tileId.levelOfDetail][tileId] -}, setOccluderFlag: function setOccluderFlag(tileId, occluderFlag) { -this.occluderFlags[tileId.levelOfDetail][tileId] = occluderFlag -}, getOccludedFlag: function getOccludedFlag(tileId) { -return this.occludedFlags[tileId.levelOfDetail][tileId] -}, setOccludedFlag: function setOccludedFlag(tileId, occludedFlag) { -this.occludedFlags[tileId.levelOfDetail][tileId] = occludedFlag -}, getTileBoundsAtLod: function getTileBoundsAtLod(lod) { -var lodDiff=this.levelOfDetail - lod; -return { -lodX0: this.x0 >> lodDiff, lodY0: this.y0 >> lodDiff, lodX1: MathHelper.divPow2RoundUp(this.x1, lodDiff), lodY1: MathHelper.divPow2RoundUp(this.y1, lodDiff) -} -}, getDescendents: function getDescendents(tileId, filter) { -var lod, -x, -y, -bounds, -occluded, -tileId, -result=[]; -for (lod = tileId.levelOfDetail + 1; lod <= this.levelOfDetail; lod++) { -bounds = this.getTileBoundsAtLod(lod); -for (tileid in this.occluderFlags[lod]) { -if (bounds.lodX0 <= tileid.x && tileid.x <= bounds.lodX1 && bounds.lodY0 <= tileid.y && tileid.y <= bounds.lodY1) -result.push(tileId.toString()) -} -} -return result -} -}; -"use strict"; -var TiledImagePyramidCuller=function(){}; -var tileDebugPrint=false; -var prevVisibleTiles={}; -TiledImagePyramidCuller.prototype = {cull: function cull(tilePyramid, tileCoverage, getModelTransform, viewProjection, viewportWidth, viewportHeight, clip, visibleSet, prefix, tileSource, isTileAvailable, frameCount, useLowerLod) { -var delta={ -added: [], updated: [], removed: [] -}; -var tileResult=tilePyramid.getVisibleTiles(getModelTransform, viewProjection, viewportWidth, viewportHeight, clip, useLowerLod); -if (tileDebugPrint) { -if (prevVisibleTiles && prevVisibleTiles[prefix]) { -for (var i=0; i < prevVisibleTiles[prefix].length; i++) { -var j; -for (j = 0; j < tileResult.visibleTiles.length; j++) -if (tileResult.visibleTiles[j].toString() == prevVisibleTiles[prefix][i].toString()) -break; -if (j == tileResult.visibleTiles.length) -Utils.log("frame=" + frameCount + " getVisibleTiles remove " + prefix + ":" + prevVisibleTiles[prefix][i]) -} -for (var i=0; i < tileResult.visibleTiles.length; i++) { -var j; -for (j = 0; j < prevVisibleTiles[prefix].length; j++) -if (tileResult.visibleTiles[i].toString() == prevVisibleTiles[prefix][j].toString()) -break; -if (j == prevVisibleTiles[prefix].length) -Utils.log("frame=" + frameCount + " getVisibleTiles added " + prefix + ":" + tileResult.visibleTiles[i]) -} -} -prevVisibleTiles[prefix] = tileResult.visibleTiles.slice() -} -if (tileResult.visibleTiles.length === 0) { -for (var i=0; i < visibleSet.length; ++i) { -var tile=visibleSet[i]; -if (tile.lastTouched !== frameCount && tile.tilePyramid === tilePyramid) { -delta.removed.push({id: visibleSet[i].id}) -} -} -return delta -} -var viewportTransform=GraphicsHelper.createViewportToScreen(viewportWidth, viewportHeight); -var modelTransform=getModelTransform(tilePyramid.baseImageWidth, tilePyramid.name); -var modelToScreen=viewportTransform.multiply(viewProjection.multiply(modelTransform)); -var visibleTiles=[]; -visibleTiles.byId = {}; -for (var i=0; i < tileResult.visibleTiles.length; ++i) { -var tileId=tileResult.visibleTiles[i]; -tileId.isTemp = false; -tileId.isLowerLod = useLowerLod; -tileId.cached = isTileAvailable(tileId.x, tileId.y, tileId.levelOfDetail); -var priority=0; -visibleTiles.push(tileId); -visibleTiles[visibleTiles.length - 1].priority = priority; -visibleTiles.byId[tileId.toString()] = true; -if (!visibleSet.byId[prefix + tileId.toString()]) { -var ancestorId=tileId; -var maxDepth=1, -depth=1; -while (ancestorId.levelOfDetail > tilePyramid.minimumLod && depth++ <= maxDepth) { -ancestorId = ancestorId.getParent(); -if (!visibleTiles.byId[ancestorId.toString()]) { -ancestorId.isTemp = true; -visibleTiles.push(ancestorId); -visibleTiles.byId[ancestorId.toString()] = true; -visibleTiles[visibleTiles.length - 1].priority = priority; -ancestorId.cached = isTileAvailable(ancestorId.x, ancestorId.y, ancestorId.levelOfDetail) -} -} -} -} -visibleTiles.byId = null; -for (var i=0; i < visibleTiles.length; ++i) { -var tileId=visibleTiles[i]; -var id=prefix + tileId.toString(); -if (!visibleSet.byId[id]) { -var tileDimension=tilePyramid.getTileDimensions(tileId); -var tileTransform=tilePyramid.getTileTransform(tileId); -var tileTransformModelSpace=modelTransform.multiply(tileTransform); -var tileUrl=tileSource(tileId.x, tileId.y, tileId.levelOfDetail); -delta.added.push({ -type: 'tile', id: id, tileWidth: tileDimension.x, tileHeight: tileDimension.y, tileId: tileId, transform: tileTransformModelSpace, tilePyramid: tilePyramid, lastTouched: tileId.isTemp ? -1 : frameCount, face: prefix, priority: priority, url: tileUrl -}) -} -else { -visibleSet.byId[id].lastTouched = tileId.isTemp ? -1 : frameCount; -visibleSet.byId[id].priority = Math.max(tileId.priority, visibleSet.byId[id].priority); -delta.updated.push(id) -} -} -var old_and_new=(delta.added || []).concat(visibleSet || []); -var boundAtLod=[]; -var maxLOD=Number.MIN_VALUE; -var minLOD=Number.MAX_VALUE; -for (var i=0; i < old_and_new.length; ++i) { -if (old_and_new[i].tilePyramid === tilePyramid) { -var tileId=old_and_new[i].tileId; -var lod=tileId.levelOfDetail; -if (!boundAtLod[lod]) { -boundAtLod[lod] = {}; -boundAtLod[lod].x0 = Number.MAX_VALUE; -boundAtLod[lod].y0 = Number.MAX_VALUE; -boundAtLod[lod].x1 = Number.MIN_VALUE; -boundAtLod[lod].y1 = Number.MIN_VALUE -} -var b=boundAtLod[lod]; -b.x0 = Math.min(b.x0, tileId.x); -b.y0 = Math.min(b.y0, tileId.y); -b.x1 = Math.max(b.x1, tileId.x + 1); -b.y1 = Math.max(b.y1, tileId.y + 1); -maxLOD = Math.max(maxLOD, tileId.levelOfDetail); -minLOD = Math.min(minLOD, tileId.levelOfDetail); -if (Math.abs(b.x0 - b.x1) > 100) -debugger -} -} -var x0=Number.MAX_VALUE; -var y0=Number.MAX_VALUE; -var x1=Number.MIN_VALUE; -var y1=Number.MIN_VALUE; -for (var l=minLOD; l <= maxLOD; l++) { -if (boundAtLod[l]) { -var b=boundAtLod[l]; -var diff=maxLOD - l; -x0 = Math.min(b.x0 << diff, x0); -y0 = Math.min(b.y0 << diff, y0); -x1 = Math.max(b.x1 << diff, x1); -y1 = Math.max(b.y1 << diff, y1) -} -} -tileCoverage.initialize(maxLOD, x0, y0, x1, y1); -for (var i=0; i < old_and_new.length; ++i) { -var tile=old_and_new[i]; -if (tile.tilePyramid === tilePyramid && tile.lastTouched === frameCount) { -if (!tile.fullyOpaque && !tile.tileId.isTemp) { -var descendents=tileCoverage.getDescendents(tile.tileId, function(tileIdStr) { -return visibleSet.byId[prefix + tileIdStr] == undefined ? false : true -}); -for (var k=0; k < descendents.length; k++) { -visibleSet.byId[prefix + descendents[k]].keep = true -} -var ancestorId=tile.tileId; -while (ancestorId.levelOfDetail > tilePyramid.minimumLod) { -ancestorId = ancestorId.getParent(); -if (visibleSet.byId[prefix + ancestorId] != undefined) { -visibleSet.byId[prefix + ancestorId].keep = true -} -} -} -} -} -for (var idStr in visibleSet.byId) { -var tile=visibleSet.byId[idStr]; -if (!tile.keep && tile.lastTouched !== frameCount && tile.tilePyramid === tilePyramid) { -var justAdded=false; -for (var j=0; j < delta.added.length; ++j) { -if (delta.added[j] === idStr) { -delete delta.added[j]; -justAdded = true; -break -} -} -if (!justAdded) { -delta.removed.push({id: idStr}); -for (var u=0; u < delta.updated.length; u++) { -if (idStr == delta.updated[i]) -debugger -} -} -} -if (tile.keep) { -tile.keep = false -} -} -return delta -}}; -"use strict"; -function JsonDownloadFailedError(message, innerException) { -this.message = message; -this.innerException = innerException -} -function JsonMalformedError(message, innerException) { -this.message = message; -this.innerException = innerException -} -var PhotosynthTileSource=function(baseUrl, atlasImage) { -this.getTileUrl = function(x, y, lod) { -if (lod === 7 && x === 0 && y === 0) { -return atlasImage -} -return baseUrl + lod + '/' + x + '_' + y + '.jpg' -} -}; -var PartnerPanoramaTileSource=function(tileImageUriFormatString, width, height, tileSize, finestLod, numberOfLods, atlasImage) { -var defaultFinestLod=Math.ceil(Math.log(Math.max(width, height)) / Math.LN2); -var lodDelta=defaultFinestLod - finestLod; -var singleTileLod=Math.ceil(Math.log(tileSize) / Math.LN2); -var minLod=finestLod - numberOfLods; -var tempFinestLodFactor=1.0 / Math.pow(2, defaultFinestLod); -var horizontalTileCountMultiplier=width * tempFinestLodFactor; -var verticalTileCountMultiplier=height * tempFinestLodFactor; -this.getTileUrl = function(x, y, lod) { -var normalizedLod=lod - lodDelta; -if (normalizedLod == minLod && atlasImage && x == 0 && y == 0) { -return atlasImage -} -if (normalizedLod > finestLod || normalizedLod <= minLod) { -return null -} -var numHorizontalTilesAtLod=Math.ceil(Math.pow(2, lod - singleTileLod) * horizontalTileCountMultiplier); -var numVerticalTilesAtLod=Math.ceil(Math.pow(2, lod - singleTileLod) * verticalTileCountMultiplier); -return PhotosynthRml.partialDotNetStringFormat(tileImageUriFormatString, normalizedLod, x, y) -} -}; -var PhotosynthRml={ -faceNames: ['front', 'right', 'back', 'left', 'top', 'bottom'], jsonWrapper: 'http://photosynthjsonpwrapper.cloudapp.net/Wrap.aspx?jsonUrl={0}', jsonWrapperCid: 'http://photosynthjsonpwrapper.cloudapp.net/Wrap.aspx?cid={0}', jsonpWrapperParam: '&jsCallback={0}', addScriptElement: function addScriptElement(url) { -var scriptElement=document.createElement('script'); -scriptElement.type = 'text/javascript'; -scriptElement.language = 'javascript'; -scriptElement.src = url; -document.getElementsByTagName('head')[0].appendChild(scriptElement) -}, createFromCid: function createFromCid(cid, callback) { -throw"createFromCid() has been deprecated"; -}, createFromJsonUri: function createFromJsonUri(jsonUri, callback, cacheId) { -if (window.WinJS) { -PhotosynthRml.createFromFullUrl(jsonUri, callback, null, cacheId) -} -else { -PhotosynthRml.createFromFullUrl(PhotosynthRml.jsonWrapper.replace('{0}', encodeURIComponent(jsonUri)), callback, jsonUri, cacheId) -} -}, createFromSameDomainJsonUri: function createFromSameDomainJsonUri(jsonUri, callback) { -var request=new XMLHttpRequest; -request.open("GET", jsonUri, true); -request.onreadystatechange = function() { -if (request.readyState == 4) { -if (request.status == 200) { -PhotosynthRml.createFromJsonString(request.responseText, callback, jsonUri) -} -else { -callback(null, new JsonDownloadFailedError("Response status is not 200")) -} -} -}; -request.send() -}, createFromJsonString: function createFromJsonString(jsonString, callback, jsonUri) { -var json=null; -try { -json = JSON.parse(jsonString) -} -catch(ex) { -callback(null, new JsonMalformedError("The data returned for the pano is not valid json", ex)); -return -} -var rml=PhotosynthRml.createFromJson(json, jsonUri); -if (rml == null) { -callback(null, new JsonMalformedError("The data returned for the pano is valid json but is not valid panorama data")) -} -else { -callback(rml) -} -}, createFromFullUrl: function createFromFullUrl(url, callback, originalJsonUri, cacheId) { -if (window.WinJS) { -var createFromFullUrlWinApp=function(url, callback, originalJsonUri) { -WinJS.xhr({url: url}).then(function(response) { -if (response.status === 200) { -PhotosynthRml.createFromJsonString(response.responseText, callback, originalJsonUri || url) -} -else { -callback(null, new JsonDownloadFailedError("Response status is not 200")) -} -}, function(error) { -callback(null, new JsonDownloadFailedError("The url specified for the pano json data did not return a 200 success", error)) -}) -}; -if (!(cacheId && PlatformJS && PlatformJS.Utilities)) { -createFromFullUrlWinApp(url, callback, originalJsonUri) -} -else { -PlatformJS.Utilities.downloadFile(cacheId, url).then(function(response) { -createFromFullUrlWinApp(response, callback, url) -}, function(error) { -callback(null, new JsonDownloadFailedError("The url specified for the pano json data did not return a 200 success", error)) -}) -} -} -else { -var globalCallbackName='PhotosynthCallback'; -var i=0; -while (window[globalCallbackName + i] != null) { -i++ -} -globalCallbackName = globalCallbackName + i; -window[globalCallbackName] = function(json) { -callback(PhotosynthRml.createFromJson(json, originalJsonUri || url)); -delete window[globalCallbackName] -}; -PhotosynthRml.addScriptElement(url + PhotosynthRml.jsonpWrapperParam.replace('{0}', globalCallbackName)) -} -}, createFromJson: function createFromJson(json, jsonUri) { -var rml; -try { -if (json._json_synth && json._json_synth >= 1.01) { -var root, -propertyName; -for (propertyName in json.l) { -if (json.l.hasOwnProperty(propertyName)) { -root = json.l[propertyName]; -break -} -} -var coordSystem=root.x[0]; -var cubemap=coordSystem.cubemaps[0]; -var bounds=cubemap.field_of_view_bounds; -var projector=coordSystem.r[0]; -var rotationNode=projector.j; -var startRotationNode=projector.start_relative_rotation; -var startingPitch=0; -var startingHeading=0; -var author=root.b; -var attributionUrl=root.attribution_url; -var licenseUrl=root.c; -if (startRotationNode != null) { -var lookVector=new Vector3(0, 0, 1); -var rotation=PhotosynthRml.parseQuaternion(rotationNode[4], rotationNode[5], rotationNode[6]); -var startRelativeRotation=PhotosynthRml.parseQuaternion(startRotationNode[0], startRotationNode[1], startRotationNode[2]); -var combinedRotations=rotation.multiply(startRelativeRotation); -var startVector=combinedRotations.transform(lookVector); -startingPitch = MathHelper.halfPI - Math.acos(startVector.y); -startingHeading = Math.atan2(startVector.z, startVector.x) -} -var highlights=null; -if (root.highlight_map && root.highlight_map.default_highlight) { -highlights = root.highlight_map.default_highlight -} -var atlasImage=null; -if (cubemap.u && jsonUri) { -var baseUrl=jsonUri.substring(0, jsonUri.length - 6); -atlasImage = baseUrl + cubemap.u -} -rml = { -id: 'panorama' + propertyName, type: 'panorama', source: { -attribution: { -author: author, attributionUrl: attributionUrl, licenseUrl: licenseUrl -}, dimension: 0, tileSize: 254, tileOverlap: 1, tileBorder: 1, minimumLod: (atlasImage != null) ? 7 : 8, bounds: { -left: MathHelper.degreesToRadians(bounds[0]), right: MathHelper.degreesToRadians(bounds[1]), top: MathHelper.degreesToRadians(bounds[2]), bottom: MathHelper.degreesToRadians(bounds[3]) -}, startingPitch: startingPitch, startingHeading: startingHeading, projectorAspectRatio: 1, projectorFocalLength: 0.5, highlights: highlights, atlasImage: atlasImage -} -}; -for (var i=0; i < PhotosynthRml.faceNames.length; i++) { -var faceName=PhotosynthRml.faceNames[i]; -var face=cubemap[faceName]; -if (face != null) { -rml.source[faceName + 'Face'] = { -tileSource: (new PhotosynthTileSource(face.u, atlasImage)).getTileUrl, clip: face.clip.vertices -}; -rml.source.dimension = Math.max(rml.source.dimension, face.d[0], face.d[1]) -} -} -} -else if (json.json_pano) { -var tileOverlap=(json.tile_overlap_borders === false) ? 0 : 1; -var author=json.author; -var attributionUrl=PhotosynthRml.partialDotNetStringFormat(json.attribution_uri_format_string, 0, 0); -var licenseUrl=null; -var publisher=json.publisher; -rml = { -id: 'panorama' + propertyName, type: 'panorama', source: { -attribution: { -author: author, attributionUrl: attributionUrl, licenseUrl: licenseUrl, publisher: publisher -}, dimension: 0, tileSize: json.tile_size, tileOverlap: tileOverlap, tileBorder: tileOverlap, minimumLod: Math.ceil(Math.log(json.tile_size / Math.LN2)), bounds: { -left: 0, right: MathHelper.twoPI, top: -MathHelper.halfPI, bottom: MathHelper.halfPI -}, startingPitch: 0, startingHeading: 0, projectorAspectRatio: 1, projectorFocalLength: 0.5, atlasImage: json.atlas_image -} -}; -if (json.field_of_view_bounds) { -rml.source.bounds = { -left: MathHelper.degreesToRadians(json.field_of_view_bounds[0]), right: MathHelper.degreesToRadians(json.field_of_view_bounds[1]), top: MathHelper.degreesToRadians(json.field_of_view_bounds[2]), bottom: MathHelper.degreesToRadians(json.field_of_view_bounds[3]) -} -} -if (json.initial_look_direction) { -rml.source.startingPitch = MathHelper.degreesToRadians(json.initial_look_direction[0]); -rml.source.startingHeading = MathHelper.degreesToRadians(json.initial_look_direction[1]) -} -for (var i=0; i < PhotosynthRml.faceNames.length; i++) { -var faceName=PhotosynthRml.faceNames[i]; -var face=json[faceName]; -if (face != null) { -var clip; -if (face.clip && face.clip.vertices) { -clip = face.clip.vertices -} -else { -clip = [0, 0, 0, face.dimensions[1], face.dimensions[0], face.dimensions[1], face.dimensions[0], 0] -} -rml.source[faceName + 'Face'] = { -tileSource: (new PartnerPanoramaTileSource(face.tile_image_uri_format_string, face.dimensions[0], face.dimensions[1], json.tile_size, face.finest_lod, face.number_of_lods, rml.source.atlasImage)).getTileUrl, clip: clip -}; -rml.source.dimension = Math.max(rml.source.dimension, face.dimensions[0], face.dimensions[1]); -if (face.finest_lod != null && face.number_of_lods != null) { -var defaultFinestLod=Math.ceil(Math.log(rml.source.dimension) / Math.LN2); -rml.source.minimumLod = defaultFinestLod - face.number_of_lods + 1 -} -} -} -if (rml.source.atlasImage != null) { -rml.source.minimumLod-- -} -} -else { -return null -} -} -catch(e) { -if (window.console) { -Utils.log(e) -} -return null -} -return rml -}, parseQuaternion: function parseQuaternion(qx, qy, qz) { -var wSquared=1.0 - (qx * qx + qy * qy + qz * qz); -if (wSquared < MathHelper.zeroTolerance) { -wSquared = 0.0 -} -return new Quaternion(Math.sqrt(wSquared), qx, qy, qz) -}, partialDotNetStringFormat: function partialDotNetStringFormat(formatString) { -if (arguments.length === 0) { -return "" -} -if (arguments.length === 1) { -return formatString -} -var result=""; -var i=0; -while (i < formatString.length) { -var leftBrace=formatString.indexOf('{'); -if (leftBrace === -1) { -return result + formatString -} -result += formatString.substr(0, leftBrace); -formatString = formatString.substr(leftBrace); -var rightBrace=formatString.indexOf('}'); -if (rightBrace < 2) {} -var numberFormat=formatString.substr(1, rightBrace - 1); -formatString = formatString.substr(rightBrace + 1); -var numberFormatParts=numberFormat.split(':'); -var arg=arguments[parseInt(numberFormatParts[0]) + 1]; -if (numberFormatParts.length === 1) { -result += arg.toString() -} -else if (numberFormatParts[1] === 'X') { -result += arg.toString(16).toUpperCase() -} -else { -var out=arg.toString(); -while (out.length < numberFormatParts[1].length) { -out = '0' + out -} -result += out -} -} -return result -} -}; -"use strict"; -var Panorama=function() { -var self=this; -self.frameCount = 0; -self.culler = new TiledImagePyramidCuller; -self.outputMultiLODTiles = false; -self.scanConvertSize = 20; -self.prevViewTransform = null; -self.prevProjectionTransform = null -}; -Panorama.prototype = { -animationDurationMS: 250, cullCubeTiles: function cullCubeTiles(cubeSource, camera, visibleSet, isCachedUrl, useLowerLod, requiresTileOverlap) { -var delta={ -added: [], removed: [] -}, -faceDelta, -i, -propertyName, -faceNames=['front', 'left', 'right', 'back', 'bottom', 'top']; -for (i = 0; i < faceNames.length; ++i) { -propertyName = faceNames[i] + 'Face'; -if (cubeSource[propertyName]) { -faceDelta = this.cullFace(cubeSource.dimension, cubeSource.tileSize, cubeSource.minimumLod, cubeSource.tileOverlap, cubeSource.tileBorder, cubeSource[propertyName], faceNames[i], camera, visibleSet, isCachedUrl, useLowerLod, requiresTileOverlap, cubeSource.atlasImage); -delta.added = delta.added.concat(faceDelta.added); -delta.removed = delta.removed.concat(faceDelta.removed) -} -} -return delta -}, cullFace: function cullFace(dimension, tileSize, minimumLod, tileOverlap, tileBorder, face, name, camera, visibleSet, isCachedUrl, useLowerLod, requiresTileOverlap, atlasImage) { -if (!face.tilePyramid) { -face.tilePyramid = new TiledImagePyramid(name, dimension, dimension, tileSize, tileSize, minimumLod, (requiresTileOverlap) ? 1 : tileOverlap, (requiresTileOverlap) ? 1 : tileBorder, atlasImage); -if (requiresTileOverlap && tileOverlap == 0) { -face.tilePyramid.fakeTileOverlaps = true -} -} -if (!face.tileCoverage) { -face.tileCoverage = new TiledImagePyramidCoverageMap(face.tilePyramid.minimumLod, face.tilePyramid.finestLod) -} -if (!face.tileSource) { -throw'rml cube face requires tile source per face'; -} -if (!face.isCachedTile) { -face.isCachedTile = function(x, y, lod) { -return isCachedUrl(face.tileSource(x, y, lod)) -} -} -var faceClipBounds=this.getClipBounds(face.clip); -var delta=this.culler.cull(face.tilePyramid, face.tileCoverage, this.getFaceTransform, camera.getViewProjectionTransform(), camera.getViewport().getWidth(), camera.getViewport().getHeight(), faceClipBounds, visibleSet, name, face.tileSource, face.isCachedTile, this.frameCount, useLowerLod); -this.removeRenderablesBeingProcessed(delta); -return delta -}, removeRenderablesBeingProcessed: function removeRenderablesBeingProcessed(delta) { -if (this._renderablesBeingLoaded) { -this.removeCancelled(this._renderablesBeingLoaded, delta) -} -if (this._renderablesBeingAnimated) { -this.removeCancelled(this._renderablesBeingAnimated, delta) -} -}, removeCancelled: function removeCancelled(list, delta) { -for (var i=0; i < delta.removed.length; i++) { -var id=delta.removed[i].id; -if (list[id]) { -delete list[id] -} -} -}, getFaceTransform: function getFaceTransform(dimension, name) { -var centerUnitImageBaseImageResolution=Matrix4x4.createTranslation(-0.5, -0.5, 0).multiply(Matrix4x4.createScale(1.0 / dimension, 1.0 / dimension, 1.0)); -var distanceFromCenterOfBubble=0.5; -var faceTransformBaseImageResolution; -switch (name) { -case'front': -faceTransformBaseImageResolution = Matrix4x4.createTranslation(0, 0, -distanceFromCenterOfBubble).multiply(centerUnitImageBaseImageResolution); -break; -case'back': -faceTransformBaseImageResolution = Matrix4x4.createTranslation(0, 0, distanceFromCenterOfBubble).multiply(Matrix4x4.createRotationY(MathHelper.degreesToRadians(180)).multiply(centerUnitImageBaseImageResolution)); -break; -case'left': -faceTransformBaseImageResolution = Matrix4x4.createTranslation(-distanceFromCenterOfBubble, 0, 0).multiply(Matrix4x4.createRotationY(MathHelper.degreesToRadians(90)).multiply(centerUnitImageBaseImageResolution)); -break; -case'right': -faceTransformBaseImageResolution = Matrix4x4.createTranslation(distanceFromCenterOfBubble, 0, 0).multiply(Matrix4x4.createRotationY(MathHelper.degreesToRadians(-90)).multiply(centerUnitImageBaseImageResolution)); -break; -case'top': -faceTransformBaseImageResolution = Matrix4x4.createTranslation(0, distanceFromCenterOfBubble, 0).multiply(Matrix4x4.createRotationX(MathHelper.degreesToRadians(90)).multiply(centerUnitImageBaseImageResolution)); -break; -case'bottom': -faceTransformBaseImageResolution = Matrix4x4.createTranslation(0, -distanceFromCenterOfBubble, 0).multiply(Matrix4x4.createRotationX(MathHelper.degreesToRadians(-90)).multiply(centerUnitImageBaseImageResolution)); -break; -default: -throw'unexpected cube face name'; -break -} -return faceTransformBaseImageResolution -}, getClipBounds: function getClipBounds(vertices) { -if (vertices == null) { -return null -} -var minX=999999; -var minY=999999; -var maxX=-9999999; -var maxY=-9999999; -for (var i=0; i < vertices.length; i += 2) { -var x=vertices[i]; -var y=vertices[i + 1]; -if (x < minX) { -minX = x -} -if (x > maxX) { -maxX = x -} -if (y < minY) { -minY = y -} -if (y > maxY) { -maxY = y -} -} -return new Rectangle(minX, minY, maxX - minX, maxY - minY) -}, createController: function createController(initialPanoramaEntities, camera, cameraParameters) { -var cameraController=new RotationalFixedPositionCameraController(camera); -if (initialPanoramaEntities && initialPanoramaEntities[0]) { -var cubeSource=initialPanoramaEntities[0].source; -if (cubeSource.startingPitch != undefined) { -cameraController.setPitchAndHeading(cubeSource.startingPitch, cubeSource.startingHeading) -} -var leftBound=cubeSource.bounds.left; -var rightBound=cubeSource.bounds.right; -var topBound=cubeSource.bounds.top; -var bottomBound=cubeSource.bounds.bottom; -var leftRightDelta=rightBound - leftBound; -while (leftRightDelta <= 0) { -leftRightDelta += 2 * MathHelper.PI -} -var borderBufferPercentage=1.05; -var maxAllowedFov=MathHelper.degreesToRadians(90); -var maxHorizontalFov=Math.min(maxAllowedFov, leftRightDelta * borderBufferPercentage); -var maxVerticalFov=Math.min(maxAllowedFov, (bottomBound - topBound) * borderBufferPercentage); -var finalFov=Math.max(maxVerticalFov, Math.min(maxAllowedFov, Viewport.convertHorizontalToVerticalFieldOfView(camera.getViewport().getAspectRatio(), maxHorizontalFov))); -var maxFovAsHorizontal=Viewport.convertVerticalToHorizontalFieldOfView(camera.getViewport().getAspectRatio(), finalFov); -finalFov = Viewport.convertHorizontalToVerticalFieldOfView(camera.getViewport().getAspectRatio(), Math.min(maxAllowedFov, maxFovAsHorizontal)); -cameraController = new RotationalFixedPositionCameraController(camera, -topBound, -bottomBound, rightBound, leftBound, cubeSource.dimension); -cameraController.setVerticalFov(finalFov) -} -return cameraController -}, cull: function cull(panoramaEntities, camera, visibleSet, isCachedUrl, useLowerFidelity, requiresTileOverlap) { -var i, -j, -k, -panoramaTiles, -result={ -added: [], removed: [] -}; -for (i = 0; i < panoramaEntities.length; ++i) { -panoramaTiles = this.cullCubeTiles(panoramaEntities[i].source, camera, visibleSet, isCachedUrl, useLowerFidelity, requiresTileOverlap); -result.added = result.added.concat(panoramaTiles.added); -result.removed = result.removed.concat(panoramaTiles.removed) -} -++this.frameCount; -return result -}, generateRenderables: function generateRenderables(visibleEntities, renderer) { -var self=this; -var i, -renderable, -renderables=[]; -if (!this._renderablesBeingLoaded) { -this._renderablesBeingLoaded = {} -} -var faceAtlasOffsets={ -front: 0, right: 1, back: 2, left: 3, bottom: 4, top: 5 -}; -for (i = 0; i < visibleEntities.length; ++i) { -(function() { -var entity=visibleEntities[i]; -var callbackInfo={}; -var offsetX=0; -var offsetY=0; -if (entity.tilePyramid.isAtlasTile(entity.tileId)) { -offsetX = faceAtlasOffsets[entity.face] * entity.tileWidth -} -renderable = new TexturedQuadRenderable(entity.tileWidth, entity.tileHeight, entity.transform, entity.url, null, null, false, offsetX, offsetY); -renderable._entity = entity; -renderable.entityId = entity.id; -renderable._order = entity.tileId.levelOfDetail; -if (entity.tileId.isTemp || entity.tileId.cached) { -entity.fullyOpaque = true -} -else { -entity.fullyOpaque = false -} -entity.loaded = false; -renderables.push(renderable); -self._renderablesBeingLoaded[entity.id] = renderable -}()) -} -return renderables -}, updateRenderableStates: function updateRenderableStates(renderer) { -var animateTileEntry=true; -if (!this._renderablesBeingAnimated) { -this._renderablesBeingAnimated = {} -} -if (this._renderablesBeingLoaded) { -var toDelete=[]; -for (var id in this._renderablesBeingLoaded) { -var r=this._renderablesBeingLoaded[id]; -var entity=r._entity; -var tileId=entity.tileId; -if (r._material._texture._isReady) { -if (animateTileEntry && !tileId.isTemp && !tileId.isLowerLod) { -renderer.animate(r, {opacity: 0.0}, {opacity: 1.0}, this.animationDurationMS, 'ease-in-out'); -entity.fullyOpaque = false; -this._renderablesBeingAnimated[id] = r -} -else { -entity.fullyOpaque = true -} -toDelete.push(id) -} -} -for (var i=0; i < toDelete.length; i++) { -delete this._renderablesBeingLoaded[toDelete[i]] -} -} -if (this._renderablesBeingAnimated) { -var toDelete=[]; -for (var id in this._renderablesBeingAnimated) { -var r=this._renderablesBeingAnimated[id]; -if (r._material._animation._ended) { -toDelete.push(id); -r._entity.fullyOpaque = true -} -} -for (var i=0; i < toDelete.length; i++) { -delete this._renderablesBeingAnimated[toDelete[i]] -} -} -}, fetch: function fetch(entities, downloader) { -var i; -if (entities.removed) { -for (i = 0; i < entities.removed.length; ++i) { -downloader.cancel(entities.removed[i].id) -} -} -if (entities.updated) { -for (i = 0; i < entities.updated.length; ++i) { -downloader.updatePriority(entities.updated[i].url, entities.added[i].priority) -} -} -if (entities.added) { -for (i = 0; i < entities.added.length; ++i) { -downloader.downloadImage(entities.added[i].url, entities.added[i].priority, entities.added[i].id) -} -} -}, _drawBorders: function _drawBorders(currentTileContext, currentImage, neighborTexture, xOffset, yOffset) { -var neighborSourceImage=neighborTexture._sourceImage; -var neighborCanvas=neighborTexture._image; -if (neighborSourceImage == null || neighborCanvas == null) { -return -} -var neighborContext=neighborCanvas.getContext('2d'); -currentTileContext.drawImage(neighborSourceImage, 1 + xOffset, 1 + yOffset); -neighborContext.drawImage(currentImage, 1 - xOffset, 1 - yOffset) -}, _neighborOffsets: [[-1, -1], [-1, 0], [-1, 1], [0, 1], [1, 1], [1, 0], [1, -1], [-1, 0]], _processDownload: function _processDownload(img, renderable, entityIdToRenderable, renderer) { -var texture=renderable._material._texture; -var entity=renderable._entity; -var tilePyramid=entity.tilePyramid; -var tileId=entity.tileId; -if (texture._image != null) { -return -} -if (tilePyramid.isAtlasTile(tileId)) { -var dimensions=tilePyramid.getTileDimensions(tileId); -var canvas=document.createElement('canvas'); -canvas.width = dimensions.x; -canvas.height = dimensions.y; -var context=canvas.getContext('2d'); -var offsetX=texture._offsetX; -var offsetY=texture._offsetY; -var width=texture._width; -var height=texture._height; -context.drawImage(img, offsetX, offsetY, width, height, 0, 0, canvas.width, canvas.height); -if (tilePyramid.fakeTileOverlaps) { -context.drawImage(img, offsetX, offsetY, width, height, 1, 1, canvas.width - 1, canvas.height - 1) -} -texture._image = canvas; -texture._sourceImage = img -} -else if (tilePyramid.fakeTileOverlaps) { -var canvas=document.createElement('canvas'); -canvas.width = tilePyramid.tileWidth + 2; -canvas.height = tilePyramid.tileHeight + 2; -var context=canvas.getContext('2d'); -context.drawImage(img, 0, 0, tilePyramid.tileWidth + 2, tilePyramid.tileHeight + 2); -context.drawImage(img, 1, 1); -for (var j=0; j < this._neighborOffsets.length; j++) { -var neighborOffset=this._neighborOffsets[j]; -var neighbor=new TileId(tileId.levelOfDetail, tileId.x + neighborOffset[0], tileId.y + neighborOffset[1]); -var neighborEntityId=entity.face + neighbor.toString(); -var neighborRenderableId=entityIdToRenderable[neighborEntityId]; -if (neighborRenderableId && renderer._renderables[neighborRenderableId]) { -var neighborTexture=renderer._renderables[neighborRenderableId]._material._texture; -this._drawBorders(context, img, neighborTexture, tilePyramid.tileWidth * neighborOffset[0], tilePyramid.tileHeight * neighborOffset[1]) -} -} -texture._image = canvas; -texture._sourceImage = img -} -else { -texture._image = img -} -texture._isReady = true; -texture._isDirty = true -}, processDownloads: function processDownloads(completed, entityIdToRenderable, renderer) { -for (var i=0; i < completed.length; ++i) { -var img=completed[i]; -var renderableId=entityIdToRenderable[img.token]; -if (renderableId && renderer._renderables[renderableId]) { -var renderable=renderer._renderables[renderableId]; -var entity=renderable._entity; -if (entity.tilePyramid.isAtlasTile(entity.tileId)) { -this.atlasImage = img -} -else { -this._processDownload(img, renderable, entityIdToRenderable, renderer) -} -} -else { -Utils.log('error renderableId : ' + renderableId + 'is not in the scene') -} -} -if (this.atlasImage) { -for (var entityId2 in entityIdToRenderable) { -var renderableId2=entityIdToRenderable[entityId2]; -var renderable2=renderer._renderables[renderableId2]; -if (renderable2 && renderable2._entity) { -var entity2=renderable2._entity; -if (entity2.tilePyramid.isAtlasTile(entity2.tileId)) { -this._processDownload(this.atlasImage, renderable2) -} -} -} -} -}, parseQuaternion: function parseQuaternion(qx, qy, qz) { -var wSquared=1.0 - (qx * qx + qy * qy + qz * qz); -if (wSquared < MathHelper.zeroTolerance) { -wSquared = 0.0 -} -return new Quaternion(Math.sqrt(wSquared), qx, qy, qz) -} -}; -Config.PanoramaExists = true; -"use strict"; -var AttributionControl=function(parentDiv) { -var self=this; -self.lastAttribution = null; -var layout=['
', '', '
', '
', '
', '
', '
', '
', '', '', '–', '', '
'].join(' '); -var domAttributePrefix="$$$$"; -var div=document.createElement('div'); -parentDiv.appendChild(div); -if (typeof MSApp == 'object' && MSApp.execUnsafeLocalFunction) { -MSApp.execUnsafeLocalFunction(function() { -div.innerHTML = layout -}) -} -else { -div.innerHTML = layout -} -parentDiv.removeChild(div); -var controlDiv=div.firstChild; -parentDiv.appendChild(controlDiv); -var hide=function(element) { -if (!element[domAttributePrefix + 'displayValue']) { -var oldValue=element.style.display || window.getComputedStyle(element, null).getPropertyValue('display'); -element[domAttributePrefix + 'displayValue'] -} -Utils.css(element, {display: 'none'}) -}; -var show=function(element) { -var originalValue=element[domAttributePrefix + 'displayValue'] || ((element.tagName === 'A' || element.tagName === 'SPAN') ? 'inline' : 'inline-block'); -Utils.css(element, {display: originalValue}) -}; -var qs=function(id, rootElement) { -if (!rootElement) { -rootElement = document -} -return rootElement.querySelector(id) -}; -var text=function(element, value) { -element.innerHTML = value -}; -Utils.css(controlDiv, {display: 'block'}); -hide(controlDiv); -var allIcons=['pd_icon', 'by_icon', 'sa_icon', 'nc_icon', 'nd_icon', 'copyright_icon']; -var ccAttributionType={ -publicDomain: { -pattern: '/publicdomain/', text: 'This work is identified as Public Domain.', url: 'http://creativecommons.org/licenses/publicdomain/', iconsToShow: ['pd_icon'] -}, by: { -pattern: '/by/', text: 'This work is licensed to the public under the Creative Commons Attribution license.', url: 'http://creativecommons.org/licenses/by/3.0/', iconsToShow: ['by_icon'] -}, bySa: { -pattern: '/by-sa/', text: 'This work is licensed to the public under the Creative Commons Attribution-ShareAlike license.', url: 'http://creativecommons.org/licenses/by-sa/3.0/', iconsToShow: ['by_icon', 'sa_icon'] -}, byNd: { -pattern: '/by-nd/', text: 'This work is licensed to the public under the Creative Commons Attribution-NoDerivatives license.', url: 'http://creativecommons.org/licenses/by-nd/3.0/', iconsToShow: ['by_icon', 'nd_icon'] -}, byNc: { -pattern: '/by-nc/', text: 'This work is licensed to the public under the Creative Commons Attribution-Non-commercial license.', url: 'http://creativecommons.org/licenses/by-nc/3.0/', iconsToShow: ['by_icon', 'nc_icon'] -}, byNcSa: { -pattern: '/by-nc-sa/', text: 'This work is licensed to the public under the Creative Commons Attribution-Non-commercial-ShareAlike license.', url: 'http://creativecommons.org/licenses/by-nc-sa/3.0/', iconsToShow: ['by_icon', 'nc_icon', 'sa_icon'] -}, byNcNd: { -pattern: '/by-nc-nd/', text: 'This work is licensed to the public under the Creative Commons Attribution-Non-commercial-NoDerivatives license.', url: 'http://creativecommons.org/licenses/by-nc-nd/3.0/', iconsToShow: ['by_icon', 'nc_icon', 'nd_icon'] -}, copyright: { -pattern: '', text: 'This work is copyrighted.', url: '', iconsToShow: ['copyright_icon'] -} -}; -var hideUI=function() { -hide(controlDiv) -}; -var updateUI=function(attribution) { -var k, -i, -icon, -el, -attributionType=ccAttributionType.copyright; -hide(controlDiv); -el = qs('#publisherText', controlDiv); -hide(el); -text(el, ''); -el = qs('#authorText', controlDiv); -hide(el); -text(el, ''); -el = qs('#authorTextAnchor', controlDiv); -hide(el); -el.title = ''; -el.href = ''; -el = qs('#authorTextNoAnchor', controlDiv); -hide(el); -text(el, ''); -el = qs('#attributionDash', controlDiv); -hide(el); -for (i = 0; i < allIcons.length; ++i) { -el = qs('#' + allIcons[i], controlDiv); -hide(el) -} -el = qs('#icon_anchor', controlDiv); -el.href = ''; -el.title = ''; -for (k in ccAttributionType) -if (ccAttributionType.hasOwnProperty(k)) { -if (attribution && attribution.licenseUrl && attribution.licenseUrl.indexOf(ccAttributionType[k].pattern) != -1) { -attributionType = ccAttributionType[k]; -break -} -} -for (i = 0; i < attributionType.iconsToShow.length; ++i) { -icon = attributionType.iconsToShow[i]; -el = qs('#' + icon, controlDiv); -show(el) -} -el = qs('#icon_anchor', controlDiv); -el.title = attributionType.text; -el.href = attributionType.url || attribution.attributionUrl; -if (!attribution.author && attribution.publisher) { -el = qs('#publisherText', controlDiv); -hide(el); -text(el, ''); -el = qs('#publisherTextAnchor', controlDiv); -hide(el); -text(el, ''); -if (attribution.attributionUrl) { -el = qs('#authorText', controlDiv); -show(el); -text(el, attribution.publisher); -el = qs('#authorTextAnchor', controlDiv); -show(el); -el.href = attribution.attributionUrl; -el.title = attribution.attributionUrl -} -else { -el = qs('#authorTextNoAnchor', controlDiv); -show(el); -text(el, attribution.publisher) -} -} -else { -if (attribution.publisher) { -el = qs('#publisherText', controlDiv); -show(el); -text(el, attribution.publisher); -el = qs('#publisherTextAnchor', controlDiv); -show(el); -el.href = attribution.attributionUrl; -el.title = attribution.attributionUrl; -el = qs('#attributionDash', controlDiv); -show(el) -} -else { -el = qs('#publisherText', controlDiv); -hide(el); -text(el, '') -} -if (attribution.author) { -if (attribution.attributionUrl) { -el = qs('#authorText', controlDiv); -show(el); -text(el, attribution.author); -el = qs('#authorTextAnchor', controlDiv); -show(el); -el.href = attribution.attributionUrl; -el.title = attribution.attributionUrl -} -else { -el = qs('#authorTextNoAnchor', controlDiv); -show(el); -text(el, attribution.author) -} -} -} -show(controlDiv) -}; -self.setAttribution = function(attribution) { -if ((self.lastAttribution != null && attribution.author === self.lastAttribution.author && attribution.publisher === self.lastAttribution.publisher && attribution.attributionUrl === self.lastAttribution.attributionUrl && attribution.licenseUrl === self.lastAttribution.licenseUrl) || self.lastAttribution === null) { -updateUI(attribution); -self.lastAttribution = attribution -} -}; -self.clearAttrubution = function() { -self.lastAttribution = null; -hideUI() -}; -self.dispose = function() { -if (controlDiv && controlDiv.parentNode) { -controlDiv.parentNode.removeChild(controlDiv); -controlDiv = null -} -} -}; -"use strict"; -function GestureHelper(elem, options) { -var elem=elem; -var gestureStartCallback=options.gestureStart || function(){}; -var gestureChangeCallback=options.gestureChange || function(){}; -var gestureEndCallback=options.gestureEnd || function(){}; -var discreteZoomCallback=options.discreteZoom || function(){}; -var keyDownCallback=options.keyDown || function(){}; -var keyUpCallback=options.keyUp || function(){}; -var enabled=false; -var msGesture; -function onGestureStart(e) { -e.type = 'gestureStart'; -gestureStartCallback(e) -} -function onGestureChange(e) { -e.type = 'gestureChange'; -gestureChangeCallback(e) -} -function onGestureEnd(e) { -e.type = 'gestureEnd'; -gestureEndCallback(e); -keyboardFocusElement.focus() -} -function onDiscreteZoom(e) { -e.type = 'discreteZoom'; -discreteZoomCallback(e) -} -function onKeyDown(e) { -keyDownCallback(e) -} -function onKeyUp(e) { -keyUpCallback(e) -} -var msGestureGoing=false; -var msPointerCount=0; -function msPointerDown(e) { -try { -msGesture.addPointer(e.pointerId); -elem.msSetPointerCapture(e.pointerId); -if (msPointerCount === 0) { -msPointerCount = 1; -onGestureStart({ -clientX: e.clientX, clientY: e.clientY, screenX: e.screenX, screenY: e.screenY -}); -totalTranslationX = 0; -totalTranslationY = 0; -totalScale = 1 -} -} -catch(e) {} -} -function msPointerUp(e) { -if (!msGestureGoing && msPointerCount === 1) { -onGestureEnd({ -clientX: e.clientX, clientY: e.clientY, screenX: e.screenX, screenY: e.screenY, translationX: totalTranslationX, translationY: totalTranslationY, scale: totalScale -}) -} -msPointerCount--; -if (msPointerCount < 0) { -msPointerCount = 0 -} -} -var totalTranslationX; -var totalTranslationY; -var totalScale; -function msGestureStart(e) { -msGestureGoing = true -} -function msGestureChange(e) { -if (msGestureGoing) { -totalTranslationX += e.translationX; -totalTranslationY += e.translationY; -totalScale *= e.scale; -if (e.detail & e.MSGESTURE_FLAG_INERTIA) { -onGestureEnd({ -clientX: e.clientX, clientY: e.clientY, screenX: e.screenX, screenY: e.screenY, translationX: totalTranslationX, translationY: totalTranslationY, scale: totalScale -}); -msGestureGoing = false -} -else { -onGestureChange({ -clientX: e.clientX, clientY: e.clientY, screenX: e.screenX, screenY: e.screenY, translationX: totalTranslationX, translationY: totalTranslationY, scale: totalScale -}) -} -} -} -function msGestureEnd(e) { -if (msGestureGoing) { -onGestureEnd({ -clientX: e.clientX, clientY: e.clientY, screenX: e.screenX, screenY: e.screenY, translationX: totalTranslationX, translationY: totalTranslationY, scale: totalScale -}) -} -} -var mouseDownPos=null; -function mouseDown(e) { -onGestureStart({ -clientX: e.clientX, clientY: e.clientY, screenX: e.screenX, screenY: e.screenY -}); -mouseDownPos = { -x: e.clientX, y: e.clientY -}; -e.preventDefault() -} -function mouseMove(e) { -if (mouseDownPos != null) { -onGestureChange({ -clientX: e.clientX, clientY: e.clientY, screenX: e.screenX, screenY: e.screenY, translationX: e.clientX - mouseDownPos.x, translationY: e.clientY - mouseDownPos.y, scale: 1 -}); -e.preventDefault() -} -} -function mouseUp(e) { -if (mouseDownPos != null) { -onGestureEnd({ -clientX: e.clientX, clientY: e.clientY, screenX: e.screenX, screenY: e.screenY, translationX: e.clientX - mouseDownPos.x, translationY: e.clientY - mouseDownPos.y, scale: 1 -}); -mouseDownPos = null; -e.preventDefault() -} -} -function mouseWheel(e) { -var wheelDelta=e.detail ? e.detail * -1 : e.wheelDelta * 0.025; -var direction; -if (wheelDelta > 0) { -direction = 1 -} -else if (wheelDelta < 0) { -direction = -1 -} -onDiscreteZoom({ -clientX: e.clientX, clientY: e.clientY, screenX: e.screenX, screenY: e.screenY, direction: direction -}); -e.preventDefault() -} -function doubleClick(e) { -onDiscreteZoom({ -clientX: e.clientX, clientY: e.clientY, screenX: e.screenX, screenY: e.screenY, direction: 1 -}); -e.preventDefault() -} -function gestureStart(e){} -function gestureChange(e){} -function gestureEnd(e){} -var attachHandlers; -var detachHandlers; -if (window.navigator.msPointerEnabled) { -attachHandlers = function() { -msGesture = new MSGesture; -msGesture.target = elem; -elem.addEventListener("MSPointerDown", msPointerDown, false); -elem.addEventListener("MSPointerUp", msPointerUp, false); -elem.addEventListener('MSGestureStart', msGestureStart, true); -elem.addEventListener('MSGestureChange', msGestureChange, true); -elem.addEventListener('MSGestureEnd', msGestureEnd, true); -elem.addEventListener('dblclick', doubleClick, false); -elem.addEventListener('mousewheel', mouseWheel, false) -}; -detachHandlers = function() { -elem.removeEventListener("MSPointerDown", msPointerDown, false); -elem.removeEventListener("MSPointerUp", msPointerUp, false); -elem.removeEventListener('MSGestureStart', msGestureStart, true); -elem.removeEventListener('MSGestureChange', msGestureChange, true); -elem.removeEventListener('MSGestureEnd', msGestureEnd, true); -elem.removeEventListener('dblclick', doubleClick, false); -elem.removeEventListener('mousewheel', mouseWheel, false); -msGesture = null -} -} -else if (window.ontouchstart) {} -else { -attachHandlers = function() { -elem.addEventListener('mousedown', mouseDown, false); -elem.addEventListener('mousemove', mouseMove, false); -elem.addEventListener('mouseup', mouseUp, false); -elem.addEventListener('mousewheel', mouseWheel, false); -elem.addEventListener('DOMMouseScroll', mouseWheel, false); -elem.addEventListener('dblclick', doubleClick, false); -document.addEventListener('mousemove', mouseMove, false); -document.addEventListener('mouseup', mouseUp, false) -}; -detachHandlers = function() { -elem.removeEventListener('mousedown', mouseDown, false); -elem.removeEventListener('mousemove', mouseMove, false); -elem.removeEventListener('mouseup', mouseUp, false); -elem.removeEventListener('mousewheel', mouseWheel, false); -elem.removeEventListener('DOMMouseScroll', mouseWheel, false); -elem.removeEventListener('dblclick', doubleClick, false); -document.removeEventListener('mousemove', mouseMove, false); -document.removeEventListener('mouseup', mouseUp, false) -} -} -var keyboardFocusElement=document.createElement('input'); -keyboardFocusElement.readOnly = true; -Utils.css(keyboardFocusElement, { -width: '0px', height: '0px', opacity: 0 -}); -var attachKeyboardHandlers=function() { -elem.appendChild(keyboardFocusElement); -keyboardFocusElement.addEventListener('keydown', onKeyDown, false); -keyboardFocusElement.addEventListener('keyup', onKeyUp, false); -keyboardFocusElement.focus() -}; -var detachKeyboardHandlers=function() { -keyboardFocusElement.removeEventListener('keydown', onKeyDown, false); -keyboardFocusElement.removeEventListener('keyup', onKeyUp, false); -if (keyboardFocusElement.parentNode) { -keyboardFocusElement.parentNode.removeChild(keyboardFocusElement) -} -}; -this.enable = function() { -attachHandlers(); -attachKeyboardHandlers(); -enabled = true -}; -this.disable = function() { -detachHandlers(); -detachKeyboardHandlers(); -enabled = false -}; -this.isEnabled = function() { -return enabled -}; -this.userCurrentlyInteracting = function() { -return msPointerCount > 0 -}; -this.focusKeyboardElement = function() { -keyboardFocusElement.focus() +"use strict"; +var Panorama = function() { + var self = this; + self.frameCount = 0; + self.culler = new TiledImagePyramidCuller; + self.outputMultiLODTiles = false; + self.scanConvertSize = 20; + self.prevViewTransform = null; + self.prevProjectionTransform = null +}; +Panorama.prototype = { + animationDurationMS: 250, + cullCubeTiles: function cullCubeTiles(cubeSource, camera, visibleSet, isCachedUrl, useLowerLod, requiresTileOverlap) { + var delta = { + added: [], + removed: [] + }, + faceDelta, + i, + propertyName, + faceNames = ['front', 'left', 'right', 'back', 'bottom', 'top']; + for (i = 0; i < faceNames.length; ++i) { + propertyName = faceNames[i] + 'Face'; + if (cubeSource[propertyName]) { + faceDelta = this.cullFace(cubeSource.dimension, cubeSource.tileSize, cubeSource.minimumLod, cubeSource.tileOverlap, cubeSource.tileBorder, cubeSource[propertyName], faceNames[i], camera, visibleSet, isCachedUrl, useLowerLod, requiresTileOverlap, cubeSource.atlasImage); + delta.added = delta.added.concat(faceDelta.added); + delta.removed = delta.removed.concat(faceDelta.removed) + } + } + return delta + }, + cullFace: function cullFace(dimension, tileSize, minimumLod, tileOverlap, tileBorder, face, name, camera, visibleSet, isCachedUrl, useLowerLod, requiresTileOverlap, atlasImage) { + if (!face.tilePyramid) { + face.tilePyramid = new TiledImagePyramid(name, dimension, dimension, tileSize, tileSize, minimumLod, (requiresTileOverlap) ? 1 : tileOverlap, (requiresTileOverlap) ? 1 : tileBorder, atlasImage); + if (requiresTileOverlap && tileOverlap == 0) { + face.tilePyramid.fakeTileOverlaps = true + } + } + if (!face.tileCoverage) { + face.tileCoverage = new TiledImagePyramidCoverageMap(face.tilePyramid.minimumLod, face.tilePyramid.finestLod) + } + if (!face.tileSource) { + throw 'rml cube face requires tile source per face'; + } + if (!face.isCachedTile) { + face.isCachedTile = function(x, y, lod) { + return isCachedUrl(face.tileSource(x, y, lod)) + } + } + var faceClipBounds = this.getClipBounds(face.clip); + var delta = this.culler.cull(face.tilePyramid, face.tileCoverage, this.getFaceTransform, camera.getViewProjectionTransform(), camera.getViewport().getWidth(), camera.getViewport().getHeight(), faceClipBounds, visibleSet, name, face.tileSource, face.isCachedTile, this.frameCount, useLowerLod); + this.removeRenderablesBeingProcessed(delta); + return delta + }, + removeRenderablesBeingProcessed: function removeRenderablesBeingProcessed(delta) { + if (this._renderablesBeingLoaded) { + this.removeCancelled(this._renderablesBeingLoaded, delta) + } + if (this._renderablesBeingAnimated) { + this.removeCancelled(this._renderablesBeingAnimated, delta) + } + }, + removeCancelled: function removeCancelled(list, delta) { + for (var i = 0; i < delta.removed.length; i++) { + var id = delta.removed[i].id; + if (list[id]) { + delete list[id] + } + } + }, + getFaceTransform: function getFaceTransform(dimension, name) { + var centerUnitImageBaseImageResolution = Matrix4x4.createTranslation(-0.5, -0.5, 0).multiply(Matrix4x4.createScale(1.0 / dimension, 1.0 / dimension, 1.0)); + var distanceFromCenterOfBubble = 0.5; + var faceTransformBaseImageResolution; + switch (name) { + case 'front': + faceTransformBaseImageResolution = Matrix4x4.createTranslation(0, 0, -distanceFromCenterOfBubble).multiply(centerUnitImageBaseImageResolution); + break; + case 'back': + faceTransformBaseImageResolution = Matrix4x4.createTranslation(0, 0, distanceFromCenterOfBubble).multiply(Matrix4x4.createRotationY(MathHelper.degreesToRadians(180)).multiply(centerUnitImageBaseImageResolution)); + break; + case 'left': + faceTransformBaseImageResolution = Matrix4x4.createTranslation(-distanceFromCenterOfBubble, 0, 0).multiply(Matrix4x4.createRotationY(MathHelper.degreesToRadians(90)).multiply(centerUnitImageBaseImageResolution)); + break; + case 'right': + faceTransformBaseImageResolution = Matrix4x4.createTranslation(distanceFromCenterOfBubble, 0, 0).multiply(Matrix4x4.createRotationY(MathHelper.degreesToRadians(-90)).multiply(centerUnitImageBaseImageResolution)); + break; + case 'top': + faceTransformBaseImageResolution = Matrix4x4.createTranslation(0, distanceFromCenterOfBubble, 0).multiply(Matrix4x4.createRotationX(MathHelper.degreesToRadians(90)).multiply(centerUnitImageBaseImageResolution)); + break; + case 'bottom': + faceTransformBaseImageResolution = Matrix4x4.createTranslation(0, -distanceFromCenterOfBubble, 0).multiply(Matrix4x4.createRotationX(MathHelper.degreesToRadians(-90)).multiply(centerUnitImageBaseImageResolution)); + break; + default: + throw 'unexpected cube face name'; + break + } + return faceTransformBaseImageResolution + }, + getClipBounds: function getClipBounds(vertices) { + if (vertices == null) { + return null + } + var minX = 999999; + var minY = 999999; + var maxX = -9999999; + var maxY = -9999999; + for (var i = 0; i < vertices.length; i += 2) { + var x = vertices[i]; + var y = vertices[i + 1]; + if (x < minX) { + minX = x + } + if (x > maxX) { + maxX = x + } + if (y < minY) { + minY = y + } + if (y > maxY) { + maxY = y + } + } + return new Rectangle(minX, minY, maxX - minX, maxY - minY) + }, + createController: function createController(initialPanoramaEntities, camera, cameraParameters) { + var cameraController = new RotationalFixedPositionCameraController(camera); + if (initialPanoramaEntities && initialPanoramaEntities[0]) { + var cubeSource = initialPanoramaEntities[0].source; + if (cubeSource.startingPitch != undefined) { + cameraController.setPitchAndHeading(cubeSource.startingPitch, cubeSource.startingHeading) + } + var leftBound = cubeSource.bounds.left; + var rightBound = cubeSource.bounds.right; + var topBound = cubeSource.bounds.top; + var bottomBound = cubeSource.bounds.bottom; + var leftRightDelta = rightBound - leftBound; + while (leftRightDelta <= 0) { + leftRightDelta += 2 * MathHelper.PI + } + var borderBufferPercentage = 1.05; + var maxAllowedFov = MathHelper.degreesToRadians(90); + var maxHorizontalFov = Math.min(maxAllowedFov, leftRightDelta * borderBufferPercentage); + var maxVerticalFov = Math.min(maxAllowedFov, (bottomBound - topBound) * borderBufferPercentage); + var finalFov = Math.max(maxVerticalFov, Math.min(maxAllowedFov, Viewport.convertHorizontalToVerticalFieldOfView(camera.getViewport().getAspectRatio(), maxHorizontalFov))); + var maxFovAsHorizontal = Viewport.convertVerticalToHorizontalFieldOfView(camera.getViewport().getAspectRatio(), finalFov); + finalFov = Viewport.convertHorizontalToVerticalFieldOfView(camera.getViewport().getAspectRatio(), Math.min(maxAllowedFov, maxFovAsHorizontal)); + cameraController = new RotationalFixedPositionCameraController(camera, -topBound, -bottomBound, rightBound, leftBound, cubeSource.dimension); + cameraController.setVerticalFov(finalFov) + } + return cameraController + }, + cull: function cull(panoramaEntities, camera, visibleSet, isCachedUrl, useLowerFidelity, requiresTileOverlap) { + var i, + j, + k, + panoramaTiles, + result = { + added: [], + removed: [] + }; + for (i = 0; i < panoramaEntities.length; ++i) { + panoramaTiles = this.cullCubeTiles(panoramaEntities[i].source, camera, visibleSet, isCachedUrl, useLowerFidelity, requiresTileOverlap); + result.added = result.added.concat(panoramaTiles.added); + result.removed = result.removed.concat(panoramaTiles.removed) + } + ++this.frameCount; + return result + }, + generateRenderables: function generateRenderables(visibleEntities, renderer) { + var self = this; + var i, + renderable, + renderables = []; + if (!this._renderablesBeingLoaded) { + this._renderablesBeingLoaded = {} + } + var faceAtlasOffsets = { + front: 0, + right: 1, + back: 2, + left: 3, + bottom: 4, + top: 5 + }; + for (i = 0; i < visibleEntities.length; ++i) { + (function() { + var entity = visibleEntities[i]; + var callbackInfo = {}; + var offsetX = 0; + var offsetY = 0; + if (entity.tilePyramid.isAtlasTile(entity.tileId)) { + offsetX = faceAtlasOffsets[entity.face] * entity.tileWidth + } + renderable = new TexturedQuadRenderable(entity.tileWidth, entity.tileHeight, entity.transform, entity.url, null, null, false, offsetX, offsetY); + renderable._entity = entity; + renderable.entityId = entity.id; + renderable._order = entity.tileId.levelOfDetail; + if (entity.tileId.isTemp || entity.tileId.cached) { + entity.fullyOpaque = true + } else { + entity.fullyOpaque = false + } + entity.loaded = false; + renderables.push(renderable); + self._renderablesBeingLoaded[entity.id] = renderable + }()) + } + return renderables + }, + updateRenderableStates: function updateRenderableStates(renderer) { + var animateTileEntry = true; + if (!this._renderablesBeingAnimated) { + this._renderablesBeingAnimated = {} + } + if (this._renderablesBeingLoaded) { + var toDelete = []; + for (var id in this._renderablesBeingLoaded) { + var r = this._renderablesBeingLoaded[id]; + var entity = r._entity; + var tileId = entity.tileId; + if (r._material._texture._isReady) { + if (animateTileEntry && !tileId.isTemp && !tileId.isLowerLod) { + renderer.animate(r, { opacity: 0.0 }, { opacity: 1.0 }, this.animationDurationMS, 'ease-in-out'); + entity.fullyOpaque = false; + this._renderablesBeingAnimated[id] = r + } else { + entity.fullyOpaque = true + } + toDelete.push(id) + } + } + for (var i = 0; i < toDelete.length; i++) { + delete this._renderablesBeingLoaded[toDelete[i]] + } + } + if (this._renderablesBeingAnimated) { + var toDelete = []; + for (var id in this._renderablesBeingAnimated) { + var r = this._renderablesBeingAnimated[id]; + if (r._material._animation._ended) { + toDelete.push(id); + r._entity.fullyOpaque = true + } + } + for (var i = 0; i < toDelete.length; i++) { + delete this._renderablesBeingAnimated[toDelete[i]] + } + } + }, + fetch: function fetch(entities, downloader) { + var i; + if (entities.removed) { + for (i = 0; i < entities.removed.length; ++i) { + downloader.cancel(entities.removed[i].id) + } + } + if (entities.updated) { + for (i = 0; i < entities.updated.length; ++i) { + downloader.updatePriority(entities.updated[i].url, entities.added[i].priority) + } + } + if (entities.added) { + for (i = 0; i < entities.added.length; ++i) { + downloader.downloadImage(entities.added[i].url, entities.added[i].priority, entities.added[i].id) + } + } + }, + _drawBorders: function _drawBorders(currentTileContext, currentImage, neighborTexture, xOffset, yOffset) { + var neighborSourceImage = neighborTexture._sourceImage; + var neighborCanvas = neighborTexture._image; + if (neighborSourceImage == null || neighborCanvas == null) { + return + } + var neighborContext = neighborCanvas.getContext('2d'); + currentTileContext.drawImage(neighborSourceImage, 1 + xOffset, 1 + yOffset); + neighborContext.drawImage(currentImage, 1 - xOffset, 1 - yOffset) + }, + _neighborOffsets: [ + [-1, -1], + [-1, 0], + [-1, 1], + [0, 1], + [1, 1], + [1, 0], + [1, -1], + [-1, 0] + ], + _processDownload: function _processDownload(img, renderable, entityIdToRenderable, renderer) { + var texture = renderable._material._texture; + var entity = renderable._entity; + var tilePyramid = entity.tilePyramid; + var tileId = entity.tileId; + if (texture._image != null) { + return + } + if (tilePyramid.isAtlasTile(tileId)) { + var dimensions = tilePyramid.getTileDimensions(tileId); + var canvas = document.createElement('canvas'); + canvas.width = dimensions.x; + canvas.height = dimensions.y; + var context = canvas.getContext('2d'); + var offsetX = texture._offsetX; + var offsetY = texture._offsetY; + var width = texture._width; + var height = texture._height; + context.drawImage(img, offsetX, offsetY, width, height, 0, 0, canvas.width, canvas.height); + if (tilePyramid.fakeTileOverlaps) { + context.drawImage(img, offsetX, offsetY, width, height, 1, 1, canvas.width - 1, canvas.height - 1) + } + texture._image = canvas; + texture._sourceImage = img + } else if (tilePyramid.fakeTileOverlaps) { + var canvas = document.createElement('canvas'); + canvas.width = tilePyramid.tileWidth + 2; + canvas.height = tilePyramid.tileHeight + 2; + var context = canvas.getContext('2d'); + context.drawImage(img, 0, 0, tilePyramid.tileWidth + 2, tilePyramid.tileHeight + 2); + context.drawImage(img, 1, 1); + for (var j = 0; j < this._neighborOffsets.length; j++) { + var neighborOffset = this._neighborOffsets[j]; + var neighbor = new TileId(tileId.levelOfDetail, tileId.x + neighborOffset[0], tileId.y + neighborOffset[1]); + var neighborEntityId = entity.face + neighbor.toString(); + var neighborRenderableId = entityIdToRenderable[neighborEntityId]; + if (neighborRenderableId && renderer._renderables[neighborRenderableId]) { + var neighborTexture = renderer._renderables[neighborRenderableId]._material._texture; + this._drawBorders(context, img, neighborTexture, tilePyramid.tileWidth * neighborOffset[0], tilePyramid.tileHeight * neighborOffset[1]) + } + } + texture._image = canvas; + texture._sourceImage = img + } else { + texture._image = img + } + texture._isReady = true; + texture._isDirty = true + }, + processDownloads: function processDownloads(completed, entityIdToRenderable, renderer) { + for (var i = 0; i < completed.length; ++i) { + var img = completed[i]; + var renderableId = entityIdToRenderable[img.token]; + if (renderableId && renderer._renderables[renderableId]) { + var renderable = renderer._renderables[renderableId]; + var entity = renderable._entity; + if (entity.tilePyramid.isAtlasTile(entity.tileId)) { + this.atlasImage = img + } else { + this._processDownload(img, renderable, entityIdToRenderable, renderer) + } + } else { + Utils.log('error renderableId : ' + renderableId + 'is not in the scene') + } + } + if (this.atlasImage) { + for (var entityId2 in entityIdToRenderable) { + var renderableId2 = entityIdToRenderable[entityId2]; + var renderable2 = renderer._renderables[renderableId2]; + if (renderable2 && renderable2._entity) { + var entity2 = renderable2._entity; + if (entity2.tilePyramid.isAtlasTile(entity2.tileId)) { + this._processDownload(this.atlasImage, renderable2) + } + } + } + } + }, + parseQuaternion: function parseQuaternion(qx, qy, qz) { + var wSquared = 1.0 - (qx * qx + qy * qy + qz * qz); + if (wSquared < MathHelper.zeroTolerance) { + wSquared = 0.0 + } + return new Quaternion(Math.sqrt(wSquared), qx, qy, qz) + } +}; +Config.PanoramaExists = true; +"use strict"; +var AttributionControl = function(parentDiv) { + var self = this; + self.lastAttribution = null; + var layout = ['
', '', '
', '
', '
', '
', '
', '
', '', '', '–', '', '
'].join(' '); + var domAttributePrefix = "$$$$"; + var div = document.createElement('div'); + parentDiv.appendChild(div); + if (typeof MSApp == 'object' && MSApp.execUnsafeLocalFunction) { + MSApp.execUnsafeLocalFunction(function() { + div.innerHTML = layout + }) + } else { + div.innerHTML = layout + } + parentDiv.removeChild(div); + var controlDiv = div.firstChild; + parentDiv.appendChild(controlDiv); + var hide = function(element) { + if (!element[domAttributePrefix + 'displayValue']) { + var oldValue = element.style.display || window.getComputedStyle(element, null).getPropertyValue('display'); + element[domAttributePrefix + 'displayValue'] + } + Utils.css(element, { display: 'none' }) + }; + var show = function(element) { + var originalValue = element[domAttributePrefix + 'displayValue'] || ((element.tagName === 'A' || element.tagName === 'SPAN') ? 'inline' : 'inline-block'); + Utils.css(element, { display: originalValue }) + }; + var qs = function(id, rootElement) { + if (!rootElement) { + rootElement = document + } + return rootElement.querySelector(id) + }; + var text = function(element, value) { + element.innerHTML = value + }; + Utils.css(controlDiv, { display: 'block' }); + hide(controlDiv); + var allIcons = ['pd_icon', 'by_icon', 'sa_icon', 'nc_icon', 'nd_icon', 'copyright_icon']; + var ccAttributionType = { + publicDomain: { + pattern: '/publicdomain/', + text: 'This work is identified as Public Domain.', + url: 'http://creativecommons.org/licenses/publicdomain/', + iconsToShow: ['pd_icon'] + }, + by: { + pattern: '/by/', + text: 'This work is licensed to the public under the Creative Commons Attribution license.', + url: 'http://creativecommons.org/licenses/by/3.0/', + iconsToShow: ['by_icon'] + }, + bySa: { + pattern: '/by-sa/', + text: 'This work is licensed to the public under the Creative Commons Attribution-ShareAlike license.', + url: 'http://creativecommons.org/licenses/by-sa/3.0/', + iconsToShow: ['by_icon', 'sa_icon'] + }, + byNd: { + pattern: '/by-nd/', + text: 'This work is licensed to the public under the Creative Commons Attribution-NoDerivatives license.', + url: 'http://creativecommons.org/licenses/by-nd/3.0/', + iconsToShow: ['by_icon', 'nd_icon'] + }, + byNc: { + pattern: '/by-nc/', + text: 'This work is licensed to the public under the Creative Commons Attribution-Non-commercial license.', + url: 'http://creativecommons.org/licenses/by-nc/3.0/', + iconsToShow: ['by_icon', 'nc_icon'] + }, + byNcSa: { + pattern: '/by-nc-sa/', + text: 'This work is licensed to the public under the Creative Commons Attribution-Non-commercial-ShareAlike license.', + url: 'http://creativecommons.org/licenses/by-nc-sa/3.0/', + iconsToShow: ['by_icon', 'nc_icon', 'sa_icon'] + }, + byNcNd: { + pattern: '/by-nc-nd/', + text: 'This work is licensed to the public under the Creative Commons Attribution-Non-commercial-NoDerivatives license.', + url: 'http://creativecommons.org/licenses/by-nc-nd/3.0/', + iconsToShow: ['by_icon', 'nc_icon', 'nd_icon'] + }, + copyright: { + pattern: '', + text: 'This work is copyrighted.', + url: '', + iconsToShow: ['copyright_icon'] + } + }; + var hideUI = function() { + hide(controlDiv) + }; + var updateUI = function(attribution) { + var k, + i, + icon, + el, + attributionType = ccAttributionType.copyright; + hide(controlDiv); + el = qs('#publisherText', controlDiv); + hide(el); + text(el, ''); + el = qs('#authorText', controlDiv); + hide(el); + text(el, ''); + el = qs('#authorTextAnchor', controlDiv); + hide(el); + el.title = ''; + el.href = ''; + el = qs('#authorTextNoAnchor', controlDiv); + hide(el); + text(el, ''); + el = qs('#attributionDash', controlDiv); + hide(el); + for (i = 0; i < allIcons.length; ++i) { + el = qs('#' + allIcons[i], controlDiv); + hide(el) + } + el = qs('#icon_anchor', controlDiv); + el.href = ''; + el.title = ''; + for (k in ccAttributionType) + if (ccAttributionType.hasOwnProperty(k)) { + if (attribution && attribution.licenseUrl && attribution.licenseUrl.indexOf(ccAttributionType[k].pattern) != -1) { + attributionType = ccAttributionType[k]; + break + } + } + for (i = 0; i < attributionType.iconsToShow.length; ++i) { + icon = attributionType.iconsToShow[i]; + el = qs('#' + icon, controlDiv); + show(el) + } + el = qs('#icon_anchor', controlDiv); + el.title = attributionType.text; + el.href = attributionType.url || attribution.attributionUrl; + if (!attribution.author && attribution.publisher) { + el = qs('#publisherText', controlDiv); + hide(el); + text(el, ''); + el = qs('#publisherTextAnchor', controlDiv); + hide(el); + text(el, ''); + if (attribution.attributionUrl) { + el = qs('#authorText', controlDiv); + show(el); + text(el, attribution.publisher); + el = qs('#authorTextAnchor', controlDiv); + show(el); + el.href = attribution.attributionUrl; + el.title = attribution.attributionUrl + } else { + el = qs('#authorTextNoAnchor', controlDiv); + show(el); + text(el, attribution.publisher) + } + } else { + if (attribution.publisher) { + el = qs('#publisherText', controlDiv); + show(el); + text(el, attribution.publisher); + el = qs('#publisherTextAnchor', controlDiv); + show(el); + el.href = attribution.attributionUrl; + el.title = attribution.attributionUrl; + el = qs('#attributionDash', controlDiv); + show(el) + } else { + el = qs('#publisherText', controlDiv); + hide(el); + text(el, '') + } + if (attribution.author) { + if (attribution.attributionUrl) { + el = qs('#authorText', controlDiv); + show(el); + text(el, attribution.author); + el = qs('#authorTextAnchor', controlDiv); + show(el); + el.href = attribution.attributionUrl; + el.title = attribution.attributionUrl + } else { + el = qs('#authorTextNoAnchor', controlDiv); + show(el); + text(el, attribution.author) + } + } + } + show(controlDiv) + }; + self.setAttribution = function(attribution) { + if ((self.lastAttribution != null && attribution.author === self.lastAttribution.author && attribution.publisher === self.lastAttribution.publisher && attribution.attributionUrl === self.lastAttribution.attributionUrl && attribution.licenseUrl === self.lastAttribution.licenseUrl) || self.lastAttribution === null) { + updateUI(attribution); + self.lastAttribution = attribution + } + }; + self.clearAttrubution = function() { + self.lastAttribution = null; + hideUI() + }; + self.dispose = function() { + if (controlDiv && controlDiv.parentNode) { + controlDiv.parentNode.removeChild(controlDiv); + controlDiv = null + } + } +}; +"use strict"; + +function GestureHelper(elem, options) { + var elem = elem; + var gestureStartCallback = options.gestureStart || function() {}; + var gestureChangeCallback = options.gestureChange || function() {}; + var gestureEndCallback = options.gestureEnd || function() {}; + var discreteZoomCallback = options.discreteZoom || function() {}; + var keyDownCallback = options.keyDown || function() {}; + var keyUpCallback = options.keyUp || function() {}; + var enabled = false; + var msGesture; + + function onGestureStart(e) { + e.type = 'gestureStart'; + gestureStartCallback(e) + } + + function onGestureChange(e) { + e.type = 'gestureChange'; + gestureChangeCallback(e) + } + + function onGestureEnd(e) { + e.type = 'gestureEnd'; + gestureEndCallback(e); + keyboardFocusElement.focus() + } + + function onDiscreteZoom(e) { + e.type = 'discreteZoom'; + discreteZoomCallback(e) + } + + function onKeyDown(e) { + keyDownCallback(e) + } + + function onKeyUp(e) { + keyUpCallback(e) + } + var msGestureGoing = false; + var msPointerCount = 0; + + function msPointerDown(e) { + try { + msGesture.addPointer(e.pointerId); + elem.msSetPointerCapture(e.pointerId); + if (msPointerCount === 0) { + msPointerCount = 1; + onGestureStart({ + clientX: e.clientX, + clientY: e.clientY, + screenX: e.screenX, + screenY: e.screenY + }); + totalTranslationX = 0; + totalTranslationY = 0; + totalScale = 1 + } + } catch (e) {} + } + + function msPointerUp(e) { + if (!msGestureGoing && msPointerCount === 1) { + onGestureEnd({ + clientX: e.clientX, + clientY: e.clientY, + screenX: e.screenX, + screenY: e.screenY, + translationX: totalTranslationX, + translationY: totalTranslationY, + scale: totalScale + }) + } + msPointerCount--; + if (msPointerCount < 0) { + msPointerCount = 0 + } + } + var totalTranslationX; + var totalTranslationY; + var totalScale; + + function msGestureStart(e) { + msGestureGoing = true + } + + function msGestureChange(e) { + if (msGestureGoing) { + totalTranslationX += e.translationX; + totalTranslationY += e.translationY; + totalScale *= e.scale; + if (e.detail & e.MSGESTURE_FLAG_INERTIA) { + onGestureEnd({ + clientX: e.clientX, + clientY: e.clientY, + screenX: e.screenX, + screenY: e.screenY, + translationX: totalTranslationX, + translationY: totalTranslationY, + scale: totalScale + }); + msGestureGoing = false + } else { + onGestureChange({ + clientX: e.clientX, + clientY: e.clientY, + screenX: e.screenX, + screenY: e.screenY, + translationX: totalTranslationX, + translationY: totalTranslationY, + scale: totalScale + }) + } + } + } + + function msGestureEnd(e) { + if (msGestureGoing) { + onGestureEnd({ + clientX: e.clientX, + clientY: e.clientY, + screenX: e.screenX, + screenY: e.screenY, + translationX: totalTranslationX, + translationY: totalTranslationY, + scale: totalScale + }) + } + } + var mouseDownPos = null; + + function mouseDown(e) { + onGestureStart({ + clientX: e.clientX, + clientY: e.clientY, + screenX: e.screenX, + screenY: e.screenY + }); + mouseDownPos = { + x: e.clientX, + y: e.clientY + }; + e.preventDefault() + } + + function mouseMove(e) { + if (mouseDownPos != null) { + onGestureChange({ + clientX: e.clientX, + clientY: e.clientY, + screenX: e.screenX, + screenY: e.screenY, + translationX: e.clientX - mouseDownPos.x, + translationY: e.clientY - mouseDownPos.y, + scale: 1 + }); + e.preventDefault() + } + } + + function mouseUp(e) { + if (mouseDownPos != null) { + onGestureEnd({ + clientX: e.clientX, + clientY: e.clientY, + screenX: e.screenX, + screenY: e.screenY, + translationX: e.clientX - mouseDownPos.x, + translationY: e.clientY - mouseDownPos.y, + scale: 1 + }); + mouseDownPos = null; + e.preventDefault() + } + } + + function mouseWheel(e) { + var wheelDelta = e.detail ? e.detail * -1 : e.wheelDelta * 0.025; + var direction; + if (wheelDelta > 0) { + direction = 1 + } else if (wheelDelta < 0) { + direction = -1 + } + onDiscreteZoom({ + clientX: e.clientX, + clientY: e.clientY, + screenX: e.screenX, + screenY: e.screenY, + direction: direction + }); + e.preventDefault() + } + + function doubleClick(e) { + onDiscreteZoom({ + clientX: e.clientX, + clientY: e.clientY, + screenX: e.screenX, + screenY: e.screenY, + direction: 1 + }); + e.preventDefault() + } + + function gestureStart(e) {} + + function gestureChange(e) {} + + function gestureEnd(e) {} + var attachHandlers; + var detachHandlers; + if (window.navigator.msPointerEnabled) { + attachHandlers = function() { + msGesture = new MSGesture; + msGesture.target = elem; + elem.addEventListener("MSPointerDown", msPointerDown, false); + elem.addEventListener("MSPointerUp", msPointerUp, false); + elem.addEventListener('MSGestureStart', msGestureStart, true); + elem.addEventListener('MSGestureChange', msGestureChange, true); + elem.addEventListener('MSGestureEnd', msGestureEnd, true); + elem.addEventListener('dblclick', doubleClick, false); + elem.addEventListener('mousewheel', mouseWheel, false) + }; + detachHandlers = function() { + elem.removeEventListener("MSPointerDown", msPointerDown, false); + elem.removeEventListener("MSPointerUp", msPointerUp, false); + elem.removeEventListener('MSGestureStart', msGestureStart, true); + elem.removeEventListener('MSGestureChange', msGestureChange, true); + elem.removeEventListener('MSGestureEnd', msGestureEnd, true); + elem.removeEventListener('dblclick', doubleClick, false); + elem.removeEventListener('mousewheel', mouseWheel, false); + msGesture = null + } + } else if (window.ontouchstart) {} else { + attachHandlers = function() { + elem.addEventListener('mousedown', mouseDown, false); + elem.addEventListener('mousemove', mouseMove, false); + elem.addEventListener('mouseup', mouseUp, false); + elem.addEventListener('mousewheel', mouseWheel, false); + elem.addEventListener('DOMMouseScroll', mouseWheel, false); + elem.addEventListener('dblclick', doubleClick, false); + document.addEventListener('mousemove', mouseMove, false); + document.addEventListener('mouseup', mouseUp, false) + }; + detachHandlers = function() { + elem.removeEventListener('mousedown', mouseDown, false); + elem.removeEventListener('mousemove', mouseMove, false); + elem.removeEventListener('mouseup', mouseUp, false); + elem.removeEventListener('mousewheel', mouseWheel, false); + elem.removeEventListener('DOMMouseScroll', mouseWheel, false); + elem.removeEventListener('dblclick', doubleClick, false); + document.removeEventListener('mousemove', mouseMove, false); + document.removeEventListener('mouseup', mouseUp, false) + } + } + var keyboardFocusElement = document.createElement('input'); + keyboardFocusElement.readOnly = true; + Utils.css(keyboardFocusElement, { + width: '0px', + height: '0px', + opacity: 0 + }); + var attachKeyboardHandlers = function() { + elem.appendChild(keyboardFocusElement); + keyboardFocusElement.addEventListener('keydown', onKeyDown, false); + keyboardFocusElement.addEventListener('keyup', onKeyUp, false); + keyboardFocusElement.focus() + }; + var detachKeyboardHandlers = function() { + keyboardFocusElement.removeEventListener('keydown', onKeyDown, false); + keyboardFocusElement.removeEventListener('keyup', onKeyUp, false); + if (keyboardFocusElement.parentNode) { + keyboardFocusElement.parentNode.removeChild(keyboardFocusElement) + } + }; + this.enable = function() { + attachHandlers(); + attachKeyboardHandlers(); + enabled = true + }; + this.disable = function() { + detachHandlers(); + detachKeyboardHandlers(); + enabled = false + }; + this.isEnabled = function() { + return enabled + }; + this.userCurrentlyInteracting = function() { + return msPointerCount > 0 + }; + this.focusKeyboardElement = function() { + keyboardFocusElement.focus() + } } +"use strict"; + +function QueuedGestureHelper(elem) { + var eventQueue = []; + + function eventHandler(e) { + eventQueue.push(e) + } + var gestureHelper = new GestureHelper(elem, { + gestureStart: eventHandler, + gestureChange: eventHandler, + gestureEnd: eventHandler, + discreteZoom: eventHandler, + keyDown: eventHandler, + keyUp: eventHandler + }); + this.enable = function() { + gestureHelper.enable() + }; + this.disable = function() { + gestureHelper.disable() + }; + this.isEnabled = function() { + return gestureHelper.isEnabled() + }; + this.getQueuedEvents = function() { + var temp = eventQueue; + eventQueue = []; + return temp + }; + this.userCurrentlyInteracting = function() { + return gestureHelper.userCurrentlyInteracting() + }; + this.focusKeyboardElement = function() { + gestureHelper.focusKeyboardElement() + } } "use strict"; -function QueuedGestureHelper(elem) { -var eventQueue=[]; -function eventHandler(e) { -eventQueue.push(e) -} -var gestureHelper=new GestureHelper(elem, { -gestureStart: eventHandler, gestureChange: eventHandler, gestureEnd: eventHandler, discreteZoom: eventHandler, keyDown: eventHandler, keyUp: eventHandler -}); -this.enable = function() { -gestureHelper.enable() -}; -this.disable = function() { -gestureHelper.disable() -}; -this.isEnabled = function() { -return gestureHelper.isEnabled() -}; -this.getQueuedEvents = function() { -var temp=eventQueue; -eventQueue = []; -return temp -}; -this.userCurrentlyInteracting = function() { -return gestureHelper.userCurrentlyInteracting() -}; -this.focusKeyboardElement = function() { -gestureHelper.focusKeyboardElement() -} -} -"use strict"; -var requestAnimationFrame=window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || function(callback, element) { -window.setTimeout(callback, 1000 / 30) -}; -var RwwViewer=function(parentDiv, options) { -var self=this, -options=options || {}, -attributionChanged=options.attributionChanged || function(){}, -animating=true, -rootElement=document.createElement('div'), -eventCapturingElement=document.createElement('div'), -scene=new RMLStore, -showDebugMessages=true, -unprocessedEvents=[], -tileCacheId=options.tileCacheId || null; -self.mediaType = {}; -if (Config.PanoramaExists) { -self.mediaType['panorama'] = new Panorama -} -if (Config.StreetsidePanoramaExists) { -self.mediaType['streetsidePanorama'] = new StreetsidePanorama -} -if (Config.MapExists) { -self.mediaType['map'] = new Map -} -if (!parentDiv) { -throw'expected div argument'; -} -if (options.url) {} -else if (options.rml) { -scene.add(options.rml) -} -else { -throw'expected either url or rml property passed in the options object'; -} -var width=options.width || parentDiv.offsetWidth; -var height=options.height || parentDiv.offsetHeight; -Utils.css(parentDiv, {direction: 'ltr'}); -Utils.css(rootElement, { -width: width + 'px', height: height + 'px', position: 'absolute', overflow: 'hidden', backgroundColor: 'rgba(0,0,0,1)', direction: 'ltr', 'touch-action': 'none' -}); -Utils.css(eventCapturingElement, { -width: width + 'px', height: height + 'px', position: 'absolute', backgroundColor: 'rgba(0,0,0,0)', webkitTapHighlightColor: 'rgba(0,0,0,1)', tabIndex: 0, opacity: 0, 'touch-action': 'none' -}); -var renderer; -var near=0.00001; -var far=4; -var requiresCORS=false; -var requiresTileOverlap=false; -switch (options.renderer) { -case'css': -renderer = new RendererCSS3D(rootElement, width, height); -requiresTileOverlap = true; -break; -case'webgl': -renderer = new RendererWebGL(rootElement, width, height); -requiresCORS = true; -break; -case'flash': -renderer = new RendererFlash(rootElement, width, height); -requiresTileOverlap = true; -break; -default: -try { -renderer = new RendererWebGL(rootElement, width, height); -requiresCORS = true -} -catch(ex) { -try { -if (rootElement.parentNode) { -rootElement.parentNode.removeChild(rootElement) -} -requiresTileOverlap = true; -renderer = new RendererCSS3D(rootElement, width, height) -} -catch(ex2) { -if (rootElement.parentNode) { -rootElement.parentNode.removeChild(rootElement) -} -renderer = null -} -} -if (renderer == null) { -throw'Could not create CSS3 or webgl renderer' + options.renderer; -} -break -} -parentDiv.appendChild(rootElement); -parentDiv.appendChild(eventCapturingElement); -var gestureHelper=new QueuedGestureHelper(eventCapturingElement); -gestureHelper.enable(); -if (options.backgroundColor) { -renderer.setClearColor(options.backgroundColor) -} -var attributionControl=null; -if (!options.hideAttribution && options.rml.source && options.rml.source.attribution) { -attributionControl = new AttributionControl(parentDiv); -attributionControl.setAttribution(options.rml.source.attribution) -} -if (options.rml.source && options.rml.source.attribution) { -attributionChanged(options.rml.source.attribution) -} -var tileDownloadFailed=function(failCount, successCount) { -if (downloader.customFailFunc) -downloader.customFailFunc(); -if (options.tileDownloadFailed) -options.tileDownloadFailed(failCount, successCount); -if (Config.tileDownloadFailed) -Config.tileDownloadFailed() -}; -var downloader=new PriorityNetworkDownloader(requiresCORS, tileDownloadFailed, options.tileDownloadSucceeded, tileCacheId); -var viewport=new Viewport(width, height, near, far); -var camera=new PerspectiveCamera; -camera.setViewport(viewport); -var cameraParameters=options.cameraParameters || { -verticalFov: MathHelper.degreesToRadians(80), position: new Vector3(0, 0, 0), look: new Vector3(0, 0, -1), up: new Vector3(0, 1, 0), side: new Vector3(1, 0, 0) -}; -camera.setPosition(cameraParameters.position); -camera.setLook(cameraParameters.look); -camera.setUp(cameraParameters.up); -camera.setVerticalFov(cameraParameters.verticalFov); -var activeController; -objectCollection.loopByType(scene, function(k, entities) { -if (entities.length > 0 && self.mediaType[k] && self.mediaType[k].createController) { -activeController = self.mediaType[k].createController(entities, camera, cameraParameters); -if (self.mediaType[k].outputMultiLODTiles != null) { -Config.outputMultiLODTiles = self.mediaType[k].outputMultiLODTiles -} -if (self.mediaType[k].scanConvertSize != null) { -Config.scanConvertSize = self.mediaType[k].scanConvertSize -} -} -}); -var entityIdToRenderable={}; -var visibleSet={byType: {}}; -var animatingOut=[]; -var prevFrame=new Date; -var prevSmoothedFrame=new Date; -var smoothedFrameCount=0; -var smoothedFramerate=0; -var isCachedUrl=function(url) { -var state=downloader.getState(url); -return (state === TileDownloadState.ready) -}; -var hasBlockingDownload=false; -var blockingDownloadTargetCount=-1, -blockingDownloadSuccessCount=0, -blockingDownloadFailureCount=0, -blockingDownloadProgressCallback=null, -blockingDownloadFinishCallback=null; -var prefetchedTiles={}; -var updateFrame=function() { -if (hasBlockingDownload) { -blockingDownloadSuccessCount += downloader.completed.length; -downloader.update(); -blockingDownloadProgressCallback(blockingDownloadSuccessCount); -if (blockingDownloadSuccessCount + blockingDownloadFailureCount == blockingDownloadTargetCount) { -blockingDownloadFinishCallback(blockingDownloadSuccessCount, blockingDownloadFailureCount); -self._resetDownloadAll() -} -else { -if (animating) { -++frameCount; -requestAnimationFrame(updateFrame) -} -return -} -} -var i, -j, -k, -frustum, -entity, -pendingFetch=[], -loaded=[], -deltaVisibleSet={byType: {}}; -var networkUpdate={ -added: [], removed: [] -}; -for (i = 0; i < networkUpdate.removed.length; ++i) { -var obj=scene.byId[networkUpdate.removed[i]]; -deltaVisibleSet.byType[obj.type].removed = deltaVisibleSet.byType[obj.type].removed || []; -deltaVisibleSet.byType[obj.type].removed.push(obj.id) -} -; -camera = activeController.control(camera, gestureHelper.getQueuedEvents()); -var pose=camera.getPose(); -var toleranceInPixels=(self.prevCameraMoving) ? 0.1 : 1; -var userInteracting=gestureHelper.userCurrentlyInteracting(); -var cameraMoving=(self.prevPose != null && !self.prevPose.isFuzzyEqualTo(pose, toleranceInPixels)); -var userInteractingWaitTime=1000; -if (userInteracting) { -self.userInteractingTime = null -} -else if (self.prevUserInteracting) { -var now=(new Date).valueOf(); -if (self.userInteractingTime == null) { -self.userInteractingTime = now + userInteractingWaitTime -} -if (self.userInteractingTime > now) { -userInteracting = true -} -else { -self.userInteractingTime = null -} -} -var useLowerFidelity=userInteracting || cameraMoving; -var fidelityChanged=(useLowerFidelity !== self.prevUseLowerFidelity); -var doWorkThisFrame=fidelityChanged || useLowerFidelity || downloader.currentlyDownloading() || !self.prevPose.isFuzzyEqualTo(pose, 0.0001); -var doWorkWaitTime=500; -if (doWorkThisFrame) { -self.doWorkTime = null -} -else if (self.prevDoWorkThisFrame) { -var now=(new Date).valueOf(); -if (self.doWorkTime == null) { -self.doWorkTime = now + doWorkWaitTime -} -if (self.doWorkTime > now) { -doWorkThisFrame = true -} -else { -self.doWorkTime = null -} -} -self.prevPose = pose; -self.prevUserInteracting = userInteracting; -self.prevCameraMoving = cameraMoving; -self.prevUseLowerFidelity = useLowerFidelity; -self.prevDoWorkThisFrame = doWorkThisFrame; -if (doWorkThisFrame) { -objectCollection.loopByType(scene, function(k, entities) { -if (entities.length > 0 && self.mediaType[k] && self.mediaType[k].cull) { -visibleSet.byType[k] = visibleSet.byType[k] || []; -if (!visibleSet.byType[k].byId) { -visibleSet.byType[k].byId = {} -} -deltaVisibleSet.byType[k] = self.mediaType[k].cull(entities, camera, visibleSet.byType[k], isCachedUrl, useLowerFidelity, requiresTileOverlap) -} -}); -objectCollection.loopByType(deltaVisibleSet, function(k, entities) { -if (self.mediaType[k] && self.mediaType[k].fetch) { -self.mediaType[k].fetch(entities, downloader) -} -}); -var renderableToRemove=[]; -var renderableToAdd=[]; -var renderableEntityId=[]; -objectCollection.loopByType(deltaVisibleSet, function(k, entities) { -var i=0, -id, -generatedRenderable; -if (entities.removed) { -for (i = 0; i < entities.removed.length; ++i) { -var id=entities.removed[i].id; -renderableToRemove.push(entityIdToRenderable[id]) -} -} -if (entities.added && self.mediaType[k] && self.mediaType[k].generateRenderables) { -renderableToAdd = renderableToAdd.concat(self.mediaType[k].generateRenderables(entities.added, renderer)) -} -}); -var renderableId=renderer.addRenderable(renderableToAdd); -for (i = 0; i < renderableToAdd.length; ++i) { -entityIdToRenderable[renderableToAdd[i].entityId] = renderableId[i] -} -objectCollection.loopByType(deltaVisibleSet, function(k) { -if (self.mediaType[k] && self.mediaType[k].processDownloads) { -self.mediaType[k].processDownloads(downloader.completed, entityIdToRenderable, renderer) -} -}); -downloader.update(); -objectCollection.loopByType(deltaVisibleSet, function(k, entities) { -if (self.mediaType[k] && self.mediaType[k].updateRenderableStates) { -self.mediaType[k].updateRenderableStates(renderer) -} -}); -for (i = 0; i < renderableToRemove.length; ++i) { -for (var k in entityIdToRenderable) { -if (entityIdToRenderable[k] === renderableToRemove[i]) { -delete entityIdToRenderable[renderableToRemove[i]] -} -} -} -renderer.remove(renderableToRemove); -renderer.setViewProjectionMatrix(camera.getViewProjectionTransform()); -renderer.render(useLowerFidelity); -objectCollection.loopByType(deltaVisibleSet, function(k, entities) { -var i, -j, -element, -updatedSet=[]; -visibleSet.byType[k] = visibleSet.byType[k] || []; -visibleSet.byType[k] = visibleSet.byType[k].concat(entities.added); -for (j = 0; j < visibleSet.byType[k].length; ++j) { -var removed=false; -for (i = 0; i < entities.removed.length; ++i) { -if (visibleSet.byType[k][j].id == entities.removed[i].id) { -removed = true; -break -} -} -if (!removed) -updatedSet.push(visibleSet.byType[k][j]) -} -visibleSet.byType[k] = updatedSet; -visibleSet.byType[k].byId = {}; -for (i = 0; i < visibleSet.byType[k].length; ++i) { -element = visibleSet.byType[k][i]; -visibleSet.byType[k].byId[element.id] = element -} -}); -if (showDebugMessages) { -var debugText=document.getElementById('debugText'); -if (debugText) { -var numberOfRenderables=0; -for (var k in renderer._renderables) { -if (renderer._renderables.hasOwnProperty(k)) { -++numberOfRenderables -} -} -var now=new Date; -smoothedFrameCount++; -if ((now - prevSmoothedFrame) >= 500) { -smoothedFramerate = smoothedFrameCount * 2.0; -smoothedFrameCount = 0; -prevSmoothedFrame = now -} -var message=' frame count:' + frameCount + ' #renderables:' + numberOfRenderables + ' framerate:' + (1000 / (now - prevFrame)).toFixed(0) + ' smoothedFramerate:' + smoothedFramerate.toFixed(0); -debugText.innerHTML = message; -prevFrame = now -} -} -} -if (animating) { -++frameCount; -requestAnimationFrame(updateFrame) -} -}; -var frameCount=0; -requestAnimationFrame(updateFrame); -self.dispose = function() { -gestureHelper.disable(); -if (rootElement.parentNode) { -rootElement.parentNode.removeChild(rootElement) -} -if (eventCapturingElement.parentNode) { -eventCapturingElement.parentNode.removeChild(eventCapturingElement) -} -if (attributionControl) { -attributionControl.dispose() -} -animating = false -}; -self.getActiveCameraController = function() { -return activeController -}; -self.focusKeyboardElement = function() { -gestureHelper.focusKeyboardElement() -}; -self.setViewportSize = function(width, height) { -Utils.css(rootElement, { -width: width + 'px', height: height + 'px' -}); -Utils.css(eventCapturingElement, { -width: width + 'px', height: height + 'px' -}); -renderer.setViewportSize(width, height); -camera.setViewport(new Viewport(width, height, camera.getViewport().getNearDistance(), camera.getViewport().getFarDistance())); -if (activeController.setViewportSize) { -activeController.setViewportSize(width, height) -} -}; -self.getViewportSize = function() { -return new Vector2(camera.getViewport().getWidth(), camera.getViewport().getHeight()) -}; -self.getViewState = function() { -return { -verticalFov: camera.getVerticalFov(), position: camera.getPosition(), look: camera.getLook(), up: camera.getUp(), side: camera.getLook().cross(camera.getUp()) -} -}; -self.downloadAll = function(mediaTypeName, multiplierArray, progressCallback, finishCallback, atLowLod) { -hasBlockingDownload = true; -var multipliers=multiplierArray || [1.0]; -var cameraLookAndUps=[{ -look: new Vector3(0, 0, -1), up: new Vector3(0, 1, 0) -}, { -look: new Vector3(0, 0, 1), up: new Vector3(0, 1, 0) -}, { -look: new Vector3(0, -1, 0), up: new Vector3(0, 0, 1) -}, { -look: new Vector3(0, 1, 0), up: new Vector3(0, 0, 1) -}, { -look: new Vector3(-1, 0, 0), up: new Vector3(0, 1, 0) -}, { -look: new Vector3(1, 0, 0), up: new Vector3(0, 1, 0) -}]; -var faceNames=["front", "back", "bottom", "top", "left", "right"]; -var allTiles={}; -for (var m=0; m < multipliers.length; m++) { -var scale=Math.tan(MathHelper.degreesToRadians(90) * 0.5) / Math.tan(camera.getVerticalFov() * 0.5) * multipliers[m]; -var vp=new Viewport(Math.floor(viewport.getHeight() * scale), Math.floor(viewport.getHeight() * scale), near, far); -var cam=new PerspectiveCamera; -cam.setViewport(vp); -cam.setPosition(new Vector3(0, 0, 0)); -cam.setVerticalFov(MathHelper.degreesToRadians(90)); -var i, -j; -for (i = 0; i < cameraLookAndUps.length; i++) { -cam.setLook(cameraLookAndUps[i].look); -cam.setUp(cameraLookAndUps[i].up); -var visibleSet={byId: {}}; -var tiles=self.mediaType[mediaTypeName].cull(scene.byType[mediaTypeName], cam, visibleSet, isCachedUrl, atLowLod, requiresTileOverlap); -if (tiles.added.length) { -var newTiles=tiles.added; -newTiles.sort(function(a, b) { -return b.tileId.levelOfDetail - a.tileId.levelOfDetail -}); -var lod=newTiles[0].tileId.levelOfDetail; -for (j = 0; j < newTiles.length; j++) { -if (newTiles[j].tileId.levelOfDetail == lod) -allTiles[newTiles[j].id] = newTiles[j]; -else -break -} -} -} -} -blockingDownloadSuccessCount = blockingDownloadFailureCount = 0; -downloader.customFailFunc = function(failCount, successCount) { -blockingDownloadFailureCount++ -}; -var count=0; -for (var i in allTiles) { -downloader.downloadImage(allTiles[i].url, allTiles[i].priority, allTiles[i].id); -count++ -} -blockingDownloadTargetCount = count; -blockingDownloadProgressCallback = progressCallback; -blockingDownloadFinishCallback = finishCallback; -prefetchedTiles = allTiles; -return count -}; -self.cancelDownloadAll = function() { -for (var t in prefetchedTiles) { -if (!isCachedUrl(prefetchedTiles[t].url)) -downloader.cancel(prefetchedTiles[t].url) -} -self._resetDownloadAll() -}; -self._resetDownloadAll = function() { -blockingDownloadTargetCount = 0; -blockingDownloadSuccessCount = blockingDownloadFailureCount = 0; -hasBlockingDownload = false; -downloader.customFailFunc = null; -blockingDownloadProgressCallback = null; -blockingDownloadFinishCallback = null -} +var requestAnimationFrame = window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || function(callback, element) { + window.setTimeout(callback, 1000 / 30) +}; +var RwwViewer = function(parentDiv, options) { + var self = this, + options = options || {}, + attributionChanged = options.attributionChanged || function() {}, + animating = true, + rootElement = document.createElement('div'), + eventCapturingElement = document.createElement('div'), + scene = new RMLStore, + showDebugMessages = true, + unprocessedEvents = [], + tileCacheId = options.tileCacheId || null; + self.mediaType = {}; + if (Config.PanoramaExists) { + self.mediaType['panorama'] = new Panorama + } + if (Config.StreetsidePanoramaExists) { + self.mediaType['streetsidePanorama'] = new StreetsidePanorama + } + if (Config.MapExists) { + self.mediaType['map'] = new Map + } + if (!parentDiv) { + throw 'expected div argument'; + } + if (options.url) {} else if (options.rml) { + scene.add(options.rml) + } else { + throw 'expected either url or rml property passed in the options object'; + } + var width = options.width || parentDiv.offsetWidth; + var height = options.height || parentDiv.offsetHeight; + Utils.css(parentDiv, { direction: 'ltr' }); + Utils.css(rootElement, { + width: width + 'px', + height: height + 'px', + position: 'absolute', + overflow: 'hidden', + backgroundColor: 'rgba(0,0,0,1)', + direction: 'ltr', + 'touch-action': 'none' + }); + Utils.css(eventCapturingElement, { + width: width + 'px', + height: height + 'px', + position: 'absolute', + backgroundColor: 'rgba(0,0,0,0)', + webkitTapHighlightColor: 'rgba(0,0,0,1)', + tabIndex: 0, + opacity: 0, + 'touch-action': 'none' + }); + var renderer; + var near = 0.00001; + var far = 4; + var requiresCORS = false; + var requiresTileOverlap = false; + switch (options.renderer) { + case 'css': + renderer = new RendererCSS3D(rootElement, width, height); + requiresTileOverlap = true; + break; + case 'webgl': + renderer = new RendererWebGL(rootElement, width, height); + requiresCORS = true; + break; + case 'flash': + renderer = new RendererFlash(rootElement, width, height); + requiresTileOverlap = true; + break; + default: + try { + renderer = new RendererWebGL(rootElement, width, height); + requiresCORS = true + } catch (ex) { + try { + if (rootElement.parentNode) { + rootElement.parentNode.removeChild(rootElement) + } + requiresTileOverlap = true; + renderer = new RendererCSS3D(rootElement, width, height) + } catch (ex2) { + if (rootElement.parentNode) { + rootElement.parentNode.removeChild(rootElement) + } + renderer = null + } + } + if (renderer == null) { + throw 'Could not create CSS3 or webgl renderer' + options.renderer; + } + break + } + parentDiv.appendChild(rootElement); + parentDiv.appendChild(eventCapturingElement); + var gestureHelper = new QueuedGestureHelper(eventCapturingElement); + gestureHelper.enable(); + if (options.backgroundColor) { + renderer.setClearColor(options.backgroundColor) + } + var attributionControl = null; + if (!options.hideAttribution && options.rml.source && options.rml.source.attribution) { + attributionControl = new AttributionControl(parentDiv); + attributionControl.setAttribution(options.rml.source.attribution) + } + if (options.rml.source && options.rml.source.attribution) { + attributionChanged(options.rml.source.attribution) + } + var tileDownloadFailed = function(failCount, successCount) { + if (downloader.customFailFunc) + downloader.customFailFunc(); + if (options.tileDownloadFailed) + options.tileDownloadFailed(failCount, successCount); + if (Config.tileDownloadFailed) + Config.tileDownloadFailed() + }; + var downloader = new PriorityNetworkDownloader(requiresCORS, tileDownloadFailed, options.tileDownloadSucceeded, tileCacheId); + var viewport = new Viewport(width, height, near, far); + var camera = new PerspectiveCamera; + camera.setViewport(viewport); + var cameraParameters = options.cameraParameters || { + verticalFov: MathHelper.degreesToRadians(80), + position: new Vector3(0, 0, 0), + look: new Vector3(0, 0, -1), + up: new Vector3(0, 1, 0), + side: new Vector3(1, 0, 0) + }; + camera.setPosition(cameraParameters.position); + camera.setLook(cameraParameters.look); + camera.setUp(cameraParameters.up); + camera.setVerticalFov(cameraParameters.verticalFov); + var activeController; + objectCollection.loopByType(scene, function(k, entities) { + if (entities.length > 0 && self.mediaType[k] && self.mediaType[k].createController) { + activeController = self.mediaType[k].createController(entities, camera, cameraParameters); + if (self.mediaType[k].outputMultiLODTiles != null) { + Config.outputMultiLODTiles = self.mediaType[k].outputMultiLODTiles + } + if (self.mediaType[k].scanConvertSize != null) { + Config.scanConvertSize = self.mediaType[k].scanConvertSize + } + } + }); + var entityIdToRenderable = {}; + var visibleSet = { byType: {} }; + var animatingOut = []; + var prevFrame = new Date; + var prevSmoothedFrame = new Date; + var smoothedFrameCount = 0; + var smoothedFramerate = 0; + var isCachedUrl = function(url) { + var state = downloader.getState(url); + return (state === TileDownloadState.ready) + }; + var hasBlockingDownload = false; + var blockingDownloadTargetCount = -1, + blockingDownloadSuccessCount = 0, + blockingDownloadFailureCount = 0, + blockingDownloadProgressCallback = null, + blockingDownloadFinishCallback = null; + var prefetchedTiles = {}; + var updateFrame = function() { + if (hasBlockingDownload) { + blockingDownloadSuccessCount += downloader.completed.length; + downloader.update(); + blockingDownloadProgressCallback(blockingDownloadSuccessCount); + if (blockingDownloadSuccessCount + blockingDownloadFailureCount == blockingDownloadTargetCount) { + blockingDownloadFinishCallback(blockingDownloadSuccessCount, blockingDownloadFailureCount); + self._resetDownloadAll() + } else { + if (animating) { + ++frameCount; + requestAnimationFrame(updateFrame) + } + return + } + } + var i, + j, + k, + frustum, + entity, + pendingFetch = [], + loaded = [], + deltaVisibleSet = { byType: {} }; + var networkUpdate = { + added: [], + removed: [] + }; + for (i = 0; i < networkUpdate.removed.length; ++i) { + var obj = scene.byId[networkUpdate.removed[i]]; + deltaVisibleSet.byType[obj.type].removed = deltaVisibleSet.byType[obj.type].removed || []; + deltaVisibleSet.byType[obj.type].removed.push(obj.id) + }; + camera = activeController.control(camera, gestureHelper.getQueuedEvents()); + var pose = camera.getPose(); + var toleranceInPixels = (self.prevCameraMoving) ? 0.1 : 1; + var userInteracting = gestureHelper.userCurrentlyInteracting(); + var cameraMoving = (self.prevPose != null && !self.prevPose.isFuzzyEqualTo(pose, toleranceInPixels)); + var userInteractingWaitTime = 1000; + if (userInteracting) { + self.userInteractingTime = null + } else if (self.prevUserInteracting) { + var now = (new Date).valueOf(); + if (self.userInteractingTime == null) { + self.userInteractingTime = now + userInteractingWaitTime + } + if (self.userInteractingTime > now) { + userInteracting = true + } else { + self.userInteractingTime = null + } + } + var useLowerFidelity = userInteracting || cameraMoving; + var fidelityChanged = (useLowerFidelity !== self.prevUseLowerFidelity); + var doWorkThisFrame = fidelityChanged || useLowerFidelity || downloader.currentlyDownloading() || !self.prevPose.isFuzzyEqualTo(pose, 0.0001); + var doWorkWaitTime = 500; + if (doWorkThisFrame) { + self.doWorkTime = null + } else if (self.prevDoWorkThisFrame) { + var now = (new Date).valueOf(); + if (self.doWorkTime == null) { + self.doWorkTime = now + doWorkWaitTime + } + if (self.doWorkTime > now) { + doWorkThisFrame = true + } else { + self.doWorkTime = null + } + } + self.prevPose = pose; + self.prevUserInteracting = userInteracting; + self.prevCameraMoving = cameraMoving; + self.prevUseLowerFidelity = useLowerFidelity; + self.prevDoWorkThisFrame = doWorkThisFrame; + if (doWorkThisFrame) { + objectCollection.loopByType(scene, function(k, entities) { + if (entities.length > 0 && self.mediaType[k] && self.mediaType[k].cull) { + visibleSet.byType[k] = visibleSet.byType[k] || []; + if (!visibleSet.byType[k].byId) { + visibleSet.byType[k].byId = {} + } + deltaVisibleSet.byType[k] = self.mediaType[k].cull(entities, camera, visibleSet.byType[k], isCachedUrl, useLowerFidelity, requiresTileOverlap) + } + }); + objectCollection.loopByType(deltaVisibleSet, function(k, entities) { + if (self.mediaType[k] && self.mediaType[k].fetch) { + self.mediaType[k].fetch(entities, downloader) + } + }); + var renderableToRemove = []; + var renderableToAdd = []; + var renderableEntityId = []; + objectCollection.loopByType(deltaVisibleSet, function(k, entities) { + var i = 0, + id, + generatedRenderable; + if (entities.removed) { + for (i = 0; i < entities.removed.length; ++i) { + var id = entities.removed[i].id; + renderableToRemove.push(entityIdToRenderable[id]) + } + } + if (entities.added && self.mediaType[k] && self.mediaType[k].generateRenderables) { + renderableToAdd = renderableToAdd.concat(self.mediaType[k].generateRenderables(entities.added, renderer)) + } + }); + var renderableId = renderer.addRenderable(renderableToAdd); + for (i = 0; i < renderableToAdd.length; ++i) { + entityIdToRenderable[renderableToAdd[i].entityId] = renderableId[i] + } + objectCollection.loopByType(deltaVisibleSet, function(k) { + if (self.mediaType[k] && self.mediaType[k].processDownloads) { + self.mediaType[k].processDownloads(downloader.completed, entityIdToRenderable, renderer) + } + }); + downloader.update(); + objectCollection.loopByType(deltaVisibleSet, function(k, entities) { + if (self.mediaType[k] && self.mediaType[k].updateRenderableStates) { + self.mediaType[k].updateRenderableStates(renderer) + } + }); + for (i = 0; i < renderableToRemove.length; ++i) { + for (var k in entityIdToRenderable) { + if (entityIdToRenderable[k] === renderableToRemove[i]) { + delete entityIdToRenderable[renderableToRemove[i]] + } + } + } + renderer.remove(renderableToRemove); + renderer.setViewProjectionMatrix(camera.getViewProjectionTransform()); + renderer.render(useLowerFidelity); + objectCollection.loopByType(deltaVisibleSet, function(k, entities) { + var i, + j, + element, + updatedSet = []; + visibleSet.byType[k] = visibleSet.byType[k] || []; + visibleSet.byType[k] = visibleSet.byType[k].concat(entities.added); + for (j = 0; j < visibleSet.byType[k].length; ++j) { + var removed = false; + for (i = 0; i < entities.removed.length; ++i) { + if (visibleSet.byType[k][j].id == entities.removed[i].id) { + removed = true; + break + } + } + if (!removed) + updatedSet.push(visibleSet.byType[k][j]) + } + visibleSet.byType[k] = updatedSet; + visibleSet.byType[k].byId = {}; + for (i = 0; i < visibleSet.byType[k].length; ++i) { + element = visibleSet.byType[k][i]; + visibleSet.byType[k].byId[element.id] = element + } + }); + if (showDebugMessages) { + var debugText = document.getElementById('debugText'); + if (debugText) { + var numberOfRenderables = 0; + for (var k in renderer._renderables) { + if (renderer._renderables.hasOwnProperty(k)) { + ++numberOfRenderables + } + } + var now = new Date; + smoothedFrameCount++; + if ((now - prevSmoothedFrame) >= 500) { + smoothedFramerate = smoothedFrameCount * 2.0; + smoothedFrameCount = 0; + prevSmoothedFrame = now + } + var message = ' frame count:' + frameCount + ' #renderables:' + numberOfRenderables + ' framerate:' + (1000 / (now - prevFrame)).toFixed(0) + ' smoothedFramerate:' + smoothedFramerate.toFixed(0); + debugText.innerHTML = message; + prevFrame = now + } + } + } + if (animating) { + ++frameCount; + requestAnimationFrame(updateFrame) + } + }; + var frameCount = 0; + requestAnimationFrame(updateFrame); + self.dispose = function() { + gestureHelper.disable(); + if (rootElement.parentNode) { + rootElement.parentNode.removeChild(rootElement) + } + if (eventCapturingElement.parentNode) { + eventCapturingElement.parentNode.removeChild(eventCapturingElement) + } + if (attributionControl) { + attributionControl.dispose() + } + animating = false + }; + self.getActiveCameraController = function() { + return activeController + }; + self.focusKeyboardElement = function() { + gestureHelper.focusKeyboardElement() + }; + self.setViewportSize = function(width, height) { + Utils.css(rootElement, { + width: width + 'px', + height: height + 'px' + }); + Utils.css(eventCapturingElement, { + width: width + 'px', + height: height + 'px' + }); + renderer.setViewportSize(width, height); + camera.setViewport(new Viewport(width, height, camera.getViewport().getNearDistance(), camera.getViewport().getFarDistance())); + if (activeController.setViewportSize) { + activeController.setViewportSize(width, height) + } + }; + self.getViewportSize = function() { + return new Vector2(camera.getViewport().getWidth(), camera.getViewport().getHeight()) + }; + self.getViewState = function() { + return { + verticalFov: camera.getVerticalFov(), + position: camera.getPosition(), + look: camera.getLook(), + up: camera.getUp(), + side: camera.getLook().cross(camera.getUp()) + } + }; + self.downloadAll = function(mediaTypeName, multiplierArray, progressCallback, finishCallback, atLowLod) { + hasBlockingDownload = true; + var multipliers = multiplierArray || [1.0]; + var cameraLookAndUps = [{ + look: new Vector3(0, 0, -1), + up: new Vector3(0, 1, 0) + }, { + look: new Vector3(0, 0, 1), + up: new Vector3(0, 1, 0) + }, { + look: new Vector3(0, -1, 0), + up: new Vector3(0, 0, 1) + }, { + look: new Vector3(0, 1, 0), + up: new Vector3(0, 0, 1) + }, { + look: new Vector3(-1, 0, 0), + up: new Vector3(0, 1, 0) + }, { + look: new Vector3(1, 0, 0), + up: new Vector3(0, 1, 0) + }]; + var faceNames = ["front", "back", "bottom", "top", "left", "right"]; + var allTiles = {}; + for (var m = 0; m < multipliers.length; m++) { + var scale = Math.tan(MathHelper.degreesToRadians(90) * 0.5) / Math.tan(camera.getVerticalFov() * 0.5) * multipliers[m]; + var vp = new Viewport(Math.floor(viewport.getHeight() * scale), Math.floor(viewport.getHeight() * scale), near, far); + var cam = new PerspectiveCamera; + cam.setViewport(vp); + cam.setPosition(new Vector3(0, 0, 0)); + cam.setVerticalFov(MathHelper.degreesToRadians(90)); + var i, + j; + for (i = 0; i < cameraLookAndUps.length; i++) { + cam.setLook(cameraLookAndUps[i].look); + cam.setUp(cameraLookAndUps[i].up); + var visibleSet = { byId: {} }; + var tiles = self.mediaType[mediaTypeName].cull(scene.byType[mediaTypeName], cam, visibleSet, isCachedUrl, atLowLod, requiresTileOverlap); + if (tiles.added.length) { + var newTiles = tiles.added; + newTiles.sort(function(a, b) { + return b.tileId.levelOfDetail - a.tileId.levelOfDetail + }); + var lod = newTiles[0].tileId.levelOfDetail; + for (j = 0; j < newTiles.length; j++) { + if (newTiles[j].tileId.levelOfDetail == lod) + allTiles[newTiles[j].id] = newTiles[j]; + else + break + } + } + } + } + blockingDownloadSuccessCount = blockingDownloadFailureCount = 0; + downloader.customFailFunc = function(failCount, successCount) { + blockingDownloadFailureCount++ + }; + var count = 0; + for (var i in allTiles) { + downloader.downloadImage(allTiles[i].url, allTiles[i].priority, allTiles[i].id); + count++ + } + blockingDownloadTargetCount = count; + blockingDownloadProgressCallback = progressCallback; + blockingDownloadFinishCallback = finishCallback; + prefetchedTiles = allTiles; + return count + }; + self.cancelDownloadAll = function() { + for (var t in prefetchedTiles) { + if (!isCachedUrl(prefetchedTiles[t].url)) + downloader.cancel(prefetchedTiles[t].url) + } + self._resetDownloadAll() + }; + self._resetDownloadAll = function() { + blockingDownloadTargetCount = 0; + blockingDownloadSuccessCount = blockingDownloadFailureCount = 0; + hasBlockingDownload = false; + downloader.customFailFunc = null; + blockingDownloadProgressCallback = null; + blockingDownloadFinishCallback = null + } } \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/about.css b/packages/microsoft.skypeapp/controls/about.css index dd713b29..68a015f4 100644 --- a/packages/microsoft.skypeapp/controls/about.css +++ b/packages/microsoft.skypeapp/controls/about.css @@ -1 +1 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */#aboutPanelContainer div.win-header{background-color:#00AFF0}#aboutPanelContainer div.win-header span.logo{position:absolute;right:40px;width:30px;height:30px}#aboutPanelContainer div.win-header .logo:after{content:"\E001";font-family:"Skype UI Symbol";font-size:30px;font-weight:bold;line-height:normal}#aboutPanelContainer div.about div.appName{font-weight:bold;margin-top:16px}#aboutPanelContainer div.about div.version{font-weight:bold}#aboutPanelContainer div.about div.links a{display:block;margin-top:20px}#aboutPanelContainer div.about div.copyright{margin-top:80px}#aboutPanelContainer div.about div.legal-text{margin-top:20px}#aboutPanelContainer div.about div.legal-text-block{margin-top:45px}#aboutPanelContainer div.about .third-party{margin-bottom:40px}body.RTL #aboutPanelContainer div.win-header span.logo{right:auto;left:40px}body.RTL #aboutPanelContainer div.win-header div.win-label{padding-right:40px;padding-left:30px}.win-wide.win-settingsflyout{width:346px}.win-wide.win-settingsflyout .win-header{min-height:48px;height:auto}.win-wide.win-settingsflyout .win-header .win-label{padding-bottom:10px;padding-right:40px;word-break:break-all} +/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */#aboutPanelContainer div.win-header{background-color:#00AFF0}#aboutPanelContainer div.win-header span.logo{position:absolute;right:40px;width:30px;height:30px}#aboutPanelContainer div.win-header .logo:after{content:"\E001";font-family:"Skype UI Symbol" !important;font-size:30px;font-weight:bold;line-height:normal}#aboutPanelContainer div.about div.appName{font-weight:bold;margin-top:16px}#aboutPanelContainer div.about div.version{font-weight:bold}#aboutPanelContainer div.about div.links a{display:block;margin-top:20px}#aboutPanelContainer div.about div.copyright{margin-top:80px}#aboutPanelContainer div.about div.legal-text{margin-top:20px}#aboutPanelContainer div.about div.legal-text-block{margin-top:45px}#aboutPanelContainer div.about .third-party{margin-bottom:40px}body.RTL #aboutPanelContainer div.win-header span.logo{right:auto;left:40px}body.RTL #aboutPanelContainer div.win-header div.win-label{padding-right:40px;padding-left:30px}.win-wide.win-settingsflyout{width:346px}.win-wide.win-settingsflyout .win-header{min-height:48px;height:auto}.win-wide.win-settingsflyout .win-header .win-label{padding-bottom:10px;padding-right:40px;word-break:break-all} diff --git a/packages/microsoft.skypeapp/controls/appBar.css b/packages/microsoft.skypeapp/controls/appBar.css index 095ed88d..86600c94 100644 --- a/packages/microsoft.skypeapp/controls/appBar.css +++ b/packages/microsoft.skypeapp/controls/appBar.css @@ -41,7 +41,7 @@ #appBar .win-commandimage { color: #fff; - font-family: "Skype UI Symbol"; + font-family: "Skype UI Symbol" !important; font-size: 40px; line-height: normal; text-align: center @@ -159,7 +159,7 @@ body.RTL #skypeAppBar div.appBarConversationSwitcher div.recentsContainer.OVERLI } #skypeAppBar .appBarConversationSwitcher div.recentsContainer div.appBarLogo .icon::before { - font-family: "Skype UI Symbol"; + font-family: "Skype UI Symbol" !important; font-weight: bold; content: "\E001"; font-size: 40px; @@ -175,7 +175,7 @@ body.RTL #skypeAppBar div.appBarConversationSwitcher div.recentsContainer.OVERLI } #skypeAppBar div.appBarConversationSwitcher div.recentsContainer div.appBarRecentsLink button.icon::before { - font-family: "Skype UI Symbol"; + font-family: "Skype UI Symbol" !important; font-weight: bold; color: #FFF; font-size: 24px; @@ -239,7 +239,7 @@ body.RTL #skypeAppBar .appBarConversationSwitcher div.recentsContainer div.appBa } #appBar #searchForContact .win-commandimage::after { - font-family: "Skype UI Symbol"; + font-family: "Skype UI Symbol" !important; font-weight: bold; font-size: 16.2pt; content: "\E419"; @@ -255,7 +255,7 @@ body.RTL #appBar #searchForContact .win-commandimage::after { #appBar #skypeBar_favourite .win-commandimage { color: #fff; - font-family: "Skype UI Symbol"; + font-family: "Skype UI Symbol" !important; font-weight: bold } diff --git a/packages/microsoft.skypeapp/controls/callNotifications.css b/packages/microsoft.skypeapp/controls/callNotifications.css index 5c60c9b5..1605855f 100644 --- a/packages/microsoft.skypeapp/controls/callNotifications.css +++ b/packages/microsoft.skypeapp/controls/callNotifications.css @@ -1 +1,241 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.callNotifications div.ongoingNotification:not(.ACTIVE),div.callNotifications div.multipleOngoingNotification:not(.ACTIVE){display:none}div.callNotifications div.notificationWrapper.ongoing{position:absolute;right:0px;height:50px;overflow:visible;display:-ms-grid}body.RTL div.callNotifications div.notificationWrapper.ongoing{right:auto;left:0px}div.callNotifications div.notificationWrapper.ongoing button{height:50px;background-color:rgba(0,0,0,0.85)}div.callNotifications div.notificationWrapper.ongoing button:hover{background-color:#66CFF6;color:#000}div.callNotifications div.notificationWrapper.ongoing button.notification{display:-ms-grid;-ms-grid-column:1;-ms-grid-columns:60px 130px 1fr;-ms-grid-rows:50px;width:300px}@media only screen and (max-width: 400px){div.callNotifications div.notificationWrapper.ongoing button.notification{width:220px;-ms-grid-columns:150px 70px}}body.RTL div.callNotifications div.notificationWrapper.ongoing button.notification{right:auto;left:0}div.callNotifications div.notificationWrapper.ongoing button.notification div.avatar{-ms-grid-column:1;-ms-grid-row:1;-ms-grid-column-align:start;-ms-grid-row-align:center;width:50px;height:50px}@media only screen and (max-width: 400px){div.callNotifications div.notificationWrapper.ongoing button.notification div.avatar{display:none !important}}div.callNotifications div.notificationWrapper.ongoing button.notification div.name{-ms-grid-column:2;-ms-grid-row:1;-ms-grid-row-align:center;position:relative;top:-1px;color:#fff;letter-spacing:0px;font-weight:300;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media only screen and (max-width: 400px){div.callNotifications div.notificationWrapper.ongoing button.notification div.name{-ms-grid-column:1;padding-left:20px;text-align:left}}div.callNotifications div.notificationWrapper.ongoing button.notification div.status{-ms-grid-column:3;-ms-grid-row:1;-ms-grid-row-align:center;position:relative;top:-1px;color:#fff;text-align:right;margin-right:10px;white-space:nowrap}@media only screen and (max-width: 400px){div.callNotifications div.notificationWrapper.ongoing button.notification div.status{-ms-grid-column:2}}div.callNotifications div.notificationWrapper.ongoing button.notification div.status span.icon{display:inline-block;margin-left:10px;position:relative;top:2px;font-family:"Skype UI Symbol";font-weight:bold}div.callNotifications div.notificationWrapper.ongoing button.notification div.status.ONHOLD span.icon:before{content:"\E40f";font-size:23px}div.callNotifications div.notificationWrapper.ongoing button.notification div.status.MUTED span.icon:before{content:"\E11A";font-size:23px}div.callNotifications div.notificationWrapper.ongoing button.notification div.status span.text{display:inline-block;min-width:40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:90px;vertical-align:middle}body.RTL div.callNotifications div.notificationWrapper.ongoing button.notification div.status{text-align:left}@media only screen and (max-width: 400px){div.callNotifications div.notificationWrapper.ongoing button.notification div.status.ONHOLD span.text{display:none}}div.callNotifications div.notificationWrapper.ongoing button.hangup,div.callNotifications div.notificationWrapper.ongoing button.mute{font-family:"Skype UI Symbol";font-size:50px;line-height:normal;text-align:center;z-index:100;display:inline-block;width:50px}div.callNotifications div.notificationWrapper.ongoing button.hangup{-ms-grid-column:3;color:#F00}div.callNotifications div.notificationWrapper.ongoing button.mute{-ms-grid-column:2;color:#FFF}div.callNotifications div.notificationWrapper.ongoing button.mute[disabled=disabled]{color:#4e4e4e}div.callNotifications div.notificationWrapper.ongoing button.mute[disabled=disabled]:hover{background-color:rgba(0,0,0,0.85)}div.callNotifications div.notificationWrapper.ongoing button.mute.MUTED:before{content:"\E11A"}div.callNotifications div.multipleOngoingNotification div.notificationWrapper.ongoing button.notification{position:absolute;right:0px;display:-ms-grid;-ms-grid-columns:1fr;-ms-grid-rows:50px;height:50px;width:320px;background-color:rgba(0,0,0,0.85)}body.RTL div.callNotifications div.multipleOngoingNotification div.notificationWrapper.ongoing button.notification{right:auto}div.callNotifications div.multipleOngoingNotification div.notificationWrapper.ongoing button.notification div.status{-ms-grid-column:1;-ms-grid-row:1;-ms-grid-row-align:center;text-align:left}body.RTL div.callNotifications div.multipleOngoingNotification div.notificationWrapper.ongoing button.notification div.status{text-align:right}div.callNotifications div.multipleOngoingNotification div.notificationWrapper.ongoing button.notification div.status span.text{color:#fff;margin-left:10px}div.callNotifications div.multipleOngoingNotification div.notificationWrapper.ongoing button.notification div.status span.icon{display:inline-block;margin-right:0px;font-size:18pt;top:0px}div.callNotifications div.multipleOngoingNotification div.notificationWrapper.ongoing button.notification div.status span.icon:before{content:"\E100"}@media screen and (-ms-high-contrast: active){div.callNotifications div.notificationWrapper button.hangup,div.callNotifications div.notificationWrapper button.notification,div.callNotifications div.notificationWrapper button.mute{border:1px solid WindowText}div.callNotifications div.notificationWrapper button.mute{border-width:1px 0}div.callNotifications button.notification div.avatarArea div.avatar{-ms-high-contrast-adjust:none}}@media screen and (-ms-view-state: snapped) and (-ms-high-contrast: active){div.callNotifications div.notificationWrapper button.notification{border:none}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.callNotifications div.ongoingNotification:not(.ACTIVE), +div.callNotifications div.multipleOngoingNotification:not(.ACTIVE) { + display: none +} + +div.callNotifications div.notificationWrapper.ongoing { + position: absolute; + right: 0px; + height: 50px; + overflow: visible; + display: -ms-grid +} + +body.RTL div.callNotifications div.notificationWrapper.ongoing { + right: auto; + left: 0px +} + +div.callNotifications div.notificationWrapper.ongoing button { + height: 50px; + background-color: rgba(0, 0, 0, 0.85) +} + +div.callNotifications div.notificationWrapper.ongoing button:hover { + background-color: #66CFF6; + color: #000 +} + +div.callNotifications div.notificationWrapper.ongoing button.notification { + display: -ms-grid; + -ms-grid-column: 1; + -ms-grid-columns: 60px 130px 1fr; + -ms-grid-rows: 50px; + width: 300px +} + +@media only screen and (max-width: 400px) { + div.callNotifications div.notificationWrapper.ongoing button.notification { + width: 220px; + -ms-grid-columns: 150px 70px + } +} + +body.RTL div.callNotifications div.notificationWrapper.ongoing button.notification { + right: auto; + left: 0 +} + +div.callNotifications div.notificationWrapper.ongoing button.notification div.avatar { + -ms-grid-column: 1; + -ms-grid-row: 1; + -ms-grid-column-align: start; + -ms-grid-row-align: center; + width: 50px; + height: 50px +} + +@media only screen and (max-width: 400px) { + div.callNotifications div.notificationWrapper.ongoing button.notification div.avatar { + display: none !important + } +} + +div.callNotifications div.notificationWrapper.ongoing button.notification div.name { + -ms-grid-column: 2; + -ms-grid-row: 1; + -ms-grid-row-align: center; + position: relative; + top: -1px; + color: #fff; + letter-spacing: 0px; + font-weight: 300; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis +} + +@media only screen and (max-width: 400px) { + div.callNotifications div.notificationWrapper.ongoing button.notification div.name { + -ms-grid-column: 1; + padding-left: 20px; + text-align: left + } +} + +div.callNotifications div.notificationWrapper.ongoing button.notification div.status { + -ms-grid-column: 3; + -ms-grid-row: 1; + -ms-grid-row-align: center; + position: relative; + top: -1px; + color: #fff; + text-align: right; + margin-right: 10px; + white-space: nowrap +} + +@media only screen and (max-width: 400px) { + div.callNotifications div.notificationWrapper.ongoing button.notification div.status { + -ms-grid-column: 2 + } +} + +div.callNotifications div.notificationWrapper.ongoing button.notification div.status span.icon { + display: inline-block; + margin-left: 10px; + position: relative; + top: 2px; + font-family: "Skype UI Symbol" !important; + font-weight: bold +} + +div.callNotifications div.notificationWrapper.ongoing button.notification div.status.ONHOLD span.icon:before { + content: "\E40f"; + font-size: 23px +} + +div.callNotifications div.notificationWrapper.ongoing button.notification div.status.MUTED span.icon:before { + content: "\E11A"; + font-size: 23px +} + +div.callNotifications div.notificationWrapper.ongoing button.notification div.status span.text { + display: inline-block; + min-width: 40px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 90px; + vertical-align: middle +} + +body.RTL div.callNotifications div.notificationWrapper.ongoing button.notification div.status { + text-align: left +} + +@media only screen and (max-width: 400px) { + div.callNotifications div.notificationWrapper.ongoing button.notification div.status.ONHOLD span.text { + display: none + } +} + +div.callNotifications div.notificationWrapper.ongoing button.hangup, +div.callNotifications div.notificationWrapper.ongoing button.mute { + font-family: "Skype UI Symbol" !important; + font-size: 50px; + line-height: normal; + text-align: center; + z-index: 100; + display: inline-block; + width: 50px +} + +div.callNotifications div.notificationWrapper.ongoing button.hangup { + -ms-grid-column: 3; + color: #F00 +} + +div.callNotifications div.notificationWrapper.ongoing button.mute { + -ms-grid-column: 2; + color: #FFF +} + +div.callNotifications div.notificationWrapper.ongoing button.mute[disabled=disabled] { + color: #4e4e4e +} + +div.callNotifications div.notificationWrapper.ongoing button.mute[disabled=disabled]:hover { + background-color: rgba(0, 0, 0, 0.85) +} + +div.callNotifications div.notificationWrapper.ongoing button.mute.MUTED:before { + content: "\E11A" +} + +div.callNotifications div.multipleOngoingNotification div.notificationWrapper.ongoing button.notification { + position: absolute; + right: 0px; + display: -ms-grid; + -ms-grid-columns: 1fr; + -ms-grid-rows: 50px; + height: 50px; + width: 320px; + background-color: rgba(0, 0, 0, 0.85) +} + +body.RTL div.callNotifications div.multipleOngoingNotification div.notificationWrapper.ongoing button.notification { + right: auto +} + +div.callNotifications div.multipleOngoingNotification div.notificationWrapper.ongoing button.notification div.status { + -ms-grid-column: 1; + -ms-grid-row: 1; + -ms-grid-row-align: center; + text-align: left +} + +body.RTL div.callNotifications div.multipleOngoingNotification div.notificationWrapper.ongoing button.notification div.status { + text-align: right +} + +div.callNotifications div.multipleOngoingNotification div.notificationWrapper.ongoing button.notification div.status span.text { + color: #fff; + margin-left: 10px +} + +div.callNotifications div.multipleOngoingNotification div.notificationWrapper.ongoing button.notification div.status span.icon { + display: inline-block; + margin-right: 0px; + font-size: 18pt; + top: 0px +} + +div.callNotifications div.multipleOngoingNotification div.notificationWrapper.ongoing button.notification div.status span.icon:before { + content: "\E100" +} + +@media screen and (-ms-high-contrast: active) { + div.callNotifications div.notificationWrapper button.hangup, + div.callNotifications div.notificationWrapper button.notification, + div.callNotifications div.notificationWrapper button.mute { + border: 1px solid WindowText + } + div.callNotifications div.notificationWrapper button.mute { + border-width: 1px 0 + } + div.callNotifications button.notification div.avatarArea div.avatar { + -ms-high-contrast-adjust: none + } +} + +@media screen and (-ms-view-state: snapped) and (-ms-high-contrast: active) { + div.callNotifications div.notificationWrapper button.notification { + border: none + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/conversation/callStatus.css b/packages/microsoft.skypeapp/controls/conversation/callStatus.css index e26e28a4..f73b67f5 100644 --- a/packages/microsoft.skypeapp/controls/conversation/callStatus.css +++ b/packages/microsoft.skypeapp/controls/conversation/callStatus.css @@ -1 +1,88 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.callStatusWrapper{display:-ms-grid;-ms-grid-columns:100%}div.callStatusWrapper h1.name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;-ms-grid-row:1}@media screen and (min-aspect-ratio: 1 / 1){.CHATOPENINLIVE:not(.PRELIVE) div.callStatusWrapper h1.name{max-width:calc(100% - 320px)}}@media screen and (max-aspect-ratio: 1 / 1){div.callStatusWrapper h1.name{margin-right:0}}@media screen and (-ms-high-contrast: active){div.callStatusWrapper h1.name{background-color:Window}}div.callStatusWrapper div.details{-ms-grid-row:2;display:inline-block;margin-top:12px;pointer-events:all}div.callStatusWrapper div.details span.numberOfParticipants{display:none;margin-right:20px}div.callStatusWrapper div.details span.numberOfParticipants:hover{color:#66cff6}body.RTL div.callStatusWrapper div.details span.numberOfParticipants{margin-left:20px;margin-right:0}div.callStatusWrapper div.details span.numberOfParticipants::after{padding-left:5px;font-family:"Skype UI Symbol";font-weight:bold;content:"\E421"}body.RTL div.callStatusWrapper div.details span.numberOfParticipants::after{content:"\E420";padding-left:0;padding-right:5px}@media screen and (-ms-high-contrast: active){div.callStatusWrapper div.details span.numberOfParticipants{color:-ms-hotlight}div.callStatusWrapper div.details span.numberOfParticipants:hover{color:Highlight}}div.callStatusWrapper div.details.NUMBEROFPARTVISIBLE span.numberOfParticipants{display:inline-block}@media screen and (-ms-high-contrast: active){div.callStatusWrapper div.details{background-color:Window}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.callStatusWrapper { + display: -ms-grid; + -ms-grid-columns: 100% +} + +div.callStatusWrapper h1.name { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: inline-block; + -ms-grid-row: 1 +} + +@media screen and (min-aspect-ratio: 1 / 1) { + .CHATOPENINLIVE:not(.PRELIVE) div.callStatusWrapper h1.name { + max-width: calc(100% - 320px) + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.callStatusWrapper h1.name { + margin-right: 0 + } +} + +@media screen and (-ms-high-contrast: active) { + div.callStatusWrapper h1.name { + background-color: Window + } +} + +div.callStatusWrapper div.details { + -ms-grid-row: 2; + display: inline-block; + margin-top: 12px; + pointer-events: all +} + +div.callStatusWrapper div.details span.numberOfParticipants { + display: none; + margin-right: 20px +} + +div.callStatusWrapper div.details span.numberOfParticipants:hover { + color: #66cff6 +} + +body.RTL div.callStatusWrapper div.details span.numberOfParticipants { + margin-left: 20px; + margin-right: 0 +} + +div.callStatusWrapper div.details span.numberOfParticipants::after { + padding-left: 5px; + font-family: "Skype UI Symbol" !important; + font-weight: bold; + content: "\E421" +} + +body.RTL div.callStatusWrapper div.details span.numberOfParticipants::after { + content: "\E420"; + padding-left: 0; + padding-right: 5px +} + +@media screen and (-ms-high-contrast: active) { + div.callStatusWrapper div.details span.numberOfParticipants { + color: -ms-hotlight + } + div.callStatusWrapper div.details span.numberOfParticipants:hover { + color: Highlight + } +} + +div.callStatusWrapper div.details.NUMBEROFPARTVISIBLE span.numberOfParticipants { + display: inline-block +} + +@media screen and (-ms-high-contrast: active) { + div.callStatusWrapper div.details { + background-color: Window + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/conversation/callStatus.scss b/packages/microsoft.skypeapp/controls/conversation/callStatus.scss index e57775b8..b11e9da5 100644 --- a/packages/microsoft.skypeapp/controls/conversation/callStatus.scss +++ b/packages/microsoft.skypeapp/controls/conversation/callStatus.scss @@ -46,7 +46,7 @@ div.callStatusWrapper { &::after { padding-left: 5px; - font-family: "Skype UI Symbol"; + font-family: "Skype UI Symbol" !important; font-weight: bold; content: "\E421"; diff --git a/packages/microsoft.skypeapp/controls/conversation/chat.css b/packages/microsoft.skypeapp/controls/conversation/chat.css index 4fabf038..554a8053 100644 --- a/packages/microsoft.skypeapp/controls/conversation/chat.css +++ b/packages/microsoft.skypeapp/controls/conversation/chat.css @@ -1 +1,324 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.chat{display:-ms-flexbox;-ms-flex-direction:column;-ms-flex-pack:start;height:100%}div.chat div.chatLogContainer{-ms-flex:1;overflow-x:hidden;-ms-user-select:element}div.chat div.noMessagesContainer{width:100%;margin-top:60px;margin-bottom:20px;z-index:20;display:none}div.chat div.noMessagesContainer.VISIBLE{display:block}div.conversation.BLOCKED div.chat div.noMessagesContainer.VISIBLE,div.conversation.NONMEMBER div.chat div.noMessagesContainer.VISIBLE{display:none}div.chat.CANRESENDREQUEST div.noMessagesContainer.VISIBLE,div.chat.EMERGENCY div.noMessagesContainer.VISIBLE,div.chat.NOTAUTHORIZED div.noMessagesContainer.VISIBLE,div.chat.NOTAUTHORIZEDWITHREQUEST div.noMessagesContainer.VISIBLE{display:none}div.chat.LIVE div.noMessagesContainer div.noMessages{display:-ms-grid;-ms-grid-columns:minmax(40px, 1fr) minmax(260px, 320px) minmax(40px, 1fr);font-size:21.5px}div.chat div.noMessagesContainer div.noMessages{display:-ms-grid;-ms-grid-columns:minmax(80px, 1fr) minmax(660px, 940px) minmax(136px, 1fr)}div.chat div.noMessagesContainer div.noMessages div.content{-ms-grid-column:2;-ms-grid-row:1;line-height:38px}@media screen and (max-aspect-ratio: 1 / 1){div.chat div.noMessagesContainer div.noMessages div.content{line-height:32px}}div.chat div.noMessagesContainer div.noMessages div.content span.contactName{text-overflow:ellipsis;overflow:hidden;width:inherit;max-width:400px;white-space:nowrap;word-wrap:normal;display:inline-block;vertical-align:bottom}@media screen and (max-aspect-ratio: 1 / 1){div.chat div.noMessagesContainer div.noMessages div.content span.contactName{max-width:300px}}div.chat.CLOSEDINLIVE input,div.chat.CLOSEDINLIVE textarea,div.chat.CLOSEDINLIVE a,div.chat.CLOSEDINLIVE button,div.chat.CLOSEDINLIVE div.HIDDENINLIVE,div.chat.CLOSEDINLIVE div.channelButton{visibility:hidden}div.chat.CLOSEDINLIVE div.node div.message span.emoticon{visibility:hidden}body.RTL div.chat div.noMessagesContainer div.noMessages div.content.PSTNONLY span.contactName{direction:ltr}body.RTL div.chat div.noMessagesContainer div.noMessages div.content.PSTNONLY span.contactName::before{content:"\202D"}body.RTL div.chat div.noMessagesContainer div.noMessages div.content.PSTNONLY span.contactName::after{content:"\202C"}div.chat div.log div.dateHeader{position:relative;z-index:5;border-top:1px solid #E7F1F5}div.chat div.log div.dateHeader:first-child{margin-top:0px;border-top-width:0px}div.chat div.dateHeader>div{-ms-grid-column:2;padding-top:20px;padding-bottom:20px;font-weight:bold;color:#a2c5d3;margin-left:-47px}@media screen and (max-aspect-ratio: 1 / 1){div.chat div.dateHeader>div{margin-left:-38px}}body.RTL div.chat div.dateHeader>div{padding-right:15px;padding-left:0}div.chat.EMERGENCY div.inputsContainer{display:none}div.chat div.inputsContainer{background-color:white;z-index:1}div.chat div.resendRequest{width:100%;background-color:#E7F1F5;-ms-grid-columns:minmax(80px, 1fr) minmax(400px, 940px) minmax(80px, 1fr);-ms-grid-rows:1fr;display:none;padding-top:30px;padding-bottom:30px}div.chat div.resendRequest div.columnWrapper{-ms-grid-column:2;-ms-grid-row:1;padding-left:15px}div.chat div.resendRequest span.link{color:#00aff0;cursor:pointer}div.chat.CANRESENDREQUEST div.resendRequest{display:-ms-grid}div.chat.LIVE div.resendRequest{-ms-grid-columns:13px 1fr 17px}div.chat div.inviteContact{display:none;width:100%;min-height:20px;background:#E7F1F5;box-sizing:border-box;padding:62px 130px 30px 130px;word-wrap:break-word}div.chat.LIVE div.inviteContact{padding:30px 30px 30px 30px}div.chat.NOTAUTHORIZED div.inviteContact,div.chat.NOTAUTHORIZEDWITHREQUEST div.inviteContact{display:block}div.chat.NOTAUTHORIZEDWITHREQUEST div.inviteContact button{display:none}div.chat div.inviteContact h2{line-height:normal;text-overflow:ellipsis;margin-bottom:30px}div.chat div.rateCallQualityNode{display:-ms-grid;-ms-grid-rows:1fr 60px;-ms-grid-columns:1fr 400px 1fr;margin:20px 0}div.chat.LIVE div.rateCallQualityNode{-ms-grid-columns:1fr 280px 1fr}div.chat div.rateCallQualityNode label{display:block;-ms-grid-row:1;-ms-grid-column:2;-ms-grid-column-align:center;text-align:center;font-weight:400;color:#93999d}div.chat div.rateCallQualityNode label strong{color:#33353a;font-weight:400}div.chat div.rateCallQualityNode div.rating{-ms-grid-row:2;-ms-grid-column:2;-ms-grid-column-align:center;-ms-grid-row-align:end}div.chat div.rateCallQualityNode div.rating div.win-star{width:50px;height:50px;font-size:50px;font-family:"Skype UI Symbol";line-height:normal;border-radius:50%;padding:0}@media screen and (-ms-high-contrast: active){div.chat div.rateCallQualityNode div.rating div.win-star{font-size:28px;font-family:"Segoe UI Symbol";height:38px}}div.chat div.rateCallQualityNode div.rating div.win-star::before{content:"\E40A"}@media screen and (max-width: 1280px){div.chat div.noMessagesContainer div.noMessages{-ms-grid-columns:30px 1fr 90px}}@media screen and (max-width: 1024px){div.chat div.resendRequest{-ms-grid-columns:30px 1fr 30px}}@media screen and (max-aspect-ratio: 1 / 1){div.chat div.resendRequest{-ms-grid-columns:20px 1fr 60px 20px}div.chat div.resendRequest div.columnWrapper{-ms-grid-column-span:2}div.chat div.noMessagesContainer{margin-top:10px}div.chat div.noMessagesContainer div.noMessages{-ms-grid-columns:20px 1fr 20px}div.chat div.noMessagesContainer div.noMessages{-ms-grid-columns:20px 1fr 20px}div.chat div.dateHeader>div{padding-left:0px}body.RTL div.chat div.dateHeader>div{padding-right:0px}div.chat div.inviteContact{padding:20px 30px 20px 30px;box-sizing:border-box;white-space:normal;text-align:center;height:auto}div.chat.NOTAUTHORIZEDWITHREQUEST div.inviteContact h2{margin-bottom:0px}div.chat div.inviteContact h2.name{text-align:left}body.RTL div.chat div.inviteContact h2.name{text-align:right}div.chat div.inviteContact button.text{height:auto;min-height:30px}div.chat div.rateCallQualityNode{-ms-grid-columns:1fr 250px 1fr}}@media screen and (-ms-high-contrast: active){div.chat div.inviteContact button{box-shadow:0px 0px 0px 1px WindowText}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.chat { + display: -ms-flexbox; + -ms-flex-direction: column; + -ms-flex-pack: start; + height: 100% +} + +div.chat div.chatLogContainer { + -ms-flex: 1; + overflow-x: hidden; + -ms-user-select: element +} + +div.chat div.noMessagesContainer { + width: 100%; + margin-top: 60px; + margin-bottom: 20px; + z-index: 20; + display: none +} + +div.chat div.noMessagesContainer.VISIBLE { + display: block +} + +div.conversation.BLOCKED div.chat div.noMessagesContainer.VISIBLE, +div.conversation.NONMEMBER div.chat div.noMessagesContainer.VISIBLE { + display: none +} + +div.chat.CANRESENDREQUEST div.noMessagesContainer.VISIBLE, +div.chat.EMERGENCY div.noMessagesContainer.VISIBLE, +div.chat.NOTAUTHORIZED div.noMessagesContainer.VISIBLE, +div.chat.NOTAUTHORIZEDWITHREQUEST div.noMessagesContainer.VISIBLE { + display: none +} + +div.chat.LIVE div.noMessagesContainer div.noMessages { + display: -ms-grid; + -ms-grid-columns: minmax(40px, 1fr) minmax(260px, 320px) minmax(40px, 1fr); + font-size: 21.5px +} + +div.chat div.noMessagesContainer div.noMessages { + display: -ms-grid; + -ms-grid-columns: minmax(80px, 1fr) minmax(660px, 940px) minmax(136px, 1fr) +} + +div.chat div.noMessagesContainer div.noMessages div.content { + -ms-grid-column: 2; + -ms-grid-row: 1; + line-height: 38px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.chat div.noMessagesContainer div.noMessages div.content { + line-height: 32px + } +} + +div.chat div.noMessagesContainer div.noMessages div.content span.contactName { + text-overflow: ellipsis; + overflow: hidden; + width: inherit; + max-width: 400px; + white-space: nowrap; + word-wrap: normal; + display: inline-block; + vertical-align: bottom +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.chat div.noMessagesContainer div.noMessages div.content span.contactName { + max-width: 300px + } +} + +div.chat.CLOSEDINLIVE input, +div.chat.CLOSEDINLIVE textarea, +div.chat.CLOSEDINLIVE a, +div.chat.CLOSEDINLIVE button, +div.chat.CLOSEDINLIVE div.HIDDENINLIVE, +div.chat.CLOSEDINLIVE div.channelButton { + visibility: hidden +} + +div.chat.CLOSEDINLIVE div.node div.message span.emoticon { + visibility: hidden +} + +body.RTL div.chat div.noMessagesContainer div.noMessages div.content.PSTNONLY span.contactName { + direction: ltr +} + +body.RTL div.chat div.noMessagesContainer div.noMessages div.content.PSTNONLY span.contactName::before { + content: "\202D" +} + +body.RTL div.chat div.noMessagesContainer div.noMessages div.content.PSTNONLY span.contactName::after { + content: "\202C" +} + +div.chat div.log div.dateHeader { + position: relative; + z-index: 5; + border-top: 1px solid #E7F1F5 +} + +div.chat div.log div.dateHeader:first-child { + margin-top: 0px; + border-top-width: 0px +} + +div.chat div.dateHeader>div { + -ms-grid-column: 2; + padding-top: 20px; + padding-bottom: 20px; + font-weight: bold; + color: #a2c5d3; + margin-left: -47px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.chat div.dateHeader>div { + margin-left: -38px + } +} + +body.RTL div.chat div.dateHeader>div { + padding-right: 15px; + padding-left: 0 +} + +div.chat.EMERGENCY div.inputsContainer { + display: none +} + +div.chat div.inputsContainer { + background-color: white; + z-index: 1 +} + +div.chat div.resendRequest { + width: 100%; + background-color: #E7F1F5; + -ms-grid-columns: minmax(80px, 1fr) minmax(400px, 940px) minmax(80px, 1fr); + -ms-grid-rows: 1fr; + display: none; + padding-top: 30px; + padding-bottom: 30px +} + +div.chat div.resendRequest div.columnWrapper { + -ms-grid-column: 2; + -ms-grid-row: 1; + padding-left: 15px +} + +div.chat div.resendRequest span.link { + color: #00aff0; + cursor: pointer +} + +div.chat.CANRESENDREQUEST div.resendRequest { + display: -ms-grid +} + +div.chat.LIVE div.resendRequest { + -ms-grid-columns: 13px 1fr 17px +} + +div.chat div.inviteContact { + display: none; + width: 100%; + min-height: 20px; + background: #E7F1F5; + box-sizing: border-box; + padding: 62px 130px 30px 130px; + word-wrap: break-word +} + +div.chat.LIVE div.inviteContact { + padding: 30px 30px 30px 30px +} + +div.chat.NOTAUTHORIZED div.inviteContact, +div.chat.NOTAUTHORIZEDWITHREQUEST div.inviteContact { + display: block +} + +div.chat.NOTAUTHORIZEDWITHREQUEST div.inviteContact button { + display: none +} + +div.chat div.inviteContact h2 { + line-height: normal; + text-overflow: ellipsis; + margin-bottom: 30px +} + +div.chat div.rateCallQualityNode { + display: -ms-grid; + -ms-grid-rows: 1fr 60px; + -ms-grid-columns: 1fr 400px 1fr; + margin: 20px 0 +} + +div.chat.LIVE div.rateCallQualityNode { + -ms-grid-columns: 1fr 280px 1fr +} + +div.chat div.rateCallQualityNode label { + display: block; + -ms-grid-row: 1; + -ms-grid-column: 2; + -ms-grid-column-align: center; + text-align: center; + font-weight: 400; + color: #93999d +} + +div.chat div.rateCallQualityNode label strong { + color: #33353a; + font-weight: 400 +} + +div.chat div.rateCallQualityNode div.rating { + -ms-grid-row: 2; + -ms-grid-column: 2; + -ms-grid-column-align: center; + -ms-grid-row-align: end +} + +div.chat div.rateCallQualityNode div.rating div.win-star { + width: 50px; + height: 50px; + font-size: 50px; + font-family: "Skype UI Symbol" !important; + line-height: normal; + border-radius: 50%; + padding: 0 +} + +@media screen and (-ms-high-contrast: active) { + div.chat div.rateCallQualityNode div.rating div.win-star { + font-size: 28px; + font-family: "Segoe UI Symbol"; + height: 38px + } +} + +div.chat div.rateCallQualityNode div.rating div.win-star::before { + content: "\E40A" +} + +@media screen and (max-width: 1280px) { + div.chat div.noMessagesContainer div.noMessages { + -ms-grid-columns: 30px 1fr 90px + } +} + +@media screen and (max-width: 1024px) { + div.chat div.resendRequest { + -ms-grid-columns: 30px 1fr 30px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.chat div.resendRequest { + -ms-grid-columns: 20px 1fr 60px 20px + } + div.chat div.resendRequest div.columnWrapper { + -ms-grid-column-span: 2 + } + div.chat div.noMessagesContainer { + margin-top: 10px + } + div.chat div.noMessagesContainer div.noMessages { + -ms-grid-columns: 20px 1fr 20px + } + div.chat div.noMessagesContainer div.noMessages { + -ms-grid-columns: 20px 1fr 20px + } + div.chat div.dateHeader>div { + padding-left: 0px + } + body.RTL div.chat div.dateHeader>div { + padding-right: 0px + } + div.chat div.inviteContact { + padding: 20px 30px 20px 30px; + box-sizing: border-box; + white-space: normal; + text-align: center; + height: auto + } + div.chat.NOTAUTHORIZEDWITHREQUEST div.inviteContact h2 { + margin-bottom: 0px + } + div.chat div.inviteContact h2.name { + text-align: left + } + body.RTL div.chat div.inviteContact h2.name { + text-align: right + } + div.chat div.inviteContact button.text { + height: auto; + min-height: 30px + } + div.chat div.rateCallQualityNode { + -ms-grid-columns: 1fr 250px 1fr + } +} + +@media screen and (-ms-high-contrast: active) { + div.chat div.inviteContact button { + box-shadow: 0px 0px 0px 1px WindowText + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/conversation/chatInput.css b/packages/microsoft.skypeapp/controls/conversation/chatInput.css index 924baa5c..1ccad1b0 100644 --- a/packages/microsoft.skypeapp/controls/conversation/chatInput.css +++ b/packages/microsoft.skypeapp/controls/conversation/chatInput.css @@ -1 +1,384 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.chatInput div.inputs{margin-bottom:22px;margin-left:auto;margin-right:auto;display:-ms-grid;-ms-grid-columns:minmax(80px, 1fr) minmax(660px, 940px) minmax(136px, 1fr);-ms-grid-rows:30px 1fr;-ms-grid-row-align:center;position:relative;border-top:1px solid #d8f3fe}div.chatInput div.inputs.SHOWINGFULLLIVE{-ms-grid-columns:20px 1fr 20px}div.chatInput div.inputs.HIDDEN,div.conversation.BLOCKED div.chatInput div.inputs,div.conversation.NONMEMBER div.chatInput div.inputs{-ms-grid-columns:minmax(80px, 1fr) minmax(660px, 940px) minmax(80px, 1fr)}@media screen and (max-width: 1280px){div.chatInput div.inputs.HIDDEN,div.conversation.BLOCKED div.chatInput div.inputs,div.conversation.NONMEMBER div.chatInput div.inputs{-ms-grid-columns:30px 1fr 30px}}div.chatInput div.inputs.HIDDEN div.textbox div.notification.VISIBLE,div.conversation.BLOCKED div.chatInput div.inputs div.textbox div.notification.VISIBLE,div.conversation.NONMEMBER div.chatInput div.inputs div.textbox div.notification.VISIBLE{display:block}div.chatInput div.inputs.HIDDEN div.channelButton,div.chatInput div.inputs.HIDDEN div.textbox .smiley,div.chatInput div.inputs.HIDDEN div.textbox textarea,div.conversation.BLOCKED div.chatInput div.inputs div.channelButton,div.conversation.BLOCKED div.chatInput div.inputs div.textbox .smiley,div.conversation.BLOCKED div.chatInput div.inputs div.textbox textarea,div.conversation.NONMEMBER div.chatInput div.inputs div.channelButton,div.conversation.NONMEMBER div.chatInput div.inputs div.textbox .smiley,div.conversation.NONMEMBER div.chatInput div.inputs div.textbox textarea{display:none}@media screen and (max-aspect-ratio: 1 / 1){div.chatInput div.inputs.HIDDEN,div.conversation.BLOCKED div.chatInput div.inputs,div.conversation.NONMEMBER div.chatInput div.inputs{-ms-grid-columns:20px 1fr 20px}}div.conversation.NONMEMBER div.chatInput div.inputs div.textbox div.notification.notInGroup{display:block}div.chatInput div.inputs.PSTN.SINGLEPHONE div.channelButton span.icon{display:none}div.chatInput div.inputs.PSTN.SINGLEPHONE div.channelButton a,div.chatInput div.inputs.PSTN.SINGLEPHONE div.channelButton a span.method{cursor:default;color:#33353a}div.chatInput div.inputs span.channelAriaElement{opacity:0;position:absolute;pointer-events:none;width:1px;height:1px}div.chatInput div.inputs div.textboxMessages{visibility:hidden;-ms-grid-column:2;-ms-grid-row:1;-ms-grid-column-align:end;-ms-grid-row-align:center}div.chatInput div.inputs div.textboxMessages span.textboxMsg2{padding-left:10px;color:#939598}div.chatInput div.inputs div.channelButton{-ms-grid-column:2;-ms-grid-row:1;-ms-grid-column-align:start;margin-top:4px}div.chatInput div.inputs div.channelButton span.sms{color:#33353a}div.chatInput div.inputs div.channelButton span.sms span.icon{display:inline-block;height:15px;width:15px;border-radius:50%;font-size:15px;line-height:12px;text-align:center;cursor:default;color:white;background-color:#00aff0;font-family:"Skype UI Symbol";line-height:normal}div.chatInput div.inputs div.channelButton span.sms span.icon:hover{background-color:#0182b3}div.chatInput div.inputs div.channelButton span.sms span.icon:active{background-color:#015c80}div.chatInput div.inputs div.channelButton span.sms:hover span.icon{background-color:#0182b3}div.chatInput div.inputs div.channelButton span.sms:active span.icon{background-color:#015c80}@media screen and (max-aspect-ratio: 1 / 1){div.chatInput div.inputs div.channelButton{margin-left:0;overflow:hidden;white-space:nowrap;width:200px}body.RTL div.chatInput div.inputs div.channelButton{margin-right:0}}div.chatInput div.inputs:not(.DISABLED) div.channelButton span.sms span.method{color:#0095cc}div.chatInput div.inputs:not(.DISABLED) div.channelButton span.sms:hover span.method{color:#0182b3}div.chatInput div.inputs:not(.DISABLED) div.channelButton span.sms:active span.method{color:#015c80}div.chatInput div.inputs.SMSCHANNEL div.textboxMessages{visibility:visible}div.chatInput div.inputs.DISABLED div.channelButton span.sms{cursor:default;color:#33353a}div.chatInput div.inputs.DISABLED div.channelButton span.icon{display:none}div.chatInput div.inputs.DISABLED div.textbox textarea{display:none}div.chatInput div.inputs.DISABLED div.textbox div.inputDisabled{display:block}div.chatInput div.inputs.DISABLED div.textbox .smiley{opacity:1;color:#c1c1c1}div.conversation.BLOCKED div.chatInput div.inputs div.textbox div.inputDisabled{display:none}div.conversation.BLOCKED div.chatInput div.inputs div.notification.disabled{display:block}div.chatInput div.inputs.NOSMSPHONE div.channelButton,div.chatInput div.inputs.NOSMSPHONE span.channelAriaElement{display:none}div.chatInput div.inputs div.textbox{-ms-grid-column:2;-ms-grid-row:2;overflow:hidden;text-align:left;position:relative;z-index:50}div.chatInput div.inputs div.textbox .smiley{display:block;color:#00aff0;position:absolute;top:9px;right:9px;opacity:0.6;font-family:"Skype UI Symbol";line-height:normal;font-weight:bold;font-size:24px;width:24px;height:24px;background-color:transparent !important}body.RTL div.chatInput div.inputs div.textbox .smiley{right:auto;left:9px}div.chatInput div.inputs div.textbox .smiley:hover{opacity:0.8}@media screen and (-ms-high-contrast: active){div.chatInput div.inputs div.textbox .smiley:hover{background-color:transparent;color:Highlight}}div.chatInput div.inputs div.textbox .smiley:active{opacity:1}@media screen and (-ms-high-contrast: active){div.chatInput div.inputs div.textbox .smiley{color:-ms-hotlight;opacity:1.0;box-sizing:content-box}}div.chatInput div.inputs div.textbox textarea{box-sizing:border-box;width:100%;border:2px solid #68cef5;padding:6px 40px 6px 13px;height:40px;min-height:40px;max-height:300px;min-width:80px;margin-top:0;line-height:22px}div.chatInput div.inputs div.textbox textarea:disabled,div.chatInput div.inputs div.textbox textarea:disabled:hover{border-color:rgba(0,0,0,0.2)}div.chatInput div.inputs div.textbox textarea:focus{border:2px solid #00aff0}div.chatInput div.inputs div.textbox textarea:hover{border:2px solid #00aff0}body.RTL div.chatInput div.inputs div.textbox textarea{padding:8px 13px 8px 40px}div.chatInput div.inputs div.textbox textarea.PLACEHOLDER{color:#93999d}div.chat.ISEDITINGMESSAGE div.chatInput div.inputs div.textbox textarea{background-color:#FFFFDD}@media screen and (-ms-high-contrast: active){div.chatInput div.inputs div.textbox textarea{border-color:WindowText}}@media screen and (max-aspect-ratio: 1 / 1){div.chatInput div.inputs div.textbox textarea{min-height:40px;max-height:150px}}div.chatInput div.inputs div.textbox div.inputDisabled{box-sizing:border-box;width:100%;border:2px solid #68cef5;padding:6px 40px 6px 13px;height:40px;min-height:40px;max-height:300px;min-width:80px;margin-top:0;line-height:22px;max-height:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:transparent;border-color:rgba(0,0,0,0.2);display:none;margin-bottom:4px}body.RTL div.chatInput div.inputs div.textbox div.inputDisabled{padding:8px 13px 8px 40px;text-align:right}@media screen and (max-aspect-ratio: 1 / 1){div.chatInput div.inputs div.textbox div.inputDisabled{min-height:40px;max-height:150px}}div.chatInput div.inputs div.textbox div.notification{display:none;width:100%;text-align:center;color:#93999d;letter-spacing:0px;margin-left:-2px}body.RTL div.chatInput div.inputs div.textbox div.notification{margin-left:0;margin-right:-2px}div.chatInput div.inputs div.textbox:active .smiley,div.chatInput div.inputs div.textbox:focus .smiley{opacity:1}body.RTL div.chatInput div.inputs div.textbox{margin-left:0}@media screen and (max-aspect-ratio: 1 / 1){div.chatInput div.inputs div.textbox.CHAT.KEYBOARDUP{margin-bottom:11px}}@media screen and (max-aspect-ratio: 1 / 1){div.chatInput div.inputs div.textbox{margin-left:0}}@media screen and (max-width: 1280px){div.chatInput div.inputs{-ms-grid-columns:30px 1fr 30px}}@media screen and (min-aspect-ratio: 1 / 1){div.fragment.conversation.GROUP div.chatInput div.inputs.SHOWINGFULLLIVE{-ms-grid-columns:minmax(10px, 1fr) minmax(300px, 320px) minmax(136px, 1fr)}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.chatInput div.inputs { + margin-bottom: 22px; + margin-left: auto; + margin-right: auto; + display: -ms-grid; + -ms-grid-columns: minmax(80px, 1fr) minmax(660px, 940px) minmax(136px, 1fr); + -ms-grid-rows: 30px 1fr; + -ms-grid-row-align: center; + position: relative; + border-top: 1px solid #d8f3fe +} + +div.chatInput div.inputs.SHOWINGFULLLIVE { + -ms-grid-columns: 20px 1fr 20px +} + +div.chatInput div.inputs.HIDDEN, +div.conversation.BLOCKED div.chatInput div.inputs, +div.conversation.NONMEMBER div.chatInput div.inputs { + -ms-grid-columns: minmax(80px, 1fr) minmax(660px, 940px) minmax(80px, 1fr) +} + +@media screen and (max-width: 1280px) { + div.chatInput div.inputs.HIDDEN, + div.conversation.BLOCKED div.chatInput div.inputs, + div.conversation.NONMEMBER div.chatInput div.inputs { + -ms-grid-columns: 30px 1fr 30px + } +} + +div.chatInput div.inputs.HIDDEN div.textbox div.notification.VISIBLE, +div.conversation.BLOCKED div.chatInput div.inputs div.textbox div.notification.VISIBLE, +div.conversation.NONMEMBER div.chatInput div.inputs div.textbox div.notification.VISIBLE { + display: block +} + +div.chatInput div.inputs.HIDDEN div.channelButton, +div.chatInput div.inputs.HIDDEN div.textbox .smiley, +div.chatInput div.inputs.HIDDEN div.textbox textarea, +div.conversation.BLOCKED div.chatInput div.inputs div.channelButton, +div.conversation.BLOCKED div.chatInput div.inputs div.textbox .smiley, +div.conversation.BLOCKED div.chatInput div.inputs div.textbox textarea, +div.conversation.NONMEMBER div.chatInput div.inputs div.channelButton, +div.conversation.NONMEMBER div.chatInput div.inputs div.textbox .smiley, +div.conversation.NONMEMBER div.chatInput div.inputs div.textbox textarea { + display: none +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.chatInput div.inputs.HIDDEN, + div.conversation.BLOCKED div.chatInput div.inputs, + div.conversation.NONMEMBER div.chatInput div.inputs { + -ms-grid-columns: 20px 1fr 20px + } +} + +div.conversation.NONMEMBER div.chatInput div.inputs div.textbox div.notification.notInGroup { + display: block +} + +div.chatInput div.inputs.PSTN.SINGLEPHONE div.channelButton span.icon { + display: none +} + +div.chatInput div.inputs.PSTN.SINGLEPHONE div.channelButton a, +div.chatInput div.inputs.PSTN.SINGLEPHONE div.channelButton a span.method { + cursor: default; + color: #33353a +} + +div.chatInput div.inputs span.channelAriaElement { + opacity: 0; + position: absolute; + pointer-events: none; + width: 1px; + height: 1px +} + +div.chatInput div.inputs div.textboxMessages { + visibility: hidden; + -ms-grid-column: 2; + -ms-grid-row: 1; + -ms-grid-column-align: end; + -ms-grid-row-align: center +} + +div.chatInput div.inputs div.textboxMessages span.textboxMsg2 { + padding-left: 10px; + color: #939598 +} + +div.chatInput div.inputs div.channelButton { + -ms-grid-column: 2; + -ms-grid-row: 1; + -ms-grid-column-align: start; + margin-top: 4px +} + +div.chatInput div.inputs div.channelButton span.sms { + color: #33353a +} + +div.chatInput div.inputs div.channelButton span.sms span.icon { + display: inline-block; + height: 15px; + width: 15px; + border-radius: 50%; + font-size: 15px; + line-height: 12px; + text-align: center; + cursor: default; + color: white; + background-color: #00aff0; + font-family: "Skype UI Symbol" !important; + line-height: normal +} + +div.chatInput div.inputs div.channelButton span.sms span.icon:hover { + background-color: #0182b3 +} + +div.chatInput div.inputs div.channelButton span.sms span.icon:active { + background-color: #015c80 +} + +div.chatInput div.inputs div.channelButton span.sms:hover span.icon { + background-color: #0182b3 +} + +div.chatInput div.inputs div.channelButton span.sms:active span.icon { + background-color: #015c80 +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.chatInput div.inputs div.channelButton { + margin-left: 0; + overflow: hidden; + white-space: nowrap; + width: 200px + } + body.RTL div.chatInput div.inputs div.channelButton { + margin-right: 0 + } +} + +div.chatInput div.inputs:not(.DISABLED) div.channelButton span.sms span.method { + color: #0095cc +} + +div.chatInput div.inputs:not(.DISABLED) div.channelButton span.sms:hover span.method { + color: #0182b3 +} + +div.chatInput div.inputs:not(.DISABLED) div.channelButton span.sms:active span.method { + color: #015c80 +} + +div.chatInput div.inputs.SMSCHANNEL div.textboxMessages { + visibility: visible +} + +div.chatInput div.inputs.DISABLED div.channelButton span.sms { + cursor: default; + color: #33353a +} + +div.chatInput div.inputs.DISABLED div.channelButton span.icon { + display: none +} + +div.chatInput div.inputs.DISABLED div.textbox textarea { + display: none +} + +div.chatInput div.inputs.DISABLED div.textbox div.inputDisabled { + display: block +} + +div.chatInput div.inputs.DISABLED div.textbox .smiley { + opacity: 1; + color: #c1c1c1 +} + +div.conversation.BLOCKED div.chatInput div.inputs div.textbox div.inputDisabled { + display: none +} + +div.conversation.BLOCKED div.chatInput div.inputs div.notification.disabled { + display: block +} + +div.chatInput div.inputs.NOSMSPHONE div.channelButton, +div.chatInput div.inputs.NOSMSPHONE span.channelAriaElement { + display: none +} + +div.chatInput div.inputs div.textbox { + -ms-grid-column: 2; + -ms-grid-row: 2; + overflow: hidden; + text-align: left; + position: relative; + z-index: 50 +} + +div.chatInput div.inputs div.textbox .smiley { + display: block; + color: #00aff0; + position: absolute; + top: 9px; + right: 9px; + opacity: 0.6; + font-family: "Skype UI Symbol" !important; + line-height: normal; + font-weight: bold; + font-size: 24px; + width: 24px; + height: 24px; + background-color: transparent !important +} + +body.RTL div.chatInput div.inputs div.textbox .smiley { + right: auto; + left: 9px +} + +div.chatInput div.inputs div.textbox .smiley:hover { + opacity: 0.8 +} + +@media screen and (-ms-high-contrast: active) { + div.chatInput div.inputs div.textbox .smiley:hover { + background-color: transparent; + color: Highlight + } +} + +div.chatInput div.inputs div.textbox .smiley:active { + opacity: 1 +} + +@media screen and (-ms-high-contrast: active) { + div.chatInput div.inputs div.textbox .smiley { + color: -ms-hotlight; + opacity: 1.0; + box-sizing: content-box + } +} + +div.chatInput div.inputs div.textbox textarea { + box-sizing: border-box; + width: 100%; + border: 2px solid #68cef5; + padding: 6px 40px 6px 13px; + height: 40px; + min-height: 40px; + max-height: 300px; + min-width: 80px; + margin-top: 0; + line-height: 22px +} + +div.chatInput div.inputs div.textbox textarea:disabled, +div.chatInput div.inputs div.textbox textarea:disabled:hover { + border-color: rgba(0, 0, 0, 0.2) +} + +div.chatInput div.inputs div.textbox textarea:focus { + border: 2px solid #00aff0 +} + +div.chatInput div.inputs div.textbox textarea:hover { + border: 2px solid #00aff0 +} + +body.RTL div.chatInput div.inputs div.textbox textarea { + padding: 8px 13px 8px 40px +} + +div.chatInput div.inputs div.textbox textarea.PLACEHOLDER { + color: #93999d +} + +div.chat.ISEDITINGMESSAGE div.chatInput div.inputs div.textbox textarea { + background-color: #FFFFDD +} + +@media screen and (-ms-high-contrast: active) { + div.chatInput div.inputs div.textbox textarea { + border-color: WindowText + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.chatInput div.inputs div.textbox textarea { + min-height: 40px; + max-height: 150px + } +} + +div.chatInput div.inputs div.textbox div.inputDisabled { + box-sizing: border-box; + width: 100%; + border: 2px solid #68cef5; + padding: 6px 40px 6px 13px; + height: 40px; + min-height: 40px; + max-height: 300px; + min-width: 80px; + margin-top: 0; + line-height: 22px; + max-height: none; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + background-color: transparent; + border-color: rgba(0, 0, 0, 0.2); + display: none; + margin-bottom: 4px +} + +body.RTL div.chatInput div.inputs div.textbox div.inputDisabled { + padding: 8px 13px 8px 40px; + text-align: right +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.chatInput div.inputs div.textbox div.inputDisabled { + min-height: 40px; + max-height: 150px + } +} + +div.chatInput div.inputs div.textbox div.notification { + display: none; + width: 100%; + text-align: center; + color: #93999d; + letter-spacing: 0px; + margin-left: -2px +} + +body.RTL div.chatInput div.inputs div.textbox div.notification { + margin-left: 0; + margin-right: -2px +} + +div.chatInput div.inputs div.textbox:active .smiley, +div.chatInput div.inputs div.textbox:focus .smiley { + opacity: 1 +} + +body.RTL div.chatInput div.inputs div.textbox { + margin-left: 0 +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.chatInput div.inputs div.textbox.CHAT.KEYBOARDUP { + margin-bottom: 11px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.chatInput div.inputs div.textbox { + margin-left: 0 + } +} + +@media screen and (max-width: 1280px) { + div.chatInput div.inputs { + -ms-grid-columns: 30px 1fr 30px + } +} + +@media screen and (min-aspect-ratio: 1 / 1) { + div.fragment.conversation.GROUP div.chatInput div.inputs.SHOWINGFULLLIVE { + -ms-grid-columns: minmax(10px, 1fr) minmax(300px, 320px) minmax(136px, 1fr) + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/conversation/chatLog.css b/packages/microsoft.skypeapp/controls/conversation/chatLog.css index 5bc3fb5c..ef02787b 100644 --- a/packages/microsoft.skypeapp/controls/conversation/chatLog.css +++ b/packages/microsoft.skypeapp/controls/conversation/chatLog.css @@ -1 +1,1034 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.chatLog div.node.me:not(.notification)+div.node:not(.me){border-top:none}div.chatLog{overflow-y:auto;overflow-x:hidden;-ms-user-select:element;height:100%}div.chatLog div.ariaLiveContainer{display:none}div.chatLog div.messagesContainer{overflow-y:auto;overflow-x:hidden;height:100%;touch-action:pan-y}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog{margin-right:0px;padding-right:0px}body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog{margin-left:0px;padding-left:0px}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node[type="videomessage"] div.videoMessage{top:-8px}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node{-ms-grid-columns:58px 1fr}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.message{padding-left:0}body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.message{padding-left:10px}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.message h3.name{width:150px;overflow:hidden;text-overflow:ellipsis}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.message div.fileTransfersContainer>div{padding-right:20px}body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.message div.fileTransfersContainer>div{padding-right:0;padding-left:20px}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.message div.fileTransferMessage div.fileTransfersContainer.ISMULTIFILETRANSFER>div{width:100%;min-width:0}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.message time{margin-right:20px}body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.message time{margin-right:0px;margin-left:20px}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.avatar div.img{right:5px;top:-4px;width:30px;height:30px;border-width:4px}body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.avatar div.img{right:auto;left:5px}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.avatar div.img div.protectionLayer{background:url("/images/svg/prot30x30circle.svg") no-repeat}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.avatar div.border{right:4px;top:-5px;width:38px;height:38px;clip:rect(0px, 43px, 5px, 0px)}body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.avatar div.border{right:auto;left:4px}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node.EDITED div.message time{margin-right:20px}body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node.EDITED div.message time{margin-right:0px;margin-left:20px}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.EDITED) div.message time{margin-right:20px}body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.EDITED) div.message time{margin-right:20px;margin-left:20px}@media screen and (max-aspect-ratio: 1 / 1){body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.EDITED):not(.light) div.message time{margin-left:20px;margin-right:0px}}@media screen and (min-aspect-ratio: 1 / 1){div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.light):not(.SMS) div.message div.edited{margin-top:-21px}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.light):not(.SMS) div.message time{margin-top:-18px}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.light):not(.SMS) div.message:hover div.edited{margin-top:-13px}}@media screen and (min-aspect-ratio: 1 / 1){div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.light).SMS div.message div.edited{margin-top:0}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.light).SMS div.message time{margin-top:-18px}}@media screen and (min-aspect-ratio: 1 / 1){div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.SMS) div.message:hover time{margin-right:20px}body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.SMS) div.message:hover time{margin-right:0px;margin-left:20px}}@media screen and (max-aspect-ratio: 1 / 1){body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.SMS) div.message:hover time{margin-right:0px;margin-left:20px}}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node.notification[type="group"] div.message,div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node.notification[type="blocked"] div.message{-ms-grid-columns:1px 1fr;-ms-grid-column:2}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node.notification[type="group"] div.message div.avatar,div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node.notification[type="blocked"] div.message div.avatar{min-height:30px}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node.notification[type="group"] div.message div.avatar div.img,div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node.notification[type="blocked"] div.message div.avatar div.img{width:30px}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node.notification div.iconContainer span.icon{font-size:15px;right:6px}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node.unsupported div.iconContainer span.icon{font-size:24px;right:12px}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node[type="videomessage"]{height:260px}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node[type="videomessage"] div.videoMessage{height:225px}div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node.light[type="videomessage"]{height:255px}div.chatLog div.list-selectable:focus{border:2px solid #00aff0 !important}div.chatLog div.rateCallQualityNode div.rating:focus{border:2px solid #00aff0}div.chatLog div.node{position:relative;display:-ms-grid;box-sizing:border-box;-ms-grid-columns:minmax(128px, 1fr) minmax(660px, 940px) minmax(136px, 1fr);-ms-grid-rows:1fr;border-top:1px solid #E7F1F5;outline:none}div.chatLog div.node.light,div.chatLog div.node.me{border-top:none}div.chatLog div.node time.date em{color:#d6d6d6;font-weight:100;margin:0 1px}div.chatLog div.node div.avatar{-ms-grid-column:1;position:relative;overflow:visible;-ms-high-contrast-adjust:none}div.chatLog div.node div.avatar div.img{position:absolute;right:0px;top:-8px;width:40px;height:40px;border-radius:50%;border:8px solid #fff;background-image:url("/images/avatar.default.unknown.png");z-index:8}body.RTL div.chatLog div.node div.avatar div.img{right:auto;left:0}div.chatLog div.node div.avatar div.img div.protectionLayer{position:absolute;width:100%;height:100%;border-radius:50%;background:url("/images/svg/prot40x40circle.svg") no-repeat}div.chatLog div.node div.avatar.DEFAULTAVATAR div.protectionLayer{background-image:none}div.chatLog div.node div.avatar div.border{position:absolute;right:-1px;top:-9px;width:56px;height:56px;border:1px solid #E7F1F5;border-radius:50%;background-color:#fff;clip:rect(0px, 57px, 9px, 0px);z-index:7}body.RTL div.chatLog div.node div.avatar div.border{right:auto;left:-1px}div.chatLog div.node.me{background-color:#D8F3FE}div.chatLog div.node.me div.avatar div.img{border-color:#D8F3FE}div.chatLog div.node.me div.avatar div.border{display:none}div.chatLog div.node.me div.message{background-color:#D8F3FE}div.chatLog div.node div.message{-ms-grid-column:2;padding:0 0 0 13px;background-color:#fff;-ms-user-select:text}div.chatLog div.node div.message span.deleted{color:#939999}div.chatLog div.node div.message a[href]:hover{color:#0182b3}div.chatLog div.node div.message a[href]:active{color:#015c80}div.chatLog div.node div.message a[href*='skype:+']:after,div.chatLog div.node div.message a[href*='skype:+']:before{content:"\200E"}div.chatLog div.node div.message h3.name{color:#00aff0;margin-top:10px;font-weight:600}div.chatLog div.node div.message h3.name a{color:#0095cc}div.chatLog div.node div.confirmAuthRequest div.controls{padding-top:1em;white-space:normal}div.chatLog div.node div.confirmAuthRequest div.controls button{max-width:250px;font-weight:normal}div.chat.LIVE div.chatLog div.node div.confirmAuthRequest div.controls button{margin-bottom:10px;height:auto;min-height:30px}body.RTL div.chatLog div.node div.confirmAuthRequest div.controls button{margin-left:10px;margin-right:0}div.chatLog div.node.unsupported{margin-top:10px}div.chatLog div.node.unsupported div.message{color:#93999d;padding-top:30px;padding-bottom:30px}div.chatLog div.node.unsupported div.message span.name{display:none}div.chatLog div.node.unsupported div.message time{padding-left:20px}body.RTL div.chatLog div.node.unsupported div.message time{padding-left:0;padding-right:20px}div.chatLog div.node.unsupported div.message div.body{white-space:normal}div.chatLog div.node.unsupported div.iconContainer span.icon{font-family:"Skype UI Symbol";font-weight:bold;position:absolute;right:16px;top:25px}body.RTL div.chatLog div.node.unsupported div.iconContainer span.icon{right:auto;left:16px}div.chatLog div.node.unsupported[type='file'] div.iconContainer span.icon::before{content:"\E306"}div.chatLog div.node.unsupported[type='auth'] div.iconContainer span.icon::before{content:"\E201"}div.chatLog div.node.unsupported[type='contacts'] div.iconContainer span.icon::before{content:"\E201"}div.chatLog div.node.unsupported[type='voicemail'] div.iconContainer span.icon::before{content:"\E304"}div.chatLog div.node.unsupported[type='videomessage'] div.iconContainer span.icon::before{content:"\E305"}div.chatLog div.node.me:not(.notification)+div.node:not(.me)>div.avatar div.border{display:none}div.fragment.conversation.GROUP div.chat div.log div.node:not(.me) div.avatar div.img:hover::before{content:' ';display:block;position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.15);pointer-events:none;border-radius:50%}div.fragment.conversation.GROUP div.chat div.log div.node:not(.me) div.message h3.name a:hover{color:#0182b3}div.fragment.conversation.GROUP div.chat div.log div.node:not(.me) div.message h3.name a:active{color:#015c80}div.chatLog div.node.notification{background-color:#fff;color:#93999d;border-top:1px solid #E7F1F5}div.chatLog div.node div.iconContainer span.icon{color:#93999d}div.chatLog div.node.me:not(.notification)+div.node.notification{border-top:none}div.chatLog div.node.notification div.iconContainer,div.chatLog div.node.unsupported div.iconContainer{-ms-grid-column:1;position:relative}div.chatLog div.node.notification div.iconContainer span.icon{position:absolute;right:5px;top:25px;font-family:"Skype UI Symbol";font-weight:bold;margin-right:10px}body.RTL div.chatLog div.node.notification div.iconContainer span.icon{right:auto;left:5px;margin-right:0;margin-left:10px}div.chatLog div.node.notification div.message{padding-bottom:5px;padding-top:20px}div.chatLog div.node.me.notification div.message{background-color:#fff}div.chatLog div.node:not(.unsupported) div.message div.body{padding-bottom:15px}div.chatLog div.node.notification div.message div.body{word-wrap:normal}div.chatLog div.node.notification div.message div.body span{margin-right:5px}body.RTL div.chatLog div.node.notification div.message div.body span{margin-right:0;margin-left:5px}div.chatLog div.node.notification div.message div.body span.msgDetail{font-size:9pt}div.chatLog div.node.notification.genericNotification,div.chatLog div.node.notification[type="blocked"]{margin-top:0px}@media screen and (max-aspect-ratio: 1 / 1){div.chatLog div.node.notification.genericNotification,div.chatLog div.node.notification[type="blocked"]{-ms-grid-columns:30px 1fr 30px}}div.chatLog div.node.notification.genericNotification div.message,div.chatLog div.node.notification[type="blocked"] div.message{padding-right:0;padding-left:0}div.chatLog div.node.notification.genericNotification div.message div.body,div.chatLog div.node.notification[type="blocked"] div.message div.body{text-align:center;padding-right:0;padding-left:0}div.chatLog div.node.notification.genericNotification div.message div.body strong,div.chatLog div.node.notification[type="blocked"] div.message div.body strong{font-weight:normal}div.chatLog div.node div.message div.body{padding-right:80px;word-wrap:break-word;white-space:pre-wrap}body.RTL div.chatLog div.node div.message div.body{padding-right:0;padding-left:80px}div.chatLog div.node div.message.initialAuthRequest div.body div.text::before,div.chatLog div.node div.message.auth div.body::before,div.chatLog div.node div.message.authorized div.body::before{padding-right:5px}body.RTL div.chatLog div.node div.message.initialAuthRequest div.body div.text::before,body.RTL div.chatLog div.node div.message.auth div.body::before,body.RTL div.chatLog div.node div.message.authorized div.body::before{padding-right:0;padding-left:5px}div.fragment.conversation.SHOWINGFULLLIVE div.chat div.log div.node div.message div.body{padding-right:30px}body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chat div.log div.node div.message div.body{padding-right:0;padding-left:30px}@media screen and (max-aspect-ratio: 1 / 1){div.fragment.conversation.SHOWINGFULLLIVE div.chat div.log div.node div.message div.body{padding-right:0px}body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chat div.log div.node div.message div.body{padding-right:0;padding-left:15px}}div.chatLog div.node div.message time{float:right;text-align:right;color:#93999d}body.RTL div.chatLog div.node div.message time{float:left}div.chatLog div.node.notification:not([type='group']) div.message time{margin-top:-13px}div.chatLog div.node.SMS div.message time{background:url("/images/svg/sms.svg") no-repeat 0px 0px;margin-right:0px;padding-left:20px}@media screen and (-ms-high-contrast: active){div.chatLog div.node.SMS div.message time{background:url("/images/svg/sms-hc.svg") no-repeat 0px 0px}}body.RTL div.chatLog div.node.SMS div.message time{background-position:top right;padding-left:1px;padding-right:20px}div.chatLog div.node:not(.SMS) div.message div.edited{color:#93999d;display:block;float:right;display:block;width:20px;margin-top:-3px}body.RTL div.chatLog div.node:not(.SMS) div.message div.edited{float:left}@media screen and (max-aspect-ratio: 1 / 1){div.chatLog div.node:not(.SMS) div.message div.edited{margin-top:-20px}}div.chatLog div.node:not(.SMS).light div.message div.edited{margin-top:-2px}div.chatLog div.node:not(.SMS).me div.message:hover div.edited{margin-top:5px}@media screen and (max-aspect-ratio: 1 / 1){div.chatLog div.node:not(.SMS).me div.message:hover div.edited{margin-top:-15px}}div.chatLog div.node:not(.SMS).me div.message:hover time{margin-left:0}body.RTL div.chatLog div.node:not(.SMS).me div.message:hover time{margin-right:0}div.chatLog div.node:not(.SMS).me.light div.message:hover div.edited{margin-top:5px}div.chatLog div.node:not(.EDITED) div.message time{margin-left:20px}body.RTL div.chatLog div.node:not(.EDITED) div.message time{margin-left:0px;margin-right:20px}@media screen and (max-aspect-ratio: 1 / 1){div.chatLog div.node:not(.EDITED):not(.light) div.message time{margin-left:0px}body.RTL div.chatLog div.node:not(.EDITED):not(.light) div.message time{margin-left:0px;margin-right:0px}}div.chatLog div.node.EDITED div.message div.edited::after,div.chatLog div.node.me:not(.SMS) div.message:hover div.edited::after{position:relative;font-family:"Skype UI Symbol";font-weight:300;font-size:25px;content:"\E40D";line-height:10px;vertical-align:bottom;right:4px}body.RTL div.chatLog div.node.EDITED div.message div.edited::after,body.RTL div.chatLog div.node.me:not(.SMS) div.message:hover div.edited::after{right:auto;left:4px}div.chatLog div.node.me:not(.SMS) div.message:hover div.edited{background:url("/images/svg/menu-hover.svg") no-repeat;background-position:center;height:12px;background-size:10px 10px}@media screen and (-ms-high-contrast: active){div.chatLog div.node.me:not(.SMS) div.message:hover div.edited{background:url("/images/svg/menu-hover-hc.svg") no-repeat}}div.chatLog div.node.me:not(.SMS) div.message:hover div.edited::after{content:none}div.chatLog div.node.SMS[smsstatus='delivered'] div.message time{background:url("/images/svg/sms-delivered.svg") no-repeat 0px 0px}@media screen and (-ms-high-contrast: active){div.chatLog div.node.SMS[smsstatus='delivered'] div.message time{background:url("/images/svg/sms-delivered-hc.svg") no-repeat 0px 0px}}div.chatLog div.node.SMS[smsstatus='failed'] div.message time{background:url("/images/svg/sms-failed.svg") no-repeat 0px 0px}@media screen and (-ms-high-contrast: active){div.chatLog div.node.SMS[smsstatus='failed'] div.message time{background:url("/images/svg/sms-failed-hc.svg") no-repeat 0px 0px}}div.chatLog div.node div.message p{margin:5px 0 0 0;padding:0}div.chatLog div.node div.message p:first-child{margin-top:0}div.chatLog div.node[type="file"] div.message div.heading{color:#6e6e73;line-height:20px;margin-bottom:8px}div.chatLog div.node[type="file"] div.message div.heading span.icon{display:inline-block;font-family:"Skype UI Symbol";font-weight:bold;font-size:20px;height:20px;width:20px;margin-right:5px}div.chatLog div.node[type="file"] div.message div.heading span.icon::before{content:"\E306"}div.chatLog div.node[type="videomessage"]{height:290px}div.chatLog div.node[type="videomessage"] div.videoMessage{-ms-user-select:none;width:100%;clear:both;height:250px;top:-14px;position:relative}@media screen and (max-aspect-ratio: 1 / 1) and (max-width: 320px){div.chatLog div.node[type="videomessage"] div.videoMessage{margin-left:-30px}div.chatLog div.node[type="videomessage"] div.videoMessage div.preview{max-width:270px;overflow:hidden}body.RTL div.chatLog div.node[type="videomessage"] div.videoMessage{margin-right:-30px;margin-left:0}}@media screen and (min-aspect-ratio: 1 / 1){div.chat.LIVE div.chatLog div.node[type="videomessage"] div.videoMessage{margin-left:-30px}div.chat.LIVE div.chatLog div.node[type="videomessage"] div.videoMessage div.preview{max-width:270px;overflow:hidden}body.RTL div.chat.LIVE div.chatLog div.node[type="videomessage"] div.videoMessage{margin-right:-30px;margin-left:0}}div.chatLog div.node.light[type="videomessage"]{height:260px}div.chatLog div.node div.message div.confirmAuthRequest{white-space:nowrap}div.chatLog div.node div.message div.confirmAuthRequest>div:not(.controls){white-space:normal}.win-ui-dark .win-rating .win-star.win-user.win-full,.win-ui-dark .win-rating .win-star.win-user.win-full.win-disabled{color:orange}.win-ui-dark .win-rating .win-star.win-tentative.win-full{color:red}.win-ui-dark .win-rating .win-star.win-average.win-full,.win-ui-dark .win-rating .win-star.win-average.win-full.win-disabled{color:#fff}.win-ui-dark .win-rating .win-star.win-empty{color:rgba(255,255,255,0.35)}.win-rating .win-star.win-user.win-full,.win-rating .win-star.win-user.win-full.win-disabled{color:#00aff0}.win-rating .win-star.win-tentative.win-full{color:#93999d}.win-rating .win-star.win-tentative.win-full:active{color:#0095cc;transform:scale(0.9, 0.9)}.win-rating .win-star.win-average.win-full,.win-rating .win-star.win-average.win-full.win-disabled{color:green}.win-rating .win-star.win-empty{color:#c9ccce}div.CHATLOG_HOLD_MENU{min-height:80px}@media screen and (max-width: 1280px){div.chatLog{margin-right:0px;padding-right:0px}body.RTL div.chatLog{margin-left:0px;padding-left:0px}div.chatLog div.node{-ms-grid-columns:78px 1fr 30px}div.chatLog div.node div.message div.body{padding-right:30px}body.RTL div.chatLog div.node div.message div.body{padding-right:0;padding-left:30px}div.chatLog div.node.notification.genericNotification{-ms-grid-columns:1px 1fr}}@media screen and (max-aspect-ratio: 1 / 1){div.chatLog div.node div.confirmAuthRequest div.controls button{margin-bottom:10px;height:auto;min-height:30px}div.chatLog div.node,div.fragment.conversation.SHOWINGFULLLIVE div.chat div.log div.node{-ms-grid-columns:58px 1fr}html div.chatLog div.nodenot>div,div.chatLog div.node>div.message{padding:0 20px 10px 0px}html body.RTL html div.chatLog div.nodenot>div,html body.RTL div.chatLog div.node>div.message{padding:0 0 10px 20px}div.chatLog div.node.notification>div.message{padding:20px 20px 5px 0px}html body.RTL div.chatLog div.node.notification>div.message{padding:20px 0 5px 20px}div.chatLog div.node div.message h3.name{line-height:20px;max-width:calc(100% - 60px);height:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-bottom:0;margin-top:4px}div.fragment.conversation.SHOWINGFULLLIVE div.chat div.log div.node div.message time{margin-right:0}div.chatLog div.node:not(.notification):not(.light):not(.unsupported) div.message time{margin-top:-19px;padding-left:0px}body.RTL div.chatLog div.node:not(.notification):not(.light):not(.unsupported) div.message time{padding-right:0px}div.chatLog div.node.SMS:not(.notification):not(.light):not(.unsupported) div.message time{padding-left:20px}body.RTL div.chatLog div.node.SMS:not(.notification):not(.light):not(.unsupported) div.message time{padding-left:0;padding-right:20px}div.chatLog div.node.notification:not([type='group']) div.message time{margin-top:12px}div.chatLog div.node div.message div.body{padding-right:0px}body.RTL div.chatLog div.node div.message div.body{padding-left:0}div.chatLog div.node div.avatar div.img{right:5px;top:-4px;width:30px;height:30px;border-width:4px}body.RTL div.chatLog div.node div.avatar div.img{right:auto;left:5px}div.chatLog div.node div.avatar div.img div.protectionLayer{background:url("/images/svg/prot30x30circle.svg") no-repeat}div.chatLog div.node div.avatar div.border{right:4px;top:-5px;width:38px;height:38px;clip:rect(0px, 43px, 5px, 0px)}body.RTL div.chatLog div.node div.avatar div.border{right:auto;left:4px}div.fragment.conversation.SHOWINGFULLLIVE div.chat div.log div.node.notification.genericNotification div.fragment.conversation.SHOWINGFULLLIVE div.chat div.log div.node.notification[type="blocked"]{-ms-grid-columns:1px 1fr}div.chatLog div.node.notification.genericNotification div.message,div.chatLog div.node.notification[type="blocked"] div.message{-ms-grid-columns:1px 1fr;-ms-grid-column:2;padding-left:20px;padding-right:20px}div.chatLog div.node.notification.genericNotification div.message div.avatar,div.chatLog div.node.notification[type="blocked"] div.message div.avatar{min-height:30px}div.chatLog div.node.notification.genericNotification div.message div.avatar div.img,div.chatLog div.node.notification[type="blocked"] div.message div.avatar div.img{width:30px}div.chatLog div.node.notification div.iconContainer span.icon{font-size:15px;right:6px}div.chatLog div.node.unsupported div.iconContainer span.icon{font-size:24px;right:12px}div.chatLog div.node[type="videomessage"]{height:260px}div.chatLog div.node[type="videomessage"] div.videoMessage{height:225px;position:static;top:0}div.chatLog div.node.light[type="videomessage"]{height:255px}}@media screen and (-ms-high-contrast: active){div.chatLog div.node div.avatar div.img,div.chatLog div.node.me div.avatar div.img{border-color:transparent}div.chatLog div.node div.avatar div.border{display:none}div.fragment.conversation.GROUP div.chat div.log div.node:not(.me) div.avatar div.img:hover::before{background:none;box-shadow:0 0 0 5px WindowText}div.chatLog div.node div.confirmAuthRequest div.controls button{border:1px solid WindowText}div.chatLog div.node div.message a[href]:hover{color:highlight}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.chatLog div.node.me:not(.notification)+div.node:not(.me) { + border-top: none +} + +div.chatLog { + overflow-y: auto; + overflow-x: hidden; + -ms-user-select: element; + height: 100% +} + +div.chatLog div.ariaLiveContainer { + display: none +} + +div.chatLog div.messagesContainer { + overflow-y: auto; + overflow-x: hidden; + height: 100%; + touch-action: pan-y +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog { + margin-right: 0px; + padding-right: 0px +} + +body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog { + margin-left: 0px; + padding-left: 0px +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node[type="videomessage"] div.videoMessage { + top: -8px +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node { + -ms-grid-columns: 58px 1fr +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.message { + padding-left: 0 +} + +body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.message { + padding-left: 10px +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.message h3.name { + width: 150px; + overflow: hidden; + text-overflow: ellipsis +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.message div.fileTransfersContainer>div { + padding-right: 20px +} + +body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.message div.fileTransfersContainer>div { + padding-right: 0; + padding-left: 20px +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.message div.fileTransferMessage div.fileTransfersContainer.ISMULTIFILETRANSFER>div { + width: 100%; + min-width: 0 +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.message time { + margin-right: 20px +} + +body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.message time { + margin-right: 0px; + margin-left: 20px +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.avatar div.img { + right: 5px; + top: -4px; + width: 30px; + height: 30px; + border-width: 4px +} + +body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.avatar div.img { + right: auto; + left: 5px +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.avatar div.img div.protectionLayer { + background: url("/images/svg/prot30x30circle.svg") no-repeat +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.avatar div.border { + right: 4px; + top: -5px; + width: 38px; + height: 38px; + clip: rect(0px, 43px, 5px, 0px) +} + +body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.avatar div.border { + right: auto; + left: 4px +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node.EDITED div.message time { + margin-right: 20px +} + +body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node.EDITED div.message time { + margin-right: 0px; + margin-left: 20px +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.EDITED) div.message time { + margin-right: 20px +} + +body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.EDITED) div.message time { + margin-right: 20px; + margin-left: 20px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.EDITED):not(.light) div.message time { + margin-left: 20px; + margin-right: 0px + } +} + +@media screen and (min-aspect-ratio: 1 / 1) { + div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.light):not(.SMS) div.message div.edited { + margin-top: -21px + } + div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.light):not(.SMS) div.message time { + margin-top: -18px + } + div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.light):not(.SMS) div.message:hover div.edited { + margin-top: -13px + } +} + +@media screen and (min-aspect-ratio: 1 / 1) { + div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.light).SMS div.message div.edited { + margin-top: 0 + } + div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.light).SMS div.message time { + margin-top: -18px + } +} + +@media screen and (min-aspect-ratio: 1 / 1) { + div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.SMS) div.message:hover time { + margin-right: 20px + } + body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.SMS) div.message:hover time { + margin-right: 0px; + margin-left: 20px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node:not(.SMS) div.message:hover time { + margin-right: 0px; + margin-left: 20px + } +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node.notification[type="group"] div.message, +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node.notification[type="blocked"] div.message { + -ms-grid-columns: 1px 1fr; + -ms-grid-column: 2 +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node.notification[type="group"] div.message div.avatar, +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node.notification[type="blocked"] div.message div.avatar { + min-height: 30px +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node.notification[type="group"] div.message div.avatar div.img, +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node.notification[type="blocked"] div.message div.avatar div.img { + width: 30px +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node.notification div.iconContainer span.icon { + font-size: 15px; + right: 6px +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node.unsupported div.iconContainer span.icon { + font-size: 24px; + right: 12px +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node[type="videomessage"] { + height: 260px +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node[type="videomessage"] div.videoMessage { + height: 225px +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chatLog div.node div.node.light[type="videomessage"] { + height: 255px +} + +div.chatLog div.list-selectable:focus { + border: 2px solid #00aff0 !important +} + +div.chatLog div.rateCallQualityNode div.rating:focus { + border: 2px solid #00aff0 +} + +div.chatLog div.node { + position: relative; + display: -ms-grid; + box-sizing: border-box; + -ms-grid-columns: minmax(128px, 1fr) minmax(660px, 940px) minmax(136px, 1fr); + -ms-grid-rows: 1fr; + border-top: 1px solid #E7F1F5; + outline: none +} + +div.chatLog div.node.light, +div.chatLog div.node.me { + border-top: none +} + +div.chatLog div.node time.date em { + color: #d6d6d6; + font-weight: 100; + margin: 0 1px +} + +div.chatLog div.node div.avatar { + -ms-grid-column: 1; + position: relative; + overflow: visible; + -ms-high-contrast-adjust: none +} + +div.chatLog div.node div.avatar div.img { + position: absolute; + right: 0px; + top: -8px; + width: 40px; + height: 40px; + border-radius: 50%; + border: 8px solid #fff; + background-image: url("/images/avatar.default.unknown.png"); + z-index: 8 +} + +body.RTL div.chatLog div.node div.avatar div.img { + right: auto; + left: 0 +} + +div.chatLog div.node div.avatar div.img div.protectionLayer { + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + background: url("/images/svg/prot40x40circle.svg") no-repeat +} + +div.chatLog div.node div.avatar.DEFAULTAVATAR div.protectionLayer { + background-image: none +} + +div.chatLog div.node div.avatar div.border { + position: absolute; + right: -1px; + top: -9px; + width: 56px; + height: 56px; + border: 1px solid #E7F1F5; + border-radius: 50%; + background-color: #fff; + clip: rect(0px, 57px, 9px, 0px); + z-index: 7 +} + +body.RTL div.chatLog div.node div.avatar div.border { + right: auto; + left: -1px +} + +div.chatLog div.node.me { + background-color: #D8F3FE +} + +div.chatLog div.node.me div.avatar div.img { + border-color: #D8F3FE +} + +div.chatLog div.node.me div.avatar div.border { + display: none +} + +div.chatLog div.node.me div.message { + background-color: #D8F3FE +} + +div.chatLog div.node div.message { + -ms-grid-column: 2; + padding: 0 0 0 13px; + background-color: #fff; + -ms-user-select: text +} + +div.chatLog div.node div.message span.deleted { + color: #939999 +} + +div.chatLog div.node div.message a[href]:hover { + color: #0182b3 +} + +div.chatLog div.node div.message a[href]:active { + color: #015c80 +} + +div.chatLog div.node div.message a[href*='skype:+']:after, +div.chatLog div.node div.message a[href*='skype:+']:before { + content: "\200E" +} + +div.chatLog div.node div.message h3.name { + color: #00aff0; + margin-top: 10px; + font-weight: 600 +} + +div.chatLog div.node div.message h3.name a { + color: #0095cc +} + +div.chatLog div.node div.confirmAuthRequest div.controls { + padding-top: 1em; + white-space: normal +} + +div.chatLog div.node div.confirmAuthRequest div.controls button { + max-width: 250px; + font-weight: normal +} + +div.chat.LIVE div.chatLog div.node div.confirmAuthRequest div.controls button { + margin-bottom: 10px; + height: auto; + min-height: 30px +} + +body.RTL div.chatLog div.node div.confirmAuthRequest div.controls button { + margin-left: 10px; + margin-right: 0 +} + +div.chatLog div.node.unsupported { + margin-top: 10px +} + +div.chatLog div.node.unsupported div.message { + color: #93999d; + padding-top: 30px; + padding-bottom: 30px +} + +div.chatLog div.node.unsupported div.message span.name { + display: none +} + +div.chatLog div.node.unsupported div.message time { + padding-left: 20px +} + +body.RTL div.chatLog div.node.unsupported div.message time { + padding-left: 0; + padding-right: 20px +} + +div.chatLog div.node.unsupported div.message div.body { + white-space: normal +} + +div.chatLog div.node.unsupported div.iconContainer span.icon { + font-family: "Skype UI Symbol" !important; + font-weight: bold; + position: absolute; + right: 16px; + top: 25px +} + +body.RTL div.chatLog div.node.unsupported div.iconContainer span.icon { + right: auto; + left: 16px +} + +div.chatLog div.node.unsupported[type='file'] div.iconContainer span.icon::before { + content: "\E306" +} + +div.chatLog div.node.unsupported[type='auth'] div.iconContainer span.icon::before { + content: "\E201" +} + +div.chatLog div.node.unsupported[type='contacts'] div.iconContainer span.icon::before { + content: "\E201" +} + +div.chatLog div.node.unsupported[type='voicemail'] div.iconContainer span.icon::before { + content: "\E304" +} + +div.chatLog div.node.unsupported[type='videomessage'] div.iconContainer span.icon::before { + content: "\E305" +} + +div.chatLog div.node.me:not(.notification)+div.node:not(.me)>div.avatar div.border { + display: none +} + +div.fragment.conversation.GROUP div.chat div.log div.node:not(.me) div.avatar div.img:hover::before { + content: ' '; + display: block; + position: absolute; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.15); + pointer-events: none; + border-radius: 50% +} + +div.fragment.conversation.GROUP div.chat div.log div.node:not(.me) div.message h3.name a:hover { + color: #0182b3 +} + +div.fragment.conversation.GROUP div.chat div.log div.node:not(.me) div.message h3.name a:active { + color: #015c80 +} + +div.chatLog div.node.notification { + background-color: #fff; + color: #93999d; + border-top: 1px solid #E7F1F5 +} + +div.chatLog div.node div.iconContainer span.icon { + color: #93999d +} + +div.chatLog div.node.me:not(.notification)+div.node.notification { + border-top: none +} + +div.chatLog div.node.notification div.iconContainer, +div.chatLog div.node.unsupported div.iconContainer { + -ms-grid-column: 1; + position: relative +} + +div.chatLog div.node.notification div.iconContainer span.icon { + position: absolute; + right: 5px; + top: 25px; + font-family: "Skype UI Symbol" !important; + font-weight: bold; + margin-right: 10px +} + +body.RTL div.chatLog div.node.notification div.iconContainer span.icon { + right: auto; + left: 5px; + margin-right: 0; + margin-left: 10px +} + +div.chatLog div.node.notification div.message { + padding-bottom: 5px; + padding-top: 20px +} + +div.chatLog div.node.me.notification div.message { + background-color: #fff +} + +div.chatLog div.node:not(.unsupported) div.message div.body { + padding-bottom: 15px +} + +div.chatLog div.node.notification div.message div.body { + word-wrap: normal +} + +div.chatLog div.node.notification div.message div.body span { + margin-right: 5px +} + +body.RTL div.chatLog div.node.notification div.message div.body span { + margin-right: 0; + margin-left: 5px +} + +div.chatLog div.node.notification div.message div.body span.msgDetail { + font-size: 9pt +} + +div.chatLog div.node.notification.genericNotification, +div.chatLog div.node.notification[type="blocked"] { + margin-top: 0px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.chatLog div.node.notification.genericNotification, + div.chatLog div.node.notification[type="blocked"] { + -ms-grid-columns: 30px 1fr 30px + } +} + +div.chatLog div.node.notification.genericNotification div.message, +div.chatLog div.node.notification[type="blocked"] div.message { + padding-right: 0; + padding-left: 0 +} + +div.chatLog div.node.notification.genericNotification div.message div.body, +div.chatLog div.node.notification[type="blocked"] div.message div.body { + text-align: center; + padding-right: 0; + padding-left: 0 +} + +div.chatLog div.node.notification.genericNotification div.message div.body strong, +div.chatLog div.node.notification[type="blocked"] div.message div.body strong { + font-weight: normal +} + +div.chatLog div.node div.message div.body { + padding-right: 80px; + word-wrap: break-word; + white-space: pre-wrap +} + +body.RTL div.chatLog div.node div.message div.body { + padding-right: 0; + padding-left: 80px +} + +div.chatLog div.node div.message.initialAuthRequest div.body div.text::before, +div.chatLog div.node div.message.auth div.body::before, +div.chatLog div.node div.message.authorized div.body::before { + padding-right: 5px +} + +body.RTL div.chatLog div.node div.message.initialAuthRequest div.body div.text::before, +body.RTL div.chatLog div.node div.message.auth div.body::before, +body.RTL div.chatLog div.node div.message.authorized div.body::before { + padding-right: 0; + padding-left: 5px +} + +div.fragment.conversation.SHOWINGFULLLIVE div.chat div.log div.node div.message div.body { + padding-right: 30px +} + +body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chat div.log div.node div.message div.body { + padding-right: 0; + padding-left: 30px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.fragment.conversation.SHOWINGFULLLIVE div.chat div.log div.node div.message div.body { + padding-right: 0px + } + body.RTL div.fragment.conversation.SHOWINGFULLLIVE div.chat div.log div.node div.message div.body { + padding-right: 0; + padding-left: 15px + } +} + +div.chatLog div.node div.message time { + float: right; + text-align: right; + color: #93999d +} + +body.RTL div.chatLog div.node div.message time { + float: left +} + +div.chatLog div.node.notification:not([type='group']) div.message time { + margin-top: -13px +} + +div.chatLog div.node.SMS div.message time { + background: url("/images/svg/sms.svg") no-repeat 0px 0px; + margin-right: 0px; + padding-left: 20px +} + +@media screen and (-ms-high-contrast: active) { + div.chatLog div.node.SMS div.message time { + background: url("/images/svg/sms-hc.svg") no-repeat 0px 0px + } +} + +body.RTL div.chatLog div.node.SMS div.message time { + background-position: top right; + padding-left: 1px; + padding-right: 20px +} + +div.chatLog div.node:not(.SMS) div.message div.edited { + color: #93999d; + display: block; + float: right; + display: block; + width: 20px; + margin-top: -3px +} + +body.RTL div.chatLog div.node:not(.SMS) div.message div.edited { + float: left +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.chatLog div.node:not(.SMS) div.message div.edited { + margin-top: -20px + } +} + +div.chatLog div.node:not(.SMS).light div.message div.edited { + margin-top: -2px +} + +div.chatLog div.node:not(.SMS).me div.message:hover div.edited { + margin-top: 5px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.chatLog div.node:not(.SMS).me div.message:hover div.edited { + margin-top: -15px + } +} + +div.chatLog div.node:not(.SMS).me div.message:hover time { + margin-left: 0 +} + +body.RTL div.chatLog div.node:not(.SMS).me div.message:hover time { + margin-right: 0 +} + +div.chatLog div.node:not(.SMS).me.light div.message:hover div.edited { + margin-top: 5px +} + +div.chatLog div.node:not(.EDITED) div.message time { + margin-left: 20px +} + +body.RTL div.chatLog div.node:not(.EDITED) div.message time { + margin-left: 0px; + margin-right: 20px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.chatLog div.node:not(.EDITED):not(.light) div.message time { + margin-left: 0px + } + body.RTL div.chatLog div.node:not(.EDITED):not(.light) div.message time { + margin-left: 0px; + margin-right: 0px + } +} + +div.chatLog div.node.EDITED div.message div.edited::after, +div.chatLog div.node.me:not(.SMS) div.message:hover div.edited::after { + position: relative; + font-family: "Skype UI Symbol" !important; + font-weight: 300; + font-size: 25px; + content: "\E40D"; + line-height: 10px; + vertical-align: bottom; + right: 4px +} + +body.RTL div.chatLog div.node.EDITED div.message div.edited::after, +body.RTL div.chatLog div.node.me:not(.SMS) div.message:hover div.edited::after { + right: auto; + left: 4px +} + +div.chatLog div.node.me:not(.SMS) div.message:hover div.edited { + background: url("/images/svg/menu-hover.svg") no-repeat; + background-position: center; + height: 12px; + background-size: 10px 10px +} + +@media screen and (-ms-high-contrast: active) { + div.chatLog div.node.me:not(.SMS) div.message:hover div.edited { + background: url("/images/svg/menu-hover-hc.svg") no-repeat + } +} + +div.chatLog div.node.me:not(.SMS) div.message:hover div.edited::after { + content: none +} + +div.chatLog div.node.SMS[smsstatus='delivered'] div.message time { + background: url("/images/svg/sms-delivered.svg") no-repeat 0px 0px +} + +@media screen and (-ms-high-contrast: active) { + div.chatLog div.node.SMS[smsstatus='delivered'] div.message time { + background: url("/images/svg/sms-delivered-hc.svg") no-repeat 0px 0px + } +} + +div.chatLog div.node.SMS[smsstatus='failed'] div.message time { + background: url("/images/svg/sms-failed.svg") no-repeat 0px 0px +} + +@media screen and (-ms-high-contrast: active) { + div.chatLog div.node.SMS[smsstatus='failed'] div.message time { + background: url("/images/svg/sms-failed-hc.svg") no-repeat 0px 0px + } +} + +div.chatLog div.node div.message p { + margin: 5px 0 0 0; + padding: 0 +} + +div.chatLog div.node div.message p:first-child { + margin-top: 0 +} + +div.chatLog div.node[type="file"] div.message div.heading { + color: #6e6e73; + line-height: 20px; + margin-bottom: 8px +} + +div.chatLog div.node[type="file"] div.message div.heading span.icon { + display: inline-block; + font-family: "Skype UI Symbol" !important; + font-weight: bold; + font-size: 20px; + height: 20px; + width: 20px; + margin-right: 5px +} + +div.chatLog div.node[type="file"] div.message div.heading span.icon::before { + content: "\E306" +} + +div.chatLog div.node[type="videomessage"] { + height: 290px +} + +div.chatLog div.node[type="videomessage"] div.videoMessage { + -ms-user-select: none; + width: 100%; + clear: both; + height: 250px; + top: -14px; + position: relative +} + +@media screen and (max-aspect-ratio: 1 / 1) and (max-width: 320px) { + div.chatLog div.node[type="videomessage"] div.videoMessage { + margin-left: -30px + } + div.chatLog div.node[type="videomessage"] div.videoMessage div.preview { + max-width: 270px; + overflow: hidden + } + body.RTL div.chatLog div.node[type="videomessage"] div.videoMessage { + margin-right: -30px; + margin-left: 0 + } +} + +@media screen and (min-aspect-ratio: 1 / 1) { + div.chat.LIVE div.chatLog div.node[type="videomessage"] div.videoMessage { + margin-left: -30px + } + div.chat.LIVE div.chatLog div.node[type="videomessage"] div.videoMessage div.preview { + max-width: 270px; + overflow: hidden + } + body.RTL div.chat.LIVE div.chatLog div.node[type="videomessage"] div.videoMessage { + margin-right: -30px; + margin-left: 0 + } +} + +div.chatLog div.node.light[type="videomessage"] { + height: 260px +} + +div.chatLog div.node div.message div.confirmAuthRequest { + white-space: nowrap +} + +div.chatLog div.node div.message div.confirmAuthRequest>div:not(.controls) { + white-space: normal +} + +.win-ui-dark .win-rating .win-star.win-user.win-full, +.win-ui-dark .win-rating .win-star.win-user.win-full.win-disabled { + color: orange +} + +.win-ui-dark .win-rating .win-star.win-tentative.win-full { + color: red +} + +.win-ui-dark .win-rating .win-star.win-average.win-full, +.win-ui-dark .win-rating .win-star.win-average.win-full.win-disabled { + color: #fff +} + +.win-ui-dark .win-rating .win-star.win-empty { + color: rgba(255, 255, 255, 0.35) +} + +.win-rating .win-star.win-user.win-full, +.win-rating .win-star.win-user.win-full.win-disabled { + color: #00aff0 +} + +.win-rating .win-star.win-tentative.win-full { + color: #93999d +} + +.win-rating .win-star.win-tentative.win-full:active { + color: #0095cc; + transform: scale(0.9, 0.9) +} + +.win-rating .win-star.win-average.win-full, +.win-rating .win-star.win-average.win-full.win-disabled { + color: green +} + +.win-rating .win-star.win-empty { + color: #c9ccce +} + +div.CHATLOG_HOLD_MENU { + min-height: 80px +} + +@media screen and (max-width: 1280px) { + div.chatLog { + margin-right: 0px; + padding-right: 0px + } + body.RTL div.chatLog { + margin-left: 0px; + padding-left: 0px + } + div.chatLog div.node { + -ms-grid-columns: 78px 1fr 30px + } + div.chatLog div.node div.message div.body { + padding-right: 30px + } + body.RTL div.chatLog div.node div.message div.body { + padding-right: 0; + padding-left: 30px + } + div.chatLog div.node.notification.genericNotification { + -ms-grid-columns: 1px 1fr + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.chatLog div.node div.confirmAuthRequest div.controls button { + margin-bottom: 10px; + height: auto; + min-height: 30px + } + div.chatLog div.node, + div.fragment.conversation.SHOWINGFULLLIVE div.chat div.log div.node { + -ms-grid-columns: 58px 1fr + } + html div.chatLog div.nodenot>div, + div.chatLog div.node>div.message { + padding: 0 20px 10px 0px + } + html body.RTL html div.chatLog div.nodenot>div, + html body.RTL div.chatLog div.node>div.message { + padding: 0 0 10px 20px + } + div.chatLog div.node.notification>div.message { + padding: 20px 20px 5px 0px + } + html body.RTL div.chatLog div.node.notification>div.message { + padding: 20px 0 5px 20px + } + div.chatLog div.node div.message h3.name { + line-height: 20px; + max-width: calc(100% - 60px); + height: 20px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + margin-bottom: 0; + margin-top: 4px + } + div.fragment.conversation.SHOWINGFULLLIVE div.chat div.log div.node div.message time { + margin-right: 0 + } + div.chatLog div.node:not(.notification):not(.light):not(.unsupported) div.message time { + margin-top: -19px; + padding-left: 0px + } + body.RTL div.chatLog div.node:not(.notification):not(.light):not(.unsupported) div.message time { + padding-right: 0px + } + div.chatLog div.node.SMS:not(.notification):not(.light):not(.unsupported) div.message time { + padding-left: 20px + } + body.RTL div.chatLog div.node.SMS:not(.notification):not(.light):not(.unsupported) div.message time { + padding-left: 0; + padding-right: 20px + } + div.chatLog div.node.notification:not([type='group']) div.message time { + margin-top: 12px + } + div.chatLog div.node div.message div.body { + padding-right: 0px + } + body.RTL div.chatLog div.node div.message div.body { + padding-left: 0 + } + div.chatLog div.node div.avatar div.img { + right: 5px; + top: -4px; + width: 30px; + height: 30px; + border-width: 4px + } + body.RTL div.chatLog div.node div.avatar div.img { + right: auto; + left: 5px + } + div.chatLog div.node div.avatar div.img div.protectionLayer { + background: url("/images/svg/prot30x30circle.svg") no-repeat + } + div.chatLog div.node div.avatar div.border { + right: 4px; + top: -5px; + width: 38px; + height: 38px; + clip: rect(0px, 43px, 5px, 0px) + } + body.RTL div.chatLog div.node div.avatar div.border { + right: auto; + left: 4px + } + div.fragment.conversation.SHOWINGFULLLIVE div.chat div.log div.node.notification.genericNotification div.fragment.conversation.SHOWINGFULLLIVE div.chat div.log div.node.notification[type="blocked"] { + -ms-grid-columns: 1px 1fr + } + div.chatLog div.node.notification.genericNotification div.message, + div.chatLog div.node.notification[type="blocked"] div.message { + -ms-grid-columns: 1px 1fr; + -ms-grid-column: 2; + padding-left: 20px; + padding-right: 20px + } + div.chatLog div.node.notification.genericNotification div.message div.avatar, + div.chatLog div.node.notification[type="blocked"] div.message div.avatar { + min-height: 30px + } + div.chatLog div.node.notification.genericNotification div.message div.avatar div.img, + div.chatLog div.node.notification[type="blocked"] div.message div.avatar div.img { + width: 30px + } + div.chatLog div.node.notification div.iconContainer span.icon { + font-size: 15px; + right: 6px + } + div.chatLog div.node.unsupported div.iconContainer span.icon { + font-size: 24px; + right: 12px + } + div.chatLog div.node[type="videomessage"] { + height: 260px + } + div.chatLog div.node[type="videomessage"] div.videoMessage { + height: 225px; + position: static; + top: 0 + } + div.chatLog div.node.light[type="videomessage"] { + height: 255px + } +} + +@media screen and (-ms-high-contrast: active) { + div.chatLog div.node div.avatar div.img, + div.chatLog div.node.me div.avatar div.img { + border-color: transparent + } + div.chatLog div.node div.avatar div.border { + display: none + } + div.fragment.conversation.GROUP div.chat div.log div.node:not(.me) div.avatar div.img:hover::before { + background: none; + box-shadow: 0 0 0 5px WindowText + } + div.chatLog div.node div.confirmAuthRequest div.controls button { + border: 1px solid WindowText + } + div.chatLog div.node div.message a[href]:hover { + color: highlight + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/conversation/conversationCallingAnimation.css b/packages/microsoft.skypeapp/controls/conversation/conversationCallingAnimation.css index 8595dd9e..c00ac8c0 100644 --- a/packages/microsoft.skypeapp/controls/conversation/conversationCallingAnimation.css +++ b/packages/microsoft.skypeapp/controls/conversation/conversationCallingAnimation.css @@ -1 +1,382 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.callAnimation{width:100%;height:100%;display:-ms-grid;-ms-grid-rows:1fr;-ms-grid-columns:1fr}div.callAnimation div.bgLayerCallStarting{height:100%;background:-ms-linear-gradient(top, #00aff0 0%, #02a9e9 17%, #0898d5 42%, #127cb4 73%, #1d5e91 100%);opacity:0;transition:opacity 0.5s linear}div.callAnimation div.bgLayerNoise{height:100%;background:url("/images/bgLiveConversationNoise.png") repeat-x}div.callAnimation div.participant{-ms-grid-row-align:center;-ms-grid-column-align:center;display:-ms-grid;width:360px;height:360px;-ms-grid-rows:1fr;-ms-grid-columns:1fr;position:relative}body.KEYBOARDUP div.callAnimation div.participant,body.KEYBOARDUP div.callAnimation div.participant.EMERGENCY{width:300px;height:300px}div.callAnimation div.participant div.emergencyContent{display:none}div.callAnimation div.participant.EMERGENCY div.emergencyContent{display:block;z-index:3;position:absolute;bottom:-60px;padding:0 60px;color:#fff}@media screen and (max-aspect-ratio: 1 / 1){div.callAnimation div.participant.EMERGENCY div.emergencyContent{padding-left:40px;padding-right:40px}}div.callAnimation div.participant div.ringingAnimation{position:absolute;top:50%;left:50%}div.callAnimation div.participant div.ringingAnimation .avatarContainer .avatarImage{background-position:center;background-size:cover;background-repeat:no-repeat;position:absolute;width:270px;height:270px;left:-135px;top:-135px;border-radius:50%;animation-duration:1850ms;animation-iteration-count:infinite}div.callAnimation div.participant div.ringingAnimation .avatarContainer .avatarMask{position:absolute;width:270px;height:270px;left:-145px;top:-145px;border-radius:50%;background-color:transparent;border:10px solid #f4f4f4;animation-duration:1850ms;animation-iteration-count:infinite}div.callAnimation div.participant div.ringingAnimation .avatarCircleContainer{position:absolute}div.callAnimation div.participant div.ringingAnimation .avatarCircleContainer .smallCircleMirror{position:absolute;transform:scale(-1, -1)}div.callAnimation div.participant div.ringingAnimation .avatarCircleContainer .smallCircleMirror .circleSmall{border-radius:50%;position:absolute;width:180px;height:180px;left:-22px;top:-22px;background-color:#f4f4f4;animation-duration:1850ms;animation-iteration-count:infinite}div.callAnimation div.participant div.ringingAnimation .avatarCircleContainer .circleSmall{border-radius:50%;position:absolute;width:180px;height:180px;left:-22px;top:-22px;background-color:#f4f4f4;animation-duration:1850ms;animation-iteration-count:infinite}div.callAnimation div.participant div.ringingAnimation .radGrad{position:absolute;width:200px;height:200px;left:-100px;top:-100px;border-radius:50%;background-color:#f4f4f4;animation-duration:1850ms;animation-iteration-count:infinite}div.callAnimation div.participant div.ringingAnimation .radGradSml{opacity:0.2}div.callAnimation div.participant div.ringingAnimation .radGradMid{opacity:0.15}div.callAnimation div.participant div.ringingAnimation .radGradLrg{opacity:0.07}div.callAnimation div.participant div.ringingAnimation .circleMain{position:absolute;width:300px;height:300px;left:-150px;top:-150px}div.callAnimation div.participant div.ringingAnimation .connectingArrows{display:none}div.callAnimation div.participant div.ringingAnimation .connectingArrows .bgTint{position:absolute;width:270px;height:270px;left:-135px;top:-135px;border-radius:50%;background:rgba(0,0,0,0.25)}div.callAnimation div.participant div.ringingAnimation .connectingArrows .connectingIcon{font-family:"Skype UI Symbol";font-size:120pt;line-height:normal;text-align:center;vertical-align:middle;color:#f4f4f4;position:absolute;margin-left:-79px;margin-top:-79px;transform-origin:80px 80px;animation-name:rotateAnim;animation-duration:1s;animation-iteration-count:infinite}.small div.callAnimation div.participant div.ringingAnimation{transform:scale(0.3, 0.3)}.medium div.callAnimation div.participant div.ringingAnimation{transform:scale(0.7, 0.7)}.large div.callAnimation div.participant div.ringingAnimation{transform:scale(1.2, 1.2)}@media screen and (max-aspect-ratio: 1 / 1){div.callAnimation div.participant div.ringingAnimation{transform:scale(0.7, 0.7)}}div.callAnimation div.participant.ANIMATE div.ringingAnimation .connectingArrows{display:none}div.callAnimation div.participant.ANIMATE div.ringingAnimation .avatarImage{animation-name:aniAvatar}div.callAnimation div.participant.ANIMATE div.ringingAnimation .avatarMask{animation-name:aniAvatarMask}div.callAnimation div.participant.ANIMATE div.ringingAnimation .circleSmall{animation-name:aniCircleSmallMove}div.callAnimation div.participant.ANIMATE div.ringingAnimation .radGradSml{animation-name:aniCircleTwo}div.callAnimation div.participant.ANIMATE div.ringingAnimation .radGradMid{animation-name:aniCircleThree}div.callAnimation div.participant.ANIMATE div.ringingAnimation .radGradLrg{animation-name:aniCircleFour}div.callAnimation div.participant.ANIMATE div.ringingAnimation .circleMain{animation-name:aniCircleOne}div.callAnimation div.participant.CONNECTING div.ringingAnimation .connectingArrows{display:block}@keyframes aniCircleSmallMove{0%{transform:scale(1) translate(0px, 0px);animation-timing-function:cubic-bezier(0.33, 0, 0, 1)}56.36%{transform:scale(0.93) translate(-17px, -17px);animation-timing-function:cubic-bezier(1, 0, 0.78, 1)}78.18%{transform:scale(1.08) translate(3px, 3px);animation-timing-function:cubic-bezier(0.33, 0, 0.67, 1)}100%{transform:scale(1) translate(0px, 0px)}}@keyframes aniCircleOne{0%{transform:scale(1);animation-timing-function:cubic-bezier(0.33, 0, 0, 1)}56.36%{transform:scale(0.88);animation-timing-function:cubic-bezier(1, 0, 0.78, 1)}78.18%{transform:scale(1.06);animation-timing-function:cubic-bezier(0.33, 0, 0.67, 1)}100%{transform:scale(1)}}@keyframes aniCircleTwo{0%{transform:scale(1);animation-timing-function:cubic-bezier(0.33, 0, 0, 1)}40%{transform:scale(1.6);animation-timing-function:cubic-bezier(0.5, 0, 1, 1)}61.82%{transform:scale(1);animation-timing-function:steps(1)}100%{transform:scale(0);animation-timing-function:steps(1)}}@keyframes aniCircleThree{0%{transform:scale(1);animation-timing-function:cubic-bezier(0.33, 0, 0, 1)}45.45%{transform:scale(1.95);animation-timing-function:cubic-bezier(0.7, 0, 1, 1)}67.27%{transform:scale(1);animation-timing-function:steps(1)}100%{transform:scale(0);animation-timing-function:steps(1)}}@keyframes aniCircleFour{0%{transform:scale(1);animation-timing-function:cubic-bezier(0.33, 0, 0, 1)}50.91%{transform:scale(2.3);animation-timing-function:cubic-bezier(0.9, 0, 1, 1)}72.73%{transform:scale(1);animation-timing-function:steps(1)}100%{transform:scale(0);animation-timing-function:steps(1)}}@keyframes aniAvatar{0%{transform:scale(1);animation-timing-function:cubic-bezier(0.33, 0, 0, 1)}56.36%{transform:scale(0.95);animation-timing-function:cubic-bezier(1, 0, 0.78, 1)}78.18%{transform:scale(1.04);animation-timing-function:cubic-bezier(0.33, 0, 0.67, 1)}100%{transform:scale(1)}}@keyframes aniAvatarMask{0%{transform:scale(1);animation-timing-function:cubic-bezier(0.33, 0, 0, 1)}56.36%{transform:scale(0.91);animation-timing-function:cubic-bezier(1, 0, 0.78, 1)}78.18%{transform:scale(1.06);animation-timing-function:cubic-bezier(0.33, 0, 0.67, 1)}100%{transform:scale(1)}}@keyframes rotateAnim{0%{transform:rotate(0deg);animation-timing-function:linear}100%{transform:rotate(180deg)}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.callAnimation { + width: 100%; + height: 100%; + display: -ms-grid; + -ms-grid-rows: 1fr; + -ms-grid-columns: 1fr +} + +div.callAnimation div.bgLayerCallStarting { + height: 100%; + background: -ms-linear-gradient(top, #00aff0 0%, #02a9e9 17%, #0898d5 42%, #127cb4 73%, #1d5e91 100%); + opacity: 0; + transition: opacity 0.5s linear +} + +div.callAnimation div.bgLayerNoise { + height: 100%; + background: url("/images/bgLiveConversationNoise.png") repeat-x +} + +div.callAnimation div.participant { + -ms-grid-row-align: center; + -ms-grid-column-align: center; + display: -ms-grid; + width: 360px; + height: 360px; + -ms-grid-rows: 1fr; + -ms-grid-columns: 1fr; + position: relative +} + +body.KEYBOARDUP div.callAnimation div.participant, +body.KEYBOARDUP div.callAnimation div.participant.EMERGENCY { + width: 300px; + height: 300px +} + +div.callAnimation div.participant div.emergencyContent { + display: none +} + +div.callAnimation div.participant.EMERGENCY div.emergencyContent { + display: block; + z-index: 3; + position: absolute; + bottom: -60px; + padding: 0 60px; + color: #fff +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.callAnimation div.participant.EMERGENCY div.emergencyContent { + padding-left: 40px; + padding-right: 40px + } +} + +div.callAnimation div.participant div.ringingAnimation { + position: absolute; + top: 50%; + left: 50% +} + +div.callAnimation div.participant div.ringingAnimation .avatarContainer .avatarImage { + background-position: center; + background-size: cover; + background-repeat: no-repeat; + position: absolute; + width: 270px; + height: 270px; + left: -135px; + top: -135px; + border-radius: 50%; + animation-duration: 1850ms; + animation-iteration-count: infinite +} + +div.callAnimation div.participant div.ringingAnimation .avatarContainer .avatarMask { + position: absolute; + width: 270px; + height: 270px; + left: -145px; + top: -145px; + border-radius: 50%; + background-color: transparent; + border: 10px solid #f4f4f4; + animation-duration: 1850ms; + animation-iteration-count: infinite +} + +div.callAnimation div.participant div.ringingAnimation .avatarCircleContainer { + position: absolute +} + +div.callAnimation div.participant div.ringingAnimation .avatarCircleContainer .smallCircleMirror { + position: absolute; + transform: scale(-1, -1) +} + +div.callAnimation div.participant div.ringingAnimation .avatarCircleContainer .smallCircleMirror .circleSmall { + border-radius: 50%; + position: absolute; + width: 180px; + height: 180px; + left: -22px; + top: -22px; + background-color: #f4f4f4; + animation-duration: 1850ms; + animation-iteration-count: infinite +} + +div.callAnimation div.participant div.ringingAnimation .avatarCircleContainer .circleSmall { + border-radius: 50%; + position: absolute; + width: 180px; + height: 180px; + left: -22px; + top: -22px; + background-color: #f4f4f4; + animation-duration: 1850ms; + animation-iteration-count: infinite +} + +div.callAnimation div.participant div.ringingAnimation .radGrad { + position: absolute; + width: 200px; + height: 200px; + left: -100px; + top: -100px; + border-radius: 50%; + background-color: #f4f4f4; + animation-duration: 1850ms; + animation-iteration-count: infinite +} + +div.callAnimation div.participant div.ringingAnimation .radGradSml { + opacity: 0.2 +} + +div.callAnimation div.participant div.ringingAnimation .radGradMid { + opacity: 0.15 +} + +div.callAnimation div.participant div.ringingAnimation .radGradLrg { + opacity: 0.07 +} + +div.callAnimation div.participant div.ringingAnimation .circleMain { + position: absolute; + width: 300px; + height: 300px; + left: -150px; + top: -150px +} + +div.callAnimation div.participant div.ringingAnimation .connectingArrows { + display: none +} + +div.callAnimation div.participant div.ringingAnimation .connectingArrows .bgTint { + position: absolute; + width: 270px; + height: 270px; + left: -135px; + top: -135px; + border-radius: 50%; + background: rgba(0, 0, 0, 0.25) +} + +div.callAnimation div.participant div.ringingAnimation .connectingArrows .connectingIcon { + font-family: "Skype UI Symbol" !important; + font-size: 120pt; + line-height: normal; + text-align: center; + vertical-align: middle; + color: #f4f4f4; + position: absolute; + margin-left: -79px; + margin-top: -79px; + transform-origin: 80px 80px; + animation-name: rotateAnim; + animation-duration: 1s; + animation-iteration-count: infinite +} + +.small div.callAnimation div.participant div.ringingAnimation { + transform: scale(0.3, 0.3) +} + +.medium div.callAnimation div.participant div.ringingAnimation { + transform: scale(0.7, 0.7) +} + +.large div.callAnimation div.participant div.ringingAnimation { + transform: scale(1.2, 1.2) +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.callAnimation div.participant div.ringingAnimation { + transform: scale(0.7, 0.7) + } +} + +div.callAnimation div.participant.ANIMATE div.ringingAnimation .connectingArrows { + display: none +} + +div.callAnimation div.participant.ANIMATE div.ringingAnimation .avatarImage { + animation-name: aniAvatar +} + +div.callAnimation div.participant.ANIMATE div.ringingAnimation .avatarMask { + animation-name: aniAvatarMask +} + +div.callAnimation div.participant.ANIMATE div.ringingAnimation .circleSmall { + animation-name: aniCircleSmallMove +} + +div.callAnimation div.participant.ANIMATE div.ringingAnimation .radGradSml { + animation-name: aniCircleTwo +} + +div.callAnimation div.participant.ANIMATE div.ringingAnimation .radGradMid { + animation-name: aniCircleThree +} + +div.callAnimation div.participant.ANIMATE div.ringingAnimation .radGradLrg { + animation-name: aniCircleFour +} + +div.callAnimation div.participant.ANIMATE div.ringingAnimation .circleMain { + animation-name: aniCircleOne +} + +div.callAnimation div.participant.CONNECTING div.ringingAnimation .connectingArrows { + display: block +} + +@keyframes aniCircleSmallMove { + 0% { + transform: scale(1) translate(0px, 0px); + animation-timing-function: cubic-bezier(0.33, 0, 0, 1) + } + 56.36% { + transform: scale(0.93) translate(-17px, -17px); + animation-timing-function: cubic-bezier(1, 0, 0.78, 1) + } + 78.18% { + transform: scale(1.08) translate(3px, 3px); + animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1) + } + 100% { + transform: scale(1) translate(0px, 0px) + } +} + +@keyframes aniCircleOne { + 0% { + transform: scale(1); + animation-timing-function: cubic-bezier(0.33, 0, 0, 1) + } + 56.36% { + transform: scale(0.88); + animation-timing-function: cubic-bezier(1, 0, 0.78, 1) + } + 78.18% { + transform: scale(1.06); + animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1) + } + 100% { + transform: scale(1) + } +} + +@keyframes aniCircleTwo { + 0% { + transform: scale(1); + animation-timing-function: cubic-bezier(0.33, 0, 0, 1) + } + 40% { + transform: scale(1.6); + animation-timing-function: cubic-bezier(0.5, 0, 1, 1) + } + 61.82% { + transform: scale(1); + animation-timing-function: steps(1) + } + 100% { + transform: scale(0); + animation-timing-function: steps(1) + } +} + +@keyframes aniCircleThree { + 0% { + transform: scale(1); + animation-timing-function: cubic-bezier(0.33, 0, 0, 1) + } + 45.45% { + transform: scale(1.95); + animation-timing-function: cubic-bezier(0.7, 0, 1, 1) + } + 67.27% { + transform: scale(1); + animation-timing-function: steps(1) + } + 100% { + transform: scale(0); + animation-timing-function: steps(1) + } +} + +@keyframes aniCircleFour { + 0% { + transform: scale(1); + animation-timing-function: cubic-bezier(0.33, 0, 0, 1) + } + 50.91% { + transform: scale(2.3); + animation-timing-function: cubic-bezier(0.9, 0, 1, 1) + } + 72.73% { + transform: scale(1); + animation-timing-function: steps(1) + } + 100% { + transform: scale(0); + animation-timing-function: steps(1) + } +} + +@keyframes aniAvatar { + 0% { + transform: scale(1); + animation-timing-function: cubic-bezier(0.33, 0, 0, 1) + } + 56.36% { + transform: scale(0.95); + animation-timing-function: cubic-bezier(1, 0, 0.78, 1) + } + 78.18% { + transform: scale(1.04); + animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1) + } + 100% { + transform: scale(1) + } +} + +@keyframes aniAvatarMask { + 0% { + transform: scale(1); + animation-timing-function: cubic-bezier(0.33, 0, 0, 1) + } + 56.36% { + transform: scale(0.91); + animation-timing-function: cubic-bezier(1, 0, 0.78, 1) + } + 78.18% { + transform: scale(1.06); + animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1) + } + 100% { + transform: scale(1) + } +} + +@keyframes rotateAnim { + 0% { + transform: rotate(0deg); + animation-timing-function: linear + } + 100% { + transform: rotate(180deg) + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/conversation/conversationParticipantStream.css b/packages/microsoft.skypeapp/controls/conversation/conversationParticipantStream.css index 17f503d7..39fbc170 100644 --- a/packages/microsoft.skypeapp/controls/conversation/conversationParticipantStream.css +++ b/packages/microsoft.skypeapp/controls/conversation/conversationParticipantStream.css @@ -1 +1,353 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.conversationParticipantStream{color:#fff;position:relative;display:block}div.conversationParticipantStream div.videoAndAvatarContainer{display:-ms-grid;-ms-grid-rows:1fr;-ms-grid-columns:1fr}div.conversationParticipantStream div.videoParticipant{display:none;-ms-grid-columns:1fr;-ms-grid-rows:1fr;transform-origin:0% 0%;overflow:hidden}div.conversationParticipantStream div.videoParticipant video.videoView{outline:none}div.conversationParticipantStream div.participant{animation-play-state:paused;display:-ms-grid;-ms-grid-columns:1fr;-ms-grid-rows:1fr}div.conversationParticipantStream div.participant progress{position:absolute;left:calc(50% - 30px);top:calc(50% - 30px);display:none}div.conversationParticipantStream div.participant div.avatarCont div.protectionLayer{display:block;background:none}@media screen and (-ms-high-contrast: active){div.conversationParticipantStream div.participant div.avatarCont div.protectionLayer{-ms-high-contrast-adjust:none}}div.conversationParticipantStream div.participantStatusIcon{display:none}div.conversationParticipantStream div.participantStatusLabel{display:none;position:absolute;bottom:34px;z-index:51;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%;text-align:center;line-height:1;display:block;line-height:25px}@media screen and (max-aspect-ratio: 1 / 1){div.conversationParticipantStream div.participantStatusLabel{font-size:12px}}div.stage div.conversationParticipantStream.VIDEOISSTARTING:not(.ONHOLD):not(.ISENDING) div.participant div.avatarCont,div.presentation div.conversationParticipantStream.VIDEOISSTARTING:not(.ONHOLD):not(.ISENDING) div.participant div.avatarCont,div.stage div.conversationParticipantStream.VIDEOISRECOVERING div.participant div.avatarCont,div.presentation div.conversationParticipantStream.VIDEOISRECOVERING div.participant div.avatarCont{opacity:0}div.stage div.conversationParticipantStream.VIDEOISSTARTING:not(.ONHOLD):not(.ISENDING) div.participant progress,div.presentation div.conversationParticipantStream.VIDEOISSTARTING:not(.ONHOLD):not(.ISENDING) div.participant progress,div.stage div.conversationParticipantStream.VIDEOISRECOVERING div.participant progress,div.presentation div.conversationParticipantStream.VIDEOISRECOVERING div.participant progress{display:block}div.conversationParticipantStream.ENDING div.participantStatusLabel,div.conversationParticipantStream.CONNECTING div.participantStatusLabel,div.conversationParticipantStream.ONHOLD div.participantStatusLabel{display:block}div.conversationParticipantStream.ENDING div.participant,div.conversationParticipantStream.CONNECTING div.participant,div.conversationParticipantStream.ONHOLD div.participant{animation-play-state:paused;animation-duration:0.1s;animation-delay:2.5s;animation-fill-mode:forwards;animation-play-state:running;animation-timing-function:cubic-bezier(0.17, 0.67, 0.65, 0.75)}div.conversationParticipantStream.ENDING div.participant div.avatarCont div.protectionLayer,div.conversationParticipantStream.CONNECTING div.participant div.avatarCont div.protectionLayer,div.conversationParticipantStream.ONHOLD div.participant div.avatarCont div.protectionLayer{background-color:rgba(0,0,0,0.5);position:static}div.conversationParticipantStream.ENDING div.participant div.participantStatusIcon,div.conversationParticipantStream.CONNECTING div.participant div.participantStatusIcon,div.conversationParticipantStream.ONHOLD div.participant div.participantStatusIcon{display:block;font-family:"Skype UI Symbol";font-size:122pt;color:white;width:100%;text-align:center;top:50%;position:absolute;z-index:51}div.conversationParticipantStream.ENDING div.participant{animation-name:participantIsEndingAvatarAnimation}div.conversationParticipantStream.ENDING div.participant div.participantStatusIcon:after{content:"\E111"}@media screen and (-ms-high-contrast: black-on-white){div.conversationParticipantStream.ENDING div.participant div.participantStatusIcon:after{color:white}}div.conversationParticipantStream.CONNECTING div.participant div.participantStatusIcon:after{content:"\E10F"}@media screen and (-ms-high-contrast: black-on-white){div.conversationParticipantStream.CONNECTING div.participant div.participantStatusIcon:after{color:white}}div.conversationParticipantStream.ONHOLD div.participant div.participantStatusIcon:after{content:"\E40F"}@media screen and (-ms-high-contrast: black-on-white){div.conversationParticipantStream.ONHOLD div.participant div.participantStatusIcon:after{color:white}}div.conversationParticipantStream div.name{position:absolute;bottom:8px;z-index:51;width:100%;text-align:center;line-height:1;display:block}@media screen and (max-aspect-ratio: 1 / 1){div.conversationParticipantStream div.name{font-size:12px}}div.conversationParticipantStream div.name div{padding:9px 20px;border-radius:2vh;font-size:12px;font-weight:bold;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:80%}@media screen and (max-aspect-ratio: 1 / 1){div.conversationParticipantStream div.name div{padding:8px 20px}}div.CHATOPEN.liveGroupConversation div.viewport div.gallery div.stage div.conversationParticipantStream div.name div{background:rgba(0,0,0,0.5)}div.stage div.conversationParticipantStream div.participant div.avatarCont,div.presentation div.conversationParticipantStream div.participant div.avatarCont{max-width:50%;max-height:66.66%;width:100vw;height:100vw;-ms-grid-column-align:center;-ms-grid-row-align:center}div.stage div.conversationParticipantStream.SPEAKING,div.presentation div.conversationParticipantStream.SPEAKING{box-shadow:0 5px rgba(0,149,204,0.5)}@media screen and (-ms-high-contrast: active){div.stage div.conversationParticipantStream.SPEAKING,div.presentation div.conversationParticipantStream.SPEAKING{box-shadow:0 5px windowtext}}div.stage div.conversationParticipantStream:not(.SPEAKING),div.presentation div.conversationParticipantStream:not(.SPEAKING){box-shadow:0 5px rgba(0,149,204,0);transition:box-shadow 0 linear 1s}div.presentation div.conversationParticipantStream.VIDEOISVISIBLE div.name,div.presentation div.conversationParticipantStream.VIDEOISSTARTING div.name{display:none}div.presentation div.conversationParticipantStream.ONHOLD div.participant div.avatarCont{max-width:440px;max-height:440px}div.roster div.conversationParticipantStream div.participantStatusLabel,div.presentationSpeaker div.conversationParticipantStream div.participantStatusLabel{bottom:26px;font-size:12px;line-height:20px}div.roster div.conversationParticipantStream div.name,div.presentationSpeaker div.conversationParticipantStream div.name{padding:20px 0 3px 0;background-image:url("/images/ribbonProtection.png");background-repeat:repeat-x;background-position-y:bottom;z-index:51;bottom:0}@media screen and (-ms-high-contrast: active){div.roster div.conversationParticipantStream div.name,div.presentationSpeaker div.conversationParticipantStream div.name{padding:0;margin:5px;box-sizing:border-box;width:calc(100% - 10px)}div.roster div.conversationParticipantStream div.name div,div.presentationSpeaker div.conversationParticipantStream div.name div{padding:4px 0 !important}}div.roster div.conversationParticipantStream div.name div,div.presentationSpeaker div.conversationParticipantStream div.name div{background:none;max-width:80%;padding:7px 0}div.roster div.conversationParticipantStream.ENDING div.participant div.participantStatusIcon,div.roster div.conversationParticipantStream.CONNECTING div.participant div.participantStatusIcon,div.roster div.conversationParticipantStream.ONHOLD div.participant div.participantStatusIcon,div.presentationSpeaker div.conversationParticipantStream.ENDING div.participant div.participantStatusIcon,div.presentationSpeaker div.conversationParticipantStream.CONNECTING div.participant div.participantStatusIcon,div.presentationSpeaker div.conversationParticipantStream.ONHOLD div.participant div.participantStatusIcon{font-size:72pt}div.conversationParticipantStream.VIDEOISVISIBLE:not(.ONHOLD):not(.ISENDING):not(.VIDEOISRECOVERING) div.videoParticipant{display:-ms-grid}div.conversationParticipantStream.VIDEOISVISIBLE:not(.ONHOLD):not(.ISENDING):not(.VIDEOISRECOVERING) div.participant{display:none}div.liveGroupConversation.IMMERSIVE div.conversationParticipantStream.VIDEOISVISIBLE:not(.ONHOLD):not(.ISENDING):not(.VIDEOISRECOVERING) div.name{display:none}div.stage div.conversationParticipantStream.VIDEOISVISIBLE:not(.ONHOLD):not(.ISENDING):not(.VIDEOISRECOVERING) div.name,div.presentation div.conversationParticipantStream.VIDEOISVISIBLE:not(.ONHOLD):not(.ISENDING):not(.VIDEOISRECOVERING) div.name{bottom:8px}div.stage div.conversationParticipantStream.VIDEOISVISIBLE:not(.ONHOLD):not(.ISENDING):not(.VIDEOISRECOVERING) div.name div,div.presentation div.conversationParticipantStream.VIDEOISVISIBLE:not(.ONHOLD):not(.ISENDING):not(.VIDEOISRECOVERING) div.name div{background:rgba(0,0,0,0.5);display:inline-block;max-width:80%}div.liveGroupConversation.IMMERSIVE div.roster div.conversationParticipantStream.VIDEOISVISIBLE:not(.ONHOLD):not(.ISENDING):not(.VIDEOISRECOVERING) div.name{display:block}div.roster div.conversationParticipantStream.VIDEOISVISIBLE:not(.ONHOLD):not(.ISENDING):not(.VIDEOISRECOVERING) div.participant{display:block}div.roster div.conversationParticipantStream.VIDEOISVISIBLE:not(.ONHOLD):not(.ISENDING):not(.VIDEOISRECOVERING) div.videoParticipant{display:none}div.presentation div.conversationParticipantStream:not(.ONHOLD):not(.ISENDING) div.participant div.avatarCont{opacity:0}div.conversationParticipantStream,div.conversationParticipantStream div.videoAndAvatarContainer,div.conversationParticipantStream div.videoParticipant,div.conversationParticipantStream div.videoParticipant video.videoView,div.conversationParticipantStream div.videoParticipant div.loadingContainer,div.conversationParticipantStream div.participant,div.conversationParticipantStream div.participant div.avatarCont{width:100%;height:100%}@keyframes participantIsEndingAvatarAnimation{0%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.9)}100%{opacity:0;transform:scale(0.8)}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.conversationParticipantStream { + color: #fff; + position: relative; + display: block +} + +div.conversationParticipantStream div.videoAndAvatarContainer { + display: -ms-grid; + -ms-grid-rows: 1fr; + -ms-grid-columns: 1fr +} + +div.conversationParticipantStream div.videoParticipant { + display: none; + -ms-grid-columns: 1fr; + -ms-grid-rows: 1fr; + transform-origin: 0% 0%; + overflow: hidden +} + +div.conversationParticipantStream div.videoParticipant video.videoView { + outline: none +} + +div.conversationParticipantStream div.participant { + animation-play-state: paused; + display: -ms-grid; + -ms-grid-columns: 1fr; + -ms-grid-rows: 1fr +} + +div.conversationParticipantStream div.participant progress { + position: absolute; + left: calc(50% - 30px); + top: calc(50% - 30px); + display: none +} + +div.conversationParticipantStream div.participant div.avatarCont div.protectionLayer { + display: block; + background: none +} + +@media screen and (-ms-high-contrast: active) { + div.conversationParticipantStream div.participant div.avatarCont div.protectionLayer { + -ms-high-contrast-adjust: none + } +} + +div.conversationParticipantStream div.participantStatusIcon { + display: none +} + +div.conversationParticipantStream div.participantStatusLabel { + display: none; + position: absolute; + bottom: 34px; + z-index: 51; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + width: 100%; + text-align: center; + line-height: 1; + display: block; + line-height: 25px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.conversationParticipantStream div.participantStatusLabel { + font-size: 12px + } +} + +div.stage div.conversationParticipantStream.VIDEOISSTARTING:not(.ONHOLD):not(.ISENDING) div.participant div.avatarCont, +div.presentation div.conversationParticipantStream.VIDEOISSTARTING:not(.ONHOLD):not(.ISENDING) div.participant div.avatarCont, +div.stage div.conversationParticipantStream.VIDEOISRECOVERING div.participant div.avatarCont, +div.presentation div.conversationParticipantStream.VIDEOISRECOVERING div.participant div.avatarCont { + opacity: 0 +} + +div.stage div.conversationParticipantStream.VIDEOISSTARTING:not(.ONHOLD):not(.ISENDING) div.participant progress, +div.presentation div.conversationParticipantStream.VIDEOISSTARTING:not(.ONHOLD):not(.ISENDING) div.participant progress, +div.stage div.conversationParticipantStream.VIDEOISRECOVERING div.participant progress, +div.presentation div.conversationParticipantStream.VIDEOISRECOVERING div.participant progress { + display: block +} + +div.conversationParticipantStream.ENDING div.participantStatusLabel, +div.conversationParticipantStream.CONNECTING div.participantStatusLabel, +div.conversationParticipantStream.ONHOLD div.participantStatusLabel { + display: block +} + +div.conversationParticipantStream.ENDING div.participant, +div.conversationParticipantStream.CONNECTING div.participant, +div.conversationParticipantStream.ONHOLD div.participant { + animation-play-state: paused; + animation-duration: 0.1s; + animation-delay: 2.5s; + animation-fill-mode: forwards; + animation-play-state: running; + animation-timing-function: cubic-bezier(0.17, 0.67, 0.65, 0.75) +} + +div.conversationParticipantStream.ENDING div.participant div.avatarCont div.protectionLayer, +div.conversationParticipantStream.CONNECTING div.participant div.avatarCont div.protectionLayer, +div.conversationParticipantStream.ONHOLD div.participant div.avatarCont div.protectionLayer { + background-color: rgba(0, 0, 0, 0.5); + position: static +} + +div.conversationParticipantStream.ENDING div.participant div.participantStatusIcon, +div.conversationParticipantStream.CONNECTING div.participant div.participantStatusIcon, +div.conversationParticipantStream.ONHOLD div.participant div.participantStatusIcon { + display: block; + font-family: "Skype UI Symbol" !important; + font-size: 122pt; + color: white; + width: 100%; + text-align: center; + top: 50%; + position: absolute; + z-index: 51 +} + +div.conversationParticipantStream.ENDING div.participant { + animation-name: participantIsEndingAvatarAnimation +} + +div.conversationParticipantStream.ENDING div.participant div.participantStatusIcon:after { + content: "\E111" +} + +@media screen and (-ms-high-contrast: black-on-white) { + div.conversationParticipantStream.ENDING div.participant div.participantStatusIcon:after { + color: white + } +} + +div.conversationParticipantStream.CONNECTING div.participant div.participantStatusIcon:after { + content: "\E10F" +} + +@media screen and (-ms-high-contrast: black-on-white) { + div.conversationParticipantStream.CONNECTING div.participant div.participantStatusIcon:after { + color: white + } +} + +div.conversationParticipantStream.ONHOLD div.participant div.participantStatusIcon:after { + content: "\E40F" +} + +@media screen and (-ms-high-contrast: black-on-white) { + div.conversationParticipantStream.ONHOLD div.participant div.participantStatusIcon:after { + color: white + } +} + +div.conversationParticipantStream div.name { + position: absolute; + bottom: 8px; + z-index: 51; + width: 100%; + text-align: center; + line-height: 1; + display: block +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.conversationParticipantStream div.name { + font-size: 12px + } +} + +div.conversationParticipantStream div.name div { + padding: 9px 20px; + border-radius: 2vh; + font-size: 12px; + font-weight: bold; + display: inline-block; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + max-width: 80% +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.conversationParticipantStream div.name div { + padding: 8px 20px + } +} + +div.CHATOPEN.liveGroupConversation div.viewport div.gallery div.stage div.conversationParticipantStream div.name div { + background: rgba(0, 0, 0, 0.5) +} + +div.stage div.conversationParticipantStream div.participant div.avatarCont, +div.presentation div.conversationParticipantStream div.participant div.avatarCont { + max-width: 50%; + max-height: 66.66%; + width: 100vw; + height: 100vw; + -ms-grid-column-align: center; + -ms-grid-row-align: center +} + +div.stage div.conversationParticipantStream.SPEAKING, +div.presentation div.conversationParticipantStream.SPEAKING { + box-shadow: 0 5px rgba(0, 149, 204, 0.5) +} + +@media screen and (-ms-high-contrast: active) { + div.stage div.conversationParticipantStream.SPEAKING, + div.presentation div.conversationParticipantStream.SPEAKING { + box-shadow: 0 5px windowtext + } +} + +div.stage div.conversationParticipantStream:not(.SPEAKING), +div.presentation div.conversationParticipantStream:not(.SPEAKING) { + box-shadow: 0 5px rgba(0, 149, 204, 0); + transition: box-shadow 0 linear 1s +} + +div.presentation div.conversationParticipantStream.VIDEOISVISIBLE div.name, +div.presentation div.conversationParticipantStream.VIDEOISSTARTING div.name { + display: none +} + +div.presentation div.conversationParticipantStream.ONHOLD div.participant div.avatarCont { + max-width: 440px; + max-height: 440px +} + +div.roster div.conversationParticipantStream div.participantStatusLabel, +div.presentationSpeaker div.conversationParticipantStream div.participantStatusLabel { + bottom: 26px; + font-size: 12px; + line-height: 20px +} + +div.roster div.conversationParticipantStream div.name, +div.presentationSpeaker div.conversationParticipantStream div.name { + padding: 20px 0 3px 0; + background-image: url("/images/ribbonProtection.png"); + background-repeat: repeat-x; + background-position-y: bottom; + z-index: 51; + bottom: 0 +} + +@media screen and (-ms-high-contrast: active) { + div.roster div.conversationParticipantStream div.name, + div.presentationSpeaker div.conversationParticipantStream div.name { + padding: 0; + margin: 5px; + box-sizing: border-box; + width: calc(100% - 10px) + } + div.roster div.conversationParticipantStream div.name div, + div.presentationSpeaker div.conversationParticipantStream div.name div { + padding: 4px 0 !important + } +} + +div.roster div.conversationParticipantStream div.name div, +div.presentationSpeaker div.conversationParticipantStream div.name div { + background: none; + max-width: 80%; + padding: 7px 0 +} + +div.roster div.conversationParticipantStream.ENDING div.participant div.participantStatusIcon, +div.roster div.conversationParticipantStream.CONNECTING div.participant div.participantStatusIcon, +div.roster div.conversationParticipantStream.ONHOLD div.participant div.participantStatusIcon, +div.presentationSpeaker div.conversationParticipantStream.ENDING div.participant div.participantStatusIcon, +div.presentationSpeaker div.conversationParticipantStream.CONNECTING div.participant div.participantStatusIcon, +div.presentationSpeaker div.conversationParticipantStream.ONHOLD div.participant div.participantStatusIcon { + font-size: 72pt +} + +div.conversationParticipantStream.VIDEOISVISIBLE:not(.ONHOLD):not(.ISENDING):not(.VIDEOISRECOVERING) div.videoParticipant { + display: -ms-grid +} + +div.conversationParticipantStream.VIDEOISVISIBLE:not(.ONHOLD):not(.ISENDING):not(.VIDEOISRECOVERING) div.participant { + display: none +} + +div.liveGroupConversation.IMMERSIVE div.conversationParticipantStream.VIDEOISVISIBLE:not(.ONHOLD):not(.ISENDING):not(.VIDEOISRECOVERING) div.name { + display: none +} + +div.stage div.conversationParticipantStream.VIDEOISVISIBLE:not(.ONHOLD):not(.ISENDING):not(.VIDEOISRECOVERING) div.name, +div.presentation div.conversationParticipantStream.VIDEOISVISIBLE:not(.ONHOLD):not(.ISENDING):not(.VIDEOISRECOVERING) div.name { + bottom: 8px +} + +div.stage div.conversationParticipantStream.VIDEOISVISIBLE:not(.ONHOLD):not(.ISENDING):not(.VIDEOISRECOVERING) div.name div, +div.presentation div.conversationParticipantStream.VIDEOISVISIBLE:not(.ONHOLD):not(.ISENDING):not(.VIDEOISRECOVERING) div.name div { + background: rgba(0, 0, 0, 0.5); + display: inline-block; + max-width: 80% +} + +div.liveGroupConversation.IMMERSIVE div.roster div.conversationParticipantStream.VIDEOISVISIBLE:not(.ONHOLD):not(.ISENDING):not(.VIDEOISRECOVERING) div.name { + display: block +} + +div.roster div.conversationParticipantStream.VIDEOISVISIBLE:not(.ONHOLD):not(.ISENDING):not(.VIDEOISRECOVERING) div.participant { + display: block +} + +div.roster div.conversationParticipantStream.VIDEOISVISIBLE:not(.ONHOLD):not(.ISENDING):not(.VIDEOISRECOVERING) div.videoParticipant { + display: none +} + +div.presentation div.conversationParticipantStream:not(.ONHOLD):not(.ISENDING) div.participant div.avatarCont { + opacity: 0 +} + +div.conversationParticipantStream, +div.conversationParticipantStream div.videoAndAvatarContainer, +div.conversationParticipantStream div.videoParticipant, +div.conversationParticipantStream div.videoParticipant video.videoView, +div.conversationParticipantStream div.videoParticipant div.loadingContainer, +div.conversationParticipantStream div.participant, +div.conversationParticipantStream div.participant div.avatarCont { + width: 100%; + height: 100% +} + +@keyframes participantIsEndingAvatarAnimation { + 0% { + opacity: 1; + transform: scale(1) + } + 50% { + opacity: 0.5; + transform: scale(0.9) + } + 100% { + opacity: 0; + transform: scale(0.8) + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/conversation/conversationProfileInfo.css b/packages/microsoft.skypeapp/controls/conversation/conversationProfileInfo.css index 96bcd207..fb5a7c7c 100644 --- a/packages/microsoft.skypeapp/controls/conversation/conversationProfileInfo.css +++ b/packages/microsoft.skypeapp/controls/conversation/conversationProfileInfo.css @@ -1 +1,791 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.profile{color:#fff;background-color:#00aff0;overflow:hidden;display:-ms-grid;-ms-grid-columns:360px;-ms-grid-rows:360px 1fr auto;height:100%;width:360px}div.profile span.ariaHelper{display:none}div.profile div.conversationNameContainer{-ms-grid-column:1;-ms-grid-row:2;max-height:100%;width:330px;overflow:hidden;margin-left:40px;margin-top:17px}div.profile div.conversationNameContainer div.conversationName{overflow-x:hidden;word-wrap:break-word;overflow-y:hidden;padding-right:50px;padding-bottom:1px;-ms-user-select:text;white-space:nowrap;text-overflow:ellipsis;min-height:50px;letter-spacing:0px}div.profile div.status{display:none}@media screen and (max-aspect-ratio: 1 / 1){div.profile div.status.dialog.AVAILABLE div.moodMessageContainer{left:98px}body.RTL div.profile div.status.dialog.AVAILABLE div.moodMessageContainer{left:auto;right:98px}}@media screen and (max-width: 400px){div.profile div.status.dialog.AVAILABLE div.moodMessageContainer{left:80px}body.RTL div.profile div.status.dialog.AVAILABLE div.moodMessageContainer{left:auto;right:80px}}div.profile div.status.dialog.AVAILABLE div.presence{display:block}div.profile div.status.dialog div.presence{position:absolute;left:45px;top:66px;display:none}body.RTL div.profile div.status.dialog div.presence{left:auto;right:40px}@media screen and (max-aspect-ratio: 1 / 1){div.profile div.status.dialog div.presence{height:8px;top:82px;left:84px}body.RTL div.profile div.status.dialog div.presence{left:auto;right:84px}}@media screen and (max-width: 400px){div.profile div.status.dialog div.presence{left:65px;top:72px}body.RTL div.profile div.status.dialog div.presence{left:auto;right:65px}}div.profile div.status.dialog div.moodMessageContainer{-ms-grid-column:1;-ms-grid-row:1;max-height:100%;width:calc(100% + 25px);overflow:hidden}@media screen and (max-aspect-ratio: 1 / 1){div.profile div.status.dialog div.moodMessageContainer{width:calc(100% - 165px);position:absolute;left:80px;top:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}body.RTL div.profile div.status.dialog div.moodMessageContainer{left:auto;right:80px}}@media screen and (max-width: 400px){div.profile div.status.dialog div.moodMessageContainer{width:calc(100% - 124px);left:60px;top:60px}body.RTL div.profile div.status.dialog div.moodMessageContainer{left:auto;right:60px}}div.profile div.status.dialog div.moodMessageContainer div.moodMessage{overflow-x:hidden;word-wrap:break-word;overflow-y:hidden;padding-right:25px;padding-bottom:1px;-ms-user-select:text;line-height:30px}body.RTL div.profile div.status.dialog div.moodMessageContainer div.moodMessage{padding-right:0;padding-left:25px}@media screen and (max-aspect-ratio: 1 / 1){div.profile div.status.dialog div.moodMessageContainer div.moodMessage{overflow:hidden;white-space:nowrap;word-wrap:normal;display:inline;padding:0;margin:0}}div.profile div.status.dialog div.moodMessageContainer div.moodMessage a{color:#fff;cursor:pointer}@media screen and (max-aspect-ratio: 1 / 1){div.profile div.status.dialog div.moodMessageContainer div.moodMessage a{color:inherit}}div.profile div.status.dialog div.location{-ms-grid-column:1;-ms-grid-row:2;margin-top:7px}@media screen and (max-aspect-ratio: 1 / 1){div.profile div.status.dialog div.location{display:none}}div.profile div.status.group a.participantCount{color:#fff}div.profile div.status.group a.participantCount::after{content:"\203A";margin-left:10px}body.RTL div.profile div.status.group a.participantCount::after{margin-left:0;margin-right:10px}div.profile div.status.group div.participants{height:100%}div.profile div.status.group div.win-container{background-color:transparent}div.profile div.status.group div.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}div.profile div.status.group div.presence{display:none;position:relative;top:-4px}div.profile div.status.group div.presence.AVAILABLE{display:inline-block}div.profile div.status.group div.mood{display:inline-block;box-sizing:border-box;width:calc(100% - 16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}div.profile div.status.emergency{padding:73px 0 20px !important}div.profile div.status.emergency div.wrapper{height:100%;padding:0 40px;overflow-y:auto}div.profile div.status.emergency div.wrapper>div{display:none}div.profile div.status.emergency div.wrapper>div a{color:#004a66}div.profile div.status.emergency div.wrapper>div a:hover{color:#005c80}div.profile div.status.emergency div.wrapper>div a:active{color:#00374d}div.profile div.status.emergency div.wrapper>div div.content{word-wrap:break-word}div.profile div.status.emergency div.wrapper>div div.content strong{display:inline-block;word-wrap:break-word;width:100%}div.profile div.status.emergency[restriction='noCountry'] div.wrapper div.noCountry{display:block}div.profile div.status.emergency[restriction='allowedCountry'] div.wrapper div.allowedCountry{display:block}div.profile div.status.emergency[restriction='restrictedCountry'] div.wrapper div.restrictedCountry{display:-ms-grid;-ms-grid-columns:35px 1fr;-ms-grid-rows:40px 1fr 1fr 50px;margin-top:10px}div.profile div.status.emergency div.allowedCountry div.info{margin-bottom:10px}div.profile div.status.emergency div.allowedCountry div.info div.content strong{display:block;margin-bottom:20px}div.profile div.status.emergency div.restrictedCountry div.info{-ms-grid-row:1;-ms-grid-column-span:2;margin-bottom:10px}div.profile div.status.emergency div.restrictedCountry div.icon{-ms-grid-column:1;-ms-grid-row:2;display:inline-block;height:25px;width:25px;border-radius:50%;font-family:"Skype UI Symbol";font-size:25px;line-height:normal;text-align:center;color:#fff;background-color:#e81123;box-shadow:0 0 0 2px #fff}div.profile div.status.emergency div.restrictedCountry div.icon::before{content:"\E600"}div.profile div.status.emergency div.restrictedCountry h3{-ms-grid-column:2;-ms-grid-row:2;margin-top:-4px;margin-bottom:10px;word-wrap:break-word}div.profile div.status.emergency div.restrictedCountry div.content{-ms-grid-column-span:2;-ms-grid-column:1;-ms-grid-row:3}div.profile div.status.emergency div.restrictedCountry button{margin-top:20px;-ms-grid-column-span:2;-ms-grid-column:1;-ms-grid-row:4;-ms-grid-column-align:start;display:inline-block}div.profile div.status.emergency div.noCountry button{margin-top:20px}div.profile div.avatar{-ms-grid-row:1;height:360px;display:-ms-grid;-ms-grid-rows:1fr;-ms-grid-columns:1fr;-ms-grid-row-align:center;position:relative;overflow:hidden;-ms-high-contrast-adjust:none;transition:opacity 0.7s linear;opacity:0;z-index:9}div.profile div.avatar div.protectionLayer{display:block;height:100%;background:url("/images/svg/prot440x440.svg") no-repeat}div.profile div.avatar.DEFAULTAVATAR div.protectionLayer{background:url("/images/svg/protDefAvatar440x440.svg") no-repeat;background-size:cover}div.profile div.actionButtons{display:-ms-flexbox;-ms-grid-row:3;-ms-grid-row-align:center;margin-bottom:20px;margin-top:20px;-ms-flex-direction:row;-ms-flex-pack:center;position:relative;z-index:10;bottom:15px}@media screen and (-ms-high-contrast: active){div.profile div.actionButtons{bottom:17px}}@media screen and (max-aspect-ratio: 1 / 1){div.profile div.actionButtons{margin-bottom:0px;margin-top:0px;height:100px;background-color:#00aff0}}@media screen and (max-width: 400px){div.profile div.actionButtons{height:72px}}body.KEYBOARDUP div.profile div.actionButtons{padding:20px 0;margin-top:-60px;margin-bottom:0;min-width:360px;background-color:#00aff0}@media screen and (max-aspect-ratio: 1 / 1){body.KEYBOARDUP div.profile div.actionButtons{min-width:inherit;padding:0;bottom:0}}div.profile div.actionButtons>button{padding:0;min-height:0;min-width:0;font-weight:normal;background-color:transparent;letter-spacing:0;display:inline-block;height:60px;width:60px;border-radius:50%;margin:0px 20px;font-family:"Skype UI Symbol";font-size:58px;line-height:normal;text-align:center;vertical-align:middle;color:#fff;border-color:#fff;cursor:default;box-shadow:inset 0 0 0 1px #fff;border:1px solid #fff}@media screen and (max-aspect-ratio: 1 / 1){div.profile div.actionButtons>button{margin:18px 15px;box-shadow:inset 0 0 0 0px #fff;border:1.5px solid #fff}}@media screen and (max-width: 400px){div.profile div.actionButtons>button{height:40px;width:40px;margin:15px 10px;font-size:38px;border-radius:50%;line-height:normal;color:#fff;border-color:#fff;cursor:default}}div.profile div.actionButtons>button.more.HIDDEN,div.profile div.actionButtons>button.videocall.NOSENDVIDEO,div.profile div.actionButtons>button.joincallbutton,div.profile div.actionButtons>button.call.NOSENDAUDIO{display:none}div.profile div.actionButtons>button:hover:not(.DISABLED){background-color:#009dd8}@media screen and (-ms-high-contrast: active){div.profile div.actionButtons>button:hover:not(.DISABLED){background-color:Highlight;color:window}}div.profile div.actionButtons>button.DISABLED{opacity:0.4}@media screen and (-ms-high-contrast: active){div.profile div.actionButtons>button{border:2px solid ButtonText;color:ButtonText}}div.profile div.conversationMoreMenu button.HIDDEN{display:none}body.RTL div.profile{left:auto;right:0}div.profile.DIALOG:not(.EMERGENCY) div.status.dialog{-ms-grid-row:2;padding:53px 40px;display:-ms-grid;-ms-grid-columns:1fr;-ms-grid-rows:minmax(1fr, max-content) max-content;position:relative;height:100%;box-sizing:border-box;overflow:hidden}@media screen and (max-aspect-ratio: 1 / 1){div.profile.DIALOG:not(.EMERGENCY) div.status.dialog{-ms-grid-row:1;display:block;padding:0;height:auto !important}}div.profile.DIALOG:not(.EMERGENCY) div.status.dialog.AVAILABLE div.moodMessage{text-indent:20px}div.profile.GROUP div.status.group{-ms-grid-row:2;padding:75px 42px;display:block}@media screen and (max-aspect-ratio: 1 / 1){div.profile.GROUP div.status.group{-ms-grid-row:1;display:block}div.profile.GROUP div.status.group a.participantCount{display:block;position:absolute;left:82px;top:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}body.RTL div.profile.GROUP div.status.group a.participantCount{left:auto;right:82px}}@media screen and (max-width: 400px){div.profile.GROUP div.status.group a.participantCount{top:64px;left:62px}body.RTL div.profile.GROUP div.status.group a.participantCount{left:auto;right:62px}}div.conversation.BLOCKED div.profile div.actionButtons{display:none}div.conversation.BLOCKED div.profile div.avatar div.protectionLayer{font-family:"Skype UI Symbol";font-size:360px;line-height:normal;height:360px;background-color:rgba(77,77,77,0.75);color:rgba(255,255,255,0.4)}@media screen and (max-aspect-ratio: 1 / 1){div.conversation.BLOCKED div.profile div.avatar div.protectionLayer{display:none}}div.conversation.BLOCKED div.profile div.avatar div.protectionLayer:before{content:"\E20D"}@media screen and (max-aspect-ratio: 1 / 1){div.profile.EMERGENCY{width:100% !important}}div.profile.EMERGENCY div.status.emergency{-ms-grid-row:2;padding:73px 40px;display:block}@media screen and (max-aspect-ratio: 1 / 1){div.profile.EMERGENCY div.status.emergency{width:100vw}}@media screen and (max-aspect-ratio: 1 / 1){div.profile.EMERGENCY div.avatar{width:100vw;background-color:#5C0C10}}div.profile.EMERGENCY div.avatar.DEFAULTAVATAR div.protectionLayer{background-image:none}div.profile.EMERGENCY div.actionButtons{margin-bottom:30px}@media screen and (max-aspect-ratio: 1 / 1){div.profile.EMERGENCY div.actionButtons{width:100vw}}div.profile.EMERGENCY div.actionButtons>button.call{width:225px;height:46px;font-size:46px;border-radius:23px}div.profile.EMERGENCY div.actionButtons>button.more{display:none}div.profile.CHATCANJOIN{background-color:#005e91}div.profile.CHATCANJOIN div.actionButtons{background-color:#005e91;margin-bottom:15px}body.KEYBOARDUP div.profile.CHATCANJOIN div.actionButtons{background-color:#005e91}@media screen and (max-aspect-ratio: 1 / 1){div.profile.CHATCANJOIN div.actionButtons{margin-bottom:0}}div.profile.CHATCANJOIN div.actionButtons>button{background-clip:padding-box}@media screen and (max-aspect-ratio: 1 / 1){div.profile.CHATCANJOIN div.actionButtons>button{margin:auto 0px}}@media screen and (max-width: 400px){div.profile.CHATCANJOIN div.actionButtons>button{margin:12px 0px}}div.profile.CHATCANJOIN div.actionButtons>button.joincallbutton{display:block;border-radius:25px;margin-right:0;min-width:148px;max-width:198px;width:auto;height:48px;background-color:#7fba00;font-weight:normal;box-shadow:0px 0px 0px 0px rgba(0,0,0,0.15);border:4px solid rgba(0,0,0,0.15);font-size:11pt;text-overflow:ellipsis;white-space:nowrap;padding:0 10px;font-family:"Segoe UI", "Ebrima", "Nirmala UI", "Gadugi", "Segoe UI Emoji", "Segoe UI Symbol", "Meiryo UI", "Leelawadee UI", "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Javanese Text", "Cambria Math"}body.RTL div.profile.CHATCANJOIN div.actionButtons>button.joincallbutton{margin-left:0;margin-right:0}div.profile.CHATCANJOIN div.actionButtons>button.joincallbutton:hover{background-color:rgba(127,186,0,0.8)}@media screen and (-ms-high-contrast: active){div.profile.CHATCANJOIN div.actionButtons>button.joincallbutton:hover{background-color:Highlight;color:window}}div.profile.CHATCANJOIN div.actionButtons>button.more{margin-left:12px;background-color:#0097b7;width:48px;height:48px;border-radius:50%;box-shadow:0px 0px 0px 0px rgba(0,0,0,0.15);border:4px solid rgba(0,0,0,0.15);font-size:20.66pt;line-height:46px}body.RTL div.profile.CHATCANJOIN div.actionButtons>button.more{margin-right:12px;margin-left:0}div.profile.CHATCANJOIN div.actionButtons>button.more:hover:not(.DISABLED){background-color:rgba(0,151,183,0.8)}@media screen and (-ms-high-contrast: active){div.profile.CHATCANJOIN div.actionButtons>button.more:hover:not(.DISABLED){background-color:Highlight;color:window}}div.profile.CHATCANJOIN div.actionButtons>button.videocall,div.profile.CHATCANJOIN div.actionButtons>button.call{display:none}div.profile.ACTIVE div.avatar{opacity:1}div.profile.ECHO div.actionButtons>button.more,div.profile.MESSENGER div.actionButtons>button.more,div.profile.LYNC div.actionButtons>button.more,div.conversation.NONMEMBER div.profile div.actionButtons{display:none}@media screen and (max-aspect-ratio: 1 / 1){div.profile:not(.EMERGENCY){width:100%;-ms-grid-rows:105px 1fr;-ms-grid-columns:1fr;background-color:inherit;color:inherit}div.profile:not(.EMERGENCY) div.avatar{display:none !important}div.profile:not(.EMERGENCY) div.conversationNameContainer{display:none}}body.KEYBOARDUP div.profile.GROUP div.status.group,body.KEYBOARDUP div.profile.DIALOG div.status.dialog,body.KEYBOARDUP div.profile.GROUP div.conversationNameContainer,body.KEYBOARDUP div.profile.DIALOG div.conversationNameContainer{display:none}@media screen and (max-aspect-ratio: 1 / 1){body.KEYBOARDUP div.profile.GROUP div.status.group,body.KEYBOARDUP div.profile.DIALOG div.status.dialog,body.KEYBOARDUP div.profile.GROUP div.conversationNameContainer,body.KEYBOARDUP div.profile.DIALOG div.conversationNameContainer{display:block}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.profile { + color: #fff; + background-color: #00aff0; + overflow: hidden; + display: -ms-grid; + -ms-grid-columns: 360px; + -ms-grid-rows: 360px 1fr auto; + height: 100%; + width: 360px +} + +div.profile span.ariaHelper { + display: none +} + +div.profile div.conversationNameContainer { + -ms-grid-column: 1; + -ms-grid-row: 2; + max-height: 100%; + width: 330px; + overflow: hidden; + margin-left: 40px; + margin-top: 17px +} + +div.profile div.conversationNameContainer div.conversationName { + overflow-x: hidden; + word-wrap: break-word; + overflow-y: hidden; + padding-right: 50px; + padding-bottom: 1px; + -ms-user-select: text; + white-space: nowrap; + text-overflow: ellipsis; + min-height: 50px; + letter-spacing: 0px +} + +div.profile div.status { + display: none +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.profile div.status.dialog.AVAILABLE div.moodMessageContainer { + left: 98px + } + body.RTL div.profile div.status.dialog.AVAILABLE div.moodMessageContainer { + left: auto; + right: 98px + } +} + +@media screen and (max-width: 400px) { + div.profile div.status.dialog.AVAILABLE div.moodMessageContainer { + left: 80px + } + body.RTL div.profile div.status.dialog.AVAILABLE div.moodMessageContainer { + left: auto; + right: 80px + } +} + +div.profile div.status.dialog.AVAILABLE div.presence { + display: block +} + +div.profile div.status.dialog div.presence { + position: absolute; + left: 45px; + top: 66px; + display: none +} + +body.RTL div.profile div.status.dialog div.presence { + left: auto; + right: 40px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.profile div.status.dialog div.presence { + height: 8px; + top: 82px; + left: 84px + } + body.RTL div.profile div.status.dialog div.presence { + left: auto; + right: 84px + } +} + +@media screen and (max-width: 400px) { + div.profile div.status.dialog div.presence { + left: 65px; + top: 72px + } + body.RTL div.profile div.status.dialog div.presence { + left: auto; + right: 65px + } +} + +div.profile div.status.dialog div.moodMessageContainer { + -ms-grid-column: 1; + -ms-grid-row: 1; + max-height: 100%; + width: calc(100% + 25px); + overflow: hidden +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.profile div.status.dialog div.moodMessageContainer { + width: calc(100% - 165px); + position: absolute; + left: 80px; + top: 70px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis + } + body.RTL div.profile div.status.dialog div.moodMessageContainer { + left: auto; + right: 80px + } +} + +@media screen and (max-width: 400px) { + div.profile div.status.dialog div.moodMessageContainer { + width: calc(100% - 124px); + left: 60px; + top: 60px + } + body.RTL div.profile div.status.dialog div.moodMessageContainer { + left: auto; + right: 60px + } +} + +div.profile div.status.dialog div.moodMessageContainer div.moodMessage { + overflow-x: hidden; + word-wrap: break-word; + overflow-y: hidden; + padding-right: 25px; + padding-bottom: 1px; + -ms-user-select: text; + line-height: 30px +} + +body.RTL div.profile div.status.dialog div.moodMessageContainer div.moodMessage { + padding-right: 0; + padding-left: 25px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.profile div.status.dialog div.moodMessageContainer div.moodMessage { + overflow: hidden; + white-space: nowrap; + word-wrap: normal; + display: inline; + padding: 0; + margin: 0 + } +} + +div.profile div.status.dialog div.moodMessageContainer div.moodMessage a { + color: #fff; + cursor: pointer +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.profile div.status.dialog div.moodMessageContainer div.moodMessage a { + color: inherit + } +} + +div.profile div.status.dialog div.location { + -ms-grid-column: 1; + -ms-grid-row: 2; + margin-top: 7px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.profile div.status.dialog div.location { + display: none + } +} + +div.profile div.status.group a.participantCount { + color: #fff +} + +div.profile div.status.group a.participantCount::after { + content: "\203A"; + margin-left: 10px +} + +body.RTL div.profile div.status.group a.participantCount::after { + margin-left: 0; + margin-right: 10px +} + +div.profile div.status.group div.participants { + height: 100% +} + +div.profile div.status.group div.win-container { + background-color: transparent +} + +div.profile div.status.group div.name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis +} + +div.profile div.status.group div.presence { + display: none; + position: relative; + top: -4px +} + +div.profile div.status.group div.presence.AVAILABLE { + display: inline-block +} + +div.profile div.status.group div.mood { + display: inline-block; + box-sizing: border-box; + width: calc(100% - 16px); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis +} + +div.profile div.status.emergency { + padding: 73px 0 20px !important +} + +div.profile div.status.emergency div.wrapper { + height: 100%; + padding: 0 40px; + overflow-y: auto +} + +div.profile div.status.emergency div.wrapper>div { + display: none +} + +div.profile div.status.emergency div.wrapper>div a { + color: #004a66 +} + +div.profile div.status.emergency div.wrapper>div a:hover { + color: #005c80 +} + +div.profile div.status.emergency div.wrapper>div a:active { + color: #00374d +} + +div.profile div.status.emergency div.wrapper>div div.content { + word-wrap: break-word +} + +div.profile div.status.emergency div.wrapper>div div.content strong { + display: inline-block; + word-wrap: break-word; + width: 100% +} + +div.profile div.status.emergency[restriction='noCountry'] div.wrapper div.noCountry { + display: block +} + +div.profile div.status.emergency[restriction='allowedCountry'] div.wrapper div.allowedCountry { + display: block +} + +div.profile div.status.emergency[restriction='restrictedCountry'] div.wrapper div.restrictedCountry { + display: -ms-grid; + -ms-grid-columns: 35px 1fr; + -ms-grid-rows: 40px 1fr 1fr 50px; + margin-top: 10px +} + +div.profile div.status.emergency div.allowedCountry div.info { + margin-bottom: 10px +} + +div.profile div.status.emergency div.allowedCountry div.info div.content strong { + display: block; + margin-bottom: 20px +} + +div.profile div.status.emergency div.restrictedCountry div.info { + -ms-grid-row: 1; + -ms-grid-column-span: 2; + margin-bottom: 10px +} + +div.profile div.status.emergency div.restrictedCountry div.icon { + -ms-grid-column: 1; + -ms-grid-row: 2; + display: inline-block; + height: 25px; + width: 25px; + border-radius: 50%; + font-family: "Skype UI Symbol" !important; + font-size: 25px; + line-height: normal; + text-align: center; + color: #fff; + background-color: #e81123; + box-shadow: 0 0 0 2px #fff +} + +div.profile div.status.emergency div.restrictedCountry div.icon::before { + content: "\E600" +} + +div.profile div.status.emergency div.restrictedCountry h3 { + -ms-grid-column: 2; + -ms-grid-row: 2; + margin-top: -4px; + margin-bottom: 10px; + word-wrap: break-word +} + +div.profile div.status.emergency div.restrictedCountry div.content { + -ms-grid-column-span: 2; + -ms-grid-column: 1; + -ms-grid-row: 3 +} + +div.profile div.status.emergency div.restrictedCountry button { + margin-top: 20px; + -ms-grid-column-span: 2; + -ms-grid-column: 1; + -ms-grid-row: 4; + -ms-grid-column-align: start; + display: inline-block +} + +div.profile div.status.emergency div.noCountry button { + margin-top: 20px +} + +div.profile div.avatar { + -ms-grid-row: 1; + height: 360px; + display: -ms-grid; + -ms-grid-rows: 1fr; + -ms-grid-columns: 1fr; + -ms-grid-row-align: center; + position: relative; + overflow: hidden; + -ms-high-contrast-adjust: none; + transition: opacity 0.7s linear; + opacity: 0; + z-index: 9 +} + +div.profile div.avatar div.protectionLayer { + display: block; + height: 100%; + background: url("/images/svg/prot440x440.svg") no-repeat +} + +div.profile div.avatar.DEFAULTAVATAR div.protectionLayer { + background: url("/images/svg/protDefAvatar440x440.svg") no-repeat; + background-size: cover +} + +div.profile div.actionButtons { + display: -ms-flexbox; + -ms-grid-row: 3; + -ms-grid-row-align: center; + margin-bottom: 20px; + margin-top: 20px; + -ms-flex-direction: row; + -ms-flex-pack: center; + position: relative; + z-index: 10; + bottom: 15px +} + +@media screen and (-ms-high-contrast: active) { + div.profile div.actionButtons { + bottom: 17px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.profile div.actionButtons { + margin-bottom: 0px; + margin-top: 0px; + height: 100px; + background-color: #00aff0 + } +} + +@media screen and (max-width: 400px) { + div.profile div.actionButtons { + height: 72px + } +} + +body.KEYBOARDUP div.profile div.actionButtons { + padding: 20px 0; + margin-top: -60px; + margin-bottom: 0; + min-width: 360px; + background-color: #00aff0 +} + +@media screen and (max-aspect-ratio: 1 / 1) { + body.KEYBOARDUP div.profile div.actionButtons { + min-width: inherit; + padding: 0; + bottom: 0 + } +} + +div.profile div.actionButtons>button { + padding: 0; + min-height: 0; + min-width: 0; + font-weight: normal; + background-color: transparent; + letter-spacing: 0; + display: inline-block; + height: 60px; + width: 60px; + border-radius: 50%; + margin: 0px 20px; + font-family: "Skype UI Symbol" !important; + font-size: 58px; + line-height: normal; + text-align: center; + vertical-align: middle; + color: #fff; + border-color: #fff; + cursor: default; + box-shadow: inset 0 0 0 1px #fff; + border: 1px solid #fff +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.profile div.actionButtons>button { + margin: 18px 15px; + box-shadow: inset 0 0 0 0px #fff; + border: 1.5px solid #fff + } +} + +@media screen and (max-width: 400px) { + div.profile div.actionButtons>button { + height: 40px; + width: 40px; + margin: 15px 10px; + font-size: 38px; + border-radius: 50%; + line-height: normal; + color: #fff; + border-color: #fff; + cursor: default + } +} + +div.profile div.actionButtons>button.more.HIDDEN, +div.profile div.actionButtons>button.videocall.NOSENDVIDEO, +div.profile div.actionButtons>button.joincallbutton, +div.profile div.actionButtons>button.call.NOSENDAUDIO { + display: none +} + +div.profile div.actionButtons>button:hover:not(.DISABLED) { + background-color: #009dd8 +} + +@media screen and (-ms-high-contrast: active) { + div.profile div.actionButtons>button:hover:not(.DISABLED) { + background-color: Highlight; + color: window + } +} + +div.profile div.actionButtons>button.DISABLED { + opacity: 0.4 +} + +@media screen and (-ms-high-contrast: active) { + div.profile div.actionButtons>button { + border: 2px solid ButtonText; + color: ButtonText + } +} + +div.profile div.conversationMoreMenu button.HIDDEN { + display: none +} + +body.RTL div.profile { + left: auto; + right: 0 +} + +div.profile.DIALOG:not(.EMERGENCY) div.status.dialog { + -ms-grid-row: 2; + padding: 53px 40px; + display: -ms-grid; + -ms-grid-columns: 1fr; + -ms-grid-rows: minmax(1fr, max-content) max-content; + position: relative; + height: 100%; + box-sizing: border-box; + overflow: hidden +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.profile.DIALOG:not(.EMERGENCY) div.status.dialog { + -ms-grid-row: 1; + display: block; + padding: 0; + height: auto !important + } +} + +div.profile.DIALOG:not(.EMERGENCY) div.status.dialog.AVAILABLE div.moodMessage { + text-indent: 20px +} + +div.profile.GROUP div.status.group { + -ms-grid-row: 2; + padding: 75px 42px; + display: block +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.profile.GROUP div.status.group { + -ms-grid-row: 1; + display: block + } + div.profile.GROUP div.status.group a.participantCount { + display: block; + position: absolute; + left: 82px; + top: 70px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis + } + body.RTL div.profile.GROUP div.status.group a.participantCount { + left: auto; + right: 82px + } +} + +@media screen and (max-width: 400px) { + div.profile.GROUP div.status.group a.participantCount { + top: 64px; + left: 62px + } + body.RTL div.profile.GROUP div.status.group a.participantCount { + left: auto; + right: 62px + } +} + +div.conversation.BLOCKED div.profile div.actionButtons { + display: none +} + +div.conversation.BLOCKED div.profile div.avatar div.protectionLayer { + font-family: "Skype UI Symbol" !important; + font-size: 360px; + line-height: normal; + height: 360px; + background-color: rgba(77, 77, 77, 0.75); + color: rgba(255, 255, 255, 0.4) +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.conversation.BLOCKED div.profile div.avatar div.protectionLayer { + display: none + } +} + +div.conversation.BLOCKED div.profile div.avatar div.protectionLayer:before { + content: "\E20D" +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.profile.EMERGENCY { + width: 100% !important + } +} + +div.profile.EMERGENCY div.status.emergency { + -ms-grid-row: 2; + padding: 73px 40px; + display: block +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.profile.EMERGENCY div.status.emergency { + width: 100vw + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.profile.EMERGENCY div.avatar { + width: 100vw; + background-color: #5C0C10 + } +} + +div.profile.EMERGENCY div.avatar.DEFAULTAVATAR div.protectionLayer { + background-image: none +} + +div.profile.EMERGENCY div.actionButtons { + margin-bottom: 30px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.profile.EMERGENCY div.actionButtons { + width: 100vw + } +} + +div.profile.EMERGENCY div.actionButtons>button.call { + width: 225px; + height: 46px; + font-size: 46px; + border-radius: 23px +} + +div.profile.EMERGENCY div.actionButtons>button.more { + display: none +} + +div.profile.CHATCANJOIN { + background-color: #005e91 +} + +div.profile.CHATCANJOIN div.actionButtons { + background-color: #005e91; + margin-bottom: 15px +} + +body.KEYBOARDUP div.profile.CHATCANJOIN div.actionButtons { + background-color: #005e91 +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.profile.CHATCANJOIN div.actionButtons { + margin-bottom: 0 + } +} + +div.profile.CHATCANJOIN div.actionButtons>button { + background-clip: padding-box +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.profile.CHATCANJOIN div.actionButtons>button { + margin: auto 0px + } +} + +@media screen and (max-width: 400px) { + div.profile.CHATCANJOIN div.actionButtons>button { + margin: 12px 0px + } +} + +div.profile.CHATCANJOIN div.actionButtons>button.joincallbutton { + display: block; + border-radius: 25px; + margin-right: 0; + min-width: 148px; + max-width: 198px; + width: auto; + height: 48px; + background-color: #7fba00; + font-weight: normal; + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15); + border: 4px solid rgba(0, 0, 0, 0.15); + font-size: 11pt; + text-overflow: ellipsis; + white-space: nowrap; + padding: 0 10px; + font-family: "Segoe UI", "Ebrima", "Nirmala UI", "Gadugi", "Segoe UI Emoji", "Segoe UI Symbol", "Meiryo UI", "Leelawadee UI", "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Javanese Text", "Cambria Math" +} + +body.RTL div.profile.CHATCANJOIN div.actionButtons>button.joincallbutton { + margin-left: 0; + margin-right: 0 +} + +div.profile.CHATCANJOIN div.actionButtons>button.joincallbutton:hover { + background-color: rgba(127, 186, 0, 0.8) +} + +@media screen and (-ms-high-contrast: active) { + div.profile.CHATCANJOIN div.actionButtons>button.joincallbutton:hover { + background-color: Highlight; + color: window + } +} + +div.profile.CHATCANJOIN div.actionButtons>button.more { + margin-left: 12px; + background-color: #0097b7; + width: 48px; + height: 48px; + border-radius: 50%; + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.15); + border: 4px solid rgba(0, 0, 0, 0.15); + font-size: 20.66pt; + line-height: 46px +} + +body.RTL div.profile.CHATCANJOIN div.actionButtons>button.more { + margin-right: 12px; + margin-left: 0 +} + +div.profile.CHATCANJOIN div.actionButtons>button.more:hover:not(.DISABLED) { + background-color: rgba(0, 151, 183, 0.8) +} + +@media screen and (-ms-high-contrast: active) { + div.profile.CHATCANJOIN div.actionButtons>button.more:hover:not(.DISABLED) { + background-color: Highlight; + color: window + } +} + +div.profile.CHATCANJOIN div.actionButtons>button.videocall, +div.profile.CHATCANJOIN div.actionButtons>button.call { + display: none +} + +div.profile.ACTIVE div.avatar { + opacity: 1 +} + +div.profile.ECHO div.actionButtons>button.more, +div.profile.MESSENGER div.actionButtons>button.more, +div.profile.LYNC div.actionButtons>button.more, +div.conversation.NONMEMBER div.profile div.actionButtons { + display: none +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.profile:not(.EMERGENCY) { + width: 100%; + -ms-grid-rows: 105px 1fr; + -ms-grid-columns: 1fr; + background-color: inherit; + color: inherit + } + div.profile:not(.EMERGENCY) div.avatar { + display: none !important + } + div.profile:not(.EMERGENCY) div.conversationNameContainer { + display: none + } +} + +body.KEYBOARDUP div.profile.GROUP div.status.group, +body.KEYBOARDUP div.profile.DIALOG div.status.dialog, +body.KEYBOARDUP div.profile.GROUP div.conversationNameContainer, +body.KEYBOARDUP div.profile.DIALOG div.conversationNameContainer { + display: none +} + +@media screen and (max-aspect-ratio: 1 / 1) { + body.KEYBOARDUP div.profile.GROUP div.status.group, + body.KEYBOARDUP div.profile.DIALOG div.status.dialog, + body.KEYBOARDUP div.profile.GROUP div.conversationNameContainer, + body.KEYBOARDUP div.profile.DIALOG div.conversationNameContainer { + display: block + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/conversation/conversationRingingPanel.css b/packages/microsoft.skypeapp/controls/conversation/conversationRingingPanel.css index 0b7bcb86..e69fb153 100644 --- a/packages/microsoft.skypeapp/controls/conversation/conversationRingingPanel.css +++ b/packages/microsoft.skypeapp/controls/conversation/conversationRingingPanel.css @@ -1 +1,179 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.ringingPanel{width:100%;display:-ms-grid;-ms-grid-rows:1fr;-ms-grid-columns:1fr;height:100%}div.ringingPanel div.callAnimationContainer{width:100%;height:100%;background:-ms-linear-gradient(top, #00aff0 0%, #02a9e9 17%, #0898d5 42%, #127cb4 73%, #1d5e91 100%)}div.ringingPanel div.callAnimationContainer div.callAnimation div.participant div.ringingAnimation{transform:scale(0.7, 0.7)}div.ringingPanel div.callAnimationContainer div.callAnimation div.bgLayerCallStarting{display:none}div.ringingPanel div.bottomHolder{-ms-grid-row-align:end;display:-ms-grid;-ms-grid-columns:1fr;-ms-grid-rows:auto auto;margin-bottom:20px}div.ringingPanel div.bottomHolder div.incomingCallActionButtons{-ms-grid-row:2;-ms-grid-column-align:center;-ms-grid-row-align:center;transition:opacity 0.3s linear 0s}div.ringingPanel div.bottomHolder div.incomingCallActionButtons button{min-width:10px;padding:0px;font-weight:normal;border-width:0px;z-index:100;display:inline-block;height:60px;width:60px;border-radius:50%;margin:0px 18px;font-family:"Skype UI Symbol";font-size:60px;line-height:normal;text-align:center;opacity:.9;color:#fff;border-color:#fff;box-shadow:0 0 0 5px rgba(0,0,0,0.1)}div.ringingPanel div.bottomHolder div.incomingCallActionButtons button.HIDDEN{display:none}div.ringingPanel div.bottomHolder div.incomingCallActionButtons button:hover{opacity:0.8}@media screen and (-ms-high-contrast: active){div.ringingPanel div.bottomHolder div.incomingCallActionButtons button:hover{background-color:Highlight;color:window}}div.ringingPanel div.bottomHolder div.incomingCallActionButtons button.answer,div.ringingPanel div.bottomHolder div.incomingCallActionButtons button.answerVideo{background-color:#7fba00}div.ringingPanel div.bottomHolder div.incomingCallActionButtons button.answer:hover,div.ringingPanel div.bottomHolder div.incomingCallActionButtons button.answerVideo:hover{background-color:#7fba00}div.ringingPanel div.bottomHolder div.incomingCallActionButtons button.answer:active,div.ringingPanel div.bottomHolder div.incomingCallActionButtons button.answerVideo:active{background-color:#598200}div.ringingPanel div.bottomHolder div.incomingCallActionButtons button.hangUp{background-color:#e81123}div.ringingPanel div.bottomHolder div.incomingCallActionButtons button.hangUp:hover{background-color:#d00f1f}div.ringingPanel div.bottomHolder div.incomingCallActionButtons button.hangUp:active{background-color:#a20c18}@media screen and (-ms-high-contrast: active){div.ringingPanel div.bottomHolder div.incomingCallActionButtons button{box-shadow:0 0 0 5px WindowText;color:-ms-hotlight}}@media screen and (orientation: portrait) and (-ms-high-contrast: active){div.ringingPanel div.bottomHolder div.incomingCallActionButtons button{box-shadow:none;border:1px solid WindowText}}div.ringingPanel header{color:#fff;width:100%;height:120px;overflow:hidden;z-index:999;display:-ms-grid;-ms-grid-columns:90px 1fr;-ms-grid-rows:1fr;overflow:visible;line-height:normal}div.ringingPanel header button.backbutton{margin-left:39px;margin-right:39px;margin-top:59px}div.ringingPanel header div.wrapper{margin-top:62px;-ms-grid-column:2;position:relative}div.ringingPanel header div.wrapper h1.name{margin-right:15px;overflow:hidden;max-width:calc(100% - 20px);text-overflow:ellipsis;white-space:nowrap;display:inline-block}body.RTL div.ringingPanel header div.wrapper h1.name{margin-right:0;margin-left:15px}@media screen and (-ms-high-contrast: active){div.ringingPanel header div.wrapper h1.name{background-color:Window}}div.ringingPanel header div.wrapper div.callStatus{bottom:6px}@media screen and (-ms-high-contrast: active){div.ringingPanel header div.wrapper div.callStatus{background-color:Window}}@media screen and (max-aspect-ratio: 1 / 1){div.ringingPanel header div.wrapper{margin-top:55px}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.ringingPanel { + width: 100%; + display: -ms-grid; + -ms-grid-rows: 1fr; + -ms-grid-columns: 1fr; + height: 100% +} + +div.ringingPanel div.callAnimationContainer { + width: 100%; + height: 100%; + background: -ms-linear-gradient(top, #00aff0 0%, #02a9e9 17%, #0898d5 42%, #127cb4 73%, #1d5e91 100%) +} + +div.ringingPanel div.callAnimationContainer div.callAnimation div.participant div.ringingAnimation { + transform: scale(0.7, 0.7) +} + +div.ringingPanel div.callAnimationContainer div.callAnimation div.bgLayerCallStarting { + display: none +} + +div.ringingPanel div.bottomHolder { + -ms-grid-row-align: end; + display: -ms-grid; + -ms-grid-columns: 1fr; + -ms-grid-rows: auto auto; + margin-bottom: 20px +} + +div.ringingPanel div.bottomHolder div.incomingCallActionButtons { + -ms-grid-row: 2; + -ms-grid-column-align: center; + -ms-grid-row-align: center; + transition: opacity 0.3s linear 0s +} + +div.ringingPanel div.bottomHolder div.incomingCallActionButtons button { + min-width: 10px; + padding: 0px; + font-weight: normal; + border-width: 0px; + z-index: 100; + display: inline-block; + height: 60px; + width: 60px; + border-radius: 50%; + margin: 0px 18px; + font-family: "Skype UI Symbol" !important; + font-size: 60px; + line-height: normal; + text-align: center; + opacity: .9; + color: #fff; + border-color: #fff; + box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1) +} + +div.ringingPanel div.bottomHolder div.incomingCallActionButtons button.HIDDEN { + display: none +} + +div.ringingPanel div.bottomHolder div.incomingCallActionButtons button:hover { + opacity: 0.8 +} + +@media screen and (-ms-high-contrast: active) { + div.ringingPanel div.bottomHolder div.incomingCallActionButtons button:hover { + background-color: Highlight; + color: window + } +} + +div.ringingPanel div.bottomHolder div.incomingCallActionButtons button.answer, +div.ringingPanel div.bottomHolder div.incomingCallActionButtons button.answerVideo { + background-color: #7fba00 +} + +div.ringingPanel div.bottomHolder div.incomingCallActionButtons button.answer:hover, +div.ringingPanel div.bottomHolder div.incomingCallActionButtons button.answerVideo:hover { + background-color: #7fba00 +} + +div.ringingPanel div.bottomHolder div.incomingCallActionButtons button.answer:active, +div.ringingPanel div.bottomHolder div.incomingCallActionButtons button.answerVideo:active { + background-color: #598200 +} + +div.ringingPanel div.bottomHolder div.incomingCallActionButtons button.hangUp { + background-color: #e81123 +} + +div.ringingPanel div.bottomHolder div.incomingCallActionButtons button.hangUp:hover { + background-color: #d00f1f +} + +div.ringingPanel div.bottomHolder div.incomingCallActionButtons button.hangUp:active { + background-color: #a20c18 +} + +@media screen and (-ms-high-contrast: active) { + div.ringingPanel div.bottomHolder div.incomingCallActionButtons button { + box-shadow: 0 0 0 5px WindowText; + color: -ms-hotlight + } +} + +@media screen and (orientation: portrait) and (-ms-high-contrast: active) { + div.ringingPanel div.bottomHolder div.incomingCallActionButtons button { + box-shadow: none; + border: 1px solid WindowText + } +} + +div.ringingPanel header { + color: #fff; + width: 100%; + height: 120px; + overflow: hidden; + z-index: 999; + display: -ms-grid; + -ms-grid-columns: 90px 1fr; + -ms-grid-rows: 1fr; + overflow: visible; + line-height: normal +} + +div.ringingPanel header button.backbutton { + margin-left: 39px; + margin-right: 39px; + margin-top: 59px +} + +div.ringingPanel header div.wrapper { + margin-top: 62px; + -ms-grid-column: 2; + position: relative +} + +div.ringingPanel header div.wrapper h1.name { + margin-right: 15px; + overflow: hidden; + max-width: calc(100% - 20px); + text-overflow: ellipsis; + white-space: nowrap; + display: inline-block +} + +body.RTL div.ringingPanel header div.wrapper h1.name { + margin-right: 0; + margin-left: 15px +} + +@media screen and (-ms-high-contrast: active) { + div.ringingPanel header div.wrapper h1.name { + background-color: Window + } +} + +div.ringingPanel header div.wrapper div.callStatus { + bottom: 6px +} + +@media screen and (-ms-high-contrast: active) { + div.ringingPanel header div.wrapper div.callStatus { + background-color: Window + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.ringingPanel header div.wrapper { + margin-top: 55px + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/conversation/conversationRingingPanel.scss b/packages/microsoft.skypeapp/controls/conversation/conversationRingingPanel.scss index 72850f6f..6ebe735c 100644 --- a/packages/microsoft.skypeapp/controls/conversation/conversationRingingPanel.scss +++ b/packages/microsoft.skypeapp/controls/conversation/conversationRingingPanel.scss @@ -50,7 +50,7 @@ div.ringingPanel { width: 60px; border-radius: 50%; margin: 0px 18px; - font-family: "Skype UI Symbol"; + font-family: "Skype UI Symbol" !important; font-size: 60px; line-height: normal; text-align: center; diff --git a/packages/microsoft.skypeapp/controls/conversation/liveGroupConversation.css b/packages/microsoft.skypeapp/controls/conversation/liveGroupConversation.css index 2d0b1c42..7dd1ebe9 100644 --- a/packages/microsoft.skypeapp/controls/conversation/liveGroupConversation.css +++ b/packages/microsoft.skypeapp/controls/conversation/liveGroupConversation.css @@ -1 +1,1061 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.liveGroupConversation div.bottomHolder{-ms-grid-row-align:end;display:-ms-grid;-ms-grid-columns:1fr;-ms-grid-rows:auto auto;margin-bottom:20px}div.liveGroupConversation div.bottomHolder div.actions{display:none;-ms-grid-row:2;-ms-grid-column-align:center;-ms-grid-row-align:center}@media screen and (max-aspect-ratio: 1 / 1){div.liveGroupConversation div.bottomHolder div.actions{margin-bottom:15px}}div.liveGroupConversation div.bottomHolder div.actions button{padding:0;min-height:0;min-width:0;font-weight:normal;border:0;font-family:"Skype UI Symbol";font-weight:normal;font-size:40px;background-color:#00aff0;color:#fff;display:inline-block;width:40px;height:40px;border-radius:50%;line-height:normal;text-align:center;position:relative;z-index:100;height:60px;width:60px;margin:0px 18px;font-size:60px;opacity:.9;border-color:#fff;box-shadow:0 0 0 5px rgba(0,0,0,0.1);background-color:#00aff0}@media screen and (-ms-high-contrast: active){div.liveGroupConversation div.bottomHolder div.actions button{box-sizing:content-box;background-color:ButtonFace;color:ButtonText;border:2px solid ButtonText}div.liveGroupConversation div.bottomHolder div.actions button:hover:not([disabled]){background-color:Highlight;color:HighlightText}div.liveGroupConversation div.bottomHolder div.actions button[disabled]{border-color:GrayText;color:GrayText}}div.liveGroupConversation div.bottomHolder div.actions button.HIDDEN{display:none}div.liveGroupConversation div.bottomHolder div.actions button:hover{background-color:rgba(0,157,216,0.8)}@media screen and (-ms-high-contrast: active){div.liveGroupConversation div.bottomHolder div.actions button:hover{background-color:Highlight;color:window}}div.liveGroupConversation div.bottomHolder div.actions button:active{background-color:#007aa8}div.liveGroupConversation div.bottomHolder div.actions button.answer,div.liveGroupConversation div.bottomHolder div.actions button.answerVideo{background-color:#7fba00}div.liveGroupConversation div.bottomHolder div.actions button.answer:hover,div.liveGroupConversation div.bottomHolder div.actions button.answerVideo:hover{background-color:#7fba00}div.liveGroupConversation div.bottomHolder div.actions button.answer:active,div.liveGroupConversation div.bottomHolder div.actions button.answerVideo:active{background-color:#598200}div.liveGroupConversation div.bottomHolder div.actions button.hangUp{background-color:#e81123}div.liveGroupConversation div.bottomHolder div.actions button.hangUp:hover{background-color:#d00f1f}div.liveGroupConversation div.bottomHolder div.actions button.hangUp:active{background-color:#a20c18}@media screen and (max-aspect-ratio: 1 / 1){div.liveGroupConversation div.bottomHolder div.actions button{margin:0px 13px}}@media screen and (max-width: 400px){div.liveGroupConversation div.bottomHolder div.actions button{height:40px;width:40px;margin:0px 8px;font-size:40px}}@media screen and (max-aspect-ratio: 1 / 1){div.liveGroupConversation div.bottomHolder{margin-bottom:0px}}@media screen and (max-aspect-ratio: 1 / 1){body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.bottomHolder div.actions{display:none}div.liveGroupConversation.CHATOPEN div.bottomHolder div.actions button{height:40px;width:40px;margin:0px 8px;font-size:40px}}div.liveGroupConversation.VIDEOCALL div.actionButtons button{background-color:rgba(0,175,240,0.85)}div.liveGroupConversation.VIDEOCALL div.actionButtons button.hangUp{background-color:rgba(232,17,35,0.85)}body.LOCKSCREEN div.liveGroupConversation div.bottomHolder,body.LOCKSCREEN div.liveGroupConversation button.backbutton,div.liveGroupConversation.IMMERSIVE div.bottomHolder{opacity:0;pointer-events:none}div.liveGroupConversation.LIVEHOLDLOCAL div.bottomHolder div.actions,div.liveGroupConversation.LIVEHOLDREMOTE div.bottomHolder div.actions,div.liveGroupConversation.LIVE div.bottomHolder div.actions,div.liveGroupConversation.PRELIVE div.bottomHolder div.actions{display:block}div.liveGroupConversation.LIVEHOLDLOCAL div.bottomHolder div.actions>button.camera,div.liveGroupConversation.LIVEHOLDREMOTE div.bottomHolder div.actions>button.camera,div.liveGroupConversation.LIVEHOLDLOCAL div.bottomHolder div.actions>button.mute,div.liveGroupConversation.LIVEHOLDREMOTE div.bottomHolder div.actions>button.mute{z-index:49}/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.liveGroupConversation div.logo{display:none;position:absolute;top:0;left:0;background:url("/images/immersive_logo_274x180.png");width:274px;height:180px;z-index:999}body.RTL div.liveGroupConversation div.logo{left:auto;right:0}@media screen and (min-height: 999px){div.liveGroupConversation div.logo{background:url("/images/immersive_logo_274x180.png");width:274px;height:180px}}@media screen and (max-aspect-ratio: 1 / 1){div.liveGroupConversation div.logo{background:url("/images/immersive_logo_155x108.png");width:155px;height:108px}}@media screen and (-ms-high-contrast: active){div.liveGroupConversation div.logo{-ms-high-contrast-adjust:none}}div.liveGroupConversation>header{position:absolute;color:#fff;width:calc(100% - 80px);height:120px;overflow:hidden;left:0;-ms-grid-row:1;display:-ms-grid;-ms-grid-columns:100px 1fr;-ms-grid-rows:1fr;overflow:visible;line-height:normal;z-index:51;pointer-events:none}body.RTL div.liveGroupConversation>header{left:auto;right:0}div.liveGroupConversation>header button.backbutton{-ms-grid-column:1;margin-left:39px;margin-top:59px;pointer-events:all}body.RTL div.liveGroupConversation>header button.backbutton{margin-left:0;margin-right:39px}@media screen and (max-aspect-ratio: 1 / 1){div.liveGroupConversation>header button.backbutton{margin-left:20px;margin-top:35px}body.RTL div.liveGroupConversation>header button.backbutton{margin-left:0;margin-right:20px}}div.liveGroupConversation>header div.callStatusContainer{margin-top:62px;-ms-grid-column:2;position:relative}@media screen and (max-aspect-ratio: 1 / 1){div.liveGroupConversation>header div.callStatusContainer{white-space:normal;margin-top:35px}}@media screen and (max-aspect-ratio: 1 / 1){div.liveGroupConversation>header{-ms-grid-columns:80px 1fr}}@media screen and (max-width: 400px){div.liveGroupConversation>header{-ms-grid-columns:60px 1fr;width:calc(100% - 60px)}}div.liveGroupConversation.IMMERSIVE div.logo{display:block}div.liveGroupConversation.IMMERSIVE>header{opacity:0}@media screen and (max-aspect-ratio: 1 / 1){body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.logo{display:none}body.KEYBOARDUP div.liveGroupConversation.CHATOPEN>header{opacity:0}}div.liveGroupConversation{display:-ms-grid;-ms-grid-rows:1fr;-ms-grid-columns:1fr;height:100%;background:-ms-linear-gradient(top, #00aff0 0%, #02a9e9 17%, #0898d5 42%, #127cb4 73%, #1d5e91 100%)}div.liveGroupConversation.PARTICIPANTSINITIALIZED{background:-ms-linear-gradient(top, #054359 0%, #043141 12%, #032632 22%, #02171e 41%, #010e12 65%, #010c0f 100%)}div.liveGroupConversation.PARTICIPANTSINITIALIZED div.viewport{opacity:1}div.liveGroupConversation div.ariaLiveContainer{display:none}div.liveGroupConversation div.immersiveFocusStore{opacity:0;pointer-events:none}div.liveGroupConversation div.chatNewMsgNotifContainer{pointer-events:none}div.liveGroupConversation div.participantListPanel{position:absolute;display:none;z-index:1000;max-width:320px;width:100%;height:100%}@media screen and (max-aspect-ratio: 1 / 1) and (max-width: 401px){div.liveGroupConversation div.participantListPanel{max-width:400px}}div.liveGroupConversation div.participantListPanel.VISIBLE{display:block}div.liveGroupConversation div.viewport{display:-ms-grid;opacity:0;-ms-grid-rows:1fr;-ms-grid-columns:1fr}div.liveGroupConversation div.viewport div.gallery div.ribbon{width:calc(100% - 20px);margin:15px 10px 0 10px}body.KEYBOARDUP div.liveGroupConversation div.viewport div.gallery div.ribbon{display:none}div.liveGroupConversation div.viewport div.gallery div.ribbon div.background{padding:0px}div.liveGroupConversation div.viewport div.gallery div.ribbon div.background div.myselfVideo{display:none;height:120px}div.liveGroupConversation div.viewport div.gallery div.ribbon div.background div.myselfVideo.VISIBLE{display:inline-block}div.liveGroupConversation div.viewport div.gallery div.ribbon div.background div.myselfVideo:focus{outline:1px dotted white}div.liveGroupConversation div.viewport div.gallery div.ribbon div.background div.myselfVideo div.videoStreamWrapper{display:inline-block;height:120px;width:120px}@media screen and (max-aspect-ratio: 1 / 1){div.liveGroupConversation.CHATOPEN div.viewport div.gallery{-ms-grid-rows:1fr 0px 0px}div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.stage div.conversationParticipantStream,div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation div.conversationParticipantStream{background:none !important;max-width:320px;max-height:240px;-ms-grid-column-align:center}div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.stage div.conversationParticipantStream div.avatarCont,div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation div.conversationParticipantStream div.avatarCont{width:160px !important;height:160px !important;max-height:none;max-width:none}div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.stage div.conversationParticipantStream div.name,div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation div.conversationParticipantStream div.name{bottom:18px}div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.stage div.conversationParticipantStream div.participantStatusLabel,div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation div.conversationParticipantStream div.participantStatusLabel{bottom:36px}div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.stage div.conversationParticipantStream div.participantStatusIcon,div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation div.conversationParticipantStream div.participantStatusIcon{font-size:72pt}body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.stage div.conversationParticipantStream,body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation div.conversationParticipantStream{width:120px;height:90px}body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.stage div.conversationParticipantStream div.avatarCont,body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation div.conversationParticipantStream div.avatarCont{width:60px !important;height:60px !important}body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.stage div.conversationParticipantStream div.name,body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation div.conversationParticipantStream div.name{display:none}body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.stage div.conversationParticipantStream div.participantStatusLabel,body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation div.conversationParticipantStream div.participantStatusLabel{display:none}body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.stage div.conversationParticipantStream div.participantStatusIcon,body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation div.conversationParticipantStream div.participantStatusIcon{font-size:72pt}div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation{-ms-grid-column-align:center}div.liveGroupConversation.CHATOPEN div.ribbon{display:none !important}div.liveGroupConversation.CHATOPEN div.myselfVideo{visibility:hidden;opacity:0}}div.liveGroupConversation div.videoStreamWrapper{height:100%}div.liveGroupConversation div.protectionLayer{display:none;height:100%;position:relative;z-index:50;opacity:1;transition:opacity 1s linear;background:url("/images/bgLiveConversationTopProtection.png") repeat-x;pointer-events:none}div.liveGroupConversation div.protectionLayer.galleryProtection{height:250px}@media screen and (max-aspect-ratio: 1 / 1){body.KEYBOARDUP div.liveGroupConversation div.protectionLayer{display:none}}div.liveGroupConversation.LIVE div.myselfVideo{position:relative}div.liveGroupConversation.LIVE div.protectionLayer{display:block}@media screen and (-ms-high-contrast: active){div.liveGroupConversation.LIVE div.protectionLayer{display:none}}div.liveGroupConversation.IMMERSIVE div.protectionLayer{display:none}div.liveGroupConversation.PRELIVE{position:relative}div.liveGroupConversation.PRELIVE div.callAnimationContainer{display:block}div.liveGroupConversation.PRELIVE div.viewport{opacity:0 !important}div.liveGroupConversation.PRELIVE div.viewport div.ribbon div.myselfVideo{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,0.15);padding:5px}@media screen and (max-aspect-ratio: 1 / 1){div.liveGroupConversation.PRELIVE div.viewport div.ribbon div.myselfVideo{bottom:85px}}div.liveGroupConversation div.liveConversationContextualMenu.win-menu button.win-command.HIDDEN{display:none}div.liveGroupConversation div.callAnimationContainer{display:none;width:100%;height:100%;background:-ms-linear-gradient(top, #00aff0 0%, #02a9e9 17%, #0898d5 42%, #127cb4 73%, #1d5e91 100%)}div.liveGroupConversation div.callAnimationContainer div.protectionLayer{display:none}div.liveGroupConversation div.centerMessage,div.liveGroupConversation div.sideToSideMessage{-ms-grid-column-align:center;-ms-grid-row-align:center;opacity:0;display:none;transition-timing-function:linear;transition-property:opacity;transition-duration:0.3s;position:relative;z-index:3;text-align:center}div.liveGroupConversation div.centerMessage div.message{position:absolute;bottom:50px;width:60%;left:20%}@media screen and (-ms-high-contrast: active){div.liveGroupConversation div.centerMessage div.message{color:window}}div.liveGroupConversation div.centerMessage.videoOffMessage.VISIBLE,div.liveGroupConversation div.centerMessage.muteMessage.VISIBLE{display:block;opacity:1}@media screen and (-ms-high-contrast: active){div.liveGroupConversation div.centerMessage{color:highLightText}}div.liveGroupConversation div.centerMessage,div.liveGroupConversation div.sideToSideMessage{color:#fff}div.liveGroupConversation.LIVEHOLDREMOTE div.remotelyOnHoldMessage,div.liveGroupConversation.LIVERECOVERING div.recoveringMessage,div.liveGroupConversation.LIVEHOLDLOCAL div.locallyOnHoldMessage{display:block;opacity:1;z-index:60}div.liveGroupConversation.LIVEHOLDREMOTE div.viewport div.gallery div.stage div.conversationParticipantStream div.participantStatusIcon,div.liveGroupConversation.LIVEHOLDREMOTE div.viewport div.gallery div.stage div.name,div.liveGroupConversation.LIVEHOLDREMOTE div.viewport div.gallery div.stage div.participantStatusLabel,div.liveGroupConversation.LIVEHOLDREMOTE div.viewport div.gallery div.presentation div.conversationParticipantStream div.participantStatusIcon,div.liveGroupConversation.LIVEHOLDREMOTE div.viewport div.gallery div.presentation div.name,div.liveGroupConversation.LIVEHOLDREMOTE div.viewport div.gallery div.presentation div.participantStatusLabel,div.liveGroupConversation.LIVEHOLDREMOTE div.viewport div.gallery div.roster div.conversationParticipantStream div.participantStatusIcon,div.liveGroupConversation.LIVEHOLDREMOTE div.viewport div.gallery div.roster div.name,div.liveGroupConversation.LIVEHOLDREMOTE div.viewport div.gallery div.roster div.participantStatusLabel,div.liveGroupConversation.LIVERECOVERING div.viewport div.gallery div.stage div.conversationParticipantStream div.participantStatusIcon,div.liveGroupConversation.LIVERECOVERING div.viewport div.gallery div.stage div.name,div.liveGroupConversation.LIVERECOVERING div.viewport div.gallery div.stage div.participantStatusLabel,div.liveGroupConversation.LIVERECOVERING div.viewport div.gallery div.presentation div.conversationParticipantStream div.participantStatusIcon,div.liveGroupConversation.LIVERECOVERING div.viewport div.gallery div.presentation div.name,div.liveGroupConversation.LIVERECOVERING div.viewport div.gallery div.presentation div.participantStatusLabel,div.liveGroupConversation.LIVERECOVERING div.viewport div.gallery div.roster div.conversationParticipantStream div.participantStatusIcon,div.liveGroupConversation.LIVERECOVERING div.viewport div.gallery div.roster div.name,div.liveGroupConversation.LIVERECOVERING div.viewport div.gallery div.roster div.participantStatusLabel,div.liveGroupConversation.LIVEHOLDLOCAL div.viewport div.gallery div.stage div.conversationParticipantStream div.participantStatusIcon,div.liveGroupConversation.LIVEHOLDLOCAL div.viewport div.gallery div.stage div.name,div.liveGroupConversation.LIVEHOLDLOCAL div.viewport div.gallery div.stage div.participantStatusLabel,div.liveGroupConversation.LIVEHOLDLOCAL div.viewport div.gallery div.presentation div.conversationParticipantStream div.participantStatusIcon,div.liveGroupConversation.LIVEHOLDLOCAL div.viewport div.gallery div.presentation div.name,div.liveGroupConversation.LIVEHOLDLOCAL div.viewport div.gallery div.presentation div.participantStatusLabel,div.liveGroupConversation.LIVEHOLDLOCAL div.viewport div.gallery div.roster div.conversationParticipantStream div.participantStatusIcon,div.liveGroupConversation.LIVEHOLDLOCAL div.viewport div.gallery div.roster div.name,div.liveGroupConversation.LIVEHOLDLOCAL div.viewport div.gallery div.roster div.participantStatusLabel{z-index:1}div.liveGroupConversation.LIVEHOLDLOCAL>div.protectionLayer,div.liveGroupConversation.LIVEHOLDREMOTE>div.protectionLayer,div.liveGroupConversation.LIVERECOVERING>div.protectionLayer{display:block !important;opacity:1 !important;background:rgba(0,0,0,0.8) !important;pointer-events:inherit;height:100%}@media screen and (-ms-high-contrast: active){div.liveGroupConversation.LIVEHOLDLOCAL>div.protectionLayer,div.liveGroupConversation.LIVEHOLDREMOTE>div.protectionLayer,div.liveGroupConversation.LIVERECOVERING>div.protectionLayer{display:none !important}}div.liveGroupConversation.LIVEHOLDLOCAL embed.locallyOnHoldImage{pointer-events:none}div.liveGroupConversation div.avatarCont{display:none;max-width:440px;max-height:440px;width:100vw;height:100vw;-ms-grid-column-align:center;-ms-grid-row-align:center}div.liveGroupConversation div.avatarCont div.protectionLayer{background:none}div.liveGroupConversation.fragment:not(.LIVEENDING):not(.ERROR_IN_LIVE) div.viewport:not(.NO_PARTICIPANT) div.groupAvatarCont{display:none !important}div.liveGroupConversation.fragment.ISGROUP div.viewport div.stage{display:-ms-grid;-ms-grid-row-align:center}div.liveGroupConversation.fragment.ISGROUP.LIVEENDING div.viewport div.stage,div.liveGroupConversation.fragment.ISGROUP.ERROR_IN_LIVE div.viewport div.stage{display:none}div.liveGroupConversation.fragment.ISGROUP.LIVEENDING div.viewport div.ribbon,div.liveGroupConversation.fragment.ISGROUP.ERROR_IN_LIVE div.viewport div.ribbon{display:none}/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery,div.liveGroupConversation div.viewport.PINNED div.gallery,div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery{display:-ms-grid;-ms-grid-rows:1fr;-ms-grid-columns:1fr}div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.stage,div.liveGroupConversation div.viewport.PINNED div.gallery div.stage,div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.stage{display:-ms-grid;-ms-grid-rows:1fr;height:100%}div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.stage div.conversationParticipantStream div.name,div.liveGroupConversation div.viewport.PINNED div.gallery div.stage div.conversationParticipantStream div.name,div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.stage div.conversationParticipantStream div.name{bottom:15%}div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.stage div.participant div.avatarCont,div.liveGroupConversation div.viewport.PINNED div.gallery div.stage div.participant div.avatarCont,div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.stage div.participant div.avatarCont{max-width:440px;max-height:440px}div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.stage div.participantStatusLabel,div.liveGroupConversation div.viewport.PINNED div.gallery div.stage div.participantStatusLabel,div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.stage div.participantStatusLabel{display:none}div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.presentation,div.liveGroupConversation div.viewport.PINNED div.gallery div.presentation,div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.presentation{display:none}div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.ribbon,div.liveGroupConversation div.viewport.PINNED div.gallery div.ribbon,div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.ribbon{-ms-grid-row-align:end;-ms-grid-row:1;margin-bottom:10px}@media screen and (max-aspect-ratio: 1 / 1){div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.ribbon,div.liveGroupConversation div.viewport.PINNED div.gallery div.ribbon,div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.ribbon{margin-bottom:85px}}div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.ribbon div.background,div.liveGroupConversation div.viewport.PINNED div.gallery div.ribbon div.background,div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.ribbon div.background{padding:0px}div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.ribbon div.background div.roster,div.liveGroupConversation div.viewport.PINNED div.gallery div.ribbon div.background div.roster,div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.ribbon div.background div.roster{display:none}div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.ribbon div.background div.myselfVideo,div.liveGroupConversation div.viewport.PINNED div.gallery div.ribbon div.background div.myselfVideo,div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.ribbon div.background div.myselfVideo{float:right;background:rgba(0,0,0,0.15);padding:5px}div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.ribbon div.background div.myselfVideo.DOCKEDLEFT,div.liveGroupConversation div.viewport.PINNED div.gallery div.ribbon div.background div.myselfVideo.DOCKEDLEFT,div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.ribbon div.background div.myselfVideo.DOCKEDLEFT{float:left}div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.ribbon div.background div.myselfVideo.DRAGGING,div.liveGroupConversation div.viewport.PINNED div.gallery div.ribbon div.background div.myselfVideo.DRAGGING,div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.ribbon div.background div.myselfVideo.DRAGGING{position:absolute}div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.ribbon div.background div.myselfVideo.SLOWDOWNTRANSITION,div.liveGroupConversation div.viewport.PINNED div.gallery div.ribbon div.background div.myselfVideo.SLOWDOWNTRANSITION,div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.ribbon div.background div.myselfVideo.SLOWDOWNTRANSITION{transition-timing-function:ease-out;transition-property:left, right, top, bottom;transition-duration:0.3s}div.liveGroupConversation div.viewport.ONE_TO_ONE.SWITCHING div.gallery div.ribbon div.background div.myselfVideo,div.liveGroupConversation div.viewport.PINNED.SWITCHING div.gallery div.ribbon div.background div.myselfVideo,div.liveGroupConversation div.viewport.NO_PARTICIPANT.SWITCHING div.gallery div.ribbon div.background div.myselfVideo{display:inline-block}@media screen and (max-aspect-ratio: 1 / 1){div.liveGroupConversation div.viewport.ONE_TO_ONE.MYSELFVIDEOVISIBLE div.gallery div.stage div.conversationParticipantStream div.name,div.liveGroupConversation div.viewport.ONE_TO_ONE.SWITCHING div.gallery div.stage div.conversationParticipantStream div.name,div.liveGroupConversation div.viewport.PINNED.MYSELFVIDEOVISIBLE div.gallery div.stage div.conversationParticipantStream div.name,div.liveGroupConversation div.viewport.PINNED.SWITCHING div.gallery div.stage div.conversationParticipantStream div.name,div.liveGroupConversation div.viewport.NO_PARTICIPANT.MYSELFVIDEOVISIBLE div.gallery div.stage div.conversationParticipantStream div.name,div.liveGroupConversation div.viewport.NO_PARTICIPANT.SWITCHING div.gallery div.stage div.conversationParticipantStream div.name{bottom:230px}div.liveGroupConversation div.viewport.ONE_TO_ONE.MYSELFVIDEOVISIBLE div.gallery div.stage div.conversationParticipantStream:not(.VIDEOISVISIBLE):not(.ONHOLD):not(.ISENDING) div.name div,div.liveGroupConversation div.viewport.ONE_TO_ONE.SWITCHING div.gallery div.stage div.conversationParticipantStream:not(.VIDEOISVISIBLE):not(.ONHOLD):not(.ISENDING) div.name div,div.liveGroupConversation div.viewport.PINNED.MYSELFVIDEOVISIBLE div.gallery div.stage div.conversationParticipantStream:not(.VIDEOISVISIBLE):not(.ONHOLD):not(.ISENDING) div.name div,div.liveGroupConversation div.viewport.PINNED.SWITCHING div.gallery div.stage div.conversationParticipantStream:not(.VIDEOISVISIBLE):not(.ONHOLD):not(.ISENDING) div.name div,div.liveGroupConversation div.viewport.NO_PARTICIPANT.MYSELFVIDEOVISIBLE div.gallery div.stage div.conversationParticipantStream:not(.VIDEOISVISIBLE):not(.ONHOLD):not(.ISENDING) div.name div,div.liveGroupConversation div.viewport.NO_PARTICIPANT.SWITCHING div.gallery div.stage div.conversationParticipantStream:not(.VIDEOISVISIBLE):not(.ONHOLD):not(.ISENDING) div.name div{background:rgba(0,0,0,0.5);display:inline-block;max-width:80%}}div.liveGroupConversation:not(.ISGROUP) div.viewport.ONE_TO_ONE div.gallery div.stage div.name{display:none}@media screen and (max-aspect-ratio: 1 / 1){div.liveGroupConversation.CHATOPEN div.viewport.ONE_TO_ONE div.gallery div.stage div.conversationParticipantStream{width:auto}div.liveGroupConversation.CHATOPEN div.viewport.ONE_TO_ONE div.gallery div.stage div.conversationParticipantStream div.name{bottom:58px}body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport.ONE_TO_ONE div.gallery div.stage div.conversationParticipantStream{width:auto}div.liveGroupConversation.CHATOPEN div.viewport.ONE_TO_ONE div.gallery div.stage div.conversationParticipantStream video{height:240px}body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport.ONE_TO_ONE div.gallery div.stage div.conversationParticipantStream video{height:90px}}/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.liveGroupConversation div.viewport.PRESENTATION div.gallery{display:-ms-grid;-ms-grid-rows:1fr;-ms-grid-columns:1fr}div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.stage,div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.participantStatusLabel{display:none}div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.ribbon{-ms-grid-row-align:end;-ms-grid-row:1;margin-bottom:10px}@media screen and (max-aspect-ratio: 1 / 1){div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.ribbon{margin-bottom:85px}}@media screen and (max-width: 400px){div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.ribbon{margin-left:0;margin-right:0;width:100%}}div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.ribbon div.background{display:-ms-flexbox;float:right;position:relative}div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.ribbon div.background div.roster{display:none}div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.ribbon div.background div.presentationSpeaker{display:none;height:120px;position:relative}@media screen and (-ms-high-contrast: active){div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.ribbon div.background div.presentationSpeaker{border-width:0}}div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.ribbon div.background div.presentationSpeaker div.conversationParticipantStream div.participant{width:120px}div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.ribbon div.background div.presentationSpeaker div.conversationParticipantStream div.videoParticipant video.videoView{height:120px}div.liveGroupConversation div.viewport.PRESENTATION.PRESENTATIONSPEAKERVISIBLE div.gallery div.ribbon div.background div.presentationSpeaker{display:inline-block}div.liveGroupConversation div.viewport.PRESENTATION.MYSELFVIDEOVISIBLE div.gallery div.ribbon div.background,div.liveGroupConversation div.viewport.PRESENTATION.SWITCHING div.gallery div.ribbon div.background,div.liveGroupConversation div.viewport.PRESENTATION.PRESENTATIONSPEAKERVISIBLE div.gallery div.ribbon div.background{padding:5px;height:120px;background:rgba(0,0,0,0.15)}@media screen and (max-width: 330px){div.liveGroupConversation div.viewport.PRESENTATION.MYSELFVIDEOVISIBLE div.gallery div.ribbon div.background,div.liveGroupConversation div.viewport.PRESENTATION.SWITCHING div.gallery div.ribbon div.background,div.liveGroupConversation div.viewport.PRESENTATION.PRESENTATIONSPEAKERVISIBLE div.gallery div.ribbon div.background{padding:5px 0}}div.liveGroupConversation div.viewport.PRESENTATION.SWITCHING div.gallery div.ribbon div.background div.myselfVideo{display:inline-block}div.liveGroupConversation div.viewport.PRESENTATION.PRESENTATION.PRESENTATIONSPEAKERVISIBLE.MYSELFVIDEOVISIBLE div.gallery div.ribbon div.background div.myselfVideo::before{border-left:5px solid rgba(0,0,0,0.15);margin-top:0;height:100%;width:0px;float:left;content:" ";margin-left:-5px}@media screen and (-ms-high-contrast: active){div.liveGroupConversation div.viewport.PRESENTATION.PRESENTATION.PRESENTATIONSPEAKERVISIBLE.MYSELFVIDEOVISIBLE div.gallery div.ribbon div.background div.myselfVideo::before{border-left:none}}/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery{-ms-grid-row-align:center;display:inline-block}body.KEYBOARDUP div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery{margin-top:0}@media screen and (-ms-view-state: fullscreen-landscape){div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery{margin-top:20px}}div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery div.stage{display:-ms-grid;-ms-grid-rows:1fr}div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery div.stage div.conversationParticipantStream{background:-ms-linear-gradient(bottom left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.05) 100%)}div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery div.stage div.conversationParticipantStream div.avatarCont{width:100%;height:100%}div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery div.presentation{display:none}div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery div.ribbon{display:-ms-flexbox;height:0px;transition:height 1s;transition-delay:1s;justify-content:flex-end}@media screen and (max-aspect-ratio: 1 / 1){div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery div.ribbon{margin:15px 0 0 0;width:calc(100% + 5px);margin-left:-5px}}div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery div.ribbon div.background{display:-ms-flexbox}div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery div.ribbon div.background div.roster{white-space:nowrap;-ms-overflow-style:-ms-autohiding-scrollbar;overflow-x:auto;font-size:0;line-height:0}div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery div.ribbon div.background div.roster .conversationParticipantStream{width:120px;display:inline-block}div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.MYSELFVIDEOVISIBLE div.gallery div.ribbon div.background,div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.SWITCHING div.gallery div.ribbon div.background,div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.ROSTERVISIBLE div.gallery div.ribbon div.background{padding:5px;height:120px;background:rgba(0,0,0,0.15)}@media screen and (max-aspect-ratio: 1 / 1){div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.MYSELFVIDEOVISIBLE div.gallery div.ribbon div.background,div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.SWITCHING div.gallery div.ribbon div.background,div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.ROSTERVISIBLE div.gallery div.ribbon div.background{padding-right:0}}div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.SWITCHING div.gallery div.ribbon div.background div.myselfVideo{display:inline-block}div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.ROSTERVISIBLE div.gallery div.ribbon,div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.MYSELFVIDEOVISIBLE div.gallery div.ribbon{height:130px}div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.ALL_PARTICIPANTS.ROSTERVISIBLE.MYSELFVIDEOVISIBLE div.gallery div.ribbon div.background div.myselfVideo::before{border-left:5px solid rgba(0,0,0,0.15);margin-top:0;height:100%;width:0px;float:left;content:" ";margin-left:-5px}@media screen and (-ms-high-contrast: active){div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.ALL_PARTICIPANTS.ROSTERVISIBLE.MYSELFVIDEOVISIBLE div.gallery div.ribbon div.background div.myselfVideo::before{border-left:none}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.liveGroupConversation div.bottomHolder { + -ms-grid-row-align: end; + display: -ms-grid; + -ms-grid-columns: 1fr; + -ms-grid-rows: auto auto; + margin-bottom: 20px +} + +div.liveGroupConversation div.bottomHolder div.actions { + display: none; + -ms-grid-row: 2; + -ms-grid-column-align: center; + -ms-grid-row-align: center +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.liveGroupConversation div.bottomHolder div.actions { + margin-bottom: 15px + } +} + +div.liveGroupConversation div.bottomHolder div.actions button { + padding: 0; + min-height: 0; + min-width: 0; + font-weight: normal; + border: 0; + font-family: "Skype UI Symbol" !important; + font-weight: normal; + font-size: 40px; + background-color: #00aff0; + color: #fff; + display: inline-block; + width: 40px; + height: 40px; + border-radius: 50%; + line-height: normal; + text-align: center; + position: relative; + z-index: 100; + height: 60px; + width: 60px; + margin: 0px 18px; + font-size: 60px; + opacity: .9; + border-color: #fff; + box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1); + background-color: #00aff0 +} + +@media screen and (-ms-high-contrast: active) { + div.liveGroupConversation div.bottomHolder div.actions button { + box-sizing: content-box; + background-color: ButtonFace; + color: ButtonText; + border: 2px solid ButtonText + } + div.liveGroupConversation div.bottomHolder div.actions button:hover:not([disabled]) { + background-color: Highlight; + color: HighlightText + } + div.liveGroupConversation div.bottomHolder div.actions button[disabled] { + border-color: GrayText; + color: GrayText + } +} + +div.liveGroupConversation div.bottomHolder div.actions button.HIDDEN { + display: none +} + +div.liveGroupConversation div.bottomHolder div.actions button:hover { + background-color: rgba(0, 157, 216, 0.8) +} + +@media screen and (-ms-high-contrast: active) { + div.liveGroupConversation div.bottomHolder div.actions button:hover { + background-color: Highlight; + color: window + } +} + +div.liveGroupConversation div.bottomHolder div.actions button:active { + background-color: #007aa8 +} + +div.liveGroupConversation div.bottomHolder div.actions button.answer, +div.liveGroupConversation div.bottomHolder div.actions button.answerVideo { + background-color: #7fba00 +} + +div.liveGroupConversation div.bottomHolder div.actions button.answer:hover, +div.liveGroupConversation div.bottomHolder div.actions button.answerVideo:hover { + background-color: #7fba00 +} + +div.liveGroupConversation div.bottomHolder div.actions button.answer:active, +div.liveGroupConversation div.bottomHolder div.actions button.answerVideo:active { + background-color: #598200 +} + +div.liveGroupConversation div.bottomHolder div.actions button.hangUp { + background-color: #e81123 +} + +div.liveGroupConversation div.bottomHolder div.actions button.hangUp:hover { + background-color: #d00f1f +} + +div.liveGroupConversation div.bottomHolder div.actions button.hangUp:active { + background-color: #a20c18 +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.liveGroupConversation div.bottomHolder div.actions button { + margin: 0px 13px + } +} + +@media screen and (max-width: 400px) { + div.liveGroupConversation div.bottomHolder div.actions button { + height: 40px; + width: 40px; + margin: 0px 8px; + font-size: 40px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.liveGroupConversation div.bottomHolder { + margin-bottom: 0px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.bottomHolder div.actions { + display: none + } + div.liveGroupConversation.CHATOPEN div.bottomHolder div.actions button { + height: 40px; + width: 40px; + margin: 0px 8px; + font-size: 40px + } +} + +div.liveGroupConversation.VIDEOCALL div.actionButtons button { + background-color: rgba(0, 175, 240, 0.85) +} + +div.liveGroupConversation.VIDEOCALL div.actionButtons button.hangUp { + background-color: rgba(232, 17, 35, 0.85) +} + +body.LOCKSCREEN div.liveGroupConversation div.bottomHolder, +body.LOCKSCREEN div.liveGroupConversation button.backbutton, +div.liveGroupConversation.IMMERSIVE div.bottomHolder { + opacity: 0; + pointer-events: none +} + +div.liveGroupConversation.LIVEHOLDLOCAL div.bottomHolder div.actions, +div.liveGroupConversation.LIVEHOLDREMOTE div.bottomHolder div.actions, +div.liveGroupConversation.LIVE div.bottomHolder div.actions, +div.liveGroupConversation.PRELIVE div.bottomHolder div.actions { + display: block +} + +div.liveGroupConversation.LIVEHOLDLOCAL div.bottomHolder div.actions>button.camera, +div.liveGroupConversation.LIVEHOLDREMOTE div.bottomHolder div.actions>button.camera, +div.liveGroupConversation.LIVEHOLDLOCAL div.bottomHolder div.actions>button.mute, +div.liveGroupConversation.LIVEHOLDREMOTE div.bottomHolder div.actions>button.mute { + z-index: 49 +} + + +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.liveGroupConversation div.logo { + display: none; + position: absolute; + top: 0; + left: 0; + background: url("/images/immersive_logo_274x180.png"); + width: 274px; + height: 180px; + z-index: 999 +} + +body.RTL div.liveGroupConversation div.logo { + left: auto; + right: 0 +} + +@media screen and (min-height: 999px) { + div.liveGroupConversation div.logo { + background: url("/images/immersive_logo_274x180.png"); + width: 274px; + height: 180px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.liveGroupConversation div.logo { + background: url("/images/immersive_logo_155x108.png"); + width: 155px; + height: 108px + } +} + +@media screen and (-ms-high-contrast: active) { + div.liveGroupConversation div.logo { + -ms-high-contrast-adjust: none + } +} + +div.liveGroupConversation>header { + position: absolute; + color: #fff; + width: calc(100% - 80px); + height: 120px; + overflow: hidden; + left: 0; + -ms-grid-row: 1; + display: -ms-grid; + -ms-grid-columns: 100px 1fr; + -ms-grid-rows: 1fr; + overflow: visible; + line-height: normal; + z-index: 51; + pointer-events: none +} + +body.RTL div.liveGroupConversation>header { + left: auto; + right: 0 +} + +div.liveGroupConversation>header button.backbutton { + -ms-grid-column: 1; + margin-left: 39px; + margin-top: 59px; + pointer-events: all +} + +body.RTL div.liveGroupConversation>header button.backbutton { + margin-left: 0; + margin-right: 39px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.liveGroupConversation>header button.backbutton { + margin-left: 20px; + margin-top: 35px + } + body.RTL div.liveGroupConversation>header button.backbutton { + margin-left: 0; + margin-right: 20px + } +} + +div.liveGroupConversation>header div.callStatusContainer { + margin-top: 62px; + -ms-grid-column: 2; + position: relative +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.liveGroupConversation>header div.callStatusContainer { + white-space: normal; + margin-top: 35px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.liveGroupConversation>header { + -ms-grid-columns: 80px 1fr + } +} + +@media screen and (max-width: 400px) { + div.liveGroupConversation>header { + -ms-grid-columns: 60px 1fr; + width: calc(100% - 60px) + } +} + +div.liveGroupConversation.IMMERSIVE div.logo { + display: block +} + +div.liveGroupConversation.IMMERSIVE>header { + opacity: 0 +} + +@media screen and (max-aspect-ratio: 1 / 1) { + body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.logo { + display: none + } + body.KEYBOARDUP div.liveGroupConversation.CHATOPEN>header { + opacity: 0 + } +} + +div.liveGroupConversation { + display: -ms-grid; + -ms-grid-rows: 1fr; + -ms-grid-columns: 1fr; + height: 100%; + background: -ms-linear-gradient(top, #00aff0 0%, #02a9e9 17%, #0898d5 42%, #127cb4 73%, #1d5e91 100%) +} + +div.liveGroupConversation.PARTICIPANTSINITIALIZED { + background: -ms-linear-gradient(top, #054359 0%, #043141 12%, #032632 22%, #02171e 41%, #010e12 65%, #010c0f 100%) +} + +div.liveGroupConversation.PARTICIPANTSINITIALIZED div.viewport { + opacity: 1 +} + +div.liveGroupConversation div.ariaLiveContainer { + display: none +} + +div.liveGroupConversation div.immersiveFocusStore { + opacity: 0; + pointer-events: none +} + +div.liveGroupConversation div.chatNewMsgNotifContainer { + pointer-events: none +} + +div.liveGroupConversation div.participantListPanel { + position: absolute; + display: none; + z-index: 1000; + max-width: 320px; + width: 100%; + height: 100% +} + +@media screen and (max-aspect-ratio: 1 / 1) and (max-width: 401px) { + div.liveGroupConversation div.participantListPanel { + max-width: 400px + } +} + +div.liveGroupConversation div.participantListPanel.VISIBLE { + display: block +} + +div.liveGroupConversation div.viewport { + display: -ms-grid; + opacity: 0; + -ms-grid-rows: 1fr; + -ms-grid-columns: 1fr +} + +div.liveGroupConversation div.viewport div.gallery div.ribbon { + width: calc(100% - 20px); + margin: 15px 10px 0 10px +} + +body.KEYBOARDUP div.liveGroupConversation div.viewport div.gallery div.ribbon { + display: none +} + +div.liveGroupConversation div.viewport div.gallery div.ribbon div.background { + padding: 0px +} + +div.liveGroupConversation div.viewport div.gallery div.ribbon div.background div.myselfVideo { + display: none; + height: 120px +} + +div.liveGroupConversation div.viewport div.gallery div.ribbon div.background div.myselfVideo.VISIBLE { + display: inline-block +} + +div.liveGroupConversation div.viewport div.gallery div.ribbon div.background div.myselfVideo:focus { + outline: 1px dotted white +} + +div.liveGroupConversation div.viewport div.gallery div.ribbon div.background div.myselfVideo div.videoStreamWrapper { + display: inline-block; + height: 120px; + width: 120px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.liveGroupConversation.CHATOPEN div.viewport div.gallery { + -ms-grid-rows: 1fr 0px 0px + } + div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.stage div.conversationParticipantStream, + div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation div.conversationParticipantStream { + background: none !important; + max-width: 320px; + max-height: 240px; + -ms-grid-column-align: center + } + div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.stage div.conversationParticipantStream div.avatarCont, + div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation div.conversationParticipantStream div.avatarCont { + width: 160px !important; + height: 160px !important; + max-height: none; + max-width: none + } + div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.stage div.conversationParticipantStream div.name, + div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation div.conversationParticipantStream div.name { + bottom: 18px + } + div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.stage div.conversationParticipantStream div.participantStatusLabel, + div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation div.conversationParticipantStream div.participantStatusLabel { + bottom: 36px + } + div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.stage div.conversationParticipantStream div.participantStatusIcon, + div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation div.conversationParticipantStream div.participantStatusIcon { + font-size: 72pt + } + body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.stage div.conversationParticipantStream, + body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation div.conversationParticipantStream { + width: 120px; + height: 90px + } + body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.stage div.conversationParticipantStream div.avatarCont, + body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation div.conversationParticipantStream div.avatarCont { + width: 60px !important; + height: 60px !important + } + body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.stage div.conversationParticipantStream div.name, + body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation div.conversationParticipantStream div.name { + display: none + } + body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.stage div.conversationParticipantStream div.participantStatusLabel, + body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation div.conversationParticipantStream div.participantStatusLabel { + display: none + } + body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.stage div.conversationParticipantStream div.participantStatusIcon, + body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation div.conversationParticipantStream div.participantStatusIcon { + font-size: 72pt + } + div.liveGroupConversation.CHATOPEN div.viewport div.gallery div.presentation { + -ms-grid-column-align: center + } + div.liveGroupConversation.CHATOPEN div.ribbon { + display: none !important + } + div.liveGroupConversation.CHATOPEN div.myselfVideo { + visibility: hidden; + opacity: 0 + } +} + +div.liveGroupConversation div.videoStreamWrapper { + height: 100% +} + +div.liveGroupConversation div.protectionLayer { + display: none; + height: 100%; + position: relative; + z-index: 50; + opacity: 1; + transition: opacity 1s linear; + background: url("/images/bgLiveConversationTopProtection.png") repeat-x; + pointer-events: none +} + +div.liveGroupConversation div.protectionLayer.galleryProtection { + height: 250px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + body.KEYBOARDUP div.liveGroupConversation div.protectionLayer { + display: none + } +} + +div.liveGroupConversation.LIVE div.myselfVideo { + position: relative +} + +div.liveGroupConversation.LIVE div.protectionLayer { + display: block +} + +@media screen and (-ms-high-contrast: active) { + div.liveGroupConversation.LIVE div.protectionLayer { + display: none + } +} + +div.liveGroupConversation.IMMERSIVE div.protectionLayer { + display: none +} + +div.liveGroupConversation.PRELIVE { + position: relative +} + +div.liveGroupConversation.PRELIVE div.callAnimationContainer { + display: block +} + +div.liveGroupConversation.PRELIVE div.viewport { + opacity: 0 !important +} + +div.liveGroupConversation.PRELIVE div.viewport div.ribbon div.myselfVideo { + position: absolute; + right: 10px; + bottom: 10px; + background: rgba(0, 0, 0, 0.15); + padding: 5px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.liveGroupConversation.PRELIVE div.viewport div.ribbon div.myselfVideo { + bottom: 85px + } +} + +div.liveGroupConversation div.liveConversationContextualMenu.win-menu button.win-command.HIDDEN { + display: none +} + +div.liveGroupConversation div.callAnimationContainer { + display: none; + width: 100%; + height: 100%; + background: -ms-linear-gradient(top, #00aff0 0%, #02a9e9 17%, #0898d5 42%, #127cb4 73%, #1d5e91 100%) +} + +div.liveGroupConversation div.callAnimationContainer div.protectionLayer { + display: none +} + +div.liveGroupConversation div.centerMessage, +div.liveGroupConversation div.sideToSideMessage { + -ms-grid-column-align: center; + -ms-grid-row-align: center; + opacity: 0; + display: none; + transition-timing-function: linear; + transition-property: opacity; + transition-duration: 0.3s; + position: relative; + z-index: 3; + text-align: center +} + +div.liveGroupConversation div.centerMessage div.message { + position: absolute; + bottom: 50px; + width: 60%; + left: 20% +} + +@media screen and (-ms-high-contrast: active) { + div.liveGroupConversation div.centerMessage div.message { + color: window + } +} + +div.liveGroupConversation div.centerMessage.videoOffMessage.VISIBLE, +div.liveGroupConversation div.centerMessage.muteMessage.VISIBLE { + display: block; + opacity: 1 +} + +@media screen and (-ms-high-contrast: active) { + div.liveGroupConversation div.centerMessage { + color: highLightText + } +} + +div.liveGroupConversation div.centerMessage, +div.liveGroupConversation div.sideToSideMessage { + color: #fff +} + +div.liveGroupConversation.LIVEHOLDREMOTE div.remotelyOnHoldMessage, +div.liveGroupConversation.LIVERECOVERING div.recoveringMessage, +div.liveGroupConversation.LIVEHOLDLOCAL div.locallyOnHoldMessage { + display: block; + opacity: 1; + z-index: 60 +} + +div.liveGroupConversation.LIVEHOLDREMOTE div.viewport div.gallery div.stage div.conversationParticipantStream div.participantStatusIcon, +div.liveGroupConversation.LIVEHOLDREMOTE div.viewport div.gallery div.stage div.name, +div.liveGroupConversation.LIVEHOLDREMOTE div.viewport div.gallery div.stage div.participantStatusLabel, +div.liveGroupConversation.LIVEHOLDREMOTE div.viewport div.gallery div.presentation div.conversationParticipantStream div.participantStatusIcon, +div.liveGroupConversation.LIVEHOLDREMOTE div.viewport div.gallery div.presentation div.name, +div.liveGroupConversation.LIVEHOLDREMOTE div.viewport div.gallery div.presentation div.participantStatusLabel, +div.liveGroupConversation.LIVEHOLDREMOTE div.viewport div.gallery div.roster div.conversationParticipantStream div.participantStatusIcon, +div.liveGroupConversation.LIVEHOLDREMOTE div.viewport div.gallery div.roster div.name, +div.liveGroupConversation.LIVEHOLDREMOTE div.viewport div.gallery div.roster div.participantStatusLabel, +div.liveGroupConversation.LIVERECOVERING div.viewport div.gallery div.stage div.conversationParticipantStream div.participantStatusIcon, +div.liveGroupConversation.LIVERECOVERING div.viewport div.gallery div.stage div.name, +div.liveGroupConversation.LIVERECOVERING div.viewport div.gallery div.stage div.participantStatusLabel, +div.liveGroupConversation.LIVERECOVERING div.viewport div.gallery div.presentation div.conversationParticipantStream div.participantStatusIcon, +div.liveGroupConversation.LIVERECOVERING div.viewport div.gallery div.presentation div.name, +div.liveGroupConversation.LIVERECOVERING div.viewport div.gallery div.presentation div.participantStatusLabel, +div.liveGroupConversation.LIVERECOVERING div.viewport div.gallery div.roster div.conversationParticipantStream div.participantStatusIcon, +div.liveGroupConversation.LIVERECOVERING div.viewport div.gallery div.roster div.name, +div.liveGroupConversation.LIVERECOVERING div.viewport div.gallery div.roster div.participantStatusLabel, +div.liveGroupConversation.LIVEHOLDLOCAL div.viewport div.gallery div.stage div.conversationParticipantStream div.participantStatusIcon, +div.liveGroupConversation.LIVEHOLDLOCAL div.viewport div.gallery div.stage div.name, +div.liveGroupConversation.LIVEHOLDLOCAL div.viewport div.gallery div.stage div.participantStatusLabel, +div.liveGroupConversation.LIVEHOLDLOCAL div.viewport div.gallery div.presentation div.conversationParticipantStream div.participantStatusIcon, +div.liveGroupConversation.LIVEHOLDLOCAL div.viewport div.gallery div.presentation div.name, +div.liveGroupConversation.LIVEHOLDLOCAL div.viewport div.gallery div.presentation div.participantStatusLabel, +div.liveGroupConversation.LIVEHOLDLOCAL div.viewport div.gallery div.roster div.conversationParticipantStream div.participantStatusIcon, +div.liveGroupConversation.LIVEHOLDLOCAL div.viewport div.gallery div.roster div.name, +div.liveGroupConversation.LIVEHOLDLOCAL div.viewport div.gallery div.roster div.participantStatusLabel { + z-index: 1 +} + +div.liveGroupConversation.LIVEHOLDLOCAL>div.protectionLayer, +div.liveGroupConversation.LIVEHOLDREMOTE>div.protectionLayer, +div.liveGroupConversation.LIVERECOVERING>div.protectionLayer { + display: block !important; + opacity: 1 !important; + background: rgba(0, 0, 0, 0.8) !important; + pointer-events: inherit; + height: 100% +} + +@media screen and (-ms-high-contrast: active) { + div.liveGroupConversation.LIVEHOLDLOCAL>div.protectionLayer, + div.liveGroupConversation.LIVEHOLDREMOTE>div.protectionLayer, + div.liveGroupConversation.LIVERECOVERING>div.protectionLayer { + display: none !important + } +} + +div.liveGroupConversation.LIVEHOLDLOCAL embed.locallyOnHoldImage { + pointer-events: none +} + +div.liveGroupConversation div.avatarCont { + display: none; + max-width: 440px; + max-height: 440px; + width: 100vw; + height: 100vw; + -ms-grid-column-align: center; + -ms-grid-row-align: center +} + +div.liveGroupConversation div.avatarCont div.protectionLayer { + background: none +} + +div.liveGroupConversation.fragment:not(.LIVEENDING):not(.ERROR_IN_LIVE) div.viewport:not(.NO_PARTICIPANT) div.groupAvatarCont { + display: none !important +} + +div.liveGroupConversation.fragment.ISGROUP div.viewport div.stage { + display: -ms-grid; + -ms-grid-row-align: center +} + +div.liveGroupConversation.fragment.ISGROUP.LIVEENDING div.viewport div.stage, +div.liveGroupConversation.fragment.ISGROUP.ERROR_IN_LIVE div.viewport div.stage { + display: none +} + +div.liveGroupConversation.fragment.ISGROUP.LIVEENDING div.viewport div.ribbon, +div.liveGroupConversation.fragment.ISGROUP.ERROR_IN_LIVE div.viewport div.ribbon { + display: none +} + + +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery, +div.liveGroupConversation div.viewport.PINNED div.gallery, +div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery { + display: -ms-grid; + -ms-grid-rows: 1fr; + -ms-grid-columns: 1fr +} + +div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.stage, +div.liveGroupConversation div.viewport.PINNED div.gallery div.stage, +div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.stage { + display: -ms-grid; + -ms-grid-rows: 1fr; + height: 100% +} + +div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.stage div.conversationParticipantStream div.name, +div.liveGroupConversation div.viewport.PINNED div.gallery div.stage div.conversationParticipantStream div.name, +div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.stage div.conversationParticipantStream div.name { + bottom: 15% +} + +div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.stage div.participant div.avatarCont, +div.liveGroupConversation div.viewport.PINNED div.gallery div.stage div.participant div.avatarCont, +div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.stage div.participant div.avatarCont { + max-width: 440px; + max-height: 440px +} + +div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.stage div.participantStatusLabel, +div.liveGroupConversation div.viewport.PINNED div.gallery div.stage div.participantStatusLabel, +div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.stage div.participantStatusLabel { + display: none +} + +div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.presentation, +div.liveGroupConversation div.viewport.PINNED div.gallery div.presentation, +div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.presentation { + display: none +} + +div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.ribbon, +div.liveGroupConversation div.viewport.PINNED div.gallery div.ribbon, +div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.ribbon { + -ms-grid-row-align: end; + -ms-grid-row: 1; + margin-bottom: 10px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.ribbon, + div.liveGroupConversation div.viewport.PINNED div.gallery div.ribbon, + div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.ribbon { + margin-bottom: 85px + } +} + +div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.ribbon div.background, +div.liveGroupConversation div.viewport.PINNED div.gallery div.ribbon div.background, +div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.ribbon div.background { + padding: 0px +} + +div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.ribbon div.background div.roster, +div.liveGroupConversation div.viewport.PINNED div.gallery div.ribbon div.background div.roster, +div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.ribbon div.background div.roster { + display: none +} + +div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.ribbon div.background div.myselfVideo, +div.liveGroupConversation div.viewport.PINNED div.gallery div.ribbon div.background div.myselfVideo, +div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.ribbon div.background div.myselfVideo { + float: right; + background: rgba(0, 0, 0, 0.15); + padding: 5px +} + +div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.ribbon div.background div.myselfVideo.DOCKEDLEFT, +div.liveGroupConversation div.viewport.PINNED div.gallery div.ribbon div.background div.myselfVideo.DOCKEDLEFT, +div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.ribbon div.background div.myselfVideo.DOCKEDLEFT { + float: left +} + +div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.ribbon div.background div.myselfVideo.DRAGGING, +div.liveGroupConversation div.viewport.PINNED div.gallery div.ribbon div.background div.myselfVideo.DRAGGING, +div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.ribbon div.background div.myselfVideo.DRAGGING { + position: absolute +} + +div.liveGroupConversation div.viewport.ONE_TO_ONE div.gallery div.ribbon div.background div.myselfVideo.SLOWDOWNTRANSITION, +div.liveGroupConversation div.viewport.PINNED div.gallery div.ribbon div.background div.myselfVideo.SLOWDOWNTRANSITION, +div.liveGroupConversation div.viewport.NO_PARTICIPANT div.gallery div.ribbon div.background div.myselfVideo.SLOWDOWNTRANSITION { + transition-timing-function: ease-out; + transition-property: left, right, top, bottom; + transition-duration: 0.3s +} + +div.liveGroupConversation div.viewport.ONE_TO_ONE.SWITCHING div.gallery div.ribbon div.background div.myselfVideo, +div.liveGroupConversation div.viewport.PINNED.SWITCHING div.gallery div.ribbon div.background div.myselfVideo, +div.liveGroupConversation div.viewport.NO_PARTICIPANT.SWITCHING div.gallery div.ribbon div.background div.myselfVideo { + display: inline-block +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.liveGroupConversation div.viewport.ONE_TO_ONE.MYSELFVIDEOVISIBLE div.gallery div.stage div.conversationParticipantStream div.name, + div.liveGroupConversation div.viewport.ONE_TO_ONE.SWITCHING div.gallery div.stage div.conversationParticipantStream div.name, + div.liveGroupConversation div.viewport.PINNED.MYSELFVIDEOVISIBLE div.gallery div.stage div.conversationParticipantStream div.name, + div.liveGroupConversation div.viewport.PINNED.SWITCHING div.gallery div.stage div.conversationParticipantStream div.name, + div.liveGroupConversation div.viewport.NO_PARTICIPANT.MYSELFVIDEOVISIBLE div.gallery div.stage div.conversationParticipantStream div.name, + div.liveGroupConversation div.viewport.NO_PARTICIPANT.SWITCHING div.gallery div.stage div.conversationParticipantStream div.name { + bottom: 230px + } + div.liveGroupConversation div.viewport.ONE_TO_ONE.MYSELFVIDEOVISIBLE div.gallery div.stage div.conversationParticipantStream:not(.VIDEOISVISIBLE):not(.ONHOLD):not(.ISENDING) div.name div, + div.liveGroupConversation div.viewport.ONE_TO_ONE.SWITCHING div.gallery div.stage div.conversationParticipantStream:not(.VIDEOISVISIBLE):not(.ONHOLD):not(.ISENDING) div.name div, + div.liveGroupConversation div.viewport.PINNED.MYSELFVIDEOVISIBLE div.gallery div.stage div.conversationParticipantStream:not(.VIDEOISVISIBLE):not(.ONHOLD):not(.ISENDING) div.name div, + div.liveGroupConversation div.viewport.PINNED.SWITCHING div.gallery div.stage div.conversationParticipantStream:not(.VIDEOISVISIBLE):not(.ONHOLD):not(.ISENDING) div.name div, + div.liveGroupConversation div.viewport.NO_PARTICIPANT.MYSELFVIDEOVISIBLE div.gallery div.stage div.conversationParticipantStream:not(.VIDEOISVISIBLE):not(.ONHOLD):not(.ISENDING) div.name div, + div.liveGroupConversation div.viewport.NO_PARTICIPANT.SWITCHING div.gallery div.stage div.conversationParticipantStream:not(.VIDEOISVISIBLE):not(.ONHOLD):not(.ISENDING) div.name div { + background: rgba(0, 0, 0, 0.5); + display: inline-block; + max-width: 80% + } +} + +div.liveGroupConversation:not(.ISGROUP) div.viewport.ONE_TO_ONE div.gallery div.stage div.name { + display: none +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.liveGroupConversation.CHATOPEN div.viewport.ONE_TO_ONE div.gallery div.stage div.conversationParticipantStream { + width: auto + } + div.liveGroupConversation.CHATOPEN div.viewport.ONE_TO_ONE div.gallery div.stage div.conversationParticipantStream div.name { + bottom: 58px + } + body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport.ONE_TO_ONE div.gallery div.stage div.conversationParticipantStream { + width: auto + } + div.liveGroupConversation.CHATOPEN div.viewport.ONE_TO_ONE div.gallery div.stage div.conversationParticipantStream video { + height: 240px + } + body.KEYBOARDUP div.liveGroupConversation.CHATOPEN div.viewport.ONE_TO_ONE div.gallery div.stage div.conversationParticipantStream video { + height: 90px + } +} + + +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.liveGroupConversation div.viewport.PRESENTATION div.gallery { + display: -ms-grid; + -ms-grid-rows: 1fr; + -ms-grid-columns: 1fr +} + +div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.stage, +div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.participantStatusLabel { + display: none +} + +div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.ribbon { + -ms-grid-row-align: end; + -ms-grid-row: 1; + margin-bottom: 10px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.ribbon { + margin-bottom: 85px + } +} + +@media screen and (max-width: 400px) { + div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.ribbon { + margin-left: 0; + margin-right: 0; + width: 100% + } +} + +div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.ribbon div.background { + display: -ms-flexbox; + float: right; + position: relative +} + +div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.ribbon div.background div.roster { + display: none +} + +div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.ribbon div.background div.presentationSpeaker { + display: none; + height: 120px; + position: relative +} + +@media screen and (-ms-high-contrast: active) { + div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.ribbon div.background div.presentationSpeaker { + border-width: 0 + } +} + +div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.ribbon div.background div.presentationSpeaker div.conversationParticipantStream div.participant { + width: 120px +} + +div.liveGroupConversation div.viewport.PRESENTATION div.gallery div.ribbon div.background div.presentationSpeaker div.conversationParticipantStream div.videoParticipant video.videoView { + height: 120px +} + +div.liveGroupConversation div.viewport.PRESENTATION.PRESENTATIONSPEAKERVISIBLE div.gallery div.ribbon div.background div.presentationSpeaker { + display: inline-block +} + +div.liveGroupConversation div.viewport.PRESENTATION.MYSELFVIDEOVISIBLE div.gallery div.ribbon div.background, +div.liveGroupConversation div.viewport.PRESENTATION.SWITCHING div.gallery div.ribbon div.background, +div.liveGroupConversation div.viewport.PRESENTATION.PRESENTATIONSPEAKERVISIBLE div.gallery div.ribbon div.background { + padding: 5px; + height: 120px; + background: rgba(0, 0, 0, 0.15) +} + +@media screen and (max-width: 330px) { + div.liveGroupConversation div.viewport.PRESENTATION.MYSELFVIDEOVISIBLE div.gallery div.ribbon div.background, + div.liveGroupConversation div.viewport.PRESENTATION.SWITCHING div.gallery div.ribbon div.background, + div.liveGroupConversation div.viewport.PRESENTATION.PRESENTATIONSPEAKERVISIBLE div.gallery div.ribbon div.background { + padding: 5px 0 + } +} + +div.liveGroupConversation div.viewport.PRESENTATION.SWITCHING div.gallery div.ribbon div.background div.myselfVideo { + display: inline-block +} + +div.liveGroupConversation div.viewport.PRESENTATION.PRESENTATION.PRESENTATIONSPEAKERVISIBLE.MYSELFVIDEOVISIBLE div.gallery div.ribbon div.background div.myselfVideo::before { + border-left: 5px solid rgba(0, 0, 0, 0.15); + margin-top: 0; + height: 100%; + width: 0px; + float: left; + content: " "; + margin-left: -5px +} + +@media screen and (-ms-high-contrast: active) { + div.liveGroupConversation div.viewport.PRESENTATION.PRESENTATION.PRESENTATIONSPEAKERVISIBLE.MYSELFVIDEOVISIBLE div.gallery div.ribbon div.background div.myselfVideo::before { + border-left: none + } +} + + +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery { + -ms-grid-row-align: center; + display: inline-block +} + +body.KEYBOARDUP div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery { + margin-top: 0 +} + +@media screen and (-ms-view-state: fullscreen-landscape) { + div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery { + margin-top: 20px + } +} + +div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery div.stage { + display: -ms-grid; + -ms-grid-rows: 1fr +} + +div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery div.stage div.conversationParticipantStream { + background: -ms-linear-gradient(bottom left, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.05) 100%) +} + +div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery div.stage div.conversationParticipantStream div.avatarCont { + width: 100%; + height: 100% +} + +div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery div.presentation { + display: none +} + +div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery div.ribbon { + display: -ms-flexbox; + height: 0px; + transition: height 1s; + transition-delay: 1s; + justify-content: flex-end +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery div.ribbon { + margin: 15px 0 0 0; + width: calc(100% + 5px); + margin-left: -5px + } +} + +div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery div.ribbon div.background { + display: -ms-flexbox +} + +div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery div.ribbon div.background div.roster { + white-space: nowrap; + -ms-overflow-style: -ms-autohiding-scrollbar; + overflow-x: auto; + font-size: 0; + line-height: 0 +} + +div.liveGroupConversation div.viewport.ALL_PARTICIPANTS div.gallery div.ribbon div.background div.roster .conversationParticipantStream { + width: 120px; + display: inline-block +} + +div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.MYSELFVIDEOVISIBLE div.gallery div.ribbon div.background, +div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.SWITCHING div.gallery div.ribbon div.background, +div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.ROSTERVISIBLE div.gallery div.ribbon div.background { + padding: 5px; + height: 120px; + background: rgba(0, 0, 0, 0.15) +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.MYSELFVIDEOVISIBLE div.gallery div.ribbon div.background, + div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.SWITCHING div.gallery div.ribbon div.background, + div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.ROSTERVISIBLE div.gallery div.ribbon div.background { + padding-right: 0 + } +} + +div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.SWITCHING div.gallery div.ribbon div.background div.myselfVideo { + display: inline-block +} + +div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.ROSTERVISIBLE div.gallery div.ribbon, +div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.MYSELFVIDEOVISIBLE div.gallery div.ribbon { + height: 130px +} + +div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.ALL_PARTICIPANTS.ROSTERVISIBLE.MYSELFVIDEOVISIBLE div.gallery div.ribbon div.background div.myselfVideo::before { + border-left: 5px solid rgba(0, 0, 0, 0.15); + margin-top: 0; + height: 100%; + width: 0px; + float: left; + content: " "; + margin-left: -5px +} + +@media screen and (-ms-high-contrast: active) { + div.liveGroupConversation div.viewport.ALL_PARTICIPANTS.ALL_PARTICIPANTS.ROSTERVISIBLE.MYSELFVIDEOVISIBLE div.gallery div.ribbon div.background div.myselfVideo::before { + border-left: none + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/conversation/messageNotification.css b/packages/microsoft.skypeapp/controls/conversation/messageNotification.css index e2be8d8f..c31ab6a7 100644 --- a/packages/microsoft.skypeapp/controls/conversation/messageNotification.css +++ b/packages/microsoft.skypeapp/controls/conversation/messageNotification.css @@ -1 +1,249 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */.messageBubbleContainer{position:fixed;pointer-events:all;top:50%;right:50px;width:300px;height:300px;opacity:0;transform:scale(0);margin:-150px 15px 0;-ms-grid-row-align:center;-ms-grid-column-align:end;transition-property:opacity, transform;transition-duration:0.5s;transition-timing-function:ease-in;display:-ms-grid;-ms-grid-rows:1fr;-ms-grid-columns:1fr;z-index:998;color:#fff}body.RTL .messageBubbleContainer{right:auto;left:50px}@media screen and (max-width: 400px){div.chatNewMsgNotifContainer div.messageBubbleContainer{left:0px;right:0px;margin-left:auto;margin-right:auto}}.messageBubbleContainer.VISIBLE{opacity:1;transform:scale(1)}.messageBubbleContainer .protectionsWrapper{opacity:0.1;z-index:-1;position:absolute}.messageBubbleContainer .protectionsWrapper .avatarProtection{width:80px;height:80px;background-color:black;border-radius:50%;position:absolute;top:5px;left:5px}body.RTL .messageBubbleContainer .protectionsWrapper .avatarProtection{left:auto;right:5px}.messageBubbleContainer .protectionsWrapper .messageBubbleProtection{width:310px;height:310px;background-color:black;border-radius:50%;position:absolute;top:-5px;left:-5px}body.RTL .messageBubbleContainer .protectionsWrapper .messageBubbleProtection{left:auto;right:-5px}.messageBubbleContainer .avatar{width:70px;height:70px;border-radius:50%;box-sizing:border-box;position:absolute;left:10px;top:10px}body.RTL .messageBubbleContainer .avatar{left:auto;right:10px}.messageBubbleContainer .avatar div.protectionLayer{background:none}.messageBubbleContainer .messageCircleContainer{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-row-align:center;-ms-grid-column-align:center;width:100%;height:100%;border-radius:50%;display:-ms-grid;-ms-grid-rows:1fr;-ms-grid-columns:1fr}.messageBubbleContainer .messageBubbleCircle{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-row-align:center;-ms-grid-column-align:center;width:300px;height:300px;border-radius:50%;background-color:rgba(0,175,240,0.27);animation-duration:2000ms;animation-iteration-count:2;animation-timing-function:ease-out}.messageBubbleContainer .messageBubble{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-row-align:center;-ms-grid-column-align:center;width:300px;height:300px;border-radius:50%;background-color:rgba(0,175,240,0.8);display:-ms-grid;-ms-grid-rows:1fr;-ms-grid-columns:1fr;animation-duration:2000ms;animation-iteration-count:1;animation-timing-function:ease-out}@media screen and (-ms-high-contrast: active){.messageBubbleContainer .messageBubble{background-color:#FFF;color:#000;border:2px solid #000;border-radius:50%}}@media screen and (-ms-high-contrast: black-on-white){.messageBubbleContainer .messageBubble{background-color:#000;color:#FFF;border:2px solid #FFF;border-radius:50%}}.messageBubbleContainer.NEWMESSAGE .messageBubble{animation-name:messageBubblePulse}@keyframes messageBubblePulse{17%{width:300px;height:300px}34%{width:264px;height:264px}50%{width:300px;height:300px}}.messageBubbleContainer .messageText{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-row-align:center;-ms-grid-column-align:center;width:210px;max-height:140px;overflow:hidden;text-align:center;word-wrap:break-word;animation-duration:2000ms;animation-iteration-count:1;animation-timing-function:ease-out}.messageBubbleContainer.NEWMESSAGE .messageText{animation-name:messageTextPulse}@keyframes messageTextPulse{17%{transform:scale(1)}34%{transform:scale(0.3)}50%{transform:scale(1)}}.messageBubbleContainer .messageText.TEXTSIZE1{font-size:56px;line-height:64px;font-weight:200;letter-spacing:0px;max-height:128px}.messageBubbleContainer .messageText.TEXTSIZE2{font-size:40px;line-height:48px;font-weight:200;max-height:144px}.messageBubbleContainer .messageText.TEXTSIZE3{font-size:20px;line-height:30px;font-weight:200;max-height:150px}.messageBubbleContainer .messageText a{color:#d9d9d9}.messageBubbleContainer .messageText span.emoticon,.messageBubbleContainer .messageText span.flag{vertical-align:middle}@media screen and (max-aspect-ratio: 1 / 1){.messageBubbleContainer{-ms-grid-column-align:center}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +.messageBubbleContainer { + position: fixed; + pointer-events: all; + top: 50%; + right: 50px; + width: 300px; + height: 300px; + opacity: 0; + transform: scale(0); + margin: -150px 15px 0; + -ms-grid-row-align: center; + -ms-grid-column-align: end; + transition-property: opacity, transform; + transition-duration: 0.5s; + transition-timing-function: ease-in; + display: -ms-grid; + -ms-grid-rows: 1fr; + -ms-grid-columns: 1fr; + z-index: 998; + color: #fff +} + +body.RTL .messageBubbleContainer { + right: auto; + left: 50px +} + +@media screen and (max-width: 400px) { + div.chatNewMsgNotifContainer div.messageBubbleContainer { + left: 0px; + right: 0px; + margin-left: auto; + margin-right: auto + } +} + +.messageBubbleContainer.VISIBLE { + opacity: 1; + transform: scale(1) +} + +.messageBubbleContainer .protectionsWrapper { + opacity: 0.1; + z-index: -1; + position: absolute +} + +.messageBubbleContainer .protectionsWrapper .avatarProtection { + width: 80px; + height: 80px; + background-color: black; + border-radius: 50%; + position: absolute; + top: 5px; + left: 5px +} + +body.RTL .messageBubbleContainer .protectionsWrapper .avatarProtection { + left: auto; + right: 5px +} + +.messageBubbleContainer .protectionsWrapper .messageBubbleProtection { + width: 310px; + height: 310px; + background-color: black; + border-radius: 50%; + position: absolute; + top: -5px; + left: -5px +} + +body.RTL .messageBubbleContainer .protectionsWrapper .messageBubbleProtection { + left: auto; + right: -5px +} + +.messageBubbleContainer .avatar { + width: 70px; + height: 70px; + border-radius: 50%; + box-sizing: border-box; + position: absolute; + left: 10px; + top: 10px +} + +body.RTL .messageBubbleContainer .avatar { + left: auto; + right: 10px +} + +.messageBubbleContainer .avatar div.protectionLayer { + background: none +} + +.messageBubbleContainer .messageCircleContainer { + -ms-grid-row: 1; + -ms-grid-column: 1; + -ms-grid-row-align: center; + -ms-grid-column-align: center; + width: 100%; + height: 100%; + border-radius: 50%; + display: -ms-grid; + -ms-grid-rows: 1fr; + -ms-grid-columns: 1fr +} + +.messageBubbleContainer .messageBubbleCircle { + -ms-grid-row: 1; + -ms-grid-column: 1; + -ms-grid-row-align: center; + -ms-grid-column-align: center; + width: 300px; + height: 300px; + border-radius: 50%; + background-color: rgba(0, 175, 240, 0.27); + animation-duration: 2000ms; + animation-iteration-count: 2; + animation-timing-function: ease-out +} + +.messageBubbleContainer .messageBubble { + -ms-grid-row: 1; + -ms-grid-column: 1; + -ms-grid-row-align: center; + -ms-grid-column-align: center; + width: 300px; + height: 300px; + border-radius: 50%; + background-color: rgba(0, 175, 240, 0.8); + display: -ms-grid; + -ms-grid-rows: 1fr; + -ms-grid-columns: 1fr; + animation-duration: 2000ms; + animation-iteration-count: 1; + animation-timing-function: ease-out +} + +@media screen and (-ms-high-contrast: active) { + .messageBubbleContainer .messageBubble { + background-color: #FFF; + color: #000; + border: 2px solid #000; + border-radius: 50% + } +} + +@media screen and (-ms-high-contrast: black-on-white) { + .messageBubbleContainer .messageBubble { + background-color: #000; + color: #FFF; + border: 2px solid #FFF; + border-radius: 50% + } +} + +.messageBubbleContainer.NEWMESSAGE .messageBubble { + animation-name: messageBubblePulse +} + +@keyframes messageBubblePulse { + 17% { + width: 300px; + height: 300px + } + 34% { + width: 264px; + height: 264px + } + 50% { + width: 300px; + height: 300px + } +} + +.messageBubbleContainer .messageText { + -ms-grid-row: 1; + -ms-grid-column: 1; + -ms-grid-row-align: center; + -ms-grid-column-align: center; + width: 210px; + max-height: 140px; + overflow: hidden; + text-align: center; + word-wrap: break-word; + animation-duration: 2000ms; + animation-iteration-count: 1; + animation-timing-function: ease-out +} + +.messageBubbleContainer.NEWMESSAGE .messageText { + animation-name: messageTextPulse +} + +@keyframes messageTextPulse { + 17% { + transform: scale(1) + } + 34% { + transform: scale(0.3) + } + 50% { + transform: scale(1) + } +} + +.messageBubbleContainer .messageText.TEXTSIZE1 { + font-size: 56px; + line-height: 64px; + font-weight: 200; + letter-spacing: 0px; + max-height: 128px +} + +.messageBubbleContainer .messageText.TEXTSIZE2 { + font-size: 40px; + line-height: 48px; + font-weight: 200; + max-height: 144px +} + +.messageBubbleContainer .messageText.TEXTSIZE3 { + font-size: 20px; + line-height: 30px; + font-weight: 200; + max-height: 150px +} + +.messageBubbleContainer .messageText a { + color: #d9d9d9 +} + +.messageBubbleContainer .messageText span.emoticon, +.messageBubbleContainer .messageText span.flag { + vertical-align: middle +} + +@media screen and (max-aspect-ratio: 1 / 1) { + .messageBubbleContainer { + -ms-grid-column-align: center + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/conversation/participantList.css b/packages/microsoft.skypeapp/controls/conversation/participantList.css index 518e481c..edfad259 100644 --- a/packages/microsoft.skypeapp/controls/conversation/participantList.css +++ b/packages/microsoft.skypeapp/controls/conversation/participantList.css @@ -1 +1,225 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.participantListContents{background-color:#00aff0;height:100%;color:#fff;display:-ms-grid;-ms-grid-columns:1fr;-ms-grid-rows:120px 1fr 92px}div.participantListContents header{-ms-grid-row:1;position:static;-ms-grid-columns:60px 1fr;display:-ms-grid !important}div.participantListContents header button.backbutton{margin-top:35px;margin-left:20px}body.RTL div.participantListContents header button.backbutton{margin-left:0;margin-right:20px}div.participantListContents header div.wrapper{margin-top:30px}div.participantListContents header div.wrapper h1.name{margin-right:15px;overflow:hidden;overflow-y:visible;max-width:calc(100% - 20px);text-overflow:ellipsis;white-space:nowrap;display:inline-block}body.RTL div.participantListContents header div.wrapper h1.name{margin-right:0;margin-left:15px}@media screen and (-ms-high-contrast: active){div.participantListContents header div.wrapper h1.name{background-color:Window}}div.participantListContents header div.wrapper div.participantCount{overflow:hidden;text-overflow:ellipsis;padding-right:10px}body.RTL div.participantListContents header div.wrapper div.participantCount{padding:0 0 0 10px}div.participantListContents div.listsWrapper{-ms-grid-row:2;overflow-y:auto}div.participantListContents div.listsWrapper div.listHeader{margin-top:35px;margin-left:20px;margin-right:0;display:none;font-size:26.67px;line-height:1;font-weight:lighter}div.participantListContents div.listsWrapper div.listHeader:first-child{margin-top:15px}body.RTL div.participantListContents div.listsWrapper div.listHeader{margin-left:0;margin-right:20px}div.participantListContents div.listsWrapper div.listHeader.VISIBLE{display:block}div.participantListContents div.listsWrapper div.repeater{margin-top:25px;height:auto}div.participantListContents div.listsWrapper div.repeater div.win-container{outline:none}div.participantListContents div.listsWrapper div.repeater div.participantItem{display:-ms-grid;-ms-grid-columns:55fr 45fr 60px;padding-left:20px;padding-right:0;font-size:14.66px;line-height:40px}body.RTL div.participantListContents div.listsWrapper div.repeater div.participantItem{padding-left:0;padding-right:20px}div.participantListContents div.listsWrapper div.repeater div.participantItem div.participantName{-ms-grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}div.participantListContents div.listsWrapper div.repeater div.participantItem div.participantStatus{-ms-grid-column:2;-ms-grid-column-align:end;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-align:right}div.participantListContents div.listsWrapper div.repeater div.participantItem div.menuIndicator{-ms-grid-column:3;text-align:center}div.participantListContents div.listsWrapper div.repeater div.participantItem div.menuIndicator span.ariaMenuLabel{display:none}div.participantListContents div.listsWrapper div.repeater div.participantItem.HAS_MENU div.menuIndicator span::after{font-family:"Skype UI Symbol";font-weight:bold;content:"\E421"}body.RTL div.participantListContents div.listsWrapper div.repeater div.participantItem.HAS_MENU div.menuIndicator span::after{font-family:"Skype UI Symbol";font-weight:bold;content:"\E420"}div.participantListContents div.listsWrapper div.repeater div.participantItem:hover{background-color:rgba(0,0,0,0.1)}@media screen and (-ms-high-contrast: active){div.participantListContents div.listsWrapper div.repeater div.participantItem:hover{background-color:Highlight;color:window}}div.participantListContents div.participantMenu{margin-left:20px}div.participantListContents div.participantListButtonContainer{display:-ms-flexbox;-ms-grid-row:3}div.participantListContents div.participantListButtonContainer button.addParticipantsButton{display:block;border-radius:25px;margin:auto auto 20px auto;color:#fff;min-width:148px;max-width:198px;background:transparent;height:44px;font-weight:normal;border:2px solid #fff;font-size:11pt;font-family:"Segoe UI", "Ebrima", "Nirmala UI", "Gadugi", "Segoe UI Emoji", "Segoe UI Symbol", "Meiryo UI", "Leelawadee UI", "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Javanese Text", "Cambria Math";overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 10px}div.participantListContents div.participantListButtonContainer button.addParticipantsButton:hover{background-color:rgba(255,255,255,0.1)}@media screen and (-ms-high-contrast: active){div.participantListContents div.participantListButtonContainer button.addParticipantsButton{box-shadow:0px 0px 0px 5px windowtext;border:0;height:52px;color:-ms-hotlight}div.participantListContents div.participantListButtonContainer button.addParticipantsButton:hover{background-color:Highlight;color:window}}div.clickEater.participantList{left:320px}body.RTL div.clickEater.participantList{left:0;right:320px}@media screen and (max-aspect-ratio: 1 / 1) and (max-width: 401px){div.clickEater.participantList{left:401px}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.participantListContents { + background-color: #00aff0; + height: 100%; + color: #fff; + display: -ms-grid; + -ms-grid-columns: 1fr; + -ms-grid-rows: 120px 1fr 92px +} + +div.participantListContents header { + -ms-grid-row: 1; + position: static; + -ms-grid-columns: 60px 1fr; + display: -ms-grid !important +} + +div.participantListContents header button.backbutton { + margin-top: 35px; + margin-left: 20px +} + +body.RTL div.participantListContents header button.backbutton { + margin-left: 0; + margin-right: 20px +} + +div.participantListContents header div.wrapper { + margin-top: 30px +} + +div.participantListContents header div.wrapper h1.name { + margin-right: 15px; + overflow: hidden; + overflow-y: visible; + max-width: calc(100% - 20px); + text-overflow: ellipsis; + white-space: nowrap; + display: inline-block +} + +body.RTL div.participantListContents header div.wrapper h1.name { + margin-right: 0; + margin-left: 15px +} + +@media screen and (-ms-high-contrast: active) { + div.participantListContents header div.wrapper h1.name { + background-color: Window + } +} + +div.participantListContents header div.wrapper div.participantCount { + overflow: hidden; + text-overflow: ellipsis; + padding-right: 10px +} + +body.RTL div.participantListContents header div.wrapper div.participantCount { + padding: 0 0 0 10px +} + +div.participantListContents div.listsWrapper { + -ms-grid-row: 2; + overflow-y: auto +} + +div.participantListContents div.listsWrapper div.listHeader { + margin-top: 35px; + margin-left: 20px; + margin-right: 0; + display: none; + font-size: 26.67px; + line-height: 1; + font-weight: lighter +} + +div.participantListContents div.listsWrapper div.listHeader:first-child { + margin-top: 15px +} + +body.RTL div.participantListContents div.listsWrapper div.listHeader { + margin-left: 0; + margin-right: 20px +} + +div.participantListContents div.listsWrapper div.listHeader.VISIBLE { + display: block +} + +div.participantListContents div.listsWrapper div.repeater { + margin-top: 25px; + height: auto +} + +div.participantListContents div.listsWrapper div.repeater div.win-container { + outline: none +} + +div.participantListContents div.listsWrapper div.repeater div.participantItem { + display: -ms-grid; + -ms-grid-columns: 55fr 45fr 60px; + padding-left: 20px; + padding-right: 0; + font-size: 14.66px; + line-height: 40px +} + +body.RTL div.participantListContents div.listsWrapper div.repeater div.participantItem { + padding-left: 0; + padding-right: 20px +} + +div.participantListContents div.listsWrapper div.repeater div.participantItem div.participantName { + -ms-grid-column: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap +} + +div.participantListContents div.listsWrapper div.repeater div.participantItem div.participantStatus { + -ms-grid-column: 2; + -ms-grid-column-align: end; + width: 100%; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + text-align: right +} + +div.participantListContents div.listsWrapper div.repeater div.participantItem div.menuIndicator { + -ms-grid-column: 3; + text-align: center +} + +div.participantListContents div.listsWrapper div.repeater div.participantItem div.menuIndicator span.ariaMenuLabel { + display: none +} + +div.participantListContents div.listsWrapper div.repeater div.participantItem.HAS_MENU div.menuIndicator span::after { + font-family: "Skype UI Symbol" !important; + font-weight: bold; + content: "\E421" +} + +body.RTL div.participantListContents div.listsWrapper div.repeater div.participantItem.HAS_MENU div.menuIndicator span::after { + font-family: "Skype UI Symbol" !important; + font-weight: bold; + content: "\E420" +} + +div.participantListContents div.listsWrapper div.repeater div.participantItem:hover { + background-color: rgba(0, 0, 0, 0.1) +} + +@media screen and (-ms-high-contrast: active) { + div.participantListContents div.listsWrapper div.repeater div.participantItem:hover { + background-color: Highlight; + color: window + } +} + +div.participantListContents div.participantMenu { + margin-left: 20px +} + +div.participantListContents div.participantListButtonContainer { + display: -ms-flexbox; + -ms-grid-row: 3 +} + +div.participantListContents div.participantListButtonContainer button.addParticipantsButton { + display: block; + border-radius: 25px; + margin: auto auto 20px auto; + color: #fff; + min-width: 148px; + max-width: 198px; + background: transparent; + height: 44px; + font-weight: normal; + border: 2px solid #fff; + font-size: 11pt; + font-family: "Segoe UI", "Ebrima", "Nirmala UI", "Gadugi", "Segoe UI Emoji", "Segoe UI Symbol", "Meiryo UI", "Leelawadee UI", "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Javanese Text", "Cambria Math"; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding: 0 10px +} + +div.participantListContents div.participantListButtonContainer button.addParticipantsButton:hover { + background-color: rgba(255, 255, 255, 0.1) +} + +@media screen and (-ms-high-contrast: active) { + div.participantListContents div.participantListButtonContainer button.addParticipantsButton { + box-shadow: 0px 0px 0px 5px windowtext; + border: 0; + height: 52px; + color: -ms-hotlight + } + div.participantListContents div.participantListButtonContainer button.addParticipantsButton:hover { + background-color: Highlight; + color: window + } +} + +div.clickEater.participantList { + left: 320px +} + +body.RTL div.clickEater.participantList { + left: 0; + right: 320px +} + +@media screen and (max-aspect-ratio: 1 / 1) and (max-width: 401px) { + div.clickEater.participantList { + left: 401px + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/conversation/participantList.scss b/packages/microsoft.skypeapp/controls/conversation/participantList.scss index 6f564a64..f7dc539b 100644 --- a/packages/microsoft.skypeapp/controls/conversation/participantList.scss +++ b/packages/microsoft.skypeapp/controls/conversation/participantList.scss @@ -135,7 +135,7 @@ div.participantListContents { &.HAS_MENU { div.menuIndicator span::after { - font-family: "Skype UI Symbol"; + font-family: "Skype UI Symbol" !important; font-weight: bold; content: "\E421"; } @@ -143,7 +143,7 @@ div.participantListContents { body.RTL &.HAS_MENU { div.menuIndicator span::after { - font-family: "Skype UI Symbol"; + font-family: "Skype UI Symbol" !important; font-weight: bold; content: "\E420"; } diff --git a/packages/microsoft.skypeapp/controls/conversation/typingIndicator.css b/packages/microsoft.skypeapp/controls/conversation/typingIndicator.css index 469386f6..9326c69d 100644 --- a/packages/microsoft.skypeapp/controls/conversation/typingIndicator.css +++ b/packages/microsoft.skypeapp/controls/conversation/typingIndicator.css @@ -1 +1,119 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.typingIndicator{display:none;opacity:0;-ms-grid-columns:minmax(128px, 1fr) minmax(660px, 940px) minmax(128px, 1fr);-ms-grid-rows:24px;-ms-grid-row-align:center;position:relative;margin-bottom:11px;transition:opacity 0.4s linear}div.typingIndicator div.indicator{-ms-grid-column:1;-ms-grid-row:1;position:relative}div.typingIndicator div.indicator span.icon{position:absolute;right:14px;width:27px;height:20px;background-position:0 0px;background-repeat:no-repeat;animation:typing 1s step-start 0 infinite forwards;animation-play-state:paused;animation-fill-mode:both;background-image:url("/images/typing_27x27_x6.png")}body.RTL div.typingIndicator div.indicator span.icon{background-image:url("/images/typingRTL_27x27_x6.png")}div.typingIndicator div.typingIndicatorContent{-ms-grid-column:2;-ms-grid-row:1;padding-left:13px}div.typingIndicator div.typingIndicatorContent span.text{color:#93999d;width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;display:block;white-space:nowrap}div.typingIndicator.VISIBLE{display:-ms-grid}div.typingIndicator.VISIBLE div.indicator span.icon{animation-play-state:running}div.typingIndicator.VISIBLE.POPULATED{opacity:1}div.chat.LIVE div.typingIndicator{-ms-grid-columns:54px 1fr}@media screen and (max-width: 1280px){div.typingIndicator{-ms-grid-columns:75px 1fr}div.typingIndicator div.indicator span.icon{right:11px}div.typingIndicator div.typingIndicatorContent{padding-left:16px}}@media screen and (max-aspect-ratio: 1 / 1){div.typingIndicator{margin-bottom:25px;-ms-grid-columns:58px 1fr;-ms-grid-rows:20px}div.typingIndicator div.indicator span.icon{right:11px}div.typingIndicator div.typingIndicatorContent{padding-left:0}}@keyframes typing{0%{background-position:0 0px}16.667%{background-position:0 -27px}33.334%{background-position:0 -54px}50.001%{background-position:0 -81px}66.668%{background-position:0 -108px}83.335%{background-position:0 -135px}100%{background-position:0 -162px}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.typingIndicator { + display: none; + opacity: 0; + -ms-grid-columns: minmax(128px, 1fr) minmax(660px, 940px) minmax(128px, 1fr); + -ms-grid-rows: 24px; + -ms-grid-row-align: center; + position: relative; + margin-bottom: 11px; + transition: opacity 0.4s linear +} + +div.typingIndicator div.indicator { + -ms-grid-column: 1; + -ms-grid-row: 1; + position: relative +} + +div.typingIndicator div.indicator span.icon { + position: absolute; + right: 14px; + width: 27px; + height: 20px; + background-position: 0 0px; + background-repeat: no-repeat; + animation: typing 1s step-start 0 infinite forwards; + animation-play-state: paused; + animation-fill-mode: both; + background-image: url("/images/typing_27x27_x6.png") +} + +body.RTL div.typingIndicator div.indicator span.icon { + background-image: url("/images/typingRTL_27x27_x6.png") +} + +div.typingIndicator div.typingIndicatorContent { + -ms-grid-column: 2; + -ms-grid-row: 1; + padding-left: 13px +} + +div.typingIndicator div.typingIndicatorContent span.text { + color: #93999d; + width: calc(100% - 20px); + overflow: hidden; + text-overflow: ellipsis; + display: block; + white-space: nowrap +} + +div.typingIndicator.VISIBLE { + display: -ms-grid +} + +div.typingIndicator.VISIBLE div.indicator span.icon { + animation-play-state: running +} + +div.typingIndicator.VISIBLE.POPULATED { + opacity: 1 +} + +div.chat.LIVE div.typingIndicator { + -ms-grid-columns: 54px 1fr +} + +@media screen and (max-width: 1280px) { + div.typingIndicator { + -ms-grid-columns: 75px 1fr + } + div.typingIndicator div.indicator span.icon { + right: 11px + } + div.typingIndicator div.typingIndicatorContent { + padding-left: 16px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.typingIndicator { + margin-bottom: 25px; + -ms-grid-columns: 58px 1fr; + -ms-grid-rows: 20px + } + div.typingIndicator div.indicator span.icon { + right: 11px + } + div.typingIndicator div.typingIndicatorContent { + padding-left: 0 + } +} + +@keyframes typing { + 0% { + background-position: 0 0px + } + 16.667% { + background-position: 0 -27px + } + 33.334% { + background-position: 0 -54px + } + 50.001% { + background-position: 0 -81px + } + 66.668% { + background-position: 0 -108px + } + 83.335% { + background-position: 0 -135px + } + 100% { + background-position: 0 -162px + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/conversation/videoMessageDialog.css b/packages/microsoft.skypeapp/controls/conversation/videoMessageDialog.css index dab40e4c..4bc78fa9 100644 --- a/packages/microsoft.skypeapp/controls/conversation/videoMessageDialog.css +++ b/packages/microsoft.skypeapp/controls/conversation/videoMessageDialog.css @@ -1 +1,516 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.videoMessageDialogContainer{position:fixed;top:0px;left:0px;width:100%;height:100%}div.videoMessageDialog{position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:990;background-color:#000;color:#fff;display:-ms-grid;-ms-grid-columns:1fr;-ms-grid-rows:120px 1fr 120px}div.videoMessageDialog:not(.PREPARE) .PREPARE,div.videoMessageDialog:not(.RECORDING) .RECORDING,div.videoMessageDialog:not(.ERROR) .ERROR,div.videoMessageDialog:not(.RECORDED) .RECORDED,div.videoMessageDialog:not(.PLAYBACK) .PLAYBACK,div.videoMessageDialog:not(.PREMIUM) .PREMIUM,div.videoMessageDialog:not(.PREPARE_PLAYBACK) .PREPARE_PLAYBACK{display:none !important}div.videoMessageDialog:not(.SEND) .SEND,div.videoMessageDialog:not(.RECEIVE) .RECEIVE{display:none !important}div.videoMessageDialog>header{-ms-grid-row:1;display:-ms-grid;-ms-grid-columns:120px 1fr;-ms-grid-rows:1fr;overflow:visible;line-height:normal;position:relative;z-index:1300;opacity:1;transition:opacity .25s ease-in-out}div.videoMessageDialog.HIDEUI:not(.PLAYBACK):not(.PREPARE_PLAYBACK)>header{opacity:0}div.videoMessageDialog>header>button.backbutton{display:none;-ms-grid-row:1;-ms-grid-column:1;margin-left:39px;margin-right:39px;margin-top:59px}div.videoMessageDialog.PLAYBACK>header>button.backbutton,div.videoMessageDialog.PREPARE_PLAYBACK>header>button.backbutton{display:block}div.videoMessageDialog>header>div.title{-ms-grid-row:1;-ms-grid-column:2;-ms-grid-column-align:start;margin-top:62px;margin-right:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}@media screen and (-ms-high-contrast: black-on-white){div.videoMessageDialog>header>div.title{background-color:white;width:auto;height:40px;padding-right:5px}}div.videoMessageDialog.PLAYBACK>header>div.title,div.videoMessageDialog.PREPARE_PLAYBACK>header>div.title{text-shadow:0px 1px 1px rgba(0,0,0,0.25)}div.videoMessageDialog>div.video{position:relative;z-index:1200;-ms-grid-row:2;-ms-grid-column:1;-ms-grid-column-align:center;background-color:#242528;min-width:65%;line-height:0}div.videoMessageDialog.PLAYBACK>div.video,div.videoMessageDialog.PREPARE_PLAYBACK>div.video{-ms-grid-row:1;-ms-grid-row-span:3}div.videoMessageDialog.SEND.PREPARE>div.video.FLIPPED>video,div.videoMessageDialog.SEND.RECORDING>div.video.FLIPPED>video{transform:scaleX(-1)}div.videoMessageDialog>div.video>video{height:100%}div.videoMessageDialog>div.video>progress{position:absolute;top:50%;left:50%;margin-top:-30px;margin-left:-30px}div.videoMessageDialog>div.video>div.protectionLayerBottom{position:absolute;left:0px;right:0px;bottom:0;height:200px;background:url("/images/bgVideoMessageBottomProtection.png") repeat-x}@media screen and (-ms-high-contrast: active){div.videoMessageDialog>div.video>div.protectionLayerBottom{display:none}}div.videoMessageDialog>div.video>div.protectionLayerTop{position:absolute;left:0px;right:0px;top:0px;height:400px;background:url("/images/bgVideoMessageTopProtection.png") repeat-x}@media screen and (max-aspect-ratio: 1 / 1){div.videoMessageDialog>div.video>div.protectionLayerTop{display:none}}@media screen and (-ms-high-contrast: active){div.videoMessageDialog>div.video>div.protectionLayerTop{display:none}}div.videoMessageDialog.RECORDED>div.video>div.protectionLayerBottom,div.videoMessageDialog.PLAYBACK>div.video>div.protectionLayerBottom,div.videoMessageDialog.PREPARE_PLAYBACK>div.video>div.protectionLayerBottom,div.videoMessageDialog.SENDING>div.video>div.protectionLayerBottom,div.videoMessageDialog.RECORDED>div.video>div.time,div.videoMessageDialog.SENDING>div.video>div.time,div.videoMessageDialog.ERROR>div.video>div.time,div.videoMessageDialog.PLAYBACK>div.video>div.time,div.videoMessageDialog.PREPARE_PLAYBACK>div.video>div.time{display:none}div.videoMessageDialog>div.video>div.lookingGood{opacity:0;position:absolute;left:50%;bottom:-20px;margin-left:-150px;width:300px;height:300px;background-color:rgba(0,0,0,0.4);border-radius:150px;text-align:center;display:-ms-grid;-ms-grid-rows:35% 65%;-ms-grid-columns:1fr;transition:opacity .25s ease-in-out}div.videoMessageDialog>div.video>div.lookingGood.VISIBLE{opacity:1}div.videoMessageDialog>div.video>div.lookingGood>h3{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-align:center;-ms-grid-row-align:end;font-weight:bold;padding:0 20px}div.videoMessageDialog>div.video>div.lookingGood>p{-ms-grid-row:2;-ms-grid-column:1;-ms-grid-row-align:start;-ms-grid-column-align:center}div.videoMessageDialog.PLAYBACK>div.video{-ms-grid-row:1;-ms-grid-row-span:3}div.videoMessageDialog>div.video>div.time{position:absolute;bottom:25px;left:25px}body.RTL div.videoMessageDialog>div.video>div.time{left:auto;right:20px}div.videoMessageDialog>div.video>input,div.videoMessageDialog>div.video>textarea{background-color:rgba(0,0,0,0.4);border:0px;position:absolute;top:10px;left:10px;width:calc(100% - 20px);min-height:50px;color:#a2c5d3;display:none}div.videoMessageDialog>div.video>input{padding:0px 10px}div.videoMessageDialog>div.video>textarea{min-height:50px;max-height:200px;top:65px;padding:0px 15px}div.videoMessageDialog>div.actions{-ms-grid-row:3;-ms-grid-column:1;-ms-grid-column-align:center;-ms-grid-row-align:center;position:relative;z-index:1300;display:block;transition:opacity .25s ease-in-out}div.videoMessageDialog.HIDEUI>div.actions{display:none;text-align:center;line-height:50px}div.videoMessageDialog.PLAYBACK>div.actions{margin-bottom:60px}div.videoMessageDialog>div.actions>button{margin:5px 15px;min-width:140px}div.videoMessageDialog button.cancel{background-color:#242528}div.videoMessageDialog button.cancel:hover{background-color:#16171a}div.videoMessageDialog button.cancel:active{background-color:#101012}div.videoMessageDialog.SEND>div.actions>button.reply,div.videoMessageDialog.RECEIVE>div.actions>button.reply.CANNOT_REPLAY{display:none}div.videoMessageDialog>div.actions>button.control{position:relative;top:-3px;display:inline-block;margin:5px 15px;background-color:#33353a;border:0px;color:white;cursor:default;height:40px;width:40px;font-size:40px;line-height:normal;font-weight:normal;border-radius:50%;text-align:center;padding:0;font-family:"Skype UI Symbol";box-shadow:0 0 0 2px rgba(35,31,32,0.4);min-width:0;min-height:0}div.videoMessageDialog>div.actions>button.control:hover{background-color:rgba(51,53,58,0.85)}div.videoMessageDialog>div.actions>button.control:active{background-color:rgba(51,53,58,0.7)}div.videoMessageDialog>div.actions>button.control.record{top:0;background-color:#e81123;border:0px;color:white;height:50px;width:50px;font-size:50px}div.videoMessageDialog>div.actions>button.control.record::before{content:"\E310"}div.videoMessageDialog>div.actions>button.control.record:hover{background-color:rgba(232,17,35,0.85)}div.videoMessageDialog>div.actions>button.control.record:active{background-color:rgba(232,17,35,0.7)}div.videoMessageDialog>div.actions>button.control.record.RECORDING:focus{outline:0}@-ms-keyframes recordPulse{from{text-shadow:0 0 0px #e81123}50%{text-shadow:0 0 5px #e81123}to{text-shadow:0 0 0px #e81123}}div.videoMessageDialog>div.actions>button.control.record.RECORDING{background-color:#fff;color:#e81123}div.videoMessageDialog>div.actions>button.control.record.RECORDING{animation-name:recordPulse;animation-duration:1s;animation-iteration-count:infinite;transform:translateZ(0);backface-visibility:hidden;perspective:1000}div.videoMessageDialog>div.actions>button.control.cameraSwitch::after{content:"\E311"}div.videoMessageDialog>div.actions>button.control.cameraSwitch:not(.ENABLED){opacity:0.4}div.videoMessageDialog>div.actions>button.control.cameraSwitch:not(.ENABLED):hover,div.videoMessageDialog>div.actions>button.control.cameraSwitch:not(.ENABLED):active{background-color:#33353a}div.videoMessageDialog>div.actions>button.control.cameraSwitch.ENABLED::after{opacity:1}div.videoMessageDialog>div.actions>button.control.x::before{content:"\E413"}div.videoMessageDialog>div.overlay{display:-ms-grid;position:relative;z-index:1400;-ms-grid-row:2;-ms-grid-row-span:2;-ms-grid-column:1;-ms-grid-column-align:stretch;-ms-grid-row-align:stretch;text-align:center;background-color:rgba(0,0,0,0.8);-ms-grid-columns:1fr;-ms-grid-rows:1fr}div.videoMessageDialog>div.overlay>div.content{margin-top:-120px;max-width:800px;-ms-grid-column:1;-ms-grid-row:1;-ms-grid-row-align:center;-ms-grid-column-align:center}div.videoMessageDialog>div.overlay.ERROR>div.content{margin-top:0}div.videoMessageDialog>div.overlay.error>div.content{margin-top:0}div.videoMessageDialog>div.overlay>div.content h3{font-weight:bold}div.videoMessageDialog>div.overlay>div.content p{margin:10px 0 30px}div.videoMessageDialog>div.overlay>button{min-width:140px}div.videoMessageDialog>div.overlay.ERROR{margin-bottom:120px}@media screen and (max-aspect-ratio: 1 / 1){div.videoMessageDialog>header{-ms-grid-columns:1fr}div.videoMessageDialog.PLAYBACK>header,div.videoMessageDialog.PREPARE_PLAYBACK>header{-ms-grid-columns:70px 1fr}div.videoMessageDialog>div.actions>button{margin:5px 5px}div.videoMessageDialog>header>button.backbutton{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-align:center;margin-left:0;margin-right:0;margin-top:32px}div.videoMessageDialog>header>div.title{-ms-grid-column:1;margin-top:29px;width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:20px}div.videoMessageDialog.PLAYBACK>header>div.title,div.videoMessageDialog.PREPARE_PLAYBACK>header>div.title{-ms-grid-column:2;width:90%}div.videoMessageDialog>div.video>video{height:auto;width:100%}div.videoMessageDialog>div.video{-ms-grid-row-align:center}div.videoMessageDialog>div.video>div.time{margin-bottom:-100px}div.videoMessageDialog>div.video>div.lookingGood{margin-left:-100px;width:200px;height:200px}div.videoMessageDialog>div.video>div.lookingGood>p{margin-top:5px}}@media screen and (-ms-view-state: fullscreen-portrait){div.videoMessageDialog>div.video{-ms-grid-row-align:center;-ms-grid-column-align:stretch}div.videoMessageDialog>div.video>video{height:auto;width:100%}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.videoMessageDialogContainer { + position: fixed; + top: 0px; + left: 0px; + width: 100%; + height: 100% +} + +div.videoMessageDialog { + position: fixed; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + z-index: 990; + background-color: #000; + color: #fff; + display: -ms-grid; + -ms-grid-columns: 1fr; + -ms-grid-rows: 120px 1fr 120px +} + +div.videoMessageDialog:not(.PREPARE) .PREPARE, +div.videoMessageDialog:not(.RECORDING) .RECORDING, +div.videoMessageDialog:not(.ERROR) .ERROR, +div.videoMessageDialog:not(.RECORDED) .RECORDED, +div.videoMessageDialog:not(.PLAYBACK) .PLAYBACK, +div.videoMessageDialog:not(.PREMIUM) .PREMIUM, +div.videoMessageDialog:not(.PREPARE_PLAYBACK) .PREPARE_PLAYBACK { + display: none !important +} + +div.videoMessageDialog:not(.SEND) .SEND, +div.videoMessageDialog:not(.RECEIVE) .RECEIVE { + display: none !important +} + +div.videoMessageDialog>header { + -ms-grid-row: 1; + display: -ms-grid; + -ms-grid-columns: 120px 1fr; + -ms-grid-rows: 1fr; + overflow: visible; + line-height: normal; + position: relative; + z-index: 1300; + opacity: 1; + transition: opacity .25s ease-in-out +} + +div.videoMessageDialog.HIDEUI:not(.PLAYBACK):not(.PREPARE_PLAYBACK)>header { + opacity: 0 +} + +div.videoMessageDialog>header>button.backbutton { + display: none; + -ms-grid-row: 1; + -ms-grid-column: 1; + margin-left: 39px; + margin-right: 39px; + margin-top: 59px +} + +div.videoMessageDialog.PLAYBACK>header>button.backbutton, +div.videoMessageDialog.PREPARE_PLAYBACK>header>button.backbutton { + display: block +} + +div.videoMessageDialog>header>div.title { + -ms-grid-row: 1; + -ms-grid-column: 2; + -ms-grid-column-align: start; + margin-top: 62px; + margin-right: 15px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100% +} + +@media screen and (-ms-high-contrast: black-on-white) { + div.videoMessageDialog>header>div.title { + background-color: white; + width: auto; + height: 40px; + padding-right: 5px + } +} + +div.videoMessageDialog.PLAYBACK>header>div.title, +div.videoMessageDialog.PREPARE_PLAYBACK>header>div.title { + text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25) +} + +div.videoMessageDialog>div.video { + position: relative; + z-index: 1200; + -ms-grid-row: 2; + -ms-grid-column: 1; + -ms-grid-column-align: center; + background-color: #242528; + min-width: 65%; + line-height: 0 +} + +div.videoMessageDialog.PLAYBACK>div.video, +div.videoMessageDialog.PREPARE_PLAYBACK>div.video { + -ms-grid-row: 1; + -ms-grid-row-span: 3 +} + +div.videoMessageDialog.SEND.PREPARE>div.video.FLIPPED>video, +div.videoMessageDialog.SEND.RECORDING>div.video.FLIPPED>video { + transform: scaleX(-1) +} + +div.videoMessageDialog>div.video>video { + height: 100% +} + +div.videoMessageDialog>div.video>progress { + position: absolute; + top: 50%; + left: 50%; + margin-top: -30px; + margin-left: -30px +} + +div.videoMessageDialog>div.video>div.protectionLayerBottom { + position: absolute; + left: 0px; + right: 0px; + bottom: 0; + height: 200px; + background: url("/images/bgVideoMessageBottomProtection.png") repeat-x +} + +@media screen and (-ms-high-contrast: active) { + div.videoMessageDialog>div.video>div.protectionLayerBottom { + display: none + } +} + +div.videoMessageDialog>div.video>div.protectionLayerTop { + position: absolute; + left: 0px; + right: 0px; + top: 0px; + height: 400px; + background: url("/images/bgVideoMessageTopProtection.png") repeat-x +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.videoMessageDialog>div.video>div.protectionLayerTop { + display: none + } +} + +@media screen and (-ms-high-contrast: active) { + div.videoMessageDialog>div.video>div.protectionLayerTop { + display: none + } +} + +div.videoMessageDialog.RECORDED>div.video>div.protectionLayerBottom, +div.videoMessageDialog.PLAYBACK>div.video>div.protectionLayerBottom, +div.videoMessageDialog.PREPARE_PLAYBACK>div.video>div.protectionLayerBottom, +div.videoMessageDialog.SENDING>div.video>div.protectionLayerBottom, +div.videoMessageDialog.RECORDED>div.video>div.time, +div.videoMessageDialog.SENDING>div.video>div.time, +div.videoMessageDialog.ERROR>div.video>div.time, +div.videoMessageDialog.PLAYBACK>div.video>div.time, +div.videoMessageDialog.PREPARE_PLAYBACK>div.video>div.time { + display: none +} + +div.videoMessageDialog>div.video>div.lookingGood { + opacity: 0; + position: absolute; + left: 50%; + bottom: -20px; + margin-left: -150px; + width: 300px; + height: 300px; + background-color: rgba(0, 0, 0, 0.4); + border-radius: 150px; + text-align: center; + display: -ms-grid; + -ms-grid-rows: 35% 65%; + -ms-grid-columns: 1fr; + transition: opacity .25s ease-in-out +} + +div.videoMessageDialog>div.video>div.lookingGood.VISIBLE { + opacity: 1 +} + +div.videoMessageDialog>div.video>div.lookingGood>h3 { + -ms-grid-row: 1; + -ms-grid-column: 1; + -ms-grid-column-align: center; + -ms-grid-row-align: end; + font-weight: bold; + padding: 0 20px +} + +div.videoMessageDialog>div.video>div.lookingGood>p { + -ms-grid-row: 2; + -ms-grid-column: 1; + -ms-grid-row-align: start; + -ms-grid-column-align: center +} + +div.videoMessageDialog.PLAYBACK>div.video { + -ms-grid-row: 1; + -ms-grid-row-span: 3 +} + +div.videoMessageDialog>div.video>div.time { + position: absolute; + bottom: 25px; + left: 25px +} + +body.RTL div.videoMessageDialog>div.video>div.time { + left: auto; + right: 20px +} + +div.videoMessageDialog>div.video>input, +div.videoMessageDialog>div.video>textarea { + background-color: rgba(0, 0, 0, 0.4); + border: 0px; + position: absolute; + top: 10px; + left: 10px; + width: calc(100% - 20px); + min-height: 50px; + color: #a2c5d3; + display: none +} + +div.videoMessageDialog>div.video>input { + padding: 0px 10px +} + +div.videoMessageDialog>div.video>textarea { + min-height: 50px; + max-height: 200px; + top: 65px; + padding: 0px 15px +} + +div.videoMessageDialog>div.actions { + -ms-grid-row: 3; + -ms-grid-column: 1; + -ms-grid-column-align: center; + -ms-grid-row-align: center; + position: relative; + z-index: 1300; + display: block; + transition: opacity .25s ease-in-out +} + +div.videoMessageDialog.HIDEUI>div.actions { + display: none; + text-align: center; + line-height: 50px +} + +div.videoMessageDialog.PLAYBACK>div.actions { + margin-bottom: 60px +} + +div.videoMessageDialog>div.actions>button { + margin: 5px 15px; + min-width: 140px +} + +div.videoMessageDialog button.cancel { + background-color: #242528 +} + +div.videoMessageDialog button.cancel:hover { + background-color: #16171a +} + +div.videoMessageDialog button.cancel:active { + background-color: #101012 +} + +div.videoMessageDialog.SEND>div.actions>button.reply, +div.videoMessageDialog.RECEIVE>div.actions>button.reply.CANNOT_REPLAY { + display: none +} + +div.videoMessageDialog>div.actions>button.control { + position: relative; + top: -3px; + display: inline-block; + margin: 5px 15px; + background-color: #33353a; + border: 0px; + color: white; + cursor: default; + height: 40px; + width: 40px; + font-size: 40px; + line-height: normal; + font-weight: normal; + border-radius: 50%; + text-align: center; + padding: 0; + font-family: "Skype UI Symbol" !important; + box-shadow: 0 0 0 2px rgba(35, 31, 32, 0.4); + min-width: 0; + min-height: 0 +} + +div.videoMessageDialog>div.actions>button.control:hover { + background-color: rgba(51, 53, 58, 0.85) +} + +div.videoMessageDialog>div.actions>button.control:active { + background-color: rgba(51, 53, 58, 0.7) +} + +div.videoMessageDialog>div.actions>button.control.record { + top: 0; + background-color: #e81123; + border: 0px; + color: white; + height: 50px; + width: 50px; + font-size: 50px +} + +div.videoMessageDialog>div.actions>button.control.record::before { + content: "\E310" +} + +div.videoMessageDialog>div.actions>button.control.record:hover { + background-color: rgba(232, 17, 35, 0.85) +} + +div.videoMessageDialog>div.actions>button.control.record:active { + background-color: rgba(232, 17, 35, 0.7) +} + +div.videoMessageDialog>div.actions>button.control.record.RECORDING:focus { + outline: 0 +} + +@-ms-keyframes recordPulse { + from { + text-shadow: 0 0 0px #e81123 + } + 50% { + text-shadow: 0 0 5px #e81123 + } + to { + text-shadow: 0 0 0px #e81123 + } +} + +div.videoMessageDialog>div.actions>button.control.record.RECORDING { + background-color: #fff; + color: #e81123 +} + +div.videoMessageDialog>div.actions>button.control.record.RECORDING { + animation-name: recordPulse; + animation-duration: 1s; + animation-iteration-count: infinite; + transform: translateZ(0); + backface-visibility: hidden; + perspective: 1000 +} + +div.videoMessageDialog>div.actions>button.control.cameraSwitch::after { + content: "\E311" +} + +div.videoMessageDialog>div.actions>button.control.cameraSwitch:not(.ENABLED) { + opacity: 0.4 +} + +div.videoMessageDialog>div.actions>button.control.cameraSwitch:not(.ENABLED):hover, +div.videoMessageDialog>div.actions>button.control.cameraSwitch:not(.ENABLED):active { + background-color: #33353a +} + +div.videoMessageDialog>div.actions>button.control.cameraSwitch.ENABLED::after { + opacity: 1 +} + +div.videoMessageDialog>div.actions>button.control.x::before { + content: "\E413" +} + +div.videoMessageDialog>div.overlay { + display: -ms-grid; + position: relative; + z-index: 1400; + -ms-grid-row: 2; + -ms-grid-row-span: 2; + -ms-grid-column: 1; + -ms-grid-column-align: stretch; + -ms-grid-row-align: stretch; + text-align: center; + background-color: rgba(0, 0, 0, 0.8); + -ms-grid-columns: 1fr; + -ms-grid-rows: 1fr +} + +div.videoMessageDialog>div.overlay>div.content { + margin-top: -120px; + max-width: 800px; + -ms-grid-column: 1; + -ms-grid-row: 1; + -ms-grid-row-align: center; + -ms-grid-column-align: center +} + +div.videoMessageDialog>div.overlay.ERROR>div.content { + margin-top: 0 +} + +div.videoMessageDialog>div.overlay.error>div.content { + margin-top: 0 +} + +div.videoMessageDialog>div.overlay>div.content h3 { + font-weight: bold +} + +div.videoMessageDialog>div.overlay>div.content p { + margin: 10px 0 30px +} + +div.videoMessageDialog>div.overlay>button { + min-width: 140px +} + +div.videoMessageDialog>div.overlay.ERROR { + margin-bottom: 120px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.videoMessageDialog>header { + -ms-grid-columns: 1fr + } + div.videoMessageDialog.PLAYBACK>header, + div.videoMessageDialog.PREPARE_PLAYBACK>header { + -ms-grid-columns: 70px 1fr + } + div.videoMessageDialog>div.actions>button { + margin: 5px 5px + } + div.videoMessageDialog>header>button.backbutton { + -ms-grid-row: 1; + -ms-grid-column: 1; + -ms-grid-column-align: center; + margin-left: 0; + margin-right: 0; + margin-top: 32px + } + div.videoMessageDialog>header>div.title { + -ms-grid-column: 1; + margin-top: 29px; + width: 90%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-left: 20px + } + div.videoMessageDialog.PLAYBACK>header>div.title, + div.videoMessageDialog.PREPARE_PLAYBACK>header>div.title { + -ms-grid-column: 2; + width: 90% + } + div.videoMessageDialog>div.video>video { + height: auto; + width: 100% + } + div.videoMessageDialog>div.video { + -ms-grid-row-align: center + } + div.videoMessageDialog>div.video>div.time { + margin-bottom: -100px + } + div.videoMessageDialog>div.video>div.lookingGood { + margin-left: -100px; + width: 200px; + height: 200px + } + div.videoMessageDialog>div.video>div.lookingGood>p { + margin-top: 5px + } +} + +@media screen and (-ms-view-state: fullscreen-portrait) { + div.videoMessageDialog>div.video { + -ms-grid-row-align: center; + -ms-grid-column-align: stretch + } + div.videoMessageDialog>div.video>video { + height: auto; + width: 100% + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/conversationSwitcher.css b/packages/microsoft.skypeapp/controls/conversationSwitcher.css index 95558b5a..14917282 100644 --- a/packages/microsoft.skypeapp/controls/conversationSwitcher.css +++ b/packages/microsoft.skypeapp/controls/conversationSwitcher.css @@ -1 +1,207 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.conversationSwitcher div.buttonContainer{transform:scale(0);transition-property:transform;transition-duration:0.5s;transition-timing-function:linear;transition-delay:0s;position:absolute;z-index:11;top:40px;right:20px;width:79px;height:79px}body.RTL div.conversationSwitcher div.buttonContainer{left:20px;right:auto}@media screen and (max-aspect-ratio: 1 / 1){body.RTL div.conversationSwitcher div.buttonContainer{left:1px}}div.conversationSwitcher.POPULATED div.buttonContainer{transform:scale(1)}div.conversationSwitcher div.button{width:100%;height:100%;display:-ms-grid;-ms-grid-columns:1fr;-ms-grid-rows:1fr;background-image:none;background-repeat:no-repeat;background-position:20px 22px;margin-left:0px;transition-property:margin-left, margin-right;transition-duration:0.3s}div.conversationSwitcher div.button.NEWUNREAD{display:-ms-grid}div.page.contacts div.conversationSwitcher div.button{background-image:url(/images/bgConvSwitcherUnreadBtnMask.png)}div.page.dialer div.conversationSwitcher div.button.NEWUNREAD,div.page.contacts div.conversationSwitcher div.button.NEWUNREAD{background-image:none}div.conversationSwitcher div.button img.buttonCorona{position:relative;z-index:1;display:block;width:100%;height:100%;opacity:0;transition:opacity 1s linear;animation-name:coronaPulseOut;animation-duration:500ms;animation-iteration-count:1;animation-timing-function:ease-in-out}div.conversationSwitcher div.button.NEWUNREAD img.buttonCorona{opacity:1;animation-name:coronaPulse;animation-duration:1000ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out}@keyframes coronaPulse{from{-ms-transform:scale(1)}50%{-ms-transform:scale(1.15)}to{-ms-transform:scale(1)}}@keyframes coronaPulseOut{from{-ms-transform:scale(1.15)}to{-ms-transform:scale(1)}}div.conversationSwitcher div.button button.buttonCenter{position:relative;z-index:2;width:40px;height:40px;border-radius:50%;border:2px solid #fff;box-sizing:content-box;background-clip:content-box;-ms-grid-column:1;-ms-grid-row:1;-ms-grid-column-align:center;-ms-grid-row-align:center;display:-ms-grid;-ms-grid-columns:1fr;-ms-grid-rows:1fr;transition-property:background-color, border-color;transition-duration:0.3s, 0.3s;transition-timing-function:linear;color:#fff}div.conversationSwitcher div.button.UNREAD button.buttonCenter{background-color:#ff8c01}div.conversationSwitcher div.button.NEWUNREAD button.buttonCenter{border-color:rgba(255,255,255,0);border-width:0px;box-shadow:none}div.conversationSwitcher div.button.NOBORDER button.buttonCenter{border-color:rgba(255,255,255,0)}div.conversationSwitcher div.button.WITHPANEL{margin-left:-320px}body.RTL div.conversationSwitcher div.button.WITHPANEL{margin-left:inherit;margin-right:-320px}div.conversationSwitcher>div.UNREAD.button button.buttonCenter:hover{background-color:#e57e01}div.conversationSwitcher>div.UNREAD.button button.buttonCenter.active{background-color:#b26201}div.conversationSwitcher div.button button.buttonCenter div.unreadCount{-ms-grid-column:1;-ms-grid-row:1;-ms-grid-column-align:center;-ms-grid-row-align:center}@media screen and (max-aspect-ratio: 1 / 1){div.conversationSwitcher div.buttonContainer{top:16px;right:1px}}@media screen and (max-width: 400px){div.conversationSwitcher div.buttonContainer{top:16px;right:1px;width:68px;height:68px}body.RTL div.conversationSwitcher div.buttonContainer{left:1px;right:auto}div.page.contacts div.conversationSwitcher div.button{background-image:none}div.conversationSwitcher div.button button.buttonCenter{width:30px;height:30px;box-shadow:none;border:none}div.conversationSwitcher div.button.UNREAD button.buttonCenter{border-color:rgba(255,255,255,0)}div.conversationSwitcher div.button button.buttonCenter::before{font-size:30px}}@media screen and (-ms-high-contrast: active){div.conversationSwitcher div.button button.buttonCenter{border:1px solid WindowText !important}div.conversationSwitcher div.button button.buttonCenter:hover{box-shadow:0px 0px 0px 1px WindowText}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.conversationSwitcher div.buttonContainer { + transform: scale(0); + transition-property: transform; + transition-duration: 0.5s; + transition-timing-function: linear; + transition-delay: 0s; + position: absolute; + z-index: 11; + top: 40px; + right: 20px; + width: 79px; + height: 79px +} + +body.RTL div.conversationSwitcher div.buttonContainer { + left: 20px; + right: auto +} + +@media screen and (max-aspect-ratio: 1 / 1) { + body.RTL div.conversationSwitcher div.buttonContainer { + left: 1px + } +} + +div.conversationSwitcher.POPULATED div.buttonContainer { + transform: scale(1) +} + +div.conversationSwitcher div.button { + width: 100%; + height: 100%; + display: -ms-grid; + -ms-grid-columns: 1fr; + -ms-grid-rows: 1fr; + background-image: none; + background-repeat: no-repeat; + background-position: 20px 22px; + margin-left: 0px; + transition-property: margin-left, margin-right; + transition-duration: 0.3s +} + +div.conversationSwitcher div.button.NEWUNREAD { + display: -ms-grid +} + +div.page.contacts div.conversationSwitcher div.button { + background-image: url(/images/bgConvSwitcherUnreadBtnMask.png) +} + +div.page.dialer div.conversationSwitcher div.button.NEWUNREAD, +div.page.contacts div.conversationSwitcher div.button.NEWUNREAD { + background-image: none +} + +div.conversationSwitcher div.button img.buttonCorona { + position: relative; + z-index: 1; + display: block; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 1s linear; + animation-name: coronaPulseOut; + animation-duration: 500ms; + animation-iteration-count: 1; + animation-timing-function: ease-in-out +} + +div.conversationSwitcher div.button.NEWUNREAD img.buttonCorona { + opacity: 1; + animation-name: coronaPulse; + animation-duration: 1000ms; + animation-iteration-count: infinite; + animation-timing-function: ease-in-out +} + +@keyframes coronaPulse { + from { + -ms-transform: scale(1) + } + 50% { + -ms-transform: scale(1.15) + } + to { + -ms-transform: scale(1) + } +} + +@keyframes coronaPulseOut { + from { + -ms-transform: scale(1.15) + } + to { + -ms-transform: scale(1) + } +} + +div.conversationSwitcher div.button button.buttonCenter { + position: relative; + z-index: 2; + width: 40px; + height: 40px; + border-radius: 50%; + border: 2px solid #fff; + box-sizing: content-box; + background-clip: content-box; + -ms-grid-column: 1; + -ms-grid-row: 1; + -ms-grid-column-align: center; + -ms-grid-row-align: center; + display: -ms-grid; + -ms-grid-columns: 1fr; + -ms-grid-rows: 1fr; + transition-property: background-color, border-color; + transition-duration: 0.3s, 0.3s; + transition-timing-function: linear; + color: #fff +} + +div.conversationSwitcher div.button.UNREAD button.buttonCenter { + background-color: #ff8c01 +} + +div.conversationSwitcher div.button.NEWUNREAD button.buttonCenter { + border-color: rgba(255, 255, 255, 0); + border-width: 0px; + box-shadow: none +} + +div.conversationSwitcher div.button.NOBORDER button.buttonCenter { + border-color: rgba(255, 255, 255, 0) +} + +div.conversationSwitcher div.button.WITHPANEL { + margin-left: -320px +} + +body.RTL div.conversationSwitcher div.button.WITHPANEL { + margin-left: inherit; + margin-right: -320px +} + +div.conversationSwitcher>div.UNREAD.button button.buttonCenter:hover { + background-color: #e57e01 +} + +div.conversationSwitcher>div.UNREAD.button button.buttonCenter.active { + background-color: #b26201 +} + +div.conversationSwitcher div.button button.buttonCenter div.unreadCount { + -ms-grid-column: 1; + -ms-grid-row: 1; + -ms-grid-column-align: center; + -ms-grid-row-align: center +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.conversationSwitcher div.buttonContainer { + top: 16px; + right: 1px + } +} + +@media screen and (max-width: 400px) { + div.conversationSwitcher div.buttonContainer { + top: 16px; + right: 1px; + width: 68px; + height: 68px + } + body.RTL div.conversationSwitcher div.buttonContainer { + left: 1px; + right: auto + } + div.page.contacts div.conversationSwitcher div.button { + background-image: none + } + div.conversationSwitcher div.button button.buttonCenter { + width: 30px; + height: 30px; + box-shadow: none; + border: none + } + div.conversationSwitcher div.button.UNREAD button.buttonCenter { + border-color: rgba(255, 255, 255, 0) + } + div.conversationSwitcher div.button button.buttonCenter::before { + font-size: 30px + } +} + +@media screen and (-ms-high-contrast: active) { + div.conversationSwitcher div.button button.buttonCenter { + border: 1px solid WindowText !important + } + div.conversationSwitcher div.button button.buttonCenter:hover { + box-shadow: 0px 0px 0px 1px WindowText + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/dialogs.css b/packages/microsoft.skypeapp/controls/dialogs.css index c3be68f0..f137c277 100644 --- a/packages/microsoft.skypeapp/controls/dialogs.css +++ b/packages/microsoft.skypeapp/controls/dialogs.css @@ -1 +1,344 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.dialogFlyout{border:none;padding:20px;min-width:32px;background-color:#00aff0;border:2px solid #fff;color:#fff}div.dialogFlyout div.action{padding:5px 0}div.dialogFlyout div.action input[type=radio],div.dialogFlyout div.action input[type=checkbox]{vertical-align:middle;margin-right:10px}div.dialogFlyout div.action .win-toggleswitch .win-label{color:#fff}div.dialogFlyout div.action input[type=range]::-ms-fill-lower,div.dialogFlyout div.action input[type=range]:hover::-ms-fill-lower,div.dialogFlyout div.action input[type=range]:active::-ms-fill-lower{background-color:#fff}div.dialogFlyout div.action input[type=range]::-ms-fill-upper,div.dialogFlyout div.action input[type=range]:hover::-ms-fill-upper,div.dialogFlyout div.action input[type=range]:active::-ms-fill-upper{background-color:rgba(255,255,255,0.4)}div.dialogFlyout div.action .win-switch::-ms-track{border-color:rgba(255,255,255,0.4)}div.dialogFlyout div.action input:focus{outline:1px dotted Window}div.dialogFlyout div.action label{vertical-align:bottom}div.conversation #confirmDialog{max-height:none !important}div.dialogFlyout div.description{margin-bottom:10px}div.dialogFlyout input[type=text]{height:36px;width:314px}div.dialogFlyout div.actions{margin-top:20px}div.dialogFlyout div.actions button{display:inline-block;margin-top:10px;margin-left:10px}div.dialogFlyout div.actions button:first-child{margin-left:0}body.RTL div.dialogFlyout div.actions button{margin-left:0;margin-right:10px}body.RTL div.dialogFlyout div.actions button:first-child{margin-right:0}div.dialogFlyout.DECLINE{width:350px}div.dialogFlyout.AUTHREQUEST.win-flyout{background-color:#FFF;width:100%;color:#000;max-width:none;max-height:none !important;left:0px;margin:0px;border:0px;text-align:center;padding:0px;padding-bottom:20px}div.dialogFlyout.AUTHREQUEST textarea{height:120px;width:100%;min-width:200px;margin-top:20px}div.dialogFlyout.AUTHREQUEST div.description{display:none}div.dialogFlyout.AUTHREQUEST div.reqDesc{background-color:#00AFF0;color:#fff;min-height:50px;margin-bottom:10px}div.dialogFlyout.AUTHREQUEST div.reqDesc div.reqDescContent,div.dialogFlyout.AUTHREQUEST div.reqContent,div.dialogFlyout.AUTHREQUEST div.actions div.actionsContent{margin:auto;text-align:left;width:450px}body.RTL div.dialogFlyout.AUTHREQUEST div.reqDesc div.reqDescContent,body.RTL div.dialogFlyout.AUTHREQUEST div.reqContent,body.RTL div.dialogFlyout.AUTHREQUEST div.actions div.actionsContent{text-align:right}div.dialogFlyout.AUTHREQUEST div.reqDesc div.reqDescContent{font-weight:300}div.dialogFlyout.AUTHREQUEST div.reqDesc div.reqDescContent>div.title{padding-top:7px;padding-bottom:10px;margin-left:60px}body.RTL div.dialogFlyout.AUTHREQUEST div.reqDesc div.reqDescContent>div.title{margin-left:0;margin-right:60px}body:not(.RTL) div.dialogFlyout div.actions{text-align:right}body.RTL div.dialogFlyout div.actions{text-align:left}section.win-flyoutmenuclickeater.AUTHREQUEST{opacity:0.5;background-color:#000}div.dialogFlyout.AUTHREQUEST div.avatar{display:inline-block;position:relative;float:left;width:40px;height:40px;border:10px solid #00AFF0;border-radius:50%;overflow:visible;background-size:cover}body.RTL div.dialogFlyout.AUTHREQUEST div.avatar{float:right}div.dialogFlyout.AUTHREQUEST div.avatar:hover::before{content:' ';display:block;position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.15);border-radius:50%}div.dialogFlyout.ADDNUMBER{padding-top:12px}div.dialogFlyout.ADDNUMBER .countryInput{width:314px;height:40px}div.dialogFlyout.ADDNUMBER div.countryInput.HIDDEN,div.dialogFlyout.ADDNUMBER div.nameCont.HIDDEN{display:none}div.dialogFlyout.ADDNUMBER div.nameCont div.nameLegend{margin-bottom:8px}div.dialogFlyout.ADDNUMBER input{height:38px;font-size:15px;margin:0px}div.dialogFlyout.ADDNUMBER select{box-sizing:border-box;padding:0px 0px;margin-left:-8px;background-color:transparent;border:0;color:#FFF;margin-bottom:2px;margin-top:8px}div.dialogFlyout.ADDNUMBER select:focus{outline:1px dotted WindowText}div.dialogFlyout.ADDNUMBER select::-ms-expand{color:#FFF;width:15px;height:15px;margin-top:2px}div.dialogFlyout.ADDNUMBER select:hover,div.dialogFlyout.ADDNUMBER select:hover::-ms-expand{color:#b5e4f8}div.dialogFlyout.ADDNUMBER select::-ms-value{background-color:transparent}div.dialogFlyout.ADDNUMBER option{color:#FFF;background-color:#00AFF0}div.dialogFlyout.ADDNUMBER option:hover{color:#FFF;background-color:#009CD6}div.dialogFlyout.ADDNUMBER option:active,div.dialogFlyout.ADDNUMBER option:checked{color:#FFF;background-color:#0077A3}div.dialogFlyout.ADDNUMBER div.actions{margin-top:38px}div.dialogFlyout.DIALPAD{color:#000;padding:0px;border:0px;background-color:#D8F3FE}div.dialogFlyout.DIALPAD div.toneHistory{font-size:26.67px;line-height:34px;height:43px;font-weight:200;letter-spacing:0px;color:#0095cc;-ms-grid-row:1;-ms-grid-column:1;box-sizing:border-box;width:326px;padding:7px 19px 0;border:2px solid #E7F1F5;border-bottom:none;margin:0;text-align:left}div.dialogFlyout.DIALPAD div.toneHistory div.inner{text-align:right;overflow:hidden;display:inline-block;white-space:nowrap;direction:rtl;max-width:100%}@media screen and (max-aspect-ratio: 1 / 1){div.dialogFlyout.AUTHREQUEST div.reqDesc div.reqDescContent,div.dialogFlyout.AUTHREQUEST div.reqContent,div.dialogFlyout.AUTHREQUEST div.actions div.actionsContent{width:calc(100% - 40px)}div.dialogFlyout input[type=text],div.dialogFlyout.ADDNUMBER .countryInput{width:265px}div.dialogFlyout.AUTHREQUEST div.actions button.text{height:30px}div.dialogFlyout.AUTHREQUEST div.actions div.actionsContent{text-align:center}div.dialogFlyout.DECLINE,div.dialogFlyout.ADDNUMBER{width:auto;padding:20px}div.dialogFlyout.DIALPAD div.toneHistory{width:306px}div.dialogFlyout.DIALPAD{margin-left:7px;margin-right:7px}}@media screen and (-ms-high-contrast: active){div.dialogFlyout.AUTHREQUEST div.avatar{-ms-high-contrast-adjust:none;border-color:Window}div.dialogFlyout input,div.dialogFlyout div.actions button{box-shadow:0px 0px 0px 1px WindowText}div.dialogFlyout.ADDNUMBER select{color:WindowText}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.dialogFlyout { + border: none; + padding: 20px; + min-width: 32px; + background-color: #00aff0; + border: 2px solid #fff; + color: #fff +} + +div.dialogFlyout div.action { + padding: 5px 0 +} + +div.dialogFlyout div.action input[type=radio], +div.dialogFlyout div.action input[type=checkbox] { + vertical-align: middle; + margin-right: 10px +} + +div.dialogFlyout div.action .win-toggleswitch .win-label { + color: #fff +} + +div.dialogFlyout div.action input[type=range]::-ms-fill-lower, +div.dialogFlyout div.action input[type=range]:hover::-ms-fill-lower, +div.dialogFlyout div.action input[type=range]:active::-ms-fill-lower { + background-color: #fff +} + +div.dialogFlyout div.action input[type=range]::-ms-fill-upper, +div.dialogFlyout div.action input[type=range]:hover::-ms-fill-upper, +div.dialogFlyout div.action input[type=range]:active::-ms-fill-upper { + background-color: rgba(255, 255, 255, 0.4) +} + +div.dialogFlyout div.action .win-switch::-ms-track { + border-color: rgba(255, 255, 255, 0.4) +} + +div.dialogFlyout div.action input:focus { + outline: 1px dotted Window +} + +div.dialogFlyout div.action label { + vertical-align: bottom +} + +div.conversation #confirmDialog { + max-height: none !important +} + +div.dialogFlyout div.description { + margin-bottom: 10px +} + +div.dialogFlyout input[type=text] { + height: 36px; + width: 314px +} + +div.dialogFlyout div.actions { + margin-top: 20px +} + +div.dialogFlyout div.actions button { + display: inline-block; + margin-top: 10px; + margin-left: 10px +} + +div.dialogFlyout div.actions button:first-child { + margin-left: 0 +} + +body.RTL div.dialogFlyout div.actions button { + margin-left: 0; + margin-right: 10px +} + +body.RTL div.dialogFlyout div.actions button:first-child { + margin-right: 0 +} + +div.dialogFlyout.DECLINE { + width: 350px +} + +div.dialogFlyout.AUTHREQUEST.win-flyout { + background-color: #FFF; + width: 100%; + color: #000; + max-width: none; + max-height: none !important; + left: 0px; + margin: 0px; + border: 0px; + text-align: center; + padding: 0px; + padding-bottom: 20px +} + +div.dialogFlyout.AUTHREQUEST textarea { + height: 120px; + width: 100%; + min-width: 200px; + margin-top: 20px +} + +div.dialogFlyout.AUTHREQUEST div.description { + display: none +} + +div.dialogFlyout.AUTHREQUEST div.reqDesc { + background-color: #00AFF0; + color: #fff; + min-height: 50px; + margin-bottom: 10px +} + +div.dialogFlyout.AUTHREQUEST div.reqDesc div.reqDescContent, +div.dialogFlyout.AUTHREQUEST div.reqContent, +div.dialogFlyout.AUTHREQUEST div.actions div.actionsContent { + margin: auto; + text-align: left; + width: 450px +} + +body.RTL div.dialogFlyout.AUTHREQUEST div.reqDesc div.reqDescContent, +body.RTL div.dialogFlyout.AUTHREQUEST div.reqContent, +body.RTL div.dialogFlyout.AUTHREQUEST div.actions div.actionsContent { + text-align: right +} + +div.dialogFlyout.AUTHREQUEST div.reqDesc div.reqDescContent { + font-weight: 300 +} + +div.dialogFlyout.AUTHREQUEST div.reqDesc div.reqDescContent>div.title { + padding-top: 7px; + padding-bottom: 10px; + margin-left: 60px +} + +body.RTL div.dialogFlyout.AUTHREQUEST div.reqDesc div.reqDescContent>div.title { + margin-left: 0; + margin-right: 60px +} + +body:not(.RTL) div.dialogFlyout div.actions { + text-align: right +} + +body.RTL div.dialogFlyout div.actions { + text-align: left +} + +section.win-flyoutmenuclickeater.AUTHREQUEST { + opacity: 0.5; + background-color: #000 +} + +div.dialogFlyout.AUTHREQUEST div.avatar { + display: inline-block; + position: relative; + float: left; + width: 40px; + height: 40px; + border: 10px solid #00AFF0; + border-radius: 50%; + overflow: visible; + background-size: cover +} + +body.RTL div.dialogFlyout.AUTHREQUEST div.avatar { + float: right +} + +div.dialogFlyout.AUTHREQUEST div.avatar:hover::before { + content: ' '; + display: block; + position: absolute; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.15); + border-radius: 50% +} + +div.dialogFlyout.ADDNUMBER { + padding-top: 12px +} + +div.dialogFlyout.ADDNUMBER .countryInput { + width: 314px; + height: 40px +} + +div.dialogFlyout.ADDNUMBER div.countryInput.HIDDEN, +div.dialogFlyout.ADDNUMBER div.nameCont.HIDDEN { + display: none +} + +div.dialogFlyout.ADDNUMBER div.nameCont div.nameLegend { + margin-bottom: 8px +} + +div.dialogFlyout.ADDNUMBER input { + height: 38px; + font-size: 15px; + margin: 0px +} + +div.dialogFlyout.ADDNUMBER select { + box-sizing: border-box; + padding: 0px 0px; + margin-left: -8px; + background-color: transparent; + border: 0; + color: #FFF; + margin-bottom: 2px; + margin-top: 8px +} + +div.dialogFlyout.ADDNUMBER select:focus { + outline: 1px dotted WindowText +} + +div.dialogFlyout.ADDNUMBER select::-ms-expand { + color: #FFF; + width: 15px; + height: 15px; + margin-top: 2px +} + +div.dialogFlyout.ADDNUMBER select:hover, +div.dialogFlyout.ADDNUMBER select:hover::-ms-expand { + color: #b5e4f8 +} + +div.dialogFlyout.ADDNUMBER select::-ms-value { + background-color: transparent +} + +div.dialogFlyout.ADDNUMBER option { + color: #FFF; + background-color: #00AFF0 +} + +div.dialogFlyout.ADDNUMBER option:hover { + color: #FFF; + background-color: #009CD6 +} + +div.dialogFlyout.ADDNUMBER option:active, +div.dialogFlyout.ADDNUMBER option:checked { + color: #FFF; + background-color: #0077A3 +} + +div.dialogFlyout.ADDNUMBER div.actions { + margin-top: 38px +} + +div.dialogFlyout.DIALPAD { + color: #000; + padding: 0px; + border: 0px; + background-color: #D8F3FE +} + +div.dialogFlyout.DIALPAD div.toneHistory { + font-size: 26.67px; + line-height: 34px; + height: 43px; + font-weight: 200; + letter-spacing: 0px; + color: #0095cc; + -ms-grid-row: 1; + -ms-grid-column: 1; + box-sizing: border-box; + width: 326px; + padding: 7px 19px 0; + border: 2px solid #E7F1F5; + border-bottom: none; + margin: 0; + text-align: left +} + +div.dialogFlyout.DIALPAD div.toneHistory div.inner { + text-align: right; + overflow: hidden; + display: inline-block; + white-space: nowrap; + direction: rtl; + max-width: 100% +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.dialogFlyout.AUTHREQUEST div.reqDesc div.reqDescContent, + div.dialogFlyout.AUTHREQUEST div.reqContent, + div.dialogFlyout.AUTHREQUEST div.actions div.actionsContent { + width: calc(100% - 40px) + } + div.dialogFlyout input[type=text], + div.dialogFlyout.ADDNUMBER .countryInput { + width: 265px + } + div.dialogFlyout.AUTHREQUEST div.actions button.text { + height: 30px + } + div.dialogFlyout.AUTHREQUEST div.actions div.actionsContent { + text-align: center + } + div.dialogFlyout.DECLINE, + div.dialogFlyout.ADDNUMBER { + width: auto; + padding: 20px + } + div.dialogFlyout.DIALPAD div.toneHistory { + width: 306px + } + div.dialogFlyout.DIALPAD { + margin-left: 7px; + margin-right: 7px + } +} + +@media screen and (-ms-high-contrast: active) { + div.dialogFlyout.AUTHREQUEST div.avatar { + -ms-high-contrast-adjust: none; + border-color: Window + } + div.dialogFlyout input, + div.dialogFlyout div.actions button { + box-shadow: 0px 0px 0px 1px WindowText + } + div.dialogFlyout.ADDNUMBER select { + color: WindowText + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/dialpad.css b/packages/microsoft.skypeapp/controls/dialpad.css index 943dd42f..1fd32800 100644 --- a/packages/microsoft.skypeapp/controls/dialpad.css +++ b/packages/microsoft.skypeapp/controls/dialpad.css @@ -1 +1,179 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.dialogFlyout.DIALPAD div.toneHistory{height:50px}div.dialpadKeys{-ms-grid-row:2;-ms-grid-column:1;background-color:#E7F1F5;box-sizing:border-box;padding:1px}@media screen and (-ms-high-contrast: active){div.dialpadKeys{background-color:WindowText}}div.dialpadKeys div.numbers{display:-ms-grid;-ms-grid-columns:106px 110px 106px;-ms-grid-rows:96px 98px 98px 98px;direction:ltr}div.dialpadKeys div.numbers>button.number{background-color:#fff;outline-style:none}div.dialpadKeys div.numbers>button.number:focus div.numberInnerCont{box-shadow:inset 0 0 0 2px #000}@media screen and (-ms-high-contrast: active){div.dialpadKeys div.numbers>button.number:focus div.numberInnerCont{box-shadow:inset 0 0 0 5px Windowtext}}div.dialpadKeys div.numbers>button.number div.icon,div.dialpadKeys div.numbers>button.number div.icon:active{color:#000}div.dialpadKeys div.numbers>button.number[data-key="1"]{-ms-grid-column:1;-ms-grid-row:1}div.dialpadKeys div.numbers>button.number[data-key="2"]{-ms-grid-column:2;-ms-grid-row:1;margin:0px 2px}div.dialpadKeys div.numbers>button.number[data-key="3"]{-ms-grid-column:3;-ms-grid-row:1}div.dialpadKeys div.numbers>button.number[data-key="4"]{-ms-grid-column:1;-ms-grid-row:2;margin-top:2px}div.dialpadKeys div.numbers>button.number[data-key="5"]{-ms-grid-column:2;-ms-grid-row:2;margin:2px 2px 0}div.dialpadKeys div.numbers>button.number[data-key="6"]{-ms-grid-column:3;-ms-grid-row:2;margin-top:2px}div.dialpadKeys div.numbers>button.number[data-key="7"]{-ms-grid-column:1;-ms-grid-row:3;margin-top:2px}div.dialpadKeys div.numbers>button.number[data-key="8"]{-ms-grid-column:2;-ms-grid-row:3;margin:2px 2px 0}div.dialpadKeys div.numbers>button.number[data-key="9"]{-ms-grid-column:3;-ms-grid-row:3;margin-top:2px}div.dialpadKeys div.numbers>button.number[data-key="*"]{-ms-grid-column:1;-ms-grid-row:4;margin-top:2px}div.dialpadKeys div.numbers>button.number[data-key="0"]{-ms-grid-column:2;-ms-grid-row:4;margin:2px 2px 0}div.dialpadKeys div.numbers>button.number[data-key="#"]{-ms-grid-column:3;-ms-grid-row:4;margin-top:2px}div.dialpadKeys div.numbers>button.number div.numberInnerCont{display:-ms-grid;-ms-grid-rows:1fr;-ms-grid-columns:1fr;width:100%;height:100%;background-color:#fff}div.dialpadKeys div.numbers>button.number:hover div.numberInnerCont{background-color:#E6F7FE}@media screen and (-ms-high-contrast: active){div.dialpadKeys div.numbers>button.number:hover div.numberInnerCont{background-color:Highlight}}div.dialpadKeys div.numbers>button.number div.numberInnerCont div.icon{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-align:center;-ms-grid-row-align:center;position:relative;top:-9px;font-weight:300}div.dialpadKeys div.numbers>button.number div.numberInnerCont div.title{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-align:center;-ms-grid-row-align:end;position:relative;top:-21px;font-weight:400}@media screen and (max-aspect-ratio: 1 / 1){div.dialogFlyout.DIALPAD{max-height:435px;height:100%}div.dialogFlyout.DIALPAD div.dialpadKeys{height:CALC(100% - 50px)}div.dialogFlyout.DIALPAD div.dialpadKeys div.dialpad-accessWrap{height:100%}div.dialogFlyout.DIALPAD div.dialpadKeys div.dialpad-accessWrap div.numbers{-ms-grid-columns:1fr 1fr 1fr;-ms-grid-rows:1fr 1fr 1fr 1fr;height:100%}div.dialogFlyout.DIALPAD div.dialpadKeys div.dialpad-accessWrap div.numbers div.title{top:-10%}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.dialogFlyout.DIALPAD div.toneHistory { + height: 50px +} + +div.dialpadKeys { + -ms-grid-row: 2; + -ms-grid-column: 1; + background-color: #E7F1F5; + box-sizing: border-box; + padding: 1px +} + +@media screen and (-ms-high-contrast: active) { + div.dialpadKeys { + background-color: WindowText + } +} + +div.dialpadKeys div.numbers { + display: -ms-grid; + -ms-grid-columns: 106px 110px 106px; + -ms-grid-rows: 96px 98px 98px 98px; + direction: ltr +} + +div.dialpadKeys div.numbers>button.number { + background-color: #fff; + outline-style: none +} + +div.dialpadKeys div.numbers>button.number:focus div.numberInnerCont { + box-shadow: inset 0 0 0 2px #000 +} + +@media screen and (-ms-high-contrast: active) { + div.dialpadKeys div.numbers>button.number:focus div.numberInnerCont { + box-shadow: inset 0 0 0 5px Windowtext + } +} + +div.dialpadKeys div.numbers>button.number div.icon, +div.dialpadKeys div.numbers>button.number div.icon:active { + color: #000 +} + +div.dialpadKeys div.numbers>button.number[data-key="1"] { + -ms-grid-column: 1; + -ms-grid-row: 1 +} + +div.dialpadKeys div.numbers>button.number[data-key="2"] { + -ms-grid-column: 2; + -ms-grid-row: 1; + margin: 0px 2px +} + +div.dialpadKeys div.numbers>button.number[data-key="3"] { + -ms-grid-column: 3; + -ms-grid-row: 1 +} + +div.dialpadKeys div.numbers>button.number[data-key="4"] { + -ms-grid-column: 1; + -ms-grid-row: 2; + margin-top: 2px +} + +div.dialpadKeys div.numbers>button.number[data-key="5"] { + -ms-grid-column: 2; + -ms-grid-row: 2; + margin: 2px 2px 0 +} + +div.dialpadKeys div.numbers>button.number[data-key="6"] { + -ms-grid-column: 3; + -ms-grid-row: 2; + margin-top: 2px +} + +div.dialpadKeys div.numbers>button.number[data-key="7"] { + -ms-grid-column: 1; + -ms-grid-row: 3; + margin-top: 2px +} + +div.dialpadKeys div.numbers>button.number[data-key="8"] { + -ms-grid-column: 2; + -ms-grid-row: 3; + margin: 2px 2px 0 +} + +div.dialpadKeys div.numbers>button.number[data-key="9"] { + -ms-grid-column: 3; + -ms-grid-row: 3; + margin-top: 2px +} + +div.dialpadKeys div.numbers>button.number[data-key="*"] { + -ms-grid-column: 1; + -ms-grid-row: 4; + margin-top: 2px +} + +div.dialpadKeys div.numbers>button.number[data-key="0"] { + -ms-grid-column: 2; + -ms-grid-row: 4; + margin: 2px 2px 0 +} + +div.dialpadKeys div.numbers>button.number[data-key="#"] { + -ms-grid-column: 3; + -ms-grid-row: 4; + margin-top: 2px +} + +div.dialpadKeys div.numbers>button.number div.numberInnerCont { + display: -ms-grid; + -ms-grid-rows: 1fr; + -ms-grid-columns: 1fr; + width: 100%; + height: 100%; + background-color: #fff +} + +div.dialpadKeys div.numbers>button.number:hover div.numberInnerCont { + background-color: #E6F7FE +} + +@media screen and (-ms-high-contrast: active) { + div.dialpadKeys div.numbers>button.number:hover div.numberInnerCont { + background-color: Highlight + } +} + +div.dialpadKeys div.numbers>button.number div.numberInnerCont div.icon { + -ms-grid-row: 1; + -ms-grid-column: 1; + -ms-grid-column-align: center; + -ms-grid-row-align: center; + position: relative; + top: -9px; + font-weight: 300 +} + +div.dialpadKeys div.numbers>button.number div.numberInnerCont div.title { + -ms-grid-row: 1; + -ms-grid-column: 1; + -ms-grid-column-align: center; + -ms-grid-row-align: end; + position: relative; + top: -21px; + font-weight: 400 +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.dialogFlyout.DIALPAD { + max-height: 435px; + height: 100% + } + div.dialogFlyout.DIALPAD div.dialpadKeys { + height: CALC(100% - 50px) + } + div.dialogFlyout.DIALPAD div.dialpadKeys div.dialpad-accessWrap { + height: 100% + } + div.dialogFlyout.DIALPAD div.dialpadKeys div.dialpad-accessWrap div.numbers { + -ms-grid-columns: 1fr 1fr 1fr; + -ms-grid-rows: 1fr 1fr 1fr 1fr; + height: 100% + } + div.dialogFlyout.DIALPAD div.dialpadKeys div.dialpad-accessWrap div.numbers div.title { + top: -10% + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/eventNotification.css b/packages/microsoft.skypeapp/controls/eventNotification.css index 9e5c833c..fa409b38 100644 --- a/packages/microsoft.skypeapp/controls/eventNotification.css +++ b/packages/microsoft.skypeapp/controls/eventNotification.css @@ -1 +1 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */#eventNotifications{position:absolute;top:0;left:0;width:100%}#eventNotifications>div.notification{position:absolute;top:0;left:0;width:100%}#eventNotifications>div.notification div.notificationContent{width:320px;margin:0 auto;z-index:2147483639;position:relative;min-height:130px;text-align:center;background-color:#0095CC;color:#fff;padding-bottom:15px;padding-top:29px;transform:translate(0, -15px);box-sizing:border-box;transform-origin:0% 0%}@media screen and (-ms-high-contrast: active){#eventNotifications>div.notification div.notificationContent{border:2px solid WindowText;top:-2px}}#eventNotifications>div.notification div.notificationContent div.title,#eventNotifications>div.notification div.notificationContent div.text{padding:0px 40px}#eventNotifications>div.notification.WIDE .notificationContent{width:500px}@media screen and (max-width: 500px){#eventNotifications>div.notification.WIDE .notificationContent{width:100%}}#eventNotifications>div.notification.WIDE .notificationContent div.title,#eventNotifications>div.notification.WIDE .notificationContent div.text{padding:0px 55px}#eventNotifications>div.notification div.icon{width:50px;height:50px;margin-bottom:5px;font-family:"Skype UI Symbol";font-size:50px;line-height:normal;display:inline-block;font-weight:bold}#eventNotifications>div.notification div.title{padding:0px 40px;margin-bottom:8px;font-size:21.33px;line-height:30px}#eventNotifications>div.notification div.text{font-size:14.66px;line-height:20px;margin-bottom:16px;vertical-align:bottom}#eventNotifications>div.notification div.text span{display:inline-block;max-width:100%;vertical-align:bottom;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#eventNotifications>div.notification div.actions{font-size:0px}#eventNotifications>div.notification div.actions>button{background-color:#0083B4;margin-left:20px;min-width:115px;font-weight:normal;font-size:12px;height:30px}#eventNotifications>div.notification div.actions>button:first-child{margin-left:0px}body.RTL #eventNotifications>div.notification div.actions>button{margin-left:0px;margin-right:20px}body.RTL #eventNotifications>div.notification div.actions>button:first-child{margin-right:0px}@media screen and (-ms-high-contrast: active){#eventNotifications>div.notification div.actions>button{border:1px solid}}#eventNotifications>div.notification div.actions>button:hover{background-color:#007caa}@media screen and (-ms-high-contrast: active){#eventNotifications>div.notification div.actions>button:hover{box-shadow:inset 0px 0px 0px 1px WindowText}}#eventNotifications>div.notification div.actions>button:active{background-color:#005e81}#eventNotifications>div.notification.twoButtonsAndTitle .notificationContent{padding-top:26px;transform:translate(0, -15px)}#eventNotifications>div.notification.iconText .notificationContent{padding-top:39px;transform:translate(0, -15px);padding-bottom:10px}#eventNotifications>div.notification.iconText div.icon{margin-bottom:10px}#eventNotifications>div.notification.SLIDE_IN .notificationContent{animation-name:notificationSlideIn;animation-duration:0.83s;animation-delay:0s;animation-timing-function:linear;animation-direction:normal}#eventNotifications>div.notification.SLIDE_OUT .notificationContent{animation-name:notificationSlideOut;animation-duration:0.4s;animation-delay:0s;animation-fill-mode:both}@keyframes notificationSlideIn{0%{transform:translate(0, -100%);animation-timing-function:cubic-bezier(1, 0, 0.78, 1)}52%{transform:translate(0, 0);animation-timing-function:cubic-bezier(0.33, 0, 0, 1)}100%{transform:translate(0, -15px)}}@keyframes notificationSlideOut{0%{transform:translate(0, -15px);animation-timing-function:cubic-bezier(1, 0, 0.78, 1)}100%{transform:translate(0, -100%)}} +/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */#eventNotifications{position:absolute;top:0;left:0;width:100%}#eventNotifications>div.notification{position:absolute;top:0;left:0;width:100%}#eventNotifications>div.notification div.notificationContent{width:320px;margin:0 auto;z-index:2147483639;position:relative;min-height:130px;text-align:center;background-color:#0095CC;color:#fff;padding-bottom:15px;padding-top:29px;transform:translate(0, -15px);box-sizing:border-box;transform-origin:0% 0%}@media screen and (-ms-high-contrast: active){#eventNotifications>div.notification div.notificationContent{border:2px solid WindowText;top:-2px}}#eventNotifications>div.notification div.notificationContent div.title,#eventNotifications>div.notification div.notificationContent div.text{padding:0px 40px}#eventNotifications>div.notification.WIDE .notificationContent{width:500px}@media screen and (max-width: 500px){#eventNotifications>div.notification.WIDE .notificationContent{width:100%}}#eventNotifications>div.notification.WIDE .notificationContent div.title,#eventNotifications>div.notification.WIDE .notificationContent div.text{padding:0px 55px}#eventNotifications>div.notification div.icon{width:50px;height:50px;margin-bottom:5px;font-family:"Skype UI Symbol" !important;font-size:50px;line-height:normal;display:inline-block;font-weight:bold}#eventNotifications>div.notification div.title{padding:0px 40px;margin-bottom:8px;font-size:21.33px;line-height:30px}#eventNotifications>div.notification div.text{font-size:14.66px;line-height:20px;margin-bottom:16px;vertical-align:bottom}#eventNotifications>div.notification div.text span{display:inline-block;max-width:100%;vertical-align:bottom;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#eventNotifications>div.notification div.actions{font-size:0px}#eventNotifications>div.notification div.actions>button{background-color:#0083B4;margin-left:20px;min-width:115px;font-weight:normal;font-size:12px;height:30px}#eventNotifications>div.notification div.actions>button:first-child{margin-left:0px}body.RTL #eventNotifications>div.notification div.actions>button{margin-left:0px;margin-right:20px}body.RTL #eventNotifications>div.notification div.actions>button:first-child{margin-right:0px}@media screen and (-ms-high-contrast: active){#eventNotifications>div.notification div.actions>button{border:1px solid}}#eventNotifications>div.notification div.actions>button:hover{background-color:#007caa}@media screen and (-ms-high-contrast: active){#eventNotifications>div.notification div.actions>button:hover{box-shadow:inset 0px 0px 0px 1px WindowText}}#eventNotifications>div.notification div.actions>button:active{background-color:#005e81}#eventNotifications>div.notification.twoButtonsAndTitle .notificationContent{padding-top:26px;transform:translate(0, -15px)}#eventNotifications>div.notification.iconText .notificationContent{padding-top:39px;transform:translate(0, -15px);padding-bottom:10px}#eventNotifications>div.notification.iconText div.icon{margin-bottom:10px}#eventNotifications>div.notification.SLIDE_IN .notificationContent{animation-name:notificationSlideIn;animation-duration:0.83s;animation-delay:0s;animation-timing-function:linear;animation-direction:normal}#eventNotifications>div.notification.SLIDE_OUT .notificationContent{animation-name:notificationSlideOut;animation-duration:0.4s;animation-delay:0s;animation-fill-mode:both}@keyframes notificationSlideIn{0%{transform:translate(0, -100%);animation-timing-function:cubic-bezier(1, 0, 0.78, 1)}52%{transform:translate(0, 0);animation-timing-function:cubic-bezier(0.33, 0, 0, 1)}100%{transform:translate(0, -15px)}}@keyframes notificationSlideOut{0%{transform:translate(0, -15px);animation-timing-function:cubic-bezier(1, 0, 0.78, 1)}100%{transform:translate(0, -100%)}} diff --git a/packages/microsoft.skypeapp/controls/fileTransfer.css b/packages/microsoft.skypeapp/controls/fileTransfer.css index 9131e659..ce394937 100644 --- a/packages/microsoft.skypeapp/controls/fileTransfer.css +++ b/packages/microsoft.skypeapp/controls/fileTransfer.css @@ -1 +1,187 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.fileTransfer{-ms-user-select:none;height:67px}div.fileTransfer:focus{border:2px solid #00aff0}div.fileTransfer div.file{display:-ms-grid;-ms-grid-rows:40px 12px;-ms-grid-columns:40px 1fr}div.fileTransfer div.file div.icon{-ms-grid-column:1;-ms-grid-row:1}div.fileTransfer div.file div.description{-ms-grid-column:2;-ms-grid-row:1;box-sizing:border-box;padding:0 15px}div.fileTransfer div.file progress{-ms-grid-column-span:2;-ms-grid-row:2;visibility:hidden;-ms-grid-row-align:end;color:#00aff0;width:calc(100% - 10px)}body.RTL div.fileTransfer div.file progress{width:100%}div.fileTransfer div.file div.info,div.fileTransfer div.file p.name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}div.fileTransfer div.file div.info{color:#93999d}div.fileTransfer div.file span.status,div.fileTransfer div.file span.estimate,div.fileTransfer div.file span.unknown,div.fileTransfer div.file.TRANSFERRING_OVER_RELAY.ISINFINITE span.estimate,div.fileTransfer div.file.TRANSFERRING.ISINFINITE span.estimate{display:none}div.fileTransfer div.file span.status::before,div.fileTransfer div.file span.estimate::before,div.fileTransfer div.file span.unknown::before{content:", ";color:#93999d}div.fileTransfer div.file span.tCancel::before,div.fileTransfer div.file span.tDownload::before{content:" "}div.fileTransfer div.file div.icon div.image,div.fileTransfer div.file div.icon div.image:before{width:40px;height:40px}div.fileTransfer div.file div.icon{position:relative}div.fileTransfer div.file div.icon,div.fileTransfer div.file.ISINCOMING.COMPLETED div.icon,div.fileTransfer div.file:not(.ISINCOMING).COMPLETED div.icon,div.fileTransfer div.file:not(.ISINCOMING).FAILED div.icon,div.fileTransfer div.file:not(.ISINCOMING).CANCELLED div.icon,div.fileTransfer div.file:not(.ISINCOMING).CANCELLED_BY_REMOTE div.icon{background:#00aff0;text-align:center}div.fileTransfer div.file.ISINCOMING div.icon,div.fileTransfer div.file.CANCELLED div.icon,div.fileTransfer div.file.FAILED div.icon{background:#b3e7fb}div.fileTransfersContainer div.fileTransfer:hover div.file div.icon{background:#0082b3}div.fileTransfersContainer div.fileTransfer:hover div.file.ISINCOMING div.icon,div.fileTransfersContainer div.fileTransfer:hover div.file.ISINCOMING.CANCELLED div.icon,div.fileTransfersContainer div.fileTransfer:hover div.file.ISINCOMING.FAILED div.icon{background:#b2dcec}div.fileTransfer div.file div.icon div.image:before{font-family:"Skype UI Symbol";font-weight:bold;content:"\E308";font-size:24px;line-height:45px;color:#FFF;text-align:center;overflow:hidden;display:block}div.fileTransfer div.file.ISINCOMING div.icon div.image:before{content:"\E307"}div.fileTransfer div.file.NEW progress,div.fileTransfer div.file.WAITING_FOR_ACCEPT progress,div.fileTransfer div.file.PREPARING progress,div.fileTransfer div.file.CONNECTING progress,div.fileTransfer div.file.TRANSFERRING progress,div.fileTransfer div.file.TRANSFERRING_OVER_RELAY progress,div.fileTransfer div.file.PAUSED progress{visibility:visible}div.fileTransfer div.file.TRANSFERRING_OVER_RELAY.ISINFINITE span.unknown,div.fileTransfer div.file.TRANSFERRING.ISINFINITE span.unknown,div.fileTransfer div.file.PLACEHOLDER span.status,div.fileTransfer div.file.PREPARING span.status,div.fileTransfer div.file.FAILED span.status,div.fileTransfer div.file.FINISHING_FAILED span.status,div.fileTransfer div.file.WAITING_FOR_ACCEPT span.status,div.fileTransfer div.file.PREPARING_FAILED span.status,div.fileTransfer div.file.OFFER_FROM_OTHER_INSTANCE span.status,div.fileTransfer div.file.CANCELLED span.status,div.fileTransfer div.file.CANCELLED_BY_REMOTE span.status,div.fileTransfer div.file.TRANSFERRING span.estimate,div.fileTransfer div.file.CONNECTING span.status{display:inline}div.fileTransfer div.file span.tCancel,div.fileTransfer div.file span.tDownload{display:none;color:#00aff0}div.fileTransfer div.file.TRANSFERRING span.tCancel,div.fileTransfer div.file.TRANSFERRING_OVER_RELAY span.tCancel,div.fileTransfer div.file.CONNECTING span.tCancel,div.fileTransfer div.file.WAITING_FOR_ACCEPT span.tCancel,div.fileTransfer div.file.WAITING_FOR_ACCEPT span.tCancel,div.fileTransfer div.file.NEW span.tCancel,div.fileTransfer div.file.ISINCOMING.NEW span.tDownload{display:inline}div.fileTransfer div.file.ISINCOMING.NEW span.tCancel{display:none}div.fileTransfersContainer.ISMULTIFILETRANSFER div.file{margin-bottom:15px}@media screen and (max-aspect-ratio: 1 / 1){div.fileTransfer div.file.TRANSFERRING span.estimate{display:inline-block;vertical-align:bottom;max-width:65px;overflow:hidden;text-overflow:ellipsis}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.fileTransfer { + -ms-user-select: none; + height: 67px +} + +div.fileTransfer:focus { + border: 2px solid #00aff0 +} + +div.fileTransfer div.file { + display: -ms-grid; + -ms-grid-rows: 40px 12px; + -ms-grid-columns: 40px 1fr +} + +div.fileTransfer div.file div.icon { + -ms-grid-column: 1; + -ms-grid-row: 1 +} + +div.fileTransfer div.file div.description { + -ms-grid-column: 2; + -ms-grid-row: 1; + box-sizing: border-box; + padding: 0 15px +} + +div.fileTransfer div.file progress { + -ms-grid-column-span: 2; + -ms-grid-row: 2; + visibility: hidden; + -ms-grid-row-align: end; + color: #00aff0; + width: calc(100% - 10px) +} + +body.RTL div.fileTransfer div.file progress { + width: 100% +} + +div.fileTransfer div.file div.info, +div.fileTransfer div.file p.name { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis +} + +div.fileTransfer div.file div.info { + color: #93999d +} + +div.fileTransfer div.file span.status, +div.fileTransfer div.file span.estimate, +div.fileTransfer div.file span.unknown, +div.fileTransfer div.file.TRANSFERRING_OVER_RELAY.ISINFINITE span.estimate, +div.fileTransfer div.file.TRANSFERRING.ISINFINITE span.estimate { + display: none +} + +div.fileTransfer div.file span.status::before, +div.fileTransfer div.file span.estimate::before, +div.fileTransfer div.file span.unknown::before { + content: ", "; + color: #93999d +} + +div.fileTransfer div.file span.tCancel::before, +div.fileTransfer div.file span.tDownload::before { + content: " " +} + +div.fileTransfer div.file div.icon div.image, +div.fileTransfer div.file div.icon div.image:before { + width: 40px; + height: 40px +} + +div.fileTransfer div.file div.icon { + position: relative +} + +div.fileTransfer div.file div.icon, +div.fileTransfer div.file.ISINCOMING.COMPLETED div.icon, +div.fileTransfer div.file:not(.ISINCOMING).COMPLETED div.icon, +div.fileTransfer div.file:not(.ISINCOMING).FAILED div.icon, +div.fileTransfer div.file:not(.ISINCOMING).CANCELLED div.icon, +div.fileTransfer div.file:not(.ISINCOMING).CANCELLED_BY_REMOTE div.icon { + background: #00aff0; + text-align: center +} + +div.fileTransfer div.file.ISINCOMING div.icon, +div.fileTransfer div.file.CANCELLED div.icon, +div.fileTransfer div.file.FAILED div.icon { + background: #b3e7fb +} + +div.fileTransfersContainer div.fileTransfer:hover div.file div.icon { + background: #0082b3 +} + +div.fileTransfersContainer div.fileTransfer:hover div.file.ISINCOMING div.icon, +div.fileTransfersContainer div.fileTransfer:hover div.file.ISINCOMING.CANCELLED div.icon, +div.fileTransfersContainer div.fileTransfer:hover div.file.ISINCOMING.FAILED div.icon { + background: #b2dcec +} + +div.fileTransfer div.file div.icon div.image:before { + font-family: "Skype UI Symbol" !important; + font-weight: bold; + content: "\E308"; + font-size: 24px; + line-height: 45px; + color: #FFF; + text-align: center; + overflow: hidden; + display: block +} + +div.fileTransfer div.file.ISINCOMING div.icon div.image:before { + content: "\E307" +} + +div.fileTransfer div.file.NEW progress, +div.fileTransfer div.file.WAITING_FOR_ACCEPT progress, +div.fileTransfer div.file.PREPARING progress, +div.fileTransfer div.file.CONNECTING progress, +div.fileTransfer div.file.TRANSFERRING progress, +div.fileTransfer div.file.TRANSFERRING_OVER_RELAY progress, +div.fileTransfer div.file.PAUSED progress { + visibility: visible +} + +div.fileTransfer div.file.TRANSFERRING_OVER_RELAY.ISINFINITE span.unknown, +div.fileTransfer div.file.TRANSFERRING.ISINFINITE span.unknown, +div.fileTransfer div.file.PLACEHOLDER span.status, +div.fileTransfer div.file.PREPARING span.status, +div.fileTransfer div.file.FAILED span.status, +div.fileTransfer div.file.FINISHING_FAILED span.status, +div.fileTransfer div.file.WAITING_FOR_ACCEPT span.status, +div.fileTransfer div.file.PREPARING_FAILED span.status, +div.fileTransfer div.file.OFFER_FROM_OTHER_INSTANCE span.status, +div.fileTransfer div.file.CANCELLED span.status, +div.fileTransfer div.file.CANCELLED_BY_REMOTE span.status, +div.fileTransfer div.file.TRANSFERRING span.estimate, +div.fileTransfer div.file.CONNECTING span.status { + display: inline +} + +div.fileTransfer div.file span.tCancel, +div.fileTransfer div.file span.tDownload { + display: none; + color: #00aff0 +} + +div.fileTransfer div.file.TRANSFERRING span.tCancel, +div.fileTransfer div.file.TRANSFERRING_OVER_RELAY span.tCancel, +div.fileTransfer div.file.CONNECTING span.tCancel, +div.fileTransfer div.file.WAITING_FOR_ACCEPT span.tCancel, +div.fileTransfer div.file.WAITING_FOR_ACCEPT span.tCancel, +div.fileTransfer div.file.NEW span.tCancel, +div.fileTransfer div.file.ISINCOMING.NEW span.tDownload { + display: inline +} + +div.fileTransfer div.file.ISINCOMING.NEW span.tCancel { + display: none +} + +div.fileTransfersContainer.ISMULTIFILETRANSFER div.file { + margin-bottom: 15px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.fileTransfer div.file.TRANSFERRING span.estimate { + display: inline-block; + vertical-align: bottom; + max-width: 65px; + overflow: hidden; + text-overflow: ellipsis + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/fileTransferGroup.css b/packages/microsoft.skypeapp/controls/fileTransferGroup.css index bc537f0d..73051158 100644 --- a/packages/microsoft.skypeapp/controls/fileTransferGroup.css +++ b/packages/microsoft.skypeapp/controls/fileTransferGroup.css @@ -1 +1,136 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.fileTransferGroup{-ms-user-select:none;height:67px}div.fileTransferGroup:focus{border:2px solid #00aff0}div.fileTransferGroup div.file{display:-ms-grid;-ms-grid-rows:40px 12px;-ms-grid-columns:40px 1fr}div.fileTransferGroup div.file div.icon{-ms-grid-column:1;-ms-grid-row:1}div.fileTransferGroup div.file div.description{-ms-grid-column:2;-ms-grid-row:1;box-sizing:border-box;padding:0 15px}div.fileTransferGroup div.file progress{-ms-grid-column-span:2;-ms-grid-row:2;visibility:hidden;-ms-grid-row-align:end;color:#00aff0;width:calc(100% - 10px)}div.fileTransferGroup div.file div.info,div.fileTransferGroup div.file p.name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}div.fileTransferGroup div.file div.info{color:#93999d}div.fileTransferGroup div.file span.tCancel{color:#00aff0}div.fileTransferGroup div.file.COMPLETED span.tCancel,div.fileTransferGroup div.file.CANCELLED span.tCancel{display:none}div.fileTransferGroup div.file span.status{display:none}div.fileTransferGroup div.file span.status::before{content:", ";color:#93999d}div.fileTransferGroup div.file div.icon div.image,div.fileTransferGroup div.file div.icon div.image:before{width:40px;height:40px}div.fileTransferGroup div.file div.icon{position:relative}div.fileTransferGroup div.file div.icon{background:#00aff0;text-align:center}div.fileTransferGroup div.file.ISINCOMING.FAILED div.icon,div.fileTransferGroup div.file.ISINCOMING.CANCELLED div.icon{background:#b3e7fb}div.fileTransferGroup:hover div.file div.icon{background:#0082b3}div.fileTransferGroup:hover div.file.ISINCOMING.FAILED div.icon,div.fileTransferGroup:hover div.file.ISINCOMING.CANCELLED div.icon{background:#b2dcec}div.fileTransferGroup div.file div.icon div.image:before{font-family:"Skype UI Symbol";font-weight:bold;content:"\E308";font-size:24px;line-height:45px;color:#FFF;text-align:center;overflow:hidden;display:block}div.fileTransferGroup div.file.ISINCOMING div.icon div.image:before{content:"\E307"}div.fileTransferGroup div.file div.icon div.protection{position:absolute;top:0;left:0;display:none;background:#fff;opacity:0.5}div.fileTransferGroup div.file progress.VISIBLE,div.fileTransferGroup div.file progressContainer.VISIBLE{visibility:visible}div.fileTransferGroup div.file span.status.VISIBLE{display:inline}div.fileTransfersContainer.ISMULTIFILETRANSFER div.file{margin-bottom:15px} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.fileTransferGroup { + -ms-user-select: none; + height: 67px +} + +div.fileTransferGroup:focus { + border: 2px solid #00aff0 +} + +div.fileTransferGroup div.file { + display: -ms-grid; + -ms-grid-rows: 40px 12px; + -ms-grid-columns: 40px 1fr +} + +div.fileTransferGroup div.file div.icon { + -ms-grid-column: 1; + -ms-grid-row: 1 +} + +div.fileTransferGroup div.file div.description { + -ms-grid-column: 2; + -ms-grid-row: 1; + box-sizing: border-box; + padding: 0 15px +} + +div.fileTransferGroup div.file progress { + -ms-grid-column-span: 2; + -ms-grid-row: 2; + visibility: hidden; + -ms-grid-row-align: end; + color: #00aff0; + width: calc(100% - 10px) +} + +div.fileTransferGroup div.file div.info, +div.fileTransferGroup div.file p.name { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis +} + +div.fileTransferGroup div.file div.info { + color: #93999d +} + +div.fileTransferGroup div.file span.tCancel { + color: #00aff0 +} + +div.fileTransferGroup div.file.COMPLETED span.tCancel, +div.fileTransferGroup div.file.CANCELLED span.tCancel { + display: none +} + +div.fileTransferGroup div.file span.status { + display: none +} + +div.fileTransferGroup div.file span.status::before { + content: ", "; + color: #93999d +} + +div.fileTransferGroup div.file div.icon div.image, +div.fileTransferGroup div.file div.icon div.image:before { + width: 40px; + height: 40px +} + +div.fileTransferGroup div.file div.icon { + position: relative +} + +div.fileTransferGroup div.file div.icon { + background: #00aff0; + text-align: center +} + +div.fileTransferGroup div.file.ISINCOMING.FAILED div.icon, +div.fileTransferGroup div.file.ISINCOMING.CANCELLED div.icon { + background: #b3e7fb +} + +div.fileTransferGroup:hover div.file div.icon { + background: #0082b3 +} + +div.fileTransferGroup:hover div.file.ISINCOMING.FAILED div.icon, +div.fileTransferGroup:hover div.file.ISINCOMING.CANCELLED div.icon { + background: #b2dcec +} + +div.fileTransferGroup div.file div.icon div.image:before { + font-family: "Skype UI Symbol" !important; + font-weight: bold; + content: "\E308"; + font-size: 24px; + line-height: 45px; + color: #FFF; + text-align: center; + overflow: hidden; + display: block +} + +div.fileTransferGroup div.file.ISINCOMING div.icon div.image:before { + content: "\E307" +} + +div.fileTransferGroup div.file div.icon div.protection { + position: absolute; + top: 0; + left: 0; + display: none; + background: #fff; + opacity: 0.5 +} + +div.fileTransferGroup div.file progress.VISIBLE, +div.fileTransferGroup div.file progressContainer.VISIBLE { + visibility: visible +} + +div.fileTransferGroup div.file span.status.VISIBLE { + display: inline +} + +div.fileTransfersContainer.ISMULTIFILETRANSFER div.file { + margin-bottom: 15px +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/help.css b/packages/microsoft.skypeapp/controls/help.css index e01a135d..418eaed0 100644 --- a/packages/microsoft.skypeapp/controls/help.css +++ b/packages/microsoft.skypeapp/controls/help.css @@ -1 +1 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */#helpPanelContainer div.win-header{background-color:#00AFF0}body.RTL #helpPanelContainer div.win-header div.win-label{padding-right:40px;padding-left:30px}#helpPanelContainer div.win-header span.logo{position:absolute;right:40px;width:30px;height:30px}body.RTL #helpPanelContainer div.win-header span.logo{right:auto;left:40px}#helpPanelContainer div.win-header span.logo:after{content:"\E001";font-family:"Skype UI Symbol";font-size:30px;font-weight:bold;line-height:normal}#helpPanelContainer div.win-content div.subtitle{font-weight:600;margin-top:16px}#helpPanelContainer div.win-content div.link{padding-top:20px}@media screen and (-ms-high-contrast: active){#helpPanelContainer div.win-content div.link a:hover{color:Highlight}}#helpPanelContainer div.win-content button{text-align:left;font-weight:300}body.RTL #helpPanelContainer div.win-content button{text-align:right}.win-wide.win-settingsflyout{width:346px}.win-wide.win-settingsflyout .win-header{min-height:48px;height:auto}.win-wide.win-settingsflyout .win-header .win-label{padding-bottom:10px;padding-right:40px;word-break:break-all} +/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */#helpPanelContainer div.win-header{background-color:#00AFF0}body.RTL #helpPanelContainer div.win-header div.win-label{padding-right:40px;padding-left:30px}#helpPanelContainer div.win-header span.logo{position:absolute;right:40px;width:30px;height:30px}body.RTL #helpPanelContainer div.win-header span.logo{right:auto;left:40px}#helpPanelContainer div.win-header span.logo:after{content:"\E001";font-family:"Skype UI Symbol" !important;font-size:30px;font-weight:bold;line-height:normal}#helpPanelContainer div.win-content div.subtitle{font-weight:600;margin-top:16px}#helpPanelContainer div.win-content div.link{padding-top:20px}@media screen and (-ms-high-contrast: active){#helpPanelContainer div.win-content div.link a:hover{color:Highlight}}#helpPanelContainer div.win-content button{text-align:left;font-weight:300}body.RTL #helpPanelContainer div.win-content button{text-align:right}.win-wide.win-settingsflyout{width:346px}.win-wide.win-settingsflyout .win-header{min-height:48px;height:auto}.win-wide.win-settingsflyout .win-header .win-label{padding-bottom:10px;padding-right:40px;word-break:break-all} diff --git a/packages/microsoft.skypeapp/controls/helpBubbles.css b/packages/microsoft.skypeapp/controls/helpBubbles.css index b015f756..809dede0 100644 --- a/packages/microsoft.skypeapp/controls/helpBubbles.css +++ b/packages/microsoft.skypeapp/controls/helpBubbles.css @@ -1 +1,282 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */#helpBubbles{position:fixed;top:0px;width:100%;height:100%}#helpBubbles:empty,div.page.login #helpBubbles{display:none}#helpBubbles div.helpBubble{position:absolute;width:260px;height:260px;color:#fff;z-index:1000;border-radius:50%}@media screen and (-ms-high-contrast: active){#helpBubbles div.helpBubble{color:WindowText}}#helpBubbles div.helpBubble.ADDCONTACT{top:85px;left:455px}body.RTL #helpBubbles div.helpBubble.ADDCONTACT{left:auto;right:455px}#helpBubbles div.helpBubble.ADDCONTACT div.bubbleBordersWrapper div.arrowBorder{top:5px;left:5px}body.RTL #helpBubbles div.helpBubble.ADDCONTACT div.bubbleBordersWrapper div.arrowBorder{left:auto;right:5px}#helpBubbles div.helpBubble.ADDCONTACT div.arrow{top:5px;left:5px}body.RTL #helpBubbles div.helpBubble.ADDCONTACT div.arrow{left:auto;right:5px}#helpBubbles div.helpBubble.ADDCONTACT div.arrow::after{transform:rotate(-45deg)}body.RTL #helpBubbles div.helpBubble.ADDCONTACT div.arrow::after{transform:rotate(45deg)}#helpBubbles div.helpBubble.APPBAR{bottom:100px;left:50%;margin-left:-130px}#helpBubbles div.helpBubble.APPBAR div.bubbleBordersWrapper div.arrowBorder,#helpBubbles div.helpBubble.APPBAR div.arrow{top:auto;left:50%;margin-left:-40px}body.RTL #helpBubbles div.helpBubble.APPBAR div.bubbleBordersWrapper div.arrowBorder,body.RTL #helpBubbles div.helpBubble.APPBAR div.arrow{right:50%;margin-right:-40px;left:auto;margin-left:0}#helpBubbles div.helpBubble.APPBAR div.bubbleBordersWrapper div.arrowBorder{bottom:-30px}#helpBubbles div.helpBubble.APPBAR div.arrow{bottom:-20px}#helpBubbles div.helpBubble.APPBAR div.arrow::after{transform:rotate(180deg)}#helpBubbles div.helpBubble.ANIMATE_OUT{animation-name:helpBubbleOut;animation-duration:0.23s;animation-delay:0.1s;animation-fill-mode:both}#helpBubbles div.helpBubble div.bubbleBordersWrapper{width:260px;height:260px;position:absolute;opacity:0.1;top:-5px;left:-5px}body.RTL #helpBubbles div.helpBubble div.bubbleBordersWrapper{left:auto;right:-5px}@media screen and (-ms-high-contrast: active){#helpBubbles div.helpBubble div.bubbleBordersWrapper{opacity:1}}#helpBubbles div.helpBubble div.bubbleBordersWrapper div.bubbleBorder{width:260px;height:260px;border-radius:50%;background-color:#000;animation-name:helpBubbleIn;animation-duration:1s;animation-fill-mode:both}@media screen and (-ms-high-contrast: active){#helpBubbles div.helpBubble div.bubbleBordersWrapper div.bubbleBorder{background-color:WindowText}}#helpBubbles div.helpBubble div.bubbleBordersWrapper div.arrowBorder{position:absolute;z-index:-1;width:80px;height:80px;border-radius:50%;background-color:#000;animation-name:helpSmallBubbleIn;animation-duration:0.33s;animation-fill-mode:both;animation-delay:1s}@media screen and (-ms-high-contrast: active){#helpBubbles div.helpBubble div.bubbleBordersWrapper div.arrowBorder{background-color:window}}#helpBubbles div.helpBubble div.arrow{position:absolute;animation-name:helpSmallBubbleIn;animation-duration:0.33s;animation-fill-mode:both;animation-delay:1s;z-index:1000}#helpBubbles div.helpBubble div.arrow::after{padding:5px;width:60px;height:60px;font-size:60px;content:"\E41B";display:inline-block;font-family:"Skype UI Symbol";position:relative;line-height:normal;border-radius:50%;color:#00aff0;background-color:#fff;text-align:center}@media screen and (-ms-high-contrast: active){#helpBubbles div.helpBubble div.arrow::after{color:window;background-color:WindowText}}#helpBubbles div.helpBubble div.cw{width:250px;height:250px;display:-ms-grid;-ms-grid-rows:1fr;-ms-grid-columns:1fr;background-color:#00aff0;border-radius:50%;z-index:500;animation-name:helpBubbleIn;animation-duration:1s;animation-fill-mode:both}#helpBubbles div.helpBubble div.cw div.text{text-align:center;-ms-grid-row:1;-ms-grid-column:1;-ms-grid-row-align:center;-ms-grid-column-align:center;padding:40px;font-weight:200;font-size:21.5px;line-height:26px;width:160px;word-wrap:break-word;word-break:keep-all}@keyframes helpBubbleIn{0%{opacity:0;transform:scaleX(0.6) scaleY(0.6) scaleZ(1)}50%{opacity:0;transform:scaleX(0.6) scaleY(0.6) scaleZ(1);animation-timing-function:cubic-bezier(1, 0, 0.78, 1)}75%{opacity:0.7;transform:scaleX(1.14) scaleY(1.14) scaleZ(1);animation-timing-function:cubic-bezier(0.33, 0, 0, 1)}100%{opacity:1;transform:scaleX(1) scaleY(1) scaleZ(1)}}@keyframes helpSmallBubbleIn{0%{opacity:0;transform:scaleX(0.6) scaleY(0.6) scaleZ(1)}50%{opacity:0;transform:scaleX(0.6) scaleY(0.6) scaleZ(1);animation-timing-function:cubic-bezier(1, 0, 0.78, 1)}70%{opacity:0}75%{opacity:1;transform:scaleX(1.14) scaleY(1.14) scaleZ(1);animation-timing-function:cubic-bezier(0.33, 0, 0, 1)}100%{opacity:1;transform:scaleX(1) scaleY(1) scaleZ(1)}}@keyframes helpBubbleOut{0%{opacity:1;transform:scaleX(1) scaleY(1) scaleZ(1);animation-timing-function:cubic-bezier(1, 0, 0.78, 1)}100%{opacity:0;transform:scaleX(0.5) scaleY(0.5) scaleZ(1)}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +#helpBubbles { + position: fixed; + top: 0px; + width: 100%; + height: 100% +} + +#helpBubbles:empty, +div.page.login #helpBubbles { + display: none +} + +#helpBubbles div.helpBubble { + position: absolute; + width: 260px; + height: 260px; + color: #fff; + z-index: 1000; + border-radius: 50% +} + +@media screen and (-ms-high-contrast: active) { + #helpBubbles div.helpBubble { + color: WindowText + } +} + +#helpBubbles div.helpBubble.ADDCONTACT { + top: 85px; + left: 455px +} + +body.RTL #helpBubbles div.helpBubble.ADDCONTACT { + left: auto; + right: 455px +} + +#helpBubbles div.helpBubble.ADDCONTACT div.bubbleBordersWrapper div.arrowBorder { + top: 5px; + left: 5px +} + +body.RTL #helpBubbles div.helpBubble.ADDCONTACT div.bubbleBordersWrapper div.arrowBorder { + left: auto; + right: 5px +} + +#helpBubbles div.helpBubble.ADDCONTACT div.arrow { + top: 5px; + left: 5px +} + +body.RTL #helpBubbles div.helpBubble.ADDCONTACT div.arrow { + left: auto; + right: 5px +} + +#helpBubbles div.helpBubble.ADDCONTACT div.arrow::after { + transform: rotate(-45deg) +} + +body.RTL #helpBubbles div.helpBubble.ADDCONTACT div.arrow::after { + transform: rotate(45deg) +} + +#helpBubbles div.helpBubble.APPBAR { + bottom: 100px; + left: 50%; + margin-left: -130px +} + +#helpBubbles div.helpBubble.APPBAR div.bubbleBordersWrapper div.arrowBorder, +#helpBubbles div.helpBubble.APPBAR div.arrow { + top: auto; + left: 50%; + margin-left: -40px +} + +body.RTL #helpBubbles div.helpBubble.APPBAR div.bubbleBordersWrapper div.arrowBorder, +body.RTL #helpBubbles div.helpBubble.APPBAR div.arrow { + right: 50%; + margin-right: -40px; + left: auto; + margin-left: 0 +} + +#helpBubbles div.helpBubble.APPBAR div.bubbleBordersWrapper div.arrowBorder { + bottom: -30px +} + +#helpBubbles div.helpBubble.APPBAR div.arrow { + bottom: -20px +} + +#helpBubbles div.helpBubble.APPBAR div.arrow::after { + transform: rotate(180deg) +} + +#helpBubbles div.helpBubble.ANIMATE_OUT { + animation-name: helpBubbleOut; + animation-duration: 0.23s; + animation-delay: 0.1s; + animation-fill-mode: both +} + +#helpBubbles div.helpBubble div.bubbleBordersWrapper { + width: 260px; + height: 260px; + position: absolute; + opacity: 0.1; + top: -5px; + left: -5px +} + +body.RTL #helpBubbles div.helpBubble div.bubbleBordersWrapper { + left: auto; + right: -5px +} + +@media screen and (-ms-high-contrast: active) { + #helpBubbles div.helpBubble div.bubbleBordersWrapper { + opacity: 1 + } +} + +#helpBubbles div.helpBubble div.bubbleBordersWrapper div.bubbleBorder { + width: 260px; + height: 260px; + border-radius: 50%; + background-color: #000; + animation-name: helpBubbleIn; + animation-duration: 1s; + animation-fill-mode: both +} + +@media screen and (-ms-high-contrast: active) { + #helpBubbles div.helpBubble div.bubbleBordersWrapper div.bubbleBorder { + background-color: WindowText + } +} + +#helpBubbles div.helpBubble div.bubbleBordersWrapper div.arrowBorder { + position: absolute; + z-index: -1; + width: 80px; + height: 80px; + border-radius: 50%; + background-color: #000; + animation-name: helpSmallBubbleIn; + animation-duration: 0.33s; + animation-fill-mode: both; + animation-delay: 1s +} + +@media screen and (-ms-high-contrast: active) { + #helpBubbles div.helpBubble div.bubbleBordersWrapper div.arrowBorder { + background-color: window + } +} + +#helpBubbles div.helpBubble div.arrow { + position: absolute; + animation-name: helpSmallBubbleIn; + animation-duration: 0.33s; + animation-fill-mode: both; + animation-delay: 1s; + z-index: 1000 +} + +#helpBubbles div.helpBubble div.arrow::after { + padding: 5px; + width: 60px; + height: 60px; + font-size: 60px; + content: "\E41B"; + display: inline-block; + font-family: "Skype UI Symbol" !important; + position: relative; + line-height: normal; + border-radius: 50%; + color: #00aff0; + background-color: #fff; + text-align: center +} + +@media screen and (-ms-high-contrast: active) { + #helpBubbles div.helpBubble div.arrow::after { + color: window; + background-color: WindowText + } +} + +#helpBubbles div.helpBubble div.cw { + width: 250px; + height: 250px; + display: -ms-grid; + -ms-grid-rows: 1fr; + -ms-grid-columns: 1fr; + background-color: #00aff0; + border-radius: 50%; + z-index: 500; + animation-name: helpBubbleIn; + animation-duration: 1s; + animation-fill-mode: both +} + +#helpBubbles div.helpBubble div.cw div.text { + text-align: center; + -ms-grid-row: 1; + -ms-grid-column: 1; + -ms-grid-row-align: center; + -ms-grid-column-align: center; + padding: 40px; + font-weight: 200; + font-size: 21.5px; + line-height: 26px; + width: 160px; + word-wrap: break-word; + word-break: keep-all +} + +@keyframes helpBubbleIn { + 0% { + opacity: 0; + transform: scaleX(0.6) scaleY(0.6) scaleZ(1) + } + 50% { + opacity: 0; + transform: scaleX(0.6) scaleY(0.6) scaleZ(1); + animation-timing-function: cubic-bezier(1, 0, 0.78, 1) + } + 75% { + opacity: 0.7; + transform: scaleX(1.14) scaleY(1.14) scaleZ(1); + animation-timing-function: cubic-bezier(0.33, 0, 0, 1) + } + 100% { + opacity: 1; + transform: scaleX(1) scaleY(1) scaleZ(1) + } +} + +@keyframes helpSmallBubbleIn { + 0% { + opacity: 0; + transform: scaleX(0.6) scaleY(0.6) scaleZ(1) + } + 50% { + opacity: 0; + transform: scaleX(0.6) scaleY(0.6) scaleZ(1); + animation-timing-function: cubic-bezier(1, 0, 0.78, 1) + } + 70% { + opacity: 0 + } + 75% { + opacity: 1; + transform: scaleX(1.14) scaleY(1.14) scaleZ(1); + animation-timing-function: cubic-bezier(0.33, 0, 0, 1) + } + 100% { + opacity: 1; + transform: scaleX(1) scaleY(1) scaleZ(1) + } +} + +@keyframes helpBubbleOut { + 0% { + opacity: 1; + transform: scaleX(1) scaleY(1) scaleZ(1); + animation-timing-function: cubic-bezier(1, 0, 0.78, 1) + } + 100% { + opacity: 0; + transform: scaleX(0.5) scaleY(0.5) scaleZ(1) + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/helpBubbles.scss b/packages/microsoft.skypeapp/controls/helpBubbles.scss index de172153..c3dd8876 100644 --- a/packages/microsoft.skypeapp/controls/helpBubbles.scss +++ b/packages/microsoft.skypeapp/controls/helpBubbles.scss @@ -230,7 +230,7 @@ font-size: 60px; content: "\E41B"; display: inline-block; - font-family: "Skype UI Symbol"; + font-family: "Skype UI Symbol" !important; position: relative; line-height: normal; border-radius: 50%; diff --git a/packages/microsoft.skypeapp/controls/mePanel.css b/packages/microsoft.skypeapp/controls/mePanel.css index 4041b8b4..8f38c9f6 100644 --- a/packages/microsoft.skypeapp/controls/mePanel.css +++ b/packages/microsoft.skypeapp/controls/mePanel.css @@ -1 +1,439 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */#mePanel div.avatar{height:320px;width:320px;background-color:#efefef;display:-ms-grid;-ms-grid-rows:1fr;-ms-grid-columns:1fr;overflow:hidden;position:relative;box-sizing:border-box;-ms-high-contrast-adjust:none}@media screen and (-ms-high-contrast: active){#mePanel div.avatar{cursor:pointer}}#mePanel div.avatar div.protectionLayer{height:100%;width:100%;background-image:url("/images/svg/protMePanel320x320.svg")}@media screen and (-ms-high-contrast: active){#mePanel div.avatar div.protectionLayer{display:none}}#mePanel div.avatar:hover div.protectionLayer::after{content:' ';display:block;position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.15)}#mePanel div.avatar.DEFAULTAVATAR div.protectionLayer{display:none}#mePanel div.avatar:focus{border:2px solid #00AFF0;outline:none}#mePanel .win-backbutton{position:absolute;top:35px;left:20px;width:32px;height:32px;line-height:28px;font-size:12pt}body.RTL #mePanel .win-backbutton{right:20px;left:auto}#mePanel span.name{top:29px;font-weight:bold;position:absolute;right:30px;left:70px;color:white;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}body.RTL #mePanel span.name{right:70px;left:30px}@media screen and (-ms-high-contrast: active){#mePanel span.name{background-color:Window}}#mePanel span.email{position:absolute;top:49px;right:30px;left:70px;color:white;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}body.RTL #mePanel span.email{right:70px;left:30px}@media screen and (-ms-high-contrast: active){#mePanel span.email{background-color:Window}}#mePanel div.moodOuterContainer{transition:bottom .6s ease-in-out}#mePanel div.moodContainer{position:relative;margin:15px;overflow:hidden}#mePanel div.moodContainer:hover input.emoticonPicker{opacity:0.8}@media screen and (-ms-high-contrast: active){#mePanel div.moodContainer{border:1px solid WindowText}}#mePanel textarea.mood{margin:0;padding:10px 35px 10px 15px;overflow:hidden;min-width:0;width:290px}#mePanel textarea.mood.MAXHEIGHT{overflow:auto}body.RTL #mePanel textarea.mood{padding:10px 15px 10px 35px}#mePanel.KEYBOARDUP div.moodSpaceContainer{min-height:55px}#mePanel.KEYBOARDUP div.moodOuterContainer{z-index:100;position:absolute;right:0;width:100%;background:inherit}#mePanel input.emoticonPicker{position:absolute;right:10px;top:10px;opacity:0.6;outline:none;box-sizing:border-box}@media screen and (-ms-high-contrast: active){#mePanel input.emoticonPicker{opacity:1.0}}#mePanel input.emoticonPicker:hover{opacity:0.8}#mePanel input.emoticonPicker:focus{box-shadow:0 0 0 1px WindowText}@media screen and (-ms-high-contrast: active){#mePanel input.emoticonPicker:focus{box-shadow:none;outline:1px dotted}}#mePanel input.emoticonPicker:active{opacity:1}body.RTL #mePanel input.emoticonPicker{right:auto;left:10px}#mePanel ul{list-style-type:none;padding:0;width:100%}#mePanel ul.statusContainer li button{margin-left:45px;width:calc(100% - 45px);text-align:left;padding:0 5px 5px 5px;height:48px}body.RTL #mePanel ul.statusContainer li button{text-align:right}#mePanel ul.statusContainer li span.presence{position:absolute;display:none;left:30px;top:22px}#mePanel ul.statusContainer li.selected span.presence{display:block}body.RTL #mePanel ul.statusContainer li.selected span.presence{left:auto;right:30px}#mePanel ul.linksContainer{position:absolute;bottom:5px;width:100%;border-top:2px solid #2ebcf1;margin:0}@media screen and (-ms-high-contrast: active){#mePanel ul.linksContainer{border-top:0px}}#mePanel ul.linksContainer li{height:58px;position:relative}#mePanel ul.linksContainer li.hidden{display:none}#mePanel ul.linksContainer li.disabled{opacity:.5}#mePanel ul.linksContainer li.signOut span.ico{transform:scaleX(-1)}#mePanel ul.linksContainer span.ico{display:inline-block;position:absolute;left:0;top:2px}body.RTL #mePanel ul.linksContainer span.ico{left:auto;right:0}body:not(.RTL) #mePanel ul.linksContainer span.ico,body.RTL #mePanel ul.linksContainer span.ico{color:#FFF;font-family:Skype UI Symbol;font-weight:bold;font-size:28px;vertical-align:middle;line-height:58px;margin:0 26px;width:1em}#mePanel ul.linksContainer a{padding:0;margin:0}#mePanel ul.linksContainer a.label{display:inline-block;color:white;line-height:58px;margin-left:80px;width:calc(100% - 85px);padding:0 0 0 5px}body.RTL #mePanel ul.linksContainer a.label{margin-left:0;margin-right:80px}@media screen and (-ms-high-contrast: active){#mePanel ul.linksContainer a.label{box-sizing:border-box;color:windowText}#mePanel ul.linksContainer a.label:focus{outline:none;border:1px solid WindowText}}#mePanel li{height:50px;width:100%;position:relative}#mePanel li:hover{background-color:rgba(0,0,0,0.1)}#mePanel li.active,#mePanel li.selected.active{background-color:rgba(0,0,0,0.3)}#mePanel li.selected{background-color:rgba(0,0,0,0.15)}@media screen and (-ms-high-contrast: active){#mePanel li.selected{-ms-high-contrast-adjust:none}}#mePanel li button{line-height:48px;color:white;display:block;background-color:transparent;font-weight:300}body.RTL #mePanel li button{margin-left:0;margin-right:30px;padding-left:0;padding-right:18px}@media screen and (-ms-high-contrast: active){#mePanel li button{color:windowText}}#mePanel .signOutPanel{position:absolute;top:0px;bottom:0px;right:0px;left:0px;z-index:102;background-color:#00aff0;color:white;padding:85px 20px 0px 20px}#mePanel .signOutPanel>h2.title{position:absolute;top:34px;left:65px}body.RTL #mePanel .signOutPanel>h2.title{right:65px;left:auto}#mePanel .signOutPanel>p{margin-bottom:20px}#mePanel .signOutPanel div.contactWrapper{display:-ms-grid;width:100%;height:50px;margin-bottom:35px;margin-top:15px;-ms-grid-rows:1fr;white-space:nowrap;-ms-grid-columns:50px 10px 1fr}#mePanel .signOutPanel div.contactWrapper div.avatar{-ms-grid-column:1;width:auto;height:auto;background-size:cover}#mePanel .signOutPanel div.contactWrapper div.name{font-weight:bold;margin-top:3px;-ms-grid-column:3;-ms-grid-row-align:start;text-overflow:ellipsis;overflow:hidden}#mePanel .signOutPanel div.contactWrapper div.username{margin-bottom:7px;-ms-grid-column:3;-ms-grid-row-align:end}#mePanel .signOutPanel.hidden{display:none}div.clickEater.mePanel{right:320px;left:0}body.RTL div.clickEater.mePanel{left:320px;right:0} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +#mePanel div.avatar { + height: 320px; + width: 320px; + background-color: #efefef; + display: -ms-grid; + -ms-grid-rows: 1fr; + -ms-grid-columns: 1fr; + overflow: hidden; + position: relative; + box-sizing: border-box; + -ms-high-contrast-adjust: none +} + +@media screen and (-ms-high-contrast: active) { + #mePanel div.avatar { + cursor: pointer + } +} + +#mePanel div.avatar div.protectionLayer { + height: 100%; + width: 100%; + background-image: url("/images/svg/protMePanel320x320.svg") +} + +@media screen and (-ms-high-contrast: active) { + #mePanel div.avatar div.protectionLayer { + display: none + } +} + +#mePanel div.avatar:hover div.protectionLayer::after { + content: ' '; + display: block; + position: absolute; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.15) +} + +#mePanel div.avatar.DEFAULTAVATAR div.protectionLayer { + display: none +} + +#mePanel div.avatar:focus { + border: 2px solid #00AFF0; + outline: none +} + +#mePanel .win-backbutton { + position: absolute; + top: 35px; + left: 20px; + width: 32px; + height: 32px; + line-height: 28px; + font-size: 12pt +} + +body.RTL #mePanel .win-backbutton { + right: 20px; + left: auto +} + +#mePanel span.name { + top: 29px; + font-weight: bold; + position: absolute; + right: 30px; + left: 70px; + color: white; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden +} + +body.RTL #mePanel span.name { + right: 70px; + left: 30px +} + +@media screen and (-ms-high-contrast: active) { + #mePanel span.name { + background-color: Window + } +} + +#mePanel span.email { + position: absolute; + top: 49px; + right: 30px; + left: 70px; + color: white; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden +} + +body.RTL #mePanel span.email { + right: 70px; + left: 30px +} + +@media screen and (-ms-high-contrast: active) { + #mePanel span.email { + background-color: Window + } +} + +#mePanel div.moodOuterContainer { + transition: bottom .6s ease-in-out +} + +#mePanel div.moodContainer { + position: relative; + margin: 15px; + overflow: hidden +} + +#mePanel div.moodContainer:hover input.emoticonPicker { + opacity: 0.8 +} + +@media screen and (-ms-high-contrast: active) { + #mePanel div.moodContainer { + border: 1px solid WindowText + } +} + +#mePanel textarea.mood { + margin: 0; + padding: 10px 35px 10px 15px; + overflow: hidden; + min-width: 0; + width: 290px +} + +#mePanel textarea.mood.MAXHEIGHT { + overflow: auto +} + +body.RTL #mePanel textarea.mood { + padding: 10px 15px 10px 35px +} + +#mePanel.KEYBOARDUP div.moodSpaceContainer { + min-height: 55px +} + +#mePanel.KEYBOARDUP div.moodOuterContainer { + z-index: 100; + position: absolute; + right: 0; + width: 100%; + background: inherit +} + +#mePanel input.emoticonPicker { + position: absolute; + right: 10px; + top: 10px; + opacity: 0.6; + outline: none; + box-sizing: border-box +} + +@media screen and (-ms-high-contrast: active) { + #mePanel input.emoticonPicker { + opacity: 1.0 + } +} + +#mePanel input.emoticonPicker:hover { + opacity: 0.8 +} + +#mePanel input.emoticonPicker:focus { + box-shadow: 0 0 0 1px WindowText +} + +@media screen and (-ms-high-contrast: active) { + #mePanel input.emoticonPicker:focus { + box-shadow: none; + outline: 1px dotted + } +} + +#mePanel input.emoticonPicker:active { + opacity: 1 +} + +body.RTL #mePanel input.emoticonPicker { + right: auto; + left: 10px +} + +#mePanel ul { + list-style-type: none; + padding: 0; + width: 100% +} + +#mePanel ul.statusContainer li button { + margin-left: 45px; + width: calc(100% - 45px); + text-align: left; + padding: 0 5px 5px 5px; + height: 48px +} + +body.RTL #mePanel ul.statusContainer li button { + text-align: right +} + +#mePanel ul.statusContainer li span.presence { + position: absolute; + display: none; + left: 30px; + top: 22px +} + +#mePanel ul.statusContainer li.selected span.presence { + display: block +} + +body.RTL #mePanel ul.statusContainer li.selected span.presence { + left: auto; + right: 30px +} + +#mePanel ul.linksContainer { + position: absolute; + bottom: 5px; + width: 100%; + border-top: 2px solid #2ebcf1; + margin: 0 +} + +@media screen and (-ms-high-contrast: active) { + #mePanel ul.linksContainer { + border-top: 0px + } +} + +#mePanel ul.linksContainer li { + height: 58px; + position: relative +} + +#mePanel ul.linksContainer li.hidden { + display: none +} + +#mePanel ul.linksContainer li.disabled { + opacity: .5 +} + +#mePanel ul.linksContainer li.signOut span.ico { + transform: scaleX(-1) +} + +#mePanel ul.linksContainer span.ico { + display: inline-block; + position: absolute; + left: 0; + top: 2px +} + +body.RTL #mePanel ul.linksContainer span.ico { + left: auto; + right: 0 +} + +body:not(.RTL) #mePanel ul.linksContainer span.ico, +body.RTL #mePanel ul.linksContainer span.ico { + color: #FFF; + font-family: Skype UI Symbol; + font-weight: bold; + font-size: 28px; + vertical-align: middle; + line-height: 58px; + margin: 0 26px; + width: 1em +} + +#mePanel ul.linksContainer a { + padding: 0; + margin: 0 +} + +#mePanel ul.linksContainer a.label { + display: inline-block; + color: white; + line-height: 58px; + margin-left: 80px; + width: calc(100% - 85px); + padding: 0 0 0 5px +} + +body.RTL #mePanel ul.linksContainer a.label { + margin-left: 0; + margin-right: 80px +} + +@media screen and (-ms-high-contrast: active) { + #mePanel ul.linksContainer a.label { + box-sizing: border-box; + color: windowText + } + #mePanel ul.linksContainer a.label:focus { + outline: none; + border: 1px solid WindowText + } +} + +#mePanel li { + height: 50px; + width: 100%; + position: relative +} + +#mePanel li:hover { + background-color: rgba(0, 0, 0, 0.1) +} + +#mePanel li.active, +#mePanel li.selected.active { + background-color: rgba(0, 0, 0, 0.3) +} + +#mePanel li.selected { + background-color: rgba(0, 0, 0, 0.15) +} + +@media screen and (-ms-high-contrast: active) { + #mePanel li.selected { + -ms-high-contrast-adjust: none + } +} + +#mePanel li button { + line-height: 48px; + color: white; + display: block; + background-color: transparent; + font-weight: 300 +} + +body.RTL #mePanel li button { + margin-left: 0; + margin-right: 30px; + padding-left: 0; + padding-right: 18px +} + +@media screen and (-ms-high-contrast: active) { + #mePanel li button { + color: windowText + } +} + +#mePanel .signOutPanel { + position: absolute; + top: 0px; + bottom: 0px; + right: 0px; + left: 0px; + z-index: 102; + background-color: #00aff0; + color: white; + padding: 85px 20px 0px 20px +} + +#mePanel .signOutPanel>h2.title { + position: absolute; + top: 34px; + left: 65px +} + +body.RTL #mePanel .signOutPanel>h2.title { + right: 65px; + left: auto +} + +#mePanel .signOutPanel>p { + margin-bottom: 20px +} + +#mePanel .signOutPanel div.contactWrapper { + display: -ms-grid; + width: 100%; + height: 50px; + margin-bottom: 35px; + margin-top: 15px; + -ms-grid-rows: 1fr; + white-space: nowrap; + -ms-grid-columns: 50px 10px 1fr +} + +#mePanel .signOutPanel div.contactWrapper div.avatar { + -ms-grid-column: 1; + width: auto; + height: auto; + background-size: cover +} + +#mePanel .signOutPanel div.contactWrapper div.name { + font-weight: bold; + margin-top: 3px; + -ms-grid-column: 3; + -ms-grid-row-align: start; + text-overflow: ellipsis; + overflow: hidden +} + +#mePanel .signOutPanel div.contactWrapper div.username { + margin-bottom: 7px; + -ms-grid-column: 3; + -ms-grid-row-align: end +} + +#mePanel .signOutPanel.hidden { + display: none +} + +div.clickEater.mePanel { + right: 320px; + left: 0 +} + +body.RTL div.clickEater.mePanel { + left: 320px; + right: 0 +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/peopleList.css b/packages/microsoft.skypeapp/controls/peopleList.css index 7078579f..c19effb3 100644 --- a/packages/microsoft.skypeapp/controls/peopleList.css +++ b/packages/microsoft.skypeapp/controls/peopleList.css @@ -1 +1,628 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.contactList div.win-semanticzoom,div.contactList div.zoomContainer{height:100%}div.page.search div.win-listview.contacts div.win-viewport div.win-surface{margin-left:120px}@media screen and (max-aspect-ratio: 1 / 1){div.page.search div.win-listview.contacts div.win-viewport div.win-surface{margin-left:0px}}div.win-listview.contacts,div.win-listview.alphabet{-ms-grid-row:2;-ms-grid-column:1;height:100%}div.win-listview.contacts div.win-viewport div.win-surface,div.win-listview.alphabet div.win-viewport div.win-surface{margin-left:45px}div.win-listview.contacts div.win-viewport div.win-surface div.win-container:hover,div.win-listview.alphabet div.win-viewport div.win-surface div.win-container:hover{outline:none}body.RTL div.win-listview.contacts div.win-viewport div.win-surface,body.RTL div.win-listview.alphabet div.win-viewport div.win-surface{margin-left:0;margin-right:45px}@media screen and (max-aspect-ratio: 1 / 1){body.RTL div.win-listview.contacts div.win-viewport div.win-surface,body.RTL div.win-listview.alphabet div.win-viewport div.win-surface{margin:0;height:100%}}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.contacts div.win-viewport div.win-surface,div.win-listview.alphabet div.win-viewport div.win-surface{margin:0;height:100%}}div.win-listview.contacts div.letter,div.win-listview.alphabet div.letter{background-color:#27a7df;height:80px;width:80px;color:#fff;white-space:nowrap;overflow:hidden}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.contacts div.letter,div.win-listview.alphabet div.letter{width:60px;height:60px}}div.win-listview.contacts div.letter div,div.win-listview.alphabet div.letter div{width:auto;box-sizing:border-box;line-height:70px;display:block;overflow:hidden;text-overflow:ellipsis;text-align:center;vertical-align:middle;padding:0 5px}div.win-listview.contacts div.letter div.tiny,div.win-listview.alphabet div.letter div.tiny{line-height:60px}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.contacts div.letter div,div.win-listview.alphabet div.letter div{line-height:30px;padding-top:20px;text-align:left;margin-left:5px}div.win-listview.contacts div.letter div.tiny,div.win-listview.alphabet div.letter div.tiny{line-height:32px}body.RTL div.win-listview.contacts div.letter div,body.RTL div.win-listview.alphabet div.letter div{text-align:right;margin-left:0;margin-right:10px}}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.contacts div.win-viewport,div.win-listview.contacts div.win-viewport,div.win-listview.alphabet div.win-viewport,div.win-listview.alphabet div.win-viewport{overflow-x:hidden;overflow-y:auto}div.win-listview.contacts body.RTL div.win-listview.contacts div.win-viewport div.win-surface,div.win-listview.contacts body.RTL div.win-listview.alphabet div.win-viewport div.win-surface,div.win-listview.alphabet body.RTL div.win-listview.contacts div.win-viewport div.win-surface,div.win-listview.alphabet body.RTL div.win-listview.alphabet div.win-viewport div.win-surface{margin:0;height:100%}}div.win-listview.contacts div.win-surface{margin-bottom:50px;height:calc(100% - 50px)}div.win-listview.contacts div.win-groupheadercontainer{padding-top:5px}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.contacts div.win-groupheadercontainer{padding-bottom:5px}}div.win-listview.contacts div.win-groupheader{margin:0 5px;padding:0}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.contacts div.win-groupheader{margin-left:20px;margin-right:20px}}div.win-listview.contacts>.win-vertical .win-listlayout .win-container{margin-bottom:5px;margin-top:5px}div.win-listview.contacts div.simpleHeaderItem{margin:0 0 10px;padding:0}div.win-listview.contacts div.simpleHeaderItem h2{text-transform:lowercase;font-weight:bold !important;color:#a2c5d3}div.win-listview.contacts div.win-focusedoutline{top:2px;left:2px;outline:2px solid #000;border:2px solid #FFF;box-sizing:border-box;height:calc(100% - 4px);width:calc(100% - 4px)}body.RTL div.win-listview.contacts div.win-focusedoutline{right:2px;left:auto}div.win-listview.contacts div.win-container{margin:0 20px 0 0}body.RTL div.win-listview.contacts div.win-container{margin:0 0 0 20px}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.contacts div.win-container{padding:0;margin:0 !important}div.win-listview.contacts div.win-container div.win-itembox{margin:0 0 0 15px}body.RTL div.win-listview.contacts div.win-container div.win-itembox{margin:0 15px 0 0}}div.win-listview.contacts div.win-container div.win-item div.contactWrapper{height:90px;width:380px;padding:5px;box-sizing:border-box}div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.avatar{width:80px;height:80px}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.avatar{width:60px;height:60px}}div.win-listview.contacts div.win-container div.win-item div.contactWrapper.BLOCKED div.avatar div.overlay::before{content:'\E20D';display:block;position:absolute;width:80px;height:80px;font-family:"Skype UI Symbol";line-height:normal;background-color:rgba(77,77,77,0.75);color:rgba(255,255,255,0.4);font-size:80px}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.contacts div.win-container div.win-item div.contactWrapper.BLOCKED div.avatar div.overlay::before{width:60px;height:60px;font-size:60px}}div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.title,div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.detail{width:270px;position:absolute;left:104px}body.RTL div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.title,body.RTL div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.detail{left:auto;right:104px}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.title,div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.detail{width:205px;left:80px}body.RTL div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.title,body.RTL div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.detail{left:auto;right:80px}}div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.title{top:15px;font-weight:300}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.title{top:5px}}div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.detail{top:47px}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.detail{top:32px}}div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.title,div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.matchedInfo,div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.statusInfo,div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.status span.mood{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.status[presence='online']{width:265px}body.RTL div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.status[presence='online']{left:auto}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.status[presence='online']{width:200px;left:82px}body.RTL div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.status[presence='online']{left:auto;right:82px}}div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.status[presence='online'] div.presence{display:block}div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.status div.presence{display:none;float:left;margin-top:10px;margin-left:0px;margin-right:5px}body.RTL div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.status div.presence{float:right;margin-left:5px;margin-right:0px}div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.status span.mood{display:inline-block;width:208px;letter-spacing:0px;height:100%;line-height:24px}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.status span.mood{width:178px}}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.contacts div.win-container div.win-item div.contactWrapper{width:300px;height:70px;box-sizing:border-box}}@media screen and (max-aspect-ratio: 1 / 1) and (max-width: 639px){div.win-listview.contacts div.win-container div.win-item div.contactWrapper{width:100%}div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.title.name,div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.matchedName,div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.detail.status,div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.detail{width:calc(100% - 100px)}div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.detail span.mood{width:calc(100% - 20px)}}div.win-listview.contacts div.win-container div.win-item div.contactWrapper:hover{background-color:rgba(0,149,204,0.15)}div.win-listview.contacts div.win-container div.win-item div.letterWrapper{padding:5px}div.win-listview.contacts div.win-container.win-selected div.win-selectionbackground,div.win-listview.contacts div.win-container.win-selected div.win-item{background:#00aded;color:#fff}@media screen and (-ms-high-contrast: active){div.win-listview.contacts div.win-container.win-selected div.win-selectionbackground,div.win-listview.contacts div.win-container.win-selected div.win-item{color:window;background:windowText}}div.win-listview.contacts div.win-container.win-selected div.win-selectionborder,div.win-listview.contacts div.win-container.win-selected:hover div.win-selectionborder{border-color:#00aded}@media screen and (-ms-high-contrast: active){div.win-listview.contacts div.win-container.win-selected div.win-selectionborder,div.win-listview.contacts div.win-container.win-selected:hover div.win-selectionborder{border-color:windowText}}div.win-listview.contacts div.win-container.win-selected.win-focused div.win-item,div.win-listview.contacts div.win-container.win-selected div.win-item:hover{background:#279ccd}div.win-listview.contacts div.win-container.win-selected.win-focused div.win-selectionborder,div.win-listview.contacts div.win-container.win-selected:hover div.win-selectionborder{border-color:#279ccd}div.win-listview.contacts div.win-container.win-selected div.win-selectioncheckmarkbackground{display:none}div.win-listview.contacts div.win-container.win-selected div.win-selectioncheckmark{font-family:"Skype UI Symbol";font-weight:bold;font-size:13px;padding:2px 6px 0}@media screen and (-ms-high-contrast: active){div.win-listview.contacts div.win-container.win-selected div.win-selectioncheckmark{color:window}}@media screen and (-ms-high-contrast: active){div.win-listview.contacts div.win-container.win-selected:hover div.name,div.win-listview.contacts div.win-container.win-selected:hover span.mood,div.win-listview.contacts div.win-container.win-selected:hover div.win-selectioncheckmark{color:windowText}}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.contacts .win-semanticzoom-button{bottom:4px}div.win-listview.contacts .win-semanticzoom-button-location.rtl{left:21px}div.win-listview.contacts .win-semanticzoom-button-location.ltr{right:21px}div.win-listview.contacts div.win-item div.letterWrapper,div.win-listview.contacts div.contactWrapper{width:320px;height:70px;box-sizing:border-box}}@media screen and (max-aspect-ratio: 1 / 1) and (max-width: 639px){div.win-listview.contacts div.win-groupheader{width:calc(100% - 40px)}div.win-listview.contacts>.win-vertical div.win-item{display:block;height:70px;width:calc(100% - 40px)}div.win-listview.contacts>.win-vertical div.win-focusedoutline{width:calc(100% - 44px)}}div.win-listview.alphabet div.win-viewport div.win-surface{margin-top:35px;margin-bottom:100px;height:calc(100% - 35px - 100px);margin-left:116px}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.alphabet div.win-viewport div.win-surface{margin:35px 10px 0 20px}body.RTL div.win-listview.alphabet div.win-viewport div.win-surface{margin:35px 20px 0 10px}}div.win-listview.alphabet div.win-container{margin-right:15px}body.RTL div.win-listview.alphabet div.win-container{margin-left:15px}div.win-listview.alphabet div.win-container div.win-item div.letterWrapper{position:relative;overflow:hidden;box-sizing:border-box;height:70px;width:170px}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.alphabet div.win-container div.win-item div.letterWrapper{height:55px;width:90px}}div.win-listview.alphabet div.win-container div.win-item div.letterWrapper div.letter{width:100%;background-color:#b3e7fb}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.alphabet div.win-container div.win-item div.letterWrapper div.letter{height:100%}}div.win-listview.alphabet div.win-container div.win-item div.letterWrapper div.letter.used{background-color:#27a7df}div.win-listview.alphabet div.win-container div.win-item div.letterWrapper div.letter div{box-sizing:border-box;width:100%;overflow:hidden;line-height:50px;padding:18px 10px 0;text-align:left}body.RTL div.win-listview.alphabet div.win-container div.win-item div.letterWrapper div.letter div{text-align:right}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.alphabet div.win-container div.win-item div.letterWrapper div.letter div{padding-top:6px}}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.alphabet div.win-container{margin:0 5px 5px 0;width:90px}body.RTL div.win-listview.alphabet div.win-container{margin:0 0 5px 5px}}@media screen and (max-aspect-ratio: 1 / 1){div.win-listview.alphabet{margin-top:5px}}@media screen and (max-aspect-ratio: 1 / 1) and (min-height: 1024px) and (min-width: 500px){div.contactList div.win-surface{margin:0 0 0 56px}body.RTL div.contactList div.win-surface{margin:0 56px 0 0}}@media screen and (max-device-aspect-ratio: 1 / 1){div.peoplePicker h1{margin-left:120px}body.RTL div.peoplePicker h1{margin-left:0px;margin-right:120px}}@media screen and (-ms-high-contrast: active){div.fragment.contacts div.contacts div.win-container:not(.win-selected) div.win-item:hover div.contactWrapper{background:none;border:2px solid Highlight}div.fragment.contacts div.contacts div.contactWrapper div.avatar{-ms-high-contrast-adjust:none}div.alphabet.win-listview div.win-container div.win-item div.letterWrapper div.letter{border:1px solid WindowText;width:calc(100% - 2px);height:calc(100% - 2px)}div.alphabet.win-listview div.win-container div.win-item div.letterWrapper div.letter:not(.used){border-color:GrayText;color:GrayText}div.alphabet.win-listview div.win-container div.win-item:hover div.letterWrapper div.letter.used{border:4px solid Highlight;width:calc(100% - 8px);height:calc(100% - 8px)}div.alphabet.win-listview div.win-container div.win-item:hover div.letterWrapper div.letter.used div{padding:15px 7px 0 7px}div.alphabet .win-focusedoutline{left:2px;top:2px;width:calc(100% - 4px);height:calc(100% - 4px)}}@media screen and (max-aspect-ratio: 1 / 1) and (-ms-high-contrast: active){div.alphabet.win-listview div.win-container div.win-item:hover div.letterWrapper div.letter.used div{padding-top:3px}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.contactList div.win-semanticzoom, +div.contactList div.zoomContainer { + height: 100% +} + +div.page.search div.win-listview.contacts div.win-viewport div.win-surface { + margin-left: 120px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.page.search div.win-listview.contacts div.win-viewport div.win-surface { + margin-left: 0px + } +} + +div.win-listview.contacts, +div.win-listview.alphabet { + -ms-grid-row: 2; + -ms-grid-column: 1; + height: 100% +} + +div.win-listview.contacts div.win-viewport div.win-surface, +div.win-listview.alphabet div.win-viewport div.win-surface { + margin-left: 45px +} + +div.win-listview.contacts div.win-viewport div.win-surface div.win-container:hover, +div.win-listview.alphabet div.win-viewport div.win-surface div.win-container:hover { + outline: none +} + +body.RTL div.win-listview.contacts div.win-viewport div.win-surface, +body.RTL div.win-listview.alphabet div.win-viewport div.win-surface { + margin-left: 0; + margin-right: 45px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + body.RTL div.win-listview.contacts div.win-viewport div.win-surface, + body.RTL div.win-listview.alphabet div.win-viewport div.win-surface { + margin: 0; + height: 100% + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.contacts div.win-viewport div.win-surface, + div.win-listview.alphabet div.win-viewport div.win-surface { + margin: 0; + height: 100% + } +} + +div.win-listview.contacts div.letter, +div.win-listview.alphabet div.letter { + background-color: #27a7df; + height: 80px; + width: 80px; + color: #fff; + white-space: nowrap; + overflow: hidden +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.contacts div.letter, + div.win-listview.alphabet div.letter { + width: 60px; + height: 60px + } +} + +div.win-listview.contacts div.letter div, +div.win-listview.alphabet div.letter div { + width: auto; + box-sizing: border-box; + line-height: 70px; + display: block; + overflow: hidden; + text-overflow: ellipsis; + text-align: center; + vertical-align: middle; + padding: 0 5px +} + +div.win-listview.contacts div.letter div.tiny, +div.win-listview.alphabet div.letter div.tiny { + line-height: 60px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.contacts div.letter div, + div.win-listview.alphabet div.letter div { + line-height: 30px; + padding-top: 20px; + text-align: left; + margin-left: 5px + } + div.win-listview.contacts div.letter div.tiny, + div.win-listview.alphabet div.letter div.tiny { + line-height: 32px + } + body.RTL div.win-listview.contacts div.letter div, + body.RTL div.win-listview.alphabet div.letter div { + text-align: right; + margin-left: 0; + margin-right: 10px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.contacts div.win-viewport, + div.win-listview.contacts div.win-viewport, + div.win-listview.alphabet div.win-viewport, + div.win-listview.alphabet div.win-viewport { + overflow-x: hidden; + overflow-y: auto + } + div.win-listview.contacts body.RTL div.win-listview.contacts div.win-viewport div.win-surface, + div.win-listview.contacts body.RTL div.win-listview.alphabet div.win-viewport div.win-surface, + div.win-listview.alphabet body.RTL div.win-listview.contacts div.win-viewport div.win-surface, + div.win-listview.alphabet body.RTL div.win-listview.alphabet div.win-viewport div.win-surface { + margin: 0; + height: 100% + } +} + +div.win-listview.contacts div.win-surface { + margin-bottom: 50px; + height: calc(100% - 50px) +} + +div.win-listview.contacts div.win-groupheadercontainer { + padding-top: 5px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.contacts div.win-groupheadercontainer { + padding-bottom: 5px + } +} + +div.win-listview.contacts div.win-groupheader { + margin: 0 5px; + padding: 0 +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.contacts div.win-groupheader { + margin-left: 20px; + margin-right: 20px + } +} + +div.win-listview.contacts>.win-vertical .win-listlayout .win-container { + margin-bottom: 5px; + margin-top: 5px +} + +div.win-listview.contacts div.simpleHeaderItem { + margin: 0 0 10px; + padding: 0 +} + +div.win-listview.contacts div.simpleHeaderItem h2 { + text-transform: lowercase; + font-weight: bold !important; + color: #a2c5d3 +} + +div.win-listview.contacts div.win-focusedoutline { + top: 2px; + left: 2px; + outline: 2px solid #000; + border: 2px solid #FFF; + box-sizing: border-box; + height: calc(100% - 4px); + width: calc(100% - 4px) +} + +body.RTL div.win-listview.contacts div.win-focusedoutline { + right: 2px; + left: auto +} + +div.win-listview.contacts div.win-container { + margin: 0 20px 0 0 +} + +body.RTL div.win-listview.contacts div.win-container { + margin: 0 0 0 20px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.contacts div.win-container { + padding: 0; + margin: 0 !important + } + div.win-listview.contacts div.win-container div.win-itembox { + margin: 0 0 0 15px + } + body.RTL div.win-listview.contacts div.win-container div.win-itembox { + margin: 0 15px 0 0 + } +} + +div.win-listview.contacts div.win-container div.win-item div.contactWrapper { + height: 90px; + width: 380px; + padding: 5px; + box-sizing: border-box +} + +div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.avatar { + width: 80px; + height: 80px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.avatar { + width: 60px; + height: 60px + } +} + +div.win-listview.contacts div.win-container div.win-item div.contactWrapper.BLOCKED div.avatar div.overlay::before { + content: '\E20D'; + display: block; + position: absolute; + width: 80px; + height: 80px; + font-family: "Skype UI Symbol" !important; + line-height: normal; + background-color: rgba(77, 77, 77, 0.75); + color: rgba(255, 255, 255, 0.4); + font-size: 80px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.contacts div.win-container div.win-item div.contactWrapper.BLOCKED div.avatar div.overlay::before { + width: 60px; + height: 60px; + font-size: 60px + } +} + +div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.title, +div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.detail { + width: 270px; + position: absolute; + left: 104px +} + +body.RTL div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.title, +body.RTL div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.detail { + left: auto; + right: 104px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.title, + div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.detail { + width: 205px; + left: 80px + } + body.RTL div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.title, + body.RTL div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.detail { + left: auto; + right: 80px + } +} + +div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.title { + top: 15px; + font-weight: 300 +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.title { + top: 5px + } +} + +div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.detail { + top: 47px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.detail { + top: 32px + } +} + +div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.title, +div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.matchedInfo, +div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.statusInfo, +div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.status span.mood { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis +} + +div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.status[presence='online'] { + width: 265px +} + +body.RTL div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.status[presence='online'] { + left: auto +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.status[presence='online'] { + width: 200px; + left: 82px + } + body.RTL div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.status[presence='online'] { + left: auto; + right: 82px + } +} + +div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.status[presence='online'] div.presence { + display: block +} + +div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.status div.presence { + display: none; + float: left; + margin-top: 10px; + margin-left: 0px; + margin-right: 5px +} + +body.RTL div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.status div.presence { + float: right; + margin-left: 5px; + margin-right: 0px +} + +div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.status span.mood { + display: inline-block; + width: 208px; + letter-spacing: 0px; + height: 100%; + line-height: 24px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.status span.mood { + width: 178px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.contacts div.win-container div.win-item div.contactWrapper { + width: 300px; + height: 70px; + box-sizing: border-box + } +} + +@media screen and (max-aspect-ratio: 1 / 1) and (max-width: 639px) { + div.win-listview.contacts div.win-container div.win-item div.contactWrapper { + width: 100% + } + div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.title.name, + div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.matchedName, + div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.detail.status, + div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.detail { + width: calc(100% - 100px) + } + div.win-listview.contacts div.win-container div.win-item div.contactWrapper div.detail span.mood { + width: calc(100% - 20px) + } +} + +div.win-listview.contacts div.win-container div.win-item div.contactWrapper:hover { + background-color: rgba(0, 149, 204, 0.15) +} + +div.win-listview.contacts div.win-container div.win-item div.letterWrapper { + padding: 5px +} + +div.win-listview.contacts div.win-container.win-selected div.win-selectionbackground, +div.win-listview.contacts div.win-container.win-selected div.win-item { + background: #00aded; + color: #fff +} + +@media screen and (-ms-high-contrast: active) { + div.win-listview.contacts div.win-container.win-selected div.win-selectionbackground, + div.win-listview.contacts div.win-container.win-selected div.win-item { + color: window; + background: windowText + } +} + +div.win-listview.contacts div.win-container.win-selected div.win-selectionborder, +div.win-listview.contacts div.win-container.win-selected:hover div.win-selectionborder { + border-color: #00aded +} + +@media screen and (-ms-high-contrast: active) { + div.win-listview.contacts div.win-container.win-selected div.win-selectionborder, + div.win-listview.contacts div.win-container.win-selected:hover div.win-selectionborder { + border-color: windowText + } +} + +div.win-listview.contacts div.win-container.win-selected.win-focused div.win-item, +div.win-listview.contacts div.win-container.win-selected div.win-item:hover { + background: #279ccd +} + +div.win-listview.contacts div.win-container.win-selected.win-focused div.win-selectionborder, +div.win-listview.contacts div.win-container.win-selected:hover div.win-selectionborder { + border-color: #279ccd +} + +div.win-listview.contacts div.win-container.win-selected div.win-selectioncheckmarkbackground { + display: none +} + +div.win-listview.contacts div.win-container.win-selected div.win-selectioncheckmark { + font-family: "Skype UI Symbol" !important; + font-weight: bold; + font-size: 13px; + padding: 2px 6px 0 +} + +@media screen and (-ms-high-contrast: active) { + div.win-listview.contacts div.win-container.win-selected div.win-selectioncheckmark { + color: window + } +} + +@media screen and (-ms-high-contrast: active) { + div.win-listview.contacts div.win-container.win-selected:hover div.name, + div.win-listview.contacts div.win-container.win-selected:hover span.mood, + div.win-listview.contacts div.win-container.win-selected:hover div.win-selectioncheckmark { + color: windowText + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.contacts .win-semanticzoom-button { + bottom: 4px + } + div.win-listview.contacts .win-semanticzoom-button-location.rtl { + left: 21px + } + div.win-listview.contacts .win-semanticzoom-button-location.ltr { + right: 21px + } + div.win-listview.contacts div.win-item div.letterWrapper, + div.win-listview.contacts div.contactWrapper { + width: 320px; + height: 70px; + box-sizing: border-box + } +} + +@media screen and (max-aspect-ratio: 1 / 1) and (max-width: 639px) { + div.win-listview.contacts div.win-groupheader { + width: calc(100% - 40px) + } + div.win-listview.contacts>.win-vertical div.win-item { + display: block; + height: 70px; + width: calc(100% - 40px) + } + div.win-listview.contacts>.win-vertical div.win-focusedoutline { + width: calc(100% - 44px) + } +} + +div.win-listview.alphabet div.win-viewport div.win-surface { + margin-top: 35px; + margin-bottom: 100px; + height: calc(100% - 35px - 100px); + margin-left: 116px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.alphabet div.win-viewport div.win-surface { + margin: 35px 10px 0 20px + } + body.RTL div.win-listview.alphabet div.win-viewport div.win-surface { + margin: 35px 20px 0 10px + } +} + +div.win-listview.alphabet div.win-container { + margin-right: 15px +} + +body.RTL div.win-listview.alphabet div.win-container { + margin-left: 15px +} + +div.win-listview.alphabet div.win-container div.win-item div.letterWrapper { + position: relative; + overflow: hidden; + box-sizing: border-box; + height: 70px; + width: 170px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.alphabet div.win-container div.win-item div.letterWrapper { + height: 55px; + width: 90px + } +} + +div.win-listview.alphabet div.win-container div.win-item div.letterWrapper div.letter { + width: 100%; + background-color: #b3e7fb +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.alphabet div.win-container div.win-item div.letterWrapper div.letter { + height: 100% + } +} + +div.win-listview.alphabet div.win-container div.win-item div.letterWrapper div.letter.used { + background-color: #27a7df +} + +div.win-listview.alphabet div.win-container div.win-item div.letterWrapper div.letter div { + box-sizing: border-box; + width: 100%; + overflow: hidden; + line-height: 50px; + padding: 18px 10px 0; + text-align: left +} + +body.RTL div.win-listview.alphabet div.win-container div.win-item div.letterWrapper div.letter div { + text-align: right +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.alphabet div.win-container div.win-item div.letterWrapper div.letter div { + padding-top: 6px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.alphabet div.win-container { + margin: 0 5px 5px 0; + width: 90px + } + body.RTL div.win-listview.alphabet div.win-container { + margin: 0 0 5px 5px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.win-listview.alphabet { + margin-top: 5px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) and (min-height: 1024px) and (min-width: 500px) { + div.contactList div.win-surface { + margin: 0 0 0 56px + } + body.RTL div.contactList div.win-surface { + margin: 0 56px 0 0 + } +} + +@media screen and (max-device-aspect-ratio: 1 / 1) { + div.peoplePicker h1 { + margin-left: 120px + } + body.RTL div.peoplePicker h1 { + margin-left: 0px; + margin-right: 120px + } +} + +@media screen and (-ms-high-contrast: active) { + div.fragment.contacts div.contacts div.win-container:not(.win-selected) div.win-item:hover div.contactWrapper { + background: none; + border: 2px solid Highlight + } + div.fragment.contacts div.contacts div.contactWrapper div.avatar { + -ms-high-contrast-adjust: none + } + div.alphabet.win-listview div.win-container div.win-item div.letterWrapper div.letter { + border: 1px solid WindowText; + width: calc(100% - 2px); + height: calc(100% - 2px) + } + div.alphabet.win-listview div.win-container div.win-item div.letterWrapper div.letter:not(.used) { + border-color: GrayText; + color: GrayText + } + div.alphabet.win-listview div.win-container div.win-item:hover div.letterWrapper div.letter.used { + border: 4px solid Highlight; + width: calc(100% - 8px); + height: calc(100% - 8px) + } + div.alphabet.win-listview div.win-container div.win-item:hover div.letterWrapper div.letter.used div { + padding: 15px 7px 0 7px + } + div.alphabet .win-focusedoutline { + left: 2px; + top: 2px; + width: calc(100% - 4px); + height: calc(100% - 4px) + } +} + +@media screen and (max-aspect-ratio: 1 / 1) and (-ms-high-contrast: active) { + div.alphabet.win-listview div.win-container div.win-item:hover div.letterWrapper div.letter.used div { + padding-top: 3px + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/peoplePicker.css b/packages/microsoft.skypeapp/controls/peoplePicker.css index 9c0a0faa..af98cc71 100644 --- a/packages/microsoft.skypeapp/controls/peoplePicker.css +++ b/packages/microsoft.skypeapp/controls/peoplePicker.css @@ -1 +1,404 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.peoplePicker{display:none;position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:999;background-color:white}body.PICKERACTIVE div.peoplePicker{display:block}div.peoplePicker .animRegion{opacity:1}div.peoplePicker header{height:120px;background:#00AFF0}div.peoplePicker h1{color:#FFF;margin-left:120px;padding-top:40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:90%;line-height:74px}@media screen and (max-aspect-ratio: 1 / 1) and (min-height: 1024px) and (max-width: 750px){div.peoplePicker h1{margin-left:20px}}body.RTL div.peoplePicker h1{margin-left:0;margin-right:120px}@media screen and (max-aspect-ratio: 1 / 1) and (min-height: 1024px) and (max-width: 750px){body.RTL div.peoplePicker h1{margin-right:20px}}div.peoplePicker div.win-item div.favouriteWrapper div.message{max-height:160px;padding:10px;background-color:#f05a28;color:#fff;overflow:hidden;font-size:20px;line-height:24px}div.peoplePicker div.win-item div.favouriteWrapper div.message:empty{-ms-transition:all 0.3s ease-out;display:none}div.peoplePicker .contactList{height:100%;min-height:100px}div.peoplePicker div.contactList div.zoomContainer{-ms-grid-row:2;-ms-grid-column:1;height:calc(100% - 238px)}div.peoplePicker div.contacts div.win-surface{margin-top:35px;height:calc(100% - 35px);margin-bottom:0}div.peoplePicker div.alphabet div.win-surface{height:calc(100% - 35px);margin-bottom:0px}div.peoplePicker div.selectedContactsContainer{position:absolute;bottom:0;left:0px;right:0px;height:120px;background:#00AFF0;padding-left:115px;display:-ms-flexbox}body.RTL div.peoplePicker div.selectedContactsContainer{padding-left:0;padding-right:115px}div.peoplePicker div.selectedContacts.list{height:inherit;color:white;-ms-flex:1 1 auto}div.peoplePicker div.selectedContactsContainer>button{margin:35px 20px 0 20px;font-weight:normal;min-width:110px;text-overflow:ellipsis;line-height:0.9em}div.peoplePicker div.selectedContactsContainer>button:last-child{margin-left:0}body.RTL div.peoplePicker div.selectedContactsContainer>button:last-child{margin-left:20px;margin-right:0}div.peoplePicker div.selectedContactsContainer div.win-container{background:transparent}div.peoplePicker div.selectedContactsContainer button.cancel,div.peoplePicker div.selectedContactsContainer button.cancel::selection{background:#00aff0;border:2px solid #b9e4f4;color:white;cursor:default;padding:0px 30px;height:40px;border-radius:20px}div.peoplePicker div.selectedContactsContainer button.cancel:hover{background-color:#0182b3}div.peoplePicker div.selectedContactsContainer button.cancel:active{background-color:#015c80}div.peoplePicker div.selectedContacts.list.win-listview div.win-container{margin:0}div.peoplePicker div.selectedContacts.list.win-listview div.win-container:hover{outline:none}div.peoplePicker div.selectedContacts.list div.item{width:210px;height:118px;position:relative}div.peoplePicker div.selectedContacts.list div.item span.availability.AVAILABLE{display:inline-block;margin-right:6px}body.RTL div.peoplePicker div.selectedContacts.list div.item span.availability.AVAILABLE{margin-right:0;margin-left:6px}div.peoplePicker div.selectedContacts.list div.item div.avatar{height:40px;width:40px;display:block;position:absolute;top:35px;left:0;z-index:10;background-size:cover;background-position:center}body.RTL div.peoplePicker div.selectedContacts.list div.item div.avatar{left:auto;right:0}div.peoplePicker div.selectedContacts.list div.item div.content{position:absolute;top:28px;left:56px;text-overflow:ellipsis;overflow:hidden;z-index:15;min-height:2em}body.RTL div.peoplePicker div.selectedContacts.list div.item div.content{left:auto;right:56px}div.peoplePicker div.selectedContacts.list div.item div.content .name,div.peoplePicker div.selectedContacts.list div.item div.content .moodMessage{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:140px}div.peoplePicker div.selectedContacts.list div.item div.content .name{line-height:28px}div.peoplePicker div.selectedContacts.list div.item div.content .moodMessage{margin-top:-4px;line-height:24px}div.peoplePicker div.selectedContacts.list div.item div.content .presence{vertical-align:top;line-height:24px}@media screen and (max-aspect-ratio: 1 / 1) and (min-height: 1024px) and (min-width: 750px){div.peoplePicker div.contacts.win-listview:not(.win-groups) div.win-viewport div.win-surface,div.peoplePicker div.alphabet.win-listview:not(.win-groups) div.win-viewport div.win-surface{margin-top:20px}div.peoplePicker .win-groups.win-listview>.win-vertical .win-gridlayout.win-surface{margin:-45px 0 0 100px}body.RTL div.peoplePicker .win-groups.win-listview>.win-vertical .win-gridlayout.win-surface{margin:-45px 100px 0 0}}@media screen and (max-aspect-ratio: 1 / 1) and (max-height: 1023px), screen and (max-aspect-ratio: 1 / 1) and (min-height: 1024px) and (max-width: 499px){div.peoplePicker header h1{margin:0 0 0 20px}body.RTL div.peoplePicker header h1{margin:0 20px 0 0}div.peoplePicker div.contacts.win-listview{height:98%;margin:0}div.peoplePicker div.contacts.win-listview.win-groups div.win-surface{margin-top:-50px !important}div.peoplePicker div.contacts.win-listview div.win-surface{margin-top:20px !important}div.peoplePicker div.contacts.win-listview div.win-surface div.win-item{display:block;height:70px;width:300px}div.peoplePicker div.contacts.win-listview div.win-surface div.win-focusedoutline{width:calc(100% - 24px)}div.peoplePicker div.alphabet.win-listview{margin:0}div.peoplePicker div.alphabet.win-listview div.win-viewport div.win-surface{margin-top:20px !important}div.peoplePicker div.win-itembox.win-selected{width:auto}div.peoplePicker div.alphabet div.win-item,div.peoplePicker div.alphabet div.win-item div.letterWrapper{height:55px;width:90px;margin:0}div.peoplePicker div.favouriteWrapper div.presence{height:140px}div.peoplePicker div.win-item div.favouriteWrapper div.name{margin-top:-2px;width:70px;padding:0px}div.peoplePicker div.win-item div.favouriteWrapper div.message{display:none}}@media screen and (max-aspect-ratio: 1 / 1) and (max-width: 639px){div.peoplePicker div.contacts.win-listview div.win-container div.win-itembox{margin:0 25px 0 15px}body.RTL div.peoplePicker div.contacts.win-listview div.win-container div.win-itembox{margin:0 15px 0 25px}div.peoplePicker div.contacts.win-listview div.win-container div.win-itembox div.win-item{width:auto}}@media screen and (max-aspect-ratio: 1 / 1){.peoplePicker .contacts.win-listview div.win-container div.win-itembox{width:auto;margin:0 0 0 15px}body.RTL .peoplePicker .contacts.win-listview div.win-container div.win-itembox{margin:0 15px 0 0}.peoplePicker .contacts.win-listview div.win-groupheader{margin:0 0 0 20px}body.RTL .peoplePicker .contacts.win-listview div.win-groupheader{margin:0 20px 0 0}}@media screen and (max-aspect-ratio: 1 / 1){.peoplePicker .win-listview .win-itemsblock,.peoplePicker .win-listview .win-itemscontainer{overflow:visible}div.peoplePicker div.selectedContactsContainer{-ms-flex-wrap:wrap;-ms-flex-line-pack:start;padding-left:25px;padding-right:15px;height:135px}body.RTL div.peoplePicker div.selectedContactsContainer{-ms-flex-wrap:wrap;-ms-flex-line-pack:start;padding-left:15px;padding-right:25px}div.peoplePicker div.selectedContacts.list{height:70px;-ms-flex:1 1 100%}div.peoplePicker div.selectedContacts.list div.item{height:59px}div.peoplePicker div.selectedContacts.list div.item div.avatar{top:15px}div.peoplePicker div.selectedContacts.list div.item div.content{top:8px}div.peoplePicker div.selectedContactsContainer>button{margin-top:4px;-ms-flex:0 0 10%}div.peoplePicker div.selectedContactsContainer button.text{margin-left:auto}div.peoplePicker div.selectedContactsContainer button.cancel{margin-left:0;margin-right:auto}body.RTL div.peoplePicker div.selectedContactsContainer button.text{margin-left:0;margin-right:auto}body.RTL div.peoplePicker div.selectedContactsContainer button.cancel{margin-left:auto;margin-right:20px}}@media screen and (-ms-high-contrast: active){div.peoplePicker div.win-container:not(.win-selected) div.win-item:hover div.contactWrapper{background:none;border:2px solid Highlight}div.peoplePicker div.contacts div.contactWrapper div.avatar,div.peoplePicker div.selectedContacts.list div.item div.avatar{-ms-high-contrast-adjust:none}div.peoplePicker div.selectedContactsContainer>button{background-color:ButtonFace;color:ButtonText;border:2px solid ButtonText}div.peoplePicker div.selectedContactsContainer>button:hover:not([disabled]){background-color:Highlight;color:HighlightText}div.peoplePicker div.selectedContactsContainer>button[disabled]{border-color:GrayText;color:GrayText}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.peoplePicker { + display: none; + position: fixed; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + z-index: 999; + background-color: white +} + +body.PICKERACTIVE div.peoplePicker { + display: block +} + +div.peoplePicker .animRegion { + opacity: 1 +} + +div.peoplePicker header { + height: 120px; + background: #00AFF0 +} + +div.peoplePicker h1 { + color: #FFF; + margin-left: 120px; + padding-top: 40px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 90%; + line-height: 74px +} + +@media screen and (max-aspect-ratio: 1 / 1) and (min-height: 1024px) and (max-width: 750px) { + div.peoplePicker h1 { + margin-left: 20px + } +} + +body.RTL div.peoplePicker h1 { + margin-left: 0; + margin-right: 120px +} + +@media screen and (max-aspect-ratio: 1 / 1) and (min-height: 1024px) and (max-width: 750px) { + body.RTL div.peoplePicker h1 { + margin-right: 20px + } +} + +div.peoplePicker div.win-item div.favouriteWrapper div.message { + max-height: 160px; + padding: 10px; + background-color: #f05a28; + color: #fff; + overflow: hidden; + font-size: 20px; + line-height: 24px +} + +div.peoplePicker div.win-item div.favouriteWrapper div.message:empty { + -ms-transition: all 0.3s ease-out; + display: none +} + +div.peoplePicker .contactList { + height: 100%; + min-height: 100px +} + +div.peoplePicker div.contactList div.zoomContainer { + -ms-grid-row: 2; + -ms-grid-column: 1; + height: calc(100% - 238px) +} + +div.peoplePicker div.contacts div.win-surface { + margin-top: 35px; + height: calc(100% - 35px); + margin-bottom: 0 +} + +div.peoplePicker div.alphabet div.win-surface { + height: calc(100% - 35px); + margin-bottom: 0px +} + +div.peoplePicker div.selectedContactsContainer { + position: absolute; + bottom: 0; + left: 0px; + right: 0px; + height: 120px; + background: #00AFF0; + padding-left: 115px; + display: -ms-flexbox +} + +body.RTL div.peoplePicker div.selectedContactsContainer { + padding-left: 0; + padding-right: 115px +} + +div.peoplePicker div.selectedContacts.list { + height: inherit; + color: white; + -ms-flex: 1 1 auto +} + +div.peoplePicker div.selectedContactsContainer>button { + margin: 35px 20px 0 20px; + font-weight: normal; + min-width: 110px; + text-overflow: ellipsis; + line-height: 0.9em +} + +div.peoplePicker div.selectedContactsContainer>button:last-child { + margin-left: 0 +} + +body.RTL div.peoplePicker div.selectedContactsContainer>button:last-child { + margin-left: 20px; + margin-right: 0 +} + +div.peoplePicker div.selectedContactsContainer div.win-container { + background: transparent +} + +div.peoplePicker div.selectedContactsContainer button.cancel, +div.peoplePicker div.selectedContactsContainer button.cancel::selection { + background: #00aff0; + border: 2px solid #b9e4f4; + color: white; + cursor: default; + padding: 0px 30px; + height: 40px; + border-radius: 20px +} + +div.peoplePicker div.selectedContactsContainer button.cancel:hover { + background-color: #0182b3 +} + +div.peoplePicker div.selectedContactsContainer button.cancel:active { + background-color: #015c80 +} + +div.peoplePicker div.selectedContacts.list.win-listview div.win-container { + margin: 0 +} + +div.peoplePicker div.selectedContacts.list.win-listview div.win-container:hover { + outline: none +} + +div.peoplePicker div.selectedContacts.list div.item { + width: 210px; + height: 118px; + position: relative +} + +div.peoplePicker div.selectedContacts.list div.item span.availability.AVAILABLE { + display: inline-block; + margin-right: 6px +} + +body.RTL div.peoplePicker div.selectedContacts.list div.item span.availability.AVAILABLE { + margin-right: 0; + margin-left: 6px +} + +div.peoplePicker div.selectedContacts.list div.item div.avatar { + height: 40px; + width: 40px; + display: block; + position: absolute; + top: 35px; + left: 0; + z-index: 10; + background-size: cover; + background-position: center +} + +body.RTL div.peoplePicker div.selectedContacts.list div.item div.avatar { + left: auto; + right: 0 +} + +div.peoplePicker div.selectedContacts.list div.item div.content { + position: absolute; + top: 28px; + left: 56px; + text-overflow: ellipsis; + overflow: hidden; + z-index: 15; + min-height: 2em +} + +body.RTL div.peoplePicker div.selectedContacts.list div.item div.content { + left: auto; + right: 56px +} + +div.peoplePicker div.selectedContacts.list div.item div.content .name, +div.peoplePicker div.selectedContacts.list div.item div.content .moodMessage { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + width: 140px +} + +div.peoplePicker div.selectedContacts.list div.item div.content .name { + line-height: 28px +} + +div.peoplePicker div.selectedContacts.list div.item div.content .moodMessage { + margin-top: -4px; + line-height: 24px +} + +div.peoplePicker div.selectedContacts.list div.item div.content .presence { + vertical-align: top; + line-height: 24px +} + +@media screen and (max-aspect-ratio: 1 / 1) and (min-height: 1024px) and (min-width: 750px) { + div.peoplePicker div.contacts.win-listview:not(.win-groups) div.win-viewport div.win-surface, + div.peoplePicker div.alphabet.win-listview:not(.win-groups) div.win-viewport div.win-surface { + margin-top: 20px + } + div.peoplePicker .win-groups.win-listview>.win-vertical .win-gridlayout.win-surface { + margin: -45px 0 0 100px + } + body.RTL div.peoplePicker .win-groups.win-listview>.win-vertical .win-gridlayout.win-surface { + margin: -45px 100px 0 0 + } +} + +@media screen and (max-aspect-ratio: 1 / 1) and (max-height: 1023px), +screen and (max-aspect-ratio: 1 / 1) and (min-height: 1024px) and (max-width: 499px) { + div.peoplePicker header h1 { + margin: 0 0 0 20px + } + body.RTL div.peoplePicker header h1 { + margin: 0 20px 0 0 + } + div.peoplePicker div.contacts.win-listview { + height: 98%; + margin: 0 + } + div.peoplePicker div.contacts.win-listview.win-groups div.win-surface { + margin-top: -50px !important + } + div.peoplePicker div.contacts.win-listview div.win-surface { + margin-top: 20px !important + } + div.peoplePicker div.contacts.win-listview div.win-surface div.win-item { + display: block; + height: 70px; + width: 300px + } + div.peoplePicker div.contacts.win-listview div.win-surface div.win-focusedoutline { + width: calc(100% - 24px) + } + div.peoplePicker div.alphabet.win-listview { + margin: 0 + } + div.peoplePicker div.alphabet.win-listview div.win-viewport div.win-surface { + margin-top: 20px !important + } + div.peoplePicker div.win-itembox.win-selected { + width: auto + } + div.peoplePicker div.alphabet div.win-item, + div.peoplePicker div.alphabet div.win-item div.letterWrapper { + height: 55px; + width: 90px; + margin: 0 + } + div.peoplePicker div.favouriteWrapper div.presence { + height: 140px + } + div.peoplePicker div.win-item div.favouriteWrapper div.name { + margin-top: -2px; + width: 70px; + padding: 0px + } + div.peoplePicker div.win-item div.favouriteWrapper div.message { + display: none + } +} + +@media screen and (max-aspect-ratio: 1 / 1) and (max-width: 639px) { + div.peoplePicker div.contacts.win-listview div.win-container div.win-itembox { + margin: 0 25px 0 15px + } + body.RTL div.peoplePicker div.contacts.win-listview div.win-container div.win-itembox { + margin: 0 15px 0 25px + } + div.peoplePicker div.contacts.win-listview div.win-container div.win-itembox div.win-item { + width: auto + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + .peoplePicker .contacts.win-listview div.win-container div.win-itembox { + width: auto; + margin: 0 0 0 15px + } + body.RTL .peoplePicker .contacts.win-listview div.win-container div.win-itembox { + margin: 0 15px 0 0 + } + .peoplePicker .contacts.win-listview div.win-groupheader { + margin: 0 0 0 20px + } + body.RTL .peoplePicker .contacts.win-listview div.win-groupheader { + margin: 0 20px 0 0 + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + .peoplePicker .win-listview .win-itemsblock, + .peoplePicker .win-listview .win-itemscontainer { + overflow: visible + } + div.peoplePicker div.selectedContactsContainer { + -ms-flex-wrap: wrap; + -ms-flex-line-pack: start; + padding-left: 25px; + padding-right: 15px; + height: 135px + } + body.RTL div.peoplePicker div.selectedContactsContainer { + -ms-flex-wrap: wrap; + -ms-flex-line-pack: start; + padding-left: 15px; + padding-right: 25px + } + div.peoplePicker div.selectedContacts.list { + height: 70px; + -ms-flex: 1 1 100% + } + div.peoplePicker div.selectedContacts.list div.item { + height: 59px + } + div.peoplePicker div.selectedContacts.list div.item div.avatar { + top: 15px + } + div.peoplePicker div.selectedContacts.list div.item div.content { + top: 8px + } + div.peoplePicker div.selectedContactsContainer>button { + margin-top: 4px; + -ms-flex: 0 0 10% + } + div.peoplePicker div.selectedContactsContainer button.text { + margin-left: auto + } + div.peoplePicker div.selectedContactsContainer button.cancel { + margin-left: 0; + margin-right: auto + } + body.RTL div.peoplePicker div.selectedContactsContainer button.text { + margin-left: 0; + margin-right: auto + } + body.RTL div.peoplePicker div.selectedContactsContainer button.cancel { + margin-left: auto; + margin-right: 20px + } +} + +@media screen and (-ms-high-contrast: active) { + div.peoplePicker div.win-container:not(.win-selected) div.win-item:hover div.contactWrapper { + background: none; + border: 2px solid Highlight + } + div.peoplePicker div.contacts div.contactWrapper div.avatar, + div.peoplePicker div.selectedContacts.list div.item div.avatar { + -ms-high-contrast-adjust: none + } + div.peoplePicker div.selectedContactsContainer>button { + background-color: ButtonFace; + color: ButtonText; + border: 2px solid ButtonText + } + div.peoplePicker div.selectedContactsContainer>button:hover:not([disabled]) { + background-color: Highlight; + color: HighlightText + } + div.peoplePicker div.selectedContactsContainer>button[disabled] { + border-color: GrayText; + color: GrayText + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/controls/searchBoxPanel.css b/packages/microsoft.skypeapp/controls/searchBoxPanel.css index e3b898d2..f5ed75ce 100644 --- a/packages/microsoft.skypeapp/controls/searchBoxPanel.css +++ b/packages/microsoft.skypeapp/controls/searchBoxPanel.css @@ -114,7 +114,7 @@ width:80px; height:80px; margin-left:15px; - font-family:"Skype UI Symbol"; + font-family:"Skype UI Symbol" !important; font-size:80px; line-height:normal; border-style:none; diff --git a/packages/microsoft.skypeapp/controls/videoMessage.css b/packages/microsoft.skypeapp/controls/videoMessage.css index 5f5a07c7..f2b59739 100644 --- a/packages/microsoft.skypeapp/controls/videoMessage.css +++ b/packages/microsoft.skypeapp/controls/videoMessage.css @@ -1 +1 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.videoMessage{-ms-user-select:none;width:100%;clear:both;height:250px}div.videoMessage div.video{margin:10px 0 5px}div.videoMessage p.errors,div.videoMessage div.video div.icon,div.videoMessage div.video div.preview img.thumbnail,div.videoMessage div.info{display:none}div.videoMessage div.video div.previewContainer{height:200px}div.videoMessage div.video div.preview{width:auto;height:inherit;display:inline-block;position:relative}div.videoMessage div.video div.preview:focus{border:2px solid #00aff0}div.videoMessage div.video img.thumbnail{height:inherit}div.videoMessage div.video.THUMBAVAILABLE:not(.ERROR):not(.EXPIRED) img.thumbnail{display:inline-block}div.videoMessage div.video div.icon{width:360px;height:200px}div.videoMessage div.video:not(.THUMBAVAILABLE) div.icon,div.videoMessage div.video.ERROR div.icon,div.videoMessage div.video.EXPIRED div.icon{display:block;position:relative}div.videoMessage div.video.THUMBAVAILABLE:not(.ERROR):not(.EXPIRED) .preview .play{position:absolute;left:25px;bottom:20px;width:40px;height:40px;background:#00aff0;border-radius:50%;color:#FFF;text-align:center;line-height:normal;opacity:.9}body.RTL div.videoMessage div.video.THUMBAVAILABLE:not(.ERROR):not(.EXPIRED) .preview .play{left:auto;right:25px}div.videoMessage div.video.THUMBAVAILABLE:not(.ERROR):not(.EXPIRED) .preview .play::before{font-size:40px;font-family:"Skype UI Symbol";content:"\E40E"}div.videoMessage progress{color:#00aff0;width:100%;display:block;visibility:hidden}div.videoMessage div.video.RECORDED progress,div.videoMessage div.video.UPLOADING progress{visibility:visible}div.videoMessage video{display:none}div.videoMessage div.info,div.videoMessage p.name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}div.videoMessage div.info{color:#93999d;margin-top:8px;margin-bottom:5px}div.videoMessage div.icon{position:relative;background:rgba(0,175,240,0.15);text-align:center;z-index:5}div.videoMessage div.icon,div.videoMessage div.icon div.image,div.videoMessage div.icon div.image:before{width:inherit}div.videoMessage div.icon div.image{position:absolute;top:calc(50% - 28px)}div.videoMessage div.icon div.image:before{font-family:"Skype UI Symbol";font-weight:bold;content:"\E305";font-size:70px;height:inherit;width:inherit;line-height:70px;box-sizing:border-box;color:#FFF;text-align:center;overflow:hidden;display:block}div.video.ERROR div.icon,div.video.EXPIRED div.icon{background:#a2c5d3}div.video.ERROR div.icon div.image:before,div.video.EXPIRED div.icon div.image:before{content:"\E119"}div.video div.preview p.errors{position:absolute;top:145px;margin:0;width:100%;text-align:center;color:#FFF;z-index:10;box-sizing:border-box;padding-left:5px;padding-right:5px}div.videoMessage div.video.EXPIRED div.preview p.errors,div.videoMessage div.video.ERROR div.preview p.errors,div.videoMessage div.video.RECORDED div.info,div.videoMessage div.video.UPLOADING div.info{display:block}@media vertical{div.node[type='videomessage'] div.message{position:relative;left:0px;top:0px}div.node[type='videomessage'] time{position:relative;right:0;top:-20px;display:inline-block}div.node[type='videomessage'] div.message h3.name{width:60%;font-size:14.66px;font-weight:300;line-height:20px;text-overflow:ellipsis}body.RTL div.node[type='videomessage'] time{left:10px;right:auto}div.videoMessage div.video div.info,div.videoMessage div.video progress{position:relative;left:0px;width:280px}}@media screen and (max-aspect-ratio: 1 / 1){div.videoMessage{height:225px}div.videoMessage div.video{margin-top:0}div.videoMessage div.video div.preview{width:auto;left:0px;position:relative;text-align:center;overflow:hidden}div.videoMessage div.video div.icon{width:320px;height:180px}div.videoMessage div.video div.preview img.thumbnail{height:inherit;width:auto}div.videoMessage div.video.THUMBAVAILABLE:not(.ERROR):not(.EXPIRED) .preview .play{position:absolute;left:20px;bottom:17px}div.video div.preview p.errors{top:125px}div.videoMessage div.video div.info,div.videoMessage div.video progress{position:relative;left:0px;width:280px}}@media screen and (max-width: 340px){div.videoMessage div.video div.preview{max-width:100%}} +/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.videoMessage{-ms-user-select:none;width:100%;clear:both;height:250px}div.videoMessage div.video{margin:10px 0 5px}div.videoMessage p.errors,div.videoMessage div.video div.icon,div.videoMessage div.video div.preview img.thumbnail,div.videoMessage div.info{display:none}div.videoMessage div.video div.previewContainer{height:200px}div.videoMessage div.video div.preview{width:auto;height:inherit;display:inline-block;position:relative}div.videoMessage div.video div.preview:focus{border:2px solid #00aff0}div.videoMessage div.video img.thumbnail{height:inherit}div.videoMessage div.video.THUMBAVAILABLE:not(.ERROR):not(.EXPIRED) img.thumbnail{display:inline-block}div.videoMessage div.video div.icon{width:360px;height:200px}div.videoMessage div.video:not(.THUMBAVAILABLE) div.icon,div.videoMessage div.video.ERROR div.icon,div.videoMessage div.video.EXPIRED div.icon{display:block;position:relative}div.videoMessage div.video.THUMBAVAILABLE:not(.ERROR):not(.EXPIRED) .preview .play{position:absolute;left:25px;bottom:20px;width:40px;height:40px;background:#00aff0;border-radius:50%;color:#FFF;text-align:center;line-height:normal;opacity:.9}body.RTL div.videoMessage div.video.THUMBAVAILABLE:not(.ERROR):not(.EXPIRED) .preview .play{left:auto;right:25px}div.videoMessage div.video.THUMBAVAILABLE:not(.ERROR):not(.EXPIRED) .preview .play::before{font-size:40px;font-family:"Skype UI Symbol" !important;content:"\E40E"}div.videoMessage progress{color:#00aff0;width:100%;display:block;visibility:hidden}div.videoMessage div.video.RECORDED progress,div.videoMessage div.video.UPLOADING progress{visibility:visible}div.videoMessage video{display:none}div.videoMessage div.info,div.videoMessage p.name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}div.videoMessage div.info{color:#93999d;margin-top:8px;margin-bottom:5px}div.videoMessage div.icon{position:relative;background:rgba(0,175,240,0.15);text-align:center;z-index:5}div.videoMessage div.icon,div.videoMessage div.icon div.image,div.videoMessage div.icon div.image:before{width:inherit}div.videoMessage div.icon div.image{position:absolute;top:calc(50% - 28px)}div.videoMessage div.icon div.image:before{font-family:"Skype UI Symbol" !important;font-weight:bold;content:"\E305";font-size:70px;height:inherit;width:inherit;line-height:70px;box-sizing:border-box;color:#FFF;text-align:center;overflow:hidden;display:block}div.video.ERROR div.icon,div.video.EXPIRED div.icon{background:#a2c5d3}div.video.ERROR div.icon div.image:before,div.video.EXPIRED div.icon div.image:before{content:"\E119"}div.video div.preview p.errors{position:absolute;top:145px;margin:0;width:100%;text-align:center;color:#FFF;z-index:10;box-sizing:border-box;padding-left:5px;padding-right:5px}div.videoMessage div.video.EXPIRED div.preview p.errors,div.videoMessage div.video.ERROR div.preview p.errors,div.videoMessage div.video.RECORDED div.info,div.videoMessage div.video.UPLOADING div.info{display:block}@media vertical{div.node[type='videomessage'] div.message{position:relative;left:0px;top:0px}div.node[type='videomessage'] time{position:relative;right:0;top:-20px;display:inline-block}div.node[type='videomessage'] div.message h3.name{width:60%;font-size:14.66px;font-weight:300;line-height:20px;text-overflow:ellipsis}body.RTL div.node[type='videomessage'] time{left:10px;right:auto}div.videoMessage div.video div.info,div.videoMessage div.video progress{position:relative;left:0px;width:280px}}@media screen and (max-aspect-ratio: 1 / 1){div.videoMessage{height:225px}div.videoMessage div.video{margin-top:0}div.videoMessage div.video div.preview{width:auto;left:0px;position:relative;text-align:center;overflow:hidden}div.videoMessage div.video div.icon{width:320px;height:180px}div.videoMessage div.video div.preview img.thumbnail{height:inherit;width:auto}div.videoMessage div.video.THUMBAVAILABLE:not(.ERROR):not(.EXPIRED) .preview .play{position:absolute;left:20px;bottom:17px}div.video div.preview p.errors{top:125px}div.videoMessage div.video div.info,div.videoMessage div.video progress{position:relative;left:0px;width:280px}}@media screen and (max-width: 340px){div.videoMessage div.video div.preview{max-width:100%}} diff --git a/packages/microsoft.skypeapp/css/conversationItems.css b/packages/microsoft.skypeapp/css/conversationItems.css index e249a310..879a55ac 100644 --- a/packages/microsoft.skypeapp/css/conversationItems.css +++ b/packages/microsoft.skypeapp/css/conversationItems.css @@ -1 +1,746 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.fragment.hub div.win-listview div.win-container,div.fragment.allHistory div.recents.win-listview div.win-container,div.conversationSwitcher div.recents.win-listview div.win-container,div.fragment.participantList div.participants>div.win-listview div.win-container{margin:0}div.fragment.hub div.win-listview div.win-container:hover,div.fragment.allHistory div.recents.win-listview div.win-container:hover,div.conversationSwitcher div.recents.win-listview div.win-container:hover,div.fragment.participantList div.participants>div.win-listview div.win-container:hover{outline:none}div.fragment.hub div.win-listview div.win-container.win-focused div.win-focusedoutline,div.fragment.allHistory div.recents.win-listview div.win-container.win-focused div.win-focusedoutline,div.conversationSwitcher div.recents.win-listview div.win-container.win-focused div.win-focusedoutline{left:1px;top:1px;width:calc(100% - 2px);height:calc(100% - 2px);outline-width:1px}div.fragment.hub div.win-listview div.win-container.win-selected,div.fragment.allHistory div.recents.win-listview div.win-container.win-selected,div.conversationSwitcher div.recents.win-listview div.win-container.win-selected{color:inherit}div.fragment.hub div.categoryContainer.recents div.item.LARGE div.detailsFrame.CALL div.message{box-sizing:border-box;padding-bottom:0}div.fragment.hub div.categoryContainer.recents div.item.LARGE div.detailsFrame.CALL div.message div.ellipsisContainer{max-height:200px}div.fragment.hub div.categoryContainer.recents div.item.LARGE div.detailsFrame.CALL div.message div.call span.wrapper{display:block;max-height:71px;overflow:hidden}div.fragment.hub div.categoryContainer.recents div.item.LARGE div.detailsFrame.CALL div.message div.call span.callMsgDetail{display:block;max-height:32px}div.appBarConversationSwitcher div.recents.win-listview div.win-container,div.appBarConversationSwitcher div.recents.win-listview div.win-item,div.appBarConversationSwitcher div.recents.win-listview div.item,div.appBarConversationSwitcher div.recents.win-listview div.win-template{background:#fff}div.appBarConversationSwitcher div.recents.win-listview div.win-container:hover,div.appBarConversationSwitcher div.recents.win-listview div.win-container:hover div.win-item,div.appBarConversationSwitcher div.recents.win-listview div.win-container:hover div.item,div.appBarConversationSwitcher div.recents.win-listview div.win-container:hover div.win-template{background:#dff3fb}div.fragment.hub div.win-selected div.win-selectionborder,div.fragment.hub div.win-selected.win-container:hover div.win-selectionborder,div.fragment.participantList div.participants div.win-selected.win-container div.win-selectionborder,div.fragment.participantList div.participants div.win-selected.win-container:hover div.win-selectionborder{border-color:#00aded !important}body:not(.RTL) div.fragment.hub div.win-selected.win-container div.win-selectioncheckmarkbackground,body:not(.RTL) div.fragment.hub div.win-selected.win-container:hover div.win-selectioncheckmarkbackground,body:not(.RTL) div.fragment.participantList div.win-selected.win-container div.win-selectioncheckmarkbackground,body:not(.RTL) div.fragment.participantList div.win-selected.win-container:hover div.win-selectioncheckmarkbackground{border-right-color:#00aded !important;border-top-color:#00aded !important}body.RTL div.fragment.hub div.win-selected.win-container div.win-selectioncheckmarkbackground,body.RTL div.fragment.hub div.win-selected.win-container:hover div.win-selectioncheckmarkbackground,body.RTL div.fragment.participantList div.win-selected.win-container div.win-selectioncheckmarkbackground,body.RTL div.fragment.participantList div.win-selected.win-container:hover div.win-selectioncheckmarkbackground{border-left-color:#00aded;border-top-color:#00aded}div.fragment.allHistory div.recents.win-listview div.win-container.win-selected div.win-selectionbackground,div.conversationSwitcher div.recents.win-listview div.win-container.win-selected div.win-selectionbackground{background-color:inherit}div.fragment.hub div.win-listview div.item,div.fragment.allHistory div.recents.win-listview div.item{width:320px;height:90px;position:relative}@media screen and (max-width: 640px){div.fragment.hub div.win-listview div.item,div.fragment.allHistory div.recents.win-listview div.item{width:100%}}#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item{position:relative;width:270px;height:120px}#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.win-container{margin:0 7.5px 0 7.5px;width:270px;height:120px}#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.win-container:hover{outline:none}#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.win-container div.content>div.win-template{padding:20px 20px 11px;-ms-grid-columns:55px 1fr}#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.win-focusedoutline{left:2px;top:2px;width:calc(100% - 4px);height:calc(100% - 4px);outline-width:2px}@media screen and (-ms-high-contrast: active){#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.win-focusedoutline{left:5px;top:5px;width:calc(100% - 10px);height:calc(100% - 10px);outline-width:5px}}#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.detailsFrame{padding-top:5px}#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.ellipsisContainer{height:44px}#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.ellipsisContainer div.text{height:40px;overflow:hidden;text-overflow:ellipsis}div.fragment.allHistory div.recents.win-listview div.item div.ellipsisContainer div.text,div.fragment.hub div.categoryContainer.recents div.item:not(.LARGE) div.ellipsisContainer div.text{width:inherit;white-space:nowrap;word-wrap:normal;overflow:hidden;text-overflow:ellipsis}#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.ellipsisContainer div.text span.emoticon{margin-top:-4px}#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message{margin-top:0}#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.time{top:0}div.fragment.hub div.itemsContainer div.item.LARGE{height:180px}div.fragment.hub div.categoryContainer.recents div.item div.content,div.fragment.allHistory div.recents.win-listview div.item div.content,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.content{width:100%;height:100%}div.fragment.hub div.categoryContainer.favorites div.item div.content,div.fragment.hub div.categoryContainer.people div.item div.content,div.fragment.participantList div.participants div.item div.content{width:100%;height:100%;padding:0;display:block;position:absolute;background-size:cover;background-repeat:no-repeat}div.fragment.hub div.categoryContainer.favorites div.item div.content,div.fragment.participantList div.participants div.item div.content{background-image:url("/images/svg/prot270x270.svg")}div.fragment.hub div.categoryContainer.people div.item div.content{background-image:url("/images/svg/prot135x135.svg")}div.fragment.hub div.categoryContainer.favorites div.item div.content.DEFAULTAVATAR,div.fragment.hub div.categoryContainer.people div.item div.content.DEFAULTAVATAR,div.fragment.participantList div.participants div.item div.content.DEFAULTAVATAR{background-image:url("/images/svg/protDefAvatar270x270.svg")}div.fragment.hub div.categoryContainer.recents div.item div.content>div.win-template,div.fragment.allHistory div.recents.win-listview div.item div.content>div.win-template,#skypeAppBar div.recentsContainer div.recents div.item div.content>div.win-template{width:100%;height:100%;box-sizing:border-box;padding:15px 28px 11px 20px;display:-ms-grid;-ms-grid-columns:55px 1fr;-ms-grid-rows:1fr;position:relative}div.fragment.hub div.categoryContainer.recents div.item div.content>div.win-template{padding:15px 28px 2px 20px}body.RTL div.fragment.hub div.categoryContainer.recents div.item div.content>div.win-template,body.RTL div.fragment.allHistory div.recents.win-listview div.item div.content>div.win-template,body.RTL #skypeAppBar div.recentsContainer div.recents div.item div.content>div.win-template{padding-right:20px;padding-left:28px}div.fragment.hub div.categoryContainer.favorites div.item div.content:hover::before,div.fragment.hub div.categoryContainer.people div.item div.content:hover::before,div.fragment.participantList div.participants div.item div.content:hover::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.content:hover::before{content:' ';display:block;position:absolute;width:calc(100% - 10px);height:calc(100% - 10px);background:rgba(0,0,0,0.2);border:5px solid #66CFF6;pointer-events:none}div.fragment.hub div.categoryContainer.recents div.win-itembox:hover,div.fragment.allHistory div.recents.win-listview div.win-itembox:hover,div.fragment.dialer div.categoryContainer.recents div.win-itembox:hover{background-color:rgba(0,149,204,0.15)}div.fragment.hub div.categoryContainer.recents div.item div.content:hover div.avatar::before,div.fragment.allHistory div.recents.win-listview div.item div.content:hover div.avatar::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.content:hover div.avatar::before{content:' ';display:block;position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.15);pointer-events:none;border-radius:50%}div.fragment.hub div.categoryContainer.recents div.item div.content:hover div.avatar::before,div.fragment.allHistory div.recents.win-listview div.item div.content:hover div.avatar::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.content:hover div.avatar::before{content:' ';display:block;position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.15);pointer-events:none;border-radius:50%}div.fragment.hub div.categoryContainer.recents div.item div.avatar,div.fragment.allHistory div.recents.win-listview div.item div.avatar,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.avatar{position:relative;-ms-grid-column:1;-ms-grid-row:1;width:40px;height:40px;border-radius:50%;position:relative}div.fragment.hub div.categoryContainer.recents div.item div.avatar div.presence,div.fragment.allHistory div.recents.win-listview div.item div.avatar div.presence,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.avatar div.presence{display:none;position:absolute;width:18px;height:18px;right:-5px;bottom:-5px;box-sizing:border-box;border:5px solid #fff;background-clip:content-box;background-color:#7fba00;border-radius:50%}body.RTL div.fragment.hub div.categoryContainer.recents div.item div.avatar div.presence,body.RTL div.fragment.allHistory div.recents.win-listview div.item div.avatar div.presence,body.RTL #skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.avatar div.presence{right:auto;left:-5px}div.fragment.hub div.categoryContainer.recents div.item.DIALOG:not(.PSTN) div.avatar div.presence.ONLINE,div.fragment.allHistory div.recents.win-listview div.item.DIALOG:not(.PSTN) div.avatar div.presence.ONLINE,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item.DIALOG:not(.PSTN) div.avatar div.presence.ONLINE{display:block}div.fragment.hub div.categoryContainer.recents div.win-container:hover div.item div.avatar div.presence,div.fragment.allHistory div.recents.win-listview div.win-container:hover div.item div.avatar div.presence,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.win-container:hover div.item div.avatar div.presence{border-color:#d9eff7}div.fragment.hub div.categoryContainer.favorites div.item div.avatar,div.fragment.hub div.categoryContainer.people div.item div.avatar,div.fragment.participantList div.participants div.item div.avatar{width:100%;height:100%;position:absolute}div.fragment.hub div.categoryContainer.recents div.item div.avatar div.protectionLayer,div.fragment.allHistory div.recents.win-listview div.item div.avatar div.protectionLayer,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.avatar div.protectionLayer{position:absolute;width:100%;height:100%;border-radius:50%;background:url("/images/svg/prot55x55circle.svg") no-repeat;background-size:40px}div.fragment.hub div.categoryContainer.recents div.item div.avatar.DEFAULTAVATAR div.protectionLayer,div.fragment.allHistory div.recents.win-listview div.item div.avatar.DEFAULTAVATAR div.protectionLayer,div#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.avatar.DEFAULTAVATAR div.protectionLayer{background-image:none}div.fragment.hub div.categoryContainer.recents div.item div.detailsFrame,div.fragment.allHistory div.recents.win-listview div.item div.detailsFrame,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.detailsFrame{-ms-grid-column:2;-ms-grid-row:1;display:-ms-flexbox;-ms-flex-direction:column;-ms-flex-pack:start;margin-top:-3px}div.fragment.hub div.categoryContainer.recents div.item.LARGE div.detailsFrame{position:relative;top:-10px}div.fragment.hub div.categoryContainer.favorites div.itemsContainer div.item.BLOCKED div.avatar::before,div.fragment.hub div.categoryContainer.people div.itemsContainer div.item.BLOCKED div.avatar::before,div.fragment.hub div.categoryContainer.recents div.item.BLOCKED div.avatar div.protectionLayer::before,div.fragment.hub div.categoryContainer.recents div.item div.avatar.BLOCKED div.protectionLayer::before,div.fragment.allHistory div.recents.win-listview div.item div.avatar.BLOCKED div.protectionLayer::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.avatar.BLOCKED div.protectionLayer::before,div.fragment.participantList div.participants div.item.BLOCKED div.avatar div.overlay::before{content:'\E20D';display:block;position:absolute;width:100%;height:100%;font-family:"Skype UI Symbol";line-height:normal;background-color:rgba(77,77,77,0.75);color:rgba(255,255,255,0.4)}div.fragment.hub div.categoryContainer.favorites div.itemsContainer div.item.BLOCKED div.avatar::before{font-size:270px}div.fragment.hub div.categoryContainer.people div.itemsContainer div.item.BLOCKED div.avatar::before{font-size:135px}div.fragment.participantList div.participants div.item.BLOCKED div.avatar div.overlay::before{font-size:440px}div.fragment.participantList div.participants div.MANY div.item.BLOCKED div.avatar div.overlay::before{font-size:220px}div.fragment.hub div.categoryContainer.recents div.item.BLOCKED div.avatar div.protectionLayer::before,div.fragment.allHistory div.recents.win-listview div.item div.avatar.BLOCKED div.protectionLayer::before,div.fragment.hub div.categoryContainer.recents div.item div.avatar.BLOCKED div.protectionLayer::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.avatar.BLOCKED div.protectionLayer::before{border-radius:50%;font-size:40px}div.fragment.hub div.categoryContainer.favorites div.item div.content div.presenceNameWrapper,div.fragment.hub div.categoryContainer.people div.item div.content div.presenceNameWrapper,div.fragment.participantList div.participants div.item div.content div.presenceNameWrapper{position:absolute;box-sizing:border-box;width:100%;padding:0 10px;bottom:6px;display:-ms-flexbox;-ms-flex-direction:row;-ms-flex-align:baseline}div.fragment.hub div.categoryContainer.favorites div.item div.content div.presenceNameWrapper div.presence,div.fragment.hub div.categoryContainer.people div.item div.content div.presenceNameWrapper div.presence,div.fragment.participantList div.participants div.item div.content div.presenceNameWrapper div.presence{display:none;bottom:0;margin-right:7px}body.RTL div.fragment.hub div.categoryContainer.favorites div.item div.content div.presenceNameWrapper div.presence,body.RTL div.fragment.hub div.categoryContainer.people div.item div.content div.presenceNameWrapper div.presence,body.RTL div.fragment.participantList div.participants div.item div.content div.presenceNameWrapper div.presence{margin-right:0px;margin-left:7px}div.fragment.hub div.categoryContainer.favorites div.item.AVAILABLE div.content div.presenceNameWrapper div.presence,div.fragment.hub div.categoryContainer.people div.item.AVAILABLE div.content div.presenceNameWrapper div.presence,div.fragment.participantList div.participants div.item.AVAILABLE div.content div.presenceNameWrapper div.presence{display:block}div.fragment.hub div.categoryContainer.favorites div.item div.content div.presenceNameWrapper div.name,div.fragment.hub div.categoryContainer.people div.item div.content div.presenceNameWrapper div.name,div.fragment.participantList div.participants div.item div.content div.presenceNameWrapper div.name{-ms-flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}div.fragment.hub div.categoryContainer div.item div.name,div.fragment.allHistory div.recents.win-listview div.item div.name,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.name,div.fragment.dialer div.categoryContainer.recents div.item div.name,div.fragment.participantList div.participants div.item div.content div.name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600 !important;box-sizing:border-box;line-height:1;height:20px}div.fragment.hub div.categoryContainer div.item.LARGE div.name{margin-top:10px}div.fragment.hub div.categoryContainer.recents div.item div.name,div.fragment.dialer div.categoryContainer.recents div.item div.name{font-weight:300 !important;letter-spacing:0px;line-height:1;height:30px;margin-bottom:-8px}div.fragment.hub div.categoryContainer.recents div.item div.message{font-weight:200 !important}body.RTL div.fragment.hub div.categoryContainer.recents div.item div.name,body.RTL div.fragment.dialer div.categoryContainer.recents div.item div.name,body.RTL div.fragment.allHistory div.recents.win-listview div.item div.name{text-align:right}div.fragment.hub div.categoryContainer.recents div.item div.message,div.fragment.allHistory div.recents.win-listview div.item div.message,#skypeAppBar div.recentsContainer div.win-listview.recents div.item div.message,div.fragment.dialer div.categoryContainer.recents div.item div.detailsFrame div.message{margin-top:5px;padding-bottom:4px;overflow-x:hidden;word-wrap:break-word;min-height:21px}div.fragment.hub div.categoryContainer.recents div.item.LARGE div.message{margin-top:8px}div.fragment.dialer div.categoryContainer.recents div.item div.detailsFrame div.message{margin-top:1px;padding-bottom:0px}div.fragment.hub div.categoryContainer.recents div.item div.message>div.ellipsisContainer,div.fragment.allHistory div.recents.win-listview div.item div.message>div.ellipsisContainer{height:100%}div.fragment.hub div.categoryContainer.recents div.item div.message>div.ellipsisContainer>div.win-template,div.fragment.allHistory div.recents.win-listview div.item div.message>div.ellipsisContainer>div.win-template,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message>div.ellipsisContainer>div.win-template{position:relative}div.fragment.hub div.categoryContainer.recents div.item div.message>div.ellipsisContainer>div.win-template{max-height:168px;overflow:hidden}div.fragment.hub div.categoryContainer.recents div.item div.message strong,div.fragment.allHistory div.recents.win-listview div.item div.message strong,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message strong{font-weight:300}div.fragment.hub div.categoryContainer.recents div.item.LARGE div.message strong{font-weight:200}div.fragment.hub div.categoryContainer.recents div.item div.message div.ellipsisContainer,div.fragment.allHistory div.recents.win-listview div.item div.message div.ellipsisContainer{max-height:20px;overflow:hidden}@media screen and (max-aspect-ratio: 1 / 1){div.fragment.hub div.categoryContainer.favorites div.itemsContainer div.item.BLOCKED div.avatar::before,div.fragment.participantList div.participants div.item.BLOCKED div.avatar div.overlay::before,div.fragment.participantList div.participants div.MANY div.item.BLOCKED div.avatar div.overlay::before{font-size:140px}}div.fragment.hub div.categoryContainer.recents div.item.LARGE div.message div.ellipsisContainer{max-height:96px}div.fragment.hub div.categoryContainer.recents div.item div.message div.call span.icon,div.fragment.allHistory div.recents.win-listview div.item div.message div.call span.icon,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.call span.icon,div.fragment.hub div.categoryContainer.recents div.item div.message div.text.sms::before,div.fragment.allHistory div.recents.win-listview div.item div.message div.text.sms::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.text.sms::before{line-height:14px}div.fragment.hub div.categoryContainer.recents div.item.LARGE div.message div.call span.icon{line-height:32px;font-size:30px}div.fragment.hub div.categoryContainer.recents div.item.LARGE div.message div.call span.callMsg{max-height:64px;overflow:hidden;font-size:28px;margin-left:10px}#appBarTop div.message div.call{max-height:40px}#appBarTop div.message div.call,#appBarTop div.message div.call *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}div.fragment.hub div.categoryContainer.recents div.item.LARGE div.message div.call span.callMsgDetail{display:block}div.fragment.dialer div.categoryContainer.recents div.item div.message div.call span.callMsg.dotted:after,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.call span.callMsg.dotted:after,div.fragment.allHistory div.recents.win-listview div.item div.message div.call span.callMsg.dotted:after,div.fragment.hub div.categoryContainer.recents div.item:not(.LARGE) div.message div.call span.callMsg.dotted:after{content:","}div.fragment.hub div.categoryContainer.recents div.item div.message div.text.auth::before,div.fragment.hub div.categoryContainer.recents div.item div.message div.text.authorized::before,div.fragment.hub div.categoryContainer.recents div.item div.message div.text.sms::before,div.fragment.allHistory div.recents.win-listview div.item div.message div.text.auth::before,div.fragment.allHistory div.recents.win-listview div.item div.message div.text.authorized::before,div.fragment.allHistory div.recents.win-listview div.item div.message div.text.sms::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.text.auth::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.text.authorized::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.text.sms::before{padding-right:5px}body.RTL div.fragment.hub div.categoryContainer.recents div.item div.message div.text.auth::before,body.RTL div.fragment.hub div.categoryContainer.recents div.item div.message div.text.authorized::before,body.RTL div.fragment.hub div.categoryContainer.recents div.item div.message div.text.sms::before,body.RTL div.fragment.allHistory div.recents.win-listview div.item div.message div.text.auth::before,body.RTL div.fragment.allHistory div.recents.win-listview div.item div.message div.text.authorized::before,body.RTL div.fragment.allHistory div.recents.win-listview div.item div.message div.text.sms::before,body.RTL #skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.text.auth::before,body.RTL #skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.text.authorized::before,body.RTL #skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.text.sms::before{padding-right:0px;padding-left:5px}div.fragment.hub div.categoryContainer.recents div.item div.time,div.fragment.allHistory div.recents.win-listview div.item div.time,div.fragment.dialer div.categoryContainer.recents div.item div.detailsFrame div.time{margin-top:-3px;color:#A2C5D3}#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.time{margin-top:-7px;color:#A2C5D3}div.fragment.hub div.categoryContainer.recents div.item.LARGE div.time{margin-top:4px}div.fragment.hub div.categoryContainer.recents div.item span.origin,div.fragment.allHistory div.recents.win-listview div.item span.origin,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item span.origin{color:#a8a8a8;display:inline-block;text-indent:4px}div.fragment.hub div.categoryContainer.recents div.item div.message div.ico.sms,div.fragment.allHistory div.recents.win-listview div.item div.message div.ico.sms,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.ico.sms{float:left;display:inline-block;vertical-align:bottom}body.RTL div.fragment.hub div.categoryContainer.recents div.item div.message div.ico.sms,body.RTL div.fragment.allHistory div.recents.win-listview div.item div.message div.ico.sms,body.RTL #skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.ico.sms{float:right}#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.detailsFrame.SMS div.message div.win-template{overflow:hidden}#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.ico.sms{height:20px}#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.text.sms{overflow:visible}div.fragment.hub div.categoryContainer.recents div.item.LARGE div.message div.ico.sms{height:32px}@media screen and (-ms-high-contrast: active){div.fragment.hub div.categoryContainer.favorites div.item div.content,div.fragment.hub div.categoryContainer.people div.item div.content,div.fragment.participantList div.participants div.item div.content{background:none}div.fragment.hub div.categoryContainer.recents div.item div.content::before,div.fragment.allHistory div.recents.win-listview div.item div.content::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.content::before,div.fragment.participantList div.participants div.item div.content::before,div.fragment.hub div.categoryContainer.recents div.item div.content:hover::before,div.fragment.allHistory div.recents.win-listview div.item div.content:hover::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.content:hover::before{content:' ';display:block;position:absolute;width:100%;height:100%;box-sizing:border-box;border:1px solid WindowText}div.fragment.hub div.categoryContainer.recents div.item div.content::before,div.fragment.allHistory div.recents.win-listview div.item div.content::before{border:none}div.fragment.hub div.categoryContainer.recents div.item div.content:hover::before,div.fragment.allHistory div.recents.win-listview div.item div.content:hover::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.content:hover::before,div.fragment.hub div.categoryContainer.favorites div.item div.content:hover::before,div.fragment.hub div.categoryContainer.people div.item div.content:hover::before,div.fragment.participantList div.participants div.item div.content:hover::before{background:none;border:5px solid Highlight}div.fragment.dialer div.categoryContainer.recents div.item:hover div.content{box-shadow:inset 0 0 0 5px Highlight}div.fragment.hub div.item div.avatar,div.fragment.allHistory div.item div.avatar,div.conversationSwitcher div.item div.avatar,div.fragment.participantList div.participants div.item div.avatar{-ms-high-contrast-adjust:none}div.fragment.hub div.categoryContainer.recents div.item div.content:hover div.avatar::before,div.fragment.allHistory div.recents.win-listview div.item div.content:hover div.avatar::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.content:hover div.avatar::before{display:none}div.fragment.hub div.categoryContainer.favorites div.item div.content div.presenceNameWrapper,div.fragment.hub div.categoryContainer.people div.item div.content div.presenceNameWrapper,div.fragment.participantList div.participants div.item div.content div.presenceNameWrapper{margin:0 7px;width:calc(100% - 14px);padding:0 3px;background-color:Window}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.fragment.hub div.win-listview div.win-container, +div.fragment.allHistory div.recents.win-listview div.win-container, +div.conversationSwitcher div.recents.win-listview div.win-container, +div.fragment.participantList div.participants>div.win-listview div.win-container { + margin: 0 +} + +div.fragment.hub div.win-listview div.win-container:hover, +div.fragment.allHistory div.recents.win-listview div.win-container:hover, +div.conversationSwitcher div.recents.win-listview div.win-container:hover, +div.fragment.participantList div.participants>div.win-listview div.win-container:hover { + outline: none +} + +div.fragment.hub div.win-listview div.win-container.win-focused div.win-focusedoutline, +div.fragment.allHistory div.recents.win-listview div.win-container.win-focused div.win-focusedoutline, +div.conversationSwitcher div.recents.win-listview div.win-container.win-focused div.win-focusedoutline { + left: 1px; + top: 1px; + width: calc(100% - 2px); + height: calc(100% - 2px); + outline-width: 1px +} + +div.fragment.hub div.win-listview div.win-container.win-selected, +div.fragment.allHistory div.recents.win-listview div.win-container.win-selected, +div.conversationSwitcher div.recents.win-listview div.win-container.win-selected { + color: inherit +} + +div.fragment.hub div.categoryContainer.recents div.item.LARGE div.detailsFrame.CALL div.message { + box-sizing: border-box; + padding-bottom: 0 +} + +div.fragment.hub div.categoryContainer.recents div.item.LARGE div.detailsFrame.CALL div.message div.ellipsisContainer { + max-height: 200px +} + +div.fragment.hub div.categoryContainer.recents div.item.LARGE div.detailsFrame.CALL div.message div.call span.wrapper { + display: block; + max-height: 71px; + overflow: hidden +} + +div.fragment.hub div.categoryContainer.recents div.item.LARGE div.detailsFrame.CALL div.message div.call span.callMsgDetail { + display: block; + max-height: 32px +} + +div.appBarConversationSwitcher div.recents.win-listview div.win-container, +div.appBarConversationSwitcher div.recents.win-listview div.win-item, +div.appBarConversationSwitcher div.recents.win-listview div.item, +div.appBarConversationSwitcher div.recents.win-listview div.win-template { + background: #fff +} + +div.appBarConversationSwitcher div.recents.win-listview div.win-container:hover, +div.appBarConversationSwitcher div.recents.win-listview div.win-container:hover div.win-item, +div.appBarConversationSwitcher div.recents.win-listview div.win-container:hover div.item, +div.appBarConversationSwitcher div.recents.win-listview div.win-container:hover div.win-template { + background: #dff3fb +} + +div.fragment.hub div.win-selected div.win-selectionborder, +div.fragment.hub div.win-selected.win-container:hover div.win-selectionborder, +div.fragment.participantList div.participants div.win-selected.win-container div.win-selectionborder, +div.fragment.participantList div.participants div.win-selected.win-container:hover div.win-selectionborder { + border-color: #00aded !important +} + +body:not(.RTL) div.fragment.hub div.win-selected.win-container div.win-selectioncheckmarkbackground, +body:not(.RTL) div.fragment.hub div.win-selected.win-container:hover div.win-selectioncheckmarkbackground, +body:not(.RTL) div.fragment.participantList div.win-selected.win-container div.win-selectioncheckmarkbackground, +body:not(.RTL) div.fragment.participantList div.win-selected.win-container:hover div.win-selectioncheckmarkbackground { + border-right-color: #00aded !important; + border-top-color: #00aded !important +} + +body.RTL div.fragment.hub div.win-selected.win-container div.win-selectioncheckmarkbackground, +body.RTL div.fragment.hub div.win-selected.win-container:hover div.win-selectioncheckmarkbackground, +body.RTL div.fragment.participantList div.win-selected.win-container div.win-selectioncheckmarkbackground, +body.RTL div.fragment.participantList div.win-selected.win-container:hover div.win-selectioncheckmarkbackground { + border-left-color: #00aded; + border-top-color: #00aded +} + +div.fragment.allHistory div.recents.win-listview div.win-container.win-selected div.win-selectionbackground, +div.conversationSwitcher div.recents.win-listview div.win-container.win-selected div.win-selectionbackground { + background-color: inherit +} + +div.fragment.hub div.win-listview div.item, +div.fragment.allHistory div.recents.win-listview div.item { + width: 320px; + height: 90px; + position: relative +} + +@media screen and (max-width: 640px) { + div.fragment.hub div.win-listview div.item, + div.fragment.allHistory div.recents.win-listview div.item { + width: 100% + } +} + +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item { + position: relative; + width: 270px; + height: 120px +} + +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.win-container { + margin: 0 7.5px 0 7.5px; + width: 270px; + height: 120px +} + +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.win-container:hover { + outline: none +} + +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.win-container div.content>div.win-template { + padding: 20px 20px 11px; + -ms-grid-columns: 55px 1fr +} + +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.win-focusedoutline { + left: 2px; + top: 2px; + width: calc(100% - 4px); + height: calc(100% - 4px); + outline-width: 2px +} + +@media screen and (-ms-high-contrast: active) { + #skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.win-focusedoutline { + left: 5px; + top: 5px; + width: calc(100% - 10px); + height: calc(100% - 10px); + outline-width: 5px + } +} + +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.detailsFrame { + padding-top: 5px +} + +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.ellipsisContainer { + height: 44px +} + +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.ellipsisContainer div.text { + height: 40px; + overflow: hidden; + text-overflow: ellipsis +} + +div.fragment.allHistory div.recents.win-listview div.item div.ellipsisContainer div.text, +div.fragment.hub div.categoryContainer.recents div.item:not(.LARGE) div.ellipsisContainer div.text { + width: inherit; + white-space: nowrap; + word-wrap: normal; + overflow: hidden; + text-overflow: ellipsis +} + +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.ellipsisContainer div.text span.emoticon { + margin-top: -4px +} + +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message { + margin-top: 0 +} + +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.time { + top: 0 +} + +div.fragment.hub div.itemsContainer div.item.LARGE { + height: 180px +} + +div.fragment.hub div.categoryContainer.recents div.item div.content, +div.fragment.allHistory div.recents.win-listview div.item div.content, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.content { + width: 100%; + height: 100% +} + +div.fragment.hub div.categoryContainer.favorites div.item div.content, +div.fragment.hub div.categoryContainer.people div.item div.content, +div.fragment.participantList div.participants div.item div.content { + width: 100%; + height: 100%; + padding: 0; + display: block; + position: absolute; + background-size: cover; + background-repeat: no-repeat +} + +div.fragment.hub div.categoryContainer.favorites div.item div.content, +div.fragment.participantList div.participants div.item div.content { + background-image: url("/images/svg/prot270x270.svg") +} + +div.fragment.hub div.categoryContainer.people div.item div.content { + background-image: url("/images/svg/prot135x135.svg") +} + +div.fragment.hub div.categoryContainer.favorites div.item div.content.DEFAULTAVATAR, +div.fragment.hub div.categoryContainer.people div.item div.content.DEFAULTAVATAR, +div.fragment.participantList div.participants div.item div.content.DEFAULTAVATAR { + background-image: url("/images/svg/protDefAvatar270x270.svg") +} + +div.fragment.hub div.categoryContainer.recents div.item div.content>div.win-template, +div.fragment.allHistory div.recents.win-listview div.item div.content>div.win-template, +#skypeAppBar div.recentsContainer div.recents div.item div.content>div.win-template { + width: 100%; + height: 100%; + box-sizing: border-box; + padding: 15px 28px 11px 20px; + display: -ms-grid; + -ms-grid-columns: 55px 1fr; + -ms-grid-rows: 1fr; + position: relative +} + +div.fragment.hub div.categoryContainer.recents div.item div.content>div.win-template { + padding: 15px 28px 2px 20px +} + +body.RTL div.fragment.hub div.categoryContainer.recents div.item div.content>div.win-template, +body.RTL div.fragment.allHistory div.recents.win-listview div.item div.content>div.win-template, +body.RTL #skypeAppBar div.recentsContainer div.recents div.item div.content>div.win-template { + padding-right: 20px; + padding-left: 28px +} + +div.fragment.hub div.categoryContainer.favorites div.item div.content:hover::before, +div.fragment.hub div.categoryContainer.people div.item div.content:hover::before, +div.fragment.participantList div.participants div.item div.content:hover::before, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.content:hover::before { + content: ' '; + display: block; + position: absolute; + width: calc(100% - 10px); + height: calc(100% - 10px); + background: rgba(0, 0, 0, 0.2); + border: 5px solid #66CFF6; + pointer-events: none +} + +div.fragment.hub div.categoryContainer.recents div.win-itembox:hover, +div.fragment.allHistory div.recents.win-listview div.win-itembox:hover, +div.fragment.dialer div.categoryContainer.recents div.win-itembox:hover { + background-color: rgba(0, 149, 204, 0.15) +} + +div.fragment.hub div.categoryContainer.recents div.item div.content:hover div.avatar::before, +div.fragment.allHistory div.recents.win-listview div.item div.content:hover div.avatar::before, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.content:hover div.avatar::before { + content: ' '; + display: block; + position: absolute; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.15); + pointer-events: none; + border-radius: 50% +} + +div.fragment.hub div.categoryContainer.recents div.item div.content:hover div.avatar::before, +div.fragment.allHistory div.recents.win-listview div.item div.content:hover div.avatar::before, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.content:hover div.avatar::before { + content: ' '; + display: block; + position: absolute; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.15); + pointer-events: none; + border-radius: 50% +} + +div.fragment.hub div.categoryContainer.recents div.item div.avatar, +div.fragment.allHistory div.recents.win-listview div.item div.avatar, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.avatar { + position: relative; + -ms-grid-column: 1; + -ms-grid-row: 1; + width: 40px; + height: 40px; + border-radius: 50%; + position: relative +} + +div.fragment.hub div.categoryContainer.recents div.item div.avatar div.presence, +div.fragment.allHistory div.recents.win-listview div.item div.avatar div.presence, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.avatar div.presence { + display: none; + position: absolute; + width: 18px; + height: 18px; + right: -5px; + bottom: -5px; + box-sizing: border-box; + border: 5px solid #fff; + background-clip: content-box; + background-color: #7fba00; + border-radius: 50% +} + +body.RTL div.fragment.hub div.categoryContainer.recents div.item div.avatar div.presence, +body.RTL div.fragment.allHistory div.recents.win-listview div.item div.avatar div.presence, +body.RTL #skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.avatar div.presence { + right: auto; + left: -5px +} + +div.fragment.hub div.categoryContainer.recents div.item.DIALOG:not(.PSTN) div.avatar div.presence.ONLINE, +div.fragment.allHistory div.recents.win-listview div.item.DIALOG:not(.PSTN) div.avatar div.presence.ONLINE, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item.DIALOG:not(.PSTN) div.avatar div.presence.ONLINE { + display: block +} + +div.fragment.hub div.categoryContainer.recents div.win-container:hover div.item div.avatar div.presence, +div.fragment.allHistory div.recents.win-listview div.win-container:hover div.item div.avatar div.presence, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.win-container:hover div.item div.avatar div.presence { + border-color: #d9eff7 +} + +div.fragment.hub div.categoryContainer.favorites div.item div.avatar, +div.fragment.hub div.categoryContainer.people div.item div.avatar, +div.fragment.participantList div.participants div.item div.avatar { + width: 100%; + height: 100%; + position: absolute +} + +div.fragment.hub div.categoryContainer.recents div.item div.avatar div.protectionLayer, +div.fragment.allHistory div.recents.win-listview div.item div.avatar div.protectionLayer, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.avatar div.protectionLayer { + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + background: url("/images/svg/prot55x55circle.svg") no-repeat; + background-size: 40px +} + +div.fragment.hub div.categoryContainer.recents div.item div.avatar.DEFAULTAVATAR div.protectionLayer, +div.fragment.allHistory div.recents.win-listview div.item div.avatar.DEFAULTAVATAR div.protectionLayer, +div#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.avatar.DEFAULTAVATAR div.protectionLayer { + background-image: none +} + +div.fragment.hub div.categoryContainer.recents div.item div.detailsFrame, +div.fragment.allHistory div.recents.win-listview div.item div.detailsFrame, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.detailsFrame { + -ms-grid-column: 2; + -ms-grid-row: 1; + display: -ms-flexbox; + -ms-flex-direction: column; + -ms-flex-pack: start; + margin-top: -3px +} + +div.fragment.hub div.categoryContainer.recents div.item.LARGE div.detailsFrame { + position: relative; + top: -10px +} + +div.fragment.hub div.categoryContainer.favorites div.itemsContainer div.item.BLOCKED div.avatar::before, +div.fragment.hub div.categoryContainer.people div.itemsContainer div.item.BLOCKED div.avatar::before, +div.fragment.hub div.categoryContainer.recents div.item.BLOCKED div.avatar div.protectionLayer::before, +div.fragment.hub div.categoryContainer.recents div.item div.avatar.BLOCKED div.protectionLayer::before, +div.fragment.allHistory div.recents.win-listview div.item div.avatar.BLOCKED div.protectionLayer::before, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.avatar.BLOCKED div.protectionLayer::before, +div.fragment.participantList div.participants div.item.BLOCKED div.avatar div.overlay::before { + content: '\E20D'; + display: block; + position: absolute; + width: 100%; + height: 100%; + font-family: "Skype UI Symbol" !important; + line-height: normal; + background-color: rgba(77, 77, 77, 0.75); + color: rgba(255, 255, 255, 0.4) +} + +div.fragment.hub div.categoryContainer.favorites div.itemsContainer div.item.BLOCKED div.avatar::before { + font-size: 270px +} + +div.fragment.hub div.categoryContainer.people div.itemsContainer div.item.BLOCKED div.avatar::before { + font-size: 135px +} + +div.fragment.participantList div.participants div.item.BLOCKED div.avatar div.overlay::before { + font-size: 440px +} + +div.fragment.participantList div.participants div.MANY div.item.BLOCKED div.avatar div.overlay::before { + font-size: 220px +} + +div.fragment.hub div.categoryContainer.recents div.item.BLOCKED div.avatar div.protectionLayer::before, +div.fragment.allHistory div.recents.win-listview div.item div.avatar.BLOCKED div.protectionLayer::before, +div.fragment.hub div.categoryContainer.recents div.item div.avatar.BLOCKED div.protectionLayer::before, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.avatar.BLOCKED div.protectionLayer::before { + border-radius: 50%; + font-size: 40px +} + +div.fragment.hub div.categoryContainer.favorites div.item div.content div.presenceNameWrapper, +div.fragment.hub div.categoryContainer.people div.item div.content div.presenceNameWrapper, +div.fragment.participantList div.participants div.item div.content div.presenceNameWrapper { + position: absolute; + box-sizing: border-box; + width: 100%; + padding: 0 10px; + bottom: 6px; + display: -ms-flexbox; + -ms-flex-direction: row; + -ms-flex-align: baseline +} + +div.fragment.hub div.categoryContainer.favorites div.item div.content div.presenceNameWrapper div.presence, +div.fragment.hub div.categoryContainer.people div.item div.content div.presenceNameWrapper div.presence, +div.fragment.participantList div.participants div.item div.content div.presenceNameWrapper div.presence { + display: none; + bottom: 0; + margin-right: 7px +} + +body.RTL div.fragment.hub div.categoryContainer.favorites div.item div.content div.presenceNameWrapper div.presence, +body.RTL div.fragment.hub div.categoryContainer.people div.item div.content div.presenceNameWrapper div.presence, +body.RTL div.fragment.participantList div.participants div.item div.content div.presenceNameWrapper div.presence { + margin-right: 0px; + margin-left: 7px +} + +div.fragment.hub div.categoryContainer.favorites div.item.AVAILABLE div.content div.presenceNameWrapper div.presence, +div.fragment.hub div.categoryContainer.people div.item.AVAILABLE div.content div.presenceNameWrapper div.presence, +div.fragment.participantList div.participants div.item.AVAILABLE div.content div.presenceNameWrapper div.presence { + display: block +} + +div.fragment.hub div.categoryContainer.favorites div.item div.content div.presenceNameWrapper div.name, +div.fragment.hub div.categoryContainer.people div.item div.content div.presenceNameWrapper div.name, +div.fragment.participantList div.participants div.item div.content div.presenceNameWrapper div.name { + -ms-flex: 1; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden +} + +div.fragment.hub div.categoryContainer div.item div.name, +div.fragment.allHistory div.recents.win-listview div.item div.name, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.name, +div.fragment.dialer div.categoryContainer.recents div.item div.name, +div.fragment.participantList div.participants div.item div.content div.name { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: 600 !important; + box-sizing: border-box; + line-height: 1; + height: 20px +} + +div.fragment.hub div.categoryContainer div.item.LARGE div.name { + margin-top: 10px +} + +div.fragment.hub div.categoryContainer.recents div.item div.name, +div.fragment.dialer div.categoryContainer.recents div.item div.name { + font-weight: 300 !important; + letter-spacing: 0px; + line-height: 1; + height: 30px; + margin-bottom: -8px +} + +div.fragment.hub div.categoryContainer.recents div.item div.message { + font-weight: 200 !important +} + +body.RTL div.fragment.hub div.categoryContainer.recents div.item div.name, +body.RTL div.fragment.dialer div.categoryContainer.recents div.item div.name, +body.RTL div.fragment.allHistory div.recents.win-listview div.item div.name { + text-align: right +} + +div.fragment.hub div.categoryContainer.recents div.item div.message, +div.fragment.allHistory div.recents.win-listview div.item div.message, +#skypeAppBar div.recentsContainer div.win-listview.recents div.item div.message, +div.fragment.dialer div.categoryContainer.recents div.item div.detailsFrame div.message { + margin-top: 5px; + padding-bottom: 4px; + overflow-x: hidden; + word-wrap: break-word; + min-height: 21px +} + +div.fragment.hub div.categoryContainer.recents div.item.LARGE div.message { + margin-top: 8px +} + +div.fragment.dialer div.categoryContainer.recents div.item div.detailsFrame div.message { + margin-top: 1px; + padding-bottom: 0px +} + +div.fragment.hub div.categoryContainer.recents div.item div.message>div.ellipsisContainer, +div.fragment.allHistory div.recents.win-listview div.item div.message>div.ellipsisContainer { + height: 100% +} + +div.fragment.hub div.categoryContainer.recents div.item div.message>div.ellipsisContainer>div.win-template, +div.fragment.allHistory div.recents.win-listview div.item div.message>div.ellipsisContainer>div.win-template, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message>div.ellipsisContainer>div.win-template { + position: relative +} + +div.fragment.hub div.categoryContainer.recents div.item div.message>div.ellipsisContainer>div.win-template { + max-height: 168px; + overflow: hidden +} + +div.fragment.hub div.categoryContainer.recents div.item div.message strong, +div.fragment.allHistory div.recents.win-listview div.item div.message strong, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message strong { + font-weight: 300 +} + +div.fragment.hub div.categoryContainer.recents div.item.LARGE div.message strong { + font-weight: 200 +} + +div.fragment.hub div.categoryContainer.recents div.item div.message div.ellipsisContainer, +div.fragment.allHistory div.recents.win-listview div.item div.message div.ellipsisContainer { + max-height: 20px; + overflow: hidden +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.fragment.hub div.categoryContainer.favorites div.itemsContainer div.item.BLOCKED div.avatar::before, + div.fragment.participantList div.participants div.item.BLOCKED div.avatar div.overlay::before, + div.fragment.participantList div.participants div.MANY div.item.BLOCKED div.avatar div.overlay::before { + font-size: 140px + } +} + +div.fragment.hub div.categoryContainer.recents div.item.LARGE div.message div.ellipsisContainer { + max-height: 96px +} + +div.fragment.hub div.categoryContainer.recents div.item div.message div.call span.icon, +div.fragment.allHistory div.recents.win-listview div.item div.message div.call span.icon, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.call span.icon, +div.fragment.hub div.categoryContainer.recents div.item div.message div.text.sms::before, +div.fragment.allHistory div.recents.win-listview div.item div.message div.text.sms::before, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.text.sms::before { + line-height: 14px +} + +div.fragment.hub div.categoryContainer.recents div.item.LARGE div.message div.call span.icon { + line-height: 32px; + font-size: 30px +} + +div.fragment.hub div.categoryContainer.recents div.item.LARGE div.message div.call span.callMsg { + max-height: 64px; + overflow: hidden; + font-size: 28px; + margin-left: 10px +} + +#appBarTop div.message div.call { + max-height: 40px +} + +#appBarTop div.message div.call, +#appBarTop div.message div.call * { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap +} + +div.fragment.hub div.categoryContainer.recents div.item.LARGE div.message div.call span.callMsgDetail { + display: block +} + +div.fragment.dialer div.categoryContainer.recents div.item div.message div.call span.callMsg.dotted:after, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.call span.callMsg.dotted:after, +div.fragment.allHistory div.recents.win-listview div.item div.message div.call span.callMsg.dotted:after, +div.fragment.hub div.categoryContainer.recents div.item:not(.LARGE) div.message div.call span.callMsg.dotted:after { + content: "," +} + +div.fragment.hub div.categoryContainer.recents div.item div.message div.text.auth::before, +div.fragment.hub div.categoryContainer.recents div.item div.message div.text.authorized::before, +div.fragment.hub div.categoryContainer.recents div.item div.message div.text.sms::before, +div.fragment.allHistory div.recents.win-listview div.item div.message div.text.auth::before, +div.fragment.allHistory div.recents.win-listview div.item div.message div.text.authorized::before, +div.fragment.allHistory div.recents.win-listview div.item div.message div.text.sms::before, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.text.auth::before, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.text.authorized::before, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.text.sms::before { + padding-right: 5px +} + +body.RTL div.fragment.hub div.categoryContainer.recents div.item div.message div.text.auth::before, +body.RTL div.fragment.hub div.categoryContainer.recents div.item div.message div.text.authorized::before, +body.RTL div.fragment.hub div.categoryContainer.recents div.item div.message div.text.sms::before, +body.RTL div.fragment.allHistory div.recents.win-listview div.item div.message div.text.auth::before, +body.RTL div.fragment.allHistory div.recents.win-listview div.item div.message div.text.authorized::before, +body.RTL div.fragment.allHistory div.recents.win-listview div.item div.message div.text.sms::before, +body.RTL #skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.text.auth::before, +body.RTL #skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.text.authorized::before, +body.RTL #skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.text.sms::before { + padding-right: 0px; + padding-left: 5px +} + +div.fragment.hub div.categoryContainer.recents div.item div.time, +div.fragment.allHistory div.recents.win-listview div.item div.time, +div.fragment.dialer div.categoryContainer.recents div.item div.detailsFrame div.time { + margin-top: -3px; + color: #A2C5D3 +} + +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.time { + margin-top: -7px; + color: #A2C5D3 +} + +div.fragment.hub div.categoryContainer.recents div.item.LARGE div.time { + margin-top: 4px +} + +div.fragment.hub div.categoryContainer.recents div.item span.origin, +div.fragment.allHistory div.recents.win-listview div.item span.origin, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item span.origin { + color: #a8a8a8; + display: inline-block; + text-indent: 4px +} + +div.fragment.hub div.categoryContainer.recents div.item div.message div.ico.sms, +div.fragment.allHistory div.recents.win-listview div.item div.message div.ico.sms, +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.ico.sms { + float: left; + display: inline-block; + vertical-align: bottom +} + +body.RTL div.fragment.hub div.categoryContainer.recents div.item div.message div.ico.sms, +body.RTL div.fragment.allHistory div.recents.win-listview div.item div.message div.ico.sms, +body.RTL #skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.ico.sms { + float: right +} + +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.detailsFrame.SMS div.message div.win-template { + overflow: hidden +} + +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.ico.sms { + height: 20px +} + +#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.text.sms { + overflow: visible +} + +div.fragment.hub div.categoryContainer.recents div.item.LARGE div.message div.ico.sms { + height: 32px +} + +@media screen and (-ms-high-contrast: active) { + div.fragment.hub div.categoryContainer.favorites div.item div.content, + div.fragment.hub div.categoryContainer.people div.item div.content, + div.fragment.participantList div.participants div.item div.content { + background: none + } + div.fragment.hub div.categoryContainer.recents div.item div.content::before, + div.fragment.allHistory div.recents.win-listview div.item div.content::before, + #skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.content::before, + div.fragment.participantList div.participants div.item div.content::before, + div.fragment.hub div.categoryContainer.recents div.item div.content:hover::before, + div.fragment.allHistory div.recents.win-listview div.item div.content:hover::before, + #skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.content:hover::before { + content: ' '; + display: block; + position: absolute; + width: 100%; + height: 100%; + box-sizing: border-box; + border: 1px solid WindowText + } + div.fragment.hub div.categoryContainer.recents div.item div.content::before, + div.fragment.allHistory div.recents.win-listview div.item div.content::before { + border: none + } + div.fragment.hub div.categoryContainer.recents div.item div.content:hover::before, + div.fragment.allHistory div.recents.win-listview div.item div.content:hover::before, + #skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.content:hover::before, + div.fragment.hub div.categoryContainer.favorites div.item div.content:hover::before, + div.fragment.hub div.categoryContainer.people div.item div.content:hover::before, + div.fragment.participantList div.participants div.item div.content:hover::before { + background: none; + border: 5px solid Highlight + } + div.fragment.dialer div.categoryContainer.recents div.item:hover div.content { + box-shadow: inset 0 0 0 5px Highlight + } + div.fragment.hub div.item div.avatar, + div.fragment.allHistory div.item div.avatar, + div.conversationSwitcher div.item div.avatar, + div.fragment.participantList div.participants div.item div.avatar { + -ms-high-contrast-adjust: none + } + div.fragment.hub div.categoryContainer.recents div.item div.content:hover div.avatar::before, + div.fragment.allHistory div.recents.win-listview div.item div.content:hover div.avatar::before, + #skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.content:hover div.avatar::before { + display: none + } + div.fragment.hub div.categoryContainer.favorites div.item div.content div.presenceNameWrapper, + div.fragment.hub div.categoryContainer.people div.item div.content div.presenceNameWrapper, + div.fragment.participantList div.participants div.item div.content div.presenceNameWrapper { + margin: 0 7px; + width: calc(100% - 14px); + padding: 0 3px; + background-color: Window + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/css/default.css b/packages/microsoft.skypeapp/css/default.css index c2674ff2..fc0168b0 100644 --- a/packages/microsoft.skypeapp/css/default.css +++ b/packages/microsoft.skypeapp/css/default.css @@ -13,7 +13,7 @@ } :-ms-lang(ar,dv,fa,he,ku-Arab,pa-Arab,prs,ps,sd-Arab,syr,ug,ur,qps-plocm).win-backbutton::before,button.backbutton::before{ content:"\E41C"; - font-family:"Skype UI Symbol"; + font-family:"Skype UI Symbol" !important; font-weight:bold } body.RTL button.win-backbutton::before,body.RTL button.backbutton::before{ @@ -21,61 +21,61 @@ body.RTL button.win-backbutton::before,body.RTL button.backbutton::before{ } div.chat div.log div.node[type=file] div.message div.body::before,div.fragment.hub div.categoryContainer.recents div.item div.message div.text.file::before,div.fragment.allHistory div.recents.win-listview div.item div.message div.text.file::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.text.file::before{ content:"\E306"; - font-family:"Skype UI Symbol"; + font-family:"Skype UI Symbol" !important; font-weight:bold } div.chat div.log div.node div.message.initialAuthRequest div.body div.text::before,div.chat div.log div.node div.message.auth div.body::before,div.fragment.hub div.categoryContainer.recents div.item div.message div.text.auth::before,div.fragment.allHistory div.recents.win-listview div.item div.message div.text.auth::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.text.auth::before{ content:"\E201"; - font-family:"Skype UI Symbol"; + font-family:"Skype UI Symbol" !important; font-weight:bold } div.chat div.log div.node div.message.auth div.authorized::before,div.fragment.hub div.categoryContainer.recents div.item div.message div.text.authorized::before,div.fragment.allHistory div.recents.win-listview div.item div.message div.text.authorized::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.text.authorized::before{ content:"\E202"; - font-family:"Skype UI Symbol"; + font-family:"Skype UI Symbol" !important; font-weight:bold } div.fragment.hub div.categoryContainer.recents div.item div.message div.ico.sms::before,div.fragment.allHistory div.recents.win-listview div.item div.message div.ico.sms::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.ico.sms::before{ content:"\E60B"; - font-family:"Skype UI Symbol"; + font-family:"Skype UI Symbol" !important; font-weight:bold } div.fragment.hub div.categoryContainer.recents div.item div.message div span.icon,div.fragment.dialer div.categoryContainer.recents div.item div.message div span.icon,div.fragment.allHistory div.recents.win-listview div.item div.message div span.icon,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div span.icon{ - font-family:"Skype UI Symbol"; + font-family:"Skype UI Symbol" !important; font-weight:bold } div.fragment.hub div.categoryContainer.recents div.item div.message div.call.incoming span.icon::before,div.fragment.dialer div.categoryContainer.recents div.item div.message div.call.incoming span.icon::before,div.fragment.allHistory div.recents.win-listview div.item div.message div.call.incoming span.icon::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.call.incoming span.icon::before,div.fragment.hub div.categoryContainer.recents div.item div.message div.call.current span.icon::before,div.fragment.dialer div.categoryContainer.recents div.item div.message div.call.current span.icon::before,div.fragment.allHistory div.recents.win-listview div.item div.message div.call.current span.icon::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.call.current span.icon::before,div.fragment.hub div.categoryContainer.recents div.item div.message div.call.starting span.icon::before,div.fragment.dialer div.categoryContainer.recents div.item div.message div.call.starting span.icon::before,div.fragment.allHistory div.recents.win-listview div.item div.message div.call.starting span.icon::before,div.chat div.log div.node.notification.UNKNOWNCALL div.iconContainer span.icon::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.call.starting span.icon::before{ content:"\E100"; - font-family:"Skype UI Symbol"; + font-family:"Skype UI Symbol" !important; font-weight:bold } div.fragment.hub div.categoryContainer.recents div.item div.message div.call.hold span.icon::before,div.fragment.dialer div.categoryContainer.recents div.item div.message div.call.hold span.icon::before,div.fragment.allHistory div.recents.win-listview div.item div.message div.call.hold span.icon::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.call.hold span.icon::before{ content:"\E40f"; - font-family:"Skype UI Symbol"; + font-family:"Skype UI Symbol" !important; font-weight:bold } div.fragment.hub div.categoryContainer.recents div.item div.message div.call.done.UNKNOWN span.icon::before,div.fragment.dialer div.categoryContainer.recents div.item div.message div.call.done.UNKNOWN span.icon::before,div.fragment.allHistory div.recents.win-listview div.item div.message div.call.done.UNKNOWN span.icon::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.call.done.UNKNOWN span.icon::before,div.fragment.hub div.categoryContainer.recents div.item div.message div.call.done span.icon::before,div.fragment.dialer div.categoryContainer.recents div.item div.message div.call.done span.icon::before,div.fragment.allHistory div.recents.win-listview div.item div.message div.call.done span.icon::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.call.done span.icon::before,div.chat div.log div.node.notification div.iconContainer span.icon::before{ content:"\E101"; - font-family:"Skype UI Symbol"; + font-family:"Skype UI Symbol" !important; font-weight:bold } div.fragment.hub div.categoryContainer.recents div.item div.message div.call.missed span.icon::before,div.fragment.dialer div.categoryContainer.recents div.item div.message div.call.missed span.icon::before,div.fragment.allHistory div.recents.win-listview div.item div.message div.call.missed span.icon::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.call.missed span.icon::before,div.chat div.log div.node.notification.MISSED div.iconContainer span.icon::before{ content:"\E10D"; - font-family:"Skype UI Symbol"; + font-family:"Skype UI Symbol" !important; font-weight:bold } div.fragment.hub div.categoryContainer.recents div.item div.message div.call.done.OUTGOING span.icon::before,div.fragment.dialer div.categoryContainer.recents div.item div.message div.call.done.OUTGOING span.icon::before,div.fragment.allHistory div.recents.win-listview div.item div.message div.call.done.OUTGOING span.icon::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.call.done.OUTGOING span.icon::before,div.fragment.hub div.categoryContainer.recents div.item div.message div.call.noanswer span.icon::before,div.fragment.dialer div.categoryContainer.recents div.item div.message div.call.noanswer span.icon::before,div.fragment.allHistory div.recents.win-listview div.item div.message div.call.noanswer span.icon::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.call.noanswer span.icon::before,div.chat div.log div.node.notification.NOANSWER div.iconContainer span.icon::before,div.chat div.log div.node.notification.OUTGOINGCALL div.iconContainer span.icon::before{ content:"\E10F"; - font-family:"Skype UI Symbol"; + font-family:"Skype UI Symbol" !important; font-weight:bold } div.fragment.hub div.categoryContainer.recents div.item div.message div.call.done.INCOMING span.icon::before,div.fragment.dialer div.categoryContainer.recents div.item div.message div.call.done.INCOMING span.icon::before,div.fragment.allHistory div.recents.win-listview div.item div.message div.call.done.INCOMING span.icon::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.call.done.INCOMING span.icon::before,div.fragment.hub div.categoryContainer.recents div.item div.message div.call.declined span.icon::before,div.fragment.dialer div.categoryContainer.recents div.item div.message div.call.declined span.icon::before,div.fragment.allHistory div.recents.win-listview div.item div.message div.call.declined span.icon::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.call.declined span.icon::before,div.chat div.log div.node.notification.DECLINED div.iconContainer span.icon::before,div.chat div.log div.node.notification.INCOMINGCALL div.iconContainer span.icon::before{ content:"\E10E"; - font-family:"Skype UI Symbol"; + font-family:"Skype UI Symbol" !important; font-weight:bold } div.fragment.hub div.categoryContainer.recents div.item div.message div.call.busy span.icon::before,div.fragment.dialer div.categoryContainer.recents div.item div.message div.call.busy span.icon::before,div.fragment.allHistory div.recents.win-listview div.item div.message div.call.busy span.icon::before,#skypeAppBar div.win-appbar.win-top div.recentsContainer div.win-listview.recents div.item div.message div.call.busy span.icon::before,div.chat div.log div.node.notification.BUSY div.iconContainer span.icon::before{ content:"\E10F"; - font-family:"Skype UI Symbol"; + font-family:"Skype UI Symbol" !important; font-weight:bold } body.RTL h1.title.link::after,body.RTL button.title.link::after{ @@ -252,7 +252,7 @@ div.fragment header h2.title,div.fragment.allHistory header div.wrapper.DEFAULTV } button.backbutton{ background:transparent; - font-family:"Skype UI Symbol"; + font-family:"Skype UI Symbol" !important; font-weight:bold } button.backbutton::before{ @@ -592,7 +592,7 @@ h1.title.link::after,button.title.link::after{ margin-right:15px; content:"\E421"; display:inline-block; - font-family:"Skype UI Symbol"; + font-family:"Skype UI Symbol" !important; position:relative; top:-2px; line-height:normal; @@ -921,7 +921,7 @@ body.RTL #skypeAppBar input.skype-placeholder,body.RTL #skypeAppBar input.appBar border:none } div.fragment.participantList div.participants>div.win-listview div.win-selectioncheckmark,div.fragment.hub div.surface div.categoryContainer.favorites div.itemsContainer div.favoritesList div.win-selected div.win-selectioncheckmark{ - font-family:"Skype UI Symbol"; + font-family:"Skype UI Symbol" !important; font-weight:bold; font-size:20px; padding-top:4px; diff --git a/packages/microsoft.skypeapp/pages/allHistory.css b/packages/microsoft.skypeapp/pages/allHistory.css index bc07cb4b..f4b4e69a 100644 --- a/packages/microsoft.skypeapp/pages/allHistory.css +++ b/packages/microsoft.skypeapp/pages/allHistory.css @@ -1 +1,164 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.fragment.allHistory{height:100%}@media screen and (max-aspect-ratio: 1 / 1){div.fragment.allHistory header div.wrapper>button.title{display:none}}div.fragment.allHistory header div.wrapper>button.title.filterUnread span.unreadCountNoCircle{display:none;font-weight:600}div.fragment.allHistory header div.wrapper>button.title.filterUnread.UNREAD span.unreadCountNoCircle{display:inline-block}@media screen and (max-aspect-ratio: 1 / 1){div.fragment.allHistory header div.wrapper>button.title.filterAll{display:inline-block}}div.fragment.allHistory header div.wrapper>button.title>*{display:inline-block}@media screen and (max-aspect-ratio: 1 / 1){div.fragment.allHistory header div.wrapper.UNREADVIEW>button.title.filterUnread{display:inline-block}}div.fragment.allHistory div.noUnread,div.fragment.allHistory div.recents.win-listview{-ms-grid-row:2;-ms-grid-column:1;height:100%}div.fragment.allHistory div.noUnread div.win-viewport div.win-surface,div.fragment.allHistory div.recents.win-listview div.win-viewport div.win-surface{margin-bottom:5%}@media screen and (max-aspect-ratio: 1 / 1){div.fragment.allHistory div.noUnread div.win-viewport div.win-surface,div.fragment.allHistory div.recents.win-listview div.win-viewport div.win-surface{margin-bottom:0}}div.fragment.allHistory div.noUnread{display:none;margin-left:120px;margin-top:20px;height:calc(100% - 20px)}body.RTL div.fragment.allHistory div.noUnread{margin-left:0;margin-right:120px}@media screen and (max-aspect-ratio: 1 / 1){body.RTL div.fragment.allHistory div.noUnread{margin-left:60px;margin-right:60px}}@media screen and (max-aspect-ratio: 1 / 1){div.fragment.allHistory div.noUnread{margin-left:60px;margin-right:60px}}div.fragment.allHistory.UNREADVIEW.NOUNREAD div.noUnread{display:block}div.fragment.allHistory.UNREADVIEW.NOUNREAD div.recents{display:none}div.fragment.allHistory div.recents.win-listview div.win-container{width:320px;height:90px;margin-right:40px}body.RTL div.fragment.allHistory div.recents.win-listview div.win-container{margin-right:0;margin-left:40px}@media screen and (max-aspect-ratio: 1 / 1){body.RTL div.fragment.allHistory div.recents.win-listview div.win-container{margin-right:0;margin-left:0}}@media screen and (max-aspect-ratio: 1 / 1){div.fragment.allHistory div.recents.win-listview div.win-container{margin-right:0;margin-left:0}}@media screen and (max-width: 640px){div.fragment.allHistory div.recents.win-listview div.win-container{width:100%}}div.fragment.allHistory div.recents.win-listview div.win-container .win-focusedoutline{left:2px;top:2px;width:calc(100% - 4px);height:calc(100% - 4px)}div.fragment.allHistory div.recents.win-listview div.win-viewport{overflow-x:auto;overflow-y:hidden}div.fragment.allHistory div.recents.win-listview div.win-viewport div.win-surface{margin-left:100px;margin-top:60px}body.RTL div.fragment.allHistory div.recents.win-listview div.win-viewport div.win-surface{margin-left:0;margin-right:100px}@media screen and (max-aspect-ratio: 1 / 1){body.RTL div.fragment.allHistory div.recents.win-listview div.win-viewport div.win-surface{margin:0px}}@media screen and (max-aspect-ratio: 1 / 1){div.fragment.allHistory div.recents.win-listview div.win-viewport div.win-surface{margin:0px}}@media screen and (max-aspect-ratio: 1 / 1){div.fragment.allHistory div.recents.win-listview div.win-viewport{overflow-x:hidden;overflow-y:auto}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.fragment.allHistory { + height: 100% +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.fragment.allHistory header div.wrapper>button.title { + display: none + } +} + +div.fragment.allHistory header div.wrapper>button.title.filterUnread span.unreadCountNoCircle { + display: none; + font-weight: 600 +} + +div.fragment.allHistory header div.wrapper>button.title.filterUnread.UNREAD span.unreadCountNoCircle { + display: inline-block +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.fragment.allHistory header div.wrapper>button.title.filterAll { + display: inline-block + } +} + +div.fragment.allHistory header div.wrapper>button.title>* { + display: inline-block +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.fragment.allHistory header div.wrapper.UNREADVIEW>button.title.filterUnread { + display: inline-block + } +} + +div.fragment.allHistory div.noUnread, +div.fragment.allHistory div.recents.win-listview { + -ms-grid-row: 2; + -ms-grid-column: 1; + height: 100% +} + +div.fragment.allHistory div.noUnread div.win-viewport div.win-surface, +div.fragment.allHistory div.recents.win-listview div.win-viewport div.win-surface { + margin-bottom: 5% +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.fragment.allHistory div.noUnread div.win-viewport div.win-surface, + div.fragment.allHistory div.recents.win-listview div.win-viewport div.win-surface { + margin-bottom: 0 + } +} + +div.fragment.allHistory div.noUnread { + display: none; + margin-left: 120px; + margin-top: 20px; + height: calc(100% - 20px) +} + +body.RTL div.fragment.allHistory div.noUnread { + margin-left: 0; + margin-right: 120px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + body.RTL div.fragment.allHistory div.noUnread { + margin-left: 60px; + margin-right: 60px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.fragment.allHistory div.noUnread { + margin-left: 60px; + margin-right: 60px + } +} + +div.fragment.allHistory.UNREADVIEW.NOUNREAD div.noUnread { + display: block +} + +div.fragment.allHistory.UNREADVIEW.NOUNREAD div.recents { + display: none +} + +div.fragment.allHistory div.recents.win-listview div.win-container { + width: 320px; + height: 90px; + margin-right: 40px +} + +body.RTL div.fragment.allHistory div.recents.win-listview div.win-container { + margin-right: 0; + margin-left: 40px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + body.RTL div.fragment.allHistory div.recents.win-listview div.win-container { + margin-right: 0; + margin-left: 0 + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.fragment.allHistory div.recents.win-listview div.win-container { + margin-right: 0; + margin-left: 0 + } +} + +@media screen and (max-width: 640px) { + div.fragment.allHistory div.recents.win-listview div.win-container { + width: 100% + } +} + +div.fragment.allHistory div.recents.win-listview div.win-container .win-focusedoutline { + left: 2px; + top: 2px; + width: calc(100% - 4px); + height: calc(100% - 4px) +} + +div.fragment.allHistory div.recents.win-listview div.win-viewport { + overflow-x: auto; + overflow-y: hidden +} + +div.fragment.allHistory div.recents.win-listview div.win-viewport div.win-surface { + margin-left: 100px; + margin-top: 60px +} + +body.RTL div.fragment.allHistory div.recents.win-listview div.win-viewport div.win-surface { + margin-left: 0; + margin-right: 100px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + body.RTL div.fragment.allHistory div.recents.win-listview div.win-viewport div.win-surface { + margin: 0px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.fragment.allHistory div.recents.win-listview div.win-viewport div.win-surface { + margin: 0px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.fragment.allHistory div.recents.win-listview div.win-viewport { + overflow-x: hidden; + overflow-y: auto + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/pages/contacts.css b/packages/microsoft.skypeapp/pages/contacts.css index 4d6191ff..2921ce59 100644 --- a/packages/microsoft.skypeapp/pages/contacts.css +++ b/packages/microsoft.skypeapp/pages/contacts.css @@ -1 +1,141 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.fragment.contacts{height:100%}div.fragment.contacts div.contactList{-ms-grid-row:2;height:100%}div.fragment.contacts div.contactList .win-surface{margin-top:35px}div.fragment.contacts div.noContacts{display:none}div.fragment.contacts header button.addContactButoon{padding:0;min-height:0;min-width:0;font-weight:normal;border:0;font-family:"Skype UI Symbol";font-weight:normal;font-size:40px;background-color:#00aff0;color:#fff;display:inline-block;width:40px;height:40px;border-radius:50%;line-height:normal;text-align:center;-ms-grid-column:3;-ms-grid-column-align:end;margin:0 39px 0 0;z-index:101}@media screen and (-ms-high-contrast: active){div.fragment.contacts header button.addContactButoon{box-sizing:content-box;background-color:ButtonFace;color:ButtonText;border:2px solid ButtonText}div.fragment.contacts header button.addContactButoon:hover:not([disabled]){background-color:Highlight;color:HighlightText}div.fragment.contacts header button.addContactButoon[disabled]{border-color:GrayText;color:GrayText}}div.fragment.contacts header button.addContactButoon:hover{background-color:#0182b3;color:#fff}@media screen and (max-width: 400px){div.fragment.contacts header button.addContactButoon{font-size:10pt;height:30px;line-height:26px;width:30px;font-weight:bold;vertical-align:0.37em;margin:0 10px 0 0}body.RTL div.fragment.contacts header button.addContactButoon{margin:0 0 0 10px}}div.fragment.contacts header div.wrapper button.title.filterOnline{display:none}div.fragment.contacts header div.wrapper button.title.filterOnline.ONLINE{display:inline-block}div.fragment.contacts header div.wrapper button.title.filterGroups{display:none}div.fragment.contacts header div.wrapper button.title.filterGroups.GROUPS{display:inline-block}div.fragment.contacts header div.wrapper button.title>*{display:inline-block}@media screen and (max-aspect-ratio: 1 / 1){div.fragment.contacts header div.wrapper button.title>*{display:inline}}div.fragment.contacts header div.wrapper button.title.filterOnline span.onlineCount{font-weight:600}@media screen and (max-aspect-ratio: 1 / 1){div.fragment.contacts header div.wrapper button.title.filterOnline{overflow:visible}div.fragment.contacts header div.wrapper button.title.filterOnline span.onlineLabel{max-width:calc(100% - 60px);overflow:hidden;display:inline-block;vertical-align:bottom;text-overflow:ellipsis}}div.fragment.contacts.EMPTY div.noContacts{display:block;-ms-grid-row:2;color:#93999d;margin:0 39px}@media screen and (max-aspect-ratio: 1 / 1){div.fragment.contacts.EMPTY div.noContacts{margin:0 20px}}div.fragment.contacts.EMPTY div.contactList{display:none} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.fragment.contacts { + height: 100% +} + +div.fragment.contacts div.contactList { + -ms-grid-row: 2; + height: 100% +} + +div.fragment.contacts div.contactList .win-surface { + margin-top: 35px +} + +div.fragment.contacts div.noContacts { + display: none +} + +div.fragment.contacts header button.addContactButoon { + padding: 0; + min-height: 0; + min-width: 0; + font-weight: normal; + border: 0; + font-family: "Skype UI Symbol" !important; + font-weight: normal; + font-size: 40px; + background-color: #00aff0; + color: #fff; + display: inline-block; + width: 40px; + height: 40px; + border-radius: 50%; + line-height: normal; + text-align: center; + -ms-grid-column: 3; + -ms-grid-column-align: end; + margin: 0 39px 0 0; + z-index: 101 +} + +@media screen and (-ms-high-contrast: active) { + div.fragment.contacts header button.addContactButoon { + box-sizing: content-box; + background-color: ButtonFace; + color: ButtonText; + border: 2px solid ButtonText + } + div.fragment.contacts header button.addContactButoon:hover:not([disabled]) { + background-color: Highlight; + color: HighlightText + } + div.fragment.contacts header button.addContactButoon[disabled] { + border-color: GrayText; + color: GrayText + } +} + +div.fragment.contacts header button.addContactButoon:hover { + background-color: #0182b3; + color: #fff +} + +@media screen and (max-width: 400px) { + div.fragment.contacts header button.addContactButoon { + font-size: 10pt; + height: 30px; + line-height: 26px; + width: 30px; + font-weight: bold; + vertical-align: 0.37em; + margin: 0 10px 0 0 + } + body.RTL div.fragment.contacts header button.addContactButoon { + margin: 0 0 0 10px + } +} + +div.fragment.contacts header div.wrapper button.title.filterOnline { + display: none +} + +div.fragment.contacts header div.wrapper button.title.filterOnline.ONLINE { + display: inline-block +} + +div.fragment.contacts header div.wrapper button.title.filterGroups { + display: none +} + +div.fragment.contacts header div.wrapper button.title.filterGroups.GROUPS { + display: inline-block +} + +div.fragment.contacts header div.wrapper button.title>* { + display: inline-block +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.fragment.contacts header div.wrapper button.title>* { + display: inline + } +} + +div.fragment.contacts header div.wrapper button.title.filterOnline span.onlineCount { + font-weight: 600 +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.fragment.contacts header div.wrapper button.title.filterOnline { + overflow: visible + } + div.fragment.contacts header div.wrapper button.title.filterOnline span.onlineLabel { + max-width: calc(100% - 60px); + overflow: hidden; + display: inline-block; + vertical-align: bottom; + text-overflow: ellipsis + } +} + +div.fragment.contacts.EMPTY div.noContacts { + display: block; + -ms-grid-row: 2; + color: #93999d; + margin: 0 39px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.fragment.contacts.EMPTY div.noContacts { + margin: 0 20px + } +} + +div.fragment.contacts.EMPTY div.contactList { + display: none +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/pages/conversation.css b/packages/microsoft.skypeapp/pages/conversation.css index 5ecea62c..4e4de92c 100644 --- a/packages/microsoft.skypeapp/pages/conversation.css +++ b/packages/microsoft.skypeapp/pages/conversation.css @@ -1 +1,219 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.page section.navigationContainer>div>div.conversation.fragment{display:block;width:100%;background-color:#fff;overflow:hidden}@media screen and (max-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.conversation.fragment{display:-ms-grid;-ms-grid-rows:105px 1fr 115px}}@media screen and (orientation: portrait) and (-ms-high-contrast: active){div.page section.navigationContainer>div>div.conversation.fragment{-ms-grid-rows:105px 1fr 117px}}@media screen and (max-width: 400px){div.page section.navigationContainer>div>div.conversation.fragment{-ms-grid-rows:105px 1fr 72px}}div.page section.navigationContainer>div>div.conversation.fragment div.profileInfo{float:left;height:100%}body.RTL div.page section.navigationContainer>div>div.conversation.fragment div.profileInfo{float:right}@media screen and (max-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.conversation.fragment div.profileInfo{-ms-grid-row:1;-ms-grid-row-span:3}}div.page section.navigationContainer>div>div.conversation.fragment div.chatContainer{float:right;width:calc(100% - 360px);height:100%;z-index:10;background-color:#fff;height:calc(100% - 15px)}@media screen and (-ms-high-contrast: active){div.page section.navigationContainer>div>div.conversation.fragment div.chatContainer{height:calc(100% - 17px)}}body.RTL div.page section.navigationContainer>div>div.conversation.fragment div.chatContainer{float:left}@media screen and (max-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.conversation.fragment div.chatContainer{-ms-grid-row:2;width:100%}}div.page section.navigationContainer>div>div.conversation.fragment div.liveGroupConversationContainer{display:none;height:100%;overflow:hidden;z-index:101;background:-ms-linear-gradient(top, #00aff0 0%, #02a9e9 17%, #0898d5 42%, #127cb4 73%, #1d5e91 100%)}div.page section.navigationContainer>div>div.conversation.fragment div.liveGroupConversationContainer.SLOWDOWNTRANSITION{transition-timing-function:ease-out;transition-property:width, height;transition-duration:0.5s}body.RTL div.page section.navigationContainer>div>div.conversation.fragment div.liveGroupConversationContainer{float:right}div.page section.navigationContainer>div>div.conversation.fragment.LIVE div.liveGroupConversationContainer{background:-ms-linear-gradient(top, #054359 0%, #043141 12%, #032632 22%, #02171e 41%, #010e12 65%, #010c0f 100%)}div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE{width:calc(100% + 320px)}div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE div.profileInfo{display:none}div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE div.liveGroupConversationContainer{width:100%;display:block}@media screen and (min-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE div.liveGroupConversationContainer{display:inline-block;float:left;width:calc(100% - 320px)}}div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE div.chatContainer{width:100%;height:100%}@media screen and (min-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE div.chatContainer{width:320px;float:left;display:inline-block}body.RTL div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE div.chatContainer{float:right}}div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE>header{display:none}div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE.CHATOPENINLIVE div.liveGroupConversationContainer{width:calc(100% - 320px )}@media screen and (min-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE.CHATOPENINLIVE div.liveGroupConversationContainer{width:calc(100% - 640px )}}@media screen and (max-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE.CHATOPENINLIVE div.liveGroupConversationContainer{height:240px;width:100%}body.KEYBOARDUP div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE.CHATOPENINLIVE div.liveGroupConversationContainer{height:90px}}@media screen and (max-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE{width:100%;display:block}div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE div.chatContainer{height:calc(100% - 240px)}body.KEYBOARDUP div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE div.chatContainer{height:calc(100% - 90px)}}div.page section.navigationContainer>div>div.conversation.fragment.CHATHIDDEN div.chatContainer{display:none}body.LOCKSCREEN div.page section.navigationContainer>div>div.conversation.fragment{background:-ms-linear-gradient(top, #00aff0 0%, #02a9e9 17%, #0898d5 42%, #127cb4 73%, #1d5e91 100%)}body.LOCKSCREEN div.page section.navigationContainer>div>div.conversation.fragment div.profileInfo,body.LOCKSCREEN div.page section.navigationContainer>div>div.conversation.fragment div.chatContainer{visibility:hidden}div.page section.navigationContainer>div>div.conversation.fragment div.ringingPanelContainer{display:none;position:absolute;z-index:101;width:360px;height:calc(100% - 15px)}@media screen and (-ms-high-contrast: active){div.page section.navigationContainer>div>div.conversation.fragment div.ringingPanelContainer{height:calc(100% - 17px)}}@media screen and (max-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.conversation.fragment div.ringingPanelContainer{width:100%;-ms-grid-row:1;-ms-grid-row-span:3}}div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGCALLPANEL div.ringingPanelContainer{display:block}div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGCALLPANEL>header{z-index:100}div.page section.navigationContainer>div>div.conversation.fragment.INCOMINGCALL div.profileInfo{visibility:hidden}div.page section.navigationContainer>div>div.conversation.fragment.INCOMINGCALL>header{display:none} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.page section.navigationContainer>div>div.conversation.fragment { + display: block; + width: 100%; + background-color: #fff; + overflow: hidden +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.conversation.fragment { + display: -ms-grid; + -ms-grid-rows: 105px 1fr 115px + } +} + +@media screen and (orientation: portrait) and (-ms-high-contrast: active) { + div.page section.navigationContainer>div>div.conversation.fragment { + -ms-grid-rows: 105px 1fr 117px + } +} + +@media screen and (max-width: 400px) { + div.page section.navigationContainer>div>div.conversation.fragment { + -ms-grid-rows: 105px 1fr 72px + } +} + +div.page section.navigationContainer>div>div.conversation.fragment div.profileInfo { + float: left; + height: 100% +} + +body.RTL div.page section.navigationContainer>div>div.conversation.fragment div.profileInfo { + float: right +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.conversation.fragment div.profileInfo { + -ms-grid-row: 1; + -ms-grid-row-span: 3 + } +} + +div.page section.navigationContainer>div>div.conversation.fragment div.chatContainer { + float: right; + width: calc(100% - 360px); + height: 100%; + z-index: 10; + background-color: #fff; + height: calc(100% - 15px) +} + +@media screen and (-ms-high-contrast: active) { + div.page section.navigationContainer>div>div.conversation.fragment div.chatContainer { + height: calc(100% - 17px) + } +} + +body.RTL div.page section.navigationContainer>div>div.conversation.fragment div.chatContainer { + float: left +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.conversation.fragment div.chatContainer { + -ms-grid-row: 2; + width: 100% + } +} + +div.page section.navigationContainer>div>div.conversation.fragment div.liveGroupConversationContainer { + display: none; + height: 100%; + overflow: hidden; + z-index: 101; + background: -ms-linear-gradient(top, #00aff0 0%, #02a9e9 17%, #0898d5 42%, #127cb4 73%, #1d5e91 100%) +} + +div.page section.navigationContainer>div>div.conversation.fragment div.liveGroupConversationContainer.SLOWDOWNTRANSITION { + transition-timing-function: ease-out; + transition-property: width, height; + transition-duration: 0.5s +} + +body.RTL div.page section.navigationContainer>div>div.conversation.fragment div.liveGroupConversationContainer { + float: right +} + +div.page section.navigationContainer>div>div.conversation.fragment.LIVE div.liveGroupConversationContainer { + background: -ms-linear-gradient(top, #054359 0%, #043141 12%, #032632 22%, #02171e 41%, #010e12 65%, #010c0f 100%) +} + +div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE { + width: calc(100% + 320px) +} + +div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE div.profileInfo { + display: none +} + +div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE div.liveGroupConversationContainer { + width: 100%; + display: block +} + +@media screen and (min-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE div.liveGroupConversationContainer { + display: inline-block; + float: left; + width: calc(100% - 320px) + } +} + +div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE div.chatContainer { + width: 100%; + height: 100% +} + +@media screen and (min-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE div.chatContainer { + width: 320px; + float: left; + display: inline-block + } + body.RTL div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE div.chatContainer { + float: right + } +} + +div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE>header { + display: none +} + +div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE.CHATOPENINLIVE div.liveGroupConversationContainer { + width: calc(100% - 320px) +} + +@media screen and (min-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE.CHATOPENINLIVE div.liveGroupConversationContainer { + width: calc(100% - 640px) + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE.CHATOPENINLIVE div.liveGroupConversationContainer { + height: 240px; + width: 100% + } + body.KEYBOARDUP div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE.CHATOPENINLIVE div.liveGroupConversationContainer { + height: 90px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE { + width: 100%; + display: block + } + div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE div.chatContainer { + height: calc(100% - 240px) + } + body.KEYBOARDUP div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGFULLLIVE div.chatContainer { + height: calc(100% - 90px) + } +} + +div.page section.navigationContainer>div>div.conversation.fragment.CHATHIDDEN div.chatContainer { + display: none +} + +body.LOCKSCREEN div.page section.navigationContainer>div>div.conversation.fragment { + background: -ms-linear-gradient(top, #00aff0 0%, #02a9e9 17%, #0898d5 42%, #127cb4 73%, #1d5e91 100%) +} + +body.LOCKSCREEN div.page section.navigationContainer>div>div.conversation.fragment div.profileInfo, +body.LOCKSCREEN div.page section.navigationContainer>div>div.conversation.fragment div.chatContainer { + visibility: hidden +} + +div.page section.navigationContainer>div>div.conversation.fragment div.ringingPanelContainer { + display: none; + position: absolute; + z-index: 101; + width: 360px; + height: calc(100% - 15px) +} + +@media screen and (-ms-high-contrast: active) { + div.page section.navigationContainer>div>div.conversation.fragment div.ringingPanelContainer { + height: calc(100% - 17px) + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.conversation.fragment div.ringingPanelContainer { + width: 100%; + -ms-grid-row: 1; + -ms-grid-row-span: 3 + } +} + +div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGCALLPANEL div.ringingPanelContainer { + display: block +} + +div.page section.navigationContainer>div>div.conversation.fragment.SHOWINGCALLPANEL>header { + z-index: 100 +} + +div.page section.navigationContainer>div>div.conversation.fragment.INCOMINGCALL div.profileInfo { + visibility: hidden +} + +div.page section.navigationContainer>div>div.conversation.fragment.INCOMINGCALL>header { + display: none +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/pages/conversationHeader.css b/packages/microsoft.skypeapp/pages/conversationHeader.css index 07e02269..8184959f 100644 --- a/packages/microsoft.skypeapp/pages/conversationHeader.css +++ b/packages/microsoft.skypeapp/pages/conversationHeader.css @@ -1 +1,86 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.conversation.fragment>header{z-index:102;position:absolute;color:#fff;overflow:hidden;-ms-grid-columns:120px 1fr;left:0}body.RTL div.conversation.fragment>header{left:auto;right:0}div.conversation.fragment>header div.wrapper{margin-top:62px;display:none}@media screen and (max-aspect-ratio: 1 / 1){div.conversation.fragment>header div.wrapper{display:block}}div.conversation.fragment>header div.wrapper h1.name{margin-right:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0px 1px 1px rgba(0,0,0,0.25)}body.RTL div.conversation.fragment>header div.wrapper h1.name{margin-right:0;margin-left:15px}div.conversation.fragment.INCOMINGCALL>header button.backbutton{visibility:hidden}@media screen and (max-aspect-ratio: 1 / 1){div.conversation.fragment>header{color:#0095cc;width:calc(100% - 80px)}div.conversation.fragment>header div.wrapper{margin-top:36px}div.conversation.fragment>header div.wrapper h1.name{box-shadow:none;text-shadow:none;border-color:#0095cc;color:#0095cc;margin-right:0;width:100%;line-height:35px}body.RTL div.conversation.fragment>header div.wrapper div.callStatus{left:auto;right:0}div.conversation.fragment.EMERGENCY div.chatContainer,div.conversation.fragment.EMERGENCY header div.wrapper{display:none}}@media screen and (max-width: 400px){div.conversation.fragment>header div.wrapper{margin-top:32px}}@media screen and (-ms-high-contrast: active){div.conversation.fragment>header div.wrapper h1.name,div.conversation.fragment>header div.wrapper div.callStatus{background-color:Window}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.conversation.fragment>header { + z-index: 102; + position: absolute; + color: #fff; + overflow: hidden; + -ms-grid-columns: 120px 1fr; + left: 0 +} + +body.RTL div.conversation.fragment>header { + left: auto; + right: 0 +} + +div.conversation.fragment>header div.wrapper { + margin-top: 62px; + display: none +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.conversation.fragment>header div.wrapper { + display: block + } +} + +div.conversation.fragment>header div.wrapper h1.name { + margin-right: 15px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25) +} + +body.RTL div.conversation.fragment>header div.wrapper h1.name { + margin-right: 0; + margin-left: 15px +} + +div.conversation.fragment.INCOMINGCALL>header button.backbutton { + visibility: hidden +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.conversation.fragment>header { + color: #0095cc; + width: calc(100% - 80px) + } + div.conversation.fragment>header div.wrapper { + margin-top: 36px + } + div.conversation.fragment>header div.wrapper h1.name { + box-shadow: none; + text-shadow: none; + border-color: #0095cc; + color: #0095cc; + margin-right: 0; + width: 100%; + line-height: 35px + } + body.RTL div.conversation.fragment>header div.wrapper div.callStatus { + left: auto; + right: 0 + } + div.conversation.fragment.EMERGENCY div.chatContainer, + div.conversation.fragment.EMERGENCY header div.wrapper { + display: none + } +} + +@media screen and (max-width: 400px) { + div.conversation.fragment>header div.wrapper { + margin-top: 32px + } +} + +@media screen and (-ms-high-contrast: active) { + div.conversation.fragment>header div.wrapper h1.name, + div.conversation.fragment>header div.wrapper div.callStatus { + background-color: Window + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/pages/dialer.css b/packages/microsoft.skypeapp/pages/dialer.css index d40e4281..dcd87f01 100644 --- a/packages/microsoft.skypeapp/pages/dialer.css +++ b/packages/microsoft.skypeapp/pages/dialer.css @@ -407,7 +407,7 @@ div.fragment.dialer div.dialpad div.actionButtons>div { border-radius: 50%; width: 60px; height: 60px; - font-family: "Skype UI Symbol"; + font-family: "Skype UI Symbol" !important; font-size: 60px; line-height: normal; text-align: center; @@ -514,7 +514,7 @@ div.fragment.dialer div.categoryContainer.emergencyCall div.restrictedCountry di width: 30px; border-radius: 50%; right: 0; - font-family: "Skype UI Symbol"; + font-family: "Skype UI Symbol" !important; font-size: 30px; line-height: normal; text-align: center; @@ -635,7 +635,7 @@ div.fragment.dialer div.categoryContainer.recents div.itemsPlaceholder div.icon div.fragment.dialer div.categoryContainer.recents div.itemsPlaceholder div.icon::before { content: "\E30b"; - font-family: "Skype UI Symbol"; + font-family: "Skype UI Symbol" !important; font-size: 64px; font-weight: bold; position: relative; @@ -739,7 +739,7 @@ div.fragment.dialer div.categoryContainer.accountInfo div.item div.exceptionStat } div.fragment.dialer div.categoryContainer.accountInfo div.item div.exceptionState>div>div.icon { - font-family: "Skype UI Symbol"; + font-family: "Skype UI Symbol" !important; font-size: 44px; position: relative; top: 7px; @@ -773,7 +773,7 @@ div.fragment.dialer div.categoryContainer.recents div.item div.buttonFrame div.c min-width: 0; font-weight: normal; border: 0; - font-family: "Skype UI Symbol"; + font-family: "Skype UI Symbol" !important; font-weight: normal; font-size: 40px; background-color: #00aff0; diff --git a/packages/microsoft.skypeapp/pages/hub.css b/packages/microsoft.skypeapp/pages/hub.css index 14153fc1..04b5d8f1 100644 --- a/packages/microsoft.skypeapp/pages/hub.css +++ b/packages/microsoft.skypeapp/pages/hub.css @@ -342,7 +342,7 @@ div.fragment.hub div.surface div.categoryContainer div.itemsContainer div.itemsP margin-bottom:9px } div.fragment.hub div.surface div.categoryContainer div.itemsContainer div.itemsPlaceholder div.icon::before{ - font-family:"Skype UI Symbol"; + font-family:"Skype UI Symbol" !important; font-size:64px; font-weight:bold; position:relative; diff --git a/packages/microsoft.skypeapp/pages/linkOrCreateAccount.css b/packages/microsoft.skypeapp/pages/linkOrCreateAccount.css index a30db381..353123bc 100644 --- a/packages/microsoft.skypeapp/pages/linkOrCreateAccount.css +++ b/packages/microsoft.skypeapp/pages/linkOrCreateAccount.css @@ -1 +1,748 @@ -@charset "UTF-8";/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.page section.navigationContainer>div>div.fragment.linkOrCreateAccount{display:-ms-grid;-ms-grid-rows:1fr minmax(50vh, min-content) 80px;-ms-grid-columns:1fr 100px 650px 100px 1fr;background-color:#00aff0;height:100%;width:100%;color:white}body.KEYBOARDUP div.page section.navigationContainer>div>div.fragment.linkOrCreateAccount{-ms-grid-rows:12vh 88vh}body.KEYBOARDUP div.fragment.linkOrCreateAccount div.logo{visibility:hidden}div.fragment.linkOrCreateAccount input::-ms-check{background-color:#0095cc;border-color:#fff;color:#fff}div.fragment.linkOrCreateAccount input:hover::-ms-check{background-color:rgba(0,149,204,0.75);color:#fff}div.fragment.linkOrCreateAccount input:hover:active::-ms-check{color:#fff;background-color:rgba(0,149,204,0.25)}div.fragment.linkOrCreateAccount>div.msaLoginInfo{position:absolute;bottom:15px;width:100%;left:50%;margin-left:-50%;text-align:center}div.fragment.linkOrCreateAccount>div.msaLoginInfo a{color:white}div.fragment.linkOrCreateAccount h2{margin-bottom:23px}div.fragment.linkOrCreateAccount a[href],div.fragment.linkOrCreateAccount a.link{color:white;font-weight:600}div.fragment.linkOrCreateAccount button:not(.backbutton){background-color:rgba(0,0,0,0.15);border:0px;color:white;cursor:pointer;padding:0px 40px 0px 40px;min-height:40px;height:auto;border-radius:20px;margin-top:10px}div.fragment.linkOrCreateAccount button:not(.backbutton):hover{background-color:rgba(0,0,0,0.2)}div.fragment.linkOrCreateAccount button:not(.backbutton):active{background-color:rgba(0,0,0,0.3)}div.fragment.linkOrCreateAccount button:not(.backbutton)[disabled]{background-color:rgba(0,0,0,0.1);color:rgba(255,255,255,0.4);cursor:auto}div.fragment.linkOrCreateAccount input[type=text],div.fragment.linkOrCreateAccount input[type=password]{display:block;width:calc(100% - 6px);height:40px;margin-bottom:20px}div.fragment.linkOrCreateAccount div.logo{-ms-grid-row:1;-ms-grid-column:3;-ms-grid-column-align:center;-ms-grid-row-align:center}div.fragment.linkOrCreateAccount div.startUsingSkype{-ms-grid-row:2;-ms-grid-column-span:5;-ms-grid-column-align:center;display:-ms-grid;-ms-grid-columns:40px calc(50% - 90px) 100px calc(50% - 90px);-ms-grid-rows:max-content 1fr}div.fragment.linkOrCreateAccount div.startUsingSkype div.existingUser{-ms-grid-row:1;-ms-grid-column:2;-ms-grid-row-align:start}div.fragment.linkOrCreateAccount div.startUsingSkype button.existingUser{-ms-grid-row:2;-ms-grid-column:2;-ms-grid-row-align:start;-ms-grid-column-align:start}div.fragment.linkOrCreateAccount div.startUsingSkype div.newUser{-ms-grid-row:1;-ms-grid-column:4;-ms-grid-row-align:start}div.fragment.linkOrCreateAccount div.startUsingSkype button.newUser{-ms-grid-row:2;-ms-grid-column:4;-ms-grid-row-align:start;-ms-grid-column-align:start}div.fragment.linkOrCreateAccount div.startUsingSkype p{margin-bottom:16px;margin-top:-7px}div.fragment.linkOrCreateAccount div.mergeAccounts{-ms-grid-row:5;-ms-grid-column:6;display:-ms-grid;-ms-grid-columns:75px 75px 20px 30px 10px 1fr;-ms-grid-rows:38px 37px auto auto}div.fragment.linkOrCreateAccount div.mergeAccounts div.actions{-ms-grid-row:5;-ms-grid-column:1;-ms-grid-column-span:6;-ms-grid-row-align:end}div.fragment.linkOrCreateAccount button.backbutton{-ms-grid-row:2;-ms-grid-column:2;-ms-grid-column-align:end;margin-right:20px;-ms-grid-row-align:start;margin-top:10px}div.fragment.linkOrCreateAccount div.linkSkypeAccount{-ms-grid-row:2;-ms-grid-column:3;-ms-grid-row-align:start}div.fragment.linkOrCreateAccount div.createNewAccount{-ms-grid-row:2;-ms-grid-column:3;-ms-grid-row-align:start}div.fragment.linkOrCreateAccount div.createNewAccount div.acceptTermsOfUse ul{list-style:none;padding:0 0 4px 25px}div.fragment.linkOrCreateAccount div.createNewAccount div.acceptTermsOfUse ul li{position:relative;padding-bottom:10px}div.fragment.linkOrCreateAccount div.createNewAccount div.acceptTermsOfUse ul li input{margin-left:-25px;width:15px;position:absolute;top:-3px}div.fragment.linkOrCreateAccount div.logo{display:block;width:280px;height:123px;margin-top:0px}div.fragment.linkOrCreateAccount div.logo img{width:100%;height:100%}div.fragment.linkOrCreateAccount .hidden{display:none !important}div.fragment.linkOrCreateAccount div.error{display:-ms-grid;-ms-grid-rows:1fr;-ms-grid-columns:55px 1fr;border:2px solid #0095CC;margin-bottom:20px}div.fragment.linkOrCreateAccount div.error div.icon{-ms-grid-column:1;-ms-grid-row:1;-ms-grid-column-align:center;-ms-grid-row-align:center;margin-top:4px}div.fragment.linkOrCreateAccount div.error div.icon:before{content:"\E601";font-family:"Skype UI Symbol";font-weight:bold;font-size:26.67px}div.fragment.linkOrCreateAccount div.error div.message{-ms-grid-column:2;-ms-grid-row:1;margin-top:12px;margin-bottom:12px;padding-right:5px}div.fragment.linkOrCreateAccount #accountContact{margin-bottom:20px}div.fragment.linkOrCreateAccount div.linkSkypeAccount div.actions>button{float:left;margin-right:20px}body.RTL div.fragment.linkOrCreateAccount div.linkSkypeAccount div.actions>button{float:right;margin-left:20px;margin-right:0}div.fragment.linkOrCreateAccount div.linkSkypeAccount div.actions>a{position:relative;top:18px;left:15px}div.fragment.linkOrCreateAccount div.linkSkypeAccount div.accountAlreadyLinked>a{display:block}div.fragment.linkOrCreateAccount div.linkSkypeAccount div.accountAlreadyLinked>ul{padding:0 20px 10px 20px}div.fragment.linkOrCreateAccount div.linkSkypeAccount div.accountAlreadyLinked>ul>li{margin-top:5px;margin-bottom:10px}div.fragment.linkOrCreateAccount div.linkSkypeAccount div.accountAlreadyLinked>ul.noSignOut>li.signOut,div.fragment.linkOrCreateAccount div.linkSkypeAccount div.accountAlreadyLinked>ul.signOut>li.noSignOut{display:none}div.fragment.linkOrCreateAccount div.contactWrapper{display:-ms-grid;width:300px;height:75px;margin-bottom:10px;-ms-grid-rows:1fr;white-space:nowrap;-ms-grid-columns:75px 15px 1fr}div.fragment.linkOrCreateAccount div.contactWrapper div.avatar{-ms-grid-column:1;background-size:cover}div.fragment.linkOrCreateAccount div.contactWrapper div.name{margin-top:7px;-ms-grid-column:3;-ms-grid-row-align:start}div.fragment.linkOrCreateAccount div.contactWrapper div.username{margin-bottom:13px;-ms-grid-column:3;-ms-grid-row-align:end}div.fragment.linkOrCreateAccount div.accountsList{height:auto;min-height:100px;max-height:170px;overflow-y:auto;-ms-overflow-style:scrollbar}div.fragment.linkOrCreateAccount div.win-listview div.win-container{margin:0;background-color:transparent;height:85px}div.fragment.linkOrCreateAccount div.win-listview div.win-container:hover{outline:none;background-color:transparent}div.fragment.linkOrCreateAccount div.win-listview div.win-container div.win-focusedoutline{left:2px;top:2px;width:calc(100% - 24px);height:calc(100% - 4px);outline-width:2px;outline-color:black}@media screen and (-ms-high-contrast: active){div.fragment.linkOrCreateAccount div.win-listview div.win-container div.win-focusedoutline{left:5px;top:5px;width:calc(100% - 29px);height:calc(100% - 10px);outline-width:5px;outline-color:windowText}}div.fragment.linkOrCreateAccount #liveIdAvatar{-ms-grid-row:1;-ms-grid-row-span:2;-ms-grid-column:1;-ms-grid-row-align:start;width:75px;height:75px;background:url("/images/avatarMSAccount.png") no-repeat center center;background-size:cover}div.fragment.linkOrCreateAccount #skypeAvatar{-ms-grid-row:1;-ms-grid-row-span:2;-ms-grid-column:2;background:url("/images/avatar.default.unknown.png") no-repeat center center;background-size:cover}div.fragment.linkOrCreateAccount #plusSign{-ms-grid-column:1;-ms-grid-column-align:center;-ms-grid-column-span:2;-ms-grid-row:1;-ms-grid-row-align:center;-ms-grid-row-span:2;z-index:2}div.fragment.linkOrCreateAccount #plusSign>a{display:inline-block;font-family:"Skype UI Symbol";font-size:35px;border-radius:50%;margin:0px 0px;line-height:normal;text-align:center;color:#fff;border-color:#fff;cursor:default;width:35px;height:35px;background-color:#00AFF0}div.fragment.linkOrCreateAccount #skypeAvatarImg{width:75px;height:75px}div.fragment.linkOrCreateAccount #liveIdAvatarImg{width:75px;height:75px}div.fragment.linkOrCreateAccount #liveIdLogo{-ms-grid-row:1;-ms-grid-row-align:center;-ms-grid-column:4;background:url("/images/logoMSAccount.png") no-repeat center center;width:30px;height:25px}div.fragment.linkOrCreateAccount #skypeLogo{-ms-grid-row:2;-ms-grid-row-align:center;-ms-grid-column:4;height:28px}div.fragment.linkOrCreateAccount #skypeLogo:after{content:"\E001";font-family:"Skype UI Symbol";font-weight:bold;font-size:28px;line-height:normal}div.fragment.linkOrCreateAccount #liveIdUsername{-ms-grid-row:1;-ms-grid-row-align:center;-ms-grid-column:6;font-size:20px}div.fragment.linkOrCreateAccount #skypeUsername{-ms-grid-row:2;-ms-grid-row-align:center;-ms-grid-column:6;font-size:20px;margin-bottom:10px}div.fragment.linkOrCreateAccount #mergeAccountsNote{-ms-grid-row:4;-ms-grid-column:1;-ms-grid-column-span:6;-ms-grid-row-align:start;padding-top:10px}div.fragment.linkOrCreateAccount #accountsAriaLabel{-ms-grid-row:1;-ms-grid-row-span:2;-ms-grid-column:4;-ms-grid-column-span:3}body.RTL div.fragment.linkOrCreateAccount div.createNewAccount div.acceptTermsOfUse ul{list-style:none;padding-right:25px;padding-left:0}body.RTL div.fragment.linkOrCreateAccount div.createNewAccount div.acceptTermsOfUse ul li input{margin-left:0;margin-right:-25px}body.RTL div.fragment.linkOrCreateAccount button.backbutton{margin-right:0px;margin-left:20px}@media screen and (max-aspect-ratio: 1 / 1){body.RTL div.fragment.linkOrCreateAccount div.msaLoginInfo{text-align:right}body.RTL div.fragment.linkOrCreateAccount button.backbutton ~ div h2{padding-left:0;padding-right:40px}}@media screen and (-ms-view-state: filled){body.RTL div.fragment.linkOrCreateAccount div.msaLoginInfo{text-align:right}}@media screen and (-ms-high-contrast: active){div.fragment.linkOrCreateAccount div.logo,div.fragment.linkOrCreateAccount #liveIdAvatar,div.fragment.linkOrCreateAccount #liveIdLogo{-ms-high-contrast-adjust:none}div.fragment.linkOrCreateAccount input,div.fragment.linkOrCreateAccount button,div.fragment.linkOrCreateAccount input[type=text],div.fragment.linkOrCreateAccount input[type=password]{border:1px solid WindowText}div.fragment.linkOrCreateAccount div.selectSkypeAccount div.accountsList div.contactWrapper>div.avatar,div.fragment.linkOrCreateAccount div.fragment.linkOrCreateAccount div.skypeUserCredentials #accountContact div.avatar{-ms-high-contrast-adjust:none}}@media screen and (-ms-view-state: filled){div.page section.navigationContainer>div>div.fragment.linkOrCreateAccount{-ms-grid-columns:1fr 100px 500px 100px 1fr}div.fragment.linkOrCreateAccount div.msaLoginInfo{position:static;text-align:left;-ms-grid-row:3;-ms-grid-row-align:end;-ms-grid-column:3;width:auto;margin:0 0 15px 0;left:0;bottom:0}div.fragment.linkOrCreateAccount div.startUsingSkype{-ms-grid-columns:1fr;-ms-grid-rows:max-content 100px max-content 1fr;-ms-grid-column:3;-ms-grid-row:2;-ms-grid-column-span:1;-ms-grid-column-align:center}div.fragment.linkOrCreateAccount div.startUsingSkype div.newUser{-ms-grid-row:3;-ms-grid-column:1}div.fragment.linkOrCreateAccount div.startUsingSkype div.existingUser{-ms-grid-column:1}div.fragment.linkOrCreateAccount div.startUsingSkype button.newUser{-ms-grid-column:1;-ms-grid-row:4}div.fragment.linkOrCreateAccount div.startUsingSkype button.existingUser{-ms-grid-column:1}}@media screen and (max-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.fragment.linkOrCreateAccount{-ms-grid-columns:minmax(40px, 1fr) minmax(240px, 500px) minmax(40px, 1fr);-ms-grid-rows:40px 65px minmax(50vh, min-content) 80px 1fr}body.KEYBOARDUP div.page section.navigationContainer>div>div.fragment.linkOrCreateAccount{-ms-grid-rows:40px 65px minmax(50vh, min-content) 80px 1fr}body.KEYBOARDUP div.fragment.linkOrCreateAccount div.logo{visibility:visible}div.fragment.linkOrCreateAccount h2{font-size:26.67px;line-height:34px;font-weight:200;padding:6px 0 0 0}div.fragment.linkOrCreateAccount div.error{-ms-grid-columns:48px 1fr}div.fragment.linkOrCreateAccount div.error div.icon{-ms-grid-row-align:start;-ms-grid-column-align:start;margin-top:15px;margin-left:13px}div.fragment.linkOrCreateAccount div.error div.message{margin-top:13px}div.fragment.linkOrCreateAccount button.backbutton{font-size:10pt;height:30px;line-height:26px;width:30px;vertical-align:-0.37em}div.fragment.linkOrCreateAccount div.linkSkypeAccount div.accountAlreadyLinked>ul{padding-left:0;list-style-position:inside}div.fragment.linkOrCreateAccount div.linkSkypeAccount div.accountAlreadyLinked>ul>li{margin-bottom:16px;line-height:18px}div.fragment.linkOrCreateAccount div.linkSkypeAccount div.accountAlreadyLinked>ul>li>span{position:relative;margin-left:-11px}div.fragment.linkOrCreateAccount button.backbutton{-ms-grid-row:3;-ms-grid-column:2;-ms-grid-column-align:start;z-index:2}div.fragment.linkOrCreateAccount button.backbutton ~ div h2{padding-left:40px}div.fragment.linkOrCreateAccount div.linkSkypeAccount,div.fragment.linkOrCreateAccount div.createNewAccount{-ms-grid-row:3;-ms-grid-column:2;-ms-grid-row-align:start;z-index:1}div.fragment.linkOrCreateAccount div.logo{display:block;width:100px;height:44px;margin-top:0px;-ms-grid-row:2;-ms-grid-column:2;-ms-grid-column-align:start;-ms-grid-row-align:start}div.fragment.linkOrCreateAccount div.startUsingSkype{-ms-grid-columns:1fr;-ms-grid-rows:max-content 100px max-content 1fr;-ms-grid-column:2;-ms-grid-row:3;-ms-grid-column-span:1}div.fragment.linkOrCreateAccount div.startUsingSkype div.newUser{-ms-grid-row:3;-ms-grid-column:1}div.fragment.linkOrCreateAccount div.startUsingSkype div.existingUser{-ms-grid-column:1}div.fragment.linkOrCreateAccount div.startUsingSkype button.newUser{-ms-grid-column:1;-ms-grid-row:4}div.fragment.linkOrCreateAccount div.startUsingSkype button.existingUser{-ms-grid-column:1}div.fragment.linkOrCreateAccount div.msaLoginInfo{position:static;text-align:left;-ms-grid-row:5;-ms-grid-row-align:end;-ms-grid-column:2;width:auto;margin:0 0 15px 0;left:0;bottom:0}div.fragment.linkOrCreateAccount div.contactWrapper{display:-ms-grid;width:100%;height:auto;margin-bottom:10px;-ms-grid-rows:1fr 1fr;white-space:nowrap;-ms-grid-columns:60px 1fr}div.fragment.linkOrCreateAccount div.contactWrapper div.avatar{-ms-grid-column:1;-ms-grid-row-span:2;background-size:cover;width:40px;height:40px}div.fragment.linkOrCreateAccount div.contactWrapper div.name{margin-top:0;-ms-grid-column:2;-ms-grid-row:1;-ms-grid-row-align:start;font-size:14.66px;line-height: 19px;overflow:hidden;text-overflow:ellipsis}div.fragment.linkOrCreateAccount div.contactWrapper div.username{margin-bottom:0;-ms-grid-column:2;-ms-grid-row:2;-ms-grid-row-align:start;line-height: 17px;overflow:hidden;text-overflow:ellipsis}div.fragment.linkOrCreateAccount div.skypeUserCredentials div.actions button,div.fragment.linkOrCreateAccount div.mergeAccounts div.actions button{float:none;margin:0;display:block}div.fragment.linkOrCreateAccount div.skypeUserCredentials div.actions a,div.fragment.linkOrCreateAccount div.mergeAccounts div.actions a{top:14px;left:0}div.fragment.linkOrCreateAccount div.mergeAccounts{-ms-grid-columns:40px 40px 20px 20px 5px 1fr;-ms-grid-rows:20px 25px auto auto}div.fragment.linkOrCreateAccount div.mergeAccounts #liveIdAvatar,div.fragment.linkOrCreateAccount div.mergeAccounts #liveIdAvatarImg,div.fragment.linkOrCreateAccount div.mergeAccounts #skypeAvatar,div.fragment.linkOrCreateAccount div.mergeAccounts #skypeAvatarImg{width:40px;height:40px}div.fragment.linkOrCreateAccount div.mergeAccounts #plusSign>a{width:17px;height:17px;font-size:17px;border-color:#E6F7FE;background-color:#E6F7FE;color:#00aff0}div.fragment.linkOrCreateAccount div.mergeAccounts #liveIdUsername,div.fragment.linkOrCreateAccount div.mergeAccounts #skypeUsername{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}div.fragment.linkOrCreateAccount div.mergeAccounts #skypeUsername{margin-bottom:5px}div.fragment.linkOrCreateAccount div.mergeAccounts #liveIdLogo{height:14px;width:14px}div.fragment.linkOrCreateAccount div.mergeAccounts #skypeLogo::after{font-size:14px}}@media screen and (-ms-high-contrast: active){div.linkOrCreateAccount.fragment button:not(.backbutton){border:2px solid windowText}div.linkOrCreateAccount.fragment a[href],div.linkOrCreateAccount.fragment a.link,a{color:windowText}} +@charset "UTF-8"; + +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.page section.navigationContainer>div>div.fragment.linkOrCreateAccount { + display: -ms-grid; + -ms-grid-rows: 1fr minmax(50vh, min-content) 80px; + -ms-grid-columns: 1fr 100px 650px 100px 1fr; + background-color: #00aff0; + height: 100%; + width: 100%; + color: white +} + +body.KEYBOARDUP div.page section.navigationContainer>div>div.fragment.linkOrCreateAccount { + -ms-grid-rows: 12vh 88vh +} + +body.KEYBOARDUP div.fragment.linkOrCreateAccount div.logo { + visibility: hidden +} + +div.fragment.linkOrCreateAccount input::-ms-check { + background-color: #0095cc; + border-color: #fff; + color: #fff +} + +div.fragment.linkOrCreateAccount input:hover::-ms-check { + background-color: rgba(0, 149, 204, 0.75); + color: #fff +} + +div.fragment.linkOrCreateAccount input:hover:active::-ms-check { + color: #fff; + background-color: rgba(0, 149, 204, 0.25) +} + +div.fragment.linkOrCreateAccount>div.msaLoginInfo { + position: absolute; + bottom: 15px; + width: 100%; + left: 50%; + margin-left: -50%; + text-align: center +} + +div.fragment.linkOrCreateAccount>div.msaLoginInfo a { + color: white +} + +div.fragment.linkOrCreateAccount h2 { + margin-bottom: 23px +} + +div.fragment.linkOrCreateAccount a[href], +div.fragment.linkOrCreateAccount a.link { + color: white; + font-weight: 600 +} + +div.fragment.linkOrCreateAccount button:not(.backbutton) { + background-color: rgba(0, 0, 0, 0.15); + border: 0px; + color: white; + cursor: pointer; + padding: 0px 40px 0px 40px; + min-height: 40px; + height: auto; + border-radius: 20px; + margin-top: 10px +} + +div.fragment.linkOrCreateAccount button:not(.backbutton):hover { + background-color: rgba(0, 0, 0, 0.2) +} + +div.fragment.linkOrCreateAccount button:not(.backbutton):active { + background-color: rgba(0, 0, 0, 0.3) +} + +div.fragment.linkOrCreateAccount button:not(.backbutton)[disabled] { + background-color: rgba(0, 0, 0, 0.1); + color: rgba(255, 255, 255, 0.4); + cursor: auto +} + +div.fragment.linkOrCreateAccount input[type=text], +div.fragment.linkOrCreateAccount input[type=password] { + display: block; + width: calc(100% - 6px); + height: 40px; + margin-bottom: 20px +} + +div.fragment.linkOrCreateAccount div.logo { + -ms-grid-row: 1; + -ms-grid-column: 3; + -ms-grid-column-align: center; + -ms-grid-row-align: center +} + +div.fragment.linkOrCreateAccount div.startUsingSkype { + -ms-grid-row: 2; + -ms-grid-column-span: 5; + -ms-grid-column-align: center; + display: -ms-grid; + -ms-grid-columns: 40px calc(50% - 90px) 100px calc(50% - 90px); + -ms-grid-rows: max-content 1fr +} + +div.fragment.linkOrCreateAccount div.startUsingSkype div.existingUser { + -ms-grid-row: 1; + -ms-grid-column: 2; + -ms-grid-row-align: start +} + +div.fragment.linkOrCreateAccount div.startUsingSkype button.existingUser { + -ms-grid-row: 2; + -ms-grid-column: 2; + -ms-grid-row-align: start; + -ms-grid-column-align: start +} + +div.fragment.linkOrCreateAccount div.startUsingSkype div.newUser { + -ms-grid-row: 1; + -ms-grid-column: 4; + -ms-grid-row-align: start +} + +div.fragment.linkOrCreateAccount div.startUsingSkype button.newUser { + -ms-grid-row: 2; + -ms-grid-column: 4; + -ms-grid-row-align: start; + -ms-grid-column-align: start +} + +div.fragment.linkOrCreateAccount div.startUsingSkype p { + margin-bottom: 16px; + margin-top: -7px +} + +div.fragment.linkOrCreateAccount div.mergeAccounts { + -ms-grid-row: 5; + -ms-grid-column: 6; + display: -ms-grid; + -ms-grid-columns: 75px 75px 20px 30px 10px 1fr; + -ms-grid-rows: 38px 37px auto auto +} + +div.fragment.linkOrCreateAccount div.mergeAccounts div.actions { + -ms-grid-row: 5; + -ms-grid-column: 1; + -ms-grid-column-span: 6; + -ms-grid-row-align: end +} + +div.fragment.linkOrCreateAccount button.backbutton { + -ms-grid-row: 2; + -ms-grid-column: 2; + -ms-grid-column-align: end; + margin-right: 20px; + -ms-grid-row-align: start; + margin-top: 10px +} + +div.fragment.linkOrCreateAccount div.linkSkypeAccount { + -ms-grid-row: 2; + -ms-grid-column: 3; + -ms-grid-row-align: start +} + +div.fragment.linkOrCreateAccount div.createNewAccount { + -ms-grid-row: 2; + -ms-grid-column: 3; + -ms-grid-row-align: start +} + +div.fragment.linkOrCreateAccount div.createNewAccount div.acceptTermsOfUse ul { + list-style: none; + padding: 0 0 4px 25px +} + +div.fragment.linkOrCreateAccount div.createNewAccount div.acceptTermsOfUse ul li { + position: relative; + padding-bottom: 10px +} + +div.fragment.linkOrCreateAccount div.createNewAccount div.acceptTermsOfUse ul li input { + margin-left: -25px; + width: 15px; + position: absolute; + top: -3px +} + +div.fragment.linkOrCreateAccount div.logo { + display: block; + width: 280px; + height: 123px; + margin-top: 0px +} + +div.fragment.linkOrCreateAccount div.logo img { + width: 100%; + height: 100% +} + +div.fragment.linkOrCreateAccount .hidden { + display: none !important +} + +div.fragment.linkOrCreateAccount div.error { + display: -ms-grid; + -ms-grid-rows: 1fr; + -ms-grid-columns: 55px 1fr; + border: 2px solid #0095CC; + margin-bottom: 20px +} + +div.fragment.linkOrCreateAccount div.error div.icon { + -ms-grid-column: 1; + -ms-grid-row: 1; + -ms-grid-column-align: center; + -ms-grid-row-align: center; + margin-top: 4px +} + +div.fragment.linkOrCreateAccount div.error div.icon:before { + content: "\E601"; + font-family: "Skype UI Symbol" !important; + font-weight: bold; + font-size: 26.67px +} + +div.fragment.linkOrCreateAccount div.error div.message { + -ms-grid-column: 2; + -ms-grid-row: 1; + margin-top: 12px; + margin-bottom: 12px; + padding-right: 5px +} + +div.fragment.linkOrCreateAccount #accountContact { + margin-bottom: 20px +} + +div.fragment.linkOrCreateAccount div.linkSkypeAccount div.actions>button { + float: left; + margin-right: 20px +} + +body.RTL div.fragment.linkOrCreateAccount div.linkSkypeAccount div.actions>button { + float: right; + margin-left: 20px; + margin-right: 0 +} + +div.fragment.linkOrCreateAccount div.linkSkypeAccount div.actions>a { + position: relative; + top: 18px; + left: 15px +} + +div.fragment.linkOrCreateAccount div.linkSkypeAccount div.accountAlreadyLinked>a { + display: block +} + +div.fragment.linkOrCreateAccount div.linkSkypeAccount div.accountAlreadyLinked>ul { + padding: 0 20px 10px 20px +} + +div.fragment.linkOrCreateAccount div.linkSkypeAccount div.accountAlreadyLinked>ul>li { + margin-top: 5px; + margin-bottom: 10px +} + +div.fragment.linkOrCreateAccount div.linkSkypeAccount div.accountAlreadyLinked>ul.noSignOut>li.signOut, +div.fragment.linkOrCreateAccount div.linkSkypeAccount div.accountAlreadyLinked>ul.signOut>li.noSignOut { + display: none +} + +div.fragment.linkOrCreateAccount div.contactWrapper { + display: -ms-grid; + width: 300px; + height: 75px; + margin-bottom: 10px; + -ms-grid-rows: 1fr; + white-space: nowrap; + -ms-grid-columns: 75px 15px 1fr +} + +div.fragment.linkOrCreateAccount div.contactWrapper div.avatar { + -ms-grid-column: 1; + background-size: cover +} + +div.fragment.linkOrCreateAccount div.contactWrapper div.name { + margin-top: 7px; + -ms-grid-column: 3; + -ms-grid-row-align: start +} + +div.fragment.linkOrCreateAccount div.contactWrapper div.username { + margin-bottom: 13px; + -ms-grid-column: 3; + -ms-grid-row-align: end +} + +div.fragment.linkOrCreateAccount div.accountsList { + height: auto; + min-height: 100px; + max-height: 170px; + overflow-y: auto; + -ms-overflow-style: scrollbar +} + +div.fragment.linkOrCreateAccount div.win-listview div.win-container { + margin: 0; + background-color: transparent; + height: 85px +} + +div.fragment.linkOrCreateAccount div.win-listview div.win-container:hover { + outline: none; + background-color: transparent +} + +div.fragment.linkOrCreateAccount div.win-listview div.win-container div.win-focusedoutline { + left: 2px; + top: 2px; + width: calc(100% - 24px); + height: calc(100% - 4px); + outline-width: 2px; + outline-color: black +} + +@media screen and (-ms-high-contrast: active) { + div.fragment.linkOrCreateAccount div.win-listview div.win-container div.win-focusedoutline { + left: 5px; + top: 5px; + width: calc(100% - 29px); + height: calc(100% - 10px); + outline-width: 5px; + outline-color: windowText + } +} + +div.fragment.linkOrCreateAccount #liveIdAvatar { + -ms-grid-row: 1; + -ms-grid-row-span: 2; + -ms-grid-column: 1; + -ms-grid-row-align: start; + width: 75px; + height: 75px; + background: url("/images/avatarMSAccount.png") no-repeat center center; + background-size: cover +} + +div.fragment.linkOrCreateAccount #skypeAvatar { + -ms-grid-row: 1; + -ms-grid-row-span: 2; + -ms-grid-column: 2; + background: url("/images/avatar.default.unknown.png") no-repeat center center; + background-size: cover +} + +div.fragment.linkOrCreateAccount #plusSign { + -ms-grid-column: 1; + -ms-grid-column-align: center; + -ms-grid-column-span: 2; + -ms-grid-row: 1; + -ms-grid-row-align: center; + -ms-grid-row-span: 2; + z-index: 2 +} + +div.fragment.linkOrCreateAccount #plusSign>a { + display: inline-block; + font-family: "Skype UI Symbol" !important; + font-size: 35px; + border-radius: 50%; + margin: 0px 0px; + line-height: normal; + text-align: center; + color: #fff; + border-color: #fff; + cursor: default; + width: 35px; + height: 35px; + background-color: #00AFF0 +} + +div.fragment.linkOrCreateAccount #skypeAvatarImg { + width: 75px; + height: 75px +} + +div.fragment.linkOrCreateAccount #liveIdAvatarImg { + width: 75px; + height: 75px +} + +div.fragment.linkOrCreateAccount #liveIdLogo { + -ms-grid-row: 1; + -ms-grid-row-align: center; + -ms-grid-column: 4; + background: url("/images/logoMSAccount.png") no-repeat center center; + width: 30px; + height: 25px +} + +div.fragment.linkOrCreateAccount #skypeLogo { + -ms-grid-row: 2; + -ms-grid-row-align: center; + -ms-grid-column: 4; + height: 28px +} + +div.fragment.linkOrCreateAccount #skypeLogo:after { + content: "\E001"; + font-family: "Skype UI Symbol" !important; + font-weight: bold; + font-size: 28px; + line-height: normal +} + +div.fragment.linkOrCreateAccount #liveIdUsername { + -ms-grid-row: 1; + -ms-grid-row-align: center; + -ms-grid-column: 6; + font-size: 20px +} + +div.fragment.linkOrCreateAccount #skypeUsername { + -ms-grid-row: 2; + -ms-grid-row-align: center; + -ms-grid-column: 6; + font-size: 20px; + margin-bottom: 10px +} + +div.fragment.linkOrCreateAccount #mergeAccountsNote { + -ms-grid-row: 4; + -ms-grid-column: 1; + -ms-grid-column-span: 6; + -ms-grid-row-align: start; + padding-top: 10px +} + +div.fragment.linkOrCreateAccount #accountsAriaLabel { + -ms-grid-row: 1; + -ms-grid-row-span: 2; + -ms-grid-column: 4; + -ms-grid-column-span: 3 +} + +body.RTL div.fragment.linkOrCreateAccount div.createNewAccount div.acceptTermsOfUse ul { + list-style: none; + padding-right: 25px; + padding-left: 0 +} + +body.RTL div.fragment.linkOrCreateAccount div.createNewAccount div.acceptTermsOfUse ul li input { + margin-left: 0; + margin-right: -25px +} + +body.RTL div.fragment.linkOrCreateAccount button.backbutton { + margin-right: 0px; + margin-left: 20px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + body.RTL div.fragment.linkOrCreateAccount div.msaLoginInfo { + text-align: right + } + body.RTL div.fragment.linkOrCreateAccount button.backbutton~div h2 { + padding-left: 0; + padding-right: 40px + } +} + +@media screen and (-ms-view-state: filled) { + body.RTL div.fragment.linkOrCreateAccount div.msaLoginInfo { + text-align: right + } +} + +@media screen and (-ms-high-contrast: active) { + div.fragment.linkOrCreateAccount div.logo, + div.fragment.linkOrCreateAccount #liveIdAvatar, + div.fragment.linkOrCreateAccount #liveIdLogo { + -ms-high-contrast-adjust: none + } + div.fragment.linkOrCreateAccount input, + div.fragment.linkOrCreateAccount button, + div.fragment.linkOrCreateAccount input[type=text], + div.fragment.linkOrCreateAccount input[type=password] { + border: 1px solid WindowText + } + div.fragment.linkOrCreateAccount div.selectSkypeAccount div.accountsList div.contactWrapper>div.avatar, + div.fragment.linkOrCreateAccount div.fragment.linkOrCreateAccount div.skypeUserCredentials #accountContact div.avatar { + -ms-high-contrast-adjust: none + } +} + +@media screen and (-ms-view-state: filled) { + div.page section.navigationContainer>div>div.fragment.linkOrCreateAccount { + -ms-grid-columns: 1fr 100px 500px 100px 1fr + } + div.fragment.linkOrCreateAccount div.msaLoginInfo { + position: static; + text-align: left; + -ms-grid-row: 3; + -ms-grid-row-align: end; + -ms-grid-column: 3; + width: auto; + margin: 0 0 15px 0; + left: 0; + bottom: 0 + } + div.fragment.linkOrCreateAccount div.startUsingSkype { + -ms-grid-columns: 1fr; + -ms-grid-rows: max-content 100px max-content 1fr; + -ms-grid-column: 3; + -ms-grid-row: 2; + -ms-grid-column-span: 1; + -ms-grid-column-align: center + } + div.fragment.linkOrCreateAccount div.startUsingSkype div.newUser { + -ms-grid-row: 3; + -ms-grid-column: 1 + } + div.fragment.linkOrCreateAccount div.startUsingSkype div.existingUser { + -ms-grid-column: 1 + } + div.fragment.linkOrCreateAccount div.startUsingSkype button.newUser { + -ms-grid-column: 1; + -ms-grid-row: 4 + } + div.fragment.linkOrCreateAccount div.startUsingSkype button.existingUser { + -ms-grid-column: 1 + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.fragment.linkOrCreateAccount { + -ms-grid-columns: minmax(40px, 1fr) minmax(240px, 500px) minmax(40px, 1fr); + -ms-grid-rows: 40px 65px minmax(50vh, min-content) 80px 1fr + } + body.KEYBOARDUP div.page section.navigationContainer>div>div.fragment.linkOrCreateAccount { + -ms-grid-rows: 40px 65px minmax(50vh, min-content) 80px 1fr + } + body.KEYBOARDUP div.fragment.linkOrCreateAccount div.logo { + visibility: visible + } + div.fragment.linkOrCreateAccount h2 { + font-size: 26.67px; + line-height: 34px; + font-weight: 200; + padding: 6px 0 0 0 + } + div.fragment.linkOrCreateAccount div.error { + -ms-grid-columns: 48px 1fr + } + div.fragment.linkOrCreateAccount div.error div.icon { + -ms-grid-row-align: start; + -ms-grid-column-align: start; + margin-top: 15px; + margin-left: 13px + } + div.fragment.linkOrCreateAccount div.error div.message { + margin-top: 13px + } + div.fragment.linkOrCreateAccount button.backbutton { + font-size: 10pt; + height: 30px; + line-height: 26px; + width: 30px; + vertical-align: -0.37em + } + div.fragment.linkOrCreateAccount div.linkSkypeAccount div.accountAlreadyLinked>ul { + padding-left: 0; + list-style-position: inside + } + div.fragment.linkOrCreateAccount div.linkSkypeAccount div.accountAlreadyLinked>ul>li { + margin-bottom: 16px; + line-height: 18px + } + div.fragment.linkOrCreateAccount div.linkSkypeAccount div.accountAlreadyLinked>ul>li>span { + position: relative; + margin-left: -11px + } + div.fragment.linkOrCreateAccount button.backbutton { + -ms-grid-row: 3; + -ms-grid-column: 2; + -ms-grid-column-align: start; + z-index: 2 + } + div.fragment.linkOrCreateAccount button.backbutton~div h2 { + padding-left: 40px + } + div.fragment.linkOrCreateAccount div.linkSkypeAccount, + div.fragment.linkOrCreateAccount div.createNewAccount { + -ms-grid-row: 3; + -ms-grid-column: 2; + -ms-grid-row-align: start; + z-index: 1 + } + div.fragment.linkOrCreateAccount div.logo { + display: block; + width: 100px; + height: 44px; + margin-top: 0px; + -ms-grid-row: 2; + -ms-grid-column: 2; + -ms-grid-column-align: start; + -ms-grid-row-align: start + } + div.fragment.linkOrCreateAccount div.startUsingSkype { + -ms-grid-columns: 1fr; + -ms-grid-rows: max-content 100px max-content 1fr; + -ms-grid-column: 2; + -ms-grid-row: 3; + -ms-grid-column-span: 1 + } + div.fragment.linkOrCreateAccount div.startUsingSkype div.newUser { + -ms-grid-row: 3; + -ms-grid-column: 1 + } + div.fragment.linkOrCreateAccount div.startUsingSkype div.existingUser { + -ms-grid-column: 1 + } + div.fragment.linkOrCreateAccount div.startUsingSkype button.newUser { + -ms-grid-column: 1; + -ms-grid-row: 4 + } + div.fragment.linkOrCreateAccount div.startUsingSkype button.existingUser { + -ms-grid-column: 1 + } + div.fragment.linkOrCreateAccount div.msaLoginInfo { + position: static; + text-align: left; + -ms-grid-row: 5; + -ms-grid-row-align: end; + -ms-grid-column: 2; + width: auto; + margin: 0 0 15px 0; + left: 0; + bottom: 0 + } + div.fragment.linkOrCreateAccount div.contactWrapper { + display: -ms-grid; + width: 100%; + height: auto; + margin-bottom: 10px; + -ms-grid-rows: 1fr 1fr; + white-space: nowrap; + -ms-grid-columns: 60px 1fr + } + div.fragment.linkOrCreateAccount div.contactWrapper div.avatar { + -ms-grid-column: 1; + -ms-grid-row-span: 2; + background-size: cover; + width: 40px; + height: 40px + } + div.fragment.linkOrCreateAccount div.contactWrapper div.name { + margin-top: 0; + -ms-grid-column: 2; + -ms-grid-row: 1; + -ms-grid-row-align: start; + font-size: 14.66px; + line-height: 19px; + overflow: hidden; + text-overflow: ellipsis + } + div.fragment.linkOrCreateAccount div.contactWrapper div.username { + margin-bottom: 0; + -ms-grid-column: 2; + -ms-grid-row: 2; + -ms-grid-row-align: start; + line-height: 17px; + overflow: hidden; + text-overflow: ellipsis + } + div.fragment.linkOrCreateAccount div.skypeUserCredentials div.actions button, + div.fragment.linkOrCreateAccount div.mergeAccounts div.actions button { + float: none; + margin: 0; + display: block + } + div.fragment.linkOrCreateAccount div.skypeUserCredentials div.actions a, + div.fragment.linkOrCreateAccount div.mergeAccounts div.actions a { + top: 14px; + left: 0 + } + div.fragment.linkOrCreateAccount div.mergeAccounts { + -ms-grid-columns: 40px 40px 20px 20px 5px 1fr; + -ms-grid-rows: 20px 25px auto auto + } + div.fragment.linkOrCreateAccount div.mergeAccounts #liveIdAvatar, + div.fragment.linkOrCreateAccount div.mergeAccounts #liveIdAvatarImg, + div.fragment.linkOrCreateAccount div.mergeAccounts #skypeAvatar, + div.fragment.linkOrCreateAccount div.mergeAccounts #skypeAvatarImg { + width: 40px; + height: 40px + } + div.fragment.linkOrCreateAccount div.mergeAccounts #plusSign>a { + width: 17px; + height: 17px; + font-size: 17px; + border-color: #E6F7FE; + background-color: #E6F7FE; + color: #00aff0 + } + div.fragment.linkOrCreateAccount div.mergeAccounts #liveIdUsername, + div.fragment.linkOrCreateAccount div.mergeAccounts #skypeUsername { + font-size: 13px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis + } + div.fragment.linkOrCreateAccount div.mergeAccounts #skypeUsername { + margin-bottom: 5px + } + div.fragment.linkOrCreateAccount div.mergeAccounts #liveIdLogo { + height: 14px; + width: 14px + } + div.fragment.linkOrCreateAccount div.mergeAccounts #skypeLogo::after { + font-size: 14px + } +} + +@media screen and (-ms-high-contrast: active) { + div.linkOrCreateAccount.fragment button:not(.backbutton) { + border: 2px solid windowText + } + div.linkOrCreateAccount.fragment a[href], + div.linkOrCreateAccount.fragment a.link, + a { + color: windowText + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/pages/login.css b/packages/microsoft.skypeapp/pages/login.css index 3f55cedc..56bfa643 100644 --- a/packages/microsoft.skypeapp/pages/login.css +++ b/packages/microsoft.skypeapp/pages/login.css @@ -94,7 +94,7 @@ div.page section.navigationContainer>div>div.login.fragment div.error div.icon { div.page section.navigationContainer>div>div.login.fragment div.error div.icon:before { content: "\E601"; - font-family: "Skype UI Symbol"; + font-family: "Skype UI Symbol" !important; font-weight: bold; font-size: 26.67px } diff --git a/packages/microsoft.skypeapp/pages/logout.css b/packages/microsoft.skypeapp/pages/logout.css index 9b51c9b5..9ea2eaa3 100644 --- a/packages/microsoft.skypeapp/pages/logout.css +++ b/packages/microsoft.skypeapp/pages/logout.css @@ -1 +1,167 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.page section.navigationContainer>div>div.logout.fragment{display:-ms-grid;-ms-grid-rows:1fr 50vh 80px;-ms-grid-columns:100%;background-color:#00aff0;height:100%;width:100%;color:white}@media screen and (max-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.logout.fragment{-ms-grid-rows:111px auto 1fr}}div.page section.navigationContainer>div>div.logout.fragment a[href]{color:white;font-weight:600}div.page section.navigationContainer>div>div.logout.fragment div.logo{-ms-grid-row:1;-ms-grid-row-align:center;text-align:center;vertical-align:middle;display:block;overflow:hidden}@media screen and (max-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.logout.fragment div.logo{margin:0 40px;text-align:left;width:100%;-ms-grid-column-align:center}body.RTL div.page section.navigationContainer>div>div.logout.fragment div.logo{text-align:right}}@media screen and (max-aspect-ratio: 1 / 1) and (min-width: 581px){div.page section.navigationContainer>div>div.logout.fragment div.logo{max-width:500px}}@media screen and (max-aspect-ratio: 1 / 1) and (max-width: 581px){div.page section.navigationContainer>div>div.logout.fragment div.logo{max-width:calc(100% - 80px)}}div.page section.navigationContainer>div>div.logout.fragment div.logo img{width:284px;height:126px}@media screen and (max-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.logout.fragment div.logo img{margin-top:18px;width:100px;height:45px}}div.page section.navigationContainer>div>div.logout.fragment div.infoPanel{-ms-grid-row:2;-ms-grid-row-align:start}@media screen and (min-width: 600px){div.page section.navigationContainer>div>div.logout.fragment div.infoPanel{-ms-grid-column-align:center;max-width:600px}}@media screen and (max-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.logout.fragment div.infoPanel{padding-left:40px;padding-right:40px}}div.page section.navigationContainer>div>div.logout.fragment div.infoPanel h2.infoPanelTitle{display:inline-block;margin-bottom:40px;width:100%}div.page section.navigationContainer>div>div.logout.fragment div.infoPanel h2.infoPanelTitle span.wrapper{max-width:100%;display:inline-block;white-space:nowrap;vertical-align:bottom}div.page section.navigationContainer>div>div.logout.fragment div.infoPanel h2.infoPanelTitle span.wrapper span{vertical-align:bottom;display:inherit;white-space:inherit;max-width:inherit;overflow:hidden;text-overflow:ellipsis}div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.signInPanel{margin-bottom:40px}div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.signInPanel div.contactWrapper{display:-ms-grid;height:75px;margin-bottom:20px;-ms-grid-rows:2fr;-ms-grid-columns:75px 1fr}div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.signInPanel div.contactWrapper div.avatar{-ms-grid-rowspan:2;-ms-grid-column:1;background-size:cover}div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.signInPanel div.contactWrapper div.name{margin-top:7px;-ms-grid-column:2;-ms-grid-row-align:start}div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.signInPanel div.contactWrapper div.email{margin-bottom:13px;-ms-grid-column:2;-ms-grid-row-align:end}div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.signInPanel div.contactWrapper div.name,div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.signInPanel div.contactWrapper div.email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-indent:15px}@media screen and (max-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.signInPanel div.contactWrapper{-ms-grid-columns:40px 1fr;height:40px}div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.signInPanel div.contactWrapper div.name{margin-top:0}div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.signInPanel div.contactWrapper div.email{margin-bottom:0}}div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.footNote{max-width:500px} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.page section.navigationContainer>div>div.logout.fragment { + display: -ms-grid; + -ms-grid-rows: 1fr 50vh 80px; + -ms-grid-columns: 100%; + background-color: #00aff0; + height: 100%; + width: 100%; + color: white +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.logout.fragment { + -ms-grid-rows: 111px auto 1fr + } +} + +div.page section.navigationContainer>div>div.logout.fragment a[href] { + color: white; + font-weight: 600 +} + +div.page section.navigationContainer>div>div.logout.fragment div.logo { + -ms-grid-row: 1; + -ms-grid-row-align: center; + text-align: center; + vertical-align: middle; + display: block; + overflow: hidden +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.logout.fragment div.logo { + margin: 0 40px; + text-align: left; + width: 100%; + -ms-grid-column-align: center + } + body.RTL div.page section.navigationContainer>div>div.logout.fragment div.logo { + text-align: right + } +} + +@media screen and (max-aspect-ratio: 1 / 1) and (min-width: 581px) { + div.page section.navigationContainer>div>div.logout.fragment div.logo { + max-width: 500px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) and (max-width: 581px) { + div.page section.navigationContainer>div>div.logout.fragment div.logo { + max-width: calc(100% - 80px) + } +} + +div.page section.navigationContainer>div>div.logout.fragment div.logo img { + width: 284px; + height: 126px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.logout.fragment div.logo img { + margin-top: 18px; + width: 100px; + height: 45px + } +} + +div.page section.navigationContainer>div>div.logout.fragment div.infoPanel { + -ms-grid-row: 2; + -ms-grid-row-align: start +} + +@media screen and (min-width: 600px) { + div.page section.navigationContainer>div>div.logout.fragment div.infoPanel { + -ms-grid-column-align: center; + max-width: 600px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.logout.fragment div.infoPanel { + padding-left: 40px; + padding-right: 40px + } +} + +div.page section.navigationContainer>div>div.logout.fragment div.infoPanel h2.infoPanelTitle { + display: inline-block; + margin-bottom: 40px; + width: 100% +} + +div.page section.navigationContainer>div>div.logout.fragment div.infoPanel h2.infoPanelTitle span.wrapper { + max-width: 100%; + display: inline-block; + white-space: nowrap; + vertical-align: bottom +} + +div.page section.navigationContainer>div>div.logout.fragment div.infoPanel h2.infoPanelTitle span.wrapper span { + vertical-align: bottom; + display: inherit; + white-space: inherit; + max-width: inherit; + overflow: hidden; + text-overflow: ellipsis +} + +div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.signInPanel { + margin-bottom: 40px +} + +div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.signInPanel div.contactWrapper { + display: -ms-grid; + height: 75px; + margin-bottom: 20px; + -ms-grid-rows: 2fr; + -ms-grid-columns: 75px 1fr +} + +div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.signInPanel div.contactWrapper div.avatar { + -ms-grid-rowspan: 2; + -ms-grid-column: 1; + background-size: cover +} + +div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.signInPanel div.contactWrapper div.name { + margin-top: 7px; + -ms-grid-column: 2; + -ms-grid-row-align: start +} + +div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.signInPanel div.contactWrapper div.email { + margin-bottom: 13px; + -ms-grid-column: 2; + -ms-grid-row-align: end +} + +div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.signInPanel div.contactWrapper div.name, +div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.signInPanel div.contactWrapper div.email { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-indent: 15px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.signInPanel div.contactWrapper { + -ms-grid-columns: 40px 1fr; + height: 40px + } + div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.signInPanel div.contactWrapper div.name { + margin-top: 0 + } + div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.signInPanel div.contactWrapper div.email { + margin-bottom: 0 + } +} + +div.page section.navigationContainer>div>div.logout.fragment div.infoPanel div.footNote { + max-width: 500px +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/pages/options.css b/packages/microsoft.skypeapp/pages/options.css index fcf92cd9..574624e1 100644 --- a/packages/microsoft.skypeapp/pages/options.css +++ b/packages/microsoft.skypeapp/pages/options.css @@ -1 +1,370 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.optionsSettingsFlyout .win-header{background-color:#00AFF0}div.optionsSettingsFlyout div.conversationMyselfVideo{margin-bottom:20px}div.optionsSettingsFlyout div.conversationMyselfVideo video.VISIBLE{box-shadow:none}body.RTL div.optionsSettingsFlyout div.conversationMyselfVideo video.VISIBLE{margin-right:auto}body.RTL div.optionsSettingsFlyout div.win-header div.win-label{padding-right:40px;padding-left:30px}div.optionsSettingsFlyout div.win-header span.logo{position:absolute;right:40px;width:30px;height:30px}body.RTL div.optionsSettingsFlyout div.win-header span.logo{right:auto;left:40px}div.optionsSettingsFlyout div.win-header span.logo:after{content:"\E001";font-family:"Skype UI Symbol";font-size:30px;font-weight:bold;line-height:normal}div.optionsSettingsFlyout div.item{display:-ms-grid;-ms-grid-columns:1fr;-ms-grid-rows:min-content min-content;margin-bottom:8px}div.optionsSettingsFlyout div.item.av{display:-ms-grid;-ms-grid-columns:40px 40px 1fr;-ms-grid-rows:min-content min-content;margin-bottom:8px}div.optionsSettingsFlyout div.item.av.options_camera select{-ms-grid-column:1;-ms-grid-column-span:3}div.optionsSettingsFlyout div.item.av label{-ms-grid-column:1;-ms-grid-row:1;-ms-grid-column-span:2}div.optionsSettingsFlyout div.item.av video.video_preview{-ms-grid-column:1;-ms-grid-row:2;height:31px;margin-right:10px}div.optionsSettingsFlyout div.item.av video.video_preview.FLIPPEDX{transform:scaleX(-1)}body.RTL div.optionsSettingsFlyout div.item.av video.video_preview{margin-right:0px;margin-left:10px}div.optionsSettingsFlyout div.item.personal_ads{display:none}div.optionsSettingsFlyout div.item.clearhistory{margin-top:24px;margin-bottom:30px}div.optionsSettingsFlyout div.item.emergency_info{margin-top:20px;margin-bottom:30px}div.optionsSettingsFlyout div.item.emergency_info.nocall{display:-ms-grid;-ms-grid-columns:40px 1fr;-ms-grid-rows:1fr}div.optionsSettingsFlyout div.item.emergency_info.nocall.hidden{display:none}div.optionsSettingsFlyout div.item.emergency_info.limited{display:block}div.optionsSettingsFlyout div.item.emergency_info.limited.hidden{display:none}div.optionsSettingsFlyout div.item.emergency_info.limited div.content{color:#93999d}div.optionsSettingsFlyout div.item.emergency_info.limited div.content strong{font-weight:normal}div.optionsSettingsFlyout div.item.emergency_info div.icon{-ms-grid-column:1;-ms-grid-row:1;display:inline-block;height:30px;width:30px;border-radius:50%;font-family:"Skype UI Symbol";font-size:30px;line-height:normal;text-align:center;color:#fff;background-color:#e81123}div.optionsSettingsFlyout div.item.emergency_info div.icon::before{content:"\E600"}div.optionsSettingsFlyout div.item.emergency_info div.content{-ms-grid-column:2;-ms-grid-row:1}div.optionsSettingsFlyout div.item.emergency_info div.content h3{margin-top:5px;margin-bottom:0;color:#e81123}div.optionsSettingsFlyout div.item.emergency_info div.content p{margin:0;color:#6e6e6e}div.optionsSettingsFlyout div.item.hidden,div.optionsSettingsFlyout h3.hidden{display:none}div.optionsSettingsFlyout h3{margin-top:32px;margin-bottom:14px}div.optionsSettingsFlyout h3:first-child{margin-top:16px}div.optionsSettingsFlyout div.item>label{-ms-grid-column:1;-ms-grid-row-align:center;padding:0 10px 10px 0;-ms-grid-column-span:2;display:block}body.RTL div.optionsSettingsFlyout div.item>label{padding:0 0 10px 10px}div.optionsSettingsFlyout div.item.av select{-ms-grid-column:2;-ms-grid-row:2;-ms-grid-column-span:2;border-color:#00AFF0;margin:0px;padding:0px}div.optionsSettingsFlyout div.item.av.options_speakers select{-ms-grid-column:3;-ms-grid-column-span:1}div.optionsSettingsFlyout div.imSoundsWrapper{padding-bottom:100px}div.optionsSettingsFlyout div.item.av>div.volumeLevel{-ms-grid-column:1;-ms-grid-row:2;-ms-grid-column-align:start;-ms-grid-row-align:end}div.optionsSettingsFlyout div.item.av.options_speakers>div.volumeLevel{-ms-grid-column:2}div.optionsSettingsFlyout div.volumeLevel{width:30px;height:31px;background-size:auto 4px;background-repeat:repeat;background-image:-ms-linear-gradient(#e7f1f5 75%, transparent 75%, transparent);position:relative}div.optionsSettingsFlyout div.volumeLevel::after{content:"";height:0px;width:30px;position:absolute;bottom:0px;background-size:auto 4px;background-repeat:repeat;background-image:-ms-linear-gradient(#00aff0 75%, transparent 75%, transparent)}div.optionsSettingsFlyout div.volumeLevel[data-value='1']::after{height:3px}div.optionsSettingsFlyout div.volumeLevel[data-value='2']::after{height:7px}div.optionsSettingsFlyout div.volumeLevel[data-value='3']::after{height:11px}div.optionsSettingsFlyout div.volumeLevel[data-value='4']::after{height:15px}div.optionsSettingsFlyout div.volumeLevel[data-value='5']::after{height:19px}div.optionsSettingsFlyout div.volumeLevel[data-value='6']::after{height:23px}div.optionsSettingsFlyout div.volumeLevel[data-value='7']::after{height:27px}div.optionsSettingsFlyout div.volumeLevel[data-value='8']::after{height:31px}div.optionsSettingsFlyout div.item>button.playButton{-ms-grid-column:1;-ms-grid-row:2;-ms-grid-column-align:start;-ms-grid-row-align:end;-ms-grid-column-span:1;display:inline-block;height:31px;width:31px;border-radius:50%;font-family:"Skype UI Symbol";font-size:31px;line-height:normal;text-align:center;color:#fff;background-color:#00aff0}div.optionsSettingsFlyout div.item>button.playButton:hover{background-color:#009dd8}div.optionsSettingsFlyout div.item>button.playButton::before{content:"\E40E"}div.optionsSettingsFlyout div.item>select,div.optionsSettingsFlyout div.item>input,div.optionsSettingsFlyout div.item>div{-ms-grid-column:1;-ms-grid-row:2;border-color:#00AFF0;margin:0px;padding:0px}div.optionsSettingsFlyout option:checked,div.optionsSettingsFlyout option:hover,div.optionsSettingsFlyout option:active,div.optionsSettingsFlyout select:focus::-ms-value,div.optionsSettingsFlyout select:hover::-ms-value,div.optionsSettingsFlyout:NOT(.emergency_country_first_item) select:focus option:checked:hover,div.optionsSettingsFlyout select:focus option:hover:active,div.optionsSettingsFlyout input[type=range]::-ms-fill-lower,div.optionsSettingsFlyout input[type=range]:hover::-ms-fill-lower,div.optionsSettingsFlyout input[type=range]:active::-ms-fill-lower{background-color:#00AFF0}div.optionsSettingsFlyout div.item>button{-ms-grid-column:1;-ms-grid-row:2;-ms-grid-column-align:start;-ms-grid-row-align:center}div.optionsSettingsFlyout div.item.toggle{-ms-grid-columns:1fr;-ms-grid-rows:min-content min-content}div.optionsSettingsFlyout div.item.toggle.personal_ads{display:none}div.optionsSettingsFlyout div.item.toggle>.win-toggleswitch{-ms-grid-row:2;-ms-grid-column:1}div.optionsSettingsFlyout div.item.toggle>.win-toggleswitch>div:not(.win-title){-ms-grid-columns:1fr 125px}@media screen and (-ms-high-contrast: active){div.optionsSettingsFlyout div.item>button,div.optionsSettingsFlyout div.item>button.playButton{border:1px solid WindowText}div.optionsSettingsFlyout div.volumeLevel{border:1px solid WindowText}div.optionsSettingsFlyout div.volumeLevel::after{background-image:-ms-linear-gradient(WindowText 75%, transparent 75%, transparent)}}.win-wide.win-settingsflyout{width:346px}.win-wide.win-settingsflyout .win-header{min-height:48px;height:auto}.win-wide.win-settingsflyout .win-header .win-label{padding-bottom:10px;padding-right:40px;word-break:break-all} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.optionsSettingsFlyout .win-header { + background-color: #00AFF0 +} + +div.optionsSettingsFlyout div.conversationMyselfVideo { + margin-bottom: 20px +} + +div.optionsSettingsFlyout div.conversationMyselfVideo video.VISIBLE { + box-shadow: none +} + +body.RTL div.optionsSettingsFlyout div.conversationMyselfVideo video.VISIBLE { + margin-right: auto +} + +body.RTL div.optionsSettingsFlyout div.win-header div.win-label { + padding-right: 40px; + padding-left: 30px +} + +div.optionsSettingsFlyout div.win-header span.logo { + position: absolute; + right: 40px; + width: 30px; + height: 30px +} + +body.RTL div.optionsSettingsFlyout div.win-header span.logo { + right: auto; + left: 40px +} + +div.optionsSettingsFlyout div.win-header span.logo:after { + content: "\E001"; + font-family: "Skype UI Symbol" !important; + font-size: 30px; + font-weight: bold; + line-height: normal +} + +div.optionsSettingsFlyout div.item { + display: -ms-grid; + -ms-grid-columns: 1fr; + -ms-grid-rows: min-content min-content; + margin-bottom: 8px +} + +div.optionsSettingsFlyout div.item.av { + display: -ms-grid; + -ms-grid-columns: 40px 40px 1fr; + -ms-grid-rows: min-content min-content; + margin-bottom: 8px +} + +div.optionsSettingsFlyout div.item.av.options_camera select { + -ms-grid-column: 1; + -ms-grid-column-span: 3 +} + +div.optionsSettingsFlyout div.item.av label { + -ms-grid-column: 1; + -ms-grid-row: 1; + -ms-grid-column-span: 2 +} + +div.optionsSettingsFlyout div.item.av video.video_preview { + -ms-grid-column: 1; + -ms-grid-row: 2; + height: 31px; + margin-right: 10px +} + +div.optionsSettingsFlyout div.item.av video.video_preview.FLIPPEDX { + transform: scaleX(-1) +} + +body.RTL div.optionsSettingsFlyout div.item.av video.video_preview { + margin-right: 0px; + margin-left: 10px +} + +div.optionsSettingsFlyout div.item.personal_ads { + display: none +} + +div.optionsSettingsFlyout div.item.clearhistory { + margin-top: 24px; + margin-bottom: 30px +} + +div.optionsSettingsFlyout div.item.emergency_info { + margin-top: 20px; + margin-bottom: 30px +} + +div.optionsSettingsFlyout div.item.emergency_info.nocall { + display: -ms-grid; + -ms-grid-columns: 40px 1fr; + -ms-grid-rows: 1fr +} + +div.optionsSettingsFlyout div.item.emergency_info.nocall.hidden { + display: none +} + +div.optionsSettingsFlyout div.item.emergency_info.limited { + display: block +} + +div.optionsSettingsFlyout div.item.emergency_info.limited.hidden { + display: none +} + +div.optionsSettingsFlyout div.item.emergency_info.limited div.content { + color: #93999d +} + +div.optionsSettingsFlyout div.item.emergency_info.limited div.content strong { + font-weight: normal +} + +div.optionsSettingsFlyout div.item.emergency_info div.icon { + -ms-grid-column: 1; + -ms-grid-row: 1; + display: inline-block; + height: 30px; + width: 30px; + border-radius: 50%; + font-family: "Skype UI Symbol" !important; + font-size: 30px; + line-height: normal; + text-align: center; + color: #fff; + background-color: #e81123 +} + +div.optionsSettingsFlyout div.item.emergency_info div.icon::before { + content: "\E600" +} + +div.optionsSettingsFlyout div.item.emergency_info div.content { + -ms-grid-column: 2; + -ms-grid-row: 1 +} + +div.optionsSettingsFlyout div.item.emergency_info div.content h3 { + margin-top: 5px; + margin-bottom: 0; + color: #e81123 +} + +div.optionsSettingsFlyout div.item.emergency_info div.content p { + margin: 0; + color: #6e6e6e +} + +div.optionsSettingsFlyout div.item.hidden, +div.optionsSettingsFlyout h3.hidden { + display: none +} + +div.optionsSettingsFlyout h3 { + margin-top: 32px; + margin-bottom: 14px +} + +div.optionsSettingsFlyout h3:first-child { + margin-top: 16px +} + +div.optionsSettingsFlyout div.item>label { + -ms-grid-column: 1; + -ms-grid-row-align: center; + padding: 0 10px 10px 0; + -ms-grid-column-span: 2; + display: block +} + +body.RTL div.optionsSettingsFlyout div.item>label { + padding: 0 0 10px 10px +} + +div.optionsSettingsFlyout div.item.av select { + -ms-grid-column: 2; + -ms-grid-row: 2; + -ms-grid-column-span: 2; + border-color: #00AFF0; + margin: 0px; + padding: 0px +} + +div.optionsSettingsFlyout div.item.av.options_speakers select { + -ms-grid-column: 3; + -ms-grid-column-span: 1 +} + +div.optionsSettingsFlyout div.imSoundsWrapper { + padding-bottom: 100px +} + +div.optionsSettingsFlyout div.item.av>div.volumeLevel { + -ms-grid-column: 1; + -ms-grid-row: 2; + -ms-grid-column-align: start; + -ms-grid-row-align: end +} + +div.optionsSettingsFlyout div.item.av.options_speakers>div.volumeLevel { + -ms-grid-column: 2 +} + +div.optionsSettingsFlyout div.volumeLevel { + width: 30px; + height: 31px; + background-size: auto 4px; + background-repeat: repeat; + background-image: -ms-linear-gradient(#e7f1f5 75%, transparent 75%, transparent); + position: relative +} + +div.optionsSettingsFlyout div.volumeLevel::after { + content: ""; + height: 0px; + width: 30px; + position: absolute; + bottom: 0px; + background-size: auto 4px; + background-repeat: repeat; + background-image: -ms-linear-gradient(#00aff0 75%, transparent 75%, transparent) +} + +div.optionsSettingsFlyout div.volumeLevel[data-value='1']::after { + height: 3px +} + +div.optionsSettingsFlyout div.volumeLevel[data-value='2']::after { + height: 7px +} + +div.optionsSettingsFlyout div.volumeLevel[data-value='3']::after { + height: 11px +} + +div.optionsSettingsFlyout div.volumeLevel[data-value='4']::after { + height: 15px +} + +div.optionsSettingsFlyout div.volumeLevel[data-value='5']::after { + height: 19px +} + +div.optionsSettingsFlyout div.volumeLevel[data-value='6']::after { + height: 23px +} + +div.optionsSettingsFlyout div.volumeLevel[data-value='7']::after { + height: 27px +} + +div.optionsSettingsFlyout div.volumeLevel[data-value='8']::after { + height: 31px +} + +div.optionsSettingsFlyout div.item>button.playButton { + -ms-grid-column: 1; + -ms-grid-row: 2; + -ms-grid-column-align: start; + -ms-grid-row-align: end; + -ms-grid-column-span: 1; + display: inline-block; + height: 31px; + width: 31px; + border-radius: 50%; + font-family: "Skype UI Symbol" !important; + font-size: 31px; + line-height: normal; + text-align: center; + color: #fff; + background-color: #00aff0 +} + +div.optionsSettingsFlyout div.item>button.playButton:hover { + background-color: #009dd8 +} + +div.optionsSettingsFlyout div.item>button.playButton::before { + content: "\E40E" +} + +div.optionsSettingsFlyout div.item>select, +div.optionsSettingsFlyout div.item>input, +div.optionsSettingsFlyout div.item>div { + -ms-grid-column: 1; + -ms-grid-row: 2; + border-color: #00AFF0; + margin: 0px; + padding: 0px +} + +div.optionsSettingsFlyout option:checked, +div.optionsSettingsFlyout option:hover, +div.optionsSettingsFlyout option:active, +div.optionsSettingsFlyout select:focus::-ms-value, +div.optionsSettingsFlyout select:hover::-ms-value, +div.optionsSettingsFlyout:NOT(.emergency_country_first_item) select:focus option:checked:hover, +div.optionsSettingsFlyout select:focus option:hover:active, +div.optionsSettingsFlyout input[type=range]::-ms-fill-lower, +div.optionsSettingsFlyout input[type=range]:hover::-ms-fill-lower, +div.optionsSettingsFlyout input[type=range]:active::-ms-fill-lower { + background-color: #00AFF0 +} + +div.optionsSettingsFlyout div.item>button { + -ms-grid-column: 1; + -ms-grid-row: 2; + -ms-grid-column-align: start; + -ms-grid-row-align: center +} + +div.optionsSettingsFlyout div.item.toggle { + -ms-grid-columns: 1fr; + -ms-grid-rows: min-content min-content +} + +div.optionsSettingsFlyout div.item.toggle.personal_ads { + display: none +} + +div.optionsSettingsFlyout div.item.toggle>.win-toggleswitch { + -ms-grid-row: 2; + -ms-grid-column: 1 +} + +div.optionsSettingsFlyout div.item.toggle>.win-toggleswitch>div:not(.win-title) { + -ms-grid-columns: 1fr 125px +} + +@media screen and (-ms-high-contrast: active) { + div.optionsSettingsFlyout div.item>button, + div.optionsSettingsFlyout div.item>button.playButton { + border: 1px solid WindowText + } + div.optionsSettingsFlyout div.volumeLevel { + border: 1px solid WindowText + } + div.optionsSettingsFlyout div.volumeLevel::after { + background-image: -ms-linear-gradient(WindowText 75%, transparent 75%, transparent) + } +} + +.win-wide.win-settingsflyout { + width: 346px +} + +.win-wide.win-settingsflyout .win-header { + min-height: 48px; + height: auto +} + +.win-wide.win-settingsflyout .win-header .win-label { + padding-bottom: 10px; + padding-right: 40px; + word-break: break-all +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/pages/participantList.css b/packages/microsoft.skypeapp/pages/participantList.css index 41adee3d..f4293019 100644 --- a/packages/microsoft.skypeapp/pages/participantList.css +++ b/packages/microsoft.skypeapp/pages/participantList.css @@ -1 +1,91 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.fragment.participantList{width:100%;height:100%;background-color:#fff}div.fragment.participantList div.participants{-ms-grid-row:2;-ms-grid-column:1;margin-top:60px;height:calc(100% - 60px)}div.fragment.participantList div.participants>div{width:100%;height:100%}div.fragment.participantList div.participants>div.win-listview div.win-viewport{margin-bottom:30px}div.fragment.participantList div.participants>div.win-listview div.win-surface{height:100%;margin-left:120px;margin-right:40px;margin-bottom:100px}body.RTL div.fragment.participantList div.participants>div.win-listview div.win-surface{margin-left:40px;margin-right:120px}div.fragment.participantList div.participants div.item{color:#fff;position:relative;width:440px;height:440px;margin:0}div.fragment.participantList div.participants>div.MANY div.item{width:220px;height:220px}div.fragment.participantList div.participants div.win-listview div.win-focusedoutline{left:2px;top:2px;width:calc(100% - 4px);height:calc(100% - 4px);outline-width:2px}@media screen and (max-aspect-ratio: 1 / 1){div.fragment.participantList div.participants{margin-top:-20px;height:calc(100% + 20px);margin-left:20px}body.RTL div.fragment.participantList div.participants{margin-right:20px;margin-left:0}div.fragment.participantList div.participants>div.win-listview div.win-viewport div.win-surface{height:auto;margin:0 0 20px}div.fragment.participantList div.participants>div.win-listview div.win-viewport div.win-surface div.item,div.fragment.participantList div.participants>div.win-listview div.win-viewport div.win-surface>div.MANY div.item{width:140px;height:140px}}@media screen and (-ms-high-contrast: active){div.fragment.participantList div.participants div.win-listview div.win-focusedoutline{left:5px;top:5px;width:calc(100% - 10px);height:calc(100% - 10px);outline-width:5px;color:WindowText}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.fragment.participantList { + width: 100%; + height: 100%; + background-color: #fff +} + +div.fragment.participantList div.participants { + -ms-grid-row: 2; + -ms-grid-column: 1; + margin-top: 60px; + height: calc(100% - 60px) +} + +div.fragment.participantList div.participants>div { + width: 100%; + height: 100% +} + +div.fragment.participantList div.participants>div.win-listview div.win-viewport { + margin-bottom: 30px +} + +div.fragment.participantList div.participants>div.win-listview div.win-surface { + height: 100%; + margin-left: 120px; + margin-right: 40px; + margin-bottom: 100px +} + +body.RTL div.fragment.participantList div.participants>div.win-listview div.win-surface { + margin-left: 40px; + margin-right: 120px +} + +div.fragment.participantList div.participants div.item { + color: #fff; + position: relative; + width: 440px; + height: 440px; + margin: 0 +} + +div.fragment.participantList div.participants>div.MANY div.item { + width: 220px; + height: 220px +} + +div.fragment.participantList div.participants div.win-listview div.win-focusedoutline { + left: 2px; + top: 2px; + width: calc(100% - 4px); + height: calc(100% - 4px); + outline-width: 2px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.fragment.participantList div.participants { + margin-top: -20px; + height: calc(100% + 20px); + margin-left: 20px + } + body.RTL div.fragment.participantList div.participants { + margin-right: 20px; + margin-left: 0 + } + div.fragment.participantList div.participants>div.win-listview div.win-viewport div.win-surface { + height: auto; + margin: 0 0 20px + } + div.fragment.participantList div.participants>div.win-listview div.win-viewport div.win-surface div.item, + div.fragment.participantList div.participants>div.win-listview div.win-viewport div.win-surface>div.MANY div.item { + width: 140px; + height: 140px + } +} + +@media screen and (-ms-high-contrast: active) { + div.fragment.participantList div.participants div.win-listview div.win-focusedoutline { + left: 5px; + top: 5px; + width: calc(100% - 10px); + height: calc(100% - 10px); + outline-width: 5px; + color: WindowText + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/pages/policyWarning.css b/packages/microsoft.skypeapp/pages/policyWarning.css index 313cc096..97a0899c 100644 --- a/packages/microsoft.skypeapp/pages/policyWarning.css +++ b/packages/microsoft.skypeapp/pages/policyWarning.css @@ -1 +1,323 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.page section.navigationContainer>div>div.policyWarning.fragment{-ms-grid-rows:1fr}div.page section.navigationContainer>div>div.policyWarning.fragment header{-ms-grid-columns:120px 1fr 15px 40px}@media screen and (max-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.policyWarning.fragment header{-ms-grid-columns:60px 1fr}}div.page section.navigationContainer>div>div.policyWarning.fragment.SKYPEDISABLED header{display:none}div.policyWarning.fragment{display:-ms-grid;-ms-grid-rows:1fr;-ms-grid-columns:1fr;height:100%;font-size:26.67px;font-weight:200;background:-ms-linear-gradient(top, #00aff0 0%, #02a9e9 17%, #0898d5 42%, #127cb4 73%, #1d5e91 100%)}div.policyWarning.fragment a.retryButton{display:none;font-size:18px;padding:5px 30px 5px 30px;color:#00AEEF;background-color:#fff;position:absolute;bottom:20px;right:30px}body.RTL div.policyWarning.fragment a.retryButton{right:auto;left:30px}div.policyWarning.fragment a.retryButton:hover{color:#0182b3}div.policyWarning.fragment a.retryButton:active{color:#015c80}@media screen and (-ms-high-contrast: active){div.policyWarning.fragment a.retryButton{color:#fff;border:1px solid #fff}}div.policyWarning.fragment div.disabledMessage{-ms-grid-column-align:center;-ms-grid-row-align:center;display:none;text-align:center;color:#fff;line-height:30px}div.policyWarning.fragment.SKYPEDISABLED{background:#00AEEF}div.policyWarning.fragment.SKYPEDISABLED div.disabledMessage,div.policyWarning.fragment.SKYPEDISABLED a.retryButton,div.policyWarning.fragment.SKYPEDISABLED div.logo{display:block}div.policyWarning.fragment.SKYPEDISABLED div.protectionLayer,div.policyWarning.fragment.SKYPEDISABLED div.bottomHolder{display:none}div.policyWarning.fragment div.retryingMessage{-ms-grid-column-align:center;-ms-grid-row-align:center;display:none;color:#fff;text-align:center}div.policyWarning.fragment div.retryingMessage progress{color:#fff}div.policyWarning.fragment div.retryingMessage div.message{margin-top:20px}div.policyWarning.fragment.RETRYING div.retryingMessage{display:block}div.policyWarning.fragment.RETRYING div.disabledMessage,div.policyWarning.fragment.RETRYING a.retryButton{display:none}div.policyWarning.fragment div.logo{display:none;position:absolute;top:0px;left:0px;background:url("/images/svg/logo_white.svg");width:310px;height:136px;transform:scale(0.5);transform-origin:130px 100px}body.RTL div.policyWarning.fragment div.logo{left:auto;right:0px}@media screen and (-ms-high-contrast: active){div.policyWarning.fragment div.logo{-ms-high-contrast-adjust:none}}div.policyWarning.fragment header{position:absolute;color:#fff;width:auto;height:120px;font-size:14.66px;overflow:hidden;-ms-grid-columns:120px 1fr;left:0;z-index:999;-ms-grid-row:1;display:-ms-grid;-ms-grid-columns:120px 1fr 1fr 40px;-ms-grid-rows:1fr;overflow:visible;line-height:normal}body.RTL div.policyWarning.fragment header{left:auto;right:0}div.policyWarning.fragment header button.backbutton{-ms-grid-column:1;margin-left:39px;margin-right:39px;margin-top:59px}div.policyWarning.fragment header h1.name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media screen and (max-aspect-ratio: 1 / 1){div.policyWarning.fragment header h1.name{margin-right:0px;max-width:calc(100vw - 120px)}}div.policyWarning.fragment header span.callStatus{margin-top:71px;-ms-grid-column:4;display:block}@media screen and (max-aspect-ratio: 1 / 1){div.policyWarning.fragment header span.callStatus{-ms-grid-column:2;display:inline-block}}@media screen and (max-aspect-ratio: 1 / 1){div.policyWarning.fragment header div.callStatusContainer{margin-top:52px}}div.policyWarning.fragment div.bottomHolder{-ms-grid-row-align:end;display:-ms-grid;-ms-grid-columns:1fr;-ms-grid-rows:auto auto;margin-bottom:32px}div.policyWarning.fragment div.bottomHolder div.actions{-ms-grid-row:2;-ms-grid-column-align:center;-ms-grid-row-align:center;transition:opacity 0.3s linear 0s}@media screen and (max-aspect-ratio: 1 / 1){div.policyWarning.fragment div.bottomHolder div.actions{margin-bottom:15px}}div.policyWarning.fragment div.bottomHolder div.actions a{position:relative;z-index:100;display:inline-block;height:60px;width:60px;border-radius:50%;margin:0px 22.5px;font-family:"Skype UI Symbol";font-size:60px;line-height:normal;text-align:center;opacity:.9;color:#fff;border-color:#fff;box-shadow:0 0 0 5px rgba(0,0,0,0.1);background-color:#00aff0}div.policyWarning.fragment div.bottomHolder div.actions a.hangUp{background-color:#e81123}div.policyWarning.fragment div.bottomHolder div.actions a.hangUp:hover{background-color:#d00f1f}div.policyWarning.fragment div.bottomHolder div.actions a.hangUp:active{background-color:#a20c18}@media screen and (max-aspect-ratio: 1 / 1){div.policyWarning.fragment div.bottomHolder div.actions a{height:40px;width:40px;margin:0px 10px;font-size:40px}}div.policyWarning.fragment div.protectionLayer{width:100vw;height:100vh;background-color:rgba(0,0,0,0.5);display:-ms-grid;-ms-grid-rows:1fr;-ms-grid-columns:1fr;position:relative;z-index:999}div.policyWarning.fragment div.protectionLayer div.messageWrapper{-ms-grid-column-align:center;-ms-grid-row-align:center;width:100%;background-color:#00AEEF;color:#fff;padding-top:100px;min-height:200px;text-align:center}div.policyWarning.fragment div.protectionLayer div.messageWrapper div.contentWrapper{height:100%;text-align:right;display:inline-block;line-height:30px;padding:20px}div.policyWarning.fragment div.protectionLayer div.messageWrapper div.contentWrapper a.okButton{margin-top:40px;margin-bottom:40px;font-size:18px;padding:5px 30px 5px 30px;color:#00AEEF;display:inline-block;background-color:#fff}div.policyWarning.fragment div.protectionLayer div.messageWrapper div.contentWrapper a.okButton:hover{color:#0182b3}div.policyWarning.fragment div.protectionLayer div.messageWrapper div.contentWrapper a.okButton:active{color:#015c80}@media screen and (-ms-high-contrast: active){div.policyWarning.fragment div.protectionLayer div.messageWrapper div.contentWrapper a.okButton{color:#fff;border:1px solid #fff}}body.RTL div.policyWarning.fragment div.protectionLayer div.messageWrapper div.contentWrapper{text-align:left}@media screen and (-ms-high-contrast: active){div.policyWarning.fragment div.protectionLayer div.messageWrapper{border:2px solid #fff}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.page section.navigationContainer>div>div.policyWarning.fragment { + -ms-grid-rows: 1fr +} + +div.page section.navigationContainer>div>div.policyWarning.fragment header { + -ms-grid-columns: 120px 1fr 15px 40px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.policyWarning.fragment header { + -ms-grid-columns: 60px 1fr + } +} + +div.page section.navigationContainer>div>div.policyWarning.fragment.SKYPEDISABLED header { + display: none +} + +div.policyWarning.fragment { + display: -ms-grid; + -ms-grid-rows: 1fr; + -ms-grid-columns: 1fr; + height: 100%; + font-size: 26.67px; + font-weight: 200; + background: -ms-linear-gradient(top, #00aff0 0%, #02a9e9 17%, #0898d5 42%, #127cb4 73%, #1d5e91 100%) +} + +div.policyWarning.fragment a.retryButton { + display: none; + font-size: 18px; + padding: 5px 30px 5px 30px; + color: #00AEEF; + background-color: #fff; + position: absolute; + bottom: 20px; + right: 30px +} + +body.RTL div.policyWarning.fragment a.retryButton { + right: auto; + left: 30px +} + +div.policyWarning.fragment a.retryButton:hover { + color: #0182b3 +} + +div.policyWarning.fragment a.retryButton:active { + color: #015c80 +} + +@media screen and (-ms-high-contrast: active) { + div.policyWarning.fragment a.retryButton { + color: #fff; + border: 1px solid #fff + } +} + +div.policyWarning.fragment div.disabledMessage { + -ms-grid-column-align: center; + -ms-grid-row-align: center; + display: none; + text-align: center; + color: #fff; + line-height: 30px +} + +div.policyWarning.fragment.SKYPEDISABLED { + background: #00AEEF +} + +div.policyWarning.fragment.SKYPEDISABLED div.disabledMessage, +div.policyWarning.fragment.SKYPEDISABLED a.retryButton, +div.policyWarning.fragment.SKYPEDISABLED div.logo { + display: block +} + +div.policyWarning.fragment.SKYPEDISABLED div.protectionLayer, +div.policyWarning.fragment.SKYPEDISABLED div.bottomHolder { + display: none +} + +div.policyWarning.fragment div.retryingMessage { + -ms-grid-column-align: center; + -ms-grid-row-align: center; + display: none; + color: #fff; + text-align: center +} + +div.policyWarning.fragment div.retryingMessage progress { + color: #fff +} + +div.policyWarning.fragment div.retryingMessage div.message { + margin-top: 20px +} + +div.policyWarning.fragment.RETRYING div.retryingMessage { + display: block +} + +div.policyWarning.fragment.RETRYING div.disabledMessage, +div.policyWarning.fragment.RETRYING a.retryButton { + display: none +} + +div.policyWarning.fragment div.logo { + display: none; + position: absolute; + top: 0px; + left: 0px; + background: url("/images/svg/logo_white.svg"); + width: 310px; + height: 136px; + transform: scale(0.5); + transform-origin: 130px 100px +} + +body.RTL div.policyWarning.fragment div.logo { + left: auto; + right: 0px +} + +@media screen and (-ms-high-contrast: active) { + div.policyWarning.fragment div.logo { + -ms-high-contrast-adjust: none + } +} + +div.policyWarning.fragment header { + position: absolute; + color: #fff; + width: auto; + height: 120px; + font-size: 14.66px; + overflow: hidden; + -ms-grid-columns: 120px 1fr; + left: 0; + z-index: 999; + -ms-grid-row: 1; + display: -ms-grid; + -ms-grid-columns: 120px 1fr 1fr 40px; + -ms-grid-rows: 1fr; + overflow: visible; + line-height: normal +} + +body.RTL div.policyWarning.fragment header { + left: auto; + right: 0 +} + +div.policyWarning.fragment header button.backbutton { + -ms-grid-column: 1; + margin-left: 39px; + margin-right: 39px; + margin-top: 59px +} + +div.policyWarning.fragment header h1.name { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.policyWarning.fragment header h1.name { + margin-right: 0px; + max-width: calc(100vw - 120px) + } +} + +div.policyWarning.fragment header span.callStatus { + margin-top: 71px; + -ms-grid-column: 4; + display: block +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.policyWarning.fragment header span.callStatus { + -ms-grid-column: 2; + display: inline-block + } +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.policyWarning.fragment header div.callStatusContainer { + margin-top: 52px + } +} + +div.policyWarning.fragment div.bottomHolder { + -ms-grid-row-align: end; + display: -ms-grid; + -ms-grid-columns: 1fr; + -ms-grid-rows: auto auto; + margin-bottom: 32px +} + +div.policyWarning.fragment div.bottomHolder div.actions { + -ms-grid-row: 2; + -ms-grid-column-align: center; + -ms-grid-row-align: center; + transition: opacity 0.3s linear 0s +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.policyWarning.fragment div.bottomHolder div.actions { + margin-bottom: 15px + } +} + +div.policyWarning.fragment div.bottomHolder div.actions a { + position: relative; + z-index: 100; + display: inline-block; + height: 60px; + width: 60px; + border-radius: 50%; + margin: 0px 22.5px; + font-family: "Skype UI Symbol" !important; + font-size: 60px; + line-height: normal; + text-align: center; + opacity: .9; + color: #fff; + border-color: #fff; + box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1); + background-color: #00aff0 +} + +div.policyWarning.fragment div.bottomHolder div.actions a.hangUp { + background-color: #e81123 +} + +div.policyWarning.fragment div.bottomHolder div.actions a.hangUp:hover { + background-color: #d00f1f +} + +div.policyWarning.fragment div.bottomHolder div.actions a.hangUp:active { + background-color: #a20c18 +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.policyWarning.fragment div.bottomHolder div.actions a { + height: 40px; + width: 40px; + margin: 0px 10px; + font-size: 40px + } +} + +div.policyWarning.fragment div.protectionLayer { + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.5); + display: -ms-grid; + -ms-grid-rows: 1fr; + -ms-grid-columns: 1fr; + position: relative; + z-index: 999 +} + +div.policyWarning.fragment div.protectionLayer div.messageWrapper { + -ms-grid-column-align: center; + -ms-grid-row-align: center; + width: 100%; + background-color: #00AEEF; + color: #fff; + padding-top: 100px; + min-height: 200px; + text-align: center +} + +div.policyWarning.fragment div.protectionLayer div.messageWrapper div.contentWrapper { + height: 100%; + text-align: right; + display: inline-block; + line-height: 30px; + padding: 20px +} + +div.policyWarning.fragment div.protectionLayer div.messageWrapper div.contentWrapper a.okButton { + margin-top: 40px; + margin-bottom: 40px; + font-size: 18px; + padding: 5px 30px 5px 30px; + color: #00AEEF; + display: inline-block; + background-color: #fff +} + +div.policyWarning.fragment div.protectionLayer div.messageWrapper div.contentWrapper a.okButton:hover { + color: #0182b3 +} + +div.policyWarning.fragment div.protectionLayer div.messageWrapper div.contentWrapper a.okButton:active { + color: #015c80 +} + +@media screen and (-ms-high-contrast: active) { + div.policyWarning.fragment div.protectionLayer div.messageWrapper div.contentWrapper a.okButton { + color: #fff; + border: 1px solid #fff + } +} + +body.RTL div.policyWarning.fragment div.protectionLayer div.messageWrapper div.contentWrapper { + text-align: left +} + +@media screen and (-ms-high-contrast: active) { + div.policyWarning.fragment div.protectionLayer div.messageWrapper { + border: 2px solid #fff + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/pages/policyWarning.scss b/packages/microsoft.skypeapp/pages/policyWarning.scss index e7da6e46..ed53a9ea 100644 --- a/packages/microsoft.skypeapp/pages/policyWarning.scss +++ b/packages/microsoft.skypeapp/pages/policyWarning.scss @@ -212,7 +212,7 @@ div.policyWarning.fragment { width: 60px; border-radius: 50%; margin: 0px 22.5px; - font-family: "Skype UI Symbol"; + font-family: "Skype UI Symbol" !important; font-size: 60px; line-height: normal; text-align: center; diff --git a/packages/microsoft.skypeapp/pages/retailMode.css b/packages/microsoft.skypeapp/pages/retailMode.css index 95c6458f..3783fcd6 100644 --- a/packages/microsoft.skypeapp/pages/retailMode.css +++ b/packages/microsoft.skypeapp/pages/retailMode.css @@ -1 +1,20 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.page section.navigationContainer{visibility:visible;display:-ms-grid;-ms-grid-rows:1fr;-ms-grid-columns:1fr;background-color:black}#retailMovie{outline:none;width:100%;background-color:black;-ms-grid-row-align:center;-ms-grid-column-align:center} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.page section.navigationContainer { + visibility: visible; + display: -ms-grid; + -ms-grid-rows: 1fr; + -ms-grid-columns: 1fr; + background-color: black +} + +#retailMovie { + outline: none; + width: 100%; + background-color: black; + -ms-grid-row-align: center; + -ms-grid-column-align: center +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/pages/search.css b/packages/microsoft.skypeapp/pages/search.css index 2679ab56..8fb7975a 100644 --- a/packages/microsoft.skypeapp/pages/search.css +++ b/packages/microsoft.skypeapp/pages/search.css @@ -1 +1,330 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.page section.navigationContainer>div>div.fragment.search{-ms-grid-rows:160px 1fr;height:100%}@media screen and (max-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.fragment.search{-ms-grid-rows:120px 1fr}}@media screen and (max-width: 400px){div.page section.navigationContainer>div>div.fragment.search{-ms-grid-rows:95px 1fr}}div.page section.navigationContainer>div>div.fragment.search div.info{-ms-grid-row:2;-ms-grid-column:1;margin-left:120px;margin-right:40px;margin-top:10px;background-color:#fff;padding:10px;color:#93999d}div.page section.navigationContainer>div>div.fragment.search div.info>div{display:none}div.page section.navigationContainer>div>div.fragment.search div.info>div span{white-space:nowrap;vertical-align:baseline}div.page section.navigationContainer>div>div.fragment.search div.info>div span em{font-weight:600;white-space:nowrap;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:top}div.page section.navigationContainer>div>div.fragment.search div.info>div span.wrapper{white-space:normal}@media screen and (max-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.fragment.search div.info{margin-left:20px;margin-right:20px}}div.page section.navigationContainer>div>div.fragment.search.NOTDIRONLYSTARTED div.info div.notStarted,div.page section.navigationContainer>div>div.fragment.search.NOTSTARTED div.info div.notStarted{display:block}div.page section.navigationContainer>div>div.fragment.search.NOTDIRONLYSTARTED div.contacts,div.page section.navigationContainer>div>div.fragment.search.NOTSTARTED div.contacts{display:none}div.page section.navigationContainer>div>div.fragment.search.NOLOCALRESULTS div.contacts,div.page section.navigationContainer>div>div.fragment.search.NODIRECTORYRESULTS div.contacts{display:none}div.page section.navigationContainer>div>div.fragment.search.NOLOCALRESULTS div.info div.noResult,div.page section.navigationContainer>div>div.fragment.search.NODIRECTORYRESULTS div.info div.noResult{display:block}div.page section.navigationContainer>div>div.fragment.search.NOLOCALRESULTS div.info div.noResult div,div.page section.navigationContainer>div>div.fragment.search.NODIRECTORYRESULTS div.info div.noResult div{color:#00aff0}div.page section.navigationContainer>div>div.fragment.search.NOLOCALRESULTS div.info div.noResult button,div.page section.navigationContainer>div>div.fragment.search.NODIRECTORYRESULTS div.info div.noResult button{margin-top:40px}@media screen and (-ms-high-contrast: active){div.page section.navigationContainer>div>div.fragment.search.NOLOCALRESULTS div.info div.noResult button,div.page section.navigationContainer>div>div.fragment.search.NODIRECTORYRESULTS div.info div.noResult button{border:1px solid}}div.page section.navigationContainer>div>div.fragment.search.NOLOCALRESULTS div.win-item div.action,div.page section.navigationContainer>div>div.fragment.search.NODIRECTORYRESULTS div.win-item div.action{display:none}div.page section.navigationContainer>div>div.fragment.search.NODIRECTORYRESULTS div.info div.noResult button{display:none}div.page section.navigationContainer>div>div.fragment.search .progressBar{position:absolute;display:none;left:170px;top:110px}div.page section.navigationContainer>div>div.fragment.search .progressBar.SEARCHING{display:block}body.RTL div.page section.navigationContainer>div>div.fragment.search .progressBar.SEARCHING{left:auto;right:170px}@media screen and (max-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.fragment.search .progressBar{top:45px;left:45px}body.RTL div.page section.navigationContainer>div>div.fragment.search .progressBar{left:auto;right:45px}}div.page section.navigationContainer>div>div.fragment.search .win-groups.win-listview .win-horizontal .win-groupleader{margin-left:0}div.page section.navigationContainer>div>div.fragment.search .win-groups.win-listview .win-vertical .win-listlayout .win-groupleader,div.page section.navigationContainer>div>div.fragment.search .win-groups.win-listview .win-vertical .win-gridlayout .win-groupleader{margin-top:70px}@media screen and (max-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.fragment.search .win-groups.win-listview .win-vertical .win-listlayout .win-groupleader,div.page section.navigationContainer>div>div.fragment.search .win-groups.win-listview .win-vertical .win-gridlayout .win-groupleader{margin-top:30px}div.page section.navigationContainer>div>div.fragment.search .win-groups.win-listview .win-vertical .win-listlayout .win-groupleader div.win-groupheader,div.page section.navigationContainer>div>div.fragment.search .win-groups.win-listview .win-vertical .win-gridlayout .win-groupleader div.win-groupheader{margin:0 20px;padding:0 0 5px 0}}div.page section.navigationContainer>div>div.fragment.search .progressBar .win-ring,div.page section.navigationContainer>div>div.fragment.search .win-item .win-ring{width:40px;height:40px}div.page section.navigationContainer>div>div.fragment.search .win-item .win-ring{margin:8px}div.page section.navigationContainer>div>div.fragment.search em{font-style:normal}div.page section.navigationContainer>div>div.fragment.search h1 em{font-weight:300}div.page section.navigationContainer>div>div.fragment.search div.contacts{display:block}div.page section.navigationContainer>div>div.fragment.search div.contacts div.win-container{width:380px;height:90px;box-sizing:border-box}div.page section.navigationContainer>div>div.fragment.search div.contacts div.win-container em{font-weight:600}@media screen and (max-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.fragment.search div.contacts div.win-container{width:320px;height:70px}}@media screen and (max-aspect-ratio: 1 / 1) and (max-width: 639px){div.page section.navigationContainer>div>div.fragment.search div.contacts div.win-container{width:100%}div.page section.navigationContainer>div>div.fragment.search div.contacts div.win-container div.win-item{display:block;height:70px;width:calc(100% - 30px)}div.page section.navigationContainer>div>div.fragment.search div.contacts div.win-container div.win-focusedoutline{width:calc(100% - 34px);height:66px}}div.page section.navigationContainer>div>div.fragment.search div.contacts div.win-surface{margin-top:25px}@media screen and (max-aspect-ratio: 1 / 1){div.page section.navigationContainer>div>div.fragment.search div.contacts div.win-surface{margin-top:0px}}div.page section.navigationContainer>div>div.fragment.search div.contacts div.contactWrapper .buddyInfo,div.page section.navigationContainer>div>div.fragment.search div.contacts div.contactWrapper .ISBUDDY .statusInfo{display:none}div.page section.navigationContainer>div>div.fragment.search div.contacts div.contactWrapper .ISBUDDY .buddyInfo{display:inline}div.page section.navigationContainer>div>div.fragment.search div.contacts div.contactWrapper.local div.matchedName,div.page section.navigationContainer>div>div.fragment.search div.contacts div.contactWrapper.local div.status{display:none}div.page section.navigationContainer>div>div.fragment.search div.contacts div.contactWrapper.local.NAMEMATCH div.name,div.page section.navigationContainer>div>div.fragment.search div.contacts div.contactWrapper.local.NAMEMATCH div.matchedInfo{display:none}div.page section.navigationContainer>div>div.fragment.search div.contacts div.contactWrapper.local.NAMEMATCH div.matchedName,div.page section.navigationContainer>div>div.fragment.search div.contacts div.contactWrapper.local.NAMEMATCH div.status{display:block}div.page section.navigationContainer>div>div.fragment.search div.win-item div.action{width:380px;height:90px;padding:5px;box-sizing:border-box}div.page section.navigationContainer>div>div.fragment.search div.win-item button.search{font-weight:100;background:#00aff0}@media screen and (max-aspect-ratio: 1 / 1){div.fragment.search div.contacts div.contactWrapper.title{padding:0}div.fragment.search div.contacts div.contactWrapper h2{border:solid #e7f1f5;border-width:1px 0;box-sizing:border-box;line-height:70px;height:100%;overflow:hidden;padding-left:20px}body.RTL div.fragment.search div.contacts div.contactWrapper h2{padding-left:0;padding-right:20px}div.fragment.search header div.wrapper h1{white-space:nowrap;max-width:250px}div.fragment.search header div.wrapper h1 span{white-space:nowrap;vertical-align:auto}div.fragment.search header div.wrapper h1 em,div.fragment.search header div.wrapper h1 span.wrapper{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;display:inline-block;vertical-align:bottom}div.fragment.search div.contacts div.action{box-sizing:border-box;padding-top:25px;padding-left:25px;overflow:hidden}div.fragment.search div.contacts div.win-container div.win-itembox{margin:0 0 0 15px}body.RTL div.fragment.search div.contacts div.win-container div.win-itembox{margin:0 15px 0 0}div.fragment.search div.contacts div.contactWrapper div.detail{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}div.fragment.search button.text{max-width:80%}body.RTL div.fragment.search div.contacts div.action{max-width:320px;padding-left:0;padding-right:25px}}@media screen and (-ms-high-contrast: active){div.fragment.search div.contacts div.win-container:not(.win-selected) div.win-item:hover div.contactWrapper{background:none;border:1px solid WindowText}div.fragment.search div.contacts div.contactWrapper div.avatar{-ms-high-contrast-adjust:none}div.fragment.search div.contacts div.win-item>div.action>button{box-shadow:0px 0px 0px 1px WindowText}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.page section.navigationContainer>div>div.fragment.search { + -ms-grid-rows: 160px 1fr; + height: 100% +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.fragment.search { + -ms-grid-rows: 120px 1fr + } +} + +@media screen and (max-width: 400px) { + div.page section.navigationContainer>div>div.fragment.search { + -ms-grid-rows: 95px 1fr + } +} + +div.page section.navigationContainer>div>div.fragment.search div.info { + -ms-grid-row: 2; + -ms-grid-column: 1; + margin-left: 120px; + margin-right: 40px; + margin-top: 10px; + background-color: #fff; + padding: 10px; + color: #93999d +} + +div.page section.navigationContainer>div>div.fragment.search div.info>div { + display: none +} + +div.page section.navigationContainer>div>div.fragment.search div.info>div span { + white-space: nowrap; + vertical-align: baseline +} + +div.page section.navigationContainer>div>div.fragment.search div.info>div span em { + font-weight: 600; + white-space: nowrap; + max-width: calc(100% - 20px); + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + vertical-align: top +} + +div.page section.navigationContainer>div>div.fragment.search div.info>div span.wrapper { + white-space: normal +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.fragment.search div.info { + margin-left: 20px; + margin-right: 20px + } +} + +div.page section.navigationContainer>div>div.fragment.search.NOTDIRONLYSTARTED div.info div.notStarted, +div.page section.navigationContainer>div>div.fragment.search.NOTSTARTED div.info div.notStarted { + display: block +} + +div.page section.navigationContainer>div>div.fragment.search.NOTDIRONLYSTARTED div.contacts, +div.page section.navigationContainer>div>div.fragment.search.NOTSTARTED div.contacts { + display: none +} + +div.page section.navigationContainer>div>div.fragment.search.NOLOCALRESULTS div.contacts, +div.page section.navigationContainer>div>div.fragment.search.NODIRECTORYRESULTS div.contacts { + display: none +} + +div.page section.navigationContainer>div>div.fragment.search.NOLOCALRESULTS div.info div.noResult, +div.page section.navigationContainer>div>div.fragment.search.NODIRECTORYRESULTS div.info div.noResult { + display: block +} + +div.page section.navigationContainer>div>div.fragment.search.NOLOCALRESULTS div.info div.noResult div, +div.page section.navigationContainer>div>div.fragment.search.NODIRECTORYRESULTS div.info div.noResult div { + color: #00aff0 +} + +div.page section.navigationContainer>div>div.fragment.search.NOLOCALRESULTS div.info div.noResult button, +div.page section.navigationContainer>div>div.fragment.search.NODIRECTORYRESULTS div.info div.noResult button { + margin-top: 40px +} + +@media screen and (-ms-high-contrast: active) { + div.page section.navigationContainer>div>div.fragment.search.NOLOCALRESULTS div.info div.noResult button, + div.page section.navigationContainer>div>div.fragment.search.NODIRECTORYRESULTS div.info div.noResult button { + border: 1px solid + } +} + +div.page section.navigationContainer>div>div.fragment.search.NOLOCALRESULTS div.win-item div.action, +div.page section.navigationContainer>div>div.fragment.search.NODIRECTORYRESULTS div.win-item div.action { + display: none +} + +div.page section.navigationContainer>div>div.fragment.search.NODIRECTORYRESULTS div.info div.noResult button { + display: none +} + +div.page section.navigationContainer>div>div.fragment.search .progressBar { + position: absolute; + display: none; + left: 170px; + top: 110px +} + +div.page section.navigationContainer>div>div.fragment.search .progressBar.SEARCHING { + display: block +} + +body.RTL div.page section.navigationContainer>div>div.fragment.search .progressBar.SEARCHING { + left: auto; + right: 170px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.fragment.search .progressBar { + top: 45px; + left: 45px + } + body.RTL div.page section.navigationContainer>div>div.fragment.search .progressBar { + left: auto; + right: 45px + } +} + +div.page section.navigationContainer>div>div.fragment.search .win-groups.win-listview .win-horizontal .win-groupleader { + margin-left: 0 +} + +div.page section.navigationContainer>div>div.fragment.search .win-groups.win-listview .win-vertical .win-listlayout .win-groupleader, +div.page section.navigationContainer>div>div.fragment.search .win-groups.win-listview .win-vertical .win-gridlayout .win-groupleader { + margin-top: 70px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.fragment.search .win-groups.win-listview .win-vertical .win-listlayout .win-groupleader, + div.page section.navigationContainer>div>div.fragment.search .win-groups.win-listview .win-vertical .win-gridlayout .win-groupleader { + margin-top: 30px + } + div.page section.navigationContainer>div>div.fragment.search .win-groups.win-listview .win-vertical .win-listlayout .win-groupleader div.win-groupheader, + div.page section.navigationContainer>div>div.fragment.search .win-groups.win-listview .win-vertical .win-gridlayout .win-groupleader div.win-groupheader { + margin: 0 20px; + padding: 0 0 5px 0 + } +} + +div.page section.navigationContainer>div>div.fragment.search .progressBar .win-ring, +div.page section.navigationContainer>div>div.fragment.search .win-item .win-ring { + width: 40px; + height: 40px +} + +div.page section.navigationContainer>div>div.fragment.search .win-item .win-ring { + margin: 8px +} + +div.page section.navigationContainer>div>div.fragment.search em { + font-style: normal +} + +div.page section.navigationContainer>div>div.fragment.search h1 em { + font-weight: 300 +} + +div.page section.navigationContainer>div>div.fragment.search div.contacts { + display: block +} + +div.page section.navigationContainer>div>div.fragment.search div.contacts div.win-container { + width: 380px; + height: 90px; + box-sizing: border-box +} + +div.page section.navigationContainer>div>div.fragment.search div.contacts div.win-container em { + font-weight: 600 +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.fragment.search div.contacts div.win-container { + width: 320px; + height: 70px + } +} + +@media screen and (max-aspect-ratio: 1 / 1) and (max-width: 639px) { + div.page section.navigationContainer>div>div.fragment.search div.contacts div.win-container { + width: 100% + } + div.page section.navigationContainer>div>div.fragment.search div.contacts div.win-container div.win-item { + display: block; + height: 70px; + width: calc(100% - 30px) + } + div.page section.navigationContainer>div>div.fragment.search div.contacts div.win-container div.win-focusedoutline { + width: calc(100% - 34px); + height: 66px + } +} + +div.page section.navigationContainer>div>div.fragment.search div.contacts div.win-surface { + margin-top: 25px +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.page section.navigationContainer>div>div.fragment.search div.contacts div.win-surface { + margin-top: 0px + } +} + +div.page section.navigationContainer>div>div.fragment.search div.contacts div.contactWrapper .buddyInfo, +div.page section.navigationContainer>div>div.fragment.search div.contacts div.contactWrapper .ISBUDDY .statusInfo { + display: none +} + +div.page section.navigationContainer>div>div.fragment.search div.contacts div.contactWrapper .ISBUDDY .buddyInfo { + display: inline +} + +div.page section.navigationContainer>div>div.fragment.search div.contacts div.contactWrapper.local div.matchedName, +div.page section.navigationContainer>div>div.fragment.search div.contacts div.contactWrapper.local div.status { + display: none +} + +div.page section.navigationContainer>div>div.fragment.search div.contacts div.contactWrapper.local.NAMEMATCH div.name, +div.page section.navigationContainer>div>div.fragment.search div.contacts div.contactWrapper.local.NAMEMATCH div.matchedInfo { + display: none +} + +div.page section.navigationContainer>div>div.fragment.search div.contacts div.contactWrapper.local.NAMEMATCH div.matchedName, +div.page section.navigationContainer>div>div.fragment.search div.contacts div.contactWrapper.local.NAMEMATCH div.status { + display: block +} + +div.page section.navigationContainer>div>div.fragment.search div.win-item div.action { + width: 380px; + height: 90px; + padding: 5px; + box-sizing: border-box +} + +div.page section.navigationContainer>div>div.fragment.search div.win-item button.search { + font-weight: 100; + background: #00aff0 +} + +@media screen and (max-aspect-ratio: 1 / 1) { + div.fragment.search div.contacts div.contactWrapper.title { + padding: 0 + } + div.fragment.search div.contacts div.contactWrapper h2 { + border: solid #e7f1f5; + border-width: 1px 0; + box-sizing: border-box; + line-height: 70px; + height: 100%; + overflow: hidden; + padding-left: 20px + } + body.RTL div.fragment.search div.contacts div.contactWrapper h2 { + padding-left: 0; + padding-right: 20px + } + div.fragment.search header div.wrapper h1 { + white-space: nowrap; + max-width: 250px + } + div.fragment.search header div.wrapper h1 span { + white-space: nowrap; + vertical-align: auto + } + div.fragment.search header div.wrapper h1 em, + div.fragment.search header div.wrapper h1 span.wrapper { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 220px; + display: inline-block; + vertical-align: bottom + } + div.fragment.search div.contacts div.action { + box-sizing: border-box; + padding-top: 25px; + padding-left: 25px; + overflow: hidden + } + div.fragment.search div.contacts div.win-container div.win-itembox { + margin: 0 0 0 15px + } + body.RTL div.fragment.search div.contacts div.win-container div.win-itembox { + margin: 0 15px 0 0 + } + div.fragment.search div.contacts div.contactWrapper div.detail { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis + } + div.fragment.search button.text { + max-width: 80% + } + body.RTL div.fragment.search div.contacts div.action { + max-width: 320px; + padding-left: 0; + padding-right: 25px + } +} + +@media screen and (-ms-high-contrast: active) { + div.fragment.search div.contacts div.win-container:not(.win-selected) div.win-item:hover div.contactWrapper { + background: none; + border: 1px solid WindowText + } + div.fragment.search div.contacts div.contactWrapper div.avatar { + -ms-high-contrast-adjust: none + } + div.fragment.search div.contacts div.win-item>div.action>button { + box-shadow: 0px 0px 0px 1px WindowText + } +} \ No newline at end of file diff --git a/packages/microsoft.skypeapp/pages/upgrade.css b/packages/microsoft.skypeapp/pages/upgrade.css index ab62045b..aabb4b4a 100644 --- a/packages/microsoft.skypeapp/pages/upgrade.css +++ b/packages/microsoft.skypeapp/pages/upgrade.css @@ -1 +1,74 @@ -/* Copyright (c) Microsoft. All rights reserved. *//* Copyright (c) Microsoft. All rights reserved. */div.page.upgrade div.fragment.upgrade{position:absolute;width:100%;height:100%;background:#0d6d90;display:-ms-grid;-ms-grid-columns:1fr;-ms-grid-rows:1fr}div.fragment.upgrade div.container{background:#fff;-ms-grid-row:1;-ms-grid-column:1;-ms-grid-row-align:center}div.fragment.upgrade div.inner{display:block;margin:0 auto 15px;width:440px;height:inherit;position:relative}div.fragment.upgrade div.inner h1{padding:22px 0 0}div.fragment.upgrade div.inner div.btnContainer{text-align:right;margin-top:16px;margin-bottom:20px}body.RTL div.fragment.upgrade div.inner div.btnContainer{text-align:left}div.fragment.upgrade div.inner a.btnInstall{display:inline-block;height:40px;line-height:40px;border-radius:20px;padding:0 40px;color:#fff;background:#00aff0;font-size:16px;cursor:pointer}div.fragment.upgrade div.inner a.btnInstall:hover{background-color:#009dd8}div.fragment.upgrade div.inner a.btnInstall:active{background-color:#007aa8}div.fragment.upgrade div.inner a.btnInstall.DISABLED{background-color:#99dff9;color:#c2ecfb}@media screen and (-ms-high-contrast: active){div.fragment.upgrade div.inner a.btnInstall{box-shadow:0px 0px 0px 1px WindowText}} +/* Copyright (c) Microsoft. All rights reserved. */ + + +/* Copyright (c) Microsoft. All rights reserved. */ + +div.page.upgrade div.fragment.upgrade { + position: absolute; + width: 100%; + height: 100%; + background: #0d6d90; + display: -ms-grid; + -ms-grid-columns: 1fr; + -ms-grid-rows: 1fr +} + +div.fragment.upgrade div.container { + background: #fff; + -ms-grid-row: 1; + -ms-grid-column: 1; + -ms-grid-row-align: center +} + +div.fragment.upgrade div.inner { + display: block; + margin: 0 auto 15px; + width: 440px; + height: inherit; + position: relative +} + +div.fragment.upgrade div.inner h1 { + padding: 22px 0 0 +} + +div.fragment.upgrade div.inner div.btnContainer { + text-align: right; + margin-top: 16px; + margin-bottom: 20px +} + +body.RTL div.fragment.upgrade div.inner div.btnContainer { + text-align: left +} + +div.fragment.upgrade div.inner a.btnInstall { + display: inline-block; + height: 40px; + line-height: 40px; + border-radius: 20px; + padding: 0 40px; + color: #fff; + background: #00aff0; + font-size: 16px; + cursor: pointer +} + +div.fragment.upgrade div.inner a.btnInstall:hover { + background-color: #009dd8 +} + +div.fragment.upgrade div.inner a.btnInstall:active { + background-color: #007aa8 +} + +div.fragment.upgrade div.inner a.btnInstall.DISABLED { + background-color: #99dff9; + color: #c2ecfb +} + +@media screen and (-ms-high-contrast: active) { + div.fragment.upgrade div.inner a.btnInstall { + box-shadow: 0px 0px 0px 1px WindowText + } +} \ No newline at end of file diff --git a/packages/microsoft.windowscommunicationsapps/AppxBlockMap.xml b/packages/microsoft.windowscommunicationsapps/AppxBlockMap.xml new file mode 100644 index 00000000..88c4799a --- /dev/null +++ b/packages/microsoft.windowscommunicationsapps/AppxBlockMap.xml @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/packages/microsoft.windowscommunicationsapps/AppxManifest.xml b/packages/microsoft.windowscommunicationsapps/AppxManifest.xml index 3303c0b4..7d10d9c6 100644 --- a/packages/microsoft.windowscommunicationsapps/AppxManifest.xml +++ b/packages/microsoft.windowscommunicationsapps/AppxManifest.xml @@ -1,41 +1,44 @@ - + - - + ms-resource:communicationsPackageName ms-resource:communicationsPackageName Microsoft Corporation ModernShared\Resources\img\suite_logo.png - - + + - 6.3.0 6.3.0 - - - - - - - - + + + + + + + - - + + + + + + + + + + + @@ -129,7 +132,35 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -171,7 +202,46 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -257,15 +327,264 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Uri + Text + Html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - @@ -307,6 +626,13 @@ + + + diagnostics.dll + + + + bici.dll @@ -323,6 +649,12 @@ + + + tx.dll + + + Microsoft.WindowsLive.Platform.dll @@ -395,6 +727,68 @@ + + + Microsoft.WindowsLive.Platform.dll + + + + + + + + Microsoft.WindowsLive.Platform.dll + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + CLRHost.dll + + + + + + + + + + + + Microsoft.WindowsLive.Photomail.dll @@ -413,10 +807,15 @@ + + + Microsoft.WindowsLive.ErrorReporting.UT.dll + + + - - + \ No newline at end of file diff --git a/packages/microsoft.windowscommunicationsapps/AppxSignature.p7x b/packages/microsoft.windowscommunicationsapps/AppxSignature.p7x new file mode 100644 index 00000000..64e68153 Binary files /dev/null and b/packages/microsoft.windowscommunicationsapps/AppxSignature.p7x differ diff --git a/packages/microsoft.windowscommunicationsapps/assert/assert.htm b/packages/microsoft.windowscommunicationsapps/assert/assert.htm new file mode 100644 index 00000000..90a745c2 --- /dev/null +++ b/packages/microsoft.windowscommunicationsapps/assert/assert.htm @@ -0,0 +1,13 @@ + + + + Assert + + + + + diff --git a/packages/microsoft.windowscommunicationsapps/assert/assert150x150.png b/packages/microsoft.windowscommunicationsapps/assert/assert150x150.png new file mode 100644 index 00000000..9205e62b Binary files /dev/null and b/packages/microsoft.windowscommunicationsapps/assert/assert150x150.png differ diff --git a/packages/microsoft.windowscommunicationsapps/assert/assert30x30.png b/packages/microsoft.windowscommunicationsapps/assert/assert30x30.png new file mode 100644 index 00000000..dc608718 Binary files /dev/null and b/packages/microsoft.windowscommunicationsapps/assert/assert30x30.png differ diff --git a/packages/microsoft.windowscommunicationsapps/assert/assert620x300.png b/packages/microsoft.windowscommunicationsapps/assert/assert620x300.png new file mode 100644 index 00000000..77e6e7a9 Binary files /dev/null and b/packages/microsoft.windowscommunicationsapps/assert/assert620x300.png differ diff --git a/packages/microsoft.windowscommunicationsapps/config.xml b/packages/microsoft.windowscommunicationsapps/config.xml new file mode 100644 index 00000000..2b76f7ef --- /dev/null +++ b/packages/microsoft.windowscommunicationsapps/config.xml @@ -0,0 +1 @@ +https://g.live.com/1recfg/md?!/~Live.ConfigServer.ModernMetadata/~/~/~/~/~op-GetMetaConfig/~ts-%ls/~version-1705988320674/~branch-GOpcaIrXA46ztHvgcXG5QDOGFOOD/config.xml17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates16.0.0.017.5.9883.20674ms-windows-store:updates16.0.0.016.9999.0.0ms-windows-store:updates16.9999.0.016.9999.0.0ms-windows-store:updatestruesupport.microsoft.comhttp://go.microsoft.com/fwlink/?LinkId=74170truetruetrue3180http://go.microsoft.com/fwlink/p/?LinkId=252969truetruetrue3176truetruetrue3176http://go.microsoft.com/fwlink/p/?LinkId=252103truetruetrue3179http://go.microsoft.com/fwlink/p/?LinkId=248417truetruetrue3177http://go.microsoft.com/fwlink/p/?LinkId=252971truetruetrue3178truetruetrue3175truetruetrue3176http://go.microsoft.com/fwlink/p/?LinkId=248417Hardtrue10h2011-02-27T05:05:05.000124.123{E05CF1E7-8A04-4EE7-B80E-02F27EF1D783}-123-555432.123hello from string world url: http://home-df.live.com0.12:12:12.000321543onetwothreefirstsecondthirdCollection StringColl List String oneColl List String twoColl List String threeColl dict string firstColl dict string secondColl dict string thirdEasyfalse6b2011-07-04T06:06:06.000124.123{E05CF1E7-8A04-4EE7-B80E-02F27EF1D783}-123-555432.123hello from string world url: http://home-df.live.com0.06:06:06.000123345fourfivesixforthfifthsixthCollection StringColl List String fourColl List String fiveColl List String sixColl dict string forthColl dict string fifthColl dict string sixthhttps://g.live-int.com/1recfg/md?!/~Live.ConfigServer.ModernMetadata/~/~/~/~/~op-GetMetaConfig/~ts-%ls/~version-1705988320674/~branch-GOpcaIrXA46ztHvgcXG5Q/config.xml17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates16.0.0.017.5.9883.20674ms-windows-store:updates16.0.0.016.9999.0.0ms-windows-store:updates16.9999.0.016.9999.0.0ms-windows-store:updatestruesupport.microsoft.comhttp://go.microsoft.com/fwlink/?LinkId=74170falsetruetrue3180http://go.microsoft.com/fwlink/p/?LinkId=252969falsetruetrue3176falsetruetrue3176http://go.microsoft.com/fwlink/p/?LinkId=252103falsetruetrue3179http://go.microsoft.com/fwlink/p/?LinkId=248417falsetruetrue3177http://go.microsoft.com/fwlink/p/?LinkId=252971falsetruetrue3178falsetruetrue3175falsetruetrue3176http://go.microsoft.com/fwlink/p/?LinkId=248417Hardtrue10h2011-02-27T05:05:05.000124.123{E05CF1E7-8A04-4EE7-B80E-02F27EF1D783}-123-555432.123hello from string world url: http://home.live-int.com0.12:12:12.000321543onetwothreefirstsecondthirdCollection StringColl List String oneColl List String twoColl List String threeColl dict string firstColl dict string secondColl dict string thirdEasyfalse6b2011-07-04T06:06:06.000124.123{E05CF1E7-8A04-4EE7-B80E-02F27EF1D783}-123-555432.123hello from string world url: http://home.live-int.com0.06:06:06.000123345fourfivesixforthfifthsixthCollection StringColl List String fourColl List String fiveColl List String sixColl dict string forthColl dict string fifthColl dict string sixthhttps://g.live.com/1recfg/md?!/~Live.ConfigServer.ModernMetadata/~/~/~/~/~op-GetMetaConfig/~ts-%ls/~version-1705988320674/~branch-GOpcaIrXA46ztHvgcXG5Q/config.xml17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates17.5.9883.2067417.5.9883.20674ms-windows-store:updates16.0.0.017.5.9883.20674ms-windows-store:updates16.0.0.016.9999.0.0ms-windows-store:updates16.9999.0.016.9999.0.0ms-windows-store:updatestruesupport.microsoft.comhttp://go.microsoft.com/fwlink/?LinkId=74170falsefalsetrue2109http://go.microsoft.com/fwlink/p/?LinkId=252969falsefalsetrue2109falsefalsetrue2109http://go.microsoft.com/fwlink/p/?LinkId=252103falsefalsetrue2109http://go.microsoft.com/fwlink/p/?LinkId=248417falsefalsetrue2109http://go.microsoft.com/fwlink/p/?LinkId=252971falsefalsetrue2109falsefalsetrue3182falsefalsetrue2109http://go.microsoft.com/fwlink/p/?LinkId=248417Hardtrue10h2011-02-27T05:05:05.000124.123{E05CF1E7-8A04-4EE7-B80E-02F27EF1D783}-123-555432.123hello from string world url: http://home.live.com0.12:12:12.000321543onetwothreefirstsecondthirdCollection StringColl List String oneColl List String twoColl List String threeColl dict string firstColl dict string secondColl dict string thirdEasyfalse6b2011-07-04T06:06:06.000124.123{E05CF1E7-8A04-4EE7-B80E-02F27EF1D783}-123-555432.123hello from string world url: http://home.live.com0.06:06:06.000123345fourfivesixforthfifthsixthCollection StringColl List String fourColl List String fiveColl List String sixColl dict string forthColl dict string fifthColl dict string sixthHardtrue10h2011-02-27T05:05:05.000124.123{E05CF1E7-8A04-4EE7-B80E-02F27EF1D783}-123-555432.123hello from string world url: http://home-df.live.co.jp0.12:12:12.000321543onetwothreefirstsecondthirdCollection StringColl List String oneColl List String twoColl List String threeColl dict string firstColl dict string secondColl dict string thirdHardtrue10h2011-02-27T05:05:05.000124.123{E05CF1E7-8A04-4EE7-B80E-02F27EF1D783}-123-555432.123hello from string world url: http://home.live-int.co.jp0.12:12:12.000321543onetwothreefirstsecondthirdCollection StringColl List String oneColl List String twoColl List String threeColl dict string firstColl dict string secondColl dict string thirdHardtrue10h2011-02-27T05:05:05.000124.123{E05CF1E7-8A04-4EE7-B80E-02F27EF1D783}-123-555432.123hello from string world url: http://home.live.co.jp0.12:12:12.000321543onetwothreefirstsecondthirdCollection StringColl List String oneColl List String twoColl List String threeColl dict string firstColl dict string secondColl dict string third \ No newline at end of file diff --git a/packages/microsoft.windowscommunicationsapps/fontselector/fontselector.js b/packages/microsoft.windowscommunicationsapps/fontselector/fontselector.js index 7e322e05..3c129047 100644 --- a/packages/microsoft.windowscommunicationsapps/fontselector/fontselector.js +++ b/packages/microsoft.windowscommunicationsapps/fontselector/fontselector.js @@ -1,286 +1,806 @@ -Jx.delayDefine(window, "FontSelector", function() { + +// +// Copyright (C) Microsoft Corporation. All rights reserved. +// + +/*global window,Jx,Debug,document,Windows,MenuArrowKeyHandler*/ +/*jshint browser:true*/ +Jx.delayDefine(window, "FontSelector", function () { "use strict"; - var n, t, r, u, i; window.FontSelector = {}; - n = window.FontSelector; - n.BaseFontControl = function(n) { + + var fontSelector = window.FontSelector; + + fontSelector.BaseFontControl = function /* Constructor */(config) { + // InitComponent provided by Jx.Component is called this.initComponent(); + + // See _getElement for the use of this._host this._host = null; - this._parseConfig(n); - this._values = [] - }; - Jx.augment(n.BaseFontControl, Jx.Component); - Jx.augment(n.BaseFontControl, Jx.Events); - t = n.BaseFontControl.prototype; - t.addSelection = function(n) { - this._addElement(n) - }; - t.focus = function() { - this._getElement().focus() - }; - t._addElement = function() {}; - t._createElement = function() {}; - t._parseConfig = function(n) { - var t, r, i; - if (n) - for (t in n) r = "_" + t, i = "_config_" + t, i in this && Jx.isFunction(this[i]) ? this[i](n[t]) : this.hasOwnProperty(r) && (this[r] = n[t]) - }; - t._select = function(n) { - var t = this._getElement(); - t.value = n - }; - t._validValue = function(n) { - return this._values.indexOf(n) !== -1 - }; - t._getElement = function() { - return this._host ? this._host.querySelector(this._selector) : document.getElementById(this._id) - }; - t._onChange = function(n) { - var t = this._getElement(); - this._value = t.value; - n.value = this._value; - this.raiseEvent("change", n) - }; - t.activateUI = function() { + + // All variables given before the _parseConfig happens may be changed by the config. + // All variables after the _parseConfig may not be modified by the config. + // If a control specific variable needs to be added, put it before/after the call + // to this constructor in the constructor of the control. + + this._parseConfig(config); + + // Internal value array to check for duplicates when adding more + // This is given after the parseConfig in order to prevent + // any config option overriding it + this._values = []; + + // Define all of the events that will be raised to jx by this + Debug.Events.define(this, "change"); + }; + + Jx.augment(fontSelector.BaseFontControl, Jx.Component); + Jx.augment(fontSelector.BaseFontControl, Jx.Events); + + var baseControlProto = fontSelector.BaseFontControl.prototype; + + baseControlProto.addSelection = function (selection) { + /// Add an object to the available selections. See each implementation of _addElement for what is expected + this._addElement(selection); + }; + + baseControlProto.focus = function () { + this._getElement().focus(); + }; + + baseControlProto._addElement = function () { + Debug.assert(false, "Add Element needs to be overridden"); + }; + + baseControlProto._createElement = function () { + Debug.assert(false, "Create Element needs to be overridden"); + }; + + baseControlProto._parseConfig = function (config) { + /// + /// Parses the config parameter passed in. + /// Each element will be checked for a special _config_[key] function + /// before setting the private variable. Note that variables + /// must be declared before they are parsed, to prevent + /// random information being tacked on to these controls. + /// The _config_[key] allows special handling for the value + /// rather than just taking it directly from the config passed in. + /// + if (config) { + for (var key in config) { + var selfKey = "_" + key, + methodKey = "_config_" + key; + if ((methodKey in this) && Jx.isFunction(this[methodKey])) { + // If there is a _config_ method associated with the key, then call it with the value as the parameter + this[methodKey](config[key]); + } else if (this.hasOwnProperty(selfKey)) { + // If the value already exists then we can set the value directly + this[selfKey] = config[key]; + } + } + } + }; + + baseControlProto._select = function (selectItem) { + var element = this._getElement(); + Debug.assert(element.nodeName === "SELECT"); + element.value = selectItem; + }; + + baseControlProto._validValue = function (value) { + /// Checks if the value exists in the internal array + /// True if it's a valid value for selection + return this._values.indexOf(value) !== -1; + }; + + baseControlProto._getElement = function () { + /// Returns the DOM element for this control using the id and class + Debug.assert(Jx.isNonEmptyString(this._id)); + var ele; + + // The host is needed for the settings flyout. The flyout itself is a Jx wrapped flyout, and cannot have + // anything added to onbeforeshow or onafterhide. That means that the UI has to be initiated before it is + // added to the DOM. The host allows a query to be made for the control without it being in the DOM. + if (this._host) { + // If a host was given, then use the querySelector + // to get the element within that host. It's important to note + // that it is assumed only one of this control is present inside the host + ele = this._host.querySelector(this._selector); + } else { + // If no host was given, get the element by the id in case + // multiple instances of the control are present + ele = document.getElementById(this._id); + } + Debug.assert(Jx.isObject(ele), "Element with id " + this._id + " could not be found"); + return ele; + }; + + baseControlProto._onChange = function (evt) { + /// Should be triggered when the + var element = this._getElement(); + // Update the internal tracking for value + this._value = element.value; + evt.value = this._value; + // Notify the listeners that the element has changed + this.raiseEvent("change", evt); + }; + + baseControlProto.activateUI = function () { Jx.Component.prototype.activateUI.call(this); - var n = this._getElement(); - n.addEventListener("change", this._onChange, false); - this._value && this._select(this._value) + + var element = this._getElement(); + + // Only " + o + "<\/select>" - }; - r._validValue = function(n) { - return this._tmpOptions.indexOf(n) !== -1 || this._values.indexOf(n) !== -1 - }; - r._getFontNameList = function() { - var i, s; + + nameProto.getUI = function (ui) { + var fonts = this._getFontNameList(), + duplicateList = {}, + font, + options = "", + innerText; + + // Reset the values to be rebuilt with unique values, since we are filtering anyways. + // Make sure to do this after this._getFontNameList(), since getFontNameList uses + // this._values + this._values = []; + + for (var i = 0; i < fonts.length; i++) { + font = fonts[i]; + + if (!duplicateList[font]) { + // replace double quotes with single quotes for the value and style, to keep the html valid + // use escapeHtml on the innerText + + // InnerText should only be used for now. toStaticHTML will escape brackets inside the attributes. + // Brackets inside attributes should be allowed, but since it's not we have to work arround it. + innerText = Jx.escapeHtml(font); + + options += ''; + duplicateList[font] = true; + + // add to our value list + this._values.push(font); + } + } + + var size = ""; + if (Boolean(this._size)) { + size = " size='" + this._size + "' "; + } + + ui.html = ''; + }; + + nameProto._validValue = function (value) { + /// Overrides the default valid value in order to check tmpValues + return this._tmpOptions.indexOf(value) !== -1 || this._values.indexOf(value) !== -1; + }; + + nameProto._getFontNameList = function () { + /// Generates a raw list of font families. NOTE: May include duplicates. + /// An array of ordered font families, potentially containing repeats. + Jx.mark("getFontFamilies, StartTA, FontSelector"); - var o = Windows.System.UserProfile.GlobalizationPreferences.languages, - u = false, - f, e, t, n = []; - for (i = 0, s = o.length; i < s; i++) f = o[i].replace(/((ploc)|(locr))-/i, ""), u || (e = new Windows.Globalization.Language(f).script.toLowerCase(), (e === "latn" || e === "latin") && (u = true)), t = new Windows.Globalization.Fonts.LanguageFontGroup(f), t.traditionalDocumentFont && n.push(t.traditionalDocumentFont.fontFamily), t.modernDocumentFont && n.push(t.modernDocumentFont.fontFamily), t.fixedWidthTextFont && n.push(t.fixedWidthTextFont.fontFamily), t.documentAlternate1Font && n.push(t.documentAlternate1Font.fontFamily), t.documentAlternate2Font && n.push(t.documentAlternate2Font.fontFamily); - return u && (n = n.concat(["Arial", "Times New Roman", "Tahoma", "Verdana", "Georgia"])), Jx.mark("getFontFamilies, StopTA, FontSelector"), n = n.concat(this._values), n.sort(), this._values = n, r._getFontNameList = function() { - return n - }, this._values - }; - r._config_fonts = function(n) { - this._getFontNameList = function() { - for (var t = 0; t < n.length; t++) this._addElement(n[t], false); - return this._values + var languages = /*@static_cast(Array)*/Windows.System.UserProfile.GlobalizationPreferences.languages, + latinScriptFound = false, + language, + script, + fonts, + fontFamilies = []; + // Run through all the current user languages + + var _regexPloc = /((ploc)|(locr))-/i; + + for (var m = 0, len = languages.length; m < len; m++) { + language = languages[m].replace(_regexPloc, ""); + // If we haven't found a latin script yet + if (!latinScriptFound) { + // Determine if this is a lating script, and if so mark that one was found + script = Windows.Globalization.Language(language).script.toLowerCase(); + if (script === "latn" || script === "latin") { + latinScriptFound = true; + } + } + + // Get the recommended fonts for this langauge + fonts = new Windows.Globalization.Fonts.LanguageFontGroup(language); + // Append the 3 authoring style ones + // Note: We are not gauranteed that all of these fonts have been defined, so we need to check each before adding. + if (fonts.traditionalDocumentFont) { + fontFamilies.push(fonts.traditionalDocumentFont.fontFamily); + } + if (fonts.modernDocumentFont) { + fontFamilies.push(fonts.modernDocumentFont.fontFamily); + } + if (fonts.fixedWidthTextFont) { + fontFamilies.push(fonts.fixedWidthTextFont.fontFamily); + } + if (fonts.documentAlternate1Font) { + fontFamilies.push(fonts.documentAlternate1Font.fontFamily); + } + if (fonts.documentAlternate2Font) { + fontFamilies.push(fonts.documentAlternate2Font.fontFamily); + } } + + // If a latin script was found, append the web safe fonts + if (latinScriptFound) { + fontFamilies = fontFamilies.concat(["Arial", "Times New Roman", "Tahoma", "Verdana", "Georgia"]); + } + Debug.assert(fontFamilies.length > 0, "No fonts were found for the user's languages"); + Jx.mark("getFontFamilies, StopTA, FontSelector"); + + // Append our pre-existing values to the list. It's known that the list may contain duplicates, + // which are filtered in the getUI method + fontFamilies = fontFamilies.concat(this._values); + fontFamilies.sort(); + this._values = fontFamilies; + + // replace the prototype function so we don't generate the list again. + // It's not likely that the list will change while mail is running + nameProto._getFontNameList = function () { + return fontFamilies; + }; + + return this._values; + }; + + nameProto._config_fonts = function (fonts) { + /// + /// This method will alow the fonts to be provided instead of loaded from the system. + /// It uses the addElement method to add the fonts to the internal list of values + /// and also to check validity. It doesn't check if the font exists on the system, + /// but will get rid of duplicates. + /// + Debug.assert(Jx.isArray(fonts)); + this._getFontNameList = function () { + for (var i = 0; i < fonts.length; i++) { + // Use our own addElement, and tell it not to check for the UI + this._addElement(fonts[i], false); + } + // The values will be loaded with the fonts, so return that + return this._values; + }; }; - Object.defineProperty(r, "value", { - get: function() { - return this._value + + Object.defineProperty(nameProto, "value", { + get: function () { + return this._value; }, - set: function(n) { - if (!this._validValue(n)) - if (!this._newOnFail || Jx.isNullOrUndefined(n)) n = null; - else { - var t = document.createElement("option"), - i = this._getElement(); - t.value = n; - t.innerText = n; - t.setAttribute("data-temporary", "true"); - t.style.fontFamily = n; - i.appendChild(t); - this._tmpOptions.push(n) - } this._value = n; - this.hasUI() && this._select(n) + set: function (value) { + // Check that the value exists in our internal list of values + if (!this._validValue(value)) { + if (!this._newOnFail || Jx.isNullOrUndefined(value)) { + // clear out the value if we don't know what it is + value = null; + } else { + // Create a new option and stick it in our temporary tracked list + var option = document.createElement("option"), + element = this._getElement(); + + Debug.assert(element.nodeName === "SELECT"); + + option.value = value; + option.innerText = value; + option.setAttribute("data-temporary", "true"); + option.style.fontFamily = value; + element.appendChild(option); + + this._tmpOptions.push(value); + } + } + + this._value = value; + + // If the UI is available, select the value + if (this.hasUI()) { + this._select(value); + } }, enumerable: true }); - n.SizeControl = function(t) { + + fontSelector.SizeControl = function /* Constructor */(config) { + // Size for the select tag this._size = null; - n.BaseFontControl.call(this, t); + fontSelector.BaseFontControl.call(this, config); this._selector = ".fontSizeControl"; - this._onChange = this._onChange.bind(this) - }; - Jx.inherit(n.SizeControl, n.BaseFontControl); - u = n.SizeControl.prototype; - u.getUI = function(n) { - for (var u = this._getFontSizes(), f = "", t, r, i = u.length; i--;) t = u[i], f += '