optimization: remove magic number (marktext#403)

Author: Jocs

src/renderer/app.vue

@@ -138,7 +138,7 @@
 
 <style scoped>
   .editor-container {
-    padding-top: 25px;
+    padding-top: var(--titleBarHeight);
   }
   .editor-container .hide {
     z-index: -1;
@@ -148,7 +148,7 @@
   }
   .editor-middle {
     display: flex;
-    min-height: calc(100vh - 25px);
+    min-height: calc(100vh - var(--titleBarHeight));
     & > .editor {
       flex: 1;
     }

src/renderer/components/editorWithTabs/index.vue

@@ -62,7 +62,7 @@
     flex: 1;
     display: flex;
     flex-direction: column;
-    height: calc(100vh - 25px);
+    height: calc(100vh - var(--titleBarHeight));
     overflow: hidden;
     & > .container {
       flex: 1;

src/renderer/components/editorWithTabs/sourceCode.vue

@@ -122,7 +122,7 @@
 
 <style>
   .source-code {
-    height: calc(100vh - 25px);
+    height: calc(100vh - var(--titleBarHeight));
     box-sizing: border-box;
     overflow: auto;
   }

src/renderer/components/sideBar/index.vue

@@ -142,7 +142,7 @@
 <style scoped>
   .side-bar {
     display: flex;
-    height: calc(100vh - 25px);
+    height: calc(100vh - var(--titleBarHeight));
     position: relative;
     color: var(--secondaryColor);
   }

src/renderer/components/titleBar.vue

@@ -167,7 +167,7 @@
     -webkit-app-region: drag;
     user-select: none;
     width: 100%;
-    height: 25px;
+    height: var(--titleBarHeight);
     box-sizing: border-box;
     color: #F2F6FC;
     position: fixed;
@@ -189,7 +189,7 @@
   .title {
     padding: 0 100px;
     height: 100%;
-    line-height: 25px;
+    line-height: var(--titleBarHeight);
     font-size: 14px;
     text-align: center;
     transition: all .25s ease-in-out;
@@ -266,8 +266,8 @@
   .frameless-titlebar-button {
     position: relative;
     display: block;
-    width: 25px;
-    height: 25px;
+    width: var(--titleBarHeight);
+    height: var(--titleBarHeight);
   }
   .frameless-titlebar-button > div {
     position: absolute;

src/renderer/index.css

@@ -9,6 +9,7 @@
   --darkInputBgColor: rgb(54, 55, 49);
   --darkInputColor: rgb(255, 255, 255);
   --darkHoverColor: rgb(70, 70, 70);
+  --titleBarHeight: 25px;
 }
 .icon {
   width: 1em; height: 1em;