lila/ui/round/css/_moves-col1.scss

114 lines
1.7 KiB
SCSS

/* context: .rmoves */
@include breakpoint($mq-col1) {
overflow: hidden;
.col1-moves {
flex: 0 0 $col1-moves-height;
display: flex;
.fbt {
flex: 0 0 auto;
padding: 0 1.3em;
opacity: .7;
}
body.playing.zen & {
visibility: hidden;
}
}
#{$moves-tag} {
flex: 1 1 100%;
display: flex;
align-items: stretch;
white-space: nowrap;
overflow-x: scroll;
color: $c-font-page;
@if $theme-light {
box-shadow: 0 4px 4px c-light($c-bg-page, 78%) inset;
}
@else {
box-shadow: 0 4px 12px #000 inset;
}
&::-webkit-scrollbar {
height: 0px;
}
> :first-child {
margin-left: auto !important;
}
}
#{$index-tag},
#{$move-tag},
.result-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: 0 .3rem;
}
#{$index-tag} {
padding-right: .15em;
}
#{$move-tag} {
font-size: 1.1em;
cursor: pointer;
&.#{$active-class},
&:hover {
@if $theme-light {
background: hsl($c-site-hue, 20%, 85%);
}
@else {
background: $c-bg-zebra;
}
}
&.#{$active-class} {
color: $c-font-clearer;
}
}
.buttons {
display: none;
}
.result {
margin: 0;
font-weight: bold;
font-size: 1.1em;
}
.message {
flex: 0 0 $col1-moves-height;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.2;
br {
display: none;
}
strong {
margin-left: .5em;
}
&::before {
margin-right: .3em;
}
body.playing.zen & {
display: none;
}
}
.status {
display: none;
}
}