Habitable Worlds

Below are examples of these course-specfic styles.

Style

font-family: MontserratBold ,sans-serif;
font-size: 36px;
color: #99CBDC;

Style

font-size: 14px;
font-family: 'OpenSans',sans-serif;
line-height: 120%;
color: #99cbdc;

Style

font-family: OpenSansItalic;
font-size: 14px;

Style

padding: 10px;
background-color: #cce5ee;
font-family: 'OpenSans',sans-serif;
line-height: 120%;
font-size: 16px;
color: #006586;

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>");

Style

Container

border-radius: 4px;
border: 1px solid #d9d9de;
box-shadow: 0 0 6px rgba(0,0,0,0.2);
background-color: #ffffff;

Close Button
Note: All close buttons must display the close "X" icon.

box-shadow: none;

width: 25px;

height: 25px;

background-color: white;

background-repeat: no-repeat;

background-position: center;

background-image: url(https://style.smartsparrow.com/default-viewer-themes/1.9.1/assets/icon-close-dark.svg), url(../assets/icon-close-dark.svg);

Style

background-color: #006586;

Hover, Focus

background-color: #004c6d;

Focus

box-shadow: inset 0 0 0 4px rgba(5, 106, 139, 1);

Style - Secondary

background-color: #D77009;

Hover, Focus - Secondary

background-color: #be5700;

Focus - Secondary

box-shadow: inset 0 0 0 4px #D77009;

Style

Container

color: #333333;

Label

font-family: 'OpenSans',sans-serif;
color:#ebebeb;

Input/Textarea

font-family: 'OpenSans',sans-serif;

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;
color:#ebebeb;

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: #006586;

/* 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: #006586;

/* check */
width: 6px;
height: 11px;
border-color: white;
border-width:2px;

Style

Slider Handle

background-color: #006586;

Style

Label

color: #ebebeb;

font-family: 'OpenSansBold',sans-serif;

Select

color: #333333;
background-color: #ffffff;
border-radius: 4px;
border: 1px solid #d9d9de;
height: 35px;
padding: 5px 8px !important;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;

Select: Focus

border: 1px solid #006586;

Arrow

content: '\f078';
font-family: FontAwesome4;
color: #006586;
right: 11px;
height: 35px;
padding: 14px 0px 0px 8px;
border-left: 0px solid #006586;
pointer-events: none;
line-height: 8px;
box-sizing: border-box;

Style - Order List Bar

background: #006586;

Style - Item Type Text

background-color: #2196F3;

Style - Group Area

.groups-titles-wrapper {
display: none;
}

.group-area-wrapper:first-child {
float: none;
width: 100%!important;
min-height: 128px;
}

.item-dragging-placeholder{
width:100%;
}

.group-area-wrapper:not(:first-child) {
margin-top: 10px;
height: 128px;
width: 20% !important;
}

.group-area-wrapper .ui-sortable .item-type-image{
height: 100% !important;
max-height:102px;
}

.group-area-wrapper:first-child .item {
margin-bottom: 0;
margin-right: 6px;
display: inline-block;
vertical-align: middle;
height: 100%;
}

.group-area-wrapper:first-child .item img{
width: auto !important;
height: 100% !important;
}

.group-area-wrapper .ui-sortable .item img{
width: auto !important;
height: 100% !important;
margin: 0 auto;
}

.group-area-wrapper:first-child .item:last-child {
margin-right: 0 ;
}

.student-mode .group-area {
overflow: hidden;
box-sizing: border-box;
background-color: rgba(0, 101, 134, .4);
border-color: rgba(0, 101, 134, .8) ;
}

.student-mode .item {
background: rgba(0,0,0,0.2);
padding: 4px;
border-radius: 2px;
border: solid 1px rgba(0,0,0,0.2);
}