Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.

overrides/settings.gaiamobile.org/js/panels/display/panel.js

@@ -0,0 +1,133 @@
+
+/**
+ * Update setting value based on slider position.
+ * Base on sound panel's implementation.
+ *
+ * @module SliderHandler
+ */
+define('panels/display/slider_handler',["require"],function(require) {
+  'use strict';
+
+  const INTERVAL = 300;
+
+  var SliderHandler = function() {
+    this._element = null;
+    this._key = '';
+    this._isFirstInput = false;
+    this._intervalID = null;
+  };
+
+  SliderHandler.prototype = {
+    /**
+     * initialization
+     *
+     * The sliders listen to input, touchstart and touchend events to fit
+     * the ux requirements, and when the user tap or drag the sliders, the
+     * sequence of the events is:
+     * touchstart -> input -> input(more if dragging) -> touchend -> input
+     *
+     * @access public
+     * @memberOf SliderHandler.prototype
+     * @param  {Object} element html elements
+     * @param  {String} settings key
+     */
+    init: function d_init(element, key) {
+      this._element = element;
+      this._key = key;
+
+      this._boundSetSliderValue = function(value) {
+        this._setSliderValue(value);
+      }.bind(this);
+
+      // We can't use the input change event because it does not fire
+      // when the slider is being dragged, and will only fire when released.
+      this._element.addEventListener('touchstart',
+        this._touchStartHandler.bind(this));
+      this._element.addEventListener('input',
+        this._inputHandler.bind(this));
+      this._element.addEventListener('change',
+        this._touchEndHandler.bind(this));
+      this._element.addEventListener('touchend',
+        this._touchEndHandler.bind(this));
+    },
+
+    /**
+     * Change slider's value
+     *
+     * @access private
+     * @memberOf SliderHandler.prototype
+     * @param {Number} value slider value
+     */
+    _setSliderValue: function d_setSliderValue(value) {
+      this._element.value = value;
+    },
+
+    /**
+     * Handle touchstart event
+     *
+     * @access private
+     * @memberOf SliderHandler.prototype
+     */
+    _touchStartHandler: function d_touchStartHandler(event) {
+      this._isFirstInput = true;
+    },
+
+    /**
+     * Update setting
+     *
+     * @access private
+     * @memberOf SliderHandler.prototype
+     */
+    _updateSetting: function d_updateSetting() {
+      var value = this._element.valueAsNumber;
+      if (!Number.isFinite(value)) return;
+      var settingObject = {};
+      settingObject[this._key] = value;
+
+      // Only set the new value if it does not equal to the previous one
+      if (value !== this._previous) {
+        navigator.mozSettings.createLock().set(settingObject);
+        this._previous = value;
+      }
+    },
+
+    /**
+     * Handle input event
+     *
+     * The mozSettings api is not designed to call rapidly, so we use
+     * setInterval() as a timer to ease the number of calling, or we
+     * will see the queued callbacks try to update the slider's value
+     * which we are unable to avoid and make bad ux for the users.
+     *
+     * @access private
+     * @memberOf SliderHandler.prototype
+     */
+    _inputHandler: function d_inputHandler(event) {
+      if (!this._intervalID) {
+        this._isFirstInput = false;
+        this._updateSetting();
+        this._intervalID =
+          setInterval(this._updateSetting.bind(this), INTERVAL);
+      }
+    },
+
+    /**
+     * Handle touchend event
+     *
+     * @access private
+     * @memberOf SliderHandler.prototype
+     */
+    _touchEndHandler: function d_touchEndHandler(event) {
+      clearInterval(this._intervalID);
+      this._intervalID = null;
+      this._updateSetting();
+    }
+  };
+
+  return function ctor_sliderHandler() {
+    return new SliderHandler();
+  };
+});
+
+define('panels/display/display',['require','shared/settings_listener','panels/display/slider_handler'],function(require){'use strict';var SettingsListener=require('shared/settings_listener');var SliderHandler=require('panels/display/slider_handler');const AUTO_BRIGHTNESS_SETTING='screen.automatic-brightness';const SCREEN_BRIGHTNESS='screen.brightness';var Display=function(){this.elements=null;};Display.prototype={init:function d_init(elements,data){this.elements=elements;this.initBrightnessItems(data);SliderHandler().init(elements.brightnessManualInput,SCREEN_BRIGHTNESS);},initBrightnessItems:function d_init_brightness_items(data){var brightnessAuto=this.elements.brightnessAuto;var brightnessAutoCheckbox=this.elements.brightnessAutoCheckbox;var brightnessManual=this.elements.brightnessManual;var brightnessManualInput=this.elements.brightnessManualInput;if(data.ambientLight){brightnessAuto.hidden=false;SettingsListener.observe(AUTO_BRIGHTNESS_SETTING,false,function(value){brightnessAutoCheckbox.checked=value;brightnessManual.hidden=value;}.bind(this));}else{brightnessAuto.hidden=true;brightnessManual.hidden=false;var cset={};cset[AUTO_BRIGHTNESS_SETTING]=false;SettingsListener.getSettingsLock().set(cset);}
+SettingsListener.observe(SCREEN_BRIGHTNESS,0.5,function(value){brightnessManualInput.value=value;}.bind(this));}};return function ctor_display(){return new Display();};});define('panels/display/panel',['require','modules/settings_panel','panels/display/display','shared/lazy_loader'],function(require){'use strict';var SettingsPanel=require('modules/settings_panel');var DisplayModule=require('panels/display/display');var LazyLoader=require('shared/lazy_loader');var displayElements={};return function ctor_display_panel(){var display=DisplayModule();return SettingsPanel({onInit:function dp_onInit(panel){displayElements={brightnessManual:panel.querySelector('.brightness-manual'),brightnessManualInput:panel.querySelector('.brightness-manual input'),brightnessAuto:panel.querySelector('.brightness-auto'),brightnessAutoCheckbox:panel.querySelector('.brightness-auto gaia-checkbox')};LazyLoader.getJSON('/resources/device-features.json').then(function(data){display.init(displayElements,data);});}});};});

overrides/settings.gaiamobile.org/js/panels/display/slider_handler.js

@@ -0,0 +1,129 @@
+/**
+ * Update setting value based on slider position.
+ * Base on sound panel's implementation.
+ *
+ * @module SliderHandler
+ */
+define(function(require) {
+  'use strict';
+
+  const INTERVAL = 300;
+
+  var SliderHandler = function() {
+    this._element = null;
+    this._key = '';
+    this._isFirstInput = false;
+    this._intervalID = null;
+  };
+
+  SliderHandler.prototype = {
+    /**
+     * initialization
+     *
+     * The sliders listen to input, touchstart and touchend events to fit
+     * the ux requirements, and when the user tap or drag the sliders, the
+     * sequence of the events is:
+     * touchstart -> input -> input(more if dragging) -> touchend -> input
+     *
+     * @access public
+     * @memberOf SliderHandler.prototype
+     * @param  {Object} element html elements
+     * @param  {String} settings key
+     */
+    init: function d_init(element, key) {
+      this._element = element;
+      this._key = key;
+
+      this._boundSetSliderValue = function(value) {
+        this._setSliderValue(value);
+      }.bind(this);
+
+      // We can't use the input change event because it does not fire
+      // when the slider is being dragged, and will only fire when released.
+      this._element.addEventListener('touchstart',
+        this._touchStartHandler.bind(this));
+      this._element.addEventListener('input',
+        this._inputHandler.bind(this));
+      this._element.addEventListener('change',
+        this._touchEndHandler.bind(this));
+      this._element.addEventListener('touchend',
+        this._touchEndHandler.bind(this));
+    },
+
+    /**
+     * Change slider's value
+     *
+     * @access private
+     * @memberOf SliderHandler.prototype
+     * @param {Number} value slider value
+     */
+    _setSliderValue: function d_setSliderValue(value) {
+      this._element.value = value;
+    },
+
+    /**
+     * Handle touchstart event
+     *
+     * @access private
+     * @memberOf SliderHandler.prototype
+     */
+    _touchStartHandler: function d_touchStartHandler(event) {
+      this._isFirstInput = true;
+    },
+
+    /**
+     * Update setting
+     *
+     * @access private
+     * @memberOf SliderHandler.prototype
+     */
+    _updateSetting: function d_updateSetting() {
+      var value = this._element.valueAsNumber;
+      if (!Number.isFinite(value)) return;
+      var settingObject = {};
+      settingObject[this._key] = value;
+
+      // Only set the new value if it does not equal to the previous one
+      if (value !== this._previous) {
+        navigator.mozSettings.createLock().set(settingObject);
+        this._previous = value;
+      }
+    },
+
+    /**
+     * Handle input event
+     *
+     * The mozSettings api is not designed to call rapidly, so we use
+     * setInterval() as a timer to ease the number of calling, or we
+     * will see the queued callbacks try to update the slider's value
+     * which we are unable to avoid and make bad ux for the users.
+     *
+     * @access private
+     * @memberOf SliderHandler.prototype
+     */
+    _inputHandler: function d_inputHandler(event) {
+      if (!this._intervalID) {
+        this._isFirstInput = false;
+        this._updateSetting();
+        this._intervalID =
+          setInterval(this._updateSetting.bind(this), INTERVAL);
+      }
+    },
+
+    /**
+     * Handle touchend event
+     *
+     * @access private
+     * @memberOf SliderHandler.prototype
+     */
+    _touchEndHandler: function d_touchEndHandler(event) {
+      clearInterval(this._intervalID);
+      this._intervalID = null;
+      this._updateSetting();
+    }
+  };
+
+  return function ctor_sliderHandler() {
+    return new SliderHandler();
+  };
+});

overrides/settings.gaiamobile.org/js/panels/wifi/wifi_network_list.js

@@ -0,0 +1,259 @@
+define(function(require) {
+  'use strict';
+
+  var DialogService = require('modules/dialog_service');
+  var WifiUtils = require('modules/wifi_utils');
+  var WifiHelper = require('shared/wifi_helper');
+  var WifiContext = require('modules/wifi_context');
+  var wifiManager = WifiHelper.getWifiManager();
+
+  var WifiNetworkList = function(elements) {
+    var list = elements.wifiAvailableNetworks;
+
+    var wifiNetworkList = {
+      _scanRate: 5000, // 5s after last scan results
+      _scanning: false,
+      _autoscan: false,
+      _index: {}, // index of all scanned networks
+      _networks: {},
+      _list: elements.wifiAvailableNetworks,
+      clear: function(addScanningItem) {
+        // clear the network list
+        this._index = {};
+        this._networks = {};
+
+        // remove all items except the text expl.
+        // and the "search again" button
+        var wifiItems = list.querySelectorAll('li:not([data-state])');
+        var len = wifiItems.length;
+        for (var i = len - 1; i >= 0; i--) {
+          list.removeChild(wifiItems[i]);
+        }
+
+        list.dataset.state = addScanningItem ? 'on' : 'off';
+      },
+      scan: function() {
+        window.performance.measure('settingsPanelWifiVisible', 'wifiListStart');
+
+        // scan wifi networks and display them in the list
+        var self = this;
+        if (this._scanning) {
+          return;
+        }
+
+        // stop auto-scanning if wifi disabled or the app is hidden
+        if (!wifiManager.enabled || document.hidden) {
+          this._scanning = false;
+          return;
+        }
+
+        this._scanning = true;
+        var req = WifiHelper.getAvailableAndKnownNetworks();
+
+        req.onsuccess = function onScanSuccess() {
+          self.clear(false);
+          var allNetworks = req.result;
+          var network;
+
+          for (var i = 0; i < allNetworks.length; ++i) {
+            network = allNetworks[i];
+            var key = WifiUtils.getNetworkKey(network);
+            // keep connected network first, or select the highest strength
+            if (!self._networks[key] || network.connected) {
+              self._networks[key] = network;
+            } else {
+              if (!self._networks[key].connected &&
+                network.relSignalStrength >
+                  self._networks[key].relSignalStrength) {
+                    self._networks[key] = network;
+              }
+            }
+          }
+
+          var networkKeys = Object.getOwnPropertyNames(self._networks);
+
+          // display network list
+          if (networkKeys.length) {
+            // sort networks by name and signal strength
+            networkKeys.sort(function(a, b) {
+              let barDelta =
+                WifiHelper.getSignalLevel(self._networks[b]) -
+                WifiHelper.getSignalLevel(self._networks[a]);
+              // If two networks have the same signal strength,
+              // then sort by name.
+              return (barDelta ? barDelta : a.localeCompare(b));
+            });
+
+            // add detected networks
+            for (var j = 0; j < networkKeys.length; j++) {
+              network = self._networks[networkKeys[j]];
+              var listItem = WifiUtils.newListItem({
+                network: network,
+                onClick: self._toggleNetwork.bind(self),
+                showNotInRange: true
+              });
+              // put connected network on top of list
+              if (WifiHelper.isConnected(network)) {
+                list.insertBefore(listItem,
+                  elements.infoItem.nextSibling);
+              } else {
+                list.insertBefore(listItem, elements.scanItem);
+              }
+              // add composited key to index
+              self._index[networkKeys[j]] = listItem;
+            }
+          } else {
+            // display a "no networks found" message if necessary
+            list.insertBefore(
+              WifiUtils.newExplanationItem('noNetworksFound'),
+                elements.scanItem);
+          }
+
+          // display the "Search Again" button
+          list.dataset.state = 'ready';
+
+          window.performance.measure('settingsPanelWifiReady', 'wifiListStart');
+
+          // auto-rescan if requested
+          if (self._autoscan) {
+            window.setTimeout(self.scan.bind(self), self._scanRate);
+          }
+
+          self._scanning = false;
+        };
+
+        req.onerror = function onScanError(error) {
+          self._scanning = false;
+          self.clear(false);
+          var explanation = document.createElement('li');
+          explanation.className = 'explanation';
+          explanation.setAttribute('role', 'status');
+          explanation.textContent = document.documentElement.lang.startsWith('fr') ?
+            'Recherche Wi-Fi indisponible. Réessayez dans un instant.' :
+            'Wi-Fi scan unavailable. Try again in a moment.';
+          list.insertBefore(explanation, elements.scanItem);
+          list.dataset.state = 'ready';
+          console.warn('Wi-Fi scan failed', req.error);
+          // The existing Search Again button lets the user retry. Do not turn
+          // a permanent broker failure into an endless invisible retry loop.
+        };
+      },
+      getWpsAvailableNetworks: function() {
+        // get WPS available networks
+        var ssids = Object.getOwnPropertyNames(this._networks);
+        var wpsAvailableNetworks = [];
+        for (var i = 0; i < ssids.length; i++) {
+          var network = this._networks[ssids[i]];
+          if (WifiHelper.isWpsAvailable(network)) {
+            wpsAvailableNetworks.push(network);
+          }
+        }
+        return wpsAvailableNetworks;
+      },
+      set autoscan(value) {
+        this._autoscan = value;
+      },
+      get autoscan() {
+        return this._autoscan;
+      },
+      get scanning() {
+        return this._scanning;
+      },
+      _toggleNetwork: function(network) {
+        var self = this;
+
+        var keys = WifiHelper.getSecurity(network);
+        var security = (keys && keys.length) ? keys.join(', ') : '';
+        var sl = WifiHelper.getSignalLevel(network);
+
+        if (WifiHelper.isConnected(network)) {
+          // online: show status + offer to disconnect
+          DialogService.show('wifi-status', {
+            sl: sl,
+            network: network,
+            security: security,
+          }).then(function(result) {
+            var type = result.type;
+            if (type === 'submit') {
+              WifiContext.forgetNetwork(network, function() {
+                self.scan();
+              });
+            }
+          });
+        } else if (network.password && (network.password == '*')) {
+          // offline, known network (hence the '*' password value):
+          // no further authentication required.
+          WifiHelper.setPassword(network);
+          WifiContext.associateNetwork(network);
+        } else {
+          // offline, unknown network: propose to connect
+          var key = WifiHelper.getKeyManagement(network);
+          switch (key) {
+            case 'WEP':
+            case 'WPA-PSK':
+            case 'WPA-EAP':
+              DialogService.show('wifi-auth', {
+                sl: sl,
+                security: security,
+                network: network,
+              }).then(function(result) {
+                var type = result.type;
+                var authOptions = result.value;
+                if (type === 'submit') {
+                  WifiHelper.setPassword(
+                    network,
+                    authOptions.password,
+                    authOptions.identity,
+                    authOptions.eap,
+                    authOptions.authPhase2,
+                    authOptions.certificate
+                  );
+                  WifiContext.associateNetwork(network);
+                }
+              });
+              break;
+            default:
+              WifiContext.associateNetwork(network);
+              break;
+          }
+        }
+      }
+    };
+
+    // networkStatus has one of the following values:
+    // connecting, associated, connected, connectingfailed, disconnected.
+    WifiContext.addEventListener('wifiEnabled', function(event) {
+      WifiUtils.updateListItemStatus({
+        listItems: wifiNetworkList._index,
+        activeItemDOM: list.querySelector('.active'),
+        network: event.network,
+        networkStatus: event.status
+      });
+    });
+
+    WifiContext.addEventListener('wifiStatusChange', function(event) {
+      WifiUtils.updateListItemStatus({
+        listItems: wifiNetworkList._index,
+        activeItemDOM: list.querySelector('.active'),
+        network: event.network,
+        networkStatus: event.status
+      });
+    });
+
+    WifiContext.addEventListener('wifiConnectionInfoUpdate', function(event) {
+      WifiUtils.updateNetworkSignal(event.network, event.relSignalStrength);
+    });
+
+    WifiContext.addEventListener('wifiNetworkForgotten', event => {
+      var networkKey = WifiUtils.getNetworkKey(event.network);
+      var forgottenNetwork = wifiNetworkList._networks[networkKey];
+      if (forgottenNetwork) {
+        forgottenNetwork.password = '';
+      }
+    });
+
+    return wifiNetworkList;
+  };
+
+  return WifiNetworkList;
+});

overrides/settings.gaiamobile.org/shared/elements/gaia_checkbox/style.css

@@ -0,0 +1,60 @@
+gaia-checkbox {
+  display: inline-block;
+  width: 100%;
+}
+#checkbox {
+  display: block;
+  width: 100%;
+  
+  height: 100%;
+  position: relative;
+  background: none;
+}
+#checkbox span {
+  font-size: 1.9rem;
+  font-weight: normal;
+  color: var(--label-color);
+  line-height: 3rem;
+  box-sizing: border-box;
+  display: block;
+  min-width: 2.2rem;
+  min-height: 2.2rem;
+  width: 100%;
+  padding-inline-end: 2.2rem;
+  
+  white-space: normal;
+}
+#checkbox.inline {
+  display: inline-block;
+  vertical-align: middle;
+}
+#checkbox:not(.invisible) span:after {
+  content: '';
+  position: absolute;
+  offset-inline-end: 0;
+  top: 50%;
+  margin: -1.2rem 0 0;
+  margin-inline-start: -1.2rem;
+  width: 2.2rem;
+  height: 2.2rem;
+}
+#checkbox.inline span {
+  padding-inline-start: 3rem;
+  padding-inline-end: 0;
+  height: auto;
+}
+#checkbox.inline span:after {
+  offset-inline-start: 1.2rem;
+  offset-inline-end: unset;
+  margin: -1.2rem 0 0;
+  margin-inline-start: -1.2rem;
+}
+#checkbox:not(.invisible) span:after {
+  background: image-set(url("images/default.png") 1x, url("images/default@1.5x.png") 1.5x, url("images/default@2x.png") 2x, url("images/default@2.25x.png") 2.25x) no-repeat center top / 2.2rem auto;
+}
+#checkbox.checked span:after {
+  background-position: center bottom;
+}
+#checkbox.danger span:after {
+  background-image: image-set(url("images/danger.png") 1x, url("images/danger@1.5x.png") 1.5x, url("images/danger@2x.png") 2x, url("images/danger@2.25x.png") 2.25x);
+}

overrides/settings.gaiamobile.org/shared/elements/gaia_menu/style.css

@@ -0,0 +1,270 @@
+
+:-moz-dir(ltr) [dir] { text-align: left; }
+:-moz-dir(rtl) [dir] { text-align: right; }
+gaia-menu {
+  background-color: #2d2d2d;
+  overflow: hidden;
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0 0 7rem;
+  
+  font-size: 0;
+  color: #fff;
+  display: block;
+  transition: transform ease-in-out var(--transition-duration),
+              visibility var(--transition-duration);
+}
+gaia-menu[hidden] {
+  transform: translateY(100%);
+  visibility: hidden;
+}
+gaia-menu:before {
+  content: '';
+  display: inline-block;
+  vertical-align: top;
+  width: 0.1rem;
+  height: 100%;
+  margin-inline-start: -0.1rem;
+}
+header {
+  -moz-box-sizing: border-box;
+  font-size: 1.6rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  height: 5rem;
+  line-height: 4.9rem;
+  color: #fff;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+  font-weight: normal;
+  padding: 0 3rem;
+  border-bottom: 0.1rem solid #616262;
+}
+header h1 {
+  font-size: 1.6rem;
+  line-height: 4.9rem;
+  color: #fff;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+  margin: 0;
+  height: 100%;
+  font-weight: normal;
+}
+header menu.toolbar {
+  height: 100%;
+  margin: 0 -3rem;
+  margin-inline-start: 1rem;
+  padding: 0;
+}
+header:-moz-dir(ltr) menu.toolbar { float: right; }
+header:-moz-dir(rtl) menu.toolbar { float: left; }
+header menu.toolbar a,
+header menu.toolbar button {
+  -moz-box-sizing: border-box;
+  position: relative;
+  width: auto;
+  min-width: 5rem;
+  height: 4.9rem;
+  margin-bottom: 0;
+  padding: 0 1rem;
+  border-radius: 0;
+  line-height: 4.9rem;
+  background: none;
+  text-align: center;
+  text-shadow: none;
+  z-index: 5;
+}
+header:-moz-dir(ltr) menu.toolbar a,
+header:-moz-dir(ltr) menu.toolbar button {
+  float: left;
+}
+header:-moz-dir(rtl) menu.toolbar a,
+header:-moz-dir(rtl) menu.toolbar button {
+  float: right;
+}
+header a,
+header button {
+  border: none;
+  padding: 0;
+  overflow: hidden;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 1.1em;
+  color: #fff;
+  border-radius: 0;
+  text-decoration: none;
+}
+button::-moz-focus-inner {
+  outline: none;
+  border: none;
+}
+header a:active .icon:after,
+header button:active .icon:after,
+header menu.toolbar a:active,
+header menu.toolbar button:active  {
+  background: #008aaa;
+}
+header menu.toolbar a[aria-disabled="true"],
+header menu.toolbar button[disabled]  {
+  opacity: 0.5;
+  pointer-events: none;
+}
+header .icon {
+  position: relative;
+  float: none;
+  display: inline-block;
+  vertical-align: top;
+  width: 4rem;
+  height: 4.9rem;
+  margin: 0 -1rem;
+  background: transparent no-repeat center center / 3rem auto;
+  font-size: 0;
+  overflow: hidden;
+}
+header .icon.icon-close {
+  background-image: image-set(url("images/icons/close.png") 1x, url("images/icons/close@1.5x.png") 1.5x, url("images/icons/close@2x.png") 2x, url("images/icons/close@2.25x.png") 2.25x);
+}
+header .icon.icon-back {
+  background-image: image-set(url("images/icons/back.png") 1x, url("images/icons/back@1.5x.png") 1.5x, url("images/icons/back@2x.png") 2x, url("images/icons/back@2.25x.png") 2.25x);
+}
+header > button,
+header > a {
+  width: 5rem;
+  height: 4.9rem;
+  background: none;
+  overflow: visible;
+  margin: 0 -1rem;
+  margin-inline-start: -3rem;
+  position: relative;
+}
+header:-moz-dir(ltr) > button,
+header:-moz-dir(ltr) > a {
+  float: left;
+}
+header:-moz-dir(rtl) > button,
+header:-moz-dir(rtl) > a {
+  float: right;
+}
+header > button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+header > button .icon,
+header > a .icon {
+  position: static;
+  display: block;
+  width: 3rem;
+  height: 4.9rem;
+  margin: 0;
+  overflow: visible;
+  font-size: 0;
+}
+header > button .icon:after,
+header > a .icon:after {
+  content: "";
+  position: absolute;
+  offset-inline-start: 0;
+  top: 0;
+  z-index: -1;
+  width: 3rem;
+  height: 4.9rem;
+}
+section {
+  color: #fff;
+  position: absolute;
+  top: 7rem;
+  left: 1.5rem;
+  right: 1.5rem;
+  bottom: 2rem;
+  font-size: 1.6rem;
+  overflow: scroll;
+}
+menu {
+  margin: 0;
+  padding: 0;
+  max-height: calc(100% - 13.5rem); 
+  height: auto;
+  padding-top: 1.5rem;
+  overflow: auto;
+  width: auto;
+  border: none;
+  background: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 7rem;
+}
+button {
+  width: calc(100% - 3rem);
+  height: 4rem;
+  -moz-box-sizing: border-box;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  font-weight: normal;
+  line-height: 4rem;
+  outline: none;
+  font-size: 1.6rem;
+  text-shadow: none;
+  padding: 0 1.2rem;
+  margin: 0 1.5rem 1rem;
+  background: rgba(87, 87, 87, 0.8);
+  border: none;
+  border-radius: 0;
+  position: relative;
+  color: #fff;
+  font-family: sans-serif;
+  font-style: italic;
+}
+button:-moz-dir(ltr) { text-align: left; }
+button:-moz-dir(rtl) { text-align: right; }
+span.gaia-menu-cancel {
+  position: fixed;
+  width: 100%;
+  background: #4d4d4d;
+  height: 7rem;
+  offset-inline-start: 0;
+  bottom: 0;
+}
+span.gaia-menu-cancel button {
+  position: fixed;
+  bottom: 0;
+  offset-inline-start: 0;
+  color: #333;
+  background: #d8d8d8;
+  text-align: center;
+  border: none;
+  margin-bottom: 1.5rem;
+  border-radius: 2rem;
+}
+button:nth-last-child(2) {
+  margin-bottom: 1.5rem;
+}
+button:active,
+span.gaia-menu-cancel button:active {
+  background: #00aacc;
+  color: #fff;
+}
+button[disabled] {
+  background-color: rgba(87, 87, 87, 0.8);
+  color: rgba(255, 255, 255, 0.4);
+  opacity: 0.5;
+  pointer-events: none;
+}
+button[disabled]:last-child {
+  background-color: #e7e7e7;
+  color: #a6a6a6;
+  opacity: 1;
+}

overrides/settings.gaiamobile.org/shared/elements/gaia_radio/style.css

@@ -0,0 +1,86 @@
+gaia-radio {
+  display: inline-block;
+  width: 100%;
+}
+#radio {
+  display: inline-block;
+  vertical-align: middle;
+  width: 100%;
+  position: relative;
+  background: none;
+}
+gaia-radio.inline,
+#radio.inline {
+  width: 5rem;
+  height: 100%;
+}
+#radio span {
+  font-size: 1.9rem;
+  color: var(--label-color);
+  padding: 1rem 0;
+  padding-inline-end: 2.4rem;
+  line-height: 3rem;
+  box-sizing: border-box;
+  display: block;
+  
+  white-space: normal;
+  word-wrap: break-word;
+}
+#radio.truncate span {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+#radio span:after {
+  content: '';
+  position: absolute;
+  offset-inline-end: 0;
+  top: 50%;
+  margin: -1.1rem 0 0;
+  margin-inline-start: -1.1rem;
+  width: 2.2rem;
+  height: 2.2rem;
+  background: image-set(url("images/default.png") 1x, url("images/default@1.5x.png") 1.5x, url("images/default@2x.png") 2x, url("images/default@2.25x.png") 2.25x) no-repeat center top / 2.2rem auto;
+}
+#radio.checked span:after {
+  background-position: center bottom;
+}
+#radio.danger span:after {
+  background-image: image-set(url("images/danger.png") 1x, url("images/danger@1.5x.png") 1.5x, url("images/danger@2x.png") 2x, url("images/danger@2.25x.png") 2.25x);
+}
+#radio.checkone span:after {
+  background: none;
+}
+#radio.checkone.checked span:after {
+  background: image-set(url("images/checked.png") 1x, url("images/checked@1.5x.png") 1.5x, url("images/checked@2x.png") 2x, url("images/checked@2.25x.png") 2.25x) no-repeat right center / 100%;
+}
+#radio.checkone.checked span {
+  font-weight: 500;
+}
+#radio.split .divider {
+  content: '';
+  position: absolute;
+  background-color: #E6E6E3;
+  offset-inline-end: 3.5rem;
+  width: 0.1rem;
+  height: calc(100% - 1rem);
+  top: 0.5rem;
+}
+gaia-radio.split label {
+  display: block;
+  width: 100%;
+}
+#radio div.details {
+  position: relative;
+  top: -1.5rem;
+  display: block;
+  margin: 0;
+  padding-top: 0.5rem;
+  -moz-padding-start: 0;
+  -moz-padding-end: 8rem;
+  font-size: 1.4rem;
+  line-height: 1.6rem;
+  color: #505859;
+  font-style: normal;
+  white-space: normal;
+}

overrides/settings.gaiamobile.org/shared/elements/gaia_switch/style.css

@@ -0,0 +1,91 @@
+gaia-switch {
+  display: inline-block;
+  width: 100%;
+}
+#switch {
+  display: inline-block;
+  vertical-align: middle;
+  width: 100%;
+  position: relative;
+  background: none;
+}
+#switch span {
+  font-size: 1.9rem;
+  color: var(--label-color);
+  padding: 1rem 0;
+  line-height: 3rem;
+  box-sizing: border-box;
+  display: block;
+  
+  white-space: normal;
+}
+#switch span:-moz-dir(ltr) { float: left; }
+#switch span:-moz-dir(rtl) { float: right; }
+#switch span:not(:empty) {
+  padding-inline-end: 6rem;
+}
+#switch input {
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  offset-inline-start: 0;
+}
+#switch input:checked ~ span::after {
+  background-position: center bottom;
+}
+#switch input ~ span::after {
+  content: '';
+  position: absolute;
+  offset-inline-end: 0;
+  top: 2.5rem;
+  width: 6rem;
+  margin: -1.4rem 0 0;
+  height: 2.7rem;
+  border-radius: 1.35rem;
+  overflow: hidden;
+  background-color: #e6e6e6;
+  background-image: image-set(url("images/background_off.png") 1x, url("images/background_off@1.5x.png") 1.5x, url("images/background_off@2.25x.png") 2.25x);
+  background-repeat: no-repeat;
+  background-size: 9.2rem 2.7rem;
+  transition: background 0.2s ease;
+}
+#switch input ~ span:-moz-dir(ltr)::after { background-position: -3.2rem 0; }
+#switch input ~ span:-moz-dir(rtl)::after { background-position: 0 0; }
+#switch input:checked ~ span:-moz-dir(ltr)::after {
+  background-image: image-set(url("images/background.png") 1x, url("images/background@1.5x.png") 1.5x);
+  background-position: 0 0;
+}
+#switch input:checked ~ span:-moz-dir(rtl)::after {
+  background-image: image-set(url("images/background_rtl.png") 1x, url("images/background_rtl@1.5x.png") 1.5x);
+  background-position: -3.2rem 0;
+}
+#switch input:disabled ~ span::after {
+  opacity: 0.4;
+}
+#switch input.uninit ~ span::after {
+  transition: none;
+}
+#switch div.details {
+  clear: both;
+  position: relative;
+  top: -1.5rem;
+  display: block;
+  margin: 0;
+  padding-top: 0.5rem;
+  padding-inline-start: 0;
+  padding-inline-end: 8rem;
+  font-size: 1.4rem;
+  line-height: 1.6rem;
+  color: #505859;
+  font-style: normal;
+  white-space: normal;
+}
+gaia-switch a {
+  position: relative;
+  top: -0.8rem;
+  font-size: 1.7rem;
+  line-height: 2.4rem;
+  font-weight: 400;
+  color: #35679a;
+}

overrides/settings.gaiamobile.org/shared/style/headers.css

@@ -0,0 +1,278 @@
+
+section[role="region"] > header:first-child {
+  position: relative;
+  display: block;
+  z-index: 10;
+  padding: 0;
+  height: 5rem;
+  border: none;
+}
+section[role="region"] > header:first-child h1 {
+  font-size: 2.3rem;
+  line-height: 5rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+  margin: 0;
+  padding: 0 1rem;
+  height: 100%;
+  font-weight: 300;
+  font-style: italic;
+  text-align: center;
+}
+section[role="region"] > header:first-child h1 em {
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 1em;
+  font-style: normal;
+}
+section[role="region"] > header:first-child menu {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+html[dir="ltr"] section[role="region"] > header:first-child menu {
+  float: right;
+}
+html[dir="rtl"] section[role="region"] > header:first-child menu {
+  float: left;
+}
+section[role="region"] > header:first-child a,
+section[role="region"] > header:first-child button {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  overflow: hidden;
+  min-width: 5rem;
+  width: auto;
+  height: 5rem;
+  border: none;
+  background: none;
+  padding: 0 1rem;
+  margin: 0;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 5rem;
+  border-radius: 0;
+  text-decoration: none;
+  text-align: center;
+  text-shadow: none;
+  font-style: italic;
+}
+html[dir="ltr"] section[role="region"] > header:first-child a,
+html[dir="ltr"] section[role="region"] > header:first-child button {
+  float: left;
+}
+html[dir="rtl"] section[role="region"] > header:first-child a,
+html[dir="rtl"] section[role="region"] > header:first-child button {
+  float: right;
+}
+section[role="region"] > header:first-child a:focus {
+  outline: none;
+}
+section[role="region"] > header:first-child button::-moz-focus-inner {
+  outline: none;
+  border: none;
+  margin-top: -0.2rem; 
+  padding: 0;
+}
+section[role="region"] > header:first-child a[aria-disabled="true"],
+section[role="region"] > header:first-child button[disabled] {
+  opacity: 0.3;
+  pointer-events: none;
+}
+section[role="region"] > header:first-child .icon {
+  display: block;
+  width: 3rem;
+  height: 5rem;
+  background: transparent no-repeat center / 3rem auto;
+  font-size: 0;
+}
+section[role="region"] > header {
+  z-index: 0;
+  height: auto;
+}
+section[role="region"] header h2 {
+  margin: 0;
+  padding: 0.8rem 3rem;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 1.8rem;
+}
+section[role="region"] > header:first-child {
+  color: #fff;
+  background-color: #f97c17;
+}
+section[role="region"] > header:first-child h1 {
+  color: #fff;
+}
+section[role="region"] > header:first-child a,
+section[role="region"] > header:first-child button {
+  color: rgba(0,0,0,0.6);
+}
+section[role="region"] > header:first-child a:active,
+section[role="region"] > header:first-child button:active,
+section[role="region"] > header:first-child a:hover,
+section[role="region"] > header:first-child button:hover {
+  background-color: rgba(0,0,0,0.07);
+}
+section[role="region"] > header:first-child a:focus,
+section[role="region"] > header:first-child button:focus {
+  background-color: transparent;
+}
+section[role="region"] > header:first-child .icon-add {
+  background-image: image-set(url("headers/images/icons/add.png") 1x, url("headers/images/icons/add@1.5x.png") 1.5x, url("headers/images/icons/add@2x.png") 2x, url("headers/images/icons/add@2.25x.png") 2.25x);
+}
+section[role="region"] > header:first-child .icon-compose {
+  background-image: image-set(url("headers/images/icons/compose.png") 1x, url("headers/images/icons/compose@1.5x.png") 1.5x, url("headers/images/icons/compose@2x.png") 2x, url("headers/images/icons/compose@2.25x.png") 2.25x);
+}
+html[dir="ltr"] section[role="region"] > header:first-child .icon-edit {
+  background-image: image-set(url("headers/images/icons/edit.png") 1x, url("headers/images/icons/edit@1.5x.png") 1.5x, url("headers/images/icons/edit@2x.png") 2x, url("headers/images/icons/edit@2.25x.png") 2.25x);
+}
+html[dir="rtl"] section[role="region"] > header:first-child .icon-edit {
+  background-image: image-set(url("headers/images/icons/edit-rtl.png") 1x, url("headers/images/icons/edit-rtl@1.5x.png") 1.5x, url("headers/images/icons/edit-rtl@2x.png") 2x, url("headers/images/icons/edit-rtl@2.25x.png") 2.25x);
+}
+html[dir="ltr"] section[role="region"] > header:first-child .icon-send {
+  background-image: image-set(url("headers/images/icons/send.png") 1x, url("headers/images/icons/send@1.5x.png") 1.5x, url("headers/images/icons/send@2x.png") 2x, url("headers/images/icons/send@2.25x.png") 2.25x);
+}
+html[dir="rtl"] section[role="region"] > header:first-child .icon-send {
+  background-image: image-set(url("headers/images/icons/send_rtl.png") 1x, url("headers/images/icons/send_rtl@1.5x.png") 1.5x, url("headers/images/icons/send_rtl@2x.png") 2x, url("headers/images/icons/send_rtl@2.25x.png") 2.25x);
+}
+section[role="region"] > header:first-child .icon-close {
+  background-image: image-set(url("headers/images/icons/close.png") 1x, url("headers/images/icons/close@1.5x.png") 1.5x, url("headers/images/icons/close@2x.png") 2x, url("headers/images/icons/close@2.25x.png") 2.25x);
+}
+html[dir="ltr"] section[role="region"] > header:first-child .icon-back {
+  background-image: image-set(url("headers/images/icons/left.png") 1x, url("headers/images/icons/left@1.5x.png") 1.5x, url("headers/images/icons/left@2x.png") 2x, url("headers/images/icons/left@2.25x.png") 2.25x);
+}
+html[dir="rtl"] section[role="region"] > header:first-child .icon-back {
+  background-image: image-set(url("headers/images/icons/right.png") 1x, url("headers/images/icons/right@1.5x.png") 1.5x, url("headers/images/icons/right@2x.png") 2x, url("headers/images/icons/right@2.25x.png") 2.25x);
+}
+section[role="region"] > header:first-child .icon-menu {
+  background-image: image-set(url("headers/images/icons/menu.png") 1x, url("headers/images/icons/menu@1.5x.png") 1.5x, url("headers/images/icons/menu@2x.png") 2x, url("headers/images/icons/menu@2.25x.png") 2.25x);
+}
+section[role="region"] > header:first-child .icon-user {
+  background-image: image-set(url("headers/images/icons/user.png") 1x, url("headers/images/icons/user@1.5x.png") 1.5x, url("headers/images/icons/user@2x.png") 2x, url("headers/images/icons/user@2.25x.png") 2.25x);
+}
+section[role="region"] > header:first-child .icon-up {
+  background-image: image-set(url("headers/images/icons/up.png") 1x, url("headers/images/icons/up@1.5x.png") 1.5x, url("headers/images/icons/up@2x.png") 2x, url("headers/images/icons/up@2.25x.png") 2.25x);
+}
+section[role="region"] > header:first-child .icon-down {
+  background-image: image-set(url("headers/images/icons/down.png") 1x, url("headers/images/icons/down@1.5x.png") 1.5x, url("headers/images/icons/down@2x.png") 2x, url("headers/images/icons/down@2.25x.png") 2.25x);
+}
+section[role="region"] > header:first-child .icon-options {
+  background-image: image-set(url("headers/images/icons/options.png") 1x, url("headers/images/icons/options@1.5x.png") 1.5x, url("headers/images/icons/options@2x.png") 2x, url("headers/images/icons/options@2.25x.png") 2.25x);
+}
+section[role="region"] header h2 {
+  color: #424242;
+  border-bottom: solid 0.1rem #e6e6e6;
+}
+.skin-comms section[role="region"] > header:first-child,
+section[role="region"].skin-comms > header:first-child {
+  background-color: #00adad;
+}
+.skin-comms section[role="region"] > header:first-child a,
+.skin-comms section[role="region"] > header:first-child button,
+section[role="region"].skin-comms > header:first-child a,
+section[role="region"].skin-comms > header:first-child button {
+  color: rgba(0,0,0,0.5);
+}
+.skin-comms section[role="region"] > header:first-child a:active,
+.skin-comms section[role="region"] > header:first-child button:active,
+.skin-comms section[role="region"] > header:first-child a:hover,
+.skin-comms section[role="region"] > header:first-child button:hover,
+section[role="region"].skin-comms > header:first-child a:active,
+section[role="region"].skin-comms > header:first-child button:active,
+section[role="region"].skin-comms > header:first-child a:hover,
+section[role="region"].skin-comms > header:first-child button:hover {
+  background-color: rgba(0,0,0,0.1);
+}
+.skin-comms section[role="region"] > header:first-child a:focus,
+.skin-comms section[role="region"] > header:first-child button:focus,
+section[role="region"].skin-comms > header:first-child a:focus,
+section[role="region"].skin-comms > header:first-child button:focus {
+  background-color: transparent;
+}
+section[role="region"].skin-dark > header:first-child,
+.skin-dark > section[role="region"] > header:first-child {
+  background-color: #242d33;
+}
+.skin-dark section[role="region"] > header:first-child a,
+.skin-dark section[role="region"] > header:first-child button,
+section[role="region"].skin-dark > header:first-child a,
+section[role="region"].skin-dark > header:first-child button {
+  color: #00aac5;
+}
+.skin-dark section[role="region"] > header:first-child a:active,
+.skin-dark section[role="region"] > header:first-child button:active,
+.skin-dark section[role="region"] > header:first-child a:hover,
+.skin-dark section[role="region"] > header:first-child button:hover,
+section[role="region"].skin-dark > header:first-child a:active,
+section[role="region"].skin-dark > header:first-child button:active,
+section[role="region"].skin-dark > header:first-child a:hover,
+section[role="region"].skin-dark > header:first-child button:hover {
+  background-color: rgba(0,0,0,0.4);
+}
+.skin-dark section[role="region"] > header:first-child a:focus,
+.skin-dark section[role="region"] > header:first-child button:focus,
+section[role="region"].skin-dark > header:first-child a:focus,
+section[role="region"].skin-dark > header:first-child button:focus {
+  background-color: transparent;
+}
+section[role="region"].skin-dark header h2,
+.skin-dark > section[role="region"] header h2 {
+  background-color: #2c353b;
+  color: #fff;
+  border: none;
+}
+section[role="region"].skin-organic > header:first-child,
+.skin-organic section[role="region"] > header:first-child {
+  color: #868692;
+  background-color: #f4f4f4;
+}
+section[role="region"].skin-organic > header:first-child h1,
+.skin-organic section[role="region"] > header:first-child h1 {
+  color: #868692;
+}
+section[role="region"].skin-organic > header:first-child a,
+section[role="region"].skin-organic > header:first-child button,
+.skin-organic section[role="region"] > header:first-child a,
+.skin-organic section[role="region"] > header:first-child button {
+  color: #00aac5;
+}
+section[role="region"].skin-organic > header:first-child a:focus,
+section[role="region"].skin-organic > header:first-child button:focus,
+.skin-organic section[role="region"] > header:first-child a:focus,
+.skin-organic section[role="region"] > header:first-child button:focus {
+  background-color: transparent;
+}
+html[dir="ltr"] section[role="region"].skin-organic > header:first-child .icon-back,
+html[dir="ltr"] .skin-organic section[role="region"] > header:first-child .icon-back {
+  background-image: image-set(url("headers/images/icons/organic/left.png") 1x, url("headers/images/icons/organic/left@1.5x.png") 1.5x, url("headers/images/icons/organic/left@2x.png") 2x, url("headers/images/icons/organic/left@2.25x.png") 2.25x);
+}
+html[dir="rtl"] section[role="region"].skin-organic > header:first-child .icon-back,
+html[dir="rtl"] .skin-organic section[role="region"] > header:first-child .icon-back {
+  background-image: image-set(url("headers/images/icons/organic/right.png") 1x, url("headers/images/icons/organic/right@1.5x.png") 1.5x, url("headers/images/icons/organic/right@2x.png") 2x, url("headers/images/icons/organic/right@2.25x.png") 2.25x);
+}
+section[role="region"].skin-organic > header:first-child .icon-close,
+.skin-organic section[role="region"] > header:first-child .icon-close {
+  background-image: image-set(url("headers/images/icons/organic/close.png") 1x, url("headers/images/icons/organic/close@1.5x.png") 1.5x, url("headers/images/icons/organic/close@2x.png") 2x, url("headers/images/icons/organic/close@2.25x.png") 2.25x);
+}
+section[role="region"].skin-organic > header:first-child .icon-add,
+.skin-organic section[role="region"] > header:first-child .icon-add {
+  background-image: image-set(url("headers/images/icons/organic/add.png") 1x, url("headers/images/icons/organic/add@1.5x.png") 1.5x, url("headers/images/icons/organic/add@2x.png") 2x, url("headers/images/icons/organic/add@2.25x.png") 2.25x);
+}
+html[dir="ltr"] section[role="region"].skin-organic > header:first-child .icon-edit,
+html[dir="ltr"] .skin-organic section[role="region"] > header:first-child .icon-edit {
+  background-image: image-set(url("headers/images/icons/organic/edit.png") 1x, url("headers/images/icons/organic/edit@1.5x.png") 1.5x, url("headers/images/icons/organic/edit@2x.png") 2x, url("headers/images/icons/organic/edit@2.25x.png") 2.25x);
+}
+html[dir="rtl"] section[role="region"].skin-organic > header:first-child .icon-edit,
+html[dir="rtl"] .skin-organic section[role="region"] > header:first-child .icon-edit {
+  background-image: image-set(url("headers/images/icons/organic/edit-rtl.png") 1x, url("headers/images/icons/organic/edit-rtl@1.5x.png") 1.5x, url("headers/images/icons/organic/edit-rtl@2x.png") 2x, url("headers/images/icons/organic/edit-rtl@2.25x.png") 2.25x);
+}
+section[role="region"].skin-organic header h2,
+.skin-organic section[role="region"] header h2 {
+  background-color: #e7e7e7;
+  color: #4d4d4d;
+  border: none;
+}

overrides/settings.gaiamobile.org/shared/style/input_areas.css

@@ -0,0 +1,488 @@
+
+html[dir="ltr"] input { text-align: left; }
+html[dir="rtl"] input { text-align: right; }
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="tel"],
+input[type="search"],
+input[type="url"],
+input[type="number"],
+textarea {
+  font-family: sans-serif;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 4rem;
+  line-height: 4rem;
+  resize: none;
+  padding: 0 1.5rem;
+  font-size: 1.6rem;
+  border: 0.1rem solid #c7c7c7;
+  border-radius: 0;
+  box-shadow: none; 
+  color: #333;
+  background: #fff;
+  margin: 0 0 1rem;
+  unicode-bidi: -moz-plaintext;
+}
+label:active {
+  background-color: transparent;
+}
+textarea {
+  height: 10rem;
+  max-height: 10rem;
+  line-height: 2rem;
+}
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  color: #a9a9a9;
+  opacity: 1;
+  font-style: italic;
+  font-weight: 400;
+}
+input[disabled],
+textarea[disabled] {
+  opacity: 0.5;
+}
+.skin-dark input[type="text"],
+.skin-dark input[type="password"],
+.skin-dark input[type="email"],
+.skin-dark input[type="tel"],
+.skin-dark input[type="search"],
+.skin-dark input[type="url"],
+.skin-dark input[type="number"],
+.skin-dark textarea  {
+  color: #fff;
+  background-color: transparent;
+  border-color: #454545;
+}
+form p {
+  position: relative;
+  margin: 0;
+}
+form p input + button[type="reset"],
+form p textarea + button[type="reset"] {
+  position: absolute;
+  top: 0;
+  width: 4rem;
+  height: 4rem;
+  padding: 0;
+  border: none;
+  font-size: 0;
+  opacity: 0;
+  pointer-events: none;
+  background: image-set(url("input_areas/images/clear.png") 1x, url("input_areas/images/clear@1.5x.png") 1.5x, url("input_areas/images/clear@2x.png") 2x, url("input_areas/images/clear@2.25x.png") 2.25x) no-repeat 50% 50% / 2.4rem auto;
+}
+html[dir="ltr"] form p input + button[type="reset"],
+html[dir="ltr"] form p textarea + button[type="reset"] {
+  right: -0.3rem;
+}
+html[dir="rtl"] form p input + button[type="reset"],
+html[dir="rtl"] form p textarea + button[type="reset"] {
+  left: -0.3rem;
+}
+.skin-dark p input + button[type="reset"],
+.skin-dark p textarea + button[type="reset"] {
+  background-image: image-set(url("input_areas/images/clear_dark.png") 1x, url("input_areas/images/clear_dark@1.5x.png") 1.5x, url("input_areas/images/clear_dark@2x.png") 2x, url("input_areas/images/clear_dark@2.25x.png") 2.25x);
+}
+li input + button[type="reset"]:after,
+li textarea + button[type="reset"]:after {
+  background: none;
+}
+textarea {
+  padding: 1.2rem;
+}
+html[dir="ltr"] form p input:focus { padding-right: 3rem; }
+html[dir="rtl"] form p input:focus { padding-left: 3rem; }
+form p input:focus + button[type="reset"],
+form p textarea:focus + button[type="reset"] {
+  opacity: 1;
+  pointer-events: all;
+}
+fieldset {
+  position: relative;
+  overflow: hidden;
+  margin: 1.5rem 0 0;
+  padding: 0;
+  font-size: 2rem;
+  line-height: 1em;
+  background: none;
+  border: 0;
+}
+fieldset legend,
+input[type="date"],
+input[type="time"],
+input[type="datetime"],
+input[type="datetime-local"] {
+  border: 0.1rem solid #c7c7c7;
+  width: 100%;
+  box-sizing: border-box;
+  font-family: sans-serif;
+  font-style: italic;
+  font-size: 1.6rem;
+  margin: 0 0 1.5rem;
+  padding: 0 1.5rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  height: 4rem;
+  color: #333;
+  border-radius: 0;
+  background-color: #fff;
+  background-repeat: no-repeat;
+}
+html[dir="ltr"] fieldset legend,
+html[dir="ltr"] input[type="date"],
+html[dir="ltr"] input[type="time"],
+html[dir="ltr"] input[type="datetime"],
+html[dir="ltr"] input[type="datetime-local"] {
+  background-image: url(input_areas/images/dialog.svg);
+  background-position: right 1rem bottom 1rem;
+}
+html[dir="rtl"] fieldset legend,
+html[dir="rtl"] input[type="date"],
+html[dir="rtl"] input[type="time"],
+html[dir="rtl"] input[type="datetime"],
+html[dir="rtl"] input[type="datetime-local"] {
+  background-image: url(input_areas/images/dialog_rtl.svg);
+  background-position: left 1rem bottom 1rem;
+}
+fieldset legend {
+  margin: 0 0 1rem;
+  padding: 1rem 1.5rem 0;
+  background-color: rgba(0,0,0,0.05);
+}
+fieldset[disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.skin-dark fieldset legend,
+.skin-dark input[type="date"],
+.skin-dark input[type="time"],
+.skin-dark input[type="datetime"],
+.skin-dark input[type="datetime-local"] {
+  color: #fff;
+  background-color: transparent;
+  border-color: #454545;
+}
+fieldset[disabled] legend,
+input[type="date"][disabled],
+input[type="time"][disabled],
+input[type="datetime"][disabled],
+input[type="datetime-local"][disabled] {
+  background-color: transparent;
+}
+html[dir="ltr"] fieldset[disabled] legend,
+html[dir="ltr"] input[type="date"][disabled],
+html[dir="ltr"] input[type="time"][disabled],
+html[dir="ltr"] input[type="datetime"][disabled],
+html[dir="ltr"] input[type="datetime-local"][disabled] {
+  background-image: url(input_areas/images/dialog_disabled.svg);
+}
+html[dir="rtl"] fieldset[disabled] legend,
+html[dir="rtl"] input[type="date"][disabled],
+html[dir="rtl"] input[type="time"][disabled],
+html[dir="rtl"] input[type="datetime"][disabled],
+html[dir="rtl"] input[type="datetime-local"][disabled] {
+  background-image: url(input_areas/images/dialog_disabled_rtl.svg);
+}
+input[type="date"]:focus,
+input[type="time"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus {
+  box-shadow: none;
+  border-bottom-color: #c7c7c7;
+}
+.skin-dark input[type="date"]:focus,
+.skin-dark input[type="time"]:focus,
+.skin-dark input[type="datetime"]:focus,
+.skin-dark input[type="datetime-local"]:focus {
+  box-shadow: none;
+  border-bottom-color: #454545;
+}
+input[type="date"]:active,
+input[type="time"]:active,
+input[type="datetime"]:active,
+input[type="datetime-local"]:active {
+  background-color: #b2f2ff;
+  color: #fff;
+}
+.skin-dark input[type="date"]:active,
+.skin-dark input[type="time"]:active,
+.skin-dark input[type="datetime"]:active,
+.skin-dark input[type="datetime-local"]:active {
+  background-color: #00aacc;
+  background-image: url(input_areas/images/dialog_active.svg);
+}
+input:invalid,
+textarea:invalid,
+.skin-dark input:invalid,
+.skin-dark textarea:invalid {
+  color: #b90000;
+}
+input:focus,
+textarea:focus,
+.skin-dark input:focus,
+.skin-dark textarea:focus {
+  box-shadow: inset 0 -0.1rem 0 #00caf2;
+  border-bottom-color: #00caf2;
+}
+input:invalid:focus,
+textarea:invalid:focus,
+.skin-dark input:invalid:focus,
+.skin-dark textarea:invalid:focus {
+  box-shadow: inset 0 -0.1rem 0 #820000;
+  border-bottom-color: #820000;
+}
+input[type="range"]:focus,
+.skin-dark input[type="range"]:focus {
+  box-shadow: none;
+  border-bottom: 0;
+}
+form[role="search"] {
+  position: relative;
+  height: 3.7rem;
+  background: #f4f4f4;
+}
+form[role="search"].skin-dark {
+  background: #202020;
+}
+form[role="search"] p {
+  padding: 0 1.5rem;
+  padding-inline-start: 3rem;
+  overflow: hidden;
+  position: relative;
+}
+form[role="search"] p input,
+form[role="search"] p textarea {
+  height: 3.7rem;
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  box-shadow: none;
+}
+form[role="search"] p textarea {
+  padding: 1rem 0 0;
+}
+form[role="search"] p input::-moz-placeholder {
+  background-image: url(input_areas/images/search.svg);
+  background-repeat: no-repeat;
+  background-size: 3rem;
+}
+html[dir="ltr"] form[role="search"] p input::-moz-placeholder {
+  background-position: right -0.5rem center;
+}
+html[dir="rtl"] form[role="search"] p input::-moz-placeholder {
+  background-position: left -0.5rem center;
+}
+form[role="search"].skin-dark p input::-moz-placeholder {
+  background-image: url(input_areas/images/search_dark.svg);
+}
+form[role="search"] p input:focus::-moz-placeholder {
+  background: none;
+}
+form[role="search"] p input:invalid,
+form[role="search"] p textarea:invalid,
+form[role="search"] p input:focus,
+form[role="search"] p textarea:focus {
+  border: none;
+  box-shadow: none;
+}
+form[role="search"].skin-dark p input,
+form[role="search"].skin-dark p textarea {
+  color: #fff;
+  background: none;
+  box-shadow: none;
+}
+form[role="search"] button[type="submit"] {
+  min-width: 6rem;
+  height: 3.7rem;
+  padding: 0 1.5rem;
+  border: none;
+  color: #00aac5;
+  font-weight: normal;
+  font-size: 1.6rem;
+  line-height: 3.7rem;
+  width: auto;
+  border-radius: 0;
+  margin: 0;
+  position: relative;
+  background-image: none;
+  background-color: unset;
+  font-style: italic;
+  overflow: visible;
+}
+html[dir="ltr"] form[role="search"] button[type="submit"] { float: right; }
+html[dir="rtl"] form[role="search"] button[type="submit"] { float: left; }
+form[role="search"] button[type="submit"]:after {
+  content: "";
+  position: absolute;
+  offset-inline-start: -0.1rem;
+  top: 0.7rem;
+  bottom: 0.7rem;
+  width: 0.1rem;
+  background: #c7c7c7;
+}
+form[role="search"] button[type="submit"].icon {
+  font-size: 0;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 3rem;
+}
+form[role="search"] p input + button[type="reset"]{
+  height: 3.7rem;
+  offset-inline-end: 0.5rem;
+}
+form[role="search"].skin-dark button[type="submit"]:after {
+  background-color: #575757;
+}
+form[role="search"] button[type="submit"] + p > textarea {
+  height: 3.7rem;
+  line-height: 2rem;
+}
+form[role="search"] button[type="submit"] + p button {
+  height: 3.7rem;
+}
+form[role="search"].full button[type="submit"] {
+  display: none;
+}
+form[role="search"] button.icon:active,
+form[role="search"] button[type="submit"]:active {
+  background-color: #b2f2ff;
+  color: #fff;
+}
+form[role="search"].skin-dark button.icon:active,
+form[role="search"].skin-dark button[type="submit"]:active {
+  background: #00aacc;
+}
+form[role="search"] button[type="submit"][disabled] {
+  color: #adadad;
+  pointer-events: none;
+}
+form button::-moz-focus-inner {
+  border: none;
+  outline: none;
+}
+.bb-editable [contenteditable] {
+  display: inline-block;
+  box-sizing: border-box;
+  position: relative;
+  max-width: calc(100% - 1.4rem);
+  overflow: hidden;
+  padding: 0 1.5rem;
+  margin: 0 0 0.6rem;
+  line-height: 2.8rem;
+  border-radius: 1.4rem;
+  text-overflow: ellipsis;
+  font-size: 1.6rem;
+  font-style: italic;
+  white-space: nowrap;
+  color: #333;
+  background: #fff;
+}
+html[dir="ltr"] .bb-editable [contenteditable].icon {
+  padding-right: 3.7rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].icon {
+  padding-left: 3.7rem;
+}
+.bb-editable [contenteditable="false"].invalid {
+  background-color: #fedcdc;
+  padding: 0 1.5rem;
+}
+html[dir="ltr"] .bb-editable [contenteditable="false"].invalid { padding-left: 3.3rem; }
+html[dir="rtl"] .bb-editable [contenteditable="false"].invalid { padding-right: 3.3rem; }
+.bb-editable [contenteditable="false"].invalid:before {
+    content: "!";
+    position: absolute;
+    top: 0.6rem;
+    display: block;
+    width: 1.7rem;
+    height: 1.6rem;
+    padding: 0;
+    border-radius: 50%;
+    line-height: 1.6rem;
+    font-size: 1.2rem;
+    text-align: center;
+    text-indent: -0.1rem;
+    font-style: normal;
+    font-weight: 600;
+    color: #fff;
+    background-color: #b80404;
+}
+html[dir="ltr"] .bb-editable [contenteditable="false"].invalid:before { left: 0.8rem; }
+html[dir="rtl"] .bb-editable [contenteditable="false"].invalid:before { right: 0.8rem; }
+.bb-editable [contenteditable="false"].invalid:hover:before,
+.bb-editable [contenteditable="false"].invalid:active:before {
+  color: #b2f2ff;
+  background-color: #fff;
+}
+.bb-editable [contenteditable]:hover,
+.bb-editable [contenteditable]:active,
+.bb-editable [contenteditable].invalid:hover,
+.bb-editable [contenteditable].invalid:active {
+  color: #fff;
+  background-color: #b2f2ff;
+}
+.bb-editable [contenteditable].icon:after {
+  content: "";
+  position: absolute;
+  top: 0.7rem;
+  width: 3rem;
+  height: 3rem;
+  background-repeat: no-repeat;
+  background-size: 3rem;
+}
+html[dir="ltr"] .bb-editable [contenteditable].icon:after {
+  right: 0;
+  background-position: -0.7rem -3.8rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].icon:after {
+  left: 0;
+  background-position: 0.7rem -3.8rem;
+}
+html[dir="ltr"] .bb-editable [contenteditable].icon:hover:after,
+html[dir="ltr"] .bb-editable [contenteditable].icon:active:after {
+  background-position: -0.7rem -0.8rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].icon:hover:after,
+html[dir="rtl"] .bb-editable [contenteditable].icon:active:after {
+  background-position: 0.7rem -0.8rem;
+}
+html[dir="ltr"] .bb-editable [contenteditable].invalid.icon {
+  padding-right: 3.7rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].invalid.icon {
+  padding-left: 3.7rem;
+}
+html[dir="ltr"] .bb-editable [contenteditable].invalid.icon:after {
+  background-position: -0.7rem -6.8rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].invalid.icon:after {
+  background-position: 0.7rem -6.8rem;
+}
+html[dir="ltr"] .bb-editable [contenteditable].invalid.icon:hover:after,
+html[dir="ltr"] .bb-editable [contenteditable].invalid.icon:active:after {
+  background-position: -0.7rem -0.8rem;
+}
+html[dir="rtl"] .bb-editable [contenteditable].invalid.icon:hover:after,
+html[dir="rtl"] .bb-editable [contenteditable].invalid.icon:active:after {
+  background-position: 0.7rem -0.8rem;
+}
+.bb-editable [contenteditable="true"],
+.bb-editable [contenteditable="true"]:hover,
+.skin-comms .bb-editable [contenteditable="true"]:hover {
+    padding: 0 0.2rem;
+    white-space: normal;
+    font-size: 1.8rem;
+    font-style: normal;
+    color: #000;
+    background: none repeat scroll 0 0 transparent;
+}
+.skin-comms .bb-editable [contenteditable]:hover,
+.skin-comms .bb-editable [contenteditable]:active {
+  color: #fff;
+  background-color: #29bbb5;
+}