Embedded Files
Lesson Styles
Lesson Styles
Download Lesson Style
Download Lesson Style
The theme for the Star Party course starts with Smart Sparrow's Light Theme as the base.
Any styling unique to this course is covered in the Star Party CSS.
Content Background
Content Background
Background
Background
Style
background-color:#222222;
Background Image
Background Image
Container
Container
Can be fully opaque, or have varying levels of opacity as needed.
Style
opacity: 1; /* 100% opacity - default */
opacity: .8; /* 80% opacity */
opacity: .4; /* 40% opacity */
Typography
Typography
Download Font
Download Font
Open Sans
Base font in this Lesson.
Title
Title
Style
font-family: OpenSans, sans-serif;
color:#d77009;
font-size: 48px;
Paragraph
Paragraph
Style
font-family: OpenSans, sans-serif;
font-size: 16px;
color: #d6d6d6;
line-height: 125%;
Vocabulary
Vocabulary
Style
font-family: OpenSansBold, sans-serif;
font-style: italic;
font-size: 16px;
color: #66b2cb;
Action
Action
Style
font-family: OpenSansBold, sans-serif;
font-size: 16px;
color: #d77009;
Link
Link
Style
font-size:16px;
color: #3398b9;
border-bottom: 1px solid currentColor;
Caption
Caption
Style
font-family: OpenSans, sans-serif;
font-size: 14px;
color: #d6d6d6;
font-style: italic; /* optional */
Host Speak
Host Speak
Font
font-family: OpenSansBold, sans-serif;
font-size: 16px;
line-height: 125%;
color: #c2c2c2;
Background
padding: 10px;
background-color: rgba(0,0,0,0.8);
Speech Bubbles
Speech Bubbles
Font
font-family: OpenSansBold, sans-serif;
font-size: 16px;
line-height: 125%;
Background
padding: 10px;
box-sizing: border-box;
border-radius: 5px;
padding: 10px 20px;
box-shadow: 2px 2px 1px rgba(0, 0, 0, .2);
overflow: inherit;
Background:before (Tail)
content: "";
position: absolute;
bottom: -5px;
right: calc(50% - 10px);
background-color: inherit;
transform: translateY(-2px) rotateZ(90deg) skewX(45deg);
width: 10px;
height: 10px;
box-shadow: 2px 2px 1px rgba(0, 0, 0, .2);
host-speak
host-speak
Font
color: #c2c2c2;
Background
border: solid 1px rgba(255, 255, 255, .4);
background-color: rgba(0,0,0,0.8);
guest-speak
guest-speak
Font
color: #333333;
Background (various)
background-color: #a3bfac; /* green */
background-color: #e7a96b; /* orange */
background-color: #bda9c9; /* lavender */
background-color: #FEF499; /* yellow */
background-color: #99cbdc; /* blue */
Inputs
Inputs
Single Line, Multiline, Number Text Input
Single Line, Multiline, Number Text Input
Style
Container
padding: 10px;
background-color: black;
Label
font-family: 'OpenSans',sans-serif;
padding: 10px;
width: 100%;
box-sizing: border-box;
background-color: black;
color: #ebebeb;
padding: 10px;
width: 100%;
box-sizing: border-box;
background-color: black;
Input/Textarea
font-family: 'OpenSans',sans-serif;
font-size: 16px !important;
padding-top: 5px !important;
Units
position: absolute;
left: 100%;
bottom: 0;
padding: 0;
margin-left: 5px;
line-height: 35px;
font-family: 'Open Sans',sans-serif;
font-size: 14px;
white-space: nowrap;
MCQ
MCQ
Style
Empty Radio Button
width: 20px;
height: 20px;
background-color: transparent;
box-shadow: inset 0 0 0 2px #d9d9de;
border-radius:100%;
Filled Radio Button
background-color: #d77009;
/* dot */
width: 6px;
height: 6px;
background-color: white;
Empty Checkbox
width: 20px;
height: 20px;
background-color: transparent;
box-shadow: inset 0 0 0 2px #d9d9de;
border-radius:3px;
Filled Checkbox
background-color: #d77009;
/* check */
width: 6px;
height: 11px;
border-color: white;
border-width:2px;
Dropdown
Dropdown
Style
Container
background-color: black;
padding: 10px !important;
Label
position: absolute;
transform: translateY(-100%);
color: #ebebeb;
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: 13px;
padding-bottom: 5px !important;
font-family: OpenSans, sans-serif !important;
width: 100%;
box-sizing: border-box;
margin-left: -10px;
background-color: black;
padding: 10px !important;
Without Label
.dropdown-input.no-label label,
.dropdown-input label:empty
display: none !important;
Select
color: #333333;
background-color: #ffffff !important;
background: none;
position: relative;
border-radius: 4px;
border: 1px solid #d9d9de !important;
height: 35px !important;
min-height: 35px !important;
padding: 5px 8px !important;
width: 100% !important;
appearance: none;
-webkit-appearance: none;
Select: Focus
border: 1px solid #006586;
Arrow
content: '\f078';
font-family: FontAwesome4;
height: 35px;
padding: 14px 0px 0px 8px;
border-left: 0px solid #006586;
position: absolute;
pointer-events: none;
line-height: 8px;
box-sizing: border-box;
color: #d77009 !important;
right: 20px;
bottom: 10px;
Slider
Slider
Style
Slider Handle
background-color: #d77009;
Buttons
Buttons
Popup Button
Popup Button
Style
background: none;
background-color: #9D7DAE !important;
background-position: center;
background-repeat: no-repeat;
-moz-box-shadow: 2px 2px rgba(0,0,0,.2);
-webkit-box-shadow: 2px 2px rgba(0,0,0,.2);
box-shadow: 2px 2px rgba(0,0,0,.2);
Style - Green
background-color: #477E59 !important;
Hover
background-color: #7C5293 !important;
Hover - Green
background-color: #195E2F !important;
Focus
outline: none;
box-shadow: 0 0 0 4px rgba(91, 39, 120, .2);
Focus - Green
outline: none;
box-shadow: 0 0 0 4px rgba(25, 94, 47, .2);
Active
box-shadow: inset 0px 2px rgba(0,0,0,.4);
transform: translateY(1px);
Question Icon
background-size: 16px 19px;
background-image: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1'><text x='0' y='18' fill='white' font-size='24px' font-weight='bold' font-family='arial, sans-serif'>?</text></svg>);
Information Icon
background-size: 7px 19px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1'><text x='0' y='18' fill='rgb(255,255,255)' font-size='24px' font-weight='bold' font-family='arial, sans-serif'>i</text></svg>");
Document Icon
background-size: 20px 20px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39.71 52.23' fill='rgb(255,255,255)'><defs></defs><title>doc</title><g id='Layer_2' data-name='Layer 2'><g id='doc'><path class='cls-1' d='M34.71,5V47.23H5V5H34.71m.64-5h-31A4.36,4.36,0,0,0,0,4.36v43.5a4.37,4.37,0,0,0,4.36,4.37h31a4.37,4.37,0,0,0,4.36-4.37V4.36A4.36,4.36,0,0,0,35.35,0Z'/><path class='cls-1' d='M27.36,10h-15a2.5,2.5,0,0,0,0,5h15a2.5,2.5,0,0,0,0-5Z'/><path class='cls-1' d='M27.36,28h-15a2.5,2.5,0,0,0,0,5h15a2.5,2.5,0,0,0,0-5Z'/><path class='cls-1' d='M27.36,19h-15a2.5,2.5,0,0,0,0,5h15a2.5,2.5,0,0,0,0-5Z'/><path class='cls-1' d='M20.51,37H12.36a2.5,2.5,0,0,0,0,5h8.15a2.5,2.5,0,1,0,0-5Z'/></g></g></svg>");
Hint Icon
background-size: 20px 20px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 36' fill='rgb(255,255,255)'><defs></defs><title>hint</title><g id='Layer_2' data-name='Layer 2'><g id='hint'><path class='cls-1' d='M11,0C5.1,0,0,4.25,0,9.83S5.72,19,6,25.65a.5.5,0,0,0,.49.49h9a.5.5,0,0,0,.49-.48c.27-6.67,6-11,6-15.83C22,4,16.9,0,11,0Z'/><rect class='cls-1' x='6' y='28' width='10' height='3' rx='0.5'/><rect class='cls-1' x='7' y='33' width='8' height='3' rx='0.5'/></g></g></svg>");
Zoom In Icon
background-size: 22px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42.33 42.33' fill='rgb(255,255,255)'><defs></defs><title>zoom-in</title><g id='Layer_2' data-name='Layer 2'><g id='Layer_2-2' data-name='Layer 2'><path class='cls-1' d='M15,3A12,12,0,1,1,6.51,6.51,12,12,0,0,1,15,3m0-3A15,15,0,1,0,25.61,4.39,15,15,0,0,0,15,0Z'/><path class='cls-1' d='M41.16,35.51,32.68,27a4,4,0,0,0-3.85-1l-2.52-2.51-2.82,2.82L26,28.83a4,4,0,0,0,1,3.85l8.49,8.48a4,4,0,0,0,5.65,0h0A4,4,0,0,0,41.16,35.51Z'/><rect class='cls-1' x='13.63' y='9.87' width='2.75' height='10.25' rx='1.38' ry='1.38'/><rect class='cls-1' x='13.63' y='9.88' width='2.75' height='10.25' rx='1.38' ry='1.38' transform='translate(30 0) rotate(90)'/></g></g></svg>");
Components
Components
Drop in the Blanks
Drop in the Blanks
Style
*{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body,html{color:#adadad}span{box-sizing:border-box;display:inline-block}.scene{border:0}.header{background-color:#2a2a2a;border:solid 2px #000}.header.ui-droppable-hover{background-color:#333}.scene .editor.ql-container.ql-snow{background-color:#000}.droparea-student{background-color:rgba(215,112,9,.6)}.droparea-student.ui-droppable-hover{background-color:rgba(215,112,9,.8);border:1px dashed #d77009}.droparea-student.empty{border:1px dashed #d77009}.drag-item{background-color:#d77009!important;border:0;color:#000!important;padding:5px 10px;box-shadow:2px 2px 0 #814305}.droparea-text .drag-item{padding:4px 10px}.droparea-student.empty.ui-droppable-hover{background-color:rgba(215,112,9,.8);border:1px solid #d77009}.droparea-student:not(.empty).no-hint{border:0;background-color:rgba(255,255,255,.1);padding:0;display:inline-block}.droparea-student:not(.empty).no-hint .drag-item{color:#000}.droparea-student:not(.empty).correct,.droparea-student:not(.empty).incorrect{margin-right:5px;background-color:transparent}.droparea-student:not(.empty).correct .droparea-hints-icon{width:0;height:0}.droparea-student:not(.empty).correct{padding:0}.droparea-student:not(.empty).incorrect{outline:solid 2px #bd1f2e;padding:6px 4px 7px 2px}/**/.droparea-student:not(.empty).incorrect .droparea-hints-icon{top:-2px;left:100%;transform:translateX(calc(-100% + 2px));border:solid 2px #fff;border-radius:10px;z-index:99;height:16px;width:16px;padding:0;margin:0;display:inline-block;background:center/contain no-repeat url(/spr-widget-drop-in-the-blanks/1.2.0/assets/incorrect.svg)}
Fill in the Blank
Fill in the Blank
Style
*{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body,html{color:#adadad}.scene{border:0}.header{background-color:#2a2a2a;border:solid 2px #000}.header.ui-droppable-hover{background-color:#333}.scene .editor.ql-container.ql-snow{background-color:#000}.droparea-student{background-color:rgba(215,112,9,.6)}.droparea-student.ui-droppable-hover{background-color:rgba(215,112,9,.8);border:1px dashed #d77009}.droparea-student.empty{border:1px dashed #d77009}.drag-item{background-color:#d77009!important;border:0;color:#000!important;padding:5px 10px;box-shadow:2px 2px 0 #814305}.droparea-text .drag-item{padding:4px 10px}.droparea-student.empty.ui-droppable-hover{background-color:rgba(215,112,9,.8);border:1px solid #d77009}.droparea-student:not(.empty).no-hint{border:0;background-color:rgba(255,255,255,.1);padding:0;display:inline-block}.droparea-student:not(.empty).no-hint .drag-item{color:#000}.editor.ql-container.ql-snow{border:none}.ql-snow .ql-editor p{color:#adadad}p .dropdown-blot .select2-container .select2-selection--single .select2-selection__rendered{background-color:#d77009!important}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#000}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#000 transparent transparent transparent}.select2-selection__rendered{border-radius:0}.select2-container--default .select2-results>.select2-results__options{color:#000;background-color:#ffe8cc}.select2-dropdown:not(.config) .select2-results__option[data-selected]{color:#000}.select2-container--default .select2-results__option--highlighted[data-selected]{background-color:#e7a96b}.select2-container--open .select2-dropdown--below{border-radius:0!important}body,html{color:#adadad}.scene{border:0}.header{background-color:#2a2a2a;border:solid 2px #000}.header.ui-droppable-hover{background-color:#333}.scene .editor.ql-container.ql-snow{background-color:#000}.droparea-student{background-color:rgba(215,112,9,.6)}.droparea-student.ui-droppable-hover{background-color:rgba(215,112,9,.8);border:1px dashed #d77009}.droparea-student.empty{border:1px dashed #d77009}.drag-item{background-color:#d77009!important;border:0;color:#000!important;padding:5px 10px;box-shadow:2px 2px 0 #814305}.droparea-text .drag-item{padding:4px 10px}.droparea-student.empty.ui-droppable-hover{background-color:rgba(215,112,9,.8);border:1px solid #d77009}.droparea-student:not(.empty).no-hint{border:0;background-color:rgba(255,255,255,.1);padding:0;display:inline-block}.droparea-student:not(.empty).no-hint .drag-item{color:#000}.editor.ql-container.ql-snow{border:none}.ql-snow .ql-editor p{color:#adadad}p .dropdown-blot .select2-container .select2-selection--single .select2-selection__rendered{background-color:#d77009!important}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#000}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#000 transparent transparent transparent}.select2-selection__rendered{border-radius:0}.select2-container--default .select2-results>.select2-results__options{color:#000;background-color:#ffe8cc}.select2-dropdown:not(.config) .select2-results__option[data-selected]{color:#000}.select2-container--default .select2-results__option--highlighted[data-selected]{background-color:#e7a96b}.select2-container--open .select2-dropdown--below{border-radius:0!important}select.incorrect+span.select2{outline:solid 2px #bd1f2e;border:solid 2px #000}.dropdown.correct+.select2-container .select2-selection__rendered:before{display:none!important}.dropdown.incorrect+.select2-container .select2-selection__rendered .incorrect-icon{position:absolute;top:-5px;left:100%;transform:translateX(calc(-100% + 4px));border:solid 2px #fff;border-radius:10px;z-index:99;height:15px;width:15px;padding:0;margin:0;background:center/contain no-repeat url(/spr-widget-drop-in-the-blanks/1.2.0/assets/incorrect.svg);color:transparent}
Grouping
Grouping
Style
*{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .sidebar{background-color:#2A2A2A;border:solid 2px black;box-sizing:border-box}#scene_StudentMultiplacement .sidebar-wrapper{height:calc(100% - 90px)}.sidebar-title{visibility:hidden;height:46px}.sidebar-title:before{content:'Elements';width:220px;border-bottom:1px solid rgba(151, 151, 151, 0.5);line-height:45px;text-align:center;text-transform:uppercase;display:inline-block;visibility:visible}#scene_StudentMultiplacement .remove-pin-button{width:calc(100% - 20px);margin:0 auto;border:2px dashed rgba(255,255,255,0.4);background:rgba(255,255,255,.1)}.main-background:before{background-color:black}.pins{padding:10px;width:100%}.pin.bank-pin{width:40px;padding:0;margin:0 10px 10px 0;display:inline-block}.pin:last-of-type{margin:0}.pin-icon svg{display:none}.pin-icon-label{height:40px;width:40px;border-radius:100px;margin:0px;background-color:transparent;text-align:center;font-weight:bold;display:inline-block;position:relative}.pin-name-label{margin:0px;border-radius:100px;font-weight:bold;max-height:none;max-width:none;height:40px;width:40px;padding:10px;text-align:center;background-color:red;position:relative;left:-40px}.pin-name-label-hide{opacity:1}.pin .pin-icon[style*='fill: rgb(74, 144, 226)'] + .pin-name-label, .pin .pin-icon[style*='fill: rgb(55, 188, 155)'] + .pin-name-label, .pin .pin-icon[style*='fill: rgb(255, 206, 84)'] + .pin-name-label, .pin .pin-icon[style*='fill: rgb(113, 107, 241)'] + .pin-name-label, .pin .pin-icon[style*='fill: rgb(249, 97, 85)'] + .pin-name-label{background-color:#DF8D3A}
Hotspot
Hotspot
Style
.sidebar{background-color:#2A2A2A;border:solid 2px black;box-sizing:border-box}#scene_StudentMultiplacement .sidebar-wrapper{height:calc(100% - 90px)}.sidebar-title{visibility:hidden;height:46px}.sidebar-title:before{content:'Masses';width:220px;border-bottom:1px solid rgba(151, 151, 151, 0.5);line-height:45px;text-align:center;text-transform:uppercase;display:inline-block;visibility:visible}#scene_StudentMultiplacement .remove-pin-button{width:calc(100% - 20px);margin:0 auto;border:2px dashed rgba(255,255,255,0.4);background:rgba(255,255,255,.1)}.main-background:before{background-color:black}.pins{padding:10px;width:100%}.pin.bank-pin{width:50px;padding:0;margin:0 10px 5px 0;float:left}.pin:last-of-type{margin:0}
Carousel
Carousel
Style
body{height: 100vh}.owl-carousel{background: #484848;margin-bottom: 10px;border-radius: 3px;padding: 10px 0}.owl-carousel.owl-loaded{height: 100vh;box-sizing: border-box;padding: 10px;margin: 0}.owl-carousel .owl-stage-outer,.owl-carousel .owl-stage-outer .owl-stage{height: 100%}.owl-carousel.owl-drag .owl-item{box-sizing: border-box;height: 100%}.owl-carousel .owl-item .slide{height: 100%;display: flex;flex-direction: column;box-sizing: border-box;width: calc(100% - 20px);margin: 0}.owl-carousel .owl-item .slide img{width: auto;min-height: 10px;max-width: 69vw;max-height: 100vh;margin: 0 auto;object-fit: contain;flex: 1}.owl-carousel .owl-item .slide .caption{background-color: rgba(0,0,0,.6);color: #ebebeb;box-sizing: border-box;padding: 10px 10px 20px;margin-top: 10px;width: 65%}.owl-carousel .owl-item .slide .caption:empty{display: none}.owl-carousel .owl-dots{display: none}.owl-carousel .owl-nav{padding-top: 0;height: 40px;position: relative;top: -50%;transform: translateY(-50%);margin: 0!important}.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{background: 0 0!important;color: transparent;font-weight: 700;width: 30px;height: 30px;line-height: 2.75;display: inline-block;border: 10px solid #D77009;border-radius: 2px;border-left: 0;border-top: 0;box-sizing: border-box}.owl-carousel .owl-nav .owl-next{transform: rotate(-45deg);box-shadow: 0 3px 0 rgba(0,0,0,.4)}.owl-carousel .owl-nav .owl-prev{transform: rotate(-225deg);box-shadow: 3px 0 0 rgba(0,0,0,.4)}
Matching
Matching
Style
body{background-color:black;}.container{padding:0px;}.columns-container{padding:10px;padding-left:32px;}.items-column {width:calc(50% - 11px) !important;}.columns-container .right-column {padding-left: 58px;}.columns-container .left-column .item {margin-left:0;}.columns-container .right-column .item {margin-right: 0;}.columns-container .items-column .item{background-color: #d77009;border: solid 2px #d77009;}.columns-container .items-column .item .item-label{color:black;font-size: 16px;}.columns-container .items-column .item[linked].isCorrect, .columns-container .items-column .item.isCorrect{box-shadow: 0 0 0 2px #35BC9B;}.columns-container .items-column .item[linked].isIncorrect, .columns-container .items-column .item.isIncorrect {box-shadow: 0 0 0 2px #E23F37;}.columns-container .items-column .item[linked]{border-color: #EFC69D;box-shadow: 0 0 0 1px #EFC69D;}.line-renderer line {stroke: #EFC69D;stroke-width: 2px;}.columns-container .items-column .item:focus, .columns-container .items-column .item.link-hover, .columns-container .items-column .item.preview-source-hover{background-color:#EFC69D;border-color:#d77009;}
Page updated
Report abuse