From 31545f96ac56e0bbc7d0ed59f86015d693d464d9 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Mon, 16 May 2022 23:51:26 +0200 Subject: added mod preview browser Instead of opening your normal web browser you can now just open the page inside Viper, many changes aren't finished yet, notably the webview.css file. At some point I'll split the main.css into more files so the folder makes sense even though there's currently only one file in there. --- src/app/css/webview.css | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/app/css/webview.css (limited to 'src/app/css') diff --git a/src/app/css/webview.css b/src/app/css/webview.css new file mode 100644 index 0000000..4a3fd85 --- /dev/null +++ b/src/app/css/webview.css @@ -0,0 +1 @@ +/* this gets imported into the preview */ -- cgit v1.2.3 From 17a0a0e752ef515e4ea1e735e52efdb81d63f7dd Mon Sep 17 00:00:00 2001 From: 0neGal Date: Tue, 17 May 2022 00:46:40 +0200 Subject: improvements to the preview It now looks a lot better overall. Still missing a few things, like showing when it's loading, but besides that it's pretty much done. --- src/app/browser.js | 9 ++++++- src/app/css/theming.css | 62 ++++++++++++++++++++++++++++++++++++++++++++++ src/app/css/webview.css | 15 +++++++++++- src/app/main.css | 65 ++++++------------------------------------------- 4 files changed, 91 insertions(+), 60 deletions(-) create mode 100644 src/app/css/theming.css (limited to 'src/app/css') diff --git a/src/app/browser.js b/src/app/browser.js index b3b1b59..5a5a752 100644 --- a/src/app/browser.js +++ b/src/app/browser.js @@ -437,10 +437,17 @@ events.forEach((event) => { }); view.addEventListener("dom-ready", () => { - view.insertCSS(fs.readFileSync(__dirname + "/css/webview.css", "utf8")); + let css = [ + fs.readFileSync(__dirname + "/css/theming.css", "utf8"), + fs.readFileSync(__dirname + "/css/webview.css", "utf8") + ] + + view.insertCSS(css.join(" ")); }) let checks = document.querySelectorAll(".check"); for (let i = 0; i < checks.length; i++) { checks[i].setAttribute("onclick", "this.classList.toggle('checked');Browser.loadfront();search.value = ''") } + +Preview.set("https://northstar.thunderstore.io/package/odds/DamageFlyout/") diff --git a/src/app/css/theming.css b/src/app/css/theming.css new file mode 100644 index 0000000..2d45b1d --- /dev/null +++ b/src/app/css/theming.css @@ -0,0 +1,62 @@ +/* + the only reason some of these properties have an !important property + is for it to overwrite Thunderstore's CSS in the preview +*/ + +:root { + --red: 199, 119, 127 !important; + --red2: 181 97 105; + + --blue: 129, 161, 193; + --blue2: 139, 143, 185; + + --orange: 213, 151, 131; + --orange2: 197 129 107; + + + --padding: 25px; + + --bg: rgba(0, 0, 0, 0.5); + --selbg: rgba(80, 80, 80, 0.5); + --redbg: linear-gradient(45deg, rgb(var(--red)), #FA4343); + --bluebg: linear-gradient(45deg, rgb(var(--blue)), #7380ED); +} + +body, button, input { + font-family: "Roboto", sans-serif !important; +} + +body, button, img, a { + user-select: none; + -webkit-user-drag: none; +} + +a { + text-decoration: none !important; + color: rgb(var(--red)) !important; + transition: filter 0.2s ease-in !important; +} + +a:hover { + filter: brightness(80%) !important; +} + + +::-webkit-scrollbar { + width: 8px !important; +} + +::-webkit-scrollbar-track { + border-radius: 10px !important; + background: transparent !important; +} + +::-webkit-scrollbar-thumb { + border-radius: 10px !important; + background: rgb(var(--red)) !important; +} + +::selection { + color: black !important; + background: rgb(var(--red)) !important; +} diff --git a/src/app/css/webview.css b/src/app/css/webview.css index 4a3fd85..9e26b5d 100644 --- a/src/app/css/webview.css +++ b/src/app/css/webview.css @@ -1 +1,14 @@ -/* this gets imported into the preview */ +body { + overflow-x: hidden; + background: transparent !important; + background-color: transparent !important; +} + +.navbar, .bottom-padding, +.card-header, .breadcrumb, +.list-group, .mb-4, .my-2, .mt-2 { + display: none !important; +} + +.mt-2.mb-2 {display: block !important} +.card {transform: translateY(-1.0rem)} diff --git a/src/app/main.css b/src/app/main.css index d51509b..e4c6a2c 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -1,58 +1,15 @@ -:root { - --red: 199, 119, 127; - --red2: 181 97 105; - - --blue: 129, 161, 193; - --blue2: 139, 143, 185; - - --orange: 213, 151, 131; - --orange2: 197 129 107; - - - --padding: 25px; - - --bg: rgba(0, 0, 0, 0.5); - --selbg: rgba(80, 80, 80, 0.5); - --redbg: linear-gradient(45deg, rgb(var(--red)), #FA4343); - --bluebg: linear-gradient(45deg, rgb(var(--blue)), #7380ED); -} +@import "css/theming.css"; .popup, #modsdiv { outline: 1px solid #444444; border: 3px solid var(--bg); } -::-webkit-scrollbar { - width: 8px; -} - -::-webkit-scrollbar-track { - border-radius: 10px; - background: transparent; -} - -::-webkit-scrollbar-thumb { - border-radius: 10px; - background: rgb(var(--red)); -} - -::selection { - color: black; - background: rgb(var(--red)); -} - body { margin: 0; overflow: hidden; } -body, button, input {font-family: "Roboto", sans-serif} - -body, button, img, a { - -webkit-user-drag: none; - user-select: none; -} - button {outline: none} b, strong {font-weight: 700} body, input, button {font-weight: 500} @@ -98,8 +55,8 @@ button { } .popup.small { - left: 30vw; - right: 30vw; + left: 20vw; + right: 20vw; top: calc(var(--padding) * 2); bottom: calc(var(--padding) * 2); } @@ -133,8 +90,10 @@ button { } .popup webview { - width: 100%; - height: 100%; + width: 78%; + margin: 0 auto; + margin-top: calc(var(--spacing) / 2); + height: calc(100% - calc(var(--spacing) / 2)); } .popup .el, .popup .misc, .popup .loading { @@ -629,16 +588,6 @@ img {pointer-events: none} background: var(--bluebg); } -a { - color: rgb(var(--red)); - text-decoration: none; - transition: filter 0.2s ease-in; -} - -a:hover { - filter: brightness(80%); -} - #nsContent .contentMenu { margin-bottom: 0; } -- cgit v1.2.3 From cdab6e7d543b90cf1e60c74f8d38767bbce7f3a7 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Fri, 20 May 2022 23:06:25 +0200 Subject: split main.css into multiple files This is easier to manage, and a lot less annoying to navigate, having to scroll through many lines of code is annoying, categorizing makes it easier, I also overall improved the layout of many of the CSS files. --- src/app/css/dragui.css | 58 ++++ src/app/css/launcher.css | 299 +++++++++++++++++++ src/app/css/popups.css | 353 ++++++++++++++++++++++ src/app/css/toasts.css | 52 ++++ src/app/main.css | 757 +---------------------------------------------- 5 files changed, 776 insertions(+), 743 deletions(-) create mode 100644 src/app/css/dragui.css create mode 100644 src/app/css/launcher.css create mode 100644 src/app/css/popups.css create mode 100644 src/app/css/toasts.css (limited to 'src/app/css') 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; } -- cgit v1.2.3 From a844a146e88faa0c5f7239b5d05869868f2a2aab Mon Sep 17 00:00:00 2001 From: 0neGal Date: Sat, 28 May 2022 01:52:03 +0200 Subject: initial commit for master server status This doesn't fully implement everything as the master server is down whilst making this commit, so I can't fully implement it. --- src/app/css/launcher.css | 29 +++++++++++++++++++++++++++++ src/app/index.html | 3 ++- src/app/launcher.js | 40 ++++++++++++++++++++++++++++++++++++++++ src/lang/en.json | 4 ++++ 4 files changed, 75 insertions(+), 1 deletion(-) (limited to 'src/app/css') diff --git a/src/app/css/launcher.css b/src/app/css/launcher.css index 03812c6..ce54ddf 100644 --- a/src/app/css/launcher.css +++ b/src/app/css/launcher.css @@ -297,3 +297,32 @@ code { margin-top: calc(var(--spacing) / 2); margin-bottom: calc(var(--spacing) / 2); } + +#serverstatus { + --spacing: calc(var(--padding) / 5); + + transition-duration: 0.2s; + transition-timing-function: ease-in-out; + transition-property: background, opacity; + + opacity: 0.0; + display: block; + margin: 0 auto; + font-weight: 700; + width: fit-content; + color: transparent; + border-radius: 50px; + flex-basis: max-content; + background: transparent; + margin-top: calc(var(--spacing) * 2); + padding: var(--spacing) calc(var(--spacing) * 3); +} + +#serverstatus.up, +#serverstatus.down { + color: white; + opacity: 1.0; +} + +#serverstatus.up {background: rgb(var(--blue));} +#serverstatus.down {background: rgb(var(--red));} diff --git a/src/app/index.html b/src/app/index.html index f67a7a8..2305e4c 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -197,6 +197,7 @@
(%%gui.update.check%%) +
@@ -240,4 +241,4 @@ - +< diff --git a/src/app/launcher.js b/src/app/launcher.js index 51d3a63..f426775 100644 --- a/src/app/launcher.js +++ b/src/app/launcher.js @@ -1,5 +1,9 @@ const markdown = require("marked").parse; +var servercount; +var playercount; +var masterserver; + // Changes the main page // This is the tabs in the sidebar function page(page) { @@ -107,3 +111,39 @@ function showNsSection(section) { break; } } + +async function loadServers() { + serverstatus.classList.add("checking"); + + try { + let servers = await (await fetch("https://northstar.tf/client/servers/")).json(); + masterserver = true; + }catch (err) { + playercount = 0; + servercount = 0; + masterserver = false; + } + + serverstatus.classList.remove("checking"); + + if (servercount == 0) {masterserver = false} + + if (masterserver) { + serverstatus.classList.add("up"); + // servercount and playercount don't actually get set anywhere, + // the reason for this is, while writing this code, the master + // server is down so I don't have anyway to test the code... + // + // it'll be added whenever the masterserver comes online again. + serverstatus.innerHTML = `${servercount} ${lang("gui.server.servers")} - ${playercount} ${lang("gui.server.players")}`; + } else { + serverstatus.classList.add("down"); + serverstatus.innerHTML = lang("gui.server.offline"); + + } +}; loadServers() + +// Refreshes every 5 minutes +setInterval(() => { + loadServers(); +}, 300000) diff --git a/src/lang/en.json b/src/lang/en.json index 2c068ac..045517d 100644 --- a/src/lang/en.json +++ b/src/lang/en.json @@ -113,6 +113,10 @@ "gui.nsupdate.gaming.title": "Northstar update available!", "gui.nsupdate.gaming.body": "An update for Northstar is available.\nYou can force its installation after closing the game.", + "gui.server.servers": "servers", + "gui.server.players": "players", + "gui.server.offline": "Masterserver is Offline", + "gui.launch": "Launch", "gui.launchvanilla": "Vanilla", "gui.launchnorthstar": "Northstar", -- cgit v1.2.3 From 3d9b35ac675fb942c1fcbc9eb81cc44e3dbeaee3 Mon Sep 17 00:00:00 2001 From: 0neGal Date: Sun, 12 Jun 2022 16:55:28 +0200 Subject: added icons to the settings popup Only on the titles, putting them only on the options or on both the title and options would be far too much, just the title is perfect. --- src/app/css/popups.css | 14 ++++++++++++++ src/app/icons/game.png | Bin 0 -> 1454 bytes src/app/icons/language.png | Bin 0 -> 7132 bytes src/app/icons/updates.png | Bin 0 -> 10300 bytes src/app/index.html | 20 ++++++++++++++++---- 5 files changed, 30 insertions(+), 4 deletions(-) create mode 100644 src/app/icons/game.png create mode 100644 src/app/icons/language.png create mode 100644 src/app/icons/updates.png (limited to 'src/app/css') diff --git a/src/app/css/popups.css b/src/app/css/popups.css index bff7d07..59f6630 100644 --- a/src/app/css/popups.css +++ b/src/app/css/popups.css @@ -350,4 +350,18 @@ background: rgb(var(--red)); } +.title { + display: flex; +} + +.title img { + width: 30px; + height: 30px; + margin: auto 0; +} + +.title h2 { + margin-left: calc(var(--padding) / 3); +} + /* } */ diff --git a/src/app/icons/game.png b/src/app/icons/game.png new file mode 100644 index 0000000..7db058f Binary files /dev/null and b/src/app/icons/game.png differ diff --git a/src/app/icons/language.png b/src/app/icons/language.png new file mode 100644 index 0000000..011e1f9 Binary files /dev/null and b/src/app/icons/language.png differ diff --git a/src/app/icons/updates.png b/src/app/icons/updates.png new file mode 100644 index 0000000..4b505ee Binary files /dev/null and b/src/app/icons/updates.png differ diff --git a/src/app/index.html b/src/app/index.html index 0255dd6..819caac 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -36,7 +36,10 @@
-

%%gui.settings.title.ns%%

+
+ +

%%gui.settings.title.ns%%

+
%%gui.settings.nsargs.title%% @@ -48,7 +51,10 @@
-

%%gui.settings.title.language%%

+
+ +

%%gui.settings.title.language%%

+
%%gui.settings.autolang.title%% @@ -73,7 +79,10 @@
-

%%gui.settings.title.updates%%

+
+ +

%%gui.settings.title.updates%%

+
%%gui.settings.autoupdate.title%% @@ -107,7 +116,10 @@
-

%%gui.settings.title.misc%%

+
+ +

%%gui.settings.title.misc%%

+
%%gui.settings.originkill.title%% -- cgit v1.2.3 From b591b5166d6953fe868ccb772045fe77d9a9813e Mon Sep 17 00:00:00 2001 From: 0neGal Date: Sun, 12 Jun 2022 17:00:35 +0200 Subject: tiny animations The settings button now turns like a cog when hovered, and there's a slight animation when you hover a settings switch. --- src/app/css/popups.css | 4 ++++ src/app/main.css | 4 ++++ 2 files changed, 8 insertions(+) (limited to 'src/app/css') diff --git a/src/app/css/popups.css b/src/app/css/popups.css index 59f6630..826955b 100644 --- a/src/app/css/popups.css +++ b/src/app/css/popups.css @@ -350,6 +350,10 @@ background: rgb(var(--red)); } +.switch.on:hover::after { + transform: scale(1.2); +} + .title { display: flex; } diff --git a/src/app/main.css b/src/app/main.css index ce45f35..f39c5a1 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -59,6 +59,10 @@ button:active {filter: brightness(90%)} #winbtns #minimize {background-image: url("icons/minimize.png")} #winbtns #settings {background-image: url("icons/settings.png")} +#winbtns #settings:hover { + transform: rotate(90deg); +} + #winbtns div:hover {opacity: 1.0} #winbtns div:active {transform: scale(0.95)} /* } */ -- cgit v1.2.3 From c5a4a5e1543b865a2fe5791943372d926680228f Mon Sep 17 00:00:00 2001 From: 0neGal Date: Sun, 12 Jun 2022 17:02:48 +0200 Subject: removed cookie and manager alert in webview When opening the preview for a mod it may show a cookie alert, this is now auto-hidden, along with an alert recommending users to use the Thunderstore Mod Manager, or an alternative, since Viper is an alternative, this is only an alert that can confuse users. And it is therefore removed. --- src/app/css/webview.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/app/css') diff --git a/src/app/css/webview.css b/src/app/css/webview.css index 9e26b5d..982ebfc 100644 --- a/src/app/css/webview.css +++ b/src/app/css/webview.css @@ -4,9 +4,11 @@ body { background-color: transparent !important; } +#ncmp_tool, .navbar, .bottom-padding, .card-header, .breadcrumb, -.list-group, .mb-4, .my-2, .mt-2 { +.list-group, .mb-4, .my-2, .mt-2, +#thunderstore-mod-manager-ad-alert { display: none !important; } -- cgit v1.2.3