diff options
Diffstat (limited to 'apps/system/style/statusbar/statusbar.css')
| -rw-r--r-- | apps/system/style/statusbar/statusbar.css | 412 |
1 files changed, 412 insertions, 0 deletions
diff --git a/apps/system/style/statusbar/statusbar.css b/apps/system/style/statusbar/statusbar.css new file mode 100644 index 0000000..e4530ad --- /dev/null +++ b/apps/system/style/statusbar/statusbar.css @@ -0,0 +1,412 @@ +/* The status bar disregard the rem rule because we have only 16px icons for now */ + +body, html { + font-family: MozTT, sans-serif; + font-weight: 500; + font-size: 10px; +} + +#screen.lockscreen-camera > #statusbar { + display: none; +} + +#statusbar { + overflow: hidden; + position: absolute; + + width: 100%; + height: 20px; + top: 0; + left: 0; + background-color: #000; + + padding: 2px 0; + -moz-box-sizing: border-box; +} + +#statusbar > * { + pointer-events: none; + float: right; + margin: 0 2px; +} + +#statusbar > .sb-start { + float: left; + -moz-transition: visibility 0.5s ease, -moz-transform 0.5s ease; +} + +*[dir=rtl] #statusbar > * { + float: left; +} + +*[dir=rtl] #statusbar > .sb-start { + float: right; +} + +#statusbar > .sb-start-upper { + visibility: hidden; + position: absolute; + top: -20px; + left: 0; + + -moz-transition: visibility 0.5s ease, -moz-transform 0.5s ease; +} + +*[dir=rtl] #statusbar > .sb-start-upper { + left: auto; + right: 0; +} + +.utility-tray #statusbar > .sb-start-upper { + visibility: visible; + -moz-transform: translateY(20px); +} + +.utility-tray #statusbar > .sb-start { + visibility: hidden; + -moz-transform: translateY(20px); +} + +#statusbar-label { + color: #919899; + font-size: 1.49rem; /* 6.5pt */ + position: relative; + bottom: 1px; +} + +#statusbar-time { + color: #fff; + font-size: 1.49rem; /* 6.5pt */ + position: relative; + bottom: 2px; +} + +#statusbar-time span { + margin: 0 0.3rem; + font-size: 1rem; +} + +#screen.locked #statusbar-time { + display: none; +} + +.sb-icon { + width: 16px; + height: 16px; + + background: url('images/icons.png') no-repeat; +} + +.sb-icon-battery { + width: 21px; +} +.sb-icon-battery:not([data-level]) { + background-position: -286px 0; +} +.sb-icon-battery[data-level="0"] { + background-position: 0 0; +} +.sb-icon-battery[data-level="10"] { + background-position: -26px 0; +} +.sb-icon-battery[data-level="20"] { + background-position: -52px 0; +} +.sb-icon-battery[data-level="30"] { + background-position: -78px 0; +} +.sb-icon-battery[data-level="40"] { + background-position: -104px 0; +} +.sb-icon-battery[data-level="50"] { + background-position: -130px 0; +} +.sb-icon-battery[data-level="60"] { + background-position: -156px 0; +} +.sb-icon-battery[data-level="70"] { + background-position: -182px 0; +} +.sb-icon-battery[data-level="80"] { + background-position: -208px 0; +} +.sb-icon-battery[data-level="90"] { + background-position: -234px 0; +} +.sb-icon-battery[data-level="100"] { + background-position: -260px 0; +} + +.sb-icon-battery:not([data-level])[data-charging="true"], +.sb-icon-battery[data-level="0"][data-charging="true"] { + background-position: 0 -20px; +} +.sb-icon-battery[data-level="10"][data-charging="true"] { + background-position: -26px -20px; +} +.sb-icon-battery[data-level="20"][data-charging="true"] { + background-position: -52px -20px; +} +.sb-icon-battery[data-level="30"][data-charging="true"] { + background-position: -78px -20px; +} +.sb-icon-battery[data-level="40"][data-charging="true"] { + background-position: -104px -20px; +} +.sb-icon-battery[data-level="50"][data-charging="true"] { + background-position: -130px -20px; +} +.sb-icon-battery[data-level="60"][data-charging="true"] { + background-position: -156px -20px; +} +.sb-icon-battery[data-level="70"][data-charging="true"] { + background-position: -182px -20px; +} +.sb-icon-battery[data-level="80"][data-charging="true"] { + background-position: -208px -20px; +} +.sb-icon-battery[data-level="90"][data-charging="true"] { + background-position: -234px -20px; +} +.sb-icon-battery[data-level="100"][data-charging="true"] { + background-position: -260px -20px; +} + +.sb-icon-wifi[data-level="0"][data-connecting="true"] { + background: url('images/wifi-connecting.gif') no-repeat; + background-position: 0 0; +} + +.sb-icon-wifi:not([data-level]), +.sb-icon-wifi[data-level="0"] { + background-position: 0 -60px; +} +.sb-icon-wifi[data-level="1"] { + background-position: -21px -60px; +} +.sb-icon-wifi[data-level="2"] { + background-position: -42px -60px; +} +.sb-icon-wifi[data-level="3"] { + background-position: -63px -60px; +} +.sb-icon-wifi[data-level="4"] { + background-position: -84px -60px; +} + +.sb-icon-data[data-type="H+"] { + background-position: 0 -80px; +} + +.sb-icon-data[data-type="H"] { + background-position: -21px -80px; +} + +.sb-icon-data[data-type="4G"] { + background-position: -42px -80px; +} + +.sb-icon-data[data-type="3G"] { + background-position: -63px -80px; +} + +.sb-icon-data[data-type="E"] { + background-position: -84px -80px; +} + +.sb-icon-data[data-type="2G"] { + background-position: -105px -80px; +} + +.sb-icon-data[data-type="circle"] { + background-position: -126px -80px; +} + +.sb-icon-flight-mode { + background-position: 0 -40px; +} + +.sb-icon-signal[data-level="-1"][data-searching="true"] { + background: url('images/signal-searching.gif') no-repeat; + background-position: 0 0; +} + +.sb-icon-signal[data-level="-1"] { + background-position: -21px -40px; +} + +.sb-icon-signal[data-emergency="true"], +.sb-icon-signal[data-level="0"] { + background-position: -42px -40px; +} + +.sb-icon-signal[data-level="1"] { + background-position: -63px -40px; +} + +.sb-icon-signal[data-level="2"] { + background-position: -84px -40px; +} + +.sb-icon-signal[data-level="3"] { + background-position: -105px -40px; +} + +.sb-icon-signal[data-level="4"] { + background-position: -126px -40px; +} + +.sb-icon-signal[data-level="5"] { + background-position: -147px -40px; +} + +.sb-icon-signal { + /* default icon is the "no sim" icon */ + background-position: -147px -80px; + position: relative; +} + +.sb-icon-signal[data-roaming="true"]::after { + content: ''; + position: absolute; + width: 8px; + height: 5px; + top: 0; + left: 0; + background: url('images/icons.png') no-repeat; + background-position: -168px -40px; +} + +.sb-icon-network-activity { + background: url('images/network-activity.gif') no-repeat; + background-position: 0 0; +} + +.sb-icon-headphones { + background-position: -189px -40px; +} + +.sb-icon-geolocation { + background-position: -231px -40px; +} + +.sb-icon-geolocation[data-active="true"] { + background-position: -210px -40px; +} + +.sb-icon-recording { + background-position: -273px -40px; +} + +.sb-icon-recording[data-active="true"] { + background-position: -252px -40px; +} + +.sb-icon-alarm { + background-position: -294px -40px; +} + +.sb-icon-tethering { + background-position: -126px -60px; +} + +.sb-icon-tethering[data-active="true"] { + background-position: -105px -60px; +} + +.sb-icon-bluetooth { + background-position: -252px -60px; +} + +.sb-icon-bluetooth[data-active="true"] { + background-position: -231px -60px; +} + +.sb-icon-mute { + background-position: -273px -60px; +} + +.sb-icon-mute.vibration { + background-position: -210px -60px; +} + +.sb-icon-usb { + background-position: -294px -60px; +} + +.sb-icon-notification { + background: #000; + width: 32px; + position: relative; +} + +.sb-icon-notification::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 16px; + height: 16px; + + background: url('images/icons.png') no-repeat; + background-position: -189px -60px; +} + +*[dir=rtl] .sb-icon-notification::before { + right: 0; + left: auto; +} + +.sb-icon-notification[data-unread="true"]::before { + background-position: -168px -60px; +} + +.sb-icon-notification::after { + content: attr(data-num); + position: absolute; + color: #666; + width: 16px; + height: 16px; + top: -2px; + right: 0; + padding: 0 1px; + font-size: 1.49rem; /* 6.5pt */ +} + +*[dir=rtl] .sb-icon-notification::after { + right: auto; + left: 0; +} +.sb-icon-notification[data-unread="true"]::after { + color: #27b9cf; +} + +.sb-icon-sms { + background-position: -147px -60px; + position: relative; +} + +.sb-icon-sms::before { + content: attr(data-num); + position: absolute; + color: #000; + top: 4px; + left: 0; + width: 100%; + text-align: center; + font-size: 1.15rem; /*5pt was 8px */ +} + +/* JW: should we show how many current download we have + * as in sb-icon-ms or sb-icon-notification ? */ +.sb-icon-system-downloads { + /* JW: waiting for the correct icon; in the mean time I made this one */ + background: url('images/system-downloads.gif') no-repeat; + background-position: 0 0; +} + +.sb-icon-call-forwarding { + /* Waiting for the correct icon. In the mean time we use this one. */ + background: url('images/call-forwarding.png') no-repeat; + background-position: 0 0; +} |