From e862a97cd01407a1a161557b954e8c746e8403b8 Mon Sep 17 00:00:00 2001 From: Sivan Date: Mon, 4 May 2020 23:55:36 +0800 Subject: [PATCH] fix: fix panel list font --- _site/index.css | 14 +++++++------- _site/scss/components/_panel-list.scss | 1 - _site/scss/index.scss | 1 + 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/_site/index.css b/_site/index.css index a98c654..2e1b601 100644 --- a/_site/index.css +++ b/_site/index.css @@ -136,7 +136,7 @@ ul, li { list-style: none; } @media screen and (min-width: 640px) and (prefers-color-scheme: dark) { .container[data-bg-grid="grid-12"] { background-image: linear-gradient(transparent 11px, #333333 1px), linear-gradient(to left, transparent 48px, #333333, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 77, 77, 0.4), transparent 49px); } .container[data-bg-grid="grid-24"] { background-image: linear-gradient(transparent 23px, #333333 1px), linear-gradient(to left, transparent 48px, #333333, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 77, 77, 0.4), transparent 49px); } } -.panel-list { --bg-color: hsl(240, 100%, 100%); --bg-tap-color: hsl(300, 3%, 94%); --border-color: hsla(0, 0%, 76%, 0.88); --border-inline-start-color: hsl(0, 0%, 76%); --border-inline-end-color: hsl(0, 0%, 76%); --border-block-start-color: hsl(0, 0%, 79%); --border-block-end-color: hsl(0, 0%, 65%); --text-color: hsl(60, 1%, 16%); --box-shadow-color: hsla(0, 0%, 86%, 0.54); --bg-highlight-color-start: hsl(216, 87%, 70%); --bg-highlight-color-end: hsl(215, 93%, 52%); --bg-highlight-tap-color-start: hsl(216, 92%, 65%); --bg-highlight-tap-color-end: hsl(215, 95%, 44%); --border-highlight-color: hsla(216, 90%, 57%, 0.88); --border-highlight-tap-color: hsla(216, 85%, 52%, 0.88); --border-inline-start-highlight-color: hsl(216, 90%, 57%); --border-inline-end-highlight-color: hsl(216, 90%, 57%); --border-inline-start-highlight-tap-color: hsl(216, 85%, 52%); --border-inline-end-highlight-tap-color: hsl(216, 85%, 52%); --border-block-start-highlight-color: hsl(216, 87%, 63%); --border-block-end-highlight-color: hsl(215, 99%, 49%); --border-block-start-highlight-tap-color: hsl(216, 93%, 57%); --border-block-end-highlight-tap-color: hsl(216, 100%, 42%); --text-highlight-color: hsl(0, 0%, 100%); display: inline-flex; margin: 0; padding: 0; list-style-type: none; margin-inline-start: 16px; } +.panel-list { --bg-color: hsl(240, 100%, 100%); --bg-tap-color: hsl(300, 3%, 94%); --border-color: hsla(0, 0%, 76%, 0.88); --border-inline-start-color: hsl(0, 0%, 76%); --border-inline-end-color: hsl(0, 0%, 76%); --border-block-start-color: hsl(0, 0%, 79%); --border-block-end-color: hsl(0, 0%, 65%); --text-color: hsl(60, 1%, 16%); --box-shadow-color: hsla(0, 0%, 86%, 0.54); --bg-highlight-color-start: hsl(216, 87%, 70%); --bg-highlight-color-end: hsl(215, 93%, 52%); --bg-highlight-tap-color-start: hsl(216, 92%, 65%); --bg-highlight-tap-color-end: hsl(215, 95%, 44%); --border-highlight-color: hsla(216, 90%, 57%, 0.88); --border-highlight-tap-color: hsla(216, 85%, 52%, 0.88); --border-inline-start-highlight-color: hsl(216, 90%, 57%); --border-inline-end-highlight-color: hsl(216, 90%, 57%); --border-inline-start-highlight-tap-color: hsl(216, 85%, 52%); --border-inline-end-highlight-tap-color: hsl(216, 85%, 52%); --border-block-start-highlight-color: hsl(216, 87%, 63%); --border-block-end-highlight-color: hsl(215, 99%, 49%); --border-block-start-highlight-tap-color: hsl(216, 93%, 57%); --border-block-end-highlight-tap-color: hsl(216, 100%, 42%); --text-highlight-color: hsl(0, 0%, 100%); display: inline-flex; margin: 0; padding: 0; list-style-type: none; } .panel-list--gray { --bg-color: hsl(180, 100%, 100%); --bg-tap-color: hsl(0, 0%, 94%); --border-color: hsla(0, 0%, 72%, 0.88); --border-inline-start-color: hsl(0, 0%, 76%); --border-inline-end-color: hsl(0, 0%, 76%); --border-block-start-color: hsl(0, 0%, 79%); --border-block-end-color: hsl(0, 0%, 65%); --text-color: hsl(0, 0%, 16%); --box-shadow-color: hsla(0, 0%, 86%, 0.54); --bg-highlight-color-start: hsl(225, 3%, 70%); --bg-highlight-color-end: hsl(228, 2%, 58%); --bg-highlight-tap-color-start: hsl(228, 2%, 58%); --bg-highlight-tap-color-end: hsl(240, 3%, 35%); --border-highlight-color: hsla(225, 2%, 64%, 0.88); --border-highlight-tap-color: hsla(228, 2%, 47%, 0.88); --border-inline-start-highlight-color: hsl(240, 3%, 59%); --border-inline-end-highlight-color: hsl(228, 2%, 54%); --border-inline-start-highlight-tap-color: hsl(240, 3%, 39%); --border-inline-end-highlight-tap-color: hsl(228, 3%, 39%); --border-block-start-highlight-color: hsl(240, 3%, 66%); --border-block-end-highlight-color: hsl(228, 2%, 50%); --border-block-start-highlight-tap-color: hsl(228, 2%, 51%); --border-block-end-highlight-tap-color: hsl(228, 4%, 26%); --text-highlight-color: hsl(0, 0%, 92%); } @@ -145,16 +145,16 @@ ul, li { list-style: none; } .panel-list + .panel-list { margin-inline-start: 12px; } +.panel-list label { position: relative; display: block; box-sizing: border-box; height: 20px; padding: 0; padding-inline-start: 12px; padding-inline-end: 12px; border: 1px solid; font-size: 12px; line-height: 18px; text-align: center; user-select: none; background-color: var(--bg-color); border-color: var(--border-color); border-block-start-color: var(--border-block-start-color); border-block-end-color: var(--border-block-end-color); color: var(--text-color); box-shadow: 0 1px 0 var(--box-shadow-color); } + +.panel-list label:active { background-color: var(--bg-tap-color); } + .panel-list li { margin-inline-end: -1px; } .panel-list li:first-child label { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-inline-start-color: var(--border-inline-start-color); } .panel-list li:last-child label { border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-inline-end-color: var(--border-inline-end-color); } -.panel-list label { position: relative; display: block; box-sizing: border-box; height: 20px; padding: 0; padding-inline-start: 12px; padding-inline-end: 12px; border: 1px solid; font-size: 12px; line-height: 18px; text-align: center; user-select: none; background-color: var(--bg-color); border-color: var(--border-color); border-block-start-color: var(--border-block-start-color); border-block-end-color: var(--border-block-end-color); color: var(--text-color); box-shadow: 0 1px 0 var(--box-shadow-color); } - -.panel-list label:active { background-color: var(--bg-tap-color); } - .panel-list input { display: none; } .panel-list input:checked + label { z-index: 1; background-image: linear-gradient(to bottom, var(--bg-highlight-color-start), var(--bg-highlight-color-end)); border-color: var(--border-highlight-color); border-block-start-color: var(--border-block-start-highlight-color); border-block-end-color: var(--border-block-end-highlight-color); color: var(--text-highlight-color); } @@ -183,7 +183,7 @@ ul, li { list-style: none; } .card__vertical-container { border-color: #333333; } } /** 基础样式 **/ -body { background-color: white; } +body { font-family: -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, "Heti Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background-color: white; } a { color: #4387f4; text-decoration: none; } @@ -195,7 +195,7 @@ a { color: #4387f4; text-decoration: none; } .article__nav ol { margin-block-start: 24px; margin-block-end: 24px; } /** 控制栏样式 **/ -.panel { position: fixed; z-index: 2; right: 12px; top: 12px; display: flex; text-align: right; } +.panel { position: fixed; z-index: 2; right: 14px; top: 14px; display: flex; text-align: right; } /** 演示区块 **/ .demo { margin-block-start: 24px; margin-block-end: 24px; } diff --git a/_site/scss/components/_panel-list.scss b/_site/scss/components/_panel-list.scss index c819e64..849a0c5 100644 --- a/_site/scss/components/_panel-list.scss +++ b/_site/scss/components/_panel-list.scss @@ -112,7 +112,6 @@ margin: 0; padding: 0; list-style-type: none; - margin-inline-start: 16px; & + & { margin-inline-start: 12px; diff --git a/_site/scss/index.scss b/_site/scss/index.scss index 970f3ec..2dd49db 100644 --- a/_site/scss/index.scss +++ b/_site/scss/index.scss @@ -12,6 +12,7 @@ /** 基础样式 **/ body { + font-family: -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, "Heti Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background-color: hsl(0, 0%, 100%); }