diff options
| -rw-r--r-- | src/app/css/dragui.css | 58 | ||||
| -rw-r--r-- | src/app/css/launcher.css | 299 | ||||
| -rw-r--r-- | src/app/css/popups.css | 353 | ||||
| -rw-r--r-- | src/app/css/toasts.css | 52 | ||||
| -rw-r--r-- | src/app/main.css | 757 |
5 files changed, 776 insertions, 743 deletions
diff --git a/src/app/css/dragui.css b/src/app/css/dragui.css new file mode 100644 index 0000000..fb5b1a7 --- /dev/null +++ b/src/app/css/dragui.css @@ -0,0 +1,58 @@ +@import "theming.css"; + +/* + This stylesheet is meant for the DragUI, i.e the UI that pops up when dragging + a modfile over the window. +*/ + +#dragUI { + top: 0; + left: 0; + right: 0; + bottom: 0; + color: white; + opacity: 0.0; + position: fixed; + z-index: 1000000; + pointer-events: none; + background: var(--bg); + backdrop-filter: blur(15px); + transition: 0.1s ease-in-out; +} + +#dragUI.shown { + opacity: 1.0; + pointer-events: all; +} + +#dragUI #dragitems { + --size: 25vw; + top: 50%; + left: 50%; + opacity: 0.6; + position: absolute; + text-align: center; + width: var(--size); + height: var(--size); + margin-top: calc(var(--size) / 2 * -1); + margin-left: calc(var(--size) / 2 * -1); +} + +#dragUI #dragitems #icon { + width: 100%; + height: 100%; + filter: invert(1); + transform: scale(0.45); + background-size: cover; + background-image: url("../icons/download.png"); + transition: 0.1s ease-in-out; +} + +#dragUI.shown #dragitems #icon { + transform: scale(0.5); +} + +#dragUI #dragitems #text { + top: -5vw; + position: relative; +} diff --git a/src/app/css/launcher.css b/src/app/css/launcher.css new file mode 100644 index 0000000..03812c6 --- /dev/null +++ b/src/app/css/launcher.css @@ -0,0 +1,299 @@ +@import "theming.css"; + +/* + This stylesheet is meant for various elements around the launcher, + notably the navbar, launch buttons, and sidebar. +*/ + +.gamesContainer { + width: 10%; + height: 100%; + min-width: 95px; + max-width: 120px; + + float: left; + display: flex; + flex-wrap: wrap; + align-content: center; +} + +.mainContainer { + height: 100%; + flex-grow: 1; + display: flex; + position: relative; +} + +/* nav bar buttons */ +.gamesContainer button { + background-size: 90%; + background-position: center; + background-repeat: no-repeat; + + border: none; + transition: 0.3s ease-in-out; + background-color: transparent; + + + margin: 20px; + position: relative; + box-sizing: border-box; + flex-basis: calc(100% - 10px); +} + +.gamesContainer button.inactive { + opacity: 0.5; + transform: scale(0.9); +} + +.gamesContainer button::before { + content: ""; + display: block; + padding-top: 100%; +} + +.gamesContainer button .content { + width: 100%; + height: 100%; + top: 0; left: 0; + position: absolute; +} + +#vpBtn {background-image: url("../icons/viper.png")} +#nsBtn {background-image: url("../icons/northstar.png")} +#tfBtn { + background-image: url("../icons/titanfall2.png"); + background-size: 69%; /* nice */ +} + +.contentContainer { + width: 85%; + color: white; + flex-grow: 1; + opacity: 1.0; + margin-left: 5%; + position: absolute; + transition: 0.15s ease-in-out; +} + +.contentContainer.hidden { + opacity: 0.0; + pointer-events: none; +} + +.contentMenu { + padding: 0; + flex-grow: 1; + display: flex; + font-size: 20px; + list-style: none; + margin-bottom: 0; + align-items: center; + justify-content: center; + margin-top: var(--padding); +} + +/* some sections do not need space between them and menu */ +#nsMain, #nsRelease, #vpReleaseNotes, .playBtnContainer { + margin-top: 0 !important; +} + +.contentMenu li { + opacity: 0.6; + margin: 0 26px; + cursor: pointer; + font-weight: 700; + text-align: center; + height: fit-content; + transition: opacity 0.3s ease-in-out; +} + +.contentMenu li:last-child {margin-right: 0px} +.contentMenu li:first-child {margin-left: 0px} + +.contentMenu li:hover {opacity: 0.7} + +.contentMenu li[active] { + opacity: 1.0; + pointer-events: none; +} + +.contentMenu li::after { + top: 10px; + width: 30px; + height: 5px; + opacity: 0.0; + content: " "; + display: block; + text-align: center; + position: relative; + border-radius: 50px; + left: calc(50% - 15px); + background: rgb(var(--red)); + transition: 0.2s ease-in-out; +} + +.contentMenu li[active]::after { + top: 5px; + opacity: 1.0; +} + +.section { + opacity: 1.0; + position: fixed; + right: calc(var(--padding) * 2); + left: calc(100px + var(--padding)); + transition: opacity 0.15s ease-in-out; +} + +.section.hidden { + opacity: 0.0; + pointer-events: none; +} + +.contentBody img {max-width: 100%} +.contentBody .img {text-align: center} + +.contentBody .section > :first-child:not(.img) { + margin-top: 35px; +} + +.contentContainer .playBtnContainer { + text-align: center; +} + +.contentContainer .playBtn { + width: 27%; + height: 11%; + border: none; + color: white; + padding: 20px; + font-size: 24px; + font-weight: bold; + margin-top: 100px; + margin-bottom: 10px; + border-radius: 10px; + background: var(--redbg); + transition: 0.2s ease-in-out; + filter: drop-shadow(0px 8px 5px rgba(0, 0, 0, 0.1)); +} + +.contentContainer .playBtn:hover { + transform: scale(1.05); + filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.3)) brightness(110%); +} + +.contentContainer .playBtn:active { + opacity: 0.7;transform: scale(0.98); + filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.4)); +} + +.contentContainer #nsMain .playBtn { + background: var(--bluebg); +} + +#nsContent .contentMenu { + margin-bottom: 0; +} + +.contentBody .img img { + transform: scale(0.85); +} + +.contentBody .img { + width: 100%; + text-align: center; +} + +#nsRelease, #vpReleaseNotes { + height: 80vh; + overflow-y: scroll; + flex-direction: column; + margin-top: 10px !important; +} + +.inline * { + display: inline-block; +} + +#vpMain { + margin-top: 140px; + text-align: center; +} + +#vpMain img { + width: 20%; +} + +#vpVersion { + font-size: 16px; +} + +.simplebar-scrollbar:before { + background: rgb(var(--red)) !important; +} + +#installmod {background: rgb(var(--blue))} +#findmod {background: rgb(var(--blue2))} + +#togglemod {background: rgb(var(--orange))} +#toggleall {background: rgb(var(--orange2))} + +#removemod {background: rgb(var(--red))} +#removeall {background: rgb(var(--red2))} +button:disabled { + opacity: 0.5; + pointer-events: none; +} + +button.visual { + opacity: 1.0; + padding-right: 0px; + pointer-events: none; + background: transparent !important; +} + +code { + font-size: 16px; + padding: 2px 5px; + border-radius: 3px; + background-color: #00000070; +} + +#nsMods .line { + display: flex; + align-items: center; + margin-top: calc(var(--padding) / 2); +} + +#modsdiv { + height: 50vh; + overflow-y: scroll; + border-radius: 5px; + background: var(--bg); + backdrop-filter: blur(15px); + padding: calc(var(--padding) / 4); +} + +#modsdiv .mod { + display: flex; + border-radius: 5px; + transition: 0.1s ease-in-out; + margin: calc(var(--padding) / 3); + padding: calc(var(--padding) / 3); +} + +#modsdiv .mod.selected { + background: var(--selbg); +} + +#modsdiv .mod .disabled, .modbtns { + margin-left: auto; +} + +.modbtns button { + margin-left: var(--spacing); + --spacing: calc(var(--padding) / 3); + margin-top: calc(var(--spacing) / 2); + margin-bottom: calc(var(--spacing) / 2); +} diff --git a/src/app/css/popups.css b/src/app/css/popups.css new file mode 100644 index 0000000..bff7d07 --- /dev/null +++ b/src/app/css/popups.css @@ -0,0 +1,353 @@ +@import "theming.css"; + +/* + This stylesheet is meant for the various popups we use, whether it be the + previewer, the browser, the settings menu, or anything alike. +*/ + +.popup { + --spacing: var(--padding); + + z-index: 2; + opacity: 0.0; + position: fixed; + overflow-y: scroll; + top: var(--spacing); + pointer-events: none; + left: var(--spacing); + background: var(--bg); + right: var(--spacing); + bottom: var(--spacing); + transform: scale(0.98); + backdrop-filter: blur(15px); + border-radius: calc(var(--padding) / 3); + + transition-duration: 0.15s; + transition-property: opacity, transform; + transition-timing-function: ease-in-out; +} + +.popup.shown { + opacity: 1.0; + pointer-events: all; + transform: scale(1.0); +} + +.popup.small { + left: 20vw; + right: 20vw; + top: calc(var(--padding) * 2); + bottom: calc(var(--padding) * 2); +} + +#overlay { + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; + opacity: 0.0; + position: fixed; + background: var(--bg); + pointer-events: none; + transition: opacity 0.15s ease-in-out; +} + +#overlay.shown { + opacity: 0.8; + pointer-events: all; +} + +/* browser/preview popup { */ +@keyframes fadein { + 0% {opacity: 0.0} + 100% {opacity: 1.0} +} + +#browserEntries { + display: flex; + flex-wrap: wrap; +} + +.popup webview { + width: 78%; + margin: 0 auto; + filter: opacity(1.0); + transition: filter 0.15s ease-in-out; + margin-top: calc(var(--spacing) / 2); + height: calc(100% - calc(var(--spacing) / 2)); +} + +.popup webview.loading { + filter: opacity(0.0); + pointer-events: none; +} + +.popup .el, .popup .misc, .popup .loading { + --spacing: calc(var(--padding) / 2); + --height: calc(var(--padding) * 3.5); + --mischeight: calc(var(--padding) * 1.5); + + animation-duration: 0.15s; + animation-iteration-count: 1; + animation-name: fadein; + animation-fill-mode: forwards; + animation-timing-function: ease-in-out; + + opacity: 0.0; + transition: 0.15s ease-in-out; +} + +.popup .el, .popup #search, +.popup #close, .popup .misc button, +.option .actions select, .option .actions input { + color: white; + display: flex; + align-items: center; + height: var(--height); + margin: var(--spacing); + padding: var(--spacing); + background: var(--selbg); + border-radius: var(--spacing); + width: calc(50% - var(--spacing) * 4); +} + +.popup .misc, .popup #search, .option .actions input { + --height: var(--mischeight); +} + +.popup .misc { + display: flex; +} + +.popup .misc.vertical { + display: block; +} + +.popup .misc.fixed { + width: 100%; + position: fixed; +} + +.popup #search, +.option .actions input, +.option .actions select { + border: none; + outline: none; + transition: filter 0.15s ease-in-out; + width: calc(100% - var(--spacing) * 2); +} + +.popup #search:focus, +.option .actions input:focus, +.option .actions button:active { + filter: brightness(1.5); +} + +.popup .misc button { + --height: calc(var(--padding) * 1.5); + + padding: 0px; + margin-left: 0px; + padding: 0px !important; + width: var(--height) !important; +} + +.popup .misc button img { + opacity: 0.6; + width: var(--height); + transform: scale(0.5); + height: var(--height) !important; +} + +.popup .misc button:last-child { + margin-left: 0px !important; +} + +.popup#preview #close, +.popup .misc.vertical button { + margin: var(--spacing) var(--spacing) 0 auto !important; +} + +.popup .loading { + width: 100%; + color: white; + display: flex; + position: absolute; + text-align: center; + align-items: center; + justify-content: center; + height: calc(100% - var(--mischeight) - var(--height)); +} + +.popup .message { + color: white; + text-align: center; + margin: var(--padding); + width: calc(100% - var(--padding)); +} + +.popup .el .image, .popup .el .image img { + width: var(--height); + height: var(--height); + margin-right: var(--spacing); + border-radius: var(--spacing); +} + +.popup .el .image img.blur { + z-index: -1; + position: relative; + filter: blur(10px); + top: calc(var(--height) * -1 + 5px); +} + +.popup .el .text { + overflow: hidden; +} + +.popup .el .title, .popup .el .description { + height: 1.2em; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.popup .el .title { + font-size: 1.2em; + font-weight: 700; +} + +.popup .message #loadmore { + background: rgb(var(--blue2)); +} + +.popup .el .description {font-size: 0.8em} +.popup .el button { + background: rgb(var(--blue)); + margin-top: var(--spacing); +} + +.popup .el button.info { + background: rgb(var(--blue2)); +} +/* } */ + +/* settings popup { */ + +.popup .options { + color: white; + margin: calc(var(--padding) / 2); +} + +.popup .options .option { + width: 100%; + display: flex; + margin-bottom: var(--padding); + justify-content: space-between; +} + +.popup .overlay { + z-index: 1; + color: white; + opacity: 0.0; + position: fixed; + pointer-events: none; + transform: scale(0.9); + background: var(--selbg); + backdrop-filter: blur(15px); + transition: 0.15s ease-in-out; + padding: calc(var(--spacing) / 2); + border-radius: calc(var(--spacing) / 2); +} + +.popup .overlay.shown { + opacity: 1.0; + pointer-events: all; + transform: scale(1.0); +} + +#options.popup .misc button { + margin-left: 0px; + width: auto !important; + padding-right: calc(var(--padding) / 2) !important; +} + +.check { + display:flex; + cursor: pointer; +} + +.check::before { + width: 1em; + height: 1em; + content: " "; + background-size: 75%; + filter: brightness(1.3); + background-position: center; + background-repeat: no-repeat; + transition: 0.15s ease-in-out; + background-color: var(--selbg); + margin-right: calc(var(--spacing) / 3); + border-radius: calc(var(--spacing) / 4); +} + +.check.checked::before { + background-color: rgb(var(--red)); + background-image: url(../icons/check.png); +} + +.option .text {font-weight: 600} +.option .text .desc { + opacity: 0.8; + font-weight: 500; + font-size: 0.9em; + max-width: 400px; + margin-top: calc(var(--padding) / 3); +} + +.option .actions input, .option .actions select { + width: 100%; + margin: 0px; + --spacing: calc(var(--padding) / 3); +} + +.option[type=array] .actions input { + word-spacing: 15px; + margin-right: 15vw; +} + +.option .actions button { + background: var(--selbg); +} + +.switch { + width: 50px; + height: 25px; + border-radius: 50px; +} + +.switch.on { + background: rgba(var(--red), 0.2) !important; +} + +.switch::after { + left: -5px; + width: 15px; + height: 15px; + content: " "; + display: block; + background: red; + position: relative; + border-radius: 50px; + background: var(--bg); + transition: 0.2s ease-in-out; +} + +.switch.on::after { + left: 15px; + width: 20px; + opacity: 0.5; + background: rgb(var(--red)); +} + +/* } */ diff --git a/src/app/css/toasts.css b/src/app/css/toasts.css new file mode 100644 index 0000000..57ba055 --- /dev/null +++ b/src/app/css/toasts.css @@ -0,0 +1,52 @@ +@import "theming.css"; + +#toasts { + position: fixed; + z-index: 100000; + right: calc(var(--padding) * 1.5); + bottom: calc(var(--padding) * 1.5); +} + +@keyframes bodyfadeaway { + 0% {opacity: 0.0; transform: scale(0.95)} + 100% {opacity: 1.0; transform: scale(1.0)} +} + +#toasts .toast { + width: 300px; + opacity: 0.0; + cursor: pointer; + overflow: hidden; + max-height: 100vh; + background: #FFFFFF; + transform: scale(0.95); + transition: 0.2s ease-in-out; + padding: calc(var(--padding) / 2); + margin-top: calc(var(--padding) / 2); + border-radius: calc(var(--padding) / 2.5); + box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2); + + animation-duration: 0.2s; + animation-iteration-count: 1; + animation-name: bodyfadeaway; + animation-fill-mode: forwards; + animation-timing-function: ease-in-out; +} + +#toasts .toast.hidden { + margin-top: 0px; + max-height: 0px; + padding-top: 0px; + padding-bottom: 0px; + filter: opacity(0.0); + transform: scale(0.95); +} + +#toasts .toast:not(.hidden):hover {filter: opacity(0.9)} +#toasts .toast:not(.hidden):active {filter: opacity(0.8)} + +.toast .description { + opacity: 0.8; + font-size: 0.8em; + font-weight: 600; +} diff --git a/src/app/main.css b/src/app/main.css index 3229f6c..ce45f35 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -1,9 +1,8 @@ +@import "css/dragui.css"; +@import "css/toasts.css"; +@import "css/popups.css"; @import "css/theming.css"; - -.popup, #modsdiv { - outline: 1px solid #444444; - border: 3px solid var(--bg); -} +@import "css/launcher.css"; body { margin: 0; @@ -25,345 +24,19 @@ button { transition: 0.2s ease-in-out; } -.playBtn, .gamesContainer button, #winbtns div { - cursor: pointer; -} - -.popup { - --spacing: var(--padding); - - z-index: 2; - opacity: 0.0; - position: fixed; - overflow-y: scroll; - top: var(--spacing); - pointer-events: none; - left: var(--spacing); - background: var(--bg); - right: var(--spacing); - bottom: var(--spacing); - transform: scale(0.98); - backdrop-filter: blur(15px); - border-radius: calc(var(--padding) / 3); - transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out; -} - -.popup.shown { - opacity: 1.0; - pointer-events: all; - transform: scale(1.0); -} - -.popup.small { - left: 20vw; - right: 20vw; - top: calc(var(--padding) * 2); - bottom: calc(var(--padding) * 2); -} - -#overlay { - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1; - opacity: 0.0; - position: fixed; - background: var(--bg); - pointer-events: none; - transition: opacity 0.15s ease-in-out; -} - -#overlay.shown { - opacity: 0.8; - pointer-events: all; -} - -@keyframes fadein { - 0% {opacity: 0.0} - 100% {opacity: 1.0} -} - -#browserEntries { - display: flex; - flex-wrap: wrap; -} - -.popup webview { - width: 78%; - margin: 0 auto; - filter: opacity(1.0); - transition: filter 0.15s ease-in-out; - margin-top: calc(var(--spacing) / 2); - height: calc(100% - calc(var(--spacing) / 2)); -} - -.popup webview.loading { - filter: opacity(0.0); - pointer-events: none; -} - -.popup .el, .popup .misc, .popup .loading { - --spacing: calc(var(--padding) / 2); - --height: calc(var(--padding) * 3.5); - --mischeight: calc(var(--padding) * 1.5); - - animation-duration: 0.15s; - animation-iteration-count: 1; - animation-name: fadein; - animation-fill-mode: forwards; - animation-timing-function: ease-in-out; - - opacity: 0.0; - transition: 0.15s ease-in-out; -} - -.popup .el, .popup #search, .option .actions select, .option .actions input, .popup #close, .popup .misc button { - color: white; - display: flex; - align-items: center; - height: var(--height); - margin: var(--spacing); - padding: var(--spacing); - background: var(--selbg); - border-radius: var(--spacing); - width: calc(50% - var(--spacing) * 4); -} - -.popup .misc, .popup #search, .option .actions input { - --height: var(--mischeight); -} - -.popup .misc { - display: flex; -} - -.popup .misc.vertical { - display: block; -} - -.popup .misc.fixed { - width: 100%; - position: fixed; -} - -.popup #search, .option .actions input, .option .actions select { - border: none; - outline: none; - transition: filter 0.15s ease-in-out; - width: calc(100% - var(--spacing) * 2); -} - -.popup #search:focus, .option .actions input:focus, .option .actions button:active { - filter: brightness(1.5); -} - -.popup .misc button { - --height: calc(var(--padding) * 1.5); - - padding: 0px; - margin-left: 0px; - padding: 0px !important; - width: var(--height) !important; -} - -.popup .misc button img { - opacity: 0.6; - width: var(--height); - transform: scale(0.5); - height: var(--height) !important; -} - -#options.popup .misc button { - margin-left: 0px; - width: auto !important; - padding-right: calc(var(--padding) / 2) !important; -} - -.popup .misc button:last-child { - margin-left: 0px !important; -} - -.popup#preview #close, -.popup .misc.vertical button { - margin: var(--spacing) var(--spacing) 0 auto !important; -} - -.popup .loading { - width: 100%; - color: white; - display: flex; - position: absolute; - text-align: center; - align-items: center; - justify-content: center; - height: calc(100% - var(--mischeight) - var(--height)); -} - -.popup .message { - color: white; - text-align: center; - margin: var(--padding); - width: calc(100% - var(--padding)); -} - -.popup .el .image, .popup .el .image img { - width: var(--height); - height: var(--height); - margin-right: var(--spacing); - border-radius: var(--spacing); -} - -.popup .el .image img.blur { - z-index: -1; - position: relative; - filter: blur(10px); - top: calc(var(--height) * -1 + 5px); -} - -.popup .el .text { - overflow: hidden; -} - -.popup .el .title, .popup .el .description { - height: 1.2em; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.popup .el .title { - font-size: 1.2em; - font-weight: 700; -} - -.popup .message #loadmore { - background: rgb(var(--blue2)); -} - -.popup .el .description {font-size: 0.8em} -.popup .el button { - background: rgb(var(--blue)); - margin-top: var(--spacing); -} - -.popup .el button.info { - background: rgb(var(--blue2)); -} - -.popup .options { - color: white; - margin: calc(var(--padding) / 2); -} - -.popup .options .option { - width: 100%; - display: flex; - margin-bottom: var(--padding); - justify-content: space-between; -} - -.popup .overlay { - z-index: 1; - color: white; - opacity: 0.0; - position: fixed; - pointer-events: none; - transform: scale(0.9); - background: var(--selbg); - backdrop-filter: blur(15px); - transition: 0.15s ease-in-out; - padding: calc(var(--spacing) / 2); - border-radius: calc(var(--spacing) / 2); -} - -.popup .overlay.shown { - opacity: 1.0; - pointer-events: all; - transform: scale(1.0); -} +button:hover {filter: brightness(110%)} +button:active {filter: brightness(90%)} -.checks { +.popup, #modsdiv { + outline: 1px solid #444444; + border: 3px solid var(--bg); } -.check { - display:flex; +.playBtn, .gamesContainer button, #winbtns div { cursor: pointer; } -.check::before { - width: 1em; - height: 1em; - content: " "; - background-size: 75%; - filter: brightness(1.3); - background-position: center; - background-repeat: no-repeat; - transition: 0.15s ease-in-out; - background-color: var(--selbg); - margin-right: calc(var(--spacing) / 3); - border-radius: calc(var(--spacing) / 4); -} - -.check.checked::before { - background-color: rgb(var(--red)); - background-image: url(icons/check.png); -} - -.option .text {font-weight: 600} -.option .text .desc { - opacity: 0.8; - font-weight: 500; - font-size: 0.9em; - max-width: 400px; - margin-top: calc(var(--padding) / 3); -} - -.option .actions input, .option .actions select { - width: 100%; - margin: 0px; - --spacing: calc(var(--padding) / 3); -} - -.option[type=array] .actions input { - word-spacing: 15px; - margin-right: 15vw; -} - -.option .actions button { - background: var(--selbg); -} - -.switch { - width: 50px; - height: 25px; - border-radius: 50px; -} - -.switch.on { - background: rgba(var(--red), 0.2) !important; -} - -.switch::after { - left: -5px; - width: 15px; - height: 15px; - content: " "; - display: block; - background: red; - position: relative; - border-radius: 50px; - background: var(--bg); - transition: 0.2s ease-in-out; -} - -.switch.on::after { - left: 15px; - width: 20px; - opacity: 0.5; - background: rgb(var(--red)); -} - +/* window buttons { */ #winbtns { z-index: 2; display: flex; @@ -388,9 +61,7 @@ button { #winbtns div:hover {opacity: 1.0} #winbtns div:active {transform: scale(0.95)} - -button:hover {filter: brightness(110%)} -button:active {filter: brightness(90%)} +/* } */ img {pointer-events: none} @@ -412,408 +83,7 @@ img {pointer-events: none} #bgHolder[bg="1"] {background-image: url("../assets/bg/northstar.jpg")} #bgHolder[bg="2"] {background-image: url("../assets/bg/tf2.jpg")} -.gamesContainer { - width: 10%; - height: 100%; - min-width: 95px; - max-width: 120px; - - float: left; - display: flex; - flex-wrap: wrap; - align-content: center; -} - -.mainContainer { - height: 100%; - flex-grow: 1; - display: flex; - position: relative; -} - - -/* nav bar buttons */ -.gamesContainer button { - background-size: 90%; - background-position: center; - background-repeat: no-repeat; - - border: none; - transition: 0.3s ease-in-out; - background-color: transparent; - - - margin: 20px; - position: relative; - box-sizing: border-box; - flex-basis: calc(100% - 10px); -} - -.gamesContainer button.inactive { - opacity: 0.5; - transform: scale(0.9); -} - -.gamesContainer button::before { - content: ""; - display: block; - padding-top: 100%; -} - -.gamesContainer button .content { - width: 100%; - height: 100%; - top: 0; left: 0; - position: absolute; -} - -#vpBtn {background-image: url("icons/viper.png")} -#nsBtn {background-image: url("icons/northstar.png")} -#tfBtn { - background-image: url("icons/titanfall2.png"); - background-size: 69%; /* nice */ -} - -.contentContainer { - width: 85%; - color: white; - flex-grow: 1; - opacity: 1.0; - margin-left: 5%; - position: absolute; - transition: 0.15s ease-in-out; -} - -.contentContainer.hidden { - opacity: 0.0; - pointer-events: none; -} - -.contentMenu { - padding: 0; - flex-grow: 1; - display: flex; - font-size: 20px; - list-style: none; - margin-bottom: 0; - align-items: center; - justify-content: center; - margin-top: var(--padding); -} - -/* some sections do not need space between them and menu */ -#nsMain, #nsRelease, #vpReleaseNotes, .playBtnContainer { - margin-top: 0 !important; -} - -.contentMenu li { - opacity: 0.6; - margin: 0 26px; - cursor: pointer; - font-weight: 700; - text-align: center; - height: fit-content; - transition: opacity 0.3s ease-in-out; -} - -.contentMenu li:last-child {margin-right: 0px} -.contentMenu li:first-child {margin-left: 0px} - -.contentMenu li:hover {opacity: 0.7} - -.contentMenu li[active] { - opacity: 1.0; - pointer-events: none; -} - -.contentMenu li::after { - top: 10px; - width: 30px; - height: 5px; - opacity: 0.0; - content: " "; - display: block; - text-align: center; - position: relative; - border-radius: 50px; - background: rgb(var(--red)); - left: calc(50% - 15px); - transition: 0.2s ease-in-out; -} - -.contentMenu li[active]::after { - top: 5px; - opacity: 1.0; -} - -.section { - opacity: 1.0; - position: fixed; - right: calc(var(--padding) * 2); - left: calc(100px + var(--padding)); - transition: opacity 0.15s ease-in-out; -} - -.section.hidden { - opacity: 0.0; - pointer-events: none; -} - -.contentBody img {max-width: 100%} -.contentBody .img {text-align: center} - -.contentBody .section > :first-child:not(.img) { - margin-top: 35px; -} - -.contentContainer .playBtnContainer { - text-align: center; -} - -.contentContainer .playBtn { - width: 27%; - height: 11%; - border: none; - color: white; - padding: 20px; - font-size: 24px; - font-weight: bold; - margin-top: 100px; - margin-bottom: 10px; - border-radius: 10px; - background: var(--redbg); - transition: 0.2s ease-in-out; - filter: drop-shadow(0px 8px 5px rgba(0, 0, 0, 0.1)); -} - -.contentContainer .playBtn:hover { - transform: scale(1.05); - filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.3)) brightness(110%); -} - -.contentContainer .playBtn:active { - opacity: 0.7;transform: scale(0.98); - filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.4)); -} - -.contentContainer #nsMain .playBtn { - background: var(--bluebg); -} - -#nsContent .contentMenu { - margin-bottom: 0; -} - -.contentBody .img img { - transform: scale(0.85); -} - -.contentBody .img { - width: 100%; - text-align: center; -} - -#nsRelease, #vpReleaseNotes { - height: 80vh; - overflow-y: scroll; - flex-direction: column; - margin-top: 10px !important; -} - -.inline * { - display: inline-block; -} - -#vpMain { - margin-top: 140px; - text-align: center; -} - -#vpMain img { - width: 20%; -} - -#vpVersion { - font-size: 16px; -} - -.simplebar-scrollbar:before { - background: rgb(var(--red)) !important; -} - -#installmod {background: rgb(var(--blue))} -#findmod {background: rgb(var(--blue2))} - -#togglemod {background: rgb(var(--orange))} -#toggleall {background: rgb(var(--orange2))} - -#removemod {background: rgb(var(--red))} -#removeall {background: rgb(var(--red2))} -button:disabled { - opacity: 0.5; - pointer-events: none; -} - -button.visual { - opacity: 1.0; - padding-right: 0px; - pointer-events: none; - background: transparent !important; -} - -code { - font-size: 16px; - padding: 2px 5px; - border-radius: 3px; - background-color: #00000070; -} - -#nsMods .line { - display: flex; - align-items: center; - margin-top: calc(var(--padding) / 2); -} - -#modsdiv { - height: 50vh; - overflow-y: scroll; - border-radius: 5px; - background: var(--bg); - backdrop-filter: blur(15px); - padding: calc(var(--padding) / 4); -} - -#modsdiv .mod { - display: flex; - border-radius: 5px; - transition: 0.1s ease-in-out; - margin: calc(var(--padding) / 3); - padding: calc(var(--padding) / 3); -} - -#modsdiv .mod.selected { - background: var(--selbg); -} - -#modsdiv .mod .disabled, .modbtns { - margin-left: auto; -} - -.modbtns button { - margin-left: var(--spacing); - --spacing: calc(var(--padding) / 3); - margin-top: calc(var(--spacing) / 2); - margin-bottom: calc(var(--spacing) / 2); -} - -#toasts { - position: fixed; - z-index: 100000; - right: calc(var(--padding) * 1.5); - bottom: calc(var(--padding) * 1.5); -} - -@keyframes bodyfadeaway { - 0% {opacity: 0.0; transform: scale(0.95)} - 100% {opacity: 1.0; transform: scale(1.0)} -} - -#toasts .toast { - width: 300px; - opacity: 0.0; - cursor: pointer; - overflow: hidden; - max-height: 100vh; - background: #FFFFFF; - transform: scale(0.95); - transition: 0.2s ease-in-out; - padding: calc(var(--padding) / 2); - margin-top: calc(var(--padding) / 2); - border-radius: calc(var(--padding) / 2.5); - box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2); - - animation-duration: 0.2s; - animation-iteration-count: 1; - animation-name: bodyfadeaway; - animation-fill-mode: forwards; - animation-timing-function: ease-in-out; -} - -#toasts .toast.hidden { - margin-top: 0px; - max-height: 0px; - padding-top: 0px; - padding-bottom: 0px; - filter: opacity(0.0); - transform: scale(0.95); -} - -#toasts .toast:not(.hidden):hover {filter: opacity(0.9)} -#toasts .toast:not(.hidden):active {filter: opacity(0.8)} - -.toast .title { -} - -.toast .description { - opacity: 0.8; - font-size: 0.8em; - font-weight: 600; -} - -#dragUI { - top: 0; - left: 0; - right: 0; - bottom: 0; - color: white; - opacity: 0.0; - position: fixed; - z-index: 1000000; - pointer-events: none; - background: var(--bg); - backdrop-filter: blur(15px); - transition: 0.1s ease-in-out; -} - -#dragUI.shown { - opacity: 1.0; - pointer-events: all; -} - -#dragUI #dragitems { - --size: 25vw; - top: 50%; - left: 50%; - opacity: 0.6; - position: absolute; - text-align: center; - width: var(--size); - height: var(--size); - margin-top: calc(var(--size) / 2 * -1); - margin-left: calc(var(--size) / 2 * -1); -} - -#dragUI #dragitems #icon { - width: 100%; - height: 100%; - filter: invert(1); - transform: scale(0.45); - background-size: cover; - background-image: url("icons/download.png"); - transition: 0.1s ease-in-out; -} - -#dragUI.shown #dragitems #icon { - transform: scale(0.5); -} - -#dragUI #dragitems #text { - top: -5vw; - position: relative; -} - /* drag control */ - #bgHolder, .contentContainer, .gamesContainer { @@ -827,6 +97,7 @@ code { -webkit-app-region: no-drag; } -a, button, #close, #nsRelease, #vpReleaseNotes, .mod, #overlay, #modsdiv, #winbtns, .contentMenu { +a, button, #close, #nsRelease, #vpReleaseNotes, +.mod, #overlay, #modsdiv, #winbtns, .contentMenu { -webkit-app-region: no-drag; } |