Theme Much Cool CSS

ĐÂY LÀ TRANG theme DỊCH


Để truy cập hướng dẫn sử dụng các tính năng của theme, vui lòng truy cập tại

http://scp-wiki.wikidot.com/theme:much-cool


Để thêm theme Việt Hóa vào bài viết của bạn, thêm đoạn lệnh sau:

[[include :scp-vn:theme:much-cool]]

Much Cool CSS Theme

Rating:

đánh giá: +1+x

Rating w/ Info Pane:

This is Much Cool CSS Theme made by c_bonefish does not match any existing user name for the Are We Cool Yet GoIF or something like that.

To import this theme to your page, put the following text anywhere inside it:

[[include :scp-wiki:theme:much-cool]]



Page Elements

logo.png

asdf

Title1

Title2

Title3

Title4

Title5
Title6





CSS Theme Code

/*
    Much Cool CSS Theme
    [2022 Wikidot Theme]
 
    Created by c_bonefish
    Base Code by Denevola
 
    Logo image: https://scp-wiki.wikidot.com/kens-artistic-side
    Background Image1: https://pixabay.com/vectors/ink-paint-drips-liquid-painting-5727056/
    Background Image2: https://pixabay.com/illustrations/abstract-background-art-colour-4923424/
 
    CC BY-SA 3.0
*/
 
@import url('https://fonts.googleapis.com/css2?family=Vollkorn+SC&display=swap');
 
/* Header */
div#container-wrap {
    background: url('https://scp-wiki.wikidot.com//local--files/theme:much-cool/background.png') center top repeat-x;
    background-size: 1000px;
}
 
#header {
    height: 290px;
    background-image: url('https://scp-wiki.wikidot.com//local--files/theme:much-cool/logo.png');
    background-position: 50% 45%;
    background-repeat: no-repeat;
    background-size: 330px auto;
}
 
#header h1 a {
    position: absolute;
    font-size: 100%;
    text-align: center;
    text-shadow: none;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
 
#header h1 a::before {
    content: " ";
    color: #00000000;
    width: 100%;
    height: 100%;
}
 
#header h2,
#header h1 a span,
#header h2 span {
    display: none;
}
 
/* Login & Search & Top Bar */
#login-status {
    position: absolute;
    top: 3px;
    color: #ffffff;
    z-index: 2;
}
 
#login-status a {
    color: #ffffff;
    font-weight: bolder;
}
 
#account-topbutton {
    border-color: #ffffff;
}
 
#login-status ul a {
    color: #000000 !important;
}
 
#search-top-box {
    position: absolute;
    top: 30px;
    right: 0;
    width: 250px;
    text-align: right;
    z-index: 1;
}
 
#search-top-box-form {
    display: inline-flex;
}
 
#search-top-box-form > input {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-radius: 5px;
}
 
#search-top-box-input {
    background-color: #7A3E09;
    border: solid 1px #DBBFA6;
    color: #DBBFA6;
}
 
#search-top-box-input:hover,
#search-top-box-input:focus {
    box-shadow: inset 1px 1px 5px rgb(0 0 0 / 50%);
    color: #000000 !important;
}
 
#search-top-box-form input[type=submit] {
    padding: 2px 5px;
    background: #7A3E09;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    border: solid 1px #ffffff;
    color: #ffffff;
    font-size: 90%;
}
 
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
    background: #7A3E09;
}
 
#top-bar {
    display: flex;
    justify-content: center;
    top: 277px;
    width: 100%;
    z-index: 20;
}
 
#top-bar a {
    color: #ffffff;
}
 
#top-bar ul li.sfhover a,
#top-bar ul li:hover a {
    background: #A57947;
    border-color: transparent;
    color: #ffffff;
}
 
#top-bar ul li.sfhover a:hover,
#top-bar ul li:hover a:hover {
    background: #896740;
}
 
#top-bar ul li ul,
#top-bar ul li ul li ul {
    border-color: rgba(0, 0, 0, .4);
}
 
#top-bar ul li.sfhover ul li a,
#top-bar ul li:hover ul li a {
    border-color: rgba(0, 0, 0, .1);
}
 
#top-bar ul li.sfhover ul li ul a,
#top-bar ul li:hover ul li ul a {
    border-top: none;
}
 
.top-bar {
    position: relative;
    margin: 0 auto;
}
.c_topbar_arrow {
    color: #92ffff;
}
 
/* Page Elements */
#page-title,
.meta-title {
    color: #7A3E09;
    font-size: 2.1em;
    font-weight: bold;
}
 
#content-wrap {
    margin: 30px auto 0;
}
 
h1, h2, h3, h4, h5, h6 {
    color: #7A3E09;
    font-weight: bold;
}
 
body {
    background-color: #F5EFE9;
    color: #000000;
}
 
a:link {
    color: #775225;
}
 
a:visited {
    color: #996723;
}
 
.hovertip {
    background-color: #F5EFE9 !important;
    border: 2px solid #7A3E09 !important;
    color: #000000 !important;
}
 
.scp-image-block {
    background: #FFFFFB;
    border: 10px solid #F5EFE9;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
 
.scp-image-block .scp-image-caption {
    padding-top: 1em;
    background: #F5EFE9;
    border-top: none;
    font-size: 85%;
}
 
.scp-image-block img {
    box-shadow: 0 0 1px black;
}
 
/* ---- SCROLLBAR ---- */
::-webkit-scrollbar {
    width: unset;
    height: unset;
}
 
::-webkit-scrollbar-track {
    background: #F5EFE9;
}
 
::-webkit-scrollbar-thumb {
    background: #7A3E09;
    border: none;
}
 
::-webkit-scrollbar-thumb:hover {
    background: #A0510C;
}
 
textarea::-webkit-scrollbar-track {
    background: #F5EFE9;
}
 
/* Side Bar */
#side-bar {
    background: none;
}
 
#side-bar .side-block,
#side-bar .side-block.media,
#side-bar .side-block.resources {
    background-color: #F5EFE9;
    border: 2px solid #7A3E09;
    border-radius: 10px 0;
}
 
#side-bar .heading,
#side-bar .collapsible-block-unfolded-link {
    border-bottom: solid 1px #000000;
    color: #000000;
}
 
#side-bar .collapsible-block-folded-link .collapsible-block-link:hover,
#side-bar .collapsible-block-unfolded-link .collapsible-block-link:hover {
    color: #99997B;
}
 
#side-bar .collapsible-block-folded-link .collapsible-block-link,
#side-bar .collapsible-block-unfolded-link .collapsible-block-link {
    color: #000000;
}
 
#side-bar .menu-item .image,
#side-bar .collapsible-block-folded,
#side-bar .collapsible-block-unfolded-link .collapsible-block-content .image {
    filter: hue-rotate(200deg);
}
 
#side-bar .collapsible-block-folded a:link {
    filter: hue-rotate(-200deg);
}
 
#side-bar a:link {
    color: #72725A;
}
 
#side-bar a:visited {
    color: #996723;
}
 
#side-bar a:link:hover,
#side-bar a:visited:hover {
    color: #A0A082;
}
 
.scpnet-interwiki-frame {
    filter: invert(1) hue-rotate(245deg) saturate(.8);
}
 
#top-bar .open-menu a {
    border-color: #000000;
    color: #000000;
}
 
/* Tab */
div.yui-navset ul.yui-nav a,
div.yui-navset ul.yui-nav a:hover,
div.yui-navset ul.yui-nav .selected a,
div.yui-navset ul.yui-nav .selected a:hover,
div.yui-navset ul.yui-nav .selected a:focus {
    background: none;
    border: none;
}
 
.yui-navset {
    clear: both;
    margin-bottom: 1em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
 
.yui-navset .yui-nav {
    border: 1px solid gainsboro;
    border-bottom: none;
}
 
.yui-navset .yui-nav li {
    margin-right: 10px !important;
}
 
.yui-navset .yui-nav li:first-child {
    margin-left: 1.5em;
}
 
.yui-navset .yui-nav li a em {
    padding: 10px .75em .25em;
    margin-bottom: -1px;
    background: none;
    border: none;
    border-bottom: 4px solid transparent;
    color: gray;
    transition: .2s;
}
 
.yui-navset .yui-nav li a em:hover {
    background: none;
}
 
.yui-navset .yui-nav .selected a em,
.yui-navset .yui-nav .selected a em:hover {
    padding: 10px .75em .25em;
    background: none;
    border: none;
    border-bottom: 4px solid #968061;
    color: #968061;
    font-weight: bold;
}
 
div.yui-navset div.yui-content {
    background: #FFFFFB;
    border: 1px solid gainsboro;
}
 
/* Rate Module */
.page-rate-widget-box {
    margin-right: 0;
    border: 2px solid #AD8C45;
    border-radius: 5px;
    box-shadow: none;
}
 
.page-rate-widget-box > span {
    border: none !important;
}
 
div.page-rate-widget-box .rate-points {
    background: #E5D7B7;
    color: #000000;
}
 
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
    background: #E5D7B7;
}
 
.page-rate-widget-box .rateup a:hover,
.page-rate-widget-box .ratedown a:hover {
    background-color: #AD8C45;
    color: #E5D7B7;
}
 
.page-rate-widget-box .cancel {
    background: #E5D7B7;
}
 
.page-rate-widget-box .cancel a {
    color: #000000;
    font-weight: bold;
}
 
.page-rate-widget-box .cancel a:hover {
    background: #AD8C45;
    border-radius: 0;
    color: #E5D7B7;
}
 
.creditRate {
    margin-right: 0 !important;
}
 
.rate-box-with-credit-button {
    background: #E5D7B7 !important;
    border: 2px solid #AD8C45 !important;
    box-shadow: none !important;
}
 
.rate-box-with-credit-button .page-rate-widget-box {
    border: none;
}
 
.creditButton p a {
    border-left: none !important;
    color: #000000 !important;
}
 
#page-content .rate-box-with-credit-button .fa-info {
    padding: 3px 0 1px;
}
 
#page-content .rate-box-with-credit-button .fa-info:hover {
    background: #AD8C45;
    border-radius: 0 3px 3px 0;
    color: #E5D7B7 !important;
}
 
/* ---- EDITING WINDOWS ---- */
.owindow {
    background-color: #ffffff;
    border-color: #AD8C45;
}
 
.owindow .modal-header {
    background-color: #ffffff;
}
 
.owindow .modal-body img {
    background-color: #ffffff !important;
    color: #000000;
}
 
.owindow .title {
    background-color: #ffffff;
}
 
.owindow a,
.owindow a:visited {
    color: #CECE8C;
}
 
.owindow .active {
    color: #000000;
}
 
.owindow .content.modal-body img {
    background-color: #72725A !important;
}
 
.owindow .button-bar a {
    background-color: #ffffff;
    color: #000000;
}
 
.owindow .button-bar a:hover,
.owindow .button-bar a:focus {
    background-color: #ffffff !important;
    border-color: #99997B;
    color: #000000;
}
 
table.page-files .highlight {
    background-color: #FFFFFB;
}
 
input.text,
input.text:focus,
input.text:hover {
    background-color: #ffffff !important;
    border-color: #99997B;
    color: #000000;
}
 
textarea {
    background-color: #FEFFFF;
    color: #000000;
}
 
.change-textarea-size a {
    background-color: #ffffff;
    color: #000000;
}
 
#lock-info {
    background-color: #ffffff;}
 
/* Blockquote */
blockquote,
div.blockquote {
    background-color: #FFFAEE;
    border-style: dotted;
}
 
/* etc. */
@media (min-width: 581px) and (max-width: 767px) {
    #header {
        background-size: 300px auto;
    }
}
 
@media (min-width: 480px) and (max-width: 580px) {
    #header {
        background-size: 260px auto;
    }
}
 
@media (min-width: 321px) and (max-width: 479px) {
    #header {
        background-size: 240px auto;
    }
}
 
@media (max-width: 320px) {
    #header {
        background-size: 210px auto;
    }
}
Nếu không có ngoại lệ được nêu, nội dung của trang này được xuất bản dưới giấy phép Creative Commons Attribution-ShareAlike 3.0 License