themes-wordpress/course/learning-mode.css
Dmitry Merkushin 26b8718c65
Improve Learning mode experience (#7120)
* Improve Learning mode experience

---------

Co-authored-by: Imran Hossain <imranh920@gmail.com>
Co-authored-by: Miroslav Mitev <m1r0@users.noreply.github.com>
Co-authored-by: Donna Peplinskie <donnapep@gmail.com>
Co-authored-by: Imran Hossain <imran.hossain@automattic.com>
Co-authored-by: Gabriel Caires <gabriel.caires@automattic.com>
2023-06-01 21:43:14 +04:00

212 lines
5.6 KiB
CSS

/**
### DEPRECATED FILE ###
Please don't update it, this file will be moved to the Sensei plugin to better Maintainability.
**/
:root, .sensei-course-theme {
--sensei-lm-header-height: 116px;
}
body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
/* Override theme.json blockGap setting. */
.sensei-course-theme .sensei-course-theme__sidebar,
.sensei-course-theme__sidebar .wp-block-sensei-lms-course-navigation,
.sensei-course-theme .is-layout-constrained > .wp-block-columns.is-layout-flex {
margin-block-start: 0;
}
.sensei-course-theme__sidebar {
--sensei-lm-sidebar-width: 290px;
}
.sensei-course-theme__frame.sensei-course-theme__header {
padding-top: 45px;
}
/* Course Navigation */
.sensei-lms-course-navigation-module:not(:first-of-type) {
margin-top: 18px;
}
.sensei-lms-course-navigation-module__header{
padding-top: 0;
}
.sensei-lms-course-navigation-module__title {
font-family: var(--wp--preset--font-family--heading);
font-size: 1.75rem;
font-weight: 400;
line-height: 100%;
letter-spacing: 0.01em;
text-transform: uppercase;
}
.sensei-lms-course-navigation-module__summary {
font-weight: 400;
margin-top: 4px;
line-height: 16px;
opacity: 1;
}
.sensei-lms-course-navigation-lesson {
align-items: baseline;
padding-top: 20px;
padding-bottom: 0;
}
.sensei-lms-course-navigation-lesson__link {
align-items: baseline;
}
.sensei-lms-course-navigation-lesson__title {
font-family: var(--wp--preset--font-family--system);
}
.sensei-lms-course-navigation-lesson__extra {
font-family: var(--wp--preset--font-family--system);
line-height: 1.23;
font-weight: normal;
opacity: 1;
letter-spacing: 0.02em;
}
/* Lesson Actions */
.wp-block-sensei-button:where(:not(.is-style-link)) a:hover{
text-decoration: none;
}
.sensei-course-theme-lesson-actions__next-lesson {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--custom--typography--font-sizes--button);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.sensei-course-theme-lesson-actions .is-link:hover {
color: var(--sensei-primary-color) !important;
}
.sensei-course-theme-lesson-actions[aria-disabled=true], .sensei-course-theme-lesson-actions:disabled {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
.sensei-course-theme-lesson-actions.is-busy {
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.5) 28%, rgba(255, 255, 255, 0.1) 28%, rgba(255, 255, 255, 0.1) 72%, rgba(255, 255, 255, 0.5) 72%);
animation: components-button__busy-animation 25000ms infinite linear;
}
.sensei-course-theme-lesson-actions.is-busy:disabled {
cursor: not-allowed;
}
.sensei-course-theme-lesson-actions .sensei-course-theme__button:focus,
.sensei-course-theme-lesson-actions .sensei-course-theme__link:focus {
outline: dashed 1px var(--sensei-primary-color);
margin: -1px;
}
.sensei-course-theme-lesson-actions .sensei-course-theme__button.has-icon,
.sensei-course-theme-lesson-actions .sensei-course-theme__link.has-icon {
display: flex;
gap: 4px;
align-items: center;
}
.sensei-course-theme-lesson-actions .sensei-course-theme__button.has-icon svg,
.sensei-course-theme-lesson-actions .sensei-course-theme__link.has-icon svg {
width: 20px;
height: 20px;
}
.sensei-course-theme .sensei-course-theme__video-container::after {
--sensei-lm-sidebar-width: 290px;
}
.sensei-course-theme .sensei-course-theme__video-container .sensei-course-theme-lesson-video .wp-block-video {
border: 1px solid var(--wp--preset--color--primary);
border-radius: 3px;
}
.sensei-course-theme .sensei-course-theme__video-container .sensei-course-theme-course-progress {
font-size: 11px;
text-transform: uppercase;
}
/* Progress bar in Modern and Video templates. */
.sensei-course-theme__sidebar .sensei-course-theme-course-progress-bar {
background-color: transparent;
border: 1px solid;
border-radius: 6px;
height: auto;
padding: 2px;
}
.sensei-course-theme__sidebar .sensei-course-theme-course-progress-bar-inner {
border-radius: 4px;
height: 8px;
}
.sensei-course-theme__frame .sensei-course-theme-course-progress-bar-inner {
background-color: var(--sensei-primary-color);
}
.sensei-course-theme .sensei-course-theme__video-container {
border-radius: 4px;
}
.sensei-course-theme:not(.learning-mode-full-width) .sensei-course-theme__header > * {
max-width: 1240px;
margin-left: auto;
margin-right: auto;
width: 100%;
padding: 0px !important;
}
.sensei-course-theme:not(.learning-mode-full-width) .sensei-course-theme__header.sensei-course-theme__frame:not(.learning-mode-full-width-header) {
max-width: 1240px;
padding-left: 20px;
padding-right: 20px;
}
.sensei-course-theme:not(.learning-mode-full-width) .wp-site-blocks > * {
max-width: 1200px;
margin: auto;
}
.sensei-course-theme:not(.learning-mode-full-width) .sensei-course-theme__quiz__footer__wrapper {
max-width: 100%;
}
.sensei-course-theme__header + .sensei-course-theme__columns > div:first-child.sensei-course-theme__sidebar {
border-radius: 0px;
border-width: 0px 1px 0px 0px;
padding-left: 20px;
padding-right: 20px;
}
/* Modern Template */
.sensei-modern .sensei-course-theme__sidebar:not(.sensei-course-theme__secondary-sidebar) {
border: 1px solid var(--sensei-text-color);
border-radius: 4px;
}
/* Modern Template */
.sensei-course-theme.sensei-modern .sensei-course-theme__header,
.sensei-course-theme.sensei-modern .sensei-course-theme__sidebar {
background-color: var(--sensei-background-color);
color: var(--sensei-text-color);
}
.learning-mode-full-width .wp-block-sensei-lms-course-theme-course-progress-counter {
opacity: 1;
}
.wp-block-sensei-lms-exit-course:hover {
text-decoration: none;
}