X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fstylesheets%2Fvariant.sass;h=3631a6ed2cef07d14d1c40da822f7167156dc7c1;hb=9a3c9f790aa28fd4708faefe41b4624173922c8e;hp=3eec2900dbdaa5c379bb63c9777b59ab93d7c4e0;hpb=61a262b2a441bb27d87701f7d3818723b3ac913d;p=vchess.git

diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index 3eec2900..3631a6ed 100644
--- a/public/stylesheets/variant.sass
+++ b/public/stylesheets/variant.sass
@@ -1,7 +1,6 @@
 .container#variantPage
   padding: 0
 
-//.container#variantPage > .row > div
 @media screen and (max-width: 767px)
   .col-sm-12
     padding: 0
@@ -12,26 +11,69 @@
     margin-right: 0
     padding: 0 3px
 
+#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
+
+//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
 
-.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
@@ -45,7 +87,7 @@ figure.diagram-container > .diagram
   float: right
   margin: 0 20px 10px 0
 
-.marginleft
+.spaceleft
   margin-left: 30px
 
 .reserve-count
@@ -95,45 +137,38 @@ div.board11
 
 .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%
@@ -145,11 +180,6 @@ img.mark-square
   left: 12%
   opacity: .7
 
-figure.diagram-container > figcaption
-  display: block
-  clear: both
-  padding-top: 5px
-
 .highlight
   background-color: #00cc66 !important
 
@@ -157,17 +187,17 @@ figure.diagram-container > figcaption
   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
@@ -188,12 +218,6 @@ figure.showPieces > img
 figure.showPieces > figcaption
   color: #6C6C6C
 
-figure.diagram-container
-  margin: 15px 0 15px 0
-  text-align: center
-  width: 100%
-  display: block
-
 .section-title
   padding: 0
 
@@ -212,10 +236,12 @@ ul:not(.browser-default)
 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
@@ -236,3 +262,59 @@ ul:not(.browser-default) > li
 #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