diff options
| -rw-r--r-- | themes/default/css/screen.css | 461 |
1 files changed, 227 insertions, 234 deletions
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css index 5d2bce56..1b2e8001 100644 --- a/themes/default/css/screen.css +++ b/themes/default/css/screen.css @@ -1,27 +1,29 @@ /** - * Gallery 3 Default Theme Styles + * Gallery 3 Default Theme Screen Styles * * @requires YUI reset, font, grids CSS * * Sheet organization: * 1) Basic HTML elements - * 2) Base text styles - * 3) Page layout containers - * 4) Reusable content containers - * 5) Specific content blocks + * 2) Reusable classes + * 3) Reusable content blocks + * 4) Page layout containers + * 5) Content blocks in specific layout containers * 6) Navigation and menus - * 7) Generic styles - * 8) Browser hacks - * 9) Debugging information - * 10) Ajax/DOM features - * 11) jQuery UI + * 7) Browser hacks + * 8) jQuery and jQuery UI + * + * @todo Group Credits and gLoginMenu seperator styles + * @todo Drop .gShortForm in favor of styling specific IDs (gSearchForm, gAddTagForm) + * @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. + * @todo Move debugging information styles into a core stylesheet. */ /** ******************************************************************* * 1) Basic HTML elements - ******************************************************************/ - -/* Basic HTML elements ~~~~~~~~~~~~~~~~ */ + **********************************************************************/ body, html { background-color: #ccc; @@ -32,6 +34,14 @@ p { margin-bottom: 1em; } +strong { + font-weight: bold; +} + +em { + font-style: oblique; +} + /* Headings ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ h1, h2, h3, h4, h5 { @@ -195,33 +205,134 @@ li.gError select { border: 2px solid red; } -/** **************************************************************** - * 2) Base text styles - ******************************************************************/ +/** ******************************************************************* + * 2) Reusable generic classes + *********************************************************************/ -#gContent, .ui-dialog { - font-size: 1.2em; +/* Not used, yet */ + +/** ******************************************************************* + * 3) Reusable content blocks + *********************************************************************/ + +.gBlock { + clear: both; + margin-bottom: 2.5em; } -#gSidebar { - font-size: .9em; +.gBlock h2 { + background: #e8e8e8; + padding: .3em 1.4em; + background-image: url('../images/ico-move-handle.png'); + background-repeat: no-repeat; + cursor: move; } -#gHeader, #gFooter { - font-size: .8em; +.gBlockContent { + padding: .5em 1em; } -#gSiteMenu, #gBreadcrumbs, #gTagCloud ul { - font-size: 1.3em; +/* Metadata ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ + +.gMetadata td, +.gMetadata th { + padding: 0 1em .5em 0; + vertical-align: top; } -.gItem { - font-size: .7em; +.gMetadata th, +.gMetadata td.toggle { + text-align: right; +} + +/* Status messages ~~~~~~~~~~~~~~~~~~~~~~~ */ + +#gSiteStatus li, +#gMessage li { + border: 1px solid #ccc; + margin-bottom: .4em; +} + +.gError, .gInfo, .gSuccess, .gWarning { + background-color: #e8e8e8; + background-position: .4em 50%; + background-repeat: no-repeat; + padding: .4em .5em .4em 30px; +} + +.gError { + background-color: #fcc; + background-image: url('../images/ico-error.png'); +} + +.gInfo { + background-image: url('../images/ico-info.png'); +} + +.gSuccess { + background-color: #cfc; + background-image: url('../images/ico-success.png'); +} + +.gWarning { + background-color: #ff9; + background-image: url('../images/ico-warning.png'); +} + +/* Inline layout (forms, lists) ~~~~~~~~~~ */ + +.gShortForm li { + float: left; + padding: .4em .5em; +} + +.gShortForm legend, +.gShortForm label { + display: none; +} + +.gShortForm fieldset { + border: none; +} + +.gShortForm input[type="text"] { + width: 10em; +} + +/* Debugging information ~~~~~~~~~~~~~~~~~ */ + +.gAnnotatedThemeBlock { + position: relative; + padding: 1em; + margin: 1em; + border: 1px solid #C00; + clear: both; } -/*** *************************************************************** - * 3) Page layout containers - ******************************************************************/ +.gAnnotatedThemeBlock_album_top { + float: right; +} + +.gAnnotatedThemeBlock_header_bottom { + float: right; +} + +.gAnnotatedThemeBlock div.title { + position: absolute; + top: -1em; + right: -1em; + border: 1px solid black; + background: #C00; + color: white; + text-align: left; + padding: 4px; + font-size: 110%; + -moz-border-radius: 5% 5% 5% 5%; +} + +/*** ****************************************************************** + * 4) Page layout containers + *********************************************************************/ /* View container ~~~~~~~~~~~~~~~~~~~~~~~~ */ @@ -235,75 +346,63 @@ li.gError select { #gHeader { border-bottom: 1px solid #fff; + font-size: .8em; margin-bottom: 20px; } #gContent { + font-size: 1.2em; padding-left: 20px; } #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; } -/** **************************************************************** - * 4) Reusable content containers - ******************************************************************/ +/** ******************************************************************* + * 5) Content blocks in specific layout containers + *********************************************************************/ -.gBlock { - clear: both; - margin-bottom: 2.5em; -} +/* Header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ -#gSidebar .gBlock h3 { - background: #e8e8e8; - padding: .3em 1.4em; - background-image: url('../images/ico-move-handle.png'); - background-repeat: no-repeat; - cursor: move; +#gHeader #gLogo { + margin: 5px 10px 10px 20px; } -#gSidebar .gBlockContent { - padding: .5em 1em; +#gHeader #gSearchForm { + float: right; + margin-right: 20px; } -/** **************************************************************** - * 5) Specific content blocks - ******************************************************************/ - -/* Logo ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ +/* Album content ~~~~~~~~~~~~~~~~~~~~~~~~~ */ -#gLogo { - margin: 5px 10px 10px 20px; +#gContent #gAlbumHeader { } -.gThumbnail { +#gContent #gAlbumHeader .gDescription { } -/* Album ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - -#gAlbumHeader { - position: relative; -} - -#gAlbumGrid { +#gContent #gAlbumGrid { border-right: 1px solid #e8e8e8; margin-top: 20px; } -#gAlbumGrid .gItem { +#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; @@ -311,164 +410,74 @@ li.gError select { width: 213px; } -.gItem h2 { +#gContent #gAlbumGrid .gItem .gThumbnail { +} + +#gContent #gAlbumGrid .gItem h2 { margin: 5px 0; } -.gAlbum { +#gContent #gAlbumGrid .gAlbum { background-color: #e8e8e8; } -.gAlbum h2 { +#gContent #gAlbumGrid .gAlbum h2 { color: #006; } -/* Individual photo ~~~~~~~~~~~~~~~~~~~~~ */ +/* Individual photo content ~~~~~~~~~~~~~~ */ -#gItem { +#gContent #gItem { margin: 1em 0; } -/* Metadata ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - -.gMetadata td, -.gMetadata th { - padding: 0 1em .5em 0; - vertical-align: top; +#gContent #gItemHeader { } -.gMetadata th, -.gMetadata td.toggle { - text-align: right; +#gContent #gItemHeader .gDescription { } -/* Comments ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - -#gComments { +#gContent #gComments { margin-top: 2em; } -#gComments ul li { +#gContent #gComments ul li { margin: 1em 0; } -#gComments ul li p { +#gContent #gComments ul li p { background-color: #e8e8e8; margin-bottom: 2px; padding: 4px; } -#gComments ul li div { +#gContent #gComments ul li div { padding: 8px; } -/* Status messages ~~~~~~~~~~~~~~~~~~~~~~~ */ - -#gMessages { - margin: 0 20px 20px; -} +/* Footer content ~~~~~~~~~~~~~~~~~~~~~~~~ */ -#gMessages li { - border: 1px solid #ccc; - margin: .4em 0; -} - -.gError, .gInfo, .gSuccess, .gWarning { - background-color: #e8e8e8; - background-position: .4em .2em; - background-repeat: no-repeat; - padding: .4em .5em .4em 30px; -} - -.gError { - background-color: #fcc; - background-image: url('../images/ico-error.png'); -} - -.gInfo { - background-image: url('../images/ico-info.png'); -} - -.gSuccess { - background-color: #cfc; - background-image: url('../images/ico-success.png'); -} - -.gWarning { - background-color: #ff9; - background-image: url('../images/ico-warning.png'); -} - -/* Inline layout (forms, lists) ~~~~~~~~~~ */ - -.gShortForm li { - float: left; - padding: .4em .5em; -} - -.gShortForm legend, -.gShortForm label { - display: none; -} - - -.gShortForm fieldset { - border: none; -} - -.gShortForm input[type="text"] { - width: 10em; -} - -#gHeader #gSearchForm { - float: right; - margin-right: 20px; -} - -/* Credits ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ - -#gCredits li { +#gFooter #gCredits li { display: inline; } -#gCredits li:before { +#gFooter #gCredits li:before { padding: 0 2px; content: "|"; } -#gCredits li.first:before { +#gFooter #gCredits li.first:before { content: ""; } /** ******************************************************************* - * 6) Navigation and menus - ******************************************************************/ - -.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; -} + * 5) Navigation and menus + *********************************************************************/ -.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; +#gSiteMenu, +#gBreadcrumbs, +#gTagCloud ul { + font-size: 1.3em; } /* Login menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ @@ -683,26 +692,11 @@ li.gError select { } /** ******************************************************************* - * 7) Generic styles - ******************************************************************/ - -.gButtonLink { - border: 1px solid #ccc; - display: block; - height: 24px; - line-height: 1.7em; - padding: 3px 1em 0; -} - -.gButtonLink:hover { - background-color: #f3f3f3; -} - -/** ******************************************************************* - * 8) Browser hacks + * 6) Browser hacks *********************************************************************/ -.gClearFix:after { +#gSiteMenu:after, +#gBreadcrumbs:after { clear: both; content: "."; display: block; @@ -711,54 +705,39 @@ li.gError select { } /** ******************************************************************* - * 9) Debugging information + * 7) jQuery and jQuery UI *********************************************************************/ -div.gAnnotatedThemeBlock { - position: relative; - padding: 1em; - margin: 1em; - border: 1px solid #C00; - clear: both; -} +/* Restyle Superfish menus a bit ~~~~~~~~~ */ -div.gAnnotatedThemeBlock_album_top { - float: right; +.sf-menu li { + background: #bdd2ff url('../images/bg-buttons.png') 0 12% repeat-x; } -div.gAnnotatedThemeBlock_header_bottom { - float: right; +.sf-menu li:hover, +.sf-menu a:hover { + background: #cfdeff url('../images/bg-buttons.png') 0 50% repeat-x; } -div.gAnnotatedThemeBlock div.title { - position: absolute; - top: -1em; - right: -1em; - border: 1px solid black; - background: #C00; - color: white; - text-align: left; - padding: 4px; - font-size: 110%; - -moz-border-radius: 5% 5% 5% 5%; +.sf-menu li:active, +.sf-menu a:active { + background: #8ab9ff url('../images/bg-buttons.png') 0 87% repeat-x; } -/** ******************************************************************* - * 10) Ajax/DOM features - *********************************************************************/ - -#gDialog { - text-align: left; +.sf-menu a:hover { + text-decoration: none; } -#gDialog fieldset { - border: 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; } -#gDialog legend, -#gDialog button.submit { - display: none; -} +/* Ajax loading indicator ~~~~~~~~~~~~~~~~ */ .gLoadingLarge { background: #fff url('../images/loading-lg.gif') no-repeat center center; @@ -770,11 +749,22 @@ div.gAnnotatedThemeBlock div.title { font-size: 0; } -/** ******************************************************************* - * 11) jQuery UI - *********************************************************************/ +/* jQuery UI Dialog ~~~~~~~~~~~~~~~~~~~~~~ */ + +#gDialog { + font-size: 1.2em; + text-align: left; +} + +#gDialog fieldset { + border: none; +} + +#gDialog legend, +#gDialog button.submit { + display: none; +} -/*dialog*/ .ui-dialog { background: #f3f3f3 url('../images/bg-dialog.png') 0 0 repeat-x; color: #362b36; @@ -789,8 +779,10 @@ div.gAnnotatedThemeBlock div.title { .ui-resizable .ui-resizable-handle { display: block; } -body .ui-resizable-disabled .ui-resizable-handle { display: none; } /* use 'body' to make it more specific (css order) */ -body .ui-resizable-autohide .ui-resizable-handle { display: none; } /* use 'body' to make it more specific (css order) */ +body .ui-resizable-disabled .ui-resizable-handle, +body .ui-resizable-autohide .ui-resizable-handle { + display: none; +} .ui-resizable-n { cursor: n-resize; height: 7px; @@ -867,7 +859,8 @@ body .ui-resizable-autohide .ui-resizable-handle { display: none; } /* use 'body height: 11px; z-index: 100; } -.ui-dialog-titlebar-close-hover, .ui-dialog-titlebar-close:hover { +.ui-dialog-titlebar-close-hover, +.ui-dialog-titlebar-close:hover { background-position: 0 47%; } .ui-dialog-titlebar-close:active { |