X-Git-Url: http://git.nikiroo.be/?a=blobdiff_plain;f=src%2Fbe%2Fnikiroo%2Ffanfix%2Flibrary%2Fweb%2Fstyle.css;h=c84c36dcb1fc89a4b36e7a835c5d5f93c265cc87;hb=599b05c7917edbe2fe4d6449628f2b261eae2f5e;hp=fb0119015fecd15c0faae17aca548a94cfe8cd72;hpb=db9146bc53fcfd0912910f5bd21a6cc917018b36;p=nikiroo-utils.git

diff --git a/src/be/nikiroo/fanfix/library/web/style.css b/src/be/nikiroo/fanfix/library/web/style.css
index fb01190..c84c36d 100644
--- a/src/be/nikiroo/fanfix/library/web/style.css
+++ b/src/be/nikiroo/fanfix/library/web/style.css
@@ -1,3 +1,15 @@
+/*
+ * #AAA391: main gray
+ * #555C7E: reverse main
+ *
+ * #ddffdd: background pastel green
+ * #88dd88: for border
+ *
+ * #ffdddd: pastel red
+ * #dd8888: for border
+ *
+ */
+
 html, body, .main {
 	margin: 0;
 	padding: 0;
@@ -63,9 +75,9 @@ h3 {
 	width: 250px;
 	display: flex;
 	margin: auto;
-	margin-top: 200px;
+	margin-top: calc(50% - 320px);
 	flex-direction: column;
-	border: 1px solid gray;
+	border: 1px solid #AAA391;
 	padding: 20px;
 	border-radius: 10px;
 }
@@ -83,7 +95,39 @@ h3 {
 }
 
 .filter {
-	padding: 10px;
+	padding: 5px;
+	height: 36px;
+	border: 1px solid #AAA391;
+	border-radius: 5px;
+	margin-top: 5px;
+	margin-bottom: 5px;
+	display: flex;
+}
+
+.filter > * {
+	height: 36px;
+	display: inline-block;
+}
+
+.filter .label {
+	line-height: 36px;
+	padding-right: 5px;
+}
+
+.filter input[type='text'] {
+	height: 32px;
+	padding: 0;
+	margin: 0;
+	border-width: 2px;
+	min-width: 50px;
+	flex-grow: 100;
+	flex-shrink: 100;
+}
+
+.filter input[name='optionNo'] {
+	background-image: url('/clear-32x32.png');
+	color: transparent;
+	width: 36px;
 }
 
 .books {
@@ -96,8 +140,7 @@ h3 {
 
 .book_line .link, .book_line .title {
 	flex-grow: 100;
-	padding-right: 5px;
-	padding-left: 5px;
+	padding: 5px;
 }
 
 .book_line .link {
@@ -109,7 +152,7 @@ h3 {
 }
 
 .book_line .luid {
-	color: gray;
+	color: #AAA391;
 	padding-right: 10px;
 	padding-left: 10px;
 }
@@ -160,7 +203,7 @@ h3 {
 	pointer-events: none;
 	background-color: #aaa;
 	filter: grayscale(100%);
-	border-color: gray;
+	border-color: #AAA391;
 }
 
 .bar .button:hover {
@@ -182,6 +225,13 @@ h3 {
 	padding-bottom: 64px;
 }
 
+.viewer .title {
+	background-color: #AAA391;
+	text-align: center;
+	font-variant: small-caps;
+	color: white;
+}
+
 .viewer.img {
 	margin: auto;
 	display: block;
@@ -198,6 +248,23 @@ a.viewer.link:hover {
 
 .desc {
 	display: flex;
+	padding-top: 10px;
+}
+
+.desc .cover img {
+	width: 100px;
+	padding-right: 10px;
+	max-height: 280px;
+}
+
+.desc .details .col1 {
+	font-weight: bold;
+	padding-left: 5px;
+	padding-right: 5px; 
+}
+
+.desc .details .col2 {
+	color: #AAA391;
 }
 
 @media(min-width: 800px) {