+/* ================================
+ Reset di base
+ ================================ */
+*, *::before, *::after {
+ box-sizing: border-box;
+}
+
/* ================================
Global layout
================================ */
display: flex;
justify-content: space-between;
align-items: center;
- box-sizing: border-box;
}
.logo {
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);
}
/* ================================
+/* ================================
+ 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
================================ */
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;
}
/* ================================
<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">
<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"/>