1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
package reading.component.index.style
import scalacss.Defaults._
import reading.component.style.{ Color => C, Button }
import reading.Media
object BookDetail extends StyleSheet.Inline {
import dsl._
val detailParent = style(
position.fixed,
top(0.px),
right(0.px),
padding(30.px, 30.px, 0.px, 30.px),
height(100.%%),
overflowY.scroll,
Media.desktop(width :=! "calc(100% - 280px)"),
Media.mobile(width(100.%%)),
backgroundColor(C.white.value),
opacity(0)
)
val detail = style(
display.flex,
flexWrap.wrap,
justifyContent.spaceAround,
alignItems.center
)
val cover = style(
height(400.px),
marginBottom(30.px)
)
val presentation = style(
Media.desktop(width(50.%%))
)
val title = style(
color(C.congoBrown.value),
fontSize(26.px),
fontWeight.bold,
marginBottom(1.em),
lineHeight(1.4.em)
)
val author = style(
fontSize(20.px),
marginBottom(1.em)
)
val summary = style(
textAlign.justify,
lineHeight(1.4.em),
marginBottom(2.em)
)
val definitions = style(
marginBottom(2.5.em)
)
val definitionTerm = style(
fontWeight.bold,
float.left,
marginRight(5.px),
lineHeight(1.4.em)
)
val definitionDescription = style(
display.flex,
flexWrap.wrap,
marginBottom(1.em),
lineHeight(1.4.em)
)
val definitionFilter = style(
&.hover(color(C.stiletto.value)),
&.not(_.lastChild).after(
content := "\",\"",
marginRight(5.px),
&.hover(color(C.black.value))
)
)
val close = style(
Button.simple,
marginBottom(1.em)
)
}
|
