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/system.gaiamobile.org/style/utility_tray/utility_tray.css

@@ -0,0 +1,223 @@
+/* Since the UtilityTray overlays the entire screen, we must ensure that it
+   doesn't get displayed until after it has loaded. This class is removed in
+   utility_tray.js. */
+.utility-tray-loading {
+  visibility: hidden;
+}
+
+.tray {
+  --tray-invisible-gripper-height: 2rem;
+  --scrollbar-width: 15px;
+  --software-buttons-width-adjustment: 0px;
+  --software-buttons-height-adjustment: 0px;
+
+  position: relative;
+  width: calc(100% + var(--scrollbar-width));
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: scroll;
+
+  pointer-events: none;
+  will-change: scroll-position;
+}
+
+/* When using a screen reader, disable the invisible gripper.
+   The invisible gripper is useless with the screen reader and
+   interferes with touching the statusbar. */
+#screen.screenreader .tray {
+  --tray-invisible-gripper-height: 0px;
+}
+
+/* NOTE: csslint treats variable-only rules as "empty" errors, per
+   <https://github.com/CSSLint/csslint/issues/538>. */
+@media (orientation: portrait) {
+  #screen.software-button-enabled .tray {
+    --software-buttons-height-adjustment: var(--software-home-button-height);
+  }
+}
+
+@media (orientation: landscape) {
+  #screen.software-button-enabled .tray {
+    --software-buttons-width-adjustment: var(--software-home-button-height);
+  }
+}
+
+.tray-dead-area {
+  height: calc(100% - var(--tray-invisible-gripper-height));
+}
+
+.tray-content {
+  height: calc(100% - var(--software-buttons-height-adjustment));
+  width: calc(100% - var(--scrollbar-width) - var(--software-buttons-width-adjustment));
+  pointer-events: all;
+  background-color: hsla(0, 0%, 20%, .95);
+  position: relative;
+}
+
+.tray-footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
+
+#tray-invisible-gripper {
+  height: var(--tray-invisible-gripper-height);
+  pointer-events: all;
+}
+
+.tray.open #tray-invisible-gripper {
+  pointer-events: none;
+}
+
+/* Special visibility overrides */
+
+#screen.lockscreen-camera > #utility-tray {
+  visibility: hidden;
+}
+
+/* Statusbar */
+
+#statusbar-tray {
+  background-image: none;
+  background-repeat: no-repeat;
+  width: 100%;
+  top: 0;
+  height: 3rem;
+  filter: none;
+}
+html[dir="ltr"] #statusbar-tray { background-position: right; }
+html[dir="rtl"] #statusbar-tray { background-position: left; }
+
+#screen.utility-tray-in-transition #statusbar-tray,
+#screen:-moz-full-screen-ancestor #statusbar-tray,
+#screen.utility-tray-in-transition #utility-tray #statusbar-tray {
+  background-image: -moz-element(#statusbar-icons);
+}
+
+#statusbar-tray > .sb-start-upper {
+  position: absolute;
+  offset-inline-start: 0;
+  line-height: var(--statusbar-height);
+}
+
+/* Notifications indicator */
+
+#ambient-indicator {
+  height: .2rem;
+  width: 100%;
+  opacity: 0;
+  visibility: hidden;
+  background-color: #00D3FF;
+  transition: opacity .5s ease .5s;
+  position: absolute;
+  pointer-events: none;
+}
+
+
+#screen:not(.locked) #ambient-indicator.unread {
+  opacity: 1;
+  visibility: visible;
+}
+
+#ambient-indicator.active {
+  background: none #006e86 repeat;
+  display: block;
+  transition: none;
+  opacity: 1;
+  visibility: visible;
+}
+
+#ambient-indicator.active > .handle {
+  border-top: 0.2rem #00d3ff solid;
+  border-left: 0.2rem transparent solid;
+  border-right: 0.2rem transparent solid;
+  animation: handle 1s infinite;
+  height: 0.2rem;
+  width: 8.6rem;
+  margin: 0 auto;
+  visibility: visible;
+}
+
+#ambient-indicator.active > .handle2 {
+  animation-delay: 0.5ms;
+  margin: -0.4rem auto;
+}
+
+@keyframes handle {
+  0%   { transform: scaleX(1.0); opacity: 1;}
+  100% { transform: scaleX(4.0); opacity: 0;}
+}
+
+#utility-tray-notifications {
+  position: sticky;
+  top: 0;
+  margin-bottom: 2rem;
+}
+
+/* Utility Tray Footer (the buttons at the bottom of the tray) */
+
+#utility-tray-footer {
+  background: hsla(0, 0%, 100%, .05);
+}
+
+@keyframes tray-footer-in {
+  0% { transform: scaleY(0.9); opacity: 0; }
+  15% { transform: scaleY(1.08); opacity: 1; }
+  30% { transform: scaleY(0.94); }
+  65% { transform: scaleY(1.03); }
+  100% { transform: scaleY(1); }
+}
+
+/* NOTE: We cannot modify transform() on the way out, because the user may be
+   dragging from on top of the footer; changing the transform mid-scroll
+   interrupts the scroll gesture. Fortunately, opacity is fine. */
+@keyframes tray-footer-out {
+  0% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+#utility-tray-footer {
+  transform-origin: bottom left;
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+#utility-tray-footer.animate-in {
+  animation: tray-footer-in 200ms;
+  animation-timing-function: ease-in-out;
+  transform: scaleY(1);
+  opacity: 1;
+}
+
+#utility-tray-footer.animate-out {
+  animation: tray-footer-out 50ms;
+  animation-timing-function: ease-out;
+  opacity: 0;
+  transform: scaleY(1);
+}
+
+/* The _visible_ grippy at the bottom of the utility tray. */
+
+#utility-tray-grippy {
+  width: 100%;
+  height: 2rem;
+  margin: 0;
+  position: relative; /* float above */
+  background: hsla(0, 0%, 20%, 1) image-set(url("images/grippy.png") 1x, url("images/grippy@1.5x.png") 1.5x, url("images/grippy@2x.png") 2x, url("images/grippy@2.25x.png") 2.25x) no-repeat center / 7.2rem;
+}
+
+/* Icons */
+
+#utility-tray .utility-tray-notifications [data-icon] {
+  display: inline-block;
+  width: 3rem;
+  height: 3rem;
+  margin: 1.5rem auto;
+}
+
+#utility-tray .utility-tray-notifications [data-icon]:before {
+  /* The icons should appear 24 x 24px but each glyph only takes 80% of the space
+   So we compensate by adding 20%, that is 30px. */
+  font-size: 3rem;
+  line-height: 3rem;
+}