From 821413607a0718156f9d25d895e89b1c3d37aa8b Mon Sep 17 00:00:00 2001 From: Daniel Narvaez Date: Wed, 06 Feb 2013 13:49:14 +0000 Subject: Copy various bits from gaia --- (limited to 'apps/system/style') diff --git a/apps/system/style/accessibility/accessibility.css b/apps/system/style/accessibility/accessibility.css new file mode 100644 index 0000000..abb145a --- /dev/null +++ b/apps/system/style/accessibility/accessibility.css @@ -0,0 +1,3 @@ +.accessibility-invert { + filter: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxmaWx0ZXIKICAgICAgaWQ9ImludmVydEZpbHRlciIKICAgICAgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KICAgIDxmZUNvbG9yTWF0cml4CiAgICAgICAgdmFsdWVzPSItMSAwIDAgMCAxIDAgLTEgMCAwIDEgMCAwIC0xIDAgMSAwIDAgMCAxIDAgIiAvPgogIDwvZmlsdGVyPgo8L3N2Zz4K#invertFilter); +} diff --git a/apps/system/style/app_install_manager/app_install_manager.css b/apps/system/style/app_install_manager/app_install_manager.css new file mode 100644 index 0000000..d657216 --- /dev/null +++ b/apps/system/style/app_install_manager/app_install_manager.css @@ -0,0 +1,98 @@ +/* dialog */ +/* FIXME we have to see why we need such specific style here and why + * the general style in confirm.css isn't sufficient */ +#app-install-dialog, +#app-install-cancel-dialog, +#app-download-cancel-dialog { + display: none; + position: absolute; + top: 20px; + left: 0; + width: 100%; + bottom: 0; + pointer-events: none; +} + +#app-install-dialog.visible, +#app-install-cancel-dialog.visible, +#app-download-cancel-dialog.visible { + display: inline-block; + pointer-events: auto; +} + +#app-install-dialog section, +#app-install-cancel-dialog section, +#app-download-cancel-dialog section { + height: auto; +} + +#app-install-dialog h1, +#app-install-cancel-dialog h1, +#app-download-cancel-dialog h1 { + border-bottom: none; + background: none; +} + +#app-install-dialog table { + border-top: 0.1rem solid #686868; + margin: 1rem 0 0; + overflow: hidden; + padding-top: 1rem; + font-size: 1.4rem; + width: 100%; +} + +#app-install-dialog table th { + text-align: left; + margin-right: 0.5rem; +} + +#app-install-dialog table td { + overflow: hidden; + text-overflow: ellipsis; +} + +#app-install-cancel-dialog small:first-child { + margin-bottom: 1rem; +} +/* ... end of dialog */ + +/* notification */ +#install-manager-notification-container > .fake-notification { + padding: 10px 10px 10px 60px; + -moz-box-sizing: border-box; + + background-repeat: no-repeat; + background-position: 15px center; + background-image: url(images/downloads.png); +} + +#install-manager-notification-container > .fake-notification > * { + pointer-events: none; +} + +#install-manager-notification-container progress { + width: 100%; + height: 4px; + + border: none; +} + +#install-manager-notification-container progress::-moz-progress-bar { + background: #ec860f; + border-bottom: 1px solid #b96100; + border-top: 2px solid #e67200; +} + +#install-manager-notification-container progress:indeterminate::-moz-progress-bar { + background: url(../shared/progress.gif) #f2aa56; + border: none; +} + +#install-manager-notification-container .message { + line-height: 20px; + font-weight: 700; + font-size: 1.6rem; +} + +/* ... end of notification */ diff --git a/apps/system/style/app_install_manager/images/downloads.png b/apps/system/style/app_install_manager/images/downloads.png new file mode 100644 index 0000000..8a5dcb7 --- /dev/null +++ b/apps/system/style/app_install_manager/images/downloads.png Binary files differ diff --git a/apps/system/style/attention_screen.css b/apps/system/style/attention_screen.css new file mode 100644 index 0000000..126d52e --- /dev/null +++ b/apps/system/style/attention_screen.css @@ -0,0 +1,57 @@ +#attention-screen { + position: absolute; + top: 0px; + width: 100%; + height: 100%; + overflow: hidden; + display: none; + + transition: transform 0.5s ease; +} + +#attention-screen.displayed { + display: block; +} + +#screen.active-statusbar #attention-screen { + transform: translateY(calc(-100% + 40px)); +} + +#screen.active-statusbar #attention-screen.status-mode { + height: 40px; + transform: translateY(0px); + transition: none; +} + +#attention-screen.status-mode > iframe { + margin-top: 0; + height: 100%; +} + +#attention-screen > iframe { + border: 0; + width: 100%; + /* we have the 20px status bar on top */ + height: calc(100% - 20px); + margin-top: 20px; + + background-color: transparent; + + position: absolute; + top: 0; + left: 0; +} + +#attention-screen > #attention-bar { + position: absolute; + bottom: 0px; + width: 100%; + /* Status bar height * 2 */ + height: 40px; + z-index: 2; + display: none; +} + +#screen.active-statusbar #attention-screen > #attention-bar { + display: block; +} diff --git a/apps/system/style/battery_manager/battery_manager.css b/apps/system/style/battery_manager/battery_manager.css new file mode 100644 index 0000000..5a7a530 --- /dev/null +++ b/apps/system/style/battery_manager/battery_manager.css @@ -0,0 +1,55 @@ +#system-overlay.battery { + visibility: visible; +} + +#system-overlay.battery #battery { + display: block; +} + +#battery { + display: none; + background-image: url('images/header_bg.png'); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 45px; + font-size: 1.5rem; + font-weight: 500; +} + +.icon-battery { + display: block; + float: left; + + width: 42px; + height: 18px; + margin: 0 1.3rem; + + background-image: url('images/battery_empty_small.png'); + background-position: center center; + background-repeat: no-repeat; +} + +#battery span { + vertical-align: middle; + height: 45px; + line-height: 45px; +} + +.battery-notification { + display: inline-block; +} + +#battery.disappearing { + animation: notification-disappear 1.5s; +} + +@keyframes notification-disappear { + to { + transform: translateX(100%); + } + from { + transform: translateX(0); + } +} diff --git a/apps/system/style/battery_manager/images/battery_empty_small.png b/apps/system/style/battery_manager/images/battery_empty_small.png new file mode 100644 index 0000000..2075e0c --- /dev/null +++ b/apps/system/style/battery_manager/images/battery_empty_small.png Binary files differ diff --git a/apps/system/style/battery_manager/images/header_bg.png b/apps/system/style/battery_manager/images/header_bg.png new file mode 100644 index 0000000..e1ff073 --- /dev/null +++ b/apps/system/style/battery_manager/images/header_bg.png Binary files differ diff --git a/apps/system/style/bb/value_selector.css b/apps/system/style/bb/value_selector.css new file mode 100644 index 0000000..dd120ef --- /dev/null +++ b/apps/system/style/bb/value_selector.css @@ -0,0 +1,221 @@ +/* ---------------------------------- + * Value selector (Single & Multiple) + * ---------------------------------- */ + +/* Main dialog setup */ +form[role="dialog"] { + background: url(value_selector/images/ui/pattern.png) repeat left top, url(value_selector/images/ui/gradient.png) no-repeat left top; + background-size: auto auto, 100% 100%; + /* We can't use shortand with background size because is not implemented yet: + https://bugzilla.mozilla.org/show_bug.cgi?id=570326; */ + overflow: hidden; + position: absolute; + z-index: 100; + top: 0; + left: 0; + right: 0; + bottom: 0; + padding: 0 0 7rem; + font-family: "MozTT", Sans-serif; + font-size: 0; + /* Using font-size: 0; we avoid the unwanted visual space (about 3px) + created by white-spaces and break lines in the code betewen inline-block elements */ + color: #fff; +} + +form[role="dialog"]:before { + content: ""; + display: inline-block; + vertical-align: top; + width: 1px; + height: 100%; + margin-left: -1px; +} + +form[role="dialog"] > section { + padding: 0 1.5rem 0; + -moz-box-sizing: padding-box; + width: 100%; + height: 100%; + display: inline-block; + vertical-align: top; + white-space: normal; +} + +form[role="dialog"] h1 { + font: 1.6rem/1em 'MozTT', Sans-serif; + color: #fff; + border-bottom: 0.1rem solid #616262; + background: url(value_selector/images/ui/alpha.png) repeat 0 0; + margin: 0 -1.5rem; + padding: 2.5rem 3rem 1rem; +} + +/* Menu & buttons setup */ +form[role="dialog"] menu { + white-space: nowrap; + margin: 0; + padding: 1.5rem; + border-top: solid 1px rgba(255, 255, 255, 0.1); + background: #2d2d2d url(value_selector/images/ui/pattern.png) repeat left top; + display: block; + overflow: hidden; + position: absolute; + left: 0; + right: 0; + bottom: 0; +} + +form[role="dialog"] menu button { + width: 100%; + height: 3.8rem; + margin: 0 0 1rem; + padding: 0 1.5rem; + -moz-box-sizing: border-box; + display: inline-block; + vertical-align: middle; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + border-radius: 0.3rem; + outline: none; + border: none; + font-size: 1.6rem; + font-family: 'MozTT', Sans-serif; + font-weight: 600; + line-height: 3.8rem; + color: #fff; + text-shadow: -1px -1px 0 #830b0b; + text-align: center; + text-decoration: none; +} + +/* Reset & submit defaults */ +form[role="dialog"] menu button[type="reset"], +form[role="dialog"] menu button[type="submit"] { + text-shadow: 1px 1px 0 rgba(255,255,255,0.3); + color: #333; +} + +/* Reset */ +form[role="dialog"] menu button[type="reset"] { + background-image: url(value_selector/images/ui/button_reset.png); + background-color: #fafafa; + border: solid 1px #9f9f9f; +} + +/* Submit */ +form[role="dialog"] menu button[type="submit"] { + background-image: url(value_selector/images/ui/button_submit.png) ; + background-color: #00caf2; + border: 1px solid #00acce; +} + +/* Pressed state, reset & submit */ +form[role="dialog"] menu button[type="reset"]:active, +form[role="dialog"] menu button[type="submit"]:active { + border: solid 1px #008aaa; + background: #008aaa; + color: #333; +} + +/* Disabled, reset & submit) */ +form[role="dialog"] menu button[type="reset"][disabled], +form[role="dialog"] menu button[type="submit"][disabled] { + background-image: url(value_selector/images/ui/button_special_disabled.png); + background-color: transparent; + border: none; + color: #4a4a4a; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); +} + +form[role="dialog"] menu button:last-child { + margin-left: 1rem; +} + +form[role="dialog"] menu button, +form[role="dialog"] menu button:first-child { + margin: 0; +} + +form[role="dialog"] menu button { + width: -moz-calc((100% - 1rem) / 2); +} + +form[role="dialog"] menu button.full { + width: 100%; +} + +/* Specific component code */ +form[role="dialog"] [role="listbox"] { + position: relative; + padding: 0 1.5rem; + margin: 0 -1.5rem; + max-height: calc(100% - 5rem); + overflow: auto; + border-top: solid 0.1rem #222323; +} + +form[role="dialog"] .scrollable:before { + content: ""; + display: block; + position: absolute; + pointer-events: none; + top: 5.2rem; + left: 0; + right: 0; + bottom: 6.9rem; + background: url(value_selector/images/ui/shadow.png) repeat-x left top, url(value_selector/images/ui/shadow-invert.png) repeat-x left bottom; +} + +form[role="dialog"] [role="listbox"] li { + margin: 0; + padding-bottom: 1px; + height: 5.9rem; + list-style: none; + position: relative; + border-bottom: 1px solid #666; + font-weight: lighter; + font-size: 2.2rem; + line-height: 5.9rem; + color: #fff; + transition: background 0.2s ease; +} + +form[role="dialog"] [role="listbox"] li span { + padding: 0 1.5rem; +} + +form[role="dialog"] [role="listbox"] li:active, +form[role="dialog"] [role="listbox"] li:active label span { + background: #00ABCC; + color: #fff!important; +} + +form[role="dialog"] [role="listbox"] li input { + position: absolute; + left: 0; + top: 0; + opacity: 0; + pointer-events: none; +} + +form[role="dialog"] [role="listbox"] li input:checked + span, +form[role="dialog"] [role="listbox"] li[aria-checked="true"] span { + color: #00abcd; + background: url(value_selector/images/icons/checked.png) content-box right center no-repeat; +} + +form[role="dialog"] [role="listbox"] li a, +form[role="dialog"] [role="listbox"] li label { + border-bottom: 1px solid #000; + outline: none; +} + +form[role="dialog"] [role="listbox"] li a, +form[role="dialog"] [role="listbox"] li label, +form[role="dialog"] [role="listbox"] li label span { + text-decoration: none; + display: block; + color: #fff; +} diff --git a/apps/system/style/bb/value_selector/images/icons/checked.png b/apps/system/style/bb/value_selector/images/icons/checked.png new file mode 100644 index 0000000..69d5c3d --- /dev/null +++ b/apps/system/style/bb/value_selector/images/icons/checked.png Binary files differ diff --git a/apps/system/style/bb/value_selector/images/ui/alpha.png b/apps/system/style/bb/value_selector/images/ui/alpha.png new file mode 100644 index 0000000..d7d89aa --- /dev/null +++ b/apps/system/style/bb/value_selector/images/ui/alpha.png Binary files differ diff --git a/apps/system/style/bb/value_selector/images/ui/button_reset.png b/apps/system/style/bb/value_selector/images/ui/button_reset.png new file mode 100644 index 0000000..1080862 --- /dev/null +++ b/apps/system/style/bb/value_selector/images/ui/button_reset.png Binary files differ diff --git a/apps/system/style/bb/value_selector/images/ui/button_special_disabled.png b/apps/system/style/bb/value_selector/images/ui/button_special_disabled.png new file mode 100644 index 0000000..8a93c42 --- /dev/null +++ b/apps/system/style/bb/value_selector/images/ui/button_special_disabled.png Binary files differ diff --git a/apps/system/style/bb/value_selector/images/ui/button_submit.png b/apps/system/style/bb/value_selector/images/ui/button_submit.png new file mode 100644 index 0000000..a42b1e8 --- /dev/null +++ b/apps/system/style/bb/value_selector/images/ui/button_submit.png Binary files differ diff --git a/apps/system/style/bb/value_selector/images/ui/gradient.png b/apps/system/style/bb/value_selector/images/ui/gradient.png new file mode 100644 index 0000000..b288545 --- /dev/null +++ b/apps/system/style/bb/value_selector/images/ui/gradient.png Binary files differ diff --git a/apps/system/style/bb/value_selector/images/ui/pattern.png b/apps/system/style/bb/value_selector/images/ui/pattern.png new file mode 100644 index 0000000..af03f56 --- /dev/null +++ b/apps/system/style/bb/value_selector/images/ui/pattern.png Binary files differ diff --git a/apps/system/style/bb/value_selector/images/ui/shadow-invert.png b/apps/system/style/bb/value_selector/images/ui/shadow-invert.png new file mode 100644 index 0000000..604e6ae --- /dev/null +++ b/apps/system/style/bb/value_selector/images/ui/shadow-invert.png Binary files differ diff --git a/apps/system/style/bb/value_selector/images/ui/shadow.png b/apps/system/style/bb/value_selector/images/ui/shadow.png new file mode 100644 index 0000000..9bc7bd5 --- /dev/null +++ b/apps/system/style/bb/value_selector/images/ui/shadow.png Binary files differ diff --git a/apps/system/style/bluetooth_transfer/bluetooth_transfer.css b/apps/system/style/bluetooth_transfer/bluetooth_transfer.css new file mode 100644 index 0000000..1ae60d5 --- /dev/null +++ b/apps/system/style/bluetooth_transfer/bluetooth_transfer.css @@ -0,0 +1,53 @@ +#bluetooth-transfer-status { + position: relative; + border-top-color: black; + +/* display: none;*/ +} + +#bluetooth-transfer-status.displayed { + display: block; +} + +#bluetooth-transfer-status.applying .bluetooth-transfer-progress { +/* display: none;*/ +} + +#bluetooth-transfer-status .bluetooth-transfer-progress { + display: block; + width: auto; + margin-right: 1.5rem; +} + +#bluetooth-transfer-status progress { + position: absolute; + top: 35px; + left: 50px; + width: -moz-calc(100% - 105px); + height: 10px; + padding: 0; + + border: 0; + border-radius: 10px; +} + +#bluetooth-transfer-status.applying progress { +/* display: none;*/ +} + +#bluetooth-transfer-status progress::-moz-progress-bar { + border-radius: 10px; + background-color: #52b6cc; +} + +#bluetooth-transfer-status.applying .icon { + background-image: url('images/spinner.png'); + + animation: spin 1.75s infinite linear; + transform-origin : center center; +} + +@-moz-keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} diff --git a/apps/system/style/bluetooth_transfer/images/icon_bluetooth.png b/apps/system/style/bluetooth_transfer/images/icon_bluetooth.png new file mode 100644 index 0000000..90b56bf --- /dev/null +++ b/apps/system/style/bluetooth_transfer/images/icon_bluetooth.png Binary files differ diff --git a/apps/system/style/bluetooth_transfer/images/transfer.png b/apps/system/style/bluetooth_transfer/images/transfer.png new file mode 100644 index 0000000..904f6ad --- /dev/null +++ b/apps/system/style/bluetooth_transfer/images/transfer.png Binary files differ diff --git a/apps/system/style/cards_view/cards_view.css b/apps/system/style/cards_view/cards_view.css new file mode 100644 index 0000000..fe90264 --- /dev/null +++ b/apps/system/style/cards_view/cards_view.css @@ -0,0 +1,115 @@ +#cards-view { + visibility: hidden; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transition: opacity 0.5s ease, visibility 0.5s ease; + opacity: 0; + -moz-user-select: none; + overflow: scroll; + background-color: rgba(0, 0, 0, 0.8); +} + +#cards-view.active { + visibility: inherit; + opacity: 1; +} + +#cards-view ul { + list-style: none; + margin: 0; + padding: 0; + width: 100%; + height: 100%; + white-space: nowrap; + text-align: center; +} + +#cards-view .card { + display: inline-block; + width: 100%; + height: -moz-calc(100% - 20px); + margin: 0; + margin-top: 20px; + margin-left: -25%; + position: relative; + background-size: contain; + background-position: center center; + background-repeat: no-repeat; + transform: scale(0.6); +} + +#cards-view .card h1 { + position: absolute; + top: 1.5rem; + left: 1rem; + z-index: 99999; + text-align: left; + font-size: 3.5rem; + font-weight: 300; + text-overflow: ellipsis; + overflow-x: hidden; +} + +#cards-view .card header { + top: 1.5rem; +} + +#cards-view .card[data-edit='true'] { + position: relative; + opacity: 0.8; + z-index: 99999; +} + +#cards-view .card:first-child { + position: absolute; + margin-left: 0; +} + +#cards-view .card:only-child { + margin-left: -50%; +} + +#cards-view .card:nth-child(2) { + margin-left: 75%; +} + +#cards-view .card > *:not(.close-card) { + pointer-events: none; +} + +#cards-view .card > h1 { + position: absolute; + top: 100%; + width: 100%; + line-height: 4rem; +} + +#cards-view .card > p { + position: absolute; + top: -moz-calc(100% + 4rem); + width: 100%; + font-size: 2rem; +} + +#cards-view .card > img.appIcon { + position: relative; + height: 8rem; + width: 8rem; + border-radius: .6rem; + top: 50%; + margin-top: -4rem; +} + +#cards-view .close-card { + position: absolute; + top: -1rem; + left: -1rem; + z-index: 99999; + height: 2.6rem; + width: 2.6rem; + background: url(close.png) no-repeat center center; + transform: scale(1.7); +} diff --git a/apps/system/style/cards_view/close.png b/apps/system/style/cards_view/close.png new file mode 100644 index 0000000..de1f82d --- /dev/null +++ b/apps/system/style/cards_view/close.png Binary files differ diff --git a/apps/system/style/cost_control/cost_control.css b/apps/system/style/cost_control/cost_control.css new file mode 100644 index 0000000..e39e6f9 --- /dev/null +++ b/apps/system/style/cost_control/cost_control.css @@ -0,0 +1,14 @@ +/* Resetting */ +#cost-control-widget, +#cost-control-widget iframe { + width: 100%; + height: 4.5rem; + border: none; + margin: 0; + padding: 0; +} + +#cost-control-widget iframe { + position: absolute; + top: 0; +} diff --git a/apps/system/style/crash_reporter/crash_reporter.css b/apps/system/style/crash_reporter/crash_reporter.css new file mode 100644 index 0000000..1508708 --- /dev/null +++ b/apps/system/style/crash_reporter/crash_reporter.css @@ -0,0 +1,43 @@ +#crash-dialog h1 { + border-bottom: none; +} + +#crash-dialog p { + overflow: visible; +} + +#crash-dialog p:not(:first-of-type) { + border-top: none; +} + +#crash-dialog a { + text-decoration: underline; + margin-top: 2rem; +} + +#crash-dialog.learn-more > form { + display: none; +} + +#crash-dialog:not(.learn-more) > section { + display: none; +} + +/* "Crash Reports" information page */ +#crash-dialog > section { + font-family: "MozTT", Sans-serif; + background-color: #fff; + color: #000; + position: absolute; + z-index: 100; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +#crash-dialog > section > p { + padding: 1rem 3rem; + font-size: 1.5rem; + white-space: normal; +} diff --git a/apps/system/style/fake-notification.css b/apps/system/style/fake-notification.css new file mode 100644 index 0000000..1250945 --- /dev/null +++ b/apps/system/style/fake-notification.css @@ -0,0 +1,9 @@ +.fake-notification { + position: relative; + height: 60px; + + background-color: rgba(0, 0, 0, 0.5); + border-top: 1px black solid; + border-bottom: 1px black solid; +} + diff --git a/apps/system/style/gridview/gridview.css b/apps/system/style/gridview/gridview.css new file mode 100644 index 0000000..e94dd88 --- /dev/null +++ b/apps/system/style/gridview/gridview.css @@ -0,0 +1,11 @@ +#debug-grid { + position: absolute; + top: 0; + left: 0; + display: block; + width: 100%; + height: 100%; + background: url('./images/grid.png'); + opacity: 0.2; + pointer-events: none; +} diff --git a/apps/system/style/gridview/images/grid.png b/apps/system/style/gridview/images/grid.png new file mode 100644 index 0000000..d0aaefc --- /dev/null +++ b/apps/system/style/gridview/images/grid.png Binary files differ diff --git a/apps/system/style/icons/voicemail.png b/apps/system/style/icons/voicemail.png new file mode 100644 index 0000000..e132699 --- /dev/null +++ b/apps/system/style/icons/voicemail.png Binary files differ diff --git a/apps/system/style/list_menu/images/header-left-arrow.png b/apps/system/style/list_menu/images/header-left-arrow.png new file mode 100644 index 0000000..03ec792 --- /dev/null +++ b/apps/system/style/list_menu/images/header-left-arrow.png Binary files differ diff --git a/apps/system/style/list_menu/images/header-right-arrow.png b/apps/system/style/list_menu/images/header-right-arrow.png new file mode 100644 index 0000000..5cd5ee6 --- /dev/null +++ b/apps/system/style/list_menu/images/header-right-arrow.png Binary files differ diff --git a/apps/system/style/list_menu/list_menu.css b/apps/system/style/list_menu/list_menu.css new file mode 100644 index 0000000..63a2ced --- /dev/null +++ b/apps/system/style/list_menu/list_menu.css @@ -0,0 +1,35 @@ +#listmenu { + visibility: hidden; +} + +#listmenu.visible { + visibility: visible; +} + +#listmenu menu, +#listmenu.visible menu.slidedown { + transition: transform 0.3s ease; + transform: translateY(100%); +} + +#listmenu.visible menu { + transform: translateY(0); +} + +#listmenu menu button.icon, +#listmenu menu a[role="button"].icon { + background-repeat: no-repeat; + background-position: 10px center; + padding-left: 45px; + background-size: 30px 30px; +} + +/* 320x480 phones */ +@media (orientation: portrait) and (width: 320px), + (orientation: landscape) and (width: 480px) { + #listmenu menu button.icon, + #listmenu menu a[role="button"].icon { + background-position: 5px center; + padding-left: 40px; + } +} diff --git a/apps/system/style/lockscreen/images/handle.png b/apps/system/style/lockscreen/images/handle.png new file mode 100644 index 0000000..503f86f --- /dev/null +++ b/apps/system/style/lockscreen/images/handle.png Binary files differ diff --git a/apps/system/style/lockscreen/images/icon-camera.png b/apps/system/style/lockscreen/images/icon-camera.png new file mode 100644 index 0000000..6346a09 --- /dev/null +++ b/apps/system/style/lockscreen/images/icon-camera.png Binary files differ diff --git a/apps/system/style/lockscreen/images/icon-clear.png b/apps/system/style/lockscreen/images/icon-clear.png new file mode 100644 index 0000000..0e54b75 --- /dev/null +++ b/apps/system/style/lockscreen/images/icon-clear.png Binary files differ diff --git a/apps/system/style/lockscreen/images/icon-unlock.png b/apps/system/style/lockscreen/images/icon-unlock.png new file mode 100644 index 0000000..4bb87a9 --- /dev/null +++ b/apps/system/style/lockscreen/images/icon-unlock.png Binary files differ diff --git a/apps/system/style/lockscreen/images/mask.png b/apps/system/style/lockscreen/images/mask.png new file mode 100644 index 0000000..e1b8cf5 --- /dev/null +++ b/apps/system/style/lockscreen/images/mask.png Binary files differ diff --git a/apps/system/style/lockscreen/images/mute.png b/apps/system/style/lockscreen/images/mute.png new file mode 100644 index 0000000..46e1019 --- /dev/null +++ b/apps/system/style/lockscreen/images/mute.png Binary files differ diff --git a/apps/system/style/lockscreen/lockscreen.css b/apps/system/style/lockscreen/lockscreen.css new file mode 100644 index 0000000..aadd881 --- /dev/null +++ b/apps/system/style/lockscreen/lockscreen.css @@ -0,0 +1,623 @@ +#lockscreen { + position: absolute; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + background-color: #000; + + -moz-user-select: none; + + opacity: 1; + + transition: + transform 0.5s ease, + opacity 0.5s ease, + visibility 0.5s ease; +} + +#screen.active-statusbar > #lockscreen { + top: 40px; + height: calc(100% - 40px); +} + +#screen:not(.locked) > #lockscreen, +#screen.lockscreen-camera > #lockscreen { + transform: scale(2); + opacity: 0; + visibility: hidden; + pointer-events: none; + + transition-delay: 0.3s; +} + +#screen.screenoff > #lockscreen, +#screen.screenoff > #lockscreen * { + transition: none; +} + +#screen.lockscreen-camera > #lockscreen-camera { + visibility: visible; +} + +/* When switching lock-camera off, + * transition time should be delayed to prevent homescreen appears. + * (Let lockscreen appears first) */ +#screen:not(.lockscreen-camera) > #lockscreen-camera { + transition-delay: 0.3s; +} + +#lockscreen-camera { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #000; + + visibility: hidden; +} + +#lockscreen-camera > iframe { + width: 100%; + height: 100%; + border: none; +} + +#lockscreen.uninit > * { + display: none; +} + +#lockscreen.no-transition { + transition: none; +} + +#lockscreen-container { + width: 100%; + height: 100%; + + /** + * Workaround bug 823418 by trigger a repaint as soon as .screenoff class + * is removed, remove me when the bug is fixed. + */ + transition: opacity 0.1s ease; +} + +/** + * Workaround bug 823418 by trigger a repaint as soon as .screenoff class + * is removed, remove me when the bug is fixed. + */ +.screenoff #lockscreen-container { + opacity: 0.99; +} + +.lockscreen-wallpaper { + position: absolute; +} + +.lockscreen-panel { + position: absolute; + width: 100%; + height: 100%; + + visibility: hidden; + transition: visibility 0.5s ease, transform 0.5s ease; +} + +[data-panel="main"] #lockscreen-panel-main, +[data-panel="passcode"] #lockscreen-panel-passcode, +[data-panel="emergency-call"] #lockscreen-panel-emergency-call { + visibility: inherit; +} + +[data-panel="emergency-call"] #lockscreen-panel-main { + transform: translateX(-100%); +} + +#lockscreen h2 { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 10rem; + margin: 0; + padding: 2.5rem 2.8rem; + -moz-box-sizing: border-box; + font-size: 3.2rem; + font-weight: normal; + line-height: 3.2rem; + text-shadow: 0 0 3px #333; + + transform: translateY(-10rem); + transition: transform 0.3s ease; +} + +#lockscreen-header { + z-index: 9999; + position: absolute; + top: 2rem; /* 2rem = height of status bar */ + left: 0; + width: 100%; + -moz-box-sizing: border-box; + padding: 1.8rem 2.5rem 1.2rem 2.5rem; + color: #fff; + text-shadow: 0 0 3px #333; + transform: translateY(-10rem); + transition: transform 0.2s ease, opacity 0.2s ease; + opacity: 1; +} + +[data-panel="passcode"] #lockscreen-header { + transform: translateY(0); + opacity: 0; +} + +[data-panel="main"] #lockscreen-header { + transform: translateY(0); +} + +[data-panel="camera"] #lockscreen-header, +[data-panel="emergency-call"] #lockscreen-header { + transform: translateY(0); + transition: none; +} + +#lockscreen-connstate { + width: 100%; + display: inline-block; + font-family: 'MozTT', sans-serif; + font-weight: 400; + font-size: calc(6 * 0.226rem); + text-shadow: 1px 1px 3px #000000; + + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +#lockscreen-connstate > span { + display: block; + padding-bottom: 1rem; + border-bottom: solid 1px rgba(256,256,256,.4); +} + +#lockscreen-connstate > span:empty { + display: none; +} + +#lockscreen-connstate.twolines > span:first-child { + border-bottom: none; + padding-bottom: 0; +} + +/* For some reason display: inline-block disregards hidden attribute */ +#lockscreen-connstate[hidden] { + display: none; +} + +#lockscreen-mute { + float: right; + width: 4rem; + height: 4rem; + margin-top: 3.5rem; + + background: transparent url('./images/mute.png') center center no-repeat; +} + +#lockscreen-mute.vibration { + background: transparent url('./images/vibration.png') center center no-repeat; +} + +.lockscreen-clock { + margin: -0.8rem 0 -1rem -0.4rem; + font-weight: 300; +} + +#lockscreen-clock-numbers { + font-size: calc(28 * 0.226rem); +} + +#lockscreen-clock-meridiem { + font-size: calc(17 * 0.226rem); +} + +#lockscreen-date { + font-weight: 400; + font-size: calc(7 * 0.226rem); +} + +.lockscreen-clock, #lockscreen-date { + font-family: 'MozTT', sans-serif; + text-shadow: 1px 1px 3px #000000; + color: #fff; +} + +#lockscreen-area { + position: absolute; + height: 11.2rem; + left: 0; + right: 0; + bottom: 0; +} + +.lockscreen-icon-area { + width: calc(50%); + height: 12rem; + position: absolute; + border-style: none; + opacity: 0.1; + transition: opacity 0.5s ease; +} + +.lockscreen-icon { + margin-top: 2rem; + border-radius: 3rem; + width: 6rem; + height: 6rem; + background-color: rgba(0, 0, 0, 0.3); + -moz-box-sizing: border-box; + border: 2px solid rgba(255, 255, 255, 0.8); + pointer-events: none; +} + +.lockscreen-icon-area:active > .lockscreen-icon { + background-color: rgb(0, 138, 170); +} + +.touched .lockscreen-icon { + transition: none; +} + +.lockscreen-icon-a11y-button { + width: 100%; + height: 100%; + border-width: inherit; + border-radius: inherit; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +.lockscreen-icon-a11y-button * { + display: none; +} + +.lockscreen-icon.triggered { + background-color: #52b6cc !important; + border-color: #52b6cc; +} + +.lockscreen-icon-right { + right: 0; +} + +.lockscreen-icon-left { + left: 0; +} + +button::-moz-focus-inner { + border: 0; +} + +:-moz-any(.touched, .triggered, #screen:not(.locked), #screen.attention, #lockscreen:not([data-panel="main"])) +:-moz-any(#lockscreen-left-arrow, #lockscreen-right-arrow) { + display: none; + animation: none; +} + +.lockscreen-icon-right > .lockscreen-icon { + margin-right: 4rem; + margin-left: auto; +} + +.lockscreen-icon-left > .lockscreen-icon { + margin-left: 4rem; + margin-right: auto; +} + +#lockscreen-area-unlock > div { + background-image: url('./images/icon-unlock.png'); + background-position: center; + background-repeat: no-repeat; +} + +#lockscreen-area-camera > div { + background-image: url('./images/icon-camera.png'); + background-position: center; + background-repeat: no-repeat; +} + +[data-panel="emergency-call"] #lockscreen-panel-passcode { + transform: translateX(-100%); +} + +[data-panel="passcode"] h2#lockscreen-passcode-status { + visibility: inherit; + transform: none; +} + +[data-panel="emergency-call"] h2#lockscreen-passcode-status { + transition-delay: 0.5s; +} + +#lockscreen-passcode-code { + position: absolute; + bottom: 21.4rem; + height: 7rem; + width: 100%; + background-color: rgba(49, 60, 70, 0.9); + margin: 0; + padding: 0 1rem; + -moz-box-sizing: border-box; + border-top: 1px solid #525050; + visibility: hidden; + transform: translateY(calc(21.4rem + 7.2rem)); + transition: visibility 0.3s ease, transform 0.3s ease; +} + +[data-passcode-status="success"] #lockscreen-passcode-pad, +[data-passcode-status="success"] #lockscreen-passcode-code { + transform: translateY(calc(21.4rem + 7.2rem)) !important; +} + +[data-passcode-status="success"] #lockscreen-passcode-status { + transform: translateY(-10rem) !important; +} + +[data-panel="passcode"] #lockscreen-passcode-code { + visibility: inherit; + transform: translateY(0); +} + +[data-panel="emergency-call"] #lockscreen-passcode-code { + transition-delay: 0.5s; +} + +#lockscreen-passcode-code > span { + -moz-box-sizing: border-box; + display: block; + float: left; + width: calc(25% - 1rem); + margin: 1.5rem 0.5rem; + height: calc(100% - 3rem); + text-align: center; + background-color: #fff; + border-radius: 0.5rem; + + position: relative; +} + +[data-passcode-status="error"] #lockscreen-passcode-code > span { + border: 0.1rem #B70404 solid; +} + +[data-passcode-status="error"] #lockscreen-passcode-code > span[data-dot]::before { + background-color: #B70404; +} + +#lockscreen-passcode-code > span[data-dot]::before { + content: ''; + display: block; + position: absolute; + + width: 1.5rem; + height: 1.5rem; + background-color: #3e3b39; + border-radius: 0.75rem; + top: 50%; + left: 50%; + margin-left: -0.75rem; + margin-top: -0.75rem; +} + +#lockscreen-passcode-pad { + -moz-box-sizing: border-box; + position: absolute; + bottom: 0; + height: 21.4rem; + width: 100%; + background-color: rgba(0, 0, 0, 0.8); + visibility: hidden; + transform: translateY(calc(21.4rem + 7em)); + transition: visibility 0.3s ease, transform 0.3s ease; +} + +[data-panel="passcode"] #lockscreen-passcode-pad { + visibility: inherit; + transform: translateY(0); +} + +[data-panel="emergency-call"] #lockscreen-passcode-pad { + transition-delay: 0.5s; +} + +#lockscreen-passcode-pad > a { + -moz-box-sizing: border-box; + display: block; + float: left; + width: 33.333%; + height: 5rem; + border-top: 1px solid #525050; + border-bottom: 1px solid #000000; + border-left: 1px solid #525050; + border-right: 1px solid #000000; + outline: none; + padding: 0 2rem; + + font-size: 3.2rem; + font-weight: 500; + line-height: 5rem; + + color: #fff; + text-decoration: none; + text-shadow: 0 0 3px #000; +} + +#lockscreen-passcode-pad > a:nth-child(3n+1):not([data-key="b"]) { + border-left: none; +} + +#lockscreen-passcode-pad > a.last-row { + height: 6.4rem; +} + +#lockscreen-passcode-pad > a > span { + pointer-events: none; + font-size: 1.2rem; + padding: 1.2rem; + color: #9aaabc; +} + +.passcode-entered #lockscreen-passcode-pad > a[data-key="c"] { + display: none; +} + +#lockscreen-passcode-pad > a[data-key="b"] { + display: none; + background: url(images/icon-clear.png) no-repeat center center; +} + +.passcode-entered #lockscreen-passcode-pad > a[data-key="b"] { + display: block; + text-align: left; + text-indent: -9999px; +} + +#lockscreen-passcode-pad > a:active { + background-color: #00aacd; + color: #fff; + text-shadow: none; +} + +#lockscreen-passcode-pad > a:active > span { + color: #fff; + text-shadow: none; +} + +#lockscreen-passcode-pad > a.lockscreen-passcode-pad-func { + font-size: 1.2rem; + font-weight: 500; + line-height: 1.6rem; + padding: 1rem; + text-align: center; + text-transform: uppercase; +} + +#lockscreen-panel-emergency-call { + transform: translateX(100%); +} + +#lockscreen-panel-emergency-call::before { + content: none; +} + +#lockscreen-panel-emergency-call > iframe { + width: 100%; + height: 100%; + border: none; +} + +[data-panel="emergency-call"] #lockscreen-panel-emergency-call { + transform: translateX(0); +} + +#lockscreen-area-handle { + position: absolute; + background-image: url('./images/handle.png'); + background-repeat: no-repeat; + background-position: center; + border-top: 1px solid transparent; + top: -2rem; + height: 0.9rem; + width: 100%; + transition: + transform 0.5s ease, + opacity 0.5s ease; +} + +#lockscreen-icon-container { + position: absolute; + width: 100%; + bottom: -8rem; + height: 10rem; + pointer-events: none; + border-top: 1px solid #989898; + background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.2) 20%); + transition: + transform 0.5s ease, + opacity 0.5s ease; +} + +.touched #lockscreen-icon-container { + transition: none; +} + +.touched #lockscreen-area-handle { + transition: none; +} + +.touched .lockscreen-icon-area { + transition: none; +} + +.triggered #lockscreen-icon-container { + transform: translateY(-8rem); + opacity: 1; + pointer-events: auto; +} + +.triggered #lockscreen-area-handle { + transform: translateY(-1rem); + opacity: 0; +} + +.triggered .lockscreen-icon-area { + opacity: 1; +} + +@keyframes lockscreen-elastic { + 0%, 40%, 75%, 97% { + transform: translateY(0); + animation-timing-function: ease-out; + } + 20% { + transform: translateY(-5rem); + animation-timing-function: ease-in; + } + 55% { + transform: translateY(-2.3rem); + animation-timing-function: ease-in; + } + 85% { + transform: translateY(-0.5rem); + animation-timing-function: ease-in; + } +} + +@keyframes lockscreen-elastic-icon { + 0%, 40%, 75%, 97% { + opacity: 0.1; + animation-timing-function: ease-out; + } + 20% { + opacity: 0.5; + animation-timing-function: ease-in; + } + 55% { + opacity: 0.4; + animation-timing-function: ease-in; + } + 85% { + opacity: 0.3; + animation-timing-function: ease-in; + } +} + +.elastic .lockscreen-icon-area { + animation: lockscreen-elastic-icon 2.5s 1; +} + +.elastic #lockscreen-icon-container { + animation: lockscreen-elastic 2.5s 1; +} diff --git a/apps/system/style/modal_dialog/images/error_bk.png b/apps/system/style/modal_dialog/images/error_bk.png new file mode 100644 index 0000000..9f71ff8 --- /dev/null +++ b/apps/system/style/modal_dialog/images/error_bk.png Binary files differ diff --git a/apps/system/style/modal_dialog/modal_dialog.css b/apps/system/style/modal_dialog/modal_dialog.css new file mode 100644 index 0000000..d6e97f8 --- /dev/null +++ b/apps/system/style/modal_dialog/modal_dialog.css @@ -0,0 +1,112 @@ +#modal-dialog-alert, +#modal-dialog-confirm, +#modal-dialog-prompt, +#authentication-dialog, +#authentication-dialog-http, +#modal-dialog-error, +#modal-dialog-select-one { + display: none; +} + +#authentication-dialog input, +#modal-dialog input { + border-radius: 2px 2px 2px 2px; + height: 40px; + font-size: 20px; + width: 100%; + color: white; + background: none; + -moz-box-sizing: border-box; +} + +/* 480x800 phones */ +@media (orientation: portrait) and (width: 480px), + (orientation: landscape) and (width: 800px) { + #authentication-dialog input, + #modal-dialog input { + border-radius: 3px 3px 3px 3px; + height: 60px; + font-size: 30px; + width: 100%; + color: white; + -moz-box-sizing: border-box; + } +} + +#screen.modal-dialog #modal-dialog, +#screen.authentication-dialog #authentication-dialog, +#authentication-dialog-http.visible, +#modal-dialog-alert.visible, +#modal-dialog-confirm.visible, +#modal-dialog-prompt.visible, +#modal-dialog-error.visible, +#modal-dialog-select-one.visible { + display: block; +} + +#modal-dialog-error { + background-color: black; + background-image: url(images/error_bk.png); +} + +#modal-dialog-sad-face { + float: left; + font-size: 72px; + margin-right: 2px; +} + +/* Confirm dialog */ +.modal-dialog-message-container p { + display:inline !important; + word-wrap: break-word; +} + +/* Select one dialog */ + +#modal-dialog-select-one .modal-dialog-message-container { + display: block; + padding: 0 1.5rem 0 1.5rem; + position: absolute; + left: 0; + bottom: -moz-calc(3.8rem + 3rem); +} + +#modal-dialog-select-one h3 { + font-size: 1.8rem; +} + +#modal-dialog-select-one ul { + width: 100%; + height: auto; + list-style: none; + padding: 0; + margin: 0.5rem 0 2rem 0; + display: block; + overflow: hidden; +} + +#modal-dialog-select-one ul > li { + width: 100%; + padding-top: 1rem; + margin: 0; + display: block; + overflow: hidden; + border: none; + height: auto; + line-height: normal; +} + +#modal-dialog-select-one ul > li > button { + color: #fff; + text-shadow: none; + text-align: left; + margin: 0; + background: #4E4E4E padding-box; + border: solid 1px rgba(0, 0, 0, 0.25); +} + +#modal-dialog-select-one ul > li > button:active { + background-color: #006f86; + color: #333; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); +} diff --git a/apps/system/style/modal_dialog/prompt.css b/apps/system/style/modal_dialog/prompt.css new file mode 100644 index 0000000..69d726d --- /dev/null +++ b/apps/system/style/modal_dialog/prompt.css @@ -0,0 +1,50 @@ +/* ---------------------------------- + * STYLES FOR PROMPT + * Requires: + menu-dialoges/core.css + other/buttons/style.css + * ---------------------------------- */ + +[role="dialog"] p { + font-family: 'MozTT', Sans-serif; + font-weight: lighter; + font-size: 2.2rem; + color: #FAFAFA; + margin: 0; +} + +[role="dialog"] p:last-child { + overflow-x: hidden; + overflow-y: auto; + word-wrap: break-word; + /*screen height - menu data-items - dialog padding - title height*/ + /*almost 60% screen height*/ + max-height: 28rem; +} + +[role="dialog"] .content { + font-family: 'MozTT', Sans-serif; + font-weight: lighter; + font-size: 2.2rem; + color: #fff; + border-bottom: 0.1rem solid #777; + margin: 0; + padding: 2.5rem 0 2rem 0; +} + +[role="dialog"] .content img { + float: left; + margin-right: 2rem; +} + +[role="dialog"] .content strong { + font-weight: lighter; +} + +[role="dialog"] .content small { + font-size: 1.4rem; + font-family: 'MozTT', Sans-serif; + font-weight: normal; + color: #cbcbcb; + display: block; +} diff --git a/apps/system/style/notifications/images/grey-noise-bg.png b/apps/system/style/notifications/images/grey-noise-bg.png new file mode 100644 index 0000000..0f83b8f --- /dev/null +++ b/apps/system/style/notifications/images/grey-noise-bg.png Binary files differ diff --git a/apps/system/style/notifications/notifications.css b/apps/system/style/notifications/notifications.css new file mode 100644 index 0000000..5dbfe5e --- /dev/null +++ b/apps/system/style/notifications/notifications.css @@ -0,0 +1,200 @@ +html, body { + font-family: 'MozTT', sans-serif; + font-size: 10px; +} + +#notification-toaster { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 50px; + overflow: hidden; + background-image: url('images/grey-noise-bg.png'); + background-repeat: repeat-x; + -moz-box-sizing: border-box; + border-bottom: 1px #2c2c2c solid; + -moz-transform: translateY(-50px); + -moz-transition: -moz-transform .3s ease-in-out; +} + +#toaster-icon { + position: absolute; + width: 30px; + height: 30px; + top: 7px; + left: 10px; + pointer-events: none; +} + +#notification-toaster > div { + left: 50px; + width: -moz-calc(100% - 55px); + height: 19px; + padding: 0; + + line-height: 1.9rem; + + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +#toaster-title { + position: absolute; + top: 3px; + color: #52b8cc; + font-size: 1.5rem; + font-weight: 500; +} + +#toaster-detail { + position: absolute; + top: 22px; + color: white; + font-size: 1.4rem; + font-weight: 400; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +#notification-toaster.displayed { + -moz-transform: translateY(0); +} + +#notification-bar { + height: 30px; + background-color: #52b6cc; + color: #1b3f46; +} + +#notification-bar span { + display: inline-block; + margin-left: 15px; + font-size: 1.4rem; + font-weight: 500; + line-height: 30px; +} + +#notification-bar button { + float: right; + margin-right: 15px; + width: 30%; + height: 30px; + padding: 0; + border: 0; + background: none; + text-align: right; + font-size: 1.4rem; + font-weight: 500; +} + +/* remove ugly dotted outline when focus */ +#notification-bar button::-moz-focus-inner { + border: 0; +} + +#notifications-container { + width: 100%; + + /* minus cost control, quick settings, bar and grippy */ + height: -moz-calc(100% - 4.5rem - 60px - 30px - 20px); + overflow-y: scroll; + overflow-x: hidden; +} + + +.notification { + position: relative; + height: 60px; + font-size: 1.4rem; + font-weight: 400; + line-height: 1.9rem; + + background-color: rgba(0, 0, 0, 0.5); + + border-top: 1px #404547 solid; + border-bottom: 1px black solid; +} + +.notification:first-child { + border-top-color: black; +} + +.notification div { + pointer-events: none; +} + +.notification > div:first-of-type { + width: 19.5rem; + margin: 1rem 0 0 5rem; + font-size: 1.5rem; + font-weight: 500; + line-height: 1.9rem; + color: #FFFFFF; +} + +.notification > div { + margin: 0 0 0 50px; + padding: 0; + width: -moz-calc(100% - 55px); + color: #bfbfbf; + font-size: 1.4rem; + line-height: 1.9rem; + min-height: 1.9rem; + font-weight: 400; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.notification > .timestamp { + position: absolute; + right: 0; + top: -.2rem; + color: #52B6CC; + margin: 13px 15px 0 0; + padding: 0; + display: inline; + line-height: 16px; +} + +.notification > img { + float: left; + display: block; + width: 24px; + height: 24px; + margin: 15px 10px; + pointer-events: none; +} + +.notification.disappearing, +#notification-toaster.disappearing { + transition: transform 0.3s linear; + transform: translateX(100%); +} + +.notification.disappearing ~ .notification { + transition: transform 0.3s linear; + transform: translateY(-62px); +} + +#notifications-lockscreen-container { + position: absolute; + top: 18rem; + left: 0; + width: 100%; + max-height: 186px; + overflow-x: hidden; + overflow-y: auto; + + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), + rgba(0, 0, 0, 0.6) 78%, + rgba(0, 0, 0, 0)); + background-size: 100% 186px; +} + +#notifications-lockscreen-container .notification { + background-color: transparent; +} diff --git a/apps/system/style/notifications/ringtones/notifier_exclamation.ogg b/apps/system/style/notifications/ringtones/notifier_exclamation.ogg new file mode 100644 index 0000000..d953a9a --- /dev/null +++ b/apps/system/style/notifications/ringtones/notifier_exclamation.ogg Binary files differ diff --git a/apps/system/style/permission_manager/images/PermissionsDialogIcons_Camera.png b/apps/system/style/permission_manager/images/PermissionsDialogIcons_Camera.png new file mode 100755 index 0000000..3be8cb5 --- /dev/null +++ b/apps/system/style/permission_manager/images/PermissionsDialogIcons_Camera.png Binary files differ diff --git a/apps/system/style/permission_manager/images/PermissionsDialogIcons_Contacts.png b/apps/system/style/permission_manager/images/PermissionsDialogIcons_Contacts.png new file mode 100755 index 0000000..f11d9d9 --- /dev/null +++ b/apps/system/style/permission_manager/images/PermissionsDialogIcons_Contacts.png Binary files differ diff --git a/apps/system/style/permission_manager/images/PermissionsDialogIcons_DeviceStorage.png b/apps/system/style/permission_manager/images/PermissionsDialogIcons_DeviceStorage.png new file mode 100755 index 0000000..069eb48 --- /dev/null +++ b/apps/system/style/permission_manager/images/PermissionsDialogIcons_DeviceStorage.png Binary files differ diff --git a/apps/system/style/permission_manager/images/PermissionsDialogIcons_FMRadio.png b/apps/system/style/permission_manager/images/PermissionsDialogIcons_FMRadio.png new file mode 100755 index 0000000..fc63d12 --- /dev/null +++ b/apps/system/style/permission_manager/images/PermissionsDialogIcons_FMRadio.png Binary files differ diff --git a/apps/system/style/permission_manager/images/PermissionsDialogIcons_Geolocation.png b/apps/system/style/permission_manager/images/PermissionsDialogIcons_Geolocation.png new file mode 100755 index 0000000..936a627 --- /dev/null +++ b/apps/system/style/permission_manager/images/PermissionsDialogIcons_Geolocation.png Binary files differ diff --git a/apps/system/style/permission_manager/images/PermissionsDialogIcons_WifiInformation.png b/apps/system/style/permission_manager/images/PermissionsDialogIcons_WifiInformation.png new file mode 100755 index 0000000..903314c --- /dev/null +++ b/apps/system/style/permission_manager/images/PermissionsDialogIcons_WifiInformation.png Binary files differ diff --git a/apps/system/style/permission_manager/permission_manager.css b/apps/system/style/permission_manager/permission_manager.css new file mode 100644 index 0000000..49e34b8 --- /dev/null +++ b/apps/system/style/permission_manager/permission_manager.css @@ -0,0 +1,86 @@ +#permission-screen { + position: absolute; + top: 20px; + left: 0; + width: 100%; + height: -moz-calc(100% - 20px); + background-color: rgba(0,0,0,0.4); + -moz-transition: opacity 0.5s ease; + pointer-events: none; + display: none; +} + +#screen:-moz-full-screen-ancestor > #permission-screen, +#screen.fullscreen-app #permission-screen { + top: 0; + height: 100%; +} + +#screen.attention #permission-screen { + top: 40px; + height: -moz-calc(100% - 40px); +} + +#permission-screen.visible { + pointer-events: auto; + display: inline-block; +} + +#permission-remember-section { + height: 6rem; + border-top: 0.1rem solid #686868; + width: 100%; + position: relative; +} + +#permission-remember-section { + display: none; +} + +#permission-message { + background-image: none; + background-repeat: no-repeat no-repeat; + min-height: 64px; +} + +#permission-screen[data-type] #permission-remember-section, +#permission-screen[data-type] #permission-icon { + display: inherit; +} + +#permission-screen[data-type] #permission-message { + padding-left: 64px; +} + +#permission-remember-section label { + position: absolute; + right: 1rem; +} + +#permission-remember-label { + line-height: 5rem; +} + +#permission-screen[data-type="geolocation"] #permission-message { + background-image: url('images/PermissionsDialogIcons_Geolocation.png'); +} + +#permission-screen[data-type="fmradio"] #permission-message { + background-image: url('images/PermissionsDialogIcons_FMRadio.png'); +} + +#permission-screen[data-type*="camera"] #permission-message { + background-image: url('images/PermissionsDialogIcons_Camera.png'); +} + +#permission-screen[data-type*="wifi"] #permission-message { + background-image: url('images/PermissionsDialogIcons_WifiInformation.png'); +} + +#permission-screen[data-type="contacts"] #permission-message { + background-image: url('images/PermissionsDialogIcons_Contacts.png'); +} + +#permission-screen[data-type*="device-storage"] #permission-message { + background-image: url('images/PermissionsDialogIcons_DeviceStorage.png'); +} diff --git a/apps/system/style/pinlock/pinlock.css b/apps/system/style/pinlock/pinlock.css new file mode 100644 index 0000000..307763f --- /dev/null +++ b/apps/system/style/pinlock/pinlock.css @@ -0,0 +1,92 @@ +#pinkeypadscreen { + position: absolute; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + background-color: #fff; + -moz-user-select: none; + transition: transform 0.3s ease; +} + +#pinkeypadscreen > #pinkeypadscreen-container { + width: 100%; + margin-top: 20px; +} + +#pinkeypadscreen-desc { + width: 100%; + height: 50px; + line-height: 50px; + background-color: rgba(0, 0, 0, 0.85); + margin: 0; + text-align: center; + vertical-align: middle; + border: 0px; + font-size: 32px; +} + +#pinkeypadscreen-code { + bottom: 500px; + height: 60px; + width: 100%; + background-color: rgba(255, 255, 255, 0.75); + margin: 0; +} + +#pinkeypadscreen-code > span { + -moz-box-sizing: border-box; + display: block; + width: 100%; + height: 100%; + line-height: 40px; + text-align: center; + border: 10px solid #888; + box-shadow: 0 0 10px #fff inset; +} + +#pinkeypadscreen-display { + font-size: 50px; + color: #000; +} + +#pinkeypadscreen-pad { + -moz-box-sizing: border-box; + border: 1px solid #919191; + bottom: 0; + height: 350px; + width: 100%; + padding: 4px; +} + +#pinkeypadscreen-pad > a { + -moz-box-sizing: border-box; + display: block; + float: left; + width: calc(33.333% - 8px); + height: 60px; + line-height: 60px; + font-size: 48px; + margin: 4px; + text-align: center; + border: 1px solid #919191; + border-radius: 8px; + outline: none; + color: #919191; + text-decoration: none; +} + +#pinkeypadscreen-pad > a:active { + background-color: rgb(0, 0, 0); + color: #ccc; +} + +#pinkeypadscreen-pad > a.pinkeypadscreen-pad-func { + font-size: 20px; +} + +#pinkeypadscreen-pad > a.pinkeypadscreen-pad-func-full { + width: calc(100% - 8px); + font-size: 20px; +} + diff --git a/apps/system/style/popup_manager/popup_manager.css b/apps/system/style/popup_manager/popup_manager.css new file mode 100644 index 0000000..a33f9a1 --- /dev/null +++ b/apps/system/style/popup_manager/popup_manager.css @@ -0,0 +1,112 @@ +#popup-container { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + visibility: hidden; + opacity: 1; + background: rgba(0, 0, 0, 0.5); +} + +#popup-container[data-trusty="true"] { + width: 85%; + left: 7%; + top: 7%; + height: 85%; +} + +#screen.popup #popup-container { + visibility: visible; +} + +#popup-throbber { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 3px; + z-index: 1; +} + +#screen.popup #popup-container.disappearing { + pointer-events: none; + transition: visibility ease .6s, opacity ease .6s; + visibility: hidden; + opacity: 0; +} + +#popup-throbber.loading { + height: 4px; + background-image: url('../shared/progress.gif'); +} + +.popup #popup-container > #frame-container, +.popup #popup-container > .title-container { + transform: translateY(0); +} + +#popup-container[data-trusty="true"] > #frame-container, +#popup-container[data-trusty="true"] > .title-container { + transition: none; +} + +#popup-container > .title-container { + transition: transform .6s ease; + transform: translateY(-100%); + height: 5rem; + width: 100%; + top: 0; + left: 0; + position: absolute; +} + +#popup-container > #frame-container { + position: absolute; + top: 5rem; + left: 0; + width: 100%; + height: -moz-calc(100% - 5rem); + + background-color: #fff; + transform: translateY(100%); + transition: transform .6s ease; +} + +#popup-container[data-trusty="true"] > #frame-container { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #fff; +} + +#popup-error-dialog { + -moz-box-sizing: border-box; + height: 100%; + width: 100%; + z-index: 1024; + display: none; + background-color: black; + background-image: url(../modal_dialog/images/error_bk.png); +} + +#frame-container > iframe { + z-index: 1; +} + +#frame-container.error > #popup-error-dialog { + display: block; +} + +#popup-container[data-trusty="true"] > .title-container { + visibility: hidden; +} + +#frame-container > * { + width: 100%; + height: 100%; + border: none; +} + diff --git a/apps/system/style/quick_settings/images/airplane-mode-off.png b/apps/system/style/quick_settings/images/airplane-mode-off.png new file mode 100644 index 0000000..b037976 --- /dev/null +++ b/apps/system/style/quick_settings/images/airplane-mode-off.png Binary files differ diff --git a/apps/system/style/quick_settings/images/airplane-mode-on.png b/apps/system/style/quick_settings/images/airplane-mode-on.png new file mode 100644 index 0000000..a63b125 --- /dev/null +++ b/apps/system/style/quick_settings/images/airplane-mode-on.png Binary files differ diff --git a/apps/system/style/quick_settings/images/background.png b/apps/system/style/quick_settings/images/background.png new file mode 100644 index 0000000..a76cc48 --- /dev/null +++ b/apps/system/style/quick_settings/images/background.png Binary files differ diff --git a/apps/system/style/quick_settings/images/bluetooth-off.png b/apps/system/style/quick_settings/images/bluetooth-off.png new file mode 100644 index 0000000..4cdab70 --- /dev/null +++ b/apps/system/style/quick_settings/images/bluetooth-off.png Binary files differ diff --git a/apps/system/style/quick_settings/images/bluetooth-on.png b/apps/system/style/quick_settings/images/bluetooth-on.png new file mode 100644 index 0000000..ab1c5cd --- /dev/null +++ b/apps/system/style/quick_settings/images/bluetooth-on.png Binary files differ diff --git a/apps/system/style/quick_settings/images/data-2g-off.png b/apps/system/style/quick_settings/images/data-2g-off.png new file mode 100644 index 0000000..d64d0a8 --- /dev/null +++ b/apps/system/style/quick_settings/images/data-2g-off.png Binary files differ diff --git a/apps/system/style/quick_settings/images/data-2g-on.png b/apps/system/style/quick_settings/images/data-2g-on.png new file mode 100644 index 0000000..3143453 --- /dev/null +++ b/apps/system/style/quick_settings/images/data-2g-on.png Binary files differ diff --git a/apps/system/style/quick_settings/images/data-3g-off.png b/apps/system/style/quick_settings/images/data-3g-off.png new file mode 100644 index 0000000..37d6a82 --- /dev/null +++ b/apps/system/style/quick_settings/images/data-3g-off.png Binary files differ diff --git a/apps/system/style/quick_settings/images/data-3g-on.png b/apps/system/style/quick_settings/images/data-3g-on.png new file mode 100644 index 0000000..47dbda1 --- /dev/null +++ b/apps/system/style/quick_settings/images/data-3g-on.png Binary files differ diff --git a/apps/system/style/quick_settings/images/data-4g-off.png b/apps/system/style/quick_settings/images/data-4g-off.png new file mode 100644 index 0000000..bbf45a1 --- /dev/null +++ b/apps/system/style/quick_settings/images/data-4g-off.png Binary files differ diff --git a/apps/system/style/quick_settings/images/data-4g-on.png b/apps/system/style/quick_settings/images/data-4g-on.png new file mode 100644 index 0000000..b77dd96 --- /dev/null +++ b/apps/system/style/quick_settings/images/data-4g-on.png Binary files differ diff --git a/apps/system/style/quick_settings/images/data-e-off.png b/apps/system/style/quick_settings/images/data-e-off.png new file mode 100644 index 0000000..d8215a8 --- /dev/null +++ b/apps/system/style/quick_settings/images/data-e-off.png Binary files differ diff --git a/apps/system/style/quick_settings/images/data-e-on.png b/apps/system/style/quick_settings/images/data-e-on.png new file mode 100644 index 0000000..491a07d --- /dev/null +++ b/apps/system/style/quick_settings/images/data-e-on.png Binary files differ diff --git a/apps/system/style/quick_settings/images/data-h+-off.png b/apps/system/style/quick_settings/images/data-h+-off.png new file mode 100644 index 0000000..85238ee --- /dev/null +++ b/apps/system/style/quick_settings/images/data-h+-off.png Binary files differ diff --git a/apps/system/style/quick_settings/images/data-h+-on.png b/apps/system/style/quick_settings/images/data-h+-on.png new file mode 100644 index 0000000..968abbb --- /dev/null +++ b/apps/system/style/quick_settings/images/data-h+-on.png Binary files differ diff --git a/apps/system/style/quick_settings/images/data-h-off.png b/apps/system/style/quick_settings/images/data-h-off.png new file mode 100644 index 0000000..99b2dc9 --- /dev/null +++ b/apps/system/style/quick_settings/images/data-h-off.png Binary files differ diff --git a/apps/system/style/quick_settings/images/data-h-on.png b/apps/system/style/quick_settings/images/data-h-on.png new file mode 100644 index 0000000..9ba3649 --- /dev/null +++ b/apps/system/style/quick_settings/images/data-h-on.png Binary files differ diff --git a/apps/system/style/quick_settings/images/data-o-off.png b/apps/system/style/quick_settings/images/data-o-off.png new file mode 100644 index 0000000..75dbf17 --- /dev/null +++ b/apps/system/style/quick_settings/images/data-o-off.png Binary files differ diff --git a/apps/system/style/quick_settings/images/data-o-on.png b/apps/system/style/quick_settings/images/data-o-on.png new file mode 100644 index 0000000..ae8791b --- /dev/null +++ b/apps/system/style/quick_settings/images/data-o-on.png Binary files differ diff --git a/apps/system/style/quick_settings/images/data-off.png b/apps/system/style/quick_settings/images/data-off.png new file mode 100644 index 0000000..dcaf9f4 --- /dev/null +++ b/apps/system/style/quick_settings/images/data-off.png Binary files differ diff --git a/apps/system/style/quick_settings/images/power-save-off.png b/apps/system/style/quick_settings/images/power-save-off.png new file mode 100644 index 0000000..1d740ef --- /dev/null +++ b/apps/system/style/quick_settings/images/power-save-off.png Binary files differ diff --git a/apps/system/style/quick_settings/images/power-save-on.png b/apps/system/style/quick_settings/images/power-save-on.png new file mode 100644 index 0000000..c0e3ca4 --- /dev/null +++ b/apps/system/style/quick_settings/images/power-save-on.png Binary files differ diff --git a/apps/system/style/quick_settings/images/settings-off.png b/apps/system/style/quick_settings/images/settings-off.png new file mode 100644 index 0000000..68fe921 --- /dev/null +++ b/apps/system/style/quick_settings/images/settings-off.png Binary files differ diff --git a/apps/system/style/quick_settings/images/settings-on.png b/apps/system/style/quick_settings/images/settings-on.png new file mode 100644 index 0000000..d38c3c1 --- /dev/null +++ b/apps/system/style/quick_settings/images/settings-on.png Binary files differ diff --git a/apps/system/style/quick_settings/images/wifi-off.png b/apps/system/style/quick_settings/images/wifi-off.png new file mode 100644 index 0000000..a7af54e --- /dev/null +++ b/apps/system/style/quick_settings/images/wifi-off.png Binary files differ diff --git a/apps/system/style/quick_settings/images/wifi-on.png b/apps/system/style/quick_settings/images/wifi-on.png new file mode 100644 index 0000000..ad0d1f6 --- /dev/null +++ b/apps/system/style/quick_settings/images/wifi-on.png Binary files differ diff --git a/apps/system/style/quick_settings/quick_settings.css b/apps/system/style/quick_settings/quick_settings.css new file mode 100644 index 0000000..80a49e9 --- /dev/null +++ b/apps/system/style/quick_settings/quick_settings.css @@ -0,0 +1,129 @@ +html, body { + font-family: 'MozTT', sans-serif; + font-size: 10px; +} + +#quick-settings { + display: block; + width: 100%; + height: 60px; + padding: 0; + + background-image: url(images/background.png); + background-size: 100% 60px; + + border-top:1px black solid; +} + +#quick-settings > a { + display: block; + float: left; + width: -moz-calc(20% - 2px); + height: 30px; + margin: 15px 0; + padding: 0; + color: #fff; + text-align: center; + text-decoration: none; + outline: none; + font-size: 1.4rem; + line-height: 1.8rem; +} + +#quick-settings > .separator { + border-right: 1px black solid; + border-left: 1px gray solid; + margin: 15px 0; + height: 30px; + float: left; +} + +#quick-settings > a:first-child { + width: -moz-calc(20% - 1px); + border-left: 0; +} + +#quick-settings > a:last-child { + width: -moz-calc(20% - 1px); + border-right: 0; +} + +#quick-settings > a { + background-position: center; + background-repeat: no-repeat; +} +#quick-settings > *[data-initializing] { + opacity: 0.5; +} +#quick-settings-wifi { + background-image: url(images/wifi-off.png); +} +#quick-settings-wifi[data-enabled] { + background-image: url(images/wifi-on.png); +} +#quick-settings-data { + background-image: url(images/data-off.png); +} +#quick-settings-data[data-network="2G"] { + background-image: url(images/data-2g-off.png); +} +#quick-settings-data[data-enabled][data-network="2G"] { + background-image: url(images/data-2g-on.png); +} +#quick-settings-data[data-network="3G"] { + background-image: url(images/data-3g-off.png); +} +#quick-settings-data[data-enabled][data-network="3G"] { + background-image: url(images/data-3g-on.png); +} +#quick-settings-data[data-network="4G"] { + background-image: url(images/data-4g-off.png); +} +#quick-settings-data[data-enabled][data-network="4G"] { + background-image: url(images/data-4g-on.png); +} +#quick-settings-data[data-network="E"] { + background-image: url(images/data-e-off.png); +} +#quick-settings-data[data-enabled][data-network="E"] { + background-image: url(images/data-e-on.png); +} +#quick-settings-data[data-network="H"] { + background-image: url(images/data-h-off.png); +} +#quick-settings-data[data-enabled][data-network="H"] { + background-image: url(images/data-h-on.png); +} +#quick-settings-data[data-network="H+"] { + background-image: url(images/data-h+-off.png); +} +#quick-settings-data[data-enabled][data-network="H+"] { + background-image: url(images/data-h+-on.png); +} +#quick-settings-data[data-network="O"] { + background-image: url(images/data-o-off.png); +} +#quick-settings-data[data-enabled][data-network="O"] { + background-image: url(images/data-o-on.png); +} +#quick-settings-bluetooth { + background-image: url(images/bluetooth-off.png); +} +#quick-settings-bluetooth[data-enabled] { + background-image: url(images/bluetooth-on.png); +} +#quick-settings-airplane-mode { + background-image: url(images/airplane-mode-off.png); +} +#quick-settings-airplane-mode[data-enabled] { + background-image: url(images/airplane-mode-on.png); +} +#quick-settings-full-app { + background-image: url(images/settings-off.png); +} +#quick-settings-full-app:active { + background-image: url(images/settings-on.png); +} +.quick-settings-airplane-mode { + opacity: 0.5; +} diff --git a/apps/system/style/shared/progress.gif b/apps/system/style/shared/progress.gif new file mode 100644 index 0000000..654a2fd --- /dev/null +++ b/apps/system/style/shared/progress.gif Binary files differ diff --git a/apps/system/style/simcard.css b/apps/system/style/simcard.css new file mode 100644 index 0000000..d583dc0 --- /dev/null +++ b/apps/system/style/simcard.css @@ -0,0 +1,52 @@ +#simpin-dialog { + background: white; + color: #000; +} + +#simpin-dialog section[role="region"] { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +#simpin-dialog .container { + padding-left: 20px; + font-size: 1.5em; +} + +#simpin-dialog .container > div { + padding-top: 10px; +} + +#errorMsg{ + padding: 1rem; +} + +#simpin-dialog .error #messageHeader { + color: red; +} + +/* for simpin error message, + * to override [role="dialog"] rules in core.css*/ +#messageBody { + color: #000; + white-space: normal; +} + +#simpin-dialog .input-wrapper { + position: relative; +} + +#simpin-dialog .input-wrapper input { + font-size: 2.0em; + display: block; +} + +#simpin-dialog .input-wrapper input[type="text"] { + width: auto; + pointer-events: none; + position: absolute; + top: 0; +} + diff --git a/apps/system/style/sleep_menu/images/airplane.png b/apps/system/style/sleep_menu/images/airplane.png new file mode 100644 index 0000000..1c03a6b --- /dev/null +++ b/apps/system/style/sleep_menu/images/airplane.png Binary files differ diff --git a/apps/system/style/sleep_menu/images/power-off.png b/apps/system/style/sleep_menu/images/power-off.png new file mode 100644 index 0000000..5e6d2f7 --- /dev/null +++ b/apps/system/style/sleep_menu/images/power-off.png Binary files differ diff --git a/apps/system/style/sleep_menu/images/restart.png b/apps/system/style/sleep_menu/images/restart.png new file mode 100644 index 0000000..3ba3b87 --- /dev/null +++ b/apps/system/style/sleep_menu/images/restart.png Binary files differ diff --git a/apps/system/style/sleep_menu/images/vibration.png b/apps/system/style/sleep_menu/images/vibration.png new file mode 100644 index 0000000..3fa1f92 --- /dev/null +++ b/apps/system/style/sleep_menu/images/vibration.png Binary files differ diff --git a/apps/system/style/sleep_menu/sleep_menu.css b/apps/system/style/sleep_menu/sleep_menu.css new file mode 100644 index 0000000..78adc86 --- /dev/null +++ b/apps/system/style/sleep_menu/sleep_menu.css @@ -0,0 +1,125 @@ +#sleep-menu { + background-attachment: scroll, scroll; + background-clip: border-box, border-box; + background-color: transparent; + background-image: url("../themes/default/images/images/ui/pattern.png"), url("../themes/default/images/ui/gradient.png"); + background-origin: padding-box, padding-box; + background-position: left top, left top; + background-repeat: repeat, no-repeat; + background-size: auto auto, 100% 100%; + bottom: 0; + color: #FFFFFF; + font-family: "MozTT",Sans-serif; + left: 0; + overflow: hidden; + padding: 1.5rem 0 7rem; + position: absolute; + right: 0; + top: 0; + white-space: nowrap; + display: none; +} + +#sleep-menu-container { + -moz-box-sizing: padding-box; + display: inline-block; + padding: 0 2.5rem 0 2rem; + vertical-align: middle; + white-space: normal; + width: 100%; +} + +#sleep-menu.visible { + display: block; +} + +#sleep-menu-container h3 { + border-bottom: 0.1rem solid #686868; + color: #FFFFFF; + font-family: 'MozTT',Sans-serif; + font-size: 1.6rem; + font-weight: normal; + line-height: 1em; + margin: 0 0 1rem; + padding-bottom: 1rem; +} + +#sleep-menu-container ul { + margin: -1rem -4rem 0; + max-height: 37rem; + overflow: auto; + padding: 0 4rem; + position: relative; +} + +#sleep-menu-container li { + -moz-transition: background 0.2s ease 0s; + border-bottom: 1px solid #666666; + color: #FFFFFF; + font-family: 'MozTT',Sans-serif; + font-size: 2.2rem; + font-weight: lighter; + height: 5.9rem; + line-height: 5.9rem; + list-style: none outside none; + margin: 0; + padding-bottom: 1px; + position: relative; + display: block; + text-decoration: none; +} + +#sleep-menu-container li:active { + background: #00ABCC; + color: #fff!important; +} + +#sleep-menu menu { + background: url("../themes/default/images/ui/pattern.png") repeat scroll left top #2D2D2D; + border-top: 1px solid rgba(255, 255, 255, 0.1); + bottom: 0; + display: block; + left: 0; + margin: 0; + overflow: hidden; + padding: 1.5rem; + position: absolute; + right: 0; + white-space: nowrap; +} + +#sleep-menu menu button::-moz-focus-inner { + border: medium none; + outline: medium none; +} + +#sleep-menu menu button { + -moz-box-sizing: border-box; + background: url("../themes/default/images/ui/default.png") repeat-x scroll left bottom #FAFAFA; + border: 1px solid #9F9F9F; + border-radius: 0.3rem 0.3rem 0.3rem 0.3rem; + color: #333333; + display: inline-block; + font-family: 'MozTT',Sans-serif; + font-size: 1.6rem; + font-weight: 600; + height: 3.8rem; + line-height: 3.8rem; + margin: 0 0 1rem; + outline: medium none; + overflow: hidden; + padding: 0 1.5rem; + text-align: center; + text-decoration: none; + text-overflow: ellipsis; + text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); + vertical-align: middle; + white-space: nowrap; + width: 100%; +} + +#sleep-menu menu button:active { + background: none repeat scroll 0 0 #008AAA; + border-color: #008AAA; + color: #333333; +} diff --git a/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOff.png b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOff.png new file mode 100644 index 0000000..f3aba14 --- /dev/null +++ b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOff.png Binary files differ diff --git a/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOff_left.png b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOff_left.png new file mode 100644 index 0000000..278368f --- /dev/null +++ b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOff_left.png Binary files differ diff --git a/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOff_right.png b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOff_right.png new file mode 100644 index 0000000..588a176 --- /dev/null +++ b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOff_right.png Binary files differ diff --git a/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOn.png b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOn.png new file mode 100644 index 0000000..abb099f --- /dev/null +++ b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOn.png Binary files differ diff --git a/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOn_left.png b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOn_left.png new file mode 100644 index 0000000..a8d2ef5 --- /dev/null +++ b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOn_left.png Binary files differ diff --git a/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOn_right.png b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOn_right.png new file mode 100644 index 0000000..c287a9f --- /dev/null +++ b/apps/system/style/sound_manager/images/VolumeOverlay_Landscape_SegmentOn_right.png Binary files differ diff --git a/apps/system/style/sound_manager/images/header_bg.png b/apps/system/style/sound_manager/images/header_bg.png new file mode 100644 index 0000000..e1ff073 --- /dev/null +++ b/apps/system/style/sound_manager/images/header_bg.png Binary files differ diff --git a/apps/system/style/sound_manager/images/speaker_loud_icon.png b/apps/system/style/sound_manager/images/speaker_loud_icon.png new file mode 100644 index 0000000..8a49d8f --- /dev/null +++ b/apps/system/style/sound_manager/images/speaker_loud_icon.png Binary files differ diff --git a/apps/system/style/sound_manager/images/speaker_mute_icon.png b/apps/system/style/sound_manager/images/speaker_mute_icon.png new file mode 100644 index 0000000..7b3a397 --- /dev/null +++ b/apps/system/style/sound_manager/images/speaker_mute_icon.png Binary files differ diff --git a/apps/system/style/sound_manager/images/speaker_regular_icon.png b/apps/system/style/sound_manager/images/speaker_regular_icon.png new file mode 100644 index 0000000..e762611 --- /dev/null +++ b/apps/system/style/sound_manager/images/speaker_regular_icon.png Binary files differ diff --git a/apps/system/style/sound_manager/images/vibration.png b/apps/system/style/sound_manager/images/vibration.png new file mode 100644 index 0000000..3fa1f92 --- /dev/null +++ b/apps/system/style/sound_manager/images/vibration.png Binary files differ diff --git a/apps/system/style/sound_manager/images/vibration_disabled_icon.png b/apps/system/style/sound_manager/images/vibration_disabled_icon.png new file mode 100644 index 0000000..b529231 --- /dev/null +++ b/apps/system/style/sound_manager/images/vibration_disabled_icon.png Binary files differ diff --git a/apps/system/style/sound_manager/images/vibration_enabled_icon.png b/apps/system/style/sound_manager/images/vibration_enabled_icon.png new file mode 100644 index 0000000..e28b3b7 --- /dev/null +++ b/apps/system/style/sound_manager/images/vibration_enabled_icon.png Binary files differ diff --git a/apps/system/style/sound_manager/images/volume-off.png b/apps/system/style/sound_manager/images/volume-off.png new file mode 100644 index 0000000..edee64e --- /dev/null +++ b/apps/system/style/sound_manager/images/volume-off.png Binary files differ diff --git a/apps/system/style/sound_manager/images/volume-on.png b/apps/system/style/sound_manager/images/volume-on.png new file mode 100644 index 0000000..d7ef462 --- /dev/null +++ b/apps/system/style/sound_manager/images/volume-on.png Binary files differ diff --git a/apps/system/style/sound_manager/images/volume_center_active.png b/apps/system/style/sound_manager/images/volume_center_active.png new file mode 100644 index 0000000..6c80874 --- /dev/null +++ b/apps/system/style/sound_manager/images/volume_center_active.png Binary files differ diff --git a/apps/system/style/sound_manager/images/volume_center_disabled.png b/apps/system/style/sound_manager/images/volume_center_disabled.png new file mode 100644 index 0000000..76ad232 --- /dev/null +++ b/apps/system/style/sound_manager/images/volume_center_disabled.png Binary files differ diff --git a/apps/system/style/sound_manager/images/volume_left_active.png b/apps/system/style/sound_manager/images/volume_left_active.png new file mode 100644 index 0000000..cb1f105 --- /dev/null +++ b/apps/system/style/sound_manager/images/volume_left_active.png Binary files differ diff --git a/apps/system/style/sound_manager/images/volume_left_disabled.png b/apps/system/style/sound_manager/images/volume_left_disabled.png new file mode 100644 index 0000000..1e78c6f --- /dev/null +++ b/apps/system/style/sound_manager/images/volume_left_disabled.png Binary files differ diff --git a/apps/system/style/sound_manager/images/volume_right_active.png b/apps/system/style/sound_manager/images/volume_right_active.png new file mode 100644 index 0000000..dcdee3a --- /dev/null +++ b/apps/system/style/sound_manager/images/volume_right_active.png Binary files differ diff --git a/apps/system/style/sound_manager/images/volume_right_disabled.png b/apps/system/style/sound_manager/images/volume_right_disabled.png new file mode 100644 index 0000000..d02eb4e --- /dev/null +++ b/apps/system/style/sound_manager/images/volume_right_disabled.png Binary files differ diff --git a/apps/system/style/sound_manager/sound_manager.css b/apps/system/style/sound_manager/sound_manager.css new file mode 100644 index 0000000..cdfaab3 --- /dev/null +++ b/apps/system/style/sound_manager/sound_manager.css @@ -0,0 +1,184 @@ +#volume { + text-align: center; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 40px; + -moz-transition: opacity 0.5s ease; + pointer-events: none; + display: none; + background-image: url("images/header_bg.png"); +} + +#volume > * { + line-height: 40px; + height: 40px; + display: inline-block; + float: left; + background-repeat: no-repeat, no-repeat; + background-position: center, center; +} + +#volume span { + display: inline-block; + width: 25px; + float: left; +} + +#volume span.vibration { + visibility: hidden; + margin-left: 5px; + background-image: url('images/vibration_disabled_icon.png'); +} + +#volume.vibration span.vibration { + background-image: url('images/vibration_enabled_icon.png'); +} + +#volume.mute span.mute-state { + background-image: url('images/speaker_mute_icon.png'); +} + +#volume span.mute-state { + background-image: url('images/speaker_regular_icon.png'); +} + +#volume span.volume { + margin-left: 5px; + background-image: url('images/speaker_loud_icon.png'); +} + +#volume.visible { + display: block; +} + +#volume[data-channel="notification"] span.vibration { + visibility: visible; +} + +#volume[data-channel="bt_sco"] div:nth-child(n+4), +#volume[data-channel="content"] div:nth-child(n+4), +#volume[data-channel="alarm"] div:nth-child(n+4), +#volume[data-channel="notification"] div:nth-child(n+4) { + width: 12px; + margin-left: 2px; + background-image: url('images/volume_center_disabled.png'); +} + +#volume[data-channel="telephony"] div:nth-child(n+4) { + width: 42px; + margin-left: 2px; + background-image: url('images/volume_center_disabled.png'); +} + +#volume[data-channel="bt_sco"] div.active:nth-child(n+4), +#volume[data-channel="content"] div.active:nth-child(n+4), +#volume[data-channel="alarm"] div.active:nth-child(n+4), +#volume[data-channel="notification"] div.active:nth-child(n+4), +#volume[data-channel="telephony"] div.active:nth-child(n+4) { + background-image: url('images/volume_center_active.png'); +} + +#volume div:nth-child(3) { + background-image: url('images/volume_left_disabled.png'); +} + +#volume div.active:nth-child(3) { + background-image: url('images/volume_left_active.png'); +} + +#volume[data-channel="bt_sco"] div:nth-child(17), +#volume[data-channel="alarm"] div:nth-child(17), +#volume[data-channel="notification"] div:nth-child(17), +#volume[data-channel="content"] div:nth-child(17), +#volume[data-channel="telephony"] div:nth-child(7) { + background-image: url('images/volume_right_disabled.png'); +} + +#volume[data-channel="bt_sco"] div.active:nth-child(17), +#volume[data-channel="alarm"] div.active:nth-child(17), +#volume[data-channel="notification"] div.active:nth-child(17), +#volume[data-channel="content"] div.active:nth-child(17), +#volume[data-channel="telephony"] div.active:nth-child(7) { + background-image: url('images/volume_right_active.png'); +} + +#volume[data-channel="telephony"] div:nth-child(n+8) { + display: none; +} + +#volume[data-channel="notification"] > div:nth-child(n+3), +#volume[data-channel="alarm"] > div:nth-child(n+3), +#volume[data-channel="bt_sco"] > div:nth-child(n+3), +#volume[data-channel="content"] > div:nth-child(n+3) { + width: 12px; + background-size: 12px 10px; +} + +#volume[data-channel="telephony"] > div:nth-child(n+3) { + width: 42px; + background-size: 42px 10px; +} + +@media (orientation: landscape) and (width: 480px) { + #volume[data-channel="bt_sco"] div:nth-child(n+4), + #volume[data-channel="content"] div:nth-child(n+4), + #volume[data-channel="alarm"] div:nth-child(n+4), + #volume[data-channel="notification"] div:nth-child(n+4), + #volume[data-channel="telephony"] div:nth-child(n+4) { + width: 36px; + margin-left: 2px; + background-size: 36px 10px; + background-image: url('images/VolumeOverlay_Landscape_SegmentOff.png'); + } + + #volume[data-channel="telephony"] div:nth-child(n+8) { + display: none; + } + + #volume[data-channel="bt_sco"] div.active:nth-child(n+4), + #volume[data-channel="content"] div.active:nth-child(n+4), + #volume[data-channel="alarm"] div.active:nth-child(n+4), + #volume[data-channel="notification"] div.active:nth-child(n+4), + #volume[data-channel="telephony"] div.active:nth-child(n+4) { + background-image: url('images/VolumeOverlay_Landscape_SegmentOn.png'); + } + + #volume div:nth-child(3) { + background-image: url('images/VolumeOverlay_Landscape_SegmentOff_left.png'); + } + + #volume div.active:nth-child(3) { + background-image: url('images/VolumeOverlay_Landscape_SegmentOn_left.png'); + } + + #volume[data-channel="bt_sco"] div:nth-child(17), + #volume[data-channel="content"] div:nth-child(17), + #volume[data-channel="alarm"] div:nth-child(17), + #volume[data-channel="notification"] div:nth-child(17), + #volume[data-channel="telephony"] div:nth-child(7) { + background-image: url('images/VolumeOverlay_Landscape_SegmentOff_right.png'); + } + + #volume[data-channel="bt_sco"] div.active:nth-child(17), + #volume[data-channel="content"] div.active:nth-child(17), + #volume[data-channel="alarm"] div.active:nth-child(17), + #volume[data-channel="notification"] div.active:nth-child(17), + #volume[data-channel="telephony"] div.active:nth-child(7) { + background-image: url('images/VolumeOverlay_Landscape_SegmentOn_right.png'); + } + + #volume[data-channel="notification"] > div:nth-child(n+3), + #volume[data-channel="alarm"] > div:nth-child(n+3), + #volume[data-channel="bt_sco"] > div:nth-child(n+3), + #volume[data-channel="content"] > div:nth-child(n+3) { + width: 22px; + background-size: 22px 10px; + } + + #volume[data-channel="telephony"] > div:nth-child(n+3) { + width: 74px; + background-size: 74px 10px; + } +} diff --git a/apps/system/style/statusbar/images/call-forwarding.png b/apps/system/style/statusbar/images/call-forwarding.png new file mode 100644 index 0000000..52d5a86 --- /dev/null +++ b/apps/system/style/statusbar/images/call-forwarding.png Binary files differ diff --git a/apps/system/style/statusbar/images/icons.png b/apps/system/style/statusbar/images/icons.png new file mode 100644 index 0000000..81f4f4c --- /dev/null +++ b/apps/system/style/statusbar/images/icons.png Binary files differ diff --git a/apps/system/style/statusbar/images/network-activity.gif b/apps/system/style/statusbar/images/network-activity.gif new file mode 100644 index 0000000..5809833 --- /dev/null +++ b/apps/system/style/statusbar/images/network-activity.gif Binary files differ diff --git a/apps/system/style/statusbar/images/signal-searching.gif b/apps/system/style/statusbar/images/signal-searching.gif new file mode 100644 index 0000000..f9b1da0 --- /dev/null +++ b/apps/system/style/statusbar/images/signal-searching.gif Binary files differ diff --git a/apps/system/style/statusbar/images/system-downloads.gif b/apps/system/style/statusbar/images/system-downloads.gif new file mode 100644 index 0000000..bf24971 --- /dev/null +++ b/apps/system/style/statusbar/images/system-downloads.gif Binary files differ diff --git a/apps/system/style/statusbar/images/wifi-connecting.gif b/apps/system/style/statusbar/images/wifi-connecting.gif new file mode 100644 index 0000000..6cf37dd --- /dev/null +++ b/apps/system/style/statusbar/images/wifi-connecting.gif Binary files differ 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; +} diff --git a/apps/system/style/system/keyboard.css b/apps/system/style/system/keyboard.css new file mode 100644 index 0000000..dab5939 --- /dev/null +++ b/apps/system/style/system/keyboard.css @@ -0,0 +1,28 @@ +#keyboard-frame { + /* See the new mozpasspointerevents attribute added in bug 796452 */ + pointer-events: none; + + position: absolute; + bottom: 0; + + width: 100%; + height: 100%; + + transform: translateY(0); + -moz-transition: visibility 0.2s ease, -moz-transform 0.2s ease; +} + +#keyboard-frame.hide { + visibility: hidden; + + transform: translateY(100%); +} + +#keyboard-frame iframe { + position: absolute; + bottom: 0; + + width: 100%; + height: 100%; + border: 0; +} diff --git a/apps/system/style/system/system.css b/apps/system/style/system/system.css new file mode 100644 index 0000000..af2a739 --- /dev/null +++ b/apps/system/style/system/system.css @@ -0,0 +1,579 @@ +html { + font-size: 10px; +} + +@media screen and (min-width: 480px) { + html { + font-size: 13.3px; + } +} + +body { + width: 100%; + height: 100%; + margin: 0px; + padding: 0px; + + overflow: hidden; + + font-family: 'MozTT', sans-serif; + color: #fff; + font-size: 12px; +} + +#screen { + position: absolute; + overflow: hidden; + width: 100%; + height: 100%; + + background-color: #000; + background-size: cover; + background-repeat: no-repeat; + background-position: 50% 50%; +} + +#screen.screenoff { + background: #000 !important; +} + +#screen.screenoff * { + visibility: hidden !important; +} + +/* + * Poweroff animation + */ +#screen > div#poweroff-splash { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #000; +} + +#screen > div#poweroff-splash.step1 { + animation: poweroff-splash-fade-in 0.5s; +} + +@keyframes poweroff-splash-fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +.poweroff-ring { + display: block; + position: absolute; + border-radius: 50%; + width: 60px; + height: 60px; + margin-left: -30px; + margin-top: -30px; + left: 50%; + opacity: 0; +} + +#poweroff-ring-1 { + top: 120px; + background-color: #e66600; +} + +#poweroff-ring-2 { + top: 240px; + background-color: #dc4e00; +} + +#poweroff-ring-3 { + top: 360px; + background-color: #d24500; +} + +.poweroff-ring > span { + display: block; + position: absolute; + border-radius: 50%; + top: 50%; + left: 50%; + margin: auto; + background-color: black; + width: 40px; + height: 40px; + margin-top: -20px; + margin-left: -20px; +} + +#poweroff-ring-2 > span { + transform: scale(1.125); +} + +#poweroff-ring-3 > span { + transform: scale(1.25); +} + +/* Ring 1 : inner diameter scales from 40 pixel to 58 pixel */ +@keyframes ring1-scale { + 0% { + transform: scale(1); + } + 100% { + transform: scale(1.45); + } +} + +/* Ring 2 : inner diameter scales from 45 pixel to 59.5 pixel */ +@keyframes ring2-scale { + 0% { + transform: scale(1.125); + } + 100% { + transform: scale(1.4875); + } +} + +/* Ring 3 : inner diameter scales from 50 pixel to 59 pixel */ +@keyframes ring3-scale { + 0% { + transform: scale(1.25); + } + 100% { + transform: scale(1.475); + } +} + +@keyframes ring-fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes ring-fade-out { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +#screen > div#poweroff-splash.step2 > #poweroff-ring-1 { + animation: ring-fade-in .4s ease-out 0s, + ring-fade-out .5s linear .4s; +} + +#screen > div#poweroff-splash.step2 > #poweroff-ring-2 { + animation: ring-fade-in .4s ease-out .25s, + ring-fade-out .5s linear .65s; +} + +#screen > div#poweroff-splash.step2 > #poweroff-ring-3 { + animation: ring-fade-in .4s ease-out .5s, + ring-fade-out .5s linear .9s; +} + +#screen > div#poweroff-splash.step2 > #poweroff-ring-1 > span { + animation: ring1-scale .5s linear .4s; +} + +#screen > div#poweroff-splash.step2 > #poweroff-ring-2 > span { + animation: ring2-scale .5s linear .65s; +} + +#screen > div#poweroff-splash.step2 > #poweroff-ring-3 > span { + animation: ring3-scale .5s linear .9s; +} + + + +#system-overlay { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + visibility: hidden; + + pointer-events: none; +} + +#system-overlay.volume { + visibility: visible; +} + +#windows { + position: absolute; + left: 0px; + width: 100%; + top: -100%; + height: 0; + max-height: 0; + border: 0px; + overflow: hidden; +} + +#windows.active { + top: 0; + height: 100%; + max-height: 100%; +} + +#windows > .appWindow { + position: fixed; + border: 0; + margin: 0; + padding: 0; + overflow: hidden; + left: 0; + top: 20px; + + /* Need to leave this in here to prevent flickering. */ + transform: scale(1); + +/* + * Do not specify height/width here! + * They should be handle executively in window_manager.js + * + */ + +/* + * Disable this for now because it forces an expensive fallback path in + * Gecko. The performance issue should be fixed by + * https://bugzilla.mozilla.org/show_bug.cgi?id=697645 or a related bug. + * + border-radius: 8px; + */ +} + +#windows > .appWindow > iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; +} + +#screen.active-statusbar #windows > .appWindow { + top: 40px; +} + +#windows > .appWindow:not(.homescreen) { + background-color: #fff; +} + +#windows > .appWindow:not(.homescreen).default-background { + background: url('/shared/resources/branding/splash_screen_generic.png') center center no-repeat #fff; +} + +#windows > .appWindow:not(.active):not(.homescreen):not(.opening):not(.closing) { + visibility: hidden; +} + +#windows > .appWindow:not(.homescreen):not(.active):not(.inlineActivity):not(.opening) { + opacity: 0; + transform: scale(0.6); +} + +#windows > .appWindow.opening { + transition: transform 0.25s ease, opacity 0.15s ease; +} + +#windows.slow-transition > .appWindow.opening { + transition: transform 5s ease, opacity 3s ease; +} + +#screen.cards-view > #windows > .appWindow.opening, +#screen.cards-view > #windows > .appWindow.closing, +#screen.switch-app > #windows > .appWindow.opening, +#screen.switch-app > #windows > .appWindow.closing { + transition: transform 0.25s ease; + visibility: inherit; + opacity: 1; +} + +#screen.switch-app > #windows.slow-transition > .appWindow.opening, +#screen.switch-app > #windows.slow-transition > .appWindow.closing { + transition: transform 5s ease; +} + +#screen.switch-app > #windows > .appWindow.opening-card { + transform: translateX(70%) scale(0.6); + visibility: inherit; + opacity: 1; +} + +#screen.switch-app > #windows > .appWindow.opening-switching { + transform: scale(0.6); + transition: transform 0.25s ease; + visibility: inherit; + opacity: 1; +} + +#screen.switch-app > #windows.slow-transition > .appWindow.opening-switching { + transition: transform 5s ease; +} + +#screen.switch-app > #windows > .appWindow.closing-card { + transform: translateX(-70%) scale(0.6); + transition: transform 0.25s ease; + visibility: inherit; + opacity: 1; +} + +#screen.switch-app > #windows.slow-transition > .appWindow.closing-card { + transition: transform 5s ease; +} + +#windows > .appWindow.closing { + transition: transform 0.25s ease, opacity 0.15s ease 0.1s; +} + +#windows.slow-transition > .appWindow.closing { + transition: transform 5s ease, opacity 3s ease 2s; +} + +#windows > .appWindow.inlineActivity, +#windows > .appWindow.hideBottom { + transform: translateY(100%); + transition: transform 0.25s ease, visibility 0.25s ease; +} + +#windows.slow-transition > .appWindow.inlineActivity, +#windows.slow-transition > .appWindow.hideBottom { + transition: transform 5s ease, visibility 5s ease; +} + +#windows > .appWindow.back { + transition: transform 0.25s ease, visibility 0.25s ease; + transform: scale(0.86); +} + +#windows > .appWindow.restored { + transform: none; + transition: transform 0.25s ease; +} + +#windows > .appWindow.inlineActivity.active { + transform: none; +} + +#screen > #windows > .appWindow.fullscreen-app { + top: 0; +} + +#screen.attention > #windows > .appWindow.fullscreen-app, +#screen.attention > #windowSprite, +#screen.fullscreen-app.attention > #windowSprite { + height: calc(100% - 40px); + top: 40px; +} + +#windowSprite.before-inline-activity { + transform: translateY(calc(100% - 1px)); + opacity: 1; + visibility: visible; +} + +#windowSprite.inline-activity-opening { + transition: transform 0.25s ease; + transform: translateY(0); + opacity: 1; + visibility: visible; +} + +#windowSprite.inline-activity-opened { + transition: opacity 0.15s ease; + + transform: translateY(0); + opacity: 0; + visibility: visible; +} + +#windowSprite.before-open { + transform: scale(0.6); + /* 0.01 opacity is needed to make sure Gecko paints and fire + MozAfterPaint event for us. */ + opacity: 0.01; + visibility: visible; +} + +#windowSprite.opening { + transition: transform 0.25s ease, opacity 0.15s ease; + + transform: scale(1); + opacity: 1; + visibility: visible; +} + +#screen.trustedui #windowSprite.opening { + opacity: 0; +} + +#windowSprite.opened { + transition: opacity 0.15s ease; + + transform: scale(1); + opacity: 0; + visibility: visible; +} + +#windowSprite.before-close { + transform: scale(1); + /* 0.01 opacity is needed to make sure Gecko paints and fire + MozAfterPaint event for us. */ + opacity: 0.01; + visibility: visible; +} + +#windowSprite.closing { + transition: opacity 0.05s ease; + + transform: scale(1); + opacity: 1; + visibility: visible; +} + +#windowSprite.closed { + transition: transform 0.25s ease, opacity 0.15s ease; + + transform: scale(0.6); + opacity: 0; + visibility: visible; +} + +.accessibility-invert { + filter: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxmaWx0ZXIKICAgICAgaWQ9ImludmVydEZpbHRlciIKICAgICAgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KICAgIDxmZUNvbG9yTWF0cml4CiAgICAgICAgdmFsdWVzPSItMSAwIDAgMCAxIDAgLTEgMCAwIDEgMCAwIC0xIDAgMSAwIDAgMCAxIDAgIiAvPgogIDwvZmlsdGVyPgo8L3N2Zz4K#invertFilter); +} + +iframe.backgroundWindow { + position: absolute; + top: -1px; + left: -1px; + width: 1px; + height: 1px; + visibility: hidden; +} + +#dialog-overlay { + position: absolute; + top: 20px; + left: 0; + width: 100%; + height: calc(100% - 20px); + visibility: hidden; + pointer-events: none; +} + +#screen.active-statusbar #dialog-overlay { + top: 40px; + height: calc(100% - 40px); +} + +#screen:-moz-full-screen-ancestor #dialog-overlay, +#screen.fullscreen-app #dialog-overlay { + top: 0; + height: 100%; +} + +#screen:not(.crash-dialog) #crash-dialog { + visibility: hidden; +} + +/* `.dialog` is set by system_dialog.js when a dialog is shown */ +#screen.dialog #dialog-overlay { + visibility: visible; + pointer-events: auto; +} + +#screen.authentication-dialog #dialog-overlay, +#screen.authentication-dialog #authentication-dialog, +#screen.crash-dialog #dialog-overlay, +#screen.crash-dialog #crash-dialog +#screen.modal-dialog #dialog-overlay, +#screen.modal-dialog #modal-dialog, +#screen.popup #popup-container, +#screen.trustedui #trustedui-container, +#screen.trustedui #dialog-overlay { + visibility: visible; + pointer-events: auto; +} + +@keyframes banner-bounce { + from, to { + transform: translateY(100%); + opacity: 0; + } + 12.5%, 87.5% { + transform: translateY(0); + opacity: 1; + } +} + +#system-banner { + z-index: 0; + visibility: hidden; + opacity: 0; + transform: translateY(100%); +} + +#system-banner.visible { + animation: banner-bounce 4s; + visibility: visible; +} + +#system-banner button { + width: auto; +} + +#system-banner[data-button="false"] button { + visibility: hidden; +} + +#screen iframe.communication-frame { + visibility: hidden; +} + +/* + Styles for FTU starting +*/ + +#screen.ftu > [data-z-index-level="app"] > .appWindow.homescreen, +#screen.ftu > [data-z-index-level="app"] > .appWindow.homescreen.active { + opacity: 0; +} + +#screen.ftuStarting #lockscreen { + display: none; +} + +#screen.ftuStarting #statusbar { + opacity: 0; +} + +/* For app error */ + +.appWindow > iframe { + z-index: 1; +} + +.appError { + display: none; + background-color: black; + z-index: 0; +} + +.appWindow > .appError { + background-color: black; +} + +.appError.visible { + z-index: 2; + display: block; +} diff --git a/apps/system/style/themes/default/banner.css b/apps/system/style/themes/default/banner.css new file mode 100644 index 0000000..1a23fa7 --- /dev/null +++ b/apps/system/style/themes/default/banner.css @@ -0,0 +1,36 @@ +/* ---------------------------------- + * BANNER + * Requires: + menus-dialogs/core.css + * ---------------------------------- */ + +body[role="application"] section[role="dialog"].banner { + top: auto; + height: 8rem; + padding: 0; + text-align: center; +} + +body[role="application"] section[role="dialog"].banner:after { + content: ""; + display: inline-block; + vertical-align: middle; + width: 1px; + height: 100%; +} + +body[role="application"] section[role="dialog"].banner p { + display: inline-block; + vertical-align: middle; + white-space: normal; + font-size: 1.6rem; + line-height: 1.4em; + max-width: 75%; + margin: 0; +} + +body[role="application"] section[role="dialog"].banner p strong { + text-transform: uppercase; + color: #0995b0; + font-weight: normal; +} diff --git a/apps/system/style/themes/default/buttons.css b/apps/system/style/themes/default/buttons.css new file mode 100644 index 0000000..f285c25 --- /dev/null +++ b/apps/system/style/themes/default/buttons.css @@ -0,0 +1,232 @@ +/* ---------------------------------- + + * BUTTONS: DEFAULT + * ---------------------------------- */ +[role="dialog"] button::-moz-focus-inner { + border: none; + outline: none; +} + +[role="dialog"] button, +[role="dialog"] a[role="button"] { + width: 100%; + height: 3.8rem; + margin: 0 0 1rem; + padding: 0 1.5rem; + -moz-box-sizing: border-box; + display: inline-block; + vertical-align: middle; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + background: #fafafa url(images/ui/default.png) repeat-x left bottom; + border: 1px solid #9f9f9f; + border-radius: 0.3rem; + font-size: 1.6rem; + font-family: 'MozTT', Sans-serif; + font-weight: 600; + line-height: 3.8rem; + color: #333; + text-align: center; + text-shadow: 1px 1px 0 rgba(255,255,255,0.3); + text-decoration: none; + outline: none; +} + +/* Press (default & affirmative) */ +[role="dialog"] button:active, +[role="dialog"] a[role="button"]:active, +[role="dialog"] button.affirmative:active, +[role="dialog"] a.affirmative[role="button"]:active { + border-color: #008aaa; + background: #008aaa; + color: #333; +} + +/* Affirmative */ +[role="dialog"] button.affirmative, +[role="dialog"] a[role="button"].affirmative { + background-image: url(images/ui/affirmative.png); + background-color: #00caf2; + border-color: #00acce; +} + +/* Negative */ +[role="dialog"] button.negative, +[role="dialog"] a.negative[role="button"] { + background-image: url(images/ui/negative.png); + background-color: #b70404; + color: #fff; + text-shadow: -1px -1px 0 #830b0b; + border: none; +} + +/* Negative Press */ +[role="dialog"] button.negative:active, +[role="dialog"] a[role="button"].negative:active { + background-image: url(images/ui/negative-press.png); + background-color: #890707; +} + +/* Disabled (default & affirmative) */ +[role="dialog"] button[disabled="disabled"], +[role="dialog"] a[role="button"][aria-disabled="true"], +[role="dialog"] button[disabled="disabled"].affirmative, +[role="dialog"] a[role="button"][aria-disabled="true"].affirmative { + background-image: url(images/ui/disabled-bright.png); + background-color: transparent; + border-color: #dadada; + color: #bcbcbc; +} + +/* Disabled dark (default & affirmative) */ +[role="dialog"] menu button[disabled="disabled"], +[role="dialog"] menu a[role="button"][aria-disabled="true"], +[role="dialog"] menu button[disabled="disabled"].affirmative, +[role="dialog"] menu a[role="button"][aria-disabled="true"].affirmative { + background-image: url(images/ui/disabled-dark.png); + background-color: transparent; + border: none; + color: #4a4a4a; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); +} + +/* Negative disabled */ +[role="dialog"] button[disabled="disabled"].negative, +[role="dialog"] a[role="button"][aria-disabled="true"].negative { + background-image: url(images/ui/negative-disabled.png); + color: #fff; + text-shadow: none; +} + +/* Icons in buttons */ +[role="dialog"] button span, +[role="dialog"] a[role="button"] span { + float: left; + width: 2.5rem; + height: 2.5rem; + margin: 0 0.5rem 0 -1rem; + background: transparent no-repeat center center; +} + +[role="dialog"] button span.end, +[role="dialog"] a[role="button"] span.end { + float: right; + margin: 0.3rem -1.5rem 0 1rem; +} + +/* Icon base types */ +[role="dialog"] button span.goto, +[role="dialog"] a[role="button"] span.goto { + background-image: url(images/icons/goto.png); +} + +[role="dialog"] button span.launch, +[role="dialog"] a[role="button"] span.launch { + background-image: url(images/icons/launch.png); + background-position: 1rem bottom; +} + +[role="dialog"] button span.favorite, +[role="dialog"] a[role="button"] span.favorite { + background-image: url(images/icons/favorite.png); +} + +[role="dialog"] button span.call, +[role="dialog"] a[role="button"] span.call { + background-image: url(images/icons/call.png); + background-position: center bottom; +} + +[role="dialog"] button span.tick, +[role="dialog"] a[role="button"] span.tick { + background-image: url(images/icons/tick.png); +} + + +/* ---------------------------------- + * BUTTONS: LIST + * ---------------------------------- */ +[role="dialog"] .buttons-list { + padding: 0; + margin: 0; + list-style: none; +} + +[role="dialog"] .buttons-list label { + font: 1.4rem/1em "MozTT", Sans-serif; + text-transform: uppercase; + display: block; + padding-left: 0.5rem; + margin-bottom: 0.5rem; +} + +/* Default */ +[role="dialog"] .buttons-list button, +[role="dialog"] .buttons-list a[role="button"] { + background: #e7e7e7; + border-color: #b6b6b6; + text-align: left; + font-size: 1.4rem; + line-height: 2.9rem; + position: relative; + overflow: visible; +} + +[role="dialog"] .buttons-list a[role="button"]:after, +[role="dialog"] .buttons-list button:after { + content: ""; + position: absolute; + left: 0; + right: 0; + top: 100%; + background: url(images/ui/shadow.png) repeat-x left bottom; + height: 2px; + margin-top: 1px; + pointer-events: none; +} + +/* Press */ +[role="dialog"] .buttons-list button:active, +[role="dialog"] .buttons-list a[role="button"]:active { + border-color: #008aaa; + background: #008aaa; + color: #333; +} + +[role="dialog"] .buttons-list a[role="button"]:active:after, +[role="dialog"] .buttons-list button:active:after { + opacity: 0; +} + +/* Disabled */ +[role="dialog"] .buttons-list button[disabled="disabled"], +[role="dialog"] .buttons-list a[role="button"][aria-disabled="true"] { + background: #ededed; + border-color: #d3d3d3; + color: #a6a6a6; +} + +[role="dialog"] .buttons-list button[disabled="disabled"]:after, +[role="dialog"] .buttons-list a[role="button"][aria-disabled="true"]:after { + opacity: 1; +} + + +/* Compact mode */ +[role="dialog"] .buttons-list[data-mode="compact"] { margin-bottom: 1rem; } +[role="dialog"] .buttons-list[data-mode="compact"] button, +[role="dialog"] .buttons-list[data-mode="compact"] a[role="button"] { + margin: -1px 0; + border-radius: 0; +} + +[role="dialog"] .buttons-list[data-mode="compact"] li:first-child button, +[role="dialog"] .buttons-list[data-mode="compact"] li:first-child a[role="button"] { + border-radius: 0.3rem 0.3rem 0 0; +} + +[role="dialog"] .buttons-list[data-mode="compact"] li:last-child button, +[role="dialog"] .buttons-list[data-mode="compact"] li:last-child a[role="button"] { + border-radius:0 0 0.3rem 0.3rem; +} diff --git a/apps/system/style/themes/default/core.css b/apps/system/style/themes/default/core.css new file mode 100644 index 0000000..c3a3170 --- /dev/null +++ b/apps/system/style/themes/default/core.css @@ -0,0 +1,101 @@ +/* ---------------------------------- + * CORE STYLES FOR DIALOGS AND MENUS + * Is required for all the subcomponents (except banner) + * ---------------------------------- */ + +[role="dialog"] { + background: url(images/ui/pattern.png) repeat left top, url(images/ui/gradient.png) no-repeat left top; + background-size: auto auto, 100% 100%; + overflow: hidden; + position: absolute; + z-index: 100; + top: 0; + left: 0; + right: 0; + bottom: 0; + white-space: nowrap; + padding: 1.5rem 0 7rem; + font-family: "MozTT", Sans-serif; + color: #fff; +} + +[role="dialog"]:before { + content: ""; + display: inline-block; + vertical-align: middle; + width: 1px; + height: 100%; +} + +[role="dialog"] .inner { + padding: 0 2.5rem 0 2rem; + -moz-box-sizing: padding-box; + width: 100%; + display: inline-block; + vertical-align: middle; + white-space: normal; +} + +[role="dialog"] h3 { + font-family: 'MozTT', Sans-serif; + font-weight: normal; + font-size: 1.6rem; + line-height: 1em; + color: #fff; + border-bottom: 0.1rem solid #686868; + margin: 0 0 1rem; + padding-bottom: 1rem; +} + +[role="dialog"] menu:not([type="toolbar"]) { + white-space: nowrap; + margin: 0; + padding: 1.5rem; + border-top: solid 1px rgba(255, 255, 255, 0.1); + background: #2d2d2d url(images/ui/pattern.png) repeat left top; + display: block; + overflow: hidden; + position: absolute; + left: 0; + right: 0; + bottom: 0; +} + +[role="dialog"] menu:not([type="toolbar"]) button:last-child, +[role="dialog"] menu:not([type="toolbar"]) a[role="button"]:last-child { + margin-left: 1rem; +} + +[role="dialog"] menu:not([type="toolbar"]) button, +[role="dialog"] menu:not([type="toolbar"]) a[role="button"], +[role="dialog"] menu:not([type="toolbar"]) button:first-child, +[role="dialog"] menu:not([type="toolbar"]) a[role="button"]:first-child { + margin: 0; +} + +[role="dialog"] menu:not([type="toolbar"])[data-items="2"] button, +[role="dialog"] menu:not([type="toolbar"])[data-items="2"] a[role="button"] { + width: -moz-calc((100% - 1rem) / 2); +} + + +/* ---------------------------------- + * INLINE BANNER + * ---------------------------------- */ + +[role="dialog"].inline { + position: relative; + margin: -0.4rem 0 0 0; + padding: 1rem 0 0 0; + background: rgba(0,0,0,0.83); +} + +[role="dialog"].inline p { + border: 0; + padding: 1rem 1.5rem; +} + +[role="dialog"].inline menu { + position: relative; + background: none; +} diff --git a/apps/system/style/themes/default/images/noise.png b/apps/system/style/themes/default/images/noise.png new file mode 100644 index 0000000..5f5428f --- /dev/null +++ b/apps/system/style/themes/default/images/noise.png Binary files differ diff --git a/apps/system/style/themes/default/images/notifications.png b/apps/system/style/themes/default/images/notifications.png new file mode 100644 index 0000000..f5e966d --- /dev/null +++ b/apps/system/style/themes/default/images/notifications.png Binary files differ diff --git a/apps/system/style/themes/default/images/notifications/close.png b/apps/system/style/themes/default/images/notifications/close.png new file mode 100644 index 0000000..9604f1b --- /dev/null +++ b/apps/system/style/themes/default/images/notifications/close.png Binary files differ diff --git a/apps/system/style/themes/default/images/tasks/close-active.png b/apps/system/style/themes/default/images/tasks/close-active.png new file mode 100644 index 0000000..b2666b8 --- /dev/null +++ b/apps/system/style/themes/default/images/tasks/close-active.png Binary files differ diff --git a/apps/system/style/themes/default/images/tasks/close.png b/apps/system/style/themes/default/images/tasks/close.png new file mode 100644 index 0000000..9604f1b --- /dev/null +++ b/apps/system/style/themes/default/images/tasks/close.png Binary files differ diff --git a/apps/system/style/themes/default/images/ui/affirmative.png b/apps/system/style/themes/default/images/ui/affirmative.png new file mode 100644 index 0000000..42aed39 --- /dev/null +++ b/apps/system/style/themes/default/images/ui/affirmative.png Binary files differ diff --git a/apps/system/style/themes/default/images/ui/default.png b/apps/system/style/themes/default/images/ui/default.png new file mode 100644 index 0000000..2ff298a --- /dev/null +++ b/apps/system/style/themes/default/images/ui/default.png Binary files differ diff --git a/apps/system/style/themes/default/images/ui/gradient.png b/apps/system/style/themes/default/images/ui/gradient.png new file mode 100644 index 0000000..9097844 --- /dev/null +++ b/apps/system/style/themes/default/images/ui/gradient.png Binary files differ diff --git a/apps/system/style/themes/default/images/ui/pattern.png b/apps/system/style/themes/default/images/ui/pattern.png new file mode 100644 index 0000000..4f7bc8b --- /dev/null +++ b/apps/system/style/themes/default/images/ui/pattern.png Binary files differ diff --git a/apps/system/style/themes/default/images/ui/time_pattern.png b/apps/system/style/themes/default/images/ui/time_pattern.png new file mode 100644 index 0000000..c86eba0 --- /dev/null +++ b/apps/system/style/themes/default/images/ui/time_pattern.png Binary files differ diff --git a/apps/system/style/themes/default/menus.css b/apps/system/style/themes/default/menus.css new file mode 100644 index 0000000..5b36c71 --- /dev/null +++ b/apps/system/style/themes/default/menus.css @@ -0,0 +1,70 @@ +/* ---------------------------------- + * ACTION / OBJECT MENU + * Requires: + menu-dialoges/core.css + * ---------------------------------- */ + +[role="dialog"] menu.actions { + margin: 0; + padding: 0; + border: none; + background: none; + display: block; + overflow: hidden; + position: absolute; + left: 0; + right: 0; + bottom: 0; +} + +[role="dialog"] menu.actions h3 { + display: block; + margin: 0 1.5rem; +} + +[role="dialog"] menu.actions > ul { + list-style: none; + padding: 0; + margin: 0.5rem 0 0 0; + display: block; + overflow: hidden; +} + +[role="dialog"] menu.actions > ul > li { + padding: 1rem 1.5rem 0 1.5rem; + margin: 0; + display: block; + overflow: hidden; + border: none; + height: auto; + line-height: normal; +} + +[role="dialog"] menu.actions > ul > li:last-child { + border-top: solid 1px rgba(255, 255, 255, 0.1); + background: #2d2d2d url(images/ui/pattern.png) repeat left top; + margin-top: 1.5rem; +} + +[role="dialog"] menu.actions > ul > li:not(:last-child) > button, +[role="dialog"] menu.actions > ul > li:not(:last-child) > a[role="button"] { + font-size: 1.4rem; + color: #fff; + text-shadow: none; + text-align: left; + padding: 0 1rem; + background: #4E4E4E padding-box; + border: solid 1px rgba(0, 0, 0, 0.25); +} + +[role="dialog"] menu.actions > ul > li:not(:last-child) > button:active, +[role="dialog"] menu.actions > ul > li:not(:last-child) > a[role="button"]:active { + background-color: #006f86; + color: #333; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); +} + +[role="dialog"] menu.actions > ul > li:last-child > button, +[role="dialog"] menu.actions > ul > li:last-child > a[role="button"] { + margin: 0.5rem 0 1rem 0; +} diff --git a/apps/system/style/themes/default/system.css b/apps/system/style/themes/default/system.css new file mode 100644 index 0000000..27e59cf --- /dev/null +++ b/apps/system/style/themes/default/system.css @@ -0,0 +1,27 @@ +/* Windows */ + +div.windowSprite { + background: url("images/noise.png") repeat scroll 50% 50%, #373a3d; +} + +/* Tasks Manager */ + +#cardsView li { + background-color: #00f; +} + +#cardsView li > a { + background: url('images/tasks/close.png') no-repeat; +} + +#cardsView li > a:active { + background: url('images/tasks/close-active.png') no-repeat; +} + +#cardsView li > h1 { + text-align: center; + color: #fff; + font-size: 2em; + text-shadow: #000 0 2px 1px; +} + diff --git a/apps/system/style/trusted_ui/trusted_ui.css b/apps/system/style/trusted_ui/trusted_ui.css new file mode 100644 index 0000000..5367fcc --- /dev/null +++ b/apps/system/style/trusted_ui/trusted_ui.css @@ -0,0 +1,82 @@ +#trustedui-container { + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + position: absolute; + transition: transform ease 0.5s, opacity 0.5s; +} + +#screen #trustedui-container.up { + opacity: 0; + transform: translateY(-100%); +} + +#trustedui-inner { + position: absolute; + width: 86%; + height: 86%; + top: 7%; + left: 7%; + transition: transform ease 0.5s, opacity 0.5s; +} + +#screen:not(.trustedui) #trustedui-inner { + width: 100%; + height: 100%; + top: 0; + left: 0; +} + +#screen.trustedui #trustedui-container { + opacity: 1; + visibility: visible; + transform: scale(1); +} + +#screen.trustedui #trustedui-container.closing, +#screen:not(.trustedui) #trustedui-container.closing { + opacity: 0; + transform: scale(0.6); +} + +#trustedui-throbber { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 3px; + z-index: 1; +} + +#trustedui-throbber.loading { + height: 4px; + background-image: url('../shared/progress.gif'); +} + +#trustedui-inner > .title-container { + height: 5rem; + width: 100%; + top: 0; + left: 0; + position: absolute; +} + +#trustedui-inner > #trustedui-frame-container { + position: absolute; + top: 5rem; + left: 0; + width: 100%; + height: calc(100% - 5rem); + border: none; + background-color: #fff; +} + +#trustedui-frame-container > iframe { + width: 100%; + height: 100%; + border: none; +} + +#trustedui-inner iframe:not(.selected) { + display: none; +} diff --git a/apps/system/style/ttlview/ttlview.css b/apps/system/style/ttlview/ttlview.css new file mode 100644 index 0000000..b10bde7 --- /dev/null +++ b/apps/system/style/ttlview/ttlview.css @@ -0,0 +1,16 @@ +#debug-ttl { + position: absolute; + top: 0; + left: 0; + display: block; + height: 20px; + background-color: darkgreen; + pointer-events: none; + font-size: 14px; + line-height: 20px; + text-align: right; + font-weight: bold; + overflow: hidden; + padding-left: 3px; + padding-right: 3px; +} diff --git a/apps/system/style/update_manager/images/grey-noise-bg.png b/apps/system/style/update_manager/images/grey-noise-bg.png new file mode 100644 index 0000000..0f83b8f --- /dev/null +++ b/apps/system/style/update_manager/images/grey-noise-bg.png Binary files differ diff --git a/apps/system/style/update_manager/images/iconindicator_download_24x24.png b/apps/system/style/update_manager/images/iconindicator_download_24x24.png new file mode 100644 index 0000000..536a43b --- /dev/null +++ b/apps/system/style/update_manager/images/iconindicator_download_24x24.png Binary files differ diff --git a/apps/system/style/update_manager/images/loader.png b/apps/system/style/update_manager/images/loader.png new file mode 100644 index 0000000..0146695 --- /dev/null +++ b/apps/system/style/update_manager/images/loader.png Binary files differ diff --git a/apps/system/style/update_manager/update_manager.css b/apps/system/style/update_manager/update_manager.css new file mode 100644 index 0000000..39f37d6 --- /dev/null +++ b/apps/system/style/update_manager/update_manager.css @@ -0,0 +1,253 @@ +html, body { + font-family: 'MozTT', sans-serif; + font-size: 10px; +} + +#update-manager-container { + display: none; +} + +#update-manager-container.displayed { + display: block; +} + +#update-manager-container > .activity { + display: none; + float: left; + width: 32px; + height: 30px; + margin: 14px 10px; + background-image: url(images/loader.png); + background-position: center center; + background-repeat: no-repeat; + animation: 0.9s fn-rotate infinite linear; +} + +@keyframes fn-rotate { + from { + transform: rotate(1deg); + } + + to { + transform: rotate(360deg); + } +} + +#update-manager-container.downloading > .activity { + display: block; +} + +#update-manager-container > .icon { + float: left; + display: block; + width: 24px; + height: 24px; + margin: 18px 10px; +} + +#update-manager-container > .icon, +#update-manager-toaster > .icon { + background-image: url('images/iconindicator_download_24x24.png'); +} + +#update-manager-container.downloading > .icon { + display: none; +} + +#update-manager-toaster > .icon { + float: left; + display: block; + width: 2.4rem; + height: 2.4rem; + margin: 1.3rem; +} + +#update-manager-toaster > .message { + position: absolute; + left: 50px; + top: 10px; + width: -moz-calc(100% - 55px); + color: #52b8cc; + font-size: 1.5rem; + font-weight: 500; + line-height: 2.8rem; +} + +#update-manager-container > .message { + margin: 10px 0 0 50px; + width: -moz-calc(100% - 55px); + font-size: 1.5rem; + font-weight: 500; + line-height: 1.9rem; + color: #FFFFFF; +} + +#update-manager-container > .message > span { + display: block; + color: #bfbfbf; + font-size: 1.4rem; + line-height: 1.9rem; + font-weight: 400; + text-overflow: ellipsis; +} + +#update-manager-toaster > .message > span { + display: none; +} + +#update-manager-toaster { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 50px; + overflow: hidden; + background-image: url('images/grey-noise-bg.png'); + background-repeat: repeat-x; + -moz-box-sizing: border-box; + border-bottom: 1px #2c2c2c solid; + -moz-transform: translateY(-50px); + -moz-transition: -moz-transform .3s ease-in-out; +} + +#update-manager-toaster.displayed { + -moz-transform: translateY(0); +} + +#updates-viaDataConnection-dialog, +#updates-download-dialog { + padding-bottom: 4.9rem; + padding-top: 0; + display: none; +} + +#updates-viaDataConnection-dialog.visible, +#updates-download-dialog.visible { + display: inline-block; + pointer-events: auto; +} + +#updates-viaDataConnection-dialog h1, +#updates-download-dialog h1 { + font-size: 1.9rem; + color: #fff; + padding: 1.5rem 1rem 1.1rem 1rem; + background: rgba(255, 255, 255, 0.0); +} + +#updates-viaDataConnection-dialog h1 { + padding-left: 2.8rem; + height: 2.4rem; + line-height: 2.4rem; + background: url('images/iconindicator_download_24x24.png') no-repeat scroll 0 50% transparent; + border: none; +} + +#updates-viaDataConnection-dialog section, +#updates-download-dialog section { + height: auto; + line-height: 3.5rem; + overflow-y: scroll; + max-height: -moz-calc(100% - 3.8rem); + color: #ebebeb; + font-size: 2.5rem; +} + +#updates-download-dialog ul { + list-style: none; + margin-top: 0.4rem; + padding-left: 0; +} + +#updates-download-dialog li { + height: 5rem; + margin: 0 1rem; + border-top: solid 1px rgba(255, 255, 255, 0.05); +} + +#updates-download-dialog li:first-child { + margin-top: 0; + border-top: 0; +} + +#updates-download-dialog div { + display: block; + font-weight: 500; + color: #ebebeb; + font-size: 1.4rem; + line-height: 0.6rem; +} + +#updates-download-dialog li .name { + font-size: 1.5rem; + line-height: 3rem; + height: 3rem; + color: white; + font-weight: normal; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +#updates-download-dialog li.nosize .name { + line-height: 5rem; + height: 5rem; +} + +#updates-download-dialog label { + display: inline-block; + height: 5rem; + float: right; + color: #ebebeb; + line-height: 5rem; + font-weight: 300; + font-size: 1.4rem; +} + +#updates-download-dialog label.required { + width: 10rem; + right: 0.5rem; + text-align: right; + text-transform: uppercase; + height: 3rem; + line-height: 2.9rem; +} + +#updates-download-dialog p { + position: absolute; + left: 0; + right: 0; + bottom: 6.8rem; + height: 6.6rem; + padding: 0.5rem 1.8rem; + margin: 0; + + background-color: rgba(0, 0, 0, 0.4); + border-top: solid 1px rgba(255, 255, 255, 0.2); + overflow-y: scroll; + + font-size: 1.6rem; + white-space: normal; +} + +#updates-download-dialog[data-nowifi="true"] section { + /* Fixing at the top of the screen to properly make room for the warning */ + position: absolute; + top: 20px; + max-height: calc(100% - 15rem - 20px); +} + +#updates-download-dialog #updates-download-button[data-online="false"] { + visibility: collapse; +} + +#updates-download-dialog #updates-offline-warning, +#updates-download-dialog #updates-data-connection-warning, +#updates-download-dialog[data-online="false"] #updates-download-button { + visibility: collapse; +} + +#updates-download-dialog[data-online="false"] #updates-offline-warning, +#updates-download-dialog[data-online="true"][data-nowifi="true"][data-data-connection-inline-warning="true"] #updates-data-connection-warning { + visibility: visible; +} diff --git a/apps/system/style/utility_tray/images/grippy.png b/apps/system/style/utility_tray/images/grippy.png new file mode 100644 index 0000000..c8db064 --- /dev/null +++ b/apps/system/style/utility_tray/images/grippy.png Binary files differ diff --git a/apps/system/style/utility_tray/utility_tray.css b/apps/system/style/utility_tray/utility_tray.css new file mode 100644 index 0000000..8d9754e --- /dev/null +++ b/apps/system/style/utility_tray/utility_tray.css @@ -0,0 +1,29 @@ +#screen.lockscreen-camera > #utility-tray { + display: none; +} + +#screen.utility-tray > #utility-tray { + visibility: visible; +} + +#utility-tray { + position: absolute; + top: -moz-calc(-100% + 40px); + width: -moz-calc(100%); + height: -moz-calc(100% - 20px); + background-color: rgba(0, 0, 0, 0.7); + visibility: hidden; +} + +#utility-tray-grippy { + pointer-events: none; + position: absolute; + bottom: 0; + width: 100%; + height: 20px; + + border-bottom: 1px solid #111; + border-top: 1px solid #111; + + background: #111 url('images/grippy.png') no-repeat 50% 50%; +} diff --git a/apps/system/style/value_selector/date_picker.css b/apps/system/style/value_selector/date_picker.css new file mode 100644 index 0000000..b0bc654 --- /dev/null +++ b/apps/system/style/value_selector/date_picker.css @@ -0,0 +1,152 @@ +/* override section[role="dialog"] h3 */ +#date-picker h3 { + font-family: 'MozTT', Sans-serif; + font-weight: normal; + font-size: 1.6rem; + line-height: 1em; + color: #fff; + border-bottom: 0.1rem solid #686868; + margin: 0 2.5rem 1rem 2rem; + padding-bottom: 1rem; +} + +/* specific component code for date picker */ +#date-picker { + height: 87.5%; + width: calc(100% + 5px); + padding: 0; + font-size: 2.2rem; + line-height: 1em; + margin-left: -5px; + display: inline-block; + vertical-align: middle; + white-space: normal; +} + +#date-picker ol { + list-style: none; + padding: 0; + margin: 0; +} + +#date-picker-controls > button { + float: none; + width: auto; + text-overflow: clip; + font: 0/0 a; + position: absolute; + top: 0.5rem; + z-index: 100; + width: 7.5rem; + height: 4.5rem; + border: none; + background: transparent no-repeat center center; +} + +#date-picker-controls { + position: relative; + overflow: hidden; +} + +#date-picker-controls h1 { + font-weight: 200; + font-size: 2.2rem; + line-height: 1em; + text-align: center; + margin: 1.5rem 0px 2rem; +} + +#date-picker-controls button.next { + background-image: url(images/icons/next.png); + right: 0; +} + +#date-picker-controls button.previous { + background-image: url(images/icons/prev.png); + left: 0; +} + +#date-picker:after { + content: ""; + position: absolute; + left: 0; + right: 0; + top: 13.4rem; + bottom: 0; + background: url(images/ui/shadow.png) repeat-y left top, url(images/ui/shadow-invert.png) repeat-y right top; + pointer-events: none; +} + +#date-picker ol { + width: 100%; + overflow: hidden; + clear: both; +} + +#date-picker li { + width: 14.285%; + text-align: center; + float: left; +} + +#date-picker-weekdays li { + width: 14.285%; + font-size: 1.1rem; + line-height: 1em; + font-weight: normal; + text-transform: uppercase; + background: #333; + padding: 0.5rem 0.2rem; + border-top: solid 1px #000; +} + +#date-picker-container { + border-bottom: 1px solid #000; +} + +#date-picker-container li { + border: solid 1px #000; + border-bottom: none; + line-height: 4.5rem; + height: 4.5rem; +} + +#date-picker-container .weeks-4 li { + line-height: 5.625rem; + height: 5.625rem; +} + +#date-picker-container .weeks-6 li { + line-height: 3.75rem; + height: 3.75rem; +} + +#date-picker-container li > span { + display: block; + font-weight: 200; + text-align: center; + transition: background 0.2s ease; + border: solid 1px #555; + border-left: none; + border-bottom: none; +} + +#date-picker-container li.past span { + color: #717171; +} + +#date-picker-container li.present { + background: url(images/ui/pattern-current.png) repeat left top; +} + +#date-picker-container span.selected { + background: #00A5C5; +} + +#date-picker-container ol li:last-child { + border-right: none; +} + +#date-picker * { + -moz-box-sizing: border-box; +} diff --git a/apps/system/style/value_selector/images/icons/next.png b/apps/system/style/value_selector/images/icons/next.png new file mode 100644 index 0000000..82e1515 --- /dev/null +++ b/apps/system/style/value_selector/images/icons/next.png Binary files differ diff --git a/apps/system/style/value_selector/images/icons/prev.png b/apps/system/style/value_selector/images/icons/prev.png new file mode 100644 index 0000000..387fce9 --- /dev/null +++ b/apps/system/style/value_selector/images/icons/prev.png Binary files differ diff --git a/apps/system/style/value_selector/images/ui/pattern-current.png b/apps/system/style/value_selector/images/ui/pattern-current.png new file mode 100644 index 0000000..426d7b2 --- /dev/null +++ b/apps/system/style/value_selector/images/ui/pattern-current.png Binary files differ diff --git a/apps/system/style/value_selector/images/ui/shadow-invert.png b/apps/system/style/value_selector/images/ui/shadow-invert.png new file mode 100644 index 0000000..68b2d5b --- /dev/null +++ b/apps/system/style/value_selector/images/ui/shadow-invert.png Binary files differ diff --git a/apps/system/style/value_selector/images/ui/shadow.png b/apps/system/style/value_selector/images/ui/shadow.png new file mode 100644 index 0000000..41f9209 --- /dev/null +++ b/apps/system/style/value_selector/images/ui/shadow.png Binary files differ diff --git a/apps/system/style/value_selector/spin_date_picker.css b/apps/system/style/value_selector/spin_date_picker.css new file mode 100644 index 0000000..722d5fc --- /dev/null +++ b/apps/system/style/value_selector/spin_date_picker.css @@ -0,0 +1,249 @@ +/* ----------- SpinDateSelectorView ---------- */ +#spin-date-picker .picker-bar { + position: relative; + margin-left: auto; + margin-right: auto; + overflow: hidden; + width: 85%; + font-size: 8px; +} + +#spin-date-picker .picker-bar-gradient { + -moz-border-top-colors: + rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.3) + rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1) + rgba(0, 0, 0, 0.05); + + -moz-border-bottom-colors: + rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.3) + rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1) + rgba(0, 0, 0, 0.05); + + border-top: solid 0.7rem; + border-bottom: solid 0.7rem; + border-left: 1px solid #111; + border-right: 1px solid #111; + + position: absolute; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; + -moz-box-sizing: border-box; +} + +#spin-date-picker .picker-container { + width: 100%; + position: relative; + padding-top: 8.5rem; + height: 16rem; + overflow: hidden; +} + +#spin-date-picker .value-indicator-wrapper { + -moz-border-top-colors: + rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.15) + rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.4) + rgba(0, 0, 0, 0.5); + + -moz-border-bottom-colors: + rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.15) + rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.4) + rgba(0, 0, 0, 0.5); + + border-top: solid 0.7rem; + border-bottom: solid 0.7rem; + position: absolute; + height: 6rem; + width: 100%; + pointer-events: none; +} + +#spin-date-picker .value-indicator-hover { + pointer-events: none; + background-color: #00A5C5; + position: absolute; + width: 100%; + height: 100%; + right:0; +} + +div.animation-on { + -moz-transition-duration: 0.5s; + -moz-transition-property: top, left; +} + +.picker-unit { + position: relative; + font: 2.5rem/8rem 'MozTT',sans-serif; + color: #FFF; + text-align: center; + vertical-align: middle; + width: 100%; + height: 6rem; + pointer-events: none; +} + +#spin-date-picker .picker-bar-background { + background: url("../themes/default/images/ui/time_pattern.png") repeat scroll left top transparent; + position: absolute; + width: 73px; + height: 100%; + right: 0; + top: 0; +} + +#spin-date-picker .left-picker-separator { + position: absolute; + width: 0.2rem; + height: 100%; + top: 0; + left: 54px; + background: -moz-linear-gradient(center left, #555 50%, #000 50%); + pointer-events: none; +} + +#spin-date-picker .right-picker-separator { + position: absolute; + width: 0.2rem; + height: 100%; + top: 0; + right: 73px; + background: -moz-linear-gradient(center left, #555 50%, #000 50%); + pointer-events: none; +} + +#spin-date-picker .value-picker-date-wrapper { + position: absolute; + width: 54px; + height: 100%; + top: 10em; + left: 0; +} + +#spin-date-picker .value-picker-month-wrapper { + position: absolute; + width: -moz-calc(100% - 127px); + height: 100%; + top: 10em; + left: 54px; +} + +#spin-date-picker .value-picker-year-wrapper { + position: absolute; + width: 73px; + height: 100%; + top: 10em; + right: 0px; +} + +#spin-date-picker .value-picker-date { + position: relative; + -moz-user-select: none; + text-align: center; + width: 100%; +} + +#spin-date-picker .value-picker-month { + position: relative; + -moz-user-select: none; + width: 100%; +} + +#spin-date-picker .value-picker-year { + position: relative; + -moz-user-select: none; + width: 100%; +} + +#spin-date-picker .picker-container.YMD .value-picker-year-wrapper { + right: auto; + left: 0; +} + +#spin-date-picker .picker-container.YMD .value-picker-month-wrapper { + right: auto; + left: 73px; +} + +#spin-date-picker .picker-container.YMD .value-picker-date-wrapper { + right: 0; + left: auto; +} + +#spin-date-picker .picker-container.YMD .left-picker-separator { + right: auto; + left: 73px; +} + +#spin-date-picker .picker-container.YMD .right-picker-separator { + right: 54px; + left: auto; +} + +#spin-date-picker .picker-container.YMD .picker-bar-background { + right: auto; + left: 0px; +} + + +#spin-date-picker .picker-container.DMY .value-picker-year-wrapper { + right: 0; + left: auto; +} + +#spin-date-picker .picker-container.DMY .value-picker-month-wrapper { + right: auto; + left: 54px; +} + +#spin-date-picker .picker-container.DMY .value-picker-date-wrapper { + right: auto; + left: 0; +} + +#spin-date-picker .picker-container.DMY .left-picker-separator { + right: auto; + left: 54px; +} + +#spin-date-picker .picker-container.DMY .right-picker-separator { + right: 73px; + left: auto; +} + +#spin-date-picker .picker-container.DMY .picker-bar-background { + right: 0px; + left: auto; +} + + +#spin-date-picker .picker-container.MDY .value-picker-year-wrapper { + right: 0; + left: auto; +} + +#spin-date-picker .picker-container.MDY .value-picker-month-wrapper { + right: auto; + left: 0px; +} + +#spin-date-picker .picker-container.MDY .value-picker-date-wrapper { + right: auto; + left: -moz-calc(100% - 127px); +} + +#spin-date-picker .picker-container.MDY .left-picker-separator { + right: auto; + left: -moz-calc(100% - 127px); +} + +#spin-date-picker .picker-container.MDY .right-picker-separator { + right: 73px; + left: auto; +} + +#spin-date-picker .picker-container.MDY .picker-bar-background { + right: 0px; + left: auto; +} \ No newline at end of file diff --git a/apps/system/style/value_selector/time_picker.css b/apps/system/style/value_selector/time_picker.css new file mode 100644 index 0000000..ea612ba --- /dev/null +++ b/apps/system/style/value_selector/time_picker.css @@ -0,0 +1,212 @@ +/* ----------- TimeSelectorView ---------- */ +#picker-bar { + position: relative; + margin-left: auto; + margin-right: auto; + overflow: hidden; +} + +#picker-bar.format12h { + width: 85%; +} + +#picker-bar.format24h { + width: 60%; +} + +#picker-bar-gradient { + -moz-border-top-colors: + rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.3) + rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1) + rgba(0, 0, 0, 0.05); + + -moz-border-bottom-colors: + rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.3) + rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.1) + rgba(0, 0, 0, 0.05); + + border-top: solid 0.7rem; + border-bottom: solid 0.7rem; + border-left: 1px solid #111; + border-right: 1px solid #111; + + position: absolute; + top: 0; + width: 100%; + height: 100%; + pointer-events: none; + -moz-box-sizing: border-box; +} + +#picker-container { + width: 100%; + position: relative; + padding-top: 8.5rem; + height: 16rem; + overflow: hidden; +} + +#value-indicator-wrapper { + -moz-border-top-colors: + rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.15) + rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.4) + rgba(0, 0, 0, 0.5); + + -moz-border-bottom-colors: + rgba(0, 0, 0, 0.05) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.15) + rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.4) + rgba(0, 0, 0, 0.5); + + border-top: solid 0.7rem; + border-bottom: solid 0.7rem; + position: absolute; + height: 6rem; + width: 100%; + pointer-events: none; +} + +#value-indicator-hover-time { + pointer-events: none; + background-color: #00A5C5; + position: absolute; + height: 100%; + font: 3rem/6rem 'MozTT',sans-serif; + text-align: center; +} + +#picker-bar.format12h #value-indicator-hover-time { + width: 66%; +} + +#picker-bar.format24h #value-indicator-hover-time { + width: 100%; +} + +#value-indicator-hover { + pointer-events: none; + background-color: #00A5C5; + position: absolute; + width: 33%; + height: 100%; + right:0; +} + +#picker-bar.format12h #value-indicator-hover { + display: block; +} + +#picker-bar.format24h #value-indicator-hover { + display: none; +} + +div.animation-on { + -moz-transition-duration: 0.5s; + -moz-transition-property: top, left; +} + +#value-picker-hours { + position: relative; + -moz-user-select: none; + float: left; + text-align: center; +} + +#picker-bar.format12h #value-picker-hours { + width: 33%; +} + +#picker-bar.format24h #value-picker-hours { + width: 50%; +} + +#value-picker-minutes { + position: relative; + -moz-user-select: none; + float: left; +} + +#picker-bar.format12h #value-picker-minutes { + width: 34%; +} + +#picker-bar.format24h #value-picker-minutes { + width: 50%; +} + +#value-picker-hour24-state { + position: relative; + -moz-user-select: none; + width: 33%; + float: left; +} + +#picker-bar.format12h #value-picker-hour24-state { + display: block; +} + +#picker-bar.format24h #value-picker-hour24-state { + display: none; +} + +.picker-unit { + position: relative; + font: 3rem/8rem 'MozTT',sans-serif; + color: #FFF; + text-align: center; + vertical-align: middle; + width: 100%; + height: 6rem; + pointer-events: none; +} + +#picker-bar-background { + background: url("../themes/default/images/ui/time_pattern.png") repeat scroll left top transparent; + position: absolute; + width: 33%; + height: 100%; + right: 0; + top: 0; +} + +#picker-bar.format12h #picker-bar-background { + display: block; +} + +#picker-bar.format24h #picker-bar-background { + display: none; +} + +#left-picker-separator { + position: absolute; + width: 0.2rem; + height: 100%; + top: 0; + background: -moz-linear-gradient(center left, #555 50%, #000 50%); + pointer-events: none; +} + +#picker-bar.format12h #left-picker-separator { + left: 33%; +} + +#picker-bar.format24h #left-picker-separator { + left: 49.5%; +} + +#right-picker-separator { + position: absolute; + width: 0.2rem; + height: 100%; + top: 0; + left: 66%; + background: -moz-linear-gradient(center left, #555 50%, #000 50%); + pointer-events: none; +} + +#picker-bar.format12h #right-picker-separator { + display: block; +} + +#picker-bar.format24h #right-picker-separator { + display: none; +} diff --git a/apps/system/style/value_selector/value_selector.css b/apps/system/style/value_selector/value_selector.css new file mode 100644 index 0000000..7184046 --- /dev/null +++ b/apps/system/style/value_selector/value_selector.css @@ -0,0 +1,170 @@ +#value-selector { + width: 100%; + height: -moz-calc(100% - 20px); + top: 20px; + left: 0; + position: absolute; +} + +#screen.active-statusbar #value-selector { + height: -moz-calc(100% - 40px); + top: 40px; +} + +#screen:-moz-full-screen-ancestor #value-seletcor, +#screen.fullscreen-app #value-selector { + height: 100%; + top: 0; +} + +#select-options-buttons, +#time-picker-buttons, +#spin-date-picker-buttons { + /* from building blocks, core.css - menu:not([type="toolbar"]*/ + white-space: nowrap; + margin: 0; + padding: 0; + border-top: solid 1px rgba(255, 255, 255, 0.1); + background: #2d2d2d url(../themes/default/images/ui/pattern.png) repeat left top; + display: block; + overflow: hidden; + position: absolute; + left: 0; + right: 0; + bottom: 0; + text-align: center; + font-size: 0; /* to get rid of the spacing between 2 buttons */ +} + +#value-selector button:first-child { + margin-right: 0rem; +} + +#select-options-buttons button, +#time-picker-buttons button, +#spin-date-picker-buttons button{ + /* from building block - other/buttons/style.css*/ + width: calc((100% - 4.5rem) / 2); /*overridden for 2 buttons*/ + + height: 3.8rem; + margin: 1.5rem; + padding: 0 1.5rem; + display: inline-block; + vertical-align: middle; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + background: #fafafa url(../themes/default/images/ui/default.png) repeat-x left bottom; + border: 1px solid #9f9f9f; + border-radius: 0.3rem; + font-size: 1.6rem; + font-family: 'MozTT', Sans-serif; + font-weight: 600; + line-height: 3.8rem; + color: #333; + text-align: center; + text-shadow: 1px 1px 0 rgba(255,255,255,0.3); + text-decoration: none; + outline: none; +} + +/* Affirmative */ +#value-selector button.affirmative { + background-image: url(../themes/default/images/ui/affirmative.png); + background-color: #00caf2; + border-color: #00acce; +} + +#select-options-buttons button.full { + width: calc(100% - 4.5rem); + margin: 1.5rem; +} + +/*active class used to complement the "return false" in onmousedown effect */ +#value-selector button.active, +button.affirmative.active { + border-color: #008aaa; + background: #008aaa; + color: #333; +} + +#value-selector-container li > label { + pointer-events: none; +} + +#value-selector-container li.active label span { + background: none repeat scroll 0 0 #00ABCC; + color: #FFFFFF !important; +} + +#time-picker-popup, +#spin-date-picker-popup { + top: 0px; + padding: 0 0 7rem; /*remove the top padding*/ + + /* from building blocks, core.css - [role=dialog]*/ + background: url(../themes/default/images/ui/pattern.png) repeat left top, url(../themes/default/images/ui/gradient.png) no-repeat left top; + background-size: auto auto, 100% 100%; + overflow: hidden; + position: absolute; + z-index: 100; + left: 0; + right: 0; + bottom: 0; + white-space: nowrap; + padding: 0 0 7rem; /*remove the top padding*/ + font-family: "MozTT", Sans-serif; + color: #fff; +} + +#time-picker-popup h3, +#spin-date-picker-popup h3 { + font-family: 'MozTT', Sans-serif; + font-weight: normal; + font-size: 1.6rem; + line-height: 1em; + color: #fff; + border-bottom: 0.1rem solid #686868; + margin: 0 0 1.5rem; + padding-bottom: 1.5rem; +} + +.table-wrapper { + display: table; + width: 100%; + height: 100%; +} + +.table-cell { + display: table-cell; + vertical-align: middle; + width: 100%; + height: 100%; +} + +/* The following rules is to override the styles defined in building blocks of value selector */ +#value-selector li { + height: auto; + padding-bottom: 0px; + line-height: 3.9rem; +} + +#value-selector li span { + padding: 1rem 1.5rem; + line-height: 4rem; + word-wrap: break-word; +} + +#value-selector li input:checked + span, +#value-selector li[aria-checked="true"] span { + padding-right: 2.6rem; + margin-right: 1.2rem; + background: transparent url("../bb/value_selector/images/icons/checked.png") no-repeat 100% 50%; +} + +html[dir="rtl"] #value-selector li input:checked + span, +html[dir="rtl"] #value-selector li[aria-checked="true"] span { + padding-left: 2.6rem; + margin-left: 1.2rem; +} + diff --git a/apps/system/style/wrapper/images/back.png b/apps/system/style/wrapper/images/back.png new file mode 100644 index 0000000..74a12ac --- /dev/null +++ b/apps/system/style/wrapper/images/back.png Binary files differ diff --git a/apps/system/style/wrapper/images/bookmark.png b/apps/system/style/wrapper/images/bookmark.png new file mode 100644 index 0000000..77b18a4 --- /dev/null +++ b/apps/system/style/wrapper/images/bookmark.png Binary files differ diff --git a/apps/system/style/wrapper/images/close.png b/apps/system/style/wrapper/images/close.png new file mode 100644 index 0000000..3dd988e --- /dev/null +++ b/apps/system/style/wrapper/images/close.png Binary files differ diff --git a/apps/system/style/wrapper/images/forward.png b/apps/system/style/wrapper/images/forward.png new file mode 100644 index 0000000..6aac3b4 --- /dev/null +++ b/apps/system/style/wrapper/images/forward.png Binary files differ diff --git a/apps/system/style/wrapper/images/open.png b/apps/system/style/wrapper/images/open.png new file mode 100644 index 0000000..bf2c1c5 --- /dev/null +++ b/apps/system/style/wrapper/images/open.png Binary files differ diff --git a/apps/system/style/wrapper/images/reload.png b/apps/system/style/wrapper/images/reload.png new file mode 100644 index 0000000..0b72b3d --- /dev/null +++ b/apps/system/style/wrapper/images/reload.png Binary files differ diff --git a/apps/system/style/wrapper/wrapper.css b/apps/system/style/wrapper/wrapper.css new file mode 100644 index 0000000..8fe0c87 --- /dev/null +++ b/apps/system/style/wrapper/wrapper.css @@ -0,0 +1,113 @@ + +#wrapper-activity-indicator { + position: fixed; + top: 20px; /* This is the status bar height */ + left: 0; + margin: 0; + padding: 0; + width: 100%; + height: 4px; + background-image: url('../shared/progress.gif'); + + pointer-events: none; + visibility: hidden; +} + +#wrapper-activity-indicator.visible { + -moz-transition-delay: .5s; /* Delay opening a wrapper */ + -moz-transition-property: visibility; + visibility: visible; +} + +#wrapper-footer { + position: fixed; + bottom: -4rem; + left: 0; + margin: 0; + padding: 0; + width: 100%; + height: 5rem; + + pointer-events: none; + visibility: hidden; +} + +#wrapper-footer.visible { + pointer-events: auto; + visibility: visible; +} + +#handler { + width: 100%; + height: 1rem; + background-color: #000; + background-repeat: no-repeat; + background-position: right; +} + +#wrapper-footer.closed #handler { + background-image: url("images/open.png"); +} + +#wrapper-footer menu[type="buttonbar"] { + width: 100%; + height: 4rem; + margin: 0; + padding: 0; + background-color: rgba(0,0,0,.8); + -moz-transform: translateY(-4rem); + -moz-transition: -moz-transform .4s ease; +} + +#wrapper-footer.closed menu { + -moz-transform: translateY(0); +} + +#wrapper-footer menu button { + background-color: transparent; + -moz-appearance: none; + border: none; + display: block; + margin: 0; + padding: 0; + width: 20%; + height: 100%; + float: left; + background-position: center; + background-repeat: no-repeat; + opacity: 1; +} + +#back-button { + background-image: url("images/back.png"); +} + +#forward-button { + background-image: url("images/forward.png"); +} + +#reload-button { + background-image: url("images/reload.png"); +} + +#bookmark-button { + background-image: url("images/bookmark.png"); +} + +#bookmark-button[data-disabled] { + background-image: none; +} + +#close-button { + background-image: url("images/close.png"); +} + +#wrapper-footer menu button[data-disabled] { + opacity: .2; + pointer-events: none; +} + +#wrapper-footer input::-moz-focus-inner, input:active { + border: 0; + background: transparent !important; +} diff --git a/apps/system/style/zindex.css b/apps/system/style/zindex.css new file mode 100644 index 0000000..6abc373 --- /dev/null +++ b/apps/system/style/zindex.css @@ -0,0 +1,215 @@ +/* zIndex of important system app parts + * is gathered here to clearly specify all system-app hierarchy */ + +/* Reset zIndex */ +#screen > *:not([data-z-index-level]) { + z-index: 0; +} + +/* Level 1 */ +/** + * Topest layer, covers all of the screen no matter what's the height + * of the status bar. + * System overlay > Sleep menu > Card view + */ + +/* Find the same code in system/index.html +#screen > [data-z-index-level="initlogo"] { + z-index: 65536; +} +*/ + +#screen > *[data-z-index-level="poweroff-splash"] { + z-index: 65536; +} + +#screen > [data-z-index-level="debug-grid"], +#screen > [data-z-index-level="debug-ttl"] { + z-index: 65536; +} + +#screen > [data-z-index-level="system-notification-banner"] { + z-index: 65536; +} + +#screen > [data-z-index-level="system-overlay"] { + z-index: 65536; +} + +#screen > [data-z-index-level="sleep-menu"] { + z-index: 65536; +} + +/* Promote the transitioning appWindow to this level as the entry and exiting transition + of the cards view. */ +#screen.cards-view > [data-z-index-level="app"] > .appWindow.active, +#screen.cards-view > [data-z-index-level="app"] > .appWindow.opening, +#screen.cards-view > [data-z-index-level="app"] > .appWindow.closing { + z-index: 65536; +} +#screen.cards-view > [data-z-index-level="cards-view"] { + z-index: 65535; +} + +#screen > [data-z-index-level="keyboard-frame"] { + z-index: 65536; +} + +/* Level 2: Notification toaster */ +#screen > [data-z-index-level="notification-toaster"] { + z-index: 32768; +} + +/* Level 3: Attention screen */ +#screen > [data-z-index-level="attention-screen"] { + z-index: 16384; +} + +/* Level 4: Activity menu, context menu and value selector */ +#screen > [data-z-index-level="list-menu"] { + z-index: 8192; +} + +/* Level 5: Statusbar, Utility-Tray */ +#screen > [data-z-index-level="statusbar"] { + z-index: 4096; +} + +#screen > [data-z-index-level="utility-tray"] { + z-index: 4095; +} + +/* Demote level 5 elements to homescreen level if there is an active + full screen app frame */ +#screen.fullscreen-app:not(.locked):not(.attention) > [data-z-index-level="statusbar"], +#screen.fullscreen-app:not(.locked):not(.attention) > [data-z-index-level="utility-tray"] { + z-index: 0; +} + +/* Prompote level 5 elements to attention screen level when + * there is an active attention screen not minimized in + * the status bar */ +#screen.attention:not(.active-statusbar) > [data-z-index-level="statusbar"] { + z-index: 16386; +} +#screen.attention:not(.active-statusbar) > [data-z-index-level="utility-tray"] { + z-index: 16385; +} + +/* Level 6: Lock Screen */ +#screen > [data-z-index-level="lockscreen"] { + z-index: 2048; +} + +#screen > [data-z-index-level="lockscreen-camera"] { + z-index: 2047; +} + +#screen > [data-z-index-level="simpin-dialog"] { + z-index: 2046; +} + +/* Keep keyboard under lockscreen when locked */ +#screen.locked > [data-z-index-level="keyboard-frame"] { + z-index: 2045; +} + +/* Level 7: Dialog Module */ +#screen > [data-z-index-level="dialog-overlay"], +#screen > [data-z-index-level="value-selector"], +#screen > [data-z-index-level="permission-screen"], +#screen > [data-z-index-level="app-install-dialog"], +#screen > [data-z-index-level="updates-download-dialog"], +#screen > [data-z-index-level="updates-viaDataConnection-dialog"], +#screen > [data-z-index-level="app"] > .appWindow.inlineActivity { + z-index: 1024; +} + +/* Level 8 */ +#screen.switch-app [data-z-index-level="app"] > .appWindow.opening, +#screen.switch-app [data-z-index-level="app"] > .appWindow.closing, +#screen.switch-app [data-z-index-level="app"] > .appWindow:not(.homescreen).active { + z-index: 6; +} + +#screen > [data-z-index-level="app"] { + /** + * Should not specify z-index here + * Keyboard should be kept upon #windows + * and beneath #windows > .appWindow + */ +} + +/* + Styles during FTU. In this case lockscreen & homescreen should be behind FTU. + Once FTU is done, we will remove this styles in order to get the structure + of z-index as usual. +*/ + +#screen.ftu > [data-z-index-level="statusbar"]{ + z-index: 1; +} + +#screen.ftu > [data-z-index-level="lockscreen"]{ + z-index: 1; +} + +#screen.ftu > [data-z-index-level="app"] > .appWindow.homescreen, +#screen.ftu > [data-z-index-level="app"] > .appWindow.homescreen.active { + z-index: 0; +} + +/* + * The below z-index numbers is used to met the following conditions: + * - active ones must be on top of the inactive ones + * - keyboard frame must be below the active ones + * - keyboard frame must be above the inactive ones + * - app frame must be on top of homescreen frame, inactive or active. + * - finally, everything else need to be on top of them (hence the lowest nums) + * + */ +#screen > [data-z-index-level="app"] > #wrapper-footer, +#screen > [data-z-index-level="app"] > #wrapper-activity-indicator { + z-index: 5; +} + +#screen > [data-z-index-level="app"] > .appWindow.active, +#screen > [data-z-index-level="app"] > .appWindow.opening, +#screen > [data-z-index-level="app"] > .appWindow.closing { + z-index: 4; +} + +#screen > [data-z-index-level="app"] > .appWindow.homescreen.active { + z-index: 3; +} + +#screen > [data-z-index-level="app"] > .appWindow { + z-index: 1; +} + +#screen > [data-z-index-level="app"] > .appWindow.homescreen { + z-index: 0; +} + +/* We promotes the following overlays on top of the fullscreen web content. */ + +#screen:-moz-full-screen-ancestor > [data-z-index-level="app"] > .appWindow.inlineActivity, +#screen:-moz-full-screen-ancestor > [data-z-index-level="sleep-menu"], +#screen:-moz-full-screen-ancestor > [data-z-index-level="list-menu"], +#screen.locked:-moz-full-screen-ancestor > [data-z-index-level="statusbar"], +#screen:-moz-full-screen-ancestor > [data-z-index-level="lockscreen"], +#screen:-moz-full-screen-ancestor > [data-z-index-level="lockscreen-camera"], + +#screen:-moz-full-screen-ancestor > [data-z-index-level="value-selector"], +#screen:-moz-full-screen-ancestor > [data-z-index-level="system-overlay"], +#screen:-moz-full-screen-ancestor > [data-z-index-level="dialog-overlay"], + +#screen:-moz-full-screen-ancestor > [data-z-index-level="keyboard-frame"], + +#screen:-moz-full-screen-ancestor > [data-z-index-level="notification-toaster"], +#screen:-moz-full-screen-ancestor > [data-z-index-level="cards-view"], +#screen:-moz-full-screen-ancestor > [data-z-index-level="attention-screen"], +#screen:-moz-full-screen-ancestor > [data-z-index-level="permission-screen"], +#screen:-moz-full-screen-ancestor > [data-z-index-level="app-install-dialog"] { + z-index: 2147483647; +} -- cgit v0.9.1