firebingo
3b91e57a1c
Punch position uses the actual easing from utage now. Fix audio context not being able to be created without user input in some new browsers. Some changes for diva fades. Made ui image match games slightly more. Disabled select on text since you can't select it without triggering next anyways. Various other minor fixes.
140 lines
5.2 KiB
CSS
140 lines
5.2 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: SourceCodePro-Regular;
|
|
src: url(../Fonts/SourceCodePro-Regular.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); }
|
|
}
|
|
|
|
.centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
|
|
|
|
.hidden { opacity: 0; }
|
|
|
|
.shown { opacity: 0; }
|
|
|
|
#app-container { position: relative; width: 1334px; height: 750px; display: flex; justify-content: center; align-items: center; }
|
|
|
|
#parent-container { display: flex; flex-direction: column; align-items: center; }
|
|
|
|
#text-container { position: absolute; margin: auto; height: 750px; width: 1334px; font-family: 'FOT-RodinNTLGPro'; }
|
|
|
|
#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%; transition: opacity 0.1s; }
|
|
|
|
#dialog-box { color: white; font-weight: bold; text-shadow: 1px 1px 6px black; transition: opacity 0.1s; }
|
|
|
|
#dialog-box #character { position: absolute; top: -5px; 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; }
|
|
|
|
#other-controls-container { display: flex; width: 550px; justify-content: center; }
|
|
|
|
#select-mission { min-width: 0; }
|
|
|
|
#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: 400px; 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 span { max-width: 100%; word-break: break-word; max-height: 120px; overflow: auto;}
|
|
|
|
#mission-modal .mission-title { text-align: center; }
|
|
|
|
#mission-modal #mission-ids { margin-top: auto; width: 100%; display: flex; justify-content: space-around; }
|
|
|
|
#modal-buttons { bottom: 0; margin-top: 10px; width: 100%; display: flex; justify-content: space-between; }
|
|
|
|
@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-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; }
|
|
} |