AMAZEHOME/TypeWords
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upddate ui layout

Browse Source
This commit is contained in:
zyronon
2023-12-05 02:05:49 +08:00
parent 4e674fdd27
commit 7a2f0eb983
8 changed files with 81 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/assets/css/style.scss
View File

@@ -19,7 +19,7 @@
--color-header-bg: white;
--color-tooltip-bg: white;
--color-tooltip-shadow: #bbbbbb;
--color-font-1: black;
--color-font-1: rgb(91, 91, 91);
--color-font-2: rgb(46, 46, 46);
--color-font-3: rgb(75, 85, 99);
--color-font-active-1: white;
@@ -27,13 +27,16 @@
--color-main-active: rgb(12, 140, 233);
--color-scrollbar: rgb(147, 173, 227);
--color-gray: gray;
--color-sub-gray: #c0bfbf;
--practice-wrapper-padding-right: 1px;
--practice-wrapper-translateX: 1px;
--article-width: 50vw;
--toolbar-width: 700rem;
--toolbar-height: 54rem;
--panel-width: 400rem;
--space: 20rem;
--panel-margin-left: calc(50% - var(--practice-wrapper-padding-right) / 2 + var(--toolbar-width) / 2 + 24rem);
--panel-margin-left: calc(50% - var(--practice-wrapper-translateX) / 2 + var(--toolbar-width) / 2 + 24rem);
--article-panel-margin-left: calc(50% - var(--practice-wrapper-translateX) / 2 + var(--article-width) / 2 + 24rem);
--anim-time: 0.5s;
--color-input-bg: white;
@@ -41,10 +44,9 @@
--color-textarea-bg: white;
--font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
--word-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
}
html.dark {
@@ -69,9 +71,9 @@ html.dark {
--color-font-3: rgba(255, 255, 255, 0.3);
--color-gray: #bebebe;
--color-sub-gray: #383737;
--color-scrollbar: rgb(59, 87, 138);
--color-scrollbar: rgb(77, 78, 81);
--color-main-active: rgb(147, 173, 227);
--color-scrollbar: rgb(92, 93, 94);
--color-input-bg: rgba(14, 18, 23, 1);
@@ -83,11 +85,13 @@ html.dark {
@media (max-width: 1680px) {
:root {
--practice-wrapper-padding-right: 25vw;
--practice-wrapper-translateX: -12vw;
--toolbar-width: 40vw;
--article-width: 60vw;
--panel-width: 380rem;
--toolbar-height: 48rem;
--panel-margin-left: calc(50% - var(--practice-wrapper-padding-right) / 2 + var(--toolbar-width) / 2 + 9vw);
--panel-margin-left: calc(50vw + var(--practice-wrapper-translateX) + var(--toolbar-width) / 2 + 5vw);
--article-panel-margin-left: calc(50% + var(--practice-wrapper-translateX) + var(--article-width) / 2 + 48rem);
}
.footer {
.bottom {
@@ -107,11 +111,13 @@ html.dark {
@media (max-width: 1366px) {
:root {
--space: 10rem;
--practice-wrapper-padding-right: 30vw;
--practice-wrapper-translateX: -22vw;
--article-width: 53vw;
--panel-width: 30vw;
--toolbar-width: 50vw;
--toolbar-height: 40rem;
--panel-margin-left: calc(50% - var(--practice-wrapper-padding-right) / 2 + var(--toolbar-width) / 2 + 9vw);
--panel-margin-left: calc(50vw + var(--practice-wrapper-translateX) + var(--toolbar-width) / 2 + 14vw);
--article-panel-margin-left: calc(50% + var(--practice-wrapper-translateX) + var(--article-width) / 2 + 12vw);
}
.footer {