diff --git a/ui/analyse/css/_layout.scss b/ui/analyse/css/_layout.scss index 392a13b7a8a1..0b08c629afb3 100644 --- a/ui/analyse/css/_layout.scss +++ b/ui/analyse/css/_layout.scss @@ -1,3 +1,5 @@ +$analyse-block-gap: $block-gap-half; + body { /* prevents scroll bar flicker on page height changes */ overflow-y: scroll; @@ -83,7 +85,7 @@ body { 'uchat'; @include breakpoint($mq-col2) { - grid-template-columns: var(--col2-uniboard-width) var(--gauge-gap) $col2-uniboard-table; + grid-template-columns: var(--col2-uniboard-width) $analyse-block-gap $col2-uniboard-table; grid-template-rows: fit-content(0); grid-template-areas: 'board gauge tools' @@ -102,7 +104,7 @@ body { } &__underboard { - margin-top: 23px; + margin-top: $analyse-block-gap; } .eval-gauge { @@ -111,11 +113,11 @@ body { } @include breakpoint($mq-col2-uniboard-squeeze) { - grid-template-columns: $col2-uniboard-squeeze-width var(--gauge-gap) $col2-uniboard-squeeze-table; + grid-template-columns: $col2-uniboard-squeeze-width $analyse-block-gap $col2-uniboard-squeeze-table; } @include breakpoint($mq-col3) { - grid-template-columns: $col3-uniboard-side var(--gauge-gap) var(--col3-uniboard-width) var(--gauge-gap) $col3-uniboard-table; + grid-template-columns: $col3-uniboard-side $analyse-block-gap var(--col3-uniboard-width) $analyse-block-gap $col3-uniboard-table; grid-template-rows: auto $chat-height 2.5em 1fr; grid-template-areas: 'side . board gauge tools' @@ -128,6 +130,7 @@ body { } .mchat { + margin-top: 0; min-height: 10em; } diff --git a/ui/analyse/css/_zh.scss b/ui/analyse/css/_zh.scss index d4d6f602c2a8..2b83b030a8ad 100644 --- a/ui/analyse/css/_zh.scss +++ b/ui/analyse/css/_zh.scss @@ -59,11 +59,11 @@ $pocket-height: 60px; @include breakpoint($mq-col1) { .pocket { &-top { - margin-bottom: $analyse-block-gap; + margin-bottom: $block-gap-half; } &-bottom { - margin-top: $analyse-block-gap; + margin-top: $block-gap-half; } } } diff --git a/ui/analyse/css/study/relay/_layout.scss b/ui/analyse/css/study/relay/_layout.scss index f9fe89c5e6f0..d8c88fddbe5a 100644 --- a/ui/analyse/css/study/relay/_layout.scss +++ b/ui/analyse/css/study/relay/_layout.scss @@ -56,7 +56,7 @@ main.is-relay.has-relay-tour { } @include breakpoint($mq-col3) { - grid-template-columns: $col3-uniboard-side var(--gauge-gap) var(--col3-uniboard-width) var(--gauge-gap) $col3-uniboard-table; + grid-template-columns: $col3-uniboard-side $block-gap-half var(--col3-uniboard-width) $block-gap-half $col3-uniboard-table; grid-template-rows: $mq-col3-side-height; grid-template-areas: 'side . relay-tour relay-tour relay-tour' diff --git a/ui/ceval/css/_eval-gauge.scss b/ui/ceval/css/_eval-gauge.scss index cd28cf6815df..ad0177eae63c 100644 --- a/ui/ceval/css/_eval-gauge.scss +++ b/ui/ceval/css/_eval-gauge.scss @@ -1,10 +1,5 @@ -body { - @include fluid-size('--gauge-gap', 8px, 17px); -} -$analyse-block-gap: var(--gauge-gap); - .eval-gauge { - width: var(--gauge-gap); + width: $block-gap-half; position: relative; background: if($theme-light, #fff, #a0a0a0); overflow: hidden; diff --git a/ui/common/css/abstract/_uniboard.scss b/ui/common/css/abstract/_uniboard.scss index dcc18a8fe515..6a7e631a1b73 100644 --- a/ui/common/css/abstract/_uniboard.scss +++ b/ui/common/css/abstract/_uniboard.scss @@ -18,8 +18,10 @@ $col3-uniboard-controls: 3rem; $col3-min-bottom-margin: 1rem; $col3-uniboard-max-width: calc( - 100vw - #{$col3-uniboard-side-min} - #{$block-gap} - var(--gauge-gap, #{$block-gap}) - #{$col3-uniboard-table-min} - - 2 * var(--main-margin, 0px) - #{$scrollbar-width} + 100vw - #{$col3-uniboard-side-min} - #{$block-gap} - #{$col3-uniboard-table-min} - 2 * var( + --main-margin, + 0px + ) - #{$scrollbar-width} ); $col3-uniboard-max-height: calc(100vh - #{$site-header-outer-height} - #{$col3-min-bottom-margin}); $col3-uniboard-max-size: min(#{$col3-uniboard-max-width}, #{$col3-uniboard-max-height}); @@ -45,7 +47,7 @@ $col2-uniboard-table: $col3-uniboard-table; $col2-uniboard-controls: $col3-uniboard-controls; $col2-uniboard-max-width: calc( - 100vw - var(--gauge-gap, #{$block-gap}) - #{$col3-uniboard-table-min} - 2 * var(--main-margin, 0px) - #{$scrollbar-width} + 100vw - #{$block-gap-half} - #{$col3-uniboard-table-min} - 2 * var(--main-margin, 0px) - #{$scrollbar-width} ); $col2-uniboard-max-height: $col3-uniboard-max-height; $col2-uniboard-max-size: min(#{$col2-uniboard-max-width}, #{$col2-uniboard-max-height}); diff --git a/ui/common/css/abstract/_variables.scss b/ui/common/css/abstract/_variables.scss index 78a752891dcc..abe180b984c4 100644 --- a/ui/common/css/abstract/_variables.scss +++ b/ui/common/css/abstract/_variables.scss @@ -5,11 +5,11 @@ $img-path: '../images'; $viewport-min-width: 320px; -$block-gap: 2vmin; +$block-gap: 1.5vmin; $block-gap-half: 1vmin; -$block-gap-h: 2vh; -$block-gap-w: 2vw; +$block-gap-h: 1.5vh; +$block-gap-w: 1.5vw; $block-gap-w-half: 1vw; $box-radius-size: 4px; diff --git a/ui/puzzle/css/_layout.scss b/ui/puzzle/css/_layout.scss index bde71ac523b0..c863980d6c4b 100644 --- a/ui/puzzle/css/_layout.scss +++ b/ui/puzzle/css/_layout.scss @@ -1,3 +1,5 @@ +$puzzle-block-gap: $block-gap-half; + #main-wrap { --main-max-width: calc(100vh - #{$site-header-outer-height} - #{$col1-uniboard-controls}); @@ -55,14 +57,14 @@ } grid-template-areas: 'board' 'controls' 'tools' 'session' 'kb-move' 'side'; - grid-row-gap: $block-gap; + grid-row-gap: $puzzle-block-gap; &__moves { display: none; } @include breakpoint($mq-col2) { - grid-template-columns: var(--col2-uniboard-width) var(--gauge-gap) $col2-uniboard-table; + grid-template-columns: var(--col2-uniboard-width) $puzzle-block-gap $col2-uniboard-table; grid-template-rows: fit-content(0); grid-template-areas: 'board gauge tools' @@ -76,7 +78,7 @@ } @include breakpoint($mq-col2-uniboard-squeeze) { - grid-template-columns: $col2-uniboard-squeeze-width var(--gauge-gap) $col2-uniboard-squeeze-table; + grid-template-columns: $col2-uniboard-squeeze-width $puzzle-block-gap $col2-uniboard-squeeze-table; } @include breakpoint($mq-col3) { @@ -85,12 +87,12 @@ 'side . session . controls' 'side . kb-move . controls' 'side . . . .'; - grid-template-columns: $col3-uniboard-side $block-gap var(--col3-uniboard-width) var(--gauge-gap) $col3-uniboard-table; + grid-template-columns: $col3-uniboard-side $puzzle-block-gap var(--col3-uniboard-width) $block-gap-half $col3-uniboard-table; } &__side { display: grid; - grid-gap: $block-gap; + grid-gap: $puzzle-block-gap; grid-template-areas: 'user' 'theme' 'metas' 'config'; .puzzle-replay & { diff --git a/ui/puzzle/css/_tools.scss b/ui/puzzle/css/_tools.scss index 09c86069e1ab..a28518299356 100644 --- a/ui/puzzle/css/_tools.scss +++ b/ui/puzzle/css/_tools.scss @@ -130,13 +130,13 @@ position: relative; height: $col3-uniboard-controls; - margin-top: #{-$block-gap}; + margin-top: #{-$puzzle-block-gap}; @include breakpoint($mq-col1) { height: $col1-uniboard-controls; } - // height: calc(#{$puzzle-history-height} + #{$block-gap}); + // height: calc(#{$puzzle-history-height} + #{$puzzle-block-gap}); .jumps { position: relative; flex: 1 1 auto;