2bfff619f2
Icons are coming from screenshots of entypo and typicons fonts. The Entypo and Typicons pictograms are licensed under CC BY 3.0. git-svn-id: http://piwigo.org/svn/trunk@20541 68402e56-0260-453c-a942-63ccdbb3a9ee
277 lines
8.5 KiB
CSS
277 lines
8.5 KiB
CSS
/* backgrounds */
|
|
|
|
html, body { background-color: #111;}
|
|
|
|
#content, .content { background-color: #222;}
|
|
.content .titrePage { background-color: #111;}
|
|
|
|
#menubar, #the_page #menuSwitcher.menuhidden { background-color: #222;}
|
|
|
|
#thePicturePage, #imageHeaderBar { background-color: #111;}
|
|
#imageInfos, #infoSwitcher.infohidden { background-color: #333;}
|
|
#thePicturePage #comments { background-color: #333;}
|
|
#pictureCommentList li { background-color: #444;}
|
|
|
|
.calendarTitle { background-color: #222;}
|
|
|
|
.switchBox, .header_notes { background-color: #555;}
|
|
.thumbnailCategory , .commentElement { background-color: #333;}
|
|
.message { background-color: #666;}
|
|
|
|
INPUT[type="text"], INPUT[type="password"],
|
|
INPUT[type="button"], INPUT[type="submit"],
|
|
INPUT[type="reset"], INPUT[type="file"],
|
|
SELECT, TEXTAREA { background-color: #555;}
|
|
INPUT:focus, SELECT:focus, TEXTAREA:focus { background-color: #666;}
|
|
|
|
|
|
/* font colors */
|
|
|
|
body, legend { color: #aaa;}
|
|
a { color: #ccc;}
|
|
a:hover { color: #fff;}
|
|
INPUT.rateButton { color: #fff;}
|
|
H1, H3, INPUT.rateButtonSelected { color: #ccc;}
|
|
.message { color: #fff;}
|
|
.commentContent .comments_toggle:hover { color: #fff;}
|
|
INPUT[type="text"], INPUT[type="password"],
|
|
INPUT[type="button"], INPUT[type="submit"],
|
|
INPUT[type="reset"], INPUT[type="file"],
|
|
SELECT, TEXTAREA { color: #ccc;}
|
|
INPUT:focus, SELECT:focus, TEXTAREA:focus { color: #fff;}
|
|
|
|
|
|
/* borders */
|
|
|
|
#content,.content, .content .titrePage { border-bottom: 2px solid #444;}
|
|
#imageHeaderBar { border: solid 0 #444; border-bottom-width:2px;}
|
|
#copyright { border-top-width:2px;}
|
|
#content .calendarTitleBar { border-bottom: none;}
|
|
.calendarTitle { border-top: 2px solid #444;}
|
|
.switchBox { border: 1px solid #000;}
|
|
.switchBoxTitle { border-bottom: 1px solid #444;}
|
|
INPUT, SELECT, TEXTAREA { border: 1px solid #666;}
|
|
FIELDSET {border: 2px solid #444;}
|
|
|
|
/* form */
|
|
legend {font-style:normal;}
|
|
#qsearchInput {margin-left:-20px}
|
|
|
|
/* icons */
|
|
|
|
.pwg-icon { background-image: url(icon/icons_sprite.png);}
|
|
A:hover .pwg-icon { background-image: url(icon/icons_sprite-hover.png);}
|
|
|
|
|
|
/* general rules */
|
|
|
|
body { margin: 5px 0;}
|
|
a:hover { border-bottom: none;}
|
|
#copyright { padding:0 4px 0 0; text-align:right;}
|
|
|
|
|
|
/* content */
|
|
|
|
#the_page #content.menushown, #the_page > .content.menushown, .contentWithMenu { margin-left: 240px;}
|
|
#the_page #content.menuhidden, #the_page > .content.menuhidden { margin-left: 35px;}
|
|
#the_page #content, #the_page > .content { margin-right: 0;}
|
|
|
|
#content,.content { margin-bottom: 4px; padding-bottom: 4px;}
|
|
#thePicturePage #content { padding-bottom: 0;}
|
|
.content .titrePage { padding:0; margin-bottom:4px;}
|
|
.content .titrePage H2 { line-height: 20px; margin: 0; padding: 8px 0 0 2px;}
|
|
|
|
|
|
/* menubar */
|
|
|
|
#menubar {
|
|
display: inline;
|
|
width: 230px;
|
|
float: left;
|
|
margin: 28px 8px 10px 0;
|
|
padding: 0;
|
|
}
|
|
#menubar DT { text-align: left;}
|
|
#menubar dd { padding: 0 0 1em 1em;}
|
|
#menubar .pwg-icon-filter { display: none;}
|
|
|
|
#quickconnect FIELDSET {
|
|
margin: 0 10px 0 -10px;
|
|
border: 2px solid #444444;
|
|
}
|
|
|
|
/* switchers */
|
|
|
|
#menuSwitcher {
|
|
display: block;
|
|
text-align: center;
|
|
height: 32px;
|
|
cursor: pointer;
|
|
float: left;
|
|
margin: 28px 0 0 -34px;
|
|
}
|
|
|
|
|
|
#imageInfos, #infoSwitcher.infohidden { border-radius: 10px 0 0 10px;}
|
|
#menubar, #the_page #menuSwitcher.menuhidden { border-radius: 0 10px 10px 0;}
|
|
#the_page #menuSwitcher.menuhidden { width: 25px; margin-left: 0;}
|
|
|
|
#infoSwitcher {
|
|
display: block;
|
|
text-align: center;
|
|
height: 32px;
|
|
cursor: pointer;
|
|
position:absolute;
|
|
left:75%;
|
|
top:0;
|
|
margin: 10px 0 0 7px;
|
|
z-index:99;
|
|
}
|
|
|
|
#infoSwitcher.infohidden {
|
|
width:25px;
|
|
top:10px;
|
|
right:0;
|
|
left:auto;
|
|
margin:0;
|
|
}
|
|
|
|
#slideshow #theImage { width: 100%; margin: auto; overflow: visible;}
|
|
#theImage.infohidden { width: 100%;}
|
|
|
|
#commentsSwitcher { float: left; margin: 2px 0; cursor:pointer;}
|
|
.noCommentContent #commentsSwitcher { display: none;}
|
|
|
|
.switchArrow { width: 16px; height: 16px; margin: 8px 5px 8px 4px;}
|
|
.switchArrow { background: transparent url("icon/arrows_ccc.png");}
|
|
.switchArrow:hover { background: transparent url("icon/arrows_fff.png");}
|
|
.menuhidden .switchArrow { background-position: 0 0;}
|
|
.menushown .switchArrow { background-position: -16px 0;}
|
|
.infohidden .switchArrow { background-position: -16px 0;}
|
|
.infoshown .switchArrow { background-position: 0 0;}
|
|
.commentshidden .switchArrow { background-position: -48px 0;}
|
|
.commentsshown .switchArrow { background-position: -32px 0;}
|
|
|
|
|
|
/* switchboxes */
|
|
|
|
.switchBox {
|
|
border-radius: 4px 4px 4px 4px;
|
|
padding: 0.5em 10px;
|
|
text-align: left;
|
|
z-index: 100;
|
|
}
|
|
.derivativeSizeDetails { display: none;}
|
|
|
|
/* thumbnails */
|
|
|
|
#thumbnails { padding-top: 5px;}
|
|
.thumbnailCategory .illustration,
|
|
.commentElement .illustration { margin: 2px; text-align: center;}
|
|
|
|
|
|
/* picture page */
|
|
|
|
.contentWithMenu #imageHeaderBar { padding: 0;}
|
|
#imageHeaderBar { padding: 0 0 0 10px;}
|
|
#imageHeaderBar { width: auto;}
|
|
#imageHeaderBar h2 { font-size: 100%; font-weight: inherit;}
|
|
#imageHeaderBar .browsePath {
|
|
display:inline-block;
|
|
float:left;
|
|
font-size:120%;
|
|
line-height:20px;
|
|
padding: 8px 0 0 2px;
|
|
font-weight:bold;
|
|
margin:0;
|
|
}
|
|
#imageToolBar .imageNumber { display: inline-block; float: right; line-height: 26px; margin: 0 2px 0 0; min-width: 40px; text-align: center;}
|
|
#imageToolBar { margin-top: -28px; margin-bottom: 0; float: right;}
|
|
#thePicturePage .pwg-button { width: 26px;}
|
|
#thePicturePage .actionButtons { margin-right: 26px;}
|
|
|
|
#theImageAndInfos {
|
|
display: block;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
#theImage {
|
|
display: inline-block;
|
|
width: 75%;
|
|
vertical-align: top;
|
|
overflow: auto;
|
|
padding: 10px 0 5px 0;
|
|
}
|
|
|
|
.rateButtonStarFull { background: url('icon/rating-stars.png') no-repeat -16px center; width:16px;}
|
|
.rateButtonStarEmpty { background: url('icon/rating-stars.png') no-repeat 0 center; width:16px;}
|
|
|
|
|
|
/* image infos */
|
|
|
|
#imageInfos {
|
|
display: inline-block;
|
|
width: 24.5%;
|
|
vertical-align: top;
|
|
padding-top: 35px;
|
|
padding-bottom: 5px;
|
|
margin: 10px 0 10px 0.5%;
|
|
word-wrap:break-word;
|
|
}
|
|
|
|
#imageInfos .navThumbs { width: 250px; height: 130px; margin: auto; padding: 0 5px;}
|
|
#imageInfos .navThumb { position: relative; width: 120px; height: 120px; margin: 0; overflow: hidden;}
|
|
#imageInfos #linkPrev { float: left;}
|
|
#imageInfos #linkNext { float: right;}
|
|
#imageInfos .thumbHover { position: absolute; width: 100%; height: 100%;}
|
|
#imageInfos .prevThumbHover { background: transparent url(icon/none.png) no-repeat center center;}
|
|
#imageInfos .prevThumbHover:hover { background: transparent url(icon/img_prev.png) no-repeat center center;}
|
|
#imageInfos .nextThumbHover { background: transparent url(icon/none.png) no-repeat center center;}
|
|
#imageInfos .nextThumbHover:hover { background: transparent url(icon/img_next.png) no-repeat center center;}
|
|
|
|
#imageInfos dl.imageInfoTable { display: block; padding: 0 15px; margin: 12px auto;}
|
|
#imageInfos .imageInfo { display: block; line-height: 16px;}
|
|
#imageInfos .imageInfo dt { display: block; font-weight: bold; text-align: left; padding: 0;}
|
|
#imageInfos .imageInfo dd { display: block; text-align: left; margin: 0 0 5px 20px;}
|
|
#imageInfos h3 { margin: 20px 0 10px;}
|
|
|
|
|
|
/* image comments */
|
|
|
|
#thePicturePage #comments { padding: 2px 5px;}
|
|
#thePicturePage #comments h3 { margin: 10px 0;}
|
|
#thePicturePage #comments form { margin: 10px 0;}
|
|
#thePicturePage #comments fieldset { margin: 0 1em;}
|
|
|
|
.commentshidden #pictureComments { display: none;}
|
|
.commentContent .comments_toggle { cursor: pointer;}
|
|
|
|
#commentAdd, #pictureCommentList { width: 48%; padding: 0 1%;}
|
|
#commentAdd { float: left; }
|
|
#pictureCommentList { float: right; }
|
|
|
|
#commentAdd input[type="text"],
|
|
#commentAdd textarea {
|
|
width: 95%;
|
|
font-family: Arial,Helvetica,sans-serif;
|
|
font-size: 100%;
|
|
}
|
|
|
|
#pictureCommentList .commentsOrder { float: left; margin-bottom: 5px;}
|
|
#pictureCommentList .navigationBar { float: right; margin-bottom: 5px;}
|
|
#pictureComments h4 { margin: 0;}
|
|
#pictureComments form p { margin: 5px 0;}
|
|
#pictureComments form p textarea { margin: 10px 0;}
|
|
#pictureComments INPUT { margin: 10px;}
|
|
#pictureComments INPUT[type=submit] { margin: 0;}
|
|
.commentElement .description { padding: 5px;}
|
|
|
|
|
|
/* calendar */
|
|
|
|
.calendarViews { margin-top: 4px;}
|
|
|
|
/* plugins */
|
|
|
|
#the_page .content .stuffs { margin: 0!important}
|
|
.categoryActions .theme_menuf { display: none;}
|