112 lines
2.3 KiB
SCSS
112 lines
2.3 KiB
SCSS
.layout-container {
|
|
--layout-gutter: 16px;
|
|
width: 100%;
|
|
height: 100vh;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: var(--app-bg);
|
|
color: var(--app-text);
|
|
}
|
|
|
|
.layout-navbar {
|
|
flex: 0 0 auto;
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(23, 58, 110, 0.46) 0%,
|
|
rgba(10, 32, 72, 0.62) 50%,
|
|
rgba(30, 74, 140, 0.42) 100%
|
|
);
|
|
border-bottom: 1px solid rgba(167, 203, 255, 0.35);
|
|
box-shadow:
|
|
0 8px 24px rgba(2, 10, 26, 0.45),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
backdrop-filter: blur(14px) saturate(140%);
|
|
-webkit-backdrop-filter: blur(14px) saturate(140%);
|
|
|
|
.navbar-brand,
|
|
.nav-link,
|
|
.navbar-toggler {
|
|
color: var(--app-text);
|
|
}
|
|
|
|
.navbar-brand:hover,
|
|
.nav-link:hover,
|
|
.nav-link:focus {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.navbar-toggler {
|
|
border-color: rgba(255, 255, 255, 0.35);
|
|
}
|
|
|
|
.navbar-toggler-icon {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
.nav-link-custom {
|
|
color: var(--app-text-muted);
|
|
transition: color 160ms ease, text-shadow 160ms ease;
|
|
}
|
|
|
|
.nav-link-custom:hover,
|
|
.nav-link-custom:focus {
|
|
color: #f3f7ff;
|
|
text-shadow: 0 0 12px rgba(168, 203, 255, 0.45);
|
|
}
|
|
|
|
.nav-link-custom.active {
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
text-shadow: 0 0 14px rgba(153, 193, 255, 0.5);
|
|
}
|
|
|
|
.keyboard-nav-group {
|
|
.btn {
|
|
border-color: rgba(173, 205, 255, 0.45);
|
|
color: var(--app-text);
|
|
}
|
|
|
|
.btn:hover,
|
|
.btn:focus {
|
|
color: #ffffff;
|
|
border-color: rgba(225, 237, 255, 0.8);
|
|
}
|
|
|
|
.btn.active {
|
|
background: rgba(90, 146, 255, 0.5);
|
|
border-color: rgba(173, 205, 255, 0.75);
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
text-shadow: 0 0 14px rgba(153, 193, 255, 0.5);
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
background-color: var(--app-bg);
|
|
color: var(--app-text);
|
|
padding-left: var(--layout-gutter);
|
|
padding-right: var(--layout-gutter);
|
|
padding-bottom: var(--layout-gutter);
|
|
}
|
|
.layout-footer {
|
|
flex: 0 0 auto;
|
|
padding: 12px var(--layout-gutter);
|
|
background-color: var(--app-bg);
|
|
border-top: 1px solid rgba(167, 203, 255, 0.35);
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: var(--app-text);
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|