Permalink
Browse files

Move apptheme to apptheme.css

  • Loading branch information...
1 parent 8ef457a commit d4d18091deae96dce3991fba0e23a0a4b160560e @timdream committed Apr 6, 2012
Showing with 172 additions and 131 deletions.
  1. +6 −1 apps/uitest/index.html
  2. +160 −0 apps/uitest/style/apptheme.css
  3. +6 −130 apps/uitest/style/uitest.css
View
@@ -3,8 +3,13 @@
<head>
<meta charset="utf-8">
<title>UI tests</title>
- <!-- We don't need localization in this app -->
+ <!-- apptheme will be applied as browser default
+ instead of being referenced here. -->
+ <link rel="stylesheet" type="text/css" href="style/apptheme.css">
+
<link rel="stylesheet" type="text/css" href="style/uitest.css">
+
+ <!-- We don't need localization in this app -->
<script type="text/javascript" src="js/uitest.js"></script>
</head>
<body>
@@ -0,0 +1,160 @@
+/*
+
+This is the proposed system-wide theme to ship as browser default.
+
+They all begin with html[mozapptheme="true"] and apply to elements
+directly instead of classNames.
+
+Web authors can opt-in these application theme with <html mozapptheme="true">.
+Since this is a opt-in style, it won't break the current web & force people to do CSS resets.
+
+In the future this should extend to media queries
+in order for apps to run on browsers without apptheme:
+
+@media not (-moz-apptheme) {
+ ... apply my application style here ...
+}
+
+<link media="not (-moz-apptheme)" rel="stylesheet" type="text/css" href="myapptheme.css">
+
+or in Javascript:
+
+if (! 'mozapptheme' in document.documentElement) {
+ ... bind my own app interaction here ...
+}
+
+*/
+
+@font-face {
+ font-family: 'Open Sans';
+ src: url('fonts/Open-Sans.woff');
+}
+
+@font-face {
+ font-family: 'Open Sans';
+ font-weight: bold;
+ src: url('fonts/Open-Sans-Bold.woff');
+}
+
+@font-face {
+ font-family: 'Open Sans';
+ font-weight: 600;
+ src: url('fonts/Open-Sans-Semibold.woff');
+}
+
+html[mozapptheme="true"] {
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ overflow-x: hidden;
+ overflow-y: hidden;
+}
+
+html[mozapptheme="true"] body {
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ overflow-x: hidden;
+ overflow-y: hidden;
+
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #000;
+ font-family: 'Open Sans', sans-serif;
+}
+
+html[mozapptheme="true"] section {
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 100%;
+ -moz-transition: -moz-transform 0.3s ease;
+ top: 0;
+}
+
+html[mozapptheme="true"] section > header,
+html[mozapptheme="true"] section > footer {
+ -moz-box-sizing: border-box;
+ position: absolute;
+ display: block;
+ left: 0;
+ right: 0;
+ background-color: #fff;
+ background: url("images/app-texture.png") repeat scroll 50% 50%, -moz-linear-gradient(center top , rgb(244, 244, 244), rgb(234, 234, 234)) repeat scroll 0% 0% transparent;
+ margin: 0;
+ padding: 0;
+}
+
+html[mozapptheme="true"] section > header {
+ top: 0;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+ height: 64px;
+ border-bottom: solid 3px #9b9b9b;
+}
+
+html[mozapptheme="true"] section > header > h1 {
+ font-size: 26px;
+ font-weight: bold;
+ margin: 0;
+ padding: 0;
+ line-height: 64px;
+ text-align: center;
+ color: rgb(51, 51, 51);
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+html[mozapptheme="true"] section > footer {
+ bottom: 0;
+ border-bottom-left-radius: 8px;
+ border-bottom-right-radius: 8px;
+ height: 64px;
+ border-top: solid 3px #9b9b9b;
+}
+
+html[mozapptheme="true"] section > menu {
+ position: absolute;
+ top: 64px;
+ bottom: 64px;
+ left: 0;
+ right: 0;
+ padding: 0;
+ margin: 0;
+ overflow-y: auto;
+ -moz-user-select: none;
+
+ background: url("images/app-texture.png") repeat scroll 50% 50%, rgb(243, 243, 243);
+}
+
+html[mozapptheme="true"] section > menu:first-child {
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+ top: 0;
+}
+
+html[mozapptheme="true"] section > menu:last-child {
+ border-bottom-left-radius: 8px;
+ border-bottom-right-radius: 8px;
+ bottom: 0;
+}
+
+html[mozapptheme="true"] section > menu > * {
+ -moz-box-sizing: border-box;
+ height: 56px;
+ padding: 4px 16px;
+ margin: 0;
+ border-top: 1px solid hsla(207,22%,92%,1);
+ border-bottom: 1px solid hsla(223,7%,81%,1);
+
+ font-size: 26px;
+ color: rgb(18, 47, 64);
+ line-height: 48px;
+ font-weight: 600;
+}
+
+html[mozapptheme="true"] section > menu > *:active {
+ background: hsla(35,100%,50%,.2);
+}
@@ -1,48 +1,7 @@
-html[mozapptheme="true"] {
- height: 100%;
- padding: 0;
- margin: 0;
- overflow-x: hidden;
- overflow-y: hidden;
-}
-
-html[mozapptheme="true"] body {
- height: 100%;
- padding: 0;
- margin: 0;
- overflow-x: hidden;
- overflow-y: hidden;
-
- margin: 0;
- width: 100%;
- height: 100%;
- background-color: #000;
- font-family: 'Open Sans', sans-serif;
-}
-
-@font-face {
- font-family: 'Open Sans';
- src: url('fonts/Open-Sans.woff');
-}
-@font-face {
- font-family: 'Open Sans';
- font-weight: bold;
- src: url('fonts/Open-Sans-Bold.woff');
-}
-@font-face {
- font-family: 'Open Sans';
- font-weight: 600;
- src: url('fonts/Open-Sans-Semibold.woff');
-}
-
-html[mozapptheme="true"] section {
- position: absolute;
- display: block;
- width: 100%;
- height: 100%;
- -moz-transition: -moz-transform 0.3s ease;
- top: 0;
-}
+/*
+ XXX: these should move to apptheme.css when we decided
+ the correct protocol to specify current active section of the app in CSS.
+*/
body.test section {
-moz-transform: translateX(-100%);
@@ -90,92 +49,9 @@ body.test #tests {
-moz-transition: -moz-transform 0.3s ease, width 0s linear 0.5s;
}
-html[mozapptheme="true"] section > header,
-html[mozapptheme="true"] section > footer {
- -moz-box-sizing: border-box;
- position: absolute;
- display: block;
- left: 0;
- right: 0;
- background-color: #fff;
- background: url("images/app-texture.png") repeat scroll 50% 50%, -moz-linear-gradient(center top , rgb(244, 244, 244), rgb(234, 234, 234)) repeat scroll 0% 0% transparent;
- margin: 0;
- padding: 0;
-
-
-html[mozapptheme="true"] section > header {
- top: 0;
- border-top-left-radius: 8px;
- border-top-right-radius: 8px;
- height: 64px;
- border-bottom: solid 3px #9b9b9b;
-}
-
-html[mozapptheme="true"] section > footer {
- bottom: 0;
- border-bottom-left-radius: 8px;
- border-bottom-right-radius: 8px;
- height: 64px;
- border-top: solid 3px #9b9b9b;
-}
-
-html[mozapptheme="true"] section > menu {
- position: absolute;
- top: 64px;
- bottom: 64px;
- left: 0;
- right: 0;
- padding: 0;
- margin: 0;
- overflow-y: auto;
- -moz-user-select: none;
-
- background: url("images/app-texture.png") repeat scroll 50% 50%, rgb(243, 243, 243);
-}
-
-html[mozapptheme="true"] section > menu:first-child {
- border-top-left-radius: 8px;
- border-top-right-radius: 8px;
- top: 0;
-}
-
-html[mozapptheme="true"] section > menu:last-child {
- border-bottom-left-radius: 8px;
- border-bottom-right-radius: 8px;
- bottom: 0;
-}
-
-html[mozapptheme="true"] section > header > h1 {
- font-size: 26px;
- font-weight: bold;
- margin: 0;
- padding: 0;
- line-height: 64px;
- text-align: center;
- color: rgb(51, 51, 51);
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-html[mozapptheme="true"] section > menu > * {
- -moz-box-sizing: border-box;
- height: 56px;
- padding: 4px 16px;
- margin: 0;
- border-top: 1px solid hsla(207,22%,92%,1);
- border-bottom: 1px solid hsla(223,7%,81%,1);
-
- font-size: 26px;
- color: rgb(18, 47, 64);
- line-height: 48px;
- font-weight: 600;
-}
-
-html[mozapptheme="true"] section > menu > *:active {
- background: hsla(35,100%,50%,.2);
-}
+/* // XXX: move to apptheme */
+/* This is the only non-standard Widget in our UI test app */
#test-iframe {
border: none;
width: 100%;

0 comments on commit d4d1809

Please sign in to comment.