-.container#variantPage
- padding: 0
-
-@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
+// Menu:
+
+#menuBar
+ background: linear-gradient(#e66465, #9198e5)
+ height: 77px
+ margin-bottom: 10px
+ @media screen and (max-width: 767px)
+ height: 100%
+ margin-bottom: 0
+ @media screen and (min-width: 768px)
+ width: 100%
+
+a#homeLink
+ margin: 27px 0 0 10px
+ display: inline-block
+ @media screen and (max-width: 767px)
+ margin: 10px 0 0 10px
+ display: block
-//TODO: taille modal au cas par cas. standard == 767. Can be larger (welcome, fen...)
+.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: 3px
+ border: 1px solid black;
+ margin: 25px 0 0 15px
+ @media screen and (max-width: 767px)
+ margin-top: 10px
+ display: block
-.warn
- padding: 3px
- color: red
- background-color: lightgrey
- font-weight: bold
+#helpMenu
+ @media screen and (min-width: 768px)
+ float: right
+ cursor: pointer
+ @media screen and (max-width: 767px)
+ .info-container
+ p
+ margin-right: 5px
+
+#flagMenu
+ @media screen and (min-width: 768px)
+ float: right
+ cursor: pointer
+ margin: 0 15px
+ @media screen and (max-width: 767px)
+ margin-right: 5px
+ img
+ display: inline-block
+ height: 30px
+ margin-top: 25px
-button.playing
- background-color: #ffcc99
- :hover
- background-color: #ffcc99
+label.drawer-toggle
+ padding: 0
+ &::before
+ font-size: 2.5em;
+ max-height: 43px;
+ top: -10px;
+ left: 10px
-button.seek
- background-color: #cc99ff
- :hover
- background-color: #cc99ff
-
-figure.diagram-container
- margin: 15px 0 15px 0
- text-align: center
- width: 100%
- display: block
- .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
+// Game section:
.topindicator
position: relative
.indic-left
float: left
- margin: 0 0 10px 20px
+ margin: 0 0 var(--universal-margin) 20px
.indic-right
float: right
- margin: 0 20px 10px 0
+ margin: 0 20px var(--universal-margin) 0
-.spaceleft
- margin-left: 30px
-
-.reserve-count
- padding-left: 40%
-
-.reserve-div
- margin-bottom: 20px
+.my-chatmsg
+ color: black
-.reserve-row-1
- margin-bottom: 15px
+.opp-chatmsg
+ color: blue
.connected
background-color: green
.black-turn
background-color: black
+button.playing
+ background-color: #ffcc99
+ &:hover
+ background-color: #ffcc99
+
+button.seek
+ background-color: #cc99ff
+ &:hover
+ background-color: #cc99ff
+
+.reserve-count
+ padding-left: 40%
+
+.reserve-div
+ margin-bottom: 20px
+
+.reserve-row-1
+ margin-bottom: 15px
+
div.board
float: left
height: 0
position: relative
z-index: 300
overflow-y: inherit
- background-color: rgba(0,0,0,0) //transparent
+ background-color: rgba(0,0,0,0)
img
cursor: pointer
background-color: #e6ee9c
- :hover
+ &:hover
background-color: skyblue
.choice-piece
width: 90%
height: auto
display: block
+img.piece
+ width: 100%
+
img.piece, img.mark-square
max-width: 100%
height: auto
img.mark-square
opacity: 0.6
-
-img.ghost
- position: absolute
- opacity: 0.4
- top: 0
-
-img.piece
- width: 100%
-
-img.mark-square
width: 76%
position: absolute
top: 12%
left: 12%
opacity: .7
+img.ghost
+ position: absolute
+ opacity: 0.4
+ top: 0
+
.highlight
background-color: #00cc66 !important
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
.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
+
+// 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: 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
+
+.spaceleft
+ margin-left: 30px
+
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
- 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
+// Problems section:
.newproblem-form input, .newproblem-form textarea
width: 100%
.clickable
cursor: pointer
-.name-connected
- color: green
-
-.name-disconnected
- color: red
-
.clearer
clear: both
-
-.my-chatmsg
- color: black
-
-.opp-chatmsg
- color: blue