/*========================================================
Rise 360 compulsory CSS
For use in all Digital Learning and Development Rise 360 courses.
Version 1.0
Last updated 04/11/2024
==========================================================*/
/*Global variables – edit these variables to suit your course design.
==========================================================*/
:root {
--custom-theme-colour-button-hover-opacity: .9; /*This sets the opacity of buttons and checkboxes that use the theme colour, such as continue buttons.Lower value equals ligher hover colour.*/
--custom-carousel-prev-next-hover-colour: #000; /*This sets the hover state colour of the previous and next buttons on the quote carousel and image carousel blocks.*/
}
/*Global CSS edits
==========================================================*/
/*Links > Hover state: Add a background colour and border.*/
.brand--linkColor a:hover {
outline: solid 3px rgba(0, 0, 0, .1); /*Using transparancy prevents surrounding text, such as full stops, from vanishing.*/
background-color: rgba(0, 0, 0, .1) !important;
}
/*Cover page
==========================================================*/
/*Cover page > Start module button: Remove all caps, increase font size, decrease font weight, adjust padding.*/
.cover__header-content-action-link-text{
text-transform: none;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: .1rem;
}
.cover__header-content-action-link {
padding: 0.8rem 2.9rem !important;
}
/*Cover page > body text: Increase font size and change colour.*/
.cover__details-content-description.brand--linkColor {
color: #000;
font-size: 1.7rem;
}
/*Cover page > Section titles: Increase font size, remove all caps, darken border line.*/
.overview-list__section-title {
border-bottom: .1rem solid #717376; /*Colour of the lesson icons.*/
font-size: 1.4rem;
text-transform: none;
}
/*Cover page > lesson list: Increase font size.*/
.overview-list-item__title {
font-size: 1.4rem;
}
/*Navigation menu
==========================================================*/
/*Navigation menu > % progress indicator: Remove all caps, increase font size.*/
.nav-sidebar-header__progress-text {
text-transform: none !important;
font-size: 1.4rem !important;
}
/*Navigation menu > Section titles: Remove all caps, increase font size.*/
.nav-sidebar__outline-section-toggle-text {
text-transform: none;
font-size: 1.4rem;
}
.nav-sidebar__outline-section-toggle:after {
border-bottom: 1px solid #717376 !important;
}
/*Navigation menu > Lesson titles: Increase font size.*/
.nav-sidebar__outline-section-item__link {
font-size: 1.4rem !important;
}
/*Lesson header
==========================================================*/
/*Lesson header > Lesson counter: Increase font size, remove italics.*/
.lesson-header__counter {
font-size: 1.4rem;
font-style: normal;
margin-bottom: 1.3rem !important;
}
/*Text blocks
==========================================================*/
/*Paragraph
----------------------------------------------------------*/
/*Paragraph with heading
----------------------------------------------------------*/
/*Paragraph with subheading
----------------------------------------------------------*/
/*Heading
----------------------------------------------------------*/
/*Subheading
----------------------------------------------------------*/
/*Columns
----------------------------------------------------------*/
/*Table
----------------------------------------------------------*/
/*Statement blocks
==========================================================*/
/*Statement A
----------------------------------------------------------*/
/*Statement B
----------------------------------------------------------*/
/*Statement C
----------------------------------------------------------*/
/*Statement D
----------------------------------------------------------*/
/*Note
----------------------------------------------------------*/
/*Quote blocks
==========================================================*/
/*Quote A
----------------------------------------------------------*/
/*Quote B
----------------------------------------------------------*/
/*Quote C
----------------------------------------------------------*/
/*Quote D
----------------------------------------------------------*/
/*Quote on image
----------------------------------------------------------*/
/*Quote carousel
----------------------------------------------------------*/
/*Quote carousel
-------------------------------------------------------------*/
/*List blocks
==========================================================*/
/*Numbered list
----------------------------------------------------------*/
/*Checkbox list
----------------------------------------------------------*/
/*Checkbox list > Checkboxes: Move the checkboxes to the front and change the hover colour.*/
.block-list__checkbox {
z-index: 2;
transition: all .15s ease-in-out;
}
.block-list__checkbox:hover {
background-color: var(--color-theme-decorative);
opacity: var(--custom-theme-colour-button-hover-opacity);
}
/*Bulleted list
----------------------------------------------------------*/
/*Image blocks
==========================================================*/
/*Image blocks > Caption: Increase font size. This can be changed by manually adjusting the font size in Rise.*/
.block-image__caption, .block-gallery__caption {
font-size: 1.4rem !important;
}
/*Image centered
----------------------------------------------------------*/
/*Image full width
----------------------------------------------------------*/
/*Image & text
----------------------------------------------------------*/
/*Text on image
----------------------------------------------------------*/
/*Gallery blocks
==========================================================*/
/*Carousel
----------------------------------------------------------*/
/* Gallery Carousel
--------------------------------------------------*/
/*Note that the hover state of the progression circles is modified in the Quote carousel section.*/
/*Two column grid
----------------------------------------------------------*/
/*Three column grid
----------------------------------------------------------*/
/*Four column grid
----------------------------------------------------------*/
/*Multimedia blocks
==========================================================*/
/*Audio
----------------------------------------------------------*/
/*Audio > Play/puase button and scrub slider: Increase size and gap between. Change hover scale.*/
.audio-player__play {
margin-right: 1.6rem;
}
.audio-player__play .svg-inline--fa {
height: 1.7rem;
transition: all 0.15s ease-in-out;
}
.audio-player__play .svg-inline--fa:hover {
transform: scale(1.2);
}
.audio-player__tracker-handle{
height: 100%;
}
.audio-player__tracker-handle-icon>svg {
height: 1.5rem;
width: 1.5rem;
}
.audio-player__tracker-handle-icon{
transition: all 0.15s ease-in-out;
}
.audio-player__tracker-handle-icon:hover {
transform: scale(1.2);
}
.audio-player__tracker-handle-icon:active {
transform: scale(1.2);
}
/*Audio > track line: Make line thicker.*/
.audio-player__tracker-bar {
border-top: .16rem solid var(--color-track);
}
.audio-player__tracker:after {
border-top: .16rem solid var(--color-runner);
}
/*Audio > Timer: Increase font size.*/
.audio-player__timer {
font-size: 1.2rem;
}
/*Audio > Caption: Increase font size. This can be changed by manually adjusting the font size in Rise.*/
.block-audio__caption {
font-size: 1.4rem;
}
/*Video
----------------------------------------------------------*/
/*Video > Caption: Change font size to 14px.*/
.block-video__caption {
font-size: 1.4rem;
}
/*Embed
----------------------------------------------------------*/
/*Attachement
----------------------------------------------------------*/
/*Attachement: Add hover colour.*/
.block-attachment:hover {
background: #ebebeb;
}
/*Code snippet
----------------------------------------------------------*/
/*Code snippet > Caption: Increase font size.*/
.block-text__code-caption p {
font-size: 1.4rem;
}
/*Interactive blocks
==========================================================*/
/*Accordion
----------------------------------------------------------*/
/*Tabs
----------------------------------------------------------*/
/*Tabs
---------------------------------------------------*/
/*Labeled graphic
----------------------------------------------------------*/
/*Labeled graphic
------------------------------------------*/
/*Process
----------------------------------------------------------*/
/*Scenario
----------------------------------------------------------*/
/*Sorting activity
----------------------------------------------------------*/
/*Sorting activity > Restart button: Remove all caps, change font size, colour and letter spacing.*/
.block-sorting-activity .restart-button__content {
color: var(--color-theme-decorative);
border-radius: 5px;
text-transform: none;
font-size: 1.5rem;
letter-spacing: .1rem;
font-weight: 700;
}
/*Sorting activity > Restart button: Add a hover state.*/
.block-sorting-activity .deck__title {
margin-bottom: 1rem;
padding-bottom: .6rem;
border-bottom: .1rem solid rgba(0, 0, 0, .2);
}
.block-sorting-activity .restart-button {
margin-top: 0rem;
border: none;
padding: 1rem;
border-radius: 5px;
min-height: 7.45rem;
}
.block-sorting-activity .restart-button {
transition: background-color 0.3s;
}
.block-sorting-activity .restart-button:hover {
background-color: #ebebeb;
}
/*Timeline
----------------------------------------------------------*/
/*Flashcard grid
----------------------------------------------------------*/
/*Flashbard stack
----------------------------------------------------------*/
/*Flashcard stack > Previous and Next button: Change hover state.*/
.block-flashcards-slider__arrow--next, .block-flashcards-slider__arrow--prev {
transition: opacity .3s;
}
.block-flashcards-slider__arrow--next:hover, .block-flashcards-slider__arrow--prev:hover {
opacity: var(--custom-theme-colour-button-hover-opacity);
}
/*Flashcard stack > Slide counter: Remove italics.*/
.block-flashcards-slider__progress-text {
font-style: normal;
}
/*Flashcard stack > Progress line: Increase thickness.*/
.block-flashcards-slider__progress-line {
border-bottom: max(.2rem, 2px) solid var(--color-progress-track);
position: relative;
}
.block-flashcards-slider__progress-runner {
border-bottom: max(.2rem, 2px) solid var(--color-theme-decorative);
}
/*Button
----------------------------------------------------------*/
/*Button and Button stack > Button: Remove all caps, increase font size and line height.*/
.blocks-button__button {
transition: all .3s;
text-transform: none;
font-size: 1.5rem;
line-height: 3.9rem;
}
/*Button and Button stack > Button: Change hover state.*/
.blocks-button__button:hover {
opacity: var(--custom-theme-colour-button-hover-opacity);
}
/*Button and Button stack > Button: Offset the focus state outline.*/
.blocks-button__button:focus {
outline-offset: .4rem;
}
/*Button stack
----------------------------------------------------------*/
/*Storyline
----------------------------------------------------------*/
/*Knowledge check blocks AND Quiz lesson
==========================================================*/
/*Knowledge check/Quiz > Options: remove extra space between question options and submit button/feedback box.*/
.block-knowledge .quiz-card__interactive {
margin-bottom: 0rem;
}
/*Knowledge check/Quiz > Submit/Next buttons: Remove all caps and increase font size.*/
.quiz-card__button{
transition: opacity .3s;
text-transform: none;
font-size: 1.5rem;
}
/*Knowledge check/Quiz > Submit/Next buttons: Change hover state.*/
.quiz-card__button:hover {
opacity: var(--custom-theme-colour-button-hover-opacity);
}
/*Knowledge check/Quiz > Submit/Next buttons: Offset the focus state outline.*/
.quiz-card__button:focus {
outline-offset: 0.4rem;
}
/*Knowledge check/Quiz > 'Correct/Incorrect' label: Increase font size.*/
.quiz-card__feedback-label {
font-size: 1.4rem;
}
/*Knowledge check/Quiz > Feedback body text: Increase font size, align left and ensure color is black. */
.quiz-card__feedback-text {
font-size: 1.6rem;
text-align: left;
color: #000;
}
/*Knowledge check > Try again button: Remove all caps, increase font size and change to theme colour. Note that the Rise 360 label text must also be lowercase.*/
.block-knowledge__retake-text {
text-transform: none;
font-size: 1.4rem;
}
.block-knowledge__retake {
color: var(--color-theme-decorative)
}
/*Knowledge check > Try again button: Change hover state.*/
.block-knowledge__retake-content {
transition: background-color 0.3s;
border-radius: 5px;
padding: 1rem;
margin: -1rem /*Negative margin pushes the margin out into the padding area to create a larger hover state without having to change the padding for the normal state.*/
}
.block-knowledge__retake-content:hover {
background-color: #ebebeb;
}
/*Multiple choice
----------------------------------------------------------*/
/*Multiple response
----------------------------------------------------------*/
/*Fill in the blank
----------------------------------------------------------*/
/*Fill in the blank > 'Acceptable responses' label: Increase font size and remove italics.*/
.quiz-fill__options {
font-size: 1.4rem;
font-style:normal;
}
/*Matching
----------------------------------------------------------*/
/*Matching: Increase font size to 16px.*/
.quiz-match__item-content {
font-size: 1.5rem;
}
/*Quiz
----------------------------------------------------------*/
/*Quiz > 'Lesson X of Y' label: Increase font size, letter spacing and remove italics.*/
.quiz-header__counter {
font-size: 1.4rem;
font-style: normal;
letter-spacing: .05rem;
}
/*Quiz > 'Start assessment' label: Remove all caps, increase font size, move icon to the left.*/
.quiz-header__start-quiz {
transition: all .3s;
text-transform: none;
font-size: 1.5rem;
border-radius: 5px;
padding: 1rem;
margin: -1rem;
}
.quiz-header__start-quiz [class*=icon-] {
margin-left: .6rem;
}
/*Quiz > 'Start assessment' label: Add hover state.*/
.quiz-header__start-quiz:hover {
background-color: #ebebeb;
}
/*Quiz > 'Question' label: Remove italics and increase font size.*/
.quiz-card__step-label {
font-size: 1.4rem;
font-style: normal;
letter-spacing: .05rem;
font-weight: 400;
}
@media (max-width: 47.9375em) {
.quiz-card__counter {
font-size: 2.2rem;
}
}
/*Quiz > Quiz results odemeter: Increase font size on all elements.*/
.odometer__score-label, .odometer__passlabel, .odometer__passpercent {
font-size: 1.4rem;
text-transform: none;
}
/*Quiz > Quiz results 'Try again' button: Remove all caps, change font colour, size, weight and letter spacing, adjust padding.*/
.quiz-results__footer .restart-button__content {
transition: background-color 0.3s;
color: var(--color-theme);
text-transform: none;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: .1rem;
padding: 1rem;
margin: -1rem;
border-radius: 5px;
}
/*Quiz > Quiz results 'Try again' button: Add hover state.*/
.quiz-results__footer .restart-button__content:hover {
background-color: #ebebeb;
}
/*Draw from question bank
----------------------------------------------------------*/
/*Chart blocks
==========================================================*/
/*Bar chart
----------------------------------------------------------*/
/*Line chart
----------------------------------------------------------*/
/*Pie chart
----------------------------------------------------------*/
/*Divider blocks
==========================================================*/
/*Continue
----------------------------------------------------------*/
/*Continue: Change hover state.*/
.continue-btn {
transition: opacity 0.3s;
}
.continue-btn:hover {
opacity: var(--custom-theme-colour-button-hover-opacity);
}
/*Continue: Offset the focus state outline.*/
.continue-btn:focus {
outline-offset: 0.4rem;
}
/*Divider
----------------------------------------------------------*/
/*Numbered divider
----------------------------------------------------------*/
/*Spacer
----------------------------------------------------------*/
/*CSS edits by Firstname Lastname on XX/XX/202X.*/
/*========================================================
Optional CSS edits – Paste all optional CSS edits below this comment.
==========================================================*/