X-Git-Url: http://git.nikiroo.be/?a=blobdiff_plain;f=src%2Fbe%2Fnikiroo%2Ffanfix%2Flibrary%2Fweb%2Fstyle.css;h=e00a52ac343ca57486addaee999f0c07402b62a0;hb=4bd7d202930dd0ba9129c7bd6af7dd83bc294c24;hp=c520d78f2230fc2a8dad5e95f13f768f87f540d6;hpb=38956c48d88a5edaa2ac69e178cf40a719eda2a2;p=fanfix.git

diff --git a/src/be/nikiroo/fanfix/library/web/style.css b/src/be/nikiroo/fanfix/library/web/style.css
index c520d78..e00a52a 100644
--- a/src/be/nikiroo/fanfix/library/web/style.css
+++ b/src/be/nikiroo/fanfix/library/web/style.css
@@ -1,16 +1,11 @@
 html, body, .main {
 	margin: 0;
 	padding: 0;
-	font-family : Verdana, "Bitstream Vera Sans", "DejaVu Sans", Tahoma, Geneva, Arial, Sans-serif;
+	font-family: Verdana, "Bitstream Vera Sans", "DejaVu Sans", Tahoma, Geneva, Arial, Sans-serif;
 	font-size: 12px;
-	DISABLED_color: #635c4a;
 	height: 100%;
 }
 
-table {
-	width: 100%;
-}
-
 .banner {
 }
 
@@ -25,25 +20,25 @@ table {
 }
 
 .main {
-	display: block;
+	margin: auto;
 }
 
 .message {
-        background-color: #ddffdd;
-        border: 1px solid #88dd88;
-        clear: left;
-        border-radius: 5px;
-        padding: 5px;
-        margin: 10px;
+	background-color: #ddffdd;
+	border: 1px solid #88dd88;
+	clear: left;
+	border-radius: 5px;
+	padding: 5px;
+	margin: 10px;
 }
 
 .error {
-        background-color: #ffdddd;
-        border: 1px solid #dd8888;
-        clear: left;
-        border-radius: 5px;
-        padding: 5px;
-        margin: 10px;
+	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 */
@@ -68,7 +63,7 @@ h3 {
 	width: 250px;
 	display: flex;
 	margin: auto;
-	margin-top: 200px;
+	margin-top: calc(50% - 320px);
 	flex-direction: column;
 	border: 1px solid gray;
 	padding: 20px;
@@ -89,6 +84,18 @@ h3 {
 
 .filter {
 	padding: 10px;
+	height: 36px;
+}
+
+.filter > * {
+	height: 36px;
+}
+
+.filter input[name='clear'] {
+	background-image: url('/clear-32x32.png');
+	color: transparent;
+	width: 36px;
+	height: 36px;
 }
 
 .books {
@@ -101,8 +108,7 @@ h3 {
 
 .book_line .link, .book_line .title {
 	flex-grow: 100;
-	padding-right: 5px;
-	padding-left: 5px;
+	padding: 5px;
 }
 
 .book_line .link {
@@ -134,36 +140,16 @@ h3 {
 	display: block;
 	background: white;
 	position: fixed;
+	margin: auto;
 }
 
-.viewer {
-	padding-top: 64px;
-	padding-bottom: 64px;
-}
-
-a.viewer.link:hover {
-	background-color: transparent;
-}
-
-.viewer.text {
-	padding-left: 10px;
-	padding-right: 10px;
-}
+.bar.navbar       { padding-left: calc(50% - (4 * 64px / 2)); }
 
-.bar.navbar {
-	padding-left: calc(50% - (4 * 64px / 2));
-}
+.bar.optionbar.s1 { padding-left: calc(50% - (1 * 64px / 2)); }
+.bar.optionbar.s4 { padding-left: calc(50% - (4 * 64px / 2)); }
 
 .bar.optionbar {
-	bottom: 0;	
-}
-
-.bar.optionbar.s1 {
-	padding-left: calc(50% - (1 * 64px / 2));
-}
-
-.bar.optionbar.s4 {
-	padding-left: calc(50% - (4 * 64px / 2));
+	bottom: 0;
 }
 
 .bar .button {
@@ -181,6 +167,13 @@ a.viewer.link:hover {
 	margin: 5px;
 }
 
+.bar .button[disabled] {
+	pointer-events: none;
+	background-color: #aaa;
+	filter: grayscale(100%);
+	border-color: gray;
+}
+
 .bar .button:hover {
 	background-color: bac2e1;
 }
@@ -194,3 +187,41 @@ a.viewer.link:hover {
 .bar .button.zoomreal   { background-image: url('/actual_size-32x32.png');   }
 .bar .button.zoomwidth  { background-image: url('/fit_to_width-32x32.png');  }
 .bar .button.zoomheight { background-image: url('/fit_to_height-32x32.png'); }
+
+.viewer {
+	padding-top: 64px;
+	padding-bottom: 64px;
+}
+
+.viewer.img {
+	margin: auto;
+	display: block;
+}
+
+a.viewer.link:hover {
+	background-color: transparent;
+}
+
+.viewer.text {
+	padding-left: 10px;
+	padding-right: 10px;
+}
+
+.desc {
+	display: flex;
+}
+
+.desc .cover img {
+	width: 100px;
+}
+
+@media(min-width: 800px) {
+	 .main {
+	 	max-width: 800px;
+	 }
+	 
+	.bar.navbar       { padding-left: calc(400px - (4 * 64px / 2)); }
+	
+	.bar.optionbar.s1 { padding-left: calc(400px - (1 * 64px / 2)); }
+	.bar.optionbar.s4 { padding-left: calc(400px - (4 * 64px / 2)); }
+}