.owindow
Description »This class encompasses all pop up windows, including when a username is accessed. Containers »
|
|
Details »
Whenever a user's name is clicked on, or whenever an error occurs, a pop up block comes up describing the user's info or displaying the error information. These special blocks use the .owindow class to display this information.
By default, the .owindow class and its descendents use a standard white box to display content, but manipulation of this class can lead to snazzy pop ups meant to match the site's theme.
Examples »
When you click on michal frackowiak, you will see an instance of the .owindow class, where the user's information pops up in an overlapping block.
The design on it was made with the following code:
.owindow { -moz-border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0 0 10px; -webkist-border-radius: 10px; -webkit-box-shadow: 0 0 10px; background: none repeat scroll 0 0 #EEEEEE; border: medium none; color: #000000; position: absolute; text-align: left; text-shadow: none; width: 50em; } .owindow .title { background: url("http://rhombusproductions.wdfiles.com/local--files/themes%3Ared-black/top-bar.png") repeat scroll 0 0 transparent; color: #FFFFFF; cursor: move; font-weight: bold; height: 20px; padding: 0.5em 1em; text-shadow: -1px -1px 0 #000000; -moz-border-radius: 2px 2px 2px 2px; }
Try It on the CSS Zone Sandbox!
Base CSS »
.owindow { background-color: white; border: 2px solid #BBBBBB; position: absolute; text-align: left; width: 50em; } .owindow .close { cursor: pointer; float: right; font-size: 85%; padding: 0.2em 0.4em; } .owindow .title { background-color: #F5F5F5; cursor: move; font-size: 120%; font-weight: bold; height: 1%; padding: 0.2em 1em; } .owindow .content { padding: 0.5em 1em; } .owindow .button-bar { margin: 0.5em; padding: 0.2em 1em; text-align: right; } .owindow .button-bar input { padding: 0 0.5em; } .owindow .button-bar a { background-color: #F4F4F4; border: 1px solid #AAAAAA; margin: 0.2em; padding: 0.1em 1em; text-decoration: none; } .owindow .button-bar a:hover { background-color: #DDDDDD; } .owindow.owait { width: auto; } .owindow.owait .content { background-image: url("../images/progress/progressbar.gif"); background-position: center bottom; background-repeat: no-repeat; margin: 10px; padding: 0 50px 20px; } .owindow.osuccess { width: auto; } .owindow.osuccess .content { margin: 10px; padding: 0 50px; }
Not defined in Base CSS.