Publish Vulpes Preview 15 sources for desktop, Android and Tundra

Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
This commit is contained in:
OverSu 2026-09-30 23:13:03 +02:00
commit b38dea0597
25901 changed files with 9982925 additions and 369 deletions

View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<title>Device Storage Test</title>
<link rel="stylesheet" type="text/css" href="shared/style/buttons.css">
<link rel="stylesheet" type="text/css" href="shared/style/headers.css">
<link rel="stylesheet" type="text/css" href="style/ds-test.css">
<script src="js/ds-test.js"></script>
</head>
<body role="application">
<section role="region">
<header>
<h1 data-l10n-id="dstest-title">Device Storage Test</h1>
</header>
</section>
<section role="region">
<table>
<tr>
<td align="right">Command:</td>
<td>
<select class="fake-select" id="ds.cmd" name="ds.cmd">
<option value="getDeviceStorage">GetDeviceStorage</option>
<option value="getDeviceStorages">GetDeviceStorages</option>
<option value="free-space">Free Space</option>
<option value="used-space">Used Space</option>
<option value="available">Available</option>
<option value="enumerate">Enumerate</option>
<option value="enumerate-dcim">Enumerate DCIM</option>
<option value="enumerate-filesizes">Enum File Sizes</option>
<option value="enumerate-all">Enumerate ALL</option>
<option value="add-unnamed-file">Add & Del Unnamed File</option>
<option value="add-file">Add File</option>
<option value="del-file">Del File</option>
<option value="mod-file">Mod File</option>
<option value="show-file">Show File</option>
<option value="add-listener">Add Listener</option>
<option value="remove-listener">Remove Listener</option>
<option value="test" selected>Test</option>
</select>
</td>
</tr>
<tr>
<td align="right">Storage Type:</td>
<td>
<select class="fake-select" id="ds.type" name="ds.type">
<option value="sdcard" selected>sdcard</option>
<option value="pictures">pictures</option>
<option value="music">music</option>
<option value="videos">videos</option>
<option value="apps">apps</option>
</select>
</td>
</tr>
</table>
<br>
</section>
<section role="region">
<div class="bb-docs">
<button id="doit">Do It</button>
<button id="clear-log">Clear Log</button>
</div>
</section
<section role="region">
<header>
<h1 data-l10n-id="dstest-debug-log" id="h1-debuglog" data-hide="debuglog">Debug Log</h1>
</header>
<div class="bb-docs" id="debuglog">
<span id="log"></span>
</div>
</section>
</body>
</html>

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1 @@
{"name":"Device Storage Test","launch_path":"/index.html","description":"Test app for Device Storage","type":"certified","fullscreen":"false","developer":{"name":"dhylands","url":"https://github.com/dhylands/ds-test"},"permissions":{"systemXHR":{},"device-storage:apps":{"access":"readwrite"},"device-storage:sdcard":{"access":"readwrite"},"device-storage:music":{"access":"readwrite"},"device-storage:pictures":{"access":"readwrite"},"device-storage:videos":{"access":"readwrite"},"settings":{"access":"readonly"},"webapps-manage":{}},"activities":{"share":{"filters":{"type":"image/*"},"href":"/index.html","returnValue":true,"disposition":"window"}},"icons":{"84":"/style/icons/default_84.png","126":"/style/icons/default_126.png","142":"/style/icons/default_142.png","189":"/style/icons/default_189.png","284":"/style/icons/default_284.png"},"origin":"app://ds-test.gaiamobile.org","version":"2.5"}

View file

@ -0,0 +1,428 @@
/* ----------------------------------
* Buttons
* ---------------------------------- */
.button::-moz-focus-inner,
.bb-button::-moz-focus-inner,
button::-moz-focus-inner {
border: none;
outline: none;
}
button,
.bb-button,
.button {
font-family: sans-serif;
font-style: italic;
width: 100%;
height: 4rem;
margin: 0 0 1rem;
padding: 0 1.2rem;
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background: #d8d8d8;
border: none;
border-radius: 2rem;
font-weight: normal;
font-size: 1.6rem;
line-height: 4rem;
color: #333;
text-align: center;
text-decoration: none;
outline: none;
}
/* Recommend */
button.recommend,
.bb-button.recommend {
background-color: #00caf2;
color: #fff;
}
/* Danger */
button.danger,
.danger.bb-button {
background-color: #e51e1e;
color: #fff;
}
/* Pressed */
button:active,
.bb-button:active,
.button:active {
background-color: #b2f2ff;
color: #fff;
}
/* Icons */
button[data-icon],
.bb-button[data-icon],
.button[data-icon] {
position: relative;
}
button[data-icon]:before,
.bb-button[data-icon]:before,
.button[data-icon]:before {
position: absolute;
top: 50%;
margin-top: -1.5rem;
offset-inline-end: 1.5rem;
line-height: 3rem;
}
button[data-icon]:active:before,
.bb-button[data-icon]:active:before,
.button[data-icon]:active:before {
color: #fff;
}
/* Pressed with dark skin */
.skin-dark button:active,
.skin-dark .bb-button:active,
.skin-dark .button:active {
background-color: #00aacc;
}
/* Disabled */
button[disabled],
.bb-button[aria-disabled="true"],
.button[aria-disabled="true"] {
background-color: rgba(0,0,0,0.05);
color: #c7c7c7;
pointer-events: none;
}
button[disabled].recommend,
.bb-button[aria-disabled="true"].recommend,
.button[aria-disabled="true"].recommend {
background-color: #97cbd5;
color: rgba(255,255,255,0.5);
}
button[disabled].danger,
.bb-button[aria-disabled="true"].danger,
.button[aria-disabled="true"].danger {
background-color: #eb7474;
color: rgba(255,255,255,0.5);
}
/* Disabled with dark background */
.skin-dark button[disabled],
.skin-dark .button[aria-disabled="true"],
.skin-dark .bb-button[aria-disabled="true"] {
background-color: #565656;
color: rgba(255,255,255,0.4);
}
.skin-dark button[disabled].recommend,
.skin-dark .button[aria-disabled="true"].recommend,
.skin-dark .bb-button[aria-disabled="true"].recommend {
background-color: #006579;
}
.skin-dark button[disabled].danger,
.skin-dark .button[aria-disabled="true"].danger,
.skin-dark .bb-button[aria-disabled="true"].danger {
background-color: #730f0f;
}
button[disabled]::-moz-selection,
.button[aria-disabled="true"]::-moz-selection,
.bb-button[aria-disabled="true"]::-moz-selection {
-moz-user-select: none;
}
/* ----------------------------------
* Buttons inside lists
* ---------------------------------- */
li button,
li .bb-button,
li .button {
position: relative;
border: 0.1rem solid #c7c7c7;
background: rgba(0,0,0,0.05);
margin: 0 0 1rem;
overflow: hidden;
border-radius: 0;
display: flex;
height: auto;
min-height: 4rem;
text-overflow: initial;
white-space: normal;
line-height: 2rem;
padding: 1rem 1.2rem;
}
html[dir="ltr"] li button,
html[dir="ltr"] li .bb-button,
html[dir="ltr"] li .button {
text-align: left;
}
html[dir="rtl"] li button,
html[dir="rtl"] li .bb-button,
html[dir="rtl"] li .button {
text-align: right;
}
/* Press */
li .bb-button:active:after,
li .button:active:after,
li button:active:after {
opacity: 0;
}
/* Disabled */
li button:disabled,
li .bb-button[aria-disabled="true"],
li .button[aria-disabled="true"] {
opacity: 0.5;
}
/* Icons */
li button.icon,
li .bb-button.icon,
li .button.icon {
padding-inline-end: 4rem;
}
li button.icon:before,
li .bb-button.icon:before,
li .button.icon:before {
content: "";
width: 3rem;
height: 3rem;
position: absolute;
top: 50%;
offset-inline-end: 0.5rem;
margin-top: -1.5rem;
background: transparent no-repeat center center / 100% auto;
pointer-events: none;
}
li button[data-icon]:before,
li .bb-button[data-icon]:before,
li .button[data-icon]:before {
offset-inline-end: 1rem;
}
li button.icon-view:active,
li .bb-button.icon-view:active,
li .button.icon-view:active {
background-color: #b2f2ff;
}
li button[data-icon="expand"]:before,
li .bb-button[data-icon="expand"]:before,
li .button[data-icon="expand"]:before {
color: #00aac5;
top: unset;
bottom: 0;
}
li button[data-icon="expand"][disabled]:before,
li .bb-button[data-icon="expand"][aria-disabled="true"]:before,
li .button[data-icon="expand"][aria-disabled="true"]:before {
color: #A9A9A9;
}
li button[data-icon="forward"]:before,
li .bb-button[data-icon="forward"]:before,
li .button[data-icon="forward"]:before {
color: #686f72;
}
/* Getting more space for text, as icon is shorter */
li button.icon-dialog,
li .bb-button.icon-dialog,
li .button.icon-dialog {
padding-inline-end: 3rem;
}
li button.icon-dialog:before,
li .bb-button.icon-dialog:before,
li .button.icon-dialog:before {
width: 0;
height: 0;
top: auto;
offset-inline-end: 0.8rem;
bottom: 0.5rem;
border-top: 0.7rem solid transparent;
border-bottom: 0.7rem solid transparent;
border-inline-start: 0.7rem solid #00aac5;
z-index: 1;
}
html[dir="ltr"] li button.icon-dialog:before,
html[dir="ltr"] li .bb-button.icon-dialog:before,
html[dir="ltr"] li .button.icon-dialog:before {
transform: rotate(45deg);
}
html[dir="rtl"] li button.icon-dialog:before,
html[dir="rtl"] li .bb-button.icon-dialog:before,
html[dir="rtl"] li .button.icon-dialog:before {
transform: rotate(-45deg);
}
li button.icon-dialog:disabled:before,
li .bb-button[aria-disabled="true"].icon-dialog:before,
li .button[aria-disabled="true"].icon-dialog:before {
border-inline-start: 0.7rem solid #a9a9a9;
}
/* ----------------------------------
* Theme: Dark
* ---------------------------------- */
.skin-dark li button,
.skin-dark li .bb-button,
.skin-dark li .button {
background-color: #454545;
border: none;
color: #fff;
font-weight: normal;
}
.skin-dark li button:active,
.skin-dark li .button:active,
.skin-dark li .bb-button:active {
background-color: #00aacc;
}
.skin-dark li button.icon-view:active,
.skin-dark li .button.icon-view:active,
.skin-dark li .bb-button.icon-view:active {
background-color: #00aacc;
}
.skin-dark li button.icon-dialog:active:before,
.skin-dark li .bb-button.icon-dialog:active:before,
.skin-dark li .button.icon-dialog:active:before {
border-inline-start: 0.7rem solid #b2f2ff;
}
.skin-dark li button:disabled,
.skin-dark li .bb-button[aria-disabled="true"],
.skin-dark li .button[aria-disabled="true"] {
background-color: #454545;
opacity: 0.5;
}
/* Inputs inside of .button */
.button input,
body[role="application"] .bb-button input,
body[role="application"] .button input {
border: 0;
background: none;
}
/* select */
select {
width: 100%;
box-sizing: border-box;
font-family: sans-serif;
font-style: italic;
font-size: 1.6rem;
color: #333;
margin: 0 0 1rem;
padding: 0;
padding-inline-start: 1.1rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
height: 4rem;
border: 0.1rem solid #c7c7c7;
background: rgba(0,0,0,0.05);
}
.skin-dark select {
background-color: rgba(87, 87, 87, 0.8);
border: none;
color: #fff;
}
/* remove dotted outline */
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #333;
}
.skin-dark select:-moz-focusring {
text-shadow: 0 0 0 #fff;
}
/* Hides dropdown arrow until bug #649849 is fixed */
.bb-button.icon select,
.button.icon select,
.bb-button[data-icon] select,
.button[data-icon] select {
position: absolute;
top: -0.6rem;
offset-inline-start: 0;
width: calc(100% + 3rem);
height: 100%;
margin: 0;
padding: 0;
padding-inline-end: 5rem;
text-indent: 0;
font-weight: 400;
font-size: 1.7rem;
color: rgba(0,0,0,0);
border: none;
background: none;
}
/**
* The select element uses the text color to determine the color of the outline.
* We put a text shadow with needed offset and no blur, so that replaces the text.
*/
html[dir="ltr"] .bb-button.icon select,
html[dir="ltr"] .button.icon select,
html[dir="ltr"] .bb-button[data-icon] select,
html[dir="ltr"] .button[data-icon] select,
html[dir="ltr"] .bb-button.icon-dialog select,
html[dir="ltr"] .button.icon-dialog select {
text-shadow: 1rem 0.5rem 0 #333;
}
html[dir="rtl"] .bb-button.icon select,
html[dir="rtl"] .button.icon select,
html[dir="rtl"] .bb-button[data-icon] select,
html[dir="rtl"] .button[data-icon] select,
html[dir="rtl"] .bb-button.icon-dialog select,
html[dir="rtl"] .button.icon-dialog select {
text-shadow: -1rem 0.5rem 0 #333;
}
.bb-button.icon select option,
.button.icon select option,
.bb-button[data-icon] select option,
.button[data-icon] select option {
color: #000;
border: 0;
padding: 0.6rem 1.3rem;
text-shadow: 0 0 0 rgba(0,0,0,0);
}
.bb-button.icon-dialog,
.button.icon-dialog {
overflow: hidden;
}
html[dir="ltr"] .skin-dark .bb-button.icon select,
html[dir="ltr"] .skin-dark .button.icon select,
html[dir="ltr"] .skin-dark .bb-button[data-icon] select,
html[dir="ltr"] .skin-dark .button[data-icon] select,
html[dir="ltr"] .skin-dark .bb-button.icon-dialog select,
html[dir="ltr"] .skin-dark .button.icon-dialog select {
text-shadow: 1rem 0.5rem 0 #fff;
}
html[dir="rtl"] .skin-dark .bb-button.icon select,
html[dir="rtl"] .skin-dark .button.icon select,
html[dir="rtl"] .skin-dark .bb-button[data-icon] select,
html[dir="rtl"] .skin-dark .button[data-icon] select,
html[dir="rtl"] .skin-dark .bb-button.icon-dialog select,
html[dir="rtl"] .skin-dark .button.icon-dialog select {
text-shadow: -1rem 0.5rem 0 #fff;
}

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="#667174" fill-opacity=".7" d="m 18.2995,19.66 -5.056,-5.057 5.056,-5.056 c -0.31,-0.516 -0.62,-1.032 -0.93,-1.34 l -5.672,5.673 v 1.652 l 5.675,5.676 c 0.31,-0.515 0.722,-0.928 0.93,-1.547 z"/></svg>

After

Width:  |  Height:  |  Size: 294 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="#667174" fill-opacity=".7" d="m 11.698,19.66 5.056,-5.057 -5.056,-5.056 c 0.31,-0.516 0.62,-1.032 0.93,-1.34 L 18.3,13.88 v 1.652 l -5.675,5.676 c -0.31,-0.515 -0.722,-0.928 -0.93,-1.547 z"/></svg>

After

Width:  |  Height:  |  Size: 292 B

View file

@ -0,0 +1,280 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>Buttons</title>
<link rel="stylesheet" href="../buttons.css">
<link rel="stylesheet" href="../../elements/gaia-icons/gaia-icons-embedded.css">
<link rel="stylesheet" href="../../elements/gaia-icons/bidi-helper.css">
<!--
- These <style> and <script> elements are only used for the example code,
- they are not needed for the real case.
-->
<style>
html, body {
margin: 0;
padding: 0;
font-size: 10px;
background-color: #fff;
}
label.bb-docs {
font-family: sans-serif;
font-size: 1.2rem;
margin-left: 1.5rem;
}
h2.bb-docs {
font-size: 1.8rem;
font-weight: 300;
color: #666;
margin: -0.1rem 0 0;
background-color: #f5f5f5;
padding: 0.4rem 3rem;
border: solid 0.1rem #e8e8e8;
font-family: sans-serif;
}
div.bb-docs {
padding: 1.5rem;
}
div.bb-docs.skin-organic {
background: #f4f4f4;
}
div.bb-docs.skin-dark {
background: #000;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
body[role="application"] > [role="region"] {
height: 100%;
position: relative;
}
[data-icon]:before {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
<script>
window.onload = function() {
document.getElementById('dir').checked = false;
};
</script>
</head>
<body role="application">
<p dir="ltr">
<label class="bb-docs">
<input id="dir" type="checkbox" checked="false"
onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
RTL mode
</label>
</p>
<h2 class="bb-docs">Special buttons</h2>
<div class="bb-docs skin-organic">
<button>Default</button>
<button class="recommend">Recommend</button>
<button class="danger">Danger</button>
</div>
<h2 class="bb-docs">Buttons with icons</h2>
<div class="bb-docs skin-organic">
<button data-icon="forward" aria-label="forward" data-l10n-id="">Default</button>
<button data-icon="forward" aria-label="forward" data-l10n-id="" class="recommend">Recommend</button>
<button data-icon="forward" aria-label="forward" data-l10n-id="" class="danger">Danger</button>
<button data-icon="forward-light" aria-label="forward-light" data-l10n-id="">Default</button>
<button data-icon="back" aria-label="back" data-l10n-id="">Default</button>
<button data-icon="back-light" aria-label="back-light" data-l10n-id="">Default</button>
</div>
<h2 class="bb-docs">Disabled</h2>
<div class="bb-docs skin-organic">
<button disabled>Default</button>
<a href="#" role="button" aria-disabled="true" class="recommend bb-button">Recommend</a>
<button disabled class="danger">Danger</button>
</div>
<h2 class="bb-docs">Skin dark</h2>
<div class="bb-docs skin-dark">
<button>Default</button>
<button class="recommend">Recommend</button>
<button class="danger">Danger</button>
</div>
<h2 class="bb-docs">Disabled</h2>
<div class="bb-docs skin-dark">
<button disabled>Default</button>
<a href="#" role="button" aria-disabled="true" class="recommend bb-button">Recommend</a>
<button disabled class="danger">Danger</button>
</div>
<h2 class="bb-docs">List buttons</h2>
<div class="bb-docs skin-organic">
<ul>
<li>
<button>Default</button>
</li>
<li>
<button disabled>Disabled</button>
</li>
<li>
<button class="icon icon-view">
Icon view button
</button>
</li>
<li>
<button class="icon icon-dialog">
Icon dialog button
</button>
</li>
<li>
<span class="button icon icon-dialog">
<select>
<option selected>Icon dialog with options</option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</span>
</li>
<li>
<button class="icon icon-dialog" disabled>
Icon dialog button disabled
</button>
</li>
<li>
<button data-icon="forward" aria-label="forward" data-l10n-id="">
Side navigation
</button>
</li>
<li>
<button disabled data-icon="forward" aria-label="forward" data-l10n-id="">
Side navigation
</button>
</li>
<li>
<a role="button" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
Tuesday Sept. 18, 2012
</a>
</li>
<li>
<a role="button" aria-disabled="true" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
Tuesday Sept. 18, 2012
</a>
</li>
</ul>
</div>
<h2 class="bb-docs">Skin Dark</h2>
<div class="bb-docs skin-dark">
<ul>
<li>
<button>Default</button>
</li>
<li>
<button disabled>Disabled</button>
</li>
<li>
<button class="icon icon-dialog">
Dark icon dialog button
</button>
</li>
<li>
<button data-icon="forward" aria-label="forward" data-l10n-id="">
Side navigation
</button>
</li>
<li>
<button disabled data-icon="forward" aria-label="forward" data-l10n-id="">
Side navigation
</button>
</li>
<li>
<a role="button" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
Tuesday Sept. 18, 2012
</a>
</li>
<li>
<a role="button" aria-disabled="true" data-icon="expand" class="bb-button" aria-label="expand" data-l10n-id="">
Tuesday Sept. 18, 2012
</a>
</li>
</ul>
</div>
<h2 class="bb-docs">Select</h2>
<div class="bb-docs">
<select>
<option>option 1</option>
<option>option 2</option>
</select>
</div>
<h2 class="bb-docs">Fake select</h2>
<div class="bb-docs">
<ul>
<li>
<span class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
<select>
<option>option 1</option>
<option>option 2</option>
</select>
</span>
</li>
</ul>
</div>
<h2 class="bb-docs">Disabled select</h2>
<div class="bb-docs">
<ul>
<li>
<span aria-disabled="true" class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
<select>
<option>option 1</option>
<option>option 2</option>
</select>
</span>
</li>
</ul>
</div>
<h2 class="bb-docs">Skin dark</h2>
<div class="bb-docs skin-dark">
<select>
<option>option 1</option>
<option>option 2</option>
</select>
</div>
<h2 class="bb-docs">Fake select</h2>
<div class="bb-docs skin-dark">
<ul>
<li>
<span class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
<select>
<option>option 1</option>
<option>option 2</option>
</select>
</span>
</li>
<li>
<span aria-disabled="true" class="bb-button" data-icon="expand" aria-label="expand" data-l10n-id="">
<select>
<option>option 1</option>
<option>option 2</option>
</select>
</span>
</li>
</ul>
</div>
</body>
</html>

View file

@ -0,0 +1,378 @@
/* -------------------------------------------------------------------
HEADERS: layout
Form factor or Skin dependent styles should NOT be defined here.
------------------------------------------------------------------- */
section[role="region"] > header:first-child {
position: relative;
display: block;
z-index: 10;
padding: 0;
height: 5rem;
border: none;
}
section[role="region"] > header:first-child h1 {
font-size: 2.3rem;
line-height: 5rem;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
overflow: hidden;
margin: 0;
padding: 0 1rem;
height: 100%;
font-weight: 300;
font-style: italic;
text-align: center;
}
section[role="region"] > header:first-child h1 em {
font-weight: 400;
font-size: 1.5rem;
line-height: 1em;
font-style: normal;
}
section[role="region"] > header:first-child menu {
height: 100%;
padding: 0;
margin: 0;
}
html[dir="ltr"] section[role="region"] > header:first-child menu {
float: right;
}
html[dir="rtl"] section[role="region"] > header:first-child menu {
float: left;
}
/* ----------------------------------
Buttons
---------------------------------- */
section[role="region"] > header:first-child a,
section[role="region"] > header:first-child button {
box-sizing: border-box;
position: relative;
display: block;
overflow: hidden;
min-width: 5rem;
width: auto;
height: 5rem;
border: none;
background: none;
padding: 0 1rem;
margin: 0;
font-weight: 400;
font-size: 1.5rem;
line-height: 5rem;
border-radius: 0;
text-decoration: none;
text-align: center;
text-shadow: none;
font-style: italic;
}
html[dir="ltr"] section[role="region"] > header:first-child a,
html[dir="ltr"] section[role="region"] > header:first-child button {
float: left;
}
html[dir="rtl"] section[role="region"] > header:first-child a,
html[dir="rtl"] section[role="region"] > header:first-child button {
float: right;
}
/* Pressed state */
section[role="region"] > header:first-child a:focus {
outline: none;
}
section[role="region"] > header:first-child button::-moz-focus-inner {
outline: none;
border: none;
margin-top: -0.2rem; /* To fix line-height bug (697451) */
padding: 0;
}
/* Disabled state */
section[role="region"] > header:first-child a[aria-disabled="true"],
section[role="region"] > header:first-child button[disabled] {
opacity: 0.3;
pointer-events: none;
}
/* ----------------------------------
Icons
---------------------------------- */
section[role="region"] > header:first-child .icon {
display: block;
width: 3rem;
height: 5rem;
background: transparent no-repeat center / 3rem auto;
font-size: 0;
}
/* ----------------------------------
Subheader
---------------------------------- */
section[role="region"] > header {
z-index: 0;
height: auto;
}
section[role="region"] header h2 {
margin: 0;
padding: 0.8rem 3rem;
font-weight: 400;
font-size: 1.5rem;
line-height: 1.8rem;
}
/* -----------------------------------------------------------------
HEADER SKIN: default
Default values in case we are not overriding them using
class="skin-*"
----------------------------------------------------------------- */
section[role="region"] > header:first-child {
color: #fff;
background-color: #f97c17;
}
section[role="region"] > header:first-child h1 {
color: #fff;
}
section[role="region"] > header:first-child a,
section[role="region"] > header:first-child button {
color: rgba(0,0,0,0.6);
}
section[role="region"] > header:first-child a:active,
section[role="region"] > header:first-child button:active,
section[role="region"] > header:first-child a:hover,
section[role="region"] > header:first-child button:hover {
background-color: rgba(0,0,0,0.07);
}
section[role="region"] > header:first-child a:focus,
section[role="region"] > header:first-child button:focus {
background-color: transparent;
}
/* ----------------------------------
Icons
---------------------------------- */
section[role="region"] > header:first-child .icon-add {
background-image: url(headers/images/icons/add.png);
}
section[role="region"] > header:first-child .icon-compose {
background-image: url(headers/images/icons/compose.png);
}
html[dir="ltr"] section[role="region"] > header:first-child .icon-edit {
background-image: url(headers/images/icons/edit.png);
}
html[dir="rtl"] section[role="region"] > header:first-child .icon-edit {
background-image: url(headers/images/icons/edit-rtl.png);
}
html[dir="ltr"] section[role="region"] > header:first-child .icon-send {
background-image: url(headers/images/icons/send.png);
}
html[dir="rtl"] section[role="region"] > header:first-child .icon-send {
background-image: url(headers/images/icons/send_rtl.png);
}
section[role="region"] > header:first-child .icon-close {
background-image: url(headers/images/icons/close.png);
}
html[dir="ltr"] section[role="region"] > header:first-child .icon-back {
background-image: url(headers/images/icons/left.png);
}
html[dir="rtl"] section[role="region"] > header:first-child .icon-back {
background-image: url(headers/images/icons/right.png);
}
section[role="region"] > header:first-child .icon-menu {
background-image: url(headers/images/icons/menu.png);
}
section[role="region"] > header:first-child .icon-user {
background-image: url(headers/images/icons/user.png);
}
section[role="region"] > header:first-child .icon-up {
background-image: url(headers/images/icons/up.png);
}
section[role="region"] > header:first-child .icon-down {
background-image: url(headers/images/icons/down.png);
}
section[role="region"] > header:first-child .icon-options {
background-image: url(headers/images/icons/options.png);
}
/* ----------------------------------
Subheader
---------------------------------- */
section[role="region"] header h2 {
color: #424242;
border-bottom: solid 0.1rem #e6e6e6;
}
/* -----------------------------------------------------------------
HEADER SKIN: comms
.skin-comms will override default values
----------------------------------------------------------------- */
.skin-comms section[role="region"] > header:first-child,
section[role="region"].skin-comms > header:first-child {
background-color: #00adad;
}
.skin-comms section[role="region"] > header:first-child a,
.skin-comms section[role="region"] > header:first-child button,
section[role="region"].skin-comms > header:first-child a,
section[role="region"].skin-comms > header:first-child button {
color: rgba(0,0,0,0.5);
}
.skin-comms section[role="region"] > header:first-child a:active,
.skin-comms section[role="region"] > header:first-child button:active,
.skin-comms section[role="region"] > header:first-child a:hover,
.skin-comms section[role="region"] > header:first-child button:hover,
section[role="region"].skin-comms > header:first-child a:active,
section[role="region"].skin-comms > header:first-child button:active,
section[role="region"].skin-comms > header:first-child a:hover,
section[role="region"].skin-comms > header:first-child button:hover {
background-color: rgba(0,0,0,0.1);
}
.skin-comms section[role="region"] > header:first-child a:focus,
.skin-comms section[role="region"] > header:first-child button:focus,
section[role="region"].skin-comms > header:first-child a:focus,
section[role="region"].skin-comms > header:first-child button:focus {
background-color: transparent;
}
/* -----------------------------------------------------------------
HEADER SKIN: dark
.skin-dark will override default values
----------------------------------------------------------------- */
section[role="region"].skin-dark > header:first-child,
.skin-dark > section[role="region"] > header:first-child {
background-color: #242d33;
}
.skin-dark section[role="region"] > header:first-child a,
.skin-dark section[role="region"] > header:first-child button,
section[role="region"].skin-dark > header:first-child a,
section[role="region"].skin-dark > header:first-child button {
color: #00aac5;
}
.skin-dark section[role="region"] > header:first-child a:active,
.skin-dark section[role="region"] > header:first-child button:active,
.skin-dark section[role="region"] > header:first-child a:hover,
.skin-dark section[role="region"] > header:first-child button:hover,
section[role="region"].skin-dark > header:first-child a:active,
section[role="region"].skin-dark > header:first-child button:active,
section[role="region"].skin-dark > header:first-child a:hover,
section[role="region"].skin-dark > header:first-child button:hover {
background-color: rgba(0,0,0,0.4);
}
.skin-dark section[role="region"] > header:first-child a:focus,
.skin-dark section[role="region"] > header:first-child button:focus,
section[role="region"].skin-dark > header:first-child a:focus,
section[role="region"].skin-dark > header:first-child button:focus {
background-color: transparent;
}
section[role="region"].skin-dark header h2,
.skin-dark > section[role="region"] header h2 {
background-color: #2c353b;
color: #fff;
border: none;
}
/* -----------------------------------------------------------------
HEADER SKIN: organic
.skin-organic will override default values
----------------------------------------------------------------- */
section[role="region"].skin-organic > header:first-child,
.skin-organic section[role="region"] > header:first-child {
color: #868692;
background-color: #f4f4f4;
}
section[role="region"].skin-organic > header:first-child h1,
.skin-organic section[role="region"] > header:first-child h1 {
color: #868692;
}
section[role="region"].skin-organic > header:first-child a,
section[role="region"].skin-organic > header:first-child button,
.skin-organic section[role="region"] > header:first-child a,
.skin-organic section[role="region"] > header:first-child button {
color: #00aac5;
}
section[role="region"].skin-organic > header:first-child a:focus,
section[role="region"].skin-organic > header:first-child button:focus,
.skin-organic section[role="region"] > header:first-child a:focus,
.skin-organic section[role="region"] > header:first-child button:focus {
background-color: transparent;
}
/* ----------------------------------
Icons
---------------------------------- */
html[dir="ltr"] section[role="region"].skin-organic > header:first-child .icon-back,
html[dir="ltr"] .skin-organic section[role="region"] > header:first-child .icon-back {
background-image: url(headers/images/icons/organic/left.png);
}
html[dir="rtl"] section[role="region"].skin-organic > header:first-child .icon-back,
html[dir="rtl"] .skin-organic section[role="region"] > header:first-child .icon-back {
background-image: url(headers/images/icons/organic/right.png);
}
section[role="region"].skin-organic > header:first-child .icon-close,
.skin-organic section[role="region"] > header:first-child .icon-close {
background-image: url(headers/images/icons/organic/close.png);
}
section[role="region"].skin-organic > header:first-child .icon-add,
.skin-organic section[role="region"] > header:first-child .icon-add {
background-image: url(headers/images/icons/organic/add.png);
}
html[dir="ltr"] section[role="region"].skin-organic > header:first-child .icon-edit,
html[dir="ltr"] .skin-organic section[role="region"] > header:first-child .icon-edit {
background-image: url(headers/images/icons/organic/edit.png);
}
html[dir="rtl"] section[role="region"].skin-organic > header:first-child .icon-edit,
html[dir="rtl"] .skin-organic section[role="region"] > header:first-child .icon-edit {
background-image: url(headers/images/icons/organic/edit-rtl.png);
}
/* ----------------------------------
Subheader
---------------------------------- */
section[role="region"].skin-organic header h2,
.skin-organic section[role="region"] header h2 {
background-color: #e7e7e7;
color: #4d4d4d;
border: none;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 162 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 273 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 208 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 324 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 344 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 146 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 129 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 200 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 409 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 345 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 151 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 272 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 194 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 297 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 313 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 223 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 279 B

View file

@ -0,0 +1,180 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>Headers</title>
<meta name="description" content="Providing top-level navigation and inputs for the active view">
<!--
- This <style> and <link> is only used for the example preview,
- it isn't needed for the real use case.
-->
<link rel="stylesheet" href="../headers.css">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 10px;
background-color: #fff;
}
body {
background: none;
}
h2.bb-docs {
font-size: 1.8rem;
font-weight: 300;
color: #666;
margin: -0.1rem 0 0;
background-color: #f5f5f5;
padding: 0.4rem;
padding-inline-start: 3rem;
border: solid 0.1rem #e8e8e8;
margin: 3rem 0 1rem;
}
section[role="region"] {
margin-bottom: 1.5rem;
position: relative;
}
</style>
<script>
window.onload = function() {
document.getElementById('dir').checked = false;
};
</script>
</head>
<body role="application">
<p dir="ltr">
<label>
<input type="checkbox" id="dir"
onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
RTL mode
</label>
</p>
<section role="region">
<header>
<a href="#"><span class="icon icon-close">close</span></a>
<menu type="toolbar">
<button>done</button>
</menu>
<h1>Email</h1>
</header>
</section>
<section role="region">
<header>
<a href="#"></a>
<menu type="toolbar">
<button><span class="icon icon-send">send</span></button>
</menu>
<h1>Send message to X</h1>
</header>
</section>
<section role="region">
<header>
<a href="#"><span class="icon icon-back">back</span></a>
<menu type="toolbar">
<button><span class="icon icon-edit">edit</span></button>
<button><span class="icon icon-add">add</span></button>
</menu>
<h1>Email</h1>
</header>
<header>
<h2>Subheader text</h2>
</header>
</section>
<section role="region">
<header>
<button><span class="icon icon-menu">menu</span></button>
<menu type="toolbar">
<button><span class="icon icon-edit">edit</span></button>
<button><span class="icon icon-add">add</span></button>
</menu>
<h1>Inbox <em>(2)</em></h1>
</header>
</section>
<h2 class="bb-docs">Skin: Dark</h2>
<section role="region" class="skin-dark">
<header>
<a href="#"><span class="icon icon-close">close</span></a>
<menu type="toolbar">
<button>done</button>
</menu>
<h1>Music</h1>
</header>
</section>
<section role="region" class="skin-dark">
<header>
<a href="#"><span class="icon icon-back">back</span></a>
<menu type="toolbar">
<button><span class="icon icon-edit">edit</span></button>
<button><span class="icon icon-add">add</span></button>
</menu>
<h1>Music</h1>
</header>
<header>
<h2>Subheader text</h2>
</header>
</section>
<h2 class="bb-docs">Skin: Organic</h2>
<section role="region" class="skin-organic">
<header>
<a href="#"><span class="icon icon-close">close</span></a>
<menu type="toolbar">
<button>done</button>
</menu>
<h1>Settings</h1>
</header>
</section>
<div class="skin-organic">
<section role="region">
<header>
<a href="#"><span class="icon icon-back">back</span></a>
<menu type="toolbar">
<button><span class="icon icon-edit">edit</span></button>
<button><span class="icon icon-add">add</span></button>
</menu>
<h1>Settings</h1>
</header>
<header>
<h2>Subheader text</h2>
</header>
</section>
</div>
<h2 class="bb-docs">Skin: Comms</h2>
<div class="skin-comms">
<section role="region">
<header>
<a href="#"><span class="icon icon-close">close</span></a>
<menu type="toolbar">
<button>done</button>
</menu>
<h1>Contacts</h1>
</header>
</section>
<section role="region">
<header>
<a href="#"><span class="icon icon-back">back</span></a>
<menu type="toolbar">
<button><span class="icon icon-edit">edit</span></button>
<button><span class="icon icon-add">add</span></button>
</menu>
<h1>Contacts</h1>
</header>
<header>
<h2>Subheader text</h2>
</header>
</section>
</div>
</body>
</html>

View file

@ -0,0 +1,22 @@
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 10px;
font-family: sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
td {
font-size: 18px;
}
select {
font-size: 18px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB