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