diff options
author | Matthew Kosarek <matthew.kosarek@vention.cc> | 2021-02-25 20:50:12 -0500 |
---|---|---|
committer | Matthew Kosarek <matthew.kosarek@vention.cc> | 2021-02-25 20:50:12 -0500 |
commit | 026abdb98ad30209df0e88795f25b1f74556585e (patch) | |
tree | 39c7e60ea78331ada41fc71bc5f6e5b91b5fd75c /frontend/index.css | |
parent | f0d1398b0d1b1a7c5bd1d4e0b3488b7f1aa74364 (diff) |
Updated the sidebar for usability's sake
Diffstat (limited to 'frontend/index.css')
-rw-r--r-- | frontend/index.css | 62 |
1 files changed, 55 insertions, 7 deletions
diff --git a/frontend/index.css b/frontend/index.css index 471f6f3..729768c 100644 --- a/frontend/index.css +++ b/frontend/index.css @@ -27,7 +27,7 @@ main { display: flex; flex-direction: row; color: #1a1a1a; - width: 1260px; + width: 1200px; background-color: white; flex: 1 1 100%; height: 100%; @@ -36,25 +36,73 @@ main { } section { + min-width: 74%; + width: 74%; overflow-y: auto; } +/* + Navigation bar +*/ nav { - width: 25%; + width: 20%; + min-width: 20%; + max-width: 20%; + margin-right: 5%; height: 100%; display: flex; flex-direction: column; text-align: left; font-size: 1rem; + user-select: none; + border-right: 1px solid black;; } -nav > ul { +.outer-tree { + width: 100%; list-style: none; - padding-left: 0px; + padding: 0; + margin: 0; +} + +.outer-tree > li > span { + display: block; + width: 100%; + cursor: pointer; + background: white; +} + +.outer-tree > li > span:hover { + color: gray; +} + +.outer-tree > li > span > i { + transition: 100ms ease-in-out transform; +} + +.outer-tree li.expanded > span > i { + display: inline-block; + transform: rotate(180deg); } -nav > ul > li > ul { +.inner-tree { padding-left: 1rem; + display: none; + list-style: none; +} + +.inner-tree > li > label { + color: blue; + font-weight: bold; + text-align: center; +} + +.inner-tree > li > a { + margin-left: 0.5rem; +} + +.outer-tree > li.expanded .inner-tree { + display: inherit; } nav a { @@ -147,7 +195,7 @@ article .opengl_canvas_container .play_button { height: 128px; position: absolute; top: calc(50% - 56px); - left: calc(50% - 220px); + left: calc(50% - 184px); border: 1px solid white; color: white; background-color: transparent; @@ -172,7 +220,7 @@ article .opengl_canvas_container .stop_button { height: 2rem; border-radius: 2px; top: 0.5rem; - left: 536px; + left: 496px; display: none; } |