Files
gallery3/themes/default/css/screen.css
T
Bharat Mediratta a63502b3c6 Refactor the way that dialogs work:
1) Get rid of the resizing behavior; create the dialog in the right
   place and then show it.

2) Grab the fieldset legend and put it into the title of the dialog,
   so that we don't have to use title="" params in anchors.

3) Stop using fixed buttons and let the form define its own buttons.

4) Stop suppressing all form buttons.
2009-01-06 08:33:39 +00:00

929 lines
16 KiB
CSS

/**
* Gallery 3 Default Theme Screen Styles
*
* @requires YUI reset, font, grids CSS
*
* Sheet organization:
* 1) Basic HTML elements
* 2) Reusable classes
* 3) Reusable content blocks
* 4) Page layout containers
* 5) Content blocks in specific layout containers
* 6) Navigation and menus
* 7) Browser hacks
* 8) jQuery and jQuery UI
*
* @todo Default user icon (user w/ camera)
* @todo Apply :hover bg image to #gViewMenu (will clear fix correct this?)
* @todo Refactor form layout styles to reserve room for validation messages in default state. This
* will eliminate layout shifts when validation messages are displayed.
*/
/** *******************************************************************
* 1) Basic HTML elements
**********************************************************************/
body, html {
background-color: #ccc;
font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
p {
margin-bottom: 1em;
}
strong {
font-weight: bold;
}
em {
font-style: oblique;
}
/* Headings ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
h1, h2, h3, h4, h5 {
font-weight: bold;
}
h1 {
font-size: 1.7em;
}
h2 {
font-size: 1.4em;
}
#gSidebar .gBlock h2 {
font-size: 1.2em;
}
h3 {
font-size: 1.2em;
}
/* Links ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
a {
color: #6b8cb7;
text-decoration: none;
-moz-outline-style: none;
}
a:hover {
color: #f30;
text-decoration: underline;
}
/* Tables ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
table {
width: 100%;
}
#gContent table {
margin: 1em 0;
}
caption,
th {
text-align: left;
}
th {
font-weight: bold;
}
td {
}
th,
td {
border: 1px solid #ccc;
padding: .3em;
vertical-align: top;
}
/* Forms ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
fieldset {
border: 1px solid #ccc;
}
#gHeader fieldset,
#gSidebar fieldset {
border: none;
}
legend {
font-weight: bold;
margin-left: 1em;
}
#gHeader legend,
#gSidebar legend {
display: none;
}
label {
cursor: help;
}
input[type="text"],
input[type="password"],
select {
width: 50%;
}
input[type="text"],
input[type="password"],
textarea,
.gValidationRule {
}
input[type="button"] {
}
input[type="checkbox"] {
}
input[type="file"] {
}
input[type="hidden"] {
display: none;
}
input[type="password"] {
}
input[type="radio"] {
}
input[type="reset"] {
}
input[type="submit"] {
}
#gHeader input[type="text"],
#gSidebar input[type="text"] {
color: #999;
}
option {
}
optgroup {
}
select {
}
textarea {
width: 100%;
height: 12em;
}
button {
}
input:focus,
textarea:focus,
option:focus {
background-color: #ffc;
color: #000;
}
/* Form layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
form li {
margin: 0 !important;
padding: .3em 1.5em .3em 1em;
}
form ul ul {
clear: both;
}
form ul ul li {
float: left;
}
input,
select,
textarea {
display: block;
clear: both;
padding: .2em;
}
/* Form validation ~~~~~~~~~~~~~~~~~~~~~~~ */
.gValidationRule {
font-size: 80%;
margin-top: .5em;
}
form.gError input[type="text"],
li.gError input[type="text"],
form.gError input[type="password"],
li.gError input[type="password"],
form.gError input[type="checkbox"],
li.gError input[type="checkbox"],
form.gError input[type="radio"],
li.gError input[type="radio"],
form.gError textarea,
li.gError textarea,
form.gError select,
li.gError select {
border: 2px solid red;
}
/** *******************************************************************
* 2) Reusable generic classes
*********************************************************************/
/* Not used, yet */
/** *******************************************************************
* 3) Reusable content blocks
*********************************************************************/
.gBlock {
clear: both;
margin-bottom: 2.5em;
}
.gBlock h2 {
background-color: #e8e8e8;
padding: .3em .8em;
}
.gBlockContent {
margin-top: 1em;
}
/* Status messages ~~~~~~~~~~~~~~~~~~~~~~~ */
#gSiteStatus li,
#gMessage li {
border: 1px solid #ccc;
margin-bottom: .4em;
}
.gError,
.gInfo,
.gSuccess,
.gWarning {
background-position: .4em 50%;
background-repeat: no-repeat;
padding: .4em .5em .4em 30px;
}
#gSiteStatus .gError,
#gMessage .gError {
background-color: #fcc;
}
.gError {
background-image: url('../images/ico-error.png');
}
#gSiteStatus .gInfo,
#gMessage .gInfo {
background-color: #e8e8e8;
}
.gInfo {
background-image: url('../images/ico-info.png');
}
#gSiteStatus .gSuccess,
#gMessage .gSuccess {
background-color: #cfc;
}
.gSuccess {
background-image: url('../images/ico-success.png');
}
#gSiteStatus .gWarning,
#gMessage .gWarning {
background-color: #ff9;
}
.gWarning {
background-image: url('../images/ico-warning.png');
}
/* Inline layout (forms, lists) ~~~~~~~~~~ */
#gHeader #gSearchForm li,
#gSidebar #gAddTagForm li {
float: left;
padding: .4em .5em;
}
#gHeader #gSearchForm label,
#gSidebar #gAddTagForm label {
display: none;
}
#gHeader #gSearchForm input[type="text"],
#gSidebar #gAddTagForm input[type="text"] {
width: 10em;
}
/*** ******************************************************************
* 4) Page layout containers
*********************************************************************/
/* View container ~~~~~~~~~~~~~~~~~~~~~~~~ */
.gView {
background-color: #fff;
border: 1px solid #ccc;
border-bottom: none;
}
/* Layout containers ~~~~~~~~~~~~~~~~~~~~~ */
#gHeader {
border-bottom: 1px solid #fff;
font-size: .8em;
margin-bottom: 20px;
}
#gContent {
font-size: 1.2em;
padding-left: 20px;
width: 696px;
}
#gSidebar {
background-color: #fff;
font-size: .9em;
padding: 0 20px;
width: 220px;
}
#gFooter {
border-top: 1px solid #ccc;
font-size: .8em;
margin-top: 20px;
padding: 10px 20px;
}
/** *******************************************************************
* 5) Content blocks in specific layout containers
*********************************************************************/
/* Header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#gHeader #gLogo {
margin: 5px 10px 10px 20px;
}
#gHeader #gSearchForm {
float: right;
margin-right: 20px;
}
#gContent .gBlock h2 {
background-color: transparent;
padding-left: 0;
}
#gSidebar .gBlockContent {
padding-left: 1em;
}
/* Album/Photo information ~~~~~~~~~~~~~~~ */
#gContent #gInfo {
}
#gContent #gInfo .gDescription {
}
/* Album content ~~~~~~~~~~~~~~~~~~~~~~~~~ */
#gContent #gAlbumGrid {
border-right: 1px solid #e8e8e8;
margin: 1em 0;
}
#gContent #gAlbumGrid .gItem {
border: 1px solid #e8e8e8;
border-right-color: #ccc;
border-bottom-color: #ccc;
float: left;
font-size: .7em;
height: 240px;
overflow: hidden;
padding: 14px 8px;
text-align: center;
width: 213px;
}
#gContent #gAlbumGrid .gItem h2 {
margin: 5px 0;
}
#gContent #gAlbumGrid .gAlbum {
background-color: #e8e8e8;
}
/* Individual photo content ~~~~~~~~~~~~~~ */
#gContent #gItem {
}
#gContent #gItem #gPager {
}
#gContent #gComments {
margin-top: 2em;
}
#gContent #gComments ul li {
margin: 1em 0;
}
#gContent #gComments .gAuthor {
background-color: #e8e8e8;
height: 32px;
line-height: 32px;
}
#gContent #gComments ul li div {
padding: 0 8px 8px 32px;
}
#gContent #gComments .gAvatar {
margin-right: .4em;
}
/* Footer content ~~~~~~~~~~~~~~~~~~~~~~~~ */
#gHeader #gLoginMenu li,
#gFooter #gCredits li {
display: inline;
}
#gHeader #gLoginMenu li:before,
#gFooter #gCredits li:before {
padding: 0 .6em 0 .4em;
content: "|";
}
#gHeader #gLoginMenu li.first:before,
#gFooter #gCredits li.first:before {
content: "";
}
/** *******************************************************************
* 5) Navigation and menus
*********************************************************************/
#gSiteMenu,
#gBreadcrumbs,
#gTagCloud ul {
font-size: 1.3em;
}
/* Login menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#gHeader #gLoginMenu {
float: right;
margin: 9px 20px 0 0;
}
/* Site Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#gSiteMenu {
border-bottom: 1px solid #ccc;
padding: 0 20px 0;
}
#gSiteMenu ul {
margin-bottom: 0;
}
#gViewMenu #gAlbumLink,
#gViewMenu #gHybridLink,
#gViewMenu #gSlideshowLink,
#gViewMenu #gFullsizeLink,
#gViewMenu #gCommentsLink {
background-repeat: no-repeat;
background-position: 10px center;
display: block;
font-size: .9em;
height: 22px;
overflow: hidden;
text-indent: 1000px;
white-space: nowrap;
width: 32px;
}
#gViewMenu #gAlbumLink {
background-image: url('../images/ico-view-album.png');
}
#gViewMenu #gHybridLink {
background-image: url('../images/ico-view-hybrid.png');
}
#gViewMenu #gSlideshowLink {
background-image: url('../images/ico-view-slideshow.png');
}
#gViewMenu #gFullsizeLink {
background-image: url('../images/ico-view-fullsize.png');
}
#gViewMenu #gCommentsLink {
background-image: url('../images/ico-view-comments.png');
}
/* Breadcrumbs ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#gBreadcrumbs {
padding-left: 20px;
}
#gBreadcrumbs li {
background: transparent url('../images/icon_breadcrumb_separator.gif') no-repeat scroll left center;
float: left;
padding: 10px 6px 10px 16px;
}
#gBreadcrumbs li.root {
background: transparent;
}
#gBreadcrumbs li a,
#gBreadcrumbs li span {
display: block;
}
#gBreadcrumbs li.active span {
font-weight: bold;
}
/* Tags and cloud ~~~~~~~~~~~~~~~~~~~~~~~~ */
#gTagCloud ul {
text-align: justify;
}
#gTagCloud ul li {
display: inline;
line-height: 1.5em;
text-align: justify;
}
#gTagCloud ul li a {
text-decoration: none;
}
#gTagCloud ul li span {
display: none;
}
#gTagCloud ul li.size1 a {
color: #9cf;
font-size: 80%;
font-weight: 100;
}
#gTagCloud ul li.size2 a {
color: #69f;
font-size: 90%;
font-weight: 300;
}
#gTagCloud ul li.size3 a {
color: #69c;
font-size: 100%;
font-weight: 500;
}
#gTagCloud ul li.size4 a {
color: #369;
font-size: 110%;
font-weight: 700;
}
#gTagCloud ul li.size5 a {
color: #0e2b52;
font-size: 120%;
font-weight: 900;
}
#gTagCloud ul li.size6 a {
color: #0e2b52;
font-size: 130%;
font-weight: 900;
}
#gTagCloud ul li.size7 a {
color: #0e2b52;
font-size: 140%;
font-weight: 900;
}
#gTagCloud ul li a:hover {
color: #f30;
text-decoration: underline;
}
/* Pagination ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#gPager {
clear: both;
}
#gPager li {
background-repeat: no-repeat;
float: left;
padding: 5px;
}
#gPager .first {
background-image: url('../images/ico-pg-first.png');
background-position: left;
padding-left: 20px;
}
#gPager .first_inactive {
background-image: url('../images/ico-pg-first_inactive.png');
background-position: left;
color: #ccc;
padding-left: 20px;
}
#gPager .previous {
background-image: url('../images/ico-pg-previous.png');
background-position: left;
padding-left: 17px;
}
#gPager .previous_inactive {
background-image: url('../images/ico-pg-previous_inactive.png');
background-position: left;
color: #ccc;
padding-left: 17px;
}
#gPager .next {
background-image: url('../images/ico-pg-next.png');
background-position: right;
padding-right: 17px;
}
#gPager .next_inactive {
background-image: url('../images/ico-pg-next_inactive.png');
background-position: right;
color: #ccc;
padding-right: 17px;
}
#gPager .last {
background-image: url('../images/ico-pg-last.png');
background-position: right;
padding-right: 20px;
}
#gPager .last_inactive {
background-image: url('../images/ico-pg-last_inactive.png');
background-position: right;
color: #ccc;
padding-right: 20px;
}
/** *******************************************************************
* 6) Browser hacks
*********************************************************************/
#gSiteMenu:after,
#gBreadcrumbs:after,
#gAlbumGrid:after,
#gPager:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
/** *******************************************************************
* 7) jQuery and jQuery UI
*********************************************************************/
/* Restyle Superfish menus a bit ~~~~~~~~~ */
.sf-menu li {
background: #bdd2ff url('../images/bg-buttons.png') 0 12% repeat-x;
}
.sf-menu li:hover,
.sf-menu a:hover {
background: #cfdeff url('../images/bg-buttons.png') 0 50% repeat-x;
}
.sf-menu li:active,
.sf-menu a:active {
background: #8ab9ff url('../images/bg-buttons.png') 0 87% repeat-x;
}
.sf-menu a:hover {
text-decoration: none;
}
.sf-menu li li,
.sf-menu li li:hover,
.sf-menu li li a:hover,
.sf-menu li li li,
.sf-menu li li li:hover,
.sf-menu li li li a:hover {
background: #bdd2ff;
}
/* Ajax loading indicator ~~~~~~~~~~~~~~~~ */
.gLoadingLarge {
background: #fff url('../images/loading-lg.gif') no-repeat center center;
font-size: 0;
}
.gLoadingSmall {
background: #fff url('../images/loading-sm.gif') no-repeat center center;
font-size: 0;
}
.gDraggable {
background-image: url('../images/ico-move-handle.png');
background-position: left .1em;
background-repeat: no-repeat;
cursor: move;
padding: .3em 1.4em !important;
}
/* jQuery UI Dialog ~~~~~~~~~~~~~~~~~~~~~~ */
#gDialog {
font-size: 1.2em;
text-align: left;
}
#gDialog fieldset {
border: none;
}
#gDialog legend {
display: none;
}
.ui-dialog {
background: #f3f3f3 url('../images/bg-dialog.png') 0 0 repeat-x;
color: #362b36;
border: 4px solid #ddd;
position: relative;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
z-index: 99999;
}
.ui-resizable .ui-resizable-handle {
display: block;
}
body .ui-resizable-disabled .ui-resizable-handle,
body .ui-resizable-autohide .ui-resizable-handle {
display: none;
}
.ui-resizable-n {
cursor: n-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0px;
}
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0px;
}
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0px;
height: 100%;
}
.ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0px;
height: 100%;
}
.ui-resizable-se {
cursor: se-resize;
width: 18px;
height: 18px;
right: -5px;
bottom: -5px;
background: url('../images/ico-resize.gif') no-repeat 0 0;
}
.ui-resizable-sw {
cursor: sw-resize;
width: 9px;
height: 9px;
left: -5px;
bottom: -5px;
}
.ui-resizable-nw {
cursor: nw-resize;
width: 9px;
height: 9px;
left: -5px;
top: -5px;
}
.ui-resizable-ne {
cursor: ne-resize;
width: 9px;
height: 9px;
right: -5px;
top: -5px;
}
.ui-dialog-titlebar {
padding: .5em 1.5em .5em 1em;
color: #444;
background: #e6e6e6 url('../images/bg-bars.png') 0 50% repeat-x;
border-bottom: 1px solid #ccc;
font-size: 1em;
font-weight: normal;
position: relative;
}
.ui-dialog-title {}
.ui-dialog-titlebar-close {
background: url('../images/bg-close.gif') 0 0 no-repeat;
position: absolute;
right: 8px;
top: .7em;
width: 11px;
height: 11px;
z-index: 100;
}
.ui-dialog-titlebar-close-hover,
.ui-dialog-titlebar-close:hover {
background-position: 0 47%;
}
.ui-dialog-titlebar-close:active {
background-position: 0 95%;
}
.ui-dialog-titlebar-close span {
display: none;
}
.ui-dialog-content {
color: #362b36;
padding: 1.5em 1.7em;
}
.ui-dialog-buttonpane {
position: absolute;
bottom: 0;
width: 100%;
text-align: left;
border-top: 1px solid #ddd;
background: #f3f3f3;
}
.ui-dialog-buttonpane button {
margin: .5em 0 .5em 8px;
color: #444444;
background: #e6e6e6 url('../images/bg-bars.png') 0 50% repeat-x;
font-size: 1em;
border: 1px solid #ccc;
cursor: pointer;
padding: .2em .6em .3em .6em;
line-height: 1.4em;
}
.ui-dialog-buttonpane button:hover {
color: #111;
background: #eb9300 url('../images/bg-buttons.png') 0 50% repeat-x;
border: 1px solid #888;
}
.ui-dialog-buttonpane button:active {
color: #000;
background: #8ab9ff url('../images/bg-buttons.png') 0 87% repeat-x;
}
/* This file skins dialog */
.ui-dialog.ui-draggable .ui-dialog-titlebar,
.ui-dialog.ui-draggable .ui-dialog-titlebar {
cursor: move;
}