diff options
| author | Chad Kieffer <chad@2tbsp.com> | 2008-11-07 05:03:00 +0000 |
|---|---|---|
| committer | Chad Kieffer <chad@2tbsp.com> | 2008-11-07 05:03:00 +0000 |
| commit | 7329cb0dde260f022178c7965f6240660d08da28 (patch) | |
| tree | 167a30a1f2042fa364c03c5aa4292c246abfe5a7 /themes/default/css/screen.css | |
| parent | 6f1c46da6e0fb0145412d18412ffb593f5bd9b5a (diff) | |
Added YUI 2.6.0 CSS collection to lib (reset-gonts-grids and base) and call these rather than CDN versions, for now. Renamed default theme's style sheet to screen.css, recommend that CSS files be named for the primary media they support. Removed unused YUI JS component calls from the default theme.
Diffstat (limited to 'themes/default/css/screen.css')
| -rw-r--r-- | themes/default/css/screen.css | 669 |
1 files changed, 669 insertions, 0 deletions
diff --git a/themes/default/css/screen.css b/themes/default/css/screen.css new file mode 100644 index 00000000..0f12b789 --- /dev/null +++ b/themes/default/css/screen.css @@ -0,0 +1,669 @@ +/** + * Gx Styles + * + * @requires YUI reset, font, grids, and base CSS + * + * Sheet organization: + * 1) Global element styles + * 2) Text (fonts, headings, links) + * 3) Layout containers + * 4) Generic blocks + * 5) Primary content blocks + * 6) Navigation and menus + * 7) Tables + * 8) Forms, additional form CSS stored in css/forms.css (temporarily) + * 9) General browser hacks + */ + + @import url('css/forms.css'); + +/** + ** ************************************************** + * 1) Global unique styles + ** ************************************************** + */ + +/* ~~~~~~~~~ general elements ~~~~~~~~~~ */ +body, html { + background-color: #ccc; +} + +/* ~~~~~~~~~ text elements ~~~~~~~~~~ */ +h1 { + margin-top: 0px; +} +a { + color: #6B8CB7; + text-decoration: none; +} +a:hover { + color: #FF3300; + text-decoration: underline; +} + +/* ~~~~~~~~~ list elements ~~~~~~~~~~ */ +li { + list-style-type: none; +} + +/* ~~~~~~~~~ table elements ~~~~~~~~~~ */ +caption { + text-align: left; +} +th { + text-align: left; +} + +/* ~~~~~~~~~ form elements ~~~~~~~~~~ */ +form { + +} +legend { + +} +label { + +} +input { + +} +textarea { + +} + +/** + ** ************************************************** + * 2) High level content containers (header, content, sidebar, footer) + ** ************************************************** + */ + +/* ~~~~~ View Container ??? ~~~~~~ */ +.gView, +.gAlbumView, +.gItemView { + background-color: #fff; + border: 1px solid #ccc; + border-width: 0 1px 1px 1px; +} + +/* ~~~~~~~~ high level content containers ~~~~~~~~ */ + +#gHeader { + position: relative; + +} + +#gContent { + border-right: 1px solid #ccc; + padding: 20px; + clear: both; +} + +#gSidebar { + width: 18.4615em; + padding: 1.5em 0 0 0; +} + +#gFooter { + border-top: 1px solid #ccc; + padding: .5em; +} + +/** + ** ************************************************** + * 3) Header styles (logo, login, site menu, breadcrumbs, search) + ** ************************************************** + */ + +/* ~~~~~~~~ logo/title ~~~~~~~~ */ + +#gLogo { + float: left; + margin: 10px; +} +#gHeader h1 { + float: left; + margin: 20px 0 0 20px; +} + +/* ~~~~~~~~ login menu ~~~~~~~~ */ + +#gLoginMenu { + position: absolute; + top: 0px; + right: 13px; + border: 1px solid silver; + border-width: 0 1px 1px 1px; + padding: 5px; + text-align: right; +} +#gLoginMenu form { + margin-top: 5px; +} +#gLoginMenu label { + font-size: 0.8em; +} +#gLoginMenu input.text, +#gLoginMenu input.password { + width: 80px; + padding: 0 0 .1em 0; +} +#gLoginMenu input.submit { + font-size: 0.9em; + font-weight: bold; +} + +/* ~~~~~~~~ site menu ~~~~~~~~ */ + +#gSiteMenu { + height: 31px; + margin: 0; + padding: 0; + list-style-type: none; + clear: both; +} +#gSiteMenu li { + list-style-type: none; + float: left; + display: block; + width: 20%; + background: #E6EBF0; +} +#gSiteMenu li a { + color: #003366; + font-weight: bold; + height: 20px; + display: block; + text-align: center; + padding: 7px 7px 3px 7px; + background: url('images/bg_sitemenu.png') repeat-x; + margin-left: 1px; + border: 1px solid #336699; + border-width: 0 1px 1px 0; + text-decoration: none; + letter-spacing: .1em; +} +#gSiteMenu li a:hover { + color: #FF3300; + background: url('images/bg_sitemenu_hover.png'); +} +#gSiteMenu li a.active { + background: #DCE6EF; + border-color: #DCE6EF; + color: #FF3300; +} + +/* ~~~~~~~~~ breadcrumbs ~~~~~~~~~~ */ + +#gBreadcrumbs { + border-bottom: 1px solid silver; + margin: 0; + padding: 0 0 0 14px; + height: 28px; + list-style-type: none; +} +#gBreadcrumbs li { + list-style-type: none; + background: transparent url(images/icon_breadcrumb_separator.gif) no-repeat scroll left center; + padding: 0 0 0 10px; + float: left; +} +#gBreadcrumbs li.root { + background: transparent; + padding: 0; +} +#gBreadcrumbs li a, +#gBreadcrumbs li span { + padding: 6px 6px 6px 6px; + display: block; +} +#gBreadcrumbs li.active span { + font-weight: bold; +} + +/* ~~~~~~~~~ search form ~~~~~~~~~~ */ + +#gSearchForm { + position: absolute; + right: 13px; + top: 103px; +} +#gSearchForm input.text { + padding: 1px; +} +#gSearchForm input.submit { + height: 20px; +} + +/** + ** ************************************************** + * 4) Generic styles + ** ************************************************** + */ + +.buttonlink { + border: 1px solid lightgray; + padding: 5px; +} +.buttonlink:hover { + background-color: #F3F3F3; +} +.understate { + color: silver; +} + + +/* +.gBlock { + margin: 0 1em 1.5em 0; + border: 1px solid #336699; + padding: 0; +} +.gBlockHeader { + background-color: #E8E8E8; + padding: .3em; + height: 1.5em; + border-bottom: 1px solid #6B8CB7; + margin: 0 !important; +} +.gBlockHeader h2 { + color: #003366; + margin: 0; + float: left; + font-size: 1.1em; +} +.gBlockHeader .minimize { + float: right; +} +.gBlockContent { + margin: .3em; +} +*/ + +.gBlock { + margin: 0 1em 2.5em 0; + padding: 0; +} +.gBlockHeader { + background-color: #E8E8E8; + padding: .3em .4em .3em .4em; + height: 1.5em; + margin: 0 !important; + position: relative; + cursor: move; +} +.gBlockHeader h2 { + margin: 0; + float: left; + font-size: 1.1em; + background-image: url('images/ico_dragable.png'); + background-repeat: no-repeat; + padding-left: 12px; +} +.gBlockHeader .minimize { + position: absolute; + top: .45em; + right: .3em; + width: 16px; + height: 16px; + background-image: url('images/minimize.png'); +} +.gBlockHeader .minimize:hover { + background-image: url('images/minimize_active.png'); +} +.gBlockContent { + margin: .5em .5em 0 .5em; +} +table.gBlockContent { + width: 214px; + table-layout: fixed; +} +table.gBlockContent th { + padding: .3em .3em .3em 0; +} +table.gBlockContent td { + padding: .3em 0 .3em .3em; +} + +/** + ** ************************************************** + * 5) Content blocks - inherits from Generic blocks + ** ************************************************** + */ + +#gItem { + width: 500px; + margin-left: auto; + margin-right: auto; +} +#gItem a.buttonlink { + float: right; +} +#gItem img { + clear: both; + display: block; + border: 1px solid silver; + background-color: #e7e7e7; +} +#gItem h1 { + margin: 10px 0 10px 0; +} + +/* ~~~~~~~~~ metadata ~~~~~~~~~~ */ + +table.gMetadata { + +} +table.gMetadata td, +table.gMetadata th { + border: 0; +} +table.gMetadata td.toggle { + text-align: right; +} + +/* ~~~~~~~~~ upload ~~~~~~~~~~ */ + +#gUploadForm .gBreadcrumbs li input, #gUploadForm .gBreadcrumbs li select { + width: 140px; + margin-left: 5px; +} + +/* ~~~~ individual photo ~~~~~~~ */ + +.gPhotoView img { + width: 400px; + height: 300px; + margin-right: auto; + margin-left: auto; + margin-bottom: 20px; +} + +/* ~~~~~~~~~ comments ~~~~~~~~~~ */ + +#gComments { + border: 1px solid #ccc; + padding: 10px; +} +#gComments h2 { + margin-top: 0; +} +#gComments ul { + margin: 0; +} +#gComments ul li { + list-style-type: none; + margin-bottom: 15px; +} +#gComments ul li p { + background-color: #E8E8E8; + margin-bottom: 2px; + padding: 4px; +} +#gComments ul li div { + padding: 8px; +} + +/* ~~~~~~~~~ album ~~~~~~~~~~ */ + +#gAlbumGridHeader { + height: 40px; + position: relative; +} +#gAlbumGridHeader h1 { + display: inline; +} +#gAlbumGridHeader span { + padding-left: 10px; +} +#gSlideshowLink { + position: absolute; + top: 0px; + right: 0px; +} + +#gAlbumGrid .gItemContainer, +#gAlbumGrid .gAlbumContainer { + float: left; + text-align: center; + border: 1px lightgray solid; + margin: 0px 0px 10px 1.49%; + padding: 5px 0px 5px 0px; +} +#gAlbumGrid .first { + margin: 0px 0px 10px 0px; +} + +.gAlbum { + background-color: #D4DAFF; +} +.gAlbum h2 { + color: #000066; +} + +.gItemContainer h2, +.gAlbumContainer h2 { + margin: 5px 0px 5px 0px; +} + + +/* ~~~~~~~~~ tag cloud ~~~~~~~~~~ */ + +#gTags ul { + text-align: justify; + padding: 0; +} +#gTags ul li { + text-align: justify; + display: inline; +} +#gTags ul li a { + text-decoration: none; +} +#gTags ul li a.size0 { + font-size: 100%; + font-weight: 100; + color: #99CCFF; +} +#gTags ul li a.size1 { + font-size: 110%; + font-weight: 300; + color: #6699FF; +} +#gTags ul li a.size2 { + font-size: 120%; + font-weight: 500; + color: #6699CC; +} +#gTags ul li a.size3 { + font-size: 130%; + font-weight: 700; + color: #336699; +} +#gTags ul li a.size4 { + font-size: 140%; + font-weight: 900; + color: #0E2B52; +} +#gTags ul li a:hover { + color: #FF3300; + text-decoration: underline; +} +#gTags form { + margin-top: 10px; +} + +/* ~~~~~~~~~ tags ~~~~~~~~~~ */ + +#gTags ul { + margin-left: .5em; +} +#gTags li { + list-style-image: url('images/bullet_tag.png'); + margin-bottom: .3em; +} + +/* ~~~~~~~~~ album tree ~~~~~~~~~~ */ + +#gAlbumTree { + border: 1px solid lightgray; + margin: 20px 0 20px 0; + padding: 5px; +} +#gAlbumTree #gTreeContainer { + border: 1px solid lightgray; + padding: 0 0 0 5px; +} + + +/** + ** ************************************************** + * 6) Navigation and menus + ** ************************************************** + */ + + + +/* ~~~~~~~~~ pagination ~~~~~~~~~~ */ + +#gPagination { + clear: both; + padding: 10px 0px 0px 0px; + text-align: center; +} +#gPagination a, +#gPagination span { + border: 1px solid lightgray; + padding: 5px; + background-repeat: no-repeat; +} +#gPagination a:hover { + background-color: #F3F3F3; +} +#gPagination .first { + background-image: url('images/first.png'); + background-position: left; + padding-left: 20px; +} +#gPagination .first_inactive { + background-image: url('images/first_inactive.png'); + background-position: left; + padding-left: 20px; +} +#gPagination .previous { + background-image: url('images/previous.png'); + background-position: left; + padding-left: 17px; +} +#gPagination .previous_inactive { + background-image: url('images/previous_inactive.png'); + background-position: left; + padding-left: 17px; +} +#gPagination .next { + background-image: url('images/next.png'); + background-position: right; + padding-right: 17px; +} +#gPagination .next_inactive { + background-image: url('images/next_inactive.png'); + background-position: right; + padding-right: 17px; +} +#gPagination .last { + background-image: url('images/last.png'); + background-position: right; + padding-right: 20px; +} +#gPagination .last_inactive { + background-image: url('images/last_inactive.png'); + background-position: right; + padding-right: 20px; +} + + +/** + ** ************************************************** + * 7) Tables + ** ************************************************** + */ + + +/** + ** ************************************************** + * 8) Forms + ** ************************************************** + */ + +#gCommentAdd { + width: 500px; +} + +/* ----------- upload ----------------- */ + +#gUploadForm .gBreadcrumbs li input, #gUploadForm .gBreadcrumbs li select { + width: 140px; + margin-left: 5px; +} + +#gUploadForm-queue { + width: 500px; +} + +#gUploadForm-queue td, #gUploadForm-queue th { + text-align: left; + border-color: #e7e7e7; +} + +#gUploadForm-queue caption { + display: none; +} + +#gUploadForm-queue thead th { + text-align: center; + border-bottom: 2px solid #000; +} + +#gUploadForm-queue thead th, #gUploadForm-queue thead td { + background-color: #e7e7e7; +} + +#gUploadForm-queue tfoot td { + border-top: 2px solid #000; +} + +#gUploadForm-queue .filesize { + width: 60px; +} + +#gUploadForm-queue td.filesize { + text-align: right; +} + +#gUploadForm-queue tfoot td.filesize { + color: #ccc; +} + +#gUploadForm-queue .action { + width: 40px; +} + +#gUploadForm-button { + width: 130px; + margin-left: 370px; +} + +/** + ** ************************************************** + * 9) Browser hacks + ** ************************************************** + */ + +/* Keep containers holding only floated elements from collapsing in Safari */ +.clearfix:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} |
