X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fclient_OLD%2Fstylesheets%2Fvariant.sass;fp=client%2Fclient_OLD%2Fstylesheets%2Fvariant.sass;h=ae4f0b21510ed8c6323fc29ab76e79f077cf56a5;hb=625022fdcf750f0aff8fcd699f7e9b89730e1d10;hp=0000000000000000000000000000000000000000;hpb=b955c65b942d09d24b5c3bed0d755d4f2f8f71f1;p=vchess.git

diff --git a/client/client_OLD/stylesheets/variant.sass b/client/client_OLD/stylesheets/variant.sass
new file mode 100644
index 00000000..ae4f0b21
--- /dev/null
+++ b/client/client_OLD/stylesheets/variant.sass
@@ -0,0 +1,389 @@
+// 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
+
+.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
+
+#userMenu, #settings
+  @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
+
+label.drawer-toggle
+  padding: 0
+  &::before
+    font-size: 2em;
+    max-height: 32px;
+    top: -7px;
+    left: 5px
+
+// Game section:
+
+td.highlight-lm
+  background-color: plum
+
+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 var(--universal-margin) 10vh
+  @media screen and (max-width: 767px)
+    margin-left: 20px
+
+.indic-right
+  border: 1px solid brown
+  float: right
+  margin: 0 10vh var(--universal-margin) 0
+  @media screen and (max-width: 767px)
+    margin-right: 20px
+
+.my-chatmsg
+  color: black
+
+.opp-chatmsg
+  color: blue
+
+// TODO: this fix is not good (button height 0 if chat overflow window height)
+#sendChatBtn
+  min-height: 42px
+
+.connected
+  background-color: green
+
+.disconnected
+  background-color: red
+
+.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
+  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%
+
+// NOTE: no variants with reserve of size != 8
+
+.game
+  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)
+  img
+    cursor: pointer
+    background-color: #e6ee9c
+    &:hover
+      background-color: skyblue
+    &.choice-piece
+      width: 100%
+      height: auto
+      display: block
+
+img.piece
+  width: 100%
+
+img.piece, img.mark-square
+  max-width: 100%
+  height: auto
+  display: block
+
+img.mark-square
+  opacity: 0.6
+  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
+
+.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
+.dark-square-diag
+  background-color: #6f8f57
+
+#fen-string
+  margin-top: 0
+  margin-bottom: 10px
+
+#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
+    margin-left: auto
+    margin-right: auto
+  .diag12
+    float: left
+    margin-left: calc(10% - 20px)
+    margin-right: 40px
+    @media screen and (max-width: 630px)
+      float: none
+      margin: 0 auto 10px auto
+  .diag22
+    float: left
+    margin-right: calc(10% - 20px)
+    @media screen and (max-width: 630px)
+      float: none
+      margin: 0 auto
+  figcaption
+    display: block
+    clear: both
+    padding-top: 5px
+    font-size: 0.8em
+
+p.boxed
+  background-color: #FFCC66
+  padding: 5px
+
+.stageDelimiter
+  color: purple
+
+// To show (new) pieces, and/or there values...
+figure.showPieces > img
+  width: 50px
+
+figure.showPieces > figcaption
+  color: #6C6C6C
+
+.section-title
+  padding: 0
+
+.section-title > h4
+  padding: 5px
+
+ol, ul:not(.browser-default)
+  padding-left: 20px
+
+ul:not(.browser-default)
+  margin-top: 5px
+
+ul:not(.browser-default) > li
+  list-style-type: disc
+
+// Problems section:
+
+.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
+
+#solution-div h3
+  background-color: lightgrey
+  padding: 3px 5px
+
+.newproblem-form, .newproblem-preview
+  max-width: 90%
+
+#problemControls
+  width: 75%
+  margin: 0 auto
+  @media screen and (max-width: 767px)
+    width: 100%
+    margin: 0
+
+.problem
+  margin: 10px 0
+
+.only-mine
+  background-color: yellow
+  &:hover
+    background-color: yellow