diff options
Diffstat (limited to 'apps/system/style/themes/default')
15 files changed, 466 insertions, 0 deletions
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 Binary files differnew file mode 100644 index 0000000..5f5428f --- /dev/null +++ b/apps/system/style/themes/default/images/noise.png diff --git a/apps/system/style/themes/default/images/notifications.png b/apps/system/style/themes/default/images/notifications.png Binary files differnew file mode 100644 index 0000000..f5e966d --- /dev/null +++ b/apps/system/style/themes/default/images/notifications.png diff --git a/apps/system/style/themes/default/images/notifications/close.png b/apps/system/style/themes/default/images/notifications/close.png Binary files differnew file mode 100644 index 0000000..9604f1b --- /dev/null +++ b/apps/system/style/themes/default/images/notifications/close.png diff --git a/apps/system/style/themes/default/images/tasks/close-active.png b/apps/system/style/themes/default/images/tasks/close-active.png Binary files differnew file mode 100644 index 0000000..b2666b8 --- /dev/null +++ b/apps/system/style/themes/default/images/tasks/close-active.png diff --git a/apps/system/style/themes/default/images/tasks/close.png b/apps/system/style/themes/default/images/tasks/close.png Binary files differnew file mode 100644 index 0000000..9604f1b --- /dev/null +++ b/apps/system/style/themes/default/images/tasks/close.png diff --git a/apps/system/style/themes/default/images/ui/affirmative.png b/apps/system/style/themes/default/images/ui/affirmative.png Binary files differnew file mode 100644 index 0000000..42aed39 --- /dev/null +++ b/apps/system/style/themes/default/images/ui/affirmative.png diff --git a/apps/system/style/themes/default/images/ui/default.png b/apps/system/style/themes/default/images/ui/default.png Binary files differnew file mode 100644 index 0000000..2ff298a --- /dev/null +++ b/apps/system/style/themes/default/images/ui/default.png diff --git a/apps/system/style/themes/default/images/ui/gradient.png b/apps/system/style/themes/default/images/ui/gradient.png Binary files differnew file mode 100644 index 0000000..9097844 --- /dev/null +++ b/apps/system/style/themes/default/images/ui/gradient.png diff --git a/apps/system/style/themes/default/images/ui/pattern.png b/apps/system/style/themes/default/images/ui/pattern.png Binary files differnew file mode 100644 index 0000000..4f7bc8b --- /dev/null +++ b/apps/system/style/themes/default/images/ui/pattern.png diff --git a/apps/system/style/themes/default/images/ui/time_pattern.png b/apps/system/style/themes/default/images/ui/time_pattern.png Binary files differnew file mode 100644 index 0000000..c86eba0 --- /dev/null +++ b/apps/system/style/themes/default/images/ui/time_pattern.png 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; +} + |
