site-cn-123-color

这是一个基于平行版式制作的亮红色预设,如果你想使用它,请在你的作品开头添加如下语法以应用此预设:

[[include :scpsandboxcn:site-cn-123-color]]

需要注意,这个没有版头副标题和版头标志(logo)。

这有一个暗绿色预设,如果你想使用它,请在你的作品开头添加如下语法以应用预设:

[[include :scpsandboxcn:site-cn-123-color |green=*]]


源代码:

:root {
    /* 颜色系统 - 亮红色 */
    --red-color-light: 255, 102, 102;  /* #ff6666 */
    --red-color: 255, 51, 51;           /* #ff3333 */
    --red-color-dark: 234, 51, 35;       /* #ea3323 */
    --red-color-darker: 204, 0, 0;      /* #cc0000 */
    --red-color-title: 243, 248, 242;      /* #f3f8f2 */
 
    /* 基础色调映射 */
    --basalt-undertone: var(--red-color);           /* 基础暗色调 */
    --basalt-overtone: var(--red-color-light);       /* 基础亮色调 */
    --basalt-bright-element-color: var(--red-color); /* 亮色元素 */
    --basalt-secondary-color: var(--red-color-dark); /* 次要色 */
    --basalt-primary-color: var(--red-color-darker); /* 主要色 */
 
    /* 尺寸变量 */
    --title-size: 2rem;              /* 标题大小 */
    --subtitle-size: 0rem;            /* 副标题大小(隐藏) */
    --user-button-width: 2.25rem;      /* 用户按钮宽度 */
    --side-bar-button-width: 2.25rem;   /* 侧边栏按钮宽度 */
 
    /* 头部样式 */
    --header-drop-shadow-opacity: 0;                    /* 头部阴影透明度 */
    --header-border-width: var(--base-border-width);     /* 头部边框宽度 */
    --header-border-color: var(--basalt-secondary-color); /* 头部边框颜色 */
    --header-gradient: linear-gradient(rgb(var(--basalt-primary-color)), rgb(var(--basalt-primary-color))); /* 头部渐变 */
    --header-stripes: var(--header-gradient);             /* 头部条纹 */
 
    /* 链接颜色 */
    --link-color: 235, 72, 63;
    --header-title-color: var(--red-color-title);      /* 头部标题颜色 */
    --top-bar-link-color: var(--basalt-main-text-color); /* 顶部栏链接颜色 */
    --link-visited-color: var(--link-color);             /* 已访问链接颜色 */
 
    /* 内容列布局 */
    --content-columns: [full-start] var(--main-content-side-margin) [wide-start] 1fr [content-start] min(calc(100% - 2 * var(--main-content-side-margin)), calc(var(--main-content-width) - 2 * var(--main-content-side-margin))) [content-end] 1fr [wide-end] var(--main-content-side-margin) [full-end];
 
    /* 阴影效果 */
    --base-shadow: 0 0.1rem 0.2rem rgba(var(--basalt-overtone), 0.1);
}
 
:root:lang(cn) {
    --title: "Site-CN-123";  /* 设置版头标题 */
}
 
div#header h1 a::before {
    display: none;  /* 隐藏默认标题前的装饰 */
}
 
div#header h1 a span::after {
    margin-bottom: 0;  /* 调整标题后的间距 */
}
 
div#action-area-top{
    display: none;  /* 隐藏顶部的操作区域 */
}
 
/* 脚注 */
 
div#footer {
    border-top: none;  /* 移除顶部边框 */
}
 
div.footnotes-footer {
    margin: 0;
    padding: 0;
    background-color: #f7f2f2;
}
 
div.footnotes-footer::before,
div.footnotes-footer div.title {
    display: none; /* 隐藏脚注标题 */
}
 
.footnotes-footer .footnote-footer > a:first-child {
    background-color: transparent !important;  /* 设置为透明 */
}
 
div.footnotes-footer div.footnote-footer {
    margin-block: 1em; /* 每个脚注上下边距 */
}
 
/* 页面编辑按钮 */
 
div#page-options-bottom a {
    color: #bebebe !important;
}
div#page-options-bottom a:hover {
    color: rgb(var(--red-color)) !important;
}
 
/* 正文背景设为白色 */
body {
    background-color: #f8f2f2 !important;
}
 
main, 
article,
.content,
.post-content,
.entry-content,
.page-content,
.main-content {
    background-color: #f8f2f2 !important;
}
 
p, div:not([class*="header"]):not([class*="nav"]):not([class*="sidebar"]):not([class*="footer"]),
section:not([class*="header"]):not([class*="nav"]):not([class*="sidebar"]):not([class*="footer"]) {
    background-color: transparent;
}
 
/* 文本颜色调整为更适合白灰色背景的黑灰色 */
body, main, article, .content, p {
    color: #141414;
}
 
/* 可选:为内容区域添加轻微的阴影或边框,使其更突出 */
.main-content, .content, article {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    padding: 20px;
}
 
/* 标签 */
 
/* 匹配所有常见的main-content变体 */
.page-tags > span a,
.tags > span a,
[class*="page-tags"] > span a,
[class*="tags"] > span a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    padding: .25em .475em;
    flex-grow: 1;
    background-color: rgb(var(--tag-background-color), var(--basalt-UI-opacity));
    border-radius: 0 .5em;
    box-shadow: 0 0 0 0 rgb(var(--basalt-focus-color));
    transition: all var(--button-hover-transition);
    color: #f7f2f2 !important;  /* 白色文字,用!important确保覆盖 */
}
 
/* 新元素 */

:root {
    /* 颜色系统 - 暗绿色 */
    --green-color-light: 184, 217, 179;  /* #b8d9b3 */
    --green-color: 119, 153, 119;           /* #779977 */
    --green-color-dark: 93, 164, 77;       /* #5da44d */
    --green-color-darker: 51, 153, 51;      /* #339933 */
    --green-color-title: 243, 248, 242;      /* #f3f8f2 */
 
    /* 基础色调映射 */
    --basalt-undertone: var(--green-color);           /* 基础暗色调 */
    --basalt-overtone: var(--green-color-light);       /* 基础亮色调 */
    --basalt-bright-element-color: var(--green-color); /* 亮色元素 */
    --basalt-secondary-color: var(--green-color-dark); /* 次要色 */
    --basalt-primary-color: var(--green-color-darker); /* 主要色 */
除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution 3.0 License