|
|
| （未显示同一用户的15个中间版本） |
| 第1行： |
第1行： |
| /* 使用第一段CSS中的变量和模式 */
| | /* 由 御坂秋生 于 2024-02-09 14:00 开始编写，参考 StarCitizen Wiki、HydCraft Wiki 排版及 CSS 样式 */ |
| :root {
| | /* 首页 */ |
| --font-family-citizen-base: "Inter";
| | .page-首页 .mw-body-header, |
| --font-family-citizen-monospace: "JetBrains Mono";
| | .page-首页 .previewnote, |
| --color-primary__h: 200;
| | .page-首页 .page-info { |
| --color-primary__s: 55%;
| | display: none; |
| --color-primary__l: 48%;
| | } |
| --color-surface-0__s: 3%;
| |
| --color-surface-0__l: 98%;
| |
| --color-surface-1__s: 3%;
| |
| --color-surface-1__l: 98%;
| |
| --color-surface-2__s: 10%;
| |
| --color-surface-2__l: 95%;
| |
| --color-surface-3__s: 10%;
| |
| --color-surface-3__l: 85%;
| |
| --color-surface-4__s: 10%;
| |
| --color-surface-4__l: 74%;
| |
| --background-color-overlay: hsla(var(--color-primary__h), 3%, 98%, 0.95);
| |
| --background-color-overlay--lighter: hsla(var(--color-primary__h), 3%, 98%, 0.6);
| |
|
| |
| /* 首页特定变量 */
| |
| --home-header-height: 46vh;
| |
| --home-header-margin-bottom: -42vh;
| |
| --home-card-border-radius: 10px;
| |
| --home-card-padding: 1.25rem;
| |
| --home-card-box-shadow: 0 0.25rem 1.25rem hsla(var(--color-primary__h), 20%, 10%, 0.08);
| |
| --home-card-box-shadow-hover: 0 0.5rem 2rem hsla(var(--color-primary__h), 20%, 10%, 0.12);
| |
|
| |
| /* 评论区域变量 */
| |
| --comment-bg-color: hsla(var(--color-primary__h), var(--color-surface-0__s), var(--color-surface-0__l), 0.95);
| |
| --comment-border-radius: var(--home-card-border-radius);
| |
| --comment-padding: var(--home-card-padding);
| |
| --comment-avatar-size: 3.75rem;
| |
|
| |
| /* 按钮变量 */
| |
| --button-primary-bg: hsl(var(--color-primary__h), var(--color-primary__s), var(--color-primary__l));
| |
| --button-primary-hover: hsl(var(--color-primary__h), var(--color-primary__s), calc(var(--color-primary__l) - 8%));
| |
| --button-text-color: white;
| |
| }
| |
|
| |
|
| /* 深色模式变量 */
| | .page-首页 .header-image { |
| :root.skin-theme-clientpref-night {
| | background-image: linear-gradient(to top,var(--color-surface-0),transparent 150%),url(https://wiki.hokubu.cn/w/images/3/3d/Xujiang2.jpeg); |
| --home-card-box-shadow: 0 0.25rem 1.25rem hsla(var(--color-primary__h), 3%, 5%, 0.2);
| | background-size: cover; |
| --home-card-box-shadow-hover: 0 0.5rem 2rem hsla(var(--color-primary__h), 3%, 5%, 0.3);
| | background-position: top center; |
| --comment-bg-color: hsla(var(--color-primary__h), 15%, 15%, 0.95);
| | height: 46vh; |
| }
| | margin-bottom: -42vh; |
| | } |
|
| |
|
| @media screen and (prefers-color-scheme: dark) {
| | @media (max-width: 720px) { |
| :root.skin-theme-clientpref-os {
| | .page-首页 .header-image { |
| --home-card-box-shadow: 0 0.25rem 1.25rem hsla(var(--color-primary__h), 3%, 5%, 0.2);
| | background-position: top; |
| --home-card-box-shadow-hover: 0 0.5rem 2rem hsla(var(--color-primary__h), 3%, 5%, 0.3);
| | height: 36vh; |
| --comment-bg-color: hsla(var(--color-primary__h), 15%, 15%, 0.95);
| | margin-bottom: -32vh; |
| }
| | } |
| }
| | } |
|
| |
|
| /* 首页核心样式 */
| | .skin-citizen-dark .adaptive-img img { |
| .page-首页 .mw-body-header,
| | filter: invert(1)!important; |
| .page-首页 .previewnote,
| | } |
| .page-首页 .page-info {
| |
| display: none;
| |
| }
| |
|
| |
|
| .page-首页 .header-image {
| | /* Powered By HydCraft Wiki and Aurora_Lemon */ |
| background-image:
| | :root { |
| linear-gradient(to top,
| | --box-shadow-plist: 0 3px 10px rgb(0 0 0 / 4%), 0 -3px 10px rgb(0 0 0 / 4%); |
| hsla(var(--color-primary__h), var(--color-surface-0__s), var(--color-surface-0__l), 0.95),
| | --homecard-box-shadow: 0 3px 6px rgba(0,0,0,0.04), 0 3px 6px rgba(0,0,0,0.0575); |
| transparent 70%),
| | --box-shadow-cardhover: 0 10px 20px rgba(0,0,0,0.0475), 0 6px 6px rgba(0,0,0,0.0575); |
| url(https://wiki.hokubu.cn/w/images/3/3d/Xujiang2.jpeg);
| | } |
| background-size: cover;
| |
| background-position: top center;
| |
| height: var(--home-header-height);
| |
| margin-bottom: var(--home-header-margin-bottom);
| |
| border-bottom-left-radius: var(--home-card-border-radius);
| |
| border-bottom-right-radius: var(--home-card-border-radius);
| |
| position: relative;
| |
| overflow: hidden;
| |
| box-shadow: var(--home-card-box-shadow);
| |
| }
| |
| | |
| .page-首页 .header-image::after {
| |
| content: '';
| |
| position: absolute;
| |
| bottom: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 2px;
| |
| background: linear-gradient(90deg,
| |
| transparent,
| |
| hsla(var(--color-primary__h), 70%, 60%, 0.7),
| |
| transparent);
| |
| }
| |
| | |
| @media (max-width: 720px) {
| |
| :root {
| |
| --home-header-height: 36vh;
| |
| --home-header-margin-bottom: -32vh;
| |
| }
| |
| }
| |
| | |
| /* 评论区样式 */
| |
| .comments-body {
| |
| margin: 2rem auto;
| |
| padding: var(--comment-padding);
| |
| width: calc(100% - 2 * var(--comment-padding)) !important;
| |
| max-width: 1200px;
| |
| background: var(--comment-bg-color);
| |
| border-radius: var(--comment-border-radius) !important;
| |
| box-shadow: var(--home-card-box-shadow) !important;
| |
| box-sizing: border-box !important;
| |
| backdrop-filter: blur(8px);
| |
| border: 1px solid hsla(var(--color-primary__h), 10%, 90%, 0.2);
| |
| }
| |
| | |
| .c-item.full {
| |
| margin-top: 1.5rem;
| |
| padding: 1.5rem;
| |
| background: var(--comment-bg-color) !important;
| |
| border-radius: calc(var(--comment-border-radius) - 0.25rem) !important;
| |
| box-shadow: var(--home-card-box-shadow) !important;
| |
| border: none !important;
| |
| box-sizing: border-box !important;
| |
| transition: transform 0.2s ease, box-shadow 0.2s ease;
| |
| }
| |
| | |
| .c-item.full:hover {
| |
| transform: translateY(-2px);
| |
| box-shadow: var(--home-card-box-shadow-hover) !important;
| |
| }
| |
| | |
| .c-comment.f-message {
| |
| margin-bottom: 1rem !important;
| |
| color: hsl(var(--color-primary__h), 20%, 30%);
| |
| font-weight: 500;
| |
| }
| |
| | |
| :root.skin-theme-clientpref-night .c-comment.f-message,
| |
| :root.skin-theme-clientpref-os .c-comment.f-message {
| |
| color: hsl(var(--color-primary__h), 10%, 80%);
| |
| }
| |
| | |
| /* 输入框与排序 */
| |
| .comments-body textarea#comment,
| |
| .c-order-select select {
| |
| padding: 0.75rem 1rem !important;
| |
| border-radius: calc(var(--comment-border-radius) - 0.25rem) !important;
| |
| border: 1px solid hsla(var(--color-primary__h), 15%, 85%, 0.6) !important;
| |
| background: hsla(var(--color-primary__h), var(--color-surface-0__s), var(--color-surface-0__l), 0.7) !important;
| |
| color: hsl(var(--color-primary__h), 20%, 25%) !important;
| |
| box-sizing: border-box !important;
| |
| font-family: var(--font-family-citizen-base);
| |
| transition: border-color 0.2s ease, box-shadow 0.2s ease;
| |
| }
| |
| | |
| .comments-body textarea#comment:focus,
| |
| .c-order-select select:focus {
| |
| outline: none;
| |
| border-color: hsl(var(--color-primary__h), 60%, 60%) !important;
| |
| box-shadow: 0 0 0 3px hsla(var(--color-primary__h), 60%, 60%, 0.2) !important;
| |
| }
| |
| | |
| .comments-body textarea#comment {
| |
| width: 100% !important;
| |
| min-height: 6rem;
| |
| resize: vertical;
| |
| }
| |
| | |
| /* 排序区域 */
| |
| .c-order-select {
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| gap: 0.75rem !important;
| |
| margin-bottom: 1.25rem;
| |
| }
| |
| | |
| .c-order-select::before {
| |
| content: "排序方式：" !important;
| |
| color: hsl(var(--color-primary__h), 20%, 35%) !important;
| |
| font-weight: 600 !important;
| |
| white-space: nowrap !important;
| |
| font-size: 0.95rem;
| |
| }
| |
| | |
| /* 按钮样式 */
| |
| .c-form-button .site-button,
| |
| .c-spy a,
| |
| .c-actions a[rel="nofollow"]:not(.comments-reply-to),
| |
| .c-actions a.comments-reply-to {
| |
| display: inline-flex !important;
| |
| align-items: center;
| |
| justify-content: center;
| |
| padding: 0.6rem 1.25rem !important;
| |
| background: var(--button-primary-bg) !important;
| |
| color: var(--button-text-color) !important;
| |
| border-radius: calc(var(--comment-border-radius) - 0.5rem) !important;
| |
| box-shadow: var(--home-card-box-shadow) !important;
| |
| text-decoration: none !important;
| |
| font-weight: 600 !important;
| |
| border: none;
| |
| cursor: pointer;
| |
| transition: all 0.2s ease;
| |
| font-size: 0.9rem;
| |
| gap: 0.4rem;
| |
| }
| |
| | |
| .c-form-button .site-button {
| |
| padding: 0.7rem 1.5rem !important;
| |
| font-size: 0.95rem;
| |
| }
| |
| | |
| .c-actions a[rel="nofollow"]:not(.comments-reply-to) {
| |
| margin-right: 0.75rem !important;
| |
| }
| |
| | |
| /* 按钮hover效果 */
| |
| .c-form-button .site-button:hover,
| |
| .c-spy a:hover,
| |
| .c-actions a[rel="nofollow"]:not(.comments-reply-to):hover,
| |
| .c-actions a.comments-reply-to:hover {
| |
| background: var(--button-primary-hover) !important;
| |
| transform: translateY(-1px);
| |
| box-shadow: var(--home-card-box-shadow-hover) !important;
| |
| }
| |
| | |
| /* 评论头像 */
| |
| .c-avatar img {
| |
| width: var(--comment-avatar-size) !important;
| |
| height: var(--comment-avatar-size) !important;
| |
| border-radius: calc(var(--comment-border-radius) - 0.5rem) !important;
| |
| box-shadow: var(--home-card-box-shadow) !important;
| |
| border: 2px solid hsla(var(--color-primary__h), var(--color-surface-0__s), var(--color-surface-0__l), 0.8) !important;
| |
| margin: 0.5rem 0 0 0.5rem !important;
| |
| object-fit: cover;
| |
| transition: all 0.3s ease;
| |
| }
| |
| | |
| .c-avatar img:hover {
| |
| transform: scale(1.05);
| |
| box-shadow: var(--home-card-box-shadow-hover) !important;
| |
| }
| |
| | |
| /* 暗色模式调整 */
| |
| :root.skin-theme-clientpref-night .comments-body,
| |
| :root.skin-theme-clientpref-night .c-item.full,
| |
| :root.skin-theme-clientpref-os .comments-body,
| |
| :root.skin-theme-clientpref-os .c-item.full {
| |
| background: hsla(var(--color-primary__h), 15%, 15%, 0.95) !important;
| |
| border: 1px solid hsla(var(--color-primary__h), 15%, 25%, 0.3);
| |
| }
| |
| | |
| :root.skin-theme-clientpref-night .comments-body textarea#comment,
| |
| :root.skin-theme-clientpref-night .c-order-select select,
| |
| :root.skin-theme-clientpref-os .comments-body textarea#comment,
| |
| :root.skin-theme-clientpref-os .c-order-select select {
| |
| background: hsla(var(--color-primary__h), 15%, 20%, 0.8) !important;
| |
| color: hsl(var(--color-primary__h), 10%, 85%) !important;
| |
| border-color: hsla(var(--color-primary__h), 15%, 30%, 0.6) !important;
| |
| }
| |
| | |
| :root.skin-theme-clientpref-night .c-avatar img,
| |
| :root.skin-theme-clientpref-os .c-avatar img {
| |
| border-color: hsla(var(--color-primary__h), 15%, 20%, 0.8) !important;
| |
| }
| |
| | |
| /* 响应式调整 */
| |
| @media (max-width: 768px) {
| |
| :root {
| |
| --home-card-padding: 1rem;
| |
| --comment-avatar-size: 3.25rem;
| |
| }
| |
|
| |
| .c-order-select {
| |
| flex-direction: column;
| |
| align-items: flex-start !important;
| |
| }
| |
|
| |
| .comments-body {
| |
| padding: 1rem !important;
| |
| width: calc(100% - 2rem) !important;
| |
| }
| |
| }
| |
