Continue working on theme.

core.html

@@ -120,12 +120,20 @@
 
             <div class="submission-container">
                 <div class="submission-description">
+                    <p class="title">Sample submission description</p>
                     <p class="description">This is simple project description, it only would tell You what it is, or what it could be.</p>
                    
                     <div class="control-button">
                         <button
                             name="close-it"
-
+                            class="close-it"
+                            type="button">
+                        <span 
+                            class="material-symbols-outlined">
+                            close
+                        </span>
+                        </button>
+                    </div>
                 </div>
         
                 <div class="content">

theme/colors.css

@@ -1,11 +1,13 @@
 .app.dark {
     --top-bar-color: #40376E;
     --submission-container-color: #36558F;
+    --submission-description-color: #3754FF;
     --left-bar-color: #376484;
     --elements-bar-color: #3F4563;
     --element-bar: #434553;
     --font-color: #FFFFFF;
     --reverse-font-color: #232323;
+    --close-color: #FF7F7F;
 }
 
 .app.light {
@@ -16,4 +18,5 @@
     --element-bar: #FFFFFF;
     --font-color: #000000;
     --reverse-font-color: #F8F8F8;
+    --close-color: #FF7F7F;
 }

theme/core.css

@@ -6,4 +6,3 @@
 @import url("./items_list.css");
 @import url("./elements_bar.css");
 @import url("./submission_container.css");
-@import url("./submission.css");

theme/submission.css

@@ -1,5 +1 @@
-.submission-name-bar {
-    color: var(--font-color); 
-}
 
-.submissio`

theme/submission_container.css

@@ -8,3 +8,63 @@
     color: var(--font-color);
 }
 
+.submission-container .submission-description {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: var(--submission-description-color);
+    color: var(--font-color);
+    padding: 20px;
+    border-radius: var(--padding);
+    z-index: 100;
+    box-sizing: border-box;
+    max-width: 600px;
+    max-height: 400px;
+    width: 90%;
+    height: 90%;
+}
+
+.submission-container .submission-description .control-button button {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    transform: translate(50%, -50%);
+    box-sizing: border-box;
+    width: calc(var(--padding) * 2);
+    height: calc(var(--padding) * 2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: calc(var(--padding) * 2);
+    outline: none !important;
+    border: 0px;
+    background-color: var(--close-color);
+    color: var(--reverse-font-color);
+    transition: background-color 0.5s, color 0.5s;
+}
+
+.submission-container .submission-description .control-button button:hover {
+    background-color: var(--font-color);
+    color: var(--close-color);
+}
+
+.submission-container .submission-description .title {
+    text-align: center;
+    font-weight: 700;
+    margin-bottom: calc(var(--padding) * 1.5);
+}
+
+
+.submission-container .submission-description .description {
+    text-align: justify;
+}
+
+.submission-name-bar {
+    color: var(--font-color); 
+    transition: transform 0.5s;
+}
+
+.submission-name-bar:hover {
+    transform: scale(1.1);
+}