mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-09 21:00:42 +02:00
| .. | ||
| common.css | ||
| conversation.css | ||
| panel.css | ||
| readme.html | ||
<!DOCTYPE html>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<!-- This file is intended to help frontend developers to easily identify what
are the available styles for the Loop UI components. -->
<html>
<head>
<meta charset="utf-8">
<title>Loop UI shared CSS information/demo</title>
<link type="text/css" rel="stylesheet" href="common.css">
<link type="text/css" rel="stylesheet" href="panel.css">
<link type="text/css" rel="stylesheet" href="conversation.css">
<style>
body {
width: 600px;
margin: 1em auto;
background: #fff;
font-family: Helvetica, Arial, sans;
}
</style>
</head>
<body>
<h1>Loop UI toolkit</h1>
<h2>Logo icons</h2>
<p>
<img src="../img/icon_32.png"> 32x32 transparent PNG
<img src="../img/icon_64.png"> 64x64 transparent PNG
</p>
<p><em><strong>Note:</strong> these are temporary.</em></p>
<h2>Share panel</h2>
<h3>Simple</h3>
<div class="share">
<form class="description">
<p>This is a simple message.</p>
</form>
<div class="action">
<p><input type="url" value="http://loop.im/plop75"></p>
<p>Your name will appear as <a href="">Unnamed</a>.</p>
</div>
</div>
<h3>Featuring options</h3>
<div class="share">
<form class="description">
<p class="field">
<label>Share this link with a friend to
<select>
<option>browse together</option>
<option selected="selected">video chat</option>
<option>audio chat</option>
<option>text chat</option>
</select>
</label>
</p>
<p class="field">
<label>
Use webcam <select><option>Foo</option></select>
</label>
</p>
<p class="field">
<label>Use whatever
<select><option>Long foo is long indeed</option></select>
</label>
</p>
<p class="preview cf">
Preview <video></video>
</p>
</form>
<div class="action">
<p><input type="url" value="http://loop.im/plop75"></p>
<p>Your name will appear as <a href="">Unnamed</a>.</p>
</div>
</div>
<h2>Conversation window</h2>
<p><em>The conversation component adapts automatically to its container to
occupy all the available space.</em></p>
<h3>Large</h3>
<div class="conversation">
<div class="media nested">
<video class="remote"></video>
<video class="local"></video>
</div>
</div>
<h3>Large with controls</h3>
<div class="conversation">
<nav class="controls">
<button class="btn">Start</button>
<button class="btn">Stop</button>
</nav>
<div class="media nested">
<video class="remote"></video>
<video class="local"></video>
</div>
</div>
<h3>Small (think chat window)</h3>
<div style="width: 204px">
<div class="conversation">
<div class="media nested">
<video class="remote"></video>
<video class="local"></video>
</div>
</div>
</div>
<h3>Side by side</h3>
<div class="conversation">
<div class="media side-by-side">
<video class="remote"></video>
<video class="local"></video>
</div>
</div>
<h2>Buttons</h2>
<h3>Using <code><a></code></h3>
<p>
<a href="" class="btn">default</a>
<a href="" class="btn btn-info">info</a>
<a href="" class="btn btn-success">success</a>
<a href="" class="btn btn-warning">warning</a>
<a href="" class="btn btn-error">error</a>
</p>
<h3>Inline</h3>
<p>Click <a href="" class="btn btn-info">here</a>.</p>
<h3>Using <code><button></code></h3>
<p>
<button class="btn">default</button>
<button class="btn btn-info">info</button>
<button class="btn btn-success">success</button>
<button class="btn btn-warning">warning</button>
<button class="btn btn-error">error</button>
</p>
<h2>Alerts</h2>
<div class="alert alert-error">
<button class="close"></button>
<p class="message">Oops! Something went really wrong.</p>
</div>
<div class="alert alert-warning">
<button class="close"></button>
<p class="message">Oops! This is a warning.</p>
</div>
<h2>Incoming call</h2>
<div class="incoming-call">
<h2>Incoming call</h2>
<p>
<button class="btn btn-success btn-accept">Accept</button>
<button class="btn btn-error btn-decline">Decline</button>
</p>
</div>
<script>
window.onload = function() {
[].forEach.call(document.querySelectorAll("video"), function(video) {
video.setAttribute("src", "http://v2v.cc/~j/theora_testsuite/320x240.ogg");
});
};
</script>
</body>
</html>