#menuBar
background: linear-gradient(#e66465, #9198e5)
- height: 77px
+ 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: 27px 0 0 10px
+ margin-left: 10px
+ margin-top: 2px
+ color: black
display: inline-block
@media screen and (max-width: 767px)
- margin: 10px 0 0 10px
display: block
+ margin: 5px 0 0 12px
.info-container
display: inline-block
color: black
a, p
display: inline-block
- padding: 3px
+ padding: 0 3px
border: 1px solid black;
- margin: 25px 0 0 15px
+ margin: 1px 0 0 15px
@media screen and (max-width: 767px)
margin-top: 10px
display: block
#helpMenu
@media screen and (min-width: 768px)
float: right
- cursor: pointer
- @media screen and (max-width: 767px)
- .info-container
- p
- margin-right: 5px
+ .info-container
+ p
+ padding: 0 3px
+ margin: 1px 0 0 15px
#flagMenu
@media screen and (min-width: 768px)
+ margin-top: 1px
float: right
- cursor: pointer
margin: 0 15px
@media screen and (max-width: 767px)
- margin-right: 5px
+ margin: 25px 5px 0 15px
img
display: inline-block
- height: 30px
- margin-top: 25px
+ margin: 0
+ height: 25px
label.drawer-toggle
padding: 0
&::before
- font-size: 2.5em;
- max-height: 43px;
- top: -10px;
- left: 10px
+ font-size: 2em;
+ max-height: 32px;
+ top: -7px;
+ left: 5px
// Game section:
-.topindicator
- position: relative
+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) 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 var(--universal-margin) 0
+ 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
-.settings-btn
- padding: 6px 7px 0 7px
-
-.settings-btn-small
- padding: 0 3px
-
.white-turn
background-color: white
&:hover
background-color: #cc99ff
+.game.reserve-div
+ margin-bottom: 18px
+
.reserve-count
padding-left: 40%
-.reserve-div
- margin-bottom: 20px
-
.reserve-row-1
margin-bottom: 15px
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
background-color: #e6ee9c
&:hover
background-color: skyblue
- .choice-piece
- width: 90%
- max-width: 100%
+ &.choice-piece
+ width: 100%
height: auto
display: block
.highlight
background-color: #00cc66 !important
+.in-shadow
+ filter: brightness(50%)
+
.incheck
background-color: #cc3300 !important
margin-left: 0
margin-right: 0
+#modal-eog+div .card
+ overflow: hidden
+
+#actions
+ margin: 10px 0
+
// Rules section:
.warn
.diagram
display: block
width: 40%
- //min-width: 300px
- max-width: 800px
+ 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: 500px)
+ @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: 500px)
+ @media screen and (max-width: 630px)
float: none
margin: 0 auto
figcaption
display: block
clear: both
padding-top: 5px
-
-.spaceleft
- margin-left: 30px
+ font-size: 0.8em
p.boxed
background-color: #FFCC66
#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
+#problemControls
+ width: 75%
+ margin: 0 auto
+ @media screen and (max-width: 767px)
+ width: 100%
+ margin: 0
-.clearer
- clear: both
+.problem
+ margin: 10px 0