Improved PGN and game seek
[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
e64a4eff 10.playing, button.playing:hover
186516b8
BA
11 background-color: #ffcc99
12
e64a4eff 13.seek, button.seek:hover
186516b8
BA
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
e64a4eff
BA
106 background-color: #00cc66
107
108.incheck
109 background-color: #cc3300
1d184b4c
BA
110
111.light-square-diag
112 background-color: #e5e5ca
113.dark-square-diag
114 background-color: #6f8f57
115
116p.boxed
117 background-color: #FFCC66
118 padding: 5px
119
120.stageDelimiter
121 color: purple
122
123// To show (new) pieces, and/or there values...
124figure.showPieces > img
125 width: 50px
126
127figure.showPieces > figcaption
128 color: #6C6C6C
129
130figure.diagram-container
131 margin: 15px 0 15px 0
132 text-align: center
133 width: 100%
134 display: block
135
136.section-title
137 padding: 0
138
139.section-title > h4
140 padding: 5px
141
142.section-content
143 padding: 5px
144
145ol, ul:not(.browser-default)
146 padding-left: 20px
147
148ul:not(.browser-default)
149 margin-top: 5px
150
151ul:not(.browser-default) > li
152 list-style-type: disc
153
154.rulesTitle
155 font-weight: bold
156 cursor: pointer
157 padding: 3px;
158 background-color: lightgrey