File size: 1,537 Bytes
9308228 046481b 9308228 046481b 9308228 a61b280 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | .dw-app-layout {
display: flex;
min-height: 100vh;
background: linear-gradient(145deg, #0d1117 0%, #111a2e 50%, #0a1628 100%);
position: relative;
}
.dw-app-layout::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(76, 141, 255, 0.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(76, 141, 255, 0.15) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse at 50% 40%, black 20%, transparent 70%);
z-index: 0;
}
.dw-app-layout::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 25% 25%, rgba(76, 141, 255, 0.25) 0%, transparent 40%),
radial-gradient(circle at 75% 65%, rgba(110, 86, 255, 0.18) 0%, transparent 35%),
radial-gradient(circle at 50% 90%, rgba(63, 191, 127, 0.12) 0%, transparent 30%);
z-index: 0;
}
.dw-app-layout__main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
.dw-app-layout__content {
flex: 1;
padding: var(--space-8);
max-width: var(--content-max-width);
width: 100%;
margin: 0 auto;
}
@media (max-width: 960px) {
.dw-app-layout__content {
padding: var(--space-5);
}
}
/* Mobile: stack layout vertically */
@media (max-width: 768px) {
.dw-app-layout {
flex-direction: column;
}
.dw-app-layout__content {
padding: var(--space-4) var(--space-3);
padding-bottom: 80px; /* space for bottom nav */
}
}
|