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