Linkage Theme
/*@import url("https://fonts.googleapis.com/css?family=Russo+One&display=swap&subset=latin-ext");*/
 
@supports(--css:variables) {
#header, #top-bar {
  width: 100%;
}
#header h1,
#header h2 {
  margin: 0;
  float: none;
}
#header h1 a,
#header h2 span {
  text-shadow: none;
}
 
:root {
  /* Header */
  --logo-image: url("http://scp-wiki-cn.wikidot.com/local--files/component:neo-linkage-theme/linkAge-logo.svg");
  --header-title: "linkAge";
  --header-subtitle: "Find Your Dream, Find Yourself.";
  /* Typefaces */
  --header-font: 'Russo One', "Noto Sans SC", sans-serif;
  /* Standard Colors */
  --white-monochrome: 252, 252, 252;
  --pale-gray-monochrome: 244, 244, 244;
  --light-pale-gray-monochrome: 244, 244, 244;
  --very-light-gray-monochrome: 215, 215, 215;
  --light-gray-monochrome: 125, 125, 125;
  --gray-monochrome: 66, 66, 72;
  --dark-gray-monochrome: 48, 48, 52;
  --black-monochrome: 12, 12, 12;
  --pale-accent: 201, 23, 30;
  --bright-accent: 90, 121, 186;
  --medium-accent: 30, 80, 162;
  --dark-accent: 23, 24, 75;
  /* Header Colors */
  --header-gradient-color-bottom: 16, 16, 16;
  --header-gradient-color-middle: var(--dark-accent);
  --header-gradient-color-top: var(--dark-accent);
  --swatch-headerh1-color: var(--white-monochrome);
  --swatch-headerh2-color: var(--white-monochrome);
  --background-gradient-color: var(--very-light-gray-monochrome);
  /* Link Colors */
  --link-color: var(--bright-accent);
  --visited-link-color: 103, 69, 152;
  --hover-link-color: 103, 69, 152;
  --newpage-color: 221, 102, 17;
  /* Header Gradients */
  --gradient-header: linear-gradient(
    to top,
    rgb(var(--header-gradient-color-bottom)) 0%,
    rgb(var(--header-gradient-color-middle)) 90%,
    rgb(var(--header-gradient-color-top)) 100%
  );
  --gradient-topmenu: linear-gradient(
    to bottom,
    rgba(var(--gray-monochrome), 1) 0,
    rgba(var(--dark-gray-monochrome), 1) 95%,
    rgba(var(--dark-gray-monochrome), 1) 100%
  );
  --diagonal-stripes: repeating-linear-gradient(
    45deg,
    hsla(0, 0%, 100%, 0),
    hsla(0, 0%, 100%, 0) 0.25vh,
    rgba(88, 88, 88, 0.1) 0.35vh,
    rgba(88, 88, 88, 0.2) 0.5vh
  );
  --gradient-background: linear-gradient(
    to bottom,
    rgba(var(--background-gradient-color), 1) 0%,
    rgba(var(--background-gradient-color), 0.987) 0.8%,
    rgba(var(--background-gradient-color), 0.951) 2.9%,
    rgba(var(--background-gradient-color), 0.896) 6.4%,
    rgba(var(--background-gradient-color), 0.825) 11%,
    rgba(var(--background-gradient-color), 0.741) 16.6%,
    rgba(var(--background-gradient-color), 0.648) 23.1%,
    rgba(var(--background-gradient-color), 0.550) 30.4%,
    rgba(var(--background-gradient-color), 0.450) 38.3%,
    rgba(var(--background-gradient-color), 0.352) 46.7%,
    rgba(var(--background-gradient-color), 0.259) 55.4%,
    rgba(var(--background-gradient-color), 0.175) 64.4%,
    rgba(var(--background-gradient-color), 0.104) 73.5%,
    rgba(var(--background-gradient-color), 0.049) 82.5%,
    rgba(var(--background-gradient-color), 0.013) 91.4%,
    rgba(var(--background-gradient-color), 0) 100%
  );
  /* Header Measurements */
  --header-height: 10rem;
  --topbar-height: 1.375rem;
  --final-header-height: -webkit-calc(var(--header-height) + var(--topbar-height));
  --final-header-height: -moz-calc(var(--header-height) + var(--topbar-height));
  --final-header-height: calc(var(--header-height) + var(--topbar-height));
  --background-gradient-distance: 40rem;
  /* Filter */
  --filter: hue-rotate(220deg);
  /* Ayers' Info Bar */
  --barColour: rgb(var(--dark-accent));
}
 
h1, #page-title {
  color: rgb(23, 24, 75);
  color: rgb(var(--dark-accent));
}
 
/* Anchor Links */
a {
  color: rgb(90, 121, 186);
  color: rgb(var(--link-color));
}
a:visited {
  color: rgb(103, 69, 152);
  color: rgb(var(--visited-link-color));
}
a.newpage {
  color: rgb(221, 102, 17);
  color: rgb(var(--newpage-color));
}
a:hover {
  color: rgb(103, 69, 152);
  color: rgb(var(--hover-link-color));
}
 
/* Header */
body {
  background-image: var(--gradient-header), var(--gradient-topmenu), var(--gradient-background);
  background-position: 0 0, 0 var(--header-height), 0 0;
  background-size: 100% var(--header-height), 100% var(--topbar-height), 100% var(--background-gradient-distance);
  background-repeat: repeat-x;
}
div#container-wrap {
  background-image: var(--diagonal-stripes);
  background-position: 0 0;
  background-size: 100% var(--header-height);
  background-repeat: no-repeat;
}
#header {
  height: var(--final-header-height);
  background-image: var(--logo-image);
  background-position: left -webkit-calc(30% - (var(--header-height) - 2.125rem)) top 1.1875rem;
  background-position: left -moz-calc(30% - (var(--header-height) - 2.125rem)) top 1.1875rem;
  background-position: left calc(30% - (var(--header-height) - 2.125rem)) top 1.1875rem;
  background-size: auto -webkit-calc(var(--header-height) - 2.125rem);
  background-size: auto -moz-calc(var(--header-height) - 2.125rem);
  background-size: auto calc(var(--header-height) - 2.125rem);
  background-repeat: no-repeat;
}
#header h1,
#header h2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: var(--header-height);
}
#header h1 a,
#header h2 span {
  margin: 0;
  padding: 0;
}
#header h1 a {
  font-family: var(--header-font);
}
#header h1 a::before {
  content: var(--header-title);
  font-size: 5.25rem;
  font-weight: 400;
}
#header > h1 > a > span {
  font-size: 0;
  color: transparent;
}
#header h2 span {
  color: transparent;
}
#header h2 span::before {
  content: var(--header-subtitle);
  display: block;
  color: transparent;
  text-align: center;
  font-size: 1.25rem;
}
@supports(-webkit-background-clip: text) {
#header h1 a::before {
  background-image: -webkit-linear-gradient(to bottom, rgba(var(--swatch-headerh1-color), 1) -webkit-calc(50% - 0.875rem), rgba(var(--swatch-headerh1-color), 0) -webkit-calc(50% - 0.875rem), rgba(var(--swatch-headerh1-color), 0) -webkit-calc(50% + 0.875rem), rgba(var(--swatch-headerh1-color), 1) -webkit-calc(50% + 0.875rem));
  background-image: -moz-linear-gradient(to bottom, rgba(var(--swatch-headerh1-color), 1) -moz-calc(50% - 0.875rem), rgba(var(--swatch-headerh1-color), 0) -moz-calc(50% - 0.875rem), rgba(var(--swatch-headerh1-color), 0) -moz-calc(50% + 0.875rem), rgba(var(--swatch-headerh1-color), 1) -moz-calc(50% + 0.875rem));
  background-image: linear-gradient(to bottom, rgba(var(--swatch-headerh1-color), 1) calc(50% - 0.875rem), rgba(var(--swatch-headerh1-color), 0) calc(50% - 0.875rem), rgba(var(--swatch-headerh1-color), 0) calc(50% + 0.875rem), rgba(var(--swatch-headerh1-color), 1) calc(50% + 0.875rem));
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#header h2 span::before {
  color: rgb(252, 252, 252);
  color: rgb(var(--swatch-headerh2-color));
}
}
 
/* Search Box */
#search-top-box {
  top: -webkit-calc(var(--header-height) * 0.67);
  top: -moz-calc(var(--header-height) * 0.67);
  top: calc(var(--header-height) * 0.67);
}
#search-top-box-input {
  border-radius: 0.1875rem;
  background-color: rgb(var(--black-monochrome));
}
#search-top-box-input:hover,
#search-top-box-input:focus {
  background-color: rgb(var(--dark-accent));
}
#search-top-box-form input[type=submit],
#search-top-box-form input[type=submit]:hover,
#search-top-box-form input[type=submit]:focus {
  border-radius: 0.1875rem;
  background-color: rgb(var(--pale-accent));
  background-image: linear-gradient(to bottom, rgb(var(--pale-accent)), rgb(var(--pale-accent)));
}
 
}
除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License