X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fstylesheets%2Fvariant.sass;h=c5e38a89e12ad4d02eeb2d1b0e47895ea3ae3436;hb=69f3d8014e594ef949792d04d97b8286e9c2c268;hp=505e26fa07118080c40d38e00b9a4b479cd98c69;hpb=80b15df120c7444afc091b29332a27df36416126;p=vchess.git

diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index 505e26fa..c5e38a89 100644
--- a/public/stylesheets/variant.sass
+++ b/public/stylesheets/variant.sass
@@ -1,87 +1,124 @@
-.container#variantPage
-  padding: 0
+// Menu:
+
+#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
 
-@media screen and (max-width: 767px)
-  .col-sm-12
-    padding: 0
-  h4
-    margin: 0 0 10px 0
-  p
-    margin-left: 0
-    margin-right: 0
+.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
 
-//TODO: taille modal au cas par cas. standard == 767. Can be larger (welcome, fen...)
-
-.warn
-  padding: 3px
-  color: red
-  background-color: lightgrey
-  font-weight: bold
-
-button.playing
-  background-color: #ffcc99
-  :hover
-    background-color: #ffcc99
-
-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
+#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
 
-.topindicator
-  position: relative
+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
 
-.spaceleft
-  margin-left: 30px
-
-.reserve-count
-  padding-left: 40%
+.my-chatmsg
+  color: black
 
-.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
@@ -89,18 +126,31 @@ figure.diagram-container
 .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
@@ -111,6 +161,10 @@ div.board8
   width: 12.5%
   padding-bottom: 12.5%
 
+div.board8-reserve
+  width: 10%
+  padding-bottom: 10%
+
 div.board10
   width: 10%
   padding-bottom: 10%
@@ -119,28 +173,36 @@ div.board11
   width: 9.09%
   padding-bottom: 9.1%
 
+// NOTE: no variants with reserve of size != 8
+
 .game
-  clear: both
+  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
+  background-color: rgba(0,0,0,0)
   img
     cursor: pointer
     background-color: #e6ee9c
-    :hover
+    &:hover
       background-color: skyblue
-    .choice-piece
-      width: 90%
-      max-width: 100%
+    &.choice-piece
+      width: 100%
       height: auto
       display: block
 
+img.piece
+  width: 100%
+
 img.piece, img.mark-square
   max-width: 100%
   height: auto
@@ -148,25 +210,23 @@ img.piece, img.mark-square
 
 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
 
+.in-shadow
+  filter: brightness(50%)
+
 .incheck
   background-color: #cc3300 !important
 
@@ -174,10 +234,12 @@ img.mark-square
   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
@@ -188,6 +250,70 @@ img.mark-square
 .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
@@ -208,9 +334,6 @@ figure.showPieces > figcaption
 .section-title > h4
   padding: 5px
 
-.section-content
-  padding: 0 5px
-
 ol, ul:not(.browser-default)
   padding-left: 20px
 
@@ -220,32 +343,7 @@ ul:not(.browser-default)
 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%
@@ -272,33 +370,19 @@ ul:not(.browser-default) > li
 #problem-solution
   display: none
 
-.topspace
-  margin-top: 15px
-
-.problem
-  cursor: pointer
-  margin-bottom: 15px
-
 #solution-div h3
-  cursor: pointer
+  background-color: lightgrey
+  padding: 3px 5px
 
 .newproblem-form, .newproblem-preview
   max-width: 90%
 
-.clickable
-  cursor: pointer
-
-.name-connected
-  color: green
-
-.name-disconnected
-  color: red
-
-.clearer
-  clear: both
+#problemControls
+  width: 75%
+  margin: 0 auto
+  @media screen and (max-width: 767px)
+    width: 100%
+    margin: 0
 
-.my-chatmsg
-  color: black
-
-.opp-chatmsg
-  color: blue
+.problem
+  margin: 10px 0