#container{
background-size: 0em 0em;
}
:root{
--logo-img: url(http://h-w-0.wikidot.com/local--files/theme:todv/logo.png);
--darkmode-logo-img: url(http://h-w-0.wikidot.com/local--files/theme:todv/logo.png);
--logo-image: url(http://h-w-0.wikidot.com/local--files/theme:todv/logo.png);
--header-logo: url(http://h-w-0.wikidot.com/local--files/theme:todv/logo.png);
--gradient-header: linear-gradient(to top, rgba(var(--black-monochrome)) 0%, rgba(var(--black-monochrome), 0.90) 0%);
--white-monochrome: 250, 250, 250;
--pale-gray-monochrome: 190, 190, 190;
--light-gray-monochrome: 160, 160, 160;
--gray-monochrome: 72, 69, 60;
--black-monochrome: 20, 20, 20;
--bright-accent: 235, 170, 10;
--medium-accent: 235, 170, 10;
--custom-text: 255, 255, 255;
--dark-accent: 140, 136, 126;
--pale-accent: 140, 136, 126;
/* Primary Theme Colors */
--swatch-background: var(--black-monochrome);
--swatch-primary: var(--bright-accent);
--swatch-primary-darker: var(--medium-accent);
--swatch-primary-darkest: var(--black-monochrome);
/* Primary Text Colors */
--swatch-text-dark: var(--custom-text);
--swatch-text-light: var(--bright-accent);
--swatch-important-text: var(--bright-accent);
--barColour: var(--very-light-gray-monochrome);
--linkColour: var(--pale-accent);
/* Primary Menu Colors */
--swatch-menubg-color: var(--black-monochrome);
--swatch-menubg-light-color: var(--dark-gray-monochrome);
--swatch-menubg-medium-color: var(--medium-accent);
--swatch-menubg-medium-dark-color: var(--gray-monochrome);
--swatch-menubg-dark-color: var(--dark-gray-monochrome);
--swatch-menubg-black-color: var(--black-monochrome);
--swatch-menubg-hover-color: var(--black-monochrome);
--swatch-menutxt-dark-color: var(--white-monochrome);
--swatch-menutxt-light-color: var(--white-monochrome);
--swatch-border-color: var(--bright-accent);
/* Primary Header Colors */
--swatch-headerh1-color: var(--white-monochrome);
--swatch-headerh2-color: var(--white-monochrome);
--swatch-topmenu-border-color: var(--bright-accent);
--swatch-topmenu-bg-color: var(--black-monochrome);
/* Link Colors */
--link-color: var(--bright-accent);
--visited-link-color: var(--medium-accent);
--hover-link-color: var(--bright-accent);
--sidebar-links-text: var(--swatch-menutxt-dark-color);
--link-color-bright: var(--medium-accent);
/* Rating Module Colors */
--rating-module-button-color: var(--bright-accent);
--rating-module-text-color: var(--white-monochrome);
--rating-module-text-hover-color: var(--swatch-menutxt-light-color);
/* Header Gradients */
--gradient-header: none;
--diagonal-stripes: none;
}
#skrollr-body {
background-image: linear-gradient(to top, rgba(var(--black-monochrome)) 0%, rgba(var(--black-monochrome), 0.90) 100%);
}
#header::before {
left: -2rem;
top: -0.3rem;
background-size: auto 5rem;
background-position: left;
opacity: 0.8;
animation: rightin1 calc(2.5s);
}
#header h1,
#header h1 a {
left: 4.8rem;
top: 0.8rem;
justify-content: left;
opacity: 1;
animation: rightin2 calc(2.5s);
}
#header h2,
#header h2 span,
#header h2 span::before {
left: 3.3rem;
top: 1.8rem;
justify-content: left;
opacity: 1;
animation: rightin3 calc(2.5s);
}
.top-bar{
animation: fadeIn-topbar 2s;
}
@keyframes rightin1{
0%{
transform:translateX(-1rem);
opacity:0;
}
40%{
transform:translateX(-1rem);
opacity:0;
}
100%{
transform:translateX(0);
opacity:1;
}
}
@keyframes rightin2{
0%{
transform:translateX(-1rem);
opacity:0;
}
60%{
transform:translateX(-1rem);
opacity:0;
}
100%{
transform:translateX(0);
opacity:1;
}
}
@keyframes rightin3{
0%{
transform:translateX(-1rem);
opacity:0;
}
80%{
transform:translateX(-1rem);
opacity:0;
}
100%{
transform:translateX(0);
opacity:1;
}
}
@keyframes downin{
0%{
transform:translateY(-1rem);
opacity:0;
}
50%{
transform:translateY(-1rem);
opacity:0;
}
100%{
transform:translateY(0);
opacity:1;
}
}
@keyframes fadeIn-topbar {
0% {clip-path: polygon(0% 0%,0% 0%, -10% 100%,0% 100%);}
100% {clip-path: polygon(0% 0%,110% 0%, 100% 100%,0% 100%);}
}
#page-title{
text-align:centre;
}
/*也许可以修手机端的问题，但是为什么能修呢？*/
#skrollr-body{overflow-x:clip;}
