nested css

This commit is contained in:
CroneKorkN 2026-01-18 19:18:53 +01:00
parent 3671636487
commit 7c4177d749
Signed by: cronekorkn
SSH key fingerprint: SHA256:v0410ZKfuO1QHdgKBsdQNF64xmTxOF8osF1LIqwTcVw

View file

@ -34,25 +34,27 @@ header.navbar {
color: white;
padding: 15px 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
header.navbar h1 {
margin-bottom: 10px;
}
h1 {
margin-bottom: 10px;
}
header.navbar nav ul {
list-style: none;
display: flex;
gap: 20px;
}
nav {
ul {
list-style: none;
display: flex;
gap: 20px;
}
header.navbar nav a {
color: white;
text-decoration: none;
}
a {
color: white;
text-decoration: none;
header.navbar nav a:hover {
color: #ccc;
&:hover {
color: #ccc;
}
}
}
}
main {
@ -88,12 +90,16 @@ th, td {
text-align: left;
}
tbody tr:hover {
background-color: #f9f9f9;
}
tbody {
tr {
&:hover {
background-color: #f9f9f9;
}
tbody tr:nth-child(even) {
background-color: #fafafa;
&:nth-child(even) {
background-color: #fafafa;
}
}
}
.btn {
@ -108,79 +114,77 @@ tbody tr:nth-child(even) {
font-size: 14px;
transition: background-color 0.2s;
margin-right: 5px;
}
.btn:hover {
background-color: #ccc;
}
&:hover {
background-color: #ccc;
}
.btn--primary {
background-color: #007bff;
color: white;
}
&--primary {
background-color: #007bff;
color: white;
.btn--primary:hover {
background-color: #0056b3;
}
&:hover {
background-color: #0056b3;
}
}
.btn--success {
background-color: #28a745;
color: white;
}
&--success {
background-color: #28a745;
color: white;
.btn--success:hover {
background-color: #1e7e34;
}
&:hover {
background-color: #1e7e34;
}
}
.btn--danger {
background-color: #dc3545;
color: white;
}
&--danger {
background-color: #dc3545;
color: white;
.btn--danger:hover {
background-color: #c82333;
}
&:hover {
background-color: #c82333;
}
}
.btn--warning {
background-color: #ffc107;
color: #333;
}
&--warning {
background-color: #ffc107;
color: #333;
.btn--warning:hover {
background-color: #e0a800;
}
&:hover {
background-color: #e0a800;
}
}
.btn--small {
padding: 6px 10px;
font-size: 12px;
&--small {
padding: 6px 10px;
font-size: 12px;
}
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
input,
textarea,
select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 5px rgba(0,123,255,0.25);
&:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 5px rgba(0,123,255,0.25);
}
}
}
.form-actions {
@ -192,18 +196,18 @@ tbody tr:nth-child(even) {
margin-bottom: 20px;
border-radius: 4px;
border-left: 4px solid;
}
.alert--success {
background-color: #d4edda;
border-color: #28a745;
color: #155724;
}
&--success {
background-color: #d4edda;
border-color: #28a745;
color: #155724;
}
.alert--error {
background-color: #f8d7da;
border-color: #dc3545;
color: #721c24;
&--error {
background-color: #f8d7da;
border-color: #dc3545;
color: #721c24;
}
}
.status {
@ -212,26 +216,26 @@ tbody tr:nth-child(even) {
font-size: 12px;
font-weight: 600;
display: inline-block;
}
.status--stopped {
background-color: #e9ecef;
color: #6c757d;
}
&--stopped {
background-color: #e9ecef;
color: #6c757d;
}
.status--starting {
background-color: #fff3cd;
color: #856404;
}
&--starting {
background-color: #fff3cd;
color: #856404;
}
.status--running {
background-color: #d4edda;
color: #155724;
}
&--running {
background-color: #d4edda;
color: #155724;
}
.status--failed {
background-color: #f8d7da;
color: #721c24;
&--failed {
background-color: #f8d7da;
color: #721c24;
}
}
section {
@ -255,20 +259,22 @@ section {
word-wrap: break-word;
}
.server-info p {
margin-bottom: 10px;
.server-info {
p {
margin-bottom: 10px;
}
}
.overlays-list {
list-style: decimal;
padding-left: 20px;
}
.overlays-list li {
padding: 8px 0;
display: flex;
justify-content: space-between;
align-items: center;
li {
padding: 8px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
}
.template-preview {