WebServer: add story description

[nikiroo-utils.git] / src / be / nikiroo / fanfix / library / web / style.css

diff --git a/src/be/nikiroo/fanfix/library/web/style.css b/src/be/nikiroo/fanfix/library/web/style.css
index aadbf332a566e546933e738103c661cdfc18c5dc..c84c36dcb1fc89a4b36e7a835c5d5f93c265cc87 100644 (file)
--- 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;
@@ -6,10 +18,6 @@ html, body, .main {
        height: 100%;
 }
 
-table {
-       width: 100%;
-}
-
 .banner {
 }
 
@@ -24,7 +32,6 @@ table {
 }
 
 .main {
-       max-width: 800px;
        margin: auto;
 }
 
@@ -68,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;
 }
@@ -88,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 {
@@ -101,8 +140,7 @@ h3 {
 
 .book_line .link, .book_line .title {
        flex-grow: 100;
-       padding-right: 5px;
-       padding-left: 5px;
+       padding: 5px;
 }
 
 .book_line .link {
@@ -114,7 +152,7 @@ h3 {
 }
 
 .book_line .luid {
-       color: gray;
+       color: #AAA391;
        padding-right: 10px;
        padding-left: 10px;
 }
@@ -137,41 +175,15 @@ h3 {
        margin: auto;
 }
 
-.viewer {
-       padding-top: 64px;
-       padding-bottom: 64px;
-}
+.bar.navbar       { padding-left: calc(50% - (4 * 64px / 2)); }
 
-.viewer.img {
-       margin: auto;
-       display: block;
-}
-
-a.viewer.link:hover {
-       background-color: transparent;
-}
-
-.viewer.text {
-       padding-left: 10px;
-       padding-right: 10px;
-}
-
-.bar.navbar {
-       padding-left: calc(min(50%, 800px / 2) - (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(min(50%, 800px / 2) - (1 * 64px / 2));
-}
-
-.bar.optionbar.s4 {
-       padding-left: calc(min(50%, 800px / 2) - (4 * 64px / 2));
-}
-
 .bar .button {
        height: 54px;
        width: 54px;
@@ -191,7 +203,7 @@ a.viewer.link:hover {
        pointer-events: none;
        background-color: #aaa;
        filter: grayscale(100%);
-       border-color: gray;
+       border-color: #AAA391;
 }
 
 .bar .button:hover {
@@ -207,3 +219,61 @@ 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 .title {
+       background-color: #AAA391;
+       text-align: center;
+       font-variant: small-caps;
+       color: white;
+}
+
+.viewer.img {
+       margin: auto;
+       display: block;
+}
+
+a.viewer.link:hover {
+       background-color: transparent;
+}
+
+.viewer.text {
+       padding-left: 10px;
+       padding-right: 10px;
+}
+
+.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) {
+        .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)); }
+}