Files
gallery3/lib/gallery.common.css
Bharat Mediratta 9b4d9d1d46 Fix two issues with the "loading" overlay:
1) gallery.common.js was using the wrong class name
2) we need to mark the CSS as !important because it conflicts with
   other background images.  Note that this will replace the existing
   background which may not be desireable.
2010-06-20 16:51:06 -07:00

871 lines
15 KiB
CSS

/**
* Gallery 3 commonly re-used screen styles
*
* Sheet organization:
*
* 1) Text
* 2) Forms
* 3) Dimension and scale
* 4) States and interactions
* 5) Positioning and order
* 6) Containers/widgets
* 7) Right to left language styles
*
* @todo Update .g-message-block, don't force it to 100%, bad things happen is themes when you do.
*/
/** *******************************************************************
* 1) Text
**********************************************************************/
.g-text-small {
font-size: .8em;
}
.g-text-big {
font-size: 1.2em;
}
.g-text-right {
text-align: right;
}
/** *******************************************************************
* 2) Forms
**********************************************************************/
form {
margin: 0;
}
fieldset {
border: 1px solid #ccc;
padding: 0 1em .8em 1em;
}
#g-banner fieldset,
#g-sidebar fieldset {
border: none;
padding: 0;
}
legend {
font-weight: bold;
margin: 0;
padding: 0 .2em;
}
#g-banner legend,
#g-sidebar legend,
input[type="hidden"] {
display: none;
}
input.textbox,
input[type="text"],
input[type="password"],
textarea {
border: 1px solid #e8e8e8;
border-top-color: #ccc;
border-left-color: #ccc;
clear: both;
color: #333;
width: 50%;
}
textarea {
height: 12em;
width: 97%;
}
input:focus,
input.textbox:focus,
input[type=text]:focus,
textarea:focus,
option:focus {
background-color: #ffc;
color: #000;
}
input.checkbox,
input[type=checkbox],
input.radio,
input[type=radio] {
float: left;
margin-right: .4em;
}
/* Form layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
form li {
margin: 0;
padding: 0 0 .2em 0;
}
form ul {
margin-top: 0;
}
form ul ul {
clear: both;
}
form ul ul li {
float: left;
}
input,
select,
textarea {
display: block;
clear: both;
padding: .2em;
}
input[type="submit"],
input[type="reset"] {
display: inline;
clear: none;
float: left;
}
/* Forms in dialogs and panels ~~~~~~~~~ */
#g-dialog ul li {
padding-bottom: .8em;
}
#g-dialog fieldset,
#g-panel fieldset {
border: none;
padding: 0;
}
#g-panel legend {
display: none;
}
input[readonly] {
background-color: #F4F4FC;
}
#g-dialog input.textbox,
#g-dialog input[type=text],
#g-dialog input[type=password],
#g-dialog textarea {
width: 97%;
}
/* Short forms ~~~~~~~~~~~~~~~~~~~~~~~ */
.g-short-form legend,
.g-short-form label {
display: none;
}
.g-short-form fieldset {
border: none;
padding: 0;
}
.g-short-form li {
float: left;
margin: 0 !important;
padding: .4em 0;
}
.g-short-form .textbox,
.g-short-form input[type=text] {
color: #666;
padding: .3em .6em;
width: 100%;
}
.g-short-form .textbox.g-error {
border: 1px solid #f00;
color: #f00;
padding-left: 24px;
}
.g-short-form .g-cancel {
display: block;
margin: .3em .8em;
}
#g-sidebar .g-short-form li {
padding-left: 0;
padding-right: 0;
}
/** *******************************************************************
* 3) Dimension and scale
**********************************************************************/
.g-one-quarter {
width: 25%;
}
.g-one-third {
width: 33%;
}
.g-one-half {
width: 50%;
}
.g-two-thirds {
width: 66%;
}
.g-three-quarters {
width: 75%;
}
.g-whole {
width: 100%;
}
/** *******************************************************************
* 4) States and interactions
**********************************************************************/
.g-active,
.g-enabled,
.g-available,
.g-selected,
.g-highlight {
font-weight: bold;
}
.g-inactive,
.g-disabled,
.g-unavailable,
.g-uneditable,
.g-locked,
.g-deselected,
.g-understate {
color: #ccc;
font-weight: normal;
}
.g-editable {
padding: .2em .3em;
}
.g-editable:hover {
background-color: #ffc;
cursor: text;
}
.g-error,
.g-info,
.g-success,
.g-warning {
padding-left: 30px;
}
form li.g-error,
form li.g-info,
form li.g-success,
form li.g-warning {
background-image: none;
padding: .3em .8em .3em 0;
}
.g-short-form li.g-error {
padding: .3em 0;
}
form.g-error input[type="text"],
li.g-error input[type="text"],
form.g-error input[type="password"],
li.g-error input[type="password"],
form.g-error input[type="checkbox"],
li.g-error input[type="checkbox"],
form.g-error input[type="radio"],
li.g-error input[type="radio"],
form.g-error textarea,
li.g-error textarea,
form.g-error select,
li.g-error select {
border: 2px solid #f00;
margin-bottom: .2em;
}
.g-error,
.g-denied,
tr.g-error td.g-error,
#g-add-photos-status .g-error {
background: #f6cbca url('images/ico-error.png') no-repeat .4em 50%;
color: #f00;
}
.g-info {
background: #e8e8e8 url('images/ico-info.png') no-repeat .4em 50%;
}
.g-success,
.g-allowed,
#g-add-photos-status .g-success {
background: #d9efc2 url('images/ico-success.png') no-repeat .4em 50%;
}
tr.g-success {
background-image: none;
}
tr.g-success td.g-success {
background-image: url('images/ico-success.png');
}
.g-warning,
tr.g-warning td.g-warning {
background: #fcf9ce url('images/ico-warning.png') no-repeat .4em 50%;
}
form .g-error {
background-color: #fff;
padding-left: 20px;
}
.g-open {
}
.g-closed {
}
.g-installed {
background-color: #eeeeee;
}
.g-default {
background-color: #c5dbec;
font-weight: bold;
}
.g-draggable {
cursor: move;
}
.g-draggable:hover {
border: 1px dashed #000;
}
.ui-sortable .g-target,
.ui-state-highlight {
background-color: #fcf9ce;
border: 2px dotted #999;
height: 2em;
margin: 1em 0;
}
/* Ajax loading indicator ~~~~~~~~~~~~~~~~ */
.g-loading-large,
.g-dialog-loading-large {
background: #e8e8e8 url('images/loading-large.gif') no-repeat center center !important;
}
.g-loading-small {
background: #e8e8e8 url('images/loading-small.gif') no-repeat center center !important;
}
/** *******************************************************************
* 5) Positioning and order
**********************************************************************/
.g-left {
clear: none;
float: left;
}
.g-right {
clear: none;
float: right;
}
.g-first {
}
.g-last {
}
.g-even {
background-color: #fff;
}
.g-odd {
background-color: #eee;
}
/** *******************************************************************
* 6) Containers/widgets
**********************************************************************/
/* Generic block container ~~~~~~~~~~~~~~~ */
.g-block {
clear: both;
margin-bottom: 2.5em;
}
.g-block-content {
}
/* Superfish menu overrides ~~~~~~~~~~~~~~ */
.sf-menu ul {
width: 12em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 12em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 12em;
}
/* jQuery UI Dialog ~~~~~~~~~~~~~~~~~~~~~~ */
.ui-widget-overlay {
background: #000;
opacity: .7;
}
/* Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.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;
}
button {
padding: 2px 4px 2px 4px;
}
/* jQuery UI ThemeRoller buttons ~~~~~~~~~ */
.g-buttonset {
padding-left: 1px;
}
.g-buttonset li {
float: left;
}
.g-buttonset .g-button {
margin: 0;
}
.ui-icon-left .ui-icon {
float: left;
margin-right: .2em;
}
.ui-icon-right .ui-icon {
float: right;
margin-left: .2em;
}
/* Rotate icon, ThemeRoller only provides one of these */
.ui-icon-rotate-ccw {
background-position: -192px -64px;
}
.ui-icon-rotate-cw {
background-position: -208px -64px;
}
.g-progress-bar {
height: 1em;
width: 100%;
margin-top: .5em;
display: inline-block;
}
/* Status and validation messages ~~~~ */
.g-message-block {
background-position: .4em .3em;
border: 1px solid #ccc;
padding: 0;
}
#g-action-status {
margin-bottom: 1em;
}
#g-action-status li,
p#g-action-status,
div#g-action-status {
padding: .3em .3em .3em 30px;
}
#g-site-status li {
border-bottom: 1px solid #ccc;
padding: .3em .3em .3em 30px;
}
.g-module-status {
clear: both;
margin-bottom: 1em;
}
.g-message {
background-position: 0 50%;
}
/* Breadcrumbs ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.g-breadcrumbs {
clear: both;
padding: 0 20px;
}
.g-breadcrumbs li {
background: transparent url('images/ico-separator.gif') no-repeat scroll left center;
float: left;
padding: 1em 8px 1em 18px;
}
.g-breadcrumbs .g-first {
background: none;
padding-left: 0;
}
.g-breadcrumbs li a,
.g-breadcrumbs li span {
display: block;
}
#g-dialog ul.g-breadcrumbs {
margin-left: 0;
padding-left: 0;
}
/* Pagination ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.g-paginator {
padding: .2em 0;
width: 100%;
}
.g-paginator li {
float: left;
width: 30%;
}
.g-paginator .g-info {
background: none;
padding: .2em 0;
text-align: center;
width: 40%;
}
/* Dialogs and panels ~~~~~~~~~~~~~~~~~~ */
#g-dialog {
text-align: left;
}
#g-dialog legend {
display: none;
}
#g-dialog .g-cancel {
margin: .4em 1em;
}
#g-panel {
display: none;
padding: 1em;
}
/* Inline layout ~~~~~~~~~~ */
.g-inline li {
float: left;
margin-left: 1.8em;
padding-left: 0 !important;
}
.g-inline li.g-first {
margin-left: 0;
}
/** *******************************************************************
* 7) Right to left language styles
**********************************************************************/
.rtl {
direction: rtl;
}
.rtl #g-header,
.rtl #g-content,
.rtl #g-sidebar,
.rtl #g-footer,
.rtl caption,
.rtl th,
.rtl #g-dialog,
.rtl .g-context-menu li a,
.rtl .g-message-box li,
.rtl #g-site-status li {
text-align: right;
}
.rtl .g-text-right {
text-align: left;
}
.rtl .g-error,
.rtl .g-info,
.rtl .g-success,
.rtl .g-warning,
.rtl #g-add-photos-status .g-success,
.rtl #g-add-photos-status .g-error {
background-position: center right;
padding-right: 30px !important;
}
.rtl form li.g-error,
.rtl form li.g-info,
.rtl form li.g-success,
.rtl form li.g-warning {
padding-right: 0 !important;
}
.rtl .g-left,
.rtl .g-inline li,
.rtl #g-content #g-album-grid .g-item,
.rtl .sf-menu li,
.rtl .g-breadcrumbs li,
.rtl .g-paginator li,
.rtl .g-buttonset li,
.rtl .ui-icon-left .ui-icon,
.rtl .g-short-form li,
.rtl form ul ul li,
.rtl input[type="submit"],
.rtl input[type="reset"],
.rtl input.checkbox,
.rtl input[type=checkbox],
.rtl input.radio,
.rtl input[type=radio] {
float: right;
}
.rtl .g-right,
.rtl .ui-icon-right .ui-icon {
float: left;
}
.rtl .g-inline li {
margin-right: 1em;
}
.rtl .g-inline li.g-first {
margin-right: 0;
}
.rtl .g-breadcrumbs li {
background: transparent url('images/ico-separator-rtl.gif') no-repeat scroll right center;
padding: 1em 18px 1em 8px;
}
.rtl .g-breadcrumbs .g-first {
background: none;
padding-right: 0;
}
.rtl input.checkbox {
margin-left: .4em;
}
.rtl #g-add-comment {
right: inherit;
left: 0;
}
.rtl .ui-icon-left .ui-icon {
margin-left: .2em;
}
.rtl .ui-icon-right .ui-icon {
margin-right: .2em;
}
/* RTL Corner radius ~~~~~~~~~~~~~~~~~~~~~~ */
.rtl .g-buttonset .ui-corner-tl {
-moz-border-radius-topleft: 0;
-webkit-border-top-left-radius: 0;
border-top-left-radius: 0;
-moz-border-radius-topright: 5px !important;
-webkit-border-top-right-radius: 5px !important;
border-top-right-radius: 5px !important;
}
.rtl .g-buttonset .ui-corner-tr {
-moz-border-radius-topright: 0;
-webkit-border-top-right-radius: 0;
border-top-right-radius: 0;
-moz-border-radius-topleft: 5px !important;
-webkit-border-top-left-radius: 5px !important;
border-top-left-radius: 5px !important;
}
.rtl .g-buttonset .ui-corner-bl {
-moz-border-radius-bottomleft: 0;
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
-moz-border-radius-bottomright: 5px !important;
-webkit-border-bottom-right-radius: 5px !important;
border-bottom-right-radius: 5px !important;
}
.rtl .g-buttonset .ui-corner-br {
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
-moz-border-radius-bottomleft: 5px !important;
-webkit-border-bottom-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
}
.rtl .g-buttonset .ui-corner-right,
.rtl .ui-progressbar .ui-corner-right {
-moz-border-radius-topright: 0;
-webkit-border-top-right-radius: 0;
border-top-right-radius: 0;
-moz-border-radius-topleft: 5px !important;
-webkit-border-top-left-radius: 5px !important;
border-top-left-radius: 5px !important;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
-moz-border-radius-bottomleft: 5px !important;
-webkit-border-bottom-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
}
.rtl .g-buttonset .ui-corner-left,
.rtl .ui-progressbar .ui-corner-left {
-moz-border-radius-topleft: 0;
-webkit-border-top-left-radius: 0;
border-top-left-radius: 0;
-moz-border-radius-topright: 5px !important;
-webkit-border-top-right-radius: 5px !important;
border-top-right-radius: 5px !important;
-moz-border-radius-bottomleft: 0;
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
-moz-border-radius-bottomright: 5px !important;
-webkit-border-bottom-right-radius: 5px !important;
border-bottom-right-radius: 5px !important;
}
/* RTL Superfish ~~~~~~~~~~~~~~~~~~~~~~~~~ */
.rtl .sf-menu a {
border-left: none;
border-right:1px solid #fff;
}
.rtl .sf-menu a.sf-with-ul {
padding-left: 2.25em;
padding-right: 1em;
}
.rtl .sf-sub-indicator {
left: .75em !important;
right: auto;
background: url('superfish/images/arrows-ffffff-rtl.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
.rtl a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: .8em;
background-position: -10px -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
.rtl a:focus > .sf-sub-indicator,
.rtl a:hover > .sf-sub-indicator,
.rtl a:active > .sf-sub-indicator,
.rtl li:hover > a > .sf-sub-indicator,
.rtl li.sfHover > a > .sf-sub-indicator {
background-position: 0 -100px; /* arrow hovers for modern browsers*/
}
/* point right for anchors in subs */
.rtl .sf-menu ul .sf-sub-indicator { background-position: 0 0; }
.rtl .sf-menu ul a > .sf-sub-indicator { background-position: -10px 0; }
/* apply hovers to modern browsers */
.rtl .sf-menu ul a:focus > .sf-sub-indicator,
.rtl .sf-menu ul a:hover > .sf-sub-indicator,
.rtl .sf-menu ul a:active > .sf-sub-indicator,
.rtl .sf-menu ul li:hover > a > .sf-sub-indicator,
.rtl .sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: 0 0; /* arrow hovers for modern browsers*/
}
.rtl .sf-menu li:hover ul,
.rtl .sf-menu li.sfHover ul {
right: 0;
}
.rtl ul.sf-menu li li:hover ul,
.rtl ul.sf-menu li li.sfHover ul {
right: 12em; /* match ul width */
}
.rtl ul.sf-menu li li li:hover ul,
.rtl ul.sf-menu li li li.sfHover ul {
right: 12em; /* match ul width */
}
/*** shadows for all but IE6 ***/
.rtl .sf-shadow ul {
background: url('superfish/images/shadow.png') no-repeat bottom left;
padding: 0 0 9px 8px;
-moz-border-radius-bottomright: 17px;
-moz-border-radius-topleft: 17px;
-webkit-border-top-left-radius: 17px;
-webkit-border-bottom-right-radius: 17px;
}
/* RTL paginator ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.rtl .g-paginator .g-info {
width: 35%;
}
.rtl .g-paginator .g-text-right {
margin-left: 0;
}
.rtl .g-paginator .ui-icon-seek-end {
background-position: -80px -160px;
}
.rtl .g-paginator .ui-icon-seek-next {
background-position: -48px -160px;
}
.rtl .g-paginator .ui-icon-seek-prev {
background-position: -32px -160px;
}
.rtl .g-paginator .ui-icon-seek-first {
background-position: -64px -160px;
}