https://blockland.wiki/index.php?action=history&feed=atom&title=%E6%A8%A1%E6%9D%BF%3AIdeologyCompass%2Fstyles.css 2026-10-21T09:36:18Z 本wiki上该页面的版本历史 MediaWiki 1.46.0 https://blockland.wiki/index.php?title=%E6%A8%A1%E6%9D%BF:IdeologyCompass/styles.css&diff=1688&oldid=prev 2026-02-11T07:36:54Z

<p></p> <a href="https://blockland.wiki/index.php?title=%E6%A8%A1%E6%9D%BF:IdeologyCompass/styles.css&amp;diff=1688&amp;oldid=1687">显示更改</a>

KK https://blockland.wiki/index.php?title=%E6%A8%A1%E6%9D%BF:IdeologyCompass/styles.css&diff=1687&oldid=prev 2026-02-11T07:35:50Z

<p></p> <a href="https://blockland.wiki/index.php?title=%E6%A8%A1%E6%9D%BF:IdeologyCompass/styles.css&amp;diff=1687&amp;oldid=1686">显示更改</a>

KK https://blockland.wiki/index.php?title=%E6%A8%A1%E6%9D%BF:IdeologyCompass/styles.css&diff=1686&oldid=prev 2026-02-11T07:32:48Z

<p></p> <a href="https://blockland.wiki/index.php?title=%E6%A8%A1%E6%9D%BF:IdeologyCompass/styles.css&amp;diff=1686&amp;oldid=1659">显示更改</a>

KK https://blockland.wiki/index.php?title=%E6%A8%A1%E6%9D%BF:IdeologyCompass/styles.css&diff=1659&oldid=prev 2026-02-11T06:09:26Z

<p>创建页面，内容为“<span class="autocomment">容器：强制正方形 (兼容写法)：​</span> .ideology-compass { display: block; position: relative; width: 100%; height: 0; padding-bottom: 100%; <span class="autocomment">核心：用padding撑开高度，保持1:1：​</span> box-sizing: border-box; <span class="autocomment">边框：​</span> border: 1px solid #a2a9b1; border: 1px solid var(--border-color-base, #a2a9b1); <span class="autocomment">背景色：​</span> background-color: #ffffff; background-color: var(--background-color-surface,…”</p> <p><b>新页面</b></p><div>/* 容器：强制正方形 (兼容写法) */<br /> .ideology-compass {<br /> display: block;<br /> position: relative;<br /> width: 100%;<br /> height: 0;<br /> padding-bottom: 100%; /* 核心：用padding撑开高度，保持1:1 */<br /> box-sizing: border-box;<br /> <br /> /* 边框 */<br /> border: 1px solid #a2a9b1;<br /> border: 1px solid var(--border-color-base, #a2a9b1);<br /> <br /> /* 背景色 */<br /> background-color: #ffffff;<br /> background-color: var(--background-color-surface, #ffffff);<br /> <br /> /* 简单的十字坐标轴 (去掉复杂的网格以防报错) */<br /> background-image: <br /> linear-gradient(to right, transparent 49%, var(--color-base, #000) 49%, var(--color-base, #000) 51%, transparent 51%),<br /> linear-gradient(to bottom, transparent 49%, var(--color-base, #000) 49%, var(--color-base, #000) 51%, transparent 51%);<br /> <br /> background-size: 100% 100%;<br /> background-position: center;<br /> background-repeat: no-repeat;<br /> margin: 0 auto;<br /> }<br /> <br /> /* 轴线标签文字 */<br /> .compass-label {<br /> position: absolute;<br /> font-size: 0.8em;<br /> font-weight: bold;<br /> color: #54595d;<br /> color: var(--color-subtle, #54595d);<br /> line-height: 1;<br /> z-index: 1;<br /> }<br /> <br /> /* 标签位置修正 */<br /> .compass-label.top { top: 2%; left: 0; right: 0; text-align: center; }<br /> .compass-label.bottom { bottom: 2%; left: 0; right: 0; text-align: center; }<br /> .compass-label.left { top: 50%; left: 2%; transform: translateY(-50%); }<br /> .compass-label.right { top: 50%; right: 2%; transform: translateY(-50%); }<br /> <br /> /* 定位点容器 */<br /> .compass-point {<br /> position: absolute;<br /> transform: translate(-50%, -50%); /* 修正中心点 */<br /> display: flex;<br /> flex-direction: column;<br /> align-items: center;<br /> justify-content: center;<br /> z-index: 10;<br /> width: auto; /* 让宽度自适应内容 */<br /> }<br /> <br /> /* 那个红点 */<br /> .compass-dot {<br /> display: block;<br /> width: 12px;<br /> height: 12px;<br /> background-color: #3366cc;<br /> background-color: var(--color-primary, #3366cc);<br /> border: 2px solid #ffffff;<br /> border: 2px solid var(--background-color-surface, #ffffff);<br /> border-radius: 50%;<br /> }<br /> <br /> /* 点下方的文字 */<br /> /* 点下方的文字 */<br /> .compass-text {<br /> display: block; /* 加上这个保险 */<br /> margin-top: 4px;<br /> font-size: 0.85em;<br /> line-height: 1.2;<br /> text-align: center;<br /> padding: 2px 4px;<br /> border-radius: 4px;<br /> <br /> /* ==== 修改重点在这里 ==== */<br /> /* 1. 先定义一个简单的白色背景 (给不支持变量的浏览器) */<br /> background-color: #ffffff;<br /> <br /> /* 2. 再定义变量，但在 fallback 里只用简单的 hex 代码，不要用 rgba */<br /> background-color: var(--background-color-surface, #ffffff);<br /> /* ======================= */<br /> <br /> border: 1px solid #eaecf0;<br /> border: 1px solid var(--border-color-subtle, #eaecf0);<br /> <br /> /* 如果你很想要半透明效果，可以单独加一行 opacity，但会影响文字 */<br /> /* opacity: 0.9; */<br /> }</div>

KK