-.container#variantPage
- padding: 0
-
-//.container#variantPage > .row > div
-@media screen and (max-width: 767px)
- .col-sm-12
- padding: 0
- h4
- margin: 0 0 10px 0
- p
- margin-left: 0
- margin-right: 0
- padding: 0 3px
-
-.warn
- padding: 3px
- color: red
- background-color: lightgrey
- font-weight: bold
+// Menu:
-.playing, button.playing:hover
- background-color: #ffcc99
-
-.seek, button.seek:hover
- background-color: #cc99ff
-
-figure.diagram-container
- margin: 15px 0 15px 0
- text-align: center
- width: 100%
- display: block
-
-// https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout
-figure.diagram-container > .diagram
- display: block
- width: 40%
- min-width: 300px
- max-width: 800px
- margin-left: auto
- margin-right: auto
-
-figure.diagram-container > .diagram2
- display: block
- float: left
- width: 40%
- min-width: 300px
- max-width: 800px
- margin-right: 40px
+#menuBar
+ background: linear-gradient(#e66465, #9198e5)
+ height: 29px
margin-bottom: 10px
+ @media screen and (max-width: 767px)
+ height: 100%
+ margin-bottom: 0
+ @media screen and (min-width: 768px)
+ width: 100%
+ overflow: hidden
+
+a#homeLink
+ margin-left: 10px
+ margin-top: 2px
+ color: black
+ display: inline-block
+ @media screen and (max-width: 767px)
+ display: block
+ margin: 5px 0 0 12px
-figure.diagram-container > figcaption
- display: block
- clear: both
- padding-top: 5px
-
-.topindicator
- position: relative
+.info-container
+ display: inline-block
+ vertical-align: top
+ padding: 0
+ box-sizing: border-box
+ a
+ text-decoration: none
+ color: black
+ a, p
+ display: inline-block
+ padding: 0 3px
+ border: 1px solid black;
+ margin: 1px 0 0 15px
+ @media screen and (max-width: 767px)
+ margin-top: 10px
+ display: block
+
+#helpMenu
+ @media screen and (min-width: 768px)
+ float: right
+ .info-container
+ p
+ padding: 0 3px
+ margin: 1px 0 0 15px
+
+#flagMenu
+ @media screen and (min-width: 768px)
+ margin-top: 1px
+ float: right
+ margin: 0 15px
+ @media screen and (max-width: 767px)
+ margin: 25px 5px 0 15px
+ img
+ display: inline-block
+ margin: 0
+ height: 25px
+
+label.drawer-toggle
+ padding: 0
+ &::before
+ font-size: 2em;
+ max-height: 32px;
+ top: -7px;
+ left: 5px
+
+// Game section:
+
+button.play
+ height: 24px
+ margin: 0
+ padding: 0 10px 24px 10px
+ box-sizing: border-box
border: 1px solid brown
+button.play.spaceleft
+ margin-left: 15px
+button.play.spaceright
+ margin-right: 15px
+button.play.big-spaceleft
+ margin-left: 25px
+button.play.big-spaceright
+ margin-right: 25px
+
+.aboveboard-wrapper
+ width: 80vh
+ margin: 0 auto
+ @media screen and (max-width: 767px)
+ width: 100%
+ margin: 0
+
+button.above-board
+ margin-left: 15px
+ margin-right: 15px
+
+i.material-icons
+ font-size: 24px
.indic-left
+ border: 1px solid brown
float: left
- margin: 0 0 10px 20px
+ margin: 0 0 var(--universal-margin) 10vh
+ @media screen and (max-width: 767px)
+ margin-left: 20px
.indic-right
+ border: 1px solid brown
float: right
- margin: 0 20px 10px 0
+ margin: 0 10vh var(--universal-margin) 0
+ @media screen and (max-width: 767px)
+ margin-right: 20px
-.marginleft
- margin-left: 30px
+.my-chatmsg
+ color: black
-.reserve-count
- padding-left: 40%
-
-.reserve-div
- margin-bottom: 20px
+.opp-chatmsg
+ color: blue
-.reserve-row-1
- margin-bottom: 15px
+// TODO: this fix is not good (button height 0 if chat overflow window height)
+#sendChatBtn
+ min-height: 42px
.connected
background-color: green
.disconnected
background-color: red
-.settings-btn
- padding: 6px 7px 0 7px
-
-.settings-btn-small
- padding: 0 3px
-
.white-turn
background-color: white
.black-turn
background-color: black
+button.playing
+ background-color: #ffcc99
+ &:hover
+ background-color: #ffcc99
+
+button.seek
+ background-color: #cc99ff
+ &:hover
+ background-color: #cc99ff
+
+.game.reserve-div
+ margin-bottom: 18px
+
+.reserve-count
+ padding-left: 40%
+
+.reserve-row-1
+ margin-bottom: 15px
+
div.board
float: left
height: 0
width: 12.5%
padding-bottom: 12.5%
+div.board8-reserve
+ width: 10%
+ padding-bottom: 10%
+
div.board10
width: 10%
padding-bottom: 10%
width: 9.09%
padding-bottom: 9.1%
-.game
- clear: both
+// NOTE: no variants with reserve of size != 8
-.game .board
- cursor: pointer
-
-#choices
- margin-bottom: 10px
+.game
+ width: 80vh
+ margin: 0 auto
+ .board
+ cursor: pointer
+ @media screen and (max-width: 767px)
+ width: 100%
+ margin: 0
#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
-
-img.mark-square
- opacity: 0.6
-
-img.ghost
- position: absolute
- opacity: 0.4
- top: 0
+ margin: 0 auto 0 auto
+ position: relative
+ z-index: 300
+ overflow-y: inherit
+ background-color: rgba(0,0,0,0)
+ img
+ cursor: pointer
+ background-color: #e6ee9c
+ &:hover
+ background-color: skyblue
+ &.choice-piece
+ width: 100%
+ height: auto
+ display: block
img.piece
width: 100%
+img.piece, img.mark-square
+ max-width: 100%
+ height: auto
+ display: block
+
img.mark-square
+ opacity: 0.6
width: 76%
position: absolute
top: 12%
left: 12%
opacity: .7
+img.ghost
+ position: absolute
+ opacity: 0.4
+ top: 0
+
.highlight
background-color: #00cc66 !important
+.in-shadow
+ filter: brightness(50%)
+
.incheck
background-color: #cc3300 !important
.light-square.lichess
- background-color: #f0d9b5;
+ background-color: #f0d9b5;
.dark-square.lichess
- background-color: #b58863;
+ background-color: #b58863;
+
.light-square.chesscom
- background-color: #e5e5ca;
+ background-color: #e5e5ca;
.dark-square.chesscom
- background-color: #6f8f57;
+ background-color: #6f8f57;
+
.light-square.chesstempo
- background-color: #fdfdfd;
+ background-color: #fdfdfd;
.dark-square.chesstempo
- background-color: #88a0a8;
+ background-color: #88a0a8;
.light-square-diag
background-color: #e5e5ca
.dark-square-diag
background-color: #6f8f57
+#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
+
+#modal-eog+div .card
+ overflow: hidden
+
+#actions
+ margin: 10px 0
+
+// Rules section:
+
+.warn
+ padding: 3px
+ color: red
+ background-color: lightgrey
+ font-weight: bold
+
+figure.diagram-container
+ margin: 15px 0 15px 0
+ text-align: center
+ width: 100%
+ display: block
+ .diagram
+ display: block
+ width: 40%
+ min-width: 240px
+ 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
+ font-size: 0.8em
+
p.boxed
background-color: #FFCC66
padding: 5px
.section-title > h4
padding: 5px
-.section-content
- padding: 0 5px
-
ol, ul:not(.browser-default)
padding-left: 20px
ul:not(.browser-default) > li
list-style-type: disc
-.variantpage-title
- font-weight: bold
- cursor: pointer
- padding: 3px
- 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
+// Problems section:
.newproblem-form input, .newproblem-form textarea
width: 100%
#problem-solution
display: none
-.topspace
- margin-top: 15px
+#solution-div h3
+ background-color: lightgrey
+ padding: 3px 5px
-.problem
- cursor: pointer
- margin-bottom: 15px
+.newproblem-form, .newproblem-preview
+ max-width: 90%
-#solution-div h3
- cursor: pointer
+#problemControls
+ width: 75%
+ margin: 0 auto
+ @media screen and (max-width: 767px)
+ width: 100%
+ margin: 0
+
+.problem
+ margin: 10px 0
projects / vchess.git / blobdiff