Embedded Files
Lesson Styles
Lesson Styles
The theme for the Critical Chemistry course starts with Smart Sparrow's Light Theme as the base.
Any styling unique to this course is covered in the Geological Disasters CSS.
Below are examples of these course-specfic styles.
Content Container
Content Container
Content Container
Content Container
Style
margin: 80px auto;
box-shadow: rgba(0,0,0,0.8) 0 2px 30px -2px;
border-radius: 0;
border: none;
padding-bottom: 60px;
min-height: calc((100vh - 69px) - 81px);
background-color:white;
Darken Background
Darken Background
Style
background-color: rgba(0,0,0,0.5) !important;
Border Radius
Border Radius
Style
border-radius: 10px;
Typography
Typography
Download Fonts
Download Fonts
Roboto
Base font in this Lesson.
Merriweather
Subheading font in this lesson.
Oswald
Contents numbering font in this lesson.
Cover Title
Cover Title
Style
font-weight: 100;
font-family: 'Roboto',sans-serif;
font-size: 110px;
text-shadow: 0 0 7px rgba(0,0,0,0.6);
color: rgba(255,255,255,1.0);
Cover Subtitle
Cover Subtitle
Style
font-weight: 400;
font-style: italic;
font-family: 'Merriweather',sans-serif;
font-size: 24px;
opacity: .85;
text-shadow: 0 0 7px rgba(0,0,0,0.6);
Contents
Contents
Style
Container
font-family: 'Roboto',sans-serif;
line-height: 1.3;
Label - "Contents"
color: rgba(255,255,255,1.0);
font-size: 12px;
List - ul
padding: 0 !important;
List item - li
color: white;
font-size: 12px;
margin:0 0 8px 21px !important;
counter-increment: customlistcounter;
margin-bottom: 20px !important;
text-transform: uppercase;
Bullet numbering
content: counter(customlistcounter);
position: absolute;
top: -4px;
background: none;
font-family: "Oswald",sans-serif;
font-size: 18px;
Top border - ul:before
width: 252px;
height: 1px;
border-top: 1px solid rgba(255,255,255,0.5);
Bottom border - ul:after
width: 50px;
height: 6px;
border-bottom: 5px solid rgba(255,255,255,0.95);
Section Marker
Section Marker
Style
border: 3px solid #2e9fff !important;
display: inline-block !important;
padding: 7px 12px !important;
font-weight: 700 !important;
font-family: 'Oswald',sans-serif !important;
letter-spacing: 3px !important;
text-transform: uppercase;
color: #2e9fff !important;
Section Title
Section Title
Style
font-size: 48px;
font-family: 'Roboto',sans-serif;
line-height: 140%;
color: rgba(0, 0, 0, 0.8);
Section Subtitle - Marked for Possible Deletion
Section Subtitle - Marked for Possible Deletion
Style
Text
font-size: 22px;
font-weight: 400;
font-style: italic;
font-family: 'Merriweather',sans-serif;
line-height: 140%;
color: rgba(0, 0, 0, 0.8);
Top Bar
.bracketed::before {
content: '';
width: 50px;
height: 1px;
position: absolute;
top: -30px;
border-bottom: 1px solid #2e9fff;
}
Bottom Bar
.bracketed::after{
content: '';
width: 50px;
height: 5px;
position: absolute;
top: -50px;
border-bottom: 1px solid #2e9fff;
}
Paragraph
Paragraph
Style
font-size: 16px;
font-family: 'Roboto',sans-serif;
line-height: 150%;
color: rgba(0, 0, 0, 0.8);
Link
Link
Style
font-size: 13px;
font-family: 'Roboto',sans-serif;
color: #2196F3;
border-bottom: 1px solid #2196F3;
Unordered List - Default
Unordered List - Default
Style
List - ul
ul{
list-style: none;
margin-top: 0;
padding-left: 19px;
}
List item - li
li{
margin-bottom: 13px;
margin-left: 0;
position: relative;
}
Bullet
li::before {
content: '';
width: 8px;
height: 8px;
background: #2e9fff;
display: block;
position: absolute;
left: -19px;
top: 6px;
}
Unordered List - Introduction
Unordered List - Introduction
Style
Label
text-transform: uppercase;
List - ul
padding: 0px;
List - li
margin: 0;
List - p
margin: 0;
List - span
font-size: 14px;
Instruction Text
Instruction Text
Style
padding: 0px;
font-size: 22px;
font-family: 'Roboto',sans-serif;
line-height: 140%;
color: rgba(0, 0, 0, 0.8);
Caption Text
Caption Text
Style
font-size: 14px;
font-family: 'Roboto',sans-serif;
line-height: 140%;
color: rgba(51,51,51,1.0);
Buttons
Buttons
Popup
Popup
Style
box-sizing: border-box;
background-color: #2e9fff;
padding: 14px;
background: url(../assets/icon-info-light.svg), url(https://style.smartsparrow.com/default-viewer-themes/1.9.1/assets/icon-info-light.svg);
background-repeat: no-repeat;
background-position: center;
width: 0;
height: 0;
padding: 18px;
border-radius: 50%;
transition: all .3s cubic-bezier(0, 0, .2, 1);
background-color: #0097A7;
box-shadow: 0 0 4px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.28);
Style - Hover
box-shadow: 0 0 6px rgba(0,0,0,0.16), 0 6px 12px rgba(0,0,0,0.32);
Style - Focus
outline: none;
box-shadow: 0 0 0 4px rgba(0,151,167,0.3);
Navigation
Navigation
Style
background-color: #2E9FFF;
Inputs
Inputs
Single Line, Multiline, Number Text Input
Single Line, Multiline, Number Text Input
Style - Container
color: rgba(0,0,0,0.8);
display: flex;
flex-direction: column;
Style - Label
font-family: 'Roboto',sans-serif;
left: 0;
text-transform: uppercase;
padding-bottom: 5px !important;
color: rgba(0,0,0,0.6);
letter-spacing: .05em;
position: absolute;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
Style - Input/Textarea
font-family: 'Roboto',sans-serif;
Style - Units
position: absolute;
left: 100%;
bottom: 0;
padding: 0;
margin-left: 5px;
line-height: 35px;
font-family: 'Roboto',sans-serif;
font-size: 14px;
white-space: nowrap;
Multiple Choice, Multiselect
Multiple Choice, Multiselect
Style - Container of Input
vertical-align: top;
margin: 0 6px 13px 0;
Multiselect Rows
Multiselect Rows
Style
Container of Input
margin: 0 0 8px 0;
display: block;
position: static;
min-height: 20px;
line-height: normal;
vertical-align: middle;
Input
position: absolute;
opacity: 0;
pointer-events: none;
margin: 5px 0;
height: 0;
Label
padding: 10px 16px;
background: #EFF8FF;
transition: background .3s ease,box-shadow .3s ease;
Label (with input:checked)
background: #2196F3;
Label text
display: block;
margin: 0;
font-size: 16px;
line-height: 140%;
color: #072D4E;
transition: color .3s ease;
Label Text (with input:checked)
color: white;
Dropdown
Dropdown
Style - Select
transition: all 250ms ease;
height: 30px;
min-height: 30px;
border: 1px solid #d9d9de;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
padding: 0 10px;
width: 100%;
font-family: 'Roboto',sans-serif;
color: rgba(0,0,0,0.7);
font-size: 14px;
Style - Select
padding: 0px;
font-family: Arial;
Components
Components
Carousel
Carousel
Style
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev {
font-size: 0;
width: 110px;
}
.owl-carousel .owl-nav .owl-prev::before {
content: 'Previous image';
font-size: 14px;
}
.owl-carousel .owl-nav .owl-next::before {
content: 'Next Image';
font-size: 14px;
}
Sorting
Sorting
Style - Order List Bar
background: #2e9fff;
Grouping
Grouping
Style - Item Type Text
background-color: #2e9fff
Style - Group Area
background-color: rgba(33, 150, 243, 0.15);
border-color: rgba(33, 150, 243, 0.40);
Drag and Drop
Drag and Drop
Style
.item {
border: 4px solid transparent;
}
.item-type-text {
background: #2e9fff;2196F3
}
Page updated
Report abuse