feat: Material You!

src/assets/styles/index.scss

@@ -17,6 +17,8 @@ body {
   --selection-color: #f5f5f5;
   --scroller-color: #90939980;
   --background-color: #ffffff;
+  --background-color-alpha: rgba(24, 103, 192, 0.1);
+  --border-radius: 12px;
 }
 
 ::selection {

src/assets/styles/layout.scss

@@ -18,6 +18,7 @@
     -moz-user-select: none;
     -ms-user-select: none;
     overflow: hidden;
+    background-color: var(--background-color-alpha);
 
     $maxLogo: 100px;
 
@@ -71,6 +72,7 @@
     position: relative;
     flex: 1 1 75%;
     height: 100%;
+    background-color: var(--background-color-alpha);
 
     .the-bar {
       position: absolute;
@@ -87,8 +89,8 @@
       position: absolute;
       top: 0;
       left: 0;
-      right: 2px;
-      bottom: 10px;
+      right: 28px;
+      bottom: 28px;
     }
   }
 }

src/assets/styles/page.scss

@@ -6,7 +6,7 @@
 
   > header {
     flex: 0 0 58px;
-    width: 90%;
+    width: 100%;
     // max-width: 850px;
     margin: 0 auto;
     padding-right: 4px;
@@ -16,20 +16,27 @@
     justify-content: space-between;
   }
 
-  > section {
-    position: relative;
-    flex: 1 1 100%;
-    width: 100%;
+  .base-container {
     height: 100%;
-    overflow: auto;
-    padding: 8px 0;
-    box-sizing: border-box;
-    scrollbar-gutter: stable;
+    overflow: hidden;
+    border-radius: var(--border-radius);
 
-    .base-content {
-      width: 90%;
-      // max-width: 850px;
-      margin: 0 auto;
+    > section {
+      position: relative;
+      flex: 1 1 100%;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      padding: 28px 0;
+      box-sizing: border-box;
+      scrollbar-gutter: stable;
+      background-color: var(--background-color);
+
+      .base-content {
+        width: 90%;
+        // max-width: 850px;
+        margin: 0 auto;
+      }
     }
   }
 }