My wave.ui
Because of glitchiness I have noticed in the gadget API's wave.ui I have decided to create an alternative. I have created a single stylesheet that you can use in your gadgets (or on other web pages) to create wave-like UIs. It includes some classes to create wave-like panels and dialogs.
To use it, just use this stylesheet: zmyaro.com/wave/ui.css.
| Class | Description |
|---|---|
| wave-panel | A panel, like the panels in the Google Wave client. It is the shell that gets filled with content and optionally a title bar. |
| wave-dialog | Dialogs are hidden by default. They should be used like pop-ups. They are similar to panels in that they are shells to be filled with other elements. |
| wave-titlebar | A wave title bar. This should be the first element in the panel or dialog. Note that you do not have to put a title bar in any given panel or dialog. |
| wave-section | A section contains the actual content of the panel or dialog. |
| wave-section-blue | A section-blue is just like a section, but with a blue background like a the bottom of the contacts, search, or wave panel in the Google Wave client. |
| wave-toolbar | A wave-toolbar can be used like a wave-section. If you want, you can also give it a width (and maybe border-radius) and use it within a section. |
| wave-small-toolbar | A wave-small-toolbar is a smaller toolbar (who would have guessed?) that should be used inline. It fades out slightly when not hovered over. It looks nice if you add float:right;. |
| wave-searchbox | A wave-searchbox should be an <input> with type="text". It automatically styles the text box to look like a Google Wave search box. You can add padding-right:25px; and a background-image with background-position:right center; to make room for the magnifying glass icon (icon not included). |
| <button> | Buttons are not a class. Any <button> element will be styled like a wave button. <button> elements inside wave-toolbars will be styled as toolbar buttons. |
See this all in action on this demo page.
You can also check out a copy of the Google Wave client I made with my wave.ui CSS for Ada Wells.
The CSS code is licensed under the Apache License, Version 2. The HTML examples are only to demonstrate uses of the CSS and are not intended to be copied line-for-line.