模板:Common.css

/* Footnotes */
.lcs-container { border: none !important; box-shadow: 9px 0px 0 var(--theme-page-background-color), 10px 0px 0 var(--theme-border-color); }

.homepagetop::after {
    content: "";
    display: inline-block;
    width: 4rem;
    background: var(--theme-sticky-nav-background-color);
    clip-path: polygon(0 0, 0 100%, 100% 0);
    margin-left: -0.5px;
}

.title {
   background: var(--theme-sticky-nav-background-color);
   padding: 0 1rem 0 1rem;
}

.homepagetop .title:before { content: "» "; }

.homepagetop {
    display: inline-flex;
    position: absolute;
    top: -0.4em;
    left: -1px;
    color: var(--theme-sticky-nav-text-color);
    font-size: 110%;
    font-weight: bold;
    z-index: 4;
}

.logobox::after {
    content: "";
    float: center;
    border: solid 2px #0000;
    background: url(https://static.wikia.nocookie.net/backrooms/images/a/a1/Sd-hexagon.png) center/25% no-repeat;
    opacity: 0.25;
    top: 0; left: 0; bottom: 0; right: 0;
    position: absolute;
    z-index: 1;
}

.homepagetop a { color: white;
}

.homepagebottom a { color: white;
}

.homepagebottom a:before { content: "↳ ";
}

.homepagebottom {
    display: inline-flex;
    position: absolute;
	bottom: -0.5em;
	right: -1px;
    color: var(--theme-sticky-nav-text-color);
    font-size: 90%;
    font-style: italic;
    z-index: 4;
}

.homepagebottom::before {
    content: "";
    display: inline-block;
    width: 4rem;
    background: var(--theme-sticky-nav-background-color);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    margin-right: -0.5px;
}

.homebox {
    background: linear-gradient(135deg, #0000, #fff1, #0000), var(--theme-page-background-color--secondary);
    color: rgb(var(--theme-page-text-color--rgb));
    padding: 2em 1rem 2em 1rem;
    margin: 0.5rem 0 0.5rem 0.25rem;
    box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
    border-left: solid 0.2em var(--theme-sticky-nav-background-color);
    border-right: solid 0.2em var(--theme-sticky-nav-background-color);
    border-top: solid 0.6em var(--theme-sticky-nav-background-color);
    border-bottom: solid 0.6em var(--theme-sticky-nav-background-color);
}

.DiscordWidget { 
	box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25) !important;
}

.linkbox { transition: 0.5s; position: relative; }

.linkbox:hover {
cursor: pointer;
filter: brightness(125%);
}

.areyounew a { font-style: normal !important; }

.available { background: linear-gradient(135deg, #0000, #fff2, #0000), var(--theme-page-background-color--secondary); }

/* Redirect */
.footer-wikiwalk-wrapper { 
	height:2em;
	display: flex;
	justify-content: space-evenly;
	align-content: center;
	flex-direction: column-reverse; 
}

.footer-wikiwalk-nav a { 
	transition: 0.5s;
}

.footer-wikiwalk-nav a:hover { 
	font-size: 150%; 
	color: #ff6d6d; 
}

.footer-wikiwalk-nav p { 
	display: flex; 
	flex-direction: row;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.footer-wikiwalk-nav { 
	font-weight: bold;
	font-size: 80%;
}

/* Alt SD Class */
.sd-container.newsd {
  display: grid;
  grid-template-areas:
  'number border class exit'
  'number border environment entity';
  grid-gap: 10px;
  grid-template-columns:12rem 1px 1fr 1fr;
  grid-auto-rows: 1fr;
  text-align: center;
}

.newsd p { margin: 0; }

.number { 
   grid-area: number; 
   letter-spacing: 0.1rem;
   text-align: center; 
   font-size: 1.5rem;
   position: relative;
   display: flex;
   flex-direction: column;
}

.number .no {
   font-size: 3rem;
   letter-spacing: 0.1rem;
}

.number p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100% - 47px);
    flex-grow: 2;
    line-height: 2.5rem;
}

.lines { 
  height: 47px;
  background-image: linear-gradient(
  rgb(var(--sdgrad)) 0,
  rgb(var(--sdgrad)) 7px,
  transparent 7px,
  transparent 10px,
  rgb(var(--sdgrad)) 10px,
  rgb(var(--sdgrad)) 17px,
  transparent 17px,
  transparent 20px,
  rgb(var(--sdgrad)) 20px,
  rgb(var(--sdgrad)) 27px,
  transparent 27px,
  transparent 30px,
  rgb(var(--sdgrad)) 30px,
  rgb(var(--sdgrad)) 37px,
  transparent 37px,
  transparent 40px,
  rgb(var(--sdgrad)) 40px,
  rgb(var(--sdgrad)) 47px
  );
}

.class { 
   grid-area: class;
   padding: 0.4rem 0;
}

span.sd {
    font-size: 0.8rem;
    letter-spacing: 0.1rem;
}

.exit { 
   grid-area: exit; 
}

.environment { 
   grid-area: environment; 
}

.entity { 
   grid-area: entity; 
}

.border { 
   grid-area: border;
   background: var(--theme-border-color);
}

.indicator {
   background: rgba(var(--bg),0.3);
   border-left: solid 0.4rem rgb(var(--bg));
   padding: 0.4rem 2rem 0.4rem 0.4rem;
}

.indicator span {  
    font-size: 0.8rem;
    letter-spacing: 0.1rem;
}

.in-0 { --bg: 247,227,117; }
.in-1 { --bg: 255,201,14; }
.in-2 { --bg: 245,156,0; }
.in-3 { --bg: 249,90,0; }
.in-4 { --bg: 254,23,1; }
.in-5 { --bg: 175,6,6; }

.newsd.class-0  { --sdgrad: 247,227,117; }
.newsd.class-1  { --sdgrad: 255,201,14; }
.newsd.class-2  { --sdgrad: 245,156,0; }
.newsd.class-3  { --sdgrad: 249,90,0; }
.newsd.class-4  { --sdgrad: 254,23,1; }
.newsd.class-5 { --sdgrad: 175,6,6; }

.class, .indicator {
    display: flex;
    align-items: center;
    font-size: 1.7rem;
    justify-content: center;
}

.class p, .indicator p {
	line-height: 1.5rem;
}

.newsd.class-5 .lines { height: 47px; }
.newsd.class-4 .lines { height: 37px; }
.newsd.class-3 .lines { height: 27px; }
.newsd.class-2 .lines { height: 17px; }
.newsd.class-1 .lines { height: 7px; }
.newsd.class-0 .lines { height: 0; }

@media only screen and (max-width: 1070px) {

.sd-container.newsd {
  grid-template-areas:
  'number number'
  'border border' 
  'class exit'
  'environment entity';
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto 1px 1fr 1fr;
}

.newsd .number p {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.7rem;
    flex-direction: row;
    height: 3rem;
    background: none;
}

}

@media only screen and (max-width: 620px) {

.sd-container.newsd {
  grid-template-areas:
  'number'
  'border' 
  'class' 
  'exit'
  'environment' 
  'entity' !important; /* !important to override #ifexpr style= thing */
  grid-template-columns: 1fr !important; 
  grid-auto-rows: auto auto 1fr 1fr 1fr 1fr; 
}

.border { height: 1px; }

}

/* Modal */
.modal-container pre { width: 0; height: 0; padding: 0; opacity: 0; }

/* Fullscreen */
#modalbox-1, #modalbox-2, #modalbox-3, #modalbox-4, #modalbox-5, #modalbox-6, #modalbox-7, #modalbox-8, #modalbox-9, #modalbox-10, #fullscreen-1, #fullscreen-2, #fullscreen-3, #fullscreen-4, #fullscreen-5, #fullscreen-6, #fullscreen-7, #fullscreen-8, #fullscreen-9, #fullscreen-10 {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	display: none;
}

#modalbox-1:target, #modalbox-2:target, #modalbox-3:target, #modalbox-4:target, #modalbox-5:target, #modalbox-6:target, #modalbox-7:target, #modalbox-8:target, #modalbox-9:target, #modalbox-10:target, #fullscreen-1:target, #fullscreen-2:target, #fullscreen-3:target, #fullscreen-4:target, #fullscreen-5:target, #fullscreen-6:target, #fullscreen-7:target, #fullscreen-8:target, #fullscreen-9:target, #fullscreen-10:target {
	display: block;
}

/* Scrollimage */
.scrollimage-container { border-bottom: 1px solid var(--theme-border-color); }
.scrollimage-container img {
  width: 100%;
  height: 8rem;
  animation-name: movescroller, bluryeah;
  animation-duration: 40s, 15s;
  animation-iteration-count: infinite;
  object-position: center 25%;
  object-fit: cover;
}

@keyframes movescroller {
  0%   {object-position: center 45%;}
  25%  {object-position: center 55%;}
  50% { object-position: center 45%;}
  60%  {object-position: center 55%;}
  70% { object-position: center 45%;}
  85%  {object-position: center 55%;}
  100% { object-position: center 45%;}
}

@keyframes bluryeah {
  0%   {filter: blur(3px);}
  23%   {filter: blur(4px);}
  31%   {filter: blur(2px);}
  54%   {filter: blur(7px);}
  68%   {filter: blur(0px);}
  75%   {filter: blur(6px);}
  83%   {filter: blur(8px);}
  92%   {filter: blur(2px);}
  100%  {filter: blur(3px);}
}

/* Warningbox */
.theme-fandomdesktop-dark .warningbox { color: white; }
.theme-fandomdesktop-dark .wb-gray { background-color: #333333; border-color: #545454; }
.theme-fandomdesktop-dark .wb-red { background-color: #330000; border-color: #540000; }
.theme-fandomdesktop-dark .wb-yellow { background-color: #333300; border-color: #545400; }
.theme-fandomdesktop-dark .wb-green { background-color: #003300; border-color: #005400; }
.theme-fandomdesktop-dark .wb-cyan { background-color: #003333; border-color: #005454; }
.theme-fandomdesktop-dark .wb-blue { background-color: #000033; border-color: #000054; }
.theme-fandomdesktop-dark .wb-magenta { background-color: #330033; border-color: #540054; }

.theme-fandomdesktop-light .warningbox { color: black; }
.theme-fandomdesktop-light .wb-gray { background-color: #666666; border-color: #000000; }
.theme-fandomdesktop-light .wb-red { background-color: #ff6666; border-color: #990000; }
.theme-fandomdesktop-light .wb-yellow { background-color: #ffff66; border-color: #999900; }
.theme-fandomdesktop-light .wb-green { background-color: #66ff66; border-color: #009900; }
.theme-fandomdesktop-light .wb-cyan { background-color: #66ffff; border-color: #009999; }
.theme-fandomdesktop-light .wb-blue { background-color: #6666ff; border-color: #000099; }
.theme-fandomdesktop-light .wb-magenta { background-color: #ff66ff; border-color: #990099; }

/* Toggle CSS */
.css-button { border-style: solid !important; border-width: 4px !important; margin: 15px !important; }
.theme-fandomdesktop-dark .css-button { background: white !important; color: black !important; border-color: black !important; }
.theme-fandomdesktop-light .css-button { background: black !important; color: white !important; border-color: white !important; }
.theme-fandomdesktop-dark .css-button:hover { box-shadow: 0 0 5px white, 0 0 10px white !important; }
.theme-fandomdesktop-light .css-button:hover { box-shadow: 0 0 5px black, 0 0 10px black !important; }