Upload files to "/"

styles.css

@@ -0,0 +1,177 @@
+/* Reset all margins and paddings */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+}
+
+/* Body setup with flex layout */
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #1e1e1e;
+    color: #fff;
+    display: flex;
+    flex-direction: column; /* Ensures layout from top to bottom */
+    height: 100%; /* Ensure full viewport height */
+}
+
+/* Main app container */
+#app {
+    display: flex;
+    flex: 1; /* Allow it to grow and fill available space */
+    width: 100%;
+    height: 100%;
+}
+
+/* Main content area */
+main {
+    background-color: #1b2838;
+    color: #00d3f1;
+    padding: 10px;
+    text-align: center;
+    flex: 1; /* Allow it to grow and fill available space */
+    overflow: auto; /* Prevent overflow */
+}
+
+/* Sidebar container */
+#sidebar {
+    width: 200px;
+    background-color: #2d343f;
+    padding-top: 20px;
+    padding-left: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    height: 100%; /* Ensure it spans the full height of the app */
+}
+
+/* Sidebar button styling */
+.sidebar-button {
+    background-color: #2d343f;
+    border: none;
+    padding: 10px;
+    color: #fff;
+    font-size: 16px;
+    text-align: left;
+    width: 100%;
+    margin: 10px 0;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.sidebar-button:hover {
+    background-color: #00d3f1;
+}
+
+/* Active button state */
+.sidebar-button.active {
+    background-color: #444;
+}
+
+/* Game browser area */
+#gameBrowser {
+    flex: 1;
+    background-color: #121212;
+    border: none;
+}
+
+/* Button styling */
+button {
+    background-color: #00d3f1;
+    border: none;
+    padding: 10px;
+    font-size: 16px;
+    color: white;
+    cursor: pointer;
+    margin: 10px 0;
+}
+
+button:hover {
+    background-color: #009bb1;
+}
+
+/* Navigation bar inside the browser */
+.browser-navigation {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+
+/* Game list display */
+#gameList {
+    margin-top: 20px;
+    text-align: left;
+}
+
+/* Section layout */
+#downloadsSection, #librarySection {
+    flex: 1;
+    padding: 20px;
+    background-color: #121212;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+}
+
+#downloadsSection {
+    display: block; /* Ensure it's a block-level container */
+    position: relative; /* To ensure child elements can be positioned relative to this container */
+    margin: 0; /* Reset any margin */
+    padding: 0; /* Reset any padding */
+}
+
+#librarySection {
+    display: none; /* Initially hidden */
+}
+
+/* Webview setup */
+webview {
+    display: block; /* Ensures the webview is treated as a block element */
+    border: none;   /* Remove default border */
+    width: 100%;     /* Full width */
+    height: calc(100% - 50px);    /* Full height of parent container */
+    flex: 1;         /* Ensure the webview takes up the remaining space */
+    margin-top: 10px; /* Optional: Add a small gap for any top margins */
+}
+
+/* Webview setup */
+webview {
+    display: block;        /* Ensures the webview is treated as a block element */
+    border: none;          /* Remove default border */
+    width: 100%;           /* Full width */
+    height: 100%;          /* Full height of parent container */
+    flex: 1;               /* Ensure the webview takes up the remaining space */
+    margin: 0;             /* Remove top margin to prevent gaps */
+}
+
+/* Ensure the #gameBrowser element properly fills space */
+#gameBrowser {
+    flex: 1;
+    display: flex;         /* Ensure it behaves like a flex container */
+    width: 100%;
+    height: 100%;          /* Full height of its parent */
+}
+
+/* App container should use full height */
+#app {
+    display: flex;
+    flex-direction: row;   /* Assuming you want a sidebar */
+    width: 100%;
+    height: 100%;          /* Ensure the app fills the entire window */
+}
+
+.section {
+    display: none;
+}
+
+.section.active {
+    display: block;
+}