mirror of
https://github.com/Piwigo/piwigo-elegant.git
synced 2026-08-06 17:02:45 +02:00
feature 2587: theme elegant, new version
git-svn-id: http://piwigo.org/svn/trunk@13730 68402e56-0260-453c-a942-63ccdbb3a9ee
This commit is contained in:
Zaphod
@@ -1,183 +1,237 @@
|
||||
/* colors & backgrounds */
|
||||
/* backgorunds */
|
||||
|
||||
html, body {background-color:#111;}
|
||||
html, body { background-color: #111;}
|
||||
|
||||
body {margin: 5px 0;}
|
||||
#content, .content { background-color: #222;}
|
||||
.content .titrePage { background-color: #111;}
|
||||
|
||||
a:hover {border-bottom:none;}
|
||||
#menubar, #the_page #menuSwitcher.menuhidden { background-color: #222;}
|
||||
|
||||
#menuswitcher {
|
||||
display:block;
|
||||
font-size:200%;
|
||||
text-align:center;
|
||||
float:left;
|
||||
height:33px;
|
||||
cursor:pointer;
|
||||
margin: 28px 0 0 -35px;
|
||||
}
|
||||
#thePicturePage, #imageHeaderBar { background-color: #111;}
|
||||
#imageInfos, #infoSwitcher.infohidden { background-color: #333;}
|
||||
#thePicturePage #comments { background-color: #333;}
|
||||
|
||||
#menubar,
|
||||
#menuswitcher.menuhidden {
|
||||
border-radius : 0 10px 10px 0;
|
||||
background-color: #222;
|
||||
border: solid 1px #333;
|
||||
border-width: 2px 2px 2px 0;
|
||||
}
|
||||
.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"] { background-color: #999;}
|
||||
INPUT:focus, SELECT:focus, TEXTAREA:focus { background-color: #ccc;}
|
||||
|
||||
|
||||
/* 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;}
|
||||
|
||||
|
||||
/* borders */
|
||||
|
||||
#content,.content, .content .titrePage { border-bottom: 2px solid #444;}
|
||||
#imageHeaderBar { border: solid 0 #444; border-bottom-width:2px;}
|
||||
#copyright { border-top-width:2px;}
|
||||
.switchBox { border: 1px solid #000;}
|
||||
.switchBoxTitle { border-bottom: 1px solid #444;}
|
||||
FIELDSET, INPUT, SELECT, TEXTAREA { border: 1px solid #999;}
|
||||
|
||||
|
||||
/* icons */
|
||||
|
||||
.pwg-icon { background-image: url(../default/s26/outline_808080.png);}
|
||||
A:hover .pwg-icon { background-image: url(../default/s26/outline_ffffff.png);}
|
||||
|
||||
|
||||
/* general rules */
|
||||
|
||||
body { margin: 5px 0;}
|
||||
a:hover { border-bottom: none;}
|
||||
#copyright { padding:0 4px 0 0; text-align:right;}
|
||||
|
||||
#menuswitcher.menuhidden {
|
||||
width:25px;
|
||||
margin-left:0;
|
||||
}
|
||||
|
||||
/* content */
|
||||
|
||||
#content.menushown, #the_page > .content.menushown { margin-left:240px;}
|
||||
#content.menuhidden, #the_page > .content.menuhidden { margin-left:35px;}
|
||||
#content, #the_page > .content { margin-right:0;}
|
||||
|
||||
#content,.content {
|
||||
background-color: #222;
|
||||
border-bottom: 2px solid #444;
|
||||
margin-bottom: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
#thePicturePage #content {padding-bottom:0;}
|
||||
|
||||
.content .titrePage {
|
||||
background-color: #111;
|
||||
border-bottom: 2px solid #444;
|
||||
padding:0;
|
||||
margin-bottom:4px;
|
||||
}
|
||||
|
||||
.content .titrePage H2 {
|
||||
line-height: 20px;
|
||||
margin: 0;
|
||||
padding: 8px 0 0 2px;
|
||||
}
|
||||
|
||||
|
||||
body { color: #999;}
|
||||
a { color: #ccc;}
|
||||
a:hover { color: #fff;}
|
||||
#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 {
|
||||
float: left;
|
||||
margin: 28px 13px 10px 0;
|
||||
padding: 0;
|
||||
#menubar {
|
||||
display: inline;
|
||||
width: 225px;
|
||||
width: 230px;
|
||||
float: left;
|
||||
margin: 28px 8px 10px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#menubar DT { color: #999; text-align:left;}
|
||||
#menubar DT a { color: #ccc;}
|
||||
#menubar DT a:hover { color: #fff;}
|
||||
#menubar dd { padding: 0 0 1em 1em;}
|
||||
|
||||
/* text color */
|
||||
BODY, H1, H3,
|
||||
INPUT.rateButtonSelected /* <= why IE doesn't inherit this ? */ {
|
||||
color:#d0d0d0;
|
||||
}
|
||||
|
||||
#menubar .pwg-icon-filter {display:none;}
|
||||
#menubar DT { text-align: left;}
|
||||
#menubar dd { padding: 0 0 1em 1em;}
|
||||
#menubar .pwg-icon-filter { display: none;}
|
||||
|
||||
|
||||
/* switchers */
|
||||
|
||||
|
||||
/* backgrounds */
|
||||
|
||||
|
||||
#imageToolBar, #imageHeaderBar, #derivativeSwitchBox, #sortOrderBox, .header_notes {
|
||||
background-color: #505050;
|
||||
}
|
||||
|
||||
#imageHeaderBar H2 {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
#imageHeaderBar {
|
||||
border-top: 1px solid #000;
|
||||
}
|
||||
|
||||
/* borders */
|
||||
#derivativeSwitchBox, #sortOrderBox {
|
||||
border: 2px solid #444;
|
||||
}
|
||||
|
||||
.switchBoxTitle {
|
||||
border-bottom:2px solid #444;
|
||||
}
|
||||
|
||||
.derivativeSizeDetails {display:none}
|
||||
|
||||
FIELDSET, INPUT, SELECT, TEXTAREA {
|
||||
border: 1px solid gray;
|
||||
#menuSwitcher {
|
||||
display: block;
|
||||
text-align: center;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
margin: 28px 0 0 -34px;
|
||||
}
|
||||
|
||||
|
||||
.thumbnails IMG {margin-bottom:0; vertical-align:middle;}
|
||||
.thumbnailCategory DIV.illustration, .commentElement DIV.illustration {margin: 2px; text-align:center;}
|
||||
#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;
|
||||
}
|
||||
|
||||
#theImage.infohidden { width: 100%;}
|
||||
|
||||
#commentsSwitcher { float: left; margin:3px 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;
|
||||
}
|
||||
.switchBox .switchCheck { width: 18px; text-align: left; display: inline-block; line-height:17px;}
|
||||
.switchBox .switchUnselected { margin-left: 18px; line-height:17px;}
|
||||
|
||||
|
||||
/* thumbnails */
|
||||
|
||||
#thumbnails { padding-top: 5px;}
|
||||
.thumbnails IMG { margin-bottom: 0; vertical-align: middle;}
|
||||
.thumbnailCategory DIV.illustration,
|
||||
.commentElement DIV.illustration { margin: 2px; text-align: center;}
|
||||
|
||||
|
||||
/* picture page */
|
||||
#thePicturePage {background-color:#111;}
|
||||
#imageHeaderBar { border: solid 0 #444; padding:0 0 0 10px;}
|
||||
.contentWithMenu #imageHeaderBar {padding:0;}
|
||||
#copyright {border-top-width:2px;}
|
||||
#imageHeaderBar {border-bottom-width:2px; width:auto; background:#111}
|
||||
#imageToolBar {background:none;}
|
||||
#imageToolBar {margin-top: -28px; margin-bottom:0;}
|
||||
#theImage {padding-top:10px;}
|
||||
#imageHeaderBar .browsePath {display:inline-block; float:none; font-size:120%; line-height:20px; padding: 8px 0 0 2px; font-weight:bold; margin:0;}
|
||||
#imageHeaderBar .imageNumber {display:inline-block; float:none; line-height:20px; padding: 8px 0 0 12px; font-weight:bold; margin:0;}
|
||||
#imageHeaderBar .imageNumber:before {content:'['}
|
||||
#imageHeaderBar .imageNumber:after {content:']'}
|
||||
#imageHeaderBar h2 {font-size:100%;}
|
||||
#thePicturePage .pwg-button {width:26px;}
|
||||
#thePicturePage .actionButtons {margin-right: 26px;}
|
||||
#imageToolBar {float:right;}
|
||||
|
||||
#thePicturePage #comments {padding-top:12px; padding-bottom:12px;}
|
||||
#thePicturePage #comments h3 {margin-top:10px; margin-bottom:10px;}
|
||||
#thePicturePage #comments form { margin-bottom:10px;}
|
||||
#thePicturePage #comments fieldset{margin-top: 0; margin-bottom:0;}
|
||||
.noCommentText {display:block;}
|
||||
#copyright {padding:4px 4px 0 0; text-align:right;}
|
||||
.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:none;
|
||||
font-size:120%;
|
||||
line-height:20px;
|
||||
padding: 8px 0 0 2px;
|
||||
font-weight:bold;
|
||||
margin:0;
|
||||
}
|
||||
.imageNumber { display: inline-block; float: right; line-height: 26px; margin-right: 2px; 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;}
|
||||
|
||||
#thePicturePage .comments_toggle_on:before {content:'(+) '}
|
||||
#thePicturePage .comments_toggle_off:before {content:'(-) '}
|
||||
|
||||
.comments_hidden ul, .comments_hidden form {display:none;}
|
||||
.thumbnailCategory, .commentElement {background-color: #333;}
|
||||
.comments_toggle {cursor: pointer;}
|
||||
.comments_toggle:hover {color:#fff;}
|
||||
|
||||
#the_page .content .stuffs {margin:0!important}
|
||||
|
||||
#thumbnails {padding-top: 5px;}
|
||||
|
||||
INPUT[type="text"], INPUT[type="password"], INPUT[type="button"], INPUT[type="submit"], INPUT[type="reset"], INPUT[type="file"] {background-color:#999;}
|
||||
INPUT:focus, SELECT:focus, TEXTAREA:focus {background-color:#ccc;}
|
||||
|
||||
/* links */
|
||||
INPUT.rateButton {
|
||||
color: #fff;
|
||||
#theImageAndInfos {
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
#theImage {
|
||||
display: inline-block;
|
||||
width: 75%;
|
||||
vertical-align: top;
|
||||
overflow: auto;
|
||||
padding: 10px 0 5px 0;
|
||||
}
|
||||
|
||||
.pwg-icon {
|
||||
background-image: url(../default/s26/outline_808080.png);
|
||||
.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;
|
||||
}
|
||||
|
||||
A:hover .pwg-icon {
|
||||
background-image: url(../default/s26/outline_ffffff.png);
|
||||
}
|
||||
#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;}
|
||||
|
||||
.message {
|
||||
color:white;
|
||||
background-color:#666;
|
||||
}
|
||||
#imageInfos dl { padding: 0 15px;}
|
||||
#imageInfos dt { font-weight: bold;}
|
||||
#imageInfos dd { 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-bottom: 10px;}
|
||||
#thePicturePage #comments fieldset { margin: 0 1em;}
|
||||
|
||||
.noCommentText { display:block;}
|
||||
.commentshidden ul,
|
||||
.commentshidden form {display:none;}
|
||||
.commentContent .comments_toggle {cursor: pointer;}
|
||||
|
||||
|
||||
/* plugins */
|
||||
|
||||
#the_page .content .stuffs { margin: 0!important}
|
||||
.categoryActions .theme_menuf { display: none;}
|
||||
Reference in New Issue
Block a user