/** * Gallery 3 Default Theme Screen Styles * * @requires YUI reset, font, grids CSS * * Sheet organization: * 1) Basic HTML elements * 2) Reusable content blocks * 3) Page layout containers * 4) Content blocks in specific layout containers * 5) Navigation and menus * 6) jQuery and jQuery UI * 7) Right-to-left language styles */ /** ******************************************************************* * 1) Basic HTML elements **********************************************************************/ body, html { background-color: #ccc; font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } p { margin-bottom: 1em; } em { font-style: oblique; } h1, h2, h3, h4, h5, strong, th { font-weight: bold; } h1 { font-size: 1.7em; } #g-search-results h1 { margin-bottom: 1em; } #g-progress h1 { font-size: 1.1em; } h2 { font-size: 1.4em; } #g-sidebar .g-block h2 { font-size: 1.2em; } #g-sidebar .g-block li { margin-bottom: .6em; } h3 { font-size: 1.2em; } /* Links ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ a, .g-menu a, #g-dialog a, .g-button, .g-button:hover, .g-button:active, a.ui-state-hover, input.ui-state-hover, button.ui-state-hover { color: #5382BF !important; text-decoration: none; -moz-outline-style: none; } a:hover, #g-dialog a:hover { text-decoration: underline; } .g-menu a:hover { text-decoration: none; } /* Tables ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ table { width: 100%; } #g-content table { margin: 1em 0 3em 0; } caption, th { text-align: left; } th, td { border: none; border-bottom: 1px solid #ccc; padding: .5em; vertical-align: top; } #g-admin-maintenance td { vertical-align: middle; } /* Forms ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ fieldset { border: 1px solid #ccc; padding-bottom: .8em; } #g-header fieldset, #g-sidebar fieldset, .g-short-form fieldset { border: none; } legend { font-weight: bold; margin-left: 1em; } #g-header legend, #g-sidebar legend, #g-content #g-search-form legend, input[type="hidden"], .g-short-form label { display: none; } label { cursor: help; } input[type="text"], input[type="password"] { width: 50%; } input[type="text"], input[type="password"], textarea { border: 1px solid #e8e8e8; border-top-color: #ccc; border-left-color: #ccc; color: #333; } textarea { width: 100%; height: 12em; } 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; } input[type="submit"], input[type="reset"] { display: inline; clear: none; float: left; } /* Form validation ~~~~~~~~~~~~~~~~~~~~~~~ */ 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 red; } /** ******************************************************************* * 2) Reusable content blocks *********************************************************************/ .g-block { background-color: #fff; border: 1px solid #ccc; padding: 1em; } .g-block h2 { background-color: #e8e8e8; padding: .3em .8em; } .g-block-content { margin-top: 1em; } #g-sidebar .g-block-content { padding: 0; } .g-selected img, .g-available .g-block img { float: left; margin: 0 1em 1em 0; } .g-selected { background: #e8e8e8; } .g-available .g-installed-toolkit:hover { cursor: pointer; background: #eee; } .g-available .g-button { width: 96%; } .g-selected .g-button { display: none; } .g-unavailable { border-color: #999; opacity: 0.4; } tr.g-error, tr.g-info, tr.g-success, tr.g-warning { background: none; } .g-info td.g-info { background-color: transparent; } .g-success td.g-success { background-color: transparent; } .g-error td { background-color: #f6cbca; } .g-warning td { background-color: #fcf9ce; } .g-module-status.g-info, #g-log-entries .g-info, .g-module-status.g-success, #g-log-entries .g-success { background-color: #fff; } /* Inline layout (forms, lists) ~~~~~~~~~~ */ .g-short-form li { float: left; padding: .4em 0; } .g-short-form input[type="text"] { color: #666; padding: .3em .6em; width: 11em; } /*** ****************************************************************** * 3) Page layout containers *********************************************************************/ /* View container ~~~~~~~~~~~~~~~~~~~~~~~~ */ .g-view { background-color: #fff; border: 1px solid #ccc; border-bottom: none; min-width: 974px !important; } /* Layout containers ~~~~~~~~~~~~~~~~~~~~~ */ #g-header { background-color: #e8e8e8; border-bottom: 1px solid #ccc; font-size: .8em; margin-bottom: 20px; padding: 0 20px; position: relative; } #g-content { font-size: 1.1em; padding-left: 20px; width: 96%; } #g-sidebar { background-color: #fff; font-size: .9em; padding: 0 20px; width: 220px; } #g-footer { background-color: #e8e8e8; border-top: 1px solid #ccc; font-size: .8em; margin-top: 20px; padding: 10px 20px; } /** ******************************************************************* * 4) Content blocks in specific layout containers *********************************************************************/ /* Header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-header #g-logo { background: transparent url('../../../lib/images/logo.png') no-repeat 0 .5em; color: #A5A5A5 !important; display: block; height: 55px; padding-top: 5px; width: 105px; } #g-header #g-logo:hover { color: #f60 !important; text-decoration: none; } #g-header #g-quick-search-form { clear: right; float: right; margin: 1em 0; } #g-header #g-quick-search-form input[type='text'] { width: 17em; } #g-content .g-block h2 { background-color: transparent; padding-left: 0; } #g-sidebar .g-block-content { padding-left: 1em; } /* Footer content ~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-header #g-login-menu li, #g-footer #g-credits li { display: inline; } #g-header #g-login-menu li { padding-left: 1.2em; } #g-footer #g-credits li { padding-right: 1.2em; } #g-content #g-search-results { margin-top: 1em; padding-top: 1em; } .g-block .ui-dialog-titlebar { margin: -1em -1em 0; } #g-sidebar .g-block h2 { background: none; } #g-photo-stream { background-color: #e8e8e8; } #g-photo-stream .g-block-content ul { border-right: 1px solid #e8e8e8; height: 135px; overflow: auto; overflow: -moz-scrollbars-horizontal; /* for FF */ overflow-x: scroll; /* scroll horizontal */ overflow-y: hidden; /* Hide vertical*/ } #g-content #g-photo-stream .g-item { background-color: #fff; border: 1px solid #e8e8e8; border-right-color: #ccc; border-bottom-color: #ccc; float: left; height: 90px; overflow: hidden; text-align: center; width: 90px; } #g-site-status { margin-bottom: 0; } #g-content .g-item { background-color: #fff; border: 1px solid #e8e8e8; border-right-color: #ccc; border-bottom-color: #ccc; height: 90px; padding: 14px 8px; text-align: center; width: 90px; } #g-admin-comments-menu { margin: 1em 0; } #g-admin-comments-menu a { margin: 0; padding: .2em .6em; } #g-admin-graphics .g-available .g-block { clear: none; float: left; margin-right: 1em; width: 30%; } #g-site-theme, #g-admin-theme { float: left; width: 48%; } #g-site-theme { margin-right: 1em; } #g-user-admin-list { margin-bottom: 1em; } #g-user-admin-list td { vertical-align: bottom; } #g-user-admin-list .admin { color: #55f; font-weight: bold; } .g-actions a, .g-actions span { margin-right: 3em; } li.g-group { float: left; display: block; width: 200px; border: 1px solid gray; padding: 0; margin: 0 1em 1em 0; } li.g-group h4 { background-color: #eee; border-bottom: 1px dashed #ccc; padding: .5em 0 .5em .5em; } li.g-group .g-button { padding: 0; } li.g-group ul, li.g-group div { height: 180px; margin: 1px; overflow: auto; padding-top: .2em; } li.g-group div p { color: gray; text-align: center; padding: 2em .5em 0 .5em } li.g-group .g-user { padding: .2em 0 0 .5em; } li.g-group .g-user .g-button { vertical-align: middle; } li.g-default-group h4, li.g-default-group .g-user, li.g-group-disable h4, li.g-group-disable .g-user { color: gray; } #g-admin-advanced-settings tr.setting:hover { background: #ffc; } /* admin/sidebar ~~~~~~~~~~~~~~~~~~~~~~~~~ */ .g-admin-blocks-list { float: left; height: 300px; margin-left: 20px; width: 30%; } .g-admin-blocks-list div:last-child { border: .1em solid; height: 100%; overflow-y: auto; } .g-admin-blocks-list ul { height: 98%; margin: .1em .1em; padding: .1em; } .g-admin-blocks-list ul li { background-color: #e8e8e8; font-size: 1em; font-weight: bold; margin: .5em; padding: .3em .8em; } /** ******************************************************************* * 5) Navigation and menus *********************************************************************/ #g-site-admin-menu, #g-tag-cloud ul { font-size: 1.2em; } /* Login menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-header #g-login-menu { color: #999; float: right; margin: 0; padding: 5px 0; } /* Site Menu ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ #g-site-admin-menu { bottom: 0; display: none; font-size: 1.2em; left: 140px; position: absolute; } #g-site-admin-menu ul { margin-bottom: 0; } /** ******************************************************************* * 6) jQuery and jQuery UI *********************************************************************/ /* Superfish menu overrides ~~~~~~~~~~~~~~ */ .sf-menu li li, .sf-menu li li ul li { background-color: #bdd2ff; } .sf-menu li:hover { background-color: #dfe9ff; } /* jQuery UI Dialog ~~~~~~~~~~~~~~~~~~~~~~ */ #g-panel { display: none; padding: 1em; } #g-panel legend { display: none; } #g-panel fieldset { border: none; } .ui-draggable { cursor: move; } #g-admin-dashboard .ui-state-highlight, #g-sidebar .ui-state-highlight { height: 2em; margin-bottom: 1em; } .g-buttonset-vertical a { width: 8em !important; } #g-admin-dashboard .ui-dialog-titlebar, #g-admin-dashboard-sidebar .ui-dialog-titlebar { padding: .2em .4em; } .ui-widget-overlay { background: #000; opacity: .7; } /* 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; } .ui-icon-rotate-ccw { background-position: -192px -64px; } .ui-icon-rotate-cw { background-position: -208px -64px; } /*************** STUFF THAT NEEDS A HOME ****************/ #g-move ul { padding-left: 1em; } #g-move .selected { background: #999; } .g-progress-bar { height: 1em; width: 100%; margin-top: .5em; display: inline-block; } #g-add-photos p { margin: 0; padding: 0; } #g-add-photos-canvas { height: 325px; width: 450px; overflow: auto; } #g-add-photos-queue .progressbar { height: 4px; } #g-add-photos-queue .title { font-size: 1.25em; } #g-add-photos-queue .status { font-size: .75em; } #g-add-photos-queue .box { margin-bottom: 8px; padding: 4px; } #g-add-photos-queue .pending { background-color: #e8e8e8; border: 1px solid #d7d7d7; } #g-add-photos-queue .error { background-color: #fcc; border: 1px solid #ebb; } #g-add-photos-queue .uploading { background-color: #ff9; border: 1px solid #ee8; } #g-add-photos-queue .complete { background-color: #cfc; border: 1px solid #beb; } #g-admin-g2-import-notes { padding-bottom: 20px; } #g-admin-g2-import-details { padding-top: 20px; } #g-admin-g2-import-details .g-warning { margin-top: 4px; } #g-admin-g2-import-details .g-info { padding: 2px; border: 1px solid #999; margin-bottom: 10px; } #g-admin-g2-import-notes p, #g-admin-g2-import-details .g-info p { padding: 0; margin: 0; } #g-admin-g2-import-notes ul li, #g-admin-g2-import .g-info ul li { padding-left: 0; margin-left: 20px; list-style-type: disc; } #g-tag-admin { table-layout: fixed; } #g-tag-admin td { border: 0; } #g-tag-admin ul { padding-bottom: .3em; } #g-tag-admin li { padding: .1em 0 .2em .3em; } #g-tag-admin .g-column { float: left; width: 200px; } .g-editable { padding: .1em .3em .2em .3em; } .g-editable:hover { background-color: #ffc; cursor: text; } #g-rename-tag-form input { padding: 0 .2em 0 .2em; clear: none; float: left; margin: 0 .2em 0 0; } #g-rename-tag-form input[type="text"].g-error { border: 2px solid red; background: none; } #g-rename-tag-form input[type="submit"] { height: 25px; } #g-rename-tag-form a, #g-rename-tag-form span { display: block; float: left; padding: .2em .2em 0 .1em; } #g-rename-tag-form span { float: right; } #g-task-log-dialog h1 { font-size: 1.1em; } .g-task-log { border: 1pt solid; font-size: .9em; height: 400px; margin: .5em 0; overflow: auto; padding: .5em } #g-server-add-admin { margin:auto; text-align: left; } #g-server-add-admin form fieldset { border: medium none; } #g-server-add-admin legend { display: none; } #g-server-add-admin .g-warning { background-color: #FFFF99; } #g-authorized-path { margin: 0 !important; padding: 0.3em 1.5em 0.3em 1em; } #g-server-add-admin #path { width: 80%; } .g-remove-dir:hover { cursor: pointer; } g-languages-form table { width: 400px; float: left; margin: 0 3em 1em 0; } g-languages-form .installed { background-color: #EEEEEE; } g-languages-form .default { background-color: #C5DBEC; font-weight: bold; } g-languages-form input { clear: both; } #g-translations { padding: 2em 0 0 0; clear: both; } #g-translations .g-button { padding: .5em; } .g-doc-link { float: right; } /** ******************************************************************* * 7) Right to left styles *********************************************************************/ .rtl { direction: rtl; } .rtl caption, .rtl th, .rtl #g-dialog { text-align: right; } .rtl #g-header #g-login-menu, .rtl .g-txt-right { text-align: left; } .rtl .g-right, .rtl #g-header #g-quick-search-form, .rtl #g-header #g-login-menu, .rtl .ui-icon-right .ui-icon { clear: left; float: left; } .rtl .g-left, .rtl form ul ul li, .rtl input[type="submit"], .rtl input[type="reset"], .rtl .g-short-form li, .rtl #g-content #g-album-grid .g-item, .rtl #g-site-admin-menu, .rtl .g-pager li, .rtl .g-buttonset li, .rtl .ui-icon-left .ui-icon, .rtl #g-site-theme, .rtl #g-admin-theme, .rtl .g-selected img, .rtl .g-available .g-block img, .rtl #g-content #g-photo-stream .g-item, .rtl li.g-group, .rtl #g-tag-admin .g-column, .rtl #g-rename-tag-form input, .rtl #g-rename-tag-form a, .rtl #g-server-add-admin, .rtl .ui-icon-left .ui-icon { float: right; } .rtl #g-admin-graphics .g-available .g-block { float: right; margin-left: 1em; margin-right: 0em; }