Browse Source

chore: 优化样式

i18n
xiaoxian521 2 years ago
parent
commit
f7ba97c73e
  1. 18
      index.html
  2. 4
      src/style/element-plus.scss
  3. 35
      src/style/index.scss
  4. 224
      src/style/reset.scss
  5. 5
      src/style/sidebar.scss
  6. 2
      tsconfig.json

18
index.html

@ -36,9 +36,7 @@
border-radius: 50%; border-radius: 50%;
width: 2.5em; width: 2.5em;
height: 2.5em; height: 2.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both; animation-fill-mode: both;
-webkit-animation: loadAnimation 1.8s infinite ease-in-out;
animation: loadAnimation 1.8s infinite ease-in-out; animation: loadAnimation 1.8s infinite ease-in-out;
} }
@ -48,10 +46,7 @@
margin: 80px auto; margin: 80px auto;
position: relative; position: relative;
text-indent: -9999em; text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s; animation-delay: -0.16s;
top: 0; top: 0;
transform: translate(-50%, 0); transform: translate(-50%, 0);
@ -66,7 +61,6 @@
.loader:before { .loader:before {
left: -3.5em; left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s; animation-delay: -0.32s;
} }
@ -74,18 +68,6 @@
left: 3.5em; left: 3.5em;
} }
@-webkit-keyframes loadAnimation {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
@keyframes loadAnimation { @keyframes loadAnimation {
0%, 0%,
80%, 80%,

4
src/style/element-plus.scss

@ -36,7 +36,7 @@
z-index: 99999 !important; z-index: 99999 !important;
} }
/* 重置button中icon的margin */
/* 重置 el-button icon margin */
.reset-margin [class*="el-icon"] + span { .reset-margin [class*="el-icon"] + span {
margin-left: 2px !important; margin-left: 2px !important;
} }
@ -46,7 +46,7 @@
padding: 0 !important; padding: 0 !important;
} }
/* nprogress适配ep的primary */
/* nprogress 适配 element-plus 的主题色 */
#nprogress { #nprogress {
& .bar { & .bar {
background-color: var(--el-color-primary) !important; background-color: var(--el-color-primary) !important;

35
src/style/index.scss

@ -5,36 +5,11 @@
@import "./dark.scss"; @import "./dark.scss";
@import "./tailwind.css"; @import "./tailwind.css";
/* 自定义全局 CssVar */
:root { :root {
--pure-transition-duration: 0.016s; --pure-transition-duration: 0.016s;
} }
body {
width: 100%;
height: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
html {
width: 100%;
height: 100%;
box-sizing: border-box;
}
#app {
width: 100%;
height: 100%;
}
/* 头部用户信息样式重置 */
.hidden {
display: none !important;
}
/* 灰色模式 */ /* 灰色模式 */
.html-grey { .html-grey {
filter: grayscale(100%); filter: grayscale(100%);
@ -45,14 +20,6 @@ html {
filter: invert(80%); filter: invert(80%);
} }
.pc-spacing {
margin: 10px;
}
.mobile-spacing {
margin: 0;
}
/* 重置 vxe-table 中 pager 样式 */ /* 重置 vxe-table 中 pager 样式 */
.vxe-pager .vxe-pager--num-btn:not(.is--disabled).is--active { .vxe-pager .vxe-pager--num-btn:not(.is--disabled).is--active {
color: #fff !important; color: #fff !important;

224
src/style/reset.scss

@ -1,67 +1,49 @@
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*, *,
::before, ::before,
::after { ::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: currentColor; /* 2 */
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: currentColor;
} }
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/
#app {
width: 100%;
height: 100%;
}
html { html {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */
tab-size: 4; /* 3 */
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
tab-size: 4;
width: 100%;
height: 100%;
box-sizing: border-box;
} }
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body { body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
margin: 0;
line-height: inherit;
width: 100%;
height: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
} }
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr { hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 1px; /* 3 */
height: 0;
color: inherit;
border-top-width: 1px;
} }
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) { abbr:where([title]) {
text-decoration: underline dotted; text-decoration: underline dotted;
} }
/*
Remove the default font size and weight for headings.
*/
h1, h1,
h2, h2,
h3, h3,
@ -72,50 +54,29 @@ h6 {
font-weight: inherit; font-weight: inherit;
} }
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a { a {
color: inherit; color: inherit;
text-decoration: inherit; text-decoration: inherit;
} }
/*
Add the correct font weight in Edge and Safari.
*/
b, b,
strong { strong {
font-weight: bolder; font-weight: bolder;
} }
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code, code,
kbd, kbd,
samp, samp,
pre { pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace; /* 1 */
font-size: 1em; /* 2 */
"Liberation Mono", "Courier New", monospace;
font-size: 1em;
} }
/*
Add the correct font size in all browsers.
*/
small { small {
font-size: 80%; font-size: 80%;
} }
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub, sub,
sup { sup {
font-size: 75%; font-size: 75%;
@ -132,132 +93,73 @@ sup {
top: -0.5em; top: -0.5em;
} }
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table { table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
} }
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button, button,
input, input,
optgroup, optgroup,
select, select,
textarea { textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
font-family: inherit;
font-size: 100%;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
} }
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button, button,
select { select {
text-transform: none; text-transform: none;
} }
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button, button,
[type="button"], [type="button"],
[type="reset"], [type="reset"],
[type="submit"] { [type="submit"] {
-webkit-appearance: button; /* 1 */
background-image: none; /* 2 */
-webkit-appearance: button;
background-image: none;
} }
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring { :-moz-focusring {
outline: auto; outline: auto;
} }
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid { :-moz-ui-invalid {
box-shadow: none; box-shadow: none;
} }
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress { progress {
vertical-align: baseline; vertical-align: baseline;
} }
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button, ::-webkit-inner-spin-button,
::-webkit-outer-spin-button { ::-webkit-outer-spin-button {
height: auto; height: auto;
} }
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type="search"] { [type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
-webkit-appearance: textfield;
outline-offset: -2px;
} }
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration { ::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button { ::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
-webkit-appearance: button;
font: inherit;
} }
/*
Add the correct display in Chrome and Safari.
*/
summary { summary {
display: list-item; display: list-item;
} }
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote, blockquote,
dl, dl,
dd, dd,
@ -291,47 +193,25 @@ menu {
padding: 0; padding: 0;
} }
/*
Prevent resizing textareas horizontally by default.
*/
textarea { textarea {
resize: vertical; resize: vertical;
} }
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::placeholder, input::placeholder,
textarea::placeholder { textarea::placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
opacity: 1;
color: #9ca3af;
} }
/*
Set the default cursor for buttons.
*/
button, button,
[role="button"] { [role="button"] {
cursor: pointer; cursor: pointer;
} }
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled { :disabled {
cursor: default; cursor: default;
} }
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img, img,
svg, svg,
video, video,
@ -340,24 +220,16 @@ audio,
iframe, iframe,
embed, embed,
object { object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
display: block;
vertical-align: middle;
} }
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img, img,
video { video {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
/*
Ensure the default browser behavior of the `hidden` attribute.
*/
[hidden] { [hidden] {
display: none; display: none;
} }

5
src/style/sidebar.scss

@ -1,6 +1,5 @@
@mixin merge-style(
/* vertical模式下主体内容距离网页文档左侧的距离 */ $sideBarWidth
) {
/* $sideBarWidth: vertical 模式下主体内容距离网页文档左侧的距离 */
@mixin merge-style($sideBarWidth) {
$menuActiveText: #7a80b4; $menuActiveText: #7a80b4;
@media screen and (min-width: 150px) and (max-width: 420px) { @media screen and (min-width: 150px) and (max-width: 420px) {

2
tsconfig.json

@ -42,5 +42,5 @@
"mock/*.ts", "mock/*.ts",
"vite.config.ts" "vite.config.ts"
], ],
"exclude": ["node_modules", "dist", "**/*.js"]
"exclude": ["node_modules", "dist", "**/*.js", "index.html"]
} }
Loading…
Cancel
Save