Continue workin on project UI.

core.html

@@ -59,6 +59,8 @@
                 </div>
             </div>
 
+            <div class="top-bar-spacer"></div>
+
             <div class="left-bar">
                 <div class="control-button">
                     <button
@@ -114,8 +116,8 @@
 
             <div class="submission-container">
                 <div class="title">
-                    <p class="name"></p>
-                    <p class="description"></p>
+                    <p class="name">Project</p>
+                    <p class="description">This is simple project description, it only would tell You what it is, or what it could be.</p>
                 </div>
 
                 <div class="content">
@@ -123,17 +125,7 @@
             </div>
 
             <div class="elements-bar">
-                <div class="control-buttons">
-                    <button
-                        name="close-it"
-                        class="close-it"
-                        type="button">
-                    <span 
-                        class="material-symbols-outlined">
-                        close
-                    </span>
-                    </button>
-
+                <div class="control-button">
                     <button
                         name="open-it"
                         class="open-it"
@@ -144,6 +136,45 @@
                     </span>
                     </button>
                 </div>
+
+                <div class="items-list">
+                    <div class="list-item">
+                        <span 
+                            class="material-symbols-outlined">
+                            layers
+                        </span>
+                        <p>
+                            Element 1
+                        </p>
+                    </div>
+                    <div class="list-item">
+                        <span 
+                            class="material-symbols-outlined">
+                            layers
+                        </span>
+                        <p>
+                            Element 2
+                        </p>
+                    </div>
+                    <div class="list-item">
+                        <span 
+                            class="material-symbols-outlined">
+                            layers
+                        </span>
+                        <p>
+                            Element 3
+                        </p>
+                    </div>
+                    <div class="list-item">
+                        <span 
+                            class="material-symbols-outlined">
+                            layers
+                        </span>
+                        <p>
+                            Element 4
+                        </p>
+                    </div>
+                </div>
             </div>
 
             <div class="element-container">

theme/core.css

@@ -4,3 +4,5 @@
 @import url("./top_bar.css");
 @import url("./left_bar.css");
 @import url("./items_list.css");
+@import url("./elements_bar.css");
+@import url("./submission_container.css");

theme/elements_bar.css

@@ -0,0 +1,31 @@
+.elements-bar {
+    position: fixed;
+    box-sizing: border-box;
+    width: 300px;
+    top: 50%;
+    right: 0px;
+    transform: translateY(-50%);
+    max-height: 80%;
+    background-color: var(--elements-bar-color);
+    border-radius: var(--padding) 0 0 var(--padding);
+    padding: var(--padding);
+    color: var(--font-color);
+    min-height: calc(var(--padding) * 6.5);
+    transition: transform 0.5s;
+}
+
+.elements-bar .control-button button {
+    position: absolute;
+    top: calc(var(--padding) * 2);
+    right: 100%;
+    border: none;
+    background-color: var(--elements-bar-color);
+    color: var(--font-color);
+    padding: calc(var(--padding) / 2);
+    border-radius: calc(var(--padding) / 2) 0 0 calc(var(--padding) / 2);
+    transition: transform 0.5s;
+}
+
+.elements-bar .control-button button:hover {
+    transform: scale(1.2);
+}

theme/items_list.css

@@ -37,18 +37,3 @@
     color: var(--left-bar-color);
 }
 
-.control-button button {
-    position: absolute;
-    top: calc(var(--padding) * 2);
-    left: 100%;
-    border: none;
-    background-color: var(--left-bar-color);
-    color: var(--font-color);
-    padding: calc(var(--padding) / 2);
-    border-radius: 0 calc(var(--padding) / 2) calc(var(--padding) / 2) 0;
-    transition: transform 0.5s;
-}
-
-.control-button button:hover {
-    transform: scale(1.2);
-}

theme/left_bar.css

@@ -3,10 +3,29 @@
     position: fixed;
     width: 300px;
     top: 50%;
+    left: 0px;
     transform: translateY(-50%);
     max-height: 80%;
     background-color: var(--left-bar-color);
     border-radius: 0 var(--padding) var(--padding) 0;
     padding: var(--padding);
     color: var(--font-color);
+    min-height: calc(var(--padding) * 6.5);
+    transition: transform 0.5s;
+}
+
+.left-bar .control-button button {
+    position: absolute;
+    top: calc(var(--padding) * 2);
+    left: 100%;
+    border: none;
+    background-color: var(--left-bar-color);
+    color: var(--font-color);
+    padding: calc(var(--padding) / 2);
+    border-radius: 0 calc(var(--padding) / 2) calc(var(--padding) / 2) 0;
+    transition: transform 0.5s;
+}
+
+.left-bar .control-button button:hover {
+    transform: scale(1.2);
 }

theme/submission_container.css

@@ -0,0 +1,9 @@
+.submission-container {
+    box-sizing: border-box;
+    width: 100%;
+    height: calc(100vh - var(--font-size) - var(--padding) * 3);
+    background-color: var(--submission-container-color);
+    padding: var(--padding);
+    font-size: var(--font-size);
+    color: var(--font-color);
+}

theme/top_bar.css

@@ -5,6 +5,18 @@
     flex-wrap: nowrap;
     justify-content: space-between;
     align-items: center;
+    height: calc(var(--font-size) + var(--padding) * 3);
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+}
+
+.top-bar-spacer {
+    height: calc(var(--font-size) + var(--padding) * 3);
+    width: 100%;
+    margin: 0px;
+    padding: 0px;
 }
 
 .top-bar .project-name-bar {