lila/ui/analyse/css/explorer/_config.scss

127 lines
2.2 KiB
SCSS

.explorer__config {
section,
.toggle {
margin: 0.4em $block-gap 0 $block-gap;
}
section.save {
text-align: center;
padding: 15px 0 10px 0;
}
label {
font-weight: bold;
display: block;
line-height: 2em;
}
.choices {
display: flex;
button {
@extend %metal;
flex-grow: 1;
padding: 5px 0;
text-align: center;
cursor: pointer;
@include transition;
border: $border;
border-width: 1px 0 1px 1px;
text-transform: capitalize;
&:first-child {
@extend %box-radius-left;
}
&:last-child {
@extend %box-radius-right;
border-right-width: 1px;
}
&:hover {
@extend %metal-hover;
}
&[aria-pressed='true'],
&.active {
background: $c-secondary;
color: $c-secondary-over;
text-shadow: 1px 0 0 rgba(0, 0, 0, 0.5);
font-weight: bold;
}
&[aria-pressed='true'] {
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2) inset;
}
}
}
.name {
> div {
@extend %flex-center;
}
.player-name {
border-radius: $box-radius-size !important;
font-weight: bold;
padding-right: 1em;
padding-left: 1em;
text-transform: none;
margin-right: 0.5em;
&.active:hover {
background: mix($c-secondary, white, 80);
}
}
.color {
margin-left: 1ch;
}
}
.toggle {
font-weight: bold;
display: block;
line-height: 2em;
}
.date {
label {
@extend %flex-between-nowrap;
}
input {
border: none;
background: none;
padding: 0.1em 0.5em;
&:invalid {
background: mix($c-error, $c-bg-box, 30%);
}
}
}
&__player__choice {
max-width: 70ch !important;
> div {
// for user complete
overflow: visible !important;
}
.input-wrapper {
// for user complete
overflow: visible !important;
position: relative;
display: inline-block;
padding-top: 2em;
margin-bottom: 2em;
}
.previous {
@extend %flex-wrap;
.button {
margin: 0.3em 0.2em;
text-transform: none;
}
}
}
}