User:花开夜/实验性CSS

以下CSS极为逆天。请谨慎引用。

/* Enhanced Chiyogami Style for Wikipedia

Modified to create a Chiyogami-inspired theme with patterns and vibrant colors.

Last updated: 2023-10-05

/

/* 定义自定义颜色和图案 */

root {

   --primary-color: #e63946; /* 鲜艳的红色 */
   --secondary-color: #f1faee; /* 米白色 */
   --accent-color: #a8dadc; /* 淡蓝色 */
   --text-color: #1d3557; /* 深蓝色 */
   --heading-color: #457b9d; /* 中蓝色 */
   --background-pattern-color: #f8edeb; /* 浅桃色 */

}

/* 使用 CSS 渐变创建背景图案 */ body {

   background-color: var(--background-pattern-color);
   background-image:
       radial-gradient(circle at 0 0, transparent 15%, var(--secondary-color) 16%),
       radial-gradient(circle at 10px 10px, var(--secondary-color) 15%, transparent 16%);
   background-size: 20px 20px;
   color: var(--text-color);

}

/* 设置标题样式 */ h1, h2, h3, h4, h5, h6 {

   color: var(--heading-color);
   background-color: rgba(255, 255, 255, 0.8);
   padding: 10px;
   border-left: 5px solid var(--primary-color);
   position: relative;

}

/* 在标题中添加装饰元素 */ h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {

   content: "";
   position: absolute;
   left: -15px;
   top: 50%;
   transform: translateY(-50%);
   width: 10px;
   height: 10px;
   background-color: var(--primary-color);
   border-radius: 50%;

}

/* 设置链接样式 */ a, .vector-menu-tabs li a, .vectorTabs li a, .toctogglelabel, .mw-parser-output a.external, .mw-parser-output a.extiw, .mw-parser-output a.extiw:active,

mw-panel .portal .body li a {

   color: var(--primary-color);
   text-decoration: none;
   border-bottom: 2px solid transparent;
   transition: color 0.3s, border-bottom-color 0.3s;

}

a:hover, .vector-menu-tabs li a:hover, .vectorTabs li a:hover, .toctogglelabel:hover, .mw-parser-output a.external:hover, .mw-parser-output a.extiw:hover,

mw-panel .portal .body li a:hover {

   color: var(--accent-color);
   border-bottom-color: var(--accent-color);

}

/* 设置已访问链接的样式 */ a:visited, .mw-parser-output a.extiw:visited,

mw-panel .portal .body li a:visited {

   color: var(--heading-color);

}

/* 设置表格和盒子的样式 */ table, table.ambox-content, table.toccolours, .mw-notification, .mwe-popups, .infobox, .toc, .thumbinner, figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'], figure[typeof~='mw:File/Thumb'] > figcaption, figure[typeof~='mw:File/Frame'] > figcaption, .wikitable, .cbnnr-main, .cx-callout, .overlay.media-viewer,

simpleSearch,
simpleSearch #searchInput,
siteNotice #centralNotice .cnotice {

   background-color: rgba(255, 255, 255, 0.9);
   border: 1px solid var(--accent-color);
   border-radius: 5px;
   padding: 10px;

}

/* 设置状态栏的样式 */

p-personal,
p-navigation,
p-interaction,
p-tb,
p-coll-print_export,
p-wikibase-otherprojects,
p-search {

   background-color: var(--heading-color);
   color: #fff;
   padding: 10px;

}

/* 设置按钮样式 */ button, input[type="submit"], input[type="button"], input[type="reset"] {

   background-color: var(--primary-color);
   color: #fff;
   border: none;
   border-radius: 5px;
   padding: 8px 15px;
   cursor: pointer;
   transition: background-color 0.3s;

}

button:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover {

   background-color: var(--accent-color);

}

/* 设置输入字段样式 */ input[type="text"], input[type="search"], textarea {

   background-color: rgba(255, 255, 255, 0.8);
   border: 1px solid var(--accent-color);
   border-radius: 5px;
   padding: 5px;
   width: 100%;

}

/* 调整字体大小 */

bodyContent {

   font-size: 1.1em;

}

/* 设置页脚样式 */

footer {

   background-color: var(--heading-color);
   color: #fff;
   padding: 20px;

}

/* 为图片添加装饰性边框 */ .thumbimage, figure[typeof~='mw:File/Thumb'] > *:first-child > *:first-child:not( .mw-broken-media ), figure[typeof~='mw:File/Frame'] > *:first-child > *:first-child:not( .mw-broken-media ) {

   border: 5px solid var(--accent-color);
   border-radius: 10px;
   padding: 5px;

}

/* 设置导航菜单样式 */

mw-panel,
p-logo {

   background-color: var(--primary-color);
   color: #fff;

}

/* 添加实验性的装饰元素 */

p-logo a::after {

   content: " ⛩️";
   font-size: 1.5em;
   display: inline-block;
   vertical-align: middle;

}

/* 设置搜索栏样式 */

simpleSearch {

   background-color: rgba(255, 255, 255, 0.9);
   border: 1px solid var(--accent-color);
   border-radius: 5px;
   padding: 5px;

}

/* 设置主要内容区域的样式 */

content {

   background-color: rgba(255, 255, 255, 0.95);
   padding: 20px;
   border-radius: 10px;

}

/* 添加动画效果 */ a {

   position: relative;

}

a::after {

   content: ;
   position: absolute;
   width: 100%;
   transform: scaleX(0);
   height: 2px;
   bottom: -2px;
   left: 0;
   background-color: var(--primary-color);
   transform-origin: bottom right;
   transition: transform 0.3s ease-out;

}

a:hover::after {

   transform: scaleX(1);
   transform-origin: bottom left;

}

/* 更改滚动条颜色 */

-webkit-scrollbar {

   width: 10px;

}

-webkit-scrollbar-track {

   background: var(--background-pattern-color);

}

-webkit-scrollbar-thumb {

   background: var(--primary-color);
   border-radius: 5px;

}

-webkit-scrollbar-thumb:hover {

   background: var(--accent-color);

}

/* 实验性：添加浮动元素 */

content::before {

   content: "🌸";
   font-size: 50px;
   position: fixed;
   top: 20px;
   right: 20px;
   animation: float 5s infinite ease-in-out;

}

@keyframes float {

   0% { transform: translateY(0); opacity: 1; }
   50% { transform: translateY(-20px); opacity: 0.7; }
   100% { transform: translateY(0); opacity: 1; }

}

/* 实验性：添加背景覆盖层 */ body::after {

   content: ;
   background-image: url('data:image/svg+xml;utf8,🎏');
   opacity: 0.1;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-repeat: repeat;
   pointer-events: none;

}