/** * Rising PMS — MyTask-style Sidebar + Layout * * Sidebar palette (matched from MyTask preview): * Sidebar bg: #3f2d7e (deep purple) * Brand bg: #3a2873 * Active text: #ff4b6e (coral-pink) * Nav text: #ffffff * Nav icon: rgba(255,255,255,0.85) * Submenu bg: #392870 (slightly darker) * Chevron muted: rgba(255,255,255,0.4) * * Topbar: * Topbar bg: #ffffff * Topbar shadow: 0 1px 4px rgba(0,0,0,0.08) * Icon color: #6c757d * Avatar bg: #3f2d7e * * Content: * Content bg: #f4f6f9 */ /* ============================================================ FONTS — Material Icons (local fonts already in css/fonts/) ============================================================ */ @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); /* ============================================================ CSS VARIABLES ============================================================ */ :root { --sidebar-width: 250px; --sidebar-collapsed: 0px; --sidebar-bg: #ffffff; --sidebar-brand-bg: #ffffff; --sidebar-border: rgb(235, 235, 235); --sidebar-text: #060606; --sidebar-icon: #6b7280; --sidebar-muted: #6b7280; --sidebar-hover-bg: #eff6ff; --sidebar-active-text: #1d49d8; --sidebar-submenu-bg: #ffffff; --sidebar-submenu-active-text: #1d49d8; --topbar-height: 60px; --topbar-bg: #ffffff; --topbar-shadow: 0 1px 4px rgba(0,0,0,0.08); --topbar-shadow-right: 0px 10px 5px rgba(0,0,0,0.08); --topbar-icon: #6c757d; --topbar-border: #e9ecef; --content-bg: #f8f9fa; --card-bg: #ffffff; --card-radius: 6px; --card-shadow: 0 1px 8px rgba(0,0,0,0.07); --card-border: #e9ecef; --primary: #3f2d7e; --primary-hover: #352570; --primary-light: #ede9fe; --accent: #ff4b6e; --accent-hover: #e83560; --success: #28a745; --warning: #ffc107; --danger: #dc3545; --info: #17a2b8; --text-color: #495057; --text-muted: #868e96; --heading-color: #2c3e50; --border-color: #e9ecef; --border-radius: 6px; --transition: all 0.25s ease; --bg-color-1: #6366f1; --bg-color-2: #ec4899; --bg-color-3: #f59e0b; --bg-color-4: #10b981; --bg-color-5: #4a6cf7; --bg-color-6: #f97316; --bg-color-7: #84cc16; --bg-color-8: #06b6d4; --bg-color-9: #8b5cf6; --bg-color-10: #ef4444; } /* ============================================================ RESET / BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 14px; scroll-behavior: smooth; } body { font-family: 'Poppins', 'Roboto', sans-serif; font-size: 14px; background: var(--content-bg); color: var(--text-color); overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-hover); } /* ============================================================ LAYOUT SHELL ============================================================ */ .rising-layout { display: flex; min-height: 100vh; } /* ============================================================ SIDEBAR ============================================================ */ #left-sidebar { width: var(--sidebar-width); position: fixed; border-right: 1px solid #ebebeb; /* Offset below/beside the Drupal admin toolbar using core displace variables. Drupal's drupal.displace library sets these on automatically. They are 0px when no admin toolbar is present. */ top: var(--drupal-displace-offset-top, 0px); left: var(--drupal-displace-offset-left, 0px); height: calc(100vh - var(--drupal-displace-offset-top, 0px)); /* Stay below the Drupal admin toolbar (z-index ~600) */ z-index: 490; display: flex; flex-direction: column; transition: transform 0.25s ease, width 0.25s ease; overflow-x: hidden; overflow-y: auto; box-shadow: var(--topbar-shadow-right); } #left-sidebar .left-sidebar-inner{ margin: 0px; border-radius: 0px; background: var(--sidebar-bg); } /* Scrollbar inside sidebar */ #left-sidebar::-webkit-scrollbar { width: 3px; } #left-sidebar::-webkit-scrollbar-track { background: transparent; } #left-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; } .main-content{ background: #ffffff; padding: 20px; } .path-plan-port .main-content{ background: inherit; padding: 0px; } /* Collapsed state (desktop) */ body.sidebar-collapsed #left-sidebar { width: 0; overflow: hidden; } body.sidebar-collapsed #main-wrapper { /* When sidebar is collapsed, only the Drupal toolbar left offset remains */ margin-left: var(--drupal-displace-offset-left, 0px); } /* ----- Brand area ----- */ .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 5px 20px; /* height: var(--topbar-height); */ background: var(--sidebar-brand-bg); flex-shrink: 0; overflow: hidden; white-space: nowrap; border-bottom: 1px solid var(--sidebar-border); } .brand-logo-circle { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; background: #cccccc; } .brand-logo-img { width: 100%; height: 100%; object-fit: contain; /* filter: brightness(0) invert(1); */ } .brand-name { font-size: 17px; font-weight: 700; color: #000000; letter-spacing: 0.3px; } /* ----- Nav wrapper ----- */ .sidebar-nav-wrapper { flex: 1; padding: 12px 0; overflow-y: auto; overflow-x: hidden; } .sidebar-nav-wrapper::-webkit-scrollbar { width: 3px; } .sidebar-nav-wrapper::-webkit-scrollbar-track { background: transparent; } .sidebar-nav-wrapper::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; } /* ----- Sidebar menu list ----- */ .sidebar-menu { list-style: none; padding: 0; margin: 0; } .sidebar-menu-item { position: relative; } /* ----- Nav links ----- */ .sidebar-menu-link { display: flex; align-items: center; gap: 10px; padding: 12px 20px; color: var(--sidebar-text); font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: color 0.18s ease, background 0.18s ease; text-decoration: none; position: relative; } .sidebar-menu-link:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-active-text); text-decoration: none; } .page-wrapper *:focus, .ui-dialog *:focus{ box-shadow: none; outline: 0px; } /* Active link */ .sidebar-menu-link.active, .sidebar-menu-item.open > .sidebar-menu-link { color: var(--sidebar-active-text); background: var(--sidebar-hover-bg); } .sidebar-menu-link.active .sidebar-menu-icon, .sidebar-menu-item.open > .sidebar-menu-link .sidebar-menu-icon { color: var(--sidebar-active-text); } /* ----- Icons ----- */ .sidebar-menu-icon { font-size: 20px; flex-shrink: 0; color: var(--sidebar-icon); width: 22px; text-align: center; transition: color 0.18s ease; } /* ----- Arrow chevron ----- */ .sidebar-menu-arrow { font-size: 18px; margin-left: auto; color: var(--sidebar-muted); transition: transform 0.22s ease, color 0.18s ease; flex-shrink: 0; } .sidebar-menu-item.open > .sidebar-menu-link .sidebar-menu-arrow { transform: rotate(180deg); color: var(--sidebar-active-text); } /* ----- Submenus ----- */ .sidebar-submenu { list-style: none; padding: 0; margin: 0; background: var(--sidebar-submenu-bg); max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .sidebar-menu-item.open > .sidebar-submenu { max-height: 500px; } .sidebar-submenu-link { display: flex; align-items: center; gap: 10px; padding: 10px 20px 10px 50px; color: var(--sidebar-submenu-active-text); font-size: 13px; font-weight: 400; cursor: pointer; transition: color 0.15s ease; text-decoration: none; } .sidebar-submenu-link:hover { color: var(--sidebar-submenu-active-text); text-decoration: none; /* background: var(--sidebar-hover-bg); */ } .sidebar-submenu-link.active { color: var(--sidebar-submenu-active-text); font-weight: 500; } .submenu-dot { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.4); background: var(--sidebar-active-text); flex-shrink: 0; transition: border-color 0.15s, background 0.15s; } .sidebar-submenu-link:hover .submenu-dot, .sidebar-submenu-link.active .submenu-dot { background: var(--sidebar-active-text); border-color: var(--sidebar-active-text); } /* ----- Sidebar bottom action ----- */ .sidebar-bottom-action { padding: 16px 20px; border-top: 1px solid var(--sidebar-border); flex-shrink: 0; } .sidebar-logout-btn { display: flex; align-items: center; gap: 8px; color: rgba(0, 0, 0, 0.9); font-size: 13px; font-weight: 500; transition: color 0.18s ease; text-decoration: none; } .sidebar-logout-btn:hover { color: var(--sidebar-active-text); text-decoration: none; } .sidebar-logout-btn .material-icons { font-size: 20px; } /* ============================================================ MAIN WRAPPER ============================================================ */ #main-wrapper { /* sidebar width + any Drupal vertical toolbar (icon strip or open tray) */ margin-left: calc(var(--sidebar-width) + var(--drupal-displace-offset-left, 0px)); flex: 1; display: flex; flex-direction: column; min-height: 100vh; transition: margin-left 0.25s ease; overflow-x: scroll; } /* ============================================================ TOPBAR ============================================================ */ .main-topbar { height: var(--topbar-height); background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-border); box-shadow: var(--topbar-shadow); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 1030; z-index: 501; } .topbar-left { display: flex; align-items: center; gap: 12px; } .topbar-right { display: flex; align-items: center; gap: 6px; } /* Hamburger toggle button */ .sidebar-toggle-btn { width: 36px; height: 36px; border: none; background: none; border-radius: var(--border-radius); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--topbar-icon); transition: background 0.18s ease, color 0.18s ease; padding: 0; } .sidebar-toggle-btn:hover { background: var(--primary-light); color: var(--primary); } .sidebar-toggle-btn .material-icons { font-size: 22px; } /* Topbar action buttons (timer, fullscreen) */ .topbar-action-btn { width: 36px; height: 36px; border: none; background: none; border-radius: var(--border-radius); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--topbar-icon); position: relative; transition: background 0.18s ease, color 0.18s ease; padding: 0; } .topbar-action-btn:hover { background: var(--primary-light); color: var(--primary); } .topbar-action-btn .material-icons { font-size: 20px; } /* Topbar search (featured_top region) */ .topbar-search { display: flex; align-items: center; } /* Notification wrapper */ .notification-wrapper { position: relative; width: auto; padding: 0 4px; } /* ----- User dropdown ----- */ .topbar-user-dropdown { position: relative; } .user-avatar-btn { display: flex; align-items: center; gap: 8px; border: none; background: none; cursor: pointer; padding: 4px 8px; border-radius: var(--border-radius); transition: background 0.18s ease; } .user-avatar-btn:hover { background: var(--primary-light); } .user-avatar-circle { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; text-transform: uppercase; } .user-display-name { font-size: 13.5px; font-weight: 600; color: var(--heading-color); white-space: nowrap; } .user-dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--border-radius); box-shadow: var(--card-shadow); display: none; flex-direction: column; padding: 6px; z-index: 1050; } .user-dropdown-menu.show { display: flex; } .user-dropdown-menu a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 4px; font-size: 13.5px; color: var(--text-color); transition: background 0.15s ease; text-decoration: none; } .user-dropdown-menu a:hover { background: var(--primary-light); color: var(--primary); } .user-dropdown-menu .material-icons { font-size: 16px; } .dropdown-divider { border: none; border-top: 1px solid var(--border-color); margin: 4px 0; } /* ============================================================ CONTENT AREA ============================================================ */ #main-content { flex: 1; padding: 24px; background: var(--content-bg); } /* Page header bar (breadcrumb + title) */ .page-header-bar { margin-bottom: 15px; } .page-breadcrumb { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-muted); margin-bottom: 4px; } .page-breadcrumb a { color: var(--text-muted); } .page-breadcrumb a:hover { color: var(--primary); } .breadcrumb-home-icon, .breadcrumb-sep-icon { font-size: 14px; vertical-align: middle; } .page-title { font-size: 20px; font-weight: 700; color: var(--heading-color); margin: 0; line-height: 140%; } /* ============================================================ MOBILE OVERLAY ============================================================ */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1035; } .sidebar-overlay.visible { display: block; } /* ============================================================ RESPONSIVE — mobile (< 992px) ============================================================ */ @media (max-width: 991.98px) { #left-sidebar { transform: translateX(-100%); width: var(--sidebar-width) !important; } #left-sidebar.mobile-open { transform: translateX(0); } #main-wrapper { margin-left: 0 !important; } #main-content { padding: 16px; } .hide-on-mobile { display: none !important; } } /* ============================================================ PROJECT TAB BAR — global styles (applied by pms_project_tabs.js) Mirrors what pms.backlog.css has but loaded on every /project/* page. ============================================================ */ /* Outer pill bar */ #block-rising-pms-tabs.pbl-tabs-injected { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.06); gap: 4px; margin-bottom: 24px; } /* Hide the auto-generated h2 label */ #block-rising-pms-tabs.pbl-tabs-injected h2.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } /*