The theme for the Living on the Edge 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.
Style
margin: 20px auto 0;
margin-bottom: 0;
box-shadow: rgba(0,0,0,0.8) 0 2px 30px -2px;
border-radius: 6px 6px 0 0;
border: none;
padding-bottom: 60px;
min-height: calc((100vh - 69px) - 81px);
box-sizing: content-box;
Roboto
Base font in this Lesson.
Merriweather
Subheading font in this lesson.
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);
Style
font-weight: 400;
font-style: italic;
font-family: 'Merriweather',sans-serif;
font-size: 16px;
opacity: .85;
text-shadow: 0 0 7px rgba(0,0,0,0.6);
line-height: 140%;
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;
Style
font-size: 48px;
font-family: 'Roboto',sans-serif;
line-height: 140%;
color: rgba(0, 0, 0, 0.8);
Style
font-size: 22px;
font-weight: 400;
font-style: italic;
font-family: 'Merriweather',sans-serif;
line-height: 140%;
color: rgba(0, 0, 0, 0.8);
Style - Top Bar
.bracketed::before {
content: '';
width: 50px;
height: 1px;
position: absolute;
top: -30px;
border-bottom: 1px solid #2e9fff;
}
Style - Bottom Bar
.bracketed::after{
content: '';
width: 50px;
height: 5px;
position: absolute;
top: -50px;
border-bottom: 1px solid #2e9fff;
}
Style
font-size: 16px;
font-family: 'Roboto',sans-serif;
line-height: 140%;
color: rgba(0, 0, 0, 0.8);
Style - UL
ul{
list-style: none;
margin-top: 0;
padding-left: 19px;
}
Style - LI
li{
margin-bottom: 13px;
margin-left: 0;
position: relative;
}
Style - Bullet
li::before {
content: '';
width: 8px;
height: 8px;
background: #2e9fff;
display: block;
position: absolute;
left: -19px;
top: 6px;
}
Style
padding: 0px;
font-size: 22px;
font-family: 'Roboto',sans-serif;
line-height: 140%;
color: rgba(0, 0, 0, 0.8);
Style - Caption Type 1
font-size: 14px;
font-family: 'Roboto',sans-serif;
line-height: 140%;
color: rgba(51,51,51,1.0);
Style - Caption Type 2
font-style: italic;
font-size: 12px;
font-family: 'Roboto',sans-serif;
line-height: 140%;
color: rgba(102,102,102,1.0);
Style
padding: 0px;
font-family: 'Roboto',sans-serif;
font-size: 22px;
line-height: 140%;
color: rgba(255,255,255,1.0);
Style - Background
background-color: rgba(77,77,77,0.85);
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);
Style
background-color: #2E9FFF;
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;
Style - Container of Input
vertical-align: top;
margin: 0 6px 13px 0;
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;
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;
}
Style - Order List Bar
background: #2e9fff;
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);