diff --git a/src/controls.ts b/src/controls.ts index 42531d9..a47a760 100644 --- a/src/controls.ts +++ b/src/controls.ts @@ -32,11 +32,14 @@ export class URDFControls extends GUI { this.domElement.setAttribute('class', 'dg main urdf-gui'); this._workspaceFolder = this.addFolder('Workspace'); - this._workspaceFolder.domElement.setAttribute('class', 'dg workspace-folder'); - + this._workspaceFolder.domElement.setAttribute( + 'class', + 'dg workspace-folder' + ); + this._sceneFolder = this.addFolder('Scene'); this._sceneFolder.domElement.setAttribute('class', 'dg scene-folder'); - + this._jointsFolder = this.addFolder('Joints'); this._jointsFolder.domElement.setAttribute('class', 'dg joints-folder'); } diff --git a/style/base.css b/style/base.css index 991fbe0..78527b6 100644 --- a/style/base.css +++ b/style/base.css @@ -14,10 +14,9 @@ ); --gui-color-font: var(--jp-ui-font-color1); --gui-color-accent: var(--jp-brand-color0); - --gui-transparent: rgba(0, 0, 0, 0); } -.jp-urdf-canvas .lm-Widget canvas { +.jp-urdf-canvas canvas { width: 100%; height: 100%; } @@ -31,17 +30,13 @@ } .urdf-gui li.folder { - /* border: 0.4em solid var(--gui-transparent) !important; */ border-left: 0.4em solid black !important; border-right: 0.4em solid black; } .urdf-gui li.title { - margin: 0 0 0.5em 0 !important; -} - -.urdf-gui .cr.function:hover { - background: var(--gui-transparent) !important; + margin: 0 !important; + margin-bottom: 0.5em; } .urdf-gui .cr.function .property-name { @@ -68,7 +63,11 @@ color: var(--gui-color-font); border: none !important; text-shadow: none; - padding: 0.2em 0.4em 0.2em 0.4em; + padding: 0.2em 0.4em; +} + +.urdf-gui .cr.function:hover { + background: var(--gui-color-background) !important; } .urdf-gui .cr.string input[type='text'], @@ -100,7 +99,8 @@ } .urdf-gui .c .slider { - margin: 0.5em 0 0 0; + margin: 0; + margin-top: 0.5em; height: 1em; background: var(--gui-color-background) !important; border: 1px solid var(--gui-color-title-bg); @@ -117,7 +117,7 @@ border: 1px solid var(--gui-color-font); border-radius: 3px; margin: -1px; - opacity: 50%; + opacity: 0.5; } .urdf-gui .joints-folder {