_dark.scss 38.91 KiB
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
html[data-mode='darkmode'] {
    // --primary-theme: var(--primary-theme);
    // --primary-theme-hsl: 49.3, 100%;
    --primary-color: hsl(var(--primary-theme-hsl), 58.24%);
    --primary-0: hsl(var(--primary-theme-hsl), 88%); // #fffcee;
    --primary-100: hsl(var(--primary-theme-hsl), 82%); // #fff8db; // default button bg
    --primary-200: hsl(var(--primary-theme-hsl), 76%); // #fffd2a; // divider
    --primary-250: hsl(var(--primary-theme-hsl), 70%); // #f1f1c7;
    --primary-300: hsl(var(--primary-theme-hsl), 64%); // #ffeb2a; // outline, focus fields
    --primary-400: var(--primary-color); // button bg, heading, table titles, links, toggles
    --primary-600: hsl(var(--primary-theme-hsl), 52%); // #ffc72a; // on press
    --primary-800: hsl(var(--primary-theme-hsl), 46%); //  #ffb62a; // hover
    --secondary-200: var(--primary-color);
    --secondary-color: var(--primary-color);
    --gray-800: var(--white);
    --color-000: #000000;
    --color-111: #111111;
    --color-222: #222222;
    --color-333: #333333;
    --color-444: #444444;
    --color-5c5c5c: #5c5c5c;
    --sb-search-btn-bg: var(--color-333);
    --sb-search-btn-text: var(--primary-color);
    --sbt-primary-bg: var(--primary-theme);
    --sbt-border-chapter: var(--primary-100);
    --sbt-body-bg: var(--color-000);
    --sbt-body-bg2: var(--color-333) !important;
    --sbt-header-bg: var(--color-333);
    --sbt-filter-bar-bg: var(--color-333);
    --sb-container-bg: var(--black);
    --sbt-footer-bg: var(--color-333);
    --sbt-box-shadow-black: rgba(var(--rc-rgba-black), 0.2);
    --sbt-theme-purple-selectbox: var(--white);
    --sbt-theme-green-selectbox: var(--white);
    --sbt-theme-blue-selectbox: var(--white);
    --sbt-theme-light-blue-selectbox: var(--white);
    --sbt-theme-purple-selectbox-lbg: var(--color-222);
    --sbt-theme-green-selectbox-lbg: var(--color-222);
    --sbt-theme-blue-selectbox-lbg: var(--color-222);
    --sbt-theme-light-blue-selectbox-lbg: var(--color-222);
    --sbt-pill-hs: 212, 100%;
    --sbt-pill-bg: var(--color-5c5c5c);
    --sbt-pill-bg-active: var(--primary-color); // #0076FE
    --sbt-pill-text: var(--white);
    --sbt-pill-text-hover: var(--color-222);
    --sbt-compt-bg: var(--color-333);
    --sbfield-label-text: var(--gray-100);
    --sb-linkmenu-icon-bg-hover: var(--black);
    --sbt-pill-hs: 212, 100%;
    --sb-pill-bg: var(--color-222);
    // new styles
    --sbt-badge-bg: var(--color-222);
    --sbt-sidemenu-overlay-bg: 34, 34, 34;
    --sbt-sidemenu-bg: var(--color-333);
    --sidebar-profil-header-bg: var(--color-222);
    --sb-linkmenu-bg: var(--color-333);
    --sb-linkmenu-text: var(--white);
    --sb-linkmenu-active-text: var(--primary-color);
    --sb-linkmenu-text-hover: var(--color-222);
    --sb-btn-default-color: var(--black);
    //header
    --sb-menu-bg: var(--black);
    --sb-menu-item: var(--gray-0);
    --sb-header-bg: var(--color-333);
    --sb-notification-bg: var(--gray);
    --bell-icon: var(--white);
    --sb-header-qrcode-btn-bg: var(--color-333);
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
--sb-header-qrcode-btn-border: var(--primary-300); --sb-search-input-bg: var(--color-222); --sb-search-input-text: var(--white); --sb-qrcode-divider: var(--primary-0); --sb-language-dropdown-bg: var(--black); --sb-language-dropdown-item: var(--white); --sb-language-dropdown-item-active: var(--gray); --sb-search-auto-select: var(--black); --sb-footer-bg: var(--gray); --sbt-green-bg: var(--color-222); --sbt-class-bar-label-text: var(--gray-100); --sbt-theme-green-selectbox: var(--white); --sb-search-input-bg: var(--color-222); --sb-sidebar-menu-bg-active: var(--sbt-filter-bar-bg); --sb-sidebar-menu-text: var(--primary-600); --sb-graph-section-bg: var(--sbt-body-bg2); //cc --cc-accordion-panel-br: var(--primary-300); --cc-accordion-panel-bg: var(--color-222); --cc-accordion-panel-header-bg: var(--color-333); --cc-accordion-panel-header-br: var(--primary-300); --cc-accordion-panel-header-title: var(--primary-400); --cc-progress-circle-stroke: var(--secondary-200); --cc-sbcard-meta1: var(--rc-979797); --cc-sbcard-metaC-data: var(--rc-FAFAFA); --cc-sbcard-course-curi-title: var(--white); --cc-sbcard-img-label: #284C3F; --cc-sbcard-img-label-bg: #B3EBD7; --cc-sbcard-img-badge-bg: var(--black); --cc-sbcard-img-badge-text: var(--white); --cc-sblabel-badge-br: var(--secondary-color); --cc-sblabel-badge-text: var(--secondary-color); --cc-pill-border: var(--secondary-color); --cc-pill-text: var(--secondary-color); --cc-pill-bg-hover: var(--secondary-color); --cc-pill-text-hover: var(--black); --cc-grade-pill-container-bg: var(--color-333); --cc-grade-pill-text: var(--white); --cc-grade-pill-bg-hover: var(--primary-color); --cc-grade-pill-text-hover: var(--color-222); --cc-grade-pill-svg-fill: var(--color-222); --cc-sbcard-data1-2-text: var(--primary-color); --cc-sbcard-bg: var(--color-333); --cc-sbcard-img-container-bg: var(--gray-100); --cc-sbcard-title: var(--white); --cc-sbcard-meta-text: var(--gray-800); --cc-sbcard-dot-divider: var(--gray-200); --cc-sbcard-moreinfo-bg: none; --cc-sbcard-moreinfo-bordertop: #cacbce; --cc-sbcard-meta2-text: var(--gray-800); --cc-sbcard-org-text: var(--gray-200); --cc-sbcard-type-text: var(--white); --cc-sbcard-rv-img-container-bg: var(--gray-100); --cc-sbcard-selected-border: var(--primary-color); --cc-sbcard-img-br: var(--color-222); --cc-sbcard-offline-bg: var(--tertiary-color); --cc-sbcard-offline-img-text: var(--white); --cc-sbcard-card__progressbar-bg: var(--gray-100); --cc-sbcard-card__progressbar-span-bg: var(--secondary-200); --cc-sbcard-type-br: var(--black); --cc-sbcard-hover-text: var(--white); --cc-sbcard-hover-bg: var(--primary-color); --cc-sbcard-org-text: var(--balck); --cc-sbcard-data1-bg: var(--color-444); --cc-sbcard-data1-bg-active: var(--primary-300); --cc-sbcard-data2-bg: var(--color-444); --cc-sbcard-data2-bg-active: var(--primary-300); --cc-sbcard-data0-bg: var(--color-444); --cc-sbcard-data0-bg-active: var(--primary-300);
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
--cc-sbcard-type-bg: var(--black); --cc-sbcard-type-text: var(--white); --cc-listView-compt-title: var(--white); --cc-listView-compt-itemText: var(--white); --cc-carousel-title: var(--white); --cc-faq-yesbtn-bg: var(--primary-color) !important; --cc-faq-yesbtn-text: var(--color-000) !important; --cc-faq-nobtn-bg: var(--color-222); --cc-faq-nobtn-text: var(--white); // cc pills box --cc-pills-grid-item: var(--color-222) !important; --cc-pills-grid-item-hover: #f2f2f2; --cc-pills-grid-item-img-bg: #f2f2f2; --cc-pills-grid-icon-head-img-bg: var(--white); --cc-viewbtn-border: #94CCF5; --cc-viewbtn-text: #0076FE; --cc-viewbtn-hover: var(--white); //member card --cc-members-list-item-selected: var(--black); --cc-members-list-item-selected-border: var(--primary-color); --cc-members-list-item-menu-text: var(--gray-200); --cc-members-list-item-status-text: var(--secondary-200); --cc-members-list-item-status-br: var(--secondary-200); --cc-members-list-item-status-bg: var(--primary-color); // notification --cc-notification-list-bg: var(--color-222); --cc-notification-list-br: var(--color-222); --cc-notification-status-bg: var(--white); --cc-notification-date-text: var(--white); --cc-notification-logo-bg: var(--gray-0); --cc-notification-title-text: var(--gray-400); --cc-notification-title-active: var(--primary-color); --cc-notification-subtitle-text: var(--white); // toc --cc-toc-card-item-bg: var(--color-333); --cc-toc-card-item-hover: var(--primary-color); --cc-toc-card-item-br: var(--color-222); --cc-toc-card-item-bs: var(--rc-rgba-primary); --cc-toc-card-item-img-bg: var(--rc-dddddd); --cc-toc-card-item-title: var(--white); --cc-toc-card-item-title-hover: var(--color-333); --cc-toc-card-item-score-text: #3F19C3; //toc item --cc-chapter-br: var(--gray-100); --cc-chapter-bg: var(--color-222); --cc-chapter-title: var(--gray-800); --cc-chapter-item-bg: varvar(--white); --cc-chapter-item-bs: var(--rc-rgba-primary); --cc-chapter-item-br: var(--rc-rgba-primary); --cc-chapter-item-title-text: var(--primary-400); --cc-chapter-item-open-br: #e0e0e0; --cc-chapter-item-open-title-text: var(--primary-400); --cc-chapter-item-topic-title-text: var(--primary-400); --cc-chapter-item-topic-title-text-active: var(--primary-100); --cc-chapter-item-topic-title-text-hover: var(--gray-0); //toc curriculum --cc-curriculum-br-bg: var(--white); --cc-curriculum-bg: var(--white); --cc-curriculum-br: var(--primary-200); --cc-curriculum-active-bs: var(--rc-009D53); --cc-curriculum-title-text: #3A3A3A; //faq --cc-faq-yesbtn-text: var(--secondary-color);
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
--cc-faq-helpheader-text: var(--white); --cc-faq-helpheader-bg: var(--primary-color); --cc-faq-panel-title-text: var(--primary-color); --cc-faq-info-msg-bg: var(--primary-0); --cc-faq-panelheader-bg: var(--white); --cc-faq-panel-body-bg: var(--color-222); --cc-faq-panel-interact-bg: var(--color-222); --cc-faq-yesbtn-bg: inherit; --cc-faq-yesbtn-text: var(--color-000); //layout --cc-lb-card-hlist-title: var(--black); --cc-lb-card-grid-title: var(--white); --cc-badge-bg: var(--color-222); --cc-badge-text: var(--white); --cc-lb-card-stack-title: var(--primary-color); --cc-lb-card-stack-btn-bg: var(--primary-100); --cc-lb-card-stack-btn-text: var(--primary-color); --cc-listView-compt-title: var(--white); --cc-listView-compt-itemText: var(--white); --cc-carousel-title: var(--white); --cc-sbcard-data2-bg: var(--color-444); --cc-sbcard-data2-bg-active: var(--primary-300); //Joy theme header --sbt-header-bg: var(--color-333); --sbt-page-header-bg: var(--sbt-header-bg); --sbt-theme-green-selectbox: var(--gray-200); --sbt-language-dropdown-icon: var(--primary-color); --sbt-language-dropdown-bg: var(--black); --sbt-language-dropdown-item-hover-bg: var(--color-333); --sbt-language-dropdown-item-hover-text: var(--primary-color); --sbt-language-selectbox: var(--primary-color); --sbt-filter-bar-bg: var(--color-333); --sb-notification-bg: var(--black); --sb-footer-bg: var(--gray); --sbt-footer-info-links: var(--white); --sbt-footer-info-links-hover: var(--primary-color); --sbt-language-dropdown-item: var(--white); --sbt-filter-switcher-bg: var(--primary-color); --sbfaq-compt-bg: var(--color-222); //Modal --sb-modal-header-text: var(--black); --sb-modal-content-bg: var(--sbt-compt-bg); --sb-modal-actions-bg: var(--sbt-compt-bg); //landing page --sb-landing-page-bg: var(--black); --sb-landing-page-segments: var(--color-333); --sb-landing-page-cards: var(--black); --sb-landing-page-cards-desc: var(--white); --sb-landing-page-btn: var(--sb-landing-page-segments); //profile page --sb-profile-certificate-bg: var(--color-333); --sb-course-progress-status-label: var(--black); --sb-list-data: var(--gray-100); --sb-list-items: var(--white); --sb-profile-bg-c-4: var(--color-444); --sb-profile-page-basic-label-bg: var(--color-333); //black header bar --brand-header-tail-bg: var(--color-000); --brand-header-tail-text: var(--white); --primary-menu-link-active: #ff714a; // joy theme --themeflower-bg: #1a1a1a;
281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
//pagination --sb-pagination-bg: var(--color-333); --sb-pagination-item-bg: var(--sb-pagination-bg); --sb-pagination-item: var(--white); --sb-pagination-item-active: var(--gray-400); //filters --sb-prominent-filter-bg: var(--color-444); --sb-prominent-filter-title: var(--white); --sb-multiple-dropdown-border: var(--gray-100); --sb-multiple-dropdown-border-hover: var(--gray-200); --sb-multiple-dropdown-bg: var(--color-222); --sb-prominent-filter-field-color: var(--white); --sb-dropdown-menu-bg: var(--sb-multiple-dropdown-bg); --sb-dropdown-menu-item: var(--white); --sb-drodown-selection-active: var(--primary-300); --ui-seleted-label-bg: var(--color-222); --ui-seleted-label-bg-hover: var(--black); --state-medium-container-bg: var(--color-444); --sb-class-bar-bg: var(--color-333); --sb-dropdown-menu-text: var(--white); --ui-dropdown-menu-selected-item-bg: var(--color-444); --ui-dropdown-menu-selected-item: var(--white); --sb-filter-selected-dropdown-hover: var(--black); //slick slide card --sb-card-bg: var(--color-222); --sb-card-border: 0.0625rem solid transparent; --sb-card-text: var(--white); --sb-card-slick-arrows-bg: var(--color-444); --sb-profile-page-container: var(--color-333); //myGroups --sb-mygroups-bg: var(--color-444); --groups-content-header: var(--color-444); --kabab-menu-hover-bg: var(--black); --kabab-menu-dropdown-bg: var(--color-333); --kabab-menu-dropdown-item-active: var(--color-333); --sbfaq-compt-bg: var(--color-222); --visit-helpcenter-bg: var(--color-333); //SDK --sdk-end-page-title: var(--white); --sdk-end-page-replay-icon: var(--white); --sdk-end-page-replay-section-bg: var(--color-333); --sdk-end-page-replay-section-hover: var(--color-222); --sdk-end-page-title-span: var(--white); //QUML --quml-main-bg: var(--color-333); --quml-color-primary-contrast: var(--white); --quml-scoreboard-sub-title: #f2f2f2; --quml-mcq-title-txt: var(--white); --quml-option-card-bg: var(--color-222); --quml-btn-border: var(--color-222); --quml-option-selected-checkmark: var(--color-333); --quml-navigation-btns: var(--color-333); --quml-question-bg: var(--color-333); --quml-scoreboard-unattempted: var(--white); --quml-info-icon: var(--color-000) !important; --quml-close-icon: var(--white); --signup-panel-bg: var(--sbt-body-bg2); //explore-page --sb-explore-hr: #000; --sb-section-preference: var(--white); --slick-dots-active-color: var(--gray-200); --slick-dots-color: var(--gray-800);
351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
// lazy loading --lazyload-bg: var(--color-333); --grey-nuance-lighter: var(--color-333); --grey-nuance-darker: var(--color-111); --fade-grey: #f2f2f2; .mat-select-placeholder { color: rgba(255,255,255,.4); } .sbhelp_container__left { border-radius: 1.5rem; } .listView-compt__btn { button { background-color: var(--primary-color); color: var(--black); &:hover { background-color: var(--primary-300); } } } .sbt-filter-text { background: var(--color-222) !important; } .multi-select-container .list-border, sb-form .sb-textbox, sb-form .async-text { border-radius: 1.75rem; } .sbt-back-header .content-header { background-color: var(--color-444) !important; } .ui.selection.sbt-dropdown.dropdown.sbt-green { color: var(--white); } .profile-bg-c-4 { background: var(--color-222) !important; color: var(--white); } .content-preference__info { @media screen and (max-width: 992px) { background: var(--color-222) !important; color: var(--white); } } .ui.selection.sbt-dropdown.dropdown .menu>div .item:hover, .ui.selection.sbt-dropdown.dropdown .menu>div .item.active { background: var(--primary-color) !important; color: var(--black); } .notification-bell { box-shadow: var(--sbt-box-shadow-6px); } .sbaccordion__panel-header .icon-svg, .help-page__content .panel-heading .icon-svg { background: var(--color-222); }
421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490
.sbt-footer-title { color: var(--black) !important; } .add-adminrole__content { background: var(--sbt-compt-bg) !important; } .no-result-container { border-radius: 1.5rem; background: var(--sbt-compt-bg) !important; .no-result-text { color: var(--white); } } .cfe-multiselect-label { color:hsl(var(--gray-hs), 80%); } input.sb-form-control:-internal-autofill-selected { color-scheme: dark; box-shadow: 0 0 0 1000px var(--color-333) inset; } .profile-bg-c-4 { color: var(--white); } app-signup { .sb-checkbox.sb-checkbox-primary label:before { border-color: var(--primary-color); } } .sbt-theme-bg-img .st0 { fill: #999; } .faq-report-container h6 { color: #f2f2f2; } .faq-report-container sb-form .multi-select-section-app .multi-select-container { sb-caret-down svg { filter: none; } .list-border ul { color: var(--black); } } ::placeholder { color: var(--white) !important; opacity: 1 !important; /* Firefox */ } :-ms-input-placeholder, ::-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--white) !important; } .sb-btn-link-primary:hover, .sb-btn-link-primary:active, .sb-btn-link-primary.active { background-color: var(--primary-800);
491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560
} sb-pills-grid[ng-reflect-title='Browse by Categories'] { .sb-label-grid.sb-pills-grid .item { background-color: var(--color-222) !important; } } .sb-label-grid .item:hover { background: var(--color-333); } .sb-btn-round { background: var(--color-444); } .sbt-inside-page-container, app-my-groups .sbt-center-container, app-group-details .sbt-center-container, app-add-activity-content-types .sbt-center-container, app-activity-search .sbt-center-container, app-activity-details .sbt-center-container, app-add-member .sbt-center-container, .sbt-fluid-content-bg, .sbt-page-content-area { background: rgba(17, 17, 17, 1); } .sbt-page-content-area { background: none !important; } .terms-and-cond-form iframe, sb-caret-down svg, .sb-form-control:focus+i.icon-input-close, .sb-btn-nolayer img, .enter-qr-code-body img, .flex-ai-jc-center.add-member-content img, .sb-multi-rows img, .player-endpage__right-panel .user-options img { filter: invert(1); } .no-content-container .board-title, .no-content-container .sub-title, .ui.semi-circular.update.basic.label, .ui.semi-circular.basic.label { color: var(--gray-100) !important; } .sb-epub-reading-status, .sb-label-grid .item:hover, .sb-notification-modal .ui.modal, .flex-ai-jc-center.add-member-content { background: var(--color-333); } .sb-player-header__panel .player-pagenumber .page-count:focus~.focus-arrow, .batch-details__dropdown .selection.ui.dropdown { background: var(--color-222); } .ui.star.rating .icon { color: rgba(var(--rc-rgba-black), .5); } .sbchapter__item--active, .sbchapter__item--active:hover, .sbchapter__item:hover { border: calculateRem(1px) solid var(--cc-toc-card-item-br);
561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630
.icon-svg svg.icon.icon-svg--primary { fill: var(--color-000) !important; } } .sb-btn-disabled { color: var(--color-000) !important; &:hover { color: var(--color-333) !important; } } .sbt-welcome-theme-container .joy-modal-footer { background: var(--color-333) !important; } //avtar .avatar-content { background: var(--color-222) !important; border: calculateRem(1px) solid var(--color-222) !important; color: var(--white) !important; } .sb-search-box .sb-btn { background: var(--primary-color); color: var(--color-000); } .sb-modal .ui.modal>.close { color: var(--color-000); } .sbchapter__item .sbchapter__img--inprogress .icon-svg svg.icon.icon-svg--primary { fill: var(--color-000); } .sb-manage-section .sb-multi-rows:nth-child(odd) { background: var(--color-222) !important; border: none; } .sb-notification-container .sb-notification-header, .multi-select-container .list-border .placeholder { color: var(--white) !important; } .menu:hover::after, .sb-members-list-item .menu:hover::after { background: var(--kabab-menu-hover-bg) !important; } .sb-members-list-item .status { color: var(--black) !important; } .no-clicked, .yes-clicked { background: var(--color-222); } .help-page__content .panel .panel-info { .input-text { background: var(--black); color: var(--white); } .submit-button { color: var(--black);
631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700
} } app-add-member { .ui.container { .sb-bg-color-white { background: var(--color-333) !important; } } } .certificate-course-content { .sbchapter__item__score { color: var(--white); } } .sbchapter__item--active, .sbchapter__item--active:hover, .sbchapter__item:hover { .sbchapter__item__score { color: var(--black); } } .sb-notification-container .clear-text a { color: var(--primary-color) !important; } .sb-bg-color-white.sb-back-btn-panel { background: var(--color-444) !important; } .sb-bg-color-white.sb-modal-content { background-color: var(--color-333) !important; } //chatbot .lib-chat-panel { background: var(--color-222); .lib-chat-header { background: var(--color-000); color: var(--white); } .lib-chat-body, .messages-container { background-color: var(--color-333); } .chat-msg.recieved { background: var(--color-222); div { color: var(--white); } .btn-primary { background: var(--white); border: calculateRem(1px) solid var(--primary-color); color: var(--color-000); &:hover { background: var(--primary-color); } } } .msg-input {
701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770
background: var(--color-222); color: var(--white); } .chat-msg.sent { background: var(--primary-color) !important; color: var(--color-222) !important; } .btn-info { background: transparent !important; color: #fff !important; border: 0px solid red !important; &:hover { background: var(--primary-800) !important; color: var(--color-333) !important; } } .lib-chat-footer .send-btn img { filter: invert(1); } .lib-chat-footer { border-top: calculateRem(1px) solid var(--color-333); } } .chatbox-cover .chatbox { border: calculateRem(1px) solid var(--primary-color) !important; background-color: var(--primary-color) !important; } .chatbox-cover .chatboxText { background: var(--primary-color) !important; color: var(--color-000) !important; } .chatbox-cover .chatbox ::after { border-color: var(--primary-color) var(--primary-color) transparent transparent !important; } .overlay-sidebar { background: rgba(var(--sbt-sidemenu-overlay-bg), 0.8); } .logo.sbt-logo, .five.wide.column .d-flex.logo, .sb-onboard .brand-logo, .terms-modal-logo { padding: 0.5rem; border-radius: 0 0 1rem 1rem; background: var(--white); } .terms-modal-logo { max-width: 14rem; text-align: center; margin: 0 auto; } .add-user--horizontal { background-color: var(--primary-color); .add-user__label { color: var(--black) !important; } }
771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840
.user-profile-box, .sb-members-list-item, .sbt-welcome-theme-container .joy-modal-footer { background: var(--color-333); } .members-inline .sb-members-list-item, .sb-modal-dropdown-web ul li:hover, .sb-toc-child-item, .cc-player__btn-back { background: var(--color-222); } .sb-btn-outline-primary, .df-back-btn-container .sb-btn { img { filter: invert(1); } &:hover { img { filter: grayscale(1); } } } .add-user__icon img { filter: grayscale(1); } .ui.segment { background: var(--color-333); } .sb-members-list-item--medium .selected img { filter: invert(1); } .sb-form-control { color: var(--white) !important; background: var(--color-333) !important; &::placeholder { color: var(--white); } &::selection { color: var(--white) !important; } } .sb-field.ui.left.icon.input { i.icon { color: var(--white); } } .sb-rating.ui.star.rating .icon { color: var(--color-444); } .sb-checkbox label:before, .sb-radio-btn-checkbox label:before { background: var(--black); } .sb-checkbox input:checked~.box:after, .sb-checkbox input:checked~label:after { color: var(--black);
841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910
} .ui.selection.sbt-dropdown.dropdown.sbt-purple--lbg .sbt-dropdown-section .item:hover, .ui.selection.sbt-dropdown.dropdown.sbt-purple--lbg .sbt-dropdown-section .item.active { background: var(--primary-color) !important; color: var(--black); } .sb-modal-dropdown-web ul { background-color: var(--black); color: var(--white); border: calculateRem(2px) solid var(--black); box-shadow: none; } .sb-modal-dropdown-web .selected-option { background: var(--primary-color) !important; color: var(--black); } .sb-onboard sb-form .sb-textbox, sb-form .sb-textbox, sb-form .async-text { background: var(--color-333); border: calculateRem(.5px) solid var(--gray-400); color: var(--white); } .sb-onbrd-g-box__guest__item { box-shadow: 0 1.25rem 2.5rem -0.625rem #191818; background-color: var(--color-222); border: 0.125rem solid var(--color-222); &:hover, &.active { .title { color: var(--color-333); } } } .sb-members-list-item:hover, .sb-members-list-item.active { border-radius: 0rem; } .sb-group-container { background: var(--color-333) !important; } .batch-row .batch-name { color: var(--gray-800); } .ui.styled.accordion .accordion .active.title, .ui.styled.accordion .accordion .title:hover, .ui.styled.accordion .active.title, .ui.styled.accordion .title:hover { color: rgba(255, 255, 255, .75); } .sb-color-gray-400 { color: var(--gray-800) !important; } .notification-bell { box-shadow: none; }
911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980
.back-btn-container.cc-player__btn-back { background: var(--sbt-compt-bg) !important; } .cc-player__content-header { background: var(--color-444); } .content-video__player__details { background: transparent !important; } .content-metadeta, .ui.styled.accordion, .ui.styled.accordion .accordion, .sb-accordion-content.sb-bg-color-white, .sb-groups-members-card, .sb-toc-credits .sbaccordion__panel-header, .sb-toc-credits .sbaccordion__panel-content { background: var(--color-333) !important; } .sb-back-header { .sb-back-btn-panel { background: var(--color-222) !important; } } .training-relevant .sb-color-gray-400 { color: var(--white) !important; } .sbchapter__item.disabled-toc-card { background-color: var(--gray-200) !important; .sbchapter__item__title { opacity: 1; } .sbchapter__item__score { color: var(--black) !important; } } .cc-player { .ui.info.message { background-color: var(--color-222) !important; color: var(--primary-color) !important; box-shadow: none; } } //buttons .sb-btn-primary, .sb-btn-link-primary, .sb-btn-secondary { &:hover, &:active, &.active { color: var(--black); } } .sb-btn-primary { .icon-svg--white { fill: var(--black); }
981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050
} .sb-btn-outline-primary, .sb-btn-outline-secondary { background-color: var(--sbt-filter-bar-bg); &:hover, &:active, &.active { color: var(--black); } } .sb-btn-outline-primary { &:hover, &:active, &.active { background-color: var(--primary-800); } } .sb-btn-outline-secondary { &:hover, &:active, &.active { background-color: var(--secondary-400); } } .sb-btn-link-gray { &:hover, &:active, &.active { background-color: var(--primary-color); color: var(--black); } } .sb-btn-link-primary, .sb-btn-link-gray { &:hover, &:active, &.active { .icon-svg--primary { fill: var(--black); } } } .batch-deatils__button .sb-btn-disabled { color: var(--color-444); &:hover { color: var(--color-444) !important; } } .sb-btn-square, .content-video__player__tools .sb-btn-square { color: var(--white); &:hover { color: var(--black); } }
1051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120
app-faq .sb-btn-round.sb-btn-link-primary { background-color: inherit !important; &:hover, &:active, &.active { background-color: var(--primary-color) !important; color: var(--black); } } .ui.styled.accordion .title:hover { color: var(--primary-color); } .sb-toc-child-item { background: var(--cc-chapter-bg); } .help-page__header.sb-bg-color-white { background: var(--cc-accordion-panel-header-bg) !important; } .help-page__content .panel { .panel-heading, .panel-interact { background: var(--cc-accordion-panel-header-bg); } } .sb-toc-child-item .toc-child-item, .sb-toc-child-item .child-content-padding, .side-toc-content.chapter-box .toc-child-item, .side-toc-content.chapter-box .child-content-padding { background: var(--color-222) !important; } .cc-player__list { background-color: var(--color-222); } .sb-course-details .sb-course-details__info .sb-bg-color-white { background: var(--color-333) !important; } .sb-course-details .certified-course__certificate { background-color: var(--color-222) !important; } .sb-bg-color-white.certified-course__progress { background: var(--sbt-compt-bg) !important; } // Pdf Player sunbird-pdf-player .sunbird-pdf-palyer-container, sunbird-epub-player .sunbird-epub-container { .sb-pdf-main-header .sb-player-header { background: var(--sbt-compt-bg); z-index: 1; position: relative; .player-icon { background: var(--black) !important; } } } // player header
1121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190
sb-player-header .sb-player-header { background: var(--sbt-compt-bg) !important; z-index: 1; position: relative; .icon_rotate { img { filter: invert(1); } } .navigation-arrows { background-color: var(--white); border-color: unset !important; } .paginate.left, .paginate { i { background-color: var(--black); } } .paginate.left:hover i { background: var(--black); } } // Hamburger menu for pdf, epub, player etc sb-player-side-menu-icon { #overlay-button span { background: var(--white) !important; &:before, &:after { background: var(--white) !important; } } input[type=checkbox]:checked~#overlay-button { span, &:hover span { background: 0 0 !important; } span:before { background: var(--black) !important; } &:hover span:before { background: var(--white) !important; } span:after { background: var(--black) !important; } &:hover span:after { background: var(--white) !important; } } } .navBlock { background: var(--color-222) !important; ul li { background: var(--color-222) !important;
1191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260
color: var(--white) !important; .player-icon { background: var(--white) !important; } &:hover { color: var(--black) !important; background: var(--gray-0) !important; .player-icon { background: var(--black) !important; } } } } .navBlock .player-nav-unit { color: var(--black) !important; } .sb-player-header__panel .player-zoom-btns__zoombtn { color: var(--white) !important; &:hover { color: var(--black) !important; } } .sb-pdf-reading-status { color: var(--black) !important; background: var(--primary-color) !important; span { background: var(--black) !important; } } .file-download__popup { background: var(--color-444) !important; } .file-download .close-btn .close-icon { &:after, &:before { background: var(--white) !important; } &[data-animation=showShadow]:not(.showShadow):hover { box-shadow: 0 0 0 0.25rem var(--white) inset !important; } } .file-download__text, .file-download__size { color: var(--white) !important; } .file-download__overlay { background: rgba(var(--rc-rgba-black), .8); } sui-multi-select.ui.selection.dropdown, sui-select.ui.selection.dropdown { background: var(--sb-dropdown-menu-bg) !important; } .ui.selection.dropdown .menu>.item { color: var(--ui-dropdown-menu-selected-item);
1261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330
} .ui.selection.dropdown .menu>.item:hover { background: var(--primary-color); color: var(--black); } .ui.multiple.dropdown .label { background: var(--color-222); color: var(--white); } .ui.dimmer { background-color: rgba(var(--rc-rgba-black), 0.5); } .training-modules__title .sb-btn.sb-btn-outline-primary, .forum-btn { img { filter: invert(1); } &:hover { img { filter: unset; } } } .content-header__buttons { .sb-btn.sb-btn-normal.sb-btn-outline-primary { &:hover { img.mr-4.pt-2 { filter: unset; } } img.mr-4.pt-2 { filter: invert(1); } } } app-loader { .ui.icon.message { background: var(--color-444); } .notched.circle.loading.icon { color: var(--white) !important; } .content { .header, p { color: var(--white) !important; } } } .course-complete-para, .content-metadeta__title { color: var(--white) !important; } .sb-onboard__container { background: var(--color-333); }
1331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400
.help-page__header.sb-bg-color-white, .sbt-header-menu-bar { background: var(--color-222) !important; } .content-metadeta__title { color: var(--white); } .sb-md-container { background: var(--color-333) !important; } .sbaccordion__panel-content .heading, .data-labels, .ui.selection.dropdown .menu>.message { color: var(--white); } sb-card-hover.card-hover .action-item { .sb-btn-grow { color: var(--black) !important; .icon-svg svg.icon { filter: invert(1) !important; } } } .add-adminrole__content { background: var(--sbt-compt-bg) !important; } .no-result-container { background: var(--sbt-compt-bg) !important; .no-result-text { color: var(--white); } } // Data tables table.dataTable thead th, .sb-table tbody td { background-color: var(--gray); color: var(--white); } .dataTables_wrapper { label { color: var(--white); } .dataTables_length select { color: var(--white); background-color: var(--gray); } .dataTables_info { color: var(--white); } .dataTables_paginate .paginate_button { color: var(--white) !important; &.current { color: var(--white) !important; background-color: #585858;
14011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462
background: linear-gradient(to bottom, #585858 0%, #111 100%); } } } // Date picker .md-drppicker { background: var(--color-444); color: var(--white); .ranges ul li button { &[disabled] { opacity: .6; } color: var(--white); } .calendar-table { background: var(--color-444); border-color: var(--color-444); } td.available.prev, th.available.prev, td.available.next, th.available.next { filter: invert(1); } .btn { color: var(--gray); } } table.dataTable.no-footer { background: var(--primary); border: 1px solid var(--black); thead th { background-color: var(--primary) !important; color: var(--black); } tbody tr { background-color: var(--color-444); color: var(--white); &:nth-child(odd) { background-color: var(--color-333) !important; } } } .field>label, .inline.fields>label, .ui.modal .ui.radio.checkbox .box, .ui.radio.checkbox label { color: var(--black); } }