]> git.giorgioravera.it Git - network-manager.git/commitdiff
fixed login page
authorGiorgio Ravera <giorgio.ravera@gmail.com>
Sat, 10 Jan 2026 22:27:26 +0000 (23:27 +0100)
committerGiorgio Ravera <giorgio.ravera@gmail.com>
Sat, 10 Jan 2026 22:27:26 +0000 (23:27 +0100)
frontend/css/layout.css
frontend/css/login.css
frontend/hosts.html
frontend/login.html

index 8d4c85431da7800ec841696d62e5ae5fede38331..1a78ab351186250a87bd3e28d01db204e1c5fb8d 100644 (file)
@@ -1,3 +1,10 @@
+/* ================================
+   Reset di base
+   ================================ */
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
 /* ================================
    Global layout
    ================================ */
@@ -31,7 +38,6 @@ body {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    box-sizing: border-box;
 }
 
 .logo {
@@ -146,12 +152,13 @@ th:hover::after {
     font-weight: 600;
     border-radius: 4px;
     cursor: pointer;
-    transition: background 0.2s ease;
+    transition: background 0.2s ease, filter 0.2s ease;
     box-shadow: 0 2px 4px rgba(0,0,0,0.15);
 }
 
 .btn-primary:hover {
     background-color: var(--accent-hover);
+    filter: brightness(0.96);
 }
 
 /* ================================
index 72329515a6463322915fe2f2ef6fa67ddbc795c0..03e66c2ace4ae743d2a2ee9aff493046d915f8c0 100644 (file)
@@ -1,12 +1,25 @@
+/* ================================
+   Body styles for login page
+   ================================ */
+
+/* Variante per login */
+.body-login {
+    margin: 0;
+    padding-top: 0;
+}
+
 /* ================================
    Login page wrapper
    ================================ */
 .login-wrapper {
     min-height: 100vh;
+    min-height: 100svh;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--bg-light);
+    overflow-y: auto;
+    padding: 20px 0;
 }
 
 /* ================================
     border-left: 4px solid var(--accent);
 }
 
+/* ================================
+   Login box header
+   ================================ */
+.login-box-header {
+    background: var(--bg-dark);
+    padding: 10px 14px;
+    margin: -24px -28px 16px -28px;
+    border-radius: 8px 8px 0 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.login-box-header span {
+    color: var(--text-light);
+    font-weight: 600;
+    font-size: 1rem;
+}
+
 /* ================================
    Logo / title
    ================================ */
@@ -57,7 +89,6 @@
     border: 1px solid var(--border-light);
     font-size: 0.95rem;
     margin-bottom: 12px;
-    box-sizing: border-box;
     background: var(--bg-light);
 }
 
     box-shadow: none;
 }
 
-.btn-primary.login-btn:hover { 
-    box-shadow: none; 
+.btn-primary.login-btn:hover {
+    box-shadow: none;
 }
 
 /* ================================
index e633bcdf4f8d115a3c7b6a10db9e0c1e263d33dd..41ee14071ba2b74dbac267f67d7018490f0d617b 100644 (file)
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Network Manager</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="css/variables.css">
     <link rel="stylesheet" href="css/layout.css">
     <link rel="stylesheet" href="css/hosts.css">
index 974fdb4811564bab017e27a60f0d1d68b4b6c991..929ee50d4ed27530ddf2556b265f6d16b93b1fe5 100644 (file)
@@ -3,16 +3,17 @@
 <head>
     <meta charset="UTF-8">
     <title>Network Manager - Login</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="css/variables.css">
     <link rel="stylesheet" href="css/layout.css">
     <link rel="stylesheet" href="css/login.css">
 </head>
-<body>
+<body class="body-login">
 
 <div class="login-wrapper">
     <div class="login-box">
-        <div class="login-logo">
-            <svg width="34" height="34" viewBox="0 0 24 24" fill="var(--accent)">
+        <div class="login-box-header">
+            <svg width="34" height="34" viewBox="0 0 24 24" fill="var(--accent)" aria-hidden="true">
                 <circle cx="12" cy="4" r="2"/>
                 <circle cx="4" cy="12" r="2"/>
                 <circle cx="20" cy="12" r="2"/>