git://git.nikiroo.be
/
nikiroo-utils.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
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 e00a52ac343ca57486addaee999f0c07402b62a0..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;
html, body, .main {
margin: 0;
padding: 0;
@@
-65,7
+77,7
@@
h3 {
margin: auto;
margin-top: calc(50% - 320px);
flex-direction: column;
margin: auto;
margin-top: calc(50% - 320px);
flex-direction: column;
- border: 1px solid
gray
;
+ border: 1px solid
#AAA391
;
padding: 20px;
border-radius: 10px;
}
padding: 20px;
border-radius: 10px;
}
@@
-83,19
+95,39
@@
h3 {
}
.filter {
}
.filter {
- padding:
10
px;
+ padding:
5
px;
height: 36px;
height: 36px;
+ border: 1px solid #AAA391;
+ border-radius: 5px;
+ margin-top: 5px;
+ margin-bottom: 5px;
+ display: flex;
}
.filter > * {
height: 36px;
}
.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='
clear
'] {
+.filter input[name='
optionNo
'] {
background-image: url('/clear-32x32.png');
color: transparent;
width: 36px;
background-image: url('/clear-32x32.png');
color: transparent;
width: 36px;
- height: 36px;
}
.books {
}
.books {
@@
-120,7
+152,7
@@
h3 {
}
.book_line .luid {
}
.book_line .luid {
- color:
gray
;
+ color:
#AAA391
;
padding-right: 10px;
padding-left: 10px;
}
padding-right: 10px;
padding-left: 10px;
}
@@
-171,7
+203,7
@@
h3 {
pointer-events: none;
background-color: #aaa;
filter: grayscale(100%);
pointer-events: none;
background-color: #aaa;
filter: grayscale(100%);
- border-color:
gray
;
+ border-color:
#AAA391
;
}
.bar .button:hover {
}
.bar .button:hover {
@@
-193,6
+225,13
@@
h3 {
padding-bottom: 64px;
}
padding-bottom: 64px;
}
+.viewer .title {
+ background-color: #AAA391;
+ text-align: center;
+ font-variant: small-caps;
+ color: white;
+}
+
.viewer.img {
margin: auto;
display: block;
.viewer.img {
margin: auto;
display: block;
@@
-209,10
+248,23
@@
a.viewer.link:hover {
.desc {
display: flex;
.desc {
display: flex;
+ padding-top: 10px;
}
.desc .cover img {
width: 100px;
}
.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) {
}
@media(min-width: 800px) {