+/*
+ * #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;
height: 100%;
}
-table {
- width: 100%;
-}
-
.banner {
}
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;
}
}
.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 {
.book_line .link, .book_line .title {
flex-grow: 100;
- padding-right: 5px;
- padding-left: 5px;
+ padding: 5px;
}
.book_line .link {
}
.book_line .luid {
- color: gray;
+ color: #AAA391;
padding-right: 10px;
padding-left: 10px;
}
margin: auto;
}
-.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;
-}
-
.bar.navbar { padding-left: calc(50% - (4 * 64px / 2)); }
.bar.optionbar.s1 { padding-left: calc(50% - (1 * 64px / 2)); }
pointer-events: none;
background-color: #aaa;
filter: grayscale(100%);
- border-color: gray;
+ border-color: #AAA391;
}
.bar .button:hover {
.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;