Permalink
Browse files

Implementing new UI according to the Gaia (Firefox OS UI) guidelines

  • Loading branch information...
1 parent fe8b901 commit 39abe8956b0011f5334646164ea5871035fc79aa @robnyman committed Feb 1, 2013
Showing with 646 additions and 115 deletions.
  1. +4 −102 css/base.css
  2. +194 −0 css/buttons.css
  3. +381 −0 css/headers.css
  4. +42 −0 css/toolbars.css
  5. BIN images/buttons/icons/dialog.png
  6. BIN images/buttons/icons/view.png
  7. BIN images/buttons/ui/danger-disabled.png
  8. BIN images/buttons/ui/danger-press.png
  9. BIN images/buttons/ui/danger.png
  10. BIN images/buttons/ui/default.png
  11. BIN images/buttons/ui/disabled.png
  12. BIN images/buttons/ui/recommend.png
  13. BIN images/buttons/ui/shadow.png
  14. BIN images/headers/icons/.DS_Store
  15. BIN images/headers/icons/add.png
  16. BIN images/headers/icons/back-rtl.png
  17. BIN images/headers/icons/back.png
  18. BIN images/headers/icons/clear.png
  19. BIN images/headers/icons/close.png
  20. BIN images/headers/icons/compose.png
  21. BIN images/headers/icons/edit.png
  22. BIN images/headers/icons/menu.png
  23. BIN images/headers/icons/reply-all.png
  24. BIN images/headers/icons/reply.png
  25. BIN images/headers/icons/send.png
  26. BIN images/headers/icons/update.png
  27. BIN images/headers/icons/user.png
  28. BIN images/headers/ui/dark/header.png
  29. BIN images/headers/ui/dark/negative.png
  30. BIN images/headers/ui/dark/separator.png
  31. BIN images/headers/ui/dark/subheader.png
  32. BIN images/headers/ui/header.png
  33. BIN images/headers/ui/negative.png
  34. BIN images/headers/ui/organic/header.png
  35. BIN images/headers/ui/organic/negative.png
  36. BIN images/headers/ui/organic/pattern.png
  37. BIN images/headers/ui/organic/separator.png
  38. BIN images/headers/ui/organic/subheader.png
  39. BIN images/headers/ui/overlay/header.png
  40. BIN images/headers/ui/overlay/separator.png
  41. BIN images/headers/ui/search.png
  42. BIN images/headers/ui/separator-large.png
  43. BIN images/headers/ui/separator.png
  44. BIN images/headers/ui/shadow.png
  45. BIN images/headers/ui/subheader.png
  46. BIN images/toolbars/icons/update.png
  47. BIN images/toolbars/ui/background.png
  48. +25 −13 index.html
View
@@ -9,53 +9,14 @@ html, body, button {
font: 14px Helvetica, "Open Sans", sans-serif;
}
-header {
- background: #000;
- color: #fff;
- height: 4.9rem;
- position: relative;
- z-index: 2;
-}
-
-header #install {
+#install {
display: none;
- float: right;
- margin: 0;
- padding: 0rem 0.5rem 0rem 0.5rem;
- height: 100%;
-}
-
-header #install button {
- color: #fff;
- font-size: 1.2rem;
- font-weight: bold;
- background: -moz-linear-gradient(top,#6a7b86 0%,#424f5a 100%);
- background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#6a7b86),color-stop(100%,#424f5a));
- background: -webkit-linear-gradient(top,#6a7b86 0%,#424f5a 100%);
- background: -o-linear-gradient(top,#6a7b86 0%,#424f5a 100%);
- background: -ms-linear-gradient(top,#6a7b86 0%,#424f5a 100%);
- background: linear-gradient(top,#6a7b86 0%,#424f5a 100%);
- padding: 0.3rem;
- border: none;
- border-radius: 5px;
- margin: 1.4rem 1rem 0;
}
-header #install button:active {
- background: #008000;
-}
-
-header.show-install #install {
+#install.show-install {
display: inline-block;
}
-header h1 {
- font: normal 1.8rem/4.6rem "Open Sans", sans-serif;
- height: 100%;
- margin: 0 0 0 2rem;
- padding: 0 0 0 0.1rem;
-}
-
header.show-install h1 {
display: inline-block;
width: 55%;
@@ -103,78 +64,19 @@ header.show-install h1 {
width: 32%;
vertical-align: top;
margin: 0 auto 2rem;
- padding: 1rem;
- color: #fff;
- font-weight: bold;
- border-radius: 5px;
- background: rgb(76,76,76);
- background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(25%,rgba(102,102,102,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(76%,rgba(43,43,43,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1)));
- background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
- background: -o-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
- background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
- background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
}
#image-to-share {
display: none;
}
footer {
- background: -moz-linear-gradient(top,#6a7b86 0%,#424f5a 100%);
- background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#6a7b86),color-stop(100%,#424f5a));
- background: -webkit-linear-gradient(top,#6a7b86 0%,#424f5a 100%);
- background: -o-linear-gradient(top,#6a7b86 0%,#424f5a 100%);
- background: -ms-linear-gradient(top,#6a7b86 0%,#424f5a 100%);
- background: linear-gradient(top,#6a7b86 0%,#424f5a 100%);
- color: #fff;
position: fixed;
width: 100%;
height: 5rem;
bottom: 0;
}
-footer ul {
- margin: 0px;
- padding: 0px;
- width: 100%;
- height:100%;
-}
-
-footer li {
- float: left;
- border-right: 1px solid #445;
- width: 49%;
- height: 100%;
- list-style: none;
- margin: 0;
- text-align: center;
-}
-
-footer li button {
- display: inline-block;
- background: transparent;
- border: none;
- height: 100%;
- color: #fff;
- font-size: 1.2rem;
- font-weight: 600;
-}
-
-footer li.activated {
- background: #b4beca;
- background: -moz-linear-gradient(top,#b4beca 0%,#e1e5eB 100%);
- background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#b4beca),color-stop(100%,#e1e5eB));
- background: -webkit-linear-gradient(top,#b4beca 0%,#e1e5eB 100%);
- background: -o-linear-gradient(top,#b4beca 0%,#e1e5eB 100%);
- background: -ms-linear-gradient(top,#b4beca 0%,#e1e5eB 100%);
- background: linear-gradient(top,#b4beca 0%,#e1e5eB 100%);
-}
-
-footer li:active {
- background: #008000;
-}
-
-footer li:last-child {
- border:none;
+[role="toolbar"] li button.update {
+ background-image: url("../images/toolbars/icons/update.png");
}
View
@@ -0,0 +1,194 @@
+/* ----------------------------------
+ * Buttons
+ * ---------------------------------- */
+
+a[role="button"]::-moz-focus-inner,
+button::-moz-focus-inner {
+ border: none;
+ outline: none;
+}
+
+button,
+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/buttons/ui/default.png) repeat-x left bottom;
+ border: 0.1rem solid #9f9f9f;
+ border-radius: 0.3rem;
+ font: 400 1.6rem/3.8rem 'MozTT', Sans-serif;
+ color: #333;
+ text-align: center;
+ text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3);
+ text-decoration: none;
+ outline: none;
+}
+
+/* Press (default & recommend) */
+button:active,
+a[role="button"]:active,
+button.recommend:active,
+a.recommend[role="button"]:active {
+ border-color: #008aaa;
+ background: #008aaa;
+ color: #333;
+}
+
+/* Recommend */
+button.recommend,
+a[role="button"].recommend {
+ background-image: url(../images/buttons/ui/recommend.png);
+ background-color: #00caf2;
+ border-color: #00acce;
+}
+
+/* Danger */
+button.danger,
+a.danger[role="button"] {
+ background-image: url(../images/buttons/ui/danger.png);
+ background-color: #b70404;
+ color: #fff;
+ text-shadow: -0.1rem -0.1rem 0 #830b0b;
+ border: none;
+}
+
+/* Danger Press */
+button.danger:active,
+a[role="button"].danger:active {
+ background-image: url(../images/buttons/ui/danger-press.png);
+ background-color: #890707;
+}
+
+/* Disabled (default & recommend) */
+button[disabled],
+a[role="button"][aria-disabled="true"],
+button[disabled].recommend,
+a[role="button"][aria-disabled="true"].recommend {
+ background-image: url(../images/buttons/ui/disabled.png);
+ background-color: transparent;
+ border-color: #dadada;
+ color: #bcbcbc;
+ pointer-events: none;
+}
+
+/* Danger disabled */
+button[disabled].danger,
+a[role="button"][aria-disabled="true"].danger {
+ background-image: url(../images/buttons/ui/danger-disabled.png);
+ color: #fff;
+ text-shadow: none;
+ pointer-events: none;
+}
+
+
+/* ----------------------------------
+ * Buttons inside lists
+ * ---------------------------------- */
+
+li button,
+li a[role="button"] {
+ position: relative;
+ background: #e7e7e7;
+ border-color: #b6b6b6;
+ text-align: left;
+ font-weight: normal;
+ /* For hacking box-shadows we need overflow:visible; so we lose text-overflows...*/
+ white-space: normal;
+ overflow: visible;
+}
+
+/* Hacking box-shadow */
+li button:after,
+li a[role="button"]:after {
+ content: "";
+ position: absolute;
+ bottom: -0.3rem;
+ left: 0;
+ right: 0;
+ height: 0.2rem;
+ background: url( ../images/buttons/ui/shadow.png) repeat-x left bottom;
+}
+
+/* Press */
+li a[role="button"]:active:after,
+li button:active:after {
+ opacity: 0;
+}
+
+/* Disabled */
+li button[disabled],
+li a[role="button"][aria-disabled="true"] {
+ background: #ededed;
+ border-color: #d3d3d3;
+ color: #a6a6a6;
+ pointer-events: none;
+}
+
+li button[disabled].icon:before,
+li a[role="button"][aria-disabled="true"].icon:before,
+li button[disabled]:after,
+li a[role="button"][aria-disabled="true"]:after {
+ opacity: 0.3;
+}
+
+/* Icons */
+li button.icon,
+li a[role="button"].icon {
+ padding-right: 3rem;
+}
+
+li button.icon:before,
+li a[role="button"].icon:before {
+ content: "";
+ width: 3rem;
+ height: 3rem;
+ position: absolute;
+ top: 50%;
+ right: 0;
+ margin-top: -1.5rem;
+ background: transparent no-repeat center center / 100% auto;
+ pointer-events: none;
+}
+
+li button.icon-view:before,
+li a[role="button"].icon-view:before {
+ background-image: url(../images/buttons/icons/view.png);
+}
+
+li button.icon-dialog:before,
+li a[role="button"].icon-dialog:before {
+ background-image: url(../images/buttons/icons/dialog.png);
+}
+
+
+/* ----------------------------------
+ * Buttons inside lists, compact mode
+ * ---------------------------------- */
+
+ul.compact,
+ol.compact {
+ margin-bottom: 1rem;
+}
+
+.compact > li button,
+.compact > li a[role="button"] {
+ margin: -0.1rem 0;
+ border-radius: 0;
+}
+
+.compact > li:first-child button,
+.compact > li:first-child a[role="button"] {
+ border-radius: 0.3rem 0.3rem 0 0;
+}
+
+.compact > li:last-child button,
+.compact > li:last-child a[role="button"] {
+ border-radius: 0 0 0.3rem 0.3rem;
+}
Oops, something went wrong.

0 comments on commit 39abe89

Please sign in to comment.