Adding css styles

2025-05-14 18:12:17 +02:00 · 2025-05-14 18:12:17 +02:00 · 8e34e1056a
commit 8e34e1056a
parent e73d020155
2 changed files with 132 additions and 0 deletions
--- a/member/static/member/css/styles.css
+++ b/member/static/member/css/styles.css
@ -0,0 +1,130 @@
+:root {
+  --bg-dark: #121212;
+  --bg-sidebar: #2a0000;
+  --bg-panel: #1e1e1e;
+  --bg-accent: #b22222;
+  --text-light: #f1f1f1;
+  --text-muted: #999;
+  --highlight: #f5a623;
+  --font-sans: 'Inter', 'Roboto', sans-serif;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  background-color: var(--bg-dark);
+  color: var(--text-light);
+}
+
+.sidebar {
+  width: 220px;
+  height: 100vh;
+  background-color: var(--bg-sidebar);
+  color: var(--text-light);
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+}
+
+.sidebar h2 {
+  font-size: 1.2rem;
+  margin-bottom: 2rem;
+}
+
+.sidebar nav a {
+  color: var(--text-light);
+  text-decoration: none;
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 4px;
+  transition: background 0.2s ease;
+}
+
+.sidebar nav a:hover,
+.sidebar nav a.active {
+  background-color: var(--bg-accent);
+}
+
+.main {
+  margin-left: 220px;
+  padding: 20px;
+  display: flex;
+  height: 100vh;
+  box-sizing: border-box;
+  background-color: var(--bg-dark);
+}
+
+.members-table {
+  flex: 2;
+  margin-right: 20px;
+  background-color: var(--bg-panel);
+  padding: 20px;
+  border-radius: 8px;
+  overflow-y: auto;
+}
+
+.members-table table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.members-table th,
+.members-table td {
+  text-align: left;
+  padding: 10px;
+  border-bottom: 1px solid #333;
+}
+
+.members-table th {
+  color: var(--highlight);
+  font-weight: 600;
+}
+
+.members-table tr:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+  cursor: pointer;
+}
+
+.details-panel {
+  flex: 1;
+  background-color: var(--bg-panel);
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.details-panel h3 {
+  margin-top: 0;
+}
+
+.details-panel .info {
+  margin-bottom: 10px;
+  color: var(--text-muted);
+}
+
+.badge {
+  display: inline-block;
+  background-color: var(--bg-accent);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  color: #fff;
+  margin-right: 5px;
+}
+
+.button {
+  background-color: var(--bg-accent);
+  color: #fff;
+  border: none;
+  padding: 8px 16px;
+  font-size: 0.9rem;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.button:hover {
+  background-color: #d63031;
+}
+
--- a/member/templates/master.html
+++ b/member/templates/master.html
@ -1,7 +1,9 @@
+{% load static %}
 <!DOCTYPE html>
 <html>
 <head>
  <title>{% block title %}{% endblock %}</title>
+  <link rel="stylesheet" href="{% static 'member/css/styles.css' %}">
 </head>
 <body>