docs: 新增 color-tokens 規範文件
This commit is contained in:
+257
-257
@@ -1,257 +1,257 @@
|
||||
/* iPad／平板 RWD — max-width ≤1180px（含 iPad 直／橫與小平板／小筆電） */
|
||||
|
||||
/* 頂欄漢堡：與 style.css 992 斷點一致，避免本檔 1180 規則把選單列壓回橫排 */
|
||||
@media (max-width: 991px) {
|
||||
|
||||
.portal-nav>ul {
|
||||
flex: none;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portal-nav>ul>li>a {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
|
||||
html:has(.portal-nav) {
|
||||
scroll-padding-top: clamp(52px, 12vw, 76px);
|
||||
}
|
||||
|
||||
nav:not(.portal-nav) {
|
||||
padding-left: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
padding-right: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
}
|
||||
|
||||
.portal-nav {
|
||||
padding-left: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
padding-right: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
row-gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portal-nav>ul {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portal-nav .logo {
|
||||
width: min(240px, 38vw);
|
||||
max-width: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.portal-nav>ul {
|
||||
flex-wrap: wrap;
|
||||
gap: clamp(12px, 2vw, 18px);
|
||||
justify-content: flex-end;
|
||||
min-width: 0;
|
||||
flex: 1 1 280px;
|
||||
}
|
||||
|
||||
.portal-nav>ul>li>a {
|
||||
min-height: 44px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
nav:not(.portal-nav):not(.bilivideo-episode-nav) ul {
|
||||
gap: clamp(12px, 2vw, 20px);
|
||||
}
|
||||
|
||||
header.inner-page-header {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
header#origin .hero .site-header-inner .main-title {
|
||||
font-size: clamp(1.75rem, 2.25vw + 1rem, 2.35rem);
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: clamp(1rem, 1.5vw + 0.65rem, 1.15rem);
|
||||
}
|
||||
|
||||
.container,
|
||||
.content-container {
|
||||
padding-left: clamp(14px, 1.5vw + 10px, 22px);
|
||||
padding-right: clamp(14px, 1.5vw + 10px, 22px);
|
||||
}
|
||||
|
||||
.home-page .container {
|
||||
padding-left: clamp(14px, 1.5vw + 10px, 22px);
|
||||
padding-right: clamp(14px, 1.5vw + 10px, 22px);
|
||||
}
|
||||
|
||||
section {
|
||||
padding: clamp(26px, 3vw + 18px, 36px) clamp(16px, 2.5vw + 12px, 28px) !important;
|
||||
}
|
||||
|
||||
.story-grid {
|
||||
gap: clamp(18px, 4vw, 28px);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: clamp(18px, 4vw, 26px);
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
padding: clamp(10px, 2vw, 14px);
|
||||
}
|
||||
|
||||
/* 首頁／跨時空軌跡：鑽石主軸在平板改左側縱線（對齊舊 ≤900px 邏輯） */
|
||||
.merged-storyline::before {
|
||||
left: 18px;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node {
|
||||
width: calc(100% - 44px);
|
||||
margin-left: 44px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(odd),
|
||||
.merged-storyline .story-node:nth-of-type(even) {
|
||||
margin-left: 44px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node::before {
|
||||
left: -39px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node::after,
|
||||
.merged-storyline .story-node:nth-of-type(odd)::after,
|
||||
.merged-storyline .story-node:nth-of-type(even)::after {
|
||||
left: 12px;
|
||||
right: auto;
|
||||
top: -14px;
|
||||
transform: rotate(-8deg);
|
||||
transform-origin: center center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1.2;
|
||||
padding: 4px 9px;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(odd)::before,
|
||||
.merged-storyline .story-node:nth-of-type(even)::before {
|
||||
left: -39px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(odd),
|
||||
.merged-storyline .story-node:nth-of-type(even) {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
/* 紀實長卷／pillar 段落 */
|
||||
.chronicle-reader,
|
||||
.chronicle-pager {
|
||||
max-width: min(920px, 100%);
|
||||
}
|
||||
|
||||
.variety-block {
|
||||
padding: clamp(18px, 4vw, 22px);
|
||||
}
|
||||
|
||||
.site-header-inner .main-title {
|
||||
letter-spacing: clamp(3px, 1vw, 6px);
|
||||
}
|
||||
|
||||
.map-layout {
|
||||
grid-template-columns: minmax(280px, 42%) minmax(0, 1fr);
|
||||
gap: clamp(16px, 3vw, 22px);
|
||||
}
|
||||
|
||||
.map-my-maps-frame {
|
||||
height: min(52vh, 520px);
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.map-embed-all {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 重逢區兩張演唱會大卡之間留白 */
|
||||
#stage-now {
|
||||
gap: clamp(36px, 5vw, 50px);
|
||||
}
|
||||
|
||||
/* 演唱會卡片內距 */
|
||||
.con-1,
|
||||
.con-2,
|
||||
.con-3,
|
||||
.con-4,
|
||||
#yellownote-stage {
|
||||
padding: clamp(32px, 5vw, 44px) clamp(22px, 5vw, 48px) !important;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: clamp(24px, 5vw, 40px) !important;
|
||||
font-size: clamp(1.15rem, 2.8vw, 1.45rem);
|
||||
}
|
||||
|
||||
.concert-container {
|
||||
padding-left: clamp(12px, 3vw, 20px);
|
||||
padding-right: clamp(12px, 3vw, 20px);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.concert-page .search-input:focus {
|
||||
width: min(100%, 440px);
|
||||
}
|
||||
|
||||
.concert-page img[src*="assets/images/concert/"] {
|
||||
width: min(560px, 88%);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 歌詞頁 */
|
||||
body.lyrics-page {
|
||||
margin: clamp(24px, 5vw, 56px) !important;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html:has(body.lyrics-page) {
|
||||
font-size: 118.75% !important;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table {
|
||||
border-spacing: clamp(12px, 3vw, 24px) !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body.lyrics-page .main-left {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table p {
|
||||
font-size: 1.2rem !important;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
body.lyrics-page h1 {
|
||||
font-size: clamp(1.6rem, 5vw, 2.1rem) !important;
|
||||
}
|
||||
}
|
||||
/* iPad／平板 RWD — max-width ≤1180px（含 iPad 直／橫與小平板／小筆電） */
|
||||
|
||||
/* 頂欄漢堡：與 style.css 992 斷點一致，避免本檔 1180 規則把選單列壓回橫排 */
|
||||
@media (max-width: 991px) {
|
||||
|
||||
.portal-nav>ul {
|
||||
flex: none;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portal-nav>ul>li>a {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
|
||||
html:has(.portal-nav) {
|
||||
scroll-padding-top: clamp(52px, 12vw, 76px);
|
||||
}
|
||||
|
||||
nav:not(.portal-nav) {
|
||||
padding-left: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
padding-right: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
}
|
||||
|
||||
.portal-nav {
|
||||
padding-left: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
padding-right: clamp(14px, 2vw + 10px, 32px) !important;
|
||||
row-gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portal-nav>ul {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.portal-nav .logo {
|
||||
width: min(240px, 38vw);
|
||||
max-width: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.portal-nav>ul {
|
||||
flex-wrap: wrap;
|
||||
gap: clamp(12px, 2vw, 18px);
|
||||
justify-content: flex-end;
|
||||
min-width: 0;
|
||||
flex: 1 1 280px;
|
||||
}
|
||||
|
||||
.portal-nav>ul>li>a {
|
||||
min-height: 44px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
nav:not(.portal-nav):not(.bilivideo-episode-nav) ul {
|
||||
gap: clamp(12px, 2vw, 20px);
|
||||
}
|
||||
|
||||
header.inner-page-header {
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
header#origin .hero .site-header-inner .main-title {
|
||||
font-size: clamp(1.75rem, 2.25vw + 1rem, 2.35rem);
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: clamp(1rem, 1.5vw + 0.65rem, 1.15rem);
|
||||
}
|
||||
|
||||
.container,
|
||||
.content-container {
|
||||
padding-left: clamp(14px, 1.5vw + 10px, 22px);
|
||||
padding-right: clamp(14px, 1.5vw + 10px, 22px);
|
||||
}
|
||||
|
||||
.home-page .container {
|
||||
padding-left: clamp(14px, 1.5vw + 10px, 22px);
|
||||
padding-right: clamp(14px, 1.5vw + 10px, 22px);
|
||||
}
|
||||
|
||||
section {
|
||||
padding: clamp(26px, 3vw + 18px, 36px) clamp(16px, 2.5vw + 12px, 28px) !important;
|
||||
}
|
||||
|
||||
.story-grid {
|
||||
gap: clamp(18px, 4vw, 28px);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: clamp(18px, 4vw, 26px);
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
padding: clamp(10px, 2vw, 14px);
|
||||
}
|
||||
|
||||
/* 首頁／跨時空軌跡：鑽石主軸在平板改左側縱線（對齊舊 ≤900px 邏輯） */
|
||||
.merged-storyline::before {
|
||||
left: 18px;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node {
|
||||
width: calc(100% - 44px);
|
||||
margin-left: 44px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(odd),
|
||||
.merged-storyline .story-node:nth-of-type(even) {
|
||||
margin-left: 44px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node::before {
|
||||
left: -39px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node::after,
|
||||
.merged-storyline .story-node:nth-of-type(odd)::after,
|
||||
.merged-storyline .story-node:nth-of-type(even)::after {
|
||||
left: 12px;
|
||||
right: auto;
|
||||
top: -14px;
|
||||
transform: rotate(-8deg);
|
||||
transform-origin: center center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1.2;
|
||||
padding: 4px 9px;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(odd)::before,
|
||||
.merged-storyline .story-node:nth-of-type(even)::before {
|
||||
left: -39px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.merged-storyline .story-node:nth-of-type(odd),
|
||||
.merged-storyline .story-node:nth-of-type(even) {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
/* 紀實長卷／pillar 段落 */
|
||||
.chronicle-reader,
|
||||
.chronicle-pager {
|
||||
max-width: min(920px, 100%);
|
||||
}
|
||||
|
||||
.variety-block {
|
||||
padding: clamp(18px, 4vw, 22px);
|
||||
}
|
||||
|
||||
.site-header-inner .main-title {
|
||||
letter-spacing: clamp(3px, 1vw, 6px);
|
||||
}
|
||||
|
||||
.map-layout {
|
||||
grid-template-columns: minmax(280px, 42%) minmax(0, 1fr);
|
||||
gap: clamp(16px, 3vw, 22px);
|
||||
}
|
||||
|
||||
.map-my-maps-frame {
|
||||
height: min(52vh, 520px);
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.map-embed-all {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 重逢區兩張演唱會大卡之間留白 */
|
||||
#stage-now {
|
||||
gap: clamp(36px, 5vw, 50px);
|
||||
}
|
||||
|
||||
/* 演唱會卡片內距 */
|
||||
.con-1,
|
||||
.con-2,
|
||||
.con-3,
|
||||
.con-4,
|
||||
#yellownote-stage {
|
||||
padding: clamp(32px, 5vw, 44px) clamp(22px, 5vw, 48px) !important;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: clamp(24px, 5vw, 40px) !important;
|
||||
font-size: clamp(1.15rem, 2.8vw, 1.45rem);
|
||||
}
|
||||
|
||||
.concert-container {
|
||||
padding-left: clamp(12px, 3vw, 20px);
|
||||
padding-right: clamp(12px, 3vw, 20px);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.concert-page .search-input:focus {
|
||||
width: min(100%, 440px);
|
||||
}
|
||||
|
||||
.concert-page img[src*="assets/images/concert/"] {
|
||||
width: min(560px, 88%);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 歌詞頁 */
|
||||
body.lyrics-page {
|
||||
margin: clamp(24px, 5vw, 56px) !important;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html:has(body.lyrics-page) {
|
||||
font-size: 118.75% !important;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table {
|
||||
border-spacing: clamp(12px, 3vw, 24px) !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body.lyrics-page .main-left {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body.lyrics-page .lyrics-main-table p {
|
||||
font-size: 1.2rem !important;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
body.lyrics-page h1 {
|
||||
font-size: clamp(1.6rem, 5vw, 2.1rem) !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user