Web   ·   Wiki   ·   Activities   ·   Blog   ·   Lists   ·   Chat   ·   Meeting   ·   Bugs   ·   Git   ·   Translate   ·   Archive   ·   People   ·   Donate
summaryrefslogtreecommitdiffstats
path: root/apps/system/style/system/system.css
diff options
context:
space:
mode:
Diffstat (limited to 'apps/system/style/system/system.css')
-rw-r--r--apps/system/style/system/system.css579
1 files changed, 579 insertions, 0 deletions
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;
+}
generated by cgit v0.9.1 at 2024-04-23 18:47:14 (GMT)