xdu/xduplayer
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added mission select modal.

Browse source 
Changed file structure so images called like file:// can be loaded properly.
Some commenting.
This commit is contained in:
firebingo 2018-04-28 17:36:08 -07:00
parent 7a5c02d736
commit 57ddeb08f4
10 changed files with 11242 additions and 10670 deletions
Download patch file Download diff file Expand all files Collapse all files

29
Css/main.css
View file

@ -108,6 +108,33 @@
#volume-control #mute-button { cursor: pointer; }
@media screen and (max-width: 550px) {
#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; }
}