模板:IdeologyCompass/styles.css

/* 容器：强制正方形 (兼容写法) */
.ideology-compass {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* 核心：用padding撑开高度，保持1:1 */
    box-sizing: border-box;
    
    /* 边框 */
    border: 1px solid #a2a9b1;
    border: 1px solid var(--border-color-base, #a2a9b1);
    
    /* 背景色 */
    background-color: #ffffff;
    background-color: var(--background-color-surface, #ffffff);
    
    /* 简单的十字坐标轴 (去掉复杂的网格以防报错) */
    background-image: 
        linear-gradient(to right, transparent 49%, var(--color-base, #000) 49%, var(--color-base, #000) 51%, transparent 51%),
        linear-gradient(to bottom, transparent 49%, var(--color-base, #000) 49%, var(--color-base, #000) 51%, transparent 51%);
    
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
}

/* 轴线标签文字 */
.compass-label {
    position: absolute;
    font-size: 0.8em;
    font-weight: bold;
    color: #54595d;
    color: var(--color-subtle, #54595d);
    line-height: 1;
    z-index: 1;
}

/* 标签位置修正 */
.compass-label.top { top: 2%; left: 0; right: 0; text-align: center; }
.compass-label.bottom { bottom: 2%; left: 0; right: 0; text-align: center; }
.compass-label.left { top: 50%; left: 2%; transform: translateY(-50%); }
.compass-label.right { top: 50%; right: 2%; transform: translateY(-50%); }

/* 定位点容器 */
.compass-point {
    position: absolute;
    transform: translate(-50%, -50%); /* 修正中心点 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    width: auto; /* 让宽度自适应内容 */
}

/* 那个红点 */
.compass-dot {
    display: block;
    width: 12px;
    height: 12px;
    background-color: #3366cc;
    background-color: var(--color-primary, #3366cc);
    border: 2px solid #ffffff;
    border: 2px solid var(--background-color-surface, #ffffff);
    border-radius: 50%;
}

/* 点下方的文字 */
/* 点下方的文字 */
.compass-text {
    display: block; /* 加上这个保险 */
    margin-top: 4px;
    font-size: 0.85em;
    line-height: 1.2;
    text-align: center;
    padding: 2px 4px;
    border-radius: 4px;
    
    /* ==== 修改重点在这里 ==== */
    /* 1. 先定义一个简单的白色背景 (给不支持变量的浏览器) */
    background-color: #ffffff;
    
    /* 2. 再定义变量，但在 fallback 里只用简单的 hex 代码，不要用 rgba */
    background-color: var(--background-color-surface, #ffffff);
    /* ======================= */
    
    border: 1px solid #eaecf0;
    border: 1px solid var(--border-color-subtle, #eaecf0);
    
    /* 如果你很想要半透明效果，可以单独加一行 opacity，但会影响文字 */
    /* opacity: 0.9; */
}