MediaWiki:Citizen.css:修订间差异

MediaWiki界面页面
无编辑摘要
无编辑摘要
第141行: 第141行:
}
}


#footer-places {
* Footer icons
    column-count: 2;
* We use custom footer icons so we need to fine tune it
}
*/
 
#footer-icons {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: flex-end; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    padding: 0; /* 移除内边距 */
    margin: 0 auto; /* 水平居中并移除外边距 */
}
 
#footer-icons a {
#footer-icons a {
     opacity: 0.8;
     opacity: var( --opacity-icon-base );
     transition: opacity 250ms ease;
     transition: opacity 250ms ease;
    margin: 4px; /* 链接的外边距 */
    flex: 1 0 21%; /* 允许图标占据可用空间且不被压缩,假设每行至少有4个图标,略小于25%以留出间隙 */
}
}


#footer-icons a:hover {
#footer-icons a:hover {
     opacity: var(--opacity-icon-base--hover);
     opacity: var( --opacity-icon-base--hover );
}
}


#footer-icons a:active {
#footer-icons a:active {
     opacity: var(--opacity-icon-base--active);
     opacity: var( --opacity-icon-base--active );
}
}


#footer-icons ul {
/* More space between icons */
    list-style: none; /* 移除列表样式 */
#footer-icons ul,
    padding: 0; /* 移除内边距 */
#footer-icons li {
    margin: 0; /* 移除外边距 */
     gap: var( --space-md );
     display: flex; /* 使用flex布局 */
    flex-wrap: wrap; /* 允许换行 */
    justify-content: flex-end; /* 水平居中 */
    width: 100%; /* 宽度为100% */
}
}


#footer-icons li {
/* Divide footer links into two columns */
    margin: 4px; /* 列表项的外边距 */
#footer-places {
    width: 100%; /* 强制列表项占满整行 */
     column-count: 2;
     justify-content: flex-end; /* 水平居中列表项内的内容 */
    display: flex; /* 使每个列表项也使用flex布局 */
}
}


/* 修复SVG图标可能过大的问题 */
/* Fix misalignment in Safari and Firefox when using two columns */
#footer-icons svg {
#footer-places ul {
     max-width: 160px; /* SVG的最大宽度 */
     display: initial;
    width: 100%; /* SVG宽度填满容器宽度 */
    height: auto; /* 保持SVG的纵横比 */
}
}


第196行: 第176行:
@media only screen and (max-width: 1350px) {
@media only screen and (max-width: 1350px) {
     #footer-icons {
     #footer-icons {
         display: grid;
         justify-content: flex-start; /* 水平居左 */
        grid-template-columns: repeat(2, 50%); /* 创建两列的网格布局,每列宽度为50% */
    }
         gap: 0; /* 如果需要消除图标之间的间距 */
 
    #footer-icons ul {
         justify-content: flex-start; /* 水平居左 */
     }
     }


    #footer-icons a,
     #footer-icons li {
     #footer-icons li {
         width: 100%; /* 链接和列表项填充整个网格单元格 */
         width: auto; /* 重置宽度,允许内容决定宽度 */
         margin: 0; /* 消除外边距 */
         flex: 0 0 50%; /* 设置列表项的宽度,使得每行最多两个图标 */
     }
     }


     #footer-icons svg {
     #footer-icons svg {
         width: 100%; /* SVG填充整个链接/列表项宽度 */
         max-width: 100%; /* 允许SVG填充最大宽度 */
        height: auto; /* 保持SVG的纵横比 */
        max-width: none; /* 移除SVG的最大宽度限制 */
     }
     }


    /* 如果footer-places也需要调整,可以在这里添加相应的样式 */
     #footer-places {
     #footer-places {
         column-count: 1; /* 在小屏幕上只显示一列 */
         column-count: 1; /* 在小屏幕上只显示一列 */

2023年12月8日 (五) 16:47的版本

/* 这里的任何CSS将为使用Citizen皮肤的用户加载 */
body.page-首页 H1.firstHeading {
    display: none;
}
body.page-首页 #siteSub {
    display: none;
}
body.page-Main_page H1.firstHeading {
    display: none;
}
body.page-Main_page #siteSub {
    display: none;
}
.tab-iconalgorithm {
    background: url(/images/algorithm.svg) no-repeat left center;
    padding-left: 25px; /* Adjust this value based on the size of your icon */
    background-size: 20px; /* Adjust this value based on the size of your icon */
}
.tab-iconplot {
    background: url(/images/plot.svg) no-repeat left center;
    padding-left: 25px; /* Adjust this value based on the size of your icon */
    background-size: 20px; /* Adjust this value based on the size of your icon */
}
.tab-icontable {
    background: url(/images/table.svg) no-repeat left center;
    padding-left: 25px; /* Adjust this value based on the size of your icon */
    background-size: 20px; /* Adjust this value based on the size of your icon */
}
.tab-iconauto {
    background: url(/images/auto.svg) no-repeat left center;
    padding-left: 25px; /* Adjust this value based on the size of your icon */
    background-size: 20px; /* Adjust this value based on the size of your icon */
}

/* Adjust primary color */
/*:root {*/
/*    --color-primary__h: 205;*/
/*}*/

/*Adjust contrast since we changed primary color*/
/*:root.skin-citizen-dark {*/
/*    --color-primary__l: 56%;*/
/*}*/

/* Align icon opacity with skin default */
/*.mw-logo-icon {*/
/*    opacity: var( --opacity-icon-base );*/
/*}*/

/*
 * Menu
 * Rich format menu to have more hierarchy
*/
.mw-portlet-External {
    margin-top: var( --space-md );
    padding-top: var( --space-sm );
    border-top: 1px solid var( --border-color-base );
    font-size: 0.8125rem;
    grid-column: 1 / -1;
    white-space: nowrap;
}

.mw-portlet-External .citizen-menu__heading {
    display: none;
}

.mw-portlet-External ul {
    display: flex;
    overflow: auto;
}

.mw-portlet-External .mw-list-item a {
    gap: 0;
}

/* Label */
.citizen-drawer__menu [id^="n-sidebar-label-"] a {
    pointer-events: none;
    margin-left: var( --space-xs );
    padding-left: var( --space-md );
    padding-right: var( --space-xs );
    border-left: 1px solid var( --border-color-base );
    border-radius: 0;
    letter-spacing: 0.05em;
    font-weight: var( --font-weight-normal );
    color: var( --color-base--subtle ) !important;
}

/* Icons */
.citizen-drawer__menu [id^="n-sidebar-icon-"] a {
    font-size: 0;
}

.citizen-drawer__menu [id^="n-sidebar-icon-"] a:before {
    display: block;
    content: "";
    width: var( --size-icon );
    height: var( --size-icon );
    background: transparent center/contain no-repeat;
    opacity: var( --opacity-icon-base );
}

.skin-citizen-dark .citizen-drawer__menu [id^="n-sidebar-icon-"] a:before {
    filter: invert( 1 );
}

#n-sidebar-icon-decisionlinnc-icon a:before {
    background-image: url( https://wiki.statsape.com/images/8/84/Decisionlinnc-icon.svg )
}

#n-sidebar-icon-decisionlinnc-download a:before {
    background-image: url( https://wiki.statsape.com/images/6/67/Decisionlinnc-download.svg )
}

#n-sidebar-icon-decisionlinnc-BS a:before {
    background-image: url( https://wiki.statsape.com/images/d/de/Decisionlinnc-BS.svg )
}

#n-sidebar-icon-decisionlinnc-bbs a:before {
    background-image: url( https://wiki.statsape.com/images/a/a1/Decisionlinnc-bbs.svg )
}

#n-sidebar-icon-decisionlinnc-bilibili a:before {
    background-image: url( https://wiki.statsape.com/images/9/91/Decisionlinnc-bilibili.svg )
}

#n-sidebar-icon-decisionlinnc-phone a:before {
    background-image: url( https://wiki.statsape.com/images/e/e8/Decisionlinnc-phone.svg )
}

#n-sidebar-icon-decisionlinnc-qq a:before {
    background-image: url( https://wiki.statsape.com/images/e/ec/Decisionlinnc-qq.svg )
}

#n-sidebar-icon-decisionlinnc-wechat a:before {
    background-image: url( https://wiki.statsape.com/images/5/51/Decisionlinnc-wechat.svg )
}

#n-sidebar-icon-decisionlinnc-wiki a:before {
    background-image: url( https://wiki.statsape.com/images/e/e9/Decisionlinnc-wiki.svg )
}

* Footer icons
* We use custom footer icons so we need to fine tune it
*/
#footer-icons a {
    opacity: var( --opacity-icon-base );
    transition: opacity 250ms ease;
}

#footer-icons a:hover {
    opacity: var( --opacity-icon-base--hover );
}

#footer-icons a:active {
    opacity: var( --opacity-icon-base--active );
}

/* More space between icons */
#footer-icons ul,
#footer-icons li {
    gap: var( --space-md );
}

/* Divide footer links into two columns */
#footer-places {
    column-count: 2;
}

/* Fix misalignment in Safari and Firefox when using two columns */
#footer-places ul {
    display: initial;
}

/* 响应式布局:在较小屏幕上调整样式 */
@media only screen and (max-width: 1350px) {
    #footer-icons {
        justify-content: flex-start; /* 水平居左 */
    }

    #footer-icons ul {
        justify-content: flex-start; /* 水平居左 */
    }

    #footer-icons li {
        width: auto; /* 重置宽度,允许内容决定宽度 */
        flex: 0 0 50%; /* 设置列表项的宽度,使得每行最多两个图标 */
    }

    #footer-icons svg {
        max-width: 100%; /* 允许SVG填充最大宽度 */
    }

    #footer-places {
        column-count: 1; /* 在小屏幕上只显示一列 */
    }
}

/*
 * Very important checkmark
 * Blue checkmark near wordmark
*/
.mw-logo-wordmark {
    display: flex;
    align-items: center;
    gap: var( --space-sm );
}

/*.mw-logo-wordmark:after {*/
/*    content: "";*/
/*    width: 1em;*/
/*    height: 1em;*/
/*    display: block;*/
/*    background-image: url( https://wiki.statsape.com/images/8/84/Decisionlinnc-icon.svg );*/
/*}*/