New Member

Here's solution for moving UI3 widget from the bottom to the top

0 replies
126 views

If anyone else is annoyed with the new UI toolbar (toolbelt) being at the bottom of the screen instead of top - here’s CSS which puts it on top and shrinks it when not used:

div[class^="positioned_design_toolbelt--root"] {
    bottom: auto;
    top: 12px;
    transition: all 0.25s ease;
    max-width: 300px;
    margin: auto !important;
}

div[class^="positioned_design_toolbelt--root"]:not(.positioned_design_toolbelt--root--INYO4:hover, :has([style*="display: contents"])) {
    bottom: auto;
    max-width: 46px;
    overflow: hidden;
    border-radius: 8px;  
    opacity: 0.2;  
}

div[class^="positioned_design_toolbelt--root"]:not(div[class^="positioned_design_toolbelt--root"]:hover, :has([style*="display: contents"])) button {
    opacity: 0;
    transition: all 0.2s ease;
}

div[class^="positioned_design_toolbelt--root"] [data-keyboard-receiver]>*,
div[class^="positioned_design_toolbelt--root"] [data-keyboard-receiver]>*>* {
  top: 50px;
  height: fit-content;
}