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.

1 files changed, 299 insertions, 0 deletions

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);
+}