1
0
This repository has been archived on 2021-04-26. You can view files and clone it, but cannot push or open issues or pull requests.
gallery3-contrib/3.0/themes/sobriety/css/screen.css
2010-11-27 15:30:48 +01:00

998 lines
16 KiB
CSS

/* Common
----------------------------------------------- */
a, a:visited {
color: #258;
text-decoration: none;
border-bottom: 1px dotted #469;
}
a:hover, a:active {
color: #933;
border-color: #b55;
border-bottom-style: solid;
}
h1 {
padding: 0 0 .5em;
font-size: 1.7em;
font-weight: normal;
color: #543;
border-bottom: 1px solid #ddd;
}
/* Page structure
----------------------------------------------- */
body {
margin: 0;
font-family: "Gill Sans", "Trebuchet MS", Verdana, sans-serif;
font-size: small;
color: #333;
background-color: #ccb;
background-image: url("../images/backgrounds/body-bg.jpg");
background-repeat: repeat-x;
background-position: top;
}
/* ~~~~~ Header ~~~~~ */
div#g-header {
padding: 0.5em 0;
height: 1.5em;
line-height: 1.5em;
background-color: #000;
background-image: url("../images/backgrounds/body-breadcrumbs-bg.gif");
background-repeat: repeat;
background-position: top;
border-bottom: 3px solid #bba;
}
a#g-logo, form#g-quick-search-form, div#g-site-menu {
display: none;
}
#g-header-text{
color: #fff;
font: oblique small-caps bold 1em Georgia,serif;
position: absolute;
left: 15px;
height: 1.5em;
line-height: 1.5em;
}
ul#g-login-menu {
list-style-type: none;
position: absolute;
top: 0;
right: 0;
display: block;
margin: 0;
/*padding: 0.5em;*/
padding: 0;
width: 20em;
width: 2.5em;
height: 2.5em;
background: url('../images/icons/g-login-menu.png') no-repeat center center;
z-index: 2;
}
ul#g-login-menu > li {
display: none;
text-align: right;
padding: 2px 0;
width: 20em;
margin-left: -17.6em ; /* -(20-2.5) */
background-color: #fcfcfc;
color: #000;
}
ul#g-login-menu > li:first-child {
margin-top: 2.4em;
}
ul#g-login-menu > li > a {
margin-right: 0.5em;
}
ul#g-login-menu > li:hover, ul#g-login-menu > li:hover > a {
background-color: #5266f3;
color: #fff;
border-color: #fff; /* a:hover */
}
ul#g-login-menu:hover {
background-color: #5266f3;
}
ul#g-login-menu:hover > li {
display: block;
}
ul.g-breadcrumbs {
margin: 0;
padding: 0;
color: #777;
text-align: center;
}
ul.g-breadcrumbs > li {
display: inline;
padding-left: 0.3em;
}
ul.g-breadcrumbs > li:after {
content: "»";
}
ul.g-breadcrumbs > li.g-active:after {
content: "";
}
ul.g-breadcrumbs > li > a {
margin-right: 0.3em;
color: #888;
border-color: #777;
}
/* ~~~~~ Content ~~~~~ */
div#bd {
padding: 15px;
}
/* ~~~~~ Footer ~~~~~ */
/* TODO */
#g-footer {
clear: both;
margin: 0 15px;
border-top: 1px solid #ddc;
color: #887;
padding: .5em 0 2em 0;
text-align: center;
}
#g-footer #g-credits {
list-style: none;
display: inline;
margin: 0 auto;
padding: 0;
}
#g-footer #g-credits li {
display: inline;
}
/* Albums & Items
----------------------------------------------- */
.g-item,
#g-item .g-paginator li.g-first,
#g-item .g-paginator li.g-text-right {
display: block;
position: relative;
text-align: center;
background: #fff url("../images/backgrounds/thumb.png") no-repeat;
border-radius: 5px;
box-shadow: 3px 3px 0px #b7b7a7;
-webkit-border-radius: 5px;
-webkit-box-shadow: 3px 3px 0px #b7b7a7;
-moz-border-radius: 5px;
-moz-box-shadow: 3px 3px 0px #b7b7a7;
}
.g-item > a,
#g-item .g-paginator li.g-first a,
#g-item .g-paginator li.g-text-right a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
background-position: center;
background-repeat: no-repeat;
border: 0;
vertical-align: middle;
}
.g-item > a {
display: table-cell;
}
#g-item .g-paginator li.g-first a,
#g-item .g-paginator li.g-text-right a {
border-bottom: none;
text-indent: -9999em;
font-size: 1px;
color: #fff;
}
.g-item > h2 {
position: absolute;
left: 15px;
bottom: 8px;
margin: 0;
padding-top: 8px;
background: #fff;
text-align: center;
color:#333;
line-height: 10px;
font-size: 10px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: .1em;
}
.g-item > h2 a {
border: 0;
}
#g-item .g-paginator li.g-text-right {
position: absolute;
top: 0px;
}
/* ~~~~~ Album ~~~~~ */
.g-item {
float:left;
margin:0 10px 10px 0;
}
.g-item.g-album > a {
background-image: url("../images/emblems/g-item_g-album.png");
background-repeat: no-repeat;
}
#g-content > #g-info {
clear:left;
float:left;
width:22%;
margin:0;
line-height:1.4em;
}
#g-content > #g-info h1 {
margin:0 0 .5em;
text-align:left;
text-transform:none;
letter-spacing:0;
}
#g-content > #g-info .g-description {
line-height:1.6em;
margin-bottom:1em;
}
#g-content > #g-album-grid {
float:right;
position:relative;
width:75%;
margin:0 0 15px;
padding:0;
list-style:none;
line-height:1.4em;
}
#g-content > #g-album-grid li.g-item {
}
/*.g-item .g-context-menu,*/
.g-item .g-metadata
{
display: none;
}
.g-item > ul.g-context-menu {
list-style-type: none;
display: none;
position: absolute;
top: 0px;
left: 0px;
font-size: 12px;
width: 32px;
height: 32px;
padding: 2px;
margin: 0;
}
.g-item:hover > ul.g-context-menu {
display: block;
}
.g-item:hover > ul.g-context-menu > li {
display: block;
width: 32px;
height: 32px;
background: url('../images/emblems/g-context-menu.png') no-repeat;
}
.g-item:hover > ul.g-context-menu > li:hover {
background: none;
}
.g-item:hover > ul.g-context-menu > li > a {
display: none;
}
.g-item:hover > ul.g-context-menu > li > ul {
list-style-type: none;
background: url('../images/backgrounds/000000_opacity50.png') 0 0 repeat;
padding: 5px 2px ;
display: none;
position: absolute;
top: 0;
left: 0;
width: 230px;
text-align: left;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
z-index: 2;
}
.g-item:hover > ul.g-context-menu > li:hover > ul {
display: block;
}
.g-item:hover > ul.g-context-menu > li:hover > ul > li {
line-height: 16px;
padding: 0px 0 0px 20px;
}
.g-item:hover > ul.g-context-menu > li:hover > ul > li > a {
color: #fff;
text-decoration: none;
border: none;
display: block;
padding: 4px 0;
}
.g-item:hover > ul.g-context-menu > li:hover > ul > li > a > span {
height: 16px;
width: 16px;
display: block;
position: absolute;
left: 2px;
background-image: url("../images/icons/ui-icons_d8e7f3_256x240.png");
}
.g-item:hover > ul.g-context-menu > li:hover > ul > li:hover > a {
color: #f9bd01;
}
.g-item:hover > ul.g-context-menu > li:hover > ul > li:hover > a > span {
background-image: url("../images/icons/ui-icons_f9bd01_256x240.png");
}
span.ui-icon-pencil { background-position: -64px -112px; }
span.ui-icon-folder-open { background-position: -16px -96px; }
span.ui-icon-star { background-position: -224px -112px; }
span.ui-icon-trash { background-position: -176px -96px; }
span.ui-icon-rotate-ccw { background-position: -192px -64px; }
span.ui-icon-rotate-cw { background-position: -208px -64px; }
span.ui-icon-plus { background-position: -16px -128px; }
span.ui-icon-note { background-position: -64px -96px; }
span.ui-icon-key { background-position: -112px -128px; }
#g-content > .g-paginator {
clear:left;
float:left;
width:22%;
position: relative;
padding: 2em 0 0 0;
margin: 0;
}
#g-content > .g-paginator li {
padding: 0;
margin: 0;
list-style: none;
}
#g-content > .g-paginator .g-info {
position: absolute;
top: 0;
width: 100%;
background:#bba;
text-align: center;
padding:2px 0;
margin:0 0 .5em;
}
#g-content > .g-paginator .g-first,
#g-content > .g-paginator .g-text-right {
width: 45%;
float: left;
}
#g-content > .g-paginator .g-text-right {
float: right;
text-align: right;
}
#g-content > .g-paginator .g-first a + a:before {
content: "« ";
}
#g-content > .g-paginator .g-text-right a:first-child:after {
content: " »";
}
#g-content > .g-paginator .g-first a:first-child,
#g-content > .g-paginator .g-text-right a + a,
#g-content > .g-paginator .ui-state-disabled {
display: none;
}
#g-sidebar {
clear:left;
float:left;
width:22%;
}
#g-sidebar .g-block {
margin-top: 1em;
}
#g-sidebar .g-block h2 {
width: 100%;
background:#bba;
text-align: center;
padding:2px 0;
margin:0 0 .5em;
font-size: 1em;
font-weight: normal;
}
/* ~~~~~ Item ~~~~~ */
#g-item {
position: relative;
}
#g-item #g-photo,
#g-item #g-movie {
text-align: center;
display: inline;
position: relative;
left: 50%;
background: #b7b7a7;
}
#g-item #g-photo a {
border: none;
}
#g-item #g-movie,
#g-item #g-movie a {
display: block;
}
#g-item #g-photo img,
#g-item #g-movie object {
border: 10px solid #fff;
-webkit-box-shadow: 3px 3px 0px #b7b7a7;
-moz-box-shadow: 3px 3px 0px #b7b7a7;
}
#g-item .g-paginator {
position: absolute;
left: 50%;
width: 0px;
height: 0px;
list-style: none;
padding: 0;
margin: 0;
}
#g-item .g-paginator li {
padding: 0;
margin: 0;
display: inline;
}
#g-item .g-paginator li.g-info {
display: block;
position: absolute;
right: 340px; /* 640/2 + 10 + 10 */
top: 230px;
width: 230px;
height: 30px;
padding-top: 10px;
margin-top: 30px;
text-align: right;
font-style: italic;
background-image: url("../images/divider_l.png");
background-position: right top;
background-repeat: no-repeat;
}
#g-item .g-paginator li.g-first a:hover span,
#g-item .g-paginator li.g-text-right a:hover span {
display: block;
position: relative;
height: 22px;
top: 10px;
background-position: center;
background-repeat: no-repeat;
z-index: 2;
}
#g-item .g-paginator li.g-first a:hover span {
background-image: url("../images/photonav_prev.png");
}
#g-item .g-paginator li.g-text-right a:hover span {
background-image: url("../images/photonav_next.png");
}
#g-item .g-context-menu {
display: none;
}
#g-item #g-info {
width: 230px;
position: absolute;
top: 260px; /* (230 + 30) */
left: 50%;
margin-left: 340px; /* (640/2 + 10 + 10) */
}
#g-item #g-info h1 {
text-align: left;
font-size: 1em;
border: none;
padding-top: 10px;
background-image: url("../images/divider_r.png");
background-position: left top;
background-repeat: no-repeat;
}
#g-item .g-block {
display: block;
margin: auto;
}
#g-item .g-block#g-metadata {
text-align: right;
display: block;
width: 300px; /* 230px is not enought: french is verbose */
position: absolute;
right: 50%;
margin-right: 340px; /* (640/2 + 10 + 10) */
top: 300px; /* (230 + 30 + 10 + 30) */
}
#g-item .g-block#g-metadata h2 {
font-size: 1em;
padding-top: 10px;
text-align: right;
font-style: italic;
background-image: url("../images/divider_l.png");
background-position: right top;
background-repeat: no-repeat;
}
#g-item .g-block#g-metadata ul {
list-style: none;
padding: 0;
}
/* Status and validation messages ~~~~ */
.g-message-block {
background-position: .4em .3em;
border: 1px solid #ccc;
padding: 0;
}
#g-action-status {
width: 75%;
float: right;
margin-bottom: 1em;
}
#g-action-status li,
p#g-action-status,
div#g-action-status {
padding: .3em .3em .3em 30px;
}
#g-site-status li {
border-bottom: 1px solid #ccc;
padding: .3em .3em .3em 30px;
}
.g-module-status {
clear: both;
margin-bottom: 1em;
}
.g-message {
background-position: 0 50%;
}
.g-warning {
background: #fcf9ce url('../images/icons/ico-warning.png') no-repeat .4em 50%;
}
/* ~~~~~ Dialog ~~~~~ */
.ui-widget-overlay {
background: #000;
opacity: .8;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.ui-dialog {
background: url("../images/backgrounds/f0f0f0_opacity80.png");
position: fixed !important;
padding: 0;
}
.ui-dialog-titlebar {
display: none;
}
#g-dialog {
padding: 0 2em 0 15px;
margin: 0;
}
#g-dialog form, #g-dialog div#g-edit-permissions-form {
padding: 0 0 0 63px; /* 48 + 15 */
margin: 0;
background-repeat: no-repeat;
background-position: 0px 3em;
}
#g-dialog form#g-add-album-form {
background-image: url("../images/icons/g-add-album-form.png");
}
#g-dialog form#g-edit-album-form {
background-image: url("../images/icons/g-edit-album-form.png");
}
#g-dialog form#g-add-photos-form {
background-image: url("../images/icons/g-add-photos-form.png");
}
#g-dialog form#g-confirm-delete {
background-image: url("../images/icons/g-confirm-delete.png");
}
#g-dialog div#g-edit-permissions-form {
background-image: url("../images/icons/g-edit-permissions-form.png");
}
#g-dialog form fieldset,
#g-dialog div#g-edit-permissions-form fieldset {
border: none;
padding: 0;
margin: 0;
}
#g-dialog form fieldset legend,
#g-dialog div#g-edit-permissions-form fieldset legend {
font-size: 1em;
font-weight: bold;
/*text-align: center;*/
display: block;
padding: 1em 0 1em 0;
/*margin: auto;*/
}
#g-dialog form fieldset ul,
#g-dialog div#g-edit-permissions-form fieldset ul {
list-style: none;
margin: 0;
padding: 0;
}
#g-dialog form fieldset ul li,
#g-dialog div#g-edit-permissions-form fieldset ul li {
padding-bottom: 0.8em;
}
/*#g-dialog form fieldset ul li label {
padding-bottom: 0.5em;
}*/
#g-dialog input.textbox,
#g-dialog input[type=text],
#g-dialog input[type=password],
#g-dialog textarea {
/*border: 1px solid #000;*/
width: 100%;
padding: 0;
margin: 0;
}
#g-dialog textarea {
height: 8em;
}
#g-dialog input[type=submit].submit {
float: right;
}
#g-dialog a.g-cancel {
float: right;
-moz-appearance: button;
-webkit-appearance: push-button;
/*clear: left;*/
}
#g-add-photos-canvas-sd {
height: 33px;
/*margin-right: 63px;*/
position: relative;
}
#g-add-photos-button-sd {
z-index: 1;
display: block;
position: relative;
width: 150px;
height: 20px;
top: 6px;
padding: 0;
margin: auto;
}
#g-add-photos-canvas-sd object {
margin: 0;
z-index: 100;
position: relative;
display: block;
margin: auto;
top: -20px;
/*top: 0;
left: 50%;
padding-right: 75px;*/
/*position: relative;display: none;*/
}
.uploadifyQueue {
display: none;
}
#g-add-photos-progress {
margin-top: 1em;
}
#g-add-photos-progress li {
padding: 0;
}
#g-add-photos-progress-text {
font-size: 1.2em;
}
#g-add-photos-progressbar-frame {
width: 100%;
padding: 0 !important;
border: 1px solid #aaa;
}
#g-add-photos-progressbar {
display: block;
height: 22px;
width: 0%;
background-image: url("../images/backgrounds/pbar-ani.gif");
background-repeat: repeat-x;
}
#g-add-photos-progressbar.stop {
background-image: url("../images/backgrounds/pbar-ani-stop.gif");
}
#g-dialog div#g-edit-permissions-form table {
width: 100%;
border: none;
padding: 0;
margin: 0;
border-spacing: 0px;
border-collapse: collapse;
}
#g-dialog div#g-edit-permissions-form table a {
border: none;
}
#g-dialog div#g-edit-permissions-form tbody tr {
border-bottom: 1px solid #aaa;
}
#g-dialog div#g-edit-permissions-form thead th {
font-weight: normal;
}
#g-dialog div#g-edit-permissions-form tbody th {
text-align: left;
}
#g-dialog div#g-edit-permissions-form td {
width: 65px;
}
/*#g-dialog input[type=submit].submit {
float: right;
}
#g-dialog a.g-cancel {
float: left;
clear: left;
}*/
/* Forms in dialogs and panels ~~~~~~~~~ */
/*#g-dialog ul li {
padding-bottom: .8em;
}
input[readonly] {
background-color: #F4F4FC;
}
#g-dialog input.textbox,
#g-dialog input[type=text],
#g-dialog input[type=password],
#g-dialog textarea {
width: 97%;
}*/
/* Short forms ~~~~~~~~~~~~~~~~~~~~~~~ */
/*.g-short-form legend,
.g-short-form label {
display: none;
}
.g-short-form fieldset {
border: none;
padding: 0;
}
.g-short-form li {
float: left;
margin: 0 !important;
padding: .4em 0;
}
.g-short-form .textbox,
.g-short-form input[type=text] {
color: #666;
padding: .3em .6em;
width: 100%;
}
.g-short-form .textbox.g-error {
border: 1px solid #f00;
color: #f00;
padding-left: 24px;
}
.g-short-form .g-cancel {
display: block;
margin: .3em .8em;
}
#g-sidebar .g-short-form li {
padding-left: 0;
padding-right: 0;
}*/
/* Dialogs and panels ~~~~~~~~~~~~~~~~~~ */
/*#g-dialog {
text-align: left;
}
#g-dialog .g-cancel {
margin: .4em 1em;
}
#g-panel {
display: none;
padding: 1em;
}*/
/* Inline layout ~~~~~~~~~~ */
/*.g-inline li {
float: left;
margin-left: 1.8em;
padding-left: 0 !important;
}
.g-inline li.g-first {
margin-left: 0;
}*/