Sigma 9 DIY Source
/* SIDE THEME */ .open-menu { display: none; } #side-bar { display: none !important; } #u-side-bar a:visited { color: #b01; } #u-side-bar { clear: none; float: none; position: absolute; top: 0.5em; left: -20em; width: 17em; padding: 0; border: none; display: block; z-index: 20; } #u-side-bar .side-block { padding: 10px; border: 1px solid #660000; border-radius: 10px; box-shadow: 0 2px 6px rgba(102,0,0,.5); background: #fff; margin-bottom: 15px; } #u-side-bar .side-area { padding: 10px; } #u-side-bar .heading { color: #600; border-bottom: solid 1px #600; padding-left: 15px; margin-bottom: 5px; font-size: 8pt; font-weight: bold; } #u-side-bar .heading:not(:first-child) { margin-top: 10px; } #u-side-bar p { margin: 0; } #u-side-bar div.menu-item { margin: 2px 0; } #u-side-bar div.menu-item img { width: 13px; height: 13px; border: 0; margin-right: 2px; position: relative; bottom: -2px; } #u-side-bar div.menu-item a { font-weight: bold; } #u-side-bar div.menu-item.inactive img { opacity: 0.25; } #u-side-bar div.menu-item.inactive a { color: #999; } #u-side-bar div.menu-item .sub-text { font-size: 80%; color: #666; } #u-side-bar div.menu-item.sub-item { } #u-side-bar .collapsible-block-folded { background: url(http://scp-wiki-cn.wikidot.com/local--files/nav:side/expand.png) 0 2px no-repeat; } #u-side-bar .collapsible-block-link { margin-left: 15px; font-weight: bold; } #u-side-bar .collapsible-block-unfolded-link { border-bottom: solid 1px #600; } #u-side-bar .collapsible-block-unfolded-link .collapsible-block-link { margin-top: 10px; margin-bottom: 5px; font-size: 8pt; color: #600; } #u-side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover { color: #b01; text-decoration: none; } #u-side-bar ul { list-style-type: none; padding: 0 5px 0; } @media (max-width: 767px) { #u-side-bar { width: 80%; /* position: relative; */ } } @media (min-width: 768px) and (max-width: 979px) { #u-side-bar { max-width: 100%; left: -18em; } } @media (max-width: 767px) { #u-side-bar { display: block; position: fixed; top: 0; left: -25em; width: 17em; height: 100%; background-color: rgb(184, 134, 134); overflow-y: auto; padding: 1em 1em 0 1em; -webkit-transition: left 0.5s ease-in-out 0.1s; -moz-transition: left 0.5s ease-in-out 0.1s; -ms-transition: left 0.5s ease-in-out 0.1s; -o-transition: left 0.5s ease-in-out 0.1s; transition: left 0.5s ease-in-out 0.1s; } #u-side-bar:after { content: ""; position: absolute; top: 0; width: 0; height: 100%; background-color: rgba(0, 0, 0, 0.2); } #u-side-bar:target { display: block; left: 0; width: 17em; margin: 0; border: 1px solid #dedede; } #u-side-bar:target + #main-content { left: 0; } #u-side-bar:target .close-menu { display: block; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.3) 1px 1px repeat; z-index: -1; } .open-menu { display: block; } .open-menu a { position: fixed; top: 0.5em; left: 0.5em; z-index: 20; font-family: 'Nanum Gothic', san-serif; font-size: 30px; font-weight: 700; width: 30px; height: 30px; line-height: 0.9em; text-align: center; border: 0.2em solid #888 !important; background-color: #fff !important; border-radius: 3em; color: #888 !important; } .open-menu a:hover { text-decoration: none !important; -webkit-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1); -moz-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1); -ms-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1); -o-box-shadow: 0px 0px 20px 3px rgba(153,153,153,1); box-shadow: 0px 0px 20px 3px rgba(153,153,153,1); } } @media (max-width: 479px) { #u-side-bar { font-size: 111%; } } /* TOP THEME */ #top-bar { display: none; } #u-top-bar { position: absolute; right: 0; top: -48px; height: 21px; /* background-color: #E8E8E8; */ z-index: 19; padding: 0; margin: 0; font-size: 0px; } #u-top-bar.mode-0 { width: 100%; } #u-top-bar.mode-1, #u-top-bar .item-content { width: fit-content; width: -moz-fit-content; width: -webkit-fit-content; } #u-top-bar .item-content { display: none; } #u-top-bar .top-item { /* position: relative; */ } #u-top-bar .top-item, #u-top-bar .item-title { display: inline-block; } #u-top-bar .item-title p, #u-top-bar .item-title a { margin: 0; margin-left: 1em; margin-right: 1em; font-size: 12px; margin-top: 3px; } #u-top-bar .top-item:hover .item-content { display: block; position: absolute; } #u-top-bar.mode-1 .top-item:last-child .item-content { right: 0; } #u-top-bar .item-title { color: #FFF; height: 21px; border-left: transparent solid 1px; border-right: transparent solid 1px; vertical-align: middle; } #u-top-bar .top-item:hover .item-title { background-color: #EEE; color: #A01; border-left: #444 solid 1px; border-right: #444 solid 1px; } #u-top-bar .item-content { border: #666 solid 1px; border-top: none; font-size: 12px; } #u-top-bar .item-content p { margin: 0; } #u-top-bar .item-content a { display: inline-block; color: #A01 !important; width: calc(100% - 2em); margin: 0 !important; background-color: #EEE; border-top: #DDD solid 1px; padding: 2px; padding-left: 1em; padding-right: 1em; } #u-top-bar .item-title:hover, #u-top-bar .item-content a:hover { background-color: #FFF !important; text-decoration: none; } #u-top-bar .top-item:hover .item-content { width: 168px !important; } #u-top-bar .mobile-top-bar { display: none; } @media (max-width: 767px) { #u-top-bar { left: 0 !important; } #u-top-bar .top-bar { display: none; } #u-top-bar .mobile-top-bar { display: block; } } @media (max-width: 500px) { #u-top-bar { top: -48px; } }