.container#variantPage
padding: 0
-//.container#variantPage > .row > div
@media screen and (max-width: 767px)
.col-sm-12
padding: 0
margin-right: 0
padding: 0 3px
-#pgn-div > a
- display: none
+#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
-#pgn-div > p
- cursor: pointer
+#menuContainer
+ height: 48px
-#fen-div > p
- margin-left: 0
- margin-right: 0
+//TODO: taille modal au cas par cas. standard == 767. Can be larger (welcome, fen...)
.warn
padding: 3px
background-color: lightgrey
font-weight: bold
-.playing, button.playing:hover
+button.playing
background-color: #ffcc99
+ &:hover
+ background-color: #ffcc99
-.seek, button.seek:hover
+button.seek
background-color: #cc99ff
+ &:hover
+ background-color: #cc99ff
-// https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout
-figure.diagram-container > .diagram
+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
.topindicator
position: relative
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
-.expert-switch
- padding: 5px 10px
+.settings-btn
+ padding: 6px 7px 0 7px
-.expert-mode, button.expert-mode:hover
- background-color: #ffcc99
+.settings-btn-small
+ padding: 0 3px
.white-turn
background-color: white
.game
clear: both
-
-.game .board
- cursor: pointer
+ .board
+ cursor: pointer
#choices
- margin-bottom: 10px
-
-#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
-
-.light-square
- background-color: #f0d9b5
-.dark-square
- background-color: #b58863
-
.highlight
- background-color: #00cc66
+ background-color: #00cc66 !important
.incheck
- background-color: #cc3300
+ background-color: #cc3300 !important
+
+.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
padding: 5px
.section-content
- padding: 5px
+ padding: 0 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