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