/* ========================================================================== GitCards — Typecho Plugin Stylesheet 卡片样式，支持 GitHub / Coding / Gitee / GitLab 四种平台配色。 使用 CSS 自定义属性（变量）实现主题切换，避免重复代码。 ========================================================================== */ /* -------------------------------------------------------------------------- 平台主题变量 -------------------------------------------------------------------------- */ .gitcards-block[data-gitsite="1"] { /* GitHub — 深色主题 */ --gc-color: #f4f4f4; --gc-bg: #414141; --gc-tag-bg: #5a5a5a; --gc-link: #58a6ff; --gc-desc: rgba(244, 244, 244, 0.7); --gc-border: rgba(244, 244, 244, 0.1); --gc-tag-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M950.93 512q0 143.43-83.75 257.97T650.9 928.55q-15.43 2.85-22.6-4.02t-7.17-17.12V786.87q0-55.44-29.7-81.11 32.55-3.44 58.6-10.32t53.68-22.3T750 635.1t30.28-59.98 11.7-86.01q0-69.12-45.13-117.7 21.14-52-4.53-116.58-16.02-5.12-46.3 6.29t-52.6 25.16l-21.72 13.68Q568.54 285.1 512 285.1t-109.71 14.85q-9.15-6.3-24.29-15.43t-47.69-22.02-49.15-7.68Q256 319.4 277.14 371.41 232 419.99 232 489.1q0 48.56 11.7 85.72t30 59.98 46 38.25 53.68 22.3 58.6 10.32q-22.83 20.56-28.02 58.88-12 5.7-25.75 8.56t-32.55 2.85-37.45-12.29T276.48 728q-10.83-18.28-27.72-29.7t-28.3-13.67l-11.42-1.69q-12 0-16.6 2.56t-2.85 6.59 5.12 7.97 7.46 6.88l4.02 2.85q12.58 5.7 24.87 21.72t18 29.11l5.7 13.17q7.46 21.72 25.16 35.1T318.17 826t39.72 4.03 31.74-1.98l13.17-2.27q0 21.73.29 50.84t.3 30.86q0 10.32-7.47 17.12t-22.82 4.02Q240.57 884.6 156.82 770.05T73.07 512.07q0-119.44 58.88-220.3t159.74-159.75T512 73.14t220.3 58.88 159.75 159.75 58.88 220.3z' fill='rgba(244,244,244,0.6)'/%3E%3C/svg%3E"); } .gitcards-block[data-gitsite="2"] { /* Coding — 浅色主题 */ --gc-color: #433d3c; --gc-bg: #f4f4f4; --gc-tag-bg: #d8d8d8; --gc-link: #2962ff; --gc-desc: rgba(67, 61, 60, 0.7); --gc-border: rgba(67, 61, 60, 0.1); --gc-tag-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%201362%201024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200.016%22%20height%3D%22200%22%3E%3Cdefs%3E%3Cstyle%2F%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M396.699%20596.955c0%2014.475%209.773%2026.211%2021.827%2026.211%2012.057%200%2021.827-11.737%2021.827-26.211%200-14.475-9.773-26.211-21.827-26.211-12.057%200-21.827%2011.737-21.827%2026.211zM915.141%20596.955c0%2014.475%209.773%2026.211%2021.827%2026.211%2012.057%200%2021.827-11.737%2021.827-26.211%200-14.475-9.773-26.211-21.827-26.211-12.057%200-21.827%2011.737-21.827%2026.211z%22%20fill%3D%22rgba(67%2C61%2C60%2C.6)%22%2F%3E%3Cpath%20d%3D%22M1251.226%20428.593c-35.806%200-67.188%2022.704-84.729%2056.775-59.689-129.436-183.865-249.357-337.327-298.738-82.806-33.039-140.954-96.454-148.142-170.567-7.187%2074.114-65.335%20137.527-148.142%20170.567-153.462%2049.385-277.639%20169.299-337.327%20298.738-17.541-34.07-48.923-56.775-84.729-56.775-54.99%200-99.567%2053.524-99.567%20119.562%200%2066.03%2044.576%20119.562%2099.567%20119.562%2016.724%200%2032.475-4.972%2046.313-13.726%204.735%20214.402%20237.349%20353.577%20523.893%20353.951%20286.535-.371%20519.157-139.542%20523.893-353.951%2013.839%208.753%2029.593%2013.726%2046.313%2013.726%2054.99%200%2099.567-53.524%2099.567-119.562-.007-66.03-44.593-119.562-99.578-119.562zM156.086%20585.521c-4.658%2017.214-25.392%2024.543-46.313%2016.384s-34.105-28.731-29.444-45.945c4.658-17.214%2025.392-24.543%2046.313-16.384s34.105%2028.737%2029.444%2045.945zm524.937%20362.736c-229.82-.356-415.935-108.67-415.935-263.725%200-3.247.119-6.465.274-9.678.053-1.056.108-2.114.18-3.171.142-2.191.339-4.37.558-6.549a191.86%20191.86%200%200%201%201.062-8.719c.042-.287.076-.575.119-.858%204.626-30.474%2016.471-76.976%2034.358-103.783%2042.977-62.164%20119.634-103.578%20207.083-103.578%2067.324%200%20128.206%2024.588%20172.301%2064.238%2044.094-39.651%20104.974-64.238%20172.301-64.238%2087.453%200%20164.108%2041.42%20207.083%20103.578%2017.889%2026.801%2029.734%2073.307%2034.358%20103.783.042.287.076.575.119.858.429%202.892.771%205.804%201.062%208.719.215%202.179.411%204.352.558%206.549.071%201.056.125%202.114.18%203.171.157%203.211.274%206.43.274%209.678%200%20155.051-186.117%20263.359-415.935%20263.725zm571.249-346.355c-20.921%208.16-41.658.831-46.313-16.384s8.527-37.781%2029.444-45.945c20.921-8.16%2041.658-.831%2046.313%2016.384%204.658%2017.214-8.527%2037.781-29.444%2045.945z%22%20fill%3D%22rgba(67%2C61%2C60%2C.6)%22%2F%3E%3C%2Fsvg%3E"); } .gitcards-block[data-gitsite="3"] { /* Gitee — 红色主题 */ --gc-color: #ffffff; --gc-bg: #c71d23; --gc-tag-bg: #a5191e; --gc-link: #ffd0d0; --gc-desc: rgba(255, 255, 255, 0.75); --gc-border: rgba(255, 255, 255, 0.12); --gc-tag-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cpath%20d%3D%22M512%201024C229.234%201024%200%20794.766%200%20512S229.234%200%20512%200s512%20229.234%20512%20512-229.234%20512-512%20512zm259.157-568.889l-290.759.014c-13.966%200-25.287%2011.321-25.287%2025.273l-.028%2063.218c0%2013.966%2011.306%2025.287%2025.273%2025.287H657.38c13.966%200%2025.287%2011.307%2025.287%2025.273v12.644a75.847%2075.847%200%200%201-75.847%2075.847H366.606a25.287%2025.287%200%200%201-25.287-25.273v-240.2a75.847%2075.847%200%200%201%2075.847-75.846l353.92-.015c13.966%200%2025.273-11.306%2025.287-25.273l.071-63.189c0-13.966-11.306-25.287-25.272-25.301l-353.992.014c-104.718-.014-189.624%2084.892-189.624%20189.61v353.963c0%2013.967%2011.32%2025.287%2025.287%2025.287h372.935c94.265%200%20170.666-76.401%20170.666-170.666v-145.38c0-13.952-11.32-25.273-25.287-25.273z%22%20fill%3D%22rgba(251%2C250%2C245%2C.6)%22%2F%3E%3C%2Fsvg%3E"); } .gitcards-block[data-gitsite="4"] { /* GitLab — 橙色主题 */ --gc-color: #ffffff; --gc-bg: #fc6d26; --gc-tag-bg: #e2432a; --gc-link: #ffe0d0; --gc-desc: rgba(255, 255, 255, 0.75); --gc-border: rgba(255, 255, 255, 0.12); --gc-tag-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%201024%201024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Cpath%20d%3D%22M59.564%20399.464L512%20987.428%2016.148%20619.398C2.436%20609.114-3.276%20591.406%201.866%20575.412l57.698-175.948zm150.81-349.612c-6.284-17.708-31.418-17.708-37.702%200L59.564%20399.464h263.922L210.374%2049.852zm113.112%20349.612L512%20987.428l188.514-587.964H323.486zm698.648%20175.948l-57.698-175.948L512%20987.428l495.852-368.03c13.71-10.284%2019.422-27.992%2014.282-43.986zM851.326%2049.852c-6.284-17.708-31.418-17.708-37.702%200l-113.11%20349.612h263.922L851.326%2049.852z%22%20fill%3D%22rgba(251%2C250%2C245%2C.6)%22%2F%3E%3C%2Fsvg%3E"); } /* -------------------------------------------------------------------------- 卡片容器 -------------------------------------------------------------------------- */ .gitcards-block { --gc-radius: 10px; --gc-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12); --gc-shadow-hover: 0 5px 6px -1px rgba(0, 0, 0, 0.2), 0 9px 12px 0 rgba(0, 0, 0, 0.14), 0 1px 20px 0 rgba(0, 0, 0, 0.12); display: block; min-height: 120px; max-width: 800px; margin: 20px auto; padding: 10px 25px; border-radius: var(--gc-radius); background: var(--gc-bg); color: var(--gc-color); box-shadow: var(--gc-shadow); transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 14px; line-height: 1.6; box-sizing: border-box; overflow: hidden; } .gitcards-block:hover { box-shadow: var(--gc-shadow-hover); transform: translateY(-1px); } /* -------------------------------------------------------------------------- 卡片内容区 -------------------------------------------------------------------------- */ .gitcards-block .gitcard-body { position: relative; padding: 4px 0; } /* -------------------------------------------------------------------------- 平台标签 -------------------------------------------------------------------------- */ .gitcards-block .gitcard-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 26px; margin-bottom: 8px; border-radius: 4px; background: var(--gc-tag-bg); color: var(--gc-color); font-size: 12px; font-weight: 500; line-height: 20px; position: relative; } .gitcards-block .gitcard-tag::before { content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background-image: var(--gc-tag-icon); background-size: contain; background-repeat: no-repeat; background-position: center; } /* -------------------------------------------------------------------------- 仓库标题（owner / repo） -------------------------------------------------------------------------- */ .gitcards-block .gitcard-header { margin: 6px 0 4px; font-size: 18px; font-weight: 600; line-height: 1.4; word-break: break-all; } .gitcards-block .gitcard-header .ownername { color: var(--gc-desc); text-decoration: none; transition: color 0.15s ease; } .gitcards-block .gitcard-header .ownername:hover { color: var(--gc-color); text-decoration: underline; } .gitcards-block .gitcard-header .reponame { color: var(--gc-color); text-decoration: none; transition: color 0.15s ease; } .gitcards-block .gitcard-header .reponame:hover { color: var(--gc-link); text-decoration: underline; } /* -------------------------------------------------------------------------- 描述 -------------------------------------------------------------------------- */ .gitcards-block .desc { margin: 4px 0 8px; color: var(--gc-desc); font-size: 13px; line-height: 1.5; word-break: break-word; } .gitcards-block .desc .homepage { color: var(--gc-link); text-decoration: none; word-break: break-all; } .gitcards-block .desc .homepage:hover { text-decoration: underline; } /* -------------------------------------------------------------------------- 底部数据栏（stars / forks / viewmore） -------------------------------------------------------------------------- */ .gitcards-block .gitdata { display: flex; align-items: center; gap: 16px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--gc-border); } .gitcards-block .git-stars, .gitcards-block .git-forks { display: inline-flex; align-items: center; gap: 4px; color: var(--gc-desc); font-size: 13px; font-weight: 500; user-select: none; } .gitcards-block .git-stars .gc-icon { color: #f5c518; } .gitcards-block .git-forks .gc-icon { color: var(--gc-desc); } .gitcards-block .viewmore { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: var(--gc-color); text-decoration: none; transition: background 0.15s ease, transform 0.15s ease; } .gitcards-block .viewmore:hover { background: rgba(255, 255, 255, 0.12); transform: translateX(2px); } /* -------------------------------------------------------------------------- 图标通用样式 -------------------------------------------------------------------------- */ .gitcards-block .gc-icon { flex-shrink: 0; vertical-align: middle; } /* -------------------------------------------------------------------------- 加载动画（懒加载模式） -------------------------------------------------------------------------- */ .gitcards-block.gitcards-lazy { min-height: 120px; } .gitcards-block .gitcard-loading { display: flex; align-items: center; justify-content: center; min-height: 80px; } .gitcards-block .gc-spinner { width: 28px; height: 28px; border: 3px solid var(--gc-border); border-top-color: var(--gc-color); border-radius: 50%; animation: gc-spin 0.8s linear infinite; } @keyframes gc-spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- 降级卡片（API 失败时） -------------------------------------------------------------------------- */ .gitcards-block.gitcards-fallback .gitcard-header { font-size: 16px; } /* -------------------------------------------------------------------------- 响应式适配 -------------------------------------------------------------------------- */ @media (max-width: 600px) { .gitcards-block { margin: 16px 0; padding: 10px 16px; font-size: 13px; } .gitcards-block .gitcard-header { font-size: 16px; } .gitcards-block .gitdata { gap: 12px; } }