diff --git a/apps/spreadsheeteditor/mobile/app-dev.js b/apps/spreadsheeteditor/mobile/app-dev.js new file mode 100644 index 000000000..1aca0f40c --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app-dev.js @@ -0,0 +1,237 @@ +/* + * + * (c) Copyright Ascensio System Limited 2010-2016 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, + * EU, LV-1021. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * + */ + +/** + * app.js + * + * Created by Maxim Kadushkin on 11/14/16 + * Copyright (c) 2016 Ascensio System SIA. All rights reserved. + * + */ + +'use strict'; +var reqerr; +require.config({ + baseUrl: '../../', + paths: { + jquery : '../vendor/jquery/jquery', + underscore : '../vendor/underscore/underscore', + backbone : '../vendor/backbone/backbone', + framework7 : '../vendor/framework7/js/framework7', + text : '../vendor/requirejs-text/text', + xregexp : '../vendor/xregexp/xregexp-all-min', + sockjs : '../vendor/sockjs/sockjs.min', + jszip : '../vendor/jszip/jszip.min', + jsziputils : '../vendor/jszip-utils/jszip-utils.min', + jsrsasign : '../vendor/jsrsasign/jsrsasign-latest-all-min', + api : 'api/documents/api', + core : 'common/main/lib/core/application', + extendes : 'common/mobile/utils/extendes', + notification : 'common/main/lib/core/NotificationCenter', + analytics : 'common/Analytics', + gateway : 'common/Gateway', + locale : 'common/locale', + irregularstack : 'common/IrregularStack', + sharedsettings : 'common/mobile/utils/SharedSettings' + }, + + shim: { + framework7: { + exports: 'Framework7' + }, + underscore: { + exports: '_' + }, + backbone: { + deps: [ + 'underscore', + 'jquery' + ], + exports: 'Backbone' + }, + core: { + deps: [ + 'backbone', + 'notification', + 'irregularstack', + 'sharedsettings' + ] + } + } +}); + +require([ + 'backbone', + 'framework7', + 'core', + 'underscore', + 'extendes', + 'api', + 'analytics', + 'gateway', + 'locale', + 'jszip', + 'jsziputils', + 'jsrsasign', + 'sockjs' +], function (Backbone, Framework7) { + Backbone.history.start(); + + /** + * Application instance with DE namespace defined + */ + var app = new Backbone.Application({ + nameSpace: 'SSE', + autoCreate: false, + controllers : [ + 'Editor', + 'Toolbar', + 'Main', + 'DocumentHolder' + // ,'Settings' + // ,'EditContainer' + // ,'EditText' + // ,'EditParagraph' + // ,'EditTable' + // ,'EditImage' + // ,'EditShape' + // ,'EditChart' + // ,'EditHyperlink' + // ,'AddContainer' + // ,'AddTable' + // ,'AddShape' + // ,'AddImage' + // ,'AddOther' + ] + }); + + Common.Locale.apply(); + + var device = Framework7.prototype.device; + var loadPlatformCss = function (filename, opt){ + var fileref = document.createElement('link'); + fileref.setAttribute('rel', 'stylesheet'); + fileref.setAttribute('type', 'text/css'); + fileref.setAttribute('href', filename); + + if (typeof fileref != 'undefined') { + document.getElementsByTagName("head")[0].appendChild(fileref); + } + }; + + //Store Framework7 initialized instance for easy access + window.uiApp = new Framework7({ + // Default title for modals + modalTitle: 'ONLYOFFICE', + + // If it is webapp, we can enable hash navigation: +// pushState: false, + + // If Android + material: device.android, + + // Hide and show indicator during ajax requests + onAjaxStart: function (xhr) { + uiApp.showIndicator(); + }, + onAjaxComplete: function (xhr) { + uiApp.hideIndicator(); + } + }); + + //Export DOM7 to local variable to make it easy accessable + window.$$ = Dom7; + + //Load platform styles + loadPlatformCss('resources/css/app-' + (device.android ? 'material' : 'ios') + '.css'); + + require([ + 'common/main/lib/util/LocalStorage', + 'common/main/lib/util/utils', + 'spreadsheeteditor/mobile/app/controller/Editor', + 'spreadsheeteditor/mobile/app/controller/Toolbar', + 'spreadsheeteditor/mobile/app/controller/Main', + 'spreadsheeteditor/mobile/app/controller/DocumentHolder' + // ,'documenteditor/mobile/app/controller/Settings' + // ,'documenteditor/mobile/app/controller/edit/EditContainer' + // ,'documenteditor/mobile/app/controller/edit/EditText' + // ,'documenteditor/mobile/app/controller/edit/EditParagraph' + // ,'documenteditor/mobile/app/controller/edit/EditTable' + // ,'documenteditor/mobile/app/controller/edit/EditImage' + // ,'documenteditor/mobile/app/controller/edit/EditShape' + // ,'documenteditor/mobile/app/controller/edit/EditChart' + // ,'documenteditor/mobile/app/controller/edit/EditHyperlink' + // ,'documenteditor/mobile/app/controller/add/AddContainer' + // ,'documenteditor/mobile/app/controller/add/AddTable' + // ,'documenteditor/mobile/app/controller/add/AddShape' + // ,'documenteditor/mobile/app/controller/add/AddImage' + // ,'documenteditor/mobile/app/controller/add/AddOther' + ], function() { + app.start(); + }); +}, function(err) { + if (err.requireType == 'timeout' && !reqerr) { + var getUrlParams = function() { + var e, + a = /\+/g, // Regex for replacing addition symbol with a space + r = /([^&=]+)=?([^&]*)/g, + d = function (s) { return decodeURIComponent(s.replace(a, " ")); }, + q = window.location.search.substring(1), + urlParams = {}; + + while (e = r.exec(q)) + urlParams[d(e[1])] = d(e[2]); + + return urlParams; + }; + + var encodeUrlParam = function(str) { + return str.replace(/&/g, '&') + .replace(/"/g, '"') + .replace(/'/g, ''') + .replace(//g, '>'); + }; + + var lang = (getUrlParams()["lang"] || 'en').split("-")[0]; + + if ( lang == 'de') reqerr = 'Die Verbindung ist zu langsam, einige Komponenten konnten nicht geladen werden. Aktualisieren Sie bitte die Seite.'; + else if ( lang == 'es') reqerr = 'La conexión es muy lenta, algunos de los componentes no han podido cargar. Por favor recargue la página.'; + else if ( lang == 'fr') reqerr = 'La connexion est trop lente, certains des composants n\'ons pas pu être chargé. Veuillez recharger la page.'; + else if ( lang == 'ru') reqerr = 'Слишком медленное соединение, не удается загрузить некоторые компоненты. Пожалуйста, обновите страницу.'; + else reqerr = 'The connection is too slow, some of the components could not be loaded. Please reload the page.'; + + window.alert(reqerr); + window.location.reload(); + } +}); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/controller/DocumentHolder.js b/apps/spreadsheeteditor/mobile/app/controller/DocumentHolder.js new file mode 100644 index 000000000..ca6b5847f --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/controller/DocumentHolder.js @@ -0,0 +1,255 @@ +/* + * + * (c) Copyright Ascensio System Limited 2010-2016 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, + * EU, LV-1021. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * + */ + +/** + * DocumentHolder.js + * Document Editor + * + * Created by Maxim Kadushkin on 11/15/16 + * Copyright (c) 2016 Ascensio System SIA. All rights reserved. + * + */ + + +define([ + 'core', + 'spreadsheeteditor/mobile/app/view/DocumentHolder' +], function (core) { + 'use strict'; + + SSE.Controllers.DocumentHolder = Backbone.Controller.extend((function() { + // private + var _stack, + _isEdit = false; + + return { + models: [], + collections: [], + views: [ + 'DocumentHolder' + ], + + initialize: function() { + this.addListeners({ + 'DocumentHolder': { + 'contextmenu:click' : this.onContextMenuClick + } + }); + }, + + setApi: function(api) { + this.api = api; + + // this.api.asc_registerCallback('asc_onShowPopMenu', _.bind(this.onApiShowPopMenu, this)); + // this.api.asc_registerCallback('asc_onHidePopMenu', _.bind(this.onApiHidePopMenu, this)); + }, + + setMode: function (mode) { + _isEdit = ('edit' === mode); + }, + + // When our application is ready, lets get started + onLaunch: function() { + var me = this; + + me.view = me.createView('DocumentHolder').render(); + + $$(window).on('resize', _.bind(me.onEditorResize, me)); + }, + + // Handlers + + onContextMenuClick: function (view, eventName) { + var me = this; + + if ('cut' == eventName) { + me.api.asc_Cut(); + } else if ('copy' == eventName) { + me.api.asc_Copy(); + } else if ('paste' == eventName) { + me.api.asc_Paste(); + } else if ('delete' == eventName) { + console.debug('IMPLEMENT: Delete fragment'); + } else if ('edit' == eventName) { + me.view.hideMenu(); + + SSE.getController('EditContainer').showModal(); + } else if ('addlink' == eventName) { + me.view.hideMenu(); + + SSE.getController('AddContainer').showModal(); + SSE.getController('AddOther').getView('AddOther').showLink(); + } else if ('openlink' == eventName) { + _.some(_stack, function (item) { + if (item.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) { + me._openLink(item.get_ObjectValue().get_Value()); + return true; + } + }); + } + + me.view.hideMenu(); + }, + + // API Handlers + + onEditorResize: function(cmp) { + // Hide context menu + }, + + onApiShowPopMenu: function(posX, posY) { + var me = this, + items; + + _stack = me.api.getSelectedElements(); + items = me._initMenu(_stack); + + me.view.showMenu(items, posX, posY); + }, + + onApiHidePopMenu: function() { + this.view.hideMenu(); + }, + + // Internal + + _openLink: function(url) { + if (this.api.asc_getUrlType(url) > 0) { + var newDocumentPage = window.open(url, '_blank'); + + if (newDocumentPage) { + newDocumentPage.focus(); + } + } + }, + + _initMenu: function (stack) { + var me = this, + menuItems = [], + canCopy = me.api.can_CopyCut(); + + if (canCopy) { + menuItems.push({ + caption: 'Copy', + event: 'copy' + }); + } + + var isText = false, + isTable = false, + isImage = false, + isChart = false, + isShape = false, + isLink = false; + + _.each(stack, function (item) { + var objectType = item.get_ObjectType(), + objectValue = item.get_ObjectValue(); + + if (objectType == Asc.c_oAscTypeSelectElement.Text) { + isText = true; + } else if (objectType == Asc.c_oAscTypeSelectElement.Image) { + if (objectValue && objectValue.get_ChartProperties()) { + isChart = true; + } else if (objectType && objectValue.get_ShapeProperties()) { + isShape = true; + } else { + isImage = true; + } + } else if (objectType == Asc.c_oAscTypeSelectElement.Table) { + isTable = true; + } else if (objectType == Asc.c_oAscTypeSelectElement.Hyperlink) { + isLink = true; + } + }); + + if (stack.length > 0) { + var topObject = stack[stack.length - 1], + topObjectType = topObject.get_ObjectType(), + topObjectValue = topObject.get_ObjectValue(), + objectLocked = _.isFunction(topObjectValue.get_Locked) ? topObjectValue.get_Locked() : false; + + var swapItems = function(items, indexBefore, indexAfter) { + items[indexAfter] = items.splice(indexBefore, 1, items[indexAfter])[0]; + }; + + if (!objectLocked && _isEdit) { + menuItems.push({ + caption: 'Cut', + event: 'cut' + }); + menuItems.push({ + caption: 'Paste', + event: 'paste' + }); + + // Swap 'Copy' and 'Cut' + swapItems(menuItems, 0, 1); + + menuItems.push({ + caption: 'Delete', + event: 'delete' + }); + + menuItems.push({ + caption: 'Edit', + event: 'edit' + }); + } + + var text = me.api.can_AddHyperlink(); + + if (!_.isEmpty(text)) { + menuItems.push({ + caption: 'Add Link', + event: 'addlink' + }); + } + + if (isLink) { + menuItems.push({ + caption: 'Open Link', + event: 'openlink' + }); + } + } + + if (Common.SharedSettings.get('phone') && menuItems.length > 3) { + menuItems = menuItems.slice(0, 3); + } + + return menuItems; + } + } + })()); +}); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/controller/Editor.js b/apps/spreadsheeteditor/mobile/app/controller/Editor.js new file mode 100644 index 000000000..7ca1c5ab7 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/controller/Editor.js @@ -0,0 +1,112 @@ +/* + * + * (c) Copyright Ascensio System Limited 2010-2016 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, + * EU, LV-1021. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * + */ + +/** + * Editor.js + * Document Editor + * + * Created by Maxim Kadushkin on 11/15/16 + * Copyright (c) 2016 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'core', + 'spreadsheeteditor/mobile/app/view/Editor' +], function (core) { + 'use strict'; + + SSE.Controllers.Editor = Backbone.Controller.extend((function() { + // private + + function isPhone() { + var ua = navigator.userAgent, + isMobile = /Mobile(\/|\s)/.test(ua); + + return /(iPhone|iPod)/.test(ua) || + (!/(Silk)/.test(ua) && (/(Android)/.test(ua) && (/(Android 2)/.test(ua) || isMobile))) || + (/(BlackBerry|BB)/.test(ua) && isMobile) || + /(Windows Phone)/.test(ua); + } + + function isTablet() { + var ua = navigator.userAgent; + + return !isPhone(ua) && (/iPad/.test(ua) || /Android/.test(ua) || /(RIM Tablet OS)/.test(ua) || + (/MSIE 10/.test(ua) && /; Touch/.test(ua))); + } + + return { + // Specifying a EditorController model + models: [], + + // Specifying a collection of out EditorView + collections: [], + + // Specifying application views + views: [ + 'Editor' // is main application layout + ], + + // When controller is created let's setup view event listeners + initialize: function() { + // This most important part when we will tell our controller what events should be handled + }, + + setApi: function(api) { + this.api = api; + }, + + // When our application is ready, lets get started + onLaunch: function() { + // Device detection + var phone = isPhone(); + console.debug('Layout profile:', phone ? 'Phone' : 'Tablet'); + + Common.SharedSettings.set('android', Framework7.prototype.device.android); + Common.SharedSettings.set('phone', phone); + + $('html').addClass(phone ? 'phone' : 'tablet'); + + // Create and render main view + this.editorView = this.createView('Editor').render(); + + $$(window).on('resize', _.bind(this.onWindowResize, this)); + }, + + onWindowResize: function(e) { + this.api && this.api.asc_Resize(); + } + } + })()); +}); diff --git a/apps/spreadsheeteditor/mobile/app/controller/Main.js b/apps/spreadsheeteditor/mobile/app/controller/Main.js index 82293b9d9..dd7c1eeb8 100644 --- a/apps/spreadsheeteditor/mobile/app/controller/Main.js +++ b/apps/spreadsheeteditor/mobile/app/controller/Main.js @@ -29,350 +29,1528 @@ * Creative Commons Attribution-ShareAlike 4.0 International. See the License * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode * -*/ -Ext.define('SSE.controller.Main', { - extend: 'Ext.app.Controller', - editMode: false, + */ - requires: [ - 'Ext.Anim', - 'Ext.MessageBox', - 'SSE.controller.ApiEvents', - 'SSE.view.OpenCsvPanel' - ], +/** + * Main.js + * Document Editor + * + * Created by Maxim Kadushkin on 11/15/16 + * Copyright (c) 2016 Ascensio System SIA. All rights reserved. + * + */ - config: { - refs: { - mainView: 'semainview' - } - }, +define([ + 'core', + 'irregularstack', + 'common/main/lib/util/LocalStorage' + ,'common/main/lib/util/LanguageInfo' +], function () { + 'use strict'; - launch: function() { - if (!this._isSupport()){ - Common.Gateway.reportError(undefined, this.unsupportedBrowserErrorText); - return; - } + SSE.Controllers.Main = Backbone.Controller.extend(_.extend((function() { + var InitApplication = -254; + var ApplyEditRights = -255; + var LoadingDocument = -256; - // Initialize descendants + Common.localStorage.setId('table'); + Common.localStorage.setKeysFilter('sse-,asc.table'); + Common.localStorage.sync(); - this.initControl(); + var fillUserInfo = function(info, lang, defname) { + var user = info || {}; + !user.id && (user.id = ('uid-' + Date.now())); + _.isEmpty(user.firstname) && _.isEmpty(user.lastname) && (user.firstname = defname); + if (_.isEmpty(user.firstname)) + user.fullname = user.lastname; + else if (_.isEmpty(user.lastname)) + user.fullname = user.firstname; + else + user.fullname = /^ru/.test(lang) ? user.lastname + ' ' + user.firstname : user.firstname + ' ' + user.lastname; - // Initialize analytics - -// Common.component.Analytics.initialize('UA-12442749-13', 'Spreadsheet Mobile'); - - var app = this.getApplication(); - - // Initialize api - this.api = new Asc.spreadsheet_api({ - 'id-view' : 'id-sdkeditor', - 'mobile' : true - }); - - this.api.asc_registerCallback('asc_onAdvancedOptions', Ext.bind(this.onAdvancedOptions, this)); - this.api.asc_registerCallback('asc_onOpenDocumentProgress', Ext.bind(this.onOpenDocumentProgress, this)); - this.api.asc_registerCallback('asc_onEndAction', Ext.bind(this.onLongActionEnd, this)); - this.api.asc_registerCallback('asc_onError', Ext.bind(this.onError, this)); - this.api.asc_registerCallback('asc_onSaveUrl', Ext.bind(this.onSaveUrl, this)); - this.api.asc_registerCallback('asc_onGetEditorPermissions', Ext.bind(this.onEditorPermissions, this)); - this.api.asc_registerCallback('asc_onDownloadUrl', Ext.bind(this.onDownloadUrl, this)); - - // Initialize descendants - Ext.each(app.getControllers(), function(controllerName){ - var controller = app.getController(controllerName); - controller && Ext.isFunction(controller.setApi) && controller.setApi(this.api); - }, this); - - this.initApi(); - - // Initialize api gateway - this.editorConfig = {}; - Common.Gateway.on('init', Ext.bind(this.loadConfig, this)); - Common.Gateway.on('opendocument', Ext.bind(this.loadDocument, this)); - Common.Gateway.on('showmessage', Ext.bind(this.onExternalMessage, this)); - Common.Gateway.on('processsaveresult', Ext.bind(this.onProcessSaveResult, this)); - Common.Gateway.on('downloadas', Ext.bind(this.onDownloadAs, this)); - Common.Gateway.ready(); - }, - - initControl: function() { - }, - - initApi: function() { - }, - - loadConfig: function(data) { - this.editorConfig = Ext.merge(this.editorConfig, data.config); - this.editorConfig.user = this._fillUserInfo(this.editorConfig.user, this.editorConfig.lang, this.textAnonymous); - }, - - loadDocument: function(data) { - if (data.doc) { - this.permissions = data.doc.permissions; - - var _user = new Asc.asc_CUserInfo(); - _user.put_Id(this.editorConfig.user.id); - _user.put_FirstName(this.editorConfig.user.firstname); - _user.put_LastName(this.editorConfig.user.lastname); - _user.put_FullName(this.editorConfig.user.fullname); - - docInfo = new Asc.asc_CDocInfo(); - docInfo.put_Id(data.doc.key); - docInfo.put_Url(data.doc.url); - docInfo.put_Title(data.doc.title); - docInfo.put_Format(data.doc.fileType); - docInfo.put_VKey(data.doc.vkey); - docInfo.put_Options(data.doc.options); - docInfo.put_UserInfo(_user); - - this.api.asc_setDocInfo(docInfo); - this.api.asc_getEditorPermissions(this.editorConfig.licenseUrl, this.editorConfig.customerId); - - Common.component.Analytics.trackEvent('Load', 'Start'); - } - }, - - onEditorPermissions: function(params) { - var modeEdit = /*this.permissions.edit === true && this.editorConfig.mode !== 'view'*/false; - this.api.asc_setViewMode(!modeEdit); - this.api.asc_LoadDocument(); - - var profileName = this.getApplication().getCurrentProfile().getName(); -// this.getApplication().getController(profileName + '.Main').setDocumentName(data.doc.title || 'Unnamed Spreadsheet'); - this.getApplication().getController(profileName + '.Main').setMode(modeEdit); - - }, - - onError: function(id, level) { - this._hideLoadSplash(); - - var config = { - closable: false + return user; }; - switch (id) - { - case Asc.c_oAscError.ID.Unknown: - config.message = this.unknownErrorText; - break; + return { + models: [], + collections: [], + views: [], - case Asc.c_oAscError.ID.ConvertationTimeout: - config.message = this.convertationTimeoutText; - break; + initialize: function() { + // + }, - case Asc.c_oAscError.ID.ConvertationError: - config.message = this.convertationErrorText; - break; + onLaunch: function() { + var me = this; - case Asc.c_oAscError.ID.DownloadError: - config.message = this.downloadErrorText; - break; - - case Asc.c_oAscError.ID.UplImageSize: - config.message = this.uploadImageSizeMessage; - break; - - case Asc.c_oAscError.ID.UplImageExt: - config.message = this.uploadImageExtMessage; - break; - - case Asc.c_oAscError.ID.UplImageFileCount: - config.message = this.uploadImageFileCountMessage; - break; - - case Asc.c_oAscError.ID.VKeyEncrypt: - config.msg = this.errorKeyEncrypt; - break; - - case Asc.c_oAscError.ID.KeyExpire: - config.msg = this.errorKeyExpire; - break; - - case Asc.c_oAscError.ID.UserCountExceed: - config.msg = this.errorUsersExceed; - break; - - default: - config.message = this.errorDefaultMessage.replace('%1', id); - break; - } - - - - if (level == Asc.c_oAscError.Level.Critical) { - - // report only critical errors - Common.Gateway.reportError(id, config.message); - - config.title = this.criticalErrorTitle; - config.message += '
' + this.criticalErrorExtText; - config.buttons = Ext.Msg.OK; - config.fn = function(btn) { - if (btn == 'ok') { - window.location.reload(); - } - } - } - else { - config.title = this.notcriticalErrorTitle; - config.buttons = Ext.Msg.OK; - config.fn = Ext.emptyFn; - } - - Ext.Msg.show(config); - }, - - onSaveUrl: function(url) { - Common.Gateway.save(url); - }, - - onDownloadUrl: function(url) { - Common.Gateway.downloadAs(url); - }, - - onExternalMessage: function(msg) { - if (msg) { - this._hideLoadSplash(); - Ext.Msg.show({ - title: msg.title, - msg: '
' + msg.msg, - icon: Ext.Msg[msg.severity.toUpperCase()], - buttons: Ext.Msg.OK - }); - - Common.component.Analytics.trackEvent('External Error', msg.title); - } - }, - - onAdvancedOptions: function(advOptions) { - if (advOptions.asc_getOptionId() == Asc.c_oAscAdvancedOptionsID['CSV']){ - var preloader = Ext.get('loading-mask'), - me = this; - - Ext.Anim.run(preloader, 'slide', { - out : true, - direction : 'up', - duration : 250, - after : function(){ - preloader.hide(); - } - }); - - var viewAdvOptionsCsv = Ext.Viewport.add({ - xtype : 'seopencsvpanel', - left : 0, - top : 0, - width : '100%', - height : '100%' - - }); - - Ext.Anim.run(viewAdvOptionsCsv, 'slide', { - out : false, - direction : 'up', - duration : 1000 - }); - - viewAdvOptionsCsv.on('close', Ext.bind(function(panel, result){ - preloader.show(); - - Ext.Anim.run(preloader, 'slide', { - out : false, - direction : 'down', - duration : 1000 + me.stackLongActions = new Common.IrregularStack({ + strongCompare : function(obj1, obj2){return obj1.id === obj2.id && obj1.type === obj2.type;}, + weakCompare : function(obj1, obj2){return obj1.type === obj2.type;} }); - Ext.Anim.run(viewAdvOptionsCsv, 'slide', { - out : true, - direction : 'down', - duration : 1000, - after : function(){ - Ext.Viewport.remove(viewAdvOptionsCsv); - if (me.api) { - me.api.asc_setAdvancedOptions(Asc.c_oAscAdvancedOptionsID['CSV'], new Asc.asc_CCSVAdvancedOptions(result.encoding, result.delimiter)); + this._state = { + isDisconnected : false, + usersCount : 1, + fastCoauth : true, + startModifyDocument : true, + lostEditingRights : false, + licenseWarning : false + }; + + // Initialize viewport + +// if (!Common.Utils.isBrowserSupported()){ +// Common.Utils.showBrowserRestriction(); +// Common.Gateway.reportError(undefined, this.unsupportedBrowserErrorText); +// return; +// } + + // Initialize api + + // window["flat_desine"] = true; + + me.api = new Asc.spreadsheet_api({ + 'id-view' : 'editor_sdk', + 'id-input' : 'ce-cell-content' + ,'mobile' : true + }); + + if (me.api){ + var value = Common.localStorage.getItem("sse-settings-fontrender"); + if (value===null) value = window.devicePixelRatio > 1 ? '1' : '3'; + me.api.asc_setFontRenderingMode(parseInt(value)); + + Common.Utils.Metric.setCurrentMetric(1); //pt + + me.api.asc_registerCallback('asc_onError', _.bind(me.onError, me)); + me.api.asc_registerCallback('asc_onOpenDocumentProgress', _.bind(me.onOpenDocument, me)); + me.api.asc_registerCallback('asc_onAdvancedOptions', _.bind(me.onAdvancedOptions, me)); + me.api.asc_registerCallback('asc_onDocumentUpdateVersion', _.bind(me.onUpdateVersion, me)); + me.api.asc_registerCallback('asc_onPrintUrl', _.bind(me.onPrintUrl, me)); + me.api.asc_registerCallback('asc_onDocumentName', _.bind(me.onDocumentName, me)); + me.api.asc_registerCallback('asc_onEndAction', _.bind(me.onLongActionEnd, me)); +/**/ + // this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onCoAuthoringDisconnect, this)); + // this.api.asc_registerCallback('asc_onPrintUrl', _.bind(this.onPrintUrl, this)); + // this.api.asc_registerCallback('asc_onMeta', _.bind(this.onMeta, this)); +/**/ + Common.NotificationCenter.on('api:disconnect', _.bind(me.onCoAuthoringDisconnect, me)); + Common.NotificationCenter.on('goback', _.bind(me.goBack, me)); + + // Initialize descendants + _.each(me.getApplication().controllers, function(controller) { + if (controller && _.isFunction(controller.setApi)) { + controller.setApi(me.api); } + }); + + // Initialize api gateway + me.editorConfig = {}; + me.appOptions = {}; + me.plugins = undefined; + + Common.Gateway.on('init', _.bind(me.loadConfig, me)); + Common.Gateway.on('showmessage', _.bind(me.onExternalMessage, me)); + Common.Gateway.on('opendocument', _.bind(me.loadDocument, me)); + Common.Gateway.ready(); + } + }, + + loadConfig: function(data) { + this.editorConfig = $.extend(this.editorConfig, data.config); + + this.editorConfig.user = + this.appOptions.user = fillUserInfo(this.editorConfig.user, this.editorConfig.lang, this.textAnonymous); + this.appOptions.nativeApp = this.editorConfig.nativeApp === true; + this.appOptions.isDesktopApp = this.editorConfig.targetApp == 'desktop'; + this.appOptions.canCreateNew = !_.isEmpty(this.editorConfig.createUrl) && !this.appOptions.isDesktopApp; + this.appOptions.canOpenRecent = this.editorConfig.nativeApp !== true && this.editorConfig.recent !== undefined && !this.appOptions.isDesktopApp; + this.appOptions.templates = this.editorConfig.templates; + this.appOptions.recent = this.editorConfig.recent; + this.appOptions.createUrl = this.editorConfig.createUrl; + this.appOptions.lang = this.editorConfig.lang; + this.appOptions.location = (typeof (this.editorConfig.location) == 'string') ? this.editorConfig.location.toLowerCase() : ''; + this.appOptions.sharingSettingsUrl = this.editorConfig.sharingSettingsUrl; + this.appOptions.fileChoiceUrl = this.editorConfig.fileChoiceUrl; + this.appOptions.mergeFolderUrl = this.editorConfig.mergeFolderUrl; + this.appOptions.canAnalytics = false; + this.appOptions.customization = this.editorConfig.customization; + this.appOptions.canBackToFolder = (this.editorConfig.canBackToFolder!==false) && (typeof (this.editorConfig.customization) == 'object') + && (typeof (this.editorConfig.customization.goback) == 'object') && !_.isEmpty(this.editorConfig.customization.goback.url); + this.appOptions.canBack = this.editorConfig.nativeApp !== true && this.appOptions.canBackToFolder === true; + this.appOptions.canPlugins = false; + this.plugins = this.editorConfig.plugins; + + if (this.editorConfig.lang) + this.api.asc_setLocale((this.editorConfig.lang) ? parseInt(Common.util.LanguageInfo.getLocalLanguageCode(this.editorConfig.lang)) : 0x0409); + + if (this.appOptions.location == 'us' || this.appOptions.location == 'ca') + Common.Utils.Metric.setDefaultMetric(Common.Utils.Metric.c_MetricUnits.inch); + }, + + loadDocument: function(data) { + this.appOptions.spreadsheet = data.doc; + this.permissions = {}; + var docInfo = {}; + + if ( data.doc ) { + this.permissions = $.extend(this.permissions, data.doc.permissions); + + var _user = new Asc.asc_CUserInfo(); + _user.put_Id(this.appOptions.user.id); + _user.put_FirstName(this.appOptions.user.firstname); + _user.put_LastName(this.appOptions.user.lastname); + _user.put_FullName(this.appOptions.user.fullname); + + docInfo = new Asc.asc_CDocInfo(); + docInfo.put_Id(data.doc.key); + docInfo.put_Url(data.doc.url); + docInfo.put_Title(data.doc.title); + docInfo.put_Format(data.doc.fileType); + docInfo.put_VKey(data.doc.vkey); + docInfo.put_Options(data.doc.options); + docInfo.put_UserInfo(_user); + docInfo.put_CallbackUrl(this.editorConfig.callbackUrl); + } + + this.api.asc_registerCallback('asc_onGetEditorPermissions', _.bind(this.onEditorPermissions, this)); + this.api.asc_setDocInfo(docInfo); + this.api.asc_getEditorPermissions(this.editorConfig.licenseUrl, this.editorConfig.customerId); + + Common.SharedSettings.set('document', data.doc); + + + if (data.doc) { + this.getApplication() + .getController('Toolbar') + .setDocumentTitle(data.doc.title); + } + }, + + setMode: function(mode){ + var me = this; + + Common.SharedSettings.set('mode', mode); + + if ( me.api ) { + me.api.asc_enableKeyEvents(mode == 'edit'); + me.api.asc_setViewMode(mode != 'edit'); + + // Force on autosave if edit + if (mode == 'edit') { + me.api.asc_setAutoSaveGap(1); + } + } + }, + + onProcessSaveResult: function(data) { + this.api.asc_OnSaveEnd(data.result); + if (data && data.result === false) { + uiApp.alert( + _.isEmpty(data.message) ? this.errorProcessSaveResult : data.message, + this.criticalErrorTitle + ); + } + }, + + onProcessRightsChange: function(data) { + if (data && data.enabled === false) { + var me = this, + old_rights = this._state.lostEditingRights; + this._state.lostEditingRights = !this._state.lostEditingRights; + this.api.asc_coAuthoringDisconnect(); + + if (!old_rights) { + uiApp.alert( + _.isEmpty(data.message) ? this.warnProcessRightsChange : data.message, + this.notcriticalErrorTitle, + function () { + me._state.lostEditingRights = false; + me.onEditComplete(); + } + ); + } + } + }, + + onDownloadAs: function() { +// this._state.isFromGatewayDownloadAs = true; +// var type = /^(?:(pdf|djvu|xps))$/.exec(this.document.fileType); +// (type && typeof type[1] === 'string') ? this.api.asc_DownloadOrigin(true) : this.api.asc_DownloadAs(Asc.c_oAscFileType.DOCX, true); + }, + + + disableEditing: function(disable) { + var app = this.getApplication(); +// if (this.appOptions.canEdit && this.editorConfig.mode !== 'view') { +// app.getController('RightMenu').getView('RightMenu').clearSelection(); +// app.getController('Toolbar').DisableToolbar(disable, disable); +// app.getController('RightMenu').SetDisabled(disable, false); +// app.getController('Statusbar').getView('Statusbar').SetDisabled(disable); +// +// var tooltip = app.getController('Toolbar').getView('Toolbar').synchTooltip; +// if (tooltip) tooltip.hide(); +// } +// app.getController('LeftMenu').SetDisabled(disable, true); + }, + + goBack: function(blank) { + var href = this.appOptions.customization.goback.url; + if (blank) { + window.open(href, "_blank"); + } else { + parent.location.href = href; + } + }, + + onEditComplete: function(cmp) { +//// this.getMainMenu().closeFullScaleMenu(); +// var application = this.getApplication(), +// toolbarController = application.getController('Toolbar'), +// toolbarView = toolbarController.getView('Toolbar'); +// +// if (this.appOptions.isEdit && toolbarView && (toolbarView.btnInsertShape.pressed || toolbarView.btnInsertText.pressed) && +// ( !_.isObject(arguments[1]) || arguments[1].id !== 'id-toolbar-btn-insertshape')) { // TODO: Event from api is needed to clear btnInsertShape state +// if (this.api) +// this.api.StartAddShape('', false); +// +// toolbarView.btnInsertShape.toggle(false, false); +// toolbarView.btnInsertText.toggle(false, false); +// } +// +// application.getController('DocumentHolder').getView('DocumentHolder').focus(); +// +// if (this.api) { +// var cansave = this.api.asc_isDocumentCanSave(); +// var isSyncButton = $('.btn-icon', toolbarView.btnSave.cmpEl).hasClass('btn-synch'); +// if (toolbarView.btnSave.isDisabled() !== (!cansave && !isSyncButton || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1)) +// toolbarView.btnSave.setDisabled(!cansave && !isSyncButton || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1); +// } + }, + + onLongActionBegin: function(type, id) { + var action = {id: id, type: type}; + this.stackLongActions.push(action); + this.setLongActionView(action); + }, + + onLongActionEnd: function(type, id) { + var me = this, + action = {id: id, type: type}; + + this.stackLongActions.pop(action); + + this.updateWindowTitle(true); + + if (type === Asc.c_oAscAsyncActionType.BlockInteraction && id == Asc.c_oAscAsyncAction.Open) { + Common.Gateway.internalMessage('documentReady', {}); + this.onDocumentContentReady(); + } + + action = this.stackLongActions.get({type: Asc.c_oAscAsyncActionType.Information}); + if (action) { + this.setLongActionView(action) + } else { + if (this._state.fastCoauth && this._state.usersCount>1 && id==Asc.c_oAscAsyncAction['Save']) { + var me = this; + if (me._state.timerSave===undefined) + me._state.timerSave = setInterval(function(){ + if ((new Date()) - me._state.isSaving>500) { + clearInterval(me._state.timerSave); + console.debug('End long action'); + me._state.timerSave = undefined; + } + }, 500); + } else { + console.debug('End long action'); + } + } + + action = this.stackLongActions.get({type: Asc.c_oAscAsyncActionType.BlockInteraction}); + + if (action) { + this.setLongActionView(action) + } else { + _.delay(function () { + $(me.loadMask).hasClass('modal-in') && uiApp.closeModal(me.loadMask); + }, 200); + } + + if (id==Asc.c_oAscAsyncAction['Save'] && (!this._state.fastCoauth || this._state.usersCount<2)) { + this.synchronizeChanges(); + } + }, + + setLongActionView: function(action) { + var title = '', text = ''; + + switch (action.id) { + case Asc.c_oAscAsyncAction['Open']: + title = this.openTitleText; + text = this.openTextText; + break; + + case Asc.c_oAscAsyncAction['Save']: + this._state.isSaving = new Date(); + title = this.saveTitleText; + text = this.saveTextText; + break; + + case Asc.c_oAscAsyncAction['LoadDocumentFonts']: + title = this.loadFontsTitleText; + text = this.loadFontsTextText; + break; + + case Asc.c_oAscAsyncAction['LoadDocumentImages']: + title = this.loadImagesTitleText; + text = this.loadImagesTextText; + break; + + case Asc.c_oAscAsyncAction['LoadFont']: + title = this.loadFontTitleText; + text = this.loadFontTextText; + break; + + case Asc.c_oAscAsyncAction['LoadImage']: + title = this.loadImageTitleText; + text = this.loadImageTextText; + break; + + case Asc.c_oAscAsyncAction['DownloadAs']: + title = this.downloadTitleText; + text = this.downloadTextText; + break; + + case Asc.c_oAscAsyncAction['Print']: + title = this.printTitleText; + text = this.printTextText; + break; + + case Asc.c_oAscAsyncAction['UploadImage']: + title = this.uploadImageTitleText; + text = this.uploadImageTextText; + break; + + case Asc.c_oAscAsyncAction['ApplyChanges']: + title = this.applyChangesTitleText; + text = this.applyChangesTextText; + break; + + case Asc.c_oAscAsyncAction['PrepareToSave']: + title = this.savePreparingText; + text = this.savePreparingTitle; + break; + + case Asc.c_oAscAsyncAction['MailMergeLoadFile']: + title = this.mailMergeLoadFileText; + text = this.mailMergeLoadFileTitle; + break; + + case Asc.c_oAscAsyncAction['DownloadMerge']: + title = this.downloadMergeTitle; + text = this.downloadMergeText; + break; + + case Asc.c_oAscAsyncAction['SendMailMerge']: + title = this.sendMergeTitle; + text = this.sendMergeText; + break; + + case ApplyEditRights: + title = this.txtEditingMode; + text = this.txtEditingMode; + break; + + case LoadingDocument: + title = this.loadingDocumentTitleText; + text = this.loadingDocumentTextText; + break; + } + + if (action.type == Asc.c_oAscAsyncActionType['BlockInteraction']) { + if (!this.loadMask) + this.loadMask = uiApp.showPreloader(title); + } + else { +// this.getApplication().getController('Statusbar').setStatusCaption(text); + } + }, + + onApplyEditRights: function(data) { +// var application = this.getApplication(); +// application.getController('Statusbar').setStatusCaption(''); +// +// if (data) { +// if (data.allowed) { +// data.requestrights = true; +// this.appOptions.isEdit= true; +// +// this.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'],ApplyEditRights); +// +// var me = this; +// setTimeout(function(){ +// me.applyModeCommonElements(); +// me.applyModeEditorElements(); +// me.api.asc_setViewMode(false); +// +// var timer_rp = setInterval(function(){ +// clearInterval(timer_rp); +// +// var toolbarController = application.getController('Toolbar'), +// rightmenuController = application.getController('RightMenu'), +// leftmenuController = application.getController('LeftMenu'), +// documentHolderController = application.getController('DocumentHolder'), +// fontsControllers = application.getController('Common.Controllers.Fonts'); +// +// leftmenuController.setMode(me.appOptions).createDelayedElements(); +// +// rightmenuController.createDelayedElements(); +// +// Common.NotificationCenter.trigger('layout:changed', 'main'); +// +// var timer_sl = setInterval(function(){ +// if (window.styles_loaded) { +// clearInterval(timer_sl); +// +// documentHolderController.getView('DocumentHolder').createDelayedElements(); +// documentHolderController.getView('DocumentHolder').changePosition(); +// me.loadLanguages(); +// +// var shapes = me.api.asc_getPropertyEditorShapes(); +// if (shapes) +// me.fillAutoShapes(shapes[0], shapes[1]); +// +// me.fillTextArt(me.api.asc_getTextArtPreviews()); +// me.updateThemeColors(); +// toolbarController.activateControls(); +// +// me.api.UpdateInterfaceState(); +// } +// }, 50); +// },50); +// }, 100); +// } else { +// Common.UI.info({ +// title: this.requestEditFailedTitleText, +// msg: data.message || this.requestEditFailedMessageText +// }); +// } +// } + }, + + onDocumentContentReady: function() { + if (this._isDocReady) + return; + + var me = this, + value; + + me._isDocReady = true; + + var worksheetsCount = this.api.asc_getWorksheetsCount(); + var i = me.api.asc_getActiveWorksheetIndex(); + me.api.asc_showWorksheet(i); + me.api.asc_Resize(); + // me.api.asc_cleanSelection(); + + me.hidePreloader(); + me.onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument); + + /** coauthoring begin **/ + // value = Common.localStorage.getItem("sse-settings-livecomment"); + // this.isLiveCommenting = !(value!==null && parseInt(value) == 0); + // this.isLiveCommenting ? this.api.asc_showComments() : this.api.asc_hideComments(); + /** coauthoring end **/ + + value = (this.appOptions.isEditMailMerge || this.appOptions.isEditDiagram) ? 100 : Common.localStorage.getItem("sse-settings-zoom"); + var zf = (value!==null) ? parseInt(value)/100 : (this.appOptions.customization && this.appOptions.customization.zoom ? parseInt(this.appOptions.customization.zoom)/100 : 1); + this.api.asc_setZoom(zf>0 ? zf : 1); + + // value = Common.localStorage.getItem("de-show-hiddenchars"); + // me.api.put_ShowParaMarks((value!==null) ? eval(value) : false); + // + // value = Common.localStorage.getItem("de-show-tableline"); + // me.api.put_ShowTableEmptyLine((value!==null) ? eval(value) : true); + // + // value = Common.localStorage.getItem("de-settings-spellcheck"); + // me.api.asc_setSpellCheck(value===null || parseInt(value) == 1); + + // Common.localStorage.setItem("de-settings-showsnaplines", me.api.get_ShowSnapLines() ? 1 : 0); + + me.api.asc_registerCallback('asc_onStartAction', _.bind(me.onLongActionBegin, me)); + me.api.asc_registerCallback('asc_onEndAction', _.bind(me.onLongActionEnd, me)); + me.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(me.onCoAuthoringDisconnect, me)); + me.api.asc_registerCallback('asc_onPrint', _.bind(me.onPrint, me)); + + var application = me.getApplication(); +// application.getController('Viewport') +// .getView('Common.Views.Header') +// .setDocumentCaption(me.api.asc_getDocumentName()); + + me.updateWindowTitle(true); + + // value = Common.localStorage.getItem("de-settings-inputmode"); + // me.api.SetTextBoxInputMode(value!==null && parseInt(value) == 1); + + /** coauthoring begin **/ + // if (me.appOptions.isEdit && me.appOptions.canLicense && !me.appOptions.isOffline && me.appOptions.canCoAuthoring) { + // value = Common.localStorage.getItem("de-settings-coauthmode"); + // me._state.fastCoauth = (value===null || parseInt(value) == 1); + // me.api.asc_SetFastCollaborative(me._state.fastCoauth); + // + // value = Common.localStorage.getItem((me._state.fastCoauth) ? "de-settings-showchanges-fast" : "de-settings-showchanges-strict"); + // if (value !== null) + // me.api.SetCollaborativeMarksShowType(value == 'all' ? Asc.c_oAscCollaborativeMarksShowType.All : + // value == 'none' ? Asc.c_oAscCollaborativeMarksShowType.None : Asc.c_oAscCollaborativeMarksShowType.LastChanges); + // else + // me.api.SetCollaborativeMarksShowType(me._state.fastCoauth ? Asc.c_oAscCollaborativeMarksShowType.None : Asc.c_oAscCollaborativeMarksShowType.LastChanges); + // } else { + // me._state.fastCoauth = false; + // me.api.asc_SetFastCollaborative(me._state.fastCoauth); + // me.api.SetCollaborativeMarksShowType(Asc.c_oAscCollaborativeMarksShowType.None); + // } + /** coauthoring end **/ + +// var toolbarController = application.getController('Toolbar'), +// statusbarController = application.getController('Statusbar'), +// documentHolderController = application.getController('DocumentHolder'), +// fontsController = application.getController('Common.Controllers.Fonts'), +// rightmenuController = application.getController('RightMenu'), +// leftmenuController = application.getController('LeftMenu'), +// chatController = application.getController('Common.Controllers.Chat'), +// pluginsController = application.getController('Common.Controllers.Plugins'); +// +// leftmenuController.getView('LeftMenu').getMenu('file').loadDocument({doc:me.document}); +// leftmenuController.setMode(me.appOptions).createDelayedElements().setApi(me.api); +// +// chatController.setApi(this.api).setMode(this.appOptions); +// application.getController('Common.Controllers.ExternalDiagramEditor').setApi(this.api).loadConfig({config:this.editorConfig, customization: this.editorConfig.customization}); +// application.getController('Common.Controllers.ExternalMergeEditor').setApi(this.api).loadConfig({config:this.editorConfig, customization: this.editorConfig.customization}); +// +// pluginsController.setApi(me.api); +// me.updatePlugins(me.plugins); +// me.api.asc_registerCallback('asc_onPluginsInit', _.bind(me.updatePluginsList, me)); +// +// documentHolderController.setApi(me.api); +// documentHolderController.createDelayedElements(); +// statusbarController.createDelayedElements(); +// +// leftmenuController.getView('LeftMenu').disableMenu('all',false); +// +// if (me.appOptions.canBranding) +// me.getApplication().getController('LeftMenu').leftMenu.getMenu('about').setLicInfo(me.editorConfig.customization); +// +// documentHolderController.getView('DocumentHolder').setApi(me.api).on('editcomplete', _.bind(me.onEditComplete, me)); + +// if (me.appOptions.isEdit) { +// value = Common.localStorage.getItem("de-settings-autosave"); +// value = (!me._state.fastCoauth && value!==null) ? parseInt(value) : (me.appOptions.canCoAuthoring ? 1 : 0); +// +// me.api.asc_setAutoSaveGap(value); +// +// if (me.needToUpdateVersion) +// Common.NotificationCenter.trigger('api:disconnect'); +// var timer_sl = setInterval(function(){ +// if (window.styles_loaded) { +// clearInterval(timer_sl); +// +// toolbarController.createDelayedElements(); +// +// documentHolderController.getView('DocumentHolder').createDelayedElements(); +// me.loadLanguages(); +// +// rightmenuController.createDelayedElements(); +// +// var shapes = me.api.asc_getPropertyEditorShapes(); +// if (shapes) +// me.fillAutoShapes(shapes[0], shapes[1]); +// +// me.updateThemeColors(); +// toolbarController.activateControls(); +// if (me.needToUpdateVersion) +// toolbarController.onApiCoAuthoringDisconnect(); +// me.api.UpdateInterfaceState(); +// me.fillTextArt(me.api.asc_getTextArtPreviews()); +// } +// }, 50); +// } +// +// if (this.appOptions.canAnalytics && false) +// Common.component.Analytics.initialize('UA-12442749-13', 'Document Editor'); + + Common.Gateway.on('applyeditrights', _.bind(me.onApplyEditRights, me)); + Common.Gateway.on('processsaveresult', _.bind(me.onProcessSaveResult, me)); + Common.Gateway.on('processrightschange', _.bind(me.onProcessRightsChange, me)); + Common.Gateway.on('downloadas', _.bind(me.onDownloadAs, me)); + + Common.Gateway.sendInfo({ + mode: me.appOptions.isEdit?'edit':'view' + }); + +// if (this._state.licenseWarning) { +// value = Common.localStorage.getItem("de-license-warning"); +// value = (value!==null) ? parseInt(value) : 0; +// var now = (new Date).getTime(); +// if (now - value > 86400000) { +// Common.localStorage.setItem("de-license-warning", now); +// Common.UI.info({ +// width: 500, +// title: this.textNoLicenseTitle, +// msg : this.warnNoLicense, +// buttons: [ +// {value: 'buynow', caption: this.textBuyNow}, +// {value: 'contact', caption: this.textContactUs} +// ], +// primary: 'buynow', +// callback: function(btn) { +// if (btn == 'buynow') +// window.open('http://www.onlyoffice.com/enterprise-edition.aspx', "_blank"); +// else if (btn == 'contact') +// window.open('mailto:sales@onlyoffice.com', "_blank"); +// } +// }); +// } +// } + }, + + onOpenDocument: function(progress) { + if (this.loadMask) { + var $title = $$(this.loadMask).find('.modal-title'), + proc = (progress.asc_getCurrentFont() + progress.asc_getCurrentImage())/(progress.asc_getFontsCount() + progress.asc_getImagesCount()); + + $title.text(this.textLoadingDocument + ': ' + Math.min(Math.round(proc * 100), 100) + '%'); + } + }, + + onEditorPermissions: function(params) { + var me = this, + licType = params.asc_getLicenseType(); + + if (Asc.c_oLicenseResult.Expired === licType || + Asc.c_oLicenseResult.Error === licType || + Asc.c_oLicenseResult.ExpiredTrial === licType) { + uiApp.modal({ + title : me.titleLicenseExp, + text : me.warnLicenseExp + }); + return; + } + + me.permissions.review = (me.permissions.review === undefined) ? (me.permissions.edit !== false) : me.permissions.review; + me.appOptions.canAnalytics = params.asc_getIsAnalyticsEnable(); + me.appOptions.canLicense = (licType === Asc.c_oLicenseResult.Success); + me.appOptions.isLightVersion = params.asc_getIsLight(); + /** coauthoring begin **/ + me.appOptions.canCoAuthoring = !me.appOptions.isLightVersion; + /** coauthoring end **/ + me.appOptions.isOffline = me.api.asc_isOffline(); + me.appOptions.isReviewOnly = (me.permissions.review === true) && (me.permissions.edit === false); + me.appOptions.canRequestEditRights = me.editorConfig.canRequestEditRights; + me.appOptions.canEdit = (me.permissions.edit !== false || me.permissions.review === true) && // can edit or review + (me.editorConfig.canRequestEditRights || me.editorConfig.mode !== 'view') && // if mode=="view" -> canRequestEditRights must be defined + (!me.appOptions.isReviewOnly || me.appOptions.canLicense); // if isReviewOnly==true -> canLicense must be true + me.appOptions.isEdit = me.appOptions.canLicense && me.appOptions.canEdit && me.editorConfig.mode !== 'view'; + me.appOptions.canReview = me.appOptions.canLicense && me.appOptions.isEdit && (me.permissions.review===true); + me.appOptions.canUseHistory = me.appOptions.canLicense && !me.appOptions.isLightVersion && me.editorConfig.canUseHistory && me.appOptions.canCoAuthoring && !me.appOptions.isDesktopApp; + me.appOptions.canHistoryClose = me.editorConfig.canHistoryClose; + me.appOptions.canHistoryRestore= me.editorConfig.canHistoryRestore && !!me.permissions.changeHistory; + me.appOptions.canUseMailMerge= me.appOptions.canLicense && me.appOptions.canEdit && !me.appOptions.isDesktopApp; + me.appOptions.canSendEmailAddresses = me.appOptions.canLicense && me.editorConfig.canSendEmailAddresses && me.appOptions.canEdit && me.appOptions.canCoAuthoring; + me.appOptions.canComments = me.appOptions.canLicense && !((typeof (me.editorConfig.customization) == 'object') && me.editorConfig.customization.comments===false); + me.appOptions.canChat = me.appOptions.canLicense && !me.appOptions.isOffline && !((typeof (me.editorConfig.customization) == 'object') && me.editorConfig.customization.chat===false); + me.appOptions.canEditStyles = me.appOptions.canLicense && me.appOptions.canEdit; + me.appOptions.canPrint = (me.permissions.print !== false); + + me.appOptions.canDownload = !me.appOptions.nativeApp && me.permissions.download !== false; + + me._state.licenseWarning = (licType===Asc.c_oLicenseResult.Connections) && me.appOptions.canEdit && me.editorConfig.mode !== 'view'; + + me.appOptions.canBranding = params.asc_getCanBranding() && (typeof me.editorConfig.customization == 'object'); + + me.applyModeCommonElements(); + me.applyModeEditorElements(); + + me.api.asc_setViewMode(/*!me.appOptions.isEdit*/false); + me.api.asc_LoadDocument(); + // me.api.asc_Resize(); + + if (!me.appOptions.isEdit) { + me.hidePreloader(); + me.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument); + } + }, + + applyModeCommonElements: function() { + var me = this; + + window.editor_elements_prepared = true; + + _.each(me.getApplication().controllers, function(controller) { + if (controller && _.isFunction(controller.setMode)) { + controller.setMode(me.editorConfig.mode); } }); - }, this)); - } - }, - onOpenDocumentProgress: function(progress) { - var elem = document.getElementById('loadmask-text'); - if (elem) { - var proc = (progress.asc_getCurrentFont() + progress.asc_getCurrentImage())/(progress.asc_getFontsCount() + progress.asc_getImagesCount()); - elem.innerHTML = this.textLoadingDocument + ': '+ Math.round(proc*100) + '%'; - } - }, +// var app = this.getApplication(), +// viewport = app.getController('Viewport').getView('Viewport'), +// headerView = app.getController('Viewport').getView('Common.Views.Header'), +// statusbarView = app.getController('Statusbar').getView('Statusbar'), +// documentHolder = app.getController('DocumentHolder').getView('DocumentHolder'); +// +// if (headerView) { +// headerView.setHeaderCaption(this.appOptions.isEdit ? 'Document Editor' : 'Document Viewer'); +// headerView.setVisible(!this.appOptions.nativeApp && !value && !this.appOptions.isDesktopApp); +// } +// +// if (this.appOptions.nativeApp) { +// $('body').removeClass('safari'); +// } +// +// viewport && viewport.setMode(this.appOptions); +// statusbarView && statusbarView.setMode(this.appOptions); +// +// documentHolder.setMode(this.appOptions); +// + if (me.api) { + me.api.asc_registerCallback('asc_onSendThemeColors', _.bind(this.onSendThemeColors, this)); - onOpenDocument: function() { - this._hideLoadSplash(); - this.api.asc_Resize(); + var translateChart = new Asc.asc_CChartTranslate(); + translateChart.asc_setTitle(me.txtDiagramTitle); + translateChart.asc_setXAxis(me.txtXAxis); + translateChart.asc_setYAxis(me.txtYAxis); + translateChart.asc_setSeries(me.txtSeries); + me.api.asc_setChartTranslate(translateChart); - if (this.api) - this.api.asc_cleanSelection(); - }, - - onLongActionEnd: function(type, id) { - if (type === Asc.c_oAscAsyncActionType['BlockInteraction']){ - switch (id) { - case Asc.c_oAscAsyncAction['Open']: - this.onOpenDocument(); - break; - } - } - }, - - onDownloadAs: function() { - this.api.asc_DownloadAs(Asc.c_oAscFileType.XLSX, true); - }, - - _hideLoadSplash: function(){ - var preloader = Ext.get('loading-mask'); - if (preloader) { - Ext.Anim.run(preloader, 'fade', { - out : true, - duration: 1000, - after : function(){ - preloader.destroy(); + var translateArt = new Asc.asc_TextArtTranslate(); + translateArt.asc_setDefaultText(me.txtArt); + me.api.asc_setTextArtTranslate(translateArt); } - }); + }, + + applyModeEditorElements: function() { + if (this.appOptions.isEdit) { + var me = this; +// application = this.getApplication(), +// toolbarController = application.getController('Toolbar'), +// rightmenuController = application.getController('RightMenu'), +// fontsControllers = application.getController('Common.Controllers.Fonts'), +// reviewController = (this.appOptions.canReview) ? application.getController('Common.Controllers.ReviewChanges') : null; +// +// fontsControllers && fontsControllers.setApi(me.api); +// toolbarController && toolbarController.setApi(me.api); +// +// /** coauthoring begin **/ +// me.contComments.setMode(me.appOptions); +// me.contComments.setConfig({config: me.editorConfig}, me.api); +// /** coauthoring end **/ +// rightmenuController && rightmenuController.setApi(me.api); +// +// if (reviewController) +// reviewController.setMode(me.appOptions).setConfig({config: me.editorConfig}, me.api); +// +// var viewport = this.getApplication().getController('Viewport').getView('Viewport'); +// +// viewport.applyEditorMode(); +// +// var toolbarView = (toolbarController) ? toolbarController.getView('Toolbar') : null; +// +// _.each([ +// toolbarView, +// rightmenuController.getView('RightMenu') +// ], function(view) { +// if (view) { +// view.setApi(me.api); +// view.on('editcomplete', _.bind(me.onEditComplete, me)); +// view.setMode(me.appOptions); +// } +// }); +// +// if (toolbarView) { +// toolbarView.on('insertimage', _.bind(me.onInsertImage, me)); +// toolbarView.on('inserttable', _.bind(me.onInsertTable, me)); +// toolbarView.on('insertshape', _.bind(me.onInsertShape, me)); +// toolbarView.on('inserttextart', _.bind(me.onInsertTextArt, me)); +// toolbarView.on('insertchart', _.bind(me.onInsertChart, me)); +// } +// +// var value = Common.localStorage.getItem('de-settings-unit'); +// value = (value!==null) ? parseInt(value) : Common.Utils.Metric.getDefaultMetric(); +// Common.Utils.Metric.setCurrentMetric(value); +// me.api.asc_SetDocumentUnits((value==Common.Utils.Metric.c_MetricUnits.inch) ? Asc.c_oAscDocumentUnits.Inch : ((value==Common.Utils.Metric.c_MetricUnits.pt) ? Asc.c_oAscDocumentUnits.Point : Asc.c_oAscDocumentUnits.Millimeter)); + + me.api.asc_registerCallback('asc_onDocumentModifiedChanged', _.bind(me.onDocumentModifiedChanged, me)); + me.api.asc_registerCallback('asc_onDocumentCanSaveChanged', _.bind(me.onDocumentCanSaveChanged, me)); + me.api.asc_registerCallback('asc_onSaveUrl', _.bind(me.onSaveUrl, me)); + me.api.asc_registerCallback('asc_onDownloadUrl', _.bind(me.onDownloadUrl, me)); + /** coauthoring begin **/ + me.api.asc_registerCallback('asc_onCollaborativeChanges', _.bind(me.onCollaborativeChanges, me)); + me.api.asc_registerCallback('asc_OnTryUndoInFastCollaborative',_.bind(me.onTryUndoInFastCollaborative, me)); + me.api.asc_registerCallback('asc_onAuthParticipantsChanged', _.bind(me.onAuthParticipantsChanged, me)); + me.api.asc_registerCallback('asc_onParticipantsChanged', _.bind(me.onAuthParticipantsChanged, me)); + /** coauthoring end **/ + + if (me.stackLongActions.exist({id: ApplyEditRights, type: Asc.c_oAscAsyncActionType['BlockInteraction']})) { + me.onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], ApplyEditRights); + } else if (!this._isDocReady) { + me.hidePreloader(); + me.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument); + } + + // Message on window close + window.onbeforeunload = _.bind(me.onBeforeUnload, me); + window.onunload = _.bind(me.onUnload, me); + } + }, + + onExternalMessage: function(msg) { + if (msg && msg.msg) { + msg.msg = (msg.msg).toString(); + uiApp.addNotification({ + title: 'ONLYOFFICE', + message: [msg.msg.charAt(0).toUpperCase() + msg.msg.substring(1)] + }); + + Common.component.Analytics.trackEvent('External Error', msg.title); + } + }, + + onError: function(id, level, errData) { + this.hidePreloader(); + this.onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument); + + var config = { + closable: false + }; + + switch (id) + { + case Asc.c_oAscError.ID.Unknown: + config.msg = this.unknownErrorText; + break; + + case Asc.c_oAscError.ID.ConvertationTimeout: + config.msg = this.convertationTimeoutText; + break; + + case Asc.c_oAscError.ID.ConvertationOpenError: + config.msg = this.openErrorText; + break; + + case Asc.c_oAscError.ID.ConvertationSaveError: + config.msg = this.saveErrorText; + break; + + case Asc.c_oAscError.ID.DownloadError: + config.msg = this.downloadErrorText; + break; + + case Asc.c_oAscError.ID.UplImageSize: + config.msg = this.uploadImageSizeMessage; + break; + + case Asc.c_oAscError.ID.UplImageExt: + config.msg = this.uploadImageExtMessage; + break; + + case Asc.c_oAscError.ID.UplImageFileCount: + config.msg = this.uploadImageFileCountMessage; + break; + + case Asc.c_oAscError.ID.SplitCellMaxRows: + config.msg = this.splitMaxRowsErrorText.replace('%1', errData.get_Value()); + break; + + case Asc.c_oAscError.ID.SplitCellMaxCols: + config.msg = this.splitMaxColsErrorText.replace('%1', errData.get_Value()); + break; + + case Asc.c_oAscError.ID.SplitCellRowsDivider: + config.msg = this.splitDividerErrorText.replace('%1', errData.get_Value()); + break; + + case Asc.c_oAscError.ID.VKeyEncrypt: + config.msg = this.errorKeyEncrypt; + break; + + case Asc.c_oAscError.ID.KeyExpire: + config.msg = this.errorKeyExpire; + break; + + case Asc.c_oAscError.ID.UserCountExceed: + config.msg = this.errorUsersExceed; + break; + + case Asc.c_oAscError.ID.CoAuthoringDisconnect: + config.msg = (this.appOptions.isEdit) ? this.errorCoAuthoringDisconnect : this.errorViewerDisconnect; + break; + + case Asc.c_oAscError.ID.ConvertationPassword: + config.msg = this.errorFilePassProtect; + break; + + case Asc.c_oAscError.ID.StockChartError: + config.msg = this.errorStockChart; + break; + + case Asc.c_oAscError.ID.DataRangeError: + config.msg = this.errorDataRange; + break; + + case Asc.c_oAscError.ID.Database: + config.msg = this.errorDatabaseConnection; + break; + + case Asc.c_oAscError.ID.UserDrop: + if (this._state.lostEditingRights) { + this._state.lostEditingRights = false; + return; + } + this._state.lostEditingRights = true; + config.msg = this.errorUserDrop; + break; + + case Asc.c_oAscError.ID.MailMergeLoadFile: + config.msg = this.errorMailMergeLoadFile; + break; + + case Asc.c_oAscError.ID.MailMergeSaveFile: + config.msg = this.errorMailMergeSaveFile; + break; + + case Asc.c_oAscError.ID.Warning: + config.msg = this.errorConnectToServer; + break; + + default: + config.msg = this.errorDefaultMessage.replace('%1', id); + break; + } + + + if (level == Asc.c_oAscError.Level.Critical) { + + // report only critical errors + Common.Gateway.reportError(id, config.msg); + + config.title = this.criticalErrorTitle; +// config.iconCls = 'error'; + + if (this.appOptions.canBackToFolder) { + config.msg += '

' + this.criticalErrorExtText; + config.callback = function() { + Common.NotificationCenter.trigger('goback'); + } + } + } + else { + config.title = this.notcriticalErrorTitle; +// config.iconCls = 'warn'; +// config.buttons = ['ok']; + config.callback = _.bind(function(btn){ + if (id == Asc.c_oAscError.ID.Warning && btn == 'ok' && (this.appOptions.canDownload || this.appOptions.canDownloadOrigin)) { + Common.UI.Menu.Manager.hideAll(); + if (this.appOptions.isDesktopApp && this.appOptions.isOffline) + this.api.asc_DownloadAs(); + else + (this.appOptions.canDownload) ? this.getApplication().getController('LeftMenu').leftMenu.showMenu('file:saveas') : this.api.asc_DownloadOrigin(); + } + this._state.lostEditingRights = false; + this.onEditComplete(); + }, this); + } + +// Common.UI.alert(config); + uiApp.modal({ + title : config.title, + text : config.msg, + buttons: [ + { + text: 'OK', + onClick: config.callback + } + ] + }); + + Common.component.Analytics.trackEvent('Internal Error', id.toString()); + }, + + onCoAuthoringDisconnect: function() { +// this.getApplication().getController('Viewport').getView('Viewport').setMode({isDisconnected:true}); + this._state.isDisconnected = true; + }, + + updateWindowTitle: function(force) { + var isModified = this.api.asc_isDocumentModified(); + if (this._state.isDocModified !== isModified || force) { + var title = this.defaultTitleText; + +// var headerView = this.getApplication() +// .getController('Viewport') +// .getView('Common.Views.Header'); +// +// if (!_.isEmpty(headerView.getDocumentCaption())) +// title = headerView.getDocumentCaption() + ' - ' + title; +// +// if (isModified) { +// if (!_.isUndefined(title) && (!this._state.fastCoauth || this._state.usersCount<2 )) { +// title = '* ' + title; +// headerView.setDocumentCaption(headerView.getDocumentCaption() + '*', true); +// } +// } else { +// headerView.setDocumentCaption(headerView.getDocumentCaption()); +// } + + if (window.document.title != title) + window.document.title = title; + + if (!this._state.fastCoauth || this._state.usersCount<2 ) + Common.Gateway.setDocumentModified(isModified); + else if ( this._state.startModifyDocument!==undefined && this._state.startModifyDocument === isModified){ + Common.Gateway.setDocumentModified(isModified); + this._state.startModifyDocument = (this._state.startModifyDocument) ? !this._state.startModifyDocument : undefined; + } + + this._state.isDocModified = isModified; + } + }, + + onDocumentModifiedChanged: function() { + if (this._state.fastCoauth && this._state.usersCount > 1 && this._state.startModifyDocument===undefined ) + return; + + var isModified = this.api.asc_isDocumentCanSave(); + if (this._state.isDocModified !== isModified) { + Common.Gateway.setDocumentModified(this.api.asc_isDocumentModified()); + } + + this.updateWindowTitle(); + +// var toolbarView = this.getApplication().getController('Toolbar').getView('Toolbar'); +// +// if (toolbarView) { +// var isSyncButton = $('.btn-icon', toolbarView.btnSave.cmpEl).hasClass('btn-synch'); +// if (toolbarView.btnSave.isDisabled() !== (!isModified && !isSyncButton || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1)) +// toolbarView.btnSave.setDisabled(!isModified && !isSyncButton || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1); +// } + }, + onDocumentCanSaveChanged: function (isCanSave) { +// var application = this.getApplication(), +// toolbarController = application.getController('Toolbar'), +// toolbarView = toolbarController.getView('Toolbar'); +// +// if (toolbarView && this.api) { +// var isSyncButton = $('.btn-icon', toolbarView.btnSave.cmpEl).hasClass('btn-synch'); +// if (toolbarView.btnSave.isDisabled() !== (!isCanSave && !isSyncButton || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1)) +// toolbarView.btnSave.setDisabled(!isCanSave && !isSyncButton || this._state.isDisconnected || this._state.fastCoauth && this._state.usersCount>1); +// } + }, + + onBeforeUnload: function() { + Common.localStorage.save(); + + if (this.api.asc_isDocumentModified()) { + var me = this; + this.api.asc_stopSaving(); + this.continueSavingTimer = window.setTimeout(function() { + me.api.asc_continueSaving(); + }, 500); + + return this.leavePageText; + } + }, + + onUnload: function() { + if (this.continueSavingTimer) + clearTimeout(this.continueSavingTimer); + }, + + hidePreloader: function() { + $('#loading-mask').hide().remove(); + }, + + onSaveUrl: function(url) { + Common.Gateway.save(url); + }, + + onDownloadUrl: function(url) { + if (this._state.isFromGatewayDownloadAs) { + Common.Gateway.downloadAs(url); + } + + this._state.isFromGatewayDownloadAs = false; + }, + + onUpdateVersion: function(callback) { + var me = this; + me.needToUpdateVersion = true; + me.onLongActionEnd(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument); + + uiApp.alert( + me.errorUpdateVersion, + me.titleUpdateVersion, + function () { + _.defer(function() { + Common.Gateway.updateVersion(); + + if (callback) { + callback.call(me); + } + + me.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument); + }) + }); + }, + + onCollaborativeChanges: function() { +// if (this._state.hasCollaborativeChanges) return; +// this._state.hasCollaborativeChanges = true; +// if (this.appOptions.isEdit) +// this.getApplication().getController('Statusbar').setStatusCaption(this.txtNeedSynchronize); + }, + /** coauthoring end **/ + + synchronizeChanges: function() { +// this.getApplication().getController('Statusbar').synchronizeChanges(); +// this.getApplication().getController('DocumentHolder').getView('DocumentHolder').hideTips(); +// /** coauthoring begin **/ +// this.getApplication().getController('Toolbar').getView('Toolbar').synchronizeChanges(); +// /** coauthoring end **/ + this._state.hasCollaborativeChanges = false; + }, + + initNames: function() { + this.shapeGroupNames = [ + this.txtBasicShapes, + this.txtFiguredArrows, + this.txtMath, + this.txtCharts, + this.txtStarsRibbons, + this.txtCallouts, + this.txtButtons, + this.txtRectangles, + this.txtLines + ]; + }, + + fillAutoShapes: function(groupNames, shapes){ +// if (_.isEmpty(shapes) || _.isEmpty(groupNames) || shapes.length != groupNames.length) +// return; +// +// var me = this, +// shapegrouparray = [], +// shapeStore = this.getCollection('ShapeGroups'); +// +// shapeStore.reset(); +// +// var groupscount = groupNames.length; +// _.each(groupNames, function(groupName, index){ +// var store = new Backbone.Collection([], { +// model: DE.Models.ShapeModel +// }); +// +// var cols = (shapes[index].length) > 18 ? 7 : 6, +// height = Math.ceil(shapes[index].length/cols) * 35 + 3, +// width = 30 * cols; +// +// _.each(shapes[index], function(shape, idx){ +// store.add({ +// imageUrl : shape.Image, +// data : {shapeType: shape.Type}, +// tip : me.textShape + ' ' + (idx+1), +// allowSelected : true, +// selected: false +// }); +// }); +// +// shapegrouparray.push({ +// groupName : me.shapeGroupNames[index], +// groupStore : store, +// groupWidth : width, +// groupHeight : height +// }); +// }); +// +// shapeStore.add(shapegrouparray); +// +// setTimeout(function(){ +// me.getApplication().getController('Toolbar').fillAutoShapes(); +// }, 50); + + }, + + fillTextArt: function(shapes){ +// if (_.isEmpty(shapes)) return; +// +// var me = this, arr = [], +// artStore = this.getCollection('Common.Collections.TextArt'); +// +// _.each(shapes, function(shape, index){ +// arr.push({ +// imageUrl : shape, +// data : index, +// allowSelected : true, +// selected: false +// }); +// }); +// artStore.reset(arr); +// +// setTimeout(function(){ +// me.getApplication().getController('Toolbar').fillTextArt(); +// }, 50); +// +// setTimeout(function(){ +// me.getApplication().getController('RightMenu').fillTextArt(); +// }, 50); + + }, + + updateThemeColors: function() { +// var me = this; +// setTimeout(function(){ +// me.getApplication().getController('RightMenu').UpdateThemeColors(); +// }, 50); +// setTimeout(function(){ +// me.getApplication().getController('DocumentHolder').getView('DocumentHolder').updateThemeColors(); +// }, 50); +// +// setTimeout(function(){ +// me.getApplication().getController('Toolbar').updateThemeColors(); +// }, 50); + }, + + onSendThemeColors: function(colors, standart_colors) { + Common.Utils.ThemeColor.setColors(colors, standart_colors); +// if (window.styles_loaded) { +// this.updateThemeColors(); +// this.fillTextArt(this.api.asc_getTextArtPreviews()); +// } + }, + + loadLanguages: function() { +// var langs = this.api.asc_getSpellCheckLanguages(); +// this.getApplication().getController('DocumentHolder').getView('DocumentHolder').setLanguages(langs); +// this.getApplication().getController('Statusbar').setLanguages(langs); + }, + + onAdvancedOptions: function(advOptions) { +// var type = advOptions.asc_getOptionId(), +// me = this, dlg; +// if (type == Asc.c_oAscAdvancedOptionsID.TXT) { +// dlg = new Common.Views.OpenDialog({ +// type: type, +// codepages: advOptions.asc_getOptions().asc_getCodePages(), +// settings: advOptions.asc_getOptions().asc_getRecommendedSettings(), +// handler: function (encoding) { +// me.isShowOpenDialog = false; +// if (me && me.api) { +// me.api.asc_setAdvancedOptions(type, new Asc.asc_CTXTAdvancedOptions(encoding)); +// me.loadMask && me.loadMask.show(); +// } +// } +// }); +// } else if (type == Asc.c_oAscAdvancedOptionsID.DRM) { +// dlg = new Common.Views.OpenDialog({ +// type: type, +// handler: function (value) { +// me.isShowOpenDialog = false; +// if (me && me.api) { +// me.api.asc_setAdvancedOptions(type, new Asc.asc_CDRMAdvancedOptions(value)); +// me.loadMask && me.loadMask.show(); +// } +// } +// }); +// } +// if (dlg) { +// this.isShowOpenDialog = true; +// this.loadMask && this.loadMask.hide(); +// this.onLongActionEnd(Asc.c_oAscAsyncActionType.BlockInteraction, LoadingDocument); +// dlg.show(); +// } + }, + + onTryUndoInFastCollaborative: function() { +// var val = window.localStorage.getItem("de-hide-try-undoredo"); +// if (!(val && parseInt(val) == 1)) +// Common.UI.info({ +// width: 500, +// msg: this.textTryUndoRedo, +// iconCls: 'info', +// buttons: ['custom', 'cancel'], +// primary: 'custom', +// customButtonText: this.textStrict, +// dontshow: true, +// callback: _.bind(function(btn, dontshow){ +// if (dontshow) window.localStorage.setItem("de-hide-try-undoredo", 1); +// if (btn == 'custom') { +// Common.localStorage.setItem("de-settings-coauthmode", 0); +// this.api.asc_SetFastCollaborative(false); +// this._state.fastCoauth = false; +// Common.localStorage.setItem("de-settings-showchanges-strict", 'last'); +// this.api.SetCollaborativeMarksShowType(Asc.c_oAscCollaborativeMarksShowType.LastChanges); +// } +// this.fireEvent('editcomplete', this); +// }, this) +// }); + }, + + onAuthParticipantsChanged: function(users) { + var length = 0; + _.each(users, function(item){ + if (!item.asc_getView()) + length++; + }); + this._state.usersCount = length; + }, + + applySettings: function() { + if (this.appOptions.isEdit && this.appOptions.canLicense && !this.appOptions.isOffline && this.appOptions.canCoAuthoring) { + var value = Common.localStorage.getItem("de-settings-coauthmode"), + oldval = this._state.fastCoauth; + this._state.fastCoauth = (value===null || parseInt(value) == 1); + if (this._state.fastCoauth && !oldval) + this.synchronizeChanges(); + } + }, + + onDocumentName: function(name) { +// this.getApplication().getController('Viewport').getView('Common.Views.Header').setDocumentCaption(name); + this.updateWindowTitle(true); + }, + + onPrint: function() { + if (!this.appOptions.canPrint) return; + + if (this.api) + this.api.asc_Print(Common.Utils.isChrome || Common.Utils.isSafari || Common.Utils.isOpera); // if isChrome or isSafari or isOpera == true use asc_onPrintUrl event + Common.component.Analytics.trackEvent('Print'); + }, + + onPrintUrl: function(url) { + if (this.iframePrint) { + this.iframePrint.parentNode.removeChild(this.iframePrint); + this.iframePrint = null; + } + if (!this.iframePrint) { + var me = this; + this.iframePrint = document.createElement("iframe"); + this.iframePrint.id = "id-print-frame"; + this.iframePrint.style.display = 'none'; + this.iframePrint.style.visibility = "hidden"; + this.iframePrint.style.position = "fixed"; + this.iframePrint.style.right = "0"; + this.iframePrint.style.bottom = "0"; + document.body.appendChild(this.iframePrint); + this.iframePrint.onload = function() { + me.iframePrint.contentWindow.focus(); + me.iframePrint.contentWindow.print(); + me.iframePrint.contentWindow.blur(); + window.focus(); + }; + } + if (url) this.iframePrint.src = url; + }, + + leavePageText: 'You have unsaved changes in this document. Click \'Stay on this Page\' then \'Save\' to save them. Click \'Leave this Page\' to discard all the unsaved changes.', + defaultTitleText: 'ONLYOFFICE Document Editor', + criticalErrorTitle: 'Error', + notcriticalErrorTitle: 'Warning', + errorDefaultMessage: 'Error code: %1', + criticalErrorExtText: 'Press "Ok" to back to document list.', + openTitleText: 'Opening Document', + openTextText: 'Opening document...', + saveTitleText: 'Saving Document', + saveTextText: 'Saving document...', + loadFontsTitleText: 'Loading Data', + loadFontsTextText: 'Loading data...', + loadImagesTitleText: 'Loading Images', + loadImagesTextText: 'Loading images...', + loadFontTitleText: 'Loading Data', + loadFontTextText: 'Loading data...', + loadImageTitleText: 'Loading Image', + loadImageTextText: 'Loading image...', + downloadTitleText: 'Downloading Document', + downloadTextText: 'Downloading document...', + printTitleText: 'Printing Document', + printTextText: 'Printing document...', + uploadImageTitleText: 'Uploading Image', + uploadImageTextText: 'Uploading image...', + savePreparingText: 'Preparing to save', + savePreparingTitle: 'Preparing to save. Please wait...', + uploadImageSizeMessage: 'Maximium image size limit exceeded.', + uploadImageExtMessage: 'Unknown image format.', + uploadImageFileCountMessage: 'No images uploaded.', + reloadButtonText: 'Reload Page', + unknownErrorText: 'Unknown error.', + convertationTimeoutText: 'Convertation timeout exceeded.', + downloadErrorText: 'Download failed.', + unsupportedBrowserErrorText : 'Your browser is not supported.', + splitMaxRowsErrorText: 'The number of rows must be less than %1', + splitMaxColsErrorText: 'The number of columns must be less than %1', + splitDividerErrorText: 'The number of rows must be a divisor of %1', + requestEditFailedTitleText: 'Access denied', + requestEditFailedMessageText: 'Someone is editing this document right now. Please try again later.', + txtNeedSynchronize: 'You have an updates', + textLoadingDocument: 'Loading document', + warnBrowserZoom: 'Your browser\'s current zoom setting is not fully supported. Please reset to the default zoom by pressing Ctrl+0.', + warnBrowserIE9: 'The application has low capabilities on IE9. Use IE10 or higher', + applyChangesTitleText: 'Loading Data', + applyChangesTextText: 'Loading data...', + errorKeyEncrypt: 'Unknown key descriptor', + errorKeyExpire: 'Key descriptor expired', + errorUsersExceed: 'Count of users was exceed', + errorCoAuthoringDisconnect: 'Server connection lost. You can\'t edit anymore.', + errorFilePassProtect: 'The document is password protected.', + txtBasicShapes: 'Basic Shapes', + txtFiguredArrows: 'Figured Arrows', + txtMath: 'Math', + txtCharts: 'Charts', + txtStarsRibbons: 'Stars & Ribbons', + txtCallouts: 'Callouts', + txtButtons: 'Buttons', + txtRectangles: 'Rectangles', + txtLines: 'Lines', + txtEditingMode: 'Set editing mode...', + textAnonymous: 'Anonymous', + loadingDocumentTitleText: 'Loading document', + loadingDocumentTextText: 'Loading document...', + warnProcessRightsChange: 'You have been denied the right to edit the file.', + errorProcessSaveResult: 'Saving is failed.', + textCloseTip: '\nClick to close the tip.', + textShape: 'Shape', + errorStockChart: 'Incorrect row order. To build a stock chart place the data on the sheet in the following order:
opening price, max price, min price, closing price.', + errorDataRange: 'Incorrect data range.', + errorDatabaseConnection: 'External error.
Database connection error. Please, contact support.', + titleUpdateVersion: 'Version changed', + errorUpdateVersion: 'The file version has been changed. The page will be reloaded.', + errorUserDrop: 'The file cannot be accessed right now.', + txtDiagramTitle: 'Chart Title', + txtXAxis: 'X Axis', + txtYAxis: 'Y Axis', + txtSeries: 'Seria', + errorMailMergeLoadFile: 'Loading failed', + mailMergeLoadFileText: 'Loading Data Source...', + mailMergeLoadFileTitle: 'Loading Data Source', + errorMailMergeSaveFile: 'Merge failed.', + downloadMergeText: 'Downloading...', + downloadMergeTitle: 'Downloading', + sendMergeTitle: 'Sending Merge', + sendMergeText: 'Sending Merge...', + txtArt: 'Your text here', + errorConnectToServer: ' The document could not be saved. Please check connection settings or contact your administrator.
When you click the \'OK\' button, you will be prompted to download the document.

' + + 'Find more information about connecting Document Server here', + textTryUndoRedo: 'The Undo/Redo functions are disabled for the Fast co-editing mode.
Click the \'Strict mode\' button to switch to the Strict co-editing mode to edit the file without other users interference and send your changes only after you save them. You can switch between the co-editing modes using the editor Advanced settings.', + textStrict: 'Strict mode', + txtErrorLoadHistory: 'Loading history failed', + textBuyNow: 'Visit website', + textNoLicenseTitle: 'ONLYOFFICE open source version', + warnNoLicense: 'You are using an open source version of ONLYOFFICE. The version has limitations for concurrent connections to the document server (20 connections at a time).
If you need more please consider purchasing a commercial license.', + textContactUs: 'Contact sales', + errorViewerDisconnect: 'Connection is lost. You can still view the document,
but will not be able to download until the connection is restored.', + warnLicenseExp: 'Your license has expired.
Please update your license and refresh the page.', + titleLicenseExp: 'License expired', + openErrorText: 'An error has occurred while opening the file', + saveErrorText: 'An error has occurred while saving the file' } - }, - - _isSupport: function(){ - return (Ext.browser.is.WebKit && (Ext.os.is.iOS || Ext.os.is.Android || Ext.os.is.Desktop)); - }, - - _fillUserInfo: function(info, lang, defname) { - var _user = info || {}; - !_user.id && (_user.id = ('uid-' + Date.now())); - _.isEmpty(_user.firstname) && _.isEmpty(_user.lastname) - && (_user.firstname = defname); - - _user.fullname = /^ru/.test(lang) ? - _user.lastname + ' ' + _user.firstname : _user.firstname + ' ' + _user.lastname; - - return _user; - }, - - printText: 'Printing...', - criticalErrorTitle: 'Error', - notcriticalErrorTitle: 'Warning', - errorDefaultMessage: 'Error code: %1', - criticalErrorExtText: 'Press "Ok" to reload view page.', - uploadImageSizeMessage: 'Maximium image size limit exceeded.', - uploadImageExtMessage: 'Unknown image format.', - uploadImageFileCountMessage: 'No images uploaded.', - unknownErrorText: 'Unknown error.', - convertationTimeoutText: 'Convertation timeout exceeded.', - convertationErrorText: 'Convertation failed.', - downloadErrorText: 'Download failed.', - unsupportedBrowserErrorText : 'Your browser is not supported.', - errorKeyEncrypt: 'Unknown key descriptor', - errorKeyExpire: 'Key descriptor expired', - errorUsersExceed: 'Count of users was exceed', - textAnonymous: 'Anonymous', - textLoadingDocument: 'Loading document' + })(), SSE.Controllers.Main || {})) }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/controller/Settings.js b/apps/spreadsheeteditor/mobile/app/controller/Settings.js new file mode 100644 index 000000000..3d4baa225 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/controller/Settings.js @@ -0,0 +1,272 @@ +/* + * + * (c) Copyright Ascensio System Limited 2010-2016 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, + * EU, LV-1021. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * + */ + +/** + * Settings.js + * Document Editor + * + * Created by Alexander Yuzhin on 10/7/16 + * Copyright (c) 2016 Ascensio System SIA. All rights reserved. + * + */ + + +define([ + 'core', + 'documenteditor/mobile/app/view/Settings' +], function (core) { + 'use strict'; + + DE.Controllers.Settings = Backbone.Controller.extend((function() { + // private + var rootView, + inProgress, + infoObj, + modalView; + + return { + models: [], + collections: [], + views: [ + 'Settings' + ], + + initialize: function () { + Common.SharedSettings.set('readerMode', false); + Common.NotificationCenter.on('settingscontainer:show', _.bind(this.initEvents, this)); + + this.addListeners({ + 'Settings': { + 'page:show' : this.onPageShow + } + }); + }, + + setApi: function (api) { + var me = this; + me.api = api; + + me.api.asc_registerCallback('asc_onGetDocInfoStart', _.bind(me._onApiGetDocInfoStart, me)); + me.api.asc_registerCallback('asc_onGetDocInfoStop', _.bind(me._onApiGetDocInfoEnd, me)); + me.api.asc_registerCallback('asc_onDocInfo', _.bind(me._onApiDocInfo, me)); + me.api.asc_registerCallback('asc_onGetDocInfoEnd', _.bind(me._onApiGetDocInfoEnd, me)); + me.api.asc_registerCallback('asc_onDocumentName', _.bind(me._onApiDocumentName, me)); + }, + + onLaunch: function () { + this.createView('Settings').render(); + }, + + setMode: function (mode) { + this.getView('Settings').setMode(mode); + }, + + initEvents: function () { + + + // $('#font-bold').single('click', _.bind(me.onBold, me)); + // $('#font-italic').single('click', _.bind(me.onItalic, me)); + // $('#font-underline').single('click', _.bind(me.onUnderline, me)); + // $('#font-strikethrough').single('click', _.bind(me.onStrikethrough, me)); + }, + + rootView : function() { + return rootView; + }, + + showModal: function() { + if (Common.SharedSettings.get('phone')) { + modalView = uiApp.popup( + '
' + + '
' + + '
' + + this.getView('Settings').rootLayout() + + '
' + + '
' + + '
' + ); + } else { + modalView = uiApp.popover( + '
' + + '
' + + '
' + + '
' + + '
' + + this.getView('Settings').rootLayout() + + '
' + + '
' + + '
' + + '
', + $$('#toolbar-settings') + ); + } + + if (Framework7.prototype.device.android === true) { + $$('.view.settings-root-view.navbar-through').removeClass('navbar-through').addClass('navbar-fixed'); + $$('.view.settings-root-view .navbar').prependTo('.view.settings-root-view > .pages > .page'); + } + + rootView = uiApp.addView('.settings-root-view', { + dynamicNavbar: true + }); + + Common.NotificationCenter.trigger('settingscontainer:show'); + this.onPageShow(this.getView('Settings')); + }, + + hideModal: function() { + if (modalView) { + uiApp.closeModal(modalView); + } + }, + + onPageShow: function(view) { + var me = this; + $('#settings-search').single('click', _.bind(me._onSearch, me)); + $('#settings-readermode input:checkbox').single('change', _.bind(me._onReaderMode, me)); + $('#settings-edit-document').single('click', _.bind(me._onEditDocumet, me)); + $(modalView).find('.formats a').single('click', _.bind(me._onSaveFormat, me)); + }, + + + // API handlers + + _onApiGetDocInfoStart: function () { + var me = this; + inProgress = true; + infoObj = { + PageCount : 0, + WordsCount : 0, + ParagraphCount : 0, + SymbolsCount : 0, + SymbolsWSCount : 0 + }; + + _.defer(function(){ + if (!inProgress) + return; + + $('#statistic-pages').html(me.txtLoading); + $('#statistic-words').html(me.txtLoading); + $('#statistic-paragraphs').html(me.txtLoading); + $('#statistic-symbols').html(me.txtLoading); + $('#statistic-spaces').html(me.txtLoading); + }, 2000); + }, + + _onApiGetDocInfoEnd: function() { + inProgress = false; + + $('#statistic-pages').html(infoObj.PageCount); + $('#statistic-words').html(infoObj.WordsCount); + $('#statistic-paragraphs').html(infoObj.ParagraphCount); + $('#statistic-symbols').html(infoObj.SymbolsCount); + $('#statistic-spaces').html(infoObj.SymbolsWSCount); + }, + + _onApiDocInfo: function(obj) { + if (obj) { + if (obj.get_PageCount() > -1) + infoObj.PageCount = obj.get_PageCount(); + if (obj.get_WordsCount() > -1) + infoObj.WordsCount = obj.get_WordsCount(); + if (obj.get_ParagraphCount() > -1) + infoObj.ParagraphCount = obj.get_ParagraphCount(); + if (obj.get_SymbolsCount() > -1) + infoObj.SymbolsCount = obj.get_SymbolsCount(); + if (obj.get_SymbolsWSCount() > -1) + infoObj.SymbolsWSCount = obj.get_SymbolsWSCount(); + } + }, + + _onApiDocumentName: function(name) { + $('#settings-document-title').html(name ? name : '-'); + }, + + _onEditDocumet: function() { + Common.Gateway.requestEditRights(); + }, + + _onSearch: function (e) { + var toolbarView = DE.getController('Toolbar').getView('Toolbar'); + + if (toolbarView) { + toolbarView.showSearch(); + } + + this.hideModal(); + }, + + _onReaderMode: function (e) { + var me = this; + + Common.SharedSettings.set('readerMode', !Common.SharedSettings.get('readerMode')); + + me.api && me.api.ChangeReaderMode(); + + if (Common.SharedSettings.get('phone')) { + _.defer(function () { + me.hideModal(); + }, 1000); + } + + Common.NotificationCenter.trigger('readermode:change', Common.SharedSettings.get('readerMode')); + }, + + _onSaveFormat: function(e) { + var me = this, + format = $(e.currentTarget).data('format'); + + if (format) { + if (format == Asc.c_oAscFileType.TXT) { + uiApp.confirm( + me.warnDownloadAs, + me.notcriticalErrorTitle, + function () { + me.api.asc_DownloadAs(format); + } + ); + } else { + me.api.asc_DownloadAs(format); + } + + me.hideModal(); + } + }, + + txtLoading : 'Loading...', + notcriticalErrorTitle : 'Warning', + warnDownloadAs : 'If you continue saving in this format all features except the text will be lost.
Are you sure you want to continue?' + } + })()); +}); diff --git a/apps/spreadsheeteditor/mobile/app/controller/Toolbar.js b/apps/spreadsheeteditor/mobile/app/controller/Toolbar.js new file mode 100644 index 000000000..494bf9363 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/controller/Toolbar.js @@ -0,0 +1,224 @@ +/* + * + * (c) Copyright Ascensio System Limited 2010-2016 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, + * EU, LV-1021. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * + */ + +/** + * Toolbar.js + * Document Editor + * + * Created by Maxim Kadushkin on 11/15/16 + * Copyright (c) 2016 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'core', + 'spreadsheeteditor/mobile/app/view/Toolbar' +], function (core) { + 'use strict'; + + SSE.Controllers.Toolbar = Backbone.Controller.extend((function() { + // private + var _backUrl; + + return { + models: [], + collections: [], + views: [ + 'Toolbar' + ], + + initialize: function() { + this.addListeners({ + 'Toolbar': { + 'searchbar:show' : this.onSearchbarShow, + 'searchbar:render' : this.onSearchbarRender + } + }); + + Common.Gateway.on('init', _.bind(this.loadConfig, this)); + }, + + loadConfig: function (data) { + if (data && data.config && data.config.canBackToFolder !== false && + data.config.customization && data.config.customization.goback && data.config.customization.goback.url) { + _backUrl = data.config.customization.goback.url; + + $('#document-back').show().single('click', _.bind(this.onBack, this)); + } + }, + + setApi: function(api) { + this.api = api; + + // this.api.asc_registerCallback('asc_onCanUndo', _.bind(this.onApiCanRevert, this, 'undo')); + // this.api.asc_registerCallback('asc_onCanRedo', _.bind(this.onApiCanRevert, this, 'redo')); + }, + + setMode: function (mode) { + this.getView('Toolbar').setMode(mode); + }, + + onLaunch: function() { + var me = this; + me.createView('Toolbar').render(); + + $('#toolbar-undo').single('click', _.bind(me.onUndo, me)); + $('#toolbar-redo').single('click', _.bind(me.onRedo, me)); + }, + + setDocumentTitle: function (title) { + $('#toolbar-title').html(title); + }, + + // Search + + onSearchbarRender: function(bar) { + var me = this; + me.searchBar = uiApp.searchbar('.searchbar.document', { + customSearch: true, + onSearch : _.bind(me.onSearchChange, me), + onEnable : _.bind(me.onSearchEnable, me), + onDisable : _.bind(me.onSearchDisable, me), + onClear : _.bind(me.onSearchClear, me) + }); + + me.searchPrev = $('.searchbar.document .prev'); + me.searchNext = $('.searchbar.document .next'); + + me.searchPrev.on('click', _.bind(me.onSearchPrev, me)); + me.searchNext.on('click', _.bind(me.onSearchNext, me)); + }, + + onSearchbarShow: function(bar) { + // + }, + + onSearchChange: function(search) { + var me = this, + isEmpty = (search.query.trim().length < 1); + + _.each([me.searchPrev, me.searchNext], function(btn) { + btn[isEmpty ? 'addClass' : 'removeClass']('disabled'); + }); + }, + + onSearchEnable: function(search) { + // + }, + + onSearchDisable: function(search) { + // + }, + + onSearchClear: function(search) { +// window.focus(); +// document.activeElement.blur(); + }, + + onSearchPrev: function(btn) { + this.onQuerySearch(this.searchBar.query, 'back'); + }, + + onSearchNext: function(btn) { + this.onQuerySearch(this.searchBar.query, 'next'); + }, + + onQuerySearch: function(query, direction, opts) { + if (query && query.length) { + // if (!this.api.asc_findText(query, direction != 'back', opts && opts.matchcase, opts && opts.matchword)) { + var me = this; + uiApp.alert( + '', + me.textNoTextFound, + function () { + me.searchBar.input.focus(); + } + ); + // } + } + }, + + // Handlers + + onBack: function (e) { + var me = this; + + if (me.api.asc_isDocumentModified()) { + uiApp.modal({ + title : me.dlgLeaveTitleText, + text : me.dlgLeaveMsgText, + verticalButtons: true, + buttons : [ + { + text: me.leaveButtonText, + onClick: function() { + window.parent.location.href = _backUrl; + } + }, + { + text: me.stayButtonText, + bold: true + } + ] + }); + } else { + window.parent.location.href = _backUrl; + } + }, + + onUndo: function (e) { + if ( this.api ) this.api.asc_Undo(); + }, + + onRedo: function (e) { + if ( this.api ) this.api.asc_Redo(); + }, + + // API handlers + + onApiCanRevert: function(which, can) { + if (which == 'undo') { + $('#toolbar-undo').toggleClass('disabled', !can); + } else { + $('#toolbar-redo').toggleClass('disabled', !can); + } + }, + + dlgLeaveTitleText : 'You leave the application', + dlgLeaveMsgText : 'You have unsaved changes in this document. Click \'Stay on this Page\' to await the autosave of the document. Click \'Leave this Page\' to discard all the unsaved changes.', + leaveButtonText : 'Leave this Page', + stayButtonText : 'Stay on this Page', + textNoTextFound : 'Text not found', + } + })()); +}); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/template/AddImage.template b/apps/spreadsheeteditor/mobile/app/template/AddImage.template new file mode 100644 index 000000000..c6d18ccc3 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/template/AddImage.template @@ -0,0 +1,70 @@ + +
+
+ +
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Link Settings
+
+
+
+
+
Address
+
+
    +
  • +
    +
    +
    + +
    +
    +
    +
    • +
+
+
+ <% if (android) { %> + Insert Image + <% } else { %> + + <% } %> +
+
+
+
\ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/template/AddOther.template b/apps/spreadsheeteditor/mobile/app/template/AddOther.template new file mode 100644 index 000000000..a4c835231 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/template/AddOther.template @@ -0,0 +1,261 @@ + +
+
+ +
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Section Break
+
+
+
+
+
+ +
+
+
+
+ + + + + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Position
+
+
+
+
+
+ +
+
+
+
\ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/template/AddShape.template b/apps/spreadsheeteditor/mobile/app/template/AddShape.template new file mode 100644 index 000000000..252e4163d --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/template/AddShape.template @@ -0,0 +1,14 @@ + +
+
+ <% _.each(shapes, function(row) { %> + + <% }); %> +
+
\ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/template/AddTable.template b/apps/spreadsheeteditor/mobile/app/template/AddTable.template new file mode 100644 index 000000000..69398316d --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/template/AddTable.template @@ -0,0 +1,12 @@ + +
+
+ +
+
\ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/template/EditChart.template b/apps/spreadsheeteditor/mobile/app/template/EditChart.template new file mode 100644 index 000000000..acaa8caf0 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/template/EditChart.template @@ -0,0 +1,382 @@ + +
+
+ +
+
+ <% if (!android) { %> + + <% } else { %> + Remove Chart + <% } %> +
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Reorder
+
<% if (phone) { %><% } %>
+
+
+
+
+
+ +
+
+
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Wrap
+
<% if (phone) { %><% } %>
+
+
+
+
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
Align
+
+
    +
  • +
    +
    +
    + + + +
    +
    +
    +
    • +
+
+
+
    +
  • +
    +
    +
    Move with Text
    +
    + +
    +
    +
    +
    • +
  • +
    +
    +
    Allow Overlap
    +
    + +
    +
    +
    +
    • +
+
+
Distance from text
+
+
    +
  • +
    +
    +
    +
    + +
    +
    +
    0 pt
    +
    +
    +
    • +
+
+
+
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
+ <% if (android) { %> +
+
+ Type + Style + Fill + Border +
+
+ <% } else { %> +
+ Type + Style + Fill + Border +
+ <% } %> +
+
<% if (phone) { %><% } %>
+
+
+
+
+
+
+ <% _.each(types, function(row) { %> +
    + <% _.each(row, function(type) { %> +
  • +
    +
    • + <% }); %> +
+ <% }); %> +
+
+
+
    +
  • +
    +
    +
    +
    • +
+
+
+
+ +
+
+
+ +
+
+
+
+
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Color
+
<% if (phone) { %><% } %>
+
+
+
+
+ +
+
+
\ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/template/EditHyperlink.template b/apps/spreadsheeteditor/mobile/app/template/EditHyperlink.template new file mode 100644 index 000000000..82a4d75ea --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/template/EditHyperlink.template @@ -0,0 +1,52 @@ + + \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/template/EditImage.template b/apps/spreadsheeteditor/mobile/app/template/EditImage.template new file mode 100644 index 000000000..00e4d94f4 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/template/EditImage.template @@ -0,0 +1,366 @@ + +
+
+ +
+
+ +
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Reorder
+
<% if (phone) { %><% } %>
+
+
+
+
+
+ +
+
+
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Wrap
+
<% if (phone) { %><% } %>
+
+
+
+
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
Align
+
+
    +
  • +
    +
    +
    + + + +
    +
    +
    +
    • +
+
+
+
    +
  • +
    +
    +
    Move with Text
    +
    + +
    +
    +
    +
    • +
  • +
    +
    +
    Allow Overlap
    +
    + +
    +
    +
    +
    • +
+
+
Distance from text
+
+
    +
  • +
    +
    +
    +
    + +
    +
    +
    0 pt
    +
    +
    +
    • +
+
+
+
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Replace
+
<% if (phone) { %><% } %>
+
+
+
+
+
+ +
+
+
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Link Settings
+
+
+
+
+
Address
+
+
    +
  • +
    +
    +
    + +
    +
    +
    +
    • +
+
+
+ <% if (android) { %> + Replace Image + <% } else { %> + + <% } %> +
+
+
+
\ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/template/EditParagraph.template b/apps/spreadsheeteditor/mobile/app/template/EditParagraph.template new file mode 100644 index 000000000..335ee60b2 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/template/EditParagraph.template @@ -0,0 +1,172 @@ + +
+
+ +
+
+ +
+
Paragraph styles
+
+ +
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Background
+
<% if (phone) { %><% } %>
+
+
+
+
+
+
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Advanced
+
<% if (phone) { %><% } %>
+
+
+
+
+
Distance from text
+
+
    +
  • +
    +
    +
    Before
    +
    + <% if (!android) { %><% } %> +

    + <% if (android) { %><% } else { %>-<% } %> + <% if (android) { %><% } %> + <% if (android) { %><% } else { %>+<% } %> +

    +
    +
    +
    +
    • +
  • +
    +
    +
    After
    +
    + <% if (!android) { %><% } %> +

    + <% if (android) { %><% } else { %>-<% } %> + <% if (android) { %><% } %> + <% if (android) { %><% } else { %>+<% } %> +

    +
    +
    +
    +
    • +
+
+
+
    +
  • +
    +
    +
    Space Between Paragraphs
    +
    + +
    +
    +
    +
    • +
+
+
+
    +
  • +
    +
    +
    Page Break Before
    +
    + +
    +
    +
    +
    • +
  • +
    +
    +
    Orphan Control
    +
    + +
    +
    +
    +
    • +
  • +
    +
    +
    Keep Lines Together
    +
    + +
    +
    +
    +
    • +
  • +
    +
    +
    Keep with Next
    +
    + +
    +
    +
    +
    • +
+
+
+
+
\ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/template/EditShape.template b/apps/spreadsheeteditor/mobile/app/template/EditShape.template new file mode 100644 index 000000000..aacee4a09 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/template/EditShape.template @@ -0,0 +1,410 @@ + +
+
+ +
+
+ +
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Reorder
+
<% if (phone) { %><% } %>
+
+
+
+
+
+ +
+
+
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Replace
+
<% if (phone) { %><% } %>
+
+
+
+
+ <% _.each(shapes, function(row) { %> +
    + <% _.each(row, function(shape) { %> +
  • +
    +
    • + <% }); %> +
+ <% }); %> +
+
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Wrap
+
<% if (phone) { %><% } %>
+
+
+
+
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
Align
+
+
    +
  • +
    +
    +
    + + + +
    +
    +
    +
    • +
+
+
+
    +
  • +
    +
    +
    Move with Text
    +
    + +
    +
    +
    +
    • +
  • +
    +
    +
    Allow Overlap
    +
    + +
    +
    +
    +
    • +
+
+
Distance from text
+
+
    +
  • +
    +
    +
    +
    + +
    +
    +
    0 pt
    +
    +
    +
    • +
+
+
+
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
+ <% if (android) { %> +
+
+ Fill + Border + Effects +
+
+ <% } else { %> +
+ Fill + Border + Effects +
+ <% } %> +
+
<% if (phone) { %><% } %>
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+
    +
  • +
    Opacity
    +
    +
    +
    +
    + +
    +
    +
    0 %
    +
    +
    +
    • +
+
+
+
+
+
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Color
+
<% if (phone) { %><% } %>
+
+
+
+
+ +
+
+
\ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/template/EditTable.template b/apps/spreadsheeteditor/mobile/app/template/EditTable.template new file mode 100644 index 000000000..bb34b2ff2 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/template/EditTable.template @@ -0,0 +1,453 @@ + +
+
+ + <% if (android) { %> + Remove Table + <% } %> +
+
+ +
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Wrap
+
<% if (phone) { %><% } %>
+
+
+
+
+
+
    +
  • + +
    • +
  • + +
    • +
+
+
+
    +
  • +
    +
    +
    Move with Text
    +
    + +
    +
    +
    +
    • +
+
+
Distance from text
+
+
    +
  • +
    +
    +
    +
    + +
    +
    +
    0 pt
    +
    +
    +
    • +
+
+
Align
+
+
    +
  • +
    +
    +
    + + + +
    +
    +
    +
    • +
+
+
+
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Options
+
<% if (phone) { %><% } %>
+
+
+
+
+
+
    +
  • +
    +
    +
    Repeat as Header Row
    +
    + +
    +
    +
    +
    • +
  • +
    +
    +
    Resize to Fit Content
    +
    + +
    +
    +
    +
    • +
+
+
Cell margins
+
+
    +
  • +
    +
    +
    +
    + +
    +
    +
    0 pt
    +
    +
    +
    • +
+
+
+
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
+ <% if (android) { %> +
+
+ Style + Fill + Border +
+
+ <% } else { %> +
+ Style + Fill + Border +
+ <% } %> +
+
<% if (phone) { %><% } %>
+
+
+
+
+
+
+
+
    +
  • +
    +
    +
    +
    • +
+
+
+ +
+
+
+ +
+
+
+
    +
  • +
    Size
    +
    +
    +
    +
    + +
    +
    +
    0 pt
    +
    +
    +
    • +
  • + +
    +
    +
    Color
    +
    +
    +
    +     +
    • +
  • +
    +
    +
    + + + + + +
    +
    +
    +
    + + + + + +
    +
    +
    +
    • +
+
+
+
+
+
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Options
+
<% if (phone) { %><% } %>
+
+
+
+
+
+
    +
  • +
    +
    +
    Header Row
    +
    + +
    +
    +
    +
    • +
  • +
    +
    +
    Total Row
    +
    + +
    +
    +
    +
    • +
  • +
    +
    +
    Banded Row
    +
    + +
    +
    +
    +
    • +
+
+
+
    +
  • +
    +
    +
    First Column
    +
    + +
    +
    +
    +
    • +
  • +
    +
    +
    Last Column
    +
    + +
    +
    +
    +
    • +
  • +
    +
    +
    Banded Column
    +
    + +
    +
    +
    +
    • +
+
+
+
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Color
+
<% if (phone) { %><% } %>
+
+
+
+
+ +
+
+
\ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/template/EditText.template b/apps/spreadsheeteditor/mobile/app/template/EditText.template new file mode 100644 index 000000000..df738b086 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/template/EditText.template @@ -0,0 +1,408 @@ + +
+
+ +
+
+ +
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Fonts
+
<% if (phone) { %><% } %>
+
+
+
+
+
+
    +
  • +
    +
    +
    Size
    +
    + <% if (!android) { %><% } %> +

    + <% if (android) { %><% } else { %>-<% } %> + <% if (android) { %><% } %> + <% if (android) { %><% } else { %>+<% } %> +

    +
    +
    +
    +
    • +
+
+
Fonts
+
+ +
+
+
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Font Colors
+
<% if (phone) { %><% } %>
+
+
+
+
+
+ +
+
+
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Highlight Colors
+
<% if (phone) { %><% } %>
+
+
+
+
+
+
+
+ + + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Additional
+
<% if (phone) { %><% } %>
+
+
+
+
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
    +
  • +
    +
    +
    Letter Spacing
    +
    + <% if (!android) { %><% } %> +

    + <% if (android) { %><% } else { %>-<% } %> + <% if (android) { %><% } %> + <% if (android) { %><% } else { %>+<% } %> +

    +
    +
    +
    +
    • +
+
+
+
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Line Spacing
+
<% if (phone) { %><% } %>
+
+
+
+
+
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Bullets
+
<% if (phone) { %><% } %>
+
+
+
+
+
+ <% _.each(bullets, function(row) { %> +
    + <% _.each(row, function(bullet) { %> +
  • + <% if (bullet.thumb.length < 1) { %> +
    + <% } else { %> +
    + <% } %> +
    • + <% }); %> +
+ <% }); %> +
+
+
+
+ + +
+
+
+
<% if (!android) { %>Back<% } %>
+
Numbers
+
<% if (phone) { %><% } %>
+
+
+
+
+
+ <% _.each(numbers, function(row) { %> +
    + <% _.each(row, function(number) { %> +
  • + <% if (number.thumb.length < 1) { %> +
    + <% } else { %> +
    + <% } %> +
    • + <% }); %> +
+ <% }); %> +
+
+
+
diff --git a/apps/spreadsheeteditor/mobile/app/template/Editor.template b/apps/spreadsheeteditor/mobile/app/template/Editor.template new file mode 100644 index 000000000..e01e15aef --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/template/Editor.template @@ -0,0 +1,10 @@ +
+
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/template/Settings.template b/apps/spreadsheeteditor/mobile/app/template/Settings.template new file mode 100644 index 000000000..7a099074e --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/template/Settings.template @@ -0,0 +1,358 @@ + +
+
+
+
Settings
+
<% if (phone) { %>Done<% } %>
+
+
+
+
+
+
+ +
+
+
+
+
+ + +
+
+
+
+ + + <% if (!android) { %> + Back + <% } %> + +
+
Document Info
+
+
+
+
+
+
Document title
+
+
    +
  • +
    +
    Loading...
    +
    +
    • +
+
+
Author
+
+
    +
  • +
    +
    Loading...
    +
    +
    • +
+
+
Create date
+
+
    +
  • +
    +
    Loading...
    +
    +
    • +
+
+
Statistic
+
+
    +
  • +
    +
    Pages
    +
    0
    +
    +
    • +
  • +
    +
    Paragraphs
    +
    0
    +
    +
    • +
  • +
    +
    Words
    +
    0
    +
    +
    • +
  • +
    +
    Symbols
    +
    0
    +
    +
    • +
  • +
    +
    Spaces
    +
    0
    +
    +
    • +
+
+
+
+
+
+ + +
+
+
+
+ + <% if (!android) { %>Back<% } %> + +
+
Download
+
+
+
+
+
+
Download As...
+
+ +
+
+
+
+
+ + +
+
+
+
+ + + <% if (!android) { %> + Back + <% } %> + +
+
Version History
+
+
+
+
+
+
Saved versions
+
+
+

Under construction

+
+
+
+
+
+
+ + +
+
+
+
+ + + <% if (!android) { %> + Back + <% } %> + +
+
About
+
+
+
+
+
+
+ +
+
+

DOCUMENT EDITOR

+

Version 4.1

+
+
+

Ascensio System SIA

+

Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021

+

support@onlyoffice.com

+

+371 660-16425

+

www.onlyoffice.com

+
+
+
+
+
\ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/template/Toolbar.template b/apps/spreadsheeteditor/mobile/app/template/Toolbar.template new file mode 100644 index 000000000..2b043110b --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/template/Toolbar.template @@ -0,0 +1,45 @@ + diff --git a/apps/spreadsheeteditor/mobile/app/view/DocumentHolder.js b/apps/spreadsheeteditor/mobile/app/view/DocumentHolder.js new file mode 100644 index 000000000..3d6e714bd --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/view/DocumentHolder.js @@ -0,0 +1,132 @@ +/* + * + * (c) Copyright Ascensio System Limited 2010-2016 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, + * EU, LV-1021. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * + */ + +/** + * DocumentHolder.js + * Document Editor + * + * Created by Maxim Kadushkin on 11/8/16 + * Copyright (c) 2016 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'jquery', + 'underscore', + 'backbone' +], function ($, _, Backbone) { + 'use strict'; + + SSE.Views.DocumentHolder = Backbone.View.extend((function() { + // private + var _anchorId = 'context-menu-target'; + + return { + el: '#editor_sdk', + + template: _.template('
'), + // Delegated events for creating new items, and clearing completed ones. + events: { + }, + + // Set innerHTML and get the references to the DOM elements + initialize: function() { + // + }, + + // Render layout + render: function() { + var el = $(this.el); + + el.append(this.template({ + // + })); + + // this.f7View = uiApp.addView('.view-main', { + // // params + // }); + + return this; + }, + + showMenu: function (items, posX, posY) { + if (items.length < 1) { + return; + } + + var menuItemTemplate = _.template([ + '<% _.each(menuItems, function(item) { %>', + '
  • <%= item.caption %>
    • ', + '<% }); %>' + ].join('')); + + $('#' + _anchorId) + .css('left', posX) + .css('top', posY); + + uiApp.closeModal('.document-menu.modal-in'); + + var popoverHTML = + '
    '+ + '
    '+ + '
    '+ + '
      '+ + menuItemTemplate({menuItems: items}) + + '
    '+ + '
    '+ + '
    '+ + '
    '; + uiApp.popover(popoverHTML, $('#' + _anchorId)); + + $('.modal-overlay').removeClass('modal-overlay-visible'); + + $('.document-menu li').single('click', _.buffered(function(e) { + var $target = $(e.currentTarget), + eventName = $target.data('event'); + + this.fireEvent('contextmenu:click', [this, eventName]); + }, 100, this)); + + // console.log('Show menu at position:', posX, posY); + }, + + hideMenu: function () { + $('#' + _anchorId) + .css('left', -1000) + .css('top', -1000); + + uiApp.closeModal('.document-menu.modal-in'); + } + } + })()); +}); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/view/Editor.js b/apps/spreadsheeteditor/mobile/app/view/Editor.js new file mode 100644 index 000000000..ad356718a --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/view/Editor.js @@ -0,0 +1,81 @@ +/* + * + * (c) Copyright Ascensio System Limited 2010-2016 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, + * EU, LV-1021. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * + */ + +/** + * Editor.js + * Document Editor + * + * Created by Maxim Kadushkin on 11/15/16 + * Copyright (c) 2016 Ascensio System SIA. All rights reserved. + * + */ + + +define([ + 'text!spreadsheeteditor/mobile/app/template/Editor.template', + 'jquery', + 'underscore', + 'backbone' +], function (editorTemplate, $, _, Backbone) { + 'use strict'; + + SSE.Views.Editor = Backbone.View.extend({ + el: 'body', + + // Compile our stats template + template: _.template(editorTemplate), + + // Delegated events for creating new items, and clearing completed ones. + events: { + }, + + // Set innerHTML and get the references to the DOM elements + initialize: function() { + // + }, + + // Render layout + render: function() { + var el = $(this.el); + el.html(this.template({ + backTitle: Framework7.prototype.device.android ? '' : '' + })); + + this.f7View = uiApp.addView('.view-main', { + // params + }); + + return this; + } + }); +}); \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/app/view/Toolbar.js b/apps/spreadsheeteditor/mobile/app/view/Toolbar.js new file mode 100644 index 000000000..4feca18db --- /dev/null +++ b/apps/spreadsheeteditor/mobile/app/view/Toolbar.js @@ -0,0 +1,190 @@ +/* + * + * (c) Copyright Ascensio System Limited 2010-2016 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, + * EU, LV-1021. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * + */ + +/** + * Toolbar.js + * Document Editor + * + * Created by Maxim Kadushkin on 11/15/16 + * Copyright (c) 2016 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'text!spreadsheeteditor/mobile/app/template/Toolbar.template', + 'jquery', + 'underscore', + 'backbone' +], function (toolbarTemplate, $, _, Backbone) { + 'use strict'; + + SSE.Views.Toolbar = Backbone.View.extend((function() { + // private + + return { + el: '.view-main', + + // Compile our stats template + template: _.template(toolbarTemplate), + + // Delegated events for creating new items, and clearing completed ones. + events: { + "click #toolbar-search" : "searchToggle", + "click #toolbar-edit" : "showEdition", + "click #toolbar-add" : "showInserts", + "click #toolbar-settings" : "showSettings" + }, + + // Set innerHTML and get the references to the DOM elements + initialize: function() { + var me = this; + + Common.NotificationCenter.on('readermode:change', function (reader) { + if (reader) { + me.hideSearch(); + $('#toolbar-search').addClass('disabled'); + } else { + $('#toolbar-search').removeClass('disabled'); + } + }); + }, + + // Render layout + render: function() { + var $el = $(this.el); + + $el.prepend(this.template({ + android : Common.SharedSettings.get('android'), + phone : Common.SharedSettings.get('phone'), + backTitle : Common.SharedSettings.get('android') ? '' : 'Back' + })); + + return this; + }, + + setMode: function (mode) { + var isEdit = (mode === 'edit'); + + if (isEdit) { + $('#toolbar-edit, #toolbar-add, #toolbar-undo, #toolbar-redo').show(); + } + }, + + // Search + searchToggle: function() { + if ($$('.searchbar.document').length > 0) { + this.hideSearch(); + } else { + this.showSearch(); + } + }, + + showSearch: function () { + var me = this, + searchBar = $$('.searchbar.document'); + + if (searchBar.length < 1) { + $(me.el).find('.pages .page').first().prepend(_.template( + '
    ' + + '
    ' + + '' + + '
    ' + + '

    ' + + '' + + '' + + '

    ' + + '
    ', {} + )); + me.fireEvent('searchbar:render', me); + + searchBar = $$('.searchbar.document'); + + if (Common.SharedSettings.get('android')) { + searchBar.find('.buttons-row').css('margin-left', '10px'); + searchBar.find('.buttons-row a').css('min-width', '0px'); + } else { + searchBar.find('.buttons-row .next').css('margin-left', '10px'); + } + + _.defer(function() { + uiApp.showNavbar(searchBar); + + searchBar.transitionEnd(function () { + if (!searchBar.hasClass('navbar-hidden')) { + me.fireEvent('searchbar:show', me); + $('.searchbar input').focus(); + } + }); + }, 10); + } + }, + + hideSearch: function () { + var me = this, + searchBar = $$('.searchbar.document'); + + if (searchBar.length > 0) { + // Animating + if (searchBar.hasClass('.navbar-hidding')) { + return; + } + + _.defer(function() { + searchBar.transitionEnd(function () { + me.fireEvent('searchbar:hide', me); + searchBar.remove(); + }); + + uiApp.hideNavbar(searchBar); + }, 10); + } + }, + + // Editor + showEdition: function () { + // SSE.getController('EditContainer').showModal(); + }, + + // Inserts + + showInserts: function () { + // SSE.getController('AddContainer').showModal(); + }, + + // Settings + showSettings: function () { + // SSE.getController('Settings').showModal(); + } + } + })()); +}); diff --git a/apps/spreadsheeteditor/mobile/index.html b/apps/spreadsheeteditor/mobile/index.html index d9a5f176a..6ff82ea43 100644 --- a/apps/spreadsheeteditor/mobile/index.html +++ b/apps/spreadsheeteditor/mobile/index.html @@ -1,13 +1,19 @@ - ONLYOFFICE Spreadsheet - - - + + + + + + + ONLYOFFICE Spreadsheets + + + + + - - + + + + +
    - - - - - - - - - - - - - - - - - - - - - - - - - - while (e = r.exec(q)) - urlParams[d(e[1])] = d(e[2]); - - return urlParams; - } - - function encodeUrlParam(str) { - return str.replace(/&/g, '&') - .replace(/"/g, '"') - .replace(/'/g, ''') - .replace(//g, '>'); - } - - var params = getUrlParams(), - lang = (params["lang"] || 'en').split("-")[0], - customer = params["customer"] ? ('
    ' + encodeUrlParam(params["customer"]) + '
    ') : '', - margin = (customer !== '') ? 50 : 20, - loading = 'Loading...', - logo = params["logo"] ? ((params["logo"] !== 'none') ? ('') : '') : null; - - if ( lang == 'de') loading = 'Ladevorgang...'; - else if ( lang == 'es') loading = 'Cargando...'; - else if ( lang == 'fr') loading = 'Chargement en cours...'; - else if ( lang == 'it') loading = 'Caricamento in corso...'; - else if ( lang == 'pt') loading = 'Carregando...'; - else if ( lang == 'ru') loading = 'Загрузка...'; - else if ( lang == 'sl') loading = 'Nalaganje...'; - else if ( lang == 'tr') loading = 'Yükleniyor...'; - - document.write( - '
    ' + - '
    ' + - ((logo!==null) ? logo : - '
    ' + - '
    ' + - '
    ' + - '
    ' + - '
    ') + - '
    ' + - '
    ' + customer + - '
    ' + loading + '
    ' + - '
    ' + - '
    '); - } - diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css new file mode 100644 index 000000000..06c1dabb4 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css @@ -0,0 +1,6570 @@ +html, +body, +.framework7-root { + position: relative; + height: 100%; + width: 100%; + overflow-x: hidden; +} +body { + font-family: -apple-system, SF UI Text, Helvetica Neue, Helvetica, Arial, sans-serif; + margin: 0; + padding: 0; + color: #000; + font-size: 14px; + line-height: 1.4; + width: 100%; + -webkit-text-size-adjust: 100%; + background: #fff; + overflow: hidden; +} +.framework7-root { + overflow: hidden; +} +@media all and (width: 1024px) and (height: 691px) and (orientation: landscape) { + html, + body, + .framework7-root { + height: 671px; + } +} +@media all and (width: 1024px) and (height: 692px) and (orientation: landscape) { + html, + body, + .framework7-root { + height: 672px; + } +} +* { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-touch-callout: none; +} +a, +input, +textarea, +select { + outline: 0; +} +a { + text-decoration: none; + color: #8ca946; +} +p { + margin: 1em 0; +} +/* === Grid === */ +.row { + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; +} +.row > [class*="col-"] { + box-sizing: border-box; +} +.row .col-auto { + width: 100%; +} +.row .col-100 { + width: 100%; + width: -webkit-calc((100% - 15px*0) / 1); + width: calc((100% - 15px*0) / 1); +} +.row.no-gutter .col-100 { + width: 100%; +} +.row .col-95 { + width: 95%; + width: -webkit-calc((100% - 15px*0.05263157894736836) / 1.0526315789473684); + width: calc((100% - 15px*0.05263157894736836) / 1.0526315789473684); +} +.row.no-gutter .col-95 { + width: 95%; +} +.row .col-90 { + width: 90%; + width: -webkit-calc((100% - 15px*0.11111111111111116) / 1.1111111111111112); + width: calc((100% - 15px*0.11111111111111116) / 1.1111111111111112); +} +.row.no-gutter .col-90 { + width: 90%; +} +.row .col-85 { + width: 85%; + width: -webkit-calc((100% - 15px*0.17647058823529416) / 1.1764705882352942); + width: calc((100% - 15px*0.17647058823529416) / 1.1764705882352942); +} +.row.no-gutter .col-85 { + width: 85%; +} +.row .col-80 { + width: 80%; + width: -webkit-calc((100% - 15px*0.25) / 1.25); + width: calc((100% - 15px*0.25) / 1.25); +} +.row.no-gutter .col-80 { + width: 80%; +} +.row .col-75 { + width: 75%; + width: -webkit-calc((100% - 15px*0.33333333333333326) / 1.3333333333333333); + width: calc((100% - 15px*0.33333333333333326) / 1.3333333333333333); +} +.row.no-gutter .col-75 { + width: 75%; +} +.row .col-70 { + width: 70%; + width: -webkit-calc((100% - 15px*0.4285714285714286) / 1.4285714285714286); + width: calc((100% - 15px*0.4285714285714286) / 1.4285714285714286); +} +.row.no-gutter .col-70 { + width: 70%; +} +.row .col-66 { + width: 66.66666666666666%; + width: -webkit-calc((100% - 15px*0.5000000000000002) / 1.5000000000000002); + width: calc((100% - 15px*0.5000000000000002) / 1.5000000000000002); +} +.row.no-gutter .col-66 { + width: 66.66666666666666%; +} +.row .col-65 { + width: 65%; + width: -webkit-calc((100% - 15px*0.5384615384615385) / 1.5384615384615385); + width: calc((100% - 15px*0.5384615384615385) / 1.5384615384615385); +} +.row.no-gutter .col-65 { + width: 65%; +} +.row .col-60 { + width: 60%; + width: -webkit-calc((100% - 15px*0.6666666666666667) / 1.6666666666666667); + width: calc((100% - 15px*0.6666666666666667) / 1.6666666666666667); +} +.row.no-gutter .col-60 { + width: 60%; +} +.row .col-55 { + width: 55%; + width: -webkit-calc((100% - 15px*0.8181818181818181) / 1.8181818181818181); + width: calc((100% - 15px*0.8181818181818181) / 1.8181818181818181); +} +.row.no-gutter .col-55 { + width: 55%; +} +.row .col-50 { + width: 50%; + width: -webkit-calc((100% - 15px*1) / 2); + width: calc((100% - 15px*1) / 2); +} +.row.no-gutter .col-50 { + width: 50%; +} +.row .col-45 { + width: 45%; + width: -webkit-calc((100% - 15px*1.2222222222222223) / 2.2222222222222223); + width: calc((100% - 15px*1.2222222222222223) / 2.2222222222222223); +} +.row.no-gutter .col-45 { + width: 45%; +} +.row .col-40 { + width: 40%; + width: -webkit-calc((100% - 15px*1.5) / 2.5); + width: calc((100% - 15px*1.5) / 2.5); +} +.row.no-gutter .col-40 { + width: 40%; +} +.row .col-35 { + width: 35%; + width: -webkit-calc((100% - 15px*1.8571428571428572) / 2.857142857142857); + width: calc((100% - 15px*1.8571428571428572) / 2.857142857142857); +} +.row.no-gutter .col-35 { + width: 35%; +} +.row .col-33 { + width: 33.333333333333336%; + width: -webkit-calc((100% - 15px*2) / 3); + width: calc((100% - 15px*2) / 3); +} +.row.no-gutter .col-33 { + width: 33.333333333333336%; +} +.row .col-30 { + width: 30%; + width: -webkit-calc((100% - 15px*2.3333333333333335) / 3.3333333333333335); + width: calc((100% - 15px*2.3333333333333335) / 3.3333333333333335); +} +.row.no-gutter .col-30 { + width: 30%; +} +.row .col-25 { + width: 25%; + width: -webkit-calc((100% - 15px*3) / 4); + width: calc((100% - 15px*3) / 4); +} +.row.no-gutter .col-25 { + width: 25%; +} +.row .col-20 { + width: 20%; + width: -webkit-calc((100% - 15px*4) / 5); + width: calc((100% - 15px*4) / 5); +} +.row.no-gutter .col-20 { + width: 20%; +} +.row .col-15 { + width: 15%; + width: -webkit-calc((100% - 15px*5.666666666666667) / 6.666666666666667); + width: calc((100% - 15px*5.666666666666667) / 6.666666666666667); +} +.row.no-gutter .col-15 { + width: 15%; +} +.row .col-10 { + width: 10%; + width: -webkit-calc((100% - 15px*9) / 10); + width: calc((100% - 15px*9) / 10); +} +.row.no-gutter .col-10 { + width: 10%; +} +.row .col-5 { + width: 5%; + width: -webkit-calc((100% - 15px*19) / 20); + width: calc((100% - 15px*19) / 20); +} +.row.no-gutter .col-5 { + width: 5%; +} +.row .col-auto:nth-last-child(1), +.row .col-auto:nth-last-child(1) ~ .col-auto { + width: 100%; + width: -webkit-calc((100% - 15px*0) / 1); + width: calc((100% - 15px*0) / 1); +} +.row.no-gutter .col-auto:nth-last-child(1), +.row.no-gutter .col-auto:nth-last-child(1) ~ .col-auto { + width: 100%; +} +.row .col-auto:nth-last-child(2), +.row .col-auto:nth-last-child(2) ~ .col-auto { + width: 50%; + width: -webkit-calc((100% - 15px*1) / 2); + width: calc((100% - 15px*1) / 2); +} +.row.no-gutter .col-auto:nth-last-child(2), +.row.no-gutter .col-auto:nth-last-child(2) ~ .col-auto { + width: 50%; +} +.row .col-auto:nth-last-child(3), +.row .col-auto:nth-last-child(3) ~ .col-auto { + width: 33.33333333%; + width: -webkit-calc((100% - 15px*2) / 3); + width: calc((100% - 15px*2) / 3); +} +.row.no-gutter .col-auto:nth-last-child(3), +.row.no-gutter .col-auto:nth-last-child(3) ~ .col-auto { + width: 33.33333333%; +} +.row .col-auto:nth-last-child(4), +.row .col-auto:nth-last-child(4) ~ .col-auto { + width: 25%; + width: -webkit-calc((100% - 15px*3) / 4); + width: calc((100% - 15px*3) / 4); +} +.row.no-gutter .col-auto:nth-last-child(4), +.row.no-gutter .col-auto:nth-last-child(4) ~ .col-auto { + width: 25%; +} +.row .col-auto:nth-last-child(5), +.row .col-auto:nth-last-child(5) ~ .col-auto { + width: 20%; + width: -webkit-calc((100% - 15px*4) / 5); + width: calc((100% - 15px*4) / 5); +} +.row.no-gutter .col-auto:nth-last-child(5), +.row.no-gutter .col-auto:nth-last-child(5) ~ .col-auto { + width: 20%; +} +.row .col-auto:nth-last-child(6), +.row .col-auto:nth-last-child(6) ~ .col-auto { + width: 16.66666667%; + width: -webkit-calc((100% - 15px*5) / 6); + width: calc((100% - 15px*5) / 6); +} +.row.no-gutter .col-auto:nth-last-child(6), +.row.no-gutter .col-auto:nth-last-child(6) ~ .col-auto { + width: 16.66666667%; +} +.row .col-auto:nth-last-child(7), +.row .col-auto:nth-last-child(7) ~ .col-auto { + width: 14.28571429%; + width: -webkit-calc((100% - 15px*6) / 7); + width: calc((100% - 15px*6) / 7); +} +.row.no-gutter .col-auto:nth-last-child(7), +.row.no-gutter .col-auto:nth-last-child(7) ~ .col-auto { + width: 14.28571429%; +} +.row .col-auto:nth-last-child(8), +.row .col-auto:nth-last-child(8) ~ .col-auto { + width: 12.5%; + width: -webkit-calc((100% - 15px*7) / 8); + width: calc((100% - 15px*7) / 8); +} +.row.no-gutter .col-auto:nth-last-child(8), +.row.no-gutter .col-auto:nth-last-child(8) ~ .col-auto { + width: 12.5%; +} +.row .col-auto:nth-last-child(9), +.row .col-auto:nth-last-child(9) ~ .col-auto { + width: 11.11111111%; + width: -webkit-calc((100% - 15px*8) / 9); + width: calc((100% - 15px*8) / 9); +} +.row.no-gutter .col-auto:nth-last-child(9), +.row.no-gutter .col-auto:nth-last-child(9) ~ .col-auto { + width: 11.11111111%; +} +.row .col-auto:nth-last-child(10), +.row .col-auto:nth-last-child(10) ~ .col-auto { + width: 10%; + width: -webkit-calc((100% - 15px*9) / 10); + width: calc((100% - 15px*9) / 10); +} +.row.no-gutter .col-auto:nth-last-child(10), +.row.no-gutter .col-auto:nth-last-child(10) ~ .col-auto { + width: 10%; +} +.row .col-auto:nth-last-child(11), +.row .col-auto:nth-last-child(11) ~ .col-auto { + width: 9.09090909%; + width: -webkit-calc((100% - 15px*10) / 11); + width: calc((100% - 15px*10) / 11); +} +.row.no-gutter .col-auto:nth-last-child(11), +.row.no-gutter .col-auto:nth-last-child(11) ~ .col-auto { + width: 9.09090909%; +} +.row .col-auto:nth-last-child(12), +.row .col-auto:nth-last-child(12) ~ .col-auto { + width: 8.33333333%; + width: -webkit-calc((100% - 15px*11) / 12); + width: calc((100% - 15px*11) / 12); +} +.row.no-gutter .col-auto:nth-last-child(12), +.row.no-gutter .col-auto:nth-last-child(12) ~ .col-auto { + width: 8.33333333%; +} +.row .col-auto:nth-last-child(13), +.row .col-auto:nth-last-child(13) ~ .col-auto { + width: 7.69230769%; + width: -webkit-calc((100% - 15px*12) / 13); + width: calc((100% - 15px*12) / 13); +} +.row.no-gutter .col-auto:nth-last-child(13), +.row.no-gutter .col-auto:nth-last-child(13) ~ .col-auto { + width: 7.69230769%; +} +.row .col-auto:nth-last-child(14), +.row .col-auto:nth-last-child(14) ~ .col-auto { + width: 7.14285714%; + width: -webkit-calc((100% - 15px*13) / 14); + width: calc((100% - 15px*13) / 14); +} +.row.no-gutter .col-auto:nth-last-child(14), +.row.no-gutter .col-auto:nth-last-child(14) ~ .col-auto { + width: 7.14285714%; +} +.row .col-auto:nth-last-child(15), +.row .col-auto:nth-last-child(15) ~ .col-auto { + width: 6.66666667%; + width: -webkit-calc((100% - 15px*14) / 15); + width: calc((100% - 15px*14) / 15); +} +.row.no-gutter .col-auto:nth-last-child(15), +.row.no-gutter .col-auto:nth-last-child(15) ~ .col-auto { + width: 6.66666667%; +} +.row .col-auto:nth-last-child(16), +.row .col-auto:nth-last-child(16) ~ .col-auto { + width: 6.25%; + width: -webkit-calc((100% - 15px*15) / 16); + width: calc((100% - 15px*15) / 16); +} +.row.no-gutter .col-auto:nth-last-child(16), +.row.no-gutter .col-auto:nth-last-child(16) ~ .col-auto { + width: 6.25%; +} +.row .col-auto:nth-last-child(17), +.row .col-auto:nth-last-child(17) ~ .col-auto { + width: 5.88235294%; + width: -webkit-calc((100% - 15px*16) / 17); + width: calc((100% - 15px*16) / 17); +} +.row.no-gutter .col-auto:nth-last-child(17), +.row.no-gutter .col-auto:nth-last-child(17) ~ .col-auto { + width: 5.88235294%; +} +.row .col-auto:nth-last-child(18), +.row .col-auto:nth-last-child(18) ~ .col-auto { + width: 5.55555556%; + width: -webkit-calc((100% - 15px*17) / 18); + width: calc((100% - 15px*17) / 18); +} +.row.no-gutter .col-auto:nth-last-child(18), +.row.no-gutter .col-auto:nth-last-child(18) ~ .col-auto { + width: 5.55555556%; +} +.row .col-auto:nth-last-child(19), +.row .col-auto:nth-last-child(19) ~ .col-auto { + width: 5.26315789%; + width: -webkit-calc((100% - 15px*18) / 19); + width: calc((100% - 15px*18) / 19); +} +.row.no-gutter .col-auto:nth-last-child(19), +.row.no-gutter .col-auto:nth-last-child(19) ~ .col-auto { + width: 5.26315789%; +} +.row .col-auto:nth-last-child(20), +.row .col-auto:nth-last-child(20) ~ .col-auto { + width: 5%; + width: -webkit-calc((100% - 15px*19) / 20); + width: calc((100% - 15px*19) / 20); +} +.row.no-gutter .col-auto:nth-last-child(20), +.row.no-gutter .col-auto:nth-last-child(20) ~ .col-auto { + width: 5%; +} +.row .col-auto:nth-last-child(21), +.row .col-auto:nth-last-child(21) ~ .col-auto { + width: 4.76190476%; + width: -webkit-calc((100% - 15px*20) / 21); + width: calc((100% - 15px*20) / 21); +} +.row.no-gutter .col-auto:nth-last-child(21), +.row.no-gutter .col-auto:nth-last-child(21) ~ .col-auto { + width: 4.76190476%; +} +@media all and (min-width: 768px) { + .row .tablet-100 { + width: 100%; + width: -webkit-calc((100% - 15px*0) / 1); + width: calc((100% - 15px*0) / 1); + } + .row.no-gutter .tablet-100 { + width: 100%; + } + .row .tablet-95 { + width: 95%; + width: -webkit-calc((100% - 15px*0.05263157894736836) / 1.0526315789473684); + width: calc((100% - 15px*0.05263157894736836) / 1.0526315789473684); + } + .row.no-gutter .tablet-95 { + width: 95%; + } + .row .tablet-90 { + width: 90%; + width: -webkit-calc((100% - 15px*0.11111111111111116) / 1.1111111111111112); + width: calc((100% - 15px*0.11111111111111116) / 1.1111111111111112); + } + .row.no-gutter .tablet-90 { + width: 90%; + } + .row .tablet-85 { + width: 85%; + width: -webkit-calc((100% - 15px*0.17647058823529416) / 1.1764705882352942); + width: calc((100% - 15px*0.17647058823529416) / 1.1764705882352942); + } + .row.no-gutter .tablet-85 { + width: 85%; + } + .row .tablet-80 { + width: 80%; + width: -webkit-calc((100% - 15px*0.25) / 1.25); + width: calc((100% - 15px*0.25) / 1.25); + } + .row.no-gutter .tablet-80 { + width: 80%; + } + .row .tablet-75 { + width: 75%; + width: -webkit-calc((100% - 15px*0.33333333333333326) / 1.3333333333333333); + width: calc((100% - 15px*0.33333333333333326) / 1.3333333333333333); + } + .row.no-gutter .tablet-75 { + width: 75%; + } + .row .tablet-70 { + width: 70%; + width: -webkit-calc((100% - 15px*0.4285714285714286) / 1.4285714285714286); + width: calc((100% - 15px*0.4285714285714286) / 1.4285714285714286); + } + .row.no-gutter .tablet-70 { + width: 70%; + } + .row .tablet-66 { + width: 66.66666666666666%; + width: -webkit-calc((100% - 15px*0.5000000000000002) / 1.5000000000000002); + width: calc((100% - 15px*0.5000000000000002) / 1.5000000000000002); + } + .row.no-gutter .tablet-66 { + width: 66.66666666666666%; + } + .row .tablet-65 { + width: 65%; + width: -webkit-calc((100% - 15px*0.5384615384615385) / 1.5384615384615385); + width: calc((100% - 15px*0.5384615384615385) / 1.5384615384615385); + } + .row.no-gutter .tablet-65 { + width: 65%; + } + .row .tablet-60 { + width: 60%; + width: -webkit-calc((100% - 15px*0.6666666666666667) / 1.6666666666666667); + width: calc((100% - 15px*0.6666666666666667) / 1.6666666666666667); + } + .row.no-gutter .tablet-60 { + width: 60%; + } + .row .tablet-55 { + width: 55%; + width: -webkit-calc((100% - 15px*0.8181818181818181) / 1.8181818181818181); + width: calc((100% - 15px*0.8181818181818181) / 1.8181818181818181); + } + .row.no-gutter .tablet-55 { + width: 55%; + } + .row .tablet-50 { + width: 50%; + width: -webkit-calc((100% - 15px*1) / 2); + width: calc((100% - 15px*1) / 2); + } + .row.no-gutter .tablet-50 { + width: 50%; + } + .row .tablet-45 { + width: 45%; + width: -webkit-calc((100% - 15px*1.2222222222222223) / 2.2222222222222223); + width: calc((100% - 15px*1.2222222222222223) / 2.2222222222222223); + } + .row.no-gutter .tablet-45 { + width: 45%; + } + .row .tablet-40 { + width: 40%; + width: -webkit-calc((100% - 15px*1.5) / 2.5); + width: calc((100% - 15px*1.5) / 2.5); + } + .row.no-gutter .tablet-40 { + width: 40%; + } + .row .tablet-35 { + width: 35%; + width: -webkit-calc((100% - 15px*1.8571428571428572) / 2.857142857142857); + width: calc((100% - 15px*1.8571428571428572) / 2.857142857142857); + } + .row.no-gutter .tablet-35 { + width: 35%; + } + .row .tablet-33 { + width: 33.333333333333336%; + width: -webkit-calc((100% - 15px*2) / 3); + width: calc((100% - 15px*2) / 3); + } + .row.no-gutter .tablet-33 { + width: 33.333333333333336%; + } + .row .tablet-30 { + width: 30%; + width: -webkit-calc((100% - 15px*2.3333333333333335) / 3.3333333333333335); + width: calc((100% - 15px*2.3333333333333335) / 3.3333333333333335); + } + .row.no-gutter .tablet-30 { + width: 30%; + } + .row .tablet-25 { + width: 25%; + width: -webkit-calc((100% - 15px*3) / 4); + width: calc((100% - 15px*3) / 4); + } + .row.no-gutter .tablet-25 { + width: 25%; + } + .row .tablet-20 { + width: 20%; + width: -webkit-calc((100% - 15px*4) / 5); + width: calc((100% - 15px*4) / 5); + } + .row.no-gutter .tablet-20 { + width: 20%; + } + .row .tablet-15 { + width: 15%; + width: -webkit-calc((100% - 15px*5.666666666666667) / 6.666666666666667); + width: calc((100% - 15px*5.666666666666667) / 6.666666666666667); + } + .row.no-gutter .tablet-15 { + width: 15%; + } + .row .tablet-10 { + width: 10%; + width: -webkit-calc((100% - 15px*9) / 10); + width: calc((100% - 15px*9) / 10); + } + .row.no-gutter .tablet-10 { + width: 10%; + } + .row .tablet-5 { + width: 5%; + width: -webkit-calc((100% - 15px*19) / 20); + width: calc((100% - 15px*19) / 20); + } + .row.no-gutter .tablet-5 { + width: 5%; + } + .row .tablet-auto:nth-last-child(1), + .row .tablet-auto:nth-last-child(1) ~ .col-auto { + width: 100%; + width: -webkit-calc((100% - 15px*0) / 1); + width: calc((100% - 15px*0) / 1); + } + .row.no-gutter .tablet-auto:nth-last-child(1), + .row.no-gutter .tablet-auto:nth-last-child(1) ~ .tablet-auto { + width: 100%; + } + .row .tablet-auto:nth-last-child(2), + .row .tablet-auto:nth-last-child(2) ~ .col-auto { + width: 50%; + width: -webkit-calc((100% - 15px*1) / 2); + width: calc((100% - 15px*1) / 2); + } + .row.no-gutter .tablet-auto:nth-last-child(2), + .row.no-gutter .tablet-auto:nth-last-child(2) ~ .tablet-auto { + width: 50%; + } + .row .tablet-auto:nth-last-child(3), + .row .tablet-auto:nth-last-child(3) ~ .col-auto { + width: 33.33333333%; + width: -webkit-calc((100% - 15px*2) / 3); + width: calc((100% - 15px*2) / 3); + } + .row.no-gutter .tablet-auto:nth-last-child(3), + .row.no-gutter .tablet-auto:nth-last-child(3) ~ .tablet-auto { + width: 33.33333333%; + } + .row .tablet-auto:nth-last-child(4), + .row .tablet-auto:nth-last-child(4) ~ .col-auto { + width: 25%; + width: -webkit-calc((100% - 15px*3) / 4); + width: calc((100% - 15px*3) / 4); + } + .row.no-gutter .tablet-auto:nth-last-child(4), + .row.no-gutter .tablet-auto:nth-last-child(4) ~ .tablet-auto { + width: 25%; + } + .row .tablet-auto:nth-last-child(5), + .row .tablet-auto:nth-last-child(5) ~ .col-auto { + width: 20%; + width: -webkit-calc((100% - 15px*4) / 5); + width: calc((100% - 15px*4) / 5); + } + .row.no-gutter .tablet-auto:nth-last-child(5), + .row.no-gutter .tablet-auto:nth-last-child(5) ~ .tablet-auto { + width: 20%; + } + .row .tablet-auto:nth-last-child(6), + .row .tablet-auto:nth-last-child(6) ~ .col-auto { + width: 16.66666667%; + width: -webkit-calc((100% - 15px*5) / 6); + width: calc((100% - 15px*5) / 6); + } + .row.no-gutter .tablet-auto:nth-last-child(6), + .row.no-gutter .tablet-auto:nth-last-child(6) ~ .tablet-auto { + width: 16.66666667%; + } + .row .tablet-auto:nth-last-child(7), + .row .tablet-auto:nth-last-child(7) ~ .col-auto { + width: 14.28571429%; + width: -webkit-calc((100% - 15px*6) / 7); + width: calc((100% - 15px*6) / 7); + } + .row.no-gutter .tablet-auto:nth-last-child(7), + .row.no-gutter .tablet-auto:nth-last-child(7) ~ .tablet-auto { + width: 14.28571429%; + } + .row .tablet-auto:nth-last-child(8), + .row .tablet-auto:nth-last-child(8) ~ .col-auto { + width: 12.5%; + width: -webkit-calc((100% - 15px*7) / 8); + width: calc((100% - 15px*7) / 8); + } + .row.no-gutter .tablet-auto:nth-last-child(8), + .row.no-gutter .tablet-auto:nth-last-child(8) ~ .tablet-auto { + width: 12.5%; + } + .row .tablet-auto:nth-last-child(9), + .row .tablet-auto:nth-last-child(9) ~ .col-auto { + width: 11.11111111%; + width: -webkit-calc((100% - 15px*8) / 9); + width: calc((100% - 15px*8) / 9); + } + .row.no-gutter .tablet-auto:nth-last-child(9), + .row.no-gutter .tablet-auto:nth-last-child(9) ~ .tablet-auto { + width: 11.11111111%; + } + .row .tablet-auto:nth-last-child(10), + .row .tablet-auto:nth-last-child(10) ~ .col-auto { + width: 10%; + width: -webkit-calc((100% - 15px*9) / 10); + width: calc((100% - 15px*9) / 10); + } + .row.no-gutter .tablet-auto:nth-last-child(10), + .row.no-gutter .tablet-auto:nth-last-child(10) ~ .tablet-auto { + width: 10%; + } + .row .tablet-auto:nth-last-child(11), + .row .tablet-auto:nth-last-child(11) ~ .col-auto { + width: 9.09090909%; + width: -webkit-calc((100% - 15px*10) / 11); + width: calc((100% - 15px*10) / 11); + } + .row.no-gutter .tablet-auto:nth-last-child(11), + .row.no-gutter .tablet-auto:nth-last-child(11) ~ .tablet-auto { + width: 9.09090909%; + } + .row .tablet-auto:nth-last-child(12), + .row .tablet-auto:nth-last-child(12) ~ .col-auto { + width: 8.33333333%; + width: -webkit-calc((100% - 15px*11) / 12); + width: calc((100% - 15px*11) / 12); + } + .row.no-gutter .tablet-auto:nth-last-child(12), + .row.no-gutter .tablet-auto:nth-last-child(12) ~ .tablet-auto { + width: 8.33333333%; + } + .row .tablet-auto:nth-last-child(13), + .row .tablet-auto:nth-last-child(13) ~ .col-auto { + width: 7.69230769%; + width: -webkit-calc((100% - 15px*12) / 13); + width: calc((100% - 15px*12) / 13); + } + .row.no-gutter .tablet-auto:nth-last-child(13), + .row.no-gutter .tablet-auto:nth-last-child(13) ~ .tablet-auto { + width: 7.69230769%; + } + .row .tablet-auto:nth-last-child(14), + .row .tablet-auto:nth-last-child(14) ~ .col-auto { + width: 7.14285714%; + width: -webkit-calc((100% - 15px*13) / 14); + width: calc((100% - 15px*13) / 14); + } + .row.no-gutter .tablet-auto:nth-last-child(14), + .row.no-gutter .tablet-auto:nth-last-child(14) ~ .tablet-auto { + width: 7.14285714%; + } + .row .tablet-auto:nth-last-child(15), + .row .tablet-auto:nth-last-child(15) ~ .col-auto { + width: 6.66666667%; + width: -webkit-calc((100% - 15px*14) / 15); + width: calc((100% - 15px*14) / 15); + } + .row.no-gutter .tablet-auto:nth-last-child(15), + .row.no-gutter .tablet-auto:nth-last-child(15) ~ .tablet-auto { + width: 6.66666667%; + } + .row .tablet-auto:nth-last-child(16), + .row .tablet-auto:nth-last-child(16) ~ .col-auto { + width: 6.25%; + width: -webkit-calc((100% - 15px*15) / 16); + width: calc((100% - 15px*15) / 16); + } + .row.no-gutter .tablet-auto:nth-last-child(16), + .row.no-gutter .tablet-auto:nth-last-child(16) ~ .tablet-auto { + width: 6.25%; + } + .row .tablet-auto:nth-last-child(17), + .row .tablet-auto:nth-last-child(17) ~ .col-auto { + width: 5.88235294%; + width: -webkit-calc((100% - 15px*16) / 17); + width: calc((100% - 15px*16) / 17); + } + .row.no-gutter .tablet-auto:nth-last-child(17), + .row.no-gutter .tablet-auto:nth-last-child(17) ~ .tablet-auto { + width: 5.88235294%; + } + .row .tablet-auto:nth-last-child(18), + .row .tablet-auto:nth-last-child(18) ~ .col-auto { + width: 5.55555556%; + width: -webkit-calc((100% - 15px*17) / 18); + width: calc((100% - 15px*17) / 18); + } + .row.no-gutter .tablet-auto:nth-last-child(18), + .row.no-gutter .tablet-auto:nth-last-child(18) ~ .tablet-auto { + width: 5.55555556%; + } + .row .tablet-auto:nth-last-child(19), + .row .tablet-auto:nth-last-child(19) ~ .col-auto { + width: 5.26315789%; + width: -webkit-calc((100% - 15px*18) / 19); + width: calc((100% - 15px*18) / 19); + } + .row.no-gutter .tablet-auto:nth-last-child(19), + .row.no-gutter .tablet-auto:nth-last-child(19) ~ .tablet-auto { + width: 5.26315789%; + } + .row .tablet-auto:nth-last-child(20), + .row .tablet-auto:nth-last-child(20) ~ .col-auto { + width: 5%; + width: -webkit-calc((100% - 15px*19) / 20); + width: calc((100% - 15px*19) / 20); + } + .row.no-gutter .tablet-auto:nth-last-child(20), + .row.no-gutter .tablet-auto:nth-last-child(20) ~ .tablet-auto { + width: 5%; + } + .row .tablet-auto:nth-last-child(21), + .row .tablet-auto:nth-last-child(21) ~ .col-auto { + width: 4.76190476%; + width: -webkit-calc((100% - 15px*20) / 21); + width: calc((100% - 15px*20) / 21); + } + .row.no-gutter .tablet-auto:nth-last-child(21), + .row.no-gutter .tablet-auto:nth-last-child(21) ~ .tablet-auto { + width: 4.76190476%; + } +} +/* === Views === */ +.views, +.view { + position: relative; + width: 100%; + height: 100%; + z-index: 5000; +} +.views { + overflow: auto; + -webkit-overflow-scrolling: touch; +} +.view { + overflow: hidden; + box-sizing: border-box; +} +/* === Pages === */ +.pages { + position: relative; + width: 100%; + height: 100%; + overflow: hidden; + background: #000; +} +.page { + box-sizing: border-box; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: #efeff4; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.page.cached { + display: none; +} +.page-on-left { + opacity: 0.9; + -webkit-transform: translate3d(-20%, 0, 0); + transform: translate3d(-20%, 0, 0); +} +.page-on-center .swipeback-page-shadow { + opacity: 1; +} +.page-on-right { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); +} +.page-on-right .swipeback-page-shadow { + opacity: 0; +} +.page-content { + overflow: auto; + -webkit-overflow-scrolling: touch; + box-sizing: border-box; + height: 100%; + position: relative; + z-index: 1; +} +.swipeback-page-shadow { + position: absolute; + right: 100%; + top: 0; + width: 16px; + height: 100%; + background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%); + background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%); + z-index: -1; + content: ''; +} +html.android .swipeback-page-shadow { + display: none; + -webkit-animation: none; + animation: none; +} +.page-transitioning, +.page-transitioning .swipeback-page-shadow { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.page-from-right-to-center:before, +.page-from-center-to-right:before { + position: absolute; + right: 100%; + top: 0; + width: 16px; + height: 100%; + background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%); + background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%); + z-index: -1; + content: ''; +} +html.android .page-from-right-to-center:before, +html.android .page-from-center-to-right:before { + display: none; + -webkit-animation: none; + animation: none; +} +.page-from-right-to-center { + -webkit-animation: pageFromRightToCenter 400ms forwards; + animation: pageFromRightToCenter 400ms forwards; +} +.page-from-right-to-center:before { + -webkit-animation: pageFromRightToCenterShadow 400ms forwards; + animation: pageFromRightToCenterShadow 400ms forwards; +} +.page-from-center-to-right { + -webkit-animation: pageFromCenterToRight 400ms forwards; + animation: pageFromCenterToRight 400ms forwards; +} +.page-from-center-to-right:before { + -webkit-animation: pageFromCenterToRightShadow 400ms forwards; + animation: pageFromCenterToRightShadow 400ms forwards; +} +@-webkit-keyframes pageFromRightToCenter { + from { + -webkit-transform: translate3d(100%, 0, 0); + } + to { + -webkit-transform: translate3d(0, 0, 0); + } +} +@keyframes pageFromRightToCenter { + from { + transform: translate3d(100%, 0, 0); + } + to { + transform: translate3d(0, 0, 0); + } +} +@-webkit-keyframes pageFromRightToCenterShadow { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes pageFromRightToCenterShadow { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@-webkit-keyframes pageFromCenterToRight { + from { + -webkit-transform: translate3d(0, 0, 0); + } + to { + -webkit-transform: translate3d(100%, 0, 0); + } +} +@keyframes pageFromCenterToRight { + from { + transform: translate3d(0, 0, 0); + } + to { + transform: translate3d(100%, 0, 0); + } +} +@-webkit-keyframes pageFromCenterToRightShadow { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +@keyframes pageFromCenterToRightShadow { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +.page-from-center-to-left { + -webkit-animation: pageFromCenterToLeft 400ms forwards; + animation: pageFromCenterToLeft 400ms forwards; +} +.page-from-left-to-center { + -webkit-animation: pageFromLeftToCenter 400ms forwards; + animation: pageFromLeftToCenter 400ms forwards; +} +@-webkit-keyframes pageFromCenterToLeft { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + } + to { + opacity: 0.9; + -webkit-transform: translate3d(-20%, 0, 0); + } +} +@keyframes pageFromCenterToLeft { + from { + transform: translate3d(0, 0, 0); + } + to { + opacity: 0.9; + transform: translate3d(-20%, 0, 0); + } +} +@-webkit-keyframes pageFromLeftToCenter { + from { + opacity: 0.9; + -webkit-transform: translate3d(-20%, 0, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + } +} +@keyframes pageFromLeftToCenter { + from { + transform: translate3d(-20%, 0, 0); + } + to { + opacity: 1; + transform: translate3d(0, 0, 0); + } +} +/* === Toolbars === */ +.navbar-inner, +.toolbar-inner { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + padding: 0 8px; + box-sizing: border-box; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +.navbar-inner.cached { + display: none; +} +.navbar, +.toolbar { + height: 44px; + width: 100%; + box-sizing: border-box; + font-size: 17px; + position: relative; + margin: 0; + z-index: 500; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} +.navbar b, +.toolbar b { + font-weight: 500; +} +html.ios-gt-8 .navbar b, +html.ios-gt-8 .toolbar b { + font-weight: 600; +} +.navbar, +.toolbar, +.subnavbar { + background: #f7f7f8; +} +.navbar a.link, +.toolbar a.link, +.subnavbar a.link { + line-height: 44px; + height: 44px; + text-decoration: none; + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-transform: translateZ(0px); + transform: translateZ(0px); +} +html:not(.watch-active-state) .navbar a.link:active, +html:not(.watch-active-state) .toolbar a.link:active, +html:not(.watch-active-state) .subnavbar a.link:active, +.navbar a.link.active-state, +.toolbar a.link.active-state, +.subnavbar a.link.active-state { + opacity: 0.3; + -webkit-transition-duration: 0ms; + transition-duration: 0ms; +} +.navbar a.link i + span, +.toolbar a.link i + span, +.subnavbar a.link i + span, +.navbar a.link i + i, +.toolbar a.link i + i, +.subnavbar a.link i + i, +.navbar a.link span + i, +.toolbar a.link span + i, +.subnavbar a.link span + i, +.navbar a.link span + span, +.toolbar a.link span + span, +.subnavbar a.link span + span { + margin-left: 7px; +} +.navbar a.icon-only, +.toolbar a.icon-only, +.subnavbar a.icon-only { + min-width: 44px; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + margin: 0; +} +.navbar i.icon, +.toolbar i.icon, +.subnavbar i.icon { + display: block; +} +.navbar { + left: 0; + top: 0; +} +.navbar:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #c4c4c4; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .navbar:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .navbar:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.navbar:after { + backface-visibility: hidden; +} +.navbar.no-border:after { + display: none; +} +.navbar .center { + font-size: 17px; + font-weight: 500; + text-align: center; + margin: 0; + position: relative; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 44px; + -webkit-flex-shrink: 10; + -ms-flex: 0 10 auto; + flex-shrink: 10; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +html.ios-gt-8 .navbar .center { + font-weight: 600; +} +.navbar .left, +.navbar .right { + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + flex-shrink: 0; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.navbar .left a + a, +.navbar .right a + a { + margin-left: 15px; +} +.navbar .left { + margin-right: 10px; +} +.navbar .right { + margin-left: 10px; +} +.navbar .right:first-child { + position: absolute; + right: 8px; + height: 100%; +} +.popup .navbar { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.subnavbar { + height: 44px; + width: 100%; + position: absolute; + left: 0; + top: 100%; + margin-top: -1px; + z-index: 20; + box-sizing: border-box; + padding: 0 8px; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +.subnavbar:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #c4c4c4; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .subnavbar:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .subnavbar:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.subnavbar.no-border:after { + display: none; +} +.navbar.no-border .subnavbar { + margin-top: 0; +} +.navbar-on-left .subnavbar, +.navbar-on-right .subnavbar { + pointer-events: none; +} +.navbar .subnavbar, +.page .subnavbar { + position: absolute; +} +.page > .subnavbar { + top: 0; + margin-top: 0; +} +.subnavbar > .buttons-row { + width: 100%; +} +.subnavbar .searchbar, +.subnavbar.searchbar { + position: absolute; +} +.subnavbar.searchbar, +.subnavbar .searchbar { + position: absolute; +} +.subnavbar .searchbar { + left: 0; + top: 0; +} +.toolbar { + left: 0; + bottom: 0; +} +.toolbar:before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: auto; + right: auto; + height: 1px; + width: 100%; + background-color: #c4c4c4; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +html.pixel-ratio-2 .toolbar:before { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .toolbar:before { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.toolbar.no-border:before { + display: none; +} +.toolbar a { + -webkit-flex-shrink: 1; + -ms-flex: 0 1 auto; + flex-shrink: 1; + position: relative; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +.tabbar { + color: #929292; + z-index: 5001; +} +.tabbar a { + color: #929292; +} +.tabbar a.active { + color: #8ca946; +} +.tabbar a.link { + line-height: 1.4; +} +.tabbar a.tab-link, +.tabbar a.link { + height: 100%; + width: 100%; + box-sizing: border-box; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + overflow: visible; + -webkit-box-flex: 1; + -ms-flex: 1; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; +} +.tabbar i.icon { + height: 30px; +} +.tabbar-labels { + height: 50px; +} +.tabbar-labels a.tab-link, +.tabbar-labels a.link { + padding-top: 4px; + padding-bottom: 4px; + height: 100%; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; +} +.tabbar-labels a.tab-link i + span, +.tabbar-labels a.link i + span { + margin: 0; +} +.tabbar-labels span.tabbar-label { + line-height: 1; + display: block; + margin: 0; + letter-spacing: 0.01em; + font-size: 10px; + position: relative; + text-overflow: ellipsis; + white-space: nowrap; +} +.subnavbar input[type="text"], +.navbar input[type="text"], +.subnavbar input[type="password"], +.navbar input[type="password"], +.subnavbar input[type="search"], +.navbar input[type="search"], +.subnavbar input[type="email"], +.navbar input[type="email"], +.subnavbar input[type="tel"], +.navbar input[type="tel"], +.subnavbar input[type="url"], +.navbar input[type="url"] { + box-sizing: border-box; + width: 100%; + height: 28px; + display: block; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + border-radius: 5px; + font-family: inherit; + color: #000; + font-size: 14px; + font-weight: normal; + padding: 0 8px; + background-color: #fff; +} +@media all and (min-width: 768px) { + .tabbar .toolbar-inner { + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + } + .tabbar a.tab-link, + .tabbar a.link { + width: auto; + min-width: 105px; + } + .tabbar-labels { + height: 56px; + } + .tabbar-labels span.tabbar-label { + font-size: 14px; + } +} +.navbar-from-right-to-center .left, +.navbar-from-right-to-center .right, +.navbar-from-right-to-center .center, +.navbar-from-right-to-center .subnavbar, +.navbar-from-right-to-center .fading { + -webkit-animation: navbarElementFadeIn 400ms forwards; + animation: navbarElementFadeIn 400ms forwards; +} +.navbar-from-right-to-center .sliding { + opacity: 1; +} +.navbar-from-center-to-right .left, +.navbar-from-center-to-right .right, +.navbar-from-center-to-right .center, +.navbar-from-center-to-right .subnavbar, +.navbar-from-center-to-right .fading { + -webkit-animation: navbarElementFadeOut 400ms forwards; + animation: navbarElementFadeOut 400ms forwards; +} +.navbar-from-center-to-right .sliding { + opacity: 0; +} +.navbar-from-center-to-right .subnavbar.sliding { + opacity: 1; +} +@-webkit-keyframes navbarElementFadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes navbarElementFadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +.navbar-from-center-to-left .left, +.navbar-from-center-to-left .right, +.navbar-from-center-to-left .center, +.navbar-from-center-to-left .subnavbar, +.navbar-from-center-to-left .fading { + -webkit-animation: navbarElementFadeOut 400ms forwards; + animation: navbarElementFadeOut 400ms forwards; +} +.navbar-from-center-to-left .sliding { + opacity: 0; +} +.navbar-from-center-to-left .subnavbar.sliding { + opacity: 1; +} +.navbar-from-left-to-center .left, +.navbar-from-left-to-center .right, +.navbar-from-left-to-center .center, +.navbar-from-left-to-center .subnavbar, +.navbar-from-left-to-center .fading { + -webkit-animation: navbarElementFadeIn 400ms forwards; + animation: navbarElementFadeIn 400ms forwards; +} +.navbar-from-left-to-center .sliding { + opacity: 1; +} +.navbar-on-left .left, +.navbar-on-left .right, +.navbar-on-left .center, +.navbar-on-left .subnavbar, +.navbar-on-left .fading { + opacity: 0; +} +.navbar-on-left .sliding { + opacity: 0; +} +.navbar-on-left .subnavbar.sliding { + opacity: 1; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); +} +.navbar-on-right .left, +.navbar-on-right .right, +.navbar-on-right .center, +.navbar-on-right .subnavbar, +.navbar-on-right .fading { + opacity: 0; +} +.navbar-on-right .sliding { + opacity: 0; +} +.navbar-on-right .subnavbar.sliding { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); +} +@-webkit-keyframes navbarElementFadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +@keyframes navbarElementFadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +.navbar-from-right-to-center .left.sliding .back.link .icon, +.navbar-from-center-to-right .left.sliding .back.link .icon, +.navbar-from-center-to-left .left.sliding .back.link .icon, +.navbar-from-left-to-center .left.sliding .back.link .icon { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.navbar-from-right-to-center .sliding, +.navbar-from-center-to-right .sliding, +.navbar-from-center-to-left .sliding, +.navbar-from-left-to-center .sliding { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; + -webkit-animation: none; + animation: none; +} +/* === Relation between toolbar/navbar types and pages === */ +.page > .navbar, +.view > .navbar, +.views > .navbar, +.page > .toolbar, +.view > .toolbar, +.views > .toolbar { + position: absolute; +} +.subnavbar ~ .page-content { + padding-top: 44px; +} +.navbar-through .page-content, +.navbar-fixed .page-content { + padding-top: 44px; +} +.navbar-through .with-subnavbar .page-content, +.navbar-fixed .with-subnavbar .page-content, +.navbar-through .page-content.with-subnavbar, +.navbar-fixed .page-content.with-subnavbar, +.navbar-through .subnavbar ~ .page-content, +.navbar-fixed .subnavbar ~ .page-content { + padding-top: 88px; +} +.navbar-through .page .subnavbar, +.navbar-fixed .page .subnavbar, +.navbar-through.page .subnavbar, +.navbar-fixed.page .subnavbar { + top: 44px; +} +.toolbar-through .page-content, +.toolbar-fixed .page-content, +.tabbar-through .page-content, +.tabbar-fixed .page-content { + padding-bottom: 44px; +} +.tabbar-labels-fixed .page-content, +.tabbar-labels-through .page-content { + padding-bottom: 50px; +} +@media all and (min-width: 768px) { + .tabbar-labels-fixed .page-content, + .tabbar-labels-through .page-content { + padding-bottom: 56px; + } +} +.navbar.navbar-hiding { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.navbar.navbar-hiding ~ .page-content .list-group-title, +.navbar.navbar-hiding ~ .pages .list-group-title, +.navbar.navbar-hiding ~ .page .list-group-title { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.navbar.navbar-hiding ~ .page-content .subnavbar, +.navbar.navbar-hiding ~ .pages .subnavbar, +.navbar.navbar-hiding ~ .page .subnavbar { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.navbar.navbar-hidden { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); +} +.navbar.navbar-hidden ~ .page-content .list-group-title, +.navbar.navbar-hidden ~ .pages .list-group-title, +.navbar.navbar-hidden ~ .page .list-group-title { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; + top: -44px; +} +.navbar.navbar-hidden ~ .page-content .subnavbar, +.navbar.navbar-hidden ~ .pages .subnavbar, +.navbar.navbar-hidden ~ .page .subnavbar { + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.page.no-navbar .page-content { + padding-top: 0; +} +.page.no-navbar.with-subnavbar .page-content, +.with-subnavbar .page.no-navbar .page-content, +.page.no-navbar .page-content.with-subnavbar { + padding-top: 44px; +} +.toolbar.toolbar-hiding, +.tabbar.toolbar-hiding, +.toolbar.tabbar-hiding, +.tabbar.tabbar-hiding { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.toolbar.toolbar-hidden, +.tabbar.toolbar-hidden, +.toolbar.tabbar-hidden, +.tabbar.tabbar-hidden { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +.page.no-toolbar .page-content, +.page.no-tabbar .page-content { + padding-bottom: 0; +} +/* === Search Bar === */ +.searchbar { + height: 44px; + width: 100%; + background: #c9c9ce; + box-sizing: border-box; + padding: 0 8px; + overflow: hidden; + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +.searchbar:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #b4b4b4; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .searchbar:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .searchbar:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.searchbar .searchbar-input { + width: 100%; + height: 28px; + position: relative; + -webkit-flex-shrink: 1; + -ms-flex: 0 1 auto; + flex-shrink: 1; +} +.searchbar input[type="search"] { + box-sizing: border-box; + width: 100%; + height: 28px; + display: block; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + border-radius: 5px; + font-family: inherit; + color: #000; + font-size: 14px; + font-weight: normal; + padding: 0 8px; + background-color: #fff; + padding: 0 28px; + height: 100%; + background-repeat: no-repeat; + background-position: 8px center; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2013%2013'%20enable-background%3D'new%200%200%2013%2013'%3E%3Cg%3E%3Cpath%20fill%3D'%23939398'%20d%3D'M5%2C1c2.2%2C0%2C4%2C1.8%2C4%2C4S7.2%2C9%2C5%2C9S1%2C7.2%2C1%2C5S2.8%2C1%2C5%2C1%20M5%2C0C2.2%2C0%2C0%2C2.2%2C0%2C5s2.2%2C5%2C5%2C5s5-2.2%2C5-5S7.8%2C0%2C5%2C0%20L5%2C0z'%2F%3E%3C%2Fg%3E%3Cline%20stroke%3D'%23939398'%20stroke-miterlimit%3D'10'%20x1%3D'12.6'%20y1%3D'12.6'%20x2%3D'8.2'%20y2%3D'8.2'%2F%3E%3C%2Fsvg%3E"); + -webkit-background-size: 13px 13px; + background-size: 13px 13px; +} +.searchbar input[type="search"]::-webkit-input-placeholder { + color: #939398; + opacity: 1; +} +.searchbar input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; +} +.searchbar .searchbar-clear { + position: absolute; + width: 28px; + height: 28px; + right: 0; + top: 0; + opacity: 0; + pointer-events: none; + background-position: center; + background-repeat: no-repeat; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2028'%3E%3Ccircle%20cx%3D'14'%20cy%3D'14'%20r%3D'14'%20fill%3D'%238e8e93'%2F%3E%3Cline%20stroke%3D'%23ffffff'%20stroke-width%3D'2'%20stroke-miterlimit%3D'10'%20x1%3D'8'%20y1%3D'8'%20x2%3D'20'%20y2%3D'20'%2F%3E%3Cline%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2'%20stroke-miterlimit%3D'10'%20x1%3D'20'%20y1%3D'8'%20x2%3D'8'%20y2%3D'20'%2F%3E%3C%2Fsvg%3E"); + -webkit-background-size: 14px 14px; + background-size: 14px 14px; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + cursor: pointer; +} +.searchbar .searchbar-cancel { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + font-size: 17px; + cursor: pointer; + opacity: 0; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + flex-shrink: 0; + margin-left: 0; + pointer-events: none; + display: none; +} +.searchbar.searchbar-active .searchbar-cancel { + margin-left: 8px; + opacity: 1; + pointer-events: auto; +} +html:not(.watch-active-state) .searchbar.searchbar-active .searchbar-cancel:active, +.searchbar.searchbar-active .searchbar-cancel.active-state { + opacity: 0.3; + -webkit-transition-duration: 0ms; + transition-duration: 0ms; +} +.searchbar.searchbar-not-empty .searchbar-clear { + pointer-events: auto; + opacity: 1; +} +.searchbar-overlay { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 100; + opacity: 0; + pointer-events: none; + background: rgba(0, 0, 0, 0.4); + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.searchbar-overlay.searchbar-overlay-active { + opacity: 1; + pointer-events: auto; +} +.searchbar-not-found { + display: none; +} +.hidden-by-searchbar, +.list-block .hidden-by-searchbar, +.list-block li.hidden-by-searchbar { + display: none; +} +.page > .searchbar { + position: absolute; + width: 100%; + left: 0; + top: 0; + z-index: 200; +} +.page > .searchbar ~ .page-content { + padding-top: 44px; +} +.navbar-fixed .page > .searchbar, +.navbar-through .page > .searchbar, +.navbar-fixed > .searchbar, +.navbar-through > .searchbar { + top: 44px; +} +.navbar-fixed .page > .searchbar ~ .page-content, +.navbar-through .page > .searchbar ~ .page-content, +.navbar-fixed > .searchbar ~ .page-content, +.navbar-through > .searchbar ~ .page-content { + padding-top: 88px; +} +/* === Message Bar === */ +.messagebar { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-transition-duration: 0ms; + transition-duration: 0ms; + background: #fff; +} +.messagebar:before { + display: none; +} +.messagebar textarea { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + border: 1px solid #c8c8cd; + background: #fff; + border-radius: 17px; + box-shadow: none; + display: block; + padding: 6px 15px; + margin: 0; + width: 100%; + height: 34px; + color: #000; + font-size: 17px; + line-height: 20px; + font-family: inherit; + resize: none; + -webkit-flex-shrink: 1; + -ms-flex: 0 1 auto; + flex-shrink: 1; +} +.messagebar .link { + -ms-flex-item-align: flex-end; + -webkit-align-self: flex-end; + align-self: flex-end; +} +.messagebar .link.icon-only:first-child { + margin-left: -6px; +} +.messagebar .link:not(.icon-only) + textarea { + margin-left: 8px; +} +.messagebar textarea + .link { + margin-left: 8px; +} +.messagebar .link { + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + flex-shrink: 0; +} +.messagebar ~ .page-content { + padding-bottom: 44px; +} +.page.no-toolbar .messagebar ~ .page-content { + padding-bottom: 44px; +} +.hidden-toolbar .messagebar { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-transition-duration: 0ms; + transition-duration: 0ms; +} +/* === Icons === */ +i.icon { + display: inline-block; + vertical-align: middle; + background-size: 100% auto; + background-position: center; + background-repeat: no-repeat; + font-style: normal; + position: relative; +} +i.icon.icon-back { + width: 12px; + height: 20px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2020'%3E%3Cpath%20d%3D'M10%2C0l2%2C2l-8%2C8l8%2C8l-2%2C2L0%2C10L10%2C0z'%20fill%3D'%238ca946'%2F%3E%3C%2Fsvg%3E"); +} +i.icon.icon-forward { + width: 12px; + height: 20px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2020'%3E%3Cpath%20d%3D'M2%2C20l-2-2l8-8L0%2C2l2-2l10%2C10L2%2C20z'%20fill%3D'%238ca946'%2F%3E%3C%2Fsvg%3E"); +} +i.icon.icon-bars { + width: 21px; + height: 14px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2021%2014'%3E%3Cpath%20fill%3D'%238ca946'%20d%3D'M0%2C0h2v2H0V0z%20M4%2C0h17v1H4V0z%20M0%2C6h2v2H0V6z%20M4%2C6h17v1H4V6z%20M0%2C12h2v2H0V12z%20M4%2C12h17v1H4V12z'%2F%3E%3C%2Fsvg%3E"); +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2ddpx) { + i.icon.icon-bars { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2042%2026'%3E%3Cpath%20fill%3D'%238ca946'%20d%3D'M0%2C0h4v4H0V0z%20M8%2C1h34v2H8V1z%20M0%2C11h4v4H0V11z%20M8%2C12h34v2H8V12z%20M0%2C22h4v4H0V22z%20M8%2C23h34v2H8V23z'%2F%3E%3C%2Fsvg%3E"); + height: 13px; + } +} +i.icon.icon-camera { + width: 25px; + height: 20px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2025%2020'%3E%3Cpath%20fill%3D'%238C8D92'%20d%3D'M13.3%2C5.5c-2.7%2C0-5%2C2.2-5%2C5s2.2%2C5%2C5%2C5c2.7%2C0%2C5-2.2%2C5-5S16%2C5.5%2C13.3%2C5.5z'%2F%3E%3Cpath%20fill%3D'%238C8D92'%20d%3D'M22.8%2C1.8h-3.3c-0.2-1.3-1-1.8-2-1.8H8.1c-1%2C0-1.8%2C0.4-2%2C1.8H2.8C1.4%2C1.8%2C0%2C2.8%2C0%2C4.2v12.6%20c0%2C1.4%2C1.4%2C2.5%2C2.8%2C2.5h20c1.4%2C0%2C2.2-1.1%2C2.2-2.5V4.2C25%2C2.8%2C24.2%2C1.8%2C22.8%2C1.8z%20M3.5%2C6.4C2.6%2C6.4%2C2%2C5.8%2C2%2C5c0-0.8%2C0.7-1.5%2C1.5-1.5%20S5%2C4.1%2C5%2C5C5%2C5.8%2C4.3%2C6.4%2C3.5%2C6.4z%20M13.3%2C16.8c-3.5%2C0-6.3-2.7-6.3-6.2c0-3.3%2C2.5-6.2%2C5.7-6.2h1.2c3.2%2C0%2C5.7%2C2.9%2C5.7%2C6.2%20C19.6%2C14.1%2C16.7%2C16.8%2C13.3%2C16.8z'%2F%3E%3C%2Fsvg%3E"); +} +i.icon.icon-f7 { + width: 29px; + height: 29px; + background-image: url("../img/i-f7-ios.png"); + border-radius: 6px; +} +i.icon.icon-next, +i.icon.icon-prev { + width: 15px; + height: 15px; +} +i.icon.icon-next { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%238ca946'%20d%3D'M1%2C1.6l11.8%2C5.8L1%2C13.4V1.6%20M0%2C0v15l15-7.6L0%2C0L0%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-prev { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%238ca946'%20d%3D'M14%2C1.6v11.8L2.2%2C7.6L14%2C1.6%20M15%2C0L0%2C7.6L15%2C15V0L15%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-plus { + width: 25px; + height: 25px; + font-size: 31px; + line-height: 20px; + text-align: center; + font-weight: 100; +} +.navbar .framework7-icons, +.navbar .f7-icons, +.toolbar .framework7-icons, +.toolbar .f7-icons { + font-size: 22px; +} +.tabbar .framework7-icons, +.tabbar .f7-icons, +.tabbar-labels .framework7-icons, +.tabbar-labels .f7-icons { + font-size: 25px; +} +/* === Content Block === */ +.content-block { + margin: 35px 0; + padding: 0 15px; + color: #6d6d72; + box-sizing: border-box; +} +.content-block.no-hairlines:before, +.content-block.no-hairlines ul:before, +.content-block.no-hairlines .content-block-inner:before { + display: none; +} +.content-block.no-hairlines:after, +.content-block.no-hairlines ul:after, +.content-block.no-hairlines .content-block-inner:after { + display: none; +} +.content-block-title { + position: relative; + overflow: hidden; + margin: 0; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 14px; + text-transform: uppercase; + line-height: 1; + color: #6d6d72; + margin: 35px 15px 10px; +} +.content-block-title + .list-block, +.content-block-title + .content-block, +.content-block-title + .card { + margin-top: 10px; +} +.content-block-inner { + background: #fff; + padding: 10px 15px; + margin-left: -15px; + width: 100%; + position: relative; + color: #000; +} +.content-block-inner:before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: auto; + right: auto; + height: 1px; + width: 100%; + background-color: #c8c7cc; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +html.pixel-ratio-2 .content-block-inner:before { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .content-block-inner:before { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.content-block-inner:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #c8c7cc; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .content-block-inner:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .content-block-inner:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.content-block.inset { + margin-left: 15px; + margin-right: 15px; + border-radius: 7px; +} +.content-block.inset .content-block-inner { + border-radius: 7px; +} +.content-block.inset .content-block-inner:before { + display: none; +} +.content-block.inset .content-block-inner:after { + display: none; +} +@media all and (min-width: 768px) { + .content-block.tablet-inset { + margin-left: 15px; + margin-right: 15px; + border-radius: 7px; + } + .content-block.tablet-inset .content-block-inner { + border-radius: 7px; + } + .content-block.tablet-inset .content-block-inner:before { + display: none; + } + .content-block.tablet-inset .content-block-inner:after { + display: none; + } +} +/* === Lists === */ +.list-block { + margin: 35px 0; + font-size: 17px; +} +.list-block ul { + background: #fff; + list-style: none; + padding: 0; + margin: 0; + position: relative; +} +.list-block ul:before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: auto; + right: auto; + height: 1px; + width: 100%; + background-color: #c8c7cc; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +html.pixel-ratio-2 .list-block ul:before { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .list-block ul:before { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.list-block ul:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #c8c7cc; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .list-block ul:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .list-block ul:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.list-block ul ul { + padding-left: 45px; +} +.list-block ul ul:before { + display: none; +} +.list-block ul ul:after { + display: none; +} +.list-block .align-top, +.list-block .align-top .item-content, +.list-block .align-top .item-inner { + -webkit-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; +} +.list-block.inset { + margin-left: 15px; + margin-right: 15px; + border-radius: 7px; +} +.list-block.inset .content-block-title { + margin-left: 0; + margin-right: 0; +} +.list-block.inset ul { + border-radius: 7px; +} +.list-block.inset ul:before { + display: none; +} +.list-block.inset ul:after { + display: none; +} +.list-block.inset li:first-child > a { + border-radius: 7px 7px 0 0; +} +.list-block.inset li:last-child > a { + border-radius: 0 0 7px 7px; +} +.list-block.inset li:first-child:last-child > a { + border-radius: 7px; +} +@media all and (min-width: 768px) { + .list-block.tablet-inset { + margin-left: 15px; + margin-right: 15px; + border-radius: 7px; + } + .list-block.tablet-inset .content-block-title { + margin-left: 0; + margin-right: 0; + } + .list-block.tablet-inset ul { + border-radius: 7px; + } + .list-block.tablet-inset ul:before { + display: none; + } + .list-block.tablet-inset ul:after { + display: none; + } + .list-block.tablet-inset li:first-child > a { + border-radius: 7px 7px 0 0; + } + .list-block.tablet-inset li:last-child > a { + border-radius: 0 0 7px 7px; + } + .list-block.tablet-inset li:first-child:last-child > a { + border-radius: 7px; + } + .list-block.tablet-inset .content-block-title { + margin-left: 0; + margin-right: 0; + } + .list-block.tablet-inset ul { + border-radius: 7px; + } + .list-block.tablet-inset ul:before { + display: none; + } + .list-block.tablet-inset ul:after { + display: none; + } + .list-block.tablet-inset li:first-child > a { + border-radius: 7px 7px 0 0; + } + .list-block.tablet-inset li:last-child > a { + border-radius: 0 0 7px 7px; + } + .list-block.tablet-inset li:first-child:last-child > a { + border-radius: 7px; + } +} +.list-block li { + box-sizing: border-box; + position: relative; +} +.list-block .item-media { + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + flex-shrink: 0; + -webkit-box-lines: single; + -moz-box-lines: single; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: none; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + box-sizing: border-box; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + padding-top: 7px; + padding-bottom: 8px; +} +.list-block .item-media i + i { + margin-left: 5px; +} +.list-block .item-media i + img { + margin-left: 5px; +} +.list-block .item-media + .item-inner { + margin-left: 15px; +} +.list-block .item-inner { + padding-right: 15px; + position: relative; + width: 100%; + padding-top: 8px; + padding-bottom: 7px; + min-height: 44px; + box-sizing: border-box; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-flex: 1; + -ms-flex: 1; + overflow: hidden; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-item-align: stretch; + -webkit-align-self: stretch; + align-self: stretch; +} +.list-block .item-inner:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #c8c7cc; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .list-block .item-inner:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .list-block .item-inner:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.list-block .item-title { + -webkit-flex-shrink: 1; + -ms-flex: 0 1 auto; + flex-shrink: 1; + min-width: 0; + white-space: nowrap; + position: relative; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; +} +.list-block .item-after { + white-space: nowrap; + color: #8e8e93; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + flex-shrink: 0; + margin-left: 5px; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + max-height: 28px; +} +.list-block .smart-select .item-after, +.list-block .autocomplete-opener .item-after { + max-width: 70%; + overflow: hidden; + text-overflow: ellipsis; + position: relative; + display: block; +} +.list-block .item-link { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + display: block; + color: inherit; +} +.list-block .item-link .item-inner { + padding-right: 35px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%2060%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'm60%2061.5-38.25%2038.25-9.75-9.75%2029.25-28.5-29.25-28.5%209.75-9.75z'%20fill%3D'%23c7c7cc'%2F%3E%3C%2Fsvg%3E"); + background-size: 10px 20px; + background-repeat: no-repeat; + background-position: 95% center; + background-position: -webkit-calc(100% - 15px) center; + background-position: calc(100% - 15px) center; +} +html:not(.watch-active-state) .list-block .item-link:active, +.list-block .item-link.active-state { + -webkit-transition-duration: 0ms; + transition-duration: 0ms; + background-color: #d9d9d9; +} +html:not(.watch-active-state) .list-block .item-link:active .item-inner:after, +.list-block .item-link.active-state .item-inner:after { + background-color: transparent; +} +.list-block .item-link.list-button { + padding: 0 15px; + text-align: center; + color: #007aff; + display: block; + line-height: 43px; +} +.list-block .item-link.list-button:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #c8c7cc; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .list-block .item-link.list-button:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .list-block .item-link.list-button:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.list-block .item-content { + box-sizing: border-box; + padding-left: 15px; + min-height: 44px; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +.list-block .list-block-label { + margin: 10px 0 35px; + padding: 0 15px; + font-size: 14px; + color: #8f8f94; +} +.list-block .swipeout { + overflow: hidden; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; +} +.list-block .swipeout.deleting { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.list-block .swipeout.deleting .swipeout-content { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); +} +.list-block .swipeout.transitioning .swipeout-content, +.list-block .swipeout.transitioning .swipeout-actions-right a, +.list-block .swipeout.transitioning .swipeout-actions-left a, +.list-block .swipeout.transitioning .swipeout-overswipe { + -webkit-transition: 300ms; + transition: 300ms; +} +.list-block .swipeout-content { + position: relative; + z-index: 10; +} +.list-block .swipeout-overswipe { + -webkit-transition: 200ms left; + transition: 200ms left; +} +.list-block .swipeout-actions-left, +.list-block .swipeout-actions-right { + position: absolute; + top: 0; + height: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; +} +.list-block .swipeout-actions-left a, +.list-block .swipeout-actions-right a { + padding: 0 30px; + color: #fff; + background: #c7c7cc; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + position: relative; + left: 0; +} +.list-block .swipeout-actions-left a:after, +.list-block .swipeout-actions-right a:after { + content: ''; + position: absolute; + top: 0; + width: 600%; + height: 100%; + background: inherit; + z-index: -1; +} +.list-block .swipeout-actions-left a.swipeout-delete, +.list-block .swipeout-actions-right a.swipeout-delete { + background: #ff3b30; +} +.list-block .swipeout-actions-right { + right: 0%; + -webkit-transform: translateX(100%); + transform: translateX(100%); +} +.list-block .swipeout-actions-right a:after { + left: 100%; + margin-left: -1px; +} +.list-block .swipeout-actions-left { + left: 0%; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); +} +.list-block .swipeout-actions-left a:after { + right: 100%; + margin-right: -1px; +} +.list-block .item-subtitle { + font-size: 15px; + position: relative; + overflow: hidden; + white-space: nowrap; + max-width: 100%; + text-overflow: ellipsis; +} +.list-block .item-text { + font-size: 15px; + color: #8e8e93; + line-height: 21px; + position: relative; + overflow: hidden; + height: 42px; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + display: -webkit-box; +} +.list-block.media-list .item-title, +.list-block li.media-item .item-title { + font-weight: 500; +} +html.ios-gt-8 .list-block.media-list .item-title, +html.ios-gt-8 .list-block li.media-item .item-title { + font-weight: 600; +} +.list-block.media-list .item-inner, +.list-block li.media-item .item-inner { + display: block; + padding-top: 10px; + padding-bottom: 9px; + -ms-flex-item-align: stretch; + -webkit-align-self: stretch; + align-self: stretch; +} +.list-block.media-list .item-link .item-inner, +.list-block li.media-item .item-link .item-inner { + background: none; + padding-right: 15px; +} +.list-block.media-list .item-link .item-title-row, +.list-block li.media-item .item-link .item-title-row { + padding-right: 20px; + background: no-repeat right center; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%2060%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'm60%2061.5-38.25%2038.25-9.75-9.75%2029.25-28.5-29.25-28.5%209.75-9.75z'%20fill%3D'%23c7c7cc'%2F%3E%3C%2Fsvg%3E"); + background-size: 10px 20px; +} +.list-block.media-list .item-media, +.list-block li.media-item .item-media { + padding-top: 9px; + padding-bottom: 10px; +} +.list-block.media-list .item-media img, +.list-block li.media-item .item-media img { + display: block; +} +.list-block.media-list .item-title-row, +.list-block li.media-item .item-title-row { + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; +} +.list-block.media-list .item-content > .item-after, +.list-block li.media-item .item-content > .item-after { + margin-right: 15px; + margin-left: 15px; +} +.list-block .list-group ul:after, +.list-block .list-group ul:before { + z-index: 25; +} +.list-block .list-group + .list-group ul:before { + display: none; +} +.list-block .item-divider, +.list-block .list-group-title { + background: #F7F7F7; + margin-top: -1px; + padding: 4px 15px; + white-space: nowrap; + position: relative; + max-width: 100%; + text-overflow: ellipsis; + overflow: hidden; + color: #8e8e93; + z-index: 15; +} +.list-block .item-divider:before, +.list-block .list-group-title:before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: auto; + right: auto; + height: 1px; + width: 100%; + background-color: #c8c7cc; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +html.pixel-ratio-2 .list-block .item-divider:before, +html.pixel-ratio-2 .list-block .list-group-title:before { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .list-block .item-divider:before, +html.pixel-ratio-3 .list-block .list-group-title:before { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.list-block .list-group-title { + position: relative; + position: -webkit-sticky; + position: -moz-sticky; + position: sticky; + top: 0px; + z-index: 20; + margin-top: 0; +} +.list-block .list-group-title:before { + display: none; +} +.list-block .sortable-handler { + position: absolute; + right: 0; + top: 0; + bottom: 1px; + z-index: 10; + background-repeat: no-repeat; + background-size: 18px 12px; + background-position: center; + width: 35px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2018%2012'%20fill%3D'%23c7c7cc'%3E%3Cpath%20d%3D'M0%2C2V0h22v2H0z'%2F%3E%3Cpath%20d%3D'M0%2C7V5h22v2H0z'%2F%3E%3Cpath%20d%3D'M0%2C12v-2h22v2H0z'%2F%3E%3C%2Fsvg%3E"); + opacity: 0; + visibility: hidden; + cursor: pointer; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.list-block.sortable .item-inner { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.list-block.sortable-opened .sortable-handler { + visibility: visible; + opacity: 1; +} +.list-block.sortable-opened .item-inner, +.list-block.sortable-opened .item-link .item-inner { + padding-right: 35px; +} +.list-block.sortable-opened .item-link .item-inner, +.list-block.sortable-opened .item-link .item-title-row { + background-image: none; +} +.list-block.sortable-sorting li { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.list-block li.sorting { + z-index: 50; + background: rgba(255, 255, 255, 0.8); + box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6); + -webkit-transition-duration: 0ms; + transition-duration: 0ms; +} +.list-block li.sorting .item-inner:after { + display: none; +} +.list-block li:last-child .list-button:after { + display: none; +} +.list-block li:last-child .item-inner:after, +.list-block li:last-child li:last-child .item-inner:after { + display: none; +} +.list-block li li:last-child .item-inner:after, +.list-block li:last-child li .item-inner:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #c8c7cc; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .list-block li li:last-child .item-inner:after, +html.pixel-ratio-2 .list-block li:last-child li .item-inner:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .list-block li li:last-child .item-inner:after, +html.pixel-ratio-3 .list-block li:last-child li .item-inner:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.list-block.no-hairlines:before, +.list-block.no-hairlines ul:before, +.list-block.no-hairlines .content-block-inner:before { + display: none; +} +.list-block.no-hairlines:after, +.list-block.no-hairlines ul:after, +.list-block.no-hairlines .content-block-inner:after { + display: none; +} +.list-block.no-hairlines-between .item-inner:after, +.list-block.no-hairlines-between .list-button:after, +.list-block.no-hairlines-between .item-divider:after, +.list-block.no-hairlines-between .list-group-title:after, +.list-block.no-hairlines-between .list-group-title:after { + display: none; +} +/* === Forms === */ +.list-block input[type="text"], +.list-block input[type="password"], +.list-block input[type="search"], +.list-block input[type="email"], +.list-block input[type="tel"], +.list-block input[type="url"], +.list-block input[type="date"], +.list-block input[type="datetime-local"], +.list-block input[type="time"], +.list-block input[type="number"], +.list-block select, +.list-block textarea { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + box-sizing: border-box; + border: none; + background: none; + border-radius: 0 0 0 0; + box-shadow: none; + display: block; + padding: 0px; + margin: 0; + width: 100%; + height: 43px; + color: #000; + font-size: 17px; + font-family: inherit; +} +.list-block .item-title.label { + vertical-align: top; +} +.list-block .item-title.label + .item-input { + margin-left: 5px; +} +.list-block input[type="date"], +.list-block input[type="datetime-local"] { + line-height: 44px; +} +.list-block select { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; +} +.list-block textarea { + height: 100px; + resize: none; + line-height: 1.4; + padding-top: 8px; + padding-bottom: 7px; +} +.list-block textarea.resizable { + height: 43px; +} +.list-block .item-input { + width: 100%; + margin-top: -8px; + margin-bottom: -7px; + -webkit-box-flex: 1; + -ms-flex: 1; + -webkit-flex-shrink: 1; + -ms-flex: 0 1 auto; + flex-shrink: 1; +} +.list-block .item-title.label { + width: 35%; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + flex-shrink: 0; +} +.label-switch { + display: inline-block; + vertical-align: middle; + width: 52px; + border-radius: 16px; + box-sizing: border-box; + height: 32px; + position: relative; + cursor: pointer; + -ms-flex-item-align: center; + -webkit-align-self: center; + align-self: center; +} +.label-switch .checkbox { + width: 52px; + border-radius: 16px; + box-sizing: border-box; + height: 32px; + background: #e5e5e5; + z-index: 0; + margin: 0; + padding: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + border: none; + cursor: pointer; + position: relative; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.label-switch .checkbox:before { + content: ' '; + position: absolute; + left: 2px; + top: 2px; + width: 48px; + border-radius: 16px; + box-sizing: border-box; + height: 28px; + background: #fff; + z-index: 1; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-transform: scale(1); + transform: scale(1); +} +.label-switch .checkbox:after { + content: ' '; + height: 28px; + width: 28px; + border-radius: 28px; + background: #fff; + position: absolute; + z-index: 2; + top: 2px; + left: 2px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); + -webkit-transform: translateX(0px); + transform: translateX(0px); + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.label-switch input[type="checkbox"] { + display: none; +} +.label-switch input[type="checkbox"]:checked + .checkbox { + background: #4cd964; +} +.label-switch input[type="checkbox"]:checked + .checkbox:before { + -webkit-transform: scale(0); + transform: scale(0); +} +.label-switch input[type="checkbox"]:checked + .checkbox:after { + -webkit-transform: translateX(20px); + transform: translateX(20px); +} +html.android .label-switch input[type="checkbox"] + .checkbox { + -webkit-transition-duration: 0; + transition-duration: 0; +} +html.android .label-switch input[type="checkbox"] + .checkbox:after, +html.android .label-switch input[type="checkbox"] + .checkbox:before { + -webkit-transition-duration: 0; + transition-duration: 0; +} +.button { + border: 1px solid #8ca946; + color: #8ca946; + text-decoration: none; + text-align: center; + display: block; + border-radius: 5px; + line-height: 27px; + box-sizing: border-box; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background: none; + padding: 0 10px; + margin: 0; + height: 29px; + white-space: nowrap; + position: relative; + overflow: hidden; + text-overflow: ellipsis; + font-size: 14px; + font-family: inherit; + cursor: pointer; + outline: 0; +} +input[type="submit"].button, +input[type="button"].button { + width: 100%; +} +html:not(.watch-active-state) .button:active, +.button.active-state { + background: rgba(140, 169, 70, 0.15); +} +.button.button-round { + border-radius: 27px; +} +.button.active { + background: #8ca946; + color: #fff; +} +.button.button-big { + font-size: 17px; + height: 44px; + line-height: 42px; +} +.button.button-fill { + color: #fff; + background: #8ca946; + border-color: transparent; +} +html:not(.watch-active-state) .button.button-fill:active, +.button.button-fill.active-state { + opacity: 0.8; +} +.button i.icon:first-child { + margin-right: 10px; +} +.button i.icon:last-child { + margin-left: 10px; +} +.button i.icon:first-child:last-child { + margin-left: 0; + margin-right: 0; +} +.buttons-row { + -ms-flex-item-align: center; + -webkit-align-self: center; + align-self: center; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-lines: single; + -moz-box-lines: single; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: none; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; +} +.buttons-row .button { + border-radius: 0 0 0 0; + border-left-width: 0; + width: 100%; + -webkit-box-flex: 1; + -ms-flex: 1; +} +.buttons-row .button:first-child { + border-radius: 5px 0 0 5px; + border-left-width: 1px; + border-left-style: solid; +} +.buttons-row .button:last-child { + border-radius: 0 5px 5px 0; +} +.buttons-row .button:first-child:last-child { + border-radius: 5px; +} +.buttons-row .button.button-round:first-child { + border-radius: 27px 0 0 27px; +} +.buttons-row .button.button-round:last-child { + border-radius: 0 27px 27px 0; +} +.range-slider { + width: 100%; + position: relative; + overflow: hidden; + padding-left: 3px; + padding-right: 3px; + margin-left: -1px; + -ms-flex-item-align: center; + -webkit-align-self: center; + align-self: center; +} +.range-slider input[type="range"] { + position: relative; + height: 28px; + width: 100%; + margin: 4px 0 5px 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #b7b8b7), color-stop(100%, #b7b8b7)); + background: linear-gradient(to right, #b7b8b7 0, #b7b8b7 100%); + background-position: center; + background-size: 100% 2px; + background-repeat: no-repeat; + outline: 0; + border: none; + box-sizing: content-box; + -ms-background-position-y: 500px; +} +.range-slider input[type="range"]:focus, +.range-slider input[type="range"]:active { + border: 0; + outline: 0; +} +.range-slider input[type="range"]:after { + height: 2px; + background: #fff; + content: ' '; + width: 5px; + top: 50%; + margin-top: -1px; + left: -5px; + z-index: 1; + position: absolute; +} +.range-slider input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + border: none; + height: 28px; + width: 28px; + position: relative; + background: none; +} +.range-slider input[type="range"]::-webkit-slider-thumb:after { + height: 28px; + width: 28px; + border-radius: 28px; + background: #fff; + z-index: 10; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); + border: 0; + outline: 0; + position: absolute; + box-sizing: border-box; + content: ' '; + left: 0; + top: 0; +} +.range-slider input[type="range"]::-webkit-slider-thumb:before { + position: absolute; + top: 50%; + right: 100%; + width: 2000px; + height: 2px; + margin-top: -1px; + z-index: 1; + background: #8ca946; + content: ' '; +} +.range-slider input[type="range"]::-moz-range-track { + width: 100%; + height: 2px; + background: #b7b8b7; + border: none; + outline: 0; +} +.range-slider input[type="range"]::-moz-range-thumb { + height: 28px; + width: 28px; + border-radius: 28px; + background: #fff; + z-index: 10; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); + border: 0; + outline: 0; + position: absolute; + box-sizing: border-box; + content: ' '; +} +.range-slider input[type="range"]::-ms-track { + width: 100%; + height: 2px; + cursor: pointer; + background: transparent; + border-color: transparent; + color: transparent; +} +.range-slider input[type="range"]::-ms-thumb { + height: 28px; + width: 28px; + border-radius: 28px; + background: #fff; + z-index: 10; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); + border: 0; + outline: 0; + position: absolute; + content: ' '; + box-shadow: none; + border: 1px solid rgba(0, 0, 0, 0.2); + box-sizing: border-box; + margin-top: 0; + top: 50%; +} +.range-slider input[type="range"]::-ms-fill-lower { + background: #8ca946; +} +.range-slider input[type="range"]::-ms-fill-upper { + background: #b7b8b7; +} +label.label-checkbox { + cursor: pointer; +} +label.label-checkbox i.icon-form-checkbox { + width: 22px; + height: 22px; + position: relative; + border-radius: 22px; + border: 1px solid #c7c7cc; + box-sizing: border-box; +} +label.label-checkbox i.icon-form-checkbox:after { + content: ' '; + position: absolute; + left: 50%; + margin-left: -6px; + top: 50%; + margin-top: -4px; + width: 12px; + height: 9px; +} +label.label-checkbox input[type="checkbox"], +label.label-checkbox input[type="radio"] { + display: none; +} +label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox, +label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox { + border: none; + background-color: #8ca946; +} +label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox:after, +label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox:after { + background: no-repeat center; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2012%209'%20xml%3Aspace%3D'preserve'%3E%3Cpolygon%20fill%3D'%23ffffff'%20points%3D'12%2C0.7%2011.3%2C0%203.9%2C7.4%200.7%2C4.2%200%2C4.9%203.9%2C8.8%203.9%2C8.8%203.9%2C8.8%20'%2F%3E%3C%2Fsvg%3E"); + -webkit-background-size: 12px 9px; + background-size: 12px 9px; +} +label.label-radio { + cursor: pointer; +} +label.label-radio input[type="checkbox"], +label.label-radio input[type="radio"] { + display: none; +} +label.label-radio input[type="checkbox"] ~ .item-inner, +label.label-radio input[type="radio"] ~ .item-inner { + padding-right: 35px; +} +label.label-radio input[type="checkbox"]:checked ~ .item-inner, +label.label-radio input[type="radio"]:checked ~ .item-inner { + background: no-repeat center; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2013%2010'%3E%3Cpolygon%20fill%3D'%238ca946'%20points%3D'11.6%2C0%204.4%2C7.2%201.4%2C4.2%200%2C5.6%204.4%2C10%204.4%2C10%204.4%2C10%2013%2C1.4%20'%2F%3E%3C%2Fsvg%3E"); + background-position: 90% center; + background-position: -webkit-calc(100% - 15px) center; + background-position: calc(100% - 15px) center; + -webkit-background-size: 13px 10px; + background-size: 13px 10px; +} +label.label-checkbox, +label.label-radio { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +html:not(.watch-active-state) label.label-checkbox:active, +html:not(.watch-active-state) label.label-radio:active, +label.label-checkbox.active-state, +label.label-radio.active-state { + -webkit-transition-duration: 0ms; + transition-duration: 0ms; + background-color: #d9d9d9; +} +html:not(.watch-active-state) label.label-checkbox:active .item-inner:after, +html:not(.watch-active-state) label.label-radio:active .item-inner:after, +label.label-checkbox.active-state .item-inner:after, +label.label-radio.active-state .item-inner:after { + background-color: transparent; +} +.smart-select select { + display: none; +} +/* === Cards === */ +.cards-list ul, +.card .list-block ul { + background: none; +} +.cards-list > ul:before, +.card .list-block > ul:before { + display: none; +} +.cards-list > ul:after, +.card .list-block > ul:after { + display: none; +} +.card { + background: #fff; + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); + margin: 10px; + position: relative; + border-radius: 2px; + font-size: 14px; +} +.card .list-block, +.card .content-block { + margin: 0; +} +.row:not(.no-gutter) .col > .card { + margin-left: 0; + margin-right: 0; +} +.card-content { + position: relative; +} +.card-content-inner { + padding: 15px; + position: relative; +} +.card-content-inner > p:first-child { + margin-top: 0; +} +.card-content-inner > p:last-child { + margin-bottom: 0; +} +.card-content-inner > .list-block, +.card-content-inner > .content-block { + margin: -15px; +} +.card-header, +.card-footer { + min-height: 44px; + position: relative; + padding: 10px 15px; + box-sizing: border-box; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +.card-header[valign="top"], +.card-footer[valign="top"] { + -webkit-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; +} +.card-header[valign="bottom"], +.card-footer[valign="bottom"] { + -webkit-box-align: end; + -ms-flex-align: end; + -webkit-align-items: flex-end; + align-items: flex-end; +} +.card-header a.link, +.card-footer a.link { + line-height: 44px; + height: 44px; + text-decoration: none; + position: relative; + margin-top: -10px; + margin-bottom: -10px; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +html:not(.watch-active-state) .card-header a.link:active, +html:not(.watch-active-state) .card-footer a.link:active, +.card-header a.link.active-state, +.card-footer a.link.active-state { + opacity: 0.3; + -webkit-transition-duration: 0ms; + transition-duration: 0ms; +} +.card-header a.link i + span, +.card-footer a.link i + span, +.card-header a.link i + i, +.card-footer a.link i + i, +.card-header a.link span + i, +.card-footer a.link span + i, +.card-header a.link span + span, +.card-footer a.link span + span { + margin-left: 7px; +} +.card-header a.link i.icon, +.card-footer a.link i.icon { + display: block; +} +.card-header a.icon-only, +.card-footer a.icon-only { + min-width: 44px; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + margin: 0; +} +.card-header { + border-radius: 2px 2px 0 0; + font-size: 17px; +} +.card-header:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #e1e1e1; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .card-header:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .card-header:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.card-header.no-border:after { + display: none; +} +.card-footer { + border-radius: 0 0 2px 2px; + color: #6d6d72; +} +.card-footer:before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: auto; + right: auto; + height: 1px; + width: 100%; + background-color: #e1e1e1; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +html.pixel-ratio-2 .card-footer:before { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .card-footer:before { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.card-footer.no-border:before { + display: none; +} +/* === Modals === */ +.modal-overlay, +.preloader-indicator-overlay, +.popup-overlay { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.4); + z-index: 13000; + visibility: hidden; + opacity: 0; + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.modal-overlay.modal-overlay-visible, +.preloader-indicator-overlay.modal-overlay-visible, +.popup-overlay.modal-overlay-visible { + visibility: visible; + opacity: 1; +} +.popup-overlay { + z-index: 10500; +} +.modal { + width: 270px; + position: absolute; + z-index: 13500; + left: 50%; + margin-left: -135px; + margin-top: 0; + top: 50%; + text-align: center; + border-radius: 13px; + overflow: hidden; + opacity: 0; + -webkit-transform: translate3d(0, 0, 0) scale(1.185); + transform: translate3d(0, 0, 0) scale(1.185); + -webkit-transition-property: -webkit-transform, opacity; + -moz-transition-property: -moz-transform, opacity; + -ms-transition-property: -ms-transform, opacity; + -o-transition-property: -o-transform, opacity; + transition-property: transform, opacity; + color: #000; + display: none; +} +.modal.modal-in { + opacity: 1; + -webkit-transition-duration: 400ms; + transition-duration: 400ms; + -webkit-transform: translate3d(0, 0, 0) scale(1); + transform: translate3d(0, 0, 0) scale(1); +} +.modal.modal-out { + opacity: 0; + z-index: 13499; + -webkit-transition-duration: 400ms; + transition-duration: 400ms; + -webkit-transform: translate3d(0, 0, 0) scale(1); + transform: translate3d(0, 0, 0) scale(1); +} +.modal-inner { + padding: 15px; + border-radius: 13px 13px 0 0; + position: relative; + background: rgba(255, 255, 255, 0.95); +} +.modal-inner:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: rgba(0, 0, 0, 0.2); + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .modal-inner:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .modal-inner:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.modal-title { + font-weight: 500; + font-size: 18px; + text-align: center; +} +html.ios-gt-8 .modal-title { + font-weight: 600; +} +.modal-title + .modal-text { + margin-top: 5px; +} +.modal-buttons { + height: 44px; + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} +.modal-buttons.modal-buttons-vertical { + display: block; + height: auto; +} +.modal-button { + width: 100%; + padding: 0 5px; + height: 44px; + font-size: 17px; + line-height: 44px; + text-align: center; + color: #8ca946; + display: block; + position: relative; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + cursor: pointer; + box-sizing: border-box; + -webkit-box-flex: 1; + -ms-flex: 1; + background: rgba(255, 255, 255, 0.95); +} +.modal-button:after { + content: ''; + position: absolute; + right: 0; + top: 0; + left: auto; + bottom: auto; + width: 1px; + height: 100%; + background-color: rgba(0, 0, 0, 0.2); + display: block; + z-index: 15; + -webkit-transform-origin: 100% 50%; + transform-origin: 100% 50%; +} +html.pixel-ratio-2 .modal-button:after { + -webkit-transform: scaleX(0.5); + transform: scaleX(0.5); +} +html.pixel-ratio-3 .modal-button:after { + -webkit-transform: scaleX(0.33); + transform: scaleX(0.33); +} +.modal-button:first-child { + border-radius: 0 0 0 13px; +} +.modal-button:last-child { + border-radius: 0 0 13px 0; +} +.modal-button:last-child:after { + display: none; +} +.modal-button:first-child:last-child { + border-radius: 0 0 13px 13px; +} +.modal-button.modal-button-bold { + font-weight: 500; +} +html.ios-gt-8 .modal-button.modal-button-bold { + font-weight: 600; +} +html:not(.watch-active-state) .modal-button:active, +.modal-button.active-state { + background: rgba(230, 230, 230, 0.95); +} +.modal-buttons-vertical .modal-button { + border-radius: 0; +} +.modal-buttons-vertical .modal-button:after { + display: none; +} +.modal-buttons-vertical .modal-button:before { + display: none; +} +.modal-buttons-vertical .modal-button:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: rgba(0, 0, 0, 0.2); + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .modal-buttons-vertical .modal-button:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .modal-buttons-vertical .modal-button:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.modal-buttons-vertical .modal-button:last-child { + border-radius: 0 0 13px 13px; +} +.modal-buttons-vertical .modal-button:last-child:after { + display: none; +} +.modal-no-buttons .modal-inner { + border-radius: 13px; +} +.modal-no-buttons .modal-inner:after { + display: none; +} +.modal-no-buttons .modal-buttons { + display: none; +} +.actions-modal { + position: absolute; + left: 0; + bottom: 0; + z-index: 13500; + width: 100%; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + max-height: 100%; + overflow: auto; + -webkit-overflow-scrolling: touch; +} +@media (min-width: 496px) { + .actions-modal { + width: 480px; + left: 50%; + margin-left: -240px; + } +} +.actions-modal.modal-in { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.actions-modal.modal-out { + z-index: 13499; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +.actions-modal-group { + margin: 8px; + position: relative; + border-radius: 13px; + overflow: hidden; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.actions-modal-button, +.actions-modal-label { + width: 100%; + text-align: center; + font-weight: normal; + margin: 0; + background: rgba(255, 255, 255, 0.95); + box-sizing: border-box; + display: block; + position: relative; + overflow: hidden; +} +.actions-modal-button:after, +.actions-modal-label:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: rgba(0, 0, 0, 0.2); + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .actions-modal-button:after, +html.pixel-ratio-2 .actions-modal-label:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .actions-modal-button:after, +html.pixel-ratio-3 .actions-modal-label:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.actions-modal-button a, +.actions-modal-label a { + text-decoration: none; + color: inherit; + display: block; +} +.actions-modal-button b, +.actions-modal-label b { + font-weight: 500; +} +html.ios-gt-8 .actions-modal-button b, +html.ios-gt-8 .actions-modal-label b { + font-weight: 600; +} +.actions-modal-button.actions-modal-button-bold, +.actions-modal-label.actions-modal-button-bold { + font-weight: 500; +} +html.ios-gt-8 .actions-modal-button.actions-modal-button-bold, +html.ios-gt-8 .actions-modal-label.actions-modal-button-bold { + font-weight: 600; +} +.actions-modal-button.actions-modal-button-red, +.actions-modal-label.actions-modal-button-red { + color: #ff3b30; +} +.actions-modal-button:first-child, +.actions-modal-label:first-child { + border-radius: 13px 13px 0 0; +} +.actions-modal-button:last-child, +.actions-modal-label:last-child { + border-radius: 0 0 13px 13px; +} +.actions-modal-button:last-child:after, +.actions-modal-label:last-child:after { + display: none; +} +.actions-modal-button:first-child:last-child, +.actions-modal-label:first-child:last-child { + border-radius: 13px; +} +.actions-modal-button.disabled, +.actions-modal-label.disabled { + opacity: 0.9; + color: #8e8e93; +} +.actions-modal-button { + cursor: pointer; + height: 57px; + line-height: 57px; + font-size: 20px; + color: #8ca946; + white-space: normal; + text-overflow: ellipsis; +} +html:not(.watch-active-state) .actions-modal-button:active, +.actions-modal-button.active-state { + background: rgba(230, 230, 230, 0.9); +} +.actions-modal-label { + font-size: 13px; + line-height: 1.3; + min-height: 57px; + padding: 8px 10px; + color: #8a8a8a; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +@media (orientation: landscape) { + .actions-modal-label { + min-height: 44px; + } + .actions-modal-button { + height: 44px; + line-height: 44px; + } +} +input.modal-text-input { + box-sizing: border-box; + height: 26px; + background: #fff; + margin: 0; + margin-top: 15px; + padding: 0 5px; + border: 1px solid rgba(0, 0, 0, 0.3); + border-radius: 0; + width: 100%; + font-size: 14px; + font-family: inherit; + display: block; + box-shadow: 0 0 0 rgba(0, 0, 0, 0); + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; +} +input.modal-text-input + input.modal-text-input { + margin-top: 5px; +} +.modal-input-double + .modal-input-double input.modal-text-input { + border-top: 0; + margin-top: 0; +} +.popover { + width: 320px; + background: rgba(255, 255, 255, 0.95); + z-index: 13500; + margin: 0; + top: 0; + opacity: 0; + left: 0; + border-radius: 13px; + position: absolute; + display: none; + -webkit-transform: none; + transform: none; + -webkit-transition-property: opacity; + -moz-transition-property: opacity; + -ms-transition-property: opacity; + -o-transition-property: opacity; + transition-property: opacity; +} +.popover.modal-in { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + opacity: 1; +} +.popover .list-block { + margin: 0; +} +.popover .list-block ul { + background: none; +} +.popover .list-block:first-child ul { + border-radius: 13px 13px 0 0; +} +.popover .list-block:first-child ul:before { + display: none; +} +.popover .list-block:first-child li:first-child a { + border-radius: 13px 13px 0 0; +} +.popover .list-block:last-child ul { + border-radius: 0 0 13px 13px; +} +.popover .list-block:last-child ul:after { + display: none; +} +.popover .list-block:last-child li:last-child a { + border-radius: 0 0 13px 13px; +} +.popover .list-block:first-child:last-child li:first-child:last-child a, +.popover .list-block:first-child:last-child ul:first-child:last-child { + border-radius: 13px; +} +.popover .list-block + .list-block { + margin-top: 35px; +} +.popover-angle { + width: 26px; + height: 26px; + position: absolute; + left: -26px; + top: 0; + z-index: 100; + overflow: hidden; +} +.popover-angle:after { + content: ' '; + background: rgba(255, 255, 255, 0.95); + width: 26px; + height: 26px; + position: absolute; + left: 0; + top: 0; + border-radius: 3px; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} +.popover-angle.on-left { + left: -26px; +} +.popover-angle.on-left:after { + left: 19px; + top: 0; +} +.popover-angle.on-right { + left: 100%; +} +.popover-angle.on-right:after { + left: -19px; + top: 0; +} +.popover-angle.on-top { + left: 0; + top: -26px; +} +.popover-angle.on-top:after { + left: 0; + top: 19px; +} +.popover-angle.on-bottom { + left: 0; + top: 100%; +} +.popover-angle.on-bottom:after { + left: 0; + top: -19px; +} +.popover-inner { + overflow: auto; + -webkit-overflow-scrolling: touch; +} +.actions-popover .list-block + .list-block { + margin-top: 20px; +} +.actions-popover .list-block ul { + background: #fff; +} +.actions-popover-label { + padding: 8px 10px; + color: #8a8a8a; + font-size: 13px; + line-height: 1.3; + text-align: center; + position: relative; +} +.actions-popover-label:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: rgba(0, 0, 0, 0.2); + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .actions-popover-label:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .actions-popover-label:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.actions-popover-label:last-child:after { + display: none; +} +.popup, +.login-screen { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 11000; + background: #fff; + box-sizing: border-box; + display: none; + overflow: auto; + -webkit-overflow-scrolling: touch; + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + -ms-transition-property: -ms-transform; + -o-transition-property: -o-transform; + transition-property: transform; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +.popup.modal-in, +.login-screen.modal-in, +.popup.modal-out, +.login-screen.modal-out { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.popup.modal-in, +.login-screen.modal-in { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.popup.modal-out, +.login-screen.modal-out { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +.login-screen.modal-in, +.login-screen.modal-out { + display: block; +} +@media all and (min-width: 630px) and (min-height: 630px) { + .popup:not(.tablet-fullscreen) { + width: 630px; + height: 630px; + left: 50%; + top: 50%; + margin-left: -315px; + margin-top: -315px; + -webkit-transform: translate3d(0, 1024px, 0); + transform: translate3d(0, 1024px, 0); + } + .popup:not(.tablet-fullscreen).modal-in { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + .popup:not(.tablet-fullscreen).modal-out { + -webkit-transform: translate3d(0, 1024px, 0); + transform: translate3d(0, 1024px, 0); + } +} +@media all and (max-width: 629px), (max-height: 629px) { + html.with-statusbar-overlay .popup { + height: -webkit-calc(100% - 20px); + height: calc(100% - 20px); + top: 20px; + } + html.with-statusbar-overlay .popup-overlay { + z-index: 9500; + } +} +html.with-statusbar-overlay .login-screen, +html.with-statusbar-overlay .popup.tablet-fullscreen { + height: -webkit-calc(100% - 20px); + height: calc(100% - 20px); + top: 20px; +} +.modal .preloader { + width: 34px; + height: 34px; +} +.preloader-indicator-overlay { + visibility: visible; + opacity: 0; + background: none; +} +.preloader-indicator-modal { + position: absolute; + left: 50%; + top: 50%; + padding: 8px; + margin-left: -25px; + margin-top: -25px; + background: rgba(0, 0, 0, 0.8); + z-index: 13500; + border-radius: 5px; +} +.preloader-indicator-modal .preloader { + display: block; + width: 34px; + height: 34px; +} +.picker-modal { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 260px; + z-index: 12500; + display: none; + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + -ms-transition-property: -ms-transform; + -o-transition-property: -o-transform; + transition-property: transform; + background: #cfd5da; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +.picker-modal.modal-in, +.picker-modal.modal-out { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.picker-modal.modal-in { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.picker-modal.modal-out { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +.picker-modal .picker-modal-inner { + height: 100%; + position: relative; +} +.picker-modal .toolbar { + position: relative; + width: 100%; + background: #f7f7f8; +} +.picker-modal .toolbar:before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: auto; + right: auto; + height: 1px; + width: 100%; + background-color: #929499; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +html.pixel-ratio-2 .picker-modal .toolbar:before { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .picker-modal .toolbar:before { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.picker-modal .toolbar + .picker-modal-inner { + height: -webkit-calc(100% - 44px); + height: -moz-calc(100% - 44px); + height: calc(100% - 44px); +} +.picker-modal.picker-modal-inline, +.popover .picker-modal { + display: block; + position: relative; + background: none; + z-index: inherit; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.picker-modal.picker-modal-inline .toolbar:before, +.popover .picker-modal .toolbar:before { + display: none; +} +.picker-modal.picker-modal-inline .toolbar:after, +.popover .picker-modal .toolbar:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #929499; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .picker-modal.picker-modal-inline .toolbar:after, +html.pixel-ratio-2 .popover .picker-modal .toolbar:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .picker-modal.picker-modal-inline .toolbar:after, +html.pixel-ratio-3 .popover .picker-modal .toolbar:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.popover .picker-modal { + width: auto; +} +.popover .picker-modal .toolbar { + background: none; +} +.picker-modal.smart-select-picker .page { + background: #fff; +} +.picker-modal.smart-select-picker .toolbar:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #c4c4c4; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .picker-modal.smart-select-picker .toolbar:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .picker-modal.smart-select-picker .toolbar:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.picker-modal.smart-select-picker .list-block { + margin: 0; +} +.picker-modal.smart-select-picker .list-block ul:before { + display: none; +} +.picker-modal.smart-select-picker .list-block ul:after { + display: none; +} +/* === Panels === */ +.panel-overlay { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0); + opacity: 0; + z-index: 5999; + display: none; +} +.panel { + z-index: 1000; + display: none; + background: #111; + box-sizing: border-box; + overflow: auto; + -webkit-overflow-scrolling: touch; + position: absolute; + width: 260px; + top: 0; + height: 100%; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.panel.panel-left.panel-cover { + z-index: 6000; + left: -260px; +} +.panel.panel-left.panel-reveal { + left: 0; +} +.panel.panel-right.panel-cover { + z-index: 6000; + right: -260px; +} +.panel.panel-right.panel-reveal { + right: 0; +} +body.with-panel-left-cover .views, +body.with-panel-right-cover .views { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +body.with-panel-left-cover .panel-overlay, +body.with-panel-right-cover .panel-overlay { + display: block; +} +body.with-panel-left-reveal .views, +body.with-panel-right-reveal .views { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + transition-property: transform; +} +body.with-panel-left-reveal .panel-overlay, +body.with-panel-right-reveal .panel-overlay { + display: block; +} +body.with-panel-left-reveal .views { + -webkit-transform: translate3d(260px, 0, 0); + transform: translate3d(260px, 0, 0); +} +body.with-panel-left-reveal .panel-overlay { + margin-left: 260px; +} +body.with-panel-left-cover .panel-left { + -webkit-transform: translate3d(260px, 0, 0); + transform: translate3d(260px, 0, 0); +} +body.with-panel-right-reveal .views { + -webkit-transform: translate3d(-260px, 0, 0); + transform: translate3d(-260px, 0, 0); +} +body.with-panel-right-reveal .panel-overlay { + margin-left: -260px; +} +body.with-panel-right-cover .panel-right { + -webkit-transform: translate3d(-260px, 0, 0); + transform: translate3d(-260px, 0, 0); +} +body.panel-closing .views { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + transition-property: transform; +} +/* === Tabs === */ +.tabs .tab { + display: none; +} +.tabs .tab.active { + display: block; +} +.tabs-animated-wrap { + position: relative; + width: 100%; + overflow: hidden; + height: 100%; +} +.tabs-animated-wrap > .tabs { + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + height: 100%; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.tabs-animated-wrap > .tabs > .tab { + width: 100%; + display: block; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + flex-shrink: 0; +} +.tabs-swipeable-wrap { + height: 100%; +} +.tabs-swipeable-wrap > .tabs > .tab { + display: block; +} +/* === Messages === */ +.messages-content { + background: #fff; +} +.messages { + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; +} +.messages-date { + text-align: center; + font-weight: 500; + font-size: 11px; + line-height: 1; + margin: 10px 15px; + color: #8e8e93; +} +html.ios-gt-8 .messages-date { + font-weight: 600; +} +.messages-date span { + font-weight: 400; +} +.message { + box-sizing: border-box; + margin: 1px 10px 0; + max-width: 70%; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; +} +.message:first-child { + margin-top: 10px; +} +.message .message-text { + box-sizing: border-box; + border-radius: 16px; + padding: 6px 16px 9px; + min-width: 48px; + min-height: 35px; + font-size: 17px; + line-height: 1.2; + word-break: break-word; +} +.message .message-text img { + max-width: 100%; + height: auto; +} +.message.message-pic .message-text { + padding: 0; + background: none; +} +.message.message-pic img { + display: block; + border-radius: 16px; +} +.message-name { + font-size: 12px; + line-height: 1; + color: #8e8e93; + margin-bottom: 2px; + margin-top: 7px; +} +.message-hide-name .message-name { + display: none; +} +.message-label { + font-size: 12px; + line-height: 1; + color: #8e8e93; + margin-top: 4px; +} +.message-hide-label .message-label { + display: none; +} +.message-avatar { + width: 29px; + height: 29px; + border-radius: 100%; + margin-top: -29px; + position: relative; + top: 1px; + background-size: cover; + opacity: 1; + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.message-hide-avatar .message-avatar { + opacity: 0; +} +.message-date { + font-size: 12px; + margin-top: 4px; + opacity: 0.8; +} +.message-pic img + .message-date { + margin-top: 8px; +} +.message-sent .message-date { + text-align: right; +} +.message-sent { + -ms-flex-item-align: end; + -webkit-align-self: flex-end; + align-self: flex-end; + -webkit-box-align: end; + -ms-flex-align: end; + -webkit-align-items: flex-end; + align-items: flex-end; +} +.message-sent .message-name { + margin-right: 16px; +} +.message-sent .message-label { + margin-right: 6px; +} +.message-sent.message-with-avatar .message-text { + margin-right: 29px; +} +.message-sent.message-with-avatar .message-name { + margin-right: 45px; +} +.message-sent.message-with-avatar .message-label { + margin-right: 34px; +} +.message-sent .message-text { + padding-right: 22px; + background-color: #00d449; + color: white; + margin-left: auto; + -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,") 50% 56% 46% 42%; +} +.message-sent.message-last .message-text, +.message-sent.message-with-tail .message-text { + border-radius: 16px 16px 0 16px; + -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,") 50% 56% 46% 42%; +} +.message-sent.message-last.message-pic img, +.message-sent.message-with-tail.message-pic img { + border-radius: 16px 16px 0 16px; +} +.message-received { + -ms-flex-item-align: start; + -webkit-align-self: flex-start; + align-self: flex-start; + -webkit-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; +} +.message-received .message-text { + padding-left: 22px; + background-color: #e5e5ea; + color: #000; + -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,") 50% 42% 46% 56%; +} +.message-received .message-name { + margin-left: 16px; +} +.message-received .message-label { + margin-left: 6px; +} +.message-received.message-with-avatar .message-text { + margin-left: 29px; +} +.message-received.message-with-avatar .message-name { + margin-left: 45px; +} +.message-received.message-with-avatar .message-label { + margin-left: 34px; +} +.message-received.message-last .message-text, +.message-received.message-with-tail .message-text { + border-radius: 16px 16px 16px 0; + -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,") 50% 42% 46% 56%; +} +.message-received.message-last.message-pic img, +.message-received.message-with-tail.message-pic img { + border-radius: 16px 16px 16px 0; +} +.message-last { + margin-bottom: 8px; +} +.message-appear-from-bottom { + -webkit-animation: messageAppearFromBottom 400ms; + animation: messageAppearFromBottom 400ms; +} +.message-appear-from-top { + -webkit-animation: messageAppearFromTop 400ms; + animation: messageAppearFromTop 400ms; +} +.messages-auto-layout .message-name, +.messages-auto-layout .message-label { + display: none; +} +.messages-auto-layout .message-avatar { + opacity: 0; +} +.messages-auto-layout .message-first .message-name { + display: block; +} +.messages-auto-layout .message-last .message-avatar { + opacity: 1; +} +.messages-auto-layout .message-last .message-label { + display: block; +} +html.retina.ios-6 .message, +html.retina.ios-6 .message.message-pic img { + -webkit-mask-box-image: none; + border-radius: 16px; +} +@-webkit-keyframes messageAppearFromBottom { + from { + -webkit-transform: translate3d(0, 100%, 0); + } + to { + -webkit-transform: translate3d(0, 0, 0); + } +} +@keyframes messageAppearFromBottom { + from { + transform: translate3d(0, 100%, 0); + } + to { + transform: translate3d(0, 0, 0); + } +} +@-webkit-keyframes messageAppearFromTop { + from { + -webkit-transform: translate3d(0, -100%, 0); + } + to { + -webkit-transform: translate3d(0, 0, 0); + } +} +@keyframes messageAppearFromTop { + from { + transform: translate3d(0, -100%, 0); + } + to { + transform: translate3d(0, 0, 0); + } +} +/* === Statusbar overlay === */ +html.with-statusbar-overlay body { + padding-top: 20px; + box-sizing: border-box; +} +html.with-statusbar-overlay body .statusbar-overlay { + display: block; +} +html.with-statusbar-overlay body .panel { + padding-top: 20px; +} +.statusbar-overlay { + background: #f7f7f8; + z-index: 10000; + position: absolute; + left: 0; + top: 0; + height: 20px; + width: 100%; + display: none; + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +/* === Preloader === */ +.preloader { + display: inline-block; + width: 20px; + height: 20px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); + background-position: 50%; + background-size: 100%; + background-repeat: no-repeat; + -webkit-animation: preloader-spin 1s steps(12, end) infinite; + animation: preloader-spin 1s steps(12, end) infinite; +} +@-webkit-keyframes preloader-spin { + 100% { + -webkit-transform: rotate(360deg); + } +} +@keyframes preloader-spin { + 100% { + transform: rotate(360deg); + } +} +/* === Progress Bar === */ +.progressbar, +.progressbar-infinite { + height: 2px; + width: 100%; + overflow: hidden; + position: relative; + display: block; + background: #b6b6b6; + border-radius: 2px; + -webkit-transform-origin: center top; + transform-origin: center top; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; +} +.progressbar { + vertical-align: middle; +} +.progressbar span { + width: 100%; + background: #8ca946; + height: 100%; + position: absolute; + left: 0; + top: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + -webkit-transition-duration: 150ms; + transition-duration: 150ms; +} +.progressbar-infinite:before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: #8ca946; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-transform-origin: left center; + transform-origin: left center; + -webkit-animation: progressbar-infinite 1s linear infinite; + animation: progressbar-infinite 1s linear infinite; +} +html.with-statusbar-overlay body > .progressbar-infinite, +html.with-statusbar-overlay .framework7-root > .progressbar-infinite { + top: 20px; +} +.progressbar-infinite.color-multi { + background: none; +} +.progressbar-infinite.color-multi:before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 400%; + height: 100%; + background-image: -webkit-linear-gradient(left, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964); + background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964); + background-size: 25% 100%; + background-repeat: repeat-x; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-animation: progressbar-infinite-multicolor 3s linear infinite; + animation: progressbar-infinite-multicolor 3s linear infinite; +} +html.with-statusbar-overlay body > .progressbar-infinite.color-multi, +html.with-statusbar-overlay .framework7-root > .progressbar-infinite.color-multi { + top: 20px; +} +body > .progressbar, +.view > .progressbar, +.views > .progressbar, +.page > .progressbar, +.panel > .progressbar, +.popup > .progressbar, +.framework7-root > .progressbar, +body > .progressbar-infinite, +.view > .progressbar-infinite, +.views > .progressbar-infinite, +.page > .progressbar-infinite, +.panel > .progressbar-infinite, +.popup > .progressbar-infinite, +.framework7-root > .progressbar-infinite { + position: absolute; + left: 0; + top: 0; + z-index: 15000; + border-radius: 0; +} +.progressbar-in { + -webkit-animation: progressbar-in 300ms forwards; + animation: progressbar-in 300ms forwards; +} +.progressbar-out { + -webkit-animation: progressbar-out 300ms forwards; + animation: progressbar-out 300ms forwards; +} +html.with-statusbar-overlay body > .progressbar { + top: 20px; +} +@-webkit-keyframes progressbar-in { + from { + opacity: 0; + -webkit-transform: scaleY(0); + } + to { + opacity: 1; + -webkit-transform: scaleY(1); + } +} +@keyframes progressbar-in { + from { + opacity: 0; + transform: scaleY(0); + } + to { + opacity: 1; + transform: scaleY(1); + } +} +@-webkit-keyframes progressbar-out { + from { + opacity: 1; + -webkit-transform: scaleY(1); + } + to { + opacity: 0; + -webkit-transform: scaleY(0); + } +} +@keyframes progressbar-out { + from { + opacity: 1; + transform: scaleY(1); + } + to { + opacity: 0; + transform: scaleY(0); + } +} +@-webkit-keyframes progressbar-infinite { + 0% { + -webkit-transform: translate3d(-50%, 0, 0) scaleX(0.5); + } + 100% { + -webkit-transform: translate3d(100%, 0, 0) scaleX(0.5); + } +} +@keyframes progressbar-infinite { + 0% { + transform: translate3d(-50%, 0, 0) scaleX(0.5); + } + 100% { + transform: translate3d(100%, 0, 0) scaleX(0.5); + } +} +@-webkit-keyframes progressbar-infinite-multicolor { + from { + -webkit-transform: translate3d(0%, 0, 0); + } + to { + -webkit-transform: translate3d(-50%, 0, 0); + } +} +@keyframes progressbar-infinite-multicolor { + from { + transform: translate3d(0%, 0, 0); + } + to { + transform: translate3d(-50%, 0, 0); + } +} +/* === Swiper === */ +.swiper-container { + margin-left: auto; + margin-right: auto; + position: relative; + overflow: hidden; + /* Fix of Webkit flickering */ + z-index: 1; +} +.swiper-container-no-flexbox .swiper-slide { + float: left; +} +.swiper-container-vertical > .swiper-wrapper { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; +} +.swiper-wrapper { + position: relative; + width: 100%; + height: 100%; + z-index: 1; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + -o-transition-property: -o-transform; + -ms-transition-property: -ms-transform; + transition-property: transform; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} +.swiper-container-android .swiper-slide, +.swiper-wrapper { + -webkit-transform: translate3d(0px, 0, 0); + -moz-transform: translate3d(0px, 0, 0); + -o-transform: translate(0px, 0px); + -ms-transform: translate3d(0px, 0, 0); + transform: translate3d(0px, 0, 0); +} +.swiper-container-multirow > .swiper-wrapper { + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -ms-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; +} +.swiper-container-free-mode > .swiper-wrapper { + -webkit-transition-timing-function: ease-out; + -moz-transition-timing-function: ease-out; + -ms-transition-timing-function: ease-out; + -o-transition-timing-function: ease-out; + transition-timing-function: ease-out; + margin: 0 auto; +} +.swiper-slide { + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + flex-shrink: 0; + width: 100%; + height: 100%; + position: relative; +} +/* Auto Height */ +.swiper-container-autoheight, +.swiper-container-autoheight .swiper-slide { + height: auto; +} +.swiper-container-autoheight .swiper-wrapper { + -webkit-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; + -webkit-transition-property: -webkit-transform, height; + -moz-transition-property: -moz-transform; + -o-transition-property: -o-transform; + -ms-transition-property: -ms-transform; + transition-property: transform, height; +} +/* a11y */ +.swiper-container .swiper-notification { + position: absolute; + left: 0; + top: 0; + pointer-events: none; + opacity: 0; + z-index: -1000; +} +/* IE10 Windows Phone 8 Fixes */ +.swiper-wp8-horizontal { + -ms-touch-action: pan-y; + touch-action: pan-y; +} +.swiper-wp8-vertical { + -ms-touch-action: pan-x; + touch-action: pan-x; +} +/* Arrows */ +.swiper-button-prev, +.swiper-button-next { + position: absolute; + top: 50%; + width: 27px; + height: 44px; + margin-top: -22px; + z-index: 10; + cursor: pointer; + -moz-background-size: 27px 44px; + -webkit-background-size: 27px 44px; + background-size: 27px 44px; + background-position: center; + background-repeat: no-repeat; +} +.swiper-button-prev.swiper-button-disabled, +.swiper-button-next.swiper-button-disabled { + opacity: 0.35; + cursor: auto; + pointer-events: none; +} +.swiper-button-prev, +.swiper-container-rtl .swiper-button-next { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); + left: 10px; + right: auto; +} +.swiper-button-next, +.swiper-container-rtl .swiper-button-prev { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); + right: 10px; + left: auto; +} +/* Pagination Styles */ +.swiper-pagination { + position: absolute; + text-align: center; + -webkit-transition: 300ms; + -moz-transition: 300ms; + -o-transition: 300ms; + transition: 300ms; + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + z-index: 10; +} +.swiper-pagination.swiper-pagination-hidden { + opacity: 0; +} +/* Common Styles */ +.swiper-pagination-fraction, +.swiper-pagination-custom, +.swiper-container-horizontal > .swiper-pagination-bullets { + bottom: 10px; + left: 0; + width: 100%; +} +/* Bullets */ +.swiper-pagination-bullet { + width: 8px; + height: 8px; + display: inline-block; + border-radius: 100%; + background: #000; + opacity: 0.2; +} +button.swiper-pagination-bullet { + border: none; + margin: 0; + padding: 0; + box-shadow: none; + -moz-appearance: none; + -ms-appearance: none; + -webkit-appearance: none; + appearance: none; +} +.swiper-pagination-clickable .swiper-pagination-bullet { + cursor: pointer; +} +.swiper-pagination-bullet-active { + opacity: 1; + background: #007aff; +} +.swiper-container-vertical > .swiper-pagination-bullets { + right: 10px; + top: 50%; + -webkit-transform: translate3d(0px, -50%, 0); + -moz-transform: translate3d(0px, -50%, 0); + -o-transform: translate(0px, -50%); + -ms-transform: translate3d(0px, -50%, 0); + transform: translate3d(0px, -50%, 0); +} +.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { + margin: 5px 0; + display: block; +} +.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { + margin: 0 5px; +} +/* Progress */ +.swiper-pagination-progress { + background: rgba(0, 0, 0, 0.25); + position: absolute; +} +.swiper-pagination-progress .swiper-pagination-progressbar { + background: #007aff; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + -webkit-transform: scale(0); + -ms-transform: scale(0); + -o-transform: scale(0); + transform: scale(0); + -webkit-transform-origin: left top; + -moz-transform-origin: left top; + -ms-transform-origin: left top; + -o-transform-origin: left top; + transform-origin: left top; +} +.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar { + -webkit-transform-origin: right top; + -moz-transform-origin: right top; + -ms-transform-origin: right top; + -o-transform-origin: right top; + transform-origin: right top; +} +.swiper-container-horizontal > .swiper-pagination-progress { + width: 100%; + height: 4px; + left: 0; + top: 0; +} +.swiper-container-vertical > .swiper-pagination-progress { + width: 4px; + height: 100%; + left: 0; + top: 0; +} +/* 3D Container */ +.swiper-container-3d { + -webkit-perspective: 1200px; + -moz-perspective: 1200px; + -o-perspective: 1200px; + perspective: 1200px; +} +.swiper-container-3d .swiper-wrapper, +.swiper-container-3d .swiper-slide, +.swiper-container-3d .swiper-slide-shadow-left, +.swiper-container-3d .swiper-slide-shadow-right, +.swiper-container-3d .swiper-slide-shadow-top, +.swiper-container-3d .swiper-slide-shadow-bottom, +.swiper-container-3d .swiper-cube-shadow { + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + transform-style: preserve-3d; +} +.swiper-container-3d .swiper-slide-shadow-left, +.swiper-container-3d .swiper-slide-shadow-right, +.swiper-container-3d .swiper-slide-shadow-top, +.swiper-container-3d .swiper-slide-shadow-bottom { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 10; +} +.swiper-container-3d .swiper-slide-shadow-left { + background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); + /* Safari 4+, Chrome */ + background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Chrome 10+, Safari 5.1+, iOS 5+ */ + background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 3.6-15 */ + background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Opera 11.10-12.00 */ + background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 16+, IE10, Opera 12.50+ */ +} +.swiper-container-3d .swiper-slide-shadow-right { + background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); + /* Safari 4+, Chrome */ + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Chrome 10+, Safari 5.1+, iOS 5+ */ + background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 3.6-15 */ + background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Opera 11.10-12.00 */ + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 16+, IE10, Opera 12.50+ */ +} +.swiper-container-3d .swiper-slide-shadow-top { + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); + /* Safari 4+, Chrome */ + background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Chrome 10+, Safari 5.1+, iOS 5+ */ + background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 3.6-15 */ + background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Opera 11.10-12.00 */ + background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 16+, IE10, Opera 12.50+ */ +} +.swiper-container-3d .swiper-slide-shadow-bottom { + background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); + /* Safari 4+, Chrome */ + background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Chrome 10+, Safari 5.1+, iOS 5+ */ + background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 3.6-15 */ + background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Opera 11.10-12.00 */ + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); + /* Firefox 16+, IE10, Opera 12.50+ */ +} +/* Coverflow */ +.swiper-container-coverflow .swiper-wrapper, +.swiper-container-flip .swiper-wrapper { + /* Windows 8 IE 10 fix */ + -ms-perspective: 1200px; +} +/* Cube + Flip */ +.swiper-container-cube, +.swiper-container-flip { + overflow: visible; +} +.swiper-container-cube .swiper-slide, +.swiper-container-flip .swiper-slide { + pointer-events: none; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + z-index: 1; +} +.swiper-container-cube .swiper-slide .swiper-slide, +.swiper-container-flip .swiper-slide .swiper-slide { + pointer-events: none; +} +.swiper-container-cube .swiper-slide-active, +.swiper-container-flip .swiper-slide-active, +.swiper-container-cube .swiper-slide-active .swiper-slide-active, +.swiper-container-flip .swiper-slide-active .swiper-slide-active { + pointer-events: auto; +} +.swiper-container-cube .swiper-slide-shadow-top, +.swiper-container-flip .swiper-slide-shadow-top, +.swiper-container-cube .swiper-slide-shadow-bottom, +.swiper-container-flip .swiper-slide-shadow-bottom, +.swiper-container-cube .swiper-slide-shadow-left, +.swiper-container-flip .swiper-slide-shadow-left, +.swiper-container-cube .swiper-slide-shadow-right, +.swiper-container-flip .swiper-slide-shadow-right { + z-index: 0; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; +} +/* Cube */ +.swiper-container-cube .swiper-slide { + visibility: hidden; + -webkit-transform-origin: 0 0; + -moz-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; + width: 100%; + height: 100%; +} +.swiper-container-cube.swiper-container-rtl .swiper-slide { + -webkit-transform-origin: 100% 0; + -moz-transform-origin: 100% 0; + -ms-transform-origin: 100% 0; + transform-origin: 100% 0; +} +.swiper-container-cube .swiper-slide-active, +.swiper-container-cube .swiper-slide-next, +.swiper-container-cube .swiper-slide-prev, +.swiper-container-cube .swiper-slide-next + .swiper-slide { + pointer-events: auto; + visibility: visible; +} +.swiper-container-cube .swiper-cube-shadow { + position: absolute; + left: 0; + bottom: 0px; + width: 100%; + height: 100%; + background: #000; + opacity: 0.6; + -webkit-filter: blur(50px); + filter: blur(50px); + z-index: 0; +} +/* Fade */ +.swiper-container-fade.swiper-container-free-mode .swiper-slide { + -webkit-transition-timing-function: ease-out; + -moz-transition-timing-function: ease-out; + -ms-transition-timing-function: ease-out; + -o-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.swiper-container-fade .swiper-slide { + pointer-events: none; + -webkit-transition-property: opacity; + -moz-transition-property: opacity; + -o-transition-property: opacity; + transition-property: opacity; +} +.swiper-container-fade .swiper-slide .swiper-slide { + pointer-events: none; +} +.swiper-container-fade .swiper-slide-active, +.swiper-container-fade .swiper-slide-active .swiper-slide-active { + pointer-events: auto; +} +.swiper-zoom-container { + width: 100%; + height: 100%; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: center; + -moz-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -moz-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + text-align: center; +} +.swiper-zoom-container > img, +.swiper-zoom-container > svg, +.swiper-zoom-container > canvas { + max-width: 100%; + max-height: 100%; + object-fit: contain; +} +/* Scrollbar */ +.swiper-scrollbar { + border-radius: 10px; + position: relative; + -ms-touch-action: none; + background: rgba(0, 0, 0, 0.1); +} +.swiper-container-horizontal > .swiper-scrollbar { + position: absolute; + left: 1%; + bottom: 3px; + z-index: 50; + height: 5px; + width: 98%; +} +.swiper-container-vertical > .swiper-scrollbar { + position: absolute; + right: 3px; + top: 1%; + z-index: 50; + width: 5px; + height: 98%; +} +.swiper-scrollbar-drag { + height: 100%; + width: 100%; + position: relative; + background: rgba(0, 0, 0, 0.5); + border-radius: 10px; + left: 0; + top: 0; +} +.swiper-scrollbar-cursor-drag { + cursor: move; +} +/* Preloader */ +.swiper-slide .preloader { + width: 42px; + height: 42px; + position: absolute; + left: 50%; + top: 50%; + margin-left: -21px; + margin-top: -21px; + z-index: 10; +} +/* === Columns Picker === */ +.picker-columns { + width: 100%; + height: 260px; + z-index: 11500; +} +.picker-columns.picker-modal-inline, +.popover .picker-columns { + height: 200px; +} +@media (orientation: landscape) and (max-height: 415px) { + .picker-columns:not(.picker-modal-inline) { + height: 200px; + } +} +.popover.popover-picker-columns { + width: 280px; +} +.picker-items { + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + padding: 0; + text-align: right; + font-size: 24px; + -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent); + -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent); +} +.picker-items-col { + overflow: hidden; + position: relative; + max-height: 100%; +} +.picker-items-col.picker-items-col-left { + text-align: left; +} +.picker-items-col.picker-items-col-center { + text-align: center; +} +.picker-items-col.picker-items-col-right { + text-align: right; +} +.picker-items-col.picker-items-col-divider { + color: #000; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +.picker-items-col-wrapper { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.picker-item { + height: 36px; + line-height: 36px; + padding: 0 10px; + white-space: nowrap; + position: relative; + overflow: hidden; + text-overflow: ellipsis; + color: #707274; + left: 0; + top: 0; + width: 100%; + box-sizing: border-box; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.picker-items-col-absolute .picker-item { + position: absolute; +} +.picker-item.picker-item-far { + pointer-events: none; +} +.picker-item.picker-selected { + color: #000; + -webkit-transform: translate3d(0, 0, 0) rotateX(0deg); + transform: translate3d(0, 0, 0) rotateX(0deg); +} +.picker-center-highlight { + height: 36px; + box-sizing: border-box; + position: absolute; + left: 0; + width: 100%; + top: 50%; + margin-top: -18px; + pointer-events: none; +} +.picker-center-highlight:before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: auto; + right: auto; + height: 1px; + width: 100%; + background-color: #a8abb0; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +html.pixel-ratio-2 .picker-center-highlight:before { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .picker-center-highlight:before { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.picker-center-highlight:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #a8abb0; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .picker-center-highlight:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .picker-center-highlight:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.picker-3d .picker-items { + overflow: hidden; + -webkit-perspective: 1200px; + perspective: 1200px; +} +.picker-3d .picker-items-col, +.picker-3d .picker-items-col-wrapper, +.picker-3d .picker-item { + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; +} +.picker-3d .picker-items-col { + overflow: visible; +} +.picker-3d .picker-item { + -webkit-transform-origin: center center -110px; + transform-origin: center center -110px; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +/* === Notifications === */ +.notifications { + position: absolute; + left: 0; + top: 0; + width: 100%; + z-index: 20000; + font-size: 14px; + margin: 0; + border: none; + display: none; + box-sizing: border-box; + max-height: 100%; + -webkit-transition-duration: 450ms; + transition-duration: 450ms; + -webkit-perspective: 1200px; + perspective: 1200px; + padding-top: 8px; + padding-bottom: 8px; +} +.notifications.list-block > ul { + background: none; + margin: 0 auto; + max-width: 584px; +} +.notifications.list-block > ul:before { + display: none; +} +.notifications.list-block > ul:after { + display: none; +} +.with-statusbar-overlay .notifications { + padding-top: 20px; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); +} +.notifications .item-content { + padding-left: 8px; + -webkit-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; +} +.notifications .item-title-row { + margin-bottom: 8px; +} +.notifications .item-title-row:before { + position: absolute; + left: 0; + top: 0; + height: 36px; + border-radius: 12px 12px 0 0; + z-index: -1; + background: #fff; + content: ''; + width: 100%; +} +.notifications .item-title { + font-weight: 400 !important; + height: 36px; + text-transform: uppercase; + line-height: 35px; + font-size: 13px; +} +html.ios-gt-8 .notifications .item-title { + font-weight: 400 !important; +} +.notifications .item-subtitle { + font-size: 15px; + font-weight: 500; +} +html.ios-gt-8 .notifications .item-subtitle { + font-weight: 600; +} +.notifications .item-text { + font-size: 14px; + color: inherit; + height: auto; + line-height: inherit; +} +.notifications .item-subtitle:first-child, +.notifications .item-text:first-child { + margin-top: 8px; +} +.notifications .item-content, +.notifications .item-inner { + min-height: 0; +} +.notifications .item-inner { + position: static; +} +.notifications .item-inner:after { + display: none; +} +.notifications .item-media { + width: 20px; +} +.notifications .item-media img { + max-width: 20px; + max-height: 20px; +} +.notifications .item-media i.icon { + width: 20px; + height: 20px; + -webkit-background-size: cover; + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} +.notifications .item-media + .item-inner { + margin-left: 8px; + overflow: visible; +} +.notifications li.notification-item { + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); +} +.notifications li.notification-item .item-inner { + padding-top: 0; +} +.notifications li.notification-item .item-media { + padding-top: 8px; +} +.notifications .item-after { + margin-top: auto; + margin-bottom: auto; +} +.notifications .close-notification { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%2044%2044'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cg%20stroke%3D'none'%20stroke-width%3D'1'%20fill%3D'none'%20fill-rule%3D'evenodd'%3E%3Cpath%20d%3D'M22.5%2C20.3786797%20L14.7218254%2C12.6005051%20L12.6005051%2C14.7218254%20L20.3786797%2C22.5%20L12.6005051%2C30.2781746%20L14.7218254%2C32.3994949%20L22.5%2C24.6213203%20L30.2781746%2C32.3994949%20L32.3994949%2C30.2781746%20L24.6213203%2C22.5%20L32.3994949%2C14.7218254%20L30.2781746%2C12.6005051%20L22.5%2C20.3786797%20Z%20M22%2C44%20C34.1502645%2C44%2044%2C34.1502645%2044%2C22%20C44%2C9.8497355%2034.1502645%2C0%2022%2C0%20C9.8497355%2C0%200%2C9.8497355%200%2C22%20C0%2C34.1502645%209.8497355%2C44%2022%2C44%20Z'%20fill%3D'%23000000'%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"); + background-position: center top; + background-repeat: no-repeat; + -webkit-background-size: 100% auto; + background-size: 100% auto; + position: relative; + opacity: 0.2; +} +.notifications .close-notification span { + position: absolute; + width: 44px; + height: 44px; + left: 50%; + top: 50%; + margin-left: -22px; + margin-top: -22px; +} +.notifications .notification-item { + max-width: 568px; + margin: 0 auto 8px; + -webkit-transition-duration: 450ms; + transition-duration: 450ms; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; + background: rgba(250, 250, 250, 0.95); + border-radius: 12px; + width: -webkit-calc(100% - 16px); + width: -moz-calc(100% - 16px); + width: calc(100% - 16px); + position: absolute; + left: 8px; + top: 0; +} +.notifications .notification-item:last-child { + margin-bottom: 0; +} +.notifications .notification-hidden { + opacity: 0; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +/* === Disabled elements === */ +.disabled, +[disabled] { + opacity: 0.55; + pointer-events: none; +} +.disabled .disabled, +.disabled [disabled], +[disabled] .disabled, +[disabled] [disabled] { + opacity: 1; +} +#editor-navbar.navbar .right a + a, +#editor-navbar.navbar .left a + a { + margin-left: 0; +} +html:not(.phone) #editor-navbar.navbar .right a + a, +html:not(.phone) #editor-navbar.navbar .left a + a { + margin-left: 10px; +} +.phone.ios .container-edit .navbar:before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: auto; + right: auto; + height: 1px; + width: 100%; + background-color: #c4c4c4; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +html.pixel-ratio-2 .phone.ios .container-edit .navbar:before { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .phone.ios .container-edit .navbar:before { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.phone.ios .container-edit .page-content .list-block:first-child { + margin-top: -1px; +} +.container-edit.popover, +.container-add.popover, +.container-settings.popover { + width: 360px; +} +.container-edit.popup .list-block ul, +.container-add.popup .list-block ul, +.container-settings.popup .list-block ul, +.container-edit.popover .list-block ul, +.container-add.popover .list-block ul, +.container-settings.popover .list-block ul { + border-radius: 0 !important; + background: #fff; +} +.container-edit.popup .list-block:first-child, +.container-add.popup .list-block:first-child, +.container-settings.popup .list-block:first-child, +.container-edit.popover .list-block:first-child, +.container-add.popover .list-block:first-child, +.container-settings.popover .list-block:first-child { + margin-top: 0; +} +.container-edit.popup .list-block li:first-child a, +.container-add.popup .list-block li:first-child a, +.container-settings.popup .list-block li:first-child a, +.container-edit.popover .list-block li:first-child a, +.container-add.popover .list-block li:first-child a, +.container-settings.popover .list-block li:first-child a, +.container-edit.popup .list-block li:last-child a, +.container-add.popup .list-block li:last-child a, +.container-settings.popup .list-block li:last-child a, +.container-edit.popover .list-block li:last-child a, +.container-add.popover .list-block li:last-child a, +.container-settings.popover .list-block li:last-child a { + border-radius: 0 !important; +} +.container-edit.popup > .content-block, +.container-add.popup > .content-block, +.container-settings.popup > .content-block, +.container-edit.popover > .content-block, +.container-add.popover > .content-block, +.container-settings.popover > .content-block, +.container-edit.popup .popover-inner > .content-block, +.container-add.popup .popover-inner > .content-block, +.container-settings.popup .popover-inner > .content-block, +.container-edit.popover .popover-inner > .content-block, +.container-add.popover .popover-inner > .content-block, +.container-settings.popover .popover-inner > .content-block { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + color: #000; +} +.container-edit.popup .popover-view, +.container-add.popup .popover-view, +.container-settings.popup .popover-view, +.container-edit.popover .popover-view, +.container-add.popover .popover-view, +.container-settings.popover .popover-view { + border-radius: 13px; +} +.container-edit.popup .popover-view > .pages, +.container-add.popup .popover-view > .pages, +.container-settings.popup .popover-view > .pages, +.container-edit.popover .popover-view > .pages, +.container-add.popover .popover-view > .pages, +.container-settings.popover .popover-view > .pages { + border-radius: 13px; +} +.container-edit .categories, +.container-add .categories, +.container-settings .categories { + width: 100%; +} +.container-edit .categories > .buttons-row, +.container-add .categories > .buttons-row, +.container-settings .categories > .buttons-row { + width: 100%; +} +.container-edit .categories > .buttons-row .button, +.container-add .categories > .buttons-row .button, +.container-settings .categories > .buttons-row .button { + padding: 0 1px; +} +.container-edit .popover-inner, +.container-add .popover-inner, +.container-settings .popover-inner { + height: 400px; +} +.dataview.page-content { + background: #ffffff; +} +.dataview .row { + justify-content: space-around; +} +.dataview ul { + padding: 0 10px; + list-style: none; +} +.dataview ul li { + display: inline-block; +} +.dataview .active { + position: relative; +} +.dataview .active::after { + content: ''; + width: 20px; + height: 20px; + background-color: red; + position: absolute; + right: 0; + bottom: 0; +} +.item-content .item-after.splitter { + color: #000; +} +.item-content .item-after.splitter label { + margin: 0 5px; +} +.item-content .item-after.splitter .buttons-row { + min-width: 90px; + margin-left: 10px; +} +.item-content .item-after.value { + display: block; + min-width: 60px; + color: #000000; + margin-left: 10px; + text-align: right; +} +.item-content.buttons .item-inner { + padding-top: 0; + padding-bottom: 0; + align-items: stretch; +} +.item-content.buttons .item-inner > .row { + width: 100%; + align-items: stretch; +} +.item-content.buttons .item-inner > .row .button { + flex: 1; + border: none; + height: inherit; + border-radius: 0; + font-size: 17px; + display: flex; + align-items: center; + justify-content: center; +} +.item-content .item-after .color-preview { + width: 75px; + height: 30px; + margin-top: -3px; + border: 1px solid #c4c4c4; +} +html.pixel-ratio-2 .item-content .item-after .color-preview { + border: 0.5px solid #c4c4c4; +} +html.pixel-ratio-3 .item-content .item-after .color-preview { + border: 0.33px solid #c4c4c4; +} +.item-content i .color-preview { + width: 22px; + height: 8px; + display: inline-block; + margin-top: 21px; + box-sizing: border-box; + border: 1px solid #c4c4c4; +} +html.pixel-ratio-2 .item-content i .color-preview { + border: 0.5px solid #c4c4c4; +} +html.pixel-ratio-3 .item-content i .color-preview { + border: 0.33px solid #c4c4c4; +} +.item-link.no-indicator .item-inner { + background-image: none; +} +.button.active i.icon { + background-color: #fff; +} +.document-menu { + background-color: rgba(0, 0, 0, 0.9); + width: auto; + border-radius: 8px; +} +.document-menu .popover-angle:after { + background: rgba(0, 0, 0, 0.9); +} +.document-menu .list-block { + font-size: 14px; +} +.document-menu .list-block:first-child ul { + border-radius: 7px 0 0 7px; +} +.document-menu .list-block:first-child ul:before { + display: none; +} +.document-menu .list-block:first-child li:first-child a { + border-radius: 7px 0 0 7px; +} +.document-menu .list-block:last-child ul { + border-radius: 0 7px 7px 0; +} +.document-menu .list-block:last-child ul:after { + display: none; +} +.document-menu .list-block:last-child li:last-child a { + border-radius: 0 7px 7px 0; +} +.document-menu .list-block:first-child:last-child li:first-child:last-child a, +.document-menu .list-block:first-child:last-child ul:first-child:last-child { + border-radius: 7px; +} +.document-menu .list-block .item-link { + display: inline-block; +} +html:not(.watch-active-state) .document-menu .list-block .item-link:active, +.document-menu .list-block .item-link.active-state { + background-color: #d9d9d9; +} +html:not(.watch-active-state) .document-menu .list-block .item-link:active .item-inner:after, +.document-menu .list-block .item-link.active-state .item-inner:after { + background-color: transparent; +} +.document-menu .list-block .item-link.list-button { + color: #ffffff; + line-height: 36px; +} +.document-menu .list-block .item-link.list-button:after { + content: ''; + position: absolute; + right: 0; + top: 0; + left: auto; + bottom: auto; + width: 1px; + height: 100%; + background-color: rgba(230, 230, 230, 0.9); + display: block; + z-index: 15; + -webkit-transform-origin: 100% 50%; + transform-origin: 100% 50%; +} +html.pixel-ratio-2 .document-menu .list-block .item-link.list-button:after { + -webkit-transform: scaleX(0.5); + transform: scaleX(0.5); +} +html.pixel-ratio-3 .document-menu .list-block .item-link.list-button:after { + -webkit-transform: scaleX(0.33); + transform: scaleX(0.33); +} +.document-menu .list-block li { + display: inline-block; +} +.document-menu .list-block li:last-child .list-button:after { + display: none; +} +.document-menu .list-block li:last-child .item-inner:after, +.document-menu .list-block li:last-child li:last-child .item-inner:after { + display: none; +} +.document-menu .list-block li li:last-child .item-inner:after, +.document-menu .list-block li:last-child li .item-inner:after { + content: ''; + position: absolute; + right: 0; + top: 0; + left: auto; + bottom: auto; + width: 1px; + height: 100%; + background-color: rgba(230, 230, 230, 0.9); + display: block; + z-index: 15; + -webkit-transform-origin: 100% 50%; + transform-origin: 100% 50%; +} +html.pixel-ratio-2 .document-menu .list-block li li:last-child .item-inner:after, +html.pixel-ratio-2 .document-menu .list-block li:last-child li .item-inner:after { + -webkit-transform: scaleX(0.5); + transform: scaleX(0.5); +} +html.pixel-ratio-3 .document-menu .list-block li li:last-child .item-inner:after, +html.pixel-ratio-3 .document-menu .list-block li:last-child li .item-inner:after { + -webkit-transform: scaleX(0.33); + transform: scaleX(0.33); +} +.document-menu .list-block.no-hairlines:before, +.document-menu .list-block.no-hairlines ul:before, +.document-menu .list-block.no-hairlines .content-block-inner:before { + display: none; +} +.document-menu .list-block.no-hairlines:after, +.document-menu .list-block.no-hairlines ul:after, +.document-menu .list-block.no-hairlines .content-block-inner:after { + display: none; +} +.document-menu .list-block.no-hairlines-between .item-inner:after, +.document-menu .list-block.no-hairlines-between .list-button:after, +.document-menu .list-block.no-hairlines-between .item-divider:after, +.document-menu .list-block.no-hairlines-between .list-group-title:after, +.document-menu .list-block.no-hairlines-between .list-group-title:after { + display: none; +} +.color-palette a { + flex-grow: 1; + position: relative; + min-width: 10px; + min-height: 26px; + margin: 1px 1px 0 0; + border: 0.5px solid #c4c4c4; +} +html.pixel-ratio-2 .color-palette a { + border: 0.5px solid #c4c4c4; +} +html.pixel-ratio-3 .color-palette a { + border: 0.33px solid #c4c4c4; +} +.color-palette a.active:after { + content: ' '; + position: absolute; + left: 50%; + margin-left: -6px; + top: 50%; + margin-top: -4px; + width: 12px; + height: 9px; + background: no-repeat center; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2012%209'%20xml%3Aspace%3D'preserve'%3E%3Cpolygon%20fill%3D'%23fff'%20points%3D'12%2C0.7%2011.3%2C0%203.9%2C7.4%200.7%2C4.2%200%2C4.9%203.9%2C8.8%203.9%2C8.8%203.9%2C8.8%20'%2F%3E%3C%2Fsvg%3E"); + -webkit-background-size: 12px 9px; + background-size: 12px 9px; + filter: drop-shadow(0px 0px 1px #000); +} +.color-palette a.transparent { + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2022%2022'%20xml%3Aspace%3D'preserve'%3E%3Cline%20stroke%3D'%23ff0000'%20stroke-linecap%3D'undefined'%20stroke-linejoin%3D'undefined'%20id%3D'svg_1'%20y2%3D'0'%20x2%3D'22'%20y1%3D'22'%20x1%3D'0'%20stroke-width%3D'2'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E"); +} +.color-palette .theme-colors .item-inner { + display: inline-block; +} +.about .page-content { + text-align: center; +} +.about .content-block:first-child { + margin: 15px 0; +} +.about .content-block { + margin: 0 auto 15px; +} +.about .content-block a { + color: #000; +} +.about h3 { + font-weight: normal; + margin: 0; +} +.about h3.vendor { + color: #000; + font-weight: bold; + margin-top: 15px; +} +.about p > label { + margin-right: 5px; +} +.about .logo { + background-image: url('../../../../common/mobile/resources/img/about/onlyoffice.png'); +} +@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi) { + .about .logo { + background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png'); + background-size: auto; + } +} +.tablet .searchbar.document.replace .center .searchbar-input:first-child { + margin-right: 10px; +} +.tablet .searchbar.document.replace .center .replace { + display: block; +} +.tablet .searchbar.document.replace .right .replace { + display: flex; + margin: 0 10px; +} +.tablet .searchbar.document .center { + width: 100%; +} +.tablet .searchbar.document .center .replace { + display: none; +} +.tablet .searchbar.document .right .prev { + margin-left: 0; +} +.tablet .searchbar.document .right .replace { + display: none; +} +.phone .searchbar.document.replace { + height: 88px; +} +.phone .searchbar.document.replace .left { + margin-top: -44px; +} +.phone .searchbar.document.replace .center .searchbar-input { + margin: 8px 0; +} +.phone .searchbar.document.replace .center .replace { + display: block; +} +.phone .searchbar.document.replace .right .replace { + display: flex; +} +.phone .searchbar.document .left, +.phone .searchbar.document .center, +.phone .searchbar.document .right { + flex-direction: column; +} +.phone .searchbar.document .left { + min-width: 22px; + max-width: 22px; +} +.phone .searchbar.document .center { + width: 100%; +} +.phone .searchbar.document .center .replace { + display: none; +} +.phone .searchbar.document .right > p { + margin: 0; +} +.phone .searchbar.document .right .replace { + display: none; +} +.searchbar.document { + background: #e4e4e6; +} +i.icon.icon-search { + width: 24px; + height: 24px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M15.8%2C15c1.4-1.6%2C2.2-3.7%2C2.2-5.9c0-5-4-9-9-9C4%2C0%2C0%2C4%2C0%2C9c0%2C5%2C4%2C9%2C9%2C9c2.3%2C0%2C4.4-0.9%2C5.9-2.2l5.8%2C5.8l0.2-0.6l0.7-0.2L15.8%2C15z%20M9%2C17c-4.4%2C0-8-3.6-8-8c0-4.4%2C3.6-8%2C8-8c4.4%2C0%2C8%2C3.6%2C8%2C8C17%2C13.5%2C13.5%2C17%2C9%2C17z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-burger { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Crect%20x%3D%222%22%20y%3D%2217%22%20width%3D%2218%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2213%22%20width%3D%2218%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%229%22%20width%3D%2218%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-edit { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M0%2C20h22v1H0V20z%22%2F%3E%3Cpolygon%20points%3D%2219.3%2C5.3%206.1%2C18.4%204.6%2C16.9%2017.8%2C3.8%2017.1%2C3.1%203.5%2C16.7%203%2C20%206.3%2C19.5%2019.9%2C5.9%20%09%22%2F%3E%3Cpath%20d%3D%22M20.5%2C5.3L22%2C3.8c0%2C0-0.2-1.2-0.9-1.9C20.4%2C1.1%2C19.2%2C1%2C19.2%2C1l-1.5%2C1.5L20.5%2C5.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-undo { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M22%2C16v2h-1v-2l0%2C0c0-2.9-2.1-5-5-5l0%2C0H1.9L5%2C14c0.1%2C0.1%2C0.1%2C0.2%2C0%2C0.3l-0.4%2C0.4c-0.1%2C0.1-0.2%2C0.1-0.3%2C0l-4.2-4.2c-0.1-0.1-0.1-0.2%2C0-0.3l0.4-0.4h0.1L4.4%2C6c0.1-0.1%2C0.2-0.1%2C0.3%2C0l0.5%2C0.4c0.1%2C0.1%2C0.1%2C0.2%2C0%2C0.3L1.9%2C10H16l0%2C0C19.3%2C10%2C22%2C12.7%2C22%2C16L22%2C16z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-redo { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M0%2C16c0-3.3%2C2.7-6%2C6-6v0h14.1l-3.3-3.3c-0.1-0.1-0.1-0.2%2C0-0.3L17.3%2C6c0.1-0.1%2C0.2-0.1%2C0.3%2C0l3.8%2C3.8c0%2C0%2C0.1%2C0%2C0.1%2C0l0.4%2C0.4c0.1%2C0.1%2C0.1%2C0.2%2C0%2C0.3l-4.2%2C4.2c-0.1%2C0.1-0.2%2C0.1-0.3%2C0l-0.4-0.4c-0.1-0.1-0.1-0.2%2C0-0.3l3.1-3H6v0c-2.9%2C0-5%2C2.1-5%2C5h0v2H0L0%2C16L0%2C16z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-reader { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M17%2C21H1V9h6V2l0%2C0h10v5h1V1H6.2L0%2C7.6V22h18v-3h-1V21z%20M6%2C2.8V8H1.1L6%2C2.8z%20M13%2C8c-5.1%2C0-9%2C5-9%2C5s4.1%2C5%2C9%2C5c5%2C0%2C9-5%2C9-5S18%2C8%2C13%2C8z%20M8.7%2C15.5C6.8%2C14.4%2C6.4%2C13%2C6.4%2C13s0.4-1.5%2C2.4-2.6C8.3%2C11.2%2C8%2C12%2C8%2C13C8%2C13.9%2C8.3%2C14.8%2C8.7%2C15.5z%20M13%2C16.7c-2.1%2C0-3.7-1.7-3.7-3.7c0-2.1%2C1.7-3.7%2C3.7-3.7c2.1%2C0%2C3.7%2C1.7%2C3.7%2C3.7C16.7%2C15.1%2C15.1%2C16.7%2C13%2C16.7z%20M17.3%2C15.5c0.4-0.7%2C0.7-1.6%2C0.7-2.5c0-1-0.3-1.8-0.7-2.6c2%2C1.1%2C3.4%2C2.6%2C3.4%2C2.6S19.2%2C14.4%2C17.3%2C15.5z%20M13%2C11.7c-0.7%2C0-1.3%2C0.6-1.3%2C1.3s0.6%2C1.3%2C1.3%2C1.3s1.3-0.6%2C1.3-1.3S13.7%2C11.7%2C13%2C11.7z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-download { + width: 22px; + height: 28px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%22-1%203%2022%2028%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpolygon%20points%3D%2210%2C5.6%2010%2C21.2%2011%2C21.2%2011%2C5.6%2014.6%2C9.3%2015.3%2C8.5%2010.5%2C3.6%205.7%2C8.5%206.4%2C9.3%20%09%22%2F%3E%3Cpolygon%20points%3D%2213%2C12%2013%2C13%2019%2C13%2019%2C30%202%2C30%202%2C13%208%2C13%208%2C12%201%2C12%201%2C13%201%2C30%201%2C31%2020%2C31%2020%2C30%2020%2C13%2020%2C12%20%09%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-info { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M10%2C17h2V8h-2V17z%20M11%2C1C5.5%2C1%2C1%2C5.5%2C1%2C11s4.5%2C10%2C10%2C10s10-4.5%2C10-10S16.5%2C1%2C11%2C1z%20M11%2C20c-5%2C0-9-4-9-9s4-9%2C9-9s9%2C4%2C9%2C9S16%2C20%2C11%2C20z%20M10%2C7h2V5h-2V7z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-plus { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M22%2C12H12v10h-1V12H1v-1h10V1h1v10h10V12z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-settings { + width: 24px; + height: 24px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M11.8%2C3l0.4%2C2c0.1%2C0.7%2C0.6%2C1.1%2C1.3%2C1.1c0.3%2C0%2C0.5-0.1%2C0.7-0.2l1.9-1.2l1.1%2C1.1l-1.1%2C1.8C15.8%2C8%2C15.8%2C8.5%2C16%2C8.9c0.2%2C0.4%2C0.5%2C0.7%2C1%2C0.8l2.1%2C0.5v1.6L17%2C12.2c-0.5%2C0.1-0.8%2C0.4-1%2C0.8c-0.2%2C0.4-0.1%2C0.9%2C0.1%2C1.2l1.2%2C1.9l-1.1%2C1.1l-1.8-1.1c-0.2-0.2-0.5-0.2-0.8-0.2c-0.6%2C0-1.2%2C0.5-1.3%2C1.1l-0.5%2C2.1h-1.6l-0.4-2C9.7%2C16.4%2C9.2%2C16%2C8.5%2C16c-0.3%2C0-0.5%2C0.1-0.7%2C0.2l-1.9%2C1.2l-1.1-1.1l1.1-1.8c0.3-0.4%2C0.3-0.9%2C0.1-1.3c-0.2-0.4-0.5-0.7-1-0.8l-2.1-0.5v-1.6l2-0.4c0.5-0.1%2C0.8-0.4%2C1-0.8C6.1%2C8.7%2C6%2C8.2%2C5.8%2C7.9l-1-2l1.1-1.1l1.8%2C1.1C8%2C6.1%2C8.2%2C6.2%2C8.5%2C6.2c0.6%2C0%2C1.2-0.5%2C1.3-1.1L10.3%2C3H11.8%20M11%2C15.5c2.5%2C0%2C4.5-2%2C4.5-4.5s-2-4.5-4.5-4.5s-4.5%2C2-4.5%2C4.5S8.5%2C15.5%2C11%2C15.5%20M12.1%2C2H9.9C9.6%2C2%2C9.4%2C2.2%2C9.3%2C2.5L8.8%2C4.9c0%2C0.2-0.2%2C0.3-0.3%2C0.3s-0.1%2C0-0.2-0.1L6.2%2C3.8C6.1%2C3.7%2C6%2C3.7%2C5.8%2C3.7c-0.1%2C0-0.3%2C0-0.4%2C0.1L3.8%2C5.4c-0.1%2C0.2-0.2%2C0.5%2C0%2C0.8l1.3%2C2.1c0.1%2C0.2%2C0.1%2C0.4-0.2%2C0.5L2.5%2C9.3C2.2%2C9.4%2C2%2C9.6%2C2%2C9.9v2.2c0%2C0.3%2C0.2%2C0.5%2C0.5%2C0.6l2.4%2C0.5c0.3%2C0.1%2C0.4%2C0.3%2C0.2%2C0.5l-1.3%2C2.1c-0.2%2C0.2-0.1%2C0.6%2C0.1%2C0.8l1.6%2C1.6c0.1%2C0.1%2C0.3%2C0.2%2C0.4%2C0.2s0.2%2C0%2C0.3-0.1L8.3%2C17c0.1-0.1%2C0.1-0.1%2C0.2-0.1s0.3%2C0.1%2C0.3%2C0.3l0.5%2C2.3C9.4%2C19.8%2C9.6%2C20%2C9.9%2C20h2.2c0.3%2C0%2C0.5-0.2%2C0.6-0.5l0.5-2.4c0-0.2%2C0.1-0.3%2C0.3-0.3c0.1%2C0%2C0.1%2C0%2C0.2%2C0.1l2.1%2C1.3c0.1%2C0.1%2C0.2%2C0.1%2C0.3%2C0.1c0.2%2C0%2C0.3-0.1%2C0.4-0.2l1.6-1.6c0.2-0.2%2C0.2-0.5%2C0.1-0.8l-1.3-2.1c-0.2-0.2-0.1-0.5%2C0.2-0.5l2.4-0.5c0.3-0.1%2C0.5-0.3%2C0.5-0.6V9.8c0-0.3-0.2-0.5-0.5-0.6l-2.4-0.5c-0.3-0.1-0.4-0.3-0.2-0.5l1.3-2.1c0.2-0.2%2C0.1-0.6-0.1-0.8l-1.6-1.6c-0.1-0.1-0.3-0.2-0.4-0.2c-0.1%2C0-0.2%2C0-0.3%2C0.1l-2.1%2C1.3C13.6%2C5%2C13.6%2C5%2C13.5%2C5c-0.1%2C0-0.3-0.1-0.3-0.3l-0.5-2.2C12.6%2C2.2%2C12.4%2C2%2C12.1%2C2L12.1%2C2z%20M11%2C14.5c-1.9%2C0-3.5-1.6-3.5-3.5S9.1%2C7.5%2C11%2C7.5s3.5%2C1.6%2C3.5%2C3.5S12.9%2C14.5%2C11%2C14.5L11%2C14.5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-about { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%22-1%207%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M21%2C18.5c0-0.3-0.1-0.6-0.7-0.9l-2.6-1.2l2.6-1.2c0.6-0.3%2C0.7-0.6%2C0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-8.9-4.1c-0.7-0.4-1.9-0.4-2.8%2C0l-8.9%2C4.1C-0.9%2C13.8-1%2C14.1-1%2C14.3s0.1%2C0.6%2C0.7%2C0.9l2.6%2C1.2l-2.6%2C1.2C-0.9%2C18-1%2C18.4-1%2C18.5c0%2C0.2%2C0.1%2C0.6%2C0.7%2C0.9l2.5%2C1.2l-2.5%2C1.2C-0.9%2C22.1-1%2C22.5-1%2C22.7c0%2C0.3%2C0.1%2C0.6%2C0.7%2C0.9l8.9%2C4.1c0.5%2C0.2%2C0.8%2C0.3%2C1.4%2C0.3s1-0.1%2C1.4-0.3l8.9-4.1c0.6-0.4%2C0.7-0.6%2C0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-2.5-1.2l2.5-1.2C20.9%2C19.2%2C21%2C18.8%2C21%2C18.5z%20M-0.2%2C14.3L-0.2%2C14.3c0%2C0%2C0.1-0.1%2C0.3-0.2L9%2C10c0.6-0.3%2C1.5-0.3%2C2%2C0l8.9%2C4.1c0.2%2C0.1%2C0.3%2C0.2%2C0.3%2C0.2l0%2C0c0%2C0-0.1%2C0.1-0.3%2C0.2L11%2C18.6c-0.6%2C0.3-1.5%2C0.3-2%2C0l-8.9-4.1C-0.1%2C14.4-0.2%2C14.3-0.2%2C14.3z%20M20.2%2C22.7L20.2%2C22.7c0%2C0-0.1%2C0.1-0.3%2C0.2L11%2C27.1c-0.6%2C0.3-1.5%2C0.3-2%2C0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0%2C0c0%2C0%2C0.1-0.1%2C0.3-0.2l3-1.5l5.5%2C2.6c0.7%2C0.4%2C1.9%2C0.4%2C2.8%2C0l5.5-2.6l3%2C1.5C20.1%2C22.7%2C20.2%2C22.7%2C20.2%2C22.7z%20M19.9%2C18.7L11%2C22.8c-0.6%2C0.3-1.5%2C0.3-2%2C0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0%2C0c0%2C0%2C0.1-0.1%2C0.3-0.2l3-1.5l5.5%2C2.6c0.7%2C0.4%2C1.9%2C0.4%2C2.8%2C0l5.5-2.6l3%2C1.5c0.2%2C0.1%2C0.3%2C0.2%2C0.3%2C0.2l0%2C0C20.2%2C18.5%2C20.1%2C18.6%2C19.9%2C18.7z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-help { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M11.6%2C1.3c-3.3%2C0-6%2C2.8-6%2C6.2c0.3%2C0%2C0.7%2C0%2C0.9%2C0c0-2.9%2C2.3-5.2%2C5.1-5.2s5.1%2C2.3%2C5.1%2C5.2c0%2C1.7-1.9%2C3.2-3%2C4.3C12.9%2C12.6%2C11%2C14.2%2C11%2C16c0%2C1.2%2C0%2C2.2%2C0%2C2.7c0.3%2C0%2C0.6%2C0%2C0.9%2C0c0-0.6%2C0-1.6%2C0-2.5c0-1.4%2C1.1-2.4%2C2.2-3.5c1.7-1.5%2C3.5-3.1%2C3.5-5.2C17.6%2C4.1%2C14.9%2C1.3%2C11.6%2C1.3z%20M11.5%2C20.2c-0.3%2C0-0.5%2C0.2-0.5%2C0.5v0.8c0%2C0.3%2C0.2%2C0.5%2C0.5%2C0.5s0.5-0.2%2C0.5-0.5v-0.8C11.9%2C20.4%2C11.7%2C20.2%2C11.5%2C20.2z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-versions { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%22-1%207%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M19%2C12c0-1.1-0.9-2-2-2c0-1.1-0.9-2-2-2H5c-1.1%2C0-2%2C0.9-2%2C2c-1.1%2C0-2%2C0.9-2%2C2c-1.1%2C0-2%2C0.9-2%2C2v12c0%2C1.1%2C0.9%2C2%2C2%2C2h18c1.1%2C0%2C2-0.9%2C2-2V14C21%2C12.9%2C20.1%2C12%2C19%2C12z%20M5%2C9h10c0.6%2C0%2C1%2C0.4%2C1%2C1H4C4%2C9.4%2C4.4%2C9%2C5%2C9z%20M3%2C11h14c0.6%2C0%2C1%2C0.4%2C1%2C1H2C2%2C11.4%2C2.4%2C11%2C3%2C11z%20M20%2C26c0%2C0.6-0.4%2C1-1%2C1H1c-0.6%2C0-1-0.4-1-1V14c0-0.6%2C0.4-1%2C1-1h18c0.6%2C0%2C1%2C0.4%2C1%2C1V26z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-text-additional { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M18.5%2C15.5c-1.1%2C0-2%2C0.9-2%2C2s0.9%2C2%2C2%2C2s2-0.9%2C2-2S19.6%2C15.5%2C18.5%2C15.5z%20M18.5%2C18.5c-0.6%2C0-1-0.4-1-1c0-0.6%2C0.4-1%2C1-1s1%2C0.4%2C1%2C1C19.5%2C18.1%2C19.1%2C18.5%2C18.5%2C18.5z%20M18.5%2C7.5c1.1%2C0%2C2-0.9%2C2-2c0-1.1-0.9-2-2-2s-2%2C0.9-2%2C2C16.5%2C6.6%2C17.4%2C7.5%2C18.5%2C7.5z%20M18.5%2C4.5c0.6%2C0%2C1%2C0.4%2C1%2C1s-0.4%2C1-1%2C1s-1-0.4-1-1S17.9%2C4.5%2C18.5%2C4.5z%20M18.5%2C9.5c-1.1%2C0-2%2C0.9-2%2C2s0.9%2C2%2C2%2C2s2-0.9%2C2-2S19.6%2C9.5%2C18.5%2C9.5z%20M18.5%2C12.5c-0.6%2C0-1-0.4-1-1c0-0.6%2C0.4-1%2C1-1s1%2C0.4%2C1%2C1C19.5%2C12.1%2C19.1%2C12.5%2C18.5%2C12.5z%20M6.9%2C3.8L1%2C18.9h1.5l1.8-4.7h6.9l1.7%2C4.7h1.5L8.6%2C3.8H6.9z%20M4.7%2C12.9l3-7.9l3%2C7.9H4.7z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-text-color { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M8.9%2C12l2.3-6.3l2.2%2C6.3H8.9z%20M4.7%2C17.8h2l1.6-4.3h5.6l1.5%2C4.3h2.1L12.3%2C3.5h-2.2L4.7%2C17.8z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-text-selection { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M7.6%2C10.3c0.2%2C0.3%2C0.4%2C0.4%2C0.5%2C0.5c0.3%2C0.2%2C0.6%2C0.3%2C1%2C0.3c0.7%2C0%2C1.3-0.3%2C1.7-0.8c0.4-0.5%2C0.6-1.2%2C0.6-2.1c0-0.9-0.2-1.5-0.6-2c-0.4-0.4-0.9-0.7-1.6-0.7c-0.3%2C0-0.6%2C0.1-0.9%2C0.2C8%2C6%2C7.8%2C6.2%2C7.6%2C6.4V3.8H6.8V11h0.8V10.3z%20M8%2C6.9c0.3-0.3%2C0.7-0.4%2C1.1-0.4c0.5%2C0%2C0.8%2C0.2%2C1%2C0.5c0.2%2C0.4%2C0.4%2C0.8%2C0.4%2C1.4c0%2C0.6-0.1%2C1.1-0.4%2C1.5c-0.2%2C0.4-0.6%2C0.6-1.1%2C0.6c-0.6%2C0-1.1-0.3-1.3-0.9C7.6%2C9.2%2C7.6%2C8.8%2C7.6%2C8.3C7.6%2C7.7%2C7.7%2C7.2%2C8%2C6.9z%20M5.7%2C10.4c-0.1%2C0-0.2%2C0-0.2-0.1c0-0.1-0.1-0.1-0.1-0.2v-3c0-0.5-0.2-0.9-0.6-1.1C4.4%2C5.8%2C4%2C5.6%2C3.3%2C5.6c-0.5%2C0-1%2C0.1-1.4%2C0.4C1.5%2C6.3%2C1.3%2C6.7%2C1.3%2C7.4h0.8c0-0.3%2C0.1-0.5%2C0.2-0.6c0.2-0.2%2C0.5-0.4%2C1-0.4c0.4%2C0%2C0.7%2C0.1%2C0.9%2C0.2c0.2%2C0.1%2C0.3%2C0.4%2C0.3%2C0.7c0%2C0.1%2C0%2C0.3-0.1%2C0.3C4.4%2C7.7%2C4.3%2C7.8%2C4.1%2C7.8L2.7%2C8C2.2%2C8.1%2C1.8%2C8.2%2C1.5%2C8.5C1.2%2C8.8%2C1%2C9.1%2C1%2C9.6c0%2C0.4%2C0.2%2C0.8%2C0.5%2C1.1c0.3%2C0.3%2C0.7%2C0.4%2C1.2%2C0.4c0.4%2C0%2C0.8-0.1%2C1.1-0.3c0.3-0.2%2C0.6-0.4%2C0.8-0.6c0%2C0.2%2C0.1%2C0.4%2C0.2%2C0.5c0.1%2C0.2%2C0.4%2C0.3%2C0.7%2C0.3c0.1%2C0%2C0.2%2C0%2C0.3%2C0c0.1%2C0%2C0.2%2C0%2C0.3-0.1v-0.6c-0.1%2C0-0.1%2C0-0.2%2C0C5.8%2C10.4%2C5.7%2C10.4%2C5.7%2C10.4z%20M4.5%2C9.1c0%2C0.5-0.2%2C0.9-0.7%2C1.2c-0.3%2C0.1-0.6%2C0.2-0.9%2C0.2c-0.3%2C0-0.5-0.1-0.7-0.2C2%2C10.1%2C2%2C9.9%2C2%2C9.6C2%2C9.3%2C2.1%2C9%2C2.4%2C8.9c0.2-0.1%2C0.4-0.2%2C0.7-0.2l0.5-0.1c0.2%2C0%2C0.3-0.1%2C0.5-0.1c0.2%2C0%2C0.3-0.1%2C0.4-0.2V9.1z%20M18.5%2C5L8.3%2C15.3l-0.5%2C2c-0.6%2C0.4-1.3%2C0.3-1.5%2C0.6c-0.3%2C0.4%2C0.9%2C0.4%2C1.5%2C0.3c0.4%2C0%2C0.5%2C0%2C0.5-0.2l2.2-0.6L20.7%2C7.1L18.5%2C5z%20M9%2C15.3l9.5-9.5L20%2C7.1l-9.5%2C9.5L9%2C15.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-bullets { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M7%2C4v1h15V4H7z%20M1%2C6h3V3H1V6z%20M7%2C12h15v-1H7V12z%20M1%2C13h3v-3H1V13z%20M7%2C19h15v-1H7V19z%20M1%2C20h3v-3H1V20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-numbers { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M7%2C3.8v1h15v-1H7z%20M7%2C11.8h15v-1H7V11.8z%20M7%2C18.8h15v-1H7V18.8z%20M3.1%2C6.9h0.7V2H3.3C3.2%2C2.4%2C3.1%2C2.6%2C2.9%2C2.7C2.7%2C2.8%2C2.4%2C2.9%2C2%2C2.9v0.5h1.2V6.9z%20M3.3%2C9C2.6%2C9%2C2.1%2C9.2%2C1.9%2C9.7c-0.2%2C0.3-0.2%2C0.6-0.2%2C1h0.6c0-0.3%2C0.1-0.5%2C0.1-0.7c0.2-0.3%2C0.5-0.5%2C0.9-0.5c0.3%2C0%2C0.5%2C0.1%2C0.7%2C0.3s0.3%2C0.4%2C0.3%2C0.7c0%2C0.2-0.1%2C0.5-0.3%2C0.7c-0.1%2C0.1-0.3%2C0.3-0.6%2C0.4l-0.7%2C0.4c-0.4%2C0.3-0.7%2C0.5-0.9%2C0.9c-0.2%2C0.3-0.2%2C0.7-0.3%2C1.1h3.4v-0.6H2.2c0.1-0.2%2C0.2-0.5%2C0.4-0.7c0.1-0.1%2C0.3-0.2%2C0.5-0.4L3.6%2C12c0.4-0.2%2C0.7-0.4%2C0.9-0.6c0.3-0.3%2C0.4-0.6%2C0.4-1c0-0.4-0.1-0.7-0.4-1C4.3%2C9.1%2C3.9%2C9%2C3.3%2C9z%20M4.1%2C18.3c0.2-0.1%2C0.3-0.2%2C0.4-0.3c0.2-0.2%2C0.2-0.4%2C0.2-0.7c0-0.4-0.1-0.7-0.4-1C4%2C16.1%2C3.6%2C16%2C3.1%2C16c-0.6%2C0-1.1%2C0.2-1.3%2C0.7c-0.1%2C0.3-0.2%2C0.6-0.2%2C0.9h0.6c0-0.3%2C0.1-0.5%2C0.1-0.6c0.2-0.3%2C0.4-0.4%2C0.9-0.4c0.2%2C0%2C0.4%2C0.1%2C0.6%2C0.2C4%2C16.9%2C4.1%2C17%2C4.1%2C17.3c0%2C0.3-0.1%2C0.6-0.4%2C0.7c-0.1%2C0.1-0.3%2C0.1-0.6%2C0.1c-0.1%2C0-0.1%2C0-0.1%2C0c0%2C0-0.1%2C0-0.2%2C0v0.5c0%2C0%2C0.1%2C0%2C0.1%2C0c0%2C0%2C0.1%2C0%2C0.1%2C0c0.4%2C0%2C0.7%2C0.1%2C0.9%2C0.2c0.2%2C0.1%2C0.3%2C0.4%2C0.3%2C0.7c0%2C0.3-0.1%2C0.5-0.3%2C0.7c-0.2%2C0.2-0.5%2C0.3-0.8%2C0.3c-0.4%2C0-0.7-0.1-0.9-0.4c-0.1-0.1-0.2-0.4-0.2-0.7H1.5c0%2C0.5%2C0.1%2C0.8%2C0.4%2C1.2C2.1%2C20.8%2C2.5%2C21%2C3.1%2C21c0.6%2C0%2C1-0.1%2C1.3-0.4c0.3-0.3%2C0.5-0.7%2C0.5-1.1c0-0.3-0.1-0.5-0.2-0.7C4.5%2C18.5%2C4.3%2C18.3%2C4.1%2C18.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-linespacing { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpolygon%20id%3D%22XMLID_7_%22%20points%3D%2222%2C4%2022%2C3%2012%2C3%2011%2C3%201%2C3%201%2C4%2011%2C4%2011%2C4.3%208%2C7.4%208.7%2C8.1%2011%2C5.7%2011%2C17.3%208.7%2C14.9%208%2C15.6%2011%2C18.7%2011%2C19%201%2C19%201%2C20%2011%2C20%2012%2C20%2022%2C20%2022%2C19%2012%2C19%2012%2C18.6%2015%2C15.6%2014.3%2C14.9%2012%2C17.2%2012%2C5.8%2014.3%2C8.1%2015%2C7.4%2012%2C4.4%2012%2C4%20%09%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-text-align-center { + width: 22px; + height: 22px; + background-color: #8ca946; + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M1%2C3v1h21V3H1z%20M4%2C7v1h14V7H4z%20M1%2C12h21v-1H1V12z%20M4%2C15v1h14v-1H4z%20M1%2C20h21v-1H1V20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-text-align-jast { + width: 22px; + height: 22px; + background-color: #8ca946; + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M1%2C3v1h21V3H1z%20M1%2C8h21V7H1V8z%20M1%2C12h21v-1H1V12z%20M1%2C16h21v-1H1V16z%20M1%2C20h21v-1H1V20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-text-align-left { + width: 22px; + height: 22px; + background-color: #8ca946; + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M1%2C3v1h21V3H1z%20M15%2C7H1v1h14V7z%20M1%2C12h21v-1H1V12z%20M15%2C15H1v1h14V15z%20M1%2C20h21v-1H1V20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-text-align-right { + width: 22px; + height: 22px; + background-color: #8ca946; + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M1%2C3v1h21V3H1z%20M8%2C8h14V7H8V8z%20M22%2C11H1v1h21V11z%20M8%2C16h14v-1H8V16z%20M22%2C19H1v1h21V19z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-de-indent { + width: 22px; + height: 22px; + background-color: #8ca946; + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M1%2C20v-1h21v1H1z%20M11%2C15h11v1H11V15z%20M11%2C11h11v1H11V11z%20M11%2C7h11v1H11V7z%20M6.3%2C7L7%2C7.7l-3.8%2C3.8L7%2C15.3L6.3%2C16L2%2C11.8l-0.2-0.3L2%2C11.2L6.3%2C7z%20M1%2C3h21v1H1V3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-in-indent { + width: 22px; + height: 22px; + background-color: #8ca946; + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M1%2C20v-1h21v1H1z%20M12%2C16H1v-1h11V16z%20M12%2C12H1v-1h11V12z%20M12%2C8H1V7h11V8z%20M21%2C11.2l0.2%2C0.3L21%2C11.8L16.7%2C16L16%2C15.3l3.8-3.8L16%2C7.7L16.7%2C7L21%2C11.2z%20M22%2C4H1V3h21V4z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-prev { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M16%2C20.5L15%2C21.5L4.5%2C11l0%2C0l0%2C0L15%2C0.5L16%2C1.5L6.6%2C11L16%2C20.5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-next { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M15.5%2C11L6%2C1.5l1.1-1.1L17.5%2C11l0%2C0l0%2C0L7.1%2C21.5L6%2C20.5L15.5%2C11z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-table-add-column-left { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M15%2C19h-1H8H7v-1v-3H0V2h7h1h14v4v1v3v1v3v1v3v1H15z%20M15%2C18h6v-3h-6V18z%20M15%2C14h6v-3h-6V14z%20M8%2C18h6v-3H8V18z%20M8%2C14h6v-3H8V14z%20M14%2C10V7H8v3H14z%20M8%2C3v3h6V3H8z%20M21%2C3h-6v3h6V3z%20M15%2C7v3h6V7H15z%20M3%2C16h1v2h2v1H4v2H3v-2H1v-1h2V16z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-table-add-column-right { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M0%2C19l0-1l0-3l0-1l0-3l0-1l0-3l0-1l0-4h14h1h7v13h-7v3v1h-1H8H7H0z%20M7%2C15H1v3h6V15z%20M7%2C11H1v3h6V11z%20M14%2C15H8v3h6V15z%20M14%2C11H8v3h6V11z%20M14%2C10V7H8v3H14z%20M8%2C3v3h6V3H8z%20M1%2C6h6V3H1V6z%20M1%2C7v3h6V7H1z%20M19%2C18h2v1h-2v2h-1v-2h-2v-1h2v-2h1V18z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-table-add-row-above { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M21%2C20h-6h-1H8H7H0v-1v-3v-1v-3v-1V8V7V1h15v6h6h1v1v3v1v3v1v3v1H21z%20M7%2C8H1v3h6V8z%20M7%2C12H1v3h6V12z%20M7%2C16H1v3h6V16z%20M8%2C19h6v-3H8V19z%20M8%2C15h6v-3H8V15z%20M8%2C11h6V8H8V11z%20M21%2C8h-6v3h6V8z%20M21%2C12h-6v3h6V12z%20M21%2C16h-6v3h6V16z%20M19%2C6h-1V4h-2V3h2V1h1v2h2v1h-2V6z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-table-add-row-below { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M22%2C1v1v3v1v3v1v3v1h-1h-6v6H0v-6v-1v-3V9V6V5V2V1h7h1h6h1h6H22z%20M7%2C10H1v3h6V10z%20M7%2C6H1v3h6V6z%20M7%2C2H1v3h6V2z%20M8%2C5h6V2H8V5z%20M8%2C9h6V6H8V9z%20M8%2C13h6v-3H8V13z%20M21%2C10h-6v3h6V10z%20M21%2C6h-6v3h6V6z%20M21%2C2h-6v3h6V2z%20M19%2C17h2v1h-2v2h-1v-2h-2v-1h2v-2h1V17z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-table-remove-column { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M21%2C19h-6h-1h-1.6c-0.9%2C1.8-2.7%2C3-4.9%2C3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z%20M7.5%2C12C5%2C12%2C3%2C14%2C3%2C16.5S5%2C21%2C7.5%2C21s4.5-2%2C4.5-4.5S10%2C12%2C7.5%2C12z%20M14%2C3H8v3h6V3z%20M14%2C7H8v3h6V7z%20M14%2C11H8v0.1c1.9%2C0.2%2C3.5%2C1.3%2C4.4%2C2.9H14V11z%20M14%2C15h-1.2c0.1%2C0.5%2C0.2%2C1%2C0.2%2C1.5c0%2C0.5-0.1%2C1-0.2%2C1.5H14V15z%20M21%2C3h-6v3h6V3z%20M21%2C7h-6v3h6V7z%20M21%2C11h-6v3h6V11z%20M21%2C15h-6v3h6V15z%20M9.6%2C19.3l-2.1-2.1l-2.1%2C2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1%2C2.1l2.1-2.1l0.7%2C0.7l-2.1%2C2.1l2.1%2C2.1L9.6%2C19.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-table-remove-row { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M21%2C19h-6h-1h-1.6c-0.9%2C1.8-2.7%2C3-4.9%2C3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z%20M1%2C18h1.2C2.1%2C17.5%2C2%2C17%2C2%2C16.5c0-0.5%2C0.1-1%2C0.2-1.5H1V18z%20M7%2C3H1v3h6V3z%20M7%2C7H1v3h6V7z%20M7.5%2C12C5%2C12%2C3%2C14%2C3%2C16.5S5%2C21%2C7.5%2C21s4.5-2%2C4.5-4.5S10%2C12%2C7.5%2C12z%20M14%2C3H8v3h6V3z%20M14%2C7H8v3h6V7z%20M14%2C15h-1.2c0.1%2C0.5%2C0.2%2C1%2C0.2%2C1.5c0%2C0.5-0.1%2C1-0.2%2C1.5H14V15z%20M21%2C3h-6v3h6V3z%20M21%2C7h-6v3h6V7z%20M21%2C15h-6v3h6V15z%20M9.6%2C19.3l-2.1-2.1l-2.1%2C2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1%2C2.1l2.1-2.1l0.7%2C0.7l-2.1%2C2.1l2.1%2C2.1L9.6%2C19.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-expand-down { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M20.5%2C6.5l1.1%2C1.1L11%2C18l0%2C0l0%2C0L0.5%2C7.5l1.1-1.1l9.5%2C9.5L20.5%2C6.5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-pagebreak { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M8%2C14v1h1v-1H8z%20M6%2C14v1h1v-1H6z%20M18%2C21H3v-6H2v7h17v-7h-1V21z%20M4%2C14v1h1v-1H4z%20M14%2C14v1h1v-1H14z%20M10%2C14v1h1v-1H10z%20M8.2%2C1L2%2C7.6V14h1V9h6V2l0%2C0h9v12h1V1H8.2z%20M8%2C8H3.1L8%2C2.8V8z%20M12%2C14v1h1v-1H12z%20M16%2C14v1h1v-1H16z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-sectionbreak { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M20%2C14V2H3v12H2V1h19v13H20z%20M5%2C14v1H4v-1H5z%20M7%2C14v1H6v-1H7z%20M9%2C14v1H8v-1H9z%20M11%2C14v1h-1v-1H11z%20M13%2C14v1h-1v-1H13z%20M15%2C14v1h-1v-1H15z%20M17%2C14v1h-1v-1H17z%20M18%2C14h1v1h-1V14z%20M3%2C21h17v-6h1v7H2v-7h1V21z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-stringbreak { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M18%2C12H5.1L9%2C15.9l-0.7%2C0.7l-4.5-4.5l-0.6-0.6l0.6-0.6l4.5-4.5L9%2C7.1L5.1%2C11H18V5h1v6v1H18z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-pagenumber { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M8.2%2C1L2%2C7.6V22h17V1H8.2z%20M8%2C2.8V8H3.1L8%2C2.8z%20M18%2C21H3V9h6V2l0%2C0h9V21z%20M12%2C19h1v-4h-0.7c0%2C0.2-0.1-0.1-0.1%2C0c-0.1%2C0.1-0.2%2C0-0.3%2C0c-0.1%2C0.1-0.2%2C0.1-0.4%2C0.1c-0.1%2C0-0.3%2C0-0.4%2C0V16H12V19z%20M15.3%2C17.3C15%2C17.9%2C15.1%2C18.4%2C15%2C19h0.9c0-0.3%2C0-0.6%2C0.1-0.9c0.1-0.3%2C0.1-0.6%2C0.3-0.9c0.1-0.3%2C0.3-0.6%2C0.4-0.9c0.2-0.3%2C0.1-0.3%2C0.3-0.5V15h-3v1h1.9C15.6%2C16.4%2C15.5%2C16.7%2C15.3%2C17.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-link { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%238ca946%22%3E%3Cg%3E%3Cpath%20d%3D%22M12.4%2C9.8c0%2C0-2.1-0.1-3.8%2C1.2c-2.8%2C2-3.3%2C4.3-3.3%2C4.3s1.6-1.7%2C3.5-2.5c1.7-0.7%2C3.7-0.4%2C3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z%20M11%2C1C5.5%2C1%2C1%2C5.5%2C1%2C11c0%2C5.5%2C4.5%2C10%2C10%2C10s10-4.5%2C10-10C21%2C5.5%2C16.5%2C1%2C11%2C1z%20M11%2C20c-5%2C0-9-4.1-9-9C2%2C6%2C6%2C2%2C11%2C2s9%2C4.1%2C9%2C9C20%2C16%2C16%2C20%2C11%2C20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +#add-table .page, +#add-shape .page { + background-color: #fff; +} +.table-styles .row, +.table-styles .row li { + margin-bottom: 12px; +} +.table-styles li { + margin: 0; + padding: 1px; +} +.table-styles li img { + width: 70px; + height: 50px; +} +.shapes li { + width: 70px; + height: 70px; + margin: 0 1px; +} +.shapes li .thumb { + width: 100%; + height: 100%; + background-color: #8ca946; +} +.chart-types li { + width: 60px; + height: 60px; + margin: 6px; +} +.chart-types li .thumb { + width: 100%; + height: 100%; + background-size: contain; +} +.bullets ul, +.numbers ul { + margin-top: 10px; +} +.bullets li, +.numbers li { + width: 70px; + height: 70px; + margin-right: 1px; + border: 1px solid #c4c4c4; +} +html.pixel-ratio-2 .bullets li, +html.pixel-ratio-2 .numbers li { + border: 0.5px solid #c4c4c4; +} +html.pixel-ratio-3 .bullets li, +html.pixel-ratio-3 .numbers li { + border: 0.33px solid #c4c4c4; +} +.bullets li .thumb, +.numbers li .thumb { + width: 100%; + height: 100%; + background-color: #ffffff; + background-size: cover; +} +.bullets li .thumb label, +.numbers li .thumb label { + width: 100%; + text-align: center; + position: absolute; + top: 34%; +} diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-material.css b/apps/spreadsheeteditor/mobile/resources/css/app-material.css new file mode 100644 index 000000000..dad5c542e --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/css/app-material.css @@ -0,0 +1,6128 @@ +html, +body, +.framework7-root { + position: relative; + height: 100%; + width: 100%; + overflow-x: hidden; +} +body { + font-family: Roboto, Noto, Helvetica, Arial, sans-serif; + margin: 0; + padding: 0; + color: #212121; + font-size: 14px; + line-height: 1.5; + width: 100%; + -webkit-text-size-adjust: 100%; + background: #fff; + overflow: hidden; +} +.framework7-root { + overflow: hidden; +} +* { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-touch-callout: none; +} +a, +input, +textarea, +select { + outline: 0; +} +a { + text-decoration: none; + color: #5a7dc9; +} +p { + margin: 1em 0; +} +/* === Grid === */ +.row { + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-lines: multiple; + -moz-box-lines: multiple; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; +} +.row > [class*="col-"] { + box-sizing: border-box; +} +.row .col-auto { + width: 100%; +} +.row .col-100 { + width: 100%; + width: -webkit-calc((100% - 16px*0) / 1); + width: calc((100% - 16px*0) / 1); +} +.row.no-gutter .col-100 { + width: 100%; +} +.row .col-95 { + width: 95%; + width: -webkit-calc((100% - 16px*0.05263157894736836) / 1.0526315789473684); + width: calc((100% - 16px*0.05263157894736836) / 1.0526315789473684); +} +.row.no-gutter .col-95 { + width: 95%; +} +.row .col-90 { + width: 90%; + width: -webkit-calc((100% - 16px*0.11111111111111116) / 1.1111111111111112); + width: calc((100% - 16px*0.11111111111111116) / 1.1111111111111112); +} +.row.no-gutter .col-90 { + width: 90%; +} +.row .col-85 { + width: 85%; + width: -webkit-calc((100% - 16px*0.17647058823529416) / 1.1764705882352942); + width: calc((100% - 16px*0.17647058823529416) / 1.1764705882352942); +} +.row.no-gutter .col-85 { + width: 85%; +} +.row .col-80 { + width: 80%; + width: -webkit-calc((100% - 16px*0.25) / 1.25); + width: calc((100% - 16px*0.25) / 1.25); +} +.row.no-gutter .col-80 { + width: 80%; +} +.row .col-75 { + width: 75%; + width: -webkit-calc((100% - 16px*0.33333333333333326) / 1.3333333333333333); + width: calc((100% - 16px*0.33333333333333326) / 1.3333333333333333); +} +.row.no-gutter .col-75 { + width: 75%; +} +.row .col-70 { + width: 70%; + width: -webkit-calc((100% - 16px*0.4285714285714286) / 1.4285714285714286); + width: calc((100% - 16px*0.4285714285714286) / 1.4285714285714286); +} +.row.no-gutter .col-70 { + width: 70%; +} +.row .col-66 { + width: 66.66666666666666%; + width: -webkit-calc((100% - 16px*0.5000000000000002) / 1.5000000000000002); + width: calc((100% - 16px*0.5000000000000002) / 1.5000000000000002); +} +.row.no-gutter .col-66 { + width: 66.66666666666666%; +} +.row .col-65 { + width: 65%; + width: -webkit-calc((100% - 16px*0.5384615384615385) / 1.5384615384615385); + width: calc((100% - 16px*0.5384615384615385) / 1.5384615384615385); +} +.row.no-gutter .col-65 { + width: 65%; +} +.row .col-60 { + width: 60%; + width: -webkit-calc((100% - 16px*0.6666666666666667) / 1.6666666666666667); + width: calc((100% - 16px*0.6666666666666667) / 1.6666666666666667); +} +.row.no-gutter .col-60 { + width: 60%; +} +.row .col-55 { + width: 55%; + width: -webkit-calc((100% - 16px*0.8181818181818181) / 1.8181818181818181); + width: calc((100% - 16px*0.8181818181818181) / 1.8181818181818181); +} +.row.no-gutter .col-55 { + width: 55%; +} +.row .col-50 { + width: 50%; + width: -webkit-calc((100% - 16px*1) / 2); + width: calc((100% - 16px*1) / 2); +} +.row.no-gutter .col-50 { + width: 50%; +} +.row .col-45 { + width: 45%; + width: -webkit-calc((100% - 16px*1.2222222222222223) / 2.2222222222222223); + width: calc((100% - 16px*1.2222222222222223) / 2.2222222222222223); +} +.row.no-gutter .col-45 { + width: 45%; +} +.row .col-40 { + width: 40%; + width: -webkit-calc((100% - 16px*1.5) / 2.5); + width: calc((100% - 16px*1.5) / 2.5); +} +.row.no-gutter .col-40 { + width: 40%; +} +.row .col-35 { + width: 35%; + width: -webkit-calc((100% - 16px*1.8571428571428572) / 2.857142857142857); + width: calc((100% - 16px*1.8571428571428572) / 2.857142857142857); +} +.row.no-gutter .col-35 { + width: 35%; +} +.row .col-33 { + width: 33.333333333333336%; + width: -webkit-calc((100% - 16px*2) / 3); + width: calc((100% - 16px*2) / 3); +} +.row.no-gutter .col-33 { + width: 33.333333333333336%; +} +.row .col-30 { + width: 30%; + width: -webkit-calc((100% - 16px*2.3333333333333335) / 3.3333333333333335); + width: calc((100% - 16px*2.3333333333333335) / 3.3333333333333335); +} +.row.no-gutter .col-30 { + width: 30%; +} +.row .col-25 { + width: 25%; + width: -webkit-calc((100% - 16px*3) / 4); + width: calc((100% - 16px*3) / 4); +} +.row.no-gutter .col-25 { + width: 25%; +} +.row .col-20 { + width: 20%; + width: -webkit-calc((100% - 16px*4) / 5); + width: calc((100% - 16px*4) / 5); +} +.row.no-gutter .col-20 { + width: 20%; +} +.row .col-15 { + width: 15%; + width: -webkit-calc((100% - 16px*5.666666666666667) / 6.666666666666667); + width: calc((100% - 16px*5.666666666666667) / 6.666666666666667); +} +.row.no-gutter .col-15 { + width: 15%; +} +.row .col-10 { + width: 10%; + width: -webkit-calc((100% - 16px*9) / 10); + width: calc((100% - 16px*9) / 10); +} +.row.no-gutter .col-10 { + width: 10%; +} +.row .col-5 { + width: 5%; + width: -webkit-calc((100% - 16px*19) / 20); + width: calc((100% - 16px*19) / 20); +} +.row.no-gutter .col-5 { + width: 5%; +} +.row .col-auto:nth-last-child(1), +.row .col-auto:nth-last-child(1) ~ .col-auto { + width: 100%; + width: -webkit-calc((100% - 16px*0) / 1); + width: calc((100% - 16px*0) / 1); +} +.row.no-gutter .col-auto:nth-last-child(1), +.row.no-gutter .col-auto:nth-last-child(1) ~ .col-auto { + width: 100%; +} +.row .col-auto:nth-last-child(2), +.row .col-auto:nth-last-child(2) ~ .col-auto { + width: 50%; + width: -webkit-calc((100% - 16px*1) / 2); + width: calc((100% - 16px*1) / 2); +} +.row.no-gutter .col-auto:nth-last-child(2), +.row.no-gutter .col-auto:nth-last-child(2) ~ .col-auto { + width: 50%; +} +.row .col-auto:nth-last-child(3), +.row .col-auto:nth-last-child(3) ~ .col-auto { + width: 33.33333333%; + width: -webkit-calc((100% - 16px*2) / 3); + width: calc((100% - 16px*2) / 3); +} +.row.no-gutter .col-auto:nth-last-child(3), +.row.no-gutter .col-auto:nth-last-child(3) ~ .col-auto { + width: 33.33333333%; +} +.row .col-auto:nth-last-child(4), +.row .col-auto:nth-last-child(4) ~ .col-auto { + width: 25%; + width: -webkit-calc((100% - 16px*3) / 4); + width: calc((100% - 16px*3) / 4); +} +.row.no-gutter .col-auto:nth-last-child(4), +.row.no-gutter .col-auto:nth-last-child(4) ~ .col-auto { + width: 25%; +} +.row .col-auto:nth-last-child(5), +.row .col-auto:nth-last-child(5) ~ .col-auto { + width: 20%; + width: -webkit-calc((100% - 16px*4) / 5); + width: calc((100% - 16px*4) / 5); +} +.row.no-gutter .col-auto:nth-last-child(5), +.row.no-gutter .col-auto:nth-last-child(5) ~ .col-auto { + width: 20%; +} +.row .col-auto:nth-last-child(6), +.row .col-auto:nth-last-child(6) ~ .col-auto { + width: 16.66666667%; + width: -webkit-calc((100% - 16px*5) / 6); + width: calc((100% - 16px*5) / 6); +} +.row.no-gutter .col-auto:nth-last-child(6), +.row.no-gutter .col-auto:nth-last-child(6) ~ .col-auto { + width: 16.66666667%; +} +.row .col-auto:nth-last-child(7), +.row .col-auto:nth-last-child(7) ~ .col-auto { + width: 14.28571429%; + width: -webkit-calc((100% - 16px*6) / 7); + width: calc((100% - 16px*6) / 7); +} +.row.no-gutter .col-auto:nth-last-child(7), +.row.no-gutter .col-auto:nth-last-child(7) ~ .col-auto { + width: 14.28571429%; +} +.row .col-auto:nth-last-child(8), +.row .col-auto:nth-last-child(8) ~ .col-auto { + width: 12.5%; + width: -webkit-calc((100% - 16px*7) / 8); + width: calc((100% - 16px*7) / 8); +} +.row.no-gutter .col-auto:nth-last-child(8), +.row.no-gutter .col-auto:nth-last-child(8) ~ .col-auto { + width: 12.5%; +} +.row .col-auto:nth-last-child(9), +.row .col-auto:nth-last-child(9) ~ .col-auto { + width: 11.11111111%; + width: -webkit-calc((100% - 16px*8) / 9); + width: calc((100% - 16px*8) / 9); +} +.row.no-gutter .col-auto:nth-last-child(9), +.row.no-gutter .col-auto:nth-last-child(9) ~ .col-auto { + width: 11.11111111%; +} +.row .col-auto:nth-last-child(10), +.row .col-auto:nth-last-child(10) ~ .col-auto { + width: 10%; + width: -webkit-calc((100% - 16px*9) / 10); + width: calc((100% - 16px*9) / 10); +} +.row.no-gutter .col-auto:nth-last-child(10), +.row.no-gutter .col-auto:nth-last-child(10) ~ .col-auto { + width: 10%; +} +.row .col-auto:nth-last-child(11), +.row .col-auto:nth-last-child(11) ~ .col-auto { + width: 9.09090909%; + width: -webkit-calc((100% - 16px*10) / 11); + width: calc((100% - 16px*10) / 11); +} +.row.no-gutter .col-auto:nth-last-child(11), +.row.no-gutter .col-auto:nth-last-child(11) ~ .col-auto { + width: 9.09090909%; +} +.row .col-auto:nth-last-child(12), +.row .col-auto:nth-last-child(12) ~ .col-auto { + width: 8.33333333%; + width: -webkit-calc((100% - 16px*11) / 12); + width: calc((100% - 16px*11) / 12); +} +.row.no-gutter .col-auto:nth-last-child(12), +.row.no-gutter .col-auto:nth-last-child(12) ~ .col-auto { + width: 8.33333333%; +} +.row .col-auto:nth-last-child(13), +.row .col-auto:nth-last-child(13) ~ .col-auto { + width: 7.69230769%; + width: -webkit-calc((100% - 16px*12) / 13); + width: calc((100% - 16px*12) / 13); +} +.row.no-gutter .col-auto:nth-last-child(13), +.row.no-gutter .col-auto:nth-last-child(13) ~ .col-auto { + width: 7.69230769%; +} +.row .col-auto:nth-last-child(14), +.row .col-auto:nth-last-child(14) ~ .col-auto { + width: 7.14285714%; + width: -webkit-calc((100% - 16px*13) / 14); + width: calc((100% - 16px*13) / 14); +} +.row.no-gutter .col-auto:nth-last-child(14), +.row.no-gutter .col-auto:nth-last-child(14) ~ .col-auto { + width: 7.14285714%; +} +.row .col-auto:nth-last-child(15), +.row .col-auto:nth-last-child(15) ~ .col-auto { + width: 6.66666667%; + width: -webkit-calc((100% - 16px*14) / 15); + width: calc((100% - 16px*14) / 15); +} +.row.no-gutter .col-auto:nth-last-child(15), +.row.no-gutter .col-auto:nth-last-child(15) ~ .col-auto { + width: 6.66666667%; +} +.row .col-auto:nth-last-child(16), +.row .col-auto:nth-last-child(16) ~ .col-auto { + width: 6.25%; + width: -webkit-calc((100% - 16px*15) / 16); + width: calc((100% - 16px*15) / 16); +} +.row.no-gutter .col-auto:nth-last-child(16), +.row.no-gutter .col-auto:nth-last-child(16) ~ .col-auto { + width: 6.25%; +} +.row .col-auto:nth-last-child(17), +.row .col-auto:nth-last-child(17) ~ .col-auto { + width: 5.88235294%; + width: -webkit-calc((100% - 16px*16) / 17); + width: calc((100% - 16px*16) / 17); +} +.row.no-gutter .col-auto:nth-last-child(17), +.row.no-gutter .col-auto:nth-last-child(17) ~ .col-auto { + width: 5.88235294%; +} +.row .col-auto:nth-last-child(18), +.row .col-auto:nth-last-child(18) ~ .col-auto { + width: 5.55555556%; + width: -webkit-calc((100% - 16px*17) / 18); + width: calc((100% - 16px*17) / 18); +} +.row.no-gutter .col-auto:nth-last-child(18), +.row.no-gutter .col-auto:nth-last-child(18) ~ .col-auto { + width: 5.55555556%; +} +.row .col-auto:nth-last-child(19), +.row .col-auto:nth-last-child(19) ~ .col-auto { + width: 5.26315789%; + width: -webkit-calc((100% - 16px*18) / 19); + width: calc((100% - 16px*18) / 19); +} +.row.no-gutter .col-auto:nth-last-child(19), +.row.no-gutter .col-auto:nth-last-child(19) ~ .col-auto { + width: 5.26315789%; +} +.row .col-auto:nth-last-child(20), +.row .col-auto:nth-last-child(20) ~ .col-auto { + width: 5%; + width: -webkit-calc((100% - 16px*19) / 20); + width: calc((100% - 16px*19) / 20); +} +.row.no-gutter .col-auto:nth-last-child(20), +.row.no-gutter .col-auto:nth-last-child(20) ~ .col-auto { + width: 5%; +} +.row .col-auto:nth-last-child(21), +.row .col-auto:nth-last-child(21) ~ .col-auto { + width: 4.76190476%; + width: -webkit-calc((100% - 16px*20) / 21); + width: calc((100% - 16px*20) / 21); +} +.row.no-gutter .col-auto:nth-last-child(21), +.row.no-gutter .col-auto:nth-last-child(21) ~ .col-auto { + width: 4.76190476%; +} +@media all and (min-width: 768px) { + .row .tablet-100 { + width: 100%; + width: -webkit-calc((100% - 16px*0) / 1); + width: calc((100% - 16px*0) / 1); + } + .row.no-gutter .tablet-100 { + width: 100%; + } + .row .tablet-95 { + width: 95%; + width: -webkit-calc((100% - 16px*0.05263157894736836) / 1.0526315789473684); + width: calc((100% - 16px*0.05263157894736836) / 1.0526315789473684); + } + .row.no-gutter .tablet-95 { + width: 95%; + } + .row .tablet-90 { + width: 90%; + width: -webkit-calc((100% - 16px*0.11111111111111116) / 1.1111111111111112); + width: calc((100% - 16px*0.11111111111111116) / 1.1111111111111112); + } + .row.no-gutter .tablet-90 { + width: 90%; + } + .row .tablet-85 { + width: 85%; + width: -webkit-calc((100% - 16px*0.17647058823529416) / 1.1764705882352942); + width: calc((100% - 16px*0.17647058823529416) / 1.1764705882352942); + } + .row.no-gutter .tablet-85 { + width: 85%; + } + .row .tablet-80 { + width: 80%; + width: -webkit-calc((100% - 16px*0.25) / 1.25); + width: calc((100% - 16px*0.25) / 1.25); + } + .row.no-gutter .tablet-80 { + width: 80%; + } + .row .tablet-75 { + width: 75%; + width: -webkit-calc((100% - 16px*0.33333333333333326) / 1.3333333333333333); + width: calc((100% - 16px*0.33333333333333326) / 1.3333333333333333); + } + .row.no-gutter .tablet-75 { + width: 75%; + } + .row .tablet-70 { + width: 70%; + width: -webkit-calc((100% - 16px*0.4285714285714286) / 1.4285714285714286); + width: calc((100% - 16px*0.4285714285714286) / 1.4285714285714286); + } + .row.no-gutter .tablet-70 { + width: 70%; + } + .row .tablet-66 { + width: 66.66666666666666%; + width: -webkit-calc((100% - 16px*0.5000000000000002) / 1.5000000000000002); + width: calc((100% - 16px*0.5000000000000002) / 1.5000000000000002); + } + .row.no-gutter .tablet-66 { + width: 66.66666666666666%; + } + .row .tablet-65 { + width: 65%; + width: -webkit-calc((100% - 16px*0.5384615384615385) / 1.5384615384615385); + width: calc((100% - 16px*0.5384615384615385) / 1.5384615384615385); + } + .row.no-gutter .tablet-65 { + width: 65%; + } + .row .tablet-60 { + width: 60%; + width: -webkit-calc((100% - 16px*0.6666666666666667) / 1.6666666666666667); + width: calc((100% - 16px*0.6666666666666667) / 1.6666666666666667); + } + .row.no-gutter .tablet-60 { + width: 60%; + } + .row .tablet-55 { + width: 55%; + width: -webkit-calc((100% - 16px*0.8181818181818181) / 1.8181818181818181); + width: calc((100% - 16px*0.8181818181818181) / 1.8181818181818181); + } + .row.no-gutter .tablet-55 { + width: 55%; + } + .row .tablet-50 { + width: 50%; + width: -webkit-calc((100% - 16px*1) / 2); + width: calc((100% - 16px*1) / 2); + } + .row.no-gutter .tablet-50 { + width: 50%; + } + .row .tablet-45 { + width: 45%; + width: -webkit-calc((100% - 16px*1.2222222222222223) / 2.2222222222222223); + width: calc((100% - 16px*1.2222222222222223) / 2.2222222222222223); + } + .row.no-gutter .tablet-45 { + width: 45%; + } + .row .tablet-40 { + width: 40%; + width: -webkit-calc((100% - 16px*1.5) / 2.5); + width: calc((100% - 16px*1.5) / 2.5); + } + .row.no-gutter .tablet-40 { + width: 40%; + } + .row .tablet-35 { + width: 35%; + width: -webkit-calc((100% - 16px*1.8571428571428572) / 2.857142857142857); + width: calc((100% - 16px*1.8571428571428572) / 2.857142857142857); + } + .row.no-gutter .tablet-35 { + width: 35%; + } + .row .tablet-33 { + width: 33.333333333333336%; + width: -webkit-calc((100% - 16px*2) / 3); + width: calc((100% - 16px*2) / 3); + } + .row.no-gutter .tablet-33 { + width: 33.333333333333336%; + } + .row .tablet-30 { + width: 30%; + width: -webkit-calc((100% - 16px*2.3333333333333335) / 3.3333333333333335); + width: calc((100% - 16px*2.3333333333333335) / 3.3333333333333335); + } + .row.no-gutter .tablet-30 { + width: 30%; + } + .row .tablet-25 { + width: 25%; + width: -webkit-calc((100% - 16px*3) / 4); + width: calc((100% - 16px*3) / 4); + } + .row.no-gutter .tablet-25 { + width: 25%; + } + .row .tablet-20 { + width: 20%; + width: -webkit-calc((100% - 16px*4) / 5); + width: calc((100% - 16px*4) / 5); + } + .row.no-gutter .tablet-20 { + width: 20%; + } + .row .tablet-15 { + width: 15%; + width: -webkit-calc((100% - 16px*5.666666666666667) / 6.666666666666667); + width: calc((100% - 16px*5.666666666666667) / 6.666666666666667); + } + .row.no-gutter .tablet-15 { + width: 15%; + } + .row .tablet-10 { + width: 10%; + width: -webkit-calc((100% - 16px*9) / 10); + width: calc((100% - 16px*9) / 10); + } + .row.no-gutter .tablet-10 { + width: 10%; + } + .row .tablet-5 { + width: 5%; + width: -webkit-calc((100% - 16px*19) / 20); + width: calc((100% - 16px*19) / 20); + } + .row.no-gutter .tablet-5 { + width: 5%; + } + .row .tablet-auto:nth-last-child(1), + .row .tablet-auto:nth-last-child(1) ~ .col-auto { + width: 100%; + width: -webkit-calc((100% - 16px*0) / 1); + width: calc((100% - 16px*0) / 1); + } + .row.no-gutter .tablet-auto:nth-last-child(1), + .row.no-gutter .tablet-auto:nth-last-child(1) ~ .tablet-auto { + width: 100%; + } + .row .tablet-auto:nth-last-child(2), + .row .tablet-auto:nth-last-child(2) ~ .col-auto { + width: 50%; + width: -webkit-calc((100% - 16px*1) / 2); + width: calc((100% - 16px*1) / 2); + } + .row.no-gutter .tablet-auto:nth-last-child(2), + .row.no-gutter .tablet-auto:nth-last-child(2) ~ .tablet-auto { + width: 50%; + } + .row .tablet-auto:nth-last-child(3), + .row .tablet-auto:nth-last-child(3) ~ .col-auto { + width: 33.33333333%; + width: -webkit-calc((100% - 16px*2) / 3); + width: calc((100% - 16px*2) / 3); + } + .row.no-gutter .tablet-auto:nth-last-child(3), + .row.no-gutter .tablet-auto:nth-last-child(3) ~ .tablet-auto { + width: 33.33333333%; + } + .row .tablet-auto:nth-last-child(4), + .row .tablet-auto:nth-last-child(4) ~ .col-auto { + width: 25%; + width: -webkit-calc((100% - 16px*3) / 4); + width: calc((100% - 16px*3) / 4); + } + .row.no-gutter .tablet-auto:nth-last-child(4), + .row.no-gutter .tablet-auto:nth-last-child(4) ~ .tablet-auto { + width: 25%; + } + .row .tablet-auto:nth-last-child(5), + .row .tablet-auto:nth-last-child(5) ~ .col-auto { + width: 20%; + width: -webkit-calc((100% - 16px*4) / 5); + width: calc((100% - 16px*4) / 5); + } + .row.no-gutter .tablet-auto:nth-last-child(5), + .row.no-gutter .tablet-auto:nth-last-child(5) ~ .tablet-auto { + width: 20%; + } + .row .tablet-auto:nth-last-child(6), + .row .tablet-auto:nth-last-child(6) ~ .col-auto { + width: 16.66666667%; + width: -webkit-calc((100% - 16px*5) / 6); + width: calc((100% - 16px*5) / 6); + } + .row.no-gutter .tablet-auto:nth-last-child(6), + .row.no-gutter .tablet-auto:nth-last-child(6) ~ .tablet-auto { + width: 16.66666667%; + } + .row .tablet-auto:nth-last-child(7), + .row .tablet-auto:nth-last-child(7) ~ .col-auto { + width: 14.28571429%; + width: -webkit-calc((100% - 16px*6) / 7); + width: calc((100% - 16px*6) / 7); + } + .row.no-gutter .tablet-auto:nth-last-child(7), + .row.no-gutter .tablet-auto:nth-last-child(7) ~ .tablet-auto { + width: 14.28571429%; + } + .row .tablet-auto:nth-last-child(8), + .row .tablet-auto:nth-last-child(8) ~ .col-auto { + width: 12.5%; + width: -webkit-calc((100% - 16px*7) / 8); + width: calc((100% - 16px*7) / 8); + } + .row.no-gutter .tablet-auto:nth-last-child(8), + .row.no-gutter .tablet-auto:nth-last-child(8) ~ .tablet-auto { + width: 12.5%; + } + .row .tablet-auto:nth-last-child(9), + .row .tablet-auto:nth-last-child(9) ~ .col-auto { + width: 11.11111111%; + width: -webkit-calc((100% - 16px*8) / 9); + width: calc((100% - 16px*8) / 9); + } + .row.no-gutter .tablet-auto:nth-last-child(9), + .row.no-gutter .tablet-auto:nth-last-child(9) ~ .tablet-auto { + width: 11.11111111%; + } + .row .tablet-auto:nth-last-child(10), + .row .tablet-auto:nth-last-child(10) ~ .col-auto { + width: 10%; + width: -webkit-calc((100% - 16px*9) / 10); + width: calc((100% - 16px*9) / 10); + } + .row.no-gutter .tablet-auto:nth-last-child(10), + .row.no-gutter .tablet-auto:nth-last-child(10) ~ .tablet-auto { + width: 10%; + } + .row .tablet-auto:nth-last-child(11), + .row .tablet-auto:nth-last-child(11) ~ .col-auto { + width: 9.09090909%; + width: -webkit-calc((100% - 16px*10) / 11); + width: calc((100% - 16px*10) / 11); + } + .row.no-gutter .tablet-auto:nth-last-child(11), + .row.no-gutter .tablet-auto:nth-last-child(11) ~ .tablet-auto { + width: 9.09090909%; + } + .row .tablet-auto:nth-last-child(12), + .row .tablet-auto:nth-last-child(12) ~ .col-auto { + width: 8.33333333%; + width: -webkit-calc((100% - 16px*11) / 12); + width: calc((100% - 16px*11) / 12); + } + .row.no-gutter .tablet-auto:nth-last-child(12), + .row.no-gutter .tablet-auto:nth-last-child(12) ~ .tablet-auto { + width: 8.33333333%; + } + .row .tablet-auto:nth-last-child(13), + .row .tablet-auto:nth-last-child(13) ~ .col-auto { + width: 7.69230769%; + width: -webkit-calc((100% - 16px*12) / 13); + width: calc((100% - 16px*12) / 13); + } + .row.no-gutter .tablet-auto:nth-last-child(13), + .row.no-gutter .tablet-auto:nth-last-child(13) ~ .tablet-auto { + width: 7.69230769%; + } + .row .tablet-auto:nth-last-child(14), + .row .tablet-auto:nth-last-child(14) ~ .col-auto { + width: 7.14285714%; + width: -webkit-calc((100% - 16px*13) / 14); + width: calc((100% - 16px*13) / 14); + } + .row.no-gutter .tablet-auto:nth-last-child(14), + .row.no-gutter .tablet-auto:nth-last-child(14) ~ .tablet-auto { + width: 7.14285714%; + } + .row .tablet-auto:nth-last-child(15), + .row .tablet-auto:nth-last-child(15) ~ .col-auto { + width: 6.66666667%; + width: -webkit-calc((100% - 16px*14) / 15); + width: calc((100% - 16px*14) / 15); + } + .row.no-gutter .tablet-auto:nth-last-child(15), + .row.no-gutter .tablet-auto:nth-last-child(15) ~ .tablet-auto { + width: 6.66666667%; + } + .row .tablet-auto:nth-last-child(16), + .row .tablet-auto:nth-last-child(16) ~ .col-auto { + width: 6.25%; + width: -webkit-calc((100% - 16px*15) / 16); + width: calc((100% - 16px*15) / 16); + } + .row.no-gutter .tablet-auto:nth-last-child(16), + .row.no-gutter .tablet-auto:nth-last-child(16) ~ .tablet-auto { + width: 6.25%; + } + .row .tablet-auto:nth-last-child(17), + .row .tablet-auto:nth-last-child(17) ~ .col-auto { + width: 5.88235294%; + width: -webkit-calc((100% - 16px*16) / 17); + width: calc((100% - 16px*16) / 17); + } + .row.no-gutter .tablet-auto:nth-last-child(17), + .row.no-gutter .tablet-auto:nth-last-child(17) ~ .tablet-auto { + width: 5.88235294%; + } + .row .tablet-auto:nth-last-child(18), + .row .tablet-auto:nth-last-child(18) ~ .col-auto { + width: 5.55555556%; + width: -webkit-calc((100% - 16px*17) / 18); + width: calc((100% - 16px*17) / 18); + } + .row.no-gutter .tablet-auto:nth-last-child(18), + .row.no-gutter .tablet-auto:nth-last-child(18) ~ .tablet-auto { + width: 5.55555556%; + } + .row .tablet-auto:nth-last-child(19), + .row .tablet-auto:nth-last-child(19) ~ .col-auto { + width: 5.26315789%; + width: -webkit-calc((100% - 16px*18) / 19); + width: calc((100% - 16px*18) / 19); + } + .row.no-gutter .tablet-auto:nth-last-child(19), + .row.no-gutter .tablet-auto:nth-last-child(19) ~ .tablet-auto { + width: 5.26315789%; + } + .row .tablet-auto:nth-last-child(20), + .row .tablet-auto:nth-last-child(20) ~ .col-auto { + width: 5%; + width: -webkit-calc((100% - 16px*19) / 20); + width: calc((100% - 16px*19) / 20); + } + .row.no-gutter .tablet-auto:nth-last-child(20), + .row.no-gutter .tablet-auto:nth-last-child(20) ~ .tablet-auto { + width: 5%; + } + .row .tablet-auto:nth-last-child(21), + .row .tablet-auto:nth-last-child(21) ~ .col-auto { + width: 4.76190476%; + width: -webkit-calc((100% - 16px*20) / 21); + width: calc((100% - 16px*20) / 21); + } + .row.no-gutter .tablet-auto:nth-last-child(21), + .row.no-gutter .tablet-auto:nth-last-child(21) ~ .tablet-auto { + width: 4.76190476%; + } +} +/* === Views === */ +.views, +.view { + position: relative; + width: 100%; + height: 100%; + z-index: 5000; +} +.views { + overflow: auto; + -webkit-overflow-scrolling: touch; +} +.view { + overflow: hidden; + box-sizing: border-box; +} +/* === Pages === */ +.pages { + position: relative; + width: 100%; + height: 100%; + overflow: hidden; +} +.page { + box-sizing: border-box; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: #fff; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.page.cached { + display: none; +} +.page-on-left { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.page-on-right { + opacity: 0; + pointer-events: none; + -webkit-transform: translate3d(0, 56px, 0); + transform: translate3d(0, 56px, 0); +} +.page-content { + overflow: auto; + -webkit-overflow-scrolling: touch; + box-sizing: border-box; + height: 100%; + position: relative; + z-index: 1; +} +.page-transitioning { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.page-from-right-to-center { + pointer-events: none; + -webkit-animation: pageFromRightToCenter 300ms forwards; + animation: pageFromRightToCenter 300ms forwards; +} +.page-from-center-to-right { + pointer-events: none; + -webkit-animation: pageFromCenterToRight 300ms forwards; + animation: pageFromCenterToRight 300ms forwards; +} +@-webkit-keyframes pageFromRightToCenter { + from { + opacity: 0; + -webkit-transform: translate3d(0, 56px, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + } +} +@keyframes pageFromRightToCenter { + from { + opacity: 0; + transform: translate3d(0, 56px, 0); + } + to { + opacity: 1; + transform: translate3d(0, 0, 0); + } +} +@-webkit-keyframes pageFromCenterToRight { + from { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(0, 56px, 0); + } +} +@keyframes pageFromCenterToRight { + from { + opacity: 1; + transform: translate3d(0, 0, 0); + } + to { + opacity: 0; + transform: translate3d(0, 56px, 0); + } +} +.page-from-center-to-left { + -webkit-animation: pageFromCenterToLeft 300ms forwards; + animation: pageFromCenterToLeft 300ms forwards; +} +.page-from-left-to-center { + -webkit-animation: pageFromLeftToCenter 300ms forwards; + animation: pageFromLeftToCenter 300ms forwards; +} +@-webkit-keyframes pageFromCenterToLeft { + from { + opacity: 1; + } + to { + opacity: 1; + } +} +@keyframes pageFromCenterToLeft { + from { + opacity: 1; + } + to { + opacity: 1; + } +} +@-webkit-keyframes pageFromLeftToCenter { + from { + opacity: 1; + } + to { + opacity: 1; + } +} +@keyframes pageFromLeftToCenter { + from { + opacity: 1; + } + to { + opacity: 1; + } +} +/* === Toolbars === */ +.navbar-inner, +.toolbar-inner { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + box-sizing: border-box; + overflow: hidden; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +.navbar-inner { + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; +} +.toolbar-inner { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; +} +.navbar-inner.cached { + display: none; +} +.navbar, +.toolbar { + width: 100%; + box-sizing: border-box; + position: relative; + margin: 0; + z-index: 500; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + color: #fff; +} +.navbar b, +.toolbar b { + font-weight: 500; +} +.navbar ~ .toolbar { + z-index: 499; +} +.navbar, +.toolbar, +.subnavbar { + background: #5a7dc9; +} +.navbar a.link, +.toolbar a.link, +.subnavbar a.link { + text-decoration: none; + position: relative; + color: #fff; + box-sizing: border-box; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + padding: 0 16px; + min-width: 48px; +} +.navbar a.link:before, +.toolbar a.link:before, +.subnavbar a.link:before { + content: ''; + width: 152%; + height: 152%; + position: absolute; + left: -26%; + top: -26%; + background-image: -webkit-radial-gradient(center, circle cover, rgba(255, 255, 255, 0.15) 66%, rgba(255, 255, 255, 0) 66%); + background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.15) 66%, rgba(255, 255, 255, 0) 66%); + background-repeat: no-repeat; + background-position: center; + background-size: 100% 100%; + opacity: 0; + pointer-events: none; + -webkit-transition-duration: 600ms; + transition-duration: 600ms; +} +html:not(.watch-active-state) .navbar a.link:active:before, +html:not(.watch-active-state) .toolbar a.link:active:before, +html:not(.watch-active-state) .subnavbar a.link:active:before, +.navbar a.link.active-state:before, +.toolbar a.link.active-state:before, +.subnavbar a.link.active-state:before { + opacity: 1; + -webkit-transition-duration: 150ms; + transition-duration: 150ms; +} +.navbar a.link i + span, +.toolbar a.link i + span, +.subnavbar a.link i + span, +.navbar a.link i + i, +.toolbar a.link i + i, +.subnavbar a.link i + i, +.navbar a.link span + i, +.toolbar a.link span + i, +.subnavbar a.link span + i, +.navbar a.link span + span, +.toolbar a.link span + span, +.subnavbar a.link span + span { + margin-left: 8px; +} +.navbar a.icon-only, +.toolbar a.icon-only, +.subnavbar a.icon-only { + min-width: 0; + -webkit-box-flex: 0; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + flex-shrink: 0; +} +.navbar i.icon, +.toolbar i.icon, +.subnavbar i.icon { + display: block; +} +.navbar .center, +.subnavbar .center { + font-size: 20px; + font-weight: 500; + text-align: center; + margin: 0 16px; + position: relative; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 56px; + display: inline-block; + text-align: left; +} +.navbar .left, +.subnavbar .left, +.navbar .right, +.subnavbar .right { + -webkit-box-flex: 0; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + flex-shrink: 0; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.navbar .right, +.subnavbar .right { + margin-left: auto; +} +.navbar .right:first-child, +.subnavbar .right:first-child { + position: absolute; + right: 16px; + height: 100%; +} +.navbar { + left: 0; + top: 0; + height: 56px; + font-size: 20px; +} +.navbar a.link { + line-height: 56px; + height: 56px; +} +.popup .navbar { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.subnavbar { + height: 48px; + width: 100%; + position: absolute; + left: 0; + top: 100%; + z-index: 20; + box-sizing: border-box; + padding: 0 16px; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + overflow: hidden; +} +.subnavbar a.link { + line-height: 48px; + height: 48px; +} +.subnavbar .center { + line-height: 48px; +} +.subnavbar .center:first-child { + margin-left: 56px; +} +.navbar.no-border .subnavbar { + margin-top: 0; +} +.navbar-on-left .subnavbar, +.navbar-on-right .subnavbar { + pointer-events: none; +} +.navbar .subnavbar, +.page .subnavbar { + position: absolute; +} +.page > .subnavbar { + top: 0; + margin-top: 0; +} +.subnavbar > .buttons-row { + width: 100%; +} +.subnavbar .searchbar, +.subnavbar.searchbar { + position: absolute; +} +.subnavbar.searchbar, +.subnavbar .searchbar { + position: absolute; +} +.subnavbar .searchbar { + left: 0; + top: 0; +} +.toolbar { + left: 0; + bottom: 0; + height: 48px; + font-size: 14px; +} +.toolbar a.link { + line-height: 48px; + height: 48px; +} +.toolbar a { + -webkit-box-flex: 1; + -webkit-flex-shrink: 1; + -ms-flex: 0 1 auto; + flex-shrink: 1; + position: relative; + white-space: nowrap; + text-overflow: ellipsis; +} +.tabbar { + z-index: 5001; + overflow: hidden; + bottom: auto; + top: 0; +} +.tabbar .toolbar-inner { + padding-left: 0; + padding-right: 0; +} +.tabbar a.link { + line-height: 1.4; +} +.tabbar a.tab-link, +.tabbar a.link { + height: 100%; + width: 100%; + box-sizing: border-box; + padding-left: 0; + padding-right: 0; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -ms-flex: 1; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + font-size: 14px; + text-transform: uppercase; +} +.tabbar i.icon { + height: 24px; +} +.tabbar a.tab-link { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + overflow: hidden; + color: rgba(255, 255, 255, 0.7); + position: relative; +} +.tabbar a.tab-link.active, +html:not(.watch-active-state) .tabbar a.tab-link:active, +.tabbar a.tab-link.active-state { + color: #ffffff; +} +.tabbar .tab-link-highlight { + position: absolute; + left: 0; + bottom: 0; + height: 3px; + background: #3557a2; + background: rgba(255, 255, 255, 0.5); + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.tabbar-labels { + height: 72px; +} +.tabbar-labels a.tab-link, +.tabbar-labels a.link { + padding-top: 12px; + padding-bottom: 12px; + height: 100%; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; +} +.tabbar-labels span.tabbar-label { + line-height: 1; + display: block; + margin: 0; + margin-top: 10px; + position: relative; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + max-width: 100%; +} +.tabbar-scrollable .toolbar-inner { + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + overflow: auto; +} +.tabbar-scrollable .toolbar-inner::-webkit-scrollbar { + display: none !important; + width: 0 !important; + height: 0 !important; + -webkit-appearance: none; + opacity: 0 !important; +} +.tabbar-scrollable a.tab-link, +.tabbar-scrollable a.link { + width: auto; + -webkit-box-flex: 0; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + flex-shrink: 0; + -ms-flex: 0; + padding: 0 16px; +} +.toolbar-bottom { + bottom: 0; + top: auto; +} +.toolbar-bottom .tab-link-highlight { + bottom: auto; + top: 0; +} +.subnavbar input[type="text"], +.navbar input[type="text"], +.subnavbar input[type="password"], +.navbar input[type="password"], +.subnavbar input[type="search"], +.navbar input[type="search"], +.subnavbar input[type="email"], +.navbar input[type="email"], +.subnavbar input[type="tel"], +.navbar input[type="tel"], +.subnavbar input[type="url"], +.navbar input[type="url"] { + box-sizing: border-box; + width: 100%; + height: 32px; + display: block; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + border-radius: 0; + font-family: inherit; + color: #fff; + font-size: 16px; + font-weight: 400; + background-color: transparent; + padding: 0; + border-bottom: 1px solid #fff; +} +.subnavbar input[type="text"]::-webkit-input-placeholder, +.navbar input[type="text"]::-webkit-input-placeholder, +.subnavbar input[type="password"]::-webkit-input-placeholder, +.navbar input[type="password"]::-webkit-input-placeholder, +.subnavbar input[type="search"]::-webkit-input-placeholder, +.navbar input[type="search"]::-webkit-input-placeholder, +.subnavbar input[type="email"]::-webkit-input-placeholder, +.navbar input[type="email"]::-webkit-input-placeholder, +.subnavbar input[type="tel"]::-webkit-input-placeholder, +.navbar input[type="tel"]::-webkit-input-placeholder, +.subnavbar input[type="url"]::-webkit-input-placeholder, +.navbar input[type="url"]::-webkit-input-placeholder { + color: #ffffff; + opacity: 1; +} +/* === Relation between toolbar/navbar types and pages === */ +.page > .navbar, +.view > .navbar, +.views > .navbar, +.page > .toolbar, +.view > .toolbar, +.views > .toolbar { + position: absolute; +} +.subnavbar ~ .page-content { + padding-top: 48px; +} +.toolbar-fixed .page-content, +.tabbar-fixed .page-content { + padding-top: 48px; +} +.tabbar-labels-fixed .page-content { + padding-top: 72px; +} +.toolbar ~ .page-content { + padding-top: 48px; +} +.tabbar-labels ~ .page-content { + padding-top: 72px; +} +.toolbar-bottom ~ .page-content, +.messagebar ~ .page-content { + padding-top: 0; + padding-bottom: 48px; +} +.tabbar-labels.toolbar-bottom ~ .page-content { + padding-bottom: 72px; +} +.navbar-fixed .page-content { + padding-top: 56px; +} +.navbar-fixed.toolbar-fixed .page-content, +.navbar-fixed.tabbar-fixed .page-content, +.navbar-fixed .toolbar-fixed .page-content, +.navbar-fixed .tabbar-fixed .page-content, +.toolbar-fixed .navbar-fixed .page-content, +.tabbar-fixed .navbar-fixed .page-content { + padding-top: 104px; +} +.navbar-fixed.tabbar-labels-fixed .page-content, +.navbar-fixed .tabbar-labels-fixed .page-content, +.tabbar-labels-fixed .navbar-fixed .page-content { + padding-top: 128px; +} +.navbar-fixed .toolbar ~ .page-content { + padding-top: 104px; +} +.navbar-fixed .messagebar ~ .page-content, +.navbar-fixed .toolbar-bottom ~ .page-content { + padding-top: 56px; +} +.navbar-fixed .tabbar-labels ~ .page-content { + padding-top: 128px; +} +.navbar-fixed .tabbar-labels.toolbar-bottom ~ .page-content { + padding-top: 56px; +} +.navbar-fixed .with-subnavbar .page-content, +.navbar-fixed .page-content.with-subnavbar, +.navbar-fixed .subnavbar ~ .page-content { + padding-top: 104px; +} +.navbar-fixed .page .subnavbar, +.navbar-fixed.page .subnavbar { + top: 56px; +} +.navbar-fixed .toolbar { + top: 56px; +} +.navbar-fixed .messagebar, +.navbar-fixed .toolbar-bottom { + top: auto; +} +.navbar.navbar-hiding { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.navbar.navbar-hiding ~ .page-content .list-group-title, +.navbar.navbar-hiding ~ .pages .list-group-title, +.navbar.navbar-hiding ~ .page .list-group-title { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.navbar.navbar-hiding ~ .page-content .subnavbar, +.navbar.navbar-hiding ~ .pages .subnavbar, +.navbar.navbar-hiding ~ .page .subnavbar { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.navbar.navbar-hiding ~ .subnavbar, +.navbar.navbar-hiding ~ .toolbar { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.navbar.navbar-hidden { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); +} +.navbar.navbar-hidden ~ .page-content .list-group-title, +.navbar.navbar-hidden ~ .pages .list-group-title, +.navbar.navbar-hidden ~ .page .list-group-title { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; + top: -56px; +} +.navbar.navbar-hidden ~ .page-content .subnavbar, +.navbar.navbar-hidden ~ .pages .subnavbar, +.navbar.navbar-hidden ~ .page .subnavbar { + -webkit-transform: translate3d(0, -56px, 0); + transform: translate3d(0, -56px, 0); + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.navbar.navbar-hidden ~ .subnavbar, +.navbar.navbar-hidden ~ .toolbar:not(.messagebar):not(.toolbar-bottom) { + -webkit-transform: translate3d(0, -56px, 0); + transform: translate3d(0, -56px, 0); + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.page.no-navbar .page-content { + padding-top: 0; +} +.page.no-navbar.with-subnavbar .page-content, +.with-subnavbar .page.no-navbar .page-content, +.page.no-navbar .page-content.with-subnavbar { + padding-top: 48px; +} +.toolbar.toolbar-hiding, +.tabbar.toolbar-hiding, +.toolbar.tabbar-hiding, +.tabbar.tabbar-hiding { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.toolbar.toolbar-hidden, +.tabbar.toolbar-hidden, +.toolbar.tabbar-hidden, +.tabbar.tabbar-hidden { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.toolbar.toolbar-hidden, +.tabbar.toolbar-hidden, +.toolbar.tabbar-hidden, +.tabbar.tabbar-hidden { + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); +} +.navbar ~ .toolbar.toolbar-hidden, +.navbar ~ .tabbar.toolbar-hidden, +.navbar ~ .toolbar.tabbar-hidden, +.navbar ~ .tabbar.tabbar-hidden { + -webkit-transform: translate3d(0, -104px, 0); + transform: translate3d(0, -104px, 0); +} +.navbar ~ .toolbar.tabbar-labels.toolbar-hidden, +.navbar ~ .tabbar.tabbar-labels.toolbar-hidden { + -webkit-transform: translate3d(0, -128px, 0); + transform: translate3d(0, -128px, 0); +} +.toolbar.toolbar-hidden.messagebar, +.tabbar.toolbar-hidden.messagebar, +.toolbar.toolbar-hidden.toolbar-bottom, +.tabbar.toolbar-hidden.toolbar-bottom { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +.page.no-toolbar .page-content, +.page.no-tabbar .page-content { + padding-bottom: 0; +} +/* === Search Bar === */ +.searchbar { + height: 48px; + width: 100%; + background: #5a7dc9; + box-sizing: border-box; + padding: 0 16px; + overflow: hidden; + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + color: #fff; +} +.searchbar a { + position: relative; + color: #fff; +} +.searchbar a:before { + content: ''; + width: 152%; + height: 152%; + position: absolute; + left: -26%; + top: -26%; + background-image: -webkit-radial-gradient(center, circle cover, rgba(255, 255, 255, 0.15) 66%, rgba(255, 255, 255, 0) 66%); + background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.15) 66%, rgba(255, 255, 255, 0) 66%); + background-repeat: no-repeat; + background-position: center; + background-size: 100% 100%; + opacity: 0; + pointer-events: none; + -webkit-transition-duration: 600ms; + transition-duration: 600ms; +} +html:not(.watch-active-state) .searchbar a:active:before, +.searchbar a.active-state:before { + opacity: 1; + -webkit-transition-duration: 150ms; + transition-duration: 150ms; +} +.searchbar .searchbar-input { + width: 100%; + height: 32px; + position: relative; + -webkit-box-flex: 1; + -webkit-flex-shrink: 1; + -ms-flex: 0 1 auto; + flex-shrink: 1; +} +.searchbar input[type="search"] { + box-sizing: border-box; + width: 100%; + height: 32px; + display: block; + border: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + border-radius: 0; + font-family: inherit; + color: #fff; + font-size: 16px; + font-weight: 400; + padding: 0; + border-bottom: 1px solid #fff; + height: 100%; + padding: 0 36px 0 24px; + background-color: transparent; + background-repeat: no-repeat; + background-position: 0 center; + opacity: 0.6; + -webkit-background-size: 24px 24px; + background-size: 24px 24px; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D'%23FFFFFF'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20width%3D'24'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M15.5%2014h-.79l-.28-.27C15.41%2012.59%2016%2011.11%2016%209.5%2016%205.91%2013.09%203%209.5%203S3%205.91%203%209.5%205.91%2016%209.5%2016c1.61%200%203.09-.59%204.23-1.57l.27.28v.79l5%204.99L20.49%2019l-4.99-5zm-6%200C7.01%2014%205%2011.99%205%209.5S7.01%205%209.5%205%2014%207.01%2014%209.5%2011.99%2014%209.5%2014z'%2F%3E%3Cpath%20d%3D'M0%200h24v24H0z'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E"); +} +.searchbar input[type="search"]::-webkit-input-placeholder { + color: #ffffff; + opacity: 1; +} +.searchbar input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; +} +.searchbar .searchbar-clear { + position: absolute; + width: 56px; + height: 100%; + right: -16px; + top: 0; + opacity: 0; + pointer-events: none; + background-position: center; + background-repeat: no-repeat; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D'%23fff'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20width%3D'24'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'%2F%3E%3Cpath%20d%3D'M0%200h24v24H0z'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E"); + -webkit-background-size: 24px 24px; + background-size: 24px 24px; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + cursor: pointer; +} +.searchbar .searchbar-cancel { + display: none; +} +.searchbar.searchbar-active input[type="search"] { + opacity: 1; +} +.searchbar.searchbar-active .searchbar-clear { + pointer-events: auto; + opacity: 1; +} +.searchbar.searchbar-not-empty .searchbar-clear { + pointer-events: auto; + opacity: 1; +} +.searchbar-overlay { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 100; + opacity: 0; + pointer-events: none; + background: rgba(0, 0, 0, 0.25); + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.searchbar-overlay.searchbar-overlay-active { + opacity: 1; + pointer-events: auto; +} +.searchbar-not-found { + display: none; +} +.hidden-by-searchbar, +.list-block .hidden-by-searchbar, +.list-block li.hidden-by-searchbar { + display: none; +} +.page > .searchbar { + position: absolute; + width: 100%; + left: 0; + top: 0; + z-index: 200; +} +.page > .searchbar ~ .page-content { + padding-top: 48px; +} +.navbar-fixed .page > .searchbar, +.navbar-through .page > .searchbar, +.navbar-fixed > .searchbar, +.navbar-through > .searchbar { + top: 56px; +} +.navbar-fixed .page > .searchbar ~ .page-content, +.navbar-through .page > .searchbar ~ .page-content, +.navbar-fixed > .searchbar ~ .page-content, +.navbar-through > .searchbar ~ .page-content { + padding-top: 104px; +} +/* === Message Bar === */ +.toolbar.messagebar { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + background: #fff; + height: 48px; + top: auto; + bottom: 0; + font-size: 16px; + overflow: hidden; +} +.toolbar.messagebar:before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: auto; + right: auto; + height: 1px; + width: 100%; + background-color: #d1d1d1; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +html.pixel-ratio-2 .toolbar.messagebar:before { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .toolbar.messagebar:before { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.toolbar.messagebar textarea { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + border: none; + background: none; + border-radius: 0; + box-shadow: none; + display: block; + padding: 3px 8px 3px; + margin: 0; + width: 100%; + height: 28px; + color: #333; + font-size: 16px; + line-height: 22px; + font-family: inherit; + resize: none; + -webkit-box-flex: 1; + -webkit-flex-shrink: 1; + -ms-flex: 0 1 auto; + flex-shrink: 1; +} +.toolbar.messagebar a.link { + color: #333; + -ms-flex-item-align: flex-end; + -webkit-align-self: flex-end; + align-self: flex-end; + height: 48px; + line-height: 48px; +} +.toolbar.messagebar a.link:before { + background-image: -webkit-radial-gradient(center, circle cover, rgba(0, 0, 0, 0.1) 66%, rgba(0, 0, 0, 0) 66%); + background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 66%, rgba(0, 0, 0, 0) 66%); +} +.toolbar.messagebar .link { + -webkit-box-flex: 0; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + flex-shrink: 0; +} +.toolbar.messagebar ~ .page-content { + padding-bottom: 48px; +} +.page.no-toolbar .toolbar.messagebar ~ .page-content { + padding-bottom: 48px; +} +.hidden-toolbar .toolbar.messagebar { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-transition-duration: 0ms; + transition-duration: 0ms; +} +/* === Icons === */ +i.icon { + display: inline-block; + vertical-align: middle; + background-size: 100% auto; + background-position: center; + background-repeat: no-repeat; + font-style: normal; + position: relative; + /* Material Icons http://google.github.io/material-design-icons/ */ +} +i.icon.icon-back { + width: 24px; + height: 24px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M20%2011H7.83l5.59-5.59L12%204l-8%208%208%208%201.41-1.41L7.83%2013H20v-2z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); +} +i.icon.icon-forward { + width: 24px; + height: 24px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M12%204l-1.41%201.41L16.17%2011H4v2h12.17l-5.58%205.59L12%2020l8-8z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); +} +i.icon.icon-bars { + width: 24px; + height: 24px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M3%2018h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); +} +i.icon.icon-camera { + width: 24px; + height: 24px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D'%23333'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20width%3D'24'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'3.2'%2F%3E%3Cpath%20d%3D'M9%202L7.17%204H4c-1.1%200-2%20.9-2%202v12c0%201.1.9%202%202%202h16c1.1%200%202-.9%202-2V6c0-1.1-.9-2-2-2h-3.17L15%202H9zm3%2015c-2.76%200-5-2.24-5-5s2.24-5%205-5%205%202.24%205%205-2.24%205-5%205z'%2F%3E%3Cpath%20d%3D'M0%200h24v24H0z'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E"); +} +i.icon.icon-f7 { + width: 24px; + height: 24px; + background-image: url("../img/i-f7-material.png"); + border-radius: 3px; +} +i.icon.icon-next, +i.icon.icon-prev { + width: 24px; + height: 24px; +} +i.icon.icon-next { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20fill%3D'%23ffffff'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M10%206L8.59%207.41%2013.17%2012l-4.58%204.59L10%2018l6-6z'%2F%3E%3Cpath%20d%3D'M0%200h24v24H0z'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E"); +} +i.icon.icon-prev { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20fill%3D'%23ffffff'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M15.41%207.41L14%206l-6%206%206%206%201.41-1.41L10.83%2012z'%2F%3E%3Cpath%20d%3D'M0%200h24v24H0z'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E"); +} +i.icon.icon-plus { + width: 24px; + height: 24px; + font-size: 0; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D'%23FFFFFF'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20width%3D'24'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M19%2013h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'%2F%3E%3Cpath%20d%3D'M0%200h24v24H0z'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E"); +} +i.icon.icon-close { + width: 24px; + height: 24px; + font-size: 0; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D'%23FFFFFF'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20width%3D'24'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'%2F%3E%3Cpath%20d%3D'M0%200h24v24H0z'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E"); +} +.badge { + font-size: 10px; + display: inline-block; + color: #fff; + background: #8e8e93; + border-radius: 3px; + padding: 1px 6px; + box-sizing: border-box; + vertical-align: middle; +} +.icon .badge { + position: absolute; + left: 100%; + margin-left: -10px; + top: -2px; + font-size: 10px; + line-height: 1.4; + padding: 1px 5px; +} +/* === Content Block === */ +.content-block { + margin: 32px 0; + padding: 0 16px; + box-sizing: border-box; +} +.content-block.no-hairlines:before, +.content-block.no-hairlines ul:before, +.content-block.no-hairlines .content-block-inner:before { + display: none; +} +.content-block.no-hairlines:after, +.content-block.no-hairlines ul:after, +.content-block.no-hairlines .content-block-inner:after { + display: none; +} +.content-block-title { + position: relative; + overflow: hidden; + margin: 0; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 14px; + line-height: 1; + margin: 16px 16px 16px; + padding-top: 16px; + line-height: 16px; + font-weight: 500; + color: rgba(0, 0, 0, 0.54); +} +.content-block-title + .list-block, +.content-block-title + .content-block, +.content-block-title + .card { + margin-top: 0px; +} +.content-block-inner { + padding: 16px 16px; + margin-left: -16px; + width: 100%; + position: relative; +} +.content-block-inner:before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: auto; + right: auto; + height: 1px; + width: 100%; + background-color: rgba(0, 0, 0, 0.12); + display: block; + z-index: 15; + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +html.pixel-ratio-2 .content-block-inner:before { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .content-block-inner:before { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.content-block-inner:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: rgba(0, 0, 0, 0.12); + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .content-block-inner:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .content-block-inner:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.content-block-inner > p:first-child { + margin-top: 0; +} +.content-block-inner > p:last-child { + margin-bottom: 0; +} +.content-block.inset { + margin-left: 16px; + margin-right: 16px; + border-radius: 7px; +} +.content-block.inset .content-block-inner { + border-radius: 4px; +} +.content-block.inset .content-block-inner:before { + display: none; +} +.content-block.inset .content-block-inner:after { + display: none; +} +@media all and (min-width: 768px) { + .content-block.tablet-inset { + margin-left: 16px; + margin-right: 16px; + border-radius: 4px; + } + .content-block.tablet-inset .content-block-inner { + border-radius: 4px; + } + .content-block.tablet-inset .content-block-inner:before { + display: none; + } + .content-block.tablet-inset .content-block-inner:after { + display: none; + } +} +/* === Lists === */ +.list-block { + margin: 32px 0; + font-size: 16px; +} +.list-block ul { + list-style: none; + padding: 0; + margin: 0; + position: relative; +} +.list-block ul:before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: auto; + right: auto; + height: 1px; + width: 100%; + background-color: rgba(0, 0, 0, 0.12); + display: block; + z-index: 15; + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +html.pixel-ratio-2 .list-block ul:before { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .list-block ul:before { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.list-block ul:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: rgba(0, 0, 0, 0.12); + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .list-block ul:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .list-block ul:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.list-block ul ul { + padding-left: 56px; +} +.list-block ul ul:before { + display: none; +} +.list-block ul ul:after { + display: none; +} +.list-block .align-top, +.list-block .align-top .item-content, +.list-block .align-top .item-inner { + -webkit-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; +} +.list-block.inset { + margin-left: 16px; + margin-right: 16px; + border-radius: 4px; +} +.list-block.inset .content-block-title { + margin-left: 0; + margin-right: 0; +} +.list-block.inset ul { + border-radius: 4px; +} +.list-block.inset ul:before { + display: none; +} +.list-block.inset ul:after { + display: none; +} +.list-block.inset li:first-child > a { + border-radius: 4px 4px 0 0; +} +.list-block.inset li:last-child > a { + border-radius: 0 0 4px 4px; +} +.list-block.inset li:first-child:last-child > a { + border-radius: 4px; +} +@media all and (min-width: 768px) { + .list-block.tablet-inset { + margin-left: 16px; + margin-right: 16px; + border-radius: 4px; + } + .list-block.tablet-inset .content-block-title { + margin-left: 0; + margin-right: 0; + } + .list-block.tablet-inset ul { + border-radius: 4px; + } + .list-block.tablet-inset ul:before { + display: none; + } + .list-block.tablet-inset ul:after { + display: none; + } + .list-block.tablet-inset li:first-child > a { + border-radius: 4px 4px 0 0; + } + .list-block.tablet-inset li:last-child > a { + border-radius: 0 0 4px 4px; + } + .list-block.tablet-inset li:first-child:last-child > a { + border-radius: 4px; + } + .list-block.tablet-inset .content-block-title { + margin-left: 0; + margin-right: 0; + } + .list-block.tablet-inset ul { + border-radius: 4px; + } + .list-block.tablet-inset ul:before { + display: none; + } + .list-block.tablet-inset ul:after { + display: none; + } + .list-block.tablet-inset li:first-child > a { + border-radius: 4px 4px 0 0; + } + .list-block.tablet-inset li:last-child > a { + border-radius: 0 0 4px 4px; + } + .list-block.tablet-inset li:first-child:last-child > a { + border-radius: 4px; + } +} +.list-block li { + box-sizing: border-box; + position: relative; +} +.list-block .item-media { + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-flex: 0; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + flex-shrink: 0; + -webkit-box-lines: single; + -moz-box-lines: single; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: none; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + box-sizing: border-box; + padding-top: 8px; + padding-bottom: 8px; + min-width: 40px; +} +.list-block .item-media i + i { + margin-left: 8px; +} +.list-block .item-media i + img { + margin-left: 8px; +} +.list-block .item-media + .item-inner { + margin-left: 16px; +} +.list-block .item-inner { + padding-right: 16px; + position: relative; + width: 100%; + padding-top: 8px; + padding-bottom: 8px; + min-height: 48px; + box-sizing: border-box; + -webkit-box-flex: 1; + -ms-flex: 1; + min-width: 0; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-item-align: stretch; + -webkit-align-self: stretch; + align-self: stretch; +} +.list-block .item-inner:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: rgba(0, 0, 0, 0.12); + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .list-block .item-inner:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .list-block .item-inner:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.list-block .item-title { + min-width: 0; + -webkit-box-flex: 1; + -webkit-flex-shrink: 1; + -ms-flex: 0 1 auto; + flex-shrink: 1; + white-space: nowrap; + position: relative; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; +} +.list-block .item-after { + white-space: nowrap; + color: #757575; + -webkit-box-flex: 0; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + flex-shrink: 0; + margin-left: 8px; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + max-height: 28px; + font-size: 14px; +} +.list-block .smart-select .item-after, +.list-block .autocomplete-opener .item-after { + max-width: 70%; + overflow: hidden; + text-overflow: ellipsis; + position: relative; + display: block; +} +.list-block .item-link { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + display: block; + color: inherit; + position: relative; + overflow: hidden; + z-index: 0; +} +.list-block .item-link .item-inner { + padding-right: 42px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%2060%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'm60%2061.5-38.25%2038.25-9.75-9.75%2029.25-28.5-29.25-28.5%209.75-9.75z'%20fill%3D'%23c7c7cc'%2F%3E%3C%2Fsvg%3E"); + background-size: 10px 20px; + background-repeat: no-repeat; + background-position: 95% center; + background-position: -webkit-calc(100% - 16px) center; + background-position: calc(100% - 16px) center; +} +html:not(.watch-active-state) .list-block .item-link:active, +.list-block .item-link.active-state { + background-color: rgba(0, 0, 0, 0.1); +} +.list-block .item-link.list-button { + padding: 0 16px; + font-size: 16px; + display: block; + line-height: 48px; +} +.list-block .item-content { + box-sizing: border-box; + padding-left: 16px; + min-height: 48px; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +.list-block .list-block-label { + margin: 10px 0 35px; + padding: 0 16px; + font-size: 14px; + color: rgba(0, 0, 0, 0.54); +} +.list-block .swipeout { + overflow: hidden; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; +} +.list-block .swipeout.deleting { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.list-block .swipeout.deleting .swipeout-content { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); +} +.list-block .swipeout.transitioning .swipeout-content, +.list-block .swipeout.transitioning .swipeout-actions-right a, +.list-block .swipeout.transitioning .swipeout-actions-left a, +.list-block .swipeout.transitioning .swipeout-overswipe { + -webkit-transition: 300ms; + transition: 300ms; +} +.list-block .swipeout-content { + position: relative; + z-index: 10; +} +.list-block .swipeout-overswipe { + -webkit-transition: 200ms left; + transition: 200ms left; +} +.list-block .swipeout-actions-left, +.list-block .swipeout-actions-right { + position: absolute; + top: 0; + height: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; +} +.list-block .swipeout-actions-left a, +.list-block .swipeout-actions-right a { + padding: 0 24px; + color: #fff; + background: #c7c7cc; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + position: relative; + left: 0; +} +.list-block .swipeout-actions-left a:after, +.list-block .swipeout-actions-right a:after { + content: ''; + position: absolute; + top: 0; + width: 600%; + height: 100%; + background: inherit; + z-index: -1; +} +.list-block .swipeout-actions-left a.swipeout-delete, +.list-block .swipeout-actions-right a.swipeout-delete { + background: #f44336; +} +.list-block .swipeout-actions-right { + right: 0%; + -webkit-transform: translateX(100%); + transform: translateX(100%); +} +.list-block .swipeout-actions-right a:after { + left: 100%; + margin-left: -1px; +} +.list-block .swipeout-actions-left { + left: 0%; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); +} +.list-block .swipeout-actions-left a:after { + right: 100%; + margin-right: -1px; +} +.list-block .item-subtitle { + font-size: 14px; + position: relative; + overflow: hidden; + white-space: nowrap; + max-width: 100%; + text-overflow: ellipsis; +} +.list-block .item-text { + font-size: 14px; + color: #757575; + line-height: 20px; + position: relative; + overflow: hidden; + max-height: 40px; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + display: -webkit-box; +} +.list-block.media-list .item-inner, +.list-block li.media-item .item-inner { + display: block; + padding-top: 14px; + padding-bottom: 14px; + -ms-flex-item-align: stretch; + -webkit-align-self: stretch; + align-self: stretch; +} +.list-block.media-list .item-link .item-inner, +.list-block li.media-item .item-link .item-inner { + background: none; + padding-right: 16px; +} +.list-block.media-list .item-link .item-title-row, +.list-block li.media-item .item-link .item-title-row { + padding-right: 26px; + background: no-repeat right top; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%2060%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'm60%2061.5-38.25%2038.25-9.75-9.75%2029.25-28.5-29.25-28.5%209.75-9.75z'%20fill%3D'%23c7c7cc'%2F%3E%3C%2Fsvg%3E"); + background-size: 10px 20px; +} +.list-block.media-list .item-media, +.list-block li.media-item .item-media { + padding-top: 14px; + padding-bottom: 14px; + -ms-flex-item-align: flex-start; + -webkit-align-self: flex-start; + align-self: flex-start; +} +.list-block.media-list .item-media img, +.list-block li.media-item .item-media img { + display: block; +} +.list-block.media-list .item-title-row, +.list-block li.media-item .item-title-row { + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; +} +.list-block.media-list .item-content > .item-after, +.list-block li.media-item .item-content > .item-after { + padding-top: 14px; + padding-bottom: 14px; + -ms-flex-item-align: flex-start; + -webkit-align-self: flex-start; + align-self: flex-start; +} +.list-block .list-group ul:after, +.list-block .list-group ul:before { + z-index: 11; +} +.list-block .list-group + .list-group ul:before { + display: none; +} +.list-block .item-divider, +.list-block .list-group-title { + background: #f4f4f4; + padding: 0px 16px; + white-space: nowrap; + position: relative; + max-width: 100%; + text-overflow: ellipsis; + overflow: hidden; + color: rgba(0, 0, 0, 0.54); + height: 48px; + box-sizing: border-box; + line-height: 48px; + font-size: 14px; +} +.list-block .item-divider:before, +.list-block .list-group-title:before { + display: none; +} +.list-block .list-group-title { + position: relative; + position: -webkit-sticky; + position: -moz-sticky; + position: sticky; + top: 0px; + z-index: 10; + margin-top: 0; +} +.list-block .sortable-handler { + position: absolute; + right: 0; + top: 0; + bottom: 1px; + z-index: 10; + background-repeat: no-repeat; + background-size: 18px 12px; + background-position: center; + width: 50px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2018%2012'%20fill%3D'%23c7c7cc'%3E%3Cpath%20d%3D'M0%2C2V0h22v2H0z'%2F%3E%3Cpath%20d%3D'M0%2C7V5h22v2H0z'%2F%3E%3Cpath%20d%3D'M0%2C12v-2h22v2H0z'%2F%3E%3C%2Fsvg%3E"); + opacity: 0; + visibility: hidden; + cursor: pointer; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.list-block.sortable .item-inner { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.list-block.sortable-opened .sortable-handler { + visibility: visible; + opacity: 1; +} +.list-block.sortable-opened .item-inner, +.list-block.sortable-opened .item-link .item-inner { + padding-right: 50px; +} +.list-block.sortable-opened .item-link .item-inner, +.list-block.sortable-opened .item-link .item-title-row { + background-image: none; +} +.list-block.sortable-sorting li { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.list-block li.sorting { + z-index: 50; + background: rgba(255, 255, 255, 0.8); + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + -webkit-transition-duration: 0ms; + transition-duration: 0ms; +} +.list-block li.sorting .item-inner:after { + display: none; +} +.list-block li:last-child .list-button:after { + display: none; +} +.list-block li:last-child .item-inner:after, +.list-block li:last-child li:last-child .item-inner:after { + display: none; +} +.list-block li li:last-child .item-inner:after, +.list-block li:last-child li .item-inner:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: rgba(0, 0, 0, 0.12); + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .list-block li li:last-child .item-inner:after, +html.pixel-ratio-2 .list-block li:last-child li .item-inner:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .list-block li li:last-child .item-inner:after, +html.pixel-ratio-3 .list-block li:last-child li .item-inner:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.list-block.no-hairlines:before, +.list-block.no-hairlines ul:before, +.list-block.no-hairlines .content-block-inner:before { + display: none; +} +.list-block.no-hairlines:after, +.list-block.no-hairlines ul:after, +.list-block.no-hairlines .content-block-inner:after { + display: none; +} +.list-block.no-hairlines-between .item-inner:after, +.list-block.no-hairlines-between .list-button:after, +.list-block.no-hairlines-between .item-divider:after, +.list-block.no-hairlines-between .list-group-title:after, +.list-block.no-hairlines-between .list-group-title:after { + display: none; +} +/* === Forms === */ +.list-block input[type="text"], +.list-block input[type="password"], +.list-block input[type="search"], +.list-block input[type="email"], +.list-block input[type="tel"], +.list-block input[type="url"], +.list-block input[type="date"], +.list-block input[type="datetime-local"], +.list-block input[type="time"], +.list-block input[type="number"], +.list-block select, +.list-block textarea { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + box-sizing: border-box; + border: none; + background: none; + border-radius: 0 0 0 0; + box-shadow: none; + display: block; + padding: 0; + margin: 0; + width: 100%; + height: 36px; + color: #212121; + font-size: 16px; + font-family: inherit; +} +.list-block input[type="text"]::-webkit-input-placeholder, +.list-block input[type="password"]::-webkit-input-placeholder, +.list-block input[type="search"]::-webkit-input-placeholder, +.list-block input[type="email"]::-webkit-input-placeholder, +.list-block input[type="tel"]::-webkit-input-placeholder, +.list-block input[type="url"]::-webkit-input-placeholder, +.list-block input[type="date"]::-webkit-input-placeholder, +.list-block input[type="datetime-local"]::-webkit-input-placeholder, +.list-block input[type="time"]::-webkit-input-placeholder, +.list-block input[type="number"]::-webkit-input-placeholder, +.list-block select::-webkit-input-placeholder, +.list-block textarea::-webkit-input-placeholder { + color: rgba(0, 0, 0, 0.35); +} +.list-block .label, +.list-block .floating-label { + vertical-align: top; + color: rgba(0, 0, 0, 0.65); + -webkit-transition-duration: 200ms; + transition-duration: 200ms; + width: 35%; + -webkit-box-flex: 0; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + flex-shrink: 0; +} +.list-block input[type="date"], +.list-block input[type="datetime-local"] { + line-height: 44px; +} +.list-block select { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; +} +.list-block textarea { + resize: none; + line-height: 1.4; + padding-top: 8px; + padding-bottom: 7px; + height: 100px; +} +.list-block textarea.resizable { + height: 36px; +} +.list-block .item-input { + width: 100%; + -ms-flex: 1; + -webkit-box-flex: 1; + -webkit-flex-shrink: 1; + -ms-flex: 0 1 auto; + flex-shrink: 1; + font-size: 0; + position: relative; + margin-bottom: 4px; + min-height: 36px; +} +.list-block .input-item ul:after, +.list-block.inputs-list ul:after { + display: none; +} +.list-block .input-item .item-media, +.list-block.inputs-list .item-media { + -ms-flex-item-align: flex-end; + -webkit-align-self: flex-end; + align-self: flex-end; + min-height: 36px; + margin-bottom: 8px; + padding: 0; +} +.list-block .input-item .item-inner, +.list-block.inputs-list .item-inner { + display: block; + margin-bottom: 4px; + padding-bottom: 0; +} +.list-block .input-item .item-inner:after, +.list-block.inputs-list .item-inner:after { + display: none; +} +.list-block .input-item .label, +.list-block.inputs-list .label, +.list-block .input-item .floating-label, +.list-block.inputs-list .floating-label { + width: 100%; + font-size: 12px; +} +.list-block .input-item .floating-label, +.list-block.inputs-list .floating-label { + -webkit-transform-origin: left; + transform-origin: left; + -webkit-transform: scale(1.33333333) translateY(21px); + transform: scale(1.33333333) translateY(21px); + color: rgba(0, 0, 0, 0.35); + width: auto; + max-width: 75%; +} +.list-block .input-item .floating-label ~ .item-input input::-webkit-input-placeholder, +.list-block.inputs-list .floating-label ~ .item-input input::-webkit-input-placeholder { + color: transparent; +} +.list-block .focus-state .floating-label, +.list-block .not-empty-state .floating-label { + color: rgba(0, 0, 0, 0.65); + -webkit-transform: scale(1) translateY(0); + transform: scale(1) translateY(0); +} +.list-block .focus-state .label, +.list-block .focus-state .floating-label { + color: #5a7dc9; +} +.item-input-field, +.input-field { + position: relative; +} +.item-input-field:after, +.input-field:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: rgba(0, 0, 0, 0.12); + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .item-input-field:after, +html.pixel-ratio-2 .input-field:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .item-input-field:after, +html.pixel-ratio-3 .input-field:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.item-input-field:after, +.input-field:after { + -webkit-transition-duration: 200ms; + transition-duration: 200ms; +} +.item-input-field.focus-state:after, +.input-field.focus-state:after, +.item-input-field.not-empty-state:after, +.input-field.not-empty-state:after, +.focus-state .item-input-field:after, +.focus-state .input-field:after, +.not-empty-state .item-input-field:after, +.not-empty-state .input-field:after { + background: #5a7dc9; + -webkit-transform: scaleY(2) !important; + transform: scaleY(2) !important; +} +textarea.resizable { + overflow: hidden; +} +.label-switch { + display: inline-block; + vertical-align: middle; + width: 36px; + height: 14px; + position: relative; + cursor: pointer; + -ms-flex-item-align: center; + -webkit-align-self: center; + align-self: center; +} +.label-switch .checkbox { + width: 36px; + border-radius: 36px; + box-sizing: border-box; + height: 14px; + background: #b0afaf; + z-index: 0; + margin: 0; + padding: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + border: none; + cursor: pointer; + position: relative; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.label-switch .checkbox:after { + content: ' '; + height: 20px; + width: 20px; + border-radius: 20px; + background: #fff; + position: absolute; + z-index: 2; + top: -3px; + left: 0px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); + -webkit-transform: translateX(0px); + transform: translateX(0px); + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.label-switch input[type="checkbox"] { + display: none; +} +.label-switch input[type="checkbox"]:checked + .checkbox { + background: rgba(90, 125, 201, 0.5); +} +.label-switch input[type="checkbox"]:checked + .checkbox:after { + -webkit-transform: translateX(16px); + transform: translateX(16px); + background: #5a7dc9; +} +.item-input .label-switch { + top: 11px; +} +.button { + color: #5a7dc9; + text-decoration: none; + text-align: center; + display: block; + border-radius: 2px; + line-height: 36px; + box-sizing: border-box; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background: none; + padding: 0 10px; + margin: 0; + height: 36px; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 14px; + text-transform: uppercase; + font-family: inherit; + cursor: pointer; + min-width: 64px; + padding: 0 8px; + position: relative; + overflow: hidden; + outline: 0; + border: none; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +input[type="submit"].button, +input[type="button"].button { + width: 100%; +} +html:not(.watch-active-state) .button:active, +.button.active-state { + background: rgba(0, 0, 0, 0.1); +} +.button.button-fill { + background-color: #5a7dc9; + color: #fff; +} +html:not(.watch-active-state) .button.button-fill:active, +.button.button-fill.active-state { + background: #3e66bd; +} +.button.button-big { + height: 48px; + line-height: 48px; + border-radius: 3px; +} +.button i.icon + span, +.button span:not(.ripple-wave) + span, +.button span:not(.ripple-wave) + i.icon, +.button i.icon + i.icon { + margin-left: 8px; +} +.navbar .button:not(.button-fill), +.toolbar .button:not(.button-fill), +.subnavbar .button:not(.button-fill), +.notifications .button:not(.button-fill) { + color: #fff; +} +html:not(.watch-active-state) .navbar .button:not(.button-fill):active, +html:not(.watch-active-state) .toolbar .button:not(.button-fill):active, +html:not(.watch-active-state) .subnavbar .button:not(.button-fill):active, +html:not(.watch-active-state) .notifications .button:not(.button-fill):active, +.navbar .button:not(.button-fill).active-state, +.toolbar .button:not(.button-fill).active-state, +.subnavbar .button:not(.button-fill).active-state, +.notifications .button:not(.button-fill).active-state { + background: rgba(255, 255, 255, 0.15); +} +.button-raised { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); +} +html:not(.watch-active-state) .button-raised:active, +.button-raised.active-state { + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); +} +.buttons-row { + -ms-flex-item-align: center; + -webkit-align-self: center; + align-self: center; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-lines: single; + -moz-box-lines: single; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: none; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; +} +.buttons-row .button { + margin-left: 16px; + width: 100%; + -webkit-box-flex: 1; + -ms-flex: 1; +} +.buttons-row .button:first-child { + margin-left: 0; +} +.range-slider { + width: 100%; + position: relative; + overflow: hidden; + -ms-flex-item-align: center; + -webkit-align-self: center; + align-self: center; +} +.range-slider input[type="range"] { + position: relative; + height: 20px; + width: 100%; + margin: 0; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #b9b9b9), color-stop(100%, #b9b9b9)); + background: linear-gradient(to right, #b9b9b9 0, #b9b9b9 100%); + background-position: center; + background-size: 100% 2px; + background-repeat: no-repeat; + outline: 0; + -ms-background-position-y: 500px; +} +.range-slider input[type="range"]:focus, +.range-slider input[type="range"]:active { + border: 0; + outline: 0 none; +} +.range-slider input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + border: none; + outline: 0; + height: 20px; + width: 20px; + position: relative; + background: #5a7dc9; + border-radius: 20px; +} +.range-slider input[type="range"]::-webkit-slider-thumb:before { + position: absolute; + top: 50%; + right: 100%; + width: 2000px; + height: 2px; + margin-top: -1px; + z-index: 1; + background: #5a7dc9; + content: ' '; +} +.range-slider input[type="range"]::-moz-range-track { + width: 100%; + height: 2px; + background: #b7b8b7; + border: none; + outline: 0; +} +.range-slider input[type="range"]::-moz-range-thumb { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + border: none; + outline: 0; + height: 20px; + width: 20px; + position: relative; + background: #5a7dc9; + border-radius: 20px; +} +.range-slider input[type="range"]::-ms-track { + width: 100%; + height: 2px; + cursor: pointer; + background: transparent; + border-color: transparent; + color: transparent; +} +.range-slider input[type="range"]::-ms-thumb { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + border: none; + outline: 0; + height: 20px; + width: 20px; + position: relative; + background: #5a7dc9; + border-radius: 20px; +} +.range-slider input[type="range"]::-ms-fill-lower { + background: #5a7dc9; +} +.range-slider input[type="range"]::-ms-fill-upper { + background: #b7b8b7; +} +.item-input .range-slider { + top: 8px; +} +label.label-checkbox { + cursor: pointer; +} +label.label-checkbox i.icon-form-checkbox { + width: 18px; + height: 18px; + position: relative; + border-radius: 2px; + border: 2px solid #6d6d6d; + box-sizing: border-box; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + background: transparent; +} +label.label-checkbox i.icon-form-checkbox:after { + content: ' '; + position: absolute; + width: 18px; + height: 18px; + left: -2px; + top: -2px; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + opacity: 0; + background: no-repeat center; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20fill%3D'%23ffffff'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M9%2016.17L4.83%2012l-1.42%201.41L9%2019%2021%207l-1.41-1.41z'%2F%3E%3C%2Fsvg%3E"); + -webkit-background-size: 100% auto; + background-size: 100% auto; +} +label.label-checkbox input[type="checkbox"], +label.label-checkbox input[type="radio"] { + display: none; +} +label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox, +label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox, +label.label-checkbox input[type="checkbox"]:checked ~ .item-after i.icon-form-checkbox, +label.label-checkbox input[type="radio"]:checked ~ .item-after i.icon-form-checkbox, +label.label-checkbox input[type="checkbox"]:checked ~ .item-inner i.icon-form-checkbox, +label.label-checkbox input[type="radio"]:checked ~ .item-inner i.icon-form-checkbox { + border-color: #5a7dc9; + background-color: #5a7dc9; +} +label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox:after, +label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox:after, +label.label-checkbox input[type="checkbox"]:checked ~ .item-after i.icon-form-checkbox:after, +label.label-checkbox input[type="radio"]:checked ~ .item-after i.icon-form-checkbox:after, +label.label-checkbox input[type="checkbox"]:checked ~ .item-inner i.icon-form-checkbox:after, +label.label-checkbox input[type="radio"]:checked ~ .item-inner i.icon-form-checkbox:after { + opacity: 1; +} +label.label-radio { + cursor: pointer; +} +label.label-radio i.icon-form-radio { + width: 20px; + height: 20px; + position: relative; + border-radius: 20px; + border: 2px solid #6d6d6d; + box-sizing: border-box; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +label.label-radio i.icon-form-radio:after { + content: ' '; + position: absolute; + width: 10px; + height: 10px; + left: 50%; + top: 50%; + margin-left: -5px; + margin-top: -5px; + background-color: #5a7dc9; + border-radius: 100%; + -webkit-transform: scale(0); + transform: scale(0); + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +label.label-radio input[type="checkbox"], +label.label-radio input[type="radio"] { + display: none; +} +label.label-radio input[type="checkbox"]:checked + .item-media i.icon-form-radio, +label.label-radio input[type="radio"]:checked + .item-media i.icon-form-radio, +label.label-radio input[type="checkbox"]:checked ~ .item-after i.icon-form-radio, +label.label-radio input[type="radio"]:checked ~ .item-after i.icon-form-radio, +label.label-radio input[type="checkbox"]:checked ~ .item-inner i.icon-form-radio, +label.label-radio input[type="radio"]:checked ~ .item-inner i.icon-form-radio { + border-color: #5a7dc9; +} +label.label-radio input[type="checkbox"]:checked + .item-media i.icon-form-radio:after, +label.label-radio input[type="radio"]:checked + .item-media i.icon-form-radio:after, +label.label-radio input[type="checkbox"]:checked ~ .item-after i.icon-form-radio:after, +label.label-radio input[type="radio"]:checked ~ .item-after i.icon-form-radio:after, +label.label-radio input[type="checkbox"]:checked ~ .item-inner i.icon-form-radio:after, +label.label-radio input[type="radio"]:checked ~ .item-inner i.icon-form-radio:after { + background-color: #5a7dc9; + -webkit-transform: scale(1); + transform: scale(1); +} +label.label-checkbox, +label.label-radio { + position: relative; + overflow: hidden; + z-index: 0; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +label.label-checkbox .item-after i.icon-form-checkbox, +label.label-radio .item-after i.icon-form-checkbox, +label.label-checkbox .item-after i.icon-form-radio, +label.label-radio .item-after i.icon-form-radio { + margin-left: 8px; + margin-right: 16px; +} +.media-list label.label-checkbox .item-media i.icon-form-checkbox, +.media-list label.label-radio .item-media i.icon-form-checkbox, +.media-item label.label-checkbox .item-media i.icon-form-checkbox, +.media-item label.label-radio .item-media i.icon-form-checkbox, +.media-list label.label-checkbox .item-media i.icon-form-radio, +.media-list label.label-radio .item-media i.icon-form-radio, +.media-item label.label-checkbox .item-media i.icon-form-radio, +.media-item label.label-radio .item-media i.icon-form-radio { + margin-top: 4px; +} +html:not(.watch-active-state) label.label-checkbox:active, +html:not(.watch-active-state) label.label-radio:active, +label.label-checkbox.active-state, +label.label-radio.active-state { + background-color: rgba(0, 0, 0, 0.1); +} +html:not(.watch-active-state) label.label-checkbox:active .item-inner:after, +html:not(.watch-active-state) label.label-radio:active .item-inner:after, +label.label-checkbox.active-state .item-inner:after, +label.label-radio.active-state .item-inner:after { + background-color: transparent; +} +.smart-select select { + display: none; +} +/* === Floating Action Button === */ +.floating-button { + position: absolute; + right: 16px; + bottom: 16px; + width: 56px; + height: 56px; + border-radius: 50%; + z-index: 1500; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); + background-color: #5a7dc9; + color: #fff; + overflow: hidden; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} +html:not(.watch-active-state) .floating-button:active, +.floating-button.active-state { + background: #3e66bd; +} +.floating-button-toolbar, +.speed-dial { + position: absolute; + right: 16px; + bottom: 16px; + z-index: 1500; +} +.floating-button-toolbar .floating-button, +.speed-dial .floating-button { + right: 0; + bottom: 0; + position: relative; +} +.speed-dial .floating-button i { + position: absolute; + left: 50%; + top: 50%; + -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1); + transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1); + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.speed-dial .floating-button i + i { + -webkit-transform: translate3d(-50%, -50%, 0) rotate(-90deg) scale(0.5); + transform: translate3d(-50%, -50%, 0) rotate(-90deg) scale(0.5); + opacity: 0; +} +.speed-dial.speed-dial-opened .floating-button i { + -webkit-transform: translate3d(-50%, -50%, 0) rotate(90deg) scale(0.5); + transform: translate3d(-50%, -50%, 0) rotate(90deg) scale(0.5); + opacity: 0; +} +.speed-dial.speed-dial-opened .floating-button i + i { + -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1); + transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1); + opacity: 1; +} +.speed-dial-buttons { + position: absolute; + width: 40px; + left: 50%; + margin-left: -20px; + bottom: 100%; + margin-bottom: 16px; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -moz-box-orient: vertical; + -moz-box-direction: reverse; + -ms-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + flex-direction: column-reverse; + visibility: hidden; + pointer-events: none; +} +.speed-dial-buttons a { + width: 40px; + height: 40px; + opacity: 0; + color: #fff; + border-radius: 50%; + position: relative; + z-index: 1; + overflow: hidden; + background-color: #5a7dc9; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-transform: translate3d(0, 8px, 0) scale(0.3); + transform: translate3d(0, 8px, 0) scale(0.3); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; +} +html:not(.watch-active-state) .speed-dial-buttons a:active, +.speed-dial-buttons a.active-state { + background: #3e66bd; +} +.speed-dial-buttons a + a { + margin-bottom: 16px; +} +.speed-dial-opened .speed-dial-buttons { + visibility: visible; + pointer-events: auto; +} +.speed-dial-opened .speed-dial-buttons a { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0) scaleY(1); + transform: translate3d(0, 0, 0) scaleY(1); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); +} +.speed-dial-opened .speed-dial-buttons a:nth-child(2) { + -webkit-transition-delay: 50ms; + transition-delay: 50ms; +} +.speed-dial-opened .speed-dial-buttons a:nth-child(3) { + -webkit-transition-delay: 100ms; + transition-delay: 100ms; +} +.speed-dial-opened .speed-dial-buttons a:nth-child(4) { + -webkit-transition-delay: 150ms; + transition-delay: 150ms; +} +.speed-dial-opened .speed-dial-buttons a:nth-child(5) { + -webkit-transition-delay: 200ms; + transition-delay: 200ms; +} +.speed-dial-opened .speed-dial-buttons a:nth-child(6) { + -webkit-transition-delay: 250ms; + transition-delay: 250ms; +} +.floating-button-to-popover.floating-button-to-popover { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.floating-button-to-popover.floating-button-to-popover-in { + -webkit-transition-duration: 100ms; + transition-duration: 100ms; +} +.floating-button-to-popover.floating-button-to-popover-in i { + opacity: 0; + -webkit-transition-duration: 100ms; + transition-duration: 100ms; +} +.floating-button-to-popover.floating-button-to-popover-scale { + border-radius: 0; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + box-shadow: none; +} +.floating-button-to-popover.floating-button-to-popover-out { + -webkit-transition-delay: 0ms; + transition-delay: 0ms; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.floating-button-to-popover.floating-button-to-popover-out i { + opacity: 1; + -webkit-transition-duration: 100ms; + transition-duration: 100ms; + -webkit-transition-delay: 200ms; + transition-delay: 200ms; +} +/* === Modals === */ +.modal-overlay, +.preloader-indicator-overlay, +.popup-overlay, +.picker-modal-overlay { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.4); + z-index: 13000; + visibility: hidden; + opacity: 0; + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.modal-overlay.modal-overlay-visible, +.preloader-indicator-overlay.modal-overlay-visible, +.popup-overlay.modal-overlay-visible, +.picker-modal-overlay.modal-overlay-visible { + visibility: visible; + opacity: 1; +} +.popup-overlay { + z-index: 10500; +} +.picker-modal-overlay { + z-index: 12000; +} +.modal { + width: 280px; + position: absolute; + z-index: 13500; + left: 50%; + margin-left: -140px; + margin-top: 0; + top: 50%; + border-radius: 3px; + opacity: 0; + -webkit-transform: translate3d(0, 0, 0) scale(1.185); + transform: translate3d(0, 0, 0) scale(1.185); + -webkit-transition-property: -webkit-transform, opacity; + -moz-transition-property: -moz-transform, opacity; + -ms-transition-property: -ms-transform, opacity; + -o-transition-property: -o-transform, opacity; + transition-property: transform, opacity; + color: #757575; + display: none; + background: #fff; + font-size: 16px; + box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); +} +.modal.modal-in { + opacity: 1; + -webkit-transition-duration: 400ms; + transition-duration: 400ms; + -webkit-transform: translate3d(0, 0, 0) scale(1); + transform: translate3d(0, 0, 0) scale(1); +} +.modal.modal-out { + opacity: 0; + z-index: 13499; + -webkit-transition-duration: 400ms; + transition-duration: 400ms; + -webkit-transform: translate3d(0, 0, 0) scale(0.815); + transform: translate3d(0, 0, 0) scale(0.815); +} +.modal-inner { + padding: 24px 24px 20px; + position: relative; +} +.modal-title { + font-weight: 500; + font-size: 20px; + color: #212121; + line-height: 1.3; +} +.modal-title + .modal-text { + margin-top: 20px; +} +.modal-text { + line-height: 1.5; +} +.modal-buttons { + height: 48px; + padding: 6px 8px; + overflow: hidden; + box-sizing: border-box; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: end; + -ms-flex-pack: end; + -webkit-justify-content: flex-end; + justify-content: flex-end; +} +.modal-buttons.modal-buttons-vertical { + display: block; + height: auto; + padding: 0 0 8px 0; +} +.modal-buttons.modal-buttons-vertical .modal-button { + margin-left: 0; + text-align: right; + height: 48px; + line-height: 48px; + border-radius: 0; + padding-left: 16px; + padding-right: 16px; +} +.modal-button, +.modal-buttons .button { + color: #5a7dc9; + text-decoration: none; + text-align: center; + display: block; + border-radius: 2px; + line-height: 36px; + box-sizing: border-box; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + background: none; + padding: 0 10px; + margin: 0; + height: 36px; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 14px; + text-transform: uppercase; + font-family: inherit; + cursor: pointer; + min-width: 64px; + padding: 0 8px; + position: relative; + overflow: hidden; + outline: 0; + border: none; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-user-select: none; + user-select: none; +} +input[type="submit"].modal-button, +input[type="submit"].modal-buttons .button, +input[type="button"].modal-button, +input[type="button"].modal-buttons .button { + width: 100%; +} +html:not(.watch-active-state) .modal-button:active, +html:not(.watch-active-state) .modal-buttons .button:active, +.modal-button.active-state, +.modal-buttons .button.active-state { + background: rgba(0, 0, 0, 0.1); +} +.modal-button.button-fill, +.modal-buttons .button.button-fill { + background-color: #5a7dc9; + color: #fff; +} +html:not(.watch-active-state) .modal-button.button-fill:active, +html:not(.watch-active-state) .modal-buttons .button.button-fill:active, +.modal-button.button-fill.active-state, +.modal-buttons .button.button-fill.active-state { + background: #3e66bd; +} +.modal-button.button-big, +.modal-buttons .button.button-big { + height: 48px; + line-height: 48px; + border-radius: 3px; +} +.modal-button i.icon + span, +.modal-buttons .button i.icon + span, +.modal-button span:not(.ripple-wave) + span, +.modal-buttons .button span:not(.ripple-wave) + span, +.modal-button span:not(.ripple-wave) + i.icon, +.modal-buttons .button span:not(.ripple-wave) + i.icon, +.modal-button i.icon + i.icon, +.modal-buttons .button i.icon + i.icon { + margin-left: 8px; +} +.navbar .modal-button:not(.button-fill), +.navbar .modal-buttons .button:not(.button-fill), +.toolbar .modal-button:not(.button-fill), +.toolbar .modal-buttons .button:not(.button-fill), +.subnavbar .modal-button:not(.button-fill), +.subnavbar .modal-buttons .button:not(.button-fill), +.notifications .modal-button:not(.button-fill), +.notifications .modal-buttons .button:not(.button-fill) { + color: #fff; +} +html:not(.watch-active-state) .navbar .modal-button:not(.button-fill):active, +html:not(.watch-active-state) .navbar .modal-buttons .button:not(.button-fill):active, +html:not(.watch-active-state) .toolbar .modal-button:not(.button-fill):active, +html:not(.watch-active-state) .toolbar .modal-buttons .button:not(.button-fill):active, +html:not(.watch-active-state) .subnavbar .modal-button:not(.button-fill):active, +html:not(.watch-active-state) .subnavbar .modal-buttons .button:not(.button-fill):active, +html:not(.watch-active-state) .notifications .modal-button:not(.button-fill):active, +html:not(.watch-active-state) .notifications .modal-buttons .button:not(.button-fill):active, +.navbar .modal-button:not(.button-fill).active-state, +.navbar .modal-buttons .button:not(.button-fill).active-state, +.toolbar .modal-button:not(.button-fill).active-state, +.toolbar .modal-buttons .button:not(.button-fill).active-state, +.subnavbar .modal-button:not(.button-fill).active-state, +.subnavbar .modal-buttons .button:not(.button-fill).active-state, +.notifications .modal-button:not(.button-fill).active-state, +.notifications .modal-buttons .button:not(.button-fill).active-state { + background: rgba(255, 255, 255, 0.15); +} +.modal-button.active i.icon, +.modal-buttons .button.active i.icon { + background-color: #fff; +} +.modal-button.modal-button-bold, +.modal-buttons .button.modal-button-bold { + font-weight: 700; +} +.modal-button + .modal-button, +.modal-buttons .button + .modal-button { + margin-left: 4px; +} +.modal-no-buttons .modal-buttons { + display: none; +} +.actions-modal { + position: absolute; + left: 0; + bottom: 0; + z-index: 13500; + width: 100%; + background: #fff; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + max-height: 100%; + overflow: auto; + -webkit-overflow-scrolling: touch; +} +.actions-modal.modal-in { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.actions-modal.modal-out { + z-index: 13499; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +.actions-modal-group { + position: relative; +} +.actions-modal-group:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #d2d2d6; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .actions-modal-group:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .actions-modal-group:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.actions-modal-group:last-child:after { + display: none; +} +.actions-modal-button, +.actions-modal-label { + width: 100%; + font-weight: normal; + margin: 0; + box-sizing: border-box; + display: block; + position: relative; + padding: 0 16px; +} +.actions-modal-button a, +.actions-modal-label a { + text-decoration: none; + color: inherit; + display: block; +} +.actions-modal-button b, +.actions-modal-label b { + font-weight: 500; +} +.actions-modal-button.actions-modal-button-bold, +.actions-modal-label.actions-modal-button-bold { + font-weight: 500; +} +.actions-modal-button.actions-modal-button-red, +.actions-modal-label.actions-modal-button-red { + color: #f44336; +} +.actions-modal-button.disabled, +.actions-modal-label.disabled { + opacity: 0.95; + color: #9e9e9e; +} +.actions-modal-button { + cursor: pointer; + line-height: 48px; + font-size: 16px; + color: rgba(0, 0, 0, 0.87); + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.actions-modal-button a, +.actions-modal-button { + position: relative; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +html:not(.watch-active-state) .actions-modal-button:active, +.actions-modal-button.active-state { + background: rgba(0, 0, 0, 0.1); +} +.actions-modal-label { + font-size: 16px; + color: rgba(0, 0, 0, 0.54); + min-height: 56px; + line-height: 1.3; + padding-top: 12px; + padding-bottom: 12px; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +input.modal-text-input { + box-sizing: border-box; + height: 36px; + background: #fff; + margin: 0; + margin-top: 15px; + padding: 0; + border: none; + width: 100%; + font-size: 16px; + font-family: inherit; + display: block; + box-shadow: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + -webkit-transition-duration: 200ms; + transition-duration: 200ms; +} +input.modal-text-input::-webkit-input-placeholder { + color: rgba(0, 0, 0, 0.35); +} +input.modal-text-input + input.modal-text-input { + margin-top: 16px; +} +.popover { + width: 320px; + background: #fff; + z-index: 13500; + margin: 0; + top: 0; + opacity: 0; + left: 0; + border-radius: 3px; + position: absolute; + display: none; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + -webkit-transform: scale(0.85, 0.6); + transform: scale(0.85, 0.6); + -webkit-transition-property: opacity, -webkit-transform, border-radius; + -moz-transition-property: opacity, -moz-transform, border-radius; + transition-property: opacity, transform, border-radius; +} +.popover.popover-on-top { + -webkit-transform-origin: center bottom; + transform-origin: center bottom; +} +.popover.popover-on-bottom { + -webkit-transform-origin: center top; + transform-origin: center top; +} +.popover.modal-in { + -webkit-transform: scale(1); + transform: scale(1); + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + opacity: 1; +} +.popover.modal-out { + -webkit-transform: scale(1); + transform: scale(1); + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + opacity: 0; +} +.popover .list-block { + margin: 0; +} +.popover .list-block:first-child:last-child ul:before { + display: none; +} +.popover .list-block:first-child:last-child ul:after { + display: none; +} +.popover .list-block ul { + background: none; +} +.popover .list-block ul:before { + display: none; +} +.popover .list-block:first-child ul { + border-radius: 3px 3px 0 0; +} +.popover .list-block:first-child li:first-child a { + border-radius: 3px 3px 0 0; +} +.popover .list-block:last-child ul { + border-radius: 0 0 3px 3px; +} +.popover .list-block:last-child ul:after { + display: none; +} +.popover .list-block:last-child li:last-child a { + border-radius: 0 0 3px 3px; +} +.popover .list-block:first-child:last-child li:first-child:last-child a, +.popover .list-block:first-child:last-child ul:first-child:last-child { + border-radius: 3px; +} +.popover.popover-floating-button { + -webkit-transform-origin: center center; + transform-origin: center center; + -webkit-transform: scale(0.7); + transform: scale(0.7); + border-radius: 50%; + box-shadow: none; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); +} +.popover.popover-floating-button.modal-in { + border-radius: 0%; + -webkit-transform: scale(1); + transform: scale(1); + -webkit-transition-delay: 200ms; + transition-delay: 200ms; + -webkit-transition-duration: 200ms; + transition-duration: 200ms; +} +.popover.popover-floating-button.modal-out { + border-radius: 50%; + -webkit-transform: scale(0.7); + transform: scale(0.7); + -webkit-transition-delay: 0ms; + transition-delay: 0ms; + -webkit-transition-duration: 100ms; + transition-duration: 100ms; +} +.popover.popover-floating-button .list-block { + margin: 0; +} +.popover.popover-floating-button .list-block:first-child ul { + border-radius: 0; +} +.popover.popover-floating-button .list-block:first-child li:first-child a { + border-radius: 0; +} +.popover.popover-floating-button .list-block:last-child ul { + border-radius: 0; +} +.popover.popover-floating-button .list-block:last-child li:last-child a { + border-radius: 0; +} +.popover.popover-floating-button .list-block:first-child:last-child li:first-child:last-child a, +.popover.popover-floating-button .list-block:first-child:last-child ul:first-child:last-child { + border-radius: 0; +} +.popover-inner { + overflow: auto; + -webkit-overflow-scrolling: touch; +} +.actions-popover .list-block { + margin: 0; +} +.actions-popover-label { + padding: 8px 16px; + color: rgba(0, 0, 0, 0.54); + font-size: 16px; + line-height: 1.3; + padding-top: 12px; + padding-bottom: 12px; + position: relative; +} +.actions-popover-label:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: #d2d2d6; + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .actions-popover-label:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .actions-popover-label:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.actions-popover-label:last-child:after { + display: none; +} +.popup, +.login-screen { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 11000; + background: #fff; + box-sizing: border-box; + display: none; + overflow: auto; + -webkit-overflow-scrolling: touch; + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + -ms-transition-property: -ms-transform; + -o-transition-property: -o-transform; + transition-property: transform; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +.popup.modal-in, +.login-screen.modal-in, +.popup.modal-out, +.login-screen.modal-out { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.popup.modal-in, +.login-screen.modal-in { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.popup.modal-out, +.login-screen.modal-out { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +.login-screen.modal-in, +.login-screen.modal-out { + display: block; +} +@media all and (min-width: 630px) and (min-height: 630px) { + .popup:not(.tablet-fullscreen) { + width: 630px; + height: 630px; + left: 50%; + top: 50%; + margin-left: -315px; + margin-top: -315px; + box-shadow: 0px 20px 44px rgba(0, 0, 0, 0.5); + border-radius: 3px; + -webkit-transform: translate3d(0, 1024px, 0); + transform: translate3d(0, 1024px, 0); + } + .popup:not(.tablet-fullscreen).modal-in { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + .popup:not(.tablet-fullscreen).modal-out { + -webkit-transform: translate3d(0, 1024px, 0); + transform: translate3d(0, 1024px, 0); + } +} +@media all and (max-width: 629px), (max-height: 629px) { + html.with-statusbar-overlay .popup { + height: -webkit-calc(100% - 20px); + height: calc(100% - 20px); + top: 20px; + } + html.with-statusbar-overlay .popup-overlay { + z-index: 9500; + } +} +html.with-statusbar-overlay .login-screen, +html.with-statusbar-overlay .popup.tablet-fullscreen { + height: -webkit-calc(100% - 20px); + height: calc(100% - 20px); + top: 20px; +} +.modal-preloader .modal-title, +.modal-preloader .modal-inner { + text-align: center; +} +.preloader-indicator-overlay { + visibility: visible; + opacity: 0; + background: none; +} +.preloader-indicator-modal { + position: absolute; + left: 50%; + top: 50%; + padding: 8px; + margin-left: -24px; + margin-top: -24px; + background: rgba(0, 0, 0, 0.8); + z-index: 13500; + border-radius: 4px; +} +.preloader-indicator-modal .preloader { + display: block; +} +.picker-modal { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 260px; + z-index: 12000; + display: none; + -webkit-transition-property: -webkit-transform; + -moz-transition-property: -moz-transform; + -ms-transition-property: -ms-transform; + -o-transition-property: -o-transform; + transition-property: transform; + background: #fff; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +.picker-modal.modal-in, +.picker-modal.modal-out { + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.picker-modal.modal-in { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.picker-modal.modal-out { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); +} +.picker-modal .picker-modal-inner { + height: 100%; + position: relative; +} +.picker-modal .toolbar { + position: relative; + width: 100%; + top: 0; +} +.picker-modal .toolbar + .picker-modal-inner { + height: -webkit-calc(100% - 48px); + height: -moz-calc(100% - 48px); + height: calc(100% - 48px); +} +.picker-modal .toolbar a.link { + -webkit-box-flex: 0; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + flex-shrink: 0; +} +.picker-modal .picker-header, +.picker-modal .picker-footer { + height: 48px; +} +.picker-modal .picker-header { + background: #5a7dc9; +} +.picker-modal .picker-header + .toolbar .toolbar-inner { + overflow: visible; +} +.picker-modal .picker-header + .picker-footer + .toolbar + .picker-modal-inner { + height: -webkit-calc(100% - 48px * 3); + height: -moz-calc(100% - 48px * 3); + height: calc(100% - 48px * 3); +} +.picker-modal .picker-footer { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 48px; + padding: 6px 8px; + overflow: hidden; + box-sizing: border-box; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: end; + -ms-flex-pack: end; + -webkit-justify-content: flex-end; + justify-content: flex-end; +} +.picker-modal .picker-footer.modal-buttons-vertical { + display: block; + height: auto; + padding: 0 0 8px 0; +} +.picker-modal .picker-footer.modal-buttons-vertical .modal-button { + margin-left: 0; + text-align: right; + height: 48px; + line-height: 48px; + border-radius: 0; + padding-left: 16px; + padding-right: 16px; +} +.picker-modal .picker-header + .picker-modal-inner, +.picker-modal .picker-footer + .picker-modal-inner { + height: -webkit-calc(100% - 48px); + height: -moz-calc(100% - 48px); + height: calc(100% - 48px); +} +.picker-modal .picker-header + .toolbar + .picker-modal-inner, +.picker-modal .picker-footer + .toolbar + .picker-modal-inner { + height: -webkit-calc(100% - 48px * 2); + height: -moz-calc(100% - 48px * 2); + height: calc(100% - 48px * 2); +} +.picker-modal.picker-modal-inline, +.popover .picker-modal { + display: block; + position: relative; + background: none; + z-index: inherit; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.picker-modal.picker-modal-inline .toolbar, +.popover .picker-modal .toolbar { + top: 0; +} +.popover .picker-modal { + width: auto; +} +.popover .picker-modal .toolbar:first-child, +.popover .picker-modal .picker-header:first-child { + border-radius: 2px 2px 0 0; +} +.picker-modal.smart-select-picker .list-block { + margin: 0; +} +.picker-modal.smart-select-picker .list-block ul:before { + display: none; +} +.picker-modal.smart-select-picker .list-block ul:after { + display: none; +} +/* === Panels === */ +.panel-overlay { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.2); + opacity: 0; + z-index: 5999; + display: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.panel { + z-index: 1000; + display: none; + background: #fff; + box-sizing: border-box; + overflow: auto; + -webkit-overflow-scrolling: touch; + position: absolute; + width: 260px; + top: 0; + height: 100%; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.panel.panel-left.panel-cover { + z-index: 6000; + left: -260px; +} +.panel.panel-left.panel-reveal { + left: 0; +} +.panel.panel-right.panel-cover { + z-index: 6000; + right: -260px; +} +.panel.panel-right.panel-reveal { + right: 0; +} +body.with-panel-left-cover .panel, +body.with-panel-right-cover .panel { + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); +} +body.with-panel-left-cover .views, +body.with-panel-right-cover .views { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +body.with-panel-left-cover .panel-overlay, +body.with-panel-right-cover .panel-overlay { + display: block; + opacity: 1; +} +body.with-panel-left-reveal .views, +body.with-panel-right-reveal .views { + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-transition-property: -webkit-transform, box-shadow; + -moz-transition-property: -moz-transform, box-shadow; + transition-property: transform, box-shadow; +} +body.with-panel-left-reveal .panel-overlay, +body.with-panel-right-reveal .panel-overlay { + background: rgba(0, 0, 0, 0); + display: block; + opacity: 0; +} +body.with-panel-left-reveal .views { + -webkit-transform: translate3d(260px, 0, 0); + transform: translate3d(260px, 0, 0); +} +body.with-panel-left-reveal .panel-overlay { + -webkit-transform: translate3d(260px, 0, 0); + transform: translate3d(260px, 0, 0); +} +body.with-panel-left-cover .panel-left { + -webkit-transform: translate3d(260px, 0, 0); + transform: translate3d(260px, 0, 0); +} +body.with-panel-right-reveal .views { + -webkit-transform: translate3d(-260px, 0, 0); + transform: translate3d(-260px, 0, 0); +} +body.with-panel-right-reveal .panel-overlay { + -webkit-transform: translate3d(-260px, 0, 0); + transform: translate3d(-260px, 0, 0); +} +body.with-panel-right-cover .panel-right { + -webkit-transform: translate3d(-260px, 0, 0); + transform: translate3d(-260px, 0, 0); +} +body.panel-closing .panel-overlay { + display: block; +} +body.panel-closing .views { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-transition-property: -webkit-transform, box-shadow; + -moz-transition-property: -moz-transform, box-shadow; + transition-property: transform, box-shadow; +} +/* === Tabs === */ +.tabs .tab { + display: none; +} +.tabs .tab.active { + display: block; +} +.tabs-animated-wrap { + position: relative; + width: 100%; + overflow: hidden; + height: 100%; +} +.tabs-animated-wrap > .tabs { + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + height: 100%; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.tabs-animated-wrap > .tabs > .tab { + width: 100%; + display: block; + -webkit-box-flex: 0; + -webkit-flex-shrink: 0; + -ms-flex: 0 0 auto; + flex-shrink: 0; +} +.tabs-swipeable-wrap { + height: 100%; +} +.tabs-swipeable-wrap > .tabs > .tab { + display: block; +} +/* === Messages === */ +.messages-content { + background: #eee; +} +.messages { + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; +} +.messages-date { + text-align: center; + font-weight: 500; + font-size: 12px; + line-height: 1; + margin: 10px 15px; +} +.messages-date span { + font-weight: 400; +} +.message { + box-sizing: border-box; + margin: 0px 8px 8px 8px; + max-width: 80%; + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; +} +.message:first-child { + margin-top: 8px; +} +.message.message-pic img { + display: block; +} +.message-name, +.message-label, +.message-date, +.messages-date { + color: rgba(0, 0, 0, 0.51); +} +.message-name { + font-size: 12px; + line-height: 1; + margin-bottom: 2px; + margin-top: 7px; +} +.message-hide-name .message-name { + display: none; +} +.message-label { + font-size: 12px; + line-height: 1; + margin-top: 4px; +} +.message-hide-label .message-label { + display: none; +} +.message-avatar { + width: 48px; + height: 48px; + border-radius: 100%; + margin-top: -48px; + position: relative; + top: 1px; + background-size: cover; + opacity: 1; + -webkit-transition-duration: 400ms; + transition-duration: 400ms; +} +.message-hide-avatar .message-avatar { + opacity: 0; +} +.message-text { + box-sizing: border-box; + border-radius: 2px; + padding: 6px 8px; + min-width: 48px; + font-size: 16px; + line-height: 1.2; + word-break: break-word; + color: #333; + min-height: 48px; + position: relative; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.message-text img { + max-width: 100%; + height: auto; +} +.message-pic .message-text { + padding: 8px; +} +.message-date { + font-size: 12px; + margin-top: 4px; +} +.message-pic img + .message-date { + margin-top: 8px; +} +.message-sent { + -ms-flex-item-align: end; + -webkit-align-self: flex-end; + align-self: flex-end; + -webkit-box-align: end; + -ms-flex-align: end; + -webkit-align-items: flex-end; + align-items: flex-end; +} +.message-sent .message-name, +.message-sent .message-label { + margin-right: 8px; +} +.message-sent .message-text { + background-color: #C8E6C9; + margin-left: auto; + border-radius: 2px 2px 0 2px; + margin-right: 8px; +} +.message-sent .message-text:before { + position: absolute; + content: ''; + border-left: 0px solid transparent; + border-right: 8px solid transparent; + border-bottom: 8px solid #C8E6C9; + left: 100%; + bottom: 0; + width: 0; + height: 0; +} +.message-sent.message-with-avatar .message-text, +.message-sent.message-with-avatar .message-name, +.message-sent.message-with-avatar .message-label { + margin-right: 56px; +} +.message-received { + -ms-flex-item-align: start; + -webkit-align-self: flex-start; + align-self: flex-start; + -webkit-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; +} +.message-received .message-text { + background-color: #fff; + border-radius: 2px 2px 2px 0px; + margin-left: 8px; +} +.message-received .message-text:before { + position: absolute; + content: ''; + border-left: 8px solid transparent; + border-right: 0px solid transparent; + border-bottom: 8px solid #fff; + right: 100%; + bottom: 0; + width: 0; + height: 0; +} +.message-received .message-name, +.message-received .message-label { + margin-left: 8px; +} +.message-received.message-with-avatar .message-text, +.message-received.message-with-avatar .message-name, +.message-received.message-with-avatar .message-label { + margin-left: 56px; +} +.message-appear-from-bottom { + -webkit-animation: messageAppearFromBottom 400ms; + animation: messageAppearFromBottom 400ms; +} +.message-appear-from-top { + -webkit-animation: messageAppearFromTop 400ms; + animation: messageAppearFromTop 400ms; +} +@-webkit-keyframes messageAppearFromBottom { + from { + -webkit-transform: translate3d(0, 100%, 0); + } + to { + -webkit-transform: translate3d(0, 0, 0); + } +} +@keyframes messageAppearFromBottom { + from { + transform: translate3d(0, 100%, 0); + } + to { + transform: translate3d(0, 0, 0); + } +} +@-webkit-keyframes messageAppearFromTop { + from { + -webkit-transform: translate3d(0, -100%, 0); + } + to { + -webkit-transform: translate3d(0, 0, 0); + } +} +@keyframes messageAppearFromTop { + from { + transform: translate3d(0, -100%, 0); + } + to { + transform: translate3d(0, 0, 0); + } +} +/* === Statusbar overlay === */ +html.with-statusbar-overlay body { + padding-top: 20px; + box-sizing: border-box; +} +html.with-statusbar-overlay body .statusbar-overlay { + display: block; +} +html.with-statusbar-overlay body .panel { + padding-top: 20px; +} +.statusbar-overlay { + background: #5a7dc9; + z-index: 10000; + position: absolute; + left: 0; + top: 0; + height: 20px; + width: 100%; + display: none; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +/* === + Preloader + By Rudi Theunissen (https://github.com/rtheunissen/md-preloader) +=== */ +.preloader { + font-size: 0; + display: inline-block; + width: 32px; + height: 32px; + -webkit-animation: preloader-outer 3300ms linear infinite; + animation: preloader-outer 3300ms linear infinite; +} +.preloader svg { + width: 100%; + height: 100%; + -webkit-animation: preloader-inner 1320ms linear infinite; + animation: preloader-inner 1320ms linear infinite; +} +.preloader svg circle { + fill: none; + stroke: #757575; + stroke-linecap: square; + -webkit-animation: preloader-arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite; + animation: preloader-arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite; +} +@-webkit-keyframes preloader-outer { + 0% { + -webkit-transform: rotate(0); + } + 100% { + -webkit-transform: rotate(360deg); + } +} +@keyframes preloader-outer { + 0% { + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} +@-webkit-keyframes preloader-inner { + 0% { + -webkit-transform: rotate(-100.8deg); + } + 100% { + -webkit-transform: rotate(0); + } +} +@keyframes preloader-inner { + 0% { + transform: rotate(-100.8deg); + } + 100% { + transform: rotate(0); + } +} +@-webkit-keyframes preloader-arc { + 0% { + stroke-dasharray: 1 210.48670779px; + stroke-dashoffset: 0; + } + 40% { + stroke-dasharray: 151.55042961px, 210.48670779px; + stroke-dashoffset: 0; + } + 100% { + stroke-dasharray: 1 210.48670779px; + stroke-dashoffset: -151.55042961px; + } +} +@keyframes preloader-arc { + 0% { + stroke-dasharray: 1 210.48670779px; + stroke-dashoffset: 0; + } + 40% { + stroke-dasharray: 151.55042961px, 210.48670779px; + stroke-dashoffset: 0; + } + 100% { + stroke-dasharray: 1 210.48670779px; + stroke-dashoffset: -151.55042961px; + } +} +.preloader-inner { + position: relative; + display: block; + width: 100%; + height: 100%; + -webkit-animation: preloader-inner-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite; + animation: preloader-inner-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite; +} +.preloader-inner .preloader-inner-gap { + position: absolute; + width: 2px; + left: 50%; + margin-left: -1px; + top: 0; + bottom: 0; + box-sizing: border-box; + border-top: 4px solid #757575; +} +.preloader-inner .preloader-inner-left, +.preloader-inner .preloader-inner-right { + position: absolute; + top: 0; + height: 100%; + width: 50%; + overflow: hidden; +} +.preloader-inner .preloader-inner-half-circle { + position: absolute; + top: 0; + height: 100%; + width: 200%; + box-sizing: border-box; + border: 4px solid #757575; + border-bottom-color: transparent !important; + border-radius: 50%; + -webkit-animation-iteration-count: infinite; + -webkit-animation-duration: 1.3125s; + -webkit-animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1); + animation-iteration-count: infinite; + animation-duration: 1.3125s; + animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1); +} +.preloader-white .preloader-inner .preloader-inner-gap, +.preloader-white .preloader-inner .preloader-inner-half-circle { + border-color: #fff; +} +.preloader-inner .preloader-inner-left { + left: 0; +} +.preloader-inner .preloader-inner-left .preloader-inner-half-circle { + left: 0; + border-right-color: transparent !important; + -webkit-animation-name: preloader-left-rotate; + animation-name: preloader-left-rotate; +} +.preloader-inner .preloader-inner-right { + right: 0; +} +.preloader-inner .preloader-inner-right .preloader-inner-half-circle { + right: 0; + border-left-color: transparent !important; + -webkit-animation-name: preloader-right-rotate; + animation-name: preloader-right-rotate; +} +.color-multi .preloader-inner .preloader-inner-left .preloader-inner-half-circle { + -webkit-animation-name: preloader-left-rotate-multicolor; + animation-name: preloader-left-rotate-multicolor; +} +.color-multi .preloader-inner .preloader-inner-right .preloader-inner-half-circle { + -webkit-animation-name: preloader-right-rotate-multicolor; + animation-name: preloader-right-rotate-multicolor; +} +@-webkit-keyframes preloader-left-rotate { + 0%, + 100% { + -webkit-transform: rotate(130deg); + } + 50% { + -webkit-transform: rotate(-5deg); + } +} +@keyframes preloader-left-rotate { + 0%, + 100% { + transform: rotate(130deg); + } + 50% { + transform: rotate(-5deg); + } +} +@-webkit-keyframes preloader-right-rotate { + 0%, + 100% { + -webkit-transform: rotate(-130deg); + } + 50% { + -webkit-transform: rotate(5deg); + } +} +@keyframes preloader-right-rotate { + 0%, + 100% { + transform: rotate(-130deg); + } + 50% { + transform: rotate(5deg); + } +} +@-webkit-keyframes preloader-inner-rotate { + 12.5% { + -webkit-transform: rotate(135deg); + } + 25% { + -webkit-transform: rotate(270deg); + } + 37.5% { + -webkit-transform: rotate(405deg); + } + 50% { + -webkit-transform: rotate(540deg); + } + 62.5% { + -webkit-transform: rotate(675deg); + } + 75% { + -webkit-transform: rotate(810deg); + } + 87.5% { + -webkit-transform: rotate(945deg); + } + 100% { + -webkit-transform: rotate(1080deg); + } +} +@keyframes preloader-inner-rotate { + 12.5% { + transform: rotate(135deg); + } + 25% { + transform: rotate(270deg); + } + 37.5% { + transform: rotate(405deg); + } + 50% { + transform: rotate(540deg); + } + 62.5% { + transform: rotate(675deg); + } + 75% { + transform: rotate(810deg); + } + 87.5% { + transform: rotate(945deg); + } + 100% { + transform: rotate(1080deg); + } +} +@-webkit-keyframes preloader-left-rotate-multicolor { + 0%, + 100% { + border-left-color: #4285F4; + -webkit-transform: rotate(130deg); + } + 75% { + border-left-color: #1B9A59; + border-top-color: #1B9A59; + } + 50% { + border-left-color: #F7C223; + border-top-color: #F7C223; + -webkit-transform: rotate(-5deg); + } + 25% { + border-left-color: #DE3E35; + border-top-color: #DE3E35; + } +} +@keyframes preloader-left-rotate-multicolor { + 0%, + 100% { + border-left-color: #4285F4; + transform: rotate(130deg); + } + 75% { + border-left-color: #1B9A59; + border-top-color: #1B9A59; + } + 50% { + border-left-color: #F7C223; + border-top-color: #F7C223; + transform: rotate(-5deg); + } + 25% { + border-left-color: #DE3E35; + border-top-color: #DE3E35; + } +} +@-webkit-keyframes preloader-right-rotate-multicolor { + 0%, + 100% { + border-right-color: #4285F4; + -webkit-transform: rotate(-130deg); + } + 75% { + border-right-color: #1B9A59; + border-top-color: #1B9A59; + } + 50% { + border-right-color: #F7C223; + border-top-color: #F7C223; + -webkit-transform: rotate(5deg); + } + 25% { + border-top-color: #DE3E35; + border-right-color: #DE3E35; + } +} +@keyframes preloader-right-rotate-multicolor { + 0%, + 100% { + border-right-color: #4285F4; + transform: rotate(-130deg); + } + 75% { + border-right-color: #1B9A59; + border-top-color: #1B9A59; + } + 50% { + border-right-color: #F7C223; + border-top-color: #F7C223; + transform: rotate(5deg); + } + 25% { + border-top-color: #DE3E35; + border-right-color: #DE3E35; + } +} +/* === Progress Bar === */ +.progressbar, +.progressbar-infinite { + height: 4px; + width: 100%; + overflow: hidden; + display: block; + position: relative; + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + background: rgba(90, 125, 201, 0.5); +} +.progressbar { + display: block; + vertical-align: middle; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; +} +.progressbar span { + content: ''; + width: 100%; + background: #5a7dc9; + height: 100%; + position: absolute; + left: 0; + top: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + -webkit-transition-duration: 150ms; + transition-duration: 150ms; +} +.progressbar-infinite { + z-index: 15000; +} +.progressbar-infinite:before, +.progressbar-infinite:after { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: #5a7dc9; + -webkit-transform-origin: left center; + transform-origin: left center; +} +.progressbar-infinite:before { + -webkit-animation: progressbar-infinite-1 2s linear infinite; + animation: progressbar-infinite-1 2s linear infinite; +} +.progressbar-infinite:after { + -webkit-animation: progressbar-infinite-2 2s linear infinite; + animation: progressbar-infinite-2 2s linear infinite; +} +html.with-statusbar-overlay body > .progressbar-infinite, +html.with-statusbar-overlay .framework7-root > .progressbar-infinite { + top: 20px; +} +.progressbar-infinite.color-multi { + background: none !important; +} +.progressbar-infinite.color-multi:before, +.progressbar-infinite.color-multi:after { + width: 100%; + animation: none; +} +.progressbar-infinite.color-multi:before { + background: none; + -webkit-animation: progressbar-infinite-multicolor-bg 3s step-end infinite; + animation: progressbar-infinite-multicolor-bg 3s step-end infinite; +} +.progressbar-infinite.color-multi:after { + background: none; + -webkit-animation: progressbar-infinite-multicolor-fill 3s linear infinite; + animation: progressbar-infinite-multicolor-fill 3s linear infinite; + -webkit-transform-origin: center center; + transform-origin: center center; +} +body > .progressbar, +.view > .progressbar, +.views > .progressbar, +.page > .progressbar, +.panel > .progressbar, +.popup > .progressbar, +.framework7-root > .progressbar, +body > .progressbar-infinite, +.view > .progressbar-infinite, +.views > .progressbar-infinite, +.page > .progressbar-infinite, +.panel > .progressbar-infinite, +.popup > .progressbar-infinite, +.framework7-root > .progressbar-infinite { + position: absolute; + left: 0; + top: 0; + z-index: 15000; + -webkit-transform-origin: center top; + transform-origin: center top; +} +.progressbar-in { + -webkit-animation: progressbar-in 300ms forwards; + animation: progressbar-in 300ms forwards; +} +.progressbar-out { + -webkit-animation: progressbar-out 300ms forwards; + animation: progressbar-out 300ms forwards; +} +html.with-statusbar-overlay body > .progressbar, +html.with-statusbar-overlay .framework7-root > .progressbar { + top: 20px; +} +@-webkit-keyframes progressbar-in { + from { + opacity: 0; + -webkit-transform: scaleY(0); + } + to { + opacity: 1; + -webkit-transform: scaleY(1); + } +} +@keyframes progressbar-in { + from { + opacity: 0; + transform: scaleY(0); + } + to { + opacity: 1; + transform: scaleY(1); + } +} +@-webkit-keyframes progressbar-out { + from { + opacity: 1; + -webkit-transform: scaleY(1); + } + to { + opacity: 0; + -webkit-transform: scaleY(0); + } +} +@keyframes progressbar-out { + from { + opacity: 1; + transform: scaleY(1); + } + to { + opacity: 0; + transform: scaleY(0); + } +} +@-webkit-keyframes progressbar-infinite-1 { + 0% { + -webkit-transform: translateX(-10%) scaleX(0.1); + } + 25% { + -webkit-transform: translateX(30%) scaleX(0.6); + } + 50% { + -webkit-transform: translateX(100%) scaleX(1); + } + 100% { + -webkit-transform: translateX(100%) scaleX(1); + } +} +@keyframes progressbar-infinite-1 { + 0% { + transform: translateX(-10%) scaleX(0.1); + } + 25% { + transform: translateX(30%) scaleX(0.6); + } + 50% { + transform: translateX(100%) scaleX(1); + } + 100% { + transform: translateX(100%) scaleX(1); + } +} +@-webkit-keyframes progressbar-infinite-2 { + 0% { + -webkit-transform: translateX(-100%) scaleX(1); + } + 40% { + -webkit-transform: translateX(-100%) scaleX(1); + } + 75% { + -webkit-transform: translateX(60%) scaleX(0.35); + } + 90% { + -webkit-transform: translateX(100%) scaleX(0.1); + } + 100% { + -webkit-transform: translateX(100%) scaleX(0.1); + } +} +@keyframes progressbar-infinite-2 { + 0% { + transform: translateX(-100%) scaleX(1); + } + 40% { + transform: translateX(-100%) scaleX(1); + } + 75% { + transform: translateX(60%) scaleX(0.35); + } + 90% { + transform: translateX(100%) scaleX(0.1); + } + 100% { + transform: translateX(100%) scaleX(0.1); + } +} +@-webkit-keyframes progressbar-infinite-multicolor-bg { + 0% { + background-color: #4caf50; + } + 25% { + background-color: #f44336; + } + 50% { + background-color: #2196f3; + } + 75% { + background-color: #ffeb3b; + } +} +@keyframes progressbar-infinite-multicolor-bg { + 0% { + background-color: #4caf50; + } + 25% { + background-color: #f44336; + } + 50% { + background-color: #2196f3; + } + 75% { + background-color: #ffeb3b; + } +} +@-webkit-keyframes progressbar-infinite-multicolor-fill { + 0% { + -webkit-transform: scaleX(0); + background-color: #f44336; + } + 24.9% { + -webkit-transform: scaleX(1); + background-color: #f44336; + } + 25% { + -webkit-transform: scaleX(0); + background-color: #2196f3; + } + 49.9% { + -webkit-transform: scaleX(1); + background-color: #2196f3; + } + 50% { + -webkit-transform: scaleX(0); + background-color: #ffeb3b; + } + 74.9% { + -webkit-transform: scaleX(1); + background-color: #ffeb3b; + } + 75% { + -webkit-transform: scaleX(0); + background-color: #4caf50; + } + 100% { + -webkit-transform: scaleX(1); + background-color: #4caf50; + } +} +@keyframes progressbar-infinite-multicolor-fill { + 0% { + transform: scaleX(0); + background-color: #f44336; + } + 24.9% { + transform: scaleX(1); + background-color: #f44336; + } + 25% { + transform: scaleX(0); + background-color: #2196f3; + } + 49.9% { + transform: scaleX(1); + background-color: #2196f3; + } + 50% { + transform: scaleX(0); + background-color: #ffeb3b; + } + 74.9% { + transform: scaleX(1); + background-color: #ffeb3b; + } + 75% { + transform: scaleX(0); + background-color: #4caf50; + } + 100% { + transform: scaleX(1); + background-color: #4caf50; + } +} +/* === Columns Picker === */ +.picker-columns { + width: 100%; + height: 260px; + z-index: 11500; +} +.picker-columns.picker-modal-inline { + height: 200px; +} +@media (orientation: landscape) and (max-height: 415px) { + .picker-columns:not(.picker-modal-inline) { + height: 200px; + } +} +.popover.popover-picker-columns { + width: 280px; +} +.popover.popover-picker-columns .toolbar { + border-radius: 2px 2px 0 0; +} +.picker-items { + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + padding: 0; + text-align: right; + font-size: 20px; + -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent); + -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent); +} +.picker-items-col { + overflow: hidden; + position: relative; + max-height: 100%; +} +.picker-items-col.picker-items-col-left { + text-align: left; +} +.picker-items-col.picker-items-col-center { + text-align: center; +} +.picker-items-col.picker-items-col-right { + text-align: right; +} +.picker-items-col.picker-items-col-divider { + color: rgba(0, 0, 0, 0.87); + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; +} +.picker-items-col-wrapper { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +.picker-item { + height: 36px; + line-height: 36px; + padding: 0 10px; + white-space: nowrap; + position: relative; + overflow: hidden; + text-overflow: ellipsis; + color: rgba(0, 0, 0, 0.54); + left: 0; + top: 0; + width: 100%; + box-sizing: border-box; + -webkit-transition-duration: 300ms; + transition-duration: 300ms; +} +.picker-items-col-absolute .picker-item { + position: absolute; +} +.picker-item.picker-item-far { + pointer-events: none; +} +.picker-item.picker-selected { + color: rgba(0, 0, 0, 0.87); + -webkit-transform: translate3d(0, 0, 0) rotateX(0deg); + transform: translate3d(0, 0, 0) rotateX(0deg); +} +.picker-center-highlight { + height: 36px; + box-sizing: border-box; + position: absolute; + left: 0; + width: 100%; + top: 50%; + margin-top: -18px; + pointer-events: none; +} +.picker-center-highlight:before { + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: auto; + right: auto; + height: 1px; + width: 100%; + background-color: rgba(0, 0, 0, 0.15); + display: block; + z-index: 15; + -webkit-transform-origin: 50% 0%; + transform-origin: 50% 0%; +} +html.pixel-ratio-2 .picker-center-highlight:before { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .picker-center-highlight:before { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.picker-center-highlight:after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + right: auto; + top: auto; + height: 1px; + width: 100%; + background-color: rgba(0, 0, 0, 0.15); + display: block; + z-index: 15; + -webkit-transform-origin: 50% 100%; + transform-origin: 50% 100%; +} +html.pixel-ratio-2 .picker-center-highlight:after { + -webkit-transform: scaleY(0.5); + transform: scaleY(0.5); +} +html.pixel-ratio-3 .picker-center-highlight:after { + -webkit-transform: scaleY(0.33); + transform: scaleY(0.33); +} +.picker-3d .picker-items { + overflow: hidden; + -webkit-perspective: 1200px; + perspective: 1200px; +} +.picker-3d .picker-items-col, +.picker-3d .picker-items-col-wrapper, +.picker-3d .picker-item { + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; +} +.picker-3d .picker-items-col { + overflow: visible; +} +.picker-3d .picker-item { + -webkit-transform-origin: center center -110px; + transform-origin: center center -110px; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; +} +/* === Notifications === */ +.notifications { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + z-index: 10900; + color: #fff; + font-size: 14px; + margin: 0; + border: none; + display: none; + box-sizing: border-box; + max-height: 100%; + overflow: hidden; + -webkit-overflow-scrolling: touch; + -webkit-transition-duration: 450ms; + transition-duration: 450ms; + -webkit-perspective: 1200px; + perspective: 1200px; +} +.notifications.list-block > ul { + max-width: 568px; + background: #323232; + margin: 0 auto; +} +.notifications.list-block > ul:before { + display: none; +} +.notifications.list-block > ul:after { + display: none; +} +.notifications .item-content { + -webkit-box-align: start; + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; + padding-left: 24px; +} +.notifications .item-title { + font-size: 14px; + font-weight: normal; + white-space: normal; + padding-top: 14px; + padding-bottom: 14px; +} +.notifications .item-inner { + padding-right: 24px; + padding-top: 0; + padding-bottom: 0; +} +.notifications .item-inner:after { + display: none; +} +.notifications .item-after { + max-height: none; + margin-left: 16px; +} +.notifications .button.close-notification { + color: #7898de; +} +.notifications .notification-item { + margin: 0 auto; + -webkit-transition-duration: 450ms; + transition-duration: 450ms; + -webkit-transition-delay: 100ms; + transition-delay: 100ms; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; +} +.notifications .notification-hidden { + opacity: 0; + -webkit-transition-delay: 0ms; + transition-delay: 0ms; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +.notifications .notification-item-removing { + -webkit-transition-delay: 0ms; + transition-delay: 0ms; +} +@media (min-width: 569px) { + .notifications.list-block > ul { + border-radius: 2px; + width: auto; + min-width: 288px; + } +} +/* === Touch ripple === */ +.ripple, +a.floating-button, +.floating-button > a, +a.link, +a.item-link, +.button, +.modal-button, +.tab-link, +.label-radio, +.label-checkbox, +.actions-modal-button, +.speed-dial-buttons a { + -webkit-user-select: none; + user-select: none; +} +.ripple-wave { + left: 0; + top: 0; + position: absolute !important; + border-radius: 50%; + pointer-events: none; + z-index: -1; + background: rgba(0, 0, 0, 0.1); + padding: 0; + margin: 0; + font-size: 0; + -webkit-transform: translate3d(0px, 0px, 0) scale(0); + transform: translate3d(0px, 0px, 0) scale(0); + -webkit-transition-duration: 1400ms; + transition-duration: 1400ms; +} +.ripple-wave.ripple-wave-fill { + -webkit-transition-duration: 300ms; + transition-duration: 300ms; + opacity: 0.35; +} +.ripple-wave.ripple-wave-out { + -webkit-transition-duration: 600ms; + transition-duration: 600ms; + opacity: 0; +} +.button-fill .ripple-wave, +.picker-calendar-day .ripple-wave { + z-index: 1; +} +.button-fill .ripple-wave, +.navbar .ripple-wave, +.toolbar .ripple-wave, +.subnavbar .ripple-wave, +.searchbar .ripple-wave, +.notifications .ripple-wave, +.floating-button .ripple-wave, +.speed-dial-buttons a .ripple-wave { + background: rgba(255, 255, 255, 0.3); +} +.messagebar .ripple-wave { + background: rgba(0, 0, 0, 0.1); +} +/* === Disabled elements === */ +.disabled, +[disabled] { + opacity: 0.55; + pointer-events: none; +} +.disabled .disabled, +.disabled [disabled], +[disabled] .disabled, +[disabled] [disabled] { + opacity: 1; +} +.phone.android .container-edit .page-content .list-block:first-child { + margin-top: -1px; +} +.container-edit.popover, +.container-add.popover, +.container-settings.popover { + width: 360px; +} +.container-edit.popup .list-block ul, +.container-add.popup .list-block ul, +.container-settings.popup .list-block ul, +.container-edit.popover .list-block ul, +.container-add.popover .list-block ul, +.container-settings.popover .list-block ul { + border-radius: 0; + background: #fff; +} +.container-edit.popup .list-block:first-child, +.container-add.popup .list-block:first-child, +.container-settings.popup .list-block:first-child, +.container-edit.popover .list-block:first-child, +.container-add.popover .list-block:first-child, +.container-settings.popover .list-block:first-child { + margin-top: 0; +} +.container-edit.popup .list-block:first-child li:first-child a, +.container-add.popup .list-block:first-child li:first-child a, +.container-settings.popup .list-block:first-child li:first-child a, +.container-edit.popover .list-block:first-child li:first-child a, +.container-add.popover .list-block:first-child li:first-child a, +.container-settings.popover .list-block:first-child li:first-child a { + border-radius: 0; +} +.container-edit.popup > .content-block, +.container-add.popup > .content-block, +.container-settings.popup > .content-block, +.container-edit.popover > .content-block, +.container-add.popover > .content-block, +.container-settings.popover > .content-block, +.container-edit.popup .popover-inner > .content-block, +.container-add.popup .popover-inner > .content-block, +.container-settings.popup .popover-inner > .content-block, +.container-edit.popover .popover-inner > .content-block, +.container-add.popover .popover-inner > .content-block, +.container-settings.popover .popover-inner > .content-block { + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} +.container-edit.popup .popover-view, +.container-add.popup .popover-view, +.container-settings.popup .popover-view, +.container-edit.popover .popover-view, +.container-add.popover .popover-view, +.container-settings.popover .popover-view { + border-radius: 3px; +} +.container-edit.popup .popover-view > .pages, +.container-add.popup .popover-view > .pages, +.container-settings.popup .popover-view > .pages, +.container-edit.popover .popover-view > .pages, +.container-add.popover .popover-view > .pages, +.container-settings.popover .popover-view > .pages { + border-radius: 3px; +} +.container-edit .categories, +.container-add .categories, +.container-settings .categories { + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} +.container-edit .categories > .toolbar, +.container-add .categories > .toolbar, +.container-settings .categories > .toolbar { + top: 0; + height: 100%; +} +.container-edit .popover-inner, +.container-add .popover-inner, +.container-settings .popover-inner { + height: 400px; +} +.dataview .row { + justify-content: space-around; +} +.dataview ul { + padding: 0 10px; + list-style: none; + justify-content: space-around; +} +.dataview ul li { + display: inline-block; +} +.dataview .active { + position: relative; +} +.dataview .active::after { + content: ''; + width: 20px; + height: 20px; + background-color: red; + position: absolute; + right: 0; + bottom: 0; +} +.item-content .item-after.splitter label { + color: #000; + margin: 0 5px; + line-height: 36px; +} +.item-content .item-after.splitter .button { + min-width: 40px; + margin-left: 0; +} +.item-content .item-after.value { + display: block; + min-width: 50px; + color: #000000; + margin-left: 10px; + text-align: right; +} +.item-content.buttons .item-inner { + padding-top: 0; + padding-bottom: 0; +} +.item-content.buttons .item-inner > .row { + width: 100%; +} +.item-content.buttons .item-inner > .row .button { + flex: 1; + font-size: 17px; + margin-left: 5px; +} +.item-content.buttons .item-inner > .row .button:first-child { + margin-left: 0; +} +.item-content.buttons .item-inner > .row .button.active { + color: #fff; + background-color: #5a7dc9; +} +.item-content .color-preview { + width: 30px; + height: 30px; + border-radius: 16px; + margin-top: -3px; + border: 0.5px solid gray; +} +.item-link.no-indicator .item-inner { + background-image: none; +} +.button.active i.icon { + background-color: #fff; +} +.document-menu { + width: auto; + line-height: 1 !important; +} +.document-menu .popover-inner { + overflow: hidden; +} +.document-menu .list-block ul { + height: 48px; +} +.document-menu .list-block li { + display: inline-block; +} +.color-palette a { + flex-grow: 1; + position: relative; + min-width: 10px; + min-height: 26px; + margin: 1px 1px 0 0; + border: 1px solid #c4c4c4; +} +html.pixel-ratio-2 .color-palette a { + border: 0.5px solid #c4c4c4; +} +html.pixel-ratio-3 .color-palette a { + border: 0.33px solid #c4c4c4; +} +.color-palette a.active:after { + content: ' '; + position: absolute; + left: 50%; + margin-left: -6px; + top: 50%; + margin-top: -4px; + width: 12px; + height: 9px; + background: no-repeat center; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2012%209'%20xml%3Aspace%3D'preserve'%3E%3Cpolygon%20fill%3D'%23fff'%20points%3D'12%2C0.7%2011.3%2C0%203.9%2C7.4%200.7%2C4.2%200%2C4.9%203.9%2C8.8%203.9%2C8.8%203.9%2C8.8%20'%2F%3E%3C%2Fsvg%3E"); + -webkit-background-size: 12px 9px; + background-size: 12px 9px; + filter: drop-shadow(0px 0px 1px #000); +} +.color-palette a.transparent { + background-repeat: no-repeat; + background-size: 100% 100%; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20x%3D'0px'%20y%3D'0px'%20viewBox%3D'0%200%2022%2022'%20xml%3Aspace%3D'preserve'%3E%3Cline%20stroke%3D'%23ff0000'%20stroke-linecap%3D'undefined'%20stroke-linejoin%3D'undefined'%20id%3D'svg_1'%20y2%3D'0'%20x2%3D'22'%20y1%3D'22'%20x1%3D'0'%20stroke-width%3D'2'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E"); +} +.color-palette .theme-colors .item-inner { + display: inline-block; +} +.about .page-content { + text-align: center; +} +.about .content-block:first-child { + margin: 15px 0; +} +.about .content-block { + margin: 0 auto 15px; +} +.about .content-block a { + color: #000; +} +.about h3 { + font-weight: normal; + margin: 0; +} +.about h3.vendor { + color: #000; + font-weight: bold; + margin-top: 15px; +} +.about p > label { + margin-right: 5px; +} +.about .logo { + background: url('../../../../common/mobile/resources/img/about/onlyoffice.png') 50% 50% no-repeat; +} +@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 192dpi) { + .about .logo { + background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png'); + } +} +i.icon.icon-expand-up { + width: 17px; + height: 17px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23000000%22%3E%3Cg%3E%3Cpolygon%20points%3D%2210.9%2C5.1%202%2C13.9%204.1%2C16%2011.1%2C9.2%2017.9%2C16%2020%2C13.9%2011.2%2C5.1%2011.1%2C5%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-expand-down { + width: 17px; + height: 17px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23000000%22%3E%3Cg%3E%3Cpolygon%20points%3D%2210.9%2C16.9%202%2C8.1%204.1%2C6%2011.1%2C12.8%2017.9%2C6%2020%2C8.1%2011.2%2C16.9%2011.1%2C17%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-search { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M19.5%2C16.8L16%2C13.3c0.7-1.1%2C1.1-2.4%2C1.1-3.8C17%2C5.4%2C13.6%2C2%2C9.5%2C2S2%2C5.4%2C2%2C9.5S5.4%2C17%2C9.5%2C17c1.4%2C0%2C2.7-0.4%2C3.8-1.1l3.5%2C3.5c0.7%2C0.7%2C1.9%2C0.7%2C2.6%2C0C20.2%2C18.7%2C20.2%2C17.6%2C19.5%2C16.8z%20M9.5%2C15.3c-3.2%2C0-5.8-2.6-5.8-5.8s2.6-5.8%2C5.8-5.8s5.8%2C2.6%2C5.8%2C5.8S12.7%2C15.3%2C9.5%2C15.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-edit { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M0%2C20h22v1H0V20z%22%2F%3E%3Cpolygon%20points%3D%2217.1%2C3.1%203.5%2C16.7%203%2C20%206.3%2C19.5%2019.9%2C5.9%20%09%22%2F%3E%3Cpath%20d%3D%22M20.5%2C5.3L22%2C3.8c0%2C0-0.2-1.2-0.9-1.9C20.4%2C1.1%2C19.2%2C1%2C19.2%2C1l-1.5%2C1.5L20.5%2C5.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-reader { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M17%2C21H1V9h6V2l0%2C0h10v5h1V1H6.2L0%2C7.6V22h18v-3h-1V21z%20M6%2C2.8V8H1.1L6%2C2.8z%20M13%2C8c-5.1%2C0-9%2C5-9%2C5s4.1%2C5%2C9%2C5c5%2C0%2C9-5%2C9-5S18%2C8%2C13%2C8z%20M8.7%2C15.5C6.8%2C14.4%2C6.4%2C13%2C6.4%2C13s0.4-1.5%2C2.4-2.6C8.3%2C11.2%2C8%2C12%2C8%2C13C8%2C13.9%2C8.3%2C14.8%2C8.7%2C15.5z%20M13%2C16.7c-2.1%2C0-3.7-1.7-3.7-3.7c0-2.1%2C1.7-3.7%2C3.7-3.7c2.1%2C0%2C3.7%2C1.7%2C3.7%2C3.7C16.7%2C15.1%2C15.1%2C16.7%2C13%2C16.7z%20M17.3%2C15.5c0.4-0.7%2C0.7-1.6%2C0.7-2.5c0-1-0.3-1.8-0.7-2.6c2%2C1.1%2C3.4%2C2.6%2C3.4%2C2.6S19.2%2C14.4%2C17.3%2C15.5z%20M13%2C11.7c-0.7%2C0-1.3%2C0.6-1.3%2C1.3s0.6%2C1.3%2C1.3%2C1.3s1.3-0.6%2C1.3-1.3S13.7%2C11.7%2C13%2C11.7z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-download { + width: 22px; + height: 28px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%22-1%203%2022%2028%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpolygon%20id%3D%22XMLID_3_%22%20points%3D%2210%2C5.6%2010%2C21.2%2011%2C21.2%2011%2C5.6%2014.6%2C9.3%2015.3%2C8.5%2010.5%2C3.6%205.7%2C8.5%206.4%2C9.3%20%09%22%2F%3E%3Cpolygon%20id%3D%22XMLID_6_%22%20points%3D%2213%2C12%2013%2C13%2019%2C13%2019%2C30%202%2C30%202%2C13%208%2C13%208%2C12%201%2C12%201%2C13%201%2C30%201%2C31%2020%2C31%2020%2C30%2020%2C13%2020%2C12%20%09%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-info { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M10%2C17h2V8h-2V17z%20M11%2C1C5.5%2C1%2C1%2C5.5%2C1%2C11s4.5%2C10%2C10%2C10s10-4.5%2C10-10S16.5%2C1%2C11%2C1z%20M11%2C20c-5%2C0-9-4-9-9s4-9%2C9-9s9%2C4%2C9%2C9S16%2C20%2C11%2C20z%20M10%2C7h2V5h-2V7z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-about { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%22-1%207%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M21%2C18.5c0-0.3-0.1-0.6-0.7-0.9l-2.6-1.2l2.6-1.2c0.6-0.3%2C0.7-0.6%2C0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-8.9-4.1c-0.7-0.4-1.9-0.4-2.8%2C0l-8.9%2C4.1C-0.9%2C13.8-1%2C14.1-1%2C14.3s0.1%2C0.6%2C0.7%2C0.9l2.6%2C1.2l-2.6%2C1.2C-0.9%2C18-1%2C18.4-1%2C18.5c0%2C0.2%2C0.1%2C0.6%2C0.7%2C0.9l2.5%2C1.2l-2.5%2C1.2C-0.9%2C22.1-1%2C22.5-1%2C22.7c0%2C0.3%2C0.1%2C0.6%2C0.7%2C0.9l8.9%2C4.1c0.5%2C0.2%2C0.8%2C0.3%2C1.4%2C0.3s1-0.1%2C1.4-0.3l8.9-4.1c0.6-0.4%2C0.7-0.6%2C0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-2.5-1.2l2.5-1.2C20.9%2C19.2%2C21%2C18.8%2C21%2C18.5z%20M-0.2%2C14.3L-0.2%2C14.3c0%2C0%2C0.1-0.1%2C0.3-0.2L9%2C10c0.6-0.3%2C1.5-0.3%2C2%2C0l8.9%2C4.1c0.2%2C0.1%2C0.3%2C0.2%2C0.3%2C0.2l0%2C0c0%2C0-0.1%2C0.1-0.3%2C0.2L11%2C18.6c-0.6%2C0.3-1.5%2C0.3-2%2C0l-8.9-4.1C-0.1%2C14.4-0.2%2C14.3-0.2%2C14.3z%20M20.2%2C22.7L20.2%2C22.7c0%2C0-0.1%2C0.1-0.3%2C0.2L11%2C27.1c-0.6%2C0.3-1.5%2C0.3-2%2C0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0%2C0c0%2C0%2C0.1-0.1%2C0.3-0.2l3-1.5l5.5%2C2.6c0.7%2C0.4%2C1.9%2C0.4%2C2.8%2C0l5.5-2.6l3%2C1.5C20.1%2C22.7%2C20.2%2C22.7%2C20.2%2C22.7z%20M19.9%2C18.7L11%2C22.8c-0.6%2C0.3-1.5%2C0.3-2%2C0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0%2C0c0%2C0%2C0.1-0.1%2C0.3-0.2l3-1.5l5.5%2C2.6c0.7%2C0.4%2C1.9%2C0.4%2C2.8%2C0l5.5-2.6l3%2C1.5c0.2%2C0.1%2C0.3%2C0.2%2C0.3%2C0.2l0%2C0C20.2%2C18.5%2C20.1%2C18.6%2C19.9%2C18.7z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-help { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M11.6%2C1.3c-3.3%2C0-6%2C2.8-6%2C6.2c0.3%2C0%2C0.7%2C0%2C0.9%2C0c0-2.9%2C2.3-5.2%2C5.1-5.2s5.1%2C2.3%2C5.1%2C5.2c0%2C1.7-1.9%2C3.2-3%2C4.3C12.9%2C12.6%2C11%2C14.2%2C11%2C16c0%2C1.2%2C0%2C2.2%2C0%2C2.7c0.3%2C0%2C0.6%2C0%2C0.9%2C0c0-0.6%2C0-1.6%2C0-2.5c0-1.4%2C1.1-2.4%2C2.2-3.5c1.7-1.5%2C3.5-3.1%2C3.5-5.2C17.6%2C4.1%2C14.9%2C1.3%2C11.6%2C1.3z%20M11.5%2C20.2c-0.3%2C0-0.5%2C0.2-0.5%2C0.5v0.8c0%2C0.3%2C0.2%2C0.5%2C0.5%2C0.5s0.5-0.2%2C0.5-0.5v-0.8C11.9%2C20.4%2C11.7%2C20.2%2C11.5%2C20.2z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-versions { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%22-1%207%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M19%2C12c0-1.1-0.9-2-2-2c0-1.1-0.9-2-2-2H5c-1.1%2C0-2%2C0.9-2%2C2c-1.1%2C0-2%2C0.9-2%2C2c-1.1%2C0-2%2C0.9-2%2C2v12c0%2C1.1%2C0.9%2C2%2C2%2C2h18c1.1%2C0%2C2-0.9%2C2-2V14C21%2C12.9%2C20.1%2C12%2C19%2C12z%20M5%2C9h10c0.6%2C0%2C1%2C0.4%2C1%2C1H4C4%2C9.4%2C4.4%2C9%2C5%2C9z%20M3%2C11h14c0.6%2C0%2C1%2C0.4%2C1%2C1H2C2%2C11.4%2C2.4%2C11%2C3%2C11z%20M20%2C26c0%2C0.6-0.4%2C1-1%2C1H1c-0.6%2C0-1-0.4-1-1V14c0-0.6%2C0.4-1%2C1-1h18c0.6%2C0%2C1%2C0.4%2C1%2C1V26z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-text-align-center { + width: 22px; + height: 22px; + background-color: #5a7dc9; + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M1%2C3v1h21V3H1z%20M4%2C7v1h14V7H4z%20M1%2C12h21v-1H1V12z%20M4%2C15v1h14v-1H4z%20M1%2C20h21v-1H1V20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-text-align-jast { + width: 22px; + height: 22px; + background-color: #5a7dc9; + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M1%2C3v1h21V3H1z%20M1%2C8h21V7H1V8z%20M1%2C12h21v-1H1V12z%20M1%2C16h21v-1H1V16z%20M1%2C20h21v-1H1V20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-text-align-left { + width: 22px; + height: 22px; + background-color: #5a7dc9; + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M1%2C3v1h21V3H1z%20M15%2C7H1v1h14V7z%20M1%2C12h21v-1H1V12z%20M15%2C15H1v1h14V15z%20M1%2C20h21v-1H1V20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-text-align-right { + width: 22px; + height: 22px; + background-color: #5a7dc9; + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M1%2C3v1h21V3H1z%20M8%2C8h14V7H8V8z%20M22%2C11H1v1h21V11z%20M8%2C16h14v-1H8V16z%20M22%2C19H1v1h21V19z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-de-indent { + width: 22px; + height: 22px; + background-color: #5a7dc9; + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M1%2C20v-1h21v1H1z%20M11%2C15h11v1H11V15z%20M11%2C11h11v1H11V11z%20M11%2C7h11v1H11V7z%20M6.3%2C7L7%2C7.7l-3.8%2C3.8L7%2C15.3L6.3%2C16L2%2C11.8l-0.2-0.3L2%2C11.2L6.3%2C7z%20M1%2C3h21v1H1V3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-in-indent { + width: 22px; + height: 22px; + background-color: #5a7dc9; + -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M1%2C20v-1h21v1H1z%20M12%2C16H1v-1h11V16z%20M12%2C12H1v-1h11V12z%20M12%2C8H1V7h11V8z%20M21%2C11.2l0.2%2C0.3L21%2C11.8L16.7%2C16L16%2C15.3l3.8-3.8L16%2C7.7L16.7%2C7L21%2C11.2z%20M22%2C4H1V3h21V4z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-table-add-column-left { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M15%2C19h-1H8H7v-1v-3H0V2h7h1h14v4v1v3v1v3v1v3v1H15z%20M15%2C18h6v-3h-6V18z%20M15%2C14h6v-3h-6V14z%20M8%2C18h6v-3H8V18z%20M8%2C14h6v-3H8V14z%20M14%2C10V7H8v3H14z%20M8%2C3v3h6V3H8z%20M21%2C3h-6v3h6V3z%20M15%2C7v3h6V7H15z%20M3%2C16h1v2h2v1H4v2H3v-2H1v-1h2V16z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-table-add-column-right { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M0%2C19l0-1l0-3l0-1l0-3l0-1l0-3l0-1l0-4h14h1h7v13h-7v3v1h-1H8H7H0z%20M7%2C15H1v3h6V15z%20M7%2C11H1v3h6V11z%20M14%2C15H8v3h6V15z%20M14%2C11H8v3h6V11z%20M14%2C10V7H8v3H14z%20M8%2C3v3h6V3H8z%20M1%2C6h6V3H1V6z%20M1%2C7v3h6V7H1z%20M19%2C18h2v1h-2v2h-1v-2h-2v-1h2v-2h1V18z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-table-add-row-above { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M21%2C20h-6h-1H8H7H0v-1v-3v-1v-3v-1V8V7V1h15v6h6h1v1v3v1v3v1v3v1H21z%20M7%2C8H1v3h6V8z%20M7%2C12H1v3h6V12z%20M7%2C16H1v3h6V16z%20M8%2C19h6v-3H8V19z%20M8%2C15h6v-3H8V15z%20M8%2C11h6V8H8V11z%20M21%2C8h-6v3h6V8z%20M21%2C12h-6v3h6V12z%20M21%2C16h-6v3h6V16z%20M19%2C6h-1V4h-2V3h2V1h1v2h2v1h-2V6z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-table-add-row-below { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M22%2C1v1v3v1v3v1v3v1h-1h-6v6H0v-6v-1v-3V9V6V5V2V1h7h1h6h1h6H22z%20M7%2C10H1v3h6V10z%20M7%2C6H1v3h6V6z%20M7%2C2H1v3h6V2z%20M8%2C5h6V2H8V5z%20M8%2C9h6V6H8V9z%20M8%2C13h6v-3H8V13z%20M21%2C10h-6v3h6V10z%20M21%2C6h-6v3h6V6z%20M21%2C2h-6v3h6V2z%20M19%2C17h2v1h-2v2h-1v-2h-2v-1h2v-2h1V17z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-table-remove-column { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M21%2C19h-6h-1h-1.6c-0.9%2C1.8-2.7%2C3-4.9%2C3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z%20M7.5%2C12C5%2C12%2C3%2C14%2C3%2C16.5S5%2C21%2C7.5%2C21s4.5-2%2C4.5-4.5S10%2C12%2C7.5%2C12z%20M14%2C3H8v3h6V3z%20M14%2C7H8v3h6V7z%20M14%2C11H8v0.1c1.9%2C0.2%2C3.5%2C1.3%2C4.4%2C2.9H14V11z%20M14%2C15h-1.2c0.1%2C0.5%2C0.2%2C1%2C0.2%2C1.5c0%2C0.5-0.1%2C1-0.2%2C1.5H14V15z%20M21%2C3h-6v3h6V3z%20M21%2C7h-6v3h6V7z%20M21%2C11h-6v3h6V11z%20M21%2C15h-6v3h6V15z%20M9.6%2C19.3l-2.1-2.1l-2.1%2C2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1%2C2.1l2.1-2.1l0.7%2C0.7l-2.1%2C2.1l2.1%2C2.1L9.6%2C19.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-table-remove-row { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M21%2C19h-6h-1h-1.6c-0.9%2C1.8-2.7%2C3-4.9%2C3s-4-1.2-4.9-3H1H0v-1v-3v-1v-3v-1V7V6V3V2h7h1h6h1h6h1v1v3v1v3v1v3v1v3v1H21z%20M1%2C18h1.2C2.1%2C17.5%2C2%2C17%2C2%2C16.5c0-0.5%2C0.1-1%2C0.2-1.5H1V18z%20M7%2C3H1v3h6V3z%20M7%2C7H1v3h6V7z%20M7.5%2C12C5%2C12%2C3%2C14%2C3%2C16.5S5%2C21%2C7.5%2C21s4.5-2%2C4.5-4.5S10%2C12%2C7.5%2C12z%20M14%2C3H8v3h6V3z%20M14%2C7H8v3h6V7z%20M14%2C15h-1.2c0.1%2C0.5%2C0.2%2C1%2C0.2%2C1.5c0%2C0.5-0.1%2C1-0.2%2C1.5H14V15z%20M21%2C3h-6v3h6V3z%20M21%2C7h-6v3h6V7z%20M21%2C15h-6v3h6V15z%20M9.6%2C19.3l-2.1-2.1l-2.1%2C2.1l-0.7-0.7l2.1-2.1l-2.1-2.1l0.7-0.7l2.1%2C2.1l2.1-2.1l0.7%2C0.7l-2.1%2C2.1l2.1%2C2.1L9.6%2C19.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-pagebreak { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M8%2C14v1h1v-1H8z%20M6%2C14v1h1v-1H6z%20M18%2C21H3v-6H2v7h17v-7h-1V21z%20M4%2C14v1h1v-1H4z%20M14%2C14v1h1v-1H14z%20M10%2C14v1h1v-1H10z%20M8.2%2C1L2%2C7.6V14h1V9h6V2l0%2C0h9v12h1V1H8.2z%20M8%2C8H3.1L8%2C2.8V8z%20M12%2C14v1h1v-1H12z%20M16%2C14v1h1v-1H16z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-sectionbreak { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M20%2C14V2H3v12H2V1h19v13H20z%20M5%2C14v1H4v-1H5z%20M7%2C14v1H6v-1H7z%20M9%2C14v1H8v-1H9z%20M11%2C14v1h-1v-1H11z%20M13%2C14v1h-1v-1H13z%20M15%2C14v1h-1v-1H15z%20M17%2C14v1h-1v-1H17z%20M18%2C14h1v1h-1V14z%20M3%2C21h17v-6h1v7H2v-7h1V21z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-stringbreak { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M18%2C12H5.1L9%2C15.9l-0.7%2C0.7l-4.5-4.5l-0.6-0.6l0.6-0.6l4.5-4.5L9%2C7.1L5.1%2C11H18V5h1v6v1H18z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-pagenumber { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M8.2%2C1L2%2C7.6V22h17V1H8.2z%20M8%2C2.8V8H3.1L8%2C2.8z%20M18%2C21H3V9h6V2l0%2C0h9V21z%20M12%2C19h1v-4h-0.7c0%2C0.2-0.1-0.1-0.1%2C0c-0.1%2C0.1-0.2%2C0-0.3%2C0c-0.1%2C0.1-0.2%2C0.1-0.4%2C0.1c-0.1%2C0-0.3%2C0-0.4%2C0V16H12V19z%20M15.3%2C17.3C15%2C17.9%2C15.1%2C18.4%2C15%2C19h0.9c0-0.3%2C0-0.6%2C0.1-0.9c0.1-0.3%2C0.1-0.6%2C0.3-0.9c0.1-0.3%2C0.3-0.6%2C0.4-0.9c0.2-0.3%2C0.1-0.3%2C0.3-0.5V15h-3v1h1.9C15.6%2C16.4%2C15.5%2C16.7%2C15.3%2C17.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +i.icon.icon-link { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M12.4%2C9.8c0%2C0-2.1-0.1-3.8%2C1.2c-2.8%2C2-3.3%2C4.3-3.3%2C4.3s1.6-1.7%2C3.5-2.5c1.7-0.7%2C3.7-0.4%2C3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z%20M11%2C1C5.5%2C1%2C1%2C5.5%2C1%2C11c0%2C5.5%2C4.5%2C10%2C10%2C10s10-4.5%2C10-10C21%2C5.5%2C16.5%2C1%2C11%2C1z%20M11%2C20c-5%2C0-9-4.1-9-9C2%2C6%2C6%2C2%2C11%2C2s9%2C4.1%2C9%2C9C20%2C16%2C16%2C20%2C11%2C20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +.navbar i.icon.icon-undo { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23fff%22%3E%3Cg%3E%3Cpath%20d%3D%22M20%2C17v-2c0-1.7-1.3-3-3-3H3.7l3.4%2C3.4l-1.4%2C1.4l-5.2-5.2L0%2C11l0.5-0.6l5.2-5.2l1.4%2C1.4L3.7%2C10H17c2.8%2C0%2C5%2C2.2%2C5%2C5v2H20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +.navbar i.icon.icon-redo { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23fff%22%3E%3Cg%3E%3Cpath%20d%3D%22M0%2C17v-2c0-2.8%2C2.2-5%2C5-5h13.3l-3.4-3.4l1.4-1.4l5.2%2C5.2L22%2C11l-0.5%2C0.6l-5.2%2C5.2l-1.4-1.4l3.4-3.4H5c-1.7%2C0-3%2C1.3-3%2C3v2H0z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +.navbar i.icon.icon-search { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23fff%22%3E%3Cg%3E%3Cpath%20d%3D%22M19.5%2C16.8L16%2C13.3c0.7-1.1%2C1.1-2.4%2C1.1-3.8C17%2C5.4%2C13.6%2C2%2C9.5%2C2S2%2C5.4%2C2%2C9.5S5.4%2C17%2C9.5%2C17c1.4%2C0%2C2.7-0.4%2C3.8-1.1l3.5%2C3.5c0.7%2C0.7%2C1.9%2C0.7%2C2.6%2C0C20.2%2C18.7%2C20.2%2C17.6%2C19.5%2C16.8z%20M9.5%2C15.3c-3.2%2C0-5.8-2.6-5.8-5.8s2.6-5.8%2C5.8-5.8s5.8%2C2.6%2C5.8%2C5.8S12.7%2C15.3%2C9.5%2C15.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +.navbar i.icon.icon-burger { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%22-8%201%2022%2022%22%20fill%3D%22%23fff%22%3E%3Cg%3E%3Cpath%20d%3D%22M-6%2C6v2h18V6H-6z%20M-6%2C13h18v-2H-6V13z%20M-6%2C18h18v-2H-6V18z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +.navbar i.icon.icon-plus { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23fff%22%3E%3Cg%3E%3Cpath%20d%3D%22M21%2C12h-9v9h-2v-9H1v-2h9V1h2v9h9V12z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +.navbar i.icon.icon-edit { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23fff%22%3E%3Cg%3E%3Cpath%20d%3D%22M0%2C20h22v1H0V20z%22%2F%3E%3Cpolygon%20points%3D%2217.1%2C3.1%203.5%2C16.7%203%2C20%206.3%2C19.5%2019.9%2C5.9%20%09%22%2F%3E%3Cpath%20d%3D%22M20.5%2C5.3L22%2C3.8c0%2C0-0.2-1.2-0.9-1.9C20.4%2C1.1%2C19.2%2C1%2C19.2%2C1l-1.5%2C1.5L20.5%2C5.3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +.navbar i.icon.icon-settings { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23fff%22%3E%3Cg%3E%3Cpath%20d%3D%22M12.1%2C2H9.9C9.6%2C2%2C9.4%2C2.2%2C9.3%2C2.5L8.8%2C4.9c0%2C0.2-0.2%2C0.3-0.3%2C0.3s-0.1%2C0-0.2-0.1L6.2%2C3.8C6.1%2C3.7%2C6%2C3.7%2C5.8%2C3.7c-0.1%2C0-0.3%2C0-0.4%2C0.1L3.8%2C5.4c-0.1%2C0.2-0.2%2C0.5%2C0%2C0.8l1.3%2C2.1c0.1%2C0.2%2C0.1%2C0.4-0.2%2C0.5L2.5%2C9.3C2.2%2C9.4%2C2%2C9.6%2C2%2C9.9v2.2c0%2C0.3%2C0.2%2C0.5%2C0.5%2C0.6l2.4%2C0.5c0.3%2C0.1%2C0.4%2C0.3%2C0.2%2C0.5l-1.3%2C2.1c-0.2%2C0.2-0.1%2C0.6%2C0.1%2C0.8l1.6%2C1.6c0.1%2C0.1%2C0.3%2C0.2%2C0.4%2C0.2s0.2%2C0%2C0.3-0.1L8.3%2C17c0.1-0.1%2C0.1-0.1%2C0.2-0.1s0.3%2C0.1%2C0.3%2C0.3l0.5%2C2.3C9.4%2C19.8%2C9.6%2C20%2C9.9%2C20h2.2c0.3%2C0%2C0.5-0.2%2C0.6-0.5l0.5-2.4c0-0.2%2C0.1-0.3%2C0.3-0.3c0.1%2C0%2C0.1%2C0%2C0.2%2C0.1l2.1%2C1.3c0.1%2C0.1%2C0.2%2C0.1%2C0.3%2C0.1c0.2%2C0%2C0.3-0.1%2C0.4-0.2l1.6-1.6c0.2-0.2%2C0.2-0.5%2C0.1-0.8l-1.3-2.1c-0.2-0.2-0.1-0.5%2C0.2-0.5l2.4-0.5c0.3-0.1%2C0.5-0.3%2C0.5-0.6V9.8c0-0.3-0.2-0.5-0.5-0.6l-2.4-0.5c-0.3-0.1-0.4-0.3-0.2-0.5l1.3-2.1c0.2-0.2%2C0.1-0.6-0.1-0.8l-1.6-1.6c-0.1-0.1-0.3-0.2-0.4-0.2s-0.2%2C0-0.3%2C0.1l-2.1%2C1.3C13.6%2C5%2C13.6%2C5%2C13.5%2C5s-0.3-0.1-0.3-0.3l-0.5-2.2C12.6%2C2.2%2C12.4%2C2%2C12.1%2C2L12.1%2C2z%20M11%2C14.5c-1.9%2C0-3.5-1.6-3.5-3.5S9.1%2C7.5%2C11%2C7.5s3.5%2C1.6%2C3.5%2C3.5S12.9%2C14.5%2C11%2C14.5L11%2C14.5z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +.navbar i.icon.icon-prev { + width: 20px; + height: 20px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23fff%22%3E%3Cg%3E%3Cpolygon%20points%3D%225.1%2C10.9%2013.9%2C2%2016%2C4.1%209.2%2C11.1%2016%2C17.9%2013.9%2C20%205.1%2C11.2%205%2C11.1%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +.navbar i.icon.icon-next { + width: 20px; + height: 20px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23fff%22%3E%3Cg%3E%3Cpolygon%20points%3D%2216.9%2C10.9%208.1%2C2%206%2C4.1%2012.8%2C11.1%206%2C17.9%208.1%2C20%2016.9%2C11.2%2017%2C11.1%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +.navbar i.icon.icon-expand-down { + width: 22px; + height: 22px; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%23fff%22%3E%3Cg%3E%3Cpolygon%20points%3D%2210.9%2C16.9%202%2C8.1%204.1%2C6%2011.1%2C12.8%2017.9%2C6%2020%2C8.1%2011.2%2C16.9%2011.1%2C17%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); +} +#add-table .page, +#add-shape .page { + background-color: #fff; +} +.table-styles .row, +.table-styles .row li { + margin-bottom: 12px; +} +.table-styles li { + margin: 0; + padding: 1px; +} +.table-styles li img { + width: 70px; + height: 50px; +} +.shapes li { + width: 70px; + height: 70px; + margin: 0 1px; +} +.shapes li .thumb { + width: 100%; + height: 100%; + background-color: #5a7dc9; +} +.chart-types li { + width: 60px; + height: 60px; + margin: 6px; +} +.chart-types li .thumb { + width: 100%; + height: 100%; + background-size: contain; +} +.bullets ul, +.numbers ul { + margin-top: 10px; +} +.bullets li, +.numbers li { + width: 70px; + height: 70px; + margin-right: 1px; + border: 1px solid #c4c4c4; +} +html.pixel-ratio-2 .bullets li, +html.pixel-ratio-2 .numbers li { + border: 0.5px solid #c4c4c4; +} +html.pixel-ratio-3 .bullets li, +html.pixel-ratio-3 .numbers li { + border: 0.33px solid #c4c4c4; +} +.bullets li .thumb, +.numbers li .thumb { + width: 100%; + height: 100%; + background-color: #ffffff; + background-size: cover; +} +.bullets li .thumb label, +.numbers li .thumb label { + width: 100%; + text-align: center; + position: absolute; + top: 34%; +} diff --git a/apps/spreadsheeteditor/mobile/resources/less/app-ios.less b/apps/spreadsheeteditor/mobile/resources/less/app-ios.less new file mode 100644 index 000000000..7e58f4001 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/less/app-ios.less @@ -0,0 +1,170 @@ +@import url('../../../../../vendor/framework7/src/less/ios/_mixins.less'); +@import url('../../../../../vendor/framework7/src/less/ios/_colors-vars.less'); + +// Colors +@themeColor: #8ca946; // (64,102,215) + +@import url('../../../../../vendor/framework7/src/less/ios/intro.less'); +@import url('../../../../../vendor/framework7/src/less/ios/grid.less'); +@import url('../../../../../vendor/framework7/src/less/ios/views.less'); +@import url('../../../../../vendor/framework7/src/less/ios/pages.less'); +@import url('../../../../../vendor/framework7/src/less/ios/toolbars.less'); +@import url('../../../../../vendor/framework7/src/less/ios/toolbars-pages.less'); +@import url('../../../../../vendor/framework7/src/less/ios/searchbar.less'); +@import url('../../../../../vendor/framework7/src/less/ios/messagebar.less'); +@import url('../../../../../vendor/framework7/src/less/ios/icons.less'); +//@import url('../../../../../vendor/framework7/src/less/ios/badges.less'); +//@import url('../../../../../vendor/framework7/src/less/ios/chips.less'); +@import url('../../../../../vendor/framework7/src/less/ios/content-block.less'); +@import url('../../../../../vendor/framework7/src/less/ios/lists.less'); +//@import url('../../../../../vendor/framework7/src/less/ios/contacts.less'); +@import url('../../../../../vendor/framework7/src/less/ios/forms.less'); +//@import url('../../../../../vendor/framework7/src/less/ios/floating-button.less'); +//@import url('../../../../../vendor/framework7/src/less/ios/accordion.less'); +@import url('../../../../../vendor/framework7/src/less/ios/cards.less'); +@import url('../../../../../vendor/framework7/src/less/ios/modals.less'); +@import url('../../../../../vendor/framework7/src/less/ios/panels.less'); +//@import url('../../../../../vendor/framework7/src/less/ios/lazy-load.less'); +@import url('../../../../../vendor/framework7/src/less/ios/tabs.less'); +@import url('../../../../../vendor/framework7/src/less/ios/messages.less'); +@import url('../../../../../vendor/framework7/src/less/ios/statusbar.less'); +@import url('../../../../../vendor/framework7/src/less/ios/preloader.less'); +@import url('../../../../../vendor/framework7/src/less/ios/progressbar.less'); +//@import url('../../../../../vendor/framework7/src/less/ios/pull-to-refresh.less'); +//@import url('../../../../../vendor/framework7/src/less/ios/infinite-scroll.less'); +//@import url('../../../../../vendor/framework7/src/less/ios/autocomplete.less'); +@import url('../../../../../vendor/framework7/src/less/ios/swiper.less'); +//@import url('../../../../../vendor/framework7/src/less/ios/photo-browser.less'); +@import url('../../../../../vendor/framework7/src/less/ios/picker.less'); +//@import url('../../../../../vendor/framework7/src/less/ios/calendar.less'); +@import url('../../../../../vendor/framework7/src/less/ios/notifications.less'); +//@import url('../../../../../vendor/framework7/src/less/ios/login-screen.less'); +@import url('../../../../../vendor/framework7/src/less/ios/disabled.less'); + +// Main Toolbar +#editor-navbar.navbar .right a + a, +#editor-navbar.navbar .left a + a { + margin-left: 0; + + html:not(.phone) & { + margin-left: 10px; + } +} + +@import url('../../../../common/mobile/resources/less/_mixins.less'); +@import url('../../../../common/mobile/resources/less/ios/_container.less'); +@import url('../../../../common/mobile/resources/less/ios/_dataview.less'); +@import url('../../../../common/mobile/resources/less/ios/_listview.less'); +@import url('../../../../common/mobile/resources/less/ios/_button.less'); +@import url('../../../../common/mobile/resources/less/ios/_contextmenu.less'); +@import url('../../../../common/mobile/resources/less/ios/_color-palette.less'); +@import url('../../../../common/mobile/resources/less/ios/_about.less'); + +@import url('ios/_search.less'); +@import url('ios/_icons.less'); + +// Add Container + +#add-table, +#add-shape { + .page { + background-color: #fff; + } +} + +// Table styles + +.table-styles { + .row { + &, li { + margin-bottom: 12px; + } + } + + li { + margin: 0; + padding: 1px; + + img { + width: 70px; + height: 50px; + } + } +} + +// Shapes + +.shapes { + li { + width: 70px; + height: 70px; + margin: 0 1px; + + .thumb { + width: 100%; + height: 100%; + background-color: @themeColor; + } + } +} + +// Charts + +.chart-types { + li { + width: 60px; + height: 60px; + margin: 6px; + + .thumb { + width: 100%; + height: 100%; + background-size: contain; + } + } +} + +// Bullets and numbers + +.bullets, +.numbers { + ul { + margin-top: 10px; + } + + li { + width: 70px; + height: 70px; + margin-right: 1px; + border: 1px solid #c4c4c4; + html.pixel-ratio-2 & { + border: 0.5px solid #c4c4c4; + } + html.pixel-ratio-3 & { + border: 0.33px solid #c4c4c4; + } + + &.active { + // + } + + .thumb { + width: 100%; + height: 100%; + background-color: @white; + background-size: cover; + + label { + width: 100%; + text-align: center; + position: absolute; + top: 34%; + } + } + } +} + +#editor_sdk { + //position: absolute; + //left: 0; +} diff --git a/apps/spreadsheeteditor/mobile/resources/less/app-material.less b/apps/spreadsheeteditor/mobile/resources/less/app-material.less new file mode 100644 index 000000000..595267ff8 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/less/app-material.less @@ -0,0 +1,158 @@ +@import url('../../../../../vendor/framework7/src/less/material/_mixins.less'); +@import url('../../../../../vendor/framework7/src/less/material/_colors-vars.less'); + +// Colors +@themeColor: #5a7dc9; // (64,102,215) +@navBarIconColor: #fff; + +@import url('../../../../../vendor/framework7/src/less/material/intro.less'); +@import url('../../../../../vendor/framework7/src/less/material/grid.less'); +@import url('../../../../../vendor/framework7/src/less/material/views.less'); +@import url('../../../../../vendor/framework7/src/less/material/pages.less'); +@import url('../../../../../vendor/framework7/src/less/material/toolbars.less'); +@import url('../../../../../vendor/framework7/src/less/material/toolbars-pages.less'); +@import url('../../../../../vendor/framework7/src/less/material/searchbar.less'); +@import url('../../../../../vendor/framework7/src/less/material/messagebar.less'); +@import url('../../../../../vendor/framework7/src/less/material/icons.less'); +@import url('../../../../../vendor/framework7/src/less/material/badges.less'); +//@import url('../../../../../vendor/framework7/src/less/material/chips.less'); +@import url('../../../../../vendor/framework7/src/less/material/content-block.less'); +@import url('../../../../../vendor/framework7/src/less/material/lists.less'); +//@import url('../../../../../vendor/framework7/src/less/material/contacts.less'); +@import url('../../../../../vendor/framework7/src/less/material/forms.less'); +@import url('../../../../../vendor/framework7/src/less/material/floating-button.less'); +//@import url('../../../../../vendor/framework7/src/less/material/accordion.less'); +//@import url('../../../../../vendor/framework7/src/less/material/cards.less'); +@import url('../../../../../vendor/framework7/src/less/material/modals.less'); +@import url('../../../../../vendor/framework7/src/less/material/panels.less'); +//@import url('../../../../../vendor/framework7/src/less/material/lazy-load.less'); +@import url('../../../../../vendor/framework7/src/less/material/tabs.less'); +@import url('../../../../../vendor/framework7/src/less/material/messages.less'); +@import url('../../../../../vendor/framework7/src/less/material/statusbar.less'); +@import url('../../../../../vendor/framework7/src/less/material/preloader.less'); +@import url('../../../../../vendor/framework7/src/less/material/progressbar.less'); +//@import url('../../../../../vendor/framework7/src/less/material/pull-to-refresh.less'); +//@import url('../../../../../vendor/framework7/src/less/material/infinite-scroll.less'); +//@import url('../../../../../vendor/framework7/src/less/material/autocomplete.less'); +//@import url('../../../../../vendor/framework7/src/less/material/swiper.less'); +//@import url('../../../../../vendor/framework7/src/less/material/photo-browser.less'); +@import url('../../../../../vendor/framework7/src/less/material/picker.less'); +//@import url('../../../../../vendor/framework7/src/less/material/calendar.less'); +@import url('../../../../../vendor/framework7/src/less/material/notifications.less'); +//@import url('../../../../../vendor/framework7/src/less/material/login-screen.less'); +@import url('../../../../../vendor/framework7/src/less/material/ripple.less'); +@import url('../../../../../vendor/framework7/src/less/material/disabled.less'); + + +@import url('../../../../common/mobile/resources/less/_mixins.less'); +@import url('../../../../common/mobile/resources/less/material/_container.less'); +@import url('../../../../common/mobile/resources/less/material/_dataview.less'); +@import url('../../../../common/mobile/resources/less/material/_listview.less'); +@import url('../../../../common/mobile/resources/less/material/_button.less'); +@import url('../../../../common/mobile/resources/less/material/_contextmenu.less'); +@import url('../../../../common/mobile/resources/less/material/_color-palette.less'); +@import url('../../../../common/mobile/resources/less/material/_about.less'); + +@import url('material/_search.less'); +@import url('material/_icons.less'); + +// Add Container + +#add-table, +#add-shape { + .page { + background-color: #fff; + } +} + +// Table styles + +.table-styles { + .row { + &, li { + margin-bottom: 12px; + } + } + + li { + margin: 0; + padding: 1px; + + img { + width: 70px; + height: 50px; + } + } +} + +// Shapes + +.shapes { + li { + width: 70px; + height: 70px; + margin: 0 1px; + + .thumb { + width: 100%; + height: 100%; + background-color: @themeColor; + } + } +} + +// Charts + +.chart-types { + li { + width: 60px; + height: 60px; + margin: 6px; + + .thumb { + width: 100%; + height: 100%; + background-size: contain; + } + } +} + +// Bullets and numbers + +.bullets, +.numbers { + ul { + margin-top: 10px; + } + + li { + width: 70px; + height: 70px; + margin-right: 1px; + border: 1px solid #c4c4c4; + html.pixel-ratio-2 & { + border: 0.5px solid #c4c4c4; + } + html.pixel-ratio-3 & { + border: 0.33px solid #c4c4c4; + } + + &.active { + // + } + + .thumb { + width: 100%; + height: 100%; + background-color: @white; + background-size: cover; + + label { + width: 100%; + text-align: center; + position: absolute; + top: 34%; + } + } + } +} diff --git a/apps/spreadsheeteditor/mobile/resources/less/ios/_icons.less b/apps/spreadsheeteditor/mobile/resources/less/ios/_icons.less new file mode 100644 index 000000000..dafadb1eb --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/less/ios/_icons.less @@ -0,0 +1,198 @@ +// Icons +i.icon { + &.icon-search { + width: 24px; + height: 24px; + .encoded-svg-background(''); + } + &.icon-burger { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-edit { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-undo { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-redo { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-reader { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-download { + width: 22px; + height: 28px; + .encoded-svg-background(''); + } + &.icon-info { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-plus { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-settings { + width: 24px; + height: 24px; + .encoded-svg-background(''); + } + &.icon-about { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-help { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-versions { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-text-additional { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-text-color { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-text-selection { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-bullets { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-numbers { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-linespacing { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-text-align-center { + width: 22px; + height: 22px; + .encoded-svg-mask(''); + } + &.icon-text-align-jast { + width: 22px; + height: 22px; + .encoded-svg-mask(''); + } + &.icon-text-align-left { + width: 22px; + height: 22px; + .encoded-svg-mask(''); + } + &.icon-text-align-right { + width: 22px; + height: 22px; + .encoded-svg-mask(''); + } + &.icon-de-indent { + width: 22px; + height: 22px; + .encoded-svg-mask(''); + } + &.icon-in-indent { + width: 22px; + height: 22px; + .encoded-svg-mask(''); + } + &.icon-prev { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-next { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-table-add-column-left { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-table-add-column-right { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-table-add-row-above { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-table-add-row-below { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-table-remove-column { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-table-remove-row { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-expand-down { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-pagebreak { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-sectionbreak { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-stringbreak { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-pagenumber { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-link { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/resources/less/ios/_search.less b/apps/spreadsheeteditor/mobile/resources/less/ios/_search.less new file mode 100644 index 000000000..f032af5a0 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/less/ios/_search.less @@ -0,0 +1,107 @@ +// Search + +.tablet { + // Replace mode + .searchbar.document.replace { + .center { + .searchbar-input:first-child { + margin-right: 10px; + } + + .replace { + display: block; + } + } + + .right { + .replace { + display: flex; + margin: 0 10px; + } + } + } + + // Search mode + .searchbar.document { + .center { + width: 100%; + + .replace { + display: none; + } + } + + .right { + .prev { + margin-left: 0; + } + + .replace { + display: none; + } + } + } +} + +.phone { + // Replace mode + .searchbar.document.replace { + height: 88px; + + .left { + margin-top: -44px; + } + + .center { + .searchbar-input { + margin: 8px 0; + } + + .replace { + display: block; + } + } + + .right { + .replace { + display: flex; + } + } + } + + // Search mode + .searchbar.document { + .left, + .center, + .right { + flex-direction: column; + } + + .left { + min-width: 22px; + max-width: 22px; + } + + .center { + width: 100%; + + .replace { + display: none; + } + } + + .right { + > p { + margin: 0; + } + + .replace { + display: none; + } + } + } +} + +.searchbar.document { + background: lighten(@searchbarBg, 10%); +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/resources/less/material/_icons.less b/apps/spreadsheeteditor/mobile/resources/less/material/_icons.less new file mode 100644 index 000000000..321b5376d --- /dev/null +++ b/apps/spreadsheeteditor/mobile/resources/less/material/_icons.less @@ -0,0 +1,224 @@ +// Icons +i.icon { + &.icon-expand-up { + width: 17px; + height: 17px; + .encoded-svg-background(''); + } + &.icon-expand-down { + width: 17px; + height: 17px; + .encoded-svg-background(''); + } + &.icon-search { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-edit { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-reader { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-download { + width: 22px; + height: 28px; + .encoded-svg-background(''); + } + &.icon-info { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-about { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-help { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-versions { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + //&.icon-text-additional { + // width: 22px; + // height: 22px; + // .encoded-svg-background(''); + //} + //&.icon-text-color { + // width: 22px; + // height: 22px; + // .encoded-svg-background(''); + //} + //&.icon-text-selection { + // width: 22px; + // height: 22px; + // .encoded-svg-background(''); + //} + //&.icon-bullets { + // width: 22px; + // height: 22px; + // .encoded-svg-background(''); + //} + //&.icon-numbers { + // width: 22px; + // height: 22px; + // .encoded-svg-background(''); + //} + //&.icon-linespacing { + // width: 22px; + // height: 22px; + // .encoded-svg-background(''); + //} + &.icon-text-align-center { + width: 22px; + height: 22px; + .encoded-svg-mask(''); + } + &.icon-text-align-jast { + width: 22px; + height: 22px; + .encoded-svg-mask(''); + } + &.icon-text-align-left { + width: 22px; + height: 22px; + .encoded-svg-mask(''); + } + &.icon-text-align-right { + width: 22px; + height: 22px; + .encoded-svg-mask(''); + } + &.icon-de-indent { + width: 22px; + height: 22px; + .encoded-svg-mask(''); + } + &.icon-in-indent { + width: 22px; + height: 22px; + .encoded-svg-mask(''); + } + &.icon-table-add-column-left { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-table-add-column-right { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-table-add-row-above { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-table-add-row-below { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-table-remove-column { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-table-remove-row { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-pagebreak { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-sectionbreak { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-stringbreak { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-pagenumber { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-link { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } +} + +// Overwrite color for toolbar +.navbar { + i.icon { + &.icon-undo { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-redo { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-search { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-burger { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-plus { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-edit { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-settings { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + &.icon-prev { + width: 20px; + height: 20px; + .encoded-svg-background(''); + } + &.icon-next { + width: 20px; + height: 20px; + .encoded-svg-background(''); + } + &.icon-expand-down { + width: 22px; + height: 22px; + .encoded-svg-background(''); + } + } +} \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/resources/less/material/_search.less b/apps/spreadsheeteditor/mobile/resources/less/material/_search.less new file mode 100644 index 000000000..e69de29bb