diff options
Diffstat (limited to 'shared/style/headers.css')
| -rw-r--r-- | shared/style/headers.css | 381 |
1 files changed, 381 insertions, 0 deletions
diff --git a/shared/style/headers.css b/shared/style/headers.css new file mode 100644 index 0000000..5d37c3f --- /dev/null +++ b/shared/style/headers.css @@ -0,0 +1,381 @@ +/* ---------------------------------- + * HEADERS: default + * ---------------------------------- */ +section[role="region"] > header:first-child { + position: relative; + z-index: 10; + padding: 0; + height: 5rem; + color: #fff; + background: url(headers/images/ui/header.png) repeat-x 0 0; + background-size: auto 100%; + border: none; +} + +section[role="region"] > header:first-child:after { + content: ""; + display: block; + height: 0.3rem; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: url(headers/images/ui/shadow.png) repeat-x 0 0; + background-size: auto 100%; +} + +section[role="region"] > header:first-child h1 { + font: 2.5rem/4.8rem "MozTT", Sans-serif; + text-align: left; + color: #fff; + white-space: nowrap; + text-overflow: ellipsis; + display: block; + overflow: hidden; + margin: 0 0 0 3rem; + height: 100% +} + +section[role="region"] > header:first-child h1 em { + font: 400 1.5rem/1em "MozTT", Sans-serif; +} + +section[role="region"] > header:first-child form { + display: block; + overflow: hidden; + position: relative; + padding: 1rem 1rem 0 0.5rem ; + margin-left: 2.5rem; +} + +section[role="region"] > header:first-child input[type="text"] { + width: 100%; + height: 3rem; + -moz-box-sizing: border-box; + padding: 0 0.8rem; + border: solid 0.1rem #9d4123; + border-top-color: #a6501e; + border-radius: 0.3rem; + background: #fff url(headers/images/ui/shadow.png) repeat-x left -0.1rem; + font: 1.5rem/3em "MozTT", Sans-serif; + box-shadow: none; +} + +section[role="region"] > header:first-child form button[type="reset"] { + font-size: 0; + overflow: hidden; + position: absolute; + right: 1rem; + top: 1rem; + bottom: 0; + width: 3rem; + height: auto; + margin: 0; + display: none; + border: none; + background: url(headers/images/icons/clear.png) no-repeat center center; +} + +section[role="region"] > header:first-child input[type="text"]:valid + button[type="reset"] { + display: block; +} + +/* Generic set of actions in toolbar */ +section[role="region"] > header:first-child menu[type="toolbar"] { + height: 100%; + float: right; +} + +section[role="region"] > header:first-child menu[type="toolbar"] a, +section[role="region"] > header:first-child menu[type="toolbar"] button { + height: 5rem; + min-width: 5rem; + width: auto; + margin-bottom: 0; + border-radius: 0; + line-height: 5rem; + float: left; + background: none; + padding: 0 1.75rem; + -moz-box-sizing: border-box; + text-align: center; + text-shadow: none; + position: relative; + z-index: 5; +} + +section[role="region"] > header:first-child menu[type="toolbar"] a:last-child, +section[role="region"] > header:first-child menu[type="toolbar"] button:last-child { + background: url(headers/images/ui/separator.png) no-repeat left center; + margin-left: -0.2rem; + z-index: 1; +} + +section[role="region"] > header:first-child menu[type="toolbar"] { + padding: 0; + margin: 0; +} + +section[role="region"] > header:first-child a, +section[role="region"] > header:first-child button { + border: none; + background: none; + padding: 0; + overflow: hidden; + font: 400 1.5rem/1.1em "MozTT", Sans-serif; + color: #fff; + border-radius: 0; + text-decoration: none; +} + + +/* Pressed state */ +section[role="region"] > header:first-child a::-moz-focus-inner, +section[role="region"] > header:first-child button::-moz-focus-inner, +section[role="region"] > header:first-child a:active, +section[role="region"] > header:first-child button:active, +section[role="region"] > header:first-child a:focus, +section[role="region"] > header:first-child button:focus { + outline: none !important; + border: none !important; +} + +section[role="region"] > header:first-child a:not([aria-disabled="true"]):active .icon:after, +section[role="region"] > header:first-child button:not(:disabled):active .icon:after, +section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active, +section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):active { + background: #008aaa !important; + transition: background 0.2s ease; + border-bottom: solid 0.1rem rgba(0, 0, 0, 0.2) !important; +} + +/* Disabled state */ +section[role="region"] > header:first-child menu[type="toolbar"] a[aria-disabled="true"], +section[role="region"] > header:first-child menu[type="toolbar"] button[disabled] { + opacity: 0.5; +} + +section[role="region"] > header:first-child a:first-letter, +section[role="region"] > header:first-child button:first-letter { + text-transform: uppercase; +} + +/* Icon definitions */ +section[role="region"] > header:first-child .icon { + display: inline-block; + vertical-align: top; + float: none; + width: 3rem; + height: 3rem; + margin: 0 -1rem; + background: transparent no-repeat center center; + font-size: 0; + overflow: hidden; + position: relative; + height: 4.9rem; +} + +section[role="region"] > header:first-child .icon.icon-add { + background-image: url(headers/images/icons/add.png); +} + +section[role="region"] > header:first-child .icon.icon-compose { + background-image: url(headers/images/icons/compose.png); +} + +section[role="region"] > header:first-child .icon.icon-edit { + background-image: url(headers/images/icons/edit.png); +} + +section[role="region"] > header:first-child .icon.icon-send { + background-image: url(headers/images/icons/send.png); +} + +section[role="region"] > header:first-child .icon.icon-close { + background-image: url(headers/images/icons/close.png); +} + +section[role="region"] > header:first-child .icon.icon-back { + background-image: url(headers/images/icons/back.png); +} + +section[role="region"] > header:first-child .icon.icon-menu { + background-image: url(headers/images/icons/menu.png); +} + +section[role="region"] > header:first-child .icon.icon-user { + background-image: url(headers/images/icons/user.png); +} + +section[role="region"] > header:first-child .icon.icon-reply { + background-image: url(headers/images/icons/reply.png); +} + +section[role="region"] > header:first-child .icon.icon-reply-all { + background-image: url(headers/images/icons/reply-all.png); +} + +/* Navigation links (back, cancel, etc) */ +section[role="region"] > header:first-child > button, +section[role="region"] > header:first-child > a { + position: absolute; + left: 0; + width: 5rem; + height: 5rem; + background: url(headers/images/ui/separator-large.png) no-repeat 2rem center; + overflow: hidden; +} + +section[role="region"] > header:first-child > button::-moz-focus-inner { + border: 0; + padding: 0; +} + +section[role="region"] > header:first-child > button .icon, +section[role="region"] > header:first-child > a .icon { + display: block; + overflow: visible; + font-size: 0; + position: static; + height: 4.9rem; + margin: 0; + width: 2rem; +} + +section[role="region"] > header:first-child > button .icon:after, +section[role="region"] > header:first-child > a .icon:after { + content: ""; + position: absolute; + left: 0; + top: 0; + z-index: -1; + width: 2rem; + height: 4.9rem; + background: #9d3d26 url(headers/images/ui/negative.png) repeat-x 0 0; +} + +section[role="region"] > header > a .icon.icon-menu, +section[role="region"] > header > button .icon.icon-menu { + background-position: -1.1rem center; +} + +/* ---------------------------------- + * HEADERS: subheader + * ---------------------------------- */ + +section[role="region"] > header { + background: url(headers/images/ui/subheader.png) repeat left bottom; + border-bottom: solid 0.1rem #e6e6e6; + z-index: 0; + padding: 0.4rem 0; + height: auto; + color: #424242; +} + +section[role="region"] > header:after { + display: none; +} + +section[role="region"] > header h2 { + font-family: "MozTT", Sans-serif; + font-weight: 400; + margin: 0 3rem; + font-size: 1.5rem; + line-height: 1.8rem; +} + +/* ---------------------------------- + * HEADERS: dark + * ---------------------------------- */ +section[role="region"].skin-dark > header:first-child, +.skin-dark section[role="region"] > header:first-child { + background: url(headers/images/ui/dark/header.png) repeat-x 0 0; +} + +/* Navigation links (back, cancel, etc) */ +section[role="region"].skin-dark > header:first-child > a .icon:after, +.skin-dark section[role="region"] > header:first-child > a .icon:after, +section[role="region"].skin-dark > header:first-child > button .icon:after, +.skin-dark section[role="region"] > header:first-child > button .icon:after { + background: #26272c url(headers/images/ui/dark/negative.png) repeat-x 0 0; +} + +section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:last-child, +.skin-dark section[role="region"] > header:first-child menu[type="toolbar"] a:last-child, +section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:last-child, +.skin-dark section[role="region"] > header:first-child menu[type="toolbar"] button:last-child { + background-image: url(headers/images/ui/dark/separator.png); +} + +section[role="region"].skin-dark > header, +.skin-dark section[role="region"] > header { + background: #7f7f7f url(headers/images/ui/dark/subheader.png) repeat-x left bottom; + color: #c5c5c5; +} + +/* ---------------------------------- + * HEADERS: organic + * ---------------------------------- */ + +section[role="region"].skin-organic > header:first-child, +.skin-organic section[role="region"] > header:first-child { + background: url(headers/images/ui/organic/header.png) repeat-x 0 0, url(headers/images/ui/organic/pattern.png) repeat 0 0; +} + +section[role="region"].skin-organic > header:first-child:after, +.skin-organic section[role="region"] > header:first-child:after { + margin-top: -0.1rem; +} + +/* Navigation links (back, cancel, etc) */ +section[role="region"].skin-organic > header:first-child > a .icon:after, +.skin-organic section[role="region"] > header:first-child > a .icon:after, +section[role="region"].skin-organic > header:first-child > button .icon:after, +.skin-organic section[role="region"] > header > button .icon:after { + background: url(headers/images/ui/organic/negative.png) repeat-x 0 0; +} + +section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:last-child, +.skin-organic section[role="region"] > header:first-child menu[type="toolbar"] a:last-child, +section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:last-child, +.skin-organic section[role="region"] > header:first-child menu[type="toolbar"] button:last-child { + background-image: url(headers/images/ui/organic/separator.png); +} + +section[role="region"].skin-organic > header, +.skin-organic section[role="region"] > header { + background: #7f7f7f url(headers/images/ui/organic/subheader.png) repeat-x left bottom; + color: #fff; +} + +/* ---------------------------------- + * HEADERS: right-to-left tweaks + * ---------------------------------- */ + +html[dir="rtl"] section[role="region"] > header:first-child h1 { + text-align: right; + margin: 0 3rem 0 0; +} + +html[dir="rtl"] section[role="region"] > header:first-child button, +html[dir="rtl"] section[role="region"] > header:first-child a { + left: inherit; + right: 0; +} + +html[dir="rtl"] section[role="region"] > header:first-child > button .icon, +html[dir="rtl"] section[role="region"] > header:first-child > a .icon { + margin-left: 0; + margin-right: -2rem; +} + +html[dir="rtl"] section[role="region"] > header:first-child > button .icon:after, +html[dir="rtl"] section[role="region"] > header:first-child > a .icon:after { + left: inherit; + right: 0; +} + +html[dir="rtl"] section[role="region"] > header:first-child .icon.icon-back { + background-image: url(headers/images/icons/back-rtl.png); +} + |