mirror of
https://github.com/Pathduck/gallery3.git
synced 2026-05-20 19:39:16 -04:00
629 lines
11 KiB
CSS
629 lines
11 KiB
CSS
/**
|
|
* Gx Styles
|
|
*
|
|
* @requires YUI reset, font, grids, and base CSS
|
|
*
|
|
* Sheet organization:
|
|
* 1) HTML elements (headings, links, lists, tables, forms)
|
|
* 2) Layout containers (view, header, content, sidebar, footer)
|
|
* 3) Generic content containers (item, block)
|
|
* 4) Specific content containers and blocks (albums, metadata, comments)
|
|
* 5) Navigation and menus (menus, breadcrumbs, pagination, tab cloud)
|
|
* 6) Specific text styles (different headings, font sizes, etc.)
|
|
* 7) Generic styles ()
|
|
* 8) Browser hacks (clear fix)
|
|
*/
|
|
|
|
@import url('forms.css');
|
|
|
|
/**
|
|
** *******************************************************************
|
|
* 1) HTML elements (body, headings, links, lists, tables, forms)
|
|
** *******************************************************************
|
|
*/
|
|
|
|
/* ~~~~~~~~~ general elements ~~~~~~~~~~ */
|
|
body, html {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
/* ~~~~~~~~~ text ~~~~~~~~~~ */
|
|
h1 {
|
|
margin-top: 0;
|
|
}
|
|
a {
|
|
color: #6B8CB7;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
color: #FF3300;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ~~~~~~~~~ list ~~~~~~~~~~ */
|
|
li {
|
|
list-style-type: none;
|
|
}
|
|
|
|
/* ~~~~~~~~~ table ~~~~~~~~~~ */
|
|
caption {
|
|
text-align: left;
|
|
}
|
|
th {
|
|
text-align: left;
|
|
}
|
|
|
|
/* ~~~~~~~~~ form ~~~~~~~~~~ */
|
|
form {
|
|
|
|
}
|
|
legend {
|
|
|
|
}
|
|
label {
|
|
|
|
}
|
|
input {
|
|
|
|
}
|
|
textarea {
|
|
|
|
}
|
|
|
|
/**
|
|
** *******************************************************************
|
|
* 2) Layout containers (view, header, content, sidebar, footer)
|
|
** *******************************************************************
|
|
*/
|
|
|
|
/* ~~~~~ View Container ~~~~~~ */
|
|
.gView {
|
|
background-color: #fff;
|
|
border: 1px solid #ccc;
|
|
border-width: 0 1px 1px 1px;
|
|
}
|
|
|
|
/* ~~~ Layout Containers ~~~~~ */
|
|
|
|
#gHeader {
|
|
position: relative;
|
|
}
|
|
|
|
#gContent {
|
|
border-right: 1px solid #ccc;
|
|
padding: 20px;
|
|
clear: both;
|
|
}
|
|
|
|
#gSidebar {
|
|
background-color: #fff;
|
|
width: 18.4615em;
|
|
padding: 1.5em 0 0 0;
|
|
}
|
|
|
|
#gFooter {
|
|
border-top: 1px solid #ccc;
|
|
padding: .5em;
|
|
}
|
|
|
|
/**
|
|
** ****************************************************************
|
|
* 3) Generic content containers (item, block)
|
|
** ****************************************************************
|
|
*/
|
|
|
|
.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 .gMinimize {
|
|
position: absolute;
|
|
top: .45em;
|
|
right: .3em;
|
|
width: 16px;
|
|
height: 16px;
|
|
background-image: url('images/minimize.png');
|
|
}
|
|
.gBlockHeader .gMinimize: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;
|
|
}
|
|
|
|
/**
|
|
** ****************************************************************
|
|
* 4) Specific content containers and blocks (albums, metadata, comments)
|
|
** ****************************************************************
|
|
*/
|
|
|
|
/* ~~~~~~~~ logo ~~~~~~~~ */
|
|
|
|
#gLogo {
|
|
float: left;
|
|
margin: 10px;
|
|
}
|
|
|
|
.gThumbnail {
|
|
|
|
}
|
|
|
|
/* ~~~~~~~~~ album ~~~~~~~~~~ */
|
|
|
|
#gAlbumGridHeader {
|
|
height: 40px;
|
|
position: relative;
|
|
}
|
|
#gAlbumGridHeader h1 {
|
|
display: inline;
|
|
}
|
|
#gAlbumGridHeader span {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
#gAlbumGrid {
|
|
margin: 0;
|
|
}
|
|
#gAlbumGrid .gItem {
|
|
float: left;
|
|
text-align: center;
|
|
border: 1px lightgray solid;
|
|
list-style: none;
|
|
margin: 0 14px 10px 0;
|
|
padding: 5px 0 5px 0;
|
|
}
|
|
|
|
#gAlbumGrid .first {
|
|
clear: left;
|
|
}
|
|
|
|
.gAlbum {
|
|
background-color: #D4DAFF;
|
|
}
|
|
.gAlbum h2 {
|
|
color: #006;
|
|
}
|
|
|
|
.gItem h2 {
|
|
margin: 5px 0 5px 0;
|
|
}
|
|
|
|
/* ~~~~ individual photo ~~~~~~~ */
|
|
|
|
#gItem {
|
|
margin: 0;
|
|
}
|
|
#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;
|
|
}
|
|
|
|
|
|
/* ~~~~~~~~~ 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;
|
|
}
|
|
|
|
/* ~~~~~~~~~ Status messages ~~~~~~~~~~ */
|
|
|
|
#gStatusMessages {
|
|
|
|
}
|
|
.gError {
|
|
|
|
}
|
|
.gWarning {
|
|
|
|
}
|
|
.gSuccess {
|
|
|
|
}
|
|
.gInfo {
|
|
|
|
}
|
|
|
|
/* ~~~~~~~~~ search form ~~~~~~~~~~ */
|
|
|
|
#gSearchForm {
|
|
position: absolute;
|
|
right: 13px;
|
|
top: 103px;
|
|
}
|
|
#gSearchForm input.text {
|
|
padding: 1px;
|
|
}
|
|
#gSearchForm input.submit {
|
|
height: 20px;
|
|
}
|
|
|
|
/* ~~~~~~~~~ comment form ~~~~~~~~~~ */
|
|
|
|
#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;
|
|
}
|
|
|
|
/**
|
|
** *******************************************************************
|
|
* 5) Navigation and menus (menus, breadcrumbs, pagination, tab cloud)
|
|
** *******************************************************************
|
|
*/
|
|
|
|
/* ~~~~~~~~ login menu ~~~~~~~~ */
|
|
|
|
#gLoginMenu {
|
|
position: absolute;
|
|
top: 0;
|
|
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;
|
|
}
|
|
|
|
#gSlideshowLink {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
|
|
/* ~~~~~~~~~ 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;
|
|
}
|
|
|
|
/* ~~~~~~~~~ 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;
|
|
}
|
|
|
|
/* ~~~~~~~~~ pagination ~~~~~~~~~~ */
|
|
|
|
#gPagination {
|
|
clear: both;
|
|
padding: 10px 0 0 0;
|
|
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;
|
|
}
|
|
|
|
/* ~~~~~~~~~ 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) Specific text styles (different headings, font sizes, etc.)
|
|
** *******************************************************************
|
|
*/
|
|
|
|
#gHeader h1 {
|
|
float: left;
|
|
margin: 20px 0 0 20px;
|
|
}
|
|
|
|
/**
|
|
** *******************************************************************
|
|
* 7) Generic styles
|
|
** *******************************************************************
|
|
*/
|
|
|
|
.buttonlink {
|
|
border: 1px solid lightgray;
|
|
padding: 5px;
|
|
}
|
|
.buttonlink:hover {
|
|
background-color: #F3F3F3;
|
|
}
|
|
.understate {
|
|
color: silver;
|
|
}
|
|
|
|
/**
|
|
** *******************************************************************
|
|
* 8) Browser hacks
|
|
** *******************************************************************
|
|
*/
|
|
|
|
/* Keep containers holding only floated elements from collapsing in Safari */
|
|
.clearfix:after {
|
|
content: ".";
|
|
display: block;
|
|
height: 0;
|
|
clear: both;
|
|
visibility: hidden;
|
|
}
|