181 rivejä
6.5 KiB
CSS
181 rivejä
6.5 KiB
CSS
@font-face {
|
|
font-family: FOT-RodinNTLGPro-B_0;
|
|
src: url(../Fonts/FOT-RodinNTLGPro-B_0.woff2) format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: FOT-RodinNTLGPro;
|
|
src: url(../Fonts/FOT-RodinNTLGPro-M.woff2) format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: FOT-RodinNTLGPro;
|
|
src: url(../Fonts/FOT-RodinNTLGPro-DB.woff2) format('woff');
|
|
font-weight: bold;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Orbitron-Black;
|
|
src: url(../Fonts/Orbitron Black.woff2) format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Orbitron-Bold;
|
|
src: url(../Fonts/Orbitron Bold.woff2) format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Orbitron-Light;
|
|
src: url(../Fonts/Orbitron Light.woff2) format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Orbitron-Medium;
|
|
src: url(../Fonts/Orbitron Medium.woff2) format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Orbitron-Medium;
|
|
src: url(../Fonts/Orbitron Medium.woff2) format('woff');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: PTSans;
|
|
src: url(../Fonts/PTSans.woff2) format('woff');
|
|
}
|
|
|
|
/*@font-face {
|
|
font-family: SourceSansVariable-Roman;
|
|
src: url(../Fonts/SourceSansVariable-Roman.woff2) format('woff');
|
|
}*/
|
|
|
|
@-webkit-keyframes smallbounce {
|
|
from { transform: translate(0, 5px); }
|
|
to { transform: translate(0, -5px); }
|
|
}
|
|
@-moz-keyframes smallbounce {
|
|
from { transform: translate(0, 5px); }
|
|
to { transform: translate(0, -5px); }
|
|
}
|
|
@keyframes smallbounce {
|
|
from { transform: translate(0, 5px); }
|
|
to { transform: translate(0, -5px); }
|
|
}
|
|
|
|
html { height: 100%; }
|
|
|
|
body { margin: 0; height: 100%; }
|
|
|
|
.flex-grow { flex-grow: 1; }
|
|
|
|
.hidden { opacity: 0; }
|
|
|
|
.shown { opacity: 0; }
|
|
|
|
#app-container { position: relative; width: 1334px; height: 750px; display: flex; justify-content: center; align-items: center; }
|
|
|
|
#parent-container { height: 100%; display: flex; flex-direction: column; align-items: center; }
|
|
|
|
#text-container { color: white; position: absolute; margin: auto; height: 750px; width: 1334px; font-family: 'FOT-RodinNTLGPro'; }
|
|
|
|
#text-container.eng { font-family: 'FOT-RodinNTLGPro'; }
|
|
|
|
#text-container.jpn { font-family: 'FOT-RodinNTLGPro'; }
|
|
|
|
#text-container.rus { font-family: 'PTSans'; }
|
|
|
|
#text-container.cze { font-family: 'PTSans'; }
|
|
|
|
#text-container #fullscreen-button { position: absolute; top: 0.5rem; left: 0.5rem; font-size: 30px; line-height: 30px; opacity: 0.35; z-index: 11; }
|
|
|
|
#text-container #title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 20px; transition: opacity 0.3s; cursor: default; user-select: none; }
|
|
|
|
#text-container #diva { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 34px; transition: opacity 0.3s; cursor: default; user-select: none; }
|
|
|
|
#text-container #dialog-box { box-sizing: border-box; position: absolute; bottom: 0; text-align: left; width: 100%; height: 200px; }
|
|
|
|
#text-container #main-ui-img { width: 100%; height:100%; transition: opacity 0.1s; }
|
|
|
|
#dialog-box { font-weight: bold; text-shadow: 1px 1px 6px black; transition: opacity 0.1s; }
|
|
|
|
#dialog-box #character { position: absolute; left: 70px; font-size: 30px; cursor: default; user-select: none; }
|
|
|
|
#dialog-box #dialog { overflow: hidden; position: absolute; padding: 0 30px 0 70px; margin-top: 60px; box-sizing: border-box; height: 120px; width: 100%; font-size: 28px; font-weight: normal; line-height: 68px; }
|
|
|
|
#dialog #dialog-inner { max-width: 1125px; cursor: default; user-select: none; }
|
|
|
|
#dialog b { font-weight: bold; }
|
|
|
|
#dialog-box #ui-buttons { right: 20px; top: -50px; position: absolute; }
|
|
|
|
#dialog-box .ui-button { position: relative; height: 85px; }
|
|
|
|
#dialog #dialog-controls { position: fixed; right: 0; display: flex; height: 135px; align-items: center; }
|
|
|
|
#dialog-controls #dialog-next { margin-right: 37px; animation: smallbounce 0.5s ease-in-out 0s infinite alternate; }
|
|
|
|
#dialog-next img { height: 80px; }
|
|
|
|
#dialog-controls #dialog-scroll { display: flex; flex-direction: column; height: 80px; margin-right: 30px; justify-content: space-between; }
|
|
|
|
#dialog-scroll #dialog-scroll-up { transform: scale(1, -1); }
|
|
|
|
#dialog-scroll img { height: 35px; }
|
|
|
|
#title-container { padding: 2px 0; }
|
|
|
|
#other-controls-container { padding-bottom: 4px; display: flex; width: 100%; justify-content: center; align-items: center; z-index: 10; }
|
|
|
|
#select-quest { min-width: 0; width: 25% }
|
|
|
|
#select-scene { min-width: 0; width: 25% }
|
|
|
|
#select-language { margin-left: 10px; }
|
|
|
|
#volume-control { display: flex; margin-right: 10px; }
|
|
|
|
#volume-control #mute-button { cursor: pointer; }
|
|
|
|
#click-catcher { background-color: #000000; opacity: 0.7; position: fixed; z-index: 15; top: 0; bottom: 0; left: 0; right: 0; }
|
|
|
|
#modal-container { position: fixed; z-index: 16; top: 50%; left: 50%; transform: translate(-50%, -50%); }
|
|
|
|
.modal { background-color: #393939; color: #F0F0F0; height: 425px; width: 350px; position: relative; margin: auto; display: flex; flex-direction: column; align-items: center; box-shadow: 0px 0px 20px 3px #070707; border-radius: 7px; box-sizing: border-box; padding: 10px; }
|
|
|
|
#mission-modal { }
|
|
|
|
#mission-modal #mission-detail { display: block; width: 100%; margin: 10px 0 10px 0; object-fit: contain; }
|
|
|
|
#mission-modal #mission-icon { display: none; margin: 10px 0 10px 0; object-fit: contain; }
|
|
|
|
#mission-modal #mission-summary { max-width: 100%; word-break: break-word; margin-bottom: 5px; min-height: 0; overflow-y: auto; }
|
|
|
|
#mission-modal .mission-title { font-weight: bold; text-align: center; }
|
|
|
|
#mission-modal #mission-ids { margin: 5px 0 5px 0; width: 100%; display: flex; flex-direction: column; align-items: center; min-height: 21px; }
|
|
|
|
#mission-modal #mission-ids div { display: flex; align-items: center; }
|
|
|
|
#modal-buttons { bottom: 0; margin-top: auto; width: 100%; display: flex; justify-content: space-between; min-height: 21px; }
|
|
|
|
#mission-modal .follow-links { margin-top: auto; display: flex; flex-direction: column; text-align: center; width:100%; }
|
|
|
|
#mission-modal .follow-links .follow-links-header { font-weight: bold; }
|
|
|
|
#mission-modal .follow-links .follow-links-links { display: flex; flex-direction: row; justify-content: space-around; margin-top: 5px; }
|
|
|
|
@media screen and (max-width: 812px) {
|
|
#modal-container { top: 0; bottom: 0; left: 0; right: 0; transform: none; }
|
|
.modal { width: 100%; height: 100%; border-radius: 0; }
|
|
#other-controls-container { width: 100vw; }
|
|
}
|
|
|
|
@media screen and (max-width: 411px) {
|
|
#volume-range { width: 100px; }
|
|
}
|
|
|
|
@media screen and (max-height: 600px) {
|
|
#mission-modal #mission-detail { display: none; }
|
|
#mission-modal #mission-icon { display: block; max-height: 20%; margin: 10px 0 10px 0; object-fit: contain; }
|
|
}
|