◆42Lab是非盈利性、非官方的云图计划维基百科。
◆诚邀指挥官们加入编辑部共同建设wiki。点这里加入42Lab
如果您发现某些内容错误/空缺,请勇于修正/添加!参与进来其实很容易!
◆有任何意见、建议、纠错,欢迎在任意评论区评论
◆编辑讨论QQ群741423564 微博@GFwiki少前百科 欢迎您

微件:AvgPlayer/styles.css

来自42LAB
  1. avg-container {
 background: gray;
 font-size: 16px;
 height: 540px;
 max-width: 100%;
 position: relative;
 width: 1200px;

}

  1. avg-container.hide-ui #avg-choices,
  2. avg-container.hide-ui #avg-controls,
  3. avg-container.hide-ui #avg-dialog {
 display: none;

}

  1. height-tester {
 color: #0000;
 font-size: 1.0625em;
 line-height: 1.2353;
 position: absolute;
 width: 20.5882em;
 z-index: -1;

}

  1. height-tester.type1 {
 font-size: 1.1875em;
 line-height: 2.0526;
 white-space: pre-wrap;
 width: 28em;

}

  1. height-tester span {
 opacity: 0;

}

  1. avg-stage {
 background: black;
 height: 100%;
 position: relative;
 width: 100%;
 z-index: 0;

}

  1. avg-controls {
 position: absolute;

}

  1. avg-bg {
 height: 100%;
 position: absolute;
 width: 100%;
 z-index: 0;

}

  1. avg-bg-overlay {
 background: radial-gradient(75% 80%, #0000 40%, #000000a0 75%);
 height: 100%;

}

  1. avg-bg-overlay.dark {
 background: radial-gradient(75% 80%, #00000040, #000000a0 50%);

}

  1. avg-charas {
 height: 100%;
 overflow: hidden;
 position: absolute;
 width: 100%;
 z-index: 1;

}

.avg-chara {

 position: absolute;
 z-index: 1;

}

.avg-chara.dark {

 filter: brightness(0.5);
 z-index: 0;

}

.avg-chara canvas {

 height: 100%;
 width: 100%;

}

.avg-chara div {

 border-image: url(/images/c/c9/AVG_%E9%80%9A%E8%AE%AF%E6%95%88%E6%9E%9C%E8%83%8C%E6%99%AF.png) 84 84 84 208 fill / 2.625em 2.625em 2.625em 6.5em;
 mix-blend-mode: color-dodge;
 position: absolute;

}

.avg-chara div::before {

 background: no-repeat center/18.5em 26.5em linear-gradient(#5a96b4, #5a96b4);
 content: ;
 display: block;
 height: 100%;
 mix-blend-mode: color;
 opacity: 0.3;
 width: 100%;

}

  1. avg-dialog {
 color: white;
 position: absolute;
 user-select: none;
 z-index: 2;

}

  1. avg-dialog.type1 {
 align-items: center;
 background: #000000c0;
 box-sizing: border-box;
 display: flex;
 font-size: 1.1875em;
 font-weight: 500;
 height: 100%;
 line-height: 2.0526;
 padding-bottom: 1em;
 padding-left: 10.2105em;
 white-space: pre-wrap;
 width: 100%;

}

  1. avg-dialog.type2 {
 background: #000000a0;
 bottom: 0;
 box-sizing: border-box;
 height: 9.5em;
 line-height: 1.25;
 padding: 2em 15em 0 15.1875em;
 width: 100%;

}

  1. avg-dialog.pos1,
  2. avg-dialog.pos2,
  3. avg-dialog.pos3 {
 border-image: url(/images/5/56/AVG_%E8%81%8A%E5%A4%A9%E7%AA%97.png) 26 42 fill / 0.8125em 1.3125em / 0.375em;
 bottom: 5.75em;
 line-height: 1.2353;
 padding: 0.5em 0.8125em 0.75em;
 width: 21.875em;

}

  1. avg-dialog.pos1 {
 left: 16.6875em;

}

  1. avg-dialog.pos2 {
 left: 26.0625em;

}

  1. avg-dialog.pos3 {
 right: 16.0625em;

}

  1. avg-dialog.type4 {
 background: #000000a0;
 bottom: 0;
 box-sizing: border-box;
 height: 9.5em;
 padding: 0.375em 14em 0 15.1875em;
 width: 100%;

}

  1. avg-dialog.type4 > span {
 display: block;

}

  1. avg-dialog.type5 {
 align-items: start;
 box-sizing: border-box;
 display: flex;
 height: 100%;
 justify-content: center;
 opacity: 1;
 top: 6.6875em;
 transition: opacity 0.2s, top 0.2s;
 width: 100%;

}

  1. avg-dialog.type5.fade-in {
 opacity: 0;
 top: 7.6875em;

}

  1. avg-dialog.type5.fade-out {
 opacity: 0;
 top: 5.6875em;

}

  1. avg-speaker {
 font-size: 1.0625em;

}

  1. avg-dialog.type4 #avg-speaker {
 color: #9e9e9e;
 font-size: 1.25em;
 line-height: 1.3;

}

  1. avg-dialog.pos1 #avg-speaker::after,
  2. avg-dialog.pos2 #avg-speaker::after,
  3. avg-dialog.pos3 #avg-speaker::after {
 content: ':';

}

  1. avg-line {
 font-size: 1.0625em;

}

  1. avg-dialog.type1 #avg-line {
 font-size: 1em;

}

  1. avg-dialog.type4 #avg-line {
 line-height: 1.25;

}

  1. avg-dialog.type5 #avg-line {
 background: white;
 color: black;
 padding: 0 0.25em;

}

span[data-ref] {

 color: #f57c00;
 text-decoration: underline;

}

  1. avg-line span[data-ref] {
 cursor: pointer;

}

  1. avg-choices {
 align-items: center;
 background: #00000040;
 box-sizing: border-box;
 counter-reset: option-counter;
 display: none;
 flex-direction: column;
 height: 100%;
 justify-content: center;
 opacity: 0;
 overflow-y: hidden;
 position: absolute;
 row-gap: 1.8125em;
 transition: opacity 0.2s, padding 0.2s;
 width: 100%;
 z-index: 3;

}

  1. avg-stage.choice #avg-choices {
 display: flex;

}

  1. avg-choices.choice {
 opacity: 1;
 padding-bottom: 2.5625em;

}

.avg-choice {

 background: no-repeat center/100% 3.5em url(/images/1/1f/AVG_%E6%8C%89%E9%92%AE%E8%83%8C%E6%99%AF.png);
 color: black;
 counter-increment: option-counter;
 cursor: pointer;
 padding: 0.4em 0;
 position: relative;
 text-align: center;
 width: 40.3125em;

}

.avg-choice::before {

 background: linear-gradient(90deg, #000d 80%, #0000);
 color: white;
 content: 'OPTIONS ' counter(option-counter);
 display: block;
 font-family: Mohave, Courier, monospace;
 font-size: 1.1875em;
 left: 1.1579em;
 padding-left: 0.2632em;
 position: absolute;
 text-align: left;
 top: -1.4474em;
 transform: scale(0.5);
 transform-origin: bottom left;
 width: 19.231%;

}

  1. avg-controls {
 box-sizing: border-box;
 color: white;
 column-gap: 1.375em;
 display: grid;
 grid-template-areas: "a b c . d e";
 grid-template-columns: repeat(3, 2.3125em) auto 5em 5em;
 height: 5.6875em;
 padding: 1.6875em 3.875em 1.6875em 5.125em;
 position: absolute;
 top: 0;
 width: 100%;
 z-index: 1;

}

  1. avg-controls > div {
 cursor: pointer;
 user-select: none;

}

  1. avg-control-log {
 background: no-repeat center/1.125em 1.25em url(/images/4/44/AVG_Log%E8%8F%9C%E5%8D%95Icon.png), black;
 grid-area: a;

}

  1. avg-control-hide-ui {
 background: no-repeat center/1.1875em 0.75em url(/images/6/65/%E9%9A%90%E8%97%8F.png), black;
 grid-area: b;

}

  1. avg-control-dict {
 background: no-repeat center/1.125em 1.25em url(/images/5/5e/AVG_%E8%AF%8D%E5%85%B8%E5%85%A5%E5%8F%A3.png), black;
 grid-area: c;

}

  1. avg-control-auto,
  2. avg-control-skip {
 align-items: center;
 column-gap: 0.5em;
 display: flex;
 filter: brightness(0.67);
 font-size: 1.125em;
 padding-bottom: 0.2222em;

}

  1. avg-control-auto {
 grid-area: d;

}

  1. avg-control-auto.on {
 filter: none;

}

  1. avg-control-skip {
 grid-area: e;

}

  1. avg-control-fullscreen,
  2. avg-control-orientation {
 align-items: center;
 display: flex;
 font-size: 1.125em;
 height: 1.8333em;
 justify-content: center;
 padding-bottom: 0.2222em;
 position: absolute;
 top: 1.5em;
 width: 3em;

}

  1. avg-control-fullscreen {
 right: 14.7778em;

}

  1. avg-control-orientation {
 right: 19em;

}

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

 #avg-controls > div:not(#avg-control-fullscreen) {
   display: none;
 }
 #avg-controls > #avg-control-fullscreen {
   background: black;
   height: 540px;
   padding-bottom: 0;
   right: 0;
   top: 0;
   width: 100%;
 }
 #avg-control-fullscreen::before {
   content: '点击以';
 }
 #avg-container.empty #avg-control-fullscreen::before {
   content: '选择剧情以开始';
 }
 #avg-container:fullscreen #avg-control-fullscreen::before {
   content: '旋转至横屏以';
 }
 #avg-control-fullscreen::after {
   content: '播放';
 }
 #avg-container:fullscreen #avg-control-fullscreen::after {
   content: '播放,点击退出全屏';
 }

}

  1. avg-controls .oo-ui-iconWidget {
 filter: invert(1);

}

  1. avg-overlay {
 display: none;
 height: 100%;
 position: absolute;
 top: 0;
 width: 100%;
 z-index: 2;

}

  1. avg-overlay.des,
  2. avg-overlay.log,
  3. avg-overlay.skip {
 display: block;

}

  1. avg-log {
 background: #000000c0;
 box-sizing: border-box;
 color: white;
 display: none;
 height: 100%;
 padding: 5.5625em 11.4375em 4.6875em 12.875em;
 width: 100%;

}

  1. avg-overlay.log #avg-log {
 display: block;

}

  1. avg-log-box {
 background: #38383890;
 box-sizing: border-box;
 height: 100%;
 overflow-y: scroll;
 padding: 2.8125em 0 2.3125em;
 width: 100%;

}

.avg-log-div {

 column-gap: 1.4375em;
 display: grid;
 grid-template-columns: 6.0625em auto;
 padding: 0 2em;

}

.avg-log-div div:first-child {

 color: #a0a0a0;
 font-size: 0.9375em;
 text-align: right;

}

.avg-log-div div:last-child {

 font-size: 1.0625em;
 white-space: pre-wrap;

}

.avg-log-div p {

 line-height: 1.4559;
 margin: 0 0 0.5882em;

}

.avg-log-div .selected {

 color: orange;

}

  1. avg-skip {
 background: #000000b0;
 box-sizing: border-box;
 display: none;
 height: 100%;
 padding: 8.875em 10.25em;
 position: absolute;
 width: 100%;

}

  1. avg-overlay.skip #avg-skip {
 display: block;

}

  1. avg-skip-dialog {
 border-image: url(/images/3/36/AVG%E8%B7%B3%E8%BF%87_%E5%BA%95.png) 56 56 128 fill / 1.75em 1.75em 4em / 1.5em 0 0;
 color: white;
 position: relative;

}

  1. avg-location {
 color: #a0a0a0;
 left: 1em;
 position: absolute;
 top: -1.5em;
 transform: scale(0.84375);
 transform-origin: top left;
 user-select: none;

}

  1. avg-sector-en {
 position: absolute;
 top: 0.4em;
 transform: scale(0.45);
 transform-origin: top left;

}

  1. avg-sector-location {
 margin-top: 0.8em;

}

  1. avg-skip-title {
 font-size: 1.5em;
 line-height: 1;
 margin-top: 1.0417em;
 text-align: center;

}

  1. avg-scene-brief {
 font-size: 1.125em;
 height: 4.7778em;
 line-height: 1.2;
 padding: 0.6667em 1.7778em;

}

  1. avg-skip-buttons {
 column-gap: 0.125em;
 display: grid;
 grid-template-columns: 1fr 1fr;
 height: 2.5625em;
 margin: 2.25em 0.25em 0.25em;
 padding: 0.625em 0.375em;
 position: relative;
 text-align: center;

}

  1. avg-skip-buttons::before {
 color: #a0a0a0;
 content: '是否跳过本次剧情?';
 display: block;
 font-size: 1.125em;
 left: 0;
 position: absolute;
 text-align: center;
 top: -1.6667em;
 width: 100%;

}

  1. avg-skip-buttons div {
 cursor: pointer;
 flex: 1;
 font-size: 1.125em;
 user-select: none;

}

  1. avg-skip-cancel {
 background: url(/images/7/77/%E9%80%9A%E7%94%A8_%E5%8F%96%E6%B6%88Icon.png) no-repeat calc(50% - 1.0833em) center/1.1111em, #501010;
 padding: 0.3889em 0 0 2.0556em;

}

  1. avg-skip-confirm {
 background: url(/images/5/56/%E9%80%9A%E7%94%A8_%E7%A1%AE%E8%AE%A4Icon.png) no-repeat calc(50% - 1.1389em) center/1.1111em, #505050;
 padding: 0.3889em 0 0 2.6667em;

}