ui tweaks n stuff

This file contains custom CSS tweaks for the UI, including adjustments for the navbar, login page, and left sidebar styles.

app/pages/login/login.html

@@ -6,12 +6,12 @@
 {% block content %}
 <div id="main">
     <div class="login-container d-flex align-items-center justify-content-center">
-        <div style="padding: 10px;min-width:330px;" class="ps-md-4 pe-md-4">
+        <div class="login-panel px-4 py-4">
             <img src="/static/img/LoginLogo.png" alt="Nexium" class="login-logo" />
             <p class="login-subtitle">2016+ with freedom.</p>
             {% with messages = get_flashed_messages(with_categories=true) %}
                 {% if messages %}
-                <div>
+                <div class="mb-2">
                 {% for category, message in messages %}
                     {% if category == 'error': %}
                     <div class="alert border p-2 text-center alert-danger border-danger">
@@ -34,10 +34,9 @@
                 <button type="submit" class="btn btn-primary mb-3" {% if not loginEnabled: %}disabled{% endif %}>Login</button>
             </form>
             <div class="text-center mt-2">
-                <p>Don't have an account? <a href="/signup">Signup</a>
+                <p>Don't have an account? <a href="/signup">Signup</a></p>
             </div>
         </div>
-        <img style="aspect-ratio: 7/4;min-height: 317px;max-height: 390px;" class="d-lg-block d-none" src="/static/img/LoginImage2.png" alt="Login Image">
     </div>
 </div>
 {% endblock %}

app/pages/signup/signup.html

@@ -6,17 +6,13 @@
 {% endblock %}
 {% block content %}
 <div id="main">
-    <div class="signup-wrapper" style="position:relative;">
+    <div class="signup-container d-flex align-items-center justify-content-center">
-        <!-- logo moved outside the signup card so it can overlap/escape the container -->
+        <div class="signup-panel px-4 py-4">
-        <img src="/static/img/LoginLogo.png" alt="NEXIUM" class="logo-outside d-none d-lg-block" />
+            <img src="/static/img/LoginLogo.png" alt="NEXIUM" class="signup-logo" />
-        <div class="signup-row">
+            <p class="signup-subtitle">2016+ with freedom.</p>
-            <div class="signup-card">
-                <div class="signup-container d-flex align-items-center justify-content-center">
-                    <div style="padding: 10px;min-width:300px;" class="ps-md-4 pe-md-4">
-                        <p class="signup-subtitle">2018+ with freedom.</p>
             {% with messages = get_flashed_messages() %}
             {% if messages %}
-            <div>
+            <div class="mb-2">
             {% for message in messages %}
                 <div class="alert border border-danger p-2 text-center messagealerts">
                     {{ message }}
@@ -37,19 +33,12 @@
                         <p>I agree to the <a href="/terms">Terms of Service</a> and <a href="/privacy">Privacy Policy</a></p>
                     </label>
                 </div>
-                <div class="cf-turnstile d-table mb-2" style="margin: 0 auto;" data-theme="dark" data-sitekey="{{turnstilekey}}"></div>
+                <div class="cf-turnstile d-table mb-2 mx-auto" data-theme="dark" data-sitekey="{{turnstilekey}}"></div>
                 {% if SignupEnabled: %}<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>{%endif%}
                 <button type="submit" class="btn btn-primary mb-3" {% if not SignupEnabled: %}disabled{% endif %}>Signup</button>
             </form>
             <div class="text-center mt-2">
-                <p>Already have an account? <a href="/login">Login</a>
+                <p>Already have an account? <a href="/login">Login</a></p>
-            </div>
-        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="signup-visual d-none d-lg-block">
-                <img style="width:100%;height:100%;object-fit:cover;min-height:400px;max-height:550px;" src="/static/img/LoginImage2.png" alt="Signup Image">
             </div>
         </div>
     </div>

app/static/css/custom-ui-tweaks.css

@@ -0,0 +1,134 @@
+/* Custom UI tweaks for demos: reposition/resize header and navbar elements */
+:root{
+  --navbar-height: 64px;
+}
+
+/* Make navbar slightly taller and adjust brand positioning */
+.navbar {
+  min-height: var(--navbar-height) !important;
+  height: var(--navbar-height) !important;
+}
+
+.navbar .navbar-brand .title-logo {
+  font-size: 1.25rem;
+  line-height: 1;
+  margin: 0;
+  transform: translateY(6px);
+}
+
+/* Resize avatar in navbar */
+.d-flex #currencydiv img {
+  width: 28px !important;
+  height: 28px !important;
+}
+
+/* Slightly increase spacing for nav links */
+.navbar-nav .nav-link {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+/* Example utility: move nav to the right on larger screens */
+@media (min-width: 992px) {
+  .navbar .container-fluid > .navbar-brand { margin-right: 24px; }
+}
+
+/* Use this file to experiment: change --navbar-height or transforms to reposition/resize elements */
+
+/* ------------------------
+   Login page repositioning
+   - Moves the decorative image to the left of the form on wide screens
+   - Stacks the image above the form on small screens
+   - Adjust gap and max-height to taste
+   ------------------------ */
+.login-container {
+  display: flex;
+  align-items: center;
+  gap: 32px;
+}
+
+.login-container > div {
+  order: 2; /* form column */
+  flex: 1 1 0;
+}
+
+.login-container img {
+  order: 1; /* image column */
+  max-height: 420px;
+  width: auto;
+  display: block;
+}
+
+/* Mobile / small screens: stack vertically with image on top */
+@media (max-width: 992px) {
+  .login-container {
+	flex-direction: column-reverse; /* keep form visible first on very small screens */
+	min-width: 280px;
+	gap: 16px;
+  }
+  .login-container img {
+	width: 100%;
+	max-height: 240px;
+	object-fit: cover;
+  }
+  .login-container > div {
+	order: 1;
+	width: 100%;
+  }
+}
+
+/* Utility: nudge the form horizontally if needed */
+.login-container .form-nudge { transform: translateX(10px); }
+
+/* Login logo styling: replace h1 text with an image */
+.login-logo {
+  display: block;
+  margin: 0 auto 8px;
+  max-width: 220px;
+  height: auto;
+}
+.login-subtitle {
+  text-align: center;
+  margin-bottom: 12px;
+  font-size: small;
+  color: rgba(230,238,248,0.9);
+}
+
+/* Navbar brand logo styling */
+.navbar .navbar-brand .brand-logo {
+  display: block;
+  max-height: 44px;
+  width: auto;
+  transform: translateY(6px);
+}
+
+/* Left sidebar styles (replaces top navbar) */
+.has-left-sidebar .fixed-top.width-100 { display: none !important; }
+.left-sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 220px;
+  background: #1f1f1f;
+  color: #fff;
+  padding-top: 18px;
+  z-index: 1040;
+  overflow: auto;
+}
+.left-sidebar .sidebar-brand { text-align: center; padding: 6px 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); }
+.left-sidebar .sidebar-brand .brand-logo { max-height: 48px; }
+.left-sidebar .sidebar-nav ul { list-style:none; margin:0; padding:8px 0; }
+.left-sidebar .sidebar-nav li { margin:0; }
+.left-sidebar .sidebar-nav a { display:block; padding:10px 16px; color: #ddd; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.02); }
+.left-sidebar .sidebar-nav a:hover { background: rgba(255,255,255,0.03); color:#fff; }
+.left-sidebar .sidebar-nav .badge { background:#e53935; color:#fff; font-size:11px; padding:2px 6px; border-radius:10px; margin-left:6px; }
+
+/* push page content to the right so the sidebar doesn't overlap */
+.has-left-sidebar body, .has-left-sidebar .width-100 { margin-left: 220px !important; }
+@media (max-width: 992px) {
+  .left-sidebar { transform: translateX(-220px); transition: transform .2s ease; }
+  .left-sidebar.open { transform: translateX(0); }
+  .has-left-sidebar .width-100 { margin-left: 0 !important; }
+}
+

app/static/css/login.css

@@ -1,28 +1,46 @@
 body {
-    background: radial-gradient(circle, var(--auth-dot) 10%, transparent 11%),radial-gradient(circle at bottom left, var(--auth-dot) 5%, transparent 6%),radial-gradient(circle at bottom right, var(--auth-dot) 5%, transparent 6%),radial-gradient(circle at top left, var(--auth-dot) 5%, transparent 6%),radial-gradient(circle at top right, var(--auth-dot) 5%, transparent 6%);
+    position: relative;
-    background-size: 3em 3em;
+    min-height: 100vh;
-    background-color: var(--auth-bg);
+    background-color: #050505;
+    overflow-x: hidden;
+    isolation: isolate;
+}
+
+body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    background-image: linear-gradient(rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.68)), url("/static/img/LoginPage.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    filter: blur(12px) brightness(0.7) saturate(0.85);
+    transform: scale(1.08);
+    z-index: 0;
+    pointer-events: none;
 }
 #main {
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
+    z-index: 1;
 }
 
 .login-container {
-    min-width: 330px;
+    width: 100%;
-    display: inline-block;
+    padding: 24px 16px;
-    background-color: var(--auth-card-bg);
-    box-shadow: 0 0 15px var(--auth-card-shadow);
 }
 
-.login-container h1 {
+.login-panel {
-    text-align: center;
+    width: min(100%, 420px);
-    margin-bottom: 0;
+    background-color: var(--auth-card-bg);
-    font-size: 3.5rem;
+    box-shadow: 0 0 15px var(--auth-card-shadow);
-    font-weight: 700;
+    border-radius: 2px;
+    position: relative;
+    z-index: 1;
 }
+
 .login-container p {
     text-align: center;
     padding: 0;
@@ -52,10 +70,28 @@ body {
     margin-bottom: 10px;
 }
 
-.login-container img {
+.login-logo {
-    min-width: 500px;
+        display: block;
+        margin: 0 auto 8px;
+        max-width: 320px;
+        width: 100%;
+        height: auto;
+}
+
+.login-subtitle {
+        text-align: center;
+        margin-bottom: 12px;
+        color: rgba(230, 238, 248, 0.9);
+        font-size: small;
+}
+
+.login-container button {
+    color: #fff;
+}
+
+.login-container .alert {
+    margin-bottom: 0.5rem;
 }
-    
 
 .form-text {
     /* wrap the text*/
@@ -91,7 +127,7 @@ body {
   font-size: small;
 }
 @media (max-width: 480px) {
-  .login-logo { max-width: 160px; }
+    .login-logo { max-width: 240px; }
 }
 .navbar .navbar-brand .brand-logo {
   display: block;

app/static/css/signup.css

@@ -1,7 +1,23 @@
 body {
-    background: radial-gradient(circle, #333 10%, transparent 11%),radial-gradient(circle at bottom left, #333 5%, transparent 6%),radial-gradient(circle at bottom right, #333 5%, transparent 6%),radial-gradient(circle at top left, #333 5%, transparent 6%),radial-gradient(circle at top right, #333 5%, transparent 6%);
+    position: relative;
-    background-size: 3em 3em;
+    min-height: 100vh;
-    background-color: rgb(20,20,20);
+    background-color: #050505;
+    overflow-x: hidden;
+    isolation: isolate;
+}
+
+body::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    background-image: linear-gradient(rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.68)), url("/static/img/LoginPage.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    filter: blur(12px) brightness(0.7) saturate(0.85);
+    transform: scale(1.08);
+    z-index: 0;
+    pointer-events: none;
 }
 
 #main {
@@ -9,27 +25,36 @@ body {
     justify-content: center;
     align-items: center;
     min-height: 100vh;
+    z-index: 1;
 }
 
 .signup-container {
-    min-width: 330px;
+    width: 100%;
-    display: inline-block;
+    padding: 24px 16px;
-    background-color: rgba(25,25,25, 1);
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
 }
 
-/* only align h1 tags */
+.signup-panel {
-.signup-container h1 {
+    width: min(100%, 420px);
-    text-align: center;
+    background-color: var(--auth-card-bg);
-    margin-bottom: 0;
+    box-shadow: 0 0 15px var(--auth-card-shadow);
-    font-size: 3.5rem;
+    border-radius: 2px;
-    font-weight: 700;
+    position: relative;
+    z-index: 1;
 }
-.signup-container p {
+
+.signup-logo {
+    display: block;
+    margin: 0 auto 8px;
+    max-width: 320px;
+    width: 100%;
+    height: auto;
+}
+
+.signup-subtitle {
     text-align: center;
-    padding: 0;
-    margin-bottom: 15px; 
     font-size: small;
+    margin-bottom: 12px;
+    color: rgba(230, 238, 248, 0.9);
 }
 
 .signup-container button {
@@ -51,14 +76,35 @@ body {
 }
 
 #password {
-    min-width: 300px;
     margin-top: 10px;
     margin-bottom: 10px;
 }
 
+#username,
+#invite-key {
+    min-width: 0;
+}
+
+#checkboxTerms {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    margin: 8px 0 12px;
+}
+
+#checkboxTerms p {
+    margin: 0;
+    text-align: left;
+    font-size: small;
+}
+
+.form-check-input {
+    margin-top: 0.2rem;
+}
+
 .messagealerts {
-    background: rgba(255, 0, 0, 0.2);
+    background: var(--alert-bg);
-    color: rgb(226, 226, 226);
+    color: var(--alert-text);
     word-wrap: break-word;
 }
 
@@ -67,36 +113,25 @@ body {
     word-wrap: break-word;
 }
 
-a {
+.signup-container a {
     text-decoration: none !important;
     color: rgb(32, 147, 255) !important;
     font-weight: 500 !important;
     transition: 0.2s;
 }
 
-a:hover {
+.signup-container a:hover {
     text-decoration: none !important;
     color: rgb(3, 133, 255) !important;
     transition: 0.2s;
 }
 
-/* Logo outside the signup card so it can overlap/escape the container */
+@media (max-width: 480px) {
-.signup-wrapper { position: relative; }
+    .signup-panel {
-.logo-outside {
+        width: 100%;
-  position: absolute;
+    }
-  right: -40px; /* push beyond the card -- adjust to taste */
-  top: 50%;
-  transform: translateY(-50%);
-  max-width: 320px;
-  width: auto;
-  height: auto;
-  z-index: 0; /* behind the card; use higher if you want it above */
-  pointer-events: none;
-}
-.signup-container { position: relative; z-index: 1; }
-.signup-subtitle { text-align: center; margin-bottom: 12px; color: rgba(230,238,248,0.9); font-size: small; }
 
-@media (max-width: 992px) {
+    .signup-logo {
-  .logo-outside { display: none; }
+        max-width: 240px;
-  .signup-container { min-width: 320px; }
+    }
 }