+/*
+ * #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;
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;
}
pointer-events: none;
background-color: #aaa;
filter: grayscale(100%);
- border-color: gray;
+ border-color: #AAA391;
}
.bar .button:hover {
padding-bottom: 64px;
}
+.viewer .title {
+ background-color: #AAA391;
+ text-align: center;
+ font-variant: small-caps;
+ color: white;
+}
+
.viewer.img {
margin: auto;
display: block;
.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) {