144 lines
3.9 KiB
CSS
144 lines
3.9 KiB
CSS
/* Custom UI tweaks for demos: reposition/resize header and navbar elements */
|
|
:root{
|
|
--navbar-height: 64px;
|
|
}
|
|
|
|
/* Make navbar slightly taller and adjust brand positioning */
|
|
.navbar {
|
|
min-height: var(--navbar-height) !important;
|
|
height: var(--navbar-height) !important;
|
|
}
|
|
|
|
.navbar .navbar-brand .title-logo {
|
|
font-size: 1.25rem;
|
|
line-height: 1;
|
|
margin: 0;
|
|
transform: translateY(6px);
|
|
}
|
|
|
|
/* Resize avatar in navbar */
|
|
.d-flex #currencydiv img {
|
|
width: 28px !important;
|
|
height: 28px !important;
|
|
}
|
|
|
|
/* Slightly increase spacing for nav links */
|
|
.navbar-nav .nav-link {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
/* Example utility: move nav to the right on larger screens */
|
|
@media (min-width: 992px) {
|
|
.navbar .container-fluid > .navbar-brand { margin-right: 24px; }
|
|
}
|
|
|
|
/* Use this file to experiment: change --navbar-height or transforms to reposition/resize elements */
|
|
|
|
/* ------------------------
|
|
Login page repositioning
|
|
- Moves the decorative image to the left of the form on wide screens
|
|
- Stacks the image above the form on small screens
|
|
- Adjust gap and max-height to taste
|
|
------------------------ */
|
|
.login-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 32px;
|
|
}
|
|
|
|
.login-container > div {
|
|
order: 2; /* form column */
|
|
flex: 1 1 0;
|
|
}
|
|
|
|
.login-container img {
|
|
order: 1; /* image column */
|
|
max-height: 420px;
|
|
width: auto;
|
|
display: block;
|
|
}
|
|
|
|
/* Mobile / small screens: stack vertically with image on top */
|
|
@media (max-width: 992px) {
|
|
.login-container {
|
|
flex-direction: column-reverse; /* keep form visible first on very small screens */
|
|
min-width: 280px;
|
|
gap: 16px;
|
|
}
|
|
.login-container img {
|
|
width: 100%;
|
|
max-height: 240px;
|
|
object-fit: cover;
|
|
}
|
|
.login-container > div {
|
|
order: 1;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* Utility: nudge the form horizontally if needed */
|
|
.login-container .form-nudge { transform: translateX(10px); }
|
|
|
|
/* Login logo styling: replace h1 text with an image */
|
|
.login-logo {
|
|
display: block;
|
|
margin: 0 auto 8px;
|
|
max-width: 220px;
|
|
height: auto;
|
|
}
|
|
.login-subtitle {
|
|
text-align: center;
|
|
margin-bottom: 12px;
|
|
font-size: small;
|
|
color: rgba(230,238,248,0.9);
|
|
}
|
|
|
|
/* Navbar brand logo styling */
|
|
.navbar .navbar-brand .brand-logo {
|
|
display: block;
|
|
max-height: 72px; /* increased size */
|
|
width: auto;
|
|
transform: translateY(2px);
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.navbar .navbar-brand .brand-logo { max-height: 48px; transform: translateY(4px); }
|
|
}
|
|
|
|
.has-left-sidebar .fixed-top.width-100 {
|
|
/* Keep the top bar visible when a left sidebar is present.
|
|
Shift it right so it doesn't overlap the sidebar and reduce its width. */
|
|
left: 220px !important;
|
|
width: calc(100% - 220px) !important;
|
|
box-sizing: border-box;
|
|
}
|
|
.left-sidebar {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 220px;
|
|
background: #1f1f1f;
|
|
color: #fff;
|
|
padding-top: 18px;
|
|
z-index: 1040;
|
|
overflow: auto;
|
|
}
|
|
.left-sidebar .sidebar-brand { text-align: center; padding: 6px 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); }
|
|
.left-sidebar .sidebar-brand .brand-logo { max-height: 48px; }
|
|
.left-sidebar .sidebar-nav ul { list-style:none; margin:0; padding:8px 0; }
|
|
.left-sidebar .sidebar-nav li { margin:0; }
|
|
.left-sidebar .sidebar-nav a { display:block; padding:10px 16px; color: #ddd; text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.02); }
|
|
.left-sidebar .sidebar-nav a:hover { background: rgba(255,255,255,0.03); color:#fff; }
|
|
.left-sidebar .sidebar-nav .badge { background:#e53935; color:#fff; font-size:11px; padding:2px 6px; border-radius:10px; margin-left:6px; }
|
|
|
|
/* push page content to the right so the sidebar doesn't overlap */
|
|
.has-left-sidebar body, .has-left-sidebar .width-100 { margin-left: 220px !important; }
|
|
@media (max-width: 992px) {
|
|
.left-sidebar { transform: translateX(-220px); transition: transform .2s ease; }
|
|
.left-sidebar.open { transform: translateX(0); }
|
|
.has-left-sidebar .width-100 { margin-left: 0 !important; }
|
|
}
|
|
|