diff --git a/themes/portal/_accessibility.scss b/themes/portal/_accessibility.scss
index d38d272b1d88c9fa832aed09fab073fb31aa3647..158542d9faa4c7d8a1b0471acd56b43389b3ab19 100644
--- a/themes/portal/_accessibility.scss
+++ b/themes/portal/_accessibility.scss
@@ -192,7 +192,15 @@ html[accessible-theme="accessible"] {
.sb-pageSection-header {
.sb-pageSection-sentenceCase {
.sb-pageSection-count {
- background-color: #9a3713 !important;
+ background-color: var(--white) !important;
+ border-radius: 2px;
+ border: 1px solid rgba(255,189,180, 1);
+ opacity: 1;
+ background-color: rgba(255,255,255, 1);
+ color: var(--primary-color);
+ .sb-label {
+ color: var(--primary-color) !important;
+ }
}
}
diff --git a/themes/portal/_layout-base.scss b/themes/portal/_layout-base.scss
index 1a6029bf8cdde19848f70bf76a6916d91b15b7af..527dcb1924ca4dc7cb137ff8e847cd788d819d0f 100644
--- a/themes/portal/_layout-base.scss
+++ b/themes/portal/_layout-base.scss
@@ -11,7 +11,7 @@ html[data-theme='default'] {
--sbt-body-bg: #E5EDF5;
- --sbt-body-bg2: #f3f7fa;
+ --sbt-body-bg2: var(--sb-header-bg);
--sb-header-bg: var(--primary-300); //var(--primary-300);
//global variables
@@ -35,13 +35,13 @@ html[data-theme='default'] {
--sbt-badge-bg: var(--rc-d4d3d3);
--sbfield-label-text: var(--gray-800);
--sbt-sidemenu-overlay-bg: var(--rc-rgba-black);
- --sbt-sidemenu-bg: var(--sbt-body-bg2);
+ --sbt-sidemenu-bg: var(--white);
--sbt-green-bg: var(--white);
--sbt-language-dropdown-bg: var(--white);
--sbt-class-bar-label-text: var(--gray-800);
--sb-filter-bar-bg: var(--white);
--sb-container-bg: var(--white);
- --sidebar-profil-header-bg: var(--sbt-body-bg);
+ --sidebar-profil-header-bg: var(--primary-theme-shade);
--sb-linkmenu-bg: var(--white);
--sb-linkmenu-text: var(--primary-400);
--sb-linkmenu-active-text: var(--primary-400);
@@ -55,7 +55,7 @@ html[data-theme='default'] {
//header
--sb-menu-bg: var(--sb-body-bg);
--sb-menu-item: var(--gray-800);
- --sb-header-bg: var(--primary-theme);
+ --sb-header-bg: var(--grey-05);
--sb-notification-bg: var(--white);
--sb-header-qrcode-btn-bg: var(--white);
--sb-header-qrcode-btn-border: var(--primary-300);
@@ -87,7 +87,7 @@ html[data-theme='default'] {
--sb-course-progress-status-label: #333333;
--sb-list-data: var(--gray-400);
--sb-list-items: #333333;
- --sb-profile-bg-c-4: var(--sbt-body-bg2);
+ --sb-profile-bg-c-4: var(--primary-theme-shade);
--sb-profile-page-basic-label-bg: var(--white);
//pagination
@@ -198,3 +198,537 @@ html[data-theme='default'] {
background-color: #e6e1f9;
}
}
+.sbt-reset-bar {
+ position: relative !important;
+ justify-content: space-between !important;
+ top: 0 !important;
+ right: 0 !important;
+}
+.sbt-filter-bar {
+ padding: 1rem 1rem 1rem 1rem !important;
+ border-radius: 2px !important;
+ border: 1px solid rgba(0,0,0, 0.1) !important;
+ opacity: 1 !important;
+ background-color: rgba(255,245,243, 1) !important;
+ box-shadow: unset !important;
+}
+.txt-filter {
+ opacity: 1;
+ color: rgba(0,0,0,1) !important;
+ font-size: 14px !important;
+ font-weight: 700 !important;
+ font-style: normal !important;
+ letter-spacing: 0px !important;
+ text-align: left !important;
+ margin-bottom: 16px !important;
+}
+.profile {
+ &__info {
+ background-color: var(--primary-theme-shade);
+ position: relative;
+
+ .icon-close {
+ top: calculateRem(16px);
+ left: unset !important;
+ right: calculateRem(16px);
+ }
+ }
+
+ &__actions {
+ &__list {
+
+ .list-item {
+
+ &:hover,
+ &.active {
+ background-color: var(--primary-theme-shade);
+ }
+ }
+ }
+ }
+ }
+ .sb-member__name {
+ color: var(--black) !important;
+ }
+ .menu-list {
+ box-shadow: 0px 2px 8px rgba(0,0,0, 0.16) !important;
+ opacity: 1;
+ background-color: rgba(255,255,255, 1);
+ }
+ .sb-section-preference {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ color: var(--sb-section-preference);
+ padding: calculateRem(32px);
+ border-radius: calculateRem(2px) !important ;
+ position: relative;
+ overflow: hidden;
+ margin-top:calculateRem(32px);
+ border-radius: 2px;
+ border: 1px solid rgba(0,0,0, 0.1);
+ }
+ .sb-label-grid.sb-pills-grid .item {
+ border-radius: 2px !important;
+ border: 1px solid rgba(0,0,0, 0.2) !important;
+ opacity: 1;
+ }
+
+ .sb-preference-info {
+ opacity: 1;
+ background-color: rgba(0,0,0, 0.8);
+ padding: 32px;
+ color: white;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .sb-preference-btn {
+ display: flex;
+ }
+ .sb-btn-custom-primary {
+ border-radius: 2px;
+ opacity: 1;
+ background-color: rgba(255,255,255, 1);
+ opacity: 1;
+ color: rgba(0,0,0,1);
+ font-size: calculateRem(14px);
+ font-weight: 400;
+ font-style: normal;
+ letter-spacing: 0.29px;
+ text-align: right;
+ }
+ .sb-btn-custom-outline {
+ border-radius: 2px;
+ border: 1px solid rgba(255,255,255, 1);
+ opacity: 1;
+ background-color: transparent;
+ color: var(--white);
+ }
+ }
+ .your-preferance {
+ font-size: 14px;
+ }
+ .preference-items {
+ border-radius: 2px;
+ border: 1px solid rgba(0,0,0, 0.2);
+ opacity: 1;
+ padding: 8px;
+ }
+ .view-more {
+ opacity: 1;
+ color: rgba(236,73,51,1);
+ font-size: 14px;
+ font-weight: 700;
+ font-style: normal;
+ letter-spacing: 0.29px;
+ text-align: left;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+.mat-select-value-text {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: 14px;
+ font-weight: 400 !important;
+}
+.mat-expansion-panel {
+ border-radius: 2px !important;
+ border: 1px solid rgba(0,0,0, 0.1) !important;
+ opacity: 1 !important;
+ background-color: rgba(255,245,243, 1) !important;
+}
+
+.textbook {
+ border-radius: 2px;
+ opacity: 1;
+ padding: 16px;
+ &-container {
+ z-index: 2;
+ box-shadow: 0 0.125rem 0.4375rem 0 rgba(0, 0, 0, .16);
+ position: relative;
+ background-color: var(--gray-0);
+ }
+
+ &__details {
+ flex: 1;
+ min-width: 0;
+ }
+
+ &__bookimg {
+ width: calculateRem(48px);
+ height: calculateRem(48px);
+
+ img {
+ width: calculateRem(48px);
+ height: calculateRem(48px);
+ }
+ }
+
+ &__heading {
+ min-width: 0;
+ opacity: 1;
+ color: rgba(0,0,0,0.8) !important;
+ font-size: 18px;
+ font-weight: 700 !important;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
+ text-transform: capitalize;
+
+ .textbook__title {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: rgba(0,0,0,0.8);
+ font-size: 18px;
+ font-weight: 700;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
+ }
+ }
+
+ &__addbtn {
+ white-space: nowrap;
+ }
+}
+:host::ng-deep {
+ .certified-course__progress {
+ padding: 16px !important;
+ }
+}
+.cc-player__list {
+ background-color: white !important;
+ padding: 0 1rem;
+ box-shadow: 0 0.1875rem 0.25rem 0 rgba(var(--rc-rgba-primary), 0.1);
+ border: 1px solid;
+ border-color: #b7b7b7;
+}
+.aspectratio{
+ border: 1px solid RGBA(0, 0, 0, 0.2);
+ border-radius: 2px;
+}
+.back-btn-text {
+color: black;
+}
+.content-header__title {
+color: black !important;
+}
+.cc-player__btn-back {
+background: var(--white) !important;
+margin-top: 2px;
+}
+.mat-progress-bar-buffer {
+background-color: rgb(229, 229, 229) !important;
+}
+.sb-course-btn-container {
+ flex-basis: 80%;
+
+ }
+ .sb-share-container {
+ flex-basis: 20%;
+ }
+ .sb-btn-text {
+ opacity: 1;
+ color: rgba(255,255,255,1) !important;
+ font-size: 14px;
+ font-weight: 400;
+ }
+ .sb-rating-label{
+ opacity: 1;
+ color: rgba(0,0,0,0.8);
+ font-size: calculateRem(14px);
+ font-weight: 700;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
+ }
+ .back-btn{
+ opacity: 1;
+ color: rgba(0,0,0,1);
+ font-size: calculateRem(14px);
+ font-weight: 400;
+ font-style: normal;
+ letter-spacing: 0.29px;
+ text-align: left;
+ margin-left: 8px;
+
+ }
+ .sb-btn-primary:hover {
+ background-color: var(--primary-theme-shade) !important;
+ color: var(--primary-theme) !important;
+ border-color:var(--primary-theme) !important;
+ }
+ .header-container {
+ opacity: 1;
+ background-color: rgba(0,0,0, 0.05) !important;
+ }
+ .sb__header {
+ opacity: 1;
+ color: rgba(0,0,0,0.8);
+ font-size: calculateRem(18px) !important;
+ font-weight: 700 !important;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
+}
+.course__details{
+ opacity: 1;
+ color: rgba(0,0,0,0.4);
+ font-size: 14px;
+ font-weight: 400;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
+}
+.training-relevant {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: 16px;
+ &__class {
+ border: 1px solid rgba(0,0,0, 0.2);
+ opacity: 1;
+ background-color: rgba(255,255,255, 0);
+ padding: 16px;
+ width: 49%;
+ }
+ &__medium {
+ border: 1px solid rgba(0,0,0, 0.2);
+ opacity: 1;
+ background-color: rgba(255,255,255, 0);
+ padding: 16px;
+ width: 49%;
+ }
+ &__subject{
+ border: 1px solid rgba(0,0,0, 0.2);
+ opacity: 1;
+ background-color: rgba(255,255,255, 0);
+ padding: 16px;
+ width: 100%;
+ }
+}
+.mat-progress-bar-fill::after{
+ background-color: var(--primary-theme)
+}
+.sb-course-details .certified-course__certificate {
+ background-color: white;
+}
+.sbaccordion.sbaccordion--toc {
+ .sbaccordion__panel-header {
+ background:rgba(0, 0, 0, 0.05) ;
+ border-color: rgba(0, 0, 0, 0.1) ;
+ }
+ .sbaccordion__panel-header__title {
+ display: flex !important;
+ align-items: center;
+ padding: calculateRem(8px) 0 !important;
+ opacity: 1;
+ color: rgba(0,0,0,1);
+ font-size: 14px;
+ font-weight: 400;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
+ }
+ .sbaccordion__panel-content {
+ border-color: rgba(0, 0, 0, 0.1);
+ .sbchapter__item{
+ border-color: rgba(0, 0, 0, 0.1);
+ &__title {
+ opacity: 1;
+ color: rgba(0,0,0,0.8);
+ font-size: 14px;
+ font-weight: 700;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
+ }
+ }
+ }
+ }
+ .notification-bell{
+ box-shadow: none !important;
+ }
+ .sb-course-details__information{
+ border: 1px solid rgba(0,0,0, 0.1);
+ background-color: rgba(255,245,243, 1);
+ }
+ .sb-mat-accordion .mat-expansion-panel {
+ background-color: var(--white) !important;
+ }
+ .content-video__player__details {
+ padding: 1rem 0 !important;
+}
+.content-video__player__title {
+ color: var(--primary-color) !important;
+}
+.mat-expansion-panel {
+ border-radius: 2px !important;
+ border: 1px solid rgba(0,0,0, 0.1) !important;
+ opacity: 1 !important;
+ background-color: rgba(255,245,243, 1) !important;
+}
+.quml-navigation__next--active {
+ background-color: var(--primary-theme);
+}
+.content-metadeta {
+ &__content {
+ border-bottom: none !important;
+ }
+}
+.mat-form-field-appearance-fill .mat-form-field-label {
+ top: 0.9em !important;
+}
+mat-label {
+ background-color: white !important;
+}
+.landing-page-section {
+ background-color:var(--sb-landing-page-bg);
+ border-bottom: none !important;
+ -webkit-box-shadow: none !important;
+ box-shadow: none !important;
+}
+.landing-page-about-project {
+ background-color: rgba(0, 0, 0, 0.05);
+ }
+ .align-items-center{
+ align-items: center;
+ }
+.welcome-text {
+ opacity: 1;
+ color: rgba(0,0,0,0.8);
+ font-size: calculateRem(16px);
+ font-weight: 400;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
+}
+.mission-name {
+ opacity: 1;
+ color: rgba(236,73,51,1);
+ font-size: calculateRem(32px);
+ font-weight: 700;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
+}
+.mission-details {
+ opacity: 0.8;
+ color: rgba(0,0,0,1);
+ font-size: calculateRem(14px);
+ font-weight: 400;
+ font-style: normal;
+ letter-spacing: 0.2px;
+ text-align: left;
+ line-height: 20px;
+ width: 460px;
+}
+.card-wrapper {
+ display: flex;
+ justify-content: space-between;
+}
+.link-cards {
+ opacity: 1;
+ background-color: rgb(253, 235, 232);
+ width: 32%;
+ margin-top: 24px;
+ border-radius: 4px;
+ height: 162px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.link-card-details {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+ padding: 32px;
+ img {
+ width: 48px;
+ height: 48px;
+ margin-bottom: 8px;
+ }
+ p {
+ width: 100%;
+ text-align: center;
+ font-size: calculateRem(24px);
+ }
+}
+.marquee-section {
+ background-color: #FBD7D2 !important;
+}
+marquee {
+ opacity: 0.87;
+ color: rgba(0,0,0,1);
+ font-size: calculateRem(14px);
+ font-weight: 700;
+ font-style: normal;
+ letter-spacing: 0.3px;
+ text-align: center;
+ line-height: 21px;
+}
+@media screen and (min-width: 240px) and (max-width: 767px) {
+ .mission-details {
+ width: 100%;
+ }
+}
+.sb-label-grid .item {
+ margin: 0 !important;
+}
+.sb-label-grid.sb-pills-grid {
+ justify-content: space-between;
+}
+.sb-label-grid.sb-pills-grid .item {
+ width: 24% !important;
+}
+.ui.text.menu .item {
+ padding: 0.35714286em 1em !important;
+}
+.profile-bg-c-4 {
+ background: var(--white) !important;
+ color: var(--black);
+}
+.profile-frac-section {
+ background: var(--sb-profile-bg-c-4) !important;
+ color: var(--black);
+ padding: 24px;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ border-radius: 2px;
+}
+.fmedium-list {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+}
+.sb-btn-border {
+ border-radius: 2px !important;
+}
+.ui.semi-circular.dodger-blue.basic.label {
+ border-radius: 2px !important;
+}
+.ui.semi-circular.update.basic.label, .ui.semi-circular.basic.label {
+ border-radius: 2px !important;
+}
+.ui.basic.label {
+ border: 1px solid rgba(34,36,38,.15) !important;
+}
+
+.mat-expansion-panel {
+ border-radius: 2px !important;
+ border: 1px solid rgba(0,0,0, 0.1) !important;
+ opacity: 1 !important;
+ background-color: rgba(255,245,243, 1) !important;
+}
+
+.ui.upForReviewTable.table {
+ border: 1px solid rgba(34,36,38,.15) !important;
+}
+
+.publicmenusection.ui.secondary.menu .active.item {
+ background: linear-gradient(270deg, rgba(var(--rc-rgba-d0d0d0), 0) 0%, var(--primary-theme-shade) 100%) !important;
+}
\ No newline at end of file
diff --git a/themes/portal/_layout-orange.scss b/themes/portal/_layout-orange.scss
new file mode 100644
index 0000000000000000000000000000000000000000..527dcb1924ca4dc7cb137ff8e847cd788d819d0f
--- /dev/null
+++ b/themes/portal/_layout-orange.scss
@@ -0,0 +1,734 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+
+html[data-theme='default'] {
+ --primary-theme: var(--primary-color);
+ --primary-theme-hsl: 210, 97%;
+ --primary-theme-rgb: rgb(2, 79, 156);
+ --primary-theme-contrast: #fff;
+ --primary-theme-contrast-rgb: rgb(255, 255, 255);
+ --primary-theme-shade: hsl(var(--primary-theme-hsl), 56%);
+ --primary-theme-tint: hsl(var(--primary-theme-hsl), 76%);
+
+
+ --sbt-body-bg: #E5EDF5;
+ --sbt-body-bg2: var(--sb-header-bg);
+ --sb-header-bg: var(--primary-300); //var(--primary-300);
+
+ //global variables
+ --sbt-box-shadow-black: rgba(var(--rc-rgba-black), 0.1);
+ --sbt-box-shadow-primary: rgba(var(--primary-color-rgb), 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: var(--black);
+ --sbt-pill-text-hover: var(--white);
+ --sbt-compt-bg: var(--sbt-body-bg);
+ --sbt-badge-bg: var(--rc-d4d3d3);
+ --sbfield-label-text: var(--gray-800);
+ --sbt-sidemenu-overlay-bg: var(--rc-rgba-black);
+ --sbt-sidemenu-bg: var(--white);
+ --sbt-green-bg: var(--white);
+ --sbt-language-dropdown-bg: var(--white);
+ --sbt-class-bar-label-text: var(--gray-800);
+ --sb-filter-bar-bg: var(--white);
+ --sb-container-bg: var(--white);
+ --sidebar-profil-header-bg: var(--primary-theme-shade);
+ --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-btn-default-color: var(--white);
+ --sb-sidebar-menu-bg-active: var(--primary-0);
+ --sb-sidebar-menu-text: var(--primary-color);
+ --sb-graph-section-bg: var(--white);
+ --sb-linkmenu-icon-bg-hover: var(--white);
+
+ //header
+ --sb-menu-bg: var(--sb-body-bg);
+ --sb-menu-item: var(--gray-800);
+ --sb-header-bg: var(--grey-05);
+ --sb-notification-bg: var(--white);
+ --sb-header-qrcode-btn-bg: var(--white);
+ --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(var(--rc-rgba-black), .03);
+ --sb-search-auto-select: var(--white);
+ --sb-footer-bg: var(--primary-color);
+ --bell-icon: var(--primary-color);
+
+ --sb-search-btn-bg: var(--gray-800);
+ --sb-search-btn-text: var(--white);
+ --sbfaq-compt-bg: var(--sbt-body-bg);
+
+ //landing page
+ --sb-landing-page-bg: var(--white);
+ --sb-landing-page-segments: var(--white);
+ --sb-landing-page-cards: var(--white);
+ --sb-landing-page-cards-desc: rgba(var(--rc-rgba-black), .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-theme-shade);
+ --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(var(--rc-rgba-black), .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(--sbt-body-bg2);
+ --sb-class-bar-bg: var(--sbt-body-bg2);
+ --sb-dropdown-menu-text: rgba(var(--rc-rgba-black), .8);
+ --ui-dropdown-menu-selected-item-bg: rgba(var(--rc-rgba-black), .03);
+ --ui-dropdown-menu-selected-item: rgba(var(--rc-rgba-black), .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);
+ --cc-grade-pill-container-bg: var(--sbt-body-bg);
+
+ //joy theme
+ --themeflower-bg: #ffd92a;
+ --visit-helpcenter-bg: var(--white);
+ //--sbfaq-compt-bg: var(--white);
+ --signup-panel-bg: var(--white);
+
+ //explore-page
+ --sb-section-preference: var(--black);
+ --slick-dots-active-color: var(--gray-200);
+ --slick-dots-color: var(--gray-800);
+
+ .sb-single-resource {
+ .content-video__player {
+ background: var(--white);
+ }
+ }
+
+ ::placeholder {
+ color: var(--gray-800) !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;
+ }
+}
+.sbt-reset-bar {
+ position: relative !important;
+ justify-content: space-between !important;
+ top: 0 !important;
+ right: 0 !important;
+}
+.sbt-filter-bar {
+ padding: 1rem 1rem 1rem 1rem !important;
+ border-radius: 2px !important;
+ border: 1px solid rgba(0,0,0, 0.1) !important;
+ opacity: 1 !important;
+ background-color: rgba(255,245,243, 1) !important;
+ box-shadow: unset !important;
+}
+.txt-filter {
+ opacity: 1;
+ color: rgba(0,0,0,1) !important;
+ font-size: 14px !important;
+ font-weight: 700 !important;
+ font-style: normal !important;
+ letter-spacing: 0px !important;
+ text-align: left !important;
+ margin-bottom: 16px !important;
+}
+.profile {
+ &__info {
+ background-color: var(--primary-theme-shade);
+ position: relative;
+
+ .icon-close {
+ top: calculateRem(16px);
+ left: unset !important;
+ right: calculateRem(16px);
+ }
+ }
+
+ &__actions {
+ &__list {
+
+ .list-item {
+
+ &:hover,
+ &.active {
+ background-color: var(--primary-theme-shade);
+ }
+ }
+ }
+ }
+ }
+ .sb-member__name {
+ color: var(--black) !important;
+ }
+ .menu-list {
+ box-shadow: 0px 2px 8px rgba(0,0,0, 0.16) !important;
+ opacity: 1;
+ background-color: rgba(255,255,255, 1);
+ }
+ .sb-section-preference {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ color: var(--sb-section-preference);
+ padding: calculateRem(32px);
+ border-radius: calculateRem(2px) !important ;
+ position: relative;
+ overflow: hidden;
+ margin-top:calculateRem(32px);
+ border-radius: 2px;
+ border: 1px solid rgba(0,0,0, 0.1);
+ }
+ .sb-label-grid.sb-pills-grid .item {
+ border-radius: 2px !important;
+ border: 1px solid rgba(0,0,0, 0.2) !important;
+ opacity: 1;
+ }
+
+ .sb-preference-info {
+ opacity: 1;
+ background-color: rgba(0,0,0, 0.8);
+ padding: 32px;
+ color: white;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .sb-preference-btn {
+ display: flex;
+ }
+ .sb-btn-custom-primary {
+ border-radius: 2px;
+ opacity: 1;
+ background-color: rgba(255,255,255, 1);
+ opacity: 1;
+ color: rgba(0,0,0,1);
+ font-size: calculateRem(14px);
+ font-weight: 400;
+ font-style: normal;
+ letter-spacing: 0.29px;
+ text-align: right;
+ }
+ .sb-btn-custom-outline {
+ border-radius: 2px;
+ border: 1px solid rgba(255,255,255, 1);
+ opacity: 1;
+ background-color: transparent;
+ color: var(--white);
+ }
+ }
+ .your-preferance {
+ font-size: 14px;
+ }
+ .preference-items {
+ border-radius: 2px;
+ border: 1px solid rgba(0,0,0, 0.2);
+ opacity: 1;
+ padding: 8px;
+ }
+ .view-more {
+ opacity: 1;
+ color: rgba(236,73,51,1);
+ font-size: 14px;
+ font-weight: 700;
+ font-style: normal;
+ letter-spacing: 0.29px;
+ text-align: left;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+.mat-select-value-text {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: 14px;
+ font-weight: 400 !important;
+}
+.mat-expansion-panel {
+ border-radius: 2px !important;
+ border: 1px solid rgba(0,0,0, 0.1) !important;
+ opacity: 1 !important;
+ background-color: rgba(255,245,243, 1) !important;
+}
+
+.textbook {
+ border-radius: 2px;
+ opacity: 1;
+ padding: 16px;
+ &-container {
+ z-index: 2;
+ box-shadow: 0 0.125rem 0.4375rem 0 rgba(0, 0, 0, .16);
+ position: relative;
+ background-color: var(--gray-0);
+ }
+
+ &__details {
+ flex: 1;
+ min-width: 0;
+ }
+
+ &__bookimg {
+ width: calculateRem(48px);
+ height: calculateRem(48px);
+
+ img {
+ width: calculateRem(48px);
+ height: calculateRem(48px);
+ }
+ }
+
+ &__heading {
+ min-width: 0;
+ opacity: 1;
+ color: rgba(0,0,0,0.8) !important;
+ font-size: 18px;
+ font-weight: 700 !important;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
+ text-transform: capitalize;
+
+ .textbook__title {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: rgba(0,0,0,0.8);
+ font-size: 18px;
+ font-weight: 700;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
+ }
+ }
+
+ &__addbtn {
+ white-space: nowrap;
+ }
+}
+:host::ng-deep {
+ .certified-course__progress {
+ padding: 16px !important;
+ }
+}
+.cc-player__list {
+ background-color: white !important;
+ padding: 0 1rem;
+ box-shadow: 0 0.1875rem 0.25rem 0 rgba(var(--rc-rgba-primary), 0.1);
+ border: 1px solid;
+ border-color: #b7b7b7;
+}
+.aspectratio{
+ border: 1px solid RGBA(0, 0, 0, 0.2);
+ border-radius: 2px;
+}
+.back-btn-text {
+color: black;
+}
+.content-header__title {
+color: black !important;
+}
+.cc-player__btn-back {
+background: var(--white) !important;
+margin-top: 2px;
+}
+.mat-progress-bar-buffer {
+background-color: rgb(229, 229, 229) !important;
+}
+.sb-course-btn-container {
+ flex-basis: 80%;
+
+ }
+ .sb-share-container {
+ flex-basis: 20%;
+ }
+ .sb-btn-text {
+ opacity: 1;
+ color: rgba(255,255,255,1) !important;
+ font-size: 14px;
+ font-weight: 400;
+ }
+ .sb-rating-label{
+ opacity: 1;
+ color: rgba(0,0,0,0.8);
+ font-size: calculateRem(14px);
+ font-weight: 700;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
+ }
+ .back-btn{
+ opacity: 1;
+ color: rgba(0,0,0,1);
+ font-size: calculateRem(14px);
+ font-weight: 400;
+ font-style: normal;
+ letter-spacing: 0.29px;
+ text-align: left;
+ margin-left: 8px;
+
+ }
+ .sb-btn-primary:hover {
+ background-color: var(--primary-theme-shade) !important;
+ color: var(--primary-theme) !important;
+ border-color:var(--primary-theme) !important;
+ }
+ .header-container {
+ opacity: 1;
+ background-color: rgba(0,0,0, 0.05) !important;
+ }
+ .sb__header {
+ opacity: 1;
+ color: rgba(0,0,0,0.8);
+ font-size: calculateRem(18px) !important;
+ font-weight: 700 !important;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
+}
+.course__details{
+ opacity: 1;
+ color: rgba(0,0,0,0.4);
+ font-size: 14px;
+ font-weight: 400;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
+}
+.training-relevant {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: 16px;
+ &__class {
+ border: 1px solid rgba(0,0,0, 0.2);
+ opacity: 1;
+ background-color: rgba(255,255,255, 0);
+ padding: 16px;
+ width: 49%;
+ }
+ &__medium {
+ border: 1px solid rgba(0,0,0, 0.2);
+ opacity: 1;
+ background-color: rgba(255,255,255, 0);
+ padding: 16px;
+ width: 49%;
+ }
+ &__subject{
+ border: 1px solid rgba(0,0,0, 0.2);
+ opacity: 1;
+ background-color: rgba(255,255,255, 0);
+ padding: 16px;
+ width: 100%;
+ }
+}
+.mat-progress-bar-fill::after{
+ background-color: var(--primary-theme)
+}
+.sb-course-details .certified-course__certificate {
+ background-color: white;
+}
+.sbaccordion.sbaccordion--toc {
+ .sbaccordion__panel-header {
+ background:rgba(0, 0, 0, 0.05) ;
+ border-color: rgba(0, 0, 0, 0.1) ;
+ }
+ .sbaccordion__panel-header__title {
+ display: flex !important;
+ align-items: center;
+ padding: calculateRem(8px) 0 !important;
+ opacity: 1;
+ color: rgba(0,0,0,1);
+ font-size: 14px;
+ font-weight: 400;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
+ }
+ .sbaccordion__panel-content {
+ border-color: rgba(0, 0, 0, 0.1);
+ .sbchapter__item{
+ border-color: rgba(0, 0, 0, 0.1);
+ &__title {
+ opacity: 1;
+ color: rgba(0,0,0,0.8);
+ font-size: 14px;
+ font-weight: 700;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
+ }
+ }
+ }
+ }
+ .notification-bell{
+ box-shadow: none !important;
+ }
+ .sb-course-details__information{
+ border: 1px solid rgba(0,0,0, 0.1);
+ background-color: rgba(255,245,243, 1);
+ }
+ .sb-mat-accordion .mat-expansion-panel {
+ background-color: var(--white) !important;
+ }
+ .content-video__player__details {
+ padding: 1rem 0 !important;
+}
+.content-video__player__title {
+ color: var(--primary-color) !important;
+}
+.mat-expansion-panel {
+ border-radius: 2px !important;
+ border: 1px solid rgba(0,0,0, 0.1) !important;
+ opacity: 1 !important;
+ background-color: rgba(255,245,243, 1) !important;
+}
+.quml-navigation__next--active {
+ background-color: var(--primary-theme);
+}
+.content-metadeta {
+ &__content {
+ border-bottom: none !important;
+ }
+}
+.mat-form-field-appearance-fill .mat-form-field-label {
+ top: 0.9em !important;
+}
+mat-label {
+ background-color: white !important;
+}
+.landing-page-section {
+ background-color:var(--sb-landing-page-bg);
+ border-bottom: none !important;
+ -webkit-box-shadow: none !important;
+ box-shadow: none !important;
+}
+.landing-page-about-project {
+ background-color: rgba(0, 0, 0, 0.05);
+ }
+ .align-items-center{
+ align-items: center;
+ }
+.welcome-text {
+ opacity: 1;
+ color: rgba(0,0,0,0.8);
+ font-size: calculateRem(16px);
+ font-weight: 400;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
+}
+.mission-name {
+ opacity: 1;
+ color: rgba(236,73,51,1);
+ font-size: calculateRem(32px);
+ font-weight: 700;
+ font-style: normal;
+ letter-spacing: 0px;
+ text-align: left;
+}
+.mission-details {
+ opacity: 0.8;
+ color: rgba(0,0,0,1);
+ font-size: calculateRem(14px);
+ font-weight: 400;
+ font-style: normal;
+ letter-spacing: 0.2px;
+ text-align: left;
+ line-height: 20px;
+ width: 460px;
+}
+.card-wrapper {
+ display: flex;
+ justify-content: space-between;
+}
+.link-cards {
+ opacity: 1;
+ background-color: rgb(253, 235, 232);
+ width: 32%;
+ margin-top: 24px;
+ border-radius: 4px;
+ height: 162px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.link-card-details {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+ padding: 32px;
+ img {
+ width: 48px;
+ height: 48px;
+ margin-bottom: 8px;
+ }
+ p {
+ width: 100%;
+ text-align: center;
+ font-size: calculateRem(24px);
+ }
+}
+.marquee-section {
+ background-color: #FBD7D2 !important;
+}
+marquee {
+ opacity: 0.87;
+ color: rgba(0,0,0,1);
+ font-size: calculateRem(14px);
+ font-weight: 700;
+ font-style: normal;
+ letter-spacing: 0.3px;
+ text-align: center;
+ line-height: 21px;
+}
+@media screen and (min-width: 240px) and (max-width: 767px) {
+ .mission-details {
+ width: 100%;
+ }
+}
+.sb-label-grid .item {
+ margin: 0 !important;
+}
+.sb-label-grid.sb-pills-grid {
+ justify-content: space-between;
+}
+.sb-label-grid.sb-pills-grid .item {
+ width: 24% !important;
+}
+.ui.text.menu .item {
+ padding: 0.35714286em 1em !important;
+}
+.profile-bg-c-4 {
+ background: var(--white) !important;
+ color: var(--black);
+}
+.profile-frac-section {
+ background: var(--sb-profile-bg-c-4) !important;
+ color: var(--black);
+ padding: 24px;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ border-radius: 2px;
+}
+.fmedium-list {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+}
+.sb-btn-border {
+ border-radius: 2px !important;
+}
+.ui.semi-circular.dodger-blue.basic.label {
+ border-radius: 2px !important;
+}
+.ui.semi-circular.update.basic.label, .ui.semi-circular.basic.label {
+ border-radius: 2px !important;
+}
+.ui.basic.label {
+ border: 1px solid rgba(34,36,38,.15) !important;
+}
+
+.mat-expansion-panel {
+ border-radius: 2px !important;
+ border: 1px solid rgba(0,0,0, 0.1) !important;
+ opacity: 1 !important;
+ background-color: rgba(255,245,243, 1) !important;
+}
+
+.ui.upForReviewTable.table {
+ border: 1px solid rgba(34,36,38,.15) !important;
+}
+
+.publicmenusection.ui.secondary.menu .active.item {
+ background: linear-gradient(270deg, rgba(var(--rc-rgba-d0d0d0), 0) 0%, var(--primary-theme-shade) 100%) !important;
+}
\ No newline at end of file
diff --git a/themes/portal/_theme-orange.scss b/themes/portal/_theme-orange.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ea7567f4e5058a8c3d2602ecdcc4845bdd91e052
--- /dev/null
+++ b/themes/portal/_theme-orange.scss
@@ -0,0 +1,47 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+
+html[data-color='orange'] {
+ --primary-theme: #EC4933; // hsl(246, 43%, 50%);
+ --primary-theme-hsl: 10, 100%;
+ --primary-theme-rgb: rgb(236, 73, 51);
+ --primary-theme-contrast: #fff;
+ --primary-theme-contrast-rgb: rgb(255, 255, 255);
+ --primary-theme-shade: hsl(var(--primary-theme-hsl), 98%);
+ --primary-theme-tint: hsl(var(--primary-theme-hsl), 40%);
+
+ --primary-color: rgba(0, 0, 0); // rgb(0, 160, 168) hsl(183, 100%, 33%)
+ --primary-color-80: rgba(0, 0, 0, 0.8);
+ --primary-hsl: 7, 83%;
+ --primary-color-rgb: rgb(236, 73, 51);
+ --primary-color-contrast: #fff;
+ --primary-color-contrast-rgb: rgb(255, 255, 255);
+ --primary-color-shade: hsl(var(--primary-hsl), 43%);
+ --primary-color-tint: hsl(var(--primary-hsl), 23%);
+ --primary-0: hsl(var(--primary-hsl), 95%);
+ --primary-100: hsl(var(--primary-hsl), 90%);
+ --primary-200: hsl(var(--primary-hsl), 80%);
+ --primary-250: hsl(var(--primary-hsl), 70%);
+ --primary-300: hsl(var(--primary-hsl), 60%);
+ --primary-400: hsl(var(--primary-hsl), 56%);
+ --primary-600: hsl(var(--primary-hsl), 30%);
+ --primary-800: hsl(var(--primary-hsl), 25%);
+
+
+ // --accent-color-light:#00c7d1; // hsl(183, 100%, 41%);
+ // --accent-color:#00A0A8; // hsl(183, 100%, 33%);
+ // --accent-color-dark:#007980; // hsl(183, 100%, 25%);
+ --grey-60: rgba(0, 0, 0, 0.6);
+ --grey-05: rgba(0, 0, 0, 0.05);
+ --sbt-body-bg: #dddbf0;
+ --sbt-body-bg2: var(--sb-header-bg);
+ --sbt-primary-bg: var(--primary-theme);
+ --sbt-compt-bg: var(--sbt-body-bg);
+ --sb-linkmenu-bg-hover: var(--primary-color);
+ --sb-footer-bg: var(--grey-60);
+ --sbfaq-compt-bg:var(--sbt-body-bg);
+ --sb-field-border: rgba(0, 0, 0, 0.2);
+ .sb-bg-white {
+ --white:var(--sbt-body-bg2);
+ }
+
+}
\ No newline at end of file
diff --git a/themes/themes-material_UI.scss b/themes/themes-material_UI.scss
index ee2473fa06f988940669044ec8044f06f853b2f1..4b007d46c38bedd7bf11be05d5d6958ad06ceb9a 100644
--- a/themes/themes-material_UI.scss
+++ b/themes/themes-material_UI.scss
@@ -649,7 +649,7 @@ mat-tooltip-component .mat-tooltip {
.mat-form-field-flex {
background-color: var(--mat-dropdown-form-bg);
// padding: 8px 12px 0 16px;
- border: 1px solid var(--primary-color);
+ border: 1px solid var(--sb-field-border);
border-radius: calculateRem(4px);
height: calculateRem(48px);
padding: calculateRem(8px) calculateRem(16px);
diff --git a/themes/themes-portal.scss b/themes/themes-portal.scss
index ff82cb1c748f8eb9c4cf04740a0605e3f2be7c74..13fb070ecacc0c3208c8d3594dc1ccd678e07c03 100644
--- a/themes/themes-portal.scss
+++ b/themes/themes-portal.scss
@@ -1,8 +1,10 @@
@use './portal/theme-all' as *;
@use './portal/layout-base' as *;
@use './portal/layout-joy' as *;
+@use './portal/layout-orange' as *;
@use './portal/theme-yellow' as *;
@use './portal/theme-purple' as *;
+@use './portal/theme-orange' as *;
@use './portal/theme-mono1' as *;
@use './portal/dark' as *;
@use './portal/accessibility' as *;
\ No newline at end of file