/* node_modules/prosemirror-view/style/prosemirror.css */ .ProseMirror { position: relative; } .ProseMirror { word-wrap: break-word; white-space: pre-wrap; white-space: break-spaces; -webkit-font-variant-ligatures: none; font-variant-ligatures: none; font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */ } .ProseMirror pre { white-space: pre-wrap; } .ProseMirror li { position: relative; } .ProseMirror-hideselection *::selection { background: transparent; } .ProseMirror-hideselection *::-moz-selection { background: transparent; } .ProseMirror-hideselection { caret-color: transparent; } .ProseMirror-selectednode { outline: 2px solid #8cf; } /* Make sure li selections wrap around markers */ li.ProseMirror-selectednode { outline: none; } li.ProseMirror-selectednode:after { content: ""; position: absolute; left: -32px; right: -2px; top: -2px; bottom: -2px; border: 2px solid #8cf; pointer-events: none; } /* src/js/activitybuilder/annotated-feedback/playground/annotations/arrow.styl */ .arrow-annotation { position: absolute; } .arrow-annotation .arrow-svg { vertical-align: unset; } .arrow-annotation .arrow-svg.scale-pop { -webkit-animation: pop-in-animation 1s ease-in-out forwards; -moz-animation: pop-in-animation 1s ease-in-out forwards; -o-animation: pop-in-animation 1s ease-in-out forwards; -ms-animation: pop-in-animation 1s ease-in-out forwards; animation: pop-in-animation 1s ease-in-out forwards; } .arrow-annotation .arrow-svg path { fill: none; stroke: #9c0d63; stroke-width: 4; stroke-dasharray: var(--arrow-length, 1000); stroke-dashoffset: var(--arrow-length, 1000); -webkit-animation: arrow-draw-animation 1s ease-in-out forwards; -moz-animation: arrow-draw-animation 1s ease-in-out forwards; -o-animation: arrow-draw-animation 1s ease-in-out forwards; -ms-animation: arrow-draw-animation 1s ease-in-out forwards; animation: arrow-draw-animation 1s ease-in-out forwards; stroke-linecap: round; stroke-linejoin: round; } @-moz-keyframes arrow-draw-animation { 100% { stroke-dashoffset: 0; } } @-webkit-keyframes arrow-draw-animation { 100% { stroke-dashoffset: 0; } } @-o-keyframes arrow-draw-animation { 100% { stroke-dashoffset: 0; } } @keyframes arrow-draw-animation { 100% { stroke-dashoffset: 0; } } @-moz-keyframes pop-in-animation { 20% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 40% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-webkit-keyframes pop-in-animation { 20% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 40% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-o-keyframes pop-in-animation { 20% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 40% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @keyframes pop-in-animation { 20% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 40% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } /* src/js/activitybuilder/annotated-feedback/playground/annotations/lasso.styl */ .lasso-annotation { position: absolute; } .lasso-annotation .lasso-svg.scale-pop { -webkit-animation: pop-in-animation 1s ease-in-out forwards; -moz-animation: pop-in-animation 1s ease-in-out forwards; -o-animation: pop-in-animation 1s ease-in-out forwards; -ms-animation: pop-in-animation 1s ease-in-out forwards; animation: pop-in-animation 1s ease-in-out forwards; } .lasso-annotation .lasso-svg path { fill: none; stroke: #9c0d63; stroke-width: 4; stroke-dasharray: var(--lasso-length, 3000); stroke-dashoffset: var(--lasso-length, 3000); -webkit-animation: lasso-draw-animation 1s ease-in-out forwards; -moz-animation: lasso-draw-animation 1s ease-in-out forwards; -o-animation: lasso-draw-animation 1s ease-in-out forwards; -ms-animation: lasso-draw-animation 1s ease-in-out forwards; animation: lasso-draw-animation 1s ease-in-out forwards; stroke-linecap: round; } @-moz-keyframes lasso-draw-animation { 100% { stroke-dashoffset: 0; } } @-webkit-keyframes lasso-draw-animation { 100% { stroke-dashoffset: 0; } } @-o-keyframes lasso-draw-animation { 100% { stroke-dashoffset: 0; } } @keyframes lasso-draw-animation { 100% { stroke-dashoffset: 0; } } @-moz-keyframes pop-in-animation { 40% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 55% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 70% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-webkit-keyframes pop-in-animation { 40% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 55% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 70% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-o-keyframes pop-in-animation { 40% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 55% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 70% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @keyframes pop-in-animation { 40% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 55% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 70% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } /* src/js/activitybuilder/annotated-feedback/playground/view.styl */ .feedback-annotation-container { position: relative; } .feedback-annotation { pointer-events: none; } .feedback-annotation.transient { -webkit-animation: transient-fade-animation 1s 1s ease-in-out forwards; -moz-animation: transient-fade-animation 1s 1s ease-in-out forwards; -o-animation: transient-fade-animation 1s 1s ease-in-out forwards; -ms-animation: transient-fade-animation 1s 1s ease-in-out forwards; animation: transient-fade-animation 1s 1s ease-in-out forwards; } @-moz-keyframes transient-fade-animation { 80% { opacity: 1; -ms-filter: none; filter: none; } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-webkit-keyframes transient-fade-animation { 80% { opacity: 1; -ms-filter: none; filter: none; } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-o-keyframes transient-fade-animation { 80% { opacity: 1; -ms-filter: none; filter: none; } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @keyframes transient-fade-animation { 80% { opacity: 1; -ms-filter: none; filter: none; } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } /* src/js/activitybuilder/components/action-button/miniscreen/view.styl */ .miniscreen-action-button-container { display: none; } /* src/js/activitybuilder/components/action-button/playground/view.styl */ .dcg-action-button-playground { text-align: left; margin: 0 auto 15px; } .dcg-action-button-playground.rtl-layout { text-align: right; } .dcg-action-button-playground.action-button-below-table { text-align: center; position: relative; top: -15px; } .dcg-action-button-playground.has-snapshot-camera { margin-top: 26px; } .dcg-action-button-playground .dcg-action-button i { margin-right: 5px; } .dcg-action-button-playground .dcg-action-button.btn-secondary-red { color: #db2e00; } .dcg-action-button-playground .dcg-action-button.btn-secondary-red:hover { border-color: #db2e00; -webkit-box-shadow: none; box-shadow: none; } .dcg-action-button-playground .dcg-action-button.amp-link { display: inline-block; height: 40px; } .dcg-action-button-playground .k5-button-secondary { -webkit-box-shadow: var(--secondary-button-box-shadow-default); box-shadow: var(--secondary-button-box-shadow-default); line-height: var(--secondary-button-line-height, 40px); } .dcg-action-button-playground .k5-button-secondary.dcg-hovered:not(.disabled) { -webkit-box-shadow: var(--secondary-button-box-shadow-hover); box-shadow: var(--secondary-button-box-shadow-hover); } .dcg-action-button-playground .k5-button-secondary.dcg-depressed:not(.disabled) { -webkit-box-shadow: var(--secondary-button-box-shadow-depressed); box-shadow: var(--secondary-button-box-shadow-depressed); margin-top: var(--button-margin-top-depressed); } .dcg-action-button-playground [role="button"] { pointer-events: auto; } @media screen and (min-width: 1500px) { .dcg-action-button-playground .dcg-action-button.amp-link { height: 45px; } } /* src/js/activitybuilder/components/async/async-component-wrapper.styl */ .async-component-loading-failed { text-align: center; padding: 100px 50px; } .async-component-loading-failed .async-title { margin-bottom: 20px; color: #666; font-size: 150%; } .async-component-loading-failed .async-message { font-size: 115%; color: #999; } /* src/js/activitybuilder/components/cardsort/card-icons.styl */ .card-icons { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem) calc(var(--rhythm-unit-px, 12) / 16 * 1rem); overflow: hidden; } .card-icons .card-icon-group { position: relative; display: inline-block; vertical-align: top; pointer-events: none; } .card-icons .card-icon-group.clickable { pointer-events: all; } .card-icons .card-icon-group .card-icon { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 35px; height: 46px; border-radius: 0.1875em; border: 1px solid #fff; } .card-icons .card-icon-group .card-icon.correct { background-color: #3278c8; } .card-icons .card-icon-group .card-icon.incorrect { background: #ea8758; } .card-icons .card-icon-group .card-icon.missing { background-color: #fff; border: 1px dashed #a0a0a0; } .card-icons .card-icon-group .card-icon.card { background-color: #bdbdbd; -webkit-box-shadow: none; box-shadow: none; } .card-icons .card-icon-group .card-icon .card-icon-container { height: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .card-icons .card-icon-group .card-icon .card-icon-container i { color: #fff; } .card-icons .card-icon-group.selected .card-icon { background-color: #3278c8; } /* src/js/activitybuilder/components/cardsort/miniscreen.styl */ .cardsort-miniscreen { position: relative; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .cardsort-miniscreen .icon-container { font-size: 200%; width: 100%; text-align: center; position: absolute; top: 50%; left: 0; padding-top: 10px; height: 50px; margin-top: -25px; color: #999; text-shadow: calc(1px * -1) calc(1px * -1) 0 #fff, calc(1px * -1) 1px 0 #fff, 1px calc(1px * -1) 0 #fff, 1px 1px 0 #fff, 0 calc(1px * -1) 0 #fff, 0 1px 0 #fff, 1px 0 0 #fff, calc(1px * -1) 0 0 #fff; } /* src/js/activitybuilder/components/cardsort/playground/card-group.styl */ @-moz-keyframes cardsortCardBounceOnExpandCollapse { 0% { max-height: 100vh; } 50% { max-height: 100vh; } } @-webkit-keyframes cardsortCardBounceOnExpandCollapse { 0% { max-height: 100vh; } 50% { max-height: 100vh; } } @-o-keyframes cardsortCardBounceOnExpandCollapse { 0% { max-height: 100vh; } 50% { max-height: 100vh; } } @keyframes cardsortCardBounceOnExpandCollapse { 0% { max-height: 100vh; } 50% { max-height: 100vh; } } @-moz-keyframes cardsortCardInnerBounceOnExpandCollapse { 0% { padding: 0; } 50% { padding: 5px 0; } 100% { padding: 0; } } @-webkit-keyframes cardsortCardInnerBounceOnExpandCollapse { 0% { padding: 0; } 50% { padding: 5px 0; } 100% { padding: 0; } } @-o-keyframes cardsortCardInnerBounceOnExpandCollapse { 0% { padding: 0; } 50% { padding: 5px 0; } 100% { padding: 0; } } @keyframes cardsortCardInnerBounceOnExpandCollapse { 0% { padding: 0; } 50% { padding: 5px 0; } 100% { padding: 0; } } @-moz-keyframes cardsortCardBounceAfterCollapse { 50% { max-height: 3.5px; } } @-webkit-keyframes cardsortCardBounceAfterCollapse { 50% { max-height: 3.5px; } } @-o-keyframes cardsortCardBounceAfterCollapse { 50% { max-height: 3.5px; } } @keyframes cardsortCardBounceAfterCollapse { 50% { max-height: 3.5px; } } .dcg-cardsort-group.drop-highlight.correct .cardsort-group-cards, .dcg-cardsort-group.drop-highlight.incorrect .cardsort-group-cards, .dcg-cardsort-group.drop-highlight.dimmed .cardsort-group-cards { padding-bottom: 0; background-color: transparent; } .dcg-cardsort-group.drop-highlight.dimmed .dcg-cardsort-card:first-child.dimmed { -webkit-box-shadow: none; box-shadow: none; } .dcg-cardsort-group .correctness-icon-container { cursor: pointer; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #fff; color: #fff; position: absolute; right: 6px; bottom: 6px; display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-box; display: inline-flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; font-size: 90%; } .dcg-cardsort-group.correct .correctness-icon-container { background: #3278c8; } .dcg-cardsort-group.correct .correctness-icon-container i { padding-left: 1px; padding-top: 3px; } .dcg-cardsort-group.incorrect .correctness-icon-container { background: #ea8758; } .dcg-cardsort-group.incorrect .correctness-icon-container i { padding-top: 1px; } .dcg-cardsort-group:not(.dimmed).correct .cardsort-category-card, .dcg-cardsort-group:not(.dimmed).incorrect .cardsort-category-card, .dcg-cardsort-group.dimmed .highlight .cardsort-category-card { -webkit-box-shadow: inset 0 0 0 3px #fff; box-shadow: inset 0 0 0 3px #fff; } .dcg-cardsort-group:not(.dimmed).correct .cardsort-category-card:before, .dcg-cardsort-group:not(.dimmed).incorrect .cardsort-category-card:before, .dcg-cardsort-group.dimmed .highlight .cardsort-category-card:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 3px solid #fff; border-radius: 5px; } .dcg-cardsort-group:not(.dimmed).correct .dcg-cardsort-card.collapsed:nth-child(n) { border: 2px solid #3278c8; border-top-width: 0; -webkit-box-shadow: 0 0 0 1px #3278c8; box-shadow: 0 0 0 1px #3278c8; } .dcg-cardsort-group:not(.dimmed).correct .dcg-cardsort-card.collapsed:nth-child(n+3) { border-top-width: 1px; } .dcg-cardsort-group:not(.dimmed).correct .dcg-cardsort-card:not(.collapsed) { border: 2px solid #3278c8; -webkit-box-shadow: 0 0 0 1px #3278c8, 0 -3px #3278c8; box-shadow: 0 0 0 1px #3278c8, 0 -3px #3278c8; } .dcg-cardsort-group:not(.dimmed).correct .dcg-cardsort-card:not(.collapsed):first-child { -webkit-box-shadow: 0 0 0 1px #3278c8; box-shadow: 0 0 0 1px #3278c8; } .dcg-cardsort-group:not(.dimmed).correct .dcg-cardsort-card:not(.collapsed):first-child + .dcg-cardsort-card:not(.dragging), .dcg-cardsort-group:not(.dimmed).correct .dcg-cardsort-card:not(.collapsed):first-child + .dcg-cardsort-card.dragging + .dcg-cardsort-card { -webkit-box-shadow: 0 0 0 1px #3278c8, 0 -2px #3278c8; box-shadow: 0 0 0 1px #3278c8, 0 -2px #3278c8; } .dcg-cardsort-group:not(.dimmed).correct .dcg-cardsort-card:not(.collapsed):first-child + .dcg-cardsort-card:not(.dragging):after, .dcg-cardsort-group:not(.dimmed).correct .dcg-cardsort-card:not(.collapsed):first-child + .dcg-cardsort-card.dragging + .dcg-cardsort-card:after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background-color: #3278c8; } .dcg-cardsort-group:not(.dimmed).correct .dcg-cardsort-card:not(.collapsed):not(:first-child) { border-top-width: 0; } .dcg-cardsort-group:not(.dimmed).incorrect .dcg-cardsort-card.collapsed:nth-child(n) { border: 2px solid #ea8758; border-top-width: 0; -webkit-box-shadow: 0 0 0 1px #ea8758; box-shadow: 0 0 0 1px #ea8758; } .dcg-cardsort-group:not(.dimmed).incorrect .dcg-cardsort-card.collapsed:nth-child(n+3) { border-top-width: 1px; } .dcg-cardsort-group:not(.dimmed).incorrect .dcg-cardsort-card:not(.collapsed) { border: 2px solid #ea8758; -webkit-box-shadow: 0 0 0 1px #ea8758, 0 -3px #ea8758; box-shadow: 0 0 0 1px #ea8758, 0 -3px #ea8758; } .dcg-cardsort-group:not(.dimmed).incorrect .dcg-cardsort-card:not(.collapsed):first-child { -webkit-box-shadow: 0 0 0 1px #ea8758; box-shadow: 0 0 0 1px #ea8758; } .dcg-cardsort-group:not(.dimmed).incorrect .dcg-cardsort-card:not(.collapsed):first-child + .dcg-cardsort-card:not(.dragging), .dcg-cardsort-group:not(.dimmed).incorrect .dcg-cardsort-card:not(.collapsed):first-child + .dcg-cardsort-card.dragging + .dcg-cardsort-card { -webkit-box-shadow: 0 0 0 1px #ea8758, 0 -2px #ea8758; box-shadow: 0 0 0 1px #ea8758, 0 -2px #ea8758; } .dcg-cardsort-group:not(.dimmed).incorrect .dcg-cardsort-card:not(.collapsed):first-child + .dcg-cardsort-card:not(.dragging):after, .dcg-cardsort-group:not(.dimmed).incorrect .dcg-cardsort-card:not(.collapsed):first-child + .dcg-cardsort-card.dragging + .dcg-cardsort-card:after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background-color: #ea8758; } .dcg-cardsort-group:not(.dimmed).incorrect .dcg-cardsort-card:not(.collapsed):not(:first-child) { border-top-width: 0; } .dcg-cardsort-group.dimmed .dcg-cardsort-card.highlight { z-index: 1; } .dcg-cardsort-group.dimmed .dcg-cardsort-card.highlight.collapsed:nth-child(n) { border: 2px solid #3278c8; border-top-width: 0; -webkit-box-shadow: 0 0 0 1px #3278c8; box-shadow: 0 0 0 1px #3278c8; } .dcg-cardsort-group.dimmed .dcg-cardsort-card.highlight.collapsed:nth-child(n+3) { border-top-width: 1px; } .dcg-cardsort-group.dimmed .dcg-cardsort-card.highlight:not(.collapsed) { border: 2px solid #3278c8; -webkit-box-shadow: 0 0 0 1px #3278c8, 0 -3px #3278c8; box-shadow: 0 0 0 1px #3278c8, 0 -3px #3278c8; } .dcg-cardsort-group.dimmed .dcg-cardsort-card.highlight:not(.collapsed):first-child { -webkit-box-shadow: 0 0 0 1px #3278c8; box-shadow: 0 0 0 1px #3278c8; } .dcg-cardsort-group.dimmed .dcg-cardsort-card.highlight:not(.collapsed):first-child + .dcg-cardsort-card:not(.dragging).highlight, .dcg-cardsort-group.dimmed .dcg-cardsort-card.highlight:not(.collapsed):first-child + .dcg-cardsort-card.dragging + .dcg-cardsort-card.highlight { -webkit-box-shadow: 0 0 0 1px #3278c8, 0 -2px #3278c8; box-shadow: 0 0 0 1px #3278c8, 0 -2px #3278c8; } .dcg-cardsort-group.dimmed .dcg-cardsort-card.highlight:not(.collapsed):first-child + .dcg-cardsort-card:not(.dragging).highlight:after, .dcg-cardsort-group.dimmed .dcg-cardsort-card.highlight:not(.collapsed):first-child + .dcg-cardsort-card.dragging + .dcg-cardsort-card.highlight:after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background-color: #3278c8; } .dcg-cardsort-group.dimmed .dcg-cardsort-card.highlight:not(.collapsed):not(:first-child) { border-top-width: 0; } .dcg-cardsort-group.dimmed .dcg-cardsort-card.dimmed + .dcg-cardsort-card:not(.dragging).highlight, .dcg-cardsort-group.dimmed .dcg-cardsort-card.dimmed + .dcg-cardsort-card.dragging + .dcg-cardsort-card.highlight { -webkit-box-shadow: 0 0 0 1px #3278c8, 0 -2px 0 1px #3278c8; box-shadow: 0 0 0 1px #3278c8, 0 -2px 0 1px #3278c8; } .dcg-cardsort-group.dimmed .dcg-cardsort-card.dimmed { border-color: #dadada; -webkit-box-shadow: none; box-shadow: none; } .dcg-cardsort-group.dimmed .dcg-cardsort-card.dimmed:not(.first-child).collapsed { border-color: #dadada; } .dcg-cardsort-group.dimmed .dcg-cardsort-card.dimmed:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255,255,255,0.75); } .dcg-cardsort-group .dcg-cardsort-card.missing-card { border-style: dashed; border-top-style: solid; border-color: #bdbdbd; height: 50px; } .dcg-cardsort-group { position: relative; } .dcg-cardsort-group.in-foreground { z-index: 1; } .dcg-cardsort-group .dcg-cardsort-card { position: relative; border-radius: 0.1875em; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); background: #fff; margin: 0 auto; } .dcg-cardsort-group .dcg-cardsort-card .card-wrapper { border: 1px solid #bdbdbd; border-radius: 0.1875em; overflow: hidden; } .dcg-cardsort-group .dcg-cardsort-card .card-wrapper:focus-visible { border-radius: 0.1875em; outline-offset: 0; } .dcg-cardsort-group .dcg-cardsort-card:first-child { min-width: 209px; } .dcg-cardsort-group .dcg-cardsort-card:not(:first-child) { min-width: 200px; border-top-width: 0; } .dcg-cardsort-group .dcg-cardsort-card.dragging { display: none; } .dcg-cardsort-group .dcg-cardsort-card.dcg-hovered { -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); } .dcg-cardsort-group .dcg-cardsort-card.dcg-hovered .card-wrapper { border-color: #9c0d63; } .dcg-cardsort-group .dcg-cardsort-card.moving { -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.076) , 0 6px 6px rgba(0,0,0,0.092); box-shadow: 0 10px 20px rgba(0,0,0,0.076) , 0 6px 6px rgba(0,0,0,0.092); -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); } .dcg-cardsort-group:not(.single) .dcg-cardsort-card { overflow: auto; } .dcg-cardsort-group:not(.single) .dcg-cardsort-card .cardsort-typed-card, .dcg-cardsort-group:not(.single) .dcg-cardsort-card .cardsort-category-card { min-width: 100%; width: min-content; } .dcg-cardsort-group:not(.single) .dcg-cardsort-card .mixed-text-container { width: 100%; } .dcg-cardsort-group:not(.single) .dcg-cardsort-card .card-wrapper:focus-visible { outline: 0; } .dcg-cardsort-group:not(.single) .dcg-cardsort-card .card-wrapper:focus-visible:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 3px solid #9c0d63; } .dcg-cardsort-group:not(.single) .dcg-cardsort-card .card-wrapper:focus-visible .image-card-wrapper:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 2px solid #9c0d63; } .dcg-cardsort-group:not(.single) .dcg-cardsort-card:first-child { max-width: 209px; border-radius: 0.1875em; } .dcg-cardsort-group:not(.single) .dcg-cardsort-card:not(:first-child) { max-width: 200px; border-radius: 0; } .dcg-cardsort-group:not(.single) .dcg-cardsort-card:not(:first-child) .card-wrapper { border-radius: 0; border-top-width: 0; } .dcg-cardsort-group:not(.single) .dcg-cardsort-card:last-child, .dcg-cardsort-group:not(.single) .dcg-cardsort-card:last-child .card-wrapper { border-bottom-left-radius: 0.1875em; border-bottom-right-radius: 0.1875em; } .dcg-cardsort-group:not(.single).dcg-hovered:not(.moving) .dcg-cardsort-card { -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); } .dcg-cardsort-group:not(.single).dcg-hovered:not(.moving) .dcg-cardsort-card.collapsed { border-color: #9c0d63 !important; } .dcg-cardsort-group:not(.single).dcg-hovered:not(.moving) .card-wrapper { border-color: #9c0d63; } .dcg-cardsort-group:not(.single).moving { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); } .dcg-cardsort-group:not(.single).moving .dcg-cardsort-card, .dcg-cardsort-group:not(.single).moving.dcg-hovered .dcg-cardsort-card { -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.076) , 0 6px 6px rgba(0,0,0,0.092); box-shadow: 0 10px 20px rgba(0,0,0,0.076) , 0 6px 6px rgba(0,0,0,0.092); } .dcg-cardsort-group:not(.single).moving .card-wrapper { border-color: #bdbdbd; } .dcg-cardsort-group.drop-highlight .cardsort-group-cards { border-radius: 0.1875em; } .dcg-cardsort-group.drop-highlight .dcg-cardsort-card:not(:first-child) { -webkit-box-shadow: none; box-shadow: none; } .dcg-cardsort-group.drop-highlight.single .dcg-cardsort-card.will-drop-before { border-top-left-radius: 0; border-top-right-radius: 0; border-radius: 0.1875em; overflow: visible; -webkit-box-shadow: 0 0 0 2px #fff; box-shadow: 0 0 0 2px #fff; outline: 4.5px solid #9c0d63; outline-offset: 2px; padding-top: 30px; } .dcg-cardsort-group.drop-highlight.single .dcg-cardsort-card.will-drop-before .card-wrapper { border-top-left-radius: 0; border-top-right-radius: 0; } .dcg-cardsort-group.drop-highlight.single .dcg-cardsort-card.will-drop-before:before { content: ""; position: absolute; top: -2px; left: -4.5px; width: calc(100% + 9px); height: 30px; background: #9c0d63; border-top-left-radius: 6px; border-top-right-radius: 6px; } .dcg-cardsort-group.drop-highlight.single .dcg-cardsort-card.will-drop-after { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-radius: 0.1875em; overflow: visible; -webkit-box-shadow: 0 0 0 2px #fff; box-shadow: 0 0 0 2px #fff; outline: 4.5px solid #9c0d63; outline-offset: 2px; padding-bottom: 30px; } .dcg-cardsort-group.drop-highlight.single .dcg-cardsort-card.will-drop-after .card-wrapper { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .dcg-cardsort-group.drop-highlight.single .dcg-cardsort-card.will-drop-after:before { content: ""; position: absolute; bottom: -2px; left: -4.5px; width: calc(100% + 9px); height: 30px; background: #9c0d63; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .dcg-cardsort-group.drop-highlight:not(.single) .cardsort-group-cards { padding-bottom: 5.5px; background-color: #9c0d63; } .dcg-cardsort-group.drop-highlight:not(.single) .dcg-cardsort-card .card-wrapper { border-radius: 0; } .dcg-cardsort-group.drop-highlight:not(.single) .dcg-cardsort-card.will-drop-before { border-top: 30px solid #9c0d63; border-left: 0; border-right: 0; } .dcg-cardsort-group.drop-highlight:not(.single) .dcg-cardsort-card.will-drop-after { border-bottom: 30px solid #9c0d63; border-left: 0; border-right: 0; } .dcg-cardsort-group.drop-highlight:not(.single) .dcg-cardsort-card:first-child { -webkit-box-shadow: 0 0 0 4.5px #9c0d63; box-shadow: 0 0 0 4.5px #9c0d63; } .dcg-cardsort-group.drop-highlight:not(.single) .dcg-cardsort-card:first-child.will-drop-after { border-bottom: 0; } .dcg-cardsort-group.drop-highlight:not(.single) .dcg-cardsort-card:first-child.will-drop-after + .dcg-cardsort-card:not(.dragging), .dcg-cardsort-group.drop-highlight:not(.single) .dcg-cardsort-card:first-child.will-drop-after + .dcg-cardsort-card.dragging + .dcg-cardsort-card { border-top: 30px solid #9c0d63; border-left: 0; border-right: 0; } .dcg-cardsort-group .dcg-cardsort-card:not(:first-child) .card-content { -webkit-transition: opacity 200ms ease-out; -moz-transition: opacity 200ms ease-out; -o-transition: opacity 200ms ease-out; -ms-transition: opacity 200ms ease-out; transition: opacity 200ms ease-out; } .dcg-cardsort-group .dcg-cardsort-card:not(:first-child).collapsed .card-content { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .dcg-cardsort-group .dcg-cardsort-card:not(:first-child).animating { -webkit-animation: cardsortCardBounceOnExpandCollapse 200ms ease-out; -moz-animation: cardsortCardBounceOnExpandCollapse 200ms ease-out; -o-animation: cardsortCardBounceOnExpandCollapse 200ms ease-out; -ms-animation: cardsortCardBounceOnExpandCollapse 200ms ease-out; animation: cardsortCardBounceOnExpandCollapse 200ms ease-out; } .dcg-cardsort-group .dcg-cardsort-card:not(:first-child).animating .card-wrapper { -webkit-animation: cardsortCardInnerBounceOnExpandCollapse 200ms ease-out; -moz-animation: cardsortCardInnerBounceOnExpandCollapse 200ms ease-out; -o-animation: cardsortCardInnerBounceOnExpandCollapse 200ms ease-out; -ms-animation: cardsortCardInnerBounceOnExpandCollapse 200ms ease-out; animation: cardsortCardInnerBounceOnExpandCollapse 200ms ease-out; } .dcg-cardsort-group .dcg-cardsort-card:not(:first-child).recently-collapsed:not(.animating) { -webkit-animation: cardsortCardBounceAfterCollapse 200ms; -moz-animation: cardsortCardBounceAfterCollapse 200ms; -o-animation: cardsortCardBounceAfterCollapse 200ms; -ms-animation: cardsortCardBounceAfterCollapse 200ms; animation: cardsortCardBounceAfterCollapse 200ms; } .dcg-cardsort-group .dcg-cardsort-card:not(:first-child).collapsed { overflow: hidden; margin: auto; min-width: 0; border-radius: 0 0 0.1875em 0.1875em; border-bottom-width: 1px; border-bottom-style: solid; -webkit-transition-property: max-height, width; -moz-transition-property: max-height, width; -o-transition-property: max-height, width; -ms-transition-property: max-height, width; transition-property: max-height, width; -webkit-transition-duration: 200ms; -moz-transition-duration: 200ms; -o-transition-duration: 200ms; -ms-transition-duration: 200ms; transition-duration: 200ms; -webkit-transition-timing-function: ease-out, ease-in-out; -moz-transition-timing-function: ease-out, ease-in-out; -o-transition-timing-function: ease-out, ease-in-out; -ms-transition-timing-function: ease-out, ease-in-out; transition-timing-function: ease-out, ease-in-out; max-height: 5px; width: 200px; } .dcg-cardsort-group .dcg-cardsort-card:not(:first-child).collapsed.collapse-toggle-hovered { max-height: 6px; } .dcg-cardsort-group .dcg-cardsort-card:not(:first-child).collapsed:nth-child(2) { border-color: #bdbdbd; width: 200px; } .dcg-cardsort-group .dcg-cardsort-card:not(:first-child).collapsed:nth-child(3) { border-color: rgba(189,189,189,0.85); width: 196px; } .dcg-cardsort-group .dcg-cardsort-card:not(:first-child).collapsed:nth-child(4) { border-color: rgba(189,189,189,0.7); width: 192px; } .dcg-cardsort-group .dcg-cardsort-card:not(:first-child).collapsed:nth-child(5) { border-color: rgba(189,189,189,0.55); width: 188px; } .dcg-cardsort-group .dcg-cardsort-card:not(:first-child).collapsed:nth-child(6) { border-color: rgba(189,189,189,0.4); width: 184px; } .dcg-cardsort-group .dcg-cardsort-card:not(:first-child).collapsed:nth-child(n+7) { border-color: rgba(189,189,189,0.25); width: 180px; } @media screen and (max-width: 575px) { .dcg-cardsort-group .dcg-cardsort-card:first-child { min-width: 125.39999999999999px; } .dcg-cardsort-group .dcg-cardsort-card:not(:first-child) { min-width: 120px; } .dcg-cardsort-group:not(.single) .dcg-cardsort-card:first-child { max-width: 125.39999999999999px; } .dcg-cardsort-group:not(.single) .dcg-cardsort-card:not(:first-child) { max-width: 120px; } } /* src/js/activitybuilder/components/cardsort/playground/expanded-card.styl */ .expanded-card { position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px; z-index: 2; } .expanded-card:focus-visible { outline: 0; } .expanded-card .expanded-card-cover { position: fixed; background: rgba(0,0,0,0.6); -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; z-index: 1; } .expanded-card .expanded-card-container { cursor: default; border: 1px solid #a0a0a0; border-radius: 0.1875em; background: #fff; position: relative; min-width: 400px; -webkit-animation: subtleFadePulse 0.3s; -moz-animation: subtleFadePulse 0.3s; -o-animation: subtleFadePulse 0.3s; -ms-animation: subtleFadePulse 0.3s; animation: subtleFadePulse 0.3s; } .expanded-card .expanded-card-container > div { border-radius: 0.1875em; } .expanded-card .expanded-card-container .cardsort-category-card { overflow: auto; border-radius: 2px; } .expanded-card .expanded-card-container .cardsort-category-card .prosemirror-container { font-size: 150%; } .expanded-card .expanded-card-container .cardsort-category-card .prosemirror-container p { line-height: 1.2em; } .expanded-card .expanded-card-container .long-string .prosemirror-container { margin: 0 auto; } .expanded-card .expanded-card-container .close-card-button { position: absolute; top: -1.5em; right: -1.5em; } .expanded-card .expanded-card-container .card-content .mixed-text-display * { cursor: default; } .expanded-card .expanded-card-container .card-content .image-card { max-width: 500px; } .expanded-card .expanded-card-container .card-content .equation-card-container { padding: 20px; font-size: 140%; } .expanded-card .expanded-card-container .card-content .mixed-text-container { padding: 20px; width: 100%; font-size: 120%; max-width: 400px; } .expanded-card .expanded-card-container .card-content .cardsort-category-card { padding: 20px; width: 100%; } .expanded-card .expanded-card-container .card-content .cardsort-category-card .prosemirror-container { width: 400px; } .expanded-card .cardsort-positioned-container { z-index: 2; } .expanded-card.expanded-card--size-large .expanded-card-container { width: 600px; } .expanded-card.expanded-card--size-large .image-card { max-width: 600px; } @media screen and (max-width: 575px) { .expanded-card .expanded-card-container { min-width: 300px; } .expanded-card .expanded-card-container .card-content .mixed-text-container { max-width: 300px; } .expanded-card .expanded-card-container .card-content .cardsort-category-card .prosemirror-container { width: 300px; } .expanded-card.expanded-card--size-large .expanded-card-container { width: 600px; } .expanded-card.expanded-card--size-large .image-card { max-width: 600px; } } @-moz-keyframes subtleFadePulse { 0% { opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); -webkit-transform: scale(0.7, 0.7); -moz-transform: scale(0.7, 0.7); -o-transform: scale(0.7, 0.7); -ms-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); } 50% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(1.06, 1.06); -moz-transform: scale(1.06, 1.06); -o-transform: scale(1.06, 1.06); -ms-transform: scale(1.06, 1.06); transform: scale(1.06, 1.06); } 100% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } } @-webkit-keyframes subtleFadePulse { 0% { opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); -webkit-transform: scale(0.7, 0.7); -moz-transform: scale(0.7, 0.7); -o-transform: scale(0.7, 0.7); -ms-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); } 50% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(1.06, 1.06); -moz-transform: scale(1.06, 1.06); -o-transform: scale(1.06, 1.06); -ms-transform: scale(1.06, 1.06); transform: scale(1.06, 1.06); } 100% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } } @-o-keyframes subtleFadePulse { 0% { opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); -webkit-transform: scale(0.7, 0.7); -moz-transform: scale(0.7, 0.7); -o-transform: scale(0.7, 0.7); -ms-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); } 50% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(1.06, 1.06); -moz-transform: scale(1.06, 1.06); -o-transform: scale(1.06, 1.06); -ms-transform: scale(1.06, 1.06); transform: scale(1.06, 1.06); } 100% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes subtleFadePulse { 0% { opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); -webkit-transform: scale(0.7, 0.7); -moz-transform: scale(0.7, 0.7); -o-transform: scale(0.7, 0.7); -ms-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); } 50% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(1.06, 1.06); -moz-transform: scale(1.06, 1.06); -o-transform: scale(1.06, 1.06); -ms-transform: scale(1.06, 1.06); transform: scale(1.06, 1.06); } 100% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } } /* src/js/activitybuilder/components/cardsort/playground/toggle-button.styl */ @-moz-keyframes cardsortCardBounceOnExpandCollapse { 0% { max-height: 100vh; } 50% { max-height: 100vh; } } @-webkit-keyframes cardsortCardBounceOnExpandCollapse { 0% { max-height: 100vh; } 50% { max-height: 100vh; } } @-o-keyframes cardsortCardBounceOnExpandCollapse { 0% { max-height: 100vh; } 50% { max-height: 100vh; } } @keyframes cardsortCardBounceOnExpandCollapse { 0% { max-height: 100vh; } 50% { max-height: 100vh; } } @-moz-keyframes cardsortCardInnerBounceOnExpandCollapse { 0% { padding: 0; } 50% { padding: 5px 0; } 100% { padding: 0; } } @-webkit-keyframes cardsortCardInnerBounceOnExpandCollapse { 0% { padding: 0; } 50% { padding: 5px 0; } 100% { padding: 0; } } @-o-keyframes cardsortCardInnerBounceOnExpandCollapse { 0% { padding: 0; } 50% { padding: 5px 0; } 100% { padding: 0; } } @keyframes cardsortCardInnerBounceOnExpandCollapse { 0% { padding: 0; } 50% { padding: 5px 0; } 100% { padding: 0; } } @-moz-keyframes cardsortCardBounceAfterCollapse { 50% { max-height: 3.5px; } } @-webkit-keyframes cardsortCardBounceAfterCollapse { 50% { max-height: 3.5px; } } @-o-keyframes cardsortCardBounceAfterCollapse { 50% { max-height: 3.5px; } } @keyframes cardsortCardBounceAfterCollapse { 50% { max-height: 3.5px; } } .cardsort-toggle-button-container { position: sticky; bottom: 0; width: 40px; margin: 0 calc(50% - 20px); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; margin-top: -18px; } .cardsort-toggle-button-container .dcg-tooltip-hit-area-container { cursor: pointer; } .cardsort-toggle-button-container .cardsort-toggle-button { position: relative; } .cardsort-toggle-button-container .cardsort-toggle-button.dimmed { -webkit-box-shadow: none; box-shadow: none; border: 1px solid #e9e9e9; } .cardsort-toggle-button-container .cardsort-toggle-button.dimmed i { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .cardsort-toggle-button-container:focus-visible { outline: none; } .cardsort-toggle-button-container:focus-visible .btn { outline: 3px solid #9c0d63; } .cardsort-toggle-button-container i { -webkit-transition: -webkit-transform 200ms ease-out; -moz-transition: -moz-transform 200ms ease-out; -o-transition: -o-transform 200ms ease-out; -ms-transition: -ms-transform 200ms ease-out; transition: transform 200ms ease-out; } .cardsort-toggle-button-container i.inverted { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } /* src/js/activitybuilder/components/cardsort/playground/view.styl */ .cardsort { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -moz-user-select: -moz-none; -webkit-touch-callout: none; overflow: hidden; } .cardsort .cardsort-inner { position: absolute; top: 6px; left: 0; right: 0; bottom: 0; } .cardsort .cardsort-positioned-container { position: absolute; } .cardsort .dcg-cardsort-card { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .cardsort .dcg-cardsort-card .dcg-calculator-api-container { pointer-events: none; } .cardsort .dcg-cardsort-card:focus.dcg-focus-by-tap { outline: 0; } .cardsort .dcg-cardsort-group.single .dcg-cardsort-card.size-large { min-width: 300px; max-width: 300px; } .cardsort .dcg-cardsort-group.single .dcg-cardsort-card.size-large .cardsort-typed-card { width: 298px; } .cardsort .dcg-cardsort-group.single .dcg-cardsort-card.size-large .cardsort-typed-card .mixed-text-container { width: 298px; } .cardsort .dcg-cardsort-group.single .dcg-cardsort-card.size-large .cardsort-typed-card .image-card { max-width: 298px; } .cardsort .dcg-cardsort-group.single .dcg-cardsort-card.size-large .cardsort-typed-card .cardsort-category-card { width: 298px; } .cardsort .cardsort-text-card .dcg-prosemirror-editor, .cardsort .cardsort-category-card .dcg-prosemirror-editor { -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; } .cardsort .answer-key-container { background: #f7f7f7; position: absolute; left: 10px; bottom: 10px; border: 2px solid #bdbdbd; border-radius: 5px; padding: 10px; } .cardsort .answer-key-container .answer-key-header { text-transform: uppercase; color: #666; } .cardsort .answer-key-container .card-icons { margin-top: 0; padding: 10px 0 0 10px; height: 100%; } .cardsort .answer-key-container .card-icons .card-icon { background-color: #fff; border: 1px solid #3278c8; } .cardsort .answer-key-container .card-icons .card-icon-group.dcg-hovered .card-icon { background-color: #3f73a6; border-color: #fff; } .cardsort .answer-key-container .card-icons .card-icon-group.dcg-depressed .card-icon { background-color: #35608a; border-color: #fff; } .cardsort .answer-key-container .card-icons .card-icon-group.selected .card-icon { background-color: #3278c8; border-color: #fff; } .cardsort .answer-key-container .card-icons .card-icon-group.selected.dcg-hovered .card-icon { background-color: #3278c8; border-color: #fff; } .cardsort-offscreen-instructions { position: absolute; top: -1000px; left: -1000px; width: 1px; height: 1px; overflow: hidden; } /* src/js/activitybuilder/components/cardsort/shared/card.styl */ .cardsort-typed-card { min-width: 196px; border-radius: 0.1875em; background: #fff; cursor: pointer; text-align: center; color: #3b3b3b; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .cardsort-typed-card .cardsort-text-card { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; } .cardsort-typed-card .equation-card-container { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); font-size: 90%; } .cardsort-typed-card .mixed-text-container { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) calc(var(--rhythm-unit-px, 12) / 16 * 1rem); font-size: 100%; text-align: left; word-wrap: break-word; width: 196px; } .cardsort-typed-card .mixed-text-display * { cursor: pointer; } .cardsort-typed-card .cardsort-category-card { min-width: 196px; color: #fff; font-size: 30px; min-height: 80px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; } .cardsort-typed-card .cardsort-category-card .prosemirror-container { padding: 10px; overflow-wrap: break-word; margin: auto; } .cardsort-typed-card .long-string { font-size: 25px; } .cardsort-typed-card .category-card-bg-red { background-color: #db2e00; } .cardsort-typed-card .category-card-bg-purple { background-color: #834fbf; } .cardsort-typed-card .category-card-bg-blue { background-color: #3278c8; } .cardsort-typed-card .category-card-bg-gold { background-color: #826101; } .cardsort-typed-card .category-card-bg-teal { background-color: #00866b; } .cardsort-typed-card .category-card-bg-brown { background-color: #76300f; } .cardsort-typed-card .category-card-bg-magenta { background-color: #9c0d63; } .cardsort-typed-card .cardsort-category-card.h3 { margin: 0; } @media screen and (max-width: 575px) { .cardsort-typed-card { min-width: 116px; } .cardsort-typed-card .mixed-text-container { width: 116px; } .cardsort-typed-card .cardsort-category-card { min-width: 116px; font-size: 20px; min-height: 50px; } } /* src/js/activitybuilder/components/challenge/challenge-thumb.styl */ .gallery-thumb { width: 100%; height: 100%; border: 1px solid #bdbdbd; border-radius: 0.1875em; position: relative; } .gallery-thumb.clickable { cursor: pointer; border: 1px solid #bdbdbd; } .gallery-thumb.clickable ~ .dcg-comments-decorator-container { border-left: 1px solid #bdbdbd; border-top: 1px solid #bdbdbd; border-top-left-radius: 0.1875em; } .gallery-thumb.clickable ~ .dcg-comments-decorator-container .dcg-comments-decorator { top: -1px; left: -1px; } .gallery-thumb.clickable.dcg-hovered, .gallery-thumb.clickable.dcg-hovered ~ .dcg-comments-decorator-container { border-color: #9c0d63; } .gallery-thumb.clickable.dcg-depressed, .gallery-thumb.clickable.dcg-depressed ~ .dcg-comments-decorator-container { border-color: #5e083b; } .gallery-thumb:not(.clickable) { cursor: default; } .gallery-thumb .gallery-background, .gallery-thumb .gallery-color-background { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 2px; } .gallery-thumb .cl-challenge-thumb, .gallery-thumb .component-challenge-thumb { width: 100%; height: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); color: #fff; position: relative; text-align: left; } .gallery-thumb .cl-challenge-thumb.contains-image, .gallery-thumb .component-challenge-thumb.contains-image { padding: 0; } .gallery-thumb .cl-challenge-thumb .fixed-aspect-parent, .gallery-thumb .component-challenge-thumb .fixed-aspect-parent { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; width: 100%; } .gallery-thumb .cl-challenge-thumb .fixed-aspect-container, .gallery-thumb .component-challenge-thumb .fixed-aspect-container { margin: 0; } .gallery-thumb .cl-challenge-thumb .student-graph-thumb, .gallery-thumb .component-challenge-thumb .student-graph-thumb, .gallery-thumb .cl-challenge-thumb .sketch-student-thumb, .gallery-thumb .component-challenge-thumb .sketch-student-thumb { border-radius: 2px; } .gallery-thumb .mixed-text-display .nobr { -webkit-line-clamp: 4; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; max-width: 100%; pointer-events: none; } .gallery-thumb .mixed-text-response { position: relative; } .gallery-thumb .mixed-text-response.over-image { color: #000; } .gallery-thumb .mixed-text-response.over-image .nobr { background: rgba(255,255,255,0.8); border-radius: 3px; padding: 2px 6px; } /* src/js/activitybuilder/components/challenge/main.styl */ .gallery-container { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .gallery-container .gallery-section-empty { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: distribute; -moz-box-pack: distribute; -o-box-pack: distribute; -ms-flex-pack: distribute; -webkit-justify-content: space-around; justify-content: space-around; height: 100%; margin-right: 175px; padding-top: 32px; } .gallery-container .gallery-section-empty span { color: #676767; } .gallery-container .gallery-section-empty img { width: 300px; } .gallery-container .gallery-classmates-section, .cc-challenge-gallery .gallery-classmates-section { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .gallery-container .gallery-classmates-section .challenge-submitted-container, .cc-challenge-gallery .gallery-classmates-section .challenge-submitted-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .gallery-container .gallery-classmates-section .challenge-submitted-container .student-name, .cc-challenge-gallery .gallery-classmates-section .challenge-submitted-container .student-name, .gallery-container .gallery-classmates-section .challenge-submitted-container .challenge-response-student-name, .cc-challenge-gallery .gallery-classmates-section .challenge-submitted-container .challenge-response-student-name, .gallery-container .gallery-classmates-section .challenge-submitted-container .challenge-entry-student-name, .cc-challenge-gallery .gallery-classmates-section .challenge-submitted-container .challenge-entry-student-name { display: block; margin-bottom: 5px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .gallery-container .gallery-section-title, .cc-challenge-gallery .gallery-section-title { padding-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .gallery-container .gallery-section-empty, .cc-challenge-gallery .gallery-section-empty { font-style: italic; } @media screen and (max-width: 575px) { .gallery-container { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .gallery-container .gallery-your-section, .gallery-container .gallery-classmates-section { width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .gallery-container .gallery-section-empty { top: 275px; left: 0; width: 100%; } .gallery-container .gallery-section-empty img { margin-bottom: 20px; } } /* src/js/activitybuilder/components/challenge/miniscreen.styl */ .challenge-creator-miniscreen { position: absolute; top: 0; left: 0; bottom: 0; right: 0; padding: 30px 8px 0; } .challenge-creator-miniscreen .miniscreen-gallery-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .challenge-creator-miniscreen .miniscreen-gallery-container .your-challenge, .challenge-creator-miniscreen .miniscreen-gallery-container .class-challenge { border: 1px solid #bdbdbd; background: #e2e2e2; border-radius: 2px; } .challenge-creator-miniscreen .miniscreen-gallery-container .your-challenge { width: 60px; height: 60px; margin-right: 10px; } .challenge-creator-miniscreen .miniscreen-gallery-container .class-challenges-container { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .challenge-creator-miniscreen .miniscreen-gallery-container .class-challenges-container .class-challenge { width: calc((100% - 21px) / 4); margin: 0 7px 7px 0; float: left; } .challenge-creator-miniscreen .miniscreen-gallery-container .class-challenges-container .class-challenge:after { content: ""; display: block; padding-bottom: 100%; } .challenge-creator-miniscreen .miniscreen-gallery-container .class-challenges-container .class-challenge:nth-of-type(4n) { margin-right: 0; } .challenge-creator-miniscreen .miniscreen-gallery-container .class-challenges-container .class-challenge:nth-of-type(4n+1) { clear: both; } .navigation-miniscreen-container .challenge-creator-miniscreen .your-challenge { width: 30px; height: 30px; margin-right: 5px; } .navigation-miniscreen-container .challenge-creator-miniscreen .class-challenges-container .class-challenge { width: calc((100% - 12px) / 4); margin: 0 4px 4px 0; } /* src/js/activitybuilder/components/challenge/playground/challenge-entry.styl */ .gallery-your-section { width: 182px; margin: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) 0; } .gallery-your-section .created-challenge-entry .challenge-responses { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .gallery-your-section .created-challenge-entry .your-challenge, .gallery-your-section .created-challenge-entry .your-challenge-completed { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; width: 182px; min-height: 182px; position: relative; } .gallery-your-section .created-challenge-entry .your-challenge .cl-challenge-thumb, .gallery-your-section .created-challenge-entry .your-challenge-completed .cl-challenge-thumb, .gallery-your-section .created-challenge-entry .your-challenge .gallery-color-background, .gallery-your-section .created-challenge-entry .your-challenge-completed .gallery-color-background, .gallery-your-section .created-challenge-entry .your-challenge .component-challenge-thumb, .gallery-your-section .created-challenge-entry .your-challenge-completed .component-challenge-thumb { height: 182px; } .gallery-your-section .created-challenge-entry .your-challenge { border: 1px solid #bdbdbd; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) 3px calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); border-radius: 0.1875em; text-align: center; } .gallery-your-section .created-challenge-entry .your-challenge.disabled { cursor: default; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .gallery-your-section .created-challenge-entry .your-challenge:not(.disabled).dcg-hovered, .gallery-your-section .created-challenge-entry .your-challenge:not(.disabled).dcg-depressed { border: 1px solid #9c0d63; } .gallery-your-section .created-challenge-entry .challenge-submitting { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; background: #fff; border: 2px solid #e2e2e2; border-radius: 7px; border-radius: 0.1875em; } .gallery-your-section .created-challenge-entry .challenge-missing { border: 1px solid #bdbdbd; color: #a0a0a0; } .gallery-your-section .created-challenge-entry .challenge-missing.dcg-hovered, .gallery-your-section .created-challenge-entry .challenge-missing.dcg-depressed { color: #3278c8; border: 1px solid #9c0d63; } .gallery-your-section .created-challenge-entry .challenge-missing.dcg-hovered img, .gallery-your-section .created-challenge-entry .challenge-missing.dcg-depressed img { filter: none; } .gallery-your-section .created-challenge-entry .challenge-missing img { filter: grayscale(100%); width: 80%; margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .gallery-your-section .created-challenge-entry .resume-editing { color: #3278c8; } .gallery-your-section .created-challenge-entry .resume-editing img { filter: none; } .gallery-your-section .created-challenge-entry .challenge-stats-container { padding-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .gallery-your-section .created-challenge-entry .challenge-stats-container .number-submitted { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .gallery-your-section .created-challenge-entry .challenge-stats-container .number-submitted i { margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } /* src/js/activitybuilder/components/challenge/playground/delete-challenge-confirmation-modal.styl */ .delete-challenge-confirmation-modal .delete-challenge-confirmation-modal-contents { padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .delete-challenge-confirmation-modal .delete-challenge-confirmation-modal-actions { gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } /* src/js/activitybuilder/components/challenge/playground/gallery-entry.styl */ .challenge-entry-container { margin: 10px; } .challenge-entry-container .challenge-gallery-entry { width: 117px; height: 117px; position: relative; } .challenge-entry-container .challenge-gallery-entry .completed-challenge { background: rgba(0,0,0,0.6); color: #fff; border-radius: 50%; width: 40px; height: 40px; text-align: center; position: absolute; top: 50%; right: 50%; margin: -20px -20px 0 0; } .challenge-entry-container .challenge-gallery-entry .completed-challenge i { line-height: 40px; } .challenge-entry-container .challenge-entry-student-name { max-width: 117px; font-weight: 500; } .challenge-entry-container .challenge-stats-container { width: 117px; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) 0; } .challenge-entry-container .challenge-stats-container .number-submitted { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .challenge-entry-container .challenge-stats-container .number-submitted i { margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } /* src/js/activitybuilder/components/challenge/playground/gallery.styl */ .challenge-playground { width: 100%; } .challenge-playground .gallery-contents-container { -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .challenge-playground .gallery-contents-container .ribbon-container { max-width: 400px; min-width: 200px; width: 75%; text-align: center; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; color: #fff; margin: auto; height: 50px; position: relative; z-index: 0; -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.1); box-shadow: 0 2px 3px rgba(0,0,0,0.1); } .challenge-playground .gallery-contents-container .ribbon-container:before, .challenge-playground .gallery-contents-container .ribbon-container:after { content: ""; display: block; border: 25px solid #4079b1; z-index: -1; } .challenge-playground .gallery-contents-container .ribbon-container:before { position: absolute; top: 15px; left: -45px; border-right-width: 60px; border-left-color: transparent; } .challenge-playground .gallery-contents-container .ribbon-container:after { position: absolute; top: 15px; right: -45px; border-left-width: 60px; border-right-color: transparent; } .challenge-playground .gallery-contents-container .ribbon-container .ribbon-title { background: #3278c8; line-height: 50px; } .challenge-playground .gallery-contents-container .ribbon-container .ribbon-title:before, .challenge-playground .gallery-contents-container .ribbon-container .ribbon-title:after { content: ""; display: block; border-style: solid; border-color: #369 transparent transparent transparent; } .challenge-playground .gallery-contents-container .ribbon-container .ribbon-title:before { position: absolute; bottom: -15px; left: 0; border-width: 15px 0 0 40px; } .challenge-playground .gallery-contents-container .ribbon-container .ribbon-title:after { position: absolute; bottom: -15px; right: 0; border-width: 15px 40px 0 0; } .challenge-playground .gallery-contents-container .ribbon-container .ribbon-title.h3 { margin-top: 0; } .challenge-playground .gallery-contents-container .visit-dashboard-container { font-style: italic; color: #676767; border-radius: 0.1875em; border: 1px dashed #bdbdbd; height: 50%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } /* src/js/activitybuilder/components/challenge/playground/responses-view.styl */ .responses-view { -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .responses-view .response-ribbon { position: absolute; top: 0; right: 0; border-top-right-radius: 2px; border-bottom-left-radius: 3px; background: rgba(0,0,0,0.5); padding: 4px 7px; color: #fff; text-transform: uppercase; font-size: 70%; } .responses-view .challenge-class-responses-container .challenge-response { margin: 0 20px 20px 0; } .responses-view .challenge-class-responses-container .challenge-response .student-name, .responses-view .challenge-class-responses-container .challenge-response .challenge-response-student-name { max-width: 150px; } .responses-view .challenge-class-responses-container .challenge-response-thumb { width: 150px; height: 150px; position: relative; font-size: 110%; } .responses-view .challenge-class-responses-container .gallery-section-empty { position: absolute; top: 135px; left: 200px; } @media screen and (max-width: 575px) { .responses-view .challenge-class-responses-container .gallery-section-empty { left: 0; } } /* src/js/activitybuilder/components/challenge/playground/translate-view.styl */ .challenge-playground { width: 100%; } .challenge-playground .translate-gallery-contents-container { -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .challenge-playground .translate-gallery-contents-container .ribbon-container { max-width: 400px; min-width: 200px; width: 75%; text-align: center; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; color: #fff; margin: auto; height: 50px; position: relative; z-index: 0; -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.1); box-shadow: 0 2px 3px rgba(0,0,0,0.1); } .challenge-playground .translate-gallery-contents-container .ribbon-container:before, .challenge-playground .translate-gallery-contents-container .ribbon-container:after { content: ""; display: block; border: 25px solid #4079b1; z-index: -1; } .challenge-playground .translate-gallery-contents-container .ribbon-container:before { position: absolute; top: 15px; left: -45px; border-right-width: 60px; border-left-color: transparent; } .challenge-playground .translate-gallery-contents-container .ribbon-container:after { position: absolute; top: 15px; right: -45px; border-left-width: 60px; border-right-color: transparent; } .challenge-playground .translate-gallery-contents-container .ribbon-container .ribbon-title { background: #3278c8; line-height: 50px; } .challenge-playground .translate-gallery-contents-container .ribbon-container .ribbon-title:before, .challenge-playground .translate-gallery-contents-container .ribbon-container .ribbon-title:after { content: ""; display: block; border-style: solid; border-color: #369 transparent transparent transparent; } .challenge-playground .translate-gallery-contents-container .ribbon-container .ribbon-title:before { position: absolute; bottom: -15px; left: 0; border-width: 15px 0 0 40px; } .challenge-playground .translate-gallery-contents-container .ribbon-container .ribbon-title:after { position: absolute; bottom: -15px; right: 0; border-width: 15px 40px 0 0; } .challenge-playground .translate-gallery-contents-container .visit-dashboard-container { font-style: italic; color: #3b3b3b; border-radius: 0.1875em; border: 1px dashed #bdbdbd; height: 50%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .challenge-playground .translate-gallery-contents-container .gallery-your-section { width: fit-content; } .challenge-playground .translate-gallery-contents-container .gallery-your-section .created-challenge-entry { width: 250px; height: 250px; position: relative; font-size: 200%; line-height: normal; background: #e9e9e9; border: 1px solid #bdbdbd; padding: 80px 10px 10px; border-radius: 0.1875em; text-align: center; } .challenge-playground .translate-gallery-contents-container .gallery-your-section .created-challenge-entry.dcg-hovered, .challenge-playground .translate-gallery-contents-container .gallery-your-section .created-challenge-entry.dcg-depressed { border: 1px solid #9c0d63; -webkit-box-shadow: 0 0 0 1px #9c0d63; box-shadow: 0 0 0 1px #9c0d63; } /* src/js/activitybuilder/components/challenge/sandbox-header.styl */ .sandbox-header { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background: #3278c8; position: relative; height: 55px; color: #fff; padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .sandbox-header.row { margin-left: 0; margin-right: 0; } .sandbox-header.scrolled { z-index: 1; -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.6); box-shadow: 0 0 5px rgba(0,0,0,0.6); border-color: #e2e2e2; } .sandbox-header.fade-in { -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .sandbox-header > .header-back-arrow { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1.5); } .sandbox-header .btn { height: var(--sandbox-header-btn-height, 2.5em); line-height: var(--sandbox-header-btn-line-height, 2.375em); } .sandbox-header .btn label { z-index: 1; } .sandbox-header .sandbox-header-content-left .challenge-name-container, .sandbox-header .sandbox-header-content-left .challenge-author-name { width: 100%; } .sandbox-header .sandbox-header-content-right { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .sandbox-header .sandbox-header-content-right .navigation-container { -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .sandbox-header .sandbox-header-content-right .response-navigation { padding-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); color: #fff; } .sandbox-header .sandbox-header-content-center { text-align: center; } .sandbox-header .sandbox-header-content-center .centered-header-button { margin: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .sandbox-header .sandbox-header-content-center .btn { color: #fff; } .sandbox-header .navigation-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; text-align: center; padding-right: 8px; } .sandbox-header .navigation-container .btn:first-of-type { margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .sandbox-header .navigation-container .forward-icon { margin-left: 5px; margin-right: -5px; font-size: 85%; display: inline-block; } .sandbox-header .navigation-container .previous-icon { font-size: 85%; display: inline-block; } .sandbox-header .challenge-author-name .cc-student-name-container, .sandbox-header .challenge-responder-name .cc-student-name-container { vertical-align: bottom; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: inline-block; } .sandbox-header .challenge-author-name.your-response:not(.your-challenge) > span, .sandbox-header .challenge-responder-name.your-response:not(.your-challenge) > span { max-width: 50%; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .sandbox-header .challenge-author-name { line-height: 55px; font-size: var(--font-size-default, 130%); color: rgba(255,255,255,0.9); width: 100%; } .sandbox-header .challenge-author-name .cc-student-name-container { max-width: calc(100% - 160px); } .sandbox-header .challenge-author-name.is-viewing-response { line-height: initial; } .sandbox-header .your-challenge-dropdown .dropdown-container { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .sandbox-header .your-challenge-dropdown .challenge-options-anchor { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #fff; } .sandbox-header .your-challenge-dropdown .challenge-options-title { padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .sandbox-header .your-challenge-dropdown .submitted-check { line-height: 1em; } .sandbox-header .your-challenge-dropdown .dropdown-choice { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .sandbox-header .your-challenge-dropdown .btn { color: #fff; } .sandbox-header .your-challenge-dropdown .delete-challenge { color: #db2e00; } .sandbox-header .challenge-responder-name { margin: 0 auto; line-height: initial; font-size: calc(var(--font-size-default, 130%) * 0.75); color: rgba(255,255,255,0.9); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; max-height: 24px; width: 100%; } .sandbox-header .challenge-responder-name > div:not(.your-challenge-dropdown) { width: 100%; } .sandbox-header .challenge-responder-name .cc-student-name-container { max-width: calc(100% - 140px); } .sandbox-header .challenge-responder-name .your-challenge-dropdown { display: inline-block; margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); position: relative; } .sandbox-header .challenge-responder-name .your-challenge-dropdown:before { content: ""; width: 1px; height: 1em; position: absolute; top: 0.25em; left: 0; background: #fff; } .sandbox-header .challenge-responder-name .your-challenge-dropdown .dropdown-container { margin-top: auto; } .sandbox-header .challenge-responder-name .dcg-shared-dropdown-popover-container { padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .sandbox-header .back-to-dashboard { padding: 10px; font-size: 120%; line-height: initial; } .sandbox-header .response-navigation { line-height: 1em; position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .sandbox-header .response-navigation .student-count { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .sandbox-header .response-navigation .student-count .student-count-number { font-weight: var(--font-weight-bold, 500); } .sandbox-header .response-navigation .navigation-arrows { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .sandbox-header .response-navigation .navigation-arrows i { color: #fff; border-radius: var(--rectangle-btn-border-radius, 50%); cursor: pointer; } .sandbox-header .response-navigation .navigation-arrows i:before { height: var(--sandbox-header-nav-btn-height); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .sandbox-header .response-navigation .navigation-arrows i:not(.disabled).dcg-hovered, .sandbox-header .response-navigation .navigation-arrows i:not(.disabled):focus-visible { background: rgba(0,0,0,0.05); } .sandbox-header .response-navigation .navigation-arrows i:not(.disabled).dcg-depressed { background: rgba(0,0,0,0.1); } .sandbox-header .response-navigation .navigation-arrows i.disabled { cursor: default; opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); } .sandbox-header .response-navigation .navigation-arrows i.icon-v2-caret-up:before { position: relative; top: -1.5px; } .modal-container .sandbox-header .response-navigation { margin-right: 8px; } @media screen and (max-width: 575px) { .sandbox-header .sandbox-header-content-center { text-align: left; } } /* src/js/activitybuilder/components/challenge/sandbox-view.styl */ .playground-challenge-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #fff; } .playground-challenge-container .playground-challenge-contents { position: absolute; top: 55px; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .playground-challenge-container .playground-challenge { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: auto; position: relative; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; overflow-x: hidden; } .playground-challenge-container .challenge-view-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .playground-challenge-container .challenge-view-container .screens-container { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; position: relative; } .loading-challenge { position: absolute; top: 0; left: 0; right: 0; } .loading-challenge .loading-header { height: 55px; } .loading-challenge .loading-header .loading-background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; font-size: 140%; text-align: center; line-height: 55px; background: #e2e2e2; -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; } @media screen and (max-width: 575px) { .playground-challenge-container .challenge-view-container.student-tool-panel-open .screens-container { width: 100%; } } /* src/js/activitybuilder/components/custom-component/miniscreen/view.styl */ .custom-miniscreen .icon-container { text-align: center; font-size: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); margin-top: -18px; } .custom-miniscreen .custom-component-miniscreen-img { width: 16px; height: 16px; } .custom-miniscreen i.pillow-icon-code { font-size: 120%; color: #bbb; } /* src/js/activitybuilder/components/custom-component/playground/view.styl */ .desmos-custom-component { width: auto; } .desmos-custom-component.layout-fullscreen { position: absolute; top: 0; left: 10px; bottom: 10px; right: 10px; } .desmos-custom-component .desmos-custom-component-content { height: 100%; width: 100%; } /* src/js/activitybuilder/components/expression-input/dashboard/expression-response.styl */ .expression-input-response-text { overflow-x: auto; font-size: 100%; } .expression-input-response-text:not(.what-other-students-said) { cursor: pointer; } .expression-input-response-text:not(.what-other-students-said).showing-selection-checkbox { border: 1px solid #bdbdbd; border-radius: 0.1875em; padding: 6px 15px; margin-top: 6px; } .expression-input-response-text:not(.what-other-students-said).showing-selection-checkbox:after { content: ""; position: absolute; top: -10px; left: 32px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .expression-input-response-text:not(.what-other-students-said).showing-selection-checkbox:before { content: ""; position: absolute; top: -11.5px; left: 30.5px; border-width: 11.5px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .expression-input-response-text:not(.what-other-students-said).showing-selection-checkbox:before { margin-top: 1px; } .expression-input-response-text:not(.what-other-students-said).showing-selection-checkbox:after { margin-top: 1px; } .expression-input-response-text:not(.what-other-students-said).showing-selection-checkbox.hover-on-response { cursor: pointer; border: 1px solid #bdbdbd; } .expression-input-response-text:not(.what-other-students-said).showing-selection-checkbox.hover-on-response ~ .dcg-comments-decorator-container { border-left: 1px solid #bdbdbd; border-top: 1px solid #bdbdbd; border-top-left-radius: 0.1875em; } .expression-input-response-text:not(.what-other-students-said).showing-selection-checkbox.hover-on-response ~ .dcg-comments-decorator-container .dcg-comments-decorator { top: -1px; left: -1px; } .expression-input-response-text:not(.what-other-students-said).showing-selection-checkbox.hover-on-response.dcg-hovered, .expression-input-response-text:not(.what-other-students-said).showing-selection-checkbox.hover-on-response.dcg-hovered ~ .dcg-comments-decorator-container { border-color: #9c0d63; } .expression-input-response-text:not(.what-other-students-said).showing-selection-checkbox.hover-on-response.dcg-depressed, .expression-input-response-text:not(.what-other-students-said).showing-selection-checkbox.hover-on-response.dcg-depressed ~ .dcg-comments-decorator-container { border-color: #5e083b; } .expression-input-response-text:not(.what-other-students-said).showing-selection-checkbox.hover-on-response.dcg-hovered:before { border-color: transparent transparent #9c0d63; } .expression-input-response-text:not(.what-other-students-said).showing-selection-checkbox.hover-on-response.dcg-depressed:before { border-color: transparent transparent #5e083b; } .expression-input-response-text:not(.what-other-students-said):not(.showing-selection-checkbox) { border: 1px solid #bdbdbd; border-radius: 0.1875em; padding: 6px 15px; margin-top: 6px; } .expression-input-response-text:not(.what-other-students-said):not(.showing-selection-checkbox):after { content: ""; position: absolute; top: -10px; left: 5px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .expression-input-response-text:not(.what-other-students-said):not(.showing-selection-checkbox):before { content: ""; position: absolute; top: -11.5px; left: 3.5px; border-width: 11.5px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .expression-input-response-text:not(.what-other-students-said):not(.showing-selection-checkbox):before { margin-top: 1px; } .expression-input-response-text:not(.what-other-students-said):not(.showing-selection-checkbox):after { margin-top: 1px; } .expression-input-response-text:not(.what-other-students-said):not(.showing-selection-checkbox).hover-on-response { cursor: pointer; border: 1px solid #bdbdbd; } .expression-input-response-text:not(.what-other-students-said):not(.showing-selection-checkbox).hover-on-response ~ .dcg-comments-decorator-container { border-left: 1px solid #bdbdbd; border-top: 1px solid #bdbdbd; border-top-left-radius: 0.1875em; } .expression-input-response-text:not(.what-other-students-said):not(.showing-selection-checkbox).hover-on-response ~ .dcg-comments-decorator-container .dcg-comments-decorator { top: -1px; left: -1px; } .expression-input-response-text:not(.what-other-students-said):not(.showing-selection-checkbox).hover-on-response.dcg-hovered, .expression-input-response-text:not(.what-other-students-said):not(.showing-selection-checkbox).hover-on-response.dcg-hovered ~ .dcg-comments-decorator-container { border-color: #9c0d63; } .expression-input-response-text:not(.what-other-students-said):not(.showing-selection-checkbox).hover-on-response.dcg-depressed, .expression-input-response-text:not(.what-other-students-said):not(.showing-selection-checkbox).hover-on-response.dcg-depressed ~ .dcg-comments-decorator-container { border-color: #5e083b; } .expression-input-response-text:not(.what-other-students-said):not(.showing-selection-checkbox).hover-on-response.dcg-hovered:before { border-color: transparent transparent #9c0d63; } .expression-input-response-text:not(.what-other-students-said):not(.showing-selection-checkbox).hover-on-response.dcg-depressed:before { border-color: transparent transparent #5e083b; } .expression-input-response-text:not(.what-other-students-said) .component-audio-player-wrapper { margin-top: 10px; } .expression-input-response-text.math-plus-explain .math-response { border-right: 1px solid #999; padding-right: 10px; margin-right: 15px; } .expression-input-response-text .textarea-image-thumbnails { margin-top: 5px; } /* src/js/activitybuilder/components/expression-input/evaluation.styl */ .evaluation { color: #676767; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .evaluation.visible { padding-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .evaluation.placeholder { color: #676767; } .evaluation .dcg-braille-input { text-align: right; color: #666; max-width: 160px; } .evaluation .suffix { white-space: nowrap; margin-left: 5px; margin-top: -1px; } /* src/js/activitybuilder/components/expression-input/miniscreen/view.styl */ .expression-input-miniscreen { border-radius: 3px; border: 1px dashed #bbb; padding: 3px; margin: 2px 0 10px; text-align: center; } .expression-input-miniscreen i { font-size: 25px; color: #bbb; position: relative; top: 1px; } .dcg-layout-column:first-child.one-third .expression-input-miniscreen i { font-size: 16px; } .dcg-layout-column:last-child.two-third .expression-input-miniscreen i { font-size: 16px; } /* src/js/activitybuilder/components/expression-input/playground/view.styl */ .expression-input-playground-view { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; margin: 0 auto; } .dcg-expression-input-container { max-width: 100%; } .dcg-expression-input-container .expression-input-playground-view { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; max-width: 100%; } .dcg-expression-input-container .camera-header-container { width: 100%; text-align: right; margin-bottom: -5px; } .dcg-expression-input-container .input-and-error-container { width: 100%; } .dcg-expression-input-container .input-and-error-container.edit-disabled { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); } .dcg-expression-input-container .input-and-error-container.edit-disabled [ontap] { cursor: default; } .dcg-expression-input-container .input-and-error-container .dcg-expression-input { border-radius: var(--border-radius, 0.1875em 0.1875em 0 0); border: var(--border-component, 1px solid #bdbdbd); overflow: hidden; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; min-width: 200px; background-color: var(--math-input-background-color, #fff); } .dcg-expression-input-container .input-and-error-container .dcg-expression-input.is-error { background-color: var(--field-has-error-background-color); border-color: var(--field-has-error-border-color, #bdbdbd); } .dcg-expression-input-container .input-and-error-container .dcg-expression-input.dcg-hovered { -webkit-box-shadow: inset 0 0 0 var(--math-input-focused-border-width) var(--math-input-border-color-hover); box-shadow: inset 0 0 0 var(--math-input-focused-border-width) var(--math-input-border-color-hover); border-color: var(--math-input-border-color-hover, #9c0d63); } .dcg-expression-input-container .input-and-error-container .dcg-expression-input.dcg-mq-focused { -webkit-box-shadow: inset 0 0 0 var(--math-input-focused-border-width) var(--math-input-border-color-focus); box-shadow: inset 0 0 0 var(--math-input-focused-border-width) var(--math-input-border-color-focus); border-color: var(--math-input-border-color-focus, #9c0d63); } .dcg-expression-input-container .input-and-error-container .dcg-expression-input.is-placeholder-text { color: #bbb; } .dcg-expression-input-container .input-and-error-container .dcg-expression-input .mathquill-auto-flexer { width: 100%; overflow: hidden; } .dcg-expression-input-container .input-and-error-container .dcg-expression-input .mathquill-auto-flexer .dcg-mathquill-wrapper { width: 100%; padding: var(--math-input-spacing, 10px); } .dcg-expression-input-container .input-and-error-container .dcg-expression-input .mathquill-auto-flexer .dcg-mathquill-wrapper .dcg-tooltip-hit-area-container { width: 100%; } .dcg-expression-input-container .input-and-error-container .dcg-expression-input .mathquill-auto-flexer .dcg-mathquill-wrapper .dcg-mq-math-mode { border: 0; width: 100%; } .dcg-expression-input-container .input-and-error-container .dcg-expression-input .mathquill-auto-flexer .dcg-mathquill-wrapper .dcg-mq-math-mode var { font-family: var(--font-family); font-size: var(--font-size-default); } .dcg-expression-input-container .input-and-error-container .dcg-expression-input .mathquill-auto-flexer .dcg-mathquill-wrapper .dcg-mq-math-mode.dcg-mq-focused { -webkit-box-shadow: none; box-shadow: none; border: 0; } .dcg-expression-input-container .input-and-error-container .mq-error-message { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; color: var(--math-input-error-icon-color); margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); margin-top: var(--math-input-margin-top); -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .dcg-expression-input-container .input-and-error-container .mq-error-message .error-text-container { width: 100vw; display: none; font-style: italic; } .dcg-expression-input-container .input-and-error-container .mq-error-message .error-text-container i { margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .dcg-expression-input-container .input-and-error-container .mq-error-message .error-text-container span { width: calc(100% - 20px - calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3)); white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .dcg-expression-input-container .input-and-error-container .mq-error-message i { display: block; cursor: pointer; font-size: var(--math-input-error-font-size); border-radius: var(--math-input-error-icon-border-radius); background: var(--math-input-error-icon-background); font-size: 1.25em; line-height: 1.25em; } .dcg-expression-input-container .input-and-button-container { position: relative; width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -moz-box-align: end; -o-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .dcg-expression-input-container .dcg-exp-submit-btn-container { text-align: var(--math-submit-button-container-text-align, right); width: var(--math-submit-button-container-width); display: var(--math-submit-button-container-display); -webkit-box-pack: var(--math-submit-button-container-justify); -moz-box-pack: var(--math-submit-button-container-justify); -o-box-pack: var(--math-submit-button-container-justify); -ms-flex-pack: var(--math-submit-button-container-justify); -webkit-justify-content: var(--math-submit-button-container-justify); justify-content: var(--math-submit-button-container-justify); margin-left: auto; } .dcg-expression-input-container .expression-submitted .dcg-mq-math-mode { cursor: pointer; } .dcg-expression-input-container .expression-submitted .dcg-expression-input .evaluation { opacity: 1; -ms-filter: none; filter: none; } .dcg-expression-input-container .expression-submitted.edit-disabled .dcg-mq-math-mode { cursor: default; } .dcg-expression-input-container .dcg-explain-your-answer { -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; position: relative; width: 100%; } .dcg-expression-input-container .dcg-explain-your-answer .explain-text { margin-bottom: 10px; font-size: 120%; display: inline-block; max-width: calc(100% - 30px); } .dcg-expression-input-container .dcg-explain-your-answer .capture-snapshot-container { position: absolute; top: 3px; right: 0; } @media screen and (max-width: 575px) { .expression-input-playground-view .input-and-button-container { margin-bottom: calc(20px + calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2)); } .expression-input-playground-view .input-and-error-container .mq-error-message { position: absolute; top: 100%; margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .expression-input-playground-view .input-and-error-container .mq-error-message .error-text-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .expression-input-playground-view .input-and-error-container .mq-error-message .error-tooltip-container { display: none; } } /* src/js/activitybuilder/components/geometry/miniscreen/view.styl */ .geometry-widget-miniscreen.loading { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .geometry-widget-miniscreen.within-fullscreen-layout { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border-radius: 4px; } .geometry-widget-miniscreen.within-fullscreen-layout .copy-graph-miniscreen-cover { position: absolute; top: 0; left: 0; bottom: 0; right: 0; font-size: 100%; padding: 45px; } .geometry-widget-miniscreen .error { text-align: center; font-size: 16px; color: #db2e00; padding: 0 20px; } .geometry-widget-miniscreen .updating-message { text-align: center; font-size: 16px; } .geometry-widget-miniscreen .icon-container { margin: 0 auto; font-size: 64px; opacity: 0.2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); } .geometry-widget-miniscreen img { width: 100%; } .geometry-widget-miniscreen:not(.within-fullscreen-layout) { position: relative; line-height: 0; width: 100%; height: 0; padding-bottom: 100%; } .geometry-widget-miniscreen:not(.within-fullscreen-layout) img { position: absolute; top: 0; left: 0; bottom: 0; } .geometry-widget-miniscreen:not(.within-fullscreen-layout) img, .geometry-widget-miniscreen:not(.within-fullscreen-layout) .copy-graph-miniscreen-cover { border: 1px solid #e2e2e2; border-radius: 3px; } .dcg-layout-column:first-child.one-third .geometry-widget-miniscreen i { font-size: 66%; } .dcg-layout-column:last-child.two-third .geometry-widget-miniscreen i { font-size: 66%; } .dcg-layout-column.two-third .geometry-widget-miniscreen, .dcg-layout-column.one-third .geometry-widget-miniscreen { text-align: center; } /* src/js/activitybuilder/components/geometry/playground/view.styl */ .dcg-geometry-playground-container { border-top: 1px solid #bbb; z-index: 0; } .dcg-geometry-playground-container.within-fullscreen-layout { position: absolute; top: 0; left: 0; bottom: 0; right: 0; min-height: 400px; } .dcg-geometry-playground-container:not(.within-fullscreen-layout) { width: 100%; height: 0; padding-top: calc(100% - 2px); border: 1px solid #e2e2e2; position: relative; } .dcg-geometry-playground-container .geometry-playground { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .geometry-loading { text-align: center; } /* src/js/activitybuilder/components/graph-input/miniscreen.styl */ .graph-input-miniscreen-view.loading { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .graph-input-miniscreen-view:not(.half-width-mode) { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border-radius: 0.1875em; } .graph-input-miniscreen-view:not(.half-width-mode) .copy-graph-miniscreen-cover { position: absolute; top: 0; left: 0; bottom: 0; right: 0; font-size: 100%; padding: 45px; } .graph-input-miniscreen-view .error { text-align: center; font-size: 16px; color: #db2e00; padding: 0 20px; } .graph-input-miniscreen-view .updating-message { text-align: center; font-size: 16px; } .graph-input-miniscreen-view .icon-container { margin: 0 auto; font-size: 64px; opacity: 0.2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); } .graph-input-miniscreen-view .full-width-image { width: 100%; } .graph-input-miniscreen-view.half-width-mode { position: relative; line-height: 0; width: 100%; height: 0; padding-bottom: 100%; } .graph-input-miniscreen-view.half-width-mode .half-width-image { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; } .graph-input-miniscreen-view.half-width-mode .copy-graph-miniscreen-cover { position: absolute; top: 0; left: 0; bottom: 0; right: 0; padding: 20px 10px; font-size: 70%; line-height: 1em; } .graph-input-miniscreen-view.half-width-mode .half-width-image, .graph-input-miniscreen-view.half-width-mode .copy-graph-miniscreen-cover { border: 1px solid #e2e2e2; border-radius: 3px; } .navigation-miniscreen-container .icon-container { font-size: 38px; } .one-column .graph-input-miniscreen-view.half-width-mode { width: 50%; margin-left: 25%; } .copy-graph-miniscreen-cover { background-color: rgba(255,255,255,0.7); color: #999; text-transform: uppercase; text-align: center; } .copy-graph-miniscreen-cover .pillow-icon-copy-previous { display: block; font-size: 140%; padding-bottom: 5px; } .miniscreen-loading-half-width-mode { width: 100%; height: 0; padding-bottom: 100%; border-radius: 3px; background: #e2e2e2; -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; } .miniscreen-loading-fullscreen-mode { text-align: center; -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; padding-top: 30px; color: #bbb; font-size: 90%; } .dcg-layout-column:first-child.one-third .graph-input-miniscreen-view i { font-size: 66%; } .dcg-layout-column:last-child.two-third .graph-input-miniscreen-view i { font-size: 66%; } .dcg-layout-column.two-third .graph-input-miniscreen-view, .dcg-layout-column.one-third .graph-input-miniscreen-view { text-align: center; } /* src/js/activitybuilder/components/graph-input/playground/view.styl */ .graph-input-student-flex-container:not(.is-exhibit-mode) { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .graph-input-student-flex-container:not(.is-exhibit-mode) .camera-header-container { height: 26px; } .graph-input-student-flex-container:not(.is-exhibit-mode) .graph-input-student-view { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; border-top: 1px solid #bdbdbd; position: relative; } .graph-input-student-flex-container:not(.is-exhibit-mode) .graph-input-student-view .graph-input-student-calc .calculator { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .graph-input-student-flex-container .dcg-calculator-playground-view { position: relative; max-width: 100%; height: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .graph-input-student-flex-container .dcg-calculator-playground-view .camera-header-container { height: 26px; text-align: right; } .graph-input-student-flex-container.is-exhibit-mode:not(.is-fullscreen-exhibit) .graph-input-student-view { padding-top: calc(100% - calc(2 * var(--border-width-graphs, 1px))); } .graph-input-student-flex-container.is-exhibit-mode.is-in-wide-column .graph-input-student-view { padding-top: calc(75%); } .graph-input-student-flex-container.is-exhibit-mode.is-fullscreen-exhibit { position: absolute; top: 0; right: 10px; bottom: 10px; left: 10px; } .graph-input-student-flex-container.is-exhibit-mode.geometry-toolbar-visible .dcg-action-button-playground { margin-top: 48px; } .graph-input-student-flex-container.is-exhibit-mode.geometry-toolbar-visible .dcg-action-button-playground.has-snapshot-camera { margin-top: 74px; } .graph-input-student-flex-container.is-exhibit-mode .graph-input-student-view { position: relative; width: 100%; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; border: var(--graph-border, 1px solid #bdbdbd); border-radius: var(--border-radius, 0.1875em); overflow: var(--overflow-hidden); } .graph-input-student-flex-container.is-exhibit-mode .graph-input-student-view.no-border { border: none; } .graph-input-student-flex-container.is-exhibit-mode .graph-input-student-view .dcg-container { border-radius: calc(0.1875em - 1px); } .graph-input-student-flex-container.is-exhibit-mode .graph-input-student-calc .calculator { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .graph-input-student-flex-container.is-exhibit-mode .graph-input-deserialization-error { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background: #fff; z-index: 100; } .graph-input-student-flex-container.is-exhibit-mode .graph-input-deserialization-error .amp-link { margin-top: 10px; } .layout-top-student-view.showing-correctness .graph-input-student-flex-container:not(.is-exhibit-mode) { margin-right: 49px; } .layout-top-student-view.showing-correctness .graph-input-student-flex-container.is-fullscreen-exhibit { margin-left: 49px; margin-right: 49px; } .graph-input-student-view .scrubber-container { padding-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1.5); -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .graph-input-student-view .animation-overlay-scrubber { background-color: #fff; border-top: var(--graph-scrubber-border-top, 1px solid #bdbdbd); border-bottom-left-radius: 0.1875em; border-bottom-right-radius: 0.1875em; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) 0; } .graph-input-student-view .animation-overlay-scrubber .small-play-pause { margin: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); height: 38px; width: 38px; } .graph-input-student-view .animation-overlay-scrubber .small-play-pause .icon-v2-pause { font-size: 1.3em; } .graph-input-student-view .animation-overlay-scrubber .small-play-pause label { font-size: 0.875em; } .dcg-label-raw-text { font-family: var(--font-family); } /* src/js/activitybuilder/components/iframe/miniscreen.styl */ .iframe-miniscreen-view.loading, .iframe-miniscreen-view:not(.half-width-mode) { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border-radius: 4px; } .iframe-miniscreen-view .icon-container { margin: 0 auto; font-size: 2em; opacity: 0.2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); } .iframe-miniscreen-view .full-width-image { max-height: 100%; max-width: 100%; margin: auto; } .navigation-miniscreen-container .icon-container { font-size: 1.5em; } /* src/js/activitybuilder/components/iframe/view.styl */ .iframe-wrapper { height: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; min-height: 500px; } .iframe-wrapper iframe { position: absolute; } /* src/js/activitybuilder/components/image-exhibit/miniscreen.styl */ .image-exhibit-miniscreen-view .fade-out { position: absolute; bottom: 0; left: 0; right: 0; height: 20px; width: 100%; background: -webkit-linear-gradient(rgba(255,255,255,0), #fff 75%); background: -moz-linear-gradient(rgba(255,255,255,0), #fff 75%); background: -o-linear-gradient(rgba(255,255,255,0), #fff 75%); background: -ms-linear-gradient(rgba(255,255,255,0), #fff 75%); background: linear-gradient(rgba(255,255,255,0), #fff 75%); } .image-exhibit-miniscreen-view img { width: 100%; border-radius: 2px; } .miniscreen .fullscreen-layout .image-exhibit-miniscreen-view { padding-top: 30px; } /* src/js/activitybuilder/components/image-exhibit/view.styl */ .image-exhibit-within-fullscreen-layout { position: absolute; top: 10px; left: 10%; bottom: 10px; right: 10%; background-position: center center; background-repeat: no-repeat; background-size: contain; } .dcg-image-exhibit { display: block; width: 100%; } .dcg-image-exhibit.full-width-image { width: 95%; margin: 10px auto; } .dcg-image-exhibit.show-border { border: var(--image-border, 1px solid #bdbdbd); border-radius: var(--border-radius, 0.1875em); } .dcg-image-exhibit.show-border.tappable.dcg-hovered { border: var(--image-border, 1px solid #9c0d63); } .dcg-image-exhibit.show-border.tappable.dcg-depressed { border: var(--image-border, 1px solid #5e083b); } .image-exhibit-container { position: relative; clear: both; color: var(--image-fullscreen-icon-color, #999); margin: 0 auto 15px; } .image-exhibit-container:not(.tappable) { cursor: default !important; } .image-exhibit-container.dcg-hovered { color: var(--image-fullscreen-icon-color-hover, #666); } .image-exhibit-container.dcg-hovered .pillow-icon-fullscreen-open-button { color: var(--image-fullscreen-icon-color-hover, #666); } .image-exhibit-container.dcg-hovered .pillow-icon-fullscreen-open-button .pillow-icon-fullscreen-open { border: var(--image-fullscreen-icon-border-hover); } .image-exhibit-container.dcg-depressed { color: var(--image-fullscreen-icon-color-depressed, #000); } .image-exhibit-container .pillow-icon-fullscreen-open { position: absolute; top: var(--image-fullscreen-icon-top, 2px); right: var(--image-fullscreen-icon-right, 2px); padding: var(--image-fullscreen-icon-padding, 4px); text-shadow: calc(1px * -1) calc(1px * -1) 0 #fff, calc(1px * -1) 1px 0 #fff, 1px calc(1px * -1) 0 #fff, 1px 1px 0 #fff, 0 calc(1px * -1) 0 #fff, 0 1px 0 #fff, 1px 0 0 #fff, calc(1px * -1) 0 0 #fff; pointer-events: none; height: var(--image-fullscreen-icon-height); width: var(--image-fullscreen-icon-width); background-color: var(--image-fullscreen-icon-background-color); border: var(--image-fullscreen-icon-border); border-radius: var(--image-fullscreen-icon-border-radius); } .image-exhibit-container .pillow-icon-fullscreen-open-button { background-color: transparent; border: none; } .image-exhibit-container .fullscreen-icon-position { position: absolute; right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } @media screen and (max-width: 1000px) { .image-exhibit-within-fullscreen-layout { position: absolute; top: 10px; left: 10px; bottom: 10px; right: 10px; } } /* src/js/activitybuilder/components/loading-states/full-screen-graph.styl */ .student-loading-full-mode { position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-top: 1px solid #e2e2e2; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .student-loading-full-mode .fake-header { background: #f0f0f0; border-bottom: 1px solid #bbb; height: 53px; } .student-loading-full-mode .fake-expression { height: 60px; padding: 20px; border-bottom: 1px solid #e2e2e2; } .student-loading-full-mode .fake-expression .fake-equation { width: 70%; background: #e2e2e2; -webkit-animation: pulse 1.5s infinite; -moz-animation: pulse 1.5s infinite; -o-animation: pulse 1.5s infinite; -ms-animation: pulse 1.5s infinite; animation: pulse 1.5s infinite; height: 20px; } .student-loading-full-mode .fake-expression .half-width-equation { width: 40%; } @media screen and (min-width: 450px) { .student-loading-full-mode .fake-expressions-list { position: absolute; top: 0; left: 0; bottom: 0; width: 45%; max-width: 356px; min-width: 290px; border-right: 1px solid #bbb; } } @media screen and (max-width: 449px) { .student-loading-full-mode .fake-expressions-list { position: absolute; bottom: 0; left: 0; right: 0; top: auto; height: 65%; border-top: 1px solid #bbb; } } /* src/js/activitybuilder/components/marbleslides/marbles-overlay/marbles-overlay.styl */ .marbleslides-results h1 { text-align: left; } .marbleslides-results .narration-summary { margin-top: 1em; margin-bottom: 1em; } .overlay-animation { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; pointer-events: none; } .overlay-animation .marbleslides-star { font-size: 18px; width: 18px; height: 18px; line-height: 18px; text-align: center; color: #f5c617; text-stroke: 1px #856a09; -webkit-text-stroke: 1px #856a09; position: absolute; margin-top: -9px; margin-left: -10px; } .overlay-animation .marbleslides-star.captured .star-icon-container { -webkit-animation: animateStar 0.6s forwards; -moz-animation: animateStar 0.6s forwards; -o-animation: animateStar 0.6s forwards; -ms-animation: animateStar 0.6s forwards; animation: animateStar 0.6s forwards; } .overlay-animation .marbleslides-congratulations { position: absolute; top: 50%; left: 50%; height: 300px; line-height: 300px; margin-top: -150px; color: #00866b; font-size: 400%; width: 400px; margin-left: -200px; text-align: center; text-shadow: calc(3px * -1) calc(3px * -1) 0 #fff, calc(3px * -1) 3px 0 #fff, 3px calc(3px * -1) 0 #fff, 3px 3px 0 #fff, 0 calc(3px * -1) 0 #fff, 0 3px 0 #fff, 3px 0 0 #fff, calc(3px * -1) 0 0 #fff; -webkit-animation: animateMarbleSuccess 1.8s forwards; -moz-animation: animateMarbleSuccess 1.8s forwards; -o-animation: animateMarbleSuccess 1.8s forwards; -ms-animation: animateMarbleSuccess 1.8s forwards; animation: animateMarbleSuccess 1.8s forwards; pointer-events: none; } .overlay-animation .marble { background: #83629e; width: 20px; height: 20px; border-radius: 100px; position: absolute; top: 0; left: 0; } .overlay-animation .marble.done { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .marbleslides-offscreen-aria { position: absolute; top: -1000px; left: -1000px; width: 1px; height: 1px; overflow: hidden; } @-moz-keyframes animateStar { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; -ms-filter: none; filter: none; } 20% { -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); opacity: 1; -ms-filter: none; filter: none; } 40% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 60% { -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } 80% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-webkit-keyframes animateStar { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; -ms-filter: none; filter: none; } 20% { -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); opacity: 1; -ms-filter: none; filter: none; } 40% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 60% { -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } 80% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-o-keyframes animateStar { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; -ms-filter: none; filter: none; } 20% { -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); opacity: 1; -ms-filter: none; filter: none; } 40% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 60% { -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } 80% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @keyframes animateStar { 0% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; -ms-filter: none; filter: none; } 20% { -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); opacity: 1; -ms-filter: none; filter: none; } 40% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 60% { -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } 80% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-moz-keyframes animateMarbleSuccess { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.7, 0.7); -moz-transform: scale(0.7, 0.7); -o-transform: scale(0.7, 0.7); -ms-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); } 15% { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 30% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 75% { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(5, 5); -moz-transform: scale(5, 5); -o-transform: scale(5, 5); -ms-transform: scale(5, 5); transform: scale(5, 5); } } @-webkit-keyframes animateMarbleSuccess { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.7, 0.7); -moz-transform: scale(0.7, 0.7); -o-transform: scale(0.7, 0.7); -ms-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); } 15% { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 30% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 75% { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(5, 5); -moz-transform: scale(5, 5); -o-transform: scale(5, 5); -ms-transform: scale(5, 5); transform: scale(5, 5); } } @-o-keyframes animateMarbleSuccess { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.7, 0.7); -moz-transform: scale(0.7, 0.7); -o-transform: scale(0.7, 0.7); -ms-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); } 15% { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 30% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 75% { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(5, 5); -moz-transform: scale(5, 5); -o-transform: scale(5, 5); -ms-transform: scale(5, 5); transform: scale(5, 5); } } @keyframes animateMarbleSuccess { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.7, 0.7); -moz-transform: scale(0.7, 0.7); -o-transform: scale(0.7, 0.7); -ms-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); } 15% { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 30% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 75% { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(5, 5); -moz-transform: scale(5, 5); -o-transform: scale(5, 5); -ms-transform: scale(5, 5); transform: scale(5, 5); } } /* src/js/activitybuilder/components/marbleslides/miniscreen/view.styl */ .miniscreen-marbleslides { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border-radius: 4px; } .miniscreen-marbleslides.loading { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .miniscreen-marbleslides .copy-graph-miniscreen-cover { position: absolute; top: 0; left: 0; bottom: 0; right: 0; font-size: 100%; padding: 45px; } .miniscreen-marbleslides .icon-container { margin: 0 auto; font-size: 64px; opacity: 0.2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); } .miniscreen-marbleslides .full-width-image { width: 100%; } .miniscreen-marbleslides .marbleslides-icon-container { font-size: 180%; width: 100%; text-align: center; position: absolute; top: 50%; left: 0; padding-top: 10px; height: 50px; margin-top: -25px; color: #999; text-shadow: calc(1px * -1) calc(1px * -1) 0 #fff, calc(1px * -1) 1px 0 #fff, 1px calc(1px * -1) 0 #fff, 1px 1px 0 #fff, 0 calc(1px * -1) 0 #fff, 0 1px 0 #fff, 1px 0 0 #fff, calc(1px * -1) 0 0 #fff; } /* src/js/activitybuilder/components/marbleslides/playground/view.styl */ .marbleslides-student-screen { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-top: 1px solid #bbb; } .marbleslides-student-screen.snapshot { position: absolute; top: 30px; right: 0; bottom: 0; left: 0; } .marbleslides-student-screen .camera-header-container { position: absolute; top: -30px; right: 0; } .marbleslides-student-screen .marbleslides-calc-wrapper { position: relative; height: 100%; } .marbleslides-student-screen .marbleslides-calc-wrapper .calculator { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .marbleslides-student-screen .dcg-animate-play { display: none; } .marbleslides-student-screen .launch-btn { position: absolute; top: 5px; right: 5px; } .layout-top-student-view.showing-correctness .marbleslides-student-screen { right: 49px; } /* src/js/activitybuilder/components/multiple-choice/miniscreen.styl */ .mc-input-miniscreen { text-align: center; padding: 3px; width: 100%; height: 100%; } .mc-input-miniscreen i { font-size: 25px; color: #bbb; position: relative; top: 1px; } .mc-input-miniscreen .mc-polygraph-miniscreen-card-grid { width: 100%; height: 100%; } .mc-input-miniscreen .mc-polygraph-miniscreen-card-grid .mc-polygraph-miniscreen-card-row { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin-bottom: 3%; height: 22%; } .mc-input-miniscreen .mc-polygraph-miniscreen-card-grid .mc-polygraph-miniscreen-card-row .mc-polygraph-miniscreen-card { border: 1px solid #bdbdbd; border-radius: 2px; width: 22%; height: 100%; margin-left: 3%; } /* src/js/activitybuilder/components/multiple-choice/playground/buttons-layout.styl */ .dcg-multiple-choice-playground .buttons-layout { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: stretch; -moz-box-align: stretch; -o-box-align: stretch; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: var(--multi-choice-button-gap, calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); font-weight: var(--multi-choice-font-weight); } .dcg-multiple-choice-playground .buttons-layout.rows-of-10 .dcg-multiple-choice { -webkit-flex-basis: calc(10% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); flex-basis: calc(10% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); } .dcg-multiple-choice-playground .buttons-layout.rows-of-9 .dcg-multiple-choice { -webkit-flex-basis: calc(11.111% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); flex-basis: calc(11.111% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); } .dcg-multiple-choice-playground .buttons-layout.rows-of-8 .dcg-multiple-choice { -webkit-flex-basis: calc(12.5% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); flex-basis: calc(12.5% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); } .dcg-multiple-choice-playground .buttons-layout.rows-of-7 .dcg-multiple-choice { -webkit-flex-basis: calc(14.28% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); flex-basis: calc(14.28% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); } .dcg-multiple-choice-playground .buttons-layout.rows-of-6 .dcg-multiple-choice { -webkit-flex-basis: calc(16.666% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); flex-basis: calc(16.666% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); } .dcg-multiple-choice-playground .buttons-layout.rows-of-5 .dcg-multiple-choice { -webkit-flex-basis: calc(20% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); flex-basis: calc(20% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); } .dcg-multiple-choice-playground .buttons-layout.rows-of-4 .dcg-multiple-choice { -webkit-flex-basis: calc(25% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); flex-basis: calc(25% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); } .dcg-multiple-choice-playground .buttons-layout.rows-of-3 .dcg-multiple-choice { -webkit-flex-basis: calc(33% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); flex-basis: calc(33% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); } .dcg-multiple-choice-playground .buttons-layout.rows-of-2 .dcg-multiple-choice { -webkit-flex-basis: calc(50% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); flex-basis: calc(50% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); } .dcg-multiple-choice-playground .buttons-layout.rows-of-1 .dcg-multiple-choice { -webkit-flex-basis: 100%; flex-basis: 100%; } .dcg-multiple-choice-playground .buttons-layout .dcg-multiple-choice { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: var(--multi-choice-basic-text-align, center); border-radius: var(--multi-choice-basic-border-radius, 0.1875em); padding: var(--multi-choice-basic-padding, 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5)); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: var(--multi-choice-basic-justify-content, center); -moz-box-pack: var(--multi-choice-basic-justify-content, center); -o-box-pack: var(--multi-choice-basic-justify-content, center); -ms-flex-pack: var(--multi-choice-basic-justify-content, center); -webkit-justify-content: var(--multi-choice-basic-justify-content, center); justify-content: var(--multi-choice-basic-justify-content, center); -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border: var(--multi-choice-box-border, 1px solid #bdbdbd); -webkit-box-shadow: var(--multi-choice-box-shadow, none); box-shadow: var(--multi-choice-box-shadow, none); } .dcg-multiple-choice-playground .buttons-layout .dcg-multiple-choice.dcg-hovered.is-selectable:not(.is-selected) { border: var(--multi-choice-box-border-hover, 1px solid #bdbdbd); } .dcg-multiple-choice-playground .buttons-layout .dcg-multiple-choice.dcg-depressed.is-selectable:not(.is-selected) { border: var(--multi-choice-box-border-depressed, borderWidth solid rgba(0,0,0,0.05) 1px); -webkit-box-shadow: var(--multi-choice-box-shadow-depressed, inset 0 0 0 0 rgba(0,0,0,0.05)); box-shadow: var(--multi-choice-box-shadow-depressed, inset 0 0 0 0 rgba(0,0,0,0.05)); } .dcg-multiple-choice-playground .buttons-layout .dcg-multiple-choice.is-selected.dcg-choice-button { color: #fff; border: var(--multi-choice-box-border-selected, 1px solid rgba(0,0,0,0.2)); -webkit-box-shadow: var(--multi-choice-box-shadow-selected, inset 0 0 0 var(--box-shadow-width) 1px); box-shadow: var(--multi-choice-box-shadow-selected, inset 0 0 0 var(--box-shadow-width) 1px); } .dcg-multiple-choice-playground .buttons-layout .dcg-multiple-choice.is-selected.dcg-choice-button.dcg-hovered { border: var(--multi-choice-box-border-hover, 1px solid rgba(0,0,0,0.25)); -webkit-box-shadow: var(--multi-choice-box-shadow-selected, inset 0 0 0 var(--box-shadow-width) 1px); box-shadow: var(--multi-choice-box-shadow-selected, inset 0 0 0 var(--box-shadow-width) 1px); } .dcg-multiple-choice-playground .buttons-layout .dcg-multiple-choice.is-selected.dcg-choice-button.dcg-depressed { border: var(--multi-choice-box-border-depressed, 1px solid rgba(0,0,0,0.35)); -webkit-box-shadow: var(--multi-choice-box-shadow-selected, inset 0 0 0 var(--box-shadow-width) 1px); box-shadow: var(--multi-choice-box-shadow-selected, inset 0 0 0 var(--box-shadow-width) 1px); } .dcg-multiple-choice-playground .buttons-layout .dcg-multiple-choice.is-selected.dcg-choice-button:not(.is-submitted) { background: var(--multi-choice-background-selected, #3278c8); } .dcg-multiple-choice-playground .buttons-layout .dcg-multiple-choice.is-selected.dcg-choice-button.is-submitted { background: var(--multi-choice-background-submitted, rgba(112,112,112,0.8)); } .dcg-multiple-choice-playground .buttons-layout .dcg-multiple-choice.is-selected.dcg-choice-button.dcg-hovered:not(.is-submitted) { background: var(--multi-choice-box-selected-hover-background, #3278c8); } .dcg-multiple-choice-playground .buttons-layout .dcg-multiple-choice.is-selected.dcg-choice-button.dcg-hovered.is-submitted { background: var(--multi-choice-box-selected-hover-background, rgba(112,112,112,0.8)); } .dcg-multiple-choice-playground .buttons-layout .dcg-multiple-choice.is-selected.dcg-choice-button.dcg-hovered:not(.is-submitted):focus-visible, .dcg-multiple-choice-playground .buttons-layout .dcg-multiple-choice.is-selected.dcg-choice-button:not(.is-submitted):focus-visible { background: var(--multi-choice-box-selected-hover-background, #3278c8); -webkit-box-shadow: var(--multi-choice-box-shadow-selected-focus-visible, 0 0 0 0.125em #fff, 0 0 0 0.3125em var(--amp-focus-color, #9c0d63), 0 0.25em 0 #80b4f1); box-shadow: var(--multi-choice-box-shadow-selected-focus-visible, 0 0 0 0.125em #fff, 0 0 0 0.3125em var(--amp-focus-color, #9c0d63), 0 0.25em 0 #80b4f1); } .dcg-multiple-choice-playground .buttons-layout .dcg-multiple-choice.is-selected.dcg-choice-button.dcg-hovered.is-submitted:focus-visible, .dcg-multiple-choice-playground .buttons-layout .dcg-multiple-choice.is-selected.dcg-choice-button.is-submitted:focus-visible { background: var(--multi-choice-box-selected-hover-background, rgba(112,112,112,0.8)); -webkit-box-shadow: var(--multi-choice-box-shadow-selected-focus-visible, 0 0 0 0.125em #fff, 0 0 0 0.3125em var(--amp-focus-color, #9c0d63), 0 0.25em 0 #80b4f1); box-shadow: var(--multi-choice-box-shadow-selected-focus-visible, 0 0 0 0.125em #fff, 0 0 0 0.3125em var(--amp-focus-color, #9c0d63), 0 0.25em 0 #80b4f1); } .dcg-multiple-choice-playground .buttons-layout .dcg-multiple-choice:focus-visible { -webkit-box-shadow: var(--multi-choice-box-shadow-selected-focus-visible, 0 0 0 0.125em #fff, 0 0 0 0.3125em var(--amp-focus-color, #9c0d63), 0 0.25em 0 #80b4f1); box-shadow: var(--multi-choice-box-shadow-selected-focus-visible, 0 0 0 0.125em #fff, 0 0 0 0.3125em var(--amp-focus-color, #9c0d63), 0 0.25em 0 #80b4f1); } .dcg-multiple-choice-playground .buttons-layout .dcg-multiple-choice.btn:not(.btn-multipurpose) { height: auto; line-height: 1.5em; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .dcg-multiple-choice-playground .buttons-layout .dcg-multiple-choice.btn.btn-multipurpose { height: auto; line-height: calc(1.6em - 2px); } .dcg-multiple-choice-playground .buttons-layout .dcg-multiple-choice.btn.btn-multipurpose .dcg-calculator-api-container .dcg-mq-math-mode { font-weight: var(--multi-choice-font-weight); } .dcg-multiple-choice-playground .buttons-layout .dcg-multiple-choice.btn.btn-multipurpose .dcg-calculator-api-container .dcg-mq-math-mode .dcg-mq-fraction { vertical-align: var(--multi-choice-button-fraction-vertical-align, -0.4em); } .layout-top-student-view:not(.two-column) .buttons-layout { text-align: center; } /* src/js/activitybuilder/components/multiple-choice/playground/choice.styl */ .dcg-multiple-choice.is-submitted { color: #666; } .dcg-multiple-choice .amplify-radio-btn { line-height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .dcg-multiple-choice:not(.is-selected):not(.is-selectable) { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); cursor: default; } .dcg-multiple-choice:not(.is-selected):not(.is-selectable) > * { cursor: default; } .amp-styles .dcg-multiple-choice .rhythm-checkbox, .amp-styles .dcg-multiple-choice .rhythm-radio { height: auto; } /* src/js/activitybuilder/components/multiple-choice/playground/explain-view.styl */ .multiple-choice-explain-view { margin: 0 auto; } .multiple-choice-explain-view .dcg-explain-your-answer { -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; position: relative; width: 100%; } .multiple-choice-explain-view .explain-text { margin-bottom: 10px; font-size: 120%; display: inline-block; max-width: calc(100% - 30px); } .multiple-choice-explain-view .capture-snapshot-container { position: absolute; top: -20px; right: 0; } /* src/js/activitybuilder/components/multiple-choice/playground/grid-layout.styl */ .dcg-multiple-choice-playground .grid-layout { line-height: 0; margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * var(--multi-choice-tile-grid-margin-unit, -1)); } .dcg-multiple-choice-playground .grid-layout.grid-cols-3 { display: inline-block; } .dcg-multiple-choice-playground .grid-layout.grid-cols-3 .dcg-multiple-choice { width: calc((100% - var(--multi-choice-tile-gap, 0px) * 2) / 3); } .dcg-multiple-choice-playground .grid-layout.grid-cols-3 .dcg-multiple-choice:nth-child(3n + 1), .dcg-multiple-choice-playground .grid-layout.grid-cols-3 .dcg-multiple-choice:nth-child(3n + 2) { margin-right: var(--multi-choice-tile-gap, unset); } .dcg-multiple-choice-playground .grid-layout.grid-cols-3 .dcg-multiple-choice:nth-child(3n + 3):not(:last-child) { margin-bottom: var(--multi-choice-tile-gap, unset); } .dcg-multiple-choice-playground .grid-layout.grid-cols-2 { display: inline-block; } .dcg-multiple-choice-playground .grid-layout.grid-cols-2 .dcg-multiple-choice { width: calc((100% - var(--multi-choice-tile-gap, 0px)) / 2); } .dcg-multiple-choice-playground .grid-layout.grid-cols-2 .dcg-multiple-choice:nth-child(2n + 1) { margin-right: var(--multi-choice-tile-gap, unset); } .dcg-multiple-choice-playground .grid-layout.grid-cols-2 .dcg-multiple-choice:nth-child(2n + 2):not(:last-child) { margin-bottom: var(--multi-choice-tile-gap, unset); } .dcg-multiple-choice-playground .grid-layout.grid-cols-4 { display: inline-block; } .dcg-multiple-choice-playground .grid-layout.grid-cols-4 .dcg-multiple-choice { width: 25%; } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice { display: inline-block; position: relative; padding: var(--multi-choice-tile-card-spacing, 11px); } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice.is-checkbox .dcg-choice-image:not(.text-only-card) .dcg-choice-grid-text { position: absolute; top: var(--multi-choice-tile-grid-text-checkbox-position-top, 5px); left: var(--multi-choice-tile-grid-text-checkbox-position-left, 5px); right: var(--multi-choice-tile-grid-text-checkbox-position-right, 5px); } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice .dcg-choice-grid-text { position: absolute; top: var(--multi-choice-tile-grid-text-position-top, 5px); left: var(--multi-choice-tile-grid-text-position-left, 5px); right: var(--multi-choice-tile-grid-text-position-right, 5px); padding: 3px 6px; font-weight: var(--multi-choice-tile-font-weight); color: var(--multi-choice-tile-font-color, #3b3b3b); text-shadow: calc(1px * -1) calc(1px * -1) 0 #fff, calc(1px * -1) 1px 0 #fff, 1px calc(1px * -1) 0 #fff, 1px 1px 0 #fff, 0 calc(1px * -1) 0 #fff, 0 1px 0 #fff, 1px 0 0 #fff, calc(1px * -1) 0 0 #fff; line-height: var(--multi-choice-tile-line-height, 110%); } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice .dcg-choice-grid-text .dcg-calculator-api-container { vertical-align: middle; } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice .dcg-choice-grid-text .dcg-mq-math-mode { font-weight: var(--multi-choice-tile-font-weight); max-width: 100%; overflow-x: auto; overflow-y: hidden; } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice.mc-tile { min-width: 2em; } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice .mc-tile-btn { text-wrap: wrap; word-break: break-word; font-weight: var(--multi-choice-tile-font-weight); } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice .mc-tile-btn > div { width: 100%; height: 100%; } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice .mc-tile-btn > div .dcg-choice-image { width: 100%; height: 100%; border-radius: 0.53em; background-repeat: no-repeat; background-position: center; background-size: contain; } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice .mc-tile-btn > div .dcg-choice-image .dcg-choice-grid-text { line-height: var(--multi-choice-tile-line-height); text-shadow: calc(1px * -1) calc(1px * -1) 0 #fff, calc(1px * -1) 1px 0 #fff, 1px calc(1px * -1) 0 #fff, 1px 1px 0 #fff, 0 calc(1px * -1) 0 #fff, 0 1px 0 #fff, 1px 0 0 #fff, calc(1px * -1) 0 0 #fff; } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice .mc-tile-btn .dcg-choice-image { text-align: left; } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice .mc-tile-btn .dcg-choice-image.text-only-card .dcg-choice-grid-text { text-align: center; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); line-height: var(--multi-choice-tile-line-height); text-shadow: none; } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice .mc-tile-btn .dcg-choice-image.text-only-card .dcg-choice-grid-text .dcg-calculator-api-container { font-weight: var(--multi-choice-tile-font-weight); line-height: 1em; } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice .dcg-choice-image-container { width: 100%; height: 0; padding-bottom: 100%; position: relative; border: 2px solid transparent; } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice .dcg-choice-image-container .dcg-choice-image { background-size: contain; background-repeat: no-repeat; background-position: center center; border: var(--border-width-primary, 1px) solid var(--border-color-primary, #e2e2e2); -webkit-box-shadow: 0 var(--box-shadow-width-bottom) var(--multi-choice-box-shadow-bottom-color); box-shadow: 0 var(--box-shadow-width-bottom) var(--multi-choice-box-shadow-bottom-color); border-radius: var(--border-radius-medium, 0.1875em); padding-bottom: calc(100% - var(--multi-choice-box-padding-bottom, 2px)); } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice .dcg-choice-image-container .dcg-choice-image.text-only-card .dcg-choice-image { max-width: 200px; } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice .dcg-choice-image-container .dcg-choice-image.text-only-card .dcg-choice-grid-text { padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem); color: var(--multi-choice-tile-font-color, #3b3b3b); position: absolute; top: 50%; text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice .dcg-choice-image-container .dcg-choice-image.polygraph-choice-placeholder { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; background-color: #e2e2e2; } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice .dcg-choice-image-container .correctness-indicator { position: absolute; right: 6px; bottom: 6px; } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice.dcg-hovered.is-selectable:not(.is-selected) .dcg-choice-image-container .dcg-choice-image { -webkit-box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #9c0d63; box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #9c0d63; } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice.dcg-depressed.is-selectable:not(.is-selected) .dcg-choice-image-container .dcg-choice-image { -webkit-box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #9c0d63; box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #9c0d63; } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice.dcg-depressed.is-selectable:not(.is-selected) .card-checkmark { color: var(--multi-choice-checkmark-color-depressed, #fff); border-color: var(--multi-choice-checkmark-border-color-depressed, #9c0d63); background-color: var(--multi-choice-checkbox-background-depressed, #9c0d63); border-radius: 0.1875em; } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice.is-selected .mc-tile-btn { color: #3b3b3b; border: 3px solid #0069e4; -webkit-box-shadow: 0 0.25em 0 #0069e4, 0 calc(1px + 0.25em) 3px rgba(0,0,0,0.07), 0 calc(1px + 0.25em) 2px rgba(0,0,0,0.12); box-shadow: 0 0.25em 0 #0069e4, 0 calc(1px + 0.25em) 3px rgba(0,0,0,0.07), 0 calc(1px + 0.25em) 2px rgba(0,0,0,0.12); } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice.is-selected .mc-tile-btn:focus-visible { -webkit-box-shadow: var(--multi-choice-box-shadow-selected-focus-visible); box-shadow: var(--multi-choice-box-shadow-selected-focus-visible); } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice.is-selected .dcg-choice-image-container .dcg-choice-image { -webkit-box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #9c0d63; box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #9c0d63; } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice.is-selected .card-checkmark { color: var(--multi-choice-checkmark-color-selected, rgba(255,255,255,0.9)); border-color: var(--multi-choice-checkmark-border-color-selected, #9c0d63); background-color: var(--multi-choice-checkbox-background-selected, #9c0d63); border-radius: 0.1875em; } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice.is-selected.is-submitted .dcg-choice-image-container .dcg-choice-image { border: var(--border-width-primary, 1px) solid var(--multi-choice-border-color-submitted, #999); -webkit-box-shadow: 0 0 0 var(--box-shadow-width, 3px) var(--multi-choice-border-color-submitted, #999); box-shadow: 0 0 0 var(--box-shadow-width, 3px) var(--multi-choice-border-color-submitted, #999); } .dcg-multiple-choice-playground .grid-layout .dcg-multiple-choice.is-selected.is-submitted .card-checkmark { color: var(--multi-choice-checkmark-color-submitted, rgba(153,153,153,0.9)); } .dcg-multiple-choice-playground .grid-layout .card-checkmark { position: absolute; bottom: unset; top: var(--multi-choice-tile-checkbox-position-top, 5px); right: var(--multi-choice-tile-checkbox-position-right, 5px); border: var(--multi-choice-tile-checkbox-border); border-radius: var(--multi-choice-checkbox-border-radius); background-color: var(--multi-choice-checkbox-background-color); color: var(--multi-choice-checkmark-color, transparent); font-size: 1rem; width: var(--multi-choice-tile-checkbox-width, unset); height: var(--multi-choice-tile-checkbox-height, unset); } .dcg-layout-column.one-third .dcg-multiple-choice-playground .grid-layout.grid-cols-3 { display: inline-block; } .dcg-layout-column.one-third .dcg-multiple-choice-playground .grid-layout.grid-cols-3 .dcg-multiple-choice { width: calc(100% / 3); } .dcg-layout-column.one-third .dcg-multiple-choice-playground .grid-layout.grid-cols-3 .dcg-multiple-choice:nth-child(3n + 1), .dcg-layout-column.one-third .dcg-multiple-choice-playground .grid-layout.grid-cols-3 .dcg-multiple-choice:nth-child(3n + 2) { margin-right: unset; } .dcg-layout-column.one-third .dcg-multiple-choice-playground .grid-layout.grid-cols-3 .dcg-multiple-choice:nth-child(3n + 3):not(:last-child) { margin-bottom: unset; } /* src/js/activitybuilder/components/multiple-choice/playground/list-layout.styl */ .dcg-multiple-choice-playground .dcg-list-layout .amplify-radio-btn label { line-height: 1.35rem; } .dcg-multiple-choice-playground .dcg-list-layout .dcg-multiple-choice { display: block; font-size: var(--font-size-default); font-weight: var(--multi-choice-font-weight); clear: both; padding: var(--multi-choice-list-button-padding, calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0); } .dcg-multiple-choice-playground .dcg-list-layout .dcg-multiple-choice .dcg-choice-image-container { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .dcg-multiple-choice-playground .dcg-list-layout .dcg-multiple-choice .dcg-choice-image-container { width: 125px; height: 125px; border: 1px solid #e9e9e9; border-radius: 0.1875em; margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); position: relative; } .dcg-multiple-choice-playground .dcg-list-layout .dcg-multiple-choice .dcg-choice-image-container .dcg-choice-image { height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center center; border-radius: 0.1875em; } .dcg-multiple-choice-playground .dcg-list-layout .dcg-multiple-choice .dcg-choice-image-container .loading-message { font-size: 110%; } /* src/js/activitybuilder/components/multiple-choice/playground/view.styl */ .dcg-multiple-choice-playground { width: 100%; margin: 0 auto 15px; position: relative; } .dcg-multiple-choice-playground.segmented-above-graph-with-sketch { margin-bottom: 0; } .dcg-multiple-choice-playground.segmented-above-graph-with-sketch .choices-layout { padding-bottom: 0; } .dcg-multiple-choice-playground .right-submit-button { float: right; margin: 6px 0 10px; } .dcg-multiple-choice-playground .submit-container { text-align: right; } .dcg-multiple-choice-playground .dcg-multiple-choice { position: relative; } .dcg-multiple-choice-playground .dcg-multiple-choice .dcg-mq-math-mode { cursor: pointer; } .dcg-multiple-choice-playground .dcg-instruction-prompt { color: var(--font-color-default, #666); font-size: var(--font-size-default, 90%); font-style: var(--multi-choice-instruction-font-style, italic); margin-bottom: 10px; } .dcg-multiple-choice-playground .choices-wrapper { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin-bottom: var(--multi-choice-wrapper-margin-bottom, calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2)); position: relative; } .dcg-multiple-choice-playground .choices-wrapper.left { -webkit-box-direction: reverse; -moz-box-direction: reverse; -o-box-direction: reverse; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .dcg-multiple-choice-playground .choices-wrapper.edit-disabled { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); } .dcg-multiple-choice-playground .choices-wrapper.edit-disabled .dcg-multiple-choice { opacity: 1 !important; -ms-filter: none !important; filter: none !important; } .dcg-multiple-choice-playground .choices-wrapper .choices-layout { max-width: 100%; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; } .dcg-multiple-choice-playground .choices-wrapper .choices-layout.dcg-segmented-control-layout .dcg-segmented-control-btn, .dcg-multiple-choice-playground .choices-wrapper .choices-layout.dcg-segmented-control-grid .dcg-segmented-control-btn { line-height: 1.5em; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .layout-top-student-view:not(.two-column):not(.fullscreen-layout) .dcg-multiple-choice-playground { margin: 0 auto; } .layout-top-student-view:not(.two-column):not(.fullscreen-layout) .dcg-multiple-choice-playground .dcg-instruction-prompt { text-align: center; } /* src/js/activitybuilder/components/penny-dragging-widget/miniscreen/view.styl */ .penny-circle-widget-miniscreen { width: 100%; height: 90%; background: url("/fingerprinted/static/classroom-assets/img/pennycircle/pennies_miniscreen-e262dc1abfff64f01c23543e7cc7c61674d4a071-a.png") no-repeat center center; background-size: contain; } /* src/js/activitybuilder/components/penny-dragging-widget/playground/view.styl */ .penny-widget-playground { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; } .penny-widget-playground canvas { margin-top: 10px; } .penny-widget-playground .canvas-container { width: 100%; min-height: 500px; } .penny-widget-playground .size-controls { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; height: 2.5em; } .penny-widget-playground .size-stepper { border-radius: 0; float: left; } .penny-widget-playground .size-stepper:first-of-type { border-top-left-radius: 0.1875em; border-bottom-left-radius: 0.1875em; } .penny-widget-playground .size-stepper:last-of-type { border-top-right-radius: 0.1875em; border-bottom-right-radius: 0.1875em; } .penny-widget-playground .size-stepper .rhythm-icon { margin: 0; } .penny-widget-playground .size-measure { float: left; height: 2.5em; line-height: 2.5em; border: 1px solid #bdbdbd; border-right: 0; border-left: 0; padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem); width: 140px; text-align: center; } .penny-dragging-widget-loading { text-align: center; } @media screen and (min-width: 1500px) { .penny-widget-playground .size-measure { min-width: 150px; } } /* src/js/activitybuilder/components/polygraph/miniscreen/view.styl */ .polygraph-miniscreen .polygraph-miniscreen-card-grid { position: absolute; top: 35px; left: 0; bottom: 0; right: 0; } .polygraph-miniscreen .polygraph-miniscreen-card-grid .polygraph-miniscreen-card-row { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; margin-bottom: 2px; } .polygraph-miniscreen .polygraph-miniscreen-card-grid .polygraph-miniscreen-card-row .polygraph-miniscreen-card { border: 1px solid #bdbdbd; border-radius: 2px; width: 9px; height: 9px; margin-left: 2px; } .alp-preview-miniscreen .polygraph-miniscreen .polygraph-miniscreen-card-grid .polygraph-miniscreen-card-row { margin-bottom: 3px; } .alp-preview-miniscreen .polygraph-miniscreen .polygraph-miniscreen-card-grid .polygraph-miniscreen-card-row .polygraph-miniscreen-card { border-radius: 3px; width: 20px; height: 20px; margin-left: 3px; } /* src/js/activitybuilder/components/polygraph/playground/game/game-end-confirmation-modal.styl */ .game-end-confirmation-modal .game-end-confirmation-modal-contents { padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .game-end-confirmation-modal .game-end-confirmation-modal-actions { gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } /* src/js/activitybuilder/components/polygraph/playground/game/game.styl */ .ab-polygraph-game { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 1; -ms-flex: 1 1; flex: 1 1; width: 100%; } .ab-polygraph-game .ab-polygraph-game-contents { width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .ab-polygraph-game .left-column, .ab-polygraph-game .pick-target-container { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 1 550px; -ms-flex: 0 1 550px; flex: 0 1 550px; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .ab-polygraph-game .right-column { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 300px; -ms-flex: 0 0 300px; flex: 0 0 300px; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .ab-polygraph-game .left-column, .ab-polygraph-game .right-column, .ab-polygraph-game .pick-target-container { position: relative; display: inline-block; height: 550px; } .ab-polygraph-game .left-column .game-status, .ab-polygraph-game .right-column .game-status, .ab-polygraph-game .pick-target-container .game-status { width: 100%; margin: 0 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) 0; color: #3b3b3b; } .ab-polygraph-game .pick-target-container { text-align: center; } .ab-polygraph-game .pick-target-container .pick-target-header { text-align: center; } .ab-polygraph-game .pick-target-container .ab-polygraph-skip-practice { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) 0; } @media screen and (max-width: 870px) { .ab-polygraph-game .pick-target-container .pick-target-header .pick-target-instructions { display: block; margin-bottom: 5px; } .ab-polygraph-game .pick-target-container .pick-target-header .action-pick-target { margin-left: 0; } .ab-polygraph-game .left-column { width: calc(100% - 300px); } } @media screen and (max-width: 750px) { .ab-polygraph-game .ab-polygraph-game-contents .left-column { width: calc(100% - 250px); } .ab-polygraph-game .ab-polygraph-game-contents .right-column { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 250px; -ms-flex: 0 0 250px; flex: 0 0 250px; height: 480px; } .ab-polygraph-game .ab-polygraph-game-contents .right-column .ab-polygraph-chat-widget { width: 250px; } } @media screen and (max-width: 650px) { .ab-polygraph-game { margin-top: 0; position: absolute; top: 55px; left: 0; bottom: 0; right: 0; } .ab-polygraph-game .ab-polygraph-skip-practice { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .ab-polygraph-game .ab-polygraph-game-contents { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 100%; } .ab-polygraph-game .ab-polygraph-game-contents .left-column { width: 100%; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; height: unset; padding: 10px; } .ab-polygraph-game .ab-polygraph-game-contents .right-column { justify-self: flex-end; padding-bottom: 0; margin: 0; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; max-height: 40%; min-height: 210px; } .ab-polygraph-game .ab-polygraph-game-contents .right-column .game-status { display: none; } .ab-polygraph-game .ab-polygraph-game-contents .right-column .ab-polygraph-chat-widget { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; } } /* src/js/activitybuilder/components/polygraph/playground/game/idle-modal.styl */ .idle-modal .idle-modal-contents { min-width: 500px; padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .idle-modal .idle-modal-actions { text-align: right; } /* src/js/activitybuilder/components/polygraph/playground/game/partner-idle-modal.styl */ .partner-idle-modal-contents { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .partner-idle-modal-contents .partner-idle-image { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 150px; -ms-flex: 0 0 150px; flex: 0 0 150px; width: 150px; margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) 0 0; } .partner-idle-modal-contents .partner-idle-image img { height: 100%; width: 100%; } .partner-idle-modal-contents .partner-idle-modal-right-content .partner-idle-message { display: block; } .partner-idle-modal-contents .partner-idle-modal-right-content .partner-idle-modal-actions { text-align: right; margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); } @media screen and (max-width: 575px) { .partner-idle-modal-contents { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .partner-idle-modal-contents .partner-idle-image { margin-right: 0; margin-bottom: 20px; } } /* src/js/activitybuilder/components/polygraph/playground/game/result-modal.styl */ .polygraph-result-modal .polygraph-result-modal-contents { padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .polygraph-result-modal .ab-polygraph-card-view { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 250px; -ms-flex: 0 0 250px; flex: 0 0 250px; height: 250px; width: 250px; margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) 0 0; } .polygraph-result-modal .result-details { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .polygraph-result-modal .result-details .result-description { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; max-width: 500px; } .polygraph-result-modal .result-details i.win { color: #00866b; } .polygraph-result-modal .result-details i.loss { color: #db2e00; } .polygraph-result-modal .result-details .header-row { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3) 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; } .polygraph-result-modal .result-details .win-title { margin: 0; } .polygraph-result-modal .result-details .action-buttons { text-align: right; } @media screen and (max-width: 575px) { .polygraph-result-modal-contents { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .polygraph-result-modal-contents .ab-polygraph-card-view { margin-right: 0; margin-bottom: $result-modal-spacing; height: 200px; width: 200px; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 200px; -ms-flex: 0 0 200px; flex: 0 0 200px; } } /* src/js/activitybuilder/components/polygraph/playground/home/home.styl */ .ab-polygraph-card-view { height: 100%; width: 100%; overflow: hidden; cursor: default; position: relative; border-radius: 5px; border: 2px solid #bdbdbd; } .ab-polygraph-card-view .polygraph-card-error { position: absolute; bottom: 3px; right: 5px; } .ab-polygraph-card-view .polygraph-card-error .pillow-icon-error.error-color { color: #fa824c; } .ab-polygraph-card-view .polygraph-card-error .pillow-icon-error.warning-color { color: #666; } .ab-polygraph-card-view.loading { background: #e2e2e2; -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; } .ab-polygraph-card-view .image-polygraph-card { height: 100%; width: 100%; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: block; } .ab-polygraph-home-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 100%; } .ab-polygraph-home-container .toast-container:not(.hidden) { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 35px; padding: 20px; } .ab-polygraph-home-container .toast-container:not(.hidden) .ab-polygraph-preview-warning-toast.toast { position: relative; } .ab-polygraph-home-container .toast-container:not(.hidden) .ab-polygraph-preview-warning-toast.toast .pillow-icon-error { color: #f37321; } .toast-container:not(.hidden) + .ab-polygraph-home { height: calc(100% - 35px); } .ab-polygraph-home { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; width: 100%; height: 100%; max-height: 600px; max-width: 1000px; padding: 10px 20px; } .ab-polygraph-home .ab-polygraph-preview-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; width: 50%; height: 100%; margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .ab-polygraph-home .ab-polygraph-preview-container .ab-polygraph-grid-preview { width: 100%; height: 100%; } .ab-polygraph-home .ab-polygraph-preview-container .ab-polygraph-grid-preview .fixed-aspect-container { margin-top: 0; } .ab-polygraph-home .ab-polygraph-landing-content { width: 50%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-cta-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background: #ebf2fa; border-radius: 0.1875em; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 0 calc(calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) / 2); min-width: 398px; overflow: hidden; } .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-cta-container .cta-image { max-width: 250px; } .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-cta-container .cta-image img { width: 100%; margin-bottom: -5px; } .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-cta-container .h3 { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: center; } .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-cta-container .start-game-btn { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; } .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-cta-container .start-game-btn .rhythm-icon { margin: 0 0 0 0.25em; } .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-help-center-link { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); color: #3b3b3b; } .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-help-center-link .rhythm-icon { margin: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-status-container { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-status-container .completed-polygraph-section { margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-status-container .completed-polygraph-section .completed-section-title { color: #333; margin-bottom: 5px; } .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-status-container .completed-polygraph-section .completed-section-cards { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-status-container .completed-polygraph-section .completed-section-cards .preview-miniscreen-container { height: 120px; } .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-status-container .completed-polygraph-section .completed-section-cards .preview-miniscreen-container .section-annotation-wrapper, .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-status-container .completed-polygraph-section .completed-section-cards .preview-miniscreen-container .section-annotation-wrapper .miniscreen { top: 0; border-color: #bdbdbd; } .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-status-container .completed-polygraph-section .completed-section-cards .preview-miniscreen-container .section-annotation-wrapper .section-annotation-border { display: none; } .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-status-container .completed-polygraph-section .completed-section-cards .preview-miniscreen-container .miniscreen.dcg-hovered { border-color: #3278c8; } .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-status-container .completed-polygraph-section .completed-section-cards .preview-miniscreen-container .miniscreen.dcg-depressed { border-color: #004f9b; } .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-status-container .completed-polygraph-section .completed-section-cards .completed-game-card { height: 70px; width: 70px; overflow: hidden; position: relative; } .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-status-container .completed-polygraph-section .completed-section-cards .completed-game-card .completed-game-result { position: absolute; right: 0px; bottom: -6px; color: #3b3b3b; } .ab-polygraph-home .ab-polygraph-landing-content .ab-polygraph-status-container .completed-polygraph-section .completed-section-cards .completed-question-card { height: 120px; width: 156px; } @media screen and (max-width: 700px) { .ab-polygraph-home .ab-polygraph-preview-container .ab-polygraph-grid-preview .ab-polygraph-card-view { min-width: 25px; min-height: 25px; } } @media screen and (max-width: 650px) { .ab-polygraph-home { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; max-height: 100%; } .ab-polygraph-home.has-completed-items .ab-polygraph-preview-container { display: none; } .ab-polygraph-home:not(.has-completed-items) .ab-polygraph-preview-container { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -o-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) 0 0; padding-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); width: 100%; } .ab-polygraph-home .ab-polygraph-landing-content { width: 100%; } } /* src/js/activitybuilder/components/polygraph/playground/interstitial-questions/question-view.styl */ .interstitial-question-contents { height: 100%; max-width: 100%; position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .interstitial-question-contents .gray-header-background { width: 100%; height: 55px; background: #f7f7f7; border-bottom: 1px solid #eee; } .interstitial-question-contents .interstitial-question { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 1; -ms-flex: 1 1; flex: 1 1; position: relative; } /* src/js/activitybuilder/components/polygraph/playground/pairing/waiting-for-partner.styl */ .ab-polygraph-waiting-for-partner { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 1; -ms-flex: 1 1; flex: 1 1; width: 100%; padding: 0 20px; max-width: 1000px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .ab-polygraph-waiting-for-partner .ab-polygraph-grid-preview { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .ab-polygraph-waiting-for-partner .ab-polygraph-grid-preview .ab-polygraph-card-view { min-width: 25px; min-height: 25px; } .ab-polygraph-waiting-for-partner .game-preview { margin-top: 40px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -moz-user-select: -moz-none; width: 100%; height: 100%; } .ab-polygraph-waiting-for-partner .game-preview .game-preview-right-content { margin-left: 20px; width: 400px; } .ab-polygraph-waiting-for-partner .game-preview .waiting-animation-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .ab-polygraph-waiting-for-partner .game-preview .waiting-animation-container .image-container { max-width: 150px; } .ab-polygraph-waiting-for-partner .game-preview .waiting-animation-container .image-container .partner-waiting-image { width: 100%; } .ab-polygraph-waiting-for-partner .game-preview .waiting-animation-container .loading-title { font-size: 160%; } .ab-polygraph-waiting-for-partner .game-preview .other-student-questions-title { margin-top: 20px; } .ab-polygraph-waiting-for-partner .game-preview .other-student-questions { margin-top: 20px; } .ab-polygraph-waiting-for-partner .game-preview .other-student-question { border-left: 1px solid #bdbdbd; -webkit-animation: fadeInAndShift 600ms; -moz-animation: fadeInAndShift 600ms; -o-animation: fadeInAndShift 600ms; -ms-animation: fadeInAndShift 600ms; animation: fadeInAndShift 600ms; min-height: 40px; padding: 5px 0 5px 15px; -webkit-transition: 0.3s opacity; -moz-transition: 0.3s opacity; -o-transition: 0.3s opacity; -ms-transition: 0.3s opacity; transition: 0.3s opacity; } .ab-polygraph-waiting-for-partner .game-preview .other-student-question .other-student-name { text-transform: uppercase; color: #999; font-size: 90%; line-height: 2em; } .ab-polygraph-waiting-for-partner .game-preview .other-student-question .other-student-question-text { clear: both; margin-bottom: 15px; overflow-wrap: break-word; } .ab-polygraph-waiting-for-partner .game-preview .partner-responses-placeholder { font-size: 90%; color: #999; margin-top: 20px; text-align: center; } .ab-polygraph-waiting-for-partner .toast-container:not(.hidden) + .game-preview { margin-top: 60px; } .ab-polygraph-waiting-for-partner .ab-polygraph-waiting-toast .pillow-icon-error { color: #fa824c; } @media screen and (max-width: 760px) { .ab-polygraph-waiting-for-partner .ab-polygraph-grid-preview { display: none; } .ab-polygraph-waiting-for-partner .game-preview .game-preview-right-content { margin-right: 0; width: 100%; } } @-moz-keyframes fadeInAndShift { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); margin-bottom: -40px; } 50% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); margin-bottom: 0; } 100% { opacity: 1; -ms-filter: none; filter: none; margin-bottom: 0; } } @-webkit-keyframes fadeInAndShift { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); margin-bottom: -40px; } 50% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); margin-bottom: 0; } 100% { opacity: 1; -ms-filter: none; filter: none; margin-bottom: 0; } } @-o-keyframes fadeInAndShift { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); margin-bottom: -40px; } 50% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); margin-bottom: 0; } 100% { opacity: 1; -ms-filter: none; filter: none; margin-bottom: 0; } } @keyframes fadeInAndShift { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); margin-bottom: -40px; } 50% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); margin-bottom: 0; } 100% { opacity: 1; -ms-filter: none; filter: none; margin-bottom: 0; } } /* src/js/activitybuilder/components/polygraph/playground/polygraph-student-header.styl */ .polygraph-student-header { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 55px; -ms-flex: 0 0 55px; flex: 0 0 55px; background: #3278c8; position: relative; color: #fff; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2.5); width: 100%; } .polygraph-student-header .polygraph-header-back-arrow { color: #fff; } .polygraph-student-header .polygraph-header-back-arrow:hover { color: #fff; } .polygraph-student-header .polygraph-header-content-left { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .polygraph-student-header .polygraph-header-content-left .leave-message { margin: 0 0 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem); white-space: nowrap; } .polygraph-student-header .polygraph-header-content-left, .polygraph-student-header .polygraph-header-content-right { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 1 calc(50% - 155px); -ms-flex: 1 1 calc(50% - 155px); flex: 1 1 calc(50% - 155px); } .polygraph-student-header .polygraph-header-content-right { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .polygraph-student-header .polygraph-header-content-right .action-pick-target { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .polygraph-student-header .polygraph-header-content-right .action-pick-target .rhythm-icon { margin: 0 0 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .polygraph-student-header .polygraph-header-content-right .dcg-tooltip-hit-area-container { line-height: unset; } .polygraph-student-header .polygraph-header-content-right .btn-teal { background: #49c5b1; border: none; line-height: unset; -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.15); box-shadow: 0 0 3px rgba(0,0,0,0.15); } .polygraph-student-header .polygraph-header-content-right .btn-teal.dcg-hovered:not(.disabled) { background: #15b097; } .polygraph-student-header .polygraph-header-content-right .btn-teal.dcg-depressed:not(.disabled) { background: #129e87; -webkit-box-shadow: none; box-shadow: none; } .polygraph-student-header .polygraph-header-content-right .btn-teal.disabled { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .polygraph-student-header .polygraph-header-content-center { width: 310px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .polygraph-student-header .polygraph-header-content-center .centered-header-button { color: #fff; margin: 0 5px; } /* src/js/activitybuilder/components/polygraph/playground/translation/translation.styl */ .ab-polygraph-translation { height: 100%; width: 100%; padding: 10px; } /* src/js/activitybuilder/components/polygraph/playground/view.styl */ .ab-polygraph-playground { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background: #fff; } /* src/js/activitybuilder/components/polygraph/shared/card-grid.styl */ .ab-polygraph-cardgrid-container { position: relative; width: 100%; height: 100%; } .ab-polygraph-cardgrid { position: relative; width: 100%; height: 100%; } .ab-polygraph-cardgrid .card-row { position: absolute; width: 100%; height: 100%; } .ab-polygraph-cardgrid .polygraph-grid-card { position: absolute; z-index: 1; background-size: contain; background-repeat: no-repeat; background-color: #fff; width: 22.75%; height: 22.75%; cursor: default; -webkit-transition-property: top, left; -moz-transition-property: top, left; -o-transition-property: top, left; -ms-transition-property: top, left; transition-property: top, left; -webkit-transition-delay: 0.5s, 0.5s; -moz-transition-delay: 0.5s, 0.5s; -o-transition-delay: 0.5s, 0.5s; -ms-transition-delay: 0.5s, 0.5s; transition-delay: 0.5s, 0.5s; -webkit-transition-duration: 1.5s, 1.5s; -moz-transition-duration: 1.5s, 1.5s; -o-transition-duration: 1.5s, 1.5s; -ms-transition-duration: 1.5s, 1.5s; transition-duration: 1.5s, 1.5s; } .ab-polygraph-cardgrid .polygraph-grid-card .image-polygraph-card { border-radius: 0.1875em; } .ab-polygraph-cardgrid .polygraph-grid-card.polygraph-row-0 { top: 0; } .ab-polygraph-cardgrid .polygraph-grid-card.polygraph-row-1 { top: 25.75%; } .ab-polygraph-cardgrid .polygraph-grid-card.polygraph-row-2 { top: 51.5%; } .ab-polygraph-cardgrid .polygraph-grid-card.polygraph-row-3 { top: 77.25%; } .ab-polygraph-cardgrid .polygraph-grid-card.polygraph-col-0 { left: 0; } .ab-polygraph-cardgrid .polygraph-grid-card.polygraph-col-1 { left: 25.75%; } .ab-polygraph-cardgrid .polygraph-grid-card.polygraph-col-2 { left: 51.5%; } .ab-polygraph-cardgrid .polygraph-grid-card.polygraph-col-3 { left: 77.25%; } .ab-polygraph-cardgrid .polygraph-grid-card .populated-area { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .ab-polygraph-cardgrid .polygraph-grid-card.tappable:not(.selected-for-target):not(.is-target).dcg-hovered .ab-polygraph-card-view, .ab-polygraph-cardgrid .polygraph-grid-card.tappable:not(.selected-for-target):not(.is-target).dcg-depressed .ab-polygraph-card-view { border-color: #bdbdbd; } .ab-polygraph-cardgrid .polygraph-grid-card.tappable:not(.selected-for-target):not(.is-target) .ab-polygraph-card-view { cursor: pointer; } .ab-polygraph-cardgrid .polygraph-grid-card.selected-for-elimination .image-polygraph-card, .ab-polygraph-cardgrid .polygraph-grid-card.eliminated .image-polygraph-card { opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); } .ab-polygraph-cardgrid .polygraph-grid-card.selected-for-elimination.is-target, .ab-polygraph-cardgrid .polygraph-grid-card.eliminated.is-target { border-color: #db2e00; } .ab-polygraph-cardgrid .polygraph-grid-card.selected-for-elimination .elimination-preview-indicator i.icon-v2-close, .ab-polygraph-cardgrid .polygraph-grid-card.eliminated .elimination-preview-indicator i.icon-v2-close { -webkit-animation: 0.2s cardPulse; -moz-animation: 0.2s cardPulse; -o-animation: 0.2s cardPulse; -ms-animation: 0.2s cardPulse; animation: 0.2s cardPulse; } .ab-polygraph-cardgrid .polygraph-grid-card.eliminated .ab-polygraph-card-view { border-color: #e9e9e9; } .ab-polygraph-cardgrid .polygraph-grid-card.is-target, .ab-polygraph-cardgrid .polygraph-grid-card.selected-for-target { border: 4px solid #9c0d63; -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.35); box-shadow: 0 0 2px rgba(0,0,0,0.35); border-radius: 0.1875em; z-index: 1; -webkit-transform: scale(115%); -moz-transform: scale(115%); -o-transform: scale(115%); -ms-transform: scale(115%); transform: scale(115%); -webkit-transition: 0.3s -webkit-transform; -moz-transition: 0.3s -moz-transform; -o-transition: 0.3s -o-transform; -ms-transition: 0.3s -ms-transform; transition: 0.3s transform; } .ab-polygraph-cardgrid .polygraph-grid-card.is-target .ab-polygraph-card-view, .ab-polygraph-cardgrid .polygraph-grid-card.selected-for-target .ab-polygraph-card-view { border: none; } .ab-polygraph-cardgrid .polygraph-grid-card.is-target .ab-polygraph-card-view, .ab-polygraph-cardgrid .polygraph-grid-card.selected-for-target .ab-polygraph-card-view, .ab-polygraph-cardgrid .polygraph-grid-card.is-target .image-polygraph-card, .ab-polygraph-cardgrid .polygraph-grid-card.selected-for-target .image-polygraph-card { border-radius: 0px; } .ab-polygraph-cardgrid .polygraph-grid-card .elimination-preview-indicator { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; pointer-events: none; } .ab-polygraph-cardgrid .polygraph-grid-card .elimination-preview-indicator i.icon-v2-close { font-size: 3em; color: #a0a0a0; } .ab-polygraph-cardgrid .polygraph-grid-card .card-label { position: absolute; top: 2px; left: 4px; color: #a0a0a0; background-color: #fff; } @media screen and (max-width: 750px) { .ab-polygraph-cardgrid .polygraph-grid-card { width: 23.5%; height: 23.5%; } .ab-polygraph-cardgrid .polygraph-grid-card.polygraph-row-1 { top: 25.5%; } .ab-polygraph-cardgrid .polygraph-grid-card.polygraph-row-2 { top: 51%; } .ab-polygraph-cardgrid .polygraph-grid-card.polygraph-row-3 { top: 76.5%; } .ab-polygraph-cardgrid .polygraph-grid-card.polygraph-col-1 { left: 25.5%; } .ab-polygraph-cardgrid .polygraph-grid-card.polygraph-col-2 { left: 51%; } .ab-polygraph-cardgrid .polygraph-grid-card.polygraph-col-3 { left: 76.5%; } } @-moz-keyframes cardPulse { 0% { -webkit-transform: scale(0.9, 0.9); -moz-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } 50% { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 100% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } } @-webkit-keyframes cardPulse { 0% { -webkit-transform: scale(0.9, 0.9); -moz-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } 50% { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 100% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } } @-o-keyframes cardPulse { 0% { -webkit-transform: scale(0.9, 0.9); -moz-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } 50% { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 100% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes cardPulse { 0% { -webkit-transform: scale(0.9, 0.9); -moz-transform: scale(0.9, 0.9); -o-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); } 50% { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 100% { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } } /* src/js/activitybuilder/components/polygraph/shared/card-view.styl */ .ab-polygraph-card-view { height: 100%; width: 100%; overflow: hidden; cursor: default; position: relative; border-radius: 5px; border: 2px solid #bdbdbd; } .ab-polygraph-card-view .polygraph-card-error { position: absolute; bottom: 3px; right: 5px; } .ab-polygraph-card-view .polygraph-card-error .pillow-icon-error.error-color { color: #fa824c; } .ab-polygraph-card-view .polygraph-card-error .pillow-icon-error.warning-color { color: #666; } .ab-polygraph-card-view.loading { background: #e2e2e2; -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; } .ab-polygraph-card-view .image-polygraph-card { height: 100%; width: 100%; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: block; } /* src/js/activitybuilder/components/polygraph/shared/chat-widget.styl */ .ab-polygraph-chat-widget { width: 300px; border: 1px solid #bdbdbd; border-radius: 0.1875em; background: #fff; overflow: hidden; height: 100%; position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .ab-polygraph-chat-widget .chat-title.h5 { background-color: #e9e9e9; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 38px; -ms-flex: 0 0 38px; flex: 0 0 38px; line-height: 36px; border-bottom: 1px solid #bdbdbd; padding-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; margin: 0; position: relative; z-index: 2; } .ab-polygraph-chat-widget .chat-content { overflow-y: auto; padding: 0 5px; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 1; -ms-flex: 1 1; flex: 1 1; position: relative; } .ab-polygraph-chat-widget .chat-content .chat-log { overflow-x: hidden; } .ab-polygraph-chat-widget .chat-content .answer-options { text-align: center; } .ab-polygraph-chat-widget .chat-content .answer-options .buttons { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .ab-polygraph-chat-widget .chat-content .answer-options .buttons span[role='button'] { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .ab-polygraph-chat-widget .chat-content .chat-instructions { margin: 15px; padding: 10px; position: relative; color: #676767; font-style: italic; } .ab-polygraph-chat-widget .chat-content .chat-instructions .arrow { display: inline; } .ab-polygraph-chat-widget .chat-content .chat-instructions.bottomFixed { position: absolute; bottom: 0; } .ab-polygraph-chat-widget .chat-content .chat-instructions.active { -webkit-animation: fadePulse 0.3s; -moz-animation: fadePulse 0.3s; -o-animation: fadePulse 0.3s; -ms-animation: fadePulse 0.3s; animation: fadePulse 0.3s; text-align: left; } .ab-polygraph-chat-widget .chat-content .chat-instructions.active .msg { padding-left: 25px; } .ab-polygraph-chat-widget .chat-content .chat-instructions.direction-left .msg { padding-left: 40px; } .ab-polygraph-chat-widget .chat-content .chat-instructions.direction-left .arrow { width: 40px; position: absolute; bottom: 25px; left: 0; } .ab-polygraph-chat-widget .chat-content .chat-instructions.direction-down .arrow { height: 35px; position: absolute; bottom: 0; left: 0; } .ab-polygraph-chat-widget .chat-content .chat-instructions.direction-up .arrow { height: 35px; position: absolute; top: 0; left: 0; } .ab-polygraph-chat-widget .chat-content .chat-item { text-align: left; } .ab-polygraph-chat-widget .chat-content .chat-item .question { overflow-wrap: break-word; } .ab-polygraph-chat-widget .chat-content .chat-item .chat-question, .ab-polygraph-chat-widget .chat-content .chat-item .streaming-view { padding: 10px 10px 0 10px; } .ab-polygraph-chat-widget .chat-content .chat-item .streaming-view .dots .dot { display: inline-block; width: 6px; height: 6px; background: #3b3b3b; border-radius: 50%; -webkit-animation: loadingDot 3s infinite; -moz-animation: loadingDot 3s infinite; -o-animation: loadingDot 3s infinite; -ms-animation: loadingDot 3s infinite; animation: loadingDot 3s infinite; } .ab-polygraph-chat-widget .chat-content .chat-item .streaming-view .dots .dot:nth-child(2) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; -ms-animation-delay: 0.2s; animation-delay: 0.2s; } .ab-polygraph-chat-widget .chat-content .chat-item .streaming-view .dots .dot:nth-child(3) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; -ms-animation-delay: 0.4s; animation-delay: 0.4s; } .ab-polygraph-chat-widget .chat-content .chat-item .streaming-view .dots .dot + .dot { margin-left: 5px; } .ab-polygraph-chat-widget .chat-content .chat-item .chat-answer { padding-right: 10px; margin-top: 5px; margin-bottom: 5px; text-align: right; } .ab-polygraph-chat-widget .chat-content .chat-item .chat-answer .chat-answer-selected { text-transform: none; display: inline-block; } .ab-polygraph-chat-widget .chat-content .chat-item .eliminated-cards { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); margin: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) calc(var(--rhythm-unit-px, 12) / 16 * 1rem); text-align: center; } .ab-polygraph-chat-widget .chat-content .chat-item .eliminated-cards .eliminated-card { display: inline-block; width: 24px; height: 24px; border: 1px solid #bdbdbd; border-radius: 0.1875em; margin: 2px 1px 0; } .ab-polygraph-chat-widget .chat-cycle { margin: 10px 8px 5px 8px; } .ab-polygraph-chat-widget .chat-cycle.dcg-hovered { background: #f6f6f6; } .ab-polygraph-chat-widget .chat-cycle.dcg-depressed:not(.disabled) { background: #e9e9e9; } .ab-polygraph-chat-widget .chat-cycle.selectable.is-selected { background: #e9e9e9; } .ab-polygraph-chat-widget .chat-cycle.selectable.is-selected.selectable.dcg-hovered { background: #ddd; } .ab-polygraph-chat-widget .chat-cycle.selectable.is-selected.selectable.dcg-depressed { background: #bababa; } .ab-polygraph-chat-widget .chat-cycle.selectable.is-selected.selectable:focus-visible { background: #ddd; } .ab-polygraph-chat-widget .chat-student-view { pointer-events: none; } .ab-polygraph-chat-widget .chat-student-view [ontap] { cursor: default; } .ab-polygraph-chat-widget .chat-student-view.dcg-hovered { background-color: none; border: none; } .ab-polygraph-chat-widget .loading-skeletons .loading-skeleton { height: 38px; background: #e9e9e9; -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; border-radius: 5px; margin: 10px; } .ab-polygraph-chat-widget .loading-skeletons .loading-skeleton:first-of-type { width: 90%; } .ab-polygraph-chat-widget .loading-skeletons .loading-skeleton:nth-of-type(2) { width: 50%; } .ab-polygraph-chat-widget .loading-skeletons .loading-skeleton:nth-of-type(3) { width: 80%; } .ab-polygraph-chat-widget .chat-footer { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0; -ms-flex: 0 0; flex: 0 0; padding: 5px; width: 100%; } .ab-polygraph-chat-widget .chat-footer.has-content { border-top: 1px solid #bdbdbd; background: #f8f8f8; } .ab-polygraph-chat-widget .chat-footer .eliminate-button-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .ab-polygraph-chat-widget .chat-footer .eliminate-button-container span[role='button'] { width: 100%; text-align: center; } .ab-polygraph-chat-widget .chat-footer .review-container { text-align: center; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .ab-polygraph-chat-widget .chat-footer .review-container .btn { margin-top: 5px; display: block; } .ab-polygraph-chat-widget .chat-footer .chat-box { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; width: 100%; -webkit-box-align: end; -moz-box-align: end; -o-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .ab-polygraph-chat-widget .chat-footer .chat-box textarea { margin: 0; padding: 8px; line-height: 1.4em; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .ab-polygraph-chat-widget .chat-footer .chat-box textarea:disabled { background: transparent; } .ab-polygraph-chat-widget .chat-footer .chat-box .btn-blue { margin-left: 5px; } @media screen and (max-width: 650px) { .ab-polygraph-chat-widget { width: 100%; max-width: 100%; margin: 0; border-radius: 0; } .ab-polygraph-chat-widget .chat-content .chat-instructions { padding: 0; margin: 5px 10px; font-size: 90%; } .ab-polygraph-chat-widget .chat-content .chat-instructions .arrow { display: none; } .ab-polygraph-chat-widget .chat-content .chat-instructions.active { text-align: center; } .ab-polygraph-chat-widget .chat-content .chat-instructions.active .msg { padding-left: 0; } .ab-polygraph-chat-widget .chat-content .chat-instructions.direction-left .msg { padding-left: 0; } } @-moz-keyframes loadingDot { 0% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 16% { opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } 33% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes loadingDot { 0% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 16% { opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } 33% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-o-keyframes loadingDot { 0% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 16% { opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } 33% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes loadingDot { 0% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 16% { opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } 33% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } /* src/js/activitybuilder/components/polypad/miniscreen/view.styl */ .dcg-polypad-miniscreen.loading { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .dcg-polypad-miniscreen:not(.half-width-mode) { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border-radius: 4px; } .dcg-polypad-miniscreen .icon-container { margin: 0 auto; font-size: 64px; opacity: 0.2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; filter: alpha(opacity=20); } .dcg-polypad-miniscreen .full-width-image { max-height: 100%; max-width: 100%; margin: auto; } .dcg-polypad-miniscreen.half-width-mode { position: relative; line-height: 0; width: 100%; height: 0; padding-bottom: 100%; } .dcg-polypad-miniscreen.half-width-mode .half-width-image { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; border: 1px solid #e2e2e2; border-radius: 3px; } .dcg-polypad-miniscreen.half-width-mode .miniscreen-polypad-image { border: 1px solid #bdbdbd; border-radius: 5px; } .navigation-miniscreen-container .dcg-polypad-miniscreen .icon-container { font-size: 38px; } .one-column .dcg-polypad-miniscreen.half-width-mode { width: 50%; margin-left: 25%; } .dcg-layout-column:first-child.one-third .dcg-polypad-miniscreen i { font-size: 66%; } .dcg-layout-column:last-child.two-third .dcg-polypad-miniscreen i { font-size: 66%; } .dcg-layout-column.two-third .dcg-polypad-miniscreen, .dcg-layout-column.one-third .dcg-polypad-miniscreen { text-align: center; } /* src/js/activitybuilder/components/polypad/playground/view.styl */ .ab-polypad-playground-view { position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .ab-polypad-playground-view.polypad-fullscreen-view { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .ab-polypad-playground-view.polypad-fullscreen-manipulative { position: absolute; top: 0; right: 10px; bottom: 10px; left: 10px; } .ab-polypad-playground-view.polypad-non-fullscreen-manipulative .ab-polypad-playground-content { padding-top: calc(100% - 2px); } .ab-polypad-playground-view.polypad-non-fullscreen-manipulative .is-in-wide-column { padding-top: calc(75%); } .ab-polypad-playground-view .ab-polypad-playground-content { border: var(--border-component, 1px solid #bdbdbd); border-radius: var(--border-radius, 3px); overflow: hidden; } .ab-polypad-playground-view .ab-polypad-playground-wrapper { position: relative; height: 100%; max-width: 100%; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .ab-polypad-playground-view .ab-polypad-playground-content { position: relative; max-width: 100%; height: 100%; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .ab-polypad-playground-view .camera-header-container { height: 26px; text-align: right; margin: 0 10px; } .layout-top-student-view.showing-correctness .ab-polypad-playground-wrapper.is-fullscreen-exhibit { margin-left: 49px; margin-right: 49px; } /* src/js/activitybuilder/components/polypad/polypad.styl */ .dc-polypad-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .dc-polypad-container .toast-container:not(.hidden) { z-index: 1; } .dc-polypad-container .toast-container:not(.hidden).cover { height: 100%; background-color: rgba(0,0,0,0.3); } .dc-polypad-container .toast-container .toast { top: 5px; } .dc-polypad-container .dc-polypad-view { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 0; } .dc-polypad-container .dc-polypad-view .dc-polypad-error-msg { text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } /* src/js/activitybuilder/components/reorder/miniscreen.styl */ .reorder-miniscreen { border-radius: 3px; border: 1px dashed #bbb; padding: 3px; margin: 2px 0 10px; text-align: center; } .reorder-miniscreen i { font-size: 25px; color: #bbb; } .dcg-layout-column:first-child.one-third .reorder-miniscreen i { font-size: 16px; } .dcg-layout-column:last-child.two-third .reorder-miniscreen i { font-size: 16px; } /* src/js/activitybuilder/components/reorder/playground/item.styl */ .dcg-reorder-playground .placeholder { position: relative; width: calc(100% - 46.5px); } .dcg-reorder-playground .placeholder:after { content: ''; position: absolute; top: 6.5px; left: 46.5px; bottom: 6.5px; right: 0; margin-top: var(--reorder-item-placeholder-margin-top); border: var(--reorder-item-placeholder-border, 1px dashed #a0a0a0); border-radius: var(--border-radius-medium, 0.1875em); background-color: var(--reorder-item-placeholder-background-color, #f6f6f6); } .dcg-reorder-playground .draggable-item { width: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -moz-user-select: -moz-none; } .dcg-reorder-playground .draggable-item .is-dragging .dcg-item-handle { color: #3b3b3b; background: rgba(160,160,160,0.4); } .dcg-reorder-playground .draggable-item .dcg-reorder-item-view { background: transparent; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -ms-flex-line-pack: center; -webkit-align-content: center; align-content: center; -webkit-box-flex: var(--reorder-item-flex-grow); -moz-box-flex: var(--reorder-item-flex-grow); -o-box-flex: var(--reorder-item-flex-grow); -ms-box-flex: var(--reorder-item-flex-grow); box-flex: var(--reorder-item-flex-grow); -webkit-flex-grow: var(--reorder-item-flex-grow); flex-grow: var(--reorder-item-flex-grow); overflow-x: auto; cursor: move; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin: var(--reorder-item-margin, 6.5px 0); -webkit-box-shadow: var(--reorder-item-box-shadow); box-shadow: var(--reorder-item-box-shadow); border: var(--reorder-item-border); border-radius: var(--border-radius-medium); width: var(--reorder-item-width); min-height: var(--reorder-item-min-height); height: var(--reorder-item-height); background-color: var(--reorder-item-background-color); outline: 0; font-size: var(--font-size-default); line-height: var(--reorder-item-line-height); font-weight: var(--reorder-item-font-weight); font-style: var(--reorder-item-font-style); font-stretch: var(--reorder-item-font-stretch); text-align: var(--reorder-item-text-align); letter-spacing: var(--reorder-item-letter-spacing); word-break: break-word; } .dcg-reorder-playground .draggable-item .dcg-reorder-item-view .item-content { pointer-events: none; -webkit-align-self: var(--item-content-align-self); align-self: var(--item-content-align-self); -ms-flex-item-align: var(--item-content-align-self); border: 1px solid #bdbdbd; border-radius: 0.1875em; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) calc(var(--rhythm-unit-px, 12) / 16 * 1rem) calc(var(--rhythm-unit-px, 12) / 16 * 1rem) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); background: #fff; } .dcg-reorder-playground .draggable-item .dcg-reorder-item-view .item-content .nobr { white-space: normal; } .dcg-reorder-playground .draggable-item .dcg-reorder-item-view.dcg-hovered, .dcg-reorder-playground .draggable-item .dcg-reorder-item-view:focus { border: var(--border-width-primary) solid var(--reorder-item-hover-border-color); -webkit-box-shadow: inset 0 0 0 var(--box-shadow-width) var(--reorder-item-hover-border-color); box-shadow: inset 0 0 0 var(--box-shadow-width) var(--reorder-item-hover-border-color); } .dcg-reorder-playground .draggable-item .dcg-reorder-item-view.dcg-hovered .item-content, .dcg-reorder-playground .draggable-item .dcg-reorder-item-view:focus .item-content { border: 1px solid #9c0d63; } .dcg-reorder-playground .dcg-item-handle.btn { height: 40px; width: 40px; margin-right: 6.5px; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .dcg-reorder-playground .dcg-item-handle.btn:not(:disabled):not(.disabled) { cursor: move; } .dcg-reorder-playground .dcg-item-handle i { color: var(--reorder-item-handle-color, #3b3b3b); } .dcg-reorder-playground .item-content { width: 100%; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } /* src/js/activitybuilder/components/reorder/playground/view.styl */ .dcg-reorder-playground { width: 100%; } .dcg-reorder-playground .reorder-offscreen-instructions { position: absolute; top: -1000px; left: -1000px; width: 1px; height: 1px; overflow: hidden; } .dcg-reorder-playground .listbox-container { position: relative; margin-bottom: var(--listbox-container-margin-bottom); } .dcg-reorder-playground .listbox-container .listbox { width: 100%; } .dcg-reorder-playground .listbox-container .listbox .draggable-container > span { -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 5px 0; } .dcg-reorder-playground .dcg-reorder-label { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) 0; color: #3b3b3b; font-size: var(--font-size-default); } /* src/js/activitybuilder/components/shared/animation-overlay/view.styl */ .animation-overlay-view .pause-button-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .animation-overlay-view .play-button-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .animation-overlay-view .play-button-container .play-button { -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; cursor: pointer; font-size: 25px; width: 60px; height: 60px; border: 4px solid #fff; color: #fff; position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px; border-radius: 50%; background: #bbb; line-height: 60px; text-align: center; display: none; -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; -o-transition: -o-transform 0.2s; -ms-transition: -ms-transform 0.2s; transition: transform 0.2s; } .animation-overlay-view .play-button-container .play-button.dcg-hovered { -webkit-transform: scale(1.05, 1.05); -moz-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); } .animation-overlay-view .play-button-container .play-button.dcg-depressed { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } .animation-overlay-view .play-button-container .play-button.is-at-beginning { display: block; } .animation-overlay-view .play-button-container .play-button.dcg-hovered { background: #999; } .animation-overlay-view .play-button-container .play-button.dcg-depressed { background: #808080; } .animation-overlay-view .play-button-container.dcg-hovered .play-button, .animation-overlay-view .play-button-container .play-button.is-at-beginning { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .animation-overlay-scrubber { position: absolute; bottom: 0; width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .animation-overlay-scrubber .small-play-pause { position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: var(--small-play-pause-justify-content, center); -moz-box-pack: var(--small-play-pause-justify-content, center); -o-box-pack: var(--small-play-pause-justify-content, center); -ms-flex-pack: var(--small-play-pause-justify-content, center); -webkit-justify-content: var(--small-play-pause-justify-content, center); justify-content: var(--small-play-pause-justify-content, center); margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); font-size: var(--small-play-font-size); color: var(--small-play-pause-color, #3b3b3b); background: var(--small-play-pause-background); height: var(--small-play-pause-size, 38px); width: var(--small-play-pause-size, 38px); min-width: var(--small-play-pause-size, 38px); border-radius: var(--small-play-pause-border-radius, 50%); -webkit-box-shadow: var(--small-play-pause-box-shadow-bottom); box-shadow: var(--small-play-pause-box-shadow-bottom); } .animation-overlay-scrubber .small-play-pause.dcg-hovered { color: var(--small-play-pause-color, #3b3b3b); background: var(--small-play-pause-background-hover, rgba(0,0,0,0.05)); } .animation-overlay-scrubber .small-play-pause.dcg-depressed { color: var(--small-play-pause-color, #3b3b3b); background: var(--small-play-pause-background-depressed, rgba(0,0,0,0.1)); -webkit-box-shadow: var(--small-play-pause-box-shadow-bottom-depressed); box-shadow: var(--small-play-pause-box-shadow-bottom-depressed); } .animation-overlay-scrubber .small-play-pause label { margin-top: -9px; } .animation-overlay-scrubber .small-play-pause .icon-v2-pause { font-size: var(--small-pause-font-size); } .animation-overlay-scrubber .scrubber-container { height: var(--scrubber-height, 38px); position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background: #fff; } /* src/js/activitybuilder/components/shared/audio-upload/audio-player.styl */ .component-audio-player-wrapper { position: relative; height: var(--component-audio-player-wrapper-height, 67px); } .component-audio-player-wrapper .audio-player-loading { display: inline-block; border: 1px solid #bdbdbd; border-radius: 30px; width: 100%; height: calc(38px + 2px); -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; } .component-audio-player-wrapper .audio-player-error { text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; height: 38px; border-radius: 30px; margin-bottom: 5px; } .component-audio-player { position: relative; display: inline-block; width: 100%; padding-top: var(--component-audio-player-padding-top); background-image: var(--line-separator-background-image); background-position: var(--line-separator-background-position); background-size: var(--line-separator-background-size); background-repeat: var(--line-separator-background-repeat); } .component-audio-player .animation-overlay-scrubber .small-play-pause { color: var(--small-play-pause-color, #3b3b3b); } .component-audio-player .animation-overlay-scrubber .small-play-pause.dcg-hovered { color: var(--small-play-pause-color, #3b3b3b); } .component-audio-player .animation-overlay-scrubber .scrubber .track { height: var(--scrubber-track-height, 2px); background: var(--scrubber-track-background, rgba(50,120,200,0.5)); margin-top: -1px; } .component-audio-player .animation-overlay-scrubber .scrubber .thumb .background { width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; border-radius: 11px; position: absolute; top: 50%; left: 50%; background: var(--scrubber-thumb-background-background, rgba(50,120,200,0.4)); } .component-audio-player .component-audio-player-contents { position: relative; } .component-audio-player .component-audio-player-contents .upload-failed { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .component-audio-player .component-audio-player-contents .component-audio-player-scrubber-container { background-color: var(--player-container-background, rgba(71,129,185,0.15)); border-radius: var(--player-container-border-radius, 20px); height: var(--player-container-height); width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .component-audio-player .component-audio-player-contents .component-audio-player-scrubber-container .playback-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .component-audio-player .component-audio-player-contents .component-audio-player-scrubber-container .duration-label { font-size: var(--duration-label-font-size); -webkit-flex-shrink: 0; flex-shrink: 0; margin-right: var(--duration-label-margin-right, calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); color: var(--duration-label-color, #676767); } .component-audio-player .component-audio-player-contents .component-audio-player-scrubber-container .animation-overlay-scrubber { position: relative; width: 100%; height: var(--scrubber-height, 38px); } .component-audio-player .component-audio-player-contents .component-audio-player-scrubber-container .animation-overlay-scrubber .scrubber-container { background: none; padding-right: 10px; } .component-audio-player .component-audio-player-contents .component-audio-player-scrubber-container.dcg-hovered:not(.is-thumb-hovered) { outline: var(--player-container-outline-hover); } .component-audio-player .component-audio-player-contents .remove-audio-wrapper { position: absolute; top: var(--remove-audio-button-positioning-top, calc(-0.5 * var(--remove-media-button-size, 26px))); right: var(--remove-audio-button-positioning-right, calc(-0.5 * var(--remove-media-button-size, 26px))); } .component-audio-player .component-audio-player-contents .remove-audio-wrapper .remove-audio-button { background: var(--remove-media-button-background, #676767); color: #fff; width: var(--remove-media-button-size, 26px); height: var(--remove-media-button-size, 26px); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border-radius: 50%; border: var(--remove-media-button-border); -webkit-box-shadow: var(--remove-media-button-box-shadow); box-shadow: var(--remove-media-button-box-shadow); margin-top: -3px; } .component-audio-player .component-audio-player-contents .remove-audio-wrapper .remove-audio-button.dcg-hovered, .component-audio-player .component-audio-player-contents .remove-audio-wrapper .remove-audio-button:focus-visible { background: var(--remove-media-button-background-hover, -webkit-linear-gradient(90deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), #676767); background: var(--remove-media-button-background-hover, -moz-linear-gradient(90deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), #676767); background: var(--remove-media-button-background-hover, -o-linear-gradient(90deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), #676767); background: var(--remove-media-button-background-hover, -ms-linear-gradient(90deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), #676767); background: var(--remove-media-button-background-hover, linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), #676767); } .component-audio-player .component-audio-player-contents .remove-audio-wrapper .remove-audio-button.dcg-depressed { background: var(--remove-media-button-background-depressed, -webkit-linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35)), #676767); background: var(--remove-media-button-background-depressed, -moz-linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35)), #676767); background: var(--remove-media-button-background-depressed, -o-linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35)), #676767); background: var(--remove-media-button-background-depressed, -ms-linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35)), #676767); background: var(--remove-media-button-background-depressed, linear-gradient(0deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35)), #676767); -webkit-box-shadow: var(--remove-media-button-box-shadow-depressed); box-shadow: var(--remove-media-button-box-shadow-depressed); } .component-audio-player .component-audio-player-contents .remove-audio-wrapper .remove-audio-button i { font-size: var(--remove-media-button-font-size, 1.6em); font-weight: var(--remove-media-button-font-weight); line-height: 1.5em; } .component-audio-player .component-audio-player-contents .remove-audio-wrapper .remove-audio-button label { font-size: 0.78em; line-height: 1.9em; margin-top: -2em; } .component-audio-player .deleting { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; height: var(--deleting-audio-height, 38px); padding: var(--deleting-audio-padding, calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0); border: var(--deleting-audio-border); border-radius: var(--deleting-audio-border-radius, 20px); background: var(--deleting-media-background, #fbeae6); color: var(--deleting-audio-color, #831c00); font-size: var(--deleting-media-font-size); -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; margin-right: calc(-1 * var(--component-audio-player-padding-right, calc(var(--rhythm-unit-px, 12) / 16 * 1rem))); font-weight: 500; } .component-audio-player .deleting .delete-message { padding-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .component-audio-player .deleting .cancel-delete { color: var(--font-color-default, #3b3b3b); padding: var(--deleting-media-cancel-padding, 0 1em); text-decoration: var(--deleting-media-cancel-text-decoration); background: var(--deleting-media-cancel-background); border: var(--deleting-media-cancel-border); border-radius: var(--deleting-media-cancel-border-radius); -webkit-box-shadow: var(--deleting-media-cancel-box-shadow); box-shadow: var(--deleting-media-cancel-box-shadow); } .component-audio-player .deleting .cancel-delete.dcg-hovered { border: var(--deleting-media-cancel-border-hover); text-decoration: var(--deleting-media-cancel-text-decoration, underline); color: var(--font-color-default, #3b3b3b); } .component-audio-player .deleting .cancel-delete.dcg-depressed { border: var(--deleting-media-cancel-border-hover); color: var(--font-color-default, #3b3b3b); -webkit-box-shadow: var(--deleting-media-cancel-box-shadow-depressed); box-shadow: var(--deleting-media-cancel-box-shadow-depressed); } .component-audio-player .new-recording-in-progress { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .component-audio-player .uploading { -webkit-animation: var(--component-audio-player-uploading-animation, 1.5s linear pulseModerate infinite); -moz-animation: var(--component-audio-player-uploading-animation, 1.5s linear pulseModerate infinite); -o-animation: var(--component-audio-player-uploading-animation, 1.5s linear pulseModerate infinite); -ms-animation: var(--component-audio-player-uploading-animation, 1.5s linear pulseModerate infinite); animation: var(--component-audio-player-uploading-animation, 1.5s linear pulseModerate infinite); } .component-audio-player .upload-spinner-container { position: relative; min-width: var(--upload-spinner-container-size, 19px); height: var(--upload-spinner-container-size, 19px); margin-right: var(--upload-spinner-container-margin-right, 8px); border: var(--upload-spinner-container-border, 2px solid rgba(102,102,102,0.3)); border-radius: 50%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .component-audio-player .upload-spinner-container .pillow-icon-upload { font-size: var(--upload-icon-font-size, 12px); color: var(--upload-icon-color, #666); } .component-audio-player .upload-spinner-container .pillow-icon-spinner-arc { font-size: var(--spinner-icon-font-size, 19px); position: absolute; top: -2px; left: -2px; -webkit-animation: 2s linear rotate infinite; -moz-animation: 2s linear rotate infinite; -o-animation: 2s linear rotate infinite; -ms-animation: 2s linear rotate infinite; animation: 2s linear rotate infinite; color: var(--spinner-icon-color, #666); } .component-audio-player .reupload-button { position: relative; min-width: 19px; height: 19px; margin-right: 8px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; border: none; background-color: transparent; } .component-audio-player .reupload-button .pillow-icon-reupload { position: absolute; font-size: 19px; color: #666; } .component-audio-player .reupload-button .pillow-icon-reupload:hover { color: #444; } .component-audio-player .reupload-button .pillow-icon-reupload:active { color: #212121; } .component-audio-player .audio-player-error.toast { -webkit-animation: fadeOut 0.5s linear 5s forwards; -moz-animation: fadeOut 0.5s linear 5s forwards; -o-animation: fadeOut 0.5s linear 5s forwards; -ms-animation: fadeOut 0.5s linear 5s forwards; animation: fadeOut 0.5s linear 5s forwards; position: absolute; top: -65px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: max-content; color: #000; } /* src/js/activitybuilder/components/shared/audio-upload/audio-recording-waveform.styl */ .audio-recording-waveform { width: 120px; position: relative; margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); height: 15px; } .audio-recording-waveform .animated-width { position: absolute; top: 0; left: 0; -webkit-animation: 2.65s linear audio-waveform-appear forwards; -moz-animation: 2.65s linear audio-waveform-appear forwards; -o-animation: 2.65s linear audio-waveform-appear forwards; -ms-animation: 2.65s linear audio-waveform-appear forwards; animation: 2.65s linear audio-waveform-appear forwards; overflow: hidden; height: 15px; } .audio-recording-waveform .audio-wave-gif, .audio-recording-waveform .pre-recording-dots { position: absolute; top: 0; left: 0; width: 120px; height: 15px; } @-moz-keyframes audio-waveform-appear { 0% { width: 0; } 100% { width: 120px; } } @-webkit-keyframes audio-waveform-appear { 0% { width: 0; } 100% { width: 120px; } } @-o-keyframes audio-waveform-appear { 0% { width: 0; } 100% { width: 120px; } } @keyframes audio-waveform-appear { 0% { width: 0; } 100% { width: 120px; } } /* src/js/activitybuilder/components/shared/audio-upload/record-button.styl */ .record-button { display: grid; } .record-button .red-circle, .record-button .red-square, .record-button .pillow-icon-red-circle { grid-column: 1; grid-row: 1; } .record-button .red-circle, .record-button .red-square { margin: auto; } .record-button .red-circle { width: 13px; height: 13px; background-color: var(--record-audio-start-icon-color, #831c00); border-radius: 50%; } .record-button .red-square { width: var(--record-audio-stop-icon-size, 10px); height: var(--record-audio-stop-icon-size, 10px); background-color: var(--record-audio-stop-icon-color, #831c00); border-radius: 20%; } .record-button .pillow-icon-red-circle { font-size: 20px; color: var(--record-audio-start-icon-color, #831c00); background-color: var(--record-audio-start-icon-background); border: var(--record-audio-start-icon-border); border-radius: var(--record-audio-start-icon-border-radius); -webkit-box-shadow: var(--record-audio-start-icon-box-shadow); box-shadow: var(--record-audio-start-icon-box-shadow); } .record-button .pillow-icon-red-circle.recording { opacity: 1; -ms-filter: none; filter: none; -webkit-animation: var(--dropdown-record-button-animation, fade 2.5s infinite linear); -moz-animation: var(--dropdown-record-button-animation, fade 2.5s infinite linear); -o-animation: var(--dropdown-record-button-animation, fade 2.5s infinite linear); -ms-animation: var(--dropdown-record-button-animation, fade 2.5s infinite linear); animation: var(--dropdown-record-button-animation, fade 2.5s infinite linear); background-color: var(--record-audio-start-icon-background-recording); border: var(--record-audio-start-icon-border-recording); -webkit-box-shadow: var(--record-audio-start-icon-box-shadow-recording); box-shadow: var(--record-audio-start-icon-box-shadow-recording); } .record-button .pillow-icon-red-circle.recording.dcg-hovered { color: var(--record-audio-start-icon-color-recording-hover, #420e00); } .record-button .pillow-icon-red-circle.recording.dcg-depressed { color: var(--record-audio-start-icon-color-recording-depressed, #420e00); } @-moz-keyframes fade { 0%, 100% { opacity: 1; -ms-filter: none; filter: none; } 50% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-webkit-keyframes fade { 0%, 100% { opacity: 1; -ms-filter: none; filter: none; } 50% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-o-keyframes fade { 0%, 100% { opacity: 1; -ms-filter: none; filter: none; } 50% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @keyframes fade { 0%, 100% { opacity: 1; -ms-filter: none; filter: none; } 50% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } .record-button.dcg-hovered .pillow-icon-red-circle:not(.recording) { background-color: var(--record-audio-start-icon-background-hover); border: var(--record-audio-start-icon-border-hover); color: var(--record-audio-start-icon-color, #420e00); } .record-button.dcg-hovered .pillow-icon-red-circle.recording { background-color: var(--record-audio-start-icon-background-recording-hover); border: var(--record-audio-start-icon-border-recording-hover); color: var(--record-audio-start-icon-background-recording-hover, #420e00); } .record-button.dcg-hovered .red-square, .record-button.dcg-hovered .red-circle { background-color: var(--record-audio-start-icon-color, #420e00); } .record-button.dcg-depressed .pillow-icon-red-circle:not(.recording) { background-color: var(--record-audio-start-icon-background-depressed); border: var(--record-audio-start-icon-border-depressed); -webkit-box-shadow: var(--record-audio-start-icon-box-shadow-depressed); box-shadow: var(--record-audio-start-icon-box-shadow-depressed); } .record-button.dcg-depressed .pillow-icon-red-circle.recording { background-color: var(--record-audio-start-icon-background-recording-depressed); border: var(--record-audio-start-icon-border-recording-depressed); -webkit-box-shadow: var(--record-audio-start-icon-box-shadow-depressed); box-shadow: var(--record-audio-start-icon-box-shadow-depressed); } /* src/js/activitybuilder/components/shared/audio-upload/upload-audio-dropdown.styl */ .upload-audio-dropdown-container .audio-dropdown .dropdown-container { left: 0; margin-top: calc(calc(var(--rhythm-unit-px, 12) / 16 * 1rem) + 4px); } .upload-audio-dropdown-container .audio-dropdown .dropdown-container .dropdown-container-inner { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .upload-audio-dropdown-container .audio-dropdown .dropdown-container .header { display: inline-block; margin-bottom: 15px; } .upload-audio-dropdown-container .audio-dropdown .dropdown-container .recording-label { margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); margin-top: 0; color: #3b3b3b; } .upload-audio-dropdown-container .audio-dropdown .dropdown-container .recording-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .upload-audio-dropdown-container .audio-dropdown .dropdown-container .recording-container .audio-wave-container { display: grid; } .upload-audio-dropdown-container .audio-dropdown .dropdown-container .recording-container .audio-wave-container .audio-bubble-background, .upload-audio-dropdown-container .audio-dropdown .dropdown-container .recording-container .audio-wave-container .pre-recording-dots, .upload-audio-dropdown-container .audio-dropdown .dropdown-container .recording-container .audio-wave-container .audio-wave-gif { grid-column: 1; grid-row: 1; } .upload-audio-dropdown-container .audio-dropdown .dropdown-container .recording-container .audio-bubble-background { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: relative; background-color: var(--audio-bubble-background, rgba(71,129,185,0.15)); border-radius: 20px; width: calc(120px + calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3) + 45px); height: 39px; margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1.5); overflow: hidden; } .upload-audio-dropdown-container .audio-dropdown .dropdown-container .recording-container .recording-time { position: absolute; left: calc(100% - 45px - calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2)); width: 45px; text-align: center; } .upload-audio-dropdown-container .audio-dropdown .dropdown-container .preview-message { color: #676767; border: 1px dashed #bdbdbd; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); border-radius: 0.1875em; font-style: italic; text-align: center; width: 265px; } .upload-audio-dropdown-container .audio-dropdown .dropdown-container .loading-message-container { min-width: 200px; min-height: 50px; } .upload-image-container + .upload-audio-dropdown-container .audio-dropdown .dropdown-container { margin-left: calc(0px - (40px + calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3) + 4px)); } .upload-image-container + .upload-audio-dropdown-container .audio-dropdown .dropdown-container:after { content: ""; position: absolute; top: -12px; left: 102px; border-width: 12px; border-top-width: 0; border-style: solid; border-color: transparent transparent var(--dropdown-arrow-background, #fff); line-height: 0; } .upload-image-container + .upload-audio-dropdown-container .audio-dropdown .dropdown-container:before { content: ""; position: absolute; top: -13px; left: 101px; border-width: 13px; border-top-width: 0; border-style: solid; border-color: transparent transparent var(--dropdown-arrow-border, #bdbdbd); line-height: 0; } @media screen and (min-width: 1500px) { .upload-image-container + .upload-audio-dropdown-container .audio-dropdown .dropdown-container { margin-left: calc(0px - (45px + calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3) + 4px)); } .upload-image-container + .upload-audio-dropdown-container .audio-dropdown .dropdown-container:after { content: ""; position: absolute; top: -12px; left: 114px; border-width: 12px; border-top-width: 0; border-style: solid; border-color: transparent transparent var(--dropdown-arrow-background, #fff); line-height: 0; } .upload-image-container + .upload-audio-dropdown-container .audio-dropdown .dropdown-container:before { content: ""; position: absolute; top: -13px; left: 113px; border-width: 13px; border-top-width: 0; border-style: solid; border-color: transparent transparent var(--dropdown-arrow-border, #bdbdbd); line-height: 0; } .upload-image-container + .upload-audio-dropdown-container .audio-dropdown .dropdown-container:after, .upload-image-container + .upload-audio-dropdown-container .audio-dropdown .dropdown-container:before { margin-left: -2px; } } @media screen and (max-width: 575px) { .upload-image-container + .upload-audio-dropdown-container .audio-dropdown .dropdown-container { margin-left: calc(0px - (40px + calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3) + 4px)); } .upload-image-container + .upload-audio-dropdown-container .audio-dropdown .dropdown-container:after { content: ""; position: absolute; top: -12px; left: 100px; border-width: 12px; border-top-width: 0; border-style: solid; border-color: transparent transparent var(--dropdown-arrow-background, #fff); line-height: 0; } .upload-image-container + .upload-audio-dropdown-container .audio-dropdown .dropdown-container:before { content: ""; position: absolute; top: -13px; left: 99px; border-width: 13px; border-top-width: 0; border-style: solid; border-color: transparent transparent var(--dropdown-arrow-border, #bdbdbd); line-height: 0; } .upload-image-container + .upload-audio-dropdown-container .audio-dropdown .dropdown-container:after, .upload-image-container + .upload-audio-dropdown-container .audio-dropdown .dropdown-container:before { margin-left: -2px; } } /* src/js/activitybuilder/components/shared/authoring-toggle.styl */ .authoring-toggle { margin: 0 auto; clear: both; max-width: 350px; height: 50px; width: 90%; padding-top: 10px; } .authoring-radio .has-sub-option .component-options-list { margin-left: 25px; } /* src/js/activitybuilder/components/shared/bynder-link.styl */ .bynder-link-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; max-height: 100%; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; max-width: 100%; text-align: center; } .bynder-link-container .bynder-link-input { min-width: 250px; width: fit-content; } .bynder-link-container .btn-use-link { margin-left: 10px; } .bynder-link-container .bynder-link-error { color: #db2e00; font-size: 0.9rem; padding-bottom: 10px; } /* src/js/activitybuilder/components/shared/card-graph-display.styl */ .card-graph-container { position: relative; } .card-graph-container .image-card-wrapper { height: 100%; } .expanded-card-container .card-graph-container { height: 370px; background: #fff; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; } .expanded-card-container .card-graph-container .calculator { position: absolute; top: 0; left: 0; bottom: 0; right: 0; -webkit-animation: cardGraphfadeIn 0.6s; -moz-animation: cardGraphfadeIn 0.6s; -o-animation: cardGraphfadeIn 0.6s; -ms-animation: cardGraphfadeIn 0.6s; animation: cardGraphfadeIn 0.6s; } @media screen and (max-width: 575px) { .expanded-card-container .card-graph-container { height: 300px; } } @-moz-keyframes cardGraphfadeIn { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 50% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: none; filter: none; } } @-webkit-keyframes cardGraphfadeIn { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 50% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: none; filter: none; } } @-o-keyframes cardGraphfadeIn { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 50% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: none; filter: none; } } @keyframes cardGraphfadeIn { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 50% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: none; filter: none; } } /* src/js/activitybuilder/components/shared/card-image-display.styl */ .image-card-wrapper { font-size: 0; position: relative; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; } .image-card-wrapper:not(.image-card-loaded) { background: #fafafa; } .image-card-wrapper.image-size-loading { min-height: 100px; background: #e2e2e2; -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; } .image-card { width: 100%; max-width: 196px; text-align: center; margin: 0 auto; border-radius: 2px; } .dcg-cardsort-card:first-child .image-card { max-width: 205px; } @media screen and (max-width: 575px) { .image-card { max-width: 116px; } .dcg-cardsort-card:first-child .image-card { max-width: 121.39999999999999px; } } /* src/js/activitybuilder/components/shared/card-text-display.styl */ .cardsort-typed-card .dcg-mq-math-mode { cursor: pointer; } .cardsort-typed-card .equation-card-container { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); font-size: 90%; } .cardsort-typed-card .mixed-text-container { font-size: 100%; text-align: left; word-wrap: break-word; } .cardsort-typed-card .mixed-text-display * { cursor: pointer; } .dcg-cardsort-card:first-child .equation-card-container { font-size: 94.05%; } .dcg-cardsort-card:first-child .mixed-text-container { font-size: 104.5%; } @media screen and (max-width: 575px) { .cardsort-typed-card .equation-card-container { font-size: 70%; } .cardsort-typed-card .mixed-text-container { font-size: 80%; } .dcg-cardsort-card:first-child .equation-card-container { font-size: 73.14999999999999%; } .dcg-cardsort-card:first-child .mixed-text-container { font-size: 83.6%; } } /* src/js/activitybuilder/components/shared/correctness-indicator.styl */ .correctness-indicator { width: var(--correctness-indicator-size, 24px); height: var(--correctness-indicator-size, 24px); border-radius: var(--correctness-indicator-size, 24px); font-size: var(--correctness-indicator-size, 24px); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .correctness-indicator.correct, .correctness-indicator.incorrect, .correctness-indicator.warning { -webkit-box-shadow: 0 0 0 2px #fff; box-shadow: 0 0 0 2px #fff; } .correctness-indicator.correct { background: #3278c8; } .correctness-indicator.incorrect { background: #ea8758; } .correctness-indicator.warning { background: #676767; } .correctness-indicator.warning .correctness-icon { font-size: 0.9em; padding-bottom: 2px; } .correctness-indicator.warning .correctness-icon:before { color: #fff; } .correctness-indicator.warning .correctness-icon:after { color: #676767; } .correctness-indicator .correctness-icon { color: #fff; padding-bottom: 1px; } /* src/js/activitybuilder/components/shared/custom-url-editor.styl */ .dcg-custom-url-editor { padding: 20px; } .dcg-custom-url-editor .dcg-segmented-control-layout { margin-bottom: 20px; } .dcg-custom-url-editor .dcg-custom-url-input { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .dcg-custom-url-editor .dcg-custom-url-warning { padding: 10px; background: rgba(219,46,0,0.1); border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; margin-bottom: 20px; } .dcg-custom-url-editor .dcg-custom-url-input-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .dcg-custom-url-editor .dcg-custom-url-input-container .custom-url-input, .dcg-custom-url-editor .dcg-custom-url-input-container .dcg-custom-url-footer { margin-top: 10px; } .dcg-custom-url-editor .dcg-custom-url-input-container .custom-url-input { font-size: 16px; } .dcg-custom-url-editor .dcg-custom-url-input-container .dcg-custom-url-footer { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .dcg-custom-url-editor .dcg-custom-url-input-container .dcg-custom-url-footer.has-file-upload { -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .dcg-custom-url-editor .dcg-custom-url-input-container .dcg-custom-url-footer input[type="file"] { display: none; } .dcg-custom-url-editor .dcg-custom-url-input-container .dcg-custom-url-buttons { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .dcg-custom-url-editor .dcg-custom-url-input-container .dcg-cancel-button { margin-right: 10px; } /* src/js/activitybuilder/components/shared/custom-url-modal.styl */ .dcg-custom-url-modal-contents { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .dcg-custom-url-modal-contents .h3 { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) !important; } .dcg-custom-url-modal-contents .dcg-custom-url-editor { padding: 0; } .dcg-custom-url-modal-contents .dcg-custom-url-editor input:focus-visible { outline: none; } .dcg-custom-url-modal-contents .dcg-custom-url-editor .dcg-custom-url-footer { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } /* src/js/activitybuilder/components/shared/empty-component.styl */ .empty-component { color: #bbb; text-align: center; width: 100%; padding: 30px; font-size: 120%; } /* src/js/activitybuilder/components/shared/fast-static-math.styl */ .fake-static-math { font-family: Symbola, "Times New Roman", serif; cursor: text; } .fake-static-math.dcg-mq-math-mode > span { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; padding: 2px; display: inline-block; } .fast-static-math-loading { margin: 2px; height: 1em; -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; background: #e2e2e2; border-radius: 3px; } /* src/js/activitybuilder/components/shared/input-footer.styl */ .dcg-input-footer { width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; padding: var(--math-input-footer-padding, calc(var(--rhythm-unit-px, 12) / 16 * 1rem) calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); background: var(--input-footer-background, #f6f6f6); border: var(--input-footer-border, 1px solid #bdbdbd); border-top: 0; border-radius: var(--input-footer-border-radius, 0 0 0.1875em 0.1875em); -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .dcg-input-footer > * { padding-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); display: grid; grid-column-gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); grid-row-gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .dcg-input-footer .btn.btn-secondary i { position: unset; margin: 0 2px; font-size: 1.5em; line-height: 1.6em; } .dcg-expression-input-container .input-and-button-container .dcg-input-footer { background: var(--math-input-footer-background, #f6f6f6); border: var(--math-input-footer-border, 1px solid #bdbdbd); border-top: 0; } /* src/js/activitybuilder/components/shared/keypad-button.styl */ .dcg-toggle-keypad-button.active, .dcg-toggle-keypad-button.btn.active { background: #3278c8; color: #fff; border-color: transparent; } .dcg-toggle-keypad-button.active.dcg-hovered, .dcg-toggle-keypad-button.btn.active.dcg-hovered, .dcg-toggle-keypad-button.active:focus-visible, .dcg-toggle-keypad-button.btn.active:focus-visible { background: var(--keypad-button-background-hovered); color: var(--keypad-button-color-hovered); border-color: var(--keypad-button-border-color-hovered); } .dcg-toggle-keypad-button.active.dcg-depressed, .dcg-toggle-keypad-button.btn.active.dcg-depressed { background: var(--keypad-button-background-active); color: var(--keypad-button-color-active); border-color: var(--keypad-button-border-color-active); } .dcg-toggle-keypad-button.dcg-hovered, .dcg-toggle-keypad-button:focus-visible { background: rgba(0,0,0,0.05); } .dcg-toggle-keypad-button.dcg-depressed { background: rgba(0,0,0,0.1); } .dcg-toggle-keypad-button .disabled { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } /* src/js/activitybuilder/components/shared/layout/playground.styl */ .revision-toggle-container { margin: 10px auto; width: 100%; } .revision-toggle-container .revision-toggle { width: 100%; max-width: 1000px; position: relative; margin: auto; } .revision-toggle-container .revision-toggle .dcg-segmented-control-layout .dcg-segmented-control-btn.dcg-selected { z-index: 0; } .revision-toggle-container .read-only-banner { background: #e3ecf5; border: 1px solid #bdbdbd; border-radius: 4px; margin: 10px auto; padding: 10px; text-align: center; width: fit-content; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .revision-toggle-container .read-only-banner i.pillow-icon-info { color: #3278c8; margin-right: 5px; } .revision-toggle-container .authoring-toggle { height: 40px; padding: 0; } .revision-toggle-container + .student-step-container { margin-top: 50px; } .revision-toggle-container + .interactive-sandbox-container :not(.momentum-scroll) { pointer-events: none !important; } .revision-toggle-container + .interactive-sandbox-container .momentum-scroll { pointer-events: auto; } .student-step-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .student-step-container.space-filling { height: 100%; } .student-step-container .cls-step-title { -webkit-box-flex: 0; -moz-box-flex: 0; -o-box-flex: 0; -ms-box-flex: 0; box-flex: 0; -webkit-flex-grow: 0; flex-grow: 0; text-align: center; } .student-step-container .step-subtitle { -webkit-box-flex: 0; -moz-box-flex: 0; -o-box-flex: 0; -ms-box-flex: 0; box-flex: 0; -webkit-flex-grow: 0; flex-grow: 0; text-align: center; line-height: 1.25em; margin: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem) calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .student-step-container .content-container { position: relative; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; -ms-flex: 1 1 auto; z-index: 0; } .student-step-container .prevent-screen-reason-container { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; padding: 40px 50px 0; } .student-step-container .prevent-screen-reason-container .prevent-screen-reason { font-size: 180%; } .screen-cover-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; background: #fff; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; padding: 40px 50px 0; text-align: center; z-index: 2; } .screen-cover-container.animating-out { -webkit-animation: fadeOut 0.3s forwards; -moz-animation: fadeOut 0.3s forwards; -o-animation: fadeOut 0.3s forwards; -ms-animation: fadeOut 0.3s forwards; animation: fadeOut 0.3s forwards; } .screen-cover-container .screen-cover-text { font-size: 180%; } .screen-cover-container .btn-blue, .screen-cover-container .blue-link { margin-top: 20px; } .playground-graph-with-sketch { margin-top: 50px; } .playground-graph-with-sketch.playground-component-periscope { margin-top: 24px; } .playground-action-button-above-graph { pointer-events: none; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; } .playground-action-button-above-graph .dcg-action-button-playground { text-align: end; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; } .playground-action-button-above-graph .dcg-action-button-playground .dcg-action-button, .playground-action-button-above-graph .dcg-action-button-playground .blue-link { margin: 10px; } .playground-action-button-above-graph .dcg-action-button-playground .blue-link { text-shadow: calc(1px * -1) calc(1px * -1) 0 #fff, calc(1px * -1) 1px 0 #fff, 1px calc(1px * -1) 0 #fff, 1px 1px 0 #fff, 0 calc(1px * -1) 0 #fff, 0 1px 0 #fff, 1px 0 0 #fff, calc(1px * -1) 0 0 #fff; display: inline-block; } .student-step-container.playground-layout-k5 { min-height: 100%; } .student-step-container.playground-layout-k5 .content-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .student-step-container.playground-layout-k5:not(.space-filling) .content-container { min-height: 100%; } .student-navigation-container .student-step-container.playground-screen-alignment-center { min-height: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; position: relative; } .student-navigation-container .student-step-container.playground-screen-alignment-center .content-container { -webkit-box-flex: 0; -moz-box-flex: 0; -o-box-flex: 0; -ms-box-flex: 0; box-flex: 0; -webkit-flex-grow: 0; flex-grow: 0; width: 100%; height: 100%; } .playground-layout .interactive-sandbox-container { position: relative; width: 100%; height: 100%; } @media screen and (min-width: 1500px) { .amp-styles .layout-context-medium { font-size: inherit; } } @media screen and (max-width: 767px) { .student-navigation-container .student-step-container.companion-mode-active { position: static; height: 100%; max-height: 500px; overflow: hidden; } .student-navigation-container .student-step-container.companion-mode-active .content-container { position: static !important; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; width: 100%; height: 80%; scale: 0.9; font-size: 150%; -webkit-transform: translateY(-30%); -moz-transform: translateY(-30%); -o-transform: translateY(-30%); -ms-transform: translateY(-30%); transform: translateY(-30%); } .student-navigation-container .student-step-container.companion-mode-active .content-container .companion-mode { position: static !important; max-width: none !important; height: 100%; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -o-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); scale: 0.6; margin: 0 calc(-1152px / 4); } .student-navigation-container .student-step-container.companion-mode-active .content-container .companion-mode .fixed-aspect-parent { position: static; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .student-navigation-container .student-step-container.companion-mode-active .content-container .companion-mode .fixed-aspect-container { width: 100% !important; height: 100% !important; min-height: 192px; min-width: 192px; } .student-navigation-container .student-step-container.companion-mode-active .content-container .companion-mode .fixed-aspect-container .sketch-view-children { position: static; } .student-navigation-container .student-step-container.companion-mode-active .content-container .companion-mode .fixed-aspect-container .sketch-view-wrapper .sketch-surface { border: none; } .student-navigation-container .student-step-container.companion-mode-active .content-container .companion-mode .dcg-graph-outer { font-size: 0.6em; border: var(--sketch-canvas-border, 1px solid #bdbdbd); border-radius: var(--sketch-canvas-border-radius, 0.1875em); } } /* src/js/activitybuilder/components/shared/layout/screen/miniscreen.styl */ .section-annotation-wrapper { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .section-annotation-wrapper .section-annotation-border { border-top-width: 1px; border-top-style: solid; border-color: #bdbdbd; position: absolute; top: 0; left: 0; right: 0; } .section-annotation-wrapper .section-name-text { background: #f6f6f6; position: relative; padding: 0 0.25em; margin-left: 15px; color: rgba(0,0,0,0.7); } .section-annotation-wrapper .section-name { color: #999; } .navigation-miniscreen-container .section-annotation-wrapper { top: 6px; } .navigation-miniscreen-container .section-annotation-wrapper .miniscreen { top: 26px; } .navigation-miniscreen-container .section-annotation-wrapper .section-annotation-border { top: 9px; border-color: rgba(0,0,0,0.2); border-top-width: 1px; } .navigation-miniscreen-container .section-annotation-wrapper .section-annotation-border--last-of-section { margin-right: 10px; } .navigation-miniscreen-container .section-annotation-wrapper .section-annotation-border--first-of-section { margin-left: 0; } .navigation-miniscreen-container .section-annotation-wrapper .section-name { color: #3b3b3b; } .navigation-miniscreen-container .section-annotation-wrapper .section-name-text { background: transparent; display: inline-block; max-width: calc(100% - 2 * 0.25em - 15px); height: 26px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .navigation-miniscreen-container .section-annotation-wrapper .section-name-text span { background: #c2d7ef; padding: 0 0.5em; margin-left: -0.25em; } .navigation-miniscreen-container .section-annotation-wrapper.read-only .section-name-text { color: #fff; } .navigation-miniscreen-container .section-annotation-wrapper.read-only .section-name-text span { background: #83629e; } .navigation-miniscreen-container .miniscreen { border-radius: 0.1875em; top: 6px; bottom: 6px; left: 0; right: 10px; } .navigation-miniscreen-container .miniscreen:focus-visible { border: 2px solid #fff; -webkit-box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #9c0d63; box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #9c0d63; } .navigation-miniscreen-container .miniscreen.miniscreen-clickable.dcg-hovered:not(.miniscreen-selected) { -webkit-box-shadow: 0 0 0 3px rgba(0,0,0,0.2); box-shadow: 0 0 0 3px rgba(0,0,0,0.2); } .navigation-miniscreen-container .miniscreen.miniscreen-selected { background: #fed765; -webkit-box-shadow: 0 0 0 3px #fed765; box-shadow: 0 0 0 3px #fed765; } .navigation-miniscreen-container .miniscreen.miniscreen-selected .content { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); } .navigation-miniscreen-container .miniscreen .diff-dot { width: 12px; height: 12px; top: -5px; left: -6px; position: absolute; z-index: 2; } .navigation-miniscreen-container .miniscreen .header { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.25) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.25) 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .navigation-miniscreen-container .miniscreen .content { top: 0; } .preview-miniscreen-container { height: 150px; position: relative; } .preview-miniscreen-container .miniscreen { border: 1px solid #bdbdbd; border-radius: 4px; -webkit-transition: border-color 0.2s linear; -moz-transition: border-color 0.2s linear; -o-transition: border-color 0.2s linear; -ms-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .preview-miniscreen-container .miniscreen.miniscreen-clickable.dcg-hovered:not(.miniscreen-selected) { border: 1px solid #9c0d63; } .preview-miniscreen-container .section-annotation-wrapper { top: 12px; } .preview-miniscreen-container .section-annotation-wrapper .miniscreen { top: 12px; } .preview-miniscreen-container .section-annotation-wrapper .section-name-text { top: -10px; font-size: calc(1em / var(--scale-ratio)); line-height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .preview-miniscreen-container .section-annotation-wrapper .section-annotation-border { right: -10px; top: 2px; } .preview-miniscreen-container .section-annotation-wrapper .section-annotation-border--last-of-section { margin-right: 10px; } .miniscreen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -moz-user-select: -moz-none; } .miniscreen.miniscreen-clickable { cursor: pointer; } .miniscreen .content { padding-top: 25px; overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .miniscreen .header { position: absolute; top: 0; left: 0; right: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; color: #3b3b3b; } .miniscreen .header .miniscreen-title { padding-right: 22px; } .miniscreen .header.has-delete .miniscreen-title { padding-right: 18px !important; } .miniscreen .header .miniscreen-title { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; width: 100%; text-shadow: calc(1px * -1) calc(1px * -1) 0 #fff, calc(1px * -1) 1px 0 #fff, 1px calc(1px * -1) 0 #fff, 1px 1px 0 #fff, 0 calc(1px * -1) 0 #fff, 0 1px 0 #fff, 1px 0 0 #fff, calc(1px * -1) 0 0 #fff; } .miniscreen .header .miniscreen-title .step-index { margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); font-weight: 500; } .miniscreen .header .miniscreen-title .untitled { color: #bbb; } .miniscreen.no-actions .header .miniscreen-title { padding: 2px calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .miniscreen .header .miniscreen-decorators { position: absolute; top: 0; right: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .miniscreen .header .miniscreen-decorators .delete-button { width: 22px; height: 22px; line-height: 20px; } .miniscreen .header .miniscreen-decorators .miniscreen-dropdown-options.dcg-shared-options-dropdown { padding: 2px; } .miniscreen .header .miniscreen-decorators .miniscreen-dropdown-options .dot-dot-dropdown-anchor { line-height: 20px; } .miniscreen .header .miniscreen-decorators .miniscreen-dropdown-options .dot-dot-dropdown-anchor i { font-size: 1.2em; z-index: 1; } .miniscreen .header .miniscreen-decorators .miniscreen-dropdown-options .dot-dot-dropdown-anchor .dot-dot-container { width: 19px; height: 19px; margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .miniscreen .header .miniscreen-decorators .miniscreen-dropdown-options .dot-dot-dropdown-anchor .dot-dot-container.dcg-hovered { background: rgba(0,0,0,0.05); } .miniscreen .header .miniscreen-decorators .miniscreen-dropdown-options.popover-right .dropdown-container:not(.dropdown-pops-right) { right: -80px; } .miniscreen .header .miniscreen-decorators .miniscreen-dropdown-options.popover-right .dropdown-container:not(.dropdown-pops-right):after { content: ""; position: absolute; top: -9px; left: 7px; border-width: 9px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .miniscreen .header .miniscreen-decorators .miniscreen-dropdown-options.popover-right .dropdown-container:not(.dropdown-pops-right):before { content: ""; position: absolute; top: -10px; left: 6px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .miniscreen .header .miniscreen-decorators .miniscreen-dropdown-options:not(.popover-right) .dropdown-container:not(.dropdown-pops-right) { right: -2px; top: 33px; } .miniscreen .header .miniscreen-decorators .miniscreen-dropdown-options:not(.popover-right) .dropdown-container:not(.dropdown-pops-right):after { content: ""; position: absolute; top: -9px; right: 7px; border-width: 9px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .miniscreen .header .miniscreen-decorators .miniscreen-dropdown-options:not(.popover-right) .dropdown-container:not(.dropdown-pops-right):before { content: ""; position: absolute; top: -10px; right: 6px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .miniscreen .header .miniscreen-decorators .anchor-container:focus-visible { outline: none; } .miniscreen .header .miniscreen-decorators .anchor-container:focus-visible:after { content: ""; position: absolute; top: 1px; -webkit-box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #9c0d63; box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #9c0d63; background: #e9e9e9; border-radius: 50%; width: 19px; height: 19px; } .miniscreen .miniscreen-warning { position: absolute; bottom: 4px; } .miniscreen .miniscreen-warning.miniscreen-warning-left { left: 4px; } .miniscreen .miniscreen-warning.miniscreen-warning-right { right: 4px; } .miniscreen .miniscreen-warning i.pillow-icon-error { display: inline-block; -webkit-transform: translateY(4px); -moz-transform: translateY(4px); -o-transform: translateY(4px); -ms-transform: translateY(4px); transform: translateY(4px); text-shadow: calc(1px * -1) calc(1px * -1) 0 rgba(255,255,255,0.2), calc(1px * -1) 1px 0 rgba(255,255,255,0.2), 1px calc(1px * -1) 0 rgba(255,255,255,0.2), 1px 1px 0 rgba(255,255,255,0.2), 0 calc(1px * -1) 0 rgba(255,255,255,0.2), 0 1px 0 rgba(255,255,255,0.2), 1px 0 0 rgba(255,255,255,0.2), calc(1px * -1) 0 0 rgba(255,255,255,0.2); } .miniscreen .miniscreen-warning i.pillow-icon-error.warning-color { color: #666; } .miniscreen .miniscreen-warning i.pillow-icon-error.error-color { color: #fa824c; } .miniscreen .miniscreen-warning i.pillow-icon-plus { color: #fff; font-size: 50%; border-radius: 50%; padding: 4px; } .miniscreen .miniscreen-warning i.pillow-icon-plus.warning-color { background: #666; } .miniscreen .miniscreen-warning i.pillow-icon-plus.error-color { background: #fa824c; } .navigation-miniscreen-container .miniscreen { max-height: 88px; } .navigation-miniscreen-container .miniscreen .graph-miniscreen { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-size: cover; background-position: center center; } .navigation-miniscreen-container .miniscreen .miniscreen-marbleslides, .navigation-miniscreen-container .miniscreen .graph-input-miniscreen-view { overflow: hidden; } .navigation-miniscreen-container .miniscreen .image-exhibit-miniscreen-view:after { border-radius: 0 0 0 3px; } .navigation-miniscreen-container .miniscreen .component-container .text-exhibit-miniscreen { font-size: 0.6em; } .navigation-miniscreen-container .miniscreen .sketch-miniscreen-view:not(.within-fullscreen-layout) .icon-container { font-size: 115%; margin-top: -20px; } .navigation-miniscreen-container .miniscreen .one-column .video-miniscreen .icon-container { margin-top: -46px; } .navigation-miniscreen-container .miniscreen .two-column .video-miniscreen .icon-container { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -o-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); margin-top: -35px; } /* src/js/activitybuilder/components/shared/layout/twocolumn-layout.styl */ .layout-top.two-column, .layout-top.layout-top-miniscreen.two-column { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .layout-top.two-column .dcg-layout-column, .layout-top.layout-top-miniscreen.two-column .dcg-layout-column { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .layout-top.two-column .dcg-layout-column:first-child.one-third, .layout-top.layout-top-miniscreen.two-column .dcg-layout-column:first-child.one-third { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0.5; -ms-flex: 0.5; flex: 0.5; max-width: 33.3%; } .layout-top.two-column .dcg-layout-column:first-child.two-third, .layout-top.layout-top-miniscreen.two-column .dcg-layout-column:first-child.two-third { -webkit-box-flex: 2; -moz-box-flex: 2; -o-box-flex: 2; box-flex: 2; -webkit-flex: 2; -ms-flex: 2; flex: 2; max-width: 66.6%; } .layout-top.two-column .dcg-layout-column:last-child.one-third, .layout-top.layout-top-miniscreen.two-column .dcg-layout-column:last-child.one-third { -webkit-box-flex: 2; -moz-box-flex: 2; -o-box-flex: 2; box-flex: 2; -webkit-flex: 2; -ms-flex: 2; flex: 2; max-width: 66.6%; } .layout-top.two-column .dcg-layout-column:last-child.two-third, .layout-top.layout-top-miniscreen.two-column .dcg-layout-column:last-child.two-third { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0.5; -ms-flex: 0.5; flex: 0.5; max-width: 33.3%; } .layout-top .component-container { height: 100%; } .layout-top-edit .dcg-layout-column { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 100%; width: 100%; margin: 0 auto; } .layout-top-edit .dcg-layout-column .component { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; width: 100%; margin: 0 auto; } .layout-top-edit .dcg-layout-column .component.not-expandable, .layout-top-edit .dcg-layout-column .component.sized-internally { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0; -ms-flex: 0; flex: 0; } .layout-top-edit:not(.fullscreen-layout) { max-width: 1000px; margin: 0 auto; width: 100%; } .layout-top-edit:not(.fullscreen-layout) .component:not(.sized-internally) { max-height: 610px; min-height: 260px; } .layout-top-edit.one-column .dcg-layout-column { max-width: 850px; } .layout-top-edit.fullscreen-layout .dcg-layout-column { max-width: 1300px; } .layout-top-edit.fullscreen-layout .component.not-expandable, .layout-top-edit:not(.fullscreen-layout) .component.not-expandable { min-height: fit-content; } .student-empty-screen-message { color: #bbb; text-align: center; width: 100%; padding: 30px 0; font-size: 120%; } .layout-top-student-view.showing-correctness:not(.fullscreen-layout) { max-width: 1098px; } .layout-top-student-view.showing-correctness.one-column .small-component { max-width: 648px; } .layout-top-student-view.showing-correctness.one-column .large-component { max-width: 798px; } .layout-top-student-view.showing-correctness.one-column .playground-component-container { margin-left: 49px; margin-right: 49px; } .layout-top-student-view.showing-correctness.two-column .small-component { max-width: 599px; } .layout-top-student-view.showing-correctness.two-column .large-component { max-width: 749px; } .layout-top-student-view.showing-correctness.two-column .playground-component-container.left { margin-left: 49px; } .layout-top-student-view.showing-correctness.two-column .playground-component-container.right { margin-right: 49px; } .layout-top-student-view:not(.showing-correctness):not(.fullscreen-layout) { max-width: 1000px; } .layout-top-student-view:not(.showing-correctness).two-column .small-component, .layout-top-student-view:not(.showing-correctness).one-column .small-component { max-width: 550px; } .layout-top-student-view:not(.showing-correctness).two-column .large-component, .layout-top-student-view:not(.showing-correctness).one-column .large-component { max-width: 700px; } .layout-top-student-view:not(.fullscreen-layout) { margin: 0 auto; } .layout-top-student-view.two-column .dcg-layout-column, .layout-top-student-view.one-column .dcg-layout-column { margin: 0 auto; position: relative; } .layout-top-student-view.two-column .dcg-layout-column .component, .layout-top-student-view.one-column .dcg-layout-column .component { margin: 0 auto; clear: both; } .layout-top-student-view.two-column .playground-component-container, .layout-top-student-view.one-column .playground-component-container { padding: 0 10px; } .layout-top-student-view.two-column .playground-component-container:not(.playground-action-button-above-graph), .layout-top-student-view.one-column .playground-component-container:not(.playground-action-button-above-graph) { margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .rtl-layout .layout-top-student-view:not(.fullscreen-layout) { -webkit-box-direction: reverse; -moz-box-direction: reverse; -o-box-direction: reverse; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } @media screen and (max-width: 600px) { .layout-top-student-view:not(.fullscreen-layout):not(.companion-mode), .layout-top-student-view.layout-top-student-view.playground-screen-alignment-center:not(.fullscreen-layout):not(.companion-mode) { -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .layout-top-student-view:not(.fullscreen-layout):not(.companion-mode) .dcg-layout-column, .layout-top-student-view.layout-top-student-view.playground-screen-alignment-center:not(.fullscreen-layout):not(.companion-mode) .dcg-layout-column { -webkit-flex-basis: 100%; flex-basis: 100%; } } @media screen and (max-width: 660px) { .layout-top-student-view.showing-correctness:not(.fullscreen-layout) { max-width: 1098px; } .layout-top-student-view.showing-correctness.one-column .small-component { max-width: 599px; } .layout-top-student-view.showing-correctness.one-column .large-component { max-width: 749px; } .layout-top-student-view.showing-correctness.two-column .playground-component-container, .layout-top-student-view.showing-correctness.one-column .playground-component-container { margin-left: 0; margin-right: 49px; } } .layout-top-summary { height: 100%; } .layout-top-summary .component-container { margin: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0 0; } .layout-top-summary .component-container > div { width: 100%; } .layout-top-summary .summary-student-thumbs { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * -1); } .layout-top-summary .sketch-teacher-view { margin-top: -7px; } .layout-top-summary.fullscreen-layout .summary-view-toggle { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .layout-top-summary.fullscreen-layout .graph-overlay, .layout-top-summary.fullscreen-layout .dcg-sketch-container { margin: 50px 10px 10px 10px; } .layout-top-summary.fullscreen-layout .col-fullscreen { width: 100%; } .layout-top-summary.fullscreen-layout .fixed-aspect-parent { height: calc(100% - 10px); } .layout-top-summary.fullscreen-layout .thumb-response .fixed-aspect-parent { height: 100%; } .layout-top-summary:not(.fullscreen-layout) > div { width: 50vw; padding: 0; } .layout-top-summary:not(.fullscreen-layout) .summary-student-thumbs { width: 100%; } .layout-top-summary:not(.fullscreen-layout) .graph-overlay, .layout-top-summary:not(.fullscreen-layout) .sketch-teacher-view { position: relative; width: 100%; padding-top: calc(100% - 2px); } .layout-top-summary:not(.fullscreen-layout) .background-checkbox-container { width: 50%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .layout-top-summary:not(.fullscreen-layout) .background-checkbox-container .amplify-checkbox { max-width: 100%; } .layout-top-summary:not(.fullscreen-layout) .background-checkbox-container label span:last-of-type { display: inline-block; height: 1.5em; width: 100%; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } @media screen and (max-width: 900px) and (min-width: 576px) { .layout-top-summary:not(.fullscreen-layout) .graph-overlay { top: 30px; } .layout-top-summary:not(.fullscreen-layout) .graph-overlay .background-checkbox-container { right: auto; width: 100%; -webkit-box-pack: start; -moz-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } } @media screen and (max-width: 910px) and (min-width: 576px) { .layout-top-summary:not(.fullscreen-layout) .sketch-teacher-view { top: 30px; } .layout-top-summary:not(.fullscreen-layout) .sketch-teacher-view .dcg-sketch-container .fixed-aspect-container .background-checkbox-container { right: auto; width: 100%; -webkit-box-pack: start; -moz-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } } @media screen and (min-width: 992px) { .layout-top-summary:not(.fullscreen-layout) > div { max-width: calc(396px + calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 4)); } } .layout-top-miniscreen { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .layout-top-miniscreen .dcg-layout-column { width: 100%; height: 100%; } .layout-top-miniscreen .dcg-layout-column:first-child.one-third { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0.5; -ms-flex: 0.5; flex: 0.5; } .layout-top-miniscreen .dcg-layout-column:first-child.two-third { -webkit-box-flex: 2; -moz-box-flex: 2; -o-box-flex: 2; box-flex: 2; -webkit-flex: 2; -ms-flex: 2; flex: 2; } .layout-top-miniscreen:not(.fullscreen-layout) { top: 30px; } .layout-top-miniscreen:not(.fullscreen-layout) .dcg-layout-column { position: relative; overflow: hidden; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .layout-top-miniscreen:not(.fullscreen-layout) .dcg-layout-column .component { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; position: relative; } .layout-top-miniscreen:not(.fullscreen-layout) .dcg-layout-column .miniscreen-component-container { width: 100%; height: 100%; } .layout-top-miniscreen:not(.fullscreen-layout) .dcg-layout-column:first-of-type { padding-left: 6px; padding-right: 3px; } .layout-top-miniscreen:not(.fullscreen-layout) .dcg-layout-column:last-of-type { padding-left: 3px; padding-right: 6px; } .layout-top-student-view.layout-top-student-view.playground-layout-k5 { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 1; -ms-flex: 1 1; flex: 1 1; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; max-width: none; width: 100%; } .layout-top-student-view.layout-top-student-view.playground-layout-k5.two-column { max-width: 1700px; } .layout-top-student-view.layout-top-student-view.playground-layout-k5 .dcg-layout-column { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; min-width: 550px; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 1; -ms-flex: 1 1; flex: 1 1; } .layout-top-student-view.layout-top-student-view.playground-layout-k5 .dcg-layout-column .component { margin: 0; } .layout-top-student-view.layout-top-student-view.playground-layout-k5 .small-component, .layout-top-student-view.layout-top-student-view.playground-layout-k5 .large-component { max-width: none; } .layout-top-student-view.layout-top-student-view.playground-screen-alignment-center { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 1; -ms-flex: 1 1; flex: 1 1; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; width: 100%; } .layout-top-student-view.layout-top-student-view.playground-screen-alignment-center .dcg-layout-column { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 1; -ms-flex: 1 1; flex: 1 1; } .layout-top-student-view.layout-top-student-view.playground-screen-alignment-center .dcg-layout-column .component { margin: 0; width: 100%; } /* src/js/activitybuilder/components/shared/narration.styl */ .narration-offscreen-aria, .narration-offscreen { position: absolute; top: -1000px; left: -1000px; width: 1px; height: 1px; overflow: hidden; } .narration-preview { display: inline-block; background: #dae6f1; border: 1px solid #a3c0dc; padding: 10px; border-radius: 5px; margin-top: 10px; margin-bottom: 50px; } .narration-preview .narration-title { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; margin-bottom: 5px; } /* src/js/activitybuilder/components/shared/other-students-responses/multiple-choice-student-response.styl */ .multiple-choice-response .dcg-choices-image-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .multiple-choice-response .choice-response { display: block; } .multiple-choice-response .choice-response.has-image { margin-bottom: 6px; height: 40px; } .multiple-choice-response .choice-response .dcg-choice-image-container { display: inline-block; border: 1px solid #e2e2e2; border-radius: 3px; float: left; margin-right: 6px; width: 40px; height: 40px; } .multiple-choice-response .choice-response .dcg-choice-image-container .dcg-choice-image { height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center center; border-radius: 3px; } .multiple-choice-response .choice-response .dcg-choice-image-container .dcg-choice-image.loading { background-color: #e2e2e2; -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; } .multiple-choice-response .choice-response .choice-text { display: inline-block; margin-bottom: 6px; margin-right: 6px; } .multiple-choice-response .choice-response .choice-text .mixed-text-display { padding: 0 6px; margin-left: 1px; border-left: 2px solid #e2e2e2; } .multiple-choice-response .no-choices-selected { color: #999; font-style: italic; } .multiple-choice-response .explanation-container { display: inline-block; white-space: pre-wrap; } .multiple-choice-response .explanation-container .explanation-text { color: #666; font-size: 90%; } /* src/js/activitybuilder/components/shared/other-students-responses/response-item.styl */ .woss-student-responses { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -moz-user-select: -moz-none; } .woss-student-responses .response-name { text-transform: uppercase; color: #676767; font-size: 90%; line-height: 2em; } .woss-student-responses .student-response-row { clear: both; } .woss-student-responses .student-response-row .dcg-mathquill-wrapper { display: inline; } .woss-student-responses .student-response-row .dcg-mathquill-wrapper .dcg-typeset-math, .woss-student-responses .student-response-row .dcg-mathquill-wrapper .dcg-mathquill-braille { display: inline; } .woss-student-responses .student-response-row .text-input-response-text { cursor: default !important; overflow-x: auto; } /* src/js/activitybuilder/components/shared/other-students-responses/view.styl */ .dcg-other-students-responses { position: relative; vertical-align: top; padding-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .dcg-other-students-responses .other-students-responses-placeholder { color: #999; border: 1px dashed #bbb; padding: 10px; margin-top: 40px; border-radius: 5px; font-style: italic; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .dcg-other-students-responses .other-student-name { text-transform: uppercase; color: #676767; display: block; } .dcg-other-students-responses .waiting-for-responses { color: #676767; margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); font-style: italic; } .dcg-other-students-responses .waiting-for-responses img { position: relative; top: 3px; width: 16px; margin-right: 5px; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .dcg-other-students-responses .student-response { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; } .dcg-other-students-responses .student-response:first-of-type { padding-top: 0; } .dcg-other-students-responses .student-response:last-of-type { padding-bottom: 0; } /* src/js/activitybuilder/components/shared/periscope-correctness-indicator.styl */ .periscope-correctness-container:not(.animating-out) .left { -webkit-animation: fadeInLeft 0.2s forwards; -moz-animation: fadeInLeft 0.2s forwards; -o-animation: fadeInLeft 0.2s forwards; -ms-animation: fadeInLeft 0.2s forwards; animation: fadeInLeft 0.2s forwards; } .periscope-correctness-container:not(.animating-out) .right { -webkit-animation: fadeInRight 0.2s forwards; -moz-animation: fadeInRight 0.2s forwards; -o-animation: fadeInRight 0.2s forwards; -ms-animation: fadeInRight 0.2s forwards; animation: fadeInRight 0.2s forwards; } .periscope-correctness-container.animating-out .left { -webkit-animation: fadeOutLeft 0.2s forwards; -moz-animation: fadeOutLeft 0.2s forwards; -o-animation: fadeOutLeft 0.2s forwards; -ms-animation: fadeOutLeft 0.2s forwards; animation: fadeOutLeft 0.2s forwards; } .periscope-correctness-container.animating-out .right { -webkit-animation: fadeOutRight 0.2s forwards; -moz-animation: fadeOutRight 0.2s forwards; -o-animation: fadeOutRight 0.2s forwards; -ms-animation: fadeOutRight 0.2s forwards; animation: fadeOutRight 0.2s forwards; } .periscope-correctness-container .correctness-gutter { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .periscope-correctness-container .correctness-gutter .separator { width: 5px; border-radius: 5px; margin: 0 10px; } .periscope-correctness-container .correctness-gutter .separator.correct { background: #3278c8; } .periscope-correctness-container .correctness-gutter .separator.incorrect { background: #fa824c; } .periscope-correctness-container .correctness-gutter .separator.incomplete { background: #767676; } .periscope-correctness-container .correctness-gutter .separator.warning { background: #676767; } .periscope-correctness-container .correctness-gutter.left { -webkit-box-direction: reverse; -moz-box-direction: reverse; -o-box-direction: reverse; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; position: absolute; top: 0; bottom: 0; left: var(--correctness-gutter-size, -49px); } .periscope-correctness-container .correctness-gutter.center, .periscope-correctness-container .correctness-gutter.right { position: absolute; top: 0; bottom: 0; right: var(--correctness-gutter-size, -49px); } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-$correctness-animation-distance); -moz-transform: translateX(-$correctness-animation-distance); -o-transform: translateX(-$correctness-animation-distance); -ms-transform: translateX(-$correctness-animation-distance); transform: translateX(-$correctness-animation-distance); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-$correctness-animation-distance); -moz-transform: translateX(-$correctness-animation-distance); -o-transform: translateX(-$correctness-animation-distance); -ms-transform: translateX(-$correctness-animation-distance); transform: translateX(-$correctness-animation-distance); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-$correctness-animation-distance); -moz-transform: translateX(-$correctness-animation-distance); -o-transform: translateX(-$correctness-animation-distance); -ms-transform: translateX(-$correctness-animation-distance); transform: translateX(-$correctness-animation-distance); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-$correctness-animation-distance); -moz-transform: translateX(-$correctness-animation-distance); -o-transform: translateX(-$correctness-animation-distance); -ms-transform: translateX(-$correctness-animation-distance); transform: translateX(-$correctness-animation-distance); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-$correctness-animation-distance); -moz-transform: translateX(-$correctness-animation-distance); -o-transform: translateX(-$correctness-animation-distance); -ms-transform: translateX(-$correctness-animation-distance); transform: translateX(-$correctness-animation-distance); } } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-$correctness-animation-distance); -moz-transform: translateX(-$correctness-animation-distance); -o-transform: translateX(-$correctness-animation-distance); -ms-transform: translateX(-$correctness-animation-distance); transform: translateX(-$correctness-animation-distance); } } @-o-keyframes fadeOutLeft { 0% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-$correctness-animation-distance); -moz-transform: translateX(-$correctness-animation-distance); -o-transform: translateX(-$correctness-animation-distance); -ms-transform: translateX(-$correctness-animation-distance); transform: translateX(-$correctness-animation-distance); } } @keyframes fadeOutLeft { 0% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-$correctness-animation-distance); -moz-transform: translateX(-$correctness-animation-distance); -o-transform: translateX(-$correctness-animation-distance); -ms-transform: translateX(-$correctness-animation-distance); transform: translateX(-$correctness-animation-distance); } } @-moz-keyframes fadeOutRight { 0% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } @-o-keyframes fadeOutRight { 0% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } /* src/js/activitybuilder/components/shared/prosemirror/color-menu-item.styl */ .prosemirror-editing-menu .prosemirror-menu-item.menu-item-color, .prosemirror-editing-menu .prosemirror-menu-item.menu-item-color:not(.active):not(.disabled).dcg-hovered { color: currentColor; } .prosemirror-editing-menu .prosemirror-menu-item.menu-item-color .item-text { background-color: currentColor; } .color-modal-contents { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .color-modal-contents .color-modal-title { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); font-size: 120%; } .color-modal-contents .error { text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; margin-bottom: 10px; } .color-modal-contents input { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; } .color-modal-contents .submit-link-container { text-align: right; } /* src/js/activitybuilder/components/shared/prosemirror/inline-math-static-node.styl */ .inline-math-static-node { border: 1px solid #bdbdbd; display: inline-block; min-width: 16px; min-height: 9px; border-radius: 2px; vertical-align: middle; } /* src/js/activitybuilder/components/shared/prosemirror/interp-node.styl */ .interp-node { display: inline-block; font-family: monospace; position: relative; top: -1px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; vertical-align: middle; max-width: 100%; margin-right: 1px; margin-left: 1px; } .interp-node .interp-node-view { background: #15b097; border-radius: 5px; padding: 3px 4px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .interp-node .interp-node-view.selected { background: #0f8371; } .interp-node .interp-node-view.incomplete, .interp-node .interp-node-view .invalid { background: transparent; border: 1px solid #15b097; } .interp-node .interp-node-view.incomplete input, .interp-node .interp-node-view .invalid input { color: #000; } .interp-node .interp-node-view.invalid input { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg=="); background-position: bottom; background-repeat: repeat-x; } .interp-node .interp-node-view input { background: transparent; display: inline-block; font-size: 100%; outline: none; font-family: monospace; border: none; min-width: 12px; color: #fff; text-align: center; padding: 0; margin: 0; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .interp-node .interp-node-view input[disabled=true] { pointer-events: none; } .interp-lint-tooltip { background-color: #feeba1; -webkit-box-shadow: 0 0 5px #bbb; box-shadow: 0 0 5px #bbb; border-radius: 4px; color: #000; font-family: monospace; font-size: 10pt; padding: 10px; position: fixed; white-space: nowrap; overflow: hidden; } em .interp-node-input { font-style: italic; } strong .interp-node-input { font-weight: bolder; } u .interp-node-input { text-decoration: underline; } .color-node .interp-node-input { color: inherit !important; } a .interp-node-view:before { content: "\e95a"; font-family: 'desmos-icons' !important; speak: never; text-transform: none; line-height: 1; font-style: normal; font-weight: normal; } .interp.autocomplete { font-size: 90%; font-family: monospace; } /* src/js/activitybuilder/components/shared/prosemirror/link-menu-item.styl */ .modal-cover .link-modal-container { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) calc(var(--rhythm-unit-px, 12) / 16 * 1rem) calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .modal-cover .link-modal-container .link-modal-header { font-size: 130%; margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .modal-cover .link-modal-container .link-href { width: 100%; margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .modal-cover .submit-link-container { text-align: right; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .modal-cover .btn-link { margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1); } /* src/js/activitybuilder/components/shared/prosemirror/math-response-view.styl */ .inline-math { display: inline-block; vertical-align: middle; } .inline-math .dcg-expression-input-container .input-and-error-container .dcg-expression-input { border-radius: var(--border-radius-medium, 7px); min-width: var(--inline-math-empty-width, 81px); background-color: var(--math-input-background-color, #fff); padding: var(--inline-math-padding, 5px); height: var(--inline-math-overall-height, 36px); -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .inline-math .dcg-expression-input-container .input-and-error-container .dcg-expression-input.is-error { background-color: var(--field-has-error-background-color); border-color: var(--field-has-error-border-color, #bdbdbd); } .inline-math .dcg-expression-input-container .input-and-error-container .dcg-expression-input.dcg-mq-focused { border-color: var(--math-input-border-color-focus, #9c0d63); } .inline-math .dcg-expression-input-container .input-and-error-container .dcg-expression-input .mathquill-auto-flexer { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; min-width: var(--inline-math-input-min-width, 35px); max-width: var(--inline-math-input-max-width, 75px); } .inline-math .dcg-expression-input-container .input-and-error-container .dcg-expression-input .mathquill-auto-flexer.is-hidden { width: 0; min-width: 0; max-width: 0; } .inline-math .dcg-expression-input-container .input-and-error-container .dcg-expression-input .mathquill-auto-flexer .dcg-mathquill-wrapper { display: inline-block; padding: 0; text-align: var(--inline-math-text-align, right); } .inline-math .dcg-expression-input-container .input-and-error-container .dcg-expression-input .dcg-tooltip-hit-area-container { margin: var(--inline-math-keypad-button-margin, 0); } .inline-math .dcg-expression-input-container .input-and-error-container .dcg-expression-input .dcg-tooltip-hit-area-container .inline-keypad-button { border: none; padding: 0; height: 27px; } .inline-math .dcg-expression-input-container .input-and-error-container .dcg-expression-input .dcg-tooltip-hit-area-container .dcg-toggle-keypad-button .icon-v2-keyboard { margin: 0 2px; } .inline-math .dcg-expression-input-container .input-and-error-container .mq-error-message { margin: 0; } .inline-math .dcg-expression-input-container .input-and-error-container .mq-error-message .dcg-tooltip-hit-area-container { margin: 0 0 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } @media screen and (max-width: 575px) { .inline-math .input-and-button-container { margin-bottom: calc(20px + calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2)); } .inline-math .input-and-error-container .mq-error-message { position: absolute; top: 100%; margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .inline-math .input-and-error-container .mq-error-message .error-text-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .inline-math .input-and-error-container .mq-error-message .error-tooltip-container { display: none; } } /* src/js/activitybuilder/components/shared/prosemirror/menu-item.styl */ .prosemirror-menu-item .dcg-tooltip-hit-area-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .prosemirror-menu-item.dcg-shared-dropdown-popover-container .dropdown-container:not(.dropdown-pops-right) { right: -10px; -webkit-animation: fadeInUp 0.2s; -moz-animation: fadeInUp 0.2s; -o-animation: fadeInUp 0.2s; -ms-animation: fadeInUp 0.2s; animation: fadeInUp 0.2s; margin-bottom: 3px; } .prosemirror-menu-item.dcg-shared-dropdown-popover-container .dropdown-container:not(.dropdown-pops-right):after { content: ""; position: absolute; bottom: -9px; right: 7px; border-width: 9px; border-bottom-width: 0; border-style: solid; border-color: #fff transparent transparent transparent; line-height: 0; } .prosemirror-menu-item.dcg-shared-dropdown-popover-container .dropdown-container:not(.dropdown-pops-right):before { content: ""; position: absolute; bottom: -10px; right: 6px; border-width: 10px; border-bottom-width: 0; border-style: solid; border-color: #bdbdbd transparent transparent transparent; line-height: 0; } /* src/js/activitybuilder/components/shared/prosemirror/mq-node.styl */ .dcg-mq-node { position: relative; -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; display: inline-block; } .dcg-mq-node .dcg-calculator-api-container .dcg-mq-math-mode { border: 1px solid transparent; } .dcg-mq-node .dcg-calculator-api-container .dcg-mq-math-mode .dcg-mq-root-block { overflow: visible; vertical-align: baseline; } .dcg-mq-node .dcg-calculator-api-container .dcg-mq-math-mode.dcg-mq-focused { -webkit-box-shadow: none; box-shadow: none; border: 1px dotted #999; } .dcg-mq-node .dcg-calculator-api-container .dcg-mq-math-mode * { -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; } .dcg-mq-node .dcg-calculator-api-container .dcg-mq-math-mode * ::selection { background: rgba(0,0,0,0); } .dcg-mq-node .dcg-calculator-api-container .dcg-mq-math-mode * ::-moz-selection { background: rgba(0,0,0,0); } .dcg-mq-node .dcg-mq-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; border: 0; -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; } /* src/js/activitybuilder/components/shared/prosemirror/prosemirror-custom.styl */ .prosemirror-container { position: relative; } .prosemirror-container .dcg-mathquill-wrapper { display: inline; } .prosemirror-container .dcg-mathquill-wrapper .dcg-typeset-math, .prosemirror-container .dcg-mathquill-wrapper .dcg-mathquill-braille { display: inline; } .prosemirror-container .dcg-mathquill-wrapper .dcg-typeset-math .dcg-inline-braille, .prosemirror-container .dcg-mathquill-wrapper .dcg-mathquill-braille .dcg-inline-braille { font-size: 100%; } .prosemirror-container .dcg-prosemirror-editor { -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; position: relative; z-index: 0; } .prosemirror-container .dcg-prosemirror-editor .ProseMirror { outline: none; -webkit-user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .prosemirror-container .dcg-prosemirror-editor p { margin: 0; padding: 0; } .prosemirror-container .dcg-prosemirror-editor h1, .prosemirror-container .dcg-prosemirror-editor h2 { line-height: 1.2em; margin: 0; } .prosemirror-container .dcg-prosemirror-editor ul { margin: 10px 0; padding: 0 10px; list-style-position: outside; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .prosemirror-container .dcg-prosemirror-editor ul li { margin-left: 12px; } .prosemirror-container h1.pm-right-align, .prosemirror-container h2.pm-right-align, .prosemirror-container h3.pm-right-align, .prosemirror-container h4.pm-right-align, .prosemirror-container h5.pm-right-align, .prosemirror-container h6.pm-right-align, .prosemirror-container p.pm-right-align { text-align: right; } .prosemirror-container h1.pm-center-align, .prosemirror-container h2.pm-center-align, .prosemirror-container h3.pm-center-align, .prosemirror-container h4.pm-center-align, .prosemirror-container h5.pm-center-align, .prosemirror-container h6.pm-center-align, .prosemirror-container p.pm-center-align { text-align: center; } .prosemirror-container li.pm-center-align { -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; } .prosemirror-container li.pm-right-align { -webkit-align-self: flex-end; align-self: flex-end; -ms-flex-item-align: end; } /* src/js/activitybuilder/components/shared/prosemirror/prosemirror-editing-menu.styl */ .prosemirror-editing-menu { padding: 4px; width: 100%; background: #f7f7f7; } .prosemirror-editing-menu .items-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 4px; } .prosemirror-editing-menu .items-container .item-group { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .prosemirror-editing-menu .items-container .item-group:not(:last-child) { margin-right: 4px; } .prosemirror-editing-menu .items-container .item-group:last-child { margin-left: auto; } .prosemirror-editing-menu .items-container .item-group.single-item-group .prosemirror-menu-item { border-radius: 5px; } .prosemirror-editing-menu .items-container .item-group:not(.single-item-group):not(.item-group-nested) .prosemirror-menu-item { border-radius: 0; margin-right: -1px; } .prosemirror-editing-menu .items-container .item-group:not(.single-item-group):not(.item-group-nested) > :first-child.prosemirror-menu-item, .prosemirror-editing-menu .items-container .item-group:not(.single-item-group):not(.item-group-nested) > :first-child .prosemirror-menu-item { border-radius: 5px 0 0 5px; } .prosemirror-editing-menu .items-container .item-group:not(.single-item-group):not(.item-group-nested) > :last-child.prosemirror-menu-item, .prosemirror-editing-menu .items-container .item-group:not(.single-item-group):not(.item-group-nested) > :last-child .prosemirror-menu-item { border-radius: 0 5px 5px 0; } .prosemirror-editing-menu .items-container .item-group:not(.single-item-group):not(.item-group-nested):not(:first-child).active { border-left-color: #bdbdbd; } .prosemirror-editing-menu .items-container .item-group .item-group-nested { padding: 0 5px; } .prosemirror-editing-menu .items-container .item-group .item-group-nested .prosemirror-menu-item { border: none; cursor: pointer; margin: 1px; border-radius: 5px; } .prosemirror-editing-menu .items-container .item-group .item-group-nested .prosemirror-menu-item.dcg-hovered:not(.active) { color: #333; background: rgba(0,0,0,0.05); } .prosemirror-editing-menu .items-container .item-group .item-group-nested .prosemirror-menu-item.dcg-depressed:not(.active) { color: #000; background: rgba(0,0,0,0.08); } .prosemirror-editing-menu .items-container .item-group .item-group-nested .prosemirror-menu-item.active { background: #3278c8; color: #fff; } .prosemirror-editing-menu .prosemirror-menu-item { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; text-align: center; width: 35px; height: 35px; line-height: 32px; background: #fff; color: #666; border: 1px solid #bdbdbd; position: relative; } .prosemirror-editing-menu .prosemirror-menu-item.prosemirror-menu-group-trigger { width: 40px; } .prosemirror-editing-menu .prosemirror-menu-item.prosemirror-menu-group-trigger .icon-v2-caret-up { font-size: 8px; margin-left: 2px; } .prosemirror-editing-menu .prosemirror-menu-item.prosemirror-menu-group-trigger .item-icons { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .prosemirror-editing-menu .prosemirror-menu-item.active:not(.disabled):not(.menu-item-block), .prosemirror-editing-menu .prosemirror-menu-item.active.menu-item-block { color: #fff; border-color: #666; background: #666; } .prosemirror-editing-menu .prosemirror-menu-item:not(.active):not(.disabled).dcg-hovered { border-color: #999; color: #333; z-index: 1; } .prosemirror-editing-menu .prosemirror-menu-item:not(.active):not(.disabled).dcg-depressed { background: rgba(0,0,0,0.03); } .prosemirror-editing-menu .prosemirror-menu-item.disabled:not(.active.menu-item-block) { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); cursor: default; } .prosemirror-editing-menu .prosemirror-menu-item.menu-item-interp .pillow-icon-interpolate { font-size: 120%; position: relative; left: 1px; } .prosemirror-editing-menu .prosemirror-menu-item.menu-item-link { font-size: 90%; } .prosemirror-editing-menu .prosemirror-menu-item.menu-item-h1 { font-size: 125%; } .prosemirror-editing-menu .prosemirror-menu-item.menu-item-h2 { font-size: 100%; } .prosemirror-editing-menu .prosemirror-menu-item.menu-item-p { font-size: 80%; } .prosemirror-editing-menu .prosemirror-menu-item .tooltip-when-disabled { position: relative; top: 0; right: 0; bottom: 0; left: 0; cursor: unset !important; } .prosemirror-editing-menu .interp-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .prosemirror-editing-menu a.help-link { color: #666; text-decoration: none; margin: 0 4px; font-size: 110%; opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); position: relative; top: 2px; } .prosemirror-editing-menu a.help-link i { font-size: 120%; } .prosemirror-editing-menu a.help-link.dcg-hovered { opacity: 1; -ms-filter: none; filter: none; } .prosemirror-editing-menu a.help-link.dcg-depressed { color: #4c4c4c; } /* src/js/activitybuilder/components/shared/prosemirror/prosemirror-format-menu.styl */ .prosemirror-format-menu.with-label { padding: 5px 10px; min-height: 45px; } .prosemirror-format-menu.with-label .menu-label { font-size: 90%; -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .prosemirror-format-menu.with-label .items-container { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: auto; -ms-flex: auto; flex: auto; } .prosemirror-format-menu.with-label .items-container .item-group { display: contents; } .prosemirror-format-menu .prosemirror-menu-item, .prosemirror-format-menu .link-container, .prosemirror-format-menu .img-container { display: inline-block; text-align: center; } .prosemirror-format-menu .prosemirror-menu-item .dcg-tooltip-hit-area-container, .prosemirror-format-menu .link-container .dcg-tooltip-hit-area-container, .prosemirror-format-menu .img-container .dcg-tooltip-hit-area-container { height: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-block, .prosemirror-format-menu .link-container.menu-item-block, .prosemirror-format-menu .img-container.menu-item-block, .prosemirror-format-menu .prosemirror-menu-item.menu-item-mark, .prosemirror-format-menu .link-container.menu-item-mark, .prosemirror-format-menu .img-container.menu-item-mark, .prosemirror-format-menu .prosemirror-menu-item.menu-item-font, .prosemirror-format-menu .link-container.menu-item-font, .prosemirror-format-menu .img-container.menu-item-font, .prosemirror-format-menu .prosemirror-menu-item.menu-item-link, .prosemirror-format-menu .link-container.menu-item-link, .prosemirror-format-menu .img-container.menu-item-link, .prosemirror-format-menu .prosemirror-menu-item.menu-item-mq, .prosemirror-format-menu .link-container.menu-item-mq, .prosemirror-format-menu .img-container.menu-item-mq, .prosemirror-format-menu .prosemirror-menu-item.menu-item-ul, .prosemirror-format-menu .link-container.menu-item-ul, .prosemirror-format-menu .img-container.menu-item-ul, .prosemirror-format-menu .prosemirror-menu-item.menu-item-img, .prosemirror-format-menu .link-container.menu-item-img, .prosemirror-format-menu .img-container.menu-item-img { vertical-align: middle; width: 40px; height: 35px; line-height: 35px; color: #3b3b3b; cursor: pointer; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-block *, .prosemirror-format-menu .link-container.menu-item-block *, .prosemirror-format-menu .img-container.menu-item-block *, .prosemirror-format-menu .prosemirror-menu-item.menu-item-mark *, .prosemirror-format-menu .link-container.menu-item-mark *, .prosemirror-format-menu .img-container.menu-item-mark *, .prosemirror-format-menu .prosemirror-menu-item.menu-item-font *, .prosemirror-format-menu .link-container.menu-item-font *, .prosemirror-format-menu .img-container.menu-item-font *, .prosemirror-format-menu .prosemirror-menu-item.menu-item-link *, .prosemirror-format-menu .link-container.menu-item-link *, .prosemirror-format-menu .img-container.menu-item-link *, .prosemirror-format-menu .prosemirror-menu-item.menu-item-mq *, .prosemirror-format-menu .link-container.menu-item-mq *, .prosemirror-format-menu .img-container.menu-item-mq *, .prosemirror-format-menu .prosemirror-menu-item.menu-item-ul *, .prosemirror-format-menu .link-container.menu-item-ul *, .prosemirror-format-menu .img-container.menu-item-ul *, .prosemirror-format-menu .prosemirror-menu-item.menu-item-img *, .prosemirror-format-menu .link-container.menu-item-img *, .prosemirror-format-menu .img-container.menu-item-img * { cursor: pointer; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-block.disabled, .prosemirror-format-menu .link-container.menu-item-block.disabled, .prosemirror-format-menu .img-container.menu-item-block.disabled, .prosemirror-format-menu .prosemirror-menu-item.menu-item-mark.disabled, .prosemirror-format-menu .link-container.menu-item-mark.disabled, .prosemirror-format-menu .img-container.menu-item-mark.disabled, .prosemirror-format-menu .prosemirror-menu-item.menu-item-link.disabled, .prosemirror-format-menu .link-container.menu-item-link.disabled, .prosemirror-format-menu .img-container.menu-item-link.disabled, .prosemirror-format-menu .prosemirror-menu-item.menu-item-ul.disabled, .prosemirror-format-menu .link-container.menu-item-ul.disabled, .prosemirror-format-menu .img-container.menu-item-ul.disabled, .prosemirror-format-menu .prosemirror-menu-item.menu-item-mq.disabled, .prosemirror-format-menu .link-container.menu-item-mq.disabled, .prosemirror-format-menu .img-container.menu-item-mq.disabled { opacity: 0.3; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); cursor: default; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-block.disabled *, .prosemirror-format-menu .link-container.menu-item-block.disabled *, .prosemirror-format-menu .img-container.menu-item-block.disabled *, .prosemirror-format-menu .prosemirror-menu-item.menu-item-mark.disabled *, .prosemirror-format-menu .link-container.menu-item-mark.disabled *, .prosemirror-format-menu .img-container.menu-item-mark.disabled *, .prosemirror-format-menu .prosemirror-menu-item.menu-item-link.disabled *, .prosemirror-format-menu .link-container.menu-item-link.disabled *, .prosemirror-format-menu .img-container.menu-item-link.disabled *, .prosemirror-format-menu .prosemirror-menu-item.menu-item-ul.disabled *, .prosemirror-format-menu .link-container.menu-item-ul.disabled *, .prosemirror-format-menu .img-container.menu-item-ul.disabled *, .prosemirror-format-menu .prosemirror-menu-item.menu-item-mq.disabled *, .prosemirror-format-menu .link-container.menu-item-mq.disabled *, .prosemirror-format-menu .img-container.menu-item-mq.disabled * { cursor: default; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-block.menu-item-strong, .prosemirror-format-menu .link-container.menu-item-block.menu-item-strong, .prosemirror-format-menu .img-container.menu-item-block.menu-item-strong, .prosemirror-format-menu .prosemirror-menu-item.menu-item-mark.menu-item-strong, .prosemirror-format-menu .link-container.menu-item-mark.menu-item-strong, .prosemirror-format-menu .img-container.menu-item-mark.menu-item-strong, .prosemirror-format-menu .prosemirror-menu-item.menu-item-link.menu-item-strong, .prosemirror-format-menu .link-container.menu-item-link.menu-item-strong, .prosemirror-format-menu .img-container.menu-item-link.menu-item-strong, .prosemirror-format-menu .prosemirror-menu-item.menu-item-ul.menu-item-strong, .prosemirror-format-menu .link-container.menu-item-ul.menu-item-strong, .prosemirror-format-menu .img-container.menu-item-ul.menu-item-strong, .prosemirror-format-menu .prosemirror-menu-item.menu-item-mq.menu-item-strong, .prosemirror-format-menu .link-container.menu-item-mq.menu-item-strong, .prosemirror-format-menu .img-container.menu-item-mq.menu-item-strong { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-block.menu-item-em, .prosemirror-format-menu .link-container.menu-item-block.menu-item-em, .prosemirror-format-menu .img-container.menu-item-block.menu-item-em, .prosemirror-format-menu .prosemirror-menu-item.menu-item-mark.menu-item-em, .prosemirror-format-menu .link-container.menu-item-mark.menu-item-em, .prosemirror-format-menu .img-container.menu-item-mark.menu-item-em, .prosemirror-format-menu .prosemirror-menu-item.menu-item-link.menu-item-em, .prosemirror-format-menu .link-container.menu-item-link.menu-item-em, .prosemirror-format-menu .img-container.menu-item-link.menu-item-em, .prosemirror-format-menu .prosemirror-menu-item.menu-item-ul.menu-item-em, .prosemirror-format-menu .link-container.menu-item-ul.menu-item-em, .prosemirror-format-menu .img-container.menu-item-ul.menu-item-em, .prosemirror-format-menu .prosemirror-menu-item.menu-item-mq.menu-item-em, .prosemirror-format-menu .link-container.menu-item-mq.menu-item-em, .prosemirror-format-menu .img-container.menu-item-mq.menu-item-em { font-style: italic; font-family: "BreeSerif", "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-block.menu-item-em span, .prosemirror-format-menu .link-container.menu-item-block.menu-item-em span, .prosemirror-format-menu .img-container.menu-item-block.menu-item-em span, .prosemirror-format-menu .prosemirror-menu-item.menu-item-mark.menu-item-em span, .prosemirror-format-menu .link-container.menu-item-mark.menu-item-em span, .prosemirror-format-menu .img-container.menu-item-mark.menu-item-em span, .prosemirror-format-menu .prosemirror-menu-item.menu-item-link.menu-item-em span, .prosemirror-format-menu .link-container.menu-item-link.menu-item-em span, .prosemirror-format-menu .img-container.menu-item-link.menu-item-em span, .prosemirror-format-menu .prosemirror-menu-item.menu-item-ul.menu-item-em span, .prosemirror-format-menu .link-container.menu-item-ul.menu-item-em span, .prosemirror-format-menu .img-container.menu-item-ul.menu-item-em span, .prosemirror-format-menu .prosemirror-menu-item.menu-item-mq.menu-item-em span, .prosemirror-format-menu .link-container.menu-item-mq.menu-item-em span, .prosemirror-format-menu .img-container.menu-item-mq.menu-item-em span { position: relative; left: -1px; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-mark, .prosemirror-format-menu .link-container.menu-item-mark, .prosemirror-format-menu .img-container.menu-item-mark { font-size: 120%; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-link:not(.disabled) i, .prosemirror-format-menu .link-container.menu-item-link:not(.disabled) i, .prosemirror-format-menu .img-container.menu-item-link:not(.disabled) i { color: #3b3b3b; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-font, .prosemirror-format-menu .link-container.menu-item-font, .prosemirror-format-menu .img-container.menu-item-font { font-family: "BreeSerif", "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif; border: 1px solid #bdbdbd; border-right: 0; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-font.disabled:not(.active), .prosemirror-format-menu .link-container.menu-item-font.disabled:not(.active), .prosemirror-format-menu .img-container.menu-item-font.disabled:not(.active) { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); cursor: default; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-font.menu-item-small, .prosemirror-format-menu .link-container.menu-item-font.menu-item-small, .prosemirror-format-menu .img-container.menu-item-font.menu-item-small { margin-left: 5px; font-size: 100%; border-radius: 0.1875em 0 0 0.1875em; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-font.menu-item-medium, .prosemirror-format-menu .link-container.menu-item-font.menu-item-medium, .prosemirror-format-menu .img-container.menu-item-font.menu-item-medium { font-size: 130%; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-font.menu-item-large, .prosemirror-format-menu .link-container.menu-item-font.menu-item-large, .prosemirror-format-menu .img-container.menu-item-font.menu-item-large { font-size: 160%; margin-right: 5px; border-radius: 0 0.1875em 0.1875em 0; border-right: 1px solid #bdbdbd; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-font.menu-item-large.active, .prosemirror-format-menu .link-container.menu-item-font.menu-item-large.active, .prosemirror-format-menu .img-container.menu-item-font.menu-item-large.active { border-right: 1px solid #bdbdbd; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-font.active, .prosemirror-format-menu .link-container.menu-item-font.active, .prosemirror-format-menu .img-container.menu-item-font.active { pointer-events: none; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-mq .dcg-tooltip-hit-area-container, .prosemirror-format-menu .link-container.menu-item-mq .dcg-tooltip-hit-area-container, .prosemirror-format-menu .img-container.menu-item-mq .dcg-tooltip-hit-area-container { line-height: 40px; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-h2, .prosemirror-format-menu .link-container.menu-item-h2, .prosemirror-format-menu .img-container.menu-item-h2 { font-size: 125%; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-h3, .prosemirror-format-menu .link-container.menu-item-h3, .prosemirror-format-menu .img-container.menu-item-h3 { font-size: 100%; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-p, .prosemirror-format-menu .link-container.menu-item-p, .prosemirror-format-menu .img-container.menu-item-p { font-size: 80%; } .prosemirror-format-menu .prosemirror-menu-item.menu-item-em, .prosemirror-format-menu .link-container.menu-item-em, .prosemirror-format-menu .img-container.menu-item-em, .prosemirror-format-menu .prosemirror-menu-item.menu-item-strong, .prosemirror-format-menu .link-container.menu-item-strong, .prosemirror-format-menu .img-container.menu-item-strong, .prosemirror-format-menu .prosemirror-menu-item.menu-item-underline, .prosemirror-format-menu .link-container.menu-item-underline, .prosemirror-format-menu .img-container.menu-item-underline { font-size: 90%; } :not(.alignment-editor) .prosemirror-format-menu { border: 1px solid #bdbdbd; border-bottom: 0; display: inline-block; border-radius: 0.1875em 0.1875em 0 0; } :not(.alignment-editor) .prosemirror-format-menu .item-group > :last-child .prosemirror-menu-item { border-right: 0px; } :not(.alignment-editor) .prosemirror-format-menu .prosemirror-menu-item { border-right: 1px solid #bdbdbd; } :not(.alignment-editor) .prosemirror-format-menu .prosemirror-menu-item:last-of-type:not(:first-of-type) { border-right: 0; } :not(.alignment-editor) .prosemirror-format-menu .prosemirror-menu-item.active { background: #e2e2e2; color: #333; } :not(.alignment-editor) .prosemirror-format-menu .prosemirror-menu-item:not(.disabled):not(.active).dcg-hovered { background: #eee; } :not(.alignment-editor) .prosemirror-format-menu .prosemirror-menu-item:not(.disabled):not(.active).dcg-depressed { background: #bbb; } .alignment-editor .prosemirror-format-menu { width: 100%; background: rgba(255,255,255,0.9); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .alignment-editor .prosemirror-format-menu .prosemirror-menu-item.menu-item-block, .alignment-editor .prosemirror-format-menu .prosemirror-menu-item.menu-item-mark, .alignment-editor .prosemirror-format-menu .prosemirror-menu-item.menu-item-link, .alignment-editor .prosemirror-format-menu .prosemirror-menu-item.menu-item-mq, .alignment-editor .prosemirror-format-menu .prosemirror-menu-item.menu-item-font, .alignment-editor .prosemirror-format-menu .prosemirror-menu-item.menu-item-ul { background: #f7f7f7; } .alignment-editor .prosemirror-format-menu .prosemirror-menu-item.menu-item-block, .alignment-editor .prosemirror-format-menu .prosemirror-menu-item.menu-item-mark, .alignment-editor .prosemirror-format-menu .prosemirror-menu-item.menu-item-link, .alignment-editor .prosemirror-format-menu .prosemirror-menu-item.menu-item-mq, .alignment-editor .prosemirror-format-menu .prosemirror-menu-item.menu-item-ul { margin: 0 5px; border-radius: 0.1875em; border: 1px solid #bdbdbd; } .alignment-editor .prosemirror-format-menu .prosemirror-menu-item.active { background: #777; color: #fff; border-color: #bdbdbd; } .alignment-editor .prosemirror-format-menu .prosemirror-menu-item:not(.disabled):not(.active).dcg-hovered { background: #e2e2e2; } .alignment-editor .prosemirror-format-menu .prosemirror-menu-item:not(.disabled):not(.active).dcg-depressed { background: #bbb; } /* src/js/activitybuilder/components/shared/prosemirror/prosemirror-lesson.styl */ .prosemirror-lesson .prosemirror-container { color: #3b3b3b; line-height: 1.2em; } .prosemirror-lesson .prosemirror-container p { margin: 10px 0; } .prosemirror-lesson .prosemirror-container p:first-child { margin-top: 0; } .prosemirror-lesson .prosemirror-container p:last-child { margin-bottom: 0; } .prosemirror-lesson .prosemirror-container li { margin: 10px 0; } .prosemirror-lesson .prosemirror-container h3 { font-size: 1.17em; line-height: 1.2em; } .prosemirror-lesson .prosemirror-container h3:not(:first-of-type) { margin-top: 20px; } .prosemirror-lesson .prosemirror-container h2 { font-size: 160%; margin-bottom: 20px; } /* src/js/activitybuilder/components/shared/prosemirror/prosemirror-menu.styl */ .prosemirror-menu { position: absolute; right: 3px; bottom: 3px; } .prosemirror-menu .prosemirror-menu-item { width: 34px; height: 34px; border-radius: 0.1875em; background: #fff; color: #3b3b3b; border: 1px solid #bdbdbd; display: inline-block; text-align: center; line-height: 36px; } .prosemirror-menu .prosemirror-menu-item.dcg-hovered { border-color: #9c0d63; } .prosemirror-menu .prosemirror-menu-item.dcg-depressed { background: rgba(0,0,0,0.2); border-color: #5e083b; } .pm-image-upload-modal-contents .file-drop-box { height: 100px; max-width: 300px; margin: 20px auto; } /* src/js/activitybuilder/components/shared/prosemirror/rich-text-view.styl */ .rich-text-view.rich-text-view--editable .prosemirror-container .ProseMirror { position: relative; padding: 10px; } .rich-text-view.rich-text-view--editable .prosemirror-format-menu { position: absolute; top: -36px; right: 0; width: auto; text-align: right; } .rich-text-view .prosemirror-container .dcg-prosemirror-editor .prosemirror-placeholder { color: #676767; position: absolute; top: 0; left: 0; z-index: -1; padding: 10px; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-style: italic; font-size: 0.85em; } .rich-text-view .prosemirror-container .dcg-prosemirror-editor h1 { font-size: 1.6em; font-weight: 400; line-height: 1.6em; } .rich-text-view .prosemirror-container .dcg-prosemirror-editor h1, .rich-text-view .prosemirror-container .dcg-prosemirror-editor h2, .rich-text-view .prosemirror-container .dcg-prosemirror-editor h3 { margin: 0.5em 0; text-align: left; } .rich-text-view .prosemirror-container .dcg-prosemirror-editor a { color: #3b3b3b; text-decoration: underline; } .rich-text-view .prosemirror-container .dcg-prosemirror-editor a:hover, .rich-text-view .prosemirror-container .dcg-prosemirror-editor a:focus-visible { color: #000; text-decoration: none; } .rich-text-view .prosemirror-container .dcg-prosemirror-editor strong { font-weight: 500; } /* src/js/activitybuilder/components/shared/read-text-aloud/audio-player.styl */ .play-stop-error-container .pillow-icon-error { display: block; color: #d8a202; width: 48px; height: 48px; font-size: 52px; margin-right: 10px; } /* src/js/activitybuilder/components/shared/read-text-aloud/play-stop-audio-player.styl */ .read-aloud-speaker { margin-right: 10px; border-radius: 50%; } .read-aloud-speaker-icon-container { width: fit-content; height: fit-content; border-radius: 50%; padding-bottom: 2px; background-color: #008571; } .read-aloud-speaker-icon-pulse-container { width: fit-content; height: fit-content; border-radius: 50%; padding-bottom: 2px; background-color: #def7f1; } .pillow-icon-read-aloud-speaker { display: block; color: #005347; background-color: #def7f1; border-radius: 50%; width: 48px; height: 48px; font-size: 52px; } .pillow-icon-read-aloud-speaker:hover { display: block; color: #005347; background-color: #a3ece0; border-radius: 50%; width: 48px; height: 48px; font-size: 52px; } .pillow-icon-read-aloud-speaker-pulse-0, .pillow-icon-read-aloud-speaker-pulse-1, .pillow-icon-read-aloud-speaker-pulse-2 { display: block; color: #fff; background-color: #008571; border-radius: 50%; width: 48px; height: 48px; font-size: 52px; } /* src/js/activitybuilder/components/shared/sketch/surface.styl */ canvas.sketch-surface[data-tool='line'] { cursor: crosshair; } canvas.sketch-surface[data-tool='eraser'] { cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAQAAAAm93DmAAAAv0lEQVR4Aa2XJ7pDIRQG5xaHeumJZgs43HF87H89cen9zRk/dPjhZc0syBSCRiMoZBbM/FADGyr9CZUNwzeyA/0DDp9JE0H/kCDxuq779mE/X1Sm/0C2dGeyMNh3A0/0f5KuN0r8WxgM0nDvhz3QJQYA2GjCDQBUTVgBZrrIDAtVuICsCjMUVVggVGFAU4VNF+pD1hdF3zb6xtaPnnw56NeXfsHKT4D+SMnPqP7Q+1HED0t+nPMDpx+J/dCufyuOeO1vQBYAIJEAAAAASUVORK5CYII=") 19 19, auto; } canvas.sketch-surface[data-tool='pencil'][data-thickness='thin'], canvas.sketch-surface[data-tool='points'][data-thickness='thin'] { cursor: url("data:image/svg+xml;utf8,") 3 3, auto; } canvas.sketch-surface[data-tool='pencil'][data-thickness='standard'], canvas.sketch-surface[data-tool='points'] { cursor: url("data:image/svg+xml;utf8,") 5 5, auto; } canvas.sketch-surface[data-tool='pencil'][data-thickness='thick'], canvas.sketch-surface[data-tool='points'][data-thickness='thick'] { cursor: url("data:image/svg+xml;utf8,") 10 10, auto; } canvas.sketch-surface[data-tool='text'] { cursor: text; } /* src/js/activitybuilder/components/shared/step-correctness-preview.styl */ .periscope-correctness-decorator { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin: 0 15px; } .periscope-correctness-decorator.no-student-input { display: none; } .periscope-correctness-decorator .cl-warning { border: 1px solid #db2e00; background: rgba(219,46,0,0.25); color: #db2e00; height: 25px; width: 25px; text-align: center; line-height: 25px; border-radius: 50%; cursor: pointer; font-size: 80%; margin-left: 5px; } .periscope-correctness-decorator .cl-warning.dcg-hovered, .periscope-correctness-decorator .cl-warning.dcg-depressed { background: rgba(219,46,0,0.35); } .periscope-correctness-decorator .decorator-container { width: 85px; height: 35px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; position: relative; border-radius: 3px; border: 1px solid #bdbdbd; } .periscope-correctness-decorator .decorator-container .no-result-yet { color: #999; font-size: 65%; text-align: center; white-space: pre-wrap; line-height: 1em; } .periscope-correctness-decorator .decorator-container .pillow-icon-check, .periscope-correctness-decorator .decorator-container .pillow-icon-remove { font-size: 90%; color: #999; } .periscope-correctness-decorator .decorator-container .pillow-icon-error { color: #fa824c; cursor: pointer; padding: 5px; margin: -5px; } .periscope-correctness-decorator .decorator-container .submitted-circle { background: #999; border-radius: 50%; height: 10px; width: 10px; position: absolute; top: 50%; left: 50%; margin: -5px 0 0 -5px; } /* src/js/activitybuilder/components/shared/student-graph-thumb.styl */ .student-graph-thumb { position: relative; background-size: cover; background-repeat: no-repeat; background-position: center; } .student-graph-background-thumb .fixed-aspect-container canvas { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* src/js/activitybuilder/components/shared/student-name.styl */ .student-name .dcg-tooltip-hit-area-container { white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; width: 100%; } /* src/js/activitybuilder/components/shared/submit-and-edit-button.styl */ .submit-and-edit-button.dcg-hovered:not(disabled):not(.dcg-depressed) .dcg-edit-button span { text-decoration: var(--secondary-button-text-decoration, none); } .submit-and-edit-button.dcg-hovered:not(disabled):not(.dcg-depressed) .dcg-textarea-submit-button { background: var(--primary-button-background-hover, #5e083b); } .submit-and-edit-button .dcg-edit-button { -webkit-box-shadow: var(--secondary-button-box-shadow-default); box-shadow: var(--secondary-button-box-shadow-default); line-height: var(--secondary-button-line-height, 2.375em); text-decoration: none; } .submit-and-edit-button .dcg-edit-button.has-pencil-icon i { margin-right: var(--secondary-button-pencil-icon-margin-right, 5px); font-size: 90%; } .submit-and-edit-button .dcg-edit-button:not(.has-pencil-icon) i { display: none; } .submit-and-edit-button .dcg-edit-button.dcg-depressed:not(disabled) { color: var(--font-color-default, #333); -webkit-box-shadow: var(--secondary-button-box-shadow-depressed); box-shadow: var(--secondary-button-box-shadow-depressed); } .submit-and-edit-button .dcg-edit-button.dcg-depressed:not(disabled) span { text-decoration: var(--secondary-button-text-decoration, none); } .submit-and-edit-button .dcg-textarea-submit-button { background: var(--primary-button-background-default, #9c0d63); } .submit-and-edit-button .dcg-textarea-submit-button.has-icon i { font-size: var(--button-icon-font-size); position: var(--button-icon-position); top: var(--button-icon-top); } /* src/js/activitybuilder/components/shared/text-reader.styl */ .dcg-text-reader-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background: #f7f7f7; border: 1px solid #bdbdbd; border-radius: 5px; width: 100%; max-width: 240px; margin-bottom: 10px; } .dcg-text-reader-container .dcg-text-reader-btn { width: 28px; height: 28px; color: #666; border-radius: 50%; line-height: 28px; margin: 4px; text-align: center; -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; -o-transition: -o-transform 0.2s; -ms-transition: -ms-transform 0.2s; transition: transform 0.2s; } .dcg-text-reader-container .dcg-text-reader-btn.play-btn { font-size: 70%; } .dcg-text-reader-container .dcg-text-reader-btn.play-btn i.pillow-icon-play { position: relative; left: 1.5px; top: 1px; } .dcg-text-reader-container .dcg-text-reader-btn.play-btn i.pillow-icon-pause { position: relative; top: 0.5px; } .dcg-text-reader-container .dcg-text-reader-btn.speed-settings-btn { font-size: 80%; margin-right: 5px; } .dcg-text-reader-container .dcg-text-reader-btn.dcg-hovered { background: rgba(0,0,0,0.1); color: #444; } .dcg-text-reader-container .dcg-text-reader-btn.dcg-depressed { background: rgba(0,0,0,0.2); color: #222; } .dcg-text-reader-container .playback-bar { height: 8px; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; background: #ddd; border-radius: 4px; position: relative; } .dcg-text-reader-container .playback-bar .playback-bar-piece { position: absolute; left: 0; top: -5px; bottom: -5px; } .dcg-text-reader-container .playback-bar .playback-bar-piece .playback-bar-piece-interior { position: absolute; top: 5px; bottom: 5px; left: 0; right: 0; border-radius: 4px; -webkit-transition: 0.2s background; -moz-transition: 0.2s background; -o-transition: 0.2s background; -ms-transition: 0.2s background; transition: 0.2s background; } .dcg-text-reader-container .playback-bar .playback-bar-piece.dcg-hovered .playback-bar-piece-interior { background: #bbb; } .dcg-text-reader-container .playback-bar .playback-bar-piece.playhead-past .playback-bar-piece-interior { background: #3278c8; } .dcg-text-reader-container .speed-control { padding: 10px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -moz-user-select: -moz-none; } .dcg-text-reader-container .speed-control:after { content: ""; position: absolute; top: -9px; right: 8px; border-width: 9px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .dcg-text-reader-container .speed-control:before { content: ""; position: absolute; top: -10px; right: 7px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .dcg-text-reader-container .speed-control .speed-controls-heading { white-space: nowrap; font-size: 90%; margin-bottom: 5px; } .dcg-text-reader-container .speed-control .dcg-segmented-control-layout { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -moz-user-select: -moz-none; width: 200px; font-size: 90%; } .dcg-text-reader-container .speed-control .dcg-segmented-control-layout .dcg-segmented-control-btn { min-height: 32px; } /* src/js/activitybuilder/components/shared/text-with-math/edit-input.styl */ .text-with-math-edit-input { position: relative; } .text-with-math-edit-input .dcg-prosemirror-editor { overflow-x: auto; } .text-with-math-edit-input .undo-convert-text { background: #feeba1; position: absolute; top: 50%; right: 4px; padding: 0 8px; font-size: 80%; line-height: 26px; height: 26px; border-radius: 4px; margin-top: -14px; } .text-with-math-edit-input .undo-convert-text .undo-detect { margin-left: 6px; } /* src/js/activitybuilder/components/shared/text-with-math/mixed-text-display.styl */ .mixed-text-display { white-space: pre-wrap; } .mixed-text-display .dcg-mq-math-mode, .mixed-text-display .nobr { white-space: nowrap; } .mixed-text-display .empty-text { color: #bbb; } .mixed-text-display .dcg-mq-root-block, .mixed-text-display .dcg-mq-math-mode .dcg-mq-root-block { overflow: visible; vertical-align: baseline; } .mixed-text-display .dcg-mathquill-wrapper { display: inline; } .mixed-text-display .dcg-mathquill-wrapper .dcg-typeset-math, .mixed-text-display .dcg-mathquill-wrapper .dcg-mathquill-braille { display: inline; } /* src/js/activitybuilder/components/shared/textarea/image-gallery-modal.styl */ .image-gallery-modal .modal-container { max-width: 730px; margin: auto; } .image-gallery-modal .image-gallery-modal-content { height: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .image-gallery-modal .image-container { background-size: contain; background-repeat: no-repeat; background-position: center; border: 1px solid #bdbdbd; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; } .image-gallery-modal .footer { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; padding-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .image-gallery-modal .image-count-info { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .image-gallery-modal .image-gallery-snapshot-container { position: absolute; top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); font-size: 130%; } /* src/js/activitybuilder/components/shared/textarea/image-thumbs-view.styl */ .textarea-image-thumbnail-area { position: relative; } .textarea-image-thumbnail-area.is-editable { margin-top: var(--image-thumbnail-area-margin-top, -2px); background: #fff; border: var(--image-thumbnail-area-border, 1px solid #bdbdbd); border-top: none; cursor: text; } .textarea-image-thumbnail-area.is-editable .textarea-image-thumbnails { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .textarea-image-thumbnail-area:not(.is-editable) { margin: -8px -8px 0; } .textarea-image-thumbnail-area.pm-focused { border: var(--image-thumbnail-area-border-focused, 1px solid #9c0d63); border-top: none; padding: var(--image-thumbnail-area-padding-focused); } .textarea-image-thumbnail-area .textarea-image-thumbnails { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; background-image: var(--line-separator-background-image); background-position: var(--line-separator-background-position); background-size: var(--line-separator-background-size); background-repeat: var(--line-separator-background-repeat); } .textarea-image-thumbnail-area .textarea-image-thumbnail, .textarea-image-thumbnail-area .loading-image-outline { margin: var(--uploaded-image-thumbnail-margin, 8px); width: var(--uploaded-image-thumbnail-size, 130px); height: var(--uploaded-image-thumbnail-size, 130px); } .textarea-image-thumbnail-area .loading-image-outline { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; background: #e2e2e2; border-radius: 3px; border: 1px solid var(--uploaded-image-thumbnail-border-color, #bdbdbd); border-radius: var(--uploaded-image-thumbnail-border-radius, 0.1875em); } .textarea-image-thumbnail-area .textarea-image-thumbnail { position: relative; border-radius: 0.1875em; } .textarea-image-thumbnail-area .textarea-image-thumbnail.disable-clicks { pointer-events: none; } .textarea-image-thumbnail-area .textarea-image-thumbnail.dcg-hovered img { border-color: #9c0d63; } .textarea-image-thumbnail-area .textarea-image-thumbnail.deleting { font-size: var(--deleting-media-font-size); background: var(--deleting-media-background, #fbeae6); padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; border: var(--deleting-image-border); border-radius: var(--uploaded-image-thumbnail-border-radius, 0.1875em); -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; color: var(--deleting-media-color, #831c00); font-weight: 500; } .textarea-image-thumbnail-area .textarea-image-thumbnail.deleting .cancel-delete { color: var(--deleting-media-color, #3b3b3b); padding: var(--deleting-media-cancel-padding, calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) 0 0); text-decoration: var(--deleting-media-cancel-text-decoration); border: var(--deleting-media-cancel-border); border-radius: var(--deleting-media-cancel-border-radius); -webkit-box-shadow: var(--deleting-media-cancel-box-shadow); box-shadow: var(--deleting-media-cancel-box-shadow); background: var(--deleting-media-cancel-background); margin-top: var(--deleting-media-cancel-margin-top); } .textarea-image-thumbnail-area .textarea-image-thumbnail.deleting .cancel-delete.dcg-hovered { color: var(--deleting-media-color, #3b3b3b); border: var(--deleting-media-cancel-border-hover); text-decoration: var(--deleting-media-cancel-text-decoration, underline); } .textarea-image-thumbnail-area .textarea-image-thumbnail.deleting .cancel-delete.dcg-depressed { color: var(--deleting-media-color, #3b3b3b); -webkit-box-shadow: var(--deleting-media-cancel-box-shadow-depressed); box-shadow: var(--deleting-media-cancel-box-shadow-depressed); } .textarea-image-thumbnail-area .textarea-image-thumbnail img { width: var(--uploaded-image-thumbnail-size, 130px); height: var(--uploaded-image-thumbnail-size, 130px); border-radius: var(--uploaded-image-thumbnail-border-radius, 0.1875em); object-fit: cover; border: 1px solid var(--uploaded-image-thumbnail-border-color, #bdbdbd); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); } .textarea-image-thumbnail-area .textarea-image-thumbnail .loading-image-outline { margin: 0; } .textarea-image-thumbnail-area .textarea-image-thumbnail .thumb-stack-overlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .textarea-image-thumbnail-area .textarea-image-thumbnail .remove-image-button { position: absolute; top: calc(-0.5 * var(--remove-media-button-size, 26px)); right: calc(-0.5 * var(--remove-media-button-size, 26px)); background: var(--remove-media-button-background, #676767); color: #fff; width: var(--remove-media-button-size, 26px); height: var(--remove-media-button-size, 26px); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border-radius: 50%; border: var(--remove-media-button-border); margin-top: 0; } .textarea-image-thumbnail-area .textarea-image-thumbnail .remove-image-button:not(:focus-visible) { -webkit-box-shadow: var(--remove-media-button-box-shadow); box-shadow: var(--remove-media-button-box-shadow); } .textarea-image-thumbnail-area .textarea-image-thumbnail .remove-image-button.dcg-hovered, .textarea-image-thumbnail-area .textarea-image-thumbnail .remove-image-button:focus-visible { background: var(--remove-media-button-background-hover, -webkit-linear-gradient(90deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), #676767); background: var(--remove-media-button-background-hover, -moz-linear-gradient(90deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), #676767); background: var(--remove-media-button-background-hover, -o-linear-gradient(90deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), #676767); background: var(--remove-media-button-background-hover, -ms-linear-gradient(90deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), #676767); background: var(--remove-media-button-background-hover, linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), #676767); } .textarea-image-thumbnail-area .textarea-image-thumbnail .remove-image-button.dcg-depressed { background: var(--remove-media-button-background-depressed, -webkit-linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35)), #676767); background: var(--remove-media-button-background-depressed, -moz-linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35)), #676767); background: var(--remove-media-button-background-depressed, -o-linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35)), #676767); background: var(--remove-media-button-background-depressed, -ms-linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35)), #676767); background: var(--remove-media-button-background-depressed, linear-gradient(0deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35)), #676767); -webkit-box-shadow: var(--remove-media-button-box-shadow-depressed); box-shadow: var(--remove-media-button-box-shadow-depressed); } .textarea-image-thumbnail-area .textarea-image-thumbnail .remove-image-button i { font-size: var(--remove-media-button-font-size, 1.3em); line-height: 1.3em; } .textarea-image-thumbnail-area .textarea-image-thumbnail .remove-image-button label { margin-top: -2em; z-index: 1; } .textarea-image-thumbnail-area .image-upload-error-message { text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; margin: 5px; } /* src/js/activitybuilder/components/shared/textarea/input-footer-button.styl */ .dcg-input-footer-button { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; cursor: pointer; background: var(--text-input-footer-button-background, #fff); border: var(--text-input-footer-button-border, 0.0625em solid #bdbdbd); border-radius: var(--border-radius-medium, 0.1875em); width: var(--text-input-footer-button-width, auto); height: var(--text-input-footer-button-height); line-height: var(--text-input-footer-button-height, 2.375em); text-align: center; font-size: var(--text-input-footer-button-font-size, 1em); color: var(--text-input-footer-button-icon-color, #3b3b3b); position: relative; -webkit-box-shadow: 0 var(--box-shadow-width-bottom) var(--text-input-footer-button-shadow-bottom-color); box-shadow: 0 var(--box-shadow-width-bottom) var(--text-input-footer-button-shadow-bottom-color); -webkit-transition: opacity 0.2s ease-in; -moz-transition: opacity 0.2s ease-in; -o-transition: opacity 0.2s ease-in; -ms-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; padding: var(--text-input-footer-button-padding, 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); } .dcg-input-footer-button.dcg-hidden { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .dcg-input-footer-button:not(.disabled):not(.active):not(.is-open).dcg-hovered, .dcg-input-footer-button.is-open.dcg-hovered { border: var(--text-input-footer-button-border, 0.0625em solid #9c0d63); color: var(--text-input-footer-button-icon-color, #3b3b3b); background: var(--text-input-footer-button-background-hover, #fff); } .dcg-input-footer-button:not(.disabled):not(.active):not(.is-open).dcg-depressed, .dcg-input-footer-button.is-open.dcg-depressed { background: var(--text-input-footer-button-background-hover, #e6e6e6); -webkit-box-shadow: var(--text-input-footer-button-box-shadow-depressed, none); box-shadow: var(--text-input-footer-button-box-shadow-depressed, none); } .dcg-input-footer-button.is-open { -webkit-box-shadow: var(--text-input-footer-button-box-shadow-is-open); box-shadow: var(--text-input-footer-button-box-shadow-is-open); } .dcg-input-footer-button.active { color: var(--text-input-footer-button-icon-color); border-color: #9c0d63; -webkit-box-shadow: var(--text-input-footer-button-box-shadow-active); box-shadow: var(--text-input-footer-button-box-shadow-active); } .dcg-input-footer-button.active.dcg-hovered { border: var(--text-input-footer-button-border, 1px solid #5e083b); color: var(--text-input-footer-button-icon-color); background: var(--text-input-footer-button-background-hover, #e6e6e6); } .dcg-input-footer-button.active.dcg-depressed { border: var(--text-input-footer-button-border, 1px solid #2f041e); color: var(--text-input-footer-button-icon-color); background: var(--text-input-footer-button-background-hover, #e6e6e6); -webkit-box-shadow: var(--text-input-footer-button-box-shadow-depressed); box-shadow: var(--text-input-footer-button-box-shadow-depressed); } .dcg-input-footer-button.disabled { -webkit-box-shadow: var(--text-input-footer-button-box-shadow-depressed, none); box-shadow: var(--text-input-footer-button-box-shadow-depressed, none); } .microphone-footer-button { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } /* src/js/activitybuilder/components/shared/textarea/math-edit-button.styl */ .math-edit-button { width: auto; } .math-edit-button:not(.default-theme):after { content: ""; background: #e2e2e2; width: var(--text-input-footer-button-sqrt-box-width, 8px); height: 10px; position: absolute; bottom: 10px; right: 7px; } .math-edit-button.dcg-input-footer-button .pillow-icon-math-k5 { line-height: var(--text-input-footer-button-icon-line-height); } /* src/js/activitybuilder/components/shared/textarea/qr-upload-link.styl */ .qr-upload-link { position: absolute; bottom: 15px; max-width: 600px; } .qr-upload-link .loading-qr-code, .qr-upload-link .qr-code { height: 100px; width: 100px; margin-right: 15px; } .qr-upload-link .loading-qr-code-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .qr-upload-link .loading-qr-code-container .loading-qr-code { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; background: #e2e2e2; border-radius: 3px; } .qr-upload-link .loading-qr-code-container .loading-qr-code-message-container .loading-qr-code-message { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; background: #e2e2e2; border-radius: 3px; height: 20px; width: 120px; margin-bottom: 15px; } .qr-upload-link .loading-qr-code-container .loading-qr-code-message-container .loading-qr-code-message:first-of-type { width: 200px; } .qr-upload-link .loaded { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .qr-upload-link .loaded .description-container { line-height: 1.2em; padding-top: 5px; color: #333; } .qr-upload-link .loaded .description-container .description-header { font-size: 140%; margin-bottom: 0.5em; } .qr-upload-link .loaded .description-container .description-note { margin-top: 5px; font-size: 90%; color: #666; } /* src/js/activitybuilder/components/shared/textarea/text-edit-button.styl */ .text-edit-button { margin-right: 8px; } .text-edit-button.dcg-input-footer-button i { line-height: var(--text-input-footer-button-icon-line-height); } /* src/js/activitybuilder/components/shared/textarea/upload-image-button.styl */ .upload-image-container .upload-image-footer-button i { font-size: var(--text-input-footer-button-font-size, 85%); position: relative; bottom: 1px; line-height: var(--text-input-footer-button-icon-line-height, 1); } .upload-image-dropdown .dropdown-container { margin-top: calc(calc(var(--rhythm-unit-px, 12) / 16 * 1rem) + 4px); padding: 0; } .upload-image-dropdown .dropdown-container .upload-image-dropdown-interior { padding: var(--dropdown-container-interior-padding, 0); color: var(--dropdown-container-color, #3b3b3b); } .upload-image-dropdown .dropdown-container .upload-image-dropdown-interior:after { content: ""; position: absolute; top: -12px; left: 22px; border-width: 12px; border-top-width: 0; border-style: solid; border-color: transparent transparent var(--dropdown-arrow-background, #fff); line-height: 0; } .upload-image-dropdown .dropdown-container .upload-image-dropdown-interior:before { content: ""; position: absolute; top: -13px; left: 21px; border-width: 13px; border-top-width: 0; border-style: solid; border-color: transparent transparent var(--dropdown-arrow-border, #bdbdbd); line-height: 0; } .upload-image-dropdown .dropdown-container .upload-image-dropdown-interior .preview-message { color: #676767; border: 1px dashed #bdbdbd; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); border-radius: 0.1875em; font-style: italic; text-align: center; width: 265px; margin: calc(calc(var(--rhythm-unit-px, 12) / 16 * 1rem) - 6px) calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .upload-image-dropdown .dropdown-container .upload-image-dropdown-interior .dropdown-button { cursor: pointer; background: var(--dropdown-container-background); padding: var(--upload-file-button-padding, calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1.5)); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .upload-image-dropdown .dropdown-container .upload-image-dropdown-interior .dropdown-button .link-text { white-space: nowrap; } .upload-image-dropdown .dropdown-container .upload-image-dropdown-interior .dropdown-button i { margin-right: 15px; } .upload-image-dropdown .dropdown-container .upload-image-dropdown-interior .dropdown-button.dcg-hovered, .upload-image-dropdown .dropdown-container .upload-image-dropdown-interior .dropdown-button:focus-visible { color: var(--dropdown-container-color, #3b3b3b); background: var(--dropdown-button-background-hovered, #f6f6f6); } .upload-image-dropdown .dropdown-container .upload-image-dropdown-interior .dropdown-button.dcg-depressed { color: var(--dropdown-button-color-depressed, #3b3b3b); background: var(--dropdown-button-background-depressed, #e9e9e9); } .upload-image-dropdown .dropdown-container .upload-image-dropdown-interior .dropdown-button:not(:last-child) { margin-bottom: var(--dropdown-button-margin-bottom); } .upload-image-dropdown .dropdown-container .upload-image-dropdown-interior .upload-file-button { border-top-right-radius: var(--border-radius-small); border-top-left-radius: var(--border-radius-small); } .upload-image-dropdown .dropdown-container .upload-image-dropdown-interior .upload-file-button .error { color: #db2e00; } .upload-image-dropdown .dropdown-container .upload-image-dropdown-interior .upload-file-button input[type="file"] { display: none; } .upload-image-dropdown .dropdown-container .upload-image-dropdown-interior .open-photo-modal-button { border-bottom-right-radius: var(--border-radius-small); border-bottom-left-radius: var(--border-radius-small); } /* src/js/activitybuilder/components/shared/textarea/view.styl */ .textarea-component { width: 100%; position: relative; } .textarea-component .dcg-input-footer .dcg-rich-buttons { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .textarea-component .dcg-input-footer .dcg-rich-buttons .next-line { width: 100%; } .textarea-component .dcg-rich-buttons + .submit-container { -webkit-box-flex: unset; -moz-box-flex: unset; -o-box-flex: unset; -ms-box-flex: unset; box-flex: unset; -webkit-flex-grow: unset; flex-grow: unset; } .textarea-component .unsubmitted .textarea-pm-container { position: relative; } .textarea-component .unsubmitted .textarea-pm-container .dcg-prosemirror-editor { margin-bottom: 0; } .textarea-component .unsubmitted .textarea-pm-container .dcg-prosemirror-editor .ProseMirror { border-radius: var(--text-input-textarea-border-radius, 0.1875em 0.1875em 0 0); padding: var(--text-input-textarea-padding, calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); } .textarea-component .submitted + .submit-container { background: var(--input-footer-background, #f6f6f6); border: var(--input-footer-border, 1px solid #bdbdbd); border-top: 0; border-radius: var(--input-footer-border-radius, 0 0 0.1875em 0.1875em); } .textarea-component .submit-container { text-align: var(--text-input-submit-button-text-align, right); -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; } .textarea-component .textarea-text { width: 100%; font-size: var(--font-size-default, 16px); color: var(--font-color-default, #3b3b3b); border: var(--text-input-border, 1px solid #bdbdbd); padding: var(--text-input-textarea-padding, calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); border-radius: var(--border-radius-medium, 0.1875em); background-color: #fff; white-space: pre-wrap; word-wrap: break-word; overflow: auto; display: var(--text-input-textarea-display, flex); } .textarea-component .textarea-text.has-text .textarea-image-thumbnail-area { margin-top: 5px; } .textarea-component .textarea-text:not(.has-attached-media) { -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .textarea-component .textarea-text.has-attached-media { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .textarea-component .textarea-text.has-attached-media .mixed-text-display { margin-bottom: 10px; } .textarea-component .textarea-text.edit-disabled { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); cursor: default; } .textarea-component textarea { color: #000; width: 100%; font-size: 16px; padding: 10px; border: 1px solid #bdbdbd; } .textarea-component .textarea-pm-container .dcg-prosemirror-editor .ProseMirror { min-height: 8.5em; max-height: 25em; border: var(--text-input-border, 1px solid #bdbdbd); overflow-y: auto; } .textarea-component .textarea-pm-container .dcg-prosemirror-editor .prosemirror-placeholder { color: var(--placeholder-color, #676767); } .textarea-component .textarea-pm-container .dcg-prosemirror-editor .prosemirror-placeholder i { cursor: text; font-size: var(--placeholder-icon-font-size); line-height: var(--placeholder-icon-line-height); color: var(--placeholder-icon-color); margin-right: var(--placeholder-icon-margin); position: relative; top: var(--placeholder-icon-positioning); } .textarea-component .textarea-pm-container .dcg-prosemirror-editor .ProseMirror-focused .prosemirror-placeholder { display: none; } .textarea-component .textarea-pm-container.has-focus .dcg-prosemirror-editor .ProseMirror, .textarea-component .textarea-pm-container.has-text-or-math-selection .dcg-prosemirror-editor .ProseMirror { border: var(--text-input-border-focused, 1px solid #9c0d63); } .textarea-component .textarea-pm-container.has-attached-image:not(.has-attached-audio) .dcg-prosemirror-editor .ProseMirror { min-height: calc(8.5em - 130px); } .textarea-component .textarea-pm-container.has-attached-audio:not(.has-attached-image) .dcg-prosemirror-editor .ProseMirror { min-height: calc(8.5em - 45px); } .textarea-component .textarea-pm-container.has-attached-audio.has-attached-image .dcg-prosemirror-editor .ProseMirror { min-height: calc(8.5em - 175px); } .textarea-component .unsubmitted .textarea-image-thumbnail-area + .component-audio-player-wrapper { padding-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .textarea-component .unsubmitted .component-audio-player-wrapper { margin-top: var(--component-audio-player-wrapper-margin-top, -2px); background: #fff; border-right: var(--component-audio-player-wrapper-border, 1px solid #bdbdbd); border-bottom: var(--component-audio-player-wrapper-border, 1px solid #bdbdbd); border-left: var(--component-audio-player-wrapper-border, 1px solid #bdbdbd); cursor: text; padding: var(--component-audio-player-wrapper-padding, calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); } .textarea-component .unsubmitted .component-audio-player-wrapper .component-audio-player { padding-right: var(--component-audio-player-padding-right, calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); } .textarea-component .unsubmitted .component-audio-player-wrapper.pm-focused { border-right: var(--component-audio-player-wrapper-border-selected, 1px solid #9c0d63); border-bottom: var(--component-audio-player-wrapper-border-selected, 1px solid #9c0d63); border-left: var(--component-audio-player-wrapper-border-selected, 1px solid #9c0d63); } .textarea-component .submitted { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .textarea-component .submitted + .submit-container { margin: 0; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .textarea-component .submitted .component-audio-player-wrapper { height: calc(var(--component-audio-player-wrapper-height, 67px) - calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) + 4px); } .textarea-component .submitted.has-text .component-audio-player-wrapper, .textarea-component .submitted.has-attached-image .component-audio-player-wrapper { margin-top: 10px; } /* src/js/activitybuilder/components/shared/toggle-keypad-button.styl */ .dcg-toggle-keypad-button.dcg-hidden { cursor: default !important; } .dcg-toggle-keypad-button.dcg-input-footer-button .pillow-icon-keyboard-k5 { line-height: 60px; } /* src/js/activitybuilder/components/sketch/background.styl */ .sketch-background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .sketch-background .blank-background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #fff; border-radius: var(--sketch-canvas-border-radius, 0.1875em); } .sketch-background .fill-background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-size: contain; background-position: center center; } .sketch-background .sketch-graph-miniscreen-view { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-size: cover; background-position: center center; } .sketch-background .image-background-div { background-color: rgba(0,0,0,0); background-repeat: no-repeat; border-radius: var(--sketch-canvas-border-radius, 0.1875em); } .sketch-background .graph-container { background-color: rgba(0,0,0,0); position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .sketch-background .graph-container .calculator { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .sketch-background .graph-container .calculator canvas.dcg-graph-inner { border-radius: 0.1875em; } .editor-container .sketch-background { display: block; } /* src/js/activitybuilder/components/sketch/dashboard/student-thumb.styl */ .sketch-student-thumb { position: relative; background: #eee; border-radius: 3px; overflow: hidden; } .sketch-student-thumb .fixed-aspect-container { position: relative; } .sketch-student-thumb .fixed-aspect-container .sketch-background .no-background { display: none; } .sketch-student-thumb .fixed-aspect-container canvas { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* src/js/activitybuilder/components/sketch/miniscreen.styl */ .sketch-miniscreen-view { position: relative; background-color: #fff; } .sketch-miniscreen-view.image-background, .sketch-miniscreen-view.graph-background { background-color: rgba(0,0,0,0); } .sketch-miniscreen-view .icon-container { font-size: 180%; width: 100%; text-align: center; position: absolute; top: 50%; left: 0; padding-top: 10px; height: 50px; margin-top: -25px; color: #999; text-shadow: calc(1px * -1) calc(1px * -1) 0 #fff, calc(1px * -1) 1px 0 #fff, 1px calc(1px * -1) 0 #fff, 1px 1px 0 #fff, 0 calc(1px * -1) 0 #fff, 0 1px 0 #fff, 1px 0 0 #fff, calc(1px * -1) 0 0 #fff; } .sketch-miniscreen-view.within-fullscreen-layout { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .sketch-miniscreen-view.within-fullscreen-layout .sketch-background { width: 100%; position: relative; } .sketch-miniscreen-view.within-fullscreen-layout .background-image { background-size: contain; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-repeat: no-repeat; background-position: center center; border-radius: 2px; } .sketch-miniscreen-view.within-fullscreen-layout .background-image:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 20px; background: -webkit-linear-gradient(rgba(255,255,255,0), #fff 75%); background: -moz-linear-gradient(rgba(255,255,255,0), #fff 75%); background: -o-linear-gradient(rgba(255,255,255,0), #fff 75%); background: -ms-linear-gradient(rgba(255,255,255,0), #fff 75%); background: linear-gradient(rgba(255,255,255,0), #fff 75%); } .sketch-miniscreen-view:not(.within-fullscreen-layout) { border: 1px solid #e2e2e2; border-radius: 3px; padding-bottom: calc(100% - 2px); position: relative; line-height: 0; width: 100%; height: 0; } .sketch-miniscreen-view:not(.within-fullscreen-layout) .sketch-background { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; } .sketch-miniscreen-view:not(.within-fullscreen-layout) .background-image { background-size: contain; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-repeat: no-repeat; background-position: center center; } /* src/js/activitybuilder/components/sketch/playground/controls.styl */ .sketch-controls { position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; width: 100%; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .sketch-controls .sketch-btn { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 100%; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; position: relative; color: var(--sketch-controls-font-color); } .sketch-controls .sketch-btn .dcg-tooltip-hit-area-container { position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; cursor: pointer !important; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .sketch-controls .sketch-btn .dcg-tooltip-hit-area-container i[class^="pillow-icon-"] { font-size: 1.45em; } .sketch-controls .left-side-controls { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .sketch-controls .sketch-btn-group { min-width: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .sketch-controls .sketch-btn-group .segmented-control-btn { width: 56px; min-width: 30px; height: 40px; border: unset; border-radius: var(--border-radius, 0); margin-right: var(--sketch-btn-spacing, 0); } .sketch-controls .sketch-btn-group .segmented-control-btn i { margin: 0; } .sketch-controls .sketch-btn-group .segmented-control-btn:focus-visible { -webkit-box-shadow: unset; box-shadow: unset; } .sketch-controls .sketch-btn-group .segmented-control-btn:focus-visible .dcg-tooltip-hit-area-container { -webkit-box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #9c0d63; box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #9c0d63; z-index: 2; } .sketch-controls .sketch-btn-group .segmented-control-btn .dcg-tooltip-hit-area-container { border: var(--sketch-left-controls-border, 1px solid #bdbdbd); } .sketch-controls .sketch-btn-group .segmented-control-btn.dcg-selected { background: var(--sketch-btn-active-background-color, #3278c8); color: #fff; position: relative; -webkit-box-shadow: var(--sketch-btn-active-box-shadow); box-shadow: var(--sketch-btn-active-box-shadow); } .sketch-controls .sketch-btn-group .segmented-control-btn.dcg-selected.dcg-hovered { background: var(--sketch-btn-active-background-color, #1e4878); color: #fff; -webkit-box-shadow: var(--sketch-btn-active-box-shadow); box-shadow: var(--sketch-btn-active-box-shadow); } .sketch-controls .sketch-btn-group .segmented-control-btn.dcg-selected .dcg-tooltip-hit-area-container:not(.dcg-hovered) { border-color: var(--sketch-left-controls-border, #3278c8); } .sketch-controls .sketch-btn-group .segmented-control-btn.dcg-hovered .dcg-tooltip-hit-area-container { border-color: var(--sketch-left-controls-border, #9c0d63); } .sketch-controls .sketch-btn-group .segmented-control-btn.dcg-hovered:not(.dcg-selected) { z-index: var(--sketch-left-controls-z-index, 2); } .sketch-controls .sketch-btn-group .segmented-control-btn.dcg-selected:not(:last-of-type) .dcg-tooltip-hit-area-container, .sketch-controls .sketch-btn-group .segmented-control-btn.dcg-hovered:not(:last-of-type) .dcg-tooltip-hit-area-container { margin-right: var(--sketch-left-controls-margin-hover, 1px); padding-left: var(--sketch-left-controls-margin-hover, 1px); } .sketch-controls .sketch-btn-group .segmented-control-btn.dcg-depressed.dcg-selected { background: var(--sketch-left-controls-border, #0f243c); } .sketch-controls .sketch-btn-group .segmented-control-btn.dcg-depressed:not(.dcg-selected) { background: var(--sketch-left-controls-border, #e9e9e9); } .sketch-controls .sketch-btn-group .segmented-control-btn:first-of-type .dcg-tooltip-hit-area-container { border-top-left-radius: var(--border-radius, 0.1875em); border-bottom-left-radius: var(--border-radius, 0.1875em); } .sketch-controls .sketch-btn-group .segmented-control-btn:last-of-type .dcg-tooltip-hit-area-container { border-top-right-radius: var(--border-radius, 0.1875em); border-bottom-right-radius: var(--border-radius, 0.1875em); } .sketch-controls .color-picker-container { position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin: var(--sketch-color-picker-left-margin, 0 0 0 5px); } .sketch-controls .color-picker-container .color-indicator-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .sketch-controls .color-picker-container .color-indicator-container.disabled { opacity: 0.25; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; filter: alpha(opacity=25); pointer-events: none; } .sketch-controls .color-picker-container .color-indicator-container .color-swatch-container { width: 40px; height: 40px; position: relative; border-radius: 50%; } .sketch-controls .color-picker-container .color-indicator-container .color-swatch-container .color-indicator, .sketch-controls .color-picker-container .color-indicator-container .color-swatch-container .text-icon, .sketch-controls .color-picker-container .color-indicator-container .color-swatch-container .thickness-icon { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .sketch-controls .color-picker-container .color-indicator-container .color-swatch-container .color-indicator { border-radius: 50%; opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } .sketch-controls .color-picker-container .color-indicator-container .color-swatch-container .text-icon, .sketch-controls .color-picker-container .color-indicator-container .color-swatch-container .thickness-icon { text-align: center; line-height: 40px; color: #fff; } .sketch-controls .color-picker-container .color-indicator-container .color-swatch-container .text-icon i, .sketch-controls .color-picker-container .color-indicator-container .color-swatch-container .thickness-icon i { line-height: 40px; } .sketch-controls .color-selector { position: absolute; padding: var(--sketch-color-picker-padding, 10px 5px 5px); top: 47px; left: var(--sketch-color-picker-left-position, -65px); background: var(--sketch-color-picker-background, #fff); border: var(--sketch-color-picker-border, 1px solid #bdbdbd); border-radius: var(--sketch-color-picker-border-radius, 0.1875em); -webkit-animation: fadeInDown 0.2s; -moz-animation: fadeInDown 0.2s; -o-animation: fadeInDown 0.2s; -ms-animation: fadeInDown 0.2s; animation: fadeInDown 0.2s; width: var(--sketch-color-picker-width, 164px); z-index: 4; } .sketch-controls .color-selector:after { content: ""; position: absolute; top: var(--sketch-color-picker-arrow-position); right: calc(var(--sketch-color-picker-arrow-position) + 75px); border-width: calc(var(--sketch-color-picker-arrow-position) * -1); border-top-width: 0; border-color: transparent transparent #fff; line-height: 0; } .sketch-controls .color-selector:before { content: ""; position: absolute; top: calc(var(--sketch-color-picker-arrow-position) - var(--sketch-color-picker-arrow-border-width)); right: calc(75px - var(--sketch-color-picker-arrow-border-width) - (var(--sketch-color-picker-arrow-position) * -1)); border-width: calc((var(--sketch-color-picker-arrow-position) * -1) + var(--sketch-color-picker-arrow-border-width)); border-top-width: 0; border-color: var(--sketch-color-picker-arrow-border-color); line-height: 0; } .sketch-controls .color-selector .color-list { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: var(--sketch-color-picker-padding); -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .sketch-controls .color-selector .color-list .color-option-wrapper .color-option { width: var(--sketch-color-picker-option-size, 40px); height: var(--sketch-color-picker-option-size, 40px); border-radius: 50%; border: var(--sketch-color-picker-default-border, 2px solid #fff); cursor: pointer; margin: 5px; opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } .sketch-controls .color-selector .color-list .color-option-wrapper .color-option.dcg-hovered { -webkit-box-shadow: var(--sketch-color-picker-hovered-box-shadow, 0 0 0 1px #9c0d63); box-shadow: var(--sketch-color-picker-hovered-box-shadow, 0 0 0 1px #9c0d63); border: var(--sketch-color-picker-selected-border, 2px solid #fff); } .sketch-controls .color-selector .color-list .color-option-wrapper .color-option:focus-visible { -webkit-box-shadow: var(--sketch-color-picker-selected-box-shadow, 0 0 0 3px #9c0d63); box-shadow: var(--sketch-color-picker-selected-box-shadow, 0 0 0 3px #9c0d63); border: var(--sketch-color-picker-selected-border, 4px solid #fff); } .sketch-controls .color-selector .color-list .color-option-wrapper .color-option.selected { -webkit-box-shadow: var(--sketch-color-picker-selected-box-shadow, 0 0 0 3px #9c0d63); box-shadow: var(--sketch-color-picker-selected-box-shadow, 0 0 0 3px #9c0d63); border: var(--sketch-color-picker-selected-border, 2px solid #fff); } .sketch-controls .color-selector .dcg-segmented-control-layout { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: var(--sketch-color-picker-segmented-control-padding, 10px 5px 5px); } .sketch-controls .color-selector .dcg-segmented-control-layout .dcg-segmented-control-btn { min-height: 40px; height: 45px; cursor: pointer; } .sketch-controls .color-selector .dcg-segmented-control-layout .dcg-segmented-control-btn i { margin-right: 0; } .sketch-controls .color-selector .dcg-segmented-control-layout .dcg-segmented-control-btn.medium-option { font-size: 120%; } .sketch-controls .color-selector .dcg-segmented-control-layout .dcg-segmented-control-btn.large-option { font-size: 150%; } .sketch-controls .color-selector .dcg-segmented-control-layout .dcg-segmented-control-btn.line-thickness-option:not(.dcg-selected) { color: #666; background: var(--sketch-color-picker-segmented-control-background); } .sketch-controls .color-selector .dcg-segmented-control-layout .dcg-segmented-control-btn.text-size-option:not(.dcg-selected) { background: var(--sketch-color-picker-segmented-control-background); } .sketch-controls .right-side-controls { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; min-width: 90px; gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .sketch-controls .right-side-controls .sketch-btn { border-radius: 50%; height: 2.5em; width: 2.5em; border: 1px solid transparent; } .sketch-controls .right-side-controls .sketch-btn.dcg-hovered, .sketch-controls .right-side-controls .sketch-btn:focus-visible { background: #e9e9e9; } .sketch-controls .right-side-controls .sketch-btn.clear { color: #db2e00; } .sketch-controls .right-side-controls .sketch-btn.clear.dcg-hovered, .sketch-controls .right-side-controls .sketch-btn.clear:focus-visible { background: #fbeae6; color: #db2e00; } .sketch-controls .right-side-controls .sketch-btn.clear.dcg-depressed { background: #f4c0b3; } .sketch-controls .right-side-controls .sketch-btn i { margin: 0; } .dcg-sketch-playground.narrow-component .dcg-sketch-container { top: calc(50px + 40px + 5px); bottom: calc(-1 * calc(50px + 40px + 5px)); } .dcg-sketch-playground.narrow-component .dcg-sketch-container .sketch-controls { top: calc(-1 * calc(50px + 40px + 5px)); -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: calc(50px + 40px + 5px); -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .dcg-sketch-playground.narrow-component .dcg-sketch-container .sketch-controls .left-side-controls, .dcg-sketch-playground.narrow-component .dcg-sketch-container .sketch-controls .right-side-controls { height: 40px; } .dcg-sketch-playground.narrow-component .dcg-sketch-container .sketch-controls .left-side-controls { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -o-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; max-width: 100%; } .dcg-sketch-playground.narrow-component .dcg-sketch-container .sketch-controls .right-side-controls { -webkit-box-ordinal-group: 0; -moz-box-ordinal-group: 0; -o-box-ordinal-group: 0; -ms-flex-order: 0; -webkit-order: 0; order: 0; margin-bottom: 5px; margin-left: 0; } .dcg-sketch-playground.narrow-component .dcg-sketch-container .sketch-controls .color-selector { right: -10px; left: var(--sketch-color-picker-narrow-left-position); } /* src/js/activitybuilder/components/sketch/playground/elements-layer.styl */ .sketch-elements-layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; } .sketch-elements-layer.editing.text-selected { cursor: default; } .sketch-elements-layer.editing:not(.text-selected) { cursor: text; } .sketch-elements-layer:not(.editing) { pointer-events: none; } /* src/js/activitybuilder/components/sketch/playground/sketch-text/text-box.styl */ .sketch-text-box { font-weight: var(--sketch-text-box-font-weight); width: 100%; max-height: inherit; min-width: 35px; overflow: hidden; border: var(--sketch-text-box-border, 1px solid rgba(0,0,0,0)); -webkit-box-shadow: var(--sketch-text-box-box-shadow); box-shadow: var(--sketch-text-box-box-shadow); border-radius: var(--sketch-text-box-border-radius-active, 5px); padding: var(--sketch-text-box-padding, 7px 10px); outline: var(--sketch-text-box-outline); outline-offset: var(--sketch-text-box-outline-offset); border-top-right-radius: var(--sketch-text-box-border-radius); border-bottom-right-radius: var(--sketch-text-box-border-radius); border-left: var(--sketch-text-box-left-border, 1px solid rgba(0,0,0,0)); cursor: text; } .sketch-text-box:not(.is-selected):not(.is-dragging):not(.dcg-hovered) { outline: none; -webkit-box-shadow: none; box-shadow: none; border: var(--sketch-text-box-border-invisible, 1px solid rgba(0,0,0,0)); } .sketch-text-box.thumbnail-mode { padding: 0; } .sketch-text-box.is-selected { background: rgba(255,255,255,0.9); border: var(--sketch-text-box-border-active, 1px solid #9c0d63); -webkit-box-shadow: var(--sketch-left-drag-handle-box-shadow, inset 0 0 0 1px #9c0d63); box-shadow: var(--sketch-left-drag-handle-box-shadow, inset 0 0 0 1px #9c0d63); } .sketch-text-box.is-dragging { background: rgba(255,255,255,0.6); border: var(--sketch-text-box-border-active, 1px solid #9c0d63); -webkit-box-shadow: var(--sketch-left-drag-handle-box-shadow, inset 0 0 0 1px #9c0d63); box-shadow: var(--sketch-left-drag-handle-box-shadow, inset 0 0 0 1px #9c0d63); } .sketch-text-box:not(.dcg-hovered):not(.is-selected):not(.is-dragging) .left-drag-handle, .sketch-text-box:not(.dcg-hovered):not(.is-selected):not(.is-dragging) .remove-text-box { display: none; } .sketch-text-box.dcg-hovered:not(.is-selected):not(.is-dragging) { border: var(--sketch-text-box-border-hover, 1px solid #bdbdbd); -webkit-box-shadow: var(--sketch-text-box-box-shadow-hover, inset 0 0 0 1px #bdbdbd); box-shadow: var(--sketch-text-box-box-shadow-hover, inset 0 0 0 1px #bdbdbd); outline: var(--sketch-text-box-outline-hover); } .sketch-text-box.dcg-hovered:not(.is-selected):not(.is-dragging) .left-drag-handle:not(.dcg-hovered), .sketch-text-box.dcg-hovered:not(.is-selected):not(.is-dragging) .remove-text-box:not(.dcg-hovered) { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .sketch-text-box .textbox-size-medium { font-size: var(--sketch-text-box-font-size-middle, 120%); } .sketch-text-box .textbox-size-large { font-size: var(--sketch-text-box-font-size-large, 200%); } .sketch-text-box label.amplify-uppercase { display: var(--sketch-text-box-close-button-label-display, block); } .sketch-text-box .dcg-rich-text, .sketch-text-box .dcg-rich-text span { display: block; white-space: break-spaces; overflow-wrap: break-word; } .sketch-text-box .mq-container { display: block; } .sketch-text-box .mq-container .dcg-mq-editable-field.dcg-mq-focused { border: 0; -webkit-box-shadow: none; box-shadow: none; } .sketch-text-box .fast-static-math { display: block; } .sketch-text-box .dcg-mq-math-mode { border: 0; } .sketch-text-box .textbox-edit-view { min-width: var(--sketch-text-box-edit-view-min-width); } .sketch-text-box .textbox-edit-view .dcg-prosemirror-editor { -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; } .sketch-text-box .remove-text-box { position: absolute; right: var(--sketch-text-box-remove-button-position, -13px); top: var(--sketch-text-box-remove-button-position, -17px); color: var(--sketch-text-box-remove-color, #fff); background-color: var(--sketch-text-box-remove-background, #676767); border: var(--sketch-text-box-remove-border); border-radius: var(--sketch-text-box-remove-border-radius, 50%); font-size: var(--sketch-text-box-remove-font-size); padding: var(--sketch-text-box-remove-padding); display: var(--sketch-text-box-remove-display, inline-flex); height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); width: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .sketch-text-box .remove-text-box label { top: 3.6em; border-radius: 2px; font-size: 0.72em; } .sketch-text-box .remove-text-box.dcg-hovered { color: var(--sketch-text-box-remove-color-hover, #fff); background: var(--sketch-text-box-remove-background-hover, #343434); } .sketch-text-box .remove-text-box.dcg-depressed { color: var(--sketch-text-box-remove-pressed); border: var(--sketch-text-box-remove-border-pressed); } .sketch-text-box .left-drag-handle { position: absolute; left: calc(var(--sketch-text-box-handle-width, 40px) *-1); top: 0; bottom: 0; cursor: move; padding: 6px; background: var(--sketch-text-box-handle-background, transparent); border-radius: 5px 0 0 5px; border: var(--sketch-left-drag-handle-border); border-top-left-radius: var(--sketch-text-box-border-radius); border-bottom-left-radius: var(--sketch-text-box-border-radius); border-right: none; -webkit-box-shadow: var(--sketch-left-drag-handle-box-shadow); box-shadow: var(--sketch-left-drag-handle-box-shadow); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .sketch-text-box .left-drag-handle.dcg-hovered { background: var(--sketch-text-box-handle-background-draggable); } .sketch-text-box .left-drag-handle.dcg-hovered i { color: var(--sketch-draggable-icon-font-color, #a0a0a0); } .sketch-text-box .left-drag-handle .icon-v2-draggable-vertical { font-size: var(--sketch-draggable-icon-font-size, 24px); color: var(--sketch-draggable-icon-font-color); } .sketch-text-box .resize-right-handle { position: absolute; right: calc(-1 * ((var(--sketch-resize-right-handle-dot-container-width, 40px) - 1px) / 2) + 1px); top: 0; bottom: 0; cursor: col-resize; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .sketch-text-box .resize-right-handle .resize-handle-dot { height: var(--sketch-resize-right-handle-dot-width, 10px); width: var(--sketch-resize-right-handle-dot-width, 10px); background: var(--sketch-text-box-dot-color, #9c0d63); border-radius: 50%; margin: auto; } .sketch-text-box .resize-right-handle.dcg-hovered .resize-handle-dot { background: var(--sketch-text-box-dot-color-hover, #9c0d63); } .sketch-text-box .resize-right-handle.dcg-depressed .resize-handle-dot { background: var(--sketch-text-box-dot-color-pressed, #9c0d63); } .sketch-text-box .left-drag-handle, .sketch-text-box .resize-right-handle { width: var(--sketch-text-box-handle-width, 40px); text-align: center; } /* src/js/activitybuilder/components/sketch/playground/sketch-text/text-positioned-container.styl */ .sketch-text-positioned-container { position: absolute; margin-right: 12px; } .sketch-text-positioned-container.dcg-hovered { z-index: 2; } .sketch-text-positioned-container.is-selected { z-index: 3; } /* src/js/activitybuilder/components/sketch/playground/view.styl */ .dcg-sketch-playground { width: auto; background-color: #fff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -moz-user-select: -moz-none; margin-bottom: var(--sketch-playground-margin-bottom, calc(50px + calc(var(--rhythm-unit-px, 12) / 16 * 1rem))); } .dcg-sketch-playground .sketch-background { border-radius: var(--sketch-canvas-border-radius, 0.1875em); } .dcg-sketch-playground.transparent-background { background-color: rgba(0,0,0,0); } .dcg-sketch-playground.sketch-tools-hidden { margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .dcg-sketch-playground.sketch-tools-hidden .dcg-sketch-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .dcg-sketch-playground.narrow-component { margin-bottom: calc(50px + calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) + 40px); } .dcg-sketch-playground.narrow-component .sketch-controls .left-side-controls { font-size: 0.8em; } .dcg-sketch-playground.narrow-component .sketch-controls .color-swatch-container { width: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .dcg-sketch-playground.narrow-component .sketch-controls .color-swatch-container .thickness-icon { line-height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .dcg-sketch-playground:not(.within-fullscreen-layout) { position: relative; padding-bottom: 100%; height: 100%; } .dcg-sketch-playground.within-fullscreen-layout { position: absolute; top: 0; left: 10px; bottom: 0; right: 10px; } .dcg-sketch-playground .sketch-controls { position: relative; top: var(--sketch-negative-margin-top, calc(0px - (50px + calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5)))); } .dcg-sketch-playground .dcg-sketch-container { position: absolute; top: var(--sketch-margin-top, 50px); bottom: var(--sketch-negative-margin-top, -50px); left: 0; right: 0; } .dcg-sketch-playground .dcg-sketch-container .sketch-view-wrapper { border-radius: var(--sketch-canvas-border-radius, 0.1875em); } .dcg-sketch-playground .dcg-sketch-container .fixed-aspect-container .sketch-view-wrapper, .dcg-sketch-playground .dcg-sketch-container .fixed-aspect-container .sketch-view-children { width: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .dcg-sketch-playground .dcg-sketch-container .fixed-aspect-container .snapshot-camera-container { position: absolute; top: var(--sketch-snapshot-camera-top, 5px); right: var(--sketch-snapshot-camera-right, 5px); z-index: 2; } .dcg-sketch-playground .dcg-sketch-container .fixed-aspect-container .snapshot-camera-container .snapshot-camera { bottom: 0; } .dcg-sketch-playground .dcg-sketch-container .fixed-aspect-container canvas.sketch-surface { position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: var(--sketch-canvas-border, 1px solid #bdbdbd); border-radius: var(--sketch-canvas-border-radius, 0.1875em); } .layout-top.showing-correctness .dcg-sketch-playground.within-fullscreen-layout { margin-left: 49px; margin-right: 49px; } /* src/js/activitybuilder/components/student-survey/miniscreen/view.styl */ .student-survey-miniscreen .icon-container { text-align: center; font-size: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); margin-top: -18px; } .student-survey-miniscreen .survey-title { color: #999; margin-bottom: 10px; } .student-survey-miniscreen i.pillow-icon-thumbs-up { font-size: 160%; color: #bbb; } /* src/js/activitybuilder/components/student-survey/playground/view.styl */ .student-survey-playground { text-align: center; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .student-survey-playground .student-survey-prompt-container .student-survey-choices { position: relative; max-width: 800px; margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) auto calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 4) auto; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: space-evenly; -moz-box-pack: space-evenly; -o-box-pack: space-evenly; -ms-flex-pack: space-evenly; -webkit-justify-content: space-evenly; justify-content: space-evenly; } .student-survey-playground .student-survey-prompt-container .student-survey-choice { display: inline-block; vertical-align: top; position: relative; aspect-ratio: 1/1; max-width: 80px; } .student-survey-playground .student-survey-prompt-container .student-survey-choice img { width: 100%; height: 100%; } .student-survey-playground .student-survey-prompt-container .student-survey-choice img.grayscale-icon { position: absolute; } .student-survey-playground .student-survey-prompt-container .student-survey-choice.dcg-hovered .grayscale-icon, .student-survey-playground .student-survey-prompt-container .student-survey-choice.dcg-depressed .grayscale-icon, .student-survey-playground .student-survey-prompt-container .student-survey-choice.selected .grayscale-icon { display: none; } .student-survey-playground .student-survey-prompt-container .student-survey-choice.dcg-depressed:not(.selected) .color-icon { -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -o-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); } .student-survey-playground .student-survey-prompt-container .student-survey-choice.selected { cursor: default; } .student-survey-playground .student-survey-prompt-container .student-survey-choice.selected .color-icon { -webkit-transition: -webkit-transform 0.2s ease-out; -moz-transition: -moz-transform 0.2s ease-out; -o-transition: -o-transform 0.2s ease-out; -ms-transition: -ms-transform 0.2s ease-out; transition: transform 0.2s ease-out; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .student-survey-playground .student-survey-prompt-container + .student-survey-prompt-container { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); } /* src/js/activitybuilder/components/table/miniscreen/view.styl */ .table-miniscreen { border-radius: 3px; border: 1px dashed #bbb; padding: 5px; margin: 2px 0 10px; text-align: center; } .table-miniscreen i { font-size: 20px; color: #bbb; position: relative; top: 1px; } .dcg-layout-column:first-child.one-third .table-miniscreen i { font-size: 16px; } .dcg-layout-column:last-child.two-third .table-miniscreen i { font-size: 16px; } /* src/js/activitybuilder/components/table/playground/view.styl */ .dcg-table-playground-view { position: relative; } .dcg-table-playground-view .table-wrapper { overflow-x: auto; padding: 3px 2px calc(var(--table-keypad-button-height, 40px) + var(--table-keypad-button-box-shadow-size, 0px) + calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) + 4px) 2px; margin-bottom: -7px; } .dcg-table-playground-view .table-wrapper .camera-header-container { width: calc(100% - 6px); max-width: 600px; margin: 0 auto; text-align: right; } .dcg-table-playground-view .table-wrapper .camera-header-container.one-column-table { width: 350px; } .dcg-table-playground-view .table-wrapper .camera-header-container .snapshot-camera { bottom: 0; } .dcg-table-playground-view .table-wrapper .table-submit-button { text-align: center; } .dcg-table-playground-view .table-wrapper .keyboard-settings-link-container { color: #999; font-size: 85%; line-height: 20px; margin-top: -10px; text-align: center; } .dcg-table-playground-view .table-wrapper .keyboard-settings-link-container .keyboard-settings-link { padding: 0 5px; } .dcg-table-playground-view .table-wrapper .keyboard-settings-link-container .pillow-icon-info { margin-right: 3px; font-size: 90%; vertical-align: text-bottom; } .dcg-table-playground-view .table-wrapper .keyboard-settings-link-container span { vertical-align: middle; } .dcg-table-playground-view .table-wrapper .keyboard-settings-link-container.dcg-hovered { color: #666; } .dcg-table-playground-view .table-wrapper .keyboard-settings-link-container.dcg-depressed { color: #333; } .fullscreen-layout .playground-component-container .dcg-table-playground-view { margin-bottom: 10px; } .layout-top-student-view.showing-correctness.fullscreen-layout .dcg-table-playground-view .correctness-gutter, .layout-top-student-view.showing-correctness.one-column .dcg-table-playground-view .correctness-gutter { right: -49px; } /* src/js/activitybuilder/components/table/shared/column-options-dropdown.styl */ .dcg-shared-dropdown-popover-container.column-options-dropdown { position: absolute; top: 0; right: 10px; } .dcg-shared-dropdown-popover-container.column-options-dropdown .column-dropdown-anchor { padding: 10px 8px; color: #999; } .dcg-shared-dropdown-popover-container.column-options-dropdown .column-dropdown-anchor .pillow-icon-caret-down { color: #999; font-size: 75%; } .dcg-shared-dropdown-popover-container.column-options-dropdown.dcg-hovered .pillow-icon-caret-down { color: #666; } .dcg-shared-dropdown-popover-container.column-options-dropdown .anchor-container.isOpen .pillow-icon-caret-down { color: #666; } .dcg-shared-dropdown-popover-container.column-options-dropdown.first-column .dropdown-container { width: 200px; } .dcg-shared-dropdown-popover-container.column-options-dropdown.first-column-of-many .dropdown-container { left: 0; } .dcg-shared-dropdown-popover-container.column-options-dropdown.first-column-of-many .dropdown-container:after { content: ""; position: absolute; top: -9px; right: 175px; border-width: 9px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .dcg-shared-dropdown-popover-container.column-options-dropdown.first-column-of-many .dropdown-container:before { content: ""; position: absolute; top: -10px; right: 174px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .dcg-shared-dropdown-popover-container.column-options-dropdown:not(.first-column-of-many) .dropdown-container:after { content: ""; position: absolute; top: -9px; right: 5px; border-width: 9px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .dcg-shared-dropdown-popover-container.column-options-dropdown:not(.first-column-of-many) .dropdown-container:before { content: ""; position: absolute; top: -10px; right: 4px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .dcg-shared-dropdown-popover-container.column-options-dropdown .dropdown-container { min-width: 200px; text-align: left; } .dcg-shared-dropdown-popover-container.column-options-dropdown .dropdown-container .dropdown-choice.add-column-right .pillow-icon-caret-right, .dcg-shared-dropdown-popover-container.column-options-dropdown .dropdown-container .dropdown-choice.add-column-left .pillow-icon-caret-right, .dcg-shared-dropdown-popover-container.column-options-dropdown .dropdown-container .dropdown-choice.add-column-right .pillow-icon-caret-left, .dcg-shared-dropdown-popover-container.column-options-dropdown .dropdown-container .dropdown-choice.add-column-left .pillow-icon-caret-left { font-size: 75%; } .dcg-shared-dropdown-popover-container.column-options-dropdown .dropdown-container .dropdown-choice.format-math-link { margin-top: -4px; } .dcg-shared-dropdown-popover-container.column-options-dropdown .dropdown-container .dropdown-choice.format-math-link .pillow-icon-new-expression { font-size: 130%; position: relative; top: 4px; margin-left: -6px; } .dcg-shared-dropdown-popover-container.column-options-dropdown .dropdown-container .dropdown-choice.format-text-link .pillow-icon-sparktext { margin-left: -4px; } .dcg-shared-dropdown-popover-container.column-options-dropdown .dropdown-container .dropdown-choice.delete-column-link .pillow-icon-remove { font-size: 85%; } /* src/js/activitybuilder/components/table/shared/table-cell-mathquill.styl */ .dcg-table-cell-mathquill { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .dcg-table-cell-mathquill .dcg-toggle-keypad-button-container { position: absolute; top: 0; left: 0; bottom: 0; margin: auto; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .dcg-table-cell-mathquill .dcg-toggle-keypad-button-container .dcg-toggle-keypad-button { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; height: 100%; padding: 0 12px 0 10px; } .dcg-table-cell-mathquill.braille-mode .dcg-braille-input { text-align: left; } .cell-evaluation-container { display: block; width: 100%; text-align: right; font-size: 90%; padding-top: 1px; height: 26px; } .cell-evaluation-container .dcg-tooltip-hit-area-container { position: absolute; right: 10px; bottom: 5px; left: 10px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .cell-evaluation-container .cell-evaluation { background: #eee; border-radius: 4px; border: 1px solid #ccc; padding: 2px; white-space: nowrap; overflow-x: hidden; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 30px; } .cell-evaluation-container .cell-evaluation.has-overflow { cursor: pointer; } .cell-evaluation-container .cell-evaluation.has-overflow .dcg-mq-math-mode { cursor: pointer; } .cell-evaluation-container .cell-evaluation .dcg-mathquill-wrapper { padding: 0; display: inline-block; width: auto; } .cell-evaluation-container .evaluation-suffix { padding-left: 3px; } .cell-evaluation-container .evaluation-ellipsis { position: absolute; top: 0; right: 0; bottom: 0; background: -webkit-linear-gradient(left, transparent, #fff); background: -moz-linear-gradient(left, transparent, #fff); background: -o-linear-gradient(left, transparent, #fff); background: -ms-linear-gradient(left, transparent, #fff); background: linear-gradient(to right, transparent, #fff); width: 20px; } .is-focused .cell-evaluation-container .cell-evaluation.just-mounted { -webkit-animation: fadeIn 0.4s; -moz-animation: fadeIn 0.4s; -o-animation: fadeIn 0.4s; -ms-animation: fadeIn 0.4s; animation: fadeIn 0.4s; } .is-focused .dcg-toggle-keypad-button { position: relative; top: 3px; left: 3px; height: calc(100% - 6px) !important; } /* src/js/activitybuilder/components/table/shared/table-cell.styl */ .dcg-table-cell { text-align: center; display: table-cell; position: relative; overflow: visible; vertical-align: middle; font-size: var(--table-cell-font-size, 95%); cursor: inherit !important; border: var(--table-cell-border); -webkit-background-clip: var(--table-cell-background-clip, none); -moz-background-clip: var(--table-cell-background-clip, none); background-clip: var(--table-cell-background-clip, none); } .dcg-table-cell:not(.is-rtl):not(.row-header-cell):not(:last-of-type) { border-right: var(--table-cell-border); } .dcg-table-cell:hover:not(.locked-cell):not(.dcg-table-cell.is-focused):not(.dcg-table-cell.add-new-row-cell) { outline: var(--table-cell-outline-hover, none); z-index: 2; outline-offset: var(--table-cell-outline-offset, none); cursor: var(--table-cursor, inherit) !important; } .dcg-table-cell.has-error { background: var(--field-has-error-background-color); z-index: 3; outline: var(--table-cell-outline-error, none); outline-offset: var(--table-cell-outline-offset, none); } .dcg-table-cell.has-error.locked-cell { background: var(--field-has-error-background-color, #e9e9e9); } .dcg-table-cell.is-focused { outline: var(--table-cell-outline-active, none); z-index: 4; outline-offset: var(--table-cell-outline-offset, none); } .dcg-table-cell.is-focused .cell-flex-container .main-cell-contents.has-icon > i:first-child { display: none; } .dcg-table-cell .mq-container { width: 100%; } .dcg-table-cell .dcg-braille-input { text-align: center; } .dcg-table-cell .cell-flex-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .dcg-table-cell .cell-flex-container .main-cell-contents { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; max-width: 100%; } .dcg-table-cell .cell-flex-container .main-cell-contents.has-icon .edit-icon { position: absolute; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 100%; width: 100%; z-index: -1; font-size: var(--table-cell-edit-icon-font, 24px); color: var(--table-cell-icon-color, rgba(59,59,59,0.65)); } .dcg-table-cell .cell-suffix { color: #666; -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; padding-right: 8px; } .dcg-table-cell .cell-suffix.has-evaluation { display: none; margin-left: 5px; margin-top: -1px; } .dcg-table-cell .locked-cell-indicator { position: absolute; top: 50%; left: 1px; margin-top: -10px; z-index: 1; } .dcg-table-cell .locked-cell-indicator i { display: inline-block; padding: 4px; color: #707070; cursor: pointer; font-size: 90%; } .dcg-table-cell .table-error-message { position: absolute; top: 50%; right: 10px; margin-top: -11px; cursor: pointer; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .dcg-table-cell .table-error-message i { margin: -5px; cursor: pointer; display: inline-block; } .dcg-table-cell:not(.header-cell) { font-size: var(--table-cell-font-size, 85%); } .dcg-table-cell:not(.header-cell) .dropdown-container { font-size: 118%; } .dcg-table-cell:not(.table-row-0):not(.table-row-1):before { content: ''; position: absolute; top: 0; left: 0; right: 0; border-top: var(--table-border-collapse-enabled, 1px solid #bdbdbd); } .dcg-table-cell:not(.table-row-0):not(.table-row-1):focus-visible:before, .dcg-table-cell:not(.table-row-0):not(.table-row-1).is-focused:before { border-top-color: #9c0d63; } .dcg-table-cell:focus-visible, .dcg-table-cell.is-focused { outline-offset: -3px; } .dcg-table-cell:focus-visible:after, .dcg-table-cell.is-focused:after { border-right-color: #9c0d63 !important; } .dcg-table-cell:not(.is-rtl):not(.row-header-cell):not(:last-of-type):after { content: ''; border-right: var(--table-border-collapse-enabled, 1px solid #000); position: absolute; top: 0; right: 0; bottom: 0; bottom: 0; } .dcg-table-cell:not(.is-rtl):not(.row-header-cell):not(:last-of-type).table-has-header-row:after { border-right-color: var(--table-border-collapse-enabled, #bdbdbd); } .dcg-table-cell.is-rtl:not(.row-header-cell):not(:first-of-type):after { content: ''; border-right: var(--table-border-collapse-enabled, 1px solid #000); position: absolute; top: 0; right: 0; bottom: 0; bottom: 0; } .dcg-table-cell.is-rtl:not(.row-header-cell):not(:first-of-type).table-has-header-row:after { border-right-color: var(--table-border-collapse-enabled, #bdbdbd); } .dcg-table-cell.is-focused { z-index: 4; -webkit-box-shadow: var(--table-border-collapse-enabled, 0 0 0 3px inset #9c0d63); box-shadow: var(--table-border-collapse-enabled, 0 0 0 3px inset #9c0d63); position: relative; } .dcg-table-cell.is-focused.column-header-cell { border-bottom: var(--table-border-collapse-enabled, 0); padding-bottom: var(--table-border-collapse-enabled, 1px); } .dcg-table-cell.is-focused:after { border-right: var(--table-border-collapse-enabled, 1px solid #9c0d63) !important; } .dcg-table-cell.is-focused:before { border-top: var(--table-border-collapse-enabled, 0); } .dcg-table-cell.add-new-row-cell { padding: var(--table-cell-new-row-padding); height: var(--table-cell-height-padded, 49.5px); } .dcg-table-cell.add-new-row-cell:first-of-type { background: var(--table-cell-add-new-background-color, #f6f6f6); } .dcg-table-cell.add-new-row-cell:before { border-color: #e9e9e9 !important; -webkit-box-shadow: 0 -0.5px 0 0.25px #bdbdbd; box-shadow: 0 -0.5px 0 0.25px #bdbdbd; } .dcg-table-cell.add-new-row-cell:after { border-color: #e9e9e9 !important; } .dcg-table-cell.add-new-row-cell.hidden { border-top: 0.5px solid #bdbdbd; } .dcg-table-cell.add-new-row-cell.hidden:before, .dcg-table-cell.add-new-row-cell.hidden:after { display: none; } .dcg-table-cell.add-new-row-cell i { line-height: var(--table-cell-edit-icon-font, 49px); color: var(--table-cell-icon-color, #676767); } .dcg-table-cell.cl-cell { cursor: default; height: 40px; } .dcg-table-cell.cl-cell .cl-cell-contents { width: 100%; height: 100%; font-size: 100%; text-align: center; outline: 0; border: 0; -webkit-box-shadow: none; box-shadow: none; color: #444; font-style: italic; } .dcg-table-cell.locked-cell { color: #3b3b3b; background: var(--table-cell-locked-background-color, #e9e9e9); } .dcg-table-cell.locked-cell .dcg-mathquill-braille-overflow-left .dcg-tooltip-hit-area-container:before { background: -webkit-linear-gradient(right, rgba(233,233,233,0), #e9e9e9); background: -moz-linear-gradient(right, rgba(233,233,233,0), #e9e9e9); background: -o-linear-gradient(right, rgba(233,233,233,0), #e9e9e9); background: -ms-linear-gradient(right, rgba(233,233,233,0), #e9e9e9); background: linear-gradient(to left, rgba(233,233,233,0), #e9e9e9); } .dcg-table-cell.locked-cell .dcg-mathquill-braille-overflow-right .dcg-tooltip-hit-area-container:after { background: -webkit-linear-gradient(left, rgba(233,233,233,0), #e9e9e9); background: -moz-linear-gradient(left, rgba(233,233,233,0), #e9e9e9); background: -o-linear-gradient(left, rgba(233,233,233,0), #e9e9e9); background: -ms-linear-gradient(left, rgba(233,233,233,0), #e9e9e9); background: linear-gradient(to right, rgba(233,233,233,0), #e9e9e9); } .dcg-table-cell.column-header-cell.locked-cell { background: var(--table-column-header-cell-background-color, #e9e9e9); } .dcg-table-cell .dcg-mathquill-wrapper { width: 100%; padding: var(--table-cell-padding, 10px); } .dcg-table-cell.editable-math-cell, .dcg-table-cell.editable-text-cell { padding: 0 !important; } .dcg-table-cell.editable-math-cell .cell-flex-container, .dcg-table-cell.editable-text-cell .cell-flex-container { padding: var(--table-cell-no-padding, 0 15px); cursor: text; } .dcg-table-cell.editable-math-cell .dcg-mq-editable-field.dcg-mq-math-mode, .dcg-table-cell .fast-static-math .dcg-mq-math-mode { border: 0; width: 100%; } .dcg-table-cell.editable-math-cell .dcg-mq-editable-field.dcg-mq-math-mode.dcg-mq-focused, .dcg-table-cell .fast-static-math .dcg-mq-math-mode.dcg-mq-focused { -webkit-box-shadow: none; box-shadow: none; border: 0; } .dcg-table-cell.dcg-table-cell-dash.editable-math-cell .dcg-mq-editable-field.dcg-mq-math-mode, .dcg-table-cell.dcg-table-cell-dash .fast-static-math .dcg-mq-math-mode { padding: 10px; } .dcg-table-cell .dcg-table-cell-mathquill.dcg-keypad-button-visible .dcg-mq-editable-field.dcg-mq-math-mode { padding-left: 25px; padding-right: 15px; } .dcg-table-cell .fast-static-math, .dcg-table-cell .fake-static-math { outline: 0; border: 0; } .dcg-table-cell .fast-static-math:focus, .dcg-table-cell .fake-static-math:focus { z-index: 1; -webkit-box-shadow: 4px 4px 0 -1px #bbb, -3px 3px #bbb, 4px -4px 0 -1px #bbb, -3px -3px #bbb; box-shadow: 4px 4px 0 -1px #bbb, -3px 3px #bbb, 4px -4px 0 -1px #bbb, -3px -3px #bbb; position: relative; } .header-cell .input-text-cell .prosemirror-container { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .header-cell .mixed-text-display { font-family: var(--font-family, "Helvetica Neue", Helvetica, Arial, sans-serif); font-weight: var(--font-weight-bold, 600); } .column-header-cell { border-bottom: var(--table-column-header-cell-border-bottom, 1px solid #000); background-color: var(--table-column-header-cell-background-color); } .column-header-cell.table-has-header-row { border-bottom-width: var(--table-cell-header-bottom-border-width, 2px); } .row-header-cell { border-right: 1px solid #000; } .row-header-cell.table-has-header-row { border-right: var(--table-cell-border-header, 2px solid #666); } .text-cell .input-text-cell .prosemirror-container { width: 100%; padding: var(--table-cell-padding, 10px 0); font-size: 100%; text-align: center; outline: 0; border: 0; } .text-cell:not(.dcg-table-cell-dash):not(.add-new-row-cell) { height: 40px; } .text-cell.editable-text-cell { cursor: text !important; } .text-cell.locked-cell .input-text-cell .prosemirror-container { background: #e9e9e9; } .text-cell .mixed-text-display { width: 100%; padding: var(--table-cell-padding, 10px 0); font-size: var(--table-cell-font-size, 100%); text-align: center; outline: 0; border: 0; display: inline-block; } .text-cell .mixed-text-display .empty-text { padding: 15px; } .text-cell .mixed-text-display:focus { z-index: 1; position: relative; } .text-cell.header-cell .mixed-text-display:focus { -webkit-box-shadow: 4px 4px 0 -1px #bbb, -4px 3px #bbb, 4px -5px 0 -1px #bbb, -4px -4px #bbb; box-shadow: 4px 4px 0 -1px #bbb, -4px 3px #bbb, 4px -5px 0 -1px #bbb, -4px -4px #bbb; } .text-cell:not(.header-cell) .mixed-text-display:focus { -webkit-box-shadow: 4px 4px 0 -1px #bbb, -3px 3px #bbb, 4px -4px 0 -1px #bbb, -3px -3px #bbb; box-shadow: 4px 4px 0 -1px #bbb, -3px 3px #bbb, 4px -4px 0 -1px #bbb, -3px -3px #bbb; } .dcg-table-playground-view .dcg-table-cell, .snapshot-table .dcg-table-cell, .dcg-table-exhibit .dcg-table-cell { padding-left: var(--table-cell-padding-left, 15px); padding-right: var(--table-cell-padding-right, 15px); } .dcg-table-playground-view .dcg-table-cell:not(.header-cell) .cell-flex-container .main-cell-contents, .snapshot-table .dcg-table-cell:not(.header-cell) .cell-flex-container .main-cell-contents, .dcg-table-exhibit .dcg-table-cell:not(.header-cell) .cell-flex-container .main-cell-contents { overflow: auto; } .dcg-table-playground-view .dcg-table-cell:not(.header-cell) .cell-flex-container .main-cell-contents .dcg-mq-root-block, .snapshot-table .dcg-table-cell:not(.header-cell) .cell-flex-container .main-cell-contents .dcg-mq-root-block, .dcg-table-exhibit .dcg-table-cell:not(.header-cell) .cell-flex-container .main-cell-contents .dcg-mq-root-block { overflow: visible; } .dcg-table-playground-view .dcg-table-cell .dcg-calculator-api-container .dcg-mq-math-mode, .snapshot-table .dcg-table-cell .dcg-calculator-api-container .dcg-mq-math-mode, .dcg-table-exhibit .dcg-table-cell .dcg-calculator-api-container .dcg-mq-math-mode { font-weight: var(--table-cell-weight, inherit); } .dcg-table-playground-view .dcg-table-cell:not(.locked-cell), .dcg-table-exhibit .dcg-table-cell:not(.locked-cell) { min-width: 85px; max-width: 0; } /* src/js/activitybuilder/components/table/shared/table.styl */ .dcg-table-exhibit { width: calc(100% - 6px); max-width: 600px; display: table; position: relative; outline: var(--table-outline, 0.5px solid #bdbdbd); margin: 3px; border-collapse: var(--table-border-collapse, separate); } .dcg-table-exhibit.can-add-rows:before { content: ''; position: absolute; left: -0.5px; right: -0.5px; bottom: -1px; height: 49px; z-index: 1; border-left: 0.5px solid #e9e9e9; border-right: 0.5px solid #e9e9e9; border-bottom: 0.5px solid #e9e9e9; pointer-events: none; } .dcg-table-exhibit.can-add-rows .add-row:after { content: ''; position: absolute; bottom: -0.5px; left: 0; right: 0; background: #e9e9e9; height: 0.5px; } .dcg-table-exhibit.one-column-table { max-width: 350px; } .dcg-table-exhibit .table-exhibit-row { display: table-row; } .dcg-table-exhibit .dcg-table-cell .dcg-toggle-keypad-button { color: var(--table-keyboard-button-color); } .dcg-table-exhibit .dcg-table-cell .dcg-toggle-keypad-button.active { color: var(--table-keyboard-button-color-active, #fff); background: var(--table-keyboard-button-background-color-active, #3278c8); } .dcg-table-exhibit .floating-table-keypad-button { position: absolute; bottom: var(--table-keypad-button-bottom, calc(-1 * (40px + calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5)))); right: -1px; } .dcg-table-exhibit .floating-table-keypad-button .dcg-toggle-keypad-button { width: var(--table-keypad-button-width, 40px); height: var(--table-keypad-button-height, 40px); padding: 0; } .dcg-table-exhibit .floating-table-keypad-button .dcg-toggle-keypad-button i { margin: auto; height: 100%; line-height: var(--table-keypad-button-icon-line-height, 1.4em); } .dcg-table-playground-view { text-align: center; } .dcg-table-playground-view .dcg-table-exhibit { margin-left: auto; margin-right: auto; } .fullscreen-layout .dcg-table-playground-view .camera-header-container { max-width: 550px; } .fullscreen-layout .dcg-table-playground-view .dcg-table-exhibit { margin: 0 auto; width: auto; min-width: 550px; max-width: calc(100% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 4)); } @media screen and (max-width: 550px) { .fullscreen-layout .dcg-table-playground-view .table-wrapper { max-width: calc(100% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 4)); margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .fullscreen-layout .dcg-table-playground-view .dcg-table-exhibit { min-width: 100%; } } /* src/js/activitybuilder/components/text-exhibit/miniscreen.styl */ .component-container .miniscreen-component-container .text-exhibit-miniscreen { -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; color: #666; font-size: 13px; margin: 0; overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; line-height: 1.2em; } .component-container .miniscreen-component-container .text-exhibit-miniscreen p { line-height: 1.2em !important; } .component-container .miniscreen-component-container .text-exhibit-miniscreen h2 { font-size: 1.5em !important; } .component-container .miniscreen-component-container .text-exhibit-miniscreen .dcg-mq-math-mode { font-size: 100%; cursor: inherit; } .component-container .miniscreen-component-container .text-exhibit-miniscreen .fade-out { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 10px; background: -webkit-linear-gradient(rgba(255,255,255,0), #fff); background: -moz-linear-gradient(rgba(255,255,255,0), #fff); background: -o-linear-gradient(rgba(255,255,255,0), #fff); background: -ms-linear-gradient(rgba(255,255,255,0), #fff); background: linear-gradient(rgba(255,255,255,0), #fff); } .component-container .miniscreen-component-container .text-exhibit-miniscreen .blue-link.prosemirror-link-preview { pointer-events: none; } .component-container .miniscreen-component-container .text-exhibit-miniscreen .prosemirror-view-taped-note-container { margin-top: 4px; width: 90%; margin-left: 5%; } .component-container .miniscreen-component-container .text-exhibit-miniscreen .prosemirror-view-taped-note-container .note.taped { -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,0.3); box-shadow: 1px 2px 3px rgba(0,0,0,0.3); } .component-container .miniscreen-component-container .text-exhibit-miniscreen .prosemirror-view-taped-note-container .note, .component-container .miniscreen-component-container .text-exhibit-miniscreen .k5-note { min-width: 30px; padding: 5%; margin-top: 0px; } .component-container .miniscreen-component-container .text-exhibit-miniscreen .prosemirror-view-taped-note-container .note p, .component-container .miniscreen-component-container .text-exhibit-miniscreen .k5-note p, .component-container .miniscreen-component-container .text-exhibit-miniscreen .prosemirror-view-taped-note-container .note h2, .component-container .miniscreen-component-container .text-exhibit-miniscreen .k5-note h2, .component-container .miniscreen-component-container .text-exhibit-miniscreen .prosemirror-view-taped-note-container .note h1, .component-container .miniscreen-component-container .text-exhibit-miniscreen .k5-note h1 { line-height: 1.2em; white-space-collapse: collapse; } .component-container .miniscreen-component-container .text-exhibit-miniscreen .prosemirror-view-taped-note-container .note .prosemirror-container .dcg-prosemirror-editor ul, .component-container .miniscreen-component-container .text-exhibit-miniscreen .k5-note .prosemirror-container .dcg-prosemirror-editor ul { padding: 0 3px; } .component-container .miniscreen-component-container .text-exhibit-miniscreen .prosemirror-view-taped-note-container .note.taped:before, .component-container .miniscreen-component-container .text-exhibit-miniscreen .k5-note.taped:before, .component-container .miniscreen-component-container .text-exhibit-miniscreen .prosemirror-view-taped-note-container .note.note-taped:before, .component-container .miniscreen-component-container .text-exhibit-miniscreen .k5-note.note-taped:before { position: absolute; content: ""; top: 0px; width: 12px; height: 5px; left: -2px; -webkit-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -o-transform: rotate(-25deg); -ms-transform: rotate(-25deg); transform: rotate(-25deg); } .component-container .miniscreen-component-container .text-exhibit-miniscreen .prosemirror-view-taped-note-container .note.taped:after, .component-container .miniscreen-component-container .text-exhibit-miniscreen .k5-note.taped:after, .component-container .miniscreen-component-container .text-exhibit-miniscreen .prosemirror-view-taped-note-container .note.note-taped:after, .component-container .miniscreen-component-container .text-exhibit-miniscreen .k5-note.note-taped:after { position: absolute; content: ""; width: 12px; height: 5px; top: 0px; right: -2px; -webkit-transform: rotate(32deg); -moz-transform: rotate(32deg); -o-transform: rotate(32deg); -ms-transform: rotate(32deg); transform: rotate(32deg); } .component-container .miniscreen-component-container .text-exhibit-miniscreen .k5-note p, .component-container .miniscreen-component-container .text-exhibit-miniscreen .k5-note h2, .component-container .miniscreen-component-container .text-exhibit-miniscreen .k5-note h1 { font-family: var(--note-font-family); } .component-container .miniscreen-component-container .text-exhibit-miniscreen .k5-note p strong, .component-container .miniscreen-component-container .text-exhibit-miniscreen .k5-note h2 strong, .component-container .miniscreen-component-container .text-exhibit-miniscreen .k5-note h1 strong { font-weight: var(--font-weight-bold); } .text-exhibit-miniscreen-loading { padding-top: 5px; padding-right: 5px; } .text-exhibit-miniscreen-loading .loading-row { background: #e2e2e2; height: 9px; margin-bottom: 4px; -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; } .text-exhibit-miniscreen-loading .half-loading-row { width: 40%; } /* src/js/activitybuilder/components/text-exhibit/note.styl */ .prosemirror-view-taped-note-container { width: 100%; position: relative; display: inline-block; } .prosemirror-view-taped-note-container .note { position: relative; background: #fff; border: solid 1px #f0f0f0; } .prosemirror-view-taped-note-container .note.taped:before { position: absolute; content: ""; width: 50px; height: 25px; top: -9px; left: -13px; -webkit-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -o-transform: rotate(-25deg); -ms-transform: rotate(-25deg); transform: rotate(-25deg); background: #f7f6f0; border: solid 1px #d7d7d7; -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.3); box-shadow: 1px 1px 1px rgba(0,0,0,0.3); opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); } .prosemirror-view-taped-note-container .note.taped:after { position: absolute !important; content: ""; width: 50px; height: 25px; top: -6px; right: -16px; -webkit-transform: rotate(32deg); -moz-transform: rotate(32deg); -o-transform: rotate(32deg); -ms-transform: rotate(32deg); transform: rotate(32deg); background: #f7f6f0; border: solid 1px #d7d7d7; -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.3); box-shadow: 1px 1px 1px rgba(0,0,0,0.3); opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); } /* src/js/activitybuilder/components/text-exhibit/playground/view.styl */ .text-exhibit-container { display: var(--text-exhibit-container-display); } .text-exhibit-container .text-exhibit-playground-view { -webkit-box-flex: var(--text-exhibit-view-flex-grow, 0); -moz-box-flex: var(--text-exhibit-view-flex-grow, 0); -o-box-flex: var(--text-exhibit-view-flex-grow, 0); -ms-box-flex: var(--text-exhibit-view-flex-grow, 0); box-flex: var(--text-exhibit-view-flex-grow, 0); -webkit-flex-grow: var(--text-exhibit-view-flex-grow, 0); flex-grow: var(--text-exhibit-view-flex-grow, 0); max-width: 100%; } /* src/js/activitybuilder/components/text-exhibit/shared-view.styl */ .dcg-text-exhibit-view .note .dcg-prosemirror-view p { font-size: calc(var(--scale-ratio) * 1em); line-height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); font-weight: var(--note-font-weight, 300); } .dcg-text-exhibit-view .note .dcg-prosemirror-view p strong { font-weight: 700; } .dcg-text-exhibit-view .note .dcg-prosemirror-view h2 { font-size: calc(var(--scale-ratio) * var(--scale-ratio) * 1em); line-height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); font-weight: var(--note-font-weight, normal); } .dcg-text-exhibit-view .note .dcg-prosemirror-view h1 { font-size: calc(var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio) * 1em); line-height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); font-weight: var(--note-font-weight, normal); } .dcg-text-exhibit-view .k5-note { font-family: var(--note-font-family); font-weight: var(--note-font-weight); } .dcg-text-exhibit-view .k5-note .prosemirror-container .dcg-prosemirror-editor p, .dcg-text-exhibit-view .k5-note .prosemirror-container .dcg-prosemirror-editor h2, .dcg-text-exhibit-view .k5-note .prosemirror-container .dcg-prosemirror-editor h1 { font-weight: inherit; } .dcg-text-exhibit-view .k5-note .prosemirror-container .dcg-prosemirror-editor p { font-size: 1em; line-height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .dcg-text-exhibit-view .k5-note .prosemirror-container .dcg-prosemirror-editor p strong { font-weight: 700; } .dcg-text-exhibit-view .k5-note .prosemirror-container .dcg-prosemirror-editor h2 { font-size: calc(var(--scale-ratio) * 1em); line-height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); font-family: var(--note-font-family); } .dcg-text-exhibit-view .k5-note .prosemirror-container .dcg-prosemirror-editor h1 { font-size: calc(var(--scale-ratio) * var(--scale-ratio) * 1em); line-height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); font-family: var(--note-font-family); } .dcg-text-exhibit-view, .text-exhibit-playground-view .dcg-prosemirror-view { -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; margin: 0 auto var(--text-exhibit-playground-margin-bottom, calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2)); } .dcg-text-exhibit-view .prosemirror-view-taped-note-container { margin-top: 15px; } .dcg-text-exhibit-view .prosemirror-view-taped-note-container .note { min-width: 300px; padding: 20px; -webkit-box-shadow: 7px 6px 6px rgba(0,0,0,0.4); box-shadow: 7px 6px 6px rgba(0,0,0,0.4); } .dcg-text-exhibit-view .prosemirror-view-taped-note-container .note .prosemirror-container .dcg-prosemirror-editor .dcg-prosemirror-view { margin: 0 auto 0; } .dcg-text-exhibit-view .prosemirror-view-taped-note-container .note .prosemirror-container .dcg-prosemirror-editor ul { padding: 0 20px; } .dcg-text-exhibit-view .dcg-calculator-api-container .dcg-mq-math-mode { font-weight: var(--note-font-weight, inherit); } .amp-styles .dcg-text-exhibit-view.scale-plus-1 { font-size: var(--font-size-default, calc(var(--scale-ratio) * 1em)); } /* src/js/activitybuilder/components/text-input/miniscreen.styl */ .text-input-miniscreen { border-radius: 3px; border: 1px dashed #bbb; padding: 5px; margin: 2px 0 10px; text-align: center; } .text-input-miniscreen i { font-size: 24px; color: #bbb; } .dcg-layout-column:first-child.one-third .text-input-miniscreen i { font-size: 16px; } .dcg-layout-column:last-child.two-third .text-input-miniscreen i { font-size: 16px; } /* src/js/activitybuilder/components/text-input/playground/view.styl */ .dcg-text-input-student-view { margin: 0 auto; } .dcg-text-input-student-view .camera-header-container { width: 100%; height: var(--snapshot-camera-size, 26px); text-align: right; } .dcg-text-input-student-view.playground-layout-k5 { max-width: none; } /* src/js/activitybuilder/components/text-input/student-response.styl */ .text-input-response-text { white-space: pre-wrap; word-wrap: break-word; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .text-input-response-text .mixed-text-display { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .text-input-response-text.has-attached-media .mixed-text-display { margin-bottom: 10px; } .text-input-response-text .component-audio-player-wrapper { margin-top: 10px; } .text-input-response-text .component-audio-player-wrapper .audio-player-error { font-size: 75%; } .text-input-response-text:not(.submitted) .textarea-image-thumbnails { margin-top: 5px; } /* src/js/activitybuilder/components/transform/item-list.styl */ .transform-item-list { margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .transform-item-list .submitted-content { margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .transform-item-list .transform-list-header-container { border-bottom: 1px solid #bdbdbd; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .transform-item-list .transform-list-header-container .transform-list-title { color: #3b3b3b; } .transform-item-list .transform-list-header-container .transform-play-button { margin-left: auto; color: #9c0d63; } .transform-item-list .transform-list-header-container .transform-play-button .play-icon-container { position: relative; top: 5px; background: #9c0d63; color: #9c0d63; border-radius: 50%; width: 25px; height: 25px; display: inline-block; margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .transform-item-list .transform-list-header-container .transform-play-button .play-icon-container .icon-v2-play { color: #fff; } .transform-item-list .transform-list-header-container .transform-play-button.dcg-hovered { color: #5e083b; } .transform-item-list .transform-list-header-container .transform-play-button.dcg-hovered .play-icon-container { background: #5e083b; -webkit-transform: scale(1.05, 1.05); -moz-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); } .transform-item-list .transform-list-header-container .transform-play-button.dcg-depressed { color: #2f041e; } .transform-item-list .transform-list-header-container .transform-play-button.dcg-depressed .play-icon-container { background: #2f041e; } .transform-item-list .add-transformation-buttons { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .transform-item-list .add-transformation-buttons .add-transformation-button { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: center; } .transform-item-list .add-transformation-buttons .add-transformation-button .icon-v2-replay { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } .transform-item-list .submit-transform-buttons { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .transform-item-list .submit-transform-buttons .cancel-link { color: #666; text-decoration: underline; } .transform-item-list .submit-transform-buttons .cancel-link.disabled { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .transform-item-list .submit-transform-buttons .cancel-link:not(.disabled).dcg-hovered, .transform-item-list .submit-transform-buttons .cancel-link:not(.disabled).dcg-depressed { color: #333; cursor: pointer; } .transform-item-list .transformation-card-container { display: block; width: 100%; } /* src/js/activitybuilder/components/transform/miniscreen.styl */ .transformation-miniscreen { position: relative; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .transformation-miniscreen .icon-container { font-size: 200%; width: 100%; text-align: center; position: absolute; top: 50%; left: 0; padding-top: 10px; height: 50px; margin-top: -25px; color: #999; text-shadow: calc(1px * -1) calc(1px * -1) 0 #fff, calc(1px * -1) 1px 0 #fff, 1px calc(1px * -1) 0 #fff, 1px 1px 0 #fff, 0 calc(1px * -1) 0 #fff, 0 1px 0 #fff, 1px 0 0 #fff, calc(1px * -1) 0 0 #fff; } /* src/js/activitybuilder/components/transform/playground/view.styl */ /* src/js/activitybuilder/components/transform/transform-card-options.styl */ .transform-card { color: #3b3b3b; } .transform-card .transform-item-info .transformation-options { padding-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); border-left: 1px solid #bdbdbd; } .transform-card:not(.unsubmitted) .transform-item-info .transformation-options { display: inline-block; color: #3b3b3b; padding-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); vertical-align: middle; } .transform-card:not(.unsubmitted) .transform-item-info .transformation-options .input-label { margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .transform-card:not(.unsubmitted) .transform-item-info .transformation-options .dcg-mq-math-mode { max-width: 225px; } .transform-card:not(.unsubmitted) .transform-item-info .transformation-options .dcg-mq-math-mode .dcg-mq-root-block { white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .transform-card.unsubmitted .transform-item-info .transformation-options { margin-left: calc(1.5em + calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .transform-card.unsubmitted .transform-item-info .transformation-options .rotation-direction { display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-box; display: inline-flex; } .transform-card.unsubmitted .transform-item-info .transformation-options .rotation-direction .dcg-segmented-control-btn { min-width: 128px; } .transform-card.unsubmitted .transform-item-info .transformation-options .rotation-direction .dcg-segmented-control-btn.dcg-hovered:first-of-type:not(.dcg-selected) { margin-left: 1px; padding-left: 3px; } .transform-card.unsubmitted .transform-item-info .transformation-options .rotation-direction .dcg-segmented-control-btn:focus-visible { z-index: 2; -webkit-box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #9c0d63; box-shadow: 0 0 0 0.125rem #fff, 0 0 0 0.3125rem #9c0d63; } .transform-card.unsubmitted .transform-item-info .transformation-options .angle-label { display: inline-block; margin: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem) calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; } .transform-card.unsubmitted .transform-item-info .transformation-options .transform-input { text-align: center; } .transform-card.unsubmitted .transform-item-info .transformation-options .transform-input .dcg-mq-math-mode { border: 1px solid #bdbdbd; border-radius: 0.1875em; width: 2.5em; height: 2rem; margin: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); line-height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .transform-card.unsubmitted .transform-item-info .transformation-options .transform-input .dcg-mq-math-mode.dcg-mq-focused { border: 1px solid #9c0d63; -webkit-box-shadow: none; box-shadow: none; outline: none; } .transform-card.unsubmitted .transform-item-info .transformation-options .transform-input.rotation { margin-right: 0; } .transform-card.unsubmitted .transform-item-info .transformation-options .transform-input.invalid .dcg-mq-math-mode { border: 1px solid #db2e00; -webkit-box-shadow: none; box-shadow: none; outline: none; } /* src/js/activitybuilder/components/transform/transform-card.styl */ .transform-card-container { color: #3b3b3b; } .transform-card-container .transform-card .transform-item-title { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .transform-card-container .transform-card .transform-item-info .transform-item-title-container .pillow-icon-dilation { font-size: 1.5em; } .transform-card-container .transform-card:not(.unsubmitted) { border-bottom: 1px solid #bdbdbd; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .transform-card-container .transform-card:not(.unsubmitted) .transform-item-info { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .transform-card-container .transform-card:not(.unsubmitted) .transform-item-info .transform-item-title { position: relative; top: -2px; display: inline-block; } .transform-card-container .transform-card:not(.unsubmitted) .transform-item-info .transform-item-index-container { border: 1px solid #bdbdbd; color: #3b3b3b; border-radius: 50%; min-width: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); display: inline-block; position: relative; margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .transform-card-container .transform-card:not(.unsubmitted) .transform-item-info .transform-item-index-container .transform-item-index { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .transform-card-container .transform-card:not(.unsubmitted) .transform-item-info .transform-item-title-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; white-space: nowrap; } .transform-card-container .transform-card .transform-item-icons { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 80px; -ms-flex: 0 0 80px; flex: 0 0 80px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; gap: rhythm-unit-half; } .transform-card-container .transform-card .transform-item-icons .transform-item { height: 100%; width: 40px; height: 40px; color: #3b3b3b; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .transform-card-container .transform-card .transform-item-icons .transform-item i { padding-right: 0; } .transform-card-container .transform-card.unsubmitted { position: relative; border: 1px solid #bdbdbd; border-radius: 0.1875em; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .transform-card-container .transform-card.unsubmitted .transform-item-info .transform-item-title-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .transform-card-container .transform-card.unsubmitted .transform-item-instruction { color: #676767; text-transform: none; width: 100%; line-height: 100%; margin-left: calc(2em + calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .transform-card-container .transform-card.unsubmitted.collided { -webkit-animation: shake 0.4s linear 0.2s; -moz-animation: shake 0.4s linear 0.2s; -o-animation: shake 0.4s linear 0.2s; -ms-animation: shake 0.4s linear 0.2s; animation: shake 0.4s linear 0.2s; } .transform-card-container .transform-card.unsubmitted .transform-item-icons .icon-v2-close { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); top: 0; position: absolute; right: 0; outline: 0; } @-moz-keyframes shake { 0% { -webkit-transform: translate(12px); -moz-transform: translate(12px); -o-transform: translate(12px); -ms-transform: translate(12px); transform: translate(12px); } 20% { -webkit-transform: translate(-12px); -moz-transform: translate(-12px); -o-transform: translate(-12px); -ms-transform: translate(-12px); transform: translate(-12px); } 40% { -webkit-transform: translate(6px); -moz-transform: translate(6px); -o-transform: translate(6px); -ms-transform: translate(6px); transform: translate(6px); } 60% { -webkit-transform: translate(-6px); -moz-transform: translate(-6px); -o-transform: translate(-6px); -ms-transform: translate(-6px); transform: translate(-6px); } 80% { -webkit-transform: translate(3px); -moz-transform: translate(3px); -o-transform: translate(3px); -ms-transform: translate(3px); transform: translate(3px); } 100% { -webkit-transform: translate(0px); -moz-transform: translate(0px); -o-transform: translate(0px); -ms-transform: translate(0px); transform: translate(0px); } } @-webkit-keyframes shake { 0% { -webkit-transform: translate(12px); -moz-transform: translate(12px); -o-transform: translate(12px); -ms-transform: translate(12px); transform: translate(12px); } 20% { -webkit-transform: translate(-12px); -moz-transform: translate(-12px); -o-transform: translate(-12px); -ms-transform: translate(-12px); transform: translate(-12px); } 40% { -webkit-transform: translate(6px); -moz-transform: translate(6px); -o-transform: translate(6px); -ms-transform: translate(6px); transform: translate(6px); } 60% { -webkit-transform: translate(-6px); -moz-transform: translate(-6px); -o-transform: translate(-6px); -ms-transform: translate(-6px); transform: translate(-6px); } 80% { -webkit-transform: translate(3px); -moz-transform: translate(3px); -o-transform: translate(3px); -ms-transform: translate(3px); transform: translate(3px); } 100% { -webkit-transform: translate(0px); -moz-transform: translate(0px); -o-transform: translate(0px); -ms-transform: translate(0px); transform: translate(0px); } } @-o-keyframes shake { 0% { -webkit-transform: translate(12px); -moz-transform: translate(12px); -o-transform: translate(12px); -ms-transform: translate(12px); transform: translate(12px); } 20% { -webkit-transform: translate(-12px); -moz-transform: translate(-12px); -o-transform: translate(-12px); -ms-transform: translate(-12px); transform: translate(-12px); } 40% { -webkit-transform: translate(6px); -moz-transform: translate(6px); -o-transform: translate(6px); -ms-transform: translate(6px); transform: translate(6px); } 60% { -webkit-transform: translate(-6px); -moz-transform: translate(-6px); -o-transform: translate(-6px); -ms-transform: translate(-6px); transform: translate(-6px); } 80% { -webkit-transform: translate(3px); -moz-transform: translate(3px); -o-transform: translate(3px); -ms-transform: translate(3px); transform: translate(3px); } 100% { -webkit-transform: translate(0px); -moz-transform: translate(0px); -o-transform: translate(0px); -ms-transform: translate(0px); transform: translate(0px); } } @keyframes shake { 0% { -webkit-transform: translate(12px); -moz-transform: translate(12px); -o-transform: translate(12px); -ms-transform: translate(12px); transform: translate(12px); } 20% { -webkit-transform: translate(-12px); -moz-transform: translate(-12px); -o-transform: translate(-12px); -ms-transform: translate(-12px); transform: translate(-12px); } 40% { -webkit-transform: translate(6px); -moz-transform: translate(6px); -o-transform: translate(6px); -ms-transform: translate(6px); transform: translate(6px); } 60% { -webkit-transform: translate(-6px); -moz-transform: translate(-6px); -o-transform: translate(-6px); -ms-transform: translate(-6px); transform: translate(-6px); } 80% { -webkit-transform: translate(3px); -moz-transform: translate(3px); -o-transform: translate(3px); -ms-transform: translate(3px); transform: translate(3px); } 100% { -webkit-transform: translate(0px); -moz-transform: translate(0px); -o-transform: translate(0px); -ms-transform: translate(0px); transform: translate(0px); } } /* src/js/activitybuilder/components/transform/transform-view.styl */ .layout-top-student-view.showing-correctness .transform-view { margin-left: 49px; margin-right: 49px; } .transform-wrapper { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; width: 100%; max-width: 1000px; margin: 0 auto; position: relative; } .transform-wrapper .transform-area, .transform-wrapper .transform-list-control { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 50%; -ms-flex: 50%; flex: 50%; padding: 0 10px; } .transform-wrapper .transform-area { position: relative; overflow: hidden; } .transform-wrapper .transform-area .transform-canvas-container { position: relative; } .transform-wrapper .transform-area .transform-canvas-container .fixed-aspect-parent { min-width: 300px; max-width: 478px; min-height: 478px; } .transform-wrapper .transform-area .transform-canvas-container .fixed-aspect-container { position: relative; margin: auto; } .transform-wrapper .transform-area .transform-canvas-container canvas { position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 1px solid #bbb; } .transform-wrapper .transform-area .transform-canvas-container canvas.point-active { cursor: pointer; } .transform-wrapper .transform-area .transform-canvas-container .transform-success { text-align: center; color: #15b097; text-shadow: calc(3px * -1) calc(3px * -1) 0 #fff, calc(3px * -1) 3px 0 #fff, 3px calc(3px * -1) 0 #fff, 3px 3px 0 #fff, 0 calc(3px * -1) 0 #fff, 0 3px 0 #fff, 3px 0 0 #fff, calc(3px * -1) 0 0 #fff; font-size: 350%; height: 70px; line-height: 70px; width: 300px; position: absolute; top: 50%; left: 50%; margin: -35px 0 0 -150px; -webkit-animation: animateTransformSuccess 1.8s forwards; -moz-animation: animateTransformSuccess 1.8s forwards; -o-animation: animateTransformSuccess 1.8s forwards; -ms-animation: animateTransformSuccess 1.8s forwards; animation: animateTransformSuccess 1.8s forwards; pointer-events: none; } .transform-wrapper .correctness-gutter { padding-right: 10px; } @media screen and (max-width: 1109px) { .layout-top-student-view.showing-correctness.fullscreen-layout .transform-view { margin-left: 0; margin-right: 49px; } } @media screen and (max-width: 750px) { .transform-wrapper { -webkit-box-direction: reverse; -moz-box-direction: reverse; -o-box-direction: reverse; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .transform-wrapper .transform-area, .transform-wrapper .transform-list-control { margin: 0 auto; width: 100%; max-width: 498px; } .transform-wrapper .transform-area { padding-bottom: 10px; } .transform-wrapper .transform-area .fixed-aspect-parent { max-width: 498px; max-height: 498px; } } @-moz-keyframes animateTransformSuccess { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.7, 0.7); -moz-transform: scale(0.7, 0.7); -o-transform: scale(0.7, 0.7); -ms-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); } 15% { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 30% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 75% { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(5, 5); -moz-transform: scale(5, 5); -o-transform: scale(5, 5); -ms-transform: scale(5, 5); transform: scale(5, 5); } } @-webkit-keyframes animateTransformSuccess { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.7, 0.7); -moz-transform: scale(0.7, 0.7); -o-transform: scale(0.7, 0.7); -ms-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); } 15% { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 30% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 75% { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(5, 5); -moz-transform: scale(5, 5); -o-transform: scale(5, 5); -ms-transform: scale(5, 5); transform: scale(5, 5); } } @-o-keyframes animateTransformSuccess { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.7, 0.7); -moz-transform: scale(0.7, 0.7); -o-transform: scale(0.7, 0.7); -ms-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); } 15% { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 30% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 75% { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(5, 5); -moz-transform: scale(5, 5); -o-transform: scale(5, 5); -ms-transform: scale(5, 5); transform: scale(5, 5); } } @keyframes animateTransformSuccess { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.7, 0.7); -moz-transform: scale(0.7, 0.7); -o-transform: scale(0.7, 0.7); -ms-transform: scale(0.7, 0.7); transform: scale(0.7, 0.7); } 15% { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 30% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 75% { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(5, 5); -moz-transform: scale(5, 5); -o-transform: scale(5, 5); -ms-transform: scale(5, 5); transform: scale(5, 5); } } /* src/js/activitybuilder/components/video/miniscreen.styl */ .video-miniscreen { position: relative; } .video-miniscreen .image-container img { width: 100%; border-radius: 2px; } .video-miniscreen .icon-container { width: 100%; text-align: center; position: absolute; top: 50%; left: 0; padding-top: 10px; height: 50px; margin-top: -25px; color: #fff; text-shadow: calc(1px * -1) calc(1px * -1) 0 rgba(0,0,0,0.08), calc(1px * -1) 1px 0 rgba(0,0,0,0.08), 1px calc(1px * -1) 0 rgba(0,0,0,0.08), 1px 1px 0 rgba(0,0,0,0.08), 0 calc(1px * -1) 0 rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.08), 1px 0 0 rgba(0,0,0,0.08), calc(1px * -1) 0 0 rgba(0,0,0,0.08); } .video-miniscreen .icon-container .play-icon-container { font-size: 70%; border: 3px solid #fff; -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,0.25), inset 0 0 1px 1px rgba(0,0,0,0.25); box-shadow: 0 0 1px 1px rgba(0,0,0,0.25), inset 0 0 1px 1px rgba(0,0,0,0.25); border-radius: 50%; width: 30px; height: 30px; line-height: 30px; display: inline-block; } .video-miniscreen .icon-container .play-icon-container .pillow-icon-play { position: relative; top: -2px; left: 2px; } .layout-top-miniscreen:not(.two-column) .video-miniscreen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 2px; } .layout-top-miniscreen:not(.two-column) .video-miniscreen .fade-out { width: 100%; position: absolute; bottom: 0; left: 0; right: 0; height: 20px; background: -webkit-linear-gradient(rgba(255,255,255,0), #fff 75%); background: -moz-linear-gradient(rgba(255,255,255,0), #fff 75%); background: -o-linear-gradient(rgba(255,255,255,0), #fff 75%); background: -ms-linear-gradient(rgba(255,255,255,0), #fff 75%); background: linear-gradient(rgba(255,255,255,0), #fff 75%); } .navigation-miniscreen-container .video-miniscreen .icon-container { padding-top: 0; } .navigation-miniscreen-container .video-miniscreen .play-icon-container { font-size: 25%; border: 2px solid #fff; width: 25px; height: 25px; line-height: 25px; } .navigation-miniscreen-container .video-miniscreen .play-icon-container .pillow-icon-play { top: -1px; } /* src/js/activitybuilder/components/video/player/view.styl */ .player-status-view { color: #999; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 100%; } .player-status-view .status-message { font-size: 150%; } .upload-complete { color: #3278c8; } .upload-complete .pillow-icon-check { margin-right: 10px; font-size: 90%; } .video-container video { background: #000; border-radius: 0.1875em; } .video-player-offscreen-aria { position: absolute; top: -1000px; left: -1000px; width: 1px; height: 1px; overflow: hidden; } /* src/js/activitybuilder/components/video/playground/view.styl */ .dcg-video-component-playground video { width: 100%; border: var(--border-component); border-radius: var(--border-radius); } .dcg-video-component-playground video::cue { background: rgba(0,0,0,0.9); font-size: 130%; line-height: 1.2em; } /* src/js/activitybuilder/custom/alp-accessibility.styl */ .accessibility-section { margin-top: 30px; color: #333; } .accessibility-section .accessibility-title { display: inline; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .accessibility-section .custom-note { display: inline; padding-left: 10px; border-left: 1px solid #999; margin-left: 10px; } .accessibility-section .accessibility-info, .accessibility-section .accessibility-title-and-custom { margin-bottom: 1em; } /* src/js/activitybuilder/custom/alp-lesson-standards.styl */ .lesson-standards-container .lesson-standards-section { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .lesson-standards-container .lesson-standards-section .lesson-standards-category { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin-right: 10px; margin-top: 10px; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .lesson-standards-container .lesson-standards-section .lesson-standards-category ul { list-style: none; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; padding: 0 5px; margin: 0; } .lesson-standards-container .lesson-standards-section .lesson-standards-category ul li { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin: 3px; } .lesson-standards-container .lesson-standards-section .lesson-standards-category ul li a { font-size: 80%; padding: 3px 5px; border-radius: 2px; color: #3b3b3b; text-decoration: none; border: 1px solid #bdbdbd; vertical-align: middle; -webkit-transition: border-color 0.2s linear; -moz-transition: border-color 0.2s linear; -o-transition: border-color 0.2s linear; -ms-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .lesson-standards-container .lesson-standards-section .lesson-standards-category ul li a.dcg-hovered { border: 1px solid #9c0d63; } .lesson-standards-container .lesson-standards-section .lesson-standards-category ul li a.dcg-depressed { border: 1px solid #5e083b; } .lesson-standards-container .no-teks-lesson-standards { font-style: italic; font-size: 80%; color: #333; } /* src/js/activitybuilder/custom/alp-preview.styl */ .alp-presentation { margin-top: 25px; } .alp-section .alp-link { position: relative; top: -10px; color: #3278c8; text-decoration: none; } .alp-section .alp-link .alp-link-text { margin-left: 5px; } .alp-section .alp-link.dcg-hovered { color: #004f9b; } .alp-section .alp-link.dcg-hovered .alp-link-text { text-decoration: underline; } .alp-section .alp-link.dcg-hovered { color: #033b70; } .alp-section .alp-link.dcg-hovered .alp-link-text { text-decoration: underline; } .alp-copy-event-indicator { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.8); z-index: 4; } .alp-preview-miniscreen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; overflow: hidden; } /* src/js/activitybuilder/custom/k5-theme/index.styl */ [data-theme-id="k5"] .dcg-cardsort-group { border-radius: 16px !important; } [data-theme-id="k5"] .dcg-cardsort-group .cardsort-typed-card { border-radius: 16px; background: #fff; color: #231f20; } [data-theme-id="k5"] .dcg-cardsort-group .cardsort-typed-card .mixed-text-container { padding: 20px; } [data-theme-id="k5"] .dcg-cardsort-group.single .dcg-cardsort-card { -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important; border-radius: 16px !important; background-color: #fff !important; } [data-theme-id="k5"] .dcg-cardsort-group.single .dcg-cardsort-card:hover, [data-theme-id="k5"] .dcg-cardsort-group.single .dcg-cardsort-card:active, [data-theme-id="k5"] .dcg-cardsort-group.single .dcg-cardsort-card:focus { z-index: 10; -webkit-box-shadow: 0 0 0 6px #c231a0, 0 0 0 16px #fde0ea, 0 20px 28px rgba(0,0,0,0.25) !important; box-shadow: 0 0 0 6px #c231a0, 0 0 0 16px #fde0ea, 0 20px 28px rgba(0,0,0,0.25) !important; border-radius: 16px !important; background-color: #fff !important; } [data-theme-id="k5"] .dcg-cardsort-group.single .dcg-cardsort-card:hover .image-card, [data-theme-id="k5"] .dcg-cardsort-group.single .dcg-cardsort-card:active .image-card, [data-theme-id="k5"] .dcg-cardsort-group.single .dcg-cardsort-card:focus .image-card { -webkit-box-shadow: 0 0 0 6px #c231a0; box-shadow: 0 0 0 6px #c231a0; } [data-theme-id="k5"] .dcg-cardsort-group.single .dcg-cardsort-card.dcg-hovered { -webkit-box-shadow: 0 0 0 6px #c231a0, 0 10px 18px rgba(0,0,0,0.25) !important; box-shadow: 0 0 0 6px #c231a0, 0 10px 18px rgba(0,0,0,0.25) !important; border-radius: 16px !important; background-color: #fff !important; } [data-theme-id="k5"] .dcg-cardsort-group.single .dcg-cardsort-card.dcg-depressed { -webkit-box-shadow: 0 0 0 6px #c231a0, 0 0 0 16px #fde0ea, 0 20px 28px rgba(0,0,0,0.25) !important; box-shadow: 0 0 0 6px #c231a0, 0 0 0 16px #fde0ea, 0 20px 28px rgba(0,0,0,0.25) !important; border-radius: 16px !important; background-color: #fff !important; } [data-theme-id="k5"] .dcg-cardsort-group .dcg-cardsort-card .image-card { border-radius: 16px; -webkit-box-shadow: 0 0 0 6px #fff; box-shadow: 0 0 0 6px #fff; } [data-theme-id="k5"] .dcg-cardsort-group .dcg-cardsort-card .image-card.dcg-hovered { -webkit-box-shadow: 0 0 0 6px #c231a0; box-shadow: 0 0 0 6px #c231a0; } [data-theme-id="k5"] .dcg-cardsort-group:not(.single) .dcg-cardsort-card { border-radius: 16px !important; -webkit-box-shadow: 0 0 0 6px #b1b3b6, 0 10px 18px rgba(0,0,0,0.25) !important; box-shadow: 0 0 0 6px #b1b3b6, 0 10px 18px rgba(0,0,0,0.25) !important; } [data-theme-id="k5"] .dcg-cardsort-group:not(.single) .dcg-cardsort-card .image-card { border-radius: 16px !important; -webkit-box-shadow: 0 0 0 6px #b1b3b6; box-shadow: 0 0 0 6px #b1b3b6; } [data-theme-id="k5"] .dcg-cardsort-group:not(.single) .dcg-cardsort-card:first-child { z-index: 5; } [data-theme-id="k5"] .dcg-cardsort-group:not(.single) .dcg-cardsort-card:not(:first-child):not(.collapsed) { border-radius: 0 !important; } [data-theme-id="k5"] .dcg-cardsort-group:not(.single) .dcg-cardsort-card:not(:first-child):not(.collapsed) .image-card { border-radius: 0px !important; } [data-theme-id="k5"] .dcg-cardsort-group:not(.single) .dcg-cardsort-card:last-child:not(.collapsed) { border-top-right-radius: 0 !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 16px !important; border-bottom-right-radius: 16px !important; } [data-theme-id="k5"] .dcg-cardsort-group:not(.single) .dcg-cardsort-card:last-child:not(.collapsed) .image-card { border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; } [data-theme-id="k5"] .dcg-cardsort-group:not(.single) .dcg-cardsort-card.dcg-hovered:not(.collapsed) { -webkit-box-shadow: 0 0 0 6px #c231a0, 0 10px 18px rgba(0,0,0,0.25) !important; box-shadow: 0 0 0 6px #c231a0, 0 10px 18px rgba(0,0,0,0.25) !important; } [data-theme-id="k5"] .dcg-cardsort-group:not(.single) .dcg-cardsort-card.dcg-hovered:not(.collapsed) .image-card { -webkit-box-shadow: 0 0 0 6px #c231a0; box-shadow: 0 0 0 6px #c231a0; } [data-theme-id="k5"] .dcg-cardsort-group:not(.single) .dcg-cardsort-card.dcg-hovered:not(.collapsed):first-child { z-index: 5; border-radius: 16px !important; } [data-theme-id="k5"] .dcg-cardsort-group:not(.single) .dcg-cardsort-card.dcg-hovered:not(.collapsed):not(:first-child) { z-index: 4; border-radius: 0 !important; } [data-theme-id="k5"] .dcg-cardsort-group:not(.single) .dcg-cardsort-card.dcg-hovered:not(.collapsed):last-child { border-bottom-left-radius: 16px !important; border-bottom-right-radius: 16px !important; } [data-theme-id="k5"] .dcg-cardsort-group:not(.single) .dcg-cardsort-card:last-child.dcg-depressed:not(.collapsed), [data-theme-id="k5"] .dcg-cardsort-group:not(.single) .dcg-cardsort-card:not(:first-child).dcg-depressed:not(.collapsed), [data-theme-id="k5"] .dcg-cardsort-group:not(.single) .dcg-cardsort-card:first-child.dcg-depressed:not(.collapsed) { border-radius: 16px !important; -webkit-box-shadow: 0 0 0 6px #c231a0; box-shadow: 0 0 0 6px #c231a0; } [data-theme-id="k5"] .dcg-cardsort-group:not(.single) .dcg-cardsort-card:last-child.dcg-depressed:not(.collapsed) .image-card, [data-theme-id="k5"] .dcg-cardsort-group:not(.single) .dcg-cardsort-card:not(:first-child).dcg-depressed:not(.collapsed) .image-card, [data-theme-id="k5"] .dcg-cardsort-group:not(.single) .dcg-cardsort-card:first-child.dcg-depressed:not(.collapsed) .image-card { border-radius: 16px !important; -webkit-box-shadow: 0 0 0 6px #c231a0; box-shadow: 0 0 0 6px #c231a0; } [data-theme-id="k5"] .dcg-cardsort-group.drop-highlight { -webkit-box-shadow: 0 0 0 16px #fde0ea, 0 20px 28px rgba(0,0,0,0.25) !important; box-shadow: 0 0 0 16px #fde0ea, 0 20px 28px rgba(0,0,0,0.25) !important; background-color: #fde0ea !important; } [data-theme-id="k5"] .dcg-cardsort-group.drop-highlight .dcg-cardsort-card.will-drop-after, [data-theme-id="k5"] .dcg-cardsort-group.drop-highlight .dcg-cardsort-card.will-drop-before { z-index: 4; -webkit-box-shadow: 0 0 0 6px #c231a0 !important; box-shadow: 0 0 0 6px #c231a0 !important; } [data-theme-id="k5"] .dcg-cardsort-group.drop-highlight .dcg-cardsort-card.will-drop-after .image-card, [data-theme-id="k5"] .dcg-cardsort-group.drop-highlight .dcg-cardsort-card.will-drop-before .image-card { -webkit-box-shadow: 0 0 0 6px #c231a0; box-shadow: 0 0 0 6px #c231a0; } [data-theme-id="k5"] .dcg-cardsort-group .cardsort-toggle-button-container { width: 64px; height: 64px; margin-top: -13px; padding: 0; z-index: 5; } [data-theme-id="k5"] .dcg-cardsort-group .cardsort-toggle-button-container .cardsort-toggle-button { border: none; background: #fff; -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.25); -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.25); box-shadow: 0 4px 12px rgba(0,0,0,0.25); width: 64px; height: 64px; color: #77787b; margin: auto; cursor: pointer !important; } [data-theme-id="k5"] .dcg-cardsort-group .cardsort-toggle-button-container .cardsort-toggle-button.dcg-hovered { border: none; -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.25); -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.25); box-shadow: 0 4px 12px rgba(0,0,0,0.25); color: #231f20; } [data-theme-id="k5"] .dcg-cardsort-group .cardsort-toggle-button-container .cardsort-toggle-button .pillow-icon-caret-up { font-size: 75px !important; font-weight: 700 !important; position: absolute; top: -8px; } [data-theme-id="k5"] .dcg-cardsort-group .cardsort-toggle-button-container .cardsort-toggle-button .pillow-icon-caret-up.inverted { top: 0; } [data-theme-id="k5"] .expanded-card { z-index: 3; } [data-theme-id="k5"] .expanded-card .expanded-card-container { border: none; -webkit-box-shadow: 0 0 0 6px #fff; box-shadow: 0 0 0 6px #fff; font-size: 32px !important; background: #fff; min-width: 400px; border-radius: 16px; } [data-theme-id="k5"] .expanded-card .expanded-card-container .prosemirror-container .dcg-prosemirror-editor p { font-size: 32px; padding-right: 20px; line-height: normal; } [data-theme-id="k5"] .expanded-card .expanded-card-container .card-content .image-card { -webkit-box-shadow: 0 0 0 6px #fff; box-shadow: 0 0 0 6px #fff; border-radius: 16px; } [data-theme-id="k5"] .expanded-card .expanded-card-container .close-card-link:not(.category-card-close-link) { color: #e71d32; background-color: #ffdce5; height: 28px; width: 28px; border-radius: 50%; border: 2px solid #e71d32; top: 6px; right: 6px; text-shadow: none; } [data-theme-id="k5"] .expanded-card .expanded-card-container .close-card-link:not(.category-card-close-link).dcg-hovered { color: #e71d32; background-color: #ffafbe; } [data-theme-id="k5"] .expanded-card .expanded-card-container .close-card-link:not(.category-card-close-link) .pillow-icon-remove { font-family: 'quicksand' !important; top: 0px; left: 7px; position: absolute; font-size: 20px !important; font-weight: 900 !important; } [data-theme-id="k5"] .expanded-card .expanded-card-container .close-card-link:not(.category-card-close-link) .pillow-icon-remove:before { content: 'x'; line-height: 1; } [data-theme-id="k5"] .dcg-multiple-choice-playground .dcg-list-layout .amplify-radio-btn label { line-height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2.2); } [data-theme-id="k5"] .dcg-tooltip-positioning-container .dcg-tooltip-message-container .dcg-tooltip-message { font-family: 'quicksand' !important; font-weight: 700 !important; font-size: 24px !important; color: #fff !important; border-color: #231f20 !important; background-color: #231f20 !important; border-radius: 16px; padding: 16px; } [data-theme-id="k5"] .dcg-tooltip-positioning-container .dcg-tooltip-arrow.dcg-tooltip-gravity-s { border-bottom-color: #231f20 !important; } [data-theme-id="k5"] .dcg-tooltip-positioning-container .dcg-tooltip-arrow.dcg-tooltip-gravity-n { border-top-color: #231f20 !important; } [data-theme-id="k5"] .dcg-tooltip-positioning-container .dcg-tooltip-arrow.dcg-tooltip-gravity-w { border-left-color: #231f20 !important; } [data-theme-id="k5"] .dcg-tooltip-positioning-container .dcg-tooltip-arrow.dcg-tooltip-gravity-e { border-right-color: #231f20 !important; } /* src/js/activitybuilder/custom/preview-modal.styl */ .preview-modal .sandbox-container .full-border-in-modal { border: 1px solid #e2e2e2; margin: 0 10px 10px 10px; } .preview-modal .student-activity-header { padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } /* src/js/activitybuilder/editor/edit-details/resource-links-container.styl */ .resource-links-container .preview-activity-link, .resource-links-container .preview-paper-resource { margin-bottom: 20px; } .resource-links-container .resource-link { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 12px 18px; margin-right: 15px; } .resource-links-container .add-resource-link { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .resource-links-container .add-resource-link .btn { margin-right: 10px; } /* src/js/activitybuilder/shared/comments/comment-list.styl */ .feedback-comments, .feedback-comments-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; min-height: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; overflow-x: hidden; overflow-y: auto; } .feedback-comments .unread-below, .feedback-comments-container .unread-below { background: rgba(21,176,151,0.75); color: rgba(255,255,255,0.9); text-align: center; position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; padding: 6px 0px; } .feedback-comments .unread-below .down-arrow-container, .feedback-comments-container .unread-below .down-arrow-container { margin-right: 4px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); font-size: 85%; display: inline-block; } .feedback-comments .unread-below:hover, .feedback-comments-container .unread-below:hover { background: rgba(21,176,151,0.9); } .feedback-comments .comment-list, .feedback-comments-container .comment-list { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) 16px; } .feedback-comments .comment-list .new-comment-header, .feedback-comments-container .comment-list .new-comment-header { font-size: 87.5%; text-align: center; position: relative; margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; } .feedback-comments .comment-list .new-comment-header.above-first-comment, .feedback-comments-container .comment-list .new-comment-header.above-first-comment { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1.5); } .feedback-comments .comment-list .new-comment-header:before, .feedback-comments-container .comment-list .new-comment-header:before { content: ''; height: 1px; position: absolute; left: 0; right: 0; bottom: 12px; } .feedback-comments .comment-list .new-comment-header .new-comment-message, .feedback-comments-container .comment-list .new-comment-header .new-comment-message { padding-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); padding-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); background: #fff; position: relative; z-index: 1; } .feedback-comments .comment-list .new-comment-header.header-student-experience:before, .feedback-comments-container .comment-list .new-comment-header.header-student-experience:before { background-color: #f4c0b3; } .feedback-comments .comment-list .new-comment-header.header-student-experience .new-comment-message, .feedback-comments-container .comment-list .new-comment-header.header-student-experience .new-comment-message { color: #db2e00; } .feedback-comments .comment-list .new-comment-header:not(.header-student-experience):before, .feedback-comments-container .comment-list .new-comment-header:not(.header-student-experience):before { background-color: #bdbdbd; } .feedback-comments .comment-list .comment-list-item-container.dcg-full-width, .feedback-comments-container .comment-list .comment-list-item-container.dcg-full-width { margin-left: -16px; margin-right: -16px; } .feedback-comments .comment-list .comment-list-item-container.dcg-full-width .new-comment-header, .feedback-comments-container .comment-list .comment-list-item-container.dcg-full-width .new-comment-header { margin-left: 16px; margin-right: 16px; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) auto; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .dcg-tooltip-hit-area-container, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .dcg-tooltip-hit-area-container { display: block; height: 100%; overflow: hidden; white-space: nowrap; margin-top: -1px; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .dcg-tooltip-hit-area-container .label, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .dcg-tooltip-hit-area-container .label { overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .timestamp, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .timestamp { white-space: nowrap; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .timestamp span, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .timestamp span { display: block; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item.hovered-for-screen-navigation:not(.for-current-screen) .dcg-tooltip-hit-area-container, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item.hovered-for-screen-navigation:not(.for-current-screen) .dcg-tooltip-hit-area-container, .feedback-comments .comment-list .comment-list-item-container .comment-list-item.hovered-for-screen-navigation:not(.for-current-screen) .dcg-tooltip-hit-area-container .label, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item.hovered-for-screen-navigation:not(.for-current-screen) .dcg-tooltip-hit-area-container .label { overflow: visible; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item.hovered-for-screen-navigation:not(.for-current-screen) .timestamp, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item.hovered-for-screen-navigation:not(.for-current-screen) .timestamp { overflow: hidden; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item.hovered-for-screen-navigation:not(.for-current-screen) .timestamp span, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item.hovered-for-screen-navigation:not(.for-current-screen) .timestamp span { display: block; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item.hovered-for-screen-navigation:not(.for-current-screen) .left-comment-footer-container, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item.hovered-for-screen-navigation:not(.for-current-screen) .left-comment-footer-container, .feedback-comments .comment-list .comment-list-item-container .comment-list-item.hovered-for-screen-navigation:not(.for-current-screen) .feedback-options-dropdown-container, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item.hovered-for-screen-navigation:not(.for-current-screen) .feedback-options-dropdown-container { overflow-x: hidden; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item.hovered-for-screen-navigation:not(.for-current-screen) .feedback-options-dropdown, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item.hovered-for-screen-navigation:not(.for-current-screen) .feedback-options-dropdown { display: block; overflow-x: hidden; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .revision-request, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .revision-request { border: 1px solid #15b097; background: #e8f7f5; border-radius: 12px; font-size: 85%; padding: 2px 10px; position: absolute; top: -10px; left: 10px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .revision-request i.pillow-icon-reset, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .revision-request i.pillow-icon-reset { color: #15b097; margin-right: 5px; font-size: 85%; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .revision-request + .rich-text-view, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .revision-request + .rich-text-view { padding-top: 12px; margin-top: 20px; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .rich-text-view, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .rich-text-view { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) calc(var(--rhythm-unit-px, 12) / 16 * 1rem); border-radius: 0.1875em; width: 100%; border: 1px solid #e9e9e9; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .feedback-options-dropdown-container, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .feedback-options-dropdown-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .screen-title, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .screen-title { text-align: right; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 100%; padding-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); line-height: 1.2em; color: #676767; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .screen-title.next, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .screen-title.next { padding-left: var(--rhythm-unit-px, 12) / 16 * 1rem; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .screen-title .label, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .screen-title .label, .feedback-comments .comment-list .comment-list-item-container .comment-list-item .screen-title i, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .screen-title i { display: inline-block; -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .screen-title i, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .screen-title i { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); height: 16px; width: 16px; color: #676767; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .screen-title i:before, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .screen-title i:before { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; line-height: 16px; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .screen-title .icon-v2-chevron-small-right, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .screen-title .icon-v2-chevron-small-right { margin-left: "calc(%s + %s) % (-($nav-icon-size) $rhythm-unit-half)"; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .screen-title .icon-v2-chevron-small-left, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .screen-title .icon-v2-chevron-small-left { position: relative; left: 16px; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .screen-title:focus-visible, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .screen-title:focus-visible { outline: none; padding-left: 4px; padding-right: 4px; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .screen-title:focus-visible:after, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .screen-title:focus-visible:after { content: ''; position: absolute; left: 0; width: 100%; height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1.5); border: 3px solid #9c0d63; border-radius: 0.1875em; top: 4px; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .screen-title:focus-visible.next:focus-visible, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .screen-title:focus-visible.next:focus-visible { padding-left: 0; padding-right: 0; margin-left: 5px; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .screen-title:focus-visible.prev:focus-visible, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .screen-title:focus-visible.prev:focus-visible { padding-left: 0; padding-right: 8px; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item .screen-title:focus-visible.prev:focus-visible:after, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item .screen-title:focus-visible.prev:focus-visible:after { left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); width: calc(100% - calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); } .feedback-comments .comment-list .comment-list-item-container .comment-list-item.for-current-screen .rich-text-view, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item.for-current-screen .rich-text-view { background: #e9e9e9; color: #3b3b3b; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item:not(.hovered-for-screen-navigation) .comment-content-container, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item:not(.hovered-for-screen-navigation) .comment-content-container, .feedback-comments .comment-list .comment-list-item-container .comment-list-item:not(.hovered-for-screen-navigation) .screen-title, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item:not(.hovered-for-screen-navigation) .screen-title { cursor: auto !important; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item:not(.for-current-screen) .revision-request, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item:not(.for-current-screen) .revision-request { border: 1px solid rgba(21,176,151,0.5); background: #f4fbfa; color: #999; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item:not(.for-current-screen) .revision-request i.pillow-icon-reset, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item:not(.for-current-screen) .revision-request i.pillow-icon-reset { color: rgba(21,176,151,0.5); } .feedback-comments .comment-list .comment-list-item-container .comment-list-item:not(.for-current-screen) .rich-text-view, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item:not(.for-current-screen) .rich-text-view { color: #676767; background: #f6f6f6; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item:not(.for-current-screen).hovered-for-screen-navigation .rich-text-view, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item:not(.for-current-screen).hovered-for-screen-navigation .rich-text-view { background: #eee; border: 1px solid #e2e2e2; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item:not(.for-current-screen).hovered-for-screen-navigation .screen-title.next .label, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item:not(.for-current-screen).hovered-for-screen-navigation .screen-title.next .label { -webkit-transform: translate3d(calc(var(--rhythm-unit-px, 12) / 16 * 1rem * -1), 0, 0); -moz-transform: translate3d(calc(var(--rhythm-unit-px, 12) / 16 * 1rem * -1), 0, 0); -o-transform: translate3d(calc(var(--rhythm-unit-px, 12) / 16 * 1rem * -1), 0, 0); -ms-transform: translate3d(calc(var(--rhythm-unit-px, 12) / 16 * 1rem * -1), 0, 0); transform: translate3d(calc(var(--rhythm-unit-px, 12) / 16 * 1rem * -1), 0, 0); } .feedback-comments .comment-list .comment-list-item-container .comment-list-item:not(.for-current-screen).hovered-for-screen-navigation .screen-title.next i, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item:not(.for-current-screen).hovered-for-screen-navigation .screen-title.next i { opacity: 1; -ms-filter: none; filter: none; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item:not(.for-current-screen).hovered-for-screen-navigation .screen-title.prev i, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item:not(.for-current-screen).hovered-for-screen-navigation .screen-title.prev i { -webkit-transform: translate3d(-16px, 0, 0); -moz-transform: translate3d(-16px, 0, 0); -o-transform: translate3d(-16px, 0, 0); -ms-transform: translate3d(-16px, 0, 0); transform: translate3d(-16px, 0, 0); opacity: 1; -ms-filter: none; filter: none; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item.revision-addressed-comment .rich-text-view, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item.revision-addressed-comment .rich-text-view { border: 1px solid #15b097; background: #e8f7f5; border-radius: 8px 8px 0 8px; } .feedback-comments .comment-list .comment-list-item-container .comment-list-item.revision-addressed-comment:not(.for-current-screen) .rich-text-view, .feedback-comments-container .comment-list .comment-list-item-container .comment-list-item.revision-addressed-comment:not(.for-current-screen) .rich-text-view { border: 1px solid rgba(21,176,151,0.5); background: #f4fbfa; } .feedback-comments .shared-comment-footer, .feedback-comments-container .shared-comment-footer { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); position: relative; } .feedback-comments .shared-comment-footer .left-comment-footer-container, .feedback-comments-container .shared-comment-footer .left-comment-footer-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); line-height: 1.2em; } .feedback-comments .shared-comment-footer .dcg-comment-edited-label, .feedback-comments-container .shared-comment-footer .dcg-comment-edited-label { color: #676767; border-left: 1px solid #676767; margin-left: 0.5em; padding-left: 0.5em; line-height: 1em; margin-bottom: 1px; } .feedback-comments .shared-comment-footer .dcg-comment-edited-label + i, .feedback-comments-container .shared-comment-footer .dcg-comment-edited-label + i { margin-bottom: 1px; } /* src/js/activitybuilder/shared/keypad/dcgview-helpers/static-mathquill-view.styl */ .dcg-static-mathquill-view * { -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; -moz-user-selection: text !important; } .dcg-static-mathquill-view * .dcg-mq-cursor { display: none; } /* src/js/activitybuilder/shared/keypad/keypad-base/btn.styl */ .dcg-basic-keypad .dcg-keypad-btn-container { height: 40px; display: inline-block; position: relative; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; } .dcg-basic-keypad .dcg-keypad-btn-container.dcg-disabled { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .dcg-basic-keypad .dcg-keypad-btn-container.dcg-disabled .dcg-keypad-btn { cursor: default; } .dcg-basic-keypad .dcg-keypad-btn-container .dcg-keypad-btn { position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-flow: row; -ms-flex-flow: row; flex-flow: row; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 0; } .dcg-basic-keypad .dcg-keypad-btn-container .dcg-keypad-btn .dcg-keypad-btn-content { text-align: center; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; pointer-events: none; } .dcg-basic-keypad .dcg-keypad-btn-container .dcg-mq-large-operator, .dcg-basic-keypad .dcg-keypad-btn-container .dcg-mq-int { font-size: 80%; } .dcg-basic-keypad .dcg-keypad-btn-container .dcg-mq-large-operator .dcg-mq-sup, .dcg-basic-keypad .dcg-keypad-btn-container .dcg-mq-int .dcg-mq-sup, .dcg-basic-keypad .dcg-keypad-btn-container .dcg-mq-large-operator .dcg-mq-sub, .dcg-basic-keypad .dcg-keypad-btn-container .dcg-mq-int .dcg-mq-sub, .dcg-basic-keypad .dcg-keypad-btn-container .dcg-mq-large-operator .dcg-mq-to, .dcg-basic-keypad .dcg-keypad-btn-container .dcg-mq-int .dcg-mq-to, .dcg-basic-keypad .dcg-keypad-btn-container .dcg-mq-large-operator .dcg-mq-from, .dcg-basic-keypad .dcg-keypad-btn-container .dcg-mq-int .dcg-mq-from { display: none; } .dcg-basic-keypad .dcg-keypad-btn-container .dcg-mq-supsub { font-size: 80%; } .dcg-basic-keypad .dcg-keypad-btn-container .dcg-mq-sqrt-stem { width: 4px; padding: 0; background: transparent; } .dcg-basic-keypad .dcg-keypad-btn-container [dcg-command=shift] { padding-top: 2px; } .dcg-basic-keypad .dcg-keypad-btn-container [dcg-command="/"], .dcg-basic-keypad .dcg-keypad-btn-container [dcg-command="-"] { padding-top: 1px; } .dcg-basic-keypad .dcg-keypad-btn-container [dcg-command="*"] { padding-top: 2px; } .dcg-basic-keypad .dcg-keypad-btn-container [dcg-command=left], .dcg-basic-keypad .dcg-keypad-btn-container [dcg-command=right], .dcg-basic-keypad .dcg-keypad-btn-container [dcg-command=backspace] { font-size: 110%; padding-top: 2px; } .dcg-basic-keypad .dcg-keypad-btn-container [dcg-command=enter] { font-size: 140%; padding-top: 3px; } .dcg-basic-keypad .dcg-keypad-btn-container .dcg-keypad-btn .dcg-keypad-btn-content { font-size: 90%; } .dcg-basic-keypad .dcg-keypad-btn-container .dcg-keypad-btn.dcg-btn-light-on-gray { -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.25), inset 0 -1px rgba(0,0,0,0.02); box-shadow: inset 0 1px rgba(255,255,255,0.25), inset 0 -1px rgba(0,0,0,0.02); background: -webkit-linear-gradient(#fff, #fafafa); background: -moz-linear-gradient(#fff, #fafafa); background: -o-linear-gradient(#fff, #fafafa); background: -ms-linear-gradient(#fff, #fafafa); background: linear-gradient(#fff, #fafafa); border: 1px solid #d8d8d8; border-radius: 2px; } .dcg-basic-keypad .dcg-keypad-btn-container .dcg-keypad-btn.dcg-btn-dark-on-gray { -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.1), inset 0 -1px rgba(0,0,0,0.02); box-shadow: inset 0 1px rgba(255,255,255,0.1), inset 0 -1px rgba(0,0,0,0.02); background: -webkit-linear-gradient(rgba(0,0,0,0.13), rgba(0,0,0,0.16)); background: -moz-linear-gradient(rgba(0,0,0,0.13), rgba(0,0,0,0.16)); background: -o-linear-gradient(rgba(0,0,0,0.13), rgba(0,0,0,0.16)); background: -ms-linear-gradient(rgba(0,0,0,0.13), rgba(0,0,0,0.16)); background: linear-gradient(rgba(0,0,0,0.13), rgba(0,0,0,0.16)); border: 1px solid #bbb; border-radius: 2px; } .dcg-basic-keypad .dcg-keypad-btn-container .dcg-keypad-btn.dcg-btn-tall-blue, .dcg-basic-keypad .dcg-keypad-btn-container .dcg-keypad-btn.dcg-btn-short-blue { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 2px; color: #fff; background: #3278c8; border: 1px solid #3f73a6; -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.1), inset 0 -1px rgba(0,0,0,0.05); box-shadow: inset 0 1px rgba(255,255,255,0.1), inset 0 -1px rgba(0,0,0,0.05); } .dcg-basic-keypad .dcg-keypad-btn-container .dcg-keypad-btn.dcg-btn-tall-blue.dcg-hovered:not(.dcg-disabled), .dcg-basic-keypad .dcg-keypad-btn-container .dcg-keypad-btn.dcg-btn-short-blue.dcg-hovered:not(.dcg-disabled) { background: #3f73a6; -webkit-transition: background 0.2s; -moz-transition: background 0.2s; -o-transition: background 0.2s; -ms-transition: background 0.2s; transition: background 0.2s; } .dcg-basic-keypad .dcg-keypad-btn-container .dcg-keypad-btn.dcg-btn-tall-blue.dcg-depressed:not(.dcg-disabled), .dcg-basic-keypad .dcg-keypad-btn-container .dcg-keypad-btn.dcg-btn-short-blue.dcg-depressed:not(.dcg-disabled) { background: #35608a; border: 1px solid #35608a; -webkit-box-shadow: none; box-shadow: none; } .dcg-basic-keypad .dcg-keypad-btn-container .dcg-keypad-btn.dcg-btn-tall-blue { height: 76px; } .dcg-basic-keypad .dcg-keypad-btn-container:not(.dcg-disabled) .dcg-keypad-btn.dcg-btn-light-on-gray.dcg-hovered { background: #f5f5f5; border-color: #d8d8d8; } .dcg-basic-keypad .dcg-keypad-btn-container:not(.dcg-disabled) .dcg-keypad-btn.dcg-btn-light-on-gray.dcg-depressed { background: #ebebeb; border-color: #cfcfcf; -webkit-box-shadow: none; box-shadow: none; } .dcg-basic-keypad .dcg-keypad-btn-container:not(.dcg-disabled) .dcg-keypad-btn.dcg-btn-dark-on-gray.dcg-hovered { background: rgba(0,0,0,0.16); } .dcg-basic-keypad .dcg-keypad-btn-container:not(.dcg-disabled) .dcg-keypad-btn.dcg-btn-dark-on-gray.dcg-depressed { -webkit-box-shadow: none; box-shadow: none; background: rgba(0,0,0,0.19); } .dcg-inverted-colors .dcg-keypad-btn-container .dcg-keypad-btn.dcg-btn-light-on-gray { -webkit-box-shadow: inset 0 -1px rgba(255,255,255,0.25), inset 0 1px rgba(0,0,0,0.02); box-shadow: inset 0 -1px rgba(255,255,255,0.25), inset 0 1px rgba(0,0,0,0.02); background: -webkit-linear-gradient(#fafafa, #fff); background: -moz-linear-gradient(#fafafa, #fff); background: -o-linear-gradient(#fafafa, #fff); background: -ms-linear-gradient(#fafafa, #fff); background: linear-gradient(#fafafa, #fff); } .dcg-inverted-colors .dcg-keypad-btn-container .dcg-keypad-btn.dcg-btn-dark-on-gray { -webkit-box-shadow: inset 0 -1px rgba(255,255,255,0.1), inset 0 1px rgba(0,0,0,0.02); box-shadow: inset 0 -1px rgba(255,255,255,0.1), inset 0 1px rgba(0,0,0,0.02); background: -webkit-linear-gradient(rgba(0,0,0,0.16), rgba(0,0,0,0.13)); background: -moz-linear-gradient(rgba(0,0,0,0.16), rgba(0,0,0,0.13)); background: -o-linear-gradient(rgba(0,0,0,0.16), rgba(0,0,0,0.13)); background: -ms-linear-gradient(rgba(0,0,0,0.16), rgba(0,0,0,0.13)); background: linear-gradient(rgba(0,0,0,0.16), rgba(0,0,0,0.13)); } .dcg-has-background-color .dcg-basic-keypad .dcg-keypad-btn-container .dcg-btn-light-on-gray { background: rgba(255,255,255,0.3); border: 0; } .dcg-has-background-color .dcg-basic-keypad .dcg-keypad-btn-container .dcg-btn-light-on-gray.dcg-hovered { background: rgba(255,255,255,0.25); } .dcg-has-background-color .dcg-basic-keypad .dcg-keypad-btn-container .dcg-btn-light-on-gray.dcg-depressed { background: rgba(255,255,255,0.15); } .dcg-has-background-color .dcg-basic-keypad .dcg-keypad-btn-container .dcg-btn-dark-on-gray { background: rgba(0,0,0,0.15); border: 0; } .dcg-has-background-color .dcg-basic-keypad .dcg-keypad-btn-container .dcg-btn-dark-on-gray.dcg-hovered { background: rgba(0,0,0,0.18); } .dcg-has-background-color .dcg-basic-keypad .dcg-keypad-btn-container .dcg-btn-dark-on-gray.dcg-depressed { background: rgba(0,0,0,0.22); } .dcg-PROJECTOR-MODE.dcg-narrow [dcg-command="/"] .dcg-keypad-btn-content, .dcg-PROJECTOR-MODE.dcg-narrow [dcg-command="="] .dcg-keypad-btn-content, .dcg-PROJECTOR-MODE.dcg-narrow [dcg-command="<"] .dcg-keypad-btn-content, .dcg-PROJECTOR-MODE.dcg-narrow [dcg-command="<="] .dcg-keypad-btn-content { position: relative; left: -1px; } .dcg-PROJECTOR-MODE.dcg-narrow .dcg-basic-keypad .dcg-keypad-btn[dcg-command=sqrt] { font-size: 80%; } .dcg-PROJECTOR-MODE:not(.dcg-narrow) .dcg-keys-container.dcg-smaller-functions-text .dcg-keypad-btn[dcg-command=functions] { font-size: 80%; } .dcg-keys-container.dcg-small-ABC .dcg-abc-audio-container .dcg-keypad-btn[dcg-command="ABC"] { font-size: 90%; } .dcg-keys-container.dcg-smaller-ABC .dcg-abc-audio-container .dcg-keypad-btn[dcg-command="ABC"] { font-size: 80%; } .dcg-keys-container.dcg-smallest-ABC .dcg-abc-audio-container .dcg-keypad-btn[dcg-command="ABC"] { font-size: 70%; } /* src/js/activitybuilder/shared/keypad/keypad-base/control-bar.styl */ .dcg-keypad-control-bar { height: 40px; background-color: rgba(0,0,0,0.07); border-left: 1px solid #bdbdbd; border-right: 1px solid #bdbdbd; } .dcg-keypad-control-bar .dcg-keypad-control-bar-contents { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-box-lines: single; -moz-box-lines: single; -o-box-lines: single; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: stretch; -moz-box-align: stretch; -o-box-align: stretch; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; -webkit-flex-shrink: 0; flex-shrink: 0; padding-top: 2px; } .dcg-keypad-control-bar .dcg-spacer { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; } .dcg-keypad-control-bar .dcg-spacer-2 { -webkit-box-flex: 2; -moz-box-flex: 2; -o-box-flex: 2; -ms-box-flex: 2; box-flex: 2; -webkit-flex-grow: 2; flex-grow: 2; } .dcg-calc-basic-main-wrapper:not(.dcg-narrow) .dcg-projector-mode .dcg-keypad-control-bar { height: $projector-mode-btn-height8px; } /* src/js/activitybuilder/shared/keypad/keypad-base/control-btn.styl */ .dcg-keypad-control-btn { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; min-width: 40px; text-align: center; color: rgba(0,0,0,0.6); font-size: 87.5%; } .dcg-keypad-control-btn.dcg-narrow-control-btn { max-width: 80px; } .dcg-keypad-control-btn.dcg-selectable-btn { padding: 0 5px; height: 38px; line-height: 40px; } .dcg-keypad-control-btn:not(.dcg-selectable-btn) { height: 32px; line-height: 32px; margin: 5px; border-radius: 5px; } .dcg-keypad-control-btn.dcg-disabled { color: rgba(0,0,0,0.15); cursor: default; } .dcg-keypad-control-btn:not(.dcg-disabled):not(.dcg-selectable-btn).dcg-hovered { color: rgba(0,0,0,0.8); background: rgba(0,0,0,0.1); } .dcg-keypad-control-btn:not(.dcg-disabled):not(.dcg-selectable-btn).dcg-depressed { color: #000; background: rgba(0,0,0,0.18); } .dcg-keypad-control-btn[dcg-command=settings] i { font-size: 120%; position: relative; top: 1px; } .dcg-keypad-control-btn[dcg-command=backspace] i, .dcg-keypad-control-btn[dcg-command=undo] i, .dcg-keypad-control-btn[dcg-command=redo] i { font-size: 150%; position: relative; top: 3px; } .dcg-keypad-control-btn[dcg-command=clear] { width: 50px; white-space: nowrap; } .dcg-keypad-control-btn[dcg-command=clearall] { width: 50px; line-height: inherit; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .dcg-keypad-control-bar .dcg-keypad-control-btn:not(.dcg-disabled).dcg-selectable-btn { position: relative; } .dcg-keypad-control-bar .dcg-keypad-control-btn:not(.dcg-disabled).dcg-selectable-btn:after { position: absolute; bottom: 0; left: 0; right: 0; content: ""; height: 0; background: rgba(50,120,200,0.5); } .dcg-keypad-control-bar .dcg-keypad-control-btn:not(.dcg-disabled).dcg-selectable-btn.dcg-hovered:not(.dcg-selected) { color: #000; } .dcg-keypad-control-bar .dcg-keypad-control-btn:not(.dcg-disabled).dcg-selectable-btn.dcg-hovered:not(.dcg-selected):after { height: 4px; -webkit-transition: height 0.2s; -moz-transition: height 0.2s; -o-transition: height 0.2s; -ms-transition: height 0.2s; transition: height 0.2s; } .dcg-keypad-control-bar .dcg-keypad-control-btn:not(.dcg-disabled).dcg-selectable-btn.dcg-selected { color: #000; } .dcg-keypad-control-bar .dcg-keypad-control-btn:not(.dcg-disabled).dcg-selectable-btn.dcg-selected:after { height: 4px; background: #3278c8; } .dcg-keypad-control-bar .dcg-keypad-control-btn:not(.dcg-disabled).dcg-selectable-btn:first-of-type { margin-left: 6px; } .dcg-narrow.dcg-calc-basic-main-wrapper .dcg-keypad-control-btn { min-width: 25px; } .dcg-narrow.dcg-calc-basic-main-wrapper .dcg-keypad-control-btn[dcg-command=clearall], .dcg-narrow.dcg-calc-basic-main-wrapper .dcg-keypad-control-btn[dcg-command=clear] { width: 50px; } .dcg-calc-basic-main-wrapper:not(.dcg-narrow) .dcg-projector-mode .dcg-keypad-control-btn { font-size: $projector-mode-font-size; height: $projector-mode-btn-height; line-height: $projector-mode-btn-height; } .dcg-calc-basic-main-wrapper:not(.dcg-narrow) .dcg-projector-mode .dcg-keypad-control-btn[dcg-command=clearall], .dcg-calc-basic-main-wrapper:not(.dcg-narrow) .dcg-projector-mode .dcg-keypad-control-btn[dcg-command=clear] { width: 75px; } .dcg-calc-basic-main-wrapper:not(.dcg-narrow) .dcg-projector-mode .dcg-keypad-control-btn[dcg-command=clearall] { line-height: 20px; } .dcg-calc-basic-main-wrapper:not(.dcg-narrow) .dcg-projector-mode .dcg-keypad-control-btn[dcg-command=settings] i { top: 4px; } .dcg-calc-basic-main-wrapper:not(.dcg-narrow) .dcg-projector-mode .dcg-keypad-control-btn[dcg-command=backspace] i, .dcg-calc-basic-main-wrapper:not(.dcg-narrow) .dcg-projector-mode .dcg-keypad-control-btn[dcg-command=undo] i, .dcg-calc-basic-main-wrapper:not(.dcg-narrow) .dcg-projector-mode .dcg-keypad-control-btn[dcg-command=redo] i { top: 5px; } .dcg-calc-basic-main-wrapper:not(.dcg-narrow) .dcg-projector-mode .dcg-selectable-btn { top: 4px; } /* src/js/activitybuilder/shared/keypad/keypad-base/keypad.styl */ .dcg-basic-keypad-container { background: rgba(0,0,0,0.07); border: 1px solid #bdbdbd; border-top: none; } .dcg-basic-keypad { margin: 0; padding: 4px 3px; } .dcg-basic-keypad .dcg-mq-large-operator .dcg-mq-to, .dcg-basic-keypad .dcg-mq-large-operator .dcg-mq-from { display: none !important; } .dcg-basic-keypad .dcg-mq-int .dcg-mq-supsub { display: none; } .dcg-basic-keypad .dcg-mq-large-operator, .dcg-basic-keypad .dcg-mq-int { font-size: 70%; position: relative; top: -1px; } .dcg-basic-keypad * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; } .dcg-basic-keypad .dcg-half-width-placeholder { -webkit-box-flex: 0.5; -moz-box-flex: 0.5; -o-box-flex: 0.5; -ms-box-flex: 0.5; box-flex: 0.5; -webkit-flex-grow: 0.5; flex-grow: 0.5; } .dcg-basic-keypad .dcg-partition-placeholder { width: 4%; } .dcg-projector-mode .dcg-basic-keypad, .dcg-PROJECTOR-MODE .dcg-basic-keypad { font-size: $projector-mode-font-size; } .dcg-projector-mode .dcg-basic-keypad .dcg-keypad-btn-container { height: $projector-mode-btn-height8px; } .dcg-projector-mode.dcg-classroom-large-projector-mode .dcg-basic-keypad .dcg-keypad-btn-container { height: $classroom-large-projector-mode-btn-height8px; } .dcg-PROJECTOR-MODE .dcg-basic-keypad .dcg-keypad-row .dcg-keypad-btn-container { height: $projector-mode-btn-height2px; } .dcg-PROJECTOR-MODE.dcg-classroom-large-projector-mode .dcg-basic-keypad .dcg-keypad-row .dcg-keypad-btn-container { height: $classroom-large-projector-mode-btn-height2px; } .dcg-calculator-api-container .dcg-PROJECTOR-MODE.dcg-narrow .dcg-basic-keypad .dcg-keypad-row { font-size: 90%; } .dcg-calculator-api-container .dcg-PROJECTOR-MODE.dcg-narrow .dcg-basic-keypad .dcg-keypad-row .dcg-keypad-btn-container { height: $projector-mode-btn-height; } @media screen and (max-width: 470px) { .dcg-projector-mode .dcg-sci-func-keypad .dcg-basic-keypad { font-size: 115%; } } @media screen and (max-width: 330px) { .dcg-calculator-api-container .dcg-either-or-btn { font-size: 85%; white-space: nowrap; } .dcg-calculator-api-container .dcg-projector-mode .dcg-basic-keypad { font-size: 125%; } .dcg-calculator-api-container .dcg-projector-mode .dcg-sci-func-keypad .dcg-basic-keypad { font-size: 90%; } .dcg-calculator-api-container .dcg-PROJECTOR-MODE.dcg-narrow .dcg-basic-keypad .dcg-keypad-row { font-size: 70%; } } /* src/js/activitybuilder/shared/keypad/keypad-base/row.styl */ .dcg-keypad-row { padding: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-box-lines: single; -moz-box-lines: single; -o-box-lines: single; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: stretch; -moz-box-align: stretch; -o-box-align: stretch; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; margin: 0; } .dcg-keypad-row .dcg-abc-audio-container { -webkit-box-flex: 2; -moz-box-flex: 2; -o-box-flex: 2; -ms-box-flex: 2; box-flex: 2; -webkit-flex-grow: 2; flex-grow: 2; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } /* src/js/activitybuilder/shared/keypad/pillow-keypad/basic-arithmetic-keypad.styl */ .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container { background-color: var(--keypad-background-color, #e8eef8); padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0 16px; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-basic-keypad { padding: 0; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-rows-wrapper { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-rows-wrapper:not(:last-child) .dcg-keypad-row { margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-row { -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-column-gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); -moz-column-gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); column-gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-row .dcg-keypad-btn-container { max-width: 52px; height: 52px; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-row .dcg-keypad-btn-container .dcg-keypad-btn { position: static; padding: 0 1em; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-row .dcg-keypad-btn-container .btn.btn-secondary { width: 100%; font-size: 18px; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-row .dcg-keypad-btn-container .btn.btn-secondary .dcg-calculator-api-container .dcg-mq-math-mode { font-size: 18px; font-weight: 700; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-row .dcg-keypad-btn-container .btn.btn-secondary[dcg-command='backspace'] { font-size: 18px; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-row .dcg-keypad-btn-container .btn.btn-secondary[dcg-command='backspace'] .dcg-icon-delete { font-size: 24.8px; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-row .dcg-keypad-btn-container .btn.btn-secondary[dcg-command="="] .dcg-calculator-api-container .dcg-mq-math-mode, .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-row .dcg-keypad-btn-container .btn.btn-secondary[dcg-command=obelus] .dcg-calculator-api-container .dcg-mq-math-mode { font-size: 26px; } @media screen and (min-width: 1020px) { .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-basic-keypad { padding: 0; max-width: unset; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-rows-container { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 720px; margin-left: auto; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-rows-wrapper { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-rows-wrapper:first-child { -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-rows-wrapper:first-child .dcg-keypad-row { margin-bottom: 16px; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-row { -webkit-box-lines: single; -moz-box-lines: single; -o-box-lines: single; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-row .dcg-keypad-btn-container { max-width: 64px; height: 64px; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-btn.btn.btn-secondary { width: 100%; font-size: 22px; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-btn.btn.btn-secondary .dcg-calculator-api-container .dcg-mq-math-mode { font-size: 22px; font-weight: 700; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .btn.btn-secondary[dcg-command='backspace'] { font-size: 22px; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .btn.btn-secondary[dcg-command='backspace'] .dcg-icon-delete { font-size: 30px; } } @media screen and (min-width: 1280px) { .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-basic-keypad { padding: 0; max-width: unset; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-rows-container { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 757px; margin-left: auto; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-rows-wrapper { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-rows-wrapper:first-child { -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-rows-wrapper:first-child .dcg-keypad-row { margin-bottom: 17px; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-row { -webkit-box-lines: single; -moz-box-lines: single; -o-box-lines: single; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-row .dcg-keypad-btn-container { max-width: 68px; height: 68px; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-row .dcg-keypad-btn-container .dcg-keypad-btn.btn.btn-secondary { width: 100%; font-size: 26px; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-row .dcg-keypad-btn-container .dcg-keypad-btn.btn.btn-secondary .dcg-calculator-api-container .dcg-mq-math-mode { font-size: 26px; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-row .dcg-keypad-btn-container .btn.btn-secondary[dcg-command='backspace'] { font-size: 26px; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-keypad-row .dcg-keypad-btn-container .btn.btn-secondary[dcg-command='backspace'] .dcg-icon-delete { font-size: 33px; } } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-inline-hide-keypad-button { position: absolute; right: 16px; top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } @media screen and (min-width: 1020px) { .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-inline-hide-keypad-button { position: relative; right: initial; top: initial; width: calc((100% - 720px) / 2); -webkit-box-flex: initial; -moz-box-flex: initial; -o-box-flex: initial; -ms-box-flex: initial; box-flex: initial; -webkit-flex-grow: initial; flex-grow: initial; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } } @media screen and (min-width: 1280px) { .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-inline-hide-keypad-button { -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-inline-hide-keypad-button .btn.btn-icon { font-size: 18px; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-inline-hide-keypad-button .btn.btn-icon > .pillow-icon-k5-close { font-size: 17px; } @media screen and (min-width: 1280px) { .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-inline-hide-keypad-button .btn.btn-icon { font-size: 20px; margin-right: 48px; } .dcg-calculator-api-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container .dcg-inline-hide-keypad-button .btn.btn-icon > .pillow-icon-k5-close { font-size: 18px; } } @media screen and (max-width: 504px) { .dcg-calculator-api-container .dcg-basicarithmetic-keypad-container .dcg-basic-keypad { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .dcg-calculator-api-container .dcg-basicarithmetic-keypad-container .dcg-basic-keypad .dcg-keypad-rows-container { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -o-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; } .dcg-calculator-api-container .dcg-basicarithmetic-keypad-container .dcg-basic-keypad .dcg-inline-hide-keypad-button { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; position: static; -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -o-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } .dcg-calculator-api-container .dcg-basicarithmetic-keypad-container .dcg-basic-keypad .dcg-inline-hide-keypad-button > .btn { margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } } /* src/js/activitybuilder/shared/keypad/pillow-keypad/main.styl */ .dcg-api-shared-keypad-root { background-color: #ededed; } .dcg-api-shared-keypad-root .dcg-keypad-control-bar { background-color: transparent; border-left-color: transparent; border-right-color: transparent; } .dcg-api-shared-keypad-root .dcg-fourfunction-keypad-container .dcg-basic-keypad { max-width: 750px; } .dcg-api-shared-keypad-root .dcg-fourfunction-keypad-container.dcg-classroom-large-projector-mode .dcg-basic-keypad { max-width: 875px; } .dcg-api-shared-keypad-root .dcg-scientific-keypad-container.dcg-classroom-large-projector-mode .dcg-basic-keypad { max-width: 750px; } .dcg-api-shared-keypad-root .dcg-scientific-keypad-container.dcg-classroom-large-projector-mode .dcg-basic-keypad .dcg-keypad-btn, .dcg-api-shared-keypad-root .dcg-fourfunction-keypad-container.dcg-classroom-large-projector-mode .dcg-basic-keypad .dcg-keypad-btn { position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; } .dcg-api-shared-keypad-root .dcg-basic-keypad, .dcg-api-shared-keypad-root .dcg-keypad-control-bar-contents { max-width: 600px; margin: 0 auto; } .dcg-api-shared-keypad-root .dcg-keypad-control-btn.dcg-selectable-btn { max-width: 70px; } .dcg-api-shared-keypad-root .dcg-inline-hide-keypad-button { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; position: relative; } .dcg-api-shared-keypad-root .dcg-inline-hide-keypad-button-inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .dcg-api-shared-keypad-root .dcg-hide-keypad-button { height: 35px; width: 35px; line-height: 35px; margin: 4px 4px 4px auto; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .dcg-api-shared-keypad-root .dcg-hide-keypad-button .dcg-icon-hide { position: relative; top: 2px; } .dcg-api-shared-keypad-root .dcg-hide-keypad-button, .dcg-api-shared-keypad-root .dcg-inline-hide-keypad-button-inner { text-align: center; border-radius: 5px; color: #666; } .dcg-api-shared-keypad-root .dcg-hide-keypad-button.dcg-hovered, .dcg-api-shared-keypad-root .dcg-inline-hide-keypad-button-inner.dcg-hovered { color: rgba(0,0,0,0.8); background: rgba(0,0,0,0.1); } .dcg-api-shared-keypad-root .dcg-hide-keypad-button.dcg-depressed, .dcg-api-shared-keypad-root .dcg-inline-hide-keypad-button-inner.dcg-depressed { color: #000; background: rgba(0,0,0,0.18); } /* src/js/activitybuilder/shared/keypad/pillow-keypad/numbers-keypad.styl */ .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers .dcg-basic-keypad { padding: 0; max-width: initial; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers .dcg-basic-keypad .dcg-keypad-row { max-width: 476px; gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); margin: 0 auto; } .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers .dcg-basic-keypad .dcg-keypad-row .dcg-keypad-btn-container { max-width: 56px; height: 56px; } .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers .dcg-basic-keypad .btn.btn-secondary { width: 100%; font-size: 20px; } .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers .dcg-basic-keypad .btn.btn-secondary .dcg-calculator-api-container .dcg-mq-math-mode { font-size: 20px; font-weight: 700; } .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers .dcg-basic-keypad .btn.btn-secondary[dcg-command='backspace'] > .dcg-icon-delete { font-size: 20px; } @media screen and (min-width: 992px) { .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers .dcg-basic-keypad { padding: 0; } .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers .dcg-basic-keypad .dcg-keypad-row { -webkit-box-lines: single; -moz-box-lines: single; -o-box-lines: single; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); max-width: 760px; } .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers .dcg-basic-keypad .dcg-keypad-row .dcg-keypad-btn-container { max-width: 60px; height: 60px; } .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers .dcg-basic-keypad .btn.btn-secondary { width: 100%; font-size: 20px; } .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers .dcg-basic-keypad .btn.btn-secondary .dcg-calculator-api-container .dcg-mq-math-mode { font-size: 20px; font-weight: 700; } .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers .dcg-basic-keypad .btn.btn-secondary[dcg-command='backspace'] .dcg-icon-delete { font-size: 25px; } } @media screen and (min-width: 1200px) { .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers .dcg-basic-keypad { padding: 0; } .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers .dcg-basic-keypad .dcg-keypad-row { -webkit-box-lines: single; -moz-box-lines: single; -o-box-lines: single; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); max-width: 950px; } .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers .dcg-basic-keypad .dcg-keypad-row .dcg-keypad-btn-container { max-width: 75px; height: 75px; } .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers .dcg-basic-keypad .btn.btn-secondary { width: 100%; font-size: 28px; } .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers .dcg-basic-keypad .btn.btn-secondary .dcg-calculator-api-container .dcg-mq-math-mode { font-size: 28px; font-weight: 700; } .dcg-keypad-layout .dcg-keypad-container .dcg-api-shared-keypad-root .dcg-basicarithmetic-keypad-container.numbers .dcg-basic-keypad .btn.btn-secondary[dcg-command='backspace'] .dcg-icon-delete { font-size: 32px; } } /* src/js/activitybuilder/shared/sandbox-correctness-button.styl */ .answer-key-button i { height: 0.65em; width: 0.65em; border: 2px solid #3b3b3b; border-radius: 50%; background: #f6f6f6; } .answer-key-button i:before { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 100%; width: 100%; font-size: 0.75em; color: #3b3b3b; line-height: 0.65em; } .answer-key-button i.icon-v2-correct { position: absolute; top: 18%; left: 18%; } .answer-key-button i.icon-v2-incorrect { position: absolute; top: 40%; left: 40%; } .answer-key-button.dcg-hovered i { background: #f2f2f2; } /* src/js/activitybuilder/shared/scientific-keypad.styl */ .dcg-keypad-layout { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .dcg-keypad-layout .dcg-keypad-main-drawer { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; position: relative; } .dcg-keypad-layout .dcg-keypad-container.hidden { display: none; } .dcg-keypad-layout .dcg-keypad-container:not(.hidden) { border-top: var(--keypad-border-top, initial); } /* src/js/activitybuilder/shared/shared-student-header.styl */ .shared-student-header.scrolled { z-index: 1; -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.6); box-shadow: 0 0 5px rgba(0,0,0,0.6); border-color: #e2e2e2; } /* src/js/activitybuilder/student/activity-copy-button.styl */ .copy-button-container { display: inline-block; position: relative; } .copy-button-container label { z-index: 1; } .copy-button-container .activity-copy-button { position: relative; } .copy-button-container .activity-copy-button.is-active:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 50%; background: #15b097; -webkit-animation: copyFlash 0.5s forwards; -moz-animation: copyFlash 0.5s forwards; -o-animation: copyFlash 0.5s forwards; -ms-animation: copyFlash 0.5s forwards; animation: copyFlash 0.5s forwards; } .copy-button-container .activity-copy-button i { font-size: 1.3em; color: #3b3b3b; } .copy-button-container .animating-flash-message { position: absolute; top: 0; left: 50px; bottom: 0; z-index: 1; line-height: 1.2em; background: #f6f6f6; padding: 5px; font-size: 80%; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; text-transform: none; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .copy-button-container .animating-flash-message i { color: #00866b; font-size: 1.75em; } @-moz-keyframes copyFlash { 0% { opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -o-transform: scale(2, 2); -ms-transform: scale(2, 2); transform: scale(2, 2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-webkit-keyframes copyFlash { 0% { opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -o-transform: scale(2, 2); -ms-transform: scale(2, 2); transform: scale(2, 2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-o-keyframes copyFlash { 0% { opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -o-transform: scale(2, 2); -ms-transform: scale(2, 2); transform: scale(2, 2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @keyframes copyFlash { 0% { opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -o-transform: scale(2, 2); -ms-transform: scale(2, 2); transform: scale(2, 2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } /* src/js/activitybuilder/student/cl-debug/student-debug.styl */ .student-debug-view-container { position: absolute; top: 44px; left: 0; bottom: 0; right: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; overflow: auto; } .student-debug-view-container .collapsable-content-container { margin-top: 10px; max-width: 100%; } .student-debug-view-list { padding-top: 5px; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: auto; } .student-debug-component-container { font-size: 110%; padding: 0px 15px 10px 15px; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .student-debug-variable-container { -webkit-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; width: 100%; border-radius: 5px; margin-top: 5px; padding: 10px; overflow-wrap: anywhere; } .student-debug-variable-container:hover:not(.student-debug-variable-highlight) { background-color: #e8e8e8; } .student-debug-variable-highlight { background-color: #ffbe00; } .student-debug-variable-value { font-size: 90%; color: #666; } .practice-screen-value { margin: 5px 0; } .student-debug-variable-list { margin: 0 15px; } /* src/js/activitybuilder/student/comments.styl */ .student-feedback-comments { position: absolute; top: 44px; left: 0; bottom: 0; right: 0; } /* src/js/activitybuilder/student/notification-dot.styl */ .notification { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .notification .notification-dot-container, .notification .notification-bubble-container { text-align: center; position: absolute; top: 0; right: 0; width: 1.2rem; height: 1.2rem; } .notification .notification-dot-container .notification-dot, .notification .notification-bubble-container .notification-dot, .notification .notification-dot-container .notification-bubble, .notification .notification-bubble-container .notification-bubble { width: 1rem; height: 1rem; line-height: 1rem; font-weight: 400; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; top: 70%; left: 50%; background: #3278c8; border-radius: 50%; color: #fff; -webkit-box-shadow: 0 0 0 1px #fff; box-shadow: 0 0 0 1px #fff; } .notification .notification-dot-container .notification-dot.large, .notification .notification-bubble-container .notification-dot.large, .notification .notification-dot-container .notification-bubble.large, .notification .notification-bubble-container .notification-bubble.large { width: 1.2rem; height: 1.2rem; line-height: 1.2rem; } .notification .notification-dot-container .notification-dot .notification-count, .notification .notification-bubble-container .notification-dot .notification-count, .notification .notification-dot-container .notification-bubble .notification-count, .notification .notification-bubble-container .notification-bubble .notification-count { opacity: 1; -ms-filter: none; filter: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #fff; font-size: 75%; } .notification .notification-dot-container .notification-dot.animating:not(.large), .notification .notification-bubble-container .notification-dot.animating:not(.large), .notification .notification-dot-container .notification-bubble.animating:not(.large), .notification .notification-bubble-container .notification-bubble.animating:not(.large) { -webkit-animation: dotPop 250ms; -moz-animation: dotPop 250ms; -o-animation: dotPop 250ms; -ms-animation: dotPop 250ms; animation: dotPop 250ms; } .notification .notification-dot-container .notification-dot.animating:not(.large) .notification-count, .notification .notification-bubble-container .notification-dot.animating:not(.large) .notification-count, .notification .notification-dot-container .notification-bubble.animating:not(.large) .notification-count, .notification .notification-bubble-container .notification-bubble.animating:not(.large) .notification-count { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .notification .notification-dot-container .notification-dot-halo, .notification .notification-bubble-container .notification-dot-halo { width: 4rem; height: 4rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); background: #3278c8; border-radius: 50%; } .notification .notification-dot-container .notification-dot-halo.animating, .notification .notification-bubble-container .notification-dot-halo.animating { -webkit-animation: fadeInOutTransparent 500ms, haloGrowFromCenter 500ms ease-in; -moz-animation: fadeInOutTransparent 500ms, haloGrowFromCenter 500ms ease-in; -o-animation: fadeInOutTransparent 500ms, haloGrowFromCenter 500ms ease-in; -ms-animation: fadeInOutTransparent 500ms, haloGrowFromCenter 500ms ease-in; animation: fadeInOutTransparent 500ms, haloGrowFromCenter 500ms ease-in; } .notification .notification-dot-container { position: absolute; top: var(--notification-dot-absolute-position-top); bottom: var(--notification-dot-absolute-position-bottom); left: var(--notification-dot-absolute-position-left); right: var(--notification-dot-absolute-position-right); } .notification .notification-dot-container .notification-dot { background: var(--notification-dot-background, #3278c8); width: var(--notification-dot-width, 1rem); height: var(--notification-dot-height, 1rem); -webkit-flex-shrink: 0; flex-shrink: 0; } @-moz-keyframes haloGrowFromCenter { 0% { width: 1rem; height: 1rem; } 100% { width: 4rem; height: 4rem; } } @-webkit-keyframes haloGrowFromCenter { 0% { width: 1rem; height: 1rem; } 100% { width: 4rem; height: 4rem; } } @-o-keyframes haloGrowFromCenter { 0% { width: 1rem; height: 1rem; } 100% { width: 4rem; height: 4rem; } } @keyframes haloGrowFromCenter { 0% { width: 1rem; height: 1rem; } 100% { width: 4rem; height: 4rem; } } @-moz-keyframes dotPop { 0%, 10% { width: 1rem; height: 1rem; } 20%, 50% { width: 1.2rem; height: 1.2rem; } 100% { width: 1rem; height: 1rem; } } @-webkit-keyframes dotPop { 0%, 10% { width: 1rem; height: 1rem; } 20%, 50% { width: 1.2rem; height: 1.2rem; } 100% { width: 1rem; height: 1rem; } } @-o-keyframes dotPop { 0%, 10% { width: 1rem; height: 1rem; } 20%, 50% { width: 1.2rem; height: 1.2rem; } 100% { width: 1rem; height: 1rem; } } @keyframes dotPop { 0%, 10% { width: 1rem; height: 1rem; } 20%, 50% { width: 1.2rem; height: 1.2rem; } 100% { width: 1rem; height: 1rem; } } /* src/js/activitybuilder/student/student-activity-header.styl */ .student-activity-header { height: var(--student-activity-header-height, 55px); width: 100%; font-weight: var(--font-weight-default); position: relative; background: var(--student-activity-header-background, #f6f6f6); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .student-activity-header.bg-light { background: var(--student-activity-header-background-bg-light, #f6f6f6); } .student-activity-header.row { margin-left: 0; margin-right: 0; -webkit-box-lines: single; -moz-box-lines: single; -o-box-lines: single; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .student-activity-header .live-preview-link.dcg-hovered { text-decoration: underline; } .student-activity-header .live-preview-link.dcg-depressed { text-decoration: underline; color: #000; } .student-activity-header .student-activity-header-left-content { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .student-activity-header .student-activity-header-left-content .student-preview-header { width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .student-activity-header .student-activity-header-left-content .student-preview-header.show-cl-preview { width: auto; } .student-activity-header .student-activity-header-left-content .student-preview-header .student-preview-title { margin: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) 0 0; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; font-weight: 300; font-size: 1.2em; } .student-activity-header .student-activity-header-left-content .student-preview-header .edit-activity-link { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); position: relative; } .student-activity-header .student-activity-header-left-content .title-and-user { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; max-width: calc(100% - var(--btn-size, (calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) + 40px))); margin-left: var(--student-activity-header-title-margin-left, calc(calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) + 40px)); margin-top: -4px; } .student-activity-header .student-activity-header-left-content .title-and-user .activity-name, .student-activity-header .student-activity-header-left-content .title-and-user .user-name { max-width: 100%; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .student-activity-header .student-activity-header-left-content .title-and-user .activity-name { font-size: var(--font-size-default, calc(var(--scale-ratio) * 1em)); font-weight: var(--font-weight-bold, 400); line-height: var(--student-activity-header-title-line-height, 1.5em); margin: 0; } .student-activity-header .student-activity-header-left-content .title-and-user .activity-link { color: #666; text-decoration: none; } .student-activity-header .student-activity-header-left-content .title-and-user .activity-link.dcg-hovered, .student-activity-header .student-activity-header-left-content .title-and-user .activity-link.dcg-depressed { text-decoration: underline; } .student-activity-header .student-activity-header-left-content .title-and-user .user-name-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .student-activity-header .student-activity-header-left-content .title-and-user .user-name { display: inline; line-height: 1em; vertical-align: top; font-weight: var(--student-name-font-weight, 400); color: var(--font-color-default, #676767); } .student-activity-header .student-activity-header-left-content .title-and-user .anonymize-icon-tooltip { margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); display: inline-block; line-height: 1em; } .student-activity-header .student-activity-header-left-content .title-and-user .anonymize-icon-tooltip i.icon-v2-anonymize { font-size: 80%; color: #676767; } .student-activity-header .student-activity-header-left-content .title-and-user .dcg-tooltip-hit-area-container { vertical-align: top; line-height: 0.9em; } .student-activity-header .student-activity-header-center-content { -webkit-flex-basis: content; flex-basis: content; text-align: center; margin: var(--student-activity-header-center-content-margin, 0); } .student-activity-header .student-activity-header-center-content .btn-icon { position: relative; margin-top: auto; margin-bottom: auto; } .student-activity-header .student-activity-header-center-content .btn-icon:not(:first-of-type) { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .student-activity-header .student-activity-header-center-content .btn-icon.calculator-tool-button.calculator-open, .student-activity-header .student-activity-header-center-content .btn-icon-ghost.calculator-tool-button.calculator-open, .student-activity-header .student-activity-header-center-content .btn-icon.calculator-tool-button.calculator-open:hover, .student-activity-header .student-activity-header-center-content .btn-icon-ghost.calculator-tool-button.calculator-open:hover { background: var(--student-halo-button-background-color-selected, #3278c8); color: var(--student-halo-button-color-selected, #fff); border-color: transparent; } .student-activity-header .student-activity-header-center-content .btn-icon.feedback-button.feedback-open, .student-activity-header .student-activity-header-center-content .btn-icon-ghost.feedback-button.feedback-open, .student-activity-header .student-activity-header-center-content .btn-icon.cl-debug-tool-button.feedback-open, .student-activity-header .student-activity-header-center-content .btn-icon-ghost.cl-debug-tool-button.feedback-open, .student-activity-header .student-activity-header-center-content .btn-icon.feedback-button.feedback-open:hover, .student-activity-header .student-activity-header-center-content .btn-icon-ghost.feedback-button.feedback-open:hover, .student-activity-header .student-activity-header-center-content .btn-icon.cl-debug-tool-button.feedback-open:hover, .student-activity-header .student-activity-header-center-content .btn-icon-ghost.cl-debug-tool-button.feedback-open:hover, .student-activity-header .student-activity-header-center-content .btn-icon.feedback-button.cl-debug-open, .student-activity-header .student-activity-header-center-content .btn-icon-ghost.feedback-button.cl-debug-open, .student-activity-header .student-activity-header-center-content .btn-icon.cl-debug-tool-button.cl-debug-open, .student-activity-header .student-activity-header-center-content .btn-icon-ghost.cl-debug-tool-button.cl-debug-open, .student-activity-header .student-activity-header-center-content .btn-icon.feedback-button.cl-debug-open:hover, .student-activity-header .student-activity-header-center-content .btn-icon-ghost.feedback-button.cl-debug-open:hover, .student-activity-header .student-activity-header-center-content .btn-icon.cl-debug-tool-button.cl-debug-open:hover, .student-activity-header .student-activity-header-center-content .btn-icon-ghost.cl-debug-tool-button.cl-debug-open:hover { background: var(--student-halo-button-background-color-selected, #00866b); color: var(--student-halo-button-color-selected, #fff); border-color: transparent; } .student-activity-header .student-activity-header-center-content .btn-icon-ghost { border: var(--student-halo-button-border, none); color: var(--student-halo-button-color, #000); position: relative; margin-top: auto; margin-bottom: auto; } .student-activity-header .student-activity-header-center-content .btn-icon-ghost:not(:first-of-type) { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .student-activity-header .student-activity-header-center-content .btn-icon-ghost:not(:hover) { background: var(--student-halo-button-background-color, transparent); } .student-activity-header .student-activity-header-center-content .btn-icon-ghost:hover label { z-index: 1; } .student-activity-header .student-activity-header-center-content .btn-icon-ghost.dcg-hovered { border-color: var(--student-halo-button-border-color-hovered, transparent); background: rgba(0,0,0,0.05); } .student-activity-header .student-activity-header-center-content .btn-icon-ghost.dcg-depressed { border-color: var(--student-halo-button-border-color-hovered, transparent); background: var(--student-halo-button-background-color-depressed, rgba(0,0,0,0.1)); } .student-activity-header .student-activity-header-center-content .btn-icon-ghost.answer-key-button.answer-key-showing { background: #676767; } .student-activity-header .student-activity-header-center-content .btn-icon-ghost.calculator-tool-button.calculator-has-content { background: #c2d7ef; } .student-activity-header .student-activity-header-center-content .btn-icon-ghost.calculator-tool-button.calculator-has-content.dcg-hovered:not(.calculator-open), .student-activity-header .student-activity-header-center-content .btn-icon-ghost.calculator-tool-button.calculator-has-content.dcg-depressed:not(.calculator-open) { background: #9abde4; } .student-activity-header .student-activity-header-center-content .btn-icon-ghost.feedback-button.feedback-has-comments, .student-activity-header .student-activity-header-center-content .btn-icon-ghost.cl-debug-tool-button.feedback-has-comments { background: #b3dbd3; } .student-activity-header .student-activity-header-center-content .btn-icon-ghost.feedback-button.feedback-has-comments.dcg-hovered:not(.feedback-open), .student-activity-header .student-activity-header-center-content .btn-icon-ghost.cl-debug-tool-button.feedback-has-comments.dcg-hovered:not(.feedback-open), .student-activity-header .student-activity-header-center-content .btn-icon-ghost.feedback-button.feedback-has-comments.dcg-depressed:not(.feedback-open), .student-activity-header .student-activity-header-center-content .btn-icon-ghost.cl-debug-tool-button.feedback-has-comments.dcg-depressed:not(.feedback-open) { background: #90cbbf; } .student-activity-header .student-activity-header-center-content .btn-icon-ghost.feedback-button.disabled { pointer-events: all; cursor: default; } .student-activity-header .student-activity-header-center-content .btn-icon-ghost.feedback-button.disabled label { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; height: auto; width: 200px; background: none; } .student-activity-header .student-activity-header-center-content .btn-icon-ghost.feedback-button.disabled label span { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; height: auto; width: fit-content; white-space: normal; padding: 3px; line-height: 1.2em; background: #676767; } .student-activity-header .student-activity-header-center-content .btn-icon-ghost.feedback-button.disabled:hover { opacity: 1; -ms-filter: none; filter: none; background-color: transparent; pointer-events: all; cursor: default; } .student-activity-header .student-activity-header-center-content .btn-icon-ghost.feedback-button.disabled:hover i { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); } .student-activity-header .student-activity-header-right-content { min-width: fit-content; } .student-activity-header .student-activity-header-right-content .navigation-stepper-container { -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .student-activity-header-container { background: var(--student-activity-header-background, #f6f6f6); white-space: nowrap; } .student-activity-header-container.bg-light { background: var(--student-activity-header-background-bg-light, #f6f6f6); } @media screen and (min-width: 400px) and (max-width: 575px) { .student-activity-header .student-activity-header-left-content { max-width: calc(100% - 250px); } .student-activity-header .student-activity-header-right-content { -webkit-flex-basis: content; flex-basis: content; } } @media screen and (max-width: 400px) { .student-activity-header .student-activity-header-left-content .title-and-user { display: none; } .student-activity-header .student-activity-header-right-content { min-width: 0; } } div[role=header], div[role=heading] { font-family: var(--header-font-family); } /* src/js/activitybuilder/student/student-calculator-button.styl */ .calculator-tool-button.btn.disabled { pointer-events: all; cursor: default; } .calculator-tool-button.btn.disabled label { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; height: auto; width: 200px; background: none; } .calculator-tool-button.btn.disabled label span { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; height: auto; width: fit-content; white-space: normal; padding: 3px; line-height: 1.2em; background: #676767; } .calculator-tool-button.btn.disabled:hover { opacity: 1; -ms-filter: none; filter: none; background-color: transparent; pointer-events: all; cursor: default; } .calculator-tool-button.btn.disabled:hover i { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); } /* src/js/activitybuilder/student/student-navigation.styl */ .student-navigation-container .dcg-student-navigation-steps { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .student-navigation-container .student-step-container { position: absolute; top: 0; left: 0; right: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .student-navigation-container .student-step-container .cls-step-title { -webkit-box-flex: 0; -moz-box-flex: 0; -o-box-flex: 0; -ms-box-flex: 0; box-flex: 0; -webkit-flex-grow: 0; flex-grow: 0; text-align: center; font-weight: var(--font-weight-default, 400); } .student-navigation-container .student-step-container .cls-step-title:first-child { margin-top: 1.5em; } .student-navigation-container .student-step-container .content-container { position: relative; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; -ms-flex: 1 1 auto; } @media screen and (max-width: 575px) { .student-navigation-container .title-subtitle-container { margin: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .student-navigation-container .student-step-container .cls-step-title { font-size: 1.45em; line-height: 1.5em; } } @media screen and (max-width: 650px), screen and (max-height: 650px) { .student-navigation-container .cls-step-title { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) !important; } } /* src/js/activitybuilder/student/student-sandboxed-navigation.styl */ .student-sandbox-navigation-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background-color: #fff; } .student-sandbox-navigation-container .preview-only-ribbon { position: absolute; top: -42px; right: -50px; width: 170px; padding: 8px 0; -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,0.2); box-shadow: 0 0 1px 1px rgba(0,0,0,0.2); color: #fff; text-align: center; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; background: rgba(0,0,0,0.6); pointer-events: none; z-index: 2; } .student-sandbox-navigation-container.has-teacher-tip .dcg-student-screen .content-container { padding-bottom: 40px; } .student-sandbox-navigation-container.has-teacher-tip .dcg-student-screen .content-container .fullscreen-layout:after { content: ""; position: absolute; left: 0; top: 100%; right: 0; bottom: 0; height: calc(40px + calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); } .student-sandbox-navigation-container.fullscreen-cardsort .shared-student-header.scrolled { z-index: unset; } .student-sandbox-navigation-container .sandbox-container-content { position: relative; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .student-sandbox-navigation-container .sandbox-container-content .student-navigation { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; position: relative; } /* src/js/activitybuilder/student/student-tool-panel.styl */ .scientific-calculator-panel .dcg-calculator-api-container .dcg-basic-list-container { border-top: none; } .scientific-calculator-panel .dcg-calculator-api-container .dcg-basic-keypad-container { border-radius: 0 0 0 5px; } .scientific-calculator-panel .dcg-calculator-api-container .dcg-keypad .dcg-functions-popover.dcg-left { left: 5px; } .scientific-calculator-panel .dcg-calculator-api-container .dcg-keypad .dcg-functions-popover.dcg-left .dcg-popover-interior { width: calc(100% + 2px); font-size: 95%; } .rtl-layout .scientific-calculator-panel .dcg-calculator-api-container .dcg-basic-keypad-container { border-radius: 0 0 5px 0; } .student-tool-panel.grading-panel .panel-icon { font-size: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } @media screen and (max-width: 575px) { .scientific-calculator-panel .dcg-calculator-api-container .dcg-basic-keypad-container { border-radius: 0; } } /* src/js/activitybuilder/student/themes/default.styl */ [data-theme-id="default"] { --student-halo-button-color: #3b3b3b; --notification-dot-absolute-position-top: 0px; --notification-dot-absolute-position-bottom: auto; --notification-dot-absolute-position-left: auto; --notification-dot-absolute-position-right: 0px; --primary-button-background-hover: #5e083b; --keypad-button-background-hovered: #1e4878; --keypad-button-color-hovered: #fff; --keypad-button-border-color-hovered: transparent; --keypad-button-background-active: #0f243c; --keypad-button-color-active: #fff; --keypad-button-border-color-active: transparent; --keypad-border-top: 1px solid #a0a0a0; } /* src/js/activitybuilder/student/themes/early-elementary.styl */ @font-face { font-family: 'quicksand'; font-style: normal; font-weight: 500; src: url("/fingerprinted/static/classroom-assets/font/quicksand-medium/quicksand-medium-2b6e7173c86feb9b5eef91cc4698e72a9562da3f-a.ttf") format('truetype'), local('quicksand'); } @font-face { font-family: 'quicksand'; font-style: normal; font-weight: 700; src: url("/fingerprinted/static/classroom-assets/font/quicksand-bold/quicksand-bold-ccb21f7268e5f5544794dcdd84697aa76e2c8e59-a.ttf") format('truetype'), local('quicksand'); } [data-theme-id="early_elementary"] { font-family: var(--font-family); font-size: var(--font-size-default); font-weight: var(--font-weight-default); color: var(--font-color-default); --correctness-indicator-size: 1em; --correctness-gutter-size: -55px; --font-family: 'quicksand', sans-serif; --font-size-default: 24px; --font-size-medium: 32px; --font-size-large: 40px; --font-weight-default: 500; --font-weight-bold: 700; --font-color-default: #231f20; --header-font-family: var(--font-family); --note-font-family: 'quicksand'; --border-color-component: #b0bed3; --border-color-primary: #77787b; --border-width-primary: 4px; --border-primary: solid 4px var(--border-color-primary); --border-width-graphs: 2px; --border-component: solid var(--border-width-graphs) var(--border-color-component); --border-radius: 13.57px; --border-radius-large: 32px; --border-radius-medium: 16px; --border-radius-small: 8px; --box-shadow-width: 2px; --box-shadow-width-bottom: 4px; --overflow-hidden: hidden; --button-border-radius: 32px; --button-padding: 0px 36px; --button-margin-top-depressed: 2px; --button-icon-font-size: 30px; --button-icon-position: relative; --button-icon-top: 6px; --primary-button-color: #fff; --primary-button-background-default: #0069e4; --primary-button-background-hover: #0058bf; --primary-button-shadow-default: 0 4px #002c64; --secondary-button-background-color: #fff; --secondary-button-color: #fff; --secondary-button-border-default: 4px solid #77787b; --secondary-button-border-color-hover: #3f3b3c; --secondary-button-box-shadow-default: #004597; --secondary-button-box-shadow-hover: #004597; --secondary-button-box-shadow-depressed: none; --secondary-button-text-decoration: none; --secondary-button-line-height: 52px; --secondary-button-pencil-icon-margin-right: 9px; --button-red-color: #fff; --button-red-background-color: #db2e00; --button-red-background-color-hover: #af2500; --button-red-background-color-active: #831c00; --notification-dot-background: #c231a0; --notification-dot-absolute-position-top: auto; --notification-dot-absolute-position-bottom: 0px; --notification-dot-absolute-position-left: auto; --notification-dot-absolute-position-right: 0px; --notification-dot-height: 38px; --notification-dot-width: 38px; --notification-dot-flex-shrink: 0; --modal-margin: 65px; --close-modal-btn-position: 10px; --close-modal-btn-padding: 0; --close-modal-btn-size: 58px; --close-modal-btn-opacity: 1; --close-modal-btn-color: #722800; --close-modal-btn-background: #fbead6; --close-modal-btn-background-hover: #fbbb7b; --close-modal-btn-background-depressed: #e58a4b; --image-gallery-nav-icon-color: #fbead6; --image-gallery-nav-icon-color-hover: #fbbb7b; --image-gallery-nav-icon-color-depressed: #e58a4b; --image-gallery-nav-icon-color-disabled: rgba(251,234,214,0.2); --image-count-info-positioning: 0; --image-count-info-color: #722800; --image-count-info-transform: none; --image-count-info-background: #fbead6; --image-count-info-width: 100%; --image-count-info-height: 60px; --image-count-info-text-align: center; --image-centering-container-padding: 40px 80px 120px; --image-lightbox-container-background: rgba(0,0,0,0.8); --image-modal-image-border: 8px solid #fbead6; --line-separator-color: #e0e0e0; --line-separator-height: 2px; --line-separator-background-image: linear-gradient(to right, #e0e0e0 70%, rgba(255,255,255,0) 0%); --line-separator-background-position: top; --line-separator-background-size: 12px 2px; --line-separator-background-repeat: repeat-x; --snapshot-camera-size: 32px; --snapshot-camera-font-size: 30px; --snapshot-camera-padding: 0; --snapshot-captured-positioning-right: 30px; --field-has-error-background-color: #feffe0; --field-has-error-border-color: #817715; --rectangle-btn-border-radius: 8px; --btn-border-width: 3px; --btn-size: 60px; --table-border-collapse-enabled: none; --student-activity-header-height: 70px; --student-activity-header-title-margin-left: 0; --student-actiivty-header-hamburger-top-margin: 4px; --student-activity-header-background: #fff; --student-activity-header-background-bg-light: #f1f5fb; --student-activity-header-center-content-margin: 0 auto; --navigation-stepper-screen-count-width: 60px; --student-halo-button-border: 3px solid #bdbdbd; --student-halo-button-border-color-hovered: #999; --student-halo-button-background-color: transparent; --student-halo-button-background-color-depressed: rgba(250,250,250,0.5); --student-halo-button-background-color-selected: #0069e4; --student-halo-button-color: #0069e4; --student-halo-button-color-selected: #fff; --link-to-interactive-border-offset: 4px; --link-to-interactive-border-radius: 0 12px 0 0; --link-to-interactive-font-size: 16px; --link-to-interactive-padding: 0; --link-to-interactive-margin: 0; --link-to-interactive-top: -24px; --link-to-interactive-right: 0; --keypad-background-color: #e8eef8; --keypad-border-top: initial; } [data-theme-id="early_elementary"] .dcg-mq-root-block, [data-theme-id="early_elementary"] .dcg-calculator-api-container .dcg-mq-math-mode var, [data-theme-id="early_elementary"] .dcg-calculator-api-container .dcg-mq-math-mode .dcg-mq-text-mode, [data-theme-id="early_elementary"] .dcg-calculator-api-container .dcg-mq-math-mode .dcg-mq-nonSymbola, [data-theme-id="early_elementary"] .dcg-calculator-api-container .dcg-mq-math-mode .dcg-mq-binary-operator, [data-theme-id="early_elementary"] .dcg-calculator-api-container .dcg-mq-math-mode .dcg-mq-digit { font-family: 'quicksand'; } [data-theme-id="early_elementary"] ::-webkit-scrollbar { width: 32px !important; } [data-theme-id="early_elementary"] ::-webkit-scrollbar-track { background: #f3f3f3 !important; } [data-theme-id="early_elementary"] ::-webkit-scrollbar-thumb { background: #32a3cf !important; border-radius: 32px !important; border: 5px solid #f3f3f3 !important; } [data-theme-id="early_elementary"] ::-webkit-scrollbar-thumb:hover { background: #2b8ab0 !important; border-radius: 32px !important; border: 5px solid #f3f3f3 !important; } [data-theme-id="early_elementary"] ::-webkit-scrollbar-thumb:active { background: #006997 !important; border-radius: 32px !important; border: 5px solid #f3f3f3 !important; } [data-theme-id="early_elementary"] ::-webkit-scrollbar-button { height: 32px; width: 35px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; position: relative; } [data-theme-id="early_elementary"] ::-webkit-scrollbar-button:vertical:decrement { display: block; position: absolute; border-left: 16px solid #f3f3f3; border-right: 16px solid #f3f3f3; border-bottom: 16px solid #32a3cf; border-top: 16px solid #f3f3f3; border-top-left-radius: 16px; border-top-right-radius: 16px; top: -4px; } [data-theme-id="early_elementary"] ::-webkit-scrollbar-button:hover:vertical:decrement { border-bottom: 16px solid #2b8ab0; } [data-theme-id="early_elementary"] ::-webkit-scrollbar-button:active:vertical:decrement { border-bottom: 16px solid #006997; } [data-theme-id="early_elementary"] ::-webkit-scrollbar-button:vertical:increment { display: block; border-left: 16px solid #f3f3f3; border-right: 16px solid #f3f3f3; border-top: 16px solid #32a3cf; border-bottom: 16px solid #f3f3f3; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } [data-theme-id="early_elementary"] ::-webkit-scrollbar-button:hover:vertical:increment { border-top: 16px solid #2b8ab0; } [data-theme-id="early_elementary"] ::-webkit-scrollbar-button:active:vertical:increment { border-top: 16px solid #006997; } [data-theme-id="early_elementary"] ::-webkit-scrollbar-button:vertical:start:increment, [data-theme-id="early_elementary"] ::-webkit-scrollbar-button:vertical:end:decrement { display: none; } [data-theme-id="early_elementary"] .dcg-cardsort-card::-webkit-scrollbar { height: 32px !important; } [data-theme-id="early_elementary"] .dcg-cardsort-card::-webkit-scrollbar-track { border-radius: 32px !important; } [data-theme-id="early_elementary"] .user-name-container { --student-name-font-weight: 700; } [data-theme-id="early_elementary"] .navigation-stepper { --slide-step-counter-font-weight: 700; } [data-theme-id="early_elementary"] .nav-stepper-btn { --button-border-radius: 8px; --secondary-button-border-default: 3px solid #ccc; --secondary-button-border-color-hover: #999; } [data-theme-id="early_elementary"] .nav-stepper-contents { --nav-stepper-contents-padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); --nav-stepper-contents-padding-sm: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } [data-theme-id="early_elementary"] .edit-picture-container .confirm-candidate { --primary-button-color: #722800; --primary-button-background-default: #fbbb7b; --primary-button-background-hover: #e58a4b; --primary-button-shadow-default: 0 4px #d77027; } [data-theme-id="early_elementary"] [data-component-type="reorder"] { --listbox-container-margin-bottom: 14px; --reorder-item-flex-grow: 0; --reorder-item-margin: 16px 0px 0px; --reorder-item-box-shadow: 0 4px 12px 0 rgba(0,0,0,0.25); --reorder-item-border: solid 4px #fff; --reorder-item-width: 480px; --reorder-item-min-height: 64px; --reorder-item-height: fit-content; --reorder-item-background-color: #fff; --reorder-item-line-height: normal; --reorder-item-font-weight: var(--font-weight-bold); --reorder-item-font-style: normal; --reorder-item-font-stretch: normal; --reorder-item-text-align: left; --reorder-item-letter-spacing: normal; --reorder-item-hover-border-color: #c231a0; --reorder-item-handle-color: #b1b3b6; --reorder-item-handle-hover-color: #c231a0; --item-content-align-self: center; --reorder-item-placeholder-border: dashed 4px #b1b3b6; --reorder-item-placeholder-background-color: #e8e9ea; --reorder-item-placeholder-margin-top: 16px; } [data-theme-id="early_elementary"] [data-component-type="input/graph"], [data-theme-id="early_elementary"] .graph-snapshot { --graph-border: var(--border-component); --graph-scrubber-border-top: 2px solid #e8e9ea; --graph-scrubber-button-size: 16px; } [data-theme-id="early_elementary"] [data-component-type="exhibit/text"] { --note-font-family: 'quicksand'; --note-font-weight: 500; --font-color-default: #3b3b3b; color: var(--font-color-default); } [data-theme-id="early_elementary"] [data-component-type="exhibit/image"] { --image-border: var(--border-component); --image-border-hover: solid 8px #000; --image-border-depressed: solid 8px #000; --image-fullscreen-icon-background-color: #fff; --image-fullscreen-icon-border: var(--border-primary); --image-fullscreen-icon-border-hover: solid 4px #000; --image-fullscreen-icon-border-radius: 50%; --image-fullscreen-icon-color: #77787b; --image-fullscreen-icon-color-hover: #000; --image-fullscreen-icon-color-depressed: #000; --image-fullscreen-icon-padding: 6px; --image-fullscreen-icon-right: 12px; --image-fullscreen-icon-top: 12px; --image-fullscreen-icon-width: 44px; --image-fullscreen-icon-height: 44px; } [data-theme-id="early_elementary"] [data-component-type="multiple-choice"] { --text-input-submit-button-text-align: left; } [data-theme-id="early_elementary"] [data-component-type="multiple-choice"], [data-theme-id="early_elementary"] .choice-snapshot { --multi-choice-font-weight: var(--font-weight-bold); --multi-choice-wrapper-margin-bottom: 30px; --multi-choice-border-color-depressed: #c231a0; --multi-choice-border-color-selected: rgba(0,0,0,0); --multi-choice-border-color-checked: #c231a0; --multi-choice-border-color-submitted: #c231a0; --multi-choice-box-border: 1px solid rgba(0,0,0,0); --multi-choice-box-border-selected: 1px solid rgba(0,0,0,0); --multi-choice-box-border-hover: 1px solid rgba(0,0,0,0); --multi-choice-box-border-depressed: 1px solid rgba(0,0,0,0); --multi-choice-box-shadow: 0 0.25em 0 #b3d2f7; --multi-choice-box-shadow-selected: 0 0.25em 0 #004597; --multi-choice-box-shadow-depressed: 0 0.125em 0 #0069e4; --multi-choice-box-shadow-selected-focus-visible: 0 0 0 0.125em #fff, 0 0 0 0.3125em var(--amp-focus-color, #9c0d63), 0 0.25em 0 #80b4f1; --multi-choice-box-shadow-bottom-color: #231f20; --multi-choice-box-shadow-bottom-color-hover: #8f037c; --multi-choice-box-shadow-bottom-hover: 0 4px #8f037c; --multi-choice-box-padding-bottom: 8px; --multi-choice-background-selected: #0069e4; --multi-choice-background-checked: #fde0ea; --multi-choice-background-submitted: #0069e4; --multi-choice-box-selected-hover-background: #0058bf; --multi-choice-button-gap: 25px; --multi-choice-button-height: 60px; --multi-choice-button-fraction-vertical-align: -0.5em; --multi-choice-checkmark-border-color-selected: #0069e4; --multi-choice-checkmark-border-color-depressed: #0069e4; --multi-choice-checkmark-color: transparent; --multi-choice-checkmark-color-hover: transparent; --multi-choice-checkmark-color-depressed: #fff; --multi-choice-checkmark-color-selected: #fff; --multi-choice-checkmark-color-checked: #fff; --multi-choice-checkmark-color-submitted: #fff; --multi-choice-checkbox-background-color: #fff; --multi-choice-checkbox-background-hover: #fff; --multi-choice-checkbox-background-depressed: #0069e4; --multi-choice-checkbox-background-selected: #0069e4; --multi-choice-checkbox-border-radius: 4px; --multi-choice-basic-padding: 0.3875em 1em; --multi-choice-basic-border-radius: 17px; --multi-choice-basic-text-align: left; --multi-choice-basic-justify-content: start; --multi-choice-tile-checkbox-border: 3px solid #b3d2f7; --multi-choice-tile-font-color: #3b3b3b; --multi-choice-tile-font-weight: 500; --multi-choice-tile-line-height: 1.6em; --multi-choice-tile-card-spacing: 12.5px; --multi-choice-tile-gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); --multi-choice-tile-grid-margin-unit: 0; --multi-choice-tile-grid-text-position-left: 0px; --multi-choice-tile-grid-text-position-right: 0px; --multi-choice-tile-grid-text-position-top: 0px; --multi-choice-tile-grid-text-checkbox-position-left: 44px; --multi-choice-tile-grid-text-checkbox-position-right: 10px; --multi-choice-tile-grid-text-checkbox-position-top: 10px; --multi-choice-tile-checkbox-position-right: -1em; --multi-choice-tile-checkbox-position-top: -1em; --multi-choice-tile-checkbox-width: 2em; --multi-choice-tile-checkbox-height: 2em; --multi-choice-instruction-font-style: normal; --multi-choice-list-display: block; --multi-choice-list-button-padding: 0px 0px 0px 0px; --multi-choice-list-text-padding: 9px 30px 10px 70px; --multi-choice-list-display: block; --multi-choice-list-checkbox-positiion-top: 12px; --multi-choice-list-checkbox-positiion-left: 37px; --multi-choice-list-checkbox-width: 1.2em; --multi-choice-list-checkbox-height: 1.2em; --multi-choice-list-checkmark-position-top: 0em; --multi-choice-list-checkmark-position-left: 0.05em; --multi-choice-list-checkmark-font-size: 0.8em; --multi-choice-list-checkmark-text-shadow-width: 0px; --segmented-control-button-border: var(--border-primary); --segmented-control-button-border-color-hover: #c231a0; --segmented-control-button-border-selected: solid 4px #c231a0; --segmented-control-button-background-selected: var(--multi-choice-background-selected); --segmented-control-button-background-color-selected: #fde0ea; --segmented-control-button-box-shadow-selected: inset 0 0 0 2px #c231a0; --segmented-control-button-height: var(--multi-choice-button-height); --segmented-control-button-button-padding: 12px 36px; --segmented-control-button-border-radius: var(--border-radius-large); --segmented-control-button-offset-center-border: -4px; --segmented-control-button-font-color: var(--font-color-default); --segmented-control-button-font-color-hover: var(--font-color-default); --segmented-control-button-font-color-selected: var(--font-color-default); --segmented-control-button-font-weight: var(--multi-choice-font-weight); } [data-theme-id="early_elementary"] [data-component-type="input/text"], [data-theme-id="early_elementary"] .text-area-view { --text-input-border: solid 4px #b1b3b6; --text-input-border-focused: solid 4px #c231a0; --text-input-textarea-border-radius: 16px 16px 0 0; --text-input-textarea-box-shadow-focused: 0 0; --text-input-textarea-padding: 12px 40px 12px 24px; --text-input-textarea-display: block; --placeholder-color: rgba(35,31,32,0.5); --placeholder-icon-font-size: 30px; --placeholder-icon-color: #231f20; --placeholder-icon-margin: 8px; --placeholder-icon-positioning: 8px; --placeholder-icon-line-height: 0; --text-input-footer-border: solid 4px #ededee; --text-input-footer-border-radius: 0 0 16px 16px; --text-input-footer-background: #ededee; --text-input-submit-button-margin: 8px auto 8px 0; --text-input-submit-button-text-align: left; --text-input-footer-button-width: 64px; --text-input-footer-button-height: 60px; --text-input-footer-button-border: none; --text-input-footer-button-box-shadow-depressed: none; --text-input-footer-button-font-size: 183%; --image-thumbnail-area-margin-top: -4px; --image-thumbnail-area-border: 4px solid #b1b3b6; --image-thumbnail-area-border-focused: 4px solid #c231a0; --image-thumbnail-area-padding-focused: 0 5px 1px 5px; --uploaded-image-thumbnail-size: 150px; --uploaded-image-thumbnail-border-color: #d77027; --uploaded-image-thumbnail-border-radius: 8px; --uploaded-image-thumbnail-margin: 16px; --expand-image-button-background: #fff; --expand-image-button-color: #231f20; --expand-image-button-padding: 0; --expand-image-button-font-size: 55px; --thumb-stack-overlay-background: rgba(250,250,250,0.8); --remove-media-button-size: 32px; --remove-media-button-border: 3px solid #fff; --remove-media-button-box-shadow: 0 3px #ffdce5; --remove-media-button-box-shadow-depressed: none; --remove-media-button-background: #e71d32; --remove-media-button-background-hover: #c4192a; --remove-media-button-background-depressed: #8e0311; --remove-media-button-font-size: 16px; --remove-audio-button-positioning-right: 0; --remove-audio-button-positioning-top: -5px; --deleting-media-cancel-background: #fff; --deleting-media-cancel-border: solid 4px #b1b3b6; --deleting-media-cancel-border-hover: solid 4px #3f3b3c; --deleting-media-cancel-border-radius: 32px; --deleting-media-cancel-box-shadow: 0 4px #3f3b3c; --deleting-media-cancel-box-shadow-depressed: none; --deleting-media-cancel-text-decoration: none; --deleting-media-cancel-padding: 8px 26px; --deleting-media-cancel-margin-top: 30px; --deleting-media-font-size: 24px; --deleting-media-background: #ffdce5; --deleting-media-color: #231f20; --deleting-image-border: 1px solid #e71d32; --deleting-audio-height: 100px; --deleting-audio-padding: 0 25px; --deleting-audio-border: 4px solid #e71d32; --deleting-audio-border-radius: 70px; --deleting-audio-color: #3b3b3b; --deleting-audio-font-weight: 100px; --deleting-media-font-size: 24px; --dropdown-container-border-radius: 8px; --drop-down-button-color-depressed: #fff; --component-audio-player-wrapper-margin-top: -4px; --component-audio-player-wrapper-border: solid #b1b3b6 4px; --component-audio-player-wrapper-border-selected: solid #c231a0 4px; --component-audio-player-wrapper-padding: 10px 7px; --component-audio-player-uploading-animation: none; --component-audio-player-padding-top: 10px; --player-container-background: #ffdce5; --player-container-border-radius: 70px; --player-container-height: 100px; --player-container-outline-hover: solid 4px #e71d32; --small-play-pause-color: #fff; --small-play-pause-background: #e71d32; --small-play-pause-background-hover: #c4192a; --small-play-pause-background-depressed: #8e0311; --small-play-font-size: 48px; --small-pause-font-size: 28px; --small-play-pause-size: 58px; --small-play-pause-justify-content: center; --small-play-pause-border-radius: 50%; --small-play-pause-margin-left: 28px; --small-play-pause-box-shadow-bottom: 0 4px #8e0311; --small-play-pause-box-shadow-bottom-depressed: none; --duration-label-font-size: var(--font-size-default); --duration-label-margin-right: 15px; --duration-label-color: #8e0311; --scrubber-thumb-center-background: #e71d32; --scrubber-thumb-background-background: rgba(231,29,50,0.4); --scrubber-track-height: 4px; --scrubber-track-background: #e71d32; --scrubber-thumb-center-scale: scale(0.5, 0.5); --scrubber-height: 60px; --upload-spinner-container-size: 32px; --upload-spinner-container-border: solid 2px rgba(231,29,50,0.4); --upload-spinner-container-margin-right: 15px; --upload-icon-font-size: 24px; --upload-icon-color: #8e0311; --spinner-icon-font-size: 32px; --spinner-icon-position: 4px; --spinner-icon-color: #8e0311; } [data-theme-id="early_elementary"] [data-component-type="input/text"] .upload-image-footer-button, [data-theme-id="early_elementary"] .text-area-view .upload-image-footer-button { --text-input-footer-button-icon-color: #722800; --text-input-footer-button-background: #fbbb7b; --text-input-footer-button-background-hover: #e58a4b; --text-input-footer-button-shadow-bottom-color: #d77027; --text-input-footer-button-box-shadow-is-open: 0 0 0 6px #722800; --text-input-footer-button-icon-line-height: 55px; --text-input-footer-button-font-size: 140%; } [data-theme-id="early_elementary"] [data-component-type="input/text"] .microphone-footer-button, [data-theme-id="early_elementary"] .text-area-view .microphone-footer-button { --text-input-footer-button-icon-color: #8e0311; --text-input-footer-button-background: #ffdce5; --text-input-footer-button-background-hover: rgba(255,102,107,0.6); --text-input-footer-button-shadow-bottom-color: #ffafbe; --text-input-footer-button-box-shadow-is-open: 0 0 0 6px #8e0311; } [data-theme-id="early_elementary"] [data-component-type="input/text"] .text-edit-button, [data-theme-id="early_elementary"] .text-area-view .text-edit-button { --text-input-footer-button-icon-color: #333; --text-input-footer-button-background: #b3d869; --text-input-footer-button-background-hover: #8fc555; --text-input-footer-button-shadow-bottom-color: #6db240; --text-input-footer-button-box-shadow-active: 0 0 0 6px #10781b; --text-input-footer-button-icon-line-height: 60px; } [data-theme-id="early_elementary"] [data-component-type="input/text"] .math-edit-button, [data-theme-id="early_elementary"] .text-area-view .math-edit-button, [data-theme-id="early_elementary"] [data-component-type="input/text"] .dcg-toggle-keypad-button, [data-theme-id="early_elementary"] .text-area-view .dcg-toggle-keypad-button { --text-input-footer-button-icon-color: #d1e8f1; --text-input-footer-button-background: #006997; --text-input-footer-button-background-hover: #005980; --text-input-footer-button-background-depressed: #00334b; --text-input-footer-button-shadow-bottom-color: #32a3cf; --text-input-footer-button-box-shadow-active: 0 0 0 6px #00334b; --text-input-footer-button-sqrt-box-width: 0px; --text-input-footer-button-icon-line-height: 55px; } [data-theme-id="early_elementary"] [data-component-type="input/text"] .upload-image-container .dropdown-container, [data-theme-id="early_elementary"] .text-area-view .upload-image-container .dropdown-container { --dropdown-container-interior-padding: 0px; --dropdown-container-background: #fbbb7b; --dropdown-container-color: #722800; --upload-file-button-padding: 20px; --upload-file-button-border-radius: 20px; --dropdown-button-margin-bottom: 0px; --dropdown-button-text-decoration: none; --dropdown-button-background-hovered: #e58a4b; --dropdown-button-background-depressed: #722800; --dropdown-button-color-depressed: #fff; --dropdown-arrow-border: #fbbb7b; --dropdown-arrow-background: #fbbb7b; } [data-theme-id="early_elementary"] [data-component-type="input/text"] .upload-audio-dropdown-container .dropdown-container, [data-theme-id="early_elementary"] .text-area-view .upload-audio-dropdown-container .dropdown-container { --dropdown-button-text-decoration: none; --dropdown-container-background: #ffdce5; --dropdown-container-color: #8e0311; --dropdown-arrow-border: #ffdce5; --dropdown-arrow-background: #ffdce5; --dropdown-record-button-animation: none; --record-audio-start-icon-color: #fff; --record-audio-start-icon-color-recording-hover: #ffeef2; --record-audio-start-icon-color-recording-depressed: #ffdce5; --record-audio-start-icon-background: #e71d32; --record-audio-start-icon-background-hover: #c4192a; --record-audio-start-icon-background-depressed: #8e0311; --record-audio-start-icon-background-recording: #fff; --record-audio-start-icon-background-recording-hover: #ffeef2; --record-audio-start-icon-background-recording-depressed: #ffdce5; --record-audio-start-icon-border: solid 6px #e71d32; --record-audio-start-icon-border-hover: solid 6px #c4192a; --record-audio-start-icon-border-depressed: solid 6px #8e0311; --record-audio-start-icon-border-recording: solid 6px #fff; --record-audio-start-icon-border-recording-hover: solid 6px #ffeef2; --record-audio-start-icon-border-recording-depressed: solid 6px #ffdce5; --record-audio-start-icon-border-radius: 50%; --record-audio-start-icon-box-shadow: 0 4px #8e0311; --record-audio-start-icon-box-shadow-depressed: none; --record-audio-start-icon-box-shadow-recording: 0 4px #ffdce5; --record-audio-stop-icon-size: 20px; --record-audio-stop-icon-color: #e71d32; --audio-bubble-background: #fff; } [data-theme-id="early_elementary"].take-picture-modal { --picture-modal-background: #fbead6; --picture-modal-font-color-primary: #722800; --candidate-container-border: 1px solid #fbbb7b; --picture-modal-upload-image-button-background: #fbbb7b; --picture-modal-upload-image-button-bottom-box-shadow: 0 4px #d77027; --candidate-container-background: #fff; --edit-control-btn-size: 60px; --edit-control-btn-line-height: 70px; --edit-control-btn-border: none; --edit-control-btn-font-size: 35px; --close-modal-btn-position: -57px; --camera-btn-background: #ac5012; --camera-btn-background-hover: #924410; --camera-btn-background-depressed: #722800; --camera-btn-box-shadow: 0 4px #722800; --camera-btn-color: #fff; --camera-btn-border: none; --camera-btn-size: 116px; --camera-btn-icon-font-size: 90px; --camera-btn-icon-line-height: 110px; --camera-btn-icon-border: none; --video-container-position-top: 0px; --video-container-position-left: 40px; --video-container-position-right: 40px; --submit-upload-icon-font-size: 35px; --edit-control-btn-container-color: #231f20; } [data-theme-id="early_elementary"].take-picture-modal .edit-picture-rotate { --edit-control-btn-color: #005347; --edit-control-btn-color-depressed: #fff; --edit-control-btn-background: #def7f1; --edit-control-btn-background-hover: rgba(0,133,113,0.65); --edit-control-btn-background-depressed: #008571; --edit-control-btn-box-shadow: 0 4px #008571; } [data-theme-id="early_elementary"].take-picture-modal .edit-picture-contrast { --edit-control-btn-color: #000; --edit-control-btn-color-depressed: #fff; --edit-control-btn-color-contrast-on: #fff; --edit-control-btn-color-contrast-on-depressed: #000; --edit-control-btn-background: #fff; --edit-control-btn-background-hover: #b1b3b6; --edit-control-btn-background-depressed: #000; --edit-control-btn-background-contrast-on: #000; --edit-control-btn-background-contrast-on-hover: #b1b3b6; --edit-control-btn-background-contrast-on-depressed: #fff; --edit-control-btn-box-shadow: 0 4px #000; --edit-control-btn-box-shadow-depressed: none; } [data-theme-id="early_elementary"] [data-component-type="input/expression"], [data-theme-id="early_elementary"] .inline-math { --math-input-focused-border-width: 3px; --math-input-focused-box-shadow: none; --math-input-focused-margin: 0; --math-input-border-primary: solid 4px #b1b3b6; --math-input-border-radius: 16px 0 0 16px; --math-input-border-color-hover: #80b4f1; --math-input-border-color-focus: #0069e4; --math-input-keypad-button-box-shadow-focused: none; --math-input-font-style: normal; --math-input-error-font-size: 40px; --math-input-error-margin-top: 6px; --math-input-error-margin-right: 10px; --math-input-error-icon-color: #817715; --math-input-error-icon-background: #fff; --math-input-error-icon-padding: 0px; --math-input-error-icon-margin: 0px; --math-input-error-icon-border-radius: 50%; --math-input-spacing: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); --math-input-footer-background: transparent; --math-input-footer-border: transparent; --math-input-footer-padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; --math-submit-button-container-text-align: center; --math-submit-button-container-display: flex; --math-submit-button-container-justify: start; --math-submit-button-container-width: auto; --math-input-keypad-button-border: none; --math-input-keypad-button-width: 72px; --math-input-keypad-button-border-radius: 0 16px 16px 0; --math-input-keypad-button-background-color: #d1e8f1; --math-input-keypad-button-box-shadow: inset 0 -4px #32a3cf; --math-input-keypad-button-background-color-hover: #9bcfe2; --math-input-keypad-button-background-color-active: #006997; --math-input-keypad-button-icon-color: #006997; --math-input-keypad-button-icon-color-hover: #006997; --math-input-keypad-button-icon-color-pressed: #006997; --math-input-keypad-button-icon-color-active: #fff; --math-input-keypad-button-pressed-margin-top: 3px; --math-input-edit-button-pressed-margin-top: 3px; --math-input-edit-button-display: inline-block; --math-input-edit-button-active-box-shadow: none; } [data-theme-id="early_elementary"] .inline-math { --inline-math-border-radius: 16px; --inline-math-overall-height: 75px; --inline-math-padding: 8px 21px; --inline-math-keypad-button-margin: 0; --inline-math-text-align: center; --inline-math-empty-width: 100px; --inline-math-input-min-width: 58px; --inline-math-input-max-width: 115px; } [data-theme-id="early_elementary"] [data-component-type="table"] { --table-border-collapse: collapse; --table-cell-weight: 500; --table-cell-border: 1px solid #b0bed3; --table-cell-border-header: 1px solid #767676; --table-cell-font-size: 100%; --table-cell-outline-hover: 4px solid #80b4f1; --table-cell-outline-active: 4px solid #0069e4; --table-cell-outline-error: 4px solid #817715; --table-cell-outline-offset: -2px; --table-cell-icon-color: #0069e4; --table-cell-header-bottom-border-width: 1px; --table-cell-background-clip: padding-box !important; --table-cell-padding: 12.5px; --table-cell-no-padding: 0px; --table-cell-padding-right: 0px; --table-cell-padding-left: 0px; --table-cell-height-padded: 38.4px; --table-cell-new-row-padding: 12.5px; --table-outline: none; --table-cursor: pointer; --table-keypad-button-width: 55px; --table-keypad-button-height: 55px; --table-keypad-button-bottom: -55px; --table-keypad-button-border: none; --table-keypad-button-font-size: 100%; --table-keypad-button-icon-color: #d1e8f1; --table-keypad-button-icon-color-hover: #d1e8f1; --table-keypad-button-icon-line-height: 1em; --table-keypad-button-background: #006997; --table-keypad-button-background-hover: #005980; --table-keypad-button-background-depressed: #005980; --table-keypad-button-box-shadow-size: 3px; --table-keypad-button-box-shadow: 0 3px #32a3cf; --table-keypad-button-box-shadow-depressed: none; --table-cell-locked-background-color: #e8eef8; --table-column-header-cell-border-bottom: none; --table-column-header-cell-background-color: #dae3f0; --table-cell-edit-icon-font: 38.4px; --table-keyboard-button-color: #0069e4; --table-keyboard-button-color-active: #fff; --table-keyboard-button-background-color-active: #0069e4; --table-cell-add-new-background-color: #e8eef8; } [data-theme-id="early_elementary"] [data-component-type="sketch"] { --sketch-margin-top: 75px; --sketch-negative-margin-top: -75px; --sketch-playground-margin-bottom: 85px; --sketch-color-picker-width: 300px; --sketch-color-picker-left-position: -133px; --sketch-color-picker-narrow-left-position: -140px; --sketch-color-list-padding: 15px 25px; --sketch-left-controls-border: transparent; --sketch-left-controls-z-index: 0; --sketch-btn-active-background-color: #0069e4; --sketch-btn-active-color: #fff; --sketch-btn-active-box-shadow: 0 4px #004597; --sketch-left-controls-margin-hover: 0px; --sketch-btn-spacing: 5px; --sketch-color-picker-padding: 25px; --sketch-color-picker-background: #f1f5fb; --sketch-color-picker-left-margin: 0 0 0 12px; --sketch-color-picker-border: 2px solid #b0bed3; --sketch-color-picker-border-radius: 13.57px; --sketch-color-picker-option-size: 64px; --sketch-color-picker-selected-border: 3.2px solid #fff; --sketch-color-picker-default-border: 3.2px solid #77879d; --sketch-color-picker-selected-box-shadow: 0 0 0 4px #0069e4; --sketch-color-picker-hovered-box-shadow: 0 0 0 4px #80b4f1; --sketch-color-picker-arrow-border-width: 4px; --sketch-color-picker-arrow-border-color: transparent transparent #77787b; --sketch-color-picker-arrow-position: -7.5px; --sketch-color-picker-segmented-control-background: #fff; --sketch-text-box-padding: 25.5px 17px; --sketch-text-box-border: 4px solid #b1b3b6; --sketch-text-box-border-radius: 12.7px; --sketch-text-box-border-radius-active: 0px 8px 8px 0px; --sketch-text-box-box-shadow: 0px 4px 12px rgba(0,0,0,0.25); --sketch-text-box-box-shadow-active: none; --sketch-text-box-box-shadow-hover: 0px 10px 20px 0px rgba(0,0,0,0.08), 0px 6px 6px 0px rgba(0,0,0,0.09); --sketch-text-box-border-hover: 3px solid #fff; --sketch-text-box-border-active: 3px solid #fff; --sketch-text-box-border-invisible: 3px solid rgba(0,0,0,0); --sketch-text-box-dot-color: #0069e4; --sketch-text-box-dot-color-hover: #0069e4; --sketch-text-box-dot-color-pressed: #0069e4; --sketch-text-box-handle-width: 61px; --sketch-text-box-handle-padding: 0px 10px 0px 8px; --sketch-text-box-handle-color: #fff; --sketch-text-box-handle-background: #e6f1fe; --sketch-text-box-handle-background-draggable: #b3d2f7; --sketch-text-box-handle-line-height: 3px; --sketch-text-box-remove-color: #e71d32; --sketch-text-box-remove-background: #ffdce5; --sketch-text-box-remove-border: 2px solid #e71d32; --sketch-text-box-remove-color-hover: #e71d32; --sketch-text-box-remove-background-hover: #ffafbe; --sketch-text-box-remove-pressed: #8e0311; --sketch-text-box-remove-border-pressed: 2px solid #8e0311; --sketch-text-box-remove-border-radius: 100%; --sketch-text-box-remove-text-outline: 0; --sketch-text-box-remove-padding: 3px; --sketch-text-box-remove-font-size: 10px; --sketch-text-box-remove-button-position: -21px; --sketch-text-box-edit-view-min-width: 34px; --sketch-text-box-edit-view-line-height: 34px; --sketch-text-box-remove-display: flex; --sketch-text-box-left-border: none; --sketch-text-box-outline: 4px solid #0069e4; --sketch-text-box-outline-hover: 4px solid #80b4f1; --sketch-text-box-outline-offset: -7px; --sketch-text-box-font-weight: 400; --sketch-text-box-font-size-large: 100%; --sketch-text-box-font-size-middle: 100%; --sketch-text-box-line-height-large: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); --sketch-text-box-line-height-middle: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); --sketch-text-box-line-height-middle-small: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); --sketch-draggable-icon-font-size: 34px; --sketch-draggable-icon-font-color: #676767; --sketch-left-drag-handle-border: 3px solid #fff; --sketch-left-drag-handle-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.08), 0px 6px 6px 0px rgba(0,0,0,0.09); --sketch-resize-right-handle-dot-width: 16px; --sketch-resize-right-handle-dot-container-width: 50px; --sketch-canvas-border: 2px solid #b0bed3; --sketch-canvas-border-radius: 0px 0px 13.57px 13.57px; --sketh-text-box-remove-display: flex; --sketch-canvas-border: var(--border-component); --sketch-canvas-border-radius: 13.57px; --sketch-snapshot-camera-top: 5px; --sketch-snapshot-camera-right: 10px; --sketch-text-box-close-button-label-display: none; } [data-theme-id="early_elementary"] [data-component-type="sketch"] .sketch-controls .color-swatch-container .color-indicator { opacity: 1; -ms-filter: none; filter: none; } [data-theme-id="early_elementary"] [data-component-type="sketch"] .sketch-controls .color-selector .color-list:after { content: ""; position: absolute; top: -14px; left: 136px; border-width: 14px; border-top-width: 0; border-style: solid; border-color: transparent transparent var(--sketch-color-picker-background); line-height: 0; } [data-theme-id="early_elementary"] [data-component-type="sketch"] .sketch-controls .color-selector .color-list:before { content: ""; position: absolute; top: -16px; left: 134px; border-width: 16px; border-top-width: 0; border-style: solid; border-color: transparent transparent #b0bed3; line-height: 0; } [data-theme-id="early_elementary"] [data-component-type="sketch"] .sketch-controls .color-selector .color-list .color-option-wrapper .color-option { opacity: 1; -ms-filter: none; filter: none; } [data-theme-id="early_elementary"] [data-component-type="sketch"] .sketch-text-box.dcg-hovered:not(.is-selected):not(.is-dragging) .left-drag-handle:not(.dcg-hovered), [data-theme-id="early_elementary"] [data-component-type="sketch"] .sketch-text-box.dcg-hovered:not(.is-selected):not(.is-dragging) .remove-text-box:not(.dcg-hovered) { opacity: 1; -ms-filter: none; filter: none; } [data-theme-id="early_elementary"] [data-component-type="exhibit/text"] { --text-exhibit-container-display: flex; --text-exhibit-container-width: fit-content; --text-exhibit-view-flex-grow: 1; --text-exhibit-playground-margin-bottom: 0px; } .theme-k5 { --student-periscope-header-content-top: 6px; } /* src/js/activitybuilder/student/themes/k5.styl */ @font-face { font-family: 'quicksand'; font-style: normal; font-weight: 500; src: url("/fingerprinted/static/classroom-assets/font/quicksand-medium/quicksand-medium-2b6e7173c86feb9b5eef91cc4698e72a9562da3f-a.ttf") format('truetype'), local('quicksand'); } @font-face { font-family: 'quicksand'; font-style: normal; font-weight: 700; src: url("/fingerprinted/static/classroom-assets/font/quicksand-bold/quicksand-bold-ccb21f7268e5f5544794dcdd84697aa76e2c8e59-a.ttf") format('truetype'), local('quicksand'); } [data-theme-id="k5"] { font-family: var(--font-family); font-size: var(--font-size-default); font-weight: var(--font-weight-default); color: var(--font-color-default); --correctness-indicator-size: 1em; --correctness-gutter-size: -50px; --font-family: 'quicksand', sans-serif; --font-size-default: 24px; --font-size-medium: 32px; --font-size-large: 40px; --font-weight-default: 500; --font-weight-bold: 700; --font-color-default: #231f20; --note-font-family: "open-sans", sans-serif; --border-color-component: #b0bed3; --border-color-primary: #77787b; --border-width-primary: 4px; --border-primary: solid 4px var(--border-color-primary); --border-width-graphs: 2px; --border-component: solid var(--border-width-graphs) var(--border-color-component); --border-radius: 13.57px; --border-radius-large: 32px; --border-radius-medium: 16px; --border-radius-small: 8px; --box-shadow-width: 2px; --box-shadow-width-bottom: 4px; --overflow-hidden: hidden; --button-border-radius: 32px; --button-padding: 0px 36px; --button-margin-top-depressed: 2px; --button-icon-font-size: 30px; --button-icon-position: relative; --button-icon-top: 6px; --primary-button-color: #fff; --primary-button-background-default: #c231a0; --primary-button-background-hover: #0058bf; --primary-button-shadow-default: 0 4px #8f037c; --secondary-button-background-color: #fff; --secondary-button-color: #fff; --secondary-button-border-default: 4px solid #77787b; --secondary-button-border-color-hover: #3f3b3c; --secondary-button-box-shadow-default: #004597; --secondary-button-box-shadow-hover: #004597; --secondary-button-box-shadow-depressed: none; --secondary-button-text-decoration: none; --secondary-button-line-height: 52px; --secondary-button-pencil-icon-margin-right: 9px; --button-red-color: #fff; --button-red-background-color: #db2e00; --button-red-background-color-hover: #af2500; --button-red-background-color-active: #831c00; --notification-dot-background: #c231a0; --notification-dot-absolute-position-top: auto; --notification-dot-absolute-position-bottom: 0px; --notification-dot-absolute-position-left: auto; --notification-dot-absolute-position-right: 0px; --notification-dot-height: 38px; --notification-dot-width: 38px; --notification-dot-flex-shrink: 0; --modal-margin: 65px; --close-modal-btn-position: 10px; --close-modal-btn-padding: 0; --close-modal-btn-size: 58px; --close-modal-btn-opacity: 1; --close-modal-btn-color: #722800; --close-modal-btn-background: #fbead6; --close-modal-btn-background-hover: #fbbb7b; --close-modal-btn-background-depressed: #e58a4b; --image-gallery-nav-icon-color: #fbead6; --image-gallery-nav-icon-color-hover: #fbbb7b; --image-gallery-nav-icon-color-depressed: #e58a4b; --image-gallery-nav-icon-color-disabled: rgba(251,234,214,0.2); --image-count-info-positioning: 0; --image-count-info-color: #722800; --image-count-info-transform: none; --image-count-info-background: #fbead6; --image-count-info-width: 100%; --image-count-info-height: 60px; --image-count-info-text-align: center; --image-centering-container-padding: 40px 80px 120px; --image-lightbox-container-background: rgba(0,0,0,0.8); --image-modal-image-border: 8px solid #fbead6; --line-separator-color: #e0e0e0; --line-separator-height: 2px; --line-separator-background-image: linear-gradient(to right, #e0e0e0 70%, rgba(255,255,255,0) 0%); --line-separator-background-position: top; --line-separator-background-size: 12px 2px; --line-separator-background-repeat: repeat-x; --snapshot-camera-size: 32px; --snapshot-camera-font-size: 30px; --snapshot-camera-padding: 0; --snapshot-captured-positioning-right: 30px; --field-has-error-background-color: #feffe0; --field-has-error-border-color: #817715; --rectangle-btn-border-radius: 8px; --btn-border-width: 3px; --btn-size: 60px; --table-border-collapse-enabled: none; --student-activity-header-height: 70px; --student-activity-header-title-margin-left: 0; --student-activity-header-title-line-height: 1.2em; --student-activity-header-hamburger-top-margin: 5px; --student-activity-header-background: #fff; --student-activity-header-background-bg-light: #f1f5fb; --student-activity-header-center-content-margin: 0 auto; --student-periscope-header-content-top: 6px; --navigation-stepper-screen-count-width: 120px; --sandbox-header-btn-height: 40px; --sandbox-header-btn-line-height: 38px; --sandbox-header-nav-btn-height: 20px; --student-halo-button-border: 3px solid #bdbdbd; --student-halo-button-border-color-hovered: #999; --student-halo-button-background-color: transparent; --student-halo-button-background-color-depressed: rgba(250,250,250,0.5); --student-halo-button-background-color-selected: #0069e4; --student-halo-button-color: #0069e4; --student-halo-button-color-selected: #fff; --link-to-interactive-border-offset: 4px; --link-to-interactive-border-radius: 0 12px 0 0; --link-to-interactive-font-size: 16px; --link-to-interactive-padding: 0; --link-to-interactive-margin: 0; --link-to-interactive-top: -24px; --link-to-interactive-right: 0; --input-footer-border: solid 4px #ededee; --input-footer-border-radius: 0 0 16px 16px; --input-footer-background: #ededee; --keypad-background-color: #e8eef8; --keypad-border-top: initial; } [data-theme-id="k5"] ::-webkit-scrollbar { width: 32px !important; } [data-theme-id="k5"] ::-webkit-scrollbar-track { background: #f3f3f3 !important; } [data-theme-id="k5"] ::-webkit-scrollbar-thumb { background: #32a3cf !important; border-radius: 32px !important; border: 5px solid #f3f3f3 !important; } [data-theme-id="k5"] ::-webkit-scrollbar-thumb:hover { background: #2b8ab0 !important; border-radius: 32px !important; border: 5px solid #f3f3f3 !important; } [data-theme-id="k5"] ::-webkit-scrollbar-thumb:active { background: #006997 !important; border-radius: 32px !important; border: 5px solid #f3f3f3 !important; } [data-theme-id="k5"] ::-webkit-scrollbar-button { height: 32px; width: 35px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; position: relative; } [data-theme-id="k5"] ::-webkit-scrollbar-button:vertical:decrement { display: block; position: absolute; border-left: 16px solid #f3f3f3; border-right: 16px solid #f3f3f3; border-bottom: 16px solid #32a3cf; border-top: 16px solid #f3f3f3; border-top-left-radius: 16px; border-top-right-radius: 16px; top: -4px; } [data-theme-id="k5"] ::-webkit-scrollbar-button:hover:vertical:decrement { border-bottom: 16px solid #2b8ab0; } [data-theme-id="k5"] ::-webkit-scrollbar-button:active:vertical:decrement { border-bottom: 16px solid #006997; } [data-theme-id="k5"] ::-webkit-scrollbar-button:vertical:increment { display: block; border-left: 16px solid #f3f3f3; border-right: 16px solid #f3f3f3; border-top: 16px solid #32a3cf; border-bottom: 16px solid #f3f3f3; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } [data-theme-id="k5"] ::-webkit-scrollbar-button:hover:vertical:increment { border-top: 16px solid #2b8ab0; } [data-theme-id="k5"] ::-webkit-scrollbar-button:active:vertical:increment { border-top: 16px solid #006997; } [data-theme-id="k5"] ::-webkit-scrollbar-button:vertical:start:increment, [data-theme-id="k5"] ::-webkit-scrollbar-button:vertical:end:decrement { display: none; } [data-theme-id="k5"] .dcg-cardsort-card::-webkit-scrollbar { height: 32px !important; } [data-theme-id="k5"] .dcg-cardsort-card::-webkit-scrollbar-track { border-radius: 32px !important; } [data-theme-id="k5"] .user-name-container { --student-name-font-weight: 700; } [data-theme-id="k5"] .navigation-stepper { --slide-step-counter-font-weight: 500; } [data-theme-id="k5"] .nav-stepper-btn { --button-border-radius: 8px; --secondary-button-border-default: 3px solid #ccc; --secondary-button-border-color-hover: #999; } [data-theme-id="k5"] .nav-stepper-contents { --nav-stepper-contents-padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem); --nav-stepper-contents-padding-sm: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } [data-theme-id="k5"] .edit-picture-container .confirm-candidate { --primary-button-color: #722800; --primary-button-background-default: #fbbb7b; --primary-button-background-hover: #e58a4b; --primary-button-shadow-default: 0 4px #d77027; } [data-theme-id="k5"] [data-component-type="reorder"] { --listbox-container-margin-bottom: 14px; --reorder-item-flex-grow: 0; --reorder-item-margin: 16px 0px 0px; --reorder-item-box-shadow: 0 4px 12px 0 rgba(0,0,0,0.25); --reorder-item-border: solid 4px #fff; --reorder-item-width: 480px; --reorder-item-min-height: 64px; --reorder-item-height: fit-content; --reorder-item-background-color: #fff; --reorder-item-line-height: normal; --reorder-item-font-weight: var(--font-weight-bold); --reorder-item-font-style: normal; --reorder-item-font-stretch: normal; --reorder-item-text-align: left; --reorder-item-letter-spacing: normal; --reorder-item-hover-border-color: #c231a0; --reorder-item-handle-color: #b1b3b6; --reorder-item-handle-hover-color: #c231a0; --item-content-align-self: center; --reorder-item-placeholder-border: dashed 4px #b1b3b6; --reorder-item-placeholder-background-color: #e8e9ea; --reorder-item-placeholder-margin-top: 16px; } [data-theme-id="k5"] [data-component-type="input/graph"], [data-theme-id="k5"] .graph-snapshot { --graph-border: var(--border-component); --graph-scrubber-border-top: 2px solid #e8e9ea; --graph-scrubber-button-size: 16px; } [data-theme-id="k5"] [data-component-type="exhibit/text"] { --note-font-family: "open-sans", sans-serif; --note-font-weight: 400; --font-color-default: #3b3b3b; color: var(--font-color-default); } [data-theme-id="k5"] [data-component-type="exhibit/image"] { --image-border: var(--border-component); --image-border-hover: solid 8px #000; --image-border-depressed: solid 8px #000; --image-fullscreen-icon-background-color: #fff; --image-fullscreen-icon-border: var(--border-primary); --image-fullscreen-icon-border-hover: solid 4px #000; --image-fullscreen-icon-border-radius: 50%; --image-fullscreen-icon-color: #77787b; --image-fullscreen-icon-color-hover: #000; --image-fullscreen-icon-color-depressed: #000; --image-fullscreen-icon-padding: 6px; --image-fullscreen-icon-right: 12px; --image-fullscreen-icon-top: 12px; --image-fullscreen-icon-width: 44px; --image-fullscreen-icon-height: 44px; } [data-theme-id="k5"] [data-component-type="multiple-choice"] { --text-input-submit-button-text-align: left; } [data-theme-id="k5"] [data-component-type="multiple-choice"], [data-theme-id="k5"] .choice-snapshot { --multi-choice-font-weight: var(--font-weight-bold); --multi-choice-wrapper-margin-bottom: 30px; --multi-choice-border-color-depressed: #c231a0; --multi-choice-border-color-selected: rgba(0,0,0,0); --multi-choice-border-color-checked: #c231a0; --multi-choice-border-color-submitted: #c231a0; --multi-choice-box-border: 1px solid rgba(0,0,0,0); --multi-choice-box-border-selected: 1px solid rgba(0,0,0,0); --multi-choice-box-border-hover: 1px solid rgba(0,0,0,0); --multi-choice-box-border-depressed: 1px solid rgba(0,0,0,0); --multi-choice-box-shadow: 0 0.25em 0 #b3d2f7; --multi-choice-box-shadow-selected: 0 0.25em 0 #004597; --multi-choice-box-shadow-depressed: 0 0.125em 0 #0069e4; --multi-choice-box-shadow-selected-focus-visible: 0 0 0 0.125em #fff, 0 0 0 0.3125em var(--amp-focus-color, #9c0d63), 0 0.25em 0 #80b4f1; --multi-choice-box-shadow-bottom-color: #231f20; --multi-choice-box-shadow-bottom-color-hover: #8f037c; --multi-choice-box-shadow-bottom-hover: 0 4px #8f037c; --multi-choice-box-padding-bottom: 8px; --multi-choice-background-selected: #0069e4; --multi-choice-background-checked: #fde0ea; --multi-choice-background-submitted: #0069e4; --multi-choice-box-selected-hover-background: #0058bf; --multi-choice-button-gap: 17px; --multi-choice-button-height: 60px; --multi-choice-button-fraction-vertical-align: -0.4em; --multi-choice-checkmark-border-color-selected: #0069e4; --multi-choice-checkmark-border-color-depressed: #0069e4; --multi-choice-checkmark-color: transparent; --multi-choice-checkmark-color-hover: transparent; --multi-choice-checkmark-color-depressed: #fff; --multi-choice-checkmark-color-selected: #fff; --multi-choice-checkmark-color-checked: #fff; --multi-choice-checkmark-color-submitted: #fff; --multi-choice-checkbox-background-color: #fff; --multi-choice-checkbox-background-hover: #fff; --multi-choice-checkbox-background-depressed: #0069e4; --multi-choice-checkbox-background-selected: #0069e4; --multi-choice-checkbox-border-radius: 4px; --multi-choice-basic-padding: 0.3875em 1em; --multi-choice-basic-border-radius: 12.7px; --multi-choice-basic-text-align: left; --multi-choice-basic-justify-content: start; --multi-choice-tile-checkbox-border: 3px solid #b3d2f7; --multi-choice-tile-font-color: #3b3b3b; --multi-choice-tile-font-weight: 500; --multi-choice-tile-line-height: 1.6em; --multi-choice-tile-card-spacing: 8.5px; --multi-choice-tile-gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); --multi-choice-tile-grid-margin-unit: 0; --multi-choice-tile-grid-text-position-left: 0px; --multi-choice-tile-grid-text-position-right: 0px; --multi-choice-tile-grid-text-position-top: 0px; --multi-choice-tile-grid-text-checkbox-position-left: 44px; --multi-choice-tile-grid-text-checkbox-position-right: 10px; --multi-choice-tile-grid-text-checkbox-position-top: 10px; --multi-choice-tile-checkbox-position-right: -1em; --multi-choice-tile-checkbox-position-top: -1em; --multi-choice-tile-checkbox-width: 2em; --multi-choice-tile-checkbox-height: 2em; --multi-choice-instruction-font-style: normal; --multi-choice-list-display: block; --multi-choice-list-button-padding: 0px 0px 0px 0px; --multi-choice-list-text-padding: 9px 30px 10px 70px; --multi-choice-list-display: block; --multi-choice-list-checkbox-positiion-top: 12px; --multi-choice-list-checkbox-positiion-left: 37px; --multi-choice-list-checkbox-width: 1.2em; --multi-choice-list-checkbox-height: 1.2em; --multi-choice-list-checkmark-position-top: 0em; --multi-choice-list-checkmark-position-left: 0.05em; --multi-choice-list-checkmark-font-size: 0.8em; --multi-choice-list-checkmark-text-shadow-width: 0px; --segmented-control-button-border: var(--border-primary); --segmented-control-button-border-color-hover: #c231a0; --segmented-control-button-border-selected: solid 4px #c231a0; --segmented-control-button-background-selected: #fde0ea; --segmented-control-button-background-color-selected: #fde0ea; --segmented-control-button-box-shadow-selected: inset 0 0 0 2px #c231a0; --segmented-control-button-height: var(--multi-choice-button-height); --segmented-control-button-button-padding: 12px 36px; --segmented-control-button-border-radius: var(--border-radius-large); --segmented-control-button-offset-center-border: -4px; --segmented-control-button-font-color: var(--font-color-default); --segmented-control-button-font-color-hover: var(--font-color-default); --segmented-control-button-font-color-selected: var(--font-color-default); --segmented-control-button-font-weight: var(--multi-choice-font-weight); } [data-theme-id="k5"] [data-component-type="input/text"], [data-theme-id="k5"] .text-area-view { --text-input-border: solid 4px #b1b3b6; --text-input-border-focused: solid 4px #c231a0; --text-input-textarea-border-radius: 16px 16px 0 0; --text-input-textarea-padding: 12px 40px 12px 24px; --text-input-textarea-display: block; --placeholder-color: rgba(35,31,32,0.5); --placeholder-icon-font-size: 30px; --placeholder-icon-color: #231f20; --placeholder-icon-margin: 8px; --placeholder-icon-positioning: 8px; --placeholder-icon-line-height: 0; --text-input-footer-button-width: 64px; --text-input-footer-button-height: 60px; --text-input-footer-button-border: none; --text-input-footer-button-box-shadow-depressed: none; --text-input-footer-button-font-size: 183%; --text-input-submit-button-text-align: left; --image-thumbnail-area-margin-top: -4px; --image-thumbnail-area-border: 4px solid #b1b3b6; --image-thumbnail-area-border-focused: 4px solid #c231a0; --image-thumbnail-area-padding-focused: 0 5px 1px 5px; --uploaded-image-thumbnail-size: 150px; --uploaded-image-thumbnail-border-color: #d77027; --uploaded-image-thumbnail-border-radius: 8px; --uploaded-image-thumbnail-margin: 16px; --remove-media-button-size: 32px; --remove-media-button-border: 3px solid #fff; --remove-media-button-box-shadow: 0 3px #ffdce5; --remove-media-button-box-shadow-depressed: none; --remove-media-button-background: #e71d32; --remove-media-button-background-hover: #c4192a; --remove-media-button-background-depressed: #8e0311; --remove-media-button-font-size: 24px; --remove-media-button-font-weight: 600; --remove-audio-button-positioning-right: 0; --remove-audio-button-positioning-top: -5px; --deleting-media-cancel-background: #fff; --deleting-media-cancel-border: solid 4px #b1b3b6; --deleting-media-cancel-border-hover: solid 4px #3f3b3c; --deleting-media-cancel-border-radius: 32px; --deleting-media-cancel-box-shadow: 0 4px #3f3b3c; --deleting-media-cancel-box-shadow-depressed: none; --deleting-media-cancel-text-decoration: none; --deleting-media-cancel-padding: 8px 26px; --deleting-media-cancel-margin-top: 30px; --deleting-media-font-size: 24px; --deleting-media-background: #ffdce5; --deleting-media-color: #231f20; --deleting-image-border: 1px solid #e71d32; --deleting-audio-height: 100px; --deleting-audio-padding: 0 25px; --deleting-audio-border: 4px solid #e71d32; --deleting-audio-border-radius: 70px; --deleting-audio-color: #3b3b3b; --deleting-audio-font-weight: 100px; --deleting-media-font-size: 24px; --dropdown-container-border-radius: 8px; --dropdown-container-padding: 0; --dropdown-container-border-radius: 8px; --drop-down-button-color-depressed: #fff; --component-audio-player-wrapper-margin-top: -4px; --component-audio-player-wrapper-border: solid #b1b3b6 4px; --component-audio-player-wrapper-border-selected: solid #c231a0 4px; --component-audio-player-wrapper-padding: 10px 7px; --component-audio-player-wrapper-height: 140px; --component-audio-player-uploading-animation: none; --component-audio-player-padding-top: 10px; --component-audio-player-padding-right: 0; --player-container-background: #ffdce5; --player-container-border-radius: 70px; --player-container-height: 100px; --player-container-outline-hover: solid 4px #e71d32; --small-play-pause-color: #fff; --small-play-pause-background: #e71d32; --small-play-pause-background-hover: #c4192a; --small-play-pause-background-depressed: #8e0311; --small-play-font-size: 48px; --small-pause-font-size: 28px; --small-play-pause-size: 58px; --small-play-pause-justify-content: center; --small-play-pause-border-radius: 50%; --small-play-pause-margin-left: 28px; --small-play-pause-box-shadow-bottom: 0 4px #8e0311; --small-play-pause-box-shadow-bottom-depressed: none; --duration-label-font-size: var(--font-size-default); --duration-label-margin-right: 15px; --duration-label-color: #8e0311; --scrubber-thumb-center-background: #e71d32; --scrubber-thumb-background-background: rgba(231,29,50,0.4); --scrubber-track-height: 4px; --scrubber-track-background: #e71d32; --scrubber-thumb-center-scale: scale(0.5, 0.5); --scrubber-height: 60px; --upload-spinner-container-size: 32px; --upload-spinner-container-border: solid 2px rgba(231,29,50,0.4); --upload-spinner-container-margin-right: 15px; --upload-icon-font-size: 24px; --upload-icon-color: #8e0311; --spinner-icon-font-size: 32px; --spinner-icon-position: 4px; --spinner-icon-color: #8e0311; } [data-theme-id="k5"] [data-component-type="input/text"] .upload-image-footer-button, [data-theme-id="k5"] .text-area-view .upload-image-footer-button { --text-input-footer-button-icon-color: #722800; --text-input-footer-button-background: #fbbb7b; --text-input-footer-button-background-hover: #e58a4b; --text-input-footer-button-shadow-bottom-color: #d77027; --text-input-footer-button-box-shadow-is-open: 0 0 0 6px #722800; --text-input-footer-button-icon-line-height: 55px; --text-input-footer-button-font-size: 140%; } [data-theme-id="k5"] [data-component-type="input/text"] .microphone-footer-button, [data-theme-id="k5"] .text-area-view .microphone-footer-button { --text-input-footer-button-icon-color: #8e0311; --text-input-footer-button-background: #ffdce5; --text-input-footer-button-background-hover: rgba(255,102,107,0.6); --text-input-footer-button-shadow-bottom-color: #ffafbe; --text-input-footer-button-box-shadow-is-open: 0 0 0 6px #8e0311; } [data-theme-id="k5"] [data-component-type="input/text"] .text-edit-button, [data-theme-id="k5"] .text-area-view .text-edit-button { --text-input-footer-button-icon-color: #333; --text-input-footer-button-background: #b3d869; --text-input-footer-button-background-hover: #8fc555; --text-input-footer-button-shadow-bottom-color: #6db240; --text-input-footer-button-box-shadow-active: 0 0 0 6px #10781b; --text-input-footer-button-icon-line-height: 60px; } [data-theme-id="k5"] [data-component-type="input/text"] .math-edit-button, [data-theme-id="k5"] .text-area-view .math-edit-button, [data-theme-id="k5"] [data-component-type="input/text"] .dcg-toggle-keypad-button, [data-theme-id="k5"] .text-area-view .dcg-toggle-keypad-button { --text-input-footer-button-icon-color: #d1e8f1; --text-input-footer-button-background: #006997; --text-input-footer-button-background-hover: #005980; --text-input-footer-button-background-depressed: #00334b; --text-input-footer-button-shadow-bottom-color: #32a3cf; --text-input-footer-button-box-shadow-active: 0 0 0 6px #00334b; --text-input-footer-button-sqrt-box-width: 0px; --text-input-footer-button-icon-line-height: 55px; --text-input-footer-button-padding: 0; } [data-theme-id="k5"] [data-component-type="input/text"] .upload-image-container .dropdown-container, [data-theme-id="k5"] .text-area-view .upload-image-container .dropdown-container { --dropdown-container-interior-padding: 0px; --dropdown-container-background: #fbbb7b; --dropdown-container-color: #722800; --upload-file-button-padding: 20px; --upload-file-button-border-radius: 20px; --dropdown-button-margin-bottom: 0px; --dropdown-button-text-decoration: none; --dropdown-button-background-hovered: #e58a4b; --dropdown-button-background-depressed: #722800; --dropdown-button-color-depressed: #fff; --dropdown-arrow-border: #fbbb7b; --dropdown-arrow-background: #fbbb7b; } [data-theme-id="k5"] [data-component-type="input/text"] .upload-audio-dropdown-container .dropdown-container, [data-theme-id="k5"] .text-area-view .upload-audio-dropdown-container .dropdown-container { --dropdown-button-text-decoration: none; --dropdown-container-background: #ffdce5; --dropdown-container-color: #8e0311; --dropdown-arrow-border: #ffdce5; --dropdown-arrow-background: #ffdce5; --dropdown-record-button-animation: none; --record-audio-start-icon-color: #fff; --record-audio-start-icon-color-recording-hover: #ffeef2; --record-audio-start-icon-color-recording-depressed: #ffdce5; --record-audio-start-icon-background: #e71d32; --record-audio-start-icon-background-hover: #c4192a; --record-audio-start-icon-background-depressed: #8e0311; --record-audio-start-icon-background-recording: #fff; --record-audio-start-icon-background-recording-hover: #ffeef2; --record-audio-start-icon-background-recording-depressed: #ffdce5; --record-audio-start-icon-border: solid 6px #e71d32; --record-audio-start-icon-border-hover: solid 6px #c4192a; --record-audio-start-icon-border-depressed: solid 6px #8e0311; --record-audio-start-icon-border-recording: solid 6px #fff; --record-audio-start-icon-border-recording-hover: solid 6px #ffeef2; --record-audio-start-icon-border-recording-depressed: solid 6px #ffdce5; --record-audio-start-icon-border-radius: 50%; --record-audio-start-icon-box-shadow: 0 4px #8e0311; --record-audio-start-icon-box-shadow-depressed: none; --record-audio-start-icon-box-shadow-recording: 0 4px #ffdce5; --record-audio-stop-icon-size: 20px; --record-audio-stop-icon-color: #e71d32; --audio-bubble-background: #fff; } [data-theme-id="k5"].take-picture-modal { --picture-modal-background: #fbead6; --picture-modal-font-color-primary: #722800; --candidate-container-border: 1px solid #fbbb7b; --picture-modal-upload-image-button-background: #fbbb7b; --picture-modal-upload-image-button-bottom-box-shadow: 0 4px #d77027; --candidate-container-background: #fff; --edit-control-btn-size: 60px; --edit-control-btn-line-height: 70px; --edit-control-btn-border: none; --edit-control-btn-font-size: 35px; --close-modal-btn-position: -57px; --camera-btn-background: #ac5012; --camera-btn-background-hover: #924410; --camera-btn-background-depressed: #722800; --camera-btn-box-shadow: 0 4px #722800; --camera-btn-color: #fff; --camera-btn-border: none; --camera-btn-size: 116px; --camera-btn-icon-font-size: 90px; --camera-btn-icon-line-height: 110px; --camera-btn-icon-border: none; --video-container-position-top: 0px; --video-container-position-left: 40px; --video-container-position-right: 40px; --submit-upload-icon-font-size: 35px; --edit-control-btn-container-color: #231f20; } [data-theme-id="k5"].take-picture-modal .rotate-btn { --edit-control-btn-color: #005347; --edit-control-btn-color-depressed: #fff; --edit-control-btn-background: #def7f1; --edit-control-btn-background-hover: rgba(0,133,113,0.65); --edit-control-btn-background-depressed: #008571; --edit-control-btn-box-shadow: 0 4px #008571; } [data-theme-id="k5"].take-picture-modal .contrast-btn { --edit-control-btn-color: #000; --edit-control-btn-color-depressed: #fff; --edit-control-btn-color-contrast-on: #fff; --edit-control-btn-color-contrast-on-depressed: #000; --edit-control-btn-background: #fff; --edit-control-btn-background-hover: #b1b3b6; --edit-control-btn-background-depressed: #000; --edit-control-btn-background-contrast-on: #000; --edit-control-btn-background-contrast-on-hover: #b1b3b6; --edit-control-btn-background-contrast-on-depressed: #fff; --edit-control-btn-box-shadow: 0 4px #000; --edit-control-btn-box-shadow-depressed: none; } [data-theme-id="k5"] [data-component-type="input/expression"], [data-theme-id="k5"] .inline-math { --math-input-focused-border-width: 4px; --math-input-focused-box-shadow: none; --math-input-border-primary: solid 4px #b1b3b6; --math-input-border-radius: 16px 0 0 16px; --math-input-border-color-hover: rgba(63,59,60,0.7); --math-input-border-color-focus: #0069e4; --math-input-keypad-button-box-shadow-focused: none; --math-input-font-style: normal; --math-input-error-font-size: 40px; --math-input-error-margin-top: 6px; --math-input-error-margin-right: 10px; --math-input-error-icon-color: #817715; --math-input-error-icon-background: #fff; --math-input-error-icon-padding: 0px; --math-input-error-icon-margin: 0px; --math-input-error-icon-border-radius: 50%; --math-input-spacing: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); --math-input-footer-background: transparent; --math-input-footer-border: transparent; --math-input-footer-padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; --math-submit-button-container-text-align: center; --math-submit-button-container-display: flex; --math-submit-button-container-justify: start; --math-submit-button-container-width: auto; --math-input-keypad-button-border: none; --math-input-keypad-button-width: 72px; --math-input-keypad-button-border-radius: 0 16px 16px 0; --math-input-keypad-button-background-color: #d1e8f1; --math-input-keypad-button-box-shadow: inset 0 -4px #32a3cf; --math-input-keypad-button-background-color-hover: #9bcfe2; --math-input-keypad-button-background-color-active: #006997; --math-input-keypad-button-icon-color: #006997; --math-input-keypad-button-icon-color-hover: #006997; --math-input-keypad-button-icon-color-pressed: #006997; --math-input-keypad-button-icon-color-active: #fff; --math-input-keypad-button-pressed-margin-top: 3px; --math-input-edit-button-pressed-margin-top: 3px; --math-input-edit-button-display: inline-block; --math-input-edit-button-active-box-shadow: none; --keypad-button-background-hovered: #dae3f0; --keypad-button-color-hovered: #0058bf; --keypad-button-border-color-hovered: transparent; --keypad-button-background-active: #b0bed3; --keypad-button-color-active: #002c64; --keypad-button-border-color-active: transparent; } [data-theme-id="k5"] .inline-math { --inline-math-border-radius: 16px; --inline-math-overall-height: 85px; --inline-math-padding: 13px; --inline-math-keypad-button-margin: 0 0 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); --inline-math-text-align: center; --inline-math-empty-width: 85px; --inline-math-input-min-width: 59px; --inline-math-input-max-width: 85px; } [data-theme-id="k5"] [data-component-type="table"] { --table-border-collapse: collapse; --table-cell-weight: 500; --table-cell-border: 1px solid #b0bed3; --table-cell-border-header: 1px solid #767676; --table-cell-font-size: 100%; --table-cell-outline-hover: 4px solid #80b4f1; --table-cell-outline-active: 4px solid #0069e4; --table-cell-outline-error: 4px solid #817715; --table-cell-outline-offset: -2px; --table-cell-icon-color: #0069e4; --table-cell-header-bottom-border-width: 1px; --table-cell-background-clip: padding-box !important; --table-cell-padding: 17px; --table-cell-no-padding: 0px; --table-cell-padding-right: 0px; --table-cell-padding-left: 0px; --table-cell-height-padded: 34px; --table-cell-new-row-padding: 13.5px; --table-outline: none; --table-cursor: pointer; --table-keypad-button-width: 50px; --table-keypad-button-height: 50px; --table-keypad-button-bottom: -55px; --table-keypad-button-border: none; --table-keypad-button-font-size: 100%; --table-keypad-button-icon-color: #d1e8f1; --table-keypad-button-icon-line-height: 1.2em; --table-keypad-button-icon-color-hover: #d1e8f1; --table-keypad-button-background: #006997; --table-keypad-button-background-hover: #005980; --table-keypad-button-background-depressed: #005980; --table-keypad-button-box-shadow-size: 3px; --table-keypad-button-box-shadow: 0 3px #32a3cf; --table-keypad-button-box-shadow-depressed: none; --table-cell-locked-background-color: #e8eef8; --table-column-header-cell-border-bottom: none; --table-column-header-cell-background-color: #dae3f0; --table-cell-edit-icon-font: 34px; --table-keyboard-button-color: #0069e4; --table-keyboard-button-color-active: #fff; --table-keyboard-button-background-color-active: #0069e4; --table-cell-add-new-background-color: #e8eef8; } [data-theme-id="k5"] [data-component-type="sketch"] { --sketch-color-picker-width: 243px; --sketch-color-picker-left-position: -105px; --sketch-color-picker-narrow-left-position: -110px; --sketch-color-list-padding: 10px 17px; --sketch-controls-border-radius: 13.57px; --sketch-left-controls-border: transparent; --sketch-margin-top: 75px; --sketch-negative-margin-top: -75px; --sketch-playground-margin-bottom: 85px; --sketch-left-controls-z-index: 0; --sketch-right-controls-buttons-border-radius: 0; --sketch-left-controls-margin-hover: 0px; --sketch-btn-spacing: 5px; --sketch-btn-active-background-color: #0069e4; --sketch-btn-active-color: #fff; --sketch-btn-active-box-shadow: 0 0.25em #004597; --sketch-color-picker-padding: 17px; --sketch-color-picker-background: #f1f5fb; --sketch-color-picker-left-margin: 0 0 0 12px; --sketch-color-picker-border: 2px solid #b0bed3; --sketch-color-picker-border-radius: 13.57px; --sketch-color-picker-option-size: 55px; --sketch-color-picker-selected-border: 3.2px solid #fff; --sketch-color-picker-default-border: 3.2px solid #77879d; --sketch-color-picker-selected-box-shadow: 0 0 0 4px #0069e4; --sketch-color-picker-hovered-box-shadow: 0 0 0 4px #80b4f1; --sketch-color-picker-arrow-border-width: 4px; --sketch-color-picker-arrow-border-color: transparent transparent #77787b; --sketch-color-picker-arrow-position: -7.5px; --sketch-color-picker-segmented-control-background: #fff; --sketch-color-picker-segmented-control-padding: 17px 0px 0px; --sketch-text-box-padding: 25.5px 17px; --sketch-text-box-border: 4px solid #b1b3b6; --sketch-text-box-border-radius: 12.7px; --sketch-text-box-border-radius-active: 0px 8px 8px 0px; --sketch-text-box-box-shadow: 0px 4px 12px rgba(0,0,0,0.25); --sketch-text-box-box-shadow-active: none; --sketch-text-box-box-shadow-hover: 0px 10px 20px 0px rgba(0,0,0,0.08), 0px 6px 6px 0px rgba(0,0,0,0.09); --sketch-text-box-border-hover: 3px solid #fff; --sketch-text-box-border-active: 3px solid #fff; --sketch-text-box-border-invisible: 3px solid rgba(0,0,0,0); --sketch-text-box-dot-color: #0069e4; --sketch-text-box-dot-color-hover: #0069e4; --sketch-text-box-dot-color-pressed: #0069e4; --sketch-text-box-handle-width: 61px; --sketch-text-box-handle-padding: 0px 10px 0px 8px; --sketch-text-box-handle-color: #fff; --sketch-text-box-handle-background: #e6f1fe; --sketch-text-box-handle-background-draggable: #b3d2f7; --sketch-text-box-handle-line-height: 3px; --sketch-text-box-remove-color: #e71d32; --sketch-text-box-remove-background: #ffdce5; --sketch-text-box-remove-border: 2px solid #e71d32; --sketch-text-box-remove-color-hover: #e71d32; --sketch-text-box-remove-background-hover: #ffafbe; --sketch-text-box-remove-pressed: #8e0311; --sketch-text-box-remove-border-pressed: 2px solid #8e0311; --sketch-text-box-remove-border-radius: 100%; --sketch-text-box-remove-text-outline: 0; --sketch-text-box-remove-padding: 3px; --sketch-text-box-remove-font-size: 10px; --sketch-text-box-remove-button-position: -21px; --sketch-text-box-edit-view-min-width: 34px; --sketch-text-box-edit-view-line-height: 34px; --sketch-text-box-remove-display: flex; --sketch-text-box-left-border: none; --sketch-text-box-outline: 4px solid #0069e4; --sketch-text-box-outline-hover: 4px solid #80b4f1; --sketch-text-box-outline-offset: -7px; --sketch-text-box-font-weight: 400; --sketch-text-box-font-size-large: 100%; --sketch-text-box-font-size-middle: 100%; --sketch-text-box-line-height-large: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); --sketch-text-box-line-height-middle: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); --sketch-text-box-line-height-middle-small: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); --sketch-draggable-icon-font-size: 34px; --sketch-draggable-icon-font-color: #676767; --sketch-left-drag-handle-border: 3px solid #fff; --sketch-left-drag-handle-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.08), 0px 6px 6px 0px rgba(0,0,0,0.09); --sketch-resize-right-handle-dot-width: 16px; --sketch-resize-right-handle-dot-container-width: 50px; --sketch-canvas-border: 2px solid #b0bed3; --sketch-canvas-border-radius: 0px 0px 13.57px 13.57px; --sketh-text-box-remove-display: flex; --sketch-canvas-border: 2px solid #b0bed3; --sketch-canvas-border-radius: 13.57px; --sketch-snapshot-camera-top: 5px; --sketch-snapshot-camera-right: 10px; --sketch-text-box-close-button-label-display: none; } [data-theme-id="k5"] [data-component-type="sketch"] .sketch-controls .color-swatch-container .color-indicator { opacity: 1; -ms-filter: none; filter: none; } [data-theme-id="k5"] [data-component-type="sketch"] .sketch-controls .color-selector .color-list:after { content: ""; position: absolute; top: -14px; left: 107.5px; border-width: 14px; border-top-width: 0; border-style: solid; border-color: transparent transparent var(--sketch-color-picker-background); line-height: 0; } [data-theme-id="k5"] [data-component-type="sketch"] .sketch-controls .color-selector .color-list:before { content: ""; position: absolute; top: -16px; left: 105.5px; border-width: 16px; border-top-width: 0; border-style: solid; border-color: transparent transparent #b0bed3; line-height: 0; } [data-theme-id="k5"] [data-component-type="sketch"] .sketch-controls .color-selector .color-list .color-option-wrapper .color-option { opacity: 1; -ms-filter: none; filter: none; } [data-theme-id="k5"] [data-component-type="sketch"] .sketch-text-box.dcg-hovered:not(.is-selected):not(.is-dragging) .left-drag-handle:not(.dcg-hovered), [data-theme-id="k5"] [data-component-type="sketch"] .sketch-text-box.dcg-hovered:not(.is-selected):not(.is-dragging) .remove-text-box:not(.dcg-hovered) { opacity: 1; -ms-filter: none; filter: none; } [data-theme-id="k5"] [data-component-type="exhibit/text"] { --text-exhibit-container-display: flex; --text-exhibit-container-width: fit-content; --text-exhibit-view-flex-grow: 1; --text-exhibit-playground-margin-bottom: 0px; } .theme-k5 { --student-periscope-header-content-top: 6px; --header-font-family: 'quicksand', sans-serif; } /* src/js/activitybuilder/teachertips/preview-tip.styl */ .preview-teacher-tip .teacher-tip-container { position: absolute; left: 44px; bottom: 2px; right: 44px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; max-height: calc(100% - 20px); z-index: 3; } .preview-teacher-tip .teacher-tip-container.next-to-sidebar { right: calc(350px + 1.5em); } .preview-teacher-tip .teacher-tip-container.in-teacher-view { position: fixed; -webkit-transition: right 0.4s; -moz-transition: right 0.4s; -o-transition: right 0.4s; -ms-transition: right 0.4s; transition: right 0.4s; } .preview-teacher-tip .teacher-tip-container .dcg-prosemirror-editor ul { margin: 0; } .preview-teacher-tip .teacher-tip-container .mixed-text-display { display: block; font-size: 90%; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow-y: auto; } .preview-teacher-tip .teacher-tip-container .close-teacher-tip { position: absolute; top: 40px; right: 0; margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); z-index: 100; } .preview-teacher-tip .teacher-tip-container .close-teacher-tip.btn-icon-ghost { height: 3em; width: 3em; border-radius: 50%; } .preview-teacher-tip .teacher-tip-container .teacher-tip-section-tabs { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .preview-teacher-tip .teacher-tip-container .scrollable-content { padding-right: 2.5em !important; } .amp-styles .tab-set.tab-box .teacher-tip-content { border: 1px solid #bdbdbd; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); z-index: 0; min-height: calc(3em + calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2)); } .amp-styles .tab-set.tab-box .teacher-tip-content .overlap-buffer { float: right; width: 20px; height: 15px; } .amp-styles .tab-set.tab-box .teacher-tip-header .teacher-tip-section-tabs .btn { width: auto; height: 42px; position: relative; top: 2px; padding-bottom: 2px; margin-bottom: 0; border: 1px solid #bdbdbd; border-bottom: 0; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); background: #e9e9e9; color: #676767; } .amp-styles .tab-set.tab-box .teacher-tip-header .teacher-tip-section-tabs .btn span { white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .amp-styles .tab-set.tab-box .teacher-tip-header .teacher-tip-section-tabs .btn.dcg-hovered, .amp-styles .tab-set.tab-box .teacher-tip-header .teacher-tip-section-tabs .btn:focus-visible { background: #f6f6f6; } .amp-styles .tab-set.tab-box .teacher-tip-header .teacher-tip-section-tabs .btn:focus-visible:not(.teacher-tip-section-tab--active) { border-bottom: 1px solid #bdbdbd; border-bottom-left-radius: 0.1875em; border-bottom-right-radius: 0.1875em; } .amp-styles .tab-set.tab-box .teacher-tip-header .teacher-tip-section-tabs .btn.teacher-tip-section-tab--active { pointer-events: all; top: 1px; background: #fff; color: #3b3b3b; -webkit-box-shadow: -6px -4px 6px -4px rgba(0,0,0,0.08), 6px -4px 6px -6px rgba(0,0,0,0.115); box-shadow: -6px -4px 6px -4px rgba(0,0,0,0.08), 6px -4px 6px -6px rgba(0,0,0,0.115); z-index: 100; } .amp-styles .tab-set.tab-box .teacher-tip-header .teacher-tip-section-tabs .btn + .btn { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .amp-styles .tab-set.tab-box .teacher-tip-header .tab-container:not(.tabs-collapsed) .teacher-tip-section-tabs .btn.dcg-hovered, .amp-styles .tab-set.tab-box .teacher-tip-header .tab-container:not(.tabs-collapsed) .teacher-tip-section-tabs .btn:focus-visible { color: #3b3b3b; } .amp-styles .tab-set.tab-box .teacher-tip-header .teacher-tip-section-tab { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .preview-teacher-tip.keypad-open .teacher-tip-container { bottom: 220px; } @media screen and (max-width: 575px) { .teacher-tip-container.next-to-sidebar { display: none; } } /* src/js/admin-dashboard/site/current-access.styl */ .current-expiration .expiration-date { margin-left: 5px; } /* src/js/admin-dashboard/site/delete-site-modal.styl */ /* src/js/admin-dashboard/site/edit-license-info.styl */ .edit-license-info .access-types .amplify-radio-btn { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) 0; } .edit-license-info .warning-message { margin-top: 0.5em; } .edit-license-info .warning-message i.pillow-icon-error { color: #fa824c; } .edit-license-info .date-input, .edit-license-info .reason-input { width: 100%; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } /* src/js/admin-dashboard/site/edit-program-info.styl */ .programs-container .program-types .amplify-checkbox { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) 0; } /* src/js/admin-dashboard/site/edit-site-modal.styl */ .edit-site-modal-contents .site-name-input { width: 100%; font-size: 120%; padding: 5px 10px; } .edit-site-modal-contents .access-label { margin-bottom: 10px; } .edit-site-modal-contents .current-expiration { margin-bottom: 10px; } .edit-site-modal-contents .manage-access-actions [role="button"] { display: inline-block; } .edit-site-modal-contents .manage-access-actions [role="button"] i { margin-right: 10px; } .edit-site-modal-contents .manage-access-actions [role="button"] i:before { text-decoration: none; } .edit-site-modal-contents .manage-access-actions [role="button"]:nth-child(n+2) { margin-left: 20px; } .edit-site-modal-contents .site-history .classroom-shared-table-row.content-row { -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: start; align-items: start; } .edit-site-modal-contents .site-history .site-history-heading i { font-size: 0.85em; margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .edit-site-modal-contents .site-history .action-column, .edit-site-modal-contents .site-history .details-column { width: 50%; } .edit-site-modal-contents .site-history .content-row { padding: 0.5em 0 1em 0; } .edit-site-modal-contents .site-history .action { color: #666; } .edit-site-modal-contents .site-history .details-column.content-cell { font-style: italic; color: #666; } .edit-site-modal-contents .site-parent-container .dcg-searchable-dropdown-list-container { max-height: 300px; overflow-y: auto; } .edit-site-modal-contents .site-sf-container .sf-id-input { width: 100%; } .edit-site-modal-contents .site-sf-container .site-sf-warning { margin-bottom: 10px; } /* src/js/admin-dashboard/site/grant-license-modal.styl */ .grant-license-modal-contents .submit-buttons { margin-top: 10px; text-align: right; } .grant-license-modal-contents .submit-buttons .btn-blue { margin-left: 20px; } .grant-license-modal-contents h2 { font-size: 100%; margin: 20px 0 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } /* src/js/admin-dashboard/site/revoke-license-modal.styl */ .revoke-license-modal-contents h2 { font-size: 100%; margin: 20px 0 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .revoke-license-modal-contents .revoke-reason-input { width: 100%; font-size: 120%; padding: 5px 10px; } .revoke-license-modal-contents .message { text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; text-align: left; padding: 1em; color: #000; font-size: 100%; margin-top: 1em; } .revoke-license-modal-contents .submit-buttons { margin-top: 10px; text-align: right; } .revoke-license-modal-contents .submit-buttons .btn-red { margin-left: 20px; } /* src/js/blocks/intro-banner.styl */ .shared-collapsible-banner { margin: 10px 0 20px; } .shared-collapsible-banner.expanded { -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .shared-collapsible-banner .banner-title { margin-right: 25px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .shared-collapsible-banner .banner-title .banner-message { margin: 0 5px; } .shared-collapsible-banner .banner-section-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .shared-collapsible-banner .banner-section-container .banner-left-side, .shared-collapsible-banner .banner-section-container .banner-right-side { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .shared-collapsible-banner .welcome-ribbon-container .pre-ribbon-text { font-size: 120%; display: block; text-align: center; } .shared-collapsible-banner .welcome-ribbon-container .ribbon-container { width: max-content; max-width: 100%; } .shared-collapsible-banner .welcome-ribbon-container .ribbon-container.blue-ribbon { text-align: center; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; color: #fff; margin: auto; height: 50px; position: relative; z-index: 0; -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.1); box-shadow: 0 2px 3px rgba(0,0,0,0.1); -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; font-size: 160%; font-family: "Amplify", serif; } .shared-collapsible-banner .welcome-ribbon-container .ribbon-container.blue-ribbon:before, .shared-collapsible-banner .welcome-ribbon-container .ribbon-container.blue-ribbon:after { content: ""; display: block; border: 25px solid #2d6cb4; z-index: -1; } .shared-collapsible-banner .welcome-ribbon-container .ribbon-container.blue-ribbon:before { position: absolute; top: 15px; left: -45px; border-right-width: 60px; border-left-color: transparent; } .shared-collapsible-banner .welcome-ribbon-container .ribbon-container.blue-ribbon:after { position: absolute; top: 15px; right: -45px; border-left-width: 60px; border-right-color: transparent; } .shared-collapsible-banner .welcome-ribbon-container .ribbon-container.blue-ribbon .ribbon-title { background: #3278c8; line-height: 50px; } .shared-collapsible-banner .welcome-ribbon-container .ribbon-container.blue-ribbon .ribbon-title:before, .shared-collapsible-banner .welcome-ribbon-container .ribbon-container.blue-ribbon .ribbon-title:after { content: ""; display: block; border-style: solid; border-color: #285f9f transparent transparent transparent; } .shared-collapsible-banner .welcome-ribbon-container .ribbon-container.blue-ribbon .ribbon-title:before { position: absolute; bottom: -15px; left: 0; border-width: 15px 0 0 40px; } .shared-collapsible-banner .welcome-ribbon-container .ribbon-container.blue-ribbon .ribbon-title:after { position: absolute; bottom: -15px; right: 0; border-width: 15px 40px 0 0; } .shared-collapsible-banner .welcome-ribbon-container .ribbon-container .ribbon-title { padding: 0 15px; } .shared-collapsible-banner .banner-left-side { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .shared-collapsible-banner .banner-left-side .img-container { width: 100%; padding: 10px; text-align: center; height: min-content; } .shared-collapsible-banner .banner-left-side .img-container img { width: 100%; max-width: 380px; } .shared-collapsible-banner .banner-right-side { margin-top: 40px; } .shared-collapsible-banner .description + .description { margin-top: 15px; } .shared-collapsible-banner .description { line-height: 1.3em; } .shared-collapsible-banner h2 { margin: 15px 0; } .shared-collapsible-banner .cta-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; margin: 5px -5px; } .shared-collapsible-banner .cta-container .btn, .shared-collapsible-banner .cta-container .btn-secondary, .shared-collapsible-banner .cta-container .btn-teal { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: center; white-space: nowrap; margin: 10px 5px 0; } .shared-collapsible-banner .feedback { margin-top: 15px; } .shared-collapsible-banner .feedback .dark-gray-link { color: #333; } .shared-collapsible-banner .feedback .dark-gray-link.dcg-hovered, .shared-collapsible-banner .feedback .dark-gray-link.dcg-depressed { color: #000; } @media screen and (max-width: 1250px) { .shared-collapsible-banner .banner-left-side { min-width: 400px; } .shared-collapsible-banner .banner-left-side .welcome-ribbon-container .ribbon-container { font-size: 120%; } } @media screen and (max-width: 920px) { .shared-collapsible-banner .banner-section-container { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .shared-collapsible-banner .banner-section-container .banner-left-side { min-width: 100%; } } @media screen and (max-width: 350px) { .shared-collapsible-banner .banner-left-side .welcome-ribbon-container .ribbon-container { font-size: 100%; } } /* src/js/blocks/shared/authorize-gc-modal.styl */ .dcg-google-classroom-login { text-align: center; margin: 10px auto 20px; padding: 15px; width: 300px; max-width: 100%; } .dcg-google-classroom-login img { height: 18px; margin: 0 10px; vertical-align: middle; margin-top: -2px; } .dcg-google-classroom-login .amplify-toast { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; } .dcg-google-classroom-login.dcg-depressed { background: rgba(50,120,200,0.25); color: #004f9b; } /* src/js/blocks/shared/external-service-logo.styl */ .external-logo { display: inline-block; margin-right: 10px; vertical-align: middle; } .external-logo img { height: 1.25em; } /* src/js/blocks/teacher/add-block-modal.styl */ .add-or-edit-block-modal-container .add-block-detail { width: 100%; text-align: center; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; } .add-or-edit-block-modal-container .import-google-classroom-section { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin-bottom: 20px; } .add-or-edit-block-modal-container .import-google-classroom-section .or-message-container { width: 100%; text-align: center; height: 1px; background: #bdbdbd; margin: 10px 0; } .add-or-edit-block-modal-container .import-google-classroom-section .or-message { color: #3b3b3b; font-weight: normal; display: inline-block; margin: 0 auto; background: #fff; position: relative; top: -10px; padding: 0 10px; } .add-or-edit-block-modal-container .import-google-classroom-section .dcg-google-classroom-import { margin: 10px auto 20px; border-radius: 2em; width: 350px; max-width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 50px; } .add-or-edit-block-modal-container .import-google-classroom-section .dcg-google-classroom-import.focus { outline: none; } .add-or-edit-block-modal-container .import-google-classroom-section .dcg-google-classroom-import.dcg-depressed { background: transparent; } .add-or-edit-block-modal-container .import-google-classroom-section .dcg-google-classroom-import img { height: 18px; padding-right: 14px; vertical-align: middle; margin-top: -2px; } .add-or-edit-block-modal-container .import-google-classroom-section .dcg-google-classroom-import .dcg-google-classroom-import-label { width: 100%; height: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; border-left: 1px solid #bdbdbd; padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1.1); -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: end; justify-content: end; } .add-or-edit-block-modal-container .block-input { padding: 10px; border-radius: 0.1875em; } .add-or-edit-block-modal-container .block-input-label, .add-or-edit-block-modal-container .coteacher-heading { margin-top: 1em; margin-bottom: 0.25em; font-size: 110%; } .add-or-edit-block-modal-container .block-input-label.block-input-label-centered, .add-or-edit-block-modal-container .coteacher-heading.block-input-label-centered { text-align: center; } .add-or-edit-block-modal-container .amplify-toast { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; } .add-or-edit-block-modal-container input { width: 100%; } .add-or-edit-block-modal-container .submit-buttons { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); text-align: right; } .add-or-edit-block-modal-container .submit-buttons .add-block-submit, .add-or-edit-block-modal-container .submit-buttons .edit-block-submit { margin-left: 20px; } .add-or-edit-block-modal-container .gc-info { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin-top: 20px; border-top: 1px solid #e2e2e2; padding-top: 20px; font-size: 14px; color: #666; } .add-or-edit-block-modal-container .gc-info .google-classroom-icon { height: 30px; width: 30px; margin-right: 20px; } .add-or-edit-block-modal-container .gc-info .blue-link { text-decoration-color: #3278c8; } .add-or-edit-block-modal-container .book-dropdown.dcg-shared-dropdown-popover-container { display: block; } .add-or-edit-block-modal-container .book-dropdown.dcg-shared-dropdown-popover-container .dropdown-container { width: 100%; margin-top: 10px; } .add-or-edit-block-modal-container .book-dropdown.dcg-shared-dropdown-popover-container .dcg-shared-options-dropdown:after { content: ""; position: absolute; top: -9px; right: 11px; border-width: 9px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .add-or-edit-block-modal-container .book-dropdown.dcg-shared-dropdown-popover-container .dcg-shared-options-dropdown:before { content: ""; position: absolute; top: -10px; right: 10px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .add-or-edit-block-modal-container .book-dropdown.dcg-shared-dropdown-popover-container .anchor-container .book-dropdown-anchor { padding: 0 10px; line-height: 40px; height: 40px; border: 1px solid #bbb; border-radius: 5px; width: 100%; } .add-or-edit-block-modal-container .book-dropdown.dcg-shared-dropdown-popover-container .anchor-container .book-dropdown-anchor .pillow-icon-caret-down { font-size: 70%; line-height: 30px; padding: 5px; float: right; color: #bbb; } .add-or-edit-block-modal-container .book-dropdown.dcg-shared-dropdown-popover-container .anchor-container .book-dropdown-anchor .dropdown-value { color: #666; } .add-or-edit-block-modal-container .book-dropdown.dcg-shared-dropdown-popover-container .anchor-container .book-dropdown-anchor .dropdown-value.placeholder { color: #999; font-style: italic; } .add-or-edit-block-modal-container .book-dropdown.dcg-shared-dropdown-popover-container .anchor-container.dcg-hovered .book-dropdown-anchor { border: 1px solid #999; } .add-or-edit-block-modal-container .book-dropdown.dcg-shared-dropdown-popover-container .anchor-container.dcg-hovered .book-dropdown-anchor .pillow-icon-caret-down { color: #999; } .add-or-edit-block-modal-container .book-dropdown.dcg-shared-dropdown-popover-container .anchor-container.dcg-depressed .book-dropdown-anchor { border: 1px solid #666; } .add-or-edit-block-modal-container .book-dropdown.dcg-shared-dropdown-popover-container .anchor-container.dcg-depressed .book-dropdown-anchor .pillow-icon-caret-down { color: #666; } @media screen and (max-width: 350px) { .dcg-google-classroom-import-label { font-size: 60%; } } /* src/js/blocks/teacher/add-external-block-modal.styl */ .dcg-shared-modal-cover .add-external-block-container .blocks-loading-message { color: #999; text-align: center; font-size: 130%; padding: 15px; -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; } .dcg-shared-modal-cover .add-external-block-container .external-blocks-header { border-bottom: 1px solid #e2e2e2; padding: 5px 0 10px; color: #666; } .dcg-shared-modal-cover .add-external-block-container .external-block-row { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; width: 100%; border-bottom: 1px solid #e2e2e2; padding: 7.5px 5px; } .dcg-shared-modal-cover .add-external-block-container .external-block-row.already-added { color: #999; font-style: italic; padding-left: 30px; } .dcg-shared-modal-cover .add-external-block-container .external-block-row .external-block-name { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; margin-left: 5px; } .dcg-shared-modal-cover .add-external-block-container .external-block-row .external-block-exists-message { -webkit-align-self: flex-end; align-self: flex-end; -ms-flex-item-align: end; } .dcg-shared-modal-cover .submit-buttons { text-align: right; } .dcg-shared-modal-cover .submit-buttons .btn + .btn { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .dcg-shared-modal-cover .amplify-toast { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; } /* src/js/blocks/teacher/assignment-notification.styl */ .assignment-loading { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; color: #666; } .assignment-error { text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .assignment-error .assignment-notification-close-cross { display: inline-block; margin-left: 10px; color: #000; opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); font-size: 90%; } .assignment-error .assignment-notification-close-cross i { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); } .assignment-error .assignment-notification-close-cross.dcg-hovered i { opacity: 0.55; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=55)"; filter: alpha(opacity=55); } .assignment-error .assignment-notification-close-cross.dcg-depressed i { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); } /* src/js/blocks/teacher/assignment-options-modal.styl */ .assignment-options-modal-container .option-group-container { margin-top: 15px; } .assignment-options-modal-container .option-group-container .option-group-title { color: #666; margin: 30px 0 5px; } .assignment-options-modal-container .option-group-container .option-group label, .assignment-options-modal-container .option-group-container .option-group .children { width: 100%; } .assignment-options-modal-container .option-group-container .option-group .rhythm-radio { margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .assignment-options-modal-container .option-group-container .option-group .option-info { padding-left: 5px; font-size: 110%; margin-top: -4px; } .assignment-options-modal-container .option-group-container .option-group .option-info .option-title { font-weight: bold; } .assignment-options-modal-container .option-group-container .option-group .option-info .option-description { color: #666; font-size: 90%; } .assignment-options-modal-container .amplify-toast { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; } .assignment-options-modal-container .submit-buttons { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); text-align: right; } .assignment-options-modal-container .submit-buttons .btn + .btn { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } /* src/js/blocks/teacher/block-approval-panel.styl */ .block-approval-container { margin-top: 20px; margin-bottom: 20px; } .block-approval-container .block-approval-header { margin-bottom: 10px; } .block-approval-container .block-approval-header .block-approval-message { font-size: 130%; } .block-approval-container .block-approval-footer { margin-top: 15px; } .block-approval-container .approval-panel-table .classroom-shared-table { border-left: 3px solid #3278c8; padding-left: 10px; } .block-approval-container .approval-panel-table .classroom-shared-table-row.content-row { padding: 7px 5px; } /* src/js/blocks/teacher/block-denied-panel.styl */ .block-denied-container { margin-top: 20px; } .block-denied-container .block-denied-header { margin-bottom: 10px; color: #666; } .block-denied-container .block-denied-header i { font-size: 90%; margin-right: 5px; } .block-denied-container .block-denied-header.dcg-hovered { color: #333; } .block-denied-container .block-denied-header.dcg-depressed { color: #000; } .block-denied-container .block-denied-header .block-denied-message { display: inline-block; margin-left: 5px; font-size: 120%; } .block-denied-container .block-approval-footer { margin-top: 15px; } .block-denied-container .classroom-shared-table { border-left: 3px solid #bdbdbd; margin-left: 5px; padding-left: 20px; } .block-denied-container .approval-panel-table .classroom-shared-table-row.content-row { padding: 7px 5px; } /* src/js/blocks/teacher/block-last-sync.styl */ .block-last-sync { display: inline-block; font-size: 55%; margin-top: 5px; } .block-last-sync .block-last-sync-loading { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; } .block-last-sync .block-last-sync-date { text-decoration: none; } .block-last-sync .block-last-sync-date i { font-size: 80%; margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .block-last-sync .block-last-sync-date span { text-decoration: underline; } .block-last-sync .block-last-sync-date.disabled { pointer-events: none; } .block-last-sync .block-last-sync-date:hover span { text-decoration: none; } /* src/js/blocks/teacher/clean-up-blocks-modal.styl */ .clean-up-blocks-modal .dcg-shared-modal-cover .title-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin-bottom: 15px; height: 120px; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .clean-up-blocks-modal .dcg-shared-modal-cover .title-container > div { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; height: 100%; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .clean-up-blocks-modal .dcg-shared-modal-cover .title-container h1 { margin: 0; font-size: 26px; } .clean-up-blocks-modal .dcg-shared-modal-cover .title-container h3 { font-size: 94%; margin-top: 0; line-height: normal; } .clean-up-blocks-modal .dcg-shared-modal-cover .title-container img { margin-right: 15px; width: 140px; } .clean-up-blocks-modal .instruction { font-size: 120%; } .clean-up-blocks-modal .sub-instruction { font-size: 94%; margin-top: 3px; } .clean-up-blocks-modal .clean-up-blocks-checkboxes { margin: 20px 0; max-height: 210px; overflow-y: auto; } .clean-up-blocks-modal .clean-up-blocks-checkboxes .amplify-checkbox { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .clean-up-blocks-modal .clean-up-blocks-checkboxes .block-last-updated { color: #676767; } .clean-up-blocks-modal .action-buttons { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .clean-up-blocks-modal .action-buttons .submit-btn { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } /* src/js/blocks/teacher/external-student-table.styl */ .external-student-panel { margin-top: 20px; } .external-student-panel .external-student-panel-header { margin-bottom: 10px; color: #666; } .external-student-panel .external-student-panel-header i { font-size: 90%; margin-right: 5px; } .external-student-panel .external-student-panel-header.dcg-hovered { color: #333; } .external-student-panel .external-student-panel-header.dcg-depressed { color: #000; } .external-student-panel .external-student-panel-header .external-student-message { display: inline-block; margin-left: 5px; font-size: 120%; } /* src/js/blocks/teacher/manage-blocks.styl */ .manage-blocks-view { color: #333; } .manage-blocks-view .header-info-links .learn-link, .manage-blocks-view .block-code .learn-link { padding: 5px; color: #000; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); text-decoration: none; margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); margin-bottom: 3px; } .manage-blocks-view .header-info-links .learn-link.dcg-hovered, .manage-blocks-view .block-code .learn-link.dcg-hovered { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); } .manage-blocks-view .header-info-links .learn-link.dcg-depressed, .manage-blocks-view .block-code .learn-link.dcg-depressed { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); } .manage-blocks-view .header-container .section-header { font-size: 1.6em; margin-right: 5px; } .manage-blocks-view .header-container .header-info-links { position: relative; top: 2px; margin-right: 10px; font-size: 80%; } .manage-blocks-view .header-container .header-links { margin-left: auto; } .manage-blocks-view .gc-post-settings-container { margin-top: -10px; margin-bottom: 20px; } .manage-blocks-view .gc-post-settings-container .edit-link { text-decoration: none; } .manage-blocks-view .gc-post-settings-container .edit-link i { color: #676767; font-size: 80%; margin-right: 5px; } .manage-blocks-view .gc-post-settings-container .edit-link.dcg-hovered i { color: #333; } .manage-blocks-view .gc-post-settings-container .edit-link.dcg-depressed i { color: #000; } .manage-blocks-view .no-blocks-container { text-align: center; max-width: 500px; margin: 20px auto 100px; } .manage-blocks-view .no-blocks-container .no-blocks-message { margin: 5px 0; font-size: 150%; } .manage-blocks-view .no-blocks-container img { width: 350px; max-width: 85%; } .manage-blocks-view .shared-collapsible-banner { background: #fff; border-color: transparent; border-radius: 0.1875em; margin-top: 30px; } .manage-blocks-view .shared-collapsible-banner h1 { margin-bottom: 0; } .manage-blocks-view .shared-collapsible-banner .banner-learn-links { text-align: center; margin-bottom: 20px; } .manage-blocks-view .shared-collapsible-banner .banner-section-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .manage-blocks-view .shared-collapsible-banner .banner-section-container .banner-section { text-align: center; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .manage-blocks-view .shared-collapsible-banner .banner-section-container .banner-section.assign-activity { margin-left: 40px; } .manage-blocks-view .shared-collapsible-banner .banner-section-container .banner-section .banner-section-text-container .add-block-prompt b { font-weight: bold; } .manage-blocks-view .shared-collapsible-banner .banner-section-container .banner-section .banner-section-text-container .banner-section-title { margin: 20px 0 11px 0; font-size: 150%; } .manage-blocks-view .shared-collapsible-banner .banner-section-container .banner-section img { max-height: 180px; max-width: 100%; } .manage-blocks-view .manage-blocks-list-header:not(.inactive) .block-name, .manage-blocks-view .manage-blocks-list-item .block-info { width: calc(100% - 490px); } .manage-blocks-view .manage-blocks-list-header.inactive .block-name { width: calc(100% - 160px); } .manage-blocks-view .manage-blocks-list-header .block-code, .manage-blocks-view .manage-blocks-list-item .block-code { width: 150px; } .manage-blocks-view .block-history { width: 180px; } .manage-blocks-view .block-roster { width: 120px; } .manage-blocks-view .block-code, .manage-blocks-view .block-roster, .manage-blocks-view .block-history { text-align: center; } .manage-blocks-view .block-error { background-color: #f4c0b3; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #3b3b3b; border-radius: 0.1875em; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); margin-right: 15px; max-width: 500px; position: relative; text-align: left; } .manage-blocks-view .block-error .block-error-message { padding-right: 15px; } .manage-blocks-view .block-error .block-error-close-cross { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); } .manage-blocks-view .block-error .block-error-close-cross.dcg-hovered { opacity: 1; -ms-filter: none; filter: none; } .manage-blocks-view .pillow-icon-reset { margin-right: 2px; } .manage-blocks-view .manage-blocks-list-header { border-bottom: 1px solid #bdbdbd; text-transform: uppercase; color: #3b3b3b; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; font-size: 85%; padding: 4px; } .manage-blocks-view .manage-blocks-list-header .actions-header-text { position: absolute; top: -1000px; left: -1000px; width: 1px; height: 1px; } .manage-blocks-view .manage-blocks-list-header .block-history { visibility: hidden; } .manage-blocks-view .manage-blocks-list-item { border-bottom: 1px solid #bdbdbd; padding: 5px 4px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .manage-blocks-view .manage-blocks-list-item .block-info { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .manage-blocks-view .manage-blocks-list-item .block-info .block-name { font-size: 130%; font-weight: 400; color: #3b3b3b; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .manage-blocks-view .manage-blocks-list-item .block-info .block-name span { white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: inline-block; max-width: 100%; } .manage-blocks-view .manage-blocks-list-item .block-info .block-coteachers { display: block; margin-top: 5px; color: #676767; } .manage-blocks-view .manage-blocks-list-item .block-info .block-coteachers .coteacher-title { margin-right: 0.5em; white-space: pre; } .manage-blocks-view .manage-blocks-list-item .block-info .block-coteachers .coteacher-names { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; word-wrap: break-word; } .manage-blocks-view .manage-blocks-list-item .block-code { font-size: 120%; } .manage-blocks-view .manage-blocks-list-item .block-code .active-code-label { display: inline; padding: 5px 10px; border: 1px solid #9c0d63; border-radius: 0.1875em; color: #9c0d63; } .manage-blocks-view .manage-blocks-list-item .block-code .active-code-label.dcg-hovered { border: 1px solid #5e083b; color: #5e083b; } .manage-blocks-view .manage-blocks-list-item .block-code:not(.header-title) { text-transform: uppercase; } .manage-blocks-view .manage-blocks-list-item .block-code:not(.header-title).inactive, .manage-blocks-view .manage-blocks-list-item .block-code:not(.header-title) .expiration { text-transform: none; } .manage-blocks-view .manage-blocks-list-item .block-code:not(.header-title).inactive { color: #676767; font-style: italic; font-size: 100%; } .manage-blocks-view .manage-blocks-list-item .block-code:not(.header-title) .expiration { font-size: 65%; color: #676767; font-style: italic; margin-top: 5px; } .manage-blocks-view .manage-blocks-list-item .block-last-sync { font-size: 80%; display: inline-block; padding: 5px 10px; width: 150px; text-align: center; color: #676767; } .manage-blocks-view .manage-blocks-list-item .block-last-sync .block-last-sync-label, .manage-blocks-view .manage-blocks-list-item .block-last-sync .block-last-sync-date, .manage-blocks-view .manage-blocks-list-item .block-last-sync .block-last-sync-loading { margin: auto; } .manage-blocks-view .manage-blocks-list-item .block-last-sync .block-last-sync-loading { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; } .manage-blocks-view .manage-blocks-list-item .block-roster.inactive { color: #999; text-transform: uppercase; font-size: 0.875rem; } .manage-blocks-view .manage-blocks-list-item .dot-dot-dropdown-container { width: 40px; } .manage-blocks-view .manage-blocks-list-item .dot-dot-dropdown-container .dropdown-container { margin-right: -2px; } .manage-blocks-view .manage-blocks-list-item .dot-dot-dropdown-container .dropdown-container:after { content: ""; position: absolute; top: -9px; right: 10px; border-width: 9px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .manage-blocks-view .manage-blocks-list-item .dot-dot-dropdown-container .dropdown-container:before { content: ""; position: absolute; top: -10px; right: 9px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .manage-blocks-view .inactive-blocks-header { margin-top: 3em; font-size: 80%; display: inline-block; } .manage-blocks-view .inactive-blocks-header i { font-size: 100%; margin-right: 5px; } .manage-blocks-view .inactive-blocks-header .section-header.dcg-hovered { color: #3b3b3b; } .manage-blocks-view .inactive-blocks-header .section-header.dcg-depressed { color: #676767; } .manage-blocks-view .manage-blocks-inactive-list { margin-bottom: 40px; } .manage-blocks-view .manage-blocks-inactive-list .block-info { color: #676767; } .manage-blocks-view .manage-blocks-inactive-list .block-info .block-name { font-style: italic; padding-right: 10px; } .block-modal-contents .block-modal-title { text-align: left; } .block-modal-contents .block-message { margin-bottom: 1em; } .block-modal-contents .block-buttons { text-align: right; } .block-modal-contents .btn + .btn { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } @media screen and (max-width: 950px) { .manage-blocks-view .block-history { display: none; } .manage-blocks-view .manage-blocks-list-header:not(.inactive) .block-name, .manage-blocks-view .manage-blocks-list-item .block-info { width: calc(100% - 310px); } .manage-blocks-view .shared-collapsible-banner .banner-section-container { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .manage-blocks-view .shared-collapsible-banner .banner-section-container .banner-section { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; max-width: 100%; } .manage-blocks-view .shared-collapsible-banner .banner-section-container .banner-section.assign-activity { margin: 30px 0 0; } .manage-blocks-view .shared-collapsible-banner .banner-section-container .banner-section img { width: 200px; max-height: auto; } .manage-blocks-view .shared-collapsible-banner .banner-section-container .banner-section .banner-section-text-container { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: left; margin-left: 10px; } .manage-blocks-view .shared-collapsible-banner .banner-section-container .banner-section .banner-section-text-container .banner-section-title { margin-top: 0; } } @media screen and (max-width: 550px) { .manage-blocks-view .manage-blocks-list-header:not(.inactive) .block-name, .manage-blocks-view .manage-blocks-list-item .block-info { width: calc(100% - 190px); } .manage-blocks-view .block-roster { display: none; } .manage-blocks-view .shared-collapsible-banner .banner-section-container .banner-section { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .manage-blocks-view .shared-collapsible-banner .banner-section-container .banner-section .banner-section-text-container { text-align: center; margin: 10px 0 0; } } /* src/js/blocks/teacher/manage-coteachers-modal.styl */ .manage-coteachers-modal-contents { position: relative; } .amplify-toast { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; } .coteacher-message, .add-coteacher { margin-top: 10px; } .coteacher-list-item { border-bottom: 1px solid #bdbdbd; padding: 10px 5px; position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .coteacher-list-item .dcg-tooltip-hit-area-container { vertical-align: middle; } .coteacher-list-item:first-of-type { border-top: 1px solid #bdbdbd; } .coteacher-list-item .primary-teacher-label { float: right; color: #999; } .coteacher-list-item .remove-coteacher-button { float: right; } .coteacher-list-item .remove-coteacher-button[aria-disabled="true"] { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); pointer-events: none; } .coteacher-list-item .remove-coteacher-button.fully-hidden { display: none; } .coteacher-list-item > span { white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .block-last-sync-container { text-align: center; font-size: 150%; margin-top: 12px; } .external-logo { margin-right: 5px; } .coteacher-message .coteacher-pii-warning, .coteacher-message .coteacher-curriculum-warning, .coteacher-message .coteacher-classroom-message { margin: 1em 0; } .coteacher-message .coteacher-pii-warning, .coteacher-message .coteacher-curriculum-warning { color: #666; } .coteacher-curriculum-warning-tooltip { margin-right: 2px; } .coteacher-pii-warning i, .coteacher-curriculum-warning i, .coteacher-curriculum-warning-icon i { font-size: 80%; margin-right: 4px; top: 3px; } .coteacher-pii-warning i { color: #3278c8; } .coteacher-curriculum-warning i { color: #fa824c; } .coteacher-curriculum-warning-icon i { color: #999; } .add-coteacher { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .add-coteacher .add-coteacher-input { margin-right: 16px; font-size: 1em; padding: 5px 10px; width: 100%; border-radius: 0.1875em; } /* src/js/blocks/teacher/roster.styl */ .roster-page .block-info-container { margin-bottom: 30px; padding-top: 10px; } .roster-page .student-list-header .actions-header-text, .roster-page .student-list-header .student-history-header { position: absolute; top: -1000px; left: -1000px; width: 1px; height: 1px; } .roster-page .block-name { max-width: 100%; overflow-wrap: break-word; font-size: 1.6em; padding-bottom: 5px; } .roster-page .block-info { margin-top: 5px; font-size: 1em; } .roster-page .block-info .block-details-container .block-student-count { color: #666; padding-right: 15px; font-size: 125%; } .roster-page .block-info .block-details-container .block-code-container, .roster-page .block-info .block-details-container .code-actions-container { padding-left: 15px; border-left: 1px solid #bdbdbd; } .roster-page .block-info .block-details-container .code-actions-container { display: inline-block; font-size: 105%; } .roster-page .block-info .block-details-container .block-code { text-transform: uppercase; margin-left: 5px; } .roster-page .block-info .block-details-container .block-last-sync { font-size: 80%; margin-top: 0; } .roster-page .block-info .block-details-container .block-error { text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; font-size: 80%; display: inline-block; max-width: 500px; margin-left: 15px; position: relative; text-align: left; } .roster-page .block-info .block-details-container .block-error .block-error-message { padding-right: 15px; } .roster-page .block-info .block-details-container .block-error .block-error-close-cross { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); } .roster-page .block-info .block-details-container .block-error .block-error-close-cross.dcg-hovered { opacity: 1; -ms-filter: none; filter: none; } .roster-page .block-code-info { margin-left: auto; width: 300px; } .roster-page .block-code-info .dcg-selectable-input-container { margin: 5px 0; } .roster-page .block-code-info .link-tip { color: #666; text-align: center; } .roster-page .remove-modal-content .confirmation-message .confirmation-highlight { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .roster-page .remove-modal-content .confirmation-message .dcg-p:not(:first-child) { margin-top: 10px; } .roster-page .remove-modal-content .deny-checkbox-container { margin-top: 10px; } .roster-page .remove-modal-content .removal-error-message { text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; margin-top: 10px; } .roster-page .remove-modal-content .removal-error-message i { margin-right: 8px; } .roster-page .remove-modal-content .submit-buttons { margin-top: 20px; margin-left: auto; text-align: right; } .roster-page .remove-modal-content .submit-buttons .btn-red { margin-left: 20px; } .roster-page .no-students-message { width: 100%; margin-top: 20px; font-size: 110%; text-align: center; color: #999; } .roster-page .roster-block-code-display { margin-bottom: 10px; background-color: #f7f7f7; border: 1px solid #bdbdbd; border-radius: 3px; padding: 10px; } .roster-page .roster-block-code-display .code-display-header { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 10px; } .roster-page .roster-block-code-display .code-display-header .code-display-title { font-size: 120%; margin-top: 0; margin-bottom: 0; } .roster-page .roster-block-code-display .code-display-header .code-display-title .learn-more-small { display: none; } .roster-page .roster-block-code-display .code-display-header .learn-more-link { color: #666; cursor: pointer; text-decoration: none; } .roster-page .roster-block-code-display .code-display-header .learn-more-link.dcg-hovered { color: #333; } .roster-page .roster-block-code-display .code-display-header .learn-more-link.dcg-depressed { color: #000; } .roster-page .roster-block-code-display .code-display-header .learn-more-link i { margin-right: 5px; font-size: 80%; } .roster-page .roster-block-code-display .code-display-header .learn-more-link span { color: #3b3b3b; text-decoration: underline; } .roster-page .roster-block-code-display .code-display-header .learn-more-link span:hover, .roster-page .roster-block-code-display .code-display-header .learn-more-link span:focus { color: #000; text-decoration: none; } .roster-page .roster-block-code-display .code-display-body { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin: -10px; } .roster-page .roster-block-code-display .code-display-body .code-display-left, .roster-page .roster-block-code-display .code-display-body .code-display-center, .roster-page .roster-block-code-display .code-display-body .code-display-right { padding: 10px; } .roster-page .roster-block-code-display .code-display-body .code-display-left { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 0 40%; -ms-flex: 1 0 40%; flex: 1 0 40%; } .roster-page .roster-block-code-display .code-display-body .code-display-left .block-code { font-size: 200%; font-weight: 400; margin: 10px 0 5px; letter-spacing: 0.05em; text-transform: uppercase; } .roster-page .roster-block-code-display .code-display-body .code-display-left .expiration-date { font-style: italic; font-size: 90%; margin-bottom: 20px; } .roster-page .roster-block-code-display .code-display-body .option-label { background-color: #9c0d63; border-radius: 15px; padding: 2px 7px; color: #fff; font-size: 90%; } .roster-page .roster-block-code-display .code-display-body .option-text { margin: 10px 0; } .roster-page .roster-block-code-display .code-display-body .code-display-center { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 1 30%; -ms-flex: 1 1 30%; flex: 1 1 30%; } .roster-page .roster-block-code-display .code-display-body .code-display-right { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 1 30%; -ms-flex: 1 1 30%; flex: 1 1 30%; } .roster-page .code-actions { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .roster-page .code-actions .roster-action-link { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .roster-page .code-actions .roster-action-link.disabled { pointer-events: none; } .roster-page .code-actions .roster-action-link i { font-size: 115%; margin-right: 2px; } .roster-page .code-actions .roster-action-link.blue-link, .roster-page .code-actions .roster-action-link.dark-gray-link { text-decoration: none; } .roster-page .code-actions .roster-action-link.blue-link span, .roster-page .code-actions .roster-action-link.dark-gray-link span { text-decoration: underline; } .roster-page .code-actions .roster-action-link.amp-link { text-decoration: none; } .roster-page .code-actions .roster-action-link i { text-decoration: none; } .roster-page .code-actions .roster-action-link span { text-decoration: underline; color: #9c0d63; text-decoration-color: #9c0d63; } .roster-page .code-actions .roster-action-link span:hover, .roster-page .code-actions .roster-action-link span:focus { color: #5e083b; text-decoration: none; } .roster-page .code-actions .roster-action-link.amp-link.link-secondary span { color: #3b3b3b; text-decoration: underline; text-decoration-color: #3b3b3b; } .roster-page .code-actions .roster-action-link.amp-link.link-secondary span:hover, .roster-page .code-actions .roster-action-link.amp-link.link-secondary span:focus { color: #000; text-decoration: none; } .roster-page .code-actions .roster-action-link.restore-invitation, .roster-page .code-actions .roster-action-link.close-invitation { margin-right: 15px; } @media screen and (max-width: 975px) { .roster-page .roster-block-code-display .code-display-header { -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .roster-page .roster-block-code-display .code-display-header .code-display-title { text-align: center; } .roster-page .roster-block-code-display .code-display-header .code-display-title .learn-more-small { margin-left: 10px; display: inline; } .roster-page .roster-block-code-display .code-display-header .learn-more { display: none; } .roster-page .roster-block-code-display .code-display-body { -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .roster-page .roster-block-code-display .code-display-body .code-display-left { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 0; -ms-flex: 1 0; flex: 1 0; } .roster-page .roster-block-code-display .code-display-body .code-display-left .block-code { text-align: center; text-transform: uppercase; } .roster-page .roster-block-code-display .code-display-body .code-display-left .expiration-date { font-style: italic; text-align: center; } .roster-page .roster-block-code-display .code-display-body .code-display-left .code-actions { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: max-content; margin: 0 auto; } .roster-page .roster-block-code-display .code-display-body .code-display-left .code-actions .roster-action-link { margin-bottom: 5px; } .roster-page .roster-block-code-display .code-display-body .code-display-left .code-actions .roster-action-link.restore-invitation, .roster-page .roster-block-code-display .code-display-body .code-display-left .code-actions .roster-action-link.close-invitation { margin-right: 0; } .roster-page .roster-block-code-display .code-display-body .code-display-center { display: none; } .roster-page .roster-block-code-display .code-display-body .code-display-right { display: none; } } @media screen and (max-width: 650px) { .roster-page .block-info .block-details-container .code-actions-container { display: block; border-left: none; padding-left: 0; margin-top: 5px; } } /* src/js/blocks/teacher/shared-collapsible-banner.styl */ .shared-collapsible-banner { background: #fff; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); border-radius: 0.1875em; padding: 20px; position: relative; } .shared-collapsible-banner.collapsed { padding: 20px; text-align: center; color: #3b3b3b; font-size: 130%; font-family: "Amplify", serif; } .shared-collapsible-banner.collapsed .down-arrow-container { position: absolute; top: 20px; right: 20px; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .shared-collapsible-banner.collapsed .down-arrow-container .pillow-icon-chevron-down { vertical-align: middle; } .shared-collapsible-banner.collapsed.dcg-hovered { -webkit-box-shadow: 0 0 0 2px #9c0d63; box-shadow: 0 0 0 2px #9c0d63; } .shared-collapsible-banner.collapsed.dcg-hovered .down-arrow-container { opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); } .shared-collapsible-banner.collapsed.dcg-depressed { -webkit-box-shadow: 0 0 0 2px #5e083b; box-shadow: 0 0 0 2px #5e083b; } .shared-collapsible-banner.collapsed.dcg-depressed .down-arrow-container { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); } .shared-collapsible-banner.teal-banner { background: rgba(21,176,151,0.1); border: 1px solid rgba(21,176,151,0.2); } .shared-collapsible-banner.teal-banner.collapsed.dcg-hovered { background: rgba(21,176,151,0.25); } .shared-collapsible-banner.teal-banner.collapsed.dcg-depressed { background: rgba(21,176,151,0.4); } .shared-collapsible-banner .minimize-button { position: absolute; top: 10px; right: 10px; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .shared-collapsible-banner .minimize-button.dcg-hovered { opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); } .shared-collapsible-banner .minimize-button.dcg-depressed { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); } .shared-collapsible-banner h1 { font-family: "Amplify", serif; margin-bottom: 20px; margin-top: 0; line-height: 1.5em; text-align: center; } .landing-image-container a.shared-collapsible-banner { display: block; text-decoration: none; } /* src/js/blocks/teacher/student-history.styl */ .student-history-container .section-header { margin: 10px 0; } .student-history-container .classroom-shared-table-row.header-row { font-size: 85%; } .student-history-container .table-column-activity { width: 70%; } .student-history-container .table-column-activity.header-cell { -webkit-align-self: flex-end; align-self: flex-end; -ms-flex-item-align: end; } .student-history-container .table-column-assigned-date { width: 15%; text-align: right; } .student-history-container .table-column-dashboard-link { width: 15%; padding-left: 5px; text-align: right; } .student-history-container .date.inactive { color: #676767; } .student-history-container .not-started { color: #676767; font-style: italic; } .student-history-container .activity-details-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; max-width: 95%; overflow: hidden; } .student-history-container .activity-details-container.inactive { color: #676767; } .student-history-container .activity-details-container.inactive img { opacity: 30%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=3000%)"; filter: alpha(opacity=3000%); } .student-history-container .activity-details-container .activity-thumb-container { border: 1px solid #e2e2e2; border-radius: 4px; width: 42px; height: 42px; z-index: 0; -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; } .student-history-container .activity-details-container .activity-thumb-container img { width: 40px; height: 40px; } .student-history-container .activity-details-container .activity-info { -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; margin-left: 12px; max-width: calc(100% - 54px); } .student-history-container .activity-details-container .activity-info .activity-title { font-size: 110%; } .student-history-container .activity-details-container .activity-info .activity-subtitle { font-size: 80%; padding-top: 2px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; max-width: 100%; } .student-history-container .activity-details-container .activity-info .activity-subtitle .dcg-rich-text { white-space: nowrap; } .student-history-container .activity-details-container:not(.inactive) .activity-info .activity-subtitle { color: #666; } .student-history-container .load-more-container { margin: 20px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .student-history-error .error-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .student-history-error .error-container .error-image { margin-top: 50px; margin-bottom: 15px; width: 200px; height: auto; } .student-history-error .error-container .amplify-toast .toast-icon { margin-left: initial; } .student-history-error .error-container .amplify-toast .toast-body { width: 100%; } .teacher-page .teacher-page-content-container .teacher-page-content .student-history-container h1.section-header { margin-top: 10px; padding-bottom: 10px; } @media screen and (max-width: 910px) { .student-history-container .table-column-activity { width: 80%; } .student-history-container .table-column-assigned-date { display: none; } .student-history-container .table-column-dashboard-link { width: 20%; font-size: 90%; } } /* src/js/blocks/teacher/student-table.styl */ .student-table .student-table-header { border-bottom: 1px solid #bdbdbd; text-transform: uppercase; color: #3b3b3b; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; font-size: 85%; -webkit-box-align: baseline; -moz-box-align: baseline; -o-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; } .student-table .student-table-header h3 { font-size: 100%; color: #3b3b3b; margin-top: 0; margin-bottom: 0; } .student-table .student-table-header .override-info-header, .student-table .student-table-header .actions-header-text, .student-table .student-table-header .student-history-header { position: absolute; top: -1000px; left: -1000px; width: 1px; height: 1px; } .student-table .student-table-row { width: 100%; border-bottom: 1px solid #bdbdbd; padding: 10px 0; font-size: 110%; } .student-table .student-table-row .student-table-row-loaded { position: relative; } .student-table .student-table-row .student-table-row-loaded .dot-dot-dropdown-container { position: absolute; top: -5px; right: 0; } .student-table .student-table-row .override-info-cell { width: 25px; } .student-table .student-table-row .override-info-cell .dropdown-container { margin: 6px 0 0 -10px; } .student-table .student-table-row .override-info-cell .dropdown-container:after { content: ""; position: absolute; top: -9px; right: 172px; border-width: 9px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .student-table .student-table-row .override-info-cell .dropdown-container:before { content: ""; position: absolute; top: -10px; right: 171px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .student-table .student-table-row .override-info-cell i { color: #3b3b3b; font-size: 115%; } .student-table .student-table-row .override-info-cell i.dcg-hovered { color: #333; } .student-table .student-table-row .override-info-cell i.dcg-depressed { color: #000; } .student-table .student-table-row .override-info-cell .override-info-dropdown { min-width: 230px; padding: 15px; } .student-table .student-table-row .override-info-cell .override-info-dropdown .label { font-size: 90%; margin-bottom: 5px; color: #666; } .student-table .student-table-row .override-info-cell .override-info-dropdown .account-name, .student-table .student-table-row .override-info-cell .override-info-dropdown .overridden-name { margin-bottom: 15px; color: #000; } .student-table .student-table-row .student-first-name, .student-table .student-table-row .student-last-name, .student-table .student-table-row .student-email { overflow: hidden; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .student-table .table-header, .student-table .table-cell { display: inline-block; vertical-align: middle; padding-right: 5px; } .student-table .table-header { color: #929292; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .student-table .table-header .sort-btn { color: #3b3b3b; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin-left: 5px; border-radius: 50%; width: 28px; height: 28px; font-size: 120%; } .student-table .table-header .sort-btn.disabled { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); cursor: default; pointer-events: none; } .student-table .table-header .sort-btn.dcg-hovered:not(.disabled) { color: #333; background: rgba(0,0,0,0.1); } .student-table .table-header .sort-btn.dcg-depressed:not(.disabled) { color: #000; background: rgba(0,0,0,0.2); } .student-table .student-first-name.has-override-icon { width: calc(25% - 25px); } .student-table .student-first-name, .student-table .student-last-name { width: 25%; } .student-table .student-email { width: 25%; } .student-table .student-email span { width: 100%; display: inline-block; overflow: hidden; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .student-table .student-history-link:not(.no-dropdown) { width: 20%; padding-left: 5px; } .student-table .student-history-link.no-dropdown { width: 25%; text-align: right; } .student-table .dropdown-container:after { content: ""; position: absolute; top: -9px; right: 10px; border-width: 9px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .student-table .dropdown-container:before { content: ""; position: absolute; top: -10px; right: 9px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .restore-student-name { color: #9c0d63; text-decoration: underline; } .restore-student-name.dcg-hovered { text-decoration: none; } @media screen and (max-width: 975px) { .student-table .table-header, .student-table .table-cell { width: 30%; } .student-table .student-first-name.has-override-icon { width: calc(30% - 25px); } } /* src/js/blocks/teacher/unassign-activity-modal.styl */ .unassign-modal-contents { padding: 26px; } .unassign-modal-contents .unassign-modal-header { font-size: 150%; margin-bottom: 13px; } .unassign-modal-contents .unassign-modal-message ul { margin: 26px 0; padding: 0 26px; } .unassign-modal-contents .unassign-modal-message b { font-weight: 500; } .unassign-modal-contents .unassign-modal-message .unassign-modal-message-bold { font-weight: 500; } .unassign-modal-contents .unassign-modal-message .unassign-modal-message-students { margin-bottom: 26px; } .unassign-modal-contents .unassign-modal-message .unassign-modal-message-prompt { margin-bottom: 26px; } .unassign-modal-contents .unassign-modal-message-students-count { font-weight: 500; color: #db2e00; } .unassign-modal-contents .action-buttons { background: #f6f6f6; margin: 0px -39px -39px; padding: 32px 39px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: right; -moz-box-pack: right; -o-box-pack: right; -ms-flex-pack: right; -webkit-justify-content: right; justify-content: right; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .unassign-modal-contents .action-buttons .submit-btn { margin-left: 13px; } .unassign-modal .modal-container { width: 598px; } /* src/js/dashboard/comments/comments.styl */ .dashboard-feedback-comments, .periscope-grading-tool { position: absolute; top: 44px; left: 0; bottom: 0; right: 0; } .dashboard-feedback-comments .dashboard-flex-container, .periscope-grading-tool .dashboard-flex-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; border: 1px solid rgba(0,0,0,0.2); border-top: 0; } .dashboard-feedback-comments .dashboard-flex-container .dashboard-comment-list-container, .periscope-grading-tool .dashboard-flex-container .dashboard-comment-list-container { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; position: relative; } .dashboard-feedback-comments .not-signed-in-warning, .periscope-grading-tool .not-signed-in-warning { padding-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); font-size: 0.9em; color: #676767; line-height: 1.5em; } .dashboard-feedback-comments .only-owner-message, .periscope-grading-tool .only-owner-message { border-top: 1px solid #e9e9e9; background: #f6f6f6; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); font-size: 0.9em; font-style: italic; } .dashboard-feedback-comments .new-comment, .periscope-grading-tool .new-comment, .dashboard-feedback-comments .dcg-edit-comment, .periscope-grading-tool .dcg-edit-comment { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; border-top: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; background: #f6f6f6; } .dashboard-feedback-comments .new-comment .feedback-status-indicator, .periscope-grading-tool .new-comment .feedback-status-indicator, .dashboard-feedback-comments .dcg-edit-comment .feedback-status-indicator, .periscope-grading-tool .dcg-edit-comment .feedback-status-indicator { margin-top: calc(calc(var(--rhythm-unit-px, 12) / 16 * 1rem) - 8px); height: 40px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #3b3b3b; font-weight: 500; } .dashboard-feedback-comments .new-comment .feedback-status-indicator i, .periscope-grading-tool .new-comment .feedback-status-indicator i, .dashboard-feedback-comments .dcg-edit-comment .feedback-status-indicator i, .periscope-grading-tool .dcg-edit-comment .feedback-status-indicator i { margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .dashboard-feedback-comments .new-comment .feedback-status-indicator.loading, .periscope-grading-tool .new-comment .feedback-status-indicator.loading, .dashboard-feedback-comments .dcg-edit-comment .feedback-status-indicator.loading, .periscope-grading-tool .dcg-edit-comment .feedback-status-indicator.loading { color: #676767; } .dashboard-feedback-comments .new-comment .feedback-status-indicator.success i, .periscope-grading-tool .new-comment .feedback-status-indicator.success i, .dashboard-feedback-comments .dcg-edit-comment .feedback-status-indicator.success i, .periscope-grading-tool .dcg-edit-comment .feedback-status-indicator.success i { color: #00866b; } .dashboard-feedback-comments .new-comment .feedback-status-indicator.error, .periscope-grading-tool .new-comment .feedback-status-indicator.error, .dashboard-feedback-comments .dcg-edit-comment .feedback-status-indicator.error, .periscope-grading-tool .dcg-edit-comment .feedback-status-indicator.error { font-weight: 400; } .dashboard-feedback-comments .new-comment .feedback-status-indicator.error i, .periscope-grading-tool .new-comment .feedback-status-indicator.error i, .dashboard-feedback-comments .dcg-edit-comment .feedback-status-indicator.error i, .periscope-grading-tool .dcg-edit-comment .feedback-status-indicator.error i { color: #db2e00; margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .dashboard-feedback-comments .new-comment .dcg-rich-text-container.dcg-disabled, .periscope-grading-tool .new-comment .dcg-rich-text-container.dcg-disabled, .dashboard-feedback-comments .dcg-edit-comment .dcg-rich-text-container.dcg-disabled, .periscope-grading-tool .dcg-edit-comment .dcg-rich-text-container.dcg-disabled { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); pointer-events: none; } .dashboard-feedback-comments .new-comment .fake-comment-box, .periscope-grading-tool .new-comment .fake-comment-box, .dashboard-feedback-comments .dcg-edit-comment .fake-comment-box, .periscope-grading-tool .dcg-edit-comment .fake-comment-box { background: #fff; border-radius: 0.1875em; height: 3.5em; position: absolute; left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); opacity: 1; -ms-filter: none; filter: none; } .dashboard-feedback-comments .new-comment .fake-comment-box.focused-style, .periscope-grading-tool .new-comment .fake-comment-box.focused-style, .dashboard-feedback-comments .dcg-edit-comment .fake-comment-box.focused-style, .periscope-grading-tool .dcg-edit-comment .fake-comment-box.focused-style { border: 1px solid #3278c8; -webkit-box-shadow: 0 0 0 1px #3278c8; box-shadow: 0 0 0 1px #3278c8; } .dashboard-feedback-comments .new-comment .fake-comment-box:not(.focused-style), .periscope-grading-tool .new-comment .fake-comment-box:not(.focused-style), .dashboard-feedback-comments .dcg-edit-comment .fake-comment-box:not(.focused-style), .periscope-grading-tool .dcg-edit-comment .fake-comment-box:not(.focused-style) { border: 1px solid #e9e9e9; } .dashboard-feedback-comments .new-comment .fake-comment-box.hide, .periscope-grading-tool .new-comment .fake-comment-box.hide, .dashboard-feedback-comments .dcg-edit-comment .fake-comment-box.hide, .periscope-grading-tool .dcg-edit-comment .fake-comment-box.hide { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: opacity 1ms linear 100ms; -moz-transition: opacity 1ms linear 100ms; -o-transition: opacity 1ms linear 100ms; -ms-transition: opacity 1ms linear 100ms; transition: opacity 1ms linear 100ms; } .dashboard-feedback-comments .new-comment .edit-textbox-footer, .periscope-grading-tool .new-comment .edit-textbox-footer, .dashboard-feedback-comments .dcg-edit-comment .edit-textbox-footer, .periscope-grading-tool .dcg-edit-comment .edit-textbox-footer { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .dashboard-feedback-comments .new-comment .edit-textbox-footer .edit-actions .btn, .periscope-grading-tool .new-comment .edit-textbox-footer .edit-actions .btn, .dashboard-feedback-comments .dcg-edit-comment .edit-textbox-footer .edit-actions .btn, .periscope-grading-tool .dcg-edit-comment .edit-textbox-footer .edit-actions .btn { height: auto; } .dashboard-feedback-comments .new-comment .edit-textbox-footer .edit-actions .btn + .btn, .periscope-grading-tool .new-comment .edit-textbox-footer .edit-actions .btn + .btn, .dashboard-feedback-comments .dcg-edit-comment .edit-textbox-footer .edit-actions .btn + .btn, .periscope-grading-tool .dcg-edit-comment .edit-textbox-footer .edit-actions .btn + .btn { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .dashboard-feedback-comments .create-comment-options, .periscope-grading-tool .create-comment-options { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin-top: calc(calc(var(--rhythm-unit-px, 12) / 16 * 1rem) - 8px); -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .dashboard-feedback-comments .create-comment-options .send-btn, .periscope-grading-tool .create-comment-options .send-btn { margin: 0; } .dashboard-feedback-comments .create-comment-options .create-comment-options-row, .periscope-grading-tool .create-comment-options .create-comment-options-row { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .dashboard-feedback-comments .create-comment-options .create-comment-options-row > :first-child, .periscope-grading-tool .create-comment-options .create-comment-options-row > :first-child { margin-right: 5px; } .dashboard-feedback-comments .create-comment-options .create-comment-options-row > :last-child, .periscope-grading-tool .create-comment-options .create-comment-options-row > :last-child { margin-left: auto; } .dashboard-feedback-comments .create-comment-options .dcg-tooltip-hit-area-container, .periscope-grading-tool .create-comment-options .dcg-tooltip-hit-area-container { width: fit-content; } .dashboard-feedback-comments .create-comment-options .request-revision-checkbox, .periscope-grading-tool .create-comment-options .request-revision-checkbox { margin-bottom: 10px; } .dashboard-feedback-comments .dashboard-comment-footer .dropdown-anchor, .periscope-grading-tool .dashboard-comment-footer .dropdown-anchor { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .dashboard-feedback-comments .dashboard-comment-footer .feedback-options-dropdown-container, .periscope-grading-tool .dashboard-comment-footer .feedback-options-dropdown-container { display: inline-block; position: relative; } .dashboard-feedback-comments .dashboard-comment-footer .feedback-options-dropdown-container i, .periscope-grading-tool .dashboard-comment-footer .feedback-options-dropdown-container i { font-size: 1em; margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .dashboard-feedback-comments .dashboard-comment-footer .feedback-options-dropdown-container .feedback-options-dropdown .dropdown-container, .periscope-grading-tool .dashboard-comment-footer .feedback-options-dropdown-container .feedback-options-dropdown .dropdown-container { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); right: auto; font-size: 1.2em; } .dashboard-feedback-comments .dashboard-comment-footer .feedback-options-dropdown-container .feedback-options-dropdown .dropdown-container .dropdown-choice i, .periscope-grading-tool .dashboard-comment-footer .feedback-options-dropdown-container .feedback-options-dropdown .dropdown-container .dropdown-choice i { font-size: 1.4em; } .dashboard-feedback-comments .confirm-delete-message, .periscope-grading-tool .confirm-delete-message { background: #fbeae6; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 16px; } .dashboard-feedback-comments .confirm-delete-message .delete-actions, .periscope-grading-tool .confirm-delete-message .delete-actions { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .dashboard-feedback-comments .confirm-delete-message .delete-actions .btn, .periscope-grading-tool .confirm-delete-message .delete-actions .btn { height: auto; line-height: 2.375em; } .dashboard-feedback-comments .confirm-delete-message .delete-actions .btn + .btn, .periscope-grading-tool .confirm-delete-message .delete-actions .btn + .btn { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } /* src/js/dashboard/dashboard-access-modal.styl */ .dashboard-access-modal-contents .dashboard-access-modal-header, .dashboard-access-modal-contents .dashboard-access-modal-details { margin-bottom: 10px; } .dashboard-access-modal-contents .dashboard-access-modal-header { font-size: 150%; } .dashboard-access-modal-contents .dashboard-access-modal-details { color: #666; } .dashboard-access-modal-contents .dashboard-access-modal-details .share-dashboard-details, .dashboard-access-modal-contents .dashboard-access-modal-details .pii-warning { margin-top: 1em; padding-bottom: 10px; } .dashboard-access-modal-contents .dashboard-access-modal-details .share-dashboard-details i, .dashboard-access-modal-contents .dashboard-access-modal-details .pii-warning i { top: 4px; margin-right: 3px; } .dashboard-access-modal-contents .email-input-table-container .table-column-email { width: 100%; margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .dashboard-access-modal-contents .email-input-table-container .table-column-delete .delete-row-button { width: 100%; text-align: center; margin-right: 5px; } .dashboard-access-modal-contents .dashboard-access-header { margin-top: 25px; margin-bottom: 5px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .dashboard-access-modal-contents .dashboard-access-header .manage-coteacher { margin-left: auto; } .dashboard-access-modal-contents .dashboard-access-header .dashboard-access-header-title { color: #888; text-transform: uppercase; font-size: 90%; } .dashboard-access-modal-contents .add-coteacher-btn-container { width: 100%; text-align: center; } .dashboard-access-modal-contents .dashboard-access-error, .dashboard-access-modal-contents .error-loading-block-message { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; background: #f4c0b3; margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .dashboard-access-modal-contents .dashboard-access-error i, .dashboard-access-modal-contents .error-loading-block-message i { margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; } .dashboard-access-modal-contents .loading-dashboard-access { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; } /* src/js/dashboard/dashboard-correctness-indicator.styl */ .dashboard-correctness-indicator:not(.animating-out) { -webkit-animation: fadeIn 0.3s forwards; -moz-animation: fadeIn 0.3s forwards; -o-animation: fadeIn 0.3s forwards; -ms-animation: fadeIn 0.3s forwards; animation: fadeIn 0.3s forwards; } .dashboard-correctness-indicator.animating-out { -webkit-animation: fadeOut 0.3s forwards; -moz-animation: fadeOut 0.3s forwards; -o-animation: fadeOut 0.3s forwards; -ms-animation: fadeOut 0.3s forwards; animation: fadeOut 0.3s forwards; } .dashboard-correctness-indicator.in-grading-mode .correctness-indicator.correct, .dashboard-correctness-indicator.in-grading-mode .correctness-indicator.incorrect, .dashboard-correctness-indicator.in-grading-mode .correctness-indicator.warning { -webkit-box-shadow: 0 0 0 1px #666; box-shadow: 0 0 0 1px #666; background: #fff; } .dashboard-correctness-indicator.in-grading-mode .correctness-indicator i.correctness-icon { color: #666; } .dashboard-correctness-indicator.in-grading-mode .score-indicator { bottom: 4px; } .dashboard-correctness-indicator .correctness-container { position: absolute; bottom: 9px; right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } /* src/js/dashboard/grading/periscope-grading-button.styl */ .periscope-grading-button .score-indicator { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .periscope-grading-button .score-indicator .score-bubble { width: 37.5px; height: 37.5px; line-height: 37.5px; } .periscope-grading-button.is-not-pressed .score-bubble.score-0 { color: #676767; background: #f7f7f7; -webkit-box-shadow: 0 0 0 1px #676767; box-shadow: 0 0 0 1px #676767; } .periscope-grading-button.is-not-pressed .score-bubble.score-0.dcg-hovered { background: rgba(103,103,103,0.1); } .periscope-grading-button.is-not-pressed .score-bubble.score-0.dcg-depressed { background: rgba(103,103,103,0.2); } .periscope-grading-button.is-not-pressed .score-bubble.score-1 { color: #76300f; background: #f7f7f7; -webkit-box-shadow: 0 0 0 1px #76300f; box-shadow: 0 0 0 1px #76300f; } .periscope-grading-button.is-not-pressed .score-bubble.score-1.dcg-hovered { background: rgba(118,48,15,0.1); } .periscope-grading-button.is-not-pressed .score-bubble.score-1.dcg-depressed { background: rgba(118,48,15,0.2); } .periscope-grading-button.is-not-pressed .score-bubble.score-2 { color: #c231a0; background: #f7f7f7; -webkit-box-shadow: 0 0 0 1px #c231a0; box-shadow: 0 0 0 1px #c231a0; } .periscope-grading-button.is-not-pressed .score-bubble.score-2.dcg-hovered { background: rgba(194,49,160,0.1); } .periscope-grading-button.is-not-pressed .score-bubble.score-2.dcg-depressed { background: rgba(194,49,160,0.2); } .periscope-grading-button.is-not-pressed .score-bubble.score-3 { color: #834fbf; background: #f7f7f7; -webkit-box-shadow: 0 0 0 1px #834fbf; box-shadow: 0 0 0 1px #834fbf; } .periscope-grading-button.is-not-pressed .score-bubble.score-3.dcg-hovered { background: rgba(131,79,191,0.1); } .periscope-grading-button.is-not-pressed .score-bubble.score-3.dcg-depressed { background: rgba(131,79,191,0.2); } .periscope-grading-button.is-not-pressed .score-bubble.score-4 { color: #3278c8; background: #f7f7f7; -webkit-box-shadow: 0 0 0 1px #3278c8; box-shadow: 0 0 0 1px #3278c8; } .periscope-grading-button.is-not-pressed .score-bubble.score-4.dcg-hovered { background: rgba(50,120,200,0.1); } .periscope-grading-button.is-not-pressed .score-bubble.score-4.dcg-depressed { background: rgba(50,120,200,0.2); } .student-activity-header .student-activity-header-center-content .halo-icon-button.no-score-button { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); border: 1px solid #bdbdbd; } .student-activity-header .student-activity-header-center-content .halo-icon-button.no-score-button:after { content: ''; width: 5px; height: 2px; background: currentColor; position: relative; top: -2px; margin-bottom: -5px; } /* src/js/dashboard/grading/periscope-grading-tool.styl */ .periscope-grading-tool { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background: #f7f7f7; } /* src/js/dashboard/grading/score-indicator.styl */ .score-indicator.score-absolute-bottom-right { position: absolute; right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .score-indicator .score-bubble { width: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); line-height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); border-radius: 50%; color: #fff; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .score-indicator .score-bubble.score-0 { background: #676767; } .score-indicator .score-bubble.score-0.dcg-hovered { background: rgba(103,103,103,0.9); } .score-indicator .score-bubble.score-0.dcg-depressed { background: rgba(103,103,103,0.8); } .score-indicator .score-bubble.score-1 { background: #76300f; } .score-indicator .score-bubble.score-1.dcg-hovered { background: rgba(118,48,15,0.9); } .score-indicator .score-bubble.score-1.dcg-depressed { background: rgba(118,48,15,0.8); } .score-indicator .score-bubble.score-2 { background: #c231a0; } .score-indicator .score-bubble.score-2.dcg-hovered { background: rgba(194,49,160,0.9); } .score-indicator .score-bubble.score-2.dcg-depressed { background: rgba(194,49,160,0.8); } .score-indicator .score-bubble.score-3 { background: #834fbf; } .score-indicator .score-bubble.score-3.dcg-hovered { background: rgba(131,79,191,0.9); } .score-indicator .score-bubble.score-3.dcg-depressed { background: rgba(131,79,191,0.8); } .score-indicator .score-bubble.score-4 { background: #3278c8; } .score-indicator .score-bubble.score-4.dcg-hovered { background: rgba(50,120,200,0.9); } .score-indicator .score-bubble.score-4.dcg-depressed { background: rgba(50,120,200,0.8); } .score-indicator .score-bubble .score-text { margin: auto; font-weight: 500; } .score-indicator .score-bubble .no-score { width: 100%; height: 100%; } .score-indicator .score-bubble .no-score:after { content: ''; width: 5px; height: 2px; background: #fff; position: relative; top: -2px; margin-bottom: -5px; } /* src/js/dashboard/grading/sidebar-grading.styl */ .sidebar-grading { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1.5); overflow-y: auto; } .sidebar-grading .selected-students-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .sidebar-grading .selected-students { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; color: #3b3b3b; background-color: #c2d7ef; border-radius: 0.1875em; overflow: hidden; } .sidebar-grading .selected-students .students-label { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; line-height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); background-color: #c2d7ef; } .sidebar-grading .selected-students .students-label.dcg-hovered, .sidebar-grading .selected-students .deselect-button.dcg-hovered { background: -webkit-linear-gradient(90deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05)), -webkit-linear-gradient(90deg, #c2d7ef, #c2d7ef); background: -moz-linear-gradient(90deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05)), -moz-linear-gradient(90deg, #c2d7ef, #c2d7ef); background: -o-linear-gradient(90deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05)), -o-linear-gradient(90deg, #c2d7ef, #c2d7ef); background: -ms-linear-gradient(90deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05)), -ms-linear-gradient(90deg, #c2d7ef, #c2d7ef); background: linear-gradient(0deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05)), linear-gradient(0deg, #c2d7ef, #c2d7ef); } .sidebar-grading .selected-students .students-label.dcg-depressed, .sidebar-grading .selected-students .deselect-button.dcg-depressed { background: -webkit-linear-gradient(90deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), -webkit-linear-gradient(90deg, #c2d7ef, #c2d7ef); background: -moz-linear-gradient(90deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), -moz-linear-gradient(90deg, #c2d7ef, #c2d7ef); background: -o-linear-gradient(90deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), -o-linear-gradient(90deg, #c2d7ef, #c2d7ef); background: -ms-linear-gradient(90deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), -ms-linear-gradient(90deg, #c2d7ef, #c2d7ef); background: linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), linear-gradient(0deg, #c2d7ef, #c2d7ef); } .sidebar-grading .selected-students .more-work-icon { font-size: 120%; padding: 5px 0 5px 10px; } .sidebar-grading .grading-student-name, .sidebar-grading .student-count, .sidebar-grading .deselect-button { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .sidebar-grading .grading-student-name, .sidebar-grading .student-count-text { white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .sidebar-grading .student-count { overflow: hidden; } .sidebar-grading .deselect-button { width: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); border-left: 1px solid #fff; } .sidebar-grading .points-button { height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; border: 1px solid; border-radius: 0.1875em; margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); background: #fff; } .sidebar-grading .points-button[aria-disabled=true] { cursor: default; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .sidebar-grading .points-button .number-label { width: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; color: #fff; font-weight: 500; } .sidebar-grading .points-button .text-label { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: center; border-left: 1px solid; line-height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .sidebar-grading .points-button[data-score="0"] { color: #676767; } .sidebar-grading .points-button[data-score="0"] .number-label { background: #676767; } .sidebar-grading .points-button[data-score="0"][aria-disabled=false]:not([aria-checked=true]).dcg-hovered { -webkit-box-shadow: 0 0 0 1px #676767; box-shadow: 0 0 0 1px #676767; } .sidebar-grading .points-button[data-score="0"][aria-disabled=false]:not([aria-checked=true]).dcg-depressed { color: rgba(88,88,88,1); -webkit-box-shadow: 0 0 0 1px rgba(88,88,88,1); box-shadow: 0 0 0 1px rgba(88,88,88,1); } .sidebar-grading .points-button[data-score="0"][aria-disabled=false]:not([aria-checked=true]).dcg-depressed .number-label { background: rgba(88,88,88,1); } .sidebar-grading .points-button[data-score="0"][aria-checked=true] { background: #676767; border-color: #676767; color: #fff; cursor: default; } .sidebar-grading .points-button[data-score="0"][aria-checked=true] .text-label { border-color: rgba(255,255,255,0.5); color: #fff; } .sidebar-grading .points-button[data-score="1"] { color: #76300f; } .sidebar-grading .points-button[data-score="1"] .number-label { background: #76300f; } .sidebar-grading .points-button[data-score="1"][aria-disabled=false]:not([aria-checked=true]).dcg-hovered { -webkit-box-shadow: 0 0 0 1px #76300f; box-shadow: 0 0 0 1px #76300f; } .sidebar-grading .points-button[data-score="1"][aria-disabled=false]:not([aria-checked=true]).dcg-depressed { color: rgba(100,41,13,1); -webkit-box-shadow: 0 0 0 1px rgba(100,41,13,1); box-shadow: 0 0 0 1px rgba(100,41,13,1); } .sidebar-grading .points-button[data-score="1"][aria-disabled=false]:not([aria-checked=true]).dcg-depressed .number-label { background: rgba(100,41,13,1); } .sidebar-grading .points-button[data-score="1"][aria-checked=true] { background: #76300f; border-color: #76300f; color: #fff; cursor: default; } .sidebar-grading .points-button[data-score="1"][aria-checked=true] .text-label { border-color: rgba(255,255,255,0.5); color: #fff; } .sidebar-grading .points-button[data-score="2"] { color: #c231a0; } .sidebar-grading .points-button[data-score="2"] .number-label { background: #c231a0; } .sidebar-grading .points-button[data-score="2"][aria-disabled=false]:not([aria-checked=true]).dcg-hovered { -webkit-box-shadow: 0 0 0 1px #c231a0; box-shadow: 0 0 0 1px #c231a0; } .sidebar-grading .points-button[data-score="2"][aria-disabled=false]:not([aria-checked=true]).dcg-depressed { color: rgba(165,42,136,1); -webkit-box-shadow: 0 0 0 1px rgba(165,42,136,1); box-shadow: 0 0 0 1px rgba(165,42,136,1); } .sidebar-grading .points-button[data-score="2"][aria-disabled=false]:not([aria-checked=true]).dcg-depressed .number-label { background: rgba(165,42,136,1); } .sidebar-grading .points-button[data-score="2"][aria-checked=true] { background: #c231a0; border-color: #c231a0; color: #fff; cursor: default; } .sidebar-grading .points-button[data-score="2"][aria-checked=true] .text-label { border-color: rgba(255,255,255,0.5); color: #fff; } .sidebar-grading .points-button[data-score="3"] { color: #834fbf; } .sidebar-grading .points-button[data-score="3"] .number-label { background: #834fbf; } .sidebar-grading .points-button[data-score="3"][aria-disabled=false]:not([aria-checked=true]).dcg-hovered { -webkit-box-shadow: 0 0 0 1px #834fbf; box-shadow: 0 0 0 1px #834fbf; } .sidebar-grading .points-button[data-score="3"][aria-disabled=false]:not([aria-checked=true]).dcg-depressed { color: rgba(111,67,162,1); -webkit-box-shadow: 0 0 0 1px rgba(111,67,162,1); box-shadow: 0 0 0 1px rgba(111,67,162,1); } .sidebar-grading .points-button[data-score="3"][aria-disabled=false]:not([aria-checked=true]).dcg-depressed .number-label { background: rgba(111,67,162,1); } .sidebar-grading .points-button[data-score="3"][aria-checked=true] { background: #834fbf; border-color: #834fbf; color: #fff; cursor: default; } .sidebar-grading .points-button[data-score="3"][aria-checked=true] .text-label { border-color: rgba(255,255,255,0.5); color: #fff; } .sidebar-grading .points-button[data-score="4"] { color: #3278c8; } .sidebar-grading .points-button[data-score="4"] .number-label { background: #3278c8; } .sidebar-grading .points-button[data-score="4"][aria-disabled=false]:not([aria-checked=true]).dcg-hovered { -webkit-box-shadow: 0 0 0 1px #3278c8; box-shadow: 0 0 0 1px #3278c8; } .sidebar-grading .points-button[data-score="4"][aria-disabled=false]:not([aria-checked=true]).dcg-depressed { color: rgba(43,102,170,1); -webkit-box-shadow: 0 0 0 1px rgba(43,102,170,1); box-shadow: 0 0 0 1px rgba(43,102,170,1); } .sidebar-grading .points-button[data-score="4"][aria-disabled=false]:not([aria-checked=true]).dcg-depressed .number-label { background: rgba(43,102,170,1); } .sidebar-grading .points-button[data-score="4"][aria-checked=true] { background: #3278c8; border-color: #3278c8; color: #fff; cursor: default; } .sidebar-grading .points-button[data-score="4"][aria-checked=true] .text-label { border-color: rgba(255,255,255,0.5); color: #fff; } .sidebar-grading .clear-selection-button-wrapper { padding-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .sidebar-grading .clear-selection-button-wrapper .btn { width: 100%; height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); } .sidebar-grading .grading-disabled-message { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); text-align: center; } /* src/js/dashboard/sentence-starters.styl */ .sentence-starters { padding: 0 10px 10px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .sentence-starters.hide-buttons .blue-link { visibility: hidden; } .sentence-starters .blue-link + .blue-link { margin-top: 5px; } /* src/js/dashboard/shared/comment-view.styl */ .dashboard-feedback-comment .dcg-prosemirror-editor .ProseMirror { background: #fff; min-height: 3.5em; max-height: 6.5em; border: 1px solid #bdbdbd; border-radius: 5px; margin-bottom: 8px; overflow-y: auto; z-index: 0; } .dashboard-feedback-comment .dcg-prosemirror-editor .ProseMirror:hover { -webkit-box-shadow: 0 0 0 0.0625em #9c0d63 inset; box-shadow: 0 0 0 0.0625em #9c0d63 inset; border: 0.0625em solid #9c0d63; } .dashboard-feedback-comment .dcg-prosemirror-editor.dcg-focused .ProseMirror { border: 1px solid #3278c8; -webkit-box-shadow: 0 0 0 1px #3278c8; box-shadow: 0 0 0 1px #3278c8; background: #fff; -webkit-box-shadow: 0 0 0 0.125em #fff, 0 0 0 0.3125em var(--amp-focus-color, #9c0d63), 0 0 0 0.0625em #9c0d63 inset; box-shadow: 0 0 0 0.125em #fff, 0 0 0 0.3125em var(--amp-focus-color, #9c0d63), 0 0 0 0.0625em #9c0d63 inset; border-color: #9c0d63; } .dashboard-feedback-comment .dcg-prosemirror-editor.dcg-hovered:not(.dcg-read-only) .ProseMirror { border: 1px solid #bdbdbd; -webkit-box-shadow: 0 0 0 1px #bdbdbd; box-shadow: 0 0 0 1px #bdbdbd; background: #fff; } .dashboard-feedback-comment .dcg-prosemirror-editor.dcg-read-only .ProseMirror { background: unset; } /* src/js/dashboard/snapshots/presentation/interactive.styl */ .interactive-snapshot .interactive-sandbox-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; position: absolute; top: 55px; left: 10px; right: 10px; bottom: 10px; background: #fff; } .interactive-snapshot .interactive-snapshot-header { position: absolute; top: 0; left: 0; right: 0; background: #3278c8; color: #fff; height: 55px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .interactive-snapshot .interactive-header-center-content { width: 80px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .interactive-snapshot .interactive-header-center-content i { color: #fff; } .interactive-snapshot .interactive-header-left-content, .interactive-snapshot .interactive-header-right-content { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; max-width: calc(50% - 40px); } .interactive-snapshot .h3.interactive-screen-title { margin: 0; max-width: calc(100% - 57.5px); color: #fff; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .interactive-snapshot .h3.interactive-screen-title .screen-number { padding-right: 15px; margin-right: 15px; } .interactive-snapshot .h3.interactive-screen-title .screen-number span { position: relative; } .interactive-snapshot .h3.interactive-screen-title .screen-number span:after { content: ''; height: 65%; width: 2px; position: absolute; right: -17px; top: 0; background-color: rgba(255,255,255,0.5); margin: 4px 0; } .interactive-snapshot .h3.interactive-screen-title .student-name { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .interactive-sandbox { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow-y: auto; overflow-x: hidden; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; height: 100%; margin: auto; } .interactive-sandbox .full-border-in-modal { border: 1px solid #e2e2e2; } .interactive-sandbox .preview-student-navigation-container { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .interactive-sandbox .preview-student-navigation-container .student-step-container { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .interactive-header-center-content label.amplify-uppercase { z-index: 1; } /* src/js/dashboard/snapshots/snapshot-camera.styl */ .snapshot-camera.btn { width: var(--snapshot-camera-size, 2.5em); height: var(--snapshot-camera-size, 2.5em); line-height: var(--snapshot-camera-size, 2.375em); text-align: center; font-size: var(--snapshot-camera-font-size); border-radius: 50%; padding: var(--snapshot-camera-padding, 0 4px); position: relative; bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; z-index: 1; } .snapshot-camera.btn.active { background: rgba(0,0,0,0.1); } .snapshot-camera.btn:not(.dark-background):not(.active) { text-shadow: calc(1px * -1) calc(1px * -1) 0 #fff, calc(1px * -1) 1px 0 #fff, 1px calc(1px * -1) 0 #fff, 1px 1px 0 #fff, 0 calc(1px * -1) 0 #fff, 0 1px 0 #fff, 1px 0 0 #fff, calc(1px * -1) 0 0 #fff; } .snapshot-camera.btn.dark-background { color: #fff; opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); } .snapshot-camera.btn.dark-background.dcg-hovered { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); } .snapshot-camera.btn.dark-background.dcg-depressed { opacity: 1; -ms-filter: none; filter: none; } .snapshot-camera.btn.dark-background .snapshot-captured.display-notice-below { color: #fff; -webkit-box-shadow: none; box-shadow: none; background: rgba(255,255,255,0.3); padding: 4px 8px; font-size: 0.8em; line-height: 1em; } .snapshot-camera.btn .snapshot-captured { color: #00866b; border-radius: 0.1875em; -webkit-animation: fadeInOut 1.5s forwards; -moz-animation: fadeInOut 1.5s forwards; -o-animation: fadeInOut 1.5s forwards; -ms-animation: fadeInOut 1.5s forwards; animation: fadeInOut 1.5s forwards; white-space: nowrap; margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .snapshot-camera.btn .snapshot-captured.error { color: #db2e00; } .snapshot-camera.btn .snapshot-captured:not(.display-notice-below) { position: absolute; right: var(--snapshot-captured-positioning-right, calc(2.5em + 4px)); height: var(--snapshot-camera-size, 2.5em); padding: 0 5px 0 20px; background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, #fff 10%, #fff 100%); background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #fff 10%, #fff 100%); background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, #fff 10%, #fff 100%); background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, #fff 10%, #fff 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 10%, #fff 100%); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .snapshot-camera.btn .snapshot-captured.display-notice-below { position: absolute; top: 30px; right: 5px; padding: 0 5px; background: #fff; -webkit-box-shadow: 0 0 10px #fff; box-shadow: 0 0 10px #fff; z-index: 1; } @-moz-keyframes snapshotFlash { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.25, 0.25); -moz-transform: scale(0.25, 0.25); -o-transform: scale(0.25, 0.25); -ms-transform: scale(0.25, 0.25); transform: scale(0.25, 0.25); } 15% { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -webkit-transform: scale(0.25, 0.25); -moz-transform: scale(0.25, 0.25); -o-transform: scale(0.25, 0.25); -ms-transform: scale(0.25, 0.25); transform: scale(0.25, 0.25); } 100% { -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -o-transform: scale(2, 2); -ms-transform: scale(2, 2); transform: scale(2, 2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-webkit-keyframes snapshotFlash { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.25, 0.25); -moz-transform: scale(0.25, 0.25); -o-transform: scale(0.25, 0.25); -ms-transform: scale(0.25, 0.25); transform: scale(0.25, 0.25); } 15% { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -webkit-transform: scale(0.25, 0.25); -moz-transform: scale(0.25, 0.25); -o-transform: scale(0.25, 0.25); -ms-transform: scale(0.25, 0.25); transform: scale(0.25, 0.25); } 100% { -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -o-transform: scale(2, 2); -ms-transform: scale(2, 2); transform: scale(2, 2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @-o-keyframes snapshotFlash { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.25, 0.25); -moz-transform: scale(0.25, 0.25); -o-transform: scale(0.25, 0.25); -ms-transform: scale(0.25, 0.25); transform: scale(0.25, 0.25); } 15% { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -webkit-transform: scale(0.25, 0.25); -moz-transform: scale(0.25, 0.25); -o-transform: scale(0.25, 0.25); -ms-transform: scale(0.25, 0.25); transform: scale(0.25, 0.25); } 100% { -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -o-transform: scale(2, 2); -ms-transform: scale(2, 2); transform: scale(2, 2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } @keyframes snapshotFlash { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(0.25, 0.25); -moz-transform: scale(0.25, 0.25); -o-transform: scale(0.25, 0.25); -ms-transform: scale(0.25, 0.25); transform: scale(0.25, 0.25); } 15% { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -webkit-transform: scale(0.25, 0.25); -moz-transform: scale(0.25, 0.25); -o-transform: scale(0.25, 0.25); -ms-transform: scale(0.25, 0.25); transform: scale(0.25, 0.25); } 100% { -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); -o-transform: scale(2, 2); -ms-transform: scale(2, 2); transform: scale(2, 2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } } /* src/js/dashboard/snapshots/take-picture/camera.styl */ .modal-camera.has-qr .camera-component { position: absolute; top: 10px; left: 10px; bottom: 120px; right: 10px; } .modal-camera:not(.has-qr) .camera-component { position: absolute; top: 40px; bottom: 0; left: 0; right: 0; } .camera-component .permission-message, .camera-component .error-message { text-align: center; margin: 60px auto; font-size: 140%; padding: 10px; color: var(--picture-modal-font-color-primary, #666); max-width: 640px; } .camera-component .permission-message .main-error, .camera-component .error-message .main-error { padding: 20px; } .camera-component .permission-message .error-link, .camera-component .error-message .error-link { font-size: 80%; } .camera-component .permission-message .pillow-icon-error, .camera-component .error-message .pillow-icon-error { display: block; font-size: 150%; color: #fa824c; } .camera-component .permission-message .blue-link, .camera-component .error-message .blue-link { margin: 0 5px; } .camera-component .take-picture-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .camera-component .take-picture-container .video-container { position: absolute; top: var(--video-container-position-top, 10px); bottom: 90px; left: var(--video-container-position-left, 10px); right: var(--video-container-position-right, 10px); border: 1px solid #bdbdbd; border-radius: var(--border-radius-medium, 5px); } .camera-component .take-picture-container .video-container video { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); width: 100%; height: 100%; border-radius: var(--border-radius-medium, 5px); } .camera-component .take-picture-container .button-container { position: absolute; bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .camera-component .take-picture-container .button-container .image-capture-button { width: var(--camera-btn-size, auto); height: var(--camera-btn-size, auto); color: var(--camera-btn-color, #fff); background: var(--camera-btn-background, #9c0d63); -webkit-box-shadow: var(--camera-btn-box-shadow); box-shadow: var(--camera-btn-box-shadow); } .camera-component .take-picture-container .button-container .image-capture-button.dcg-hovered { background: var(--camera-btn-background-hover, #5e083b); } .camera-component .take-picture-container .button-container .image-capture-button.dcg-depressed { background: var(--camera-btn-background-depressed, #2f041e); -webkit-box-shadow: none; box-shadow: none; } .camera-component .take-picture-container .button-container .image-capture-button i { font-size: var(--camera-btn-icon-font-size, 1.5em); line-height: var(--camera-btn-icon-line-height); border: var(--camera-btn-icon-border, none); } /* src/js/dashboard/snapshots/take-picture/candidate.styl */ .edit-picture-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; text-align: center; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .edit-picture-container .candidate-container { border: var(--candidate-container-border, 1px solid #bdbdbd); background: var(--candidate-container-background, #f6f6f6); border-radius: var(--border-radius-medium, 0); overflow: auto; } .edit-picture-container .candidate-container img { object-position: 50% 50%; object-fit: contain; width: 100%; height: 100%; } .edit-picture-container .buttons-container { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .edit-picture-container .buttons-container .edit-controls .controls-group { padding-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); max-width: fit-content; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: single; -moz-box-lines: single; -o-box-lines: single; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .edit-picture-container .buttons-container .edit-controls .rotate-btn i { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } .edit-picture-container .buttons-container .edit-controls .edit-control-btn { color: var(--edit-control-btn-color, #3b3b3b); border: var(--edit-control-btn-border, 1px solid transparent); border-radius: var(--border-radius-large, 1.25em); background: var(--edit-control-btn-background, transparent); } .edit-picture-container .buttons-container .edit-controls .edit-control-btn + .edit-control-btn { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .edit-picture-container .buttons-container .edit-controls .edit-control-btn.dcg-hovered { color: var(--edit-control-btn-color, #3b3b3b); background: var(--edit-control-btn-background-hover, rgba(0,0,0,0.05)); } .edit-picture-container .buttons-container .edit-controls .edit-control-btn.dcg-depressed { background: var(--edit-control-btn-background-depressed); color: var(--edit-control-btn-color-depressed); border-color: #5e083b; } .edit-picture-container .buttons-container .edit-controls .edit-control-btn.contrast-on { background: var(--edit-control-btn-background-contrast-on, #3278c8); border-color: var(--edit-control-btn-color-contrast-on, transparent); color: #fff; } .edit-picture-container .buttons-container .edit-controls .edit-control-btn.contrast-on.dcg-hovered { background: var(--edit-control-btn-background-contrast-on-hover, #1e4878); } .edit-picture-container .buttons-container .edit-controls .edit-control-btn.contrast-on.dcg-depressed { background: var(--edit-control-btn-background-contrast-on-depressed, #0f243c); color: var(--edit-control-btn-color-contrast-on-depressed, #fff); } .edit-picture-container .buttons-container .edit-controls .cancel-candidate { margin-right: 20px; } .edit-picture-container .buttons-container .edit-controls .cancel-candidate.k5-button-secondary { -webkit-box-shadow: var(--secondary-button-box-shadow); box-shadow: var(--secondary-button-box-shadow); line-height: var(--secondary-button-line-height); padding: var(--button-padding); } .edit-picture-container .buttons-container .edit-controls .cancel-candidate.k5-button-secondary.dcg-depressed { -webkit-box-shadow: var(--secondary-button-box-shadow-depressed); box-shadow: var(--secondary-button-box-shadow-depressed); } .edit-picture-container .buttons-container .edit-controls .cancel-candidate i { font-size: var(--submit-upload-icon-font-size); position: relative; } .edit-picture-container .buttons-container .edit-controls .confirm-candidate.is-uploading { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; } .edit-picture-container .buttons-container .edit-controls .confirm-candidate i { font-size: var(--submit-upload-icon-font-size); position: relative; } @media screen and (max-width: 670px) { .edit-picture-container .edit-controls .cancel-candidate { display: none; } } /* src/js/dashboard/snapshots/thumbs/expression-thumb.styl */ .expression-thumb-view { padding: 10px 15px 10px 5px; } /* src/js/dashboard/snapshots/thumbs/text-thumb.styl */ .text-thumb-view { padding: 10px 20px 10px 10px; } /* src/js/dashboard/student-periscope.styl */ .student-periscope.modal-cover .student-navigation-container { position: absolute; top: 0; right: 0; left: 0; bottom: 0; } .student-periscope.modal-cover .preview-modal-title { text-transform: uppercase; color: #bbb; font-size: 20px; width: calc(50% - 110px); display: block; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .student-periscope.modal-cover .full-border-in-modal { border: 1px solid #e2e2e2; margin: 0 10px 10px 10px; } .student-periscope.modal-cover .edit-activity-link { color: #3278c8; text-decoration: none; position: relative; z-index: 1; } .student-periscope.modal-cover .edit-activity-link i { margin-right: 7px; font-size: 80%; } .student-periscope.modal-cover .periscope-loading-message-container { background: #fff; position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center; z-index: 4; } .student-periscope.modal-cover .periscope-loading-message-container .loading-message { font-size: 125%; } .student-periscope.modal-cover .periscope-header .periscope-header-content-left { z-index: 2; font-family: var(--header-font-family); position: absolute; left: 8px; top: var(--student-periscope-header-content-top, 0px); height: 55px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; width: calc(50% - 155px); padding-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .student-periscope.modal-cover .periscope-header .periscope-header-content-left .student-name-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; max-width: 100%; width: 100%; } .student-periscope.modal-cover .periscope-header .periscope-header-content-left .student-navigation-arrows { padding: 0.25em 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .student-periscope.modal-cover .periscope-header .periscope-header-content-left .student-navigation-arrows i { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; cursor: pointer; position: relative; height: 1em; width: 1em; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; -ms-transition: opacity 0.3s; transition: opacity 0.3s; color: #676767; border-radius: 50%; } .student-periscope.modal-cover .periscope-header .periscope-header-content-left .student-navigation-arrows i.dcg-hovered:not(.disabled) { background: rgba(0,0,0,0.05); } .student-periscope.modal-cover .periscope-header .periscope-header-content-left .student-navigation-arrows i.dcg-depressed:not(.disabled) { background: rgba(0,0,0,0.1); } .student-periscope.modal-cover .periscope-header .periscope-header-content-left .student-navigation-arrows i.disabled { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); pointer-events: none; } .student-periscope.modal-cover .periscope-header .periscope-header-content-left .student-navigation-arrows i:focus-visible { background: rgba(0,0,0,0.05); height: 0.8em; width: 0.8em; left: 0.1em; top: 0.1em; margin-bottom: 0.2em; } .student-periscope.modal-cover .periscope-header .periscope-header-content-left .student-navigation-arrows i.icon-v2-caret-up:before { position: relative; top: -1.5px; } .student-periscope.modal-cover .periscope-header .periscope-header-content-left .student-navigation-arrows i.icon-v2-caret-down:before { position: relative; top: 1px; } .student-periscope.modal-cover .periscope-header .periscope-header-content-left .student-information { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); max-width: calc(100% - 34px); height: 55px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .student-periscope.modal-cover .periscope-header .periscope-header-content-left .student-information .preview-student-name { font-size: 1.2em; } .student-periscope.modal-cover .periscope-header .periscope-header-content-left .student-information .preview-student-count { font-size: 0.8em; line-height: 0.8em; color: #676767; margin-top: calc(($rhythm-unit * 0.25)); } .student-periscope.modal-cover .periscope-header .answer-toggle-container { margin-left: 5px; } .student-periscope.modal-cover .periscope-header .answer-key-toggle-option { display: inline-block; border: 1px solid #3278c8; text-align: center; padding: 5px; width: 120px; } .student-periscope.modal-cover .periscope-header .answer-key-toggle-option:first-of-type { border-radius: 5px 0 0 5px; } .student-periscope.modal-cover .periscope-header .answer-key-toggle-option:not(:first-of-type) { border-radius: 0 5px 5px 0; } .student-periscope.modal-cover .periscope-header .answer-key-toggle-option:not(.selected) { color: #3278c8; background: #fff; } .student-periscope.modal-cover .periscope-header .answer-key-toggle-option:not(.selected).dcg-hovered { background: rgba(50,120,200,0.25); } .student-periscope.modal-cover .periscope-header .answer-key-toggle-option:not(.selected).dcg-depressed { background: rgba(50,120,200,0.75); color: #fff; } .student-periscope.modal-cover .periscope-header .answer-key-toggle-option.selected { background: #3278c8; color: #fff; } .student-periscope.modal-cover.challenge-creator-modal .student-sandbox-navigation-container .screens-container { margin-top: 0; } @media screen and (max-width: 850px) { .student-periscope.modal-cover .preview-modal-title, .student-periscope.modal-cover .edit-activity-link { display: none; } .student-periscope.modal-cover .answer-toggle-container { padding-left: 5px; } .student-periscope.modal-cover .answer-toggle-container .answer-key-toggle-option { width: 85px; font-size: 75%; } } /* src/js/lib/albany/touchtracking.css */ /* we want to position things relative to the dcg-tap-container, e.g. tooltips. but putting position:relative on body breaks layout. if it's the whole body, then we don't need to worry about absolute positioning of a child relative to the element anyhow */ .dcg-tap-container:not(body) { position: relative; /*so that we can absolutely position e.g. tooltips inside of our API*/ } .dcg-focus-by-tap:focus { outline: none; } /* src/js/lib/dcgview-shim.styl */ [ontap] { cursor: pointer; } /* src/js/lib/small-screen-notice.styl */ .small-screen-notice.modal-cover.full-width { text-align: center; } .small-screen-notice.modal-cover.full-width .modal-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .small-screen-notice.modal-cover.full-width .modal-contents-wrapper { padding: 20px 40px 60px; border-radius: 0; } .small-screen-notice.modal-cover.full-width .small-screen-image { width: 40%; padding: 15px 15px 0; } .small-screen-notice.modal-cover.full-width .title { font-weight: 300; font-size: 200%; margin: 30px auto; } .small-screen-notice.modal-cover.full-width .message { font-size: 120%; margin-bottom: 30px; } .small-screen-notice.modal-cover.full-width .amp-link { display: inline-block; margin: 0 auto; } /* src/js/packages/rich-text-view/prosemirror/mq-node.styl */ .dcg-mq-node { position: relative; -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; display: inline-block; } .dcg-mq-node .dcg-calculator-api-container .dcg-mq-math-mode { border: 1px solid transparent; } .dcg-mq-node .dcg-calculator-api-container .dcg-mq-math-mode .dcg-mq-root-block { overflow: visible; vertical-align: baseline; } .dcg-mq-node .dcg-calculator-api-container .dcg-mq-math-mode.dcg-mq-focused { -webkit-box-shadow: none; box-shadow: none; border: 1px dotted #999; } .dcg-mq-node .dcg-calculator-api-container .dcg-mq-math-mode * { -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; } .dcg-mq-node .dcg-calculator-api-container .dcg-mq-math-mode * ::selection { background: rgba(0,0,0,0); } .dcg-mq-node .dcg-calculator-api-container .dcg-mq-math-mode * ::-moz-selection { background: rgba(0,0,0,0); } .dcg-mq-node .dcg-mq-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; border: 0; -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; } /* src/js/packages/rich-text-view/prosemirror/prosemirror-custom.styl */ /* Copied from src/js/activitybuilder/components/shared/prosemirror/prosemirror-custom.styl */ .prosemirror-container { line-height: 1.2em; position: relative; } .prosemirror-container .dcg-prosemirror-editor { -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; position: relative; z-index: 0; } .prosemirror-container .dcg-prosemirror-editor .ProseMirror { outline: none; } .prosemirror-container .dcg-prosemirror-editor p { margin: 0; padding: 0; } .prosemirror-container .dcg-prosemirror-editor h1, .prosemirror-container .dcg-prosemirror-editor h2 { line-height: 1.2em; } .prosemirror-container .dcg-prosemirror-editor ul { margin: 10px 0; padding: 0 10px; list-style-position: outside; } .prosemirror-container .dcg-prosemirror-editor ul li { margin-left: 12px; } /* src/js/player-api/api.styl */ .dcg-activity-player-api-container { /** TODO! /* these are copied from shared-page-styles.styl /* but are too specific to include in their current form. **/ position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow-x: hidden; overflow-y: auto; position: absolute !important; } .dcg-activity-player-api-container * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .dcg-activity-player-api-container .dcg-focus-by-tap:focus { outline: none; } .dcg-activity-player-api-container .momentum-scroll { -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: auto; } .dcg-activity-player-api-container textarea { font: inherit; resize: none; overflow-y: auto; overflow-x: hidden; } .dcg-activity-player-api-container .screens-container .dcg-student-screen { -webkit-transition: opacity 0.4s; -moz-transition: opacity 0.4s; -o-transition: opacity 0.4s; -ms-transition: opacity 0.4s; transition: opacity 0.4s; -webkit-animation: dcg-fadeIn 0.4s; -moz-animation: dcg-fadeIn 0.4s; -o-animation: dcg-fadeIn 0.4s; -ms-animation: dcg-fadeIn 0.4s; animation: dcg-fadeIn 0.4s; } /* src/js/shared-components/Abraham.css */ @font-face { font-family: Abraham; src: url(data:application/font-woff;base64,d09GRk9UVE8AABesAAoAAAABsHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAGCAAAESoAAZxTwK+1TU9TLzIAAAFMAAAASAAAAGBqcY7HY21hcAAAArwAAAM/AAAM5C7FvppoZWFkAAAA9AAAAC8AAAA2C10Dp2hoZWEAAAEkAAAAHwAAACQGhwJ4aG10eAAAFzQAAAAkAAACiN3nXcBtYXhwAAABRAAAAAYAAAAGAKJQAG1ldGEAABdYAAAAUQAAAFXVMTtBbmFtZQAAAZQAAAEmAAACx11IF6xwb3N0AAAF/AAAAAwAAAAgAAMAAHgBY2BkYADh+nP6yvH8Nl8ZmJlfMADBlQ8P9BH0f3OmFGYjIJeZgQkkCgBSDwurAHgBY2BkYGBW+2/HwMD0myHl/xymX0ARVLAIAIH7BgMAAABQAACiAAB4AWNgZvrC+IWBlYGBqYtpNwMDQw+EZrzPYMjIxIAKmMEkC4QTAQQMDgy8GvbMav/tgJJGDCeBwoxghXLMcgwKQMgAAHxDCyh4AUzOuwkCYRBF4TP7frO7ghgZiBhbwGbagJFlWIAlmduFPckPN7jZx8wwHOAcXwIACJCDHbmcUbPJOUcecmE3JSc+csWBp1zbz8bcmjtzbx7Mo3kyz9awWOea5mlTtEBGyMGFvZwxcZNzNl5yYTcld35yxZW3XNvPxtyaO3NvHsyjeTLP1rBY55rm/6rGGFVDGAjCc5RcQFGws7Kxs7Gwj7pqMCaw6v3/wTwehJCE3Rm+z8B0s9rDXkWIoXiDW+Iq6DBDYXHwXigQEBH4v3wdFk4rZJT99VYxQrAz8ixrXVZV0/4xiUzE/26NEhVPgzaXJEUuyMmT6O1iMMnQx/Dc4jcz2FOUS64xsa+44T6WyWz9t3uYCjw2pgMsTk6amqn9A7mESTQAAHgBDMVlMwQBAADQt9gxY8Y3P0Bb3b2a1d3d3Vzccfx23peHIsUCVPxfRhgrCSOCJKBUgnKVqlSrUatOvQaRRk2atWjVpl2HTl269ejVp9+AQUOGxUaMGjNuwqQp02YkZs2Zt2DRkmUrVq1Zt2HTlm07du3Zd+DQkWMnTp05d+HSlWs3bt259+DRk2cvXr159+FTSlpGVk7el28FP379sU/fOE4GUBDHne1dh83BOdt/55yD78LJEBXX4BbUnIH+Y4opOIAlhOQZ/YrXjvS+EiJMhCgx4iRIkuKOe9JkyJLjgUeeeOaFV95454NP8hQoUqJMhSo16jRo0qJNhy7Qo8+AISPGTJgyY86CJSvWbNiyY8+BIyfOXIJAK15lx9uOwe/g13/dHz+//Nvq26+RWzISSn739U3+TtbCUrOI1C0qDYtJ0+LSsoS0LSkdS0nX7gS7l56lpW8ZGVhWhpaTkT3I2B5lYk8ytWeZ2YvM7VUW9iZLe5eVfcjaPmVjedlaQXZWlL2V5GBlOVpFTlaVs9XkYnX5wwI93TAAAAAQXa22bdt2O3tzyX28BV5AXAfFdQheh8V1RFxHxXVMXMfFdUJcJ8V1SlynxXUGXmfFdU5c58V1QVwXxXVJXJfFdUVcV8V1TVzXxXVDXDfhdQtet+F1B1534XUPXvfh9QBeD+H1CF6P4fUEXk/h9Qxez+H1Al4v4fUKXq/h9QZeb+H1Dl7v4fUBXh/h9Qlen+H1BV5f4fUNXt/h9QNeP+H1C16/4fUHXn/h9U9/EujaCAEAAGAg7u4CfcZmVC6X4hd4r3/qmoG6ZqiuGcVrxvGaSbxmGq+ZxWvm8ZpFvGYZr1mpa9bqmo26Zquu2alr9uqag7rmqK45qWvO6pqLuuaqrrmpa+7qmoe65qmuealr3uqaj7rm+y8pro4aAAAoCF4luLu7lIZD3F1I0mnezH3srHjLK+I9r4qPvCY+87r4yhviO2+Kn7wlfvO2+Ms7opB3RTHviVLeF+V8ICr5UFTzkajlY1HPJ6KRT0Uzn4lWPhftfCE6+VJ085Xo5WvRzzdikG/FMN+JUb4X4/wgJvlRTPOT+M/PYpZfxDy/isUS0BD9swB4AWNgZsALAAB9AAR4AVTRe3RU1RUG8O/bNzElREIAiSEPE9NoxIbm/aCyXAHkUUgoxKYBFpI7M2cyQ2bundyZSYAlVqstVowghVItlAq0gFiEghYFhTZVIxUVSSuIysMSpUBBYyFpinbIYa2u/nN/e+117t777EPEESTTql2O6TODlm1FLb/b9qhZqikaMB2QzO9NR2+G9GYYvZlxy/rn9b3ctzw+E4iX5Nj3hntSlmWCa+uGYZOAyEU5xmESpmEmZsMNP0JYhEfQjjVYj43Ygu3YjZfwCg6gA514C+/iCI7iI5xCNy6iB734mgkcxEQOZhJv5BAmcyhTOIzDOYI3cSRTeTPTOIrpzGAms3gLs5nDW5nLMazgBNaygfN4H+ezkSZddNNDRS+b6KOfC9jMAIO0aDPEFjoMM8IoW9nGB/kw27mGm7mdL3AfO3iQh3mUJ9jNC/yS/SIySIZKqmRJnnxLSmSsVMsUmSH1Mk880iyOLJIHZak8IatlrWyUZ2Wn7JH98rocki45LqflrFySK/KVEW8kGcONUUaOkW982yg3xhkTjWnGLGO20Wg01Ssn7Let7KIxhYWl35lkW5GwCniza8xm5cSSsfT1JyuwbKvg/x/NHTvt2IEJs8Ih063UQnfADLZE7YjyuAJWNOi6VrrJ8tiB2NmQctzKipjBWBA2Lc/AubDfagqokOkoK6C8kYHA8Tf5ImY4ohx/uDkUiIbddjBo+haFfMoKxZK2Jxwww77FyrFtS0Xa7IjPUcprRx2vvzVWcWFYtSpLXati+S3ltgO2FVZB/0AQUOGwaomagSZHmbEWLVEVjsSub0aqx0+YeM+kyVOmfnfa9JraGd+bOavu3u/X/6Bh9pzY9d3NKnJtQFcsGuh+PXd9Vrff7/Y77mgwanmUExvYUU2O2apMl9ujvE0+/4LmQNCyQy1OOBJtbVu4aPG1/5Wu6AzE/6sU8Qc8KrZrl6PM5th+BnYb23txZWGhpkhTrCnRlGrKNOWaCk2lpkpjalwat8ajURrvAEWFmiJNsaZEU6op05RrKjSVmiqNqXFp3BqPRml0v+JCTZGmWFOiKdWUaco1FZpKTZXG1Lg0bo1HozS6X0mhpkhTrCnRlGrKNOWaCk2lpkpjalwat8ajURovAD7GZXyc7XyCy7mCT3Ilf8ZVXM2fcw1/waf4NH/JtVzHX3E9f81nuIEbuYm/4W+5mVu4lc9yG5/j77idz3MHd/L33MXdfIEv8g/cw5f4MvdyH1/hq9zPA/wj/8QO/pmv8XW+wU6+yYP8C9/iIb7Nd/guD/M9HmEX/8q/8X0e5TF+wOP8kB/xY57gSZ7iaX7Cv/MMu/kpP+NZ/oPneJ4X+E9e5CV+zi/Ywy/5L17mFfayj/9mP//Dq/yKXwuEImJInMTLDZIg35BBkiiDJUlulCGSLEMlRYbJcBkhN8lISZWbJU1GSbpkSKZkyS2SLTlyq+TKNyVPbpPbJV/ukNHYYAAE4oAEIBGyAvEjkbAWiaORtAPJ5UjZhxHjMbITabVI70LWHGSfRK4XeeeR34o741CwEoXZKN6OsrtQcRBjG3DXadwdQvVlTLwfkwVTH8X0IahdhZmjUHcI9XVoOIa58zHvDBqb4focqg2+AizYhWAV7P2IbETbHVj0PO4vwwN78VA1Hn4DP6nBo0ewbDbaT2CFwspzWN2CNVfw9BKsM7D+p9iQjE2rsXkKtr6N5+7F9g+wsxG7uvFiAHu+wN4teHUMDuxGx1h0ZuHgJhwajXd24L1ydO3D++NxrBMf1uLjLpyag09OotuLz87jnIMLvbj0AHri0JOAngZcHozep9Cfi6tbiRLKm4yfwYRjTJzPpLNMDjPlKkcsY2oa09YzI49Z25hTxdz9vK2G+Ud4p8mCT1kYZHEPy5aw0uDYdo5L593PcPztnLiTkys49TVOn8baw5w5l3VnWG+zoY9zl/K+FDaupzuPahd9P2bzYFo5DG1juIrRDi6s4eLjXOLnDy/yR1E+0s+lD/GxBD7ezuWpfHIdV+X2ZQ35b3vXH1tXXcXvq5TcdRtFs8rohkPHCjRzndK0lrAR1iZbg6nGpzJmSUqmf1DTwQDdEn4IMoP6VWZeTP8QdGo3S5bGOKKsiUVTQjqXVTeYzKX9Z2Rdt1nMuh9dJm3f8d7PTb/t3mt4vcJp77t8EnLv+L737rnnns/9nPM95/s9vVLr//ffF4xI1fbyEmMKpeCba18x/r/Me09iYPzF7gYTfLTy9Zdk7J2uz5QYcb5Q8z2RtyoWiPPZI5dEDvQ8a9zghGEcDAZc/9TxDXzRG67/HH5s3OCEYe/w6mH/osk9rqSPLxo0uiKcE09tlsStQ6W+mOuP1YlcqPmROAt7tomcu73LuMEJwzgYDLj+qbgVX/SGk7/Hj40bnDDsHTq+4l90uNkVWfb9X+pqAiVwULbJz9pXG9WHNWMUJk59dRAo1LUdUKgrIvHwxiOxsN0kCvPdJlHkQjJItN+n+KNQOlP1ma939YTW5ddB6/KFBsPTa31wQuu3L0Drty8aDGe93jjoinHWt+yHNvF4r9QZImpoxPunCxFrO33A62oCTiQKYzBLUYCI3iyFXGhnKfluO6AwQlxIVucsJQKakNWJQmoSgVidsxN6ZHJhFPwY58jkQnIhNSEXEoVEIblQ6JGZLyQKo4FCD2AbVkjBpqLHJiUlGyckFZ8JKtfNkNSXKen2Af+LZf5wk//jVkgavtH4Qtr8z36Niy71lCnd3y9jZysK8875cwGFUV/CAyQ6rz3UCySGlWSRuM0iMUvSJBJlXWslkBj/BWX6y7Ai4ERU0dh46LCmpAk0DrbsDY9G2jBfNCE3crEtNIkLGruW1wVoDPBlL9mULWkqvoL7srDbli1p6n1J4uUlWywaLfgsGi08JX3fQGoCjdAFYTF0yY6WJ3WZcj8HIT07Wr7qfpy22iFTEs4q4SwOmMCGqmIgQVkTZ0d7BeSo2gQzmIElN2eisc+isRmSik8bX/YD06KxY/eEpOHFARpbIansaus/szw1QzSeT2aisQ+aT3c/VvPQ99NWXR4TNHbsmm90H5bVRFMM40YusmDcyOxOCDGMG6uBr+liAouvEDFBuLhx/OiazUCjfrQVF0+dqjeqAZ1RjxkjwIv00ty8GvV6NOtnXKdIFBKFXJtDBuH+FU5mqQl3lHLvEdcpfhTjQmpCLuR6e3LhzlAofP6YbnIRttMVETIFRk1k6chPRUYT48pgT298U8auPLhhAor7MqH4JQzEv3ki17pGXxOiMB81YRBJ28W5hSdRSBRGP7YgCmk7prjJhSy0EIVEIefIJv3kHOKUPpurIn/3z0Fx/tGyNzL5RXIn/0QQAKZaQvg/aQInfBHD2c8KB4MB685Yb4mQTdKjtz0lY4O/uZyD49S4kBUKaqIwmzlxZ4+Hws4q/3au++TrIpd+vkKc+d/uEzl/9m7j+qe1xh8uw2cG467BuP/Ffnzm/7jbuLiGwe/xmcG4K3LLS13iOB97V9l+/ZvrPPudXqWrDYhTV0Ti8UeHPU3OXZv/c7PuE+0y/sYL3ynxFLznQW943q03iVw+ftJ/SH/Z5QYnjOCA/zVucMIIfmLwczc4YSQ44KL+RXrf6/FEXP/OFv+N+3MDDgYDbnASuVD3CoZFzn0qZdzghGEcDAbc4IQvYhg/9kUkNg0n9bU4oKoFTC7OHYU1+a6J5TjuqmMlj3lDopCVPM46+D6RC2k7opAoZCWPHpkemTWRGKCQHpl/sJ5+jKsv2NCBlTmikLnemHhkemR6ZNZO2GKJrE4UEoWcnbDpIVuWsdEX22Ox9SZRyNiC7ebYpI2akAupCf9QPVtvEoVsvUlN2HqTCwZYdNadyhCFLPcRhWx6SBQShSz3EYW0HVPc5EIWWohCopBzZLbepM9m601yJzHJ1pust7D1JisU1IStN9l6k6032XqTrTfZVoSVPDb6IgpZyeOsg+8TuZC2IwqJQlby6JFpO7ZYIhfSI7PRFxt9cY5MFDK2IAqZ66VHJhdy7RmbHpJBiEKikBU8xoVsvcnWm3OIQjY9ZOtNopCxBVtvskkb281dqZ1xxznHaauTsVu6G3L0A2MLu/zThC3sxHntoV4p2FT0mLLm61orZexsRSF3WLNO9H7p89qa7Tkh8vKSLZKe135XSTgB4W5enDU124GTvEeis75l/4z9NsuJIZB4av3RqWSF28cdQ6WwGkNBA2UzNN75B/VX/JEvw3a6mgDsqiKgRBw0sVvvxVnQ3aDmnbn9ntvvR3LwnI0T/a/MRpw4uLV1hnFiZ5W+Fewea3XXeXrVjLWhNtZLczH4XGrCWFGcrp4felKAXnvHTdmKTEVvoLYF9bZsRaaqjUelKwKuE3JmJoaaOHuOjAbZnHCQCQdHSSTaK2w2x9Ka5TlLfJHgQ7aC58IfYA9IzIFYSd93fs8EEvG48BTxuIKHi1GDkexMDkbwKDGag3J0RaSTTbshR5kLOnY1KmtiyVNXjNNWddxoPix1JBKJsdAEEpSRaDM5RZV3q8YkZjbCnqfP9kr646XLcr1T40fXbMY7pWs/Z8cfa/UJy8SGE5HJSXx+2f36mRzAhNNzlXJODGLF6NSfiUbuPmc+kRDR58Too5B/xIr5KKKQKNRndcaH0Qc8d6GTEwkRciL7nDEIiDYnEiKMExsPHdZUxq5PbNlLwDMIICcSIhG1SQRQyAwONVHYSRX5/UcPf+vkrNjuFzfFQBOuSeT6qdwipPHgbXFZf0OvzCY8+cGH+qv4uLKZfCiJgSVbc62MtcpM5qdDK/PM8ntEagrvjNay1RigEe9VDOIMZm7onfNpzmxRyFavjBHnes6czJwz91lf1hz4stPwZQ9M78t2W1+2OHgxWoHEsgxfVl2uHln97Rjsp6sJfJmqCEAkFppYPmQT77lqfsp25BMzlZux7mbKTKXPzlSy8G5nKqHwjplKCutuIka7MZhCdOyaHxXaJSfGgEnYUl4BhfxzACE8M2MM/Wy2bq6KM5Vk00gsnH/QC2x5XWaMCHA3ZWN++iYMByEpG/NTJaEHMmLEuAE+AjFiqn4qTKoBk2mNZ2ESzngGWqiKiBEnxmAaQU5cXYguxsrzZsxTw/XA/UBOV00TvCq6Iuyrkvc2SVzzr+fQxTgHz9kMDnrf6Gdw0PuGifMPVxN54ovFcak1x7++wkRf9G1id09hDU7YmTpY1IafTdlRafaOUqzBiUbCSDpT9XOdiWPdmTnFR36bgcJko13Of8a4AaGAYKZHYZldVtIKFA7fiOX8bdmZOE0R2DGQmp29D1tUNcnqk6jNiYgVPzjgmUSPbZ/ExMmnT0hiZWlVich4+10il4p3ilxu8ERerrxf5OLIYu+D7hpX5N/bfyAy+uZCkf+0/FicT3Q8Ls41i3aLU/L83z0RBRvfEGf+8AZx5u171jscOiLOgqIz3gdrf+X6X3rC+3rFUu+Hqe96l0j+RGR0qNG/bKU/s/nrW5K+Ydk6JpU+9PXAN+yTxKdPHZ40cKc18GoYGB9YAw/dYQ18rzVw76SBt1oDt1sDH7AGXnXRGvhP1sBFfrx5tFmcawvv1dSWlUPGmlHi1YKv9zw3t68deHXs3UdHcqcCvrZIxvpfPRZ/mkBWaWXr7JIitbVVTMS+6lXMGeZJB1JwA5pVM9/OtUO60YTJEUmwUBrxenrEkMhtWwid2yvUa+rM2HMiF6GaeuLUhhXgxbB5MLCovWRTdh7s6r+nW7q/H7z4kZmoASGxSGIaaME8KZEY/ypYdm9cfTSSF99HDFNx8c9xEiLcoxPFnWK24xQ1iYYmRCE1iQCrE4WMLebeJkQhUUguJIMwtuDe7QhVh9j7kXxITRgbEoWMDf8HznRiLwAAeAFj6mJgYFzPkALCTL8Ypg0o/j0y7QeH/W+Y/SMTAwDIkfvpeAFjYGBgZIAAGRA7rTgnDcq2rFZKrSgJSy0qzszPU7JSMtQz1DNQ0lEqTk7MycxLd0tMLskvUrIyNNAzMjAxsDA0MzYyMzU2MDOsBQCPLBJ2AAAA) format('woff'); } /* src/js/shared-components/btn-styles.styl */ .dcg-shared-btn-blue, .dcg-shared-btn-red, .dcg-shared-btn-teal { text-decoration: none; white-space: nowrap; padding: 0 20px; -webkit-appearance: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -moz-user-select: -moz-none; border-radius: 3px; line-height: 34px; border: none; font-size: 100%; } .dcg-shared-btn-blue, .dcg-shared-btn-gray-outline, .dcg-shared-btn-blue-outline, .dcg-shared-btn-red, .dcg-shared-btn-teal { cursor: pointer; font-family: inherit; } .dcg-shared-btn-blue.dcg-disabled, .dcg-shared-btn-gray-outline.dcg-disabled, .dcg-shared-btn-blue-outline.dcg-disabled, .dcg-shared-btn-red.dcg-disabled, .dcg-shared-btn-teal.dcg-disabled { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); pointer-events: none; } .dcg-shared-btn-blue { color: #fff; background: #4781b9; border: 1px solid #3f73a6; -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.1), inset 0 -1px rgba(0,0,0,0.05); box-shadow: inset 0 1px rgba(255,255,255,0.1), inset 0 -1px rgba(0,0,0,0.05); } .dcg-shared-btn-blue.dcg-hovered:not(.dcg-disabled) { background: #3f73a6; -webkit-transition: background 0.2s; -moz-transition: background 0.2s; -o-transition: background 0.2s; -ms-transition: background 0.2s; transition: background 0.2s; } .dcg-shared-btn-blue.dcg-depressed:not(.dcg-disabled) { background: #35608a; border: 1px solid #35608a; -webkit-box-shadow: none; box-shadow: none; } .dcg-shared-btn-teal { color: #fff; background: #15b097; border: 1px solid #129e87; -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.1), inset 0 -1px rgba(0,0,0,0.05); box-shadow: inset 0 1px rgba(255,255,255,0.1), inset 0 -1px rgba(0,0,0,0.05); } .dcg-shared-btn-teal.dcg-hovered:not(.dcg-disabled) { background: #129e87; -webkit-transition: background 0.2s; -moz-transition: background 0.2s; -o-transition: background 0.2s; -ms-transition: background 0.2s; transition: background 0.2s; } .dcg-shared-btn-teal.dcg-depressed:not(.dcg-disabled) { background: #0f8371; border: 1px solid #0f8371; -webkit-box-shadow: none; box-shadow: none; } .dcg-shared-btn-red { color: #fff; background: #c0504d; border: 1px solid #ba4a47; -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.1), inset 0 -1px rgba(0,0,0,0.05); box-shadow: inset 0 1px rgba(255,255,255,0.1), inset 0 -1px rgba(0,0,0,0.05); } .dcg-shared-btn-red.dcg-hovered:not(.dcg-disabled) { background: #b54848; } .dcg-shared-btn-red.dcg-depressed:not(.dcg-disabled) { -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); } .dcg-shared-btn-blue-outline { border: 1px solid #4781b9; border-radius: 5px; color: #4781b9; } .dcg-shared-btn-blue-outline.dcg-hovered:not(.dcg-disabled) { color: #004f9b; -webkit-box-shadow: 0 0 0 1px #4781b9; box-shadow: 0 0 0 1px #4781b9; } .dcg-shared-btn-blue-outline.dcg-depressed:not(.dcg-disabled) { background: #4781b9; color: #fff; } .dcg-shared-btn-gray-outline { border: 1px solid #666; border-radius: 5px; color: #666; } .dcg-shared-btn-gray-outline.dcg-hovered { color: #333; border-color: #666; -webkit-box-shadow: 0 0 0 1px #666; box-shadow: 0 0 0 1px #666; } .dcg-shared-btn-gray-outline.dcg-depressed { background: #e2e2e2; border-color: #333; -webkit-box-shadow: 0 0 0 1px #333; box-shadow: 0 0 0 1px #333; } .dcg-shared-blue-link { color: #4781b9; cursor: pointer; text-decoration: underline; } .dcg-shared-blue-link.dcg-hovered { color: #004f9b; } .dcg-shared-blue-link.dcg-depressed { color: #033b70; } .dcg-shared-dark-gray-link { color: #666; cursor: pointer; text-decoration: underline; } .dcg-shared-dark-gray-link.dcg-hovered { color: #333; } .dcg-shared-dark-gray-link.dcg-depressed { color: #000; } .dcg-shared-tab-gray-underline { text-align: center; display: inline-block; padding: 5px 0; margin: 5px 0; color: #666; text-decoration: none; } .dcg-shared-tab-gray-underline.dcg-shared-tab-always-underline { border-bottom: 3px solid #e2e2e2; } .dcg-shared-tab-gray-underline:not(.dcg-shared-tab-always-underline).dcg-hovered, .dcg-shared-tab-gray-underline:not(.dcg-shared-tab-always-underline).dcg-depressed, .dcg-shared-tab-gray-underline:not(.dcg-shared-tab-always-underline).dcg-selected { padding-bottom: 2px; } .dcg-shared-tab-gray-underline.dcg-hovered { border-bottom: 3px solid #bbb; } .dcg-shared-tab-gray-underline.dcg-depressed { color: #000; border-bottom: 3px solid #999; } .dcg-shared-tab-gray-underline.dcg-selected { color: #4781b9; border-bottom: 3px solid #4781b9; cursor: pointer; } input.dcg-shared-input-blue-outline, textarea.dcg-shared-input-blue-outline { outline: none; border-radius: 3px; border: 1px solid #e9e9e9; padding: 7px; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input.dcg-shared-input-blue-outline:focus, textarea.dcg-shared-input-blue-outline:focus { border: 1px solid #4781b9; -webkit-box-shadow: 0 0 0 1px #4781b9; box-shadow: 0 0 0 1px #4781b9; } input.dcg-shared-input-blue-outline::-ms-clear, textarea.dcg-shared-input-blue-outline::-ms-clear { display: none; } /* src/js/shared-components/dcg-shared-icons.css */ /* stylelint-disable */ @font-face { font-family: 'dcg-shared-icons'; src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBfgAAAC8AAAAYGNtYXAXVtKOAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zi/H1EAAAAF4AAARIGhlYWQZhhObAAASmAAAADZoaGVhB7wDzQAAEtAAAAAkaG10eCYABLoAABL0AAAAMGxvY2EZthV2AAATJAAAABptYXhwABUBjQAAE0AAAAAgbmFtZVEHz5IAABNgAAAB8nBvc3QAAwAAAAAVVAAAACAAAwPHAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpBwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6Qf//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAAIAMYAnAM6AuYABQAtAFYAbgCLALsA6wEbAAABJzUeARcXBgcOAQcGIwYnLgEnJiceATMyNjcWFx4BFxYzMjY3PgE3HgEzPgE3Aw4BBwYUFS4BJy4BIyIHDgEHBgcUBhUiJicuASMiBgc2Nz4BNzYzMhYXKgEjIgYHDgEHDgEHJzI2NzI2MT4BNxcHFBYXIT4BNTA0NTQmJy4BJyUUFhceARcFIQ4BFScOAQcOAQcOAQciBiMqATEuAScuAScuATU5ATU8ATE+ATc+ATMxPgEzMhYXMTQUMRcOAQcOAQcOAQciBiMqATEuAScuAScuATU5ATU8ATE+ATc+ATMxPgEzNhYVMTQUMSEOAQcOAQcOAQciBiMqATEuAScuAScuATU5ATU8ATE+ATc+ATMxPgEzNhYVMTQUMQMeRBkhCgQJGxpNMDA1NjEwTRkaCQUJAwgOBgkWFkEoKC0tUiEfKggHDQgFCQWgBgwDAgQEAxYwGisnKD8XFwoCAgUCBQkFBQkDChsaTS8wNSNCrgEEAQULAwQDAgIFBEAFCwQBAwUKAkQ+BAP+SgQDAwQDBwUBWAMDBAYF/tMBiQYFBgIDAQQJBQEFAgMEAgEFBQcFBQkDAgIBBwQEBAMFBwUSGQJrAgMCAwkFAQYBBAMCAgQFCAQFCQMCAwIGBQMFAwUHBRMa/eICAwIDCQUBBgEDBAIBBQUHBQUJAwIDAgYFAwUDBQcFEhsCCXsCGz8jfjQrLEASEgESE0AsLDMCAwUCKyUlNRAPHx0bRigFAgMCBAE+BQ8IAwUDAgMCCQoPDjIjIigDBAIBAgEDAwEzKyw/EhEP3QMCAQECAgUBdQMBAgMHBXk6Bg0EBA0GAQEHDQgFCgKoBgwFBQsDlgYLBtMFBwUFCQMCAQECAQMCAwkFBQkDAgIFBgwFAwQBAxkSAgLZBQgEBQkEAQECAgIDAQQJBQQGBwIBBQcMBQMDAgICGxEBAQUIBAUJBAEBAgICAwEECQUEBgcCAQUHDAUDAwICAhsRAQEAAAAABgAtAKsD1QOkAB0AvgDaAPsBAAEFAAAlDgEjIiYnLgEnLgEnNz4BMR4BFx4BMzI2NzAWHwElFSImJyYGBw4BBw4BMQ4BBw4BIwcOASciJi8BLgExLgExMCYnLgEnLgEnLgEnLgEjDgEHIgYxBw4BBw4BBw4BByIGIwYmJy4BJzUeARceARcwFhceATMyNjcwNjcwNj8BPgExPgE3PgE3PgE3PgEzNjIxNhYXHgEfAR4BFzgBFzAyFTgBMR4BFzAWFx4BMxY2NzA2Nz4BNzA2Nz4BMzIWFwUwBg8BLgEnJicuAScmJz4BNxYXHgEXFhceARcBBgcOAQcGBw4BByImJy4BMT4BNz4BNzY3PgE3NjceARcFIyc3MwU/AScjAmkdNyAQIBAQHw8QGw4mAgkNFwsQJxoOHw8hCxIBbAMEAwwVCgoICgkQFSsYAR8CEQ0cDgwWCwsSLgYPEAMCCgEFCgcEDQYKEQkMEwgBFBEIEggNHRAIEAgBJgoaMxUKEAgQKQcGFAgHBAMECgkaCQcCEgETDB0FCQMIEAgGEggDEwEFDRYqEw0WDBkCEQUCAgUNAxAECRQLDhwLJAkVKBYXAwUfBwsWCf1lGwgTER4MEhARHg0ODA0fEgsNDR0RERMMGQ8CYgwODR0REBMRNCECEAoJHQEEAR8uExEPEB0PDw8RIA/88TwLKx4CzzkLKB7aGhUHCAgTDQ8gEScBCREdCw8aDAwcBwz3TQMCAwMFBQYICA8VLRIBFAYFAwEIBQYKKgYPEAMCCQIFCQUFCQMFBAIGBQ8RCBIIDxsLBQoFDAUUDgcNCGkQKAYHCwQCAgEBCwYFAg8CEwkdAwkDBwwHBggDAQUCAg4LCBMJGgMSBQICBQsDDQIGCQIOCR8KEygQDQIDCQEDDxgIEyNHHioqK1YrLCwOGQgpLCxbLy4uGzsfAcArLS5cLy4uLG43AQQDFgMGAjBlMSkrK1wxMDUFEA0THhEnAx0NAAAAAAQAyQDxA2QChAAkAE8AjwEEAAAlMSImLwEHBiYnJjY/AT4BMx4BHwETPgEzITIWFRQGIyEDDgEjJRUUBg8BDgEHBhQVFAYjIiY1NDY3MT4BNyMqATEUBgcVIzU3NTMVMBYzFw8BIzU0Nj8BPgE1NCYnLgEjIgYHDgEHHgEVFAYHDgEjIiY1NDY3PgEzMhYXHgEVFAYHDgEPATMyNjc0Njc1MxUlFAYHDgEjIiYnLgE1NDY3PgEzMhYXHgEVFAYHDgEHHgEzHgEzMjY3PgE1NCYnLgErASImNTQ2NzE6ATMyNjc+ATU0JicuASMiBgcyFhUeARUUBgcOASMiJicuATU0Njc+ATMyFhceARUUBgcOAQceARceARUBLwYMAS8HBhMEBQIHHAMLBQUGBCaJAwkHAYIKCw0I/ouYAQwGAesDAigHCQECCgoMBxMRBQ4JPAgGBAMLCQ0LFU2pC3UDATgOEAQFBQwIBwoFAwYBCAkEAwMHBQkMCQgIFg0OFwoJCgYFAwwINC0KCAEDAhX+3AkICBMMCREICQgDAQQGAwMHAwMBAwMCAwICBAMFCQUHBwMCAwMCAwcHDQQEBAcBAwIGCAMDAwICAQcFBgwDAgICAwMCAQcFAwYDAgMJCAcPCAgQCAgJBQUDBwMFCQMGB/EGB2IGBQIHBhMFFQMBAQcEVAEHBQUNCAoL/uAFBusHAwYBOAgYDwkgFQkMEQQcORwHEw0CCQ0ECTcEBgICiT4JAwYCPRAgDgoOBgcGAwMEBgMCCQgFBwMEAwwKCxUICAkJCAgYDQkRCAUMCDIBAgEJDQQCtgwRCAYHBgUHEAkDCAIDAwICAwcDAwgCAQECAQMCAgYEBQsICAoFBQYFAwIFAgYFBA0GBQcDAwMDAwMBAgYFAwcDAwEDAQIGBQgPBQUDAwUFDwgIDggDBgIBBwQKEAgAAAMBLQC+As0CwADVAVsBigAAASoBIyIGByIGBzEwBhUxMAYVMCIjMQ4BBw4BBzEHDgEnIiYnLgEjLgEnMCYvAS4BJy4BJy4BJzIWMy4BIzoBMyoBIzEqASsBIgYHDgEHDgEHNw4BBzgBNw4BBw4BBzEHMCIVMTAiBzEwBgcwBhU5Ag4BIzgBIzkBIiYnMhYzLgEnOQEwIiMuAScuATcyNjccARcxHgEXHgEXMTA2Nz4BNz4BNzgBMy4BJy4BJz4BMTAWFw4BBw4BBxQGFTAyFx4BFx4BMzEzPgE3PgE3MDQ3MhYzFgYHBxQwNQYwNw4BIzEOAQcOAQcOAQcxDgEHOQE4ASMxMCIVIgYjMTAiFTEjMCIjMCIjMSMOASciJic5AzAiIzEuAScxLgEnLgEvAS4BJy4BJwYmIyIGBzEOASMOAQcOAQcOAQcOAQciBiMyNjMOASMyNjcOAQciJiceARc2Nz4BNzY3KgExBw4BIzEiJicuAScwMjc+AT8BPgE3MDQ3MR4BFx4BMzI2NzgBFx4BFwYWFzQwFTECwAIDAQUHAwIDAgICAQEKEAgFCAQCBQ0GBQkDAgMBBAUCAQECAgQDAwQEAw4GAgEBCBIKAgUCBAcEAgECAgEBAgMHBQUJAwICAwECBQoEAgUCAgIBAQEBAwQKBQIDBAQCAQIFCAQBAgMHBBAPAwgNBwILGQ8FDAgBAgEDAgIIAwIGCwQQGAlET1BFCxkNCBQNAgEBBAcEAgUCAg4VCBAYCwIGDggFCAoLAQEBAwICAwECAwIBAgEKEQwCAgEBAgICAQEBAgIGCwYFCgQBAggNBgMFAwIDAQUBBgECBgMGCAMFBwMBBAECBQIDBwUGCwgDBwMCAQEBAQIGDQUFCgUECAMHCgcrawgGFhY4HR0UAgOCCxkNDRkNBg0FAQIDBgMDAQECAgUJBQcQCwcMBwIFCQMCAwEByQMCAgIBAQEBBxEIAwkDAgQGAQMEAQMDBAMBAgIBBAMDBgICDAMCBQYBAgEDAgMHBQIBBAECBQkDAgUCAgICAQEBAQQDAQECAgQDAwYELHRGAQEBBAEoTyUNHg8BAgEDAgIIAw0ZCyZOIw0vLw0rSyEVKhQCAQICAwYBAgEXLhMmTycCAgIyWyYgAgICAgIBAQECAQQBAgECCRIHAgICAgICAwMFCgcDBgECAwIEAQYBAgMCAwEEAwEDAgUCAwgDBwoFAQYBAgIEAwMCAgECAQFZSgUCDQ03LCxASQoLDAsHDQgCAwcDAgIBAQEBCAoFBwoEBAIFBgIBAwICAgAAAAAGAMIAhgM8Au8AHwAtAE4AZgB1AI0AACUWFAcOAS8BBwYiJy4BPwEnJjQ3PgEfATc2MhceAQ8BAzMyNjU0JisBIgYVFBYnMhYVFAYrARUUBiMiJj0BIyImNTQ2OwE1NDYzMhYdATMDFAYHDgEjIiYnLgE1NDY3PgEzMhYXHgE3FAYrASImNTQ2OwEeARUnFAYHDgEjIiYnLgE1NDY3PgEzMhYXHgEDFwcHBhMHOToGEwcGAgg6OgYGBxMGOjkHEwYHAQg5ic8KDg4KzwkODqEJDAwJUQ0LCQ5RCg4MDFEOCQoOUUIGBQUNCAYPBAUGBgUEDQgIDQUFBlkMCc8KDg0LzQsMWQYFBQ0ICA0EBQYGBQQNCAcOBQUGwAYUBgYCCDo6BgYGFAY6OQcTBgcBCDk5BwcGEwc5AWIOCQoODgoJDi0OCgoNUQoODAxRDAsKDlEJDAwJUf4iCA0FBQYGBQUNCAgMBQUGBgUGDUkKDgwMCQ4CDAlPCA0FBQYGBQUNCAgMBQUGBgUGDQAAAAABAAYAUQP6Ay8APAAAATYWFx4BFxYGBwYHDgEHBgcOASMiJicmJy4BJyYnLgE1NDY3PgEXHgEXHgEXHgEzMjY3Njc+ATc2Nz4BNwNxICUVDh8CAS4ROzo6dDo6OhIuGB4/Eh4fHz4fHx8NGiMODyEdFyMPK0otAxoDBS8ILiwsVywrLg0kEwMvBiQTDx4THS0SOzo6dDo6OhIuRhIeHh49IB8hDRoVGx0ODyUDASkNK0gtAx8xCC4sLVgtLCwPJAUAAAAAAQAL/8kD9wO3AGIAACUUBgcOAScuAScmJy4BJyYnBgcOAQcGBw4BJy4BJy4BNz4BNzY3PgE3NjcmJy4BJyYnLgEnJjY3PgEXHgEXFhceARcWFzY3PgE3Njc+ARceARceAQcOAQcGBw4BBwYHAR4BFQP3Ig8QJiMbNhEgIiJEISEfIiIiQyMiIxU3JRYhCxArCAY6Ex8jI0YhIh0eISFFIyIhEzoGCCcSECslGDIRISIhQiAgHyIiIUIiISMUPCUVIA0SKAcFORUgIiJEIiEgAREVPEsdIA4QLAUDOhQgIiJFIiIfICEhQyIiIxVBBQMhDRAqIRozEyAiI0YiIh4bISFGIyIfETIYJSgREC8MBjoTISEhQyAhHyAgIUMiIiIVQQUDIQ0RKSEdMBMgIyJGIiIg/vMSNB4ABAD+AMADAgK+AA8AHwA4AFEAAAEjIiY9ATQ2OwEyFh0BFAYXIyImPQE0NjsBMhYdARQGBSMiJjURNDY7ATIWFRQGKwERMzIWFRQGIyEzMjY1ETQmKwEiBhUUFjsBESMiBhUUFjMBzzwJEA4LPAoQD5M8ChAPCzwJEBD+6kkLDhAJSQsPEAotLQsPDwsBQEkLDhAJSQsPEAotLQsPDwsB1w8LPAkQDgs8Cw+bDgs8ChAPCzwLDnwQCgHKCw8QCgkQ/moQCQoSEAoBygsPEAoJEP5qEAkKEgAAAQAAAAEAAC2kOatfDzz1AAsEAAAAAADbNmePAAAAANs2Z48AAP/JA/oDtwAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAD+gABAAAAAAAAAAAAAAAAAAAADAQAAAAAAAAAAAAAAAIAAAAEAADGBAAALQQAAMkEAAEtBAAAwgQAAAYEAAALBAAA/gAAAAAACgAUAB4BoAMWBHgGYAcmB4gIJAiQAAAAAQAAAAwBiwAIAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABABAAAAABAAAAAAACAAcAsQABAAAAAAADABAAUQABAAAAAAAEABAAxgABAAAAAAAFAAsAMAABAAAAAAAGABAAgQABAAAAAAAKABoA9gADAAEECQABACAAEAADAAEECQACAA4AuAADAAEECQADACAAYQADAAEECQAEACAA1gADAAEECQAFABYAOwADAAEECQAGACAAkQADAAEECQAKADQBEGRjZy1zaGFyZWQtaWNvbnMAZABjAGcALQBzAGgAYQByAGUAZAAtAGkAYwBvAG4Ac1ZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGRjZy1zaGFyZWQtaWNvbnMAZABjAGcALQBzAGgAYQByAGUAZAAtAGkAYwBvAG4Ac2RjZy1zaGFyZWQtaWNvbnMAZABjAGcALQBzAGgAYQByAGUAZAAtAGkAYwBvAG4Ac1JlZ3VsYXIAUgBlAGcAdQBsAGEAcmRjZy1zaGFyZWQtaWNvbnMAZABjAGcALQBzAGgAYQByAGUAZAAtAGkAYwBvAG4Ac0ZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=") format('truetype'); font-weight: normal; font-style: normal; font-display: block; } [class^="dcg-shared-icon-"], [class*=" dcg-shared-icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'dcg-shared-icons' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .dcg-shared-icon-matrix:before { content: "\e907"; } .dcg-shared-icon-check:before { content: "\e905"; } .dcg-shared-icon-remove:before { content: "\e906"; } .dcg-shared-icon-graphing:before { content: "\e901"; } .dcg-shared-icon-geometry:before { content: "\e900"; } .dcg-shared-icon-scientific:before { content: "\e902"; } .dcg-shared-icon-test-mode:before { content: "\e903"; } .dcg-shared-icon-four-function:before { content: "\e904"; } /* src/js/shared-components/language-picker.styl */ .dcg-language-picker .dcg-language-header { font-size: 115%; border-bottom: 1px solid #bdbdbd; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); white-space: nowrap; } .dcg-language-picker .dcg-languages-list { padding-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .dcg-language-picker .dcg-listitem { display: inline-block; width: 100%; } .dcg-language-picker .dcg-language-option.dcg-hovered { background: #f6f6f6; } .dcg-language-picker .dcg-language-option.dcg-depressed { background: #e9e9e9; } .dcg-language-picker .dcg-language-option.dcg-selected { background: #e9e9e9; font-weight: 500; cursor: default !important; pointer-events: none; } .dcg-language-picker .dcg-language-footer-link { display: block; text-align: center; } /* src/js/shared-components/mathquill-braille-wrapper.styl */ .dcg-mathquill-wrapper .dcg-mathquill-braille .dcg-braille-input { background: none; width: 100%; border: none; font-family: Abraham, serif; font-size: 125%; padding: 1px 0; } .dcg-mathquill-wrapper .dcg-mathquill-braille .dcg-braille-input:focus { outline: none; } .dcg-mathquill-wrapper .dcg-mathquill-braille .dcg-inline-braille { position: absolute; left: -1000px; top: -1000px; width: 0px; height: 0px; overflow: hidden; } .dcg-mathquill-braille-overflow-left .dcg-tooltip-hit-area-container:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 14px; background: -webkit-linear-gradient(right, rgba(255,255,255,0), #fff); background: -moz-linear-gradient(right, rgba(255,255,255,0), #fff); background: -o-linear-gradient(right, rgba(255,255,255,0), #fff); background: -ms-linear-gradient(right, rgba(255,255,255,0), #fff); background: linear-gradient(to left, rgba(255,255,255,0), #fff); pointer-events: none; } .dcg-mathquill-braille-overflow-right .dcg-tooltip-hit-area-container:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 14px; background: -webkit-linear-gradient(left, rgba(255,255,255,0), #fff); background: -moz-linear-gradient(left, rgba(255,255,255,0), #fff); background: -o-linear-gradient(left, rgba(255,255,255,0), #fff); background: -ms-linear-gradient(left, rgba(255,255,255,0), #fff); background: linear-gradient(to right, rgba(255,255,255,0), #fff); pointer-events: none; } .dcg-mathquill-braille-tooltip.dcg-latex-tooltip-positioning-container.dcg-tooltip-positioning-container.dcg-tooltip-gravity-ne-se .dcg-tooltip-arrow { -webkit-transform: translateX(-1.25ch) rotate(45deg); -moz-transform: translateX(-1.25ch) rotate(45deg); -o-transform: translateX(-1.25ch) rotate(45deg); -ms-transform: translateX(-1.25ch) rotate(45deg); transform: translateX(-1.25ch) rotate(45deg); } .dcg-mathquill-braille-tooltip.dcg-latex-tooltip-positioning-container.dcg-tooltip-positioning-container.dcg-tooltip-gravity-ne-se .dcg-tooltip-message-container { -webkit-transform: translateX(-1.25ch); -moz-transform: translateX(-1.25ch); -o-transform: translateX(-1.25ch); -ms-transform: translateX(-1.25ch); transform: translateX(-1.25ch); } .dcg-mathquill-braille-tooltip.dcg-latex-tooltip-positioning-container.dcg-tooltip-positioning-container.dcg-tooltip-gravity-nw-sw .dcg-tooltip-arrow { -webkit-transform: translateX(0.8ch) rotate(45deg); -moz-transform: translateX(0.8ch) rotate(45deg); -o-transform: translateX(0.8ch) rotate(45deg); -ms-transform: translateX(0.8ch) rotate(45deg); transform: translateX(0.8ch) rotate(45deg); } .dcg-mathquill-braille-tooltip.dcg-latex-tooltip-positioning-container.dcg-tooltip-positioning-container.dcg-tooltip-gravity-nw-sw .dcg-tooltip-message-container { -webkit-transform: translateX(0.8ch); -moz-transform: translateX(0.8ch); -o-transform: translateX(0.8ch); -ms-transform: translateX(0.8ch); transform: translateX(0.8ch); } /* src/js/shared-components/modal.styl */ .dcg-shared-modal-cover { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 30; /** * layout of the various modal types */ } .dcg-shared-modal-cover.dcg-shared-modal-center { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .dcg-shared-modal-cover.dcg-shared-modal-center .dcg-shared-modal-contents-wrapper { max-height: calc(100vh - calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 4)); } .dcg-shared-modal-cover .dcg-shared-modal-background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.7); } .dcg-shared-modal-cover .dcg-shared-modal-transition-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .dcg-shared-modal-cover .dcg-shared-modal { position: relative; } .dcg-shared-modal-cover.dcg-shared-modal-wide .dcg-shared-modal, .dcg-shared-modal-cover.dcg-shared-modal-medium .dcg-shared-modal, .dcg-shared-modal-cover.dcg-shared-modal-narrow .dcg-shared-modal { -webkit-animation: dcgSharedFadeInDown 0.3s; -moz-animation: dcgSharedFadeInDown 0.3s; -o-animation: dcgSharedFadeInDown 0.3s; -ms-animation: dcgSharedFadeInDown 0.3s; animation: dcgSharedFadeInDown 0.3s; } .dcg-shared-modal-cover.dcg-shared-modal-background, .dcg-shared-modal-cover.dcg-shared-modal-fullscreen .dcg-shared-modal { -webkit-animation: dcgSharedFadeIn 0.3s; -moz-animation: dcgSharedFadeIn 0.3s; -o-animation: dcgSharedFadeIn 0.3s; -ms-animation: dcgSharedFadeIn 0.3s; animation: dcgSharedFadeIn 0.3s; } .dcg-shared-modal-cover.dcg-shared-modal-wide:not(.dcg-shared-modal-center) .dcg-shared-modal-transition-container, .dcg-shared-modal-cover.dcg-shared-modal-medium:not(.dcg-shared-modal-center) .dcg-shared-modal-transition-container, .dcg-shared-modal-cover.dcg-shared-modal-narrow:not(.dcg-shared-modal-center) .dcg-shared-modal-transition-container { margin-top: 30px; } .dcg-shared-modal-cover.dcg-shared-modal-wide:not(.dcg-shared-modal-center) .dcg-shared-modal-contents-wrapper, .dcg-shared-modal-cover.dcg-shared-modal-medium:not(.dcg-shared-modal-center) .dcg-shared-modal-contents-wrapper, .dcg-shared-modal-cover.dcg-shared-modal-narrow:not(.dcg-shared-modal-center) .dcg-shared-modal-contents-wrapper { max-height: calc(100vh - 60px); overflow-y: auto; } .dcg-shared-modal-cover.dcg-shared-modal-wide .dcg-shared-modal { width: 800px; } .dcg-shared-modal-cover.dcg-shared-modal-wide .dcg-shared-modal .legacy-btn-container + .dcg-shared-modal-contents-wrapper { margin-top: 32px; } .dcg-shared-modal-cover.dcg-shared-modal-medium .dcg-shared-modal { width: 650px; } .dcg-shared-modal-cover.dcg-shared-modal-medium .dcg-shared-modal .legacy-btn-container + .dcg-shared-modal-contents-wrapper { margin-top: 32px; } .dcg-shared-modal-cover.dcg-shared-modal-narrow .dcg-shared-modal { width: 500px; } .dcg-shared-modal-cover.dcg-shared-modal-narrow .dcg-shared-modal .legacy-btn-container + .dcg-shared-modal-contents-wrapper { margin-top: 32px; } .dcg-shared-modal-cover.dcg-shared-modal-fullscreen .dcg-shared-modal { position: absolute; top: 30px; bottom: 30px; left: 30px; right: 30px; } .dcg-shared-modal-cover.dcg-shared-modal-fullscreen .dcg-shared-modal .dcg-shared-modal-contents-wrapper { overflow-y: auto; overflow-x: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .dcg-shared-modal-cover .dcg-shared-close-cross-container.legacy-btn-container { position: absolute; top: -28px; right: -28px; } .dcg-shared-modal-cover .dcg-shared-modal-contents-wrapper { padding: 30px; background: #fff; border-radius: 0.1875em; -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); box-shadow: 0 0 10px rgba(0,0,0,0.5); } .dcg-shared-modal-cover .dcg-shared-modal-error-message { text-align: center; font-size: 90%; background: rgba(192,80,77,0.1); line-height: 24px; border: 1px solid rgba(192,80,77,0.5); border-radius: 3px; color: #c0504d; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .dcg-shared-modal-cover h1 { padding: 0; margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; font-weight: normal; font-size: 24px; } .dcg-shared-modal-cover h1:not(.dcg-shared-left-align-title) { text-align: center; } .dcg-shared-modal-cover h1.dcg-shared-left-align-title { text-align: left; } .dcg-shared-modal-close-button-inside .dcg-shared-modal-contents-wrapper { position: relative; overflow-x: hidden; } .dcg-shared-modal-close-button-inside .dcg-shared-close-cross-container { position: absolute; top: var(--close-modal-btn-position, 0.8em); right: var(--close-modal-btn-position, 1.4em); z-index: 1; } .dcg-shared-modal-close-button-inside .dcg-shared-close-cross-container .dcg-shared-close-cross { color: #3b3b3b; } .dcg-shared-modal-close-button-inside .dcg-shared-close-cross-container .dcg-shared-close-cross label { max-width: 75px; height: fit-content; } .dcg-shared-modal-close-button-inside .dcg-shared-close-cross-container .dcg-shared-close-cross label span { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; white-space: normal; line-height: 1.2em; padding: 2px 0; } .dcg-shared-modal-close-button-floating.dcg-shared-modal-cover.dcg-shared-modal-fullscreen .dcg-shared-modal { top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 4); right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 4); bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 4); left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 4); } .dcg-shared-modal-close-button-floating .dcg-shared-close-cross-container { z-index: 31; position: absolute; top: 0; right: 0; } .dcg-shared-modal-close-button-floating .dcg-shared-close-cross-container .dcg-shared-close-cross { top: -1.5em; right: -1.5em; } .dcg-shared-modal-container.close-btn-style-legacy .dcg-shared-close-cross { position: relative; top: 32px; left: 5px; cursor: pointer; } .dcg-shared-modal-container.close-btn-style-legacy .dcg-shared-close-cross .icon-v2-close:before { content: "\2715"; height: 32px; width: 32px; position: absolute; top: 1px; right: 1px; color: #fff; font-family: sans-serif; font-style: normal; font-weight: bold; font-size: 24px; } .dcg-shared-modal-container.close-btn-style-legacy .dcg-shared-close-cross label { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); cursor: pointer; } .dcg-shared-modal-cover.dcg-shared-modal-has-footer-content .dcg-shared-modal-contents-wrapper { border-radius: 0.1875em 0.1875em 0 0; } .dcg-shared-modal-cover.dcg-shared-modal-has-footer-content .footer-content-wrapper { background-color: #f6f6f6; border: 0; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; border-bottom-right-radius: 0.1875em; border-bottom-left-radius: 0.1875em; } .dcg-shared-modal-cover.dcg-shared-modal-has-footer-content .footer-content-wrapper:has(> div[style*="display: none"]) { display: none; } .dcg-shared-modal-cover.dcg-shared-modal-has-footer-content .footer-content-wrapper .btn + .btn { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } @media screen and (max-width: 850px) { .dcg-shared-modal-cover.dcg-shared-modal-wide:not(.dcg-shared-modal-center) .dcg-shared-modal { width: auto; margin: 0; position: absolute; top: 30px; left: 37px; right: 37px; } .dcg-shared-modal-cover.dcg-shared-modal-wide.dcg-shared-modal-center .dcg-shared-modal { width: calc(100vw - calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 4)); } } @media screen and (max-width: 700px) { .dcg-shared-modal-cover.dcg-shared-modal-medium:not(.dcg-shared-modal-center) .dcg-shared-modal { width: auto; margin: 0; position: absolute; top: 30px; left: 37px; right: 37px; } .dcg-shared-modal-cover.dcg-shared-modal-medium.dcg-shared-modal-center .dcg-shared-modal { width: calc(100vw - calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 4)); } } @media screen and (max-width: 600px) { .dcg-shared-modal-container .dcg-shared-modal-cover .dcg-shared-modal-background { background: #333; } .dcg-shared-modal-container .dcg-shared-modal-cover.dcg-shared-modal-wide .dcg-shared-modal-transition-container, .dcg-shared-modal-container .dcg-shared-modal-cover.dcg-shared-modal-medium .dcg-shared-modal-transition-container, .dcg-shared-modal-container .dcg-shared-modal-cover.dcg-shared-modal-narrow .dcg-shared-modal-transition-container { margin-top: 0; } .dcg-shared-modal-container .dcg-shared-modal-cover:not(.dcg-shared-modal-close-button-floating).dcg-shared-modal-wide .dcg-shared-modal, .dcg-shared-modal-container .dcg-shared-modal-cover:not(.dcg-shared-modal-close-button-floating).dcg-shared-modal-fullscreen .dcg-shared-modal, .dcg-shared-modal-container .dcg-shared-modal-cover:not(.dcg-shared-modal-close-button-floating).dcg-shared-modal-medium .dcg-shared-modal, .dcg-shared-modal-container .dcg-shared-modal-cover:not(.dcg-shared-modal-close-button-floating).dcg-shared-modal-narrow .dcg-shared-modal { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; margin: 0; } .dcg-shared-modal-container .dcg-shared-modal-cover:not(.dcg-shared-modal-close-button-floating).dcg-shared-modal-wide .dcg-shared-modal .dcg-shared-modal-contents-wrapper, .dcg-shared-modal-container .dcg-shared-modal-cover:not(.dcg-shared-modal-close-button-floating).dcg-shared-modal-fullscreen .dcg-shared-modal .dcg-shared-modal-contents-wrapper, .dcg-shared-modal-container .dcg-shared-modal-cover:not(.dcg-shared-modal-close-button-floating).dcg-shared-modal-medium .dcg-shared-modal .dcg-shared-modal-contents-wrapper, .dcg-shared-modal-container .dcg-shared-modal-cover:not(.dcg-shared-modal-close-button-floating).dcg-shared-modal-narrow .dcg-shared-modal .dcg-shared-modal-contents-wrapper { border-radius: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow-y: auto; overflow-x: hidden; max-height: none; } .dcg-shared-modal-container .dcg-shared-modal-cover:not(.dcg-shared-modal-close-button-floating).dcg-shared-modal-wide .dcg-shared-modal .footer-content-wrapper, .dcg-shared-modal-container .dcg-shared-modal-cover:not(.dcg-shared-modal-close-button-floating).dcg-shared-modal-fullscreen .dcg-shared-modal .footer-content-wrapper, .dcg-shared-modal-container .dcg-shared-modal-cover:not(.dcg-shared-modal-close-button-floating).dcg-shared-modal-medium .dcg-shared-modal .footer-content-wrapper, .dcg-shared-modal-container .dcg-shared-modal-cover:not(.dcg-shared-modal-close-button-floating).dcg-shared-modal-narrow .dcg-shared-modal .footer-content-wrapper { position: absolute; width: 100%; bottom: 0; } } @-moz-keyframes dcgSharedFadeInDown { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translate(0, -10px); -moz-transform: translate(0, -10px); -o-transform: translate(0, -10px); -ms-transform: translate(0, -10px); transform: translate(0, -10px); } 100% { opacity: 1; -ms-filter: none; filter: none; } } @-webkit-keyframes dcgSharedFadeInDown { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translate(0, -10px); -moz-transform: translate(0, -10px); -o-transform: translate(0, -10px); -ms-transform: translate(0, -10px); transform: translate(0, -10px); } 100% { opacity: 1; -ms-filter: none; filter: none; } } @-o-keyframes dcgSharedFadeInDown { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translate(0, -10px); -moz-transform: translate(0, -10px); -o-transform: translate(0, -10px); -ms-transform: translate(0, -10px); transform: translate(0, -10px); } 100% { opacity: 1; -ms-filter: none; filter: none; } } @keyframes dcgSharedFadeInDown { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translate(0, -10px); -moz-transform: translate(0, -10px); -o-transform: translate(0, -10px); -ms-transform: translate(0, -10px); transform: translate(0, -10px); } 100% { opacity: 1; -ms-filter: none; filter: none; } } @-moz-keyframes dcgSharedFadeIn { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: none; filter: none; } } @-webkit-keyframes dcgSharedFadeIn { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: none; filter: none; } } @-o-keyframes dcgSharedFadeIn { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: none; filter: none; } } @keyframes dcgSharedFadeIn { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: none; filter: none; } } /* src/js/shared-components/shared-dropdown-popover.styl */ .dcg-shared-dropdown-popover-container { position: relative; display: inline-block; } .dcg-shared-dropdown-popover-container .dropdown-container { position: absolute; z-index: 31; } .dcg-shared-dropdown-popover-container .dropdown-container:not(.dropdown-pops-up) { top: 100%; } .dcg-shared-dropdown-popover-container .dropdown-container:not(.dropdown-pops-up) .dropdown-container-inner { -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2); box-shadow: 0 5px 10px rgba(0,0,0,0.2); top: -1px; } .dcg-shared-dropdown-popover-container .dropdown-container.dropdown-pops-up { bottom: 100%; } .dcg-shared-dropdown-popover-container .dropdown-container.dropdown-pops-up .dropdown-container-inner { -webkit-box-shadow: 0 -5px 10px rgba(0,0,0,0.2); box-shadow: 0 -5px 10px rgba(0,0,0,0.2); top: 1px; } .dcg-shared-dropdown-popover-container .dropdown-container:not(.dropdown-pops-right) { right: 0; } .dcg-shared-dropdown-popover-container .dropdown-container-inner { position: relative; background: var(--dropdown-container-background, #fff); border: var(--text-input-footer-button-border, 1px solid #bdbdbd); border-radius: var(--dropdown-container-border-radius, 0.1875em); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); padding: var(--dropdown-container-padding, 6px 0); color: var(--dropdown-container-color, #3b3b3b); } /* src/js/shared-components/shared-options-dropdown.styl */ .dcg-shared-options-dropdown .dropdown-explanations { font-size: 80%; padding: 3px 7px; min-width: 190px; opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); } .dcg-shared-options-dropdown .dropdown-explanations .explanation { margin-bottom: 5px; } .dcg-shared-options-dropdown .dropdown-explanations .explanation a { color: #4781b9; white-space: nowrap; margin-bottom: 5px; } .dcg-shared-options-dropdown .dropdown-choice { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) calc(var(--rhythm-unit-px, 12) / 16 * 1rem); display: block; color: #3b3b3b; background-color: #fff; text-decoration: none; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .dcg-shared-options-dropdown .dropdown-choice:not(.dropdown-choice-disabled).red-link { color: #db2e00; } .dcg-shared-options-dropdown .dropdown-choice:not(.dropdown-choice-disabled).red-link:hover, .dcg-shared-options-dropdown .dropdown-choice:not(.dropdown-choice-disabled).red-link.dcg-depressed { color: #db2e00; } .dcg-shared-options-dropdown .dropdown-choice:not(.dropdown-choice-disabled).blue-link { color: #3278c8; } .dcg-shared-options-dropdown .dropdown-choice:not(.dropdown-choice-disabled).blue-link.dcg-hovered { color: #1e4878; } .dcg-shared-options-dropdown .dropdown-choice:not(.dropdown-choice-disabled).blue-link.dcg-depressed { color: #0f243c; } .dcg-shared-options-dropdown .dropdown-choice:not(.dropdown-choice-disabled):hover { background-color: #f6f6f6; text-decoration: none; color: #3b3b3b; } .dcg-shared-options-dropdown .dropdown-choice:not(.dropdown-choice-disabled):active { background-color: #e9e9e9; text-decoration: none; color: #3b3b3b; } .dcg-shared-options-dropdown .dropdown-choice.dropdown-choice-btn:hover, .dcg-shared-options-dropdown .dropdown-choice.dropdown-choice-btn.dcg-depressed { background-color: #fff; } .dcg-shared-options-dropdown .dropdown-choice.dropdown-choice-disabled { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); cursor: default; } .dcg-shared-options-dropdown .dropdown-choice .option-icon-container { display: inline-block; width: 20px; text-align: center; vertical-align: middle; margin-right: 14px; line-height: 1; } .dcg-shared-options-dropdown .dropdown-choice .option-subtitle { display: block; margin-left: 30px; font-size: 80%; text-decoration: underline; } /* src/js/shared-components/tooltip.styl */ .dcg-tooltip-hit-area-container { display: inline-block; position: relative; cursor: default !important; line-height: initial; } .dcg-tooltip-mount-pt { position: absolute; top: 0; left: 0; } .dcg-tooltip-positioning-container { position: absolute; pointer-events: none; z-index: 10000; -webkit-animation: dcg-fadeIn 0.3s; -moz-animation: dcg-fadeIn 0.3s; -o-animation: dcg-fadeIn 0.3s; -ms-animation: dcg-fadeIn 0.3s; animation: dcg-fadeIn 0.3s; } .dcg-tooltip-positioning-container .dcg-tooltip-message-container { position: absolute; z-index: 10000; white-space: normal; } .dcg-tooltip-positioning-container .dcg-tooltip-message-container .dcg-tooltip-message { background-color: #3b3b3b; border: 1px solid #e9e9e9; color: #fff; font-weight: 400; padding: 5px 8px; text-shadow: none; line-height: 1.1em; display: inline-block; pointer-events: all; text-align: center; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1); border-radius: 0.1875em; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); } .dcg-tooltip-positioning-container .dcg-tooltip-message-container .dcg-tooltip-message.dcg-latex { background: #fff; color: #3b3b3b; opacity: 1; -ms-filter: none; filter: none; border: 1px solid #e9e9e9; border-radius: 5px; position: relative; } .dcg-tooltip-positioning-container .dcg-tooltip-message-container .dcg-tooltip-message.dcg-latex .dcg-static-mathquill-view { width: 100%; } .dcg-tooltip-positioning-container .dcg-tooltip-message-container .dcg-tooltip-message.dcg-latex.dcg-tooltip-overflow:after { content: ""; position: absolute; top: 0; bottom: 0; right: 8px; width: 14px; background: -webkit-linear-gradient(left, rgba(255,255,255,0), #fff); background: -moz-linear-gradient(left, rgba(255,255,255,0), #fff); background: -o-linear-gradient(left, rgba(255,255,255,0), #fff); background: -ms-linear-gradient(left, rgba(255,255,255,0), #fff); background: linear-gradient(to right, rgba(255,255,255,0), #fff); pointer-events: none; } .dcg-tooltip-positioning-container .dcg-tooltip-message-container .dcg-tooltip-message.dcg-latex .dcg-mq-root-block * { -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; cursor: default; } .dcg-tooltip-positioning-container .dcg-tooltip-arrow { background: transparent; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .dcg-tooltip-positioning-container.dcg-tooltip-gravity-n-s .dcg-tooltip-arrow { -webkit-transform: translateX(-50%) rotate(45deg); -moz-transform: translateX(-50%) rotate(45deg); -o-transform: translateX(-50%) rotate(45deg); -ms-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); } .dcg-tooltip-positioning-container.dcg-tooltip-gravity-e-w .dcg-tooltip-arrow { -webkit-transform: translateY(-50%) rotate(45deg); -moz-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } .dcg-tooltip-positioning-container .dcg-tooltip-arrow { position: absolute; z-index: 10000; } /* src/js/shared/accounts/account-dropdown.styl */ .accounts-container .user-name-dropdown .user-name-link { display: inline-block; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; max-width: 120px; vertical-align: bottom; margin: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .accounts-container .account-header-view.dark-background { margin-top: -5px; } .accounts-container .account-header-view.dark-background .user-name-dropdown { color: rgba(255,255,255,0.9); } .accounts-container .account-header-view.dark-background .user-name-dropdown.dcg-hovered .pillow-icon-caret-down { color: #fff; } .account-dropdown { line-height: 1.5em; background-color: #fff; border: 1px solid #bdbdbd; border-radius: 0.1875em; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); z-index: 20; } .account-dropdown .user-name, .account-dropdown .email, .account-dropdown .dropdown-link { padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .account-dropdown .dropdown-link { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) calc(var(--rhythm-unit-px, 12) / 16 * 1rem) !important; } .account-dropdown .dropdown-link.dcg-hovered { background-color: #f6f6f6; text-decoration: none; } .account-dropdown .dropdown-link.dcg-depressed { background: #e9e9e9; text-decoration: none; } .account-dropdown .user-name, .account-dropdown .email { color: #3b3b3b; max-width: 200px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .account-dropdown .email { font-size: 90%; margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .account-dropdown .line-divider { height: 1px; background-color: #bdbdbd; margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; } .account-header-view.rtl-layout .popover-interior { left: 1px; } .account-header-view.rtl-layout .popover-interior:after { content: ""; position: absolute; top: 0; left: 0; border-width: 0; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .account-header-view.rtl-layout .popover-interior:before { content: ""; position: absolute; top: -1px; left: -1px; border-width: 1px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } /* src/js/shared/accounts/account-info.styl */ .account-info { margin-top: 25px; color: #666; } .account-info-email { font-weight: bold; } /* src/js/shared/accounts/account-reenabled-modal.styl */ .account-reenabled-modal-contents { max-width: 566px; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3) calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .account-reenabled-modal-contents .reenabled-message { color: #676767; font-size: 1.3125rem; line-height: 2rem; margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .account-reenabled-modal-contents .continue-button { text-align: right; } /* src/js/shared/accounts/account-settings-modal.styl */ .account-modal { line-height: 1.5em; } .account-settings-modal-contents { padding: 20px; } .account-settings-modal-contents .account-modal-header { padding: 10px 0; position: relative; color: #3b3b3b; font-size: 160%; } .account-settings-modal-contents .left-side-tabs, .account-settings-modal-contents .right-side-content { display: inline-block; margin-top: 20px; vertical-align: top; } .account-settings-modal-contents .left-side-tabs { width: 35%; padding-right: 60px; } .account-settings-modal-contents .right-side-content { padding-top: 10px; width: 65%; } .account-settings-modal-contents .right-side-content .name-and-email .label-input-container input.name-input { border-radius: 0.1875em; } .account-settings-modal-contents .account-settings-section .actions-container { text-align: right; margin-top: 0.5em; } .account-settings-modal-contents .account-settings-section .input-label { min-width: 70px; display: inline-block; } @media screen and (max-width: 850px) { .account-settings-modal-contents .left-side-tabs, .account-settings-modal-contents .right-side-content { width: 100%; } .account-settings-modal-contents .left-side-tabs { padding: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -ms-flex-line-pack: stretch; -webkit-align-content: stretch; align-content: stretch; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .account-settings-modal-contents .left-side-tabs .menu-item-gray { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; margin-right: 15px; text-align: center; display: inline-block; height: 42px; } .account-settings-modal-contents .left-side-tabs .menu-item-gray:not(.selected):not(.dcg-hovered):not(.dcg-depressed) { border-bottom: 3px solid #bdbdbd; } .account-settings-modal-contents .left-side-tabs .menu-item-gray:last-of-type { margin-right: 0; } .account-settings-modal-contents .account-settings-section { width: 100%; } } /* src/js/shared/accounts/account-update-modal.styl */ .reset-password-modal-contents { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .reset-password-modal-contents .h3 { margin-top: 0 !important; } .account-update-form .btn, .account-update-form input { margin: 5.75px 0; height: 52.5px; font-size: 1.3125rem; } .account-update-form .account-update-header { padding-bottom: 20px; color: #3b3b3b; font-size: 2rem; line-height: 3rem; text-align: center; } .account-update-form .account-error-container { clear: both; position: relative; } .account-update-form .account-error-container .form-error-message { text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .account-update-form.reset-password-form form { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .account-update-form.reset-password-form form input { border: 1px solid #bdbdbd; border-radius: 0.1875em; padding-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .account-update-form.reset-password-form form .form-submit-container { text-align: right; } @media screen and (max-width: 600px) { .account-update-form { width: 100%; } } /* src/js/shared/accounts/change-email-expired.styl */ .account-update-form.change-email-expired-form { max-width: 566px; } .account-update-form > .account-update-header { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); font-size: 1.3125rem; line-height: 2rem; text-align: left; } .account-update-form .link-expired-message { color: #676767; } /* src/js/shared/accounts/change-email.styl */ .change-email-form { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .change-email-form .account-update-header { text-align: center; } .change-email-form .login-button.google-login { margin: auto !important; max-width: 400px; } .change-email-form .login-button.google-login > span { font-size: 18px; } .change-email-form .h4-container { text-align: center; height: 1px; background: #bdbdbd; margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3) 0; } .change-email-form h4 { color: #676767; display: inline-block; margin: 0 auto; background: #fff; position: relative; top: -13px; padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem); font-size: 1em; margin-top: 0 !important; } .change-email-form form { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .change-email-form form input { padding-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); border: 1px solid #bdbdbd; border-radius: 0.1875em; } .change-email-form form .form-submit-container { text-align: right; } /* src/js/shared/accounts/change-password.styl */ .reset-by-email .email-description { text-align: left; margin-bottom: 20px; } .email-sent-notice { background-color: #b3dbd3; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; -ms-transition: opacity 0.3s; transition: opacity 0.3s; text-align: center; } .email-sent-notice .email-sent-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.6) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.6); font-size: 90%; } .email-sent-notice .email-sent-container .toast-icon-wrapper { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .email-sent-notice .email-sent-container .toast-body { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-align: left; padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1); } .email-sent-notice .email-sent-container .toast-body .h2 { margin: 0; width: 100%; font-size: 100%; font-weight: bold; line-height: 1.8em; } .email-sent-notice.hidden { pointer-events: none; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } /* src/js/shared/accounts/co-teachers.styl */ .co-teachers.account-settings-section { font-size: 100%; } .co-teachers.account-settings-section .co-teachers-description { line-height: 1.2em; } .co-teachers.account-settings-section .account-co-teachers-deprecated { font-size: 85%; color: #666; border-radius: 5px; margin: 10px 0 15px; line-height: 1.2em; } .co-teachers.account-settings-section .account-co-teachers-deprecated i.pillow-icon-info { float: left; padding-right: 5px; font-size: 90%; position: relative; top: 2px; } /* src/js/shared/accounts/delete-account.styl */ .delete-account-box .delete-title { margin-bottom: 15px; font-size: 120%; } .delete-account-box .delete-important { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .delete-account-box .password-input { font-size: 100%; width: 100%; margin: 10px 0; } .delete-account-box .account-error-container { clear: both; position: relative; margin-bottom: 10px; } .delete-account-box .account-error-container .form-error-message { background-color: #f4c0b3; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #3b3b3b; border-radius: 0.1875em; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1); line-height: 24px; } .delete-account-box .actions { text-align: right; } .delete-account-box .actions .cancel-link { display: inline-block; margin-right: 20px; } /* src/js/shared/accounts/email-settings.styl */ .email-field { margin-top: 40px; } .email-field .email-list { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .email-field .email-list .email { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; } .email-field .email-list .email.not-verified { color: #666; } .email-field .email-list .email .email-message-container { max-width: 95%; margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .email-field .email-list .email .email-message-container .user-email { white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; max-width: 100%; } .email-field .email-list .email .email-message-container .not-verified-message { font-size: 90%; } .email-field .email-list .email .email-message-container .not-verified-message .resend-email { display: inline-block; } .email-field .email-list .email .email-message-container .change-email { font-size: 90%; margin-top: 1em; } .email-field .toast-container .toast { margin-top: -2em; } .email-field .toast.email-resend-toast { background-color: #b3dbd3; border: 1px solid #b3dbd3; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1); text-align: left; font-size: 100%; margin-top: 2px; } .email-field .change-email-container { -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; width: fit-content; margin-left: auto; } .email-field .change-email-container .change-email-description { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); background-color: #c2d7ef; font-size: 95%; } .email-field .change-email-container .change-email-description i { margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); font-size: 1.5em; } .email-field .change-email-container .actions-container .cancel-link { display: inline-block; margin-right: 20px; } .email-field .account-error-container { clear: both; position: relative; } .email-field .account-error-container .form-error-message { line-height: 24px; background-color: #f4c0b3; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #3b3b3b; border-radius: 0.1875em; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1); } @media screen and (max-width: 680px) { .email-field { width: 100%; } } @media screen and (max-width: 480px) { .email .icon-v2-messaging-success, .email .icon-v2-messaging-warning { display: none; } } /* src/js/shared/accounts/forgot-password-modal-contents.styl */ .recover-password-dialog { color: #3b3b3b; } .recover-password-dialog .btn, .recover-password-dialog .form-control { font-size: 1.3125rem; margin: 5.75px 0; } .recover-password-dialog .account-paragraph, .recover-password-dialog .input-title { font-size: 1.3125rem; line-height: 2rem; font-weight: 300; } @media screen and (max-width: 566px) { .recover-password-dialog .account-paragraph, .recover-password-dialog .input-title { padding: 0; } } .recover-password-dialog .account-paragraph[role="alert"] { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 4); } .recover-password-dialog .email-form-container { max-width: 400px; width: 100%; margin: 0 auto; padding-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); } .recover-password-dialog .email-form-container label { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); width: 100%; } .recover-password-dialog .email-form-container input { width: 100%; } .recover-password-dialog .email-form-container .sign-in-options { text-align: right; } /* src/js/shared/accounts/login-modal-contents.styl */ .login-modal-contents { width: 100%; } .login-modal-contents .password-container { position: relative; } .login-modal-contents .password-container .forgot-password-link.is-rtl { position: absolute; bottom: 1.5em; left: 10px; text-align: left; } .login-modal-contents .password-container .forgot-password-link:not(is-rtl) { position: absolute; bottom: 1.5em; right: 10px; } .login-modal .login-button-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin-top: 12px 0 0 0; } .login-modal .login-button-container .login-button { padding: 0; font-size: 21px; } .login-modal .login-button-container .login-button img { height: unset; margin: unset; } /* src/js/shared/accounts/profile-info.styl */ .profile-info.account-settings-section { width: 100%; } .profile-info.account-settings-section .name-and-email { color: #333; font-size: 90%; } .profile-info.account-settings-section .name-and-email .name-field.unconfirmed-name-notice { background: rgba(21,176,151,0.2); border: 1px solid rgba(21,176,151,0.3); border-radius: 5px; padding: 10px; } .profile-info.account-settings-section .name-and-email .name-input { padding: 10px; font-size: 100%; } .profile-info.account-settings-section .name-and-email .display-name-only .name-input { width: 100%; } .profile-info.account-settings-section .name-and-email .two-field-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .profile-info.account-settings-section .name-and-email .two-field-container .label-input-container { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .profile-info.account-settings-section .name-and-email .two-field-container .label-input-container + .label-input-container { margin-left: 10px; } .profile-info.account-settings-section .name-and-email .two-field-container .label-input-container .name-input { width: 100%; } .profile-info.account-settings-section .name-and-email .actions-container { width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: end; justify-content: end; } .profile-info.account-settings-section .name-and-email .teacher-edited-name-message { float: left; text-align: left; max-width: calc(100% - 100px); line-height: 1.2em; font-size: 90%; } .profile-info.account-settings-section .name-and-email .teacher-edited-name-message .bold-text { font-weight: 600; } .profile-info.account-settings-section .name-and-email .saved-notice { color: #3b3b3b; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1); background-color: #b3dbd3; margin-right: 15px; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; -ms-transition: opacity 0.3s; transition: opacity 0.3s; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 95%; } .profile-info.account-settings-section .name-and-email .saved-notice .h2 { margin: 0; font-size: 100%; line-height: 1.5em; } .profile-info.account-settings-section .name-and-email .saved-notice .icon-v2-messaging-success { margin-right: 5px; } .profile-info.account-settings-section .name-and-email .saved-notice.hidden { pointer-events: none; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .profile-info.account-settings-section .name-and-email .review-name-text { font-weight: bold; margin-bottom: 10px; } .profile-info.account-settings-section .delete-account-link { float: right; clear: both; font-size: 80%; text-decoration: underline; margin-top: 40px; } .profile-info.account-settings-section .delete-account-link.dcg-hovered, .profile-info.account-settings-section .delete-account-link.dcg-depressed { color: #666; } @media screen and (max-width: 680px) { .name-field { width: 100%; } } /* src/js/shared/alp/actions-menu.styl */ .actions-dropdown.dcg-shared-options-dropdown { min-width: 160px; } .actions-dropdown.dcg-shared-options-dropdown:after { content: ""; position: absolute; top: -9px; right: 10px; border-width: 9px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .actions-dropdown.dcg-shared-options-dropdown:before { content: ""; position: absolute; top: -10px; right: 9px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .actions-dropdown.dcg-shared-dropdown-popover-container .dropdown-container { top: calc(100% + 3px); } .actions-dropdown .dropdown-choice-disabled { color: #666; } .actions-dropdown .dropdown-choice-disabled.selected, .actions-dropdown .dropdown-choice-disabled.dcg-hovered, .actions-dropdown .dropdown-choice-disabled.dcg-depressed { color: #666; } /* src/js/shared/alp/activity-header.styl */ .activity-header { margin-top: 10px; position: relative; min-height: 100px; } .activity-header.curriculum-activity .menu-bookmark-container .teacher-guide-button { margin-right: 10px; } .activity-header.curriculum-activity .activity-title-container, .activity-header.curriculum-activity .activity-subtitle { margin-bottom: 0; } .activity-header:not(.curriculum-activity) .activity-subheading { position: relative; top: -10px; } .activity-header .editions-dropdown-container { margin-right: 10px; } .activity-header .activity-details-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .activity-header .activity-blurb-container, .activity-header .author-area { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; } .activity-header .activity-blurb-container, .activity-header .desbook-survey-link, .activity-header .alp-polygraph-help-center-link { font-size: 95%; color: #333; } .activity-header .activity-blurb-container { margin-top: 8px; } .activity-header .desbook-survey-link, .activity-header .alp-polygraph-help-center-link { margin-top: 1em; } .activity-header .desbook-survey-link i, .activity-header .alp-polygraph-help-center-link i { margin-right: 5px; color: #666; } .activity-header .alp-polygraph-help-center-link > div { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; white-space: pre-wrap; } .activity-header .desbook-survey-link i { font-size: 90%; } .activity-header .menu-bookmark-container { padding-right: 10px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .activity-header .menu-bookmark-container .title-bookmark-container { margin: 0 10px; } .activity-header .activity-meta-info { padding-left: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; } .activity-header .activity-thumb-container { width: 132px; height: 132px; position: relative; margin-right: 10px; } .activity-header .activity-thumb-container .activity-thumb { position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 2px; background-size: cover; background-position: center center; } .activity-header .activity-meta { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .activity-header .activity-title-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; margin-bottom: 8px; } .activity-header .activity-title h1 { line-height: 1.3em; margin-right: 16px; margin-top: 0; margin-bottom: 0; font-size: 28px; display: inline-block; } .activity-header .lesson-details.lesson-details { background: #e9e9e9; border-radius: 3px; padding: 10px 15px; margin: 30px 0 15px; color: #3b3b3b; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .activity-header .lesson-details.lesson-details .notes-and-standards, .activity-header .lesson-details.lesson-details .vocab-and-routines { margin-top: -15px; } .activity-header .lesson-details.lesson-details .notes-and-standards { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .activity-header .lesson-details.lesson-details h2 { font-size: 100%; font-weight: 400; line-height: 1em; margin: 20px 0 10px; } .activity-header .lesson-details.lesson-details h2.lesson-standards-label { margin-bottom: 0; } .activity-header .lesson-details.lesson-details .ProseMirror ul li { margin-top: 7px; margin-bottom: 7px; } .activity-header .lesson-details.lesson-details .vocab-and-routines { margin-left: 15px; width: 20%; min-width: fit-content; } .activity-header .lesson-details.lesson-details .vocab-and-routines .vocab-list, .activity-header .lesson-details.lesson-details .vocab-and-routines .routine-list { margin: 7px 0; padding-left: 10px; } .activity-header .lesson-details.lesson-details .vocab-and-routines .vocab-list li, .activity-header .lesson-details.lesson-details .vocab-and-routines .routine-list li { margin: 7px 0 7px 12px; } .activity-header .resource-links-container { margin: 30px 0 15px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-flow: wrap; -ms-flex-flow: wrap; flex-flow: wrap; } .activity-header .resource-links-container .resource-link { margin-bottom: 15px; } .activity-header .resource-links-container .web-resources { display: contents; } .activity-header .resource-links-container .linked-activities { display: contents; } @media screen and (max-width: 1100px) { .teacher-guide-button .teacher-guide-button-label { display: none; } .teacher-guide-button i { margin-right: 0 !important; } } @media screen and (max-width: 815px) { .activity-header .activity-title-container .teacher-guide-button, .activity-header .menu-bookmark-container .teacher-guide-button { display: none; } .activity-header h1.activity-title { font-size: 140%; } .activity-header .activity-thumb-container { width: 75px; height: 75px; } } /* src/js/shared/alp/activity-permissions-modal.styl */ .activity-permissions-modal-contents { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .activity-permissions-modal-contents .should-license-toggle { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .activity-permissions-modal-contents .admin-form-label { font-weight: bold; margin-bottom: 5px; } .activity-permissions-modal-contents .toggle-container { max-width: 200px; margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .activity-permissions-modal-contents .license-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .activity-permissions-modal-contents .license-container .license-selection { margin-right: 50px; } .activity-permissions-modal-contents .license-container .license-selection, .activity-permissions-modal-contents .license-container .license-options { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .activity-permissions-modal-contents .confirmation-message { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .activity-permissions-modal-contents .submit-buttons { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); text-align: right; } .activity-permissions-modal-contents .submit-buttons .btn + .btn { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .activity-permissions-modal-contents .amplify-radio-btn { margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .amplify-toast { margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } /* src/js/shared/alp/activity-subheading.styl */ .activity-header .activity-subheading { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .activity-header .activity-subheading .language-indicators { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .activity-header .activity-subheading .activity-subtitle + .language-indicators { margin-left: 10px; } .activity-header .activity-subheading .language-indicator-container + .language-indicator-container { margin-left: 5px; } .activity-header .activity-subheading .language-indicator { font-size: 85%; padding: 1px 5px; border-radius: 5px; border: 1px solid; color: #9068be; } /* src/js/shared/alp/add-email-view.styl */ .loading-collaborators { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; } .add-email-container { width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin: 10px 0; } .add-email-container input { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; font-size: 100%; padding: 5px 10px; border: 1px solid #bdbdbd; border-radius: 0.1875em; } .add-email-container .btn { margin-left: 5px; } /* src/js/shared/alp/all-blocks-assigned-modal.styl */ .all-blocks-assigned-modal-wrapper .info-wrapper { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; gap: 16px; padding-bottom: 26px; padding-top: 36px; place-items: center center; } .all-blocks-assigned-modal-wrapper .blocks-wrapper { padding-bottom: 36px; line-height: 2em; } .all-blocks-assigned-modal-wrapper .blocks-wrapper .block-wrapper .block-info { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; padding: 13px 0; gap: 13px; place-items: center center; } .all-blocks-assigned-modal-wrapper .blocks-wrapper .block-wrapper .block-info .max-lines { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-basis: 50%; flex-basis: 50%; } .all-blocks-assigned-modal-wrapper .blocks-wrapper .block-wrapper .horizontal-line { border-bottom: 1px solid #e9e9e9; } .all-blocks-assigned-modal-wrapper .buttons-wrapper { -webkit-box-align: end; -moz-box-align: end; -o-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; background-color: #f6f6f6; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin: 0 -30px -30px -30px; padding: 32px; } /* src/js/shared/alp/alp-view.styl */ .alp-container { padding-left: 0; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .alp-container .instance-list-container { border-radius: 5px; } .alp-container .resource-and-screens-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .alp-container .resource-and-screens-container.presentation { -webkit-box-direction: reverse; -moz-box-direction: reverse; -o-box-direction: reverse; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .alp-container .resource-and-screens-container.presentation .alp-section-header { margin-top: 0; } .alp-container .restricted-screens-section { position: relative; width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; overflow: hidden; } .alp-container .restricted-screens-section .miniscreen-placeholder-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -10px; } .alp-container .restricted-screens-section .miniscreen-placeholder-container .miniscreen-placeholder { height: 120px; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; margin: 10px; border: 2px solid #bbb; border-radius: 4px; width: calc(25% - 10px * 5); } @media screen and (max-width: 500px) { .alp-container .restricted-screens-section .miniscreen-placeholder-container .miniscreen-placeholder { width: calc(50% - 10px * 3); } } .alp-container .restricted-screens-section .miniscreen-placeholder-container:after { content: ''; background: -webkit-linear-gradient(rgba(246,246,246,0.4) 0, rgba(246,246,246,0.9) 60%, #f6f6f6); background: -moz-linear-gradient(rgba(246,246,246,0.4) 0, rgba(246,246,246,0.9) 60%, #f6f6f6); background: -o-linear-gradient(rgba(246,246,246,0.4) 0, rgba(246,246,246,0.9) 60%, #f6f6f6); background: -ms-linear-gradient(rgba(246,246,246,0.4) 0, rgba(246,246,246,0.9) 60%, #f6f6f6); background: linear-gradient(rgba(246,246,246,0.4) 0, rgba(246,246,246,0.9) 60%, #f6f6f6); position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .alp-container .restricted-screens-section .miniscreen-placeholder-cover { position: relative; padding: 40px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .alp-container .restricted-screens-section .miniscreen-placeholder-cover .icon-v2-locked { color: #3b3b3b; font-size: 200%; margin-right: 10px; } .alp-container .curriculum-attribution { text-align: center; margin: 40px 0 25px; } .loading-alp-view .loading-alp-header { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin-top: 10px; } .loading-alp-view .loading-alp-header .loading-alp-thumb { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; background: #fff; border: 2px solid #e2e2e2; border-radius: 7px; width: 125px; height: 125px; margin: 0 10px 10px; } .loading-alp-view .loading-alp-header .loading-alp-activity-info { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .loading-alp-view .loading-alp-header .loading-alp-activity-info .loading-alp-title { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; background: #e2e2e2; border-radius: 3px; width: 40%; height: 40px; } .loading-alp-view .loading-alp-header .loading-alp-activity-info .loading-alp-author { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; background: #e2e2e2; border-radius: 3px; height: 15px; width: 200px; margin-top: 15px; } .loading-alp-view .loading-alp-description .loading-alp-description-text { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; background: #e2e2e2; border-radius: 3px; width: 100%; height: 15px; margin: 15px 10px; } .loading-alp-view .loading-alp-description .loading-alp-description-text:nth-of-type(even) { width: 80%; } .loading-alp-view .loading-alp-description .loading-alp-description-text:last-of-type { width: 50%; } /* src/js/shared/alp/assign-activity-button-adm.styl */ .assign-activity-button-adm-wrapper { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; place-items: center center; } /* src/js/shared/alp/assign-modal-adm.styl */ .amp-styles .assign-modal-adm-wrapper .amplify-radio-btn .children input, .amp-styles .assign-modal-adm-wrapper .amplify-checkbox .children input { opacity: 1; -ms-filter: none; filter: none; position: static; padding: 0 10px; } .assign-activity-modal { max-height: calc(100vh - 200px); } .assign-modal-adm-wrapper { margin-top: 20px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; row-gap: 12px; } .assign-modal-adm-wrapper .select-dropdown-react-options { max-height: 300px !important; } .assign-modal-adm-wrapper .amplify-radio-btn { height: 40px; line-height: 40px; } .assign-modal-adm-wrapper .assign-modal-adm-blocks-wrapper { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; row-gap: 12px; } .assign-modal-adm-wrapper .assign-modal-adm-blocks-wrapper .edit-assignment-blocks-wrapper { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: baseline; -moz-box-align: baseline; -o-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; width: 100%; border-bottom: 1px solid #e9e9e9; padding-bottom: 5px; } .assign-modal-adm-wrapper .assign-modal-adm-blocks-wrapper .edit-assignment-blocks-wrapper .students-started { color: #9c0d63; font-size: 16px; line-height: 26px; } .assign-modal-adm-wrapper .assign-modal-adm-blocks-wrapper .edit-assignment-blocks-wrapper .already-assigned { font-style: italic; color: #3b3b3b; font-size: 16px; line-height: 26px; } .assign-modal-adm-wrapper .assign-modal-adm-blocks-wrapper .assign-modal-adm-alp-label-assign-to { font-size: 16px; font-weight: 500; margin-top: 5px; margin-bottom: 5px; } .assign-modal-adm-wrapper .assign-modal-adm-blocks-wrapper .assign-modal-adm-blocks-select { width: fit-content; max-width: 100%; } .assign-modal-adm-wrapper .assign-modal-adm-blocks-wrapper .selected-blocks-wrapper { -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 12px; } .assign-modal-adm-wrapper .assign-modal-adm-blocks-wrapper .selected-blocks-wrapper .selected-block-tile { background-color: #e9e9e9; border-radius: 0.1875em; -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: 0 8px; place-items: center center; width: fit-content; } .assign-modal-adm-wrapper .assign-modal-adm-blocks-wrapper .selected-blocks-wrapper .selected-block-tile .block-tile-name { max-width: 250px; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; } .assign-modal-adm-wrapper .assign-modal-adm-warning-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background-color: #f3e3b3; padding: 13px; margin-bottom: 8px; } .assign-modal-adm-wrapper .assign-modal-adm-warning-container .warning-icon-container { min-width: 32px; color: #d8a202; font-size: 20px; } .assign-modal-adm-wrapper .assign-modal-adm-warning-container .warning-message-container { font-weight: 16px; line-height: 26px; } .assign-modal-adm-wrapper .assign-modal-adm-warning-container .warning-message-header { font-weight: bold; } .assign-modal-adm-wrapper .assign-modal-adm-start-date-wrapper { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .assign-modal-adm-wrapper .assign-date-invalid { margin-left: 28px; padding: 4px 0; } .assign-modal-adm-wrapper .assign-modal-input { font-size: 18px; } .assign-modal-adm-wrapper .assign-modal-radio-button { margin-right: 8px; } .assign-modal-adm-wrapper .assign-modal-adm-alp-radio-option { margin-top: 5px; margin-bottom: 5px; } .assign-modal-adm-wrapper .assign-modal-boxed-input { padding: 8px 10px; width: 350px; color: #3b3b3b; border-width: 1px; border-color: #bdbdbd; border-radius: 3px; } .assign-modal-adm-wrapper .assign-modal-boxed-input-disabled { border-color: #e5e5e5; color: #e5e5e5; } .assign-modal-adm-wrapper .assign-modal-adm-footer { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; background-color: #f6f6f6; padding: 35px 30px; margin-top: 40px; margin-bottom: -30px; margin-left: -30px; margin-right: -30px; } .assign-modal-adm-wrapper .assign-modal-adm-footer .assign-modal-adm-buttons-wrapper { -webkit-align-self: flex-end; align-self: flex-end; -ms-flex-item-align: end; -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .assign-modal-adm-wrapper .assign-modal-adm-footer .assign-modal-adm-buttons-wrapper .assign-modal-adm-button-disabled { background-color: rgba(156,13,99,0.502); cursor: not-allowed; } .assign-modal-adm-wrapper .assign-modal-adm-footer .assign-modal-adm-buttons-wrapper .assign-modal-adm-button-disabled:hover { color: #fff; } /* src/js/shared/alp/assign-modal.styl */ .assign-activity-modal-container .assign-modal-error-container { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .assign-activity-modal-container .manage-classes-link-container { position: absolute; top: 60px; right: 50px; } .assign-activity-modal-container .manage-classes-link-container .manage-classes-link { color: #666; text-decoration: none; } .assign-activity-modal-container .manage-classes-link-container .manage-classes-link i { font-size: 85%; } .assign-activity-modal-container .manage-classes-link-container .manage-classes-link .link-text { text-decoration: underline; margin-left: 5px; } .assign-activity-modal-container .manage-classes-link-container .manage-classes-link.dcg-hovered { color: #333; } .assign-activity-modal-container .manage-classes-link-container .manage-classes-link.dcg-depressed { color: #000; } .assign-activity-modal-container .manage-classes-no-classes { text-align: center; margin-bottom: 10px; } .assign-activity-modal-container .manage-classes-no-classes img { width: 250px; } .assign-activity-modal-container .manage-classes-no-classes .no-classes-message { color: #666; margin: 10px 0 20px; } .assign-activity-modal-container .block-assign-list { border-top: 1px solid #bdbdbd; overflow-y: auto; margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); max-height: calc(100vh - 210px); } .assign-activity-modal-container .block-assign-list.has-google-classes { max-height: calc(100vh - 350px); } .assign-activity-modal-container .block-assign-list .block-assign-row { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; width: 100%; border-bottom: 1px solid #bdbdbd; padding: 7.5px 5px; } .assign-activity-modal-container .block-assign-list .block-assign-row .class-name-and-checkbox-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .assign-activity-modal-container .block-assign-list .block-assign-row .block-name { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .assign-activity-modal-container .block-assign-list .block-assign-row .block-name.already-assigned { color: #999; font-style: italic; } .assign-activity-modal-container .block-assign-list .block-assign-row .already-assigned-message { -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; color: #999; font-style: italic; margin-left: 10px; } .assign-activity-modal-container .block-assign-list .block-assign-row .assignment-error { margin-left: auto; text-align: left; position: relative; padding-right: 20px; max-width: 280px; } .assign-activity-modal-container .block-assign-list .block-assign-row .assignment-error .assignment-notification-close-cross { position: absolute; top: 2px; right: 2px; padding: 3px; } .assign-activity-modal-container .error-message { line-height: 1.2em; background-color: #f4c0b3; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #3b3b3b; border-radius: 0.1875em; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1); } .assign-activity-modal-container .submit-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin-top: 15px; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .assign-activity-modal-container .submit-container .assignment-loading { max-width: 60%; } .assign-activity-modal-container .submit-container .submit-buttons { margin-left: auto; text-align: right; } .assign-activity-modal-container .submit-container .submit-buttons .btn + .btn { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } @media screen and (max-width: 550px) { .assign-activity-modal-container .manage-classes-link-container { position: revert; margin-bottom: 15px; } } /* src/js/shared/alp/assign-welcome-modal-content.styl */ .welcome-assign-modal-content { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin: -30px; min-height: 537px; } .welcome-assign-modal-section { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; padding: 39px; } .welcome-assign-modal-section .welcome-assign-modal-header { font-size: 25px; font-weight: 500; margin-bottom: 13px; } .welcome-assign-modal-section .welcome-assign-modal-message { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .welcome-assign-modal-section ol { margin-top: 25px; padding-left: 20px; } .welcome-assign-modal-section-right { background: #c2d7ef; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .welcome-assign-modal-animation { width: 100%; } .welcome-assign-modal-button { background: #9c0d63; border-radius: 20px; border: none; color: #fff; padding: 7px 24px; cursor: pointer; } .welcome-assign-modal-button:hover { background: #840b54; } .welcome-assign-modal-button-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } /* src/js/shared/alp/author-area.styl */ .author-area { color: #3b3b3b; font-size: 95%; } .author-area .exclusive-tag { cursor: pointer; margin-right: 5px; position: relative; top: 5px; } .author-area .author-and-info-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: baseline; -moz-box-align: baseline; -o-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; margin-top: -8px; } .author-area .activity-author-groups { margin-top: 5px; } .author-area .activity-author-groups .label { font-weight: bolder; } .author-area .activity-author { padding: 5px 0; } .author-area .activity-author .byline { display: inline-block; margin-right: 8px; } .author-area .activity-author .author-tag { line-height: 1.3em; vertical-align: middle; display: inline-block; font-size: 90%; padding: 1px 6px; border: 1px solid; border-radius: 10px; margin-right: 8px; } .author-area .activity-author .author-tag.searchable-tag { color: #9c0d63; } .author-area .activity-author .author-tag.by-desmos { color: #3278c8; } .author-area .activity-author .author-tag.by-cpm { line-height: 22px; padding-right: 10px; color: #233368; } .author-area .activity-author .author-tag.by-cpm img { width: 20px; height: 20px; float: left; margin-right: 3px; } .author-area .activity-author .author-tag.by-you, .author-area .activity-author .author-tag.edited-by-you, .author-area .activity-author .author-tag.team-desmos { color: #005040; } .author-area .time-estimate, .author-area .activity-type { line-height: 2em; padding: 0 8px; border-left: 1px solid #999; } .author-area .collaboration-byline { font-style: italic; font-size: 80%; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; } .author-area .device-support { padding: 10px 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .author-area .device-support .device-support-status { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #3b3b3b; } .author-area .device-support .device-support-status:not(.screen-reader-friendly) { margin-right: 20px; } .author-area .device-support .device-icon-container, .author-area .device-support .dcg-tooltip-hit-area-container { height: 25px; } .author-area .device-support .device-info-text { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .author-area .private-message-to-author, .author-area .is-private-share-message { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; line-height: 1.5em; } .author-area .is-private-message { margin-top: 5px; font-weight: 500; } .author-area .is-private-message i.icon-v2-locked { margin-right: 4px; position: relative; top: 2px; } @media screen and (max-width: 800px) { .author-and-info-container { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .author-and-info-container .activity-author { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -o-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } .author-and-info-container .time-and-category { -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -o-box-ordinal-group: 3; -ms-flex-order: 3; -webkit-order: 3; order: 3; } .author-and-info-container .time-and-category .time-estimate { border-left: none; padding-left: 0; } .author-and-info-container .collaboration-byline { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -o-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; } } @media screen and (max-width: 820px) { .author-area .device-support .device-icon-container, .author-area .device-support .device-info-text { display: block; } } @media screen and (max-width: 500px) { .author-area .device-support { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .author-area .device-support .device-support-status:not(.screen-reader-friendly) { margin-right: 10px; } } /* src/js/shared/alp/author-groups-modal.styl */ .author-groups-modal-contents .amplify-toast { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; } .author-groups-modal-contents .disabled-options-message { width: 75%; margin: 0 auto; text-align: center; font-size: 90%; background: rgba(50,120,200,0.1); padding: 5px; border: 1px solid rgba(50,120,200,0.5); border-radius: 3px; color: #fff; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .author-groups-modal-contents .author-group-selection-label { color: #666; font-size: 110%; margin-top: 20px; margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .author-groups-modal-contents .author-groups-modal-buttons { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-box-align: baseline; -moz-box-align: baseline; -o-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; margin-top: 20px; text-align: right; } .author-groups-modal-contents .author-groups-modal-buttons .confirmation-button { margin-left: 20px; } .author-groups-modal-contents .author-groups-modal-buttons .btn-blue { margin-left: 20px; } /* src/js/shared/alp/author-settings.styl */ .author-settings-container { position: relative; background: #e2e2e2; padding: 30px 0; } .author-settings-container .author-settings { max-width: 930px; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; } /* src/js/shared/alp/blocks-section.styl */ .block-section { margin-top: 27px; position: relative; } .block-section .alp-preview-sessions-placeholder { color: #666; padding: 10px; border: 1px solid #bdbdbd; border-radius: 5px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .block-section .alp-preview-sessions-placeholder img { height: 60px; } .block-section .alp-preview-sessions-placeholder .alp-preview-message-container { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: left; margin-left: 15px; max-width: 600px; } .block-section .divided-btn { font-size: 18px; } .block-section .divided-btn .dropdown-container { font-size: initial; } .block-section .success-message { text-align: center; font-size: 90%; line-height: 24px; margin-bottom: 20px; width: 100%; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .block-section .success-message { font-size: 120%; color: #00866b; } .block-section .success-message .pillow-icon-check { margin-right: 5px; display: inline-block; } .block-section .alp-section-content .amplify-toast { z-index: 1; } .block-section .assign-activity-options { padding: 10px; max-height: 222px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; min-width: 230px; } .block-section .assign-activity-options .assign-to-menu-title-container { padding: 7px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; font-size: 95%; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .block-section .assign-activity-options .assign-to-menu-title-container .assign-to-menu-title { text-transform: uppercase; color: #999; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; margin-right: 10px; } .block-section .assign-activity-options .assign-to-menu-title-container .dcg-shared-dark-gray-link { font-size: 90%; text-decoration: none; } .block-section .assign-activity-options .assign-to-menu-title-container .dcg-shared-dark-gray-link .pillow-icon-settings { margin-right: 5px; font-size: 90%; } .block-section .assign-activity-options .assign-to-menu-title-container .dcg-shared-dark-gray-link span { text-decoration: underline; } /* src/js/shared/alp/collaborate-modal.styl */ .collaborate-modal .activity-collaborate-container, .share-modal .activity-collaborate-container { padding: 20px; } .collaborate-modal .activity-collaborate-container .collaborate-header, .share-modal .activity-collaborate-container .collaborate-header { color: #3b3b3b; font-size: 160%; position: relative; } .collaborate-modal .activity-collaborate-container .collaborate-description, .share-modal .activity-collaborate-container .collaborate-description { color: #666; margin: 10px 0 20px; } .collaborate-modal .activity-collaborate-container .collaborate-description .blue-link, .share-modal .activity-collaborate-container .collaborate-description .blue-link { margin-left: 5px; } .collaborate-modal .activity-collaborate-container .dividing-line, .share-modal .activity-collaborate-container .dividing-line { height: 1px; background-color: #bdbdbd; width: 100%; } .collaborate-modal .activity-collaborate-container .owner-tag, .share-modal .activity-collaborate-container .owner-tag { float: right; color: #999; } .collaborate-modal .activity-collaborate-container .add-collaborator-title, .share-modal .activity-collaborate-container .add-collaborator-title { color: #3b3b3b; margin-top: 20px; font-size: 110%; } /* src/js/shared/alp/collaborator-row.styl */ .collaborator-row { border-top: 1px solid #bdbdbd; } .collaborator-row:last-of-type { border-bottom: 1px solid #bdbdbd; } .collaborator-row .collaborator-row-interior { padding: 10px 5px; } .collaborator-row .collaborator-row-interior .you-tag { color: #999; margin-left: 5px; } .collaborator-row .collaborator-row-interior .collaborator-email { color: #3b3b3b; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; max-width: 75%; display: inline-block; vertical-align: middle; } .collaborator-row .collaborator-label { float: right; color: #999; font-style: italic; } .collaborator-row .start-remove-collaborator { color: #db2e00; float: right; text-decoration: underline; } .collaborator-row .start-remove-collaborator.dcg-hovered { color: #ad1a1a; } .collaborator-row .collaborator-confirm-remove { background: rgba(219,46,0,0.2); padding: 5px 8px; color: #3b3b3b; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; line-height: 1.2em; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; font-size: 90%; } .collaborator-row .collaborator-confirm-remove .collaborator-confirm-remove-message { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; font-size: 90%; } .collaborator-row .collaborator-confirm-remove .collaborator-confirm-remove-options .cancel-link { padding-right: 15px; } /* src/js/shared/alp/curriculum-banner.styl */ .curriculum-banner .shared-announcement-banner-left-section { background: #fcefc7; } .curriculum-banner .shared-announcement-banner-left-section .banner-text { font-size: 1em; } .curriculum-banner .shared-announcement-banner-left-section .banner-text h2 { font-family: "Amplify", serif; font-size: 1.5em; } .curriculum-banner .shared-announcement-banner-right-section { background: rgba(255,255,255,0.5) url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/curriculum-banner-background-blob-af211e84797334718e337e6f95755bc428245f57-a.png"); background-size: contain; background-repeat: no-repeat; padding-left: 80px; width: 600px; } .curriculum-banner .additional-banner-text { margin-right: 10px; margin-left: 30px; font-size: 1.1em; } @media screen and (max-width: 780px) { .shared-announcement-banner.curriculum-banner { background: #fcefc7; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .shared-announcement-banner.curriculum-banner .shared-announcement-banner-right-section, .shared-announcement-banner.curriculum-banner .shared-announcement-banner-left-section { background-image: none; background: none; min-height: 0px; padding: 0px; background: transparent; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; text-align: center; } .shared-announcement-banner.curriculum-banner .banner-text { margin: 15px; } .shared-announcement-banner.curriculum-banner .btn-teal, .shared-announcement-banner.curriculum-banner .btn { margin: 0 15px 15px 15px; } } /* src/js/shared/alp/deprecated-feature-warning.styl */ .alp-deprecated-feature-warning { width: 100%; margin-top: 30px; background: rgba(216,162,2,0.2); border: 1px solid #d8a202; border-radius: 5px; padding: 20px 20px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; line-height: 24px; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .alp-deprecated-feature-warning .warning-label { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .alp-deprecated-feature-warning .message { display: inline; } .alp-deprecated-feature-warning i { font-size: 140%; color: #fa824c; margin-right: 5px; position: relative; top: 2px; line-height: 24px; } /* src/js/shared/alp/draft-section.styl */ .draft-section-container { padding: 10px 0; } .draft-section-container .draft-section { background: #e9e9e9; border-radius: 20px; position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; height: 40px; } .draft-section-container .draft-section-text { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; font-size: 90%; color: #3b3b3b; padding-left: 15px; } .draft-section-container .draft-section-text .draft-heading { font-weight: 500; } .draft-section-container .draft-section-text .draft-divider { margin: 0 5px; } .draft-section-container .buttons-section { position: absolute; top: 0; right: 5px; height: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .draft-section-container .buttons-section .draft-options-container { margin: 0 10px; height: 100%; } .draft-section-container .published-section { font-style: italic; font-size: 90%; color: #080808; } .draft-options-dropdown.dcg-shared-options-dropdown { min-width: 160px; } .draft-options-dropdown.dcg-shared-options-dropdown:after { content: ""; position: absolute; top: -9px; right: 9px; border-width: 9px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .draft-options-dropdown.dcg-shared-options-dropdown:before { content: ""; position: absolute; top: -10px; right: 8px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .draft-options-dropdown.dcg-shared-options-dropdown .discard-draft { color: #db2e00; } .draft-options-dropdown.dcg-shared-options-dropdown .discard-draft:not(.dropdown-choice-disabled).dcg-hovered, .draft-options-dropdown.dcg-shared-options-dropdown .discard-draft:not(.dropdown-choice-disabled).dcg-depressed { color: #ad1a1a; } .draft-options-dropdown .dot-dot-container { margin-top: -4px; } /* src/js/shared/alp/external-preferences-section.styl */ .external-preferences-section { background: #f7f7f7; padding: 10px 15px; margin-top: 15px; border-radius: 5px; border: 1px solid #e2e2e2; } .external-preferences-section .external-preferences-title { font-size: 115%; margin-bottom: 5px; } .external-preferences-section .external-preferences-title a { float: right; font-size: 85%; } .external-preferences-section .external-preferences-settings { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .external-preferences-section .external-preferences-settings .assignment-preference { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; margin-top: 5px; } .external-preferences-section .external-preferences-settings .assignment-preference:not(:last-of-type) { margin-right: 25px; } .external-preferences-section .external-preferences-settings .assignment-preference .assignment-icon-container { position: relative; } .external-preferences-section .external-preferences-settings .assignment-preference .assignment-icon-container .desmos-logo img { border-radius: 3px; } .external-preferences-section .external-preferences-settings .assignment-preference .assignment-icon-container .pillow-icon-check, .external-preferences-section .external-preferences-settings .assignment-preference .assignment-icon-container .pillow-icon-remove, .external-preferences-section .external-preferences-settings .assignment-preference .assignment-icon-container .pillow-icon-pencil { position: absolute; font-size: 50%; position: absolute; left: 15px; bottom: 2px; text-shadow: calc(1px * -1) calc(1px * -1) 0 #fff, calc(1px * -1) 1px 0 #fff, 1px calc(1px * -1) 0 #fff, 1px 1px 0 #fff, 0 calc(1px * -1) 0 #fff, 0 1px 0 #fff, 1px 0 0 #fff, calc(1px * -1) 0 0 #fff; } .external-preferences-section .external-preferences-settings .assignment-preference .assignment-icon-container .pillow-icon-check { color: #00866b; } .external-preferences-section .external-preferences-settings .assignment-preference .assignment-icon-container .pillow-icon-remove { color: #db2e00; } .external-preferences-section .external-preferences-settings .assignment-preference .assignment-icon-container .pillow-icon-pencil { color: #666; } .external-preferences-section .external-preferences-settings .assignment-preference .option-title { font-weight: bold; } /* src/js/shared/alp/featured-collection-section.styl */ .featured-collections-alp-container { margin: 20px 0; } .featured-collections-alp-container h1 { font-size: 100%; color: #3b3b3b; line-height: 1.5em; } .featured-collections-alp-container .collection-card { margin-bottom: 10px; } /* src/js/shared/alp/lesson-plan-button.styl */ .lesson-plan-button { font-size: 115%; } .lesson-plan-button i { padding-right: 8px; } .lesson-plan-modal.modal-cover.fixed-width .modal-container .modal-contents-wrapper { max-height: 85vh; } .lesson-plan-modal.modal-cover.fixed-width .modal-container .prosemirror-lesson { padding: 15px; } .lesson-plan-modal.modal-cover.fixed-width .modal-container .prosemirror-lesson h2, .lesson-plan-modal.modal-cover.fixed-width .modal-container .prosemirror-lesson h3 { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1) 0; } /* src/js/shared/alp/no-blocks-warning-modal.styl */ .no-blocks-warning-modal-wrapper .warning-wrapper { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; gap: 12px; padding-bottom: 26px; padding-top: 30px; place-items: center center; } .no-blocks-warning-modal-wrapper .warning-wrapper .warning-label { font-size: 14px; font-weight: bold; } .no-blocks-warning-modal-wrapper .text-wrapper { padding-bottom: 36px; } .no-blocks-warning-modal-wrapper .text-wrapper .main-heading { padding-bottom: 18px; font-weight: bold; font-size: 18px; } .no-blocks-warning-modal-wrapper .buttons-wrapper { -webkit-box-align: end; -moz-box-align: end; -o-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; background-color: #f6f6f6; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin: 0 -30px -30px -30px; padding: 32px; } /* src/js/shared/alp/section.styl */ .alp-section .alp-section-header { margin: 30px 0 15px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .alp-section .alp-section-header .header-text { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #3b3b3b; font-size: 135%; margin-top: 0; margin-bottom: 0; } .alp-section .alp-section-header .header-text i { margin-right: 5px; font-size: 70%; -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; -o-transition: -o-transform 0.2s; -ms-transition: -ms-transform 0.2s; transition: transform 0.2s; } .alp-section .alp-section-header .header-text i.rotated { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .alp-section .alp-section-header .header-button { min-width: 200px; text-align: center; } .alp-section .alp-section-content { font-size: 15px; display: block; } .alp-section .alp-section-content.collapsible { margin: 0 20px; } .alp-section .alp-section-content.hidden { display: none; } @media screen and (max-width: 680px) { .alp-section .alp-section-header .header-button { min-width: min-content; } } /* src/js/shared/alp/share-modal.styl */ .share-modal .share-modal-container .share-link { margin: 20px 0; } .share-modal .share-modal-container .share-link .share-link-text { margin-bottom: 5px; color: #666; } .share-modal .share-modal-container .share-link input.activity-url { border-radius: 0.1875em; font-size: 100%; width: 100%; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.7); } .share-modal .exclusive-activity-warning { padding: 10px 5px; font-weight: 600; color: #666; } .share-modal .social-share-links { margin-top: 20px; } .share-modal .social-share-links .social-share-text { color: #666; display: block; } .share-modal .social-share-links .social-share-button { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .share-modal .social-share-links .twitter-container, .share-modal .social-share-links .facebook-container { width: calc(50% - 5px); text-align: center; margin-top: 10px; border-radius: 0.1875em; text-decoration: none; } .share-modal .social-share-links .twitter-container i, .share-modal .social-share-links .facebook-container i { padding-right: 6px; } .share-modal .social-share-links .btn-secondary:first-of-type { margin-right: 10px; } /* src/js/shared/alp/shared-announcement-banner.styl */ .shared-announcement-banner { width: 100%; min-height: 72px; margin: 10px 0 20px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border-radius: 5px; position: relative; font-size: 14px; line-height: 1.2; overflow: hidden; } .shared-announcement-banner .shared-announcement-banner-left-section, .shared-announcement-banner .shared-announcement-banner-right-section { min-height: 72px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: relative; } .shared-announcement-banner .shared-announcement-banner-left-section { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; } .shared-announcement-banner .banner-text { width: 100%; margin-left: 90px; color: #3b3b3b; } .shared-announcement-banner .btn { margin: 0 20px 0 10px; } .shared-announcement-banner .banner-image-container { width: 80px; position: absolute; top: 0; left: 0; bottom: 0; } .shared-announcement-banner .banner-image-container .banner-image { height: 100%; } .shared-announcement-banner h2 { margin: 0; } @media screen and (max-width: 1100px) { .shared-announcement-banner .shared-announcement-banner-right-section { width: auto; } .shared-announcement-banner .additional-banner-text { display: none; } } @media screen and (max-width: 900px) { .shared-announcement-banner .shared-announcement-banner-right-section { padding-left: auto; } .shared-announcement-banner .banner-image-container { display: none; } .shared-announcement-banner .btn { margin: 0 20px 0 10px; } .shared-announcement-banner .banner-text { margin: 15px 0 15px 20px; } } /* src/js/shared/alp/view-linked-activity.styl */ .linked-activity { text-decoration: none; font-size: 115%; } .linked-activity img { height: 26px; margin-right: 10px; border-radius: 3px; } /* src/js/shared/alp/view-paper-resource.styl */ .alp-paper-resources, .lesson-settings-container .paper-resource-list { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .alp-paper-resources .paper-resource, .lesson-settings-container .paper-resource-list .paper-resource { margin: 15px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .alp-paper-resources .paper-resource .resource-title, .lesson-settings-container .paper-resource-list .paper-resource .resource-title { margin-bottom: 5px; color: #333; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: end; -moz-box-align: end; -o-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .alp-paper-resources .paper-resource .resource-title i, .lesson-settings-container .paper-resource-list .paper-resource .resource-title i { margin-right: 5px; color: #666; } .alp-paper-resources .paper-resource .resource-title span, .lesson-settings-container .paper-resource-list .paper-resource .resource-title span { font-size: 100%; text-decoration: none; } .alp-paper-resources .paper-resource .resource-title .dcg-tooltip-hit-area-container, .lesson-settings-container .paper-resource-list .paper-resource .resource-title .dcg-tooltip-hit-area-container { height: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .alp-paper-resources .paper-resource .image, .lesson-settings-container .paper-resource-list .paper-resource .image { position: relative; padding-top: 130%; background-color: #fff; } .alp-paper-resources .paper-resource .dcg-shared-dropdown-popover-container.additional-links, .lesson-settings-container .paper-resource-list .paper-resource .dcg-shared-dropdown-popover-container.additional-links { position: absolute; top: 0; right: 0; z-index: 1; } .alp-paper-resources .paper-resource .dcg-shared-dropdown-popover-container.additional-links .dropdown-container, .lesson-settings-container .paper-resource-list .paper-resource .dcg-shared-dropdown-popover-container.additional-links .dropdown-container { top: calc(100% + 5px); right: 1px; max-width: 200px; } .alp-paper-resources .paper-resource .dcg-shared-dropdown-popover-container.additional-links .dropdown-container:after, .lesson-settings-container .paper-resource-list .paper-resource .dcg-shared-dropdown-popover-container.additional-links .dropdown-container:after { content: ""; position: absolute; top: -9px; right: 8px; border-width: 9px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .alp-paper-resources .paper-resource .dcg-shared-dropdown-popover-container.additional-links .dropdown-container:before, .lesson-settings-container .paper-resource-list .paper-resource .dcg-shared-dropdown-popover-container.additional-links .dropdown-container:before { content: ""; position: absolute; top: -10px; right: 7px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .alp-paper-resources .paper-resource .dcg-shared-dropdown-popover-container.additional-links .dropdown-container .dropdown-explanations, .lesson-settings-container .paper-resource-list .paper-resource .dcg-shared-dropdown-popover-container.additional-links .dropdown-container .dropdown-explanations { min-width: 150px; } .alp-paper-resources .paper-resource .amp-link, .lesson-settings-container .paper-resource-list .paper-resource .amp-link, .alp-paper-resources .paper-resource .restricted-placeholder, .lesson-settings-container .paper-resource-list .paper-resource .restricted-placeholder { position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 1px solid #ccc; padding: 20px; } .alp-paper-resources .paper-resource .amp-link .preview-watermark, .lesson-settings-container .paper-resource-list .paper-resource .amp-link .preview-watermark, .alp-paper-resources .paper-resource .restricted-placeholder .preview-watermark, .lesson-settings-container .paper-resource-list .paper-resource .restricted-placeholder .preview-watermark { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; font-size: 200%; color: #999; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); text-shadow: calc(1px * -1) calc(1px * -1) 0 #fff, calc(1px * -1) 1px 0 #fff, 1px calc(1px * -1) 0 #fff, 1px 1px 0 #fff, 0 calc(1px * -1) 0 #fff, 0 1px 0 #fff, 1px 0 0 #fff, calc(1px * -1) 0 0 #fff; letter-spacing: 0.02em; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .alp-paper-resources .paper-resource .amp-link img, .lesson-settings-container .paper-resource-list .paper-resource .amp-link img, .alp-paper-resources .paper-resource .restricted-placeholder img, .lesson-settings-container .paper-resource-list .paper-resource .restricted-placeholder img { max-width: 100%; max-height: 100%; object-fit: contain; } .alp-paper-resources { margin: -15px -15px; } .alp-paper-resources .paper-resource { width: calc((100% - (15px * 10)) / 5); min-width: 150px; } .alp-paper-resources .paper-resource .image .amp-link { -webkit-transition: border-color 0.2s linear; -moz-transition: border-color 0.2s linear; -o-transition: border-color 0.2s linear; -ms-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .alp-paper-resources .paper-resource .image .amp-link.dcg-hovered { border-color: #9c0d63; } .alp-paper-resources .paper-resource .image .amp-link.dcg-depressed { border-color: #5e083b; } @media screen and (max-width: 1100px) { .alp-section-content .alp-paper-resources .paper-resource { width: calc((100% - (15px * 8)) / 4); } } @media screen and (max-width: 950px) { .alp-section-content .alp-paper-resources .paper-resource { width: calc((100% - (15px * 6)) / 3); } } @media screen and (max-width: 750px) { .alp-section-content .alp-paper-resources .paper-resource { width: calc((100% - (15px * 4)) / 2); } } /* src/js/shared/alp/view-web-resource.styl */ .web-resource { text-decoration: none; min-height: 40px; font-size: 115%; } .web-resource img { height: 26px; margin-right: 10px; border-radius: 3px; } .web-resource .web-resource-icon { margin-right: 10px; } /* src/js/shared/approval/approval-modal.styl */ .approval-modal-content .approval-modal-error { font-size: 120%; text-align: center; color: #676767; padding: 50px 25px; } .approval-modal-content .approval-info .blue-link { margin: 10px 0; display: inline-block; } .approval-modal-content .pending-student-modal-container { position: relative; padding-bottom: 50px; } .approval-modal-content .pending-student-modal-container .student-info-container { height: calc(100vh - 250px); overflow-y: auto; } .approval-modal-content .pending-student-modal-container .student-info-container.show-border { border-bottom: 1px solid #bdbdbd; } .approval-panel { margin-top: 20px; } .approval-panel .approval-panel-header { margin-bottom: 10px; } .approval-panel .approval-panel-header .block-info, .approval-panel .approval-panel-header .instance-info .class-code { font-size: 130%; } .approval-panel .approval-panel-header .instance-info .activity-title { color: #3b3b3b; margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.8) 0; font-size: 1.4em; } .approval-panel .approval-panel-footer { margin-top: 15px; } .approval-panel .approval-panel-footer .approve-all-btn { margin: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.7); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .approval-panel .approval-panel-table .classroom-shared-table { border-left: 3px solid #3278c8; padding-left: 10px; } .approval-panel .approval-panel-table .classroom-shared-table-row.content-row { padding: 7px 5px; } .approve-all-container { position: absolute; bottom: 0; right: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; margin-top: 30px; } .approve-all-container .approve-all-error { background-color: #f4c0b3; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #3b3b3b; border-radius: 0.1875em; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1); margin: auto 10px; } .approval-empty-state { text-align: center; max-width: 500px; margin: 20px auto; } .approval-empty-state .no-approvals-message { margin: 10px; font-size: 120%; } .approval-empty-state .empty-state-image { margin: 10px auto; width: 350px; height: 206px; max-width: 85%; } .approval-empty-state .empty-state-image img { margin: 0 auto; width: 100%; } @media screen and (max-width: 470px) { .approval-modal-content .approval-panel-footer { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .approval-modal-content .approval-panel-footer .expire-container, .approval-modal-content .approval-panel-footer .approve-all { -webkit-align-self: flex-end; align-self: flex-end; -ms-flex-item-align: end; } .approval-modal-content .approval-panel-footer .expire-container { margin-right: 0; text-align: right; } .approval-modal-content .approval-panel-footer .approve-all { margin-top: 10px; } } /* src/js/shared/approval/approval-notification.styl */ .approval-notification-container { position: fixed; bottom: 20px; right: 10px; padding: 10px 15px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border: 1px solid rgba(0,0,0,0.1); border-radius: 5px; background-color: #f3e3b3; -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.15); box-shadow: 0 0 10px rgba(0,0,0,0.15); z-index: 2; cursor: pointer; color: #333; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; -o-transition: background 0.3s; -ms-transition: background 0.3s; transition: background 0.3s; } .approval-notification-container.dcg-hovered { border: 1px solid rgba(0,0,0,0.15); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); box-shadow: 0 0 10px rgba(0,0,0,0.2); } .approval-notification-container.dcg-hovered .approval-count-container { -webkit-transform: scale(1.05, 1.05); -moz-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); } .approval-notification-container.dcg-depressed { border: 1px solid rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); box-shadow: 0 0 10px rgba(0,0,0,0.2); background: #f8e89b; } .approval-notification-container.dcg-depressed .approval-count-container { -webkit-transform: scale(1.05, 1.05); -moz-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); background: #d8a202; } .approval-notification-container.minimized { padding: 0; width: 0; height: 0; } .approval-notification-container.minimized .approval-count-animation-container { position: absolute; top: -20px; left: -30px; } .approval-notification-container h2 { text-align: left; font-size: 110%; font-weight: 600; margin-bottom: 0; margin-top: 0; } .approval-notification-container .approval-notification-content { color: #3b3b3b; padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1); } .approval-notification-container .approval-content { font-size: 90%; } .approval-notification-container .approval-count-animation-container { position: absolute; top: -15px; left: -15px; height: 30px; width: 30px; } .approval-notification-container .approval-count-animation-container .approval-count-container { -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; -o-transition: -o-transform 0.3s; -ms-transition: -ms-transform 0.3s; transition: transform 0.3s; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border-radius: 50%; height: 30px; width: 30px; line-height: 30px; background: #d8a202; border: 1px solid rgba(0,0,0,0.1); color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .approval-notification-container .approval-count-animation-container .notification-bubble-halo:after { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); position: absolute; top: 0; left: 0; content: ''; height: 30px; width: 30px; border: 3px solid #d8a202; border-radius: 100%; -webkit-animation-name: ripple; -moz-animation-name: ripple; -o-animation-name: ripple; -ms-animation-name: ripple; animation-name: ripple; -webkit-animation-duration: 3s; -moz-animation-duration: 3s; -o-animation-duration: 3s; -ms-animation-duration: 3s; animation-duration: 3s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1); -moz-animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1); -o-animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1); -ms-animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1); animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1); z-index: -1; } .approval-notification-container .approval-notification-minimize { padding: 6px; color: #000; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); font-size: 90%; } .approval-notification-container .approval-notification-minimize.dcg-hovered { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } .approval-notification-container .approval-notification-minimize.dcg-depressed { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); } @media screen and (max-width: 410px) { .approval-notification-container { max-width: 100%; margin-left: 20px; } } @-moz-keyframes ripple { 0% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale3d(0.75, 0.75, 1); -moz-transform: scale3d(0.75, 0.75, 1); -o-transform: scale3d(0.75, 0.75, 1); -ms-transform: scale3d(0.75, 0.75, 1); transform: scale3d(0.75, 0.75, 1); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale3d(1.5, 1.5, 1); -moz-transform: scale3d(1.5, 1.5, 1); -o-transform: scale3d(1.5, 1.5, 1); -ms-transform: scale3d(1.5, 1.5, 1); transform: scale3d(1.5, 1.5, 1); } } @-webkit-keyframes ripple { 0% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale3d(0.75, 0.75, 1); -moz-transform: scale3d(0.75, 0.75, 1); -o-transform: scale3d(0.75, 0.75, 1); -ms-transform: scale3d(0.75, 0.75, 1); transform: scale3d(0.75, 0.75, 1); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale3d(1.5, 1.5, 1); -moz-transform: scale3d(1.5, 1.5, 1); -o-transform: scale3d(1.5, 1.5, 1); -ms-transform: scale3d(1.5, 1.5, 1); transform: scale3d(1.5, 1.5, 1); } } @-o-keyframes ripple { 0% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale3d(0.75, 0.75, 1); -moz-transform: scale3d(0.75, 0.75, 1); -o-transform: scale3d(0.75, 0.75, 1); -ms-transform: scale3d(0.75, 0.75, 1); transform: scale3d(0.75, 0.75, 1); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale3d(1.5, 1.5, 1); -moz-transform: scale3d(1.5, 1.5, 1); -o-transform: scale3d(1.5, 1.5, 1); -ms-transform: scale3d(1.5, 1.5, 1); transform: scale3d(1.5, 1.5, 1); } } @keyframes ripple { 0% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: scale3d(0.75, 0.75, 1); -moz-transform: scale3d(0.75, 0.75, 1); -o-transform: scale3d(0.75, 0.75, 1); -ms-transform: scale3d(0.75, 0.75, 1); transform: scale3d(0.75, 0.75, 1); } 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale3d(1.5, 1.5, 1); -moz-transform: scale3d(1.5, 1.5, 1); -o-transform: scale3d(1.5, 1.5, 1); -ms-transform: scale3d(1.5, 1.5, 1); transform: scale3d(1.5, 1.5, 1); } } /* src/js/shared/approval/approval-table.styl */ .approval-panel-table .table-column-student-name { width: 300px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; padding-right: 5px; } .approval-panel-table .table-column-email { width: 400px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; padding-right: 5px; } .approval-panel-table .table-column-actions { margin-left: auto; } .approval-panel-table .table-column-actions .approval-error { text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .approval-panel-table .table-column-actions .approval-actions { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: 5px; font-size: 16px; } .approval-panel-table .table-column-actions .approval-actions .approve-link { margin-left: 30px; } .approval-panel-table .table-column-actions .approval-actions .disabled { pointer-events: none; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .approval-panel-table .table-column-deny { width: 5%; } .approval-panel-table .table-column-approve { width: 5%; } .blur-text-view .blur { color: transparent; text-shadow: 0 0 7px rgba(0,0,0,0.75); } .approval-panel-table .table-column-actions .approval-actions .blue-link { text-decoration-color: #3278c8; } .approval-panel-table .table-column-actions .approval-actions .red-link { color: #db2e00; } .approval-panel-table .table-column-actions .approval-actions .red-link.dcg-hovered { text-decoration: none; } @media screen and (max-width: 470px) { .approval-panel-table .table-column-actions .approval-actions .approve-link { margin-left: 15px; } } /* src/js/shared/approval/deny-confirmation.styl */ .deny-confirmation-modal h1.dcg-shared-modal-title { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .deny-confirmation { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background-color: #f4c0b3; color: #3b3b3b; border-radius: 0.1875em; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1); } .deny-confirmation .deny-student-message { margin-right: 15px; color: #333; } .deny-confirmation .red-link { font-weight: 600; } .deny-confirmation .red-link.dcg-hovered { text-decoration: none; } .deny-approved-student-modal { white-space: normal; } .deny-approved-student-modal .confirmation-message .confirmation-highlight { font-weight: 600; } .deny-approved-student-modal .confirmation-message .dcg-p:not(:first-child) { margin-top: 10px; } .deny-approved-student-modal .deny-error-message { background-color: #f4c0b3; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #3b3b3b; border-radius: 0.1875em; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1); margin-top: 10px; } .deny-approved-student-modal .deny-error-message i { margin-right: 8px; } .deny-approved-student-modal .submit-buttons { margin-top: 20px; margin-left: auto; text-align: right; } .deny-approved-student-modal .submit-buttons .btn + .btn { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } /* src/js/shared/approval/group-approval-actions.styl */ .group-approval-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .group-approval-container .expire-container { margin-right: 15px; font-size: 90%; -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; } .group-approval-container .expire-container .not-recognized { text-align: right; color: #676767; } .group-approval-container .expire-container .disabled { pointer-events: none; color: #666; } .group-approval-container .expire-container .expire-link .red-link { color: #db2e00; text-decoration-color: #db2e00; } .group-approval-container .approve-all { -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; } .group-approval-container .approve-all .approve-all-btn.btn-blue-outline { padding: 10px 15px; } .group-approval-container .approve-all .approve-all-btn.btn-blue-outline.disabled { pointer-events: none; color: #666; } .group-approval-container .group-approval-error { text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; margin: auto 0; } @media screen and (max-width: 400px) { .group-approval-container { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; margin: 0 auto; } .group-approval-container .expire-container { margin: 15px 0; text-align: center; } } /* src/js/shared/components/scrubber.styl */ .scrubber { width: 100%; height: 22px; position: relative; } .scrubber .track { position: absolute; top: 50%; left: 0; width: 100%; height: 6px; background: var(--scrubber-track-background, #ddd); border-radius: 3px; margin-top: -3px; } .scrubber .thumb { position: absolute; top: 50%; left: 0; width: 40px; height: 30px; margin-left: -20px; margin-top: -15px; cursor: pointer; } .scrubber .thumb .background { width: 24px; height: 24px; margin-left: -12px; margin-top: -12px; border-radius: 13px; position: absolute; top: 50%; left: 50%; background: var(--scrubber-thumb-background-background, rgba(50,120,200,0.35)); } .scrubber .thumb .center { width: 24px; height: 24px; margin-left: -12px; margin-top: -12px; border-radius: 13px; position: absolute; top: 50%; left: 50%; background: var(--scrubber-thumb-center-background, #3278c8); -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; -o-transition: -o-transform 0.2s; -ms-transition: -ms-transform 0.2s; transition: transform 0.2s; -webkit-transform: var(--scrubber-thumb-center-scale, scale(0.25, 0.25)); -moz-transform: var(--scrubber-thumb-center-scale, scale(0.25, 0.25)); -o-transform: var(--scrubber-thumb-center-scale, scale(0.25, 0.25)); -ms-transform: var(--scrubber-thumb-center-scale, scale(0.25, 0.25)); transform: var(--scrubber-thumb-center-scale, scale(0.25, 0.25)); } .scrubber .thumb.dcg-hovered .center, .scrubber .thumb.dcg-depressed .center { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } /* src/js/shared/dcgviews/activity-main-action.styl */ .activity-main-action { color: #999; font-size: 90%; padding: 10px; cursor: pointer; border-radius: 5px; } .activity-main-action:not(.selected) { background: #fff; border: 1px solid #bbb; } /* src/js/shared/dcgviews/beta-tag.styl */ .beta-tag { font-size: 70%; text-transform: uppercase; padding: 2px 4px; background: rgba(0,0,0,0.2); border-radius: 4px; margin-left: 5px; cursor: default; } /* src/js/shared/dcgviews/calculator-tool.styl */ .calculator-tool { position: absolute; top: 44px; bottom: 0; left: 0; right: 0; } /* src/js/shared/dcgviews/calculator.styl */ .calculator canvas.shared-calculator-background { position: absolute; top: 0; left: 0; } /* src/js/shared/dcgviews/checkbox.styl */ .amplify-checkbox { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .amplify-checkbox > label { width: 100%; } .amplify-checkbox > label > span { width: calc(100% - 2em); } .amplify-checkbox > label .faux-input { min-width: 1.25em; } /* src/js/shared/dcgviews/classcode-modal.styl */ .classcode-modal .code { overflow-y: hidden; } .classcode-modal .modal-contents-wrapper { position: relative; } .classcode-modal:not(.centered-modal).modal-transition-container { position: absolute; top: 10px; left: 100px; bottom: 10px; right: 100px; } .classcode-modal.animating-out-top-left { -webkit-transition: opacity 100ms; -moz-transition: opacity 100ms; -o-transition: opacity 100ms; -ms-transition: opacity 100ms; transition: opacity 100ms; -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; -o-transition-delay: 200ms; -ms-transition-delay: 200ms; transition-delay: 200ms; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .classcode-modal.animating-out-top-left .modal-transition-container { -webkit-transition: -webkit-transform 250ms ease-in; -moz-transition: -moz-transform 250ms ease-in; -o-transition: -o-transform 250ms ease-in; -ms-transition: -ms-transform 250ms ease-in; transition: transform 250ms ease-in; -webkit-transform: translate3d(-50%, -50%, 0) scale(0, 0); -moz-transform: translate3d(-50%, -50%, 0) scale(0, 0); -o-transform: translate3d(-50%, -50%, 0) scale(0, 0); -ms-transform: translate3d(-50%, -50%, 0) scale(0, 0); transform: translate3d(-50%, -50%, 0) scale(0, 0); } .classcode-modal.animating-out-top-left .modal-transition-container .modal-container { -webkit-transition: -webkit-transform 250ms ease-in; -moz-transition: -moz-transform 250ms ease-in; -o-transition: -o-transform 250ms ease-in; -ms-transition: -ms-transform 250ms ease-in; transition: transform 250ms ease-in; } .classcode-modal.animating-out-left { -webkit-transition: opacity 100ms; -moz-transition: opacity 100ms; -o-transition: opacity 100ms; -ms-transition: opacity 100ms; transition: opacity 100ms; -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; -o-transition-delay: 200ms; -ms-transition-delay: 200ms; transition-delay: 200ms; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .classcode-modal.animating-out-left .modal-transition-container { -webkit-transition: -webkit-transform 250ms ease-in; -moz-transition: -moz-transform 250ms ease-in; -o-transition: -o-transform 250ms ease-in; -ms-transition: -ms-transform 250ms ease-in; transition: transform 250ms ease-in; -webkit-transform: translate3d(-50%, 0, 0) scale(0, 0); -moz-transform: translate3d(-50%, 0, 0) scale(0, 0); -o-transform: translate3d(-50%, 0, 0) scale(0, 0); -ms-transform: translate3d(-50%, 0, 0) scale(0, 0); transform: translate3d(-50%, 0, 0) scale(0, 0); } .classcode-modal.animating-out-left .modal-transition-container .modal-container { -webkit-transition: -webkit-transform 250ms ease-in; -moz-transition: -moz-transform 250ms ease-in; -o-transition: -o-transform 250ms ease-in; -ms-transition: -ms-transform 250ms ease-in; transition: transform 250ms ease-in; } .classcode-modal:not(.animating-out-top-left):not(.animating-out-left):not(.centered-modal) .modal-container { z-index: 2; } .classcode-modal:not(.animating-out-top-left):not(.animating-out-left):not(.centered-modal) .dc-modal-background { z-index: 1; } .classcode-modal-contents { padding: 20px; text-align: center; } .classcode-modal-contents .inactive-header { position: relative; font-size: 200%; text-align: left; padding: 10px 30px; } .classcode-modal-contents .inactive-message { text-align: left; padding: 10px 30px; font-size: 110%; color: #666; } .classcode-modal-contents .classcode-step { margin: 0 auto; } .classcode-modal-contents .classcode-step .h3 { margin-top: 0; } .classcode-modal-contents .classcode-step .student-intro { position: relative; margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1) 0; } .classcode-modal-contents .classcode-step .student-code-link { width: 100%; } .classcode-modal-contents .classcode-container { color: #3b3b3b; border: 1px solid #000; border-radius: 0.1875em; padding: 5px 25px; margin: 20px 0 0 10px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; font-size: 250%; display: inline-block; font-weight: 700; line-height: 1.5em; } .classcode-modal-contents .classcode-container .code-part.second-half { padding-left: 0.5em; } .classcode-modal-contents .small-student-link { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1.85) 0; width: 100%; text-align: center; } .classcode-modal-contents .small-student-link .share-link-text { color: #3b3b3b; margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1); } .classcode-modal-contents .small-student-link .share-link-input { height: 58px; } .classcode-modal-contents .small-student-link .share-link-subtext { color: #3b3b3b; margin-top: 10px; } .classcode-modal-contents .dcg-selectable-input-container { max-width: 400px; margin: auto; } .classcode-modal-contents .invite-code-details { text-align: left; color: #333; } .classcode-modal-contents .invite-code-details .dividing-line { height: 1px; background: #bdbdbd; position: absolute; left: 0; right: 0; } .classcode-modal-contents .invite-code-details .invite-code-section-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin: 0 -17.5px -35px; } .classcode-modal-contents .invite-code-details .invite-code-details-section { -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; line-height: 1.3em; padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1.7) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1.7) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1.7); } .classcode-modal-contents .invite-code-details .invite-code-details-section>div:first-child { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .classcode-modal-contents .invite-code-details .invite-code-details-section .invite-code-details-section-wrapper { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; color: #3b3b3b; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .classcode-modal-contents .invite-code-details .invite-code-details-section .invite-code-section-header { color: #3b3b3b; margin-bottom: 5px; } .classcode-modal-contents .invite-code-details .invite-code-details-section .invite-code-section-content { font-size: 95%; white-space: nowrap; } .classcode-modal-contents .invite-code-details .invite-code-details-section .expiration-date { font-weight: 700; white-space: nowrap; } .classcode-modal-contents .invite-code-details .invite-code-details-section .btn-description-text { font-size: 80%; } .classcode-modal-contents .invite-code-details .invite-code-details-section:last-child { padding-top: 0; padding-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3.7); } .classcode-modal-contents .extend-code-link { white-space: nowrap; } .extend-classcode-modal .extend-classcode-contents, .classcode-modal .extend-classcode-contents { padding: 20px; } .extend-classcode-modal h1.extend-code-title, .classcode-modal h1.extend-code-title { position: relative; font-size: 200%; text-align: left; padding: 10px 20px 0 20px; margin-top: 0; } .extend-classcode-modal h1.extend-code-title .invite-code, .classcode-modal h1.extend-code-title .invite-code { text-transform: uppercase; } .extend-classcode-modal .extend-code-body, .classcode-modal .extend-code-body { text-align: left; padding: 10px 20px 0px 20px; color: #333; } .extend-classcode-modal .extend-code-body .extend-code-body-content, .classcode-modal .extend-code-body .extend-code-body-content { padding-top: 10px; margin: 0px; } .extend-classcode-modal .extend-code-body .extend-code-body-content li, .classcode-modal .extend-code-body .extend-code-body-content li { padding-top: 5px; padding-bottom: 5px; } .extend-classcode-modal .extend-code-form, .classcode-modal .extend-code-form { text-align: left; padding: 20px; } .extend-classcode-modal .extend-code-form .dividing-line, .classcode-modal .extend-code-form .dividing-line { height: 1px; background: #bdbdbd; } .extend-classcode-modal .extend-code-form .extend-code-header, .classcode-modal .extend-code-form .extend-code-header { font-size: 130%; margin-bottom: 10px; padding-top: 35px; } .extend-classcode-modal .extend-code-form .submit-buttons, .classcode-modal .extend-code-form .submit-buttons { margin-top: 10px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -moz-box-align: end; -o-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .extend-classcode-modal .extend-code-form .submit-buttons .submit-button, .classcode-modal .extend-code-form .submit-buttons .submit-button { margin-left: 10px; } .extend-classcode-modal .extend-code-form .submit-buttons .save-notice, .classcode-modal .extend-code-form .submit-buttons .save-notice { margin-bottom: 10px; min-height: 24px; color: #3b3b3b; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1); -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; -ms-transition: opacity 0.3s; transition: opacity 0.3s; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 95%; } .extend-classcode-modal .extend-code-form .submit-buttons .save-notice.success, .classcode-modal .extend-code-form .submit-buttons .save-notice.success { background-color: #b3dbd3; } .extend-classcode-modal .extend-code-form .submit-buttons .save-notice.success .icon-container, .classcode-modal .extend-code-form .submit-buttons .save-notice.success .icon-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .extend-classcode-modal .extend-code-form .submit-buttons .save-notice .icon-v2-messaging-success, .classcode-modal .extend-code-form .submit-buttons .save-notice .icon-v2-messaging-success { margin-right: 5px; } .extend-classcode-modal .extend-code-form .submit-buttons .save-notice.hidden, .classcode-modal .extend-code-form .submit-buttons .save-notice.hidden { pointer-events: none; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .extend-classcode-modal .extend-code-form .submit-buttons .save-notice .icon-container, .classcode-modal .extend-code-form .submit-buttons .save-notice .icon-container { width: 25px; float: left; line-height: 1.2em; } .extend-classcode-modal .extend-code-form .submit-buttons .save-notice .icon-v2-messaging-success, .classcode-modal .extend-code-form .submit-buttons .save-notice .icon-v2-messaging-success, .extend-classcode-modal .extend-code-form .submit-buttons .save-notice .icon-v2--messaging-warning, .classcode-modal .extend-code-form .submit-buttons .save-notice .icon-v2--messaging-warning { margin-right: 5px; } .extend-classcode-modal .extend-code-form .submit-buttons .save-notice .pillow-spinner, .classcode-modal .extend-code-form .submit-buttons .save-notice .pillow-spinner { position: relative; top: -1px; } .date-input.form-control { height: 2.2em; } .student-greeting .classcode-modal-contents .classcode-step.h1 { font-size: 200%; margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.7); } @media screen and (max-width: 850px) { .modal-cover:not(.close-btn-style-floating).classcode-modal .modal-transition-container .modal-container { left: 0; right: 0; } } @media screen and (max-width: 775px) { .classcode-modal-contents.code { padding: 0 20px; } .invite-code-details { display: none; } } @media screen and (max-width: 600px) { .classcode-modal .modal-transition-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .modal-cover.classcode-modal.animating-out-top-left { -webkit-transition: opacity 100ms; -moz-transition: opacity 100ms; -o-transition: opacity 100ms; -ms-transition: opacity 100ms; transition: opacity 100ms; -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; -o-transition-delay: 200ms; -ms-transition-delay: 200ms; transition-delay: 200ms; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .modal-cover.classcode-modal.animating-out-top-left .modal-transition-container { -webkit-transition: -webkit-transform 250ms ease-in; -moz-transition: -moz-transform 250ms ease-in; -o-transition: -o-transform 250ms ease-in; -ms-transition: -ms-transform 250ms ease-in; transition: transform 250ms ease-in; -webkit-transform: translate3d(0, -50%, 0) scale(0, 0); -moz-transform: translate3d(0, -50%, 0) scale(0, 0); -o-transform: translate3d(0, -50%, 0) scale(0, 0); -ms-transform: translate3d(0, -50%, 0) scale(0, 0); transform: translate3d(0, -50%, 0) scale(0, 0); } .modal-cover.classcode-modal.animating-out-top-left .modal-transition-container .modal-container { -webkit-transition: -webkit-transform 250ms ease-in; -moz-transition: -moz-transform 250ms ease-in; -o-transition: -o-transform 250ms ease-in; -ms-transition: -ms-transform 250ms ease-in; transition: transform 250ms ease-in; } .modal-cover.classcode-modal .classcode-modal-contents .classcode-step { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); } } @media screen and (max-width: 500px) { .classcode-modal-contents { padding: 20px 0; } } /* src/js/shared/dcgviews/collapsable-content.styl */ .collapsable-content-container { max-width: fit-content; } .collapsable-content-container .toggle-title-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; color: #666; } .collapsable-content-container .toggle-title-container .caret-toggle { display: inline-block; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } .collapsable-content-container .toggle-title-container .caret-toggle i { position: relative; left: 4px; margin-right: 10px; font-size: 90%; } .collapsable-content-container .toggle-title-container .caret-toggle.is-open { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .collapsable-content-container .toggle-title-container .icon-title-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .collapsable-content-container .toggle-title-container .icon-title-container .icon { margin-right: 5px; } /* src/js/shared/dcgviews/d3/bar-chart.styl */ .bar-chart-wrapper .d3-chart-container { overflow: hidden; } .bar-chart-wrapper .bar-chart-container { border-radius: 5px; border: 1px solid #bdbdbd; } .bar-chart-wrapper .bar-chart-container .x-axis-area .domain, .bar-chart-wrapper .bar-chart-container .y-axis-area .domain { display: none; } .bar-chart-wrapper .bar-chart-container .chart-area .grid-line { fill: none; stroke: #bdbdbd; stroke-width: 1px; } @media screen and (max-width: 1100px) { .bar-chart-wrapper .bar-chart-container .x-axis text { -webkit-transform: rotate(-30deg) translate(-15px, -5px); -moz-transform: rotate(-30deg) translate(-15px, -5px); -o-transform: rotate(-30deg) translate(-15px, -5px); -ms-transform: rotate(-30deg) translate(-15px, -5px); transform: rotate(-30deg) translate(-15px, -5px); } } /* src/js/shared/dcgviews/d3/bubble-chart.styl */ .bubble-chart-wrapper { width: 100%; } .bubble-chart-wrapper .d3-chart-container { width: 100%; overflow: hidden; } .bubble-chart-wrapper .d3-chart-container svg .grid-line { stroke: #666; stroke-opacity: 0.8; stroke-width: 1; } .bubble-chart-wrapper .d3-chart-container svg .chart-border { stroke: #bdbdbd; stroke-width: 1; stroke-opacity: 0.8; } .bubble-chart-wrapper .d3-chart-container svg .horizontal-band { fill: #fff; } .bubble-chart-wrapper .d3-chart-container svg .horizontal-band:nth-child(2n) { fill: rgba(0,0,0,0.03); } .bubble-chart-wrapper .d3-chart-container svg .row-label-area .y-label { color: #fff; } /* src/js/shared/dcgviews/d3/offscreen-table.styl */ .offscreen-accessible-table { position: absolute; left: -1000px; top: 0; width: 1px; height: 1px; overflow: hidden; } /* src/js/shared/dcgviews/divided-btn.styl */ .divided-btn { color: #fff; -webkit-transition: 0.2s opacity; -moz-transition: 0.2s opacity; -o-transition: 0.2s opacity; -ms-transition: 0.2s opacity; transition: 0.2s opacity; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; line-height: 40px; margin-right: 5px; } .divided-btn .divided-btn-main-link { padding: 7px; display: block; color: #666; text-decoration: none; white-space: nowrap; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .divided-btn .divided-btn-main-link .btn-text { -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } .divided-btn .divided-btn-main-link .back-arrow-container { -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; width: 0; } .divided-btn .divided-btn-main-link .back-arrow-container i { font-size: 90%; } .divided-btn .divided-btn-main-link.back-arrow-hover .back-arrow-container { display: inline-block; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .divided-btn .divided-btn-main-link.dcg-hovered .btn-text, .divided-btn .divided-btn-main-link.dcg-depressed .btn-text { -webkit-transform: translateX(4px); -moz-transform: translateX(4px); -o-transform: translateX(4px); -ms-transform: translateX(4px); transform: translateX(4px); } .divided-btn .divided-btn-main-link.dcg-hovered .back-arrow-container, .divided-btn .divided-btn-main-link.dcg-depressed .back-arrow-container { opacity: 1; -ms-filter: none; filter: none; width: 15px; -webkit-transform: translateX(-4px); -moz-transform: translateX(-4px); -o-transform: translateX(-4px); -ms-transform: translateX(-4px); transform: translateX(-4px); } .divided-btn.has-border .divided-btn-segment, .divided-btn.has-border .divided-btn-dropdown-arrow { background: #9c0d63; color: #fff; line-height: 40px; } .divided-btn.has-border .divided-btn-segment.dcg-hovered:not(.disabled), .divided-btn.has-border .divided-btn-dropdown-arrow.dcg-hovered:not(.disabled) { background: #5e083b; -webkit-transition: background 0.2s; -moz-transition: background 0.2s; -o-transition: background 0.2s; -ms-transition: background 0.2s; transition: background 0.2s; } .divided-btn.has-border .divided-btn-segment.dcg-depressed:not(.disabled), .divided-btn.has-border .divided-btn-dropdown-arrow.dcg-depressed:not(.disabled) { background: #5e083b; } .divided-btn.has-border .divided-btn-dropdown-arrow { border-left: 1px solid rgba(0,0,0,0.2); } .divided-btn:not(.has-border) .dropdown-container:after { content: ""; position: absolute; top: -9px; right: 8px; border-width: 9px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .divided-btn:not(.has-border) .dropdown-container:before { content: ""; position: absolute; top: -10px; right: 7px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .divided-btn:not(.has-border) .divided-btn-segment, .divided-btn:not(.has-border) .divided-btn-dropdown-arrow { background: #49c5b1; } .divided-btn:not(.has-border) .divided-btn-segment.dcg-hovered:not(.disabled), .divided-btn:not(.has-border) .divided-btn-dropdown-arrow.dcg-hovered:not(.disabled) { background: #15b097; } .divided-btn:not(.has-border) .divided-btn-segment.dcg-depressed:not(.disabled), .divided-btn:not(.has-border) .divided-btn-dropdown-arrow.dcg-depressed:not(.disabled) { background: #15b097; -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.3) inset; box-shadow: 0 0 2px rgba(0,0,0,0.3) inset; } .divided-btn:not(.has-border) .divided-btn-segment { border-right: 1px solid rgba(255,255,255,0.5); } .divided-btn .divided-btn-segment { padding: 0 20px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .divided-btn .divided-btn-segment.disabled { cursor: default; opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); } .divided-btn .divided-btn-dropdown-arrow.disabled { cursor: default; opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); } .divided-btn .divided-btn-dropdown-arrow { padding: 0 12px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; font-size: 80%; } .divided-btn .divided-btn-dropdown-arrow i { position: relative; top: 5px; } .divided-btn .dcg-shared-options-dropdown { min-width: 160px; line-height: initial; text-align: left; } .divided-btn .divided-btn-icon { margin-right: 5px; } .divided-btn .divided-btn-icon i { font-size: 1em !important; } /* src/js/shared/dcgviews/draggable.styl */ .draggable-container { position: relative; } .draggable-container > span { position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding-left: 6px; } .draggable-container > span .draggable-item.narrow-card { width: 100%; } body.item-is-being-dragged { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -moz-user-select: -moz-none; } /* src/js/shared/dcgviews/dropdown/dot-dot-options-dropdown.styl */ .dot-dot-dropdown-container { margin-top: 0.5px; font-size: 1rem; } .dot-dot-dropdown-container .dot-dot-dropdown-anchor i { color: #676767; } .dot-dot-dropdown-container .anchor-container { border-radius: 50%; } .dot-dot-dropdown-container .anchor-container:focus-visible { outline-offset: -3px; } .dot-dot-dropdown-container .dot-dot-dropdown-anchor { line-height: 40px; } .dot-dot-dropdown-container .dot-dot-dropdown-anchor .dot-dot-container.dсg-active { background-color: rgba(0,0,0,0.05); } .dot-dot-dropdown-container .anchor-container.dcg-hovered .dot-dot-dropdown-anchor .dot-dot-container span { background: rgba(0,0,0,0.5); } .dot-dot-dropdown-container .anchor-container.isOpen .dot-dot-dropdown-anchor .dot-dot-container span, .dot-dot-dropdown-container .anchor-container.dcg-depressed .dot-dot-dropdown-anchor .dot-dot-container span { background: rgba(0,0,0,0.8); } /* src/js/shared/dcgviews/dropdown/dropdown-anchor-caret.styl */ .dropdown-anchor-caret { display: inline-block; -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; -o-transition: -o-transform 0.2s ease-in-out; -ms-transition: -ms-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; } .dropdown-anchor-caret.open { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .dcg-shared-dropdown-popover-container .anchor-container.isOpen .dropdown-anchor-caret { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } /* src/js/shared/dcgviews/dropdown/multiselect-checkbox-dropdown.styl */ .multiselect-checkbox-dropdown-container { margin-bottom: 20px; } .multiselect-checkbox-dropdown-container .selected-option { display: inline-block; margin-left: 10px; background-color: #e2e2e2; color: #666; padding: 0 10px; border-radius: 5px; line-height: 35px; height: 35px; } .multiselect-checkbox-dropdown-container .selected-option .icon-v2-close { font-size: 80%; margin-left: 10px; color: #676767; } .multiselect-checkbox-dropdown-container .selected-option .icon-v2-close.dcg-hovered { color: #3b3b3b; } .multiselect-checkbox-dropdown .multiselect-checkbox-dropdown-anchor { padding: 0 10px; line-height: 40px; min-height: 40px; border: 1px solid #bbb; border-radius: 0.1875em; width: 250px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .multiselect-checkbox-dropdown .multiselect-checkbox-dropdown-anchor.disabled { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); cursor: default; } .multiselect-checkbox-dropdown .multiselect-checkbox-dropdown-anchor .multiselect-selected-values { max-width: 250px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .multiselect-checkbox-dropdown .multiselect-checkbox-dropdown-anchor .multiselect-selected-values .multiselect-selected-value { margin-right: 10px; } .multiselect-checkbox-dropdown .multiselect-checkbox-dropdown-anchor .multiselect-selected-values .multiselect-selected-value:not(:last-of-type):after { content: ","; } .multiselect-checkbox-dropdown .multiselect-checkbox-dropdown-anchor .icon-v2-caret-down, .multiselect-checkbox-dropdown .multiselect-checkbox-dropdown-anchor .icon-v2-caret-up, .multiselect-checkbox-dropdown .multiselect-checkbox-dropdown-anchor .icon-v2-close { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0; -ms-flex: 0 0; flex: 0 0; line-height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); float: right; } .multiselect-checkbox-dropdown .multiselect-checkbox-dropdown-anchor .icon-v2-caret-down { color: #3b3b3b; } .multiselect-checkbox-dropdown .multiselect-checkbox-dropdown-anchor .dropdown-value { color: #676767; } .multiselect-checkbox-dropdown .multiselect-checkbox-dropdown-anchor.dcg-hovered:not(.disabled) { border: 1px solid #bdbdbd; } .multiselect-checkbox-dropdown .multiselect-checkbox-dropdown-anchor.dcg-hovered:not(.disabled) .icon-v2-caret-down { color: #3b3b3b; } .multiselect-checkbox-dropdown .multiselect-checkbox-dropdown-anchor.dcg-depressed:not(.disabled) { border: 1px solid #bdbdbd; } .multiselect-checkbox-dropdown .multiselect-checkbox-dropdown-anchor.dcg-depressed:not(.disabled) .icon-v2-caret-small-down { color: #3b3b3b; } .multiselect-checkbox-dropdown .filter-dropdown-options { color: #666; padding: 10px; overflow: auto; } .multiselect-checkbox-dropdown .filter-dropdown-options .filter-dropdown-option { padding: 7px; line-height: 20px; } .multiselect-checkbox-dropdown .dropdown-container { width: 250px; } .multiselect-checkbox-dropdown .dropdown-container .dropdown-choice.no-choice { color: #676767; } /* src/js/shared/dcgviews/dropdown/select-dropdown.styl */ .select-dropdown { width: 100%; } .select-dropdown .anchor-container .select-dropdown-anchor { padding: 0 10px; line-height: 45px; height: 45px; border: 1px solid #bdbdbd; border-radius: 5px; width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .select-dropdown .anchor-container .select-dropdown-anchor .icon-v2-caret-down { float: right; } .select-dropdown .anchor-container .select-dropdown-anchor .dropdown-value { color: #3b3b3b; width: 100%; } .select-dropdown .anchor-container .select-dropdown-anchor .dropdown-value.placeholder { color: #999; font-style: italic; } .select-dropdown .anchor-container.dcg-hovered .select-dropdown-anchor:not(.disabled) { border: 1px solid #999; } .select-dropdown .anchor-container.dcg-hovered .select-dropdown-anchor:not(.disabled) i { color: #999; } .select-dropdown .anchor-container.dcg-depressed .select-dropdown-anchor:not(.disabled) { border: 1px solid #666; } .select-dropdown .anchor-container.dcg-depressed .select-dropdown-anchor:not(.disabled) i { color: #666; } .select-dropdown .dropdown-container { width: 200px; } .select-dropdown .select-dropdown-anchor.disabled { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); cursor: default; } .select-dropdown.dcg-shared-options-dropdown:after { content: ""; position: absolute; top: 0; left: 0; border-width: 0; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .select-dropdown.dcg-shared-options-dropdown:before { content: ""; position: absolute; top: -1px; left: -1px; border-width: 1px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .dropdown-choice.no-choice { color: #3b3b3b; font-style: italic; } /* src/js/shared/dcgviews/email-input-table.styl */ .email-input-table-container .classroom-shared-table { margin-bottom: 10px; } .email-input-table-container .classroom-shared-table .classroom-shared-table-row { border-bottom: none; padding: 5px 0; } .email-input-table-container .classroom-shared-table .header-row { padding: 0; } .email-input-table-container .classroom-shared-table input { height: 40px; padding: 5px 10px; line-height: 40px; color: #666; width: 100%; font-size: 100%; margin-bottom: 1px; } .email-input-table-container .classroom-shared-table input::-webkit-input-placeholder { color: #999; } .email-input-table-container .classroom-shared-table input:-moz-placeholder { color: #999; } .email-input-table-container .classroom-shared-table input::-moz-placeholder { color: #999; } .email-input-table-container .classroom-shared-table input:-ms-input-placeholder { color: #999; } .email-input-table-container .classroom-shared-table-cell + .classroom-shared-table-cell { padding-left: 5px; } .email-input-table-container .table-column-email .email-input-container { position: relative; } .email-input-table-container .table-column-email .email-input-container .dcg-tooltip-hit-area-container { position: absolute; top: 0; right: 8px; height: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .email-input-table-container .table-column-email .email-input-container input.invalid-email:not(:focus) { border: 1px solid #db2e00; } .email-input-table-container .add-link { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .email-input-table-container .add-link i { font-size: 1em; margin-right: 5px; } .email-input-table-container .add-link.dcg-hovered a { text-decoration: none; } .email-input-table-container :not(.add-colleagues-container) .add-link { margin-bottom: 60px; } .email-input-table-container .add-colleagues-container .add-link { margin-bottom: 0; } /* src/js/shared/dcgviews/error-message.styl */ .page-error-message { width: 600px; margin: 50px auto 0; position: relative; text-align: center; } .page-error-message img { width: 600px; position: relative; margin-bottom: 60px; } .page-error-message h1, .page-error-message h3 { font-weight: normal; } .page-error-message h1 { position: absolute; top: 123px; left: 240px; font-size: 90px; } .page-error-message h3 { font-size: 180%; margin: 0; } .page-error-message p { font-size: 120%; } /* src/js/shared/dcgviews/faded-scroll-container.styl */ .faded-scroll-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; position: relative; overflow: hidden; } .faded-scroll-container .top-gradient, .faded-scroll-container .bottom-gradient { position: absolute; pointer-events: none; } .faded-scroll-container .top-gradient { top: 0; background: -webkit-linear-gradient(#fff, rgba(255,255,255,0)); background: -moz-linear-gradient(#fff, rgba(255,255,255,0)); background: -o-linear-gradient(#fff, rgba(255,255,255,0)); background: -ms-linear-gradient(#fff, rgba(255,255,255,0)); background: linear-gradient(#fff, rgba(255,255,255,0)); } .faded-scroll-container .bottom-gradient { bottom: 0; background: -webkit-linear-gradient(rgba(255,255,255,0), #fff); background: -moz-linear-gradient(rgba(255,255,255,0), #fff); background: -o-linear-gradient(rgba(255,255,255,0), #fff); background: -ms-linear-gradient(rgba(255,255,255,0), #fff); background: linear-gradient(rgba(255,255,255,0), #fff); } /* src/js/shared/dcgviews/file-drop-box.styl */ .file-drop-box { border-radius: 4px; background-size: fill; text-align: center; position: relative; overflow: hidden; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; border: 1px solid #bbb; } .file-drop-box .dropbox { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-position: center center; background-repeat: no-repeat; } .file-drop-box .drop-file-text { font-size: 18px; max-width: 80%; pointer-events: none; } .file-drop-box .drop-file-text .dropbox-status-message { color: #999; text-shadow: calc(1px * -1) calc(1px * -1) 0 #fff, calc(1px * -1) 1px 0 #fff, 1px calc(1px * -1) 0 #fff, 1px 1px 0 #fff, 0 calc(1px * -1) 0 #fff, 0 1px 0 #fff, 1px 0 0 #fff, calc(1px * -1) 0 0 #fff; z-index: 1; position: relative; } .file-drop-box .drop-file-text .error { color: #db2e00; } .file-drop-box:not(.has-file) { cursor: pointer; } .file-drop-box.dcg-hovered:not(.has-file) { border: 1px solid #9c0d63; -webkit-box-shadow: 0 0 0 1px #9c0d63; box-shadow: 0 0 0 1px #9c0d63; } .file-drop-box.dcg-hovered:not(.has-file) .drop-file-message { color: #9c0d63; } .file-drop-box.dcg-depressed:not(.dragover):not(.has-file) .dropbox { border-color: #5e083b; } .file-drop-box.dcg-depressed:not(.dragover):not(.has-file) .drop-file-message { color: #5e083b; } .file-drop-box.dragover { border: 1px solid #9c0d63; -webkit-box-shadow: 0 0 0 1px #9c0d63; box-shadow: 0 0 0 1px #9c0d63; } .file-drop-box.dragover .drop-file-message { color: #9c0d63; } .file-drop-box input[type="file"] { display: none; } .file-dropbox-container { position: relative; } .file-dropbox-container .diff-dot { position: absolute; width: 12px; height: 12px; top: -5px; left: -5px; z-index: 0; } .file-dropbox-container .delete-file { font-size: 13px; position: absolute; top: 0; right: 0; width: 36px; height: 36px; line-height: 36px; font-size: 20px; text-align: center; z-index: 2; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; color: #bbb; cursor: pointer; text-shadow: calc(1px * -1) calc(1px * -1) 0 #fff, calc(1px * -1) 1px 0 #fff, 1px calc(1px * -1) 0 #fff, 1px 1px 0 #fff, 0 calc(1px * -1) 0 #fff, 0 1px 0 #fff, 1px 0 0 #fff, calc(1px * -1) 0 0 #fff; } .file-dropbox-container .delete-file.dcg-hovered { color: #db2e00; } .file-dropbox-container .delete-file.dcg-depressed { color: #831c00; } .file-dropbox-container .dcg-file-edit { cursor: pointer; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /* src/js/shared/dcgviews/fixed-aspect-container.styl */ .fixed-aspect-parent { width: 100%; height: 100%; } .fixed-aspect-parent .fixed-aspect-container { position: relative; margin: 0 auto auto; } .fixed-aspect-parent.vertically-center-contents { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .fixed-aspect-parent.vertically-center-contents .fixed-aspect-container { margin: auto; } /* src/js/shared/dcgviews/header-back-arrow.styl */ .header-back-arrow { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; white-space: nowrap; max-width: 100%; } .header-back-arrow .back-action { margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); color: #fff; } .header-back-arrow .back-action:hover, .header-back-arrow .back-action:focus-visible { color: #fff; } /* src/js/shared/dcgviews/header.styl */ .teacher-page-top-bar { background: rgba(255,255,255,0.95); min-height: 53px; position: absolute; left: 0; right: 0; border-bottom: 1px solid rgba(0,0,0,0.04); } .teacher-page-top-bar.show-notice { top: 30px; margin-top: -83px; } .teacher-page-top-bar:not(.show-notice) { top: 0; margin-top: -53px; } .teacher-page-top-bar.admin-dashboard-header { top: 0; margin-top: 0; } .teacher-page-top-bar.fixed { position: fixed; top: 0; margin-top: 0; -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.35); box-shadow: 0 0 7px rgba(0,0,0,0.35); border-bottom: 0; z-index: 11; } .teacher-page-top-bar.smallscreen { position: relative; margin-top: 0; } .teacher-page-top-bar.is-impersonating { border: 5px solid #db2e00; } .teacher-page-top-bar .impersonating-warning { color: #db2e00; font-weight: bold; } .teacher-page-top-bar .teacher-page-top-bar-interior { -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: relative; padding: 0 20px 0 20px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; line-height: 53px; } .teacher-page-top-bar .sidebar-menu-button { margin: 6.5px 5px 6.5px -5px; text-decoration: none; opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); overflow: hidden; float: left; } .teacher-page-top-bar .sidebar-menu-button i { color: #676767; margin: 0 !important; } .teacher-page-top-bar .logo-link { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); float: left; margin-right: 10px; line-height: 53px; width: 200px; } .teacher-page-top-bar .logo-link .desmos-svg-logo { width: 100%; height: 30px; color: #000; margin-bottom: 5px; } .teacher-page-top-bar .logo-link.dcg-hovered { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); } .teacher-page-top-bar .logo-link.dcg-depressed { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); } .teacher-page-top-bar .teacher-header-right-content { margin-left: auto; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 100%; color: #676767; } .teacher-page-top-bar .teacher-header-right-content .accounts-container { clear: none; text-align: left; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .teacher-page-top-bar .teacher-header-right-content .accounts-container .account-header-view { position: relative; } .teacher-page-top-bar .teacher-header-right-content .accounts-container .login-buttons { display: inline-block; } .teacher-page-top-bar .teacher-header-right-content .accounts-container .login-buttons, .teacher-page-top-bar .teacher-header-right-content .accounts-container .user-name-dropdown { color: #676767; } .teacher-page-top-bar .teacher-header-right-content .accounts-container .create-account-btn, .teacher-page-top-bar .teacher-header-right-content .accounts-container .log-in-btn { font-size: 100%; } .teacher-page-top-bar .teacher-header-right-content .accounts-container .divider-text { margin: 0 10px; } .teacher-page-top-bar .teacher-header-right-content .language-picker .anchor-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .teacher-page-top-bar .teacher-header-right-content .language-picker .dropdown-container { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } @media screen and (max-width: 1180px) { .teacher-page-top-bar .teacher-header-right-content .mathtools-dropdown-container, .teacher-page-top-bar .teacher-header-right-content .resources-dropdown-container { display: none; } } @media screen and (max-width: 800px) { .teacher-page-top-bar .hide-when-narrow, .teacher-page-top-bar .accounts-container .create-account-btn.dcg-shared-btn-gray-outline { display: none; } } @media screen and (max-width: 680px) { .teacher-page-top-bar .top-bar-search-box-container { clear: both; width: 100%; padding-top: 0; position: relative; left: 0; } .teacher-page-top-bar .teacher-page-top-bar-interior { display: block; padding: 0 20px 10px; } .teacher-page-top-bar .teacher-page-top-bar-interior .teacher-header-right-content { position: absolute; top: 0; right: 10px; height: 50px; } } @media screen and (max-width: 460px) { .teacher-page-top-bar .logo-link { width: 160px; } } @media screen and (max-width: 430px) { .teacher-page-top-bar .sidebar-menu-button { font-size: 90%; padding-right: 10px; } .teacher-page-top-bar .user-name-dropdown .user-name-link { max-width: 85px; } } @media screen and (max-width: 380px) { .form-submit-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .teacher-page-top-bar .teacher-header-right-content .accounts-container .login-buttons { padding-right: 0px; } .teacher-page-top-bar .logo-link { display: none; } .teacher-page-top-bar .top-bar-search-box-container { width: 65%; margin-right: auto; margin-top: 10px; } } .amp-styles .btn-ghost .user-name-link { font-weight: 400; } /* src/js/shared/dcgviews/image-lightbox.styl */ .image-lightbox-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 100000; background: var(--image-lightbox-container-background, rgba(0,0,0,0.6)); -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; cursor: default !important; overflow: hidden; } .image-lightbox-container .clickable-background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .image-lightbox-container .image-centering-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; padding: var(--image-centering-container-padding, 40px 80px); } .image-lightbox-container .image-centering-container img { width: 100%; border-radius: var(--border-radius, 5px); border: var(--border-component, --image-modal-image-border); background: #fff; } .image-lightbox-container #fullscreen-close-btn { position: absolute; right: 10px; top: 10px; line-height: inherit; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } @media screen and (max-width: 680px) { .image-lightbox-container .image-centering-container { padding: 40px 5px; } } /* src/js/shared/dcgviews/instance-list.styl */ .activity-instance-list .activity-instance-list-title { background: #eee; border-radius: 2px; text-align: center; padding: 5px; color: #bdbdbd; text-transform: uppercase; } .activity-instance-list .view-all-container { text-align: center; color: #3278c8; margin-top: 0; } .activity-instance-list .view-all-container .view-all { cursor: pointer; padding: 10px; display: inline-block; } .activity-instance-list .instance-list-row { position: relative; color: #3b3b3b; } .activity-instance-list .activity-instance-row { border-bottom: 1px solid #bdbdbd; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; width: 100%; } .activity-instance-list .activity-instance-row .dcg-tooltip-hit-area-container { -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; } .activity-instance-list .activity-instance-row .session-cell, .activity-instance-list .activity-instance-row .student-count, .activity-instance-list .activity-instance-row .date-container, .activity-instance-list .activity-instance-row .dashboard-link, .activity-instance-list .activity-instance-row .assignment-loading, .activity-instance-list .activity-instance-row .current-dashboard { display: inline-block; vertical-align: middle; -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; } .activity-instance-list .activity-instance-row .student-count, .activity-instance-list .activity-instance-row .date-container, .activity-instance-list .activity-instance-row .dashboard-link-cell, .activity-instance-list .activity-instance-row .assignment-loading, .activity-instance-list .activity-instance-row .current-dashboard { text-align: center; } .activity-instance-list .activity-instance-row .session-cell { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 48%; -ms-flex: 0 0 48%; flex: 0 0 48%; min-width: 300px; overflow: hidden; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .activity-instance-list .activity-instance-row .session-cell.session-cell-four-columns { -webkit-flex-basis: 30%; flex-basis: 30%; -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; } .activity-instance-list .activity-instance-row .session-cell .session-inner { display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-box; display: inline-flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: start; -moz-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .activity-instance-list .activity-instance-row .date-container, .activity-instance-list .activity-instance-row .dashboard-link-cell, .activity-instance-list .activity-instance-row .current-dashboard { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 18%; -ms-flex: 0 0 18%; flex: 0 0 18%; } .activity-instance-list .activity-instance-row .student-count { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 12%; -ms-flex: 0 0 12%; flex: 0 0 12%; } .activity-instance-list .activity-instance-row .class-code-wrapper { display: inline-block; } .activity-instance-list .activity-instance-row .class-code-wrapper .class-code { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; width: fit-content; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .activity-instance-list .activity-instance-row .session-cell .block-name .instance-label-deemphasized { display: none; } .activity-instance-list .activity-instance-row .session-cell .inactive-message, .activity-instance-list .activity-instance-row .session-cell .class-code-active, .activity-instance-list .activity-instance-row .session-cell .block-name { display: inline-block; } .activity-instance-list .activity-instance-row .session-cell .class-code-active { border: 1px solid #3b3b3b; border-radius: 4px; } .activity-instance-list .activity-instance-row .session-cell .inactive-label, .activity-instance-list .activity-instance-row .session-cell .class-code-active { text-align: center; } .activity-instance-list .activity-instance-row .session-cell .inactive-message { color: #3b3b3b; font-size: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .activity-instance-list .activity-instance-row .session-cell .inactive-message .reactivate { margin-left: 8px; } .activity-instance-list .activity-instance-row .session-cell .pause-tag-code-wrapper { margin-bottom: 1.5px; } .activity-instance-list .activity-instance-row .session-cell .pause-tag-block-wrapper { margin-top: 2px; } .activity-instance-list .activity-instance-row .session-cell .pause-tag-block-wrapper, .activity-instance-list .activity-instance-row .session-cell .pause-tag-code-wrapper { display: inline-block; margin-left: 10px; } .activity-instance-list .activity-instance-row .session-cell .pause-tag-block-wrapper .wide-screen-tag, .activity-instance-list .activity-instance-row .session-cell .pause-tag-code-wrapper .wide-screen-tag { padding: 4px 8px; border-radius: 30px; } .activity-instance-list .activity-instance-row .session-cell .pause-tag-block-wrapper .wide-screen-tag .pillow-icon-pause, .activity-instance-list .activity-instance-row .session-cell .pause-tag-code-wrapper .wide-screen-tag .pillow-icon-pause, .activity-instance-list .activity-instance-row .session-cell .pause-tag-block-wrapper .wide-screen-tag .pause-text, .activity-instance-list .activity-instance-row .session-cell .pause-tag-code-wrapper .wide-screen-tag .pause-text { text-align: center; line-height: 1; font-size: 105%; } .activity-instance-list .activity-instance-row .session-cell .pause-tag-block-wrapper .wide-screen-tag .pillow-icon-pause, .activity-instance-list .activity-instance-row .session-cell .pause-tag-code-wrapper .wide-screen-tag .pillow-icon-pause { font-size: 75%; } .activity-instance-list .activity-instance-row .session-cell .pause-tag-block-wrapper .alp-pause-tag, .activity-instance-list .activity-instance-row .session-cell .pause-tag-code-wrapper .alp-pause-tag { color: #fff; background-color: #676767; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; row-gap: 8px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; font-size: 80%; -webkit-column-gap: 6px; -moz-column-gap: 6px; column-gap: 6px; max-width: 80px; } .activity-instance-list .activity-instance-row .session-cell .pause-tag-block-wrapper .pause-tooltip-wrapper, .activity-instance-list .activity-instance-row .session-cell .pause-tag-code-wrapper .pause-tooltip-wrapper { display: none; } .activity-instance-list .activity-instance-row .session-cell .pause-tag-block-wrapper .small-screen-tag, .activity-instance-list .activity-instance-row .session-cell .pause-tag-code-wrapper .small-screen-tag { display: none; } .activity-instance-list .activity-instance-row .session-cell .block-name-unassigned { font-size: 110%; color: #bdbdbd; } .activity-instance-list .activity-instance-row .session-cell .block-name-unassigned .instance-label-deemphasized:before { content: ''; border-left: 1px solid #bdbdbd; padding-left: 10px; } .activity-instance-list .activity-instance-row .session-cell .instance-label-deemphasized { margin-left: 10px; font-size: 80%; color: #676767; max-width: 200px; white-space: normal; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: end; -moz-box-align: end; -o-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .activity-instance-list .activity-instance-row .session-cell .instance-label-deemphasized .session-expiration-label.first-half { display: block; } .activity-instance-list .activity-instance-row .session-cell .instance-label-deemphasized .learn-link { padding: 0 5px; color: #000; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); text-decoration: none; } .activity-instance-list .activity-instance-row .session-cell .instance-label-deemphasized .learn-link.dcg-hovered { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); } .activity-instance-list .activity-instance-row .session-cell .instance-label-deemphasized .learn-link.dcg-depressed { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); } .activity-instance-list .activity-instance-row .session-cell .session-inner { max-width: 100%; } .activity-instance-list .activity-instance-row .session-cell .block-name-display { max-width: 100%; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-box; display: inline-flex; } .activity-instance-list .activity-instance-row .session-cell .block-name-assigned, .activity-instance-list .activity-instance-row .session-cell .class-code-active { color: #3b3b3b; } .activity-instance-list .activity-instance-row .session-cell .class-code-active { width: 100px; text-transform: uppercase; letter-spacing: 0.05em; } .activity-instance-list .activity-instance-row .session-cell .block-name-assigned { overflow: hidden; } .activity-instance-list .activity-instance-row .session-cell .block-name-assigned .external-logo { position: relative; top: 4px; } .activity-instance-list .activity-instance-row .student-count { -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; line-height: 35px; color: #3b3b3b; } .activity-instance-list .activity-instance-row .date-container { -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; } .activity-instance-list .activity-instance-row .date-container .date { margin-top: 2px; color: #3b3b3b; display: block; font-size: 90%; } .activity-instance-list .activity-instance-row .date-container .time { font-size: 80%; display: block; } .activity-instance-list .activity-instance-row .date-container .not-run-yet { line-height: 35px; font-size: 90%; font-style: italic; color: rgba(0,0,0,0.2); } .activity-instance-list .activity-instance-row .current-dashboard { font-style: italic; color: #676767; line-height: 35px; } .activity-instance-list .activity-instance-row .enter-lesson-link { font-size: 12.5px; height: 31.5px; min-width: 86px; } .activity-instance-list .activity-instance-row .enter-lesson-link span { padding-right: 5px; } .activity-instance-list .activity-instance-row .enter-lesson-link i { font-size: 10px; } .activity-instance-list .activity-instance-header { border-bottom: 1px solid #bdbdbd; padding: 0 5px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .activity-instance-list .activity-instance-header .table-header { display: inline-block; text-transform: uppercase; font-size: 73%; color: #3b3b3b; line-height: 22px; } .activity-instance-list .activity-instance-header .table-header.num-students-header { text-align: center; width: 12%; } .activity-instance-list .activity-instance-header .table-header.num-students-header .dcg-tooltip-hit-area-container { vertical-align: middle; } .activity-instance-list .activity-instance-header .table-header.num-students-header .dcg-tooltip-hit-area-container i { margin-left: 2px; line-height: 0.8em; } .activity-instance-list .activity-instance-header .table-header.student-code-header { width: 48%; min-width: 300px; } .activity-instance-list .activity-instance-header .table-header.student-code-header.student-code-header-four-columns { width: 30%; } .activity-instance-list .activity-instance-header .table-header.date-header, .activity-instance-list .activity-instance-header .table-header.link-header { width: 18%; } .activity-instance-list .activity-instance-header .table-header:not(.student-code-header) { text-align: center; } .activity-instance-list .activity-instance-header.notice-at-top { padding-bottom: 10px; } .activity-instance-list .activity-instance-header .dashboard-link-header, .activity-instance-list .activity-instance-header .actions-header { position: absolute; top: -1000px; left: -1000px; width: 1px; height: 1px; } .activity-instance-list .last-published-notice { z-index: 1; font-size: 80%; position: absolute; top: 0; width: 100%; color: #3b3b3b; text-align: center; margin-top: -10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .activity-instance-list .last-published-notice span { background: #f6f6f6; padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .activity-instance-list .no-activities-message { text-align: center; width: 100%; padding: 10px; color: #3b3b3b; border-top: 1px solid #bdbdbd; border-bottom: 1px solid #bdbdbd; } .activity-instance-list .no-activities-message .instances-loading-message { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; } .activity-instance-list .no-activities-message .blue-link { margin-left: 5px; } .activity-instance-list .activity-instance-row { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; -ms-transition-delay: 500ms; transition-delay: 500ms; -webkit-transition: background 500ms; -moz-transition: background 500ms; -o-transition: background 500ms; -ms-transition: background 500ms; transition: background 500ms; padding: 6px 11px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: baseline; -moz-box-align: baseline; -o-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; } .activity-instance-list .activity-instance-row.highlighted { -webkit-transition-delay: 0; -moz-transition-delay: 0; -o-transition-delay: 0; -ms-transition-delay: 0; transition-delay: 0; -webkit-transition: background 0; -moz-transition: background 0; -o-transition: background 0; -ms-transition: background 0; transition: background 0; background: rgba(50,120,200,0.2); } .activity-instance-list .activity-instance-row.deleting { -webkit-transition-delay: 0; -moz-transition-delay: 0; -o-transition-delay: 0; -ms-transition-delay: 0; transition-delay: 0; -webkit-transition: -webkit-transform 300ms, opacity 300ms; -moz-transition: -moz-transform 300ms, opacity 300ms; -o-transition: -o-transform 300ms, opacity 300ms; -ms-transition: -ms-transform 300ms, opacity 300ms; transition: transform 300ms, opacity 300ms; -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -o-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); pointer-events: none; } .activity-instance-list .activity-instance-row .animated-pause-tag:not(.animating-out) { -webkit-animation: fadeIn 0.3s forwards; -moz-animation: fadeIn 0.3s forwards; -o-animation: fadeIn 0.3s forwards; -ms-animation: fadeIn 0.3s forwards; animation: fadeIn 0.3s forwards; } .activity-instance-list .activity-instance-row .animated-pause-tag.animating-out { -webkit-animation: fadeOut 0.3s forwards; -moz-animation: fadeOut 0.3s forwards; -o-animation: fadeOut 0.3s forwards; -ms-animation: fadeOut 0.3s forwards; animation: fadeOut 0.3s forwards; } .activity-instance-list .actions-container { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 5%; -ms-flex: 0 0 5%; flex: 0 0 5%; height: 35px; margin-left: auto; -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; } .activity-instance-list .actions-container .dot-dot-dropdown-container { float: right; } .activity-instance-list .actions-container .dot-dot-dropdown-container .dropdown-explanations { font-style: italic; margin-top: -5px; padding: 0 0 0 37px; } .instance-list-dropdown.dcg-shared-dropdown-popover-container .dropdown-container { top: calc(100% + 3px); } .instance-list-dropdown.dcg-shared-options-dropdown { min-width: 150px; } .instance-list-dropdown.dcg-shared-options-dropdown:after { content: ""; position: absolute; top: -9px; right: 10px; border-width: 9px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .instance-list-dropdown.dcg-shared-options-dropdown:before { content: ""; position: absolute; top: -10px; right: 9px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .switch-dashboard-modal-contents .activity-instance-list .activity-instance-header .table-header.student-code-header { width: 35%; } .switch-dashboard-modal-contents .activity-instance-list .instance-list-row .session-cell { -webkit-flex-basis: 35%; flex-basis: 35%; } .switch-dashboard-modal-contents .activity-instance-list .instance-list-row .dashboard-link, .switch-dashboard-modal-contents .activity-instance-list .instance-list-row .current-dashboard { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; text-align: center; } @media screen and (max-width: 1100px) { .activity-instance-list .activity-instance-header .table-header.student-code-header, .activity-instance-list .activity-instance-row .session-cell { min-width: 100px; } .activity-instance-list .activity-instance-row .class-code .instance-label-deemphasized { display: none; } } @media screen and (max-width: 900px) { .activity-instance-list .activity-instance-row .session-cell .session-inner { display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-box; display: inline-flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: start; -moz-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .activity-instance-list .activity-instance-row .class-code { min-width: 100px; } .activity-instance-list .activity-instance-row .class-code .inactive-message { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; line-height: initial; } .activity-instance-list .activity-instance-row .class-code .inactive-message .inactive-label { border: none; padding: 0; } .activity-instance-list .activity-instance-row .class-code .inactive-message .reactivate { margin-left: 0; } } @media screen and (max-width: 800px) { .activity-instance-list .activity-instance-header { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .activity-instance-list .activity-instance-header .table-header.num-students-header, .activity-instance-list .activity-instance-header .table-header.link-header { display: none; } .activity-instance-list .activity-instance-row { white-space: nowrap; } .activity-instance-list .activity-instance-row .class-code { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 30%; -ms-flex: 0 0 30%; flex: 0 0 30%; } .activity-instance-list .activity-instance-row .class-code .instance-label-deemphasized { display: none; } .activity-instance-list .activity-instance-row .student-count { display: none; } .activity-instance-list .activity-instance-row .dashboard-link-cell { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 1; -ms-flex: 1 1; flex: 1 1; } .activity-instance-list .activity-instance-row .actions-container { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 30px; -ms-flex: 0 0 30px; flex: 0 0 30px; } } @media screen and (max-width: 515px) { .activity-instance-list .activity-instance-header .table-header.date-header { display: none; } .activity-instance-list .activity-instance-row .class-code { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; } .activity-instance-list .activity-instance-row .dashboard-link, .activity-instance-list .activity-instance-row .current-dashboard { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } .activity-instance-list .activity-instance-row .date-container { display: none; } } @media screen and (max-width: 460px) { .activity-instance-row .session-cell .session-inner .pause-tag-block-wrapper .wide-screen-tag, .activity-instance-row .session-cell .session-inner .pause-tag-code-wrapper .wide-screen-tag { display: none; } .activity-instance-row .session-cell .session-inner .pause-tag-block-wrapper .pause-tooltip-wrapper, .activity-instance-row .session-cell .session-inner .pause-tag-code-wrapper .pause-tooltip-wrapper { display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-box; display: inline-flex; } .activity-instance-row .session-cell .session-inner .pause-tag-block-wrapper .small-screen-tag, .activity-instance-row .session-cell .session-inner .pause-tag-code-wrapper .small-screen-tag { padding: 6px 6px; border-radius: 50%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .activity-instance-row .session-cell .session-inner .pause-tag-block-wrapper .small-screen-tag .pillow-icon-pause, .activity-instance-row .session-cell .session-inner .pause-tag-code-wrapper .small-screen-tag .pillow-icon-pause { font-size: 80%; } } /* src/js/shared/dcgviews/language-picker.styl */ .language-picker .dcg-shared-dropdown-popover-container { width: 40px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .language-picker .dcg-shared-dropdown-popover-container .dropdown-container:not(.dropdown-pops-up) .language-dropdown { line-height: 1.5em; width: 230px; } .language-picker .language-picker-icon { display: inline-block; color: #676767; } .language-picker .language-picker-icon:not(.light-mode) { color: #676767; } .language-picker .language-picker-icon.dcg-hovered { color: #3b3b3b; } .language-picker .language-picker-icon.dcg-depressed, .language-picker .language-picker-icon.active { color: #080808; } .language-picker .popover-interior .dcg-language-option { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .language-picker .popover-interior .arrow { position: absolute; } .language-picker .popover-interior .arrow:not(.pops-up) { top: 0; } .language-picker .popover-interior .arrow:not(.pops-up):after { content: ""; position: absolute; top: -10px; right: 0px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .language-picker .popover-interior .arrow:not(.pops-up):before { content: ""; position: absolute; top: -11px; right: -1px; border-width: 11px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .language-picker .popover-interior .arrow.pops-up { bottom: 0; } .language-picker .popover-interior .arrow.pops-up:after { content: ""; position: absolute; bottom: -10px; right: 0px; border-width: 10px; border-bottom-width: 0; border-style: solid; border-color: #fff transparent transparent transparent; line-height: 0; } .language-picker .popover-interior .arrow.pops-up:before { content: ""; position: absolute; bottom: -11px; right: -1px; border-width: 11px; border-bottom-width: 0; border-style: solid; border-color: #bdbdbd transparent transparent transparent; line-height: 0; } .language-picker .popover-interior .dcg-language-footer-link { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } /* src/js/shared/dcgviews/logo/desmos-svg-logo.styl */ .desmos-svg-logo { fill: currentColor !important; } /* src/js/shared/dcgviews/modal.styl */ .modal-cover { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 30; /** * layout of the various modal types */ } .modal-cover .dc-modal-background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.7); } .modal-cover.fullscreened-modal .dc-modal-background { background: #000; } .modal-cover.fixed-width .modal-container, .modal-cover.narrow-width .modal-container, .modal-cover.centered-modal .modal-container { -webkit-animation: fadeInDown 0.3s; -moz-animation: fadeInDown 0.3s; -o-animation: fadeInDown 0.3s; -ms-animation: fadeInDown 0.3s; animation: fadeInDown 0.3s; } .modal-cover.dc-modal-background, .modal-cover.full-width .modal-container { -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .modal-cover.close-btn-style-legacy .modal-close-btn { cursor: pointer; margin-left: 6px; } .modal-cover.close-btn-style-legacy .modal-close-btn .icon-v2-close:before { content: "\2715"; color: #fff; font-family: sans-serif; font-style: normal; font-weight: bold; font-size: 24px; } .modal-cover.close-btn-style-legacy .modal-close-btn label { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); cursor: pointer; } .modal-cover.centered-modal { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .modal-cover.centered-modal .modal-transition-container { margin: 0 auto; position: relative; } .modal-cover.centered-modal .modal-transition-container .modal-container { position: initial; margin-left: auto; } .modal-cover.centered-modal .modal-contents-wrapper { max-height: calc(100vh - calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 4)); } .modal-cover.centered-modal .modal-close-btn { left: calc(100% - 5px); top: -27px; } .modal-cover.fixed-width .modal-container { position: absolute; left: 50%; top: 0; width: 800px; margin-left: -400px; } .modal-cover.fixed-width .modal-container .modal-contents-wrapper { max-height: 100vh; overflow-y: auto; } .modal-cover.fixed-width .modal-close-btn { position: relative; left: calc(100% - 5px); top: 5px; } .modal-cover.fixed-width .modal-close-btn.btn-icon-float { left: calc(100% - 1.5em); top: calc(1.5em + 3.5px); } .modal-cover.fixed-width.centered-modal .modal-container { width: calc(800px - 50px); } .modal-cover.narrow-width .modal-container { position: absolute; left: 50%; top: 0; width: 500px; margin-left: -250px; } .modal-cover.narrow-width .modal-container .modal-contents-wrapper { max-height: 100vh; overflow-y: auto; } .modal-cover.narrow-width .modal-close-btn { position: relative; left: calc(100% - 5px); top: 5px; } .modal-cover.full-width .modal-container { position: absolute; top: var(--modal-margin, calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 4)); bottom: var(--modal-margin, calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 4)); left: var(--modal-margin, calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 4)); right: var(--modal-margin, calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 4)); } .modal-cover.full-width .modal-container .modal-contents-wrapper { overflow-y: auto; overflow-x: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .modal-cover.full-width .modal-close-btn { top: -27px; left: calc(100% - 5px); } .modal-cover .modal-close-btn { position: absolute; } .modal-cover .modal-close-btn.btn-icon-float { top: var(--close-modal-btn-position, -1.5em); right: var(--close-modal-btn-position, -1.5em); left: auto; z-index: 5; background: var(--close-modal-btn-background, #fff); color: var(--close-modal-btn-color, #676767); } .modal-cover .modal-close-btn.btn-icon-float.dcg-hovered { background: var(--close-modal-btn-background-hover, #fff); color: var(--close-modal-btn-color, #080808); } .modal-cover .modal-close-btn.btn-icon-float.dcg-depressed { background: var(--close-modal-btn-background-depressed, #e1e1e1); color: var(--close-modal-btn-color, #676767); } .modal-cover .modal-close-btn.btn-icon-ghost { z-index: 1; } .modal-cover .modal-close-btn.btn-style-inside label { max-width: 75px; height: fit-content; } .modal-cover .modal-close-btn.btn-style-inside label span { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; white-space: normal; line-height: 1.2em; padding: 2px 0; } .modal-cover .modal-container .modal-contents-wrapper { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); background: var(--picture-modal-background, #fff); border-radius: var(--border-radius-medium, 0.1875em); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); box-shadow: 0 0 10px rgba(0,0,0,0.5); } .modal-cover .modal-error-message { text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; line-height: 24px; } .modal-cover h1.modal-title { padding: 0; margin: 0 0 20px; font-weight: normal; font-size: 24px; text-align: center; } .modal-cover.close-btn-style-inside .modal-contents-wrapper { position: relative; overflow-x: hidden; } .modal-cover.close-btn-style-inside .modal-close-btn { position: absolute; top: var(--close-modal-btn-position, 1em); right: var(--close-modal-btn-position, 1em); left: auto; height: 2.5em; width: 2.5em; } .modal-cover.close-btn-style-inside .form-control:focus { z-index: 1; } .modal-cover.has-footer-content .modal-contents-wrapper { border-radius: 0.1875em 0.1875em 0 0; } .modal-cover.has-footer-content .footer-content-wrapper { background-color: #f6f6f6; border: 0; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; border-bottom-right-radius: 0.1875em; border-bottom-left-radius: 0.1875em; } .modal-cover.has-footer-content .footer-content-wrapper:has(> div[style*="display: none"]) { display: none; } .modal-cover.has-footer-content .footer-content-wrapper .btn + .btn { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } @media screen and (max-width: 850px) { .modal-cover.fixed-width .modal-container { width: auto; margin: 0; position: absolute; top: 0; left: 0; right: 0; } .modal-cover.fixed-width.centered-modal .modal-container { width: calc(100vw - 50px); } } @media screen and (max-width: 575px) { .modal-cover.close-btn-style-floating.full-width .modal-container { position: absolute; top: var(--modal-margin, calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2)); bottom: 0; left: var(--modal-margin, calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2)); right: var(--modal-margin, calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2)); } .modal-cover.close-btn-style-floating .modal-contents-wrapper { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .modal-cover.close-btn-style-floating .modal-close-btn label { max-width: 40px; white-space: normal; height: fit-content; line-height: 1.2em; padding: 3px; } .modal-cover:not(.close-btn-style-floating):not(.centered-modal) .dc-modal-background { background: #333; } .modal-cover:not(.close-btn-style-floating):not(.centered-modal).centered-modal .modal-transition-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .modal-cover:not(.close-btn-style-floating):not(.centered-modal).fixed-width .modal-container, .modal-cover:not(.close-btn-style-floating):not(.centered-modal).full-width .modal-container, .modal-cover:not(.close-btn-style-floating):not(.centered-modal).narrow-width .modal-container { position: absolute; top: 42px; left: 0; right: 0; bottom: 0; width: auto; margin: 0; } .modal-cover:not(.close-btn-style-floating):not(.centered-modal).fixed-width .modal-container .modal-contents-wrapper, .modal-cover:not(.close-btn-style-floating):not(.centered-modal).full-width .modal-container .modal-contents-wrapper, .modal-cover:not(.close-btn-style-floating):not(.centered-modal).narrow-width .modal-container .modal-contents-wrapper { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow-y: auto; overflow-x: hidden; max-height: none; } .modal-cover:not(.close-btn-style-floating) .dc-modal-background { background: #333; } .modal-cover:not(.close-btn-style-floating).centered-modal .modal-transition-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .modal-cover:not(.close-btn-style-floating).centered-modal .modal-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; margin: 0; } .modal-cover:not(.close-btn-style-floating) .modal-contents-wrapper { border-radius: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow-y: auto; overflow-x: hidden; max-height: none none; } .modal-cover:not(.close-btn-style-floating) .dc-modal-background { background: #333; } .modal-cover:not(.close-btn-style-floating).centered-modal .modal-transition-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .modal-cover:not(.close-btn-style-floating).centered-modal .modal-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; margin: 0; } .modal-cover:not(.close-btn-style-floating) .modal-contents-wrapper { border-radius: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow-y: auto; overflow-x: hidden; max-height: none none; } .modal-cover:not(.close-btn-style-floating) .footer-content-wrapper { position: absolute; width: 100%; bottom: 0; } .modal-cover.close-btn-style-inside.fixed-width .modal-container .modal-close-btn, .modal-cover.close-btn-style-inside.full-width .modal-container .modal-close-btn, .modal-cover.close-btn-style-inside.narrow-width .modal-container .modal-close-btn, .modal-cover.close-btn-style-inside.centered-modal .modal-container .modal-close-btn { top: var(--close-modal-btn-position, 1.5em); } } @media screen and (max-width: 550px) { .modal-cover.centered-modal.fixed-width .modal-container, .modal-cover.centered-modal.full-width .modal-container, .modal-cover.centered-modal.narrow-width .modal-container, .modal-cover.centered-modal.centered-modal .modal-container { width: auto; } } /* src/js/shared/dcgviews/navigation-stepper.styl */ .navigation-stepper-container:not(.student-header-theme) { position: absolute; top: 7px; left: 50%; width: 200px; margin-left: -100px; font-size: 15px; } .navigation-stepper-container.student-header-theme { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .navigation-stepper-container.student-header-theme .nav-step-counter { padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .navigation-stepper-container.student-header-theme .nav-stepper-btn { height: var(--btn-size, 'auto'); border-width: var(--btn-border-width, 1px); border-radius: var(--rectangle-btn-border-radius, 0.1875em); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .navigation-stepper-container.student-header-theme .nav-stepper-btn .nav-stepper-btn-text { display: inline; margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .navigation-stepper-container.student-header-theme .nav-stepper-btn i { margin: 0; font-size: var(--font-size-medium, 1.5em); } .navigation-stepper-container.student-header-theme .nav-stepper-btn i.icon-k5-checkmark { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .navigation-stepper-container.student-header-theme .nav-stepper-btn.nav-stepper-previous { width: var(--btn-size, 'auto'); } .navigation-stepper-container .navigation-stepper { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -moz-user-select: -moz-none; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; width: fit-content; text-align: center; } .navigation-stepper-container .navigation-stepper .nav-stepper-contents { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding: var(--nav-stepper-contents-padding, 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); } .navigation-stepper-container .navigation-stepper .nav-step-counter { color: #3b3b3b; white-space: nowrap; font-weight: var(--slide-step-counter-font-weight, 400); width: var(--navigation-stepper-screen-count-width, 70px); } .navigation-stepper-container.invisible { display: none; } .navigation-stepper-container.blue-theme .nav-step-counter { color: rgba(255,255,255,0.5); } .navigation-stepper-container.blue-theme .nav-stepper-btn { border: 1px solid rgba(50,120,200,0.15); border-radius: 3px; background: rgba(255,255,255,0.2); color: #fff; font-size: 135%; width: 2em; height: 2em; line-height: 2em; } .navigation-stepper-container.blue-theme .nav-stepper-btn.dcg-hovered:not(.disabled) { background: rgba(255,255,255,0.5); } .navigation-stepper-container.blue-theme .nav-stepper-btn.dcg-depressed:not(.disabled) { background: rgba(255,255,255,0.9); color: #3278c8; } .navigation-stepper-container.blue-theme .nav-stepper-btn.disabled { opacity: 0.3; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); } .navigation-stepper-container.challenge-creator { line-height: 1.7em; } .navigation-stepper-container.challenge-creator .nav-stepper-btn { border: 1px solid rgba(50,120,200,0.25); border-radius: 3px; background: rgba(50,120,200,0.2); color: rgba(50,120,200,0.8); font-size: 130%; line-height: 1.7em; width: 1.7em; height: 1.7em; } .navigation-stepper-container.challenge-creator .nav-stepper-btn.dcg-hovered:not(.disabled) { border-color: #3278c8; color: #004f9b; } .navigation-stepper-container.challenge-creator .nav-stepper-btn.dcg-depressed:not(.disabled) { background: #3278c8; color: #fff; } .navigation-stepper-container.challenge-creator .nav-stepper-btn.disabled { opacity: 0.25; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; filter: alpha(opacity=25); } .navigation-stepper-container.transparent-theme .nav-stepper-btn { color: #888; padding: 0 10px; -webkit-transition: 0.2s opacity; -moz-transition: 0.2s opacity; -o-transition: 0.2s opacity; -ms-transition: 0.2s opacity; transition: 0.2s opacity; } .navigation-stepper-container.transparent-theme .nav-stepper-btn:not(.disabled).dcg-hovered, .navigation-stepper-container.transparent-theme .nav-stepper-btn:not(.disabled).dcg-depressed { color: #000; } .navigation-stepper-container.transparent-theme .nav-stepper-btn.disabled { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .rtl-layout .navigation-stepper-container.student-header-theme .nav-stepper-next .pillow-icon-chevron-left { margin: 0 5px 0 0; display: inline-block; } @media screen and (max-width: 767px) { .navigation-stepper-container .navigation-stepper .nav-stepper-contents { padding: var(--nav-stepper-contents-padding-sm, 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem)); } } @media screen and (max-width: 700px) { .navigation-stepper-container:not(.student-header-theme) { font-size: 90%; width: 150px; top: 10px; left: 10px; margin-left: 0; } } @media screen and (min-width: 1200px) { .navigation-stepper-container .navigation-stepper .nav-step-counter { width: var(--navigation-stepper-screen-count-width, 75px); } } @media screen and (min-width: 1500px) { .navigation-stepper-container .navigation-stepper .nav-step-counter { width: var(--navigation-stepper-screen-count-width, 80px); } } /* src/js/shared/dcgviews/notice-bar.styl */ .dc-notice-bar-container { position: absolute; top: -30px; left: 0; right: 0; height: 30px; background: #000; color: rgba(255,255,255,0.9); font-size: 90%; } .dc-notice-bar-container .dc-notice-bar { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; line-height: 30px; } /* src/js/shared/dcgviews/rich-text.styl */ .dcg-rich-text { white-space: pre-wrap; } .dcg-rich-text .blue-link { display: inline-block; max-width: 100%; word-break: break-all; vertical-align: bottom; } .dcg-rich-text .partner-cobranding img { display: inline-block; height: 28px; position: relative; top: 7px; } @media screen and (max-width: 930px) { .dcg-rich-text .blue-link { max-width: 540px; } } @media screen and (max-width: 660px) { .dcg-rich-text .blue-link { max-width: 300px; } } /* src/js/shared/dcgviews/searchable-dropdown.styl */ .dcg-search-container { position: relative; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding-bottom: 1px; } .dcg-search-container .dcg-remove-x, .dcg-search-container .dcg-dropdown-caret { position: absolute; top: 0; right: 0; padding-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); cursor: pointer; } .dcg-search-container .dcg-remove-x i, .dcg-search-container .dcg-dropdown-caret i { line-height: 40px; } .dcg-search-container input { width: 100%; } .dcg-search-container input.has-value::placeholder { color: #3b3b3b; font-style: unset; opacity: 1 !important; -ms-filter: none !important; filter: none !important; } .dcg-search-container .dcg-searchable-dropdown.dcg-is-list-open input { cursor: auto; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .dcg-search-container .dcg-searchable-dropdown-list-container { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .dcg-search-container .dcg-searchable-dropdown-list { font-size: 110%; border: 1px solid #bdbdbd; border-radius: 0 0 5px 5px; background-color: #fff; text-align: left; z-index: 2; -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: auto; } .dcg-search-container .dcg-searchable-dropdown-list:not(.dcg-no-input) { border-top-width: 0; max-height: 100%; } .dcg-search-container .dcg-searchable-dropdown-list.dcg-no-input { border-radius: 5px; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .dcg-search-container .dcg-searchable-dropdown-list.dcg-no-search-results { text-align: center; padding: 25px; font-style: italic; color: #bbb; font-size: 90%; } .dcg-search-container .dcg-searchable-dropdown-list .dcg-searchable-dropdown-option { padding: 7px 10px; font-size: 90%; } .dcg-search-container .dcg-searchable-dropdown-list .dcg-searchable-dropdown-option.dcg-hovered { background: #f6f6f6; outline: none; } .dcg-search-container .dcg-searchable-dropdown-list .dcg-searchable-dropdown-option.dcg-depressed { background: #e9e9e9; } .dcg-search-container .dcg-searchable-dropdown-list .dcg-searchable-dropdown-option.dcg-selected { background: #e9e9e9; font-weight: 500; } .dcg-search-container .dcg-searchable-dropdown-list .dcg-searchable-dropdown-option.dcg-add-missing-item { text-decoration: none; } .dcg-search-container .dcg-searchable-dropdown-list .dcg-searchable-dropdown-option.dcg-add-missing-item i.pillow-icon-plus { margin-right: 0.5em; } /* src/js/shared/dcgviews/selectable-input.styl */ .dcg-selectable-input-container { position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .dcg-selectable-input-container .dcg-copy-button { text-align: center; line-height: 36px; border-radius: 0 6px 5px 0; padding: 0 10px; font-size: 90%; color: #fff; position: relative; } .dcg-selectable-input-container .dcg-copy-button.dcg-depressed { -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.8); box-shadow: inset 0 0 5px rgba(0,0,0,0.8); } .dcg-selectable-input-container .dcg-copy-button i, .dcg-selectable-input-container .dcg-copy-button .dcg-copy-text { -webkit-animation: dcg-fadeIn 0.3s; -moz-animation: dcg-fadeIn 0.3s; -o-animation: dcg-fadeIn 0.3s; -ms-animation: dcg-fadeIn 0.3s; animation: dcg-fadeIn 0.3s; } .dcg-selectable-input-container .dcg-copy-button i { font-size: 110%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .dcg-selectable-input-container .dcg-copy-button .link-copied { visibility: hidden; } .dcg-selectable-input-container .dcg-permalink { height: 36px; line-height: 36px; padding: 0 10px; font-size: 87%; border-radius: 6px 0 0 6px; border: 1px solid #bdbdbd; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .dcg-selectable-input-container .dcg-permalink::-ms-clear { display: none; } .dcg-selectable-input-container .dcg-permalink:focus { outline: 0; border-color: #9c0d63; -webkit-box-shadow: inset 0 0 0 1px #9c0d63; box-shadow: inset 0 0 0 1px #9c0d63; } .blue-mode { background: #c2d7ef; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 100%; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1.7); border-radius: 0.1875em; } .blue-mode .dcg-permalink { color: #3b3b3b; border-color: transparent; background: transparent; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; padding: 0 3px 0 0; } .blue-mode .dcg-permalink:focus { outline: 0; border-color: transparent; -webkit-box-shadow: inset 0 0 0 1px transparent; box-shadow: inset 0 0 0 1px transparent; } .blue-mode .dcg-copy-button { color: #3278c8; border-radius: 0.1875em; } .blue-mode .pillow-copy-copy { height: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .blue-mode .pillow-copy-copy .icon-v2-copy { position: inherit; margin-right: 10px; font-size: 1.5em; } .blue-mode .pillow-copy-copy span { font-weight: 400; text-transform: uppercase; } /* src/js/shared/dcgviews/share-settings-chooser.styl */ .share-settings-chooser { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) 0; } .share-settings-chooser .btn { width: 100%; border-radius: 0; } .share-settings-chooser .btn:first-child { border-radius: 0.1875em 0 0 0.1875em; } .share-settings-chooser .btn:last-child { border-radius: 0 0.1875em 0.1875em 0; } .share-settings-chooser .btn.btn-blue { border-color: #3278c8; } .share-settings-chooser .btn.btn-blue:hover { border-color: #23538b; } .share-settings-chooser .btn.btn-blue:active { border-color: #193b62; } .share-settings-chooser .btn.btn-secondary:hover { -webkit-box-shadow: none; box-shadow: none; } .share-settings-chooser .title { font-size: 15px; display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-box; display: inline-flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .share-settings-chooser .share-settings-title { font-size: 22px; margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) auto; } /* src/js/shared/dcgviews/shared-confirmation-modal.styl */ .dcg-shared-modal-cover .shared-confirmation-modal-contents .confirmation-modal-message { padding: 5px 0; } .dcg-shared-modal-cover .shared-confirmation-modal-contents .confirmation-modal-message b { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .dcg-shared-modal-cover .shared-confirmation-modal-contents .modal-error-message { line-height: 24px; text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .dcg-shared-modal-cover .confirmation-modal-actions { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; margin-top: 10px; } .dcg-shared-modal-cover .confirmation-modal-actions .amp-link { padding-right: 20px; } .dcg-shared-modal-cover .confirmation-modal-actions .btn + .btn { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } /* src/js/shared/dcgviews/shared-header-dropdown.styl */ .header-dropdown-container { cursor: pointer; } .header-dropdown-container:not(.accounts-container) .dcg-shared-dropdown-popover-container .anchor-container, .header-dropdown-container .account-header-view .dcg-shared-dropdown-popover-container .anchor-container { padding: 10px 8px; } .header-dropdown-container .user-name-link, .header-dropdown-container .dropdown-menu-title { display: inline-block; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; max-width: 120px; vertical-align: bottom; cursor: pointer; } .header-dropdown-container .dropdown-container { padding: 12px; } .header-dropdown-container .dropdown-container { position: absolute; top: 43px; right: -1px; } .header-dropdown-container .account-dropdown { position: absolute; top: 46px; right: 0px; } .header-dropdown-container .dropdown-link:not(.math-tools-link) { display: block; white-space: nowrap; text-decoration: none; color: #3b3b3b; padding: 7px; } .header-dropdown-container .dropdown-link:not(.math-tools-link) a { color: #3b3b3b; text-decoration: none; } .header-dropdown-container .animated-dropdown-container { position: absolute; top: 0; right: 0; z-index: 2; } @media screen and (max-width: 1100px) { .header-dropdown-container { font-size: 95%; } } /* src/js/shared/dcgviews/sidebar-panel.styl */ .sidebar-panel { width: 350px; border-radius: 0.1875em 0 0 0.1875em; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); background: #fff; margin: 10px 0; position: relative; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 350px; -ms-flex: 0 0 350px; flex: 0 0 350px; overflow: auto; } .sidebar-panel .close-btn { width: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); } .sidebar-panel.grading-mode { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 calc(350px - $rhythm-unit-half); -ms-flex: 0 0 calc(350px - $rhythm-unit-half); flex: 0 0 calc(350px - $rhythm-unit-half); } .sidebar-panel.grading-mode .sidebar-header .panel-icon { font-size: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .sidebar-panel.animate { -webkit-animation: 0.5s fadeInRight; -moz-animation: 0.5s fadeInRight; -o-animation: 0.5s fadeInRight; -ms-animation: 0.5s fadeInRight; animation: 0.5s fadeInRight; } .sidebar-panel .sidebar-header { border-radius: 0.1875em 0 0 0; border-right: none; width: 100%; height: 44px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; padding: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem); text-transform: capitalize; font-weight: 400; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -moz-user-select: -moz-none; } .sidebar-panel .sidebar-header .btn { color: #fff; } .sidebar-panel .sidebar-header .btn label { z-index: 1; } .sidebar-panel .sidebar-header .btn + .btn { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .sidebar-panel .sidebar-header .help-link { text-decoration: none; } .sidebar-panel .sidebar-header .icon-label-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .sidebar-panel .sidebar-header .icon-label-container .panel-icon { margin: 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .sidebar-panel .sidebar-header-blue { background: #3278c8; color: #fff; } .sidebar-panel .sidebar-header-green { background: #00866b; color: #fff; } .sidebar-panel .sidebar-header-gray { background: #e9e9e9; color: #3b3b3b; } .sidebar-panel .sidebar-header-gray .btn { color: #3b3b3b; } .sidebar-panel .dcg-calculator-api-container .dcg-basic-list-container { border-top: none; } .sidebar-panel .dcg-calculator-api-container .dcg-basic-keypad-container { border-radius: 0 0 0 0.1875em; } .rtl-layout .sidebar-panel { border-radius: 0 0.1875em 0.1875em 0; } .rtl-layout .sidebar-panel.animate { -webkit-animation: 0.5s fadeInLeft; -moz-animation: 0.5s fadeInLeft; -o-animation: 0.5s fadeInLeft; -ms-animation: 0.5s fadeInLeft; animation: 0.5s fadeInLeft; } .rtl-layout .sidebar-panel .sidebar-header { border-radius: 0 0.1875em 0 0; border: 1px solid #3278c8; border-left: none; } .rtl-layout .sidebar-panel .dcg-calculator-api-container .dcg-basic-keypad-container { border-radius: 0 0 0.1875em 0; } @media screen and (max-width: 575px) { .sidebar-panel { width: 100%; border-radius: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; } .sidebar-panel.animate { -webkit-animation: 0.5s fadeIn; -moz-animation: 0.5s fadeIn; -o-animation: 0.5s fadeIn; -ms-animation: 0.5s fadeIn; animation: 0.5s fadeIn; } .sidebar-panel .sidebar-header { border-radius: 0; } .sidebar-panel .dcg-calculator-api-container .dcg-basic-keypad-container { border-radius: 0; } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -ms-filter: none; filter: none; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } /* src/js/shared/dcgviews/sliding-navigation.styl */ .screens-container { overflow: hidden; padding: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .screens-container .dcg-student-screen { -webkit-transition: -webkit-transform 0.4s ease; -moz-transition: -moz-transform 0.4s ease; -o-transition: -o-transform 0.4s ease; -ms-transition: -ms-transform 0.4s ease; transition: transform 0.4s ease; } .screens-container .dcg-student-screen.before-current-screen { -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .screens-container .dcg-student-screen.after-current-screen { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .screens-container .dcg-student-screen.before-current-screen, .screens-container .dcg-student-screen.after-current-screen { overflow: hidden; } .screens-container .dcg-student-screen { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .screens-container .sliding-animation-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* src/js/shared/dcgviews/table.styl */ .classroom-shared-table-row { border-bottom: 1px solid #bdbdbd; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .classroom-shared-table-row.header-row { font-size: 85%; padding: 0 5px; text-transform: uppercase; color: #3b3b3b; } .classroom-shared-table-row.content-row { padding: 5px 5px; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .classroom-shared-table-cell.offscreen-cell { position: absolute; top: -1000px; left: -1000px; width: 1px; height: 1px; } /* src/js/shared/dcgviews/toast.styl */ .toast-container { line-height: 1em; height: 0; position: relative; } .toast-container:not(.hidden) { -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; -ms-transition: opacity 0.3s; transition: opacity 0.3s; } .toast-container.hidden { pointer-events: none; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .toast-container .toast { display: inline-block; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) calc(var(--rhythm-unit-px, 12) / 16 * 1rem); background: #fef2ad; position: absolute; top: 0; left: 0; } .toast-container .toast .toast-icon { margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .toast-container .toast .toast-text { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; text-align: center; } .toast-container .toast.top-of-screen { position: fixed; top: 70px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .toast-container .toast i.pillow-icon-remove { font-size: 80%; margin-left: 10px; color: #999; } .toast-container .toast i.pillow-icon-remove.dcg-hovered, .toast-container .toast i.pillow-icon-remove.dcg-depressed { color: #666; } .toast-container .toast .undo-btn { margin-left: 5px; } /* src/js/shared/diff/diff-dot.styl */ .diff-dot { position: static; width: 8px; height: 8px; top: 0; left: 0; z-index: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; border: 1px solid #906c01; background-color: #f5cd52; } /* src/js/shared/override/override-student-name-modal.styl */ .override-modal.modal-cover.fixed-width .override-modal-contents { padding: 10px; } .override-modal.modal-cover.fixed-width .override-modal-contents h1 { font-size: 150%; font-weight: 400; margin-top: 0; } .override-modal.modal-cover.fixed-width .override-modal-contents .override-modal-description { margin-top: 15px; color: #3b3b3b; font-size: 110%; } .override-modal.modal-cover.fixed-width .override-modal-contents .name-container { width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin: 15px 0; } .override-modal.modal-cover.fixed-width .override-modal-contents .name-container label { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .override-modal.modal-cover.fixed-width .override-modal-contents .name-container label + label { margin-left: 15px; } .override-modal.modal-cover.fixed-width .override-modal-contents .name-container .student-name-input { border-radius: 0.1875em; padding: 5px; } .override-modal.modal-cover.fixed-width .override-modal-contents .override-error { background-color: #f4c0b3; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #3b3b3b; border-radius: 0.1875em; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1); } .override-modal.modal-cover.fixed-width .override-modal-contents .actions-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .override-modal.modal-cover.fixed-width .override-modal-contents .actions-container .cancel-button { margin-right: 15px; } @media screen and (max-width: 650px) { .override-modal.modal-cover.fixed-width .override-modal-contents .name-container { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .override-modal.modal-cover.fixed-width .override-modal-contents .name-container label:last-child { margin-left: 0; margin-top: 10px; } } /* src/js/shared/react/max-lines.styl */ .max-lines { -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; overflow: hidden; } /* src/js/shared/react/select-dropdown.react.styl */ .select-dropdown-react-wrapper button.dropdown-title { -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; padding: 8px 16px; width: 320px; } .select-dropdown-react-wrapper button.dropdown-title .title-text { font-size: 16px; } .select-dropdown-react-wrapper .select-dropdown-react-options { -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; background: #fff; border-radius: 0.1875em; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); border: 1px solid #bdbdbd; color: #3b3b3b; -webkit-animation: fadeInDown 0.2s; -moz-animation: fadeInDown 0.2s; -o-animation: fadeInDown 0.2s; -ms-animation: fadeInDown 0.2s; animation: fadeInDown 0.2s; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-top: 0; margin-left: 2px; max-height: 75%; overflow: auto; padding: 13px 0; position: absolute; width: 316px; z-index: 10; } .select-dropdown-react-wrapper .select-dropdown-react-options .select-dropdown-react-option { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; gap: 18px; padding: 8px 20px; width: 100%; } .select-dropdown-react-wrapper .select-dropdown-react-options .select-dropdown-react-option.dcg-hovered { background: #f6f6f6; } .select-dropdown-react-wrapper .select-dropdown-react-options .select-dropdown-react-option input { accent-color: #9c0d63; } /* src/js/shared/site-admin-modals.styl */ .site-admin-modal h2 { font-size: 1.4em !important; line-height: normal !important; margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) !important; } .site-admin-modal .submit-buttons { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); text-align: right; } .site-admin-modal .submit-buttons .btn + .btn { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .site-admin-modal .team-desmos-owned { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3) 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .site-admin-modal .select-dropdown .dropdown-container { width: 100%; } .site-admin-modal .select-dropdown .dropdown-anchor-caret { position: absolute; right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } /* src/js/student-sign-in/classcode/sign-in-button.styl */ .btn.login-button { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; height: 52.5px; padding: 0; font-size: 1.3125rem; max-width: 306.5px; width: 100%; margin: 5.75px 0; } .btn.login-button .login-button-icon { border-right: 2px solid #bdbdbd; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding-left: 15px; min-width: 52.5px; height: 100%; } .btn.login-button > span { text-align: center; width: 100%; font-size: 18px; } .btn.login-button.google-login { background-color: #ca5331; border: 0; color: #fff; } .btn.login-button.google-login > .login-button-icon { border-right-color: #db8974; } .btn.login-button.google-login:hover { background-color: #79311d; } .btn.login-button.action-login { color: #3b3b3b; } .rtl-layout .btn.login-button { max-width: 350px; } .rtl-layout .btn.login-button .login-button-icon { border-right: unset; padding-left: unset; padding-right: 15px; border-left: 2px solid #bdbdbd; } @media screen and (max-width: 320) { .rtl-layout .btn.login-button .login-button > span { font-size: 16px; } } .rtl-layout .login-button.google-login > .login-button-icon { border-right-color: unset; border-left-color: #db8974; } /* src/js/student/account/modals.styl */ .signup-modal .action-back i, .login-modal .action-back i, .account-update-modal .action-back i { color: #3278c8; margin: 0 5px; font-size: 120%; } .sign-up-content .login-button.google-login { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .signup-modal h2, .login-modal h2 { font-family: "Amplify", serif; } .signup-modal h2, .login-modal h2, .signup-modal h3, .login-modal h3, .signup-modal h4, .login-modal h4 { font-weight: normal; text-align: center; } .signup-modal h2, .login-modal h2 { margin: 0; } .signup-modal h3, .login-modal h3 { width: 300px; max-width: 100%; margin: 10px auto; } .signup-modal .google-login, .login-modal .google-login, .signup-modal .amplify-login, .login-modal .amplify-login { margin-left: auto; margin-right: auto; } .signup-modal .signup-container, .login-modal .signup-container { display: inline-block; } .signup-modal .action-signup, .login-modal .action-signup, .signup-modal .action-login, .login-modal .action-login { display: inline-block; margin: 0 5px; } .signup-modal .h4-container, .login-modal .h4-container { text-align: center; height: 1px; background: #bdbdbd; margin: 30px 0; } .signup-modal .h4-container h4, .login-modal .h4-container h4 { color: #676767; display: inline-block; margin: 0 auto; background: #fff; position: relative; top: -12px; padding: 0 10px; font-size: 16px; } .signup-modal form.login-form, .login-modal form.login-form { max-width: 400px; width: 100%; margin: 0 auto; } .signup-modal form.login-form .input-title, .login-modal form.login-form .input-title { color: #3b3b3b; font-size: 21px; line-height: 32px; font-weight: 300; } .signup-modal form.login-form .email-container, .login-modal form.login-form .email-container, .signup-modal form.login-form .password-container, .login-modal form.login-form .password-container, .signup-modal form.login-form .label-input-container, .login-modal form.login-form .label-input-container { margin: 0 auto; } .signup-modal form.login-form .email-container label, .login-modal form.login-form .email-container label, .signup-modal form.login-form .password-container label, .login-modal form.login-form .password-container label, .signup-modal form.login-form .label-input-container label, .login-modal form.login-form .label-input-container label { width: 100%; color: #3b3b3b; } .signup-modal form.login-form .email-container input, .login-modal form.login-form .email-container input, .signup-modal form.login-form .password-container input, .login-modal form.login-form .password-container input, .signup-modal form.login-form .label-input-container input, .login-modal form.login-form .label-input-container input { width: 100%; font-size: 21px; } .signup-modal form.login-form input:invalid:not(:focus), .login-modal form.login-form input:invalid:not(:focus) { -webkit-box-shadow: none; box-shadow: none; } .signup-modal form.login-form .input-label, .login-modal form.login-form .input-label { color: #3b3b3b; } .signup-modal form.login-form .account-error-container, .login-modal form.login-form .account-error-container { clear: both; position: relative; top: -5px; width: 100%; } .signup-modal form.login-form .account-error-container .form-error-message, .login-modal form.login-form .account-error-container .form-error-message { text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; line-height: 24px; } .signup-modal form.login-form .account-error-container .logout-button, .login-modal form.login-form .account-error-container .logout-button { white-space: nowrap; } .signup-modal form.login-form .form-submit-container, .login-modal form.login-form .form-submit-container { text-align: right; } .signup-modal form.login-form .form-submit-container .btn, .login-modal form.login-form .form-submit-container .btn { height: 52.5px; font-size: 21px; margin: 5.75px 0; } .signup-modal .terms-disclaimer, .login-modal .terms-disclaimer { color: #080808; font-size: 14px; text-align: center; margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .or-divider { margin: 0 0.75em; } .accounts-modal-contents { width: 566px; } .accounts-modal-contents .name-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .accounts-modal-contents .name-container .label-input-container { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .accounts-modal-contents .name-container .label-input-container + .label-input-container { margin-left: 10px; } .accounts-modal-contents .login-msg { text-align: center; margin: 5px auto 15px; padding: 5px 15px; background: rgba(216,162,2,0.4); border: 1px solid #d8a202; border-radius: 3px; max-width: 300px; } .main-student-login .reset-password-modal-contents .reset-password-form { margin-top: 1.5em; } .login-modal.modal-cover .modal-container .modal-contents-wrapper { padding-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 4); } @media screen and (max-width: 600px) { .accounts-modal-contents { width: 100%; } } @media screen and (max-width: 575px) { .signup-modal .action-back, .login-modal .action-back { position: absolute; top: 15px; left: 10px; } } @media screen and (max-height: 650px) and (min-width: 575px) { .signup-modal .action-back, .login-modal .action-back { position: absolute; top: 15px; left: 10px; } } @media screen and (max-width: 400px) { .accounts-modal-contents .name-container { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .accounts-modal-contents .name-container .label-input-container + .label-input-container { margin-left: 0; } } /* src/js/teacher-spa/access-denied.styl */ .access-denied-content { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin: 120px auto 0; position: relative; max-width: 1000px; } .access-denied-content .lock-img-container { width: 300px; margin-right: 20px; } .access-denied-content .lock-img-container img { width: 100%; } .access-denied-content .access-notice { -webkit-box-flex: 3; -moz-box-flex: 3; -o-box-flex: 3; box-flex: 3; -webkit-flex: 3; -ms-flex: 3; flex: 3; margin-top: 30px; text-align: left; } .access-denied-content .access-notice h1 { color: #676767; font-weight: 200; } .access-denied-content .access-notice .private-error-message { color: #3b3b3b; margin: 30px 0; font-size: 120%; } .access-denied-content .access-notice .btn { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1.5); } @media screen and (max-width: 950px) { .access-denied-content { margin: 30px auto; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; max-width: 500px; } .access-denied-content .lock-img-container { width: 200px; margin: 0 auto; } .access-denied-content .access-notice { text-align: center; } .access-denied-content .btn-container { text-align: center; } } /* src/js/teacher-spa/activity-card.styl */ .amp-styles .activity-card-large a { text-decoration: none; color: #3b3b3b; } .amp-styles .activity-card-large a:hover { color: #3b3b3b; } .activity-card-large, .activity-card-placeholder { width: 100%; vertical-align: top; display: inline-block; position: relative; margin-bottom: 15px; border-radius: 0.1875em; margin-right: 5px; background-color: #fff; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); } .activity-card-large a, .activity-card-placeholder a { border-radius: 0.1875em; } .activity-card-placeholder { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; background: #fff; } .activity-card-placeholder.short-placeholder { height: 80px; } .activity-card-placeholder:not(.short-placeholder) { height: 110px; } .activity-card-large .card-contents:not(.runnable-activity-card) .activity-thumb { filter: grayscale(1); } .activity-card-large .preview-card .description-content { margin-right: 115px; } .activity-card-large .card-contents.preview-and-actions .description-content .activity-card-title, .activity-card-large .card-contents.preview-and-actions .description-content .activity-card-author-section { margin-right: 60px; } .activity-card-large .runnable-activity-card .description-content .activity-card-title, .activity-card-large .runnable-activity-card .description-content .activity-card-author-section { margin-right: 85px; } .activity-card-large .activity-thumb { border-radius: 0.1875em; vertical-align: top; } .activity-card-large .bg-lock-overlay { color: #999; position: absolute; top: 15px; left: 15px; border-radius: 0.1875em; width: 50px; height: 50px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background-color: rgba(255,255,255,0.8); } .activity-card-large .bg-lock-overlay i.pillow-icon-lock { text-shadow: 0 1px rgba(0,0,0,0.4), 0 -1px rgba(255,255,255,0.2); font-size: 30px; } .activity-card-large .description-content { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding-left: 15px; display: inline-block; vertical-align: top; color: #3b3b3b; } .activity-card-large .activity-card-title { margin-top: 0; margin-bottom: 0; } .activity-card-large .activity-card-title div { color: #3b3b3b; display: inline-block; } .activity-card-large .activity-card-title.private-placeholder { font-style: italic; } .activity-card-large .activity-card-actions-container { position: absolute; top: 15px; right: 0; padding-right: 10px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .activity-card-large .activity-card-actions-container.only-preview { bottom: 15px; } .activity-card-large .activity-card-actions-container:not(.only-preview) { height: 36px; } .activity-card-large .activity-card-actions-container .preview-tag { color: #3b3b3b; font-size: 100%; vertical-align: middle; display: inline-block; margin-right: 10px; } .activity-card-large .activity-card-actions-container .activity-main-action-container { display: inline-block; line-height: 36px; height: 36px; margin-right: 10px; } .activity-card-large .activity-card-actions-container .actions-menu-container { float: right; } .activity-card-large .activity-card-actions-container .actions-menu-container .anchor-container:focus-visible { outline-offset: 2px; } .activity-card-large .activity-card-description, .activity-card-large .activity-card-author-section { font-size: 95%; } .activity-card-large .activity-card-author-section { margin-top: 5px; color: #3b3b3b; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .activity-card-large .activity-card-author-section .activity-card-author-container, .activity-card-large .activity-card-author-section .time-and-category { margin: 2px 0; max-width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .activity-card-large .activity-card-author-section .time-estimate, .activity-card-large .activity-card-author-section .activity-type { padding: 0 8px; border-left: 1px solid #999; } .activity-card-large .activity-card-author-section .author-name, .activity-card-large .activity-card-author-section .author-tag { margin-right: 8px; } .activity-card-large .activity-card-author-section .author-name { display: inline-block; white-space: nowrap; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .activity-card-large .activity-card-author-section .author-tag { display: inline-block; font-size: 90%; padding: 0 6px; border: 1px solid; border-radius: 15px; } .activity-card-large .activity-card-author-section .by-desmos { color: #3278c8; } .activity-card-large .activity-card-author-section .by-cpm { color: #233368; } .activity-card-large .activity-card-author-section .by-you, .activity-card-large .activity-card-author-section .edited-by-you, .activity-card-large .activity-card-author-section .team-desmos { color: #005040; } .activity-card-large .activity-card-author-section .searchable-tag { color: #9c0d63; } .activity-card-large a[href="#"] { pointer-events: none; } .activity-card-large .card-background { position: relative; text-decoration: none; display: block; border: 1px solid transparent; -webkit-transition: border-color 0.2s linear; -moz-transition: border-color 0.2s linear; -o-transition: border-color 0.2s linear; -ms-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .activity-card-large .card-background.dcg-hovered { border: 1px solid #9c0d63; } .activity-card-large .card-background.dcg-depressed { border-color: #5e083b; } .activity-card-large .card-contents { padding: 15px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .activity-card-large .card-contents .description-content { max-width: calc(100% - 50px); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .activity-card-large .card-contents .activity-thumb { width: 50px; height: 50px; } .activity-card-large .card-contents .activity-card-title { font-size: 18px; font-weight: 500; } .activity-card-large.access--list-only .card-background { background: #fff; border-radius: 5px; } .activity-card-large.access--list-only .card-contents { font-size: 90%; margin: 10px 15px; } .activity-card-large.access--list-only .activity-thumb { display: none; } .activity-card-large.access--list-only .description-content { font-style: italic; padding-left: 0; } .activity-card-actions-container .dot-dot-dropdown-container .activity-actions-dropdown.dcg-shared-options-dropdown:after { content: ""; position: absolute; top: -9px; right: 5px; border-width: 9px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .activity-card-actions-container .dot-dot-dropdown-container .activity-actions-dropdown.dcg-shared-options-dropdown:before { content: ""; position: absolute; top: -10px; right: 4px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .activity-card-actions-container .dot-dot-dropdown-container .activity-actions-dropdown.dcg-shared-options-dropdown .activity-option-remove { color: #db2e00; } @media screen and (max-width: 800px) { .activity-card-large .activity-card-author-section .author-name, .activity-card-large .activity-card-author-section .author-tag, .activity-card-large .activity-card-author-section .collection-tag, .activity-card-large .activity-card-author-section .time-and-category, .activity-card-large .activity-card-author-section .activity-collection-tags { margin-bottom: 8px; } .activity-card-large .activity-card-author-section .activity-collection-tags { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; margin-bottom: 0; } .activity-card-large .activity-card-author-section .activity-collection-tags .collection-tag { margin-top: 0; } .activity-card-large .activity-card-author-section .author-tags { height: max-content; } .activity-card-large .activity-card-author-section .time-and-category { display: block; } .activity-card-large .activity-card-author-section .time-and-category .time-estimate { border-left: none; padding-left: 0; } } @media screen and (max-width: 500px) { .activity-card-large .activity-card-description { display: none; } .activity-card-large .activity-card-actions-container .bookmark-container { margin-right: 0px; } .activity-card-large .activity-card-actions-container.preview-and-actions .preview-tag { position: absolute; top: 45px; right: 10px; width: 60px; text-align: right; font-size: 80%; } .activity-card-large .activity-card-actions-container.only-preview .preview-tag { width: 60px; text-align: right; font-size: 80%; } .activity-card-large .preview-card .description-content { margin-right: 60px; } .activity-card-large .card-contents.preview-and-actions .description-content .activity-card-title, .activity-card-large .card-contents.preview-and-actions .description-content .activity-card-author-section { margin-right: 10px; } } @media screen and (max-width: 400px) { .activity-card-large .activity-card-author-section .time-estimate, .activity-card-large .activity-card-author-section .activity-type { display: none; } } @media screen and (max-width: 375px) { .activity-card-large .card-contents .activity-title-content { font-size: 100%; max-width: 100%; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } } /* src/js/teacher-spa/activity-list.styl */ .activity-list { position: relative; } .activity-list.centered-content { margin-top: 30px; } .activity-list.no-scroll { margin: 0 auto; padding: 0 5px; text-align: left; } .activity-list .header-container .header-links .ab-new-activity { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .activity-list .header-container .header-links .ab-new-activity:not(:last-of-type) { margin-right: 15px; padding-right: 15px; border-right: 1px solid #bdbdbd; } .activity-list .activity-cards-container .loading-indicator { font-size: 120%; color: #888; -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; } .activity-list .empty-bookmarked-section { font-size: 120%; text-align: center; color: #999; padding: 40px 10px 100px; } .activity-list .empty-bookmarked-section .bookmark-icon { font-size: 200%; padding: 10px; } .featured-activities .list-pagination { display: none; } .account-info { text-align: center; } @media screen and (max-width: 920px) { .activity-list .list-pagination .activity-results-description { display: block; position: relative; text-align: center; } } @media screen and (max-width: 500px) { .activity-list.custom .header-container { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .activity-list.custom .header-container .section-header { padding-bottom: 5px; } } /* src/js/teacher-spa/activity-ribbon.styl */ .activity-ribbon-container { width: 100px; height: 100px; overflow: hidden; font-size: 80%; } .activity-ribbon-container i { font-size: 70%; } .activity-ribbon-container::before, .activity-ribbon-container::after { position: absolute; z-index: -1; content: ''; display: block; border-top-color: transparent; border-left-color: transparent; } .activity-ribbon-container::before { top: 0; right: 27px; } .activity-ribbon-container::after { bottom: 27px; left: 0; } .activity-ribbon-container .activity-ribbon { position: absolute; top: 15px; right: 15px; width: 115px; padding: 5px 0; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2); box-shadow: 0 1px 1px rgba(0,0,0,0.2); color: #fff; text-align: center; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); letter-spacing: 0.03em; line-height: 1.2; } .activity-ribbon-container .activity-ribbon.private-ribbon { background-color: #15b097; } .activity-ribbon-container .activity-ribbon.unreleased-ribbon { background-color: #15b097; } .activity-ribbon-container .activity-ribbon.curriculum-preview-ribbon { background-color: #666; } .activity-ribbon-container .activity-ribbon.curriculum-tryit-ribbon { background-color: #3278c8; } .activity-ribbon-container.curriculum-preview-ribbon-container::before { top: 0; right: 15px; } .activity-ribbon-container.curriculum-preview-ribbon-container::after { bottom: 15px; left: 0; } .activity-ribbon-container.curriculum-preview-ribbon-container .activity-ribbon { position: absolute; top: 20px; right: -2px; width: 135px; } .activity-thumb-container { z-index: 1; } .activity-thumb-container .activity-ribbon-container { position: absolute; top: -5px; left: -5px; } .activity-thumb-container .activity-ribbon-container.private-ribbon-container::before, .activity-thumb-container .activity-ribbon-container.private-ribbon-container::after { border: 5px solid #0f8371; } .activity-thumb-container .activity-ribbon-container.unreleased-ribbon-container::before, .activity-thumb-container .activity-ribbon-container.unreleased-ribbon-container::after { border: 5px solid #0f8371; } .activity-thumb-container .activity-ribbon-container.curriculum-preview-ribbon-container::before, .activity-thumb-container .activity-ribbon-container.curriculum-preview-ribbon-container::after { border: 5px solid #333; } .activity-thumb-container .activity-ribbon-container.curriculum-tryit-ribbon-container::before, .activity-thumb-container .activity-ribbon-container.curriculum-tryit-ribbon-container::after { border: 5px solid #35608a; } .card-contents .activity-ribbon-container { position: absolute; top: -7px; left: -7px; } .card-contents .activity-ribbon-container.private-ribbon-container::before, .card-contents .activity-ribbon-container.private-ribbon-container::after { border: 7px solid #0f8371; } .card-contents .activity-ribbon-container.unreleased-ribbon-container::before, .card-contents .activity-ribbon-container.unreleased-ribbon-container::after { border: 7px solid #0f8371; } .card-contents .activity-ribbon-container.curriculum-preview-ribbon-container::before, .card-contents .activity-ribbon-container.curriculum-preview-ribbon-container::after { border: 7px solid #666; } .card-contents .activity-ribbon-container.curriculum-tryit-ribbon-container::before, .card-contents .activity-ribbon-container.curriculum-tryit-ribbon-container::after { border: 7px solid #35608a; } /* src/js/teacher-spa/amplify-global-header.styl */ .amplify-global-header.teacher-page-top-bar { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .amplify-global-header.teacher-page-top-bar .amplify-global-header-wrapper { width: 100%; } .amplify-global-header.teacher-page-top-bar .amp-nav { position: relative; -webkit-box-shadow: none; box-shadow: none; } .amplify-global-header.teacher-page-top-bar .amp-nav .amp-nav-program .program-name { word-spacing: 0px; letter-spacing: normal; } .amplify-global-header.teacher-page-top-bar .amp-nav .amp-nav-profile-menu-logout { background-color: #f6f6f6; } .amplify-global-header.teacher-page-top-bar .amp-nav .amp-nav-profile-menu a { text-decoration: none; color: #3b3b3b; } .amplify-global-header.teacher-page-top-bar .amp-nav .amp-nav-profile-menu a:hover, .amplify-global-header.teacher-page-top-bar .amp-nav .amp-nav-profile-menu a:focus-visible { color: #9c0d63; } .amplify-global-header.teacher-page-top-bar .nav-banner.hidden { height: 55px; opacity: 1; -ms-filter: none; filter: none; top: 0; } .amplify-global-header.teacher-page-top-bar .sidebar-menu-button { z-index: 3; position: absolute; top: 3px; left: 10px; font-size: 80%; } /* src/js/teacher-spa/author-group-selection.styl */ .author-group-selection-container .author-group-selection .amplify-checkbox { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) 0; } /* src/js/teacher-spa/collections/activity-collection-tags.styl */ .activity-collection-tags { display: inline-block; font-size: 90%; margin: 2px 0; } .activity-collection-tags .collection-tag { display: inline-block; vertical-align: middle; border-radius: 10px; margin-right: 8px; text-decoration: none; color: #fff; padding: 2px 6px; max-width: 150px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .amp-styles .activity-collection-tags a { padding: 0 6px; text-decoration: none; } .amp-styles .activity-collection-tags a:hover, .amp-styles .activity-collection-tags a:focus-visible { color: initial; text-decoration: none; } .amp-styles .activity-collection-tags a.collection-tag { color: #fff; } /* src/js/teacher-spa/collections/add-to-collection/activity-collection-options.styl */ .activity-card-container { position: relative; } .activity-card-container .activity-actions-dropdown-container { position: absolute; top: -10px; right: 5px; } .activity-card-container .activity-actions-dropdown-container .dropdown-choice { padding: 0 7px; } /* src/js/teacher-spa/collections/add-to-collection/add-to-collection-button.styl */ .amp-styles .add-to-collection-button.btn { padding: 0 0.5em; } .amp-styles .add-to-collection-button.btn i { color: #676767; margin: 0; } .add-to-collection-dropdown-container { position: relative; display: inline-block; } .add-to-collection-dropdown-container.dark-mode.add-to-collection-dropdown-container.dark-mode.add-to-collection-dropdown-container.dark-mode i { color: #fff; } .add-to-collection-dropdown-container.dark-mode.add-to-collection-dropdown-container.dark-mode.add-to-collection-dropdown-container.dark-mode .add-to-collection-menu i { color: #3b3b3b; } .add-to-collection-dropdown-container.dark-mode.add-to-collection-dropdown-container.dark-mode.add-to-collection-dropdown-container.dark-mode .icon-v2-messaging-success { border-radius: 100%; border: 1px solid #fff; } .add-to-collection-dropdown-container .add-to-collection-button { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } /* src/js/teacher-spa/collections/add-to-collection/add-to-collection-menu.styl */ .add-to-collection-menu { z-index: 31; background: #fff; border: 1px solid #bdbdbd; border-radius: 5px; color: #3b3b3b; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2); box-shadow: 0 5px 10px rgba(0,0,0,0.2); position: absolute; top: 40px; right: 0; min-width: 230px; line-height: initial; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -moz-user-select: -moz-none; height: 270px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .add-to-collection-menu:after { content: ""; position: absolute; top: -9px; right: 10px; border-width: 9px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .add-to-collection-menu:before { content: ""; position: absolute; top: -10px; right: 9px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .add-to-collection-menu .add-to-collection-menu-header { border-bottom: 1px solid #bdbdbd; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 15px; font-size: 90%; line-height: 20px; } .add-to-collection-menu .add-to-collection-menu-header i { margin-right: 6px; } .add-to-collection-menu .add-to-collection-menu-header i.pillow-icon-collections { font-size: 140%; } .add-to-collection-menu .add-to-collection-menu-header i.pillow-icon-remove { font-size: 90%; } .add-to-collection-menu .add-to-collection-menu-header .header-action { max-width: 200px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .add-to-collection-menu .add-to-collection-menu-header.breadcrumb-back i { font-size: 90%; } .add-to-collection-menu .add-to-collection-menu-header.dcg-hovered .header-action, .add-to-collection-menu .add-to-collection-menu-header.dcg-depressed .header-action { text-decoration: underline; } .add-to-collection-menu .add-to-collection-menu-header.dcg-hovered i, .add-to-collection-menu .add-to-collection-menu-header.dcg-hovered .header-action { color: #080808; } .add-to-collection-menu .add-to-collection-menu-header.dcg-hovered i, .add-to-collection-menu .add-to-collection-menu-header.dcg-hovered .header-action { color: #080808; } .add-to-collection-menu .add-to-collection-menu-content { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 1; -ms-flex: 1 1; flex: 1 1; overflow-x: hidden; } .add-to-collection-menu .translate-none { -webkit-transition: -webkit-transform 0.4s ease, opacity 0.4s; -moz-transition: -moz-transform 0.4s ease, opacity 0.4s; -o-transition: -o-transform 0.4s ease, opacity 0.4s; -ms-transition: -ms-transform 0.4s ease, opacity 0.4s; transition: transform 0.4s ease, opacity 0.4s; } .add-to-collection-menu .translate-right { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .add-to-collection-menu .translate-left { -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .add-to-collection-menu .empty-collections { margin-bottom: 15px; font-style: italic; color: #3b3b3b; font-size: 90%; padding: 0 15px; } .add-to-collection-menu .empty-collections img { display: block; width: 160px; margin: 15px auto 10px; } .add-to-collection-menu .empty-collections span { display: inline-block; text-align: center; } .add-to-collection-menu .available-collections { padding-top: 10px; overflow-y: auto; padding: 10px 15px 15px; } .add-to-collection-menu .available-collections .collection-option-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .add-to-collection-menu .available-collections .collection-option-container.disabled { cursor: default; } .add-to-collection-menu .available-collections .collection-option { margin: 4px 2px; vertical-align: middle; display: inline-block; border-radius: 10px; color: rgba(255,255,255,0.9); font-size: 80%; padding: 3px 7px; max-width: 185px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .add-to-collection-menu .available-collections .collection-option i.pillow-icon-error { font-size: 80%; margin-right: 5px; } .add-to-collection-menu .saving-animation { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .add-to-collection-menu .saving-animation .pillow-spinner { margin-right: 10px; } .add-to-collection-menu .menu-title { text-transform: uppercase; color: #3b3b3b; font-size: 95%; } .add-to-collection-menu .amplify-toast { font-size: 0.85rem; line-height: normal; width: calc(230px - calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2)); margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .add-to-collection-menu .amplify-toast .toast-body { padding-right: 0 !important; } /* src/js/teacher-spa/collections/book-collection-card.styl */ .amp-styles .book-collection-container a { text-decoration: none; } .amp-styles .book-collection-container a:hover, .amp-styles .book-collection-container a:focus-visible, .amp-styles .book-collection-container a:active { text-decoration: none; } .book-collection-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; margin: -7.5px; margin-bottom: 15px; } .book-collection-container .invisible-collection-card { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; min-width: 380px; margin-left: 15px; } .book-collection-card { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; min-width: 380px; border-radius: 0.1875em; margin: 7.5px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 80px; text-decoration: none; position: relative; background-size: auto 100%; background-position: left top; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); } .book-collection-card .background-images { border-radius: 0.1875em; overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 0; } .book-collection-card .background-images .left-image, .book-collection-card .background-images .right-image { background-size: auto 100%; height: 100%; width: 250px; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; -o-transition: -o-transform 0.3s; -ms-transition: -ms-transform 0.3s; transition: transform 0.3s; } .book-collection-card .background-images .left-image { position: absolute; top: 0; left: 0; bottom: 0; } .book-collection-card .background-images .right-image { position: absolute; top: 0; right: 0; bottom: 0; background-position: top right; } .book-collection-card .book-collection-title { font-family: "Amplify", serif; font-size: 35px; font-weight: 400; z-index: 1; padding-top: 10px; } .book-collection-card.dcg-hovered .left-image, .book-collection-card.dcg-depressed .left-image { -webkit-transform: translateX(-3px); -moz-transform: translateX(-3px); -o-transform: translateX(-3px); -ms-transform: translateX(-3px); transform: translateX(-3px); } .book-collection-card.dcg-hovered .right-image, .book-collection-card.dcg-depressed .right-image { -webkit-transform: translateX(3px); -moz-transform: translateX(3px); -o-transform: translateX(3px); -ms-transform: translateX(3px); transform: translateX(3px); } .book-collection-card.grade-6 { background-color: #ffc0d3; background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-6-background-8ef5ccf43f7847ecfbb1e4496a41ce9c8bb2622d-a.jpg"); color: #632235; } .book-collection-card.grade-6 .left-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-6-left-ae5b5e2cb4c7a5016fe0c3e4dd80b53d5eb01fd7-a.png"); } .book-collection-card.grade-6 .right-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-6-right-ba1d3a28fa6ad95980ebd4988283122f4edc4900-a.png"); } .book-collection-card.grade-6.dcg-hovered .book-collection-title, .book-collection-card.grade-6.dcg-depressed .book-collection-title { color: #3d1521; } .book-collection-card.grade-7 { background-color: #deb8fd; background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-7-background-bbe15a0be886c2010ca6e7da4e8c471686334ba2-a.jpg"); color: #46226e; } .book-collection-card.grade-7 .book-collection-title { text-shadow: 0 0 5px #deb9fe; } .book-collection-card.grade-7 .left-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-7-left-c4c55d86a2e8da058f217b0e3bd0613c655c712d-a.png"); } .book-collection-card.grade-7 .right-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-7-right-b4dfe4db0f3af245fc4c7f243d3d3184154977ef-a.png"); } .book-collection-card.grade-7.dcg-hovered .book-collection-title, .book-collection-card.grade-7.dcg-depressed .book-collection-title { color: #2d1646; } .book-collection-card.grade-8 { background-color: #ace2eb; background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-8-background-2d3ecd6ff289a580de479a05d5d0bb42300a60c8-a.jpg"); color: #004054; } .book-collection-card.grade-8 .left-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-8-left-bcabfc7c537305b4b5e29948477d2af3830f50be-a.png"); } .book-collection-card.grade-8 .right-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-8-right-67123560a783f31f8ee05f49a2d069b9f4a84b4f-a.png"); } .book-collection-card.grade-8.dcg-hovered .book-collection-title, .book-collection-card.grade-8.dcg-depressed .book-collection-title { color: #002f3d; } .book-collection-card.grade-A1 { background-color: #fc8ec8; background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-A1-bg-36dfc8fede46ed1a586877073ceab6b50f0c77c4-a.jpg"); color: #761959; } .book-collection-card.grade-A1 .left-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-A1-left-image-704eb6f7645be01a17af2bff598184a1d631da84-a.png"); } .book-collection-card.grade-A1 .right-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-A1-right-image-7ee5e3a73d86d31dda98b7cf14e8d251b2e68a49-a.png"); } .book-collection-card.grade-A1.dcg-hovered .book-collection-title, .book-collection-card.grade-A1.dcg-depressed .book-collection-title { color: #4c1039; } @media screen and (max-width: 1200px) { .book-collection-container .book-collection-card .background-images .left-image { background-position: top right; } .book-collection-container .book-collection-card .background-images .right-image { background-position: top left; } } @media screen and (max-width: 1050px) and (min-width: 600px) { .book-collection-container .book-collection-card { background-size: cover; } } /* src/js/teacher-spa/collections/book-collection-colors.styl */ .book-collections-bg-yellow { background-color: #e6c652; } .book-collections-bg-blue { background-color: #67a6e5; } .book-collections-bg-purple { background-color: #ad80e0; } .book-collections-bg-red { background-color: #e56776; } .book-collections-bg-green { background-color: #6cd8b2; } .book-collections-bg-orange { background-color: #e6865b; } .book-collections-bg-pink { background-color: #e673c6; } .book-collections-bg-teal { background-color: #6cd9d3; } .amp-styles a.book-collections-bg-yellow { background-color: #e6c652; } .amp-styles a.book-collections-bg-blue { background-color: #67a6e5; } .amp-styles a.book-collections-bg-purple { background-color: #ad80e0; } .amp-styles a.book-collections-bg-red { background-color: #e56776; } .amp-styles a.book-collections-bg-green { background-color: #6cd8b2; } .amp-styles a.book-collections-bg-orange { background-color: #e6865b; } .amp-styles a.book-collections-bg-pink { background-color: #e673c6; } .amp-styles a.book-collections-bg-teal { background-color: #6cd9d3; } .activity-collection-tags .collection-tag.book-collections-bg-yellow, .activity-collection-tags .collection-tag.book-collections-bg-blue, .activity-collection-tags .collection-tag.book-collections-bg-purple, .activity-collection-tags .collection-tag.book-collections-bg-red, .activity-collection-tags .collection-tag.book-collections-bg-green, .activity-collection-tags .collection-tag.book-collections-bg-orange, .activity-collection-tags .collection-tag.book-collections-bg-pink, .activity-collection-tags .collection-tag.book-collections-bg-teal { color: #000; } .activity-details-container .book-collections-bg-yellow.collection-tag.dcg-hovered, .collection-option-container .book-collections-bg-yellow.in-collection.dcg-hovered { background-color: #a68304; } .activity-details-container .book-collections-bg-yellow.collection-tag.dcg-depressed, .collection-option-container .book-collections-bg-yellow.in-collection.dcg-depressed { background-color: #7c641e; } .activity-details-container .book-collections-bg-blue.collection-tag.dcg-hovered, .collection-option-container .book-collections-bg-blue.in-collection.dcg-hovered { background-color: #2e78c2; } .activity-details-container .book-collections-bg-blue.collection-tag.dcg-depressed, .collection-option-container .book-collections-bg-blue.in-collection.dcg-depressed { background-color: #00407f; } .activity-details-container .book-collections-bg-purple.collection-tag.dcg-hovered, .collection-option-container .book-collections-bg-purple.in-collection.dcg-hovered { background-color: #752fc5; } .activity-details-container .book-collections-bg-purple.collection-tag.dcg-depressed, .collection-option-container .book-collections-bg-purple.in-collection.dcg-depressed { background-color: #3c0080; } .activity-details-container .book-collections-bg-red.collection-tag.dcg-hovered, .collection-option-container .book-collections-bg-red.in-collection.dcg-hovered { background-color: #cb384a; } .activity-details-container .book-collections-bg-red.collection-tag.dcg-depressed, .collection-option-container .book-collections-bg-red.in-collection.dcg-depressed { background-color: #7f000f; } .activity-details-container .book-collections-bg-green.collection-tag.dcg-hovered, .collection-option-container .book-collections-bg-green.in-collection.dcg-hovered { background-color: #018859; } .activity-details-container .book-collections-bg-green.collection-tag.dcg-depressed, .collection-option-container .book-collections-bg-green.in-collection.dcg-depressed { background-color: #006743; } .activity-details-container .book-collections-bg-orange.collection-tag.dcg-hovered, .collection-option-container .book-collections-bg-orange.in-collection.dcg-hovered { background-color: #c94e17; } .activity-details-container .book-collections-bg-orange.collection-tag.dcg-depressed, .collection-option-container .book-collections-bg-orange.in-collection.dcg-depressed { background-color: #762e10; } .activity-details-container .book-collections-bg-pink.collection-tag.dcg-hovered, .collection-option-container .book-collections-bg-pink.in-collection.dcg-hovered { background-color: #b2258b; } .activity-details-container .book-collections-bg-pink.collection-tag.dcg-depressed, .collection-option-container .book-collections-bg-pink.in-collection.dcg-depressed { background-color: #80005c; } .activity-details-container .book-collections-bg-teal.collection-tag.dcg-hovered, .collection-option-container .book-collections-bg-teal.in-collection.dcg-hovered { background-color: #00847d; } .activity-details-container .book-collections-bg-teal.collection-tag.dcg-depressed, .collection-option-container .book-collections-bg-teal.in-collection.dcg-depressed { background-color: #006763; } .collection-option-container .book-collections-bg-yellow:not(.in-collection) { color: #67a6e5; -webkit-box-shadow: 0 0 0 1px #e6c652; box-shadow: 0 0 0 1px #e6c652; background: #fff; } .collection-option-container .book-collections-bg-yellow:not(.in-collection).dcg-hovered { -webkit-box-shadow: 0 0 0 2px #e6c652; box-shadow: 0 0 0 2px #e6c652; } .collection-option-container .book-collections-bg-yellow:not(.in-collection).dcg-depressed { background: rgba(230,198,82,0.2); } .collection-option-container .book-collections-bg-blue:not(.in-collection) { color: #67a6e5; -webkit-box-shadow: 0 0 0 1px #67a6e5; box-shadow: 0 0 0 1px #67a6e5; background: #fff; } .collection-option-container .book-collections-bg-blue:not(.in-collection).dcg-hovered { -webkit-box-shadow: 0 0 0 2px #67a6e5; box-shadow: 0 0 0 2px #67a6e5; } .collection-option-container .book-collections-bg-blue:not(.in-collection).dcg-depressed { background: rgba(103,166,229,0.2); } .collection-option-container .book-collections-bg-purple:not(.in-collection) { color: #ad80e0; -webkit-box-shadow: 0 0 0 1px #ad80e0; box-shadow: 0 0 0 1px #ad80e0; background: #fff; } .collection-option-container .book-collections-bg-purple:not(.in-collection).dcg-hovered { -webkit-box-shadow: 0 0 0 2px #ad80e0; box-shadow: 0 0 0 2px #ad80e0; } .collection-option-container .book-collections-bg-purple:not(.in-collection).dcg-depressed { background: rgba(173,128,224,0.2); } .collection-option-container .book-collections-bg-red:not(.in-collection) { color: #e56776; -webkit-box-shadow: 0 0 0 1px #e56776; box-shadow: 0 0 0 1px #e56776; background: #fff; } .collection-option-container .book-collections-bg-red:not(.in-collection).dcg-hovered { -webkit-box-shadow: 0 0 0 2px #e56776; box-shadow: 0 0 0 2px #e56776; } .collection-option-container .book-collections-bg-red:not(.in-collection).dcg-depressed { background: rgba(229,103,118,0.2); } .collection-option-container .book-collections-bg-green:not(.in-collection) { color: #6cd8b2; -webkit-box-shadow: 0 0 0 1px #6cd8b2; box-shadow: 0 0 0 1px #6cd8b2; background: #fff; } .collection-option-container .book-collections-bg-green:not(.in-collection).dcg-hovered { -webkit-box-shadow: 0 0 0 2px #6cd8b2; box-shadow: 0 0 0 2px #6cd8b2; } .collection-option-container .book-collections-bg-green:not(.in-collection).dcg-depressed { background: rgba(108,216,178,0.2); } .collection-option-container .book-collections-bg-orange:not(.in-collection) { color: #e6865b; -webkit-box-shadow: 0 0 0 1px #e6865b; box-shadow: 0 0 0 1px #e6865b; background: #fff; } .collection-option-container .book-collections-bg-orange:not(.in-collection).dcg-hovered { -webkit-box-shadow: 0 0 0 2px #e6865b; box-shadow: 0 0 0 2px #e6865b; } .collection-option-container .book-collections-bg-orange:not(.in-collection).dcg-depressed { background: rgba(230,134,91,0.2); } .collection-option-container .book-collections-bg-pink:not(.in-collection) { color: #e673c6; -webkit-box-shadow: 0 0 0 1px #e673c6; box-shadow: 0 0 0 1px #e673c6; background: #fff; } .collection-option-container .book-collections-bg-pink:not(.in-collection).dcg-hovered { -webkit-box-shadow: 0 0 0 2px #e673c6; box-shadow: 0 0 0 2px #e673c6; } .collection-option-container .book-collections-bg-pink:not(.in-collection).dcg-depressed { background: rgba(230,115,198,0.2); } .collection-option-container .book-collections-bg-teal:not(.in-collection) { color: #6cd9d3; -webkit-box-shadow: 0 0 0 1px #6cd9d3; box-shadow: 0 0 0 1px #6cd9d3; background: #fff; } .collection-option-container .book-collections-bg-teal:not(.in-collection).dcg-hovered { -webkit-box-shadow: 0 0 0 2px #6cd9d3; box-shadow: 0 0 0 2px #6cd9d3; } .collection-option-container .book-collections-bg-teal:not(.in-collection).dcg-depressed { background: rgba(108,217,211,0.2); } .collection-view-page .collection-description-container .fade-out.book-collections-bg-yellow { background: -webkit-linear-gradient(rgba(230,198,82,0) 0%, rgba(230,198,82,0.9) 50%, #e6c652 100%); background: -moz-linear-gradient(rgba(230,198,82,0) 0%, rgba(230,198,82,0.9) 50%, #e6c652 100%); background: -o-linear-gradient(rgba(230,198,82,0) 0%, rgba(230,198,82,0.9) 50%, #e6c652 100%); background: -ms-linear-gradient(rgba(230,198,82,0) 0%, rgba(230,198,82,0.9) 50%, #e6c652 100%); background: linear-gradient(rgba(230,198,82,0) 0%, rgba(230,198,82,0.9) 50%, #e6c652 100%); } .collection-view-page .collection-description-container .fade-out.book-collections-bg-blue { background: -webkit-linear-gradient(rgba(103,166,229,0) 0%, rgba(103,166,229,0.9) 50%, #67a6e5 100%); background: -moz-linear-gradient(rgba(103,166,229,0) 0%, rgba(103,166,229,0.9) 50%, #67a6e5 100%); background: -o-linear-gradient(rgba(103,166,229,0) 0%, rgba(103,166,229,0.9) 50%, #67a6e5 100%); background: -ms-linear-gradient(rgba(103,166,229,0) 0%, rgba(103,166,229,0.9) 50%, #67a6e5 100%); background: linear-gradient(rgba(103,166,229,0) 0%, rgba(103,166,229,0.9) 50%, #67a6e5 100%); } .collection-view-page .collection-description-container .fade-out.book-collections-bg-purple { background: -webkit-linear-gradient(rgba(173,128,224,0) 0%, rgba(173,128,224,0.9) 50%, #ad80e0 100%); background: -moz-linear-gradient(rgba(173,128,224,0) 0%, rgba(173,128,224,0.9) 50%, #ad80e0 100%); background: -o-linear-gradient(rgba(173,128,224,0) 0%, rgba(173,128,224,0.9) 50%, #ad80e0 100%); background: -ms-linear-gradient(rgba(173,128,224,0) 0%, rgba(173,128,224,0.9) 50%, #ad80e0 100%); background: linear-gradient(rgba(173,128,224,0) 0%, rgba(173,128,224,0.9) 50%, #ad80e0 100%); } .collection-view-page .collection-description-container .fade-out.book-collections-bg-red { background: -webkit-linear-gradient(rgba(229,103,118,0) 0%, rgba(229,103,118,0.9) 50%, #e56776 100%); background: -moz-linear-gradient(rgba(229,103,118,0) 0%, rgba(229,103,118,0.9) 50%, #e56776 100%); background: -o-linear-gradient(rgba(229,103,118,0) 0%, rgba(229,103,118,0.9) 50%, #e56776 100%); background: -ms-linear-gradient(rgba(229,103,118,0) 0%, rgba(229,103,118,0.9) 50%, #e56776 100%); background: linear-gradient(rgba(229,103,118,0) 0%, rgba(229,103,118,0.9) 50%, #e56776 100%); } .collection-view-page .collection-description-container .fade-out.book-collections-bg-green { background: -webkit-linear-gradient(rgba(108,216,178,0) 0%, rgba(108,216,178,0.9) 50%, #6cd8b2 100%); background: -moz-linear-gradient(rgba(108,216,178,0) 0%, rgba(108,216,178,0.9) 50%, #6cd8b2 100%); background: -o-linear-gradient(rgba(108,216,178,0) 0%, rgba(108,216,178,0.9) 50%, #6cd8b2 100%); background: -ms-linear-gradient(rgba(108,216,178,0) 0%, rgba(108,216,178,0.9) 50%, #6cd8b2 100%); background: linear-gradient(rgba(108,216,178,0) 0%, rgba(108,216,178,0.9) 50%, #6cd8b2 100%); } .collection-view-page .collection-description-container .fade-out.book-collections-bg-orange { background: -webkit-linear-gradient(rgba(230,134,91,0) 0%, rgba(230,134,91,0.9) 50%, #e6865b 100%); background: -moz-linear-gradient(rgba(230,134,91,0) 0%, rgba(230,134,91,0.9) 50%, #e6865b 100%); background: -o-linear-gradient(rgba(230,134,91,0) 0%, rgba(230,134,91,0.9) 50%, #e6865b 100%); background: -ms-linear-gradient(rgba(230,134,91,0) 0%, rgba(230,134,91,0.9) 50%, #e6865b 100%); background: linear-gradient(rgba(230,134,91,0) 0%, rgba(230,134,91,0.9) 50%, #e6865b 100%); } .collection-view-page .collection-description-container .fade-out.book-collections-bg-pink { background: -webkit-linear-gradient(rgba(230,115,198,0) 0%, rgba(230,115,198,0.9) 50%, #e673c6 100%); background: -moz-linear-gradient(rgba(230,115,198,0) 0%, rgba(230,115,198,0.9) 50%, #e673c6 100%); background: -o-linear-gradient(rgba(230,115,198,0) 0%, rgba(230,115,198,0.9) 50%, #e673c6 100%); background: -ms-linear-gradient(rgba(230,115,198,0) 0%, rgba(230,115,198,0.9) 50%, #e673c6 100%); background: linear-gradient(rgba(230,115,198,0) 0%, rgba(230,115,198,0.9) 50%, #e673c6 100%); } .collection-view-page .collection-description-container .fade-out.book-collections-bg-teal { background: -webkit-linear-gradient(rgba(108,217,211,0) 0%, rgba(108,217,211,0.9) 50%, #6cd9d3 100%); background: -moz-linear-gradient(rgba(108,217,211,0) 0%, rgba(108,217,211,0.9) 50%, #6cd9d3 100%); background: -o-linear-gradient(rgba(108,217,211,0) 0%, rgba(108,217,211,0.9) 50%, #6cd9d3 100%); background: -ms-linear-gradient(rgba(108,217,211,0) 0%, rgba(108,217,211,0.9) 50%, #6cd9d3 100%); background: linear-gradient(rgba(108,217,211,0) 0%, rgba(108,217,211,0.9) 50%, #6cd9d3 100%); } /* src/js/teacher-spa/collections/collaboration-modal.styl */ .collection-collaborate-container { padding: 20px; } .collection-collaborate-container .collaborate-header { color: #3b3b3b; font-size: 160%; position: relative; } .collection-collaborate-container .collaborate-description { color: #666; margin: 10px 0 20px; } .collection-collaborate-container .collaborate-description .blue-link { margin-left: 5px; } .collection-collaborate-container .dividing-line { height: 1px; background-color: #bdbdbd; width: 100%; } .collection-collaborate-container .blue-outline { width: 300px; } .collection-collaborate-container .owner-tag { float: right; color: #999; } .collection-collaborate-container .add-collaborator-title { color: #3b3b3b; margin-top: 20px; font-size: 110%; } .collection-collaborate-container .add-email-container { margin: 5px 0; } /* src/js/teacher-spa/collections/collection-actions-menu.styl */ .collection-actions-menu .dot-dot-dropdown-container .dropdown-container { top: calc(100% + 10px); } .collection-actions-menu .dot-dot-dropdown-container .pinned-collection-action { min-width: 195px; } .collection-actions-menu .dot-dot-dropdown-container .collection-actions-dropdown.dcg-shared-options-dropdown:after { content: ""; position: absolute; top: -9px; right: 10px; border-width: 9px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .collection-actions-menu .dot-dot-dropdown-container .collection-actions-dropdown.dcg-shared-options-dropdown:before { content: ""; position: absolute; top: -10px; right: 9px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .collection-actions-menu .dot-dot-dropdown-container .delete-collection { color: #db2e00; } .collection-actions-menu .dot-dot-dropdown-container .edit-collection { color: #3278c8; } .collection-actions-menu .dot-dot-dropdown-container .pinned-collection-error { text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; white-space: normal; text-decoration: none; } .share-collection-modal .share-collection-modal-contents .collection-header { padding-bottom: 20px; position: relative; } .share-collection-modal .share-collection-modal-contents input { font-size: 100%; padding: 10px; border-radius: 0.1875em; } .share-collection-modal .share-collection-modal-contents .close-btn { position: absolute; left: calc(100% - 75px); top: 20px; z-index: 1; } .share-collection-modal .share-collection-modal-contents .private-activity-warning { margin-top: 10px; color: #666; } .share-collection-modal .share-collection-modal-contents .private-activity-warning i { color: #fa824c; margin-right: 5px; font-size: 80%; } /* src/js/teacher-spa/collections/collection-bullet.styl */ .collection-bullet { height: 30px; width: 30px; border-radius: 50%; display: inline-block; margin-right: 5px; } /* src/js/teacher-spa/collections/collection-bynder-header.styl */ .header-image-container { position: relative; margin-bottom: 10px; } .header-image-container .header-image { max-width: 100%; } .header-image-container .remove-image-button { position: absolute; top: 0; right: 0; width: 36px; height: 36px; line-height: 36px; font-size: 13px; font-size: 20px; text-align: center; cursor: pointer; z-index: 2; } .header-image-container .remove-image-button .remove-image { -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; color: #bbb; text-shadow: calc(1px * -1) calc(1px * -1) 0 #fff, calc(1px * -1) 1px 0 #fff, 1px calc(1px * -1) 0 #fff, 1px 1px 0 #fff, 0 calc(1px * -1) 0 #fff, 0 1px 0 #fff, 1px 0 0 #fff, calc(1px * -1) 0 0 #fff; } .header-image-container .remove-image-button .remove-image.dcg-hovered { color: #db2e00; } .header-image-container .remove-image-button .remove-image.dcg-depressed { color: #831c00; } .header-image-container .collection-header-alt-wrapper { margin-top: 10px; } /* src/js/teacher-spa/collections/collection-card.styl */ .amp-styles .collection-card.group-activity-card { background-color: #fff; } .collection-card { position: relative; overflow: hidden; font-size: 95%; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); color: #3b3b3b; text-decoration: none; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); border: 1px solid transparent; -webkit-transition: border-color 0.2s linear; -moz-transition: border-color 0.2s linear; -o-transition: border-color 0.2s linear; -ms-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .collection-card.dcg-hovered { border-color: #9c0d63; } .collection-card.dcg-depressed { border-color: #5e083b; background: #bdbdbd; } .collection-card .description-content { margin-left: 15px; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; overflow: hidden; } .collection-card.is-unreleased { font-style: italic; } .collection-card.is-unreleased.book-collection .card-contents { min-height: 40px; } .collection-card.is-unreleased.unclickable { pointer-events: none; } .collection-card.is-unreleased .collection-title { opacity: 0.85; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; filter: alpha(opacity=85); } .collection-card.is-unreleased .collection-thumb { display: none; } .collection-card .card-contents { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .collection-card.book-collection .card-contents { -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; min-height: 65px; } .collection-card .collection-thumb { -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; background: transparent; border: none; width: 130px; } .collection-card .preview-card .collection-thumb { filter: grayscale(1); } .collection-card .collection-title { padding-right: 20px; font-size: 135%; } .collection-card .collection-title .h4 { margin-top: 0; margin-bottom: 0; } .collection-card .author-container { display: inline-block; } .collection-card .author-container .author { line-height: 1.3em; vertical-align: center; display: inline-block; margin-right: 10px; border-right: 1px solid #bdbdbd; padding-right: 10px; } .collection-card .collection-card-contents-num { display: inline-block; margin: 5px 0; } .collection-card .color-ribbon { position: absolute; top: -1px; left: -1px; height: calc(100% + 2px); border-radius: 0.1875em 0 0 0.1875em; width: 15px; } .collection-card .private-collection-icon, .collection-card .private-activity-warning, .collection-card .pinned-collection-icon { display: inline-block; } .collection-card .private-collection-icon i, .collection-card .private-activity-warning i, .collection-card .pinned-collection-icon i { font-size: 75%; } .collection-card .private-activity-warning { cursor: pointer; margin-left: 10px; color: #fa824c; } .collection-card .private-activity-warning.dcg-hovered { color: #e07444; } .collection-card .private-collection-icon i, .collection-card .pinned-collection-icon i { margin-left: 7px; } /* src/js/teacher-spa/collections/collection-color-picker.styl */ .collection-color-picker { position: relative; } .collection-color-picker .color-bullet-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin-right: 10px; } .collection-color-picker .color-bullet-container .icon-v2-caret-down { color: #a0a0a0; position: relative; top: -3px; } .collection-color-picker .color-bullet-container.dcg-hovered .icon-v2-caret-down { color: #707070; } .collection-color-picker.active .icon-v2-caret-down { color: #a0a0a0; } .collection-color-picker .color-selector { position: absolute; top: 35px; left: -10px; background: #fff; border: 1px solid #bdbdbd; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.15); box-shadow: 0 5px 10px rgba(0,0,0,0.15); border-radius: 5px; padding: 10px 5px 8px; -webkit-animation: fadeInDown 0.2s; -moz-animation: fadeInDown 0.2s; -o-animation: fadeInDown 0.2s; -ms-animation: fadeInDown 0.2s; animation: fadeInDown 0.2s; z-index: 2; white-space: nowrap; text-align: left; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; line-height: initial; } .collection-color-picker .color-selector .color-option { display: inline-block; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; cursor: pointer; margin: 0px 3px 0; } .collection-color-picker .color-selector .color-option.selected { -webkit-box-shadow: 0 0 0 2px #bdbdbd; box-shadow: 0 0 0 2px #bdbdbd; } /* src/js/teacher-spa/collections/collection-colors.styl */ .collections-bg-blue { background-color: #4f87bf; } .collections-bg-purple { background-color: #8551c1; } .collections-bg-coral { background-color: #e56776; } .collections-bg-green { background-color: #36a37c; } .collections-bg-orange { background-color: #ce754d; } .collections-bg-pink { background-color: #c651a6; } .collections-bg-teal { background-color: #3e9b96; } .collections-bg-private-placeholder { background-color: #666; } .amp-styles a.collections-bg-blue { background-color: #4f87bf; } .amp-styles a.collections-bg-purple { background-color: #8551c1; } .amp-styles a.collections-bg-coral { background-color: #e56776; } .amp-styles a.collections-bg-green { background-color: #36a37c; } .amp-styles a.collections-bg-orange { background-color: #ce754d; } .amp-styles a.collections-bg-pink { background-color: #c651a6; } .amp-styles a.collections-bg-teal { background-color: #3e9b96; } .amp-styles a.collections-bg-private-placeholder { background-color: #666; } .activity-details-container .collections-bg-blue.collection-tag.dcg-hovered, .collection-option-container .collections-bg-blue.in-collection.dcg-hovered { background-color: #4679ab; } .activity-details-container .collections-bg-blue.collection-tag.dcg-depressed, .collection-option-container .collections-bg-blue.in-collection.dcg-depressed { background-color: #3b658f; } .activity-details-container .collections-bg-purple.collection-tag.dcg-hovered, .collection-option-container .collections-bg-purple.in-collection.dcg-hovered { background-color: #7748ad; } .activity-details-container .collections-bg-purple.collection-tag.dcg-depressed, .collection-option-container .collections-bg-purple.in-collection.dcg-depressed { background-color: #633c90; } .activity-details-container .collections-bg-coral.collection-tag.dcg-hovered, .collection-option-container .collections-bg-coral.in-collection.dcg-hovered { background-color: #cd5c69; } .activity-details-container .collections-bg-coral.collection-tag.dcg-depressed, .collection-option-container .collections-bg-coral.in-collection.dcg-depressed { background-color: #ab4d58; } .activity-details-container .collections-bg-green.collection-tag.dcg-hovered, .collection-option-container .collections-bg-green.in-collection.dcg-hovered { background-color: #30926f; } .activity-details-container .collections-bg-green.collection-tag.dcg-depressed, .collection-option-container .collections-bg-green.in-collection.dcg-depressed { background-color: #287a5c; } .activity-details-container .collections-bg-orange.collection-tag.dcg-hovered, .collection-option-container .collections-bg-orange.in-collection.dcg-hovered { background-color: #b86945; } .activity-details-container .collections-bg-orange.collection-tag.dcg-depressed, .collection-option-container .collections-bg-orange.in-collection.dcg-depressed { background-color: #9a5739; } .activity-details-container .collections-bg-pink.collection-tag.dcg-hovered, .collection-option-container .collections-bg-pink.in-collection.dcg-hovered { background-color: #b14895; } .activity-details-container .collections-bg-pink.collection-tag.dcg-depressed, .collection-option-container .collections-bg-pink.in-collection.dcg-depressed { background-color: #943c7c; } .activity-details-container .collections-bg-teal.collection-tag.dcg-hovered, .collection-option-container .collections-bg-teal.in-collection.dcg-hovered { background-color: #378b86; } .activity-details-container .collections-bg-teal.collection-tag.dcg-depressed, .collection-option-container .collections-bg-teal.in-collection.dcg-depressed { background-color: #2e7470; } .collection-option-container .collections-bg-blue:not(.in-collection) { color: #4f87bf; -webkit-box-shadow: 0 0 0 1px #4f87bf; box-shadow: 0 0 0 1px #4f87bf; background: #fff; } .collection-option-container .collections-bg-blue:not(.in-collection).dcg-hovered { -webkit-box-shadow: 0 0 0 2px #4f87bf; box-shadow: 0 0 0 2px #4f87bf; } .collection-option-container .collections-bg-blue:not(.in-collection).dcg-depressed { background: rgba(79,135,191,0.2); } .collection-option-container .collections-bg-purple:not(.in-collection) { color: #8551c1; -webkit-box-shadow: 0 0 0 1px #8551c1; box-shadow: 0 0 0 1px #8551c1; background: #fff; } .collection-option-container .collections-bg-purple:not(.in-collection).dcg-hovered { -webkit-box-shadow: 0 0 0 2px #8551c1; box-shadow: 0 0 0 2px #8551c1; } .collection-option-container .collections-bg-purple:not(.in-collection).dcg-depressed { background: rgba(133,81,193,0.2); } .collection-option-container .collections-bg-coral:not(.in-collection) { color: #e56776; -webkit-box-shadow: 0 0 0 1px #e56776; box-shadow: 0 0 0 1px #e56776; background: #fff; } .collection-option-container .collections-bg-coral:not(.in-collection).dcg-hovered { -webkit-box-shadow: 0 0 0 2px #e56776; box-shadow: 0 0 0 2px #e56776; } .collection-option-container .collections-bg-coral:not(.in-collection).dcg-depressed { background: rgba(229,103,118,0.2); } .collection-option-container .collections-bg-green:not(.in-collection) { color: #36a37c; -webkit-box-shadow: 0 0 0 1px #36a37c; box-shadow: 0 0 0 1px #36a37c; background: #fff; } .collection-option-container .collections-bg-green:not(.in-collection).dcg-hovered { -webkit-box-shadow: 0 0 0 2px #36a37c; box-shadow: 0 0 0 2px #36a37c; } .collection-option-container .collections-bg-green:not(.in-collection).dcg-depressed { background: rgba(54,163,124,0.2); } .collection-option-container .collections-bg-orange:not(.in-collection) { color: #ce754d; -webkit-box-shadow: 0 0 0 1px #ce754d; box-shadow: 0 0 0 1px #ce754d; background: #fff; } .collection-option-container .collections-bg-orange:not(.in-collection).dcg-hovered { -webkit-box-shadow: 0 0 0 2px #ce754d; box-shadow: 0 0 0 2px #ce754d; } .collection-option-container .collections-bg-orange:not(.in-collection).dcg-depressed { background: rgba(206,117,77,0.2); } .collection-option-container .collections-bg-pink:not(.in-collection) { color: #c651a6; -webkit-box-shadow: 0 0 0 1px #c651a6; box-shadow: 0 0 0 1px #c651a6; background: #fff; } .collection-option-container .collections-bg-pink:not(.in-collection).dcg-hovered { -webkit-box-shadow: 0 0 0 2px #c651a6; box-shadow: 0 0 0 2px #c651a6; } .collection-option-container .collections-bg-pink:not(.in-collection).dcg-depressed { background: rgba(198,81,166,0.2); } .collection-option-container .collections-bg-teal:not(.in-collection) { color: #3e9b96; -webkit-box-shadow: 0 0 0 1px #3e9b96; box-shadow: 0 0 0 1px #3e9b96; background: #fff; } .collection-option-container .collections-bg-teal:not(.in-collection).dcg-hovered { -webkit-box-shadow: 0 0 0 2px #3e9b96; box-shadow: 0 0 0 2px #3e9b96; } .collection-option-container .collections-bg-teal:not(.in-collection).dcg-depressed { background: rgba(62,155,150,0.2); } .collection-view-page .collection-description-container .fade-out.collections-bg-blue { background: -webkit-linear-gradient(rgba(79,135,191,0) 0%, rgba(79,135,191,0.9) 50%, #4f87bf 100%); background: -moz-linear-gradient(rgba(79,135,191,0) 0%, rgba(79,135,191,0.9) 50%, #4f87bf 100%); background: -o-linear-gradient(rgba(79,135,191,0) 0%, rgba(79,135,191,0.9) 50%, #4f87bf 100%); background: -ms-linear-gradient(rgba(79,135,191,0) 0%, rgba(79,135,191,0.9) 50%, #4f87bf 100%); background: linear-gradient(rgba(79,135,191,0) 0%, rgba(79,135,191,0.9) 50%, #4f87bf 100%); } .collection-view-page .collection-description-container .fade-out.collections-bg-purple { background: -webkit-linear-gradient(rgba(133,81,193,0) 0%, rgba(133,81,193,0.9) 50%, #8551c1 100%); background: -moz-linear-gradient(rgba(133,81,193,0) 0%, rgba(133,81,193,0.9) 50%, #8551c1 100%); background: -o-linear-gradient(rgba(133,81,193,0) 0%, rgba(133,81,193,0.9) 50%, #8551c1 100%); background: -ms-linear-gradient(rgba(133,81,193,0) 0%, rgba(133,81,193,0.9) 50%, #8551c1 100%); background: linear-gradient(rgba(133,81,193,0) 0%, rgba(133,81,193,0.9) 50%, #8551c1 100%); } .collection-view-page .collection-description-container .fade-out.collections-bg-coral { background: -webkit-linear-gradient(rgba(229,103,118,0) 0%, rgba(229,103,118,0.9) 50%, #e56776 100%); background: -moz-linear-gradient(rgba(229,103,118,0) 0%, rgba(229,103,118,0.9) 50%, #e56776 100%); background: -o-linear-gradient(rgba(229,103,118,0) 0%, rgba(229,103,118,0.9) 50%, #e56776 100%); background: -ms-linear-gradient(rgba(229,103,118,0) 0%, rgba(229,103,118,0.9) 50%, #e56776 100%); background: linear-gradient(rgba(229,103,118,0) 0%, rgba(229,103,118,0.9) 50%, #e56776 100%); } .collection-view-page .collection-description-container .fade-out.collections-bg-green { background: -webkit-linear-gradient(rgba(54,163,124,0) 0%, rgba(54,163,124,0.9) 50%, #36a37c 100%); background: -moz-linear-gradient(rgba(54,163,124,0) 0%, rgba(54,163,124,0.9) 50%, #36a37c 100%); background: -o-linear-gradient(rgba(54,163,124,0) 0%, rgba(54,163,124,0.9) 50%, #36a37c 100%); background: -ms-linear-gradient(rgba(54,163,124,0) 0%, rgba(54,163,124,0.9) 50%, #36a37c 100%); background: linear-gradient(rgba(54,163,124,0) 0%, rgba(54,163,124,0.9) 50%, #36a37c 100%); } .collection-view-page .collection-description-container .fade-out.collections-bg-orange { background: -webkit-linear-gradient(rgba(206,117,77,0) 0%, rgba(206,117,77,0.9) 50%, #ce754d 100%); background: -moz-linear-gradient(rgba(206,117,77,0) 0%, rgba(206,117,77,0.9) 50%, #ce754d 100%); background: -o-linear-gradient(rgba(206,117,77,0) 0%, rgba(206,117,77,0.9) 50%, #ce754d 100%); background: -ms-linear-gradient(rgba(206,117,77,0) 0%, rgba(206,117,77,0.9) 50%, #ce754d 100%); background: linear-gradient(rgba(206,117,77,0) 0%, rgba(206,117,77,0.9) 50%, #ce754d 100%); } .collection-view-page .collection-description-container .fade-out.collections-bg-pink { background: -webkit-linear-gradient(rgba(198,81,166,0) 0%, rgba(198,81,166,0.9) 50%, #c651a6 100%); background: -moz-linear-gradient(rgba(198,81,166,0) 0%, rgba(198,81,166,0.9) 50%, #c651a6 100%); background: -o-linear-gradient(rgba(198,81,166,0) 0%, rgba(198,81,166,0.9) 50%, #c651a6 100%); background: -ms-linear-gradient(rgba(198,81,166,0) 0%, rgba(198,81,166,0.9) 50%, #c651a6 100%); background: linear-gradient(rgba(198,81,166,0) 0%, rgba(198,81,166,0.9) 50%, #c651a6 100%); } .collection-view-page .collection-description-container .fade-out.collections-bg-teal { background: -webkit-linear-gradient(rgba(62,155,150,0) 0%, rgba(62,155,150,0.9) 50%, #3e9b96 100%); background: -moz-linear-gradient(rgba(62,155,150,0) 0%, rgba(62,155,150,0.9) 50%, #3e9b96 100%); background: -o-linear-gradient(rgba(62,155,150,0) 0%, rgba(62,155,150,0.9) 50%, #3e9b96 100%); background: -ms-linear-gradient(rgba(62,155,150,0) 0%, rgba(62,155,150,0.9) 50%, #3e9b96 100%); background: linear-gradient(rgba(62,155,150,0) 0%, rgba(62,155,150,0.9) 50%, #3e9b96 100%); } /* src/js/teacher-spa/collections/collection-modals.styl */ .collection-modal .collection-header { font-size: 160%; color: #666; } .collection-modal .collection-title { padding: 5px 5px 10px; } .collection-modal .collection-title input { display: block; width: 100%; margin-bottom: 10px; } .collection-modal .collection-title input::placeholder { color: #999; } .collection-modal .collection-title .create-alignment-submit { float: right; margin-bottom: 10px; } .collection-modal .delete-message, .collection-modal .copy-message { margin-left: 5px; line-height: 2em; } .collection-modal .delete-actions, .collection-modal .copy-actions { text-align: right; margin-top: 10px; } .collection-modal .delete-actions .cancel-link, .collection-modal .copy-actions .cancel-link { color: #666; text-decoration: underline; margin-right: 10px; padding: 5px; } .collection-modal .delete-actions .cancel-link.dcg-hovered, .collection-modal .copy-actions .cancel-link.dcg-hovered { color: #333; } .collection-modal .delete-actions .cancel-link.dcg-depressed, .collection-modal .copy-actions .cancel-link.dcg-depressed { color: #000; } /* src/js/teacher-spa/collections/collection-placeholder-card.styl */ .private-placeholder.collection-card .collection-title { font-style: italic; } .private-placeholder.collection-card .author-container { padding-top: 5px; } .private-placeholder.collection-card .author-container .author { border-right: none; } /* src/js/teacher-spa/collections/confirm-copy-modal.styl */ .copy-collection-modal-contents .confirm-copy-message { padding-top: 10px; } .copy-collection-modal-contents .copied-message, .copy-collection-modal-contents .copying-message { width: 100%; text-align: center; padding: 20px 0; font-size: 120%; color: #666; } .copy-collection-modal-contents .copying-message { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; } .copy-collection-modal-contents .copied-message .pillow-icon-check { margin-right: 5px; } .copy-collection-modal-contents .copied-message .blue-link { margin-left: 5px; } .copy-collection-modal-contents .amplify-toast { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; } .copy-collection-modal-contents .copy-actions .btn + .btn { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } /* src/js/teacher-spa/collections/confirm-delete-modal.styl */ .delete-collection-modal .delete-collection-modal-contents { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .delete-collection-modal .delete-collection-modal-contents .confirm-delete-message { padding-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .delete-collection-modal .delete-collection-modal-contents .deleted-message, .delete-collection-modal .delete-collection-modal-contents .deleting-message { width: 100%; text-align: center; padding: 20px 0; font-size: 120%; color: #666; } .delete-collection-modal .delete-collection-modal-contents .deleting-message { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; } .delete-collection-modal .delete-collection-modal-contents .deleted-message .pillow-icon-check { margin-right: 5px; } .delete-collection-modal .delete-collection-modal-contents .error-message { background-color: #f4c0b3; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #3b3b3b; border-radius: 0.1875em; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); box-shadow: 0 3px 6px rgba(0,0,0,0.08) , 0 3px 6px rgba(0,0,0,0.115); display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); margin: 30px 0 20px; line-height: 24px; } .delete-collection-modal .delete-collection-modal-contents .collection-header.h2 { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .delete-collection-modal .delete-actions .btn + .btn { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .delete-collection-modal .amplify-toast { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); } /* src/js/teacher-spa/collections/edit-metadata-modal.styl */ .edit-collection-metadata-modal.modal-cover.modal-cover.centered-modal { -webkit-box-align: unset; -moz-box-align: unset; -o-box-align: unset; -ms-flex-align: unset; -webkit-align-items: unset; align-items: unset; } .edit-collection-metadata-modal .modal-contents-wrapper { width: 500px; margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .edit-collection-metadata-modal .edit-collection-metadata-container .edit-collection-metadata-header-container { -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .edit-collection-metadata-modal .edit-collection-metadata-container .edit-collection-metadata-header-container .edit-collection-metadata-header-title { font-size: 160%; } .edit-collection-metadata-modal .edit-collection-metadata-container .edit-collection-metadata-header-container .edit-collection-metadata-header-buttons { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .edit-collection-metadata-modal .edit-collection-metadata-container .divider-line { background: #e9e9e9; height: 1px; margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * -1); } .edit-collection-metadata-modal .edit-collection-metadata-container .edit-collection-metadata-content-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .edit-collection-metadata-modal .edit-collection-metadata-container .edit-collection-metadata-content-container .grade-select-container .collection-grade-select.multiselect-checkbox-dropdown { width: 100%; } .edit-collection-metadata-modal .edit-collection-metadata-container .edit-collection-metadata-content-container .grade-select-container .collection-grade-select.multiselect-checkbox-dropdown .anchor-container .multiselect-checkbox-dropdown-anchor { width: 100%; } .edit-collection-metadata-modal .edit-collection-metadata-container .edit-collection-metadata-content-container .grade-select-container .collection-grade-select.multiselect-checkbox-dropdown .anchor-container .multiselect-checkbox-dropdown-anchor.has-selected-values .multiselect-selected-values { max-width: unset; } .edit-collection-metadata-modal .edit-collection-metadata-container .edit-collection-metadata-content-container .grade-select-container .collection-grade-select.multiselect-checkbox-dropdown .anchor-container .multiselect-checkbox-dropdown-anchor.has-selected-values .multiselect-selected-values .multiselect-selected-value { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) calc(var(--rhythm-unit-px, 12) / 16 * 1rem); background-color: #e9e9e9; border-radius: 3px; } .edit-collection-metadata-modal .edit-collection-metadata-container .edit-collection-metadata-content-container .grade-select-container .collection-grade-select.multiselect-checkbox-dropdown .anchor-container .multiselect-checkbox-dropdown-anchor.has-selected-values .multiselect-selected-values .multiselect-selected-value:not(:last-of-type):after { content: ""; } .edit-collection-metadata-modal .edit-collection-metadata-container .edit-collection-metadata-content-container .grade-select-container .collection-grade-select.multiselect-checkbox-dropdown .dropdown-container { width: 100%; } .edit-collection-metadata-modal .edit-collection-metadata-container .edit-collection-metadata-content-container .grade-select-container .collection-grade-select.multiselect-checkbox-dropdown .dropdown-container .filter-dropdown-options { -webkit-column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } /* src/js/teacher-spa/collections/list.styl */ .collections-empty-state { text-align: center; color: #666; font-size: 120%; margin: 1em 0; } .collections-empty-state img { display: block; width: 400px; max-width: 85%; margin: 0 auto 20px; } .collections-empty-state .empty-state-message { display: block; margin-bottom: 20px; } .collections-list-page .header-and-info-link { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .collections-list-page .header-and-info-link .section-header { padding-right: 5px; margin-top: 0; margin-bottom: 0; } .collections-list-page .default-collections { margin-top: 10px; } .collections-list-page .collection-card-container { position: relative; } .collections-list-page .collection-card-container .collection-actions-menu { position: absolute; top: 15px; right: 0; padding-right: 10px; } .collections-list-page .amplify-toast .toast-icon { margin-left: initial; } .collections-list-page .amplify-toast .toast-body { margin-right: auto; } /* src/js/teacher-spa/collections/new-collection-modal.styl */ .collection-modal { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); max-height: calc(100vh - (var(--rhythm-unit-px) * 4px + 92px)); } .collection-modal h1 { text-align: left; } .collection-modal .collection-edit-header { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; padding-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1.5); } .collection-modal .collection-edit-header input { font-family: "open-sans", sans-serif; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; font-size: 26px; border: none; border-color: #fff; border-bottom: 1px solid #bdbdbd; border-radius: 0; position: relative; top: -5px; padding: 0; height: auto; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .collection-modal .collection-edit-header input::-webkit-input-placeholder { color: #676767; } .collection-modal .collection-edit-header input:-moz-placeholder { color: #676767; } .collection-modal .collection-edit-header input::-moz-placeholder { color: #676767; } .collection-modal .collection-edit-header input:-ms-input-placeholder { color: #676767; } .collection-modal .collection-edit-header input:hover { margin-right: 0; } .collection-modal .collection-edit-header input::placeholder { color: #676767; font-style: italic; } .collection-modal .collection-edit-header input:hover, .collection-modal .collection-edit-header input:focus-visible { border-bottom: 1px solid #9c0d63; outline: none; -webkit-box-shadow: none; box-shadow: none; } .collection-modal .collection-edit-header input.form-control::placeholder { opacity: 1; -ms-filter: none; filter: none; } .collection-modal .collection-edit-header .collection-color-picker { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .collection-modal .input-title { font-size: 22px; margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) auto; } .collection-modal .bynder-container { margin-bottom: 10px; } .collection-modal .bynder-container .bynder-link-input-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; width: 100%; } .collection-modal .bynder-container .bynder-link-input-container .bynder-link-input { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; -ms-box-flex: 1; box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; margin-bottom: 8px; } .collection-modal .collection-sharing .private-activity-warning { margin-top: 10px; color: #666; } .collection-modal .collection-sharing .private-activity-warning i { color: #fa824c; margin-right: 5px; font-size: 80%; } .collection-modal .collection-description .ProseMirror { padding: 10px; min-height: 6em; max-height: 12em; overflow: auto; } .collection-modal .collection-description .dcg-prosemirror-editor { border: 1px solid #bdbdbd; border-radius: 0.1875em; z-index: 1; } .collection-modal .collection-description .dcg-prosemirror-editor.dcg-focused { border: 1px solid #9c0d63; border-top-right-radius: 0; } .footer-content-wrapper .save-button-container { width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } /* src/js/teacher-spa/collections/request-collection-card.styl */ .collection-card-placeholder { width: 100%; height: 110px; vertical-align: top; display: inline-block; position: relative; margin-bottom: 15px; border-radius: 7px; margin-right: 5px; -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; background: #fff; border: 2px solid #e2e2e2; } /* src/js/teacher-spa/collections/thumb.styl */ .collection-thumb { height: 100%; border-radius: 5px; position: relative; } .collection-thumb .activity-icon { border: 1px solid #bdbdbd; border-radius: 3px; overflow: hidden; position: relative; } .collection-thumb .activity-icon img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } .collection-thumb .activity-icon:nth-child(1) { z-index: 1; width: 50%; height: 0; padding-top: calc(50% - 2px); position: absolute; bottom: 50%; left: 50%; margin-bottom: -25%; margin-left: -25%; background: #67a6e5; } .collection-thumb .activity-icon:nth-child(2), .collection-thumb .activity-icon:nth-child(3) { z-index: 0; width: 40%; height: 0; padding-top: calc(40% - 2px); position: absolute; bottom: 50%; margin-bottom: -25%; } .collection-thumb .activity-icon:nth-child(2) { left: 0px; background: #a368e5; } .collection-thumb .activity-icon:nth-child(3) { right: 0px; background: #e56776; } /* src/js/teacher-spa/collections/view/adm-home-page.styl */ .adm-landing-page .page-header { position: relative; border-radius: 5px; height: 154px; margin-bottom: 15px; margin-top: 10px; color: rgba(0,0,0,0.8); background-color: #ffc0d3; background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/ADM/banner-background-77d87e3c76df1482c42673791560c2db98bd9658-a.jpg"); background-size: cover; } .adm-landing-page .page-header .background-images { border-radius: 5px; overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .adm-landing-page .page-header .background-images .left-image, .adm-landing-page .page-header .background-images .right-image { background-size: cover; height: 100%; width: 50%; } .adm-landing-page .page-header .background-images .left-image { position: absolute; top: 0; left: 0; bottom: 0; } .adm-landing-page .page-header .background-images .right-image { position: absolute; top: 0; right: 0; bottom: 0; } .adm-landing-page .page-header .left-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/ADM/banner-left-5e44ea819e7fc10968189c4e152f359ee55df439-a.png"); } .adm-landing-page .page-header .right-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/ADM/banner-right-96926393595716b2cce3b33429c85cc3704e8dea-a.png"); } @media screen and (max-width: 1050px) { .adm-landing-page .page-header .background-images .left-image, .adm-landing-page .page-header .background-images .right-image { width: 480px; } .adm-landing-page .page-header .background-images .left-image { left: -120px; } } @media screen and (max-width: 850px) { .adm-landing-page .page-header { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/ADM/banner-small-91573285527888373fb65a0290076ca06b7786ee-a.jpg"); } .adm-landing-page .page-header .background-images .left-image, .adm-landing-page .page-header .background-images .right-image { width: 325px; } .adm-landing-page .page-header .background-images .left-image { left: 0; } .adm-landing-page .page-header .background-images .left-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/ADM/banner-small-left-a9d6fcc7ccc98e9508d5e4e331a58df1f0642bba-a.png"); } .adm-landing-page .page-header .background-images .right-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/ADM/banner-small-right-c3216e8ca138df935fa8cba354522a2b2bfde61d-a.png"); } } /* src/js/teacher-spa/collections/view/collection-tags.styl */ .collection-collection-tags { display: block; } .collection-collection-tags .collection-collection-tag { display: inline-block; vertical-align: middle; color: #fff; font-size: 90%; border: 1px solid #fff; border-radius: 15px; margin-right: 8px; margin-top: 10px; text-decoration: none; padding: 2px 6px; max-width: 150px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .collection-collection-tags a.collection-collection-tag:hover, .collection-collection-tags a.collection-collection-tag:focus-visible { background: rgba(255,255,255,0.2); text-decoration: none; color: #fff; } /* src/js/teacher-spa/collections/view/v2/collection-wave.styl */ .collection-wave-wrapper { background-repeat: no-repeat; padding-bottom: 50px; } .collection-wave-wrapper .child-wrapper { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } /* src/js/teacher-spa/collections/view/view.styl */ .collection-view-page { color: #3b3b3b; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .collection-view-page .collection-loading-state .loading-collection-card { margin-bottom: 30px; height: 100px; } .collection-view-page .error-message { text-align: center; margin: 25px 0; } .collection-view-page .private-error-message { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin: 120px auto 0; position: relative; max-width: 1000px; text-align: left; } .collection-view-page .private-error-message .lock-icon-container { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; color: #676767; font-size: 180px; } .collection-view-page .private-error-message .private-notice { -webkit-box-flex: 3; -moz-box-flex: 3; -o-box-flex: 3; box-flex: 3; -webkit-flex: 3; -ms-flex: 3; flex: 3; } .collection-view-page .private-error-message .private-notice h1 { font-weight: 300; font-size: 48px; margin: 0; } .collection-view-page .empty-collection { text-align: center; } .collection-view-page .empty-collection img { display: block; width: 400px; max-width: 85%; margin: 0 auto 20px; } .collection-view-page .empty-collection .collection-adding-instructions { padding: 25px 0 12.5px; color: #3b3b3b; font-size: 110%; } .collection-view-page .empty-collection .collection-adding-instructions .fake-add-button { border: 1px solid #3b3b3b; border-radius: 3px; margin: 0 7px; padding: 0 6px 3px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .collection-view-page .collection-view-header { position: relative; } .collection-view-page .collection-view-header .collection-info-container, .collection-view-page .collection-view-header .book-collection-info-container { padding: 25px; margin-bottom: 15px; border-radius: 0.1875em; } .collection-view-page .collection-view-header .collection-info-container .collection-title h1, .collection-view-page .collection-view-header .book-collection-info-container .collection-title h1 { padding: 0 5px; font-family: "Amplify", serif; font-size: 32px; font-weight: 400; margin-top: 0; margin-bottom: 10px; } .collection-view-page .collection-view-header .collection-info-container .collection-title .private-collection-icon, .collection-view-page .collection-view-header .book-collection-info-container .collection-title .private-collection-icon { margin-left: 5px; font-size: 60%; opacity: 0.85; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; filter: alpha(opacity=85); padding: 5px; } .collection-view-page .collection-view-header .collection-info-container .private-activity-warning, .collection-view-page .collection-view-header .book-collection-info-container .private-activity-warning { cursor: pointer; font-size: 75%; margin: 0 10px; } .collection-view-page .collection-view-header .collection-info-container .private-activity-warning.dcg-hovered, .collection-view-page .collection-view-header .book-collection-info-container .private-activity-warning.dcg-hovered { color: #fff; } .collection-view-page .collection-view-header .background-images { border-radius: 5px; overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .collection-view-page .collection-view-header .background-images .left-image, .collection-view-page .collection-view-header .background-images .right-image { background-size: cover; height: 100%; width: 600px; } .collection-view-page .collection-view-header .background-images .left-image { position: absolute; top: 0; left: 0; bottom: 0; } .collection-view-page .collection-view-header .background-images .right-image { position: absolute; top: 0; right: 0; bottom: 0; } .collection-view-page .collection-view-header .book-collection-info-container { margin-top: 10px; color: #3b3b3b; position: relative; min-height: 169px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .collection-view-page .collection-view-header .book-collection-info-container.sidebar-collection .top-of-collection-info .collection-title { font-size: 20px; font-weight: 400; text-align: center; } .collection-view-page .collection-view-header .book-collection-info-container.sidebar-collection .top-of-collection-info .collection-title h1 { margin-top: 10px; font-size: 39px; } .collection-view-page .collection-view-header .book-collection-info-container.grade-6 { background-color: #ffc0d3; background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-6-background-8ef5ccf43f7847ecfbb1e4496a41ce9c8bb2622d-a.jpg"); color: #632235; } .collection-view-page .collection-view-header .book-collection-info-container.grade-6 .left-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-6-left-ae5b5e2cb4c7a5016fe0c3e4dd80b53d5eb01fd7-a.png"); } .collection-view-page .collection-view-header .book-collection-info-container.grade-6 .right-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-6-right-ba1d3a28fa6ad95980ebd4988283122f4edc4900-a.png"); } .collection-view-page .collection-view-header .book-collection-info-container.grade-6 .grade-link { border: 2px solid #952d4c; } .collection-view-page .collection-view-header .book-collection-info-container.grade-6 .grade-link:not(.pressed) { color: #952d4c; } .collection-view-page .collection-view-header .book-collection-info-container.grade-6 .grade-link.pressed { background: #c6446b; color: #fff; } .collection-view-page .collection-view-header .book-collection-info-container.grade-7 { background-color: #deb8fd; background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-7-background-bbe15a0be886c2010ca6e7da4e8c471686334ba2-a.jpg"); color: #46226e; } .collection-view-page .collection-view-header .book-collection-info-container.grade-7 .left-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-7-left-c4c55d86a2e8da058f217b0e3bd0613c655c712d-a.png"); } .collection-view-page .collection-view-header .book-collection-info-container.grade-7 .right-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-7-right-b4dfe4db0f3af245fc4c7f243d3d3184154977ef-a.png"); } .collection-view-page .collection-view-header .book-collection-info-container.grade-7 .grade-link { border: 2px solid #713cab; } .collection-view-page .collection-view-header .book-collection-info-container.grade-7 .grade-link:not(.pressed) { color: #713cab; } .collection-view-page .collection-view-header .book-collection-info-container.grade-7 .grade-link.pressed { background: #8d45dd; color: #fff; } .collection-view-page .collection-view-header .book-collection-info-container.grade-8 { background-color: #ace2eb; background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-8-background-2d3ecd6ff289a580de479a05d5d0bb42300a60c8-a.jpg"); color: #004054; } .collection-view-page .collection-view-header .book-collection-info-container.grade-8 .left-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-8-left-bcabfc7c537305b4b5e29948477d2af3830f50be-a.png"); } .collection-view-page .collection-view-header .book-collection-info-container.grade-8 .right-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-8-right-67123560a783f31f8ee05f49a2d069b9f4a84b4f-a.png"); } .collection-view-page .collection-view-header .book-collection-info-container.grade-8 .grade-link { border: 2px solid #00607f; } .collection-view-page .collection-view-header .book-collection-info-container.grade-8 .grade-link:not(.pressed) { color: #00607f; } .collection-view-page .collection-view-header .book-collection-info-container.grade-8 .grade-link.pressed { background: #0080a9; color: #fff; } .collection-view-page .collection-view-header .book-collection-info-container.grade-A1 { background-color: #fc8ec8; background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-A1-bg-36dfc8fede46ed1a586877073ceab6b50f0c77c4-a.jpg"); color: #761959; } .collection-view-page .collection-view-header .book-collection-info-container.grade-A1 .left-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-A1-left-image-704eb6f7645be01a17af2bff598184a1d631da84-a.png"); } .collection-view-page .collection-view-header .book-collection-info-container.grade-A1 .right-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-A1-right-image-7ee5e3a73d86d31dda98b7cf14e8d251b2e68a49-a.png"); } .collection-view-page .collection-view-header .book-collection-info-container.grade-A1 .grade-link { border: 2px solid #9a1d6f; } .collection-view-page .collection-view-header .book-collection-info-container.grade-A1 .grade-link:not(.pressed) { color: #9a1d6f; } .collection-view-page .collection-view-header .book-collection-info-container.grade-A1 .grade-link.pressed { background: #cd2694; color: #fff; } .collection-view-page .collection-view-header .book-collection-info-container.grade-6, .collection-view-page .collection-view-header .book-collection-info-container.grade-7, .collection-view-page .collection-view-header .book-collection-info-container.grade-8, .collection-view-page .collection-view-header .book-collection-info-container.grade-A1 { background-size: cover; background-repeat: repeat-x; } .collection-view-page .collection-view-header .book-collection-info-container .top-of-collection-info { text-align: center; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: relative; } .collection-view-page .collection-view-header .book-collection-info-container .top-of-collection-info .collection-title { width: 100%; } .collection-view-page .collection-view-header .book-collection-info-container .top-of-collection-info .collection-title h1 { padding: 0; margin-bottom: 5px; } .collection-view-page .collection-view-header .book-collection-info-container .top-of-collection-info .private-activity-warning { color: #3b3b3b; } .collection-view-page .collection-view-header .book-collection-info-container .collection-actions-container { position: absolute; top: 0; right: 0; padding: 10px; } .collection-view-page .collection-view-header .book-collection-info-container .collection-actions-container .dot-dot-dropdown-container .dot-dot-dropdown-anchor .dot-dot-container span { background: rgba(0,0,0,0.4); } .collection-view-page .collection-view-header .book-collection-info-container .collection-actions-container .anchor-container.dcg-hovered .dot-dot-dropdown-anchor .dot-dot-container span { background: rgba(0,0,0,0.6); } .collection-view-page .collection-view-header .book-collection-info-container .collection-description-container .collection-description a, .collection-view-page .collection-view-header .book-collection-info-container .collection-description-container .read-more-container .read-more-link { color: #3b3b3b; } .collection-view-page .collection-view-header .book-collection-info-container .collection-description-container .collection-description a.dcg-hovered, .collection-view-page .collection-view-header .book-collection-info-container .collection-description-container .read-more-container .read-more-link.dcg-hovered, .collection-view-page .collection-view-header .book-collection-info-container .collection-description-container .collection-description a.dcg-depressed, .collection-view-page .collection-view-header .book-collection-info-container .collection-description-container .read-more-container .read-more-link.dcg-depressed { color: #000; } .collection-view-page .collection-view-header .book-collection-info-container .grade-switcher { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; font-family: "BreeSerif", "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; } .collection-view-page .collection-view-header .book-collection-info-container .grade-switcher .grade-link { border-radius: 50%; width: 60px; height: 60px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; text-decoration: none; font-size: 170%; line-height: 53px; } .collection-view-page .collection-view-header .book-collection-info-container .grade-switcher .grade-link + .grade-link { margin-left: 15px; } .collection-view-page .collection-view-header .book-collection-info-container .grade-switcher .grade-link.pressed { color: #fff; cursor: default; } .collection-view-page .collection-view-header .book-collection-info-container .grade-switcher .grade-link:not(.pressed) { background: rgba(255,255,255,0.8); } .collection-view-page .collection-view-header .book-collection-info-container .grade-switcher .grade-link:not(.pressed).dcg-hovered { background: #fff; } .collection-view-page .collection-view-header .book-collection-info-container .grade-switcher .grade-link:not(.pressed).dcg-depressed { background: rgba(255,255,255,0.5); } .collection-view-page .collection-view-header .collection-info-container { text-align: center; color: #fff; padding: 25px; margin-bottom: 25px; border-radius: 5px; } .collection-view-page .collection-view-header .collection-info-container .collection-title h1 { display: inline-block; max-width: calc(100% - 250px); } .collection-view-page .collection-view-header .collection-info-container .collection-info .author-and-count { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .collection-view-page .collection-view-header .collection-info-container .collection-info .contents-count { margin-right: 10px; } .collection-view-page .collection-view-header .collection-info-container .collection-description-container { border-top: 1px solid rgba(255,255,255,0.5); } .collection-view-page .collection-view-header .collection-info-container .private-activity-warning { color: #fff; } .collection-view-page .collection-view-header .author { vertical-align: center; display: inline-block; margin-right: 10px; border-right: 1px solid rgba(255,255,255,0.5); padding-right: 10px; } .collection-view-page .collection-view-header .collection-actions-menu { text-align: left; margin-left: 10px; } .collection-view-page .collection-view-header .collection-actions-menu .dot-dot-dropdown-container .dot-dot-dropdown-anchor .dot-dot-container i { color: #fff; } .collection-view-page .collection-actions-container { position: absolute; top: 0; right: 0; padding: 10px; text-align: left; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .collection-view-page .add-to-my-collections, .collection-view-page .collection-actions-menu { display: inline-block; vertical-align: middle; } .collection-view-page .add-to-my-collections { margin: 15px; padding: 5px 10px; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .collection-view-page .added-to-my-collections-message { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; white-space: nowrap; color: #fff; position: absolute; top: 15px; right: 35px; } .collection-view-page .added-to-my-collections-message:not(.show) { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-animation: fadeOut 0.3s; -moz-animation: fadeOut 0.3s; -o-animation: fadeOut 0.3s; -ms-animation: fadeOut 0.3s; animation: fadeOut 0.3s; } .collection-view-page .added-to-my-collections-message.show { opacity: 1; -ms-filter: none; filter: none; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .collection-view-page .added-to-my-collections-message .pillow-icon-check { color: #fff; margin-right: 5px; font-size: 80%; } .collection-view-page .collection-sharing { max-width: 565px; margin: 10px auto 0; text-align: left; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .collection-view-page .collection-sharing .is-private-message { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .collection-view-page .collection-sharing i { margin-right: 10px; font-size: 180%; float: left; position: relative; top: 5px; } .collection-view-page .collection-sharing a.privacy-setting-link { color: #fff; text-decoration: underline; } .collection-view-page .collection-sharing a.privacy-setting-link:hover, .collection-view-page .collection-sharing a.privacy-setting-link:focus-visible { text-decoration: none; color: #fff; } .collection-view-page .collection-description-container { text-align: left; margin-top: 15px; padding-top: 15px; position: relative; } .collection-view-page .collection-description-container.is-truncated { margin-bottom: 10px; } .collection-view-page .collection-description-container .collection-description { overflow: hidden; max-height: 80px; } .collection-view-page .collection-description-container .collection-description a { color: #fff; } .collection-view-page .collection-description-container .fade-out { position: absolute; left: 0; bottom: 0; right: 0; height: 35px; } .collection-view-page .collection-description-container .read-more-container { position: absolute; left: 0; bottom: -20px; right: 0; text-align: center; } .collection-view-page .collection-description-container .read-more-container .read-more-link { display: inline-block; padding: 5px 10px; color: #fff; text-decoration: underline; } .collection-view-page .collection-activities-container { -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .collection-view-page .collection-activities-container .collection-item .heading-container { margin-top: 2em; } .collection-view-page .collection-activities-container .collection-item .heading-container h1 { margin-top: 0; margin-bottom: 0; } .collection-view-page .collection-activities-container .collection-item .description-container { margin-bottom: 1em; } .collection-view-page .collection-activities-container .collection-item .subcollection-card { position: relative; } .collection-view-page .collection-activities-container .collection-item .subcollection-card .collection-actions-menu { position: absolute; top: 15px; right: 0; padding-right: 10px; } .collection-view-page .draggable-container > span { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .collection-view-page .curriculum-attribution { text-align: center; margin: 15px 0 10px; } .collection-view-page .wave-and-contents-wrapper.secondary-level .contents-wrapper { -webkit-box-align: end; -moz-box-align: end; -o-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .collection-view-page .wave-and-contents-wrapper .contents-wrapper { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: end; -moz-box-align: end; -o-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .collection-view-page .wave-and-contents-wrapper .contents-wrapper .top-of-collection-info { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 5px; } .collection-view-page .wave-and-contents-wrapper .contents-wrapper .top-of-collection-info .collection-description-container, .collection-view-page .wave-and-contents-wrapper .contents-wrapper .top-of-collection-info h1 { margin: 0; padding: 0; } .collection-view-page .wave-and-contents-wrapper .contents-wrapper .top-of-collection-info .collection-info .author-and-count .author { border-right: 1px solid #3b3b3b; } .collection-view-page .wave-and-contents-wrapper .contents-wrapper .top-of-collection-info .collection-info .collection-collection-tags .collection-collection-tag { border: 1px solid #3b3b3b; color: #3b3b3b; } .collection-view-page .wave-and-contents-wrapper .contents-wrapper .top-of-collection-info .collection-info .collection-collection-tags a.collection-collection-tag:hover, .collection-view-page .wave-and-contents-wrapper .contents-wrapper .top-of-collection-info .collection-info .collection-collection-tags a.collection-collection-tag:focus-visible { color: #3b3b3b; } .collection-view-page .wave-and-contents-wrapper .contents-wrapper .collection-actions-container { -webkit-align-self: flex-end; align-self: flex-end; -ms-flex-item-align: end; position: unset; } .collection-view-page .wave-and-contents-wrapper .contents-wrapper .collection-actions-container .dot-dot-dropdown-container .dot-dot-dropdown-anchor .dot-dot-container span { background: unset; } .collection-view-page .wave-and-contents-wrapper .contents-wrapper .collection-actions-container .dot-dot-dropdown-container .dot-dot-dropdown-anchor .dot-dot-container i { color: unset; } .collection-view-page .wave-and-contents-wrapper .contents-wrapper .collection-actions-container .anchor-container.dcg-hovered .dot-dot-dropdown-anchor .dot-dot-container span { background: unset; } .collection-description-modal .modal-container h1 { text-align: left; } .collection-description-modal .modal-container .collection-description-modal-contents { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; max-height: calc(100vh - 100px); padding: 10px; } .collection-description-modal .modal-container .collection-description-modal-contents .rich-text-view { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; overflow: auto; } @media screen and (max-width: 1050px) { .collection-view-page .collection-view-header .book-collection-info-container .background-images .left-image, .collection-view-page .collection-view-header .book-collection-info-container .background-images .right-image { width: 480px; } .collection-view-page .collection-view-header .book-collection-info-container .background-images .left-image { left: -120px; } } @media screen and (max-width: 950px) { .collection-view-page .collection-view-header .collection-info-container .collection-title h1 { margin-top: 40px; max-width: 100%; } } @media screen and (max-width: 850px) { .teacher-page-content .collection-view-page .collection-view-header .book-collection-info-container .background-images .left-image, .teacher-page-content .collection-view-page .collection-view-header .book-collection-info-container .background-images .right-image { width: 325px; } .teacher-page-content .collection-view-page .collection-view-header .book-collection-info-container .background-images .left-image { left: 0; } .teacher-page-content .collection-view-page .collection-view-header .book-collection-info-container.grade-6 { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-6-small-2de1b31220ed99cd874e507ef2d1fdc0808e332e-a.jpg"); } .teacher-page-content .collection-view-page .collection-view-header .book-collection-info-container.grade-6 .left-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-6-small-left-2e50173d4edfc23f5c0757c47ca7c3cc44b5d85f-a.png"); } .teacher-page-content .collection-view-page .collection-view-header .book-collection-info-container.grade-6 .right-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-6-small-right-77a73a15aae7a79acb8af226c020db4d91b637c4-a.png"); } .teacher-page-content .collection-view-page .collection-view-header .book-collection-info-container.grade-7 { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-7-small-c6f83dde3284797c04452f821dcd5313d4c0b17e-a.jpg"); } .teacher-page-content .collection-view-page .collection-view-header .book-collection-info-container.grade-7 .left-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-7-small-left-7318df257e1d30608579a0ee5e5ffe9abb7de6f7-a.png"); } .teacher-page-content .collection-view-page .collection-view-header .book-collection-info-container.grade-7 .right-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-7-small-right-a9139e1fef32739c904c362164f20a3e797dacb6-a.png"); } .teacher-page-content .collection-view-page .collection-view-header .book-collection-info-container.grade-8 { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-8-small-b3da30b9369f4e1b75e3392db437395756f4db43-a.jpg"); } .teacher-page-content .collection-view-page .collection-view-header .book-collection-info-container.grade-8 .left-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-8-small-left-12bcd172c01eb4d2607fd134871405d443006779-a.png"); } .teacher-page-content .collection-view-page .collection-view-header .book-collection-info-container.grade-8 .right-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-8-small-right-4462095222603d74d7f2a9f6da2c1895c3334f07-a.png"); } .teacher-page-content .collection-view-page .collection-view-header .book-collection-info-container.grade-A1 { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-A1-small-bg-850f918479194126feb7bbc83b3abb0041128367-a.jpg"); } .teacher-page-content .collection-view-page .collection-view-header .book-collection-info-container.grade-A1 .left-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-A1-small-left-8efda9e79c4dc57bcaeccf17596ba5c250ee99c5-a.png"); } .teacher-page-content .collection-view-page .collection-view-header .book-collection-info-container.grade-A1 .right-image { background-image: url("/fingerprinted/static/classroom-assets/img/teacher/curriculum-images/header-A1-small-right-7b432f13961eb6ed96e708e3de507899bf5b3144-a.png"); } } /* src/js/teacher-spa/create-classcode-modal.styl */ .dcg-shared-modal-cover .create-classcode-modal-contents .create-classcode-modal-header, .dcg-shared-modal-cover .create-classcode-modal-contents .create-classcode-modal-details, .dcg-shared-modal-cover .create-classcode-modal-contents .expiration-options { margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; height: auto; } .dcg-shared-modal-cover .create-classcode-modal-contents .create-classcode-modal-header { font-size: 150%; } .dcg-shared-modal-cover .create-classcode-modal-contents .create-classcode-modal-details { color: #333; } .dcg-shared-modal-cover .create-classcode-modal-contents .create-classcode-modal-details .p-tag { display: block; margin: 20px 0; } .dcg-shared-modal-cover .create-classcode-modal-contents .create-classcode-modal-details .p-tag b { display: inline-block; } .dcg-shared-modal-cover .create-classcode-modal-contents .security-options-header, .dcg-shared-modal-cover .create-classcode-modal-contents .expiration-options-header { font-size: 120%; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) 0; } .dcg-shared-modal-cover .create-classcode-modal-contents .dividing-line { height: 1px; background: #bdbdbd; position: absolute; left: 0; right: 0; } .dcg-shared-modal-cover .create-classcode-modal-contents .security-options { margin-bottom: 0; height: auto; } .dcg-shared-modal-cover .create-classcode-modal-contents .security-options .rhythm-checkbox { width: 100%; } .dcg-shared-modal-cover .create-classcode-modal-contents .expiration-options .rhythm-radio { display: inline-block; } .dcg-shared-modal-cover .create-classcode-modal-contents .expiration-options .rhythm-radio + .rhythm-radio { margin-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .dcg-shared-modal-cover .create-classcode-modal-contents .long-expiration-warning { margin-top: 10px; color: #676767; } .dcg-shared-modal-cover .create-classcode-modal-contents .long-expiration-warning i { margin-right: 3px; top: 3px; } /* src/js/teacher-spa/curriculum-expiration-notice.styl */ .curriculum-expiration-notice-container { margin: 1em 0; } .curriculum-expiration-notice-container .curriculum-expiration-notice.toast-warning { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 10px 20px; background: #f3e3b3; border-radius: 0.1875em; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); color: #3b3b3b; font-size: 100%; width: 100%; } .curriculum-expiration-notice-container .curriculum-expiration-notice.toast-warning .toast-body { margin-left: 20px; } /* src/js/teacher-spa/curriculum-partners/eureka-landing.styl */ .eureka-landing { width: 100%; margin: auto; } .eureka-landing .logos-container { margin: 20px 0; } .eureka-landing .logos-container .eureka-logo { padding: 20px 0; } .eureka-landing .logos-container .eureka-logo .eureka-thumb { width: 150px; } .eureka-landing .welcome-header { font-size: 200%; margin-bottom: 20px; font-family: "BreeSerif", "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif; } .eureka-landing .sub-header { color: #38a03b; text-transform: uppercase; display: inline-block; width: 90px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .eureka-landing .dividing-line { display: inline-block; width: calc(100% - 90px); height: 1px; background: #999; vertical-align: middle; } .eureka-landing .instructions { padding: 10px 0; } .eureka-landing .instructions .blue-link { margin: 0 5px; } .eureka-landing .instructions .course-name { margin: 0 5px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .eureka-landing .instructions .instructions-bullet { margin: 10px 0; line-height: 20px; position: relative; } .eureka-landing .instructions .instructions-bullet .bullet { height: 6px; width: 6px; border-radius: 50%; background: #000; display: inline-block; position: absolute; top: 7px; } .eureka-landing .instructions .instructions-bullet .bullet-text { margin-left: 12px; line-height: 20px; } .eureka-landing .button-container { padding-top: 20px; } .eureka-landing .error-message { text-align: center; margin: auto; padding-top: 60px; width: 75%; } .eureka-landing .error-message .pillow-icon-error { font-size: 300%; } .eureka-landing .error-message .pillow-icon-error, .eureka-landing .error-message .error-text { color: #fa824c; } .eureka-landing .error-message .error-text { font-size: 180%; } .eureka-landing .success-message { -webkit-animation: fadePulse 0.3s; -moz-animation: fadePulse 0.3s; -o-animation: fadePulse 0.3s; -ms-animation: fadePulse 0.3s; animation: fadePulse 0.3s; text-align: center; margin: auto; padding-top: 100px; } .eureka-landing .success-message .pillow-icon-check { font-size: 400%; } .eureka-landing .success-message .pillow-icon-check, .eureka-landing .success-message .success-text { color: #00866b; } .eureka-landing .success-message .success-text { font-size: 200%; } /* src/js/teacher-spa/curriculum-partners/request-access-cpm.styl */ .request-access-cpm { width: 100%; margin: auto; } .request-access-cpm .logos-container { text-align: center; } .request-access-cpm .logos-container .cpm-logo { padding: 0 20px; } .request-access-cpm .logos-container .cpm-logo .cpm-thumb { width: 120px; } .request-access-cpm .welcome-header { text-align: center; font-size: 200%; color: #666; font-family: "BreeSerif", "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif; } .request-access-cpm .instructions, .request-access-cpm .alp-instructions { padding: 10px; } .request-access-cpm .instructions .email, .request-access-cpm .alp-instructions .email { margin-left: 5px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .request-access-cpm .instructions .blue-link, .request-access-cpm .alp-instructions .blue-link { margin: 0 5px; } .request-access-cpm .instructions .bold, .request-access-cpm .alp-instructions .bold { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .request-access-cpm .alp-instructions { font-size: 110%; padding: 10px 20px; } .request-access-cpm .email-container { text-align: center; width: 100%; } .request-access-cpm .error-view { -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .request-access-cpm .error-view .amplify-toast { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; } .request-access-cpm .error-view .amplify-toast .toast-body { width: auto !important; margin-right: auto; } .request-access-cpm .confirmation-view { -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .request-access-cpm .confirmation-view .confirmation-message { text-align: center; margin: 20px auto; font-size: 120%; } .request-access-cpm .confirmation-view .confirmation-message .cpm-user-info { color: #666; margin: 10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .request-access-cpm .list-item { margin: 10px 20px; position: relative; } .request-access-cpm .list-item .bullet { background: #666; color: #fff; border-radius: 50%; height: 6px; width: 6px; line-height: 6px; position: absolute; top: 6px; left: 0; } .request-access-cpm .list-item span { margin-left: 15px; } .request-access-cpm .button-container { width: 100%; text-align: center; } .request-access-cpm .success-view { -webkit-animation: fadePulse 0.3s; -moz-animation: fadePulse 0.3s; -o-animation: fadePulse 0.3s; -ms-animation: fadePulse 0.3s; animation: fadePulse 0.3s; text-align: center; margin: auto; } .request-access-cpm .success-view .success-big { font-size: 200%; color: #00866b; padding-top: 20px; } .request-access-cpm .success-view .success-big .pillow-icon-check { margin-right: 10px; } .request-access-cpm .success-view .instructions { font-size: 140%; margin: 0 100px; line-height: 40px; } .request-access-cpm .success-view .alignment-link { display: block; text-align: left; border-radius: 5px; padding: 15px 20px; color: #666; background: #f2f2f2; border: 1px solid #e2e2e2; margin: 10px 0; font-size: 140%; } .request-access-cpm .success-view .alignment-link.dcg-hovered { border: 1px solid #3278c8; -webkit-box-shadow: 0 0 0 1px #3278c8; box-shadow: 0 0 0 1px #3278c8; } .request-access-cpm .success-view .alignment-link.dcg-depressed { background: #ebebeb; border: 1px solid #3278c8; -webkit-box-shadow: 0 0 0 1px #3278c8; box-shadow: 0 0 0 1px #3278c8; } /* src/js/teacher-spa/custom-activity-tips.styl */ .empty-custom-section { text-align: center; color: #333; max-width: 800px; margin: 15px auto; } .empty-custom-section img { max-width: 250px; display: block; margin: 0 auto 15px; } .empty-custom-section .empty-custom-header { font-size: 150%; margin: 15px auto; } .empty-custom-section .empty-custom { width: 50%; display: inline-block; margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } @media screen and (max-width: 650px) { .empty-custom-section .empty-custom { display: block; width: 100%; } } /* src/js/teacher-spa/edition-dropdown.styl */ .editions-dropdown-container .single-edition-label .edition-label { width: 145px; } .editions-dropdown-container .single-edition-label .btn { -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background-color: #fff; border-color: #bdbdbd; color: #3b3b3b; pointer-events: none; } .editions-dropdown-container .single-edition-label .btn .btn-text span { -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; } .editions-dropdown-container .edition-dropdown.show .btn:after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .editions-dropdown-container .edition-dropdown .anchor-container { width: 145px; } .editions-dropdown-container .edition-dropdown .dropdown-choice:focus-visible, .editions-dropdown-container .edition-dropdown .anchor-container:focus-visible { border-radius: 0.1875em; } .editions-dropdown-container .edition-dropdown .btn { width: 100%; } .editions-dropdown-container .edition-dropdown .btn-text span { -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; } .editions-dropdown-container .edition-dropdown .dropdown-container { top: calc(100% + 2px); width: 145px; padding: 0; } /* src/js/teacher-spa/featured-collections-page.styl */ .featured-collections-container .amplify-toast .toast-body { width: auto !important; margin-right: auto; } /* src/js/teacher-spa/featured-collections.styl */ .loading-collection-card { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; background: #fff; border: 2px solid #e2e2e2; border-radius: 7px; height: 80px; margin-bottom: 10px; } /* src/js/teacher-spa/featured-page.styl */ .site-invite-error { text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; padding: 10px; margin-bottom: 20px; } .dcg-art-contest-section { margin-bottom: 20px; } /* src/js/teacher-spa/front-page/curriculum-intro-banner.styl */ .curriculum-header-container { z-index: 1; background-image: url("/fingerprinted/static/classroom-assets/img/frontpage/curriculum-header-background-3d631497c66e1d4039cef5c817eee516a564669b-a.jpg"); background-size: cover; border-radius: 0.1875em; width: 100%; height: 250px; position: relative; overflow: hidden; padding-left: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 3); margin-bottom: 20px; } .curriculum-header-container .pencil-image-container, .curriculum-header-container .kid-1, .curriculum-header-container .kid-2 { z-index: 1; pointer-events: none; } .curriculum-header-container .pencil-image-container { position: absolute; bottom: -76px; left: 71px; width: 80px; } .curriculum-header-container .pencil-image-container .pencil-image { width: 100%; } .curriculum-header-container .kids-image-container { position: absolute; bottom: -50px; right: 55px; height: 195px; } .curriculum-header-container .kids-image-container .kid-1 { height: 98%; } .curriculum-header-container .kids-image-container .kid-2 { height: 100%; } .curriculum-header-container .header-content-position { height: 100%; width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .curriculum-header-container .header-content { background: #fff; max-width: 591px; border-radius: 0.1875em; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); box-shadow: 0 1px 3px rgba(0,0,0,0.07) , 0 1px 2px rgba(0,0,0,0.12); padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); z-index: 2; } .curriculum-header-container .header-content h1 { font-size: 1.6em; font-weight: 400; margin-top: 0; margin-bottom: 0; } .curriculum-header-container .header-content h1, .curriculum-header-container .header-content .dcg-p-tag { color: #3b3b3b; } .curriculum-header-container .header-content .dcg-p-tag { font-size: 94%; margin: 5px 0; } .curriculum-header-container .header-content .btn { margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } @media screen and (max-width: 1300px) { .curriculum-header-container .kids-image-container .kid-1 { display: none; } } @media screen and (max-width: 1100px) { .curriculum-header-container .pencil-image-container { left: 20px; } .curriculum-header-container .kids-image-container { right: 0; } } @media screen and (max-width: 1000px) { .curriculum-header-container .kids-image-container { right: -30px; z-index: 3; } } @media screen and (max-width: 900px) { .curriculum-header-container { max-width: 100%; padding: 20px; } .curriculum-header-container .kids-image-container { bottom: -100px; } } @media screen and (max-width: 800px) { .curriculum-header-container { height: auto; } .curriculum-header-container .kids-image-container { height: 180px; } } /* src/js/teacher-spa/front-page/pilot-section.styl */ .pilot-section-container .new-teacher-experience-notice { background: rgba(50,120,200,0.1); border: 1px solid rgba(50,120,200,0.2); border-radius: 5px; text-align: center; padding: 15px; margin-bottom: 10px; font-size: 115%; color: #333; } .pilot-section-container .new-teacher-experience-notice .new-teacher-experience-title { margin-right: 10px; } .pilot-section-container .book-card { color: #666; text-decoration: none; } .pilot-section-container .book-card .card-contents { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .pilot-section-container .book-card .collection-thumb { -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; background: transparent; border: none; width: 130px; margin-right: 15px; height: 65px; } .pilot-section-container .book-card .book-title { font-size: 135%; color: #666; font-family: "BreeSerif", "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif; max-width: 100%; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .loading-curriculum-card { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; background: #fff; border: 2px solid #e2e2e2; border-radius: 7px; height: 80px; margin-bottom: 10px; } /* src/js/teacher-spa/group-activity-card.styl */ .amp-styles a.group-activity-card { color: #3b3b3b; text-decoration: none; } .amp-styles a.group-activity-card:hover { color: #3b3b3b; text-decoration: none; } .group-activity-card { text-decoration: none; margin-bottom: 15px; width: 100%; vertical-align: top; display: inline-block; position: relative; border-radius: 0.1875em; overflow: visible; } .group-activity-card:hover { overflow: hidden; } .group-activity-card:not(.collection-card) .description-content { padding: 0 15px; width: calc(100% - 140px); } .group-activity-card .card-contents { margin: 15px; } .group-activity-card .card-contents .description-content { display: inline-block; vertical-align: top; } .group-activity-card .card-contents .description-content .group-activity-card-title { color: #3b3b3b; max-width: 100%; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .group-activity-card .card-contents .description-content .group-activity-card-title:not(.collection-title) { font-size: 120%; } .group-activity-card .card-contents .description-content .group-activity-card-title .h4 { font-weight: 500; font-size: 18px; display: inline-block; } .group-activity-card .card-contents .description-content .group-activity-card-activity-num, .group-activity-card .card-contents .description-content .group-activity-card-description { margin-top: 5px; color: #3b3b3b; font-size: 90%; } .group-activity-card .card-contents .description-content .group-activity-card-activity-num { margin-right: 5px; display: inline-block; } @media screen and (max-width: 500px) { .group-activity-card .group-activity-card-description { display: none; } } /* src/js/teacher-spa/history/history-row.styl */ .activity-instance-row { position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border-bottom: 1px solid #bdbdbd; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; } .activity-instance-row.deleting { -webkit-transition: -webkit-transform 300ms, opacity 300ms; -moz-transition: -moz-transform 300ms, opacity 300ms; -o-transition: -o-transform 300ms, opacity 300ms; -ms-transition: -ms-transform 300ms, opacity 300ms; transition: transform 300ms, opacity 300ms; -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -o-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); pointer-events: none; } .activity-instance-row .activity-info { width: 27%; min-width: 27%; row-gap: 5px; } .activity-instance-row .class-info { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; width: 100%; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .activity-instance-row .class-info-archive { margin-top: 3px; } .activity-instance-row .actions-container { height: 50px; padding: 3px 0; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0; -ms-flex: 0 0; flex: 0 0; margin-left: auto; } .activity-instance-row .session-cell { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 34%; -ms-flex: 0 0 34%; flex: 0 0 34%; overflow: hidden; } .activity-instance-row .session-cell-archive { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; overflow: hidden; height: 51px; } .activity-instance-row .tag-wrap-small { margin-top: 11px; } .activity-instance-row .date-container, .activity-instance-row .current-dashboard { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 13%; -ms-flex: 0 0 13%; flex: 0 0 13%; } .activity-instance-row .history-row { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .activity-instance-row .history-row .history-activity-thumb-container { height: 40px; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 40px; -ms-flex: 0 40px; flex: 0 40px; position: relative; margin: 0 15px 0 5px; } .activity-instance-row .history-row .history-activity-thumb-container .history-activity-thumb { position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 1px solid #e2e2e2; border-radius: 4px; background-size: cover; background-position: center center; } .activity-instance-row .history-row .title-area { -webkit-box-flex: 2; -moz-box-flex: 2; -o-box-flex: 2; box-flex: 2; -webkit-flex: 2; -ms-flex: 2; flex: 2; padding: 5px; overflow: hidden; } .activity-instance-row .history-row .title-area .activity-name-link { text-decoration: none; } .activity-instance-row .history-row .title-area .activity-name-link.dcg-depressed, .activity-instance-row .history-row .title-area .activity-name-link.dcg-hovered { text-decoration: underline; text-decoration-color: #3b3b3b; } .activity-instance-row .history-row .title-area .instance-title { font-size: 110%; padding-top: 5px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; color: #3b3b3b; text-decoration: underline; } .activity-instance-row .student-count { color: #3b3b3b; font-size: 90%; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 8%; -ms-flex: 0 0 8%; flex: 0 0 8%; text-align: center; } .activity-instance-row .date-container { text-align: center; } .activity-instance-row .date-container .date { margin-top: 2px; color: #3b3b3b; display: block; font-size: 15px; } .activity-instance-row .date-container .time { color: #3b3b3b; font-size: 12.5px; display: block; font-size: 80%; } .activity-instance-row .date-container .not-run-yet { line-height: 35px; font-size: 90%; font-style: italic; color: rgba(0,0,0,0.2); } .activity-instance-row .dashboard-link-cell { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 15%; -ms-flex: 0 0 15%; flex: 0 0 15%; text-align: center; line-height: 35px; } .activity-instance-row .dashboard-link-archived { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 22%; -ms-flex: 0 0 22%; flex: 0 0 22%; } .activity-instance-row .date-widget, .activity-instance-row .not-run-yet { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 120px; -ms-flex: 0 0 120px; flex: 0 0 120px; text-align: center; margin-right: 5px; } .activity-instance-row .tag-wrapper { padding-right: 10px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: start; -moz-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; row-gap: 10px; font-style: normal; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; overflow: hidden; } .activity-instance-row .tag-wrapper .block-unassigned-message { color: #999; padding-left: 5px; padding-right: 5px; padding-top: 2px; border-radius: 4px; font-size: 80%; line-height: 20px; border: 1px solid #999; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .activity-instance-row .archived-tag { color: #fff; background: #999; padding: 2px 8px; border-radius: 4px; font-size: 80%; line-height: 20px; } .activity-instance-row .not-run-yet { line-height: 40px; font-size: 75%; font-style: italic; color: #999; } .activity-instance-row .date-widget { width: 120px; text-align: right; } .activity-instance-row .date-widget .date { color: #666; font-size: 85%; margin-top: 4px; } .activity-instance-row .date-widget .time { color: #999; font-size: 75%; } .activity-instance-row .class-code-container .class-code-active, .activity-instance-row .block-name { color: #3b3b3b; text-decoration: none; } .activity-instance-row .block-name { white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .activity-instance-row .block-name-archive { margin-top: -5px; } .activity-instance-row .pause-tooltip { display: none; } .activity-instance-row .alp-pause-tag { color: #fff; background-color: #676767; padding: 4px 8px; border-radius: 30px; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; row-gap: 8px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-column-gap: 6px; -moz-column-gap: 6px; column-gap: 6px; font-size: 80%; max-width: 80px; margin-left: 10px; margin-right: 10px; } .activity-instance-row .alp-pause-tag .pillow-icon-pause, .activity-instance-row .alp-pause-tag .pause-text { text-align: center; line-height: 1; } .activity-instance-row .alp-pause-tag .pillow-icon-pause { font-size: 75%; } .activity-instance-row .small-screen-pause-tag { display: none; } .activity-instance-row .class-name { padding-top: 3px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .activity-instance-row .code-pause { margin-left: 10px; } .activity-instance-row .overflow-styling { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .activity-instance-row .inactive-block { color: #929292; font-style: italic; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .activity-instance-row .class-code-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: start; -moz-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; min-width: 280px; } .activity-instance-row .class-code-container .instance-label-deemphasized { margin-left: 10px; font-style: italic; font-size: 80%; color: #3b3b3b; line-height: 110%; max-width: 190px; white-space: normal; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: end; -moz-box-align: end; -o-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .activity-instance-row .class-code-container .instance-label-deemphasized .session-expiration-label.first-half { display: block; } .activity-instance-row .class-code-container .instance-label-deemphasized .learn-link { padding: 0 5px; color: #3b3b3b; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); text-decoration: none; } .activity-instance-row .class-code-container .instance-label-deemphasized .learn-link.dcg-hovered { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); } .activity-instance-row .class-code-container .instance-label-deemphasized .learn-link.dcg-depressed { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); } .activity-instance-row .class-code-container .learn-link { padding: 0 5px; color: #3b3b3b; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); text-decoration: none; font-size: 85%; } .activity-instance-row .class-code-container .learn-link.dcg-hovered { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); } .activity-instance-row .class-code-container .learn-link.dcg-depressed { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); } .activity-instance-row .class-code-container .class-code-label-deemphasized, .activity-instance-row .class-code-container .class-code-label-expiration { color: #767676; font-style: italic; font-size: 80%; text-align: center; } .activity-instance-row .class-code-container .class-code-label-expiration { margin-right: 15px; } .activity-instance-row .class-code-container .inactive { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; line-height: initial; padding: 0; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .activity-instance-row .class-code-container .inactive .reactivate { text-align: left; font-size: 80%; margin: 0; padding: 0; text-decoration: underline; color: #3b3b3b; } .activity-instance-row .class-code-container .inactive .reactivate.dcg-hovered, .activity-instance-row .class-code-container .inactive .reactivate.dcg-depressed { color: #000; } .activity-instance-row .class-code-container .inactive .class-code-label-deemphasized { color: #767676; font-size: 90%; border: none; padding: 0; line-height: initial; } .activity-instance-row .class-code-container .class-code-active { text-transform: uppercase; font-size: 110%; letter-spacing: 0.05em; border: 1px solid #3b3b3b; border-radius: 4px; text-align: center; display: inline-block; line-height: 33px; padding: 0 10px; } .activity-instance-row .history-dropdown { margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .activity-instance-row .history-dropdown .dropdown-container { margin-top: 3px; } .activity-instance-row .history-dropdown .dcg-shared-options-dropdown { min-width: 150px; } .activity-instance-row .history-dropdown .dcg-shared-options-dropdown:after { content: ""; position: absolute; top: -9px; right: 9.5px; border-width: 9px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .activity-instance-row .history-dropdown .dcg-shared-options-dropdown:before { content: ""; position: absolute; top: -10px; right: 8.5px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .activity-instance-row { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; -ms-transition-delay: 500ms; transition-delay: 500ms; -webkit-transition: background 500ms; -moz-transition: background 500ms; -o-transition: background 500ms; -ms-transition: background 500ms; transition: background 500ms; } .activity-instance-row .archived-pause-tag { display: none; } .activity-instance-row .animated-pause-tag:not(.animating-out) { -webkit-animation: fadeIn 0.3s forwards; -moz-animation: fadeIn 0.3s forwards; -o-animation: fadeIn 0.3s forwards; -ms-animation: fadeIn 0.3s forwards; animation: fadeIn 0.3s forwards; } .activity-instance-row .animated-pause-tag.animating-out { -webkit-animation: fadeOut 0.3s forwards; -moz-animation: fadeOut 0.3s forwards; -o-animation: fadeOut 0.3s forwards; -ms-animation: fadeOut 0.3s forwards; animation: fadeOut 0.3s forwards; } .activity-instance-paused { background-color: #e9e9e9; } .dashboard-link-container { width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } @media screen and (max-width: 1100px) { .student-count { display: none; } .class-code-container { display: none; } .activity-instance-row .activity-info { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 27%; -ms-flex: 0 0 27%; flex: 0 0 27%; } .activity-instance-row .dashboard-link { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 20%; -ms-flex: 0 0 20%; flex: 0 0 20%; } .activity-instance-row .dashboard-link-archived { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; } .activity-instance-row .date-container { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 15%; -ms-flex: 0 0 15%; flex: 0 0 15%; } } @media screen and (max-width: 1230px) { .activity-instance-row .class-code-container .instance-label-deemphasized { display: none; } } @media screen and (max-width: 1200px) { .activity-instance-row .class-info { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 150px; -ms-flex: 0 0 150px; flex: 0 0 150px; } .activity-instance-row .class-info .class-code-container .instance-label-deemphasized { display: none; } .activity-instance-row .class-code-label-expiration { display: none; } } @media screen and (max-width: 850px) { .activity-instance-row .not-run-yet, .activity-instance-row .date-container { display: none; } .activity-instance-row .history-row .title-area .instance-title { max-width: 100%; } .activity-instance-row .dashboard-link { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; } .activity-instance-row .dashboard-link-archived { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 27%; -ms-flex: 0 0 27%; flex: 0 0 27%; } .activity-instance-row .activity-info { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 35%; -ms-flex: 0 0 35%; flex: 0 0 35%; } } @media screen and (max-width: 785px) { .activity-instance-row .pause-tooltip { display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-box; display: inline-flex; } .activity-instance-row .alp-pause-tag { display: none; } .activity-instance-row .small-screen-pause-tag { color: #fff; border: 1px solid #666; background-color: #666; padding: 6px 6px; border-radius: 50%; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; row-gap: 8px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-column-gap: 8px; -moz-column-gap: 8px; column-gap: 8px; font-size: 80%; max-width: 80px; } .activity-instance-row .pillow-icon-pause { font-size: 80%; text-align: center; line-height: 1; } .activity-instance-row .class-name-dhp, .activity-instance-row .inactive-dhp, .activity-instance-row .class-code-active-dhp { margin-right: 10px; } } @media screen and (max-width: 600px) { .activity-instance-row .not-run-yet, .activity-instance-row .date-container { display: none; } .activity-instance-row .history-row .title-area .instance-title { max-width: 100%; } .activity-instance-row .dashboard-link { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; } .activity-instance-row .activity-info { width: 42%; } } /* src/js/teacher-spa/history/history.styl */ .history-wrapper { padding-right: 10px; max-width: 1200px; } .history-wrapper .history-filters { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .history-wrapper .history-filters .multiselect-checkbox-dropdown-container { margin-right: 15px; } .history-wrapper .history-filters .activity-filter-container { -webkit-align-self: center; align-self: center; -ms-flex-item-align: center; margin-bottom: 20px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #333; } .history-wrapper .history-filters .activity-filter-container .activity-name-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 5px 5px 5px 10px; background: #f7f7f7; border-radius: 5px; color: #333; max-width: 300px; margin-left: 10px; border: 1px solid #e2e2e2; } .history-wrapper .history-filters .activity-filter-container .activity-name-container .activity-name { white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .history-wrapper .history-filters .activity-filter-container .activity-name-container .clear-filter { margin-left: 5px; text-decoration: none; font-size: 90%; padding: 5px; } .history-wrapper .filter-dropdown-option .inactive { color: #999; font-style: italic; } .history-wrapper .error-loading-activities { font-size: 120%; text-align: center; color: #666; padding: 50px 25px; } .history-wrapper .dhp-activity-instance-header { border-bottom: 1px solid #bdbdbd; text-transform: uppercase; color: #3b3b3b; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; line-height: normal; } .history-wrapper .dhp-activity-instance-header .table-header { display: inline-block; } .history-wrapper .dhp-activity-instance-header .table-header.num-students-header { text-align: center; width: 8%; } .history-wrapper .dhp-activity-instance-header .table-header.student-code-header { text-align: left; width: 34%; } .history-wrapper .dhp-activity-instance-header .table-header.code-header-archived { width: 25%; } .history-wrapper .dhp-activity-instance-header .table-header.date-header, .history-wrapper .dhp-activity-instance-header .table-header.link-header { width: 13%; text-align: center; } .history-wrapper .dhp-activity-instance-header .table-header.activity-header-text { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 27%; -ms-flex: 0 0 27%; flex: 0 0 27%; text-align: left; } .history-wrapper .dhp-activity-instance-header .actions-header, .history-wrapper .dhp-activity-instance-header .dashboard-link-header { position: absolute; top: -1000px; left: -1000px; width: 1px; height: 1px; } .history-wrapper .load-more-history { width: 100%; border-top: 1px solid #e2e2e2; text-align: center; line-height: 40px; padding: 5px; } .history-wrapper .no-instance-notes { color: #666; text-align: center; padding: 40px 0; } .history-wrapper .no-instance-notes .empty-state-image { display: block; } .history-wrapper .no-instance-notes .empty-state-image img { width: 100%; max-width: 300px; margin: 0 auto 30px; } .history-wrapper .history-error-message { text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .history-header .header-container { padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; } .history-header .header-container .amp-link { text-underline-offset: 3px; } .history-blocks-dropdown { background: #fff; border-radius: 8px; } .table-header.num-students-header, .table-header.date-header, .table-header.actions-header, .table-header.dashboard-link-header, .table-header.activity-header-text { font-size: calc(1em / var(--scale-ratio)); line-height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } @media screen and (max-width: 1100px) { .history-wrapper .dhp-activity-instance-header .table-header.activity-header-archived { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 32%; -ms-flex: 0 0 32%; flex: 0 0 32%; } .history-wrapper .dhp-activity-instance-header .table-header.activity-header-text { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 27%; -ms-flex: 0 0 27%; flex: 0 0 27%; } .history-wrapper .dhp-activity-instance-header .table-header.date-header { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 15%; -ms-flex: 0 0 15%; flex: 0 0 15%; } .history-wrapper .dhp-activity-instance-header .table-header.num-students-header, .history-wrapper .dhp-activity-instance-header .table-header.link-header { display: none; } } @media screen and (max-width: 1000px) { .history-filters { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .history-filters .activity-filter-container { margin-right: auto; } } @media screen and (max-width: 850px) { .history-wrapper .dhp-activity-instance-header .table-header.activity-header-text { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 35%; -ms-flex: 0 0 35%; flex: 0 0 35%; } .history-wrapper .dhp-activity-instance-header .table-header.date-header { display: none; } .history-wrapper .dhp-activity-instance-header .table-header.student-code-header { margin-left: 2px; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 60%; -ms-flex: 0 0 60%; flex: 0 0 60%; } .history-wrapper .dhp-activity-instance-header .actions-container { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 30px; -ms-flex: 0 0 30px; flex: 0 0 30px; } } @media screen and (max-width: 400px) { .dhp-activity-instance-header .table-header.activity-header-text { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 40%; -ms-flex: 0 0 40%; flex: 0 0 40%; } .dhp-activity-instance-header .table-header.date-header { display: none; } } /* src/js/teacher-spa/labs/labs-settings.styl */ .labs-settings { margin-top: 1em; } .labs-settings .labs-description .labs-description-paragraph { padding: 10px 0; } .labs-settings h2 { color: #3b3b3b; font-size: 1.2em; font-weight: 400; margin: 1.5em 0 0; } .labs-settings .amplify-checkbox { display: inline-block; } .labs-settings .feature { padding: 10px 0; } .labs-settings .feature .feature-title { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .labs-settings .feature .feature-title .name { font-size: 1.2em; } .labs-settings .feature .feature-title .amp-link { padding-left: 10px; } .labs-settings .feature .feature-description { margin-left: 10px; display: inline-block; } .labs-settings .feature .description { font-size: 90%; margin-left: 33px; color: #3b3b3b; } .labs-settings .feature .description.beta-description { font-style: italic; } .labs-settings .feature .description i { position: relative; top: 1px; font-size: 120%; } .labs-settings .save-notice-container { display: inline-block; margin-left: 33px; margin-top: 10px; } .labs-settings .save-notice { color: #3b3b3b; padding: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5) calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1); -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; -ms-transition: opacity 0.3s; transition: opacity 0.3s; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; font-size: 95%; } .labs-settings .save-notice.success { background: #b3dbd3; } .labs-settings .save-notice.success i { color: #00866b; } .labs-settings .save-notice.warning { background: #f3e3b3; } .labs-settings .save-notice.warning i { color: #d8a202; } .labs-settings .save-notice .i { margin-right: 5px; } .labs-settings .save-notice .pillow-spinner { position: relative; top: -1px; } /* src/js/teacher-spa/logged-out-cta-cards.styl */ .dcg-activities-section-content { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; width: 100%; } .dcg-activities-section-content .dcg-homepage-content-box { position: relative; background-color: #fff; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; max-width: 50%; border: 1px solid #bdbdbd; border-radius: 0.1875em; padding: 32px 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: start; align-items: start; height: 321px; } .dcg-activities-section-content .dcg-homepage-content-box:first-child { margin-right: 32.5px; } .dcg-activities-section-content .dcg-homepage-content-box .dcg-content-image { margin-right: 12.5px; width: 200px; } .dcg-activities-section-content .dcg-homepage-content-box .dcg-content-image img.small-screen { display: none; } .dcg-activities-section-content .dcg-homepage-content-box .dcg-content-image img { width: 200px; position: absolute; top: 0; left: 0; } .dcg-activities-section-content .dcg-homepage-content-box .dcg-content-container { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: left; } .dcg-activities-section-content .dcg-homepage-content-box .dcg-content-container .btn { font-size: 21px; } .dcg-activities-section-content .dcg-homepage-content-box .dcg-content-container h3 { font-family: "Amplify", serif; color: #3b3b3b; font-size: 1.65em; } .dcg-activities-section-content .dcg-homepage-content-box .dcg-content-container .dcg-content-box-subtitle { max-width: 260px; margin: 16px 0; font-size: 21px; line-height: 32px; font-weight: 400; } .dcg-activities-section-content .dcg-homepage-content-box .dcg-content-container .content-action-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .dcg-activities-section-content .dcg-homepage-content-box .dcg-content-container .content-action-container .join-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; width: 100%; margin-bottom: 32px; } .dcg-activities-section-content .dcg-homepage-content-box .dcg-content-container .content-action-container .join-container .join-class-input { min-width: 5em; width: 165px; margin-right: 8px; font-size: 21px; line-height: 32px; padding-left: 16px; } .dcg-activities-section-content .dcg-homepage-content-box .dcg-content-container .content-action-container .join-container .join-class-input::placeholder { color: #676767; } .dcg-activities-section-content .dcg-homepage-content-box .dcg-content-container .content-action-container .amp-link { font-size: 21px; line-height: 32px; } .dcg-activities-section-content .dcg-homepage-content-box.dcg-student-class-code .dcg-class-code-error { text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; width: 100%; } .dcg-activities-section-content .dcg-homepage-content-box.dcg-teacher-links .dcg-content-action-container { width: max-content; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-align: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } @media screen and (max-width: 1100px) { .dcg-activities-section-content { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 0 15px; height: unset; } .dcg-activities-section-content .dcg-homepage-content-box { width: 100%; max-width: 500px; } .dcg-activities-section-content .dcg-homepage-content-box:first-child { margin-bottom: 32.5px; margin-right: 0; } } @media screen and (max-width: 500px) { .dcg-activities-section-content .dcg-homepage-content-box { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-lines: single; -moz-box-lines: single; -o-box-lines: single; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .dcg-activities-section-content .dcg-homepage-content-box .dcg-content-image img { position: unset; } .dcg-activities-section-content .dcg-homepage-content-box .dcg-content-image img.large-screen { display: none; } .dcg-activities-section-content .dcg-homepage-content-box .dcg-content-image img.small-screen { display: block; } } @media screen and (max-width: 450px) { .dcg-activities-section-content .dcg-homepage-content-box { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .dcg-activities-section-content .dcg-homepage-content-box .dcg-content-image { margin-right: 0; } .dcg-activities-section-content .dcg-homepage-content-box .dcg-content-image img { width: 100%; position: static; } .dcg-activities-section-content .dcg-homepage-content-box .dcg-content-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; text-align: center; } .dcg-activities-section-content .dcg-homepage-content-box .dcg-content-container .dcg-content-box-subtitle { margin: 5px auto; } .dcg-activities-section-content .dcg-homepage-content-box .dcg-content-container .dcg-content-action-container { margin: 0 auto; width: 100%; } } /* src/js/teacher-spa/logged-out-homepage.styl */ .logged-out-homepage-container { color: #3b3b3b; font-size: 110%; } .logged-out-homepage-container .banner-text-container .heading, .logged-out-homepage-container .landing-page-content-container .details-heading { font-size: 2.33em; font-family: "Amplify", serif; font-weight: 400; } .logged-out-homepage-container .details-heading { padding-top: 96px; padding-bottom: 40px; } .logged-out-homepage-container .banner-text h1 { margin-top: 0; margin-bottom: 0; } .logged-out-homepage-container h3 { font-size: 150%; margin-top: 0; margin-bottom: 0; } .logged-out-homepage-container .example-screen h2, .logged-out-homepage-container .details-heading, .logged-out-homepage-container .how-it-works-heading, .logged-out-homepage-container .homepage-tweet-container h2 { text-align: center; padding: 40px 0; margin-top: 0; margin-bottom: 0; } .logged-out-homepage-container .heading-wrapper { background: #fff; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; overflow: hidden; border-bottom: 1px solid rgba(0,0,0,0.07); } .logged-out-homepage-container .heading-wrapper .banner-left-spacer, .logged-out-homepage-container .heading-wrapper .banner-right-spacer { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-flex-shrink: 0; flex-shrink: 0; } .logged-out-homepage-container .heading-wrapper .banner-left-spacer { min-width: 10px; } .logged-out-homepage-container .heading-wrapper .banner-right-spacer { background: #fff; -webkit-flex-shrink: 0; flex-shrink: 0; } .logged-out-homepage-container .banner-wrapper { background-size: cover; height: 464px; width: 100%; max-width: 1088px; position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .logged-out-homepage-container .banner-wrapper .banner-text-container { height: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .logged-out-homepage-container .banner-wrapper .banner-text-container .header-text { margin: 16px 0 32px; line-height: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); font-size: 1.2em; max-width: 530px; } .logged-out-homepage-container .banner-wrapper .banner-text-container .button-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .logged-out-homepage-container .banner-wrapper .banner-text-container .button-container .btn { font-size: 1.2em; margin: 5.75px 0; } .logged-out-homepage-container .banner-wrapper .header-image-container { max-width: 620px; width: calc(100% - 508px); position: absolute; bottom: 0; right: -58px; } @media screen and (max-width: 1088px) { .logged-out-homepage-container .banner-wrapper .header-image-container { position: absolute; bottom: 0; right: 0; } } .logged-out-homepage-container .banner-wrapper .header-image-container img { width: 100%; } .logged-out-homepage-container .logged-out-cta-cards { background-color: #f6f6f6; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 80px 0; } .logged-out-homepage-container .logged-out-cta-cards .dcg-activities-section-content { max-width: 1088px; margin-left: auto; margin-right: auto; width: 100%; font-size: 1rem; } .logged-out-homepage-container .landing-page-content-container { max-width: 1088px; margin-left: auto; margin-right: auto; width: 100%; padding-left: 15px; padding-right: 15px; } .logged-out-homepage-container .curriculum-section { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; width: 100%; } .logged-out-homepage-container .curriculum-section .curriculum-section-background-container { border: 1px solid #bdbdbd; border-radius: 0.1875em; height: 326px; background-size: cover; background-repeat: no-repeat; width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: relative; overflow: hidden; padding-left: 15px; padding-right: 15px; } .logged-out-homepage-container .curriculum-section .curriculum-section-background-container .curriculum-background-kids { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: end; -moz-box-align: end; -o-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; position: absolute; right: 95px; bottom: 0; } @media screen and (max-width: 750px) { .logged-out-homepage-container .curriculum-section .curriculum-section-background-container .curriculum-background-kids { display: none; } } @media screen and (max-width: 850px) { .logged-out-homepage-container .curriculum-section .curriculum-section-background-container .curriculum-background-kids .kid-1 { visibility: hidden; } } .logged-out-homepage-container .curriculum-section .curriculum-section-background-container .curriculum-content-wrapper { max-width: 1088px; margin-left: auto; margin-right: auto; width: 100%; } .logged-out-homepage-container .curriculum-section .curriculum-section-background-container .curriculum-content-wrapper .curriculum-section-content { border-radius: 0.1875em; background: #fff; text-align: left; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 2em 1em; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; max-width: 525px; position: relative; z-index: 1; } @media screen and (max-width: 750px) { .logged-out-homepage-container .curriculum-section .curriculum-section-background-container .curriculum-content-wrapper .curriculum-section-content { margin: 0 auto; } } .logged-out-homepage-container .curriculum-section .curriculum-section-background-container .curriculum-content-wrapper .curriculum-section-content .content-section-title-container { margin-left: 20px; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .logged-out-homepage-container .curriculum-section .curriculum-section-background-container .curriculum-content-wrapper .curriculum-section-content h2 { font-size: 1.65em; margin-top: 0; margin-bottom: 0; } .logged-out-homepage-container .curriculum-section .curriculum-section-background-container .curriculum-content-wrapper .curriculum-section-content .curriculum-blurb { font-size: 1em; line-height: 24px; margin: 7px 0 12px 0; } .logged-out-homepage-container .curriculum-section .curriculum-section-background-container .curriculum-content-wrapper .curriculum-section-content .btn-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: start; -moz-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .logged-out-homepage-container .curriculum-section .curriculum-section-background-container .curriculum-content-wrapper .curriculum-section-content .btn-container .btn { margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .logged-out-homepage-container .teaching-details-section, .logged-out-homepage-container .how-it-works-section { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin: -10px; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding-bottom: 40px; color: #3b3b3b; } .logged-out-homepage-container .teaching-details-section .detail-image, .logged-out-homepage-container .how-it-works-section .detail-image, .logged-out-homepage-container .teaching-details-section .detail-text, .logged-out-homepage-container .how-it-works-section .detail-text { margin: 10px; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .logged-out-homepage-container .teaching-details-section .detail-image, .logged-out-homepage-container .how-it-works-section .detail-image { width: 50%; max-width: 450px; } .logged-out-homepage-container .teaching-details-section .heading, .logged-out-homepage-container .how-it-works-section .heading { font-size: 1.525em; line-height: 1.5em; } .logged-out-homepage-container .teaching-details-section .heading + span, .logged-out-homepage-container .how-it-works-section .heading + span { display: inline-block; margin-top: 1em; } .logged-out-homepage-container .detail-text, .logged-out-homepage-container .player-description { font-size: 1.2em; line-height: 32px; } .logged-out-homepage-container .detail-text .amp-link, .logged-out-homepage-container .player-description .amp-link { text-decoration: underline; } .logged-out-homepage-container .player-description { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 1); } .logged-out-homepage-container .example-screen { margin: 40px 0; padding-top: 40px; } .logged-out-homepage-container .example-screen .screen-container { position: relative; font-size: 100%; z-index: 0; } .logged-out-homepage-container .example-screen .screen-container .blob { position: absolute; z-index: -1; } .logged-out-homepage-container .example-screen .screen-container .blob-1-amplify { position: absolute; top: -60px; left: -60px; } .logged-out-homepage-container .example-screen .screen-container .blob-2-amplify { position: absolute; bottom: 40px; right: -60px; } .logged-out-homepage-container .player-container { position: relative; width: 100%; padding-bottom: calc(150px + 50%); } .logged-out-homepage-container .player-container .dcg-activity-player-api-container { height: 700px; } .logged-out-homepage-container .player-container .student-step-container { border: 1px solid #bdbdbd; border-radius: 5px; background: #fff; } .logged-out-homepage-container #player { width: 100%; height: 100%; font-size: 16px; } .logged-out-homepage-container .homepage-tweet-container { padding: 40px 0 80px; } .logged-out-homepage-container .homepage-tweet-container .heading { font-size: 2.33em; font-family: "Amplify", serif; font-weight: 400; } .logged-out-homepage-container .homepage-tweet-container .tweet-container { position: relative; z-index: 0; font-size: 1rem; } .logged-out-homepage-container .homepage-tweet-container .blob { position: absolute; z-index: -1; } .logged-out-homepage-container .homepage-tweet-container .blob-3-amplify { position: absolute; top: -40px; left: 15%; } .logged-out-homepage-container .homepage-tweet-container .blob-4-amplify { position: absolute; bottom: -60px; right: 20%; } .logged-out-homepage-container .sign-up-container { margin: 40px 0; } .logged-out-homepage-container .sign-up-container .sign-up-background-wrapper { padding: 30px; position: relative; } .logged-out-homepage-container .sign-up-container .sign-up-background-wrapper .btn { font-size: 21px; } .logged-out-homepage-container .sign-up-container .sign-up-background-wrapper .sign-up-text-container { max-width: calc(100% - 435px); } .logged-out-homepage-container .sign-up-container .sign-up-background-wrapper .sign-up-text { margin-bottom: 16px; font-size: 1.85em; line-height: 39px; } .logged-out-homepage-container .sign-up-container .sign-up-background-wrapper .footer-image { position: absolute; right: 0; bottom: -50%; width: 435px; } @media screen and (max-width: 850px) { .logged-out-homepage-container .banner-wrapper .header-image-container { width: 340px; } .logged-out-homepage-container .sign-up-container .sign-up-background-wrapper .sign-up-text-container { width: 100%; max-width: 100%; text-align: center; } .logged-out-homepage-container .sign-up-container .sign-up-background-wrapper .footer-image { display: none; } } @media screen and (max-width: 800px) { .logged-out-homepage-container .example-screen { display: none; } } @media screen and (max-width: 750px) { .logged-out-homepage-container .banner-left-spacer { display: none; } .logged-out-homepage-container .banner-wrapper { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; max-width: 100%; height: 650px; } .logged-out-homepage-container .banner-wrapper .banner-text-container { padding: 40px 0 20px; -webkit-box-pack: start; -moz-box-pack: start; -o-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; text-align: center; } .logged-out-homepage-container .banner-wrapper .banner-text-container .banner-text { text-align: center; width: 100%; max-width: 450px; margin: 0 auto; } .logged-out-homepage-container .banner-wrapper .banner-text-container .button-container { -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .logged-out-homepage-container .banner-wrapper .header-image-container { width: 340px; right: 50%; margin-right: -170px; } .logged-out-homepage-container .teaching-details-section, .logged-out-homepage-container .how-it-works-section { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 10px; } .logged-out-homepage-container .teaching-details-section .detail-image, .logged-out-homepage-container .how-it-works-section .detail-image, .logged-out-homepage-container .teaching-details-section .detail-text, .logged-out-homepage-container .how-it-works-section .detail-text { width: 100%; } .logged-out-homepage-container .teaching-details-section .detail-image, .logged-out-homepage-container .how-it-works-section .detail-image { -webkit-box-ordinal-group: 0; -moz-box-ordinal-group: 0; -o-box-ordinal-group: 0; -ms-flex-order: 0; -webkit-order: 0; order: 0; } .logged-out-homepage-container .teaching-details-section .detail-text, .logged-out-homepage-container .how-it-works-section .detail-text { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -o-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; } .logged-out-homepage-container .homepage-tweet-container .random-tweet-container { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .logged-out-homepage-container .homepage-tweet-container .random-tweet-container .tweet-list-item { margin-bottom: 10px; } } @media screen and (max-width: 685px) { .logged-out-homepage-container .homepage-content-section.curriculum-section .curriculum-section-background-container { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .logged-out-homepage-container .homepage-content-section.curriculum-section .curriculum-section-content { margin: 0 auto; text-align: center; } .logged-out-homepage-container .homepage-content-section.curriculum-section .curriculum-section-content .content-section-title-container { margin-left: 0; } .logged-out-homepage-container .homepage-content-section.curriculum-section .curriculum-section-content .btn-container { -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } } @media screen and (max-width: 680px) { .logged-out-homepage-container .heading-wrapper { top: 53px; border-top: 1px solid rgba(0,0,0,0.07); } .logged-out-homepage-container .heading-wrapper .banner-wrapper { height: 450px; padding: 0 15px; } .logged-out-homepage-container .heading-wrapper .banner-wrapper .banner-text-container { padding: 20px 0; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .logged-out-homepage-container .heading-wrapper .banner-wrapper .header-image-container { display: none; } } @media screen and (max-width: 430px) { .logged-out-homepage-container .heading-wrapper .banner-wrapper { height: unset; padding: 20px 15px; } .logged-out-homepage-container .curriculum-section .curriculum-section-background-container { height: unset; padding: 15px; } .logged-out-homepage-container .curriculum-section .curriculum-section-background-container .curriculum-content-wrapper .btn-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 12.5px; } } /* src/js/teacher-spa/main-sidebar.styl */ .side-bar { width: 225px; padding: 0 20px 10px 0; } .side-bar a.back-home-link { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; text-decoration: none; margin: 10px 0 10px 10px; font-size: 100%; color: #3b3b3b; } .side-bar .user-name-dropdown { font-size: 110%; color: #666; cursor: pointer; line-height: 30px; padding: 0 0 8px 8px; } .side-bar .user-name-dropdown .user-name { display: inline-block; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; max-width: calc(100% - 30px); vertical-align: bottom; } .side-bar .user-name-dropdown .pillow-icon-caret-down { font-size: 12px; padding: 3px 5px; margin-left: 5px; } .side-bar .user-name-dropdown.dcg-hovered { color: #333; } .side-bar .account-dropdown .popover-interior { position: absolute; top: 53px; right: 0; bottom: 0; left: 0; width: 100%; border: none; border-radius: 0; padding: 10px 18px; -webkit-box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.35); box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.35); } .side-bar .account-dropdown .popover-interior .user-name { display: none; } .side-bar .account-dropdown .popover-interior:before { content: none; } .side-bar .account-dropdown .popover-interior:after { content: none; } .side-bar .divide-line { width: 225px; height: 1px; background-color: #bbb; margin-left: -10px; } .side-bar .sidebar-search-box-container { margin: 10px 0px 30px 10px; } .loading-sidebar { padding-top: 10px; } .loading-sidebar .loading-sidebar-group { margin: 10px 10px 60px; } .loading-sidebar .loading-sidebar-group .loading-sidebar-header, .loading-sidebar .loading-sidebar-group .loading-sidebar-item { background: #e2e2e2; -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; margin-bottom: 20px; } .loading-sidebar .loading-sidebar-group .loading-sidebar-header { height: 10px; width: 100%; } .loading-sidebar .loading-sidebar-group .loading-sidebar-item { height: 15px; width: 90%; } .loading-sidebar .loading-sidebar-group .loading-sidebar-item:nth-of-type(even) { width: 70%; } .loading-sidebar .loading-sidebar-group .loading-sidebar-item:nth-of-type(3n+1) { width: 80%; } .teacher-page.side-bar-collapsed .sidebar-container { position: absolute; top: 0; margin: 10px; } /* src/js/teacher-spa/main.styl */ .teacher-page { background-color: #fff; } .teacher-page h1.section-header { color: #3b3b3b; font-size: 1.5em; font-weight: 400; margin: 0; } .teacher-page .teacher-page-content-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; width: 100%; } .teacher-page:not(.full-width-page) .teacher-page-content-container { max-width: 1355px; } .teacher-page .teacher-page-wrapper { background-color: #f6f6f6; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding: 10px 10px 20px 10px; min-height: 1000px; position: relative; z-index: 1; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; min-width: 450px; } .teacher-page .teacher-page-wrapper .teacher-page-top-bar { background-color: #fff; } .teacher-page .teacher-page-wrapper.show-notice { margin-top: 83px; } .teacher-page .teacher-page-wrapper:not(.show-notice) { margin-top: 53px; } .teacher-page .teacher-page-wrapper .amp-nav { z-index: 2; } .teacher-page .sidebar-container { width: 225px; } .teacher-page.side-bar-collapsed .teacher-page-wrapper { margin: 0; padding: 0; } .teacher-page.side-bar-collapsed .teacher-page-content-container .teacher-page-content { padding: 10px 20px; width: 100%; } .teacher-page.side-bar-collapsed:not(.side-bar-open) .sidebar-container { -webkit-transform: translate(-225px, 0); -moz-transform: translate(-225px, 0); -o-transform: translate(-225px, 0); -ms-transform: translate(-225px, 0); transform: translate(-225px, 0); } .teacher-page.side-bar-collapsed.side-bar-animating .sidebar-container { pointer-events: none; } .teacher-page.side-bar-collapsed.side-bar-open { max-height: 100vh; overflow: hidden; } .teacher-page.side-bar-collapsed.side-bar-open .sidebar-container { -webkit-animation: 0.2s teacherSpaSidebarFadeIn; -moz-animation: 0.2s teacherSpaSidebarFadeIn; -o-animation: 0.2s teacherSpaSidebarFadeIn; -ms-animation: 0.2s teacherSpaSidebarFadeIn; animation: 0.2s teacherSpaSidebarFadeIn; } .teacher-page.side-bar-collapsed.side-bar-open .teacher-page-top-bar, .teacher-page.side-bar-collapsed.side-bar-open .teacher-page-content, .teacher-page.side-bar-collapsed.side-bar-open .white-cover { -webkit-animation: 0.2s teacherSpaContentSlideRight; -moz-animation: 0.2s teacherSpaContentSlideRight; -o-animation: 0.2s teacherSpaContentSlideRight; -ms-animation: 0.2s teacherSpaContentSlideRight; animation: 0.2s teacherSpaContentSlideRight; } .teacher-page.side-bar-collapsed.side-bar-open .teacher-page-top-bar, .teacher-page.side-bar-collapsed.side-bar-open .teacher-page-content, .teacher-page.side-bar-collapsed.side-bar-open .white-cover { -webkit-transform: translate(225px, 0); -moz-transform: translate(225px, 0); -o-transform: translate(225px, 0); -ms-transform: translate(225px, 0); transform: translate(225px, 0); } .teacher-page .teacher-page-content { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; width: calc(100% - 225px); -webkit-animation: fadeIn 0.2s; -moz-animation: fadeIn 0.2s; -o-animation: fadeIn 0.2s; -ms-animation: fadeIn 0.2s; animation: fadeIn 0.2s; padding-right: 10px; } .teacher-page .teacher-page-content.logged-out-home { background-color: #fff; } .teacher-page .teacher-page-content .featured-collections-main-container { margin-bottom: 10px; } .teacher-page .white-cover { background: rgba(255,255,255,0.7); position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 2; -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.35); box-shadow: 0 0 7px rgba(0,0,0,0.35); } .teacher-page .error-page-content .amplify-toast .toast-body { width: auto !important; margin-right: auto; } .teacher-page .error-page-content .centered-content { padding-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .teacher-page .centered-content { width: 600px; margin: 0 auto; position: relative; } .teacher-page .centered-content img { float: right; width: 280px; position: relative; left: -50px; } .teacher-page .centered-content .error-heading { display: inline-block; position: absolute; top: 200px; right: 250px; font-weight: normal; font-size: 1100%; } .teacher-page .centered-content .amplify-toast { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; } .teacher-page.fixed-sidebar:not(.side-bar-collapsed) .grouped-sidebar-container { -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .teacher-page.fixed-sidebar:not(.side-bar-collapsed) .grouped-sidebar-container .grouped-sidebar { position: sticky; top: 63px; } .teacher-page.side-bar-collapsed .grouped-sidebar { padding: 0; width: 100%; max-height: calc(100vh - 60px); margin-top: 0; } .teacher-page.full-width-page .teacher-page-wrapper { max-width: 100%; padding: 0; margin-bottom: 20px; } .teacher-page.full-width-page .teacher-page-wrapper .teacher-page-content { padding-right: 0; } .teacher-page.full-width-page.side-bar-collapsed .teacher-page-content-container .teacher-page-content { padding: 0; } .teacher-page .prosemirror-container { line-height: 1.5em; } .teacher-page p a { font-weight: 300; } .teacher-page .btn.btn-secondary { border-width: 1px; } .top-bar-search-box-container { position: absolute; top: 0; left: 235px; } .header-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 10px 0 25px; } .header-container .header-links { font-size: 90%; text-align: right; } @media screen and (max-width: 680px) { .teacher-page .teacher-page-wrapper { display: block; margin-top: 0; width: 100%; min-width: initial; } } @-moz-keyframes teacherSpaContentSlideRight { 0% { -webkit-transform: translateX(175px); -moz-transform: translateX(175px); -o-transform: translateX(175px); -ms-transform: translateX(175px); transform: translateX(175px); } 100% { -webkit-transform: translateX(225px); -moz-transform: translateX(225px); -o-transform: translateX(225px); -ms-transform: translateX(225px); transform: translateX(225px); } } @-webkit-keyframes teacherSpaContentSlideRight { 0% { -webkit-transform: translateX(175px); -moz-transform: translateX(175px); -o-transform: translateX(175px); -ms-transform: translateX(175px); transform: translateX(175px); } 100% { -webkit-transform: translateX(225px); -moz-transform: translateX(225px); -o-transform: translateX(225px); -ms-transform: translateX(225px); transform: translateX(225px); } } @-o-keyframes teacherSpaContentSlideRight { 0% { -webkit-transform: translateX(175px); -moz-transform: translateX(175px); -o-transform: translateX(175px); -ms-transform: translateX(175px); transform: translateX(175px); } 100% { -webkit-transform: translateX(225px); -moz-transform: translateX(225px); -o-transform: translateX(225px); -ms-transform: translateX(225px); transform: translateX(225px); } } @keyframes teacherSpaContentSlideRight { 0% { -webkit-transform: translateX(175px); -moz-transform: translateX(175px); -o-transform: translateX(175px); -ms-transform: translateX(175px); transform: translateX(175px); } 100% { -webkit-transform: translateX(225px); -moz-transform: translateX(225px); -o-transform: translateX(225px); -ms-transform: translateX(225px); transform: translateX(225px); } } @-moz-keyframes teacherSpaSidebarFadeIn { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: none; filter: none; } } @-webkit-keyframes teacherSpaSidebarFadeIn { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: none; filter: none; } } @-o-keyframes teacherSpaSidebarFadeIn { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: none; filter: none; } } @keyframes teacherSpaSidebarFadeIn { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 100% { opacity: 1; -ms-filter: none; filter: none; } } /* src/js/teacher-spa/new-activity-modal.styl */ .new-activity-modal-content { min-height: 0; max-width: 100%; margin: 0 auto; padding: 30px; position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .new-activity-modal-content .modal-header { font-size: 160%; color: #3b3b3b; text-align: left; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0; -ms-flex: 0; flex: 0; } .new-activity-modal-content .flex-container { max-height: 100%; padding-top: 5px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .new-activity-modal-content .edit-activity-title { margin-bottom: 11px; color: #3b3b3b; } .new-activity-modal-content .edit-activity-title input { font-family: "open-sans", sans-serif; font-size: 160%; width: 100%; border: none; border-bottom: 1px solid #bdbdbd; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .new-activity-modal-content .edit-activity-title input::placeholder { color: #676767; font-style: italic; } .new-activity-modal-content .edit-activity-title input.dcg-hovered { border-color: #9c0d63; color: #3b3b3b; } .new-activity-modal-content .edit-activity-title input.dcg-depressed { color: #3b3b3b; } .new-activity-modal-content .edit-activity-title input:focus { outline: none; border-color: #9c0d63; } .new-activity-modal-content .btn { width: 100%; font-weight: 300; } .new-activity-modal-content .share-settings-chooser { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0; } .new-activity-modal-content .share-settings-title, .new-activity-modal-content .textarea-label { line-height: 33px; margin-bottom: 11px; } .new-activity-modal-content .ProseMirror { padding: 10px; min-height: 6em; max-height: 10em; overflow-y: auto; } .new-activity-modal-content .dcg-segmented-control-layout .btn { border-radius: 0; padding: 0 1em; } .new-activity-modal-content .dcg-segmented-control-layout .btn:not(.btn-blue) + .btn:not(.btn-blue) { border-left: 0; padding-left: calc(1em + 1px); } .new-activity-modal-content .dcg-segmented-control-layout .btn:not(.btn-blue) + .btn:not(.btn-blue):hover { border-left: 1px solid #9c0d63; padding-left: 1em; } .new-activity-modal-content .dcg-segmented-control-layout .btn:first-child { border-top-left-radius: 0.1875em; border-bottom-left-radius: 0.1875em; } .new-activity-modal-content .dcg-segmented-control-layout .btn:last-child { border-top-right-radius: 0.1875em; border-bottom-right-radius: 0.1875em; } .new-activity-modal-content .dcg-prosemirror-editor { border: 1px solid #bdbdbd; border-radius: 5px; } .new-activity-modal-content .dcg-prosemirror-editor.dcg-focused { border-color: #9c0d63; } .new-activity-modal-content .textarea-label, .new-activity-modal-content .theme-controls .setting-title { margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem) 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .new-activity-modal-content .mclass-checkbox, .new-activity-modal-content .next-only-checkbox { margin-top: 10px; } .new-activity-modal-content .theme-controls .setting-title { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); } .new-activity-modal-content .textarea-label, .new-activity-modal-content .author-group-selection-label, .new-activity-modal-content .share-settings-chooser .share-settings-title, .new-activity-modal-content .theme-controls .setting-title { color: #3b3b3b; font-size: 135%; } .new-activity-modal-content .share-settings-chooser .btn.btn-blue:hover, .new-activity-modal-content .theme-controls .btn.btn-blue:hover { border-color: #23538b; } .new-activity-modal-content .share-settings-chooser .btn.btn-blue:active, .new-activity-modal-content .theme-controls .btn.btn-blue:active { border-color: #193b62; } .new-activity-modal-content .share-settings-chooser .btn.btn-secondary:hover, .new-activity-modal-content .theme-controls .btn.btn-secondary:hover { -webkit-box-shadow: none; box-shadow: none; } .new-activity-modal-content .author-group-selection-container { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .new-activity-modal-content textarea { padding: 10px; font-size: 110%; width: 100%; height: 2.5em; } .new-activity-modal-content textarea::placeholder { color: #bdbdbd; } .new-activity-modal-content .new-activity-error { padding: 10px 0; color: #db2e00; } .footer-content-wrapper .new-activity-buttons { width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .footer-content-wrapper .new-activity-buttons .btn { font-size: 18px; font-weight: 300; } /* src/js/teacher-spa/paginated-list.styl */ .list-pagination { position: relative; min-height: 40px; } .list-pagination .results-description { color: #999; padding: 10px 0; position: absolute; top: 0; left: 0; } .list-pagination .results-page-navigation { text-align: center; } .list-pagination .results-page-navigation .btn-blue-outline { display: inline-block; margin: 0 5px; padding: 10px; position: relative; } .list-pagination .results-page-navigation .btn-blue-outline i { font-size: 80%; } .list-pagination .results-page-navigation .btn-blue-outline.previous-button { text-align: left; padding-right: 15px; } .list-pagination .results-page-navigation .btn-blue-outline.previous-button i { margin-right: 5px; } .list-pagination .results-page-navigation .btn-blue-outline.next-button { text-align: right; padding-left: 15px; } .list-pagination .results-page-navigation .btn-blue-outline.next-button i { margin-left: 5px; } .paginated-group .header-container .section-header { font-weight: 400; font-size: 150%; } @media screen and (max-width: 920px) { .list-pagination .results-description { display: block; position: relative; text-align: center; } } /* src/js/teacher-spa/random-tweets.styl */ .random-tweet-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin: 0 -10px; } .random-tweet-container .tweet-list-item { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .random-tweet-container .tweet-list-item .tweet-container { height: 100%; } .random-tweet-container .tweet-list-item .teacher { height: 100%; border: 1px solid #bdbdbd; border-radius: 0.1875em; padding: 40px 35px; margin: 0 10px; color: #333; background: rgba(255,255,255,0.9); } .random-tweet-container .tweet-list-item .twitter-bio-info { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin-bottom: 10px; max-width: 100%; } .random-tweet-container .tweet-list-item .twitter-bio-info .twitter-image img { width: 61px; border-radius: 50%; margin-right: 16px; } .random-tweet-container .tweet-list-item .twitter-bio-info .twitter-name { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; max-width: calc(100% - 100px); font-size: 1.2em; font-weight: 700; } .random-tweet-container .tweet-list-item .twitter-bio-info .twitter-name .handle-link { text-decoration: none; font-weight: 400; font-size: 16.8px; line-height: 32px; } .random-tweet-container .tweet-list-item .tweet-content { font-size: 16.8px; line-height: 24px; } /* src/js/teacher-spa/search/search-box.styl */ .top-bar-search-box-container .search-box .search-button, .sidebar-search-box-container .search-box .search-button { position: absolute; top: 0; right: 0; z-index: 10; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 36px; width: 50px; text-align: center; } .top-bar-search-box-container { float: left; padding: 8px 0; width: 300px; line-height: 1.6em; } .top-bar-search-box-container .search-box .search-suggestions { position: absolute; top: 37px; left: 3px; right: 50px; z-index: 5; } .sidebar-search-box-container .search-box .search-suggestions { position: absolute; top: 38px; left: 0; right: 0; z-index: 1; } .amp-styles .search-button.btn i { margin: 0; } .amp-styles .form-control.search-input { padding-right: 50px; } .search-box { position: relative; width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .search-box input { display: inline-block; padding-left: 10px; padding-right: 50px; font-size: 100%; height: 36px !important; line-height: 26px !important; width: 100%; background: transparent; border-radius: 0.1875em !important; } .search-box .dropdown-suggestion-title { padding: 5px 10px 0; text-transform: uppercase; color: #3b3b3b; cursor: default; font-size: 80%; } .search-box .dropdown-container { padding-bottom: 5px; } .search-box .search-suggestions { -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; background: #fff; border: 1px solid #e2e2e2; border-top: 0; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; -webkit-box-shadow: 3px 0 3px rgba(0,0,0,0.05), -3px 0 3px rgba(0,0,0,0.05), 0 3px 3px rgba(0,0,0,0.05), 3px 3px 3px rgba(0,0,0,0.05), -3px 3px 3px rgba(0,0,0,0.05); box-shadow: 3px 0 3px rgba(0,0,0,0.05), -3px 0 3px rgba(0,0,0,0.05), 0 3px 3px rgba(0,0,0,0.05), 3px 3px 3px rgba(0,0,0,0.05), -3px 3px 3px rgba(0,0,0,0.05); } .search-box .search-suggestions .no-suggestions { padding: 10px; text-align: center; color: #bbb; font-size: 90%; } .search-box .search-suggestions .suggestion-item { padding: 5px 10px; cursor: pointer; color: #666; } .search-box .search-suggestions .suggestion-item .title-text { width: 100%; } .search-box .search-suggestions .suggestion-item.dcg-hovered, .search-box .search-suggestions .suggestion-item.selected { background: rgba(50,120,200,0.15); color: #000; } .search-box .search-suggestions .suggestion-item b { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } @media screen and (max-width: 1100px) { .top-bar-search-box-container { width: initial; } } @media screen and (max-width: 680px) { .top-bar-search-box-container { width: 100%; } .search-box { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .search-box input { width: calc(100% - 50px); margin-left: 0; } } /* src/js/teacher-spa/search/search-dropdown-activity.styl */ .search-dropdown-activity { min-height: 40px; text-decoration: none; position: relative; display: block; } .search-dropdown-activity .preview-card .search-activity-thumb { filter: grayscale(1); } .search-dropdown-activity img { width: 30px; height: 30px; border: 1px solid #e2e2e2; border-radius: 3px; position: absolute; top: 5px; left: 10px; } .search-dropdown-activity .right-container { padding: 0px 0px 0px 35px; height: 30px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: start; align-items: start; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .search-dropdown-activity .right-container .title-text { display: block; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; font-size: 95%; } .search-dropdown-activity .right-container .preview-tag { font-size: 8pt; color: #999; } /* src/js/teacher-spa/search/search-dropdown-collection.styl */ .search-dropdown-collection { min-height: 40px; text-decoration: none; position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; width: 100%; } .search-dropdown-collection .collection-thumb { width: 64px; height: 30px; margin-right: 5px; -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .search-dropdown-collection .color-ribbon { min-width: 7px; margin-right: 5px; border-radius: 2px; } .search-dropdown-collection .right-container { height: 30px; overflow: hidden; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .search-dropdown-collection .right-container .title-text { display: block; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; font-size: 95%; } /* src/js/teacher-spa/search/search-results.styl */ .search-results.fade-in { -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .search-results .no-search-results { text-align: center; color: #666; } .search-results .no-search-results .no-results-title { font-size: 28px; padding: 50px 0 20px; max-width: 700px; margin: 0 auto; } .search-results .no-search-results .no-results-description { font-size: 18px; padding: 20px 0; max-width: 750px; margin: 0 auto; } @media screen and (max-width: 680px) { .search-results { padding-top: 0; } } /* src/js/teacher-spa/sidebar-collections.styl */ .grouped-sidebar-container.collection-sidebar .menu-item.unreleased, .grouped-sidebar-container.collection-sidebar .menu-item.access--list-only { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); font-style: italic; } .grouped-sidebar-container.collection-sidebar .menu-item.unreleased .icon-v2-chevron-right, .grouped-sidebar-container.collection-sidebar .menu-item.access--list-only .icon-v2-chevron-right { display: none; } .grouped-sidebar-container.collection-sidebar .menu-item.unclickable { pointer-events: none; } .grouped-sidebar-container.collection-sidebar .menu-item:not(.selected).dcg-hovered:not(.collection-item):before { background: #3b3b3b; } .grouped-sidebar-container.collection-sidebar .menu-item:not(.selected).dcg-depressed:not(.collection-item):before { background: #080808; } .grouped-sidebar-container.collection-sidebar .menu-item.has-icon > .dcg-tooltip-hit-area-container .icon-v2-error { color: #fa824c; } .grouped-sidebar-container.collection-sidebar .menu-item.access--preview .icon-v2-paper, .grouped-sidebar-container.collection-sidebar .menu-item.access--restricted .icon-v2-paper { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } .grouped-sidebar-container.collection-sidebar .menu-item.assigned:not(.selected):before { background: #bdbdbd; } .grouped-sidebar-container.collection-sidebar .collection-item.private-placeholder.dropdown-choice, .grouped-sidebar-container.collection-sidebar .activity-item.private-placeholder.dropdown-choice, .grouped-sidebar-container.collection-sidebar .collection-item.private-placeholder .item-name, .grouped-sidebar-container.collection-sidebar .activity-item.private-placeholder .item-name { font-style: italic; } .grouped-sidebar-container.collection-sidebar .collection-item.private-placeholder .icon-v2-error, .grouped-sidebar-container.collection-sidebar .activity-item.private-placeholder .icon-v2-error { font-size: 80%; } .grouped-sidebar-container.collection-sidebar .grouped-sidebar .menu-item.has-icon.private-placeholder > .dcg-tooltip-hit-area-container { left: -3px; top: 6px; font-size: 80%; } .grouped-sidebar-container.collection-sidebar .dropdown-container .dropdown-choice.collection-item.selected { background: #e9e9e9; font-weight: 500; } @-webkit-keyframes fadeIn-down { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translate(0, -6px); -moz-transform: translate(0, -6px); -o-transform: translate(0, -6px); -ms-transform: translate(0, -6px); transform: translate(0, -6px); } 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; -ms-filter: none; filter: none; } } @keyframes fadeIn-down { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translate(0, -6px); -moz-transform: translate(0, -6px); -o-transform: translate(0, -6px); -ms-transform: translate(0, -6px); transform: translate(0, -6px); } 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; -ms-filter: none; filter: none; } } /* src/js/teacher-spa/sidebar-grouped.styl */ .grouped-sidebar-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; height: 100%; -webkit-box-pack: stretch; -moz-box-pack: stretch; -o-box-pack: stretch; -ms-flex-pack: stretch; -webkit-justify-content: stretch; justify-content: stretch; } .grouped-sidebar-container .grouped-sidebar { width: 100%; padding-left: 10px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .grouped-sidebar-container .grouped-sidebar .parent-group { margin-right: 0; } .grouped-sidebar-container .grouped-sidebar .parent-group + .parent-group { margin-top: 10px; } .grouped-sidebar-container .grouped-sidebar .parent-group-divided-btn.divided-btn.has-border .dropdown-container { width: 195px; } .grouped-sidebar-container .grouped-sidebar .parent-group-divided-btn.divided-btn.has-border .dropdown-container .dropdown-choice.unreleased { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); font-style: italic; } .grouped-sidebar-container .grouped-sidebar .parent-group-divided-btn.divided-btn.has-border .dropdown-container .dropdown-choice.unclickable { pointer-events: none; } .grouped-sidebar-container .grouped-sidebar .parent-group-divided-btn.divided-btn.has-border .divided-btn-dropdown { color: #bdbdbd; } .grouped-sidebar-container .grouped-sidebar .parent-group-divided-btn.divided-btn.has-border .divided-btn-dropdown .dcg-shared-options-dropdown { max-height: calc(100vh - 240px); overflow-y: auto; } .grouped-sidebar-container .grouped-sidebar .parent-group-divided-btn.divided-btn.has-border .divided-btn-dropdown .dcg-shared-options-dropdown .option-icon-container { width: 12px; margin-right: 5px; } .grouped-sidebar-container .grouped-sidebar .parent-group-divided-btn.divided-btn.has-border .divided-btn-dropdown .dcg-shared-options-dropdown .option-icon-container i { font-size: 1em; } .grouped-sidebar-container .grouped-sidebar .parent-group-divided-btn.divided-btn.has-border .divided-btn-segment, .grouped-sidebar-container .grouped-sidebar .parent-group-divided-btn.divided-btn.has-border .divided-btn-dropdown .anchor-container .divided-btn-dropdown-arrow { background: #fff; border: 1px solid #bdbdbd; color: #3b3b3b; -webkit-box-shadow: none; box-shadow: none; } .grouped-sidebar-container .grouped-sidebar .parent-group-divided-btn.divided-btn.has-border .divided-btn-segment.dcg-hovered:not(.disabled):not(.current-page), .grouped-sidebar-container .grouped-sidebar .parent-group-divided-btn.divided-btn.has-border .divided-btn-dropdown .anchor-container .divided-btn-dropdown-arrow.dcg-hovered:not(.disabled):not(.current-page) { color: #080808; } .grouped-sidebar-container .grouped-sidebar .parent-group-divided-btn.divided-btn.has-border .divided-btn-segment.dcg-depressed:not(.disabled):not(.current-page), .grouped-sidebar-container .grouped-sidebar .parent-group-divided-btn.divided-btn.has-border .divided-btn-dropdown .anchor-container .divided-btn-dropdown-arrow.dcg-depressed:not(.disabled):not(.current-page) { color: #333; } .grouped-sidebar-container .grouped-sidebar .parent-group-divided-btn.divided-btn.has-border .divided-btn-dropdown .anchor-container .divided-btn-dropdown-arrow { border-left: none; } .grouped-sidebar-container .grouped-sidebar .parent-group-divided-btn.divided-btn.has-border .divided-btn-dropdown.dcg-hovered:not(.disabled) { color: #080808; } .grouped-sidebar-container .grouped-sidebar .parent-group-divided-btn.divided-btn.has-border .divided-btn-dropdown.dcg-hovered:not(.disabled) .anchor-container .divided-btn-dropdown-arrow { background: rgba(0,0,0,0.05); } .grouped-sidebar-container .grouped-sidebar .parent-group-divided-btn.divided-btn.has-border .divided-btn-dropdown.dcg-depressed:not(.disabled) { color: #333; } .grouped-sidebar-container .grouped-sidebar .parent-group-divided-btn.divided-btn.has-border .divided-btn-dropdown.dcg-depressed:not(.disabled) .anchor-container .divided-btn-dropdown-arrow { background: rgba(0,0,0,0.1); border-left: none; } .grouped-sidebar-container .grouped-sidebar .parent-group-single-btn a, .grouped-sidebar-container .grouped-sidebar .parent-group-divided-btn a { text-decoration: none; } .grouped-sidebar-container .grouped-sidebar .parent-group-single-btn { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background: #fff; color: #080808; text-decoration: none; white-space: nowrap; line-height: 40px; margin-right: 0; border: 1px solid #bdbdbd; border-radius: 3px; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: 0.2s opacity; -moz-transition: 0.2s opacity; -o-transition: 0.2s opacity; -ms-transition: 0.2s opacity; transition: 0.2s opacity; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .grouped-sidebar-container .grouped-sidebar .parent-group-single-btn .btn-text { -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .grouped-sidebar-container .grouped-sidebar .parent-group-single-btn .back-arrow-container { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; width: 0; } .grouped-sidebar-container .grouped-sidebar .parent-group-single-btn .back-arrow-container i { font-size: 90%; } .grouped-sidebar-container .grouped-sidebar .parent-group-single-btn.dcg-hovered .back-arrow-container, .grouped-sidebar-container .grouped-sidebar .parent-group-single-btn.dcg-depressed .back-arrow-container { display: inline-block; opacity: 1; -ms-filter: none; filter: none; width: 15px; -webkit-transform: translateX(-4px); -moz-transform: translateX(-4px); -o-transform: translateX(-4px); -ms-transform: translateX(-4px); transform: translateX(-4px); } .grouped-sidebar-container .grouped-sidebar .parent-group-single-btn, .grouped-sidebar-container .grouped-sidebar .divided-btn-main-link { width: 100%; padding: 0 10px; } .grouped-sidebar-container .grouped-sidebar .parent-group-single-btn.dcg-hovered:not(.disabled):not(.current-page), .grouped-sidebar-container .grouped-sidebar .divided-btn-main-link.dcg-hovered:not(.disabled):not(.current-page) { color: #333; background: rgba(0,0,0,0.05); } .grouped-sidebar-container .grouped-sidebar .parent-group-single-btn.dcg-depressed:not(.disabled):not(.current-page), .grouped-sidebar-container .grouped-sidebar .divided-btn-main-link.dcg-depressed:not(.disabled):not(.current-page) { color: #111; background: rgba(0,0,0,0.1); } .grouped-sidebar-container .grouped-sidebar .parent-group-single-btn.current-page, .grouped-sidebar-container .grouped-sidebar .divided-btn-main-link.current-page { position: relative; padding-left: 26px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; cursor: default; color: #9c0d63; } .grouped-sidebar-container .grouped-sidebar .parent-group-single-btn.current-page .btn-text, .grouped-sidebar-container .grouped-sidebar .divided-btn-main-link.current-page .btn-text { color: #9c0d63; text-decoration-color: #9c0d63; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .grouped-sidebar-container .grouped-sidebar .parent-group-single-btn.current-page:not(.has-icon):before, .grouped-sidebar-container .grouped-sidebar .divided-btn-main-link.current-page:not(.has-icon):before { content: ''; position: absolute; top: 45%; left: 11px; width: 10px; height: 10px; border-radius: 50%; background: #9c0d63; display: inline-block; margin-top: -4px; } .grouped-sidebar-container .grouped-sidebar .current-page-group { -webkit-animation: fadeIn-down 0.3s; -moz-animation: fadeIn-down 0.3s; -o-animation: fadeIn-down 0.3s; -ms-animation: fadeIn-down 0.3s; animation: fadeIn-down 0.3s; margin-top: 10px; overflow-y: auto; padding: 0 0.5em; } .grouped-sidebar-container .grouped-sidebar .current-page-group .divider { border-bottom: 1px solid #bdbdbd; } .grouped-sidebar-container .grouped-sidebar .loading { height: 15px; background: #f6f6f6; margin: 15px 10px; -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; } .grouped-sidebar-container .grouped-sidebar .loading:nth-of-type(even) { width: 65%; } .grouped-sidebar-container .grouped-sidebar .loading:nth-of-type(3n+1) { width: 80%; } .grouped-sidebar-container .grouped-sidebar .menu-item { font-size: 100%; max-width: 100%; padding: 5px 14px 5px; margin: 5px 0; color: #3b3b3b; text-decoration: none; position: relative; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .grouped-sidebar-container .grouped-sidebar .menu-item .item-prefix { margin-right: 5px; } .grouped-sidebar-container .grouped-sidebar .menu-item .item-name { padding-right: 5px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .grouped-sidebar-container .grouped-sidebar .menu-item .item-prefix, .grouped-sidebar-container .grouped-sidebar .menu-item .item-name { display: inline-block; } .grouped-sidebar-container .grouped-sidebar .menu-item.has-right-icon .item-name { margin-right: 10px; } .grouped-sidebar-container .grouped-sidebar .menu-item.has-right-icon i { position: absolute; top: 6px; right: 0; -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } .grouped-sidebar-container .grouped-sidebar .menu-item.dcg-hovered i { -webkit-transform: translate3d(4px, 0, 0); -moz-transform: translate3d(4px, 0, 0); -o-transform: translate3d(4px, 0, 0); -ms-transform: translate3d(4px, 0, 0); transform: translate3d(4px, 0, 0); } .grouped-sidebar-container .grouped-sidebar .menu-item:not(.selected).dcg-hovered { color: #080808; } .grouped-sidebar-container .grouped-sidebar .menu-item:not(.selected).dcg-depressed { color: #000; } .grouped-sidebar-container .grouped-sidebar .menu-item.selected { color: #9c0d63; } .grouped-sidebar-container .grouped-sidebar .menu-item.selected:before { background: #9c0d63; } .grouped-sidebar-container .grouped-sidebar .menu-item.selected.dcg-hovered, .grouped-sidebar-container .grouped-sidebar .menu-item.selected.dcg-depressed { cursor: default; } .grouped-sidebar-container .grouped-sidebar .menu-item.has-icon > .dcg-tooltip-hit-area-container { position: absolute; top: 9px; left: 0; font-size: 90%; } .grouped-sidebar-container .grouped-sidebar .menu-item.has-icon > .dcg-tooltip-hit-area-container i { font-size: 1em; position: relative; right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); } .grouped-sidebar-container .grouped-sidebar .menu-item:not(.has-icon):before { content: ''; position: absolute; top: 8px; left: -3px; 0: 0; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-top: 4px; } @-webkit-keyframes fadeIn-down { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translate(0, -6px); -moz-transform: translate(0, -6px); -o-transform: translate(0, -6px); -ms-transform: translate(0, -6px); transform: translate(0, -6px); } 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; -ms-filter: none; filter: none; } } @keyframes fadeIn-down { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: translate(0, -6px); -moz-transform: translate(0, -6px); -o-transform: translate(0, -6px); -ms-transform: translate(0, -6px); transform: translate(0, -6px); } 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; -ms-filter: none; filter: none; } } /* src/js/teacher-spa/sidebar.styl */ .default-side-bar-container .side-bar-group { margin: 10px 10px 60px; } .default-side-bar-container .side-bar-group:last-child { margin: 10px 10px 24px; } .default-side-bar-container .side-bar-group .side-bar-header { text-transform: uppercase; font-size: 78%; margin-top: 0; margin-bottom: 0; } .default-side-bar-container .side-bar-group .menu-item-gray { font-size: 100%; max-width: 100%; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } /* src/js/teacher-spa/site-admin/accounts-clever-panel.styl */ .amp-styles .clever-panel .edit-clever-site-button { text-decoration: none; } .amp-styles .clever-panel .edit-clever-site-button i { font-size: 120%; } .amp-styles .clever-panel .edit-clever-site-button span { text-decoration: underline; } .amp-styles .clever-panel .edit-clever-site-button.dcg-hovered span { text-decoration-color: transparent; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s; } .clever-panel { background-color: #fff; border: 1px solid #e2e2e2; border-radius: 3px; padding: 25px; margin-top: 10px; } .clever-panel .clever-status-error-message { text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; margin: 10px auto; width: 300px; } .clever-panel .id-domains-container { font-size: 110%; } .clever-panel .id-domains-container.has-district-options { border-bottom: 1px solid #bdbdbd; padding-bottom: 20px; } .clever-panel .id-domains-container .clever-id-and-edit { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 12px; } .clever-panel .id-domains-container .label { font-weight: bold; margin-right: 5px; } .clever-panel .id-domains-container .email-domains-edit-clever-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .clever-panel .id-domains-container .email-domains-edit-clever-container .email-domains-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; margin-bottom: 5px; } .clever-panel .id-domains-container .email-domains-edit-clever-container .email-domains-container .allowed-email-domains { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .clever-panel .id-domains-container .email-domains-edit-clever-container .email-domain { background: #e2e2e2; padding: 2px 8px; border-radius: 25px; font-size: 17px; margin: 0px 5px 2px 0px; } .clever-panel .id-domains-container .email-domains-edit-clever-container .edit-clever-link span { font-size: 90%; text-decoration: none; } .clever-panel .sync-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .clever-panel .sync-container .sync-error { text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; margin-top: 10px; } .clever-panel .sync-container .sync-button { margin: 20px 0px 10px 0px; width: 300px; text-align: center; font-size: 18px; } .clever-panel .sync-container .last-sync { font-size: 16px; color: #3b3b3b; } .clever-panel .sync-errors { margin-top: 10px; } .clever-panel .sync-errors .icon-v2-warning { color: #d8a202; margin-right: 5px; } .clever-panel .sync-errors .error-list { margin-left: 24px; } .clever-panel .sync-errors .error-list .error-item { margin-top: 5px; } .clever-panel .sync-errors .error-list .error-item .error-message { color: #3b3b3b; } /* src/js/teacher-spa/site-admin/accounts-page.styl */ .site-accounts-page { width: 100%; padding: 10px 20px; } .site-accounts-page .dashboard-button-learn-more-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 10px; } .site-accounts-page .dashboard-button-learn-more-container .back-to-dashboard { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .site-accounts-page .dashboard-button-learn-more-container .back-to-dashboard .icon-v2-chevron-left { text-decoration: none; margin-right: 5px; font-size: 110%; } .site-accounts-page .dashboard-button-learn-more-container .add-teachers .icon-v2-information { margin-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 0.5); font-size: 110%; position: relative; top: 2px; } .site-accounts-page .accounts-page-header { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .site-accounts-page .header-text { -webkit-flex-basis: 80%; flex-basis: 80%; } .site-accounts-page .admin-links { font-size: 90%; margin-top: 5px; } .site-accounts-page .admin-links .vertical-divider { border-left: 1px solid #bdbdbd; margin: 0 10px; } .site-accounts-page .site-user-table-container { margin-top: 30px; } .site-accounts-page .site-user-table-container .district-user-info { margin-bottom: 10px; color: #333; font-size: 90%; } .site-accounts-page .site-user-table-container .content-cell:not(.actions-column) { overflow: hidden; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; padding-right: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .site-accounts-page .site-user-table-container .content-cell:not(.actions-column) .disabled { opacity: 50%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=5000%)"; filter: alpha(opacity=5000%); font-style: italic; } .site-accounts-page .site-user-table-container .name-column { width: 25%; } .site-accounts-page .site-user-table-container .name-column .dcg-tooltip-hit-area-container { margin-left: 10px; } .site-accounts-page .site-user-table-container .name-column .dcg-tooltip-hit-area-container .icon-v2-person { color: #3b3b3b; } .site-accounts-page .site-user-table-container .name-column > span { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .site-accounts-page .site-user-table-container .email-column { width: 30%; } .site-accounts-page .site-user-table-container .role-column { width: 20%; } .site-accounts-page .site-user-table-container .status-column { width: 20%; } .site-accounts-page .site-user-table-container .actions-column { width: 5%; height: 40px; } .site-accounts-page .site-user-table-container .actions-column .dot-dot-dropdown-container { float: right; } .site-accounts-page .site-user-table-container .actions-column .dot-dot-dropdown-container .dropdown-container-inner { margin-top: 2px; } .site-accounts-page .site-user-table-container .actions-column .dcg-shared-options-dropdown:after { content: ""; position: absolute; top: -9px; right: 10px; border-width: 9px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .site-accounts-page .site-user-table-container .actions-column .dcg-shared-options-dropdown:before { content: ""; position: absolute; top: -10px; right: 9px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .site-accounts-page .site-user-table-container .actions-column .dcg-shared-options-dropdown .option-remove-user, .site-accounts-page .site-user-table-container .actions-column .dcg-shared-options-dropdown .option-remove-admin, .site-accounts-page .site-user-table-container .actions-column .dcg-shared-options-dropdown .option-cancel-invitation { color: #db2e00; } .site-accounts-page .site-user-table-container .actions-column .dcg-shared-options-dropdown .option-edit-user-role { color: #3278c8; } .site-accounts-page .site-user-table-container .actions-column .site-account-dropdown { margin-top: -1px; } .site-accounts-page .site-admin-toast { min-width: 200px; text-align: center; font-size: 100%; } /* src/js/teacher-spa/site-admin/chart-week-switcher.styl */ .chart-week-switcher { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; margin-bottom: 5px; } .chart-week-switcher .week-label { margin: 0 10px; width: 120px; text-align: center; padding-bottom: 2px; } .chart-week-switcher .chart-nav-button { text-decoration: none; display: block; background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.05); border-radius: 50%; width: 30px; height: 30px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .chart-week-switcher .chart-nav-button.dcg-hovered { background: rgba(0,0,0,0.1); } .chart-week-switcher .chart-nav-button.dcg-depressed { background: rgba(0,0,0,0.15); } .chart-week-switcher .chart-nav-button.disabled { color: #666; pointer-events: none; opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); } .chart-week-switcher .chart-nav-button i { margin-right: 0px; font-size: 90%; } .chart-week-switcher .chart-nav-button i.pillow-icon-chevron-right { position: relative; left: 1px; } .chart-week-switcher .chart-nav-button i.pillow-icon-chevron-left { position: relative; right: 1px; } /* src/js/teacher-spa/site-admin/clever-site-modal.styl */ .clever-site-modal-contents .text-input-field { width: 100%; margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } .clever-site-modal-contents .amplify-toast { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem); } /* src/js/teacher-spa/site-admin/dashboard.styl */ .site-dashboard-page { color: #333; } .site-dashboard-page h2 { font-size: 140%; } .site-dashboard-page .dashboard-header { margin: 10px 0 20px; } .site-dashboard-page .dashboard-header .name-resources-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: baseline; -moz-box-align: baseline; -o-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; } .site-dashboard-page .dashboard-header .name-resources-container .site-name { -webkit-flex-basis: 80%; flex-basis: 80%; } .site-dashboard-page .dashboard-header .name-resources-container .pillow-icon-clipboard { margin-right: 3px; color: #3b3b3b; } .site-dashboard-page .dashboard-header .license-expiration-info { color: #3b3b3b; font-size: 90%; } .site-dashboard-page .chart-elements { margin-top: 60px; } .site-dashboard-page .chart-elements.bubble-chart { margin-bottom: 60px; } .site-dashboard-page .site-accounts-container .header { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: baseline; -moz-box-align: baseline; -o-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; margin-bottom: 10px; } .site-dashboard-page .site-accounts-container .header .title { margin-top: 0.5em; } .site-dashboard-page .site-accounts-container .accounts-table { width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; background: #fff; } .site-dashboard-page .site-accounts-container .accounts-table .panel-left { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; border: 1px solid #bdbdbd; border-radius: 5px 0 0 5px; border-right: none; } .site-dashboard-page .site-accounts-container .accounts-table .panel-right { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; border: 1px solid #bdbdbd; border-radius: 0 5px 5px 0; } .site-dashboard-page .site-accounts-container .accounts-table .teacher-accounts, .site-dashboard-page .site-accounts-container .accounts-table .school-counts { text-align: center; padding: 10px 0; } .site-dashboard-page .site-accounts-container .accounts-table .teacher-accounts .count, .site-dashboard-page .site-accounts-container .accounts-table .school-counts .count { font-size: 200%; } .site-dashboard-page .site-accounts-container .accounts-table .teacher-invite-status { height: 100%; padding: 12px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .site-dashboard-page .site-accounts-container .accounts-table .teacher-invite-status .accepted { background: rgba(0,134,107,0.1); color: #00866b; border: 1px solid rgba(0,134,107,0.2); margin-bottom: 5px; } .site-dashboard-page .site-accounts-container .accounts-table .teacher-invite-status .pending { background: rgba(50,120,200,0.1); color: #3278c8; border: 1px solid rgba(50,120,200,0.2); } .site-dashboard-page .site-accounts-container .accounts-table .teacher-invite-status .status-bar { border-radius: 3px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; padding: 2px 10px; } .site-dashboard-page .site-accounts-container .accounts-table .teacher-invite-status .status-bar .count { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .site-dashboard-page .chart-elements .chart-heading .title-update-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: baseline; -moz-box-align: baseline; -o-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; margin-bottom: 10px; } .site-dashboard-page .chart-elements .chart-heading .title-update-container .last-updated { color: #3b3b3b; font-style: italic; font-size: 90%; } .site-dashboard-page .chart-elements .chart-heading .title-update-container .chart-title { margin-top: 0.5em; } .site-dashboard-page .chart-elements .chart-heading .chart-description > div { margin-bottom: 10px; } .site-dashboard-page .chart-elements .chart-heading .chart-description { margin: 10px 0 20px; } .site-dashboard-page .bar-chart-placeholder { padding-bottom: 33%; } .site-dashboard-page .bubble-chart-placeholder { padding-bottom: 25%; } .site-dashboard-page .chart-placeholder { width: 100%; position: relative; height: 100%; border: 1px solid #bdbdbd; background: #fff; border-radius: 5px; } .site-dashboard-page .chart-placeholder .chart-placeholder-content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .site-dashboard-page .chart-placeholder .chart-placeholder-content.empty-content { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #3b3b3b; } .site-dashboard-page .chart-placeholder .chart-placeholder-content.empty-content img { width: 175px; margin-bottom: 20px; } .site-dashboard-page .chart-placeholder .chart-placeholder-content.loading-content { font-size: 120%; -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; color: #3b3b3b; } .site-dashboard-page .chart-placeholder .chart-placeholder-content.error-content { color: #3b3b3b; } .site-dashboard-page .chart-placeholder .chart-placeholder-content.error-content i { color: #fa824c; margin-right: 5px; font-size: 80%; } /* src/js/teacher-spa/site-admin/invite-users-modal.styl */ .invite-users-modal .modal-description { margin-bottom: 15px; color: #333; } .invite-users-modal .email-input-table-container { margin-top: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2); margin-bottom: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 4); } .invite-users-modal .table-column-email, .invite-users-modal .table-column-role { width: calc(50% - 37.5px); } .invite-users-modal .table-column-delete { width: 10%; } .invite-users-modal .table-column-delete .delete-row-button { width: 100%; text-align: center; width: fit-content; } .invite-users-modal .table-column-delete .delete-row-button.dcg-hovered .pillow-icon-remove, .invite-users-modal .table-column-delete .delete-row-button.dcg-depressed .pillow-icon-remove { color: #666; } .invite-users-modal .table-column-role .dcg-search-container { overflow: visible; } .invite-users-modal .table-column-role .dcg-search-container .dcg-searchable-dropdown { width: 100%; } .invite-users-modal .table-column-role .dcg-search-container .dcg-searchable-dropdown-list-container, .invite-users-modal .table-column-role .dcg-search-container .dcg-no-search-results { position: absolute; width: 100%; top: calc(100% - 1px); max-height: 9.3em; } /* src/js/teacher-spa/site-admin/loading-activity-list.styl */ .activity-list-loading .loading-activity-card { -webkit-animation: pulse 2s infinite; -moz-animation: pulse 2s infinite; -o-animation: pulse 2s infinite; -ms-animation: pulse 2s infinite; animation: pulse 2s infinite; background: #fff; height: 110px; border-radius: 7px; margin-bottom: 15px; } /* src/js/teacher-spa/site-admin/move-user-modal.styl */ .move-user-modal-contents h2 { font-size: 100%; margin: 20px 0 10px; } .move-user-modal-contents .select-site-container { position: relative; height: 40px; } .move-user-modal-contents .select-site-container .dcg-search-container { position: absolute; top: 0; height: 10em; width: 100%; } .move-user-modal-contents .spacer { height: 206px; } .move-user-modal-contents .confirmation-message { text-align: center; margin: 1em 0; padding: 20px; background: #dae6f1; border: 1px solid #3c6d9d; border-radius: 4px; } .move-user-modal-contents .confirmation-message .current-site, .move-user-modal-contents .confirmation-message .target-site { margin: 1em 0; } .move-user-modal-contents .confirmation-message .site-name { margin-right: 0.5em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; } .move-user-modal-contents .submit-buttons { margin-top: 10px; text-align: right; } .move-user-modal-contents .submit-buttons .btn-blue { margin-left: 20px; } /* src/js/teacher-spa/site-admin/school-table.styl */ .school-table-container { margin-top: 10px; } .school-table-container .school-name-column { width: 55%; } .school-table-container .school-name-column .license-message { font-size: 85%; font-style: italic; color: #676767; } .school-table-container .curriculum-users-column { width: 20%; } .school-table-container .school-dashboard-column { width: 20%; } .school-table-container .actions-column { height: 40px; width: 5%; } .school-table-container .actions-column .dot-dot-dropdown-container { float: right; margin-top: -1px; } .school-table-container .actions-column .dcg-shared-options-dropdown:after { content: ""; position: absolute; top: -9px; right: 10px; border-width: 9px; border-top-width: 0; border-style: solid; border-color: transparent transparent #fff; line-height: 0; } .school-table-container .actions-column .dcg-shared-options-dropdown:before { content: ""; position: absolute; top: -10px; right: 9px; border-width: 10px; border-top-width: 0; border-style: solid; border-color: transparent transparent #bdbdbd; line-height: 0; } .school-table-container .actions-column .dropdown-container-inner { top: 2px !important; } .school-table-container .school-table-actions { margin-top: 10px; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: end; justify-content: end; } .school-table-container .school-table-empty-content { width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 20px 0; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #666; } .school-table-container .school-table-empty-content img { width: 175px; margin-bottom: 20px; } /* src/js/teacher-spa/site-admin/site-info-controls.styl */ .amp-styles .site-info-controls .download-btn, .amp-styles .site-info-controls .edit-site-button, .amp-styles .site-info-controls .make-clever-district-button { text-decoration: none; } .amp-styles .site-info-controls .download-btn i, .amp-styles .site-info-controls .edit-site-button i, .amp-styles .site-info-controls .make-clever-district-button i { font-size: 120%; position: relative; top: 1.5px; } .amp-styles .site-info-controls .download-btn span, .amp-styles .site-info-controls .edit-site-button span, .amp-styles .site-info-controls .make-clever-district-button span { text-decoration: underline; } .amp-styles .site-info-controls .download-btn.dcg-hovered span, .amp-styles .site-info-controls .edit-site-button.dcg-hovered span, .amp-styles .site-info-controls .make-clever-district-button.dcg-hovered span { text-decoration-color: transparent; -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s; } .site-info-controls .license-expiration-info { color: #3b3b3b; font-size: 90%; } .site-info-controls .edit-site-button { color: #3278c8; } .site-info-controls .edit-site-button span { text-decoration: underline; } .site-info-controls .edit-site-button.dcg-hovered { color: #1e4878; } .site-info-controls .edit-site-button.dcg-depressed { color: #0f243c; } .site-info-controls .with-border { margin-left: 10px; padding-left: 10px; border-left: 1px solid #bdbdbd; } .site-info-controls .edit-access-clever-controls { margin-top: 10px; font-size: 90%; } /* src/js/teacher-spa/site-admin/site-user-edit-role-modal.styl */ .site-user-edit-role-modal .dcg-shared-modal .dcg-shared-modal-contents-wrapper { overflow-y: visible; } .site-user-edit-role-modal-contents .error-message { text-align: center; font-size: 90%; background: rgba(219,46,0,0.1); padding: 5px; border: 1px solid rgba(219,46,0,0.5); border-radius: 3px; color: #db2e00; -webkit-animation: fadeIn 0.3s; -moz-animation: fadeIn 0.3s; -o-animation: fadeIn 0.3s; -ms-animation: fadeIn 0.3s; animation: fadeIn 0.3s; } .site-user-edit-role-modal-contents .column-contents { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; margin: calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 2) 0 calc(var(--rhythm-unit-px, 12) / 16 * 1rem * 5); } .site-user-edit-role-modal-contents .column-contents .column { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .site-user-edit-role-modal-contents .column-contents .column .column-label { color: #666; font-size: 90%; margin-bottom: 5px; } .site-user-edit-role-modal-contents .column-contents .name { margin: 10px 0; } .site-user-edit-role-modal-contents .column-contents .email { color: #666; } .site-user-edit-role-modal-contents .column-contents .edit-role-container { position: relative; } .site-user-edit-role-modal-contents .column-contents .edit-role-container .dcg-search-container { overflow: visible; } .site-user-edit-role-modal-contents .column-contents .edit-role-container .dcg-search-container .dcg-searchable-dropdown { width: 100%; } .site-user-edit-role-modal-contents .column-contents .edit-role-container .dcg-search-container .dcg-searchable-dropdown input { color: #333; padding-left: 10px; } .site-user-edit-role-modal-contents .column-contents .edit-role-container .dcg-search-container .dcg-searchable-dropdown-list-container, .site-user-edit-role-modal-contents .column-contents .edit-role-container .dcg-search-container .dcg-no-search-results { position: absolute; width: 100%; top: calc(100% - 1px); max-height: 9.3em; } /* src/js/teacher-spa/site-invite-modal/site-invite-modal.styl */ .site-invite-modal h1.site-invite-modal-title { font-size: 190%; font-weight: 200; } .site-invite-modal .desmos-math-img { width: 100%; margin: 20px auto; text-align: center; } .site-invite-modal .desmos-math-img img { max-width: 350px; } .site-invite-modal .site-contact-info div { display: inline; } .site-invite-modal .site-invite-modal-buttons { margin: 20px auto 0 auto; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: end; -moz-box-pack: end; -o-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .site-invite-modal .site-invite-modal-buttons .accept-invite-btn { margin-left: 20px; } /* src/js/teacher-spa/tweet.styl */ .homepage-tweet .tweet-container { margin-bottom: 20px; } .homepage-tweet .tweet-container .teacher { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; border: 1px solid #bdbdbd; border-radius: 5px; padding: 40px 35.5px; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .homepage-tweet .tweet-container .teacher .twitter-bio-info { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin-bottom: 16px; } .homepage-tweet .tweet-container .teacher .twitter-bio-info .twitter-name { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .homepage-tweet .tweet-container .teacher .twitter-bio-info .twitter-name .display-name { font-size: 1.2em; } .homepage-tweet .tweet-container .teacher .twitter-bio-info .twitter-name .handle-link { font-size: 16.8px; font-weight: 400; text-decoration: none; } .homepage-tweet .tweet-container .teacher .twitter-bio-info .twitter-image img { height: 50px; border-radius: 50%; margin-right: 20px; border: 1px solid #bdbdbd; } .homepage-tweet .tweet-container .teacher .tweet { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .homepage-tweet .tweet-container .teacher .tweet .hashtag, .homepage-tweet .tweet-container .teacher .tweet .mention { color: #999; } /* src/js/touch-action-polyfill.styl */ .touch-action-none { touch-action: none; } /* src/js/vendor/prosemirror/gapcursor/gapcursor.css */ .ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; } .ProseMirror-gapcursor:after { content: ""; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid black; animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite; } @keyframes ProseMirror-cursor-blink { to { visibility: hidden; } } .ProseMirror-focused .ProseMirror-gapcursor { display: block; } /* src/stylesheets/buttons-and-inputs.styl */ input.blue-outline, textarea.blue-outline, input.red-outline, textarea.red-outline { outline: none; border-radius: 5px; border: 1px solid #bdbdbd; padding: 5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input.blue-outline::-ms-clear, textarea.blue-outline::-ms-clear, input.red-outline::-ms-clear, textarea.red-outline::-ms-clear { display: none; } input.blue-outline:focus, textarea.blue-outline:focus { border: 1px solid #3278c8; -webkit-box-shadow: 0 0 0 1px #3278c8; box-shadow: 0 0 0 1px #3278c8; } input.red-outline:focus, textarea.red-outline:focus { border: 1px solid #db2e00; -webkit-box-shadow: 0 0 0 1px #db2e00; box-shadow: 0 0 0 1px #db2e00; } .btn-blue-outline { border: 1px solid #3278c8; border-radius: 5px; color: #3278c8; cursor: pointer; } .btn-blue-outline.dcg-hovered:not(.dcg-disabled) { color: #004f9b; -webkit-box-shadow: 0 0 0 1px #3278c8; box-shadow: 0 0 0 1px #3278c8; } .btn-blue-outline.dcg-depressed:not(.dcg-disabled) { background: #3278c8; color: #fff; } .btn-teal-outline { border: 1px solid #15b097; border-radius: 5px; color: #15b097; cursor: pointer; } .btn-teal-outline.dcg-hovered:not(.dcg-disabled) { color: #0a7060; -webkit-box-shadow: 0 0 0 1px #15b097; box-shadow: 0 0 0 1px #15b097; } .btn-teal-outline.dcg-depressed:not(.dcg-disabled) { background: #15b097; color: #fff; } .btn-white-outline { border: 1px solid rgba(255,255,255,0.9); border-radius: 5px; color: #fff; cursor: pointer; } .btn-white-outline.dcg-hovered:not(.dcg-disabled) { background: rgba(255,255,255,0.2); } .btn-white-outline.dcg-depressed:not(.dcg-disabled) { background: rgba(255,255,255,0.5); } .btn-gray-outline { border: 1px solid #bdbdbd; border-radius: 5px; cursor: pointer; line-height: 40px; } .btn-gray-outline.dcg-hovered:not(.dcg-disabled) { background: #e2e2e2; } .btn-gray-outline.dcg-depressed:not(.dcg-disabled) { background: #bbb; } .btn-gray-outline-white-fill, .btn-white, .k5-button-secondary { border: var(--secondary-button-border-default, 1px solid #bdbdbd); border-radius: var(--button-border-radius, 3px); cursor: pointer; background: var(--secondary-button-background-color, rgba(255,255,255,0.9)); color: var(--secondary-button-color, #666); } .btn-gray-outline-white-fill.dcg-hovered:not(.disabled), .btn-white.dcg-hovered:not(.disabled), .k5-button-secondary.dcg-hovered:not(.disabled) { background: var(--secondary-button-background-color, #fff); color: var(--secondary-button-color, #555); border-color: var(--secondary-button-border-color-hover, #999); } .btn-gray-outline-white-fill.dcg-depressed:not(.disabled), .btn-white.dcg-depressed:not(.disabled), .k5-button-secondary.dcg-depressed:not(.disabled) { background: var(--secondary-button-background-color, rgba(250,250,250,0.5)); color: var(--secondary-button-color, #333); border-color: var(--secondary-button-border-color-hover, #999); } .btn-blue-outline.dcg-disabled, .btn-teal-outline.dcg-disabled, .btn-white-outline.dcg-disabled, .btn-gray-outline.dcg-disabled { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); cursor: default; } .btn-outer-border { position: relative; background: #fff; border-radius: 7px; z-index: 1; display: inline-block; border: 6px solid #fff; } .btn-shared, .btn-red, .btn-gray, .btn-ctrl, .btn, .btn-teal, .btn-blue, .btn-white, .k5-button-secondary, .k5-button-primary { cursor: pointer; text-decoration: none; font-size: var(--button-font-size, 18px); font-weight: var(--button-font-weight); white-space: nowrap; padding: var(--button-padding, 0 20px); display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-box; display: inline-flex; -webkit-appearance: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -moz-user-select: -moz-none; } .btn-shared.btn-large, .btn-red.btn-large, .btn-gray.btn-large, .btn-ctrl.btn-large, .btn.btn-large, .btn-teal.btn-large, .btn-blue.btn-large, .btn-white.btn-large, .k5-button-secondary.btn-large, .k5-button-primary.btn-large { height: 44px; line-height: 44px; } .btn-red, .btn-gray, .btn-ctrl, .btn, .btn-teal, .btn-blue, .btn-white, .k5-button-secondary, .k5-button-primary { border-radius: var(--border-radius-large, 3px); line-height: 40px; } .btn-red, .btn-gray, .btn-ctrl, .btn, .btn-teal, .btn-blue, .k5-button-primary { border: none; } .btn-red.disabled, .btn-ctrl.disabled, .btn-gray.disabled, .btn-teal.disabled, .btn-blue.disabled, .btn-white.disabled, .k5-button-secondary.disabled, .btn-gray-outline-white-fill.disabled, .k5-button-primary.disabled { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); cursor: default; } .btn-red.disabled[ontap], .btn-ctrl.disabled[ontap], .btn-gray.disabled[ontap], .btn-teal.disabled[ontap], .btn-blue.disabled[ontap], .btn-white.disabled[ontap], .k5-button-secondary.disabled[ontap], .btn-gray-outline-white-fill.disabled[ontap], .k5-button-primary.disabled[ontap] { cursor: default; } .btn-ctrl { background: #fff; -webkit-box-shadow: 0 1px #ccc; box-shadow: 0 1px #ccc; } .btn-ctrl.dcg-hovered:not(.disabled) { background: #f4f4f4; } .btn-ctrl.dcg-depressed:not(.disabled) { -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); } .btn-red { color: #fff; background: #db2e00; } .btn-red.dcg-hovered:not(.disabled) { background: #b54848; } .btn-red.dcg-depressed:not(.disabled) { -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); } .btn-gray { color: #fff; text-shadow: 0 -1px #777; background: #999; border: 1px solid #888; -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.1), inset 0 -1px rgba(0,0,0,0.05); box-shadow: inset 0 1px rgba(255,255,255,0.1), inset 0 -1px rgba(0,0,0,0.05); } .btn-gray.dcg-hovered:not(.disabled) { background: #888; } .btn-gray.dcg-depressed:not(.disabled) { -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); } .btn-teal { color: #fff; background: #15b097; border: 1px solid #129e87; -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.1), inset 0 -1px rgba(0,0,0,0.05); box-shadow: inset 0 1px rgba(255,255,255,0.1), inset 0 -1px rgba(0,0,0,0.05); } .btn-teal.dcg-hovered:not(.disabled) { background: #129e87; -webkit-transition: background 0.2s; -moz-transition: background 0.2s; -o-transition: background 0.2s; -ms-transition: background 0.2s; transition: background 0.2s; } .btn-teal.dcg-depressed:not(.disabled) { background: #0f8371; border: 1px solid #0f8371; -webkit-box-shadow: none; box-shadow: none; } .btn-blue:not(.btn) { color: #fff; background: #3278c8; border: 1px solid #3f73a6; -webkit-box-shadow: inset 0 1px rgba(255,255,255,0.1), inset 0 -1px rgba(0,0,0,0.05); box-shadow: inset 0 1px rgba(255,255,255,0.1), inset 0 -1px rgba(0,0,0,0.05); } .btn-blue:not(.btn).dcg-hovered:not(.disabled) { background: #3f73a6; -webkit-transition: background 0.2s; -moz-transition: background 0.2s; -o-transition: background 0.2s; -ms-transition: background 0.2s; transition: background 0.2s; } .btn-blue:not(.btn).dcg-depressed:not(.disabled) { background: #35608a; border: 1px solid #35608a; -webkit-box-shadow: none; box-shadow: none; } .dark-gray-link { color: #666; cursor: pointer; text-decoration: underline; } .dark-gray-link.dcg-hovered { color: #333; } .dark-gray-link.dcg-depressed { color: #000; } .blue-link { color: #3278c8; cursor: pointer; text-decoration: underline; } .blue-link.dcg-hovered { color: #004f9b; } .blue-link.dcg-depressed { color: #033b70; } .teal-link { color: #15b097; cursor: pointer; text-decoration: underline; } .teal-link.dcg-hovered { color: #0a7060; } .teal-link.dcg-depressed { color: #01574a; } .red-link { color: #db2e00; cursor: pointer; text-decoration: underline; } .red-link.dcg-hovered { color: #ad1a1a; } .red-link.dcg-depressed { color: #860606; } .des-button-icon { margin-right: 5px; } .amplify-dropdown .dropdown-container:before { display: none; } .amp-styles .btn.btn-red { color: var(--button-red-color, #fff); background: var(--button-red-background-color, #db2e00); } .amp-styles .btn.btn-red:hover, .amp-styles .btn.btn-red:focus-visible { color: var(--button-red-color, #fff); background: var(--button-red-background-color-hover, #831c00); } .amp-styles .btn.btn-red:active { color: var(--button-red-color, #fff); background: var(--button-red-background-color-active, #420e00); } /* src/stylesheets/segmented-control.styl */ .dcg-segmented-control-layout { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .dcg-segmented-control-layout .dcg-segmented-control-btn { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; color: var(--segmented-control-button-font-color, #3b3b3b); min-height: var(--segmented-control-button-height, 40px); padding: var(--segmented-control-button-button-padding, 0 4px); font-weight: var(--segmented-control-button-font-weight); text-align: center; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border: var(--segmented-control-button-border, 1px solid #bdbdbd); border-radius: 0; } .dcg-segmented-control-layout .dcg-segmented-control-btn.dcg-hovered:not(.dcg-selected) { border-color: var(--segmented-control-button-border-color-hover, #9c0d63); } .dcg-segmented-control-layout .dcg-segmented-control-btn.dcg-selected { border: var(--segmented-control-button-border-selected, 1px solid #3278c8); background: var(--segmented-control-button-background-selected, #3278c8); -webkit-box-shadow: var(--segmented-control-button-box-shadow-selected); box-shadow: var(--segmented-control-button-box-shadow-selected); } .dcg-segmented-control-layout .dcg-segmented-control-btn.dcg-padded-segmented-control-btn { padding: 6px 4px; height: auto; } .dcg-segmented-control-layout .dcg-segmented-control-btn i { font-size: 120%; margin-right: 4px; vertical-align: middle; } .dcg-segmented-control-layout .dcg-segmented-control-btn:not(:last-of-type):not(.dcg-selected):not(.dcg-hovered) { border-right: 0; } .dcg-segmented-control-layout .dcg-segmented-control-btn.dcg-selected, .dcg-segmented-control-layout .dcg-segmented-control-btn.dcg-hovered { z-index: 1; } .dcg-segmented-control-layout .dcg-segmented-control-btn.dcg-selected:not(:last-of-type), .dcg-segmented-control-layout .dcg-segmented-control-btn.dcg-hovered:not(:last-of-type) { margin-right: var(--segmented-control-button-offset-center-border, -1px); } .dcg-segmented-control-layout .dcg-segmented-control-btn.dcg-hovered:not(.dcg-selected) { color: var(--segmented-control-button-font-color-hover, #3b3b3b); } .dcg-segmented-control-layout .dcg-segmented-control-btn.dcg-depressed:not(.dcg-selected) { background: var(--segmented-control-button-background-color-selected, rgba(0,0,0,0.05)); } .dcg-segmented-control-layout .dcg-segmented-control-btn:first-of-type { border-top-left-radius: var(--segmented-control-button-border-radius, var(--segmented-control-button-border-radius, 0.1875em)); border-bottom-left-radius: var(--segmented-control-button-border-radius, var(--segmented-control-button-border-radius, 0.1875em)); } .dcg-segmented-control-layout .dcg-segmented-control-btn:last-of-type { border-top-right-radius: var(--segmented-control-button-border-radius, var(--segmented-control-button-border-radius, 0.1875em)); border-bottom-right-radius: var(--segmented-control-button-border-radius, var(--segmented-control-button-border-radius, 0.1875em)); } .dcg-segmented-control-layout .dcg-segmented-control-btn.dcg-selected { color: var(--segmented-control-button-font-color-selected, #fff); position: relative; } .dcg-segmented-control-grid { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; } .dcg-segmented-control-grid .dcg-segmented-control-btn { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; color: var(--segmented-control-button-font-color, #3b3b3b); min-height: var(--segmented-control-button-height, 40px); padding: var(--segmented-control-button-button-padding, 0 4px); font-weight: var(--segmented-control-button-font-weight); text-align: center; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border: var(--segmented-control-button-border, 1px solid #bdbdbd); border-radius: 0; } .dcg-segmented-control-grid .dcg-segmented-control-btn.dcg-hovered:not(.dcg-selected) { border-color: var(--segmented-control-button-border-color-hover, #9c0d63); } .dcg-segmented-control-grid .dcg-segmented-control-btn.dcg-selected { border: var(--segmented-control-button-border-selected, 1px solid #3278c8); background: var(--segmented-control-button-background-selected, #3278c8); -webkit-box-shadow: var(--segmented-control-button-box-shadow-selected); box-shadow: var(--segmented-control-button-box-shadow-selected); } .dcg-segmented-control-grid .dcg-segmented-control-btn.dcg-padded-segmented-control-btn { padding: 6px 4px; height: auto; } .dcg-segmented-control-grid .dcg-segmented-control-btn i { font-size: 120%; margin-right: 4px; vertical-align: middle; } .dcg-segmented-control-grid .dcg-segmented-control-btn:not(:last-of-type):not(.dcg-selected):not(.dcg-hovered) { border-right: 0; } .dcg-segmented-control-grid .dcg-segmented-control-btn.dcg-selected, .dcg-segmented-control-grid .dcg-segmented-control-btn.dcg-hovered { z-index: 1; } .dcg-segmented-control-grid .dcg-segmented-control-btn.dcg-selected:not(:last-of-type), .dcg-segmented-control-grid .dcg-segmented-control-btn.dcg-hovered:not(:last-of-type) { margin-right: var(--segmented-control-button-offset-center-border, -1px); } .dcg-segmented-control-grid .dcg-segmented-control-btn.dcg-hovered:not(.dcg-selected) { color: var(--segmented-control-button-font-color-hover, #3b3b3b); } .dcg-segmented-control-grid .dcg-segmented-control-btn.dcg-depressed:not(.dcg-selected) { background: var(--segmented-control-button-background-color-selected, rgba(0,0,0,0.05)); } .dcg-segmented-control-grid .dcg-segmented-control-btn:first-of-type { border-top-left-radius: var(--segmented-control-button-border-radius, var(--segmented-control-button-border-radius, 0.1875em)); border-bottom-left-radius: var(--segmented-control-button-border-radius, var(--segmented-control-button-border-radius, 0.1875em)); } .dcg-segmented-control-grid .dcg-segmented-control-btn:last-of-type { border-top-right-radius: var(--segmented-control-button-border-radius, var(--segmented-control-button-border-radius, 0.1875em)); border-bottom-right-radius: var(--segmented-control-button-border-radius, var(--segmented-control-button-border-radius, 0.1875em)); } .dcg-segmented-control-grid .dcg-segmented-control-btn.dcg-selected { color: var(--segmented-control-button-font-color-selected, #fff); position: relative; } @media screen and (max-width: 650px) { .dcg-segmented-control-grid { display: grid; grid-template-columns: 1fr 1fr; } .dcg-segmented-control-grid .dcg-segmented-control-btn { border: 1px solid #bdbdbd; } .dcg-segmented-control-grid .dcg-segmented-control-btn:not(:last-of-type):not(.dcg-selected):not(.dcg-hovered) { border-right: 1px solid #bdbdbd; } .dcg-segmented-control-grid .dcg-segmented-control-btn:first-of-type { border-bottom-left-radius: 0; } .dcg-segmented-control-grid .dcg-segmented-control-btn:last-of-type { border-top-right-radius: 0; } .dcg-segmented-control-grid .dcg-segmented-control-btn:nth-child(2), .dcg-segmented-control-grid .dcg-segmented-control-btn:first-of-type:last-of-type { border-top-right-radius: var(--segmented-control-button-border-radius, 0.1875em); } .dcg-segmented-control-grid .dcg-segmented-control-btn:nth-child(odd):not(:last-of-type):not(.dcg-selected):not(.dcg-hovered) { border-right: 0; } .dcg-segmented-control-grid .dcg-segmented-control-btn:nth-child(odd):last-of-type { grid-column-end: span 2; } .dcg-segmented-control-grid .dcg-segmented-control-btn:nth-child(odd):nth-last-child(-n+2) { border-bottom-left-radius: var(--segmented-control-button-border-radius, 0.1875em); } .dcg-segmented-control-grid .dcg-segmented-control-btn:not(:nth-child(-n+2)):not(.dcg-selected):not(.dcg-hovered) { border-top: 0; } .dcg-segmented-control-grid .dcg-segmented-control-btn.dcg-selected:not(:last-of-type), .dcg-segmented-control-grid .dcg-segmented-control-btn.dcg-hovered:not(:last-of-type) { margin-right: 0; } .dcg-segmented-control-grid .dcg-segmented-control-btn.dcg-selected:not(:nth-child(-n+2)), .dcg-segmented-control-grid .dcg-segmented-control-btn.dcg-hovered:not(:nth-child(-n+2)) { margin-top: -1px; min-height: calc(($height + 1)); } .dcg-segmented-control-grid .dcg-segmented-control-btn.dcg-selected:nth-child(odd):not(:last-of-type), .dcg-segmented-control-grid .dcg-segmented-control-btn.dcg-hovered:nth-child(odd):not(:last-of-type) { margin-right: -1px; } } /* src/stylesheets/teacher/footer.styl */ .page-wrapper { position: absolute; top: 0; width: 100%; min-height: 100%; } .page-wrapper.teacher-page { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-bottom: inherit; } .footer { width: 100%; background: #e9e9e9; position: relative; } .footer .footer-link-container { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-pack: space-evenly; -moz-box-pack: space-evenly; -o-box-pack: space-evenly; -ms-flex-pack: space-evenly; -webkit-justify-content: space-evenly; justify-content: space-evenly; padding: 30px 15px; } .footer .footer-branding-and-announcement { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .footer .footer-branding-and-announcement .language-picker { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .footer .footer-branding-and-announcement .dcg-shared-dropdown-popover-container { width: 280px; height: 100%; margin: 10px auto; } .footer .footer-branding-and-announcement .dcg-shared-dropdown-popover-container .language-settings { white-space: nowrap; } .footer .footer-branding-and-announcement .dcg-shared-dropdown-popover-container .btn-gray-outline { display: inline-block; padding: 4px 7px; line-height: initial; border-color: #bdbdbd; background: #fff; } .footer .footer-branding-and-announcement .dcg-shared-dropdown-popover-container .btn-gray-outline.dcg-hovered { border-color: #bdbdbd; } .footer .footer-branding-and-announcement .dcg-shared-dropdown-popover-container .language-dropdown { text-align: left; font-size: 90%; } .footer .footer-branding-and-announcement .dcg-shared-dropdown-popover-container .language-dropdown .popover-interior .arrow.pops-up { right: 50% !important; } .footer .footer-branding-and-announcement .dcg-footer-logo { margin: auto; margin-left: 20px; width: 120px; } .footer .footer-branding-and-announcement .dcg-footer-logo img { width: 85%; margin-top: 5px; margin-bottom: 5px; } .footer .gray-link { font-size: 15px; } .footer .footer-link-section { text-align: left; margin: auto 0; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -o-box-orient: horizontal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: end; -moz-box-align: end; -o-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .footer .footer-link-section .footer-link-section-title { color: #3b3b3b; text-transform: uppercase; font-size: 14px; font-weight: 400; margin-bottom: 10px; } .footer .footer-link-section .footer-link-section-column { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding-right: 50px; } .footer .footer-link-section .footer-link-section-column .footer-link { margin-bottom: 10px; white-space: nowrap; } .footer .footer-bottom-links { font-size: 90%; width: 100%; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -moz-box-pack: justify; -o-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; padding: 15px; background: #464646; color: #fff; } .footer .footer-bottom-links .footer-links { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .footer .footer-bottom-links .social { padding: 5px; } .footer .footer-bottom-links .social .social-text { color: #fff; } .footer .footer-bottom-links .social a span { text-decoration: underline; } .footer .footer-bottom-links .social a:active span { text-decoration: underline; text-decoration-color: #fff; } .footer .footer-bottom-links .social a:hover span { text-decoration: none; } .footer .footer-bottom-links .legal { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; text-decoration-color: #fff; } .footer .footer-bottom-links .legal .legal-text { display: inline-block; padding: 0 10px; color: #fff; } .footer .footer-bottom-links .legal a { text-decoration: underline; color: #fff; } .footer .footer-bottom-links .legal a:active { text-decoration: underline; } @media screen and (max-width: 1199px) { .footer .footer-link-section { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -moz-box-align: start; -o-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .footer .logo-section { margin-bottom: 10px; } .footer .footer-branding-and-announcement { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: initial; -ms-flex: initial; flex: initial; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: box; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; -o-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; text-align: center; } .footer .footer-bottom-links { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .footer .footer-bottom-links .social { padding-bottom: 15px; } .footer .footer-bottom-links .legal { padding-bottom: 15px; } .footer .footer-bottom-links .legal .legal-text { padding: 0 5px; } } @media screen and (max-width: 767px) { .footer .footer-link-container { -webkit-box-lines: multiple; -moz-box-lines: multiple; -o-box-lines: multiple; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .footer .footer-link-container .footer-branding-and-announcement { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: 1 1 650px; -ms-flex: 1 1 650px; flex: 1 1 650px; } .footer .footer-link-container .footer-branding-and-announcement .logo-section { margin: auto; } .footer .footer-link-container .footer-link-section:not(.footer-branding-and-announcement) { padding-top: 20px; } .footer .footer-link-container .footer-link-section-column { padding: 0; } .footer .footer-bottom-links .legal { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } } @media screen and (max-width: 575px) { .footer { font-size: 95%; } .footer .footer-link-container { -webkit-box-orient: vertical; -moz-box-orient: vertical; -o-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -moz-box-align: center; -o-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .footer .footer-link-container .footer-link-section:not(.footer-branding-and-announcement) { width: 180px; -ms-flex-line-pack: center; -webkit-align-content: center; align-content: center; } .footer .footer-link-container .footer-branding-and-announcement { -webkit-box-flex: 1; -moz-box-flex: 1; -o-box-flex: 1; box-flex: 1; -webkit-flex: initial; -ms-flex: initial; flex: initial; } .footer .footer-bottom-links { text-align: center; } .footer .footer-bottom-links .legal .legal-text.copyright-year { width: 100%; border-left: none; padding-top: 5px; } } @media screen and (max-width: 400px) { .footer .footer-branding-and-announcement { padding: 10px 0; } .footer .footer-link-section.resources-section { display: none; } }