|
|
(未显示同一用户的33个中间版本) |
第1行: |
第1行: |
| /* 这里放置的CSS将应用于所有皮肤 */
| | :root { |
| /* 字体 */
| | --font-family-citizen-base: "MiSans Latin"; |
| @font-face { | | --font-family-citizen-monospace: "JetBrains Mono"; |
| font-family: '得意黑';
| | --color-primary__h: 200; |
| src: url('/Font/SmileySans-Oblique.otf');
| | --color-primary__s: 55%; |
| src: url('/Font/SmileySans-Oblique.eot?#iefix') format('embedded-opentype'),
| | --color-primary__l: 48%; |
| url('/Font/SmileySans-Oblique.woff2') format('woff2'),
| | --color-surface-0: hsl(var(--color-primary__h), 3%, 98%); |
| url('/Font/SmileySans-Oblique.woff') format('woff'),
| | --color-surface-1: hsl(var(--color-primary__h), 3%, 98%); |
| url('/Font/SmileySans-Oblique.ttf') format('truetype'),
| | --color-surface-2: hsl(var(--color-primary__h), 10%, 95%); |
| url('/Font/SmileySans-Oblique.svg#SmileySans-Oblique') format('svg');
| | --color-surface-3: hsl(var(--color-primary__h), 10%, 85%); |
| } | | --color-surface-4: hsl(var(--color-primary__h), 10%, 74%); |
|
| | --background-color-overlay: hsla(var(--color-primary__h), 3%, 98%, 0.95); |
| @font-face {
| | --background-color-overlay--lighter: hsla(var(--color-primary__h), 3%, 98%, 0.6); |
| font-family: 'Oswald';
| | } |
| src: url('/Font/Oswald-Regular.otf');
| |
| src: url('/Font/Oswald-Regular.eot?#iefix') format('embedded-opentype'),
| |
| url('/Font/Oswald-Regular.woff2') format('woff2'),
| |
| url('/Font/Oswald-Regular.woff') format('woff'),
| |
| url('/Font/Oswald-Regular.ttf') format('truetype'),
| |
| url('/Font/Oswald-Regular.svg#Oswald-Regular') format('svg');
| |
| }
| |
|
| |
| @font-face {
| |
| font-family: '思源黑体 小';
| |
| src: url('/Font/SourceHanSansCN-Medium.ttf');
| |
| } | |
|
| |
| @font-face {
| |
| font-family: '思源黑体 CN';
| |
| src: url('/Font/SourceHanSansCN-Medium.otf');
| |
| } | |
|
| |
| @font-face {
| |
| font-family: '方正小标宋';
| |
| src: url('/Font/FZXBSK--GBK1-0.eot');
| |
| src: url('/Font/FZXBSK--GBK1-0.eot?#iefix') format('embedded-opentype'),
| |
| url('/Font/FZXBSK--GBK1-0.woff2') format('woff2'),
| |
| url('/Font/FZXBSK--GBK1-0.woff') format('woff'),
| |
| url('/Font/FZXBSK--GBK1-0.ttf') format('truetype'),
| |
| url('/Font/FZXBSK--GBK1-0.svg#FZXBSK--GBK1-0') format('svg');
| |
| }
| |
|
| |
| @font-face {
| |
| font-family: 'Consola';
| |
| src: url('/Font/Consola.otf');
| |
| src: url('/Font/Consola.eot?#iefix') format('embedded-opentype'),
| |
| url('/Font/Consola.woff2') format('woff2'),
| |
| url('/Font/Consola.woff') format('woff'),
| |
| url('/Font/Consola.ttf') format('truetype'),
| |
| url('/Font/Consola.svg#Consola') format('svg');
| |
| }
| |
|
| |
|
| /* 黑幕 */
| | :root { |
| .heimu{
| | --h2-font-family: "MiSans", "HarmonyOS Sans SC", "MiSans Latin", "Helvetica Neue", "Helvetica", "Roboto", "BlinkMacSystemFont", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; |
| background-color: #000;
| | --citizen-default-color: hsl(220, 60%, 50%); |
| color: #000;
| | --h2-color-light: var(--color-primary__h), 3%, 98%; |
| }
| | --h2-color-dark: var(--color-primary__h), 20%, 10%; |
|
| | } |
| .heimu:hover{
| |
| background-color: #fff;
| |
| color: #54595d;
| |
| }
| |
|
| |
|
| /* 卡片样式 */
| | :root { |
| .home-card { | | --h2-bgColor-light--0: hsla(var(--h2-color-light), .1); |
| position: relative;
| | --h2-bgColor-light--0-active: hsla(var(--h2-color-light), .05); |
| padding: 15px;
| | --h2-bgColor-light--1: hsla(var(--h2-color-light), .3); |
| /*margin-bottom: 10px;*/
| | --h2-bgColor-light--2: hsla(var(--h2-color-light), .6); |
| background: var( --color-surface-1 );
| | --h2-bgColor-light--2-hover: hsla(var(--h2-color-light), .5); |
| border-radius: 15px;
| | --h2-bgColor-light--3: hsla(var(--h2-color-light), .75); |
| box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.04 ), 0 3px 6px rgba( 0, 0, 0, 0.0575 );
| | --h2-bgColor-light--4: hsla(var(--h2-color-light), .9); |
| font-size: 0.875rem;
| | --h2-bgColor-dark--0: hsla(var(--h2-color-dark), .1); |
| } | | --h2-bgColor-dark--1: hsla(var(--h2-color-dark), .3); |
| .home-card table.timeline { | | --h2-bgColor-dark--2: hsla(var(--h2-color-dark), .6); |
| margin-top: 0.2rem;
| | --h2-shadow--0: 2px 2px 4px 1px rgba(0, 0, 0, .04), -2px -2px 6px 0px rgba(0, 0, 0, .03); |
| } | | --h2-textShadow--0: 1px 1px 2px #a9a9a9; |
|
| | --h2-textShadow--1: 1px 1px 2px #545454; |
| .home-card--col2 {
| | --h2-mp-card-hover--0: hsl(204, 100%, 88%); |
| grid-column: span 2;
| | --h2-mp-card--border-radius: 10px; |
| } | | --h2-mp-card--padding: 15px; |
|
| | --h2-mp-gap-value: 0.625rem; |
| .home-card--col3 {
| | } |
| grid-column: span 3;
| |
| } | |
|
| |
| .home-card--col6 {
| |
| grid-column: span 6;
| |
| }
| |
|
| |
|
| .home-card--row2 {
| | :root.skin-citizen-dark { |
| grid-row: span 2;
| | --h2-color-light: var(--color-primary__h), 20%, 10%; |
| }
| | --h2-color-dark: var(--color-primary__h), 3%, 98%; |
|
| | --h2-mp-card-hover--0: hsl(204, 70%, 58%); |
| .home-card--row3 { | | } |
| grid-row: span 3;
| |
| }
| |
|
| |
| .home-card--row4 {
| |
| grid-row: span 4;
| |
| } | |
|
| |
| .home-card--row8 {
| |
| grid-row: span 8 / auto;
| |
| }
| |
|
| |
| .home-card__label {
| |
| color: var( --color-base--subtle );
| |
| font-size: 0.8125rem;
| |
| letter-spacing: 0.75px;
| |
| } | |
|
| |
| h3.home-card__header {
| |
| margin-top: 0;
| |
| font-size: 1rem;
| |
| }
| |
|
| |
| .home-card__header a {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: space-between;
| |
| }
| |
|
| |
| .home-card__header a:after {
| |
| content: '▶';
| |
| font-size: 0.8125rem;
| |
| }
| |
|
| |
| .home-card__background {
| |
| position: absolute;
| |
| top: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| left: 0;
| |
| background: #242a31;
| |
| border-radius: 15px;
| |
| }
| |
|
| |
|
| .home-card__background img {
| | ::selection { |
| width: 100%;
| | background: hsla(180, 64%, 73%, .5); |
| height: 100%;
| | color: #32bdcd; |
| object-fit: cover;
| | } |
| object-position: center;
| |
| }
| |
|
| |
| .home-card__foreground {
| |
| position: absolute;
| |
| }
| |
|
| |
| .home-card__foreground .home-card__label {
| |
| color: #bababa;
| |
| }
| |
|
| |
| .home-card__foreground .home-card__header {
| |
| color: #fff;
| |
| }
| |
|
| |
| .home-card p {
| |
| margin-top: 0.2rem;
| |
| font-size: 0.875rem;
| |
| }
| |
|
| |
| .home-card.home-card--button {
| |
| overflow: hidden;
| |
| padding: 0;
| |
| background: #242a31;
| |
| }
| |
|
| |
| .home-card--button a {
| |
| display: flex;
| |
| height: 100%;
| |
| justify-content: center;
| |
| align-items: center;
| |
| padding: 0 15px;
| |
| background: transparent;
| |
| color: #fff;
| |
| font-weight: 500;
| |
| }
| |
|
| |
| .home-card--button .home-card__background a {
| |
| padding: 0;
| |
| }
| |
|
| |
| .home-card--button img {
| |
| transition: transform 0.3s ease;
| |
| }
| |
|
| |
| .home-card--button:hover img {
| |
| transform: scale(1.05);
| |
| }
| |
| /*
| |
| .homt-card--button:active img{
| |
| transform:scale(1);
| |
| }
| |
| */
| |
|
| |
|
| /* grid 排版 */
| | body { |
| .home-grid { | | font-family: var(--h2-font-family); |
| display: grid;
| | } |
| grid: auto-flow dense/repeat( auto-fit, minmax( 9.375rem, 1fr ) );
| |
| grid-auto-rows: minmax( 3rem, auto );
| |
| grid-gap: 0.625rem;
| |
| }
| |
|
| |
| .home-grid--col2 {
| |
| grid-template-columns: 1fr 1fr;
| |
| }
| |
|
| |
| .home-grid a.external {
| |
| background-image: none;
| |
| }
| |
|
| |
|
| /* 链接 */
| | @font-face { |
| .home-link {
| | font-family: "Site Wordmark Font"; |
| display: grid;
| | src: url("https://h2-wiki-1254268741.cos.ap-shanghai.myqcloud.com/font/Site_Wordmark_Font.woff2") format('woff2'); |
| margin-top: 6px;
| | } |
| font-size: 0.875rem;
| |
| font-weight: 500;
| |
| grid-gap: 6px;
| |
| text-align: center;
| |
| }
| |
|
| |
| .home-link__button {
| |
| display: flex;
| |
| }
| |
|
| |
| .home-link__button a {
| |
| flex-grow: 1;
| |
| padding: 0.3rem 0.6rem;
| |
| border: 1px solid;
| |
| border-color: var( --border-color-base );
| |
| background: var( --background-color-framed );
| |
| border-radius: 12px;
| |
| color: var( --color-base--emphasized );
| |
| }
| |
|
| |
| .home-link__button a:hover {
| |
| background: var( --background-color-framed--hover );
| |
| }
| |
|
| |
| .home-link__button a:active {
| |
| background: var( --background-color-framed--active );
| |
| }
| |
|
| |
|
| /* 统计信息 */
| | @font-face { |
| .home-stats {
| | font-family: "JetBrains Mono"; |
| flex-grow: 1;
| | src: url("https://h2-wiki-1254268741.cos.ap-shanghai.myqcloud.com/font/JetBrains_Mono.woff2") format('woff2'); |
| line-height: 1;
| | } |
| }
| |
| | |
| .home-stats__value {
| |
| font-size: 1.5rem;
| |
| font-weight: 600;
| |
| } | |
|
| |
| .home-stats__unit {
| |
| margin-top: 0.2rem;
| |
| color: var( --color-base--subtle );
| |
| font-size: 0.8125rem;
| |
| }
| |
|
| |
|
| /* footer */
| | @font-face { |
| .home-footer {
| | font-family: "MiSans Latin"; |
| font-size: 0.8125rem;
| | src: url("https://h2-wiki-1254268741.cos.ap-shanghai.myqcloud.com/font/MiSans_Latin.woff2") format('woff2'); |
| font-family: monospace;
| | } |
| text-align: center;
| |
| }
| |
|
| |
|
| /* 页面用卡片 */
| | @font-face { |
| .mw-parser-output .card {
| | font-family: "Oswald"; |
| display: flex;
| | src: url("https://h2-wiki-1254268741.cos.ap-shanghai.myqcloud.com/font/Oswald_Regular.woff2") format('woff2'); |
| min-width: 240px;
| | } |
| max-width: 100%;
| |
| box-sizing: border-box;
| |
| flex-direction: column;
| |
| flex-grow: 1;
| |
| justify-content: space-between;
| |
| margin: 0 0.2rem 0.4rem 0.2rem;
| |
| background-color: var(--color-surface-1);
| |
| border-radius: var(--border-radius--medium);
| |
| box-shadow: 0 1px 3px rgba(0,0,0,0.03),0 1px 2px rgba(0,0,0,0.06);
| |
| font-size: 0.875rem;
| |
| transition: box-shadow 0.2s ease;
| |
| }
| |
| .mw-parser-output .card-col4 {
| |
| width: calc(100%/4 - 0.4rem);
| |
| }
| |
| .mw-parser-output .card-top, .mw-parser-output .card-bottom {
| |
| padding: 1.2rem;
| |
| }
| |
| .mw-parser-output .card-button {
| |
| background: var(--color-base);
| |
| border-radius: 0 0 var(--border-radius--medium)var(--border-radius--medium);
| |
| transition: opacity 0.2s ease;
| |
| }
| |
| | |
| /* 搜索 */
| |
| .mw-parser-output .home-header__search { | |
| max-width: 600px;
| |
| padding: 0.6rem 0.8rem;
| |
| margin: 0.8rem auto 0 auto;
| |
| background: var(--color-surface-1);
| |
| border-radius: 100px;
| |
| box-shadow: 0 2.8px 2.2px -4px hsl(220 10% 20% / calc(0.02 + .03)),0 6.7px 5.3px -4px hsl(220 10% 20% / calc(0.02 + .01)),0 12.5px 10px -4px hsl(220 10% 20% / calc(0.02 + .02)),0 22.3px 17.9px -4px hsl(220 10% 20% / calc(0.02 + .02)),0 41.8px 33.4px -4px hsl(220 10% 20% / calc(0.02 + .03)),0 100px 80px -4px hsl(220 10% 20% / 0.02);
| |
| color: var(--color-base--subtle);
| |
| font-size: 0.875rem;
| |
| }
| |
| | |
| /* 文字方框 */
| |
| .mw-parser-output .keyboard-text {
| |
| padding: 0 5px;
| |
| border: 1px solid;
| |
| margin: 0 2px;
| |
| border-radius: 4px;
| |
| } | |
| | |
| /* 卡片 */
| |
| .card {
| |
| display: flex;
| |
| min-width: 240px;
| |
| max-width: 100%;
| |
| box-sizing: border-box;
| |
| flex-direction: column;
| |
| flex-grow: 1;
| |
| justify-content: space-between;
| |
| margin: 0 0.2rem 0.4rem 0.2rem;
| |
| background-color: var( --color-surface-1 );
| |
| border-radius: var( --border-radius--medium );
| |
| box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.03 ), 0 1px 2px rgba( 0, 0, 0, 0.06 );
| |
| font-size: 0.875rem;
| |
| transition: box-shadow 0.2s ease;
| |
| }
| |
|
| |
| .card:hover {
| |
| box-shadow: 0 10px 20px rgba( 0, 0, 0, 0.0475 ), 0 6px 6px rgba( 0, 0, 0, 0.0575 );
| |
| }
| |
|
| |
| .card-col2 {
| |
| width: calc( 100% / 2 - 0.4rem );
| |
| }
| |
|
| |
| .card-col3 {
| |
| width: calc( 100% / 3 - 0.4rem );
| |
| }
| |
|
| |
| .card-col4 {
| |
| width: calc( 100% / 4 - 0.4rem );
| |
| }
| |
|
| |
| .card-col5 {
| |
| width: calc( 100% / 5 - 0.4rem );
| |
| }
| |
|
| |
| .card-col6 {
| |
| width: calc( 100% / 6 - 0.4rem );
| |
| }
| |
|
| |
| .card-container {
| |
| margin-top: 1.6rem !important;
| |
| margin-right: -0.2rem;
| |
| margin-bottom: 1.6rem !important;
| |
| margin-left: -0.2rem;
| |
| border-radius: 0 0 12px 12px;
| |
| }
| |
|
| |
| .card-container.floatnone {
| |
| padding: 0 20px;
| |
| }
| |
|
| |
| .card-row {
| |
| display: flex;
| |
| width: 100%;
| |
| flex-wrap: wrap;
| |
| }
| |
|
| |
| .card-caption {
| |
| font-size: 0.875rem;
| |
| font-weight: 600;
| |
| }
| |
|
| |
| .card-image a {
| |
| display: flex;
| |
| overflow: hidden;
| |
| justify-content: center;
| |
| background: none !important;
| |
| }
| |
|
| |
| .card-image a img {
| |
| transition: transform 0.2s cubic-bezier( 0.77, 0.2, 0.05, 1 );
| |
| }
| |
|
| |
| .card:hover .card-image a img {
| |
| transform: scale( 1.1 );
| |
| }
| |
|
| |
| .card .card-title {
| |
| margin-top: 0;
| |
| margin-bottom: 0.8rem;
| |
| color: var( --color-base--emphasized );
| |
| font-size: 1.25rem;
| |
| /* font-weight: 600; */
| |
| line-height: 1.2;
| |
| }
| |
| | |
| .card .card-title + .byline-bottom {
| |
| margin-top: -0.6rem;
| |
| }
| |
|
| |
| .card ol,
| |
| .card ul {
| |
| padding-left: 1.6rem;
| |
| margin: 0;
| |
| }
| |
|
| |
| .card .byline-top,
| |
| .card .byline-bottom {
| |
| color: var( --color-base );
| |
| font-size: 0.825rem;
| |
| }
| |
|
| |
| .card .byline-top {
| |
| margin: 0 0 0.2rem 0;
| |
| }
| |
|
| |
| .card .byline-bottom {
| |
| margin: 0.2rem 0 1.6rem 0;
| |
| }
| |
|
| |
| .card .byline-bottom + p {
| |
| margin-top: 0.8rem;
| |
| }
| |
|
| |
| .card .numdata {
| |
| margin-top: 0.8rem;
| |
| }
| |
|
| |
| .card-top,
| |
| .card-bottom {
| |
| padding: 1.2rem;
| |
| }
| |
|
| |
| .card-button {
| |
| background: var( --color-base );
| |
| border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
| |
| transition: opacity 0.2s ease;
| |
| }
| |
|
| |
| .card-button:hover {
| |
| opacity: 0.8;
| |
| }
| |
|
| |
| .card-button a {
| |
| display: block;
| |
| padding: 0.6rem;
| |
| /* Cancel out a styles */
| |
| background: none !important;
| |
| color: #fff!important;
| |
| font-size: 0.875rem;
| |
| font-weight: 600;
| |
| letter-spacing: 0.25px;
| |
| text-align: center;
| |
| transition: background 0.2s ease, color 0.2s ease;
| |
| }
| |
|
| |
| .card-bottom {
| |
| background: var( --color-surface-2 );
| |
| }
| |
| | |
| @media only screen and ( max-width: 720px ) {
| |
| .card-row {
| |
| overflow: auto;
| |
| width: auto;
| |
| padding: 0 20px;
| |
| margin: 0 -20px;
| |
| }
| |
| }
| |
| | |
| /* 模板css变量用不了被迫放这里的infobox样式 */
| |
| .infobox {
| |
| /* In case if tooltips go out of boundary */
| |
| overflow: visible;
| |
| width: 100%;
| |
| max-width: 400px;
| |
| margin-top: 0;
| |
| margin-bottom: 1.6rem!important;
| |
| background: var(--color-surface-2);
| |
| border-radius: 8px;
| |
| border-spacing: 0;
| |
| box-shadow: 0 2.8px 2.2px -4px hsl(205 10% 20% / calc(0.02 + .03)),0 6.7px 5.3px -4px hsl(205 10% 20% / calc(0.02 + .01)),0 12.5px 10px -4px hsl(205 10% 20% / calc(0.02 + .02)),0 22.3px 17.9px -4px hsl(205 10% 20% / calc(0.02 + .02)),0 41.8px 33.4px -4px hsl(205 10% 20% / calc(0.02 + .03)),0 100px 80px -4px hsl(205 10% 20% / 0.02);
| |
| font-size: 0.875rem;
| |
| text-align: left;
| |
| }
| |
|
| |
| .infobox-image .image img {
| |
| display: block;
| |
| max-width: 100%;
| |
| background: var( --background-color-quiet--hover );
| |
| }
| |
|
| |
| .infobox .infobox-title {
| |
| width: 100%;
| |
| margin-top: 20px;
| |
| margin-bottom: 5px;
| |
| color: var( --color-base--emphasized );
| |
| font-size: 1.4rem;
| |
| line-height: 1.4;
| |
| }
| |
|
| |
| .infobox .infobox-header {
| |
| width: 100%;
| |
| padding-top: 15px;
| |
| border-top: 1px solid;
| |
| border-color: var( --border-color-base );
| |
| margin-top: 15px;
| |
| color: var( --color-base--emphasized );
| |
| font-size: 1rem;
| |
| }
| |
|
| |
| .infobox-data th {
| |
| color: var( --color-base--subtle );
| |
| font-size: 0.8125rem;
| |
| font-weight: normal;
| |
| letter-spacing: 0.75px;
| |
| }
| |
|
| |
| .infobox tr:first-of-type .mw-collapsible-toggle .mw-collapsible-text {
| |
| position: absolute;
| |
| right: 0;
| |
| display: block;
| |
| padding: 5px 15px;
| |
| background: var( --color-destructive );
| |
| border-radius: 0 var( --border-radius--medium );
| |
| color: #fff;
| |
| }
| |
|
| |
| .infobox tr:first-of-type .mw-collapsible-toggle .mw-collapsible-text:hover {
| |
| background: var( --color-destructive--hover );
| |
| }
| |
|
| |
| .infobox tr:first-of-type .mw-collapsible-toggle .mw-collapsible-text:active {
| |
| background: var( --color-destructive--active );
| |
| }
| |
|
| |
| .infobox tr:first-of-type .mw-collapsible-toggle-collapsed .mw-collapsible-text {
| |
| background: var( --color-primary );
| |
| }
| |
|
| |
| .infobox tr:first-of-type .mw-collapsible-toggle-collapsed .mw-collapsible-text:hover {
| |
| background: var( --color-primary--hover );
| |
| }
| |
|
| |
| .infobox tr:first-of-type .mw-collapsible-toggle-collapsed .mw-collapsible-text:active {
| |
| background: var( --color-primary--active );
| |
| }
| |