-.container#variantPage
- padding: 0
+#menuBar
+ font-style: italic
+ background: linear-gradient(#e66465, #9198e5)
+ margin: 0 0 10px 0
+ @media screen and (min-width: 768px)
+ width: 100%
+ img
+ height: 30px
+ padding-top: 10px
+ span
+ padding-left: 10px
+ padding-right: 15px
+
+#menuContainer
+ height: 48px
+
+.warn
+ padding: 3px
+ color: red
+ background-color: lightgrey
+ font-weight: bold
+
+button.playing
+ background-color: #ffcc99
+ &:hover
+ background-color: #ffcc99
-// https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout
-figure.diagram-container > .diagram
+button.seek
+ background-color: #cc99ff
+ &:hover
+ background-color: #cc99ff
+
+figure.diagram-container
+ margin: 15px 0 15px 0
+ text-align: center
+ width: 100%
display: block
- width: 45%
- min-width: 300px
- max-width: 800px
- margin-left: auto
- margin-right: auto
+ .diagram
+ display: block
+ width: 40%
+ //min-width: 300px
+ max-width: 800px
+ margin-left: auto
+ margin-right: auto
+ .diag12
+ float: left
+ margin-left: calc(10% - 20px)
+ margin-right: 40px
+ @media screen and (max-width: 500px)
+ float: none
+ margin: 0 auto 10px auto
+ .diag22
+ float: left
+ margin-right: calc(10% - 20px)
+ @media screen and (max-width: 500px)
+ float: none
+ margin: 0 auto
+ figcaption
+ display: block
+ clear: both
+ padding-top: 5px
-.connected, .disconnected
- width: 20px
- height: 20px
- margin: 0 auto 15px auto
+.topindicator
+ position: relative
border: 1px solid brown
+.indic-left
+ float: left
+ margin: 0 0 10px 20px
+
+.indic-right
+ float: right
+ margin: 0 20px 10px 0
+
+.spaceleft
+ margin-left: 30px
+
+.reserve-count
+ padding-left: 40%
+
+.reserve-div
+ margin-bottom: 20px
+
+.reserve-row-1
+ margin-bottom: 15px
+
.connected
background-color: green
.disconnected
background-color: red
-// TODO: div.board, board9, board10, board11, board12
+.settings-btn
+ padding: 6px 7px 0 7px
+
+.settings-btn-small
+ padding: 0 3px
+
+.white-turn
+ background-color: white
+
+.black-turn
+ background-color: black
+
div.board
float: left
- width: 12.5%
height: 0
- padding-bottom: 12.5%
display: inline-block
position: relative
-#choices
- margin-bottom: 10px
+div.board8
+ width: 12.5%
+ padding-bottom: 12.5%
+
+div.board10
+ width: 10%
+ padding-bottom: 10%
+
+div.board11
+ width: 9.09%
+ padding-bottom: 9.1%
+
+.game
+ clear: both
+ .board
+ cursor: pointer
#choices
- margin: 0 auto 0 auto
- position: relative
- z-index: 300
- overflow-y: inherit
- background-color: rgba(0,0,0,0) //transparent
-
-#choices img
- cursor: pointer
- background-color: #e6ee9c
-
-#choices img:hover
- background-color: skyblue
-
-img.choice-piece
- height: 0
- width: 90%
- padding: 5%
- height: 90%
-
-img.piece, img.mark-square, img.choice-piece
- max-width: 100%
- height: auto
- display: block
+ margin: 0 auto 0 auto
+ position: relative
+ z-index: 300
+ overflow-y: inherit
+ background-color: rgba(0,0,0,0) //transparent
+ img
+ cursor: pointer
+ background-color: #e6ee9c
+ &:hover
+ background-color: skyblue
+ .choice-piece
+ width: 90%
+ max-width: 100%
+ height: auto
+ display: block
+
+img.piece, img.mark-square
+ max-width: 100%
+ height: auto
+ display: block
img.mark-square
- opacity: 0.6
+ opacity: 0.6
img.ghost
- position: absolute
- opacity: 0.4
- top: 0
+ position: absolute
+ opacity: 0.4
+ top: 0
img.piece
width: 100%
left: 12%
opacity: .7
-figure.diagram-container > figcaption
- display: block
- clear: both
- padding-top: 5px
+.highlight
+ background-color: #00cc66 !important
-.light-square
- background-color: #f0d9b5
-.dark-square
- background-color: #b58863
+.incheck
+ background-color: #cc3300 !important
-.highlight
- background-color: #00cc00
+.light-square.lichess
+ background-color: #f0d9b5;
+.dark-square.lichess
+ background-color: #b58863;
+.light-square.chesscom
+ background-color: #e5e5ca;
+.dark-square.chesscom
+ background-color: #6f8f57;
+.light-square.chesstempo
+ background-color: #fdfdfd;
+.dark-square.chesstempo
+ background-color: #88a0a8;
.light-square-diag
background-color: #e5e5ca
figure.showPieces > figcaption
color: #6C6C6C
-figure.diagram-container
- margin: 15px 0 15px 0
- text-align: center
- width: 100%
- display: block
-
.section-title
padding: 0
.section-title > h4
padding: 5px
-.section-content
- padding: 5px
-
ol, ul:not(.browser-default)
padding-left: 20px
ul:not(.browser-default) > li
list-style-type: disc
-.rulesTitle
+.variantpage-title
font-weight: bold
cursor: pointer
- padding: 3px;
+ padding: 3px
+ margin-left: 0
+ margin-right: 0
background-color: lightgrey
+
+#fen-string
+ margin-top: 0
+
+#pgn-game
+ margin-top: 0
+ margin-bottom: 0
+
+#downloadBtn
+ display: block
+ margin-left: auto
+ margin-right: auto
+
+#pgn-div > a
+ display: none
+
+#fen-div > p
+ margin-left: 0
+ margin-right: 0
+
+.newproblem-form input, .newproblem-form textarea
+ width: 100%
+
+.emphasis
+ font-style: italic
+
+#newpbInstructions
+ margin-bottom: var(--universal-margin);
+
+.center-btn
+ margin-left: 40%
+
+//TODO?
+.center-inline
+ text-align: center
+.center-block
+ margin-left: auto
+ margin-right: auto
+
+.mistake-newproblem
+ color: #663300
+
+#problem-solution
+ display: none
+
+.topspace
+ margin-top: 15px
+
+.problem
+ cursor: pointer
+ margin-bottom: 15px
+
+#solution-div h3
+ cursor: pointer
+
+.newproblem-form, .newproblem-preview
+ max-width: 90%
+
+.clickable
+ cursor: pointer
+
+.name-connected
+ color: green
+
+.name-disconnected
+ color: red
+
+.clearer
+ clear: both
+
+.my-chatmsg
+ color: black
+
+.opp-chatmsg
+ color: blue
projects / vchess.git / blobdiff