/** * Gallery 3 commonly reused screen styles * * Sheet organization: * 1) Text * 2) Dimension and scale * 3) States and interactions * 4) Positioning and order * 5) Containers/widgets */ /** ******************************************************************* * 1) Text **********************************************************************/ .g-txt-small { font-size: .8em; } .g-txt-big { font-size: 1.2em; } .g-txt-right { text-align: right; } /** ******************************************************************* * 2) Dimension and scale **********************************************************************/ .g-narrow { } /** ******************************************************************* * 3) States and interactions **********************************************************************/ .g-active, .g-enabled, .g-available, .g-editable, .g-selected, .g-highlight { font-weight: bold; } .g-inactive, .g-disabled, .g-unavailable, .g-uneditable, .g-locked, .g-unselected, .g-understate { color: #ccc; font-weight: normal; } .g-error, .g-info, .g-success, .g-warning { background-position: .4em 50%; background-repeat: no-repeat; padding: .4em .5em .4em 30px; } .g-error, .g-denied { background-color: #f6cbca; color: #f00; background-image: url('images/ico-error.png'); } .g-info { background-color: #e8e8e8; background-image: url('images/ico-info.png'); } .g-success, .g-allowed { background-color: #d9efc2; background-image: url('images/ico-success.png'); } .g-warning { background-color: #fcf9ce; background-image: url('images/ico-warning.png'); } form .g-error { background-color: #fff; } .g-open { } .g-closed { } .g-installed { } .g-default { } .g-draggable, .ui-draggable { cursor: move; } .g-target { } /** ******************************************************************* * 4) Positioning and order **********************************************************************/ .g-left { float: left; margin: 1em 1em 1em 0; } .g-right { float: right; margin: 1em 0 1em 1em; } .g-first { } .g-last { } .g-even { background-color: #fff; } .g-odd { background-color: #eee; } /** ******************************************************************* * 5) Containers/widgets **********************************************************************/ #g-dialog { text-align: left; } #g-dialog .g-narrow { margin: 0 auto; width: 270px; } #g-dialog fieldset { border: none; } #g-dialog legend { display: none; } #g-dialog form input[type="text"], #g-dialog form input[type="password"] { width: 100%; } #g-dialog p { margin: 0; } #g-dialog li { padding-left: 0; } #g-dialog .g-cancel { clear: none; float: left; margin: .3em 1em; } .g-button { display: inline-block; margin: 0 4px 0 0; padding: .2em .4em; } .g-button, .g-button:hover, .g-button:active { cursor: pointer !important; outline: 0; text-decoration: none; -moz-outline-style: none; } .g-progressbar { } .g-block { } .g-message-box { width: 100%; } .g-message { border: 1px solid #ccc; margin-bottom: .4em; } /* Breadcrumbs ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .g-breadcrumbs { padding: 0 20px; } .g-breadcrumbs li { background: transparent url('images/ico-separator.gif') no-repeat scroll left center; float: left; padding: 10px 6px 10px 16px !important; } .g-breadcrumbs li.root { background: transparent; } .g-breadcrumbs li a, .g-breadcrumbs li span { display: block; } .g-breadcrumbs li.active, .g-breadcrumbs li.active span { font-weight: bold; } #g-dialog ul.g-breadcrumbs { clear: both; margin-left: 0; padding-left: 0; } #g-dialog .g-breadcrumbs li { font-size: .9em; } /* Pagination ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .g-pager { clear: both; margin: 0; padding: 5px 0 !important; width: 100%; } .g-pager li { float: left; margin: 0; width: 30%; } .g-pager .g-info { text-align: center; width: 40%; } .g-list-horizontal { }