Update colors and typography of default Learning Mode template (#7008)
* Update colors and typography of default Learning Mode template * Style course title * Use CSS variable for font size since it's equivalent * Update pagination * Don't include colors in theme.json because it doesn't work with global styles * Fix global styles for module title and "Quiz" link in course navigation * Fix global styles for lessons in course navigation * Fix global styles not working with course progress counter * Keep links in sidebar their original color * Fix global styles for pagination
This commit is contained in:
Donna Peplinskie
GitHub
parent
0866f14726
commit
4a46c6aeed
2 changed files with 71 additions and 65 deletions
|
|
@ -14,11 +14,6 @@ body {
|
|||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
.sensei-lms-course-navigation-lesson {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.sensei-course-theme__sidebar {
|
||||
--sensei-lm-sidebar-width: 290px;
|
||||
}
|
||||
|
|
@ -27,57 +22,64 @@ body {
|
|||
padding-top: 45px;
|
||||
}
|
||||
|
||||
.sensei-lms-course-navigation-lesson__title {
|
||||
font-family: var(--wp--preset--font-family--system);
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.sensei-lms-course-navigation-module__title {
|
||||
font-family: var(--wp--preset--font-family--heading);
|
||||
font-size: var(--wp--preset--font-size--medium);
|
||||
line-height: 100%;
|
||||
letter-spacing: 0.01em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sensei-lms-course-navigation-lesson__extra {
|
||||
font-size: 1rem;
|
||||
font-family: var(--wp--preset--font-family--system);
|
||||
line-height: 100%;
|
||||
font-weight: normal;
|
||||
opacity: 1;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.sensei-lms-course-navigation-module__summary {
|
||||
font-family: var(--wp--preset--font-family--system);
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
margin-top: 4px;
|
||||
line-height: 16px;
|
||||
opacity: 1;
|
||||
text-transform: uppercase;
|
||||
/* 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:not(:first-of-type) {
|
||||
margin-top: 18px;
|
||||
.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-family: var(--wp--preset--font-family--system);
|
||||
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 .is-link {
|
||||
font-weight: 600;
|
||||
text-decoration: underline !important;
|
||||
background: none !important;
|
||||
color: inherit !important;
|
||||
.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 {
|
||||
|
|
@ -118,10 +120,6 @@ body {
|
|||
height: 20px;
|
||||
}
|
||||
|
||||
.sensei-lms-course-navigation-lesson__link {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.sensei-course-theme .sensei-course-theme__video-container::after {
|
||||
--sensei-lm-sidebar-width: 290px;
|
||||
}
|
||||
|
|
@ -150,6 +148,10 @@ body {
|
|||
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;
|
||||
}
|
||||
|
|
@ -197,19 +199,10 @@ body {
|
|||
color: var(--sensei-text-color);
|
||||
}
|
||||
|
||||
.sensei-lms-course-navigation + .wp-block-spacer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.learning-mode-full-width .wp-block-sensei-lms-course-theme-course-progress-counter {
|
||||
font-size: var(--wp--preset--font-size--x-small);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sensei-lms-course-navigation-lesson {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.wp-block-sensei-lms-exit-course:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -657,9 +657,12 @@
|
|||
},
|
||||
"sensei-lms/course-title" : {
|
||||
"typography": {
|
||||
"textTransform": "uppercase",
|
||||
"fontFamily": "var(--wp--preset--font-family--heading)",
|
||||
"fontSize": "var(--wp--preset--font-size--medium)"
|
||||
"fontSize": "clamp(1.5rem, 1.5rem + 0vw, 1.5rem)",
|
||||
"fontWeight": "400",
|
||||
"letterSpacing": "0.01em",
|
||||
"lineHeight": "1",
|
||||
"textTransform": "uppercase"
|
||||
}
|
||||
},
|
||||
"sensei-lms/course-navigation" : {
|
||||
|
|
@ -677,21 +680,30 @@
|
|||
"sensei-lms/course-theme-course-progress-counter" : {
|
||||
"typography": {
|
||||
"fontFamily": "var(--wp--preset--font-family--system)",
|
||||
"fontSize": "calc(0.7*var(--wp--preset--font-size-x-small))",
|
||||
"letterSpacing": "0.02em"
|
||||
"fontSize": "clamp(0.875rem, 0.696rem + 0.476vw, 1.125rem)",
|
||||
"letterSpacing": "0.02em",
|
||||
"lineHeight": "1"
|
||||
}
|
||||
},
|
||||
"sensei-lms/course-theme-lesson-module": {
|
||||
"typography": {
|
||||
"fontSize": "0px"
|
||||
"fontFamily": "var(--wp--preset--font-family--system)"
|
||||
}
|
||||
},
|
||||
"sensei-lms/exit-course" : {
|
||||
"sensei-lms/exit-course": {
|
||||
"typography": {
|
||||
"fontFamily": "var(--wp--preset--font-family--system)",
|
||||
"fontSize": "var(--wp--preset--font-size--x-small)",
|
||||
"textDecoration": "underline",
|
||||
"letterSpacing": "0.02em"
|
||||
"letterSpacing": "0.02em",
|
||||
"lineHeight": "1"
|
||||
}
|
||||
},
|
||||
"sensei-lms/page-actions": {
|
||||
"typography": {
|
||||
"fontFamily": "var(--wp--preset--font-family--heading)",
|
||||
"fontSize": "var(--wp--custom--typography--font-sizes--button)",
|
||||
"letterSpacing": "0.05em"
|
||||
}
|
||||
},
|
||||
"core/quote": {
|
||||
|
|
@ -910,7 +922,8 @@
|
|||
},
|
||||
"typography": {
|
||||
"fontFamily": "var(--wp--preset--font-family--body)",
|
||||
"fontSize": "var(--wp--custom--typography--font-sizes--normal)"
|
||||
"fontSize": "var(--wp--custom--typography--font-sizes--normal)",
|
||||
"lineHeight": "1.3"
|
||||
}
|
||||
},
|
||||
"templateParts": [
|
||||
|
|
|
|||
Loading…
Reference in a new issue