UI redisign
This commit is contained in:
@@ -39,30 +39,59 @@ td {
|
||||
}
|
||||
|
||||
button {
|
||||
background: #3b82f6;
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #2563eb;
|
||||
border-radius: 8px;
|
||||
padding: 7px 12px;
|
||||
margin: 2px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #1e40af;
|
||||
border-color: #1e40af;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
button.btn-small{
|
||||
font-size:11px;
|
||||
padding:4px 8px;
|
||||
border-radius:999px;
|
||||
}
|
||||
|
||||
button.btn-secondary{
|
||||
background:#e2e8f0;
|
||||
color:#0f172a;
|
||||
border-color:#cbd5e1;
|
||||
}
|
||||
|
||||
button.btn-secondary:hover{
|
||||
background:#cbd5e1;
|
||||
border-color:#94a3b8;
|
||||
}
|
||||
|
||||
button.btn-danger{
|
||||
background:#dc2626;
|
||||
border-color:#dc2626;
|
||||
}
|
||||
|
||||
button.btn-danger:hover{
|
||||
background:#b91c1c;
|
||||
border-color:#b91c1c;
|
||||
}
|
||||
|
||||
button.btn-ghost{
|
||||
background:transparent;
|
||||
color:#1e3a8a;
|
||||
border-color:#bfdbfe;
|
||||
}
|
||||
|
||||
button.btn-ghost:hover{
|
||||
background:#dbeafe;
|
||||
border-color:#93c5fd;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
@@ -346,6 +375,39 @@ body.dark .modal-meta{
|
||||
color:#94a3b8;
|
||||
}
|
||||
|
||||
body.dark button{
|
||||
background:#2563eb;
|
||||
border-color:#2563eb;
|
||||
color:white;
|
||||
}
|
||||
|
||||
body.dark button:hover{
|
||||
background:#1d4ed8;
|
||||
border-color:#1d4ed8;
|
||||
}
|
||||
|
||||
body.dark button.btn-secondary{
|
||||
background:#334155;
|
||||
color:#e5e7eb;
|
||||
border-color:#475569;
|
||||
}
|
||||
|
||||
body.dark button.btn-secondary:hover{
|
||||
background:#475569;
|
||||
border-color:#64748b;
|
||||
}
|
||||
|
||||
body.dark button.btn-ghost{
|
||||
background:transparent;
|
||||
color:#bfdbfe;
|
||||
border-color:#334155;
|
||||
}
|
||||
|
||||
body.dark button.btn-ghost:hover{
|
||||
background:#1e293b;
|
||||
border-color:#475569;
|
||||
}
|
||||
|
||||
body.dark .domain-name,
|
||||
body.dark .subdomain-name{
|
||||
color:#f8fafc;
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
|
||||
<h1>Ressourcen Verwaltung</h1>
|
||||
|
||||
<button onclick="toggleDarkMode()">🌙 Dark Mode</button>
|
||||
<button class="btn-secondary" onclick="toggleDarkMode()">🌙 Dark Mode</button>
|
||||
|
||||
<div id="lastUpdate" style="margin-bottom:10px;color:#555;">
|
||||
Letztes Update: -
|
||||
@@ -216,7 +216,7 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
|
||||
<br><br>
|
||||
|
||||
<button onclick="saveResource()">Speichern</button>
|
||||
<button onclick="closeModal()">Abbrechen</button>
|
||||
<button class="btn-secondary" onclick="closeModal()">Abbrechen</button>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -238,7 +238,7 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
|
||||
|
||||
|
||||
<button id="ipSaveBtn" onclick="saveIP()">Add</button>
|
||||
<button id="ipCancelBtn" onclick="cancelIPEdit()" style="display:none">
|
||||
<button class="btn-secondary" id="ipCancelBtn" onclick="cancelIPEdit()" style="display:none">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
@@ -247,7 +247,7 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
|
||||
|
||||
<br><br>
|
||||
|
||||
<button onclick="closeIPModal()">Close</button>
|
||||
<button class="btn-secondary" onclick="closeIPModal()">Close</button>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -279,7 +279,7 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
|
||||
<br><br>
|
||||
|
||||
<button id="domainSaveBtn" onclick="saveDomain()">Save</button>
|
||||
<button onclick="closeDomainModal()">Cancel</button>
|
||||
<button class="btn-secondary" onclick="closeDomainModal()">Cancel</button>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -293,7 +293,7 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
|
||||
|
||||
<br>
|
||||
|
||||
<button onclick="closeServerDetail()">Schließen</button>
|
||||
<button class="btn-secondary" onclick="closeServerDetail()">Schließen</button>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -317,7 +317,7 @@ Domains jährlich: <span id="costDomain">0</span> €<br>
|
||||
<br><br>
|
||||
|
||||
<button id="subdomainSaveBtn" onclick="saveSubdomain()">Save</button>
|
||||
<button onclick="closeSubModal()">Cancel</button>
|
||||
<button class="btn-secondary" onclick="closeSubModal()">Cancel</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -94,8 +94,8 @@ window.loadDomains = async function(){
|
||||
</div>
|
||||
</div>
|
||||
<div class="domain-actions">
|
||||
<button class="btn-small" onclick='openSubEdit(${JSON.stringify(s)})'>Edit</button>
|
||||
<button class="btn-small btn-danger" onclick="deleteSub(${s.id})">Delete</button>
|
||||
<button class="btn-small" onclick='openSubEdit(${JSON.stringify(s)})'>Bearbeiten</button>
|
||||
<button class="btn-small btn-danger" onclick="deleteSub(${s.id})">Loeschen</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="subdns-${s.id}" style="margin-top:8px">...</div>
|
||||
|
||||
@@ -37,8 +37,8 @@ window.loadResources = async function(){
|
||||
|
||||
tr.innerHTML = `
|
||||
<td>
|
||||
<button onclick="moveResource(${r.id}, 'up')">⬆</button>
|
||||
<button onclick="moveResource(${r.id}, 'down')">⬇</button>
|
||||
<button class="btn-small" onclick="moveResource(${r.id}, 'up')">⬆</button>
|
||||
<button class="btn-small" onclick="moveResource(${r.id}, 'down')">⬇</button>
|
||||
</td>
|
||||
<td>
|
||||
<span style="cursor:pointer;color:#1e3a8a;font-weight:bold"
|
||||
@@ -66,12 +66,12 @@ window.loadResources = async function(){
|
||||
<td>
|
||||
${ips}
|
||||
<br>
|
||||
<button type="button" onclick="openIPManager(${r.id})">IPs</button>
|
||||
<button class="btn-small btn-secondary" type="button" onclick="openIPManager(${r.id})">IPs</button>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<button onclick='openEdit(${JSON.stringify(r)})'>Edit</button>
|
||||
<button onclick="deleteResource(${r.id})">Delete</button>
|
||||
<button class="btn-small" onclick='openEdit(${JSON.stringify(r)})'>Bearbeiten</button>
|
||||
<button class="btn-small btn-danger" onclick="deleteResource(${r.id})">Loeschen</button>
|
||||
</td>
|
||||
`
|
||||
|
||||
@@ -291,11 +291,11 @@ window.loadIPs = async function(resourceId){
|
||||
</span>
|
||||
|
||||
<button onclick="editIP(${ip.id}, '${ip.ip}', '${ip.type || ""}', '${ip.comment || ""}')">
|
||||
Edit
|
||||
Bearbeiten
|
||||
</button>
|
||||
|
||||
<button onclick="deleteIP(${ip.id}, ${resourceId})">
|
||||
Delete
|
||||
<button class="btn-danger" onclick="deleteIP(${ip.id}, ${resourceId})">
|
||||
Loeschen
|
||||
</button>
|
||||
`
|
||||
|
||||
|
||||
Reference in New Issue
Block a user