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

DPI is now taken into account when resizing.

Browse source 
Added credits to mission modal.
Added ability to go fullscreen.
This commit is contained in:
firebingo 2018-06-13 21:02:19 -07:00
parent 47451eea7e
commit 8780cc2721
6 changed files with 83 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

12
Css/main.css
View file

@ -54,6 +54,8 @@
body { margin: 0; }
.flex-grow { flex-grow: 1; }
.centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.hidden { opacity: 0; }
@ -66,6 +68,8 @@ body { margin: 0; }
#text-container { color: white; position: absolute; margin: auto; height: 750px; width: 1334px; font-family: 'FOT-RodinNTLGPro'; }
#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; }
@ -116,7 +120,7 @@ body { margin: 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; }
.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 { }
@ -124,15 +128,15 @@ body { margin: 0; }
#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-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-top: auto; width: 100%; display: flex; flex-direction: column; align-items: 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; }
#modal-buttons { bottom: 0; margin-top: auto; width: 100%; display: flex; justify-content: space-between; min-height: 21px; }
@media screen and (max-width: 812px) {
#modal-container { top: 0; bottom: 0; left: 0; right: 0; transform: none; }