electric-games/styles.css

/* 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;
}