feature 2587: theme elegant, new version

git-svn-id: http://piwigo.org/svn/trunk@13730 68402e56-0260-453c-a942-63ccdbb3a9ee

1 files changed, 189 insertions, 135 deletions

diff --git a/themes/elegant/theme.css b/themes/elegant/theme.css
index 1997d5dc6..c6b072249 100644
--- a/themes/elegant/theme.css
+++ b/themes/elegant/theme.css
@@ -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;}
 
-#menuswitcher.menuhidden {
-	width:25px;
-	margin-left:0;
-}
+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;}
 
-/* 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;}
+/* font colors */
 
-#content,.content {
-	background-color: #222;
-	border-bottom: 2px solid #444;
-	margin-bottom: 4px;
-	padding-bottom: 4px;
-}
+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;}
 
-#thePicturePage #content {padding-bottom:0;}
 
-.content .titrePage {
-	background-color: #111;
-	border-bottom: 2px solid #444;
-	padding:0;
-	margin-bottom:4px;
-}
+/* borders */
 
-.content .titrePage H2 {
-	line-height: 20px;
-	margin: 0;
-	padding: 8px 0 0 2px;
-}
+#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);}
 
-body { color: #999;}
-a { color: #ccc;}
-a:hover { color: #fff;}
 
+/* 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 {
+#menubar  {
+	display: inline;
+	width: 230px;
 	float: left;
-	margin: 28px 13px 10px 0;
+	margin: 28px 8px 10px 0;
 	padding: 0;
-	display: inline;
-	width: 225px;
 }
+#menubar DT				{ text-align: left;}
+#menubar dd 				{ padding: 0 0 1em 1em;}
+#menubar .pwg-icon-filter { display: none;}
 
-#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;
-}
+/* switchers */
 
-#menubar .pwg-icon-filter {display:none;}
+#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;
+}
 
-/* backgrounds */
+#infoSwitcher.infohidden {
+	width:25px;
+	top:10px;
+	right:0;
+	left:auto;
+	margin:0;
+}
 
+#theImage.infohidden 		{ width: 100%;}
 
-#imageToolBar, #imageHeaderBar, #derivativeSwitchBox, #sortOrderBox, .header_notes {
-	background-color: #505050;
-}
+#commentsSwitcher 					{ float: left; margin:3px 0; cursor:pointer;}
+.noCommentContent #commentsSwitcher	{ display: none;}
 
-#imageHeaderBar H2 {
-	background-image: 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;}
 
-#imageHeaderBar {
-	border-top: 1px solid #000;
-}
 
-/* borders */
-#derivativeSwitchBox, #sortOrderBox {
-	border: 2px solid #444;
-}
+/* switchboxes */
 
-.switchBoxTitle {
-  border-bottom:2px solid #444;
+.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;}
 
-.derivativeSizeDetails {display:none}
 
-FIELDSET, INPUT, SELECT, TEXTAREA {
-	border: 1px solid gray;
-}
+/* thumbnails */
 
+#thumbnails  						{ padding-top: 5px;}
+.thumbnails IMG 						{ margin-bottom: 0; vertical-align: middle;}
+.thumbnailCategory DIV.illustration,
+.commentElement DIV.illustration 		{ margin: 2px; text-align: center;}
 
-.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;}
-
-#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;
+
+.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;}
 
-.pwg-icon {
-	background-image: url(../default/s26/outline_808080.png);
+#theImageAndInfos {
+	display: block;
+	width: 100%;
+	position: relative;
+}
+#theImage {
+	display: inline-block;
+	width: 75%;
+	vertical-align: top;
+	overflow: auto;
+	padding: 10px 0 5px 0;
 }
 
-A:hover .pwg-icon {
-	background-image: url(../default/s26/outline_ffffff.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;
 }
 
-.message {
-  color:white;
-  background-color:#666;
-}
\ No newline at end of file
+#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 						{ 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;}
\ No newline at end of file