b38dea0597
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
605 lines
14 KiB
CSS
605 lines
14 KiB
CSS
/* In both fullscreen modes, accept pointer events to trigger the status bar
|
|
unless the utility tray is showing. */
|
|
#screen.fullscreen-app:not(.utility-tray) #top-panel,
|
|
#screen:not(.utility-tray):-moz-full-screen-ancestor > #top-panel {
|
|
pointer-events: all;
|
|
}
|
|
|
|
#statusbar {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: var(--statusbar-height);
|
|
top: 0;
|
|
right: 0;
|
|
pointer-events: none;
|
|
transform: translateY(0);
|
|
transition: none;
|
|
}
|
|
|
|
/* We need a wrapper for being able to translateY the parent div
|
|
without affecting the -moz-elements pointing to it while transitioning */
|
|
#statusbar-wrapper {
|
|
position: absolute;
|
|
display: block;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: var(--statusbar-height);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* This is the remaining space left by the collapsed rocketbar */
|
|
#statusbar #statusbar-icons {
|
|
width: calc(100% - 100% * var(--rocketbar-scale) + 8rem * var(--rocketbar-scale) - 0.5rem);
|
|
}
|
|
|
|
#statusbar:not(.hidden).maximized #statusbar-icons {
|
|
width: 100%;
|
|
}
|
|
|
|
.statusbar {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap-reverse;
|
|
flex-direction: row-reverse;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: var(--statusbar-height);
|
|
margin: 0;
|
|
top: 0;
|
|
offset-inline-end: 0;
|
|
padding: 0 0.3rem;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.statusbar > div,
|
|
.statusbar > img {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* Hide the statusbar out of the viewport in order
|
|
to be available for moz-elements */
|
|
#statusbar.hidden,
|
|
#screen:not(.attention).utility-tray-in-transition > #statusbar,
|
|
#screen.utility-tray-in-transition > #statusbar,
|
|
#screen:not(.locked):not(.minimized-tray):not(.rocketbar-focused):not(.utility-tray) #statusbar.fullscreen,
|
|
#screen:not(.locked):not(.minimized-tray):not(.rocketbar-focused):not(.utility-tray) #statusbar.fullscreen-layout,
|
|
#screen.locked.secure-app:not(.minimized-tray):not(.rocketbar-focused):not(.utility-tray).fullscreen-app #statusbar,
|
|
#screen.locked.secure-app:not(.minimized-tray):not(.rocketbar-focused):not(.utility-tray).fullscreen-layout-app #statusbar {
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
@media (orientation: landscape) {
|
|
#screen.software-button-enabled #statusbar {
|
|
width: calc(100% - var(--software-home-button-height));
|
|
right: var(--software-home-button-height);
|
|
}
|
|
}
|
|
|
|
#screen.attention #statusbar {
|
|
top: 0;
|
|
background-color: black;
|
|
}
|
|
|
|
/* AppChrome would normally provide the theme color for the statusbar.
|
|
However, when in native full-screen mode, AppChrome isn't visible; just
|
|
use black for now, as we do with #screen.attention. */
|
|
#screen:-moz-full-screen-ancestor #statusbar {
|
|
background-color: black;
|
|
}
|
|
|
|
#screen.utility-tray #statusbar {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* Hiding the black background while the homescreen is in foreground but not
|
|
* utility tray or attention screen */
|
|
#screen.lockscreen-camera > #statusbar {
|
|
transform: scaleY(0);
|
|
}
|
|
html[dir="ltr"] #screen.lockscreen-camera > #statusbar { transform-origin: left top; }
|
|
html[dir="rtl"] #screen.lockscreen-camera > #statusbar { transform-origin: right top; }
|
|
|
|
#screen.locked:not(.attention) #statusbar {
|
|
background-color: transparent;
|
|
display: block;
|
|
transform: scaleY(1);
|
|
}
|
|
|
|
#screen.attention.locked #statusbar-time {
|
|
display: block;
|
|
}
|
|
|
|
.statusbar > * {
|
|
margin: 0.6rem 0.2rem;
|
|
}
|
|
|
|
#screen.rocketbar-focused:not(.locked) .statusbar {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
.utility-tray #statusbar > #statusbar-title,
|
|
#statusbar-title.hidden {
|
|
visibility: visible;
|
|
transform: translateY(var(--statusbar-height));
|
|
}
|
|
|
|
/* Icons */
|
|
|
|
body .utility-tray .statusbar > .sb-start {
|
|
visibility: hidden;
|
|
transform: translateY(var(--statusbar-height));
|
|
}
|
|
|
|
#statusbar-operator {
|
|
margin-inline-start: 0.8rem;
|
|
color: #ffffff;
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
line-height: 1.6rem;
|
|
}
|
|
|
|
#statusbar-time, #statusbar-data:not(.sb-icon-data-circle) {
|
|
position: relative;
|
|
color: #fff;
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
line-height: 1.6rem;
|
|
}
|
|
|
|
#statusbar-time span {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/* signal and data icons */
|
|
#statusbar-mobile-connection {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-weight: 300;
|
|
}
|
|
|
|
#statusbar-mobile-connection > * {
|
|
pointer-events: none;
|
|
margin: 0.6rem 0.2rem;
|
|
}
|
|
html[dir="ltr"] #statusbar-mobile-connection > * { float: left; }
|
|
html[dir="rtl"] #statusbar-mobile-connection > * { float: right; }
|
|
|
|
#statusbar-mobile-connection .sb-icon-roaming {
|
|
margin: 0;
|
|
top: 0.6rem;
|
|
position: relative;
|
|
width: 1rem;
|
|
offset-inline-start: 0;
|
|
}
|
|
|
|
#statusbar-mobile-connection .statusbar-data:not(.sb-icon-data-circle) {
|
|
color: #fff;
|
|
font-size: 1.5rem;
|
|
position: relative;
|
|
bottom: 0.1rem;
|
|
}
|
|
|
|
#statusbar-mobile-connection .statusbar-data:not(.sb-icon-data-circle) {
|
|
background: none;
|
|
width: auto;
|
|
}
|
|
|
|
#statusbar-mobile-connection .statusbar-signal {
|
|
position: relative;
|
|
margin-left: 0.8rem; /* BiDi-proof: sim number/data indicator on the left */
|
|
}
|
|
|
|
#statusbar-mobile-connection[data-multiple="true"] .statusbar-signal::before {
|
|
position: absolute;
|
|
font-size: 1rem;
|
|
bottom: -.2rem;
|
|
left: -0.6rem;
|
|
}
|
|
|
|
#statusbar-mobile-connection[data-multiple="true"] .statusbar-signal[data-index="0"]::before {
|
|
content: '1';
|
|
}
|
|
#statusbar-mobile-connection[data-multiple="true"] .statusbar-signal[data-index="1"]::before {
|
|
content: '2';
|
|
}
|
|
#statusbar-mobile-connection[data-multiple="true"] .statusbar-signal[data-index="2"]::before {
|
|
content: '3';
|
|
}
|
|
#statusbar-mobile-connection[data-multiple="true"] .statusbar-signal[data-index="3"]::before {
|
|
content: '4';
|
|
}
|
|
|
|
#statusbar-mobile-connection .statusbar-signal .statusbar-data {
|
|
position: relative;
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
text-align: left;
|
|
top: -.5rem;
|
|
left: -.7rem;
|
|
}
|
|
|
|
#statusbar-mobile-connection[data-multiple="true"] .statusbar-signal .statusbar-data {
|
|
top: -.5rem;
|
|
left: -.7rem;
|
|
text-align: left;
|
|
}
|
|
|
|
#statusbar-mobile-connection[data-multiple="true"] .statusbar-data.sb-icon-data-circle {
|
|
top: -0.3rem;
|
|
left: -0.8rem;
|
|
}
|
|
|
|
#statusbar-mobile-connection .statusbar-data.sb-icon-data-circle {
|
|
top: -.1rem;
|
|
offset-inline-start: -0.1rem;
|
|
width: 0.8rem;
|
|
height: 0.8rem;
|
|
background-size: 16.8rem 4.8rem;
|
|
}
|
|
html[dir="ltr"] #statusbar-mobile-connection .statusbar-data.sb-icon-data-circle {
|
|
background-position: left -5.8rem top -4rem;
|
|
}
|
|
html[dir="rtl"] #statusbar-mobile-connection .statusbar-data.sb-icon-data-circle {
|
|
background-position: right -5.8rem top -4rem;
|
|
}
|
|
|
|
#statusbar-mobile-connection[data-multiple="true"] .statusbar-data[hidden] {
|
|
display: block;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* call forwarding icons */
|
|
#statusbar-call-forwardings {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#statusbar-call-forwardings > * {
|
|
pointer-events: none;
|
|
margin: 0.4rem 0.6rem;
|
|
}
|
|
html[dir="ltr"] #statusbar-call-forwardings > * { float: left; }
|
|
html[dir="rtl"] #statusbar-call-forwardings > * { float: right; }
|
|
|
|
#statusbar-call-forwardings .sb-icon-call-forwarding {
|
|
position: relative;
|
|
}
|
|
|
|
#statusbar-call-forwardings[data-multiple="true"] .sb-icon-call-forwarding::before {
|
|
position: absolute;
|
|
font-size: 0.8rem;
|
|
top: 0.5rem;
|
|
left: -0.6rem;
|
|
}
|
|
|
|
#statusbar-call-forwardings[data-multiple="true"] .sb-icon-call-forwarding[data-index="0"]::before {
|
|
content: '1';
|
|
}
|
|
#statusbar-call-forwardings[data-multiple="true"] .sb-icon-call-forwarding[data-index="1"]::before {
|
|
content: '2';
|
|
}
|
|
#statusbar-call-forwardings[data-multiple="true"] .sb-icon-call-forwarding[data-index="2"]::before {
|
|
content: '3';
|
|
}
|
|
#statusbar-call-forwardings[data-multiple="true"] .sb-icon-call-forwarding[data-index="3"]::before {
|
|
content: '4';
|
|
}
|
|
|
|
.sb-icon {
|
|
width: 1.6rem;
|
|
height: 1.6rem;
|
|
background: url('images/icons.png') no-repeat;
|
|
background-size: 34rem 9.6rem;
|
|
}
|
|
|
|
.sb-icon-battery {
|
|
width: 2.5rem;
|
|
}
|
|
.sb-icon-battery[data-level="0"] {
|
|
background-position: 0 0;
|
|
}
|
|
.sb-icon-battery[data-level="10"] {
|
|
background-position: -2.8rem 0;
|
|
}
|
|
.sb-icon-battery[data-level="20"] {
|
|
background-position: -5.6rem 0;
|
|
}
|
|
.sb-icon-battery[data-level="30"] {
|
|
background-position: -8.4rem 0;
|
|
}
|
|
.sb-icon-battery[data-level="40"] {
|
|
background-position: -11.2rem 0;
|
|
}
|
|
.sb-icon-battery[data-level="50"] {
|
|
background-position: -14rem 0;
|
|
}
|
|
.sb-icon-battery[data-level="60"] {
|
|
background-position: -16.8rem 0;
|
|
}
|
|
.sb-icon-battery[data-level="70"] {
|
|
background-position: -19.6rem 0;
|
|
}
|
|
.sb-icon-battery[data-level="80"] {
|
|
background-position: -22.4rem 0;
|
|
}
|
|
.sb-icon-battery[data-level="90"] {
|
|
background-position: -25.2rem 0;
|
|
}
|
|
.sb-icon-battery[data-level="100"] {
|
|
background-position: -28rem 0;
|
|
}
|
|
.sb-icon-battery:not([data-level]) {
|
|
background-position: -30.8rem 0;
|
|
}
|
|
|
|
.sb-icon-battery:not([data-level])[data-charging="true"],
|
|
.sb-icon-battery[data-level="0"][data-charging="true"] {
|
|
background-position: 0 -2rem;
|
|
}
|
|
.sb-icon-battery[data-level="10"][data-charging="true"] {
|
|
background-position: -2.8rem -2rem;
|
|
}
|
|
.sb-icon-battery[data-level="20"][data-charging="true"] {
|
|
background-position: -5.6rem -2rem;
|
|
}
|
|
.sb-icon-battery[data-level="30"][data-charging="true"] {
|
|
background-position: -8.4rem -2rem;
|
|
}
|
|
.sb-icon-battery[data-level="40"][data-charging="true"] {
|
|
background-position: -11.2rem -2rem;
|
|
}
|
|
.sb-icon-battery[data-level="50"][data-charging="true"] {
|
|
background-position: -14rem -2rem;
|
|
}
|
|
.sb-icon-battery[data-level="60"][data-charging="true"] {
|
|
background-position: -16.8rem -2rem;
|
|
}
|
|
.sb-icon-battery[data-level="70"][data-charging="true"] {
|
|
background-position: -19.6rem -2rem;
|
|
}
|
|
.sb-icon-battery[data-level="80"][data-charging="true"] {
|
|
background-position: -22.4rem -2rem;
|
|
}
|
|
.sb-icon-battery[data-level="90"][data-charging="true"] {
|
|
background-position: -25.2rem -2rem;
|
|
}
|
|
.sb-icon-battery[data-level="100"][data-charging="true"] {
|
|
background-position: -28rem -2rem;
|
|
}
|
|
|
|
.sb-icon-wifi[data-level="0"][data-connecting="true"] {
|
|
background: url('images/wifi-connecting.png') no-repeat;
|
|
background-position: 0 0;
|
|
background-size: 1.6rem;
|
|
}
|
|
|
|
.sb-icon-wifi:not([data-level]),
|
|
.sb-icon-wifi[data-level="0"] {
|
|
background-position: 0 -6rem;
|
|
}
|
|
.sb-icon-wifi[data-level="1"] {
|
|
background-position: -2rem -6rem;
|
|
}
|
|
.sb-icon-wifi[data-level="2"] {
|
|
background-position: -4rem -6rem;
|
|
}
|
|
.sb-icon-wifi[data-level="3"] {
|
|
background-position: -6rem -6rem;
|
|
}
|
|
.sb-icon-wifi[data-level="4"] {
|
|
background-position: -8rem -6rem;
|
|
}
|
|
|
|
.sb-icon-airplane-mode {
|
|
background-position: 0 -4rem;
|
|
}
|
|
|
|
.sb-icon-signal[data-level="-1"][data-searching="true"] {
|
|
background: url('images/signal-searching.png') no-repeat;
|
|
background-position: 0 0;
|
|
background-size: 1.6rem;
|
|
}
|
|
|
|
.sb-icon-signal[data-level="-1"] {
|
|
background-position: -2rem -4rem;
|
|
}
|
|
|
|
.sb-icon-signal[data-level="0"] {
|
|
background-position: -4rem -4rem;
|
|
}
|
|
|
|
.sb-icon-signal[data-level="1"] {
|
|
background-position: -6rem -4rem;
|
|
}
|
|
|
|
.sb-icon-signal[data-level="2"] {
|
|
background-position: -8rem -4rem;
|
|
}
|
|
|
|
.sb-icon-signal[data-level="3"] {
|
|
background-position: -10rem -4rem;
|
|
}
|
|
|
|
.sb-icon-signal[data-level="4"] {
|
|
background-position: -12rem -4rem;
|
|
}
|
|
|
|
.sb-icon-signal[data-level="5"] {
|
|
background-position: -14rem -4rem;
|
|
}
|
|
|
|
.sb-icon-signal {
|
|
/* default icon is the "no sim" icon */
|
|
background-position: -14rem -8rem;
|
|
position: relative;
|
|
}
|
|
|
|
.sb-icon-network-activity {
|
|
width: 1.6rem;
|
|
height: 1.6rem;
|
|
/* HACK: This enforces allocation of a dedicated layer just for this animated
|
|
* icon, remove after bug 717872 gets fixed. */
|
|
display: block;
|
|
transform: perspective(0.1rem);
|
|
}
|
|
|
|
.sb-icon-network-activity[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.sb-icon-headphone {
|
|
background-position: -18rem -4rem;
|
|
}
|
|
|
|
.sb-icon-bluetooth-headphone {
|
|
background-position: -22rem -8rem;
|
|
}
|
|
|
|
.sb-icon-bluetooth-transfer {
|
|
background-position: -28rem -8rem;
|
|
}
|
|
|
|
.sb-icon-geolocation {
|
|
background-position: -22rem -4rem;
|
|
}
|
|
|
|
.sb-icon-geolocation[data-active="true"] {
|
|
background-position: -20rem -4rem;
|
|
}
|
|
|
|
.sb-icon-recording {
|
|
background-position: -26rem -4rem;
|
|
}
|
|
|
|
.sb-icon-recording[data-active="true"] {
|
|
background-position: -24rem -4rem;
|
|
}
|
|
|
|
.sb-icon-roaming {
|
|
background-position: -16.3rem -4rem;
|
|
}
|
|
|
|
.sb-icon-alarm {
|
|
background-position: -28rem -4rem;
|
|
}
|
|
|
|
.sb-icon-tethering {
|
|
background-position: -12rem -6rem;
|
|
}
|
|
|
|
.sb-icon-tethering[data-active="true"] {
|
|
background-position: -10rem -6rem;
|
|
}
|
|
|
|
.sb-icon-bluetooth {
|
|
background-position: -24rem -6rem;
|
|
}
|
|
|
|
.sb-icon-bluetooth[data-active="true"] {
|
|
background-position: -22rem -6rem;
|
|
}
|
|
|
|
.sb-icon-mute {
|
|
background-position: -26rem -6rem;
|
|
}
|
|
|
|
.sb-icon-mute.vibration {
|
|
background-position: -20rem -6rem;
|
|
}
|
|
|
|
.sb-icon-usb {
|
|
background-position: -28rem -6rem;
|
|
}
|
|
|
|
.sb-icon-emergency-callback {
|
|
background-position: -24rem -8rem;
|
|
}
|
|
|
|
.sb-icon-sms {
|
|
background-position: -14rem -6rem;
|
|
position: relative;
|
|
}
|
|
|
|
.sb-icon-sms::before {
|
|
content: attr(data-num);
|
|
position: absolute;
|
|
color: #000;
|
|
top: 0.4rem;
|
|
offset-inline-start: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 1.15rem; /*5pt was 0.8rem */
|
|
}
|
|
|
|
.sb-icon-download {
|
|
width: 1.6rem;
|
|
height: 1.6rem;
|
|
/* HACK: This enforces allocation of a dedicated layer just for this animated
|
|
* icon, remove after bug 717872 gets fixed. */
|
|
display: block;
|
|
transform: perspective(0.1rem);
|
|
}
|
|
|
|
.sb-icon-download[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.sb-icon-call-forwarding {
|
|
background-position: -20rem -8rem;
|
|
}
|
|
|
|
.sb-icon-playing {
|
|
background-position: -18rem -8rem;
|
|
}
|
|
|
|
.sb-icon-nfc {
|
|
background-position: -26rem -8rem;
|
|
}
|
|
|
|
.sb-icon-debugging {
|
|
background: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.sb-icon-debugging::before {
|
|
font-size: 1.6rem;
|
|
line-height: 1.6rem;
|
|
}
|
|
|
|
/* Hide icons applying a class to the status bar */
|
|
.sb-hide-time .sb-icon-time,
|
|
.sb-hide-battery .sb-icon-battery,
|
|
.sb-hide-airplane-mode .sb-icon-airplane-mode,
|
|
.sb-hide-wifi .sb-icon-wifi,
|
|
.sb-hide-mobile-connection .sb-icon-mobile-connection,
|
|
.sb-hide-network-activity .sb-icon-network-activity,
|
|
.sb-hide-tethering .sb-icon-tethering,
|
|
.sb-hide-bluetooth .sb-icon-bluetooth,
|
|
.sb-hide-nfc .sb-icon-nfc,
|
|
.sb-hide-debugging .sb-icon-debugging,
|
|
.sb-hide-emergency-callback .sb-icon-emergency-callback,
|
|
.sb-hide-download .sb-icon-download,
|
|
.sb-hide-usb .sb-icon-usb,
|
|
.sb-hide-mute .sb-icon-mute,
|
|
.sb-hide-recording .sb-icon-recording,
|
|
.sb-hide-geolocation .sb-icon-geolocation,
|
|
.sb-hide-call-forwardings .sb-icon-call-forwarding,
|
|
.sb-hide-bluetooth-headphone .sb-icon-bluetooth-headphone,
|
|
.sb-hide-headphone .sb-icon-headphone,
|
|
.sb-hide-playing .sb-icon-playing,
|
|
.sb-hide-bluetooth-transfer .sb-icon-bluetooth-transfer,
|
|
.sb-hide-alarm .sb-icon-alarm,
|
|
.sb-hide-sms .sb-icon-sms {
|
|
display: none;
|
|
}
|
|
|
|
/* Using visibility for operator so that the element width is known at all time. */
|
|
.utility-tray .sb-hide-operator .statusbar > .sb-icon-operator {
|
|
visibility: hidden;
|
|
}
|