Files
Piwigo/admin/template/goto/default-layout.css
T
plegall cbfc601ad8 feature 1491: administration panel header/footer. Graphicaly outside the
administration theme. The header includes the gallery title with a link to
gallery, a theme changer, an explicit "visit gallery" link, a logout link.
The footer includes links to piwigo.org (homepage, documentation, forum) and
the contact webmaster link.

Due to new header/footer, I've removed the "Links" section in the menubar.

The new footer sticks to the bottom of the browser window.

I've slightly "rounded" grum tabs to look like the menubar borders.

Graphical illustration (top left and bottom left leaves) were removed to
improve readability. They make things beautiful on gallery side, they
decrease usability on admin side.

Piwigo logo was removed to save space on administration footer. It would be
nice to have a small logo to place bottom left in the footer next to
"Powered by Piwigo".

Links>Administration link was replaced by a big link box just above the
menubar.

The H2 was outside the #content box, nearly invisible on top right corner.
Now it is 1) easy to read 2) inside #content.

feature 1490: ability to switch from goto/roma to goto/clear with a single
click in administration header.

The global organisation of the page is quite heavily changed. The global
layout is:

body#theAdminPage
body#theAdminPage > #the_page
body#theAdminPage > #the_page > #pwgHead
body#theAdminPage > #the_page > #pwgMain
body#theAdminPage > #the_page > #pwgMain > #menubar
body#theAdminPage > #the_page > #pwgMain > #content
body#theAdminPage > #the_page > #footer

git-svn-id: http://piwigo.org/svn/trunk@5098 68402e56-0260-453c-a942-63ccdbb3a9ee
2010-03-09 23:19:11 +00:00

698 lines
15 KiB
CSS

/* History tables */
TABLE.table2 {
border: 1px solid #111;
margin: 1em auto;
padding: 0;
}
TABLE.table2 TD, TABLE.table2 TH {
padding: 0 5px;
}
TABLE.table2 TR {
text-align: left;
}
TABLE.table2 THEAD TD { padding:7px 10px 3px 10px; }
TABLE.table2 TR.throw { text-align: center; }
TABLE.table2 { margin:0pt auto; }
.sort { display:block; padding:8px 5px 0px 1px; clear: right; text-align:left; }
.hour {
white-space: pre;
}
.number {
text-align: right;
}
TABLE#dailyStats {
width: 60%;
}
TABLE#detailedStats {
width: 99%;
}
/* Plugins tables */
TABLE.plugins { min-width: 400px; }
TABLE.plugins A { border: 0; }
TABLE.plugins TR TD { padding: 4px 10px; }
TABLE.plugins TR TD.pluginState { padding: 4px 16px; }
TABLE.plugins TR TD.active {
background: url(icon/plugin_active.gif) no-repeat center left;
background-color: inherit; /* IE need it */
}
TABLE.plugins TR TD.inactive {
background: url(icon/plugin_inactive.gif) no-repeat center left;
background-color: inherit; /* IE need it */
}
TABLE.plugins ul.pluginsActions {
float: left;
padding: 0;
margin: 0;
width: 60px;
list-style: none;
text-align: center;
}
TABLE.plugins ul.pluginsActions li { display: inline; }
/* categoryOrdering */
SELECT.categoryList {
width: 100%;
}
FORM#categoryOrdering {
padding-left: 1em; /* same as FIELDSET margin (there is no fieldset in this form) */
padding-right: 1em; /* same as FIELDSET margin (there is no fieldset in this form) */
}
FORM#categoryOrdering p {
text-align: left;
margin-top: 1em;
margin-bottom: 1em;
}
UL.categoryUl {
list-style: none;
padding: 0;
margin: 0;
}
LI.categoryLi {
width: 100%;
border: 1px solid #666;
padding: 0px 5px;
margin-bottom: 5px;
}
FORM#categoryOrdering UL.categoryActions {
float: right;
margin-top: 5px;
}
/* */
FORM#catModify TABLE { width: auto; }
FIELDSET.elementEdit A {
display: block;
float: right;
}
TABLE.doubleSelect {
text-align: center;
margin: 0 auto;
width: 100%;
}
TABLE.doubleSelect TD {
padding: 0 3px;
width: 50%;
}
TABLE.doubleSelect SELECT.categoryList {
width: 100%; max-width: 100%; overflow-x: auto;
}
FORM#categoryPermissions LI {
display:inline;
white-space: nowrap;
}
FIELDSET#mainConfCheck SPAN.property,
FIELDSET#historyConf SPAN.property,
FIELDSET#commentsConf SPAN.property,
FIELDSET#uploadConf SPAN.property {
float: right;
text-align: left;
}
FIELDSET#mainConfCheck INPUT,
FIELDSET#historyConf INPUT,
FIELDSET#commentsConf INPUT,
FIELDSET#uploadConf INPUT {
float: none;
}
FIELDSET#mainConf SPAN.property {
width: 25%;
}
FIELDSET#mainConf TEXTAREA.description {
width: 70%;
}
FIELDSET#mainConfCheck SPAN.property,
FIELDSET#historyConf SPAN.property {
width: 90%;
}
FIELDSET#mainConfCheck INPUT,
FIELDSET#historyConf INPUT,
FIELDSET#commentsConf INPUT {
margin-left: 5%;
}
FIELDSET#uploadConf SELECT {
float: right;
margin: 2px 10px 0px;
}
FIELDSET#uploadConf INPUT {
float: right;
margin: 5px 10px 0px;
}
FIELDSET#uploadConf SPAN.property {
width: 65%;
}
FIELDSET#commentsConf SPAN.property {
width: 85%;
}
.statBar {
height: 10px;
background-color: #ff7700;
border: 1px solid #666;
}
.over{
position: relative;
z-index: 0;
}
.over:hover{
background-color: transparent;
z-index: 50;
}
.over SPAN{ /*CSS for enlarged image*/
position: absolute;
background-color: #222;
padding: 5px;
left: -1000px;
border: 1px solid #ff3363;
visibility: hidden;
color: black;
text-decoration: none;
}
.over SPAN IMG{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.over:hover SPAN{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
BODY {
margin: 5px;
padding: 0;
font-size: 0.8em;
font-family: "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
text-align: center; /* be nice to IE5 */
}
H1 {
color:#eee;
letter-spacing:1px;
text-align: left;
font-size: 150%;
font-weight: normal;
font-style:italic;
padding: 8px 0 0 10px;
margin: 0;
float:left;
}
#pwgHead {color:#aaa;}
#pwgHead A {color:#ccc;}
#pwgHead A:hover {color:#fff;border-bottom:1px solid #fff}
#pwgHead A#instructions:hover {border:none;}
#headActions {float:right; height:46px; line-height:46px; margin-right:10px;}
A {
text-decoration:none;
border-bottom: 0;
}
A:hover {
border-bottom: 1px solid #FF3363;
}
A.button, A.button:hover {
border: 0;
}
IMG {
border: none;
}
HR.separation {
visibility: hidden;
clear: both;
}
/** General defaults **/
INPUT, SELECT {
margin: 0;
font-size: 1em; /* <= some browsers don't set it correctly */
}
UL, DL, OL { text-align: left;}
TABLE { /* horizontaly centered */
margin-left: auto;
margin-right: auto;
}
/* for debugging purpose */
PRE { text-align:left; }
/** forms **/
FORM { padding: 0em; }
FORM P {
text-align: center;
margin-top: 2em;
margin-bottom: 2em;
}
FORM FIELDSET P {
margin-top: 1em;
margin-bottom: 0;
}
.small {
font-size: 80%;
}
TEXTAREA.description {
height: 6em;
width: 40em;
overflow: auto;
}
SELECT.categoryList {
height: 20em;
width: auto;
}
DIV.comment BLOCKQUOTE {
padding: 0.5em;
overflow: auto; /* no solution for IE6 */
min-height: 2.75em; /* fix a Gecko bug whith scrollbar and 1 line only */
}
/**
* Filter forms are displayed label by label with the input (or select...)
* below the label. Use an UL to make a group (radiobox for instance).
* Use a SPAN to group objects in line
*/
FIELDSET {
padding: 1em;
margin: 1em;
overflow: hidden; /* <- makes Opera happy */
}
FORM.filter FIELDSET UL {
margin: 0;
}
FORM.filter FIELDSET UL,
FORM.filter FIELDSET LABEL {
display: block;
float: left;
margin-right: 1em;
padding: 0;
}
FORM.filter FIELDSET LI {
list-style: none;
margin-bottom: 0.5em;
}
FORM.filter FIELDSET LI LABEL {
display: inline;
float: none;
}
FORM.filter FIELDSET UL.tagSelection LABEL {
display: inline;
float: none;
margin-right:0.5em;/*reduce from above*/
}
/* cannot use FIELDSET>LABEL because of IE<=6 */
FORM.filter FIELDSET LABEL INPUT,
FORM.filter FIELDSET LABEL SELECT,
FORM.filter FIELDSET LABEL SPAN,
FORM.filter FIELDSET LABEL TEXTAREA {
display: block;
margin: 0.5em 0;
}
FORM.filter FIELDSET * LABEL INPUT,
FORM.filter FIELDSET * LABEL SELECT,
FORM.filter FIELDSET * LABEL TEXTAREA,
FORM.filter FIELDSET LABEL SPAN INPUT,
FORM.filter FIELDSET LABEL SPAN SELECT,
FORM.filter FIELDSET LABEL SPAN TEXTAREA {
display: inline;
vertical-align: top;
margin: 0 0.5em 0 0;
}
FORM.filter FIELDSET UL.tagSelection LI LABEL INPUT {
margin-right:0;
}
/* following declaration is important to avoid strange FF behaviour */
FORM.filter FIELDSET LABEL SPAN SELECT {
margin: 0;
}
FORM.filter FIELDSET P
{
clear: left;
display: block;
}
FORM.filter INPUT[type="submit"] {
margin-top: 1.8em;
}
FORM.properties UL, FORM#update UL {
list-style-type: none;
margin: 0;
padding: 0;
}
FORM.properties LI, FORM#update UL {
margin-bottom: 0.5em;
padding: 0;
line-height: 1.8em;
clear: left;
}
FORM.properties SPAN.property {
font-weight: bold;
float: left;
width: 50%;
text-align: right;
margin: 0;
padding: 0 0.5em 0 0;
}
#theHeader H1 {
margin-bottom: 0.5em;
}
/* button tools */
UL.actions {
text-indent: 0;
list-style: none;
}
UL.actions LI {
display: inline;
}
UL.actions A {
border: none;
}
UL.tagSelection {
width: 99%;
margin: 1em 0 1em 0;
padding: 0;
}
UL.tagSelection LI {
display: inline;
white-space: nowrap;
}
/* jQuery tooltips */
.cluetip-default #cluetip-outer {
position: relative;
border: 1px solid #111111;
color: #dddddd;
background-color: #222222;
text-align: left;
}
.cluetip-default h3#cluetip-title {
margin: 0 0 5px;
padding: 8px;
color: #666666;
background-color: #d3d3d3;
font-size: 1.1em;
font-weight: bold;
}
.cluetip-default #cluetip-inner {
padding: 10px;
}
/* jQuery datepicker */
img.ui-datepicker-trigger {
cursor : pointer;
}
/* jQuery FCBKcomplete */
/* TextboxList sample CSS */
ul.holder { margin: 0; border: 1px solid #999; overflow: hidden; height: auto !important; height: 1%; padding: 4px 5px 0; }
*:first-child+html ul.holder { padding-bottom: 2px; } * html ul.holder { padding-bottom: 2px; } /* ie7 and below */
ul.holder li { float: left; list-style-type: none; margin: 0 5px 4px 0; white-space:nowrap;}
ul.holder li.bit-box, ul.holder li.bit-input input { font: 11px "Lucida Grande", "Verdana"; }
ul.holder li.bit-box { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #CAD8F3; background: #DEE7F8; padding: 1px 5px 2px; }
ul.holder li.bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; }
ul.holder li.bit-input input { width: auto; overflow:visible; margin: 0; border: 0px; outline: 0; padding: 3px 0px 2px; } /* no left/right padding here please */
ul.holder li.bit-input input.smallinput { width: 20px; }
/* Facebook demo CSS */
#add { border: 1px solid #999; width: 550px; margin: 50px; padding: 20px 30px 10px; }
form ol li { list-style-type: none; }
form ol { font: 11px "Lucida Grande", "Verdana"; margin: 0; padding: 0; }
form ol li.input-text { margin-bottom: 10px; list-style-type: none; padding-bottom: 10px; }
form ol li.input-text label { font-weight: bold; cursor: pointer; display: block; font-size: 13px; margin-bottom: 10px; }
form ol li.input-text input { width: 500px; padding: 5px 5px 6px; font: 11px "Lucida Grande", "Verdana"; border: 1px solid #999; }
form ul.holder { width: 500px; }
form ul { margin: 0 !important }
ul.holder li.bit-box, #apple-list ul.holder li.bit-box { padding-right: 15px; position: relative; z-index:1000;}
#apple-list ul.holder li.bit-input { margin: 0; }
#apple-list ul.holder li.bit-input input.smallinput { width: 5px; }
ul.holder li.bit-hover { background: #BBCEF1; border: 1px solid #6D95E0; }
ul.holder li.bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; }
ul.holder li.bit-box a.closebutton { position: absolute; right: 4px; top: 5px; display: block; width: 7px; height: 7px; font-size: 1px; background: url(icon/fcbkcomplete_close.gif); }
ul.holder li.bit-box a.closebutton:hover { background-position: 7px; }
ul.holder li.bit-box-focus a.closebutton, ul.holder li.bit-box-focus a.closebutton:hover { background-position: bottom; }
/* Autocompleter */
.facebook-auto { display: none; position: absolute; width: 512px; background: #eee; }
.facebook-auto .default { padding: 5px 7px; border: 1px solid #ccc; border-width: 0 1px 1px;font-family:"Lucida Grande","Verdana"; font-size:11px; }
.facebook-auto ul { display: none; margin: 0; padding: 0; overflow: auto; position:absolute; z-index:9999}
.facebook-auto ul li { padding: 5px 12px; z-index: 1000; cursor: pointer; margin: 0; list-style-type: none; border: 1px solid #ccc; border-width: 0 1px 1px; font: 11px "Lucida Grande", "Verdana"; background-color: #eee }
.facebook-auto ul li em { font-weight: bold; font-style: normal; background: #ccc; }
.facebook-auto ul li.auto-focus { background: #4173CC; color: #fff; }
.facebook-auto ul li.auto-focus em { background: none; }
.deleted { background-color:#4173CC !important; color:#ffffff !important;}
.hidden { display:none;}
#demo ul.holder li.bit-input input { padding: 2px 0 1px; border: 1px solid #999; }
.ie6fix {height:1px;width:1px; position:absolute;top:0px;left:0px;z-index:1;}
/* Add photos, direct mode */
#uploadBoxes P {
margin:0;
margin-bottom:2px;
padding:0;
}
#batchLink {
text-align:center;
}
.category_selection {
min-height:65px;
margin-top:5px;
}
.category_selection TABLE {
margin:0;
}
.formField {
width:650px;
margin:0 auto 20px auto;
padding:10px;
border: 2px solid #292929;
}
.formFieldTitle {
font-weight:bold;
margin-bottom:10px;
}
.formField P {
margin:0;
}
.formField TH {
text-align:right;
padding-right: 5px;
}
#uploadFormSettings input[type="text"] {
text-align:right;
}
#uploadFormSettings TH {
width:50%;
}
#pwgHead {
background-color:#464646;
height:46px;
}
html, body {height:100%; margin:0; padding:0;}
#the_page {min-height:100%; position:relative; padding:0;margin:0;}
#pwgMain {padding:10px;padding-bottom:60px;}
#footer {
position:absolute;
bottom:0;
width:100%;
height:46px;
background-color:#464646;
color:#aaa;
line-height:46px;
}
#footer A {color:#ccc;}
#footer A:hover {color:#fff;border-bottom:1px solid #fff;}
#adminHome {
text-align:center;
margin-bottom:15px;
line-height:30px;
width:200px;
margin-left:5px;
-moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
}
#adminHome A {display:block; font-size:1.1em; font-weight:bold;}
#adminHome A {border:none;}
#piwigoInfos {float:left; margin-left:10px;}
#pageInfos {float:right; margin-right:10px;}
/* TipTip CSS - Version 1.2 */
#tiptip_holder {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99999;
}
#tiptip_holder.tip_top {
padding-bottom: 5px;
}
#tiptip_holder.tip_bottom {
padding-top: 5px;
}
#tiptip_holder.tip_right {
padding-left: 5px;
}
#tiptip_holder.tip_left {
padding-right: 5px;
}
#tiptip_content {
font-size: 11px;
color: #fff;
text-shadow: 0 0 2px #000;
padding: 4px 8px;
border: 1px solid rgba(255,255,255,0.25);
background-color: rgb(25,25,25);
background-color: rgba(25,25,25,0.92);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
box-shadow: 0 0 3px #555;
-webkit-box-shadow: 0 0 3px #555;
-moz-box-shadow: 0 0 3px #555;
}
#tiptip_arrow, #tiptip_arrow_inner {
position: absolute;
border-color: transparent;
border-style: solid;
border-width: 6px;
height: 0;
width: 0;
}
#tiptip_holder.tip_top #tiptip_arrow {
border-top-color: #fff;
border-top-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_bottom #tiptip_arrow {
border-bottom-color: #fff;
border-bottom-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_right #tiptip_arrow {
border-right-color: #fff;
border-right-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_left #tiptip_arrow {
border-left-color: #fff;
border-left-color: rgba(255,255,255,0.35);
}
#tiptip_holder.tip_top #tiptip_arrow_inner {
margin-top: -7px;
margin-left: -6px;
border-top-color: rgb(25,25,25);
border-top-color: rgba(25,25,25,0.92);
}
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
margin-top: -5px;
margin-left: -6px;
border-bottom-color: rgb(25,25,25);
border-bottom-color: rgba(25,25,25,0.92);
}
#tiptip_holder.tip_right #tiptip_arrow_inner {
margin-top: -6px;
margin-left: -5px;
border-right-color: rgb(25,25,25);
border-right-color: rgba(25,25,25,0.92);
}
#tiptip_holder.tip_left #tiptip_arrow_inner {
margin-top: -6px;
margin-left: -7px;
border-left-color: rgb(25,25,25);
border-left-color: rgba(25,25,25,0.92);
}
/* Webkit Hacks */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#tiptip_content {
padding: 4px 8px 5px 8px;
background-color: rgba(45,45,45,0.88);
}
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
border-bottom-color: rgba(45,45,45,0.88);
}
#tiptip_holder.tip_top #tiptip_arrow_inner {
border-top-color: rgba(20,20,20,0.92);
}
}