Display tooltips below (better on smartphones I think)
[vchess.git] / public / stylesheets / variant.sass
CommitLineData
1d184b4c
BA
1.container#variantPage
2 padding: 0
3
6a01d4f7
BA
4//.container#variantPage > .row > div
5@media screen and (max-width: 767px)
6 .col-sm-12
7 padding: 0
8
9@media screen and (max-width: 767px)
10 h4
11 margin: 0 0 10px 0
12 p
13 margin-left: 0
14 margin-right: 0
15 padding: 0 3px
16
e7cfa68d
BA
17.warn
18 padding: 3px
19 color: red
20 background-color: lightgrey
21 font-weight: bold
22
e64a4eff 23.playing, button.playing:hover
186516b8
BA
24 background-color: #ffcc99
25
e64a4eff 26.seek, button.seek:hover
186516b8
BA
27 background-color: #cc99ff
28
1d184b4c
BA
29// https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout
30figure.diagram-container > .diagram
31 display: block
32 width: 45%
33 min-width: 300px
34 max-width: 800px
35 margin-left: auto
36 margin-right: auto
37
38.connected, .disconnected
39 width: 20px
40 height: 20px
41 margin: 0 auto 15px auto
42 border: 1px solid brown
43
44.connected
45 background-color: green
46
47.disconnected
48 background-color: red
49
50// TODO: div.board, board9, board10, board11, board12
51div.board
52 float: left
53 width: 12.5%
54 height: 0
55 padding-bottom: 12.5%
56 display: inline-block
57 position: relative
58
3066bb47
BA
59.game .board
60 cursor: pointer
61
1d184b4c
BA
62#choices
63 margin-bottom: 10px
64
65#choices
66 margin: 0 auto 0 auto
67 position: relative
68 z-index: 300
69 overflow-y: inherit
70 background-color: rgba(0,0,0,0) //transparent
71
72#choices img
73 cursor: pointer
74 background-color: #e6ee9c
75
76#choices img:hover
77 background-color: skyblue
78
79img.choice-piece
80 height: 0
81 width: 90%
82 padding: 5%
83 height: 90%
84
85img.piece, img.mark-square, img.choice-piece
86 max-width: 100%
87 height: auto
88 display: block
89
90img.mark-square
91 opacity: 0.6
92
93img.ghost
94 position: absolute
95 opacity: 0.4
96 top: 0
97
98img.piece
99 width: 100%
100
101img.mark-square
102 width: 76%
103 position: absolute
104 top: 12%
105 left: 12%
106 opacity: .7
107
108figure.diagram-container > figcaption
109 display: block
110 clear: both
111 padding-top: 5px
112
113.light-square
114 background-color: #f0d9b5
115.dark-square
116 background-color: #b58863
117
118.highlight
e64a4eff
BA
119 background-color: #00cc66
120
121.incheck
122 background-color: #cc3300
1d184b4c
BA
123
124.light-square-diag
125 background-color: #e5e5ca
126.dark-square-diag
127 background-color: #6f8f57
128
129p.boxed
130 background-color: #FFCC66
131 padding: 5px
132
133.stageDelimiter
134 color: purple
135
136// To show (new) pieces, and/or there values...
137figure.showPieces > img
138 width: 50px
139
140figure.showPieces > figcaption
141 color: #6C6C6C
142
143figure.diagram-container
144 margin: 15px 0 15px 0
145 text-align: center
146 width: 100%
147 display: block
148
149.section-title
150 padding: 0
151
152.section-title > h4
153 padding: 5px
154
155.section-content
156 padding: 5px
157
158ol, ul:not(.browser-default)
159 padding-left: 20px
160
161ul:not(.browser-default)
162 margin-top: 5px
163
164ul:not(.browser-default) > li
165 list-style-type: disc
166
167.rulesTitle
168 font-weight: bold
169 cursor: pointer
170 padding: 3px;
171 background-color: lightgrey