duimstok.prorail.nl/public/css/install.css

77 lines
3.1 KiB
CSS

.install-toolbar {
display: flex; align-items: center; gap: 8px; padding: 10px 16px;
background: var(--prorail-blue); color: #fff;
position: sticky; top: 0; z-index: 100;
}
.install-toolbar h1 { flex: 1; font-size: 16px; font-weight: 700; }
.install-toolbar .btn-back {
background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.4);
padding: 6px 12px; border-radius: 4px; font-size: 12px; cursor: pointer;
display: inline-flex; align-items: center; gap: 4px;
}
.install-toolbar .btn-back:hover { background: rgba(255,255,255,0.15); }
.install-body {
max-width: 640px; margin: 0 auto; padding: 20px 16px;
}
.install-hero {
background: #fff; border-radius: 12px; padding: 24px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08); text-align: center; margin-bottom: 20px;
}
.install-hero img { width: 96px; height: 96px; margin-bottom: 12px; }
.install-hero h2 { color: var(--prorail-blue); font-size: 20px; margin-bottom: 8px; }
.install-hero p { color: #555; font-size: 13px; line-height: 1.5; }
.install-status {
padding: 10px 14px; border-radius: 6px; font-size: 12px; margin-bottom: 16px;
display: flex; align-items: center; gap: 8px;
}
.install-status.ok { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.install-status.warn { background: #fff8e1; color: #f57f17; border: 1px solid #ffe082; }
.install-status.info { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }
.install-steps {
background: #fff; border-radius: 10px; padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 16px;
}
.install-steps h3 { color: var(--prorail-blue); font-size: 15px; margin-bottom: 12px; }
.install-steps ol { padding-left: 20px; }
.install-steps li {
font-size: 13px; line-height: 1.7; color: #333; margin-bottom: 6px;
}
.install-steps code {
background: #f0f0f0; padding: 1px 6px; border-radius: 3px; font-size: 12px;
font-family: 'Consolas', monospace;
}
.install-steps .key {
display: inline-block; padding: 2px 6px; border: 1px solid #bbb;
border-bottom-width: 2px; border-radius: 3px; background: #f8f8f8;
font-size: 11px; font-family: 'Segoe UI', sans-serif; margin: 0 2px;
}
.install-cta {
display: block; width: 100%; background: var(--prorail-blue); color: #fff;
border: none; padding: 14px 20px; border-radius: 8px;
font-size: 15px; font-weight: 700; cursor: pointer;
font-family: var(--font); margin-top: 12px;
box-shadow: 0 2px 6px rgba(0,48,130,0.3);
}
.install-cta:hover { background: #004db3; }
.install-cta:disabled { background: #aaa; cursor: not-allowed; box-shadow: none; }
.install-benefits {
background: #fff; border-radius: 10px; padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 16px;
}
.install-benefits h3 { color: var(--prorail-blue); font-size: 15px; margin-bottom: 10px; }
.install-benefits ul { list-style: none; padding: 0; }
.install-benefits li {
font-size: 13px; color: #333; padding: 6px 0; padding-left: 28px;
position: relative; line-height: 1.5;
}
.install-benefits li::before {
content: '\2713'; position: absolute; left: 6px; top: 6px;
color: var(--status-done); font-weight: 700;
}