From 4b32d6529b7c8aa4f96b0951928ee0bcf376e58c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9D=92=E8=8F=9C=E7=99=BD=E7=8E=89=E6=B1=A4?= <2075125282@qq.com> Date: Thu, 9 Oct 2025 19:17:04 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20reset.scss?= =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E5=85=A8=E5=B1=80=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E9=87=8D=E7=BD=AE=EF=BC=8C=E5=A2=9E=E5=BC=BA=E5=85=BC=E5=AE=B9?= =?UTF-8?q?=E6=80=A7=E5=92=8C=E5=8F=AF=E8=AF=BB=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/style/reset.scss | 570 +++++++++++++++++---------------------- 1 file changed, 241 insertions(+), 329 deletions(-) diff --git a/web/src/style/reset.scss b/web/src/style/reset.scss index 55b476fa24..fe879bf76a 100644 --- a/web/src/style/reset.scss +++ b/web/src/style/reset.scss @@ -1,136 +1,137 @@ -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - -html { - line-height: 1.15; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers. - */ +/* +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) +2. [UnoCSS]: allow to override the default border color with css var `--un-default-border-color` +*/ -body { - margin: 0; +*, +::before, +::after { + box-sizing: border-box; /* 1 */ + border-width: 0; /* 2 */ + border-style: solid; /* 2 */ + border-color: var(--un-default-border-color, #e5e7eb); /* 2 */ } -/** - * Render the `main` element consistently in IE. - */ +/* +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. +*/ -main { - display: block; +html { + line-height: 1.5; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -moz-tab-size: 4; /* 3 */ + tab-size: 4; /* 3 */ + font-family: + ui-sans-serif, + system-ui, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + 'Helvetica Neue', + Arial, + 'Noto Sans', + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji'; /* 4 */ + + // TODO: 在下一个大版本更新的时候需要改回正确的16px + font-size: 14px; } -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ +/* +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. +*/ -h1 { - font-size: 2em; - margin: 0.67em 0; +body { + margin: 0; /* 1 */ + line-height: inherit; /* 2 */ } -/* Grouping content - ========================================================================== */ - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ +/* +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 { - box-sizing: content-box; - /* 1 */ - height: 0; - /* 1 */ - overflow: visible; - /* 2 */ + height: 0; /* 1 */ + color: inherit; /* 2 */ + border-top-width: 1px; /* 3 */ } -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ -pre { - font-family: monospace, monospace; - /* 1 */ - font-size: 1em; - /* 2 */ +abbr:where([title]) { + text-decoration: underline dotted; } -/* Text-level semantics - ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ +/* +Remove the default font size and weight for headings. +*/ -a { - background-color: transparent; +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; } -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ -abbr[title] { - border-bottom: none; - /* 1 */ - text-decoration: underline; - /* 2 */ - text-decoration: underline dotted; - /* 2 */ +a { + color: inherit; + text-decoration: inherit; } -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ +/* +Add the correct font weight in Edge and Safari. +*/ b, strong { font-weight: bolder; } -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ +/* +1. Use the user's configured `mono` font family by default. +2. Correct the odd `em` font sizing in all browsers. +*/ code, kbd, -samp { - font-family: monospace, monospace; - /* 1 */ - font-size: 1em; - /* 2 */ +samp, +pre { + font-family: + ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* 1 */ + font-size: 1em; /* 2 */ } -/** - * Add the correct font size in all browsers. - */ +/* +Add the correct font size in all browsers. +*/ small { font-size: 80%; } -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ sub, sup { @@ -148,322 +149,233 @@ sup { top: -0.5em; } -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10. - */ +/* +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. +*/ -img { - border-style: none; +table { + text-indent: 0; /* 1 */ + border-color: inherit; /* 2 */ + border-collapse: collapse; /* 3 */ } -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ button, input, optgroup, select, textarea { - font-family: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - line-height: 1.15; - /* 1 */ - margin: 0; - /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { - /* 1 */ - overflow: visible; + font-family: inherit; /* 1 */ + font-feature-settings: inherit; /* 1 */ + font-variation-settings: inherit; /* 1 */ + font-size: 100%; /* 1 */ + font-weight: inherit; /* 1 */ + line-height: inherit; /* 1 */ + color: inherit; /* 1 */ + margin: 0; /* 2 */ + padding: 0; /* 3 */ } -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ button, select { - /* 1 */ text-transform: none; } -/** - * Correct the inability to style clickable types in iOS and Safari. - */ +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ button, [type='button'], [type='reset'], [type='submit'] { - -webkit-appearance: button; -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type='button']::-moz-focus-inner, -[type='reset']::-moz-focus-inner, -[type='submit']::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type='button']:-moz-focusring, -[type='reset']:-moz-focusring, -[type='submit']:-moz-focusring { - outline: 1px dotted ButtonText; + -webkit-appearance: button; /* 1 */ + /* background-color: transparent; */ + background-image: none; /* 2 */ } -/** - * Correct the padding in Firefox. - */ +/* +Use the modern Firefox focus style for all focusable elements. +*/ -fieldset { - padding: 0.35em 0.75em 0.625em; +:-moz-focusring { + outline: auto; } -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ -legend { - box-sizing: border-box; - /* 1 */ - color: inherit; - /* 2 */ - display: table; - /* 1 */ - max-width: 100%; - /* 1 */ - padding: 0; - /* 3 */ - white-space: normal; - /* 1 */ +:-moz-ui-invalid { + box-shadow: none; } -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ progress { vertical-align: baseline; } -/** - * Remove the default vertical scrollbar in IE 10+. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - -[type='checkbox'], -[type='radio'] { - box-sizing: border-box; - /* 1 */ - padding: 0; - /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ -[type='number']::-webkit-inner-spin-button, -[type='number']::-webkit-outer-spin-button { +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { height: auto; } -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ [type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ } -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ -[type='search']::-webkit-search-decoration { +::-webkit-search-decoration { -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-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* Interactive - ========================================================================== */ - /* - * Add the correct display in Edge, IE 10+, and Firefox. - */ +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ -details { - display: block; +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ } /* - * Add the correct display in all browsers. - */ +Add the correct display in Chrome and Safari. +*/ summary { display: list-item; } -/* Misc - ========================================================================== */ - -/** - * Add the correct display in IE 10+. - */ - -template { - display: none; -} - -/** - * Add the correct display in IE 10. - */ - -[hidden] { - display: none; -} +/* +Removes the default spacing and border for appropriate elements. +*/ -HTML, -body, -div, -ul, -ol, +blockquote, dl, -li, -dt, dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, p, -blockquote, -pre, -form, -fieldset, -table, -th, -td { - // border: none; - font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', - 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; - font-size: 14px; - margin: 0px; - padding: 0px; -} - -html, -body { - height: 100%; - width: 100%; -} - -address, -caption, -cite, -code, -th, -var { - font-style: normal; - font-weight: normal; -} - -a { - text-decoration: none; +pre { + margin: 0; } -input::-ms-clear { - display: none; +fieldset { + margin: 0; + padding: 0; } -input::-ms-reveal { - display: none; +legend { + padding: 0; } -input { - -webkit-appearance: none; +ol, +ul, +menu { + list-style: none; margin: 0; - outline: none; padding: 0; } -input::-webkit-input-placeholder { - color: #ccc; -} +/* +Prevent resizing textareas horizontally by default. +*/ -input::-ms-input-placeholder { - color: #ccc; +textarea { + resize: vertical; } -input::-moz-placeholder { - color: #ccc; +/* +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, +textarea::placeholder { + opacity: 1; /* 1 */ + color: #9ca3af; /* 2 */ } -input[type='submit'], -input[type='button'] { +/* +Set the default cursor for buttons. +*/ + +button, +[role='button'] { cursor: pointer; } -button[disabled], -input[disabled] { +/* +Make sure disabled buttons don't get the pointer cursor. +*/ +:disabled { cursor: default; } -img { - border: none; +/* +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, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; /* 1 */ + vertical-align: middle; /* 2 */ } -ul, -ol, -li { - list-style-type: none; +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ +[hidden] { + display: none; }