* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-height: 100%;
background: #080b11;
color: #fff;
font-family:
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}
body {
min-height: 100vh;
}
/* =========================================================
TOPBAR
========================================================= */
.topbar {
height: 64px;
padding: 0 25px;
display: flex;
align-items: center;
justify-content: space-between;
background: #111722;
border-bottom:
1px solid #252d3a;
position: sticky;
top: 0;
z-index: 100;
}
.topbar-left {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: 700;
}
.brand-icon {
font-size: 23px;
}
.topbar-right {
display: flex;
align-items: center;
gap: 20px;
color: #9ba5b5;
}
.logout {
color: #fff;
text-decoration: none;
padding:
8px 13px;
border-radius: 7px;
background: #202938;
}
.logout:hover {
background: #2b3546;
}
/* =========================================================
CONTAINER
========================================================= */
.container {
width: min(
1500px,
calc(100% - 40px)
);
margin: 0 auto;
padding: 30px 0 50px;
}
.page-title {
margin-bottom: 25px;
display: flex;
justify-content: space-between;
}
.page-title h1 {
margin: 0;
font-size: 30px;
}
.page-title p {
margin:
6px 0 0;
color: #8993a4;
}
/* =========================================================
CAMERA GRID
========================================================= */
.camera-grid {
display: grid;
grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);
gap: 20px;
}
.camera-card {
display: block;
overflow: hidden;
background: #121824;
border:
1px solid #293241;
border-radius: 13px;
color: white;
text-decoration: none;
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}
.camera-card:hover {
transform:
translateY(-3px);
border-color: #3b82f6;
box-shadow:
0 12px 40px
rgba(0,0,0,.3);
}
.camera-image {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #080b11;
}
.camera-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition:
transform .3s ease;
}
.camera-card:hover
.camera-image img {
transform: scale(1.03);
}
.no-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 45px;
color: #5b6575;
}
/* =========================================================
LIVE BADGE
========================================================= */
.live-badge {
position: absolute;
top: 12px;
left: 12px;
padding:
5px 9px;
background:
rgba(0,0,0,.72);
border-radius: 6px;
font-size: 11px;
font-weight: 700;
}
.live-badge span {
display: inline-block;
width: 7px;
height: 7px;
margin-right: 5px;
border-radius: 50%;
background: #ef4444;
}
/* =========================================================
OPEN BUTTON
========================================================= */
.open-camera {
position: absolute;
right: 12px;
bottom: 12px;
padding:
7px 11px;
border-radius: 6px;
background:
rgba(37,99,235,.95);
font-size: 12px;
font-weight: 600;
opacity: 0;
transform:
translateY(5px);
transition:
opacity .2s ease,
transform .2s ease;
}
.camera-card:hover
.open-camera {
opacity: 1;
transform:
translateY(0);
}
/* =========================================================
CAMERA INFO
========================================================= */
.camera-info {
padding: 14px 16px 16px;
}
.camera-info h2 {
margin: 0;
font-size: 17px;
}
.camera-info span {
display: block;
margin-top: 5px;
color: #778195;
font-size: 13px;
}
/* =========================================================
EINZELANSICHT
========================================================= */
.single-header {
display: grid;
grid-template-columns:
1fr auto 1fr;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.back-button {
justify-self: start;
color: #cbd5e1;
text-decoration: none;
padding:
9px 13px;
background: #171e2a;
border:
1px solid #293241;
border-radius: 7px;
}
.back-button:hover {
background: #202938;
}
.single-title {
text-align: center;
}
.single-title h1 {
margin: 0;
font-size: 25px;
}
.live-label {
display: inline-block;
margin-top: 5px;
color: #ef4444;
font-size: 12px;
font-weight: 700;
}
.fullscreen-button {
justify-self: end;
padding:
9px 14px;
border:
1px solid #293241;
border-radius: 7px;
background: #171e2a;
color: white;
cursor: pointer;
font-size: 14px;
}
.fullscreen-button:hover {
background: #202938;
}
/* =========================================================
VIDEO
========================================================= */
.single-player {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #000;
border:
1px solid #293241;
border-radius: 12px;
box-shadow:
0 20px 70px
rgba(0,0,0,.4);
}
.single-player video {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
background: #000;
}
.player-message {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background:
rgba(0,0,0,.55);
color: #dbe3ee;
font-size: 15px;
pointer-events: none;
}
.single-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 13px;
color: #7e899b;
font-size: 13px;
}
.single-footer a {
color: #60a5fa;
text-decoration: none;
}
/* =========================================================
LOGIN
========================================================= */
.login-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background:
radial-gradient(
circle at top,
#1b2940,
#080b11 65%
);
}
.login-box {
width: min(
400px,
100%
);
padding: 35px;
border:
1px solid #2d3747;
border-radius: 15px;
background:
rgba(17,23,34,.97);
box-shadow:
0 25px 80px
rgba(0,0,0,.5);
}
.login-logo {
text-align: center;
font-size: 42px;
margin-bottom: 10px;
}
.login-box h1 {
margin: 0;
text-align: center;
font-size: 25px;
}
.login-subtitle {
text-align: center;
color: #8d98a9;
margin:
7px 0 27px;
}
.login-box label {
display: block;
margin:
0 0 7px;
color: #cbd5e1;
font-size: 14px;
}
.login-box input {
width: 100%;
padding: 13px 14px;
margin-bottom: 17px;
border:
1px solid #354052;
border-radius: 8px;
background: #0d121a;
color: white;
font-size: 16px;
outline: none;
}
.login-box input:focus {
border-color: #3b82f6;
box-shadow:
0 0 0 3px
rgba(59,130,246,.12);
}
.login-button {
width: 100%;
padding: 13px;
border: 0;
border-radius: 8px;
background: #2563eb;
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
.login-button:hover {
background: #1d4ed8;
}
.login-error {
margin-bottom: 18px;
padding: 11px 13px;
border:
1px solid #7f2929;
border-radius: 8px;
background: #451a1a;
color: #ffb4b4;
text-align: center;
font-size: 14px;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
.camera-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.container {
width:
calc(100% - 20px);
padding-top: 20px;
}
.topbar {
padding: 0 12px;
}
.user-name {
display: none;
}
.camera-grid {
grid-template-columns:
1fr;
gap: 14px;
}
.single-header {
grid-template-columns:
1fr 1fr;
gap: 10px;
}
.single-title {
grid-column:
1 / -1;
grid-row: 1;
order: -1;
}
.back-button {
grid-column: 1;
}
.fullscreen-button {
grid-column: 2;
}
.single-title h1 {
font-size: 21px;
}
}
/* =========================================================
FULLSCREEN
========================================================= */
.single-player:fullscreen {
width: 100vw;
height: 100vh;
aspect-ratio: auto;
border: 0;
border-radius: 0;
}
.single-player:fullscreen video {
object-fit: contain;
}