MediaWiki:Common.css
MediaWiki界面页面
更多操作
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* 这里放置的CSS将应用于所有皮肤 */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");
@import url("https://fontsapi.zeoseven.com/69/main/result.css"); /*思源黑体*/
@import url("https://fontsapi.zeoseven.com/285/main/result.css"); /*思源宋体*/
@import url("https://fontsapi.zeoseven.com/69/main/result.css"); /*1715 等宽 GB*/
/*==========配色==========
starcitizentools.github.io/mediawiki-skins-Citizen/customization/theming
AI总结的
====================*/
/*
========== 主色配置（OKLCH色彩模型，推荐使用，明暗模式下感知一致性更优） ==========
--color-progressive-oklch__l: 53.25%; 主色亮度
--color-progressive-oklch__c: 0.1679; 主色色度/饱和度
--color-progressive-oklch__h: 262.29; 主色色相，最便捷的品牌色修改项，默认对应标准蓝色#36c
========== 界面层级Surface颜色配置（数值越小，UI层级越靠后） ==========
吓哭了皮肤源代码oklch()是什么用法
--color-surface-0: ; 页面背景色
--color-surface-1: ; 卡片、弹窗、下拉菜单背景色
--color-surface-2: ; 卡片内凸起元素背景色
--color-surface-3: ; 元素悬浮态与轻微高亮背景色
--color-surface-4: ; 元素激活态与强高亮背景色
========== 文本与链接颜色配置 ==========
--color-base: ; 默认正文文本色
--color-emphasized: ; 标题、强调文本色
--color-subtle: ; 说明文字、辅助元数据文本色
--color-link: ; 链接文本色
*/
:root{
--color-progressive-oklch__l: 75%; /*主色亮度*/
--color-progressive-oklch__c: 0.1679; /*主色色度/饱和度*/
--color-progressive-oklch__h: 262.29; /*主色色相*/
--color-surface-0-oklch__l:99%;
/*统一原站变量*/
--background-color:var(--color-surface-0);
--text-color:var(--color-base);
/* Image Block */
--imageblock-border-width: 0.15rem;
--imageblock-caption-background-color: var(--color-surface-1);
--imageblock-caption-text-color: var(--color-base);
--imageblock-shadow-color: 0, 0, 0, 0;
--imageblock-border-color: var(--color-surface-1);
--Found-color: #5CB85C;
--Lost-color: #EE3131;
--Partially-Found-color: #FFA500;
--Existence-Unconfirmed-color: #696969;
--Non-Existence-color: var(--darkblock-background-color);
--Unidentified-color: #A9A9A9;
--Partially-Identified-color: #FF7F50;
--Identified-color: var(--Found-color);
/* ========== 字体配置 ========== */
--font-family-citizen-base: "Noto Sans CJK"; /*默认基础字体*/
--font-family-citizen-serif: "Noto Serif CJK"; /*衬线字体*/
--font-family-citizen-monospace: 'Roboto Mono' , "1715 Mono GB"; /*代码等宽字体*/
}
/*DIV块*/
.lightblock {
background: var(--color-surface-1);
color: var(--color-base);
margin: 1rem 0;
padding: 0.5rem 1rem;
}
.darkblock {
background: var(--background-color-inverted, #101418); /*------未匹配*/
color: var(--color-inverted, #ffffff); /*------未匹配*/
--color-emphasized:var(--color-inverted, #ffffff); /*------未匹配*/
margin: 1rem 0;
padding: 0.5rem 1rem;
}
.styled-quote {
background: var(--background-color-neutral-subtle, #f8f9fa); /*------未匹配*/
color: var(--color-base);
border-left: var(--background-color-inverted, #101418) solid 0.6rem; /*------未匹配*/
margin: 1rem 0;
padding: 0.5rem 1rem;
}
.dark-styled-quote {
background: var(--background-color-inverted, #101418); /*------未匹配*/
color: var(--color-inverted, #ffffff); /*------未匹配*/
--color-emphasized:var(--color-inverted, #ffffff); /*------未匹配*/
border-left: var(--background-color-neutral-subtle, #f8f9fa) solid 0.6rem; /*------未匹配*/
margin: 1rem 0;
padding: 0.5rem 1rem;
}
/*修底部*/
/* 图片框 */
#content > img {
margin: 1rem 0;
}
.image-container {
padding: 0;
margin: 1rem 0;
max-width: 100%;
}
.scp-image-block {
display: flex;
flex-direction: column;
box-shadow: 0.2rem 0.2rem 0.4rem rgba(var(--imageblock-shadow-color)); /*------未匹配*/
clear: both;
border: var(--imageblock-border-color) var(--imageblock-border-width) solid; /*------未匹配*/
max-width: 100%;
}
.scp-image-caption {
background: var(--imageblock-caption-background-color); /*------未匹配*/
color: var(--imageblock-caption-text-color);
padding: 0.2em 1em;
text-align: center;
width: auto !important;
}
.scp-image-caption p {
font-size: 0.8rem;
font-weight: 700;
}
#content .scp-image-caption p:first-child {
margin-top: 0;
}
#content .scp-image-caption p:last-child {
margin-bottom: 0;
}
.scp-image-block.block-右,
.image-container.floatright {
float: right;
margin: 0.25rem 0 1rem 2rem;
}
.scp-image-block.block-左,
.image-container.floatleft {
float: left;
margin: 0.25rem 2rem 1rem 0;
}
.scp-image-block.block-居中 {
margin: 1rem auto;
}
@media only screen and (max-width: 540px) {
.scp-image-block.block-右, .scp-image-block.block-左 {
float: none;
margin: 0.1rem auto;
}
}
.scp-image-block figure[typeof~='mw:File']{
margin: 0;
clear: unset;
float: unset;
}
/*个人信息修复*/
.visualClear {
clear: both;
}
/*修主体高度*/
#mw-content-text{
min-height: 90vh;
}
/*底栏按钮CSS*/
:root{
/* 给 Vector 2022/Vector 添加默认样式变量（Minerva 已有则兼容） */
--general-button-text-color: 54, 59, 65; /*------未匹配*/
--general-hover-button-text-color: 0, 0, 0; /*------未匹配*/
--general-button-background-color: 255, 255, 255; /*------未匹配*/
--general-hover-button-background-color: 234, 236, 240; /*------未匹配*/
--general-transition-time-slow: 0.2s; /*------未匹配*/
/* 按钮栏专用变量 */
--page-option-text-color: var(--general-button-text-color); /*------未匹配*/
--page-option-hover-text-color: var(--general-hover-button-text-color); /*------未匹配*/
--page-option-background-color: var(--general-button-background-color); /*------未匹配*/
--page-option-hover-background-color: var(--general-hover-button-background-color); /*------未匹配*/
}
#custom-wiki-bottom-wrapper {
margin: 2.5rem auto 1rem;
width: 90%;
max-width: min(993.3px, 90vw);
}
#custom-wiki-page-meta {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-bottom: 1rem;
color: #54595d; /*------未匹配*/
font-size: 0.9rem;
gap: 0.5rem;
}
.custom-wiki-button-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.5rem;
width: 100%;
}
#custom-wiki-button-row-more {
display: flex;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.3s ease, opacity 0.3s ease;
}
#custom-wiki-button-row-more.open {
max-height: 500px;
opacity: 1;
}
.custom-wiki-button-row > a,
#custom-wiki-toggle-btn {
display: flex;
justify-content: center;
align-items: center;
flex: 2 0 auto;
height: 2rem;
padding: 0 0.25rem;
margin: 0;
min-width: fit-content;
color: rgba(var(--page-option-text-color)); /*------未匹配*/
font-size: 0.95rem;
line-height: 1;
text-decoration: none;
background: rgba(var(--page-option-background-color)); /*------未匹配*/
border: 1px solid #eaecf0; /*------未匹配*/
border-radius: 2px;
cursor: pointer;
transition: background var(--general-transition-time-slow); /*------未匹配*/
}
.custom-wiki-button-row > a:hover,
#custom-wiki-toggle-btn:hover {
background: #eaecf0; /*------未匹配*/
}
#user-page-right{
float: unset;
width: 100%;
}
/*电脑端改鼠标指针样式*/
#minerva-user-menu-checkbox{
cursor: pointer;
}
/*脚注*/
/*
.mw-references-wrap::before {
content: "脚注";
font-size: 150%;
display: block;
margin-bottom: 8px;
font-weight: bold;
border-bottom: 1px solid var(--background-color-neutral, #eaecf0); /*------未匹配*/
}
.mw-references-wrap .references {
margin-top: 0;
padding-left: 0;
}
*/
/*分页优化*/
.tabber__tab, .tabber__tab:visited {
transition: all ease 0.3s;
color: var(--color-base);
background: transparent;
position: relative;
padding: 8px 12px;
border: none;
cursor: pointer;
z-index: 1;
}
.tabber__tab[aria-selected='true'], .tabber__tab[aria-selected='true']:visited {
color: var(--background-color-neutral-subtle, #f8f9fa); /*------未匹配*/
background: var(--color-progressive, #36c); /*------未匹配*/
}
.tabber__tab::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--box-shadow-color-progressive-selected--hover, #447ff5); /*------未匹配*/
transition: width 0.3s ease;
z-index: -1;
}
.tabber__tab:hover {
color: var(--background-color-neutral-subtle, #f8f9fa) !important; /*------未匹配*/
}
.tabber__tab:hover::after {
width: 100%;
}
.tabber__tab[aria-selected='true']::after {
width: 100%;
background: var(--color-progressive, #36c); /*------未匹配*/
}
.tabber__tab[aria-selected='true']:hover {
color: var(--background-color-neutral-subtle, #f8f9fa); /*------未匹配*/
}
.tabber .tabber__panel{
border: var(--background-color-neutral, #eaecf0) 2px solid; /*------未匹配*/
border-top: unset;
padding: 10px;
}
/*折叠样式*/
.mw-content-ltr .mw-collapsible-toggle{
float:unset;
}
.mw-collapsible-toggle-default:before, .mw-collapsible-toggle-default:after {
display: none;
}
.mw-collapsible-content > p:nth-child(1) > br{
display: none;
}
/*折叠动画*/
.mw-collapsible button.mw-collapsible-toggle-expanded .mw-collapsible-text::before{
margin: 0 0.2em 0 0.4em;
content: "▼";
color: color: inherit; /*------未匹配*/
background-color: transparent;
visibility: visible;
display: inline-block;
animation-name: collapsible-arrow-spin-back;
animation-duration: 0.3s;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.32, .38, .39, .94);
animation-fill-mode: forwards;
}
.mw-collapsible button.mw-collapsible-toggle-collapsed .mw-collapsible-text::before{
margin: 0 0.2em 0 0.4em;
content: "▼";
color: color: inherit; /*------未匹配*/
background-color: transparent;
visibility: visible;
display: inline-block;
animation-name: collapsible-arrow-spin;
animation-duration: 0.3s;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.32, .38, .39, .94);
animation-fill-mode: forwards;
}
@keyframes collapsible-arrow-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-90deg);
}
}
@keyframes collapsible-arrow-spin-back {
from {
transform: rotate(-90deg);
}
to {
transform: rotate(0deg);
}
}
/*维基语法里用的CSS*/
.table-icon-img{
display: inline-block;
width: 1em;
height: 1em;
padding: 5px;
background-image: url(data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E table %3C/title%3E%3Cpath d=%22M2 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm0 4h7v4H2zm0 10v-4h7v4zm16 0h-7v-4h7zm0-6h-7V6h7z%22/%3E%3C/svg%3E);
background-repeat: no-repeat;
background-size: contain;
margin-bottom: -5px;
}
.pre-style{
background-color: var(--background-color-neutral-subtle, #f8f9fa); /*------未匹配*/
color: var(--color-emphasized);
border: 1px solid var(--border-color-muted, #dadde3); /*------未匹配*/
padding: 1em;
}
/*测试，折叠图片框*/
.collapsible-image-text{
display: inline-block;
padding: 3px;
font-size: 1.25rem;
background: #c12c32; /*------未匹配*/
color: var(--color-surface-0);
font-weight: bold;
transform: translateY(0);
transition: transform 0.3s ease;
}
.collapsible-image-text.过长{
background: var(--color-base);
}
.collapsible-image-text-main{
display: block;
margin: 3px;
}
.collapsible-image{
overflow-y: clip;
display: block;
background: var(--color-surface-0);
transition: border ease 0.05s;
}
@supports selector(:has(*)) {
.collapsible-image.过长 {
border: solid 2px var(--color-base);
}
.collapsible-image.警告 {
border: solid 2px #c12c32; /*------未匹配*/
}
.collapsible-image:has(.mw-collapsible-toggle-expanded) .collapsible-image-text{
/*
transform: translateY(-100%);
transition: transform 0.3s ease;
*/
display: none;
}
.collapsible-image:has(.mw-collapsible-toggle-expanded) .collapsible-image-text-main {
display: none;
}
.collapsible-image:has(.mw-collapsible-toggle-expanded){
border: solid 0px var(--color-base);
transition: border ease 0.05s;
}
.collapsible-image.警告:has(.mw-collapsible-toggle-expanded){
border: solid 0px #c12c32; /*------未匹配*/
}
}
.collapsible-image button.mw-collapsible-toggle{
position: relative;
left: 50%;
transform: translateX(-50%);
}
.collapsible-image p br{
display:none;
}
/*==各种div==*/
blockquote , .lightblock , .方框块 , .歌词 {
background: var(--background-color-neutral-subtle,#f8f9fa); /*------未匹配*/
color: var(--color-base);
margin: 1rem 0;
padding: 0.5rem 1rem;
border: var(--background-color-neutral, #eaecf0) solid 1.5px; /*------未匹配*/
}
.歌词 {
/*text-indent: 2em;*/
font-weight: 400;
border-radius: 8px;
line-height: 2;
}
.歌词 em{
font-weight: 200;
}
.styled-quote , .样式块 {
background: var(--background-color-neutral-subtle,#f8f9fa); /*------未匹配*/
color: var(--color-base);
border-left: var(--color-emphasized) solid 0.6rem;
margin: 1rem 0;
padding: 0.5rem 1rem;
}
.styled-quote.引用 , .样式块.引用{
position: relative;
padding: 12px 16px;
}
.引用::before{
content: "";
position: absolute;
top: 4px;
left: 8px;
display: block;
width: 24px;
height: 24px;
pointer-events: none;
z-index: 1;
background-image:
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcXVvdGUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTEyIDEyYTEgMSAwIDAgMCAxLTFWOC41NThhMSAxIDAgMCAwLTEtMWgtMS4zODhjMC0uMzUxLjAyMS0uNzAzLjA2Mi0xLjA1NC4wNjItLjM3Mi4xNjYtLjcwMy4zMS0uOTkyLjE0NS0uMjkuMzMxLS41MTcuNTU5LS42ODMuMjI3LS4xODYuNTE2LS4yNzkuODY4LS4yNzlWM2MtLjU3OSAwLTEuMDg1LjEyNC0xLjUyLjM3MmEzLjMyMiAzLjMyMiAwIDAgMC0xLjA4NS45OTIgNC45MiA0LjkyIDAgMCAwLS42MiAxLjQ1OEE3LjcxMiA3LjcxMiAwIDAgMCA5IDcuNTU4VjExYTEgMSAwIDAgMCAxIDFoMlptLTYgMGExIDEgMCAwIDAgMS0xVjguNTU4YTEgMSAwIDAgMC0xLTFINC42MTJjMC0uMzUxLjAyMS0uNzAzLjA2Mi0xLjA1NC4wNjItLjM3Mi4xNjYtLjcwMy4zMS0uOTkyLjE0NS0uMjkuMzMxLS41MTcuNTU5LS42ODMuMjI3LS4xODYuNTE2LS4yNzkuODY4LS4yNzlWM2MtLjU3OSAwLTEuMDg1LjEyNC0xLjUyLjM3MmEzLjMyMiAzLjMyMiAwIDAgMC0xLjA4NS45OTIgNC45MiA0LjkyIDAgMCAwLS42MiAxLjQ1OEE3LjcxMiA3LjcxMiAwIDAgMCAzIDcuNTU4VjExYTEgMSAwIDAgMCAxIDFoMloiLz4KPC9zdmc+");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.4;
}
.引用::after {
content: "";
position: absolute;
bottom: 4px;
right: 8px;
display: block;
width: 24px;
height: 24px;
pointer-events: none;
z-index: 1;
background-image:
url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktcXVvdGUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZD0iTTEyIDEyYTEgMSAwIDAgMCAxLTFWOC41NThhMSAxIDAgMCAwLTEtMWgtMS4zODhjMC0uMzUxLjAyMS0uNzAzLjA2Mi0xLjA1NC4wNjItLjM3Mi4xNjYtLjcwMy4zMS0uOTkyLjE0NS0uMjkuMzMxLS41MTcuNTU5LS42ODMuMjI3LS4xODYuNTE2LS4yNzkuODY4LS4yNzlWM2MtLjU3OSAwLTEuMDg1LjEyNC0xLjUyLjM3MmEzLjMyMiAzLjMyMiAwIDAgMC0xLjA4NS45OTIgNC45MiA0LjkyIDAgMCAwLS42MiAxLjQ1OEE3LjcxMiA3LjcxMiAwIDAgMCA5IDcuNTU4VjExYTEgMSAwIDAgMCAxIDFoMlptLTYgMGExIDEgMCAwIDAgMS0xVjguNTU4YTEgMSAwIDAgMC0xLTFINC42MTJjMC0uMzUxLjAyMS0uNzAzLjA2Mi0xLjA1NC4wNjItLjM3Mi4xNjYtLjcwMy4zMS0uOTkyLjE0NS0uMjkuMzMxLS41MTcuNTU5LS42ODMuMjI3LS4xODYuNTE2LS4yNzkuODY4LS0yNzlWM2MtLjU3OSAwLTEuMDg1LjEyNC0xLjUyLjM3MmEzLjMyMiAzLjMyMiAwIDAgMC0xLjA4NS45OTIgNC45MiA0LjkyIDAgMCAwLS42MiAxLjQ1OEE3LjcxMiA3LjcxMiAwIDAgMCAzIDcuNTU4VjExYTEgMSAwIDAgMCAxIDFoMloiLz4KPC9zdmc+");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.4;
transform: scaleX(-1);
}
/*讨论区页面*/
body.ns-talk #mw-content-text{
display: none;
}
/*主页*/
.media-state::after{
color: rgb(252,252,252) !important; /*------未匹配*/
border-radius: 0px 2px 2px 0px;
border-top: 1px solid var(--color-base);
border-left: 1px solid var(--color-base);
border-bottom: 1px solid var(--color-base);
padding: 1px 2px 1px 2px;
font-size:80%;
content: "未添加状态标签";
background: black; /*------未匹配*/
white-space: nowrap;
font-weight: bold;
}
.article-link[style*="发现"] .media-state::after {
content: "发现";
background: var(--Found-color); /*------未匹配*/
font-weight: bold;
}
.article-link[style*="丢失"] .media-state::after {
content: "丢失";
background: var(--Lost-color); /*------未匹配*/
font-weight: bold;
}
.article-link[style*="部分发现"] .media-state::after {
content: "部分发现";
background: var(--Partially-Found-color); /*------未匹配*/
font-weight: bold;
}
.article-link[style*="存在性待定"] .media-state::after {
content: "存在性待定";
background: var(--Existence-Unconfirmed-color); /*------未匹配*/
font-weight: bold;
}
.article-link[style*="不存在"] .media-state::after {
content: "不存在";
background: var(--Non-Existence-color); /*------未匹配*/
font-weight: bold;
}
.article-link[style*="来源不明"] .media-state::after {
content: "来源不明";
background: var(--Unidentified-color); /*------未匹配*/
font-weight: bold;
}
.article-link[style*="部分确定"] .media-state::after {
content: "部分确定";
background: var(--Partially-Identified-color); /*------未匹配*/
font-weight: bold;
}
.article-link[style*="来源确定"] .media-state::after {
content: "来源确定";
background: var(--Identified-color); /*------未匹配*/
font-weight: bold;
}
/*====*/
.media-type::after{
color: black; /*------未匹配*/
font-size:80%;
content: "未添加类型标签";
border-top: 1px solid var(--color-base);
border-left: 1px solid var(--color-base);
border-bottom: 1px solid var(--color-base);
border-radius: 2px 0px 0px 2px;
padding: 1px 4px 1px 2px;
margin-right: -2px;
font-weight: bold;
background: rgb(252,252,252); /*------未匹配*/
white-space: nowrap;
}
.article-link[style*="音频"] .media-type::after {
content: "音频";
font-weight: bold;
}
.article-link[style*="视频"] .media-type::after {
content: "视频";
font-weight: bold;
}
.article-link[style*="动画"] .media-type::after {
content: "动画";
font-weight: bold;
}
.article-link[style*="电影"] .media-type::after {
content: "电影";
font-weight: bold;
}
.article-link[style*="剧集"] .media-type::after {
content: "剧集";
font-weight: bold;
}
.article-link[style*="图像"] .media-type::after {
content: "图像";
font-weight: bold;
}
.article-link[style*="漫画"] .media-type::after {
content: "漫画";
font-weight: bold;
}
.article-link[style*="文本"] .media-type::after {
content: "文本";
font-weight: bold;
}
.article-link[style*="游戏"] .media-type::after {
content: "游戏";
font-weight: bold;
}
.article-link[style*="应用"] .media-type::after {
content: "应用";
font-weight: bold;
}
.article-link[style*="其他"] .media-type::after {
content: "其他";
font-weight: bold;
}
/*====*/
.article-link[style*="成人内容"] .adult::after,.article-link[style*="血腥内容"] .nsfl::after{
font-size: 80%;
border: 1px solid #ee3131; /*------未匹配*/
white-space: nowrap;
border-radius: 2px;
padding: 1px 2px 1px 2px;
background: rgb(252,252,252); /*------未匹配*/
}
.article-link[style*="成人内容"] .adult::after {content: "成人内容";color: #ee3131;font-weight: bold;} /*------未匹配*/
.article-link[style*="血腥内容"] .nsfl::after {content: "血腥内容";color: #ee3131;font-weight: bold;} /*------未匹配*/
/*主页的部分代码，由于不兼容性导致无法使用CSS扩展引入*/
@media only screen and (max-width: 800px){
.other-sites {
grid-template-columns: repeat(3, 1fr);
}
.other-sites .site{
margin-bottom:20px;
margin-top:20px;
}
.site::after {
white-space: normal;
width: min(75px, 33vw);
}
}
.other-sites .site a{
pointer-events: none;
}
.other-sites .site:hover a{
pointer-events: auto;
}