https://wiki.hokubu.cn/w/index.php?action=history&feed=atom&title=%E6%A8%A1%E6%9D%BF%3AHomeCard%2Fstyle.css 2026-04-07T15:32:40Z 本wiki上该页面的版本历史 MediaWiki 1.43.3 https://wiki.hokubu.cn/w/index.php?title=%E6%A8%A1%E6%9D%BF:HomeCard/style.css&diff=334&oldid=prev 2024-04-17T15:02:56Z

<p>已保护“<a href="/wiki/%E6%A8%A1%E6%9D%BF:HomeCard/style.css" title="模板:HomeCard/style.css">模板:HomeCard/style.css</a>”（[编辑=仅允许管理员]（无限期）[移动=仅允许管理员]（无限期））</p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="zh-Hans-CN"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←上一版本</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">2024年4月17日 (三) 23:02的版本</td> </tr><tr><td colspan="4" class="diff-notice" lang="zh-Hans-CN"><div class="mw-diff-empty">（没有差异）</div> </td></tr> <!-- diff cache key hokubuwiki:diff:1.41:old-196:rev-334 --> </table>

MisakaAkio https://wiki.hokubu.cn/w/index.php?title=%E6%A8%A1%E6%9D%BF:HomeCard/style.css&diff=196&oldid=prev 2024-02-13T09:54:47Z

<p>创建页面，内容为“.home-card { position: relative; padding: 15px; background: var( --color-surface-1 ); border-radius: 15px; box-shadow: var(--homecard-box-shadow); font-size: 0.875rem; } .home-card table.timeline { margin-top: 0.2rem; } .home-card--col2 { grid-column: span 2; } .home-card--col3 { grid-column: span 3; } .home-card--col6 { grid-column: span 6; } .home-card--row2 { grid-row: span 2; } .home-card--row3 { grid-row: span 3; } .home-card--row4 { gr…”</p> <p><b>新页面</b></p><div>.home-card {<br /> position: relative;<br /> padding: 15px;<br /> background: var( --color-surface-1 );<br /> border-radius: 15px;<br /> box-shadow: var(--homecard-box-shadow);<br /> font-size: 0.875rem;<br /> }<br /> <br /> .home-card table.timeline {<br /> margin-top: 0.2rem;<br /> }<br /> <br /> .home-card--col2 {<br /> grid-column: span 2;<br /> }<br /> <br /> .home-card--col3 {<br /> grid-column: span 3;<br /> }<br /> <br /> .home-card--col6 {<br /> grid-column: span 6;<br /> }<br /> <br /> .home-card--row2 {<br /> grid-row: span 2;<br /> }<br /> <br /> .home-card--row3 {<br /> grid-row: span 3;<br /> }<br /> <br /> .home-card--row4 {<br /> grid-row: span 4;<br /> }<br /> <br /> .home-card--row8 {<br /> grid-row: span 8 / auto;<br /> }<br /> <br /> .home-card__label {<br /> color: var( --color-base--subtle );<br /> font-size: 0.8125rem;<br /> letter-spacing: 0.75px;<br /> }<br /> <br /> h3.home-card__header {<br /> margin-top: 0;<br /> font-size: 1rem;<br /> }<br /> <br /> .home-card__header a {<br /> display: flex;<br /> align-items: center;<br /> justify-content: space-between;<br /> }<br /> <br /> .home-card__header a:after {<br /> content: &#039;▶&#039;;<br /> font-size: 0.8125rem;<br /> }<br /> <br /> .home-card__background {<br /> position: absolute;<br /> top: 0;<br /> right: 0;<br /> bottom: 0;<br /> left: 0;<br /> background: #242a31;<br /> border-radius: 15px;<br /> }<br /> <br /> .home-card__background img {<br /> width: 100%;<br /> height: 100%;<br /> object-fit: cover;<br /> object-position: center;<br /> }<br /> <br /> .home-card__foreground {<br /> position: absolute;<br /> }<br /> <br /> .home-card__foreground .home-card__label {<br /> color: #bababa;<br /> }<br /> <br /> .home-card__foreground .home-card__header {<br /> color: #fff;<br /> }<br /> <br /> .home-card p {<br /> margin-top: 0.2rem;<br /> font-size: 0.875rem;<br /> }<br /> <br /> .home-card.home-card--button {<br /> overflow: hidden;<br /> padding: 0;<br /> background: #242a31;<br /> }<br /> <br /> .home-card--button a {<br /> display: flex;<br /> height: 100%;<br /> justify-content: center;<br /> align-items: center;<br /> padding: 0 15px;<br /> background: transparent;<br /> color: #fff;<br /> font-weight: 500;<br /> }<br /> <br /> .home-card--button .home-card__background a {<br /> padding: 0;<br /> }<br /> <br /> .home-card--button img {<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .home-card--button:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .card-button {<br /> background: var( --color-base );<br /> border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );<br /> transition: opacity 0.2s ease;<br /> }<br /> <br /> .card-button:hover {<br /> opacity: 0.8;<br /> }<br /> <br /> .card-button a {<br /> display: block;<br /> padding: 0.6rem;<br /> background: none !important;<br /> color: #fff!important;<br /> font-size: 0.875rem;<br /> font-weight: 600;<br /> letter-spacing: 0.25px;<br /> text-align: center;<br /> transition: background 0.2s ease, color 0.2s ease;<br /> }<br /> <br /> .home-grid {<br /> display: grid;<br /> grid: auto-flow dense/repeat( auto-fit, minmax( 9.375rem, 1fr ) );<br /> grid-auto-rows: minmax( 3rem, auto );<br /> grid-gap: 0.625rem;<br /> margin-top: 10px;<br /> }<br /> <br /> .home-grid--col2 {<br /> grid-template-columns: 1fr 1fr;<br /> }<br /> <br /> .home-grid a.external {<br /> background-image: none;<br /> }<br /> <br /> .home-card a:hover {<br /> text-decoration: unset!important;<br /> }<br /> <br /> .home-link {<br /> display: grid;<br /> margin-top: 6px;<br /> font-size: 0.875rem;<br /> font-weight: 500;<br /> grid-gap: 6px;<br /> text-align: center;<br /> }<br /> <br /> .home-link__button {<br /> display: flex;<br /> }<br /> <br /> .home-link__button a {<br /> flex-grow: 1;<br /> padding: 0.3rem 0.6rem;<br /> border: 1px solid;<br /> border-color: var( --border-color-base );<br /> background: var( --background-color-framed );<br /> border-radius: 12px;<br /> color: var( --color-base--emphasized );<br /> }<br /> <br /> .home-link__button a:hover {<br /> background: var( --background-color-framed--hover );<br /> }<br /> <br /> .home-link__button a:active {<br /> background: var( --background-color-framed--active );<br /> }<br /> <br /> .home-link__button a.external {<br /> color: var(--color-link)!important;<br /> }<br /> <br /> .keyboard-text {<br /> padding: 0 5px;<br /> border: 1px solid;<br /> margin: 0 2px;<br /> border-radius: 4px;<br /> }</div>

MisakaAkio