|
|
第1行: |
第1行: |
| /* Windows XP风格MediaWiki主题 - 完整迁移自Wikidot */ | | /* 轮播图功能 */ |
| | | mw.hook('wikipage.content').add(function($content) { |
| /* 导入所需字体 */
| | // 查找页面中所有轮播图 |
| @import url("https://fonts.googleapis.com/css2?family=Microsoft+Sans+Serif&display=swap");
| | $content.find('.mw-carousel').each(function() { |
| @import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
| | const $carousel = $(this); |
| @import url("https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-16px.css");
| | const $items = $carousel.find('.carousel-item'); |
| @import url("https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-12px.css");
| | const $indicators = $carousel.find('.carousel-indicators'); |
| @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
| | const $prevBtn = $carousel.find('.carousel-prev'); |
| | | const $nextBtn = $carousel.find('.carousel-next'); |
| :root {
| |
| /* 主题基础设置 */ | |
| --fade-in-delay: 0.1s;
| |
| --theme-base: "xp-style";
| |
| --theme-id: "windows-xp"; | |
| --theme-name: "Windows XP Theme"; | |
| | | |
| /* 字体设置 - 保持原有字体 */ | | let currentIndex = 0; |
| --body-font: "VonwaonBitmap 16px", VT323, monospace;
| | const slideCount = $items.length; |
| --header-font: "VonwaonBitmap 16px", VT323, monospace;
| |
| --title-font: "VonwaonBitmap 16px", VT323, monospace;
| |
| --mono-font: "VonwaonBitmap 16px", VT323, monospace;
| |
| --pixel-font-16: 'VonwaonBitmap 16px', VT323, monospace;
| |
| --pixel-font-12: 'VonwaonBitmap 12px', VT323, monospace;
| |
| --base-font-size: 14px; | |
| | | |
| /* Windows XP 颜色方案 */ | | if (slideCount === 0) return; |
| --xp-blue: 49, 106, 197;
| |
| --xp-blue-light: 82, 153, 235;
| |
| --xp-blue-dark: 16, 35, 85;
| |
| --xp-green: 57, 154, 48;
| |
| --xp-button: 192, 192, 192;
| |
| --xp-window-border: 0, 0, 0;
| |
| --xp-window-bg: 236, 233, 216;
| |
| --xp-text: 0, 0, 0;
| |
| | | |
| /* 颜色方案 - 迁移并适配XP风格 */ | | // 创建指示器 |
| --white-monochrome: 255, 255, 255; | | for (let i = 0; i < slideCount; i++) { |
| --pale-gray-monochrome: 236, 233, 216;
| | const $indicator = $('<div class="indicator"></div>'); |
| --light-gray-monochrome: 192, 192, 192;
| | if (i === 0) $indicator.addClass('active'); |
| --gray-monochrome: 128, 128, 128;
| | |
| --black-monochrome: 0, 0, 0;
| | $indicator.on('click', function() { |
| --bright-accent: var(--xp-blue);
| | goToSlide(i); |
| --medium-accent: var(--xp-blue);
| | }); |
| --dark-accent: var(--xp-blue-dark);
| | |
| --pale-accent: var(--xp-blue-light); | | $indicators.append($indicator); |
| | } |
| | | |
| /* 链接颜色 */ | | // 初始化第一张幻灯片 |
| --link-color: 0, 0, 255; | | $items.eq(0).addClass('active'); |
| --visited-link-color: 128, 0, 128;
| |
| --hover-link-color: 0, 0, 255;
| |
| | | |
| /* 文本阴影 */ | | // 给每个幻灯片添加点击事件 |
| --text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); | | $items.each(function() { |
| | const $item = $(this); |
| | const link = $item.data('link'); |
| | |
| | if (link && link.length > 0) { |
| | $item.css('cursor', 'pointer').on('click', function() { |
| | window.location.href = link; |
| | }); |
| | } |
| | }); |
| | | |
| /* 边框和阴影 */ | | // 切换到指定幻灯片 |
| --window-border: 1px solid rgb(var(--xp-window-border)); | | function goToSlide(index) { |
| --window-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
| | $items.removeClass('active'); |
| }
| | $indicators.find('.indicator').removeClass('active'); |
| | | |
| /* 应用全局字体 */
| | $items.eq(index).addClass('active'); |
| body {
| | $indicators.find('.indicator').eq(index).addClass('active'); |
| font-family: var(--body-font) !important;
| | |
| font-size: var(--base-font-size) !important;
| | currentIndex = index; |
| line-height: 1.5 !important;
| |
| background-color: #3a6ea5; /* 经典XP桌面蓝色背景 */
| |
| background-image: url("/aoh2wiki/images/b/be/Microsoft_Nostalgic_Windows_Wallpaper_4k.jpg");
| |
| background-size: cover;
| |
| background-position: center;
| |
| background-repeat: no-repeat;
| |
| background-attachment: fixed;
| |
| color: rgb(var(--xp-text));
| |
| }
| |
| | |
| /* 标题字体 */
| |
| h1, h2, h3, h4, h5, h6, #firstHeading {
| |
| font-family: var(--title-font);
| |
| color: rgb(var(--white-monochrome));
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| padding: 5px 10px;
| |
| margin-top: 10px;
| |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| |
| position: relative;
| |
| text-shadow: var(--text-shadow);
| |
| }
| |
| | |
| /* 窗口操作按钮 - 关闭、最大化、最小化 */
| |
| h1::after,
| |
| h2::after,
| |
| h3::after,
| |
| h4::after,
| |
| h5::after,
| |
| h6::after,
| |
| #firstHeading::after {
| |
| content: "×";
| |
| position: absolute;
| |
| top: 2px;
| |
| right: 5px;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-color: #ff6347;
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| text-align: center;
| |
| line-height: 16px;
| |
| font-size: 12px;
| |
| color: white;
| |
| cursor: pointer;
| |
| }
| |
| | |
| h1::before,
| |
| h2::before,
| |
| h3::before,
| |
| h4::before,
| |
| h5::before,
| |
| h6::before,
| |
| #firstHeading::before {
| |
| content: "□";
| |
| position: absolute;
| |
| top: 2px;
| |
| right: 25px;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-color: rgb(var(--light-gray-monochrome));
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| text-align: center;
| |
| line-height: 16px;
| |
| font-size: 12px;
| |
| color: black;
| |
| cursor: pointer;
| |
| }
| |
| | |
| h1 span::before,
| |
| h2 span::before,
| |
| h3 span::before,
| |
| h4 span::before,
| |
| h5 span::before,
| |
| h6 span::before,
| |
| #firstHeading span::before {
| |
| content: "_";
| |
| position: absolute;
| |
| top: 2px;
| |
| right: 45px;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-color: rgb(var(--light-gray-monochrome));
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| text-align: center;
| |
| line-height: 14px;
| |
| font-size: 12px;
| |
| color: black;
| |
| font-weight: bold;
| |
| cursor: pointer;
| |
| }
| |
| | |
| /* 链接样式 */
| |
| a {
| |
| color: rgb(var(--link-color));
| |
| text-decoration: none;
| |
| }
| |
| | |
| a:visited {
| |
| color: rgb(var(--visited-link-color));
| |
| }
| |
| | |
| a:hover {
| |
| color: rgb(var(--hover-link-color));
| |
| text-decoration: underline;
| |
| }
| |
| | |
| /* ">" 箭头指示符 - 保留原样 */
| |
| a:hover::before {
| |
| content: "> ";
| |
| }
| |
| | |
| /* 背景样式 */
| |
| html, body {
| |
| background-color: #3a6ea5 !important; /* 保留XP桌面风格 */
| |
| }
| |
| | |
| /* 搜索框和搜索按钮样式 */
| |
| #searchButton,
| |
| .searchButton, | |
| input[type="submit"],
| |
| input[type="button"],
| |
| .mw-ui-button,
| |
| button[name="go"],
| |
| button[name="fulltext"],
| |
| .mw-ui-button.mw-ui-progressive {
| |
| background: linear-gradient(to bottom, #f6f6f6, #e0e0e0) !important;
| |
| border: 1px solid #ababab !important;
| |
| color: black !important;
| |
| font-family: var(--body-font) !important;
| |
| padding: 3px 8px !important;
| |
| cursor: pointer !important;
| |
| transition: all 0.2s ease !important;
| |
| border-radius: 0 !important;
| |
| box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
| |
| }
| |
| | |
| #searchButton:hover,
| |
| .searchButton:hover, | |
| input[type="submit"]:hover,
| |
| input[type="button"]:hover,
| |
| .mw-ui-button:hover,
| |
| button[name="go"]:hover,
| |
| button[name="fulltext"]:hover,
| |
| .mw-ui-button.mw-ui-progressive:hover {
| |
| background: linear-gradient(to bottom, #f9f9f9, #e9e9e9) !important;
| |
| box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) !important;
| |
| }
| |
| | |
| /* 分类条样式 */
| |
| #catlinks,
| |
| .catlinks { | |
| background-color: rgb(var(--xp-window-bg)) !important;
| |
| border: 1px solid rgb(var(--xp-window-border)) !important;
| |
| padding: 0.5em !important;
| |
| margin-top: 1em !important;
| |
| font-family: var(--body-font) !important;
| |
| box-shadow: var(--window-shadow) !important;
| |
| }
| |
| | |
| #catlinks a,
| |
| .catlinks a { | |
| color: rgb(var(--link-color)) !important;
| |
| text-decoration: none !important;
| |
| }
| |
| | |
| #catlinks a:hover,
| |
| .catlinks a:hover { | |
| color: rgb(var(--hover-link-color)) !important;
| |
| text-decoration: underline !important;
| |
| }
| |
| | |
| /* 工具栏样式 */
| |
| #footer-info,
| |
| #footer-places,
| |
| .footer-places, | |
| .footer-info {
| |
| background-color: rgb(var(--xp-window-bg)) !important;
| |
| border-top: 1px solid rgb(var(--xp-window-border)) !important;
| |
| color: rgb(var(--xp-text)) !important;
| |
| padding: 0.5em 1em !important;
| |
| font-family: var(--body-font) !important;
| |
| }
| |
| | |
| #footer-info a,
| |
| #footer-places a {
| |
| color: rgb(var(--link-color)) !important;
| |
| }
| |
| | |
| #footer-info a:hover,
| |
| #footer-places a:hover {
| |
| color: rgb(var(--hover-link-color)) !important;
| |
| }
| |
| | |
| /* 主内容区背景 */
| |
| #content {
| |
| background-color: rgb(var(--xp-window-bg));
| |
| position: relative;
| |
| border: 2px solid rgb(var(--xp-window-border));
| |
| box-shadow: var(--window-shadow);
| |
| margin: 10px auto;
| |
| padding: 0;
| |
| border-radius: 0;
| |
| }
| |
| | |
| /* 导航栏 */
| |
| .navbar,
| |
| .navbar.navbar-default,
| |
| .navbar-light {
| |
| background-color: rgb(var(--xp-window-bg)) !important;
| |
| border: 1px solid rgb(var(--xp-window-border)) !important;
| |
| box-shadow: var(--window-shadow) !important;
| |
| border-radius: 0 !important;
| |
| }
| |
| | |
| .navbar .navbar-brand,
| |
| .navbar .nav-link,
| |
| .navbar-light .navbar-nav .nav-link {
| |
| color: rgb(var(--link-color)) !important;
| |
| font-family: var(--header-font) !important;
| |
| }
| |
| | |
| .navbar .nav-link:hover,
| |
| .navbar-light .navbar-nav .nav-link:hover {
| |
| color: rgb(var(--hover-link-color)) !important;
| |
| background-color: rgba(var(--xp-blue), 0.1) !important;
| |
| }
| |
| | |
| /* 下拉菜单 */
| |
| .dropdown-menu {
| |
| background-color: rgb(var(--xp-window-bg)) !important;
| |
| border: 1px solid rgb(var(--xp-window-border)) !important;
| |
| box-shadow: var(--window-shadow) !important;
| |
| border-radius: 0 !important;
| |
| }
| |
| | |
| .dropdown-item {
| |
| color: rgb(var(--link-color)) !important;
| |
| font-family: var(--body-font) !important;
| |
| }
| |
| | |
| .dropdown-item:hover {
| |
| background-color: rgba(var(--xp-blue), 0.1) !important;
| |
| color: rgb(var(--hover-link-color)) !important;
| |
| }
| |
| | |
| /* 侧边栏 */
| |
| #mw-navigation, #mw-panel, .sidebar {
| |
| background-color: rgb(var(--xp-window-bg)) !important;
| |
| border: 2px solid rgb(var(--xp-window-border)) !important;
| |
| box-shadow: var(--window-shadow) !important;
| |
| border-radius: 0 !important;
| |
| }
| |
| | |
| #mw-navigation h2, #mw-panel h3, .sidebar h3 {
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))) !important;
| |
| color: rgb(var(--white-monochrome)) !important;
| |
| font-family: var(--header-font) !important;
| |
| border-bottom: 1px solid rgb(var(--xp-window-border)) !important;
| |
| padding: 5px 10px !important;
| |
| text-shadow: var(--text-shadow) !important;
| |
| position: relative !important;
| |
| }
| |
| | |
| /* 工具栏 */
| |
| #p-tb, .tools-menu {
| |
| background-color: rgb(var(--xp-window-bg)) !important;
| |
| border: 2px solid rgb(var(--xp-window-border)) !important;
| |
| box-shadow: var(--window-shadow) !important;
| |
| border-radius: 0 !important;
| |
| }
| |
| | |
| /* 内容区域 */
| |
| #content, .mw-body {
| |
| background-color: rgb(var(--xp-window-bg)) !important;
| |
| border: 2px solid rgb(var(--xp-window-border)) !important;
| |
| box-shadow: var(--window-shadow) !important;
| |
| border-radius: 0 !important;
| |
| }
| |
| | |
| /* 页脚 */
| |
| #footer, .footer {
| |
| background-color: rgb(var(--xp-window-bg)) !important;
| |
| border: 2px solid rgb(var(--xp-window-border)) !important;
| |
| border-top: 1px solid rgb(var(--xp-window-border)) !important;
| |
| color: rgb(var(--xp-text)) !important;
| |
| box-shadow: var(--window-shadow) !important;
| |
| border-radius: 0 !important;
| |
| margin: 10px auto !important;
| |
| padding: 10px !important;
| |
| }
| |
| | |
| /* 搜索框 */
| |
| #searchInput, .form-control {
| |
| background-color: white !important;
| |
| border: 1px solid #7f9db9 !important;
| |
| color: rgb(var(--xp-text)) !important;
| |
| font-family: var(--body-font) !important;
| |
| padding: 3px 5px !important;
| |
| }
| |
| | |
| /* 按钮 */
| |
| .btn, .mw-ui-button {
| |
| background: linear-gradient(to bottom, #f6f6f6, #e0e0e0) !important;
| |
| border: 1px solid #ababab !important;
| |
| color: black !important;
| |
| font-family: var(--body-font) !important;
| |
| padding: 3px 8px !important;
| |
| border-radius: 0 !important;
| |
| box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
| |
| }
| |
| | |
| .btn:hover, .mw-ui-button:hover {
| |
| background: linear-gradient(to bottom, #f9f9f9, #e9e9e9) !important;
| |
| box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) !important;
| |
| }
| |
| | |
| /* 表格 */
| |
| .wikitable, table.wikitable {
| |
| background-color: rgb(var(--xp-window-bg)) !important;
| |
| border: 2px solid rgb(var(--xp-window-border)) !important;
| |
| border-collapse: separate !important;
| |
| border-spacing: 0 !important;
| |
| box-shadow: var(--window-shadow) !important;
| |
| }
| |
| | |
| .wikitable th {
| |
| background: linear-gradient(to bottom, #e3e3e3, #d0d0d0) !important;
| |
| border: 1px solid #ababab !important;
| |
| color: black !important;
| |
| padding: 5px !important;
| |
| }
| |
| | |
| .wikitable td {
| |
| border: 1px solid #ababab !important;
| |
| background-color: white !important;
| |
| color: black !important;
| |
| padding: 5px !important;
| |
| }
| |
| | |
| /* 代码块和预格式文本 */
| |
| pre, code, .mw-code {
| |
| background-color: white !important;
| |
| border: 1px solid #ababab !important;
| |
| color: black !important;
| |
| font-family: var(--mono-font) !important;
| |
| padding: 5px !important;
| |
| }
| |
| | |
| /* 链接颜色 */
| |
| a {
| |
| color: rgb(var(--link-color)) !important;
| |
| }
| |
| | |
| a:visited {
| |
| color: rgb(var(--visited-link-color)) !important;
| |
| }
| |
| | |
| a:hover {
| |
| color: rgb(var(--hover-link-color)) !important;
| |
| text-decoration: underline !important;
| |
| }
| |
| | |
| /* 扫描线动画 - 修改为半透明灰色 */
| |
| .scan-animation {
| |
| position: fixed;
| |
| width: 100%;
| |
| height: 100%;
| |
| top: 0;
| |
| left: 0;
| |
| pointer-events: none;
| |
| z-index: 9999;
| |
| }
| |
| | |
| /* 主扫描线 - 较宽较慢 */
| |
| .scan-animation::before {
| |
| content: "";
| |
| position: absolute;
| |
| width: 100%;
| |
| height: 6px;
| |
| top: 0;
| |
| background: linear-gradient(
| |
| to bottom,
| |
| rgba(128, 128, 128, 0) 0%,
| |
| rgba(128, 128, 128, 0.1) 20%,
| |
| rgba(128, 128, 128, 0.2) 50%,
| |
| rgba(128, 128, 128, 0.1) 80%,
| |
| rgba(128, 128, 128, 0) 100%
| |
| );
| |
| box-shadow:
| |
| 0 0 8px rgba(128, 128, 128, 0.15),
| |
| 0 0 15px rgba(128, 128, 128, 0.1);
| |
| animation: scanMain 12s linear infinite;
| |
| opacity: 0.4;
| |
| }
| |
| | |
| /* 副扫描线 - 中等速度 */
| |
| .scan-animation::after {
| |
| content: "";
| |
| position: absolute;
| |
| width: 100%;
| |
| height: 3px;
| |
| top: 0;
| |
| background: linear-gradient(
| |
| to bottom,
| |
| rgba(128, 128, 128, 0) 0%,
| |
| rgba(128, 128, 128, 0.3) 50%,
| |
| rgba(128, 128, 128, 0) 100%
| |
| );
| |
| box-shadow: 0 0 6px rgba(128, 128, 128, 0.2);
| |
| animation: scanSecondary 7s linear infinite;
| |
| animation-delay: -3s;
| |
| opacity: 0.25;
| |
| }
| |
| | |
| /* 快速扫描线 - 细小快速 */
| |
| .scan-animation .fast-scan {
| |
| position: absolute;
| |
| width: 100%;
| |
| height: 1px;
| |
| top: 0;
| |
| background: rgba(128, 128, 128, 0.6);
| |
| box-shadow: 0 0 3px rgba(128, 128, 128, 0.3);
| |
| animation: scanFast 3s linear infinite;
| |
| animation-delay: -1.5s;
| |
| opacity: 0.15;
| |
| }
| |
| | |
| /* 各个扫描线的动画 */
| |
| @keyframes scanMain {
| |
| 0% {
| |
| top: -2rem;
| |
| opacity: 0.6;
| |
| } | | } |
| 50% { | | |
| opacity: 0.3;
| | // 上一张 |
| | function prevSlide() { |
| | const newIndex = (currentIndex - 1 + slideCount) % slideCount; |
| | goToSlide(newIndex); |
| } | | } |
| 100% { | | |
| top: 100vh;
| | // 下一张 |
| opacity: 0.6;
| | function nextSlide() { |
| | const newIndex = (currentIndex + 1) % slideCount; |
| | goToSlide(newIndex); |
| } | | } |
| } | | |
| | // 绑定按钮事件 |
| | $prevBtn.on('click', function(e) { |
| | e.preventDefault(); |
| | e.stopPropagation(); |
| | prevSlide(); |
| | }); |
| | |
| | $nextBtn.on('click', function(e) { |
| | e.preventDefault(); |
| | e.stopPropagation(); |
| | nextSlide(); |
| | }); |
| | |
| | // 自动播放 |
| | let autoplayInterval = setInterval(nextSlide, 5000); |
| | |
| | $carousel.on('mouseenter', function() { |
| | clearInterval(autoplayInterval); |
| | }).on('mouseleave', function() { |
| | autoplayInterval = setInterval(nextSlide, 5000); |
| | }); |
| | |
| | // 触摸滑动支持 |
| | let touchStartX = 0; |
| | let touchEndX = 0; |
| | |
| | $carousel.on('touchstart', function(e) { |
| | touchStartX = e.originalEvent.touches[0].clientX; |
| | }); |
| | |
| | $carousel.on('touchend', function(e) { |
| | touchEndX = e.originalEvent.changedTouches[0].clientX; |
| | |
| | // 判断滑动方向 |
| | if (touchEndX < touchStartX - 50) { |
| | nextSlide(); // 左滑,下一张 |
| | } else if (touchEndX > touchStartX + 50) { |
| | prevSlide(); // 右滑,上一张 |
| | } |
| | }); |
| | }); |
| | }); |
|
| |
|
| @keyframes scanSecondary {
| | // Collapsible blocks functionality |
| 0% {
| | $(document).ready(function() { |
| top: -1rem;
| | // Initialize collapsible blocks |
| opacity: 0.4;
| | $('.collapsible-header').click(function() { |
| } | | $(this).next('.collapsible-content').slideToggle(); |
| 35% {
| | $(this).toggleClass('active'); |
| opacity: 0.2;
| | }); |
| } | | |
| 70% {
| | // Initially hide collapsible content |
| opacity: 0.5;
| | $('.collapsible-content').hide(); |
| }
| | }); |
| 100% {
| |
| top: 100vh;
| |
| opacity: 0.4;
| |
| }
| |
| } | |
|
| |
|
| @keyframes scanFast {
| | /* Common.js - Database New主题JavaScript增强 */ |
| 0% { | | $(function() { |
| top: -0.3rem; | | // 创建CRT效果容器 |
| opacity: 0.3;
| | function createCRTEffects() { |
| }
| | if ($('.crt-effects').length === 0) { |
| 50% {
| | var crtContainer = $('<div>', { |
| opacity: 0.6;
| | 'class': 'crt-effects', |
| }
| | html: [ |
| 100% {
| | $('<div>', {'class': 'scan-line-effect'}), |
| top: 100vh; | | $('<div>', {'class': 'scan-animation'}).append( |
| opacity: 0.3; | | $('<div>', {'class': 'fast-scan'}) |
| | ), |
| | $('<div>', {'class': 'radial-glow'}) |
| | ] |
| | }); |
| | $('body').append(crtContainer); |
| } | | } |
| } | | } |
|
| |
|
| /* 保留原始的淡入效果 */ | | |
| @keyframes fadeIn {
| | // 初始化CRT效果 |
| from { | | createCRTEffects(); |
| opacity: 0; | | |
| transform: translateY(20px); | | // 橙幕切换功能 |
| | if (typeof window.orangemu_toggle_init === 'undefined') { |
| | window.orangemu_toggle_init = true; |
| | |
| | // 为橙幕添加点击切换功能 |
| | $(document).on('click', '.orangemu', function(e) { |
| | e.stopPropagation(); |
| | $(this).toggleClass('orangemu_toggle_on'); |
| | }); |
| } | | } |
| to { | | |
| opacity: 1; | | // 修复动画问题 |
| transform: translateY(0); | | function fixAnimations() { |
| | // 延迟应用动画,防止页面加载时的闪烁 |
| | setTimeout(function() { |
| | $('#mw-content-text > *').each(function(index) { |
| | $(this).css({ |
| | 'animation': 'fadeIn 0.5s ease-out forwards', |
| | 'animation-delay': (index * 0.1) + 's', |
| | 'opacity': '0' |
| | }); |
| | }); |
| | }, 100); |
| } | | } |
| }
| |
|
| |
| /* 应用动画到内容 */
| |
| .mw-parser-output > * {
| |
| animation: fadeIn 0.5s ease-out forwards;
| |
| opacity: 0;
| |
| }
| |
|
| |
| /* 延迟动画 */
| |
| .mw-parser-output > *:nth-child(1) { animation-delay: 0.1s; }
| |
| .mw-parser-output > *:nth-child(2) { animation-delay: 0.2s; }
| |
| .mw-parser-output > *:nth-child(3) { animation-delay: 0.3s; }
| |
| .mw-parser-output > *:nth-child(4) { animation-delay: 0.4s; }
| |
| .mw-parser-output > *:nth-child(5) { animation-delay: 0.5s; }
| |
| .mw-parser-output > *:nth-child(n+6) { animation-delay: 0.6s; }
| |
|
| |
| /* 修复代码区域样式 */
| |
| .mw-highlight pre {
| |
| background-color: white !important;
| |
| border: 1px solid #ababab !important;
| |
| padding: 1em !important;
| |
| overflow: auto !important;
| |
| }
| |
|
| |
| /* 语法高亮颜色 - 保持原有值 */
| |
| .mw-highlight .k { color: #0000AA !important; } /* 关键字 */
| |
| .mw-highlight .s { color: #006600 !important; } /* 字符串 */
| |
| .mw-highlight .c { color: #666666 !important; } /* 注释 */
| |
| .mw-highlight .n { color: #000000 !important; } /* 名称 */
| |
| .mw-highlight .o { color: #000000 !important; } /* 运算符 */
| |
|
| |
| /* 引用样式 - Windows XP风格 */
| |
| .lightstyled-quote, .darkstyled-quote {
| |
| background-color: rgb(var(--xp-window-bg));
| |
| color: rgb(var(--xp-text));
| |
| border: 1px solid #ababab;
| |
| padding: 10px;
| |
| margin: 10px 0;
| |
| box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
| |
| border-left: 4px solid rgb(var(--xp-blue));
| |
| position: relative;
| |
| }
| |
|
| |
| .lightstyled-quote::before, .darkstyled-quote::before {
| |
| content: "Information";
| |
| position: absolute;
| |
| top: -22px;
| |
| left: 0;
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| color: white;
| |
| padding: 2px 10px;
| |
| font-weight: bold;
| |
| font-size: 0.9em;
| |
| text-shadow: var(--text-shadow);
| |
| }
| |
|
| |
| /* 块样式 - Windows XP风格 */
| |
| .lightblock, .darkblock {
| |
| background-color: rgb(var(--xp-window-bg));
| |
| color: rgb(var(--xp-text));
| |
| border: 2px solid rgb(var(--xp-window-border));
| |
| box-shadow: var(--window-shadow);
| |
| padding: 10px;
| |
| margin: 10px 0;
| |
| position: relative;
| |
| border-radius: 0;
| |
| }
| |
|
| |
| .lightblock::before, .darkblock::before {
| |
| content: "Message";
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| color: white;
| |
| padding: 5px 10px;
| |
| font-weight: bold;
| |
| text-align: left;
| |
| text-shadow: var(--text-shadow);
| |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| |
| }
| |
|
| |
| .lightblock::after, .darkblock::after {
| |
| content: "×";
| |
| position: absolute;
| |
| top: 2px;
| |
| right: 5px;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-color: #ff6347;
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| text-align: center;
| |
| line-height: 16px;
| |
| font-size: 12px;
| |
| color: white;
| |
| cursor: pointer;
| |
| z-index: 1;
| |
| }
| |
|
| |
| /* 保留黑幕效果 - 行826-947 */
| |
| .heimu,
| |
| .heimu rt{
| |
| --heimu-color:#252525;
| |
| --heimu-text-color:#fff;
| |
| --heimu-link-color:#add8e6;
| |
| --heimu-visited-link-color:#c5cae9;
| |
| --heimu-new-link-color:#fcc;
| |
| --heimu-new-visited-link-color:#ef9a9a;
| |
| --heimu-extiw-visited-link-color:#d1c4e9;
| |
|
| |
| background-color:var(--heimu-color);
| |
| }
| |
|
| |
| .heimu,
| |
| .heimu a,
| |
| a .heimu,
| |
| a.new .heimu,
| |
| span.heimu a:visited,
| |
| span.heimu a.new,
| |
| span.heimu a.external,
| |
| span.heimu a.external:visited,
| |
| span.heimu a.extiw,
| |
| span.heimu a.extiw:visited,
| |
| span.heimu a.mw-disambig,
| |
| span.heimu a.mw-redirect{
| |
| transition:color 0.13s linear;
| |
| color:var(--heimu-color);
| |
| text-shadow:none;
| |
| }
| |
|
| |
| span.heimu:hover,
| |
| span.heimu:active{
| |
| color:var(--heimu-text-color);
| |
| }
| |
|
| |
| span.heimu:hover a,
| |
| a:hover span.heimu{
| |
| color:var(--heimu-link-color);
| |
| }
| |
|
| |
| span.heimu:hover a:visited,
| |
| a:visited:hover span.heimu{
| |
| color:var(--heimu-visited-link-color);
| |
| }
| |
|
| |
| span.heimu:hover a.new,
| |
| a.new:hover span.heimu{
| |
| color:var(--heimu-new-link-color);
| |
| }
| |
|
| |
| span.heimu a.new:hover:visited,
| |
| a.new:hover:visited span.heimu{
| |
| color:var(--heimu-new-visited-link-color);
| |
| }
| |
|
| |
| span.heimu:hover a.extiw:visited,
| |
| a.extiw:visited:hover span.heimu{
| |
| color:var(--heimu-extiw-visited-link-color);
| |
| }
| |
| [color-mode="dark"] .heimu,
| |
| [color-mode="dark"] .heimu rt{
| |
| --heimu-color:#5e6272;
| |
| }
| |
|
| |
| /* 保留彩幕效果 - 行1778-1838 */
| |
| .colormu-drk {
| |
| color: #FFF;
| |
| }
| |
| .colormu-bri {
| |
| color: #000;
| |
| }
| |
| .colormu-drk:not(.colormu_toggle_on) a {
| |
| color: #add8e6;
| |
| }
| |
| .colormu-drk:not(.colormu_toggle_on) a.new {
| |
| color: #FCC;
| |
| }
| |
| .colormu>span, .colormu a, .colormu a>span {
| |
| transition: color 0.2s;
| |
| }
| |
|
| |
| .colormu:not(:hover):not(:active):not(.colormu_toggle_on)>span,
| |
| .colormu:not(:hover):not(:active):not(.colormu_toggle_on) a {
| |
| color: transparent;
| |
| }
| |
|
| |
| /* for T:Coloredlink in T:彩幕 */
| |
| .colormu:not(:hover):not(:active):not(.colormu_toggle_on) a>span {
| |
| color: transparent !important;
| |
| }
| |
|
| |
| /* for T:彩幕 in link */
| |
| a .colormu-bri {
| |
| color: inherit;
| |
| }
| |
| a:hover .colormu>span, a:active .colormu>span,
| |
| /* and for MediaWiki:Gadget-heimu-toggle.js */
| |
| .colormu-drk.colormu_toggle_on, .colormu_toggle_on>span, .colormu-drk.colormu_toggle_on a>span {
| |
| color: inherit !important;
| |
| }
| |
|
| |
| /* 橙幕效果 - 修改为Windows XP样式 */
| |
| .blackmu,
| |
| .blackmu rt {
| |
| --blackmu-color: var(--xp-blue);
| |
| --blackmu-text-color: 255, 255, 255;
| |
| --blackmu-link-color: 173, 216, 230;
| |
| --blackmu-visited-link-color: 197, 202, 233;
| |
| --blackmu-new-link-color: 255, 204, 204;
| |
| --blackmu-new-visited-link-color: 239, 154, 154;
| |
| --blackmu-extiw-visited-link-color: 209, 196, 233;
| |
| | | |
| background-color: rgb(var(--blackmu-color)); | | // 应用动画修复 |
| }
| | $(document).ready(function() { |
| | | fixAnimations(); |
| .blackmu,
| | }); |
| .blackmu a,
| | |
| a .blackmu,
| | // 监听新内容加载(如AJAX) |
| a.new .blackmu,
| | mw.hook('wikipage.content').add(function($content) { |
| span.blackmu a:visited,
| | if ($content.attr('id') === 'mw-content-text') { |
| span.blackmu a.new,
| | fixAnimations(); |
| span.blackmu a.external,
| | } |
| span.blackmu a.external:visited,
| | }); |
| span.blackmu a.extiw,
| | |
| span.blackmu a.extiw:visited,
| | // 添加复古终端效果的打字动画 |
| span.blackmu a.mw-disambig,
| | function typeWriter(element, text, speed) { |
| span.blackmu a.mw-redirect {
| | var i = 0; |
| transition: color 0.13s linear;
| | element.empty(); |
| color: rgb(var(--blackmu-color));
| | function type() { |
| text-shadow: none;
| | if (i < text.length) { |
| }
| | element.append(text.charAt(i)); |
| | | i++; |
| span.blackmu:hover,
| | setTimeout(type, speed); |
| span.blackmu:active {
| | } |
| color: rgb(var(--blackmu-text-color));
| | } |
| }
| | type(); |
| | |
| span.blackmu:hover a,
| |
| a:hover span.blackmu {
| |
| color: rgb(var(--blackmu-link-color));
| |
| }
| |
| | |
| /* 保留特效库代码 - 行949-1777 */
| |
| /* | |
| 该文档为一个hover特效库,由一些常用的效果以及GitHub上的开源项目“Hover.css”的一些部分构成。
| |
| 请使用hovers在页面中进行载入。
| |
| */
| |
| | |
| /* hover状态切换 */
| |
| .hover-change,
| |
| .hover-remote {
| |
| position: relative;
| |
| display: inline-block;
| |
| transition: opacity 0.5s linear;
| |
| }
| |
| | |
| .hover-change-before,
| |
| .hover-change-after,
| |
| .hover-remote-target {
| |
| transition: inherit;
| |
| }
| |
| | |
| .hover-change-after,
| |
| .hover-remote-target {
| |
| opacity: 0;
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| }
| |
| .hover-remote-target {
| |
| left: 100%;
| |
| }
| |
| | |
| .hover-change-after[style^='right:'],
| |
| .hover-change-after[style*=' right:'],
| |
| .hover-remote-after[style^='right:'],
| |
| .hover-remote-after[style*=' right:'] {
| |
| left: initial;
| |
| }
| |
| | |
| .hover-change-after[style^='bottom:'],
| |
| .hover-change-after[style*=' bottom:'],
| |
| .hover-remote-after[style^='bottom:'],
| |
| .hover-remote-after[style*=' bottom:'] {
| |
| top: initial;
| |
| }
| |
| | |
| .hover-change-after:hover,
| |
| .hover-remote-target {
| |
| opacity: 0;
| |
| margin-left: -9999px;
| |
| }
| |
| | |
| /* 主要用于制作hover形式的标签页(tab)切换 */
| |
| .hover-tab-mode {
| |
| position: relative;
| |
| transition: none;
| |
| }
| |
| .hover-tab-mode .hover-remote {
| |
| transition: inherit;
| |
| position: static;
| |
| }
| |
| | |
| /* 闪烁效果 */
| |
| .hover-change.flash:hover .hover-change-before {
| |
| margin-left: -9999px;
| |
| }
| |
| | |
| .hover-change:hover > .hover-change-before,
| |
| .hover-remote > .hover-remote-target,
| |
| .hover-change:hover > a > .hover-change-before,
| |
| .hover-remote > a > .hover-remote-target {
| |
| opacity: 0;
| |
| }
| |
| | |
| .hover-change:hover > .hover-change-after,
| |
| .hover-remote:hover > .hover-remote-target,
| |
| .hover-change:hover > a > .hover-change-after,
| |
| .hover-remote:hover > a > .hover-remote-target {
| |
| opacity: 1;
| |
| margin-left: initial;
| |
| }
| |
| | |
| /* 基类 */
| |
| [class*='hovers-'] {
| |
| display: inline-block;
| |
| box-shadow: 0 0 1px rgba(0, 0, 0, 0);
| |
| transform: perspective(1px) translateZ(0);
| |
| vertical-align: middle;
| |
| transition-duration: 0.25s;
| |
| transition-property: all;
| |
| }
| |
| | |
| /* 旋转放大 */
| |
| .hovers-rotate-shrink {
| |
| transition-duration: 0.5s;
| |
| transform: rotate(0) scale(0.75);
| |
| }
| |
| .hovers-rotate-shrink:hover {
| |
| transform: rotate(360deg) scale(1);
| |
| }
| |
| | |
| .hovers-rotate-shrink-reverse {
| |
| transition-duration: 0.5s;
| |
| transform: rotate(360deg) scale(0.75);
| |
| }
| |
| | |
| .hovers-rotate-shrink-reverse:hover {
| |
| transform: rotate(0) scale(1);
| |
| }
| |
| | |
| /* 旋转 */
| |
| .hovers-rotate,
| |
| .hovers-rotate-reverse:hover {
| |
| transition-duration: 0.5s;
| |
| transform: rotate(0);
| |
| }
| |
| | |
| .hovers-rotate-reverse,
| |
| .hovers-rotate:hover {
| |
| transition-duration: 0.5s;
| |
| transform: rotate(360deg);
| |
| }
| |
| | |
| /* 正常 => 浅 */
| |
| .hovers-fade-deep,
| |
| .hovers-fade,
| |
| .hovers-fade-shallow {
| |
| opacity: 1;
| |
| }
| |
| .hovers-fade-deep:hover,
| |
| .hovers-fade-deep.active {
| |
| opacity: 0.35;
| |
| }
| |
| .hovers-fade:hover,
| |
| .hovers-fade.active {
| |
| opacity: 0.5;
| |
| }
| |
| .hovers-fade-shallow:hover,
| |
| .hovers-fade-shallow.active {
| |
| opacity: 0.75;
| |
| }
| |
| | |
| /* 浅 => 正常 */
| |
| .hovers-bloom-deep {
| |
| opacity: 0.35;
| |
| }
| |
| .hovers-bloom {
| |
| opacity: 0.5;
| |
| }
| |
| .hovers-bloom-shallow {
| |
| opacity: 0.75;
| |
| }
| |
| | |
| .hovers-bloom-deep:hover,
| |
| .hovers-bloom-deep.active,
| |
| .hovers-bloom:hover,
| |
| .hovers-bloom.active,
| |
| .hovers-bloom-shallow:hover,
| |
| .hovers-bloom-shallow.active {
| |
| opacity: 1;
| |
| }
| |
| | |
| /* 正常 => 大 */
| |
| .hovers-grow-deep,
| |
| .hovers-grow,
| |
| .hovers-grow-shallow {
| |
| transform: scale(1);
| |
| }
| |
| .hovers-grow-deep:hover,
| |
| .hovers-grow-deep.active {
| |
| transform: scale(1.5);
| |
| }
| |
| .hovers-grow:hover,
| |
| .hovers-grow.active {
| |
| transform: scale(1.25);
| |
| }
| |
| .hovers-grow-shallow:hover,
| |
| .hovers-grow-shallow.active {
| |
| transform: scale(1.1);
| |
| }
| |
| | |
| /* 正常 => 小 */
| |
| .hovers-shrink-deep:hover,
| |
| .hovers-shrink-deep.active,
| |
| .hovers-shrink:hover,
| |
| .hovers-shrink.active,
| |
| .hovers-shrink-shallow:hover,
| |
| .hovers-shrink-shallow.active {
| |
| transform: scale(1);
| |
| }
| |
| .hovers-shrink-deep {
| |
| transform: scale(0.5);
| |
| }
| |
| .hovers-shrink {
| |
| transform: scale(0.75);
| |
| }
| |
| .hovers-shrink-shallow {
| |
| transform: scale(0.9);
| |
| }
| |
| | |
| /* 左右抖动 */
| |
| @keyframes shake-flexible {
| |
| 25% {
| |
| transform: translateX(-0.0625em); | |
| }
| |
| | |
| 50% {
| |
| transform: translateX(0.0625em);
| |
| }
| |
| | |
| 75% {
| |
| transform: translateX(-0.0625em);
| |
| }
| |
| }
| |
| | |
| .hovers-shake-flexible:hover,
| |
| .hovers-shake-flexible.active {
| |
| animation: shake-flexible 0.5s ease-out;
| |
| }
| |
| | |
| @keyframes shake {
| |
| 25% {
| |
| transform: translateX(-8px);
| |
| }
| |
| | |
| 50% {
| |
| transform: translateX(8px);
| |
| }
| |
| | |
| 75% {
| |
| transform: translateX(-8px);
| |
| }
| |
| }
| |
| | |
| .hovers-shake:hover,
| |
| .hovers-shake.active {
| |
| animation: shake 0.5s ease-out;
| |
| }
| |
| | |
| /* 上下抖动 */
| |
| @keyframes bounce-flexible {
| |
| 25% {
| |
| transform: translateY(-0.0625em);
| |
| }
| |
| | |
| 50% {
| |
| transform: translateY(0.0625em); | |
| }
| |
| | |
| 75% {
| |
| transform: translateY(-0.0625em);
| |
| }
| |
| }
| |
| | |
| .hovers-bounce-flexible:hover,
| |
| .hovers-bounce-flexible.active {
| |
| animation: bounce-flexible 0.5s ease-out;
| |
| } | |
| | |
| @keyframes bounce {
| |
| 25% {
| |
| transform: translateY(-8px);
| |
| }
| |
| | |
| 50% {
| |
| transform: translateY(8px); | |
| }
| |
| | |
| 75% {
| |
| transform: translateY(-8px); | |
| }
| |
| }
| |
| | |
| .hovers-bounce:hover,
| |
| .hovers-bounce.active {
| |
| position: relative;
| |
| left: 0;
| |
| animation: bounce 0.5s ease-out;
| |
| }
| |
| | |
| /* 绕顶端中点抖动 */ | |
| @keyframes swing {
| |
| 20% {
| |
| transform: rotate3d(0, 0, 1, 10deg); | |
| }
| |
| | |
| 40% {
| |
| transform: rotate3d(0, 0, 1, -10deg);
| |
| }
| |
| | |
| 60% {
| |
| transform: rotate3d(0, 0, 1, 5deg);
| |
| }
| |
| | |
| 80% {
| |
| transform: rotate3d(0, 0, 1, -5deg);
| |
| }
| |
| | |
| to {
| |
| transform: rotate3d(0, 0, 1, 0deg);
| |
| }
| |
| }
| |
| | |
| .hovers-swing { | |
| transform-origin: top center;
| |
| }
| |
| .hovers-swing:hover,
| |
| .hovers-swing.active {
| |
| animation: swing 0.75s ease-out;
| |
| }
| |
| | |
| /* 正常 => 大 */
| |
| @keyframes pulse-grow {
| |
| to {
| |
| transform: scale(1.1);
| |
| }
| |
| }
| |
| | |
| .hovers-pulse-grow:hover,
| |
| .hovers-pulse-grow.active {
| |
| animation: pulse-grow 0.5s linear infinite alternate;
| |
| }
| |
| | |
| /* 正常 => 小 */
| |
| @keyframes pulse-shrink {
| |
| to {
| |
| transform: scale(0.9);
| |
| }
| |
| }
| |
| | |
| .hovers-pulse-shrink:hover,
| |
| .hovers-pulse-shrink.active {
| |
| animation: pulse-shrink 0.5s linear infinite alternate;
| |
| }
| |
| | |
| /* 正常 => 小 */
| |
| @keyframes push {
| |
| 50% {
| |
| transform: scale(0.8);
| |
| }
| |
| }
| |
| | |
| .hovers-push:hover,
| |
| .hovers-push.active {
| |
| animation: push 0.3s linear;
| |
| }
| |
| | |
| /* 正常 => 大 */
| |
| @keyframes pop {
| |
| 50% {
| |
| transform: scale(1.2);
| |
| }
| |
| }
| |
| | |
| .hovers-pop:hover,
| |
| .hovers-pop.active {
| |
| animation: pop 0.3s linear;
| |
| }
| |
| | |
| /* 正常 => 大 => 正常 => 大 */
| |
| .hovers-bounce-in:hover, | |
| .hovers-bounce-in.active {
| |
| transform: scale(1.2);
| |
| transition-duration: 0.5s;
| |
| transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
| |
| }
| |
| | |
| /* 正常 => 小 => 正常 => 小 */
| |
| .hovers-bounce-out:hover,
| |
| .hovers-bounce-out.active {
| |
| transform: scale(0.8);
| |
| transition-duration: 0.5s;
| |
| transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
| |
| }
| |
| | |
| /* 倾斜 */
| |
| .hovers-tilt:hover,
| |
| .hovers-tilt.active {
| |
| transition-duration: 0.3s;
| |
| transform: rotate(4deg);
| |
| }
| |
| | |
| /* 倾斜 + 放大 */
| |
| .hovers-grow-rotate:hover,
| |
| .hovers-grow-rotate.active {
| |
| transition-duration: 0.3s;
| |
| transform: scale(1.1) rotate(4deg);
| |
| }
| |
| | |
| /* 升起 */
| |
| .hovers-float:hover,
| |
| .hovers-float.active {
| |
| transition-duration: 0.3s;
| |
| transition-timing-function: ease-out;
| |
| transform: translateY(-8px);
| |
| }
| |
| | |
| /* 下沉 */
| |
| .hovers-sink:hover,
| |
| .hovers-sink.active {
| |
| transition-duration: 0.3s;
| |
| transition-timing-function: ease-out;
| |
| transform: translateY(8px);
| |
| } | |
| | |
| /* 飘浮 */
| |
| @keyframes bob {
| |
| 0% {
| |
| transform: translateY(-10px); | |
| }
| |
| 50% {
| |
| transform: translateY(-5px);
| |
| }
| |
| 100% {
| |
| transform: translateY(-10px); | |
| }
| |
| }
| |
| @keyframes bob-float {
| |
| 100% {
| |
| transform: translateY(-10px); | |
| }
| |
| }
| |
| | |
| .hovers-bob:hover,
| |
| .hovers-bob.active {
| |
| animation-name: bob-float, bob;
| |
| animation-duration: 0.3s, 1.5s;
| |
| animation-delay: 0s, 0.3s;
| |
| animation-timing-function: ease-out, ease-in-out;
| |
| animation-iteration-count: 1, infinite;
| |
| animation-fill-mode: forwards;
| |
| animation-direction: normal, alternate;
| |
| }
| |
| | |
| /* 悬挂 */ | |
| @keyframes hang {
| |
| 0% {
| |
| transform: translateY(10px);
| |
| }
| |
| 50% {
| |
| transform: translateY(5px); | |
| }
| |
| 100% {
| |
| transform: translateY(10px);
| |
| }
| |
| }
| |
| @keyframes hang-sink {
| |
| 100% {
| |
| transform: translateY(10px);
| |
| }
| |
| }
| |
| | |
| .hovers-hang:hover,
| |
| .hovers-hang.active {
| |
| animation-name: hang-sink, hang;
| |
| animation-duration: 0.3s, 1.5s;
| |
| animation-delay: 0s, 0.3s;
| |
| animation-timing-function: ease-out, ease-in-out;
| |
| animation-iteration-count: 1, infinite;
| |
| animation-fill-mode: forwards;
| |
| animation-direction: normal, alternate;
| |
| }
| |
| | |
| /* 非对称 */
| |
| .hovers-skew:hover,
| |
| .hovers-skew.active {
| |
| transform: skew(-10deg);
| |
| }
| |
| | |
| /* 非对称-左 */
| |
| .hovers-skew-forward {
| |
| transform-origin: 0 100%;
| |
| }
| |
| .hovers-skew-forward:hover,
| |
| .hovers-skew-forward.active {
| |
| transform: skew(-10deg);
| |
| }
| |
| | |
| /* 非对称-右 */
| |
| .hovers-skew-backward {
| |
| transform-origin: 0 100%;
| |
| }
| |
| .hovers-skew-backward:hover,
| |
| .hovers-skew-backward.active {
| |
| transform: skew(10deg);
| |
| }
| |
| | |
| /* 垂直抖动 */
| |
| @keyframes wobble-vertical {
| |
| 16.65% {
| |
| transform: translateY(8px);
| |
| }
| |
| 33.3% {
| |
| transform: translateY(-6px);
| |
| }
| |
| 49.95% {
| |
| transform: translateY(4px);
| |
| }
| |
| 66.6% {
| |
| transform: translateY(-2px);
| |
| }
| |
| 83.25% {
| |
| transform: translateY(1px);
| |
| }
| |
| 100% {
| |
| transform: translateY(0);
| |
| }
| |
| }
| |
| | |
| .hovers-wobble-vertical:hover,
| |
| .hovers-wobble-vertical.active {
| |
| animation-name: wobble-vertical;
| |
| animation-duration: 1s;
| |
| animation-timing-function: ease-in-out;
| |
| animation-iteration-count: 1;
| |
| }
| |
| | |
| /* 水平抖动 */
| |
| @keyframes wobble-horizontal {
| |
| 16.65% {
| |
| transform: translateX(8px);
| |
| }
| |
| 33.3% {
| |
| transform: translateX(-6px);
| |
| }
| |
| 49.95% {
| |
| transform: translateX(4px);
| |
| }
| |
| 66.6% {
| |
| transform: translateX(-2px);
| |
| }
| |
| 83.25% {
| |
| transform: translateX(1px);
| |
| }
| |
| 100% {
| |
| transform: translateX(0);
| |
| }
| |
| }
| |
| .hovers-wobble-horizontal:hover,
| |
| .hovers-wobble-horizontal.active {
| |
| animation-name: wobble-horizontal;
| |
| animation-duration: 1s;
| |
| animation-timing-function: ease-in-out;
| |
| animation-iteration-count: 1;
| |
| }
| |
| | |
| /* 右下弹回 */
| |
| @keyframes wobble-to-bottom-right {
| |
| 16.65% {
| |
| transform: translate(8px, 8px);
| |
| }
| |
| 33.3% {
| |
| transform: translate(-6px, -6px);
| |
| }
| |
| 49.95% {
| |
| transform: translate(4px, 4px);
| |
| }
| |
| 66.6% {
| |
| transform: translate(-2px, -2px);
| |
| }
| |
| 83.25% {
| |
| transform: translate(1px, 1px);
| |
| }
| |
| 100% {
| |
| transform: translate(0, 0);
| |
| }
| |
| }
| |
| | |
| .hovers-wobble-to-bottom-right:hover,
| |
| .hovers-wobble-to-bottom-right.active {
| |
| animation-name: wobble-to-bottom-right;
| |
| animation-duration: 1s;
| |
| animation-timing-function: ease-in-out;
| |
| animation-iteration-count: 1;
| |
| }
| |
| | |
| /* 右上弹回 */
| |
| @keyframes wobble-to-top-right {
| |
| 16.65% {
| |
| transform: translate(8px, -8px)
| |
| }
| |
| 33.3% {
| |
| transform: translate(-6px, 6px);
| |
| }
| |
| 49.95% {
| |
| transform: translate(4px, -4px);
| |
| }
| |
| 66.6% {
| |
| transform: translate(-2px, 2px);
| |
| }
| |
| 83.25% {
| |
| transform: translate(1px, -1px);
| |
| }
| |
| 100% {
| |
| transform: translate(0);
| |
| }
| |
| }
| |
| | |
| .hovers-wobble-to-top-right:hover,
| |
| .hovers-wobble-to-top-right.active {
| |
| animation-name: wobble-to-top-right;
| |
| animation-duration: 1s;
| |
| animation-timing-function: ease-in-out;
| |
| animation-iteration-count: 1;
| |
| }
| |
| | |
| /* 果冻 */
| |
| @keyframes wobble-top {
| |
| 16.65% {
| |
| transform: skew(-12deg);
| |
| }
| |
| 33.3% {
| |
| transform: skew(10deg);
| |
| }
| |
| 49.95% {
| |
| transform: skew(-6deg);
| |
| }
| |
| 66.6% {
| |
| transform: skew(4deg);
| |
| }
| |
| 83.25% {
| |
| transform: skew(-2deg);
| |
| }
| |
| 100% {
| |
| transform: skew(0);
| |
| }
| |
| }
| |
| | |
| /* 赘肉 */
| |
| .hovers-wobble-top {
| |
| transform-origin: 0 100%;
| |
| }
| |
| .hovers-wobble-top:hover,
| |
| .hovers-wobble-top.active {
| |
| animation-name: wobble-top;
| |
| animation-duration: 1s;
| |
| animation-timing-function: ease-in-out;
| |
| animation-iteration-count: 1;
| |
| }
| |
| | |
| @keyframes wobble-bottom {
| |
| 16.65% {
| |
| transform: skew(-12deg);
| |
| }
| |
| 33.3% {
| |
| transform: skew(10deg);
| |
| }
| |
| 49.95% {
| |
| transform: skew(-6deg);
| |
| }
| |
| 66.6% {
| |
| transform: skew(4deg);
| |
| }
| |
| 83.25% {
| |
| transform: skew(-2deg);
| |
| }
| |
| 100% {
| |
| transform: skew(0);
| |
| }
| |
| }
| |
| | |
| .hovers-wobble-bottom {
| |
| transform-origin: 100% 0;
| |
| }
| |
| .hovers-wobble-bottom:hover,
| |
| .hovers-wobble-bottom.active {
| |
| animation-name: wobble-bottom;
| |
| animation-duration: 1s;
| |
| animation-timing-function: ease-in-out;
| |
| animation-iteration-count: 1;
| |
| }
| |
| | |
| /* 颤动 */
| |
| @keyframes wobble-skew {
| |
| 16.65% {
| |
| transform: skew(-12deg);
| |
| }
| |
| 33.3% {
| |
| transform: skew(10deg);
| |
| }
| |
| 49.95% {
| |
| transform: skew(-6deg);
| |
| }
| |
| 66.6% {
| |
| transform: skew(4deg);
| |
| }
| |
| 83.25% {
| |
| transform: skew(-2deg);
| |
| }
| |
| 100% {
| |
| transform: skew(0);
| |
| }
| |
| }
| |
| .hovers-wobble-skew:hover,
| |
| .hovers-wobble-skew.active {
| |
| animation-name: wobble-skew;
| |
| animation-duration: 1s;
| |
| animation-timing-function: ease-in-out;
| |
| animation-iteration-count: 1;
| |
| }
| |
| | |
| /* 振动 */
| |
| @keyframes buzz {
| |
| 50% {
| |
| transform: translateX(3px) rotate(2deg);
| |
| }
| |
| 100% {
| |
| transform: translateX(-3px) rotate(-2deg);
| |
| }
| |
| }
| |
| | |
| .hovers-buzz:hover,
| |
| .hovers-buzz.active {
| |
| animation-name: buzz;
| |
| animation-duration: 0.15s;
| |
| animation-timing-function: linear;
| |
| animation-iteration-count: infinite;
| |
| }
| |
| | |
| /* 振出 */
| |
| @keyframes buzz-out {
| |
| 10% {
| |
| transform: translateX(3px) rotate(2deg);
| |
| }
| |
| 20% {
| |
| transform: translateX(-3px) rotate(-2deg);
| |
| }
| |
| 30% {
| |
| transform: translateX(3px) rotate(2deg);
| |
| }
| |
| 40% {
| |
| transform: translateX(-3px) rotate(-2deg);
| |
| }
| |
| 50% {
| |
| transform: translateX(2px) rotate(1deg);
| |
| }
| |
| 60% {
| |
| transform: translateX(-2px) rotate(-1deg);
| |
| }
| |
| 70% {
| |
| transform: translateX(2px) rotate(1deg);
| |
| }
| |
| 80% {
| |
| transform: translateX(-2px) rotate(-1deg);
| |
| }
| |
| 90% {
| |
| transform: translateX(1px) rotate(0);
| |
| }
| |
| 100% {
| |
| transform: translateX(-1px) rotate(0);
| |
| }
| |
| }
| |
| | |
| .hovers-buzz-out:hover,
| |
| .hovers-buzz-out.active {
| |
| animation-name: buzz-out;
| |
| animation-duration: 0.75s;
| |
| animation-timing-function: linear;
| |
| animation-iteration-count: 1;
| |
| }
| |
| | |
| /* 右移 */
| |
| .hovers-forward:hover,
| |
| .hovers-forward.active {
| |
| transform: translateX(8px);
| |
| }
| |
| | |
| /* 左移 */
| |
| .hovers-backward:hover,
| |
| .hovers-backward.active {
| |
| transform: translateX(-8px);
| |
| }
| |
| | |
| /* 自由移动 */
| |
| .hovers-top,
| |
| .hovers-left,
| |
| .hovers-bottom,
| |
| .hovers-right {
| |
| transition: all 0.5s;
| |
| }
| |
| | |
| .hovers-top:hover,
| |
| .hovers-top.active {
| |
| transform: translateY(-0.0625em);
| |
| }
| |
| | |
| .hovers-left:hover,
| |
| .hovers-left.active {
| |
| transform: translateX(-0.0625em);
| |
| }
| |
| | |
| .hovers-bottom:hover,
| |
| .hovers-bottom.active {
| |
| transform: translateY(0.0625em);
| |
| }
| |
| | |
| .hovers-right:hover,
| |
| .hovers-right.active {
| |
| transform: translateX(0.0625em);
| |
| }
| |
| | |
| /* 滤镜 */
| |
| .hovers-blur,
| |
| .hovers-blur-reverse,
| |
| .hovers-brightness,
| |
| .hovers-brightness-reverse,
| |
| .hovers-contrast,
| |
| .hovers-contrast-reverse,
| |
| .hovers-grayscale,
| |
| .hovers-grayscale-reverse,
| |
| .hovers-invert,
| |
| .hovers-invert-reverse,
| |
| .hovers-saturate,
| |
| .hovers-saturate-reverse,
| |
| .hovers-sepia,
| |
| .hovers-sepia-reverse,
| |
| .hovers-hue-rotate,
| |
| .hovers-hue-rotate-reverse {
| |
| transition-duration: 0.75s;
| |
| }
| |
| | |
| .hovers-blur:hover,
| |
| .hovers-blur.active,
| |
| .hovers-brightness:hover,
| |
| .hovers-brightness.active,
| |
| .hovers-contrast:hover,
| |
| .hovers-contrast.active,
| |
| .hovers-grayscale:hover,
| |
| .hovers-grayscale.active,
| |
| .hovers-invert:hover,
| |
| .hovers-invert.active,
| |
| .hovers-saturate:hover,
| |
| .hovers-saturate.active,
| |
| .hovers-sepia:hover,
| |
| .hovers-sepia.active,
| |
| .hovers-hue-rotate:hover,
| |
| .hovers-hue-rotate.active {
| |
| filter: initial;
| |
| }
| |
| | |
| .hovers-blur {
| |
| filter: blur(5px);
| |
| }
| |
| | |
| .hovers-blur-reverse:hover,
| |
| .hovers-blur-reverse.active {
| |
| filter: blur(5px);
| |
| }
| |
| | |
| .hovers-brightness {
| |
| filter: brightness(50%);
| |
| }
| |
| | |
| .hovers-brightness-reverse:hover,
| |
| .hovers-brightness-reverse.active {
| |
| filter: brightness(50%);
| |
| }
| |
| | |
| .hovers-contrast {
| |
| filter: contrast(50%);
| |
| }
| |
| | |
| .hovers-contrast-reverse:hover,
| |
| .hovers-contrast-reverse.active {
| |
| filter: contrast(50%);
| |
| }
| |
| | |
| .hovers-grayscale {
| |
| filter: grayscale(100%);
| |
| }
| |
| | |
| .hovers-grayscale-reverse:hover,
| |
| .hovers-grayscale-reverse.active {
| |
| filter: grayscale(100%);
| |
| }
| |
| | |
| .hovers-invert {
| |
| filter: invert(100%);
| |
| }
| |
| | |
| .hovers-invert-reverse:hover,
| |
| .hovers-invert-reverse.active {
| |
| filter: invert(100%);
| |
| }
| |
| | |
| .hovers-saturate {
| |
| filter: saturate(200%);
| |
| }
| |
| | |
| .hovers-saturate-reverse:hover,
| |
| .hovers-saturate-reverse.active {
| |
| filter: saturate(200%);
| |
| }
| |
| | |
| .hovers-sepia {
| |
| filter: sepia(100%);
| |
| }
| |
| | |
| .hovers-sepia-reverse:hover,
| |
| .hovers-sepia-reverse.acitve {
| |
| filter: sepia(100%);
| |
| }
| |
| | |
| .hovers-hue-rotate {
| |
| filter: hue-rotate(180deg);
| |
| }
| |
| | |
| .hovers-hue-rotate-reverse:hover,
| |
| .hovers-hue-rotate-reverse.active {
| |
| filter: hue-rotate(180deg);
| |
| }
| |
| | |
| /* 背景滑动 */
| |
| .hovers-sweep-to-right,
| |
| .hovers-sweep-to-left,
| |
| .hovers-sweep-to-bottom,
| |
| .hovers-sweep-to-top,
| |
| .hovers-radial-out,
| |
| .hovers-radial-in {
| |
| position: relative;
| |
| transition-duration: 0.3s;
| |
| transition-timing-function: ease-out;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .hovers-sweep-to-right:before,
| |
| .hovers-sweep-to-left:before,
| |
| .hovers-sweep-to-bottom:before,
| |
| .hovers-sweep-to-top:before,
| |
| .hovers-radial-out:before,
| |
| .hovers-radial-in:before {
| |
| content: '';
| |
| position: absolute;
| |
| z-index: 10;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| background: inherit;
| |
| transform: scaleX(0);
| |
| transition: inherit;
| |
| }
| |
| .hovers-sweep-to-bottom:before,
| |
| .hovers-sweep-to-top:before {
| |
| transform: scaleY(0);
| |
| }
| |
| .hovers-radial-out:before,
| |
| .hovers-radial-in:before {
| |
| border-radius: 50%;
| |
| transform: scale(0);
| |
| }
| |
| .hovers-radial-in:before {
| |
| transform: scale(2);
| |
| }
| |
| | |
| .hovers-sweep-to-right:before {
| |
| transform-origin: 0 50%;
| |
| }
| |
| .hovers-sweep-to-left:before {
| |
| transform-origin: 100% 50%;
| |
| }
| |
| .hovers-sweep-to-bottom:before {
| |
| transform-origin: 50% 0;
| |
| }
| |
| .hovers-sweep-to-top:before {
| |
| transform-origin: 50% 100%;
| |
| }
| |
| .hovers-radial-out:hover:before,
| |
| .hovers-radial-out.active:before {
| |
| transform: scale(2);
| |
| }
| |
| .hovers-radial-in:hover:before,
| |
| .hovers-radial-in.active:before {
| |
| transform: scale(0);
| |
| }
| |
| | |
| .hovers-sweep-to-right .hovers-content.center,
| |
| .hovers-sweep-to-left .hovers-content.center,
| |
| .hovers-sweep-to-bottom .hovers-content.center,
| |
| .hovers-sweep-to-top .hovers-content.center,
| |
| .hovers-radial-out .hovers-content.center,
| |
| .hovers-radial-in .hovers-content.center {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| word-break: break-all;
| |
| }
| |
| | |
| .hovers-sweep-to-right:hover:before,
| |
| .hovers-sweep-to-left:hover:before,
| |
| .hovers-sweep-to-bottom:hover:before,
| |
| .hovers-sweep-to-top:hover:before,
| |
| .hovers-sweep-to-right.active:before,
| |
| .hovers-sweep-to-left:hover:before,
| |
| .hovers-sweep-to-bottom:hover:before,
| |
| .hovers-sweep-to-top:hover:before {
| |
| transform: scaleX(1);
| |
| }
| |
| | |
| .hovers-sweep-to-right .hovers-content,
| |
| .hovers-sweep-to-left .hovers-content,
| |
| .hovers-sweep-to-bottom .hovers-content,
| |
| .hovers-sweep-to-top .hovers-content,
| |
| .hovers-radial-out .hovers-content,
| |
| .hovers-radial-in .hovers-content {
| |
| width: 100%;
| |
| height: 100%;
| |
| position: absolute;
| |
| transition-property: all;
| |
| transition-duration: inherit;
| |
| top: 0;
| |
| left: 0;
| |
| z-index: 11;
| |
| }
| |
| | |
| .hovers-sweep-to-right .hovers-content {
| |
| left: initial;
| |
| right: 100%;
| |
| }
| |
| .hovers-sweep-to-right:hover .hovers-content,
| |
| .hovers-sweep-to-right.active .hovers-content {
| |
| right: 0;
| |
| }
| |
| | |
| .hovers-sweep-to-left .hovers-content {
| |
| left: 100%;
| |
| }
| |
| .hovers-sweep-to-left:hover .hovers-content,
| |
| .hovers-sweep-to-left.active .hovers-content {
| |
| left: 0;
| |
| }
| |
| | |
| .hovers-sweep-to-bottom .hovers-content {
| |
| top: initial;
| |
| bottom: 100%;
| |
| }
| |
| .hovers-sweep-to-bottom:hover .hovers-content,
| |
| .hovers-sweep-to-bottom.active .hovers-content {
| |
| bottom: 0;
| |
| }
| |
| | |
| .hovers-sweep-to-top .hovers-content {
| |
| top: 100%;
| |
| }
| |
| .hovers-sweep-to-top:hover .hovers-content,
| |
| .hovers-sweep-to-top.active .hovers-content {
| |
| top: 0;
| |
| }
| |
| | |
| .hovers-radial-out .hovers-content,
| |
| .hovers-radial-in:hover .hovers-content,
| |
| .hovers-radial-in.active .hovers-content {
| |
| opacity: 0;
| |
| }
| |
| | |
| .hovers-radial-in .hovers-content,
| |
| .hovers-radial-out:hover .hovers-content,
| |
| .hovers-radial-out.active .hovers-content {
| |
| opacity: 1;
| |
| }
| |
| | |
| /* 默认em */
| |
| .hovers-border,
| |
| .hovers-trim,
| |
| .hovers-ripple-out,
| |
| .hovers-ripple-in,
| |
| .hovers-outline-out,
| |
| .hovers-outline-in,
| |
| .hovers-reveal {
| |
| font-size: 160px;
| |
| line-height: 16px;
| |
| }
| |
| | |
| /* 内边框滑出 */
| |
| .hovers-border,
| |
| .hovers-trim {
| |
| position: relative;
| |
| top: 0;
| |
| left: 0;
| |
| transition: all 0.3s;
| |
| }
| |
| | |
| .hovers-border:before {
| |
| content: '';
| |
| width: 100%;
| |
| height: 100%;
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| box-sizing: border-box;
| |
| transition: inherit;
| |
| border-width: calc(0.0625em * 0.6);
| |
| border-color: inherit;
| |
| border-style: solid;
| |
| border-radius: inherit;
| |
| opacity: 0;
| |
| }
| |
| | |
| .hovers-border:hover:before,
| |
| .hovers-border.active:before {
| |
| opacity: 1;
| |
| }
| |
| | |
| /* 带边距内边框 */
| |
| .hovers-trim:before {
| |
| content: '';
| |
| position: absolute;
| |
| top: calc(0.0625em * 0.4);
| |
| left: calc(0.0625em * 0.4);
| |
| bottom: calc(0.0625em * 0.4);
| |
| right: calc(0.0625em * 0.4);
| |
| transition: inherit;
| |
| border-width: calc(0.0625em * 0.6);
| |
| border-color: inherit;
| |
| border-style: solid;
| |
| opacity: 0;
| |
| border-radius: inherit;
| |
| }
| |
| | |
| .hovers-trim:hover:before,
| |
| .hovers-trim.active:before {
| |
| opacity: 1;
| |
| }
| |
| | |
| /* 边框飞出与飞入 */
| |
| .hovers-ripple-out,
| |
| .hovers-ripple-in,
| |
| .hovers-outline-out,
| |
| .hovers-outline-in,
| |
| .hovers-reveal {
| |
| animation-duration: 0.7s;
| |
| animation-timing-function: ease-out;
| |
| transition: all 0.3s;
| |
| }
| |
| | |
| .hovers-ripple-out:before,
| |
| .hovers-ripple-in:before,
| |
| .hovers-outline-out:before,
| |
| .hovers-outline-in:before,
| |
| .hovers-reveal:before {
| |
| content: '';
| |
| position: absolute;
| |
| top: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| left: 0;
| |
| animation: inherit;
| |
| transition: inherit;
| |
| border-width: calc(0.0625em * 0.6);
| |
| border-color: inherit;
| |
| border-style: solid;
| |
| border-radius: inherit;
| |
| }
| |
| .hovers-ripple-out:before {
| |
| opacity: 0;
| |
| }
| |
| .hovers-ripple-in:before {
| |
| top: calc(-0.0625em * 1.2);
| |
| right: calc(-0.0625em * 1.2);
| |
| bottom: calc(-0.0625em * 1.2);
| |
| left: calc(-0.0625em * 1.2);
| |
| opacity: 0;
| |
| }
| |
| .hovers-outline-out:before {
| |
| opacity: 0;
| |
| }
| |
| .hovers-outline-out:before {
| |
| top: calc(-0.0625em * 1.6);
| |
| right: calc(-0.0625em * 1.6);
| |
| bottom: calc(-0.0625em * 1.6);
| |
| left: calc(-0.0625em * 1.6);
| |
| opacity: 0;
| |
| }
| |
| .hovers-reveal:before {
| |
| border-width: 0;
| |
| opacity: 0;
| |
| }
| |
| | |
| @keyframes ripple-out {
| |
| 50% {
| |
| opacity: 1;
| |
| }
| |
| | |
| 100% {
| |
| top: calc(-0.0625em * 1.2);
| |
| right: calc(-0.0625em * 1.2);
| |
| bottom: calc(-0.0625em * 1.2);
| |
| left: calc(-0.0625em * 1.2);
| |
| opacity: 0;
| |
| }
| |
| }
| |
| .hovers-ripple-out:hover:before,
| |
| .hovers-ripple-out.active:before {
| |
| animation-name: ripple-out;
| |
| }
| |
| | |
| @keyframes ripple-in {
| |
| 50% {
| |
| opacity: 1;
| |
| }
| |
| | |
| 100% {
| |
| top: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| left: 0;
| |
| opacity: 0;
| |
| }
| |
| }
| |
| .hovers-ripple-in:hover:before,
| |
| .hovers-ripple-in.active:before {
| |
| animation-name: ripple-in;
| |
| }
| |
| | |
| .hovers-outline-out:hover:before,
| |
| .hovers-outline-in:hover:before,
| |
| .hovers-outline-out.active:before,
| |
| .hovers-outline-in:hover:before {
| |
| top: calc(-0.0625em * 0.8);
| |
| right: calc(-0.0625em * 0.8);
| |
| bottom: calc(-0.0625em * 0.8);
| |
| left: calc(-0.0625em * 0.8);
| |
| opacity: 1;
| |
| }
| |
| | |
| .hovers-reveal:hover:before,
| |
| .hovers-reveal.active:before {
| |
| transform: translateY(0);
| |
| border-width: calc(0.0625em * 0.4);
| |
| opacity: 1;
| |
| }
| |
| | |
| /* 圆角化 */
| |
| .hovers-round-corners {
| |
| overflow: hidden;
| |
| }
| |
| .hovers-round-corners:hover,
| |
| .hovers-round-corners.active {
| |
| border-radius: 0.0625em;
| |
| }
| |
| | |
| /* 重叠:翻转切换 */
| |
| | |
| .hover-turn {
| |
| position: relative;
| |
| transform: translateZ(1px);
| |
| }
| |
| | |
| .hover-turn-before,
| |
| .hover-turn-after {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| }
| |
| | |
| @keyframes hover-turn {
| |
| from {
| |
| transform: rotateY(-90deg);
| |
| }
| |
| | |
| 50% {
| |
| transform: scale(1.2);
| |
| }
| |
| | |
| to {
| |
| transform: rotateY(0);
| |
| }
| |
| }
| |
| | |
| .hover-turn:not(:hover) .hover-turn-before,
| |
| .hover-turn:hover .hover-turn-after {
| |
| animation: hover-turn 0.5s;
| |
| }
| |
| | |
| .hover-turn:hover .hover-turn-before,
| |
| .hover-turn:not(:hover) .hover-turn-after {
| |
| opacity: 0;
| |
| }
| |
| /* [[Category:在模板名字空间下的CSS页面]] */
| |
| | |
| | |
| /* 信息框样式 - Windows XP风格 */
| |
| .infobox,
| |
| .notaninfobox {
| |
| position: relative;
| |
| clear: right;
| |
| float: right;
| |
| margin: 0 0 1em 1em;
| |
| width: 350px;
| |
| font-size: 90%;
| |
| background-color: rgb(var(--xp-window-bg));
| |
| border: 2px solid rgb(var(--xp-window-border));
| |
| padding: 0;
| |
| overflow: auto;
| |
| z-index: 1;
| |
| box-shadow: var(--window-shadow);
| |
| border-radius: 0;
| |
| }
| |
| | |
| @media all and (max-width: 511px) {
| |
| .notaninfobox {
| |
| float: none;
| |
| margin-left: 0;
| |
| width: auto;
| |
| } | | } |
| }
| | |
| | | // 为特定元素应用打字效果 |
| .infobox tr:not(:first-child) td { | | $('.terminal-text').each(function() { |
| border-bottom: 1px solid #ababab; | | var text = $(this).text(); |
| }
| | typeWriter($(this), text, 50); |
| | | }); |
| @media all and (max-width: 337px) {
| | |
| .notaninfobox {
| | // 添加闪烁光标效果 |
| margin-left: -16px;
| | function createBlinkingCursor() { |
| margin-right: -16px; | | var cursor = $('<span>', { |
| border-left: none; | | 'class': 'terminal-cursor', |
| border-right: none; | | text: '▋' |
| | }); |
| | |
| | setInterval(function() { |
| | cursor.toggle(); |
| | }, 500); |
| | |
| | return cursor; |
| } | | } |
| }
| | |
| | | // 为终端元素添加光标 |
| .notaninfobox > .infobox-title,
| | $('.terminal').each(function() { |
| .infobox th {
| | $(this).append(createBlinkingCursor()); |
| position: relative; | | }); |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))); | | |
| color: white;
| | // 模拟CRT屏幕抖动效果 |
| font-weight: bold;
| | function screenGlitch() { |
| text-align: center;
| | var container = $('#content'); |
| font-size: 120%;
| | container.css('transform', 'translate(' + (Math.random() * 2 - 1) + 'px, ' + (Math.random() * 2 - 1) + 'px)'); |
| padding: 5px;
| | setTimeout(function() { |
| text-shadow: var(--text-shadow); | | container.css('transform', 'translate(0, 0)'); |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| | }, 50); |
| }
| |
| | |
| .notaninfobox > .infobox-title::after, | |
| .infobox th::after {
| |
| content: "×";
| |
| position: absolute;
| |
| top: 2px;
| |
| right: 5px;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-color: #ff6347;
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| text-align: center;
| |
| line-height: 16px;
| |
| font-size: 12px;
| |
| color: white;
| |
| cursor: pointer;
| |
| z-index: 1;
| |
| }
| |
| | |
| .infobox-imagearea {
| |
| text-align: center;
| |
| padding: 8px;
| |
| background-color: white;
| |
| }
| |
| | |
| .infobox-imagearea > div:not(:first-child) {
| |
| padding-top: 1em;
| |
| }
| |
| | |
| /* Horizontally centre animated images */
| |
| .infobox-imagearea .animated {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| }
| |
| | |
| .notaninfobox .infobox-rows { | |
| display: grid;
| |
| grid-template-columns: max-content 1fr;
| |
| gap: 1px;
| |
| background-color: white;
| |
| }
| |
| | |
| .infobox .plainlinks a {
| |
| color: rgb(var(--link-color)) !important;
| |
| text-decoration: underline; | |
| } | |
| | |
| .infobox .plainlinks a:visited {
| |
| color: rgb(var(--visited-link-color)) !important;
| |
| }
| |
| | |
| .notaninfobox .infobox-rows .infobox-row {
| |
| display: contents; | |
| }
| |
| | |
| .notaninfobox .infobox-row .infobox-row-label,
| |
| .notaninfobox .infobox-row .infobox-row-field {
| |
| padding: 4px 8px;
| |
| border: 1px solid #ababab;
| |
| }
| |
| | |
| .notaninfobox .infobox-row .infobox-row-label {
| |
| font-weight: bold;
| |
| display: flex;
| |
| align-items: center;
| |
| background-color: #f0f0f0;
| |
| }
| |
| | |
| .notaninfobox .infobox-rows .infobox-row:nth-child(2n) .infobox-row-label,
| |
| .notaninfobox .infobox-rows .infobox-row:nth-child(2n) .infobox-row-field {
| |
| background-color: #f9f9f9; | |
| }
| |
| | |
| /* Community Updates - Windows XP风格 */ | |
| .community-updates {
| |
| background: rgb(var(--xp-window-bg)); | |
| padding: 15px;
| |
| border: 2px solid rgb(var(--xp-window-border));
| |
| margin-top: 20px;
| |
| box-shadow: var(--window-shadow);
| |
| position: relative;
| |
| border-radius: 0;
| |
| }
| |
| | |
| .community-updates::before {
| |
| content: "Community Updates";
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| color: white;
| |
| padding: 5px 10px;
| |
| font-weight: bold;
| |
| text-shadow: var(--text-shadow);
| |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| |
| }
| |
| | |
| .community-updates ul {
| |
| margin-top: 30px;
| |
| }
| |
| | |
| .community-updates ul li {
| |
| list-style: none;
| |
| padding: 10px;
| |
| background: white;
| |
| margin: 5px 0;
| |
| border: 1px solid #ababab;
| |
| box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
| |
| }
| |
| | |
| .community-updates ul li a {
| |
| color: rgb(var(--link-color));
| |
| text-decoration: none;
| |
| font-weight: bold;
| |
| }
| |
| | |
| /* Infoboxes with tabber */
| |
| .tabber-container-infobox .tabber .tabbertab,
| |
| .tabber-container-infobox ul.tabbernav li a, | |
| .tabber-container-infobox ul.tabbernav li.tabberactive a {
| |
| background: none;
| |
| border: none;
| |
| }
| |
| | |
| .tabber-container-infobox .tabber .tabbertab {
| |
| padding: 0;
| |
| }
| |
| | |
| .tabber-container-infobox ul.tabbernav {
| |
| font: inherit;
| |
| font-size: 100%;
| |
| border-bottom: 1px solid #ababab;
| |
| }
| |
| | |
| .tabber-container-infobox ul.tabbernav li a:hover {
| |
| color: rgb(var(--hover-link-color));
| |
| }
| |
| | |
| .tabber-container-infobox ul.tabbernav > li {
| |
| margin-bottom: 5px;
| |
| padding: 0;
| |
| }
| |
| | |
| .announcement-content span {
| |
| display: inline-block;
| |
| white-space: nowrap;
| |
| animation: marquee 15s linear infinite;
| |
| }
| |
| | |
| @keyframes marquee {
| |
| 0% { transform: translate(100%, 0); }
| |
| 100% { transform: translate(-100%, 0); }
| |
| }
| |
| | |
| /* 主页头部样式 - Windows XP风格 */
| |
| .mw-mainpage-header { | |
| background-color: rgb(var(--xp-window-bg));
| |
| border: 2px solid rgb(var(--xp-window-border));
| |
| box-shadow: var(--window-shadow);
| |
| color: rgb(var(--xp-text));
| |
| font-size: 1.5em;
| |
| padding: 30px 20px 20px;
| |
| text-align: center;
| |
| position: relative;
| |
| border-radius: 0;
| |
| }
| |
| | |
| .mw-mainpage-header::before {
| |
| content: "Welcome";
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| color: white;
| |
| padding: 5px 10px;
| |
| font-weight: bold;
| |
| text-shadow: var(--text-shadow);
| |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| |
| text-align: left;
| |
| }
| |
| | |
| .mw-mainpage-header h1 {
| |
| font-size: 2.5em;
| |
| margin-bottom: 10px;
| |
| background: none;
| |
| color: rgb(var(--xp-text));
| |
| text-shadow: none;
| |
| }
| |
| | |
| .mw-mainpage-header p {
| |
| font-size: 1.2em;
| |
| margin: 5px 0;
| |
| }
| |
| | |
| .tabber-container-infobox ul.tabbernav > li > a {
| |
| color: rgb(var(--link-color));
| |
| padding: 5px 10px;
| |
| display: block;
| |
| background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
| |
| border: 1px solid #ababab;
| |
| border-bottom: none;
| |
| border-radius: 3px 3px 0 0;
| |
| }
| |
| | |
| /* To prevent the tabs from jumping around when they become active or inactive */
| |
| .tabber-container-infobox ul.tabbernav > li > a::before {
| |
| display: block;
| |
| content: attr(alt);
| |
| font-weight: bold;
| |
| height: 0;
| |
| color: transparent;
| |
| overflow: hidden;
| |
| visibility: hidden;
| |
| }
| |
| | |
| .tabber-container-infobox ul.tabbernav > li.tabberactive {
| |
| border: none;
| |
| }
| |
| | |
| /* ModuleBox - Windows XP风格 */
| |
| .modulebox {
| |
| border: 2px solid rgb(var(--xp-window-border));
| |
| padding: 30px 10px 10px;
| |
| margin: 10px 0;
| |
| background-color: rgb(var(--xp-window-bg));
| |
| position: relative;
| |
| box-shadow: var(--window-shadow);
| |
| border-radius: 0;
| |
| }
| |
| | |
| .modulebox::before {
| |
| content: "Module";
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| color: white;
| |
| padding: 5px 10px;
| |
| font-weight: bold;
| |
| text-shadow: var(--text-shadow);
| |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| |
| text-align: left;
| |
| }
| |
| | |
| .tabber-container-infobox ul.tabbernav > li.tabberactive > a {
| |
| font-weight: bold;
| |
| color: rgb(var(--hover-link-color));
| |
| background: linear-gradient(to bottom, #ffffff, #f6f6f6);
| |
| border-bottom: 1px solid #ffffff;
| |
| position: relative;
| |
| z-index: 1;
| |
| }
| |
| | |
| .infobox-rows p {
| |
| margin: 0;
| |
| }
| |
| | |
| .infobox-rows dl + dl {
| |
| margin-top: -0.4em;
| |
| }
| |
| | |
| .infobox-rows dl:last-child {
| |
| margin-bottom: 0.2em;
| |
| }
| |
| | |
| .infobox-footer {
| |
| text-align: center;
| |
| padding: 5px;
| |
| background-color: #f0f0f0;
| |
| border-top: 1px solid #ababab;
| |
| }
| |
| | |
| /* 导航框(查论编)- Windows XP风格 */
| |
| table.navbox {
| |
| border: 2px solid rgb(var(--xp-window-border));
| |
| clear: both;
| |
| margin: 1em auto;
| |
| padding: 0;
| |
| text-align: center;
| |
| width: 100%;
| |
| background-color: rgb(var(--xp-window-bg));
| |
| box-shadow: var(--window-shadow);
| |
| border-collapse: separate;
| |
| border-spacing: 0;
| |
| border-radius: 0;
| |
| }
| |
| | |
| table.navbox + table.navbox {
| |
| margin-top: 5px;
| |
| }
| |
| | |
| .navbox-title,
| |
| .navbox-abovebelow,
| |
| table.navbox th {
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| color: white;
| |
| padding: 5px 10px;
| |
| text-align: center;
| |
| font-weight: bold;
| |
| text-shadow: var(--text-shadow);
| |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| |
| position: relative;
| |
| }
| |
| | |
| .navbox-title::after,
| |
| table.navbox th::after {
| |
| content: "×";
| |
| position: absolute;
| |
| top: 2px;
| |
| right: 5px;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-color: #ff6347;
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| text-align: center;
| |
| line-height: 16px;
| |
| font-size: 12px;
| |
| color: white;
| |
| cursor: pointer;
| |
| z-index: 1;
| |
| }
| |
| | |
| .navbox-group {
| |
| background-color: #f0f0f0;
| |
| border: 1px solid #ababab;
| |
| color: black;
| |
| font-weight: bold;
| |
| padding: 5px;
| |
| text-align: right;
| |
| white-space: nowrap;
| |
| } | |
| | |
| .navbox-list {
| |
| background-color: white;
| |
| border: 1px solid #ababab;
| |
| padding: 5px;
| |
| text-align: left;
| |
| }
| |
| | |
| .navbox,
| |
| .navbox-subgroup {
| |
| background-color: rgb(var(--xp-window-bg));
| |
| }
| |
| | |
| .navbox-subgroup .navbox-title {
| |
| background-color: #c0d8f0;
| |
| color: black;
| |
| text-shadow: none;
| |
| }
| |
| | |
| .navbox-subgroup .navbox-group,
| |
| .navbox-subgroup .navbox-abovebelow {
| |
| background-color: #e6f0f9;
| |
| }
| |
| | |
| .navbox-even {
| |
| background-color: #f9f9f9;
| |
| }
| |
| | |
| .navbox-odd {
| |
| background-color: white;
| |
| }
| |
| | |
| .collapseButton {
| |
| float: right;
| |
| font-weight: 400;
| |
| text-align: right;
| |
| width: auto;
| |
| }
| |
| | |
| .navbox .collapseButton {
| |
| width: 6em;
| |
| }
| |
| | |
| .navbar {
| |
| position: relative;
| |
| min-height: 23px !important;
| |
| margin-bottom: 0px !important;
| |
| border: 1px solid transparent;
| |
| }
| |
| | |
| .navbox-title .Wikiplus-Edit-EveryWhereBtn {
| |
| display: none;
| |
| }
| |
| | |
| @media only screen and (max-width:759px) {
| |
| .infotable {
| |
| width: 90%;
| |
| float: none;
| |
| margin: 0 auto;
| |
| } | | } |
| | | |
| .navbox-title>div { | | // 随机触发屏幕抖动 |
| display: none; | | setInterval(function() { |
| | if (Math.random() < 0.005) { // 0.5%的概率 |
| | screenGlitch(); |
| | } |
| | }, 1000); |
| | |
| | // 为页面添加启动动画 |
| | function bootSequence() { |
| | $('body').addClass('booting'); |
| | setTimeout(function() { |
| | $('body').removeClass('booting').addClass('booted'); |
| | }, 500); |
| } | | } |
| | | |
| .navbox-group, | | // 页面加载时执行启动序列 |
| .navbox-group >div { | | bootSequence(); |
| padding-left: 0 !important;
| | }); |
| padding-right: 0 !important;
| |
| text-align: center;
| |
| }
| |
| }
| |
|
| |
|
| /* 主页Windows XP风格布局 */ | | // 辅助CSS类 |
| .main-page-banner {
| | $(function() { |
| position: relative; | | // 动态添加一些必要的CSS |
| display: grid; | | var customStyles = ` |
| grid-template-areas:
| | .terminal-cursor { |
| "welcome welcome welcome" | | animation: blink 1s infinite; |
| "discord faq join"; | | } |
| grid-template-columns: 1fr 1fr 1fr;
| | |
| grid-column-gap: 3%;
| | @keyframes blink { |
| margin-bottom: 2rem;
| | 0% { opacity: 1; } |
| width: 100%;
| | 50% { opacity: 0; } |
| box-sizing: border-box;
| | 100% { opacity: 1; } |
| border: 2px solid rgb(var(--xp-window-border));
| | } |
| box-shadow: var(--window-shadow);
| | |
| background-color: rgb(var(--xp-window-bg));
| | .booting #content { |
| z-index: 1;
| | opacity: 0; |
| border-radius: 0;
| | transform: scale(0.95); |
| } | | transition: all 0.5s ease-out; |
| | | } |
| /* 欢迎文本区域 - Windows XP样式 */
| | |
| .main-page-banner .welcome-text { | | .booted #content { |
| grid-area: welcome;
| | opacity: 1; |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| | transform: scale(1); |
| color: white;
| | } |
| padding: 30px 20px 20px;
| | |
| margin: 0;
| | .terminal { |
| width: 100%;
| | font-family: var(--mono-font); |
| position: relative;
| | background-color: rgb(var(--black-monochrome)); |
| overflow: hidden;
| | color: rgb(var(--bright-accent)); |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| | padding: 1rem; |
| border-radius: 0;
| | border: 2px solid rgb(var(--bright-accent)); |
| z-index: 2;
| | box-shadow: 0 0 10px rgba(var(--bright-accent), 0.3); |
| text-shadow: var(--text-shadow);
| | } |
| } | | |
| | | /* 修复动画闪烁问题 */ |
| /* 添加标题栏 */
| | #mw-content-text > * { |
| .main-page-banner .welcome-text::before { | | visibility: visible; |
| content: "Welcome";
| | } |
| position: absolute;
| | |
| top: 0;
| | .mw-parser-output > *.animated { |
| left: 0;
| | animation: none !important; |
| right: 0;
| | } |
| height: 25px;
| | `; |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| | |
| color: white;
| | $('<style>').text(customStyles).appendTo('head'); |
| padding: 5px 10px;
| | }); |
| font-weight: bold;
| |
| font-size: 14px;
| |
| text-shadow: var(--text-shadow);
| |
| text-align: left;
| |
| line-height: 25px;
| |
| border-bottom: 1px solid rgba(0, 0, 0, 0.2);
| |
| z-index: 3;
| |
| }
| |
| | |
| /* 添加XP窗口控制按钮 */
| |
| .main-page-banner .welcome-text::after {
| |
| content: "×";
| |
| position: absolute;
| |
| top: 7px;
| |
| right: 5px;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-color: #ff6347;
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| text-align: center;
| |
| line-height: 16px;
| |
| font-size: 12px;
| |
| color: white;
| |
| cursor: pointer;
| |
| z-index: 4;
| |
| }
| |
| | |
| /* 添加最小化、最大化按钮 */
| |
| .main-page-banner .welcome-text .min-button,
| |
| .main-page-banner .welcome-text .max-button {
| |
| position: absolute;
| |
| top: 7px;
| |
| width: 16px;
| |
| height: 16px;
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| text-align: center;
| |
| line-height: 16px;
| |
| font-size: 12px;
| |
| color: black;
| |
| background-color: rgb(var(--light-gray-monochrome));
| |
| cursor: pointer;
| |
| z-index: 4;
| |
| }
| |
| | |
| .main-page-banner .welcome-text .min-button {
| |
| right: 45px;
| |
| content: "_";
| |
| line-height: 13px;
| |
| }
| |
| | |
| .main-page-banner .welcome-text .max-button {
| |
| right: 25px;
| |
| content: "□";
| |
| }
| |
| | |
| .main-page-banner .welcome-text p {
| |
| position: relative;
| |
| z-index: 2;
| |
| margin: 0;
| |
| font-size: 1.1em;
| |
| } | |
| | |
| /* 导航按钮 - Windows XP风格 */ | |
| .main-page-banner .navigation-links {
| |
| display: grid;
| |
| grid-template-columns: 1fr 1fr 1fr;
| |
| grid-column-gap: 3%;
| |
| grid-area: discord / discord / join / join;
| |
| width: 100%;
| |
| padding: 10px;
| |
| background-color: rgb(var(--xp-window-bg));
| |
| } | |
| | |
| .main-page-banner .nav-button { | |
| background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
| |
| border: 1px solid #ababab;
| |
| border-radius: 3px;
| |
| margin: 0 0 10px 0;
| |
| transition: all 0.3s ease;
| |
| height: min-content;
| |
| box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
| |
| position: relative;
| |
| overflow: hidden;
| |
| } | |
| | |
| .main-page-banner .nav-button:hover {
| |
| background: linear-gradient(to bottom, #f9f9f9, #e9e9e9); | |
| transform: translateY(-3px); | |
| box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.3); | |
| }
| |
| | |
| .main-page-banner .nav-button:active { | |
| background: linear-gradient(to bottom, #e0e0e0, #f0f0f0);
| |
| box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
| |
| transform: translateY(0);
| |
| } | |
| | |
| .main-page-banner .nav-button a {
| |
| display: block;
| |
| padding: 8px 0;
| |
| width: 100%;
| |
| text-align: center;
| |
| color: black;
| |
| font-size: 1.1rem;
| |
| font-weight: bold;
| |
| text-decoration: none !important;
| |
| position: relative;
| |
| z-index: 1;
| |
| }
| |
|
| |
|
| /* 响应式布局 */ | | // 修复变色龙皮肤的Bootstrap组件 |
| @media (max-width: 767px) {
| | $(function() { |
| .main-page-banner { | | function fixBootstrapComponents() { |
| grid-template-areas: | | // 修复导航栏 |
| "welcome" | | $('.navbar').css({ |
| "navigation"; | | 'background-color': 'rgb(10, 10, 10)', |
| grid-template-columns: 1fr; | | 'border-bottom': '1px solid rgb(229, 140, 36)' |
| | }); |
| | |
| | // 修复下拉菜单 |
| | $('.dropdown-menu').css({ |
| | 'background-color': 'rgb(10, 10, 10)', |
| | 'border': '1px solid rgb(229, 140, 36)' |
| | }); |
| | |
| | // 修复按钮 |
| | $('.btn').css({ |
| | 'background-color': 'rgb(72, 69, 60)', |
| | 'border': '1px solid rgb(229, 140, 36)', |
| | 'color': 'rgb(229, 140, 36)' |
| | }); |
| | |
| | // 修复表单控件 |
| | $('.form-control').css({ |
| | 'background-color': 'rgb(10, 10, 10)', |
| | 'border': '1px solid rgb(229, 140, 36)', |
| | 'color': 'rgb(229, 140, 36)' |
| | }); |
| } | | } |
| | | |
| .main-page-banner .welcome-text { | | // 应用样式修复 |
| width: 100%;
| | fixBootstrapComponents(); |
| margin-bottom: 0;
| | |
| box-sizing: border-box; | | // 监听DOM变化 |
| } | | var observer = new MutationObserver(function(mutations) { |
| | fixBootstrapComponents(); |
| | }); |
| | | |
| .main-page-banner .navigation-links { | | observer.observe(document.body, { |
| grid-area: navigation; | | childList: true, |
| display: flex; | | subtree: true |
| flex-wrap: wrap; | | }); |
| width: 100%; | | }); |
| | // 顶栏头像显示 |
| | // 增强的头像显示 |
| | $(document).ready(function() { |
| | var username = mw.config.get('wgUserName'); |
| | if (username) { |
| | // 获取用户ID,是生成头像URL的关键 |
| | $.get(mw.util.wikiScript('api'), { |
| | action: 'query', |
| | list: 'users', |
| | ususers: username, |
| | format: 'json' |
| | }).done(function(data) { |
| | if (data && data.query && data.query.users && data.query.users[0]) { |
| | var userId = data.query.users[0].userid; |
| | |
| | // 尝试几种可能的头像路径格式 |
| | var possiblePaths = [ |
| | '/images/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_s.jpg', |
| | '/images/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_s.png', |
| | '/images/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_s.gif', |
| | '/extensions/SocialProfile/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_s.jpg', |
| | '/extensions/SocialProfile/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_s.png', |
| | '/extensions/SocialProfile/avatars/' + mw.config.get('wgDBname') + '_' + userId + '_s.gif' |
| | ]; |
| | |
| | // 检查哪个路径可用 |
| | function checkPath(index) { |
| | if (index >= possiblePaths.length) { |
| | // 所有路径都不可用,使用默认头像 |
| | applyAvatarCSS('/extensions/SocialProfile/images/default_s.gif'); |
| | return; |
| | } |
| | |
| | var img = new Image(); |
| | img.onload = function() { |
| | // 找到可用的路径 |
| | applyAvatarCSS(possiblePaths[index]); |
| | }; |
| | img.onerror = function() { |
| | // 尝试下一个路径 |
| | checkPath(index + 1); |
| | }; |
| | img.src = mw.config.get('wgScriptPath') + possiblePaths[index]; |
| | } |
| | |
| | checkPath(0); |
| | } |
| | }); |
| } | | } |
| | | |
| .main-page-banner .nav-button { | | function applyAvatarCSS(avatarUrl) { |
| flex: 1;
| | // 应用CSS规则 |
| min-width: 30%;
| | $('<style>').text( |
| margin: 0 5px 10px; | | '.navbar-userloggedin::before, ' + |
| | '#personal-inner::before, ' + |
| | '#p-personal .vector-menu-content-list > li:first-child > a::before, ' + |
| | '.navbar-personaltools > li:first-child > a::before {' + |
| | ' background-image: url("' + avatarUrl + '") !important;' + |
| | '}' |
| | ).appendTo('head'); |
| } | | } |
| } | | }); |
| | /* Windows XP 风格的开始菜单和时钟功能 */ |
|
| |
|
| /* 公告容器 - Windows XP风格 */ | | // 创建完整的任务栏 |
| .announcement-container {
| | function createTaskbar() { |
| background-color: rgb(var(--xp-window-bg));
| | // 移除之前的任务栏 |
| border: 2px solid rgb(var(--xp-window-border)); | | $('.taskbar, .start-button, .taskbar-clock').remove(); |
| box-shadow: var(--window-shadow); | | |
| margin-bottom: 2rem;
| | // 创建任务栏容器 |
| display: flex;
| | var $taskbar = $('<div class="taskbar"></div>'); |
| flex-wrap: wrap;
| | |
| align-content: space-between;
| | // 创建开始按钮 |
| position: relative;
| | var $startButton = $('<div class="start-button">开始</div>'); |
| border-radius: 0;
| | $taskbar.append($startButton); |
| }
| | |
| | | // 创建任务栏内容区域 |
| .announcement-container .section-title { | | var $taskbarContent = $('<div class="taskbar-content"></div>'); |
| width: 100%;
| | |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| | // 创建快速启动栏 |
| color: white;
| | var $quickLaunch = $('<div class="quick-launch"></div>'); |
| padding: 5px 10px;
| | |
| font-family: var(--title-font);
| | // 添加一些快速启动图标 |
| font-size: 1.3rem;
| | var quickLaunchItems = [ |
| text-align: left;
| | { icon: '🌐', title: '浏览器', action: function() { window.location.href = '/wiki/首页'; } }, |
| border-left: none;
| | { icon: '📁', title: '文件夹', action: function() { window.location.href = '/wiki/Special:AllPages'; } }, |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| | { icon: '📧', title: '邮件', action: function() { window.location.href = '/wiki/Special:EmailUser'; } } |
| text-shadow: var(--text-shadow);
| | ]; |
| position: relative;
| | |
| }
| | quickLaunchItems.forEach(function(item) { |
| | | var $icon = $('<div class="quick-launch-icon" title="' + item.title + '">' + item.icon + '</div>'); |
| .announcement-container .section-title::after { | | $icon.click(item.action); |
| content: "×";
| | $quickLaunch.append($icon); |
| position: absolute;
| | }); |
| top: 7px;
| | |
| right: 5px;
| | $taskbarContent.append($quickLaunch); |
| width: 16px;
| | $taskbar.append($taskbarContent); |
| height: 16px;
| | |
| background-color: #ff6347;
| | // 创建系统托盘 |
| border: 1px solid rgb(var(--xp-window-border));
| | var $systemTray = $('<div class="system-tray"></div>'); |
| text-align: center; | | |
| line-height: 16px;
| | // 添加系统图标 |
| font-size: 12px;
| | var $volumeIcon = $('<div class="tray-icon" title="音量">🔊</div>'); |
| color: white;
| | var $networkIcon = $('<div class="tray-icon" title="网络">📶</div>'); |
| cursor: pointer;
| | |
| z-index: 1;
| | $systemTray.append($volumeIcon); |
| }
| | $systemTray.append($networkIcon); |
| | |
| .announcement-container .announcement-content {
| |
| background-color: white;
| |
| color: black;
| |
| padding: 10px;
| |
| width: 100%;
| |
| }
| |
| | |
| .announcement-container .more-content {
| |
| width: 100%;
| |
| border-top: 1px solid #ababab; | |
| padding: 5px;
| |
| background-color: #f0f0f0;
| |
| text-align: right;
| |
| }
| |
| | |
| /* 最近页面容器 - Windows XP风格 */ | |
| .recent-pages-container {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: space-between;
| |
| width: 100%;
| |
| margin-bottom: 1rem;
| |
| }
| |
| | |
| .recent-pages-container .page-section {
| |
| flex-basis: 48%;
| |
| background-color: rgb(var(--xp-window-bg)); | |
| border: 2px solid rgb(var(--xp-window-border));
| |
| box-shadow: var(--window-shadow);
| |
| margin-bottom: 1rem;
| |
| display: grid;
| |
| grid-template-areas: "title" "page" "more";
| |
| grid-template-rows: auto 1fr auto;
| |
| position: relative;
| |
| border-radius: 0;
| |
| }
| |
| | |
| .recent-pages-container .section-title {
| |
| grid-area: title;
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| color: white; | |
| padding: 5px 30px 5px 10px; | |
| font-weight: bold; | |
| text-shadow: var(--text-shadow);
| |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| |
| position: relative;
| |
| text-align: left;
| |
| height: 25px;
| |
| line-height: 25px;
| |
| border-left: none;
| |
| }
| |
| | |
| .recent-pages-container .section-title::after {
| |
| content: "×";
| |
| position: absolute;
| |
| top: 5px;
| |
| right: 5px;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-color: #ff6347;
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| text-align: center; | |
| line-height: 16px;
| |
| font-size: 12px;
| |
| color: white;
| |
| cursor: pointer;
| |
| z-index: 1;
| |
| }
| |
| | |
| .recent-pages-container .page-list {
| |
| grid-area: page;
| |
| background-color: white;
| |
| padding: 10px;
| |
| max-height: 200px;
| |
| overflow-y: auto;
| |
| border-bottom: 1px solid #ababab;
| |
| }
| |
| | |
| .recent-pages-container .page-list a {
| |
| display: block;
| |
| padding: 3px 0;
| |
| border-bottom: 1px solid #e0e0e0;
| |
| color: rgb(var(--link-color));
| |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis;
| |
| }
| |
| | |
| .recent-pages-container .page-list a:last-child {
| |
| border-bottom: none;
| |
| }
| |
| | |
| .recent-pages-container .see-more {
| |
| grid-area: more;
| |
| background-color: #f0f0f0;
| |
| padding: 5px 10px;
| |
| text-align: right;
| |
| }
| |
| | |
| .recent-pages-container .see-more a {
| |
| color: rgb(var(--link-color));
| |
| }
| |
| | |
| /* 特色内容容器 - Windows XP风格 */ | |
| .featured-content-container .feature-content .featured-description {
| |
| font-style: italic;
| |
| color: #444; | |
| }
| |
| | |
| .featured-content-container .see-more {
| |
| grid-area: more;
| |
| background-color: #f0f0f0;
| |
| padding: 5px 10px;
| |
| text-align: right;
| |
| }
| |
| | |
| .featured-content-container .see-more a {
| |
| color: rgb(var(--link-color));
| |
| }
| |
| | |
| /* 工具和资源容器 - Windows XP风格 */
| |
| .tools-and-resources {
| |
| margin-bottom: 2rem;
| |
| }
| |
| | |
| .tools-container {
| |
| display: grid;
| |
| grid-template-columns: 1fr 1fr;
| |
| grid-gap: 1rem;
| |
| }
| |
| | |
| .tools-container .tool-item {
| |
| background-color: rgb(var(--xp-window-bg));
| |
| border: 2px solid rgb(var(--xp-window-border));
| |
| box-shadow: var(--window-shadow);
| |
| padding: 30px 10px 10px;
| |
| display: grid;
| |
| grid-template-areas:
| |
| "icon content"
| |
| "title content";
| |
| grid-template-columns: max-content 1fr;
| |
| grid-template-rows: auto auto;
| |
| grid-gap: 0.5rem 1rem;
| |
| position: relative;
| |
| border-radius: 0;
| |
| }
| |
| | |
| .tools-container .tool-item::before {
| |
| content: "Tool";
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| color: white; | |
| padding: 5px 10px; | |
| font-weight: bold; | |
| text-shadow: var(--text-shadow);
| |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| |
| text-align: left;
| |
| height: 15px;
| |
| line-height: 15px;
| |
| font-size: 12px;
| |
| }
| |
| | |
| .tools-container .tool-item::after {
| |
| content: "×";
| |
| position: absolute;
| |
| top: 2px;
| |
| right: 5px;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-color: #ff6347;
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| text-align: center;
| |
| line-height: 16px;
| |
| font-size: 12px;
| |
| color: white;
| |
| cursor: pointer;
| |
| z-index: 1;
| |
| }
| |
| | |
| .tools-container .tool-item .tool-icon {
| |
| grid-area: icon;
| |
| justify-self: center;
| |
| align-self: center;
| |
| background-color: white;
| |
| border: 1px solid #ababab;
| |
| padding: 5px;
| |
| }
| |
| | |
| .tools-container .tool-item .tool-title {
| |
| grid-area: title;
| |
| text-align: center;
| |
| }
| |
| | |
| .tools-container .tool-item .tool-title a {
| |
| color: rgb(var(--link-color));
| |
| font-weight: bold; | |
| }
| |
| | |
| .tools-container .tool-item .tool-description {
| |
| grid-area: content;
| |
| background-color: white;
| |
| border: 1px solid #ababab;
| |
| padding: 8px; | |
| }
| |
| | |
| /* 新闻容器 - Windows XP风格 */ | |
| .news-container {
| |
| background-color: rgb(var(--xp-window-bg)); | |
| border: 2px solid rgb(var(--xp-window-border));
| |
| box-shadow: var(--window-shadow);
| |
| margin-bottom: 2rem;
| |
| position: relative;
| |
| border-radius: 0;
| |
| }
| |
| | |
| .news-container .section-title {
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| color: white;
| |
| padding: 5px 30px 5px 10px;
| |
| font-weight: bold;
| |
| text-shadow: var(--text-shadow);
| |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| |
| position: relative;
| |
| text-align: left;
| |
| width: 100%;
| |
| border-left: none;
| |
| }
| |
| | |
| .news-container .section-title::after {
| |
| content: "×";
| |
| position: absolute;
| |
| top: 5px;
| |
| right: 5px;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-color: #ff6347;
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| text-align: center;
| |
| line-height: 16px;
| |
| font-size: 12px;
| |
| color: white;
| |
| cursor: pointer;
| |
| z-index: 1;
| |
| }
| |
| | |
| .news-container .news-content { | |
| background-color: white;
| |
| padding: 10px;
| |
| width: 100%;
| |
| border-bottom: 1px solid #ababab;
| |
| } | |
| | |
| .news-container .news-content .news-item {
| |
| border-bottom: 1px solid #e0e0e0;
| |
| padding: 5px 0;
| |
| } | |
| | |
| .news-container .news-content .news-item:last-child {
| |
| border-bottom: none;
| |
| }
| |
| | |
| .news-container .news-content .news-title {
| |
| font-weight: bold;
| |
| margin-bottom: 3px;
| |
| color: rgb(var(--xp-blue-dark));
| |
| }
| |
| | |
| .news-container .news-content .news-date {
| |
| font-size: 0.8rem;
| |
| color: #666;
| |
| margin-bottom: 3px;
| |
| }
| |
| | |
| .news-container .news-archive { | |
| background-color: #f0f0f0;
| |
| padding: 5px 10px;
| |
| text-align: right;
| |
| width: 100%;
| |
| }
| |
| | |
| .news-container .news-archive a {
| |
| color: rgb(var(--link-color));
| |
| }
| |
| | |
| /* 轮播图容器 - Windows XP风格 */ | |
| .mw-carousel {
| |
| position: relative;
| |
| width: 100%;
| |
| max-width: 960px;
| |
| margin: 20px auto;
| |
| overflow: hidden;
| |
| border: 2px solid rgb(var(--xp-window-border));
| |
| box-shadow: var(--window-shadow);
| |
| aspect-ratio: 16 / 9;
| |
| background-color: rgb(var(--xp-window-bg));
| |
| border-radius: 0;
| |
| } | |
| | |
| .mw-carousel::before {
| |
| content: "Slideshow";
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| color: white;
| |
| padding: 5px 10px;
| |
| font-weight: bold;
| |
| text-shadow: var(--text-shadow);
| |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| |
| text-align: left;
| |
| height: 15px;
| |
| line-height: 15px;
| |
| font-size: 12px;
| |
| z-index: 10;
| |
| }
| |
| | |
| .mw-carousel::after {
| |
| content: "×";
| |
| position: absolute;
| |
| top: 2px;
| |
| right: 5px;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-color: #ff6347;
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| text-align: center;
| |
| line-height: 16px;
| |
| font-size: 12px;
| |
| color: white;
| |
| cursor: pointer;
| |
| z-index: 10;
| |
| }
| |
| | |
| .mw-carousel .carousel-image { | |
| width: 100%;
| |
| height: 100%;
| |
| position: relative;
| |
| margin-top: 25px;
| |
| } | |
| | |
| .mw-carousel .carousel-image img {
| |
| width: 100%;
| |
| height: calc(100% - 25px);
| |
| object-fit: cover;
| |
| display: block;
| |
| border: 1px solid #ababab;
| |
| } | |
| | |
| .mw-carousel .carousel-caption {
| |
| position: absolute; | |
| bottom: 0; | |
| left: 0;
| |
| width: 100%;
| |
| background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); | |
| color: white;
| |
| padding: 20px 15px 12px;
| |
| text-align: left;
| |
| transition: all 0.4s ease;
| |
| z-index: 2;
| |
| }
| |
| | |
| .mw-carousel:hover .carousel-caption {
| |
| top: 25px;
| |
| left: 0;
| |
| bottom: 0;
| |
| width: 100%;
| |
| height: calc(100% - 25px);
| |
| background: rgba(0, 0, 0, 0.6);
| |
| display: flex;
| |
| flex-direction: column;
| |
| justify-content: center;
| |
| align-items: center;
| |
| text-align: center;
| |
| padding: 20px;
| |
| backdrop-filter: blur(3px);
| |
| }
| |
| | |
| .mw-carousel .carousel-caption h3 {
| |
| margin: 0 0 5px;
| |
| font-size: 1.6em;
| |
| font-weight: 600;
| |
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
| |
| transition: transform 0.4s ease;
| |
| background: none;
| |
| padding: 0;
| |
| border: none;
| |
| }
| |
| | |
| .mw-carousel .carousel-caption p {
| |
| margin: 0;
| |
| font-size: 1.1em;
| |
| line-height: 1.4;
| |
| max-width: 80%;
| |
| transition: all 0.4s ease 0.1s;
| |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
| |
| }
| |
| | |
| .mw-carousel .carousel-navigation {
| |
| position: absolute;
| |
| top: 50%;
| |
| left: 0;
| |
| width: 100%;
| |
| display: flex;
| |
| justify-content: space-between;
| |
| transform: translateY(-50%);
| |
| z-index: 3;
| |
| padding: 0 15px;
| |
| opacity: 0;
| |
| transition: opacity 0.3s ease;
| |
| }
| |
| | |
| .mw-carousel:hover .carousel-navigation {
| |
| opacity: 1;
| |
| }
| |
| | |
| .mw-carousel .carousel-prev,
| |
| .mw-carousel .carousel-next { | |
| background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
| |
| border: 1px solid #ababab;
| |
| width: 32px;
| |
| height: 32px;
| |
| font-size: 18px;
| |
| cursor: pointer;
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: center;
| |
| transition: all 0.3s;
| |
| box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
| |
| }
| |
| | |
| .mw-carousel .carousel-prev:hover,
| |
| .mw-carousel .carousel-next:hover {
| |
| background: linear-gradient(to bottom, #f9f9f9, #e9e9e9); | |
| } | |
| | |
| .mw-carousel .carousel-indicators {
| |
| position: absolute;
| |
| bottom: 15px;
| |
| right: 20px;
| |
| left: auto;
| |
| display: flex;
| |
| gap: 5px;
| |
| z-index: 4;
| |
| padding: 5px 10px;
| |
| background-color: rgba(0, 0, 0, 0.3);
| |
| }
| |
| | |
| .mw-carousel .carousel-indicators .indicator {
| |
| width: 10px;
| |
| height: 10px; | |
| background-color: rgba(255, 255, 255, 0.5); | |
| border: 1px solid rgba(0, 0, 0, 0.2);
| |
| cursor: pointer; | |
| transition: all 0.3s;
| |
| }
| |
| | |
| .mw-carousel .carousel-indicators .indicator.active {
| |
| background-color: #ffffff;
| |
| transform: scale(1.2);
| |
| box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); | |
| }
| |
| | |
| /* 图片全局样式 */
| |
| img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| display: block;
| |
| border: 1px solid #ababab; | |
| }
| |
| | |
| /* 添加图片过渡效果 */ | |
| .mw-carousel .carousel-image img {
| |
| transition: transform 0.5s ease;
| |
| }
| |
| | |
| .mw-carousel:hover .carousel-image img {
| |
| transform: scale(1.03); | |
| }
| |
| | |
| /* 目录框样式 - Windows XP风格 */
| |
| #toc, .toc {
| |
| background-color: rgb(var(--xp-window-bg));
| |
| border: 2px solid rgb(var(--xp-window-border));
| |
| box-shadow: var(--window-shadow);
| |
| padding: 30px 10px 10px;
| |
| margin: 1em 0;
| |
| position: relative;
| |
| border-radius: 0;
| |
| }
| |
| | |
| #toc::before, .toc::before {
| |
| content: "Contents";
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| color: white;
| |
| padding: 5px 10px;
| |
| font-weight: bold;
| |
| text-shadow: var(--text-shadow);
| |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| |
| text-align: left;
| |
| height: 15px;
| |
| line-height: 15px;
| |
| font-size: 12px;
| |
| }
| |
| | |
| #toc::after, .toc::after {
| |
| content: "×";
| |
| position: absolute;
| |
| top: 2px;
| |
| right: 5px;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-color: #ff6347;
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| text-align: center;
| |
| line-height: 16px;
| |
| font-size: 12px;
| |
| color: white;
| |
| cursor: pointer;
| |
| z-index: 1;
| |
| }
| |
| | |
| .toc .toctitle, #toc .toctitle {
| |
| display: none;
| |
| }
| |
| | |
| .toc ul, #toc ul {
| |
| margin: 0;
| |
| padding: 0 0 0 1.5em;
| |
| }
| |
| | |
| .toc li, #toc li {
| |
| margin: 5px 0;
| |
| }
| |
| | |
| .toc a, #toc a {
| |
| color: rgb(var(--link-color));
| |
| text-decoration: none; | |
| }
| |
| | |
| .toc a:hover, #toc a:hover {
| |
| color: rgb(var(--hover-link-color));
| |
| text-decoration: underline; | |
| }
| |
| | |
| .tocnumber {
| |
| color: #666;
| |
| margin-right: 5px;
| |
| }
| |
| | |
| /* 变色龙皮肤特定修复 */ | |
| .chameleon-toc {
| |
| background-color: rgb(var(--xp-window-bg)); | |
| border: 2px solid rgb(var(--xp-window-border));
| |
| box-shadow: var(--window-shadow);
| |
| padding: 30px 10px 10px;
| |
| position: relative;
| |
| border-radius: 0;
| |
| }
| |
| | |
| .chameleon-toc::before {
| |
| content: "Contents";
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| color: white;
| |
| padding: 5px 10px;
| |
| font-weight: bold;
| |
| text-shadow: var(--text-shadow);
| |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| |
| text-align: left;
| |
| height: 15px;
| |
| line-height: 15px;
| |
| font-size: 12px;
| |
| }
| |
| | |
| .chameleon-toc::after {
| |
| content: "×";
| |
| position: absolute;
| |
| top: 2px;
| |
| right: 5px;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-color: #ff6347;
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| text-align: center;
| |
| line-height: 16px;
| |
| font-size: 12px;
| |
| color: white;
| |
| cursor: pointer;
| |
| z-index: 1;
| |
| }
| |
| | |
| .chameleon-toc .toctitle {
| |
| display: none;
| |
| }
| |
| | |
| /* Echo扩展通知图标修复 */ | |
| #pt-notifications-alert,
| |
| #pt-notifications-notice,
| |
| .mw-echo-notifications-badge,
| |
| .mw-echo-notification-badge-nojs {
| |
| background-color: transparent !important;
| |
| border: none !important;
| |
| }
| |
| | |
| #pt-notifications-alert .mw-echo-notifications-badge:before,
| |
| #pt-notifications-notice .mw-echo-notifications-badge:before,
| |
| .mw-echo-notifications-badge:before {
| |
| color: rgb(var(--link-color)) !important;
| |
| filter: none !important; | |
| opacity: 1 !important;
| |
| }
| |
| | |
| .mw-echo-notifications-badge:after,
| |
| .mw-echo-notification-badge-nojs:after {
| |
| background-color: #ff6347 !important;
| |
| color: white !important;
| |
| border: 1px solid rgb(var(--xp-window-border)) !important;
| |
| opacity: 1 !important;
| |
| }
| |
| | |
| /* 通知面板样式 */
| |
| .mw-echo-ui-overlay,
| |
| .mw-echo-ui-notificationsWidget {
| |
| background-color: rgb(var(--xp-window-bg)) !important;
| |
| border: 2px solid rgb(var(--xp-window-border)) !important;
| |
| box-shadow: var(--window-shadow) !important;
| |
| border-radius: 0 !important;
| |
| }
| |
| | |
| .mw-echo-ui-notificationItemWidget {
| |
| background-color: white !important;
| |
| border-bottom: 1px solid #ababab !important;
| |
| color: black !important;
| |
| }
| |
| | |
| .mw-echo-ui-notificationItemWidget:hover {
| |
| background-color: #f0f0f0 !important;
| |
| }
| |
| | |
| .mw-echo-ui-notificationItemWidget-content-message-header {
| |
| color: rgb(var(--xp-blue-dark)) !important;
| |
| }
| |
| | |
| .mw-echo-ui-notificationItemWidget-content-message-body {
| |
| color: black !important;
| |
| }
| |
| | |
| | |
| /* Windows XP启动栏和任务栏 */
| |
| body::after {
| |
| content: "开始";
| |
| position: fixed;
| |
| left: 0;
| |
| bottom: 30px;
| |
| width: 100px;
| |
| height: 30px;
| |
| background: linear-gradient(to bottom, #4cae4c, #398439);
| |
| color: white;
| |
| text-align: center;
| |
| line-height: 30px;
| |
| font-weight: bold;
| |
| border-radius: 0 5px 5px 0;
| |
| z-index: 9999;
| |
| cursor: pointer;
| |
| border: 1px solid #366;
| |
| border-left: none;
| |
| box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
| |
| padding-left: 30px;
| |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E");
| |
| background-repeat: no-repeat; | |
| background-position: 5px center; | |
| background-size: 20px 20px;
| |
| }
| |
| | |
| body::before {
| |
| content: "";
| |
| position: fixed;
| |
| left: 0;
| |
| bottom: 0;
| |
| width: 100%;
| |
| height: 30px;
| |
| background: linear-gradient(to bottom, #4581c8, #2f5b9d);
| |
| border-top: 1px solid #223f6f; | |
| z-index: 9998;
| |
| }
| |
| | |
| /* 响应式调整 */
| |
| @media (max-width: 767px) {
| |
| .tools-container {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| | | |
| .recent-pages-container .page-section, | | // 添加时钟 |
| .featured-content-container .feature-item { | | var $clock = $('<div class="taskbar-clock"></div>'); |
| flex-basis: 100%;
| | $systemTray.append($clock); |
| margin-bottom: 15px;
| |
| }
| |
| | | |
| body::after { | | $taskbar.append($systemTray); |
| width: 80px;
| |
| font-size: 12px;
| |
| }
| |
| }
| |
| | |
| /* Windows XP蓝屏风格 */
| |
| .bluescreen {
| |
| background-color: #0000aa;
| |
| color: #ffffff;
| |
| font-family: "Courier New", monospace;
| |
| padding: 20px;
| |
| margin: 10px 0;
| |
| border: 2px solid #000055;
| |
| box-shadow: var(--window-shadow);
| |
| position: relative;
| |
| }
| |
| | |
| .bluescreen h2 {
| |
| color: #ffffff;
| |
| background: none;
| |
| border: none;
| |
| margin-top: 10px;
| |
| margin-bottom: 20px;
| |
| font-size: 1.5em;
| |
| text-shadow: none;
| |
| }
| |
| | |
| .bluescreen p {
| |
| margin: 10px 0;
| |
| line-height: 1.5;
| |
| }
| |
| | |
| .bluescreen code {
| |
| background-color: #0000aa;
| |
| border: none;
| |
| color: #ffffff;
| |
| display: block;
| |
| margin: 10px 0;
| |
| font-family: "Courier New", monospace;
| |
| }
| |
| | |
| /* 标题栏文本 */
| |
| .titlebox {
| |
| color: white;
| |
| position: relative;
| |
| top: -16px;
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| padding: 5px 20px;
| |
| line-height: 10px;
| |
| font-weight: bold;
| |
| text-shadow: var(--text-shadow);
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| display: inline-block;
| |
| }
| |
| | |
| /* Windows XP Logo风格块 */
| |
| .logoblock {
| |
| padding: 30px 10px 10px;
| |
| color: black;
| |
| box-shadow: var(--window-shadow);
| |
| margin: 10px 0;
| |
| display: block;
| |
| position: relative;
| |
| background-color: rgb(var(--xp-window-bg));
| |
| border: 2px solid rgb(var(--xp-window-border));
| |
| border-radius: 0;
| |
| }
| |
| | |
| .logoblock::before {
| |
| content: "Windows";
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| color: white;
| |
| padding: 5px 10px;
| |
| font-weight: bold;
| |
| text-shadow: var(--text-shadow);
| |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| |
| text-align: left;
| |
| height: 15px;
| |
| line-height: 15px;
| |
| font-size: 12px;
| |
| }
| |
| | |
| .logoblock::after {
| |
| content: "";
| |
| float: center;
| |
| border: solid 2px #0000;
| |
| background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230078d7' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E") center/70% no-repeat;
| |
| opacity: 0.7;
| |
| top: 0;
| |
| left: 0;
| |
| bottom: 0;
| |
| right: 0;
| |
| position: absolute;
| |
| z-index: 1;
| |
| }
| |
| | |
| /* Windows XP错误对话框 */
| |
| .error-dialog {
| |
| background-color: rgb(var(--xp-window-bg));
| |
| border: 2px solid rgb(var(--xp-window-border));
| |
| padding: 30px 10px 10px;
| |
| margin: 10px 0;
| |
| position: relative;
| |
| box-shadow: var(--window-shadow);
| |
| border-radius: 0;
| |
| }
| |
| | |
| .error-dialog::before {
| |
| content: "Error";
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| color: white;
| |
| padding: 5px 10px;
| |
| font-weight: bold;
| |
| text-shadow: var(--text-shadow);
| |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| |
| text-align: left;
| |
| height: 15px;
| |
| line-height: 15px;
| |
| font-size: 12px;
| |
| }
| |
| | |
| .error-dialog::after {
| |
| content: "×";
| |
| position: absolute;
| |
| top: 2px;
| |
| right: 5px;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-color: #ff6347;
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| text-align: center;
| |
| line-height: 16px;
| |
| font-size: 12px;
| |
| color: white;
| |
| cursor: pointer;
| |
| z-index: 1;
| |
| }
| |
| | |
| .error-dialog .icon {
| |
| float: left;
| |
| margin-right: 10px;
| |
| width: 32px;
| |
| height: 32px;
| |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ff0000'/%3E%3Cpath d='M12 6v8M12 16v2' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
| |
| background-repeat: no-repeat;
| |
| background-size: contain;
| |
| }
| |
| | |
| .error-dialog .message {
| |
| margin-left: 50px;
| |
| font-weight: bold;
| |
| }
| |
| | |
| .error-dialog .buttons {
| |
| text-align: right;
| |
| margin-top: 15px;
| |
| }
| |
| | |
| .error-dialog .buttons button {
| |
| background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
| |
| border: 1px solid #ababab;
| |
| padding: 3px 10px;
| |
| margin-left: 5px;
| |
| cursor: pointer;
| |
| }
| |
| | |
| .error-dialog .buttons button:hover {
| |
| background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
| |
| }
| |
| | |
| /* JS添加功能 */
| |
| .JS-added-button {
| |
| display: none; /* 由JS控制显示 */
| |
| position: fixed;
| |
| right: 10px;
| |
| bottom: 40px;
| |
| background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
| |
| border: 1px solid #ababab;
| |
| padding: 5px 10px;
| |
| cursor: pointer;
| |
| z-index: 9999;
| |
| box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
| |
| }
| |
| | |
| .JS-added-button:hover {
| |
| background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
| |
| }
| |
| | |
| /* 创建一个窗口最小化图标,显示在任务栏中 */
| |
| .minimized-window {
| |
| position: fixed;
| |
| left: 110px;
| |
| bottom: 0;
| |
| height: 30px;
| |
| padding: 0 10px;
| |
| background: linear-gradient(to bottom, #67a9e0, #3a84c5);
| |
| color: white;
| |
| line-height: 30px;
| |
| font-size: 12px;
| |
| z-index: 9999;
| |
| cursor: pointer;
| |
| border-top: 1px solid #81bdeb;
| |
| border-left: 1px solid #81bdeb;
| |
| border-right: 1px solid #25619a;
| |
| max-width: 150px;
| |
| white-space: nowrap;
| |
| overflow: hidden;
| |
| text-overflow: ellipsis;
| |
| }
| |
| | |
| .minimized-window:hover {
| |
| background: linear-gradient(to bottom, #81bdeb, #67a9e0);
| |
| }
| |
| | |
| /* 添加系统时钟到任务栏 */
| |
| .taskbar-clock {
| |
| position: fixed;
| |
| right: 10px;
| |
| bottom: 0;
| |
| height: 30px;
| |
| padding: 0 10px;
| |
| background: transparent;
| |
| color: white;
| |
| line-height: 30px;
| |
| font-size: 12px;
| |
| z-index: 9999;
| |
| }
| |
| | |
| /* CommonJS功能 */
| |
| /* 这些样式将由JavaScript功能使用 */d-content-container {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: space-between;
| |
| width: 100%;
| |
| }
| |
| | |
| .featured-content-container .feature-item { | |
| flex-basis: 48%;
| |
| background-color: rgb(var(--xp-window-bg));
| |
| border: 2px solid rgb(var(--xp-window-border));
| |
| box-shadow: var(--window-shadow);
| |
| margin-bottom: 1rem;
| |
| display: grid;
| |
| grid-template-areas: "title" "content" "more";
| |
| grid-template-rows: auto 1fr auto;
| |
| position: relative;
| |
| border-radius: 0;
| |
| }
| |
| | |
| .featured-content-container .section-title {
| |
| grid-area: title;
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| color: white;
| |
| padding: 5px 30px 5px 10px;
| |
| font-weight: bold;
| |
| text-shadow: var(--text-shadow);
| |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| |
| position: relative;
| |
| text-align: left;
| |
| height: 25px;
| |
| line-height: 25px;
| |
| border-left: none;
| |
| }
| |
| | |
| .featured-content-container .section-title::after {
| |
| content: "×";
| |
| position: absolute;
| |
| top: 5px;
| |
| right: 5px;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-color: #ff6347;
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| text-align: center;
| |
| line-height: 16px;
| |
| font-size: 12px;
| |
| color: white;
| |
| cursor: pointer;
| |
| z-index: 1;
| |
| }
| |
| | |
| .featured-content-container .feature-content {
| |
| grid-area: content;
| |
| background-color: white;
| |
| padding: 10px;
| |
| border-bottom: 1px solid #ababab;
| |
| }
| |
| | |
| .featured-content-container .feature-content .featured-title {
| |
| font-size: 1.2rem;
| |
| font-weight: bold;
| |
| margin-bottom: 5px;
| |
| color: rgb(var(--xp-blue-dark));
| |
| }
| |
| | |
| .featured-content-container .feature-content .featured-author {
| |
| font-size: 0.9rem;
| |
| color: #666;
| |
| margin-bottom: 5px;
| |
| }
| |
| | |
| .featured-content-container .feature-content .featured-description {
| |
| font-style: italic;
| |
| color: #444;
| |
| }
| |
| | |
| .featured-content-container .see-more {
| |
| grid-area: more;
| |
| background-color: #f0f0f0;
| |
| padding: 5px 10px;
| |
| text-align: right;
| |
| }
| |
| | |
| .featured-content-container .see-more a {
| |
| color: rgb(var(--link-color));
| |
| }
| |
| | |
| /* 工具和资源容器 - Windows XP风格 */
| |
| .tools-and-resources {
| |
| margin-bottom: 2rem;
| |
| }
| |
| | |
| .tools-container {
| |
| display: grid;
| |
| grid-template-columns: 1fr 1fr;
| |
| grid-gap: 1rem;
| |
| }
| |
| | |
| .tools-container .tool-item {
| |
| background-color: rgb(var(--xp-window-bg));
| |
| border: 2px solid rgb(var(--xp-window-border));
| |
| box-shadow: var(--window-shadow);
| |
| padding: 30px 10px 10px;
| |
| display: grid;
| |
| grid-template-areas:
| |
| "icon content"
| |
| "title content";
| |
| grid-template-columns: max-content 1fr;
| |
| grid-template-rows: auto auto;
| |
| grid-gap: 0.5rem 1rem;
| |
| position: relative;
| |
| border-radius: 0;
| |
| }
| |
| | |
| .tools-container .tool-item::before {
| |
| content: "Tool";
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| color: white;
| |
| padding: 5px 10px;
| |
| font-weight: bold;
| |
| text-shadow: var(--text-shadow);
| |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| |
| text-align: left;
| |
| height: 15px;
| |
| line-height: 15px;
| |
| font-size: 12px;
| |
| }
| |
| | |
| .tools-container .tool-item::after {
| |
| content: "×";
| |
| position: absolute;
| |
| top: 2px;
| |
| right: 5px;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-color: #ff6347;
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| text-align: center;
| |
| line-height: 16px;
| |
| font-size: 12px;
| |
| color: white;
| |
| cursor: pointer;
| |
| z-index: 1;
| |
| }
| |
| | |
| .tools-container .tool-item .tool-icon {
| |
| grid-area: icon;
| |
| justify-self: center;
| |
| align-self: center;
| |
| background-color: white;
| |
| border: 1px solid #ababab;
| |
| padding: 5px;
| |
| }
| |
| | |
| .tools-container .tool-item .tool-title {
| |
| grid-area: title;
| |
| text-align: center;
| |
| }
| |
| | |
| .tools-container .tool-item .tool-title a {
| |
| color: rgb(var(--link-color));
| |
| font-weight: bold;
| |
| }
| |
| | |
| .tools-container .tool-item .tool-description {
| |
| grid-area: content;
| |
| background-color: white;
| |
| border: 1px solid #ababab;
| |
| padding: 8px;
| |
| }
| |
| | |
| /* 新闻容器 - Windows XP风格 */
| |
| .news-container {
| |
| background-color: rgb(var(--xp-window-bg));
| |
| border: 2px solid rgb(var(--xp-window-border));
| |
| box-shadow: var(--window-shadow);
| |
| margin-bottom: 2rem;
| |
| position: relative;
| |
| border-radius: 0;
| |
| }
| |
| | |
| .news-container .section-title {
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| color: white;
| |
| padding: 5px 30px 5px 10px;
| |
| font-weight: bold;
| |
| text-shadow: var(--text-shadow);
| |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| |
| position: relative;
| |
| text-align: left;
| |
| width: 100%;
| |
| border-left: none;
| |
| }
| |
| | |
| .news-container .section-title::after {
| |
| content: "×";
| |
| position: absolute;
| |
| top: 5px;
| |
| right: 5px;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-color: #ff6347;
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| text-align: center;
| |
| line-height: 16px;
| |
| font-size: 12px;
| |
| color: white;
| |
| cursor: pointer;
| |
| z-index: 1;
| |
| }
| |
| | |
| .news-container .news-content {
| |
| background-color: white;
| |
| padding: 10px;
| |
| width: 100%;
| |
| border-bottom: 1px solid #ababab;
| |
| }
| |
| | |
| .news-container .news-content .news-item {
| |
| border-bottom: 1px solid #e0e0e0;
| |
| padding: 5px 0;
| |
| }
| |
| | |
| .news-container .news-content .news-item:last-child {
| |
| border-bottom: none;
| |
| }
| |
| | |
| .news-container .news-content .news-title {
| |
| font-weight: bold;
| |
| margin-bottom: 3px;
| |
| color: rgb(var(--xp-blue-dark));
| |
| }
| |
| | |
| .news-container .news-content .news-date {
| |
| font-size: 0.8rem;
| |
| color: #666;
| |
| margin-bottom: 3px;
| |
| }
| |
| | |
| .news-container .news-archive {
| |
| background-color: #f0f0f0;
| |
| padding: 5px 10px;
| |
| text-align: right;
| |
| width: 100%;
| |
| }
| |
| | |
| .news-container .news-archive a {
| |
| color: rgb(var(--link-color));
| |
| }
| |
| | |
| /* 响应式调整 */
| |
| @media (max-width: 767px) {
| |
| .tools-container {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| | | |
| .recent-pages-container .page-section, | | // 添加到页面 |
| .featured-content-container .feature-item { | | $('body').append($taskbar); |
| flex-basis: 100%;
| |
| margin-bottom: 15px;
| |
| }
| |
| | | |
| body::after { | | // 启动时钟 |
| width: 80px;
| | updateClock($clock); |
| font-size: 12px;
| |
| }
| |
| }
| |
| | |
| /* Windows XP蓝屏风格 */
| |
| .bluescreen {
| |
| background-color: #0000aa;
| |
| color: #ffffff;
| |
| font-family: "Courier New", monospace;
| |
| padding: 20px;
| |
| margin: 10px 0;
| |
| border: 2px solid #000055;
| |
| box-shadow: var(--window-shadow);
| |
| position: relative;
| |
| }
| |
| | |
| .bluescreen h2 {
| |
| color: #ffffff;
| |
| background: none;
| |
| border: none;
| |
| margin-top: 10px;
| |
| margin-bottom: 20px;
| |
| font-size: 1.5em;
| |
| text-shadow: none;
| |
| }
| |
| | |
| .bluescreen p {
| |
| margin: 10px 0;
| |
| line-height: 1.5;
| |
| }
| |
| | |
| .bluescreen code {
| |
| background-color: #0000aa;
| |
| border: none;
| |
| color: #ffffff;
| |
| display: block;
| |
| margin: 10px 0;
| |
| font-family: "Courier New", monospace;
| |
| }
| |
| | |
| /* 标题栏文本 */
| |
| .titlebox {
| |
| color: white;
| |
| position: relative;
| |
| top: -16px;
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| padding: 5px 20px;
| |
| line-height: 10px;
| |
| font-weight: bold;
| |
| text-shadow: var(--text-shadow);
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| display: inline-block;
| |
| }
| |
| | |
| /* Windows XP Logo风格块 */
| |
| .logoblock {
| |
| padding: 30px 10px 10px;
| |
| color: black;
| |
| box-shadow: var(--window-shadow);
| |
| margin: 10px 0;
| |
| display: block;
| |
| position: relative;
| |
| background-color: rgb(var(--xp-window-bg));
| |
| border: 2px solid rgb(var(--xp-window-border));
| |
| border-radius: 0;
| |
| }
| |
| | |
| .logoblock::before {
| |
| content: "Windows";
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| color: white;
| |
| padding: 5px 10px;
| |
| font-weight: bold;
| |
| text-shadow: var(--text-shadow);
| |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| |
| text-align: left;
| |
| height: 15px;
| |
| line-height: 15px;
| |
| font-size: 12px;
| |
| }
| |
| | |
| .logoblock::after {
| |
| content: "";
| |
| float: center;
| |
| border: solid 2px #0000;
| |
| background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230078d7' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E") center/70% no-repeat;
| |
| opacity: 0.7;
| |
| top: 0;
| |
| left: 0;
| |
| bottom: 0;
| |
| right: 0;
| |
| position: absolute;
| |
| z-index: 1;
| |
| }
| |
| | |
| /* Windows XP错误对话框 */
| |
| .error-dialog {
| |
| background-color: rgb(var(--xp-window-bg));
| |
| border: 2px solid rgb(var(--xp-window-border));
| |
| padding: 30px 10px 10px;
| |
| margin: 10px 0;
| |
| position: relative;
| |
| box-shadow: var(--window-shadow);
| |
| border-radius: 0;
| |
| }
| |
| | |
| .error-dialog::before {
| |
| content: "Error";
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| color: white;
| |
| padding: 5px 10px;
| |
| font-weight: bold;
| |
| text-shadow: var(--text-shadow);
| |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| |
| text-align: left;
| |
| height: 15px;
| |
| line-height: 15px;
| |
| font-size: 12px;
| |
| }
| |
| | |
| .error-dialog::after {
| |
| content: "×";
| |
| position: absolute;
| |
| top: 2px;
| |
| right: 5px;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-color: #ff6347;
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| text-align: center;
| |
| line-height: 16px;
| |
| font-size: 12px;
| |
| color: white;
| |
| cursor: pointer;
| |
| z-index: 1;
| |
| }
| |
| | |
| .error-dialog .icon {
| |
| float: left;
| |
| margin-right: 10px;
| |
| width: 32px;
| |
| height: 32px;
| |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ff0000'/%3E%3Cpath d='M12 6v8M12 16v2' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
| |
| background-repeat: no-repeat;
| |
| background-size: contain;
| |
| }
| |
| | |
| .error-dialog .message {
| |
| margin-left: 50px;
| |
| font-weight: bold;
| |
| }
| |
| | |
| .error-dialog .buttons {
| |
| text-align: right;
| |
| margin-top: 15px;
| |
| }
| |
| | |
| .error-dialog .buttons button {
| |
| background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
| |
| border: 1px solid #ababab;
| |
| padding: 3px 10px;
| |
| margin-left: 5px;
| |
| cursor: pointer;
| |
| }
| |
| | |
| .error-dialog .buttons button:hover {
| |
| background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
| |
| }
| |
| | |
| /* JS添加功能 */
| |
| .JS-added-button {
| |
| display: none; /* 由JS控制显示 */
| |
| position: fixed;
| |
| right: 10px;
| |
| bottom: 40px;
| |
| background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
| |
| border: 1px solid #ababab;
| |
| padding: 5px 10px;
| |
| cursor: pointer;
| |
| z-index: 9999;
| |
| box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
| |
| }
| |
| | |
| .JS-added-button:hover {
| |
| background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
| |
| }
| |
| | |
| /* 创建一个窗口最小化图标,显示在任务栏中 */
| |
| .minimized-window {
| |
| position: fixed;
| |
| left: 110px;
| |
| bottom: 0;
| |
| height: 30px;
| |
| padding: 0 10px;
| |
| background: linear-gradient(to bottom, #67a9e0, #3a84c5);
| |
| color: white;
| |
| line-height: 30px;
| |
| font-size: 12px;
| |
| z-index: 9999;
| |
| cursor: pointer;
| |
| border-top: 1px solid #81bdeb;
| |
| border-left: 1px solid #81bdeb;
| |
| border-right: 1px solid #25619a;
| |
| max-width: 150px;
| |
| white-space: nowrap;
| |
| overflow: hidden;
| |
| text-overflow: ellipsis;
| |
| }
| |
| | |
| .minimized-window:hover {
| |
| background: linear-gradient(to bottom, #81bdeb, #67a9e0);
| |
| }
| |
| | |
| /* 添加系统时钟到任务栏 */
| |
| .taskbar-clock {
| |
| position: fixed;
| |
| right: 10px;
| |
| bottom: 0;
| |
| height: 30px;
| |
| padding: 0 10px;
| |
| background: transparent;
| |
| color: white;
| |
| line-height: 30px;
| |
| font-size: 12px;
| |
| z-index: 9999;
| |
| }
| |
| /* 导航框(查论编)- Windows XP风格 */
| |
| table.navbox {
| |
| border: 2px solid rgb(var(--xp-window-border));
| |
| clear: both;
| |
| margin: 1em auto;
| |
| padding: 0;
| |
| text-align: center;
| |
| width: 100%;
| |
| background-color: rgb(var(--xp-window-bg));
| |
| box-shadow: var(--window-shadow);
| |
| border-collapse: separate;
| |
| border-spacing: 0;
| |
| border-radius: 0;
| |
| }
| |
| | |
| .navbox-title,
| |
| .navbox-abovebelow,
| |
| table.navbox th {
| |
| background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
| |
| color: white;
| |
| padding: 5px 10px;
| |
| text-align: center;
| |
| font-weight: bold;
| |
| text-shadow: var(--text-shadow);
| |
| border-bottom: 1px solid rgb(var(--xp-window-border));
| |
| position: relative;
| |
| }
| |
| | |
| .navbox-title::after,
| |
| table.navbox th::after {
| |
| content: "×";
| |
| position: absolute;
| |
| top: 2px;
| |
| right: 5px;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-color: #ff6347;
| |
| border: 1px solid rgb(var(--xp-window-border));
| |
| text-align: center;
| |
| line-height: 16px;
| |
| font-size: 12px;
| |
| color: white;
| |
| cursor: pointer;
| |
| z-index: 1;
| |
| }
| |
| | |
| .navbox-group {
| |
| background-color: #f0f0f0;
| |
| border: 1px solid #ababab;
| |
| color: black;
| |
| font-weight: bold;
| |
| padding: 5px;
| |
| text-align: right;
| |
| white-space: nowrap;
| |
| }
| |
| | |
| .navbox-list {
| |
| background-color: white;
| |
| border: 1px solid #ababab;
| |
| padding: 5px;
| |
| text-align: left;
| |
| }
| |
| | |
| /* 修复开始按钮 - 实际元素而非伪元素 */ | |
| .start-button {
| |
| position: fixed;
| |
| left: 0;
| |
| bottom: 30px;
| |
| width: 100px;
| |
| height: 30px; | |
| background: linear-gradient(to bottom, #4cae4c, #398439);
| |
| color: white;
| |
| text-align: center;
| |
| line-height: 30px;
| |
| font-weight: bold;
| |
| border-radius: 0 5px 5px 0;
| |
| z-index: 9999;
| |
| cursor: pointer;
| |
| border: 1px solid #366;
| |
| border-left: none;
| |
| box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
| |
| padding-left: 30px;
| |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E");
| |
| background-repeat: no-repeat;
| |
| background-position: 5px center;
| |
| background-size: 20px 20px;
| |
| }
| |
| | |
| /* 修复开始菜单样式 */
| |
| #xp-start-menu {
| |
| position: fixed !important;
| |
| left: 0 !important;
| |
| bottom: 60px !important;
| |
| width: 250px !important;
| |
| background-color: white !important;
| |
| border: 2px solid #0054e3 !important;
| |
| box-shadow: 2px -2px 5px rgba(0, 0, 0, 0.3) !important;
| |
| z-index: 10000 !important;
| |
| display: none;
| |
| }
| |
| | |
| .start-menu-top {
| |
| height: 60px !important;
| |
| background: linear-gradient(to bottom, #235ddc, #225ada 50%, #214fbb) !important;
| |
| color: white !important;
| |
| padding: 10px !important;
| |
| font-weight: bold !important;
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| }
| |
| | |
| .start-menu-items {
| |
| background-color: white !important;
| |
| padding: 5px 0 !important;
| |
| }
| |
| | |
| .start-menu-item {
| |
| padding: 5px 10px !important;
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| cursor: pointer !important;
| |
| }
| |
| | |
| .start-menu-item:hover {
| |
| background-color: #e0ecff !important;
| |
| }
| |
| | |
| /* 修复下拉菜单 */
| |
| .dropdown-menu {
| |
| display: none;
| |
| position: absolute;
| |
| background-color: rgb(var(--xp-window-bg)) !important;
| |
| border: 1px solid rgb(var(--xp-window-border)) !important;
| |
| box-shadow: var(--window-shadow) !important;
| |
| border-radius: 0 !important;
| |
| z-index: 1000;
| |
| }
| |
| | |
| .dropdown.open .dropdown-menu,
| |
| .dropdown:hover .dropdown-menu,
| |
| .nav-item.dropdown:hover .dropdown-menu {
| |
| display: block !important;
| |
| }
| |
| | |
| /* 修复2: 下拉菜单位置 */
| |
| #p-personal .vector-menu-content,
| |
| .vector-user-menu .vector-menu-content,
| |
| .vector-menu-dropdown .vector-menu-content {
| |
| right: 0 !important;
| |
| left: auto !important;
| |
| }
| |
| | |
| /* 确保下拉菜单不会超出屏幕 */
| |
| .dropdown-menu {
| |
| right: 0 !important;
| |
| left: auto !important;
| |
| }
| |
| | |
| #p-personal {
| |
| position: relative !important;
| |
| }
| |
| | |
| /* 修复3: 时钟显示问题 */
| |
| /* 隐藏时钟图标 */
| |
| .oo-ui-icon-clock:before,
| |
| .mw-ui-icon-clock:before,
| |
| #pt-watchlist .mw-ui-icon:before {
| |
| display: none !important;
| |
| }
| |
| | |
| /* 重新设置时钟样式,确保不会重叠 */
| |
| .taskbar-clock {
| |
| position: fixed !important;
| |
| right: 10px !important;
| |
| bottom: 5px !important;
| |
| height: 20px !important;
| |
| padding: 0 8px !important;
| |
| background-color: rgba(0, 0, 0, 0.1) !important;
| |
| color: white !important;
| |
| font-weight: bold !important;
| |
| line-height: 20px !important;
| |
| font-size: 14px !important;
| |
| z-index: 10000 !important;
| |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
| |
| border-radius: 3px !important;
| |
| font-family: "Segoe UI", Tahoma, sans-serif !important;
| |
| }
| |
| | |
| /* 修复4: 开始按钮背景 */
| |
| .start-button {
| |
| position: fixed !important;
| |
| left: 0 !important;
| |
| bottom: 30px !important;
| |
| width: 100px !important;
| |
| height: 30px !important;
| |
| background: linear-gradient(to bottom, #4cae4c, #398439) !important;
| |
| color: white !important;
| |
| text-align: center !important;
| |
| line-height: 30px !important;
| |
| font-weight: bold !important;
| |
| border-radius: 0 5px 5px 0 !important;
| |
| z-index: 9999 !important;
| |
| cursor: pointer !important;
| |
| border: 1px solid #366 !important;
| |
| border-left: none !important;
| |
| box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3) !important;
| |
| padding-left: 30px !important;
| |
| font-family: "Segoe UI", Tahoma, sans-serif !important;
| |
| }
| |
| | |
| .start-button::before {
| |
| content: "" !important;
| |
| position: absolute !important;
| |
| left: 5px !important;
| |
| top: 50% !important;
| |
| transform: translateY(-50%) !important;
| |
| width: 20px !important;
| |
| height: 20px !important;
| |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E") !important;
| |
| background-repeat: no-repeat !important;
| |
| background-position: center !important;
| |
| background-size: contain !important;
| |
| }
| |
| | |
| /* 修复底部任务栏,使开始按钮正确显示 */
| |
| body::before {
| |
| content: "" !important;
| |
| position: fixed !important;
| |
| left: 0 !important;
| |
| bottom: 0 !important;
| |
| width: 100% !important;
| |
| height: 30px !important;
| |
| background: linear-gradient(to bottom, #3367d1, #2851a3) !important;
| |
| border-top: 1px solid #4a78d8 !important;
| |
| z-index: 9998 !important;
| |
| }
| |
| | |
| | |
| | |
| | |
| /* 调整用户链接的padding */
| |
| #pt-userpage > a,
| |
| .vector-user-menu-legacy #pt-userpage a,
| |
| #p-personal #pt-userpage a,
| |
| .skin-chameleon .navbar-tools > li:first-child > a {
| |
| padding-right: 45px !important; /* 改为右侧padding */
| |
| padding-left: 10px !important;
| |
| position: relative !important;
| |
| display: inline-block !important;
| |
| }
| |
| | |
| /* 修复2: 响应式问题 - 变色龙皮肤的折叠按钮 */
| |
| .navbar-toggler {
| |
| display: block !important;
| |
| background: linear-gradient(to bottom, #f6f6f6, #e0e0e0) !important;
| |
| border: 1px solid #ababab !important;
| |
| margin: 5px !important;
| |
| cursor: pointer !important;
| |
| }
| |
| | |
| .navbar-toggle {
| |
| display: block !important;
| |
| position: relative !important;
| |
| z-index: 1001 !important;
| |
| }
| |
| | |
| /* 确保折叠菜单可以正常工作 */
| |
| .navbar-collapse {
| |
| background-color: rgb(var(--xp-window-bg)) !important;
| |
| border: 1px solid rgb(var(--xp-window-border)) !important;
| |
| } | | } |
|
| |
|
| @media (max-width: 768px) {
| | // 更新时钟 |
| .navbar-collapse {
| | function updateClock($clock) { |
| position: absolute !important;
| | function update() { |
| top: 100% !important;
| | var now = new Date(); |
| left: 0 !important;
| | var hours = now.getHours(); |
| right: 0 !important;
| | var minutes = now.getMinutes(); |
| z-index: 1000 !important;
| | |
| }
| | // 格式化时间 |
| }
| | hours = (hours < 10 ? '0' : '') + hours; |
| | | minutes = (minutes < 10 ? '0' : '') + minutes; |
| /* 修复3: 移除之前的开始按钮伪元素 */ | | |
| body::after {
| | $clock.text(hours + ':' + minutes); |
| display: none !important;
| |
| }
| |
| | |
| /* 修复4: 时钟样式完善 */
| |
| .taskbar-clock {
| |
| position: fixed !important; | |
| right: 10px !important;
| |
| bottom: 5px !important;
| |
| height: 20px !important;
| |
| line-height: 20px !important;
| |
| padding: 0 8px !important;
| |
| background-color: transparent !important;
| |
| color: white !important;
| |
| font-weight: normal !important;
| |
| font-size: 13px !important;
| |
| font-family: "Tahoma", "Microsoft Sans Serif", sans-serif !important;
| |
| z-index: 10000 !important;
| |
| text-shadow: none !important;
| |
| }
| |
| | |
| /* 完全隐藏时钟图标 */
| |
| .oo-ui-icon-clock,
| |
| .mw-ui-icon-clock,
| |
| #pt-watchlist .mw-ui-icon,
| |
| .mw-watchlink .mw-ui-icon::before {
| |
| display: none !important;
| |
| }
| |
| | |
| /* 修复5: 完善底部任务栏 */
| |
| .taskbar {
| |
| position: fixed !important;
| |
| left: 0 !important;
| |
| bottom: 0 !important;
| |
| width: 100% !important;
| |
| height: 30px !important;
| |
| background: linear-gradient(to bottom, #3367d1, #2851a3) !important;
| |
| border-top: 1px solid #4a78d8 !important;
| |
| z-index: 9998 !important;
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| }
| |
| | |
| /* 任务栏内容区域 */
| |
| .taskbar-content {
| |
| flex: 1 !important;
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| padding: 0 10px !important;
| |
| }
| |
| | |
| /* 快速启动栏 */
| |
| .quick-launch {
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| padding: 0 5px !important;
| |
| border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
| |
| margin-right: 5px !important;
| |
| }
| |
| | |
| .quick-launch-icon {
| |
| width: 22px !important;
| |
| height: 22px !important;
| |
| margin: 0 2px !important;
| |
| cursor: pointer !important;
| |
| opacity: 0.8 !important;
| |
| transition: opacity 0.2s !important;
| |
| }
| |
| | |
| .quick-launch-icon:hover {
| |
| opacity: 1 !important;
| |
| }
| |
| | |
| /* 系统托盘区域 */
| |
| .system-tray {
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| padding: 0 5px !important;
| |
| border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
| |
| margin-left: auto !important;
| |
| }
| |
| /* 隐藏不必要的展开按钮 */
| |
| @media (min-width: 768px) {
| |
| .navbar-toggler,
| |
| .navbar-toggle,
| |
| .navbar-toggle-button {
| |
| display: none !important; | |
| }
| |
| }
| |
| | |
| /* 修复展开按钮样式和功能 */
| |
| .navbar-toggler,
| |
| .navbar-toggle { | |
| background: linear-gradient(to bottom, #f6f6f6, #e0e0e0) !important;
| |
| border: 1px solid #ababab !important;
| |
| outline: none !important;
| |
| cursor: pointer !important;
| |
| }
| |
| | |
| .navbar-collapse.collapse {
| |
| display: none !important;
| |
| }
| |
| | |
| .navbar-collapse.collapse.show {
| |
| display: block !important;
| |
| }
| |
| /* 修复头像位置 - 确保在用户按钮右上角 */ | |
| #pt-userpage > a::before,
| |
| .vector-user-menu-legacy #pt-userpage a::before,
| |
| #p-personal #pt-userpage a::before,
| |
| .skin-chameleon .navbar-tools > li:first-child > a::before {
| |
| content: "" !important;
| |
| position: absolute !important;
| |
| right: 0 !important;
| |
| top: 50% !important;
| |
| transform: translateY(-50%) translateX(100%) !important;
| |
| width: 32px !important;
| |
| height: 32px !important;
| |
| background-color: #f0f0f0 !important;
| |
| border: 2px solid #7f9db9 !important;
| |
| z-index: 100 !important;
| |
| background-size: cover !important;
| |
| background-position: center !important;
| |
| }
| |
| | |
| /* 确保用户链接有足够的空间 */
| |
| #pt-userpage > a,
| |
| .vector-user-menu-legacy #pt-userpage a,
| |
| #p-personal #pt-userpage a,
| |
| .skin-chameleon .navbar-tools > li:first-child > a {
| |
| position: relative !important;
| |
| margin-right: 40px !important;
| |
| }
| |
| /* 修复系统托盘布局 */
| |
| .system-tray {
| |
| position: fixed !important;
| |
| right: 10px !important;
| |
| bottom: 0 !important;
| |
| height: 30px !important;
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| gap: 10px !important;
| |
| padding: 0 5px !important;
| |
| z-index: 10000 !important;
| |
| }
| |
| | |
| /* 单独设置时钟样式 */
| |
| .taskbar-clock {
| |
| position: static !important;
| |
| color: white !important;
| |
| font-family: "Tahoma", sans-serif !important;
| |
| font-size: 13px !important;
| |
| line-height: 30px !important;
| |
| }
| |
| | |
| /* 移除重复的系统图标 */
| |
| .tray-icon { | |
| display: none !important;
| |
| }
| |
| /* 强制应用指定字体 */
| |
| * {
| |
| font-family: var(--body-font) !important;
| |
| }
| |
| | |
| body, html {
| |
| font-family: "VonwaonBitmap 16px", VT323, monospace !important;
| |
| }
| |
| | |
| /* 特别设置任务栏字体 */
| |
| .taskbar, .start-button, .taskbar-clock {
| |
| font-family: "Tahoma", "Microsoft Sans Serif", sans-serif !important;
| |
| }
| |
| /* 修复媒体查询 */
| |
| @media (max-width: 767px) {
| |
| .navbar-toggle, .navbar-toggler {
| |
| display: block !important;
| |
| } | | } |
| | | |
| .navbar-collapse { | | update(); |
| position: absolute !important;
| | setInterval(update, 1000); |
| top: 100% !important;
| |
| left: 0 !important;
| |
| right: 0 !important;
| |
| background: rgb(var(--xp-window-bg)) !important;
| |
| border: 1px solid rgb(var(--xp-window-border)) !important;
| |
| z-index: 1000 !important;
| |
| } | |
| }
| |
| | |
| /* 确保任务栏不与页面内容重叠 */
| |
| body {
| |
| padding-bottom: 40px !important;
| |
| }
| |
| | |
| #content {
| |
| margin-bottom: 40px !important;
| |
| }
| |
| /* 正确的头像显示方式 - 直接作为用户按钮的背景 */
| |
| #pt-userpage > a::before,
| |
| .vector-user-menu-legacy #pt-userpage a::before,
| |
| #p-personal #pt-userpage a::before,
| |
| .skin-chameleon .navbar-tools > li:first-child > a::before {
| |
| content: "" !important;
| |
| position: absolute !important;
| |
| left: 0 !important;
| |
| top: 50% !important;
| |
| transform: translateY(-50%) !important;
| |
| width: 24px !important;
| |
| height: 24px !important;
| |
| background-color: #f0f0f0 !important;
| |
| border: 1px solid #7f9db9 !important;
| |
| z-index: 100 !important;
| |
| background-size: cover !important;
| |
| background-position: center !important;
| |
| background-repeat: no-repeat !important;
| |
| }
| |
| | |
| /* 调整用户按钮文字位置 */
| |
| #pt-userpage > a,
| |
| .vector-user-menu-legacy #pt-userpage a,
| |
| #p-personal #pt-userpage a,
| |
| .skin-chameleon .navbar-tools > li:first-child > a {
| |
| padding-left: 30px !important;
| |
| position: relative !important;
| |
| }
| |
| | |
| /* 隐藏原始的用户图标 */
| |
| #pt-userpage .mw-ui-icon::before,
| |
| .mw-ui-icon-wikimedia-userAvatar::before,
| |
| .oo-ui-icon-userAvatar::before {
| |
| display: none !important;
| |
| }
| |
| /* 确保头像正确显示在用户按钮位置 */
| |
| #p-personal {
| |
| position: relative;
| |
| }
| |
| | |
| #pt-userpage {
| |
| position: relative;
| |
| }
| |
| | |
| /* 修复变色龙皮肤的菜单按钮 */
| |
| .navbar-toggler {
| |
| position: relative;
| |
| z-index: 1001;
| |
| background: linear-gradient(to bottom, #f6f6f6, #e0e0e0) !important;
| |
| border: 1px solid #ababab !important;
| |
| padding: 0.25rem 0.5rem !important;
| |
| }
| |
| | |
| .navbar-toggler-icon {
| |
| width: 1.5em;
| |
| height: 1.5em;
| |
| background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
| |
| }
| |
| | |
| /* 确保折叠菜单正常显示 */
| |
| .navbar-collapse {
| |
| position: absolute;
| |
| top: 100%;
| |
| left: 0;
| |
| right: 0;
| |
| background-color: rgb(var(--xp-window-bg)) !important;
| |
| border: 1px solid rgb(var(--xp-window-border)) !important;
| |
| z-index: 1000;
| |
| display: none;
| |
| }
| |
| | |
| .navbar-collapse.show {
| |
| display: block !important;
| |
| }
| |
| | |
| /* 修复Echo通知位置 */
| |
| #pt-notifications-alert,
| |
| #pt-notifications-notice {
| |
| margin-right: 10px;
| |
| }
| |
| | |
| /* 隐藏多余的图标 */
| |
| .mw-echo-notification-badge-nojs {
| |
| display: none !important;
| |
| }
| |
| /* 正确的头像显示方式 - 直接覆盖用户按钮图标 */
| |
| #pt-userpage > a::before,
| |
| .vector-user-menu-legacy #pt-userpage a::before,
| |
| #p-personal #pt-userpage a::before,
| |
| .skin-chameleon .navbar-tools > li:first-child > a::before {
| |
| content: "" !important;
| |
| position: absolute !important;
| |
| left: 0 !important;
| |
| top: 50% !important;
| |
| transform: translateY(-50%) !important;
| |
| width: 24px !important;
| |
| height: 24px !important;
| |
| background-color: #f0f0f0 !important;
| |
| border: 1px solid #7f9db9 !important;
| |
| z-index: 100 !important;
| |
| background-size: cover !important;
| |
| background-position: center !important;
| |
| background-repeat: no-repeat !important;
| |
| }
| |
| | |
| /* 隐藏原始的用户图标 */
| |
| #pt-userpage .mw-ui-icon::before,
| |
| .mw-ui-icon-wikimedia-userAvatar::before,
| |
| .oo-ui-icon-userAvatar::before,
| |
| #pt-userpage > a > span.mw-ui-icon::before,
| |
| #pt-userpage > a > span.oo-ui-icon-userAvatar::before {
| |
| display: none !important;
| |
| }
| |
| /* 修复Echo扩展通知重复显示和布局问题 */
| |
| #pt-notifications-alert,
| |
| #pt-notifications-notice {
| |
| display: inline-block !important;
| |
| position: relative !important;
| |
| margin-right: 5px !important;
| |
| }
| |
| | |
| /* 隐藏重复的通知图标 */
| |
| #pt-notifications-alert > a > span:not(:first-child),
| |
| #pt-notifications-notice > a > span:not(:first-child) {
| |
| display: none !important;
| |
| }
| |
| | |
| /* 确保通知角标只显示一次 */
| |
| .mw-echo-notifications-badge:not(:first-child),
| |
| .mw-echo-notification-badge-nojs:not(:first-child) {
| |
| display: none !important;
| |
| } | | } |
|
| |
|
| /* 修复通知按钮的布局 */ | | // 设置开始菜单 |
| #pt-notifications-alert > a,
| | function setupStartMenu() { |
| #pt-notifications-notice > a {
| | // 移除任何现有的开始菜单 |
| display: inline-block !important; | | $('#xp-start-menu').remove(); |
| position: relative !important;
| |
| padding: 0 !important;
| |
| }
| |
| /* 修复变色龙皮肤的响应式菜单 */ | |
| @media (max-width: 767px) {
| |
| .navbar-toggler,
| |
| .navbar-toggle {
| |
| display: block !important;
| |
| background: linear-gradient(to bottom, #f6f6f6, #e0e0e0) !important;
| |
| border: 1px solid #ababab !important;
| |
| padding: 0.25rem 0.5rem !important;
| |
| margin: 0 !important;
| |
| }
| |
| | | |
| .navbar-collapse { | | // 创建开始菜单元素 |
| position: static !important;
| | var $startMenu = $('<div id="xp-start-menu"></div>').css({ |
| background: rgb(var(--xp-window-bg)) !important;
| | 'position': 'fixed', |
| border: 1px solid rgb(var(--xp-window-border)) !important;
| | 'left': '0', |
| z-index: 1000 !important;
| | 'bottom': '60px', |
| width: 100% !important;
| | 'width': '250px', |
| }
| | 'background-color': 'white', |
| }
| | 'border': '2px solid #0054e3', |
| | | 'box-shadow': '2px -2px 5px rgba(0, 0, 0, 0.3)', |
| /* 确保折叠菜单正常显示和隐藏 */
| | 'z-index': '10000', |
| .navbar-collapse {
| | 'display': 'none' |
| display: none;
| | }); |
| }
| |
| | |
| .navbar-collapse.show {
| |
| display: block !important;
| |
| }
| |
| /* 修复导航栏显示问题 - 不要让导航栏单独成为一行 */ | |
| .navbar {
| |
| background-color: rgb(var(--xp-window-bg)) !important; | |
| border: 1px solid rgb(var(--xp-window-border)) !important;
| |
| box-shadow: var(--window-shadow) !important;
| |
| border-radius: 0 !important;
| |
| position: relative !important;
| |
| display: flex !important;
| |
| flex-wrap: wrap !important;
| |
| align-items: stretch !important;
| |
| justify-content: space-between !important;
| |
| padding: 0.5rem 1rem !important;
| |
| }
| |
| | |
| /* 确保导航栏项目在同一行 */
| |
| .navbar-nav {
| |
| flex-direction: row !important;
| |
| display: flex !important;
| |
| }
| |
| | |
| /* 修复变色龙皮肤的响应式 */
| |
| @media (max-width: 991px) {
| |
| .navbar-toggler {
| |
| display: block !important; | |
| position: relative !important; | |
| background: linear-gradient(to bottom, #f6f6f6, #e0e0e0) !important; | |
| border: 1px solid #ababab !important; | |
| padding: 0.375rem 0.75rem !important; | |
| z-index: 1031 !important; | |
| } | |
| | | |
| .navbar-collapse { | | // 添加菜单顶部 |
| position: absolute !important;
| | var username = mw.config.get('wgUserName') || 'Guest'; |
| top: 100% !important;
| | var $menuTop = $('<div class="start-menu-top"></div>').css({ |
| left: 0 !important;
| | 'height': '60px', |
| right: 0 !important;
| | 'background': 'linear-gradient(to bottom, #235ddc, #225ada 50%, #214fbb)', |
| background: rgb(var(--xp-window-bg)) !important;
| | 'color': 'white', |
| border: 1px solid rgb(var(--xp-window-border)) !important;
| | 'padding': '10px', |
| z-index: 1030 !important;
| | 'font-weight': 'bold', |
| padding: 0.75rem !important;
| | 'display': 'flex', |
| }
| | 'align-items': 'center' |
| }
| | }); |
| | |
| /* 修复头像 - 精确的选择器防止覆盖其他图标 */
| |
| #pt-userpage:not(#pt-notifications-alert):not(#pt-notifications-notice) > a::before {
| |
| content: "" !important;
| |
| position: absolute !important;
| |
| left: 0 !important;
| |
| top: 50% !important;
| |
| transform: translateY(-50%) !important;
| |
| width: 24px !important;
| |
| height: 24px !important;
| |
| background-color: #f0f0f0 !important;
| |
| border: 1px solid #7f9db9 !important;
| |
| z-index: 100 !important;
| |
| background-size: cover !important;
| |
| background-position: center !important;
| |
| }
| |
| | |
| /* 调整用户按钮文字位置 */
| |
| #pt-userpage > a {
| |
| padding-left: 30px !important;
| |
| position: relative !important;
| |
| }
| |
| | |
| /* 隐藏原始的用户图标但保留Echo图标 */
| |
| #pt-userpage:not(#pt-notifications-alert):not(#pt-notifications-notice) .mw-ui-icon::before,
| |
| #pt-userpage:not(#pt-notifications-alert):not(#pt-notifications-notice) > a > span::before {
| |
| display: none !important;
| |
| }
| |
| | |
| /* 修复Echo扩展通知显示 */
| |
| #pt-notifications-alert, | |
| #pt-notifications-notice { | |
| display: inline-block !important;
| |
| vertical-align: middle !important;
| |
| margin-right: 1rem !important;
| |
| }
| |
| | |
| /* 确保Echo图标正常显示 */
| |
| #pt-notifications-alert > a,
| |
| #pt-notifications-notice > a { | |
| position: relative !important;
| |
| display: inline-block !important;
| |
| }
| |
| | |
| /* 隐藏重复的通知图标 */
| |
| .mw-echo-notifications-badge:not(:first-child) {
| |
| display: none !important;
| |
| }
| |
| /* 修复Logo组件显示问题 */
| |
| .logo {
| |
| display: inline-block;
| |
| vertical-align: middle;
| |
| position: relative;
| |
| z-index: 100;
| |
| }
| |
| | |
| /* 确保导航栏元素在同一行 */
| |
| .navbar {
| |
| display: flex !important;
| |
| flex-wrap: nowrap !important;
| |
| align-items: center !important;
| |
| }
| |
| | |
| .navbar-header {
| |
| flex-shrink: 0;
| |
| margin-right: 20px;
| |
| }
| |
| | |
| | |
| /* 调整用户按钮文字位置,为头像腾出空间 */
| |
| #pt-userpage > a,
| |
| .vector-user-menu-legacy #pt-userpage a,
| |
| #p-personal #pt-userpage a,
| |
| .navbar-personaltools > li:first-child > a {
| |
| padding-left: 40px !important; /* 调整为头像宽度+8px */
| |
| position: relative !important;
| |
| }
| |
| | |
| /* 修复Echo通知图标显示问题 */
| |
| #pt-notifications-alert,
| |
| #pt-notifications-notice {
| |
| position: relative !important;
| |
| z-index: 110 !important; /* 低于头像但仍然比大多数元素高 */
| |
| }
| |
| | |
| /* 确保Echo图标正确显示 */
| |
| .mw-echo-notifications-badge {
| |
| position: relative !important;
| |
| z-index: 110 !important;
| |
| }
| |
| | |
| /* 隐藏原始的用户图标,但保留Echo图标 */
| |
| #pt-userpage:not(#pt-notifications-alert):not(#pt-notifications-notice) .mw-ui-icon::before,
| |
| #pt-userpage:not(#pt-notifications-alert):not(#pt-notifications-notice) > a > span::before {
| |
| display: none !important;
| |
| }
| |
| /* 修复Logo和导航栏显示问题 */
| |
| .navbar {
| |
| display: flex !important;
| |
| flex-wrap: nowrap !important;
| |
| align-items: center !important;
| |
| }
| |
| | |
| .navbar-header {
| |
| flex-shrink: 0 !important;
| |
| display: inline-flex !important; | |
| align-items: center !important;
| |
| margin-right: 10px !important;
| |
| } | |
| | |
| .logo {
| |
| display: inline-block !important;
| |
| max-height: 40px !important;
| |
| margin-right: 10px !important;
| |
| }
| |
| | |
| /* 修复响应式菜单按钮 */
| |
| @media (max-width: 767px) {
| |
| .navbar-toggle {
| |
| display: block !important;
| |
| position: relative !important;
| |
| z-index: 100 !important;
| |
| margin-right: 15px !important;
| |
| }
| |
| | | |
| .navbar-collapse { | | $menuTop.html('<span style="font-size: 16px;">' + username + '</span>'); |
| display: none !important;
| | $startMenu.append($menuTop); |
| } | |
| | | |
| .navbar-collapse.in { | | // 添加菜单项 |
| display: block !important;
| | var $menuItems = $('<div class="start-menu-items"></div>').css({ |
| }
| | 'background-color': 'white', |
| }
| | 'padding': '5px 0' |
| | | }); |
| /* 修复头像显示和Echo通知按钮 */ | |
| #pt-userpage > a::before,
| |
| .navbar-userloggedin::before,
| |
| #personal-inner::before,
| |
| #p-personal .vector-menu-content-list > li:first-child > a::before,
| |
| .navbar-personaltools > li:first-child > a::before { | |
| content: "" !important;
| |
| position: absolute !important;
| |
| left: 0 !important;
| |
| top: 50% !important;
| |
| transform: translateY(-50%) !important;
| |
| width: 32px !important;
| |
| height: 32px !important;
| |
| background-color: #f0f0f0 !important;
| |
| border: 1px solid #7f9db9 !important;
| |
| z-index: 10 !important; /* 降低z-index以避免遮挡Echo通知 */
| |
| background-position: center !important;
| |
| background-size: cover !important;
| |
| background-repeat: no-repeat !important;
| |
| }
| |
| | |
| /* 调整用户按钮文字位置 */
| |
| #pt-userpage > a,
| |
| #p-personal #pt-userpage a,
| |
| .navbar-personaltools > li:first-child > a {
| |
| padding-left: 40px !important;
| |
| position: relative !important; | |
| } | |
| | |
| | |
| | |
| /* 修复Echo通知显示 */
| |
| #pt-notifications-alert,
| |
| #pt-notifications-notice {
| |
| position: relative !important;
| |
| z-index: 12 !important; /* 比头像高,确保可见 */
| |
| }
| |
| | |
| .mw-echo-ui-notificationBadgeButtonPopupWidget {
| |
| z-index: 20 !important; /* 确保Echo下拉菜单在最上层 */
| |
| }
| |
| | |
| /* 用更高分辨率的头像 */
| |
| .skin-chameleon .p-personal-tools.dropdown .dropdown-toggle::before {
| |
| height: 32px !important;
| |
| width: 32px !important;
| |
| background-size: cover !important;
| |
| }
| |
| | |
| .navbar > .container,
| |
| .navbar > .container-fluid {
| |
| display: flex !important;
| |
| flex-wrap: nowrap !important;
| |
| align-items: center !important;
| |
| width: 100% !important;
| |
| }
| |
| | |
| .navbar-brand {
| |
| float: none !important;
| |
| height: auto !important;
| |
| padding: 10px 15px !important;
| |
| display: inline-block !important;
| |
| }
| |
| | |
| | |
| /* 修复响应式菜单按钮 */
| |
| .navbar-toggle {
| |
| display: none !important;
| |
| }
| |
| | |
| @media (max-width: 767px) {
| |
| .navbar-toggle {
| |
| display: block !important;
| |
| float: right !important;
| |
| position: relative !important;
| |
| z-index: 100 !important;
| |
| margin-right: 15px !important;
| |
| border: 1px solid #ddd !important;
| |
| background-color: transparent !important;
| |
| }
| |
| | | |
| .navbar-collapse { | | // 定义菜单项 |
| width: 100% !important; | | var menuItemsData = [ |
| border-top: 1px solid transparent !important; | | { icon: '📄', text: '我的文档', link: '/wiki/Special:MyPage' }, |
| box-shadow: inset 0 1px 0 rgba(255,255,255,0.1) !important; | | { icon: '🖼️', text: '我的图片', link: '/wiki/Special:MediaStatistics' }, |
| } | | { icon: '🎵', text: '我的音乐', link: '#' }, |
| | { icon: '⚙️', text: '控制面板', link: '/wiki/Special:Preferences' }, |
| | { icon: '🔍', text: '搜索', link: '/wiki/Special:Search' }, |
| | { icon: '❓', text: '帮助和支持', link: '/wiki/Help:目录' }, |
| | { icon: '🚪', text: '注销', link: '/wiki/Special:UserLogout' } |
| | ]; |
| | | |
| .navbar-collapse.collapse { | | // 添加菜单项 |
| display: none !important;
| | $.each(menuItemsData, function(index, item) { |
| height: auto !important; | | var $menuItem = $('<div class="start-menu-item"></div>').css({ |
| } | | 'padding': '5px 10px', |
| | 'display': 'flex', |
| | 'align-items': 'center', |
| | 'cursor': 'pointer' |
| | }); |
| | |
| | $menuItem.html('<span style="margin-right: 10px; font-size: 16px;">' + item.icon + '</span>' + |
| | '<span>' + item.text + '</span>'); |
| | |
| | // 添加悬停效果 |
| | $menuItem.hover( |
| | function() { |
| | $(this).css('background-color', '#e0ecff'); |
| | }, |
| | function() { |
| | $(this).css('background-color', 'transparent'); |
| | } |
| | ); |
| | |
| | // 添加链接功能 |
| | $menuItem.click(function() { |
| | if (item.link && item.link !== '#') { |
| | window.location.href = mw.config.get('wgScriptPath') + item.link; |
| | } |
| | }); |
| | |
| | $menuItems.append($menuItem); |
| | }); |
| | | |
| .navbar-collapse.collapse.in { | | $startMenu.append($menuItems); |
| display: block !important;
| |
| overflow-y: auto !important;
| |
| }
| |
| | | |
| .navbar-nav { | | // 添加开始菜单到body |
| float: none !important;
| | $('body').append($startMenu); |
| margin: 7.5px -15px !important;
| |
| }
| |
| | | |
| .navbar-nav > li { | | // 为开始按钮添加点击事件 |
| float: none !important; | | $(document).on('click', '.start-button', function(e) { |
| } | | e.stopPropagation(); |
| | $startMenu.toggle(); |
| | }); |
| | | |
| .navbar-nav > li > a { | | // 点击其他区域关闭开始菜单 |
| padding-top: 10px !important; | | $(document).click(function(e) { |
| padding-bottom: 10px !important; | | if (!$(e.target).is('.start-button') && !$(e.target).closest('#xp-start-menu').length) { |
| } | | $startMenu.hide(); |
| | } |
| | }); |
| } | | } |
|
| |
|
| /* 修复头像显示和Echo通知按钮 */ | | // Windows XP 风格的任务栏和开始菜单样式 |
| .navbar-personaltools > li:first-child > a::before, | | function addTaskbarStyles() { |
| #p-personal li:first-child > a::before, | | var taskbarStyles = ` |
| #pt-userpage > a::before { | | /* 任务栏样式 */ |
| content: "" !important;
| | .taskbar { |
| position: absolute !important;
| | position: fixed; |
| left: 5px !important;
| | bottom: 0; |
| top: 50% !important;
| | left: 0; |
| transform: translateY(-50%) !important;
| | right: 0; |
| width: 32px !important; /* 增大头像尺寸 */
| | height: 40px; |
| height: 32px !important; /* 增大头像尺寸 */
| | background-color: #0054e3; |
| background-color: #f0f0f0 !important;
| | background: linear-gradient(to bottom, #2e96ef, #2387e7 50%, #0272d4 50%, #0866c6); |
| border: 1px solid #7f9db9 !important;
| | border-top: 1px solid #2483ce; |
| z-index: 9 !important; /* 降低z-index避免与Echo通知冲突 */
| | display: flex; |
| background-size: cover !important;
| | align-items: center; |
| background-position: center !important;
| | z-index: 9999; |
| background-repeat: no-repeat !important;
| | padding: 0 5px; |
| } | | } |
| | | |
| /* 调整用户按钮文字位置 */ | | /* 开始按钮样式 */ |
| .navbar-personaltools > li:first-child > a, | | .start-button { |
| #p-personal li:first-child > a,
| | height: 34px; |
| #pt-userpage > a {
| | padding: 0 10px; |
| padding-left: 42px !important; /* 调整为头像宽度+10px */
| | display: flex; |
| position: relative !important; | | align-items: center; |
| | background: linear-gradient(to bottom, #3c8ddd, #2987d6 50%, #1a6fc9 50%, #155db9); |
| | border: 1px solid #10559a; |
| | border-radius: 3px; |
| | color: white; |
| | font-weight: bold; |
| | margin-right: 10px; |
| | cursor: pointer; |
| | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); |
| | } |
| | |
| | .start-button:hover { |
| | background: linear-gradient(to bottom, #5ca6e5, #4a9add 50%, #3b88d5 50%, #2a76c4); |
| | } |
| | |
| | /* 任务栏内容区域 */ |
| | .taskbar-content { |
| | flex-grow: 1; |
| | display: flex; |
| | height: 100%; |
| | align-items: center; |
| | } |
| | |
| | /* 快速启动栏 */ |
| | .quick-launch { |
| | display: flex; |
| | align-items: center; |
| | height: 100%; |
| | } |
| | |
| | .quick-launch-icon { |
| | width: 30px; |
| | height: 30px; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | margin-right: 5px; |
| | cursor: pointer; |
| | font-size: 18px; |
| | background-color: rgba(255, 255, 255, 0.2); |
| | border-radius: 3px; |
| | } |
| | |
| | .quick-launch-icon:hover { |
| | background-color: rgba(255, 255, 255, 0.3); |
| | } |
| | |
| | /* 系统托盘 */ |
| | .system-tray { |
| | display: flex; |
| | align-items: center; |
| | height: 100%; |
| | padding: 0 5px; |
| | } |
| | |
| | .tray-icon { |
| | margin-left: 8px; |
| | font-size: 16px; |
| | cursor: pointer; |
| | } |
| | |
| | /* 时钟样式 */ |
| | .taskbar-clock { |
| | background-color: rgba(0, 0, 0, 0.2); |
| | color: white; |
| | padding: 3px 8px; |
| | margin-left: 8px; |
| | border-radius: 3px; |
| | font-size: 12px; |
| | } |
| | |
| | /* 开始菜单样式已在setupStartMenu函数中通过JS设置 */ |
| | `; |
| | |
| | // 添加样式到head |
| | $('style[data-taskbar-styles]').remove(); |
| | $('<style data-taskbar-styles>').text(taskbarStyles).appendTo('head'); |
| } | | } |
|
| |
|
| /* 确保个人工具栏不超出页面 */ | | // 初始化函数 |
| .navbar-right {
| | function initWindowsXPElements() { |
| margin-right: 0 !important;
| | // 添加样式 |
| max-width: calc(100% - 60px) !important; /* 保留空间给navbar-toggle */
| | addTaskbarStyles(); |
| position: relative !important;
| |
| }
| |
| | |
| /* 修复Echo通知显示 */
| |
| #pt-notifications-alert,
| |
| #pt-notifications-notice {
| |
| position: relative !important;
| |
| z-index: 10 !important; /* 确保高于头像 */
| |
| }
| |
| | |
| .mw-echo-ui-notificationBadgeButtonPopupWidget {
| |
| z-index: 1000 !important; /* 确保Echo下拉菜单在最上层 */
| |
| }
| |
| | |
| /* 隐藏原始用户图标,但保留Echo图标 */
| |
| .navbar-personaltools > li:first-child > a > span.glyphicon,
| |
| #pt-userpage > a > span.glyphicon,
| |
| #pt-userpage .mw-ui-icon:before {
| |
| display: none !important;
| |
| }
| |
| | |
| /* 确保Echo图标可见 */
| |
| #pt-notifications-alert .mw-ui-icon:before,
| |
| #pt-notifications-notice .mw-ui-icon:before {
| |
| display: inline-block !important;
| |
| }
| |
| | |
| /* 防止Echo通知徽章被覆盖 */
| |
| .mw-echo-notifications-badge {
| |
| position: relative !important; | |
| z-index: 10 !important;
| |
| }
| |
| /* 1. 修复导航栏布局 - 确保Logo和导航在同一行 */ | |
| .navbar {
| |
| position: relative;
| |
| display: flex !important;
| |
| flex-wrap: nowrap !important;
| |
| align-items: center !important;
| |
| justify-content: flex-start !important;
| |
| padding: 0.5rem 1rem !important;
| |
| min-height: 50px !important; | |
| }
| |
| | |
| .navbar-header {
| |
| position: static !important;
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| margin-right: 15px !important;
| |
| flex: 0 0 auto !important;
| |
| }
| |
| | |
| .logo {
| |
| display: inline-block !important;
| |
| max-height: 40px !important;
| |
| margin-right: 10px !important;
| |
| }
| |
| | |
| /* 2. 修复导航栏间距 */
| |
| .navbar-nav {
| |
| display: flex !important;
| |
| margin: 0 !important;
| |
| list-style: none !important;
| |
| padding-left: 0 !important;
| |
| }
| |
| | |
| .navbar-nav > li {
| |
| display: inline-block !important;
| |
| margin: 0 5px !important;
| |
| }
| |
| | |
| .navbar-nav > li > a {
| |
| padding: 10px 15px !important;
| |
| display: block !important;
| |
| }
| |
| | |
| /* 3. 修复用户头像位置 */
| |
| #pt-userpage > a,
| |
| .navbar-personaltools > li:first-child > a {
| |
| position: relative !important;
| |
| padding-left: 35px !important;
| |
| }
| |
| | |
| #pt-userpage > a::before,
| |
| .navbar-personaltools > li:first-child > a::before {
| |
| content: "" !important;
| |
| position: absolute !important;
| |
| left: 5px !important;
| |
| top: 50% !important;
| |
| transform: translateY(-50%) !important;
| |
| width: 24px !important;
| |
| height: 24px !important;
| |
| background-size: cover !important;
| |
| background-position: center !important;
| |
| background-repeat: no-repeat !important;
| |
| border-radius: 50% !important;
| |
| border: 1px solid #ccc !important;
| |
| z-index: 10 !important;
| |
| }
| |
| | |
| /* 4. 修复用户下拉菜单中的头像 */
| |
| #p-personal .vector-menu-content-list li:first-child > a::before,
| |
| .navbar-nav .dropdown-menu li:first-child > a::before {
| |
| content: "" !important;
| |
| display: inline-block !important;
| |
| width: 24px !important;
| |
| height: 24px !important;
| |
| background-size: cover !important;
| |
| background-position: center !important;
| |
| background-repeat: no-repeat !important;
| |
| border-radius: 50% !important;
| |
| border: 1px solid #ccc !important;
| |
| margin-right: 8px !important;
| |
| vertical-align: middle !important;
| |
| }
| |
| | |
| /* 5. 修复Echo通知图标 */
| |
| #pt-notifications-alert,
| |
| #pt-notifications-notice {
| |
| display: inline-block !important;
| |
| margin-right: 10px !important;
| |
| }
| |
| | |
| #pt-notifications-alert .mw-echo-notifications-badge,
| |
| #pt-notifications-notice .mw-echo-notifications-badge {
| |
| position: relative !important;
| |
| background-color: transparent !important;
| |
| }
| |
| | |
| #pt-notifications-alert .mw-echo-notifications-badge:before,
| |
| #pt-notifications-notice .mw-echo-notifications-badge:before {
| |
| color: #000 !important;
| |
| font-size: 24px !important;
| |
| line-height: 1 !important;
| |
| }
| |
| | |
| /* 6. 确保所有元素在同一行 */
| |
| .navbar-right {
| |
| margin-left: auto !important;
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| flex-wrap: nowrap !important;
| |
| }
| |
| | |
| .navbar-collapse {
| |
| flex-basis: 100% !important;
| |
| flex-grow: 1 !important;
| |
| align-items: center !important;
| |
| }
| |
| | |
| /* 7. 修复搜索框位置 */
| |
| .navbar-form {
| |
| margin-top: 0 !important;
| |
| margin-bottom: 0 !important;
| |
| }
| |
| | |
| #searchform {
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| }
| |
| | |
| #searchInput {
| |
| margin-right: 5px !important;
| |
| }
| |
| | |
| /* 8. 响应式修复 */
| |
| @media (max-width: 767px) {
| |
| .navbar-nav {
| |
| flex-direction: column !important;
| |
| width: 100% !important;
| |
| }
| |
| | | |
| .navbar-nav > li { | | // 创建任务栏 |
| display: block !important;
| | createTaskbar(); |
| width: 100% !important;
| |
| }
| |
| | | |
| .navbar-header { | | // 设置开始菜单 |
| flex-direction: column !important;
| | setupStartMenu(); |
| width: 100% !important;
| |
| }
| |
| } | | } |
| /* CommonJS功能 */ | | |
| /* 这些样式将由JavaScript功能使用 */
| | // 页面加载完成后初始化 |
| | $(document).ready(function() { |
| | initWindowsXPElements(); |
| | }); |