diff --git a/frontend/src/app/main/ui/workspace/palette.scss b/frontend/src/app/main/ui/workspace/palette.scss index 995d886a0..70f0639e0 100644 --- a/frontend/src/app/main/ui/workspace/palette.scss +++ b/frontend/src/app/main/ui/workspace/palette.scss @@ -39,10 +39,7 @@ &.wide { width: 100%; } - &.mid-palette, - &.small-palette { - grid-template-columns: $s-64 auto 1fr; - } + .resize-area { grid-area: resize; height: $s-8; @@ -108,56 +105,62 @@ width: 100%; min-width: 0; } - .handler { - @include buttonStyle; - @include flexCenter; - width: $s-12; +} + +.handler { + @include buttonStyle; + @include flexCenter; + width: $s-12; + height: 100%; + .handler-btn { + width: $s-4; height: 100%; - .handler-btn { - width: $s-4; - height: 100%; - max-height: $s-40; - margin: $s-8 $s-4; - padding: 0; - border-radius: $s-4; - background-color: var(--palette-handler-background-color); - } - } - &.hidden-bts { - right: 10px; - z-index: 1; - width: 22px; - grid-template-columns: $s-8 auto 1fr; + max-height: $s-40; + margin: $s-8 $s-4; padding: 0; - &.small-palette, - &.mid-palette { - right: 10px; - } - .palette-btn-list { - opacity: $op-0; - visibility: hidden; - width: 0; - .palette-item { - opacity: $op-0; - visibility: hidden; - z-index: 0; - } - } - .resize-area { - visibility: hidden; - z-index: 0; - width: 0; - } - .palette-actions { - visibility: hidden; - z-index: 0; - } - .palette { - visibility: hidden; - z-index: 0; - } - .handler { - padding-bottom: $s-8; - } + border-radius: $s-4; + background-color: var(--palette-handler-background-color); + } +} + +.mid-palette, +.small-palette { + grid-template-columns: $s-64 auto 1fr; +} + +.hidden-bts { + right: $s-2; + z-index: $z-index-1; + width: 22px; + grid-template-columns: $s-8 auto 1fr; + padding: 0; + border-inline-start: 0; + border-start-start-radius: 0; + border-end-start-radius: 0; + .palette-btn-list { + opacity: $op-0; + visibility: hidden; + width: 0; + .palette-item { + opacity: $op-0; + visibility: hidden; + z-index: 0; + } + } + .resize-area { + visibility: hidden; + z-index: 0; + width: 0; + } + .palette-actions { + visibility: hidden; + z-index: 0; + } + .palette { + visibility: hidden; + z-index: 0; + } + .handler { + padding-bottom: $s-8; } } diff --git a/frontend/src/app/main/ui/workspace/text_palette.scss b/frontend/src/app/main/ui/workspace/text_palette.scss index faee2df1b..43bbe062b 100644 --- a/frontend/src/app/main/ui/workspace/text_palette.scss +++ b/frontend/src/app/main/ui/workspace/text_palette.scss @@ -124,9 +124,6 @@ } } &.small-item { - .typography-name { - height: $s-12; - } .typography-data, .typography-font { display: none; diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.cljs b/frontend/src/app/main/ui/workspace/top_toolbar.cljs index 86f3484df..2c20e9c25 100644 --- a/frontend/src/app/main/ui/workspace/top_toolbar.cljs +++ b/frontend/src/app/main/ui/workspace/top_toolbar.cljs @@ -108,7 +108,7 @@ (when-not ^boolean read-only? [:aside {:class (stl/css-case :main-toolbar true :not-rulers-present (not rulers?) - :hidden-toolbar hide-toolbar?)} + :main-toolbar-hidden hide-toolbar?)} [:ul {:class (stl/css :main-toolbar-options)} [:li [:button diff --git a/frontend/src/app/main/ui/workspace/top_toolbar.scss b/frontend/src/app/main/ui/workspace/top_toolbar.scss index 993953c89..aec2d2f6b 100644 --- a/frontend/src/app/main/ui/workspace/top_toolbar.scss +++ b/frontend/src/app/main/ui/workspace/top_toolbar.scss @@ -9,7 +9,6 @@ .main-toolbar { cursor: initial; position: absolute; - top: $s-28; left: calc(50% - $s-160); display: flex; align-items: center; @@ -24,6 +23,20 @@ top 0.3s, height 0.3s, opacity 0.3s; + &:not(.main-toolbar-hidden) { + top: $s-28; + } +} + +.main-toolbar-hidden { + top: $s-24; + height: $s-16; + z-index: $z-index-1; + border-radius: 0 0 $s-8 $s-8; + border-block-start: 0; + .main-toolbar-options { + opacity: $op-0; + } } .main-toolbar-options { @@ -76,16 +89,6 @@ } } -.main-toolbar.hidden-toolbar { - top: $s-20; - height: $s-16; - z-index: $z-index-1; - border-radius: 0 0 $s-8 $s-8; - .main-toolbar-options { - opacity: $op-0; - } -} - .main-toolbar.not-rulers-present { top: $s-8; &.hidden-toolbar {