Habitable Worlds Lesson

Below are examples of these course-specfic styles.

Style

font-family: MontserratBold ,sans-serif;
font-size: 36px;
color: #3398B9;

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

Hover

background-color: #7C5293 !important;

Focus

outline: none;
box-shadow: 0 0 0 4px rgba(91, 39, 120, .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

Container

color: #333333;

Label

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

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;

Style

Empty Radio Button

width: 20px;
height: 20px;
background-color: white;
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: white;
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

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

.owl-carousel{
margin-bottom: 10px;
border-radius: 3px;
background: #EBEBEB;
box-sizing: border-box;
padding: 10px 5px;
}

.owl-carousel .owl-dots{
display:none;
}

.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next{
background: #006586;
color: #ffffff;
}

.owl-carousel .owl-nav button.owl-prev SPAN,
.owl-carousel .owl-nav button.owl-next SPAN {
font-size: 24px;
line-height: 20px;
font-weight: bold;
}

Style - Order List Bar

background: #006586;

Style - Item Type Text

background-color: #006586;

Style

@font-face{
font-family:MontserratBold;
src:url(https://dev-etx.ws.asu.edu/fonts/Montserrat/Montserrat-Bold.ttf);
font-weight:700;
}

@font-face{
font-family:OpenSans;
src:url(https://dev-etx.ws.asu.edu/fonts/Open%20Sans/OpenSans-Regular.ttf);
}

#scene_Student{
font-family:OpenSans,Arial,sans-serif
}

.sidebar{
background-color:#484848!important
}

.sidebar-title{
font-family:MontserratBold;
font-weight:700;
background-color:rgba(0,0,0,.2)
}

.pin-icon.pin-icon-label svg path:first-child {
stroke:rgba(255, 255, 255, .2);
stroke-width:.5px;
}

.pin-icon.pin-icon-label svg {
background: radial-gradient(
ellipse at center,
rgba(0, 0, 0, .45) 0,
rgba(0, 0, 0, 0) 75%
);
}

Pin Colors

#3398b9; //blue

#E7A96B; //orange

#491F60; //purple

#195E2F; //green

Style

.handsontable{
overflow:visible!important;
}

.handsontable .htDimmed{
color:#000;
font-size:16px;
text-align:center;
padding:5px 10px;
border:.5px solid #5c5c5c
}

.handsontable .htCore,
.handsontable .wtHider,
.handsontable .wtSpreader{
width:100%!important;
}

tr td:nth-of-type(1),
tr:nth-of-type(1) td,
tr:nth-of-type(2) td{
color:#000!important;
}

tr td:nth-of-type(1),
tr:nth-of-type(1) td{
font-weight:700!important;
background-color:#ebebeb;
}

tr td:nth-of-type(1){
text-align:left!important;
}

tr:first-of-type td{
border-top:1px solid #5C5C5C!important;
}

tr td:last-of-type{
border-right:1px solid #5C5C5C!important;
}

tr:last-of-type td{
border-bottom:1px solid #5C5C5C!important;
}

tr td:first-of-type{
border-left:1px solid #5C5C5C!important;
}

tr:nth-of-type(2) td:nth-of-type(1)~td:after{
content:'E';
vertical-align:sub;
}

Cell Colors

#d77982; //red
#e7a96b; //orange
#fef499; //yellow
#a3bfac; //green