Saving state (unfinished styling on variant page)

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

diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index a0d4f2a..efaf1e9 100644 (file)
--- a/public/stylesheets/variant.sass
+++ b/public/stylesheets/variant.sass
@@ -1,16 +1,18 @@
-.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
+#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
 
 .warn
   padding: 3px
@@ -18,40 +20,45 @@
   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
 
 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: 40%
-  min-width: 300px
-  max-width: 800px
-  margin-left: auto
-  margin-right: 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
+  .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
@@ -65,7 +72,7 @@ figure.diagram-container > figcaption
   float: right
   margin: 0 20px 10px 0
 
-.marginleft
+.spaceleft
   margin-left: 30px
 
 .reserve-count
@@ -115,45 +122,38 @@ div.board11
 
 .game
   clear: both
-
-.game .board
-  cursor: pointer
-
-#choices
-       margin-bottom: 10px
+  .board
+    cursor: pointer
 
 #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%
@@ -172,17 +172,17 @@ img.mark-square
   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
@@ -209,9 +209,6 @@ figure.showPieces > figcaption
 .section-title > h4
   padding: 5px
 
-.section-content
-  padding: 0 5px
-
 ol, ul:not(.browser-default)
   padding-left: 20px
 
@@ -225,6 +222,8 @@ ul:not(.browser-default) > li
   font-weight: bold
   cursor: pointer
   padding: 3px
+  margin-left: 0
+  margin-right: 0
   background-color: lightgrey
 
 #fen-string
@@ -283,3 +282,21 @@ ul:not(.browser-default) > li
 
 .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