X-Git-Url: http://git.nikiroo.be/?a=blobdiff_plain;f=src%2Fbe%2Fnikiroo%2Ffanfix%2Flibrary%2Fweb%2Fstyle.css;h=5a4c51ff9d150109e261ec7e55be23f11367fc04;hb=HEAD;hp=3e59952f722096151bd2d684d34a709fe48f4b50;hpb=6b89e45caaa566895d505b56c9ef272dd67f1d76;p=fanfix.git

diff --git a/src/be/nikiroo/fanfix/library/web/style.css b/src/be/nikiroo/fanfix/library/web/style.css
index 3e59952..5a4c51f 100644
--- a/src/be/nikiroo/fanfix/library/web/style.css
+++ b/src/be/nikiroo/fanfix/library/web/style.css
@@ -47,13 +47,9 @@ html, body, .main {
 	margin: 10px;
 }
 
-.error {
+.message.error {
 	background-color: #ffdddd;
 	border: 1px solid #dd8888;
-	clear: left;
-	border-radius: 5px;
-	padding: 5px;
-	margin: 10px;
 }
 
 /* all links and clickable should show a pointer cursor */
@@ -127,7 +123,7 @@ h3 {
 	width: 250px;
 	display: flex;
 	margin: auto;
-	margin-top: calc(50% - 320px);
+	margin-top: 100px;
 	flex-direction: column;
 	border: 1px solid #AAA391;
 	padding: 20px;
@@ -231,6 +227,7 @@ h3 {
 
 .bar.optionbar.s1 { padding-left: calc(50% - (1 * (64px + 5px) / 2)); }
 .bar.optionbar.s4 { padding-left: calc(50% - (4 * (64px + 5px) / 2)); }
+.bar.optionbar.s5 { padding-left: calc(50% - (5 * (64px + 5px) / 2)); }
 
 .bar.optionbar {
 	bottom: 0;
@@ -262,10 +259,11 @@ h3 {
 .bar .button.next     { color: transparent; background-image: url('/arrow_right-32x32.png');        }
 .bar .button.last     { color: transparent; background-image: url('/arrow_double_right-32x32.png'); }
 
-.bar .button.back       { color: transparent; background-image: url('/back-32x32.png');          }
-.bar .button.zoomreal   { color: transparent; background-image: url('/actual_size-32x32.png');   }
-.bar .button.zoomwidth  { color: transparent; background-image: url('/fit_to_width-32x32.png');  }
-.bar .button.zoomheight { color: transparent; background-image: url('/fit_to_height-32x32.png'); }
+.bar .button.back             { color: transparent; background-image: url('/back-32x32.png');                 }
+.bar .button.zoomreal         { color: transparent; background-image: url('/actual_size-32x32.png');          }
+.bar .button.zoomwidth        { color: transparent; background-image: url('/fit_to_width-32x32.png');         }
+.bar .button.zoomwidthlimited { color: transparent; background-image: url('/fit_to_width_limited-32x32.png'); }
+.bar .button.zoomheight       { color: transparent; background-image: url('/fit_to_height-32x32.png');        }
 
 .viewer {
 	padding-top: 64px;
@@ -295,32 +293,45 @@ a.viewer.link:hover {
 
 .desc {
 	display: flex;
+	flex-direction: column;
 	padding-top: 10px;
 }
 
-.desc .cover img {
-	width: 100px;
-	padding-right: 10px;
+.desc .cover {
 	max-height: 280px;
+	overflow: hidden;
 }
 
-.desc .details .col1 {
+.desc .cover img {
+	max-width: 80%;
+	margin: auto;
+	display: block;
+}
+
+.desc .details .col.key {
 	font-weight: bold;
 	padding-left: 5px;
 	padding-right: 5px; 
 }
 
-.desc .details .col2 {
+.desc .details .col.value {
 	color: #AAA391;
 }
 
-@media(min-width: 800px) {
-	 .main {
+@media(min-width: 800px) { 
+	 .main:not(.fullscreen) {
 	 	max-width: 800px;
 	 }
 	 
-	.bar.navbar       { padding-left: calc(400px - (5 * (64px + 5px) / 2)); }
+	.main:not(.fullscreen) .bar.navbar       { padding-left: calc(400px - (5 * (64px + 5px) / 2)); }
+	
+	.main:not(.fullscreen) .bar.optionbar.s1 { padding-left: calc(400px - (1 * (64px + 5px) / 2)); }
+	.main:not(.fullscreen) .bar.optionbar.s4 { padding-left: calc(400px - (4 * (64px + 5px) / 2)); }
+	.main:not(.fullscreen) .bar.optionbar.s5 { padding-left: calc(400px - (5 * (64px + 5px) / 2)); }
 	
-	.bar.optionbar.s1 { padding-left: calc(400px - (1 * (64px + 5px) / 2)); }
-	.bar.optionbar.s4 { padding-left: calc(400px - (4 * (64px + 5px) / 2)); }
+	.main:not(.fullscreen) .desc { flex-direction: row; }
+	.main:not(.fullscreen) .desc .cover img {
+		width: 200px;
+		padding-right: 10px;
+	}
 }