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