/* Damghan University — My Courses redesign */
:root {
--du-navy: #1b4f72;
--du-navy-dark: #123a54;
--du-sky: #e8f3fc;
--du-sky-2: #d6ebf8;
--du-muted: #7b8fa3;
--du-card: #ffffff;
--du-line: #e6eef5;
--du-page-bg: #f7fafc;
--du-text: #1b4f72;
--du-text-soft: #3d5f78;
--du-surface: #ffffff;
--du-navbar-bg: #ffffff;
--du-accent-soft: #eef5fa;
}
/* —— Primary buttons / active pills: readable white on navy ——
Blanket `a { color:#1b4f72 }` (du-links) was painting navy text onto
primary-blue backgrounds (همه، btn anchors، nav active) → unreadable. */
.btn-primary,
a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:disabled,
.btn-primary.disabled,
input.btn-primary,
button.btn-primary {
color: #ffffff !important;
background-color: var(--du-navy) !important;
border-color: var(--du-navy) !important;
font-weight: 600 !important;
}
.btn-primary:hover,
a.btn-primary:hover,
.btn-primary:focus,
a.btn-primary:focus,
.btn-primary:active,
a.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
color: #ffffff !important;
background-color: var(--du-navy-dark) !important;
border-color: var(--du-navy-dark) !important;
}
/* Outline primary toggles (e.g. نمرات → مشاهده بر اساس) */
.btn-outline-primary,
a.btn-outline-primary {
color: var(--du-navy) !important;
border-color: var(--du-navy) !important;
background-color: var(--du-card) !important;
}
.btn-outline-primary:hover,
a.btn-outline-primary:hover,
.btn-outline-primary:focus,
a.btn-outline-primary:focus {
color: #ffffff !important;
background-color: var(--du-navy) !important;
border-color: var(--du-navy) !important;
}
.btn-outline-primary.active,
a.btn-outline-primary.active,
.btn-outline-primary:active,
a.btn-outline-primary:active,
.btn-check:checked + .btn-outline-primary,
.show > .btn-outline-primary.dropdown-toggle {
color: #ffffff !important;
background-color: var(--du-navy) !important;
border-color: var(--du-navy) !important;
font-weight: 600 !important;
}
.page-item.active .page-link,
.page-item.active > .page-link,
.page-item.active .page-link:hover,
.page-item.active .page-link:focus,
a.page-link.active,
a.page-link.active:hover,
a.page-link.active:focus,
.pagination .active > .page-link,
.initialbar .page-item.active .page-link,
.initialtable .page-item.active .page-link {
color: #ffffff !important;
background-color: var(--du-navy) !important;
border-color: var(--du-navy) !important;
font-weight: 600 !important;
text-decoration: none !important;
}
.badge.bg-primary,
.bg-primary,
span.bg-primary,
a.bg-primary {
color: #ffffff !important;
background-color: var(--du-navy) !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
a.nav-link.active[style*="background"],
.list-group-item.active,
a.list-group-item.active {
color: #ffffff !important;
}
/* Messaging drawer / similar: primary fill + forced link color */
.message-app .nav-link.active,
[data-region="message-drawer"] .nav-link.active {
color: #ffffff !important;
}
/* Admin links: global $link-color #93c5fd and hover #fff are for the dark login
card and are unreadable on the white site-admin background. */
body.path-admin a:not(.btn):not(.dropdown-item),
body.pagelayout-admin a:not(.btn):not(.dropdown-item) {
color: #0b3a8f !important;
}
body.path-admin a:not(.btn):not(.dropdown-item):hover,
body.path-admin a:not(.btn):not(.dropdown-item):focus,
body.path-admin a:not(.btn):not(.dropdown-item):focus-visible,
body.pagelayout-admin a:not(.btn):not(.dropdown-item):hover,
body.pagelayout-admin a:not(.btn):not(.dropdown-item):focus,
body.pagelayout-admin a:not(.btn):not(.dropdown-item):focus-visible {
color: #021456 !important;
text-decoration: underline;
}
/* Online users avatars — Telegram list: fixed circle, cover crop, aligned row. */
.block_online_users .content .list li.listentry {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 5px 0;
clear: both;
}
.block_online_users .content .list li.listentry .user {
float: none;
display: flex;
align-items: center;
min-width: 0;
flex: 1 1 auto;
position: relative;
}
.block_online_users .content .list li.listentry .user > a {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
text-decoration: none !important;
line-height: 1.25;
}
.block_online_users .content .list li.listentry .user .userpicture,
.block_online_users .content .list li.listentry .user .userinitials {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
max-width: 42px !important;
flex: 0 0 42px;
border-radius: 50% !important;
object-fit: cover;
object-position: center;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
vertical-align: middle;
}
.block_online_users .content .list li.listentry .user .userinitials {
display: inline-flex !important;
align-items: center;
justify-content: center;
font-size: 15px !important;
font-weight: 600;
line-height: 1 !important;
letter-spacing: 0;
color: #ffffff !important;
}
.userinitials {
color: #ffffff !important;
font-weight: 600;
}
.block_online_users .content .list li.listentry .message,
.block_online_users .content .list li.listentry .uservisibility {
float: none;
margin: 0;
flex: 0 0 auto;
}
/* Navbar user avatar: fully circular, uncropped */
.navbar .usermenu img.userpicture,
.navbar .userbutton img.userpicture,
.navbar .avatars img.userpicture,
.navbar .avatar img {
border-radius: 50% !important;
object-fit: contain !important;
object-position: center !important;
background: #eef5fa;
overflow: hidden;
}
.navbar .avatar.current,
.navbar .avatars .avatar {
border-radius: 50% !important;
overflow: hidden !important;
}
/* User avatars: circular frame, full image visible (no crop) */
.userlist table#participants img.userpicture,
table#participants img.userpicture,
.path-user table.generaltable img.userpicture,
#page-user-index table img.userpicture,
.userlist .userpicture {
width: 48px !important;
height: 48px !important;
max-width: 48px !important;
max-height: 48px !important;
border-radius: 50% !important;
object-fit: contain !important;
object-position: center !important;
background: #eef5fa !important;
border: 0 !important;
box-shadow: 0 0 0 2px rgba(27, 79, 114, 0.12);
vertical-align: middle !important;
display: inline-block !important;
}
/* Profile header photo — large circle, uncropped + lightbox link
(avatars only — never activity icons) */
.userprofile .page-header-image img.userpicture,
.page-context-header .page-header-image img.userpicture,
.path-user .page-header-image img.userpicture,
a.du-avatar-link img.userpicture {
width: 120px !important;
height: 120px !important;
max-width: 120px !important;
max-height: 120px !important;
border-radius: 50% !important;
object-fit: contain !important;
object-position: center !important;
background: #eef5fa !important;
border: 0 !important;
box-shadow: 0 0 0 3px rgba(27, 79, 114, 0.12);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Circular clip ONLY for user avatar frames */
.userprofile .page-header-image,
.page-context-header .page-header-image:has(img.userpicture),
.path-user .page-context-header .page-header-image:has(img.userpicture) {
border-radius: 50% !important;
overflow: hidden !important;
background: #eef5fa;
}
/* Activity icons in page header must NOT be circular */
.page-context-header .page-header-image:has(.activityiconcontainer),
.page-context-header .page-header-image:has(img.activityicon),
.page-context-header .page-header-image:has(.modicon_adobeconnect),
.page-context-header .page-header-image:has(.modicon_quiz) {
border-radius: 0 !important;
overflow: visible !important;
background: transparent !important;
}
.page-context-header .activityiconcontainer,
.page-header-image .activityiconcontainer {
border-radius: 14px !important;
overflow: hidden !important;
}
.page-context-header img.activityicon,
.page-header-image img.activityicon {
border-radius: 0 !important;
}
a.du-avatar-link {
display: inline-block;
border-radius: 50%;
line-height: 0;
cursor: zoom-in;
text-decoration: none !important;
}
a.du-avatar-link:hover img.userpicture,
a.du-avatar-link:focus img.userpicture {
transform: scale(1.04);
box-shadow: 0 0 0 3px rgba(27, 79, 114, 0.22), 0 8px 20px rgba(27, 79, 114, 0.18);
}
/* Avatar lightbox */
.du-avatar-lightbox {
position: fixed;
inset: 0;
z-index: 20050;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(18, 40, 58, 0);
opacity: 0;
transition: background 0.28s ease, opacity 0.28s ease;
cursor: zoom-out;
}
.du-avatar-lightbox.is-open {
background: rgba(18, 40, 58, 0.72);
opacity: 1;
}
.du-avatar-lightbox__figure {
margin: 0;
max-width: min(92vw, 560px);
max-height: 88vh;
transform: scale(0.86);
opacity: 0;
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}
.du-avatar-lightbox.is-open .du-avatar-lightbox__figure {
transform: scale(1);
opacity: 1;
}
.du-avatar-lightbox__img {
display: block;
width: auto;
height: auto;
max-width: min(92vw, 560px);
max-height: 78vh;
border-radius: 18px;
object-fit: contain;
background: #fff;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
.du-avatar-lightbox__cap {
margin-top: 12px;
text-align: center;
color: #fff;
font-weight: 600;
font-size: 0.95rem;
}
.du-avatar-lightbox__close {
position: fixed;
top: 16px;
inset-inline-end: 18px;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
color: #fff;
font-size: 28px;
line-height: 1;
cursor: pointer;
z-index: 20051;
}
.du-avatar-lightbox__close:hover {
background: rgba(255, 255, 255, 0.28);
}
body.du-avatar-lightbox-open {
overflow: hidden;
}
.userlist table#participants th a.aabtn,
.userlist table#participants td a.aabtn,
table#participants a.d-inline-block.aabtn {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
vertical-align: middle;
}
@media (max-width: 575.98px) {
.userlist table#participants img.userpicture,
table#participants img.userpicture,
.path-user table.generaltable img.userpicture,
.userlist .userpicture {
width: 42px !important;
height: 42px !important;
max-width: 42px !important;
max-height: 42px !important;
}
.userprofile .page-header-image img.userpicture,
.page-context-header .page-header-image img.userpicture {
width: 96px !important;
height: 96px !important;
max-width: 96px !important;
max-height: 96px !important;
}
}
/* Minimal brand book icon beside «آموزش مجازی» (RTL: on the right / start) */
.navbar a.navbar-brand {
display: inline-flex !important;
align-items: center !important;
gap: 8px;
line-height: 1.2;
}
.navbar a.navbar-brand .du-brand-ico {
display: inline-flex;
flex: 0 0 auto;
width: 28px;
height: 28px;
align-items: center;
justify-content: center;
}
.navbar a.navbar-brand .du-brand-ico img {
display: block;
width: 28px;
height: 28px;
object-fit: contain;
object-position: center;
}
@media (max-width: 767.98px) {
.navbar a.navbar-brand .du-brand-ico,
.navbar a.navbar-brand .du-brand-ico img {
width: 24px;
height: 24px;
}
}
body.pagelayout-mycourses {
--du-navy: #1b4f72;
--du-navy-dark: #123a54;
--du-sky: #e8f3fc;
--du-sky-2: #d6ebf8;
--du-mint: #e6f7f2;
--du-mint-text: #1a7a62;
--du-chip: #eaf3fb;
--du-chip-text: #3d6f95;
--du-muted: #7b8fa3;
--du-card: #ffffff;
--du-line: #e6eef5;
background: #f7fafc !important;
}
body.pagelayout-mycourses #page {
background: #f7fafc !important;
}
/* My Courses: no decorative page wave backgrounds */
body.pagelayout-mycourses #page-wrapper::before {
display: none !important;
content: none !important;
}
body.pagelayout-mycourses #topofscroll.main-inner .du-page-footer-wrap {
display: none !important;
}
body.pagelayout-mycourses #page-header .page-header-headings,
body.pagelayout-mycourses #page-header h1,
body.pagelayout-mycourses .block_myoverview .card-title,
body.pagelayout-mycourses .block_myoverview h3.card-title,
body.pagelayout-mycourses .block_myoverview .sr-only-title {
display: none !important;
}
/* ~30% wider than Boost default main-inner (830px → ~1079px), still fluid */
body.pagelayout-mycourses #topofscroll.main-inner {
--du-main-max: 1079px;
max-width: min(var(--du-main-max), 100%) !important;
width: 100% !important;
box-sizing: border-box !important;
margin-inline: auto !important;
padding-inline: clamp(12px, 2.2vw, 28px) !important;
overflow: visible !important;
}
body.pagelayout-mycourses #topofscroll.main-inner #region-main,
body.pagelayout-mycourses #topofscroll.main-inner #region-main-box,
body.pagelayout-mycourses #topofscroll.main-inner .block_myoverview,
body.pagelayout-mycourses #topofscroll.main-inner .du-courses-hero {
max-width: 100% !important;
width: 100% !important;
min-width: 0;
box-sizing: border-box;
}
body.pagelayout-mycourses #region-main {
margin: 0 auto;
padding-bottom: 48px;
/* Do not use overflow-x:clip — it forces overflow-y to clip and buries course menus */
overflow: visible !important;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"],
body.pagelayout-mycourses .block_myoverview ul.list-group,
body.pagelayout-mycourses .block_myoverview li.course-listitem {
max-width: 100%;
box-sizing: border-box;
}
body.pagelayout-mycourses .block_myoverview.card {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
body.pagelayout-mycourses .block_myoverview .card-body {
padding: 0 !important;
overflow: visible !important;
}
/* —— Hero —— */
body.pagelayout-mycourses .du-courses-hero {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 28px;
min-height: 240px;
margin: 8px 0 24px;
padding: 36px 44px;
border-radius: 28px;
background: linear-gradient(100deg, #d9eefb 0%, #e8f4fc 45%, #f4faff 100%);
box-shadow: 0 12px 32px rgba(27, 79, 114, 0.08);
}
/* Image clear on the left, fades to transparent toward the right */
body.pagelayout-mycourses .du-courses-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: url("/theme/boost/du-login/du-mycourses-hero.jpg?v=mc7") left center / cover no-repeat;
-webkit-mask-image: linear-gradient(
to right,
#000 0%,
#000 28%,
rgba(0, 0, 0, 0.75) 48%,
rgba(0, 0, 0, 0.35) 68%,
transparent 92%
);
mask-image: linear-gradient(
to right,
#000 0%,
#000 28%,
rgba(0, 0, 0, 0.75) 48%,
rgba(0, 0, 0, 0.35) 68%,
transparent 92%
);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
body.pagelayout-mycourses .du-courses-hero::after {
content: none;
}
body.pagelayout-mycourses .du-courses-hero__text {
position: static;
z-index: 1;
max-width: min(520px, 52%);
padding: 4px 4px 0;
/* Reserve space so absolute subtitle does not collide with welcome */
padding-bottom: 2.5rem;
}
body.pagelayout-mycourses .du-courses-hero__text h1 {
margin: 0 0 10px;
color: var(--du-navy);
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
line-height: 1.25;
}
body.pagelayout-mycourses .du-courses-hero__welcome {
margin: 0;
color: #2f6f9a;
font-size: clamp(18px, 2.4vw, 24px);
font-weight: 700;
}
body.pagelayout-mycourses .du-courses-hero__welcome strong {
color: var(--du-navy);
}
body.pagelayout-mycourses .du-courses-hero__sub {
position: absolute;
bottom: 10px;
inset-inline-start: 44px;
inset-inline-end: auto;
z-index: 2;
margin: 0;
max-width: min(520px, calc(52% - 8px));
color: var(--du-muted);
font-size: 15px;
line-height: 1.5;
}
body.pagelayout-mycourses .du-courses-hero__art {
display: none;
}
/* —— Filters —— */
body.pagelayout-mycourses .block_myoverview [data-region="filter"] {
display: flex !important;
align-items: center;
gap: 12px;
margin: 0 0 22px !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] > .d-flex {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 10px !important;
width: 100%;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] > .d-flex > .d-flex.flex-wrap {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 10px !important;
width: 100%;
min-width: 0;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .dropdown,
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .input-group,
body.pagelayout-mycourses .block_myoverview [data-region="filter"] [data-region="filter-search"],
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .mb-1 {
margin: 0 !important;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .btn.dropdown-toggle,
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .btn-outline-secondary {
display: inline-flex !important;
align-items: center !important;
gap: 8px;
min-height: 48px;
white-space: nowrap;
border: 1px solid var(--du-line) !important;
border-radius: 16px !important;
background: #fff !important;
color: var(--du-navy) !important;
box-shadow: 0 4px 14px rgba(27, 79, 114, 0.05) !important;
font-weight: 600;
padding: 0.55rem 1rem !important;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .btn.dropdown-toggle:hover,
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .btn.dropdown-toggle:focus,
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .btn-outline-secondary:hover {
background: var(--du-sky) !important;
border-color: #c7dced !important;
color: var(--du-navy-dark) !important;
}
/* Professional leading icons on filter combos */
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .du-filter-ico {
display: inline-flex;
flex: 0 0 auto;
width: 18px;
height: 18px;
color: #5b7c99;
opacity: 0.95;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .du-filter-ico svg {
width: 18px;
height: 18px;
display: block;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .btn.dropdown-toggle:hover .du-filter-ico,
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .btn.dropdown-toggle:focus .du-filter-ico {
color: var(--du-navy-dark);
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .form-control,
body.pagelayout-mycourses .block_myoverview [data-region="filter"] input.form-control {
min-height: 48px !important;
border: 1px solid var(--du-line) !important;
border-radius: 16px !important;
background: #fff !important;
color: var(--du-navy) !important;
box-shadow: 0 4px 14px rgba(27, 79, 114, 0.05) !important;
padding-inline: 2.75rem 1rem !important;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .form-control::placeholder {
color: var(--du-muted) !important;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .du-filter-search .input-group.searchbar,
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .du-filter-search .simplesearchform {
position: relative !important;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .du-filter-search .du-filter-ico.is-search {
position: absolute !important;
inset-inline-start: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 20 !important;
pointer-events: none !important;
color: #7b8fa3 !important;
opacity: 1 !important;
visibility: visible !important;
display: inline-flex !important;
}
/* Keep magnifier visible while the field is focused / typing */
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .du-filter-search:focus-within .du-filter-ico.is-search,
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .du-filter-search .form-control:focus ~ .du-filter-ico.is-search,
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .du-filter-search .input-group:focus-within .du-filter-ico.is-search {
opacity: 1 !important;
visibility: visible !important;
display: inline-flex !important;
color: var(--du-navy) !important;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .du-filter-search .form-control,
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .du-filter-search input.form-control {
position: relative;
z-index: 1;
background-color: #fff !important;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .du-filter-search .btn-clear {
z-index: 21;
inset-inline-end: 8px;
inset-inline-start: auto !important;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .flex-grow-1,
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .input-group,
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .simplesearchform {
flex: 1 1 auto !important;
min-width: 180px;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .input-group.searchbar {
width: 100% !important;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .du-filter-status {
order: 1;
flex: 0 0 auto !important;
width: auto !important;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .du-filter-search {
order: 2;
flex: 1 1 40% !important;
min-width: 280px !important;
max-width: none !important;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .du-filter-sort {
order: 3;
flex: 0 0 auto !important;
width: auto !important;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .du-filter-view,
body.pagelayout-mycourses .block_myoverview #displaydropdown,
body.pagelayout-mycourses .block_myoverview #displaydropdown + .dropdown-menu {
display: none !important;
}
/* —— Course cards —— */
body.pagelayout-mycourses .block_myoverview ul.list-group {
display: flex;
flex-direction: column;
gap: 16px;
border: 0 !important;
background: transparent !important;
overflow: visible !important;
position: relative;
z-index: 1;
}
body.pagelayout-mycourses .block_myoverview li.course-listitem {
position: relative;
z-index: 1;
overflow: visible !important;
border: 1px solid rgba(27, 79, 114, 0.06) !important;
border-radius: 24px !important;
background: var(--du-card) !important;
box-shadow: 0 10px 28px rgba(27, 79, 114, 0.07) !important;
padding: 16px 18px !important;
margin: 0 !important;
/* Avoid transform/content-visibility: they clip or bury open menus */
transition: box-shadow 0.18s ease;
content-visibility: visible;
contain: none;
}
body.pagelayout-mycourses .block_myoverview li.course-listitem:hover {
z-index: 2;
box-shadow: 0 14px 34px rgba(27, 79, 114, 0.12) !important;
}
body.pagelayout-mycourses .block_myoverview li.course-listitem:focus-within,
body.pagelayout-mycourses .block_myoverview li.course-listitem:has(.dropdown-menu.show),
body.pagelayout-mycourses .block_myoverview li.course-listitem:has(.show) {
z-index: 80 !important;
overflow: visible !important;
}
body.pagelayout-mycourses .block_myoverview li.course-listitem .dropdown,
body.pagelayout-mycourses .block_myoverview li.course-listitem .menu {
position: relative;
z-index: 5;
overflow: visible !important;
}
body.pagelayout-mycourses .block_myoverview li.course-listitem .dropdown-menu,
body.pagelayout-mycourses .block_myoverview li.course-listitem .dropdown-menu.show {
z-index: 2000 !important;
position: absolute !important;
overflow: visible !important;
min-width: 220px !important;
padding: 8px !important;
border: 1px solid rgba(27, 79, 114, 0.1) !important;
border-radius: 14px !important;
box-shadow: 0 14px 36px rgba(27, 79, 114, 0.16) !important;
background: #fff !important;
}
body.pagelayout-mycourses .block_myoverview li.course-listitem .dropdown-item.du-course-menu-item,
body.pagelayout-mycourses .block_myoverview li.course-listitem a.dropdown-item[data-action] {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 12px !important;
margin: 2px 0 !important;
border-radius: 10px !important;
color: #1b4f72 !important;
font-weight: 600 !important;
font-size: 0.92rem !important;
line-height: 1.35 !important;
background: transparent !important;
text-decoration: none !important;
}
body.pagelayout-mycourses .block_myoverview li.course-listitem .dropdown-item.du-course-menu-item:hover,
body.pagelayout-mycourses .block_myoverview li.course-listitem .dropdown-item.du-course-menu-item:focus,
body.pagelayout-mycourses .block_myoverview li.course-listitem a.dropdown-item[data-action]:hover,
body.pagelayout-mycourses .block_myoverview li.course-listitem a.dropdown-item[data-action]:focus {
background: #e8f3fc !important;
color: #123a54 !important;
}
body.pagelayout-mycourses .block_myoverview li.course-listitem .du-menu-ico {
flex: 0 0 auto;
width: 18px;
height: 18px;
color: #1b4f72;
opacity: 0.92;
}
body.pagelayout-mycourses .block_myoverview li.course-listitem a.dropdown-item[data-action="hide-course"] .du-menu-ico,
body.pagelayout-mycourses .block_myoverview li.course-listitem a.dropdown-item[data-action="remove-favourite"] .du-menu-ico {
color: #8a5a2b;
}
body.pagelayout-mycourses .block_myoverview li.course-listitem .coursemenubtn {
width: 40px !important;
height: 40px !important;
border-radius: 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #1b4f72 !important;
background: #f4f8fb !important;
border: 1px solid rgba(27, 79, 114, 0.08) !important;
}
body.pagelayout-mycourses .block_myoverview li.course-listitem .coursemenubtn:hover,
body.pagelayout-mycourses .block_myoverview li.course-listitem .coursemenubtn:focus,
body.pagelayout-mycourses .block_myoverview li.course-listitem .coursemenubtn[aria-expanded="true"] {
background: #e8f3fc !important;
color: #123a54 !important;
box-shadow: 0 4px 12px rgba(27, 79, 114, 0.12);
}
body.pagelayout-mycourses .block_myoverview li.course-listitem > .row {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 12px;
--bs-gutter-x: 0;
margin-inline: 0 !important;
}
body.pagelayout-mycourses .block_myoverview li.course-listitem > .row > [class*="col-"] {
padding-inline: 0 !important;
margin-bottom: 0 !important;
float: none !important;
}
body.pagelayout-mycourses .block_myoverview li.course-listitem > .row > .col-md-2,
body.pagelayout-mycourses .block_myoverview li.course-listitem > .row > .du-course-thumb {
flex: 0 0 148px !important;
width: 148px !important;
max-width: 148px !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 8px;
}
body.pagelayout-mycourses .block_myoverview .du-course-status-under {
display: none;
justify-content: center;
width: 100%;
}
body.pagelayout-mycourses .block_myoverview .du-course-status-under .du-course-badge {
max-width: 100%;
justify-content: center;
text-align: center;
font-size: 11px;
padding: 4px 8px;
white-space: nowrap;
}
body.pagelayout-mycourses .block_myoverview li.course-listitem > .row > .col-md-9 {
flex: 1 1 auto !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
}
body.pagelayout-mycourses .block_myoverview li.course-listitem > .row > .col-md-1.menu,
body.pagelayout-mycourses .block_myoverview li.course-listitem > .row > .menu {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
align-self: center !important;
}
body.pagelayout-mycourses .block_myoverview .list-image {
width: 100%;
min-height: 96px;
height: 96px;
aspect-ratio: auto;
border-radius: 16px !important;
background-size: cover !important;
background-position: center !important;
box-shadow: inset 0 0 0 1px rgba(27, 79, 114, 0.05);
}
body.pagelayout-mycourses .block_myoverview a.aalink.coursename {
color: #1a2b3c !important;
font-size: 1.05rem;
font-weight: 700 !important;
text-decoration: none !important;
line-height: 1.55;
}
body.pagelayout-mycourses .block_myoverview a.aalink.coursename:hover,
body.pagelayout-mycourses .block_myoverview a.aalink.coursename:focus {
color: var(--du-navy-dark) !important;
text-decoration: underline !important;
text-decoration-thickness: 1.5px;
background: transparent !important;
}
body.pagelayout-mycourses .block_myoverview .categoryname,
body.pagelayout-mycourses .block_myoverview .text-muted.muted {
color: var(--du-muted) !important;
font-size: 0.92rem;
margin-top: 4px;
}
body.pagelayout-mycourses .block_myoverview .du-course-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
/* When badges would wrap to 2 lines, JS adds this class and drops status from the box */
body.pagelayout-mycourses .block_myoverview .du-course-badges.is-wrapped .du-live-badge,
body.pagelayout-mycourses .block_myoverview .du-course-badges.is-wrapped .is-status,
body.pagelayout-mycourses .block_myoverview .du-course-badges.is-wrapped .is-offline,
body.pagelayout-mycourses .block_myoverview .du-course-badges.is-wrapped .is-loading {
display: none !important;
}
body.pagelayout-mycourses .block_myoverview .du-course-badge {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 30px;
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
line-height: 1;
}
body.pagelayout-mycourses .block_myoverview .du-course-badge::before {
content: "";
width: 14px;
height: 14px;
flex: 0 0 auto;
background: currentColor;
opacity: 0.85;
-webkit-mask: no-repeat center / contain;
mask: no-repeat center / contain;
}
body.pagelayout-mycourses .block_myoverview .du-course-badge.is-status {
background: var(--du-mint);
color: var(--du-mint-text);
}
body.pagelayout-mycourses .block_myoverview .du-course-badge.is-status::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.pagelayout-mycourses .block_myoverview .du-course-badge.is-offline {
background: #eef1f4;
color: #6b7785;
}
/* Status badge → one-click Adobe Connect join */
body.pagelayout-mycourses .block_myoverview .du-live-badge.is-joinable {
cursor: pointer;
text-decoration: none;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
body.pagelayout-mycourses .block_myoverview .du-live-badge.is-joinable:hover,
body.pagelayout-mycourses .block_myoverview .du-live-badge.is-joinable:focus {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(27, 79, 114, 0.18);
outline: none;
}
body.pagelayout-mycourses .block_myoverview .du-live-badge.is-joinable.is-status:hover {
filter: brightness(0.97);
}
body.pagelayout-mycourses .block_myoverview .du-live-badge.is-joinable.is-offline:hover {
background: #e4ebf1;
color: #3d4f5f;
}
body.pagelayout-mycourses .block_myoverview .du-live-badge.is-offline:not(.is-joinable) {
cursor: default;
pointer-events: none;
}
body.pagelayout-mycourses .block_myoverview .du-course-badge.is-offline::before {
width: 8px;
height: 8px;
border-radius: 50%;
background: #9aa3ad;
opacity: 1;
-webkit-mask: none;
mask: none;
}
/* Minimal async status loader — does not block page paint */
body.pagelayout-mycourses .block_myoverview .du-course-badge.is-loading {
position: relative;
overflow: hidden;
min-width: 76px;
min-height: 30px;
padding: 4px 12px;
background: #eef3f7;
color: transparent !important;
pointer-events: none;
}
body.pagelayout-mycourses .block_myoverview .du-course-badge.is-loading::before {
display: none !important;
}
body.pagelayout-mycourses .block_myoverview .du-course-badge.is-loading::after {
content: "";
position: absolute;
top: 50%;
inset-inline-start: 12px;
inset-inline-end: 12px;
height: 3px;
transform: translateY(-50%);
border-radius: 999px;
background: linear-gradient(
90deg,
rgba(155, 180, 200, 0.25) 0%,
rgba(91, 130, 160, 0.85) 45%,
rgba(155, 180, 200, 0.25) 100%
);
background-size: 220% 100%;
animation: du-status-bar 1.05s ease-in-out infinite;
}
@keyframes du-status-bar {
0% {
background-position: 100% 0;
}
100% {
background-position: -100% 0;
}
}
@media (prefers-reduced-motion: reduce) {
body.pagelayout-mycourses .block_myoverview .du-course-badge.is-loading::after {
animation: none;
background: rgba(155, 180, 200, 0.55);
}
}
body.pagelayout-mycourses .block_myoverview .du-course-badge.is-category {
background: var(--du-chip);
color: var(--du-chip-text);
}
body.pagelayout-mycourses .block_myoverview .du-course-badge.is-category::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
body.pagelayout-mycourses .block_myoverview .coursemenubtn {
width: 42px;
height: 42px;
border-radius: 50% !important;
border: 1px solid var(--du-line) !important;
background: #fff !important;
color: var(--du-navy) !important;
box-shadow: 0 4px 12px rgba(27, 79, 114, 0.06);
}
body.pagelayout-mycourses .block_myoverview .coursemenubtn:hover {
background: var(--du-sky) !important;
}
body.pagelayout-mycourses .block_myoverview [data-region="paging-bar"],
body.pagelayout-mycourses .block_myoverview .pagination-nav,
body.pagelayout-mycourses .block_myoverview .paging-bar {
margin-top: 18px;
}
body.pagelayout-mycourses .block_myoverview .dropdown-toggle[data-bs-toggle="dropdown"].btn-outline-secondary.btn-sm,
body.pagelayout-mycourses .block_myoverview .btn.btn-outline-secondary.btn-sm {
border-radius: 999px !important;
border-color: var(--du-line) !important;
color: var(--du-navy) !important;
}
@media (max-width: 1120px) {
body.pagelayout-mycourses #topofscroll.main-inner {
max-width: min(1079px, calc(100% - 16px)) !important;
}
}
@media (max-width: 760px) {
body.pagelayout-mycourses #topofscroll.main-inner {
max-width: 100% !important;
padding-inline: 12px !important;
}
body.pagelayout-mycourses .du-courses-hero {
flex-direction: column;
align-items: stretch;
padding: 22px 20px;
min-height: 200px;
}
body.pagelayout-mycourses .du-courses-hero::before {
background-position: left 20% center;
-webkit-mask-image: linear-gradient(
to right,
#000 0%,
#000 18%,
rgba(0, 0, 0, 0.55) 42%,
rgba(0, 0, 0, 0.2) 62%,
transparent 88%
);
mask-image: linear-gradient(
to right,
#000 0%,
#000 18%,
rgba(0, 0, 0, 0.55) 42%,
rgba(0, 0, 0, 0.2) 62%,
transparent 88%
);
}
body.pagelayout-mycourses .du-courses-hero {
padding: 22px 20px 42px;
}
body.pagelayout-mycourses .du-courses-hero__text {
max-width: 100%;
padding: 8px 10px 0;
padding-bottom: 2rem;
}
body.pagelayout-mycourses .du-courses-hero__sub {
bottom: 10px;
inset-inline-start: 20px;
max-width: calc(100% - 40px);
}
body.pagelayout-mycourses .du-courses-hero__art {
display: none;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] > .d-flex,
body.pagelayout-mycourses .block_myoverview [data-region="filter"] > .d-flex > .d-flex.flex-wrap {
flex-wrap: wrap !important;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .du-filter-status,
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .du-filter-search {
flex: 1 1 100%;
}
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .btn.dropdown-toggle,
body.pagelayout-mycourses .block_myoverview [data-region="filter"] .form-control {
width: 100%;
}
body.pagelayout-mycourses .block_myoverview li.course-listitem {
padding: 12px !important;
border-radius: 20px !important;
}
body.pagelayout-mycourses .block_myoverview li.course-listitem > .row {
flex-wrap: nowrap !important;
gap: 10px;
}
body.pagelayout-mycourses .block_myoverview li.course-listitem > .row > .col-md-2,
body.pagelayout-mycourses .block_myoverview li.course-listitem > .row > .du-course-thumb {
flex: 0 0 108px !important;
width: 108px !important;
max-width: 108px !important;
}
body.pagelayout-mycourses .block_myoverview .list-image {
min-height: 72px;
height: 72px;
border-radius: 12px !important;
}
body.pagelayout-mycourses .block_myoverview a.aalink.coursename {
font-size: 0.95rem;
}
/* declutter mobile: drop category under title; status goes under thumb */
body.pagelayout-mycourses .block_myoverview .categoryname,
body.pagelayout-mycourses .block_myoverview .text-muted.muted {
display: none !important;
}
/* Status lives under the thumb on small screens — never inside the badges box */
body.pagelayout-mycourses .block_myoverview .du-course-badges .du-live-badge,
body.pagelayout-mycourses .block_myoverview .du-course-badges .is-status,
body.pagelayout-mycourses .block_myoverview .du-course-badges .is-offline {
display: none !important;
}
body.pagelayout-mycourses .block_myoverview .du-course-status-under {
display: flex !important;
}
body.pagelayout-mycourses .block_myoverview .du-course-badges {
margin-top: 8px;
}
body.pagelayout-mycourses .block_myoverview .du-course-badge.is-category {
font-size: 11px;
padding: 3px 10px;
}
body.pagelayout-mycourses .block_myoverview .coursemenubtn {
width: 38px;
height: 38px;
}
}
body.pagelayout-mycourses #topofscroll.main-inner {
position: relative;
padding-bottom: 48px !important;
}
/* Primary drawer active item: readable contrast */
body.uses-drawers #theme_boost-drawers-primary .list-group-item.active,
body.uses-drawers #theme_boost-drawers-primary .list-group-item-action.active,
body.uses-drawers #theme_boost-drawers-primary a.list-group-item.active {
background-color: var(--du-navy, #1b4f72) !important;
border-color: var(--du-navy, #1b4f72) !important;
color: #fff !important;
}
body.uses-drawers #theme_boost-drawers-primary .list-group-item.active:hover,
body.uses-drawers #theme_boost-drawers-primary .list-group-item-action.active:hover,
body.uses-drawers #theme_boost-drawers-primary a.list-group-item.active:focus {
background-color: var(--du-navy-dark, #123a54) !important;
border-color: var(--du-navy-dark, #123a54) !important;
color: #fff !important;
}
body.uses-drawers #theme_boost-drawers-primary .list-group-item.active .icon,
body.uses-drawers #theme_boost-drawers-primary .list-group-item.active i,
body.uses-drawers #theme_boost-drawers-primary .list-group-item.active .fa {
color: #fff !important;
}
/* Course index: current activity must be readable (white on navy) */
#courseindex .courseindex-item.pageitem,
#theme_boost-drawers-courseindex .courseindex-item.pageitem,
nav#courseindex .courseindex-item.pageitem {
background: #1b4f72 !important;
border-color: #123a54 !important;
color: #fff !important;
border-radius: 8px !important;
}
#courseindex .courseindex-item.pageitem a,
#courseindex .courseindex-item.pageitem .courseindex-link,
#courseindex .courseindex-item.pageitem .courseindex-itemname,
#theme_boost-drawers-courseindex .courseindex-item.pageitem a,
#theme_boost-drawers-courseindex .courseindex-item.pageitem .courseindex-link,
#theme_boost-drawers-courseindex .courseindex-item.pageitem .courseindex-itemname,
nav#courseindex .courseindex-item.pageitem a,
nav#courseindex .courseindex-item.pageitem .courseindex-link,
nav#courseindex .courseindex-item.pageitem .courseindex-itemname,
#courseindex .courseindex-item.pageitem span,
#theme_boost-drawers-courseindex .courseindex-item.pageitem span {
color: #fff !important;
}
#courseindex .courseindex-item.pageitem .icon,
#courseindex .courseindex-item.pageitem i,
#courseindex .courseindex-item.pageitem .fa,
#theme_boost-drawers-courseindex .courseindex-item.pageitem .icon,
#theme_boost-drawers-courseindex .courseindex-item.pageitem i {
color: #fff !important;
}
#courseindex .courseindex-item.pageitem:hover,
#theme_boost-drawers-courseindex .courseindex-item.pageitem:hover {
background: #123a54 !important;
color: #fff !important;
}
/* —— Hamburger / primary drawer: soft slide instead of instant pop —— */
body.uses-drawers #theme_boost-drawers-primary.drawer,
body.uses-drawers #theme_boost-drawers-primary.drawer.show,
body.uses-drawers .drawer.drawer-left.drawer-primary,
body.uses-drawers .drawer.drawer-left.drawer-primary.show {
transition:
right 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important,
left 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important,
visibility 0s linear 0.4s !important;
will-change: right, left;
}
body.uses-drawers #theme_boost-drawers-primary.drawer.show,
body.uses-drawers .drawer.drawer-left.drawer-primary.show {
transition:
right 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important,
left 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important,
visibility 0s linear 0s !important;
}
body.uses-drawers .modal-backdrop {
transition: opacity 0.35s ease !important;
}
/* —— Footer help popover: remove clutter links —— */
.footer-content-popover .tool_usertours-resettourcontainer,
.footer-content-popover .usertour,
.footer-content-popover #resetpagetour,
.footer-content-popover .tool_dataprivacy,
.footer-content-popover a.mobilelink,
.footer-content-popover a[href*="tool/dataprivacy/summary"],
.footer-content-popover a[href*="download.moodle.org"],
.footer-content-popover a[href*="docs.moodle.org"],
.footer-content-popover a[href*="tool/mobile"],
.footer-content-popover .footer-support-link:has(a[href*="docs.moodle.org"]),
.popover.footer .tool_usertours-resettourcontainer,
.popover.footer .usertour,
.popover.footer #resetpagetour,
.popover.footer .tool_dataprivacy,
.popover.footer a.mobilelink,
.popover.footer a[href*="tool/dataprivacy/summary"],
.popover.footer a[href*="download.moodle.org"],
.popover.footer a[href*="docs.moodle.org"],
.popover.footer .footer-support-link:has(a[href*="docs.moodle.org"]),
#page-footer .usertour,
#page-footer #resetpagetour,
#page-footer a[href*="docs.moodle.org"],
#page-footer .footer-support-link:has(a[href*="docs.moodle.org"]) {
display: none !important;
}
/* —— Hide Home + Dashboard from primary nav / drawer (belt & suspenders) —— */
.primary-navigation [data-key="home"],
.primary-navigation [data-key="myhome"],
.moremenu [data-key="home"],
.moremenu [data-key="myhome"],
#theme_boost-drawers-primary [data-key="home"],
#theme_boost-drawers-primary [data-key="myhome"],
.drawer.drawer-primary [data-key="home"],
.drawer.drawer-primary [data-key="myhome"],
nav.moremenu li[data-key="home"],
nav.moremenu li[data-key="myhome"] {
display: none !important;
}
/* —— Footer help (?) button: larger + higher + branded icon —— */
#page-footer .btn-footer-popover,
button.btn-footer-popover[data-action="footer-popover"] {
position: fixed !important;
inset-inline-start: 28px !important;
inset-inline-end: auto !important;
bottom: 72px !important;
z-index: 1040 !important;
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
min-height: 56px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
box-shadow: 0 10px 24px rgba(27, 79, 114, 0.28) !important;
background-color: transparent !important;
background-image: url("/theme/boost/du-login/du-footer-help.png?v=mc31") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 118% 118% !important;
overflow: hidden !important;
}
#page-footer .btn-footer-popover:hover,
#page-footer .btn-footer-popover:focus,
button.btn-footer-popover[data-action="footer-popover"]:hover,
button.btn-footer-popover[data-action="footer-popover"]:focus {
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(27, 79, 114, 0.34) !important;
filter: brightness(1.05);
}
#page-footer .btn-footer-popover .icon,
#page-footer .btn-footer-popover i,
#page-footer .btn-footer-popover svg,
#page-footer .btn-footer-popover .fa,
button.btn-footer-popover[data-action="footer-popover"] .icon,
button.btn-footer-popover[data-action="footer-popover"] i,
button.btn-footer-popover[data-action="footer-popover"] svg {
display: none !important;
}
@media (max-width: 767.98px) {
#page-footer .btn-footer-popover,
button.btn-footer-popover[data-action="footer-popover"] {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
bottom: 56px !important;
inset-inline-start: 16px !important;
}
}
/* du-adobeconnect-icon — Windows-folder sized branded icon */
.activity.modtype_adobeconnect .activity-icon.activityiconcontainer,
.modtype_adobeconnect .activityiconcontainer,
li.activity.modtype_adobeconnect .activityiconcontainer {
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
min-height: 56px !important;
padding: 0 !important;
background: transparent !important;
border-radius: 8px !important;
overflow: visible !important;
}
img.activityicon[src*="/adobeconnect/"][src*="monologo"],
img.activityicon[src*="/adobeconnect/"][src*="icon"],
.modicon_adobeconnect img,
.activity.modtype_adobeconnect .activityicon,
.modtype_adobeconnect .activityicon,
li.activity.modtype_adobeconnect .activityicon {
width: 52px !important;
height: 52px !important;
max-width: 52px !important;
max-height: 52px !important;
object-fit: contain !important;
object-position: center !important;
display: block !important;
margin: 0 auto !important;
box-shadow: none !important;
/* Soft Windows-folder depth; also disables Boost monochrome filtericon */
-webkit-filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
}
/* Activity chooser / mod icons */
.modicon_adobeconnect,
.modicon_adobeconnect .activityicon,
a[data-modname="adobeconnect"] .activityicon,
.list-group-item .modicon_adobeconnect img {
width: 48px !important;
height: 48px !important;
filter: none !important;
-webkit-filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18)) !important;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18)) !important;
}
@media (max-width: 767.98px) {
.activity.modtype_adobeconnect .activity-icon.activityiconcontainer,
.modtype_adobeconnect .activityiconcontainer,
li.activity.modtype_adobeconnect .activityiconcontainer {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
}
img.activityicon[src*="/adobeconnect/"],
.activity.modtype_adobeconnect .activityicon,
li.activity.modtype_adobeconnect .activityicon {
width: 44px !important;
height: 44px !important;
max-width: 44px !important;
max-height: 44px !important;
}
}
/* ============================================================
Course page redesign (pagelayout-course) — match mockup / My Courses tokens
============================================================ */
body.pagelayout-course {
--du-navy: #1b4f72;
--du-navy-dark: #123a54;
--du-sky: #e8f3fc;
--du-sky-2: #d6ebf8;
--du-muted: #7b8fa3;
--du-card: #ffffff;
--du-line: #e6eef5;
background: #f7fafc !important;
}
body.pagelayout-course #page {
position: relative;
background: transparent !important;
overflow-x: clip;
}
body.pagelayout-course #page-content,
body.pagelayout-course #topofscroll,
body.pagelayout-course #region-main-box {
position: relative;
z-index: 1;
background: transparent !important;
}
/* Left-half wave: fixed to viewport bottom-left (do NOT touch #page-wrapper children
— position:relative on drawers breaks fixed course-index layout). */
#page-wrapper::before {
content: "";
position: fixed;
left: 0;
bottom: 0;
width: min(72vw, 820px);
height: min(58vw, 640px);
pointer-events: none;
z-index: 0;
background: url("/theme/boost/du-login/du-page-wave-left.jpg?v=mc50") left bottom / 100% auto no-repeat;
/* Fade rightward AND upward → fully transparent at top */
-webkit-mask-image:
linear-gradient(
to right,
#000 0%,
#000 22%,
rgba(0, 0, 0, 0.65) 48%,
rgba(0, 0, 0, 0.25) 72%,
transparent 100%
),
linear-gradient(
to top,
#000 0%,
#000 28%,
rgba(0, 0, 0, 0.55) 55%,
rgba(0, 0, 0, 0.2) 78%,
transparent 100%
);
mask-image:
linear-gradient(
to right,
#000 0%,
#000 22%,
rgba(0, 0, 0, 0.65) 48%,
rgba(0, 0, 0, 0.25) 72%,
transparent 100%
),
linear-gradient(
to top,
#000 0%,
#000 28%,
rgba(0, 0, 0, 0.55) 55%,
rgba(0, 0, 0, 0.2) 78%,
transparent 100%
);
-webkit-mask-composite: source-in;
mask-composite: intersect;
-webkit-mask-size: 100% 100%, 100% 100%;
mask-size: 100% 100%, 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
body.pagelayout-course #topofscroll.main-inner {
max-width: min(1100px, 100%) !important;
width: 100% !important;
margin-inline: auto !important;
padding-inline: clamp(12px, 2.2vw, 28px) !important;
padding-bottom: 48px !important;
box-sizing: border-box !important;
}
/* Course title */
body.pagelayout-course #page-header .page-header-headings h1,
body.pagelayout-course #page-header h1.h2,
body.pagelayout-course #page-header h1 {
color: var(--du-navy) !important;
font-size: clamp(1.45rem, 2.4vw, 1.85rem) !important;
font-weight: 800 !important;
line-height: 1.35 !important;
letter-spacing: -0.01em;
margin-bottom: 0.35rem !important;
}
body.pagelayout-course #page-header .header-maxwidth,
body.pagelayout-course #page-header .w-100 {
max-width: 100% !important;
}
/* Secondary navigation tabs */
body.pagelayout-course .secondary-navigation {
margin-top: 0.25rem !important;
margin-bottom: 1.25rem !important;
border-bottom: 1px solid var(--du-line) !important;
background: transparent !important;
}
body.pagelayout-course .secondary-navigation .navigation {
border: 0 !important;
background: transparent !important;
}
body.pagelayout-course .secondary-navigation .moremenu .nav-tabs {
border: 0 !important;
gap: 0.15rem;
flex-wrap: nowrap;
}
body.pagelayout-course .secondary-navigation .nav-tabs .nav-link {
display: inline-flex !important;
align-items: center !important;
gap: 0.45rem;
padding: 0.7rem 0.95rem !important;
margin: 0 !important;
border: 0 !important;
border-bottom: 3px solid transparent !important;
border-radius: 0 !important;
color: var(--du-muted) !important;
font-weight: 600 !important;
font-size: 0.95rem !important;
background: transparent !important;
white-space: nowrap;
transition: color 0.15s ease, border-color 0.15s ease;
}
body.pagelayout-course .secondary-navigation .nav-tabs .nav-link .du-tab-ico {
display: inline-flex;
flex: 0 0 auto;
width: 18px;
height: 18px;
align-items: center;
justify-content: center;
opacity: 0.85;
}
body.pagelayout-course .secondary-navigation .nav-tabs .nav-link .du-tab-ico svg,
.du-title-ico svg,
.du-tab-ico svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Professional SVG icons beside titles / headings */
.du-has-title-ico {
display: inline-flex !important;
align-items: center !important;
gap: 0.55rem !important;
}
.du-title-ico {
display: inline-flex;
flex: 0 0 auto;
width: 1.65em;
height: 1.65em;
align-items: center;
justify-content: center;
color: #1b4f72;
background: linear-gradient(145deg, #e8f1f8 0%, #d6e6f2 100%);
border-radius: 0.45em;
box-shadow: inset 0 0 0 1px rgba(27, 79, 114, 0.12);
}
.du-title-ico svg {
width: 0.95em;
height: 0.95em;
}
.du-title-ico.is-inline {
width: 22px;
height: 22px;
margin-inline-end: 8px;
border-radius: 5px;
background: linear-gradient(145deg, #e8f1f8 0%, #d6e6f2 100%);
box-shadow: inset 0 0 0 1px rgba(27, 79, 114, 0.12);
}
.du-title-ico.is-inline svg {
width: 14px;
height: 14px;
}
/* Distinct CSV / Excel download accents */
.du-title-ico.is-inline[data-kind="csv"] {
color: #0f766e;
background: linear-gradient(145deg, #ccfbf1 0%, #99f6e4 100%);
box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.18);
}
.du-title-ico.is-inline[data-kind="excel"] {
color: #15803d;
background: linear-gradient(145deg, #dcfce7 0%, #bbf7d0 100%);
box-shadow: inset 0 0 0 1px rgba(21, 128, 61, 0.18);
}
.userprofile h3.lead.du-has-title-ico,
.userprofile .card h3.du-has-title-ico {
color: #1b4f72;
font-weight: 700;
}
.userprofile li.contentnode dt.du-has-title-ico-dt,
.userprofile .profile_tree dt.du-has-title-ico-dt {
display: inline-flex !important;
align-items: center !important;
gap: 0.4rem !important;
font-weight: 600;
color: #1b4f72;
}
.du-title-ico.is-dt {
width: 1.35em;
height: 1.35em;
border-radius: 0.35em;
}
.du-title-ico.is-dt svg {
width: 0.85em;
height: 0.85em;
}
.du-title-ico[data-kind="badge"] {
color: #9a3412;
background: linear-gradient(145deg, #ffedd5 0%, #fed7aa 100%);
box-shadow: inset 0 0 0 1px rgba(154, 52, 18, 0.16);
}
/* Replace lengthy accepted-file-types lists with one clear Persian line */
.filetypes-descriptions-intro.du-filetypes-label-hidden,
.du-filetypes-label-hidden {
display: none !important;
}
.form-filetypes-descriptions.du-filetypes-simplified {
margin-top: 0.35rem;
}
.du-filetypes-msg {
color: #1b4f72;
font-weight: 600;
font-size: 0.95rem;
line-height: 1.7;
}
/* File manager / picker toolbar — light buttons, readable navy icons */
.filemanager .fp-navbar .btn.btn-secondary,
.filemanager-toolbar .btn.btn-secondary,
.fp-toolbar .btn.btn-secondary,
.fp-viewbar .btn.btn-secondary,
.file-picker .fp-navbar .btn.btn-secondary,
.filepicker .fp-toolbar .btn.btn-secondary,
.filepicker .fp-viewbar .btn.btn-secondary {
color: #1b4f72 !important;
background-color: #ffffff !important;
border-color: #b8c9d6 !important;
box-shadow: none !important;
}
.filemanager .fp-navbar .btn.btn-secondary:hover,
.filemanager .fp-navbar .btn.btn-secondary:focus,
.filemanager-toolbar .btn.btn-secondary:hover,
.filemanager-toolbar .btn.btn-secondary:focus,
.fp-toolbar .btn.btn-secondary:hover,
.fp-toolbar .btn.btn-secondary:focus,
.fp-viewbar .btn.btn-secondary:hover,
.fp-viewbar .btn.btn-secondary:focus,
.file-picker .fp-navbar .btn.btn-secondary:hover,
.file-picker .fp-navbar .btn.btn-secondary:focus {
color: #1b4f72 !important;
background-color: #e8f1f8 !important;
border-color: #1b4f72 !important;
}
.fp-viewbar:not(.disabled) a.checked,
.fp-viewbar:not(.disabled) a.btn.checked,
.fp-viewbar .btn.btn-secondary.checked,
.fp-viewbar .btn.btn-secondary.active {
color: #ffffff !important;
background-color: #1b4f72 !important;
border-color: #1b4f72 !important;
}
.filemanager .fp-navbar .btn img,
.filemanager-toolbar .btn img,
.fp-toolbar .btn img,
.fp-viewbar .btn img,
.file-picker .fp-navbar .btn img {
opacity: 1 !important;
filter: none;
}
.fp-viewbar:not(.disabled) a.checked img,
.fp-viewbar .btn.btn-secondary.checked img,
.fp-viewbar .btn.btn-secondary.active img {
filter: brightness(0) invert(1);
}
.filemanager .fp-navbar.bg-faded,
.file-picker .fp-navbar.bg-faded {
background-color: #f4f8fb !important;
border: 1px solid #d5e2ec;
}
.course-section-header .sectionname.du-has-title-ico,
li.section .sectionname.du-has-title-ico {
gap: 0.45rem !important;
}
a.dropdown-item.du-has-title-ico {
display: flex !important;
align-items: center !important;
gap: 0.45rem !important;
}
body.pagelayout-course .secondary-navigation .nav-tabs .nav-link:hover,
body.pagelayout-course .secondary-navigation .nav-tabs .nav-link:focus {
color: var(--du-navy) !important;
background: transparent !important;
border-bottom-color: var(--du-sky-2) !important;
}
body.pagelayout-course .secondary-navigation .nav-tabs .nav-link.active,
body.pagelayout-course .secondary-navigation .nav-tabs .nav-link.active_tree_node {
color: var(--du-navy) !important;
border-bottom-color: var(--du-navy) !important;
background: transparent !important;
font-weight: 700 !important;
}
body.pagelayout-course .secondary-navigation .nav-tabs .nav-link.active .du-tab-ico,
body.pagelayout-course .secondary-navigation .nav-tabs .nav-link:hover .du-tab-ico {
opacity: 1;
color: var(--du-navy);
}
/* Main content card */
body.pagelayout-course.path-course-view #region-main:has(.course-content),
body.pagelayout-course.path-course-view .course-content {
background: var(--du-card) !important;
border-radius: 16px !important;
box-shadow: 0 10px 32px rgba(27, 79, 114, 0.08) !important;
border: 1px solid rgba(230, 238, 245, 0.95) !important;
}
body.pagelayout-course.path-course-view #region-main:has(.course-content) {
padding: 1.35rem 1.5rem 1.75rem !important;
overflow: hidden;
}
body.pagelayout-course.path-course-view #region-main:has(.course-content) .course-content {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
}
/* Fallback when :has() unsupported — style course-content as the card */
@supports not selector(:has(*)) {
body.pagelayout-course.path-course-view .course-content {
padding: 1.35rem 1.5rem 1.75rem !important;
}
}
/* Section headers */
body.pagelayout-course.path-course-view .course-section-header .sectionname,
body.pagelayout-course.path-course-view .course-section-header a.sectionname,
body.pagelayout-course.path-course-view .course-section-header h3,
body.pagelayout-course.path-course-view li.section .sectionname {
color: var(--du-navy) !important;
font-weight: 700 !important;
font-size: 1.15rem !important;
}
body.pagelayout-course.path-course-view .course-section-header {
margin-bottom: 0.65rem !important;
padding-bottom: 0.35rem !important;
border-bottom: 0 !important;
}
/* Collapse all — sky chip */
body.pagelayout-course.path-course-view #collapsesections.section-collapsemenu,
body.pagelayout-course.path-course-view a.section-collapsemenu {
display: inline-flex !important;
align-items: center !important;
gap: 0.35rem;
padding: 0.4rem 0.85rem !important;
border-radius: 999px !important;
background: var(--du-sky) !important;
color: var(--du-navy) !important;
font-weight: 600 !important;
font-size: 0.875rem !important;
text-decoration: none !important;
border: 1px solid var(--du-sky-2) !important;
box-shadow: none !important;
transition: background 0.15s ease, box-shadow 0.15s ease;
}
body.pagelayout-course.path-course-view #collapsesections.section-collapsemenu:hover,
body.pagelayout-course.path-course-view a.section-collapsemenu:hover {
background: var(--du-sky-2) !important;
color: var(--du-navy-dark) !important;
box-shadow: 0 2px 8px rgba(27, 79, 114, 0.08);
}
body.pagelayout-course.path-course-view #collapsesections .icons-collapse-expand .expanded-icon,
body.pagelayout-course.path-course-view #collapsesections .icons-collapse-expand .collapsed-icon {
color: var(--du-navy) !important;
}
/* Activity cards */
body.pagelayout-course.path-course-view li.activity {
margin-bottom: 0.55rem !important;
}
body.pagelayout-course.path-course-view li.activity > .activity-item {
border-radius: 12px !important;
border: 1px solid transparent !important;
padding: 0.55rem 0.65rem !important;
transition: background 0.15s ease, border-color 0.15s ease;
}
body.pagelayout-course.path-course-view li.activity > .activity-item:hover {
background: #f8fbfe !important;
border-color: var(--du-line) !important;
}
body.pagelayout-course.path-course-view li.activity .activityname a,
body.pagelayout-course.path-course-view li.activity .aalink {
color: var(--du-navy) !important;
font-weight: 600 !important;
}
body.pagelayout-course.path-course-view li.activity .activityname a:hover {
color: var(--du-navy-dark) !important;
}
/* Adobe Connect — nested soft box */
body.pagelayout-course.path-course-view li.activity.modtype_adobeconnect > .activity-item {
background: #f9fbfd !important;
border: 1px solid var(--du-line) !important;
border-radius: 14px !important;
padding: 0.85rem 1rem !important;
box-shadow: 0 2px 10px rgba(27, 79, 114, 0.04);
}
body.pagelayout-course.path-course-view li.activity.modtype_adobeconnect > .activity-item:hover {
background: #f4f9fd !important;
border-color: var(--du-sky-2) !important;
}
body.pagelayout-course.path-course-view li.activity .activity-description,
body.pagelayout-course.path-course-view li.activity .contentafterlink {
color: #5a738a !important;
font-size: 0.92rem !important;
line-height: 1.55 !important;
}
/* Course index drawer polish — stronger edge shadow so it reads against page */
#theme_boost-drawers-courseindex.drawer,
#theme_boost-drawers-courseindex.drawer.show,
body.pagelayout-course #theme_boost-drawers-courseindex.drawer {
background: #fff !important;
border-inline-start: 1px solid rgba(27, 79, 114, 0.12) !important;
box-shadow:
-4px 0 0 rgba(27, 79, 114, 0.04),
-12px 0 32px rgba(27, 79, 114, 0.16),
-2px 0 8px rgba(27, 79, 114, 0.08) !important;
}
#theme_boost-drawers-courseindex .drawerheader {
background: #fff !important;
}
/* Wave art: pinned to bottom-right of drawer scroller (RTL physical right) */
#theme_boost-drawers-courseindex .drawercontent.drag-container,
#theme_boost-drawers-courseindex .drawercontent {
background-color: #fff !important;
background-image: url("/theme/boost/du-login/du-courseindex-wave.png?v=mc46") !important;
background-repeat: no-repeat !important;
background-position: right bottom !important;
/* Right-half crop of the wave art, pinned to bottom-right */
background-size: min(100%, 320px) auto !important;
background-attachment: local !important;
}
#theme_boost-drawers-courseindex .drawercontent > * {
position: relative;
z-index: 1;
}
@media (max-width: 991.98px) {
body.pagelayout-course #topofscroll.main-inner {
padding-inline: 12px !important;
}
body.pagelayout-course.path-course-view #region-main:has(.course-content) {
padding: 1rem 1rem 1.25rem !important;
border-radius: 14px !important;
}
body.pagelayout-course .secondary-navigation .nav-tabs .nav-link {
padding: 0.6rem 0.7rem !important;
font-size: 0.88rem !important;
}
body.pagelayout-course .secondary-navigation .nav-tabs .nav-link .du-tab-ico {
width: 16px;
height: 16px;
}
body.pagelayout-course .secondary-navigation .nav-tabs .nav-link .du-tab-ico svg {
width: 16px;
height: 16px;
}
}
@media (max-width: 575.98px) {
body.pagelayout-course #page-header .page-header-headings h1,
body.pagelayout-course #page-header h1 {
font-size: 1.25rem !important;
}
body.pagelayout-course.path-course-view li.activity.modtype_adobeconnect > .activity-item {
padding: 0.7rem 0.75rem !important;
}
}
/* ============================================================
Quiz page redesign (path-mod-quiz)
============================================================ */
body.path-mod-quiz {
--du-navy: #1b4f72;
--du-navy-dark: #123a54;
--du-sky: #e8f3fc;
--du-sky-2: #d6ebf8;
--du-muted: #7b8fa3;
--du-card: #ffffff;
--du-line: #e6eef5;
background: #f7fafc !important;
}
body.path-mod-quiz #page,
body.path-mod-quiz #page-content,
body.path-mod-quiz #topofscroll,
body.path-mod-quiz #region-main-box {
position: relative;
z-index: 1;
background: transparent !important;
}
body.path-mod-quiz #topofscroll.main-inner {
max-width: min(920px, 100%) !important;
width: 100% !important;
margin-inline: auto !important;
padding-inline: clamp(12px, 2.2vw, 28px) !important;
padding-bottom: 56px !important;
box-sizing: border-box !important;
}
body.path-mod-quiz #page-header .page-header-headings h1,
body.path-mod-quiz #page-header h1.h2,
body.path-mod-quiz #page-header h1 {
color: var(--du-navy) !important;
font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
font-weight: 800 !important;
line-height: 1.35 !important;
letter-spacing: -0.01em;
}
body.path-mod-quiz .page-context-header .activityiconcontainer.modicon_quiz,
body.path-mod-quiz .page-header-image .activityiconcontainer {
width: 3.1rem !important;
height: 3.1rem !important;
border-radius: 14px !important;
background: linear-gradient(145deg, #ffe4ec 0%, #ffd0df 100%) !important;
border: 1px solid rgba(190, 24, 93, 0.18) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 14px rgba(190, 24, 93, 0.12);
}
body.path-mod-quiz .page-context-header .activityiconcontainer img.activityicon {
width: 1.55rem !important;
height: 1.55rem !important;
}
/* Dates as soft chips */
body.path-mod-quiz .activity-dates {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.55rem !important;
margin-top: 0.65rem !important;
margin-bottom: 0.35rem !important;
}
body.path-mod-quiz .activity-dates .date-item,
body.path-mod-quiz .activity-dates .du-quiz-date {
display: inline-flex !important;
align-items: center !important;
gap: 0.4rem !important;
padding: 0.4rem 0.75rem !important;
border-radius: 999px !important;
background: #fff !important;
border: 1px solid var(--du-line) !important;
color: var(--du-navy) !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
box-shadow: 0 2px 8px rgba(27, 79, 114, 0.05);
}
body.path-mod-quiz .activity-dates .date-item-label {
color: var(--du-muted) !important;
font-weight: 500 !important;
}
/* Secondary navigation — match course tabs */
body.path-mod-quiz .secondary-navigation {
margin-top: 0.35rem !important;
margin-bottom: 1.35rem !important;
border-bottom: 1px solid var(--du-line) !important;
background: transparent !important;
}
body.path-mod-quiz .secondary-navigation .moremenu .nav-tabs {
border-bottom: none !important;
gap: 0.15rem;
}
body.path-mod-quiz .secondary-navigation .nav-tabs .nav-link {
display: inline-flex !important;
align-items: center !important;
gap: 0.4rem !important;
color: var(--du-muted) !important;
font-weight: 600 !important;
font-size: 0.92rem !important;
padding: 0.7rem 0.85rem !important;
border: none !important;
border-bottom: 2.5px solid transparent !important;
background: transparent !important;
border-radius: 0 !important;
}
body.path-mod-quiz .secondary-navigation .nav-tabs .nav-link .du-tab-ico {
display: inline-flex;
width: 18px;
height: 18px;
align-items: center;
justify-content: center;
opacity: 0.85;
}
body.path-mod-quiz .secondary-navigation .nav-tabs .nav-link .du-tab-ico svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
}
body.path-mod-quiz .secondary-navigation .nav-tabs .nav-link:hover,
body.path-mod-quiz .secondary-navigation .nav-tabs .nav-link:focus {
color: var(--du-navy) !important;
background: transparent !important;
}
body.path-mod-quiz .secondary-navigation .nav-tabs .nav-link.active,
body.path-mod-quiz .secondary-navigation .nav-tabs .nav-link.active_tree_node {
color: var(--du-navy) !important;
border-bottom-color: var(--du-navy) !important;
font-weight: 700 !important;
}
/* CTA panel */
body.path-mod-quiz .tertiary-navigation.du-quiz-cta,
body.path-mod-quiz .tertiary-navigation {
background: linear-gradient(165deg, #ffffff 0%, #f3f8fc 100%) !important;
border: 1px solid var(--du-line) !important;
border-radius: 18px !important;
padding: 1.35rem 1.25rem !important;
margin-bottom: 1.15rem !important;
box-shadow: 0 8px 28px rgba(27, 79, 114, 0.07);
display: flex !important;
justify-content: center !important;
}
body.path-mod-quiz .tertiary-navigation .d-flex {
width: 100%;
justify-content: center !important;
}
body.path-mod-quiz .quizstartbuttondiv .btn-primary,
body.path-mod-quiz .quizstartbuttondiv button.btn {
min-width: min(100%, 280px);
padding: 0.85rem 1.6rem !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
border-radius: 12px !important;
letter-spacing: -0.01em;
box-shadow: 0 8px 20px rgba(27, 79, 114, 0.22) !important;
background: linear-gradient(145deg, #24628e 0%, #1b4f72 55%, #15405c 100%) !important;
border: none !important;
color: #fff !important;
}
body.path-mod-quiz .quizstartbuttondiv .btn-primary:hover,
body.path-mod-quiz .quizstartbuttondiv button.btn:hover {
background: linear-gradient(145deg, #1b4f72 0%, #123a54 100%) !important;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(27, 79, 114, 0.28) !important;
}
/* Meta info cards */
body.path-mod-quiz .quizinfo.du-quiz-meta,
body.path-mod-quiz .box.quizinfo {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.75rem !important;
padding: 0 !important;
margin-bottom: 1.1rem !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
body.path-mod-quiz .quizinfo .du-quiz-meta-item,
body.path-mod-quiz .quizinfo > p {
display: flex !important;
align-items: center !important;
gap: 0.55rem !important;
margin: 0 !important;
padding: 0.85rem 1rem !important;
background: #fff !important;
border: 1px solid var(--du-line) !important;
border-radius: 14px !important;
color: var(--du-navy) !important;
font-weight: 600 !important;
font-size: 0.95rem !important;
text-align: start !important;
box-shadow: 0 3px 12px rgba(27, 79, 114, 0.05);
}
body.path-mod-quiz .quizattemptcounts.du-quiz-counts,
body.path-mod-quiz .quizattemptcounts {
margin-bottom: 1.15rem !important;
}
body.path-mod-quiz .quizattemptcounts a {
display: inline-flex !important;
align-items: center !important;
gap: 0.35rem !important;
padding: 0.45rem 0.9rem !important;
border-radius: 999px !important;
background: var(--du-sky) !important;
border: 1px solid var(--du-sky-2) !important;
color: var(--du-navy) !important;
font-weight: 700 !important;
text-decoration: none !important;
}
body.path-mod-quiz .quizattemptcounts a:hover {
background: var(--du-sky-2) !important;
text-decoration: none !important;
}
body.path-mod-quiz #region-main > [role="main"] > h3,
body.path-mod-quiz [role="main"] > h3 {
color: var(--du-navy) !important;
font-weight: 800 !important;
font-size: 1.1rem !important;
margin: 0.5rem 0 1rem !important;
}
/* Attempt summary cards */
body.path-mod-quiz [role="main"] > ul.list-unstyled.row > li .card {
border: 1px solid var(--du-line) !important;
border-radius: 16px !important;
overflow: hidden !important;
box-shadow: 0 6px 20px rgba(27, 79, 114, 0.06) !important;
background: #fff !important;
}
body.path-mod-quiz [role="main"] > ul.list-unstyled.row > li .card-header {
background: linear-gradient(145deg, #f4f9fd 0%, #eaf3fa 100%) !important;
border-bottom: 1px solid var(--du-line) !important;
padding: 0.75rem 1rem !important;
}
body.path-mod-quiz [role="main"] > ul.list-unstyled.row > li .card-title {
color: var(--du-navy) !important;
font-weight: 750 !important;
font-size: 1rem !important;
}
body.path-mod-quiz table.quizreviewsummary {
margin: 0 !important;
border: none !important;
}
body.path-mod-quiz table.quizreviewsummary th,
body.path-mod-quiz table.quizreviewsummary td {
border-color: var(--du-line) !important;
padding: 0.7rem 1rem !important;
font-size: 0.92rem !important;
}
body.path-mod-quiz table.quizreviewsummary th {
color: var(--du-muted) !important;
font-weight: 600 !important;
width: 32%;
background: #fafcfd !important;
}
body.path-mod-quiz table.quizreviewsummary td {
color: var(--du-navy) !important;
font-weight: 600 !important;
}
/* Unavailable / notice lines */
body.path-mod-quiz .quizunavailable,
body.path-mod-quiz .box.py-3.generalbox,
body.path-mod-quiz .quizattemptcounts + p,
body.path-mod-quiz [role="main"] > ul.list-unstyled + p {
color: #9a3412 !important;
background: #fff7ed !important;
border: 1px solid #fed7aa !important;
border-radius: 12px !important;
padding: 0.75rem 1rem !important;
font-weight: 600 !important;
margin-top: 1rem !important;
}
@media (max-width: 575.98px) {
body.path-mod-quiz #page-header .page-header-headings h1,
body.path-mod-quiz #page-header h1 {
font-size: 1.28rem !important;
}
body.path-mod-quiz .quizstartbuttondiv .btn-primary {
width: 100%;
min-width: 0;
}
body.path-mod-quiz .secondary-navigation .nav-tabs .nav-link {
padding: 0.55rem 0.65rem !important;
font-size: 0.85rem !important;
}
}
/* ============================================================
Adobe Connect join page redesign (path-mod-adobeconnect)
============================================================ */
body.path-mod-adobeconnect {
--du-navy: #1b4f72;
--du-navy-dark: #123a54;
--du-sky: #e8f3fc;
--du-sky-2: #d6ebf8;
--du-muted: #7b8fa3;
--du-card: #ffffff;
--du-line: #e6eef5;
background: #f7fafc !important;
}
body.path-mod-adobeconnect #page,
body.path-mod-adobeconnect #page-content,
body.path-mod-adobeconnect #topofscroll,
body.path-mod-adobeconnect #region-main-box {
position: relative;
z-index: 1;
background: transparent !important;
}
body.path-mod-adobeconnect #topofscroll.main-inner {
max-width: min(920px, 100%) !important;
width: 100% !important;
margin-inline: auto !important;
padding-inline: clamp(12px, 2.2vw, 28px) !important;
padding-bottom: 56px !important;
box-sizing: border-box !important;
}
body.path-mod-adobeconnect #page-header .page-header-headings h1,
body.path-mod-adobeconnect #page-header h1.h2,
body.path-mod-adobeconnect #page-header h1 {
color: var(--du-navy) !important;
font-size: clamp(1.35rem, 2.4vw, 1.85rem) !important;
font-weight: 800 !important;
line-height: 1.35 !important;
}
body.path-mod-adobeconnect .page-context-header .activityiconcontainer,
body.path-mod-adobeconnect .page-header-image .activityiconcontainer {
width: 3rem !important;
height: 3rem !important;
border-radius: 14px !important;
background: linear-gradient(145deg, #e8f1f8 0%, #d6e6f2 100%) !important;
border: 1px solid rgba(27, 79, 114, 0.14) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 14px rgba(27, 79, 114, 0.1);
}
/* Secondary tabs */
body.path-mod-adobeconnect .secondary-navigation {
margin-top: 0.35rem !important;
margin-bottom: 1.25rem !important;
border-bottom: 1px solid var(--du-line) !important;
background: transparent !important;
}
body.path-mod-adobeconnect .secondary-navigation .moremenu .nav-tabs {
border-bottom: none !important;
}
body.path-mod-adobeconnect .secondary-navigation .nav-tabs .nav-link {
display: inline-flex !important;
align-items: center !important;
gap: 0.4rem !important;
color: var(--du-muted) !important;
font-weight: 600 !important;
font-size: 0.92rem !important;
padding: 0.7rem 0.85rem !important;
border: none !important;
border-bottom: 2.5px solid transparent !important;
background: transparent !important;
border-radius: 0 !important;
}
body.path-mod-adobeconnect .secondary-navigation .nav-tabs .nav-link .du-tab-ico {
display: inline-flex;
width: 18px;
height: 18px;
align-items: center;
justify-content: center;
opacity: 0.85;
}
body.path-mod-adobeconnect .secondary-navigation .nav-tabs .nav-link .du-tab-ico svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
}
body.path-mod-adobeconnect .secondary-navigation .nav-tabs .nav-link:hover,
body.path-mod-adobeconnect .secondary-navigation .nav-tabs .nav-link:focus {
color: var(--du-navy) !important;
background: transparent !important;
}
body.path-mod-adobeconnect .secondary-navigation .nav-tabs .nav-link.active,
body.path-mod-adobeconnect .secondary-navigation .nav-tabs .nav-link.active_tree_node {
color: var(--du-navy) !important;
border-bottom-color: var(--du-navy) !important;
font-weight: 700 !important;
}
/* Intro banner */
body.path-mod-adobeconnect #intro.du-adobe-intro,
body.path-mod-adobeconnect .activity-header #intro {
background: linear-gradient(165deg, #ffffff 0%, #eef5fb 100%) !important;
border: 1px solid var(--du-line) !important;
border-radius: 16px !important;
padding: 1.1rem 1.25rem !important;
margin-bottom: 1.1rem !important;
box-shadow: 0 6px 20px rgba(27, 79, 114, 0.06);
color: var(--du-navy) !important;
font-size: 0.98rem !important;
line-height: 1.75 !important;
}
body.path-mod-adobeconnect #intro.du-adobe-intro p,
body.path-mod-adobeconnect .activity-header #intro p {
margin-bottom: 0.35rem !important;
color: var(--du-navy) !important;
font-weight: 600 !important;
}
body.path-mod-adobeconnect #intro.du-adobe-intro p:last-child,
body.path-mod-adobeconnect .activity-header #intro p:last-child {
margin-bottom: 0 !important;
color: #3d5f78 !important;
font-weight: 500 !important;
}
/* Meeting details card */
body.path-mod-adobeconnect #meetingsummary.du-adobe-card,
body.path-mod-adobeconnect #meetingsummary.generalbox {
background: #fff !important;
border: 1px solid var(--du-line) !important;
border-radius: 18px !important;
padding: 0.35rem 0.5rem 1.15rem !important;
box-shadow: 0 8px 28px rgba(27, 79, 114, 0.07) !important;
overflow: hidden;
}
body.path-mod-adobeconnect #meetingsummary .aconfldset {
display: flex;
flex-direction: column;
gap: 0;
}
body.path-mod-adobeconnect #meetingsummary .aconmeetinforow.du-adobe-row,
body.path-mod-adobeconnect #meetingsummary .aconmeetinforow {
display: grid !important;
grid-template-columns: minmax(140px, 220px) 1fr;
gap: 0.75rem 1.1rem;
align-items: start;
padding: 0.95rem 1.1rem !important;
border-bottom: 1px solid var(--du-line);
margin: 0 !important;
}
body.path-mod-adobeconnect #meetingsummary .aconmeetinforow:last-of-type {
border-bottom: none;
}
/* Hide duplicate summary block (already shown in intro) */
body.path-mod-adobeconnect.du-adobe-ready .aconmeetinforow:has(#aconmeetsummarytitle) {
display: none !important;
}
body.path-mod-adobeconnect #meetingsummary .aconlabeltitle {
color: var(--du-muted) !important;
font-weight: 600 !important;
font-size: 0.9rem !important;
}
body.path-mod-adobeconnect #meetingsummary .aconlabeltitle label {
display: inline-flex !important;
align-items: center !important;
gap: 0.45rem !important;
margin: 0 !important;
color: inherit !important;
}
body.path-mod-adobeconnect #meetingsummary .aconlabeltext,
body.path-mod-adobeconnect #meetingsummary .aconlabeltext label {
color: var(--du-navy) !important;
font-weight: 700 !important;
font-size: 0.98rem !important;
margin: 0 !important;
word-break: break-word;
}
body.path-mod-adobeconnect #meetingsummary .aconlabeltext a {
color: #1b4f72 !important;
font-weight: 700 !important;
text-decoration: none !important;
border-bottom: 1px dashed rgba(27, 79, 114, 0.35);
}
body.path-mod-adobeconnect #meetingsummary .aconlabeltext a:hover {
color: #123a54 !important;
border-bottom-style: solid;
}
/* Action buttons */
body.path-mod-adobeconnect .aconbtnrow.du-adobe-actions,
body.path-mod-adobeconnect .aconbtnrow {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.75rem !important;
justify-content: center !important;
align-items: center !important;
padding: 1.15rem 1rem 0.35rem !important;
margin-top: 0.35rem !important;
border-top: 1px solid var(--du-line);
}
body.path-mod-adobeconnect .aconbtnjoin,
body.path-mod-adobeconnect .aconbtnroles {
float: none !important;
display: block !important;
margin: 0 !important;
}
body.path-mod-adobeconnect .aconbtnjoin input.du-adobe-join,
body.path-mod-adobeconnect .aconbtnjoin input[type="button"],
body.path-mod-adobeconnect input.du-adobe-join {
min-width: min(100%, 240px);
padding: 0.85rem 1.5rem !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
border-radius: 12px !important;
border: none !important;
color: #fff !important;
background: linear-gradient(145deg, #24628e 0%, #1b4f72 55%, #15405c 100%) !important;
box-shadow: 0 8px 20px rgba(27, 79, 114, 0.22) !important;
cursor: pointer;
}
body.path-mod-adobeconnect .aconbtnjoin input.du-adobe-join:hover,
body.path-mod-adobeconnect .aconbtnjoin input[type="button"]:hover {
background: linear-gradient(145deg, #1b4f72 0%, #123a54 100%) !important;
transform: translateY(-1px);
}
body.path-mod-adobeconnect .aconbtnroles input.du-adobe-roles,
body.path-mod-adobeconnect .aconbtnroles input[type="submit"],
body.path-mod-adobeconnect input.du-adobe-roles {
min-width: min(100%, 200px);
padding: 0.8rem 1.25rem !important;
font-size: 0.98rem !important;
font-weight: 700 !important;
border-radius: 12px !important;
color: #1b4f72 !important;
background: #fff !important;
border: 1.5px solid #b8c9d6 !important;
box-shadow: none !important;
cursor: pointer;
}
body.path-mod-adobeconnect .aconbtnroles input.du-adobe-roles:hover,
body.path-mod-adobeconnect .aconbtnroles input[type="submit"]:hover {
background: #e8f1f8 !important;
border-color: #1b4f72 !important;
color: #1b4f72 !important;
}
@media (max-width: 700px) {
body.path-mod-adobeconnect #meetingsummary .aconmeetinforow.du-adobe-row,
body.path-mod-adobeconnect #meetingsummary .aconmeetinforow {
grid-template-columns: 1fr;
gap: 0.35rem;
}
body.path-mod-adobeconnect .aconbtnjoin input,
body.path-mod-adobeconnect .aconbtnroles input {
width: 100%;
min-width: 0;
}
}
/* ============================================================
Theme toggle + dark mode
============================================================ */
.du-theme-toggle {
display: inline-flex !important;
align-items: center;
justify-content: center;
align-self: stretch;
width: 36px;
height: 100% !important;
min-height: 60px;
margin-inline: 2px;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--du-navy) !important;
cursor: pointer;
vertical-align: middle;
box-shadow: none !important;
line-height: 1 !important;
}
#usernavigation .du-theme-toggle {
align-self: stretch;
height: 100% !important;
}
.du-theme-toggle:hover,
.du-theme-toggle:focus {
background: transparent !important;
color: var(--du-navy-dark) !important;
outline: none;
}
.du-theme-toggle:hover svg,
.du-theme-toggle:focus svg {
transform: scale(1.08);
}
.du-theme-toggle svg {
width: 20px;
height: 20px;
stroke: currentColor;
fill: none;
stroke-width: 1.85;
stroke-linecap: round;
stroke-linejoin: round;
}
.du-theme-toggle .du-theme-ico-sun {
display: none;
}
html.du-theme-dark .du-theme-toggle .du-theme-ico-moon {
display: none;
}
html.du-theme-dark .du-theme-toggle .du-theme-ico-sun {
display: block;
}
html.du-theme-dark,
html.du-theme-dark body {
/* Unified canvas — page + boxes share one surface (like light mode feel) */
--du-navy: #7eb6d9;
--du-navy-dark: #a8d0ea;
--du-sky: #1c2a38;
--du-sky-2: #223344;
--du-muted: #9bb0c2;
--du-card: #15202b;
--du-line: #2a3b4c;
--du-page-bg: #15202b;
--du-text: #e8eef4;
--du-text-soft: #c5d3df;
--du-surface: #15202b;
--du-navbar-bg: #15202b;
--du-accent-soft: #15202b;
color-scheme: dark;
}
html.du-theme-dark body,
html.du-theme-dark body.pagelayout-mycourses,
html.du-theme-dark body.pagelayout-course,
html.du-theme-dark body.path-mod-quiz,
html.du-theme-dark body.path-mod-adobeconnect,
html.du-theme-dark body.pagelayout-incourse {
background: var(--du-page-bg) !important;
color: var(--du-text) !important;
}
html.du-theme-dark #page,
html.du-theme-dark #page-content,
html.du-theme-dark #topofscroll,
html.du-theme-dark #region-main-box,
html.du-theme-dark #region-main,
html.du-theme-dark .main-inner {
background: transparent !important;
color: var(--du-text) !important;
}
html.du-theme-dark .navbar,
html.du-theme-dark nav.navbar,
html.du-theme-dark .navbar.fixed-top {
background: var(--du-navbar-bg) !important;
border-bottom: 1px solid var(--du-line) !important;
color: var(--du-text) !important;
}
html.du-theme-dark body.path-admin a:not(.btn):not(.dropdown-item),
html.du-theme-dark body.pagelayout-admin a:not(.btn):not(.dropdown-item) {
color: #9ec9ff !important;
}
html.du-theme-dark body.path-admin a:not(.btn):not(.dropdown-item):hover,
html.du-theme-dark body.path-admin a:not(.btn):not(.dropdown-item):focus,
html.du-theme-dark body.pagelayout-admin a:not(.btn):not(.dropdown-item):hover,
html.du-theme-dark body.pagelayout-admin a:not(.btn):not(.dropdown-item):focus {
color: #ffffff !important;
}
html.du-theme-dark .navbar .nav-link,
html.du-theme-dark .navbar .dropdown-toggle,
html.du-theme-dark .navbar a,
html.du-theme-dark .usermenu .usertext,
html.du-theme-dark .editmode-switch-form label {
color: var(--du-text-soft) !important;
}
html.du-theme-dark .navbar a.navbar-brand {
color: var(--du-navy) !important;
}
html.du-theme-dark .card,
html.du-theme-dark .generalbox,
html.du-theme-dark .box.generalbox,
html.du-theme-dark .list-group-item,
html.du-theme-dark .dropdown-menu,
html.du-theme-dark .popover,
html.du-theme-dark .modal-content,
html.du-theme-dark .drawer,
html.du-theme-dark #theme_boost-drawers-courseindex.drawer,
html.du-theme-dark .block,
html.du-theme-dark .activity-item {
background: var(--du-page-bg) !important;
color: var(--du-text) !important;
border-color: var(--du-line) !important;
box-shadow: none !important;
}
html.du-theme-dark .dropdown-item,
html.du-theme-dark .dropdown-menu a {
color: var(--du-text) !important;
}
html.du-theme-dark .dropdown-item:hover,
html.du-theme-dark .dropdown-item:focus {
background: var(--du-sky) !important;
color: var(--du-navy-dark) !important;
}
html.du-theme-dark h1,
html.du-theme-dark h2,
html.du-theme-dark h3,
html.du-theme-dark h4,
html.du-theme-dark .page-header-headings h1,
html.du-theme-dark .sectionname,
html.du-theme-dark .aalink,
html.du-theme-dark a:not(.btn):not(.page-link):not(.badge) {
color: var(--du-navy) !important;
}
html.du-theme-dark .text-muted,
html.du-theme-dark .breadcrumb-item,
html.du-theme-dark .breadcrumb-item a {
color: var(--du-muted) !important;
}
html.du-theme-dark .secondary-navigation,
html.du-theme-dark .secondary-navigation .nav-tabs .nav-link {
border-color: var(--du-line) !important;
color: var(--du-muted) !important;
}
html.du-theme-dark .secondary-navigation .nav-tabs .nav-link.active {
color: var(--du-navy) !important;
border-bottom-color: var(--du-navy) !important;
}
html.du-theme-dark .btn-primary,
html.du-theme-dark a.btn-primary,
html.du-theme-dark input.btn-primary,
html.du-theme-dark button.btn-primary {
color: #0f1720 !important;
background: linear-gradient(145deg, #8fc4e2 0%, #7eb6d9 55%, #5a9ec4 100%) !important;
border-color: #7eb6d9 !important;
}
html.du-theme-dark .btn-primary:hover,
html.du-theme-dark a.btn-primary:hover {
color: #0f1720 !important;
background: linear-gradient(145deg, #a8d0ea 0%, #7eb6d9 100%) !important;
}
html.du-theme-dark .btn-secondary,
html.du-theme-dark a.btn-secondary,
html.du-theme-dark .btn-outline-secondary {
color: var(--du-text) !important;
background: var(--du-sky) !important;
border-color: var(--du-line) !important;
}
/* Plain Bootstrap .btn / Moodle select-menu toggles (no color class) */
html.du-theme-dark .btn.dropdown-toggle:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning),
html.du-theme-dark .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-link):not(.btn-footer-popover),
html.du-theme-dark .tertiary-navigation-selector .btn,
html.du-theme-dark .tertiary-navigation .btn.dropdown-toggle,
html.du-theme-dark .select-menu .btn.dropdown-toggle,
html.du-theme-dark .select-menu > .btn,
html.du-theme-dark [role="combobox"].btn,
html.du-theme-dark [role="combobox"].dropdown-toggle,
html.du-theme-dark .dropdown > .btn.dropdown-toggle:not(.btn-primary):not(.btn-danger) {
color: var(--du-text) !important;
background-color: var(--du-sky) !important;
background: var(--du-sky) !important;
border: 1px solid var(--du-line) !important;
box-shadow: none !important;
}
html.du-theme-dark .btn.dropdown-toggle:not(.btn-primary):not(.btn-danger):hover,
html.du-theme-dark .btn.dropdown-toggle:not(.btn-primary):not(.btn-danger):focus,
html.du-theme-dark .tertiary-navigation-selector .btn:hover,
html.du-theme-dark .select-menu .btn.dropdown-toggle:hover,
html.du-theme-dark [role="combobox"].btn:hover,
html.du-theme-dark .show > .btn.dropdown-toggle:not(.btn-primary):not(.btn-danger) {
color: var(--du-text) !important;
background: var(--du-surface, #1c2a38) !important;
border-color: var(--du-navy) !important;
}
html.du-theme-dark .btn.dropdown-toggle:not(.btn-primary)::after,
html.du-theme-dark .select-menu .dropdown-toggle::after {
border-top-color: var(--du-text) !important;
opacity: 0.9;
}
html.du-theme-dark .select-menu .dropdown-menu,
html.du-theme-dark .tertiary-navigation-selector .dropdown-menu {
background: var(--du-card) !important;
color: var(--du-text) !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark .select-menu .dropdown-item,
html.du-theme-dark .select-menu [role="option"],
html.du-theme-dark .tertiary-navigation-selector .dropdown-item {
color: var(--du-text) !important;
}
html.du-theme-dark .select-menu .dropdown-item:hover,
html.du-theme-dark .select-menu .dropdown-item.active,
html.du-theme-dark .select-menu [role="option"]:hover,
html.du-theme-dark .select-menu [aria-selected="true"] {
background: var(--du-sky) !important;
color: var(--du-navy) !important;
}
html.du-theme-dark .form-control,
html.du-theme-dark .form-select,
html.du-theme-dark input[type="text"],
html.du-theme-dark input[type="search"],
html.du-theme-dark textarea,
html.du-theme-dark select {
background: var(--du-sky) !important;
color: var(--du-text) !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark table,
html.du-theme-dark .table,
html.du-theme-dark .generaltable,
html.du-theme-dark .table th,
html.du-theme-dark .table td,
html.du-theme-dark .table > :not(caption) > * > *,
html.du-theme-dark .generaltable tbody,
html.du-theme-dark .generaltable tr,
html.du-theme-dark #participants,
html.du-theme-dark .no-overflow {
color: var(--du-text) !important;
border-color: var(--du-line) !important;
background-color: var(--du-page-bg) !important;
background: var(--du-page-bg) !important;
}
html.du-theme-dark .table thead th,
html.du-theme-dark table.quizreviewsummary th {
background: var(--du-page-bg) !important;
color: var(--du-muted) !important;
}
html.du-theme-dark #page-wrapper::before {
opacity: 0.08 !important;
filter: brightness(0.25) saturate(0.45) !important;
}
html.du-theme-dark #page-wrapper,
html.du-theme-dark #page {
background: var(--du-page-bg) !important;
}
html.du-theme-dark #theme_boost-drawers-courseindex .drawercontent {
background-color: var(--du-card) !important;
background-image: none !important;
opacity: 1;
}
html.du-theme-dark body.pagelayout-mycourses .block_myoverview .list-group-item,
html.du-theme-dark body.pagelayout-mycourses .course-listitem {
background: var(--du-card) !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark .du-title-ico {
color: var(--du-navy) !important;
background: linear-gradient(145deg, #1e3040 0%, #243848 100%) !important;
box-shadow: inset 0 0 0 1px rgba(126, 182, 217, 0.22);
}
html.du-theme-dark .du-filetypes-msg,
html.du-theme-dark .du-quiz-meta-item,
html.du-theme-dark body.path-mod-quiz .quizinfo > p {
color: var(--du-text) !important;
}
html.du-theme-dark body.path-mod-quiz .tertiary-navigation,
html.du-theme-dark body.path-mod-adobeconnect #intro.du-adobe-intro,
html.du-theme-dark body.path-mod-adobeconnect #meetingsummary.generalbox,
html.du-theme-dark body.path-mod-quiz .quizinfo .du-quiz-meta-item {
background: var(--du-card) !important;
border-color: var(--du-line) !important;
color: var(--du-text) !important;
}
html.du-theme-dark body.path-mod-adobeconnect .aconbtnroles input,
html.du-theme-dark body.path-mod-adobeconnect input.du-adobe-roles {
color: var(--du-navy) !important;
background: var(--du-surface) !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark .filemanager .fp-navbar .btn.btn-secondary,
html.du-theme-dark .fp-toolbar .btn.btn-secondary,
html.du-theme-dark .fp-viewbar .btn.btn-secondary {
color: var(--du-navy) !important;
background: var(--du-surface) !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark .popover-region-container,
html.du-theme-dark .popover-region-footer-container {
background: var(--du-card) !important;
color: var(--du-text) !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark .navbar .usermenu img.userpicture,
html.du-theme-dark .navbar .avatar img {
background: var(--du-sky) !important;
}
html.du-theme-dark .du-theme-toggle {
color: var(--du-navy) !important;
}
html.du-theme-dark .du-theme-toggle:hover,
html.du-theme-dark .du-theme-toggle:focus {
background: var(--du-sky) !important;
}
html.du-theme-dark body.pagelayout-mycourses .du-courses-hero {
background: linear-gradient(100deg, #1a2733 0%, #15202b 55%, #121c26 100%) !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
html.du-theme-dark body.pagelayout-mycourses .du-courses-hero::before {
opacity: 0.45;
}
html.du-theme-dark body.pagelayout-mycourses .du-courses-hero h1,
html.du-theme-dark body.pagelayout-mycourses .du-courses-hero p,
html.du-theme-dark body.pagelayout-mycourses .du-courses-hero .du-hero-copy {
color: var(--du-text) !important;
}
html.du-theme-dark body.pagelayout-mycourses .block_myoverview [data-region="filter"],
html.du-theme-dark body.pagelayout-mycourses .block_myoverview [data-region="filter"] .input-group.searchbar,
html.du-theme-dark body.pagelayout-mycourses .block_myoverview [data-region="filter"] .du-filter-search,
html.du-theme-dark body.pagelayout-mycourses .block_myoverview [data-region="filter"] .form-control,
html.du-theme-dark body.pagelayout-mycourses .block_myoverview [data-region="filter"] .btn,
html.du-theme-dark body.pagelayout-mycourses .block_myoverview [data-region="filter"] .dropdown-toggle {
background: var(--du-card) !important;
color: var(--du-text) !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark body.pagelayout-mycourses .block_myoverview .course-listitem,
html.du-theme-dark body.pagelayout-mycourses .block_myoverview .list-group-item.course-listitem {
background: var(--du-card) !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark body.pagelayout-mycourses .block_myoverview .coursename,
html.du-theme-dark body.pagelayout-mycourses .block_myoverview a.aalink.coursename {
color: var(--du-navy) !important;
}
/* Course page activities — override light Adobe/activity cards */
html.du-theme-dark body.pagelayout-course.path-course-view #region-main:has(.course-content),
html.du-theme-dark body.pagelayout-course.path-course-view .course-content {
background: var(--du-card) !important;
border-color: var(--du-line) !important;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28) !important;
}
html.du-theme-dark body.pagelayout-course.path-course-view li.activity > .activity-item {
background: transparent !important;
border-color: transparent !important;
}
html.du-theme-dark body.pagelayout-course.path-course-view li.activity > .activity-item:hover {
background: var(--du-sky) !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark body.pagelayout-course.path-course-view li.activity.modtype_adobeconnect > .activity-item,
html.du-theme-dark body.pagelayout-course li.activity.modtype_adobeconnect > .activity-item,
html.du-theme-dark li.activity.modtype_adobeconnect > .activity-item {
background: var(--du-page-bg) !important;
border: 1px solid var(--du-line) !important;
box-shadow: none !important;
color: var(--du-text) !important;
}
html.du-theme-dark body.pagelayout-course.path-course-view li.activity.modtype_adobeconnect > .activity-item:hover,
html.du-theme-dark li.activity.modtype_adobeconnect > .activity-item:hover {
background: var(--du-sky) !important;
border-color: var(--du-navy) !important;
}
html.du-theme-dark body.pagelayout-course.path-course-view li.activity .activityname a,
html.du-theme-dark body.pagelayout-course.path-course-view li.activity .aalink {
color: var(--du-navy) !important;
}
html.du-theme-dark body.pagelayout-course.path-course-view li.activity .activity-description,
html.du-theme-dark body.pagelayout-course.path-course-view li.activity .contentafterlink,
html.du-theme-dark li.activity.modtype_adobeconnect .activity-description,
html.du-theme-dark li.activity.modtype_adobeconnect .contentafterlink,
html.du-theme-dark li.activity.modtype_adobeconnect .no-overflow,
html.du-theme-dark li.activity.modtype_adobeconnect .du-vazir,
html.du-theme-dark li.activity.modtype_adobeconnect .du-vazir p {
color: var(--du-text-soft) !important;
}
html.du-theme-dark body.pagelayout-course.path-course-view .activityiconcontainer,
html.du-theme-dark li.activity.modtype_adobeconnect .activityiconcontainer {
background: var(--du-sky) !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark body.pagelayout-course.path-course-view .course-section-header .sectionname,
html.du-theme-dark body.pagelayout-course.path-course-view li.section .sectionname {
color: var(--du-navy) !important;
}
/* —— Broader dark coverage: Boost utility surfaces still painted white —— */
html.du-theme-dark .bg-white,
html.du-theme-dark .bg-light,
html.du-theme-dark .bg-faded,
html.du-theme-dark .bg-body,
html.du-theme-dark .bg-body-tertiary,
html.du-theme-dark .bg-body-secondary {
background-color: var(--du-page-bg) !important;
color: var(--du-text) !important;
box-shadow: none !important;
}
html.du-theme-dark .secondary-navigation,
html.du-theme-dark .secondary-navigation .navigation,
html.du-theme-dark .secondary-navigation .moremenu,
html.du-theme-dark .moremenu.navigation {
background: var(--du-page-bg) !important;
background-color: var(--du-page-bg) !important;
border-color: var(--du-line) !important;
color: var(--du-text) !important;
box-shadow: none !important;
}
html.du-theme-dark .secondary-navigation .nav-tabs {
background: transparent !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark .tertiary-navigation,
html.du-theme-dark .tertiary-navigation .navitem,
html.du-theme-dark .tertiary-navigation .urlselect,
html.du-theme-dark .tertiary-navigation select,
html.du-theme-dark .tertiary-navigation-selector,
html.du-theme-dark .tertiary-navigation-selector .select-menu {
background: transparent !important;
color: var(--du-text) !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark .filter-group,
html.du-theme-dark [data-filterregion="filter"],
html.du-theme-dark [data-region="filter"],
html.du-theme-dark .participantsfilter,
html.du-theme-dark .userlist,
html.du-theme-dark .border-radius.bg-white,
html.du-theme-dark .border-radius.bg-light {
background: var(--du-page-bg) !important;
background-color: var(--du-page-bg) !important;
border-color: var(--du-line) !important;
color: var(--du-text) !important;
box-shadow: none !important;
}
/* Flatten nested boxes so dark mode doesn't look like stacked panels */
html.du-theme-dark .card,
html.du-theme-dark .generalbox,
html.du-theme-dark .box.py-3,
html.du-theme-dark .filter-group,
html.du-theme-dark .border-radius.my-2,
html.du-theme-dark .border-radius.p-2,
html.du-theme-dark div.border.my-2,
html.du-theme-dark body.pagelayout-course.path-course-view #region-main:has(.course-content),
html.du-theme-dark body.pagelayout-course.path-course-view .course-content,
html.du-theme-dark body.path-mod-quiz .tertiary-navigation,
html.du-theme-dark body.path-mod-adobeconnect #intro.du-adobe-intro,
html.du-theme-dark body.path-mod-adobeconnect #meetingsummary.generalbox,
html.du-theme-dark li.activity.modtype_adobeconnect > .activity-item {
background: var(--du-page-bg) !important;
background-color: var(--du-page-bg) !important;
box-shadow: none !important;
border-color: transparent !important;
}
html.du-theme-dark .filter-group,
html.du-theme-dark .border-radius.bg-white.border,
html.du-theme-dark .border-radius.bg-light.border,
html.du-theme-dark .userlist .border {
border: 0 !important;
outline: none !important;
}
html.du-theme-dark .initialbar .page-link,
html.du-theme-dark .initialbar .page-item .page-link {
background: transparent !important;
border-color: transparent !important;
color: var(--du-text-soft) !important;
}
html.du-theme-dark .initialbar .page-item.active .page-link {
background: var(--du-sky) !important;
border-color: var(--du-line) !important;
color: var(--du-navy) !important;
}
html.du-theme-dark .initialbar .page-link:hover {
background: var(--du-sky) !important;
border-color: transparent !important;
}
html.du-theme-dark .initialbar,
html.du-theme-dark .initialbar .pagination,
html.du-theme-dark .initialtable {
background: transparent !important;
}
html.du-theme-dark .page-link,
html.du-theme-dark .initialbar .page-link,
html.du-theme-dark .pagination .page-link,
html.du-theme-dark a.page-link {
background: var(--du-page-bg) !important;
background-color: var(--du-page-bg) !important;
color: var(--du-text) !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark .page-link:hover,
html.du-theme-dark .page-link:focus,
html.du-theme-dark .initialbar .page-link:hover {
background: var(--du-sky) !important;
color: var(--du-navy) !important;
border-color: var(--du-navy) !important;
}
html.du-theme-dark .page-item.active .page-link,
html.du-theme-dark .initialbar .page-item.active .page-link {
background: var(--du-navy) !important;
background-color: var(--du-navy) !important;
color: #0f1720 !important;
border-color: var(--du-navy) !important;
}
html.du-theme-dark .page-item.disabled .page-link {
background: var(--du-sky) !important;
color: var(--du-muted) !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark #page-header,
html.du-theme-dark .header-maxwidth,
html.du-theme-dark .page-context-header {
background: transparent !important;
color: var(--du-text) !important;
}
html.du-theme-dark .form-select,
html.du-theme-dark select.form-control,
html.du-theme-dark .custom-select,
html.du-theme-dark .urlselect select,
html.du-theme-dark .singleselect select {
background-color: var(--du-surface) !important;
color: var(--du-text) !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark .btn-light,
html.du-theme-dark .btn-outline-light,
html.du-theme-dark .btn-default,
html.du-theme-dark input.btn[type="submit"]:not(.btn-primary):not(.btn-danger),
html.du-theme-dark input.btn[type="button"]:not(.btn-primary):not(.btn-danger) {
background: var(--du-sky) !important;
color: var(--du-text) !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark .table-striped > tbody > tr:nth-of-type(odd) > * ,
html.du-theme-dark .table-striped > tbody > tr:nth-of-type(odd),
html.du-theme-dark .table-striped > tbody > tr:nth-of-type(even) > *,
html.du-theme-dark .table-striped > tbody > tr:nth-of-type(even) {
background-color: var(--du-page-bg) !important;
color: var(--du-text) !important;
}
html.du-theme-dark .table-hover > tbody > tr:hover > *,
html.du-theme-dark .table-hover > tbody > tr:hover {
background-color: var(--du-sky) !important;
color: var(--du-text) !important;
}
html.du-theme-dark .generaltable thead th,
html.du-theme-dark .flexible thead th,
html.du-theme-dark table.generaltable th {
background: var(--du-page-bg) !important;
color: var(--du-text-soft) !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark .modal-header,
html.du-theme-dark .modal-body,
html.du-theme-dark .modal-footer,
html.du-theme-dark .toast,
html.du-theme-dark .alert-secondary,
html.du-theme-dark .alert-light {
background: var(--du-card) !important;
color: var(--du-text) !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark .footer-popover,
html.du-theme-dark #page-footer,
html.du-theme-dark .footer-content-popover {
background: var(--du-navbar-bg) !important;
color: var(--du-text) !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark .drawerheader,
html.du-theme-dark .drawercontent,
html.du-theme-dark .message-app,
html.du-theme-dark [data-region="message-drawer"],
html.du-theme-dark .popover-region-header-container,
html.du-theme-dark .popover-region-content-container {
background: var(--du-card) !important;
color: var(--du-text) !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark .border,
html.du-theme-dark .border-top,
html.du-theme-dark .border-bottom,
html.du-theme-dark .border-start,
html.du-theme-dark .border-end {
border-color: var(--du-line) !important;
}
html.du-theme-dark .text-dark,
html.du-theme-dark .text-body,
html.du-theme-dark .text-black {
color: var(--du-text) !important;
}
html.du-theme-dark .badge.bg-secondary,
html.du-theme-dark .badge.text-bg-secondary {
background: var(--du-sky) !important;
color: var(--du-text) !important;
}
html.du-theme-dark .path-user .userlist table,
html.du-theme-dark #participants,
html.du-theme-dark #participantsform,
html.du-theme-dark .no-overflow {
background: transparent !important;
color: var(--du-text) !important;
}
html.du-theme-dark .activityiconcontainer:not(.modicon_quiz) {
background: var(--du-sky) !important;
border-color: var(--du-line) !important;
}
html.du-theme-dark .btn-outline-primary {
background: transparent !important;
color: var(--du-navy) !important;
border-color: var(--du-navy) !important;
}
html.du-theme-dark .btn-outline-primary:hover {
background: var(--du-navy) !important;
color: #0f1720 !important;
}
html.du-theme-dark .nav-tabs .nav-link,
html.du-theme-dark .nav-pills .nav-link {
color: var(--du-muted) !important;
}
html.du-theme-dark .nav-tabs {
border-bottom-color: var(--du-line) !important;
}
html.du-theme-dark hr {
border-color: var(--du-line) !important;
opacity: 1;
}
html.du-theme-dark .shadow,
html.du-theme-dark .shadow-sm,
html.du-theme-dark .card.shadow,
html.du-theme-dark .card.shadow-sm {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}