diff --git a/package.json b/package.json
index 78dba6d7d6efa204d9d04ebd47f42de1a4c04918..7108e69039a9cd36a85396bfc869939669abfc57 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@project-sunbird/sb-themes",
- "version": "0.0.84",
+ "version": "0.0.85",
"description": "Sunbird project application themes",
"main": "index.js",
"scripts": {
@@ -22,5 +22,7 @@
},
"homepage": "https://github.com/Sunbird-Ed/sb-themes.git#readme",
"author": "",
- "license": "MIT"
+ "license": "MIT",
+ "dependencies": {
+ }
}
diff --git a/themes/portal/_accessibility.scss b/themes/portal/_accessibility.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b8f43b45482c0df5a85353da73836333451e1325
--- /dev/null
+++ b/themes/portal/_accessibility.scss
@@ -0,0 +1,361 @@
+//@use './../../node_modules/@project-sunbird/sb-styles/assets/mixins/mixins' as *;
+@function calculateRem($size) {
+ $remSize: $size / 16px;
+ @return #{$remSize}rem;
+}
+html[accessible-theme="accessible"][layout='joy'][data-mode="darkmode"] {
+ --accessible-green: #004D26;
+
+ .new-layout-footer .sbt-container .sbt-footer-download-app .sbt-footer-bg .sbt-footer-title {
+ color: var(--yellow) !important
+ }
+
+ .sb-pageSection .sb-pageSection-header .sb-pageSection-sentenceCase .sb-pageSection-count,
+ .sb-pageSection .sb-pageSection-header .sb-cls-btn,
+ .sb-pageSection .sb-pageSection-header button.sb-btn-secondary,
+ .sb-pageSection .sb-pageSection-header .sb-pageSection-sentenceCase .sb-pageSection-count,
+ .sb-pageSection .sb-pageSection-header .sb-cls-btn,
+ .sb-pageSection .sb-pageSection-header button.sb-btn-secondary {
+ background-color: var(--black) !important;
+ color: var(--white);
+ }
+
+ sb-accordion-body .sbaccordion__panel-content .credits-section .title,
+ .sb-pageSection-content button.slick-next.slick-arrow,
+ .sb-pageSection-content button.slick-prev.slick-arrow.slick-disabled {
+ color: #c2c2c2 !important;
+ }
+
+ .module-complete-content label.fnormal {
+ color: var(--accessible-green) !important;
+ }
+
+ .sbt-class-bar .sb-slider-pills-container .sb-pills-container .pill.active {
+ background-color: var(--primary-color) !important;
+ color: var(--black) !important;
+ }
+
+ .sbt-class-bar .sb-slider-pills-container .sb-pills-container .pill:hover,
+ .sbt-mygroups-details .sb--card__moreinfo .sb--card__type,
+ .sb-pageSection-title.sb-pageSection-title-light,
+ .nested-group-container .fxsmall,
+ .nested-group-container .fsmall,
+ .nested-group-container .member-name .fnormal,
+ .cursor-pointer .download-text {
+ color: var(--black) !important;
+ }
+
+ .sbt-class-bar .sb-slider-pills-container .sb-pills-container .pill,
+ .sb-accordion-content .licenseTag,
+ .content-metadeta__title,
+ .content-metadeta__title,
+ .content-metadeta__text {
+ color: var(--white) !important;
+ }
+
+ .sbt-welcome-theme-container .sb-color-warning,
+ .user-profile-box span.sb-color-warning,
+ .sb-modal-content .sb-form span.sb-color-warning {
+ color: #FFADAD !important;
+ }
+
+ .sb-modal-actions {
+ a.sb-btn.sb-btn-normal.sb-btn-primary {
+ color: var(--black);
+ }
+ }
+
+ .user-profile-box .orange.text,
+ .user-profile-box .orange-border {
+ color: #FFADB6;
+ }
+
+ .help-page__content .panel .panel-collapse .panel-interact .yes-clicked {
+ color: var(--secondary-color);
+ }
+}
+
+html[accessible-theme="accessible"] {
+
+ --accessible-green: #004D26;
+ --sbt-pill-text: #000 !important;
+ --sbt-pill-bg-active: #004594 !important;
+
+ .sbt-class-bar .sb-slider-pills-container .sb-pills-container .pill {
+ color: var(--sbt-pill-text) !important
+ }
+
+ .sbt-class-bar .sb-slider-pills-container .sb-pills-container .pill.active {
+ background: var(--sbt-pill-bg-active) !important;
+ }
+
+ .sbt-class-bar .sb-slider-pills-container .sb-pills-container .pill:hover {
+ background-color: var(--gray-100) !important;
+ color: var(--black) !important;
+ }
+
+ .update.basic.label {
+ color: #525252 !important;
+ }
+
+ button.no-text-transform {
+ color: #000000;
+ }
+
+ .certified-course__btn>.textbook__addbtn {
+ color: #1a1a1a;
+ }
+
+ .sb-btn-link-gray {
+ color: #4b4b4b;
+ }
+
+
+ .content-metadeta__title,
+ .content-metadeta__text {
+ color: #4a4a4a;
+ }
+
+ .sbaccordion__panel-content .sb-meta-data .title,
+ .title.ng-star-inserted {
+ color: var(--primary-color) !important;
+ }
+
+ .sbt-welcome-theme-container {
+ .sb-color-warning {
+ color: #8d3719 !important;
+ }
+ }
+
+ .overlay-sidebar__menu {
+ .group__type {
+ color: #0c0c0c !important;
+ }
+ }
+
+ .signup-background {
+ .year-birth {
+ .sb-color-red {
+ color: #952833 !important;
+ }
+ }
+
+ .sb-requirement-field span {
+ color: #9d1b1b !important;
+ }
+
+ .infotext {
+ color: var(--red) !important;
+ }
+
+ button.sb-btn.sb-btn-normal.w-100.sb-btn-disabled {
+ color: #383838 !important;
+ }
+ }
+
+ .sbt-mygroups-details {
+ .sb--card__moreinfo {
+ .sb--card__org {
+ color: #545454 !important;
+ }
+ }
+ }
+
+
+ .sb-library-cards {
+ .sb-members-list-item--horizontal {
+ .status {
+ color: #000 !important;
+ }
+ }
+ }
+
+ .sb-modal-content {
+ .sb-form {
+ span.sb-color-warning {
+ color: #813317 !important;
+ }
+ }
+ }
+
+ .profile-bg-c-3 {
+ .update {
+ color: #595959 !important;
+ }
+ }
+
+ .sbt-sb-g {
+ .header {
+ button.sb-btn.sb-btn-xs.sb-btn-secondary.ml-auto {
+ color: #1a1a1a !important;
+ }
+ }
+ }
+
+ .sb-pageSection {
+ .sb-pageSection-header {
+ .sb-pageSection-sentenceCase {
+ .sb-pageSection-count {
+ background-color: #9a3713 !important;
+ }
+ }
+
+ button.sb-btn-secondary,
+ .sb-cls-btn {
+ color: var(--white);
+ }
+ }
+ }
+
+ .select-template-content {
+ .no-template-text {
+ color: #4a4a4a !important;
+
+ b {
+ color: #474747 !important;
+ }
+ }
+
+ .certificate-content {
+ .sb-field {
+ .asterik {
+ color: #a30010 !important;
+ }
+
+ .sb-browse-btn {
+ color: #395470 !important;
+ }
+ }
+ }
+
+ .re-issue-content {
+ .certificate-id-info {
+ color: #595959 !important;
+ }
+ }
+
+ .three.wide.column.pl-0.pr-0 {
+ .sidebar.py-24 {
+ color: hsl(0deg 0% 35%);
+ }
+ }
+ }
+
+ .cc-player__content-header {
+ .certified-course {
+ .sb-btn-secondary {
+ color: #1a1a1a !important;
+ }
+ }
+ }
+
+ .certificate-container {
+ .certificate-content {
+ .sb-field {
+ .asterik {
+ color: #962934 !important;
+ }
+
+ .sb-browse-btn {
+ color: #39546f !important;
+ }
+ }
+ }
+ }
+
+ .re-issue-content .certificate-id-info,
+ .three.wide.column.pl-0.pr-0 .sidebar.py-24,
+ .progress-content #dashoardFiltersHolder .current-batch-list .update-text,
+ .detailed-report .administrator-text {
+ color: #595959 !important;
+ }
+
+ .datatable-body {
+ .datatable-body .datatable-body-row .datatable-body-cell {
+ .success-label {
+ color: #006645 !important;
+ }
+ }
+ }
+
+ app-dashboard-sidebar {
+ .sidebar a {
+ color: #595959 !important;
+ }
+
+ .sidebar a.active {
+ color: var(--primary-color);
+ }
+ }
+
+ table.sb-table-striped {
+ .sb-table .sb-media .media-description {
+ color: #525252 !important;
+ }
+ }
+
+ .report__header {
+ .content-header__title {
+ span.label-success {
+ color: #005700 !important;
+ }
+ }
+ }
+
+ app-in-app-notification {
+ .notification-count {
+ color: #1f1f1f !important;
+ }
+ }
+
+ .sb-pageSection .sb-pageSection-header .sb-cls-btn,
+ .sb-pageSection .sb-pageSection-header button.sb-btn-secondary {
+ color: var(--black) !important;
+ }
+
+ .sb-modal-actions {
+ a.sb-btn.sb-btn-normal.sb-btn-primary {
+ color: var(--white);
+ }
+ }
+
+ .multi-select-section-app .multi-select-container .placeholder,
+ .licenseTag {
+ color: var(--gray-400) !important;
+ }
+
+ .user-profile-box {
+ span.sb-color-warning {
+ color: #B30000 !important;
+ }
+ }
+
+ .add-user--horizontal .add-user__label.sb-color-secondary,
+ .module-complete-content label.fnormal {
+ color: var(--accessible-green) !important;
+ }
+
+ .ui.form .required.field>label,
+ .sb-requirement-field {
+ color: #51514D;
+ }
+
+ .user-profile-box .orange-border,
+ .user-profile-box .orange.text {
+ border-color: #B30012;
+ }
+
+ .panel-interact .yes-btn,
+ .help-page__content .panel .panel-collapse .panel-interact .yes-clicked {
+ color: #005C2B !important;
+ }
+
+ .panel-info textarea::-webkit-input-placeholder,
+ .panel-info textarea:-moz-placeholder,
+ .panel-info textarea::-moz-placeholder,
+ .panel-info textarea:-ms-input-placeholder,
+ .panel-info textarea::placeholder {
+ color: #595959;
+ }
+
+}
\ No newline at end of file
diff --git a/themes/portal/_default.scss b/themes/portal/_default.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2caad14c5ad540f4334fa238247ee5d012dd98fa
--- /dev/null
+++ b/themes/portal/_default.scss
@@ -0,0 +1,1593 @@
+
+//@use './../../node_modules/@project-sunbird/sb-styles/assets/mixins/mixins' as *;
+@function calculateRem($size) {
+ $remSize: $size / 16px;
+ @return #{$remSize}rem;
+}
+html[data-theme='default'] {
+ --primary-theme: var(--primary-color);
+ --sbt-body-bg: #E5EDF5;
+ --sbt-body-bg2: #f3f3e5;
+ --sbt-header-bg: var(--primary-300); //var(--primary-300);
+ --sbt-filter-bar-bg: var(--white);
+ --sbt-box-shadow-black: rgba(0, 0, 0, 0.1);
+
+ --sbt-footer-bg: #ffffff;
+ --sbt-theme-purple-selectbox: #6841B3;
+ --sbt-theme-green-selectbox: #008840;
+ --sbt-theme-blue-selectbox: #0531FF;
+ --sbt-theme-light-blue-selectbox: #171e22;
+ --sbt-theme-purple-selectbox-lbg: #F2EEFF;
+ --sbt-theme-green-selectbox-lbg: #E0F5EA;
+ --sbt-theme-blue-selectbox-lbg: #E5EDF5;
+ --sbt-theme-light-blue-selectbox-lbg: #E9F5FF;
+ --sbt-pill-hs: 212, 100%;
+ --sbt-pill-bg: var(--white);
+ --sbt-pill-bg-active: hsl(var(--sbt-pill-hs), 50%); // #0076FE
+ --sbt-pill-text: #000000;
+ --sbt-pill-text-hover: #ffffff;
+ --sbt-compt-bg: #E9E8D9;
+
+ --sb-container-bg: var(--white);
+
+ --sbt-badge-bg: var(--rc-d4d3d3);
+
+ --sbfield-label-text: var(--gray-800);
+ --sbt-sidemenu-overlay-bg: 0, 0, 0;
+ --sbt-sidemenu-bg: var(--white);
+ --sidebar-profil-header-bg: var(--primary-100);
+ --sidebar-li-hover-bg: var(--primary-100);
+ --sb-linkmenu-bg: var(--white);
+ --sb-linkmenu-text: var(--primary-400);
+ --sb-linkmenu-active-text: var(--primary-400);
+ --sb-linkmenu-text-hover: var(--white);
+ --sb-linkmenu-bg-hover: var(--primary-color);
+ --sb-linkmenu-icon-bg-hover: var(--white);
+ --sb-btn-default-color: var(--white);
+ --sb-sidebar-menu-bg-active: var(--primary-0);
+ --sb-sidebar-menu-border-bg: var(--primary-color);
+ --sb-sidebar-menu-text: var(--primary-color);
+ --sb-graph-section-bg: var(--white);
+
+ //header
+ --sb-menu-bg: #E5EDF5;
+ --sb-menu-item: var(--gray-800);
+ --sb-menu-item-hover: var(--primary-color);
+ --sb-header-bg: var(--primary-400);
+ --sb-notification-bg: var(--white);
+ --sb-header-qrcode-btn-bg: var(--white);
+ --sb-header-qrcode-btn: var(--primary-color);
+ --sb-header-qrcode-btn-border: var(--primary-300);
+ --sb-search-input-bg: var(--white);
+ --sb-search-input-text: var(--gray-200);
+ --sb-search-btn-bg: var(--primary-100);
+ --sb-search-btn-text: var(--primary-400);
+ --sb-qrcode-divider: rgba(var(--rc-rgba-primary-300), 0.34);
+ --sb-language-dropdown-bg: var(--white);
+ --sb-language-dropdown-item: var(--black);
+ --sb-language-dropdown-item-active: rgba(0, 0, 0, .03);
+ --sb-search-auto-select: var(--white);
+ --sb-footer-bg: var(--primary-color);
+ --sbt-green-bg: var(--white);
+ --sbt-filter-switcher-bg: var(--primary-theme);
+ --bell-icon: var(--primary-color);
+ --sbt-language-dropdown-bg: var(--white);
+ --sb-footer-bg: var(--primary-color);
+ --filter-pref-text: var(--gray-800);
+ --sbt-class-bar-label-text: var(--gray-800);
+
+ //landing page
+ --sb-landing-page-bg: var(--white);
+ --sb-landing-page-segments: var(--sb-landing-page-bg);
+ --sb-landing-page-cards: var(--white);
+ --sb-landing-page-cards-desc: rgba(0, 0, 0, .68);
+ --sb-landing-page-btn: transparent;
+
+ //profile page
+ --sb-profile-certificate-bg: var(--white);
+ --sb-course-progress-status-label: #333333;
+ --sb-list-data: var(--gray-400);
+ --sb-list-items: #333333;
+ --sb-profile-bg-c-4: var(--primary-0);
+ --sb-profile-page-basic-label-bg: var(--white);
+
+ //pagination
+ --sb-pagination-bg: var(--white);
+ --sb-pagination-item-bg: var(--sb-pagination-bg);
+ --sb-pagination-item: var(--gray-400);
+ --sb-pagination-item-active: var(--sb-pagination-item);
+
+ //filters
+ --sb-prominent-filter-bg: var(--white);
+ --sb-prominent-filter-title: rgba(0, 0, 0, .87);
+ --sb-multiple-dropdown-border: var(--gray-200);
+ --sb-multiple-dropdown-border-hover: rgba(34, 36, 38, .35);
+ --sb-multiple-dropdown-bg: transparent;
+ --sb-prominent-filter-field-color: var(--rc-4a4a4a);
+ --sb-dropdown-menu-bg: var(--white);
+ --sb-dropdown-menu-item: var(--rc-4a4a4a);
+ --sb-drodown-selection-active: #96c8da;
+ --ui-seleted-label-bg: #e8e8e8;
+ --ui-seleted-label-bg-hover: #e0e0e0;
+ --state-medium-container-bg: var(--white);
+ --sb-class-bar-bg: var(--gray-0);
+ --sb-dropdown-menu-text: rgba(0, 0, 0, .8);
+ --ui-dropdown-menu-selected-item-bg: rgba(0, 0, 0, .03);
+ --ui-dropdown-menu-selected-item: rgba(0, 0, 0, .95);
+ --sb-filter-selected-dropdown-hover: var(--primary-color);
+ //slick slide card
+ --sb-card-bg: var(--white);
+ --sb-card-border: 0.0625rem solid var(--rc-dedede);
+ --sb-card-text: var(--gray-400);
+ --sb-card-slick-arrows-bg: var(--white);
+ --sb-profile-page-container: var(--white);
+ //myGroups
+ --sb-mygroups-bg: var(--white);
+ --groups-content-header: var(--rc-FAFAFA);
+ --kabab-menu-hover-bg: var(--gray-0);
+ --kabab-menu-dropdown-bg: var(--white);
+ --kabab-menu-dropdown-item-active: var(--primary-100);
+
+ //black header bar
+ --brand-header-tail-bg: #000000;
+ --brand-header-tail-text: #ffffff;
+ --primary-menu-link-active: #ff714a;
+
+ // Modal
+ --sb-modal-header-text: var(--white);
+ --sb-modal-content-bg: var(--white);
+ --sb-modal-actions-bg: var(--white);
+
+ // lazy loading
+ --lazyload-bg: #f6f7f8;
+ --grey-nuance-lighter: #eeeeee;
+ --grey-nuance-darker: #dddddd;
+ --fade-grey: #e8e8e8;
+
+ //cc
+ --cc-sbcard-type-bg: var(--black);
+ --cc-sbcard-type-br: var(--black);
+ --cc-sbcard-org-text: var(--black);
+
+ //joy theme
+ --themeflower-bg: #ffd92a;
+ --visit-helpcenter-bg: var(--white);
+ --sbfaq-compt-bg: #fff;
+
+ --signup-panel-bg: var(--white);
+
+ .sb-single-resource {
+ .content-video__player {
+ background: var(--white);
+ }
+ }
+
+ ::placeholder {
+ color: #333333 !important;
+ opacity: 1 !important;
+ /* Firefox */
+ }
+
+ :-ms-input-placeholder,
+ ::-ms-input-placeholder {
+ /* Internet Explorer 10-11 */
+ color: #333333 !important;
+ }
+
+ .navBlock .pdf-nav-unit {
+ color: var(--white) !important;
+ }
+
+ .profile-bg-c-3 .school-id-section {
+ color: var(--black);
+ }
+
+ .user-profile-box .orange.text {
+ color: var(--red-100);
+ }
+
+ .orange-border {
+ border-color: var(--red-100);
+ }
+
+ .sb-modal-dropdown-web ul li:hover {
+ background-color: #e6e1f9;
+ }
+}
+
+html[data-mode='darkmode'][layout='base'] {
+ // lazy loading
+ --lazyload-bg: #333333;
+ --grey-nuance-lighter: #333333;
+ --grey-nuance-darker: #111;
+ --fade-grey: #f2f2f2;
+
+ .sb-back-btn-panel.sb-bg-color-white {
+ background-color: var(--black) !important;
+ }
+
+ .sbt-back-header .content-header {
+ background-color: #444 !important;
+ }
+
+ .sb-bg-color-white {
+ background-color: #333 !important;
+ }
+}
+
+html[data-theme='default'][data-mode='darkmode'] {
+ --primary-theme: #ffd92a;
+ --primary-color: #ffd92a;
+ --primary-0: #fffcee;
+ --primary-100: #fff8db; // default button bg
+ --primary-200: #fffd2a; // divider
+ --primary-250: #f1f1c7;
+ --primary-300: #ffeb2a; // outline, focus fields
+ --primary-400: var(--primary-color); // button bg, heading, table titles, links, toggles
+ --primary-600: #ffc72a; // on press
+ --primary-800: #ffb62a; // hover
+ --secondary-200: #ffd92a;
+ --secondary-color: #ffd92a;
+ --gray-800: var(--white);
+ --sbt-primary-bg: var(--primary-theme);
+ --sbt-border-chapter: #E4E8EE;
+ --sbt-body-bg: #000000;
+ --sbt-body-bg2: #333 !important;
+ --sbt-header-bg: #333333;
+ --sbt-filter-bar-bg: #333;
+ --sb-container-bg: var(--black);
+ --sbt-footer-bg: #333333;
+ --sbt-box-shadow-black: rgba(0, 0, 0, 0.2);
+
+ --sbt-theme-purple-selectbox: #ffffff;
+ --sbt-theme-green-selectbox: #ffffff;
+ --sbt-theme-blue-selectbox: #ffffff;
+ --sbt-theme-light-blue-selectbox: #ffffff;
+ --sbt-theme-purple-selectbox-lbg: #222222;
+ --sbt-theme-green-selectbox-lbg: #222222;
+ --sbt-theme-blue-selectbox-lbg: #222222;
+ --sbt-theme-light-blue-selectbox-lbg: #222222;
+ --sbt-pill-hs: 212, 100%;
+ --sbt-pill-bg: #5c5c5c;
+ --sbt-pill-bg-active: #ffd92a; // #0076FE
+ --sbt-pill-text: #ffffff;
+ --sbt-pill-text-hover: #222222;
+ --sbt-compt-bg: #333333;
+
+ --sbfield-label-text: var(--gray-100);
+
+ // new styles
+ --sbt-badge-bg: #222222;
+ --sbt-sidemenu-overlay-bg: 34, 34, 34;
+ --sbt-sidemenu-bg: #333333;
+ --sidebar-profil-header-bg: #222222;
+ --sidebar-li-hover-bg: #222222;
+ --sb-linkmenu-bg: #333;
+ --sb-linkmenu-text: #ffffff;
+ --sb-linkmenu-active-text: var(--primary-color);
+ --sb-linkmenu-text-hover: #222222;
+ --sb-linkmenu-bg-hover: var(--primary-color);
+ --sb-linkmenu-icon-bg-hover: #222222;
+ --sb-btn-default-color: var(--black);
+
+ //header
+ --sb-menu-bg: var(--black);
+ --sb-menu-item: var(--gray-0);
+ --sb-menu-item-hover: var(--primary-color);
+ --sb-header-bg: #333333;
+ --sb-notification-bg: var(--gray);
+ --bell-icon: var(--white);
+ --sb-header-qrcode-btn-bg: #333333;
+ --sb-header-qrcode-btn: var(--primary-color);
+ --sb-header-qrcode-btn-border: #ffeb2a;
+ --sb-search-input-bg: #222222;
+ --sb-search-input-text: var(--gray-200);
+ --sb-search-btn-bg: #efebd8;
+ --sb-search-btn-text: #000000;
+ --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);
+ --filter-pref-text: var(--gray-100);
+ --sbt-class-bar-label-text: var(--gray-100);
+ --sbt-green-bg: #222222;
+ --sbt-theme-green-selectbox: #ffffff;
+ --sb-search-input-text: #ffffff;
+ --sb-search-input-bg: #222222;
+ --sb-sidebar-menu-bg-active: var(--sbt-filter-bar-bg);
+ --sb-sidebar-menu-border-bg: var(--primary-color);
+ --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: #222222;
+ --cc-accordion-panel-header-bg: #333333;
+ --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);
+ --sb-pill-bg: #222222;
+ --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: #333333;
+ --cc-grade-pill-text: var(--white);
+ --cc-grade-pill-bg-hover: var(--primary-color);
+ --cc-grade-pill-text-hover: #222222;
+ --cc-grade-pill-svg-fill: #222222;
+ --cc-sbcard-data1-2-text: var(--primary-color);
+ --cc-sbcard-bg: #333;
+ --cc-sbcard-img-container-bg: var(--gray-100);
+ --cc-sbcard-title: #ffffff;
+ --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: #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: #444444;
+ --cc-sbcard-data1-bg-active: #ffeb2a;
+ --sbt-pill-hs: 212, 100%;
+ --cc-sbcard-data2-bg: #444444;
+ --cc-sbcard-data2-bg-active: #ffeb2a;
+ --cc-sbcard-data0-bg: #444444;
+ --cc-sbcard-data0-bg-active: #ffeb2a;
+ --cc-sbcard-type-bg: var(--black);
+ --cc-sbcard-type-text: var(--white);
+ --sbt-filter-switcher-bg: var(--primary-theme);
+
+ //landing page
+ --sb-landing-page-bg: var(--black);
+ --sb-landing-page-segments: #333333;
+ --sb-landing-page-cards: var(--sb-landing-page-bg);
+ --sb-landing-page-cards-desc: var(--white);
+ --sb-landing-page-btn: var(--sb-landing-page-segments);
+
+ //profile page
+ --sb-profile-certificate-bg: #333333;
+ --sb-course-progress-status-label: var(--black);
+ --sb-list-data: var(--gray-100);
+ --sb-list-items: var(--white);
+ --sb-profile-bg-c-4: #444;
+ --sb-profile-page-basic-label-bg: #333333;
+
+ //black header bar
+ --brand-header-tail-bg: #000000;
+ --brand-header-tail-text: #ffffff;
+ --primary-menu-link-active: #ff714a;
+
+ // joy theme
+ --themeflower-bg: #1a1a1a;
+ //pagination
+ --sb-pagination-bg: #333333;
+ --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: #444444;
+ --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: #222222;
+ --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: #222222;
+ --ui-seleted-label-bg-hover: var(--black);
+ --state-medium-container-bg: #444444;
+ --sb-class-bar-bg: #333333;
+ --sb-dropdown-menu-text: var(--white);
+ --ui-dropdown-menu-selected-item-bg: #444444;
+ --ui-dropdown-menu-selected-item: var(--white);
+ --sb-filter-selected-dropdown-hover: var(--black);
+
+ //slick slide card
+ --sb-card-bg: #222222;
+ --sb-card-border: 0.0625rem solid transparent;
+ --sb-card-text: var(--white);
+ --sb-card-slick-arrows-bg: #444444;
+ --sb-profile-page-container: #333333;
+
+ //myGroups
+ --sb-mygroups-bg: #444444;
+ --groups-content-header: #444444;
+ --kabab-menu-hover-bg: var(--black);
+ --kabab-menu-dropdown-bg: #222222;
+ --kabab-menu-dropdown-item-active: #333333;
+
+ --sbfaq-compt-bg: #222;
+ --cc-listView-compt-title: #fff;
+ --cc-listView-compt-itemText: #fff;
+ --cc-carousel-title: #fff;
+ --cc-faq-yesbtn-bg: var(--primary-color) !important;
+ --cc-faq-yesbtn-text: #000 !important;
+ --cc-faq-nobtn-bg: #222;
+ --cc-faq-nobtn-text: #fff;
+
+ // cc pills box
+ --cc-pills-grid-item: #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: #ffd92a;
+
+ // notification
+ --cc-notification-list-bg: #222222;
+ --cc-notification-list-br: #111111;
+ --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: #333333;
+ --cc-toc-card-item-hover: var(--primary-color);
+ --cc-toc-card-item-br: #222222;
+ --cc-toc-card-item-bs: var(--rc-rgba-primary);
+ --cc-toc-card-item-img-bg: var(--rc-dddddd);
+ --cc-toc-card-item-title: #ffffff;
+ --cc-toc-card-item-title-hover: #333333;
+ --cc-toc-card-item-score-text: #3F19C3;
+
+ //toc item
+ --cc-chapter-br: var(--gray-100);
+ --cc-chapter-bg: #222222;
+ --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);
+ --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: #222222;
+ --cc-faq-panel-interact-bg: #222222;
+ --cc-faq-yesbtn-bg: inherit;
+ --cc-faq-yesbtn-text: #000000;
+
+ //layout
+ --cc-lb-card-hlist-title: var(--black);
+ --cc-lb-card-grid-title: var(--white);
+ --cc-badge-bg: #222222;
+ --cc-badge-text: #ffffff;
+ --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);
+
+ //Modal
+ --sb-modal-header-text: var(--black);
+ --sb-modal-content-bg: var(--sbt-compt-bg);
+ --sb-modal-actions-bg: var(--sbt-compt-bg);
+
+ --visit-helpcenter-bg: #333333;
+
+ //SDK
+ --sdk-end-page-title: #fff;
+ --sdk-end-page-replay-icon: #fff;
+ --sdk-end-page-replay-section-bg: #333;
+ --sdk-end-page-replay-section-hover: #222;
+ --sdk-end-page-title-span: #fff;
+ //QUML
+ --quml-main-bg: #333;
+ --quml-color-primary-contrast: #fff;
+ --quml-scoreboard-sub-title: #f2f2f2;
+ --quml-mcq-title-txt: #fff;
+ --quml-option-card-bg: #222222;
+ --quml-btn-border: #222;
+ --quml-option-selected-checkmark: #333;
+ --quml-navigation-btns: #333;
+ --quml-question-bg: #333;
+ --quml-scoreboard-unattempted: #fff;
+ --quml-info-icon: #000 !important;
+ --quml-close-icon: #fff;
+
+ --signup-panel-bg: var(--sbt-body-bg2);
+
+ input.sb-form-control:-internal-autofill-selected {
+ color-scheme: dark;
+ box-shadow: 0 0 0 1000px #333 inset;
+ }
+
+ .profile-bg-c-4 {
+ color:#fff;
+ }
+ 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: #fff !important;
+ opacity: 1 !important;
+ /* Firefox */
+ }
+
+ :-ms-input-placeholder,
+ ::-ms-input-placeholder {
+ /* Internet Explorer 10-11 */
+ color: #fff !important;
+ }
+
+ .sb-btn-link-primary:hover,
+ .sb-btn-link-primary:active,
+ .sb-btn-link-primary.active {
+ background-color: var(--primary-800);
+ }
+
+ sb-pills-grid[ng-reflect-title='Browse by Categories'] {
+ .sb-label-grid.sb-pills-grid .item {
+ background-color: #222 !important;
+ }
+ }
+
+ .sb-label-grid .item:hover {
+ background: #333;
+ }
+
+ .sb-btn-round {
+ background: #444444;
+ }
+
+ .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, 0.75);
+ }
+
+ .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: #333;
+ }
+
+ .sb-player-header__panel .player-pagenumber .page-count:focus~.focus-arrow,
+ .batch-details__dropdown .selection.ui.dropdown {
+ background: #222;
+ }
+
+ .ui.star.rating .icon {
+ color: rgba(0, 0, 0, .5);
+ }
+
+ .sbchapter__item--active,
+ .sbchapter__item--active:hover,
+ .sbchapter__item:hover {
+ border: calculateRem(1px) solid var(--cc-toc-card-item-br);
+
+ .icon-svg svg.icon.icon-svg--primary {
+ fill: #000 !important;
+ }
+ }
+
+ .sb-btn-disabled {
+ color: #000 !important;
+
+ &:hover {
+ color: #333 !important;
+ }
+ }
+
+ .sbt-welcome-theme-container .joy-modal-footer {
+ background: #333 !important;
+ }
+
+ //avtar
+ .avatar-content {
+ background: #222222 !important;
+ border: calculateRem(1px) solid #222222 !important;
+ color: var(--white) !important;
+ }
+
+ .sb-search-box .sb-btn {
+ background: #FFD92A;
+ color: #000;
+ }
+
+ .sb-modal .ui.modal>.close {
+ color: #000;
+ }
+
+ .sbchapter__item .sbchapter__img--inprogress .icon-svg svg.icon.icon-svg--primary {
+ fill: #000;
+ }
+
+ .sb-manage-section .sb-multi-rows:nth-child(odd) {
+ background: #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: #222222;
+ }
+
+ .help-page__content .panel .panel-info {
+ .input-text {
+ background: var(--black);
+ color: var(--white);
+ }
+
+ .submit-button {
+ color: var(--black);
+ }
+ }
+
+ app-add-member {
+ .ui.container {
+ .sb-bg-color-white {
+ background: #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);
+ }
+ }
+
+ .section-hr {
+ border: 0.03125rem solid #000;
+ }
+
+
+ .sb-notification-container .clear-text a {
+ color: var(--primary-color) !important;
+ }
+
+ .sb-bg-color-white.sb-back-btn-panel {
+ background: #444444 !important;
+ }
+
+ .content-header {
+ background: #333333;
+ }
+
+ .sb-bg-color-white.sb-modal-content {
+ background-color: #333 !important;
+ }
+
+ //chatbot
+ .lib-chat-panel {
+ background: #222;
+
+ .lib-chat-header {
+ background: #000;
+ color: #fff;
+ }
+
+ .lib-chat-body,
+ .messages-container {
+ background-color: #333333;
+ }
+
+ .chat-msg.recieved {
+ background: #222;
+
+ div {
+ color: #fff;
+ }
+
+ .btn-primary {
+ background: #fff;
+ border: calculateRem(1px) solid #ffd92a;
+ color: #000000;
+
+ &:hover {
+ background: #ffd92a;
+ }
+ }
+ }
+
+ .msg-input {
+ background: #222;
+ color: #fff;
+ }
+
+ .chat-msg.sent {
+ background: #ffd92a !important;
+ color: #222 !important;
+ }
+
+ .btn-info {
+ background: transparent !important;
+ color: #fff !important;
+ border: 0px solid red !important;
+
+ &:hover {
+ background: #F3A819 !important;
+ color: #333 !important;
+ }
+ }
+
+ .lib-chat-footer .send-btn img {
+ filter: invert(1);
+ }
+
+ .lib-chat-footer {
+ border-top: calculateRem(1px) solid #333;
+ }
+
+ }
+
+ .chatbox-cover .chatbox {
+ border: calculateRem(1px) solid #ffd92a !important;
+ background-color: #ffd92a !important;
+ }
+
+ .chatbox-cover .chatboxText {
+ background: #ffd92a !important;
+ color: #000 !important;
+ }
+
+ .chatbox-cover .chatbox ::after {
+ border-color: #ffd92a #ffd92a 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: #fff;
+ }
+
+ .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;
+ }
+ }
+
+ .user-profile-box,
+ .sb-members-list-item,
+ .sbt-welcome-theme-container .joy-modal-footer {
+ background: #333;
+ }
+
+ .members-inline .sb-members-list-item,
+ .sb-modal-dropdown-web ul li:hover,
+ .sb-toc-child-item,
+ .cc-player__btn-back {
+ background: #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: #333;
+ }
+
+ .sb-members-list-item--medium .selected img {
+ filter: invert(1);
+ }
+
+ .sb-form-control {
+ color: var(--white) !important;
+ background: #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: #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);
+ }
+
+ .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: #333333;
+ border: calculateRem(.5px) solid var(--gray-400);
+ color: #fff;
+ }
+
+ .sb-onbrd-g-box__guest__item {
+ box-shadow: 0 1.25rem 2.5rem -0.625rem #191818;
+ background-color: #222;
+ border: 0.125rem solid #222;
+
+ &:hover,
+ &.active {
+ .title {
+ color: #333;
+ }
+ }
+ }
+
+
+
+ .sb-members-list-item:hover,
+ .sb-members-list-item.active {
+ border-radius: 0rem;
+ }
+
+ .sb-group-container {
+ background: #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;
+ }
+
+ .back-btn-container.cc-player__btn-back {
+ background: var(--sbt-compt-bg) !important;
+ }
+
+ .cc-player__content-header {
+ background: #444444;
+ }
+
+ .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: #333 !important;
+ }
+
+ .sb-back-header {
+ .sb-back-btn-panel {
+ background: #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: #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);
+ }
+ }
+
+ .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: #444;
+
+ &:hover {
+ color: #444 !important;
+ }
+ }
+
+ .sb-btn-square,
+ .content-video__player__tools .sb-btn-square {
+ color: var(--white);
+
+ &:hover {
+ color: var(--black);
+ }
+ }
+
+ 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: #222222 !important;
+ }
+
+ .cc-player__list {
+ background-color: #222;
+ }
+
+ .sb-course-details .sb-course-details__info .sb-bg-color-white {
+ background: #333 !important;
+ }
+
+ .sb-course-details .certified-course__certificate {
+ background-color: #222222 !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
+ 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: #222 !important;
+
+ ul li {
+ background: #222 !important;
+ 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: #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);
+ }
+
+ .ui.selection.dropdown .menu>.item:hover {
+ background: var(--primary-color);
+ color: var(--black);
+ }
+
+ .ui.multiple.dropdown .label {
+ background: #222;
+ color: var(--white);
+ }
+
+ .ui.dimmer {
+ background-color: rgba(0, 0, 0, 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: #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: #333333;
+ }
+
+ .help-page__header.sb-bg-color-white,
+ .sbt-header-menu-bar {
+ background: #222 !important;
+ }
+
+ .content-metadeta__title {
+ color: var(--white);
+ }
+
+ .sb-md-container {
+ background: #333 !important;
+ }
+
+
+ .sbaccordion__panel-content .heading,
+ .data-labels,
+ .ui.selection.dropdown .menu>.message,
+ .sb-section-preference {
+ 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;
+ background: linear-gradient(to bottom, #585858 0%, #111 100%);
+ }
+ }
+ }
+
+ // Date picker
+ .md-drppicker {
+ background: #444;
+ color: var(--white);
+
+ .ranges ul li button {
+ &[disabled] {
+ opacity: .6;
+ }
+
+ color: var(--white);
+ }
+
+ .calendar-table {
+ background: #444;
+ border-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: #444;
+ color: var(--white);
+
+ &:nth-child(odd) {
+ background-color: #333 !important;
+ }
+ }
+ }
+
+ .field>label,
+ .inline.fields>label,
+ .ui.modal .ui.radio.checkbox .box,
+ .ui.radio.checkbox label {
+ color: var(--black);
+ }
+}
+
+html[data-theme='default'],
+html[data-theme='default'][data-mode='darkmode'] {
+
+ --sbt-box-shadow-6px: 0.375rem 0.375rem 0.125rem 0 var(--sbt-box-shadow-black);
+ --sbt-box-shadow-3px: 0.1875rem 0.1875rem 0.125rem 0 var(--sbt-box-shadow-black);
+ --sbt-box-shadow: rgba(128, 167, 206, 1);
+
+ --sbt-badge-text: var(--gray-800);
+}
+
+html[data-theme='default'],
+html[layout='joy'],
+html[data-mode='darkmode'] {
+
+ --sbt-page-header-bg: var(--sbt-header-bg);
+
+ --sbt-bradius: 0.125rem;
+ --sbt-bradius-8: calc(var(--sbt-bradius) * 4);
+ --sbt-bradius-16: calc(var(--sbt-bradius) * 8);
+ --sbt-bradius-24: calc(var(--sbt-bradius) * 12);
+ --sbt-bradius-32: calc(var(--sbt-bradius) * 16);
+
+}
\ No newline at end of file
diff --git a/themes/portal/_layout-joy.scss b/themes/portal/_layout-joy.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2714525a2ed0eb0a041406107110cfa94f6a1d2e
--- /dev/null
+++ b/themes/portal/_layout-joy.scss
@@ -0,0 +1,1314 @@
+//@use './../../node_modules/@project-sunbird/sb-styles/assets/mixins/mixins' as *;
+@function calculateRem($size) {
+ $remSize: $size / 16px;
+ @return #{$remSize}rem;
+}
+
+html[data-theme='default'][layout='joy'] {
+ --primary-hs: 206, 100%;
+ --primary-color: #024F9D;
+ --primary-300: #74B9EB;
+ --primary-200: #AFCCE1;
+ --primary-800: hsl(var(--primary-hs), 40%);
+ --primary-100: #f1f1e7;
+ --primary-300: #ececde;
+ --sbt-filter-bar-bg: #E9E8D9;
+ --sb-search-btn-bg: #333333;
+ --sb-search-btn-text: #ffffff;
+ --cc-grade-pill-container-bg: #e9e8d8;
+ --sbfaq-compt-bg: #e9e8d9;
+
+ app-signup {
+ .sb-checkbox.sb-checkbox-primary label:before {
+ border-color: #004E8A;
+ }
+ }
+}
+
+html[layout='joy'] {
+ --primary-theme: #FFD954;
+ --sbt-header-bg: var(--primary-theme);
+ --sbt-body-bg: #e9e8d9;
+ --sbt-body-bg2: #f3f3e5;
+ --sbt-primary-bg: var(--primary-theme);
+ --sbt-border-chapter: #E4E8EE;
+ --sbt-language-dropdown-bg: var(--white);
+ --sbt-language-dropdown-item: #008840;
+ --sbt-language-selectbox: #008840;
+ --sbt-language-dropdown-item-hover-bg: rgba(0, 0, 0, .05);
+ --sbt-language-dropdown-item-hover-text: #008840;
+ --sb-profile-bg-c-4: var(--sbt-body-bg);
+
+ //Modal
+ --sb-modal-header-text: var(--black);
+ --sb-modal-content-bg: var(--sbt-compt-bg);
+ --sb-modal-actions-bg: var(--sbt-compt-bg);
+
+ --sb-sidebar-menu-bg-active: var(--sbt-body-bg);
+ --sb-sidebar-menu-border-bg: #024f9d;
+ --sb-sidebar-menu-text: #333;
+ --sb-graph-section-bg: var(--sbt-body-bg2);
+
+ .profile-bg-c-3 {
+ border-radius: 2rem;
+ margin-top: calculateRem(24px);
+ }
+
+ .sb--card {
+ border-radius: 1rem !important;
+ box-shadow: var(--sbt-box-shadow-6px);
+ }
+
+ .sb--card__img .img-container {
+ border-radius: 0.5rem;
+ }
+
+ .sb-label-badge {
+ border-radius: 0.25rem;
+ }
+
+ .sbt-fluid-content-bg {
+ padding: 0rem 0;
+ border-radius: 2rem 0 0 2rem;
+ margin: 0 0 0 2%;
+ padding: 0 5% 2rem 3%;
+
+ &[dir="rtl"] {
+ border-radius: 2rem 2rem 0 0;
+ padding: 0 3% 2rem 5%;
+ }
+ }
+
+ .sbt-fluid-content-bg.sbt-footer-container {
+ margin: 0 0 0 0;
+ }
+
+ .sbt-filter {
+ margin-top: 2rem !important;
+ }
+
+ .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 {
+ background: var(--sbt-body-bg2);
+ padding: 2rem 5% 2rem 3%;
+ margin: 0 0 0 2%;
+ border-radius: 2rem 0 0 2rem;
+
+ &[dir="rtl"] {
+ border-radius: 2rem 2rem 0 0;
+ padding: 2rem 5% 2rem 3%;
+ }
+ }
+
+ .profile-bg-c-4 {
+ border-radius: 2rem;
+ }
+
+ .sbt-fluid-header-bg {
+ background: var(--sbt-body-bg);
+ }
+
+ .sbt-fluid-content-bg {
+ background: var(--sbt-body-bg2);
+ }
+
+ .sb-btn-link-primary {
+ &:hover {
+ color: var(--primary-800);
+ background-color: var(--primary-100);
+ }
+ }
+
+ .sbhelp_container__left {
+ border-radius: 1.5rem;
+ }
+
+ .navBlock .pdf-nav-unit {
+ color: var(--gray-800) !important;
+ }
+
+ .sbt-fluid-header-bg {
+ display: block;
+ }
+
+
+ .sb-onboard sb-form .sb-textbox,
+ .sb-onboard sb-form .list-border,
+ sb-form .multi-select-container .list-border,
+ sb-form .sb-textbox,
+ sb-form .async-text {
+ border-radius: 1.75rem;
+ }
+
+ .kabab-menu-dropdown-content {
+ border-radius: var(--sbt-bradius-16);
+
+ .list {
+
+ &:hover,
+ &:active {
+ border-radius: var(--sbt-bradius-16);
+ }
+ }
+ }
+
+ /* new button style */
+ .sb-btn {
+ box-shadow: var(--sbt-box-shadow-6px);
+ border: 0px;
+ }
+
+ .sb-btn-normal {
+ border-radius: var(--sbt-bradius-24);
+ height: calculateRem(40px);
+ padding: calculateRem(8px) calculateRem(24px);
+ }
+
+ .sb-btn-sm,
+ .sb-btn-xs {
+ border-radius: var(--sbt-bradius-24);
+ }
+
+ .sb-btn-square:hover {
+ border-radius: var(--sbt-bradius-8);
+ }
+
+ .sb-btn-round {
+ background: var(--white);
+ border-radius: 50% !important;
+ box-shadow: var(--sbt-box-shadow-6px) !important;
+ min-width: 3rem !important;
+ padding: calculateRem(8px) !important;
+ height: 3rem !important;
+ width: 3rem !important;
+
+ span {
+ display: none;
+ }
+
+ .icon-svg--xxs {
+ width: calculateRem(16px);
+ height: calculateRem(16px);
+ }
+ }
+
+ .sb-btn-link-primary {
+ box-shadow: none;
+ padding: calculateRem(8px) calculateRem(16px);
+
+ &:hover {
+ border-radius: calculateRem(16px);
+ color: var(--primary-800);
+ background-color: var(--primary-100);
+ }
+ }
+
+ .sb-btn-square.sb-btn-sm {
+ box-shadow: none;
+ }
+
+ .ui.dropdown.selection.sb-form-control .menu {
+ border-radius: 0 0 var(--sbt-bradius-16) var(--sbt-bradius-16);
+ }
+
+ .sb-pageSection-content .slick-slider .slick-track {
+ padding-bottom: calculateRem(8px);
+ }
+
+ .sbt-dialcode-inputsearch {
+ border-radius: var(--sbt-bradius-16);
+ box-shadow: var(--sbt-box-shadow-6px);
+ }
+
+ .sb-search-box .sb-search-input {
+ height: calculateRem(40px);
+ border-radius: var(--sbt-bradius-24) 0 0 var(--sbt-bradius-24);
+ }
+
+ .sb-search-box.hide-btn .sb-search-input {
+ border-radius: var(--sbt-bradius-24);
+ }
+
+ .sb-search-box.no-btn .sb-search-input {
+ height: 2.5rem;
+ border-radius: var(--sbt-bradius-24);
+ }
+
+ .sb-search-box .icon.search {
+ top: 0.75rem;
+ }
+
+ .sb-btn.sb-btn-normal.sbt-dialcode-btn {
+ border-radius: 0px var(--sbt-bradius-16) var(--sbt-bradius-16) 0px;
+ box-shadow: none;
+ }
+
+ // modal styles
+ .sb-modal {
+ .ui.modal {
+ box-shadow: var(--sbt-box-shadow-6px);
+ border-radius: var(--sbt-bradius-24);
+ background-color: var(--sbt-compt-bg);
+
+ .sb-modal-header {
+ background-color: var(--sbt-compt-bg);
+ color: var(--sb-modal-header-text);
+ border-radius: var(--sbt-bradius-24) var(--sbt-bradius-24) 0 0;
+ padding: calculateRem(24px) calculateRem(24px) calculateRem(8px) calculateRem(24px);
+ }
+
+ .sb-modal-content {
+ min-height: calculateRem(100px);
+ padding: calculateRem(16px) calculateRem(24px);
+ overflow-y: auto;
+ background: var(--sb-modal-content-bg);
+ }
+
+ .sb-modal-actions {
+ padding: calculateRem(8px) calculateRem(24px) calculateRem(24px);
+ background: var(--sb-modal-actions-bg);
+ border-top: calculateRem(0px) solid var(--gray-100);
+ border-radius: 0 0 var(--sbt-bradius-24) var(--sbt-bradius-24);
+ }
+
+ &>.close {
+ height: calculateRem(24px);
+ width: calculateRem(24px);
+ border-radius: 50%;
+ box-shadow: var(--sbt-box-shadow-3px);
+ right: calculateRem(12px) !important;
+ top: calculateRem(12px) !important;
+ background-color: var(--white);
+
+ &::before {
+ content: "\2715";
+ font-size: calculateRem(18px);
+ color: #e82520;
+ }
+
+ }
+ }
+ }
+
+ .ui.modal>:last-child {
+ border-bottom-left-radius: var(--sbt-bradius-24);
+ border-bottom-right-radius: var(--sbt-bradius-24);
+ }
+
+ .ui.modal>.icon:first-child+*,
+ .ui.modal>:first-child:not(.icon) {
+ border-top-left-radius: var(--sbt-bradius-24);
+ border-top-right-radius: var(--sbt-bradius-24);
+ }
+
+ .ui.grid.sb-form.m-0.sb-workspace-modal.p-16 {
+ padding: 0px !important;
+ }
+
+ // form fields
+ .sb-form-control {
+ border-radius: var(--sbt-bradius-16) !important;
+ padding-left: calculateRem(16px);
+ }
+
+ .sb-field .ui.selection.dropdown,
+ sui-multi-select.ui.selection.dropdown {
+ border-radius: var(--sbt-bradius-24) !important;
+ padding-left: calculateRem(16px);
+ }
+
+ sui-multi-select.ui.selection.dropdown {
+ background: var(--white);
+ }
+
+ .sb-prominent-filter .sb-prominent-filter-container .sb-prominent-filter-field .ui.selection.dropdown {
+ background: var(--white);
+ font-size: calculateRem(12px);
+ width: 100%;
+ min-height: calculateRem(32px);
+ padding: calculateRem(4px) calculateRem(8px);
+ border-color: var(--gray-200);
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+
+ .text {
+ padding: 0;
+ }
+ }
+
+ .sb-prominent-filter .sb-prominent-filter-container .sb-prominent-filter-field .ui.selection.dropdown .ui.active.selection.dropdown,
+ .ui.selection.active.dropdown .menu,
+ .ui.dropdown.selection,
+ .ui.dropdown.selection .menu {
+ border-radius: var(--sbt-bradius-24) !important;
+ }
+
+ .ui.dropdown.selection .menu {
+ margin-top: calculateRem(4px);
+ }
+
+ .sb-prominent-filter .sb-prominent-filter-container .sb-prominent-filter-field .topic-picker-selector {
+ background: var(--white) !important;
+ border-radius: var(--sbt-bradius-24);
+ }
+
+ .sbt-user-profile .sb-prominent-filter {
+ background: var(--sbt-compt-bg);
+ border-radius: calculateRem(24px);
+ padding: calculateRem(16px);
+ margin-top: calculateRem(16px);
+ }
+
+ .sbt-user-profile .ui.grid .ui.segment {
+ background: var(--sbt-compt-bg);
+ border-radius: var(--sbt-bradius-24);
+ }
+
+ .ui.pagination.menu {
+ border-radius: var(--sbt-bradius-24);
+ overflow: hidden;
+ }
+
+ .sb-back-btn-panel,
+ .sbt-back-header .content-header,
+ .sbt-activity-search .sb-prominent-filter,
+ .sbt-add-member .sb-bg-color-white,
+ .sbt-mygroups-details .sb-bg-color-white,
+ .sbt-groups-login .content-header,
+ .sbt-dial-code .sb-bg-color-white {
+ background: var(--sbt-compt-bg) !important;
+ }
+
+ .sb-back-btn-panel {
+ border-radius: var(--sbt-bradius-24) !important;
+ padding: 0px calculateRem(16px);
+ }
+
+ .sbt-activity-search .sb-prominent-filter {
+ border-radius: var(--sbt-bradius-24) !important;
+ margin-top: calculateRem(4px);
+ }
+
+ .sbt-activity-search .sb-search-box.large {
+ border-radius: var(--sbt-bradius-24);
+ overflow: hidden;
+ box-shadow: var(--sbt-box-shadow-6px);
+ }
+
+ .sbt-add-member .sb-bg-color-white,
+ .sbt-mygroups-details .sb-g .sb-bg-color-white {
+ border-radius: var(--sbt-bradius-24) !important;
+ }
+
+ // back panel with header combination
+ .sbt-back-header .sb-back-btn-panel {
+ border-radius: var(--sbt-bradius-24) calculateRem(24px) 0px 0px !important;
+ }
+
+ .sbt-back-header .content-header {
+ border-radius: calculateRem(24px) !important;
+ padding: 0px calculateRem(16px);
+ position: relative;
+ z-index: 3;
+ background: var(--sbt-compt-bg) !important;
+ }
+
+ .sb-search-box {
+ border-radius: var(--sbt-bradius-24);
+ overflow: hidden;
+ }
+
+ .sbt-groups-login .content-header {
+ border-radius: var(--sbt-bradius-24);
+ margin-top: calculateRem(24px);
+ padding: 0px calculateRem(16px);
+ }
+
+ .sb-members-list-item:hover,
+ .sb-members-list-item.active {
+ border-radius: calculateRem(8px);
+ }
+
+ // public content player
+ .ui.container,
+ .ui.grid.container {
+ width: 100% !important;
+ margin: 0px !important;
+ }
+
+ .cc-player__btn-back {
+ padding: 0 calculateRem(16px);
+ border-radius: var(--sbt-bradius-24) var(--sbt-bradius-24) 0px 0px;
+ background: var(--sbt-compt-bg) !important;
+ }
+
+ .help-page {
+
+ .help-page__header {
+ border-radius: calculateRem(24px) !important;
+ width: 100%;
+ background: var(--sbt-compt-bg) !important;
+ }
+
+
+ &__visit-helpcenter,
+ &__content {
+ width: 100%;
+ margin: 0 auto;
+ }
+
+ &__content {
+
+ .panel {
+ border-bottom: 0px;
+ overflow: hidden;
+ margin-bottom: 1rem;
+ border-radius: 2rem !important;
+ box-shadow: var(--sbt-box-shadow-6px) !important;
+
+ .panel-heading {
+
+ .panel-title {
+ font-size: var(--font-size-normal);
+ }
+
+ .panel-title-blue {
+ font-weight: bold;
+ }
+
+ .icon-svg {
+ .icon-svg--primary {
+ fill: var(--gray-800);
+ }
+ }
+ }
+
+ .panel-collapse {
+ background: var(--white);
+
+ .panel-interact {
+ .yes-clicked {
+ min-width: calculateRem(220px);
+ }
+ }
+
+ .panel-info {
+ .submit-button {
+ border-radius: calculateRem(24px);
+ cursor: pointer;
+ }
+ }
+ }
+ }
+ }
+
+ &__visit-helpcenter {
+ background: var(--sbt-compt-bg);
+ border-radius: calculateRem(24px);
+ }
+ }
+
+ .cc-player__content-header,
+ .help-page__header {
+ border-radius: 0px 0px var(--sbt-bradius-24) var(--sbt-bradius-24);
+ padding: calculateRem(16px);
+ margin-bottom: calculateRem(24px);
+ box-shadow: none;
+ background: none; //var(--sbt-compt-bg)
+ padding-top: 0px;
+ background: none; //var(--sbt-compt-bg)
+ }
+
+ .cc-player__content-header .ui.container.py-16 {
+ padding: 0px 0px 0px 0px !important;
+ }
+
+ .cc-player__content-header .ui.container .cc-player {
+ width: 100%;
+ }
+
+ .header-info {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .sb-single-resource {
+ .content-video__player {
+ box-shadow: var(--sbt-box-shadow-6px);
+ margin-bottom: calculateRem(16px);
+ border-radius: var(--sbt-bradius-24);
+ overflow: hidden;
+ }
+ }
+
+ .content-video__player,
+ .sbt-shadow-radius {
+ box-shadow: none !important;
+ border-radius: var(--sbt-bradius-24);
+ }
+
+ .sbt-shadow-radius {
+ box-shadow: var(--sbt-box-shadow-6px) !important;
+ border-radius: var(--sbt-bradius-24);
+ overflow: hidden;
+ }
+
+ .contentViewerIframeShadow {
+ border-radius: var(--sbt-bradius-24) var(--sbt-bradius-24) 0px 0px;
+
+ @media screen and (max-width: 992px) {
+ border-radius: 0px 0px 0px 0px;
+ }
+
+ &.player-fullscreen {
+ border-radius: initial;
+ }
+ }
+
+ .content-video__player__details {
+ border-radius: 0 0 var(--sbt-bradius-24) var(--sbt-bradius-24);
+ background: var(--sbt-body-bg2);
+ }
+
+ .sb-accordion-content,
+ .ui.styled.sb-accordion.accordion,
+ .ui.styled.accordion .title {
+ border-radius: var(--sbt-bradius-24);
+ }
+
+ .ui.styled.accordion .title {
+ background: var(--sbt-compt-bg);
+ }
+
+ .ui.styled.accordion .active.title {
+ border-radius: var(--sbt-bradius-24) var(--sbt-bradius-24) 0px 0px;
+ }
+
+ .sb-accordion-content.sb-bg-color-white {
+ background: var(--sbt-compt-bg) !important;
+ padding: calculateRem(24px) calculateRem(24px) !important;
+ }
+
+ .course-consumption-container {
+ position: relative;
+ z-index: 9;
+ }
+
+ .course-consumption-container .sb-course-details__training .training-info .training-relevant {
+ background: var(--sbt-compt-bg) !important;
+ border-radius: var(--sbt-bradius-24);
+ padding: calculateRem(24px);
+ }
+
+ .course-consumption-container .training-modules .course-consumption-modules-container {
+ background: var(--sbt-compt-bg) !important;
+ border-radius: var(--sbt-bradius-24);
+ }
+
+ .sbaccordion {
+ box-shadow: none !important;
+ border-radius: var(--sbt-bradius-24);
+ }
+
+ .accordion-item-header-expanded .sbaccordion__panel-header {
+ border-radius: var(--sbt-bradius-24) var(--sbt-bradius-24) 0px 0px;
+ }
+
+ .sbaccordion__panel-content {
+ border-bottom-left-radius: var(--sbt-bradius-24);
+ border-bottom-right-radius: var(--sbt-bradius-24);
+ border: 0px;
+ background: var(--sbt-compt-bg);
+ max-height: 100%;
+ padding: calculateRem(4px) calculateRem(16px) calculateRem(16px) calculateRem(16px);
+ }
+
+ .sbchapter {
+ border-bottom: 0px;
+ padding: 0 0 0rem;
+ margin-bottom: 0rem;
+ }
+
+ .sbchapter__item {
+ border-radius: var(--sbt-bradius-32);
+ padding: calculateRem(8px) calculateRem(16px);
+ min-height: calculateRem(48px);
+ margin-bottom: calculateRem(16px);
+ border: calculateRem(1px) solid var(--cc-toc-card-item-br);
+ box-shadow: none;
+
+ .course-content {
+ border-radius: var(--sbt-bradius-32);
+ padding-left: calculateRem(24px);
+ border: calculateRem(1px) solid var(--sbt-body-bg);
+ box-shadow: none;
+ margin-bottom: calculateRem(16px);
+ }
+ }
+
+ .sbchapter__title {
+ margin-bottom: calculateRem(16px) !important;
+ font-size: calculateRem(14px);
+ }
+
+ .sbchapter__item__title {
+ color: var(--cc-toc-card-item-title);
+ }
+
+ .sbchapter__item--active .sbchapter__item__title {
+ font-weight: normal !important;
+ }
+
+ .accordion-item-header-expanded .sbaccordion__panel-header {
+ border: 0px;
+ }
+
+ .sbaccordion__panel-header {
+ border: 0px;
+ border-radius: var(--sbt-bradius-24);
+ }
+
+ .ui.styled.accordion .accordion .content,
+ .ui.styled.accordion .content {
+ background: var(--sbt-compt-bg) !important;
+ border-radius: 0px 0px var(--sbt-bradius-24) var(--sbt-bradius-24);
+ }
+
+ .sbaccordion__panel-header .icon-svg,
+ .help-page__content .panel-heading .icon-svg {
+ background: var(--white);
+ box-shadow: var(--sbt-box-shadow-3px);
+ border-radius: 50%;
+ }
+
+ .sbaccordion__panel-header .icon-svg--xs,
+ .help-page__content .panel-heading .icon-svg {
+ width: calculateRem(24px);
+ height: calculateRem(24px);
+ padding: calculateRem(1px) calculateRem(4px) calculateRem(4px) calculateRem(4px);
+ }
+
+
+ .content-metadeta {
+ border-radius: var(--sbt-bradius-24);
+ background: var(--sbt-compt-bg) !important;
+ }
+
+ .content-metadeta__content {
+ border-bottom: 0px;
+ margin: calculateRem(24px) 0px;
+ }
+
+ .toc-box-shadow {
+ box-shadow: none !important;
+ }
+
+ .training-relevant,
+ .sbt-certified-course,
+ .sb-no-course-found {
+ background: var(--sbt-compt-bg) !important;
+ border-radius: var(--sbt-bradius-24);
+ padding: calculateRem(16px);
+ }
+
+ .certified-course__progress {
+ border-radius: var(--sbt-bradius-24);
+ background: var(--sbt-compt-bg) !important;
+ }
+
+
+ .right-flower-position-adjust-container {
+ position: relative;
+ z-index: 8;
+ }
+
+ .certified-course__progress {
+ background: var(--sbt-compt-bg) !important;
+ border-radius: var(--sbt-bradius-24);
+ padding: calculateRem(24px) !important;
+
+ .fsmall {
+ font-size: var(--font-size-md) !important;
+ font-weight: bold;
+ }
+ }
+
+ .sbaccordion {
+ &__panel-header {
+ border-top-left-radius: var(--sbt-bradius-24);
+ border-top-right-radius: var(--sbt-bradius-24);
+ background: var(--sbt-compt-bg);
+ border: none;
+ padding: calculateRem(16px);
+ height: calculateRem(48px);
+ }
+ }
+
+ .sb-toc-credits .sb-bg-color-gray-0 .sbaccordion__panel-header {
+ height: calculateRem(56px) !important;
+ }
+
+ sb-accordion-header[aria-expanded="false"] {
+ .sbaccordion__panel-header {
+ border-bottom-left-radius: var(--sbt-bradius-24);
+ border-bottom-right-radius: var(--sbt-bradius-24);
+ }
+ }
+
+ .sb-toc-child-item {
+ background: var(--white);
+ }
+
+ .side-toc-content.chapter-box {
+ background-color: var(--sbt-compt-bg);
+ }
+
+ .sb-toc-child-item,
+ .side-toc-content.chapter-box {
+ box-shadow: var(--sbt-box-shadow-6px);
+ padding: calculateRem(16px);
+ display: block;
+ width: 100%;
+ height: 100%;
+ margin-bottom: calculateRem(16px);
+ border-radius: var(--sbt-bradius-24);
+
+ .toc-child-item,
+ .child-content-padding {
+ padding: calculateRem(16px) calculateRem(8px);
+ background: var(--white);
+ border-radius: calculateRem(24px);
+ box-shadow: var(--sbt-box-shadow-6px);
+ margin-bottom: calculateRem(16px);
+ }
+ }
+
+ .side-toc-content.chapter-box {
+ box-shadow: none;
+ }
+
+ // Assesment Player
+
+ .back-btn-container,
+ .textbook-container {
+ background: var(--sbt-compt-bg) !important;
+ }
+
+ .back-btn-container,
+ .textbook-container {
+ padding: 0 calculateRem(16px);
+ }
+
+ .back-btn-container {
+ border-radius: var(--sbt-bradius-24) var(--sbt-bradius-24) 0px 0px;
+ }
+
+ .textbook-container {
+ border-radius: 0px 0px var(--sbt-bradius-24) var(--sbt-bradius-24);
+ }
+
+ .cc-player__list {
+ border-radius: var(--sbt-bradius-24);
+ padding: 0 1rem !important;
+ background: none !important;
+ box-shadow: none;
+ overflow: hidden;
+
+ .sb-grade-pills-container {
+ padding: calculateRem(24px) calculateRem(16px) !important;
+ border-radius: calculateRem(24px);
+ }
+
+ .main-side-toc-content {
+ box-shadow: none !important;
+ max-height: 100%;
+ overflow-y: inherit;
+
+ .sbaccordion {
+
+ .sbaccordion__panel-header,
+ .sbaccordion__panel-content {
+ background: var(--sbt-compt-bg) !important;
+ }
+
+ .sbchapter {
+ background: var(--cc-chapter-bg);
+ padding: calculateRem(16px) calculateRem(8px);
+ border-radius: calculateRem(24px);
+ box-shadow: var(--sbt-box-shadow-6px) !important;
+ margin-bottom: calculateRem(16px);
+ }
+
+ }
+
+ }
+
+ .main-side-toc-content,
+ .sb-toc-credits {
+ margin-top: calculateRem(16px);
+ }
+
+ .sb-toc-credits {
+
+ .sbaccordion__panel-header,
+ .sbaccordion__panel-content {
+ background: var(--sbt-compt-bg) !important;
+ }
+ }
+
+ .sb-toc-credits .credits-section {
+ padding: 0;
+ word-break: break-word;
+ }
+
+ .sb-slider-pills-container .sb-grade-pills-container {
+ background: var(--cc-grade-pill-container-bg) !important;
+ }
+
+ h5 {
+ padding: 0 calculateRem(16px) calculateRem(16px) 0 !important;
+ }
+ }
+
+ .sb-course-details .sbt-certified-course {
+ .certified-course__certificate {
+ background-color: inherit;
+ }
+ }
+
+ .sb-no-course-found {
+ border: none;
+ }
+
+ .sbt-home-search-component .sb-grid .sb-card {
+ width: auto;
+ }
+
+ .popup-content {
+ width: calculateRem(896px) !important;
+ }
+
+ app-batch-card .link.cards {
+ width: 100%;
+ }
+
+ .cc-player__border-fix {
+ border-top-left-radius: calculateRem(24px);
+ border-top-right-radius: calculateRem(24px);
+ padding-top: calculateRem(16px);
+ }
+
+ .sb-pageSection-content .slick-slider .slick-track .slick-slide .sb--card {
+ width: calculateRem(320px);
+ }
+
+ app-usage-reports .sb-workspace-bg .sb-sidebar-menu {
+ position: inherit !important;
+ }
+
+ .sbt-page-gap {
+ padding-top: calculateRem(0px);
+ }
+
+
+ .ui.styled.accordion,
+ .ui.styled.accordion .accordion {
+ background: var(--sbt-compt-bg);
+ }
+
+ .header .title {
+ font-weight: normal !important;
+ color: var(--gray-800) !important;
+ }
+
+ .sb-slider-pills-container .sb-pills-container .pill {
+ white-space: normal !important;
+ }
+
+ .sb-pageSection-header {
+ margin: 0.5rem 0 0px 0;
+ }
+
+ .sb-content__bar {
+ background: none;
+ }
+
+ .sb-rating.ui.star.rating .active.icon,
+ .sb-rating.ui.star.rating .icon.selected {
+ color: var(--primary-color) !important;
+ }
+
+ app-view-all .sbt-filter {
+ margin-top: calculateRem(-32px);
+ }
+
+ .reports-back-btn {
+ width: 100%;
+ margin: 1rem 0 0 0;
+ }
+
+ .reports-content-header {
+ padding: 1rem;
+ width: 100%;
+ margin: 0;
+ }
+
+ .sb-new-theme-accordion {
+ &.ui.styled.accordion .title {
+ padding: calculateRem(24px) !important;
+ }
+
+ .sb-accordion-title {
+ font-size: calculateRem(16px) !important;
+ }
+
+ .sb-accordion-content {
+ padding-top: 0 !important;
+ }
+ }
+
+ .sb-update-data-settings {
+ .sb-radio-btn-checkbox label:after {
+ left: calculateRem(3px);
+ top: calculateRem(3px);
+ height: calculateRem(10px);
+ width: calculateRem(10px);
+ }
+ }
+
+ .sb-modal .sb-bulk-upload-btn {
+ line-height: 1.5rem;
+ }
+
+ .sb-sideview-tab-container .report__header .sb-last-update-status {
+ margin-right: calculateRem(16px);
+ }
+
+ .sb-graph-section {
+ border-radius: var(--sbt-bradius-24) !important;
+ }
+
+ .sbt-report-tabs-panel {
+ border-radius: var(--sbt-bradius-24) var(--sbt-bradius-24) 0px 0px !important;
+ }
+
+ .sbt-report-btns-panel {
+ border-radius: 0 0 var(--sbt-bradius-24) var(--sbt-bradius-24) !important;
+ }
+
+ #report-summary {
+ app-report-summary {
+ .ui.message {
+ border-radius: var(--sbt-bradius-24);
+ }
+ }
+ }
+
+ .certificate-bg {
+ background: #F2F2EA !important;
+ border-radius: calculateRem(24px) !important;
+ }
+
+ .sb-browse-btn {
+ height: 2.1rem;
+ border: calculateRem(2px) solid #7ab4ee;
+ color: #7ab4ee;
+ font-weight: bold;
+ background: #edf4f9;
+ }
+
+ .sb-btn-nolayer {
+ height: 2.0rem !important;
+ box-shadow: none;
+ }
+
+ .sb-desktop-content-manager {
+ .sb-single-pannel-accordion-heading {
+ border-radius: var(--sbt-bradius-24) var(--sbt-bradius-24) 0 0;
+ background-color: #5630DC;
+ }
+ }
+
+ .ui.styled.accordion.sb-single-pannel-accordion.sb-desktop-content-manager {
+ box-shadow: none;
+ background: none;
+ border-radius: var(--sbt-bradius-24) var(--sbt-bradius-24) 0 0;
+ background-color: var(--white);
+ box-shadow: calculateRem(5px) calculateRem(5px) calculateRem(2px) 0 rgba(0, 0, 0, 0.1) !important;
+ }
+
+ .sb-desktop-content-manager.ui.styled.accordion .accordion {
+ box-shadow: calculateRem(5px) calculateRem(5px) calculateRem(2px) 0 rgba(0, 0, 0, 0.1);
+ border-radius: var(--sbt-bradius-24) var(--sbt-bradius-24) 0 0;
+ }
+
+ .sb-desktop-content-manager.ui.styled.accordion .content {
+ border-radius: 0;
+ }
+
+ .sb-desktop-library-card .sb--card .card-hover {
+ top: initial;
+ height: 5rem;
+ opacity: 1;
+ }
+
+ .about-page {
+ width: calc(100% - 4%);
+ margin: 0 auto;
+ }
+
+ & [dir='rtl'] {
+ .sb-modal .ui.modal .close {
+ left: calculateRem(12px) !important;
+ right: auto;
+ }
+ }
+
+ .cc-player {
+ .ui.info.message {
+ border-radius: calculateRem(20px);
+ }
+ }
+
+ .no-result-container {
+ border-radius: 1.5rem;
+ background: var(--sbt-compt-bg) !important;
+ }
+
+ .sb-back-actionbar {
+ min-height: 5rem;
+ background: none;
+ padding: 0px;
+ display: flex;
+ background: var(--sbt-header-bg) !important;
+ border-radius: 1.5rem 1.5rem 0 0px;
+ padding: 0.5rem 1rem;
+ position: relative;
+ margin: 0rem 5%;
+ }
+
+ .cc-player__btn-back {
+ min-height: 5.5rem;
+ align-items: center;
+ justify-content: center;
+ display: flex;
+ }
+
+ .sbt-inside-page-container #player-area-height .aspectratio {
+ box-shadow: var(--sbt-box-shadow-6px) !important;
+ border-radius: var(--sbt-bradius-24);
+ overflow: hidden;
+ }
+
+ .sbt-inside-page-container .sb-slider-pills-container {
+ padding: 0rem 0rem !important;
+ border-radius: 1.5rem;
+ background: var(--cc-grade-pill-container-bg) !important;
+ }
+
+ @media screen and (max-width: 768px) {
+ .sbt-fluid-content-bg {
+ margin: 0;
+ border-radius: 0;
+ }
+
+ .sbt-header .sbt-container {
+ padding: 0 0rem !important;
+ }
+
+ .sbt-header-bar {
+ padding: 0 1rem;
+ }
+
+ .sbt-inside-page-container,
+ .sbt-center-container {
+ margin-top: -1.5rem !important;
+ z-index: 2;
+ position: relative;
+ padding: 1rem !important;
+ margin-left: 0 !important;
+ }
+
+ .content-video {
+ background: var(--sbt-body-bg2);
+ padding: 0rem;
+ border-radius: calculateRem(16px);
+ }
+
+ .sb-back-actionbar .sb-btn-link-primary {
+ align-self: baseline;
+ }
+
+ .sb-back-actionbar {
+ padding-bottom: 2.5rem;
+ margin: 0 0;
+ }
+
+ .content-video__player__details {
+ padding: 0.5rem;
+ }
+
+ .content-metadeta {
+ background: var(--sbt-body-bg2) !important;
+ }
+ }
+
+ table.dataTable.no-footer {
+ border-radius: var(--sbt-bradius-24);
+ }
+
+ .sb-forum-btn {
+ height: 2rem !important;
+ }
+}
+
+html[data-mode='darkmode'][layout='joy'] {
+ --primary-color: #ffd92a;
+ --sb-search-btn-bg: #333333;
+ --sb-search-btn-text: var(--primary-color);
+
+ //Joy theme header
+ --sbt-header-bg: #333333;
+ --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: #000000;
+ --sbt-language-dropdown-item-hover-bg: #333333;
+ --sbt-language-dropdown-item-hover-text: var(--primary-color);
+ --sbt-language-selectbox: var(--primary-color);
+ --sbt-filter-bar-bg: #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: #222;
+ --cc-listView-compt-title: #fff;
+ --cc-listView-compt-itemText: #fff;
+ --cc-carousel-title: #fff;
+ // lazy loading
+ --lazyload-bg: #333333;
+ --grey-nuance-lighter: #333333;
+ --grey-nuance-darker: #111;
+ --fade-grey: #f2f2f2;
+
+ --cc-sbcard-data2-bg: #444444;
+ --cc-sbcard-data2-bg-active: #ffeb2a;
+
+ //Modal
+ --sb-modal-header-text: var(--white);
+
+
+ .sbhelp_container__left {
+ border-radius: 1.5rem;
+ }
+
+ .listView-compt__btn {
+ button {
+ background-color: var(--primary-color);
+ color: var(--black);
+
+ &:hover {
+ background-color: #ffeb2a;
+ }
+ }
+ }
+
+ .sbt-filter-text {
+ background: #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: #444 !important;
+ }
+
+ .ui.selection.sbt-dropdown.dropdown.sbt-green {
+ color: #fff;
+ }
+
+ .profile-bg-c-4 {
+ background: #222222 !important;
+ color: #ffffff;
+ }
+
+ .content-preference__info {
+ @media screen and (max-width: 992px) {
+ background: #222222 !important;
+ color: #ffffff;
+ }
+ }
+
+ .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: #222222;
+ }
+
+ .sbt-dropdown-language.ui.selection.sbt-dropdown.dropdown>.text span:last-child::before {
+ // background: url(assets/images/Language-white.svg) no-repeat !important;
+ }
+
+ .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);
+ }
+ }
+}
+
+html[data-theme='default'],
+html[data-theme='default'][data-mode='darkmode'] {
+
+ --sbt-box-shadow-6px: 0.375rem 0.375rem 0.125rem 0 var(--sbt-box-shadow-black);
+ --sbt-box-shadow-3px: 0.1875rem 0.1875rem 0.125rem 0 var(--sbt-box-shadow-black);
+ --sbt-box-shadow: rgba(128, 167, 206, 1);
+
+ --sbt-badge-text: var(--gray-800);
+}
+
+html[data-theme='default'],
+html[layout='joy'],
+html[data-mode='darkmode'] {
+
+ --sbt-page-header-bg: var(--sbt-header-bg);
+
+ --sbt-bradius: 0.125rem;
+ --sbt-bradius-8: calc(var(--sbt-bradius) * 4);
+ --sbt-bradius-16: calc(var(--sbt-bradius) * 8);
+ --sbt-bradius-24: calc(var(--sbt-bradius) * 12);
+ --sbt-bradius-32: calc(var(--sbt-bradius) * 16);
+
+}
\ No newline at end of file
diff --git a/themes/theme.scss b/themes/theme.scss
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/themes/themes-material_UI.scss b/themes/themes-material_UI.scss
index 65e38ed59e1e21f26f3eb11fc4ac6173b586170b..51ca7c39c33ffa1dd68b9cc9ba9798ea2ea4b344 100644
--- a/themes/themes-material_UI.scss
+++ b/themes/themes-material_UI.scss
@@ -4,7 +4,7 @@
}
-html[data-theme='Default'] {
+html[data-theme='default'] {
// Material Tabs
--mat-tab-labels-bg: var(--white);
@@ -47,7 +47,7 @@ html[data-theme='Default'] {
}
-html[data-theme='Default'][layout='joy'] {
+html[data-theme='default'][layout='joy'] {
--sbfaq-compt-bg: #e9e8d9;
@@ -122,7 +122,7 @@ html[layout='joy'] {
}
}
-html[data-theme='Darkmode'] {
+html[data-theme='default'][data-mode='darkmode'] {
--gray-222: #222;
@@ -160,7 +160,7 @@ html[data-theme='Darkmode'] {
}
html[layout='joy'],
-html[data-theme='Darkmode'] {
+html[data-theme='default'][data-mode='darkmode'] {
// Material Tabs
--mat-tab-labels-bg: var(--sbt-body-bg2);
@@ -175,7 +175,7 @@ html[data-theme='Darkmode'] {
--mat-modal-content-bg: var(--sbt-compt-bg);
}
-html[data-theme='Default'],
+html[data-theme='default'],
html[layout='joy'] {
// Material Modals(Dialog)
diff --git a/themes/themes-portal.scss b/themes/themes-portal.scss
index d12894fe6904a207310bf47935368fc2a497c6e0..8716b5bd23a5daec6224b6b3a2b1b067fa82a331 100644
--- a/themes/themes-portal.scss
+++ b/themes/themes-portal.scss
@@ -1,3231 +1,3 @@
-@function calculateRem($size) {
- $remSize: $size / 16px;
- @return #{$remSize}rem;
-}
-
-html[data-theme='Default'] {
- --primary-theme: var(--primary-color);
- --sbt-body-bg: #E5EDF5;
- --sbt-body-bg2: #f3f3e5;
- --sbt-header-bg: var(--primary-300); //var(--primary-300);
- --sbt-filter-bar-bg: var(--white);
- --sbt-box-shadow-black: rgba(0, 0, 0, 0.1);
-
- --sbt-footer-bg: #ffffff;
- --sbt-theme-purple-selectbox: #6841B3;
- --sbt-theme-green-selectbox: #008840;
- --sbt-theme-blue-selectbox: #0531FF;
- --sbt-theme-light-blue-selectbox: #171e22;
- --sbt-theme-purple-selectbox-lbg: #F2EEFF;
- --sbt-theme-green-selectbox-lbg: #E0F5EA;
- --sbt-theme-blue-selectbox-lbg: #E5EDF5;
- --sbt-theme-light-blue-selectbox-lbg: #E9F5FF;
- --sbt-pill-hs: 212, 100%;
- --sbt-pill-bg: var(--white);
- --sbt-pill-bg-active: hsl(var(--sbt-pill-hs), 50%); // #0076FE
- --sbt-pill-text: #000000;
- --sbt-pill-text-hover: #ffffff;
- --sbt-compt-bg: #E9E8D9;
-
- --sb-container-bg: var(--white);
-
- --sbt-badge-bg: var(--rc-d4d3d3);
-
- --sbfield-label-text: var(--gray-800);
- --sbt-sidemenu-overlay-bg: 0, 0, 0;
- --sbt-sidemenu-bg: var(--white);
- --sidebar-profil-header-bg: var(--primary-100);
- --sidebar-li-hover-bg: var(--primary-100);
- --sb-linkmenu-bg: var(--white);
- --sb-linkmenu-text: var(--primary-400);
- --sb-linkmenu-active-text: var(--primary-400);
- --sb-linkmenu-text-hover: var(--white);
- --sb-linkmenu-bg-hover: var(--primary-color);
- --sb-linkmenu-icon-bg-hover: var(--white);
- --sb-btn-default-color: var(--white);
- --sb-sidebar-menu-bg-active: var(--primary-0);
- --sb-sidebar-menu-border-bg: var(--primary-color);
- --sb-sidebar-menu-text: var(--primary-color);
- --sb-graph-section-bg: var(--white);
-
- //header
- --sb-menu-bg: #E5EDF5;
- --sb-menu-item: var(--gray-800);
- --sb-menu-item-hover: var(--primary-color);
- --sb-header-bg: var(--primary-400);
- --sb-notification-bg: var(--white);
- --sb-header-qrcode-btn-bg: var(--white);
- --sb-header-qrcode-btn: var(--primary-color);
- --sb-header-qrcode-btn-border: var(--primary-300);
- --sb-search-input-bg: var(--white);
- --sb-search-input-text: var(--gray-200);
- --sb-search-btn-bg: var(--primary-100);
- --sb-search-btn-text: var(--primary-400);
- --sb-qrcode-divider: rgba(var(--rc-rgba-primary-300), 0.34);
- --sb-language-dropdown-bg: var(--white);
- --sb-language-dropdown-item: var(--black);
- --sb-language-dropdown-item-active: rgba(0, 0, 0, .03);
- --sb-search-auto-select: var(--white);
- --sb-footer-bg: var(--primary-color);
- --sbt-green-bg: var(--white);
- --sbt-filter-switcher-bg: var(--primary-theme);
- --bell-icon: var(--primary-color);
- --sbt-language-dropdown-bg: var(--white);
- --sb-footer-bg: var(--primary-color);
- --filter-pref-text: var(--gray-800);
- --sbt-class-bar-label-text: var(--gray-800);
-
- //landing page
- --sb-landing-page-bg: var(--white);
- --sb-landing-page-segments: var(--sb-landing-page-bg);
- --sb-landing-page-cards: var(--white);
- --sb-landing-page-cards-desc: rgba(0, 0, 0, .68);
- --sb-landing-page-btn: transparent;
-
- //profile page
- --sb-profile-certificate-bg: var(--white);
- --sb-course-progress-status-label: #333333;
- --sb-list-data: var(--gray-400);
- --sb-list-items: #333333;
- --sb-profile-bg-c-4: var(--primary-0);
- --sb-profile-page-basic-label-bg: var(--white);
-
- //pagination
- --sb-pagination-bg: var(--white);
- --sb-pagination-item-bg: var(--sb-pagination-bg);
- --sb-pagination-item: var(--gray-400);
- --sb-pagination-item-active: var(--sb-pagination-item);
-
- //filters
- --sb-prominent-filter-bg: var(--white);
- --sb-prominent-filter-title: rgba(0, 0, 0, .87);
- --sb-multiple-dropdown-border: var(--gray-200);
- --sb-multiple-dropdown-border-hover: rgba(34, 36, 38, .35);
- --sb-multiple-dropdown-bg: transparent;
- --sb-prominent-filter-field-color: var(--rc-4a4a4a);
- --sb-dropdown-menu-bg: var(--white);
- --sb-dropdown-menu-item: var(--rc-4a4a4a);
- --sb-drodown-selection-active: #96c8da;
- --ui-seleted-label-bg: #e8e8e8;
- --ui-seleted-label-bg-hover: #e0e0e0;
- --state-medium-container-bg: var(--white);
- --sb-class-bar-bg: var(--gray-0);
- --sb-dropdown-menu-text: rgba(0, 0, 0, .8);
- --ui-dropdown-menu-selected-item-bg: rgba(0, 0, 0, .03);
- --ui-dropdown-menu-selected-item: rgba(0, 0, 0, .95);
- --sb-filter-selected-dropdown-hover: var(--primary-color);
- //slick slide card
- --sb-card-bg: var(--white);
- --sb-card-border: 0.0625rem solid var(--rc-dedede);
- --sb-card-text: var(--gray-400);
- --sb-card-slick-arrows-bg: var(--white);
- --sb-profile-page-container: var(--white);
- //myGroups
- --sb-mygroups-bg: var(--white);
- --groups-content-header: var(--rc-FAFAFA);
- --kabab-menu-hover-bg: var(--gray-0);
- --kabab-menu-dropdown-bg: var(--white);
- --kabab-menu-dropdown-item-active: var(--primary-100);
-
- //black header bar
- --brand-header-tail-bg: #000000;
- --brand-header-tail-text: #ffffff;
- --primary-menu-link-active: #ff714a;
-
- // Modal
- --sb-modal-header-text: var(--white);
- --sb-modal-content-bg: var(--white);
- --sb-modal-actions-bg: var(--white);
-
- // lazy loading
- --lazyload-bg: #f6f7f8;
- --grey-nuance-lighter: #eeeeee;
- --grey-nuance-darker: #dddddd;
- --fade-grey: #e8e8e8;
-
- //cc
- --cc-sbcard-type-bg: var(--black);
- --cc-sbcard-type-br: var(--black);
- --cc-sbcard-org-text: var(--black);
-
- //joy theme
- --themeflower-bg: #ffd92a;
- --visit-helpcenter-bg: var(--white);
- --sbfaq-compt-bg: #fff;
-
- --signup-panel-bg: var(--white);
-
- .sb-single-resource {
- .content-video__player {
- background: var(--white);
- }
- }
-
- ::placeholder {
- color: #333333 !important;
- opacity: 1 !important;
- /* Firefox */
- }
-
- :-ms-input-placeholder,
- ::-ms-input-placeholder {
- /* Internet Explorer 10-11 */
- color: #333333 !important;
- }
-
- .navBlock .pdf-nav-unit {
- color: var(--white) !important;
- }
-
- .profile-bg-c-3 .school-id-section {
- color: var(--black);
- }
-
- .user-profile-box .orange.text {
- color: var(--red-100);
- }
-
- .orange-border {
- border-color: var(--red-100);
- }
-
- .sb-modal-dropdown-web ul li:hover {
- background-color: #e6e1f9;
- }
-}
-
-html[data-theme=Darkmode][layout='old'] {
- // lazy loading
- --lazyload-bg: #333333;
- --grey-nuance-lighter: #333333;
- --grey-nuance-darker: #111;
- --fade-grey: #f2f2f2;
-
- .sb-back-btn-panel.sb-bg-color-white {
- background-color: var(--black) !important;
- }
-
- .sbt-back-header .content-header {
- background-color: #444 !important;
- }
-
- .sb-bg-color-white {
- background-color: #333 !important;
- }
-}
-
-html[data-theme='Default'][layout='joy'] {
- --primary-hs: 206, 100%;
- --primary-color: #024F9D;
- --primary-300: #74B9EB;
- --primary-200: #AFCCE1;
- --primary-800: hsl(var(--primary-hs), 40%);
- --primary-100: #f1f1e7;
- --primary-300: #ececde;
- --sbt-filter-bar-bg: #E9E8D9;
- --sb-search-btn-bg: #333333;
- --sb-search-btn-text: #ffffff;
- --cc-grade-pill-container-bg: #e9e8d8;
- --sbfaq-compt-bg: #e9e8d9;
-
- app-signup {
- .sb-checkbox.sb-checkbox-primary label:before {
- border-color: #004E8A;
- }
- }
-}
-
-html[layout='joy'] {
- --primary-theme: #FFD954;
- --sbt-header-bg: var(--primary-theme);
- --sbt-body-bg: #e9e8d9;
- --sbt-body-bg2: #f3f3e5;
- --sbt-primary-bg: var(--primary-theme);
- --sbt-border-chapter: #E4E8EE;
- --sbt-language-dropdown-bg: var(--white);
- --sbt-language-dropdown-item: #008840;
- --sbt-language-selectbox: #008840;
- --sbt-language-dropdown-item-hover-bg: rgba(0, 0, 0, .05);
- --sbt-language-dropdown-item-hover-text: #008840;
- --sb-profile-bg-c-4: var(--sbt-body-bg);
-
- //Modal
- --sb-modal-header-text: var(--black);
- --sb-modal-content-bg: var(--sbt-compt-bg);
- --sb-modal-actions-bg: var(--sbt-compt-bg);
-
- --sb-sidebar-menu-bg-active: var(--sbt-body-bg);
- --sb-sidebar-menu-border-bg: #024f9d;
- --sb-sidebar-menu-text: #333;
- --sb-graph-section-bg: var(--sbt-body-bg2);
-
- .profile-bg-c-3 {
- border-radius: 2rem;
- margin-top: calculateRem(24px);
- }
-
- .sb--card {
- border-radius: 1rem !important;
- box-shadow: var(--sbt-box-shadow-6px);
- }
-
- .sb--card__img .img-container {
- border-radius: 0.5rem;
- }
-
- .sb-label-badge {
- border-radius: 0.25rem;
- }
-
- .sbt-fluid-content-bg {
- padding: 0rem 0;
- border-radius: 2rem 0 0 2rem;
- margin: 0 0 0 2%;
- padding: 0 5% 2rem 3%;
-
- &[dir="rtl"] {
- border-radius: 2rem 2rem 0 0;
- padding: 0 3% 2rem 5%;
- }
- }
-
- .sbt-fluid-content-bg.sbt-footer-container {
- margin: 0 0 0 0;
- }
-
- .sbt-filter {
- margin-top: 2rem !important;
- }
-
- .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 {
- background: var(--sbt-body-bg2);
- padding: 2rem 5% 2rem 3%;
- margin: 0 0 0 2%;
- border-radius: 2rem 0 0 2rem;
-
- &[dir="rtl"] {
- border-radius: 2rem 2rem 0 0;
- padding: 2rem 5% 2rem 3%;
- }
- }
-
- .profile-bg-c-4 {
- border-radius: 2rem;
- }
-
- .sbt-fluid-header-bg {
- background: var(--sbt-body-bg);
- }
-
- .sbt-fluid-content-bg {
- background: var(--sbt-body-bg2);
- }
-
- .sb-btn-link-primary {
- &:hover {
- color: var(--primary-800);
- background-color: var(--primary-100);
- }
- }
-
- .sbhelp_container__left {
- border-radius: 1.5rem;
- }
-
- .navBlock .pdf-nav-unit {
- color: var(--gray-800) !important;
- }
-
- .sbt-fluid-header-bg {
- display: block;
- }
-
-
- .sb-onboard sb-form .sb-textbox,
- .sb-onboard sb-form .list-border,
- sb-form .multi-select-container .list-border,
- sb-form .sb-textbox,
- sb-form .async-text {
- border-radius: 1.75rem;
- }
-
- .kabab-menu-dropdown-content {
- border-radius: var(--sbt-bradius-16);
-
- .list {
-
- &:hover,
- &:active {
- border-radius: var(--sbt-bradius-16);
- }
- }
- }
-
- /* new button style */
- .sb-btn {
- box-shadow: var(--sbt-box-shadow-6px);
- border: 0px;
- }
-
- .sb-btn-normal {
- border-radius: var(--sbt-bradius-24);
- height: calculateRem(40px);
- padding: calculateRem(8px) calculateRem(24px);
- }
-
- .sb-btn-sm,
- .sb-btn-xs {
- border-radius: var(--sbt-bradius-24);
- }
-
- .sb-btn-square:hover {
- border-radius: var(--sbt-bradius-8);
- }
-
- .sb-btn-round {
- background: var(--white);
- border-radius: 50% !important;
- box-shadow: var(--sbt-box-shadow-6px) !important;
- min-width: 3rem !important;
- padding: calculateRem(8px) !important;
- height: 3rem !important;
- width: 3rem !important;
-
- span {
- display: none;
- }
-
- .icon-svg--xxs {
- width: calculateRem(16px);
- height: calculateRem(16px);
- }
- }
-
- .sb-btn-link-primary {
- box-shadow: none;
- padding: calculateRem(8px) calculateRem(16px);
-
- &:hover {
- border-radius: calculateRem(16px);
- color: var(--primary-800);
- background-color: var(--primary-100);
- }
- }
-
- .sb-btn-square.sb-btn-sm {
- box-shadow: none;
- }
-
- .ui.dropdown.selection.sb-form-control .menu {
- border-radius: 0 0 var(--sbt-bradius-16) var(--sbt-bradius-16);
- }
-
- .sb-pageSection-content .slick-slider .slick-track {
- padding-bottom: calculateRem(8px);
- }
-
- .sbt-dialcode-inputsearch {
- border-radius: var(--sbt-bradius-16);
- box-shadow: var(--sbt-box-shadow-6px);
- }
-
- .sb-search-box .sb-search-input {
- height: calculateRem(40px);
- border-radius: var(--sbt-bradius-24) 0 0 var(--sbt-bradius-24);
- }
-
- .sb-search-box.hide-btn .sb-search-input {
- border-radius: var(--sbt-bradius-24);
- }
-
- .sb-search-box.no-btn .sb-search-input {
- height: 2.5rem;
- border-radius: var(--sbt-bradius-24);
- }
-
- .sb-search-box .icon.search {
- top: 0.75rem;
- }
-
- .sb-btn.sb-btn-normal.sbt-dialcode-btn {
- border-radius: 0px var(--sbt-bradius-16) var(--sbt-bradius-16) 0px;
- box-shadow: none;
- }
-
- // modal styles
- .sb-modal {
- .ui.modal {
- box-shadow: var(--sbt-box-shadow-6px);
- border-radius: var(--sbt-bradius-24);
- background-color: var(--sbt-compt-bg);
-
- .sb-modal-header {
- background-color: var(--sbt-compt-bg);
- color: var(--sb-modal-header-text);
- border-radius: var(--sbt-bradius-24) var(--sbt-bradius-24) 0 0;
- padding: calculateRem(24px) calculateRem(24px) calculateRem(8px) calculateRem(24px);
- }
-
- .sb-modal-content {
- min-height: calculateRem(100px);
- padding: calculateRem(16px) calculateRem(24px);
- overflow-y: auto;
- background: var(--sb-modal-content-bg);
- }
-
- .sb-modal-actions {
- padding: calculateRem(8px) calculateRem(24px) calculateRem(24px);
- background: var(--sb-modal-actions-bg);
- border-top: calculateRem(0px) solid var(--gray-100);
- border-radius: 0 0 var(--sbt-bradius-24) var(--sbt-bradius-24);
- }
-
- &>.close {
- height: calculateRem(24px);
- width: calculateRem(24px);
- border-radius: 50%;
- box-shadow: var(--sbt-box-shadow-3px);
- right: calculateRem(12px) !important;
- top: calculateRem(12px) !important;
- background-color: var(--white);
-
- &::before {
- content: "\2715";
- font-size: calculateRem(18px);
- color: #e82520;
- }
-
- }
- }
- }
-
- .ui.modal>:last-child {
- border-bottom-left-radius: var(--sbt-bradius-24);
- border-bottom-right-radius: var(--sbt-bradius-24);
- }
-
- .ui.modal>.icon:first-child+*,
- .ui.modal>:first-child:not(.icon) {
- border-top-left-radius: var(--sbt-bradius-24);
- border-top-right-radius: var(--sbt-bradius-24);
- }
-
- .ui.grid.sb-form.m-0.sb-workspace-modal.p-16 {
- padding: 0px !important;
- }
-
- // form fields
- .sb-form-control {
- border-radius: var(--sbt-bradius-16) !important;
- padding-left: calculateRem(16px);
- }
-
- .sb-field .ui.selection.dropdown,
- sui-multi-select.ui.selection.dropdown {
- border-radius: var(--sbt-bradius-24) !important;
- padding-left: calculateRem(16px);
- }
-
- sui-multi-select.ui.selection.dropdown {
- background: var(--white);
- }
-
- .sb-prominent-filter .sb-prominent-filter-container .sb-prominent-filter-field .ui.selection.dropdown {
- background: var(--white);
- font-size: calculateRem(12px);
- width: 100%;
- min-height: calculateRem(32px);
- padding: calculateRem(4px) calculateRem(8px);
- border-color: var(--gray-200);
- display: flex;
- align-items: center;
- flex-wrap: wrap;
-
- .text {
- padding: 0;
- }
- }
-
- .sb-prominent-filter .sb-prominent-filter-container .sb-prominent-filter-field .ui.selection.dropdown .ui.active.selection.dropdown,
- .ui.selection.active.dropdown .menu,
- .ui.dropdown.selection,
- .ui.dropdown.selection .menu {
- border-radius: var(--sbt-bradius-24) !important;
- }
-
- .ui.dropdown.selection .menu {
- margin-top: calculateRem(4px);
- }
-
- .sb-prominent-filter .sb-prominent-filter-container .sb-prominent-filter-field .topic-picker-selector {
- background: var(--white) !important;
- border-radius: var(--sbt-bradius-24);
- }
-
- .sbt-user-profile .sb-prominent-filter {
- background: var(--sbt-compt-bg);
- border-radius: calculateRem(24px);
- padding: calculateRem(16px);
- margin-top: calculateRem(16px);
- }
-
- .sbt-user-profile .ui.grid .ui.segment {
- background: var(--sbt-compt-bg);
- border-radius: var(--sbt-bradius-24);
- }
-
- .ui.pagination.menu {
- border-radius: var(--sbt-bradius-24);
- overflow: hidden;
- }
-
- .sb-back-btn-panel,
- .sbt-back-header .content-header,
- .sbt-activity-search .sb-prominent-filter,
- .sbt-add-member .sb-bg-color-white,
- .sbt-mygroups-details .sb-bg-color-white,
- .sbt-groups-login .content-header,
- .sbt-dial-code .sb-bg-color-white {
- background: var(--sbt-compt-bg) !important;
- }
-
- .sb-back-btn-panel {
- border-radius: var(--sbt-bradius-24) !important;
- padding: 0px calculateRem(16px);
- }
-
- .sbt-activity-search .sb-prominent-filter {
- border-radius: var(--sbt-bradius-24) !important;
- margin-top: calculateRem(4px);
- }
-
- .sbt-activity-search .sb-search-box.large {
- border-radius: var(--sbt-bradius-24);
- overflow: hidden;
- box-shadow: var(--sbt-box-shadow-6px);
- }
-
- .sbt-add-member .sb-bg-color-white,
- .sbt-mygroups-details .sb-g .sb-bg-color-white {
- border-radius: var(--sbt-bradius-24) !important;
- }
-
- // back panel with header combination
- .sbt-back-header .sb-back-btn-panel {
- border-radius: var(--sbt-bradius-24) calculateRem(24px) 0px 0px !important;
- }
-
- .sbt-back-header .content-header {
- border-radius: calculateRem(24px) !important;
- padding: 0px calculateRem(16px);
- position: relative;
- z-index: 3;
- background: var(--sbt-compt-bg) !important;
- }
-
- .sb-search-box {
- border-radius: var(--sbt-bradius-24);
- overflow: hidden;
- }
-
- .sbt-groups-login .content-header {
- border-radius: var(--sbt-bradius-24);
- margin-top: calculateRem(24px);
- padding: 0px calculateRem(16px);
- }
-
- .sb-members-list-item:hover,
- .sb-members-list-item.active {
- border-radius: calculateRem(8px);
- }
-
- // public content player
- .ui.container,
- .ui.grid.container {
- width: 100% !important;
- margin: 0px !important;
- }
-
- .cc-player__btn-back {
- padding: 0 calculateRem(16px);
- border-radius: var(--sbt-bradius-24) var(--sbt-bradius-24) 0px 0px;
- background: var(--sbt-compt-bg) !important;
- }
-
- .help-page {
-
- .help-page__header {
- border-radius: calculateRem(24px) !important;
- width: 100%;
- background: var(--sbt-compt-bg) !important;
- }
-
-
- &__visit-helpcenter,
- &__content {
- width: 100%;
- margin: 0 auto;
- }
-
- &__content {
-
- .panel {
- border-bottom: 0px;
- overflow: hidden;
- margin-bottom: 1rem;
- border-radius: 2rem !important;
- box-shadow: var(--sbt-box-shadow-6px) !important;
-
- .panel-heading {
-
- .panel-title {
- font-size: var(--font-size-normal);
- }
-
- .panel-title-blue {
- font-weight: bold;
- }
-
- .icon-svg {
- .icon-svg--primary {
- fill: var(--gray-800);
- }
- }
- }
-
- .panel-collapse {
- background: var(--white);
-
- .panel-interact {
- .yes-clicked {
- min-width: calculateRem(220px);
- }
- }
-
- .panel-info {
- .submit-button {
- border-radius: calculateRem(24px);
- cursor: pointer;
- }
- }
- }
- }
- }
-
- &__visit-helpcenter {
- background: var(--sbt-compt-bg);
- border-radius: calculateRem(24px);
- }
- }
-
- .cc-player__content-header,
- .help-page__header {
- border-radius: 0px 0px var(--sbt-bradius-24) var(--sbt-bradius-24);
- padding: calculateRem(16px);
- margin-bottom: calculateRem(24px);
- box-shadow: none;
- background: none; //var(--sbt-compt-bg)
- padding-top: 0px;
- background: none; //var(--sbt-compt-bg)
- }
-
- .cc-player__content-header .ui.container.py-16 {
- padding: 0px 0px 0px 0px !important;
- }
-
- .cc-player__content-header .ui.container .cc-player {
- width: 100%;
- }
-
- .header-info {
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
-
- .sb-single-resource {
- .content-video__player {
- box-shadow: var(--sbt-box-shadow-6px);
- margin-bottom: calculateRem(16px);
- border-radius: var(--sbt-bradius-24);
- overflow: hidden;
- }
- }
-
- .content-video__player,
- .sbt-shadow-radius {
- box-shadow: none !important;
- border-radius: var(--sbt-bradius-24);
- }
-
- .sbt-shadow-radius {
- box-shadow: var(--sbt-box-shadow-6px) !important;
- border-radius: var(--sbt-bradius-24);
- overflow: hidden;
- }
-
- .contentViewerIframeShadow {
- border-radius: var(--sbt-bradius-24) var(--sbt-bradius-24) 0px 0px;
-
- @media screen and (max-width: 992px) {
- border-radius: 0px 0px 0px 0px;
- }
-
- &.player-fullscreen {
- border-radius: initial;
- }
- }
-
- .content-video__player__details {
- border-radius: 0 0 var(--sbt-bradius-24) var(--sbt-bradius-24);
- background: var(--sbt-body-bg2);
- }
-
- .sb-accordion-content,
- .ui.styled.sb-accordion.accordion,
- .ui.styled.accordion .title {
- border-radius: var(--sbt-bradius-24);
- }
-
- .ui.styled.accordion .title {
- background: var(--sbt-compt-bg);
- }
-
- .ui.styled.accordion .active.title {
- border-radius: var(--sbt-bradius-24) var(--sbt-bradius-24) 0px 0px;
- }
-
- .sb-accordion-content.sb-bg-color-white {
- background: var(--sbt-compt-bg) !important;
- padding: calculateRem(24px) calculateRem(24px) !important;
- }
-
- .course-consumption-container {
- position: relative;
- z-index: 9;
- }
-
- .course-consumption-container .sb-course-details__training .training-info .training-relevant {
- background: var(--sbt-compt-bg) !important;
- border-radius: var(--sbt-bradius-24);
- padding: calculateRem(24px);
- }
-
- .course-consumption-container .training-modules .course-consumption-modules-container {
- background: var(--sbt-compt-bg) !important;
- border-radius: var(--sbt-bradius-24);
- }
-
- .sbaccordion {
- box-shadow: none !important;
- border-radius: var(--sbt-bradius-24);
- }
-
- .accordion-item-header-expanded .sbaccordion__panel-header {
- border-radius: var(--sbt-bradius-24) var(--sbt-bradius-24) 0px 0px;
- }
-
- .sbaccordion__panel-content {
- border-bottom-left-radius: var(--sbt-bradius-24);
- border-bottom-right-radius: var(--sbt-bradius-24);
- border: 0px;
- background: var(--sbt-compt-bg);
- max-height: 100%;
- padding: calculateRem(4px) calculateRem(16px) calculateRem(16px) calculateRem(16px);
- }
-
- .sbchapter {
- border-bottom: 0px;
- padding: 0 0 0rem;
- margin-bottom: 0rem;
- }
-
- .sbchapter__item {
- border-radius: var(--sbt-bradius-32);
- padding: calculateRem(8px) calculateRem(16px);
- min-height: calculateRem(48px);
- margin-bottom: calculateRem(16px);
- border: calculateRem(1px) solid var(--cc-toc-card-item-br);
- box-shadow: none;
-
- .course-content {
- border-radius: var(--sbt-bradius-32);
- padding-left: calculateRem(24px);
- border: calculateRem(1px) solid var(--sbt-body-bg);
- box-shadow: none;
- margin-bottom: calculateRem(16px);
- }
- }
-
- .sbchapter__title {
- margin-bottom: calculateRem(16px) !important;
- font-size: calculateRem(14px);
- }
-
- .sbchapter__item__title {
- color: var(--cc-toc-card-item-title);
- }
-
- .sbchapter__item--active .sbchapter__item__title {
- font-weight: normal !important;
- }
-
- .accordion-item-header-expanded .sbaccordion__panel-header {
- border: 0px;
- }
-
- .sbaccordion__panel-header {
- border: 0px;
- border-radius: var(--sbt-bradius-24);
- }
-
- .ui.styled.accordion .accordion .content,
- .ui.styled.accordion .content {
- background: var(--sbt-compt-bg) !important;
- border-radius: 0px 0px var(--sbt-bradius-24) var(--sbt-bradius-24);
- }
-
- .sbaccordion__panel-header .icon-svg,
- .help-page__content .panel-heading .icon-svg {
- background: var(--white);
- box-shadow: var(--sbt-box-shadow-3px);
- border-radius: 50%;
- }
-
- .sbaccordion__panel-header .icon-svg--xs,
- .help-page__content .panel-heading .icon-svg {
- width: calculateRem(24px);
- height: calculateRem(24px);
- padding: calculateRem(1px) calculateRem(4px) calculateRem(4px) calculateRem(4px);
- }
-
-
- .content-metadeta {
- border-radius: var(--sbt-bradius-24);
- background: var(--sbt-compt-bg) !important;
- }
-
- .content-metadeta__content {
- border-bottom: 0px;
- margin: calculateRem(24px) 0px;
- }
-
- .toc-box-shadow {
- box-shadow: none !important;
- }
-
- .training-relevant,
- .sbt-certified-course,
- .sb-no-course-found {
- background: var(--sbt-compt-bg) !important;
- border-radius: var(--sbt-bradius-24);
- padding: calculateRem(16px);
- }
-
- .certified-course__progress {
- border-radius: var(--sbt-bradius-24);
- background: var(--sbt-compt-bg) !important;
- }
-
-
- .right-flower-position-adjust-container {
- position: relative;
- z-index: 8;
- }
-
- .certified-course__progress {
- background: var(--sbt-compt-bg) !important;
- border-radius: var(--sbt-bradius-24);
- padding: calculateRem(24px) !important;
-
- .fsmall {
- font-size: var(--font-size-md) !important;
- font-weight: bold;
- }
- }
-
- .sbaccordion {
- &__panel-header {
- border-top-left-radius: var(--sbt-bradius-24);
- border-top-right-radius: var(--sbt-bradius-24);
- background: var(--sbt-compt-bg);
- border: none;
- padding: calculateRem(16px);
- height: calculateRem(48px);
- }
- }
-
- .sb-toc-credits .sb-bg-color-gray-0 .sbaccordion__panel-header {
- height: calculateRem(56px) !important;
- }
-
- sb-accordion-header[aria-expanded="false"] {
- .sbaccordion__panel-header {
- border-bottom-left-radius: var(--sbt-bradius-24);
- border-bottom-right-radius: var(--sbt-bradius-24);
- }
- }
-
- .sb-toc-child-item {
- background: var(--white);
- }
-
- .side-toc-content.chapter-box {
- background-color: var(--sbt-compt-bg);
- }
-
- .sb-toc-child-item,
- .side-toc-content.chapter-box {
- box-shadow: var(--sbt-box-shadow-6px);
- padding: calculateRem(16px);
- display: block;
- width: 100%;
- height: 100%;
- margin-bottom: calculateRem(16px);
- border-radius: var(--sbt-bradius-24);
-
- .toc-child-item,
- .child-content-padding {
- padding: calculateRem(16px) calculateRem(8px);
- background: var(--white);
- border-radius: calculateRem(24px);
- box-shadow: var(--sbt-box-shadow-6px);
- margin-bottom: calculateRem(16px);
- }
- }
-
- .side-toc-content.chapter-box {
- box-shadow: none;
- }
-
- // Assesment Player
-
- .back-btn-container,
- .textbook-container {
- background: var(--sbt-compt-bg) !important;
- }
-
- .back-btn-container,
- .textbook-container {
- padding: 0 calculateRem(16px);
- }
-
- .back-btn-container {
- border-radius: var(--sbt-bradius-24) var(--sbt-bradius-24) 0px 0px;
- }
-
- .textbook-container {
- border-radius: 0px 0px var(--sbt-bradius-24) var(--sbt-bradius-24);
- }
-
- .cc-player__list {
- border-radius: var(--sbt-bradius-24);
- padding: 0 1rem !important;
- background: none !important;
- box-shadow: none;
- overflow: hidden;
-
- .sb-grade-pills-container {
- padding: calculateRem(24px) calculateRem(16px) !important;
- border-radius: calculateRem(24px);
- }
-
- .main-side-toc-content {
- box-shadow: none !important;
- max-height: 100%;
- overflow-y: inherit;
-
- .sbaccordion {
-
- .sbaccordion__panel-header,
- .sbaccordion__panel-content {
- background: var(--sbt-compt-bg) !important;
- }
-
- .sbchapter {
- background: var(--cc-chapter-bg);
- padding: calculateRem(16px) calculateRem(8px);
- border-radius: calculateRem(24px);
- box-shadow: var(--sbt-box-shadow-6px) !important;
- margin-bottom: calculateRem(16px);
- }
-
- }
-
- }
-
- .main-side-toc-content,
- .sb-toc-credits {
- margin-top: calculateRem(16px);
- }
-
- .sb-toc-credits {
-
- .sbaccordion__panel-header,
- .sbaccordion__panel-content {
- background: var(--sbt-compt-bg) !important;
- }
- }
-
- .sb-toc-credits .credits-section {
- padding: 0;
- word-break: break-word;
- }
-
- .sb-slider-pills-container .sb-grade-pills-container {
- background: var(--cc-grade-pill-container-bg) !important;
- }
-
- h5 {
- padding: 0 calculateRem(16px) calculateRem(16px) 0 !important;
- }
- }
-
- .sb-course-details .sbt-certified-course {
- .certified-course__certificate {
- background-color: inherit;
- }
- }
-
- .sb-no-course-found {
- border: none;
- }
-
- .sbt-home-search-component .sb-grid .sb-card {
- width: auto;
- }
-
- .popup-content {
- width: calculateRem(896px) !important;
- }
-
- app-batch-card .link.cards {
- width: 100%;
- }
-
- .cc-player__border-fix {
- border-top-left-radius: calculateRem(24px);
- border-top-right-radius: calculateRem(24px);
- padding-top: calculateRem(16px);
- }
-
- .sb-pageSection-content .slick-slider .slick-track .slick-slide .sb--card {
- width: calculateRem(320px);
- }
-
- app-usage-reports .sb-workspace-bg .sb-sidebar-menu {
- position: inherit !important;
- }
-
- .sbt-page-gap {
- padding-top: calculateRem(0px);
- }
-
-
- .ui.styled.accordion,
- .ui.styled.accordion .accordion {
- background: var(--sbt-compt-bg);
- }
-
- .header .title {
- font-weight: normal !important;
- color: var(--gray-800) !important;
- }
-
- .sb-slider-pills-container .sb-pills-container .pill {
- white-space: normal !important;
- }
-
- .sb-pageSection-header {
- margin: 0.5rem 0 0px 0;
- }
-
- .sb-content__bar {
- background: none;
- }
-
- .sb-rating.ui.star.rating .active.icon,
- .sb-rating.ui.star.rating .icon.selected {
- color: var(--primary-color) !important;
- }
-
- app-view-all .sbt-filter {
- margin-top: calculateRem(-32px);
- }
-
- .reports-back-btn {
- width: 100%;
- margin: 1rem 0 0 0;
- }
-
- .reports-content-header {
- padding: 1rem;
- width: 100%;
- margin: 0;
- }
-
- .sb-new-theme-accordion {
- &.ui.styled.accordion .title {
- padding: calculateRem(24px) !important;
- }
-
- .sb-accordion-title {
- font-size: calculateRem(16px) !important;
- }
-
- .sb-accordion-content {
- padding-top: 0 !important;
- }
- }
-
- .sb-update-data-settings {
- .sb-radio-btn-checkbox label:after {
- left: calculateRem(3px);
- top: calculateRem(3px);
- height: calculateRem(10px);
- width: calculateRem(10px);
- }
- }
-
- .sb-modal .sb-bulk-upload-btn {
- line-height: 1.5rem;
- }
-
- .sb-sideview-tab-container .report__header .sb-last-update-status {
- margin-right: calculateRem(16px);
- }
-
- .sb-graph-section {
- border-radius: var(--sbt-bradius-24) !important;
- }
-
- .sbt-report-tabs-panel {
- border-radius: var(--sbt-bradius-24) var(--sbt-bradius-24) 0px 0px !important;
- }
-
- .sbt-report-btns-panel {
- border-radius: 0 0 var(--sbt-bradius-24) var(--sbt-bradius-24) !important;
- }
-
- #report-summary {
- app-report-summary {
- .ui.message {
- border-radius: var(--sbt-bradius-24);
- }
- }
- }
-
- .certificate-bg {
- background: #F2F2EA !important;
- border-radius: calculateRem(24px) !important;
- }
-
- .sb-browse-btn {
- height: 2.1rem;
- border: calculateRem(2px) solid #7ab4ee;
- color: #7ab4ee;
- font-weight: bold;
- background: #edf4f9;
- }
-
- .sb-btn-nolayer {
- height: 2.0rem !important;
- box-shadow: none;
- }
-
- .sb-desktop-content-manager {
- .sb-single-pannel-accordion-heading {
- border-radius: var(--sbt-bradius-24) var(--sbt-bradius-24) 0 0;
- background-color: #5630DC;
- }
- }
-
- .ui.styled.accordion.sb-single-pannel-accordion.sb-desktop-content-manager {
- box-shadow: none;
- background: none;
- border-radius: var(--sbt-bradius-24) var(--sbt-bradius-24) 0 0;
- background-color: var(--white);
- box-shadow: calculateRem(5px) calculateRem(5px) calculateRem(2px) 0 rgba(0, 0, 0, 0.1) !important;
- }
-
- .sb-desktop-content-manager.ui.styled.accordion .accordion {
- box-shadow: calculateRem(5px) calculateRem(5px) calculateRem(2px) 0 rgba(0, 0, 0, 0.1);
- border-radius: var(--sbt-bradius-24) var(--sbt-bradius-24) 0 0;
- }
-
- .sb-desktop-content-manager.ui.styled.accordion .content {
- border-radius: 0;
- }
-
- .sb-desktop-library-card .sb--card .card-hover {
- top: initial;
- height: 5rem;
- opacity: 1;
- }
-
- .about-page {
- width: calc(100% - 4%);
- margin: 0 auto;
- }
-
- & [dir='rtl'] {
- .sb-modal .ui.modal .close {
- left: calculateRem(12px) !important;
- right: auto;
- }
- }
-
- .cc-player {
- .ui.info.message {
- border-radius: calculateRem(20px);
- }
- }
-
- .no-result-container {
- border-radius: 1.5rem;
- background: var(--sbt-compt-bg) !important;
- }
-
- .sb-back-actionbar {
- min-height: 5rem;
- background: none;
- padding: 0px;
- display: flex;
- background: var(--sbt-header-bg) !important;
- border-radius: 1.5rem 1.5rem 0 0px;
- padding: 0.5rem 1rem;
- position: relative;
- margin: 0rem 5%;
- }
-
- .cc-player__btn-back {
- min-height: 5.5rem;
- align-items: center;
- justify-content: center;
- display: flex;
- }
-
- .sbt-inside-page-container #player-area-height .aspectratio {
- box-shadow: var(--sbt-box-shadow-6px) !important;
- border-radius: var(--sbt-bradius-24);
- overflow: hidden;
- }
-
- .sbt-inside-page-container .sb-slider-pills-container {
- padding: 0rem 0rem !important;
- border-radius: 1.5rem;
- background: var(--cc-grade-pill-container-bg) !important;
- }
-
- @media screen and (max-width: 768px) {
- .sbt-fluid-content-bg {
- margin: 0;
- border-radius: 0;
- }
-
- .sbt-header .sbt-container {
- padding: 0 0rem !important;
- }
-
- .sbt-header-bar {
- padding: 0 1rem;
- }
-
- .sbt-inside-page-container,
- .sbt-center-container {
- margin-top: -1.5rem !important;
- z-index: 2;
- position: relative;
- padding: 1rem !important;
- margin-left: 0 !important;
- }
-
- .content-video {
- background: var(--sbt-body-bg2);
- padding: 0rem;
- border-radius: calculateRem(16px);
- }
-
- .sb-back-actionbar .sb-btn-link-primary {
- align-self: baseline;
- }
-
- .sb-back-actionbar {
- padding-bottom: 2.5rem;
- margin: 0 0;
- }
-
- .content-video__player__details {
- padding: 0.5rem;
- }
-
- .content-metadeta {
- background: var(--sbt-body-bg2) !important;
- }
- }
-
- table.dataTable.no-footer {
- border-radius: var(--sbt-bradius-24);
- }
-
- .sb-forum-btn {
- height: 2rem !important;
- }
-}
-
-html[data-theme=Darkmode] {
- --primary-theme: #ffd92a;
- --primary-color: #ffd92a;
- --primary-0: #fffcee;
- --primary-100: #fff8db; // default button bg
- --primary-200: #fffd2a; // divider
- --primary-250: #f1f1c7;
- --primary-300: #ffeb2a; // outline, focus fields
- --primary-400: var(--primary-color); // button bg, heading, table titles, links, toggles
- --primary-600: #ffc72a; // on press
- --primary-800: #ffb62a; // hover
- --secondary-200: #ffd92a;
- --secondary-color: #ffd92a;
- --gray-800: var(--white);
- --sbt-primary-bg: var(--primary-theme);
- --sbt-border-chapter: #E4E8EE;
- --sbt-body-bg: #000000;
- --sbt-body-bg2: #333 !important;
- --sbt-header-bg: #333333;
- --sbt-filter-bar-bg: #333;
- --sb-container-bg: var(--black);
- --sbt-footer-bg: #333333;
- --sbt-box-shadow-black: rgba(0, 0, 0, 0.2);
-
- --sbt-theme-purple-selectbox: #ffffff;
- --sbt-theme-green-selectbox: #ffffff;
- --sbt-theme-blue-selectbox: #ffffff;
- --sbt-theme-light-blue-selectbox: #ffffff;
- --sbt-theme-purple-selectbox-lbg: #222222;
- --sbt-theme-green-selectbox-lbg: #222222;
- --sbt-theme-blue-selectbox-lbg: #222222;
- --sbt-theme-light-blue-selectbox-lbg: #222222;
- --sbt-pill-hs: 212, 100%;
- --sbt-pill-bg: #5c5c5c;
- --sbt-pill-bg-active: #ffd92a; // #0076FE
- --sbt-pill-text: #ffffff;
- --sbt-pill-text-hover: #222222;
- --sbt-compt-bg: #333333;
-
- --sbfield-label-text: var(--gray-100);
-
- // new styles
- --sbt-badge-bg: #222222;
- --sbt-sidemenu-overlay-bg: 34, 34, 34;
- --sbt-sidemenu-bg: #333333;
- --sidebar-profil-header-bg: #222222;
- --sidebar-li-hover-bg: #222222;
- --sb-linkmenu-bg: #333;
- --sb-linkmenu-text: #ffffff;
- --sb-linkmenu-active-text: var(--primary-color);
- --sb-linkmenu-text-hover: #222222;
- --sb-linkmenu-bg-hover: var(--primary-color);
- --sb-linkmenu-icon-bg-hover: #222222;
- --sb-btn-default-color: var(--black);
-
- //header
- --sb-menu-bg: var(--black);
- --sb-menu-item: var(--gray-0);
- --sb-menu-item-hover: var(--primary-color);
- --sb-header-bg: #333333;
- --sb-notification-bg: var(--gray);
- --bell-icon: var(--white);
- --sb-header-qrcode-btn-bg: #333333;
- --sb-header-qrcode-btn: var(--primary-color);
- --sb-header-qrcode-btn-border: #ffeb2a;
- --sb-search-input-bg: #222222;
- --sb-search-input-text: var(--gray-200);
- --sb-search-btn-bg: #efebd8;
- --sb-search-btn-text: #000000;
- --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);
- --filter-pref-text: var(--gray-100);
- --sbt-class-bar-label-text: var(--gray-100);
- --sbt-green-bg: #222222;
- --sbt-theme-green-selectbox: #ffffff;
- --sb-search-input-text: #ffffff;
- --sb-search-input-bg: #222222;
- --sb-sidebar-menu-bg-active: var(--sbt-filter-bar-bg);
- --sb-sidebar-menu-border-bg: var(--primary-color);
- --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: #222222;
- --cc-accordion-panel-header-bg: #333333;
- --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);
- --sb-pill-bg: #222222;
- --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: #333333;
- --cc-grade-pill-text: var(--white);
- --cc-grade-pill-bg-hover: var(--primary-color);
- --cc-grade-pill-text-hover: #222222;
- --cc-grade-pill-svg-fill: #222222;
- --cc-sbcard-data1-2-text: var(--primary-color);
- --cc-sbcard-bg: #333;
- --cc-sbcard-img-container-bg: var(--gray-100);
- --cc-sbcard-title: #ffffff;
- --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(--white);
- --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: #444444;
- --cc-sbcard-data1-bg-active: #ffeb2a;
- --sbt-pill-hs: 212, 100%;
- --cc-sbcard-data2-bg: #444444;
- --cc-sbcard-data2-bg-active: #ffeb2a;
- --cc-sbcard-data0-bg: #444444;
- --cc-sbcard-data0-bg-active: #ffeb2a;
- --cc-sbcard-type-bg: var(--black);
- --cc-sbcard-type-text: var(--white);
- --sbt-filter-switcher-bg: var(--primary-theme);
-
- //landing page
- --sb-landing-page-bg: var(--black);
- --sb-landing-page-segments: #333333;
- --sb-landing-page-cards: var(--sb-landing-page-bg);
- --sb-landing-page-cards-desc: var(--white);
- --sb-landing-page-btn: var(--sb-landing-page-segments);
-
- //profile page
- --sb-profile-certificate-bg: #333333;
- --sb-course-progress-status-label: var(--black);
- --sb-list-data: var(--gray-100);
- --sb-list-items: var(--white);
- --sb-profile-bg-c-4: #444;
- --sb-profile-page-basic-label-bg: #333333;
-
- //black header bar
- --brand-header-tail-bg: #000000;
- --brand-header-tail-text: #ffffff;
- --primary-menu-link-active: #ff714a;
-
- // joy theme
- --themeflower-bg: #1a1a1a;
- //pagination
- --sb-pagination-bg: #333333;
- --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: #444444;
- --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: #222222;
- --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: #222222;
- --ui-seleted-label-bg-hover: var(--black);
- --state-medium-container-bg: #444444;
- --sb-class-bar-bg: #333333;
- --sb-dropdown-menu-text: var(--white);
- --ui-dropdown-menu-selected-item-bg: #444444;
- --ui-dropdown-menu-selected-item: var(--white);
- --sb-filter-selected-dropdown-hover: var(--black);
-
- //slick slide card
- --sb-card-bg: #222222;
- --sb-card-border: 0.0625rem solid transparent;
- --sb-card-text: var(--white);
- --sb-card-slick-arrows-bg: #444444;
- --sb-profile-page-container: #333333;
-
- //myGroups
- --sb-mygroups-bg: #444444;
- --groups-content-header: #444444;
- --kabab-menu-hover-bg: var(--black);
- --kabab-menu-dropdown-bg: #222222;
- --kabab-menu-dropdown-item-active: #333333;
-
- --sbfaq-compt-bg: #222;
- --cc-listView-compt-title: #fff;
- --cc-listView-compt-itemText: #fff;
- --cc-carousel-title: #fff;
- --cc-faq-yesbtn-bg: var(--primary-color) !important;
- --cc-faq-yesbtn-text: #000 !important;
- --cc-faq-nobtn-bg: #222;
- --cc-faq-nobtn-text: #fff;
-
- // cc pills box
- --cc-pills-grid-item: #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: #ffd92a;
-
- // notification
- --cc-notification-list-bg: #222222;
- --cc-notification-list-br: #111111;
- --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: #333333;
- --cc-toc-card-item-hover: var(--primary-color);
- --cc-toc-card-item-br: #222222;
- --cc-toc-card-item-bs: var(--rc-rgba-primary);
- --cc-toc-card-item-img-bg: var(--rc-dddddd);
- --cc-toc-card-item-title: #ffffff;
- --cc-toc-card-item-title-hover: #333333;
- --cc-toc-card-item-score-text: #3F19C3;
-
- //toc item
- --cc-chapter-br: var(--gray-100);
- --cc-chapter-bg: #222222;
- --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);
- --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: #222222;
- --cc-faq-panel-interact-bg: #222222;
- --cc-faq-yesbtn-bg: inherit;
- --cc-faq-yesbtn-text: #000000;
-
- //layout
- --cc-lb-card-hlist-title: var(--black);
- --cc-lb-card-grid-title: var(--white);
- --cc-badge-bg: #222222;
- --cc-badge-text: #ffffff;
- --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);
-
- //Modal
- --sb-modal-header-text: var(--black);
- --sb-modal-content-bg: var(--sbt-compt-bg);
- --sb-modal-actions-bg: var(--sbt-compt-bg);
-
- --visit-helpcenter-bg: #333333;
-
- //SDK
- --sdk-end-page-title: #fff;
- --sdk-end-page-replay-icon: #fff;
- --sdk-end-page-replay-section-bg: #333;
- --sdk-end-page-replay-section-hover: #222;
- --sdk-end-page-title-span: #fff;
- //QUML
- --quml-main-bg: #333;
- --quml-color-primary-contrast: #fff;
- --quml-scoreboard-sub-title: #f2f2f2;
- --quml-mcq-title-txt: #fff;
- --quml-option-card-bg: #222222;
- --quml-btn-border: #222;
- --quml-option-selected-checkmark: #333;
- --quml-navigation-btns: #333;
- --quml-question-bg: #333;
- --quml-scoreboard-unattempted: #fff;
- --quml-info-icon: #000 !important;
- --quml-close-icon: #fff;
-
- --signup-panel-bg: var(--sbt-body-bg2);
-
- input.sb-form-control:-internal-autofill-selected {
- color-scheme: dark;
- box-shadow: 0 0 0 1000px #333 inset;
- }
-
- 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: #fff !important;
- opacity: 1 !important;
- /* Firefox */
- }
-
- :-ms-input-placeholder,
- ::-ms-input-placeholder {
- /* Internet Explorer 10-11 */
- color: #fff !important;
- }
-
- .sb-btn-link-primary:hover,
- .sb-btn-link-primary:active,
- .sb-btn-link-primary.active {
- background-color: var(--primary-800);
- }
-
- sb-pills-grid[ng-reflect-title='Browse by Categories'] {
- .sb-label-grid.sb-pills-grid .item {
- background-color: #222 !important;
- }
- }
-
- .sb-label-grid .item:hover {
- background: #333;
- }
-
- .sb-btn-round {
- background: #444444;
- }
-
- .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, 0.75);
- }
-
- .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: #333;
- }
-
- .sb-player-header__panel .player-pagenumber .page-count:focus~.focus-arrow,
- .batch-details__dropdown .selection.ui.dropdown {
- background: #222;
- }
-
- .ui.star.rating .icon {
- color: rgba(0, 0, 0, .5);
- }
-
- .sbchapter__item--active,
- .sbchapter__item--active:hover,
- .sbchapter__item:hover {
- border: calculateRem(1px) solid var(--cc-toc-card-item-br);
-
- .icon-svg svg.icon.icon-svg--primary {
- fill: #000 !important;
- }
- }
-
- .sb-btn-disabled {
- color: #000 !important;
-
- &:hover {
- color: #333 !important;
- }
- }
-
- .sbt-welcome-theme-container .joy-modal-footer {
- background: #333 !important;
- }
-
- //avtar
- .avatar-content {
- background: #222222 !important;
- border: calculateRem(1px) solid #222222 !important;
- color: var(--white) !important;
- }
-
- .sb-search-box .sb-btn {
- background: #FFD92A;
- color: #000;
- }
-
- .sb-modal .ui.modal>.close {
- color: #000;
- }
-
- .sbchapter__item .sbchapter__img--inprogress .icon-svg svg.icon.icon-svg--primary {
- fill: #000;
- }
-
- .sb-manage-section .sb-multi-rows:nth-child(odd) {
- background: #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: #222222;
- }
-
- .help-page__content .panel .panel-info {
- .input-text {
- background: var(--black);
- color: var(--white);
- }
-
- .submit-button {
- color: var(--black);
- }
- }
-
- app-add-member {
- .ui.container {
- .sb-bg-color-white {
- background: #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);
- }
- }
-
- .section-hr {
- border: 0.03125rem solid #000;
- }
-
-
- .sb-notification-container .clear-text a {
- color: var(--primary-color) !important;
- }
-
- .sb-bg-color-white.sb-back-btn-panel {
- background: #444444 !important;
- }
-
- .content-header {
- background: #333333;
- }
-
- .sb-bg-color-white.sb-modal-content {
- background-color: #333 !important;
- }
-
- //chatbot
- .lib-chat-panel {
- background: #222;
-
- .lib-chat-header {
- background: #000;
- color: #fff;
- }
-
- .lib-chat-body,
- .messages-container {
- background-color: #333333;
- }
-
- .chat-msg.recieved {
- background: #222;
-
- div {
- color: #fff;
- }
-
- .btn-primary {
- background: #fff;
- border: calculateRem(1px) solid #ffd92a;
- color: #000000;
-
- &:hover {
- background: #ffd92a;
- }
- }
- }
-
- .msg-input {
- background: #222;
- color: #fff;
- }
-
- .chat-msg.sent {
- background: #ffd92a !important;
- color: #222 !important;
- }
-
- .btn-info {
- background: transparent !important;
- color: #fff !important;
- border: 0px solid red !important;
-
- &:hover {
- background: #F3A819 !important;
- color: #333 !important;
- }
- }
-
- .lib-chat-footer .send-btn img {
- filter: invert(1);
- }
-
- .lib-chat-footer {
- border-top: calculateRem(1px) solid #333;
- }
-
- }
-
- .chatbox-cover .chatbox {
- border: calculateRem(1px) solid #ffd92a !important;
- background-color: #ffd92a !important;
- }
-
- .chatbox-cover .chatboxText {
- background: #ffd92a !important;
- color: #000 !important;
- }
-
- .chatbox-cover .chatbox ::after {
- border-color: #ffd92a #ffd92a 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: #fff;
- }
-
- .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;
- }
- }
-
- .user-profile-box,
- .sb-members-list-item,
- .sbt-welcome-theme-container .joy-modal-footer {
- background: #333;
- }
-
- .members-inline .sb-members-list-item,
- .sb-modal-dropdown-web ul li:hover,
- .sb-toc-child-item,
- .cc-player__btn-back {
- background: #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: #333;
- }
-
- .sb-members-list-item--medium .selected img {
- filter: invert(1);
- }
-
- .sb-form-control {
- color: var(--white) !important;
- background: #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: #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);
- }
-
- .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: #333333;
- border: calculateRem(.5px) solid var(--gray-400);
- color: #fff;
- }
-
- .sb-onbrd-g-box__guest__item {
- box-shadow: 0 1.25rem 2.5rem -0.625rem #191818;
- background-color: #222;
- border: 0.125rem solid #222;
-
- &:hover,
- &.active {
- .title {
- color: #333;
- }
- }
- }
-
-
-
- .sb-members-list-item:hover,
- .sb-members-list-item.active {
- border-radius: 0rem;
- }
-
- .sb-group-container {
- background: #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;
- }
-
- .back-btn-container.cc-player__btn-back {
- background: var(--sbt-compt-bg) !important;
- }
-
- .cc-player__content-header {
- background: #444444;
- }
-
- .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: #333 !important;
- }
-
- .sb-back-header {
- .sb-back-btn-panel {
- background: #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: #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);
- }
- }
-
- .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: #444;
-
- &:hover {
- color: #444 !important;
- }
- }
-
- .sb-btn-square,
- .content-video__player__tools .sb-btn-square {
- color: var(--white);
-
- &:hover {
- color: var(--black);
- }
- }
-
- 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: #222222 !important;
- }
-
- .cc-player__list {
- background-color: #222;
- }
-
- .sb-course-details .sb-course-details__info .sb-bg-color-white {
- background: #333 !important;
- }
-
- .sb-course-details .certified-course__certificate {
- background-color: #222222 !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
- 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: #222 !important;
-
- ul li {
- background: #222 !important;
- 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: #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);
- }
-
- .ui.selection.dropdown .menu>.item:hover {
- background: var(--primary-color);
- color: var(--black);
- }
-
- .ui.multiple.dropdown .label {
- background: #222;
- color: var(--white);
- }
-
- .ui.dimmer {
- background-color: rgba(0, 0, 0, 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: #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: #333333;
- }
-
- .help-page__header.sb-bg-color-white,
- .sbt-header-menu-bar {
- background: #222 !important;
- }
-
- .content-metadeta__title {
- color: var(--white);
- }
-
- .sb-md-container {
- background: #333 !important;
- }
-
-
- .sbaccordion__panel-content .heading,
- .data-labels,
- .ui.selection.dropdown .menu>.message,
- .sb-section-preference {
- 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;
- background: linear-gradient(to bottom, #585858 0%, #111 100%);
- }
- }
- }
-
- // Date picker
- .md-drppicker {
- background: #444;
- color: var(--white);
-
- .ranges ul li button {
- &[disabled] {
- opacity: .6;
- }
-
- color: var(--white);
- }
-
- .calendar-table {
- background: #444;
- border-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: #444;
- color: var(--white);
-
- &:nth-child(odd) {
- background-color: #333 !important;
- }
- }
- }
-
- .field>label,
- .inline.fields>label,
- .ui.modal .ui.radio.checkbox .box,
- .ui.radio.checkbox label {
- color: var(--black);
- }
-}
-
-html[data-theme='Darkmode'][layout='joy'] {
- --primary-color: #ffd92a;
- --sb-search-btn-bg: #333333;
- --sb-search-btn-text: var(--primary-color);
-
- //Joy theme header
- --sbt-header-bg: #333333;
- --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: #000000;
- --sbt-language-dropdown-item-hover-bg: #333333;
- --sbt-language-dropdown-item-hover-text: var(--primary-color);
- --sbt-language-selectbox: var(--primary-color);
- --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: #222;
- --cc-listView-compt-title: #fff;
- --cc-listView-compt-itemText: #fff;
- --cc-carousel-title: #fff;
- // lazy loading
- --lazyload-bg: #333333;
- --grey-nuance-lighter: #333333;
- --grey-nuance-darker: #111;
- --fade-grey: #f2f2f2;
-
- --cc-sbcard-data2-bg: #444444;
- --cc-sbcard-data2-bg-active: #ffeb2a;
-
- //Modal
- --sb-modal-header-text: var(--white);
-
-
- .sbhelp_container__left {
- border-radius: 1.5rem;
- }
-
- .listView-compt__btn {
- button {
- background-color: var(--primary-color);
- color: var(--black);
-
- &:hover {
- background-color: #ffeb2a;
- }
- }
- }
-
- .sbt-filter-text {
- background: #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: #444 !important;
- }
-
- .ui.selection.sbt-dropdown.dropdown.sbt-green {
- color: #fff;
- }
-
- .profile-bg-c-4 {
- background: #222222 !important;
- color: #ffffff;
- }
-
- .content-preference__info {
- @media screen and (max-width: 992px) {
- background: #222222 !important;
- color: #ffffff;
- }
- }
-
- .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: #222222;
- }
-
- .sbt-dropdown-language.ui.selection.sbt-dropdown.dropdown>.text span:last-child::before {
- // background: url(assets/images/Language-white.svg) no-repeat !important;
- }
-
- .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);
- }
- }
-}
-
-//accessible scss start
-html[accessable-theme="accessible"][layout='joy'][data-theme="Darkmode"] {
- --accessible-green: #004D26;
-
- .new-layout-footer .sbt-container .sbt-footer-download-app .sbt-footer-bg .sbt-footer-title {
- color: var(--yellow) !important
- }
-
- .sb-pageSection .sb-pageSection-header .sb-pageSection-sentenceCase .sb-pageSection-count,
- .sb-pageSection .sb-pageSection-header .sb-cls-btn,
- .sb-pageSection .sb-pageSection-header button.sb-btn-secondary,
- .sb-pageSection .sb-pageSection-header .sb-pageSection-sentenceCase .sb-pageSection-count,
- .sb-pageSection .sb-pageSection-header .sb-cls-btn,
- .sb-pageSection .sb-pageSection-header button.sb-btn-secondary {
- background-color: var(--black) !important;
- color: var(--white);
- }
-
- sb-accordion-body .sbaccordion__panel-content .credits-section .title,
- .sb-pageSection-content button.slick-next.slick-arrow,
- .sb-pageSection-content button.slick-prev.slick-arrow.slick-disabled {
- color: #c2c2c2 !important;
- }
-
- .module-complete-content label.fnormal {
- color: var(--accessible-green) !important;
- }
-
- .sbt-class-bar .sb-slider-pills-container .sb-pills-container .pill.active {
- background-color: var(--primary-color) !important;
- color: var(--black) !important;
- }
-
- .sbt-class-bar .sb-slider-pills-container .sb-pills-container .pill:hover,
- .sbt-mygroups-details .sb--card__moreinfo .sb--card__type,
- .sb-pageSection-title.sb-pageSection-title-light,
- .nested-group-container .fxsmall,
- .nested-group-container .fsmall,
- .nested-group-container .member-name .fnormal,
- .cursor-pointer .download-text {
- color: var(--black) !important;
- }
-
- .sbt-class-bar .sb-slider-pills-container .sb-pills-container .pill,
- .sb-accordion-content .licenseTag,
- .content-metadeta__title,
- .content-metadeta__title,
- .content-metadeta__text {
- color: var(--white) !important;
- }
-
- .sbt-welcome-theme-container .sb-color-warning,
- .user-profile-box span.sb-color-warning,
- .sb-modal-content .sb-form span.sb-color-warning {
- color: #FFADAD !important;
- }
-
- .sb-modal-actions {
- a.sb-btn.sb-btn-normal.sb-btn-primary {
- color: var(--black);
- }
- }
-
- .user-profile-box .orange.text,
- .user-profile-box .orange-border {
- color: #FFADB6;
- }
-
- .help-page__content .panel .panel-collapse .panel-interact .yes-clicked {
- color: var(--secondary-color);
- }
-}
-
-html[accessable-theme="accessible"] {
-
- --accessible-green: #004D26;
- --sbt-pill-text: #000 !important;
- --sbt-pill-bg-active: #004594 !important;
-
- .sbt-class-bar .sb-slider-pills-container .sb-pills-container .pill {
- color: var(--sbt-pill-text) !important
- }
-
- .sbt-class-bar .sb-slider-pills-container .sb-pills-container .pill.active {
- background: var(--sbt-pill-bg-active) !important;
- }
-
- .sbt-class-bar .sb-slider-pills-container .sb-pills-container .pill:hover {
- background-color: var(--gray-100) !important;
- color: var(--black) !important;
- }
-
- .update.basic.label {
- color: #525252 !important;
- }
-
- button.no-text-transform {
- color: #000000;
- }
-
- .certified-course__btn>.textbook__addbtn {
- color: #1a1a1a;
- }
-
- .sb-btn-link-gray {
- color: #4b4b4b;
- }
-
-
- .content-metadeta__title,
- .content-metadeta__text {
- color: #4a4a4a;
- }
-
- .sbaccordion__panel-content .sb-meta-data .title,
- .title.ng-star-inserted {
- color: var(--primary-color) !important;
- }
-
- .sbt-welcome-theme-container {
- .sb-color-warning {
- color: #8d3719 !important;
- }
- }
-
- .overlay-sidebar__menu {
- .group__type {
- color: #0c0c0c !important;
- }
- }
-
- .signup-background {
- .year-birth {
- .sb-color-red {
- color: #952833 !important;
- }
- }
-
- .sb-requirement-field span {
- color: #9d1b1b !important;
- }
-
- .infotext {
- color: var(--red) !important;
- }
-
- button.sb-btn.sb-btn-normal.w-100.sb-btn-disabled {
- color: #383838 !important;
- }
- }
-
- .sbt-mygroups-details {
- .sb--card__moreinfo {
- .sb--card__org {
- color: #545454 !important;
- }
- }
- }
-
-
- .sb-library-cards {
- .sb-members-list-item--horizontal {
- .status {
- color: #000 !important;
- }
- }
- }
-
- .sb-modal-content {
- .sb-form {
- span.sb-color-warning {
- color: #813317 !important;
- }
- }
- }
-
- .profile-bg-c-3 {
- .update {
- color: #595959 !important;
- }
- }
-
- .sbt-sb-g {
- .header {
- button.sb-btn.sb-btn-xs.sb-btn-secondary.ml-auto {
- color: #1a1a1a !important;
- }
- }
- }
-
- .sb-pageSection {
- .sb-pageSection-header {
- .sb-pageSection-sentenceCase {
- .sb-pageSection-count {
- background-color: #9a3713 !important;
- }
- }
-
- button.sb-btn-secondary,
- .sb-cls-btn {
- color: var(--white);
- }
- }
- }
-
- .select-template-content {
- .no-template-text {
- color: #4a4a4a !important;
-
- b {
- color: #474747 !important;
- }
- }
-
- .certificate-content {
- .sb-field {
- .asterik {
- color: #a30010 !important;
- }
-
- .sb-browse-btn {
- color: #395470 !important;
- }
- }
- }
-
- .re-issue-content {
- .certificate-id-info {
- color: #595959 !important;
- }
- }
-
- .three.wide.column.pl-0.pr-0 {
- .sidebar.py-24 {
- color: hsl(0deg 0% 35%);
- }
- }
- }
-
- .cc-player__content-header {
- .certified-course {
- .sb-btn-secondary {
- color: #1a1a1a !important;
- }
- }
- }
-
- .certificate-container {
- .certificate-content {
- .sb-field {
- .asterik {
- color: #962934 !important;
- }
-
- .sb-browse-btn {
- color: #39546f !important;
- }
- }
- }
- }
-
- .re-issue-content .certificate-id-info,
- .three.wide.column.pl-0.pr-0 .sidebar.py-24,
- .progress-content #dashoardFiltersHolder .current-batch-list .update-text,
- .detailed-report .administrator-text {
- color: #595959 !important;
- }
-
- .datatable-body {
- .datatable-body .datatable-body-row .datatable-body-cell {
- .success-label {
- color: #006645 !important;
- }
- }
- }
-
- app-dashboard-sidebar {
- .sidebar a {
- color: #595959 !important;
- }
-
- .sidebar a.active {
- color: var(--primary-color);
- }
- }
-
- table.sb-table-striped {
- .sb-table .sb-media .media-description {
- color: #525252 !important;
- }
- }
-
- .report__header {
- .content-header__title {
- span.label-success {
- color: #005700 !important;
- }
- }
- }
-
- app-in-app-notification {
- .notification-count {
- color: #1f1f1f !important;
- }
- }
-
- .sb-pageSection .sb-pageSection-header .sb-cls-btn,
- .sb-pageSection .sb-pageSection-header button.sb-btn-secondary {
- color: var(--black) !important;
- }
-
- .sb-modal-actions {
- a.sb-btn.sb-btn-normal.sb-btn-primary {
- color: var(--white);
- }
- }
-
- .multi-select-section-app .multi-select-container .placeholder,
- .licenseTag {
- color: var(--gray-400) !important;
- }
-
- .user-profile-box {
- span.sb-color-warning {
- color: #B30000 !important;
- }
- }
-
- .add-user--horizontal .add-user__label.sb-color-secondary,
- .module-complete-content label.fnormal {
- color: var(--accessible-green) !important;
- }
-
- .ui.form .required.field>label,
- .sb-requirement-field {
- color: #51514D;
- }
-
- .user-profile-box .orange-border,
- .user-profile-box .orange.text {
- border-color: #B30012;
- }
-
- .panel-interact .yes-btn,
- .help-page__content .panel .panel-collapse .panel-interact .yes-clicked {
- color: #005C2B !important;
- }
-
- .panel-info textarea::-webkit-input-placeholder,
- .panel-info textarea:-moz-placeholder,
- .panel-info textarea::-moz-placeholder,
- .panel-info textarea:-ms-input-placeholder,
- .panel-info textarea::placeholder {
- color: #595959;
- }
-
-}
-
-html[data-theme='Default'],
-html[data-theme=Darkmode] {
-
- --sbt-box-shadow-6px: 0.375rem 0.375rem 0.125rem 0 var(--sbt-box-shadow-black);
- --sbt-box-shadow-3px: 0.1875rem 0.1875rem 0.125rem 0 var(--sbt-box-shadow-black);
- --sbt-box-shadow: rgba(128, 167, 206, 1);
-
- --sbt-badge-text: var(--gray-800);
-}
-
-html[data-theme='Default'],
-html[layout='joy'],
-html[data-theme=Darkmode] {
-
- --sbt-page-header-bg: var(--sbt-header-bg);
-
- --sbt-bradius: 0.125rem;
- --sbt-bradius-8: calc(var(--sbt-bradius) * 4);
- --sbt-bradius-16: calc(var(--sbt-bradius) * 8);
- --sbt-bradius-24: calc(var(--sbt-bradius) * 12);
- --sbt-bradius-32: calc(var(--sbt-bradius) * 16);
-
-}
\ No newline at end of file
+@use './portal/default' as *;
+@use './portal/layout-joy' as *;
+@use './portal/accessibility' as *;
\ No newline at end of file