APR版式
(也许是)为APR所作。
正在更新中
/* 适配所用 */ .standard-block, .content-panel { border: solid 1px #888880; border-radius: 10px; background-color: #999990; margin: 10px 0 15px; box-shadow: 3px 3px 6px #bbb; box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.1); } /* Variants */ :root { --background-color: #333; --accent-background-color: #222; --front-background-color: #444; --accent-color: #FFF; --frontground-color: #CDCDCD; /* ------------ */ --header-background-color: var(--accent-background-color); --topbar-background-color: var(--front-background-color); --title-color: var(--front-background-color); --link-color: var(--accent-color); /* ------------ */ --standard-shadow: 1px 1px 1px #000; /* ------------ */ --title-fragment-A: "星际异常"; --title-fragment-B: "管理局"; --logo-image: url("http://apr-wiki-cn.wikidot.com/local--files/component:theme/LOGO.png"); --standard-background: transparent, transparent; } /* Basic */ body { background-color: var(--background-color); color: var(--frontground-color); } #edit-page-form * { font-family: monospace !important; } div#container-wrap { background-image: linear-gradient(to bottom, var(--accent-background-color) 0, var(--accent-background-color) 100%); background-size: 100% 162px; background-repeat: repeat-x; background-position: top center; } #header, #top-bar, #top-bar .top-bar, #top-bar .mobile-top-bar { width: 100%; } #header h1 *, #header h2 * { float: none !important; } #header h1 a span { display: none; } #header h1 a::before { content: var(--title-fragment-A); } #header h1 a::after { content: var(--title-fragment-B); } #header h1 a, #header h2 span { text-shadow: none !important; font-family: var(--title-font); color: var(--title-color); } #top-bar ul li { padding: 0; line-height: 21px; } #header { background-image: linear-gradient(to bottom, var(--standard-background)); background-position: center top; background-repeat: repeat-x; background-size: auto 100%; background-color: var(--header-background-color); } #header::after { content: " "; display: block; width: 100px; height: 100px; position: absolute; left: 0; bottom: 1em; background-image: var(--logo-image); background-repeat: no-repeat; background-size: 80px auto; z-index: -1; } #top-bar { background-image: linear-gradient(to bottom, var(--topbar-background)); background-position: center top; background-repeat: repeat-x; background-size: auto 100%; background-color: var(--topbar-background-color); } #top-bar * { float: none !important; } #top-bar .top-bar, #top-bar .mobile-top-bar { width: 100% !important; text-align: center !important; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; } #top-bar div > ul { width: 100% !important; max-width: 800px !important; display: flex; justify-content: center; float: none !important; } #top-bar div > ul li { display: block; flex-grow: 1; } .top-bar ul li:last-of-type ul, #top-bar ul > li:nth-last-child(1) ul { position: absolute; right: 0 !important; } #top-bar ul li ul { display: block; } #top-bar ul li:hover a, #top-bar ul li.sfhover a, #top-bar ul li ul li:hover a, #top-bar ul li ul li.sfhover a { background-color: transparent !important; border: none !important; color: var(--frontground-color) !important; } #top-bar ul li:hover a:hover, #top-bar ul li.sfhover a:hover, #top-bar ul li ul li:hover a:hover, #top-bar ul li ul li.sfhover a:hover { background-color: var(--frontground-color) !important; border: none !important; color: var(--background-color) !important; } #top-bar div > ul > li > ul { border: solid 1px var(--frontground-color); border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; background-color: var(--accent-background-color); } #page-title, h1 { font-family: var(--title-font); color: var(--title-color); text-shadow: var(--standard-shadow); } #top-bar .top-bar { display: flex; position: relative; justify-content: center; width: 100vw; } #top-bar .mobile-top-bar { display: none; } #top-bar div > ul { max-width: 800px; z-index: 1919810 !important; margin: 0 auto; } a, a.newpage { color: var(--link-color); } a:visited { color: var(--frontground-color) !important; } #search-top-box-input, #search-top-box-form input[type=submit] { border-color: var(--front-background-color) !important; background-image: var(--search-background); background-color: var(--background-color); color: var(--accent-color) !important; border: solid 1px; } .page-rate-widget-box *, .page-rate-widget-box span.rate-points { background: none !important; border: none !important; } .page-rate-widget-box { border-color: var(--front-background-color) !important; background-image: var(--search-background); background-color: var(--background-color); color: var(--frontground-color) !important; border: solid 1px; margin-left: 0; margin-right: 0; } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { color: var(--accent-color) !important; } .page-rate-widget-box .rate-points, .page-rate-widget-box .cancel a { color: var(--frontground-color) !important; } #side-bar { background-color: var(--background-color) !important; border: none !important; } #side-bar .side-block { background-color: var(--background-color) !important; border: solid 1px var(--front-background-color) !important; border-radius: 5px !important; box-shadow: var(--standard-shadow) !important; } #side-bar .heading { color: var(--frontground-color); border-bottom: solid 1px var(--frontground-color); padding-left: 15px; margin-bottom: 5px; font-size: 8pt; font-weight: bold; } #side-bar .collapsible-block-folded { background: none; } #side-bar .collapsible-block-unfolded-link { border-bottom: solid 1px var(--frontground-color); } #side-bar .collapsible-block-unfolded-link .collapsible-block-link { margin-top: 10px; margin-bottom: 5px; font-size: 8pt; color: var(--frontground-color); } #side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover { color: var(--accent-color); text-decoration: none; } #side-bar div.menu-item img { opacity: 0; } .hovertip .content .footnote .f-heading, .hovertip .content .footnote .f-footer { display: none !important; } .hovertip { border: solid 1px var(--accent-color) !important; background-color: var(--accent-background-color) !important; border-radius: 2px; } #toc, .toc { background-color: var(--background-color) !important; border: double 3px var(--front-background-color) !important; border-radius: 5px; } /* YUI Tab */ .yui-navset .yui-content { border: solid 3px var(--accent-background-color); background-color: var(--accent-background-color); } .yui-navset .yui-nav .selected { background-color: var(--accent-background-color); border: none !important; } .yui-navset .yui-nav li { border: solid 1px var(--front-background-color) !important; } .yui-navset ul { border: solid 2px var(--front-background-color) !important; background-color: var(--front-background-color) !important; } .yui-navset .yui-nav .selected, .yui-navset .yui-nav li { margin: 0 !important; } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, /* no focus effect for selected */ .yui-navset .yui-nav .selected a:hover, .yui-navset .yui-nav a, .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus, .yui-navset .yui-navset-top .yui-nav a { background-image: none !important; background: none !important; } .yui-navset li *, .yui-navset .selected * { border: none !important; } .yui-navset li a, .yui-navset .selected a { border: none !important; } .yui-navset li a { color: var(--frontground-color) !important; background-image: none !important; border-bottom: solid 1px transparent !important; } .yui-navset .yui-nav .selected { } /* Blocks */ .float-left { float: left; margin-right: 1em; margin-bottom: 1em; } .float-right { float: right; margin-left: 1em; margin-bottom: 1em; } .apr-image, .code, blockquote, div.blockquote { background-color: var(--background-color); border: solid 1px var(--front-background-color); color: var(--frontground-color); border-radius: 5px; } .apr-image { padding-top: 1em; padding-left: 1em; padding-right: 1em; width: fit-content; width: -moz-fit-content; width: -webkit-fit-content; } .apr-image .image { border-radius: 2px; border: solid 1px var(--front-background-color); } .apr-image .apr-image-caption { text-align: center; } .content-panel, .standard-block { background-color: var(--accent-background-color); border: solid 1px var(--frontground-color); border-radius: 5px; padding: 1em; } .standard-block.nopadding { padding: 0; } .standard-block .block-content > p:nth-child(1), .standard-block.nopadding > p:nth-child(1) { margin-top: 0; } .standard-block .block-content > p:nth-last-child(1), .standard-block.nopadding > p:nth-last-child(1) { margin-bottom: 0; } .standard-block.nopadding > p { margin-left: 0.5em; margin-right: 0.5em; } .block-content { margin: 0; padding: 1em; background-color: var(--front-background-color); border-left: solid 1px var(--frontground-color); border-right: solid 1px var(--frontground-color); } .block-content > * > *, .standard-block.header p, .standard-block.footer p { margin: 0 !important; } .standard-block.header { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; margin-bottom: 0 !important; padding-top: 0.5em; padding-bottom: 0.5em; } .standard-block.footer { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; margin-top: 0 !important; padding-top: 0.5em; padding-bottom: 0.5em; } /* MOBILE FIX */ #header .open-menu a { border-radius: 5px !important; border: solid 1px var(--front-background-color) !important; background-color: var(--background-color) !important; color: var(--front-background-color) !important; } @media (max-width: 767px) { #top-bar .mobile-top-bar { display: flex; } #top-bar .top-bar { display: none; } }