Save current state (unfinished, untested)

[vchess.git] / public / stylesheets / variant.sass

diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index 5148410..6472e3d 100644 (file)
--- a/public/stylesheets/variant.sass
+++ b/public/stylesheets/variant.sass
@@ -1,36 +1,124 @@
 .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
+
+.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: 45%
+  width: 40%
   min-width: 300px
   max-width: 800px
   margin-left: auto
   margin-right: auto
 
-.connected, .disconnected
-  width: 20px
-  height: 20px
-  margin: 0 auto 15px auto
+figure.diagram-container > .diagram2
+  display: block
+  float: left
+  width: 40%
+  min-width: 300px
+  max-width: 800px
+  margin-right: 40px
+  margin-bottom: 10px
+
+figure.diagram-container > figcaption
+  display: block
+  clear: both
+  padding-top: 5px
+
+.topindicator
+  position: relative
   border: 1px solid brown
 
+.indic-left
+  float: left
+  margin: 0 0 10px 20px
+
+.indic-right
+  float: right
+  margin: 0 20px 10px 0
+
+.marginleft
+  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
 
-// TODO: div.board, board9, board10, board11, board12
+.settings-btn
+  padding: 6px 7px 0 7px
+
+.settings-btn-small
+  padding: 0 3px
+
+.white-turn
+  background-color: white
+
+.black-turn
+  background-color: black
+
 div.board
   float: left
-  width: 12.5%
   height: 0
-  padding-bottom: 12.5%
   display: inline-block
   position: relative
 
+div.board8
+  width: 12.5%
+  padding-bottom: 12.5%
+
+div.board10
+  width: 10%
+  padding-bottom: 10%
+
+div.board11
+  width: 9.09%
+  padding-bottom: 9.1%
+
+.game
+  clear: both
+
+.game .board
+  cursor: pointer
+
 #choices
        margin-bottom: 10px
 
@@ -77,18 +165,24 @@ img.mark-square
   left: 12%
   opacity: .7
 
-figure.diagram-container > figcaption
-  display: block
-  clear: both
-  padding-top: 5px
+.highlight
+  background-color: #00cc66 !important
 
-.light-square
-  background-color: #f0d9b5
-.dark-square
-  background-color: #b58863
+.incheck
+  background-color: #cc3300 !important
 
-.highlight
-  background-color: #00cc00
+.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
@@ -109,12 +203,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
 
@@ -122,7 +210,7 @@ figure.diagram-container
   padding: 5px
 
 .section-content
-  padding: 5px
+  padding: 0 5px
 
 ol, ul:not(.browser-default)
   padding-left: 20px
@@ -133,8 +221,52 @@ 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
   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 input, .newproblem 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