Difference between revisions of "Template:VN Screen"

From The Wiki Camp 2
Jump to navigation Jump to search
(Alright, let's get back in business.)
 
m (Forgot to disable something)
 
(30 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
Shit it's five fucking AM there's only ten hours left oh good God let's roll
+
<templatestyles src="VN_Screen.css"/>
 +
{{#if: {{{prior|}}}|<div class="mw-collapsible mw-made-collapsible mw-collapsed" id="mw-customcollapsible-{{{prior}}}">|}}
 +
{{#if: {{{next|}}}|<div class="mw-collapsible mw-made-collapsible" id="mw-customcollapsible-{{{next}}}">|}}
 +
<div id="mock-wrapper">
 +
  <div class="screen-box">
 +
    {{#if: {{{keyboard|}}}| <div class="layer layer-seven"><div class="keyboard">{{{keyboard|}}}</div></div>|}}
 +
    {{#if: {{{nonav|}}}||<div class="layer layer-six">
 +
      <div class="button back-button {{#if: {{{prior|}}}|mw-customtoggle-{{{prior}}}|}}" {{#if: {{{noback|}}}|style="display:none;"|}} {{#if: {{{noforward|}}}|style="width:100%;"|}}></div>
 +
      <div class="button forward-button {{#if: {{{next|}}}|mw-customtoggle-{{{next}}}|}}" {{#if: {{{noback|}}}|style="width:100%;"|}} {{#if: {{{noforward|}}}|style="display:none;"|}}></div>
 +
    </div>}}
 +
    <div class="layer layer-two">
 +
      {{#if: {{{bg|}}}|[[File:{{{bg}}}.png]]|}}
 +
    </div>
 +
    <div class="layer layer-three">
 +
      <div class="portraits">
 +
        <div class="portrait stage-left {{#if: {{{flip|}}}|flip|}}" {{#if: {{{logo|}}}|style="display:none"|}}>
 +
          {{#if: {{{left|}}}|[[File:{{{left}}}.png]]|}}
 +
        </div>
 +
        <div class="portrait stage-right {{#if: {{{logo|}}}|vnlogo|{{#if: {{{middle|}}}|sprite-middle|}}}}>
 +
          {{#if: {{{right|}}}|[[File:{{{right}}}.png]]|}}
 +
          {{#if: {{{middle|}}}|[[File:{{{middle}}}.png]]|}}
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <div class="layer layer-four">
 +
      <div class="spacer-top">
 +
        <div class="nameplate" {{#if: {{{noname|}}}|style="display:none"|}}>
 +
          <p>{{{speaker|}}}</p>
 +
        </div>
 +
      </div>
 +
      <div class="dialogue {{#if: {{{normal|}}}|normal|}} {{#if: {{{plaid|}}}|plaid|}} {{#if: {{{blackout|}}}|blackout|}} {{#if: {{{notext|}}}|vanish|}}" {{#if: {{{notext|}}}|style="display:none;"|}>
 +
        <p class="dialogue-text">{{{dialogue|}}}</p>
 +
      </div>
 +
      <div class="spacer-bottom"></div>
 +
    </div>
 +
  </div>
 +
</div>
 +
{{#if: {{{next|}}}|</div>|}}
 +
{{#if: {{{prior|}}}|</div>|}}<noinclude>
 +
{{#css:
 +
p{
 +
  padding: 0;
 +
  margin: 0;
 +
  margin-block-start: 0;
 +
  margin-block-end: 0;
 +
}
 +
 
 +
.screen-box{
 +
  aspect-ratio: 16/9;
 +
  width:100%;
 +
  border: 1px black solid;
 +
  position: relative;
 +
}
 +
 
 +
.layer{
 +
  position:absolute;
 +
  width: 100%;
 +
  height: 100%;
 +
  display: flex;
 +
}
 +
 
 +
.layer-seven {
 +
  z-index: 7;
 +
}
 +
.layer-six {
 +
  z-index: 6;
 +
}
 +
.layer-four {
 +
  z-index: 4;
 +
  justify-content: center;
 +
  align-items: center;
 +
  flex-direction: column;
 +
}
 +
 
 +
.layer-three {
 +
  z-index: 3;
 +
}
 +
 
 +
.layer-two {
 +
  z-index: 2;
 +
}
 +
.layer-two > pre, .layer-two > pre > a, .layer-two > pre > a > img  {
 +
  height: 100%;
 +
  width: 100%;
 +
}
 +
 
 +
img {
 +
    width: 100%;
 +
    object-fit: cover;
 +
}
 +
 
 +
.layer-one {
 +
  z-index: 1;
 +
}
 +
 
 +
.back-button{
 +
  width: 20%;
 +
  height: 100%;
 +
}
 +
 
 +
.forward-button{
 +
  width: 80%;
 +
  height: 100%;
 +
}
 +
 
 +
#mock-wrapper{
 +
  width:70%;
 +
}
 +
 
 +
.portraits{
 +
  position:absolute;
 +
  display:flex;
 +
  justify-content: space-around;
 +
  height:100%;
 +
  width:100%;
 +
}
 +
 
 +
.stage-left, .stage-right {
 +
  width: 40%;
 +
}
 +
 
 +
 
 +
.flip > pre {
 +
  transform: scaleX(-1);
 +
}
 +
.stage-right > pre {
 +
}
 +
 
 +
.portrait > pre > a > img {
 +
  height: 70%!important;
 +
}
 +
/*.dialogue-container{
 +
  background: white;
 +
  padding: 20px;
 +
  border-radius: 0 20px 20px 20px;
 +
}*/
 +
.dialogue{
 +
  width: 93%;
 +
  height: 23%;
 +
  background:rgb(255, 230, 230);
 +
  border-radius: 0 20px 20px 20px;
 +
  box-shadow: 0 0 0 6px white, 0 0 0 9px red, 0 0 0 16px white;
 +
}
 +
.spacer-top{
 +
  height:70%;
 +
  width:93%;
 +
  display: flex;
 +
  align-items: flex-end;
 +
}
 +
.spacer-bottom{
 +
  height:5%;
 +
}
 +
.nameplate{
 +
  display: flex;
 +
  flex-direction: column;
 +
  justify-content: center;
 +
  padding: 0px 20px 0px 10px;
 +
  width: fit-content;
 +
  height: 5%;
 +
  background: white;
 +
  transform: translateY(-15px);
 +
  border-radius: 0px 40px 0 0;
 +
  box-shadow: 0 0 0 6px white, 0 0 0 9px red, -5px -5px 0 11px white, 4px -5px 0 11px white;
 +
  z-index: 5;
 +
}
 +
.nameplate > p{
 +
  margin: 0!important;
 +
}
 +
.dialogue-text{
 +
  margin:10px!important;
 +
  font-size: 1.5em;
 +
  font-family:"Arial";
 +
  color: white;
 +
  text-shadow: -1px -1px black, -1px 1px black, 1px -1px black, 1px 1px black;
 +
}
 +
pre{
 +
  background-color: transparent!important;
 +
  border: 0px!important;
 +
  margin: 0px!important;
 +
  padding: 0px!important;
 +
  white-space: normal;
 +
}
 +
.blackout{
 +
  background: black;
 +
}
 +
.normal{
 +
  background: #3DD8FF;
 +
}
 +
.plaid {
 +
  background-image:
 +
    repeating-linear-gradient(0deg,
 +
      rgba(255, 151, 244, 0),
 +
      rgba(255, 151, 244, 0) 7%,
 +
      rgba(255, 151, 244, 0.5) 7%,
 +
      rgba(255, 151, 244, 0.5) 14%),
 +
    repeating-linear-gradient(90deg,
 +
      rgba(255, 151, 244, 0),
 +
      rgba(255, 151, 244, 0) 1%,
 +
      rgba(255, 151, 244, 0.5) 1%,
 +
      rgba(255, 151, 244, 0.5) 2%);
 +
  margin: 0;
 +
  overflow: hidden;
 +
  position: relative;
 +
}
 +
}}</noinclude>

Latest revision as of 18:34, 2 May 2023




Retrieved from "https://camp2.rectangle.zone/index.php?title=Template:VN_Screen&oldid=76714"